/*
 * AWS SAP学習リソース - transit-gateway-deep-dive 専用CSS
 * ページ固有のレイアウト・セクション・コンポーネントスタイル
 */

/* ========================================
   ページヘッダー
   ======================================== */

.header {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl) var(--spacing-xl);
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.header h1 {
    color: var(--color-text-white);
    margin-bottom: var(--spacing-sm);
}

.header .subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-lg);
    margin: 0 0 var(--spacing-md);
}

.header .badge {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-text-white);
    padding: 6px 16px;
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
}

/* ========================================
   コンテンツエリア
   ======================================== */

.content {
    padding: 0 var(--spacing-sm);
}

/* ========================================
   結論ファーストセクション
   ======================================== */

.conclusion-first {
    margin-bottom: var(--spacing-3xl);
}

.key-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-base);
    margin-top: var(--spacing-base);
}

.key-point {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-base);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--color-aws-orange);
}

.key-point h3 {
    color: var(--color-aws-dark);
    margin-bottom: var(--spacing-sm);
}

.key-point p {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    line-height: 1.7;
    margin: 0;
}

/* ========================================
   セクション共通スタイル
   ======================================== */

.section-title {
    text-align: center;
    color: var(--color-aws-dark);
    font-size: 1.8em;
    margin-bottom: var(--spacing-sm);
}

.section-subtitle {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-2xl);
}

/* ========================================
   コアコンセプトセクション
   ======================================== */

.concepts-section {
    margin-bottom: var(--spacing-3xl);
}

/* --- 4概念の関係図 --- */

.concepts-relationship {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

.relationship-title {
    color: var(--color-text-white);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    border-bottom: none;
}

.relationship-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-base);
    flex-wrap: wrap;
}

.concept-node {
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-lg);
    padding: var(--spacing-base);
    text-align: center;
    min-width: 120px;
    transition: transform var(--transition-base);
}

.concept-node:hover {
    transform: translateY(-3px);
}

.concept-node.attachment {
    border-color: #34d399;
}

.concept-node.route-table {
    border-color: #60a5fa;
}

.concept-node.association {
    border-color: #fbbf24;
}

.concept-node.propagation {
    border-color: #f472b6;
}

.node-icon {
    font-size: 2em;
    margin-bottom: var(--spacing-xs);
}

.concept-node h3 {
    color: var(--color-text-white);
    font-size: var(--font-size-base);
    margin: var(--spacing-xs) 0;
}

.node-role {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-sm);
}

.relationship-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.relationship-arrow .arrow {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5em;
}

.relationship-arrow .label {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--font-size-xs);
}

.tgw-center {
    background: linear-gradient(135deg, var(--color-aws-orange) 0%, #e67300 100%);
    border-radius: var(--radius-full);
    width: 90px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(220, 118, 0, 0.4);
}

.tgw-center .node-icon {
    margin-bottom: 0;
}

.tgw-center h3 {
    color: var(--color-text-white);
    font-size: var(--font-size-sm);
    margin: 2px 0 0;
}

/* --- 概念の関係 下段 --- */

.concepts-bottom-row {
    display: flex;
    justify-content: center;
    gap: 100px;
    margin-top: var(--spacing-xl);
    flex-wrap: wrap;
}

.concepts-bottom-item {
    text-align: center;
}

.concepts-bottom-item .concept-node {
    margin-bottom: var(--spacing-md);
}

.concepts-bottom-note {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-sm);
}

/* ========================================
   データフロー図（パケットの旅）
   ======================================== */

.dataflow-section {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    border: 2px solid #86efac;
}

.dataflow-title {
    color: #166534;
    text-align: center;
    margin-bottom: var(--spacing-xl);
    border-bottom: none;
}

.dataflow-diagram {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.flow-box {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-base);
    text-align: center;
    flex: 1;
    min-width: 140px;
    max-width: 200px;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.step-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    background: #166534;
    color: var(--color-text-white);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.flow-icon {
    font-size: 1.8em;
    margin-bottom: var(--spacing-xs);
}

.flow-box h3 {
    color: var(--color-aws-dark);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.flow-box p {
    color: var(--color-text-secondary);
    font-size: 0.8em;
    line-height: 1.5;
    margin: 0 0 var(--spacing-xs);
}

.flow-arrow {
    display: flex;
    align-items: center;
    color: #166534;
    font-size: 1.5em;
    font-weight: var(--font-weight-bold);
}

.concept-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7em;
    font-weight: var(--font-weight-semibold);
}

.concept-tag.attachment {
    background: #d1fae5;
    color: #065f46;
}

.concept-tag.association {
    background: #fef3c7;
    color: #92400e;
}

.concept-tag.route-table {
    background: #dbeafe;
    color: #1e40af;
}

/* --- Propagation役割ノート --- */

.propagation-note {
    text-align: center;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-base);
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
}

