/* ===============================================
   ポイっと! - Redesign Layer
   既存 style.css を上書きする後乗せ層。poitto.css がさらにこれを上塗りする。
   外したい時は base.html の link 1行を消すだけ。
   ===============================================
   コンセプト:
   - Linear的な整理された呼吸感（サイドバー + 高密度リスト）
   - ポイ活アプリ的なワクワク感（数字の躍動・お得色アクセント）
   - 配色: 白 + 墨黒 + 蛍光ピンク (#ff2e63) + 控えめゴールド
   =============================================== */

:root {
    /* ---- Color: Ink (墨黒系) ---- */
    --c-ink:        #0a0a0a;     /* メイン墨黒 */
    --c-ink-2:      #2a2a2a;
    --c-ink-3:      #555555;
    --c-ink-4:      #888888;

    /* ---- Color: Surface ---- */
    --c-bg:         #ffffff;     /* ページ背景 純白 */
    --c-surface:    #ffffff;
    --c-surface-2:  #fafafa;
    --c-line:       #0a0a0a;     /* 罫線は黒 (旧グレー線は廃止) */
    --c-line-soft:  #cccccc;     /* 副次的な区切り用 */

    /* ---- Color: Brand Accent ---- */
    --c-hot:        #ff2e63;     /* 蛍光ピンク = ブランドアクセント・お得・主役 */
    --c-hot-soft:   #fff0f5;     /* 極淡ピンク (タグページヒーロー等) */
    --c-hot-ink:    #cc1a50;     /* hover/active */
    --c-yellow-soft:#fffacc;     /* 「手軽」バッジ用 */
    --c-up:         #0a8043;     /* 上昇・好調 */
    --c-up-soft:    #e8f7ed;
    --c-down:       #555555;     /* 下落: グレー扱い (赤は希少性維持) */
    --c-info:       #1e40af;
    --c-info-soft:  #eff6ff;

    /* 既存スタイル互換のための alias (旧パレット互換) */
    --c-brand:      #0a0a0a;
    --c-brand-dark: #000000;
    --c-brand-light:#2a2a2a;
    --c-brand-bg:   #fafafa;
    --c-accent:     #ff2e63;
    --c-accent-light:#fff0f5;
    --c-text:       #0a0a0a;
    --c-text-2:     #2a2a2a;
    --c-muted:      #888888;
    --c-bg-page:    #ffffff;
    --c-bg-panel:   #ffffff;
    --c-border:     #0a0a0a;
    --c-border-light:#cccccc;
    /* 過去最高のみ赤系、それ以外のゴールドは廃止 (蛍光ピンクに一本化) */
    --c-gold:       #ff2e63;
    --c-gold-soft:  #fff0f5;
    --c-gold-bg:    linear-gradient(135deg, #fff0f5 0%, #ffd6e0 50%, #ff2e63 100%);

    /* ---- Type ---- */
    --font-display:'Helvetica Neue', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    --font-body:   'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
    --font-mono:   'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
    /* 旧互換 */
    --font:        var(--font-body);
    --font-num:    var(--font-display);

    /* ---- Radii (極小・鋭角) ---- */
    --r-sm: 0;
    --r-md: 4px;
    --r-lg: 4px;

    /* ---- Shadow (新ブランドではほぼ使わない) ---- */
    --sh-1: none;
    --sh-2: none;
    --sh-hot: none;

    /* ---- Layout ---- */
    --sidebar-w: 240px;
    --gap-main:  28px;
}

html { font-size: 15.5px; }
body {
    background: var(--c-bg);
    color: var(--c-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "palt" 1;
}

/* container 拡張 */
.container { max-width: 1240px; padding: 0 20px; }

/* ===============================================
   Header（モノクロ化 + ロゴ赤強調）
   =============================================== */
.header {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
}
.header-inner { height: 56px; }
.logo {
    color: var(--c-ink);
    letter-spacing: -0.02em;
}
.logo-mark rect { fill: var(--c-ink) !important; }
.logo-mark path { stroke: var(--c-hot) !important; }
.logo-text { font-weight: 800; }
.header-nav-link {
    color: var(--c-ink-2);
    font-weight: 600;
    transition: color 0.15s;
}
.header-nav-link:hover { color: var(--c-hot); }

/* ===============================================
   2カラムレイアウト
   =============================================== */
.layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    gap: var(--gap-main);
    align-items: start;
}
@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; gap: 16px; }
    .sidebar { order: 2; }
}

.main-col { min-width: 0; }  /* grid内 overflow 防止 */

/* ===============================================
   Sidebar
   =============================================== */
.sidebar {
    position: sticky;
    top: 72px;
    align-self: start;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    padding: 4px;
    margin: 0 -4px;
}
@media (max-width: 900px) {
    .sidebar { position: static; max-height: none; overflow: visible; }
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 2px; }

.side-block { margin-bottom: 22px; }
.side-block:last-child { margin-bottom: 0; }

.side-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--c-ink-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 8px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.side-label svg { width: 12px; height: 12px; }

.side-list { list-style: none; padding: 0; margin: 0; }
.side-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    color: var(--c-ink-2);
    font-size: 0.86rem;
    line-height: 1.3;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
}
.side-item:hover {
    background: var(--c-surface);
    color: var(--c-ink);
}
.side-item.is-active {
    background: var(--c-ink);
    color: var(--c-surface);
    font-weight: 600;
}
.side-item.is-active .side-count { color: rgba(255,255,255,0.65); }
.side-item .side-count {
    font-family: var(--font-num);
    font-size: 0.72rem;
    color: var(--c-ink-4);
    font-variant-numeric: tabular-nums;
}
.side-item--need {
    display: flex;
    align-items: center;
    gap: 8px;
}
.side-item--need .need-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-hot);
    flex-shrink: 0;
    opacity: 0.85;
}

.side-more {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 6px 0 0 10px;
    font-size: 0.74rem;
    color: var(--c-ink-3);
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px 0;
}
.side-more:hover { color: var(--c-hot); }

