/**
 * 毎年1月は英会話アプリを始める人が急増する!?
 * JIN互換スタイルシート
 * Version: 1.1.0
 *
 * 修正: スコープを .jin-article に変更、CSS変数プレフィックス削除
 * JINテーマとの競合を回避するため、3段階詳細度 + !important を使用
 */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Rounded+Mplus+1c:wght@700&display=swap');

/* ==========================================================================
   CSS変数定義
   ========================================================================== */
.jin-article {
    --primary: #FF6B35;
    --secondary: #4ECDC4;
    --accent: #FFE66D;
    --background: #FFF9F5;
    --background-secondary: #FFF0E5;
    --text-primary: #2C3E50;
    --text-secondary: #5D6D7E;
    --success: #27AE60;
    --warning: #F39C12;
    --danger: #E74C3C;
    --info: #3498DB;
    --shadow-card: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-hover: 0 8px 30px rgba(0,0,0,0.12);
    --radius: 12px;
    --radius-lg: 16px;
}

/* ==========================================================================
   JIN基本リセット（3段階詳細度）
   ========================================================================== */
.jin-article,
.cps-post-main .jin-article,
article .jin-article {
    box-sizing: border-box !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    color: var(--text-primary) !important;
    background-color: var(--background) !important;
    /* 空白問題対策: 高さ・マージン明示 */
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important;
    display: block !important;
    float: none !important;
    clear: both !important;
}

/* JINテーマの疑似要素による空白挿入防止 */
.jin-article::before,
.jin-article::after,
.cps-post-main .jin-article::before,
.cps-post-main .jin-article::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jin-article *,
.cps-post-main .jin-article * {
    box-sizing: border-box !important;
}

.jin-article__inner,
.cps-post-main .jin-article__inner {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 24px 16px !important;
    /* 空白問題対策 */
    height: auto !important;
    min-height: 0 !important;
}

/* ==========================================================================
   h2見出し完全リセット（JIN最重要対策）
   ========================================================================== */
.jin-article h2,
.cps-post-main .jin-article h2,
article .jin-article h2,
.cps-post-main.h2-style01 .jin-article h2,
.cps-post-main.h2-style02 .jin-article h2,
.cps-post-main.h2-style03 .jin-article h2 {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-family: 'Rounded Mplus 1c', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
    color: var(--text-primary) !important;
    margin: 48px 0 24px 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 3px solid var(--primary) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: none !important;
    position: relative !important;
}

/* h2疑似要素完全非表示 */
.jin-article h2::before,
.jin-article h2::after,
.cps-post-main .jin-article h2::before,
.cps-post-main .jin-article h2::after,
.cps-post-main.h2-style01 .jin-article h2::before,
.cps-post-main.h2-style01 .jin-article h2::after,
.cps-post-main.h2-style02 .jin-article h2::before,
.cps-post-main.h2-style02 .jin-article h2::after,
.cps-post-main.h2-style03 .jin-article h2::before,
.cps-post-main.h2-style03 .jin-article h2::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    border: none !important;
    position: static !important;
}

.jin-article h2 .section-icon,
.cps-post-main .jin-article h2 .section-icon {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   h3見出し完全リセット（JIN最重要対策）
   ========================================================================== */
.jin-article h3,
.cps-post-main .jin-article h3,
article .jin-article h3,
.cps-post-main.h3-style01 .jin-article h3,
.cps-post-main.h3-style02 .jin-article h3,
.cps-post-main.h3-style03 .jin-article h3 {
    all: unset !important;
    display: block !important;
    font-family: 'Rounded Mplus 1c', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
    color: var(--text-primary) !important;
    margin: 32px 0 16px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    position: relative !important;
}

/* h3疑似要素完全非表示 */
.jin-article h3::before,
.jin-article h3::after,
.cps-post-main .jin-article h3::before,
.cps-post-main .jin-article h3::after,
.cps-post-main.h3-style01 .jin-article h3::before,
.cps-post-main.h3-style01 .jin-article h3::after,
.cps-post-main.h3-style02 .jin-article h3::before,
.cps-post-main.h3-style02 .jin-article h3::after,
.cps-post-main.h3-style03 .jin-article h3::before,
.cps-post-main.h3-style03 .jin-article h3::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    border: none !important;
    position: static !important;
}

/* ==========================================================================
   h4見出しリセット
   ========================================================================== */
