/* ============================================================
   UNRYUTO Design System v2  (NOYUTO品質基準 v1.0 適合レイヤー)
   - brand 正本 (unryuto/brand/index.html) トークン準拠: navy + gold + ivory + paper
   - 5本柱: ④画像・動画最適配置 / ⑤脱・文字だけ / CWV(16px+ / 行間1.7+ / CLS0)
   - 既存 css/style.css の後に読み込む追加正系。インライン独自テーマを置換する。
   - 2026-05-17 サム (/goal UNRYUTO全ページ品質基準適合)
   ============================================================ */

:root {
  /* --- brand 正本トークン (unryuto/brand/index.html と一致) --- */
  --u-navy:        #07091a;
  --u-navy-2:      #0c0f24;
  --u-navy-deep:   #04060f;
  --u-gold:        #c9a961;
  --u-gold-bright: #e0c68a;
  --u-gold-dark:   #8d7339;
  --u-ivory:       #f8f5ec;
  --u-paper:       #fbf9f3;
  --u-ink:         #1b1d29;
  --u-ink-soft:    #4c4f5e;
  --u-ink-muted:   #797c8a;
  --u-line:        rgba(141,115,57,.22);
  --u-line-soft:   rgba(27,29,41,.10);

  /* --- 流体タイポ (320→1280 / 本文16px下限厳守) --- */
  --u-fs-xs:   clamp(0.80rem, 0.76rem + 0.18vw, 0.90rem);
  --u-fs-sm:   clamp(0.90rem, 0.86rem + 0.20vw, 1.00rem);
  --u-fs-base: clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);
  --u-fs-lg:   clamp(1.15rem, 1.06rem + 0.45vw, 1.40rem);
  --u-fs-xl:   clamp(1.40rem, 1.20rem + 1.00vw, 2.05rem);
  --u-fs-2xl:  clamp(1.85rem, 1.45rem + 2.00vw, 3.10rem);
  --u-fs-3xl:  clamp(2.30rem, 1.70rem + 3.00vw, 4.00rem);

  --u-serif:    'Cormorant Garamond', 'Noto Serif JP', 'Yu Mincho', serif;
  --u-serif-jp: 'Noto Serif JP', 'Yu Mincho', serif;
  --u-sans:     'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;

  --u-maxw:     1180px;
  --u-prose:    44rem;          /* 本文の最適行長 (可読性) */
  --u-radius:   6px;
  --u-radius-lg:14px;
  --u-shadow-sm:0 1px 2px rgba(7,9,26,.05);
  --u-shadow:   0 10px 30px rgba(7,9,26,.07);
  --u-shadow-lg:0 28px 64px rgba(7,9,26,.14);
  --u-ease:     cubic-bezier(.22,.61,.36,1);
}

/* --- リセット最小限 (既存style.cssと衝突しない範囲) --- */
.u-scope *, .u-scope *::before, .u-scope *::after { box-sizing: border-box; }

/* --- グローバル可読性 (CWV: 16px+ / 行間1.7+ / palt) --- */
body.u-v2 {
  font-family: var(--u-sans);
  font-size: var(--u-fs-base);
  line-height: 1.85;
  color: var(--u-ink);
  background: var(--u-paper);
  letter-spacing: .01em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}
body.u-v2 img,
body.u-v2 svg.u-fig { max-width: 100%; height: auto; display: block; }
body.u-v2 a { color: var(--u-gold-dark); text-decoration: none; transition: color .2s var(--u-ease); }
body.u-v2 a:hover { color: var(--u-gold); }
body.u-v2 :focus-visible { outline: 2px solid var(--u-gold); outline-offset: 3px; border-radius: 3px; }

.u-wrap { max-width: var(--u-maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 32px); }
.u-section { padding-block: clamp(56px, 9vw, 116px); }
.u-section.alt  { background: var(--u-ivory); }
.u-section.dark { background: linear-gradient(180deg,var(--u-navy-deep),var(--u-navy)); color: var(--u-ivory); }

