/* ======================================================
   🌌 基本レイアウト
====================================================== */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  padding: 20px;
  background: #fff0f5; /* ← #f6f7fb から変更（薄いピンク） */
  color: #222;
  transition: background 0.3s, color 0.3s;
}

/* タイトル */
.app-title {
  text-align: center;
  font-size: 1.65em;
  font-weight: 700;
  margin-bottom: 6px;
  color: #1a1a1a;
}
.subtitle {
  font-size: 0.78em;
  color: #666;
}

/* ======================================================
   🌙 ダーク/ライト切替ボタン
====================================================== */
.dark-toggle-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  background: #444;
  color: #fff;
  padding: 8px 14px;
  font-size: 0.9em;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  z-index: 999;
  transition: background 0.3s;
}
.dark-toggle-btn:hover { background: #666; }

/* ======================================================
   🔄 更新情報（折りたたみ）
====================================================== */
.update-box {
  background: #fff;
  padding: 14px;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  margin-bottom: 18px;
  transition: transform 0.2s ease;
}
.update-box summary { font-weight: bold; cursor: pointer; }
.update-box[open] { transform: translateY(2px); }

/* ======================================================
   📦 結果カード
====================================================== */
.result-box {
  background: #fff;
  padding: 18px;
  border-radius: 14px;
  margin-top: 20px;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.10),
    0 8px 20px rgba(0,0,0,0.06);

  opacity: 0;
  transform: translateY(12px);
  animation: fadeInUp 0.45s ease forwards;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ======================================================
   📅 未来占い（日付指定）
====================================================== */
.fortune-date-area{
  margin: 10px 0 6px;
  text-align: center;
}
.fortune-date-label{
  font-weight: 700;
  margin-right: 6px;
}
.fortune-subnote{
  font-size: 0.80em;
  opacity: 0.80;
  margin-top: 4px;
  margin-bottom: 10px;
  text-align: center;
}
.fortune-footnote{
  font-size: 0.88em;
  opacity: 0.85;
  margin-top: 14px;
  text-align: center;
}

/* セクション見出し */
.section-title {
  margin-top: 18px;
  margin-bottom: 8px;
  padding: 8px 10px 8px 12px;
  border-left: 6px solid #4a90e2;
  border-radius: 12px;

  background: rgba(74, 144, 226, 0.10);
  font-weight: 800;
  font-size: 1.12em;
  line-height: 1.35;
}

/* ======================================================
   📅 入力フィールド
====================================================== */
#label-birthday {
  font-size: 1.1em;
  font-weight: bold;
}
input[type="date"] {
  font-size: 1.1rem;
  padding: 6px;
  height: 30px;
  width: 130px;
  border-radius: 10px;
  border: 1px solid #bbb;
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
  -webkit-text-size-adjust: 140%;
}

