/*
 * z-index 体系（統一管理）
 * 999   : sticky-preview
 * 1000  : bottom-nav, sidebar-nav
 * 1100  : .modal（各種モーダル）
 * 1150  : #upgrade-modal（他モーダルより前面）
 * 1180  : #terms-modal / #privacy-modal / #legal-modal（upgrade-modal上から呼び出し可）
 * 1200  : .notification（トースト通知）
 * 9999  : #login-screen
 * 10000 : .lock-overlay, .tutorial-overlay
 * 10001 : .update-toast, .tutorial-spotlight
 * 10002 : .tutorial用 nav ハイライト
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    background: #000000;
    color: #ffffff;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

body.app-locked {
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}

.lock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.98);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 40px;
    text-align: center;
}

.lock-overlay.active {
    display: flex;
}

.lock-message {
    background: #1a1a1a;
    border: 3px solid #dc143c;
    border-radius: 15px;
    padding: 40px;
    max-width: 600px;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.8;
    box-shadow: 0 0 30px rgba(220, 20, 60, 0.5);
}

.lock-message h2 {
    color: #dc143c;
    font-size: 28px;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(220, 20, 60, 0.5);
}

.lock-message p {
    margin: 15px 0;
}

/* アプリ更新トースト */
.update-toast {
    position: fixed;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    transition: top 0.4s ease;
    width: calc(100% - 32px);
    max-width: 400px;
}
.update-toast.visible {
    top: env(safe-area-inset-top, 16px);
}
.update-toast-content {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1a1a1a;
    border: 1px solid #dc143c;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 4px 20px rgba(220, 20, 60, 0.3);
}
.update-toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.update-toast-text {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    flex: 1;
}
.update-toast-btn {
    background: #dc143c;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.update-toast-dismiss {
    background: none;
    border: none;
    color: #666;
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
}