/* --- 見出し体系 (H1=1ページ1個・検索意図) --- */
.u-eyebrow {
  display: inline-block; font-family: var(--u-serif); font-style: italic;
  font-size: var(--u-fs-sm); letter-spacing: .14em; color: var(--u-gold-dark);
  margin-bottom: 10px;
}
.u-section.dark .u-eyebrow { color: var(--u-gold-bright); }
h1.u-h1, .u-h1 {
  font-family: var(--u-serif-jp); font-weight: 900;
  font-size: var(--u-fs-3xl); line-height: 1.32; letter-spacing: .01em;
  color: var(--u-navy); margin: 0 0 .5em;
}
.u-section.dark .u-h1 { color: var(--u-ivory); }
.u-h2 {
  font-family: var(--u-serif-jp); font-weight: 800;
  font-size: var(--u-fs-2xl); line-height: 1.4; color: var(--u-navy);
  margin: 0 0 .6em;
}
.u-h3 {
  font-weight: 800; font-size: var(--u-fs-lg); line-height: 1.5;
  color: var(--u-navy); margin: 0 0 .5em;
}
.u-gold-it { color: var(--u-gold-dark); font-family: var(--u-serif); font-style: italic; font-weight: 600; }
.u-section.dark .u-gold-it { color: var(--u-gold-bright); }
.u-rule { width: 60px; height: 2px; background: var(--u-gold); border: 0; margin: 22px 0 34px; }
.u-rule.center { margin-inline: auto; }
.u-lead {
  font-size: var(--u-fs-lg); line-height: 1.95; color: var(--u-ink-soft);
  max-width: var(--u-prose);
}

/* --- 本文プロース (記事/薄ページ可読性・段落200字以内運用) --- */
.u-prose { max-width: var(--u-prose); margin-inline: auto; }
.u-prose > * + * { margin-top: 1.15em; }
.u-prose p { font-size: var(--u-fs-base); line-height: 1.95; color: var(--u-ink); }
.u-prose h2 { margin-top: 2.2em; font-family: var(--u-serif-jp); font-weight: 800;
  font-size: var(--u-fs-xl); color: var(--u-navy); line-height: 1.5;
  padding-left: 16px; border-left: 4px solid var(--u-gold); }
.u-prose h3 { margin-top: 1.6em; font-weight: 800; font-size: var(--u-fs-lg); color: var(--u-navy); }
.u-prose ul, .u-prose ol { padding-left: 1.4em; }
.u-prose li { margin-top: .5em; line-height: 1.85; }
.u-prose strong { color: var(--u-navy); font-weight: 700; }
.u-prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--u-line); }

/* --- figure / ビジュアル枠 (④ 文字300字に1視覚要素) --- */
.u-figure {
  margin: 36px auto; max-width: var(--u-prose);
  background: #fff; border: 1px solid var(--u-line);
  border-radius: var(--u-radius-lg); padding: 26px 24px; box-shadow: var(--u-shadow-sm);
}
.u-figure.wide { max-width: 100%; }
.u-figure svg { width: 100%; height: auto; display: block; }
.u-figure figcaption {
  margin-top: 14px; font-size: var(--u-fs-xs); color: var(--u-ink-muted);
  text-align: center; letter-spacing: .04em;
}

/* --- スタットカード (引用可能な数字を視覚化) --- */
.u-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 18px; margin: 30px 0; }
.u-stat {
  background: #fff; border: 1px solid var(--u-line); border-radius: var(--u-radius-lg);
  padding: 26px 18px; text-align: center; transition: transform .3s var(--u-ease), box-shadow .3s var(--u-ease);
}
.u-stat:hover { transform: translateY(-3px); box-shadow: var(--u-shadow); }
.u-stat .n { display: block; font-family: var(--u-serif); font-weight: 600;
  font-size: clamp(1.9rem,1.4rem+2vw,2.8rem); color: var(--u-gold-dark); line-height: 1; }
.u-stat .l { display: block; margin-top: 10px; font-size: var(--u-fs-xs);
  color: var(--u-ink-soft); font-weight: 600; letter-spacing: .06em; line-height: 1.6; }

/* --- カードグリッド (problem / feature / pillar 共通) --- */
.u-grid { display: grid; gap: 24px; }
.u-grid.c2 { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
.u-grid.c3 { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.u-card {
  background: #fff; border: 1px solid var(--u-line); border-radius: var(--u-radius-lg);
  padding: 32px 28px; transition: transform .3s var(--u-ease), box-shadow .3s var(--u-ease);
}
.u-card:hover { transform: translateY(-3px); box-shadow: var(--u-shadow); }
.u-card.gold-top { border-top: 3px solid var(--u-gold); }
.u-card .ic { width: 40px; height: 40px; color: var(--u-gold-dark); margin-bottom: 16px; }
.u-card .ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; }
.u-card h3 { font-size: var(--u-fs-lg); color: var(--u-navy); font-weight: 800; margin: 0 0 10px; line-height: 1.55; }
.u-card p { font-size: var(--u-fs-sm); color: var(--u-ink-soft); line-height: 1.9; margin: 0; }

/* --- callout / 注記 --- */
.u-note {
  border-left: 4px solid var(--u-gold); background: var(--u-ivory);
  padding: 20px 24px; border-radius: 0 var(--u-radius) var(--u-radius) 0;
  margin: 26px 0; font-size: var(--u-fs-sm); line-height: 1.9; color: var(--u-ink);
}
.u-note.quote { font-family: var(--u-serif-jp); font-style: italic; color: var(--u-navy);
  font-size: var(--u-fs-base); }

/* --- 著者ボックス (Person Schema 視覚化・匿名ペルソナ=NOYUTO/エンブレム) --- */
.u-author {
  display: flex; gap: 20px; align-items: center; max-width: var(--u-prose);
  margin: 44px auto 0; padding: 24px; background: #fff;
  border: 1px solid var(--u-line); border-radius: var(--u-radius-lg);
}
.u-author .emblem {
  flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg,var(--u-navy),var(--u-navy-2));
  display: grid; place-items: center; border: 1px solid var(--u-gold);
}
.u-author .emblem svg { width: 38px; height: 38px; }
.u-author .meta b { display: block; font-size: var(--u-fs-base); color: var(--u-navy); }
.u-author .meta .role { font-family: var(--u-serif); font-style: italic;
  color: var(--u-gold-dark); font-size: var(--u-fs-sm); margin: 2px 0 6px; }
