/* =========================================================
   テーマ機能(Phase 7)
   色・角丸・フォントを CSS変数にまとめ、body のクラスで切替える。
   :root は既定(ウォーム・ミニマル)。ログイン前のページもこれが効く。
   body.theme-neumorphism / body.theme-dark で変数を上書きする。
   ========================================================= */
:root {
    --bg: #faf7f2;            /* ページ背景(生成り) */
    --card: #ffffff;          /* メインカード */
    --surface: #faf7f2;       /* フォームや各日記の面 */
    --text: #2b2926;          /* 本文 */
    --text-muted: #6b6660;    /* ラベル・補足 */
    --text-faint: #9a948a;    /* さらに薄い説明 */
    --border: #ece6dc;        /* 境界線 */
    --accent: #e07a5f;        /* アクセント(テラコッタ) */
    --accent-hover: #c75f44;
    --accent-soft: #f7e6df;   /* 選択中の淡い背景 */
    --on-accent: #ffffff;     /* アクセント上の文字 */
    --radius: 14px;
    --radius-sm: 10px;
    --font-head: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --focus-ring: 0 0 0 3px rgba(224, 122, 95, 0.18);
}

/* 案1:ニューモーフィズム(やわらかな凹凸) */
body.theme-neumorphism {
    --bg: #e8ebf0;
    --card: #e8ebf0;
    --surface: #e8ebf0;
    --text: #3a3f47;
    --text-muted: #5b606b;
    --text-faint: #8a8f99;
    --border: transparent;
    --accent: #6c8cff;
    --accent-hover: #5577ee;
    --accent-soft: #dfe6ff;
    --on-accent: #ffffff;
    --radius: 20px;
    --radius-sm: 16px;
    --font-head: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif;
    --shadow: 8px 8px 18px #c5c9d1, -8px -8px 18px #ffffff;
    --focus-ring: 0 0 0 3px rgba(108, 140, 255, 0.25);
}

/* 案2:ダーク(夜の書斎) */
body.theme-dark {
    --bg: #0f1117;
    --card: #1a1d29;
    --surface: #20242f;
    --text: #e8eaed;
    --text-muted: #aab0bb;
    --text-faint: #8b8f99;
    --border: #2c3140;
    --accent: #7c5cff;
    --accent-hover: #6b4ce0;
    --accent-soft: #2a2545;
    --on-accent: #ffffff;
    --radius: 16px;
    --radius-sm: 12px;
    --font-head: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif;
    --shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
    --focus-ring: 0 0 0 3px rgba(124, 92, 255, 0.3);
}

/* ===== 季節テーマ(明るい系・色だけ上書き。radius/font/shadow は :root を継承) ===== */
/* 桜(春) */
body.theme-sakura {
    --bg: #fdf2f4;
    --card: #ffffff;
    --surface: #fdf2f4;
    --text: #4a2e35;
    --text-muted: #8a6b72;
    --text-faint: #b89aa1;
    --border: #f3dde2;
    --accent: #e58ba3;
    --accent-hover: #d56f8b;
    --accent-soft: #fbe4ea;
    --on-accent: #ffffff;
    --focus-ring: 0 0 0 3px rgba(229, 139, 163, 0.22);
}
/* 新緑(初夏) */
body.theme-fresh {
    --bg: #f1f7ed;
    --card: #ffffff;
    --surface: #f1f7ed;
    --text: #2c3a2a;
    --text-muted: #5e6e58;
    --text-faint: #93a08c;
    --border: #dde9d4;
    --accent: #5fa14e;
    --accent-hover: #4d8a3f;
    --accent-soft: #e3f0d9;
    --on-accent: #ffffff;
    --focus-ring: 0 0 0 3px rgba(95, 161, 78, 0.22);
}
/* 紅葉(秋) */
body.theme-autumn {
    --bg: #f7f0e8;
    --card: #fffaf3;
    --surface: #f5ece1;
    --text: #3d2f24;
    --text-muted: #7a6555;
    --text-faint: #a8917e;
    --border: #e8dac8;
    --accent: #c2702f;
    --accent-hover: #a85b22;
    --accent-soft: #f3e2d2;
    --on-accent: #ffffff;
    --focus-ring: 0 0 0 3px rgba(194, 112, 47, 0.22);
}
/* 雪(冬) */
body.theme-winter {
    --bg: #eef3f8;
    --card: #ffffff;
    --surface: #eef3f8;
    --text: #2b3a47;
    --text-muted: #5f7080;
    --text-faint: #93a4b3;
    --border: #d8e3ec;
    --accent: #5b9bd5;
    --accent-hover: #4a82b8;
    --accent-soft: #e0ecf6;
    --on-accent: #ffffff;
    --focus-ring: 0 0 0 3px rgba(91, 155, 213, 0.22);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    padding: 1rem;
    -webkit-font-smoothing: antialiased;
    transition: background 0.2s, color 0.2s;
}

