/* css/style.css */

/* 基本的なスタイルリセットや、Tailwind CSSでカバーしきれないカスタムスタイルを記述します */
body {
    margin: 0;
    line-height: 1.6;
    padding-top: 68px; /* 固定ヘッダーの高さ分（実際の高さに合わせて調整） */
}

.container {
    max-width: 1100px; /* コンテンツの最大幅を調整 */
}

/* スムーズスクロール (ページ内リンク用) */
html {
    scroll-behavior: smooth;
}

/* ハンバーガーメニュー用の追加スタイル (任意) */
/* 例えば、メニューが開いたときに背景を固定するなど */
/* .mobile-menu-open body {
    overflow: hidden;
} */

/* 必要に応じて、ここにカスタムCSSを追加してください */

/* --- ここからレスポンシブフォントサイズ調整 (モバイル向け) --- */

/* 例えば、画面幅が639px以下の場合に適用 (Tailwindのsmブレークポイント未満) */
@media (max-width: 639px) {
    body {
        font-size: 0.875rem; /* Tailwindの text-sm (通常14px) に相当 */
        /* この設定は、個別に文字サイズが指定されていない多くのテキストに影響します */
    }

    /* * HTML側で Tailwind CSS のクラス (例: text-3xl) で文字サイズが指定されている要素は、
     * CSSの詳細度や !important を使わないと上書きが難しい場合があります。
     * 以下は、h1要素 や .text-3xl クラスを持つ要素の文字サイズを上書きする例です。
     * !important を使う場合は、影響範囲をよくご確認ください。
     */

    h1, .text-3xl { /* ダッシュボードのメインタイトルなど */
        /*font-size: 1.5rem !important;  /* Tailwindの text-2xl (24px) 相当 */
        font-size: 1.25rem !important; /* Tailwindの text-xl (20px) 相当 */
        line-height: 2rem !important; /* text-2xl の line-height */
    }

    h2, .text-2xl { /* 各セクションのタイトルなど */
        font-size: 1.25rem !important; /* Tailwindの text-xl (20px) 相当 */
        line-height: 1.75rem !important; /* text-xl の line-height */
    }

    h3, .text-xl { /* カード内のタイトルなど */
        font-size: 1.125rem !important; /* Tailwindの text-lg (18px) 相当 */
        line-height: 1.75rem !important; /* text-lg の line-height */
    }
    

    /* フォーム内の主要な入力要素の文字サイズを16pxに設定 */
    form input[type="text"],
    form input[type="email"],
    form input[type="password"],
    form input[type="date"],
    form input[type="number"],
    form textarea,
    form select {
        font-size: 16px; /* iOS Safariでの自動ズームを防ぐため */
    }

    /* ダッシュボードのサマリーカード内の数値など、特に大きく感じる箇所があれば個別に対応 */
    /* 例: .dashboard-summary-value (もしこのようなクラスがあれば) */
    /* .dashboard-summary-value { font-size: 1.5rem !important; } */
    
    /* テーブル内の文字など (body の font-size が継承されることが多いですが、必要なら) */
    /* th, td { font-size: 0.75rem !important; /* text-xs (12px) 相当 */ } */

    /* モバイルメニュー内のリンク文字サイズ (ハンバーガーメニュー展開時) */
    /* 現在のモバイルメニューは text-base なので、もし小さくするなら */
    /* #mobile-menu a { font-size: 0.875rem !important; /* text-sm */ } */

    /* ボタン内の文字なども、必要に応じて調整 */
    /* button, .button { font-size: 0.875rem !important; } */
}

/* --- レスポンシブフォントサイズ調整ここまで --- */

/* --- トグルスイッチのスタイル --- */
.toggle-label {
    transition: background-color 0.2s ease-in-out;
}

.toggle-checkbox {
    transition: transform 0.2s ease-in-out;
}

.toggle-checkbox:checked {
    transform: translateX(1rem); /* 円が右に移動 */
    border-color: #3498db; /* Tailwindのprimaryカラー */
}

.toggle-checkbox:checked + .toggle-label {
    background-color: #3498db; /* Tailwindのprimaryカラー */
}

/* --- カレンダーの色分け --- */
.calendar-day .saturday, .calendar-header .saturday {
    color: #007bff; /* 青色 */
}
.calendar-day .sunday, .calendar-header .sunday {
    color: #dc3545; /* 赤色 */
}
.calendar-day .holiday {
    color: #dc3545; /* 赤色 */
}

/* --- ハンバーガーメニューのスクロール対応 --- */
@media (max-width: 767px) {
    #mobile-menu {
        max-height: calc(100vh - 68px); /* ヘッダーの高さを引いたビューポートの高さ */
        overflow-y: auto;
    }
}

/* --- 目標チャレンジウィジェットのモバイル表示調整 --- */
@media (max-width: 767px) {
    .goal-slide .grid > div {
        /* 各情報ブロックの高さを揃える */
        display: flex;
        flex-direction: column;
    }

    .goal-slide .grid > div > div {
        /* ブロック内のコンテンツもflexで高さを揃える */
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .goal-slide .grid > div > div > div {
        /* ラベルと数値のペア */
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 0.25rem 0;
    }

    .goal-slide .grid > div > div > div > span {
        /* 「目標まであと」などのラベル */
        flex-shrink: 0;
        margin-right: 0.5rem;
    }

    .goal-slide .grid > div > div > div > p {
        /* 数値 */
        text-align: right;
    }

    .goal-slide .text-lg {
        font-size: 1rem !important; /* 16px */
        line-height: 1.5rem !important;
    }
    
    .goal-slide .font-bold {
        font-weight: 600; /* semi-bold */
    }

    /* ヘッダーエリアの調整 */
    .goal-slide .text-3xl {
        font-size: 1.5rem !important; /* 24px */
        line-height: 2rem !important;
    }
    
    .goal-slide .text-lg.whitespace-nowrap { /* 達成率(%) */
        font-size: 1.125rem !important; /* 18px */
    }
}


/* --- Slide Animation --- */
.slide-container {
    position: relative;
    overflow: hidden;
    /* 水平スワイプを有効にしつつ、ページの垂直スクロールを許可する */
    touch-action: pan-y;
}

.slide-wrapper {
    display: flex;
    /* よりスムーズなアニメーションカーブ */
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-page {
    width: 50%;
    flex-shrink: 0;
    /* 必要に応じて、ページ内のコンテンツがはみ出さないように */
    /* overflow: hidden; */ 
}

/* --- Widget Feedback Animation --- */
.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
}
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}