/* ログイン画面 */
.login-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-screen.hidden {
    display: none;
}
.login-container {
    width: 100%;
    max-width: 360px;
    text-align: center;
}
.login-logo {
    margin-bottom: 32px;
}
.login-logo-img {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    margin-bottom: 16px;
}
.login-title {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 4px;
}
.login-subtitle {
    color: #666;
    font-size: 13px;
}
.login-form {
    text-align: left;
}
.login-field {
    margin-bottom: 16px;
}
.login-field label {
    display: block;
    color: #999;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}
.login-input {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 12px 14px;
    color: #fff;
    font-size: 16px;
    outline: none;
    -webkit-appearance: none;
}
.login-input:focus {
    border-color: #dc143c;
}
.login-error {
    background: rgba(220, 20, 60, 0.15);
    border: 1px solid #dc143c;
    border-radius: 8px;
    padding: 10px 12px;
    color: #ff6b6b;
    font-size: 13px;
    margin-bottom: 16px;
}
.login-btn {
    width: 100%;
    background: #dc143c;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
}
.login-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.login-footer {
    color: #444;
    font-size: 11px;
    margin-top: 24px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.header {
    text-align: center;
    margin-bottom: 12px;
    padding: 20px;
    border-bottom: 3px solid #dc143c;
}

.beta-badge { 
    display: inline-block; 
    background: #ff0000; 
    color: #ffffff; 
    font-size: 12px; 
    font-weight: bold; 
    padding: 4px 12px; 
    border-radius: 12px; 
    letter-spacing: 1px; 
    margin-bottom: 10px; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.header h1 {
    font-size: 34px;
    font-weight: 900;
    margin-bottom: 6px;
    letter-spacing: 2px;
    line-height: 1.2;
    white-space: nowrap;
}

.header h1 .no-limits {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.header h1 .plan-pro {
    color: #ff0000;
    text-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
}

.header .subtitle {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.mode-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 15px;
    width: 100%;
}

.mode-btn {
    width: 100%;
    min-height: 50px;
    padding: 10px 12px;
    background: #1a1a1a;
    border: 2px solid #333333;
    border-radius: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mode-btn:hover {
    background: #2a2a2a;
    border-color: #dc143c;
}

.mode-btn.active {
    background: #dc143c;
    border-color: #dc143c;
}

.input-section {
    background: #1a1a1a;
    border: 2px solid #333333;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 15px;
}

.input-section h2 {
    color: #dc143c;
    font-size: 24px;
    margin-bottom: 25px;
    border-bottom: 2px solid #dc143c;
    padding-bottom: 10px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.form-grid .form-group {
    margin-bottom: 0;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    overflow: hidden;
}

.form-group label {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
}

.form-group input,
.form-group select {
    padding: 12px;
    font-size: 16px;
    background: #000000;
    border: 2px solid #333333;
    border-radius: 8px;
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
}

/* date入力のiOS最小幅問題を防止 */
input[type="date"],
.date-picker-input {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}

/* モーダル内の全入力欄はみ出し防止 */
.modal-body input,
.modal-body select,
.modal-body textarea {
    max-width: 100%;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #dc143c;
}

.aux-exercises {
    margin-top: 30px;
}

.aux-exercises h3 {
    color: #dc143c;
    font-size: 20px;
    margin-bottom: 20px;
}

.aux-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 15px;
    padding: 15px;
    background: #000000;
    border-radius: 8px;
    border: 1px solid #333333;
}

/* タブレット以上（中サイズ画面） */
@media (min-width: 600px) {
    .aux-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* PC画面（大きい画面のみ横並び） */
@media (min-width: 1024px) {
    .aux-item {
        grid-template-columns: 2fr 0.8fr 70px;
        gap: 10px;
    }
}

.aux-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.aux-label {
    font-size: 11px;
    color: #999;
    font-weight: 600;
    margin-bottom: 3px;
}

@media (min-width: 1024px) {
    .aux-label {
        font-size: 10px;
    }
}

.aux-item select,
.aux-item input {
    padding: 8px;
    font-size: 13px;
    background: #1a1a1a;
    border: 2px solid #333333;
    border-radius: 6px;
    color: #ffffff;
    box-sizing: border-box;
}

/* 大きい画面ではさらに小さく */
@media (min-width: 1024px) {
    .aux-item select,
    .aux-item input {
        padding: 6px;
        font-size: 12px;
    }
}

.aux-item .aux-sets {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* 手動入力フォーム */
.aux-manual-inputs {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #333333;
    display: none;
    width: 100%;
    box-sizing: border-box;
}

.aux-manual-inputs.show {
    display: block;
}

.aux-manual-name {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 14px;
    background: #1a1a1a;
    border: 2px solid #333333;
    border-radius: 6px;
    color: #ffffff;
    box-sizing: border-box;
}

.aux-manual-inputs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.aux-manual-reps,
.aux-manual-sets {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    background: #1a1a1a;
    border: 2px solid #333333;
    border-radius: 6px;
    color: #ffffff;
    box-sizing: border-box;
}

/* 補助種目説明アコーディオン */
.aux-desc-accordion {
    margin-top: 12px;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
}
.aux-desc-header {
    background: #1a1a2e;
    color: #ccc;
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.aux-desc-header:active {
    background: #252540;
}
.aux-desc-toggle {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 10px;
}
.aux-desc-accordion.open .aux-desc-toggle {
    transform: rotate(90deg);
}
.aux-desc-body {
    display: none;
    padding: 12px 14px;
    background: #111;
    border-top: 1px solid #333;
}
.aux-desc-accordion.open .aux-desc-body {
    display: block;
}
.aux-desc-item {
    font-size: 12px;
    color: #bbb;
    margin-bottom: 8px;
    line-height: 1.5;
}
.aux-desc-item:last-child {
    margin-bottom: 0;
}
.aux-desc-item strong {
    color: #e0e0e0;
}

.btn-create {
    width: 100%;
    padding: 20px;
    background: #dc143c;
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 30px;
}

.btn-create:hover {
    background: #b01030;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 20, 60, 0.4);
}

.btn-create:active {
    transform: translateY(0);
}

.output-section {
    background: #1a1a1a;
    border: 2px solid #333333;
    border-radius: 15px;
    padding: 30px;
    margin-top: 30px;
    display: none;
}

.output-section.visible {
    display: block;
}

.menu-table {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    background: #000000;
    table-layout: auto;
}

.menu-table-caption {
    color: #dc143c;
    font-size: clamp(12px, 3.5vw, 20px);
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #1a1a1a;
    border: 2px solid #dc143c;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-table caption {
    display: none; /* キャプションは使わない（外側で表示） */
}

.menu-table th {
    background: #dc143c;
    color: #ffffff;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #b01030;
    white-space: nowrap;
}

.menu-table td {
    padding: 12px;
    text-align: center;
    border: 1px solid #333333;
    color: #ffffff;
    white-space: nowrap;
}

.menu-table tr:nth-child(even) {
    background: #0f0f0f;
}

.menu-table tr:hover {
    background: #2a2a2a;
}

.note-section {
    margin-top: 20px;
    padding: 12px 16px;
    background: #0f0f0f;
    border: 1px solid #333;
    border-radius: 8px;
}

.note-section h3 {
    color: #dc143c;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
}

.note-item {
    color: #cccccc;
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 6px;
    padding-left: 0;
}

.light-bench {
    padding: 8px 12px;
    background: #0f0f0f;
    border: 1px solid #dc143c;
    border-radius: 6px;
    margin: 0 auto 16px auto;
    font-weight: 600;
    color: #ffffff;
    font-size: clamp(11px, 2.5vw, 14px);
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    line-height: 1.4;
    min-height: auto;
    white-space: normal;
    word-break: keep-all;
    overflow: hidden;
    max-width: 95%;
}

.light-bench-compact {
    padding: 8px 14px;
    background: #0f0f0f;
    border: 1px solid #dc143c;
    border-radius: 6px;
    margin: 0 auto 12px auto;
    font-weight: 600;
    color: #ffffff;
    font-size: clamp(12px, 3.5vw, 15px);
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    line-height: 1.4;
    min-height: auto;
    white-space: normal;
    word-break: keep-all;
    overflow: hidden;
    max-width: 95%;
}

.light-bench-wrapper {
    text-align: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.hidden {
    display: none;
}

.three-column-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 15px;
}

.column-section {
    background: #000000;
    border: 2px solid #333333;
    border-radius: 10px;
    padding: 20px;
    min-width: 0;
}

.column-section h3 {
    color: #dc143c;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid #dc143c;
    padding-bottom: 10px;
}

.tables-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 15px;
    max-width: 100%;
    overflow: hidden;
}

.table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
}

.table-scroll-wrapper .menu-table {
    width: 100%;
}

@media (max-width: 1200px) {
    .three-column-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .table-scroll-wrapper .menu-table {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .aux-item {
        grid-template-columns: 1fr;
    }
    
    .aux-manual-inputs-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

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

    .menu-table th,
    .menu-table td {
        padding: 10px 8px;
        font-size: 13px;
    }
    
    .menu-table caption {
        font-size: 18px;
        padding: 12px;
    }
    
    .btn-create {
        padding: 15px;
        font-size: 20px;
    }
    
    .column-section {
        padding: 15px;
    }
    
    .input-section {
        padding: 20px;
    }
    
    .header h1 {
        font-size: 28px;
        letter-spacing: 1px;
    }
    
    .header h1 span[style] {
        font-size: 0.65em !important;
        letter-spacing: 2px !important;
    }
    
    .header .subtitle {
        font-size: 16px;
        word-break: keep-all;
        letter-spacing: 0px;
    }
    
    .mode-selector {
        gap: 8px;
    }
    
    .mode-btn {
        min-height: 50px;
        padding: 10px 8px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    
    .container {
        padding: 0;
    }
    
    .header {
        margin-bottom: 10px;
        padding: 15px 10px;
    }
    
    .beta-badge { 
        font-size: 11px; 
        padding: 3px 10px; 
        margin-bottom: 8px; 
    }
    
    .header h1 {
        font-size: 22px;
        letter-spacing: 1px;
    }
    
    .header .subtitle {
        font-size: 14px;
        word-break: keep-all;
        letter-spacing: 0px;
    }
    
    .table-scroll-wrapper .menu-table {
        width: 100%;
    }
    
    .menu-table th,
    .menu-table td {
        padding: 6px 4px;
        font-size: 10px;
    }
    
    .menu-table caption {
        font-size: 16px;
        padding: 10px;
    }

    .output-section {
        padding: 10px;
    }

    .btn-create {
        padding: 12px;
        font-size: 18px;
    }
    
    .column-section {
        padding: 12px;
    }
    
    .input-section {
        padding: 15px;
    }
    
    .form-group label {
        font-size: 14px;
    }
    
    .form-group input,
    .form-group select {
        padding: 10px;
        font-size: 14px;
    }
    
    .mode-selector {
        gap: 6px;
    }
    
    .mode-btn {
        min-height: 50px;
        padding: 8px 6px;
        font-size: 12px;
    }
    
    /* ベンチプレス特化サイクル・ピーキングフォームの最適化 */
    .input-section h2 {
        font-size: 18px;
        margin-bottom: 15px;
        padding-bottom: 8px;
    }
    
    /* ベンチプレス特化サイクル・ピーキングフォームのform-gridを1列に */
    #bench-cycle-form .bench-cycle-grid,
    #bench-cycle-form .form-grid.bench-cycle-grid,
    #bench-peaking-form .bench-cycle-grid,
    #bench-peaking-form .form-grid.bench-cycle-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }
    
    /* MBP設定セクションのパディング削減 */
    .mbp-settings {
        padding: 15px !important;
        margin-bottom: 20px !important;
    }
    
    .mbp-title {
        font-size: 16px !important;
        margin-bottom: 15px !important;
        padding-bottom: 8px !important;
    }
    
    #bench-peaking-form h3 {
        font-size: 16px !important;
        margin-bottom: 15px !important;
    }
    
    .aux-exercises {
        margin-top: 20px !important;
    }
    
    .aux-exercises h3 {
        font-size: 16px !important;
        margin-bottom: 15px !important;
    }
    
    /* ベンチプレス特化サイクルのチェックボックスセクション */
    #bench-cycle-form .form-group[style*="margin-top"] {
        margin-top: 15px !important;
        padding: 12px !important;
    }
    
    /* ボタンのマージン調整 */
    #bench-cycle-form .btn-create,
    #bench-peaking-form .btn-create {
        margin-top: 15px;
    }
    
    /* 手動入力フォームのモバイル対応 */
    .aux-manual-inputs {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .aux-manual-inputs-row {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .aux-manual-name,
    .aux-manual-reps,
    .aux-manual-sets {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ==================================================
   フェーズ1: メニュー保存・読込機能のスタイル
   ================================================== */

/* 保存データ読込ボタン */
.btn-load-data {
    display: inline-block;
    padding: 12px 24px;
    background: #1a1a1a;
    border: 2px solid #dc143c;
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 20px;
}

.btn-load-data:hover {
    background: #dc143c;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 20, 60, 0.4);
}

/* メニュー保存ボタン */
.btn-save-menu {
    display: inline-block;
    padding: 15px 30px;
    background: #1a1a1a;
    border: 2px solid #dc143c;
    border-radius: 10px;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin: 20px auto;
    text-align: center;
}

.btn-save-menu:hover {
    background: #dc143c;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 20, 60, 0.4);
}

/* モーダル */
.modal {
    display: none;
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    animation: fadeIn 0.3s;
    justify-content: center;
    align-items: center;
    padding: env(safe-area-inset-top, 10px) 0 env(safe-area-inset-bottom, 10px) 0;
}
#upgrade-modal.modal {
    z-index: 1150;
}
#terms-modal.modal,
#privacy-modal.modal,
#legal-modal.modal {
    z-index: 1180;
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: #1a1a1a;
    border: 2px solid #dc143c;
    border-radius: 15px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow: hidden;
    overflow-x: hidden;
    animation: slideIn 0.3s;
    display: flex;
    flex-direction: column;
}

@supports (max-height: 1dvh) {
    .modal-content {
        max-height: 85dvh;
    }
}

.modal-large {
    max-width: 900px;
}

/* record-modal: ヘッダー・フッター固定、ボディのみスクロール */

@keyframes slideIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 2px solid #333333;
    flex-shrink: 0;
}

.modal-header h2 {
    color: #dc143c;
    font-size: 24px;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 32px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
}

.modal-close:hover {
    color: #dc143c;
}

.modal-body {
    padding: 25px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    padding: 20px 25px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 2px solid #333333;
    flex-shrink: 0;
    background-color: #1a1a1a;
}

.btn-cancel,
.btn-save {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-cancel {
    background: #333333;
    color: #ffffff;
}

.btn-cancel:hover {
    background: #444444;
}

.btn-save {
    background: #dc143c;
    color: #ffffff;
}

.btn-save:hover {
    background: #b01030;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 20, 60, 0.4);
}

/* 警告メッセージ */
.warning-message {
    background: #2a1a1a;
    border: 2px solid #dc143c;
    border-radius: 8px;
    padding: 15px;
    color: #ffcccc;
    font-weight: bold;
    margin-top: 15px;
    text-align: center;
}

/* 保存済みメニューアイテム */
.menu-item {
    background: #000000;
    border: 2px solid #333333;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s;
}

.menu-item:hover {
    border-color: #dc143c;
    background: #0f0f0f;
}

.menu-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.menu-item-title {
    color: #dc143c;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

.menu-item-info {
    color: #999999;
    font-size: 14px;
    margin-bottom: 3px;
}

.menu-item-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.btn-view,
.btn-delete {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-view {
    background: #dc143c;
    color: #ffffff;
}

.btn-view:hover {
    background: #b01030;
}

.btn-delete {
    background: #333333;
    color: #ffffff;
}

.btn-delete:hover {
    background: #555555;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 92vh;
    }
    @supports (max-height: 1dvh) {
        .modal-content {
            max-height: 92dvh;
        }
    }
    
    .modal-header h2 {
        font-size: 20px;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .modal-footer {
        padding: 15px 20px;
    }
    
    .menu-item-header {
        flex-direction: column;
    }
    
    .menu-item-actions {
        flex-direction: column;
    }
    
    .btn-view,
    .btn-delete {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .modal-header {
        padding: 12px 15px;
    }

    .modal-header h2 {
        font-size: 18px;
    }

    .modal-body {
        padding: 12px;
    }

    .modal-footer {
        padding: 12px 15px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .btn-save-menu {
        width: 100%;
        padding: 12px 20px;
        font-size: 16px;
    }

    .btn-load-data {
        width: 100%;
        text-align: center;
    }

    /* 記録モーダル: iPhone 1画面に収める */
    #record-modal #menu-select-list {
        max-height: 140px !important;
    }
    #record-modal .form-group {
        margin-bottom: 12px;
    }
    #record-modal .form-group label {
        margin-bottom: 5px;
    }
    #record-modal .btn-free-training {
        padding: 10px 16px;
    }
}

/* ========================================
   プリント・画像保存機能のスタイル
   ======================================== */

/* アクションボタン */
.output-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.action-btn {
    background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 150px;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.4);
}

.action-btn:active {
    transform: translateY(0);
}


/* セクション間の余白（通常時） */
.section-spacer {
    margin: 15px 0;
}
/* ========================================
   印刷用スタイル（修正版 - 余白を詰める）
   ======================================== */
@media print {
    /* ヘッダー、ボタン類を非表示 */
    .header,
    .mode-selector,
    .no-print,
    .output-actions,
    .input-section,
    button,
    .beta-badge,
    .lock-overlay,
    .modal {
        display: none !important;
    }

    /* 背景色を白に */
    body {
        background: white !important;
        color: black !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
    }

    .output-section {
        background: white !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* @pageが効かない環境対策: パディングはJS側で適用 */
    #output-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* ページ設定（ブラウザ印刷で効く場合のみ） */
    @page {
        margin: 8mm 6mm;
        size: A4;
    }

    /* ===== 印刷ヘッダー ===== */
    .print-header {
        display: block !important;
        text-align: center;
        margin-bottom: 3mm !important;
        padding-bottom: 2mm !important;
        border-bottom: 2px solid #000;
    }

    .print-header h1 {
        font-size: 14pt !important;
        margin: 0 0 2mm 0 !important;
        font-weight: bold;
        color: #000;
    }

    .print-header p {
        font-size: 9pt !important;
        margin: 1mm 0 !important;
        color: #000;
    }

    /* ===== メイン表（1ページ目） ===== */
    
    /* タイトル表示（フル表記） */
    .menu-table-caption {
        display: block !important;
        font-size: 10pt !important;
        font-weight: bold !important;
        color: #000 !important;
        background: white !important;
        border: none !important;
        border-bottom: 2px solid #000 !important;
        padding: 1mm 0 1mm 0 !important;
        margin: 2mm 0 1mm 0 !important;
        text-align: left !important;
        page-break-after: avoid !important;
    }

    /* レイアウト（縦並び） */
    .tables-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .table-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        page-break-inside: avoid !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .table-scroll-wrapper {
        overflow: visible !important;
        max-width: 100% !important;
    }

    /* テーブル */
    .menu-table {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 8pt !important;
        border-collapse: collapse !important;
        border: 1px solid #000 !important;
        margin-bottom: 0 !important;
        page-break-inside: avoid !important;
        background: white !important;
        table-layout: fixed !important;
    }

    .menu-table th {
        background: #000 !important;
        color: white !important;
        border: 1px solid #000 !important;
        padding: 1mm !important;
        font-size: 7pt !important;
        font-weight: bold !important;
        text-align: center !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .menu-table td {
        border: 1px solid #000 !important;
        color: #000 !important;
        background: white !important;
        padding: 1mm !important;
        font-size: 7pt !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* ライトベンチプレスを簡素化（余白を最小限に） */
    .light-bench,
    .light-bench-compact,
    .light-bench-wrapper {
        font-size: 9pt !important;
        font-weight: bold !important;
        padding: 1mm 0 !important;
        padding-left: 0 !important;
        margin: 1mm 0 !important;
        margin-left: 0 !important;
        border: none !important;
        background: white !important;
        color: #000 !important;
        text-align: left !important;
        display: block !important;
        page-break-inside: avoid !important;
        line-height: 1.2 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .light-bench-wrapper {
        border: none !important;
        box-shadow: none !important;
        padding: 1mm 0 !important;
        padding-left: 0 !important;
        margin: 0 !important;
        margin-left: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }

    /* ディロード表 */
    .table-wrapper:has(.menu-table-caption) {
        width: 100% !important;
        margin-bottom: 3mm !important;
    }

    /* ===== 2ページ目：補助種目注釈 ===== */
    .note-section {
        page-break-before: always !important;
        background: white !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .note-section h3 {
        color: #000 !important;
        font-size: 12pt !important;
        font-weight: bold !important;
        margin-bottom: 3mm !important;
        border-bottom: 2px solid #000 !important;
        padding-bottom: 2mm !important;
    }

    .note-item {
        color: #000 !important;
        font-size: 9pt !important;
        line-height: 1.5 !important;
        margin-bottom: 2mm !important;
        padding-left: 5mm !important;
        text-indent: -5mm !important;
    }

    .note-item strong {
        font-weight: bold !important;
    }

    /* セクション間の余白 */
    .section-spacer {
        margin: 5px 0 !important;
    }

    /* ===== 印刷フッター ===== */
    .print-footer {
        display: block !important;
        text-align: center;
        margin-top: 4mm !important;
        padding-top: 2mm !important;
        border-top: 1px solid #999;
        font-size: 7pt !important;
        color: #666 !important;
        page-break-inside: avoid !important;
    }

    /* 画像保存用要素は印刷時非表示 */
    .image-export-header,
    .for-image-export {
        display: none !important;
    }
}

/* ========================================
   画像保存用スタイル（印刷と同じ白黒レイアウト）
   ======================================== */
.for-image-export {
    background: #ffffff !important;
    padding: 15px !important;
    margin: 0 auto !important;
}

.for-image-export .tables-container {
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

.for-image-export .table-wrapper {
    margin-bottom: 0 !important;
    width: 100% !important;
}

.for-image-export .menu-table-caption {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #000 !important;
    background: white !important;
    border: none !important;
    border-bottom: 2px solid #000 !important;
    padding: 5px 0 3px 0 !important;
    margin: 10px 0 5px 0 !important;
    text-align: left !important;
}

.for-image-export .menu-table {
    border: 2px solid #000 !important;
    font-size: 11px !important;
    width: 100% !important;
    table-layout: fixed !important;
    background: white !important;
    border-collapse: collapse !important;
    margin-bottom: 0 !important;
}

.for-image-export .menu-table th {
    background: #000 !important;
    color: #fff !important;
    padding: 5px !important;
    font-size: 11px !important;
    border: 1px solid #000 !important;
    font-weight: bold !important;
}

.for-image-export .menu-table td {
    border: 1px solid #000 !important;
    padding: 5px !important;
    font-size: 11px !important;
    color: #000 !important;
    background: white !important;
}

/* ライトベンチプレス（画像保存時も同じ） */
.for-image-export .light-bench,
.for-image-export .light-bench-compact,
.for-image-export .light-bench-wrapper {
    font-size: 12px !important;
    font-weight: bold !important;
    padding: 5px 0 !important;
    margin: 0 0 5px 0 !important;
    border: none !important;
    background: white !important;
    color: #000 !important;
    text-align: left !important;
    max-width: none !important;
}

.for-image-export .light-bench-wrapper {
    border: none !important;
    box-shadow: none !important;
    background: white !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
}

/* 補助種目注釈は画像保存時は非表示 */

/* セクション間の余白（画像保存時） */
.for-image-export .section-spacer {
    margin: 5px 0 !important;
}

/* .light-bench単体への強制左揃え */
.for-image-export .light-bench {
    margin: 0 0 5px 0 !important;
    max-width: none !important;
    width: 100% !important;
    display: block !important;
}

.for-image-export .light-bench-compact {
    margin: 0 0 5px 0 !important;
    max-width: none !important;
    width: 100% !important;
    display: block !important;
}

.for-image-export .note-section {
    display: block !important;
    background: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    margin-top: 8px !important;
}
.for-image-export .note-section h3 {
    color: #333 !important;
    font-size: 9px !important;
}
.for-image-export .note-item {
    color: #444 !important;
    font-size: 9px !important;
}

.for-image-export .table-scroll-wrapper {
    overflow: visible !important;
    width: 100% !important;
}

/* 画像保存用ヘッダー（印刷と同じスタイル） */
.image-export-header {
    background: white !important;
    padding: 10px 0 !important;
    margin-bottom: 10px !important;
    border-bottom: 2px solid #000 !important;
    text-align: left !important;
}

.image-export-header h1 {
    font-size: 18px !important;
    margin: 0 0 8px 0 !important;
    color: #000 !important;
    font-weight: bold !important;
}

.image-export-header p {
    margin: 3px 0 !important;
    line-height: 1.5 !important;
    font-size: 11px !important;
    color: #000 !important;
}

.image-export-header strong {
    color: #000 !important;
    font-weight: bold !important;
}
/* ==================================================
   トレーニング実績記録機能のスタイル
   ================================================== */

/* 記録ボタンの強調スタイル */
.record-btn {
    background: linear-gradient(135deg, #dc143c 0%, #a00000 100%) !important;
    border: 2px solid #dc143c !important;
    box-shadow: 0 0 15px rgba(220, 20, 60, 0.5) !important;
    animation: pulse-glow 2s infinite;
}

.record-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(220, 20, 60, 0.7) !important;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(220, 20, 60, 0.5);
    }
    50% {
        box-shadow: 0 0 25px rgba(220, 20, 60, 0.8);
    }
}

/* 記録モーダル内のグリッドレイアウト調整 */
#record-modal .modal-body {
    overflow-y: auto;
}

#record-modal textarea {
    width: 100%;
    padding: 10px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 5px;
    color: #fff;
    font-family: inherit;
    resize: vertical;
}

#record-modal textarea:focus {
    outline: none;
    border-color: #dc143c;
}

/* === ダークテーマ入力欄統一 === */
#record-modal textarea,
#record-modal input[type="text"],
#record-modal input[type="number"],
#record-step-free textarea,
#record-step-free input[type="text"],
#record-step-free input[type="number"],
.modal-body textarea,
.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body input[type="url"],
.modal-body select {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    border-radius: 8px;
    padding: 10px;
    font-family: inherit;
    font-size: 16px;
    box-sizing: border-box;
}

#record-modal textarea:focus,
#record-step-free textarea:focus,
#record-step-free input:focus,
.modal-body textarea:focus,
.modal-body input[type="text"]:focus,
.modal-body input[type="number"]:focus,
.modal-body input[type="url"]:focus,
.modal-body select:focus {
    border-color: #dc143c;
    outline: none;
}

.modal-body textarea::placeholder,
#record-step-free textarea::placeholder,
.modal-body input::placeholder,
#record-step-free input::placeholder {
    color: #666;
}

/* レスポンシブ対応（スマホ） */
@media (max-width: 768px) {
    #record-modal .modal-body > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    .record-btn {
        font-size: 14px;
        padding: 10px 15px;
    }
}

/* ==================================================
   実績閲覧機能のスタイル
   ================================================== */

/* 実績閲覧ボタンの強調スタイル */
.view-records-btn {
    background: linear-gradient(135deg, #1e90ff 0%, #0066cc 100%) !important;
    border: 2px solid #1e90ff !important;
    box-shadow: 0 0 15px rgba(30, 144, 255, 0.5) !important;
}

.view-records-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(30, 144, 255, 0.7) !important;
}

/* 表示切替タブ */
.view-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.view-tab {
    flex: 1;
    padding: 12px 20px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 600;
}

.view-tab:hover {
    background: #2a2a2a;
    border-color: #dc143c;
}

.view-tab.active {
    background: linear-gradient(135deg, #dc143c 0%, #a00000 100%);
    border-color: #dc143c;
    box-shadow: 0 0 15px rgba(220, 20, 60, 0.5);
}

/* 実績カード */
.record-card {
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.record-card:hover {
    border-color: #dc143c;
    box-shadow: 0 0 15px rgba(220, 20, 60, 0.3);
    transform: translateY(-2px);
}

.record-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
}

.record-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #dc143c;
}

.record-card-date {
    font-size: 14px;
    color: #999;
}

.record-card-body {
    display: grid;
    gap: 10px;
}

.record-set {
    display: grid;
    /* 種目名40% / 予定30% / 実績30%（モバイルは下のメディアクエリで縦積み上書き） */
    grid-template-columns: 2fr 1.5fr 1.5fr;
    gap: 8px;
    padding: 10px;
    background: #0a0a0a;
    border-radius: 5px;
    align-items: center;
}

.record-set-label {
    font-weight: 600;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.record-set-planned,
.record-set-actual {
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
}

.record-set-planned {
    background: #2a2a2a;
    color: #999;
}

.record-set-actual {
    background: #1a3a1a;
    color: #4ade80;
    font-weight: 600;
}

.record-set-actual.empty {
    background: #3a1a1a;
    color: #f87171;
    font-style: italic;
}

.record-set-achievement {
    font-size: 12px;
    color: #fbbf24;
    text-align: center;
}

/* RPE表示 */
.record-set-rpe {
    grid-column: 1 / -1;
    margin-top: 4px;
    color: #60a5fa;
    font-size: 12px;
    font-weight: bold;
}

/* フリートレーニング用コンパクト1行表示 */
.record-set-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #0a0a0a;
    border-radius: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.record-compact-label {
    font-weight: 600;
    color: #fff;
    font-size: 13px;
    min-width: 40px;
}
.record-compact-actual {
    font-size: 13px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #1a3a1a;
    color: #4ade80;
    font-weight: 600;
}
.record-compact-actual.empty {
    background: #3a1a1a;
    color: #f87171;
    font-style: italic;
}
.record-compact-rpe {
    color: #60a5fa;
    font-size: 12px;
    font-weight: bold;
}

.sf-result-rpe {
    display: inline-block;
    margin-top: 4px;
    margin-right: 8px;
    color: #60a5fa;
    font-size: 11px;
    font-weight: bold;
}

.record-set-memo {
    grid-column: 1 / -1;
    margin-top: 5px;
    padding: 8px 10px;
    background: #1a1a2a;
    border-left: 3px solid #fbbf24;
    border-radius: 5px;
    color: #e0e0e0;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* 動画リンク表示 */
.record-set-video {
    grid-column: 1 / -1;
    margin-top: 5px;
    padding: 8px 10px;
    background: #0a1a2a;
    border-left: 3px solid #60a5fa;
    border-radius: 5px;
    color: #60a5fa;
    font-size: 13px;
    cursor: pointer;
}

.record-set-video a {
    color: #60a5fa;
    text-decoration: underline;
}

/* 週スキップ機能 */
.week-skip-container {
    padding: 12px;
    background: #1a1a1a;
    border: 2px solid #444;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}
#week-skip-options {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.week-skip-toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
}
.week-skip-toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #f59e0b;
}
.week-skip-toggle-label span {
    color: #f59e0b;
    font-weight: bold;
    font-size: clamp(0.85rem, 2.3vw, 0.95rem);
    line-height: 1.4;
}
.week-skip-radio-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.week-skip-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 12px;
    border: 2px solid #333;
    border-radius: 8px;
    background: #0a0a0a;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
    gap: 10px;
}
.week-skip-radio-label:hover {
    border-color: #f59e0b;
}
.week-skip-radio-label.selected {
    border-color: #f59e0b;
    background: #1a1500;
}
.week-skip-radio-label input[type="radio"] {
    display: none;
}
.week-skip-radio-label .wsk-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.week-skip-radio-label .wsk-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.week-skip-radio-label .wsk-label {
    font-size: 14px;
    font-weight: 700;
    color: #f59e0b;
    line-height: 1.3;
}
.week-skip-radio-label .wsk-desc {
    font-size: 12px;
    color: #999;
    line-height: 1.4;
    margin-top: 2px;
}

/* スキップ記録カード */
.record-card.skip-record {
    border-color: #f59e0b;
    opacity: 0.8;
}
.record-card.skip-record:hover {
    border-color: #f59e0b;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}
.record-card.skip-record .record-card-title {
    color: #f59e0b;
}

/* ウォームアップ閲覧セクション（折りたたみ） */
.warmup-view-section {
    margin-bottom: 10px;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
}

.warmup-view-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #1a1a0a;
    cursor: pointer;
    color: #fbbf24;
    font-size: 13px;
    font-weight: 600;
    user-select: none;
}

.warmup-view-content {
    display: none;
    padding: 10px;
    background: #0a0a0a;
}

.warmup-view-section.expanded .warmup-view-content {
    display: block;
}

.warmup-view-section.expanded .warmup-view-arrow {
    transform: rotate(90deg);
}

.warmup-view-arrow {
    transition: transform 0.3s;
    font-size: 12px;
}

.record-memo {
    margin-top: 10px;
    padding: 10px;
    background: #0a0a0a;
    border-left: 3px solid #dc143c;
    border-radius: 5px;
    color: #ccc;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* カレンダー表示 */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-top: 20px;
}

.calendar-day-header {
    text-align: center;
    padding: 10px;
    font-weight: 700;
    color: #dc143c;
    background: #1a1a1a;
    border-radius: 5px;
    font-size: 14px;
}

.calendar-day {
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.calendar-day:hover {
    border-color: #dc143c;
    transform: scale(1.05);
}

.calendar-day.has-record {
    background: linear-gradient(135deg, #1a3a1a 0%, #0a2a0a 100%);
    border-color: #4ade80;
}

.calendar-day.other-month {
    opacity: 0.3;
}

.calendar-day-number {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}

.calendar-day-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: auto;
}

.calendar-day-badge {
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 3px;
    background: #dc143c;
    color: #fff;
    white-space: nowrap;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* PCでは「SQ W1」と「135kg」の間に半角スペース相当の余白 */
.calendar-day-badge-weight {
    margin-left: 4px;
}

/* カレンダーコントロール ◀▶ ボタンサイズ調整 */
.calendar-controls .action-btn {
    min-width: auto;
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 14px;
}

/* カレンダー年月ジャンプピッカー */
.calendar-jump-picker {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    padding: 10px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
}

.calendar-jump-select {
    background: #0a0a0a;
    color: #fff;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 15px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.calendar-jump-btn {
    background: #dc143c;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.calendar-jump-btn:active {
    background: #b01030;
}

/* フィルターセクション */
.filter-section {
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}

.filter-section h3 {
    color: #dc143c;
    font-size: 16px;
    margin-bottom: 12px;
}

/* フィルター共通: 全input/selectの高さ・フォント統一 */
.filter-section .form-group {
    margin-bottom: 8px;
}
.filter-section .form-group label {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}
.filter-section select,
.filter-section input[type="date"],
.filter-section-date-input {
    padding: 9px 8px;
    font-size: 13px;
    background: #000;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    height: 38px;
}

/* デスクトップ: Row1 = メニュー2:1:1, Row2 = 種目:週数:クリア */
.filter-row-1 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
}
.filter-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
/* モバイル用行: デスクトップでは非表示 */
.filter-row-mobile {
    display: none;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .record-set {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .record-set-label {
        white-space: normal;
    }
    
    .calendar-grid {
        gap: 2px;
        margin-top: 10px;
    }

    .calendar-day {
        padding: 3px;
        border-width: 1px;
        border-radius: 4px;
    }

    .calendar-day-header {
        padding: 4px 2px;
        font-size: 11px;
        border-radius: 3px;
    }

    .calendar-day-number {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .calendar-day-badges {
        gap: 1px;
    }

    .calendar-day-badge {
        font-size: 8px;
        padding: 2px 3px;
        border-radius: 2px;
        line-height: 1.15;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* モバイルではラベル行と重量行を縦積みにして数字を読みやすく */
    .calendar-day-badge-weight {
        margin-left: 0;
        font-weight: 700;
    }
    
    .view-tab {
        font-size: 14px;
        padding: 10px 15px;
    }
}

/* ==================================================
   実績編集・削除機能のスタイル
   ================================================== */

/* カードヘッダーのレイアウト調整 */
.record-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
    gap: 10px;
}

/* 編集・削除ボタンコンテナ */
.record-card-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
}
.record-card-buttons.three-buttons {
    grid-template-columns: 1fr 1fr 1fr;
}
.record-card-buttons .record-continue-btn,
.record-card-buttons .record-edit-btn,
.record-card-buttons .record-img-btn,
.record-card-buttons .record-delete-btn {
    justify-content: center;
    text-align: center;
}

/* 続きを入力ボタン（クリムゾン） */
.record-continue-btn {
    padding: 8px 12px;
    background: linear-gradient(135deg, #dc143c 0%, #b91030 100%);
    border: 2px solid #dc143c;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.record-continue-btn:hover {
    background: linear-gradient(135deg, #b91030 0%, #8b0c24 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 20, 60, 0.4);
}

/* 編集ボタン（ティール） */
.record-edit-btn {
    padding: 8px 12px;
    background: linear-gradient(135deg, #26a69a 0%, #1e8c82 100%);
    border: 2px solid #26a69a;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.record-edit-btn:hover {
    background: linear-gradient(135deg, #1e8c82 0%, #16736b 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(38, 166, 154, 0.4);
}

/* 画像保存ボタン（ブルー） */
.record-img-btn {
    padding: 8px 12px;
    background: linear-gradient(135deg, #5c9ce6 0%, #4a87cc 100%);
    border: 2px solid #5c9ce6;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.record-img-btn:hover {
    background: linear-gradient(135deg, #4a87cc 0%, #3a72b3 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(92, 156, 230, 0.4);
}

/* 削除ボタン（グレー） */
.record-delete-btn {
    padding: 8px 12px;
    background: linear-gradient(135deg, #666 0%, #555 100%);
    border: 2px solid #666;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.record-delete-btn:hover {
    background: linear-gradient(135deg, #555 0%, #444 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 102, 102, 0.4);
}

/* 編集フォーム */
.edit-set-form {
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.edit-set-form h4 {
    color: #dc143c;
    margin-bottom: 15px;
    font-size: 16px;
}

.edit-set-form .form-group {
    margin-bottom: 15px;
}

.edit-set-form label {
    display: block;
    margin-bottom: 5px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.edit-set-form input,
.edit-set-form textarea {
    width: 100%;
    padding: 10px;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 5px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
}

.edit-set-form input:focus,
.edit-set-form textarea:focus {
    outline: none;
    border-color: #dc143c;
}

.edit-set-form input[readonly] {
    background: #0a0a0a;
    color: #999;
    cursor: not-allowed;
}

.edit-set-form textarea {
    resize: vertical;
    min-height: 60px;
}

/* レスポンシブ対応 — モバイル: ボタン文字小さく */
@media (max-width: 768px) {
    .record-continue-btn,
    .record-edit-btn,
    .record-img-btn,
    .record-delete-btn {
        font-size: 12px;
        padding: 8px 6px;
    }
    .record-card-buttons.three-buttons .record-continue-btn,
    .record-card-buttons.three-buttons .record-edit-btn,
    .record-card-buttons.three-buttons .record-delete-btn {
        font-size: 11px;
        padding: 7px 4px;
    }
}

/* 編集モーダル情報エリア: デスクトップは下段3列 */
@media (min-width: 769px) {
    .edit-record-info-grid {
        grid-template-columns: auto auto auto !important;
        gap: 10px !important;
    }
}

/* 実績記録 分岐選択画面 */
.record-select-option {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 18px 20px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s;
    font-family: inherit;
}
.record-select-option:hover {
    border-color: #dc143c;
}
.record-select-continue {
    border-color: #dc143c;
    background: rgba(220, 20, 60, 0.05);
}
.record-select-icon {
    font-size: 24px;
    flex-shrink: 0;
}
.record-select-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
}
.record-select-desc {
    font-size: 13px;
    color: #999;
}

/* ==================================================
   Flatpickr 削除済み — ネイティブ日付ピッカーを使用
   ================================================== */

/* ========================================
   統計グラフ用スタイル
   ======================================== */

.stats-section {
    margin-bottom: 20px;
}

/* 種目選択・期間選択ボタン */
.exercise-btn,
.period-btn {
    padding: 12px 20px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.exercise-btn:hover,
.period-btn:hover {
    background: #2a2a2a;
    border-color: #dc143c;
}

.exercise-btn.active,
.period-btn.active {
    background: #dc143c;
    border-color: #dc143c;
    color: #fff;
}

/* グラフコンテナ */
.chart-container {
    position: relative;
    width: 100%;
    height: 400px;
}

#statsChart {
    max-width: 100%;
    max-height: 100%;
}

/* データなしメッセージ */
#no-data-message {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .exercise-selector,
    .period-selector {
        flex-direction: column;
    }
    
    .exercise-btn,
    .period-btn {
        width: 100%;
    }
    
    .chart-container {
        height: 300px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chart-container {
        height: 350px;
    }
}

/* ============================================
   統計グラフ機能のスタイル
   ============================================ */

.stats-exercise-tabs,
.stats-period-tabs {
    display: flex;
    gap: 10px;
    margin: 15px 0;
    overflow-x: auto;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
}

.stats-exercise-tabs::-webkit-scrollbar,
.stats-period-tabs::-webkit-scrollbar {
    height: 4px;
}

.stats-exercise-tabs::-webkit-scrollbar-thumb,
.stats-period-tabs::-webkit-scrollbar-thumb {
    background: #dc3545;
    border-radius: 4px;
}

.stats-tab,
.period-tab {
    padding: 12px 20px;
    border: 2px solid #333;
    background: #1a1a1a;
    color: #aaa;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.stats-tab:hover,
.period-tab:hover {
    border-color: #dc3545;
    transform: translateY(-2px);
}

.stats-tab.active,
.period-tab.active {
    background: linear-gradient(135deg, #dc3545 0%, #8b0000 100%);
    color: white;
    border-color: #dc3545;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* カスタム期間ピッカー */
.custom-period-picker {
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0;
    animation: fadeInDown 0.2s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-period-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.custom-period-field {
    flex: 1;
    min-width: 120px;
}

.custom-period-field label {
    display: block;
    font-size: 12px;
    color: #aaa;
    margin-bottom: 4px;
    font-weight: 600;
}

/* 統計カスタム期間の日付入力 — .filter-section input[type="date"] と同じセレクタに追加済み */

.filter-section-date-input:focus {
    border-color: #dc143c;
    outline: none;
}

.filter-section-date-input::placeholder {
    color: #666;
}

.custom-period-separator {
    color: #aaa;
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 0;
    flex-shrink: 0;
    align-self: flex-end;
    padding-bottom: 8px;
}

.custom-period-apply {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: #dc143c;
    color: white;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

.custom-period-apply:hover:not(:disabled) {
    background: #b91c2c;
    transform: translateY(-1px);
}

.custom-period-apply:disabled {
    background: #333;
    border-color: #444;
    color: #666;
    cursor: not-allowed;
}

.custom-period-label {
    margin-top: 8px;
    font-size: 13px;
    color: #dc143c;
    font-weight: 600;
    text-align: center;
}

/* カスタムボタンのスタイル */
.period-tab-custom {
    font-size: 13px !important;
}

.chart-container {
    position: relative;
    height: 400px;
    margin: 20px 0;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 統計データテーブル */
.stats-table {
    margin-top: 20px;
    background: white;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block !important;
    visibility: visible !important;
}

.stats-table table {
    display: table !important;
    min-width: 100%;
    border-collapse: collapse;
    background: white;
}

.stats-table th,
.stats-table td {
    padding: 6px 10px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    white-space: nowrap;
}

.stats-table th {
    background: linear-gradient(135deg, #dc3545 0%, #8b0000 100%);
    color: white;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    font-size: 11px;
    padding: 6px 4px;
}

.stats-table td {
    text-align: center;
    color: #333;
}

.stats-table tr:hover {
    background: #f8f9fa;
}

.stats-table tr:last-child td {
    border-bottom: none;
}

.best-comparison-card {
    background: #1a1a1a;
    border: 1px solid #e53935;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 12px;
    color: #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.best-comparison-left,
.best-comparison-right {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.best-comparison-label {
    font-weight: 600;
    color: #e53935;
}
.best-comparison-sub {
    font-size: 11px;
    color: #888;
}
.best-comparison-current {
    font-weight: 600;
    text-align: right;
}
.best-comparison-pct {
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.stats-no-data {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.stats-no-data p {
    margin: 10px 0;
    font-size: 16px;
}

/* iPhone 16 最適化 */
@media (max-width: 430px) {
    .chart-container {
        height: 300px;
        padding: 15px;
    }
    
    .stats-exercise-tabs,
    .stats-period-tabs {
        gap: 6px;
        padding: 0 0 5px 0;
    }
    
    .stats-tab,
    .period-tab {
        padding: 10px 12px;
        font-size: 12px;
        flex: 1;
        min-width: 0;
        text-align: center;
    }
    
    .stats-period-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }

    .stats-period-tabs .period-tab {
        flex: 0 1 calc(33.333% - 4px);
        min-width: 0;
        text-align: center;
    }

    .custom-period-row {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .custom-period-field {
        min-width: 0;
    }

    .custom-period-separator {
        padding-bottom: 0;
    }
    
    .period-tab-custom {
        font-size: 11px !important;
    }
    
    .stats-table {
        padding: 6px;
    }

    .stats-table table {
        table-layout: auto;
        width: auto;
        min-width: 100%;
    }

    .stats-table th,
    .stats-table td {
        padding: 4px 6px;
        font-size: 11px;
    }

    .stats-table th {
        font-size: 9px;
        padding: 5px 2px;
    }

    /* セクションヘッダー */
    .section-header-unified .section-header-text {
        font-size: 20px;
    }
    .section-header-unified .section-header-icon {
        font-size: 20px;
    }
    .section-header-unified .section-header-desc {
        font-size: 11px;
    }

    /* カードタイトル */
    .card-title-v2 {
        font-size: 16px;
    }

    /* ウォームアップ */
    .wu-step-weight {
        font-size: 28px;
    }
    .wu-step-reps {
        font-size: 15px;
    }
}

/* ==================================================
   カレンダー印刷用スタイル
   ================================================== */

/* @media print セクションを無効化 */

/* ========================================
   カレンダー印刷用スタイル（@media print外）
   ======================================== */

/* 印刷モード時の基本設定 */
body.printing-calendar {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* 不要な要素を非表示 */
body.printing-calendar .header,
body.printing-calendar .mode-selector,
body.printing-calendar .input-section,
body.printing-calendar .output-section,
body.printing-calendar .modal-header,
body.printing-calendar .modal-footer,
body.printing-calendar .filter-section,
body.printing-calendar .view-tabs,
body.printing-calendar .calendar-print-buttons,
body.printing-calendar .calendar-controls,
body.printing-calendar #records-list-view,
body.printing-calendar > .container > *:not(.modal) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* モーダルを印刷の最上部に配置 */
body.printing-calendar .modal {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

body.printing-calendar .modal-content {
    max-width: 100% !important;
    width: 100% !important;
    background: white !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
}

body.printing-calendar .modal-body {
    padding: 5mm !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

/* カレンダー表示を最適化 */
body.printing-calendar #records-calendar-view {
    display: block !important;
    background: white !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

/* カレンダー印刷用ヘッダー - 最小化 */
body.printing-calendar .calendar-print-header {
    display: block !important;
    margin: 0 auto 3mm auto !important;
    page-break-after: avoid !important;
    text-align: center !important;
    padding: 0 !important;
}

body.printing-calendar .calendar-print-header h1 {
    font-size: 12pt !important;
    margin: 0 0 1mm 0 !important;
    color: #000 !important;
}

body.printing-calendar .calendar-print-header p {
    font-size: 8pt !important;
    margin: 0 !important;
    color: #000 !important;
}

body.printing-calendar #calendar-grid-container {
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
    width: 95% !important;
}

/* カレンダーグリッド - 1ページに収める＋センタリング */
body.printing-calendar .calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 1px !important;
    page-break-inside: avoid !important;
    width: 100% !important;
    margin: 0 auto !important;
    font-size: 7pt !important;
}

/* 曜日ヘッダー - 最小化 */
body.printing-calendar .calendar-day-header {
    background: #000 !important;
    color: white !important;
    padding: 1mm !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 8pt !important;
    border: 1px solid #000 !important;
}

/* カレンダーセル - 大幅縮小＋完全中央揃え */
body.printing-calendar .calendar-day {
    border: 1px solid #ccc !important;
    padding: 1mm !important;
    min-height: 12mm !important;
    max-height: 18mm !important;
    background: white !important;
    page-break-inside: avoid !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    overflow: hidden !important;
}

/* カレンダーセル内のすべての要素を中央揃え */
body.printing-calendar .calendar-day > * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.printing-calendar .calendar-day.other-month {
    background: #f5f5f5 !important;
    opacity: 0.5 !important;
}

body.printing-calendar .calendar-day.has-record {
    background: #fffef0 !important;
}

/* 日付番号 - 縮小＋完全中央揃え */
body.printing-calendar .calendar-day-number {
    font-size: 8pt !important;
    font-weight: bold !important;
    color: #000 !important;
    margin-bottom: 0.5mm !important;
    line-height: 1 !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* バッジエリア - 最小化＋完全中央揃え */
body.printing-calendar .calendar-day-badges {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5mm !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
}

/* バッジ - 大幅縮小＋完全中央配置 */
body.printing-calendar .calendar-day-badge {
    font-size: 5.5pt !important;
    padding: 0.5mm 1mm !important;
    background: #000 !important;
    color: white !important;
    border-radius: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ====================================================
   Phase 1.1: ナビゲーションシステム追加
   ==================================================== */

:root {
    --sidebar-width: 240px;
    --bottom-nav-height: 64px;
    --primary: #dc143c;
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --border: #333333;
}

/* アプリラッパー */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

/* サイドバーナビゲーション（PC用） */
.sidebar-nav {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: none;
    flex-direction: column;
    z-index: 1000;
}

.sidebar-header {
    padding: 24px;
    padding-right: 80px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.sidebar-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
}

.sidebar-title .no-limits {
    color: var(--text-primary);
}

.sidebar-title .plan-pro {
    color: var(--primary);
}

.beta-badge-sidebar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    background: var(--primary);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.sidebar-menu {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.sidebar-nav-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.sidebar-nav-item.active {
    background: var(--primary);
    color: white;
}

.sidebar-nav-item .nav-icon {
    font-size: 24px;
    width: 32px;
    text-align: center;
}

.sidebar-nav-item .nav-label {
    flex: 1;
    font-weight: 500;
}

/* メインコンテンツラッパー */
.main-content-wrapper {
    flex: 1;
    padding-bottom: var(--bottom-nav-height);
    min-height: 100vh;
}

/* コンテンツセクション */
.content-section {
    animation: fadeIn 0.3s ease;
    overflow-x: hidden;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-title {
    font-size: 28px;
    font-weight: 700;
    padding: 24px;
    margin: 0;
    border-bottom: 2px solid var(--border);
}

/* 統一セクションヘッダー */
.section-header-unified {
    padding: 20px 24px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 15px;
}

.section-header-unified .section-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px 0;
}

.section-header-unified .section-header-icon {
    font-size: 24px;
    line-height: 1;
}

.section-header-unified .section-header-text {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.section-header-unified .section-header-desc {
    font-size: 13px;
    color: #888;
    margin: 0;
    padding-left: 34px;
}

/* ダッシュボード（ホーム） */
.dashboard-welcome {
    background: linear-gradient(135deg, #a00f2c 0%, var(--primary) 100%);
    padding: 32px 24px;
    text-align: center;
}

.dashboard-welcome h1 {
    font-size: 24px;
    margin: 0 0 8px 0;
    color: white;
}

.dashboard-welcome p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.dashboard-info {
    padding: 24px;
}

/* ボトムナビゲーション（モバイル用） */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    /* iOS Safari: スクロール中のポジション遅延を防ぐためGPU合成レイヤーに固定 */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    transition: all 0.2s ease;
    height: 100%;
}

.bottom-nav-item:active {
    background: var(--bg-tertiary);
}

.bottom-nav-item.active {
    color: var(--primary);
}

.bottom-nav-icon {
    font-size: 24px;
}

.bottom-nav-label {
    font-size: 11px;
    font-weight: 500;
}

/* レスポンシブ */

/* モバイル: コンテナ幅の問題を修正 */
@media (max-width: 767px) {
    #section-menu .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box;
    }
    
    /* メニュー作成時の3カラムレイアウトを1カラムに */
    #section-menu .three-column-layout {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    
    /* 各カラムの幅を100%に */
    #section-menu .column-section {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* mode-selectorボタンのサイズ調整 */
    #section-menu .mode-selector {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    #section-menu .mode-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 140px;
        font-size: 13px;
        padding: 10px 8px;
    }
}

/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
    #section-menu .container {
        max-width: 100%;
        padding: 20px;
    }
}

/* PC */
@media (min-width: 1024px) {
    .sidebar-nav {
        display: flex;
    }
    
    .main-content-wrapper {
        margin-left: var(--sidebar-width);
        padding-bottom: 0;
    }
    
    .bottom-nav {
        display: none;
    }
    
    #section-menu .container {
        max-width: 100%;
        padding: 24px;
    }

    /* PC表示: トーストをコンテンツエリア中央に配置 */
    .update-toast,
    #dynamic-update-toast,
    #whats-new-popup {
        left: calc(50% + var(--sidebar-width) / 2) !important;
    }
}


/* ====================================================
   Phase 1.1 モバイル表示問題 - 強化版修正
   ==================================================== */

/* 最優先: モバイルでのコンテナ幅を完全に制御 */
@media (max-width: 767px) {
    /* bodyとhtmlのpadding/marginを完全に0に */
    html {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* app-wrapperも調整 */
    .app-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* すべてのセクション内のコンテナを制限 */
    .content-section .container,
    #section-menu .container,
    #section-home .container,
    #section-tools .container,
    #section-training .container,
    #section-competition .container {
        max-width: 100% !important;
        width: 100% !important;
        min-width: auto !important;
        padding: 16px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* メインコンテンツラッパー */
    .main-content-wrapper {
        max-width: 100vw !important;
        width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* すべてのセクション */
    .content-section {
        max-width: 100vw !important;
        width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }
    
    /* 保存済みメニュー一覧 */
    #saved-menus-list,
    #saved-menus-list > *,
    .menu-item,
    .menu-card {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* メニュー作成フォーム */
    #cycle-form,
    #bench-cycle-form,
    #peaking-form,
    #bench-peaking-form,
    .input-section {
        max-width: 100% !important;
        width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* 3カラムレイアウトを1カラムに */
    .three-column-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 各カラム */
    .column-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        box-sizing: border-box !important;
    }
    
    /* mode-selector（タブボタン） */
    .mode-selector {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    
    .mode-btn {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 140px !important;
        max-width: 100% !important;
        font-size: 13px !important;
        padding: 10px 8px !important;
        box-sizing: border-box !important;
    }
    
    /* テーブル要素（プレビューテーブルはインラインラッパーがスクロールを担当するため除外） */
    table:not(.preview-table) {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* 入力フォーム */
    input[type="text"],
    input[type="date"],
    input[type="number"],
    select,
    textarea {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* フリートレーニングのセット入力はflex比率 */
    input.free-weight-input {
        width: auto !important;
        flex: 3 !important;
        min-width: 0 !important;
    }
    input.free-reps-input {
        width: auto !important;
        flex: 2 !important;
        min-width: 0 !important;
    }
    select.free-rpe-select {
        width: auto !important;
        flex: 5 !important;
        min-width: 0 !important;
    }
    
    /* ボタン */
    button,
    .btn {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* プログレステーブル */
    #progress-table-container,
    .progress-table {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* カレンダー */
    #calendar-grid-container,
    .calendar-grid {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Phase 1.2: ダッシュボード（section-home）のpadding */
    #section-home {
        padding: 16px !important;
    }
    
    /* ダッシュボードカードのmargin調整 */
    .dashboard-card {
        margin-bottom: 16px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* bottom-navの幅を確実に画面幅に */
    .bottom-nav {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

}

/* より広い範囲でも念のため制限 */
@media (max-width: 1023px) {
    body {
        overflow-x: hidden !important;
    }
    
    .app-wrapper {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* ====================================================
   Phase 1.2: ダッシュボード（v0デザイン準拠）
   ==================================================== */

/* ダッシュボードカードの基本 */
.dashboard-card {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
}

/* ウェルカムカード */
.welcome-card-v2 {
    background: linear-gradient(135deg, #a00f2c 0%, #dc143c 100%);
    text-align: center;
    padding: 14px 20px !important;
    margin-bottom: 12px !important;
}

.welcome-date {
    font-size: 15px;
    font-weight: 700;
    color: white;
    margin: 0;
}

/* カードタイトル */
.card-title-v2 {
    font-size: 17px;
    font-weight: 600;
    color: white;
    margin: 0 0 16px 0;
}

/* 現在のトレーニングカード */
.training-menu-name {
    font-size: 16px;
    color: white;
    margin: 0 0 8px 0;
}

.training-progress {
    font-size: 14px;
    color: #999;
    margin: 0 0 12px 0;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: #333;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #a00f2c 0%, #dc143c 100%);
    transition: width 0.3s ease;
}

.btn-detail {
    width: 100%;
    background: #dc143c;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-detail:hover {
    background: #ff1744;
}

/* 今日の予定カード */
.schedule-item {
    padding: 12px 0;
    border-bottom: 1px solid #333;
}

.schedule-item:last-child {
    border-bottom: none;
}

.schedule-exercise {
    font-size: 16px;
    color: white;
    margin: 0 0 4px 0;
}

.schedule-details {
    font-size: 14px;
    color: #999;
    margin: 0;
}

.btn-record {
    width: 100%;
    background: #dc143c;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
    transition: background 0.2s ease;
}

.btn-record:hover {
    background: #ff1744;
}

/* 最近の記録カード */
.record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #333;
}

.record-item:last-of-type {
    border-bottom: none;
}

.record-text {
    font-size: 14px;
    color: white;
    margin: 0;
}

.record-check {
    color: #4caf50;
    font-size: 20px;
}

.btn-view-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    color: #dc143c;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 0 0 0;
    cursor: pointer;
    margin-top: 8px;
}

.btn-view-all:hover {
    color: #ff1744;
}

/* 空状態メッセージ */
.no-schedule,
.no-records {
    color: #666;
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
}

/* レスポンシブ */
@media (min-width: 768px) {
    .dashboard-card {
        padding: 28px;
    }
}

@media (min-width: 1024px) {
    #section-home {
        max-width: 600px;
        margin: 0 auto;
        padding: 24px;
    }
}

/* --------------------------------------------------
   ホーム画面: クイックアクセスボタン
   -------------------------------------------------- */
.quick-access-card {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 16px;
    border: none !important;
}

.quick-access-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.quick-access-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 6px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-access-btn:active {
    transform: scale(0.97);
    border-color: #dc143c;
    background: #222;
}

.quick-access-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.quick-access-label {
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
}

.quick-access-record {
    border-color: #dc143c;
    background: linear-gradient(135deg, rgba(220,20,60,0.15) 0%, rgba(139,0,0,0.15) 100%);
}

/* --------------------------------------------------
   フィードバックボタン
   -------------------------------------------------- */
.feedback-buttons {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #333;
}
.feedback-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 10px 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.feedback-btn:active {
    opacity: 0.7;
}
.feedback-btn-icon {
    font-size: 16px;
}
.feedback-btn-line {
    background: #06C755;
    color: #fff;
}
.feedback-btn-mail {
    background: #dc143c;
    color: #fff;
}

/* --------------------------------------------------
   ホーム画面: ニュースフィード
   -------------------------------------------------- */
.news-feed-card {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}

.news-feed-loading,
.news-feed-empty {
    text-align: center;
    padding: 16px 0;
    color: #666;
    font-size: 14px;
}

.news-item {
    padding: 16px 0;
    border-bottom: 1px solid #333;
}

.news-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-item:first-child {
    padding-top: 0;
}

.news-item-date {
    font-size: 12px;
    color: #666;
    margin: 0 0 4px 0;
}

.news-item-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

.news-badge-product {
    background: #dc143c;
    color: #fff;
}

.news-badge-sale {
    background: #ff8c00;
    color: #fff;
}

.news-badge-column {
    background: #333;
    color: #ccc;
}

.news-badge-video {
    background: #ff0000;
    color: #fff;
}

.news-badge-update {
    background: #fff;
    color: #000;
}

.news-item-header {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.news-item-toggle {
    display: inline-block;
    font-size: 10px;
    margin-right: 6px;
    color: #888;
    transition: transform 0.2s ease;
}

.news-item-open .news-item-toggle {
    transform: rotate(90deg);
}

.news-item-body {
    display: none;
    padding-top: 4px;
}

.news-item-open .news-item-body {
    display: block;
}

.news-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #dc143c;
    margin: 6px 0 4px 0;
    line-height: 1.4;
}

.news-item-summary {
    font-size: 13px;
    color: #fff;
    margin: 0;
    line-height: 1.5;
}

.news-item-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: #dc143c;
    text-decoration: none;
    font-weight: 600;
}

.news-item-link:active {
    color: #ff1744;
}

.news-summary-link {
    color: #dc143c;
    text-decoration: underline;
    font-weight: 600;
    font-size: 13px;
    word-break: break-all;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(220, 20, 60, 0.3);
}

.news-summary-link:active {
    color: #ff1744;
}

/* --------------------------------------------------
   ホーム画面: 今日のヒント
   -------------------------------------------------- */
.daily-tip-card {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
}

.daily-tip-text {
    font-size: 14px;
    color: #ddd;
    line-height: 1.7;
    margin: 0;
}

/* ==================================================
   Phase 1.3: トレーニングセクション
   ================================================== */

#section-training {
    padding-bottom: 100px;
}

.training-actions {
    padding: 0 16px;
}

/* Training tab 2×2 grid */
.training-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.training-grid-btn {
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 14px 6px;
    text-align: center;
    line-height: 1.3;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.training-grid-btn:active {
    transform: scale(0.97);
    opacity: 0.9;
}

.training-grid-btn--primary {
    background: linear-gradient(135deg, #dc143c, #a00f2c);
}

.training-grid-btn--secondary {
    background: #333;
}

.training-grid-btn--active {
    background: #dc143c !important;
    border-color: #dc143c !important;
    color: white !important;
}

.btn-action-primary {
    background: linear-gradient(135deg, #a00f2c 0%, #dc143c 100%) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-action-primary:hover {
    background: linear-gradient(135deg, #b01030 0%, #ff1744 100%) !important;
    transform: translateY(-1px);
}

.btn-action-secondary:hover {
    border-color: #dc143c !important;
    background: #222 !important;
}

.training-record-row:last-child {
    border-bottom: none !important;
}

@media (min-width: 1024px) {
    #section-training {
        padding: 24px;
        padding-bottom: 100px;
    }
    .record-set {
        /* PCワイドでも 40% / 30% / 30% を維持 */
        grid-template-columns: 2fr 1.5fr 1.5fr;
    }
}

/* ================================================
   トレーニングメモカード
   ================================================ */

.notes-card-v2 {
    background: #1a1a1a !important;
    border: 2px solid #333 !important;
}

.training-notes-textarea {
    width: 100% !important;
    min-height: 120px !important;
    background: #0a0a0a !important;
    border: 2px solid #333 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    resize: vertical !important;
    margin-bottom: 12px !important;
    transition: border-color 0.3s ease;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
}

.training-notes-textarea:focus {
    outline: none !important;
    border-color: #dc143c !important;
    background: #111 !important;
}

.training-notes-textarea::placeholder {
    color: #666 !important;
    opacity: 1 !important;
}

/* iPhone Safari専用の追加設定 */
@supports (-webkit-touch-callout: none) {
    .training-notes-textarea {
        -webkit-text-fill-color: #fff !important;
    }
}

.btn-save-notes {
    width: 100% !important;
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%) !important;
    color: white !important;
    border: none !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    box-sizing: border-box !important;
}

.btn-save-notes:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 20, 60, 0.4) !important;
}

.btn-save-notes:active {
    transform: translateY(0);
}

.btn-save-notes:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed;
}

.btn-save-notes span {
    display: inline-block;
}

.notes-save-status {
    text-align: center;
    margin-top: 8px;
    font-size: 13px;
    color: #4ade80;
    min-height: 20px;
}

.notes-save-status.error {
    color: #ef4444;
}

@media (max-width: 430px) {
    .training-notes-textarea {
        min-height: 120px;
        font-size: 13px;
        padding: 12px;
    }
    
    .btn-save-notes {
        padding: 12px;
        font-size: 15px;
    }
}

/* ===== ウィザード用スタイル ===== */

/* 通常モードセクションの制御 */
#wizard-section.active ~ #classic-section,
#classic-section.hidden {
    display: none !important;
}

/* モード切り替えボタン */
.mode-toggle-btn {
    background: #1a1a1a;
    color: #fff;
    border: 2px solid #333;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    min-width: 180px;
    justify-content: center;
}

.mode-toggle-btn:hover {
    background: #2a2a2a;
    border-color: #dc143c;
}

.mode-toggle-btn.active {
    background: #dc143c;
    border-color: #dc143c;
    color: #fff;
}

/* ウィザードステップのアニメーション */
.wizard-step {
    animation: fadeIn 0.3s ease-in;
}

.program-type-btn.selected {
    background: #dc143c !important;
    border-color: #dc143c !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 戻るボタン */
.btn-secondary {
    background: #2a2a2a;
    color: #fff;
    border: 2px solid #555;
    padding: 16px 30px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    line-height: 1.5;
}

.btn-secondary:hover {
    background: #3a3a3a;
    border-color: #dc143c;
}

.btn-secondary:active {
    background: #1a1a1a;
}

/* 次へボタン無効化 */
.btn-create:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-create:disabled:hover {
    background: #dc143c;
    transform: none;
}

/* ウィザード入力フィールド */
.wizard-step input[type="text"],
.wizard-step input[type="date"],
.wizard-step input[type="number"] {
    transition: border-color 0.3s;
}

.wizard-step input[type="text"]:focus,
.wizard-step input[type="date"]:focus,
.wizard-step input[type="number"]:focus {
    outline: none;
    border-color: #dc143c !important;
}

/* date入力のカレンダーアイコン（全体） */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(1);
    opacity: 0.8;
    padding: 4px;
    min-width: 20px;
    min-height: 20px;
}

input[type="date"] {
    color-scheme: dark;
    cursor: pointer;
}

/* iOS Safari でタップ領域を確保 */
input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

/* エラーメッセージ */
.error-message {
    animation: shake 0.3s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ウィザードナビゲーション内のボタンスタイル統一 */
#wizard-nav .btn-create {
    padding: 12px 24px;
    font-size: 16px;
    line-height: 1.4;
    min-height: 48px;
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#wizard-nav .btn-secondary {
    padding: 12px 24px;
    font-size: 16px;
    line-height: 1.4;
    min-height: 48px;
}

/* iPhone対応 */
@media (max-width: 430px) {
    .mode-toggle-btn {
        padding: 10px 16px;
        font-size: 14px;
        min-width: 150px;
    }
    
    #wizard-nav {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

    #wizard-nav.single-btn {
        grid-template-columns: 1fr !important;
    }

    #wizard-back-btn {
        order: 1;
    }

    #wizard-next-btn {
        order: 2;
    }

    #wizard-nav .btn-secondary {
        padding: 10px 12px;
        font-size: 14px;
        width: 100%;
        min-height: 42px;
    }

    #wizard-nav .btn-create {
        padding: 10px 12px;
        font-size: 14px;
        width: 100%;
        min-height: 42px;
    }
    
    /* ウィザード入力フィールドのiPhone対応 */
    .wizard-step input[type="text"],
    .wizard-step input[type="date"],
    .wizard-step input[type="number"] {
        font-size: 16px !important;  /* ズーム防止 */
    }
    
    .wizard-step select {
        font-size: 16px !important;  /* ズーム防止 */
    }
    
    .radio-option {
        min-width: 100px !important;
    }
    
    /* STEP 2のグリッドを縦並びに */
    .wizard-step > div > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* 旧グリッド対応は不要（新レイアウトはflex） */
}

/* ==================================================
   リアルタイムプレビュー機能用スタイル
   ================================================== */

.preview-area {
    margin-top: 40px;
    padding: 24px;
    background: #0f0f0f;
    border: 2px solid #333;
    border-radius: 10px;
    animation: fadeIn 0.3s ease-in;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #dc143c;
}

.preview-title {
    color: #dc143c;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-toggle {
    background: none;
    border: none;
    color: #dc143c;
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.3s;
    line-height: 1;
}

.preview-toggle:hover {
    transform: scale(1.2);
}

.preview-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.preview-content.collapsed {
    max-height: 0;
    opacity: 0;
}

.preview-content.expanded {
    max-height: 5000px;
    opacity: 1;
    overflow: visible;
}

/* ウィザードStep5プレビューの親要素が画面幅を超えないようにする */
#wizard-steps {
    max-width: 100%;
    overflow: hidden;
}

/* モバイル・タブレット: ウィザードナビはインライン配置（フォーム末尾） */

.preview-table {
    width: 100%;
    min-width: 600px; /* 最小幅を設定 */
    border-collapse: collapse;
    margin-top: 16px;
    background: #1a1a1a;
    border-radius: 8px;
}

.preview-table thead {
    background: #2a2a2a;
}

.preview-table th {
    padding: 12px;
    text-align: center;
    color: #dc143c;
    font-weight: 600;
    border-bottom: 2px solid #333;
    white-space: nowrap;
    min-width: 80px;
}

.preview-table td {
    padding: 12px;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid #333;
    white-space: nowrap;
    min-width: 80px;
}

.preview-table tbody tr:last-child td {
    border-bottom: none;
}

.preview-table tbody tr:hover {
    background: #252525;
}

.preview-loading {
    text-align: center;
    padding: 20px;
    color: #999;
    font-style: italic;
}

.preview-error {
    padding: 16px;
    background: #2a1a1a;
    border: 2px solid #dc143c;
    border-radius: 8px;
    color: #ff6b6b;
    margin-top: 16px;
}

.preview-note {
    margin-top: 16px;
    padding: 12px;
    background: #1a1a1a;
    border-left: 4px solid #dc143c;
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.6;
}

/* モバイル対応 */
@media (max-width: 430px) {
    .preview-area {
        padding: 16px;
        margin-top: 30px;
    }
    
    .preview-title {
        font-size: 15px;
    }
    
    .preview-table {
        font-size: 14px;
    }
    
    .preview-table th,
    .preview-table td {
        padding: 8px;
        white-space: nowrap;
    }
}

/* ==================================================
   スティッキープレビューパネル（廃止: 全デバイスでインラインプレビューに統一）
   ================================================== */

/* ==================================================
   スティッキープレビューパネル（モバイル用）
   ================================================== */

#sticky-preview-panel {
    position: fixed;
    bottom: 64px;
    left: 0;
    right: 0;
    z-index: 999;
    background: #1a1a1a;
    border-top: 2px solid #dc143c;
    max-height: 40vh;
    overflow: hidden;
}

#sticky-preview-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    position: relative;
}

.sticky-preview-handle-bar {
    display: none;
}

.sticky-preview-handle-label {
    color: #dc143c;
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
}

#sticky-preview-content {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(40vh - 36px);
    padding: 0 8px 8px;
    -webkit-overflow-scrolling: touch;
}

/* スティッキーパネル内のプレビュー表をコンパクトに */
#sticky-preview-content .preview-table {
    font-size: 11px;
    margin-top: 0;
    min-width: 600px;
}

#sticky-preview-content .preview-table th {
    padding: 3px 5px;
    font-size: 10px;
    min-width: 60px;
}

#sticky-preview-content .preview-table td {
    padding: 3px 5px;
    font-size: 11px;
    min-width: 60px;
}

#sticky-preview-content .preview-table thead {
    background: #222;
}

/* スティッキーパネル内: ネストスクロール解消（iOS対応）
   内側のテーブルラッパーのoverflowを無効化し、
   #sticky-preview-contentが唯一のスクロールコンテナになるようにする */
#sticky-preview-content > div {
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
}

/* スティッキーパネル内の補足テキストを非表示 */
#sticky-preview-content .preview-note {
    display: none;
}

/* スティッキーパネル内の試技重量の目安を小さく（iOS自動拡大防止） */
#sticky-preview-content .shikai-proposal {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}
#sticky-preview-content .shikai-desc {
    font-size: 10px !important;
}
#sticky-preview-content .shikai-footer {
    font-size: 10px !important;
}
#sticky-preview-content .shikai-title {
    font-size: 11px !important;
}
#sticky-preview-content .shikai-table {
    font-size: 11px !important;
}
#sticky-preview-content .shikai-table th,
#sticky-preview-content .shikai-table td {
    padding: 3px 5px !important;
}

/* モバイルでスティッキーパネル表示時のコンテンツ下余白（パネル40vh + ボトムナビ64px分） */
.sticky-preview-active #wizard-container {
    padding-bottom: 360px;
}

/* デスクトップではスティッキーパネルを非表示 */
@media (min-width: 1024px) {
    #sticky-preview-panel {
        display: none !important;
    }
}

/* ==================================================
   試技重量の目安セクション
   ================================================== */

/* デスクトップ: 元のサイズ、矢印右側 */
.shikai-proposal { padding: 16px; }
.shikai-header { justify-content: space-between; flex-direction: row-reverse; }
.shikai-arrow { font-size: 12px; margin-left: 8px; }
.shikai-title { font-size: 15px; }
.shikai-desc { font-size: 12px; margin: 8px 0 10px 0; }
.shikai-table { font-size: 13px; }
.shikai-table th,
.shikai-table td { padding: 6px 8px; }
.shikai-footer { font-size: 11px; margin: 8px 0 0 0; text-align: right; }

/* モバイル・タブレット: 小さい文字、矢印左側 */
@media (max-width: 1023px) {
    .shikai-proposal {
        padding: 8px 10px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    .shikai-header { flex-direction: row; justify-content: flex-start; }
    .shikai-arrow { font-size: 10px; margin-right: 6px; margin-left: 0; }
    .shikai-title { font-size: 11px !important; }
    .shikai-desc { font-size: 10px !important; margin: 4px 0 6px 0; color: #888 !important; }
    .shikai-table { font-size: 11px !important; }
    .shikai-table th,
    .shikai-table td { padding: 3px 5px; }
    .shikai-footer { font-size: 10px !important; margin: 4px 0 0 0; text-align: left !important; }
}

/* ==================================================
   デスクトップ: プレビューsticky + コンパクト化
   ================================================== */
@media (min-width: 1024px) {
    /* stickyのためにhtml/bodyのoverflow-xをclipに変更
       (clipはスクロールコンテナを作らずstickyを妨げない) */
    html,
    body {
        overflow-x: clip;
    }

    /* sticky動作のためにoverflow: hiddenを解除 */
    #section-menu,
    #section-menu .container,
    #wizard-steps,
    #wizard-container {
        overflow: visible !important;
    }

    /* プレビューエリアをstickyに */
    .preview-area.sticky-mode {
        position: sticky;
        top: 10px;
        z-index: 10;
        margin-top: 0;
        margin-bottom: 20px;
    }

    /* ウィザード内のフォーム要素をコンパクトに */
    .wizard-step .form-group {
        margin-bottom: 12px;
    }

    /* 補助種目のコンパクト化 */
    .wizard-step .accessory-item {
        margin-bottom: 6px;
    }

    /* プレビュー表自体もコンパクトに */
    .preview-area.sticky-mode .preview-table th,
    .preview-area.sticky-mode .preview-table td {
        padding: 8px 10px;
    }

    .preview-area.sticky-mode .preview-area {
        padding: 16px;
    }
}

/* ==================================================
   Phase 4: マイメニュー機能のスタイル
   ================================================== */

/* メニューカードのホバーエフェクト */
.menu-card {
    transition: all 0.2s ease;
}

.menu-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 20, 60, 0.3);
}

/* メニュー詳細モーダル */
#menu-detail-modal .modal-content {
    max-width: 1000px;
    max-height: 90vh;
    /* clipはhiddenと同じクリッピングだがスクロールコンテナを作らない
       → 内部のoverflow-x:autoテーブルスクロールが正常動作する */
    overflow-x: clip;
    overflow-y: hidden;
}

#menu-detail-modal .modal-body {
    /* clipでスクロールコンテナを作らず、テーブルの横スクロールを阻害しない */
    overflow-x: clip;
}

#menu-detail-content {
    padding: 20px;
    background: #0f0f0f;
    border-radius: 8px;
}

#menu-detail-content > div {
    max-width: 100%;
    overflow: hidden;
}

/* モーダル内のコンテンツレイアウト */
#menu-detail-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#menu-detail-content .table-scroll-wrapper {
    overflow-x: auto;
}

#menu-detail-content table {
    min-width: 100%;
    width: auto;
    margin-bottom: 0;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .menu-filters {
        padding: 16px !important;
    }
    
    #menu-cards-container > div {
        grid-template-columns: 1fr !important;
    }
    
    #menu-detail-modal .modal-content {
        max-width: 95%;
        margin: 20px;
    }
}

/* ==================================================
   画像保存用スタイル（一時的に適用）
   ================================================== */
.image-export-mode {
    background: white !important;
    overflow: visible !important;
    max-width: none !important;
    max-height: none !important;
}

.image-export-mode * {
    color: black !important;
    background: white !important;
    border-color: black !important;
    overflow: visible !important;
    max-width: none !important;
}

.image-export-mode table {
    border-collapse: collapse !important;
    background: white !important;
    width: auto !important;
    min-width: max-content !important;
}

.image-export-mode th,
.image-export-mode td {
    border: 1px solid black !important;
    color: black !important;
    background: white !important;
    white-space: nowrap !important;
}

.image-export-mode h3,
.image-export-mode h4 {
    color: black !important;
    border-color: black !important;
}

.image-export-mode .table-scroll-wrapper {
    width: auto !important;
    overflow: visible !important;
    max-width: none !important;
}

.image-export-mode .tables-container {
    display: block !important;
    width: max-content !important;
}

.image-export-mode .table-wrapper {
    width: max-content !important;
    max-width: none !important;
}

.image-export-mode#menu-detail-content > div {
    max-width: none !important;
    overflow: visible !important;
}

.image-export-mode div {
    background: white !important;
}

.image-export-mode p {
    color: black !important;
}

/* 警告文は赤背景を維持 */
.image-export-mode div[style*="background: #ff6b6b"] {
    background: #ff6b6b !important;
}

.image-export-mode div[style*="background: #ff6b6b"] * {
    color: white !important;
}

/* ==================================================
   ツールセクション
   ================================================== */

/* ツール選択カード一覧 */
.tools-card-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 16px;
    max-width: 600px;
    margin: 0 auto;
}