.container {
    max-width: 600px;
    margin: 1rem auto;
    background: var(--card);
    padding: 1.75rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
/* 背景演出ON時だけ、列をわずかに透過させて後ろの粒(桜・雪など)を各項目の裏に見せる。
   color-mix 非対応の古い環境では無視され、通常どおり不透明のまま(粒は余白に見える)。 */
.diary-ambient-on .container {
    background: color-mix(in srgb, var(--card) 82%, transparent);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.5rem;
}

h1 { font-size: 1.35rem; font-family: var(--font-head); }
h2 { margin: 1.5rem 0 0.75rem; font-size: 1.05rem; color: var(--text-muted); font-family: var(--font-head); }

label {
    display: block;
    margin: 0.9rem 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    margin-top: 0.3rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* ニューモーフィズムは入力欄を「凹み」にする */
body.theme-neumorphism input[type="text"],
body.theme-neumorphism input[type="password"],
body.theme-neumorphism input[type="email"],
body.theme-neumorphism textarea {
    box-shadow: inset 3px 3px 7px #c5c9d1, inset -3px -3px 7px #ffffff;
}

textarea { resize: vertical; min-height: 80px; }

button {
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    cursor: pointer;
    margin-top: 0.75rem;
    font-weight: 500;
    transition: background 0.15s, transform 0.1s;
    font-family: inherit;
}
button:hover { background: var(--accent-hover); }
button:active { transform: scale(0.98); }

/* ニューモーフィズムのボタンは立体的に */
body.theme-neumorphism button { box-shadow: 4px 4px 10px #c5c9d1, -4px -4px 10px #ffffff; }
body.theme-neumorphism button:active { box-shadow: inset 3px 3px 7px rgba(0,0,0,.2); }

/* ヘッダー右側のリンク群 */
.header-nav {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}

/* アイコン+小さな文字のナビ項目 */
.nav-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    text-decoration: none;
    color: var(--text-faint);
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    transition: all 0.15s;
    min-width: 3.2rem;
}
.nav-icon:hover { color: var(--accent); background: var(--accent-soft); }
.nav-emoji { font-size: 1.3rem; line-height: 1; }
.nav-label { font-size: 0.65rem; line-height: 1; }

.logout {
    color: var(--text-faint);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    transition: all 0.15s;
}
.logout:hover { color: var(--accent); background: var(--accent-soft); }

.link {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-faint);
}
.link a { color: var(--accent); text-decoration: none; }
.link a:hover { text-decoration: underline; }
/* 退会など危険な操作へのリンクは控えめな赤に */
.danger-link { color: #c41e3a !important; }

/* ===== 設定ページ Phase 11 ===== */
/* ヘッダーのユーザーアイコン */
.header-avatar {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: -0.35rem;
    border: 1px solid var(--border);
}
/* 設定ページ上部のプロフィール要約 */
.settings-profile {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin-bottom: 0.5rem;
}
.settings-profile .avatar-preview { width: 56px; height: 56px; flex-shrink: 0; }
.settings-profile-name { font-weight: 500; font-family: var(--font-head); font-size: 1.05rem; }
.settings-profile-bio { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.3rem; }

/* アカウント系リンクの縦並び */
.settings-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.settings-link {
    display: block;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 0.92rem;
    transition: border-color 0.15s;
}
.settings-link:hover { border-color: var(--accent); }
.settings-link.danger-link { color: #c41e3a !important; }

/* 折りたたみセクション(<details>)。普段は見出しだけ、タップで中のリンクが開く */
.settings-group {
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
}
.settings-group > summary {
    list-style: none;                 /* 既定の三角マーカーを消す */
    cursor: pointer;
    padding: 0.9rem 1.1rem;
    font-family: var(--font-head);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.settings-group > summary::-webkit-details-marker { display: none; }  /* Safari用 */
.settings-group > summary::after {
    content: '▾';
    color: var(--text-muted);
    transition: transform 0.15s;
}
.settings-group[open] > summary::after { transform: rotate(180deg); }
.settings-group > summary:hover { color: var(--accent); }
/* 開いたとき:中のリンク群は見出しの下に少し余白をつけて並べる */
.settings-group .settings-links { margin-top: 0; padding: 0 0.8rem 0.8rem; }

/* プロフィールのアイコン編集 */
.avatar-edit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.avatar-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}
.avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: var(--card);
}
/* 絵文字アイコン(プレビュー用の丸) */
.avatar-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    background: var(--card);
}
/* ヘッダーのアイコンが絵文字のとき */
.header-avatar.avatar-emoji,
.header-avatar.avatar-empty {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 1.3rem;
    border: none;
    background: transparent;
}

/* 絵文字選択ボタンの一覧 */
.avatar-emoji-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.3rem 0;
}
.avatar-emoji-btn {
    font-size: 1.3rem;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    margin-top: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    transition: all 0.12s;
    line-height: 1;
}
.avatar-emoji-btn:hover { border-color: var(--accent); background: var(--card); }
.avatar-emoji-btn.is-on {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: scale(1.1);
}

