/* ================================
   レイアウト全体
================================ */

/* 画面全体を背景画像でカバーするための基本設定 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* 全体の背景＆レイアウト */
body {
    font-family: system-ui, sans-serif;

    /* 背景はクラスごとに分けるのでここでは指定しない */
    background-color: #fafafa;  /* 読み込み失敗時の予備カラー */

    display: flex;
    flex-direction: column;
}

/* ★ A：インデックス＋全履歴用 */
body.bg-a {
    background-image: url("bg_A.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ★ B：羽菜用（記録・履歴） */
body.bg-b {
    background-image: url("bg_hana.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ★ C：六花用（記録・履歴） */
body.bg-c {
    background-image: url("bg_rikka.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* メイン：半透明の白い幕の上に表示 */
main {
    flex: 1;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.75);
    box-sizing: border-box;
}

/* メインコンテンツの横幅（スマホ〜タブレットで見やすい幅） */
main section {
    max-width: 540px;
    margin: 0 auto;
}

/* ================================
   ヘッダー
================================ */
header {
    background: #ff9800;
    color: #fff;
    padding: 0.75rem 1rem;
}

header h1 {
    margin: 0;
    font-size: 1.1rem;
}

nav {
    margin-top: 0.25rem;
}

nav a {
    color: #fff;
    margin-right: 0.75rem;
    text-decoration: none;
    font-size: 0.9rem;
}

/* ================================
   タイトル・テキスト
================================ */

h2 {
    margin-top: 0.8rem;
    margin-bottom: 1.4rem;
    font-size: 1.6rem;
    font-weight: 700;
}

.question-block p {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
    line-height: 1.4;
}

/* 補足テキスト */
.note {
    font-size: 0.85rem;
    color: #555;
}

/* ================================
   入力エリア
================================ */

/* 質問ブロックの余白 */
.question-block {
    margin: 1.2rem 0;
}

/* テキストエリアは横幅いっぱい＆少し丸く */
textarea {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.3rem;
    margin-bottom: 0.2rem;
    padding: 0.6rem;
    border-radius: 8px;
    font-size: 1rem;
}

/* ================================
   ボタン（共通＋色違い）
================================ */

/* 青ボタン・ピンクボタン共通のベーススタイル */
.btn,
.btn-pink {
    display: block;
    width: 100%;
    max-width: 460px;
    margin: 1.5rem auto 0.5rem auto;

    padding: 0.9rem 1rem;
    color: #fff;

    font-size: 1.2rem;
    text-align: center;
    text-decoration: none;

    border-radius: 10px;
    border: none;
    cursor: pointer;

    box-sizing: border-box;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* 青いメインボタン（保存・更新・羽菜メニューなど） */
.btn {
    background: #2196f3;
}

.btn:hover {
    background: #1e88e5;
}

/* ピンクボタン（六花メニュー用） */
.btn-pink {
    background: #ff8fab;  /* 明るいピンク */
}

.btn-pink:hover {
    background: #ff6f91;
}

/* 赤い削除ボタン */
.btn-delete {
    display: block;
    width: 100%;
    max-width: 460px;
    margin: 0.5rem auto 0;

    padding: 0.85rem 1rem;
    background: #e53935;
    color: #fff;

    font-size: 1.05rem;
    text-align: center;

    border-radius: 10px;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.btn-delete:hover {
    background: #c62828;
}

/* 小さめボタン（一覧の下など） */
.btn.small {
    max-width: 200px;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
}

/* ================================
   🎤 かわいい話すボタン
================================ */

.talk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #ff8fab; /* ピンク */
    color: white;
    font-size: 0.95rem;

    padding: 0.45rem 1.1rem;
    border-radius: 30px;

    border: none;
    cursor: pointer;

    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    margin-bottom: 0.4rem;
    margin-top: 0.2rem;

    transition: transform 0.1s ease, background 0.2s ease;
}

/* 押した時のアニメーション（プニッとへこむ感じ） */
.talk-btn:active {
    transform: scale(0.92);
}

/* ホバー（PC用） */
.talk-btn:hover {
    background: #ff6f91;
}

/* 🎤 アイコン部分（大きめ） */
.talk-btn .icon {
    font-size: 1.2rem;
    margin-right: 0.3rem;
}

/* ================================
   記録一覧カード
================================ */

.record-card {
    background: rgba(255, 255, 255, 0.9);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 6px;
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
}

/* ================================
   PC（画面が広いとき）の微調整
================================ */

@media (min-width: 768px) {
    main {
        max-width: 800px;
        margin: 1rem auto;
        border-radius: 8px;
    }

    .btn,
    .btn-pink,
    .btn-delete {
        max-width: 360px;
    }
}

/* ================================
   習いごとラジオボタン
================================ */

.category-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.category-group label {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    font-size: 0.95rem;
}

.category-group input[type="radio"] {
    margin-right: 0.3rem;
}

/* ================================
   記録一覧ページ用
================================ */

.narrow-section {
    max-width: 540px;
    margin: 0 auto;
}

/* カテゴリや名前のタグ */
.tag {
    background: #1976d2;
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

.tag.child {
    background: #e91e63;
}

/* ================================
   ホーム画面：タイル＆見出し
================================ */

/* タイルを並べるコンテナ（2列） */
.tile-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* 常に2列 */
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 0;
}

/* タイル共通スタイル */
.tile-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 100%;      /* ← 各セルの幅いっぱいに */
    height: 150px;
    border-radius: 20px;
    border: none;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    text-align: center;
    text-decoration: none;
    margin: 0;            /* ← grid任せにするので余白は0でOK */

    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
}


/* 羽菜タイル用（2枚の画像を使い分け） */
.btn-hana.img1 {
    background-image: url("/static/hana_1.png");
}

.btn-hana.img2 {
    background-image: url("/static/hana_2.png");
}

/* 六花タイル用（2枚の画像を使い分け） */
.btn-rikka.img1 {
    background-image: url("/static/rikka_1.png");
}

.btn-rikka.img2 {
    background-image: url("/static/rikka_2.png");
}

/* ホーム画面の区切り線 */
.welcome-hr {
    border: 0;
    border-top: 3px solid #ffb6c1;
    width: 60%;
    margin: 2rem auto;
}

/* リボン見出し（羽菜／六花） */
.ribbon-title {
    display: block;
    width: 80%;
    margin: 2rem auto 1rem;
    padding: 0.7rem 1rem;

    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: #555;               /* 優しいグレー */

    background: rgba(255, 255, 255, 0.6); /* ふんわり白背景 */
    border-radius: 20px;      /* かわいい丸み */
    backdrop-filter: blur(4px); /* 背景を少しぼかす（なじむ） */

    /* ボタンぽい影は消す */
    box-shadow: none;
    border: none;             /* ← 枠線なし！ */
}

/* 羽菜用（淡い青） */
.ribbon-title.hana {
    background: rgba(140, 170, 255, 0.25);  /* パステル青 */
}

/* 六花用（淡いピンク） */
.ribbon-title.rikka {
    background: rgba(255, 170, 210, 0.25);  /* パステルピンク */
}

.talk-btn.recording {
    background-color: #e53935;
    color: #fff;
}

.month-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.month-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #ffd54f;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}

.month-arrow:hover {
    background: #ffca28;
}

.ym-label {
    font-size: 1.1rem;
    font-weight: bold;
}