/* 着メロ広場 プレビュー版スタイル（平成風・オリジナルデザイン） */
:root {
  /* 既定はライト配色として宣言し、端末がダークモードでもネイティブ部品
     （selectのポップアップ・input・checkbox等）が暗色で描画されないようにする */
  color-scheme: light;
  --bg: #e8e2cf;
  --panel: #f6f1de;
  --ink: #2b2b26;
  --accent: #2e4a3a;
  --accent2: #b3543f;
  --border: #8a8267;
}
html[data-theme="light"] { --bg: #f2f2f2; --panel: #ffffff; --ink: #222; --accent: #205c40; --border: #bbb; }
html[data-theme="dark"]  { --bg: #1d1f22; --panel: #2a2d31; --ink: #e8e8e2; --accent: #7fb894; --border: #555; color-scheme: dark; }
html[data-font="small"] { font-size: 14px; }
html[data-font="std"]   { font-size: 16px; }
html[data-font="large"] { font-size: 19px; }

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  background: var(--bg);
  color: var(--ink);
}
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .6rem 1rem; background: var(--accent); color: #fff;
}
html[data-theme="dark"] .site-header { color: #10231a; }
.site-header h1 { font-size: 1.35rem; margin: 0; letter-spacing: .12em; }
.badge-preview { background: #f2c14e; color: #3a2c00; border-radius: 4px; padding: .1rem .5rem; font-size: .78rem; font-weight: bold; }
.header-settings { margin-left: auto; display: flex; gap: .8rem; flex-wrap: wrap; font-size: .82rem; }
.header-settings select { font-size: .85rem; }

/* ネイティブフォーム部品はページ側の配色変数で明示し、端末設定に引きずられないようにする。
   ポップアップ側の配色は color-scheme 宣言（:root）でライトに固定される。 */
select {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--border); border-radius: 4px; padding: .15rem .3rem;
}
#chk-wakelock { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; vertical-align: middle; }

main { max-width: 1080px; margin: 0 auto; padding: 1rem; }
.banner { background: #fdf3c9; border: 1px solid #c9a93b; color: #4a3a00; padding: .45rem .8rem; margin: .5rem 1rem 0; border-radius: 4px; font-size: .88rem; }
.preview-note { background: var(--panel); border: 1px dashed var(--border); padding: .6rem .8rem; border-radius: 6px; }

.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem; }
.device-card { background: var(--panel); border: 2px solid var(--border); border-radius: 10px; padding: .8rem; }
.device-card h3 { margin: .1rem 0 .3rem; font-size: 1.05rem; }
.device-card .era { font-size: .78rem; opacity: .8; min-height: 2.2em; }
.device-card button, .menu-btn, .tool-btn {
  font: inherit; cursor: pointer; border-radius: 6px; border: 2px solid var(--accent);
  background: var(--accent); color: #fff; padding: .45rem .9rem;
}
.device-card button { width: 100%; margin-top: .4rem; }
html[data-theme="dark"] .device-card button, html[data-theme="dark"] .tool-btn { color: #10231a; }
.top-menu { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.2rem; max-width: 480px; }
.menu-btn { text-align: left; background: var(--panel); color: var(--ink); border-color: var(--border); }
.menu-btn:disabled { opacity: .65; cursor: not-allowed; }
.badge-notready { background: #999; color: #fff; border-radius: 3px; padding: .05rem .4rem; font-size: .72rem; margin-left: .4rem; }

.compose-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.compose-toolbar h2 { margin: 0; font-size: 1.1rem; }
.tool-btn { background: var(--panel); color: var(--ink); border-color: var(--border); }
.tool-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.title-wrap input { font: inherit; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 4px; min-width: 12rem; background: var(--panel); color: var(--ink); }

.compose-main { display: flex; gap: 1.2rem; align-items: flex-start; }
.stage-col { flex: 0 1 auto; }
.info-col { flex: 1 1 260px; min-width: 240px; }
@media (max-width: 760px) { .compose-main { flex-direction: column; } }
@media (orientation: landscape) and (max-height: 520px) {
  .compose-main { flex-direction: row; }
  #phone-wrap { max-height: 78vh; overflow: auto; }
}

.play-device-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; font-size: .9rem; }
.play-device-row .note { font-size: .78rem; opacity: .75; }

#phone-wrap { display: inline-block; touch-action: none; padding: 6px; }
#phone {
  /* 狭い画面では main の padding(32px)＋ #phone-wrap の padding(12px) を差し引いた幅に収める。
     実寸は app.js が offsetWidth で測って確保領域へ反映するので、ここでの上限とずれない */
  position: relative;
  width: 300px; max-width: calc(100vw - 48px);
  margin: 0 auto; border-radius: 28px; padding: 16px 16px 20px;
  background: var(--phone-body, #c0c4cc);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.25);
  transform-origin: top center;
}
.phone-brand { text-align: center; font-size: .68rem; letter-spacing: .25em; color: var(--phone-brand-ink, rgba(0,0,0,.55)); margin-bottom: 6px; font-weight: bold; }
#lcd {
  background: var(--phone-lcd, #b8c49a); color: #22301c; border-radius: 6px;
  border: 3px solid rgba(0,0,0,.35); padding: 8px 10px;
  font-family: "Courier New", monospace; min-height: 148px;
}
#lcd-top { font-size: .8rem; border-bottom: 1px solid rgba(0,0,0,.3); padding-bottom: 3px; display: flex; justify-content: space-between; }
#lcd-settings { font-size: .8rem; padding: 3px 0; border-bottom: 1px dotted rgba(0,0,0,.3); }
#lcd-notes { font-size: .95rem; line-height: 1.7; word-break: break-all; min-height: 76px; padding-top: 4px; }
#lcd-notes .cursor { animation: blink 1s steps(1) infinite; }
#lcd-notes mark { background: #e2543e; color: #fff; border-radius: 2px; }
#lcd-status { font-size: .75rem; border-top: 1px solid rgba(0,0,0,.3); padding-top: 3px; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #lcd-notes .cursor { animation: none; } }

#softkeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.soft-btn {
  font: inherit; font-size: .8rem; cursor: pointer; border-radius: 14px; padding: .4rem .2rem;
  background: var(--phone-sub, #9aa0a8); border: 2px solid rgba(0,0,0,.25); color: var(--phone-sub-ink, #1c1c1c);
}
.soft-btn:active { filter: brightness(1.25); }

#keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.key {
  font: inherit; cursor: pointer; border-radius: 50%; aspect-ratio: 1.35;
  background: #eef0f2; border: 2px solid rgba(0,0,0,.3); color: #1c1c1c;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.key .num { font-size: 1.05rem; font-weight: bold; line-height: 1; }
.key .sub { font-size: .68rem; opacity: .75; }
.key.pressed { background: #f2c14e; transform: scale(.94); }

/* ===== 機種別スキン（山崎さん提供のデザイン画像に準拠） =====
 * 本体の地色・影は ::before の「プレート」に載せる。アンテナのある機種は
 * プレートを --plate-top だけ下げ、#phone の padding-top で確保した帯の中に
 * .ph-antenna を描く。張り出しはすべて #phone の内側に収まるため、
 * fitWrapToPhone の確保領域計算（offset サイズ基準）は従来どおりでよい。
 * 装飾要素（アンテナ・受話口・ヒンジ）は機能を持たない。 */
.ph-antenna, .ph-speaker, .ph-hinge { display: none; }
#phone[class*="skin-"] { background: transparent; box-shadow: none; isolation: isolate; }
#phone[class*="skin-"]::before {
  content: ''; position: absolute; left: 0; right: 0;
  top: var(--plate-top, 0); bottom: 0; z-index: -1;
  background: var(--plate-bg, var(--phone-body, #c0c4cc));
  border-radius: var(--plate-radius, 28px);
  box-shadow: var(--plate-shadow, inset 0 0 0 3px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.25));
}
.ph-antenna { position: absolute; }
#phone[class*="skin-"] .key .sub { white-space: nowrap; letter-spacing: -.02em; }
#phone[class*="skin-"] .key.pressed { background: #f2c14e; color: #1c1c1c; }
.ph-hinge {
  height: 15px; margin: 9px -4px 1px; border-radius: 5px;
  background:
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(0,0,0,.28) 52px 55px),
    linear-gradient(180deg, rgba(255,255,255,.35), var(--phone-sub, #9aa0a8) 45%, rgba(0,0,0,.28));
  box-shadow: inset 0 1px 2px rgba(255,255,255,.4), inset 0 -2px 3px rgba(0,0,0,.3);
}

/* --- 単音モデル：銀メタリックのバーフォン、黒アンテナ、黒ベゼル＋緑液晶、黒楕円キー --- */
#phone.skin-mono1 {
  --plate-top: 40px; --plate-radius: 34px; padding-top: 46px;
  --plate-bg: linear-gradient(165deg, color-mix(in srgb, var(--phone-body) 72%, #ffffff), var(--phone-body) 46%, color-mix(in srgb, var(--phone-body) 74%, #000000));
}
#phone.skin-mono1 .ph-antenna {
  display: block; top: 0; right: 34px; width: 16px; height: 46px;
  background: linear-gradient(90deg, #45484e, #17181a 60%, #2c2e33);
  border-radius: 8px 8px 2px 2px;
}
#phone.skin-mono1 .ph-antenna::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 4px; background: #c9ccd2;
}
#phone.skin-mono1 .ph-speaker {
  display: block; width: 78px; height: 15px; margin: 0 auto 5px; border-radius: 8px;
  background: repeating-linear-gradient(115deg, rgba(0,0,0,.55) 0 4px, transparent 4px 12px);
}
#phone.skin-mono1 #lcd { border: 9px solid #141518; border-radius: 12px; box-shadow: inset 0 0 0 2px #3a3d42; }
#phone.skin-mono1 .soft-btn { background: #26282c; color: #f2f3f5; border-color: rgba(0,0,0,.6); border-radius: 999px; }
#phone.skin-mono1 .key { background: linear-gradient(180deg, #3a3d42, #222428); color: #ffffff; border-color: rgba(0,0,0,.65); }
#phone.skin-mono1 .key .sub { color: #cfd3d8; opacity: .9; }

/* --- 3和音モデル：銀の外枠リング＋濃紺の光沢フェイス、灰アンテナ、紺の角丸キー --- */
#phone.skin-waon3 {
  --plate-top: 40px; --plate-radius: 30px; padding-top: 46px;
  --plate-bg: linear-gradient(165deg, color-mix(in srgb, var(--phone-body) 88%, #46598a), color-mix(in srgb, var(--phone-body) 72%, #060b1c) 58%, color-mix(in srgb, var(--phone-body) 58%, #04060f));
  --plate-shadow: inset 0 0 0 6px #c9ccd2, inset 0 0 0 8px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.25);
}
#phone.skin-waon3 .ph-antenna {
  display: block; top: 0; right: 30px; width: 17px; height: 46px;
  background: linear-gradient(90deg, #c6c9cf, #8f959d 60%, #aeb3ba);
  border-radius: 8px 8px 2px 2px;
}
#phone.skin-waon3 .ph-antenna::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 4px; background: #7fb2d9;
}
#phone.skin-waon3 .ph-speaker {
  display: block; width: 96px; height: 10px; margin: 0 auto 5px; border-radius: 5px;
  background: #0a1122; box-shadow: inset 0 1px 2px rgba(255,255,255,.35), inset 0 -1px 2px #000000;
}
#phone.skin-waon3 .phone-brand { color: rgba(255,255,255,.8); }
#phone.skin-waon3 #lcd { border: 7px solid #0d1526; border-radius: 9px; }
#phone.skin-waon3 .soft-btn { background: linear-gradient(180deg, #2c3a63, #1b2745); color: #ffffff; border-color: rgba(0,0,0,.55); border-radius: 999px; }
#phone.skin-waon3 .key {
  border-radius: 12px; aspect-ratio: 1.5;
  background: linear-gradient(180deg, #2f4069, #1c2947); color: #ffffff;
  border: 1px solid #0a1122; box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

/* --- 4和音モデル：銀ボディ、左にベージュのアンテナ、金ベゼル＋緑液晶、銀楕円キー --- */
#phone.skin-waon4 {
  --plate-top: 40px; --plate-radius: 32px; padding-top: 46px;
  --plate-bg: linear-gradient(165deg, color-mix(in srgb, var(--phone-body) 76%, #ffffff), var(--phone-body) 48%, color-mix(in srgb, var(--phone-body) 76%, #000000));
}
#phone.skin-waon4 .ph-antenna {
  display: block; top: 0; left: 34px; width: 16px; height: 46px;
  background: linear-gradient(90deg, #f0e8d5, #cbbfa3 60%, #ded2b8);
  border-radius: 8px 8px 2px 2px;
}
#phone.skin-waon4 .ph-antenna::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 4px; background: #3a6ea5;
}
#phone.skin-waon4 .ph-speaker {
  display: block; width: 112px; height: 20px; margin: 0 auto 5px; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 50%, rgba(0,0,0,.5) 2.4px, transparent 3.2px),
    radial-gradient(circle at 64% 50%, rgba(0,0,0,.28) 3.4px, transparent 4.4px),
    color-mix(in srgb, var(--phone-body) 82%, #000000);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
}
#phone.skin-waon4 #lcd { border: 9px solid #c9a86a; border-radius: 12px; box-shadow: inset 0 0 0 2px #96762f; }
#phone.skin-waon4 .soft-btn { border-radius: 999px; background: linear-gradient(180deg, #f4f5f6, var(--phone-sub)); }
#phone.skin-waon4 .key { background: linear-gradient(180deg, #f7f8f9, #ccd0d6); border-color: rgba(0,0,0,.35); }

/* --- 16和音モデル：銀ボディ、白アンテナ、上部ラベンダーのフェイス、カラー液晶、銀楕円キー --- */
#phone.skin-waon16 {
  --plate-top: 40px; --plate-radius: 30px; padding-top: 46px;
  --plate-bg:
    linear-gradient(180deg, rgba(198,192,233,.97) 0, rgba(198,192,233,.97) 250px, rgba(198,192,233,0) 251px),
    linear-gradient(165deg, color-mix(in srgb, var(--phone-body) 74%, #ffffff), var(--phone-body) 48%, color-mix(in srgb, var(--phone-body) 76%, #000000));
}
#phone.skin-waon16 .ph-antenna {
  display: block; top: 0; right: 32px; width: 17px; height: 46px;
  background: linear-gradient(90deg, #ffffff, #d6d8db 60%, #eceef0);
  border-radius: 8px 8px 2px 2px;
}
#phone.skin-waon16 .ph-speaker {
  display: block; width: 104px; height: 22px; margin: 0 auto 5px; border-radius: 50%;
  background-color: color-mix(in srgb, #c6c0e9 78%, #000000);
  background-image: radial-gradient(circle, rgba(20,22,28,.75) 2.3px, transparent 2.9px);
  background-size: 13px 10px; background-position: center; background-repeat: repeat-x;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.28);
}
#phone.skin-waon16 #lcd {
  border: 5px solid #a7adb6; border-radius: 8px;
  background: linear-gradient(180deg, #a9d2f2 0%, #d9eefa 58%, #c2def3 100%);
  color: #17304a;
}
#phone.skin-waon16 #lcd-top { border-bottom-color: rgba(23,48,74,.35); }
#phone.skin-waon16 #lcd-settings { border-bottom-color: rgba(23,48,74,.3); }
#phone.skin-waon16 #lcd-status { border-top-color: rgba(23,48,74,.35); }
#phone.skin-waon16 .soft-btn { border-radius: 999px; background: linear-gradient(180deg, #f7f8f9, var(--phone-sub)); }
#phone.skin-waon16 .key { background: linear-gradient(180deg, #f7f8f9, #ccd0d6); border-color: rgba(0,0,0,.35); }

/* --- 32和音モデル：折りたたみ、水色メタリック、ヒンジ帯、淡青カラー液晶、白角丸キー --- */
#phone.skin-waon32 {
  --plate-top: 40px; --plate-radius: 30px; padding-top: 46px;
  --plate-bg: linear-gradient(165deg, color-mix(in srgb, var(--phone-body) 72%, #ffffff), var(--phone-body) 48%, color-mix(in srgb, var(--phone-body) 78%, #000000));
}
#phone.skin-waon32 .ph-antenna {
  display: block; top: 0; right: 30px; width: 15px; height: 46px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--phone-body) 70%, #ffffff), var(--phone-sub));
  border-radius: 7px 7px 2px 2px;
}
#phone.skin-waon32 .ph-antenna::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 4px; background: #dfe3e8;
}
#phone.skin-waon32 .ph-speaker {
  display: block; width: 92px; height: 20px; margin: 0 auto 5px; border-radius: 50%;
  background-color: color-mix(in srgb, var(--phone-body) 80%, #000000);
  background-image: radial-gradient(circle, rgba(20,26,34,.7) 2.2px, transparent 2.8px);
  background-size: 12px 10px; background-position: center; background-repeat: repeat-x;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.25);
}
#phone.skin-waon32 #lcd {
  border: 7px solid #14181d; border-radius: 9px;
  background: linear-gradient(180deg, #e8f4fc, #fdfefe 72%);
  color: #1d3550;
}
#phone.skin-waon32 #lcd-top { border-bottom-color: rgba(29,53,80,.3); }
#phone.skin-waon32 #lcd-settings { border-bottom-color: rgba(29,53,80,.28); }
#phone.skin-waon32 #lcd-status { border-top-color: rgba(29,53,80,.3); }
#phone.skin-waon32 .ph-hinge { display: block; }
#phone.skin-waon32 .soft-btn { border-radius: 10px; background: linear-gradient(180deg, #ffffff, #e6ebf0); color: #1c2733; border-color: rgba(0,0,0,.3); }
#phone.skin-waon32 .key {
  border-radius: 10px; aspect-ratio: 1.5;
  background: linear-gradient(180deg, #ffffff, #e8edf2); color: #1c1c1c; border-color: rgba(0,0,0,.3);
}