/* ===============================================
   Main 共通
   =============================================== */
.main { padding: 16px 0 64px; }

/* breadcrumb ・ パネル系: 既存を踏襲しつつ余白詰める */
.panel {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    box-shadow: none;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.section-heading {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--c-ink);
    letter-spacing: -0.01em;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-heading-icon { color: var(--c-ink-3); }
.section-heading-count {
    font-family: var(--font-num);
    font-size: 0.72rem;
    color: var(--c-ink-3);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.section-heading-more {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--c-hot);
    font-weight: 600;
}
.section-heading-more:hover { text-decoration: underline; }

/* ===============================================
   検索ボックス（既存のposition:absoluteなicon構造を維持しつつ色だけ刷新）
   =============================================== */
.search-section { margin-bottom: 18px; }
.search-box {
    position: relative;
}
.search-input {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 44px;
    font-size: 0.95rem;
    border: 1.5px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-surface);
    color: var(--c-ink);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input:focus {
    border-color: var(--c-ink);
    box-shadow: 0 0 0 3px rgba(24,24,27,0.06);
}
.search-input::placeholder { color: var(--c-ink-4); }
.search-icon {
    position: absolute;
    left: 14px;
    top: 24px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--c-ink-3);
    pointer-events: none;
}
.search-meta {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--c-ink-3);
    padding-left: 4px;
    font-variant-numeric: tabular-nums;
}

/* ===============================================
   Daily Pick - 主役のワクワク枠
   =============================================== */
.pick-section.panel {
    padding: 0;
    border: none;
    background: transparent;
    margin-bottom: 24px;
}
.pick-section .section-heading {
    padding: 0 4px;
    margin-bottom: 12px;
}
.pick-section .section-heading-icon { color: var(--c-gold); }

.pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.pick-card {
    position: relative;
    display: block;
    padding: 18px 20px 16px;
    border-radius: var(--r-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pick-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-gold-bg);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}
.pick-card > * { position: relative; z-index: 1; }
.pick-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(180,83,9,0.18);
    border-color: var(--c-gold);
}
.pick-card:hover::before { opacity: 0.5; }

/* hot/gem/surge ごとに彩色を変えて識別性 */
.pick-card--hot { background: linear-gradient(135deg, var(--c-hot-soft) 0%, #ffffff 80%); border-color: var(--c-hot); }
.pick-card--hot::before { background: linear-gradient(135deg, #fda4af 0%, #f43f5e 100%); }
.pick-card--hot:hover { box-shadow: 0 8px 24px rgba(225,29,72,0.22); border-color: var(--c-hot); }
.pick-card--gem { background: linear-gradient(135deg, #fefce8 0%, #ffffff 80%); border-color: #fde68a; }
.pick-card--surge { background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 80%); border-color: #a7f3d0; }
.pick-card--surge::before { background: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%); }
.pick-card--surge:hover { box-shadow: 0 8px 24px rgba(16,185,129,0.22); border-color: #10b981; }

.pick-card-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--c-gold);
    letter-spacing: 0.04em;
    background: rgba(255,255,255,0.6);
    padding: 3px 8px;
    border-radius: var(--r-full, 999px);
    margin-bottom: 12px;
}
.pick-card--hot .pick-card-label { color: var(--c-hot); }
.pick-card--gem .pick-card-label { color: var(--c-gold); }
.pick-card--surge .pick-card-label { color: var(--c-up); }

.pick-card-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.4;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.pick-card-price {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--c-hot);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.pick-card--gem .pick-card-price { color: var(--c-gold); }
.pick-card--surge .pick-card-price { color: var(--c-up); }
.pick-card-price-unit {
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 2px;
    opacity: 0.7;
}
.pick-card-meta {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    font-size: 0.74rem;
    color: var(--c-ink-3);
}
.pick-card-cat {
    background: rgba(0,0,0,0.04);
    padding: 1px 6px;
    border-radius: var(--r-sm);
}

/* ===============================================
   リスト型カード（feed内 .card を上書き）
   =============================================== */
.feed {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
}
.feed .card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-line-soft);
    border-radius: 0;
    background: var(--c-surface);
    transition: background 0.12s, padding-left 0.18s;
    position: relative;
    box-shadow: none;
}
.feed .card:last-child { border-bottom: none; }
.feed .card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--c-hot);
    opacity: 0;
    transition: opacity 0.18s;
}
.feed .card:hover {
    background: var(--c-hot-soft);
    padding-left: 22px;
}
.feed .card:hover::before { opacity: 1; }
.feed .card:hover .card-name { color: var(--c-hot-ink); }

