/* Kaguya site styles. Values come from tokens.css (docs/design-system/site). */

/* Fonts: subsets of the pages' characters (scripts/build-site-fonts.py) */
@font-face {
  font-family: "Zen Old Mincho";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/zen-old-mincho-400.woff2") format("woff2");
}

@font-face {
  font-family: "Zen Old Mincho";
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/zen-old-mincho-500.woff2") format("woff2");
}

@font-face {
  font-family: "Zen Kaku Gothic New";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/zen-kaku-gothic-new-400.woff2") format("woff2");
}

@font-face {
  font-family: "Zen Kaku Gothic New";
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/zen-kaku-gothic-new-500.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/cormorant-garamond.woff2") format("woff2");
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-background-surface-default);
  color: var(--color-text-default);
  font: var(--typography-body-md);
  letter-spacing: var(--typography-body-md-letter-spacing);
  overflow-wrap: anywhere;
  line-break: strict;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

h1,
h2,
h3,
.card__title {
  font-feature-settings: "palt";
  word-break: auto-phrase;
}

/* 区画の頭に置く英字の小見出し。アプリの「—— MANUSCRIPT」と同じ組 */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-text-accent);
  font: var(--typography-overline-default);
  letter-spacing: var(--typography-overline-default-letter-spacing);
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: var(--space-24);
  border-top: var(--border-width-divider) solid var(--color-border-accent);
}

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

a {
  color: var(--color-text-accent);
  text-decoration-thickness: var(--border-width-divider);
  text-underline-offset: var(--space-4);
}

:focus-visible {
  outline: var(--border-width-focus) solid var(--color-border-focus);
  outline-offset: var(--focus-offset-outside);
}

@media (prefers-reduced-motion: no-preference) {
  .button,
  .site-header__link,
  .site-footer__link {
    transition-property: background-color, color;
    transition-duration: var(--duration-hover);
    transition-timing-function: var(--easing-hover);
  }
}

.skip-link {
  position: absolute;
  left: var(--space-8);
  top: var(--space-8);
  padding: var(--space-6) var(--space-12);
  background: var(--color-background-surface-default);
  color: var(--color-text-default);
  font: var(--typography-label-md);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Component: button (docs/design-system/site/components/button) */
.button {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-40);
  padding: 0 var(--space-20);
  border-radius: var(--radius-md);
  background: var(--color-background-primary-default);
  color: var(--color-text-on-primary);
  font: var(--typography-label-strong);
  letter-spacing: var(--typography-label-strong-letter-spacing);
  text-decoration: none;
}

.button:hover {
  background: var(--color-background-primary-hovered);
}

/* Component: site-header (docs/design-system/site/components/site-header) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--color-background-surface-default) calc(var(--opacity-translucent) * 100%), transparent);
  -webkit-backdrop-filter: blur(var(--space-16));
  backdrop-filter: blur(var(--space-16));
  border-bottom: var(--border-width-divider) solid var(--color-border-subtle);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  max-width: var(--size-1200);
  margin: 0 auto;
  padding: var(--space-12) var(--space-24);
}

.site-header__product {
  display: block;
}

.site-header__product img,
.site-footer__logo img {
  width: auto;
  height: var(--size-20);
}

.site-footer__logo {
  margin-bottom: var(--space-16);
}

.site-header__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.site-header__link {
  display: block;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-md);
  color: var(--color-text-subtle);
  font: var(--typography-label-md);
  letter-spacing: var(--typography-label-md-letter-spacing);
  text-decoration: none;
}

.site-header__link:hover {
  background: var(--color-background-ghost-hovered);
}

.site-header__link[aria-current="page"] {
  background: var(--color-background-ghost-selected);
  color: var(--color-text-default);
}

/* Component: site-footer (docs/design-system/site/components/site-footer) */
.site-footer {
  background: var(--color-background-surface-sunken);
  border-top: var(--border-width-divider) solid var(--color-border-subtle);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-16);
  max-width: var(--size-1200);
  margin: 0 auto;
  padding: var(--space-40) var(--space-24);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  padding: 0;
  list-style: none;
}

