/* コマドリ ブランド（brand/BRAND.md）
   Orange は面・装飾のみ。文字は明るい背景で Text Orange、暗い背景で Text Orange (Dark)。
   Orange の面に載せる文字は Ink（4.96:1）。白文字は使わない。 */
:root {
  --bg: #faf5ec;            /* Paper */
  --surface: #fffdf8;
  --text: #2a2320;          /* Ink */
  --muted: #6e625b;
  --line: #e6dccb;
  --accent: #ee6a2f;        /* Orange（面） */
  --accent-text: #2a2320;   /* Orange の面の上の文字 */
  --link: #b4431a;          /* Text Orange（明） */
  --ok: #1f7a4f;
  --radius: 14px;
  --font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Noto Sans JP", "Hiragino Sans", "Meiryo", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
/* 韓国語・繁体字中国語は端末のフォントに切り替える（自前のフォントはハングルを含まず、漢字は日本の字形のため）。日本語のフォントを先に置かないこと */
:lang(ko) {
  --font-head: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}
:lang(zh-Hant) {
  --font-head: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  --font-body: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1715;          /* Night */
    --surface: #26201d;
    --text: #faf5ec;
    --muted: #b5a99f;
    --line: #3b332e;
    --link: #f4895a;        /* Text Orange (Dark) */
    --ok: #5fcf9a;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 var(--font-body);
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
h1, h2 { font-family: var(--font-head); }
button, input { font: inherit; color: inherit; }
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: block; line-height: 0; text-decoration: none; }
.brand img { display: block; height: 42px; width: auto; margin: -5px 0 -5px -4px; }
[hidden] { display: none !important; }
main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; }
main.wide { max-width: 1200px; }
main.join-wide { max-width: 960px; }
main.join-wide .narrow { max-width: none; }
h1 { font-size: 22px; margin: 8px 0 12px; font-weight: 700; }
h2 { font-size: 16px; margin: 24px 0 8px; color: var(--muted); font-weight: 700; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-text); font-weight: 700; text-decoration: none;
}
.btn:disabled { opacity: .5; cursor: default; }
.ghost { text-decoration: none; background: transparent; border: 1px solid var(--line); color: var(--text); padding: 6px 12px; border-radius: 999px; cursor: pointer; font-weight: 500; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
input[type=text] {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg);
}
.banner { border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--line); background: var(--surface); }
.banner.active { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.banner strong { font-size: 18px; display: block; }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; }
.badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.badge.now { background: var(--accent); color: var(--accent-text); border-color: transparent; font-weight: 700; }
.badge.late { color: var(--link); border-color: var(--link); }
.world { font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.grid a { display: block; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 16/9; position: relative; }
.grid img { width: 100%; height: 100%; object-fit: cover; }
.grid span { position: absolute; left: 6px; bottom: 6px; font-size: 12px; background: rgba(0,0,0,.6); color: #fff; padding: 0 6px; border-radius: 6px; }
ul.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
ul.people li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.code { font: 700 22px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.empty { text-align: center; padding: 32px 16px; }
.hero { text-align: center; padding: 32px 0; }
.hero h1 { font-size: 28px; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--text); color: var(--bg); z-index: 80; padding: 8px 16px; border-radius: 999px; font-size: 14px; }

.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 4px; }
.chips a { white-space: nowrap; text-decoration: none; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.chips a[aria-current] { background: var(--text); color: var(--bg); border-color: var(--text); }
.tile {
  position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
  aspect-ratio: 1 / 1; background: linear-gradient(135deg, #4a3a32, #1b1715); color: #fff; cursor: pointer; text-align: left;
}
.player { position: fixed; inset: 0; z-index: 50; background: #000; color: #fff; display: grid; place-items: center; }
.player-stage { position: absolute; inset: 0; display: grid; place-items: center; } /* 高さ 100% は iPhone の Safari で決まらず、動画が元の大きさに広がった（2026-10-10）。四隅に貼る */
.player-stage video, .player-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* 画面の映像 + 自撮りの窓（タップで入れ替え） */
/* 幅は画面（vw・dvh）で決める。iPhone の Safari（WebKit）では、グリッドの中の 100% が中身の大きさで決まり、390px の画面で 1500×844 に広がって真ん中だけ映った（2026-10-13 のオーナーの指摘「拡大するとめちゃくちゃ拡大される」） */
.pip-wrap { --ratio: 1.7778; position: relative; width: min(100vw, calc(100vh * var(--ratio))); width: min(100vw, calc(100dvh * var(--ratio))); max-width: 100%; max-height: 100%; aspect-ratio: var(--ratio); }
.pv { position: absolute; overflow: hidden; background: #000; }
.pv video { width: 100%; height: 100%; object-fit: contain; display: block; max-width: none; max-height: none; }
.pv.main { inset: 0; z-index: 0; }
.pv.inset { right: 8px; bottom: 8px; width: 30%; aspect-ratio: 16 / 9; z-index: 2; border-radius: 12px; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 2px 10px rgba(0,0,0,.6); cursor: pointer; }
.pv.inset video { object-fit: cover; }
.pv.inset:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.player-progress { position: absolute; top: 10px; left: 12px; right: 100px; display: flex; gap: 4px; z-index: 2; }
.player-progress span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); }
.player-progress span.done { background: #fff; }
.player-close { position: absolute; top: 2px; right: 8px; z-index: 3; background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; padding: 6px 10px; }
.player-prev, .player-next { position: absolute; top: 0; bottom: 0; width: 35%; background: none; border: 0; cursor: pointer; z-index: 1; }
.player-prev { left: 0; }
.player-next { right: 0; }
.player-caption .badge.now { margin-left: 6px; }
.player-caption button { display: block; margin-top: 8px; color: #fff; border-color: rgba(255,255,255,.5); background: rgba(0,0,0,.35); }
.player-caption { position: absolute; left: 16px; right: 16px; bottom: 20px; z-index: 2; text-shadow: 0 1px 3px #000; }
.group { display: grid; gap: 10px; margin-bottom: 12px; }
.small-code { font-size: 16px; }
/* グループの「Discord に朝のお知らせ」 */
.webhook { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.webhook p { margin: 0; }
.webhook .warn { color: var(--link); font-weight: 700; }
.webhook summary { cursor: pointer; }
.webhook .steps { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 2px; }
.webhook form input { min-width: 0; flex: 1; }
.webhook .code { overflow-wrap: anywhere; font-size: 13px; letter-spacing: 0; font-weight: 500; }
.member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.member-list li { font-size: 13px; padding: 2px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }

/* 夜のタイトル・称号 */
.night { display: grid; gap: 10px; margin: 4px 0 12px; }
.trophies { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.trophies li { font-size: 13px; padding: 2px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.night > .ghost { justify-self: start; }

/* 今日の画面: クリップを最初の画面に入れるための、小さな見出し・チップ */
.now-line { margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; overflow-wrap: anywhere; }

/* カード作成ダイアログ */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal-body { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 10px; }
.modal-body h2 { margin: 0; }

/* 招待リンク・チェックリスト・接続 */
.stack { display: grid; gap: 8px; justify-items: start; }
.btn.big { padding: 14px 24px; font-size: 17px; width: 100%; max-width: 360px; text-align: center; }
.invite h1 { font-size: 30px; margin: 4px 0; overflow-wrap: anywhere; }
.hero .btn.big { margin-top: 8px; }
.checklist { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; }
.check { display: grid; grid-template-columns: 28px 1fr; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.check.done { border-color: var(--ok); }
.check .mark { font-size: 20px; line-height: 1.3; }
.check strong { font-size: 16px; }
.check .stack > * { max-width: 100%; }
.device { text-align: center; padding: 16px 0; display: grid; gap: 12px; justify-items: center; }
.device .card { text-align: left; width: 100%; }

.btn:hover:not(:disabled) { filter: brightness(1.05); }
.btn:active:not(:disabled) { filter: brightness(.95); }
.ghost:hover { border-color: var(--muted); }
main p a:not([class]) { color: var(--link); }

/* フッター（/terms・/privacy の静的ページだけが使う。アプリの画面にはフッターを置かない。運営者・表記は /about） */
.site-footer { border-top: 1px solid var(--line); padding: 24px 0 32px; font-size: 13px; color: var(--muted); }
.site-footer .inner { max-width: 1040px; margin: 0 auto; padding: 0 16px; display: grid; gap: 10px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer a { color: var(--muted); padding: 2px 0; }
.site-footer a:hover { color: var(--text); }
.site-footer .op { color: var(--text); }
.site-footer .disclaimer { margin: 0; }

/* 準備中ページ */
.pending { text-align: center; padding: 56px 16px; display: grid; gap: 8px; justify-items: center; }
.pending img { width: 72px; height: 72px; }
.pending h1 { margin: 8px 0 0; }

/* ランディング（ログイン前のトップ） */
body.is-landing .top { display: none; }
.landing { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; padding-bottom: 8px; }
/* どの段も列の幅を超えない（iPhone の Safari だけ、折り返さない部品の最小の幅で列が広がり、右の余白が消えて見切れた。2026-10-21） */
.landing > *, .landing-hero > *, .landing-cta-block > * { min-width: 0; max-width: 100%; }
.landing-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.landing-bar .brand img { height: 60px; margin: -7px 0 -7px -6px; }
/* 列は画面の幅を超えない（中身の最小の幅で列が広がると、iPhone の Safari は画面ごと横に広げてヘッダーまで見切れる） */
.landing-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
.landing-hero > * { min-width: 0; }
body.is-landing { overflow-x: clip; }
.landing-hero .hero-text { min-width: 0; }
.landing-hero .hero-actions { min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ヒーローの絵（動画か、ポスターの静止画。どちらも 720×720 の角丸カード） */
.hero-loop { margin: 0; justify-self: center; width: min(100%, 360px); }
/* スマホ（1 列）: 主のボタンを動画より上に（ファーストビューにボタンを。2026-10-25 のオーナー）。広い画面は下の grid-template-areas で並ぶ */
.landing-hero .hero-text { order: 0; } .landing-hero .hero-actions { order: 1; } .landing-hero .hero-loop { order: 2; }
.hero-loop video, .hero-loop img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1; border-radius: 24px; background: #1b1715; box-shadow: 0 18px 40px -22px rgba(42,35,32,.55); }
/* ヒーローの絵（app.js の heroFigure。5:3。撮る 1 本 → 引いて 3×3 のログの真ん中のマス。10 秒のループ） */
.hero-loop.hl { position: relative; width: 100%; aspect-ratio: 5 / 3; overflow: hidden; border-radius: 22px; background: #1b1715; box-shadow: 0 18px 40px -22px rgba(42,35,32,.55); container-type: inline-size; }
.hl video, .hl img { box-shadow: none; border-radius: 0; aspect-ratio: auto; background: transparent; }
.hl-stage { position: absolute; inset: 0; transform-origin: 50% 50%; animation: hl-zoom 10s infinite; will-change: transform; }
.hl-grid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hl-center { position: absolute; overflow: hidden; }
.hl-center-v { width: 100%; height: 100%; object-fit: cover; }
.hl-tag { position: absolute; pointer-events: none; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); animation: hl-tags 10s infinite; }
.hl-time { position: absolute; inset: 0; display: grid; place-items: center; font: 500 3.4cqw/1 var(--font-head); font-variant-numeric: tabular-nums; }
.hl-cap { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font: 700 2.4cqw/1.2 var(--font-head); padding: 0 4%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-flash { position: absolute; inset: 0; background: #fff; pointer-events: none; animation: hl-flash 10s infinite; }
.hl-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.05) 30%, rgba(0,0,0,.55)); pointer-events: none; animation: hl-dim 10s infinite; }
.hl-cue { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 1.6cqw; padding: 1.8cqw 3.6cqw 1.8cqw 2.2cqw; border-radius: 999px; background: #f26b2a; color: #fff; font: 900 4.6cqw/1 var(--font-head); white-space: nowrap; box-shadow: 0 1.2cqw 3cqw rgba(0,0,0,.45); animation: hl-cue 10s infinite; }
.hl-cue-dot { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: #fff; animation: hl-ping 10s infinite; }
.hl-frame { position: absolute; inset: 0; border: 1.1cqw solid #e5392f; border-radius: inherit; pointer-events: none; animation: hl-frame 10s infinite; }
.hl-rec { position: absolute; left: 3.5%; top: 6%; display: flex; align-items: center; gap: 1.3cqw; padding: 1.2cqw 2.6cqw; border-radius: 999px; background: #e5392f; color: #fff; font: 900 3.4cqw/1 var(--font-head); box-shadow: 0 .8cqw 2cqw rgba(0,0,0,.4); animation: hl-rec 10s infinite; }
.hl-rec i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #fff; animation: hl-blink 1s infinite; }
.hl-count { position: absolute; right: 4%; top: 4%; font: 900 9cqw/1 var(--font-head); color: #fff; text-shadow: 0 .6cqw 2cqw rgba(0,0,0,.55); }
.hl-count span { position: absolute; right: 0; top: 0; opacity: 0; }
.hl-count span:nth-child(1) { animation: hl-c1 10s infinite; }
.hl-count span:nth-child(2) { animation: hl-c2 10s infinite; }
.hl-count span:nth-child(3) { animation: hl-c3 10s infinite; }
@keyframes hl-dim { 0%, 3% { opacity: 0; } 6%, 15% { opacity: 1; } 18%, 100% { opacity: 0; } }
@keyframes hl-cue { 0%, 3% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 6% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 8%, 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 17%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } }
@keyframes hl-ping { 0%, 6% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 11% { box-shadow: 0 0 0 2.2cqw rgba(255,255,255,0); } 11.1%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@keyframes hl-frame { 0%, 18% { opacity: 0; } 20%, 40% { opacity: 1; } 43%, 100% { opacity: 0; } }
@keyframes hl-rec { 0%, 18% { opacity: 0; transform: scale(.8); } 20%, 40% { opacity: 1; transform: scale(1); } 43%, 100% { opacity: 0; transform: scale(1); } }
@keyframes hl-c1 { 0%, 19.5% { opacity: 0; transform: scale(1.6); } 20.5% { opacity: 1; transform: scale(1); } 27%, 100% { opacity: 0; transform: scale(1); } }
@keyframes hl-c2 { 0%, 27.5% { opacity: 0; transform: scale(1.6); } 28.5% { opacity: 1; transform: scale(1); } 35%, 100% { opacity: 0; transform: scale(1); } }
@keyframes hl-c3 { 0%, 35.5% { opacity: 0; transform: scale(1.6); } 36.5% { opacity: 1; transform: scale(1); } 42%, 100% { opacity: 0; transform: scale(1); } }
@keyframes hl-zoom {
  0%, 42% { transform: scale(3.226); animation-timing-function: cubic-bezier(.6, 0, .2, 1); }
  55%, 88% { transform: scale(1); animation-timing-function: cubic-bezier(.6, 0, .25, 1); }
  100% { transform: scale(3.226); }
}
@keyframes hl-tags { 0%, 52% { opacity: 0; } 57%, 85% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes hl-flash { 0%, 16% { opacity: 0; } 17% { opacity: .85; } 21%, 100% { opacity: 0; } }
@keyframes hl-blink { 50% { opacity: .25; } }
.hl-still .hl-stage, .hl-still .hl-tag { animation: none; transform: none; opacity: 1; }
.hl-still .hl-cue, .hl-still .hl-flash, .hl-still .hl-rec, .hl-still .hl-dim, .hl-still .hl-frame, .hl-still .hl-count { display: none; }
@media (prefers-reduced-motion: reduce) { .hl-stage, .hl-tag { animation: none !important; transform: none !important; opacity: 1 !important; } .hl-cue, .hl-flash, .hl-rec, .hl-dim, .hl-frame, .hl-count { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-loop video { display: none; } }
/* 下の段（3 つ。小さな絵 1 つ + 見出し + 1 行） */
.landing-blocks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.landing-blocks li { display: grid; grid-template-columns: 120px 1fr; gap: 4px 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.landing-blocks img { grid-row: 1 / span 2; width: 120px; height: auto; aspect-ratio: 3 / 2; border-radius: 10px; background: #1b1715; }
.landing-blocks h3 { margin: 0; align-self: end; font: 700 16px/1.4 var(--font-head); }
.landing-blocks p { margin: 0; align-self: start; color: var(--muted); font-size: 14px; line-height: 1.6; }
/* ログインの専用画面（/login） */
.login-card { width: 100%; max-width: 420px; margin: 0 auto; display: grid; gap: 14px; padding: 24px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.login-card h1 { margin: 0; font-size: 24px; text-align: center; }
.login-card .login-pair { flex-direction: column; flex-wrap: nowrap; }
.login-card .login-opt { flex: none; }
.login-card .btn.big, .login-card a.google-btn { width: 100%; }
.login-tagline { margin: -4px 0 14px; font-size: 14px; }
.login-card .cta-secondary { text-align: center; }
.login-card .consent-note { margin: 0; text-align: center; }
.landing-hero h1 { margin: 0; font-size: clamp(25px, 7.4vw, 34px); line-height: 1.3; font-weight: 900; letter-spacing: 0; }
html:not([lang="ja"]) .landing-hero h1 { font-size: clamp(22px, 6.1vw, 30px); }
.landing-hero .lead { text-wrap: balance; }
.landing-hero h1 span { display: block; }
.landing-hero .lead { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 34em; }
.landing-hero .btn.big { max-width: none; width: 100%; }
.landing-hero .note { margin: 12px 0 0; }
.linklike { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; cursor: pointer; font: inherit; }
.landing-cta-block { display: grid; gap: 10px; margin-top: 4px; justify-items: start; }
.landing-cta-block .btn.big { max-width: 360px; }
.landing-cta-block .cta-secondary-row { margin-top: 6px; }
@media (max-width: 520px) { .landing-cta-block, .landing-cta-block .cta-secondary-row { justify-items: stretch; width: 100%; } .landing-cta-block .cta-secondary { flex: 1 1 100%; text-align: center; } }
.landing-cta .landing-cta-block { justify-items: center; }
.landing-cta .landing-cta-block .btn.big { width: 100%; }
/* SmartScreen（青い画面）の見本。Windows の画面を真似た絵なので、ライト・ダークで色を変えない */
.smartscreen-note { text-align: left; }
.smartscreen-note summary { cursor: pointer; color: var(--muted); }
.smartscreen-note[open] .ss-mock { margin-top: 8px; }
.smartscreen-note p { margin: 6px 0 0; color: var(--text); font-weight: 700; }
.more summary { cursor: pointer; color: var(--muted); }
.more p { margin: 6px 0 0; }
.ss-mock { display: flex; align-items: center; gap: 6px; max-width: 360px; pointer-events: none; user-select: none; }
.ss-panel { flex: 1 1 0; min-width: 0; display: grid; gap: 4px; padding: 8px 9px; background: #0b57a4; color: #fff; border-radius: 4px; font-size: 10px; line-height: 1.4; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); text-align: left; }
.ss-panel strong { font-size: 11px; }
.ss-title { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.9); color: #0b57a4; display: grid; place-items: center; font: 800 10px/1 var(--font-head); }
.ss-body { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-link { justify-self: start; text-decoration: underline; font-weight: 700; outline: 2px solid #ffd24a; outline-offset: 2px; border-radius: 2px; }
.ss-actions { display: flex; gap: 6px; }
.ss-run, .ss-cancel { padding: 2px 8px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.5); }
.ss-run { background: #fff; color: #0b57a4; font-weight: 800; outline: 2px solid #ffd24a; outline-offset: 2px; }
.ss-arrow { color: var(--muted); font-weight: 800; }

/* トップの合言葉の欄（ヒーローのすぐ下。docs/INVITE_IN_WORLD.md §1.5）。入力は 16px（それより小さいと iOS が拡大する）、ボタンは横に並べたまま */
.landing-passphrase { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.landing-passphrase form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; max-width: 520px; }
.landing-passphrase label { font: 700 15px/1.5 var(--font-head); }
.landing-passphrase p { margin: 0; }
.passphrase-row { display: flex; gap: 8px; align-items: stretch; }
/* iPhone の Safari は入力欄の既定の幅（size）を最小の幅にするので、幅 0 から伸ばす（でないと行が枠より広がり、ページ全体が縮んで見えた。2026-10-21） */
.passphrase-row { min-width: 0; }
.passphrase-row input[type=text] { flex: 1 1 0; width: 0; min-width: 0; font-size: 16px; padding: 10px 12px; }
.passphrase-row .btn { flex: 0 0 auto; padding: 10px 20px; }
/* /j/ の「合言葉が見つかりません」（入れ直す欄つき）・「ログインすると開けます」。カードは真ん中寄せ、欄の中は左寄せ */
.short-join { display: grid; gap: 12px; justify-items: center; }
.short-join h1, .short-join > p { margin: 0; }
.short-join .passphrase-open { display: grid; gap: 8px; width: 100%; max-width: 520px; margin: 4px 0; text-align: left; }
.short-join .passphrase-open label { font: 700 15px/1.5 var(--font-head); }
.short-join .passphrase-open p { margin: 0; }
.short-join .login-choice { width: 100%; max-width: 420px; }
.short-join .consent-note { margin: 0; }
.landing-cta { text-align: center; padding: 28px 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 12px; justify-items: center; }
.landing-cta h2 { margin: 0; font-size: 20px; color: var(--text); }
.landing-cta .btn.big { max-width: 360px; }

@media (min-width: 820px) {
  .landing { gap: 88px; padding-top: 8px; }
  .landing-hero { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "text fig" "actions fig"; grid-template-rows: auto auto; align-content: center; gap: 0 40px; }
  .landing-hero .hero-text { grid-area: text; align-self: end; }
  .landing-hero .hero-actions { grid-area: actions; align-self: start; margin-top: 24px; }
  .landing-hero .hero-loop { grid-area: fig; align-self: center; width: 100%; justify-self: end; }
  .landing-hero h1 { font-size: clamp(28px, 3.2vw, 40px); }
  html:not([lang="ja"]) .landing-hero h1 { font-size: clamp(24px, 2.9vw, 36px); }
  .landing-hero .lead { margin-top: 18px; }
  .landing-blocks ul { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .landing-blocks li { grid-template-columns: 1fr; padding: 14px; }
  .landing-blocks img { grid-row: auto; width: 100%; }
  .landing-blocks h3, .landing-blocks p { align-self: auto; }
  .landing-hero .btn.big { width: auto; min-width: 300px; }
  /* Discord と Google を並べるとき（Windows 以外の PC）は、2 つで列の幅に収める（1 つずつの最小幅 300px は、ダウンロードのボタンだけ） */
  .landing-hero .login-choice { width: 100%; max-width: 520px; }
  .landing-hero .login-opt { flex: 1 1 13.5rem; }
  .landing-hero .login-opt > .btn.big { min-width: 0; width: 100%; padding-left: 18px; padding-right: 18px; }
}
@media (prefers-color-scheme: dark) {
  .hero-loop video, .hero-loop img { box-shadow: 0 18px 40px -22px rgba(0,0,0,.8); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: filter .15s; }
}
main:not(.wide) + .site-footer .inner { max-width: 640px; }

/* 通報・ブロック・アカウント・管理 */
:root { --danger: #b3261e; --danger-text: #b3261e; }
@media (prefers-color-scheme: dark) { :root { --danger: #e8685e; --danger-text: #ff9a90; } .btn.danger { color: #1b1715; } }
textarea { width: 100%; min-height: 84px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); resize: vertical; font: inherit; color: inherit; }
input[type=text]:focus-visible, textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.btn.danger { background: var(--danger); color: #fff; }
.ghost.danger { color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.player-more { position: absolute; top: 2px; right: 50px; z-index: 3; background: none; border: 0; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 6px 10px; min-width: 44px; min-height: 44px; }
.player-menu { position: absolute; top: 46px; right: 12px; z-index: 4; min-width: 200px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: grid; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.player-menu button { background: none; border: 0; text-align: left; padding: 11px 12px; border-radius: 8px; cursor: pointer; min-height: 44px; }
.player-menu button:hover, .player-menu button:focus-visible { background: color-mix(in srgb, var(--text) 8%, transparent); }
.player-menu button.danger { color: var(--danger-text); }
.modal-body .reasons { display: grid; gap: 4px; border: 0; padding: 0; margin: 0; }
.modal-body .reasons legend { padding: 0; margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.modal-body .reasons label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.modal-body .reasons label:has(input:checked) { border-color: var(--link); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.modal-body .reasons input { margin-top: 5px; accent-color: var(--accent); }
.modal-body .actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.notice { border-radius: var(--radius); padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.stack-lg { display: grid; gap: 12px; }
.admin-report { display: grid; gap: 10px; }
.admin-report video { width: 100%; max-height: 360px; background: #000; border-radius: 10px; }
.admin-report .selfie-note { font-size: 12px; }
.pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger-text); }
.admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.admin-list > li.admin-report { display: grid; }
.admin-report .row > button { flex: 1 1 auto; }
/* 参加・フレンド申請の確認画面、ツールとの接続 */
.invite-confirm { justify-items: stretch; }
.invite-confirm h1 { margin: 0; overflow-wrap: anywhere; }
.invite-confirm .btn, .invite-confirm .ghost { text-align: center; }
/* 参加すると見える範囲の 1〜2 行。注意の枠（赤い線・色の面）にはしない（警告に見えて、いちばん大きな塊になっていた。2026-10-07 の指摘） */
.visibility-note { margin: 4px 0; font-size: 14px; color: var(--muted); }
.warn-box { margin: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--link); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); font-weight: 700; }
.device .stack > form, .device form.stack { justify-items: stretch; width: 100%; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
/* 利用状況の計測（GA）の同意バナーと、アカウント画面のオン・オフ */
.ga-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; max-width: 560px; margin-inline: auto;
  display: grid; gap: 6px; padding: 14px 16px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
}
.ga-banner p { margin: 0; }
.ga-banner .ga-title { font-family: var(--font-head); font-weight: 700; font-size: 15px; line-height: 1.5; }
.ga-banner a { color: var(--link); margin-left: 4px; }
.ga-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.ga-actions .btn, .ga-actions .ghost { text-align: center; padding: 10px 12px; font-size: 15px; min-height: 44px; }
body.has-ga-banner { padding-bottom: 210px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.switch-row > span { display: grid; gap: 2px; }
input.switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 48px; height: 28px; margin: 0; border-radius: 999px;
  background: var(--line); border: 1px solid var(--muted); cursor: pointer; transition: background .15s;
}
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text); transition: transform .15s; }
input.switch:checked { background: var(--accent); border-color: var(--accent); }
input.switch:checked::after { transform: translateX(20px); background: var(--accent-text); }
input.switch:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { input.switch, input.switch::after { transition: none; } }

/* 招待・つかいかた・はじめよう */
.btn.sm { padding: 6px 14px; font-size: 14px; min-height: 36px; }
.icon-btn { min-width: 36px; min-height: 36px; padding: 4px 10px; font-weight: 700; line-height: 1; }
a.icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.icon-btn .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn[aria-current="page"] { color: var(--link); border-color: var(--link); }
.link-box { font-size: 14px; letter-spacing: 0; overflow-wrap: anywhere; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-weight: 500; }
.modal-body select { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.stack > label, label.stack { width: 100%; }

.help-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 0; }
.help-track::-webkit-scrollbar { display: none; }
.help-card { flex: 0 0 100%; scroll-snap-align: center; display: grid; gap: 6px; align-content: start; padding: 0 2px; }
.help-card h3 { margin: 4px 0 0; font-family: var(--font-head); font-size: 18px; }
.help-card p { margin: 0; }
.help-dots { display: flex; justify-content: center; gap: 8px; }
.help-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.help-dots i.on { background: var(--accent); width: 20px; border-radius: 999px; }
.ill svg { display: block; width: 100%; height: auto; }
.ill.sm svg { max-width: 220px; margin: 0 auto; }
.ill .fl { fill: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.ill .fl2 { fill: var(--line); }
.ill .fs { fill: var(--surface); }
.ill .fa { fill: var(--accent); }
.ill .fa2 { fill: color-mix(in srgb, var(--accent) 45%, #000); }
.ill .fm { fill: var(--muted); }
.ill .ft { fill: var(--text); }
.ill .fk { fill: #2a2320; }
.ill .st { stroke: var(--text); stroke-width: 1.6; }
.ill .ss { stroke: var(--text); stroke-width: 2; fill: none; }
.ill .pulse { stroke: var(--accent); stroke-dasharray: 3 4; }
.ill .tx { font: 700 12px var(--font-body); }

.setup-card { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.setup-card .btn.big { max-width: none; }
.setup-card > * { max-width: 100%; }
.invite-login .visibility-note { text-align: left; max-width: 420px; margin: 12px auto; }
.device-card { justify-items: center; text-align: center; }
.device-card h1 { font-size: 22px; margin: 4px 0; }
.device-card .btn.big { max-width: 420px; }
.toggle-row { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; cursor: pointer; }
.toggle-row input { margin-top: 4px; accent-color: var(--accent); }
.setup-card { margin-bottom: 12px; }
.setup-card .btn.big { font-size: 16px; padding: 14px 12px; }
.device-card p { text-align: center; }
.toast { width: max-content; max-width: calc(100vw - 32px); text-align: center; }
/* トーストは文だけ（ボタンを入れない）なので、下にあるもの（ホームの 🔔・＋ など）を押す邪魔をしない。ホームでは 🔔・＋（.home-dock）の上に出す
   （狭い窓では 2 行になって 🔔・＋ に重なり、ふさいでいた。2026-10-19 の実機。84px = dock の 16px + ボタンの 56px + 間の 12px。PWA の帯があるときは dock の 64px から） */
.toast { pointer-events: none; }
body:has(.home-dock) .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
body.has-pwa-bar:has(.home-dock) .toast { bottom: calc(132px + env(safe-area-inset-bottom)); }
/* 重ねもの（.modal のシート・メニュー、.player の再生画面）が開いているあいだは、🔔・＋ がその下に隠れるので、上げる理由がない。元の位置（下から 20px）に戻す
   （上げたままだと、右下の［＋］のメニューの下の項目「合言葉で参加」や、下のシートのボタンにかぶっていた。2026-10-19 の見直し）。詳細度は上の 2 つと同じか高く、後ろに書いたので、こちらが効く */
body:has(.home-dock):has(> :is(.modal, .player)) .toast,
body.has-pwa-bar:has(.home-dock):has(> :is(.modal, .player)) .toast { bottom: calc(20px + env(safe-area-inset-bottom)); }

/* ---- ゲスト（ログインせずに始める）・招待ページのティザー・登録 ---- */
.guest-badge {
  display: inline-block; margin-left: .4em; padding: 0 .55em; border: 1px solid var(--line); border-radius: 999px;
  font-size: .72em; font-weight: 700; line-height: 1.6; color: var(--muted); background: var(--surface); vertical-align: .1em; white-space: nowrap;
}
.flash-bar {
  display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; justify-content: center;
  margin: 0; padding: .4rem 16px; font-size: 13px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-bottom: 1px solid var(--line);
}
.flash-bar[hidden] { display: none; }
.flash-bar { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); }
/* ツールの中の「新しいバージョンがあります」の帯（tool-update.js。0.1.8〜）。上に貼りつけて、スクロールしても見えるように */
.tool-update-bar { position: sticky; top: 0; z-index: 55; background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.tool-update-bar .btn.small { min-height: 30px; padding: 3px 14px; font-size: 13px; text-decoration: none; }
.tool-update-progress { width: 140px; max-width: 40vw; height: 8px; accent-color: var(--accent); vertical-align: middle; }
/* ツールの中のホームの「PC の起動時にコマドリを開始しますか？」の帯（tool-autostart.js。1 回だけ）。更新の帯と同じ形で、上には貼りつけない */
.tool-autostart-bar { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.tool-autostart-bar .btn.small { min-height: 30px; padding: 3px 14px; font-size: 13px; text-decoration: none; }
.tool-autostart-bar .ghost.small { min-width: 30px; min-height: 30px; padding: 0 8px; font-size: 16px; line-height: 1; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.cta-secondary, .big-ghost { display: inline-block; text-decoration: none; padding: .55rem 1.1rem; }
.big-ghost { text-align: center; }
.invite-login > .btn.big, .invite-login > .big-ghost { display: block; text-align: center; margin-top: .75rem; }
.teaser { display: grid; gap: .35rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.teaser-title { font: 700 1.25rem/1.4 var(--font-head); }
.mosaic { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 6px; margin: .5rem auto; max-width: 26rem; width: 100%; overflow: hidden; border-radius: 10px; }
.mosaic-tile { display: grid; grid-template: 1fr 1fr / 1fr 1fr; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; filter: blur(7px) saturate(1.05); transform: scale(1.02); }
.mosaic-tile i { display: block; }
.teaser-zero { text-align: center; padding: 1.25rem 1rem; }
.teaser-zero .teaser-title { margin: 0; font-size: 1.05rem; }
.teaser-media { display: grid; }
.reel-wrap { display: grid; gap: .4rem; justify-items: center; margin: .5rem auto; width: 100%; }
.reel { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #1b1715; box-shadow: 0 10px 26px -16px rgba(42,35,32,.6); }
.reel video { display: block; width: 100%; height: 100%; object-fit: cover; background: #1b1715; }
.reel-time { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: rgba(255, 255, 255, .92); font: 500 clamp(14px, 6vw, 28px) / 1 var(--font-head); text-shadow: 0 1px 3px rgba(0, 0, 0, .55); font-variant-numeric: tabular-nums; }
.reel-stamp { position: absolute; left: 10px; bottom: 9px; padding: 2px 8px; border-radius: 6px; background: rgba(27,23,21,.55); color: #faf5ec; font: 700 12px/1.6 var(--font-head, inherit); letter-spacing: .04em; pointer-events: none; }
.reel-dots { position: absolute; right: 10px; bottom: 12px; display: flex; gap: 4px; pointer-events: none; }
.reel-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(250,245,236,.45); }
.reel-dots i.on { background: #faf5ec; }
.reel-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(27,23,21,.6); color: #faf5ec; font-size: 20px; cursor: pointer; }
.reel-play[hidden] { display: none; }
.reel.done video { filter: brightness(.7); }
.reel-again[hidden] { display: none; }
.notice-card, .discord-prompt { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); margin-bottom: 12px; }
.teaser-setting { display: grid; gap: .25rem; }
@media (prefers-reduced-motion: reduce) { .reel-play { transition: none; } }
.guest-card { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.full-notice { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--link); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); font-weight: 700; text-align: left; max-width: 420px; margin-inline: auto; }
.invite-confirm .full-notice { max-width: none; }
.nb { white-space: nowrap; }
.flash-bar { word-break: keep-all; overflow-wrap: anywhere; }
.flash-link { color: var(--link); font-weight: 700; }
.big-line { font-weight: 700; font-size: 16px; }
.download-other { justify-items: stretch; text-align: center; }
.download-other .btn, .download-other .ghost { text-align: center; }
.full-back { display: inline-block; margin: 16px 0; }

/* ホーム画面に追加のカード（スマホだけ。pwa.js）。タブバーの上に、小さく 1 枚 */
.pwa-card {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; max-width: 560px; margin-inline: auto;
  display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
}
.pwa-card p { margin: 0; }
/* 追加のしかた（iOS: 共有 →「ホーム画面に追加」の 2 ステップ）。カードとアカウントの行の両方で使う */
.pwa-guide { display: grid; gap: 8px; }
.pwa-guide p { margin: 0; }
.pwa-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pwa-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; }
.pwa-steps li > span:last-child:not(.pwa-mock) { display: grid; gap: 1px; min-width: 0; }
.pwa-step-art { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 40px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); color: var(--link); }
.pwa-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pwa-step-art.pwa-mock { flex: 1; min-width: 0; overflow: hidden; max-width: 220px; width: auto; justify-content: space-between; gap: 6px; padding: 0 10px; color: var(--text); font-size: 13px; font-weight: 500; white-space: nowrap; }
.pwa-mock .pwa-icon { width: 18px; height: 18px; }
/* ホーム画面から開いたとき（standalone）は、ノッチ・ホームバーを避ける */
@media (display-mode: standalone) {
  .top { padding-top: calc(10px + env(safe-area-inset-top)); }
}

/* 通知の確認カード・設定（pwa.js） */
.push-card { border-top: 3px solid var(--accent); margin-block: 12px; }
.push-card p { margin: 0; }
.push-types { width: 100%; border-top: 1px solid var(--line); padding-top: 12px; }
.push-types .switch-row, .push-card + .card { width: 100%; }
#push-master { flex: none; }
.people .ghost.danger { white-space: nowrap; }

/* ログイン方法の選択（Discord と Google を同じ大きさで並べる。login.js）。Google のボタンは、ブランドガイドラインの中立（白地・灰色の枠。ダークは #131314）。 */
.login-choice { display: grid; gap: .4rem; min-width: 0; }
.invite-login > .login-choice, .device-card .login-choice { margin-top: .75rem; width: 100%; max-width: 420px; justify-self: center; }
.login-pair { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.login-opt { flex: 1 1 11rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.login-opt > a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-align: center; margin-top: 0; max-width: none; width: auto; }
.last-badge { font-size: 11px; line-height: 1.2; text-align: center; color: var(--muted); }
.last-note { margin: 0; text-align: center; }
a.google-btn { background: #fff; border: 1px solid #747775; color: #1f1f1f; font-weight: 500; text-decoration: none; }
a.google-btn:hover { background: #f8f8f8; border-color: #747775; }
a.google-btn svg { flex: none; }
.discord-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.discord-btn svg { flex: none; }
@media (prefers-color-scheme: dark) {
  a.google-btn { background: #131314; border-color: #8e918f; color: #e3e3e3; }
  a.google-btn:hover { background: #1f1f20; border-color: #8e918f; }
}

/* ---- 画面をすっきりさせる（docs/UX_SIMPLIFY.md 塊 1）---- */
/* 今日の画面: タイトルと称号は 1 行（カードにしない）・AI の印 */
.title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0 10px; }
.title-text { font: 900 18px/1.4 var(--font-head); overflow-wrap: anywhere; }
.title-line .trophies { display: inline-flex; }
.pill.ai { background: var(--surface); color: var(--muted); border: 1px solid var(--line); font-size: 11px; padding: 0 7px; }
.banner.active { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.banner.active strong { font-size: 20px; }
.banner-time { font-weight: 700; }
.now-line .now-grid-link { margin-left: 8px; padding: 2px 10px; font-size: 12px; }
/* 空の今日: 点線のタイルの見本＋ラベル＋主役のボタン 1 つ（カード 1 枚） */
.empty-today { justify-items: center; gap: 14px; padding: 24px 16px; }
.tile.ghost { background: transparent; border: 2px dashed color-mix(in srgb, var(--muted) 60%, transparent); cursor: default; }
.empty-label { margin: 0; color: var(--muted); font-weight: 700; }
.empty-today .btn.big { max-width: 360px; }
.empty-today .linklike { color: var(--muted); }
/* 朝の「昨日の結果」: タイトルが昨日の画面へのリンク */
/* 招待のシート */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; justify-self: start; }
.invite-apps { margin-top: 8px; }
.modal-body .discord-prompt { margin: 0; }
.report-who { margin: 0; }
/* 設定の行（/about。塊 2 の設定でも使う） */
.settings-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 12px 16px;
  background: none; border: 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; text-align: left; cursor: pointer; font: inherit;
}
.settings-row:first-child { border-top: 0; }
.settings-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.settings-row .chev { color: var(--muted); }
.back-link { color: var(--link); text-decoration: none; font-size: 14px; justify-self: start; }
.about-op { margin: 0; }
.about-licenses h2 { margin-top: 8px; }
.licenses { margin: 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.licenses a { color: var(--link); }
/* ランディング: フッターの代わりの、小さく薄い 1 行 */
.legal-line { margin: 0; text-align: center; opacity: .85; }
.legal-line a { color: var(--muted); }
.ga-banner .ga-title a { font-weight: 500; white-space: nowrap; }

/* ホーム画面に追加: 1 行の細い帯（タブバーの上）。中身を隠さないよう、ページの下に余白を足す */
.pwa-card.pwa-bar {
  left: 0; right: 0; bottom: 0; max-width: none; margin: 0; border-radius: 0; border: 0; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; min-height: 48px; box-shadow: 0 -4px 16px rgba(0,0,0,.12);
}
.pwa-bar-icon { display: inline-flex; color: var(--link); }
.pwa-bar-icon .pwa-icon { width: 22px; height: 22px; }
.pwa-bar-title { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwa-bar .btn.sm, .pwa-bar .ghost.small { min-height: 34px; padding: 4px 14px; font-size: 13px; }
.pwa-bar-x { min-width: 40px; min-height: 40px; border: 0; color: var(--muted); }
body.has-pwa-bar main { padding-bottom: 96px; }
/* 通知から開いたときの「🔕 この通知の設定」の小さな帯（pwa.js の showPushOrigin。12 秒で消える）。🔔・＋ の上に浮かべる */
.push-origin {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 31;
  display: flex; align-items: center; gap: 2px; padding: 2px 2px 2px 4px; max-width: calc(100vw - 32px);
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.push-origin .ghost.small { border: 0; min-height: 40px; padding: 4px 12px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.push-origin-x { min-width: 40px; min-height: 40px; border: 0; color: var(--muted); }
.push-about { display: grid; gap: 8px; }
.push-about-btn { width: 100%; min-height: 48px; text-align: start; }
.modal.sheet { place-items: end center; padding: 0; }
.modal.sheet .modal-body { border-radius: 16px 16px 0 0; max-width: 560px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

/* ---- 塊 2: なかま・思い出・設定 ---- */
.settings-group.allow-pop { overflow: visible; }
.settings-group.allow-pop .settings-row:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.settings-group.allow-pop .settings-row:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.settings-row .row-end { display: inline-flex; align-items: center; gap: 8px; }
.settings-row .stack { gap: 0; }
.settings-row.switch-row { cursor: pointer; }
.settings-row .ghost.small { padding: 3px 12px; }
.settings-row .btn.sm { min-height: 34px; }
.settings-row.danger-row { color: var(--danger-text); }
.settings-row.hl { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.settings-row.teaser-setting input.switch { flex: none; }
.settings-group .push-types { display: contents; }
/* ツールの設定を設定の画面の中で（tool-settings.js。0.1.30 から） */
.tool-settings .hotkey-value { flex: none; font: inherit; font-weight: 700; padding: 3px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); white-space: nowrap; }
.tool-settings .hotkey-value.recording { border-color: var(--accent); color: var(--link); white-space: normal; max-width: 50%; }
.tool-settings .hotkey-state.warn, .tool-settings .vr-state.unavailable { color: var(--link); font-weight: 700; }
.tool-settings .osc-state.on, .tool-settings .vr-state.connected, .tool-settings .vr-input-priority-state.on { color: var(--ok); }
.tool-settings .osc-state.off { color: var(--muted); }
.tool-settings .hotkey-actions .row { flex-wrap: wrap; gap: 8px; }
.tool-settings details.guide { width: 100%; }
.tool-settings details.guide label { margin-top: 8px; gap: 12px; }
.tool-settings .call-error { margin: 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--link); color: var(--link); font-weight: 700; }
.group-row .group-name { overflow-wrap: anywhere; font-weight: 700; }
.account-card .account-name { font: 700 18px/1.4 var(--font-head); overflow-wrap: anywhere; }
.account-card .btn, .account-card .login-choice { justify-self: stretch; }
.code-line { padding: 4px 0; }
.sheet-danger { justify-content: space-between; margin-top: 4px; }
.linklike.danger-text { color: var(--danger-text); }
.people .code-add { padding: 6px 0; }
.ghost-people { display: flex; gap: 14px; justify-content: center; }
.ghost-person { width: 56px; height: 56px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--muted) 60%, transparent); }
.modal-body .webhook { border-top: 0; padding-top: 0; }

/* ---- 塊 3: ランディング・次の一歩・招待ページ・/device ---- */
/* ランディングの 3 手順: アイコンとラベルだけ（文なし）。スマホでも 3 つ並べる */
.landing-cta .landing-cta-block { gap: 8px; }
/* /device: コード入力は文字のリンク */
.download-other { justify-items: stretch; text-align: center; }
.download-other p { margin: 0; }
/* ランディングの副の行: ログインせずにはじめる ＋ Discord / Google を、できるだけ 1 行に */
@media (max-width: 520px) {
  .landing-cta-block .cta-secondary-row .login-pair { flex-wrap: nowrap; }
  .landing-cta-block .cta-secondary-row .login-opt { flex: 1 1 0; }
  .landing-cta-block .cta-secondary-row .cta-secondary { font-size: 13px; padding: .5rem .6rem; }
}

/* 言語の切り替え（設定・/about）と、お問い合わせ（メールアドレスは選択しやすく） */
/* 選ぶ欄（select）の見た目は shell.css（ツールの画面と同じ） */
.contact .contact-mail { margin: 4px 0 8px; font-size: 18px; font-weight: 700; user-select: all; word-break: break-all; }

/* ランディング・ログインの副のボタンの文は折り返さない（「Google でログイン」が 2 行になっていた） */
.cta-secondary, .google-btn, .login-opt > a { white-space: nowrap; }
.landing-cta-block .cta-secondary-row { align-items: stretch; }
.landing-cta-block .cta-secondary-row > .cta-secondary { text-align: center; }

/* ---- 送り先（docs/SETLOG_ALIGN.md §5）: 範囲のチップの「⋯」・まだ送っていない動画のカード・送り先のシート ---- */
.unsent-card { gap: 10px; }
.unsent-thumbs { display: flex; gap: 6px; }
.unsent-thumbs img, .unsent-ghost { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--line); display: inline-grid; place-items: center; }
.send-clips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.send-clip { position: relative; flex: none; display: grid; gap: 2px; width: 72px; text-align: center; cursor: pointer; }
.send-clip img, .send-clip .unsent-ghost { width: 72px; height: 72px; }
.send-clip input { position: absolute; top: 4px; right: 4px; }
.send-clip-del { position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.unsent-actions { align-items: center; gap: 16px; flex-wrap: wrap; }
html.vr .send-clip-del { width: 40px; height: 40px; font-size: 22px; }
html.vr .send-foot .linklike { font-size: 1.1em; padding: 10px; }
.send-row { cursor: pointer; }
.send-row > .stack { gap: 2px; }

/* ---- 広い画面（900px〜）。docs/DESKTOP_FULL_UI.md §6（左のサイドバーは v3 から出さないので、その形の決まりは 2026-10-12 に外した） ---- */
/* ホームの枠。1200px 未満では、2 つの入れ物を消して（display: contents）、今までと同じ並び（order）にする */
.today { display: flex; flex-direction: column; }
.today-main, .today-side { display: contents; }
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ---- メンバーごとの枠（memberframes.js。ログの 1 日）---- */
.mframes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 8px; }
.mframe { display: grid; gap: 8px; min-width: 0; }
/* 今日のログの自動の読み直しで、新しく来た・変わった枠をふわっと出す（docs/SETLOG_V3.md §1.1）。動きを減らす設定では出すだけ */
.mframe.mf-fresh { animation: mf-fresh .45s ease-out; }
@keyframes mf-fresh { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mframe.mf-fresh { animation: none; } }
.mf-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.mf-name { font-family: var(--font-head); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mf-meta { display: inline-flex; gap: 8px; align-items: baseline; color: var(--muted); font-variant-numeric: tabular-nums; }
.mf-badges { display: inline-flex; gap: 6px; align-items: center; }
.mf-badges .mark { font-size: 18px; line-height: 1; }
.mf-stage {
  position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; cursor: pointer; container-type: inline-size;
  box-shadow: 0 1px 0 var(--line);
}
.mf-stage.now { box-shadow: 0 0 0 2px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); }
.mf-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
/* 枠ごとに video を 2 つ重ねる（2026-10-13 のオーナーの報告「切り替わりがスムーズじゃない」。memberframes.js）。前（.mf-front）だけ見せる。
   入れ替えは、新しい前が 120ms で現れ、古い前はそのあいだ見えたまま（下が透けて暗くならない）→ 消える。動きを減らす設定では一瞬で */
.mf-video:not(.mf-front) { opacity: 0; z-index: 0; transition: opacity 0s linear .12s; }
.mf-video.mf-front { opacity: 1; z-index: 1; transition: opacity .12s ease-out; }
@media (prefers-reduced-motion: reduce) { .mf-video, .mf-video.mf-front, .mf-video:not(.mf-front) { transition: none; } }
.mf-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 22px; opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 4; }
.mf-stage.still .mf-play, .mf-stage:not(.playing):hover .mf-play, .mf-stage:focus-visible .mf-play { opacity: 1; }
.mf-stage:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.frame-world { position: absolute; left: 8px; bottom: 8px; z-index: 3; max-width: 60%; padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: clamp(10px, 3cqw, 13px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.mf-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
.mf-dots { display: inline-flex; gap: 2px; align-items: center; }
.mf-dot { width: 26px; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; border-radius: 50%; }
.mf-dot::before { content: ""; position: absolute; inset: 6px; /* デスクトップは見える丸 14px（2026-10-25 のオーナー「デスクトップでは大きく」） */ border-radius: 50%; border: 2px solid var(--muted); box-sizing: border-box; }
.mf-dot.on::before { background: var(--accent); border-color: var(--accent); }
.mf-dot:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.mf-extra { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.mf-shares { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-wait { align-content: start; }

/* ツールの中: 長いログを下までスクロールしたときの「一番上へ」 */
.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 20px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.to-top:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ツールの中のホームの「今すぐ撮る」（/desktop/?capture=1 へ移る） */
.capture-now-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.capture-now-card .btn.off { background: var(--line); color: var(--muted); pointer-events: none; }
/* 撮影のショートカットの 1 行（ツールの中。tool-hints.js）。ログの上の 1 行の中は狭いので出さない */
.capture-now-card .capture-hint { line-height: 1.4; }
.log-bar .capture-hint, .tool-bar .capture-hint { display: none; }
/* ツールのつかいかた（openToolTutorial）: 絵の代わりに大きな絵文字 1 つ */
.tut-card .tut-icon { font-size: 44px; line-height: 1.2; text-align: center; padding: 8px 0 2px; }

/* 日の移動の横スワイプ（app.js attachDaySwipe）。縦スクロールとピンチはブラウザに任せ、横の動きだけ JS が受ける。指に追従する間は、横にはみ出してもページを横スクロールさせない */
.today { touch-action: pan-y pinch-zoom; }
main.swiping { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { .today { transform: none !important; transition: none !important; } }

/* ---- ログ画面（docs/SETLOG_LOG_UI.md。Setlog のログに寄せる）---- */
/* ホームの「ログ」の一覧の未読の点 */
.log-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* ---- オンボーディング v2（docs/ONBOARDING_V2.md §5〜§7）---- */
/* ホームの右の列の一番上: PC の Web の「撮るには PC のアプリ」・ツールの中の「ようこそ！」（今すぐ撮るの下） */
.install-card, .welcome-card { margin-bottom: 12px; }
.install-card .btn, .install-card .download-other .btn { justify-self: start; }
.welcome-card { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.welcome-title { font: 700 17px/1.4 var(--font-head); }
.welcome-card p { margin: 0; }
/* 「名前を決めよう」（docs/ONBOARDING_V2.md §7.5）: ホーム・ログのいちばん上に横幅いっぱい。設定の「名前」のシートも同じ入力欄 */
.name-form { display: grid; gap: 10px; }
.name-form .name-input { width: 100%; font: inherit; font-size: 17px; }
.name-form p { margin: 0; }
.name-form .row .btn { min-width: 8em; }
.name-row .name-value { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ランディング: Mac・Linux の「撮るには Windows のアプリが要ります」、PC の「スマホでは…」の 1 行 */
.windows-only { flex-basis: 100%; }
.phone-line { margin: .25rem 0 0; }
/* 招待: 「コマドリで開く」（アプリが入っていそうなとき主）・「ブラウザで続ける」・下の小さな 1 行 */
a.app-open.btn { display: block; text-align: center; margin: .75rem auto 0; }
.continue-web { display: block; margin: .5rem auto 0; }
.app-open-hint { margin: .75rem 0 0; text-align: center; }
.invite-login-buttons { margin-top: .75rem; justify-items: center; }
.invite-login-buttons .login-choice { width: 100%; max-width: 420px; }
.join-as { margin: 0; text-align: center; }
.joined-cards { margin: 0 0 12px; }
.install-card .app-open-hint { margin: 0; }
/* 「スマホで見る」の QR（PC の Web。設定・ランディング） */
.phone-qr-box { background: #fff; border-radius: 12px; padding: 8px; width: min(100%, 260px); aspect-ratio: 1 / 1; display: grid; place-items: center; justify-self: center; }
.phone-qr { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
/* 「Google で続ける」は枠線（1px）があるので、上下の余白を 1px 減らして「Discord で続ける」と同じ高さにする */
a.google-btn.btn.big { padding-top: 13px; padding-bottom: 13px; }

/* 確かめのダイアログ（tool.js の ask。ツールの中では window.confirm が使えないため、画面の中で聞く） */
.ask-dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); padding: 18px 18px 14px; max-width: min(420px, calc(100vw - 32px)); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.ask-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.ask-dialog p { margin: 0 0 14px; line-height: 1.6; white-space: pre-line; }
.ask-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- ツールの中のホーム（2026-10-08 のオーナーの決定「A＋B」）----
   A: 動画より上を 1 行（.tool-bar）にまとめる。B（左のログの一覧）は v3 で一覧の画面（/）に置き換えた（docs/SETLOG_V3.md）。
   動画（メンバーの枠）は主役。広い画面（900px 以上）の列の数（--cols）は、memberframes.js の gridPlan が窓の幅で決める（既定 2 列・1800px 以上で 3 列・縦にスクロール） */
/* 広い画面のログの升目（2026-10-19 のオーナーの決定「デフォルト 2 列…1800px 以上は 3 列」。前の「9 人まで窓にちょうど収める」（2026-10-13）を置き換え。memberframes.js の gridPlan）:
   マスの列（--sub）は列の数の 2 倍。枠は 2×2 のマス（横幅の 1/列の数・16:9）。撮っていない人の「まだ」の枠も同じ大きさ（2026-10-08・10-13 の決まり）。
   動画は端を切って枠を埋める（cover）。入りきらなければ縦にスクロール。最後の行は左から（左上から読む順＝並びの順）。
   .compact（「まだ」の枠を 1×1 のマス＝縦横とも半分にし、撮った人の後ろの空きから詰める）は、確認ボードで確かめ中のため切ってある（memberframes.js の COMPACT_WAITING）。
   枠が 1 つだけ（.solo）は、窓の高さに収まる幅（--solo-w）で真ん中に */
.mframes.fit { display: grid; grid-template-columns: repeat(var(--sub, 4), minmax(0, 1fr)); grid-auto-flow: row dense; align-items: start; }
.mframes.fit > .mframe { grid-column: span 2; grid-row: span 2; scroll-margin: 72px 0 76px; }
.mframes.fit.compact > .mf-wait { grid-column: span 1; grid-row: span 1; }
.mframes.fit .mf-video { object-fit: cover; }
.mframes.fit.solo { grid-template-columns: minmax(0, 1fr); }
.mframes.fit.solo > .mframe { grid-column: auto; grid-row: auto; justify-self: center; width: min(100%, var(--solo-w, 100%)); }
/* 自分のログ（自分の動画がある日）: その日の自分の動画を 1 本ずつの枠にして 2 列で同時に流す（2026-10-22 のオーナーの決定。memberframes.js の selfTiles）。
   縦にスクロール。名前は出さない（全部自分）。とても細い窓（420px 未満）は 1 列。ツールの VR のパネル（html.vr）も同じ */
.mframes.self { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mframes.self .mf-video { object-fit: cover; }
.mframes.self .mf-stage { border-radius: 12px; }
.mframes.self .mframe .mf-head { border-radius: 12px 12px 0 0; }
.mframes.self .mframe .mf-name { display: none; }
@media (max-width: 419px) { .mframes.self { grid-template-columns: minmax(0, 1fr); } }
/* 縦スクロールの案内（memberframes.js の scrollHint）: 見えていない撮った人の名前を、窓の下の端に貼りつけて出す。升目のすぐ後ろに高さ 0 で置き、
   position: sticky で窓の下の端（16px 上）に浮かべる。押すと、その人の所までスクロール。全員見えたら消える（hidden） */
.more-below { position: sticky; bottom: 16px; z-index: 12; height: 0; display: flex; justify-content: center; pointer-events: none; }
.more-below[hidden] { display: none; }
.more-below-btn {
  pointer-events: auto; transform: translateY(-100%); display: inline-flex; align-items: center; gap: 8px; max-width: min(calc(100vw - 32px), 640px);
  min-height: 40px; padding: 8px 18px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(20, 16, 14, .82); color: #fff; font: 600 14px/1.3 var(--font-body);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .3); backdrop-filter: blur(8px); cursor: pointer;
}
.more-below-btn:hover { background: rgba(20, 16, 14, .92); }
.more-below-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.more-below-btn .mb-arrow { flex: none; font-size: 16px; }
.more-below-btn .mb-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* マウスのドラッグで日を移っているあいだ（app.js attachMouseSwipe）: 文字を選ばない・掴んでいる形のカーソル */
html.mouse-swiping, html.mouse-swiping * { user-select: none; -webkit-user-select: none; cursor: grabbing !important; }
/* 名前・時刻・印・点・♡ は動画の上に重ねる（2026-10-08 のオーナーの決定「名前は人数にかかわらず常に重ねる」。ツールの中・ブラウザ・スマホのどれも）。
   枠の中の要素を 1 つのマスに重ね、名前は上の帯、点は右上、♡ と送り先は右下（ワールド名は動画の左下のまま）。
   名前の帯はクリックを動画に通す（押すとプレイヤー）。点と ♡ は動画の兄弟なので、押しても動画のクリックにならない。
   1 枠の高さ＝動画の高さ */
.mframes .mframe { grid-template-areas: "stack"; gap: 0; container-type: inline-size; }
.mframes .mframe > *, .mframes .mframe .mf-foot > * { grid-area: stack; }
.mframes .mframe .mf-head {
  align-self: start; z-index: 5; flex-wrap: nowrap; align-items: center; gap: 6px 8px; min-width: 0; overflow: hidden;
  padding: 8px calc(var(--dots, 0) * 22px + 12px) 20px 12px; border-radius: 16px 16px 0 0;
  background: linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); color: #fff; pointer-events: none;
}
.mframes .mframe .mf-name { flex: 0 1 auto; min-width: 0; color: #fff; font-size: clamp(12px, 5.5cqw, 16px); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.mframes .mframe .mf-meta { color: rgba(255, 255, 255, .88); font-size: clamp(11px, 4.5cqw, 14px); white-space: nowrap; }
.mframes .mframe .mf-badges { flex: none; }
.mframes .mframe .mf-badges .mark { font-size: clamp(13px, 6cqw, 18px); }
.mframes .mframe .mf-foot { display: contents; }
.mframes .mframe .mf-dots { align-self: start; justify-self: end; z-index: 6; margin: 4px 6px 0 0; gap: 0; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7)); }
.mframes .mframe .mf-dots.single { display: none; }
.mframes .mframe .mf-dot::before { border-color: rgba(255, 255, 255, .9); }
.mframes .mframe .mf-dot.on::before { background: #fff; border-color: #fff; }
.mframes .mframe .mf-count { display: none; }
.mframes .mframe .mf-extra { align-self: end; justify-self: end; z-index: 6; margin: 0 8px 8px 0; flex-wrap: nowrap; min-width: 0; max-width: 38%; }
.mframes .mframe .mf-shares { min-width: 0; padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; }
/* タイル表示（2026-10-08 のオーナーの決定。Setlog の考え方）: 動画どうしの間はほぼ無し、時刻は動画の中央に大きく、撮っていない人は暗い枠 */
.mframes { gap: 0; }
.mframes .mframe { position: relative; }
.mframes .mframe .mf-meta {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none;
  color: rgba(255, 255, 255, .92); font: 500 clamp(13px, 6.5cqw, 28px) / 1 var(--font-head); letter-spacing: .02em; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 1px rgba(0, 0, 0, .5);
  /* iPhone の Safari で、流れている動画の上に時刻が出ないことがあった（2026-10-13 のオーナーの指摘）。自分の層にして動画より前に描く */
  transform: translateZ(0);
}
/* 時刻の下の一言メモ（2026-10-13 のオーナーの指示）。時刻は真ん中のまま、メモはその下に最大 2 行。クリックは通す */
.mframes .mframe .mf-meta .mf-caption {
  position: absolute; left: 8%; right: 8%; top: calc(50% + clamp(10px, 4.2cqw, 20px)); text-align: center; pointer-events: none;
  font: 400 clamp(11px, 3.6cqw, 16px) / 1.3 var(--font-body, inherit); letter-spacing: 0; white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  color: rgba(255, 255, 255, .95); text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.mframes .mf-head { background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); }
.mframes .mf-stage.mf-empty { background: #1c1c21; cursor: default; box-shadow: none; }
.mframes .mf-wait .mf-name { color: #6b6b75; text-shadow: none; }
.mframes .mf-wait .mf-head { background: none; }
.mframes .mf-wait { padding: 0; border: 0; }
/* 動画より上は 1 行（スマホ・ブラウザ・ツールのどれも。2026-10-08 のオーナーの指示）。日付・グループ・今だ！・⋯・（ツールは）今すぐ撮る */
.tool-bar { order: -1; display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; min-height: 40px; margin: 0 0 10px; }
.tb-title { margin: 0 4px; font-size: 16px; white-space: nowrap; }
.tb-now > * { margin: 0; padding: 4px 12px; border-radius: 999px; font-size: 13px; min-height: 0; }
.tb-now .banner.active { gap: 8px; padding: 4px 14px; white-space: nowrap; }
.tb-now .banner.active strong { font-size: 15px; }
.tool-bar .capture-now-card { margin: 0; }
.today { display: flex; flex-direction: column; align-items: stretch; }
.today-main, .today-side { display: contents; }
.today .ta-title { order: 9; }
.today .ta-log { order: 8; }
/* 広い画面（PC・ツール）は、タイトルを動画の上に（動画が縦に続くので、下だと見えない。2026-10-12 のオーナーの指示）。スマホは動画の下のまま */
@media (min-width: 900px) { .today .ta-title { order: 7; } .today .ta-title.title-line { margin: 0 0 8px; } }
@media (max-width: 639px) {
  .tool-bar { margin-bottom: 8px; }
  .tb-title { font-size: 15px; }
}

/* 招待のシートの合言葉（声で伝える。docs/INVITE_IN_WORLD.md §1.3） */
.passphrase-box { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.passphrase-box .passphrase { font-size: 24px; letter-spacing: .04em; font-family: var(--font-head); }
.passphrase-box p { margin: 0; }
.passphrase-box .passphrase-hint { color: var(--text); line-height: 1.7; }
.invite-way { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.invite-way strong { font: 700 16px/1.4 var(--font-head); }
.passphrase-more summary { cursor: pointer; color: var(--muted); }
/* 短い URL（<ホスト>/j/<語をつないだ形>）。手で打ち写すので、まとめて選べるように */
.passphrase-box .passphrase-url { color: var(--text); word-break: break-all; user-select: all; }

/* 招待のシートの「同じ場所にいるコマドリの人」（docs/INVITE_IN_WORLD.md §2.4） */
.nearby-box { margin-top: 12px; }
.nearby-box:empty { display: none; }
.nearby-box p { margin: 0; }
.nearby-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nearby-list li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; }

/* ---- v3: Setlog にもっと寄せる（docs/SETLOG_V3.md。ログイン中の画面） ---- */
body.v3 header.top { display: none; }
body.v3 main { max-width: 760px; padding-top: max(12px, env(safe-area-inset-top)); }
body.v3 main.log-wide { max-width: 1600px; }
.round-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 22px; line-height: 1; text-decoration: none; cursor: pointer; flex: none; }
.round-btn .ico, .fab .ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.round-btn:hover, .fab:hover { border-color: var(--muted); }

.home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.home-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.home-head-actions { display: flex; align-items: center; gap: 10px; }
/* ⋯ のメニューは右上から（＋ は右下から） */
.modal.sheet-menu.sheet-menu-top { place-items: start end; padding: calc(env(safe-area-inset-top, 0px) + 64px) 16px 16px; }
.home-brand { display: inline-flex; }
.home-rows { display: grid; gap: 10px; }
.home-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; min-height: 76px; }
.home-row:hover { border-color: var(--muted); }
.home-row.me { padding-block: 18px; }
.home-cover { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); flex: none; }
.home-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.home-name { font: 700 18px/1.3 var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-row.me .home-name { font-size: 20px; }
.home-status { font-size: 13px; color: var(--muted); }
/* 文字が無いとき（今日まだ動画の無いグループ）も 1 行分の高さを保つ */
.home-status:empty::before { content: "\00a0"; }
.home-row.unread .home-status { color: var(--link); font-weight: 700; }
.home-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.home-meta .log-dot { position: static; }
.home-bird img { width: 52px; height: auto; display: block; }
.home-row .chev { font-size: 22px; color: var(--muted); }
/* ホームのグループの並び替え（2026-10-13 のオーナーの依頼。長押し・右クリック・「その他」から入る） */
.home-row[data-gid] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.home-grip { display: none; font-size: 24px; line-height: 1; color: var(--muted); padding: 0 4px; cursor: grab; }
.reorder-bar { display: none; }
.home-head.reordering > :not(.reorder-bar) { display: none; }
.home-head.reordering .reorder-bar { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 12px; }
.reorder-title { font: 700 18px/1.3 var(--font-head); }
.reorder-done { min-height: 40px; padding: 6px 20px; }
.home-rows.reordering .home-row { touch-action: none; cursor: grab; border-style: dashed; }
.home-rows.reordering .home-row.me { opacity: .6; cursor: default; }
.home-rows.reordering .home-grip { display: inline-block; }
.home-rows.reordering .home-row[data-gid] .chev { display: none; }
.home-rows.reordering .home-row.dragging { position: relative; z-index: 5; cursor: grabbing; border-style: solid; border-color: var(--link); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
@media (prefers-reduced-motion: no-preference) {
  .home-rows.reordering .home-row[data-gid]:not(.dragging) { animation: row-wiggle .5s ease-in-out infinite alternate; }
  .home-rows.reordering .home-row[data-gid]:nth-child(even):not(.dragging) { animation-delay: -.25s; }
  @keyframes row-wiggle { from { transform: rotate(-.35deg); } to { transform: rotate(.35deg); } }
}
.home-empty { text-align: center; margin: 8px 0; }
.home-dock { position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; display: flex; justify-content: space-between; padding: 0 max(20px, calc((100vw - 760px) / 2 + 20px)); pointer-events: none; }
/* ホーム画面に追加の帯（.pwa-bar。下の端に貼りつく）が出ているときは、🔔・＋ を帯の上に出す（重ねない） */
body.has-pwa-bar .home-dock { bottom: calc(64px + env(safe-area-inset-bottom)); }
.fab { pointer-events: auto; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.fab-plus { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.modal.sheet-menu { place-items: end; padding: 16px 20px calc(88px + env(safe-area-inset-bottom)); }
.modal.sheet-menu .modal-body { width: auto; min-width: 240px; padding: 8px; border-radius: 22px; }
.plus-menu { display: grid; }
.plus-item { text-align: left; padding: 14px 16px; border: 0; background: none; color: var(--text); font: 600 16px/1.4 var(--font-body); border-radius: 14px; cursor: pointer; }
.plus-item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.plus-item + .plus-item { border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; }
.modal.sheet-full { place-items: start center; }
.modal.sheet-full .modal-body { max-width: 720px; }
.modal.sheet-full .modal-body > section { margin: 0; }
.sheet-head { position: sticky; top: -16px; background: var(--surface); padding-block: 4px; z-index: 1; }

.log-bar.tool-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.lb-left, .lb-right { display: flex; align-items: center; gap: 8px; }
.lb-right { justify-content: flex-end; }
.lb-center { display: grid; justify-items: center; min-width: 0; }
.lb-name { font: 700 17px/1.3 var(--font-head); color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.lb-name .chev { color: var(--muted); }
.lb-day { display: flex; align-items: center; gap: 2px; }
.lb-day .tb-title { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0; }
.lb-day .icon-btn.small { width: 26px; height: 26px; min-width: 26px; font-size: 16px; padding: 0; }
@media (max-width: 600px) { .lb-right .tb-now { display: none; } }
/* 狭い画面で、真ん中（グループ名・日付）が左右のボタンに重ならないよう、真ん中の幅に収めて「…」で切る */
.lb-center > * { max-width: 100%; min-width: 0; }
.lb-day .tb-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.modal.sheet-cal .modal-body { max-width: 420px; }
.cal-head { align-items: center; }
.cal-title { font: 700 18px/1.3 var(--font-head); }
.cal-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-count[hidden] { display: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; }
.cal-day { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; color: var(--text); text-decoration: none; font-size: 15px; }
.cal-day:hover:not(.off) { background: color-mix(in srgb, var(--text) 8%, transparent); }
.cal-day.off { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.cal-day.today .cal-num { font-weight: 800; color: var(--link); }
.cal-day.selected { background: var(--accent); color: var(--accent-text); }
.cal-day.selected .cal-num { color: var(--accent-text); }
.cal-mark { position: absolute; bottom: 12%; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.cal-day.mine .cal-mark { background: var(--accent); }
.cal-day.selected .cal-mark { background: var(--accent-text); }
.sheet-head h2 { font-size: 20px; }
.modal.sheet-full .modal-body > section > h1:first-child { display: none; }
.lb-day .icon-btn.small { border: 0; background: none; }
@media (max-width: 600px) {
  .modal.sheet-cal { place-items: end center; padding: 0; }
  .modal.sheet-cal .modal-body { max-width: none; border-radius: 22px 22px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
.page-back { margin-bottom: 8px; }

/* v3 段階 2: リアクション（タイルの右のボタン 2 つ） */
.mframes .mframe .mf-extra { display: contents; }
.mf-side { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: grid; gap: 8px; justify-items: center; }
.mf-act { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(20,16,14,.55); color: #fff; cursor: pointer; backdrop-filter: blur(6px); }
.mf-act .ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mf-act.on { background: rgba(255,255,255,.88); }
/* 右下のリアクション・トークのボタンは、マウスを乗せたとき（キーボードで中に入ったとき）だけ出す。マウスの無いスマホでは、いつも出す（2026-10-11） */
@media (hover: hover) {
  .mframe .mf-side { opacity: 0; transition: opacity .15s; }
  .mframe:hover .mf-side, .mframe:focus-within .mf-side { opacity: 1; }
}
.rx-mine { font-size: 22px; line-height: 1; }
.rx-summary { display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px; border-radius: 999px; background: rgba(20,16,14,.55); color: #fff; font-size: 14px; }
.rx-count { font-size: 12px; font-weight: 700; margin-left: 2px; }
.rx-picker { position: absolute; z-index: 70; display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.rx-opt { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; font-size: 26px; line-height: 1; cursor: pointer; transition: transform .12s; }
.rx-opt:hover, .rx-opt:focus-visible { transform: scale(1.18); }
.rx-opt.on { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* v3 段階 3: トーク */
/* トーク: 上の行と入力欄は固定、一覧だけが動く。高さはキーボードぶん縮む（app.js の fitChatToViewport が --chat-h・--chat-y を入れる） */
.chat { position: fixed; left: 0; right: 0; top: 0; z-index: 20; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: var(--chat-h, 100dvh); transform: translateY(var(--chat-y, 0px)); max-width: 760px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 0; background: var(--bg); }
body:has(.chat) { overflow: hidden; }
.chat-list { overscroll-behavior: contain; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; }
.chat-title { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 8px 18px; font: 700 16px/1.3 var(--font-head); cursor: pointer; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.round-spacer { width: 44px; }
.chat-list { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 2px; }
.chat-stamp { text-align: center; font-size: 12px; color: var(--muted); margin: 10px 0 2px; }
.chat-msg { display: grid; justify-items: start; gap: 2px; max-width: 78%; }
.chat-msg.mine { justify-items: end; margin-left: auto; }
.chat-name { padding-left: 6px; }
/* 名前を押すと、その人の通知のミュートのシート（app.js の openPersonSheet）。見た目は名前のまま */
.chat-name-btn, .member-name-btn { color: inherit; text-decoration: none; }
.chat-name-btn:hover, .member-name-btn:hover { text-decoration: underline; }
.chat-body { display: grid; gap: 4px; justify-items: inherit; }
.chat-bubble { margin: 0; padding: 8px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.mine .chat-bubble { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.chat-bubble.deleted { color: var(--muted); font-style: italic; background: none; }
.chat-clip { position: relative; display: block; width: min(260px, 60vw); aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 16px; overflow: hidden; background: #000; cursor: pointer; }
.chat-clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-clip-play, .chat-clip-ghost { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 26px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.chat-del { font-size: 12px; }
.chat-empty, .chat-more { text-align: center; margin: auto; }
.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-radius: 26px; background: var(--surface); margin-bottom: 8px; }
.chat-input { flex: 1; border: 0; background: none; color: var(--text); font: 15px/1.5 var(--font-body); resize: none; padding: 6px 8px; outline: none; }
.chat-send { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-text); font-size: 18px; font-weight: 800; cursor: pointer; }
.chat-send:disabled { background: color-mix(in srgb, var(--text) 15%, transparent); color: var(--muted); cursor: default; }
.share-chat-preview { display: grid; gap: 6px; justify-items: start; }
.share-chat-preview img { width: min(280px, 70vw); border-radius: 14px; }
.modal .chat-input { border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }

/* v3 段階 4: お知らせ */
.fab { position: relative; }
.fab-dot { position: absolute; top: 10px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.act-list { display: grid; gap: 4px; }
.act-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 14px; color: var(--text); text-decoration: none; }
.act-row:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.act-row.fresh { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.act-emoji { width: 40px; height: 40px; display: grid; place-items: center; font-size: 24px; flex: none; }
.act-emoji .ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.act-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.act-said { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 14px; }
.act-new { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 700; line-height: 18px; vertical-align: 1px; }
.act-badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 700; text-align: center; }
.act-thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.home-row .chat-unread { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 700; }
.chat-form { align-items: center; }
.chat-form .chat-input { min-height: 0; height: 38px; padding: 8px; }
.chat-del { color: var(--muted); text-decoration: none; opacity: .7; }

/* 共有の画面の下の行・調整のシート（share.js。v3 段階 5 のログの共有から） */
.lx-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; max-width: 520px; width: 100%; margin: 0 auto; }
.lx-pair { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #1e1e22; }
.lx-btn { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #1e1e22; color: #fff; font-size: 22px; cursor: pointer; }
.lx-pair .lx-btn { width: 48px; height: 48px; background: none; }
.lx-share { background: var(--accent); color: var(--accent-text); }
.lx-btn:disabled { opacity: .5; cursor: default; }
.lx-settings { display: grid; gap: 8px; }
.lx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.lx-row input[type=checkbox] { width: 44px; height: 26px; accent-color: var(--ok); }
.lx-chip { padding: 8px 16px; border-radius: 12px; border: 1px solid var(--line); background: none; color: var(--text); cursor: pointer; }
.lx-chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.lx-btn { display: inline-grid; place-items: center; }
.lx-btn .ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lx-row input[type=checkbox] { appearance: none; width: 50px; height: 30px; border-radius: 999px; background: color-mix(in srgb, var(--text) 25%, transparent); position: relative; cursor: pointer; transition: background .15s; }
.lx-row input[type=checkbox]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s; }
.lx-row input[type=checkbox]:checked { background: #4cd964; }
.lx-row input[type=checkbox]:checked::after { transform: translateX(20px); }
/* 狭い画面（スマホ・狭めたツールの窓）: 上の行を 2 段に。1 段目は左右のボタン、2 段目はグループ名と日付（真ん中） */
@media (max-width: 600px) {
  .log-bar .lb-right .capture-now, .log-bar .lb-right .btn { white-space: nowrap; }
}

/* 撮った直後の送り先（docs/SEND_AFTER_CAPTURE.md） */
.send-preview { border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.send-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.send-actions { align-items: center; gap: 16px; }
.send-memo { width: 100%; box-sizing: border-box; }
/* 送り先のシート: 画面の幅いっぱい（1200px まで）。送り先は 2 列（600px 以下は 1 列）で中だけスクロール。［送る］［あとで］は下に固定（2026-10-22 のオーナーの指示） */
.modal.send-sheet { overflow: hidden; }
.modal.send-sheet .modal-body { max-width: min(1200px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; gap: 10px; overflow: hidden; padding-bottom: 0; }
.send-sheet .send-head { flex: none; }
/* 頭・下のボタン（.send-foot）は縮めない。真ん中（.send-main）だけが残りの高さを使う */
.modal.send-sheet .modal-body > :not(.send-main) { flex: none; }
/* 撮った動画とひとこと（.send-side）は一覧の外でいつも見える。一覧（.send-scroll）だけがスクロールする。
   以前は動画も一覧と同じ grid の中にあり、grid の高さが決まっていると overflow:hidden の動画の行が 0 までつぶれ、一覧が動画とひとことの上に重なった（2026-10-25 のオーナーの実機）。
   一覧の中は flex の縦並び（子は縮めない）にして、同じつぶれが起きないようにする */
.send-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.send-side { flex: none; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.send-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; }
.send-scroll > * { flex: none; }
.send-sheet .send-clips { min-height: 96px; overflow-y: hidden; }
/* 狭い画面（動画が上）: 動画は高さの 3 割まで。一覧に場所を残す */
.send-sheet .send-preview { width: min(100%, 560px, calc(30dvh * 16 / 9)); flex: none; }
.send-sheet .send-memo { width: min(100%, 560px); }
/* 広い画面（ツールの窓 900px〜・VR のパネル 920px）: 動画とひとことが左、一覧が右でスクロール */
@media (min-width: 760px) {
  .send-main.has-side { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr); grid-template-rows: minmax(0, 1fr); gap: 16px; }
  .send-main.has-side .send-side { align-items: stretch; align-self: start; min-height: 0; }
  .send-main.has-side .send-preview { width: 100%; }
  .send-main.has-side .send-memo { width: 100%; }
  .send-main.has-side .send-scroll { align-self: stretch; }
  .send-main.has-side .settings-group.send-targets { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}
.settings-group.send-targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: none; border: 0; border-radius: 0; overflow: visible; }
.send-targets .send-row { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
.send-targets .send-row:first-child { border-top: 1px solid var(--line); }
.send-targets .send-row:has(input:checked) { border-color: var(--link); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
/* 名前が長いときは … で切る（.stack は grid・左寄せなので、列を 0 まで縮められるように） */
.send-targets .send-row > .stack { min-width: 0; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
.send-targets .send-row > .stack > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.send-foot { flex: none; position: sticky; bottom: 0; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
@media (max-width: 600px) { .settings-group.send-targets { grid-template-columns: minmax(0, 1fr); } .modal.send-sheet .modal-body { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); } .modal.send-sheet { padding: 8px; } }
.modal.sheet.send-sheet .modal-body { padding-bottom: 0; }

/* ログ画面の左右の端: クリックで前の日・次の日（2026-10-10）。升目が長い（縦にスクロールする）ときも最初の画面の真ん中あたりに（45vh まで。2026-10-19） */
.ta-log { position: relative; }
.day-edge { position: absolute; top: var(--edge-top, 50%); transform: translateY(-50%); z-index: 4; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; } /* 押せるのは矢印の部分だけ（枠の名前・動画を押す邪魔をしない） */
.day-edge.prev { left: -4px; }
.day-edge.next { right: -4px; }
.day-edge span { display: grid; place-items: center; width: 36px; height: 56px; border-radius: 12px; background: rgba(20,16,14,.35); font-size: 26px; line-height: 1; opacity: .55; transition: opacity .15s, background .15s; }
.day-edge:hover span, .day-edge:focus-visible span { opacity: 1; background: rgba(20,16,14,.6); }
@media (max-width: 600px) { .day-edge span { width: 26px; height: 48px; font-size: 22px; } }

/* 管理の画面の「届いたログ」（常駐ツールの「ログを送る」）。試用の間だけ（ログを送る） */
.diag-report { display: grid; gap: 6px; }
.diag-id { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .05em; }
.diag-search { max-width: 12em; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.diag-viewer[hidden] { display: none; }
pre.diag-text { max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-all; font-size: 12px; line-height: 1.45; margin: 0; }

/* 管理の画面のデバッグ（docs/DEBUG_TOOLS.md） */
.debug-card h3 { margin: 8px 0 0; font-size: 15px; }
.debug-field { display: grid; gap: 2px; font-size: 13px; }
.debug-num { width: 6em; }
.debug-field select { max-width: 100%; }
.debug-field[hidden] { display: none; }
.row.wrap { flex-wrap: wrap; }
.debug-banner { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 80; padding: 2px 12px; border-radius: 0 0 10px 10px; background: #7c3aed; color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; }

/* 共有の画面（docs/SHARE_V2.md）: 投稿の形の下見・形式のセグメント・本文・下の行。スマホは全画面、PC・ツールは中央のダイアログ */
.modal.share .modal-body { max-width: 520px; max-height: calc(100dvh - 32px); display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0; padding: 0; overflow: hidden; }
.sh-scroll { overflow-y: auto; display: grid; gap: 12px; padding: 16px 16px 8px; align-content: start; }
.sh-col-left, .sh-col-right { display: grid; gap: 12px; align-content: start; min-width: 0; }
.sh-title { font-size: 18px; }
.sh-post { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.sh-post-head { display: flex; align-items: center; gap: 8px; }
.sh-avatar { width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--text) 22%, transparent); flex: none; }
.sh-post-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.sh-post-text:empty { display: none; }
.sh-media { position: relative; display: grid; place-items: center; justify-self: start; max-width: 100%; border-radius: 12px; overflow: hidden; background: #000; }
.sh-media:has(.wide) { justify-self: stretch; }
.sh-canvas { display: block; }
/* 下見は、シートの高さをめいっぱい使う（2026-10-22 のオーナーの指示「縦動画のプレビューが小さい」）。狭い画面は 1 列でスクロールするので、上の行と下のボタンのぶんを引いた高さ */
.sh-canvas.tall { height: max(260px, calc(100dvh - 330px)); width: auto; max-width: 100%; aspect-ratio: 9 / 16; object-fit: contain; }
.sh-canvas.wide { width: 100%; height: auto; }
.sh-canvas.square { width: min(100%, max(240px, calc(100dvh - 330px))); height: auto; aspect-ratio: 1; }
/* 下見で押せる枠（「動画」）と、選んだ枠の印 */
.sh-media.pickable canvas { cursor: pointer; }
.sh-cell-mark { position: absolute; box-sizing: border-box; border: 4px solid var(--accent); border-radius: 4px; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.sh-cell-mark[hidden] { display: none; }
/* 下見の下の道具（並べ方のアイコン・使う動画のサムネ） */
.sh-tools { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.sh-tools:not(:has(> :not([hidden]))) { display: none; }
/* 「動画」の並べ方（2×2・縦に 4 つ。share.js の layoutRow。アイコンのボタン） */
.sh-layout { flex: none; display: flex; }
.sh-layout[hidden] { display: none; }
.sh-layout-chips { display: flex; flex-direction: column; gap: 6px; }
.sh-layout-btn { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--muted); cursor: pointer; --ico: 22px; }
.sh-layout-btn .ico, .sh-seg-btn .ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-layout-btn.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.sh-layout-btn:disabled { opacity: .6; cursor: default; }
/* 形式のタブ（アイコンと短い名前） */
.sh-seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sh-seg-btn .ico { flex: none; width: 18px; height: 18px; }
/* 「動画」の使う動画（share.js の pickRow。サムネを押して最大 4 本。枠を選んでいるときは入れ替え） */
.sh-pick { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.sh-pick[hidden] { display: none; }
.sh-pick-list.swapping .sh-pick-item:not(.on) img, .sh-pick-list.swapping .sh-pick-item:not(.on) .unsent-ghost { opacity: 1; outline-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.sh-pick-item.slot img, .sh-pick-item.slot .unsent-ghost { outline-width: 4px; box-shadow: 0 0 0 2px var(--accent); }
.sh-pick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sh-pick-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.sh-pick-item { position: relative; flex: none; display: grid; gap: 2px; width: 60px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-align: center; cursor: pointer; }
.sh-pick-item img, .sh-pick-item .unsent-ghost { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; background: var(--line); outline: 3px solid transparent; outline-offset: -3px; opacity: .55; }
.sh-pick-item.on img, .sh-pick-item.on .unsent-ghost { outline-color: var(--accent); opacity: 1; }
.sh-pick-item.on { color: var(--text); }
.sh-pick-item.now .sh-pick-time { color: var(--accent); font-weight: 700; }
.sh-pick-check { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.sh-pick-item.on .sh-pick-check { background: var(--accent); }
.sh-pick-item:disabled { cursor: default; }
/* 「本文・その他の設定」（share.js の more。shell.css の details.more を使う） */
.sh-more > summary { font-size: 14px; }
.sh-more-body { display: grid; gap: 12px; margin-top: 8px; color: var(--text); font-size: 14px; }
.sh-more-body p { margin: 0; }
.sh-progress { position: absolute; left: 10%; right: 10%; bottom: 12px; width: 80%; accent-color: var(--accent); }
.sh-seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.sh-seg-btn { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.sh-seg-btn:nth-last-child(4), .sh-seg-btn:nth-last-child(4) ~ .sh-seg-btn { font-size: 13px; padding: 6px 2px; }
.sh-seg-btn[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.sh-seg-btn:disabled { opacity: .6; cursor: default; }
.sh-note, .sh-status { margin: 0; }
.sh-status:empty { display: none; }
.sh-caption-wrap { display: grid; gap: 6px; }
.sh-caption-wrap p { margin: 0; }
.sh-caption-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sh-caption-head .row { align-items: center; gap: 12px; }
.sh-copy { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.sh-x { width: 18px; text-align: center; font-size: 18px; line-height: 1; }
/* 「X に出す（おまかせ）」（2026-10-26 のオーナーの決定 A） */
.sh-x-box { display: grid; gap: 8px; }
.sh-x-preset { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; border-radius: 999px; font-weight: 700; }
.sh-x-panel { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.sh-x-panel[hidden], .sh-x-preset[hidden] { display: none; }
.sh-x-title { display: inline-flex; align-items: center; gap: 6px; }
.sh-x-applied, .sh-x-note { margin: 0; }
.sh-x-tpls { flex-wrap: wrap; gap: 6px; }
.sh-x-tpl { padding: 6px 12px; font-size: 14px; }
.sh-x-post { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* ホームの「ひとりで撮って X に出す」 */
.home-solo-x { display: grid; gap: 8px; margin: 12px 0; text-align: center; justify-items: center; }
.home-solo-x p { margin: 0; }
.home-solo-x-title { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; }
.home-solo-x-btn { min-width: 220px; }
.home-solo-x-link { display: flex; justify-content: center; margin: 8px 0; }
.home-solo-x-link .sh-x, .home-solo-x-title .sh-x { width: auto; }
.sh-copy .ico, .sh-dest-row .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-caption { width: 100%; min-height: 76px; resize: vertical; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; line-height: 1.5; box-sizing: border-box; }
.sh-bar { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); max-width: none; }
.sh-bar .lx-btn:not(.lx-share) { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
.sh-bar .lx-pair { background: color-mix(in srgb, var(--text) 9%, transparent); }
.sh-bar .lx-pair .lx-btn { background: none; }
.sh-dest { display: grid; gap: 8px; }
.sh-dest-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.sh-dest-row:disabled { opacity: .5; cursor: default; }
.sh-row-label { display: grid; gap: 2px; }
/* 「リンク」（共有ページ。docs/SHARE_PAGE.md）: 形式が 5 つ（プレイヤーの共有）のときは字を少し小さく。名前を出す・30 日の 1 行・共有中のリンクの一覧 */
.sh-seg-btn:nth-last-child(5), .sh-seg-btn:nth-last-child(5) ~ .sh-seg-btn { font-size: 12px; padding: 6px 1px; }
.sh-link-opts { display: grid; gap: 6px; }
.sh-link-opts p { margin: 0; }
.sh-link-url { margin: 0 0 4px; overflow-wrap: anywhere; color: var(--muted); user-select: all; }
.sh-links-wrap { display: grid; gap: 6px; }
.sh-links-title { margin: 4px 0 0; font-size: 14px; }
.sh-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sh-link-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.sh-link-item > .stack { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.sh-link-item > .row { display: flex; gap: 6px; flex: none; }
.mframes .mframe .mf-meta .mf-now-link { pointer-events: auto; border: 0; padding: 0 4px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-shadow: inherit; text-decoration: underline dotted; text-underline-offset: 6px; cursor: pointer; }
@media (max-width: 600px) {
  .modal.share { padding: 0; }
  .modal.share .modal-body { max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .sh-canvas.tall { height: max(240px, calc(100dvh - 300px)); }
  /* 使う動画の行があるときは、そのぶん縦長の下見を低くして、サムネが最初の画面に入るように */
  .sh-col-left:has(.sh-pick:not([hidden])) .sh-canvas.tall { height: max(240px, calc(100dvh - 420px)); }
}

/* ログ画面の上の行は 1 行だけ（‹・共有／グループ名／カレンダー・トーク）。日付は日を移った直後に動画の上へ（2026-10-10 のオーナーの指示。スマホも PC も） */
.log-bar.tool-bar { grid-template-columns: auto minmax(0, 1fr) auto; margin-bottom: 6px; min-height: 44px; }
.log-bar .lb-center { justify-items: center; }
.log-bar .lb-name { font-size: 16px; }
@media (max-width: 600px) { .log-bar .lb-right .capture-now-card, .log-bar .lb-right .tb-now { display: none; } .log-bar .round-btn { width: 40px; height: 40px; } }
/* iPhone のホーム画面から開いたとき（viewport-fit=cover）に、時計・電波の表示へ上の行が重ならないように */
body.v3 { padding-top: env(safe-area-inset-top, 0px); }
body.v3 main { padding-top: 8px; }

/* ログ画面の上の行は、縦にスクロールしても上に残す（2026-10-10）。iPhone の時計・電波の表示の下まで背景で覆う */
.log-bar.tool-bar { position: sticky; top: 0; z-index: 20; background: var(--bg); margin-top: calc(-1 * env(safe-area-inset-top, 0px) - 8px); padding-top: calc(env(safe-area-inset-top, 0px) + 8px); padding-bottom: 6px; }
.lb-pair { display: flex; gap: 10px; }
/* ログ画面の上の「招待」（2026-10-17）: 「今すぐ撮る」と同じ塗りつぶし（.btn）。広い画面は文字つき、狭い画面は丸いアイコンだけ */
.invite-head-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: 999px; white-space: nowrap; font-size: 15px; }
.invite-head-btn .ico { width: 20px; height: 20px; }
@media (max-width: 600px) { .invite-head-btn { width: 40px; height: 40px; padding: 0; justify-content: center; } .invite-head-label { display: none; } }

/* ログ画面以外も、上の部分を固定（2026-10-10）: ホームのロゴと ⚙️、設定などの「‹」。iPhone の時計の下まで背景で覆う */
.home-head, .page-back-bar { position: sticky; top: 0; z-index: 20; background: var(--bg); margin-top: calc(-1 * env(safe-area-inset-top, 0px) - 8px); padding-top: calc(env(safe-area-inset-top, 0px) + 8px); padding-bottom: 6px; }
/* 端より先へ引っぱれない（iPhone のバウンドで、固定した上の行のまわりから中身がのぞかない）。トークの一覧などは各自 contain */
html, body { overscroll-behavior: none; }
/* 固定した上の行は、main の左右の余白まで地の色で覆う（動画は余白まで広がるので、行の横から見えないように） */
main { --main-px: 16px; }
.log-bar.tool-bar, .home-head, .page-back-bar { margin-inline: calc(-1 * var(--main-px)); padding-inline: var(--main-px); }
.page-back-bar { display: flex; align-items: center; }
.page-back-bar .page-back { margin-bottom: 0; }

/* ---- ダミーデータのエディタ（/admin/dummy。docs/DUMMY_EDITOR.md） ---- */
body.v3 main.dedit-wide, main.dedit-wide { max-width: none; padding-left: 12px; padding-right: 12px; --main-px: 12px; }
.dedit { display: grid; gap: 10px; }
.dedit-head { display: flex; align-items: center; gap: 12px; }
.dedit-head h1 { flex: 1; margin: 0; font-size: 18px; }
.dedit-body { display: grid; grid-template-columns: 200px minmax(0, 1fr) 250px 320px; gap: 12px; align-items: start; }
.dedit-pane { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; min-width: 0; }
.dedit-pane h2 { font-size: 12px; color: var(--muted); margin: 4px 0 6px; letter-spacing: .04em; }
.dedit-scene-list { display: grid; gap: 4px; }
.dedit-scene { display: grid; gap: 0; text-align: left; border: 0; background: none; color: var(--text); padding: 8px 10px; border-radius: 10px; cursor: pointer; font: inherit; }
.dedit-scene small { color: var(--muted); font-size: 11px; }
.dedit-scene.on { background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 700; }
.dedit-new { display: grid; gap: 6px; margin: 10px 0 14px; }
.dedit-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dedit-gname { font: 800 17px/1.3 var(--font-head); border: 1px solid transparent; background: none; color: var(--text); border-radius: 8px; padding: 2px 6px; min-width: 0; max-width: 260px; }
input.dedit-gname:hover, input.dedit-gname:focus { border-color: var(--line); background: var(--bg); }
.dedit-days { display: flex; gap: 4px; flex-wrap: wrap; }
.dedit-day { position: relative; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.dedit-day.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.dedit-day:disabled { opacity: .4; cursor: default; }
.dedit-day i { position: absolute; top: -3px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.dedit-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
.dedit-grid { border-collapse: separate; border-spacing: 2px; }
.dedit-grid th { font-size: 11px; font-weight: 600; color: var(--muted); }
.dedit-grid th small { display: block; font-weight: 400; }
.dedit-namecol { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; padding-right: 6px; box-shadow: 3px 0 0 var(--surface), 0 2px 0 var(--surface), 0 -2px 0 var(--surface), 3px 2px 0 var(--surface), 3px -2px 0 var(--surface); }
.dedit-nowcol { position: sticky; right: 0; z-index: 2; background: var(--surface); color: var(--accent) !important; padding-left: 4px; box-shadow: -3px 0 0 var(--surface), 0 2px 0 var(--surface), 0 -2px 0 var(--surface), -3px 2px 0 var(--surface), -3px -2px 0 var(--surface); }
.dedit-name { display: flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; padding: 2px 4px; border-radius: 8px; }
.dedit-name:disabled { cursor: default; }
.dedit-namecol.sel .dedit-name { box-shadow: 0 0 0 2px #2563eb; }
.dedit-dot { width: 12px; height: 12px; border-radius: 50%; background-size: cover; background-position: center; flex: none; }
.dedit-joined { font-weight: 400; color: var(--muted); font-size: 10px; }
.dedit-cell { position: relative; width: 26px; height: 32px; border: 0; padding: 0; border-radius: 7px; background: color-mix(in srgb, var(--text) 8%, transparent); background-size: cover; background-position: center; cursor: pointer; display: grid; place-items: center; }
.dedit-cell:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--accent); }
.dedit-cell.future { background: repeating-linear-gradient(45deg, transparent, transparent 4px, color-mix(in srgb, var(--text) 7%, transparent) 4px, color-mix(in srgb, var(--text) 7%, transparent) 8px); cursor: not-allowed; }
.dedit-nowcol .dedit-cell { width: 40px; }
.dedit-min { font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.dedit-rx { position: absolute; bottom: -1px; right: 1px; font-size: 8px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.dedit-cell.late::after { content: ""; position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; border: 1px solid #fff; }
.dedit-cell.unsent { outline: 2px dashed var(--muted); outline-offset: -2px; }
.dedit-cell.locked { filter: grayscale(.6); }
.dedit-cell.busy { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--text) 14%, transparent) 0 3px, transparent 3px 6px); cursor: help; }
.dedit-cell.sel { box-shadow: 0 0 0 3px #2563eb !important; }
.dedit-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin-top: 10px; }
.dedit-fill { border: 1px solid var(--line); border-radius: 12px; padding: 4px 10px; }
.dedit-fill > summary { cursor: pointer; font-size: 13px; padding: 2px 0; }
.dedit-fill-body { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 6px 10px; padding: 6px 0; }
.dedit-legend { margin: 8px 0 0; }
.dedit-empty { padding: 40px 10px; text-align: center; color: var(--muted); }
.dedit-field { display: grid; gap: 4px; margin: 10px 0; font-size: 12px; color: var(--muted); }
.dedit-field input[type="text"] { font: inherit; font-size: 14px; color: var(--text); padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.dedit-field input[type="range"] { width: 100%; }
.dedit-swatches { display: flex; gap: 5px; flex-wrap: wrap; }
.dedit-swatch { width: 28px; height: 28px; border: 0; border-radius: 7px; background-size: cover; background-position: center; color: #fff; font-size: 11px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.7); cursor: pointer; }
.dedit-swatch.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.dedit-rxgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dedit-rxin { display: flex; align-items: center; gap: 4px; }
.dedit-rxin input { width: 3.2em; font: inherit; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.dedit-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.dedit-toggle .btn.on { background: var(--text); color: var(--bg); }
.dedit-preview { position: sticky; top: 12px; display: grid; gap: 8px; justify-items: center; }
.dedit-frame { overflow: hidden; border-radius: 22px; border: 6px solid var(--text); background: var(--bg); position: relative; }
.dedit-frame.pc { border-radius: 10px; }
.dedit-iframe { border: 0; transform-origin: 0 0; position: absolute; top: 0; left: 0; background: var(--bg); }
/* 幅が足りない窓: プレビューは下へ、インスペクタは表の下へ（スマホは「使える」程度。docs/DUMMY_EDITOR.md §2.5） */
@media (max-width: 1280px) { .dedit-body { grid-template-columns: 190px minmax(0, 1fr) 240px; } .dedit-preview { grid-column: 1 / -1; position: static; } }
@media (max-width: 900px) { .dedit-body { grid-template-columns: minmax(0, 1fr); } .dedit-head h1 { font-size: 16px; } }

/* ログ画面の動画: 間はゼロ、角はほんの少しだけ丸める（2026-10-11 の「角は丸めない」を 2026-10-12 のオーナーの指示で 6px に。上の border-radius より後ろに置く） */
.mframes .mframe, .mframes .mf-video { border-radius: 0; }
.mframes .mf-stage, .mframes .mf-stage.mf-empty { border-radius: 6px; }
.mframes .mframe .mf-head { border-radius: 6px 6px 0 0; }
/* 動画の欄は左右の余白ゼロ（PC・スマホ・ツールのどれも。2026-10-12 のオーナーの指示）: main の左右の余白の外まで広げ、広い画面も幅の上限を外す */
.mframes { margin-inline: calc(-1 * var(--main-px)); }
body.v3 main.log-wide { max-width: none; }
/* 升目の並べ方（2026-10-19 のオーナーの決定。memberframes.js の layoutPlan）: 動画は 16:9・全員同じ大きさ。ふつうは列の幅いっぱい。
   枠を小さくするとき（.narrowed。一覧・手動・次の段を見せるための少しの縮め）は、升目の幅（--grid-w）に絞って真ん中に */
.mf-wrap { position: relative; overflow-anchor: none; }
/* ログの升目のある画面は、スクロールバーをいつも出しておく（Windows のツール＝WebView2 はスクロールバーが幅を取る。ページの高さ（撮った人数で変わる
   「今日のログはここまで」など）でスクロールバーが出入りすると升目の横幅が変わり、列の数が変わる・組み直しのたびに出入りして下へ送られることがあった。
   2026-10-19 のオーナーの指摘「撮った人数で列の数が変わる」「開くと最下部までスクロールされる」。scrollbar-gutter: stable は WebView2 と同じ
   Chromium の試験で効かなかった） */
html:has(.mframes.fit) { overflow-y: scroll; }
.mframes.fit.narrowed { width: var(--grid-w); margin-inline: max(calc(-1 * var(--main-px)), calc((100% - var(--grid-w)) / 2)); }
.mf-wrap > .mframes { position: relative; z-index: 1; }
/* 余白の背景（layoutExtras）: 左右の余白・空いたマス・升目より下の空きに、枠の静止画をぼかして暗く敷く。動画より目立たせない */
.mf-amb { position: absolute; inset: 0 calc(-1 * var(--main-px)); overflow: hidden; pointer-events: none; z-index: 0; }
.mf-amb-part { position: absolute; left: -8%; right: -8%; background: center / cover no-repeat; filter: blur(40px) saturate(1.2); opacity: .45; }
@media (prefers-color-scheme: dark) { .mf-amb-part { filter: blur(40px) saturate(1.25) brightness(.5); opacity: 1; } }
.mf-amb-part.left { right: 50%; }
.mf-amb-part.right { left: 50%; }
.mf-amb-part.below { -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
/* 下の空きの「今日のログはここまで」（app.js の logEndCap）。全員が窓に入って 100px 以上空くときだけ */
.mf-end { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; padding: 28px 16px 8px; text-align: center; color: var(--muted); font-size: 14px; }
.mf-end[hidden] { display: none; }
.mf-end .me-title { font: 700 16px/1.3 var(--font-head); color: var(--text); }
.mf-end .me-prev { margin-top: 6px; border: 1px solid var(--line); background: var(--surface, var(--bg)); color: var(--text); border-radius: 999px; padding: 6px 16px; font: inherit; cursor: pointer; text-decoration: none; }
.mf-end .me-prev:hover { border-color: var(--text); }
/* のぞいている 3 段目の上の 3 割（名前の帯）に案内が重ならないよう、のぞかせる升目の案内は窓の下の端に寄せて低く・濃くする */
.mframes.fit.peek + .more-below { bottom: 6px; }
.mframes.fit.peek + .more-below .more-below-btn { min-height: 32px; padding: 5px 14px; font-size: 13px; background: rgba(20, 16, 14, .94); }

/* ログ画面の上の行の日付（今日・昨日・曜日）: グループ名に重ねる（2026-10-11 のオーナーの決定）。スマホは日を移った直後だけ、PC はいつも（名前の下） */
.log-bar .lb-center { position: relative; }
.lb-day { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); color: var(--text); font: 800 17px/1.2 var(--font-head); pointer-events: none; opacity: 0; white-space: nowrap; }
.lb-day.flash { animation: lb-day-flash 1.6s ease forwards; }
@keyframes lb-day-flash { 0% { opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lb-day.flash { animation: lb-day-still 1.6s linear forwards; } @keyframes lb-day-still { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } }
@media (min-width: 900px) {
  .lb-day, .lb-day.flash { position: static; inset: auto; opacity: 1; animation: none; background: none; color: var(--muted); font: 600 12px/1.2 var(--font-body); }
}

/* リアクションのエフェクト（2026-10-11 のオーナーの決定）: 絵文字が大きく出て、小さいのが散る。ボタンは弾む */
.rx-burst { position: absolute; inset: 0; z-index: 8; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.rx-burst-main { grid-area: 1 / 1; font-size: clamp(40px, 22cqw, 96px); line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); animation: rx-main 1.1s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.rx-burst-bit { grid-area: 1 / 1; font-size: clamp(16px, 8cqw, 34px); line-height: 1; opacity: 0; animation: rx-bit 1s ease-out .08s forwards; }
@keyframes rx-main { 0% { transform: scale(.2); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; } 45% { transform: scale(1); } 75% { opacity: 1; } 100% { transform: scale(1.05) translateY(-12%); opacity: 0; } }
@keyframes rx-bit { 0% { transform: rotate(var(--a)) translateY(0) rotate(calc(-1 * var(--a))) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(-1 * var(--d) * 1.6)) rotate(calc(-1 * var(--a))) scale(1); opacity: 0; } }
.rx-btn.rx-pop { animation: rx-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .rx-burst-bit { display: none; }
  .rx-burst-main { animation: rx-fade 1s linear forwards; }
  .rx-btn.rx-pop { animation: none; }
  @keyframes rx-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
}

/* ---- 操作への反応（2026-10-13 のオーナーの依頼「押したら 100ms 以内に目に見える変化」。app.js の先頭の決まり）---- */
/* 押した処理を待っているあいだ（.busy・aria-busy）・画面の移動を待っているリンク（.nav-pending） */
button.busy, a.busy, .nav-pending { opacity: .62; cursor: progress; transition: none; }
.home-row.nav-pending { background: var(--line); opacity: 1; }
/* 読み込みを待つあいだの骨組み（控えが無いときだけ。控えがあればすぐ本物を描く） */
.skeleton .skel-name { display: inline-block; min-width: 6em; }
.skel-box { background: var(--line); border-radius: var(--radius); animation: skel-pulse 1.2s ease-in-out infinite; }
.skel-frames { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
/* 広い画面のログの骨組みは、升目と同じ列の数（既定 2 列・1800px 以上で 3 列。memberframes.js の gridPlan） */
@media (min-width: 900px) { .skel-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1800px) { .skel-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.skel-frame { aspect-ratio: 16 / 9; }
.skel-row { height: 64px; margin-bottom: 8px; }
.skel-msg { height: 40px; width: 60%; margin: 8px 0; border-radius: 16px; }
.skeleton .skel-bar { display: flex; align-items: center; gap: 10px; }
@keyframes skel-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .skel-box { animation: none; } }
/* トーク: 送っている途中の発言（届いたら印が消える） */
.chat-msg.pending { opacity: .6; }
.sheet-loading { padding: 12px 0; }

/* ログの並べ方のシート（2026-10-19 のオーナーの決定。app.js の openLayoutSheet）。ボタンは広い画面だけ */
@media (max-width: 899.98px) { .layout-btn { display: none; } }
.layout-choices { gap: 8px; }
.layout-choice { display: grid; gap: 2px; text-align: left; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.layout-choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.layout-manual { gap: 6px; align-items: center; padding: 0 4px; }
.layout-manual[hidden] { display: none; }
.mf-end .me-box { display: grid; justify-items: center; gap: 8px; }
/* 「今月のコマドリ」（月のふり返り。docs/RECAP_MONTH.md）。黒の全画面（ツールの全画面・PC・スマホで同じ）。動画は四隅に貼った枠の中で contain（.player-stage と同じ理由） */
.recap-open { justify-self: center; margin-top: 4px; }
.recap-open[hidden] { display: none; }
button.act-row { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
button.act-row.fresh { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.modal.recap-sheet { padding: 0; background: #000; place-items: stretch; overflow: hidden; }
.modal.recap-sheet .modal-body { max-width: none; width: 100%; height: 100vh; height: 100dvh; border: 0; border-radius: 0; background: #000; color: #fff; padding: 0; gap: 0;
  grid-template-rows: auto minmax(0, 1fr) auto; }
.recap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 8px; }
.recap-titles { display: grid; gap: 2px; min-width: 0; }
.recap-titles h2 { font-family: var(--font-head); font-size: 18px; color: #fff; overflow-wrap: anywhere; }
.recap-end h3 { color: #fff; }
.recap-sub { color: rgba(255,255,255,.75); overflow-wrap: anywhere; }
.recap-sub:empty { display: none; }
.recap-close { background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; padding: 6px 10px; flex: none; }
.recap-stage { position: relative; min-height: 0; }
.recap-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.recap-video[hidden] { display: none; }
.recap-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center; color: rgba(255,255,255,.85); }
.recap-end { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px 16px; text-align: center; background: radial-gradient(circle at 50% 40%, #3a2a22, #0d0a09 70%); overflow-y: auto; }
.recap-end[hidden] { display: none; }
.recap-end h3 { margin: 0; font-family: var(--font-head); font-size: 24px; }
.recap-end p { margin: 0; max-width: 420px; color: rgba(255,255,255,.85); overflow-wrap: anywhere; }
.recap-end-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.recap-end .ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.recap-share { display: grid; gap: 6px; justify-items: center; width: min(360px, 100%); padding: 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; }
.recap-share[hidden] { display: none; }
.recap-share-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.recap-share-open[hidden] { display: none; }
.recap-controls { display: grid; gap: 8px; padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 12px); }
.recap-controls[hidden] { display: none; }
.recap-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.recap-date { font-weight: 700; }
.recap-who { color: rgba(255,255,255,.85); overflow-wrap: anywhere; }
.recap-who:empty { display: none; }
.recap-count { margin-left: auto; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.recap-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.recap-bar-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.recap-buttons { display: flex; justify-content: center; gap: 16px; }
.recap-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; font-size: 20px; cursor: pointer; }
.recap-btn:disabled { opacity: .35; cursor: default; }
.recap-btn:focus-visible, .recap-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .recap-bar-fill { transition: none; } }

/* 円の中の記号（‹ › ✕ ↑ ▶）は、字ではなく SVG のマスクで描く（字の上下の位置はフォントで変わり、端末によって円の真ん中からずれた。2026-10-21 のオーナーの指摘）。
   字は消さずに残す（読み上げ・試験の文の控えはそのまま）。大きさは --ico（既定 20px） */
/* 残した字は 2 行目（高さ 0）に送り、記号の行が箱の高さを全部使う（送らないと記号が上にずれた） */
[data-icon] { font-size: 0 !important; line-height: 0; grid-template-rows: 1fr; grid-auto-rows: 0; }
button[data-icon]:not([hidden]) { display: inline-grid; place-items: center; }
[data-icon]::before { content: ""; display: block; flex: none; margin: auto; width: var(--ico, 20px); height: var(--ico, 20px); background: currentColor; -webkit-mask: var(--ico-m) center / contain no-repeat; mask: var(--ico-m) center / contain no-repeat; }
[data-icon="chev-l"] { --ico-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 5l-7 7 7 7'/%3E%3C/svg%3E"); }
[data-icon="chev-r"] { --ico-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 5l7 7-7 7'/%3E%3C/svg%3E"); }
[data-icon="close"] { --ico-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
[data-icon="up"] { --ico-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); }
[data-icon="play"] { --ico-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4.5v15l12-7.5z' fill='%23000'/%3E%3C/svg%3E"); }
.round-btn[data-icon] { --ico: 22px; }
.icon-btn[data-icon] { --ico: 18px; padding: 4px; }
.day-edge span[data-icon] { --ico: 24px; }
@media (max-width: 600px) { .day-edge span[data-icon] { --ico: 20px; } }
.to-top[data-icon] { --ico: 20px; }
.chat-send[data-icon] { --ico: 18px; }
.mf-play[data-icon] { --ico: 24px; }
.reel-play[data-icon] { --ico: 22px; }
.player-close[data-icon] { --ico: 22px; }

/* 広い画面（PC）では、前の日・次の日の矢印を動画に重ねず、ログの欄の左右の余白に置く（2026-10-21 のオーナーの決定。左右に余白ができてもよい）。
   升目の横幅（layoutPlan の areaW）は余白を引いた幅になる。スマホは今のまま動画に重ねる */
@media (min-width: 900px) {
  .ta-log { padding-left: 48px; padding-right: 48px; }
  /* 余白の縦いっぱいを押せる（2026-10-21 のオーナーの指示「上下は最大まで大きく。クリックしやすい」）。印は窓の真ん中についてくる（sticky） */
  .day-edge { top: 0; bottom: 0; transform: none; align-items: flex-start; border-radius: 0; transition: background .15s; }
  .day-edge.prev { left: 0; width: var(--edge-lw, 48px); }
  .day-edge.next { right: 0; width: var(--edge-rw, 48px); }
  .day-edge span { border-radius: 0; width: min(36px, 100%); }
  .day-edge:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
  .day-edge span { position: sticky; top: calc(50vh - 28px); opacity: .8; background: transparent; color: var(--text); }
}

/* 設定の画面（/settings・/settings/<カテゴリ>。2026-10-21 のオーナーの依頼。前は全画面のシート）。
   広い画面（720px〜。VR のパネルの 1280px も）: 左にカテゴリ、右に中身。せまい画面: カテゴリの一覧 → 中身（‹ で一覧へ） */
body.v3 main.settings-wide, main.settings-wide { max-width: 1100px; }
.settings-page { display: grid; gap: 12px; min-width: 0; }
.settings-head { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; background: var(--bg); margin-inline: calc(-1 * var(--main-px)); padding: 6px var(--main-px); }
.settings-head h1 { margin: 0; font-size: 22px; min-width: 0; overflow-wrap: anywhere; }
.settings-body { display: grid; gap: 16px; min-width: 0; }
.settings-page.wide .settings-body { grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { display: grid; gap: 2px; min-width: 0; }
.settings-page.wide .settings-nav { position: sticky; top: 64px; padding-right: 16px; border-right: 1px solid var(--line); }
/* カテゴリが窓より高いとき（VR のパネルの高さ 575px など）は、カテゴリだけをスクロールさせる（sticky のままだと下が見切れて届かない。2026-10-24 のオーナーの実機） */
.settings-page.wide .settings-nav { max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; scrollbar-width: thin; }
.settings-page.list-only .settings-nav { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.settings-nav-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: 12px; color: var(--text); text-decoration: none; min-width: 0; }
.settings-page.list-only .settings-nav-item { border-radius: 0; border-top: 1px solid var(--line); }
.settings-page.list-only .settings-nav-item:first-child { border-top: 0; }
.settings-nav-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.settings-nav-item.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.settings-nav-item .stack { gap: 2px; min-width: 0; }
.settings-nav-item .small { overflow-wrap: anywhere; }
.settings-nav-label { font-weight: 700; }
.settings-nav-item .chev { color: var(--muted); flex: none; }
.settings-page.wide .settings-nav-item.on .chev { visibility: hidden; }
.settings-pane { min-width: 0; }
.settings-pane-title { margin: 0; font-size: 20px; }
.settings-pane h2 { margin: 4px 0 6px; font-size: 15px; color: var(--muted); }
.settings-pane .settings-pane-title { color: var(--text); font-size: 20px; }

.settings-pane .settings-row > span { min-width: 0; overflow-wrap: anywhere; }

/* ログの上の帯（2026-10-22 のオーナーの指摘）: 「今だ！ 残り」は押せるボタンに見せない（状態の表示。塗りも枠も無し・色の文字と点）。
   招待はグループ名の左の、枠線だけの小さなボタン（「今すぐ撮る」の塗りつぶしと見分ける） */
.tb-now .banner.active { background: transparent; color: var(--accent); border: 0; padding: 4px 4px; box-shadow: none; cursor: default; }
.tb-now .banner.active::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.tb-now .banner.active a, .tb-now .banner.active button { color: var(--accent); }
.lb-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.lb-name-row .lb-name { min-width: 0; }
.lb-name-row .invite-head-btn { height: 38px; padding: 0 14px; font-size: 16px; gap: 5px; border-color: var(--accent); color: var(--accent); flex: none; }
.lb-name-row .invite-head-btn .ico { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-name-row .invite-head-btn { background: transparent; line-height: 1; font-weight: 700; }
.lb-name-row .invite-head-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (max-width: 600px) { .lb-name-row .invite-head-btn { width: 38px; height: 38px; padding: 0; } }

/* 共有のシート（2026-10-22 のオーナーの指示）: 画面いっぱいに広げ、広い画面は 2 列（左に見た目・右に形式と文）。各列は必要なときだけ中でスクロール */
@media (min-width: 900px) {
  .modal.share .modal-body { max-width: min(1280px, calc(100vw - 32px)); width: min(1280px, calc(100vw - 32px)); height: calc(100dvh - 32px); }
  /* 行の高さはシートの高さに合わせる（align-content: start のままだと、行の高さが右の列の中身の高さになり、アコーディオンを閉じると左の下見が潰れて、並べ方・使う動画に重なった。2026-10-22 のオーナーの指摘） */
  .modal.share .sh-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-content: stretch; gap: 24px; overflow: hidden; align-items: stretch; }
  .modal.share .sh-col-left, .modal.share .sh-col-right { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 12px; }
  .modal.share .sh-col-left .sh-post { max-height: calc(100dvh - 200px); }
  .modal.share .sh-col-left .sh-media video, .modal.share .sh-col-left .sh-media img, .modal.share .sh-col-left .sh-media canvas { max-height: calc(100dvh - 300px); width: auto; max-width: 100%; margin: 0 auto; display: block; }
  /* 縦長・正方形の下見は、左の列の残りの高さをめいっぱい使う（タイトル・本文・下の道具は縮めない。絵は object-fit: contain で比率を保つ） */
  /* 高さが足りないとき（VR のパネルなど）は、重ねずに左の列の中でスクロールする */
  .modal.share .sh-col-left:has(.sh-canvas.tall, .sh-canvas.square) { display: flex; flex-direction: column; overflow: hidden auto; }
  .modal.share .sh-col-left:has(.sh-canvas.tall, .sh-canvas.square) > * { flex: none; }
  .modal.share .sh-col-left:has(.sh-canvas.tall, .sh-canvas.square) > .sh-post { flex: 1 1 0; min-height: min-content; max-height: none; display: flex; flex-direction: column; }
  .modal.share .sh-col-left .sh-post > :not(.sh-media) { flex: none; }
  .modal.share .sh-col-left .sh-post > .sh-media:has(.sh-canvas.tall, .sh-canvas.square) { flex: 1 1 0; min-height: 140px; align-self: stretch; background: transparent; border-radius: 0; }
  .modal.share .sh-col-left .sh-media canvas.sh-canvas.tall, .modal.share .sh-col-left .sh-media canvas.sh-canvas.square { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; max-width: none; aspect-ratio: auto; object-fit: contain; margin: 0; }
  .modal.share .sh-col-left .sh-post-text { max-height: 4.5em; overflow: auto; }
}
/* 低い画面（VR のパネルは 920×575）: 下見の「あなた」の行を外し、本文は 1 行にして、下見と使う動画に高さを回す */
@media (min-width: 900px) and (max-height: 700px) {
  .modal.share .sh-col-left .sh-post-head { display: none; }
  .modal.share .sh-col-left .sh-post-text { max-height: 1.5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
.sh-start { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 18px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.sh-start .ico { flex: none; }

/* 共有の画面（2026-10-22 のオーナーの指示）: 閉じるは右上（下の行から外した）・「共有を開始する」は少し小さく・共有する日を選ぶ行・「共有のしかた」の手順 */
.modal.share .modal-body { position: relative; }
.modal.share .sh-close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); --ico: 20px; }
.modal.share .sh-title { padding-right: 52px; }
.sh-sheet-head .sh-close { flex: none; width: 40px; height: 40px; border-radius: 50%; --ico: 20px; }
.sh-start { height: 40px; padding: 0 16px; font-size: 15px; }
.sh-start .ico { width: 18px; height: 18px; }
.sh-bar .lx-pair:not(:has(.lx-btn:not([hidden]))) { visibility: hidden; }
.sh-day { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 16px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.sh-day-pick { display: flex; align-items: center; gap: 4px; }
/* 見出しは 1 文字ずつ折り返さない。狭いとき（VR のパネル）は日の切り替えを次の行へ */
.sh-day { flex-wrap: wrap; }
.sh-day > :first-child { white-space: nowrap; }
.sh-day-label { min-width: 8em; text-align: center; font-size: 15px; }
.sh-day-btn { width: 36px; height: 36px; border-radius: 50%; }
.sh-day-btn:disabled { opacity: .35; }
.sh-guide .modal-body { max-width: 560px; }
.sh-guide-lead { margin: 0 0 8px; font-size: 16px; line-height: 1.55; }
.sh-steps { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 16px; }
.sh-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.sh-step-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 800; font-size: 17px; }
.sh-step-body { display: grid; gap: 6px; font-size: 17px; line-height: 1.55; min-width: 0; }
.sh-step-title { font-size: 18px; }
.sh-step-text { margin: 0; }
.sh-step-file { font-weight: 700; overflow-wrap: anywhere; }
.sh-step-hint { margin: 0; font-size: 15px; }
.sh-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sh-reveal { width: auto; min-height: 44px; padding: 0 16px; font-size: 16px; }
.sh-guide-x { display: inline-flex; align-items: center; gap: 8px; justify-self: start; width: auto; min-height: 48px; padding: 0 20px; font-size: 17px; }
.sh-guide-others { margin: 0 0 8px; }

/* ホームの［共有］（文字つき。2026-10-22）と、共有の画面の右上の ✕ に日の ‹ › が重ならないよう右をあける */
.home-share-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.home-share-btn .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 幅の狭いスマホ（〜430px）: 右上のボタンが入りきらず、ホーム全体が横にはみ出していた（2026-10-26）。「共有」は絵だけにし、間隔を詰める */
@media (max-width: 430px) {
  .home-head { gap: 8px; }
  .home-head-actions { gap: 6px; min-width: 0; }
  .home-share-btn { width: 44px; padding: 0; justify-content: center; }
  .home-share-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 340px) { .home-brand { display: none; } }
.modal.share .sh-day { margin-right: 52px; }

/* PV・宣伝の素材選び（/admin/promo。promo-pick.js） */
.promo-pick-view { max-width: 1200px; margin: 0 auto; padding: 16px; }
.promo-bar { position: sticky; top: 0; z-index: 2; padding: 8px 0; background: var(--bg); }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.promo-card { display: grid; gap: 6px; padding: 8px; border: 2px solid transparent; }
.promo-card.on { border-color: var(--accent); }
.promo-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #000; }
.promo-pick, .promo-ok { display: flex; align-items: center; gap: 6px; }

/* ---- 女性うけの見直し（2026-10-24 のオーナーの決定）: やわらかいサブカラー（ピーチ）・グループの顔・メンバーの色の丸 ----
   橙（--accent）はブランドの色のまま。お祝い・「いちばん乗り」・「○○さんから」にはピーチを使う。 */
:root { --peach: #ffe1d2; --peach-text: #8a3f1f; }
@media (prefers-color-scheme: dark) { :root { --peach: #4d3127; --peach-text: #ffc4a8; } }
/* グループの顔（色＋絵文字。色の名前は src/group-face.ts の FACE_COLORS）。地はやわらかいパステル、絵文字は真ん中 */
.group-face { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; font-size: 18px; line-height: 1; background: #ffe1d2; }
.face-peach { background: #ffe1d2; }
.face-pink { background: #ffd6e4; }
.face-lilac { background: #e6dcfb; }
.face-sky { background: #d4eafb; }
.face-mint { background: #d3f1e2; }
.face-lemon { background: #fff1b8; }
.face-coral { background: #ffcfc7; }
.face-sand { background: #f1e4cf; }
.group-face.face-small { width: 28px; height: 28px; border-radius: 8px; font-size: 16px; }
.group-face.face-big { width: 64px; height: 64px; border-radius: 18px; font-size: 34px; }
/* ホームの行: 今日の動画が無いグループは、空の四角の代わりにグループの顔 */
.group-face.home-cover { width: 56px; height: 56px; border-radius: 14px; font-size: 28px; }
/* メンバーの色の丸（頭文字）。人ごとに決まった 8 色のパステル。文字は Ink（どちらの地でも読める） */
.mchip { display: inline-grid; place-items: center; flex: none; width: 1.5em; height: 1.5em; margin-right: .35em; border-radius: 50%; font: 700 .72em/1 var(--font-body); color: #2a2320; text-shadow: none; vertical-align: .08em; background: #ffd9c4; }
.mchip.hue-0 { background: #ffd9c4; }
.mchip.hue-1 { background: #ffd0e0; }
.mchip.hue-2 { background: #e3d7fb; }
.mchip.hue-3 { background: #cfe6fa; }
.mchip.hue-4 { background: #cdeedc; }
.mchip.hue-5 { background: #ffeeaa; }
.mchip.hue-6 { background: #ffc9c0; }
.mchip.hue-7 { background: #eadcc6; }
/* アカウントの画像（src/avatar.ts）。丸の中に画像。読み込めなければ face.js が頭文字に戻す */
.mchip.mchip-img { overflow: hidden; background: var(--surface); }
.mchip-pic { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* ホームの右上のアカウントの丸と、プロフィールのシート（2026-10-25） */
.home-account { padding: 0; overflow: hidden; }
.home-account-chip.mchip { width: 100%; height: 100%; margin: 0; font-size: 18px; vertical-align: 0; }
.profile-pic-wrap { display: grid; place-items: center; margin: 4px 0 10px; }
.profile-pic.mchip { width: 96px; height: 96px; margin: 0; font-size: 40px; vertical-align: 0; }
.profile-pic-actions { justify-content: center; flex-wrap: wrap; gap: 8px; }
.profile-name { margin-top: 14px; }
.profile-settings { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.profile-settings .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.avatar-crop-wrap { display: grid; place-items: center; margin: 8px 0; }
.avatar-crop { width: min(240px, 70vw); height: auto; aspect-ratio: 1; border-radius: 12px; background: #111; touch-action: none; cursor: grab; }
.avatar-crop:active { cursor: grabbing; }
.avatar-zoom { display: block; width: min(240px, 70vw); margin: 0 auto 8px; }
.member-list li { display: inline-flex; align-items: center; }
/* 「いちばん乗り」（前はメダル 🥇）: 小さなピーチの印 */
.badge.first { background: var(--peach); color: var(--peach-text); border-color: transparent; font-weight: 700; }
.badge.first > span { margin-right: 2px; }
.mframes .mframe .mf-badges .badge.first { font-size: clamp(10px, 4cqw, 12px); padding: 0 6px; }
/* リアクションのボタンの ♡（押す前は輪郭） */
.rx-heart path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
/* ホームの空の状態: 「＋グループを作る」だけ */
.home-empty { display: grid; justify-items: center; margin: 16px 0; }
.home-empty .home-create { max-width: 320px; }
/* グループの顔を選ぶシート */
.face-row .row-end { gap: 8px; }
.group-sheet-title { gap: 8px; align-items: center; min-width: 0; }
.face-preview { display: flex; align-items: center; gap: 12px; }
.face-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.face-swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.face-swatch[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.face-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; width: 100%; }
.face-emoji { height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 20px; cursor: pointer; }
.face-emoji[aria-pressed="true"] { border-color: var(--text); background: var(--peach); }
.invite-sheet-face:empty { display: none; }
/* 招待ページの上の段: 「○○さんから おさそいが届いています 💌」・グループの顔と名前・メンバーの丸 */
.invite-lead { display: grid; gap: 8px; justify-items: center; text-align: center; }
.invite-from { margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--peach); color: var(--peach-text); font-weight: 700; overflow-wrap: anywhere; }
.invite-group { display: grid; justify-items: center; gap: 6px; }
.invite-group h1 { margin: 0; }
.invite-members { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; font-size: 18px; }
.invite-members .small { font-size: 13px; margin-left: 4px; }
.invite-members-box { align-items: center; gap: 6px; }
.invite-member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.invite-member-list li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; max-width: 14em; }
.invite-member-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-confirm .invite-members-box { align-items: flex-start; }
.invite-confirm .invite-member-list { justify-content: flex-start; }
.invite-confirm .invite-lead { justify-items: start; text-align: left; }
.invite-confirm .invite-group { justify-items: start; }
.invite-confirm .invite-members { justify-content: flex-start; }
.invite-about { justify-items: stretch; gap: 4px; max-width: 420px; margin: 8px auto 0; text-align: left; }
.invite-confirm .invite-about { margin: 0; }
.invite-about-line { margin: 0; font-weight: 700; }
.visibility-fold summary { cursor: pointer; color: var(--link); }
.visibility-fold .visibility-note { margin: 6px 0 0; }
/* LP: 誘う人の目線の段 */
.landing-inviter { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 14px; }
.inviter-art { display: grid; justify-items: center; gap: 8px; flex: none; }
.inviter-chips { display: flex; font-size: 16px; }
.inviter-text h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.4; }
.inviter-text p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* VR の中の共有の注意（share.js。X などを開けないので、パソコンの画面から共有する） */
.sh-vr-note { margin: 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }

/* ---- 自分のログの公開（publish.js）: みんなの 3 秒（トップ・ホーム）と、送るシート・設定の公開の行 ---- */
.showcase { margin-top: 18px; }
.showcase[hidden] { display: none; }
.showcase-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.showcase-head h2, .showcase-head h3 { margin: 0; }
.showcase-more { color: var(--link); text-decoration: none; font-size: 14px; white-space: nowrap; }
.showcase-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: var(--radius); overflow: hidden; background: #000; }
.showcase-home .showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .showcase-landing .showcase-cell:nth-child(n + 7) { display: none; } }
.showcase-cell { position: relative; aspect-ratio: 16 / 9; background: #000; container-type: inline-size; overflow: hidden; }
.showcase-cell a { position: absolute; inset: 0; display: block; }
.showcase-cell a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.showcase-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.showcase-time { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: rgba(255, 255, 255, .92); font: 500 clamp(11px, 7cqw, 20px) / 1 var(--font-head); text-shadow: 0 1px 3px rgba(0, 0, 0, .55); font-variant-numeric: tabular-nums; }
.showcase-cell.now .showcase-time { color: #f4895a; }
.showcase-more-btn { display: flex; justify-content: center; margin-top: 10px; width: 100%; }
.send-public { margin-top: 10px; }
.publish-extra[hidden], .publish-consent-row[hidden] { display: none; }
.publish-consent { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.publish-consent.first { border-left: 4px solid var(--accent); padding: 6px 10px; background: var(--surface); border-radius: 8px; }

/* ---- AI サポートとお問い合わせ（public/support.js。2026-10-25） ---- */
/* ホームの「困ったときは」の行（グループの一覧の下。目立たせすぎない） */
.home-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius); }
.home-help-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.home-help-btns .ghost { border-radius: 999px; }
.modal.support-sheet .modal-body { max-width: 600px; gap: 12px; }
.support-head h2 { font-size: 18px; }
.support-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.support-tab { padding: 10px 12px; border: 0; background: none; color: var(--muted); font: 700 15px/1.3 var(--font-body); cursor: pointer; }
.support-tab[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
.support-pane { display: grid; gap: 10px; }
.support-pane[hidden], .support-done[hidden], .support-form[hidden], .support-attach[hidden] { display: none; }
.support-log { display: grid; gap: 8px; align-content: start; max-height: min(52vh, 460px); min-height: 160px; overflow-y: auto; padding: 2px; }
.support-msg { max-width: 92%; padding: 10px 12px; border-radius: 16px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-msg.bot { justify-self: start; background: color-mix(in srgb, var(--text) 6%, transparent); border-top-left-radius: 4px; }
.support-msg.me { justify-self: end; background: color-mix(in srgb, var(--accent) 18%, transparent); border-top-right-radius: 4px; }
.support-msg.unsure { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.support-msg-foot { margin-top: 8px; white-space: normal; }
.support-suggest { display: grid; gap: 6px; }
.support-suggest p { margin: 4px 0 0; }
.support-chip { text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.support-chip:hover { border-color: var(--muted); }
.support-compose { display: flex; gap: 8px; align-items: flex-end; }
.support-compose textarea { flex: 1; min-width: 0; resize: vertical; }
.support-note, .support-mail, .support-thinking { margin: 0; }
.support-form textarea { resize: vertical; }
.support-attach { gap: 8px; align-items: center; }
.support-done strong { font-size: 17px; }
.support-done p { margin: 0; }
/* 管理の画面のお問い合わせ */
.support-admin.done { opacity: .65; }
.support-admin-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-admin-contact { overflow-wrap: anywhere; }
.support-admin-thread { gap: 6px; padding-left: 10px; border-left: 3px solid var(--line); }
.support-admin-reply.ops { border-left: 3px solid var(--accent); padding-left: 8px; margin-left: -13px; }
.support-admin-compose textarea { resize: vertical; }
.pill.support-admin-new { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
/* お問い合わせの履歴とやり取り（0054。2026-10-26） */
.support-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.support-dot[hidden] { display: none; }
.support-history[hidden] { display: none; }
.support-threads { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: min(56vh, 480px); overflow-y: auto; }
.support-thread-row { display: grid; gap: 4px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.support-thread-row:hover { border-color: var(--muted); }
.support-thread-row.unread { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.support-thread-preview { color: var(--muted); overflow-wrap: anywhere; }
.support-unread { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 700; }
.support-unread .support-dot { margin-left: 8px; }
.pill.support-status { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.pill.support-status.waiting_user { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: transparent; }
.support-status.closed { opacity: .7; }
.support-msg.ops { border-left: 3px solid var(--accent); }
.support-msg-who { display: block; margin-bottom: 2px; white-space: normal; }
.support-back { padding: 0; }
/* ---- ホームの上のストーリーの列と、全画面で見る画面（stories.js。2026-10-25 のオーナー「インスタのストーリーみたいな機能ほしい」） ---- */
.story-slot:empty { display: none; }
.story-row { list-style: none; margin: 0 calc(-1 * var(--main-px, 16px)); padding: 4px var(--main-px, 16px) 2px; display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
.story-row::-webkit-scrollbar { display: none; }
.story-item { flex: none; scroll-snap-align: start; }
.story { --ring: 68px; display: grid; justify-items: center; gap: 4px; width: calc(var(--ring) + 8px); padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; }
.story-ring { position: relative; display: grid; place-items: center; width: var(--ring); height: var(--ring); border-radius: 50%; padding: 3px; box-sizing: border-box; background: var(--line); }
.story.unseen .story-ring { background: conic-gradient(from 200deg, #ffb35c, var(--accent), #ff7b54, #ffb35c); }
.story.seen .story-ring { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.story.empty .story-ring { background: none; border: 2px dashed var(--line); }
.story-pic { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); box-sizing: border-box; background: var(--surface); }
.story-pic.mchip { display: grid; margin: 0; font-size: 26px; vertical-align: 0; }
.story-badge.mchip { position: absolute; left: -2px; bottom: -2px; width: 24px; height: 24px; margin: 0; font-size: 12px; border: 2px solid var(--bg); }
.story-plus { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-text); border: 2px solid var(--bg); font: 700 17px/1 var(--font-body); }
.story-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.story.unseen .story-name { color: var(--text); font-weight: 600; }
.story:focus-visible { outline: none; }
.story:focus-visible .story-ring { outline: 2px solid var(--link); outline-offset: 2px; }
.story:hover .story-ring { filter: brightness(1.05); }

.story-viewer { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; background: #0d0b0a; color: #fff; touch-action: none; user-select: none; -webkit-user-select: none; }
.sv-bars { display: flex; gap: 4px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0; }
.sv-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.sv-bar i { display: block; height: 100%; width: 0; background: #fff; }
.sv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 8px; }
.sv-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sv-chip.mchip { width: 36px; height: 36px; margin: 0; font-size: 16px; }
.sv-who-text { min-width: 0; line-height: 1.35; }
.sv-name-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-time { flex: none; color: rgba(255, 255, 255, .75); font-size: 13px; font-variant-numeric: tabular-nums; }
.sv-groups { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .7); font-size: 12px; }
.sv-close { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 18px; cursor: pointer; }
/* 動画は舞台いっぱいに収める（前は grid の中で動画の元の大きさになり、横にはみ出し・下の ‹ ♡ › の段を隠した。2026-10-25 の点検） */
.sv-stage { position: relative; flex: 1; min-height: 0; width: 100%; overflow: hidden; cursor: pointer; }
.sv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; pointer-events: none; }
.sv-zone { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.sv-zone-prev { left: 0; width: 33.3%; }
.sv-zone-next { right: 0; width: 66.7%; }
.sv-caption { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.sv-caption[hidden] { display: none; }
.sv-caption span { max-width: 640px; padding: 6px 14px; border-radius: 12px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 16px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.sv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 12px); }
.sv-nav { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.sv-heart { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.sv-heart .ico { width: 28px; height: 28px; }
.sv-heart.on { color: #ff6b8a; }
.sv-heart.on .rx-heart path { fill: currentColor; }
.sv-heart[hidden] { display: grid; visibility: hidden; }
@media (min-width: 900px) { .sv-stage { margin: 0 auto; max-width: 1280px; } }