.card-rank {
    width: 28px; height: 28px;
    flex-shrink: 0;
    background: var(--c-ink);
    color: var(--c-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-num);
    font-size: 0.78rem;
    font-weight: 700;
}
.feed .card:nth-child(1) .card-rank { background: linear-gradient(135deg, #fbbf24, #b45309); }
.feed .card:nth-child(2) .card-rank { background: linear-gradient(135deg, #d4d4d8, #71717a); }
.feed .card:nth-child(3) .card-rank { background: linear-gradient(135deg, #d97706, #92400e); }

.card-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}
.card-left { min-width: 0; flex: 1; }
.card-name {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.4;
    margin-bottom: 4px;
    transition: color 0.12s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 0.72rem;
    color: var(--c-ink-3);
}
.card-site {
    color: var(--c-ink-3);
    font-size: 0.72rem;
    font-weight: 500;
}
.card-conditions {
    font-size: 0.74rem;
    color: var(--c-ink-3);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card-price {
    flex-shrink: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.card-price-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--c-hot);
    letter-spacing: -0.02em;
    line-height: 1;
}
.card-price-unit {
    font-size: 0.78rem;
    color: var(--c-ink-3);
    margin-left: 1px;
    font-weight: 600;
}
.card-arrow {
    width: 14px; height: 14px;
    color: var(--c-ink-4);
    flex-shrink: 0;
    transition: color 0.12s, transform 0.18s;
}
.feed .card:hover .card-arrow {
    color: var(--c-hot);
    transform: translateX(2px);
}

/* バッジ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.badge--up    { background: var(--c-up-soft); color: var(--c-up); }
.badge--down  { background: #fef2f2; color: var(--c-down); }
.badge--peak  { background: var(--c-gold-soft); color: var(--c-gold); animation: pulse-soft 2s ease-in-out infinite; }
.badge--new   { background: var(--c-info-soft); color: var(--c-info); }
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===============================================
   注目の高額案件（hot grid → リスト寄りに）
   =============================================== */
.hot-section.panel { padding: 18px 20px 14px; }
.hot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.hot-card {
    display: block;
    padding: 14px;
    border-radius: var(--r-md);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.hot-card:hover {
    transform: translateY(-1px);
    border-color: var(--c-hot);
    box-shadow: var(--sh-hot);
}
.hot-card-header {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
    min-height: 18px;
}
.hot-card-cat {
    font-size: 0.66rem;
    color: var(--c-ink-3);
    background: var(--c-line-soft);
    padding: 1px 6px;
    border-radius: 3px;
}
.hot-card-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}
.hot-card-price {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--c-hot);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.hot-card-price-unit { font-size: 0.78rem; opacity: 0.7; margin-left: 1px; }
.hot-card-site {
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--c-ink-3);
}

/* ===============================================
   ニーズカード（既存 need-cards を引き締め）
   =============================================== */
.needs-section.panel { padding: 18px 20px; }
/* needs-hero は2カラム内では全幅突き抜けと緑背景が悪さするので打ち消す */
.needs-hero {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 18px 20px !important;
    background: var(--c-surface) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--r-md) !important;
    margin-top: 0;
    margin-bottom: 16px;
}
.need-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.need-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--r-md);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    transition: all 0.16s;
}
.need-card:hover {
    border-color: var(--c-hot);
    background: var(--c-hot-soft);
    transform: translateY(-1px);
}
.need-card-icon {
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-surface-2);
    color: var(--c-hot);
    border-radius: var(--r-sm);
    flex-shrink: 0;
    transition: background 0.16s, color 0.16s;
}
.need-card:hover .need-card-icon { background: var(--c-hot); color: var(--c-surface); }
.need-card-icon svg { width: 18px; height: 18px; }
.need-card-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.need-card-name {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--c-ink);
}
.need-card-copy {
    font-size: 0.7rem;
    color: var(--c-ink-3);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.needs-chips-label {
    font-size: 0.74rem;
    color: var(--c-ink-3);
    margin: 14px 0 6px;
    padding-left: 4px;
}
.needs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.need-chip {
    font-size: 0.76rem;
    padding: 4px 10px;
    border-radius: var(--r-full, 999px);
    background: var(--c-surface-2);
    color: var(--c-ink-2);
    border: 1px solid var(--c-line);
    transition: all 0.12s;
}
.need-chip:hover {
    background: var(--c-ink);
    color: var(--c-surface);
    border-color: var(--c-ink);
}

/* category-panel: デスクトップは折り返し可、モバイル(<768px)で横スクロール継続 */
.category-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
@media (max-width: 768px) {
    .category-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}
.cat-tag {
    flex-shrink: 0;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: var(--r-full, 999px);
    background: var(--c-surface);
    color: var(--c-ink-2);
    border: 1px solid var(--c-line);
    transition: all 0.12s;
    white-space: nowrap;
}
.cat-tag:hover {
    background: var(--c-surface-2);
    color: var(--c-ink);
    border-color: var(--c-ink-4);
}
.cat-tag.is-active {
    background: var(--c-ink);
    color: var(--c-surface);
    border-color: var(--c-ink);
    font-weight: 600;
}

/* ===============================================
   Footer 微調整（モノクロ化）
   =============================================== */
.footer {
    background: var(--c-surface);
    border-top: 1px solid var(--c-line);
    margin-top: 40px;
    padding: 32px 0 20px;
}
.footer-col-title {
    color: var(--c-ink);
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}
.footer-col a {
    color: var(--c-ink-3);
    font-size: 0.8rem;
    line-height: 1.9;
    transition: color 0.12s;
}
.footer-col a:hover { color: var(--c-hot); }
.footer-bottom {
    border-top: 1px solid var(--c-line);
    margin-top: 24px;
    padding-top: 16px;
    color: var(--c-ink-3);
    font-size: 0.75rem;
}
.footer-sub { color: var(--c-ink-4); font-size: 0.7rem; margin-top: 4px; }

/* ===============================================
   prefer-reduced-motion 配慮
   =============================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===================================================================
   MERIHARI v2 — 階層と視線誘導の再構築
   方針: スケール対比 / 色の階層(赤は"勝者"だけ) / 余白ゾーニング。
   各ページに主役(focal point)を1つ作り、視線を導く。
   =================================================================== */

/* ---- 1. セクション見出し: ゾーンの始まりを明示する ----
   redesign初版が見出しを 0.92rem/700・装飾なしに潰していたのを是正。
   アイコンを色付きチップに収め、見出しを"区切り"として強く読ませる。 */
.section-heading {
    font-size: 1.16rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--c-ink);
    gap: 10px;
    margin-bottom: 16px;
    align-items: center;
}
.section-heading--sm {
    font-size: 1.01rem;
    font-weight: 800;
    margin-bottom: 13px;
}
.section-heading--lg { font-size: 1.42rem; margin-bottom: 18px; }
.section-heading-icon {
    width: 30px; height: 30px;
    padding: 6px;
    box-sizing: border-box;
    background: var(--c-surface-2);
    color: var(--c-ink-2);
    border-radius: 8px;
    flex-shrink: 0;
}
.section-heading--sm .section-heading-icon { width: 27px; height: 27px; padding: 6px; }
/* "ワクワク系"ゾーンはアクセント色チップで視線を引く */
.pick-section .section-heading-icon { background: var(--c-gold-soft); color: var(--c-gold); }
.hot-section .section-heading-icon  { background: var(--c-hot-soft);  color: var(--c-hot); }
.section-heading-count {
    font-family: var(--font-num);
    font-size: 0.72rem;
    color: var(--c-ink-3);
    font-weight: 600;
    background: var(--c-surface-2);
    padding: 3px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.section-heading-more {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--c-hot);
    font-weight: 700;
}

