/* ============================================================
 * LEAP ORGANIC — 共通スタイル
 *
 * 14ページの静的HTML内 <style> ブロックの「和集合」。
 * 元HTMLからの抽出であり、新規に書き起こしたルールは1つも無い。
 *
 * 実測（docs/00_FACTS.md §2）:
 *   - 全ページ Tailwind CDN 使用。見た目のほぼ全てがユーティリティclass
 *   - 各ページの <style> は30〜52行のみ。ユニークなルールは全部で20個
 *   - md5比較で 06≡07 / 12≡13 / 09≡14 が完全一致
 *
 * ページ別CSS（pages/*.css）は作らない。
 * 1ファイルにすることで「ページCSSの読み込み忘れ」という事故が構造的に消える。
 *
 * ページ差分は body[data-page] でスコープする（HTMLのclassは1文字も変えない）。
 * data-page の値は inc/head.php が $current_page から出力する。
 * ============================================================ */


/* ------------------------------------------------------------
 * 1. ベース（全14ページ共通・完全一致）
 * ------------------------------------------------------------ */
body {
    color: #3D352E;
    background-color: #FFFFFF;
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ★ヘッダー継承バグ対策（docs/09_PHASES.md Phase 1-5）
 * body に当てた font-family / color がヘッダーに継承してナビがブレる問題への対応。
 * 元HTMLでも <header id="navbar"> はページ内の <style> の影響下にあったため、
 * 共通CSS化しても同じ字送りになるよう #navbar に明示指定する。
 * ここで指定している値は body と同一であり、見た目を変えるものではない。 */
#navbar {
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    color: #3D352E;
}


/* ------------------------------------------------------------
 * 2. 背景テクスチャ（全14ページ共通・完全一致）
 * ------------------------------------------------------------ */
.bg-grain {
    background-image: radial-gradient(#3d352e 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 0.03;
}


/* ------------------------------------------------------------
 * 3. スクロールバー（全14ページ共通・完全一致）
 * ------------------------------------------------------------ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #F7F5F0;
}
::-webkit-scrollbar-thumb {
    background: #C4BCB0;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #5E7D4A;
}


/* ------------------------------------------------------------
 * 4. カードのホバー効果
 *
 * ★ここだけ、元HTMLに「実質同じだが微妙に違う」3変種が存在した（実測）。
 *   見た目を変えないため、統合せずページ単位でそのまま再現する。
 *
 *   変種A : transition 0.3s  / translateY(-4px) / 0 12px 24px -6px rgba(...,0.08)
 *           → 01 TOP / 02 商品詳細 / 06 コンセプト / 07 調味料とは
 *   変種B : transition 0.25s / translateY(-2px) / 0 10px 20px -4px rgba(...,0.06)
 *           → 05 マイページ
 *   変種C : transition 0.25s / translateY(-2px) / 0 8px 16px -4px rgba(...,0.06)
 *           → 08 FAQ / 09 ガイド / 10 お問い合わせ / 14 会社概要（= 既定値とする）
 *
 *   03 カート / 04 ログイン / 11 規約 / 12 プライバシー / 13 特商法 は
 *   .card-hover-effect を使っていないため影響しない。
 * ------------------------------------------------------------ */

/* 既定 = 変種C */
.card-hover-effect {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover-effect:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -4px rgba(61, 53, 46, 0.06);
}

/* 変種A：TOP / 商品詳細 / コンセプト / 調味料とは */
body[data-page="home"] .card-hover-effect,
body[data-page="products"] .card-hover-effect,
body[data-page="concept"] .card-hover-effect,
body[data-page="about-seasonings"] .card-hover-effect {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
body[data-page="home"] .card-hover-effect:hover,
body[data-page="products"] .card-hover-effect:hover,
body[data-page="concept"] .card-hover-effect:hover,
body[data-page="about-seasonings"] .card-hover-effect:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -6px rgba(61, 53, 46, 0.08);
}

/* 変種B：マイページ */
body[data-page="mypage"] .card-hover-effect:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -4px rgba(61, 53, 46, 0.06);
}


/* ------------------------------------------------------------
 * 5. フォーカスリング
 *
 * 元HTMLでこのルールを持つのは 04 ログイン / 05 マイページ / 10 お問い合わせ のみ。
 * 03 カートには無い（＝カートは Tailwind の focus: ユーティリティのみ）。
 * 全ページに当てるとカートの見た目が変わるため、ページスコープにする。
 *
 *   04 ログイン         : input:focus, select:focus
 *   05 / 10             : input:focus, select:focus, textarea:focus
 * ------------------------------------------------------------ */
body[data-page="login"] input:focus,
body[data-page="login"] select:focus,
body[data-page="register"] input:focus,
body[data-page="register"] select:focus,
body[data-page="password"] input:focus,
body[data-page="password"] select:focus,
body[data-page="mypage"] input:focus,
body[data-page="mypage"] select:focus,
body[data-page="mypage"] textarea:focus,
body[data-page="contact"] input:focus,
body[data-page="contact"] select:focus,
body[data-page="contact"] textarea:focus {
    outline: none;
    border-color: #5E7D4A;
    box-shadow: 0 0 0 2px rgba(94, 125, 74, 0.15);
}


/* ------------------------------------------------------------
 * 6. 数値入力のスピナー非表示（元は 03 カートのみ）
 *    商品詳細の数量入力にも同じ見た目が必要なため全体に適用する。
 *    （スピナーを消す方向の変更であり、他ページに視覚的な影響は無い）
 * ------------------------------------------------------------ */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}


/* ------------------------------------------------------------
 * 7. 購入ステッパー（元は 03 カートのみ）
 *    /cart/ /checkout/ /checkout/confirm/ /checkout/complete/ で共通使用する
 * ------------------------------------------------------------ */
.step-active {
    color: #5E7D4A;
    font-weight: 700;
    border-bottom: 2px solid #5E7D4A;
}
.step-completed {
    color: #3D352E;
}
.step-inactive {
    color: #9CA3AF;
}


/* ------------------------------------------------------------
 * 8. マイページ サイドナビのアクティブ状態（元は 05 マイページのみ）
 * ------------------------------------------------------------ */
.nav-link-active {
    background-color: #5E7D4A;
    color: #FFFFFF !important;
    font-weight: 600;
}


/* ------------------------------------------------------------
 * 9. アコーディオン（08 よくある質問 / 07 調味料とは / 商品詳細 SECTION 9）
 *    開閉JSは assets/js/page/faq.js。未使用ページではセレクタが0件になるだけ。
 * ------------------------------------------------------------ */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
}
.accordion-content.open {
    max-height: 1000px;
    transition: max-height 0.5s ease-in-out;
}