.tool-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.tool-card:hover {
    border-color: #dc143c;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 20, 60, 0.2);
}

.tool-card-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.tool-card-info {
    flex: 1;
}

.tool-card-info h3 {
    margin: 0 0 2px 0;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
}

.tool-card-info p {
    margin: 0;
    font-size: 11px;
    color: #999;
}

.tool-card-arrow {
    font-size: 20px;
    color: #666;
    flex-shrink: 0;
}

/* ルーティン作成画面 */
.routine-creator {
    padding: 0 16px;
}

.routine-back-btn {
    background: none;
    border: none;
    color: #dc143c;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 10px;
    transition: opacity 0.2s;
}

.routine-back-btn:hover {
    opacity: 0.7;
}

.routine-title {
    font-size: 22px;
    color: #fff;
    margin: 0 0 20px 0;
    font-weight: 700;
}

/* ステップ共通 */
.routine-step {
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.routine-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.routine-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #dc143c;
    color: white;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.routine-step-label {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.routine-step-desc {
    font-size: 13px;
    color: #999;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

/* 曜日トグルボタン */
.routine-day-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}

.routine-day-btn {
    width: 48px;
    height: 48px;
    border: 2px solid #444;
    border-radius: 12px;
    background: #0a0a0a;
    color: #ccc;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.routine-day-btn:hover {
    border-color: #dc143c;
}

.routine-day-btn.selected {
    background: #dc143c;
    border-color: #dc143c;
    color: white;
    box-shadow: 0 2px 8px rgba(220, 20, 60, 0.4);
}

.routine-day-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* トレーニング日数ボタン */
.routine-freq-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.routine-freq-btn {
    padding: 12px 20px;
    border: 2px solid #444;
    border-radius: 10px;
    background: #0a0a0a;
    color: #ccc;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 60px;
    text-align: center;
}

.routine-freq-btn:hover {
    border-color: #dc143c;
}

.routine-freq-btn.selected {
    background: #dc143c;
    border-color: #dc143c;
    color: white;
    box-shadow: 0 2px 8px rgba(220, 20, 60, 0.4);
}

/* 種目選択ボタン */
.routine-sub-section {
    margin-bottom: 20px;
}

.routine-sub-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #aaa;
    margin-bottom: 10px;
}

.routine-exercise-buttons {
    display: flex;
    gap: 10px;
}

.routine-exercise-btn {
    flex: 1;
    padding: 14px 10px;
    border: 2px solid #444;
    border-radius: 10px;
    background: #0a0a0a;
    color: #ccc;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.routine-exercise-btn span {
    font-size: 11px;
    font-weight: 400;
    color: #777;
}

.routine-exercise-btn:hover {
    border-color: #dc143c;
}

.routine-exercise-btn.selected {
    background: #dc143c;
    border-color: #dc143c;
    color: white;
    box-shadow: 0 2px 8px rgba(220, 20, 60, 0.4);
}

.routine-exercise-btn.selected span {
    color: rgba(255, 255, 255, 0.8);
}

/* 組み合わせスタイル注釈 */
.routine-combo-note {
    font-size: 12.5px;
    color: #aaa;
    line-height: 1.6;
    margin: 0 0 10px 0;
}

/* 組み合わせスタイル選択 */
.routine-combo-buttons {
    display: flex;
    gap: 10px;
}

.routine-combo-btn {
    flex: 1;
    padding: 12px 10px;
    border: 2px solid #444;
    border-radius: 10px;
    background: #0a0a0a;
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.routine-combo-btn:hover {
    border-color: #dc143c;
}

.routine-combo-btn.selected {
    background: #dc143c;
    border-color: #dc143c;
    color: white;
    box-shadow: 0 2px 8px rgba(220, 20, 60, 0.4);
}

.routine-combo-title {
    font-size: 15px;
    font-weight: 700;
}

.routine-combo-desc {
    font-size: 11px;
    color: #999;
    line-height: 1.3;
}

.routine-combo-btn.selected .routine-combo-desc {
    color: rgba(255, 255, 255, 0.75);
}

/* 核の曜日ボタン（横並び） */
.routine-core-day-btns {
    gap: 8px;
}

/* 結果エリア */
.routine-results-message {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 14px;
    line-height: 1.6;
}

.routine-results-message.error {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 10px;
    padding: 20px;
}

.routine-results-message.warning {
    color: #ffa500;
    background: rgba(255, 165, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
}

.routine-results-count {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 16px;
    text-align: center;
}

.routine-results-count strong {
    color: #dc143c;
}

/* パターンカード */
.routine-pattern-card {
    background: #111;
    border: 2px solid #333;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
    transition: border-color 0.2s;
}

.routine-pattern-card:hover {
    border-color: #555;
}

.routine-pattern-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.routine-pattern-label {
    font-size: 16px;
    font-weight: 700;
    color: #dc143c;
}

.routine-pattern-badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

.routine-pattern-badge.recommended {
    background: rgba(220, 20, 60, 0.2);
    color: #dc143c;
    border: 1px solid rgba(220, 20, 60, 0.3);
}

/* パターン内のスケジュール行 */
.routine-schedule-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #222;
}

.routine-schedule-row:last-child {
    border-bottom: none;
}

.routine-schedule-day {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.routine-schedule-day.training {
    background: #dc143c;
    color: white;
}

.routine-schedule-day.rest {
    background: #222;
    color: #666;
}

.routine-schedule-content {
    flex: 1;
}

.routine-schedule-main {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}

.routine-schedule-assist {
    font-size: 12px;
    color: #888;
}

.routine-schedule-rest-label {
    font-size: 14px;
    color: #555;
    font-style: italic;
}

/* 6日以上の警告 */
.routine-warning-box {
    background: rgba(255, 60, 60, 0.1);
    border: 2px solid rgba(255, 60, 60, 0.3);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    color: #ff6b6b;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
}

/* パターン個別の警告 */
.routine-pattern-warning {
    background: rgba(255, 165, 0, 0.1);
    border: 1px solid rgba(255, 165, 0, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    color: #ffa500;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

/* 週1日の注釈 */
.routine-note {
    font-size: 12px;
    color: #888;
    margin-top: 8px;
    font-style: italic;
}

/* フォールバック提案セクション */
.routine-fallback-section {
    margin-top: 24px;
    padding: 16px;
    background: #0d0d0d;
    border: 1px solid #333;
    border-radius: 12px;
}

.routine-fallback-title {
    font-size: 16px;
    font-weight: 700;
    color: #f0f0f0;
    margin-bottom: 16px;
}

.routine-fallback-block {
    margin-bottom: 16px;
}

.routine-fallback-block:last-child {
    margin-bottom: 0;
}

.routine-fallback-heading {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 10px;
    line-height: 1.5;
}

.routine-fallback-card {
    border-color: #555 !important;
    opacity: 0.9;
}

.routine-fallback-day-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.routine-fallback-day-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #e0e0e0;
    padding: 8px 12px;
    background: #1a1a1a;
    border-radius: 8px;
    border: 1px solid #333;
}

.routine-fallback-day-icon {
    font-size: 16px;
}

/* iPhone 16 最適化 */
@media (max-width: 430px) {
    .routine-day-btn {
        width: 40px;
        height: 40px;
        font-size: 14px;
        border-radius: 10px;
    }
    
    .routine-exercise-btn {
        padding: 12px 8px;
        font-size: 16px;
    }
    
    .routine-combo-btn {
        padding: 10px 8px;
    }
    
    .routine-combo-title {
        font-size: 14px;
    }
    
    .routine-combo-desc {
        font-size: 10px;
    }
    
    .routine-step {
        padding: 16px;
    }
    
    .routine-title {
        font-size: 18px;
    }
}

/* ==================================================
   フレキシブルルーティン専用スタイル
   ================================================== */

.flex-routine-subtitle {
    font-size: 13px;
    color: #888;
    margin: -10px 0 20px 0;
    line-height: 1.5;
}

/* サイクル長ボタンのヒントテキスト */
.flex-cycle-hint {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #777;
    margin-top: 2px;
}

.routine-freq-btn.selected .flex-cycle-hint {
    color: rgba(255, 255, 255, 0.75);
}

/* トレーニング/休息日カウンター */
.flex-day-counter {
    font-size: 13px;
    color: #aaa;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #1a1a1a;
    border-radius: 8px;
    border: 1px solid #333;
}

.flex-day-counter strong {
    color: #dc143c;
}

/* 「次へ」ボタン */
.flex-next-btn {
    width: 100%;
    background: #dc143c !important;
    color: #fff !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px !important;
}

.flex-next-btn:hover {
    background: #b01030 !important;
}

/* サイクル繰り返しビジュアライゼーション */
.flex-cycle-viz {
    margin-top: 16px;
    padding: 12px;
    background: #111;
    border-radius: 8px;
    border: 1px solid #333;
}

.flex-cycle-viz-label {
    font-size: 11px;
    color: #777;
    margin-bottom: 8px;
}

.flex-cycle-viz-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.flex-cycle-viz-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.flex-cycle-viz-dot.training {
    background: #dc143c;
}

.flex-cycle-viz-dot.rest {
    background: #333;
}

.flex-cycle-viz-separator {
    width: 1px;
    height: 20px;
    background: #555;
    margin: 0 2px;
    flex-shrink: 0;
}

/* 結果カード内のDay表示（曜日の代わり） */
.flex-schedule-day-label {
    min-width: 48px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* サイクル情報ヘッダー */
.flex-cycle-info {
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #1a1a1a;
    border-radius: 6px;
    text-align: center;
}

.flex-cycle-info strong {
    color: #dc143c;
}

/* ==================================================
   MAX換算ツール専用スタイル
   ================================================== */

/* 種目セレクター */
.max-conv-exercise-selector {
    margin-bottom: 16px;
}

.max-conv-exercise-label {
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
    font-weight: 500;
}

.max-conv-exercise-btns {
    display: flex;
    gap: 6px;
}

.max-conv-exercise-btn {
    flex: 1;
    padding: 10px 4px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    line-height: 1.3;
}

.max-conv-exercise-btn.selected {
    background: #dc143c;
    border-color: #dc143c;
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 20, 60, 0.3);
}

.max-conv-exercise-btn:not(.selected):active {
    background: #252525;
}

/* セグメンテッドコントロール（モード切替） */
.max-conv-mode-toggle {
    display: flex;
    background: #1a1a1a;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 20px;
    border: 1px solid #333;
}

.max-conv-mode-btn {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.max-conv-mode-btn.active {
    background: #dc143c;
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 20, 60, 0.3);
}

/* 入力フィールド */
.max-conv-input-wrap {
    position: relative;
    flex: 1;
}

.max-conv-input {
    width: 100%;
    padding: 14px 50px 14px 16px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.max-conv-input:focus {
    border-color: #dc143c;
}

.max-conv-input::placeholder {
    color: #555;
    font-weight: 400;
}

.max-conv-unit {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
}

/* Mode B: 2カラム入力行 */
.max-conv-input-row {
    display: flex;
    gap: 12px;
}

/* レップ数ドロップダウン */
.mc-cycle-select {
    width: 100%;
    padding: 12px 16px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
    margin-bottom: 16px;
}

.mc-cycle-select:focus {
    border-color: #dc143c;
}

/* 結果カード */
.mc-result-card {
    margin-top: 16px;
    padding: 20px 16px;
    background: #1a1a1a;
    border-radius: 12px;
    border: 1px solid #333;
}

/* 現在の実力セクション */
.mc-current-section {
    margin-bottom: 16px;
    text-align: center;
}

.mc-result-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
    font-weight: 500;
}

.mc-current-weight {
    font-size: 22px;
    font-weight: 700;
    color: #e0e0e0;
}

/* 上乗せ%コントロール */
.mc-add-pct-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 0;
    margin-bottom: 16px;
    border-top: 1px solid #2a2a2a;
    border-bottom: 1px solid #2a2a2a;
}

.mc-add-pct-label {
    font-size: 13px;
    color: #999;
    font-weight: 500;
}

.mc-add-pct-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ダブルタップズーム防止（ピンチズームは維持） */
.mc-add-pct-btn,
.wizard-aux-minus-btn,
.wizard-aux-plus-btn,
.wizard-down-adj-minus-btn,
.wizard-down-adj-plus-btn,
.wizard-start-adj-minus-btn,
.wizard-start-adj-plus-btn,
.wizard-hybrid-minus-btn,
.wizard-hybrid-plus-btn,
.wizard-goal-minus-btn,
.wizard-goal-plus-btn,
.wizard-num-minus-btn,
.wizard-num-plus-btn,
.wizard-aux-sets-minus-btn,
.wizard-aux-sets-plus-btn,
.wizard-aux-reps-minus-btn,
.wizard-aux-reps-plus-btn,
.mod-aux-minus-btn,
.mod-aux-plus-btn,
.mod-aux-sets-minus-btn,
.mod-aux-sets-plus-btn,
.mod-aux-reps-minus-btn,
.mod-aux-reps-plus-btn,
.mod-aux-stepper,
.mod-aux-adjustment-display,
.mod-aux-sets-display,
.mod-aux-reps-display {
    touch-action: manipulation;
}

/* 実績閲覧モーダル: ダブルタップズーム抑制 */
#view-records-modal .modal-content {
    touch-action: manipulation;
}

/* ================================================================
   全般的なダブルタップズーム抑制（ピンチズームは維持）
   モバイルで押し間違えによるダブルタップ拡大を防止
   touch-action: manipulation はパン/ピンチズームを許可し
   ダブルタップズームのみを抑制する
================================================================ */
button,
a,
label,
select,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
[role="button"],
[onclick],
.clickable,
.bottom-nav,
.bottom-nav-item,
.sidebar-nav-item,
.tool-card,
.tool-card-arrow,
.nav-tab,
.tab-btn,
.it-tab-btn,
.card,
.home-card,
.menu-card,
.record-card,
.competition-card,
.tips-card,
.settings-card,
.plan-card,
.hint-card,
.action-btn,
.icon-btn,
.close-btn,
.modal-close-btn,
.segmented-control label,
.chip,
.badge-clickable,
.accordion-header,
.dropdown-toggle,
.toggle-switch,
.fab,
.floating-btn {
    touch-action: manipulation;
}

.mc-add-pct-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #444;
    background: #252525;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    line-height: 1;
}

.mc-add-pct-btn:active {
    background: #dc143c;
    border-color: #dc143c;
}

.mc-add-pct-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    min-width: 55px;
    text-align: center;
}