/* ---- 2. トップのヒーロー見出し: ページの第一印象を作る ---- */
.top-headline {
    margin-bottom: 22px;
    padding: 6px 2px 0;
}
.top-headline-main {
    font-size: 2rem;
    font-weight: 900;
    color: var(--c-ink);
    letter-spacing: -0.035em;
    line-height: 1.18;
}
.top-headline-sub {
    font-size: 0.92rem;
    color: var(--c-ink-2);
    margin-top: 10px;
    line-height: 1.65;
}
.top-headline-sub strong {
    color: var(--c-hot);
    font-weight: 800;
    font-size: 1.12em;
    letter-spacing: -0.02em;
}
@media (max-width: 640px) {
    .top-headline-main { font-size: 1.6rem; }
}

/* ---- 3. 今日のピック: トップの主役。左=情報 / 右=大きな数字 で視線を作る ---- */
.pick-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px;
}
.pick-card {
    display: flex;
    align-items: stretch;
    gap: 18px;
    padding: 20px 22px;
    box-shadow: var(--sh-2);
}
.pick-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pick-card-label {
    font-size: 0.72rem;
    padding: 4px 10px;
    align-self: flex-start;
    margin-bottom: 10px;
}
.pick-card-name {
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 6px;
    min-height: 0;
    -webkit-line-clamp: 2;
    letter-spacing: -0.01em;
}
.pick-card-context {
    font-size: 0.8rem;
    color: var(--c-ink-2);
    line-height: 1.5;
    margin: 0 0 10px;
}
.pick-card-meta {
    margin-top: auto;
    flex-wrap: wrap;
}
/* 右の数字ブロック: ページ内で最も大きい数字。視線の終着点 */
.pick-card-figure {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    padding-left: 16px;
    border-left: 1px dashed var(--c-line);
}
.pick-card-price {
    font-size: 2.7rem;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
    white-space: nowrap;
}
.pick-card-price-unit { font-size: 1rem; }
.pick-card-go {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--c-ink-3);
}
.pick-card:hover .pick-card-go { color: var(--c-hot); }
.pick-card--gem:hover .pick-card-go { color: var(--c-gold); }
@media (max-width: 480px) {
    .pick-card { gap: 12px; padding: 18px; }
    .pick-card-figure { padding-left: 12px; }
    .pick-card-price { font-size: 2.1rem; }
}

/* ---- 4. リスト価格の色階層: 赤は"勝者"だけに限定 ----
   通常行の価格は墨黒(強いが中立)。これで赤が"視線の矢印"になる。
   ランキング性のあるリストには .feed--ranked を付け、1位だけ赤+淡い地色。 */
.card-price-value { color: var(--c-ink); }
.feed--ranked .card:nth-child(1) {
    background: var(--c-hot-soft);
}
.feed--ranked .card:nth-child(1) .card-price-value { color: var(--c-hot); }
.feed--ranked .card:nth-child(1) .card-name { font-weight: 700; }
.feed--ranked .card:nth-child(1)::before { opacity: 1; }

/* ニーズ/ランキングのリストにランク番号(なければ追加)を出す。
   トップ3はメダル(金銀銅)、4位以降は静かな番号にして上位を際立たせる。 */
.card-rank {
    width: 26px; height: 26px;
    font-size: 0.74rem;
}
.feed--ranked .card { gap: 13px; }
.feed--ranked .card:nth-child(n+4) .card-rank {
    background: transparent;
    color: var(--c-ink-4);
    font-weight: 700;
}

/* ---- 順位による"大小"のメリハリ ----
   4位以降が同寸で続く"壁"が残存ののっぺり要因。価格サイズと行高を
   1位 > 2-3位(表彰台) > 4位以降 で段階化し、リスト全体に視線の傾斜をつくる。
   色は薄めずサイズ/余白だけで差をつけ、肝心の数値の可読性は保つ。
   (基準 .card-price-value = 1.2rem) */
.feed--ranked .card:nth-child(1) { padding-top: 20px; padding-bottom: 20px; }
.feed--ranked .card:nth-child(1) .card-price-value { font-size: 1.74rem; }
.feed--ranked .card:nth-child(2),
.feed--ranked .card:nth-child(3) { padding-top: 16px; padding-bottom: 16px; }
.feed--ranked .card:nth-child(2) .card-price-value,
.feed--ranked .card:nth-child(3) .card-price-value { font-size: 1.4rem; }
.feed--ranked .card:nth-child(2) .card-name,
.feed--ranked .card:nth-child(3) .card-name { font-weight: 700; }
/* 4位以降: 数値は墨黒のまま一段小さく、行を詰めて"静かな一覧"に沈める */
.feed--ranked .card:nth-child(n+4) { padding-top: 10px; padding-bottom: 10px; }
.feed--ranked .card:nth-child(n+4) .card-price-value { font-size: 1.06rem; }

/* ---- 今日の変動: 数値の色で"良い知らせ"を立てる ----
   還元アップ/過去最高 = ユーザーに嬉しい = 赤(お得シグナル)で浮かせ、
   ダウンは沈める。同じ墨黒で並ぶ"のっぺり"を、意味に紐づく色で解消する。 */
.feed--changes .card:has(.badge--up) .card-price-value,
.feed--changes .card:has(.badge--peak) .card-price-value { color: var(--c-hot); }
.feed--changes .card:has(.badge--down) .card-price-value { color: var(--c-ink-3); }

/* ---- 5. 手軽案件カード: 価格は墨黒、ホバーで赤に ---- */
.hot-card-price { color: var(--c-ink); }
.hot-card:hover .hot-card-price { color: var(--c-hot); }
.hot-card-price-unit { color: var(--c-ink-3); }