.u-author .meta p { margin: 0; font-size: var(--u-fs-xs); color: var(--u-ink-soft); line-height: 1.75; }

/* --- FAQ (details/summary・JSなし・FAQ Schema 視覚対) --- */
.u-faq { max-width: var(--u-prose); margin-inline: auto; }
.u-faq details {
  border: 1px solid var(--u-line); border-radius: var(--u-radius);
  background: #fff; margin-bottom: 12px; overflow: hidden;
}
.u-faq summary {
  cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 700;
  color: var(--u-navy); font-size: var(--u-fs-base); display: flex;
  justify-content: space-between; gap: 14px; align-items: center;
}
.u-faq summary::-webkit-details-marker { display: none; }
.u-faq summary::after { content: "＋"; color: var(--u-gold-dark); font-weight: 700; transition: transform .25s var(--u-ease); }
.u-faq details[open] summary::after { transform: rotate(45deg); }
.u-faq .a { padding: 0 22px 20px; font-size: var(--u-fs-sm); line-height: 1.9; color: var(--u-ink-soft); }

/* --- 比較テーブル --- */
.u-table-wrap { overflow-x: auto; margin: 28px 0; }
.u-table { width: 100%; border-collapse: collapse; font-size: var(--u-fs-sm); background: #fff; }
.u-table th, .u-table td { padding: 14px 16px; border: 1px solid var(--u-line); text-align: left; line-height: 1.7; }
.u-table thead th { background: var(--u-navy); color: var(--u-ivory); font-weight: 700; }
.u-table tbody tr:nth-child(even) { background: var(--u-ivory); }
.u-table .yes { color: #1f7a4d; font-weight: 700; }
.u-table .no  { color: #b23b3b; font-weight: 700; }

/* --- breadcrumb --- */
.u-bc { font-size: var(--u-fs-xs); color: var(--u-ink-muted); margin-bottom: 22px; }
.u-bc a { color: var(--u-ink-muted); } .u-bc a:hover { color: var(--u-gold-dark); }
.u-bc span { margin: 0 8px; opacity: .5; }

/* --- ボタン / CTA --- */
.u-btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 16px 40px; font-size: var(--u-fs-base); font-weight: 700;
  letter-spacing: .06em; border-radius: 0; border: 1px solid var(--u-gold);
  background: var(--u-gold); color: var(--u-navy);
  transition: all .3s var(--u-ease);
}
.u-btn:hover { background: transparent; color: var(--u-gold); transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(201,169,97,.25); }
.u-btn.ghost { background: transparent; color: var(--u-gold); }
.u-btn.ghost:hover { background: var(--u-gold); color: var(--u-navy); }
.u-cta {
  text-align: center; padding: clamp(56px,9vw,104px) 0;
  background: radial-gradient(ellipse at center, rgba(201,169,97,.10), transparent 60%),
              linear-gradient(135deg,var(--u-navy-deep),var(--u-navy));
  color: var(--u-ivory);
}
.u-cta .u-h2 { color: var(--u-ivory); }
.u-cta p { color: #c8ccd8; max-width: 620px; margin: 0 auto 34px; line-height: 1.95; }

/* --- 動き (prefers-reduced-motion 尊重・CLS0) --- */
.u-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--u-ease), transform .7s var(--u-ease); }
.u-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .u-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  body.u-v2 * { scroll-behavior: auto !important; }
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
  .u-author { flex-direction: column; text-align: center; }
  .u-stats { grid-template-columns: repeat(2,1fr); }
  .u-btn { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .u-stats { grid-template-columns: 1fr; }
}