.site-footer__link {
  color: var(--color-text-subtle);
  font: var(--typography-body-sm);
  letter-spacing: var(--typography-body-sm-letter-spacing);
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--color-text-default);
}

.site-footer__copyright {
  color: var(--color-text-subtle);
  font: var(--typography-caption-default);
  letter-spacing: var(--typography-caption-default-letter-spacing);
}

/* Page: top */
.top__inner {
  max-width: var(--size-1200);
  margin: 0 auto;
  padding: 0 var(--space-24);
}

.top__inner--sections {
  padding-bottom: var(--space-96);
}

/* ヒーローの背景。上の沈んだ面から、下の地へ溶けるように移る */
.top-stage {
  background: linear-gradient(to bottom, var(--color-background-surface-sunken), var(--color-background-surface-default));
}

.top-hero {
  display: grid;
  justify-items: start;
  gap: var(--space-24);
  padding: var(--space-96) 0 var(--space-64);
}

.top-hero__title {
  font: var(--typography-heading-lg);
  letter-spacing: var(--typography-heading-lg-letter-spacing);
}

@media (min-width: 640px) /* size.640 */ {
  .top-hero__title {
    font: var(--typography-display-lg);
    letter-spacing: var(--typography-display-lg-letter-spacing);
  }
}

.top-hero__lead {
  max-width: var(--size-736);
  font: var(--typography-body-lead);
  letter-spacing: var(--typography-body-lead-letter-spacing);
}

.top-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12) var(--space-24);
  padding-top: var(--space-8);
}

.top-hero__note {
  color: var(--color-text-subtle);
  font: var(--typography-body-sm);
  letter-spacing: var(--typography-body-sm-letter-spacing);
}

.top-shot img {
  border: var(--border-width-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.top-section {
  display: grid;
  gap: var(--space-16);
  padding-top: var(--space-96);
}

.top-section__title {
  margin-bottom: var(--space-24);
  font: var(--typography-display-md);
  letter-spacing: var(--typography-display-md-letter-spacing);
}

.top-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-240), 1fr));
  gap: var(--space-16);
  padding: 0;
  list-style: none;
}

.panel > .icon-tile {
  margin-bottom: var(--space-4);
}

.top-plan h3 {
  font: var(--typography-heading-sm);
  letter-spacing: var(--typography-heading-sm-letter-spacing);
}

.top-features h3 {
  font: var(--typography-heading-xs);
  letter-spacing: var(--typography-heading-xs-letter-spacing);
}

.top-features p {
  color: var(--color-text-subtle);
  font: var(--typography-body-sm);
  letter-spacing: var(--typography-body-sm-letter-spacing);
}

.top-plans {
  display: grid;
  gap: var(--space-16);
}

@media (min-width: 640px) /* size.640 */ {
  .top-plans {
    grid-template-columns: repeat(2, 1fr);
  }

  .top-plans {
    align-items: stretch;
  }
}

.top-plan__price {
  color: inherit;
  font: var(--typography-body-sm);
  letter-spacing: var(--typography-body-sm-letter-spacing);
}

.top-plan ul {
  display: grid;
  gap: var(--space-8);
}

.top-section__note {
  max-width: var(--size-736);
  color: var(--color-text-subtle);
  font: var(--typography-caption-default);
  letter-spacing: var(--typography-caption-default-letter-spacing);
}

/* Component: card (docs/design-system/site/components/card) */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  height: 100%;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-background-surface-raised);
  box-shadow: var(--elevation-raised);
  color: var(--color-text-default);
  text-decoration: none;
}

.card:hover {
  box-shadow: var(--elevation-hovered);
}

.card > .icon-tile {
  margin-bottom: var(--space-8);
}

.card__title {
  font: var(--typography-heading-xs);
  letter-spacing: var(--typography-heading-xs-letter-spacing);
}

