/* ============================================================
 * Leadly HiFi スタイル補正
 * ============================================================
 * 目的:
 *   1. hifi-styles.css の specificity 不整合による表示バグを修正
 *   2. hifi-styles.css に存在しない @media クエリを追加してモバイル対応
 *
 * 設計方針:
 *   - design-refs/leadly_iteration3_20260427/hifi-styles.css は設計参照用のため
 *     直接編集しない。本ファイルで上書き・拡張する。
 *   - インライン style="grid-template-columns:..." を持つテンプレートの
 *     ラッパーには、テンプレート側で .hf-hero-grid / .hf-rank-grid /
 *     .hf-related-grid 等のクラスを併記して、本ファイルで制御する。
 * ============================================================ */

/* ============================================================
 * Section 1: ボタン文字色の specificity 修正（既存）
 * ============================================================ */

.hf a.hfb-primary { color: #fff; }
.hf a.hfb-accent  { color: #fff; }
.hf a.hfb { color: var(--hf-ink); }
.hf a.hfb-primary,
.hf a.hfb-accent { color: #fff; }

/* ============================================================
 * Section 2: テンプレートのインライン grid を置き換える共通クラス
 * ============================================================ */

/* トップページ hero h1（hf-h1 より小さい variant） */
.hf-h1-top {
    font-family: var(--hf-serif);
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--hf-ink);
    margin: 0 0 12px;
}

/* 業種LP hero: 左カラム（見出し+lead+CTA） + 右カラム（LIVEプレビュー） */
.hf-hero-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 64px;
    align-items: flex-start;
}

/* 業種LP rank summary: S/A/B/C ランクカード4枚 */
.hf-rank-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* 業種LP / 業種ハブ: 関連業種カード3枚 */
.hf-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ============================================================
 * Section 2b: 注文フォームの選択ボックス（並び順 / オプション）
 * ============================================================ */
/* 高橋/野口テスト指摘: hifi-styles.css の .hf-addon-on はサーバー描画時の初期選択にしか
   付与されず、クリックで選択を変えても背景(グレー)が初期位置に固定されていた
   (sort/option には JS トグルが無いため)。実 checked 状態に追従させ、選択を明確化する
   （:has で JS 不要・初回描画から反映）。プラン選択は既存 JS が hf-addon-on を同期。 */
.hf-addon {
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.hf-addon:hover {
    border-color: var(--hf-line-2);
    background: var(--hf-bg-2);
}
.hf-addon:has(input:checked),
.hf-addon-on {
    border-color: var(--hf-ink);
    background: var(--hf-bg-2);
    box-shadow: inset 0 0 0 1px var(--hf-ink);
}

/* ============================================================
 * Section 2b: Auth 単カラム版（左ブランドパネル撤去・相良FB #19 2026-07-21）
 * hf-auth-shell--solo: aside を持たないログイン画面をフォーム中央寄せに。
 * ============================================================ */

.hf-auth-shell--solo {
    grid-template-columns: 1fr;
    min-height: 70vh;
}
.hf-auth-shell--solo .hf-auth-main {
    align-items: center;   /* フォームを水平中央に */
}

/* ============================================================
 * Section 2c: フッター 5カラムグリッド（相良FB No.34）
 * ============================================================
 * _chrome_footer.html は grid-template-columns をインラインで持っていたため、
 * **inline style が @media より specificity で勝ち**、Section 4 の 1カラム化
 * （.hf-grid-4）が一切効かなかった。SP でも5カラム固定になり、390px 幅では
 * 1カラム約70pxで「特定商取引法に基づく表記」等のリンクが1文字ずつ折り返して
 * 縦組みになり、画面からはみ出していた。インラインを廃止し、PC 定義をここ、
 * SP 定義を Section 4（モバイル）に置く（本ファイル冒頭の設計方針）。
 * トラック数はフッターの子要素数（5個）と一致させること。少ないと最後の列が
 * 2行目へ落ちる（Sol 監査 High-1 の退行パターン）。
 * ※ SP ルールを独立した2つ目の @media (max-width: 768px) に置くと、
 *   Section 4 と分裂して保守者が誤読する（code-reviewer 監査 Medium）。 */
.hf-footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 32px;
}

/* ============================================================
 * Section 3: タブレット（max-width: 1024px）
 * ============================================================ */

@media (max-width: 1024px) {
    /* セクション余白の縮小 */
    .hf-sect { padding: 72px 32px; }
    .hf-sect-tight { padding: 48px 32px; }
    .hf-hero { padding: 56px 32px 72px; }

    /* hero grid: 縦積みに切替（H1の縦書き崩れの根本対応） */
    .hf-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* hf-grid-2 (2カラム) も縦積み */
    .hf-grid-2 {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* rank summary: 4 → 2 カラム */
    .hf-rank-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* related-grid (3) は維持（タブレットなら3列でも収まる） */

    /* hero stats band: 4 → 2 カラム */
    .hf-stats-band {
        grid-template-columns: repeat(2, 1fr);
    }
    .hf-stats-band > div {
        border-right: 1px solid var(--hf-line);
    }
    .hf-stats-band > div:nth-child(2n) {
        border-right: 0;
    }

    /* score grid */
    .hf-score-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* H1/H2 縮小 */
    .hf-h1 { font-size: 48px; }
    .hf-h2 { font-size: 32px; }
    .hf-stat-big { font-size: 64px; }
    .hf-stat-med { font-size: 36px; }
}

/* ============================================================
 * Section 4: モバイル（max-width: 768px）
 * ============================================================ */

@media (max-width: 768px) {
    /* === Footer グリッド（相良FB No.34・Section 2c の SP 側）=== */
    /* .hf-grid-4 の 1カラム化でも同じ結果になるが、フッターは子要素5個で
       専用クラスを持つため、意図を明示するためここでも 1カラムを宣言する。 */
    .hf-footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* === Header === */
    .hf-header {
        padding: 12px 16px;
        gap: 12px;
        flex-wrap: wrap;
    }
    .hf-logo {
        font-size: 18px;
    }
    .hf-nav {
        order: 3;
        width: 100%;
        gap: 16px;
        font-size: 12px;
        padding-top: 8px;
        border-top: 1px solid var(--hf-line);
        justify-content: flex-start;
    }
    .hf-header-right {
        margin-left: auto;
        gap: 6px;
    }

    /* === Breadcrumb (インライン padding を上書き) === */
    .hf [style*="padding: 10px 40px"] {
        padding: 10px 16px !important;
    }

    /* === Auth (ログイン/新規登録) を単カラム化（高橋テスト・スマホ崩れ修正 2026-06-16）=== */
    /* hifi-styles.css の .hf-auth-shell は grid 2カラム固定でモバイル対応が無く、
       390px 等で左右が潰れて文字が縦1列になっていた。縦積み + フォーム優先 + 余白縮小。 */
    .hf-auth-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hf-auth-main {
        order: -1;                 /* スマホはログインフォームを先頭に表示 */
        padding: 32px 20px 28px;
    }
    .hf-auth-side {
        padding: 28px 20px 32px;
    }
    .hf-auth-side::before {
        background-size: 48px 48px;
    }
    .hf-auth-form {
        max-width: 100%;
    }

    /* === セクション余白 === */
    .hf-sect { padding: 48px 16px; }
    .hf-sect-tight { padding: 32px 16px; }
    .hf-hero { padding: 40px 16px 48px; }

    /* === Final CTA section の余白上書き（インライン padding 対策） === */
    .hf .hf-sect-dark[style*="padding"] {
        padding: 64px 20px !important;
    }

    /* === Footer (インライン padding 上書き) === */
    .hf footer[style*="padding: 40px"],
    .hf footer[style*="padding: 32px 40px"] {
        padding: 24px 16px !important;
    }
    /* Footer 内部の hfrow を縦積みに */
    .hf footer .hfrow {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    /* === タイポ === */
    .hf-h1 { font-size: 32px; line-height: 1.2; }
    .hf-h1-top { font-size: 28px; line-height: 1.25; }
    .hf-h2 { font-size: 24px; line-height: 1.25; }
    .hf-h3 { font-size: 18px; }
    .hf-lead { font-size: 14px; line-height: 1.7; }
    .hf-stat-big { font-size: 48px; }
    .hf-stat-med { font-size: 28px; }
    .hf-step-n { font-size: 40px; }

    /* Final CTA の H2 (インライン font-size: 52px 等を上書き) */
    .hf .hf-sect-dark .hf-h2[style*="font-size: 52px"],
    .hf .hf-sect-dark .hf-h2 {
        font-size: 26px !important;
    }

    /* === Buttons === */
    .hfb-lg { padding: 12px 18px; font-size: 13px; }

    /* === Hero grid 関連 === */
    .hf-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* hf-grid-2/3/4 すべて1カラム */
    .hf-grid-2,
    .hf-grid-3,
    .hf-grid-4 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* rank summary: 2 → 1 カラム */
    .hf-rank-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* related industries: 3 → 1 カラム */
    .hf-related-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* hero stats band: 2 → 1 カラム + 縦区切り線 */
    .hf-stats-band {
        grid-template-columns: 1fr;
        margin-top: 40px;
    }
    .hf-stats-band > div {
        border-right: 0;
        border-bottom: 1px solid var(--hf-line);
        padding: 20px 16px;
    }
    .hf-stats-band > div:last-child {
        border-bottom: 0;
    }

    /* === Funnel === */
    .hf-funnel-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* === Score grid === */
    .hf-score-grid {
        grid-template-columns: 1fr;
    }

    /* === Funnel/Pipe === */
    .hf-pipe {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* === Form input === */
    .hfin { font-size: 16px; /* iOS zoom 防止 */ }

    /* === Tables（横スクロール対応） === */
    .hf-tbl {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* === Industry hub: ハードコード grid を上書き === */
    .hf [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    .hf [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* hf-wrap の左右余白追加（タブレット以下で 16px） */
    .hf-wrap {
        max-width: 100%;
    }

    /* === Hero CTA の hfrow を縦積み（ボタンが横並びで切れる対策） === */
    .hf-hero .hfrow.hf-g12 {
        flex-direction: column;
        align-items: stretch;
    }
    .hf-hero .hfrow.hf-g12 > .hfb {
        justify-content: center;
    }

    /* === Hero info row（"✓ 登録不要..." 等）== */
    .hf-hero .hfrow.hf-g16 {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}

/* ============================================================
 * Section 5: 小型モバイル（max-width: 480px）
 * ============================================================ */

@media (max-width: 480px) {
    /* H1 さらに縮小 */
    .hf-h1 { font-size: 28px; }
    .hf-h1-top { font-size: 24px; }
    .hf-h2 { font-size: 22px; }

    /* Header logo を非表示にして space を確保するのは避け、
       ログイン/無料登録ボタンを縮小する */
    .hf-header-right .hfb {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* hero padding を更に縮小 */
    .hf-hero { padding: 32px 12px 40px; }
    .hf-sect { padding: 40px 12px; }
}

/* ============================================================
 * Section 6: chrome 統一 (Phase 1a) — disabled nav button / logout button
 * ============================================================
 * 設計v2 §3.1 / handoff Step 3 (chrome_unify_plan.md)
 * - <a href="#"> をモバイル誤タップ可能 (M-1) のため <button> に変更
 * - <button> を <a> 風に表示するためのスタイル
 * ============================================================ */

/* nav 内の disabled button を <a> 風に表示 (Phase 1b 公開予定の項目) */
.hf-nav button.hf-nav-disabled {
    background: transparent;
    border: none;
    font: inherit;
    color: inherit;
    cursor: not-allowed;
    opacity: 0.5;
    padding: 0;
    line-height: inherit;
    letter-spacing: inherit;
}

.hf-nav button.hf-nav-disabled:hover,
.hf-nav button.hf-nav-disabled:focus {
    opacity: 0.5;
    color: inherit;
}

/* ヘッダー右側のログアウトボタン (form 内 button) */
.hf-btn-logout {
    background: transparent;
    border: 1px solid var(--hf-line);
    cursor: pointer;
    font: inherit;
    color: var(--hf-ink);
    padding: 10px 16px;
    border-radius: 4px;
    letter-spacing: .04em;
}

.hf-btn-logout:hover {
    background: var(--hf-bg-2);
}

/* ============================================================
 * Section N: 検索リクエスト中のロード表示 (2026-05-19, Phase A2)
 * ------------------------------------------------------------
 * 該当: index.html search-form の hx-indicator="#search-loading"
 *       _search/main.html の <span id="search-loading" class="hf-loading">
 *
 * htmx 標準は opacity 制御だが、視認性のため display 制御に上書き。
 * ============================================================ */
.hf-loading {
    display: none;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    font-size: 11px;
    color: var(--hf-accent);
    letter-spacing: 0;
    text-transform: none;
    font-family: var(--hf-mono, monospace);
}

/* htmx は htmx-request クラスをトリガー要素 (form) に付与。
   indicator が form 内にあれば htmx-request 中のみ表示する。 */
.htmx-request .hf-loading,
.hf-loading.htmx-request {
    display: inline-flex;
}

.hf-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--hf-line);
    border-top-color: var(--hf-accent);
    border-radius: 50%;
    animation: hf-spin 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes hf-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
 * Section: 内訳グリッド 3列→2列（相良フィードバック #6, 2026-07-08）
 * ============================================================
 * 業種内訳グラフ削除により内訳ボックスは2つ(ランク内訳・提案内容)。
 * design-refs の .hfs-dist-grid は 3列定義で3列目が空くため、後読みの本ファイルで
 * 2列に上書きする(同 specificity・後勝ち)。 */
.hfs-dist-grid { grid-template-columns: 1fr 1fr; }