/* --- 40和音モデル：折りたたみ、銀ボディ、アンテナなし、紺ドット柄ベゼル＋夕景風液晶、銀楕円キー --- */
#phone.skin-waon40 {
  --plate-radius: 32px;
  --plate-bg: linear-gradient(165deg, color-mix(in srgb, var(--phone-body) 74%, #ffffff), var(--phone-body) 48%, color-mix(in srgb, var(--phone-body) 76%, #000000));
}
#phone.skin-waon40 .ph-speaker {
  display: block; position: relative; width: 96px; height: 17px; margin: 0 auto 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--phone-body) 82%, #000000);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.22);
}
#phone.skin-waon40 .ph-speaker::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 5px;
  transform: translate(-50%, -50%); border-radius: 3px; background: rgba(0,0,0,.6);
}
#phone.skin-waon40 .phone-brand { margin-bottom: 18px; }
#phone.skin-waon40 #lcd {
  position: relative; isolation: isolate;
  border: 3px solid #10182e; border-radius: 8px;
  background: linear-gradient(180deg, #43407c 0%, #5d4472 52%, #2e2a55 100%);
  color: #ffffff;
}
#phone.skin-waon40 #lcd::before {
  content: ''; position: absolute; inset: -14px; z-index: -1; border-radius: 15px;
  background-color: #26304d;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.3px, transparent 1.6px);
  background-size: 9px 9px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
}
#phone.skin-waon40 #lcd-top { border-bottom-color: rgba(255,255,255,.45); }
#phone.skin-waon40 #lcd-settings { border-bottom-color: rgba(255,255,255,.35); }
#phone.skin-waon40 #lcd-status { border-top-color: rgba(255,255,255,.45); }
#phone.skin-waon40 .ph-hinge { display: block; }
#phone.skin-waon40 .soft-btn { border-radius: 999px; background: linear-gradient(180deg, #f7f8f9, var(--phone-sub)); }
#phone.skin-waon40 .key { background: linear-gradient(180deg, #f7f8f9, #ccd0d6); border-color: rgba(0,0,0,.35); }