/* ======================================================
   🔘 iOS風ボタン
====================================================== */
.ios-button {
  background: linear-gradient(#fafafa, #e3e3e3);
  border: 1px solid #c8c8c8;
  border-radius: 14px;
  padding: 12px 22px;
  font-size: 1.05em;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  transition: all 0.18s;
}
.ios-button:active {
  transform: scale(0.96);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.main-button {
  background: linear-gradient(#4aa3ff, #1d79d6);
  border: 1px solid #1a5fb8;
  color: white;
}

/* 🔧 リセットボタンを小さく */
#resetBday {
  padding: 6px 12px !important;
  font-size: 0.85em !important;
  border-radius: 10px !important;
  transform: scale(0.90);
}

/* 占うボタンを中央配置 */
.center-button {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  margin-bottom: 10px;
}

/* ======================================================
   📊 表（メンタル指数含む）
====================================================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}
th, td {
  border: 1px solid #bbb;
  padding: 6px;
  font-size: 0.95em;
  text-align: center;
}

/* ======================================================
   📦 メッセージボックス
====================================================== */
.message-box {
  background: #f0f6ff;
  padding: 12px;
  border-radius: 10px;
  margin-top: 10px;
  line-height: 1.55;
}
.support-box {
  background: #fff8e6;
  padding: 12px;
  border-radius: 10px;
  margin-top: 12px;
  line-height: 1.55;
}

/* ======================================================
   🌌 フォース判定ボックス
====================================================== */
.force-box {
  border-radius: 12px;
  padding: 12px;
  margin-top: 8px;
  line-height: 1.6;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  font-size: 0.95em;
}
.force-title { font-weight: 700; margin-bottom: 4px; }
.force-label { font-style: italic; margin-left: 4px; opacity: 0.9; }
.force-power { font-size: 0.9em; margin-bottom: 6px; opacity: 0.9; }
.force-message { white-space: pre-line; }

/* ライト／バランス／ダーク */
.force-light {
  background: radial-gradient(circle at top, #e8f3ff, #d6ecff);
  border: 1px solid #8bb7ff;
}
.force-balance {
  background: radial-gradient(circle at top, #f0f4ff, #e2f0ff);
  border: 1px solid #9aa8ff;
}
.force-dark {
  background: radial-gradient(circle at top, #231b30, #151019);
  border: 1px solid #7b4b8f;
  color: #f5eaff;
}

/* ジェダイ風強調 */
.jedi-box {
  border-left: 4px solid #7bd4ff;
  box-shadow: 0 0 10px rgba(123, 212, 255, 0.35);
}

/* ======================================================
   🎴 タロット表示（画像なしでもOK）
====================================================== */
.tarot-box {
  background: #ffffff;
  border-radius: 14px;
  padding: 12px;
  margin-top: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);

  border-left: 4px solid #c27cff;
  background: #f9f0ff;
}

/* 🎴 大アルカナ画像（タイトル行：文字は真ん中／画像は右） */
.tarot-title{
  display: grid;
  grid-template-columns: 46px 1fr 46px; /* 左はダミー（画像と同幅） */
  align-items: center;
  column-gap: 10px;
  margin-bottom: 12px;  /* ←カードの下の隙間・調整（例：4〜16px） */
}

/* 左側のダミー枠（これがあると“真ん中”が本当に真ん中になる） */
.tarot-title::before{
  content: "";
}

.tarot-title-text{
  justify-self: center;
  text-align: center;
  font-weight: 800; /* タイトル太字 */
  font-size: 20px;   /* ←ここを大きく（例：20〜28px） */
  line-height: 1.15;
}

/* 英語サブタイトルも中央＆少し強調（好みで） */
.tarot-en{
  margin-top: 2px;
  text-align: center;
  display: block;
  font-weight: 700;    /* The Star も太字 */
  font-size: 13px;   /* ←英語の大きさ */
}

.tarot-major-img{
  justify-self: end;
  width: 46px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* どうしても“少しだけ”右に寄せたい場合（任意：0〜20pxくらい） */
/*
.tarot-title-text{
  transform: translateX(8px);
}
*/



/* ======================================================
   🌙 グラフボックス
====================================================== */
.mental-graph-box {
  background: #fff;
  padding: 14px;
  border-radius: 14px;
  margin-top: 24px;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.10),
    0 8px 20px rgba(0,0,0,0.06);
}
.mental-graph-box summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1em;
}

/* ======================================================
   🌙 ダークモード（トップページ寄り：深い紺）
====================================================== */
body.dark-mode {
  background: #0b1020;   /* 深い紺 */
  color: #e9eefb;
}

body.dark-mode .result-box,
body.dark-mode .update-box,
body.dark-mode .mental-graph-box,
body.dark-mode .tarot-box {
  background: #121a2e;   /* 紺寄りのカード */
  color: #ffffff;
  border-color: rgba(255,255,255,0.14);
}

body.dark-mode table th,
body.dark-mode table td {
  border-color: rgba(255,255,255,0.22);
}

body.dark-mode .ios-button {
  background: linear-gradient(#27334a, #1a2336);
  border-color: rgba(255,255,255,0.22);
  color: #ffffff;
}

/* メインボタンは現状の青グラデが合ってるので維持 */
body.dark-mode .main-button {
  background: linear-gradient(#4a8fff, #1b5bd6);
  border-color: #1748b8;
}

body.dark-mode input[type="date"] {
  background: #141d2f;
  color: #ffffff;
  border-color: rgba(255,255,255,0.28);
}

body.dark-mode .message-box { background: #1a2942; }
body.dark-mode .support-box { background: #2a2414; }
body.dark-mode .dark-toggle-btn{
  background: #2a3550;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}

/* フォース箱：ダーク時 */
body.dark-mode .force-light {
  background: radial-gradient(circle at top, #20314a, #192538);
  border-color: #8bb7ff;
}
body.dark-mode .force-balance {
  background: radial-gradient(circle at top, #252f4a, #1c2438);
  border-color: #9aa8ff;
}
body.dark-mode .force-dark {
  background: radial-gradient(circle at top, #150f20, #0b0812);
  border-color: #a070ff;
  color: #f8ecff;
}

/* タイトルが暗くならないように */
.dark-mode .app-title { color: #ffffff !important; }
.dark-mode .subtitle { color: #cccccc !important; }
body.dark-mode .tarot-en { color: #ccc; }

/* タロット：ダーク時の背景調整 */
body.dark-mode .tarot-box{
  border-left-color:#e0b4ff;
  background:#2a2035;
}
body.dark-mode .jedi-box{
  background:#1e2933;
  box-shadow:0 0 12px rgba(123, 212, 255, 0.4);
}

/* ======================================================
   🃏 タロット：補助カード＆複合リーディング
====================================================== */
.tarot-minor{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,0.18);
}
.tarot-minor-title{
  font-weight: 700;
  font-size: 0.95em;
  margin-bottom: 4px;
}
.tarot-minor-en{
  font-weight: 400;
  font-size: 0.9em;
  opacity: 0.85;
  margin-left: 6px;
}
.tarot-minor-msg{
  font-size: 0.95em;
  line-height: 1.5;
  opacity: 0.92;
}

.tarot-combo{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(74,144,226,0.10);
  border: 1px solid rgba(74,144,226,0.22);
}
.tarot-combo-title{
  font-weight: 800;
  font-size: 0.95em;
  margin-bottom: 6px;
}
.tarot-combo-msg{
  font-size: 0.98em;
  line-height: 1.6;
}

/* ダークモード */
body.dark-mode .tarot-minor{
  border-top-color: rgba(255,255,255,0.18);
}
body.dark-mode .tarot-combo{
  background: rgba(74,144,226,0.18);
  border-color: rgba(255,255,255,0.16);
}

/* ======================================================
   🏷️ タロット：見出し（キーワード / 補助カード / 複合リーディング）を少し強調
====================================================== */
.tarot-header b,
.tarot-minor-title,
.tarot-combo-title{
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(74,144,226,0.14);
  border: 1px solid rgba(74,144,226,0.26);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  letter-spacing: 0.02em;
}

.tarot-header b{
  margin-right: 6px;
  font-size: 0.98em;
}

/* ダークモード */
body.dark-mode .tarot-header b,
body.dark-mode .tarot-minor-title,
body.dark-mode .tarot-combo-title{
  background: rgba(74,144,226,0.22);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

/* ======================================================
   🏷️ タロット：クレジット表記
====================================================== */
.tarot-credit{
  margin-top: 8px;
  font-size: 10px;
  opacity: .55;
  text-align: right;
}

/* 🤖 Androidのみ：誕生日入力が大きくなりすぎる対策 */
body.android #birthday{
  -webkit-text-size-adjust: 100% !important; /* 140% を打ち消す */
  font-size: 0.95rem;        /* ←好みで微調整（0.9〜1.0） */
  padding: 6px 8px;
  height: 34px;
  width: 130px;              /* 元の幅を維持（必要なら 110〜150で調整） */
  box-sizing: border-box;
}

/* 🤖 Android Chrome：文字の自動拡大（font boosting）を無効化 */
body.android,
body.android *{
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* 🤖 Android Chrome：自動文字拡大を確実に無効化（html側にも適用） */
html.android,
html.android body,
html.android body *{
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* Android全体の微縮小（body.android が付かない時の保険） */
html.android body{
  font-size: 90%;
}

/* 🤖 Androidだけ：全体の文字サイズ微調整 */
body.android{
  font-size: 90%; /* 例：90%〜98%で好みに調整 */
}

/* ✅ iOSで出てしまうのを防ぐ：Android専用ブロックはデフォルト非表示 */
.android-only{ display: none !important; }

/* ✅ Androidだけ表示（html.android を最速付与しているのでこちらが確実） */
html.android .android-only,
body.android .android-only{
  display: block !important;
}

/* 🤖 Androidだけ：表示領域（本文）の横幅を少し広げる */
html.android body{
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* もし .container を使っている場合は、こちらも有効 */
html.android .container{
  width: 100%;
  max-width: 520px;     /* 好みで：480〜600 */
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* 🌌 タイトル（メイン文字だけ）をバッジ化 */
.app-title .title-badge{
  display: inline-block;
  padding: 6px 14px;
  border-radius: 16px;
  background: rgba(74,144,226,0.18);
  border: 1px solid rgba(74,144,226,0.28);
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}

/* ダークモード */
body.dark-mode .app-title .title-badge{
  background: rgba(74,144,226,0.25);
  border-color: rgba(255,255,255,0.18);
}

/* ======================================================
   📲 ホーム画面に追加（ボタン＆iOS案内）
====================================================== */
.install-area{
  text-align: center;
  margin: 10px 0 14px;
}
.install-btn{
  padding: 8px 14px;
  font-size: 0.92em;
  border-radius: 12px;
}
.install-help{
  margin: 10px auto 0;
  max-width: 520px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(74,144,226,0.10);
  border: 1px solid rgba(74,144,226,0.22);
  line-height: 1.6;
}
body.dark-mode .install-help{
  background: rgba(74,144,226,0.18);
  border-color: rgba(255,255,255,0.16);
}

/* LINE内ブラウザ注意表示 */
.line-notice{
  position: sticky;
  top: 10px;
  z-index: 9999;
  margin: 10px auto;
  padding: 10px 12px;
  max-width: 560px;
  border-radius: 14px;
  background: rgba(255, 230, 150, 0.95);
  border: 1px solid rgba(180, 120, 0, 0.25);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  line-height: 1.5;
  text-align: center;
  font-size: 0.98em;
}
body.dark-mode .line-notice{
  background: rgba(255, 230, 150, 0.18);
  border-color: rgba(255,255,255,0.18);
}

/* ======================================================
   💬 今日のメッセージ：カテゴリ選択
====================================================== */
.message-category-area{
  margin: 10px 0 6px;
  text-align: center;
}
.msg-category-label{
  font-weight: 700;
  margin-right: 6px;
}
.msg-category-select{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.25);
  background: #fff;
  font-size: 1.05em;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}
body.dark-mode .msg-category-select{
  background: #3a3a3c;
  color: #fff;
  border-color: #777;
}

/* サブタイトル内の一部だけ小さく */
.subtitle .subtitle-small{
  font-size: 0.8em;   /* 好みで 0.85〜0.95 */
  opacity: 0.9;
}

/* ======================================================
   🌟 マヤ暦プロフィールの視認性向上スタイル
====================================================== */

/* 折りたたみタイトルを少し強調（既存のupdate-boxを崩さない範囲） */
#mayaProfile summary {
  font-weight: 600;
  font-size: 1.05em;
  padding: 6px 0;
}

/* マヤ暦の各行間を綺麗に整える */
#mayaContent p {
  margin: 6px 0 12px;
  line-height: 1.7;
}

/* 太陽の紋章 / ウェイブスペル の説明部分を少し読みやすく */
#mayaContent b {
  color: #444; /* ほんのり強調 */
}

/* 折りたたみ内の上部余白を軽く追加（窮屈さを解消） */
#mayaProfile {
  margin-bottom: 16px;
}

/* ======================================================
   🌙 マヤ暦の文字色：dark-mode クラス対応（確実に効く）
====================================================== */

/* 太字はより明るく */
body.dark-mode #mayaContent b {
  color: #ffffff !important;
}

/* summary の文字を白に */
body.dark-mode #mayaProfile summary {
  color: #ffffff !important;
}

/* ======================================================
   🌙 ダークモード時：マヤ暦のタイトルをオレンジ、説明文を白
====================================================== */

/* まず全体を白に（説明文を白くするため） */
body.dark-mode #mayaProfile,
body.dark-mode #mayaProfile * {
  color: #ffffff !important;
}

/* タイトル（KIN、太陽の紋章… などのラベル部分）だけオレンジ */
body.dark-mode #mayaContent b {
  color: #ffb366 !important;  /* 柔らかいオレンジ */
}

/* summary（折りたたみタイトル）もオレンジにするなら以下を追加 */
body.dark-mode #mayaProfile summary {
  color: #ffb366 !important;
}

/* ライトモード用：常に黒文字 */
.halo-maya-description strong {
  display: inline-block;
  padding: 4px 8px;
  background-color: #fff4c1;
  border-radius: 6px;
  color: #000000;
}

/* ダークモードでも「#mayaProfileの全部白」を上書きする版 */
body.dark-mode #mayaProfile .halo-maya-description strong {
  color: #000000 !important;      /* しっかり黒 */
  background-color: #ffe178;      /* 少し濃い黄色でもOK */
}

/* ======================================================
   🌟 「このアプリのしくみ」内の太字をマヤ暦と同じオレンジに
====================================================== */

/* ライトモード＆ダークモード共通でオレンジ */
.update-box b {
  color: #ffb366;
}

/* 念のためダークモードでも上書きして固定 */
body.dark-mode .update-box b {
  color: #ffb366;
}

/* ======================================================
   🔵 マヤ暦：結果（KIN/紋章/ウェイブスペル/音）だけ青系＆太字
   - ラベル（b.maya-label 等）は別ルールでオレンジ
====================================================== */
#mayaProfile .maya-main-result{
  font-weight: 700;
  color: #2b6cff; /* ライトモード：見やすい青 */
}
body.dark-mode #mayaProfile .maya-main-result{
  font-weight: 700;
  color: #66a3ff !important; /* ダークモード：背景に負けない明るめ青 */
}

/* ✅ 星座：星座名を「マヤ暦と同じ青」で表示（constellationProfile 内） */
#constellationProfile .maya-main-result,
#constellationProfile .constellation-name{
  font-weight: 700;
  color: #2b6cff;
}

body.dark-mode #constellationProfile .maya-main-result,
body.dark-mode #constellationProfile .constellation-name{
  color: #66a3ff !important;
}

/* ✅ 見出し（ダークモードでも目立たせる） */
body.dark-mode .section-title {
  background: rgba(74, 144, 226, 0.22);
  border-left-color: #70a9ff;
  color: #ffffff;
}

/* ======================================================
   🌈 統合アドバイス内の見出し（4項目だけ色変更）
====================================================== */
.ih{
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 6px;
}

/* ライトモード */
.ih-adv     { color:#b45309; background: rgba(245, 158, 11, .18); }
.ih-todo    { color:#c2410c; background: rgba(249, 115, 22, .18); }
.ih-caution { color:#9a3412; background: rgba(234, 88, 12, .16); }
.ih-reading { color:#b45309; background: rgba(245, 158, 11, .18); }
.ih-question { color:#b45309; background: rgba(245, 158, 11, .18); }


/* ダークモード（暗背景でも視認性UP） */
body.dark-mode .ih-adv,
body.dark-mode .ih-reading,
body.dark-mode .ih-question{
  color:#ffd08a;
  background: rgba(245, 158, 11, .28);
}
body.dark-mode .ih-todo{
  color:#ffb48a;
  background: rgba(249, 115, 22, .26);
}
body.dark-mode .ih-caution{
  color:#ffb08a;
  background: rgba(234, 88, 12, .24);
}

/* ✅ 更新情報（update-box）だけ読みやすくする */
.update-box ul{
  margin: 10px 0 0;
  padding-left: 1.2em;
}

.update-box li{
  line-height: 1.4;      /* 行間を広げる */
  margin: 0 0 12px 0;     /* 項目ごとに余白 */
}

.update-box li:last-child{
  margin-bottom: 0;
}

/* NEW行が長いので、強調部分の読みやすさも少しだけ */
.update-box li b{
  font-weight: 800;
}

/* NEWだけ装飾 */
.update-box li.is-new{
  background: rgba(0,0,0,.04);
  padding: 6px 8px;
  border-radius: 10px;
}
body.dark-mode .update-box li.is-new{
  background: rgba(255,255,255,.06);
}

/* ✅ NEWタグ（小さめ・細身） */
.tag-new{
  display: inline-block;
  padding: 1px 4px;          /* 横幅を短く */
  border-radius: 8px;         /* pill じゃなく角丸小さめ */
  font-weight: 700;           /* 少し控えめ */
  font-size: 0.85em;          /* 文字を小さく */
  letter-spacing: 0;          /* 横に伸びるのを抑える */
  margin-right: 6px;
  line-height: 1.2;

  color: #c2410c;
  background: rgba(249, 115, 22, .12);
  border: 1px solid rgba(249, 115, 22, .22);
}

body.dark-mode .tag-new{
  color: #ffb48a;
  background: rgba(249, 115, 22, .18);
  border-color: rgba(249, 115, 22, .28);
}

/* 星座summaryをマヤ暦と同じ色味に寄せる（ダークモード） */
body.dark-mode #constellationProfile > summary{
  color: #ffb366;
}

#constellationProfile summary {
  font-weight: 600;
  font-size: 1.05em;
  padding: 6px 0;
}
/* 星座名（季節の星座の光）をマヤ暦の青と同じにする */
.constellation-name{
  color: #2b6cff;
  font-weight: 700;
}
body.dark-mode .constellation-name{
  color: #66a3ff;
}

/* 🤖 Androidだけ：タイトルを少し小さくして改行崩れを防ぐ */
html.android .app-title{
  font-size: 1.45em;
}
html.android .app-title .title-badge{
  font-size: 0.98em;
  letter-spacing: -0.01em;
}
/* ======================================================
   🤖 Android：誕生日入力は「選択式のみ」にする（v3.0.2追記）
   - date入力は隠す（JSが値を使うのでDOMは残す）
   - android-only の details を常時表示っぽく見せる（summaryを隠す）
====================================================== */

/* date入力を隠す（index / aisho 共通） */
html.android #birthday,
body.android #birthday,
html.android #meBirthday,
body.android #meBirthday,
html.android #youBirthday,
body.android #youBirthday{
  display: none !important;
}

/* 「Androidで入力しづらい場合はこちら」的な“メニュー感”を消す */
html.android details.android-only > summary,
body.android details.android-only > summary{
  display: none !important;
}

/* 見た目の余白（最小） */
html.android details.android-only,
body.android details.android-only{
  border: none;
  padding: 0;
  margin: 8px 0 0;
  background: transparent;
}
/* ======================================================
   🤖 Androidだけ：誕生日ラベル右にリセット（index.html用）
   - iOS/PCには影響なし
====================================================== */
html.android .android-bday-inline {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0;
}

/* ======================================================
   🤖 追記：index.html（Android）の誕生日UIを aisho.html 風に整える
   - iOS/PCには影響なし（html.android に限定）
====================================================== */

/* ラベル（Android用）を既存 #label-birthday と同じ見た目に */
html.android #label-birthday-android{
  font-size: 1.1em;
  font-weight: bold;
}

/* 上段のリセット（#resetBdayAndroid）を aisho.html の small-btn と同じサイズ感に */
html.android #resetBdayAndroid{
  padding: 6px 12px !important;
  font-size: 0.85em !important;
  border-radius: 10px !important;
  transform: scale(0.98);
}

/* Android選択ピッカー（年/月/日）の見た目を aisho.html と同じに */
html.android .android-picker{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}
html.android .android-picker select{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.25);
  background: #fff;
  font-size: 1.05em;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}
body.dark-mode html.android .android-picker select,
html.android body.dark-mode .android-picker select{
  background:#3a3a3c;
  color:#fff;
  border-color:#777;
}
html.android .picker-unit{
  font-weight: 800;
  opacity: 0.85;
}

/* Androidでは元のラベル＆元のリセット配置を隠す（重複防止） */
html.android #label-birthday { display: none !important; }
html.android #resetBday { display: none !important; }

/* Android以外はこの行自体を出さない */
html:not(.android) .android-bday-inline { display: none !important; }
/* ======================================================
   🎂 誕生日入力（iOSはラベルで改行＋入力右にリセット）＋囲い
   - Androidは現状維持（ラベル行にリセット／入力は下）
====================================================== */
.bday-panel{
  background: #fff0f5; /* body背景と同じ（薄いピンク） */
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 10px 12px 12px;
  margin: 8px 0 10px;
  text-align: center;
}

.inline-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0;
}

.ios-bday-label-row{
  width: 100%;
  text-align: center;
  margin: 6px 0 0;
}

/* iOS/PC：入力の右にリセット（中央寄せ） */
html:not(.android) .bday-input-row{
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Android：入力は単独で下に（リセットは上の行） */
html.android .ios-bday-label-row{ display: none !important; }
html.android .bday-input-row{
  margin-top: 6px;
  display: block;
}

/* Android：誕生日選択（details/update-box）をピンク囲いの中に馴染ませる */
html.android .bday-panel details.update-box.android-only{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 8px 0 0;
  margin: 8px 0 0;
}
html.android .bday-panel details.update-box.android-only:hover{
  transform: none;
}

/* ダークモード：囲いの背景を暗色に */
body.dark-mode .bday-panel{
  background: #2c2c2e;
  border-color: rgba(255,255,255,0.12);
}

/* 🍎 iOSだけ：誕生日リセット〜「今日のメッセージ」間の余白を少し詰める */
@supports (-webkit-touch-callout: none) {
  br.bday-to-msggap{ display: none; }
  .bday-panel{ margin-bottom: 10px; }
  .message-category-area{ margin-top: 10px; }
}