/* 🌙 エレガント・ダークモード（テラコッタ・アクセント） */

:root {
    /* 色のルールをダークモード仕様に大改造！ */
    --primary-color: #d06c50;      /* ボタンなどのテラコッタ（レンガ色） */
    --primary-hover: #b85b42;      /* ホバー時の少し濃い色 */
    --background-color: #1e1e1e;   /* 一番後ろの暗いグレー背景 */
    --card-background: #2d2d2d;    /* 入力フォームやカードの少し明るいグレー */
    --input-background: #252525;   /* 入力欄の背景（さらに少し暗く） */
    --text-color: #e8e8e8;         /* メインの文字色（真っ白ではなく目に優しい白） */
    --text-muted: #a0a0a0;         /* 日付などの少し薄い文字色 */
    --border-color: #444444;       /* 枠線の色 */
    --font-main: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

body {
    background-color: var(--background-color);
    font-family: var(--font-main);
    max-width: 800px;
    margin: 40px auto;
    padding: 0 30px;
    color: var(--text-color);
    line-height: 1.6;
}

h1 {
    font-weight: normal; /* モダンな細字に変更 */
    font-size: 2.2em;
    margin-bottom: 40px;
    color: var(--text-color);
    text-align: center;
    letter-spacing: 0.05em; /* 文字の間隔を少し開けて上品に */
}

/* フォームとカードの共通デザイン */
.form-container, .diary-card {
    background-color: var(--card-background);
    padding: 30px;
    border-radius: 16px; /* なめらかな丸み */
    box-shadow: 0 4px 20px rgba(0,0,0,0.3); /* ダークモード用の深い影 */
}

.form-container {
    margin-bottom: 50px;
}

.form-container h2 {
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 25px;
    color: var(--text-color);
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-size: 0.9em;
    margin-bottom: 8px;
    color: var(--text-muted);
}

/* 入力欄をダーク仕様に */
input[type="text"],
textarea {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--input-background); /* 暗い背景 */
    color: var(--text-color); /* 白い文字 */
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: var(--font-main);
    font-size: 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

input[type="text"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(208, 108, 80, 0.3); /* テラコッタ色の光 */
}

textarea {
    height: 150px;
    resize: vertical;
}

/* 送信ボタン（テラコッタ色） */
button {
    font-family: var(--font-main);
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit {
    background-color: var(--primary-color);
    color: white;
    padding: 12px 25px;
    width: 100%;
}

.btn-submit:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
}

.btn-submit:active {
    transform: translateY(0);
}

/* 日記カードのレイアウト */
.diaries-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.diary-date {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 0;
    margin-bottom: 10px;
}

.diary-title {
    font-weight: normal;
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--text-color);
}

.diary-body {
    font-size: 1.05em;
    color: #cccccc;
    margin-top: 0;
    margin-bottom: 25px;
    white-space: pre-wrap; /* 改行をそのまま反映する魔法 */
}

/* 削除ボタン（ダークモードに馴染む控えめなデザイン） */
.btn-delete {
    background-color: transparent; /* 背景を透明に */
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 6px 15px;
    font-size: 0.85em;
    float: right;
}

.btn-delete:hover {
    background-color: #4a2c2c; /* ホバー時だけほんのり赤く */
    color: #ff9999;
    border-color: #ff9999;
}

/* =========================================
   一覧画面（index.html）用のシンプルリストレイアウト
   ========================================= */

.diaries-list {
    display: flex;
    flex-direction: column;
    gap: 50px; /* 記事と記事の間隔を思い切って広く取る */
    margin-top: 40px;
}

.list-item {
    /* 背景色や影は無し！完全にフラットにします */
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}

.list-title {
    font-size: 1.6em;
    font-weight: 600;
    margin: 0 0 10px 0;
    letter-spacing: 0.03em;
}

.list-title a {
    color: var(--text-color); /* 普段は白い文字 */
    text-decoration: none;
    transition: color 0.2s ease; /* ふわっと色が変わるアニメーション */
}

.list-title a:hover {
    color: var(--primary-color); /* マウスを乗せたらテラコッタ色に */
}

.list-date {
    font-size: 0.9em;
    color: var(--text-muted); /* 薄いグレー */
    margin: 0 0 15px 0;
}

.list-excerpt {
    font-size: 1em;
    color: #b0b0b0; /* 少し暗めの白 */
    margin: 0;
    line-height: 1.7;

    /* 💡 長い文章を「2行」で切り取って最後を「...」にする魔法のCSS！ */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================
   記事詳細画面（post.html）用のシンプルリストレイアウト
   ========================================= */

.diary-post-details {
    /* 背景色、影、角丸は無し！ 완전히 フラットにします */
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    margin-top: 10px;
}

/* タイトルのスタイル（border-bottomは残す） */
.diary-post-details .diary-title {
    font-size: 2.2em;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 15px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color); /* 下線を残す */
}

/* 日付のスタイル */
.diary-post-details .diary-date {
    font-size: 0.9em;
    color: var(--text-muted);
    margin: 0 0 30px 0;
}

/* 画像のスタイル */
.diary-post-details .diary-image-container {
    margin: 30px 0;
    text-align: center;
}

.diary-post-details .diary-image-container img {
    max-width: 100%;
    max-height: 500px;
    border-radius: 10px;
}

/* 本文のスタイル */
.diary-post-details .diary-body {
    font-size: 1.1em;
    color: #b0b0b0; /* 少し暗めの白 */
    line-height: 1.8;
    margin: 0;
    white-space: pre-wrap; /* 改行を反映させる */
}

/* 削除ボタンのスタイル（フラット型） */
.post-delete-form {
    margin-top: 50px;
    text-align: right;
}

.btn-delete-flat {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 10px 0;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.btn-delete-flat:hover {
    color: var(--primary-color); /* ホバーでテラコッタ色に */
}

img {
  max-width: 100%;
  height: auto;
}