/* V2 Main Styles */
/* UNCOMMENTED:
 * V2システム専用のスタイルシート
 * 既存システムには一切影響を与えません
 */

/* ================================================================
 * 上部タブナビゲーション（2段階構造）
 * ================================================================ */

/* タブコンテナ全体 */
#v2-top-tabs-container {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 級選択タブ（メインタブ） */
#v2-grade-tabs {
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
}

/* MY pageボタン（左側固定） */
.v2-mypage-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 44px;  /* 高さを少し縮小 */
    background: #fff;
    border: 2px solid #333;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.2;
    transition: all 0.3s ease;
    z-index: 10;
}

.v2-mypage-btn:hover {
    background: #D75A30;
    border-color: #D75A30;
    color: #fff;
}

.v2-mypage-btn .mypage-top {
    display: block;
    font-size: 13px;
}

.v2-mypage-btn .mypage-bottom {
    display: block;
    font-size: 10px;
}


/* 削除: 旧タブスタイル（ドロップダウンに変更されたため不要） */

/* 級選択ドロップダウン */
.v2-grade-selector {
    position: relative;
    margin-left: 70px; /* MY pageボタンの右側に配置 */
}

.v2-grade-selector-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fff;
    border: 2px solid #D75A30;
    border-radius: 6px;
    color: #D75A30;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 180px;
}

.v2-grade-selector-btn:hover {
    background: #D75A30;
    color: #fff;
}

.v2-dropdown-icon {
    font-size: 10px;
    transition: transform 0.3s ease;
}

/* 級選択モーダル */
.v2-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.v2-modal-content {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #fff5f0 100%);
    border-radius: 16px;
    padding: 15px;
    max-width: 400px;
    width: 90%;
    max-height: 90vh;
    height: fit-content; /* 追加: 高さを中身に合わせる */
    margin: auto;        /* 追加: 中央揃えの保険 */
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(215, 90, 48, 0.3);
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.v2-modal-title {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, #D75A30 0%, #ff6b47 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    margin: 0 0 15px 0;
}

.v2-grade-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;  /* 縮小しない */
}

.v2-grade-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 3px solid #e0e0e0;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-size: 17px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.v2-grade-option:hover {
    background: linear-gradient(135deg, #fff 0%, #fffaf7 100%);
    border-color: #ff6b47;
    color: #D75A30;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(215, 90, 48, 0.3);
}

.v2-grade-option.active {
    background: linear-gradient(135deg, #ff6b47 0%, #D75A30 100%);
    border-color: #D75A30;
    color: #fff;
    box-shadow: 0 6px 20px rgba(215, 90, 48, 0.4);
}

.v2-option-label {
    text-align: center;
}

.v2-check-mark {
    position: absolute;
    right: 20px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.v2-grade-option:not(.active) .v2-check-mark {
    display: none;
}

.v2-modal-close-btn {
    display: block;
    width: 100%;
    padding: 14px;
    margin: 0;  /* すべてのマージンを0に */
    background: linear-gradient(135deg, #7c7c7c 0%, #5a5a5a 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;  /* 縮小しない */
}

.v2-modal-close-btn:hover {
    background: linear-gradient(135deg, #333 0%, #000 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* セクション選択タブ（サブタブ） */
#v2-section-tabs {
    background: #fff;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

#v2-section-tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

#v2-section-tabs ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
    min-width: max-content;
}

#v2-section-tabs li {
    margin: 0;
    flex-shrink: 0;
}

#v2-section-tabs a {
    display: block;
    padding: 14px 20px;
    text-decoration: none;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    text-align: center;
}

#v2-section-tabs a:hover {
    color: #D75A30;
    background: rgba(215, 90, 48, 0.05);
}

#v2-section-tabs li.active a {
    color: #D75A30;
    font-weight: 700;
    border-bottom-color: #D75A30;
}

/* 「アナタが伸びる理由！」タブを金色に（黒ボタンスタイル） */
#v2-section-tabs a[href*="grow-up"] {
    background: #1a1a1a !important; /* 高級感のある黒背景 */
    color: #F5E5A6 !important; /* 金色の文字 */
    font-weight: bold;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    margin: 4px !important;
    border: 1px solid #D4AF37 !important; /* 金色の枠線 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
    /* 悪さをしていた透明化・グラデーション設定をリセット */
    -webkit-text-fill-color: initial !important;
    background-clip: border-box !important;
    filter: none !important;
    transition: all 0.3s ease !important;
}

#v2-section-tabs a[href*="grow-up"]:hover {
    background: #000 !important;
    color: #FFF !important;
    border-color: #F5E5A6 !important;
    transform: translateY(-2px);
}

#v2-section-tabs li.active a[href*="grow-up"] {
    border-bottom: none !important;
}

/* 悪さをしていた黒背景の擬似要素を完全に無効化 */
#v2-section-tabs a[href*="grow-up"]::before {
    display: none !important;
}

/* モバイル対応 */
@media (max-width: 768px) {
    #v2-grade-tabs a {
        font-size: 13px;
        padding: 10px 15px;
    }

    #v2-section-tabs a {
        font-size: 13px;
        padding: 12px 16px;
    }
}

/* 極小画面対応 */
@media (max-width: 480px) {
    #v2-grade-tabs a {
        font-size: 12px;
        padding: 8px 12px;
    }

    #v2-section-tabs a {
        font-size: 12px;
        padding: 10px 14px;
    }
}