.jin-article h4,
.cps-post-main .jin-article h4 {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Rounded Mplus 1c', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--text-primary) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.jin-article h4::before,
.jin-article h4::after,
.cps-post-main .jin-article h4::before,
.cps-post-main .jin-article h4::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   テキスト要素
   ========================================================================== */
.jin-article p,
.cps-post-main .jin-article p {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    line-height: 1.8 !important;
}

.jin-article .lead-text,
.cps-post-main .jin-article .lead-text {
    font-size: 1.1rem !important;
    color: var(--text-secondary) !important;
    border-left: 4px solid var(--primary) !important;
    padding-left: 16px !important;
    margin-bottom: 24px !important;
    background: none !important;
}

/* ==========================================================================
   マーカーハイライト
   ========================================================================== */
.jin-article .highlight-yellow,
.cps-post-main .jin-article .highlight-yellow {
    background: linear-gradient(transparent 60%, var(--accent) 60%) !important;
    padding: 0 4px !important;
}

.jin-article .highlight-orange,
.cps-post-main .jin-article .highlight-orange {
    background: linear-gradient(transparent 60%, rgba(255,107,53,0.3) 60%) !important;
    padding: 0 4px !important;
}

/* ==========================================================================
   重要数字
   ========================================================================== */
.jin-article .key-number,
.cps-post-main .jin-article .key-number {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    display: inline-block !important;
}

/* ==========================================================================
   Callout Boxes
   ========================================================================== */
.jin-article .callout-box,
.cps-post-main .jin-article .callout-box {
    border-radius: var(--radius) !important;
    padding: 20px 24px !important;
    margin: 24px 0 !important;
    border-left: 4px solid !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.jin-article .callout-box.info,
.cps-post-main .jin-article .callout-box.info {
    background: #E8F4FD !important;
    border-left-color: var(--info) !important;
}

.jin-article .callout-box.success,
.cps-post-main .jin-article .callout-box.success {
    background: #E8F8F0 !important;
    border-left-color: var(--success) !important;
}

.jin-article .callout-box.warning,
.cps-post-main .jin-article .callout-box.warning {
    background: #FEF5E7 !important;
    border-left-color: var(--warning) !important;
}

.jin-article .callout-box.danger,
.cps-post-main .jin-article .callout-box.danger {
    background: #FDEDEC !important;
    border-left-color: var(--danger) !important;
}

.jin-article .callout-box.highlight,
.cps-post-main .jin-article .callout-box.highlight {
    background: var(--background-secondary) !important;
    border-left-color: var(--primary) !important;
}

.jin-article .callout-box h4,
.cps-post-main .jin-article .callout-box h4 {
    font-family: 'Rounded Mplus 1c', sans-serif !important;
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.jin-article .callout-box p,
.cps-post-main .jin-article .callout-box p {
    margin-bottom: 8px !important;
}

.jin-article .callout-box ul,
.cps-post-main .jin-article .callout-box ul {
    margin-left: 20px !important;
    list-style: disc !important;
}

.jin-article .callout-box li,
.cps-post-main .jin-article .callout-box li {
    margin-bottom: 8px !important;
}

.jin-article .callout-box li::before,
.cps-post-main .jin-article .callout-box li::before {
    display: none !important;
}

/* ==========================================================================
   比較表（JINテーブルリセット）
   ========================================================================== */
.jin-article .comparison-table,
.cps-post-main .jin-article .comparison-table,
.cps-post-main .jin-article table.comparison-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 24px 0 !important;
    font-size: 0.9rem !important;
    background: white !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-card) !important;
    border: none !important;
}

.jin-article .comparison-table th,
.cps-post-main .jin-article .comparison-table th {
    background: var(--primary) !important;
    color: white !important;
    padding: 12px 8px !important;
    text-align: center !important;
    font-weight: 700 !important;
    border: none !important;
}

.jin-article .comparison-table td,
.cps-post-main .jin-article .comparison-table td {
    padding: 12px 8px !important;
    text-align: center !important;
    border-bottom: 1px solid #eee !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    color: var(--text-primary) !important;
    background: transparent !important;
}

.jin-article .comparison-table tr:last-child td,
.cps-post-main .jin-article .comparison-table tr:last-child td {
    border-bottom: none !important;
}

.jin-article .comparison-table tr:hover,
.cps-post-main .jin-article .comparison-table tr:hover {
    background: var(--background-secondary) !important;
}

.jin-article .comparison-table .app-name,
.cps-post-main .jin-article .comparison-table .app-name {
    font-weight: 700 !important;
    text-align: left !important;
    padding-left: 16px !important;
}

/* ==========================================================================
   チャートコンテナ
   ========================================================================== */
.jin-article .chart-container,
.cps-post-main .jin-article .chart-container {
    background: white !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
    margin: 24px 0 !important;
    box-shadow: var(--shadow-card) !important;
    border: none !important;
}

.jin-article .chart-container h4,
.cps-post-main .jin-article .chart-container h4 {
    font-family: 'Rounded Mplus 1c', sans-serif !important;
    font-size: 1.1rem !important;
    margin-bottom: 16px !important;
    text-align: center !important;
    color: var(--text-primary) !important;
}

.jin-article .chart-insight,
.cps-post-main .jin-article .chart-insight {
    text-align: center !important;
    font-size: 0.9rem !important;
    color: var(--text-secondary) !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px dashed #ddd !important;
}

.jin-article .chart-container canvas,
.cps-post-main .jin-article .chart-container canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 200px !important;
}

