/* ================================
 * JIJI Theme UI Components  
 * 独立UI部品（ボタン、ユーティリティクラス等）
 * 
 * Purpose: 他に依存しない独立したUIコンポーネント
 * ================================ */


/* ========== バッジコンポーネント ========== */
.badge {
    display: inline-block;
    padding: var(--spacing-4) var(--spacing-12);
    font-size: var(--font-size-ss);
    font-weight: 500;
    border-radius: var(--border-radius-full);
}

.badge-primary {
    background: var(--color-bg-section);
    color: var(--color-black);
}

.badge-secondary {
    background: var(--color-bg-section);
    color: var(--color-dark-gray);
}

.category-badge {
    background: transparent;
    color: var(--color-dark-gray);
    border: 1px solid var(--color-gray);
}

.source-badge, .date-badge, .freshness-badge {
    font-size: var(--font-size-ss);
    padding: var(--spacing-4) var(--spacing-12);
    border-radius: var(--border-radius-full);
    background: var(--color-bg-section);
    color: var(--text-secondary);
}

/* ========== Flexboxユーティリティ ========== */
.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}


.flex-1 {
    flex: 1;
}

/* ギャップ */
.gap-sm { gap: var(--spacing-12); }
.gap-md { gap: var(--spacing-16); }
.gap-lg { gap: var(--spacing-24); }

/* ========== グリッドユーティリティ（追加クラスのみ） ========== */
/* 基本グリッド(.grid, .grid-1～3)は03-base.cssで定義済み */
.grid-4 { 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-16);
}

/* ========== テキストユーティリティ ========== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ========== マージン・パディングユーティリティ ========== */
.mb-sm { margin-bottom: var(--spacing-8); }
.mb-md { margin-bottom: var(--spacing-16); }
.mb-lg { margin-bottom: var(--spacing-24); }
.mb-xl { margin-bottom: var(--spacing-48); }

.mt-lg { margin-top: var(--spacing-24); }
.mt-xl { margin-top: var(--spacing-48); }

.pt-lg { padding-top: var(--spacing-24); }
.pt-xl { padding-top: var(--spacing-48); }

/* ========== フォントサイズユーティリティ ========== */
.text-xs { font-size: var(--font-size-ss); }
.text-sm { font-size: var(--font-size-s); }
.text-base { font-size: var(--font-size-m); }
.text-lg { font-size: var(--font-size-l); }

.text-secondary { color: var(--text-secondary); }

/* ========== レスポンシブ対応 ========== */
@media (max-width: 640px) {
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr !important;
    }
    
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-5 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-8);
    }
    
}

@media (max-width: 480px) {
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .grid-5 {
        grid-template-columns: 1fr;
    }
}

/* ========== ペルソナアバターコンポーネント ========== */
.persona-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-section);
    border: 2px solid var(--color-border);
    overflow: hidden;
    flex-shrink: 0;
}

.persona-avatar.sm {
    width: 50px;
    height: 50px;
}

.persona-avatar.lg {
    width: 80px;
    height: 80px;
}

.persona-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.persona-avatar span {
    font-size: var(--font-size-ll);
}

.persona-avatar.sm span {
    font-size: var(--font-size-m);
}

.persona-avatar.lg span {
    font-size: var(--font-size-title);
    line-height: var(--line-height-limited);
}

.persona-avatar-with-name {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}

.persona-avatar-with-name .persona-name {
    font-size: var(--font-size-s);
    font-weight: 500;
    color: var(--text-primary);
}

.persona-name {
    font-size: var(--font-size-s);
    font-weight: 500;
    color: var(--text-primary);
}

/* ========== ペルソナ紹介コンポーネント ========== */
.persona-intro-compact {
    background: var(--color-white);
    border-radius: 8px;
    padding: var(--spacing-16);
    transition: transform 0.2s ease;
}

.persona-intro-simple {
    /* カード要素なしのシンプルなコンポーネント（padding なし） */
}

.persona-name-large {
    font-size: var(--font-size-l);
    font-weight: 600;
    margin: 0 0 var(--spacing-8) 0;
    color: var(--text-primary);
    line-height: var(--line-height-layout);
}

