/* =========================================================
   ULiA LP — Base（reset / typography / 共通パーツ）
   ※ tokens.css の後に読み込むこと
   ※ Webフォントは index.php の <link rel=preconnect> + <link> で読む（@importは使わない）
   ========================================================= */

@layer reset, base, components, utilities;

/* ---------------------------------------------------------
   reset
   --------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--h-header) + 16px);
  }

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

  button {
    font: inherit; color: inherit; background: transparent;
    border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  input, textarea, select { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  table { border-collapse: collapse; width: 100%; }
  summary { cursor: pointer; list-style: none; }
  summary::-webkit-details-marker { display: none; }
}

/* ---------------------------------------------------------
   base
   --------------------------------------------------------- */
@layer base {
  body {
    min-height: 100vh;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--lh-body);
    letter-spacing: var(--tr-body);
    font-feature-settings: "palt", "kern";
    overflow-x: hidden;
  }

  ::selection { background: var(--c-amber); color: var(--c-text-invert); }

  :focus-visible {
    outline: 2px solid var(--c-amber);
    outline-offset: 2px;
    border-radius: 2px;
  }

  strong, b { font-weight: 700; }
  code, kbd { font-family: var(--f-mono); font-size: .92em; }

  /* 日本語の折り返し対策。未対応ブラウザでは無視されるだけなので安全側。
     - text-wrap: pretty  … 末尾1文字だけが次行に落ちる（孤立行）のを防ぐ
     - word-break: auto-phrase … 「添付」が「添/付」のように語中で切れるのを防ぎ、文節で折り返す */
  p, li, figcaption, dd, dt, .lead, .qa__a, .plan__lead,
  .h2, .h3, .hero__jp, .finale__title {
    text-wrap: pretty;
    word-break: auto-phrase;
  }
}

/* ---------------------------------------------------------
   components — 全セクションで共有する部品
   --------------------------------------------------------- */
@layer components {

  /* ---------- container ---------- */
  .container {
    width: 100%;
    max-width: var(--w-container);
    margin-inline: auto;
    padding-inline: var(--sp-3);
  }
  .container--read { max-width: var(--w-read); }

  /* ---------- section ---------- */
  .section { position: relative; padding-block: var(--sp-12); }
  .section--tight { padding-block: var(--sp-10); }

  /* ---------- 見出しの型（設計書 §6.4） ---------- */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--f-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--c-amber);
    line-height: 1;
  }
  .eyebrow::before {
    content: "";
    width: 24px; height: 1px;
    background: currentColor;
    opacity: .8;
  }

  .h2 {
    margin-top: var(--sp-3);
    font-family: var(--f-jp-head);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: var(--lh-head);
    letter-spacing: .01em;
  }
  .h2 em {
    font-family: var(--f-display);
    font-style: normal;
    font-weight: 900;
    font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 96;
    letter-spacing: -.01em;
  }
  .h3 {
    font-family: var(--f-jp-head);
    font-weight: 500;
    font-size: var(--fs-h3);
    line-height: 1.5;
  }

  .lead {
    max-width: var(--w-lead);
    margin-top: var(--sp-2);
    font-size: var(--fs-lead);
    color: var(--c-text-dim);
  }

  /* ---------- button（設計書 §6.1） ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding: 16px 32px;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: .04em;
    line-height: 1;
    white-space: nowrap;
    transition:
      background-color var(--dur-base) var(--ease-out),
      border-color     var(--dur-base) var(--ease-out),
      color            var(--dur-base) var(--ease-out),
      box-shadow       var(--dur-base) var(--ease-out),
      transform        var(--dur-fast) var(--ease-out);
  }
  .btn svg { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-out); }

  .btn--primary {
    background: var(--c-amber);
    color: var(--c-text-invert);
  }
  .btn--primary:hover { background: var(--c-amber-hi); box-shadow: var(--sh-glow); }
  .btn--primary:hover svg { transform: translateX(3px); }
  .btn--primary:active { background: var(--c-amber-lo); transform: translateY(1px); }

  .btn--ghost {
    border: 1px solid var(--c-line-strong);
    color: var(--c-text);
  }
  .btn--ghost:hover { border-color: var(--c-amber); color: var(--c-amber); }
  .btn--ghost:active { transform: translateY(1px); }

  .btn--xl { padding: 20px 40px; font-size: 18px; }
  .btn--xl svg { width: 20px; height: 20px; }

  .btn--sm { padding: 12px 22px; font-size: 13px; }

  .btn[disabled], .btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* 反転面（paper）でのボタン */
  .paper .btn--ghost { border-color: var(--c-paper-line); color: var(--c-paper-text); }
  .paper .btn--ghost:hover { border-color: var(--c-amber-lo); color: var(--c-amber-lo); }

  /* ---------- card ---------- */
  .card {
    position: relative;
    background: var(--c-surface-1);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    box-shadow: var(--sh-card);
    transition:
      border-color var(--dur-base) var(--ease-out),
      transform    var(--dur-base) var(--ease-out),
      box-shadow   var(--dur-base) var(--ease-out);
  }
  .card::before {
    content: "";
    position: absolute;
    inset: -1px auto auto -1px;
    width: calc(100% + 2px);
    height: 1px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: linear-gradient(90deg, transparent, var(--c-amber), transparent);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .card:hover { border-color: var(--c-line-strong); transform: translateY(-2px); box-shadow: var(--sh-lift); }
  .card:hover::before { opacity: .8; }

  /* ---------- badge / label ---------- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    line-height: 1.6;
  }
  .badge--amber { background: var(--c-amber); color: var(--c-text-invert); }
  .badge--ai {
    border: 1px solid var(--c-asagi);
    color: var(--c-asagi);
    background: var(--c-asagi-soft);
  }
  .badge--ai::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  .mono {
    font-family: var(--f-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--c-mute);
  }

  /* ---------- 反転面（生成りの紙） ---------- */
  .paper {
    background: var(--c-paper);
    color: var(--c-paper-text);
  }
  .paper .lead { color: var(--c-paper-dim); }
  .paper .eyebrow { color: var(--c-amber-lo); }
  .paper .mono { color: var(--c-paper-dim); }

  /* ---------- テクスチャ（五線・ノイズ・光） ---------- */
  .stave {
    position: absolute;
    inset: 0;
    background-image: var(--tx-stave);
    opacity: .55;
    pointer-events: none;
  }
  .light {
    position: absolute;
    inset: 0;
    background-image: var(--tx-light);
    pointer-events: none;
  }
  .noise {
    position: absolute;
    inset: 0;
    opacity: .035;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* ---------------------------------------------------------
   utilities
   --------------------------------------------------------- */
@layer utilities {
  .u-center { text-align: center; }
  .u-nowrap { white-space: nowrap; }
  .u-amber  { color: var(--c-amber); }
  .u-dim    { color: var(--c-text-dim); }
  .u-sm     { font-size: var(--fs-sm); }

  /* 読み上げ専用。他所のセレクタに width/height を上書きされても消えるよう
     clip-path を併用する（clip だけだと上書き時に見えてしまうことがある） */
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }

  /* Reveal on scroll（1回だけ発火・往復させない） */
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity   var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   モーション制限（必須）
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}