.error {
    background: #ffeaea;
    color: #c41e3a;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border-left: 3px solid #c41e3a;
}

.success {
    background: var(--accent-soft);
    color: var(--accent-hover);
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border-left: 3px solid var(--accent);
}

.meta {
    color: var(--text-faint);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.mood-picker {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0;
}
.mood-picker label {
    flex: 1;
    margin: 0;
    cursor: pointer;
}
.mood-picker input { display: none; }
.mood-picker span {
    display: block;
    text-align: center;
    padding: 0.6rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1.5rem;
    transition: all 0.15s;
    background: var(--surface);
}
.mood-picker label:hover span { border-color: var(--accent); }
.mood-picker input:checked + span {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: scale(1.05);
}
/* ニューモーフィズムの気分ボタンは丸い凹凸に */
body.theme-neumorphism .mood-picker span {
    border: none;
    border-radius: 50%;
    box-shadow: 4px 4px 9px #c5c9d1, -4px -4px 9px #ffffff;
}
body.theme-neumorphism .mood-picker input:checked + span {
    box-shadow: inset 4px 4px 9px #c5c9d1, inset -4px -4px 9px #ffffff;
    transform: none;
}

.entry-form {
    background: var(--surface);
    padding: 1.25rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}
.entry-form h2 { margin-top: 0; }

/* タグ入力欄 */
.tag-field {
    display: block;
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.tag-field input[type="text"] { margin-top: 0.4rem; }
.tag-field-label { display: block; }

/* 過去タグの選択ボタン群 */
.tag-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0;
}
.tag-choice {
    font-family: inherit;
    font-size: 0.8rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-muted);
    cursor: pointer;
    margin-top: 0;
    transition: all 0.12s;
}
/* 未選択ボタンのホバー:枠だけ強調。背景は白(card)のまま。
   ※ 共通の button:hover(赤背景)が漏れてくるのを明示的に打ち消す。
     これが無いと「解除したのにマウスが乗っていて赤いまま」に見えてしまう。 */
.tag-choice:hover {
    background: var(--card);
    color: var(--text);
    border-color: var(--accent);
}
/* 選択中のタグボタンはアクセント色で塗る */
.tag-choice.is-on {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}
/* 選択中をホバーしてもアクセント色を保つ(白に戻さない) */
.tag-choice.is-on:hover {
    background: var(--accent-hover);
    color: var(--on-accent);
}