/* ---- 6. やりたいことカード(moat): 還元の"うまみ"を見せて誘う ---- */
.need-card { padding: 15px 16px; gap: 13px; }
.need-card-icon { width: 40px; height: 40px; }
.need-card-icon svg { width: 20px; height: 20px; }
.need-card-name { font-size: 0.92rem; font-weight: 800; }
.need-card-reward {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--c-hot);
    letter-spacing: -0.01em;
}
.need-card-copy { font-size: 0.72rem; }

/* ---- 7. ニーズページ ヒーロー: 左=説明 / 右=最高還元の大きな数字 ---- */
.tag-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    background: linear-gradient(135deg, #fff 0%, var(--c-hot-soft) 100%);
    border: 1px solid #fbd5dc;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    margin-bottom: 14px;
}
.tag-hero-icon {
    width: 52px; height: 52px;
    background: var(--c-surface);
    border: 1px solid #fbd5dc;
    border-radius: 14px;
    color: var(--c-hot);
}
.tag-hero-icon svg { width: 26px; height: 26px; }
.tag-hero-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--c-ink);
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0 0 3px;
}
.tag-hero-copy { font-size: 0.86rem; color: var(--c-ink-2); line-height: 1.5; margin: 0; }
.tag-hero-stats {
    display: flex;
    gap: 14px;
    margin-top: 9px;
    font-size: 0.8rem;
    color: var(--c-ink-3);
}
.tag-hero-stats b {
    font-family: var(--font-num);
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--c-ink);
    margin-right: 2px;
}
.tag-hero-figure {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    padding-left: 18px;
    border-left: 1px dashed #f3c2cc;
}
.tag-hero-figure-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--c-hot-ink);
    margin-bottom: 2px;
}
.tag-hero-figure-value {
    font-size: 2.1rem;
    font-weight: 900;
    color: var(--c-hot);
    letter-spacing: -0.04em;
    line-height: 1;
    white-space: nowrap;
}
@media (max-width: 560px) {
    .tag-hero { padding: 18px; gap: 13px; flex-wrap: wrap; }
    .tag-hero-title { font-size: 1.25rem; }
    .tag-hero-figure {
        padding-left: 0; border-left: none;
        flex-direction: row; align-items: baseline; gap: 6px;
        width: 100%; border-top: 1px dashed #f3c2cc; padding-top: 12px; margin-top: 2px;
        justify-content: flex-start;
    }
    .tag-hero-figure-value { font-size: 1.7rem; }
}

/* ---- 8. ニーズページ おすすめ: 1枚目を"イチオシ"として主役化 ---- */
.picks-section.panel { padding: 18px 20px; }
.pick-featured {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 15px 16px;
}
.pick-featured-name { font-size: 0.92rem; font-weight: 700; }
.pick-featured-price {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--c-ink);
    letter-spacing: -0.03em;
}
.pick-featured-price-unit { color: var(--c-ink-3); }
.pick-featured:hover {
    border-color: var(--c-hot);
    box-shadow: var(--sh-hot);
}
/* 1枚目=イチオシ。横長で支配的に、数字を赤く */
.picks-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
}
.picks-grid .pick-featured:first-child {
    grid-column: 1 / -1;
    flex-flow: row wrap;
    align-items: center;
    gap: 8px 18px;
    background: linear-gradient(135deg, var(--c-hot-soft) 0%, #fff 70%);
    border-color: #fbd5dc;
    padding: 18px 22px;
}
.picks-grid .pick-featured:first-child .pick-reason { order: 1; }
.picks-grid .pick-featured:first-child .pick-featured-name { order: 2; font-size: 1.1rem; flex: 1 1 auto; }
.picks-grid .pick-featured:first-child .pick-featured-price {
    order: 3;
    font-size: 2.2rem;
    color: var(--c-hot);
    white-space: nowrap;
}
.picks-grid .pick-featured:first-child .pick-explanation { order: 4; flex: 1 1 100%; font-size: 0.8rem; }
.picks-grid .pick-featured:first-child .pick-featured-meta { order: 5; flex: 0 0 auto; margin-top: 0; }
@media (max-width: 640px) {
    .picks-grid { grid-template-columns: 1fr; }
    .picks-grid .pick-featured:first-child { gap: 6px 12px; }
    .picks-grid .pick-featured:first-child .pick-featured-name { flex: 1 1 100%; font-size: 1rem; }
}

/* ---- 9. 詳細ページ ヒーロー: 左=価格(答え) / 右=最安ルート(行動) ---- */
.detail-hero {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 18px;
}
.detail-hero-main { flex: 1; min-width: 0; }
.detail-name {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.detail-tags { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.detail-summary { margin-top: 4px; gap: 12px; }
.detail-price { font-size: 2.6rem; color: var(--c-hot); }
.detail-price-unit { font-size: 1rem; color: var(--c-ink-3); }
.detail-price-label {
    font-size: 0.74rem; color: var(--c-ink-3); font-weight: 700;
    background: var(--c-surface-2); padding: 3px 9px; border-radius: 999px;
    align-self: center; margin-bottom: 0;
}
.detail-context-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px;
}
.detail-context-row .detail-meta { margin-top: 0; }

/* 最安ルートCTA: ページ最重要の行動。色と影で浮かせる */
.detail-hero-cta {
    flex-shrink: 0;
    width: 248px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 16px 18px;
    background: linear-gradient(160deg, #fff 0%, var(--c-hot-soft) 100%);
    border: 1px solid #fbd5dc;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
}
.detail-hero-cta-label {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.74rem; font-weight: 800; color: var(--c-hot-ink);
}
.detail-hero-cta-site {
    font-size: 1.15rem; font-weight: 800; color: var(--c-ink); letter-spacing: -0.01em;
    line-height: 1.2; margin-top: 2px;
}
.detail-hero-cta-amount {
    font-size: 1.5rem; font-weight: 900; color: var(--c-hot);
    letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}
.btn-go--hero {
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
    font-size: 0.92rem;
    background: var(--c-hot);
    border-radius: var(--r-md);
    box-shadow: var(--sh-hot);
}
.btn-go--hero:hover { background: var(--c-hot-ink); transform: translateY(-1px); }
@media (max-width: 720px) {
    .detail-hero { flex-direction: column; gap: 14px; }
    .detail-hero-cta { width: auto; }
    .detail-name { font-size: 1.3rem; }
    .detail-price { font-size: 2.2rem; }
}

/* ---- 10. 比較表: 1位を"勝者"として強調(色を取り戻す) ---- */
.compare {
    border-radius: var(--r-lg);
    overflow: hidden;
}
.compare-row.is-best {
    background: var(--c-hot-soft);
    border-left: 3px solid var(--c-hot);
}
.compare-row.is-best .compare-rank { color: var(--c-hot); }
.compare-row.is-best .compare-rank svg { fill: var(--c-hot); }
.compare-row.is-best .compare-price { color: var(--c-hot); }
.compare-price { color: var(--c-ink); }

/* ---- 定番ストア chips: トップから人気EC直行 ---- */
.store-shortcut-section .store-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
}
.store-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    color: var(--c-ink);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.12s;
}
.store-chip:hover {
    background: var(--c-hot-soft);
    border-color: var(--c-hot);
    color: var(--c-hot-ink);
}

/* ---- 今日の変動: 数値の直下にDeltaを目立たせる ---- */
.card-price-delta {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.76rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0;
    vertical-align: 2px;
}
.card-price-delta--up {
    color: var(--c-hot);
    background: var(--c-hot-soft);
}
.card-price-delta--down {
    color: var(--c-ink-3);
    background: var(--c-surface-2, #f4f4f5);
}

/* ---- X項目: アクセシビリティ - skip-link & focus ---- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    background: var(--c-hot);
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    z-index: 9999;
    text-decoration: none;
    font-weight: 700;
}
.skip-link:focus { top: 8px; }
/* キーボードユーザー向けに focus 可視化を強化 */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 2px solid var(--c-hot);
    outline-offset: 2px;
}

/* ---- α3項目: 紹介リンク表示 ---- */
.compare-referral {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--c-hot-ink);
    text-decoration: underline;
    text-decoration-style: dashed;
}