/* --- 64和音モデル：INFOBAR風タイル。赤い外枠＋クリーム色フェイス、正方形タイルキーのモザイク配色 --- */
#phone.skin-waon64 {
  --plate-top: 40px; --plate-radius: 20px; padding-top: 46px;
  --plate-bg: #f6efdd;
  --plate-shadow: inset 0 0 0 11px var(--phone-body), inset 0 0 0 13px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.25);
}
#phone.skin-waon64 .ph-antenna {
  display: block; top: 0; left: 30px; width: 16px; height: 46px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--phone-body) 78%, #ffffff), var(--phone-body) 55%, color-mix(in srgb, var(--phone-body) 80%, #000000));
  border-radius: 8px 8px 2px 2px;
}
#phone.skin-waon64 .ph-speaker {
  display: block; width: 66px; height: 11px; margin: 0 auto 5px; border-radius: 6px;
  background: #2a2a2a; box-shadow: inset 0 1px 2px rgba(255,255,255,.3);
}
#phone.skin-waon64 .phone-brand { color: #2b2b2b; text-align: left; padding-left: 6px; letter-spacing: .12em; }
#phone.skin-waon64 #lcd { border: 4px solid #191919; border-radius: 4px; background: #f3ecd9; color: #22241f; }
#phone.skin-waon64 #softkeys { gap: 6px; }
#phone.skin-waon64 .soft-btn { border-radius: 6px; background: #f6efdd; border: 2px solid #cfc4a6; color: #33302a; }
#phone.skin-waon64 #keypad { gap: 6px; }
#phone.skin-waon64 .key {
  border-radius: 6px; aspect-ratio: 1.02;
  border: 2px solid rgba(0,0,0,.22); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08);
}
#phone.skin-waon64 .key[data-key="1"],
#phone.skin-waon64 .key[data-key="8"],
#phone.skin-waon64 .key[data-key="#"] { background: #e23b3b; color: #ffffff; }
#phone.skin-waon64 .key[data-key="2"],
#phone.skin-waon64 .key[data-key="6"],
#phone.skin-waon64 .key[data-key="*"] { background: #b9cdea; color: #1d2735; }
#phone.skin-waon64 .key[data-key="3"],
#phone.skin-waon64 .key[data-key="4"],
#phone.skin-waon64 .key[data-key="5"],
#phone.skin-waon64 .key[data-key="7"],
#phone.skin-waon64 .key[data-key="9"],
#phone.skin-waon64 .key[data-key="0"] { background: #f6efdd; color: #2b2b26; }
#phone.skin-waon64 .key.pressed { filter: brightness(1.16) saturate(1.25); }