.propagation-note p {
    color: #166534;
    font-size: var(--font-size-base);
    margin: 0;
}

/* ========================================
   Association vs Propagation 比較
   ======================================== */

.comparison-section {
    margin-bottom: var(--spacing-2xl);
}

.comparison-title {
    text-align: center;
    color: var(--color-aws-dark);
    margin-bottom: var(--spacing-xl);
    border-bottom: none;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
}

.comparison-card {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base);
}

.comparison-card:hover {
    transform: translateY(-5px);
}

.comparison-card.association-card {
    border: 2px solid #f59e0b;
}

.comparison-card.propagation-card {
    border: 2px solid #ec4899;
}

.comparison-header {
    padding: var(--spacing-base);
    text-align: center;
}

.association-card .comparison-header {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.propagation-card .comparison-header {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
}

.comparison-header .header-icon {
    font-size: 2.5em;
    margin-bottom: var(--spacing-xs);
}

.comparison-header h3 {
    color: var(--color-aws-dark);
    margin-bottom: var(--spacing-xs);
    border-bottom: none;
}

.comparison-header .analogy {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.comparison-body {
    padding: var(--spacing-base);
    background: var(--color-bg-white);
}

.comparison-visual {
    margin-bottom: var(--spacing-md);
}

.visual-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.visual-box {
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.visual-box.vpc {
    background: #d1fae5;
    color: #065f46;
}

.visual-box.rtb {
    background: #dbeafe;
    color: #1e40af;
}

.visual-arrow {
    font-size: 1.2em;
    font-weight: var(--font-weight-bold);
}

.visual-arrow.association {
    color: #f59e0b;
}

.visual-arrow.propagation {
    color: #ec4899;
}

.visual-note {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

.comparison-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md);
}

.comparison-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

.comparison-features li:last-child {
    border-bottom: none;
}

.feature-icon {
    flex-shrink: 0;
    font-size: 1.2em;
}

.comparison-key-point {
    background: var(--color-bg-light);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: 1.6;
}

/* ========================================
   コンセプト詳細カード
   ======================================== */

.concepts-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
}

.concept-detail-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.concept-detail-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.concept-detail-card.attachment {
    border-top: 4px solid #34d399;
}

.concept-detail-card.route-table {
    border-top: 4px solid #60a5fa;
}

.concept-detail-card.association {
    border-top: 4px solid #fbbf24;
}

.concept-detail-card.propagation {
    border-top: 4px solid #f472b6;
}

.concept-detail-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-base);
    background: var(--color-bg-light);
}

.detail-icon {
    font-size: 2em;
    flex-shrink: 0;
}

.header-text h3 {
    margin: 0 0 2px;
    font-size: var(--font-size-lg);
    color: var(--color-aws-dark);
    border-bottom: none;
}

.analogy-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.concept-detail-body {
    padding: var(--spacing-base);
}

