@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');
/* ========================================== */
/* 🌿 知的な深緑テーマ (5カラーパレット) */
/* 1. #373E40: 基本テキスト、サイドバー背景 */
/* 2. #305252: ヘッダー背景、ホバー時の色 */
/* 3. #488286: メインカラー（ボタン、リンク、＋ボタン） */
/* 4. #77878B: 枠線、サブテキスト(muted) */
/* 5. #B7D5D4: アクセント背景、サイドバー文字色、メニューアイコン */
/* ========================================== */

:root {
    --bs-body-color: #373E40;
    --bs-primary: #488286;
    --bs-secondary: #77878B;
    --bs-border-color: #77878B;
    --bs-text-muted: #77878B;
}

/* 全体のテキストカラーと背景の微調整 */
body {
    color: #373E40;
    background-color: #f4f7f7; /* 白に近いごく淡いグリーングレー（視認性確保） */
}

/* --- ボタン・リンク --- */
.btn-primary {
    background-color: #488286;
    border-color: #488286;
    color: white;
}
.btn-primary:hover, .btn-primary:active {
    background-color: #305252 !important;
    border-color: #305252 !important;
}
.btn-outline-primary {
    color: #488286;
    border-color: #488286;
}
.btn-outline-primary:hover {
    background-color: #488286;
    color: white;
}
a {
    color: #488286;
}
a:hover {
    color: #305252;
}
.text-primary {
    color: #488286 !important;
}

/* --- 右下のフローティングアクションボタン（＋ボタン） --- */
.fab-button {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(48, 82, 82, 0.4);
    z-index: 1000;
    transition: transform 0.2s;
    background-color: #488286 !important;
    border-color: #488286 !important;
    color: white;
}
.fab-button:hover {
    transform: scale(1.1);
    background-color: #305252 !important;
}

/* --- ヘッダー --- */
/* ヘッダー上端を画面の絶対トップに張り付け、ブラウザ既定の body margin
   などで生じる「白いスキマ」を完全に潰す。これが無いと iOS PWA の
   ノッチ領域に body の bg-light が透けて見え、ヘッダーが沈み込む。 */
body { margin: 0 !important; }