.stage-controls { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .7rem; font-size: .88rem; }
.color-chip { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,.35); cursor: pointer; margin-right: 4px; vertical-align: middle; }
.color-chip.selected { outline: 3px solid var(--accent2); }
.mini-btn { font: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--panel); color: var(--ink); border-radius: 4px; padding: .15rem .5rem; }
#inp-tempo { width: 4.2rem; font: inherit; padding: .15rem .3rem; background: var(--panel); color: var(--ink); border: 1px solid var(--border); border-radius: 4px; }

.spec-box, .help-box, .export-box { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: .7rem .9rem; margin-bottom: .8rem; }
.export-box h3 { margin: .1rem 0 .5rem; }
.export-box label { display: block; margin-bottom: .45rem; font-size: .9rem; }
.export-box select { font: inherit; margin-left: .3rem; max-width: 100%; }
.export-note { font-size: .8rem; margin: .5rem 0 0; white-space: pre-line; }
.export-note:empty { display: none; }

.backup-box { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: .7rem .9rem; margin-bottom: .8rem; }
.backup-box h3 { margin: .1rem 0 .5rem; }
.backup-box .works-tools { margin-bottom: 0; }
.backup-result { font-size: .85rem; margin: .55rem 0 0; white-space: pre-line; }
.backup-result:empty { display: none; }
.works-tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; font-size: .88rem; }
.works-tools .note { font-size: .78rem; opacity: .75; }
.work-export { flex-basis: 100%; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; border-top: 1px dashed var(--border); padding-top: .5rem; font-size: .88rem; }
.work-export select { font: inherit; max-width: 100%; }
.work-export .export-note { flex-basis: 100%; margin-top: .1rem; }
.spec-box h3 { margin: .1rem 0 .4rem; }
.spec-box .spec-note { font-size: .86rem; }
.spec-box .evidence { font-size: .75rem; opacity: .8; }