/* サイクル目標セクション */
.mc-target-section {
    text-align: center;
}

.mc-target-label {
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
    font-weight: 500;
}

.mc-target-weight {
    font-size: 32px;
    font-weight: 800;
    color: #dc143c;
    line-height: 1.2;
}

/* Mode B: 推定MAX表示 */
.max-conv-estimated-display {
    margin-top: 20px;
    padding: 24px 16px;
    background: #1a1a1a;
    border-radius: 12px;
    border: 1px solid rgba(220, 20, 60, 0.3);
    text-align: center;
}

.max-conv-estimated-label {
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
    font-weight: 500;
}

.max-conv-estimated-value {
    font-size: 48px;
    font-weight: 800;
    color: #dc143c;
    line-height: 1.1;
    margin-bottom: 8px;
}

/* ファインプレート注意書き */
.mc-fine-plate-note {
    margin: 8px 0;
    padding: 10px 14px;
    background: rgba(100, 180, 255, 0.08);
    border: 1px solid rgba(100, 180, 255, 0.25);
    border-radius: 8px;
    font-size: 11px;
    color: #78b0e0;
    line-height: 1.6;
}

/* iPhone 16 最適化 */
@media (max-width: 430px) {
    .max-conv-exercise-btn {
        font-size: 12px;
        padding: 9px 4px;
    }

    .max-conv-mode-btn {
        font-size: 12px;
        padding: 9px 6px;
    }

    .max-conv-input {
        font-size: 16px;
        padding: 12px 45px 12px 14px;
    }

    .max-conv-estimated-value {
        font-size: 40px;
    }

    .max-conv-input-row {
        gap: 8px;
    }

    .mc-target-weight {
        font-size: 26px;
    }

    .mc-current-weight {
        font-size: 18px;
    }

    .mc-cycle-select {
        font-size: 15px;
    }
}

