/* ==========================================================
   base.css — フォント・リセット・文字・アイコン・共通の状態
   先に tokens/tokens.css を読み込むこと。土台は公開サイトの実装に合わせてある
   色は必ずセマンティックトークン（--ink / --panel / --primary-solid など）を使う。プリミティブ・HEX・rgb() の直書きは禁止
   ========================================================== */

/* ── フォント：見出し Shippori Mincho（--serif）／本文・UI Zen Kaku Gothic New（--sans）／数字・英字 Outfit（--num）
   書体は3種のみ。4種目を追加しない。Google Fonts から読む。読み込みは各ページの <head> に書く（@import だと表示が遅れるため）：
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Outfit:wght@400;500;600&display=swap">
   太さは使う分だけ（明朝・ゴシック 400/500/700、数字 400/500/600） */

/* ── リセットと土台（公開サイトと同じ） ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--p-3)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: var(--lh-body);
  letter-spacing: .01em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* 内容が短いページでもフッターを画面下端に置く（下に余白が残らないように） */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .c-footer { flex-shrink: 0; }

@supports (min-height: 100dvh) {
  body { min-height: 100dvh; }
}

/* 見出しは明朝。h3 だけゴシック（管理画面は admin.css で全部ゴシックにする） */
h1, h2, h3, h4 { font-family: var(--serif); line-height: var(--lh-heading); }
h3 { font-family: var(--sans); }
img, svg { max-width: 100%; }
a { color: var(--wine-deep); text-decoration: none; }
ul, ol { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:disabled { cursor: not-allowed; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }

/* ── フォーカス：3px の --wine・3px 離す ──
   内側（離した3pxの間）に白い線を重ねて二重の枠にする。薄いピンクの面の上でも枠が見分けられるように */
:focus-visible,
.is-focus {
  outline: 3px solid var(--wine);
  outline-offset: 3px;
  border-radius: 4px;
}
/* 内側の白い線。入力欄・選択肢などの部品は外側の枠に枠線とフォーカスを出すので、中の input には付けない */
:focus-visible:not(input, textarea, select, [contenteditable]),
.is-focus:not(.c-field, .c-textarea-box, .c-choice, .c-switch) {
  box-shadow: 0 0 0 3px var(--panel);
}

/* ── 見出し（生成） ── */
.c-h1 { font-size: var(--font-4xl); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
.c-h2 { font-size: var(--font-3xl); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
.c-h3 { font-size: var(--font-xl);  line-height: var(--lh-tight); font-weight: var(--fw-bold); }
.c-h4 { font-size: var(--font-lg);  line-height: var(--lh-tight); font-weight: var(--fw-bold); }
.c-body    { font-size: var(--font-def); line-height: var(--lh-def); }
.c-body-sm { font-size: var(--font-sm);  line-height: var(--lh-def); }
.c-caption { font-size: var(--font-xs);  line-height: var(--lh-def); color: var(--ink-soft); }

/* ── アイコン（インラインSVG に c-icon と派生クラス。色は親から継承。装飾用は aria-hidden="true"） ── */
.c-icon:where(:not(.c-icon--arrow, .c-icon--chev, .c-icon--ext)) {  /* 公開サイトの線のアイコン（arrow・chev・ext）は SVG の属性で描くので除く */
  display: inline-block;
  flex-shrink: 0;
  inline-size: var(--icon-md);
  block-size: var(--icon-md);
  fill: currentColor;
  vertical-align: middle;
}
.c-icon--sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.c-icon--md { inline-size: var(--icon-md); block-size: var(--icon-md); }
.c-icon--lg { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
.c-icon--xl { inline-size: var(--icon-xl); block-size: var(--icon-xl); }
.c-icon--spin { animation: c-spin 1s var(--ease-linear) infinite; }

/* ── 読み上げ専用（見た目では隠すが、スクリーンリーダーは読む） ── */
/* hidden 属性は必ず隠す。display を指定した部品（c-form・c-alert など）でも負けないようにする */
[hidden] { display: none !important; }

.u-visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ── モーション共通 ──
   決まり：テキストボックスやボタン類の大きさが変わる動き（scale など）は NG。変化は色・透明度・位置で表す */
@keyframes c-spin { to { transform: rotate(360deg); } }
@keyframes c-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes c-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes c-slide-up { from { opacity: 0; transform: translateY(var(--p-4)); } to { opacity: 1; transform: translateY(0); } }
@keyframes c-check-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes c-blocks { 0%, 70%, 100% { transform: scale(1); } 35% { transform: scale(0); } }
@keyframes c-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* 「動きを減らす」設定の人には、移動・フェードを止める。読み込み中の表示だけは速度を落として残す */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .c-icon--spin { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
  .c-spinner > i { animation-duration: 2.6s !important; animation-iteration-count: infinite !important; }
}