/* ========================================
   CSS Custom Properties
   ======================================== */
:root {
    --color-aws-dark: #232F3E;
    --color-aws-orange: #dc7600;
    --color-aws-orange-original: #FF9900;
    --color-text-primary: #374151;
    --color-text-secondary: #6B7280;
    --color-text-white: #FFFFFF;
    --color-bg-light: #F9FAFB;
    --color-bg-white: #FFFFFF;
    --color-border-light: #E5E7EB;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-base: 20px;
    --spacing-lg: 25px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-3xl: 60px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-base: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
    --transition-base: 0.3s ease;
    --container-max-width: 1200px;

    /* Page-specific colors */
    --color-segment1: #3B82F6;
    --color-segment1-bg: #EFF6FF;
    --color-segment1-border: #93C5FD;
    --color-segment2: #8B5CF6;
    --color-segment2-bg: #F5F3FF;
    --color-segment2-border: #C4B5FD;
    --color-segment3: #059669;
    --color-segment3-bg: #ECFDF5;
    --color-segment3-border: #6EE7B7;
    --color-lock: #D97706;
    --color-lock-bg: #FFFBEB;
}

/* ========================================
   Base Styles
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif;
    font-size: 20px;
    line-height: 1.75;
    color: var(--color-text-primary);
    background: var(--color-bg-light);
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-base);
}

/* ========================================
   Hero Section
   ======================================== */
.hero {
    background: linear-gradient(135deg, var(--color-aws-dark) 0%, #1a2332 60%, #2d3748 100%);
    color: var(--color-text-white);
    padding: var(--spacing-3xl) var(--spacing-base);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 50%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-block;
    background: rgba(255, 153, 0, 0.2);
    color: var(--color-aws-orange-original);
    font-size: 20px;
    font-weight: 600;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255, 153, 0, 0.3);
    margin-bottom: var(--spacing-base);
}

.hero h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    letter-spacing: 0.02em;
}

.hero-subtitle {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-2xl);
}

/* Conclusion-first takeaways */
.hero-takeaways {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-base);
    margin-top: var(--spacing-xl);
}

.takeaway-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: left;
    backdrop-filter: blur(4px);
}

.takeaway-card .takeaway-num {
    display: inline-block;
    background: var(--color-aws-orange-original);
    color: var(--color-aws-dark);
    font-size: 20px;
    font-weight: 700;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    margin-bottom: var(--spacing-sm);
}

.takeaway-card .takeaway-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.takeaway-card .takeaway-text {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
}

/* ========================================
   Section Common
   ======================================== */
.section {
    padding: var(--spacing-3xl) var(--spacing-base);
}

.section-white {
    background: var(--color-bg-white);
}

.section-light {
    background: var(--color-bg-light);
}

.section-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-aws-dark);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.section-desc {
    font-size: 20px;
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-2xl);
}

/* ========================================
   Analogy Section
   ======================================== */
.analogy-intro {
    background: linear-gradient(135deg, var(--color-lock-bg) 0%, #FEF3C7 100%);
    border: 2px solid #FCD34D;
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    max-width: 960px;
    margin: 0 auto var(--spacing-2xl);
}

.analogy-intro-title {
    font-size: 26px;
    font-weight: 700;
    color: #92400E;
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.analogy-intro-text {
    font-size: 20px;
    color: #78350F;
    text-align: center;
    line-height: 1.8;
}

/* Analogy mapping table */
.analogy-table-wrap {
    max-width: 960px;
    margin: 0 auto;
    overflow-x: auto;
}

.analogy-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    font-size: 20px;
}

.analogy-table thead th {
    background: var(--color-aws-dark);
    color: var(--color-text-white);
    padding: var(--spacing-md) var(--spacing-base);
    font-weight: 700;
    text-align: left;
}

.analogy-table tbody td {
    padding: var(--spacing-md) var(--spacing-base);
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: top;
}

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

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

.analogy-emoji {
    font-size: 24px;
    margin-right: 8px;
}

/* ========================================
   Architecture Overview SVG
   ======================================== */
.arch-diagram-wrap {
    max-width: 1200px;
    margin: 0 auto var(--spacing-2xl);
    overflow-x: auto;
}

/* ========================================
   Segment Detail Cards
   ======================================== */
.segment-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    border-left: 6px solid transparent;
}

.segment-card.seg1 {
    border-left-color: var(--color-segment1);
}

.segment-card.seg2 {
    border-left-color: var(--color-segment2);
}

.segment-card.seg3 {
    border-left-color: var(--color-segment3);
}

.segment-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.segment-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-white);
    flex-shrink: 0;
}

.seg1 .segment-num { background: var(--color-segment1); }
.seg2 .segment-num { background: var(--color-segment2); }
.seg3 .segment-num { background: var(--color-segment3); }

.segment-title-group {
    flex: 1;
}

.segment-card-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-aws-dark);
}

.segment-card-sub {
    font-size: 20px;
    color: var(--color-text-secondary);
}

.segment-body-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.detail-box {
    background: var(--color-bg-light);
    border-radius: var(--radius-base);
    padding: var(--spacing-base);
}

.detail-box-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.seg1 .detail-box-title { color: var(--color-segment1); }
.seg2 .detail-box-title { color: var(--color-segment2); }
.seg3 .detail-box-title { color: var(--color-segment3); }

.detail-box p, .detail-box ul {
    font-size: 20px;
    line-height: 1.7;
}

.detail-box ul {
    padding-left: 1.5em;
}

.detail-box li {
    margin-bottom: 6px;
}