.card__description {
  color: var(--color-text-subtle);
  font: var(--typography-caption-default);
  letter-spacing: var(--typography-caption-default-letter-spacing);
}

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition-property: transform, box-shadow;
    transition-duration: var(--duration-hover);
    transition-timing-function: var(--easing-hover);
  }

  .card:hover {
    transform: translateY(calc(var(--space-2) * -1));
  }
}

/* Component: feature-icon (docs/design-system/site/components/feature-icon) */
.icon-tile {
  display: grid;
  place-items: center;
  width: var(--size-40);
  height: var(--size-40);
  border-radius: var(--radius-md);
  background: var(--color-background-accent-subtle);
  color: var(--color-icon-accent);
}

.icon {
  width: var(--size-24);
  height: var(--size-24);
}

/* Component: feature-art (docs/design-system/site/components/feature-art) */
.feature-art {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--space-8);
  border: var(--border-width-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-background-surface-default);
}

.feature-art .il-paper {
  fill: var(--color-background-surface-raised);
  stroke: var(--color-border-subtle);
}

.feature-art .il-text,
.feature-art .il-veil {
  fill: var(--color-border-subtle);
}

.feature-art .il-strong {
  fill: var(--color-icon-subtle);
}

.feature-art .il-stroke,
.feature-art .il-dash,
.feature-art .il-accent-stroke {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-art .il-stroke,
.feature-art .il-dash {
  stroke: var(--color-icon-subtle);
}

.feature-art .il-dash {
  stroke-dasharray: 3 3;
}

.feature-art .il-accent-stroke {
  stroke: var(--color-icon-accent);
}

.feature-art .il-accent,
.feature-art .il-accent-line {
  fill: var(--color-icon-accent);
}

.feature-art .il-accent-soft {
  fill: var(--color-background-accent-subtle);
}

.feature-art .il-badge {
  fill: var(--color-background-surface-raised);
  stroke: var(--color-icon-accent);
}

/* Component: panel (docs/design-system/site/components/panel) */
.panel {
  display: grid;
  align-content: start;
  gap: var(--space-12);
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-background-surface-raised);
  box-shadow: var(--elevation-raised);
}

.panel--inverse {
  background: var(--color-background-primary-default);
  color: var(--color-text-on-primary);
}

/* Component: callout (docs/design-system/site/components/callout) */
.callout {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-20) var(--space-24);
  border-radius: var(--radius-md);
  background: var(--color-background-surface-sunken);
}

.callout__label {
  font: var(--typography-label-strong);
  letter-spacing: var(--typography-label-strong-letter-spacing);
}

/* Component: chapter-nav (docs/design-system/site/components/chapter-nav) */
.chapter-nav__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border: var(--border-width-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-default);
  font: var(--typography-label-strong);
  letter-spacing: var(--typography-label-strong-letter-spacing);
  list-style: none;
  cursor: pointer;
}

.chapter-nav__toggle::-webkit-details-marker {
  display: none;
}

/* 右端のシェブロン（>）。開くと下向き（v）になる */
.chapter-nav__toggle::after {
  content: "";
  width: var(--space-8);
  height: var(--space-8);
  margin: 0 var(--space-4) 0 auto;
  border-right: var(--border-width-focus) solid currentColor;
  border-bottom: var(--border-width-focus) solid currentColor;
  transform: rotate(-45deg);
}

details[open] > .chapter-nav__toggle::after {
  transform: rotate(45deg);
}

.chapter-nav__current {
  color: var(--color-text-subtle);
  font: var(--typography-label-md);
  letter-spacing: var(--typography-label-md-letter-spacing);
}

.chapter-nav__list {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.chapter-nav__item {
  display: block;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-md);
  color: var(--color-text-subtle);
  font: var(--typography-label-md);
  letter-spacing: var(--typography-label-md-letter-spacing);
  text-decoration: none;
}

.chapter-nav__item:hover {
  background: var(--color-background-ghost-hovered);
}