/* 各日記に表示するタグのチップ */
.entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 0.25rem;
}
.tag-chip {
    display: inline-block;
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-hover);
    text-decoration: none;
    border: 1px solid var(--border);
    transition: all 0.15s;
}
.tag-chip:hover { border-color: var(--accent); }

/* 画像添付の入力欄 */
.image-field {
    display: block;
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.image-field input[type="file"] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: var(--text);
    max-width: 100%;
}
/* ファイル選択の「ボタン」部分を大きく押しやすくする(指でもタップしやすいサイズに)。
   ::file-selector-button はモダンブラウザ共通でファイル入力のボタンだけを装飾できる。 */
input[type="file"]::file-selector-button {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.7rem 1.2rem;
    margin-right: 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
input[type="file"]::file-selector-button:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}
/* 一覧に表示する添付画像 */
.entry-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 0.5rem 0 0.25rem;
    border: 1px solid var(--border);
}

/* 編集画面の画像セクション */
.image-edit {
    margin: 0.9rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.image-edit .entry-image { max-width: 200px; }
.image-remove {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.4rem 0;
    color: var(--text-muted);
}
.image-remove input { width: auto; margin: 0; }

/* 本文キーワード検索フォーム */
.search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0.75rem;
    flex-wrap: wrap;
}
.search-form input[type="search"] {
    flex: 1;
    min-width: 140px;
    margin-top: 0;
    /* 検索ボタンと縦の高さを揃える */
    padding: 0.6rem 0.8rem;
}
.search-form button {
    margin-top: 0;
    padding: 0.6rem 1.1rem;
    flex-shrink: 0;
}
.search-clear {
    color: var(--text-faint);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
}
.search-clear:hover { color: var(--accent); }

.entry {
    background: var(--surface);
    padding: 1rem 1.1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    border-left: 3px solid var(--accent);
}
.entry-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.mood { font-size: 1.5rem; }
/* 編集画面の「気分なし(解除)」ボタンの中身。絵文字より小さい文字なので中央に収める */
.mood-none-pick {
    color: var(--text-faint);
    font-weight: 500;
    font-size: 0.95rem;
}
time { color: var(--text-faint); font-size: 0.85rem; }

/* 編集・削除ボタンの行 */
.entry-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    justify-content: flex-end;
}
.btn-action {
    background: transparent;
    border: 1px solid var(--border);
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-muted);
    font-family: inherit;
    margin-top: 0;
    font-weight: normal;
    line-height: 1.4;
    display: inline-block;
    transition: all 0.15s;
}
body.theme-neumorphism .btn-action { box-shadow: none; }
.btn-edit:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: transparent;
}
.btn-delete:hover {
    border-color: #c41e3a;
    color: #c41e3a;
    background: transparent;
}
.inline-form {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
}

.empty {
    color: var(--text-faint);
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
}

/* ===== 2要素認証(2FA)設定画面 ===== */
.setup-steps {
    margin: 1rem 0 1.25rem 1.25rem;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.setup-steps li { margin: 0.35rem 0; }

.qr-box {
    text-align: center;
    padding: 1rem;
    background: #ffffff;
    border-radius: var(--radius-sm);
    margin: 0.5rem 0;
}
.qr-box img { display: inline-block; }

/* 手入力用のシークレットキー。等幅で読みやすく、折り返す */
.secret-key {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1rem;
    letter-spacing: 1px;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    text-align: center;
    word-break: break-all;
    margin-bottom: 1rem;
    color: var(--text);
}

/* 危険操作(2FA無効化など)の強調ボタン */
.btn-delete-strong {
    background: #c41e3a;
}
.btn-delete-strong:hover { background: #a01830; }

/* =========================================================
   テーマ選択画面(theme.php)
   ========================================================= */
.theme-list {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}
.theme-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.1rem;
    background: var(--surface);
}
.theme-card.is-locked { opacity: 0.7; }
.theme-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.theme-card-head strong { font-family: var(--font-head); font-size: 1.05rem; }
.theme-badge {
    font-size: 0.75rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-hover);
    white-space: nowrap;
}
.theme-badge-lock { background: #eee; color: #888; }
.theme-desc { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 0.75rem; }

/* 各テーマカードのミニプレビュー。実際の色味が一目で分かるようにする */
.theme-swatch {
    border-radius: 12px;
    padding: 0.9rem;
    margin-bottom: 0.85rem;
}
.sw-card {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.7rem;
    border-radius: 12px;
}
.sw-mood {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 15px;
}
.sw-btn {
    margin-left: auto;
    font-size: 0.72rem;
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    color: #fff;
}
.btn-current, .btn-locked {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-faint);
    cursor: default;
}
.btn-current:hover, .btn-locked:hover { background: transparent; }

