/* マニュアルビューア - ビジュアル強化版スタイル */

:root {
    --brand-color: #19006F;
    --brand-light: #2d1a8f;
    --brand-lighter: #4a3da8;
    --sidebar-width: 320px;
    --header-height: 0px; /* ヘッダーなし */
    --accent-blue: #007bff;
    --accent-green: #28a745;
    --accent-yellow: #ffc107;
    --accent-red: #dc3545;
    --accent-purple: #6f42c1;
    --accent-orange: #fd7e14;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    background: #f5f7fa;
    min-height: 100vh;
}

/* ==================== マニュアル記事（ビジュアル強化） ==================== */
.manual-article {
    line-height: 1.9;
    color: #2c3e50;
    font-size: 16px;
}

/* 見出し1 - メインタイトル */
.manual-article h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--brand-color);
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    background: linear-gradient(135deg, rgba(25, 0, 111, 0.05) 0%, rgba(25, 0, 111, 0.02) 100%);
    border-left: 5px solid var(--brand-color);
    border-radius: 0 6px 6px 0;
    box-shadow: var(--shadow-sm);
}

/* 見出し2 - セクション */
.manual-article h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-light);
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid var(--brand-color);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}

/* 見出し3 - サブセクション */
.manual-article h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #34495e;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.6rem 0.5rem 1.8rem;
    background: #f8f9fa;
    border-left: 3px solid var(--accent-blue);
    border-radius: 3px;
    position: relative;
}

.manual-article h3::before {
    content: '●';
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    font-size: 0.8rem;
    color: var(--accent-blue);
}

/* 見出し4 - 項目 */
.manual-article h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #555;
    margin-top: 0.8rem;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.6rem 0.4rem 1.8rem;
    background: #fafbfc;
    border-left: 3px solid var(--accent-green);
    border-radius: 3px;
    position: relative;
}

.manual-article h4::before {
    content: '▸';
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    font-size: 0.9rem;
    color: var(--accent-green);
}

/* 段落 */
.manual-article p {
    margin-bottom: 0.6rem;
    line-height: 1.6;
}

/* リスト */
.manual-article ul, .manual-article ol {
    margin-bottom: 0.8rem;
    padding-left: 1.8rem;
}

.manual-article li {
    margin-bottom: 0.3rem;
    line-height: 1.6;
    position: relative;
}

.manual-article ul li::marker {
    color: var(--brand-color);
    font-size: 1.2em;
}

.manual-article ol li::marker {
    color: var(--accent-blue);
    font-weight: 700;
}

/* 強調リスト */
.manual-article li strong:first-child {
    color: var(--brand-color);
    font-size: 1.05em;
}

/* コード（インライン） */
.manual-article code {
    background: linear-gradient(135deg, #f4f4f4 0%, #e9ecef 100%);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.9em;
    color: #d63384;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* コードブロック */
.manual-article pre {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.8rem 0;
    box-shadow: var(--shadow-sm);
    border: 1px solid #444;
}

.manual-article pre code {
    background: none;
    padding: 0;
    color: inherit;
    border: none;
    box-shadow: none;
}

/* 引用 */
.manual-article blockquote {
    border-left: 3px solid var(--accent-blue);
    background: linear-gradient(to right, #e7f3ff 0%, #f0f8ff 100%);
    padding: 0.6rem 0.8rem;
    margin: 0.8rem 0;
    border-radius: 0 6px 6px 0;
    box-shadow: var(--shadow-sm);
    font-style: italic;
    position: relative;
}

.manual-article blockquote::before {
    content: '"';
    font-size: 4rem;
    color: var(--accent-blue);
    opacity: 0.2;
    position: absolute;
    top: -10px;
    left: 10px;
}

/* 水平線 */
.manual-article hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--brand-color), transparent);
    margin: 1rem 0;
    border-radius: 1px;
}

/* テーブル */
.manual-article table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0.8rem 0;
    box-shadow: var(--shadow-sm);
    border-radius: 6px;
    overflow: hidden;
}

.manual-article table th {
    background: linear-gradient(135deg, var(--brand-color) 0%, var(--brand-light) 100%);
    color: white;
    padding: 0.8rem 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: 0.3px;
}

.manual-article table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #e9ecef;
    background: white;
}

.manual-article table tr:nth-child(even) td {
    background: #f8f9fa;
}