.works-list { list-style: none; padding: 0; }
.works-list li { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .5rem; display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.works-list .w-title { font-weight: bold; }
.comment-box { flex-basis: 100%; border-top: 1px dashed var(--border); padding-top: .5rem; }
.bbs-thread-item { cursor: pointer; }
.bbs-badge { background: #2e4a3a; color: #fff; border-radius: 3px; padding: .05rem .4rem; font-size: .72rem; }
.bbs-badge.resolved { background: #8a6d1f; }
#view-bbs label { display: block; margin: .45rem 0; }
#view-bbs input[type="text"], #view-bbs textarea, #view-bbs select { font: inherit; }
#view-bbs textarea { width: 100%; box-sizing: border-box; }
#bbs-posts .comment-item button { font: inherit; cursor: pointer; border-radius: 5px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); padding: .15rem .6rem; margin-left: .5rem; }
.comment-item { margin: .3rem 0; }
.comment-input { width: 100%; box-sizing: border-box; margin: .4rem 0; }
.works-list .w-meta { font-size: .8rem; opacity: .8; }
.works-list button { font: inherit; cursor: pointer; border-radius: 5px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); padding: .25rem .7rem; }

.account-box, .cloud-box, .import-box { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: .7rem .9rem; margin-bottom: .8rem; }
.cloud-box h3 { margin: .1rem 0 .5rem; }
.account-box label { display: block; margin-bottom: .5rem; font-size: .9rem; }
.account-box input {
  font: inherit; padding: .35rem .5rem; margin-left: .3rem;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel); color: var(--ink); width: min(22rem, 100%);
}
.account-box .note, .cloud-box .note, #view-account > .note { font-size: .85rem; opacity: .85; }
.account-msg { font-size: .88rem; white-space: pre-line; }
.account-msg:empty { display: none; }
#cloud-usage { font-size: .9rem; font-weight: bold; }

.import-drop { border: 2px dashed var(--border); border-radius: 8px; padding: .9rem; text-align: center; margin-bottom: .8rem; }
.import-drop.dragover { border-color: var(--accent2); background: rgba(179, 84, 63, .08); }
.import-drop p { margin: .2rem 0 .6rem; }
.import-drop .note { font-size: .8rem; opacity: .8; text-align: left; }
#import-current label { display: block; margin-bottom: .5rem; font-size: .9rem; }
#import-current input[type="text"], #import-current input[type="number"] {
  font: inherit; padding: .35rem .5rem; margin-left: .3rem;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel); color: var(--ink);
}
#import-current input[type="text"] { width: min(22rem, 100%); }
#import-current input[type="number"] { width: 6rem; }
#import-current select { font: inherit; margin-left: .3rem; max-width: 100%; }
.import-range { border: 1px solid var(--border); border-radius: 8px; margin: .6rem 0; padding: .6rem .8rem; }
.import-range legend { font-size: .9rem; padding: 0 .3rem; }
.import-range .note { font-size: .8rem; opacity: .8; }
.import-summary-list { margin: .3rem 0 .6rem; padding-left: 1.2rem; font-size: .9rem; }
.import-summary-list li { margin-bottom: .2rem; }
#view-import > .note { font-size: .85rem; opacity: .85; }