/* =========================================================
   タップ演出(エフェクト)設定 effect.php
   ========================================================= */
.effect-list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1rem; }
.effect-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.effect-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.effect-name { font-family: var(--font-head); font-weight: 600; }
.effect-desc { color: var(--text-muted); font-size: 0.85rem; margin: 0.4rem 0 0.8rem; }
.effect-actions { display: flex; align-items: center; gap: 0.5rem; }
.effect-actions form { margin: 0; }
.effect-actions button { margin-top: 0; }
/* 「ためす」は控えめ(セカンダリ)な見た目に */
.effect-try {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.effect-try:hover { background: var(--accent-soft); border-color: var(--accent); }

/* フォント設定の見本テキスト */
.font-sample {
    margin: 0.2rem 0 0.8rem;
    font-size: 1.15rem;
    color: var(--text);
}

/* インストール案内バナー(ホーム上部) */
/* ★ display:flex は [hidden] 属性(既定 display:none)を打ち消すので、
   hidden のときは確実に消えるよう明示する(これが無いと✕で消えない)。 */
.install-hint[hidden] { display: none; }
.install-hint {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}
.install-hint-text { flex: 1; }
.install-hint-link {
    color: var(--accent-hover);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.install-hint-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 0.1rem 0.3rem;
    margin: 0;
    cursor: pointer;
    flex: none;
}
.install-hint-close:hover { background: transparent; color: var(--text); }

/* アプリ導入ガイド(install.php) */
.guide-card {
    margin: 1rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.guide-card.is-mine { border-color: var(--accent); box-shadow: var(--shadow); }
.guide-card h2 { margin-bottom: 0.5rem; }
.guide-steps { margin: 0; padding-left: 1.3rem; }
.guide-steps li { margin: 0.35rem 0; }
.guide-steps .ico {
    display: inline-block;
    padding: 0 0.3rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    font-size: 0.85em;
}

/* ホームの「もっと見る」(直近10件より前へ) */
.more-link { margin: 1.25rem 0 0.25rem; text-align: center; }
.more-link a {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
}
.more-link a:hover { border-color: var(--accent); background: var(--accent-soft); }

/* --- プレビュー:ウォーム --- */
.theme-preview-warm .theme-swatch { background: #faf7f2; }
.theme-preview-warm .sw-card { background: #fff; border: 1px solid #ece6dc; }
.theme-preview-warm .sw-mood { background: #faf7f2; border: 1px solid #ece6dc; }
.theme-preview-warm .sw-mood-on { background: #f7e6df; border: 1.5px solid #e07a5f; }
.theme-preview-warm .sw-btn { background: #e07a5f; }

/* --- プレビュー:ニューモーフィズム --- */
.theme-preview-neumorphism .theme-swatch { background: #e8ebf0; }
.theme-preview-neumorphism .sw-card { background: #e8ebf0; box-shadow: 5px 5px 12px #c5c9d1, -5px -5px 12px #fff; }
.theme-preview-neumorphism .sw-mood { background: #e8ebf0; box-shadow: 3px 3px 6px #c5c9d1, -3px -3px 6px #fff; }
.theme-preview-neumorphism .sw-mood-on { box-shadow: inset 3px 3px 6px #c5c9d1, inset -3px -3px 6px #fff; }
.theme-preview-neumorphism .sw-btn { background: #6c8cff; }

/* --- プレビュー:ダーク --- */
.theme-preview-dark .theme-swatch { background: #0f1117; }
.theme-preview-dark .sw-card { background: #1a1d29; border: 1px solid #2c3140; }
.theme-preview-dark .sw-mood { background: #20242f; border: 1px solid #2c3140; }
.theme-preview-dark .sw-mood-on { background: #2a2545; border: 1.5px solid #7c5cff; }
.theme-preview-dark .sw-btn { background: #7c5cff; }

/* --- プレビュー:桜(春) --- */
.theme-preview-sakura .theme-swatch { background: #fdf2f4; }
.theme-preview-sakura .sw-card { background: #fff; border: 1px solid #f3dde2; }
.theme-preview-sakura .sw-mood { background: #fdf2f4; border: 1px solid #f3dde2; }
.theme-preview-sakura .sw-mood-on { background: #fbe4ea; border: 1.5px solid #e58ba3; }
.theme-preview-sakura .sw-btn { background: #e58ba3; }

/* --- プレビュー:新緑(初夏) --- */
.theme-preview-fresh .theme-swatch { background: #f1f7ed; }
.theme-preview-fresh .sw-card { background: #fff; border: 1px solid #dde9d4; }
.theme-preview-fresh .sw-mood { background: #f1f7ed; border: 1px solid #dde9d4; }
.theme-preview-fresh .sw-mood-on { background: #e3f0d9; border: 1.5px solid #5fa14e; }
.theme-preview-fresh .sw-btn { background: #5fa14e; }

/* --- プレビュー:紅葉(秋) --- */
.theme-preview-autumn .theme-swatch { background: #f7f0e8; }
.theme-preview-autumn .sw-card { background: #fffaf3; border: 1px solid #e8dac8; }
.theme-preview-autumn .sw-mood { background: #f5ece1; border: 1px solid #e8dac8; }
.theme-preview-autumn .sw-mood-on { background: #f3e2d2; border: 1.5px solid #c2702f; }
.theme-preview-autumn .sw-btn { background: #c2702f; }

/* --- プレビュー:雪(冬) --- */
.theme-preview-winter .theme-swatch { background: #eef3f8; }
.theme-preview-winter .sw-card { background: #fff; border: 1px solid #d8e3ec; }
.theme-preview-winter .sw-mood { background: #eef3f8; border: 1px solid #d8e3ec; }
.theme-preview-winter .sw-mood-on { background: #e0ecf6; border: 1.5px solid #5b9bd5; }
.theme-preview-winter .sw-btn { background: #5b9bd5; }

/* =========================================================
   トロフィー(実績) Phase 8
   ========================================================= */
/* 新規獲得時のお祝いポップ */
.trophy-pop {
    background: var(--accent-soft);
    color: var(--accent-hover);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    font-weight: 500;
    text-align: center;
    animation: trophy-pop-in 0.4s ease;
}
@keyframes trophy-pop-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.trophy-desc { color: var(--text-muted); font-size: 0.85rem; }

/* --- スタンプ帳グリッド --- */
/* 各セルを固定高さに揃え、説明文の長短で並びが崩れないようにする */
.stamp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem 0.5rem;
    margin-top: 1rem;
    justify-items: center;
}
/* 1つ1つのスタンプ(丸い枠 + 絵文字 + 名前)。
   行(row)の高さを固定して、丸の位置を全カラムで完全に揃える */
.stamp {
    background: transparent;
    border: none;
    padding: 0;
    display: grid;
    grid-template-rows: 4rem auto;   /* 上=丸の固定枠 / 下=文字。丸の位置が揃う */
    justify-items: center;
    align-items: start;
    gap: 0.4rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--text);
    margin-top: 0;
    width: 100%;
    transition: transform 0.1s;
}
.stamp:hover { background: transparent; }
.stamp:active { transform: scale(0.96); }

/* スタンプの丸い絵文字部分。全スタンプで同一サイズの正円 */
.stamp-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    background: var(--card);
    border: 2px dashed var(--border);
    transition: border-color 0.15s, background 0.15s;
}
/* 獲得済み:色つき・くっきり。スタンプを「押した」感を出す */
.stamp.is-earned .stamp-icon {
    background: var(--accent-soft);
    border: 2px solid var(--accent);
}
/* 選択中の丸を強調 */
.stamp.is-active .stamp-icon {
    box-shadow: 0 0 0 3px var(--accent-soft);
    border-color: var(--accent);
}
/* 未獲得:グレーアウト(まだ押されていないスタンプ) */
.stamp.is-locked .stamp-icon { filter: grayscale(1); opacity: 0.45; }
.stamp.is-locked .stamp-name { color: var(--text-faint); }

/* 文字部分は下段にまとめ、丸の整列に影響させない */
.stamp-name { font-size: 0.75rem; text-align: center; line-height: 1.25; }
.stamp-mini {
    display: block;
    font-size: 0.7rem;
    color: var(--accent-hover);
    font-weight: 500;
    margin-top: 0.1rem;
}

/* タップで開く詳細パネル */
.stamp-detail {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.stamp-detail strong { font-family: var(--font-head); font-size: 1.05rem; }

/* =========================================================
   カレンダー Phase 9
   ========================================================= */
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0 0.75rem;
}
.cal-nav strong { font-family: var(--font-head); font-size: 1.1rem; }
.cal-arrow {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
}
.cal-arrow:hover { background: var(--accent-soft); }

/* 7列グリッド(日〜土) */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cal-head { margin-bottom: 4px; }
.cal-wday {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0.3rem 0;
}
.cal-wday.is-sun { color: #c4564e; }
.cal-wday.is-sat { color: #4e7fc4; }

/* 各日付マス。正方形に近い見た目で揃える */
.cal-cell {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0.25rem 0;
    margin-top: 0;            /* button既定のmargin-topを打ち消し、マスを揃える */
    font-family: inherit;
    font-weight: normal;
    color: var(--text);
    overflow: hidden;
}
.cal-cell.is-empty { border: none; background: transparent; }
/* 記録の無い日(タップで選択解除)。押せるが見た目は控えめのまま */
.cal-cell.is-blank { cursor: pointer; }
.cal-cell.is-blank:hover { background: var(--surface); }
.cal-date { font-size: 0.72rem; color: var(--text-muted); }
/* 日記がある日:タップ可能。気分絵文字を大きめに */
.cal-cell.has-entry {
    cursor: pointer;
    border-color: var(--accent);
    background: var(--accent-soft);
    transition: transform 0.1s;
}
.cal-cell.has-entry:active { transform: scale(0.94); }
.cal-cell.is-active { box-shadow: 0 0 0 2px var(--accent); }
.cal-mood { font-size: 1.3rem; line-height: 1.1; margin-top: 0.1rem; }
.cal-dot { color: var(--accent); font-size: 0.8rem; margin-top: 0.2rem; }

/* タップした日の日記詳細 */
.cal-detail {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.cal-detail-head {
    font-family: var(--font-head);
    font-weight: 500;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
/* 「選択解除」ボタン:詳細を閉じてカレンダー+グラフだけに戻す。控えめな見た目 */
.cal-detail-close {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    margin: 0;
    font-size: 0.78rem;
    font-weight: normal;
}
.cal-detail-close:hover { background: var(--surface); color: var(--text); }
.cal-detail-entry { padding: 0.5rem 0; border-top: 1px solid var(--border); }
.cal-detail-entry:first-of-type { border-top: none; }
.cal-detail-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.cal-detail-meta time { color: var(--text-faint); font-size: 0.8rem; }
.cal-detail-actions { margin-top: 0.4rem; text-align: right; }

/* =========================================================
   気分の推移グラフ(カレンダー内)
   ========================================================= */

/* --- 期間の切り替えタブ(1日 / 週 / 月) --- */
.period-tabs {
    display: flex;
    gap: 0.4rem;
    margin: 0.5rem 0 1rem;
}
.period-tab {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}
.period-tab.is-active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

/* --- グラフを載せるカード --- */
.chart-card {
    padding: 1rem 1.1rem;
    margin: 0.5rem 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

/* 折れ線グラフ(SVGは幅100%・高さは縦横比で自動) */
.trend-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* タップした日の詳細パネル内に出すミニグラフ(少しコンパクトに) */
.day-chart { margin: 0 0 0.75rem; padding: 0.6rem 0.7rem; box-shadow: none; }