.jin-article .chart-fallback,
.cps-post-main .jin-article .chart-fallback {
    text-align: center !important;
    font-size: 0.9rem !important;
    color: var(--text-secondary) !important;
    margin-top: 12px !important;
}

/* ==========================================================================
   TikTokスタイル ストーリーカード
   ========================================================================== */
.jin-article .story-cards-container,
.cps-post-main .jin-article .story-cards-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    display: flex !important;
    gap: 16px !important;
    padding: 16px 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
}

.jin-article .story-cards-container::-webkit-scrollbar,
.cps-post-main .jin-article .story-cards-container::-webkit-scrollbar {
    height: 6px !important;
}

.jin-article .story-cards-container::-webkit-scrollbar-thumb,
.cps-post-main .jin-article .story-cards-container::-webkit-scrollbar-thumb {
    background: #ccc !important;
    border-radius: 3px !important;
}

.jin-article .story-card,
.cps-post-main .jin-article .story-card {
    flex: 0 0 85vw !important;
    max-width: 320px !important;
    scroll-snap-align: center !important;
    background: white !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
    box-shadow: var(--shadow-card) !important;
    transition: transform 0.3s !important;
    border: none !important;
}

.jin-article .story-card:hover,
.cps-post-main .jin-article .story-card:hover {
    transform: scale(1.02) !important;
}

.jin-article .story-card.concept-intro,
.cps-post-main .jin-article .story-card.concept-intro {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    color: white !important;
}

.jin-article .story-card.concept-intro p,
.cps-post-main .jin-article .story-card.concept-intro p {
    color: white !important;
}

.jin-article .story-card.warning-card,
.cps-post-main .jin-article .story-card.warning-card {
    background: #FEF5E7 !important;
    border: 2px solid var(--warning) !important;
}

.jin-article .story-card h4,
.cps-post-main .jin-article .story-card h4 {
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.jin-article .story-card .source,
.cps-post-main .jin-article .story-card .source {
    font-size: 0.8rem !important;
    opacity: 0.8 !important;
    margin-top: 12px !important;
}

.jin-article .card-indicators,
.cps-post-main .jin-article .card-indicators {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
}

.jin-article .card-indicator,
.cps-post-main .jin-article .card-indicator {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #ddd !important;
}

.jin-article .card-indicator.active,
.cps-post-main .jin-article .card-indicator.active {
    background: var(--primary) !important;
}

/* ==========================================================================
   ダブルタップメモ機能
   ========================================================================== */
.jin-article .double-tap-target,
.cps-post-main .jin-article .double-tap-target {
    cursor: pointer !important;
    position: relative !important;
    display: inline-block !important;
    touch-action: manipulation !important;
}

.jin-article .double-tap-target .key-number,
.cps-post-main .jin-article .double-tap-target .key-number {
    transition: transform 0.3s !important;
}

.jin-article .double-tap-target:active .key-number,
.cps-post-main .jin-article .double-tap-target:active .key-number {
    transform: scale(1.1) !important;
}

.jin-article .saved-indicator,
.cps-post-main .jin-article .saved-indicator {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--primary) !important;
    border-radius: 50% !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 12px !important;
    animation: pop-in 0.3s ease-out !important;
}

.jin-article .double-tap-target.saved .saved-indicator,
.cps-post-main .jin-article .double-tap-target.saved .saved-indicator {
    display: flex !important;
}

