/* ============================================================
   svc-colors.css — 動画・画像・ボイスを色で見分ける（2026-10-31 オーナー「見た目がほとんど同じだから今どこで何をつくっているのかわかりにくい」→ 案1・2）
   形と並びは3つとも同じまま、主役の色だけを変える。
     動画 … ピンク→紫（今までの色）   画像 … 水色→青   ボイス … オレンジ
   変えるのは --sk-btn（作るボタン・選んだ作り方・ログインボーナスの釦など、もともとこの塗りを使う所）と
   --svcA（タブの下線・下の切り替えの今いる所）だけ。ヘッダーやロゴのネオンはそのまま。
   data-service は html タグに付く（/image/・/voice/ はお店が焼き込む・動画は app.js が付ける）
   ★最後に読むこと★（theme-neon.css・ux-parts.css より後ろ）
   ============================================================ */
:root { --svcA: var(--sk-c1); }
:root[data-service="image"] { --sk-btn: linear-gradient(90deg, #0b7fc0, #4b4fe0); --svcA: #3fd0ff; }
:root[data-service="image"]:not([data-theme="dark"]) { --sk-btn: linear-gradient(90deg, #0a73ad, #3f43c9); --svcA: #0a73ad; }
:root[data-service="voice"] { --sk-btn: linear-gradient(90deg, #d9480f, #e67700); --svcA: #ffa94d; }
:root[data-service="voice"]:not([data-theme="dark"]) { --sk-btn: linear-gradient(90deg, #c2410c, #d9480f); --svcA: #c2410c; }

/* 作る／作ったもの／友だちに教える の下線も、その画面の色 */
.tabs:not(#sources) button[aria-selected=true] { border-bottom-color: var(--svcA) !important; }

/* ── 動画｜画像｜ボイス の切り替え（案2）── ヘッダーのすぐ下にいつも出す。今いる所をその色で塗る */
#svcSwitch { display: flex; gap: 4px; max-width: 520px; margin: 10px auto 0; padding: 4px; border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
#svcSwitch.hidden { display: none; }
#svcSwitch a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 10px;
  font-size: 14px; font-weight: 700; color: var(--sub); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
#svcSwitch a.hidden { display: none; }
#svcSwitch a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
#svcSwitch a .ico { width: 16px; height: 16px; }
#svcSwitch a[aria-current="page"] { color: #fff; background: var(--sk-btn); box-shadow: 0 4px 14px color-mix(in srgb, var(--svcA) 35%, transparent); }
/* 色はそれぞれの画面の色（今いない画面の色も、印だけはその色にして「どれが何色か」を覚えやすく） */
#svcSwitch a[data-svc="video"]:not([aria-current]) .ico { color: #ff4fa8; }
#svcSwitch a[data-svc="image"]:not([aria-current]) .ico { color: #3fd0ff; }
#svcSwitch a[data-svc="voice"]:not([aria-current]) .ico { color: #ffa94d; }
:root:not([data-theme="dark"]) #svcSwitch a[data-svc="video"]:not([aria-current]) .ico { color: #d61f80; }
:root:not([data-theme="dark"]) #svcSwitch a[data-svc="image"]:not([aria-current]) .ico { color: #0a73ad; }
:root:not([data-theme="dark"]) #svcSwitch a[data-svc="voice"]:not([aria-current]) .ico { color: #c2410c; }
/* ★作ったもの（2026-10-31 オーナー「B」）★ 切り替えの右に、仕切りを挟んで置く。全部の作品の置き場なので、色は画面に合わせず落ち着いた白 */
#svcSwitch { max-width: 640px; }
#svcSwitch a.svcWorks { flex: 1.1; margin-left: 8px; position: relative; color: var(--ink); }
#svcSwitch a.svcWorks::before { content: ""; position: absolute; left: -7px; top: 6px; bottom: 6px; width: 1px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
#svcSwitch a.svcWorks[aria-current="page"] { color: var(--bg); background: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
/* 作ったものを見ている間は、今いる画面は「縁だけ」にする（作るに戻るときはそこを押す） */
#svcSwitch.onWorks a[data-svc][aria-current="page"], #svcSwitch.onInvite a[data-svc][aria-current="page"] {
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--svcA); }
@media (max-width: 560px) { #svcSwitch { margin: 8px 12px 0; } #svcSwitch a { font-size: 13px; padding: 8px 4px; gap: 4px; } #svcSwitch a .ico { width: 14px; height: 14px; } }
@media (max-width: 380px) { #svcSwitch a { font-size: 12px; } #svcSwitch a.svcWorks { margin-left: 6px; } }
html.embedWorks #svcSwitch { display: none !important; }

/* ★下の段（作る／作ったもの／友だちに教える）は出さない★ 釦は残してあり、上の切り替え・帯・メニューから押す */
#app > .tabs { display: none !important; }

/* ★友だちに教える の帯★ 作る画面のいちばん下。押すと紹介の画面 */
#inviteBand { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 16px; border-radius: 16px; text-align: left; cursor: pointer;
  border: 1px dashed color-mix(in srgb, #ffd27a 55%, transparent) !important; background: color-mix(in srgb, #ffd27a 8%, transparent) !important; color: var(--ink) !important; box-shadow: none !important; }
#inviteBand.hidden { display: none; }
#inviteBand > .ico { width: 26px; height: 26px; flex: none; color: #ffd27a; }
:root:not([data-theme="dark"]) #inviteBand > .ico { color: #b7791f; }
#inviteBand .ibTx { flex: 1; min-width: 0; display: grid; gap: 2px; }
#inviteBand .ibTx b { font-size: 14px; }
#inviteBand .ibTx small { font-size: 12px; color: var(--sub); font-weight: 400; }
#inviteBand .ibGo { flex: none; font-size: 13px; font-weight: 700; color: #ffd27a; }
:root:not([data-theme="dark"]) #inviteBand .ibGo { color: #b7791f; }

/* ★サウンド（D-479）★ 緑。ほかの3つ（ピンク・青・オレンジ）と分ける */
:root[data-service="sound"] { --sk-btn: linear-gradient(90deg, #0f8a4f, #20a86a); --svcA: #4ade80; }
:root[data-service="sound"]:not([data-theme="dark"]) { --sk-btn: linear-gradient(90deg, #0b7a45, #128a52); --svcA: #0b7a45; }
#svcSwitch a[data-svc="sound"]:not([aria-current]) .ico { color: #4ade80; }
:root:not([data-theme="dark"]) #svcSwitch a[data-svc="sound"]:not([aria-current]) .ico { color: #0b7a45; }
/* 作る画面が4つ並ぶとき（いまはオーナー）、狭い画面では作る画面を印だけにする（今いる所は文字も出す） */
@media (max-width: 480px) {
  #svcSwitch.many a[data-svc]:not([aria-current]) span { display: none; }
  #svcSwitch.many a[data-svc] { flex: 0 1 auto; min-width: 40px; padding: 8px 8px; }
  #svcSwitch.many a[data-svc][aria-current] { flex: 1; }
}
@media (max-width: 340px) { #svcSwitch.many a[data-svc] span { display: none; } #svcSwitch.many a[data-svc][aria-current] { flex: 0 1 auto; } } /* 320 では今いる所も印だけ（文字が枠からはみ出した） */