/* ルーティンタイプトグル（Big3 / BP特化） */
.rt-type-toggle {
    display: flex;
    background: #1a1a1a;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 12px;
    border: 1px solid #444;
}

.rt-type-btn {
    flex: 1;
    padding: 11px 8px;
    border: none;
    background: transparent;
    color: #888;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rt-type-btn.active {
    background: #dc143c;
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 20, 60, 0.3);
}

/* ブランチセレクター（共通） */
.mc-branch-toggle,
.rt-branch-toggle {
    display: flex;
    background: #1a1a1a;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 20px;
    border: 1px solid #444;
}

.mc-branch-btn,
.rt-branch-btn {
    flex: 1;
    padding: 11px 8px;
    border: none;
    background: transparent;
    color: #888;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mc-branch-btn.active,
.rt-branch-btn.active {
    background: #dc143c;
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 20, 60, 0.3);
}

/* ピーキング用注意書き */
.pk-advisory-note {
    margin: 16px 0;
    padding: 14px 16px;
    background: rgba(204, 153, 0, 0.08);
    border: 1px solid rgba(204, 153, 0, 0.2);
    border-radius: 10px;
    font-size: 12px;
    color: #cc9900;
    line-height: 1.7;
}

.pk-advisory-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.pk-advisory-sub {
    font-size: 11px;
    color: #aa8800;
    font-style: italic;
}

/* ピーキング用 kg上乗せ表示幅調整 */
.pk-add-kg-value {
    min-width: 70px;
}

/* ピーキング用 iPhone 16 最適化 */
@media (max-width: 430px) {
    .mc-branch-btn,
    .rt-branch-btn {
        font-size: 13px;
        padding: 10px 6px;
    }

    .pk-advisory-note {
        font-size: 11px;
        padding: 12px 14px;
    }

    .pk-add-kg-value {
        min-width: 65px;
    }
}

/* BP止めあり/なしラジオボタン */
.pk-pause-check {
    display: flex;
    gap: 20px;
    margin: 8px 0 12px 0;
}

.pk-pause-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ccc;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.pk-pause-label input[type="radio"] {
    accent-color: #dc143c;
    width: 16px;
    height: 16px;
    margin: 0;
}