/* PC/タブレット対応 - テキストサイズ調整、レスポンシブで1行収まる */
@media (min-width: 769px) {
    #v2-section-tabs a {
        font-size: clamp(15px, 1.9vw, 21px);
        padding: 14px 20px;
    }
}

/* スワイプインジケーター（モバイル） */
@media (max-width: 768px) {
    /* 級選択セレクタを中央揃え */
    .v2-grade-selector {
        margin-left: 0;
        margin: 0 auto;
    }

    /* アニメーション定義 */
    @keyframes swipe-hint {
        0%, 100% {
            transform: translateY(-50%) translateX(0);
            opacity: 1;
        }
        50% {
            transform: translateY(-50%) translateX(5px);
            opacity: 0.7;
        }
    }

    #v2-section-tabs::after {
        content: '→';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 10px;
        color: #D75A30;
        font-size: 18px;
        pointer-events: none;
        background: linear-gradient(to right, transparent, #fff 30%);
        width: 40px;
        text-align: right;
        animation: swipe-hint 1.5s ease-in-out infinite;
        transition: opacity 0.3s ease;
    }

    /* スクロール終端に達したら非表示 */
    #v2-section-tabs.scrolled-end::after {
        display: none;
    }

    /* ユーザーが一度スワイプしたら非表示（JSでクラス追加） */
    #v2-section-tabs.swipe-hint-dismissed::after {
        display: none;
    }
}

/* ================================================================
 * 旧下部ナビゲーション（後方互換性のため残す）
 * ================================================================ */
#v2-bottom-nav {
    display: none; /* 上部タブに移行したため非表示 */
}

/* ================================================================
 * セクション内サブタブ（3段階目）
 * ================================================================ */
.v2-subsection-tabs {
    background: #fff;
    border-bottom: 2px solid #e0e0e0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    margin: 0;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.v2-subsection-tabs ul {
    display: flex;
    justify-content: center;
    align-items: stretch;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 1200px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.v2-subsection-tabs li {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1;
    min-width: 0;
}

.v2-subsection-tabs li::before,
.v2-subsection-tabs li::after {
    display: none !important;
    content: none !important;
}

.v2-subsection-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0 !important;
    padding: 10px 5px;
    text-decoration: none;
    color: #000;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.v2-subsection-tabs a:hover {
    color: #D75A30;
    background: rgba(215, 90, 48, 0.05);
}

.v2-subsection-tabs li.active a {
    color: #D75A30;
    font-weight: 700;
    border-bottom-color: #D75A30;
    width: 100%;
}

/* サブタブコンテンツエリア */
.v2-tab-content {
    display: none;
}

.v2-tab-content.active {
    display: block;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .v2-subsection-tabs a {
        font-size: 13px;
        padding: 14px 5px !important;
    }
}

@media (max-width: 480px) {
    .v2-subsection-tabs a {
        font-size: 12px;
        padding: 12px 5px !important;
    }
}

/* PC/タブレット対応 - 中央揃え、上下幅2倍、テキストサイズ調整、レスポンシブで1行収まる */
@media (min-width: 769px) {
    .v2-subsection-tabs ul {
        justify-content: center;
    }
    .v2-subsection-tabs a {
        font-size: clamp(15px, 2.1vw, 22px);
        padding: 20px 10px !important;
    }
}

/* コンテンツが下部タブに隠れないよう余白追加 */
.v2-reading-home,
.v2-listening-home,
.v2-writing-home,
.v2-vocab-home {
    padding-bottom: 80px;
}

/* ================================================================
 * 単語セクション: プレイボタンと透過UI
 * ================================================================ */
#vocab-stats-container {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

#vocab-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.vocab-stat-card {
    background: white;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.vocab-stat-card h3 {
    font-size: 14px;
    color: #666;
    margin: 0 0 10px 0;
}

.vocab-stat-card .number {
    font-size: 24px;
    font-weight: 700;
    color: #D75A30;
}

/* リストコンテナ（初期状態: 高さ制限 + 透過オーバーレイ） */
#vocab-list-wrapper {
    position: relative;
    margin-top: 30px;
}

#vocab-list-container {
    max-height: 300px;
    overflow: hidden;
    position: relative;
}

#vocab-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

#vocab-play-button {
    background: #D75A30;
    color: white;
    font-size: 20px;
    font-weight: 700;
    padding: 20px 50px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(215, 90, 48, 0.4);
    transition: all 0.3s ease;
}

#vocab-play-button:hover {
    background: #c14a24;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(215, 90, 48, 0.6);
}

/* スマホ対応 */
@media (max-width: 768px) {
    #vocab-stats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #vocab-play-button {
        font-size: 18px;
        padding: 15px 40px;
    }
}

/* ================================================================
 * リーディング・リスニング: プログレスカード
 * ================================================================ */

/* セクションタイトル */
.v2-section-title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    border-bottom: 2px solid #333;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