.app-header {
    display: flex;
    align-items: center;
    background-color: #305252; /* パレット2番目の深緑 */
    color: white;
    /* ▼ 画面の絶対トップに固定 ▼
       position: sticky + top: 0 で、ヘッダーの背景色がノッチ領域も
       覆うようにする。スクロールしても常に最上部に追従するので
       ノッチに「めり込む」見え方も解消される。 */
    position: sticky;
    top: 0;
    z-index: 1020;
    margin-top: 0;
    /* ▼ iOS PWA セーフエリア対応 ▼
       <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
       が効くと、ステータスバー（時刻・電池）がアプリ領域に被さるため、
       上方向の余白に env(safe-area-inset-top) を加算してヘッダー中身を押し下げる。
       横向き iPhone Pro Max など、ノッチが左右に来る端末向けに
       左右にも safe-area-inset を確保する。 */
    padding-top:    calc(15px + env(safe-area-inset-top,    0px));
    padding-right:  calc(20px + env(safe-area-inset-right,  0px));
    padding-bottom: 15px;
    padding-left:   calc(20px + env(safe-area-inset-left,   0px));
    /* ヘッダーの最低高さもセーフエリア分を確保（content が小さくても背景は伸びる） */
    min-height: calc(54px + env(safe-area-inset-top, 0px));
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.header-title {
    margin: 0 auto;
    font-size: 1.25rem;
    font-weight: bold;
}
.header-title a {
    color: white;
    text-decoration: none;
}

/* --- ハンバーガーメニュー --- */
.hamburger {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 18px;
    z-index: 1001;
}
.hamburger span {
    display: block;
    height: 3px;
    background-color: #B7D5D4; /* パレットの最も明るい色をアクセントに */
    border-radius: 2px;
    transition: 0.3s;
}
.hamburger:hover span {
    background-color: white;
}

/* --- サイドバー（モダンなダークテーマ） --- */
.sidebar {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100vh;
    background-color: #373E40; /* 一番暗い色で引き締める */
    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
    transition: 0.3s;
    z-index: 1050;
    overflow-y: auto;
}
.sidebar.active {
    left: 0;
}
.sidebar-header {
    text-align: right;
    padding: 15px;
    border-bottom: 1px solid #77878B;
}
.close-btn {
    cursor: pointer;
    font-size: 1.5rem;
    color: #B7D5D4;
}
.close-btn:hover {
    color: white;
}
.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-list li a {
    display: block;
    padding: 15px 20px;
    color: #B7D5D4; /* 明るいブルーグリーンで読みやすく */
    text-decoration: none;
    border-bottom: 1px solid #77878B; /* 中間のグレーで区切り */
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
}
.sidebar-list li a:hover {
    background-color: #305252; /* ホバー時はヘッダーと同じ色 */
    color: white;
}

/* --- バッジ・カード・その他フォーム --- */
.badge.bg-secondary {
    background-color: #77878B !important;
}
.text-muted {
    color: #77878B !important;
}
.card {
    border-color: #B7D5D4 !important; /* カードの枠線を淡いブルーグリーンに */
}
.card-header {
    background-color: #B7D5D4 !important;
    color: #373E40 !important;
}
.form-control, .form-select {
    border-color: #B7D5D4;
    color: #373E40;
}
.form-control:focus, .form-select:focus {
    border-color: #488286;
    box-shadow: 0 0 0 0.25rem rgba(72, 130, 134, 0.25);
}

/* 削除ボタンやエラーは、2枚目のパレットにあったピンク(#F45B69)をアクセントに活用 */
.btn-danger {
    background-color: #F45B69;
    border-color: #F45B69;
}
.btn-danger:hover {
    background-color: #d14957;
    border-color: #d14957;
}

/* オーバーレイ */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(55, 62, 64, 0.6); /* 黒ではなく一番暗い色をベースにした半透明 */
    display: none;
    z-index: 1040;
}
.overlay.active {
    display: block;
}

/* ========================================== */
/* 🌟 アイコン画像用のCSS */
/* ========================================== */
.icon-img {
    width: 1.1em; /* テキストよりほんの少し大きく */
    height: 1.1em;
    vertical-align: middle; /* テキストと高さを合わせる */
    margin-right: 0.25em; /* テキストとの間に少し余白 */
    object-fit: contain; /* 画像をカケさせない */
}
/* カプセル内のアイコンは余白なし */
.badge-icon .icon-img {
    margin-right: 0;
}
/* ========================================== */
/* 🌟 ロゴ用の特別フォント */
/* ========================================== */
.logo-text {
    font-family: 'Montserrat', sans-serif; /* 読み込んだフォントを適用 */
    font-weight: 800; /* 極太にする */
    font-size: 1.6rem; /* 少し文字を大きく */
    letter-spacing: 2px; /* 文字の間隔を少し開けてスタイリッシュに */
    color: white;
    text-decoration: none;
}
.logo-text:hover {
    color: #B7D5D4; /* ホバー時に淡いブルーグリーンに光るように */
}
/* ════════════════════════════════════════════════════════════════
   UI 改修：タブバー & 右スライドドロワー
   ════════════════════════════════════════════════════════════════ */

/* ─── ページ全体のタブバー干渉対策 ───────────────────────────
   ① 下方向：タブバーは position: fixed なので、コンテンツが下端まで
      到達したときに重なる。body padding-bottom でその分を逃がす。
      ※ 多くの既存テンプレが Bootstrap の <body class="...pb-5">
        を使っており、pb-5 は !important 付きで効くため、ここの定義も
        !important で勝たないと打ち消される。
   ② 縦方向：ページが短いと body の bg-light が viewport 末端まで届かず、
      タブバーとの間に「白く透ける隙間」が出て『タブバーが浮いている』
      ように見える。min-height: 100dvh で body を viewport いっぱいに
      引き伸ばし、見た目の連続性を保つ。 */