.detail-description {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

.detail-visual {
    margin-bottom: var(--spacing-md);
}

.detail-visual-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.mini-box {
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.mini-box.vpc {
    background: #d1fae5;
    color: #065f46;
}

.mini-box.tgw {
    background: linear-gradient(135deg, var(--color-aws-orange) 0%, #e67300 100%);
    color: var(--color-text-white);
}

.mini-box.rtb {
    background: #dbeafe;
    color: #1e40af;
}

.mini-arrow {
    color: var(--color-text-secondary);
    font-size: 1.2em;
}

.detail-key-points {
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.detail-key-points h3 {
    color: var(--color-aws-dark);
    margin-bottom: var(--spacing-sm);
}

.detail-key-points ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-key-points li {
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: 1.6;
}

/* --- Association 警告ノート --- */

.association-warning {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: #92400e;
    background: #fef3c7;
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
}

/* --- Propagation 複数伝播ノート --- */

.propagation-multi-note {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: #9d174d;
    background: #fdf2f8;
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
}

/* --- Route Table ビジュアル --- */

.route-table-visual {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.route-table-header {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
    background: #dbeafe;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.route-table-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
}

.route-table-row + .route-table-row {
    border-top: none;
}

.route-table-row:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ========================================
   アタッチメント種類セクション
   ======================================== */

.attachments-section {
    margin-bottom: var(--spacing-3xl);
}

/* --- 選択フローチャート --- */

.selection-flowchart {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    border: 2px solid #93c5fd;
}

.flowchart-title {
    color: #1e40af;
    text-align: center;
    margin-bottom: var(--spacing-xl);
    border-bottom: none;
}

.flowchart-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-base);
}

.decision-node {
    background: var(--color-bg-white);
    border: 2px solid #3b82f6;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-base);
    text-align: center;
    max-width: 400px;
    box-shadow: var(--shadow-sm);
}

.decision-node .question {
    color: #1e40af;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

.decision-branches {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

.branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.branch-label {
    background: #e0e7ff;
    color: #3730a3;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.branch-arrow {
    color: #6366f1;
    font-size: 1.5em;
}

.result-node {
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    text-align: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    min-width: 130px;
    box-shadow: var(--shadow-sm);
}

.result-icon {
    font-size: 1.8em;
    margin-bottom: var(--spacing-xs);
}

.result-node.vpc {
    background: #d1fae5;
    color: #065f46;
    border: 2px solid #34d399;
}

.result-node.vpn {
    background: #fee2e2;
    color: #991b1b;
    border: 2px solid #f87171;
}

.result-node.dx {
    background: #dbeafe;
    color: #1e40af;
    border: 2px solid #60a5fa;
}

.result-node.peering {
    background: #e0e7ff;
    color: #3730a3;
    border: 2px solid #818cf8;
}

.result-node.connect {
    background: #f3e8ff;
    color: #6b21a8;
    border: 2px solid #a78bfa;
}

/* --- アタッチメント比較表 --- */

.attachment-comparison-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--spacing-2xl);
}

.attachment-comparison-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.attachment-comparison-table thead th {
    background: var(--color-aws-dark);
    color: var(--color-text-white);
    padding: 14px 16px;
    text-align: left;
    font-size: var(--font-size-base);
    white-space: nowrap;
}

.attachment-comparison-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

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

.attachment-comparison-table tbody tr:nth-child(even) {
    background: var(--color-bg-light);
}

.type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.type-badge.vpc { background: #d1fae5; color: #065f46; }
.type-badge.vpn { background: #fee2e2; color: #991b1b; }
.type-badge.dx { background: #dbeafe; color: #1e40af; }
.type-badge.peering { background: #e0e7ff; color: #3730a3; }
.type-badge.connect { background: #f3e8ff; color: #6b21a8; }

.bandwidth-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-aws-dark);
}

.check-icon { color: var(--color-success); font-weight: var(--font-weight-bold); }
.cross-icon { color: var(--color-error); font-weight: var(--font-weight-bold); }
.warning-icon { color: var(--color-warning); font-weight: var(--font-weight-bold); }

/* --- 比較表見出し --- */

.comparison-table-heading {
    text-align: center;
    color: var(--color-aws-dark);
    margin-bottom: var(--spacing-lg);
}

/* --- アタッチメント構成図見出し --- */

.attachment-config-heading {
    text-align: center;
    color: var(--color-aws-dark);
    margin: var(--spacing-2xl) 0 var(--spacing-lg);
}

/* --- アタッチメント構成図 --- */

.attachment-diagrams {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
}

.attachment-diagram-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.attachment-diagram-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.attachment-diagram-card.vpc { border-top: 4px solid #34d399; }
.attachment-diagram-card.vpn { border-top: 4px solid #f87171; }
.attachment-diagram-card.dx { border-top: 4px solid #60a5fa; }
.attachment-diagram-card.peering { border-top: 4px solid #818cf8; }
.attachment-diagram-card.connect { border-top: 4px solid #a78bfa; }

.diagram-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-base);
    background: var(--color-bg-light);
}

.diagram-card-header .header-icon {
    font-size: 1.5em;
}

.diagram-card-header h3 {
    color: var(--color-aws-dark);
    margin: 0;
    font-size: var(--font-size-md);
}

.diagram-card-body {
    padding: var(--spacing-base);
}

.architecture-mini-diagram {
    margin-bottom: var(--spacing-md);
}

.mini-architecture {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.arch-element {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.arch-element.source {
    background: #e0e7ff;
    color: #3730a3;
}

.arch-element.tgw {
    background: linear-gradient(135deg, var(--color-aws-orange) 0%, #e67300 100%);
    color: var(--color-text-white);
    border-radius: var(--radius-lg);
}

.arch-element.destination {
    background: #d1fae5;
    color: #065f46;
}

.arch-arrow {
    color: var(--color-text-secondary);
    font-size: 1.2em;
}

.diagram-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md);
}

.diagram-features li {
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: 1.6;
}

.diagram-usecase {
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    border-left: 4px solid var(--color-aws-orange);
}

.diagram-usecase h3 {
    color: var(--color-aws-dark);
    margin-bottom: var(--spacing-xs);
}

.diagram-usecase p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   Connect Attachment Deep Dive
   ======================================== */

.connect-deep-dive {
    margin-bottom: var(--spacing-3xl);
}

/* --- ホテルのたとえ話 --- */

.connect-analogy {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    border: 2px solid #d8b4fe;
}

.connect-analogy-title {
    color: #5b21b6;
    font-size: 1.4em;
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: none;
}

.analogy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.analogy-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.analogy-card h3 {
    color: #7c3aed;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.analogy-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.analogy-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--spacing-sm);
    background: #faf5ff;
    border-radius: var(--radius-md);
}

.analogy-item-icon {
    font-size: 1.5em;
    flex-shrink: 0;
}

.analogy-item-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-aws-dark);
}

.analogy-item-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.analogy-point-text {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--spacing-base);
}

.analogy-summary {
    background: #fef3c7;
    padding: var(--spacing-md);
    border-radius: var(--radius-base);
    border-left: 4px solid #f59e0b;
}

.analogy-summary p {
    color: #92400e;
    font-size: var(--font-size-base);
    margin: 0;
}

/* --- VPN vs Connect 比較 --- */

.vpn-connect-comparison {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    border: 2px solid #fdba74;
}

.vpn-connect-title {
    color: #c2410c;
    font-size: 1.4em;
    margin-bottom: var(--spacing-lg);
    text-align: center;
    border-bottom: none;
}

.vpn-connect-table-wrapper {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.vpn-connect-table {
    width: 100%;
    border-collapse: collapse;
}

.vpn-connect-table thead th {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--color-text-white);
    font-size: var(--font-size-base);
}

.vpn-connect-table thead th:first-child {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    text-align: left;
}

.vpn-connect-table thead th:nth-child(2) {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}

.vpn-connect-table thead th:nth-child(3) {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
}

.vpn-connect-table tbody td {
    padding: var(--spacing-md);
    color: var(--color-text-secondary);
}

.vpn-connect-table tbody td:first-child {
    font-weight: var(--font-weight-semibold);
    color: var(--color-aws-dark);
}

.vpn-connect-table tbody td:nth-child(2),
.vpn-connect-table tbody td:nth-child(3) {
    text-align: center;
}

.vpn-connect-table tbody tr {
    border-bottom: 1px solid var(--color-border-light);
}

.vpn-connect-table tbody tr:nth-child(even) {
    background: var(--color-bg-light);
}

.vpn-connect-table tbody tr:last-child {
    border-bottom: none;
}

.vpn-connect-table .connect-highlight {
    color: #7c3aed;
    font-weight: var(--font-weight-semibold);
}

.vpn-connect-table .vpn-positive {
    color: var(--color-success);
    font-weight: var(--font-weight-semibold);
}

.vpn-connect-table .connect-negative {
    color: var(--color-error);
}

/* --- 選択ガイド --- */

.selection-guide {
    margin-top: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-base);
    flex-wrap: wrap;
}

.selection-guide-card {
    flex: 1;
    min-width: 280px;
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-base);
}

.selection-guide-card.vpn-guide {
    border-left: 4px solid #ef4444;
}

.selection-guide-card.connect-guide {
    border-left: 4px solid #7c3aed;
}

.selection-guide-card h3 {
    margin-bottom: var(--spacing-sm);
}

.selection-guide-card.vpn-guide h3 {
    color: #dc2626;
}

.selection-guide-card.connect-guide h3 {
    color: #7c3aed;
}

.selection-guide-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ========================================
   クォータセクション
   ======================================== */

.quota-section {
    margin-bottom: var(--spacing-3xl);
}

.quota-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.quota-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.quota-table thead th {
    background: var(--color-aws-dark);
    color: var(--color-text-white);
    padding: 14px 16px;
    text-align: left;
    font-size: var(--font-size-base);
    white-space: nowrap;
}

.quota-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

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

.quota-table tbody tr:nth-child(even) {
    background: var(--color-bg-light);
}

.quota-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.quota-badge.adjustable {
    background: #d1fae5;
    color: #065f46;
}

.quota-badge.fixed {
    background: #fee2e2;
    color: #991b1b;
}

/* ========================================
   ベストプラクティス
   ======================================== */

.best-practices-section {
    margin-bottom: var(--spacing-3xl);
}

.practices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.practice-card {
    border-radius: var(--radius-xl);
    padding: var(--spacing-base);
    box-shadow: var(--shadow-sm);
}

.practice-card.do {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
}

.practice-card.dont {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fca5a5;
}

.practice-card h3 {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
}

.practice-card.do h3 {
    color: #166534;
}

.practice-card.dont h3 {
    color: #991b1b;
}

.practice-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.practice-card li {
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: 1.6;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.practice-card li:last-child {
    border-bottom: none;
}

/* ========================================
   FAQ セクション
   ======================================== */

.faq-section {
    margin-bottom: var(--spacing-3xl);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-base);
}

.faq-item {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-base);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--color-aws-orange);
    transition: transform var(--transition-base);
}

.faq-item:hover {
    transform: translateY(-2px);
}

.faq-item h3 {
    color: var(--color-aws-dark);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
}

.faq-item p {
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.7;
    margin: 0;
}

/* ========================================
   フッター
   ======================================== */

.footer {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-base);
    margin-top: var(--spacing-2xl);
    background: var(--color-bg-light);
    border-radius: var(--radius-xl);
}

.footer p {
    color: var(--color-text-secondary);
    margin: 0;
}

.footer .resources {
    display: flex;
    justify-content: center;
    gap: var(--spacing-base);
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
}

.footer .resources a {
    color: var(--color-aws-orange);
    text-decoration: none;
    font-size: var(--font-size-sm);
    padding: 6px 14px;
    border: 1px solid var(--color-aws-orange);
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}

.footer .resources a:hover {
    background: var(--color-aws-orange);
    color: var(--color-text-white);
}

/* ========================================
   DXGW要素（Direct Connect Gateway）
   ======================================== */

.dxgw-element {
    padding: var(--spacing-sm);
    background: #dbeafe;
    border-radius: var(--radius-md);
    font-size: 0.8em;
    color: #1e40af;
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

/* ========================================
   レスポンシブ対応
   ======================================== */

@media (max-width: 768px) {
    /* ヘッダー */
    .header {
        padding: var(--spacing-base);
    }

    .header h1 {
        font-size: 1.5em;
    }

    .header .subtitle {
        font-size: var(--font-size-base);
    }

    /* コンセプト関係図 */
    .concepts-relationship {
        padding: var(--spacing-base);
    }

    .relationship-diagram {
        flex-direction: column;
    }

    .relationship-arrow {
        transform: rotate(90deg);
    }

    .concepts-bottom-row {
        gap: var(--spacing-2xl);
    }

    /* データフロー */
    .dataflow-section {
        padding: var(--spacing-base);
    }

    .dataflow-diagram {
        flex-direction: column;
        align-items: center;
    }

    .flow-box {
        max-width: 100%;
        width: 100%;
    }

    .flow-arrow {
        transform: rotate(90deg);
    }

    /* 比較グリッド */
    .comparison-grid {
        grid-template-columns: 1fr;
    }

    /* コンセプト詳細グリッド */
    .concepts-detail-grid {
        grid-template-columns: 1fr;
    }

    /* フローチャート */
    .selection-flowchart {
        padding: var(--spacing-base);
    }

    .decision-branches {
        flex-direction: column;
        gap: var(--spacing-base);
    }

    /* アタッチメント構成図 */
    .attachment-diagrams {
        grid-template-columns: 1fr;
    }

    /* Connect Deep Dive */
    .connect-analogy {
        padding: var(--spacing-base);
    }

    .analogy-grid {
        grid-template-columns: 1fr;
    }

    .vpn-connect-comparison {
        padding: var(--spacing-base);
    }

    .vpn-connect-table thead th,
    .vpn-connect-table tbody td {
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    .selection-guide {
        flex-direction: column;
    }

    /* プラクティスグリッド */
    .practices-grid {
        grid-template-columns: 1fr;
    }

    /* FAQグリッド */
    .faq-grid {
        grid-template-columns: 1fr;
    }

    /* フッター */
    .footer .resources {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    /* コンセプトノード */
    .concept-node {
        min-width: 100px;
        padding: var(--spacing-sm);
    }

    .tgw-center {
        width: 70px;
        height: 70px;
    }

    /* フローボックス */
    .flow-box {
        padding: var(--spacing-sm);
    }

    /* 比較カード */
    .comparison-body {
        padding: var(--spacing-sm);
    }

    /* テーブルフォントサイズ */
    .attachment-comparison-table tbody td,
    .quota-table tbody td {
        font-size: var(--font-size-xs);
        padding: 8px 10px;
    }

    /* ミニアーキテクチャ */
    .mini-architecture {
        gap: var(--spacing-xs);
    }

    .arch-element {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
}