/* プログレスカード */
.v2-progress-card {
    background: transparent;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px 20px 20px 20px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.v2-progress-card:hover {
    background: transparent;
    border-color: #444;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* プログレスヘッダー */
.v2-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.v2-progress-title {
    color: #000;
    font-size: 16px;
    font-weight: 700;
}

.v2-progress-pct {
    color: #aaa;
    font-size: 14px;
    font-weight: 600;
}

/* プログレスバー */
.v2-progress-bar-bg {
    background: #222;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 14px;
}

.v2-progress-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* プレイボタン */
.v2-play-btn {
    display: block;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.v2-play-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: scale(1.02);
}

/* エラーメッセージ */
.v2-error {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #fca5a5;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    margin: 20px 0;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .v2-section-title {
        font-size: 18px;
    }

    .v2-progress-card {
        padding: 16px;
    }

    .v2-progress-title {
        font-size: 14px;
    }

    .v2-progress-pct {
        font-size: 12px;
    }

    .v2-progress-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* ========================================
   マイページ - カレンダー
   ======================================== */

.v2-mypage-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

@media (max-width: 768px) {
    .v2-mypage-container {
        padding: 0 !important;
        margin: 0 !important;
    }
}

.v2-calendar-wrapper {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 30px;
    margin: 20px 0;
    overflow-x: auto;
}

.v2-calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 800px;
}

.v2-calendar-months {
    display: flex;
    gap: 10px;
    padding-left: 30px;
    margin-bottom: 10px;
}

.v2-month-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    min-width: 60px;
}

.v2-calendar-weeks {
    display: flex;
    gap: 3px;
}