/* 入力BOOK */
.book-notation {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1rem; line-height: 1.9; letter-spacing: .08em;
  word-break: break-all; background: var(--lcd, #eef3e2);
  border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem;
}
#book-list .menu-btn { display: block; width: 100%; text-align: left; margin-bottom: .4rem; }
#book-ref .book-notation { margin-top: .3rem; }

/* コミュニティ第1波（お知らせ・カウンター・リンク集・投票所・ゲストブック／あしあと） */
.counter-box { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .8rem; margin-bottom: .8rem; max-width: 560px; }
.counter-label { font-weight: bold; font-size: .9rem; }
.counter-digits { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.25rem; letter-spacing: .35em; background: #1c2a1e; color: #b6f2b0; border-radius: 4px; padding: .15rem .3rem .15rem .65rem; }
.kiriban-box { background: #fdf3c9; border: 2px solid #c9a93b; color: #4a3a00; border-radius: 8px; padding: .6rem .9rem; margin-bottom: .8rem; font-weight: bold; max-width: 560px; }
.news-box { margin-top: 1.4rem; max-width: 720px; }
.news-item { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: .55rem .8rem; margin-bottom: .5rem; }
.news-head { cursor: pointer; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.news-body { white-space: pre-line; margin-top: .4rem; font-size: .92rem; }
.bbs-badge.important { background: #b3543f; }
.link-banner-img { width: 88px; height: 31px; object-fit: contain; background: #fff; border: 1px solid var(--border); }
.poll-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: .7rem .9rem; margin-bottom: .7rem; }
.poll-card h4 { margin: .1rem 0 .5rem; }
.poll-opt { display: flex; align-items: center; gap: .6rem; margin: .3rem 0; flex-wrap: wrap; }
.poll-bar { flex: 1 1 120px; height: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; min-width: 90px; }
.poll-bar > div { height: 100%; background: var(--accent); }
.poll-opt .mine { font-weight: bold; }
#view-links label, #view-polls label, #view-guest label { display: block; margin: .45rem 0; }
#view-links input[type="text"], #view-links input[type="url"], #view-links textarea, #view-links select,
#view-polls input[type="text"], #view-guest textarea, #view-guest input[type="text"], #view-guest select { font: inherit; }
#view-links textarea, #view-guest textarea { width: 100%; box-sizing: border-box; }
#poll-options-box input { display: block; width: min(26rem, 100%); margin: .3rem 0; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 4px; background: var(--panel); color: var(--ink); box-sizing: border-box; }
#guest-entries button, #guest-fp-list button, #fp-received-list button, #fp-sent-list button { font: inherit; cursor: pointer; border-radius: 5px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); padding: .15rem .6rem; margin-left: .5rem; }

.site-footer { padding: 1rem; font-size: .8rem; opacity: .8; max-width: 1080px; margin: 0 auto; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #222; color: #fff; padding: .55rem 1.1rem; border-radius: 20px;
  font-size: .9rem; z-index: 50; box-shadow: 0 4px 14px rgba(0,0,0,.3);
}

/* コミュニティ第2波：通報パネル・検索／作者／メール画面 */
.report-panel { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(34rem, calc(100% - 24px)); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; z-index: 60; box-shadow: 0 8px 28px rgba(0,0,0,.35); box-sizing: border-box; }
.report-panel label { display: block; margin: .45rem 0; font-size: .9rem; }
.report-panel textarea { width: 100%; box-sizing: border-box; font: inherit; }
#view-search label, #view-author label, #view-mail label { margin: .45rem 0; }
#view-search select, #view-mail select, .report-panel select { font: inherit; }
#view-search input[type="text"], #view-mail input[type="text"], #view-mail textarea, #view-search textarea { font: inherit; }
#view-mail textarea, #view-search textarea { width: 100%; box-sizing: border-box; }
#mail-list .w-title, #search-list .w-title, #search-authors-list .w-title, #author-follow-list .w-title, #blocked-list .w-title, #mail-to-list .w-title { margin-right: .6rem; }
#mail-detail-body { white-space: pre-wrap; }

/* ===== コミュニティ第3波：バッジ・イベント・デコメ・アバター・雑誌・管理・法的・共有 ===== */
.pre-wrap { white-space: pre-wrap; }
.badge-row { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .4rem 0; }
.badge-chip { border: 1px solid var(--border); border-radius: 999px; padding: .15rem .7rem; font-size: .85rem; background: var(--bg); }
.author-visual { display: flex; align-items: flex-end; gap: .8rem; margin: .4rem 0; }
.author-visual canvas, #avatar-preview { image-rendering: pixelated; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
#avatar-preview { width: 160px; height: 160px; border-width: 2px; }
#author-avatar { width: 72px; height: 72px; }
html[data-theme="dark"] .author-visual canvas, html[data-theme="dark"] #avatar-preview { border-color: #d8d8d0; background: #e8e8e2; box-shadow: 0 0 0 3px #e8e8e2; }
#avatar-selectors { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .5rem 0; }
#avatar-selectors label { display: flex; flex-direction: column; font-size: .85rem; gap: .2rem; }
#avatar-selectors select { font: inherit; }
#badge-list button, #collab-mine-list button, #magazine-list button, #events-list button,
#admin-events-list button, #admin-news-list button, #admin-reports-list button,
#admin-links-list button, #admin-polls-list button, #admin-bbs-list button,
#collab-members button, #collab-results button {
  font: inherit; cursor: pointer; border-radius: 5px; border: 1px solid var(--border);
  background: var(--bg); color: var(--ink); padding: .15rem .6rem; margin-left: .5rem;
}
.event-card select { font: inherit; max-width: 100%; }
.deco-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.deco-cell { border: 1px solid var(--border); border-radius: 8px; padding: .6rem; text-align: center; background: var(--panel); }
.deco-cell canvas { image-rendering: pixelated; }
.deco-cell button { font: inherit; cursor: pointer; border-radius: 5px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); padding: .2rem .6rem; margin: .2rem; }
.share-qr-box, .share-card-box { text-align: center; margin: .6rem 0; }
.share-qr-box canvas { image-rendering: pixelated; max-width: 100%; }
.share-card-box canvas { max-width: 100%; height: auto; border-radius: 6px; }
#share-url { width: 100%; box-sizing: border-box; font: inherit; }
#collab-panel { max-height: 88vh; overflow-y: auto; }
#collab-panel input[type="text"], #collab-panel input[type="search"], #collab-panel select { font: inherit; }
.mag-book { border: 2px solid var(--border); border-radius: 6px; padding: 1.2rem; background: var(--panel); max-width: 44rem; margin: 1rem auto; }
.mag-cover { text-align: center; border-bottom: 3px double var(--border); padding-bottom: 1rem; margin-bottom: 1rem; }
.mag-cover h2 { font-size: 1.7rem; margin: .4rem 0; }
.mag-section { margin: 1rem 0; }
.mag-section h3, .mag-book > h3 { border-left: 6px solid var(--border); padding-left: .5rem; }
#magazine-editor label, #admin-event-form label, #admin-news-form label, #view-admin label { display: block; margin: .45rem 0; font-size: .9rem; }
#magazine-editor input[type="text"], #magazine-editor textarea,
#admin-event-form input, #admin-event-form textarea, #admin-event-form select,
#admin-news-form input, #admin-news-form textarea, #admin-news-form select,
#view-admin select { font: inherit; }
#magazine-editor input[type="text"], #admin-event-form input[type="text"], #admin-news-form input[type="text"] { width: min(26rem, 100%); box-sizing: border-box; }
#magazine-editor textarea, #admin-event-form textarea, #admin-news-form textarea { width: 100%; box-sizing: border-box; }
#mag-sections input[type="text"] { width: 100%; box-sizing: border-box; font: inherit; margin-bottom: .3rem; }
#mag-sections textarea { width: 100%; box-sizing: border-box; font: inherit; }
#admin-events-list input[type="text"] { font: inherit; }
.legal-body { max-width: 44rem; }
.legal-body h4 { margin: 1rem 0 .3rem; }
.legal-body p { margin: .3rem 0; line-height: 1.7; }
.print-area { display: none; }

/* ===== 印刷（着メロ雑誌のA4冊子） ===== */
@media print {
  @page { size: A4; margin: 15mm; }
  body > *:not(.print-area) { display: none !important; }
  .print-area { display: block !important; }
  .print-area .mag-book { border: none; max-width: none; margin: 0; padding: 0; background: #fff; color: #000; }
  .print-area .mag-cover { page-break-after: avoid; }
  .print-area .mag-section { page-break-inside: avoid; }
  .print-area button { display: none !important; }
  .print-area a { color: #000; text-decoration: none; }
}

/* ===== 第4波：仮想メモリ・赤外線／曲グループ ===== */
.vm-usage-bar { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; height: 12px; overflow: hidden; margin: .35rem 0; }
.vm-usage-bar > div { background: var(--accent); height: 100%; width: 0; transition: width .25s ease; }
#vm-device-tabs .tool-btn { margin-bottom: .3rem; }
.ir-phones { display: flex; align-items: stretch; gap: .6rem; margin: .7rem 0; }
.ir-phone { flex: 1 1 0; background: var(--bg); border: 2px solid var(--border); border-radius: 14px; padding: .6rem .7rem; min-width: 0; }
.ir-phone-name { font-weight: bold; margin: 0 0 .35rem; font-size: .9rem; }
.ir-lcd { background: #b8c49a; color: #1d2416; border-radius: 6px; padding: .55rem .6rem; min-height: 2.6em; font-size: .9rem; word-break: break-all; }
.ir-arrow { align-self: center; font-size: 1.4rem; opacity: .7; }
.works-list li.group-item { display: block; }
.group-head { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; margin-bottom: .4rem; }
.group-body { margin-top: .5rem; }
.works-list li.group-version { background: var(--bg); margin-bottom: 0; }
#group-manage { border-top: 2px dashed var(--border); margin-top: 1rem; padding-top: .6rem; }
#group-manage input[type="text"] { font: inherit; }

/* ===== アプリ目次ボタン・匿名意見フォーム ===== */
a.menu-btn.portal-btn { display: block; text-decoration: none; box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.feedback-sec { max-width: 720px; margin: 1.2rem auto 2rem; padding: 0 1rem; }
.feedback-card { background: var(--panel); border: 2px solid var(--border); border-radius: 8px; padding: 1rem 1.1rem; }
.feedback-card h3 { margin: .1rem 0 .4rem; }
.feedback-note { font-size: .85rem; opacity: .85; margin: .2rem 0 .6rem; }
.feedback-card textarea { width: 100%; box-sizing: border-box; font: inherit; border: 2px solid var(--border); border-radius: 6px; padding: .5rem; background: var(--bg); color: var(--ink); }
.feedback-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.feedback-actions { margin-top: .6rem; text-align: right; }
.feedback-send { font: inherit; cursor: pointer; border-radius: 6px; border: 2px solid var(--accent); background: var(--accent); color: #fff; padding: .45rem 1.2rem; }
.feedback-send:disabled { opacity: .65; cursor: not-allowed; }
.feedback-status { min-height: 1.2em; font-size: .9rem; margin: .5rem 0 0; }
.feedback-status.ok { color: #2e7d32; }
.feedback-status.err { color: #c62828; }

/* ===== 解説記事・法務リンク（AdSense対策、他アプリ共通） ===== */
.guide-article { max-width: 720px; margin: 2rem auto 0; padding: 0 1rem; line-height: 1.8; }
.guide-article h2 { font-size: 1.25rem; margin: 0 0 .8rem; }
.guide-article h3 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
.guide-article p { margin: .4rem 0; }
.legal-links { margin-top: .8rem; font-size: .9rem; }