.manual-article table tr:hover td {
    background: #e7f3ff;
    transition: background 0.2s ease;
}

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

/* カスタムボックス - Info（情報） */
.info-box, .manual-article .info-box {
    padding: 0.6rem 0.8rem 0.6rem 2.5rem;
    border-radius: 6px;
    margin: 0.8rem 0;
    border-left: 3px solid var(--accent-blue);
    background: linear-gradient(135deg, #e7f3ff 0%, #f0f8ff 100%);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.info-box::before, .manual-article .info-box::before {
    content: '\f431';
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    line-height: 1;
    color: var(--accent-blue);
}

/* カスタムボックス - Warning（警告） */
.warning-box, .manual-article .warning-box {
    padding: 0.6rem 0.8rem 0.6rem 2.5rem;
    border-radius: 6px;
    margin: 0.8rem 0;
    border-left: 3px solid var(--accent-yellow);
    background: linear-gradient(135deg, #fff3cd 0%, #fff9e6 100%);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.warning-box::before, .manual-article .warning-box::before {
    content: '\f33a';
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    line-height: 1;
    color: var(--accent-yellow);
}

/* カスタムボックス - Tip（ヒント） */
.tip-box, .manual-article .tip-box {
    padding: 0.6rem 0.8rem 0.6rem 2.5rem;
    border-radius: 6px;
    margin: 0.8rem 0;
    border-left: 3px solid var(--accent-green);
    background: linear-gradient(135deg, #d4edda 0%, #e7f5ea 100%);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.tip-box::before, .manual-article .tip-box::before {
    content: '\f26a';
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    line-height: 1;
    color: var(--accent-green);
}

/* カスタムボックス - Danger（危険） */
.danger-box, .manual-article .danger-box {
    padding: 0.6rem 0.8rem 0.6rem 2.5rem;
    border-radius: 6px;
    margin: 0.8rem 0;
    border-left: 3px solid var(--accent-red);
    background: linear-gradient(135deg, #f8d7da 0%, #fde8ea 100%);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.danger-box::before, .manual-article .danger-box::before {
    content: '\f33a';
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    line-height: 1;
    color: var(--accent-red);
}

/* 特別な強調テキスト */
.manual-article .text-success {
    color: var(--accent-green) !important;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    background: rgba(40, 167, 69, 0.1);
    border-radius: 4px;
}

.manual-article .text-warning {
    color: #856404 !important;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    background: rgba(255, 193, 7, 0.2);
    border-radius: 4px;
}

.manual-article .text-danger {
    color: var(--accent-red) !important;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 4px;
}

/* スムーススクロール */
html {
    scroll-behavior: smooth;
}

/* スクロール時のハイライト（アニメーション） */
.manual-article h2:target,
.manual-article h3:target,
.manual-article h4:target {
    animation: highlight-pulse 2s ease;
}

@keyframes highlight-pulse {
    0%, 100% {
        background: transparent;
        transform: scale(1);
    }
    50% {
        background: rgba(255, 193, 7, 0.3);
        transform: scale(1.02);
    }
}

/* リンク */
.manual-article a {
    color: var(--accent-blue);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.manual-article a:hover {
    color: var(--brand-color);
    border-bottom-color: var(--brand-color);
}

/* 画像 */
.manual-article img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    margin: 0.8rem 0;
    border: 2px solid #dee2e6;
    display: block;
}

/* 画像のfigure要素（キャプション付き） */
.manual-article figure {
    margin: 1rem 0;
    padding: 0;
    text-align: center;
}

.manual-article figure img {
    margin: 0;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
}

.manual-article figcaption,
.manual-article .img-caption {
    display: block;
    margin-top: 0.5rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.9em;
    color: #666;
    background: #f8f9fa;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
}

/* 画像コンテナ（より高度な制御用） */
.manual-article .img-container {
    margin: 1rem 0;
    padding: 1rem;
    background: #fafbfc;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    text-align: center;
}

.manual-article .img-container img {
    margin: 0 auto 0.5rem;
    border: 2px solid #dee2e6;
}

/* セクションカード（h2 + 直後のコンテンツをグループ化） */
.manual-article section,
.manual-article .section-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: var(--shadow-md);
    border: 1px solid #e9ecef;
}

/* ステップリスト（番号付きリストを視覚的に強調） */
.manual-article ol.steps,
.manual-article ol {
    counter-reset: step-counter;
    list-style: none;
    padding-left: 0;
}

.manual-article ol.steps > li,
.manual-article ol > li {
    counter-increment: step-counter;
    position: relative;
    padding: 0.5rem 0.8rem 0.5rem 3rem;
    margin-bottom: 0.6rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 6px;
    border-left: 3px solid var(--accent-blue);
    box-shadow: var(--shadow-sm);
}

.manual-article ol.steps > li::before,
.manual-article ol > li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--brand-color) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}

/* ネストされたリストは通常表示 */
.manual-article ol > li ol > li {
    padding-left: 2rem;
    border-left: 2px solid #dee2e6;
    background: white;
    margin-bottom: 0.8rem;
}

.manual-article ol > li ol > li::before {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    left: 0.5rem;
}

/* 通常のulリスト（マーカーを装飾） */
.manual-article ul {
    list-style: none;
    padding-left: 0;
}

.manual-article ul > li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.manual-article ul > li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--brand-color);
    font-size: 1.2em;
    font-weight: bold;
}