body {
    min-height: 100vh;     /* dvh 未対応ブラウザ用フォールバック */
    min-height: 100dvh;    /* モバイルブラウザの動的 viewport に追随 */
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── 画面下部のタブバー ────────────────────────────────────── */
.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background-color: #ffffff;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    z-index: 1030;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0));
}
.tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #6b7280;
    font-size: 0.68rem;
    transition: color 0.15s ease;
    padding: 0 2px;
}
.tab i {
    font-size: 1.45rem;
    line-height: 1;
}
.tab .tab-label {
    margin-top: 2px;
    font-weight: 500;
    white-space: nowrap;
}
.tab:hover, .tab:focus {
    color: #305252;
}
.tab-active {
    color: #305252;
}
.tab-active .tab-label {
    font-weight: 700;
}
/* 中央の「投稿」だけ強調色 */
.tab-create i {
    color: #305252;
    font-size: 1.85rem;
}
.tab-create.tab-active i {
    color: #1f3a3a;
}
/* プロフィールアイコン（タブバー） */
.tab-profile-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    background-color: #fff;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
/* アクティブ時：アイコンを少し大きくし、太い外周リング + 二重ハロー */
.tab-profile-icon-active {
    width: 30px;
    height: 30px;
    border: 3px solid #305252;
    /* 内側の白いリング + 外側のテーマカラーリング でくっきり浮かせる */
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 5px #305252,
        0 2px 6px rgba(48,82,82,0.35);
    transform: translateY(-2px);
}

/* ── 右側スライドドロワー（プロフィール歯車から開く） ────── */
.right-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 88vw;
    height: 100vh;
    height: 100svh;
    background-color: #ffffff;
    box-shadow: -4px 0 18px rgba(0,0,0,0.18);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    z-index: 1050;
    overflow-y: auto;
    /* ▼ セーフエリア：top はノッチ、bottom はホームインジケータ、right は横向き端末のノッチ対策 */
    padding-top:    env(safe-area-inset-top,    0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-right:  env(safe-area-inset-right,  0);
}
.right-drawer.open {
    transform: translateX(0);
}
.drawer-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 1040;
}
.drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.drawer-list li > a,
.drawer-list li > form > a {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    color: #1f2937;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.12s;
}
.drawer-list li > a:hover,
.drawer-list li > form > a:hover {
    background-color: #f3f4f6;
}