/* ---- フォローボタン (P項目) ---- */
.favorite-form { display: block; margin-top: 8px; }
.btn-favorite, .btn-favorite-link {
    display: inline-block;
    padding: 6px 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--c-ink-2);
    cursor: pointer;
    text-decoration: none;
}
.btn-favorite:hover, .btn-favorite-link:hover {
    background: var(--c-hot-soft);
    border-color: var(--c-hot);
    color: var(--c-hot);
}

/* ---- V項目: 検索ファセット ---- */
.search-facets {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin: 12px 0;
}
.search-facet-group { margin: 4px 0; }
.search-facet-group + .search-facet-group { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--c-line); }
.search-facet-label {
    font-size: 0.74rem;
    color: var(--c-ink-3);
    margin-right: 6px;
    font-weight: 700;
}
.search-facet-chip {
    display: inline-block;
    font-size: 0.78rem;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--c-surface-2, #f1f5f9);
    color: var(--c-ink);
    margin: 3px 4px 3px 0;
    text-decoration: none;
    border: 1px solid transparent;
}
.search-facet-chip:hover { background: var(--c-hot-soft); }
.search-facet-chip.is-active { background: var(--c-hot); color: #fff; }
.search-facet-chip.is-clear { background: var(--c-surface); border-color: var(--c-ink-3); color: var(--c-ink-3); }

/* ---- 会員機能 (P/R項目) ---- */
.auth-panel { max-width: 480px; margin: 0 auto; }
.auth-form p { margin: 8px 0; }
.auth-form input[type=text], .auth-form input[type=password], .auth-form input[type=email], .auth-form input[type=number] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--c-line);
    border-radius: 6px;
    font-size: 0.95rem;
    box-sizing: border-box;
}
.auth-form label, .profile-form label { display: block; margin-bottom: 10px; font-size: 0.86rem; color: var(--c-ink-2); }
.auth-form label input, .profile-form label input { margin-top: 4px; }
.profile-form { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.btn-primary {
    padding: 10px 18px;
    background: var(--c-hot);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.95rem;
}
.btn-primary:hover { opacity: 0.9; }
.auth-link { margin-top: 12px; font-size: 0.86rem; color: var(--c-ink-2); }
.progress-bar {
    position: relative;
    height: 26px;
    background: var(--c-surface-2, #f1f5f9);
    border-radius: 999px;
    overflow: hidden;
    margin: 12px 0;
}
.progress-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, var(--c-hot), #f97316);
    transition: width 0.4s;
}
.progress-bar-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--c-ink);
}

/* ---- ニュース (T項目) ---- */
.news-list { list-style: none; padding: 0; margin: 0; }
.news-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--c-line);
}
.news-item:last-child { border-bottom: none; }
.news-meta {
    display: block;
    font-size: 0.74rem;
    color: var(--c-ink-3);
    margin-bottom: 4px;
}
.news-source {
    background: var(--c-surface-2, #f1f5f9);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}
.news-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--c-hot);
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}
.news-body {
    margin: 4px 0 0;
    font-size: 0.86rem;
    color: var(--c-ink-2);
    line-height: 1.55;
}