.persona-description {
    color: var(--text-secondary);
    margin: var(--spacing-12) 0 var(--spacing-16) 0;
    line-height: var(--line-height-base);
    font-size: var(--font-size-s);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.persona-age-position {
    color: var(--color-gray);
    font-size: var(--font-size-xs);
    margin: 0;
    line-height: var(--line-height-layout);
}

.persona-intro-compact:hover {
    transform: translateY(-2px);
}

.persona-intro-compact h6 {
    font-size: var(--font-size-s);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
    color: var(--text-primary);
}

/* ========== ペルソナ紹介セクション（トップページ・記事ページ共通） ========== */
.personas-introduction-section {
    background: var(--color-bg-section);
    padding: var(--spacing-64) var(--spacing-64);
    margin-top: var(--spacing-48);
}

.section-title {
    font-size: var(--font-size-ll);
    color: var(--color-black);
    margin-bottom: var(--spacing-24);
    font-weight: 600;
    text-align: center;
}

.personas-introduction-section .grid {
    max-width: 80rem;
    margin: 0 auto;
}

/* ========== ペルソナスピーチセクション ========== */
.persona-speech-section {
    margin-top: var(--spacing-48);
}

/* モバイル版 - ペルソナ紹介セクション */
@media (max-width: 640px) {
    .personas-introduction-section {
        padding: var(--spacing-48) var(--spacing-24);
        margin-top: var(--spacing-32);
    }
    
    .persona-speech-section {
        margin-top: var(--spacing-32);
    }
}

/* ========== スピーチ本文読みやすさ最適化 ========== */
/* スピーチコンテンツ専用スタイル - 記事詳細・ペルソナアーカイブ共通 */
.prep-speech-container {
    font-size: var(--font-size-l) !important;        /* 1rem → 1.25rem (20px) */
    font-weight: var(--font-weight-regular) !important; /* Noto Sans JP 400 */
    letter-spacing: 0.02em;                          /* 文字詰めを少し緩く */
}

.prep-speech-container p {
    margin-bottom: var(--spacing-32) !important;     /* 段落間を2rem (32px) */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .prep-speech-container {
        font-size: var(--font-size-m) !important;    /* スマホでは1rem */
    }
    
    .prep-speech-container p {
        margin-bottom: var(--spacing-24) !important; /* スマホでは1.5rem */
    }
}

/* ========== PREPビューモードコンポーネント ========== */
/* PREPビューモード時のハイライト - ペルソナアーカイブ・記事ページ共通 */
.prep-view-mode .prep-p1,
.prep-view-mode .prep-reason,
.prep-view-mode .prep-example,
.prep-view-mode .prep-p2 {
    position: relative;
    transition: all 0.3s ease;
    border-radius: 3px;
    padding: 8px 12px;
    margin: 4px 0;
    cursor: pointer;
}

.prep-view-mode .prep-p1 {
    background-color: var(--color-prep-point1-bg);
    border-left: 3px solid var(--color-prep-point1);
}

.prep-view-mode .prep-p1::before {
    content: "Point1";
    position: absolute;
    top: -20px;
    left: 0;
    background: var(--color-prep-point1);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.prep-view-mode .prep-reason {
    background-color: var(--color-prep-reason-bg);
    border-left: 3px solid var(--color-prep-reason);
}

.prep-view-mode .prep-reason::before {
    content: "Reason";
    position: absolute;
    top: -20px;
    left: 0;
    background: var(--color-prep-reason);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.prep-view-mode .prep-example {
    background-color: var(--color-prep-example-bg);
    border-left: 3px solid var(--color-prep-example);
}

.prep-view-mode .prep-example::before {
    content: "Example";
    position: absolute;
    top: -20px;
    left: 0;
    background: var(--color-prep-example);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.prep-view-mode .prep-p2 {
    background-color: var(--color-prep-point2-bg);
    border-left: 3px solid var(--color-prep-point2);
}

.prep-view-mode .prep-p2::before {
    content: "Point2";
    position: absolute;
    top: -20px;
    left: 0;
    background: var(--color-prep-point2);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.prep-view-mode .prep-p1:hover::before,
.prep-view-mode .prep-reason:hover::before,
.prep-view-mode .prep-example:hover::before,
.prep-view-mode .prep-p2:hover::before {
    opacity: 1;
}

.prep-view-mode .prep-p1:hover,
.prep-view-mode .prep-reason:hover,
.prep-view-mode .prep-example:hover,
.prep-view-mode .prep-p2:hover {
    opacity: 0.8;
    transform: scale(1.01);
}

/* ========== スピーチコンテンツ表示切り替え（汎用） ========== */
/* 1分・3分スピーチの初期表示状態 - ペルソナアーカイブ・記事詳細ページ共通 */
.speech-content.speech-1min {
    display: block;
}

.speech-content.speech-3min {
    display: none;
}

/* ========== コントロールグループ（トグルボタン横並び配置） ========== */
.speech-controls-group {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* ========== URLコピーボタン ========== */
.url-copy-container {
    display: flex;
    align-items: center;
}

.url-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px;
}

.url-copy-btn:hover {
    transform: scale(1.1);
}

.url-copy-btn:active {
    transform: scale(0.9);
}

.url-copy-btn.copied .url-icon {
    filter: hue-rotate(120deg) saturate(1.5) brightness(0.8);
}

.url-icon {
    width: 24px;
    height: 24px;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.url-copy-btn:hover .url-icon {
    opacity: 1;
}

/* ========== トーストメッセージ ========== */
.copy-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 300px;
    word-wrap: break-word;
}

.copy-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.copy-toast-success {
    background: linear-gradient(135deg, #4caf50, #45a049);
}

.copy-toast-error {
    background: linear-gradient(135deg, #f44336, #d32f2f);
}

/* モバイル対応 */
@media (max-width: 768px) {
    .copy-toast {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
        font-size: 13px;
        padding: 10px 16px;
    }
}

/* ========== モバイル対応 ========== */
@media (max-width: 768px) {
    .speech-controls-group {
        gap: 8px;
    }
    
    .url-copy-btn {
        width: 32px;
        height: 32px;
        padding: 4px;
    }
    
    .url-icon {
        width: 22px;
        height: 22px;
    }
}

/* ========== トグルボタンデザイン（共通） ========== */
.speech-toggle, .prep-toggle {
    display: flex;
    background: var(--color-bg-section);
    border-radius: 25px;
    padding: 4px;
    border: 1px solid var(--color-border);
}

/* 時間切り替えボタンの専用スタイル（デフォルトのピンク色を維持） */
.speech-toggle .toggle-btn.active {
    background: var(--color-pink) !important;
    color: white !important;
    opacity: 1;
}

/* PREPビュー切り替えボタンの専用スタイル */
.prep-toggle .toggle-btn.active {
    background: var(--color-prep-toggle) !important;
    color: white !important;
    opacity: 1;
}


/* ========== SNSシェアボタン ========== */
.social-share-section {
    /* margin and padding removed */
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-16);
    align-items: center;
    margin: var(--spacing-24) 0;
}

.share-text {
    color: var(--text-primary);
    font-size: var(--font-size-m);
    font-weight: 600;
    margin-right: var(--spacing-8);
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    font-size: var(--font-size-l);
    transition: transform 0.2s ease;
}

.share-btn:hover {
    transform: scale(1.1);
}

.share-btn.twitter { background: var(--color-black); color: var(--color-white); }
.share-btn.facebook { background: var(--color-black); color: var(--color-white); }
.share-btn.line { background: var(--color-black); color: var(--color-white); }
.share-btn.linkedin { background: var(--color-black); color: var(--color-white); }

/* ========== ナビゲーションボタンスタイル ========== */
.navigation-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-16);
}

.nav-item {
    display: flex;
    justify-content: center;
}



.nav-direction {
    font-size: var(--font-size-ss);
    opacity: 0.8;
}

.nav-title {
    font-size: var(--font-size-s);
    font-weight: 500;
    display: none;
}

/* ========== ポストナビゲーションセクション余白 ========== */
.post-navigation-section {
    padding: var(--spacing-64) 0; /* 4rem = 64px 上下（margin相殺回避） */
    border-top: 1px solid var(--color-border);
}

/* ========== スピーチカード ========== */
.speech-card {
    margin-bottom: var(--spacing-32) !important;
}

/* ========== ペルソナヘッダーの横並び配置 ========== */
.speech-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0.5rem;
    gap: var(--spacing-16);
}

/* ========== ペルソナカードリンク ========== */
.persona-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
}

.persona-card-link:hover {
    /* ホバー時も背景色を維持 */
    background: var(--color-white) !important;
}

.persona-card-link:hover .persona-intro-compact,
.persona-card-link:hover .persona-intro-homepage,
.persona-card-link:hover .persona-intro-simple {
    /* カード内のペルソナ紹介部分の背景も維持 */
    background: var(--color-white) !important;
}

/* ========== レスポンシブ対応（小画面） ========== */
@media (max-width: 768px) {
    /* ポストナビゲーションセクション - スマホ用 */
    .post-navigation-section {
        padding: var(--spacing-48) 0;
    }
    
    /* ナビゲーションボタン - スマホ用 */
    .nav-btn {
    }
    
    /* セクションタイトル - スマホ用 */
    .section-title {
        font-size: var(--font-size-l);
    }
    
    .persona-name {
        font-size: var(--font-size-s);
    }
    
    /* スマホ用：ヘッダーコンテンツを縦並びに調整（ペルソナ情報とコントロールを2段に） */
    .speech-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-16);
    }
    
    /* スマホ用：ペルソナ情報内も左揃えに */
    .speech-header-content .persona-intro-simple {
        width: 100%;
        text-align: left;
    }
    
    .speech-header-content .persona-intro-simple .flex {
        justify-content: flex-start;
        align-items: center;
    }
    
    /* 詳細記事ページ：スピーチヘッダーのpadding調整（下のみ残す） */
    .speech-card .speech-header-content {
        padding: 0 0 1.5rem 0 !important;
    }
}