/* 止めなし注意書き */
.pk-tng-warning {
    margin: 10px 0;
    padding: 10px 14px;
    background: rgba(255, 160, 0, 0.08);
    border: 1px solid rgba(255, 160, 0, 0.25);
    border-radius: 8px;
    font-size: 11px;
    color: #ffa000;
    line-height: 1.6;
}

/* iPhone 16 最適化 */
@media (max-width: 430px) {
    .flex-routine-subtitle {
        font-size: 12px;
    }

    .flex-cycle-viz-dot {
        width: 14px;
        height: 14px;
    }
}

/* ============================================================
   🏋️ ウォームアップツール
   ============================================================ */

.wu-form-group {
    margin-bottom: 16px;
}
.wu-label {
    display: block;
    font-size: 13px;
    color: #999;
    font-weight: 600;
    margin-bottom: 6px;
}
.wu-error {
    color: #dc143c;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    min-height: 1.2em;
    margin: 8px 0;
}

/* オプションボタングリッド */
.wu-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}
.wu-option-btn {
    width: 100%;
    padding: 10px;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.wu-option-btn.active {
    background: #dc143c;
    border-color: #dc143c;
    color: #fff;
}

/* ウォームアップステップ */
.wu-step {
    margin-bottom: 20px;
    border-left: 4px solid #dc143c;
    padding-left: 16px;
}
.wu-step-label {
    font-size: 12px;
    font-weight: 700;
    color: #dc143c;
    margin-bottom: 4px;
}
.wu-step-weight {
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
}
.wu-step-weight-unit {
    font-size: 16px;
    color: #666;
    margin-left: 4px;
}
.wu-step-reps {
    font-size: 18px;
    font-weight: 700;
    color: #00cc44;
    margin: 4px 0 10px 0;
}
.wu-step.main-set {
    border-left-color: #fff;
}
.wu-step.main-set .wu-step-label {
    color: #fff;
}

/* 最大重量超過時の案内パネル */
.wu-overflow-panel {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: linear-gradient(135deg, #1a2330, #14202b);
    border: 1px solid #2a4660;
    border-left: 4px solid #4ea3ff;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 8px 0 4px;
}
.wu-overflow-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}
.wu-overflow-text {
    font-size: 13px;
    line-height: 1.7;
    color: #d4e3f1;
}
.wu-overflow-text strong {
    color: #fff;
    font-weight: 700;
}

/* プレートビジュアル */
.wu-bar-container {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    padding: 12px 0;
    scrollbar-width: none;
}
.wu-bar-container::-webkit-scrollbar { display: none; }
.wu-bar-shaft {
    width: 40px;
    height: 12px;
    background: #555;
    border-radius: 5px;
    flex-shrink: 0;
}
.wu-plate {
    border: 1px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 11px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* プレートサイズ・色 */
.wu-plate-25   { background: #ff0000; width: 32px; height: 180px; }
.wu-plate-20   { background: #0000ff; width: 32px; height: 180px; }
.wu-plate-15   { background: #ffff00; color: #000; width: 30px; height: 155px; }
.wu-plate-10   { background: #008000; width: 28px; height: 135px; }
.wu-plate-5    { background: #ffffff; color: #000; width: 26px; height: 115px; }
.wu-plate-2_5  { background: #222; width: 24px; height: 95px; }
.wu-plate-1_25 { background: #ffa500; color: #000; width: 22px; height: 80px; }
.wu-plate-0_5  { background: #aaa; color: #000; width: 20px; height: 80px; }
.wu-plate-0_25 { background: #800080; width: 20px; height: 80px; }
.wu-plate-collar {
    width: 60px;
    height: 50px;
    background: #0000ff;
    writing-mode: horizontal-tb;
    font-size: 10px;
    border-radius: 5px;
}
.wu-plate-collar-simple {
    width: 30px;
    height: 45px;
    background: #666;
    writing-mode: horizontal-tb;
    font-size: 9px;
    border-radius: 5px;
}

/* ウォーミングアップの流れボタン（実績編集画面内） */
.wu-flow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background: rgba(220, 20, 60, 0.1);
    border: 1px solid rgba(220, 20, 60, 0.4);
    border-radius: 8px;
    color: #dc143c;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.wu-flow-btn:hover {
    background: rgba(220, 20, 60, 0.2);
    border-color: #dc143c;
}

/* ツールカード日本語サブ表記 */
.tool-card-jp {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #999;
    margin-top: 2px;
}

/* メニュー詳細モーダル: ディロード表セルの改行防止（iPhoneのみ） */
@media (max-width: 500px) {
    #menu-detail-content td {
        white-space: nowrap !important;
    }
}

/* メニュー詳細モーダル: テーブル間の余白 */
#menu-detail-content .tables-container {
    gap: 40px;
    margin-bottom: 15px;
}
#menu-detail-content .menu-table-caption {
    margin-bottom: 16px;
    padding: 10px;
    font-size: clamp(11px, 3vw, 18px);
}
#menu-detail-content .note-section {
    margin-top: 16px;
    font-size: 10px;
}
#menu-detail-content .note-section h3 {
    font-size: 10px;
}
#menu-detail-content .note-item {
    font-size: 10px;
}
#menu-detail-content .light-bench-wrapper {
    margin-top: 10px;
    margin-bottom: 0;
}
#menu-detail-content .light-bench-compact,
#menu-detail-content .light-bench {
    margin-bottom: 0;
}

/* メニュー詳細モーダル: ヒントテキスト */
.menu-detail-hint {
    padding: 16px 16px 12px;
    margin-top: 8px;
    text-align: center;
}
.menu-detail-hint p {
    margin: 0;
    font-size: 11px;
    color: #999;
    line-height: 1.4;
}

/* メニュー詳細モーダル: グリッドフッター（上段4ボタン + 下段閉じる） */
#menu-detail-modal .modal-content {
    max-height: 80vh;
}
@supports (max-height: 1dvh) {
    #menu-detail-modal .modal-content {
        max-height: 80dvh;
    }
}
.menu-detail-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px 16px;
}
.menu-detail-footer button {
    padding: 9px 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    min-height: auto !important;
    line-height: 1.3 !important;
    text-align: center;
    white-space: nowrap;
}

/* ==================================================
   メニュー途中修正モーダル
   ================================================== */
.menu-mod-warning {
    display: flex;
    gap: 12px;
    background: #2a2010;
    border: 1px solid #f0a030;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 20px;
}
.menu-mod-warning-icon {
    font-size: 24px;
    flex-shrink: 0;
}
.menu-mod-warning-text {
    font-size: 12px;
    color: #e0c070;
    line-height: 1.6;
}
.menu-mod-warning-text strong {
    color: #f0a030;
}
.menu-mod-warning-text p {
    margin: 4px 0 0 0;
}
.menu-mod-section {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
}
.menu-mod-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.menu-mod-select {
    padding: 10px 12px;
    background: #0a0a0a;
    border: 1px solid #444;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    min-width: 140px;
}
.menu-mod-textarea {
    width: 100%;
    padding: 10px 12px;
    background: #0a0a0a;
    border: 1px solid #444;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-family: inherit;
    resize: none;
    box-sizing: border-box;
}
.menu-mod-exercise-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 10px;
    background: #0f0f0f;
    border-radius: 8px;
}
.menu-mod-exercise-name {
    font-size: 13px;
    font-weight: 600;
    color: #dc143c;
    min-width: 40px;
}
.menu-mod-exercise-current {
    font-size: 13px;
    color: #888;
}
.menu-mod-exercise-arrow {
    color: #666;
    font-size: 16px;
}
.menu-mod-exercise-input {
    width: 80px;
    padding: 8px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    text-align: center;
}
.menu-mod-exercise-unit {
    font-size: 13px;
    color: #888;
}
.menu-mod-final-preview {
    font-size: 11px;
    color: #888;
    padding: 0 0 8px 40px;
    border-bottom: 1px solid #222;
    margin-bottom: 8px;
}

/* 修正履歴表示 */
.menu-mod-history {
    margin-top: 16px;
    padding: 12px;
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
}
.menu-mod-history-title {
    font-size: 13px;
    font-weight: 700;
    color: #f0a030;
    margin-bottom: 8px;
}
.menu-mod-history-item {
    font-size: 12px;
    color: #999;
    padding: 4px 0;
    border-bottom: 1px solid #222;
}
.menu-mod-history-item:last-child {
    border-bottom: none;
}

/* 比較タブ（修正済みメニュー用） */
.menu-comparison-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0 4px;
}
.comparison-tab {
    flex: 1;
    padding: 10px 8px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 8px;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}
.comparison-tab.active {
    background: #dc143c;
    border-color: #dc143c;
    color: #fff;
}

/* 修正行ハイライト */
.modified-week td {
    border-left: 3px solid #daa520;
}
.modified-week td:first-child {
    border-left: 3px solid #daa520;
}

/* 修正履歴（詳細モーダル内） */
.modification-history {
    margin-top: 20px;
    padding: 12px;
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
}
.modification-history h4 {
    font-size: 14px;
    font-weight: 700;
    color: #f0a030;
    margin: 0 0 10px 0;
}
.modification-history-item {
    font-size: 12px;
    color: #ccc;
    padding: 6px 0;
    border-bottom: 1px solid #222;
    line-height: 1.5;
}
.modification-history-item:last-child {
    border-bottom: none;
}
.mod-date {
    color: #888;
    font-weight: 600;
}
.mod-desc {
    color: #fff;
}
.mod-week {
    color: #daa520;
    font-size: 11px;
}
.mod-reason {
    color: #999;
    font-size: 11px;
    font-style: italic;
}

/* 補助種目修正UI */
.mod-aux-group {
    margin-top: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #222;
}
.mod-aux-group:last-child {
    border-bottom: none;
}
.mod-aux-group-header {
    color: #dc143c;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}
.mod-aux-row {
    display: block;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid #2a2a2a;
    border-radius: 10px;
}
.mod-aux-row-top {
    display: flex;
    gap: 8px;
    align-items: center;
}
.mod-aux-row-controls {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.mod-aux-control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.mod-aux-control-label {
    font-size: 11px;
    color: #888;
    font-weight: 600;
    text-align: center;
    user-select: none;
}
.mod-aux-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
.mod-aux-minus-btn, .mod-aux-plus-btn,
.mod-aux-sets-minus-btn, .mod-aux-sets-plus-btn,
.mod-aux-reps-minus-btn, .mod-aux-reps-plus-btn {
    width: 32px;
    height: 32px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
    flex-shrink: 0;
}
.mod-aux-minus-btn:active, .mod-aux-plus-btn:active,
.mod-aux-sets-minus-btn:active, .mod-aux-sets-plus-btn:active,
.mod-aux-reps-minus-btn:active, .mod-aux-reps-plus-btn:active {
    background: #333;
}
.mod-aux-adjustment-display {
    min-width: 42px;
    text-align: center;
    font-size: 13px;
    color: #ccc;
    font-weight: 600;
    user-select: none;
}
.mod-aux-sets-display, .mod-aux-reps-display {
    min-width: 28px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    font-weight: 700;
    user-select: none;
}
.mod-aux-row-empty .mod-aux-row-controls {
    opacity: 0.4;
    pointer-events: none;
}
.mod-aux-weight-preview {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #333;
    font-size: 12px;
    line-height: 1.6;
    color: #ccc;
}
.mod-aux-weight-preview:empty {
    display: none;
}
.mod-aux-preview-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mod-aux-preview-label {
    color: #888;
    font-size: 11px;
    min-width: 72px;
}
.mod-aux-preview-val {
    color: #ccc;
    font-weight: 600;
}
@media (max-width: 380px) {
    .mod-aux-row-controls { gap: 6px; }
    .mod-aux-minus-btn, .mod-aux-plus-btn,
    .mod-aux-sets-minus-btn, .mod-aux-sets-plus-btn,
    .mod-aux-reps-minus-btn, .mod-aux-reps-plus-btn {
        width: 28px; height: 28px; font-size: 14px;
    }
    .mod-aux-adjustment-display { min-width: 36px; font-size: 12px; }
    .mod-aux-sets-display, .mod-aux-reps-display { min-width: 24px; font-size: 14px; }
}
.mod-aux-select {
    flex: 1;
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 8px;
    font-size: 16px;
    -webkit-appearance: none;
}
.mod-aux-remove-btn {
    width: 32px;
    height: 32px;
    background: #333;
    color: #ff6666;
    border: 1px solid #555;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mod-aux-remove-btn:hover {
    background: #442222;
    border-color: #ff6666;
}
.mod-aux-add-btn {
    width: 100%;
    padding: 8px;
    background: #1a1a1a;
    color: #aaa;
    border: 1px dashed #555;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    margin-top: 4px;
}
.mod-aux-add-btn:hover {
    color: #daa520;
    border-color: #daa520;
}
.mod-aux-changed {
    border-color: #daa520 !important;
}
.mod-aux-changed .mod-aux-select {
    border-color: #daa520;
}

/* 補助種目変更時の旧種目名ラベル */
.aux-old-name {
    display: block;
    font-size: 10px;
    color: #daa520;
    margin-bottom: 1px;
    font-weight: 600;
}

/* 元のメニューに戻すボタン */
.btn-reset-menu {
    width: 100%;
    padding: 10px;
    background: #333;
    color: #ff9800;
    border: 1px solid #555;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    margin-top: 12px;
}
.btn-reset-menu:hover {
    background: #444;
    border-color: #ff9800;
}

/* モーダル フッターボタン コンパクト統一 */
#add-competition-modal .modal-footer,
#attempts-modal .modal-footer,
#competition-detail-modal .modal-footer,
#save-menu-modal .modal-footer,
#load-menu-modal .modal-footer,
#record-modal .modal-footer,
#view-records-modal .modal-footer,
#edit-record-modal .modal-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    justify-content: center;
}

#add-competition-modal .modal-footer button,
#attempts-modal .modal-footer button,
#competition-detail-modal .modal-footer button,
#save-menu-modal .modal-footer button,
#load-menu-modal .modal-footer button,
#record-modal .modal-footer button,
#view-records-modal .modal-footer button,
#edit-record-modal .modal-footer button {
    flex: 1;
    padding: 9px 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    min-height: auto !important;
    line-height: 1.3 !important;
    text-align: center;
    white-space: nowrap;
}

/* ウォームアップ注釈 */
.wu-advisory-note {
    margin: 16px 0 8px 0;
    padding: 12px 14px;
    background: rgba(100, 180, 255, 0.08);
    border: 1px solid rgba(100, 180, 255, 0.25);
    border-radius: 8px;
    font-size: 12px;
    color: #78b0e0;
    line-height: 1.7;
}

/* ==================================================
   PB検索ツール
   ================================================== */

.pb-branch-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}

.pb-branch-btn {
    flex: 1;
    padding: 10px 4px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #888;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.pb-branch-btn.active {
    background: #dc143c;
    border-color: #dc143c;
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 20, 60, 0.3);
}

.pb-branch-btn:not(.active):active {
    background: #252525;
}

.pb-exercise-selector {
    margin-bottom: 16px;
}

/* 試合ベスト */
.pb-result-category {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #333;
}

.pb-result-category:last-child {
    border-bottom: none;
}

.pb-category-title {
    color: white;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.pb-comp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.pb-comp-cell {
    text-align: center;
    background: #222;
    padding: 12px 4px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pb-comp-lift {
    color: #999;
    font-size: 11px;
    font-weight: 600;
}

.pb-comp-weight {
    color: white;
    font-size: 20px;
    font-weight: bold;
}

.pb-comp-weight.pb-accent {
    color: #dc143c;
}

.pb-comp-date, .pb-comp-name {
    color: #666;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* トレーニングPBカード */
.pb-section-title {
    color: #dc143c;
    font-size: 14px;
    font-weight: 600;
    margin: 16px 0 8px 0;
}

.pb-record-card {
    background: #222;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.pb-record-label {
    color: #999;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.pb-record-weight {
    font-size: 28px;
    font-weight: bold;
    color: white;
    line-height: 1.2;
}

.pb-unit {
    font-size: 14px;
    color: #999;
    margin-left: 2px;
}

.pb-reps {
    font-size: 16px;
    color: #ccc;
    margin-left: 8px;
}

.pb-record-meta {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.pb-meta-menu {
    color: #999;
    font-size: 12px;
}

.pb-meta-week {
    color: #dc143c;
    font-size: 12px;
    font-weight: 600;
}

.pb-record-date {
    color: #777;
    font-size: 12px;
    margin-top: 4px;
}

.pb-record-video {
    margin-top: 8px;
}

.pb-video-link {
    color: #60a5fa;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pb-no-data {
    color: #555;
    text-align: center;
    padding: 16px;
    font-size: 13px;
    background: #1a1a1a;
    border-radius: 8px;
}

/* レップベストリスト */
.pb-rep-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pb-rep-row {
    display: grid;
    grid-template-columns: 45px 75px 1fr 32px;
    align-items: center;
    gap: 8px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px 12px;
}

.pb-rep-row.pb-rep-no-record {
    opacity: 0.35;
    grid-template-columns: 45px 1fr;
}

.pb-rep-number {
    color: #dc143c;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.pb-rep-unit {
    font-size: 10px;
    color: #dc143c;
}

.pb-rep-weight {
    font-size: 17px;
    font-weight: bold;
    color: white;
}

.pb-rep-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pb-rep-menu {
    color: #999;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-rep-date {
    color: #666;
    font-size: 10px;
}

.pb-rep-no-data-text {
    color: #555;
    font-size: 13px;
}

.pb-video-icon-link {
    color: #60a5fa;
    text-decoration: none;
    font-size: 16px;
}

.pb-empty-message {
    color: #999;
    text-align: center;
    padding: 40px 20px;
    font-size: 14px;
}

.pb-loading {
    text-align: center;
    padding: 30px;
    color: #999;
}

.pb-loading-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #333;
    border-top: 2px solid #dc143c;
    border-radius: 50%;
    animation: pb-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

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

/* 試合記録 動画URL入力 */
.comp-video-input {
    width: 100%;
    margin-top: 6px;
    padding: 6px 8px;
    font-size: 11px;
    background: #111;
    border: 1px solid #333;
    border-radius: 6px;
    color: #aaa;
    box-sizing: border-box;
}

.comp-video-input::placeholder {
    color: #555;
}

.comp-video-input:focus {
    border-color: #dc143c;
    outline: none;
    color: #fff;
}

/* 試技結果 成功/失敗ボタン */
.attempt-result-group {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.attempt-result-group input[type="radio"] {
    display: none;
}
.attempt-result-group label {
    flex: 1;
    text-align: center;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border: 1px solid #444;
    color: #666;
    background: transparent;
}
.attempt-result-group input[value="success"]:checked + label {
    background: rgba(76, 175, 80, 0.2);
    border-color: #4CAF50;
    color: #4CAF50;
}
.attempt-result-group input[value="fail"]:checked + label {
    background: rgba(244, 67, 54, 0.2);
    border-color: #f44336;
    color: #f44336;
}

/* iPhone 16 最適化 */
@media (max-width: 430px) {
    .pb-branch-btn {
        font-size: 12px;
        padding: 9px 3px;
    }
    .pb-comp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================================================
   使い方のヒント ページ
   ================================================== */

/* ホーム画面のナビゲーションカード */
.tips-nav-card {
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid #333;
}
.tips-nav-card:active {
    border-color: #dc143c;
    transform: scale(0.98);
}

/* ヒントページヘッダー */
.tips-header {
    padding: 16px 16px 0;
}
.tips-header .routine-back-btn {
    margin-bottom: 8px;
}

/* 目次 */
.tips-toc-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tips-toc-item {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid #333;
    color: #dc143c;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s;
}
.tips-toc-item:last-child {
    border-bottom: none;
}
.tips-toc-item:active {
    color: #ff4466;
}

/* アコーディオン セクションヘッダー */
.tips-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 4px 0;
    -webkit-tap-highlight-color: transparent;
}
.tips-toggle-icon {
    font-size: 14px;
    color: #666;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.tips-section-header.collapsed .tips-toggle-icon {
    transform: rotate(-90deg);
}

/* アコーディオン セクション本体 */
.tips-section-body {
    margin-top: 16px;
    line-height: 1.8;
    color: #ccc;
    font-size: 14px;
}
.tips-section-body.collapsed {
    display: none;
}

/* ステップカード */
.tips-step-card {
    background: #111;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    border-left: 4px solid #dc143c;
}
.tips-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.tips-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #dc143c;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.tips-step-label {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}
.tips-step-desc {
    color: #bbb;
    font-size: 14px;
    line-height: 1.8;
}

/* タブ役割説明 */
.tips-tab-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #333;
}
.tips-tab-item:last-child {
    border-bottom: none;
}
.tips-tab-icon {
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}
.tips-tab-info .tips-tab-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}
.tips-tab-info .tips-tab-desc {
    font-size: 13px;
    color: #999;
    line-height: 1.6;
    margin: 0;
}

/* 補助種目リスト */
.tips-exercise-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-bottom: 1px solid #333;
}
.tips-exercise-group-header .tips-toggle-icon {
    transform: rotate(-90deg);
}
.tips-exercise-group-header:last-of-type {
    border-bottom: none;
}
.tips-exercise-group-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.tips-exercise-list {
    display: none;
    padding: 8px 0;
}
.tips-exercise-list.open {
    display: block;
}
.tips-exercise-item {
    background: #0a0a0a;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
}
.tips-exercise-item:last-child {
    margin-bottom: 0;
}
.tips-exercise-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}
.tips-exercise-pct {
    font-size: 13px;
    color: #dc143c;
    font-weight: 600;
    margin: 0 0 6px 0;
}
.tips-exercise-desc {
    font-size: 13px;
    color: #999;
    line-height: 1.6;
    margin: 0;
}

/* FAQ */
.tips-faq-item {
    border-bottom: 1px solid #333;
}
.tips-faq-item:last-child {
    border-bottom: none;
}
.tips-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
    gap: 12px;
}
.tips-faq-question .tips-toggle-icon {
    flex-shrink: 0;
    transform: rotate(-90deg);
}
.tips-faq-answer {
    font-size: 14px;
    color: #bbb;
    line-height: 1.8;
    padding: 0 0 14px 0;
    display: none;
}
.tips-faq-answer.open {
    display: block;
}