/* ---- ライフイベント・コーチ (S項目) ---- */
.coach-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
@media (max-width: 720px) { .coach-grid { grid-template-columns: 1fr; } }
.coach-card {
    padding: 18px;
    border: 1.5px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-surface);
    transition: all 0.15s;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.coach-card:hover {
    border-color: var(--c-hot);
    box-shadow: 0 4px 16px rgba(225, 29, 72, 0.08);
    transform: translateY(-1px);
}
.coach-card-title {
    margin: 0;
    font-size: 1.04rem;
    font-weight: 800;
    color: var(--c-ink);
}
.coach-card-lead {
    margin: 0;
    font-size: 0.86rem;
    color: var(--c-ink-2);
    line-height: 1.55;
}
.coach-card-cta {
    margin-top: auto;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--c-hot);
}
.coach-hero { background: linear-gradient(135deg, var(--c-hot-soft), #fff); }
.coach-total {
    margin-top: 12px;
    padding: 12px;
    background: var(--c-hot-soft);
    border-radius: 8px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.coach-total-label { font-size: 0.84rem; color: var(--c-ink-2); }
.coach-total-value { font-size: 1.6rem; font-weight: 900; color: var(--c-hot); }
.coach-section { }
.coach-step-no {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 900;
    background: var(--c-hot);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    margin-right: 8px;
}
.coach-step-desc {
    margin: 4px 0 12px;
    font-size: 0.9rem;
    color: var(--c-ink-2);
    line-height: 1.55;
}
.coach-section-total {
    margin: 10px 0 0;
    padding: 8px 12px;
    background: var(--c-surface-2, #f8fafc);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--c-ink);
    font-weight: 700;
}

/* ---- タグページの長文ガイド・HowTo・FAQ (K項目) ---- */
.guide-section .guide-body {
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--c-ink);
}
.guide-section .guide-body h3 {
    font-size: 1.04rem;
    font-weight: 800;
    margin: 18px 0 8px;
    color: var(--c-ink);
}
.guide-section .guide-body p {
    margin: 8px 0;
}
.howto-list {
    list-style: none;
    counter-reset: howto;
    padding: 0;
    margin: 0;
}
.howto-step {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--c-line);
    font-size: 0.92rem;
    line-height: 1.6;
}
.howto-step:last-child { border-bottom: none; }
.howto-step-no {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-hot);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.84rem;
}
.faq-item {
    border: 1px solid var(--c-line);
    border-radius: 6px;
    margin: 8px 0;
    overflow: hidden;
}
.faq-q {
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 700;
    background: var(--c-surface);
    list-style: none;
    color: var(--c-ink);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '+'; float: right; color: var(--c-ink-3); font-weight: 900; }
.faq-item[open] .faq-q::after { content: '−'; }
.faq-item[open] .faq-q { background: var(--c-hot-soft); color: var(--c-hot-ink); }
.faq-a {
    padding: 12px 14px;
    background: var(--c-surface-2, #f8fafc);
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--c-ink-2);
}

/* ---- トップ診断バナー (O項目) ---- */
.diagnosis-banner {
    background: linear-gradient(135deg, var(--c-hot) 0%, #ec4899 100%);
    color: #fff;
}
.diagnosis-banner-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.diagnosis-banner-title {
    margin: 0 0 4px;
    color: #fff;
    font-size: 1.04rem;
    font-weight: 800;
}
.diagnosis-banner-sub {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.86rem;
}
.diagnosis-banner-cta {
    background: #fff;
    color: var(--c-hot);
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.92rem;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.15s;
    white-space: nowrap;
}
.diagnosis-banner-cta:hover { transform: translateY(-1px); }

/* ---- オンボーディング診断 (O項目) ---- */
.diagnosis-panel { padding: 24px; }
.diagnosis-progress {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 16px 0 24px;
}
.diagnosis-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-surface-2, #f1f5f9);
    color: var(--c-ink-3);
    font-weight: 800;
    font-size: 0.9rem;
}
.diagnosis-step.is-active {
    background: var(--c-hot);
    color: #fff;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.3);
}
.diagnosis-step.is-done {
    background: var(--c-hot-soft);
    color: var(--c-hot);
}
.diagnosis-q {
    font-size: 1.24rem;
    font-weight: 800;
    margin: 8px 0 16px;
    color: var(--c-ink);
}
.diagnosis-choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 720px) { .diagnosis-choices { grid-template-columns: 1fr; } }
.diagnosis-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 14px;
    border: 1.5px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-surface);
    transition: all 0.15s;
    text-decoration: none;
}
.diagnosis-choice:hover {
    border-color: var(--c-hot);
    background: var(--c-hot-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(225, 29, 72, 0.1);
}
.diagnosis-choice-icon {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 8px;
}
.diagnosis-choice-title {
    font-weight: 800;
    color: var(--c-ink);
    margin-bottom: 4px;
    font-size: 0.96rem;
}
.diagnosis-choice-desc {
    font-size: 0.78rem;
    color: var(--c-ink-2);
    line-height: 1.5;
}
.diagnosis-summary {
    padding: 10px 14px;
    background: var(--c-surface-2, #f8fafc);
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 16px;
}
.diagnosis-summary strong { color: var(--c-hot); margin: 0 4px; }
.diagnosis-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 720px) { .diagnosis-results { grid-template-columns: 1fr; } }
.diagnosis-rank {
    font-size: 0.78rem;
    font-weight: 900;
    color: var(--c-hot);
    background: var(--c-hot-soft);
    padding: 2px 8px;
    border-radius: 999px;
    margin-right: 6px;
}
.hot-card--diagnosis {
    border: 1.5px solid var(--c-hot);
}
.diagnosis-cta {
    margin-top: 16px;
    text-align: center;
    font-size: 0.92rem;
}

/* ---- フッタの新鮮度表示 (L項目) ---- */
.footer-freshness {
    margin: 6px 0 4px;
    font-size: 0.82rem;
    color: var(--c-ink-2);
}
.footer-freshness time { font-weight: 700; color: var(--c-ink); }

/* ---- about ページのルールリスト (M/N項目) ---- */
.rule-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rule-list li {
    padding: 8px 0 8px 22px;
    position: relative;
    font-size: 0.92rem;
    line-height: 1.65;
    border-bottom: 1px dashed var(--c-line);
}
.rule-list li:last-child { border-bottom: none; }
.rule-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--c-hot);
    font-weight: 800;
}
.rule-list strong { color: var(--c-ink); font-weight: 800; }

/* ---- ClickLog 人気バッジ (J項目) ---- */
.popularity-badge {
    display: block;
    margin-top: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--c-hot);
    text-align: center;
}