.v2-calendar-week {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.v2-cal-cell {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.v2-cal-cell:hover {
    transform: scale(1.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.v2-cal-level-0 {
    background: rgba(255, 255, 255, 0.05);
}

.v2-cal-level-1 {
    background: rgba(34, 197, 94, 0.3);
}

.v2-cal-level-2 {
    background: rgba(34, 197, 94, 0.5);
}

.v2-cal-level-3 {
    background: rgba(34, 197, 94, 0.7);
}

.v2-cal-level-4 {
    background: rgba(34, 197, 94, 0.9);
}

.v2-calendar-legend {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.v2-legend-label {
    font-weight: 600;
}

.v2-legend-items {
    display: flex;
    gap: 12px;
}

.v2-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.v2-legend-item .v2-cal-cell {
    cursor: default;
}

/* ========================================
   マイページ - レベリングロードマップ
   ======================================== */

.v2-leveling-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.v2-leveling-summary {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 30px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 40px;
}

.v2-level-badge {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(147, 51, 234, 0.3));
    border-radius: 12px;
    min-width: 120px;
}

.v2-level-number {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}

.v2-level-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.v2-total-progress {
    flex: 1;
}

.v2-progress-label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
}

.v2-progress-bar-outer {
    width: 100%;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.v2-progress-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.8), rgba(147, 51, 234, 0.8));
    border-radius: 10px;
    transition: width 0.5s ease;
}

.v2-progress-text {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.v2-radar-chart-wrapper {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 30px;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.v2-skill-breakdown {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 30px;
    margin: 20px 0;
}

.v2-skill-breakdown h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.v2-skill-item {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.v2-skill-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.v2-skill-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.v2-skill-icon {
    font-size: 24px;
}

.v2-skill-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    flex: 1;
}

.v2-skill-level {
    font-size: 14px;
    font-weight: 700;
    color: rgba(59, 130, 246, 0.9);
    background: rgba(59, 130, 246, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
}

.v2-skill-progress {
    display: flex;
    align-items: center;
    gap: 15px;
}

.v2-skill-progress .v2-progress-bar-outer {
    flex: 1;
    height: 12px;
    margin-bottom: 0;
}

.v2-skill-stats {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    min-width: 100px;
    text-align: right;
}

.v2-login-required {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
}

/* スマホ対応 - マイページ */
@media (max-width: 768px) {
    .v2-calendar-wrapper {
        padding: 15px;
    }

    .v2-calendar-grid {
        min-width: 600px;
    }

    .v2-leveling-summary {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .v2-level-badge {
        width: 100%;
    }

    .v2-radar-chart-wrapper {
        padding: 20px;
    }

    .v2-skill-breakdown {
        padding: 20px;
    }

    .v2-skill-progress {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .v2-skill-stats {
        text-align: left;
    }
}

/* ========================================
   ライティング・スピーキング
   ======================================== */

.v2-writing-home,
.v2-speaking-home {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 20px 0;
}

.v2-writing-section,
.v2-speaking-section {
    margin: 30px 0;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 20px;
}

.v2-subsection-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

/* ライティング履歴テーブルのスタイル調整 */
.v2-writing-history {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 20px;
    overflow-x: auto;
}

.v2-writing-history table {
    width: 100%;
    border-collapse: collapse;
}

.v2-writing-history th,
.v2-writing-history td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.v2-writing-history th {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 600;
}

.v2-writing-history td {
    color: rgba(255, 255, 255, 0.9);
}

/* スピーキングイントロ */
.v2-speaking-intro {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.v2-speaking-intro p {
    color: rgba(255, 255, 255, 0.9);
    margin: 8px 0;
    line-height: 1.6;
}

/* スピーキングリンク */
.v2-speaking-link {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
}

.v2-speaking-main-btn {
    display: inline-block;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(147, 51, 234, 0.9));
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    padding: 16px 40px;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.v2-speaking-main-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 1), rgba(147, 51, 234, 1));
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}

.v2-speaking-note {
    margin-top: 15px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* スピーキングシナリオ（使わない） */
.v2-speaking-scenarios {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 20px;
}

.v2-scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.v2-scenario-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.v2-scenario-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.v2-scenario-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px 0;
}

.v2-scenario-excerpt {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0 0 15px 0;
}

.v2-scenario-btn {
    display: inline-block;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(147, 51, 234, 0.8));
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.v2-scenario-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 1), rgba(147, 51, 234, 1));
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

/* スピーキング履歴テーブル */
.v2-speaking-history-table {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 20px;
    overflow-x: auto;
}

.v2-table {
    width: 100%;
    border-collapse: collapse;
    color: rgba(255, 255, 255, 0.9);
}

.v2-table th,
.v2-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.v2-table th {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.v2-table td {
    font-size: 13px;
}

.v2-table tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

.v2-no-data {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* 既存のAI添削フォームとの統合 */
.v2-writing-home .ai-writers-form,
.v2-writing-home .modal-overlay {
    font-family: inherit;
}

.v2-writing-home .ai-writers-form input,
.v2-writing-home .ai-writers-form textarea,
.v2-writing-home .ai-writers-form select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 8px;
    padding: 10px;
}

.v2-writing-home .ai-writers-form button {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(147, 51, 234, 0.8));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.v2-writing-home .ai-writers-form button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

/* スマホ対応 - ライティング・スピーキング */
@media (max-width: 768px) {
    .v2-writing-home,
    .v2-speaking-home {
        padding: 15px;
    }

    .v2-subsection-title {
        font-size: 16px;
    }

    .v2-writing-history,
    .v2-speaking-history-table {
        padding: 15px;
    }

    .v2-table {
        font-size: 12px;
    }

    .v2-table th,
    .v2-table td {
        padding: 8px 4px;
    }
}

/* ================================================================
 * 級切り替えタブ（マイページ用）
 * ================================================================ */
.v2-grade-switcher {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.v2-grade-tab {
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.v2-grade-tab:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.v2-grade-tab.active {
    opacity: 1;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

@media (max-width: 768px) {
    .v2-grade-tab {
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* ================================================================
 * ライティングセクション：既存システムとの共存用Wrapper
 * ================================================================ */

/* skill-practiceショートコード用のWrapper */
.v2-skill-practice-wrapper {
    margin: 20px 0;
    padding: 0;
    /* 既存のskill-practice.cssスタイルを継承 */
}

/* skill-listの表示を調整 */
.v2-skill-practice-wrapper .skill-list-container {
    background: transparent;
    padding: 0;
}

.v2-skill-practice-wrapper .skill-list-title {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
}

/* スコア表示用のWrapper */
.v2-scores-wrapper {
    margin: 20px 0;
    padding: 0;
}

/* 無料ユーザー向けメッセージスタイル */
.v2-free-user-message {
    background: #f0f9ff;
    border: 2px dashed #0ea5e9;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
}

.v2-free-user-message p {
    font-size: 16px;
    color: #0c4a6e;
    font-weight: bold;
    margin: 0 0 10px 0;
}

.v2-free-user-message .v2-play-btn {
    display: inline-block;
    margin-top: 10px;
}

/* 空の状態（履歴なし）のスタイル */
.v2-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.v2-empty-state p {
    margin: 0;
}

.v2-empty-state p:first-child {
    font-size: 16px;
}

.v2-empty-state p:last-child {
    font-size: 14px;
    margin-top: 10px;
}

/* ライティング統計サマリー */
.v2-writing-stats-summary {
    margin-top: 30px;
}

.v2-writing-stats-summary h4 {
    margin: 30px 0 15px 0;
    font-size: 18px;
    color: #333;
    font-weight: bold;
}

/* ================================================================
 * 基礎コース: ロードマップスタイル
 * ================================================================ */

/* 基礎コースイントロ */
.v2-foundation-intro {
    background: #f0fdf4;
    border-left: 4px solid #22c55e;
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 4px;
}

.v2-foundation-intro p {
    margin: 0;
    color: #166534;
    font-size: 14px;
}

/* ロードマップ */
.v2-roadmap {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.v2-roadmap-step {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.v2-roadmap-step:hover {
    border-color: #22c55e;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.1);
}

.v2-roadmap-step.completed {
    background: #f0fdf4;
    border-color: #22c55e;
}

.v2-roadmap-number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    color: #6b7280;
}

.v2-roadmap-step.completed .v2-roadmap-number {
    background: #22c55e;
    color: white;
}

.v2-roadmap-content {
    flex: 1;
}

.v2-roadmap-content h4 {
    margin: 0 0 5px 0;
    font-size: 18px;
    color: #111827;
}

.v2-roadmap-content p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

.v2-roadmap-step.completed .v2-roadmap-content h4 {
    color: #166534;
}

.v2-roadmap-step.completed .v2-roadmap-content p {
    color: #166534;
}

/* 基礎コース次へのリンク */
.v2-foundation-next {
    margin-top: 30px;
    text-align: center;
}

.v2-foundation-link {
    margin-top: 30px;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .v2-roadmap-step {
        padding: 15px;
    }

    .v2-roadmap-number {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .v2-roadmap-content h4 {
        font-size: 16px;
    }

    .v2-roadmap-content p {
        font-size: 13px;
    }
}

/* ================================================================
 * V2ページでは既存のテーマフッターを完全に非表示にする
 * ================================================================ */
footer,
#footer,
.site-footer,
#footer-top,
.footer-wrap {
    display: none !important;
}

/* ================================================================
 * V2ページでヘッダー要素を非表示（級別モード + 基礎コース共通）
 * URL ベースの body_class (is-v2-system-page) を使用
 * ================================================================ */
body.is-v2-system-page #logo,
body.is-v2-system-page .search_btn,
body.is-v2-system-page .nav_btn,
body.is-v2-system-page header,
body.is-v2-system-page .site-header,
body.is-v2-system-page #header,
body.is-v2-system-page #inner-header,
body.is-v2-system-page header .header,
body.is-v2-system-page .g_nav-sp {
    display: none !important;
    visibility: hidden !important;
}

/* V2ページでメインナビゲーション（.g_nav-sp）をスティッキー固定 */

/* ================================================================
 * クイズページでヘッダー・フッターを非表示
 * ================================================================ */
body.single-email_quiz header,
body.single-email_quiz #header,
body.single-email_quiz .site-header,
body.single-email_quiz #logo,
body.single-email_quiz .search_btn,
body.single-email_quiz .nav_btn,
body.single-email_quiz footer,
body.single-email_quiz #footer,
body.single-email_quiz .site-footer,
body.single-eiken_quiz header,
body.single-eiken_quiz #header,
body.single-eiken_quiz .site-header,
body.single-eiken_quiz #logo,
body.single-eiken_quiz .search_btn,
body.single-eiken_quiz .nav_btn,
body.single-eiken_quiz footer,
body.single-eiken_quiz #footer,
body.single-eiken_quiz .site-footer,
body.single-reading_quiz header,
body.single-reading_quiz #header,
body.single-reading_quiz .site-header,
body.single-reading_quiz #logo,
body.single-reading_quiz .search_btn,
body.single-reading_quiz .nav_btn,
body.single-reading_quiz footer,
body.single-reading_quiz #footer,
body.single-reading_quiz .site-footer,
body.single-passage_quiz header,
body.single-passage_quiz #header,
body.single-passage_quiz .site-header,
body.single-passage_quiz #logo,
body.single-passage_quiz .search_btn,
body.single-passage_quiz .nav_btn,
body.single-passage_quiz footer,
body.single-passage_quiz #footer,
body.single-passage_quiz .site-footer,
body.single-listening_conv header,
body.single-listening_conv #header,
body.single-listening_conv .site-header,
body.single-listening_conv #logo,
body.single-listening_conv .search_btn,
body.single-listening_conv .nav_btn,
body.single-listening_conv footer,
body.single-listening_conv #footer,
body.single-listening_conv .site-footer,
body.single-listening_dialog header,
body.single-listening_dialog #header,
body.single-listening_dialog .site-header,
body.single-listening_dialog #logo,
body.single-listening_dialog .search_btn,
body.single-listening_dialog .nav_btn,
body.single-listening_dialog footer,
body.single-listening_dialog #footer,
body.single-listening_dialog .site-footer,
body.single-listening_mono header,
body.single-listening_mono #header,
body.single-listening_mono .site-header,
body.single-listening_mono #logo,
body.single-listening_mono .search_btn,
body.single-listening_mono .nav_btn,
body.single-listening_mono footer,
body.single-listening_mono #footer,
body.single-listening_mono .site-footer,
body.single-listening_sit header,
body.single-listening_sit #header,
body.single-listening_sit .site-header,
body.single-listening_sit #logo,
body.single-listening_sit .search_btn,
body.single-listening_sit .nav_btn,
body.single-listening_sit footer,
body.single-listening_sit #footer,
body.single-listening_sit .site-footer {
    display: none !important;
    visibility: hidden !important;
}

/* クイズページで section.entry-content.cf の ::after 疑似要素を非表示 */
body.single-email_quiz section.entry-content.cf::after,
body.single-eiken_quiz section.entry-content.cf::after,
body.single-reading_quiz section.entry-content.cf::after,
body.single-passage_quiz section.entry-content.cf::after,
body.single-listening_conv section.entry-content.cf::after,
body.single-listening_dialog section.entry-content.cf::after,
body.single-listening_mono section.entry-content.cf::after,
body.single-listening_sit section.entry-content.cf::after {
    display: none !important;
    content: none !important;
}

/* ================================================================
 * クイズページの大元の背景色を白系に強制（紫色の背景が透けて見えるのを防ぐ）
 * WordPressの body クラスを使用して確実に適用する
 * ================================================================ */
html.single-email_quiz, body.single-email_quiz,
html.single-eiken_quiz, body.single-eiken_quiz,
html.single-reading_quiz, body.single-reading_quiz,
html.single-passage_quiz, body.single-passage_quiz,
html.single-listening_conv, body.single-listening_conv,
html.single-listening_dialog, body.single-listening_dialog,
html.single-listening_mono, body.single-listening_mono,
html.single-listening_sit, body.single-listening_sit {
    background-color: #fafaf8 !important;
    background-image: none !important;
}

body.single-email_quiz #container, body.single-email_quiz #inner-content, body.single-email_quiz #main,
body.single-eiken_quiz #container, body.single-eiken_quiz #inner-content, body.single-eiken_quiz #main,
body.single-reading_quiz #container, body.single-reading_quiz #inner-content, body.single-reading_quiz #main,
body.single-passage_quiz #container, body.single-passage_quiz #inner-content, body.single-passage_quiz #main,
body.single-listening_conv #container, body.single-listening_conv #inner-content, body.single-listening_conv #main,
body.single-listening_dialog #container, body.single-listening_dialog #inner-content, body.single-listening_dialog #main,
body.single-listening_mono #container, body.single-listening_mono #inner-content, body.single-listening_mono #main,
body.single-listening_sit #container, body.single-listening_sit #inner-content, body.single-listening_sit #main {
    background-color: #fafaf8 !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* クイズ全体を最低でも画面の高さ分まで伸ばして下を塞ぐ */
.ldial-wrap,
.lquiz-wrap,
.lconv-wrap,
.lmono-wrap,
.lsit-wrap,
.email-quiz-wrap,
.eiken-quiz-wrap,
.reading-quiz-wrap,
.passage-quiz-wrap {
    min-height: 100vh !important;
    background-color: #fafaf8 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* V2ページでページタイトルとセクションタイトルを非表示 */
body.is-v2-system-page h1.entry-title.page-title,
body.is-v2-system-page h2.v2-section-title {
    display: none !important;
}

/* 単語ページの進捗状況タイトルと総合進捗・品詞別進捗を非表示 */
body.is-v2-system-page #vocab-stats-container > h2,
body.is-v2-system-page #vocab-stats-container h3 {
    display: none !important;
}

/* 親テーマによる sticky 無効化（overflow: hidden）を解除 */
body,
body.page-id-40785,
body[class*="page-id-407"] {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* ================================================================
 * V2クイズネイティブコンテナ: Jstorkテーマの高さ制限を破壊
 * ================================================================ */
.v2-vocab-quiz-native-container {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 80vh !important;
    overflow: visible !important;
}

/* 親要素（Jstorkのメイン枠）の高さ制限を無効化 */
body:has(.v2-vocab-quiz-native-container) #main,
body:has(.v2-vocab-quiz-native-container) .wrap,
body:has(.v2-vocab-quiz-native-container) #inner-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 選択肢をGridからFlexに変更（レンダリング漏れ対策） */
.v2-vocab-quiz-native-container .vocab-pool-choices {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    justify-content: space-between !important;
}

.v2-vocab-quiz-native-container .vocab-pool-choice-btn {
    flex: 0 0 calc(50% - 8px) !important;
    min-height: 90px !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 480px) {
    .v2-vocab-quiz-native-container .vocab-pool-choice-btn {
        flex: 0 0 calc(50% - 8px) !important;
    }
}

/* ================================================================
 * V2単語リストの高さ制限（300px）をクイズ画面では強制解除
 * ================================================================ */
#vocab-list-container:has(.vocab-pool-quiz-wrap),
#vocab-list-container:has(.v2-vocab-quiz-native-container) {
    max-height: none !important;
    overflow: visible !important;
}

/* ================================================================
 * クイズプレイ中の没入モード（ヘッダー非表示）
 * ================================================================ */
body.vp-quiz-playing #v2-top-tabs-container {
    display: none !important;
}

/* ================================================================
 * 単語クイズプレイ中・リザルト画面ではサブタブを非表示（スマホ・PC共通）
 * PHP付与のクラス(is-vocab-quiz-page)を最優先とし、:has()未対応ブラウザを救済
 * ================================================================ */
body.is-vocab-quiz-page .v2-subsection-tabs,
body:has(.v2-vocab-quiz-native-container) .v2-subsection-tabs {
    display: none !important;
}

/* ================================================================
 * V2タブ内では級選択selectを非表示（品詞・優先度タブは残す）
 * ================================================================ */
.v2-tab-content .vwl-level-select {
    display: none !important;
}

/* 級選択を確実に非表示（優先度を最大に） */
#vocab-word-list .vwl-level-select,
#vocab-list-container .vwl-level-select,
.v2-tab-content .vwl-header .vwl-level-select {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 基礎モード: タブが2つの時は2カラム表示 */
/* タブが2つの場合でも幅を自動調整（テキストが見切れないように） */
#v2-section-tabs li:nth-last-child(2):first-child,
#v2-section-tabs li:nth-last-child(2):first-child ~ li {
    flex: 1 1 auto;
    max-width: none;
    min-width: max-content;
}


/* ================================================================
 * V2用 skill-level-box スマホUI最適化
 * ================================================================ */

/* V2ページではarticle-headerを非表示 */
.v2-writing-home .article-header,
.v2-reading-home .article-header,
.v2-listening-home .article-header,
.v2-vocab-home .article-header,
.v2-speaking-home .article-header,
.article-header.entry-header {
    display: none !important;
}

/* V2ページではentry-contentの上部マージン/パディングを削除 */
.entry-content .v2-writing-home,
.entry-content .v2-reading-home,
.entry-content .v2-listening-home,
.entry-content .v2-vocab-home,
.entry-content .v2-speaking-home {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.entry-content.cf,
#inner-content,
.m-all.t-all {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* V2ページのメインコンテンツエリアの上部余白を削除 */
.v2-writing-home,
.v2-reading-home,
.v2-listening-home,
.v2-vocab-home,
.v2-speaking-home {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* v2-section-titleの上部マージンも削除 */
.v2-section-title {
    margin-top: 0 !important;
}

/* スキルリストタブとスコアタブの背景を透明に */
#writing-skill-list .v2-writing-section,
#writing-scores .v2-writing-section,
#reading-skill-list .v2-reading-section,
#listening-skill-list .v2-listening-section {
    background: transparent;
    padding: 10px 0;
}

/* AI添削タブの横幅100% */
#writing-ai-correction {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

#writing-ai-correction .v2-writing-section {
    background: transparent;
    padding: 0;
    margin: 0;
}

/* V2用のskill-roadmapコンテナ */
.v2-skill-roadmap {
    position: relative;
    padding: 0;
    margin-bottom: 20px;
}

/* V2で1つの級のみを表示する場合のスタイル調整 */
.v2-skill-roadmap .skill-level-box.v2-single-level {
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* course-tag-badge のスタイル（ピンクのグラデーション） */
.v2-skill-roadmap .course-tag-badge {
    display: inline-block;
    padding: 4px 12px;
    margin-left: 8px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    font-size: 11px;
    font-weight: bold;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(245, 87, 108, 0.3);
    animation: shimmer 2s infinite;
    text-align: center;
    white-space: nowrap;
}

/* shimmerアニメーション */
@keyframes shimmer {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* スキルタグの基本スタイル */
.v2-skill-roadmap .skill-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    margin-left: 8px;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
}

/* MUST タグ（赤） */
.v2-skill-roadmap .skill-tag-must {
    background: #e74c3c;
    color: white;
    animation: pulse-red 2s infinite;
}

/* CHECK タグ（オレンジ） */
.v2-skill-roadmap .skill-tag-check {
    background: #f39c12;
    color: white;
    animation: pulse-orange 2s infinite;
}

/* LEVEL UP タグ（青） */
.v2-skill-roadmap .skill-tag-up,
.v2-skill-roadmap .skill-tag-level-up {
    background: #3498db;
    color: white;
    animation: pulse-blue 2s infinite;
}

/* BE PERFECT タグ（緑） */
.v2-skill-roadmap .skill-tag-perfect,
.v2-skill-roadmap .skill-tag-be_perfect {
    background: #2ecc71;
    color: white;
    animation: pulse-green 2s infinite;
}

/* MASTER タグ（ゴールドグラデーション） */
.v2-skill-roadmap .skill-tag-master {
    background: linear-gradient(135deg, #f9d423 0%, #ff4e50 50%, #f9d423 100%);
    color: white;
    animation: pulse-gold 2s infinite;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* パルスアニメーション */
@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 5px rgba(231, 76, 60, 0.5); }
    50% { box-shadow: 0 0 15px rgba(231, 76, 60, 1), 0 0 20px rgba(231, 76, 60, 0.8); }
}

@keyframes pulse-orange {
    0%, 100% { box-shadow: 0 0 5px rgba(243, 156, 18, 0.5); }
    50% { box-shadow: 0 0 15px rgba(243, 156, 18, 1), 0 0 20px rgba(243, 156, 18, 0.8); }
}

@keyframes pulse-blue {
    0%, 100% { box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); }
    50% { box-shadow: 0 0 15px rgba(52, 152, 219, 1), 0 0 20px rgba(52, 152, 219, 0.8); }
}

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 5px rgba(46, 204, 113, 0.5); }
    50% { box-shadow: 0 0 15px rgba(46, 204, 113, 1), 0 0 20px rgba(46, 204, 113, 0.8); }
}

@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 8px rgba(249, 212, 35, 0.6); }
    50% { box-shadow: 0 0 20px rgba(249, 212, 35, 1), 0 0 25px rgba(255, 78, 80, 0.8); }
}

/* 左側の接続線を非表示 */
.v2-skill-roadmap .skill-level-box.v2-single-level::before,
.v2-skill-roadmap .skill-level-box.v2-single-level::after {
    display: none;
}

/* skill-level-headerの基本設定 */
.v2-skill-roadmap .skill-level-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
    position: relative;
}

.v2-skill-roadmap .skill-level-header:hover {
    background: rgba(255, 255, 255, 0.1);
}

.v2-skill-roadmap .skill-level-header:active {
    background: rgba(255, 255, 255, 0.2);
}

/* skill-level-statsの基本設定 */
.v2-skill-roadmap .skill-level-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    margin-right: 12px;
}

/* PC版の基本設定 */
.v2-skill-roadmap .skill-level-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    white-space: nowrap;
}

.v2-skill-roadmap .skill-level-name {
    font-weight: bold;
    font-size: 16px;
    color: white !important;
}

.v2-skill-roadmap .skill-level-progress-inline {
    font-weight: bold;
    font-size: 18px;
    color: #ffd700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.v2-skill-roadmap .skill-total-count {
    font-size: 14px;
    color: #ffd700;
    font-weight: 600;
}

.v2-skill-roadmap .skill-level-modes {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}

.v2-skill-roadmap .mode-block {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-weight: 500;
}

/* スマホ版（767px以下）: タイトルを1行表示、モードを1行表示 */
@media (max-width: 767px) {
    .v2-skill-roadmap .skill-level-header {
        padding: 12px;
        padding-right: 50px !important;
        overflow: visible;
    }

    .v2-skill-roadmap .skill-level-stats {
        width: 100%;
        overflow: visible;
    }

    .v2-skill-roadmap .skill-level-toggle {
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
    }

    .v2-skill-roadmap .skill-level-title-row {
        flex-wrap: nowrap !important;
        gap: 6px;
        margin-bottom: 6px;
        overflow: visible;
    }

    .v2-skill-roadmap .skill-level-name {
        font-size: 14px;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .v2-skill-roadmap .skill-level-progress-inline {
        font-size: 16px;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .v2-skill-roadmap .skill-total-count {
        font-size: 12px;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin-left: 0;
    }

    .v2-skill-roadmap .course-tag-badge {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin-left: 4px;
        margin-right: 0;
        padding: 2px 8px;
        font-size: 10px;
    }

    .v2-skill-roadmap .skill-level-modes {
        flex-wrap: nowrap !important;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .v2-skill-roadmap .skill-level-modes::-webkit-scrollbar {
        display: none;
    }

    .v2-skill-roadmap .mode-block {
        padding: 4px 8px;
        font-size: 12px;
    }

    /* スキルコンテンツの調整 */
    .v2-skill-roadmap .skill-level-content {
        padding: 0 12px 12px 12px;
    }

    /* スキルリストの調整 */
    .v2-skill-roadmap .skill-item {
        padding: 12px;
        margin-bottom: 10px;
        border-radius: 8px;
    }

    /* スキルリンクのフォントサイズ */
    .v2-skill-roadmap .skill-link {
        font-size: 14px;
    }

    /* スキル統計の表示調整 */
    .v2-skill-roadmap .skill-stats {
        font-size: 12px;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* チェックボックスのサイズ調整 */
    .v2-skill-roadmap .skill-checkbox {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

    /* スキルタグの調整 */
    .v2-skill-roadmap .skill-tag {
        font-size: 10px;
        padding: 3px 8px;
        margin-left: 6px;
    }
}

/* タブレット以上の画面サイズ */
@media (min-width: 769px) {
    /* PC表示では既存のデザインを維持しつつ、左側の線を非表示 */
    .v2-skill-roadmap .skill-level-box.v2-single-level {
        width: 100%;
        max-width: 800px;
        margin: 0 auto 30px auto;
    }
}

/* iframe調整用スタイルは削除（DOM統合により不要） */

/* ================================================================
 * PC/タブレット版（769px以上）: V2システムのコンテンツ幅制限と中央揃え
 * テーマ側の全幅設定(bgfull等)に打ち勝つため、V2専用ラッパーに直接適用
 * ================================================================ */
@media (min-width: 769px) {
    .v2-vocab-home,
    .v2-reading-home,
    .v2-listening-home,
    .v2-writing-home,
    .v2-speaking-home,
    .v2-mypage-container,
    .v2-skill-practice-wrapper {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* 単語クイズプレイ画面のネイティブコンテナが全幅になるのを防ぐ */
    .v2-vocab-quiz-native-container {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* ================================================================
     * 追加CSSの全幅指定に絶対勝つための超強力セレクタ
     * /eiken/ などV2専用ラッパーを持たないページを確実に1200pxに制限
     * htmlタグや要素名、複数クラスを連結して詳細度を最大化
     * ================================================================ */
    html body.is-v2-system-page div#inner-content.wrap,
    html body.is-v2-system-page main#main.m-all {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* 単語クイズプレイ画面のネイティブコンテナは例外的に全幅を許可 */
    html body.is-v2-system-page:has(.v2-vocab-quiz-native-container) div#inner-content.wrap,
    html body.is-v2-system-page:has(.v2-vocab-quiz-native-container) main#main.m-all {
        max-width: none !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
}

/* ================================================================
 * PC/タブレット版（769px以上）: タブの1行化（横並びレイアウト）＆ 中央揃え
 * ================================================================ */
@media (min-width: 769px) {
    /* 1. 上部タブ全体の中央揃え */
    #v2-top-tabs-container {
        display: flex;
        align-items: center;
        justify-content: center; /* flex-start から center に変更 */
        padding: 0 20px;
        background: #fff;
    }

    #v2-grade-tabs {
        position: static;
        background: transparent;
        border-bottom: none;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        gap: 15px;
        margin-right: 20px;
        flex-shrink: 0;
    }

    .v2-grade-selector {
        margin: 0;
    }

    .v2-mypage-btn {
        position: static;
        transform: none;
        margin: 0;
    }

    /* flex-grow: 1 を解除し、中身の幅に合わせる */
    #v2-section-tabs {
        background: transparent;
        flex-grow: 0; /* 1 から 0 に変更 */
        display: flex;
        align-items: center;
    }

    /* width: 100% と flex-start を解除して中央に寄せる */
    #v2-section-tabs ul {
        justify-content: center; /* flex-start から center に変更 */
        width: auto; /* 100% から auto に変更 */
    }

    /* 2. 下部サブタブ（.v2-subsection-tabs）の中央揃え修復 */
    .v2-subsection-tabs ul {
        justify-content: center;
        margin: 0 auto !important; /* ベーススタイルの margin: 0 !important; を上書きして中央寄せ */
    }
}

/* ================================================================
 * リスニングタブのマスク（管理者以外）
 * ================================================================ */
.v2-listening-masked {
    position: relative;
}

.v2-listening-masked a {
    position: relative;
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.v2-mask-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    z-index: 10;
    gap: 2px;
}

.v2-mask-text-red {
    color: #ff4444;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    pointer-events: none;
}

.v2-mask-text-white {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    pointer-events: none;
    animation: blink 3.0s ease-in-out infinite;
}

/* 点滅アニメーション */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* モバイル対応 */
@media (max-width: 768px) {
    .v2-mask-text-red,
    .v2-mask-text-white {
        font-size: 11px;
    }
}