.chapter-nav__item[aria-current="page"] {
  background: var(--color-background-ghost-selected);
  color: var(--color-text-default);
}

@media (prefers-reduced-motion: no-preference) {
  .chapter-nav__item {
    transition-property: background-color, color;
    transition-duration: var(--duration-hover);
    transition-timing-function: var(--easing-hover);
  }
}

/* Pattern: article (docs/design-system/site/patterns/article) */
.article-page {
  max-width: var(--size-1200);
  margin: 0 auto;
  padding: var(--space-64) var(--space-24) var(--space-96);
}

.article {
  max-width: var(--size-880);
}

.article .eyebrow {
  margin-bottom: var(--space-16);
}

.article__title {
  font: var(--typography-display-md);
  letter-spacing: var(--typography-display-md-letter-spacing);
}

@media (min-width: 640px) /* size.640 */ {
  .article__title {
    font: var(--typography-heading-lg);
    letter-spacing: var(--typography-heading-lg-letter-spacing);
  }
}

.article__lead {
  margin-top: var(--space-16);
  font: var(--typography-body-lead);
  letter-spacing: var(--typography-body-lead-letter-spacing);
}

.article__body {
  margin-top: var(--space-48);
}

.article__body > * + * {
  margin-top: var(--space-16);
}

.article__body h2 {
  margin-top: var(--space-64);
  padding-top: var(--space-24);
  border-top: var(--border-width-divider) solid var(--color-border-subtle);
  font: var(--typography-heading-md);
  letter-spacing: var(--typography-heading-md-letter-spacing);
}

.article__body h3 {
  margin-top: var(--space-40);
  font: var(--typography-heading-sm);
  letter-spacing: var(--typography-heading-sm-letter-spacing);
}

.article__body > :first-child {
  margin-top: 0;
}

.article__body > h2:first-child {
  padding-top: 0;
  border-top: 0;
}

.article__body h2 + *,
.article__body h3 + * {
  margin-top: var(--space-8);
}

.article__body h2 + * {
  margin-top: var(--space-16);
}

.article__body ul,
.article__body ol {
  display: grid;
  gap: var(--space-4);
  padding-left: var(--space-24);
}

/* 箇条書きの印は、文字と同じ色の短い線（docs/design-system/site/patterns/article） */
.article__body ul,
.top-plan ul {
  padding-left: 0;
  list-style: none;
}

.article__body ul > li,
.top-plan ul > li {
  position: relative;
  padding-left: var(--space-20);
}

.article__body ul > li::before,
.top-plan ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em; /* 本文の行の高さ1.8の中央 */
  width: var(--space-8);
  border-top: var(--border-width-divider) solid currentColor;
}

.article__body ol {
  padding-left: var(--space-24);
}

.article__body ol > li::marker {
  color: var(--color-text-accent);
  font: var(--typography-overline-default);
}

.article__body code,
.article__body kbd {
  font: var(--typography-code-md);
  letter-spacing: var(--typography-code-md-letter-spacing);
}

.article__body kbd {
  padding: 0 var(--space-4);
  border: var(--border-width-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.article__updated {
  margin-top: var(--space-64);
  color: var(--color-text-subtle);
  font: var(--typography-caption-default);
  letter-spacing: var(--typography-caption-default-letter-spacing);
}

/* Pattern: guide (docs/design-system/site/patterns/guide) */
.guide {
  display: grid;
  gap: var(--space-32);
}

.guide__nav--wide {
  display: none;
}

.guide__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-240), 1fr));
  gap: var(--space-16);
  margin-top: var(--space-48);
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) /* size.640 */ {
  .guide {
    grid-template-columns: var(--size-240) minmax(0, 1fr);
    gap: var(--space-64);
    align-items: start;
  }

  .guide__nav--wide {
    display: block;
  }

  .guide__nav--narrow {
    display: none;
  }

  .guide__nav--wide .chapter-nav__list {
    margin-top: 0;
  }
}