/* フロー図 */
.tips-flow-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 0;
}
.tips-flow-step {
    background: #1a1a1a;
    border: 1px solid #dc143c;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #dc143c;
    text-align: center;
    white-space: nowrap;
}
.tips-flow-arrow {
    color: #666;
    font-size: 16px;
}

/* プログラムタイプ説明 */
.tips-program-item {
    background: #0a0a0a;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
}
.tips-program-item:last-child {
    margin-bottom: 0;
}
.tips-program-name {
    font-size: 14px;
    font-weight: 600;
    color: #dc143c;
    margin: 0 0 4px 0;
}
.tips-program-desc {
    font-size: 13px;
    color: #999;
    line-height: 1.6;
    margin: 0;
}

/* 補足ノート（セクション内） */
.tips-note {
    background: #111;
    border-left: 3px solid #dc143c;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 13px;
    color: #999;
    line-height: 1.7;
    border-radius: 0 6px 6px 0;
}

/* ========================================
   補助種目 ±0.5% ステッパーUI
   ======================================== */
.wizard-aux-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: center;
}
.wizard-aux-minus-btn,
.wizard-aux-plus-btn {
    width: 32px;
    height: 32px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
    flex-shrink: 0;
}
.wizard-aux-minus-btn:active,
.wizard-aux-plus-btn:active {
    background: #333;
}
.wizard-aux-adjustment-display {
    min-width: 32px;
    text-align: center;
    font-size: 13px;
    color: #ccc;
    font-weight: 600;
    user-select: none;
}
/* ========================================
   ダウンセット重量 ±0.5% 調整ステッパーUI
   ピーキングスタート ±2.5kg 微調整ステッパーUI（同スタイル）
   ======================================== */
.wizard-down-adj-minus-btn,
.wizard-down-adj-plus-btn,
.wizard-start-adj-minus-btn,
.wizard-start-adj-plus-btn {
    width: 36px;
    height: 36px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
    flex-shrink: 0;
}
.wizard-down-adj-minus-btn:active,
.wizard-down-adj-plus-btn:active,
.wizard-start-adj-minus-btn:active,
.wizard-start-adj-plus-btn:active {
    background: #333;
}
.wizard-down-adj-display,
.wizard-start-adj-display {
    min-width: 50px;
    text-align: center;
    font-size: 13px;
    color: #ccc;
    font-weight: 600;
    user-select: none;
}

/* ========================================
   ハイブリッドステッパー（パーセンテージ用）
   入力欄 ＋ ±ボタン、0.5%刻み
   ======================================== */
.wizard-hybrid-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
}
.wizard-hybrid-stepper input[type="number"] {
    flex: 1;
    padding: 12px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    box-sizing: border-box;
    -moz-appearance: textfield;
}
.wizard-hybrid-stepper input[type="number"]::-webkit-inner-spin-button,
.wizard-hybrid-stepper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.wizard-hybrid-minus-btn,
.wizard-hybrid-plus-btn {
    width: 40px;
    height: 40px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
    flex-shrink: 0;
}
.wizard-hybrid-minus-btn:active,
.wizard-hybrid-plus-btn:active {
    background: #333;
}

/* 目標重量ステッパーボタン（ハイブリッドと同じスタイル） */
.wizard-goal-minus-btn,
.wizard-goal-plus-btn {
    width: 40px;
    height: 40px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
    flex-shrink: 0;
}
.wizard-goal-minus-btn:active,
.wizard-goal-plus-btn:active {
    background: #333;
}

/* ========================================
   ボタンのみステッパー（セット数・回数用）
   ＋/－ボタンで1刻み増減
   ======================================== */
.wizard-num-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: center;
}
.wizard-num-minus-btn,
.wizard-num-plus-btn {
    width: 40px;
    height: 40px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
    flex-shrink: 0;
}
.wizard-num-minus-btn:active,
.wizard-num-plus-btn:active {
    background: #333;
}
.wizard-num-display {
    min-width: 36px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    user-select: none;
}

.wizard-aux-note {
    background: #111;
    border-left: 3px solid #dc143c;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 11.5px;
    color: #999;
    line-height: 1.7;
    border-radius: 0 6px 6px 0;
}
.tips-exercise-video-link {
    display: inline-block;
    margin-top: 6px;
    color: #dc143c;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.tips-exercise-video-link:hover {
    text-decoration: underline;
}

/* 補助種目 セット数ステッパー */
.wizard-aux-sets-minus-btn,
.wizard-aux-sets-plus-btn {
    width: 32px;
    height: 32px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
    flex-shrink: 0;
}
.wizard-aux-sets-minus-btn:active,
.wizard-aux-sets-plus-btn:active {
    background: #333;
}
.wizard-aux-sets-display {
    min-width: 28px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    font-weight: 700;
    user-select: none;
}

/* 補助種目 回数ステッパー */
.wizard-aux-reps-minus-btn,
.wizard-aux-reps-plus-btn {
    width: 32px;
    height: 32px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
    flex-shrink: 0;
}
.wizard-aux-reps-minus-btn:active,
.wizard-aux-reps-plus-btn:active {
    background: #333;
}
.wizard-aux-reps-display {
    min-width: 28px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    font-weight: 700;
    user-select: none;
}

/* 補助種目 新レイアウト */
.wizard-aux-row {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid #2a2a2a;
    border-radius: 10px;
}
.wizard-aux-row-top {
    display: flex;
    gap: 8px;
    align-items: center;
}
.wizard-aux-row-top select {
    flex: 1;
    padding: 10px 12px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.wizard-aux-remove-btn {
    width: 40px;
    height: 40px;
    background: #2a2a2a;
    border: 2px solid #555;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.wizard-aux-remove-btn:active {
    background: #3a3a3a;
    border-color: #dc143c;
}
.wizard-aux-row-controls {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    justify-content: center;
}
.wizard-aux-control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.wizard-aux-control-label {
    font-size: 11px;
    color: #888;
    font-weight: 600;
    text-align: center;
    user-select: none;
}

/* 補助種目 手動入力名フィールド */
.wizard-aux-manual-name {
    margin-top: 8px;
    width: 100%;
    padding: 8px 12px;
    background: #1a1a1a;
    border: 2px solid #444;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    box-sizing: border-box;
}
.wizard-aux-manual-name::placeholder {
    color: #666;
}

/* ==================================================
   プロフィールモーダル
   ================================================== */
.profile-modal-content {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.profile-modal-body {
    padding: 20px 25px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.profile-welcome-banner {
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.15), rgba(220, 20, 60, 0.05));
    border: 1px solid rgba(220, 20, 60, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}
.profile-welcome-title {
    color: #dc143c;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 8px 0;
}
.profile-welcome-text {
    color: #ccc;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.profile-section {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
}
.profile-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.profile-section-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    padding-left: 12px;
    border-left: 3px solid #dc143c;
}
.profile-form-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 16px;
    align-items: center;
}
.profile-label {
    color: #ccc;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.profile-input {
    background: #0a0a0a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.profile-input:focus {
    border-color: #dc143c;
    outline: none;
}
.profile-input::placeholder {
    color: #666;
}
select.profile-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.profile-hint {
    color: #999;
    font-size: 13px;
    margin: 0 0 12px 0;
}
.profile-best-grid {
    grid-template-columns: 120px 1fr;
}
.profile-best-divider {
    grid-column: 1 / -1;
    border-top: 1px solid #2a2a2a;
    margin: 4px 0;
}
.profile-rep-best-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-rb-input {
    flex: 1;
    min-width: 0;
}
.profile-rb-separator {
    color: #999;
    font-size: 15px;
    flex-shrink: 0;
}
.profile-rb-reps {
    width: 70px;
    flex: 0 0 70px;
    text-align: center;
}
.profile-modal-footer {
    flex-direction: column;
    gap: 10px !important;
}
.profile-save-btn {
    width: 100%;
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
    color: #fff;
    border: none;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.profile-save-btn:active {
    opacity: 0.8;
}
.profile-skip-btn {
    width: 100%;
    background: transparent;
    color: #999;
    border: 1px solid #555;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
}
.profile-skip-btn:active {
    background: #222;
}

/* プロフィールサマリーカード（ホーム画面） */
.profile-summary-card {
    background: #1a1a1a !important;
    padding: 16px 24px !important;
}
.profile-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.profile-edit-btn {
    background: transparent;
    color: #dc143c;
    border: 1px solid #dc143c;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.profile-edit-btn:active {
    background: rgba(220, 20, 60, 0.15);
}
.profile-summary-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px 12px;
}
.profile-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.profile-summary-label {
    color: #888;
    font-size: 11px;
}
.profile-summary-value {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
.profile-summary-value.accent {
    color: #dc143c;
}
.profile-setup-prompt {
    text-align: left;
    padding: 8px 0;
    grid-column: 1 / -1;
}
.profile-setup-btn {
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    white-space: nowrap;
}
.profile-setup-btn:active {
    opacity: 0.8;
}

/* ==================================================
   チュートリアル（アプリツアー）
   ================================================== */
.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}
.tutorial-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    transition: clip-path 0.3s ease;
}

/* ツールチップ */
.tutorial-tooltip {
    position: fixed;
    z-index: 10001;
    background: #1a1a1a;
    border: 2px solid #dc143c;
    border-radius: 16px;
    padding: 20px;
    max-width: 340px;
    width: calc(100vw - 32px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    transition: top 0.3s ease, left 0.3s ease, transform 0.3s ease;
}
.tutorial-tooltip-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.tutorial-tooltip-top {
    /* JS で top/left を動的セット */
}
.tutorial-tooltip-bottom {
    /* JS で top/left を動的セット */
}

/* 矢印（ソリッド三角形） — 吹き出しの兄弟要素として配置し、z-indexで吹き出しの下のレイヤーに配置 */
.tutorial-tooltip-arrow {
    position: fixed; /* viewport基準で配置（JSで top/left をセット） */
    width: 0;
    height: 0;
    display: none; /* center時は非表示、JSで制御 */
    z-index: 10000; /* 吹き出し本体(.tutorial-tooltip = 10001)の下のレイヤー。バックドロップよりは上 */
    filter: drop-shadow(0 0 3px rgba(220, 20, 60, 0.5));
    transition: top 0.3s ease, left 0.3s ease;
}
.tutorial-tooltip-arrow.arrow-up {
    display: block;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 16px solid #dc143c;
}
.tutorial-tooltip-arrow.arrow-down {
    display: block;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 16px solid #dc143c;
}
.tutorial-tooltip-arrow.arrow-left {
    display: block;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-right: 16px solid #dc143c;
}

/* ステップインジケーター */
.tutorial-step-indicator {
    color: #888;
    font-size: 12px;
    margin-bottom: 8px;
}
.tutorial-title {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 10px 0;
    line-height: 1.4;
    word-break: break-word;
}
.tutorial-description {
    color: #ccc;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

/* ボタン */
.tutorial-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.tutorial-nav-group {
    display: flex;
    gap: 8px;
}
.tutorial-btn {
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    -webkit-tap-highlight-color: transparent;
}
.tutorial-next-btn {
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
    color: #fff;
}
.tutorial-next-btn:active {
    opacity: 0.8;
}
.tutorial-skip-btn {
    background: transparent;
    color: #888;
    border: 1px solid #555;
}
.tutorial-skip-btn:active {
    background: #222;
}
.tutorial-prev-btn {
    background: transparent;
    color: #ccc;
    border: 1px solid #555;
}
.tutorial-prev-btn:active {
    background: #222;
}

/* チュートリアル中はbottom-navのz-indexを上げてハイライト可能に */
body.tutorial-active .bottom-nav {
    z-index: 10002;
    pointer-events: none;
}
body.tutorial-active .bottom-nav .tutorial-highlight-target {
    pointer-events: auto;
}
/* チュートリアル中はsidebar-navも同様にハイライト可能に（デスクトップ用） */
body.tutorial-active .sidebar-nav {
    z-index: 10002;
    pointer-events: none;
}
body.tutorial-active .sidebar-nav .tutorial-highlight-target {
    pointer-events: auto;
}

/* ============================
   Set / Video Finder (sf-)
   ============================ */
.sf-exercise-selector {
    margin-bottom: 16px;
}

.sf-search-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.sf-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sf-label {
    color: #999;
    font-size: 12px;
    font-weight: 600;
}

.sf-input {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
}

.sf-input:focus {
    border-color: #dc143c;
    outline: none;
}

.sf-toggle-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #888;
    font-size: 13px;
    padding: 10px 12px;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s;
    text-align: center;
}

.sf-toggle-btn.active {
    background: #dc143c;
    border-color: #dc143c;
    color: #fff;
}

.sf-search-btn {
    width: 100%;
    background: #dc143c;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 14px;
    cursor: pointer;
    margin-bottom: 16px;
    transition: opacity 0.2s;
}

.sf-search-btn:active {
    opacity: 0.8;
}

.sf-results-count {
    color: #999;
    font-size: 13px;
    margin-bottom: 12px;
    padding-left: 4px;
}

.sf-result-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.sf-result-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.sf-result-weight {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}

.sf-result-reps {
    font-size: 15px;
    color: #ccc;
}

.sf-result-meta {
    color: #999;
    font-size: 12px;
    margin-top: 4px;
}

.sf-result-date {
    color: #777;
    font-size: 12px;
    margin-top: 2px;
}

.sf-result-set-cat {
    display: inline-block;
    background: #333;
    color: #ccc;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

.sf-comp-card {
    border-left: 3px solid #ffd700;
}

.sf-comp-success {
    display: inline-block;
    background: #1a3a1a;
    color: #4ade80;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

.sf-comp-fail {
    display: inline-block;
    background: #3a1a1a;
    color: #ff6b6b;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

.sf-result-memo {
    color: #888;
    font-size: 11px;
    margin-top: 6px;
    font-style: italic;
}

.sf-result-video {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #60a5fa;
    font-size: 13px;
    text-decoration: none;
    margin-top: 6px;
}

.sf-result-video:hover {
    text-decoration: underline;
}

/* ============================
   My Library (ml-)
   ============================ */
.ml-search-bar {
    margin-bottom: 12px;
}

.ml-category-filter {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding-bottom: 4px;
}


.ml-cat-btn {
    flex: 1;
    padding: 8px 6px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-align: center;
}

.ml-cat-btn.active {
    background: #dc143c;
    border-color: #dc143c;
    color: #fff;
}

.ml-add-btn {
    width: 100%;
    background: #1a1a1a;
    border: 1px dashed #444;
    border-radius: 10px;
    color: #dc143c;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 14px;
    cursor: pointer;
    margin-bottom: 16px;
    transition: all 0.2s;
    box-sizing: border-box;
}

.ml-add-btn:active {
    background: #222;
    border-color: #dc143c;
}

.ml-form-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.ml-form-modal-content {
    background: #1a1a1a;
    border: 2px solid #dc143c;
    border-radius: 15px;
    padding: 20px 16px;
    width: 92%;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
}

.ml-form-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ml-form-modal-header h3 {
    color: #fff;
    font-size: 18px;
    margin: 0;
}

.ml-form-modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
}

.ml-form-group {
    margin-bottom: 14px;
}

.ml-form-categories {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
}

.ml-form-cat-btn {
    flex: 1;
    padding: 8px 0;
    background: #222;
    border: 1px solid #333;
    border-radius: 8px;
    color: #888;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    white-space: nowrap;
}

.ml-form-cat-btn.selected {
    background: #dc143c;
    border-color: #dc143c;
    color: #fff;
}

.ml-form-group .sf-input,
.ml-form-group .ml-textarea {
    width: 100%;
    box-sizing: border-box;
}

.ml-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    border-radius: 8px;
    padding: 10px;
}
.ml-textarea:focus {
    border-color: #dc143c;
    outline: none;
}

.ml-form-actions {
    display: flex;
    gap: 10px;
}

.ml-save-btn {
    flex: 1;
    background: #dc143c;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 12px;
    cursor: pointer;
}

.ml-save-btn:active {
    opacity: 0.8;
}

.ml-cancel-btn {
    flex: 1;
    background: #333;
    border: none;
    border-radius: 10px;
    color: #ccc;
    font-size: 15px;
    font-weight: 600;
    padding: 12px;
    cursor: pointer;
}

.ml-cancel-btn:active {
    opacity: 0.8;
}

.ml-entry-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.ml-entry-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ml-entry-cat-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.ml-entry-info {
    flex: 1;
    min-width: 0;
}

.ml-entry-title {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
    word-break: break-word;
}

.ml-entry-content {
    color: #999;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 6px;
    word-break: break-word;
    white-space: pre-wrap;
}

.ml-entry-url {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #60a5fa;
    font-size: 13px;
    text-decoration: none;
    margin-top: 4px;
    word-break: break-all;
}

.ml-entry-url:hover {
    text-decoration: underline;
}

.ml-entry-date {
    color: #666;
    font-size: 11px;
    margin-top: 6px;
}

.ml-entry-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-end;
}

.ml-entry-action-btn {
    background: #333;
    border: none;
    border-radius: 6px;
    color: #ccc;
    font-size: 12px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.ml-entry-action-btn.delete {
    color: #ff6b6b;
}

.ml-entry-action-btn:active {
    opacity: 0.7;
}

/* ==================================================
   🏋️ フリートレーニング記録
   ================================================== */

.btn-free-training {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #dc143c, #a00f2c);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-free-training:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* 種目選択ボタン */
.free-exercise-type-btn {
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
    white-space: nowrap;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #ccc;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.free-exercise-type-btn.active {
    background: #dc143c;
    border-color: #dc143c;
    color: #fff;
}

.free-exercise-type-btn:active {
    transform: scale(0.95);
}

/* セット行 */
.free-set-row {
    background: #0f0f0f;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.free-set-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.free-set-label {
    color: #dc143c;
    font-weight: bold;
    font-size: 13px;
}

.free-set-row-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.free-weight-input {
    flex: 3;
    min-width: 0;
    padding: 8px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    text-align: center;
}

.free-reps-input {
    flex: 2;
    min-width: 0;
    padding: 8px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    text-align: center;
}

.free-weight-input:focus,
.free-reps-input:focus {
    border-color: #dc143c;
    outline: none;
}

.free-set-times {
    color: #888;
    font-size: 16px;
    font-weight: bold;
}

.free-rpe-select {
    flex: 5;
    min-width: 0;
    padding: 8px 4px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
    color: #60a5fa;
    font-size: 16px;
    cursor: pointer;
}
.free-rpe-select.rpe-placeholder {
    color: #666;
}
.free-rpe-select option {
    color: #fff;
}

.free-set-extras {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.free-set-extras input,
.free-set-extras textarea {
    width: 100%;
    padding: 6px 8px;
    background: #111;
    border: 1px solid #333;
    border-radius: 5px;
    color: #ccc;
    font-size: 16px;
    font-family: inherit;
}

.free-set-extras textarea {
    resize: none;
    overflow: hidden;
    min-height: 28px;
    max-height: 72px;
}

.free-set-extras textarea::-webkit-scrollbar {
    width: 4px;
}
.free-set-extras textarea::-webkit-scrollbar-track {
    background: #222;
    border-radius: 4px;
}
.free-set-extras textarea::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}
.free-set-extras textarea {
    scrollbar-width: thin;
    scrollbar-color: #555 #222;
}

.free-set-extras textarea {
    min-height: 30px;
    max-height: 80px;
}

.free-set-extras input:focus,
.free-set-extras textarea:focus {
    border-color: #dc143c;
    outline: none;
}

.free-set-remove {
    background: none;
    border: none;
    color: #f87171;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}

/* セット追加ボタン */
.free-add-set-btn {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    background: transparent;
    border: 2px dashed #555;
    border-radius: 8px;
    color: #999;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.free-add-set-btn:active {
    border-color: #dc143c;
    color: #dc143c;
}

.free-add-set-btn-small {
    font-size: 12px;
    padding: 8px;
}

/* ==================================================
   追加セット機能（セット追加ボタン・追加セットカード）
   ================================================== */

/* カテゴリ末尾の「＋ セット追加」ボタン（メインセット・メモリセット等） */
.extra-set-group-add-btn {
    width: 100%;
    padding: 10px;
    margin-top: 4px;
    margin-bottom: 15px;
    background: transparent;
    border: 2px dashed #555;
    border-radius: 8px;
    color: #999;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.extra-set-group-add-btn:active {
    border-color: #dc143c;
    color: #dc143c;
}

/* セットごとの「＋」リトライボタン（ピーキング・トップシングル） */
.extra-set-retry-btn {
    display: block;
    width: 100%;
    padding: 6px;
    margin-top: 4px;
    margin-bottom: 15px;
    background: transparent;
    border: 1px dashed #555;
    border-radius: 6px;
    color: #888;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    transition: all 0.2s;
}
.extra-set-retry-btn:active {
    border-color: #f59e0b;
    color: #f59e0b;
}

/* 追加セットカードの左ボーダー */
.extra-set-card {
    border-left: 3px solid #f59e0b !important;
}

/* 追加セットの「(追加)」バッジ */
.extra-set-badge {
    display: inline-block;
    font-size: 10px;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* 追加セットの削除ボタン */
.extra-set-remove-btn {
    background: none;
    border: none;
    color: #f87171;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    float: right;
}
.extra-set-remove-btn:hover {
    color: #ef4444;
}

/* 補助種目追加ボタン */
.free-add-aux-btn {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    background: transparent;
    border: 2px dashed #4ade80;
    border-radius: 8px;
    color: #4ade80;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.free-add-aux-btn:active {
    opacity: 0.7;
}

/* 補助種目ブロック */
.free-aux-block {
    background: #0a0a0a;
    border: 2px solid #4ade80;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.free-aux-block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.free-aux-name-input {
    flex: 1;
    padding: 8px 10px;
    background: #1a1a1a;
    border: 1px solid #4ade80;
    border-radius: 6px;
    color: #4ade80;
    font-size: 16px;
    font-weight: bold;
}

.free-aux-name-input::placeholder {
    color: #555;
    font-weight: normal;
}

/* 日別サマリー画像保存ボタン */
.daily-summary-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    background: #333;
    border: 1px solid #555;
    border-radius: 6px;
    color: #ccc;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.daily-summary-export-btn:active {
    background: #dc143c;
    border-color: #dc143c;
    color: #fff;
}

/* ============================================
   モバイル最適化: メニュー表示の余白削減 (iPhone 16: 393px)
   ============================================ */
@media (max-width: 430px) {
    /* メニューテーブル間の余白 */
    .tables-container {
        gap: 30px;
        margin-bottom: 16px;
    }
    .menu-table-caption {
        margin-bottom: 15px;
        padding: 10px;
        font-size: clamp(13px, 3.5vw, 18px);
    }
    .menu-table th {
        padding: 8px 6px;
    }
    .menu-table td {
        padding: 8px 6px;
    }
    .note-section {
        margin-top: 12px;
    }

    /* ダッシュボードカードの余白 */
    .dashboard-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    .dashboard-card.quick-access-card {
        padding: 0 !important;
    }

    /* フォーム要素 */
    .form-group {
        margin-bottom: 12px;
    }

    /* モーダル */
    .modal-body {
        padding: 16px;
    }

    /* 試技結果モーダル: 3列維持＋コンパクト化 */
    #attempts-modal .modal-body {
        padding: 12px;
    }
    #attempts-modal .form-grid {
        gap: 6px !important;
    }
    #attempts-modal .form-group {
        margin-bottom: 4px;
        min-width: 0;
    }
    #attempts-modal .form-group > label {
        font-size: 11px;
        margin-bottom: 3px;
        white-space: nowrap;
    }
    #attempts-modal .form-group input[type="number"] {
        padding: 8px 4px;
        font-size: 14px;
        min-width: 0;
    }
    #attempts-modal .form-group input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }
    #attempts-modal .form-group div[style*="margin-top"] label span {
        font-size: 11px;
    }
    #attempts-modal .comp-video-input {
        font-size: 10px;
        padding: 4px 4px;
    }
    #attempts-modal h3 {
        font-size: 15px !important;
        margin: 12px 0 8px 0 !important;
    }
    #attempts-modal #attempts-comp-summary {
        padding: 10px;
        font-size: 13px;
    }

    /* 大会情報モーダル: 開催日/開催地だけ1列に */
    .comp-date-location {
        grid-template-columns: 1fr !important;
    }
}

