/* design-loop.css ── 見た目の検証ループ（design-workflow/）で載せる上書き層。
   既存の <style> の後に読み込む。凍結された ID/クラス・JS の契約・[data-sky] の位置には触れない。

   ■ 2026-10-05 round 9: 土台を「見本 B（改善前の見た目）」に戻した
     代表は校正で、案 1（単色の面）の見本 A でも、スクリムの見本 C でもなく、改善前の見本 B を選んだ
     （design-workflow/notes/phase4-calibration.md）。そこで round 1〜8 を次の決まりで選び直した。
       残す: ①代表の指示による文言・ラベルの修正（round 7・8） ②読みやすさ（AA・最小 11px・行長）
             ③スマホの最初の画面に主ボタンを収める余白（文字の大きさは変えない）
       外す: 見出しの太さ 700 と大きさの引き上げ（round 2〜4）、昼の空の白い幕（round 3）、
             単色の面・暗い面の整理・セクション余白 128px・事業紹介の番号の非表示（round 5〜6）
     外した版は git の dffc9df に残っている。 */

/* ───────────────────────────────────────────────────────────────
   読みやすさ（round 1・3 から）: コントラスト比 AA・最小文字 11px・行長
   色は既存 5 色の「明度のみ」を下げた派生（assets/tokens.css）。
   ─────────────────────────────────────────────────────────────── */

/* 暗い空の上の「かすかな文字」。alpha .45 は #0A0E1A の上で 3.95:1 → .56 で 5.5:1 */
.origins-section { --space-text-faint: rgba(237, 235, 227, 0.56); }
html.sky-on .hero .hero-caption { color: rgba(237, 235, 227, 0.56); }
.globe-credit { font-size: 11px; }                              /* 10px → 11px */

/* 明るい面・昼の空の上の小さい琥珀・生豆・薄文字（派生色の値は tokens.css と同じ） */
:root {
  --kohaku-text: #574021;
  --kimame-text: #41443B;
  --text-light-strong: #46433D;
  --ink-soft: #4E4943;
}
.kicker { color: var(--kimame-text); }
.phil-num { color: var(--kohaku-text); font-size: 12px; }
.space-fig-word { color: var(--kohaku-text); }
.space-fig-cap { font-size: 11px; }
.products-note { color: var(--text-light-strong); }
.products-note b { color: var(--kohaku-text); }
.product-note { color: var(--kimame-text); }
.size-label { font-size: 11px; color: var(--text-light-strong); }
.product-roast { font-size: 12px; }
.roast-light { color: var(--kohaku-text); }
.roast-blend { color: var(--kimame-text); }
.product-label-badge { font-size: 10px; }                        /* 写真の上の 3 文字の札だけ 10px（例外として記録済み） */
.badge-new { background: var(--kimame-text); }
.badge-hot { background: var(--kohaku-text); }
.roast-en, .roast-col .roast-en { color: var(--kimame-text); }
.drip-price span { color: var(--text-light-strong); }
.btn-sold-out { color: var(--text-light-strong); }
.sold-out-badge { font-size: 10px; }

/* 行長（1 行 40 字以内） */
.service-body { max-width: 38em; }
.rental-desc { max-width: 38em; }
.section-lead { max-width: 36em; }

/* ───────────────────────────────────────────────────────────────
   スマホの最初の画面（round 2・3 から、余白だけ）: 主ボタン「豆をえらぶ」を 390×844 に収める
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .origins-globe-col { padding-top: 8px; padding-bottom: 8px; }
  .globe-legend { margin-top: 8px; }
  .globe-credit { margin-top: 8px; letter-spacing: -0.02em; white-space: nowrap; }
  .origins-hero-copy { padding: 24px 0 24px; }
  .origins-eyebrow { margin-bottom: 16px; }
  .origins-hero-lead { line-height: 1.85; margin-bottom: 24px; }
}

/* ───────────────────────────────────────────────────────────────
   小見出し・副題（round 5・6・8 から）: 等幅・大文字・字間の広いラベルをやめ、本文書体の文に
   （代表の指示「続けて直して」でメニューの大文字をやめたのと同じ扱い）
   ─────────────────────────────────────────────────────────────── */
.kicker { font-family: var(--f-sans); font-size: 13px; letter-spacing: 0; text-transform: none; margin-bottom: 16px; }
.service-section .kicker { color: var(--c-on-dark-2); }
.origins-eyebrow, .hero-eyebrow { font-family: var(--f-sans); font-size: 13px; letter-spacing: 0.02em; text-transform: none; }
.origins-eyebrow { color: var(--c-on-dark-2); }
.service-subtitle { font-family: var(--f-sans); font-size: 13px; letter-spacing: 0.02em; text-transform: lowercase; color: var(--c-on-dark-2); }
.service-subtitle::first-letter { text-transform: uppercase; }

