/* ==========================================================================
   リセット + タイポグラフィ基礎 + レイアウト
   ========================================================================== */

/* --- リセット ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* 前庭障害等に配慮して動きを抑制する */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

body {
  font-family: var(--cds-font-sans);
  font-size: var(--cds-font-size-body-01);
  font-weight: var(--cds-font-weight-regular);
  line-height: var(--cds-line-height-body);
  color: var(--cds-text-primary);
  background-color: var(--cds-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a {
  color: var(--cds-link-primary);
  text-decoration: none;
  transition: color var(--cds-duration-fast-02) var(--cds-easing-standard);
}

a:hover {
  color: var(--cds-link-primary-hover);
  text-decoration: underline;
}

/* キーボードフォーカス（Carbon 2px inset + 白インナーリング） */
:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 1px var(--cds-focus-inset);
}

/* --- タイポグラフィ ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cds-font-sans);
  font-weight: var(--cds-font-weight-regular);
  line-height: var(--cds-line-height-heading);
  color: var(--cds-text-primary);
}

.cds-type-display-01 {
  font-size: var(--cds-font-size-display-01);
  font-weight: var(--cds-font-weight-light);
  line-height: var(--cds-line-height-display);
  letter-spacing: 0;
}

.cds-type-display-02 {
  font-size: var(--cds-font-size-display-02);
  font-weight: var(--cds-font-weight-light);
  line-height: var(--cds-line-height-display);
}

.cds-type-heading-01 {
  font-size: var(--cds-font-size-heading-01);
  font-weight: var(--cds-font-weight-light);
  line-height: var(--cds-line-height-heading);
}

.cds-type-heading-02 {
  font-size: var(--cds-font-size-heading-02);
  font-weight: var(--cds-font-weight-regular);
  line-height: var(--cds-line-height-heading);
}

.cds-type-heading-03 {
  font-size: var(--cds-font-size-heading-03);
  font-weight: var(--cds-font-weight-regular);
  line-height: 1.33;
}

.cds-type-heading-04 {
  font-size: var(--cds-font-size-heading-04);
  font-weight: var(--cds-font-weight-semibold);
  line-height: 1.40;
}

.cds-type-body-01 {
  font-size: var(--cds-font-size-body-01);
  font-weight: var(--cds-font-weight-regular);
  line-height: var(--cds-line-height-body);
}

.cds-type-body-02 {
  font-size: var(--cds-font-size-body-02);
  font-weight: var(--cds-font-weight-regular);
  line-height: var(--cds-line-height-compact);
  letter-spacing: var(--cds-letter-spacing-body-short);
}

.cds-type-caption {
  font-size: var(--cds-font-size-caption-01);
  font-weight: var(--cds-font-weight-regular);
  line-height: 1.33;
  letter-spacing: var(--cds-letter-spacing-caption);
  color: var(--cds-text-secondary);
}

.cds-type-code {
  font-family: var(--cds-font-mono);
  font-size: var(--cds-font-size-body-02);
  line-height: 1.43;
  letter-spacing: var(--cds-letter-spacing-body-short);
}

/* --- レイアウトユーティリティ --------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--cds-container-max);
  margin-inline: auto;
  padding-inline: var(--cds-spacing-05); /* 16px（モバイル） */
}

@media (min-width: 672px) {
  .container {
    padding-inline: var(--cds-spacing-07); /* 32px（タブレット以降） */
  }
}

.section {
  padding-block: var(--cds-spacing-11); /* 80px */
}

@media (max-width: 671px) {
  .section {
    padding-block: var(--cds-spacing-09); /* 48px */
  }
}

.section--compact {
  padding-block: var(--cds-spacing-09); /* 48px */
}

/* 背景色によるレイヤリング（Carbon の depth 表現） */
.section--layer-01 {
  background-color: var(--cds-layer-01);
}

.section--dark {
  background-color: var(--cds-gray-100);
  color: var(--cds-white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark p {
  color: var(--cds-white);
}

.section--dark .cds-type-caption {
  color: var(--cds-gray-30);
}

/* グリッド（簡易版） */
.grid {
  display: grid;
  gap: var(--cds-spacing-06);
}

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1055px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 671px) {
  .grid-cols-4,
  .grid-cols-3,
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Flex ヘルパー */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--cds-spacing-03); }
.gap-4 { gap: var(--cds-spacing-05); }
.gap-6 { gap: var(--cds-spacing-06); }

/* テキストヘルパー */
.text-center { text-align: center; }
.text-secondary { color: var(--cds-text-secondary); }

/* マージン */
.mt-2 { margin-top: var(--cds-spacing-03); }
.mt-4 { margin-top: var(--cds-spacing-05); }
.mt-6 { margin-top: var(--cds-spacing-06); }
.mt-8 { margin-top: var(--cds-spacing-07); }
.mb-2 { margin-bottom: var(--cds-spacing-03); }
.mb-4 { margin-bottom: var(--cds-spacing-05); }
.mb-6 { margin-bottom: var(--cds-spacing-06); }
.mb-8 { margin-bottom: var(--cds-spacing-07); }

/* スクリーンリーダー専用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* スキップリンク */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--cds-spacing-05);
  z-index: 1000;
  padding: var(--cds-spacing-03) var(--cds-spacing-05);
  background-color: var(--cds-gray-100);
  color: var(--cds-white);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--cds-spacing-03);
  color: var(--cds-white);
}

/* --- レスポンシブヘルパー ------------------------------------------------- */
@media (max-width: 671px) {
  .cds-type-display-01 {
    font-size: 2.625rem; /* 60px -> 42px on mobile */
  }
  .cds-type-display-02 {
    font-size: 2rem;
  }
  .cds-type-heading-02 {
    font-size: 1.5rem;
  }
}