/* 大会情報: 開催日・開催地の高さ統一 */
.comp-date-location input[type="date"],
.comp-date-location input[type="text"] {
    height: 48px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    /* 実績閲覧フィルター: パディング縮小＋はみ出し防止 */
    .filter-section {
        padding: 12px !important;
        overflow: hidden;
    }
    /* モバイル: Row1 = メニュー1行, Row2 = 種目+週数, Row3 = 開始日+終了日 */
    .filter-row-1 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .filter-row-1 .filter-date-group {
        display: none;
    }
    .filter-row-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .filter-row-2 .filter-clear-group {
        display: none;
    }
    /* モバイル専用: 日付行とクリアボタンを追加表示 */
    .filter-section::after {
        content: none;
    }
    .filter-section select,
    .filter-section input[type="date"],
    .filter-section-date-input {
        font-size: 12px;
        padding: 9px 4px;
    }
    .filter-row-mobile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 8px;
    }
}

/* ==================================================
   カスタム日付ピッカー
   ================================================== */
.custom-datepicker-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s;
}

.custom-datepicker {
    background: #1a1a1a;
    border: 2px solid #dc143c;
    border-radius: 12px;
    width: 320px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.cdp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #0a0a0a;
    border-bottom: 1px solid #333;
}

.cdp-nav-btn {
    background: none;
    border: 1px solid #555;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cdp-nav-btn:active {
    background: #dc143c;
    border-color: #dc143c;
}

.cdp-month-year {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cdp-month-year select {
    background: #0a0a0a;
    color: #fff;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 6px 12px 6px 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
#cdp-year-select {
    min-width: 95px;
    padding-right: 20px;
}
#cdp-month-select {
    min-width: 60px;
    padding-right: 16px;
}

.cdp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    padding: 8px 8px 4px;
    background: #0a0a0a;
}
.cdp-weekday {
    text-align: center;
    font-size: 11px;
    color: #888;
    font-weight: 600;
    padding: 4px 0;
}
.cdp-weekday:first-child { color: #dc143c; }
.cdp-weekday:last-child { color: #4a9eff; }

.cdp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 4px 8px 12px;
}

.cdp-day {
    text-align: center;
    padding: 10px 0;
    font-size: 15px;
    color: #ccc;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    background: none;
    font-weight: 500;
}
.cdp-day:active {
    background: #dc143c;
    color: #fff;
}
.cdp-day.today {
    border: 2px solid #dc143c;
    color: #dc143c;
    font-weight: 700;
}
.cdp-day.selected {
    background: #dc143c;
    color: #fff;
    font-weight: 700;
}
.cdp-day.other-month {
    color: #444;
}
.cdp-day.disabled {
    color: #333;
    cursor: default;
    pointer-events: none;
}
.cdp-day.sunday { color: #dc143c; }
.cdp-day.saturday { color: #4a9eff; }
.cdp-day.selected.sunday,
.cdp-day.selected.saturday { color: #fff; }
.cdp-day.other-month.sunday { color: #552222; }
.cdp-day.other-month.saturday { color: #223355; }

.cdp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid #333;
    background: #0a0a0a;
}

.cdp-today-btn {
    background: none;
    border: 1px solid #dc143c;
    color: #dc143c;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
}
.cdp-today-btn:active {
    background: #dc143c;
    color: #fff;
}

.cdp-close-btn {
    background: none;
    border: 1px solid #555;
    color: #999;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
.cdp-close-btn:active {
    background: #333;
}

/* ========================================
   大会記録タブ — Web版レスポンシブグリッド
   ======================================== */

/* ベスト記録カテゴリ: モバイルは縦並び */
.pb-category-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
}
.pb-category-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* 大会履歴カード: モバイルはmargin-bottomで間隔 */
.comp-history-card {
    margin-bottom: 16px;
}

/* デスクトップ: 2列グリッド */
@media (min-width: 1024px) {
    /* ベスト記録カード: 2×2グリッド */
    .pb-categories-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .pb-category-item {
        background: #151515;
        border: 1px solid #2a2a2a;
        border-radius: 10px;
        padding: 16px;
        margin-bottom: 0;
        padding-bottom: 16px;
        border-bottom: none;
    }

    /* 過去の大会カード: 2列グリッド */
    #competition-history-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .comp-history-card {
        margin-bottom: 0;
    }
}

/* ベスト記録 種目セル（PL用） */
.pb-lift-cell {
    text-align: center;
    background: #222;
    padding: 8px 4px;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.pb-lift-cell[onclick] {
    cursor: pointer;
}
.pb-lift-cell[onclick]:hover {
    background: #2a2a2a;
}
.pb-lift-cell[onclick]:active {
    background: #333;
}

/* 種目ベストの大会名テキスト */
.pb-lift-comp-name {
    color: #666;
    font-size: 9px;
    margin: 4px 0 0 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 大会カード ジャンプ時ハイライト */
@keyframes compCardHighlight {
    0% { box-shadow: 0 0 0 3px #dc143c; }
    50% { box-shadow: 0 0 16px 3px rgba(220, 20, 60, 0.6); }
    100% { box-shadow: none; }
}
.comp-card-highlight {
    animation: compCardHighlight 2s ease-out;
}

/* ==================================================
   サブスクリプション — プランステータス・アップグレードUI
   ================================================== */

/* プランステータスカード */
.plan-status-card {
    margin-top: 8px;
}
.plan-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.plan-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}
.plan-badge-pro,
.beta-badge.plan-badge-pro,
.beta-badge-sidebar.plan-badge-pro {
    background: linear-gradient(135deg, #dc143c, #ff6b35) !important;
    color: #fff !important;
}
.plan-badge-trial,
.beta-badge.plan-badge-trial,
.beta-badge-sidebar.plan-badge-trial {
    background: linear-gradient(135deg, #f59e0b, #eab308) !important;
    color: #fff !important;
}
.plan-badge-tester,
.beta-badge.plan-badge-tester,
.beta-badge-sidebar.plan-badge-tester {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: #fff !important;
}
.plan-badge-free,
.beta-badge.plan-badge-free,
.beta-badge-sidebar.plan-badge-free {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #fff !important;
}
.plan-status-info {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
    line-height: 1.5;
}
.plan-trial-remaining {
    color: #f59e0b;
    font-weight: 600;
}
.plan-btn-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: stretch;
}
.plan-btn-row > button {
    flex: 1;
    margin-top: 0;
}
.plan-manage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #555;
    background: #333;
    color: #ccc;
    cursor: pointer;
    width: 100%;
}
.plan-manage-btn:active {
    background: #444;
}
.plan-cancel-trial-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #555;
    background: transparent;
    color: #888;
    cursor: pointer;
    width: 100%;
}
.plan-cancel-trial-btn:active {
    background: #333;
}
.plan-reactivate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #dc143c;
    background: transparent;
    color: #dc143c;
    cursor: pointer;
    width: 100%;
}
.plan-reactivate-btn:active {
    background: rgba(220, 20, 60, 0.1);
}
.plan-change-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #ff6b35;
    background: transparent;
    color: #ff6b35;
    cursor: pointer;
    width: 100%;
    margin-top: 8px;
}
.plan-change-btn:active {
    background: rgba(255, 107, 53, 0.1);
}
.plan-upgrade-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
    background: linear-gradient(135deg, #dc143c, #ff6b35);
    color: #fff;
    cursor: pointer;
    width: 100%;
    margin-top: 8px;
}
.plan-upgrade-btn:active {
    opacity: 0.85;
}
.plan-tester-notice {
    font-size: 11px;
    color: #999;
    line-height: 1.6;
    margin: 8px 0 8px;
    padding: 0;
}
.plan-tester-tip {
    font-size: 11px;
    color: #dc143c;
    line-height: 1.6;
    margin: 0 0 12px;
    padding: 0;
}

/* アップグレードモーダル */
.upgrade-modal-content {
    max-width: 400px;
    width: 90%;
    margin: auto;
}
.upgrade-feature-text {
    text-align: center;
    color: #ccc;
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.6;
}
.upgrade-feature-name {
    color: #dc143c;
    font-weight: 700;
}
.upgrade-plan-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.upgrade-plan-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    border-radius: 10px;
    border: 2px solid #444;
    background: #222;
    color: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
}
.upgrade-plan-btn:active {
    border-color: #dc143c;
}
.upgrade-plan-btn-recommended {
    border-color: #dc143c;
    position: relative;
}
.upgrade-plan-price {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 2px;
}
.upgrade-plan-period {
    font-size: 12px;
    color: #999;
}
.upgrade-plan-save {
    font-size: 11px;
    color: #f59e0b;
    font-weight: 600;
    margin-top: 4px;
}

/* ツールカード PROバッジ */
.tool-card {
    position: relative;
}
.tool-card-pro-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, #dc143c, #ff6b35);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
/* インラインProバッジ（ボタン・タブ用） */
.pro-badge-inline {
    display: inline-block;
    background: linear-gradient(135deg, #dc143c, #ff6b35);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin-left: 4px;
    vertical-align: middle;
}
.tool-card.pro-locked {
    opacity: 0.6;
}

/* 閲覧制限通知 */
.plan-record-notice {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 8px 0;
    font-size: 12px;
    color: #f59e0b;
    text-align: center;
    line-height: 1.5;
}
.plan-record-notice a {
    color: #dc143c;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* 動画リンクロック */
.video-link-locked {
    color: #666;
    font-size: 11px;
    cursor: pointer;
}
.video-link-locked:hover {
    color: #dc143c;
}

/* トライアル終了警告 */
.plan-trial-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 8px 0;
    font-size: 11px;
    color: #f59e0b;
    line-height: 1.6;
}
.plan-trial-warning.plan-trial-urgent {
    background: rgba(220, 20, 60, 0.1);
    border-color: rgba(220, 20, 60, 0.4);
    color: #dc143c;
}

/* アップグレードモーダル トライアル注釈 */
.upgrade-trial-note {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    font-size: 11px;
    color: #f59e0b;
    line-height: 1.6;
    text-align: center;
}

.upgrade-trial-info {
    margin-top: 10px;
    font-size: 11px;
    color: #999;
    text-align: center;
    line-height: 1.5;
}
.upgrade-trial-info.trial-used {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
}

/* Free/Pro 比較表 */
.plan-compare-table {
    margin: 12px 0 16px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #333;
    width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.plan-compare-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 11px;
    display: table !important;
    overflow-x: visible !important;
}
.plan-compare-table thead tr {
    background: #222;
}
.plan-compare-table th {
    padding: 8px 10px;
    font-weight: 700;
    color: #999;
    text-align: center;
    border-bottom: 1px solid #333;
}
.plan-compare-table th.plan-compare-feature {
    text-align: left;
}
.plan-compare-table th.plan-compare-pro-col {
    color: #dc143c;
}
.plan-compare-table td {
    padding: 6px 10px;
    text-align: center;
    border-bottom: 1px solid #222;
    color: #ccc;
}
.plan-compare-table td:first-child {
    text-align: left;
    color: #fff;
    font-weight: 500;
}
.plan-compare-table td.plan-compare-no {
    color: #555;
}
.plan-compare-table tbody tr:last-child td {
    border-bottom: none;
}
.plan-compare-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.02);
}

/* タブレット: アップグレードモーダルの幅を拡大 */
@media (min-width: 768px) {
    .upgrade-modal-content {
        max-width: 480px;
        width: 92%;
    }
    .plan-compare-table table {
        font-size: 13px;
    }
    .plan-compare-table th {
        padding: 10px 8px;
    }
    .plan-compare-table td {
        padding: 8px;
    }
}

.upgrade-plan-change-note {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #333;
    border-radius: 8px;
    background: #1a1a1a;
}
.upgrade-plan-change-title {
    font-size: 12px;
    font-weight: 700;
    color: #ccc;
    margin: 0 0 6px;
}
.upgrade-plan-change-text {
    font-size: 11px;
    color: #999;
    line-height: 1.6;
    margin: 0;
}

/* ==================================================
   🏆 大会カウントダウン
   ================================================== */
.comp-urgent {
    animation: comp-pulse 1.5s ease-in-out infinite;
}
@keyframes comp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ==================================================
   🏆 自己ベスト更新トースト
   ================================================== */
@keyframes pr-toast-glow {
    0%, 100% { box-shadow: 0 4px 20px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 4px 30px rgba(255, 215, 0, 0.5); }
}
.pr-celebration-toast {
    animation: pr-toast-glow 2s ease-in-out 2;
}

/* ========== 設定画面 ========== */
.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #2a2a2a;
}
.settings-item:last-child {
    border-bottom: none;
}
.settings-item-info {
    flex: 1;
    min-width: 0;
}
.settings-item-label {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.settings-item-desc {
    color: #888;
    font-size: 12px;
    line-height: 1.5;
}
/* トグルスイッチ */
.settings-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}
.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.settings-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #555;
    border-radius: 26px;
    transition: 0.3s;
}
.settings-toggle-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}
.settings-toggle input:checked + .settings-toggle-slider {
    background: #dc143c;
}
.settings-toggle input:checked + .settings-toggle-slider::before {
    transform: translateX(22px);
}
/* アクションボタン */
.settings-action-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    background: #333;
    color: #ccc;
    border: 1px solid #555;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.settings-action-btn:active {
    background: #dc143c;
    color: #fff;
    border-color: #dc143c;
}

/* プラン詳細リンク（レガシー・未使用） */