@keyframes pop-in {
    0% { transform: scale(0); }
    70% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   長押し根拠ドロワー
   ========================================================================== */
.jin-article .citation-trigger,
.cps-post-main .jin-article .citation-trigger {
    color: var(--secondary) !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    position: relative !important;
}

.jin-article .citation-trigger::after,
.cps-post-main .jin-article .citation-trigger::after {
    content: 'i' !important;
    font-size: 0.7em !important;
    margin-left: 2px !important;
    opacity: 0.7 !important;
    font-style: normal !important;
    background: var(--secondary) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 14px !important;
    height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: super !important;
}

/* ==========================================================================
   横スワイプ比較
   ========================================================================== */
.jin-article .swipe-compare-container,
.cps-post-main .jin-article .swipe-compare-container {
    background: white !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
    margin: 24px 0 !important;
    box-shadow: var(--shadow-card) !important;
    border: none !important;
}

.jin-article .swipe-compare-container h4,
.cps-post-main .jin-article .swipe-compare-container h4 {
    text-align: center !important;
    margin-bottom: 20px !important;
}

.jin-article .swipe-hint,
.cps-post-main .jin-article .swipe-hint {
    text-align: center !important;
    font-size: 0.8rem !important;
    color: var(--text-secondary) !important;
    margin-bottom: 12px !important;
}

.jin-article .swipe-hint::before,
.cps-post-main .jin-article .swipe-hint::before {
    content: '\2190' !important;
    margin-right: 4px !important;
}

.jin-article .swipe-hint::after,
.cps-post-main .jin-article .swipe-hint::after {
    content: '\2192' !important;
    margin-left: 4px !important;
}

.jin-article .swipe-options,
.cps-post-main .jin-article .swipe-options {
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 8px 0 !important;
    -webkit-overflow-scrolling: touch !important;
}

.jin-article .swipe-option,
.cps-post-main .jin-article .swipe-option {
    flex: 0 0 calc(50% - 8px) !important;
    min-width: 140px !important;
    scroll-snap-align: center !important;
    padding: 20px 16px !important;
    border-radius: var(--radius) !important;
    text-align: center !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
    border: none !important;
}

.jin-article .swipe-option:hover,
.cps-post-main .jin-article .swipe-option:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-hover) !important;
}