/* ネストされたulリストは小さめのマーカー */
.manual-article ul ul {
    margin-top: 0.5rem;
}

.manual-article ul ul > li::before {
    content: '◦';
    font-size: 1em;
    color: #007bff;
}

/* キーボードショートカット表示 */
.manual-article kbd,
.manual-article .kbd {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    font-size: 0.9em;
    font-family: 'Consolas', 'Monaco', monospace;
    line-height: 1;
    color: #24292e;
    background: linear-gradient(135deg, #fafbfc 0%, #e1e4e8 100%);
    border: 1px solid #d1d5da;
    border-radius: 6px;
    box-shadow: inset 0 -2px 0 #d1d5da, 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

/* バッジ（重要、新規、更新など） */
.manual-article .badge,
.manual-article .label {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    font-size: 0.85em;
    font-weight: 600;
    border-radius: 20px;
    margin-left: 0.5rem;
}

.manual-article .badge-new {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.manual-article .badge-important {
    background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.manual-article .badge-updated {
    background: linear-gradient(135deg, #007bff 0%, #6610f2 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

/* ボタン風リンク */
.manual-article .btn-link,
.manual-article a.button {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    margin: 0.5rem 0.5rem 0.5rem 0;
    background: linear-gradient(135deg, var(--brand-color) 0%, var(--brand-light) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.manual-article .btn-link:hover,
.manual-article a.button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: white;
    border-bottom: none;
}

/* サイドノート（補足情報） */
.manual-article .sidenote,
.manual-article aside {
    background: linear-gradient(135deg, #fff9e6 0%, #fffbf0 100%);
    border-left: 4px solid var(--accent-orange);
    padding: 1.2rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 8px;
    font-size: 0.95em;
    box-shadow: var(--shadow-sm);
}

.manual-article .sidenote::before,
.manual-article aside::before {
    content: '📌 補足';
    display: block;
    font-weight: 700;
    color: var(--accent-orange);
    margin-bottom: 0.5rem;
}

/* 定義リスト */
.manual-article dl {
    margin: 2rem 0;
}

.manual-article dt {
    font-weight: 700;
    color: var(--brand-color);
    margin-top: 1.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 6px;
    border-left: 3px solid var(--brand-color);
}

.manual-article dd {
    margin-left: 2rem;
    margin-top: 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid #dee2e6;
}

/* マニュアル専用のパネル */
.manual-article .panel {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
    box-shadow: var(--shadow-sm);
}

.manual-article .panel-header {
    font-weight: 700;
    color: var(--brand-color);
    font-size: 1.2em;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--brand-color);
}

/* ハイライトテキスト */
.manual-article mark,
.manual-article .highlight {
    background: linear-gradient(135deg, #fff3cd 0%, #fff9e6 100%);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    border-bottom: 2px solid var(--accent-yellow);
}

/* 注釈番号 */
.manual-article .footnote,
.manual-article sup {
    color: var(--accent-blue);
    font-weight: 700;
}

/* 波線（下波線） - \波線{} コマンド用 */
.manual-article .wavy-underline {
    text-decoration: underline wavy;
    text-decoration-color: #333;
    text-underline-offset: 0.15em;
}