/* ═══ round 7（代表の指示「直して」）: 文末の「→」を外した文言に合わせ、リンクは下線で示す。
   等幅（IBM Plex Mono）は数値だけに戻し、和文を含むラベルは本文書体へ ═══ */
.product-detail-link {
  font-family: var(--f-sans); font-size: 13px; letter-spacing: 0.02em;
  color: var(--kimame-text); border-bottom-color: var(--c-kohaku);
  width: fit-content;                                     /* 下線を文字の幅に（908px に伸びていた） */
}
.product-detail-link:hover { color: var(--c-baisen); border-color: var(--c-baisen); }
.text-link:hover { color: var(--c-baisen); }
html.sky-on .hero .text-link:hover { color: var(--c-hakuji); }
.cal-ev-link { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--c-kohaku); }

.lg-tropic, .lg-route, .globe-map-cta, .origins-scroll-cue,
.hero-eyebrow, .hero-caption,
.data-strip b, .data-strip span,
.phil-num, .products-note, .size-label, .product-label-badge,
.rental-badge, #openingAreaEl strong, .cal-dow {
  font-family: var(--f-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.hero-caption { text-transform: none; }
.origin-spec dt { font-family: var(--f-sans); font-size: 12px; letter-spacing: 0.02em; }
.cal-dow { font-size: 11px; }
.opening-svc-n { color: var(--c-kohaku-text); font-size: 12px; }

/* ═══ round 8（代表の指示「続けて直して」）: メニュー区分・カートボタン ═══ */
.mobile-menu-section {
  font-family: var(--f-sans); font-size: 12px; letter-spacing: 0.02em; text-transform: none;
  color: var(--c-text-2);
}
/* カートボタン: 丸＋影 → 角 0・影なし。夜空の上でも輪郭が見えるよう白磁の 1px 枠 */
.cart-fab { border-radius: var(--radius); box-shadow: none; border: 1px solid var(--c-hakuji); }
.cart-fab:hover { background: var(--c-baisen); }
.cart-fab-badge { border-radius: 0; background: var(--c-kohaku-text); color: var(--c-hakuji); }
@media (max-width: 640px) {
  footer { padding-bottom: calc(24px + 56px + var(--space-4)); }   /* カートボタンと著作権表示の重なりを解消 */
}

/* ═══ round 10（2026-10-05）: 見本 B のまま AA を満たす ═══
   1. assets/sky.js: 空を画面の縦の位置ごとの時刻で塗る（以前は中央の時刻 1 つ）。昼の区間の端が夜への移り変わりの暗い空に
      重ならなくなる。朝・真昼の上端を約 1 割明るく。→ 390 の AA 不足 30 → 11
   2. 残りの文字色（下） */
:root { --ink-soft: #46433D; }                      /* 補助文字 #4E4943 → #46433D: 昼の空の上端で 4.1 → 5.0 前後（白磁の上 9.2） */
.rental-idx { color: var(--kohaku-text); }           /* 「01」11px rgb(122,84,39) 4.45 → 琥珀の暗い派生 */
.service-num { color: var(--c-kohaku-light); }       /* 夜空の上の「01」「02」11px 琥珀 3.5〜4.4 → 鋳鉄の上の琥珀 #C9975B */
.footer-copy { color: var(--c-on-dark-2); }          /* 夜空の上の著作権表示 白磁 40% 3.6 → #BCBAB6 */
.cal-show-past { color: var(--kohaku-text); }        /* 「過去の出店をカレンダーで見る」12.5px rgb(122,84,39) 4.25 → 琥珀の暗い派生 */

/* 行長（1440 で 40 字超が 4 か所: 座標の注記 48 字・送料の注記 58 字・イベント無しの案内 44 字・FAQ の答え 41 字） */
.origins-note { max-width: 38em; }
.products-note { max-width: 38em; }
.upcoming-empty { max-width: 36em; }
.faq-a { max-width: 38em; }
/* 昼の区間の小見出し: 夜の帯の直後（#rental の「Equipment Rental」）で、雲・太陽の光の揺れにより #41443B が 4.26〜4.6 を上下した → 鋳鉄に（約 7:1） */
.kicker { color: var(--c-text); }
.service-section .kicker { color: var(--c-on-dark-2); }
/* フッターのリンク: 白磁 65% が、夜の帯の直後（フッターの上端）の夕方の空で 3.6〜4.1 → 白磁に。hover は琥珀の明るい派生 */
.footer-links a, .footer-nap, .footer-nap a { color: var(--c-hakuji); }
.footer-links a:hover, .footer-nap a:hover { color: var(--c-kohaku-light); }

/* ═══ round 11（2026-10-05）: 評価役（round 10 = 6.1・「磨く」）の指摘 2〜4 位。1 位（事業紹介・フッターの幕の縁）は見本 B からある幕なので代表判断へ ═══ */

/* 1. 和文の折り返し: body 全体の word-break:keep-all は、区切りの目印（wbr）が無い和文を「1 語」とみなし、
      overflow-wrap:anywhere で無理に折る → 行幅がガタガタ（FAQ の回答 229〜459px）、語の途中でも折れる。
      文節単位で折る auto-phrase（Chrome 119+、lang="ja" のとき）に。未対応のブラウザは normal（通常の和文組版）に戻る */
body { word-break: normal; word-break: auto-phrase; }
/* 見出し（h1〜h4）は元の keep-all＋balance のまま（読点で折れる）。auto-phrase にすると信条が「コーヒーを／通じて、」と読点の手前で折れた（round 13 の撮影で発見） */
h1, h2, h3, h4 { word-break: keep-all; }

/* 2. 昼の空の上の罫線: #D9D5CA は空との比 1.01〜1.14 で消える。昼の区間だけ、鋳鉄 24% の線（下地に応じて濃さが変わる）に */
html.sky-on .products-section, html.sky-on .drip-section, html.sky-on .roast-guide,
html.sky-on .opening-section, html.sky-on .community, html.sky-on .events-section,
html.sky-on .faq-section, html.sky-on .final-cta { --rule: rgba(33, 30, 26, 0.24); }

/* 3. 夜空の上の主ボタン「豆をえらぶ」の hover: 琥珀の地に白 13px で 3.76:1 → 焙煎の地に白磁（10:1） */
html.sky-on .hero .btn-primary:hover { background: var(--c-baisen); color: var(--c-hakuji); border-color: var(--c-baisen); }
/* 4. 器具レンタルの札「料金 要相談」「予約受付中」11px rgb(91,96,82): 夜の帯の直後で 4.5 ちょうどを上下 → 生豆の暗い派生 #41443B（枠も同色） */
.rental-badge { color: var(--kimame-text); border-color: var(--kimame-text); }

/* ═══ round 12（2026-10-05）: 評価役（round 11 = 6.6・「磨く」）の指摘 ═══ */

/* 1. 見出しのワイプ（2026-09 の動きの層）: 範囲が「画面に入ってから 10〜30%」で、画面の下 2〜3 割にある間は見出しが欠けて見えた。
      動き（上の行から現れる）は残し、現れ終わる位置を「見出し全体が画面に入りきった時点」に早める */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section:not(#origins) .kicker { animation-range: entry 0% entry 100%; }
    main > section:not(#origins) .section-title, .hero .hero-philosophy, .final-cta-copy { animation-range: entry 0% entry 100%; }
  }
}

/* 2. 同じ主ボタン「豆をえらぶ」の太さを揃える（最初の画面 700・信条の区間 500 → 500）。hover の琥珀＋白 3.76:1 → 焙煎＋白磁 10:1 */
.btn-hero-invert { font-weight: 500; }
.btn-hero-invert:hover { background: var(--c-baisen); color: var(--c-hakuji); }

/* 3. 固有名詞を途中で折らない（「COFFEE OF THE / YEAR 2024」）。index.html の注記に <span class="nobr"> を足した */
.nobr { white-space: nowrap; }

/* ═══ round 13（2026-10-05）: 評価役（round 12 = 6.7・「磨く」）の指摘 ═══ */

/* 1. 焙煎度のものさし（2026-09 の動きの層）: 読んでいない列を透明度 0.4 で薄くしていた → 11px の英字が 1.85:1。
      透明度は 0.85 でも 4.41 で基準に届かない。読んでいる列の印を「左の琥珀 2px の線」に替え、文字は常に元の濃さ。
      キーフレームの名前と時間配分は元のまま（この層は motion 層より後に読むので同名の @keyframes が優先される）。線は影ではなく罫線の扱い */
.roast-col { padding-left: var(--space-2); }
@keyframes mx-focus-1 { 0%, 30% { box-shadow: inset 2px 0 0 var(--c-kohaku); } 40%, 100% { box-shadow: inset 2px 0 0 transparent; } }
@keyframes mx-focus-2 { 0%, 26% { box-shadow: inset 2px 0 0 transparent; } 36%, 63% { box-shadow: inset 2px 0 0 var(--c-kohaku); } 73%, 100% { box-shadow: inset 2px 0 0 transparent; } }
@keyframes mx-focus-3 { 0%, 60% { box-shadow: inset 2px 0 0 transparent; } 70%, 100% { box-shadow: inset 2px 0 0 var(--c-kohaku); } }

/* 2. 等幅は数値だけ（DESIGN.md §2）: 産地の行・著作権表示・衛星画像の出典・Instagram のアカウント名・「座標未登録」を本文書体に */
.product-origin, .footer-copy, .globe-credit, .mobile-menu-instagram, .instagram-link {
  font-family: var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.origin-coord.origin-coord-none { font-family: var(--f-sans); letter-spacing: 0.02em; }