/* Highlight tip */
.tip-box {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    background: #FFF7ED;
    border: 1px solid #FDBA74;
    border-radius: var(--radius-base);
    padding: var(--spacing-base);
    margin-top: var(--spacing-base);
}

.tip-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1;
}

.tip-text {
    font-size: 20px;
    color: #9A3412;
    line-height: 1.6;
}

.tip-text strong {
    color: #7C2D12;
}

/* Warning box */
.warn-box {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-base);
    padding: var(--spacing-base);
    margin-top: var(--spacing-base);
}

.warn-text {
    font-size: 20px;
    color: #991B1B;
    line-height: 1.6;
}

.warn-text strong {
    color: #7F1D1D;
}

/* ========================================
   Certificate Comparison Table
   ======================================== */
.comparison-table-wrap {
    max-width: 1100px;
    margin: 0 auto;
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    font-size: 20px;
}

.comparison-table thead th {
    padding: var(--spacing-md) var(--spacing-base);
    font-weight: 700;
    text-align: center;
    color: var(--color-text-white);
}

.comparison-table thead th:first-child {
    background: var(--color-aws-dark);
    text-align: left;
}

.comparison-table thead th.seg1-head { background: var(--color-segment1); }
.comparison-table thead th.seg2-head { background: var(--color-segment2); }
.comparison-table thead th.seg3-head { background: var(--color-segment3); }

.comparison-table tbody td {
    padding: var(--spacing-md) var(--spacing-base);
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: top;
    text-align: center;
}

.comparison-table tbody td:first-child {
    font-weight: 600;
    text-align: left;
    background: var(--color-bg-light);
}

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

.badge-ok {
    display: inline-block;
    background: #D1FAE5;
    color: #065F46;
    font-size: 20px;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 50px;
}

.badge-ng {
    display: inline-block;
    background: #FEE2E2;
    color: #991B1B;
    font-size: 20px;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 50px;
}

/* ========================================
   Code Examples
   ======================================== */
.code-section {
    max-width: 1100px;
    margin: 0 auto var(--spacing-2xl);
}

.code-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
}

.code-tab {
    background: #E5E7EB;
    color: var(--color-text-primary);
    border: none;
    padding: 10px 24px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: background var(--transition-base);
    font-family: inherit;
}

.code-tab.active {
    background: var(--color-aws-dark);
    color: var(--color-text-white);
}

.code-tab:hover:not(.active) {
    background: #D1D5DB;
}

.code-panel {
    display: none;
    background: var(--color-aws-dark);
    border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
    padding: var(--spacing-lg);
    overflow-x: auto;
}

.code-panel.active {
    display: block;
}

.code-panel pre {
    margin: 0;
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-size: 20px;
    line-height: 1.6;
    color: #E5E7EB;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.code-comment { color: #6B7280; }
.code-keyword { color: #93C5FD; }
.code-string { color: #86EFAC; }
.code-param { color: #FDE68A; }
.code-value { color: #FCA5A5; }

/* ========================================
   Best Practices
   ======================================== */
.best-practices-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    max-width: 1100px;
    margin: 0 auto;
}

.bp-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border-light);
    transition: box-shadow var(--transition-base);
}

.bp-card:hover {
    box-shadow: var(--shadow-md);
}

.bp-card-icon {
    font-size: 36px;
    margin-bottom: var(--spacing-sm);
}

.bp-card-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-aws-dark);
    margin-bottom: var(--spacing-sm);
}

.bp-card-text {
    font-size: 20px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* ========================================
   FAQ Section
   ======================================== */
.faq-list {
    max-width: 960px;
    margin: 0 auto;
}

.faq-item {
    background: var(--color-bg-white);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}

.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: var(--spacing-base) var(--spacing-lg);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-aws-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    font-family: inherit;
    transition: background var(--transition-base);
}

.faq-question:hover {
    background: var(--color-bg-light);
}

.faq-toggle {
    font-size: 24px;
    color: var(--color-text-secondary);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.faq-item.open .faq-toggle {
    transform: rotate(180deg);
}

.faq-answer {
    display: none;
    padding: 0 var(--spacing-lg) var(--spacing-base);
    font-size: 20px;
    color: var(--color-text-primary);
    line-height: 1.7;
}

.faq-item.open .faq-answer {
    display: block;
}

/* ========================================
   Summary Section
   ======================================== */
.summary-section {
    background: linear-gradient(135deg, var(--color-aws-dark) 0%, #1a2332 100%);
    color: var(--color-text-white);
    padding: var(--spacing-3xl) var(--spacing-base);
    text-align: center;
}

.summary-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: var(--spacing-xl);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-base);
    max-width: 960px;
    margin: 0 auto var(--spacing-2xl);
}

.summary-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.summary-item-icon {
    font-size: 40px;
    margin-bottom: var(--spacing-sm);
}

.summary-item-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.summary-item-text {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.75);
}

.summary-message {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

/* ========================================
   Exam Tip
   ======================================== */
.exam-tip {
    max-width: 960px;
    margin: var(--spacing-2xl) auto 0;
    background: rgba(255, 153, 0, 0.12);
    border: 1px solid rgba(255, 153, 0, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: left;
}

.exam-tip-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-aws-orange-original);
    margin-bottom: var(--spacing-sm);
}

.exam-tip-text {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
    .hero h1 { font-size: 28px; }
    .hero-takeaways { grid-template-columns: 1fr; }
    .segment-body-grid { grid-template-columns: 1fr; }
    .best-practices-grid { grid-template-columns: 1fr; }
    .summary-grid { grid-template-columns: 1fr; }
    .hero-subtitle { font-size: 20px; }
    .section-title { font-size: 26px; }
}