/* ---- 自然言語ニーズフレーズ (I項目) ---- */
.need-phrases {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 8px 0 12px;
    padding: 8px 12px;
    background: var(--c-surface-2, #f8fafc);
    border-left: 3px solid var(--c-info, #3b82f6);
    border-radius: 4px;
    font-size: 0.84rem;
}
.need-phrases-label {
    font-weight: 700;
    color: var(--c-ink-2);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
}
.need-phrases-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--c-ink);
    font-style: italic;
}
.need-phrases-list li { line-height: 1.5; }

/* ---- 申込前チェックリスト (E項目) ---- */
.checklist-section {
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
    border: 1px solid #86efac;
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin: 16px 0;
}
.checklist-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #166534;
}
.checklist-title svg { color: #16a34a; }
.checklist-count {
    margin-left: auto;
    font-size: 0.74rem;
    font-weight: 600;
    color: #166534;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 999px;
}
.checklist-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.checklist-item {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    align-items: flex-start;
}
.checklist-box {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid #16a34a;
    border-radius: 3px;
    margin-top: 3px;
}
.checklist-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--c-ink);
}
.checklist-note {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed #86efac;
    font-size: 0.78rem;
    color: var(--c-ink-2);
    line-height: 1.5;
}

/* ---- 比較表のタイミング情報・最低交換 (D項目) ---- */
.compare-timing-note {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 8px 14px;
    background: var(--c-surface-2, #f8fafc);
    border-bottom: 1px solid var(--c-line);
    font-size: 0.78rem;
    color: var(--c-ink-2);
}
.compare-timing-note strong {
    color: var(--c-ink);
    font-weight: 700;
    margin-right: 4px;
}
.compare-payout {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--c-ink-3);
    background: var(--c-surface-2, #f1f5f9);
    padding: 1px 6px;
    border-radius: 4px;
    width: max-content;
}
.compare-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 4px;
}

/* F: 承認率グレードバッジ */
.compare-approval {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    letter-spacing: 0.02em;
    cursor: help;
}
.compare-approval.grade-s { color: #047857; background: #d1fae5; }
.compare-approval.grade-a { color: #166534; background: #dcfce7; }
.compare-approval.grade-b { color: #854d0e; background: #fef9c3; }
.compare-approval.grade-c { color: #9a3412; background: #ffedd5; }
.compare-approval.grade-d { color: #991b1b; background: #fee2e2; }

/* ---- 詳細ページの結論断言 (C項目) ---- */
.verdict-conclusion {
    margin: 8px 0 4px;
    padding: 8px 12px;
    background: var(--c-hot-soft);
    border-left: 3px solid var(--c-hot);
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-ink);
    line-height: 1.5;
}

/* ---- 過去最高更新中セクション（トップ・B項目）---- */
.peak-section {
    background: linear-gradient(180deg, var(--c-hot-soft) 0%, #fff 80%);
    border: 1px solid var(--c-hot);
    box-shadow: 0 2px 12px rgba(225, 29, 72, 0.06);
}
.peak-section .section-heading { color: var(--c-hot-ink); }
.peak-flame {
    font-size: 1.16rem;
    margin-right: 4px;
    animation: pulse-soft 2s ease-in-out infinite;
}
.section-lead {
    margin: 4px 0 12px;
    font-size: 0.84rem;
    color: var(--c-ink-2);
    line-height: 1.5;
}
.hot-card--peak {
    background: var(--c-surface);
    border: 1.5px solid var(--c-hot);
    box-shadow: 0 1px 6px rgba(225, 29, 72, 0.08);
}
.hot-card--peak:hover {
    background: var(--c-hot-soft);
    transform: translateY(-1px);
}
.hot-card--peak .hot-card-price { color: var(--c-hot); }

/* badge--peak を「赤+強調」に格上げ（メリハリ v2 ルールの一貫性確保） */
.badge--peak {
    background: var(--c-hot-soft);
    color: var(--c-hot-ink);
    border: 1px solid var(--c-hot);
    font-weight: 800;
    animation: pulse-soft 2s ease-in-out infinite;
}

/* ---- 詳細ページ 過去履歴サマリー (kochalog 凌駕の核心) ---- */
.history-stats-section {
    background: linear-gradient(135deg, #fff 0%, var(--c-surface-2, #f8fafc) 100%);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 16px 18px;
    margin: 16px 0;
}
.history-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 720px) {
    .history-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.history-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.history-stat-label {
    font-size: 0.72rem;
    color: var(--c-ink-3);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.history-stat-value {
    font-size: 1.32rem;
    font-weight: 900;
    color: var(--c-ink);
    letter-spacing: -0.02em;
    font-feature-settings: "tnum";
    line-height: 1.1;
}
.history-stat-unit {
    font-size: 0.84rem;
    font-weight: 700;
    margin-left: 1px;
    color: var(--c-ink-2);
}
.history-stat-sub {
    font-size: 0.7rem;
    color: var(--c-ink-3);
}
.history-stat--current .history-stat-value { color: var(--c-hot); }
.history-stat--peak.is-now-peak {
    background: var(--c-hot-soft);
    margin: -6px -10px;
    padding: 6px 10px;
    border-radius: 8px;
}
.history-stat--peak.is-now-peak .history-stat-label { color: var(--c-hot); }
.history-stat--peak.is-now-peak .history-stat-value { color: var(--c-hot); }
.history-stat-value--up { color: var(--c-hot); }
.history-stat-value--down { color: var(--c-ink-3); }
.history-stat-value--peak { color: var(--c-hot); font-size: 1.1rem; }
.history-stats-note {
    margin: 12px 0 0;
    padding: 8px 12px;
    background: var(--c-surface);
    border-radius: 6px;
    font-size: 0.83rem;
    color: var(--c-ink-2);
    line-height: 1.55;
}
.history-stats-note strong { color: var(--c-hot); }

/* ---- タグ一覧 (/tags/) の件数バッジ ---- */
.need-card-count {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-ink-3);
    margin-top: 2px;
}
.page-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--c-ink);
}
.page-lead {
    color: var(--c-ink-2);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
}