/* ── 通知タブの未読件数バッジ ─────────────────────────────── */
.tab-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.notif-badge {
    position: absolute;
    top: -6px;
    right: -12px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: #dc3545;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    pointer-events: none;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   個人用設定：UI 密度 = SMART モード
   ・タブバーのテキストを非表示にしてアイコンのみのミニマル UI に
   ════════════════════════════════════════════════════════════════ */
body.ui-smart .tabbar .tab-label {
    display: none;
}
body.ui-smart .tabbar {
    height: 54px;
    padding: 2px 0 calc(2px + env(safe-area-inset-bottom, 0));
}
body.ui-smart {
    padding-bottom: 64px;
}
body.ui-smart .tab i {
    font-size: 1.7rem;
}
body.ui-smart .tab-create i {
    font-size: 2rem;
}

/* ════════════════════════════════════════════════════════════════
   個人用設定：外観 = DARK モード
   ・Bootstrap 5.3+ ネイティブの data-bs-theme="dark" に乗っかり、
     アプリ固有のクラス (bg-light / text-dark / app-header 等) を上書き
   ════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] body.bg-light {
    background-color: #121212 !important;
    color: #e7e7e7;
}

/* ヘッダー：暗めの背景に */
[data-bs-theme="dark"] .app-header {
    background-color: #1a2a2a;
    color: #ffffff;
}

/* カード・モーダル */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .list-group-item {
    background-color: #1e1e1e;
    color: #e7e7e7;
    border-color: #2c2c2c;
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-white {
    background-color: #181818 !important;
    color: #e7e7e7 !important;
}

/* 文字色補正：暗い面に乗る text-dark / text-muted は可読な明色へ */
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-muted {
    color: #b0b0b0 !important;
}
/* ただし、ダークでも背景が「固定の明色」のままになるバッジ等の上では
   黒文字を維持する（例：研究者バッジ=bg-info / 注意系=bg-warning）。
   これらは背景色を変えていないのに上の一括 .text-dark でグレー化され、
   明色背景×グレー文字＝低コントラストになっていたのを是正する。
   ※ bg-light / bg-white はダークで暗色へ上書きしているため対象外（明色文字のまま） */
[data-bs-theme="dark"] .bg-info.text-dark,
[data-bs-theme="dark"] .bg-warning.text-dark,
[data-bs-theme="dark"] .text-bg-info,
[data-bs-theme="dark"] .text-bg-warning {
    color: #212529 !important;
}
[data-bs-theme="dark"] code {
    color: #f8c471;
}

/* タブバー */
[data-bs-theme="dark"] .tabbar {
    background-color: #1a1a1a;
    border-top-color: #2c2c2c;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.5);
}
[data-bs-theme="dark"] .tab            { color: #a0a0a0; }
[data-bs-theme="dark"] .tab:hover      { color: #ffffff; }
[data-bs-theme="dark"] .tab-active     { color: #7fc9c9; }
[data-bs-theme="dark"] .tab-create i   { color: #7fc9c9; }
[data-bs-theme="dark"] .tab-create.tab-active i { color: #b7e8e8; }
[data-bs-theme="dark"] .tab-profile-icon-active {
    border-color: #7fc9c9;
    box-shadow:
        0 0 0 2px #121212,
        0 0 0 5px #7fc9c9,
        0 2px 6px rgba(127,201,201,0.45);
}

/* 右ドロワー */
[data-bs-theme="dark"] .right-drawer {
    background-color: #1a1a1a;
    color: #e7e7e7;
}
[data-bs-theme="dark"] .drawer-list li > a,
[data-bs-theme="dark"] .drawer-list li > form > a {
    color: #e7e7e7;
}
[data-bs-theme="dark"] .drawer-list li > a:hover,
[data-bs-theme="dark"] .drawer-list li > form > a:hover {
    background-color: #262626;
}

/* リンク */
[data-bs-theme="dark"] a:not(.btn):not(.tab):not(.list-group-item):not(.logo-text) {
    color: #7fc9c9;
}
[data-bs-theme="dark"] a:not(.btn):not(.tab):not(.list-group-item):not(.logo-text):hover {
    color: #b7e8e8;
}

/* フォーム要素 */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #2a2a2a;
    color: #e7e7e7;
    border-color: #3a3a3a;
}
[data-bs-theme="dark"] .form-control::placeholder { color: #777; }

/* 通知バッジは赤を保持 */
[data-bs-theme="dark"] .notif-badge {
    border-color: #1a1a1a;
}

/* タブバーを非表示にしたページ（例: 投稿詳細）では body 下部の余白も削除
   pb-5 を上書きするため !important が必要 */
body.no-tabbar {
    padding-bottom: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ════════════════════════════════════════════════════════════════
   PWA セーフエリア対応の強化
   ・viewport-fit=cover 環境下で iOS の Home Indicator や
     Android の丸み端末でタブバーが見切れないように、
     左右 / 下方向に env(safe-area-inset-*) を確保。
   ════════════════════════════════════════════════════════════════ */
.tabbar {
    /* 下方向：通常 4px + ホームインジケータ分の余白
       左右方向：丸み端末や横向き時のノッチ回避 */
    padding-left:  env(safe-area-inset-left,   0);
    padding-right: env(safe-area-inset-right,  0);
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0));
    /* 端末によっては bottom: 0 でも切れる場合があるため、min-height で確保 */
    min-height: calc(64px + env(safe-area-inset-bottom, 0));
    height: auto;
}
/* スマートモードも同じく拡張 */
body.ui-smart .tabbar {
    min-height: calc(54px + env(safe-area-inset-bottom, 0));
    height: auto;
}
/* body の下余白：ホームインジケータ分込みでタブバー高さ + 余裕を確保
   ※ Bootstrap utility .pb-5 (!important) を抑え込むため !important を併用 */
body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}
body.ui-smart {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}
/* ドロワーも safe-area の左右と下にフィット */
.right-drawer {
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-right:  env(safe-area-inset-right,  0);
}

/* ════════════════════════════════════════════════════════════════
   ダークモード追加対応：取り残されていた箇所
   ════════════════════════════════════════════════════════════════ */

/* File 入力（プロフィールアイコン設定など）─ ボタン部分が真っ白で浮く問題 */
[data-bs-theme="dark"] .form-control[type="file"],
[data-bs-theme="dark"] input[type="file"] {
    background-color: #2a2a2a;
    color: #e7e7e7;
    border-color: #3a3a3a;
}
[data-bs-theme="dark"] input[type="file"]::file-selector-button,
[data-bs-theme="dark"] .form-control[type="file"]::file-selector-button {
    background-color: #3a3a3a;
    color: #e7e7e7;
    border: 0;
    border-right: 1px solid #4a4a4a;
}
[data-bs-theme="dark"] input[type="file"]::file-selector-button:hover {
    background-color: #4a4a4a;
}

/* textarea / input をすべて確実にダーク化 */
[data-bs-theme="dark"] textarea.form-control,
[data-bs-theme="dark"] input.form-control:not([type="file"]) {
    background-color: #2a2a2a;
    color: #e7e7e7;
    border-color: #3a3a3a;
}
[data-bs-theme="dark"] textarea.form-control:focus,
[data-bs-theme="dark"] input.form-control:focus {
    background-color: #2a2a2a;
    color: #ffffff;
    border-color: #7fc9c9;
    box-shadow: 0 0 0 .2rem rgba(127,201,201,0.25);
}

/* 投稿詳細の固定下部コメント入力エリア（fixed-bottom） */
[data-bs-theme="dark"] .fixed-bottom .card,
[data-bs-theme="dark"] .fixed-bottom {
    background-color: transparent;
}
[data-bs-theme="dark"] .fixed-bottom .form-control,
[data-bs-theme="dark"] .fixed-bottom textarea {
    background-color: #1f1f1f;
    color: #e7e7e7;
    border-color: #3a3a3a;
}

/* 添付エリアなど bg-light で薄グレーになっている箇所 */
[data-bs-theme="dark"] .bg-light.border-secondary,
[data-bs-theme="dark"] .card-body.bg-light {
    background-color: #181818 !important;
    color: #e7e7e7 !important;
}

/* ガイドのヒーロー・チップ・ステップ番号バッジをダーク用に調整 */
[data-bs-theme="dark"] .guide-hero {
    background: linear-gradient(135deg, #1e3535 0%, #2c5658 100%);
}
[data-bs-theme="dark"] .guide-step-num {
    background-color: #7fc9c9;
    color: #121212;
}
/* Bootstrap accordion をダーク対応（5.3+ の data-bs-theme でも一部漏れる場合の保険） */
[data-bs-theme="dark"] .accordion {
    --bs-accordion-bg: #1e1e1e;
    --bs-accordion-color: #e7e7e7;
    --bs-accordion-border-color: #2c2c2c;
    --bs-accordion-btn-color: #e7e7e7;
    --bs-accordion-btn-bg: #1e1e1e;
    --bs-accordion-active-bg: #2a3a3a;
    --bs-accordion-active-color: #ffffff;
    /* ▼ 折りたたみインジケータ（chevron）が黒 SVG だとダーク背景に同化するため
       色を明るくする CSS フィルタを適用。Bootstrap デフォルトの ::after icon を再着色。*/
    --bs-accordion-btn-icon-transform: rotate(0deg);
}
[data-bs-theme="dark"] .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(2.5);
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #2a3a3a;
    color: #ffffff;
}

/* ─── ガイドページ専用 / その他の汎用 dark 補強 ──────────────
   1. 目次の <a> リンクが accent-color と被って見えない問題を解消
   2. bg-body-tertiary はテーマ追従するが、shadow が消えがちなので border で補強
*/
[data-bs-theme="dark"] .guide-toc {
    background-color: #1e1e1e;
    border: 1px solid #2c2c2c;
}
[data-bs-theme="dark"] .guide-toc a {
    color: #7fc9c9;
}
[data-bs-theme="dark"] .guide-toc a:hover {
    color: #b7e8e8;
}
[data-bs-theme="dark"] .guide-toc .guide-divider {
    color: #6b7280;
}
[data-bs-theme="dark"] .accordion-body code {
    background-color: #2a2a2a;
    color: #f8c471;
}

/* 警告アラートが light-modeカラーで浮かないよう調整 */
[data-bs-theme="dark"] .alert-light {
    background-color: #1e1e1e;
    border-color: #2c2c2c;
    color: #e7e7e7;
}
[data-bs-theme="dark"] .alert-warning {
    background-color: #3a2a10;
    border-color: #6b4a1a;
    color: #ffd97a;
}
[data-bs-theme="dark"] .alert-info {
    background-color: #102a3a;
    border-color: #1a4a6b;
    color: #7fc9e8;
}
[data-bs-theme="dark"] .alert-success {
    background-color: #0f2e1a;
    border-color: #1c5a32;
    color: #98d9a3;
}
[data-bs-theme="dark"] .alert-danger {
    background-color: #3a1212;
    border-color: #6b1c1c;
    color: #f49a9a;
}

/* ════════════════════════════════════════════════════════════════
   投稿詳細：画面下部のチャット入力欄（textarea + ＋ボタン）
   ・以前はインラインで rgba(255,255,255,0.95) を直接書いていたため
     ダークモード CSS が効かない問題があった。
   ・クラス化してテーマ別に色を出し分ける。
   ════════════════════════════════════════════════════════════════ */

/* ── ライトモード（既定） ───────────────────────── */
.chat-input {
    background-color: rgba(255, 255, 255, 0.95);
    color: #1f2937;
}
.chat-input::placeholder { color: #9ca3af; }

.chat-attach-btn {
    background-color: rgba(255, 255, 255, 0.95);
    color: #6c757d;
}
.chat-attach-btn:hover {
    background-color: #f1f3f5;
    color: #305252;
}
.chat-attach-btn i { color: inherit; }

/* ── 投稿本文・コメント本文中の自動リンク化された URL ─────────
   ・青文字 + アンダーラインで「リンク」と分かるように
   ・長い URL は折り返し許可（word-break: break-all）でレイアウト崩れ防止
   ・onclick="event.stopPropagation()" を付与してあるので、親の post-link-area
     クリックハンドラと衝突せず、URL クリックは新規タブで開ける */
.auto-link {
    color: #0d6efd;
    text-decoration: underline;
    word-break: break-all;
    position: relative;
    z-index: 5;
}
.auto-link:hover {
    color: #0a58ca;
    text-decoration: underline;
}
[data-bs-theme="dark"] .auto-link {
    color: #7fc9c9;
}
[data-bs-theme="dark"] .auto-link:hover {
    color: #b7e8e8;
}

/* ── ダークモード ───────────────────────────────── */
[data-bs-theme="dark"] .chat-input {
    background-color: rgba(34, 34, 34, 0.96);
    color: #e7e7e7;
    border-color: #4a4a4a !important;
}
[data-bs-theme="dark"] .chat-input::placeholder { color: #6b7280; }
[data-bs-theme="dark"] .chat-input:focus {
    background-color: rgba(34, 34, 34, 0.98);
    color: #ffffff;
    border-color: #7fc9c9 !important;
    box-shadow: 0 0 0 .2rem rgba(127,201,201,0.25);
}

[data-bs-theme="dark"] .chat-attach-btn {
    background-color: rgba(34, 34, 34, 0.96);
    color: #cfd2d4;
    border-color: #4a4a4a !important;
}
[data-bs-theme="dark"] .chat-attach-btn:hover {
    background-color: #2c3a3a;
    color: #b7e8e8;
    border-color: #7fc9c9 !important;
}

/* ════════════════════════════════════════════════════════════
   運営お知らせバー（fragments :: header 内・全ページ上部）
   ════════════════════════════════════════════════════════════ */
.announcement-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff8e1;
    color: #6b5a16;
    border: 1px solid #f3e3a8;
    border-radius: .5rem;
    padding: .5rem .75rem;
    margin: 0 0 1rem;
    font-size: .9rem;
}
.announcement-bar .announcement-icon { flex: 0 0 auto; color: #c9a227; }
.announcement-bar .announcement-text {
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.announcement-bar .announcement-text:hover { text-decoration: underline; }
.announcement-bar .announcement-close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: inherit;
    opacity: .7;
    cursor: pointer;
    line-height: 1;
    padding: 0 .15rem;
}
.announcement-bar .announcement-close:hover { opacity: 1; }
[data-bs-theme="dark"] .announcement-bar {
    background: #2e2a18;
    color: #e6d9a8;
    border-color: #5a4f2a;
}

/* ════════════════════════════════════════════════════════════
   トースト通知
   ════════════════════════════════════════════════════════════ */
.app-toast-container {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(92vw, 360px);
    pointer-events: none;
}
.app-toast {
    pointer-events: auto;
    background: #323232;
    color: #fff;
    border-radius: .5rem;
    padding: .65rem .9rem;
    font-size: .88rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease;
    word-break: break-word;
}
.app-toast.is-show { opacity: 1; transform: translateY(0); }
.app-toast-success { background: #2e7d51; }
.app-toast-danger  { background: #b3403a; }
.app-toast-warning { background: #9a7d18; }
.app-toast-info    { background: #305252; }
/* スマホは下部タブバーと重ならないよう少し上げる */
@media (max-width: 575.98px) {
    .app-toast-container { bottom: 5rem; }
}

/* ════════════════════════════════════════════════════════════
   Markdown 本文（投稿詳細・サーバ側でサニタイズ済みHTMLを描画）
   ════════════════════════════════════════════════════════════ */
.markdown-body { line-height: 1.8; word-break: break-word; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-weight: 700; margin: 1em 0 .5em; }
.markdown-body h1 { font-size: 1.5rem; }
.markdown-body h2 { font-size: 1.3rem; }
.markdown-body h3 { font-size: 1.15rem; }
.markdown-body p { margin: 0 0 .8em; }
.markdown-body ul, .markdown-body ol { padding-left: 1.5em; margin: 0 0 .8em; }
.markdown-body blockquote { border-left: 4px solid #ced4da; margin: 0 0 .8em; padding: .2em .9em; color: #6c757d; }
.markdown-body code { background: rgba(135,131,120,.15); padding: .1em .3em; border-radius: .25rem; font-size: .9em; }
.markdown-body pre { background: #f4f4f4; padding: .8em; border-radius: .4rem; overflow-x: auto; }
.markdown-body pre code { background: none; padding: 0; }
.markdown-body a { color: #0d6efd; }
.markdown-body img { max-width: 100%; }
[data-bs-theme="dark"] .markdown-body pre { background: #1e1e1e; }
[data-bs-theme="dark"] .markdown-body code { background: rgba(255,255,255,.1); }

/* ════════════════════════════════════════════════════════════
   スマートモード（UI 密度 = SMART）追加レイアウト
   ・ホーム：検索カードを畳み、ヘッダー右上（fragments :: header 内）に # / 🔍。
     押下でハッシュタグバー／検索パネルを開く。各パネルは
     「左上=見出し / 右上=閉じる」の見出し行を持つ。
   ・投稿詳細：いいね横のブックマーク・従来の編集/削除を隠し、
     ヘッダー右上に［ブックマーク］［⋮］。⋮ で編集/削除メニュー。
   ・通常モード（ui-default）ではこれらは一切出さず、従来レイアウトのまま。
   ════════════════════════════════════════════════════════════ */

/* ヘッダー右上のスマート専用アクション（ホーム=#/🔍、投稿詳細=ブックマーク/⋮）。
   ヘッダーの flex 内に置くため位置指定は不要。ui-smart のときだけ表示する。 */
.header-smart-actions { display: none; }
body.ui-smart .header-smart-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.header-smart-actions .btn { padding: .2rem .55rem; }
.header-smart-actions form { display: inline-flex; margin: 0; }

/* ホーム：検索カード／ハッシュタグパネルはスマート時のみ、ボタン押下で開く */
body.ui-smart .search-filter-card { display: none; }
body.ui-smart.search-open .search-filter-card { display: block; }
/* スマート時はカードの折りたたみヘッダーを隠し、中身は常に開いた状態で見せる */
body.ui-smart .search-filter-card > .card-header { display: none; }
body.ui-smart .search-filter-card .collapse { display: block !important; }

#smartTagPanel { display: none; }
body.ui-smart.tag-open #smartTagPanel { display: block; }

/* パネル見出し行（左=タイトル / 右=閉じる）。スマート時のみ表示 */
.smart-panel-head { display: none; }
body.ui-smart .smart-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    font-weight: 700;
}
.smart-panel-head .smart-panel-close {
    border: 0;
    background: none;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 600;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* 投稿詳細：従来位置のブックマーク・編集/削除を隠す（スマート時） */
body.ui-smart .detail-edit-actions,
body.ui-smart .detail-bookmark { display: none !important; }

/* 投稿詳細：⋮ メニュー（編集/削除のドロップダウン） */
.smart-detail-menu { position: relative; }
.smart-detail-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 44px;
    min-width: 150px;
    background: #fff;
    border-radius: .6rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.22);
    overflow: hidden;
    z-index: 1031;
}
.smart-detail-dropdown.open { display: block; }
.smart-detail-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .6rem 1rem;
    border: 0;
    background: none;
    text-align: left;
    color: var(--bs-body-color, #212529);
    text-decoration: none;
}
.smart-detail-dropdown .dropdown-item:hover { background: rgba(0,0,0,.05); }
[data-bs-theme="dark"] .smart-detail-dropdown { background: #1e1e1e; }
[data-bs-theme="dark"] .smart-detail-dropdown .dropdown-item { color: #e9ecef; }
[data-bs-theme="dark"] .smart-detail-dropdown .dropdown-item:hover { background: rgba(255,255,255,.08); }

/* ── 実績一覧（achievements.html） ───────────────────────────── */
.achievement-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
/* 未獲得カードは少し沈ませて「これから狙う対象」であることを示す */
.achievement-locked { opacity: .82; }
.achievement-locked strong { color: var(--bs-secondary-color, #6c757d); }
/* プロフィールの獲得実績は中央寄せ（profile.html の .profile-badges） */
.profile-badges { justify-content: center; }