/* ========== CSS Variables ========== */
    :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: #E5E7EB;
      --color-success: #10B981;
      --color-warning: #F59E0B;
      --color-error: #EF4444;
      --color-info: #3B82F6;
      --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
      --radius-md: 8px;
      --radius-lg: 15px;
      --radius-xl: 20px;
      --transition-base: 0.3s ease;
    }

    /* ========== Reset & Base ========== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: 80px; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans JP', sans-serif;
      color: var(--color-text-primary);
      background: var(--color-bg-light);
      line-height: 1.8;
      font-size: 20px;
    }

    /* ========== Fixed Header ========== */
    .site-header {
      position: fixed; top: 0; left: 0; right: 0;
      background: linear-gradient(135deg, var(--color-aws-dark), #374151);
      color: var(--color-text-white);
      z-index: 1002;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    .header-inner {
      max-width: 1200px; margin: 0 auto;
      padding: 14px 24px;
      display: flex; align-items: center; gap: 16px;
    }
    .header-badge {
      background: var(--color-aws-orange-original);
      color: #fff; font-weight: 700;
      padding: 4px 14px; border-radius: 6px;
      font-size: 14px; white-space: nowrap;
    }
    .header-title { font-size: 20px; font-weight: 700; }
    .progress-bar {
      position: fixed; top: 56px; left: 0; right: 0;
      height: 3px; background: rgba(255,255,255,0.1);
      z-index: 1001;
    }
    .progress-fill {
      height: 100%; width: 0%;
      background: var(--color-aws-orange-original);
      transition: width 0.1s linear;
    }

    /* ========== Navigation ========== */
    .toc-nav {
      position: sticky; top: 60px;
      background: var(--color-bg-white);
      border-bottom: 1px solid var(--color-border);
      z-index: 999; overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .toc-nav ul {
      list-style: none;
      max-width: 1200px; margin: 0 auto;
      display: flex; gap: 0;
      padding: 0 16px;
    }
    .toc-nav a {
      display: block; padding: 12px 16px;
      color: var(--color-text-secondary);
      text-decoration: none; font-size: 14px;
      font-weight: 500; white-space: nowrap;
      border-bottom: 3px solid transparent;
      transition: var(--transition-base);
    }
    .toc-nav a:hover, .toc-nav a.active {
      color: var(--color-aws-orange);
      border-bottom-color: var(--color-aws-orange);
    }

    /* ========== Main Content ========== */
    .content-main {
      max-width: 1200px; margin: 0 auto;
      padding: 30px 24px 80px;
    }

    /* ========== Hero Section ========== */
    .hero-section {
      background: linear-gradient(135deg, #232F3E 0%, #37475A 100%);
      color: #fff;
      border-radius: var(--radius-xl);
      padding: 48px 40px;
      margin-bottom: 40px;
    }
    .hero-title {
      font-size: 32px; font-weight: 800;
      margin-bottom: 12px; line-height: 1.3;
    }
    .hero-subtitle {
      font-size: 22px; color: rgba(255,255,255,0.85);
      margin-bottom: 28px;
    }
    .takeaway-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .takeaway-card {
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: var(--radius-md);
      padding: 20px;
    }
    .takeaway-num {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px;
      background: var(--color-aws-orange-original);
      color: #fff; font-weight: 800; font-size: 16px;
      border-radius: 50%; margin-bottom: 10px;
    }
    .takeaway-text { font-size: 20px; line-height: 1.5; }

    /* ========== Section ========== */
    .section { margin-bottom: 48px; }
    .section-label {
      display: inline-block;
      background: var(--color-aws-orange-original);
      color: #fff; font-weight: 700; font-size: 13px;
      padding: 4px 14px; border-radius: 20px;
      margin-bottom: 12px; letter-spacing: 0.5px;
    }
    .section-title {
      font-size: 28px; font-weight: 800;
      color: var(--color-aws-dark);
      margin-bottom: 8px;
    }
    .section-desc {
      font-size: 20px; color: var(--color-text-secondary);
      margin-bottom: 24px;
    }

    /* ========== Analogy Box ========== */
    .analogy-box {
      background: linear-gradient(135deg, #FFF7ED 0%, #FFFBF5 100%);
      border: 2px solid #FDBA74;
      border-radius: var(--radius-lg);
      padding: 32px;
      margin-bottom: 32px;
    }
    .analogy-header {
      display: flex; align-items: center; gap: 12px;
      font-size: 24px; font-weight: 700;
      color: var(--color-aws-dark);
      margin-bottom: 16px;
    }
    .analogy-icon { font-size: 36px; }
    .analogy-body { font-size: 20px; line-height: 1.8; }

    /* ========== Mapping Table ========== */
    .mapping-table-wrap {
      overflow-x: auto; margin-bottom: 32px;
    }
    .mapping-table {
      width: 100%; border-collapse: collapse;
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .mapping-table th {
      background: var(--color-aws-dark);
      color: #fff; font-weight: 700;
      padding: 16px 20px; text-align: left;
      font-size: 20px;
    }
    .mapping-table td {
      padding: 14px 20px; font-size: 20px;
      background: var(--color-bg-white);
      border-bottom: 1px solid var(--color-border);
    }
    .mapping-table tr:nth-child(even) td { background: var(--color-bg-light); }

    /* ========== Card Grid ========== */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 32px;
    }
    .card-grid-4 {
      grid-template-columns: repeat(4, 1fr);
    }
    .card-grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
    .info-card {
      background: var(--color-bg-white);
      border-radius: var(--radius-md);
      padding: 24px;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
      transition: var(--transition-base);
    }
    .info-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    .card-icon { font-size: 36px; margin-bottom: 12px; }
    .card-title {
      font-size: 20px; font-weight: 700;
      color: var(--color-aws-dark);
      margin-bottom: 8px;
    }
    .card-body { font-size: 20px; color: var(--color-text-secondary); }

    /* ========== IP Config Cards ========== */
    .ip-config-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px; margin-bottom: 32px;
    }
    .ip-config-card {
      background: var(--color-bg-white);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      border: 2px solid transparent;
      transition: var(--transition-base);
    }
    .ip-config-card:hover { border-color: var(--color-info); }
    .ip-config-header {
      padding: 18px 24px;
      font-weight: 700; font-size: 20px;
      color: #fff; display: flex;
      align-items: center; gap: 10px;
    }
    .ip-config-body { padding: 20px 24px; }
    .ip-config-row {
      display: flex; align-items: center; gap: 12px;
      padding: 8px 0; font-size: 20px;
    }
    .ip-label {
      display: inline-block; padding: 2px 10px;
      border-radius: 4px; font-weight: 600;
      font-size: 14px; letter-spacing: 0.5px;
    }
    .label-v4 { background: #DBEAFE; color: #1D4ED8; }
    .label-v6 { background: #D1FAE5; color: #065F46; }
    .ip-config-support {
      margin-top: 12px; padding-top: 12px;
      border-top: 1px solid var(--color-border);
      font-size: 20px; color: var(--color-text-secondary);
    }
    .support-badge {
      display: inline-block; padding: 2px 8px;
      border-radius: 4px; font-size: 13px; font-weight: 600;
      margin-left: 4px;
    }
    .badge-ok { background: #D1FAE5; color: #065F46; }
    .badge-ng { background: #FEE2E2; color: #991B1B; }

    .header-blue { background: linear-gradient(135deg, #2563EB, #3B82F6); }
    .header-green { background: linear-gradient(135deg, #059669, #10B981); }
    .header-purple { background: linear-gradient(135deg, #7C3AED, #8B5CF6); }
    .header-orange { background: linear-gradient(135deg, #D97706, #F59E0B); }

    /* ========== Rule Cards ========== */
    .rule-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px; margin-bottom: 32px;
    }
    .rule-card {
      background: var(--color-bg-white);
      border-radius: var(--radius-md);
      padding: 24px;
      border-left: 5px solid;
      box-shadow: var(--shadow-sm);
    }
    .rule-card.rule-critical { border-left-color: var(--color-error); }
    .rule-card.rule-important { border-left-color: var(--color-warning); }
    .rule-card.rule-info { border-left-color: var(--color-info); }
    .rule-card.rule-success { border-left-color: var(--color-success); }
    .rule-title {
      font-weight: 700; font-size: 20px;
      margin-bottom: 8px; display: flex;
      align-items: center; gap: 8px;
    }
    .rule-body { font-size: 20px; color: var(--color-text-secondary); }

    /* ========== Comparison Table ========== */
    .compare-table-wrap { overflow-x: auto; margin-bottom: 32px; }
    .compare-table {
      width: 100%; border-collapse: collapse;
      box-shadow: var(--shadow-sm);
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    .compare-table th {
      background: var(--color-aws-dark);
      color: #fff; padding: 14px 18px;
      font-size: 20px; font-weight: 700;
      text-align: center;
    }
    .compare-table th:first-child { text-align: left; }
    .compare-table td {
      padding: 12px 18px; font-size: 20px;
      border-bottom: 1px solid var(--color-border);
      text-align: center;
      background: var(--color-bg-white);
    }
    .compare-table td:first-child {
      text-align: left; font-weight: 600;
      background: var(--color-bg-light);
    }
    .check { color: var(--color-success); font-size: 24px; }
    .cross { color: var(--color-error); font-size: 24px; }

    /* ========== SVG Container ========== */
    .svg-container {
      background: var(--color-bg-white);
      border-radius: var(--radius-lg);
      padding: 20px;
      box-shadow: var(--shadow-md);
      margin-bottom: 32px;
      overflow-x: auto;
    }
    .svg-container svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }

    /* ========== Tabbed Code Examples ========== */
    .code-tabs { margin-bottom: 32px; }
    .tab-buttons {
      display: flex; gap: 0;
      border-bottom: 2px solid var(--color-border);
    }
    .tab-btn {
      padding: 12px 24px; font-size: 16px;
      font-weight: 600; background: transparent;
      border: none; cursor: pointer;
      color: var(--color-text-secondary);
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      transition: var(--transition-base);
    }
    .tab-btn.active {
      color: var(--color-aws-orange);
      border-bottom-color: var(--color-aws-orange);
    }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }
    .code-block {
      background: #1E293B; color: #E2E8F0;
      padding: 24px; border-radius: 0 0 var(--radius-md) var(--radius-md);
      overflow-x: auto; font-family: 'Fira Code', 'Source Code Pro', monospace;
      font-size: 16px; line-height: 1.7;
    }
    .code-comment { color: #64748B; }
    .code-key { color: #7DD3FC; }
    .code-val { color: #86EFAC; }
    .code-str { color: #FDE68A; }

    /* ========== Best Practice ========== */
    .bp-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px; margin-bottom: 32px;
    }
    .bp-card {
      background: var(--color-bg-white);
      border-radius: var(--radius-md);
      padding: 24px;
      box-shadow: var(--shadow-sm);
    }
    .bp-header {
      display: flex; align-items: center; gap: 10px;
      font-size: 20px; font-weight: 700;
      margin-bottom: 14px;
    }
    .bp-do { color: var(--color-success); }
    .bp-dont { color: var(--color-error); }
    .bp-list {
      list-style: none; padding: 0;
    }
    .bp-list li {
      padding: 8px 0; font-size: 20px;
      display: flex; align-items: flex-start; gap: 8px;
      border-bottom: 1px solid var(--color-border);
    }
    .bp-list li:last-child { border: none; }
    .bp-icon { flex-shrink: 0; font-size: 20px; margin-top: 2px; }

    /* ========== Exam Tips ========== */
    .exam-box {
      background: linear-gradient(135deg, #EEF2FF, #F5F3FF);
      border: 2px solid #818CF8;
      border-radius: var(--radius-lg);
      padding: 32px; margin-bottom: 32px;
    }
    .exam-title {
      font-size: 24px; font-weight: 700;
      color: #4338CA; margin-bottom: 20px;
      display: flex; align-items: center; gap: 10px;
    }
    .exam-list { list-style: none; padding: 0; }
    .exam-list li {
      padding: 12px 0; font-size: 20px;
      display: flex; align-items: flex-start; gap: 10px;
      border-bottom: 1px solid rgba(129,140,248,0.2);
    }
    .exam-list li:last-child { border: none; }
    .exam-num {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 28px; height: 28px;
      background: #4338CA; color: #fff;
      font-weight: 700; font-size: 14px;
      border-radius: 50%; flex-shrink: 0;
    }

    /* ========== FAQ Accordion ========== */
    .faq-list { margin-bottom: 32px; }
    .faq-item {
      background: var(--color-bg-white);
      border-radius: var(--radius-md);
      margin-bottom: 12px;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }
    .faq-q {
      width: 100%; padding: 20px 24px;
      background: transparent; border: none;
      cursor: pointer; text-align: left;
      font-size: 20px; font-weight: 700;
      color: var(--color-aws-dark);
      display: flex; align-items: center;
      justify-content: space-between; gap: 12px;
    }
    .faq-q:hover { background: var(--color-bg-light); }
    .faq-arrow {
      font-size: 20px; transition: transform 0.3s ease;
      flex-shrink: 0;
    }
    .faq-item.open .faq-arrow { transform: rotate(180deg); }
    .faq-a {
      max-height: 0; overflow: hidden;
      transition: max-height 0.4s ease, padding 0.3s ease;
    }
    .faq-item.open .faq-a {
      max-height: 500px;
      padding: 0 24px 20px;
    }
    .faq-a-inner { font-size: 20px; color: var(--color-text-secondary); line-height: 1.8; }

    /* ========== Cheatsheet ========== */
    .cheatsheet {
      background: var(--color-aws-dark);
      color: #fff; border-radius: var(--radius-xl);
      padding: 40px; margin-bottom: 32px;
    }
    .cheatsheet-title {
      font-size: 28px; font-weight: 800;
      margin-bottom: 24px;
      display: flex; align-items: center; gap: 10px;
    }
    .cs-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .cs-item {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--radius-md);
      padding: 18px;
    }
    .cs-label {
      font-size: 14px; color: var(--color-aws-orange-original);
      font-weight: 700; margin-bottom: 6px;
      text-transform: uppercase; letter-spacing: 0.5px;
    }
    .cs-value { font-size: 20px; line-height: 1.5; }

    /* ========== Troubleshooting ========== */
    .ts-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px; margin-bottom: 32px;
    }
    .ts-card {
      background: var(--color-bg-white);
      border-radius: var(--radius-md);
      padding: 24px;
      box-shadow: var(--shadow-sm);
      border-top: 4px solid var(--color-error);
    }
    .ts-symptom {
      font-weight: 700; font-size: 20px;
      color: var(--color-error);
      margin-bottom: 10px;
    }
    .ts-cause {
      font-size: 20px; color: var(--color-text-secondary);
      margin-bottom: 10px;
    }
    .ts-fix {
      font-size: 20px;
      background: #ECFDF5; padding: 12px 16px;
      border-radius: 6px; color: #065F46;
    }

    /* ========== Glossary ========== */
    .glossary-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px; margin-bottom: 32px;
    }
    .glossary-item {
      background: var(--color-bg-white);
      border-radius: var(--radius-md);
      padding: 16px 20px;
      box-shadow: var(--shadow-sm);
    }
    .glossary-term {
      font-weight: 700; font-size: 20px;
      color: var(--color-aws-dark);
      margin-bottom: 4px;
    }
    .glossary-def { font-size: 20px; color: var(--color-text-secondary); }

    /* ========== Scroll to Top ========== */
    .scroll-top {
      position: fixed; bottom: 30px; right: 30px;
      width: 48px; height: 48px;
      background: var(--color-aws-orange-original);
      color: #fff; border: none; border-radius: 50%;
      font-size: 24px; cursor: pointer;
      box-shadow: 0 4px 12px rgba(255,153,0,0.4);
      opacity: 0; visibility: hidden;
      transition: var(--transition-base);
      display: flex; align-items: center; justify-content: center;
      z-index: 900;
    }
    .scroll-top.visible { opacity: 1; visibility: visible; }

    /* ========== Responsive ========== */
    @media (max-width: 900px) {
      .takeaway-grid, .card-grid, .ip-config-grid,
      .rule-grid, .bp-grid, .cs-grid, .ts-grid,
      .glossary-grid { grid-template-columns: 1fr; }
      .card-grid-4, .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
      .hero-title { font-size: 26px; }
      .hero-subtitle { font-size: 20px; }
    }
    @media (max-width: 600px) {
      .card-grid-4, .card-grid-3 { grid-template-columns: 1fr; }
      body { font-size: 18px; }
    }