.jin-article .swipe-option.left,
.cps-post-main .jin-article .swipe-option.left {
    background: linear-gradient(135deg, var(--secondary), #95E1D3) !important;
    color: white !important;
}

.jin-article .swipe-option.right,
.cps-post-main .jin-article .swipe-option.right {
    background: linear-gradient(135deg, var(--primary), #F38181) !important;
    color: white !important;
}

.jin-article .swipe-option h5,
.cps-post-main .jin-article .swipe-option h5 {
    font-size: 1rem !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: white !important;
}

.jin-article .swipe-option ul,
.cps-post-main .jin-article .swipe-option ul {
    list-style: none !important;
    font-size: 0.85rem !important;
    text-align: left !important;
    margin-top: 12px !important;
    padding-left: 0 !important;
}

.jin-article .swipe-option li,
.cps-post-main .jin-article .swipe-option li {
    margin-bottom: 6px !important;
    padding-left: 16px !important;
    position: relative !important;
    color: white !important;
}

.jin-article .swipe-option li::before,
.cps-post-main .jin-article .swipe-option li::before {
    content: "\2713" !important;
    position: absolute !important;
    left: 0 !important;
    color: white !important;
    display: inline !important;
}

.jin-article .swipe-verdict,
.cps-post-main .jin-article .swipe-verdict {
    text-align: center !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px dashed #ddd !important;
    font-size: 0.9rem !important;
    color: var(--text-secondary) !important;
}

/* ==========================================================================
   エンゲージメントフック: ポール
   ========================================================================== */
.jin-article .poll-container,
.cps-post-main .jin-article .poll-container {
    background: white !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
    margin: 24px 0 !important;
    box-shadow: var(--shadow-card) !important;
    text-align: center !important;
    border: none !important;
}

.jin-article .poll-container h4,
.cps-post-main .jin-article .poll-container h4 {
    font-size: 1.2rem !important;
    margin-bottom: 20px !important;
}

.jin-article .poll-options,
.cps-post-main .jin-article .poll-options {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.jin-article .poll-option,
.cps-post-main .jin-article .poll-option {
    flex: 1 !important;
    min-width: 120px !important;
    max-width: 200px !important;
    padding: 16px !important;
    border-radius: var(--radius) !important;
    border: 2px solid #eee !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    background: white !important;
}

.jin-article .poll-option:hover,
.cps-post-main .jin-article .poll-option:hover {
    border-color: var(--primary) !important;
    transform: translateY(-2px) !important;
}

.jin-article .poll-option.selected,
.cps-post-main .jin-article .poll-option.selected {
    border-color: var(--primary) !important;
    background: var(--background-secondary) !important;
}

.jin-article .poll-option .icon,
.cps-post-main .jin-article .poll-option .icon {
    font-size: 2rem !important;
    margin-bottom: 8px !important;
}

.jin-article .poll-results,
.cps-post-main .jin-article .poll-results {
    margin-top: 20px !important;
    display: none !important;
}

.jin-article .poll-results.show,
.cps-post-main .jin-article .poll-results.show {
    display: block !important;
}

/* ==========================================================================
   タイムライン
   ========================================================================== */
.jin-article .timeline,
.cps-post-main .jin-article .timeline {
    position: relative !important;
    padding: 20px 0 !important;
    margin: 24px 0 !important;
}

.jin-article .timeline::before,
.cps-post-main .jin-article .timeline::before {
    content: '' !important;
    position: absolute !important;
    left: 24px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: linear-gradient(to bottom, var(--accent), var(--warning), var(--secondary), var(--success)) !important;
    display: block !important;
}

.jin-article .timeline-item,
.cps-post-main .jin-article .timeline-item {
    position: relative !important;
    padding-left: 60px !important;
    margin-bottom: 24px !important;
}

.jin-article .timeline-item .milestone,
.cps-post-main .jin-article .timeline-item .milestone {
    position: absolute !important;
    left: 12px !important;
    width: 28px !important;
    height: 28px !important;
    background: white !important;
    border: 3px solid var(--secondary) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.jin-article .timeline-item.warning .milestone,
.cps-post-main .jin-article .timeline-item.warning .milestone {
    border-color: var(--warning) !important;
}

.jin-article .timeline-item.highlight .milestone,
.cps-post-main .jin-article .timeline-item.highlight .milestone {
    border-color: var(--success) !important;
    background: var(--success) !important;
    color: white !important;
}

.jin-article .timeline-item .content,
.cps-post-main .jin-article .timeline-item .content {
    background: white !important;
    padding: 16px !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-card) !important;
    border: none !important;
}

.jin-article .timeline-item .date,
.cps-post-main .jin-article .timeline-item .date {
    font-weight: 700 !important;
    color: var(--primary) !important;
    margin-bottom: 4px !important;
}

/* ==========================================================================
   まとめセクション
   ========================================================================== */
.jin-article .summary-section,
.cps-post-main .jin-article .summary-section {
    background: linear-gradient(135deg, var(--background-secondary), white) !important;
    border-radius: var(--radius-lg) !important;
    padding: 32px 24px !important;
    margin: 48px 0 24px !important;
    border: none !important;
}

.jin-article .summary-section h2,
.cps-post-main .jin-article .summary-section h2 {
    border-bottom: none !important;
    margin-top: 0 !important;
}

.jin-article .summary-points,
.cps-post-main .jin-article .summary-points {
    list-style: none !important;
    counter-reset: summary !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.jin-article .summary-points li,
.cps-post-main .jin-article .summary-points li {
    counter-increment: summary !important;
    margin-bottom: 16px !important;
    padding-left: 40px !important;
    position: relative !important;
}

.jin-article .summary-points li::before,
.cps-post-main .jin-article .summary-points li::before {
    content: counter(summary) !important;
    position: absolute !important;
    left: 0 !important;
    width: 28px !important;
    height: 28px !important;
    background: var(--primary) !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
}

/* ==========================================================================
   CTA
   ========================================================================== */
.jin-article .cta-box,
.cps-post-main .jin-article .cta-box {
    background: linear-gradient(135deg, var(--primary), #F38181) !important;
    color: white !important;
    text-align: center !important;
    padding: 32px 24px !important;
    border-radius: var(--radius-lg) !important;
    margin: 32px 0 !important;
    border: none !important;
}

.jin-article .cta-box h3,
.cps-post-main .jin-article .cta-box h3 {
    color: white !important;
    margin-bottom: 16px !important;
}

.jin-article .cta-box p,
.cps-post-main .jin-article .cta-box p {
    opacity: 0.9 !important;
    margin-bottom: 20px !important;
    color: white !important;
}

/* ==========================================================================
   FAB: 保存ボタン
   ========================================================================== */
.save-fab,
.jin-article .save-fab,
.cps-post-main .save-fab,
#saveFab {
    position: fixed !important;
    bottom: 24px !important;
    top: auto !important;
    right: 24px !important;
    left: auto !important;
    width: 56px !important;
    height: 56px !important;
    background: var(--primary) !important;
    border-radius: 50% !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(255,107,53,0.4) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
    z-index: 100 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

.save-fab:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(255,107,53,0.5) !important;
}

.save-fab.has-items::after {
    content: attr(data-count) !important;
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    width: 22px !important;
    height: 22px !important;
    background: var(--danger) !important;
    color: white !important;
    border-radius: 50% !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid white !important;
}

body.drawer-open .save-fab {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   スクロールプログレスバー
   ========================================================================== */
.scroll-progress,
.jin-article .scroll-progress,
.cps-post-main .scroll-progress,
#scrollProgress {
    position: fixed !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    height: 3px !important;
    background: var(--primary) !important;
    z-index: 1000 !important;
    width: 0% !important;
    transition: width 0.1s !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

/* ==========================================================================
   根拠ドロワー
   ========================================================================== */
.citation-overlay,
.jin-article .citation-overlay,
.cps-post-main .citation-overlay,
#citationOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.3) !important;
    z-index: 999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s, visibility 0.3s !important;
    margin: 0 !important;
    padding: 0 !important;
}

.citation-overlay.open,
.jin-article .citation-overlay.open,
.cps-post-main .citation-overlay.open,
#citationOverlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.citation-drawer,
.jin-article .citation-drawer,
.cps-post-main .citation-drawer,
#citationDrawer {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 50vh !important;
    height: auto !important;
    background: white !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 24px !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
}

.citation-drawer.open,
.jin-article .citation-drawer.open,
.cps-post-main .citation-drawer.open,
#citationDrawer.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.drawer-open #citationDrawer {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.drawer-open {
    overflow: hidden !important;
}

.citation-drawer .close-btn {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: #eee !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.citation-drawer h4 {
    font-size: 1.2rem !important;
    margin-bottom: 16px !important;
    color: var(--text-primary) !important;
}

.citation-drawer .citation-meta {
    font-size: 0.9rem !important;
    color: var(--text-secondary) !important;
    margin-bottom: 16px !important;
}

.citation-drawer .citation-finding {
    background: var(--background-secondary) !important;
    border-radius: var(--radius) !important;
    padding: 16px !important;
    margin: 16px 0 !important;
}

.citation-drawer .citation-finding h5 {
    font-size: 0.9rem !important;
    color: var(--primary) !important;
    margin-bottom: 8px !important;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 480px) {
    .jin-article h2,
    .cps-post-main .jin-article h2 {
        font-size: 1.25rem !important;
    }

    .jin-article .story-card,
    .cps-post-main .jin-article .story-card {
        flex: 0 0 90vw !important;
    }

    .jin-article .swipe-option,
    .cps-post-main .jin-article .swipe-option {
        flex: 0 0 85% !important;
        min-width: 260px !important;
    }

    .jin-article .poll-options,
    .cps-post-main .jin-article .poll-options {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .jin-article .poll-option,
    .cps-post-main .jin-article .poll-option {
        flex: 1 1 45% !important;
        min-width: 140px !important;
        max-width: 100% !important;
        padding: 12px !important;
    }

    .jin-article .timeline::before,
    .cps-post-main .jin-article .timeline::before {
        left: 16px !important;
    }

    .jin-article .timeline-item,
    .cps-post-main .jin-article .timeline-item {
        padding-left: 50px !important;
    }

    .jin-article .timeline-item .milestone,
    .cps-post-main .jin-article .timeline-item .milestone {
        left: 4px !important;
    }

    .jin-article .comparison-table,
    .cps-post-main .jin-article .comparison-table {
        font-size: 0.8rem !important;
    }

    .jin-article .comparison-table th,
    .jin-article .comparison-table td,
    .cps-post-main .jin-article .comparison-table th,
    .cps-post-main .jin-article .comparison-table td {
        padding: 8px 4px !important;
    }

    .citation-drawer .close-btn {
        width: 44px !important;
        height: 44px !important;
    }
}

/* ==========================================================================
   アニメーション
   ========================================================================== */
.jin-article .fade-up,
.cps-post-main .jin-article .fade-up {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 0.6s, transform 0.6s !important;
}

.jin-article .fade-up.visible,
.cps-post-main .jin-article .fade-up.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
    .jin-article .fade-up,
    .cps-post-main .jin-article .fade-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}