/* ============================================================================
Singu-Link — 墨×紙テーマ基盤 (ink-on-paper theme layer)
----------------------------------------------------------------------------
Tailwind v4 のユーティリティ（bg-white / text-slate-900 / bg-indigo-600 …）は
すべて CSS変数 var(--color-*) を参照する。ここで ごとに
それらの変数を上書きすることで、ERB をほとんど触らずに全画面を再スキンする。
読み込み順：tailwind → app → singu_theme（最後）。属性スコープ html[data-theme]
は :root より詳細度が高いので、Tailwind の既定値より常に優先される。
============================================================================ */
/* ---- フォント（Google Fonts は layout の で読み込み済み） ---- */
:root {
--accent: #C2542F; /* 既定アクセント（柿）。設定で上書きされる */
--font-display: "Zen Old Mincho", serif;
}
/* ============================================================
② 居場所（既定） — 温かい紙と墨
============================================================ */
html[data-theme="belong"] {
--color-white: #FBF7EF; /* カード面 */
--color-slate-50: #EAE2D2; /* ページ地・沈んだ入力欄 */
--color-slate-100: #E4DAC8; /* カード/バーの極細線 */
--color-slate-200: #D8CCB6; /* 入力枠・アバターリング・区切り */
--color-slate-300: #C8BAA0;
--color-slate-400: #9C8F78; /* メタ・休止アイコン */
--color-slate-500: #7C7059; /* 控えめテキスト */
--color-slate-600: #5C5244; /* ホバー */
--color-slate-700: #463D30; /* 二次テキスト */
--color-slate-800: #332B20;
--color-slate-900: #231C12; /* 主テキスト＝墨 */
--font-display: "Zen Old Mincho", serif;
}
/* ============================================================
墨 — 力強い高コントラスト・直線的
============================================================ */
html[data-theme="bold"] {
--color-white: #FCFBF6;
--color-slate-50: #E7E1D2;
--color-slate-100: #CBBFA8; /* 線をやや濃く＝はっきりした輪郭 */
--color-slate-200: #2A2418; /* 枠は墨に近く */
--color-slate-300: #5C5444;
--color-slate-400: #7C715C;
--color-slate-500: #4A4234;
--color-slate-600: #2E2719;
--color-slate-700: #1E190F;
--color-slate-800: #16110A;
--color-slate-900: #14110A;
--font-sans: "Zen Kaku Gothic New", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
--font-display: "Zen Kaku Gothic New", sans-serif;
/* 角を立てる */
--radius-md: 0.2rem;
--radius-lg: 0.2rem;
--radius-xl: 0.25rem;
--radius-2xl: 0.3rem;
--radius-3xl: 0.35rem;
}
/* ============================================================
夜 — 暖色のダーク。夜の教室
============================================================ */
html[data-theme="night"] {
--color-white: #221F1B; /* カード面 */
--color-slate-50: #1C1A16; /* ページ地 */
--color-slate-100: rgba(255,255,255,.10);
--color-slate-200: rgba(255,255,255,.18);
--color-slate-300: rgba(255,255,255,.28);
--color-slate-400: #8A8275; /* メタ */
--color-slate-500: #9A9183;
--color-slate-600: #B8B0A2; /* ホバーは明るく */
--color-slate-700: #D2CABB;
--color-slate-800: #E2DBCD;
--color-slate-900: #EFE9DD; /* 主テキスト */
--font-display: "Zen Old Mincho", serif;
}
/* ============================================================
余白 — 白く軽やか・大きな余白
============================================================ */
html[data-theme="airy"] {
--color-white: #FFFFFF;
--color-slate-50: #FBFAF6;
--color-slate-100: #F0EDE5;
--color-slate-200: #E4DFD4;
--color-slate-300: #D7D1C4;
--color-slate-400: #A8A091;
--color-slate-500: #837B6C;
--color-slate-600: #635B4D;
--color-slate-700: #4A4338;
--color-slate-800: #322C24;
--color-slate-900: #2A2620;
--font-display: "Zen Old Mincho", serif;
--radius-xl: 1rem;
--radius-2xl: 1.4rem;
--radius-3xl: 1.8rem;
}
/* ============================================================
アクセント — どのテーマにも横断的に効く（indigo を accent に再マップ）
============================================================ */
html[data-theme] {
--color-indigo-600: var(--accent);
--color-indigo-500: color-mix(in srgb, var(--accent) 82%, white);
--color-indigo-700: color-mix(in srgb, var(--accent) 80%, black);
--color-indigo-400: color-mix(in srgb, var(--accent) 72%, white);
--color-indigo-100: color-mix(in srgb, var(--accent) 16%, var(--color-white));
--color-indigo-50: color-mix(in srgb, var(--accent) 9%, var(--color-white));
/* PWA テーマカラーに合わせた本文フォント（bold テーマ以外） */
--font-sans: "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
}
/* 夜テーマだけはボタン面を一段明るく持ち上げる。
暗い地（#1C1A16）に暗いアクセント（藍 #2F4A6B・菫など）をそのまま塗ると、
ボタンが地に沈んで「押せなさそう」に見える。indigo-600/500（＝主ボタンの面）を
白寄りに混ぜて地から浮かせ、白文字とのコントラストも保つ（hover の 700 は素のアクセント）。
accent マップの後に置くことで同詳細度では後勝ちでこちらが効く。 */
html[data-theme="night"] {
--color-indigo-600: color-mix(in srgb, var(--accent) 76%, white);
--color-indigo-500: color-mix(in srgb, var(--accent) 60%, white);
--color-indigo-700: var(--accent);
--color-indigo-400: color-mix(in srgb, var(--accent) 50%, white);
}
/* ============================================================
状態色（緑）— 成功・完了・在籍状況などの固定セマンティックカラー
Tailwind 既定の emerald は鮮やかすぎてテーマの沈んだ配色から浮くため、
若草（アクセント選択肢の一つ）と同系の深緑に統一する。
--accent には連動させない（rose/amber 等の意味色と同じく固定）。
============================================================ */
html[data-theme] {
--color-emerald-50: #EEF3ED;
--color-emerald-100: #DCE8D9;
--color-emerald-200: #C3D8BE;
--color-emerald-400: #6E9482;
--color-emerald-500: #4F7A64;
--color-emerald-600: #3E6B57;
--color-emerald-700: #2E5443;
--color-emerald-800: #24402F;
}
/* 夜テーマだけは面（600/500）を白寄りに持ち上げてコントラストを保つ
（indigo の夜間調整と同じ理由・同じ手法）。 */
html[data-theme="night"] {
--color-emerald-600: color-mix(in srgb, #3E6B57 76%, white);
--color-emerald-500: color-mix(in srgb, #3E6B57 60%, white);
--color-emerald-700: #3E6B57;
--color-emerald-400: color-mix(in srgb, #3E6B57 50%, white);
}
/* ============================================================
文字の大きさ（設定の「文字サイズ」）
Tailwind の text-* は var(--text-*) 参照。投稿本文は text-[15px]（リテラル）なので個別に。
============================================================ */
html[data-font="sm"] { --text-xs: 0.7rem; --text-sm: 0.8rem; --text-base: 0.9rem; }
html[data-font="sm"] .text-\[15px\] { font-size: 13.5px; }
html[data-font="lg"] { --text-xs: 0.8rem; --text-sm: 1rem; --text-base: 1.1rem; }
html[data-font="lg"] .text-\[15px\] { font-size: 17.5px; line-height: 1.85; }
/* ============================================================
ブランド：見出し・ロゴまわりに明朝（編集的な手ざわり）
============================================================ */
.font-display { font-family: var(--font-display); }
/* ロゴ：テーマで黒/白を出し分け */
.singu-logo { height: 26px; width: auto; display: block; }
.singu-logo--light { display: block; }
.singu-logo--dark { display: none; }
html[data-theme="night"] .singu-logo--light { display: none; }
html[data-theme="night"] .singu-logo--dark { display: block; }
/* ============================================================
メニューの配置（下のバー / 右上 / 非表示）をクライアント側で切替
各項目は top_bar と bottom_nav の双方に描画し、選択された側だけ表示する。
並び順は nav_order_controller が flex の order で適用する。
既定: home/timeline/groups/dm/profile=下のバー, inbox/search=右上
============================================================ */
[data-nav-slot] { display: none !important; }
html[data-nav-home="bottom"] [data-nav-slot="home"][data-nav-where="bottom"],
html[data-nav-timeline="bottom"] [data-nav-slot="timeline"][data-nav-where="bottom"],
html[data-nav-groups="bottom"] [data-nav-slot="groups"][data-nav-where="bottom"],
html[data-nav-inbox="bottom"] [data-nav-slot="inbox"][data-nav-where="bottom"],
html[data-nav-dm="bottom"] [data-nav-slot="dm"][data-nav-where="bottom"],
html[data-nav-search="bottom"] [data-nav-slot="search"][data-nav-where="bottom"],
html[data-nav-suggestions="bottom"] [data-nav-slot="suggestions"][data-nav-where="bottom"],
html[data-nav-profile="bottom"] [data-nav-slot="profile"][data-nav-where="bottom"],
html[data-nav-tamayura="bottom"] [data-nav-slot="tamayura"][data-nav-where="bottom"] {
display: flex !important;
}
html[data-nav-home="top"] [data-nav-slot="home"][data-nav-where="top"],
html[data-nav-timeline="top"] [data-nav-slot="timeline"][data-nav-where="top"],
html[data-nav-groups="top"] [data-nav-slot="groups"][data-nav-where="top"],
html[data-nav-inbox="top"] [data-nav-slot="inbox"][data-nav-where="top"],
html[data-nav-dm="top"] [data-nav-slot="dm"][data-nav-where="top"],
html[data-nav-search="top"] [data-nav-slot="search"][data-nav-where="top"],
html[data-nav-suggestions="top"] [data-nav-slot="suggestions"][data-nav-where="top"],
html[data-nav-profile="top"] [data-nav-slot="profile"][data-nav-where="top"],
html[data-nav-tamayura="top"] [data-nav-slot="tamayura"][data-nav-where="top"] {
display: inline-flex !important;
}
/* 格納メニュー（drawer）は配置設定（data-nav-*）に関わらず、存在する全ナビ項目を表示する。
＝左上ロゴから開くドロワーは「全メニューが並ぶ完全メニュー」。
ドロワー内の項目は _nav_slots が where:"drawer" で全件描画済みなので、
.singu-drawer-panel 内に限定して基本非表示（[data-nav-slot]{display:none}）を打ち消すだけでよい。 */
.singu-drawer-panel [data-nav-slot][data-nav-where="drawer"] {
display: flex !important;
}
/* ============================================================
格納メニュー（左上アバターから開く X 風ドロワー）
開閉は drawer_controller が .is-open を付け外しする。
============================================================ */
.singu-drawer-overlay {
position: fixed; inset: 0; z-index: 40;
background: rgba(15, 23, 42, .45);
opacity: 0; transition: opacity .25s ease;
}
.singu-drawer-overlay.is-open { opacity: 1; }
.singu-drawer-panel {
position: fixed; top: 0; left: 0; z-index: 50;
display: flex; flex-direction: column;
width: 50vw; height: 100dvh;
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
background: var(--color-white);
box-shadow: 0 0 40px -8px rgba(0, 0, 0, .5);
transform: translateX(-100%);
transition: transform .28s cubic-bezier(.4, 0, .2, 1);
overflow-y: auto;
}
.singu-drawer-panel.is-open { transform: translateX(0); }
/* 動きを減らす設定の人には、ドロワーの暗幕フェード・パネルのスライドを止める
（drawer_controller の setTimeout フォールバックが hidden 反映を担うので機能は変わらない）。 */
@media (prefers-reduced-motion: reduce) {
.singu-drawer-overlay { transition: none; }
.singu-drawer-panel { transition: none; }
}
/* ============================================================
初回ログイン時のコーチマーク型ツアー（homes/_tutorial・tutorial_controller）
スポットライトのリングは box-shadow の巨大な広がりで対象の外側だけを暗くする
（切り抜き風の演出。center ステップでは 0×0 に置き暗幕だけ見せる）。
説明カード・操作ボタンは画面下部に常設固定＝ステップが変わっても位置が動かない
（寄り添う操作設計：親指の定位置で連打できる）。位置（top/left/width/height）は
すべて tutorial_controller が対象の rect から算出して設定する。
============================================================ */
.singu-tour-ring {
position: fixed; z-index: 66;
border-radius: 14px;
box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55);
transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
pointer-events: none;
}
/* リング（暗幕）の上・カードの下でクリックを受け、暗幕のどこをタップしても次へ進める。
下のアプリ（ナビ等）をツアー中に誤タップして遷移するのも防ぐ。 */
.singu-tour-scrim {
position: fixed; z-index: 67; inset: 0;
cursor: pointer;
}
.singu-tour-card {
position: fixed; z-index: 70;
left: 50%; bottom: var(--fab-bottom-offset, calc(env(safe-area-inset-bottom) + 76px));
transform: translateX(-50%);
width: min(360px, calc(100vw - 24px));
}
/* 通知オンの案内ステップ（data-emphasis="true"）だけ、他ステップの下部固定カードと違い
画面中央に大きなポップアップとして見せる。tutorial_controller#apply() が index から毎回
再計算してこのクラスを付け外しする。コンパウンドセレクタ（詳細度 0,2,0）にすることで
Tailwind の単一クラスユーティリティ（p-4 / rounded-2xl / shadow-lg、いずれも 0,1,0）を
スタイルシート読み込み順に依存せず必ず上書きする。 */
.singu-tour-card.singu-tour-card--big {
top: 50%; bottom: auto;
transform: translate(-50%, -50%);
width: min(400px, calc(100vw - 32px));
padding: 1.75rem 1.5rem;
border-radius: 1.75rem;
box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35), 0 0 0 1px rgba(15, 23, 42, .04);
max-height: min(calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px), 600px);
overflow-y: auto;
overscroll-behavior: contain;
}
.singu-tour-dot {
display: inline-block;
width: .375rem; height: .375rem;
border-radius: 9999px;
background: var(--color-slate-200);
}
.singu-tour-dot[data-active] { background: var(--color-indigo-600); }
.singu-tour-skip {
position: fixed; z-index: 70;
top: calc(env(safe-area-inset-top) + .75rem); right: 1rem;
}
@media (prefers-reduced-motion: reduce) {
.singu-tour-ring { transition: none; }
}
/* ============================================================
設定ページ（settings#show）の見た目部品
============================================================ */
.settings-section-label {
display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
color: var(--color-slate-400); margin: 0 6px 10px;
}
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-card {
display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
border: 1.5px solid var(--color-slate-100); border-radius: var(--radius-xl);
padding: 10px; background: var(--color-white); color: var(--color-slate-900);
}
.theme-card.is-on { border-color: var(--accent); }
.theme-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-chip {
position: relative; width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
display: grid; place-items: center; font-family: "Zen Old Mincho", serif;
font-weight: 700; font-size: 20px; border: 1px solid rgba(0,0,0,.14);
}
.theme-chip .tdot { position: absolute; bottom: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* アイコン配色の選択カード（設定ページ）：theme-chip と同寸の画像プレビュー */
.icon-chip { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.14); }
.theme-meta { display: flex; flex-direction: column; min-width: 0; }
.theme-meta .tn { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.theme-meta .td { font-size: 10.5px; color: var(--color-slate-400); margin-top: 1px; }
.theme-card .chk { margin-left: auto; color: var(--accent); opacity: 0; }
.theme-card.is-on .chk { opacity: 1; }
.accent-row { display: flex; gap: 14px; flex-wrap: wrap; }
.accent-sw { display: flex; flex-direction: column; align-items: center; gap: 6px; border: none; background: none; cursor: pointer; padding: 2px; }
.accent-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.accent-dot { width: 34px; height: 34px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 1px var(--color-slate-200) inset; }
.accent-sw.is-on .accent-dot { box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px currentColor; }
.accent-name { font-size: 10.5px; color: var(--color-slate-400); }
.accent-sw.is-on .accent-name { color: var(--color-slate-900); font-weight: 600; }
.seg { display: flex; gap: 6px; background: var(--color-slate-50); border-radius: 13px; padding: 4px; }
.seg button {
flex: 1; border: none; background: transparent; cursor: pointer; font-family: var(--font-display);
color: var(--color-slate-500); font-weight: 600; padding: 9px 0; border-radius: 10px;
display: grid; place-items: center;
}
.seg button.is-on { background: var(--color-white); color: var(--color-slate-900); box-shadow: 0 2px 6px -2px rgba(0,0,0,.25); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* ============================================================
メニューの配置：ドラッグできる端末プレビュー（menu_layout_controller）
実画面と同じ縦横比のミニ端末上で、アイコンを掴んで
「下のバー / 右上 / 非表示」へ動かし、並び順も入れ替える。
============================================================ */
.menu-lead { font-size: 12px; line-height: 1.7; color: var(--color-slate-500); margin: -2px 6px 14px; }
.mq { display: flex; flex-direction: column; gap: 12px; position: relative; }
/* [hidden] 属性は author の display 宣言に負けるため、明示的に打ち消す
（.mq-ghost の display:flex などが残って分身が消えない不具合を防ぐ） */
.mq [hidden] { display: none !important; }
.mq-cap { text-align: center; font-size: 11.5px; color: var(--color-slate-400); letter-spacing: .03em; }
.mq-cap span { color: var(--accent); font-weight: 600; }
.mq-phone {
width: 252px; align-self: center;
aspect-ratio: 382 / 858;
display: flex; flex-direction: column;
background: var(--color-white);
border: 1.5px solid var(--color-slate-200);
border-radius: 26px;
overflow: hidden;
box-shadow: 0 16px 34px -18px rgba(0,0,0,.5);
}
.mq-top {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 9px 10px; border-bottom: 1px solid var(--color-slate-100);
transition: background .15s, box-shadow .15s;
}
.mq-logo { width: 40px; height: 8px; border-radius: 4px; background: var(--color-slate-900); opacity: .5; flex-shrink: 0; }
.mq-topicons { display: flex; align-items: center; gap: 3px; }
.mq-feed { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 11px; }
.mq-card { height: 26px; border-radius: 7px; background: var(--color-slate-50); border: 1px solid var(--color-slate-100); }
.mq-card.short { width: 70%; }
.mq-nav {
display: flex; align-items: flex-start; justify-content: space-around; gap: 2px;
padding: 7px 6px 8px; border-top: 1px solid var(--color-slate-100);
background: color-mix(in srgb, var(--color-white) 90%, transparent);
transition: background .15s, box-shadow .15s;
}
.mq-top.over, .mq-nav.over { background: color-mix(in srgb, var(--accent) 13%, var(--color-white)); box-shadow: inset 0 0 0 2px var(--accent); }
.mq-nav-empty { font-size: 10.5px; color: var(--color-slate-400); opacity: .7; padding: 8px 0; }
/* アイコン（chip）。下のバー＝縦・小ラベル、右上＝アイコンのみ、非表示＝横・ラベル付き */
.mq-ic {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
border: none; background: transparent; cursor: grab; touch-action: none;
user-select: none; -webkit-user-select: none; font-family: inherit;
color: var(--color-slate-400); padding: 4px 5px; border-radius: 10px;
transition: background .12s, color .12s;
}
.mq-ic:active { cursor: grabbing; }
.mq-ic:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mq-ic:hover:not(.fixed) { background: color-mix(in srgb, var(--color-slate-900) 8%, transparent); color: var(--color-slate-600); }
.mq-ic.fixed { cursor: default; }
.mq-ic[data-menu-key="home"] { color: var(--color-slate-900); } /* 現在地（タイムライン）を少し濃く */
.mq-ic-glyph { position: relative; display: grid; place-items: center; }
.mq-glyph-svg { width: 18px; height: 18px; }
.mq-ic-label { font-size: 8.5px; line-height: 1; white-space: nowrap; }
/* 下のバー（プレビュー）は実機と同じく flex で等分割・縮小して全項目を収める。
6個以上でも 252px の枠を均等割りし、長いラベルは折り返す（実機の見え方に一致）。
.mq-tray（ピル型）・.mq-topicons（ラベル非表示）には及ばないよう .mq-nav にスコープ。 */
.mq-nav .mq-ic { flex: 1 1 0; min-width: 0; padding: 4px 2px; }
.mq-nav .mq-ic-label { white-space: normal; overflow: hidden; max-width: 100%; text-align: center; }
.mq-dot { position: absolute; top: -2px; right: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.mq-ic.is-ghosted { opacity: .26; }
/* 右上ゾーンではアイコンのみ（ラベルを隠す） */
.mq-topicons .mq-ic-label { display: none; }
.mq-topicons .mq-ic { padding: 4px 5px; }
/* 非表示トレイ */
.mq-tray {
display: flex; align-items: center; gap: 11px;
border: 1.5px dashed var(--color-slate-200); border-radius: var(--radius-2xl);
background: var(--color-slate-50); padding: 9px 13px; min-height: 52px;
transition: border-color .15s, background .15s;
}
.mq-tray.over { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--color-slate-50)); }
.mq-tray-label { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--color-slate-700); flex-shrink: 0; }
.mq-tray-items { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-height: 32px; align-items: center; }
.mq-tray-empty { font-size: 11px; color: var(--color-slate-400); opacity: .7; }
.mq-tray .mq-ic { flex-direction: row; gap: 5px; background: var(--color-white); border: 1px solid var(--color-slate-200); padding: 5px 11px 5px 8px; border-radius: 18px; color: var(--color-slate-900); }
.mq-tray .mq-ic .mq-ic-label { display: inline; font-size: 11.5px; }
.mq-tray .mq-ic:hover { border-color: var(--color-slate-900); background: var(--color-white); }
/* 格納メニュー（drawer）トレイ。非表示トレイと区別するためアクセント寄りの実線枠にする。 */
.mq-tray--drawer { border-style: solid; border-color: color-mix(in srgb, var(--accent) 35%, var(--color-slate-200)); background: color-mix(in srgb, var(--accent) 5%, var(--color-slate-50)); }
/* 指先に付く分身 */
.mq-ghost {
position: fixed; z-index: 60; pointer-events: none;
transform: translate(-50%, -50%) rotate(-3deg);
display: flex; flex-direction: column; align-items: center; gap: 3px;
background: var(--color-slate-50); border: 1px solid var(--color-slate-200); border-radius: 14px;
padding: 8px 13px; color: var(--color-slate-900);
box-shadow: 0 16px 34px -12px rgba(0,0,0,.55);
}
.mq-ghost .mq-glyph-svg { width: 18px; height: 18px; }
.mq-ghost .mq-ic-label { display: block; font-size: 10px; }
.mq-ghost .mq-dot { display: none; }
/* 挿入位置の縦線 */
.mq-marker {
position: fixed; z-index: 55; pointer-events: none;
width: 3px; border-radius: 3px; background: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent);
}
.mq-marker::before, .mq-marker::after {
content: ""; position: absolute; left: 50%; width: 7px; height: 7px;
border-radius: 50%; background: var(--accent); transform: translateX(-50%);
}
.mq-marker::before { top: -5px; }
.mq-marker::after { bottom: -5px; }
/* 墨テーマ：角を立てる */
html[data-theme="bold"] .mq-phone { border-radius: 8px; box-shadow: 5px 5px 0 -1px color-mix(in srgb, var(--color-slate-900) 14%, transparent); }
html[data-theme="bold"] .mq-card { border-radius: 3px; }
html[data-theme="bold"] .mq-tray,
html[data-theme="bold"] .mq-tray .mq-ic { border-radius: 4px; }
html[data-theme="bold"] .mq-dot { border-radius: 2px; }
html[data-theme="bold"] .mq-ghost,
html[data-theme="bold"] .mq-marker,
html[data-theme="bold"] .mq-marker::before,
html[data-theme="bold"] .mq-marker::after { border-radius: 1px; }
/* ============================================================
たまゆら（匿名チャット）の独自の雰囲気（ambience）
を起点に data-tamayura-stage（たまゆらのコンテナ）だけへ効かせ、
他画面の見た目は変えない。既定は soft（テーマに馴染む静かな配色）。
統一感の方針：見た目を tamayura 専用クラス（.tamayura-stage / .tamayura-bubble /
.tamayura-meta / .tamayura-empty）に集約し、たまゆら固有の一貫したトーンを1か所で定義する。
★独立の方針（重要）：tamayura はアプリ本体のテーマから切り離した「別の部屋」。配色は
.tamayura-stage 先頭で定義する tamayura 専用の固定トークン（--ta-*）だけで自己完結させ、
グローバルテーマトークン（--color-* / --accent）は一切参照しない。これにより data-theme や
アクセント色を変えても tamayura の見た目は不変になる。ambience（time/soft/water/night）は
tamayura 独自のテーマ軸として、この固定トークンの上に色味を重ねて雰囲気を出す。
============================================================ */
.tamayura-stage {
/* tamayura 専用の固定パレット（テーマ非依存）。slate 系・AA 目安のコントラストを固定値で再現。
--ta-accent は静かな水色＝送信ボタン・focus・夜の差し色に使う tamayura 固有のアクセント。 */
--ta-paper: #eef2f5; /* 明地 */
--ta-paper-2: #ffffff; /* 白面（吹き出し・入力の起こし） */
--ta-ink: #1e293b; /* 本文（slate-800 相当） */
--ta-heading: #334155; /* 見出し（slate-700 相当） */
--ta-ink-soft: #64748b; /* メタ・リード・空案内（slate-500 相当） */
--ta-edge: #cbd5e1; /* 入力枠（slate-300 相当） */
--ta-shadow: #0f172a; /* 影（slate-900 相当） */
--ta-accent: #2f7196; /* tamayura 固有アクセント（水色・白文字で AA） */
background: var(--tamayura-bg, var(--ta-paper));
color: var(--ta-heading);
}
/* ヘッダー（中央の見出し・リード文）も tamayura トーンへ寄せる。
リード文は淡く静かなトーンを保ちつつ確実に読めるよう ink-soft へ控えめに底上げ。 */
.tamayura-stage header h1 { color: var(--tamayura-heading, var(--ta-heading)); }
.tamayura-stage header p { color: var(--ta-ink-soft); }
/* 吹き出し：やわらかい半透明の一枚。白面から起こして地色になじませる。
地色グラデ（water/day/dusk 等）の上でも本文が沈まないよう、地を 88% 不透明・文字を ink へ
控えめに底上げ（AA 目安）。影もわずかに強めて輪郭を保つ。 */
.tamayura-bubble {
background: var(--tamayura-bubble-bg, color-mix(in srgb, var(--ta-paper-2) 88%, transparent));
color: var(--tamayura-bubble-fg, var(--ta-ink));
box-shadow: 0 1px 3px color-mix(in srgb, var(--ta-shadow) 9%, transparent);
}
/* 時刻などの控えめメタ。淡さは残しつつ 10px でも読めるよう ink-soft（不透明）へ。 */
.tamayura-meta { color: var(--ta-ink-soft); }
/* 何も流れていないときの静かな案内。淡さを残しつつ読めるよう ink-soft へ。 */
.tamayura-empty { color: var(--ta-ink-soft); }
/* 送信フォームの入力欄も吹き出しと同じ半透明トーンで揃える（地色に沈める）。
focus 色は tamayura 固有アクセント（テーマ非依存）。 */
.tamayura-input {
background: var(--tamayura-input-bg, color-mix(in srgb, var(--ta-paper-2) 88%, transparent));
border-color: var(--tamayura-input-border, color-mix(in srgb, var(--ta-edge) 60%, transparent));
color: var(--tamayura-bubble-fg, var(--ta-ink));
}
.tamayura-input::placeholder { color: color-mix(in srgb, var(--ta-ink-soft) 80%, transparent); }
.tamayura-input:focus {
outline: none;
border-color: var(--ta-accent);
box-shadow: 0 0 0 1px var(--ta-accent);
}
/* 送信ボタン（脱 accent＝Tailwind indigo を使わず tamayura 固有アクセントで着色）。 */
.tamayura-send {
background: var(--ta-accent);
color: #fff;
transition: background 0.2s ease;
}
.tamayura-send:hover { background: color-mix(in srgb, var(--ta-accent) 86%, white); }
/* 雰囲気ピッカー（tamayura 内の ）。開閉トグル（summary）は色を持たず、
ラベル色は付与した .tamayura-meta が ambience ごとに面倒を見る（時刻と同じ濃度）。
メニューは ambience に依らず読める固定の明面（一時的な操作系＝可読性優先）。 */
.tamayura-ambience > summary { list-style: none; cursor: pointer; }
.tamayura-ambience > summary::-webkit-details-marker { display: none; }
.tamayura-ambience-menu {
background: color-mix(in srgb, var(--ta-paper-2) 96%, transparent);
color: var(--ta-ink);
box-shadow: 0 6px 20px color-mix(in srgb, var(--ta-shadow) 18%, transparent);
}
.tamayura-ambience-menu button { color: var(--ta-ink); }
.tamayura-ambience-menu button.is-on { color: var(--ta-accent); font-weight: 600; }
.tamayura-stage .tamayura-msg { animation: tamayura-fade-in 0.5s ease both; }
@keyframes tamayura-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* soft（やわらか・既定）：テーマ地色 → 白面の淡い縦グラデにアクセントをひとさじ。 */
html[data-ambience="soft"] [data-tamayura-stage] {
--tamayura-bg: linear-gradient(180deg,
color-mix(in srgb, var(--ta-accent) 6%, var(--ta-paper-2)) 0%,
color-mix(in srgb, var(--ta-accent) 3%, var(--ta-paper)) 100%);
}
/* water（水のゆらぎ）：oshic.co 風。ベースはテーマ地色を透かし、上に淡い水色を重ねてゆっくり揺らぐ。 */
html[data-ambience="water"] [data-tamayura-stage] {
--tamayura-bg:
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, #bfe3ef 38%, transparent) 0%, transparent 60%),
radial-gradient(120% 80% at 50% 100%, color-mix(in srgb, #d8eef4 40%, transparent) 0%, transparent 60%),
linear-gradient(180deg,
color-mix(in srgb, #cfeaf1 28%, var(--ta-paper-2)) 0%,
color-mix(in srgb, #cfeaf1 22%, var(--ta-paper)) 100%);
}
html[data-ambience="water"] [data-tamayura-stage]::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(40% 18% at 50% 35%, color-mix(in srgb, var(--ta-paper-2) 55%, transparent), transparent 70%),
radial-gradient(30% 14% at 50% 65%, color-mix(in srgb, var(--ta-paper-2) 40%, transparent), transparent 70%);
animation: tamayura-ripple 7s ease-in-out infinite;
}
@keyframes tamayura-ripple {
0%, 100% { transform: scale(1); opacity: 0.55; }
50% { transform: scale(1.25); opacity: 0.85; }
}
/* night（夜）：意図的に暗く沈める ambience。テーマに依らず暗いままだが、
濃色をアクセント由来にして「テーマ色を帯びた闇」にする（柿=暖かい闇 / 青=涼しい闇）。 */
html[data-ambience="night"] [data-tamayura-stage] {
--tamayura-bg: linear-gradient(180deg,
color-mix(in srgb, #11151d 90%, var(--ta-accent)) 0%,
color-mix(in srgb, #0c0f16 92%, var(--ta-accent)) 100%);
--tamayura-heading: #e6ebf2;
--tamayura-bubble-bg: color-mix(in srgb, #e6ebf2 12%, transparent);
--tamayura-bubble-fg: #e6ebf2;
--tamayura-input-bg: color-mix(in srgb, #e6ebf2 14%, transparent);
--tamayura-input-border: color-mix(in srgb, #e6ebf2 24%, transparent);
color: #e6ebf2;
}
html[data-ambience="night"] [data-tamayura-stage] .tamayura-meta { color: color-mix(in srgb, #e6ebf2 68%, transparent); }
html[data-ambience="night"] [data-tamayura-stage] .tamayura-empty { color: color-mix(in srgb, #e6ebf2 72%, transparent); }
html[data-ambience="night"] [data-tamayura-stage] header p { color: color-mix(in srgb, #e6ebf2 68%, transparent); }
/* water/night は ::before を敷くため stage を相対配置にし、中身を前面へ。 */
html[data-ambience="water"] [data-tamayura-stage],
html[data-ambience="night"] [data-tamayura-stage] { position: relative; }
html[data-ambience="water"] [data-tamayura-stage] > *,
html[data-ambience="night"] [data-tamayura-stage] > * { position: relative; z-index: 1; }
/* ピッカー行は z-index:1 だとメッセージ一覧（DOM 後）に隠れるため 2 に上げる */
html[data-ambience="water"] [data-tamayura-stage] > :first-child,
html[data-ambience="night"] [data-tamayura-stage] > :first-child { z-index: 2; }
/* 動きを減らす設定の人には揺らぎを止める。 */
@media (prefers-reduced-motion: reduce) {
.tamayura-stage .tamayura-msg { animation: none; }
html[data-ambience="water"] [data-tamayura-stage]::before { animation: none; }
}
/* 通報ダイアログ：表示は hidden 属性のみで切り替える（JS は element.hidden を true/false する
だけ＝drawer と同型）。:not([hidden]) の時だけ display:flex を宣言することで、singu_theme.css
が非レイヤー CSS（tailwind.css の後に読み込む素の ）でも [hidden] の既定 display:none を
打ち消してしまわない（無条件に display:flex を書くと非レイヤー CSS は常にレイヤー内の規則へ勝つため
hidden 属性があっても常時表示になってしまう）。配色は他の tamayura 部品と同じく --ta-* のみ参照。 */
.tamayura-report-overlay {
position: fixed; inset: 0; z-index: 40;
background: color-mix(in srgb, var(--ta-shadow) 45%, transparent);
padding: 1rem;
}
.tamayura-report-overlay:not([hidden]) {
display: flex; align-items: center; justify-content: center;
}
.tamayura-report-panel {
width: 100%; max-width: 24rem;
background: var(--ta-paper-2);
color: var(--ta-ink);
border-radius: 1rem;
box-shadow: 0 20px 40px -8px color-mix(in srgb, var(--ta-shadow) 35%, transparent);
padding: 1rem;
}
/* ============================================================
たまゆら：時間帯（time）ambience
のとき、プリペイント／tamayura_controller が
data-tamayura-time（morning/day/dusk/night）を時刻から付ける。
既存の soft/water/night とは独立（data-tamayura-time でスコープ）。
============================================================ */
/* 朝：やわらかな夜明け */
html[data-ambience="time"][data-tamayura-time="morning"] [data-tamayura-stage] {
--tamayura-bg:
radial-gradient(120% 75% at 50% -10%, color-mix(in srgb, #FFE0B0 55%, transparent), transparent 58%),
linear-gradient(180deg, color-mix(in srgb, #E9F3EF 60%, var(--ta-paper-2)) 0%, color-mix(in srgb, #E9F3EF 42%, var(--ta-paper)) 100%);
}
/* 昼：澄んだ水 */
html[data-ambience="time"][data-tamayura-time="day"] [data-tamayura-stage] {
--tamayura-bg:
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, #bfe3ef 42%, transparent), transparent 60%),
radial-gradient(120% 80% at 50% 100%, color-mix(in srgb, #d8eef4 44%, transparent), transparent 60%),
linear-gradient(180deg, color-mix(in srgb, #cfeaf1 30%, var(--ta-paper-2)) 0%, color-mix(in srgb, #cfeaf1 22%, var(--ta-paper)) 100%);
}
/* 夕：黄金の水辺 */
html[data-ambience="time"][data-tamayura-time="dusk"] [data-tamayura-stage] {
--tamayura-bg:
radial-gradient(100% 55% at 50% 112%, color-mix(in srgb, #C2542F 30%, transparent), transparent 60%),
radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, #F8C48C 55%, transparent), transparent 55%),
linear-gradient(180deg, color-mix(in srgb, #F4DEC8 55%, var(--ta-paper-2)) 0%, color-mix(in srgb, #E9C2A0 48%, var(--ta-paper)) 100%);
--tamayura-heading: #5c3320;
--tamayura-bubble-bg: color-mix(in srgb, #FFFAF3 82%, transparent);
--tamayura-bubble-fg: #5c3320;
--tamayura-input-bg: color-mix(in srgb, #FFFAF3 85%, transparent);
--tamayura-input-border: color-mix(in srgb, #96552d 30%, transparent);
}
html[data-ambience="time"][data-tamayura-time="dusk"] [data-tamayura-stage] .tamayura-meta { color: #84502f; }
html[data-ambience="time"][data-tamayura-time="dusk"] [data-tamayura-stage] .tamayura-empty { color: #84502f; }
html[data-ambience="time"][data-tamayura-time="dusk"] [data-tamayura-stage] header p { color: #84502f; }
/* 夜：灯籠の水辺 */
html[data-ambience="time"][data-tamayura-time="night"] [data-tamayura-stage] {
--tamayura-bg:
radial-gradient(90% 50% at 50% 116%, color-mix(in srgb, var(--ta-accent) 22%, transparent), transparent 60%),
linear-gradient(180deg, #0c1d24 0%, #0a1820 55%, #07232a 100%);
--tamayura-heading: #f1ece3;
--tamayura-bubble-bg: color-mix(in srgb, #fff8f0 12%, transparent);
--tamayura-bubble-fg: #f3efe7;
--tamayura-input-bg: color-mix(in srgb, #fff8f0 12%, transparent);
--tamayura-input-border: color-mix(in srgb, #ffffff 22%, transparent);
}
html[data-ambience="time"][data-tamayura-time="night"] [data-tamayura-stage] .tamayura-bubble {
border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
box-shadow: 0 0 18px color-mix(in srgb, var(--ta-accent) 22%, transparent);
}
html[data-ambience="time"][data-tamayura-time="night"] [data-tamayura-stage] .tamayura-meta { color: color-mix(in srgb, #e6ebf2 68%, transparent); }
html[data-ambience="time"][data-tamayura-time="night"] [data-tamayura-stage] .tamayura-empty { color: color-mix(in srgb, #e6ebf2 72%, transparent); }
html[data-ambience="time"][data-tamayura-time="night"] [data-tamayura-stage] header p { color: color-mix(in srgb, #e6ebf2 68%, transparent); }
/* 光のゆらぎ（::before）。water と同じ作り。夜だけ涼しい色に。 */
html[data-ambience="time"] [data-tamayura-stage]::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(40% 18% at 50% 35%, color-mix(in srgb, var(--ta-paper-2) 45%, transparent), transparent 70%),
radial-gradient(30% 14% at 50% 70%, color-mix(in srgb, var(--ta-paper-2) 32%, transparent), transparent 70%);
animation: tamayura-ripple 8s ease-in-out infinite;
}
html[data-ambience="time"][data-tamayura-time="night"] [data-tamayura-stage]::before {
background:
radial-gradient(36% 16% at 30% 30%, color-mix(in srgb, #78b4c8 22%, transparent), transparent 70%),
radial-gradient(30% 14% at 72% 64%, color-mix(in srgb, #78b4c8 18%, transparent), transparent 70%);
}
html[data-ambience="time"] [data-tamayura-stage] { position: relative; }
html[data-ambience="time"] [data-tamayura-stage] > * { position: relative; z-index: 1; }
html[data-ambience="time"] [data-tamayura-stage] > :first-child { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
html[data-ambience="time"] [data-tamayura-stage]::before { animation: none; }
}