/* ============================================================
   百人一首 PoC — Stylesheet v5
   コンセプト：パッケージ（紅・金）と札（深緑・和紙白）の世界観
   子供にも親にも親しみやすく、ふりがな（ruby）対応
   ============================================================ */

:root {
  --crimson: #7a1b1b;
  --crimson-deep: #5a1010;
  --crimson-bright: #b32424;

  /* 会社ブランドカラー（Essential TOP と統一）— ヘッダ装飾・戻りリンク等で使用 */
  --brand: #d6483c;
  --brand-bright: #ee6555;
  --brand-deep: #b53929;
  --brand-pale: #fde8e3;

  --fuda-green: #006633;
  --fuda-green-deep: #00502a;
  --fuda-green-soft: #4a8c5e;
  --fuda-paper: #fffdf6;

  --gold: #b8860b;
  --gold-soft: #d4a849;
  --gold-pale: #e9d29a;

  --kimari: #b3402a;       /* 決まり字の朱色 */
  --kimari-soft: #c4684f;  /* 決まり字ふりがな用のやや薄い朱 */

  --paper: #faf3e3;
  --paper-warm: #fdf7e8;
  --paper-line: #e8dcc4;

  --ink: #2b2421;
  --ink-soft: #6b5e54;
  --ink-mute: #9a8d80;

  --shadow-card: 0 2px 10px rgba(60, 30, 10, 0.10);
  --shadow-lg: 0 12px 28px rgba(60, 30, 10, 0.18);
  --shadow-fuda: 0 6px 18px rgba(0, 60, 30, 0.18), 0 1px 0 rgba(255,255,255,0.6) inset;

  --font-fuda: "Shippori Mincho", "Noto Serif JP", "游明朝", "Yu Mincho", serif;
  --font-body: "Klee One", "Noto Serif JP", "游明朝", serif;
  --font-ui: "Noto Serif JP", "游明朝", "Yu Mincho", serif;

  --radius: 14px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  /* 固定したブランドバー(34px) + ヘッダ(56px) = 90px 分のオフセットを確保 */
  padding-top: 90px;
  padding-bottom: 48px;
  background:
    radial-gradient(ellipse at top, rgba(184, 134, 11, 0.10), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(122, 27, 27, 0.06), transparent 60%),
    var(--paper);
  position: relative;
  overflow-x: hidden;
}

/* ============ ふりがな（ruby） ============ */
ruby { ruby-align: center; }

ruby rt {
  font-size: 0.5em;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  font-weight: 400;
  line-height: 1;
}

.fuda-text ruby rt {
  font-size: 0.42em;
  color: var(--ink-soft);
}

.fuda-author ruby rt { color: var(--gold); }
.app-title ruby rt { color: var(--gold-pale); font-size: 0.45em; letter-spacing: 0.05em; }
.home-hero-title ruby rt { color: var(--gold); font-size: 0.4em; letter-spacing: 0.05em; }

/* ============ 背景の装飾 ============ */
.bg-deco { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.bg-deco-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200px;
  background:
    linear-gradient(180deg, rgba(122, 27, 27, 0.06), transparent),
    repeating-linear-gradient(135deg,
      rgba(184, 134, 11, 0.03) 0 14px,
      transparent 14px 28px);
}

.bg-deco-petal {
  position: absolute;
  font-size: 1.3rem;
  color: rgba(122, 27, 27, 0.10);
  user-select: none;
}
.bg-deco-petal-1 { top: 24%; left: 6%; transform: rotate(-20deg); }
.bg-deco-petal-2 { top: 56%; right: 8%; transform: rotate(15deg); font-size: 1.1rem; }
.bg-deco-petal-3 { bottom: 12%; left: 12%; transform: rotate(35deg); }

/* ============ ヘッダ（常に画面上部固定） ============ */
.app-header {
  position: fixed;
  top: 34px;  /* brand-bar (34px) の下にスタック */
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(122, 27, 27, 0.30);
  border-bottom: 2px solid var(--gold);
  height: 56px;
  box-sizing: border-box;
}

/* タイトルは絶対中央配置：戻るボタンの表示／非表示にかかわらず常に画面中央 */
.app-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-fuda);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  line-height: 1.2;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.12s ease;
  white-space: nowrap;
  z-index: 1;
}

.app-title:hover { background: rgba(255, 255, 255, 0.08); }
.app-title:active { background: rgba(0, 0, 0, 0.15); }

.app-title-icon {
  font-size: 1.05rem;
  color: var(--gold-pale);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  opacity: 0.85;
}

.app-badge {
  font-size: 0.65rem;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  opacity: 0.7;
  letter-spacing: 0.05em;
  flex: 0 0 auto;
  margin-left: auto; /* タイトル中央固定のため右端へ */
}

/* back-btn は home では hidden 属性で非表示 */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 245, 216, 0.18);
  border: 1px solid var(--gold-pale);
  color: #fff;
  padding: 6px 12px 6px 8px;
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-ui);
  flex: 0 0 auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: background 0.12s ease, transform 0.1s ease;
}

.back-btn:hover { background: rgba(255, 245, 216, 0.30); }
.back-btn:active { transform: scale(0.97); }
.back-btn-arrow { font-size: 1.15rem; line-height: 1; color: var(--gold-pale); }
.back-btn[hidden] { display: none; }

/* ============ View 共通 ============ */
.view {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 16px;
  min-height: 60vh;
}

.view[hidden] { display: none; }

.section-title {
  margin: 18px 4px 18px;
  font-family: var(--font-fuda);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--crimson);
  letter-spacing: 0.06em;
  text-align: center;
  position: relative;
}

.section-title::before,
.section-title::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold-soft);
  vertical-align: middle;
  margin: 0 12px;
}

/* ============ ホーム：散らした札の装飾 ============ */
#view-home { padding-top: 28px; }

/* 散らした札（実際の百人一首の上の句冒頭フレーズを縦書きで） */
.deco-fuda {
  position: absolute;
  width: 56px;
  height: 96px;
  background: var(--fuda-paper);
  border: 3px solid var(--fuda-green);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 4px 4px;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(0, 60, 30, 0.15);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.deco-fuda-phrase {
  font-family: var(--font-fuda);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1.15;
  writing-mode: vertical-rl;
  flex: 1;
}

.deco-fuda-no {
  font-family: var(--font-fuda);
  font-size: 0.5rem;
  color: var(--fuda-green);
  letter-spacing: 0.05em;
  border-top: 1px solid rgba(0, 102, 51, 0.25);
  padding-top: 2px;
  width: 100%;
  text-align: center;
}

.deco-fuda-1 { top: 10px;   right: -10px; transform: rotate(14deg);  opacity: 0.42; }
.deco-fuda-2 { top: 180px;  left: -16px;  transform: rotate(-18deg); opacity: 0.38; }
.deco-fuda-3 { top: 380px;  right: -8px;  transform: rotate(22deg);  opacity: 0.32; }
.deco-fuda-4 { bottom: 30px; left: 20px;  transform: rotate(-12deg); opacity: 0.30; }

@media (min-width: 640px) {
  .deco-fuda-1 { right: 0; }
  .deco-fuda-2 { left: 0; }
  .deco-fuda-3 { right: 0; }
}

/* ============ ホーム：ヒーロー ============ */
.home-hero {
  position: relative;
  z-index: 1;
  margin: 8px 4px 28px;
  padding: 22px 18px;
  background:
    linear-gradient(135deg, rgba(122, 27, 27, 0.04), rgba(184, 134, 11, 0.06)),
    var(--paper-warm);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-align: center;
}

.home-hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(184, 134, 11, 0.18), transparent 60%);
  pointer-events: none;
}

.home-hero-text { position: relative; z-index: 1; }

.home-hero-tagline {
  margin: 0 0 6px;
  font-size: 0.78rem;
  color: var(--crimson);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.home-hero-title {
  margin: 0 0 6px;
  font-family: var(--font-fuda);
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.10em;
  line-height: 1.4;
}

.home-hero-sub {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

/* ============ 「上へ戻る」フローティングボタン ============ */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--crimson-bright) 0%, var(--crimson) 100%);
  color: #fff;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover { filter: brightness(1.08); }
.back-to-top:active { transform: translateY(1px); }

.back-to-top-arrow {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--gold-pale);
}

.back-to-top-label ruby rt { color: var(--gold-pale); font-size: 0.5em; }

/* ============ ホーム：札風カード（読み上げ / 一覧） ============ */
.home-cards {
  /* reading-menu サブメニューで利用（縦並びの大ボタン） */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 8px 0 16px;
}

.home-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 18px;
  background: var(--fuda-paper);
  border: 1px solid var(--paper-line);
  border-left: 6px solid var(--fuda-green);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.home-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.home-card:active { transform: scale(0.99); }

.home-card-primary {
  background: linear-gradient(135deg, #ffffff, #fffdf6);
  border-left-color: var(--crimson);
  position: relative;
}

.home-card-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(184, 134, 11, 0.20) inset;
}

.home-card-emoji {
  font-size: 2rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-pale), #fff5d8);
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid var(--gold-soft);
}

.home-card-body { flex: 1; min-width: 0; }

.home-card-title {
  font-family: var(--font-fuda);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  line-height: 1.6;
}

.home-card-sub {
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.home-card-arrow {
  font-size: 1.6rem;
  color: var(--gold);
  font-weight: 300;
  line-height: 1;
}

/* ===== ホーム札風 2 枚（メイン入口） ===== */
.home-fuda-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 8px 0 16px;
}

.home-fuda-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 12px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: center;
  transition: transform 0.12s ease;
}

.home-fuda-card:hover { transform: translateY(-3px); }
.home-fuda-card:hover .home-fuda-card-paper { box-shadow: var(--shadow-lg), 0 1px 0 rgba(255,255,255,0.6) inset; }
.home-fuda-card:active { transform: scale(0.98); }

.home-fuda-card-paper {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 73 / 100;
  background: var(--fuda-paper);
  border: 6px solid var(--fuda-green);
  border-radius: 6px;
  box-shadow: var(--shadow-fuda);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  transition: box-shadow 0.12s ease;
}

.home-fuda-card-paper::before,
.home-fuda-card-paper::after {
  content: "";
  position: absolute;
  background: var(--fuda-green-deep);
  opacity: 0.15;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}
.home-fuda-card-paper::before { top: 8px; left: 10px; }
.home-fuda-card-paper::after { bottom: 8px; right: 10px; }

.home-fuda-card-primary .home-fuda-card-paper {
  border-color: var(--crimson);
  background: linear-gradient(180deg, #fffdf6, #fff8e8);
}

.home-fuda-card-char {
  font-family: var(--font-fuda);
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  letter-spacing: 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
}

.home-fuda-card-char ruby { ruby-position: over; }
.home-fuda-card-char ruby rt {
  font-size: 0.22em;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: 0.05em;
}

.home-fuda-card-primary .home-fuda-card-char { color: var(--crimson-deep); }
.home-fuda-card-primary .home-fuda-card-char ruby rt { color: rgba(122, 27, 27, 0.6); }

.home-fuda-card-kana {
  font-family: var(--font-fuda);
  font-size: 0.62rem;
  color: var(--ink-mute);
  letter-spacing: 0.16em;
  margin-top: 4px;
}

.home-fuda-card-title {
  font-family: var(--font-fuda);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-top: 4px;
}

.home-fuda-card-primary .home-fuda-card-title { color: var(--crimson); }

.home-fuda-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  margin-bottom: 2px;
}
.home-fuda-card-primary .home-fuda-card-icon { color: var(--crimson); }
.home-fuda-card-icon svg {
  display: block;
  overflow: visible;
}
.home-fuda-card-icon-ear svg { width: 30px; height: 34px; }
.home-fuda-card-icon-eye svg { width: 38px; height: 26px; }

@media (min-width: 640px) {
  .home-fuda-card-icon-ear svg { width: 34px; height: 38px; }
  .home-fuda-card-icon-eye svg { width: 44px; height: 30px; }
}

.home-fuda-card-sub {
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .home-fuda-card-char { font-size: 4.2rem; }
  .home-fuda-card-title { font-size: 1.1rem; }
  .home-fuda-card-sub { font-size: 0.78rem; }
}

.poc-note {
  margin-top: 22px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--ink-mute);
}

/* ============ 商品カード（Essential 百人一首かるた への導線） ============ */
.product-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 8px;
  padding: 16px 18px;
  background:
    linear-gradient(135deg, rgba(184, 134, 11, 0.06), rgba(122, 27, 27, 0.03)),
    var(--fuda-paper);
  border: 1px solid var(--gold-pale);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.product-card:active { transform: scale(0.99); }

.product-card-fuda {
  flex: 0 0 auto;
  width: 52px;
  height: 88px;
  background: var(--fuda-paper);
  border: 3px solid var(--crimson);
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(122, 27, 27, 0.18);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 7px 0 4px;
  transform: rotate(-4deg);
}

.product-card-fuda-phrase {
  writing-mode: vertical-rl;
  font-family: var(--font-fuda);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
}

.product-card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.product-card-eyebrow {
  font-size: 0.68rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.product-card-title {
  font-family: var(--font-fuda);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--crimson-deep);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.product-card-title ruby rt { color: var(--ink-mute); font-size: 0.45em; }

.product-card-sub {
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.7;
}
.product-card-sub ruby rt { font-size: 0.5em; color: var(--ink-mute); }

/* CTA ボタン（商品カード / 読み終わり共通） */
.product-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: linear-gradient(135deg, var(--crimson), var(--crimson-bright));
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  box-shadow: 0 3px 10px rgba(122, 27, 27, 0.25);
  transition: filter 0.12s ease;
}
.product-cta:hover { filter: brightness(1.08); }
.product-cta ruby rt { color: rgba(255, 255, 255, 0.7); font-size: 0.5em; }
.product-card .product-cta {
  align-self: flex-start;
  margin-top: 4px;
  padding: 8px 16px;
  font-size: 0.8rem;
}

/* ============ 一覧 ============ */
.list-toolbar { margin-bottom: 16px; }

.search-hint {
  margin: 6px 6px 0;
  font-size: 0.7rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}

.search-hint span {
  font-family: var(--font-fuda);
  color: var(--ink-soft);
  background: rgba(184, 134, 11, 0.08);
  padding: 1px 6px;
  border-radius: 6px;
}

.list-count {
  margin: 8px 6px 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-feature-settings: "tnum" 1;
}

.card-empty {
  list-style: none;
  text-align: center;
  color: var(--ink-mute);
  padding: 28px 16px;
}

.search-wrap {
  position: relative;
  display: block;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}

#search-input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 40px 12px 40px;
  background: var(--fuda-paper);
  border: 1px solid var(--paper-line);
  border-radius: 24px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  text-indent: 0;
}

#search-input:focus {
  /* outline-offset によるレイアウトの揺れを避けるため box-shadow で focus ring を描く */
  outline: none;
  border-color: var(--gold-soft);
  box-shadow: var(--shadow-card), 0 0 0 2px rgba(212, 168, 73, 0.45);
}

.search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(184, 134, 11, 0.12);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  z-index: 1;
}

.search-clear:hover { background: rgba(184, 134, 11, 0.25); color: var(--ink); }
.search-clear[hidden] { display: none; }

.card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px 14px 12px;
  background: var(--fuda-paper);
  border: 1px solid var(--paper-line);
  border-left: 5px solid var(--fuda-green);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: var(--shadow-card);
}

.card-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.card-item:active { transform: scale(0.995); }
.card-item:focus-visible {
  outline: none;
  box-shadow: var(--shadow-card), 0 0 0 3px rgba(212, 168, 73, 0.55);
}

.card-no-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--fuda-green);
  color: #fff;
  border-radius: 8px;
  padding: 8px 4px;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  min-height: 56px;
}

.card-no-badge-num {
  font-family: var(--font-fuda);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2px 0;
  line-height: 1;
}

.card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.card-poem-kami,
.card-poem-shimo {
  font-family: var(--font-fuda);
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink);
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-poem-kami ruby,
.card-poem-shimo ruby { white-space: nowrap; }

/* 一覧でも上下句は同じサイズ・同じ色（1 首として等しい重み） */
.card-poem-kami,
.card-poem-shimo { font-size: clamp(0.82rem, 3.6vw, 1rem); }

.card-poem-kami ruby rt,
.card-poem-shimo ruby rt { font-size: 0.45em; }

.card-author-name {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--crimson);
  letter-spacing: 0.04em;
}

.card-author-name ruby rt { font-size: 0.55em; color: var(--ink-mute); }

.card-chevron {
  font-size: 1.4rem;
  color: var(--gold);
  font-weight: 300;
}

/* ============ 札（共通：fuda-stage）— 実物の読札と同じ縦書き ============ */
.fuda-stage {
  margin: 18px 0 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 実物の読札の縦長比率（およそ 73:100）。中身は縦書きで右から左へ */
.fuda-paper {
  background: var(--fuda-paper);
  border: 6px solid var(--fuda-green);
  border-radius: 6px;
  box-shadow: var(--shadow-fuda);
  padding: 22px 16px;
  width: min(76vw, 300px);
  aspect-ratio: 73 / 100;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;      /* 札の中で上下センターに */
  justify-content: center;
}

.fuda-paper::before,
.fuda-paper::after {
  content: "";
  position: absolute;
  background: var(--fuda-green-deep);
  opacity: 0.15;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}
.fuda-paper::before { top: 8px; left: 10px; }
.fuda-paper::after { bottom: 8px; right: 10px; }

.fuda-text {
  font-family: var(--font-fuda);
  font-size: inherit;
  font-weight: 700;
  line-height: 1.95;        /* 縦書きでは行間 = 列の間隔 */
  color: var(--ink);
  letter-spacing: 0.08em;
  margin: 0;
  /* 改行は句切れの <br> のみ。あふれる場合は JS の fitFudaText が縮める */
  white-space: nowrap;
}

/* 縦書きコンテナ。font-size はここに置き、子の .fuda-text は inherit */
.fuda-vertical {
  writing-mode: vertical-rl;
  font-size: clamp(1.05rem, 4.8vw, 1.45rem);
  max-width: 100%;
  max-height: 100%;
}

/* 読み上げ画面は 1 句（最大 3 列）のみ表示なので、より大きく */
#r-poem-card .fuda-vertical { font-size: clamp(1.25rem, 6vw, 1.9rem); }

/* 下の句は上の句と同じ重み。書き始めをすこし下げて読札らしく */
.fuda-text-shimo {
  color: var(--ink);
  margin-block-start: 1.3em;
  text-indent: 1.6em;
}

/* 決まり字の朱色ハイライト */
.kimari-hl { color: var(--kimari); }
ruby.kimari-hl rt { color: var(--kimari-soft); }
ruby.kimari-hl-partial rt { color: var(--ink-soft); }
.kimari-hl-rt { color: var(--kimari-soft); }

.fuda-author {
  font-family: var(--font-fuda);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--crimson);
  letter-spacing: 0.10em;
  line-height: 1.6;
  text-align: center;
}

.fuda-author ruby rt { font-size: 0.5em; color: var(--gold); }

/* 詳細用 fuda：上の句 3 列 + 下の句 2 列が並ぶのでやや幅広に */
.detail-fuda .fuda-paper { width: min(82vw, 330px); }

/* 札のうら面（「歌をかくす」中に表示） */
.fuda-back {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 2px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 215, 130, 0.12), transparent 55%),
    repeating-linear-gradient(45deg, rgba(212, 168, 73, 0.10) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.fuda-back-mark {
  font-family: var(--font-fuda);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--gold-pale);
  width: 84px;
  height: 84px;
  border: 2px solid rgba(233, 210, 154, 0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.fuda-back-hint {
  color: rgba(255, 250, 240, 0.88);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.fuda-back-hint ruby rt { color: rgba(255, 250, 240, 0.6); font-size: 0.5em; }

#r-poem-card.is-hidden .fuda-back { display: flex; }
#r-poem-card.is-hidden .fuda-text { visibility: hidden; }
#r-poem-card.is-hidden.is-peek .fuda-back { display: none; }
#r-poem-card.is-hidden.is-peek .fuda-text { visibility: visible; }
#r-poem-card.is-hidden .fuda-paper { cursor: pointer; }
#r-poem-card.is-hidden .fuda-paper:focus-visible {
  outline: none;
  box-shadow: var(--shadow-fuda), 0 0 0 3px rgba(212, 168, 73, 0.55);
}

/* ============ 詳細画面 ============ */
.card-detail {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 20px 16px;
  box-shadow: var(--shadow-card);
}

.detail-no-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  align-items: center;
}

.detail-no-pill {
  display: inline-block;
  padding: 5px 12px;
  background: var(--fuda-green);
  color: #fff;
  border-radius: 14px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.detail-no-pill ruby rt { color: rgba(255,255,255,0.7); font-size: 0.5em; }

.detail-kimari-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #fff5e6;
  border: 1px solid var(--gold-soft);
  border-radius: 14px;
  font-size: 0.78rem;
  margin-left: auto;
}

.detail-kimari-pill ruby rt { color: var(--ink-mute); font-size: 0.55em; }

.kimari-pill-label { color: var(--ink-soft); font-size: 0.7rem; }
.kimari-pill-ji {
  font-family: var(--font-fuda);
  font-weight: 700;
  color: var(--kimari);  /* 札内の決まり字ハイライトと同じ朱色 */
  font-size: 1rem;
}
.kimari-pill-type { color: var(--ink-soft); font-size: 0.7rem; }

.audio-fallback-note {
  margin: 6px 4px 0;
  padding: 6px 10px;
  font-size: 0.72rem;
  color: var(--ink-mute);
  text-align: center;
  background: rgba(184, 134, 11, 0.08);
  border-radius: var(--radius-sm);
}

.audio-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
}

.audio-btn {
  flex: 1 1 calc(33% - 6px);
  min-width: 100px;
  padding: 12px 8px;
  background: var(--fuda-paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: background 0.12s, transform 0.1s;
  line-height: 1.5;
}

.audio-btn:hover { background: #fff; }
.audio-btn:active { transform: scale(0.97); }
.audio-btn-emoji { font-size: 1.1rem; }

.audio-btn ruby rt { font-size: 0.45em; color: var(--ink-mute); }

.audio-btn-primary {
  background: linear-gradient(135deg, var(--fuda-green), var(--fuda-green-soft));
  color: #fff;
  border-color: var(--fuda-green);
}

.audio-btn-primary ruby rt { color: rgba(255,255,255,0.7); }

.audio-btn-primary:hover { background: linear-gradient(135deg, var(--fuda-green-deep), var(--fuda-green)); }
.audio-btn.playing { background: linear-gradient(135deg, var(--crimson), var(--crimson-bright)); color: #fff; border-color: var(--crimson); }
.audio-btn.playing ruby rt { color: rgba(255,255,255,0.7); }

.info-block {
  margin: 18px 0;
  padding: 14px 14px;
  background: rgba(255, 253, 246, 0.7);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
}

.info-block-title {
  margin: 0 0 8px;
  font-family: var(--font-fuda);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--fuda-green);
  letter-spacing: 0.08em;
  padding-left: 10px;
  border-left: 3px solid var(--gold);
  line-height: 1.5;
}

.info-block-title ruby rt { color: var(--ink-mute); font-size: 0.45em; }

.info-block p { margin: 0; line-height: 2.1; font-size: 0.92rem; color: var(--ink); }
.info-block p ruby { ruby-position: over; }
.info-block p ruby rt {
  color: var(--ink-mute);
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.detail-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
}

.detail-nav button {
  flex: 1;
  padding: 12px;
  background: var(--fuda-paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.5;
}

.detail-nav button:disabled { opacity: 0.35; cursor: not-allowed; }
.detail-nav button:hover:not(:disabled) { background: #fff; }
.detail-nav button ruby rt { color: var(--ink-mute); font-size: 0.5em; }

/* ============ 読み上げ画面 ============ */
.reading-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding: 0 4px;
}

.reading-status-row {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
}

.reading-mode-pill {
  display: inline-block;
  padding: 5px 12px;
  background: var(--crimson);
  color: #fff;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.reading-counter {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.reading-counter > span { font-family: var(--font-fuda); color: var(--ink); font-weight: 700; }
.reading-counter ruby rt { font-size: 0.5em; color: var(--ink-mute); }

.reading-status-targets {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 253, 246, 0.7);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.6;
  flex-wrap: wrap;
}
.reading-target-summary-label {
  color: var(--ink-mute);
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.reading-target-summary-label ruby rt { font-size: 0.5em; color: var(--ink-mute); }
.reading-target-summary-nos {
  color: var(--crimson-deep);
  font-family: var(--font-fuda);
  font-feature-settings: "tnum" 1;
  word-break: break-all;
}

#r-poem-card .fuda-paper { width: min(78vw, 310px); }

#r-poem-card.is-playing .fuda-paper {
  border-color: var(--crimson);
  box-shadow: 0 6px 22px rgba(122, 27, 27, 0.25), 0 0 0 4px rgba(255,255,255,0.6) inset;
}

/* ===== 読み上げの状態表示（いま何を読んでいるか + 次の歌までのカウントダウン） ===== */
.reading-now {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}

.reading-now.is-empty { visibility: hidden; }
.reading-now-label ruby rt { font-size: 0.5em; color: var(--ink-mute); }

.reading-countdown {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-block;
}
.reading-countdown[hidden] { display: none; }

.reading-countdown svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.countdown-ring-bg {
  fill: none;
  stroke: rgba(184, 134, 11, 0.18);
  stroke-width: 3;
}

.countdown-ring-fg {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
}

.reading-countdown-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-fuda);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}

/* ===== 「歌をかくす」トグル（カルタ取り練習用） ===== */
.hide-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: var(--fuda-paper);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.hide-toggle:hover { border-color: var(--gold-soft); }
.hide-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 168, 73, 0.5);
}

.hide-toggle-track {
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: #d9cdb8;
  position: relative;
  flex: 0 0 auto;
  transition: background 0.15s ease;
}

.hide-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.hide-toggle[aria-pressed="true"] {
  background: #fdf0ec;
  border-color: var(--crimson);
  color: var(--crimson);
  font-weight: 600;
}
.hide-toggle[aria-pressed="true"] .hide-toggle-track { background: var(--crimson); }
.hide-toggle[aria-pressed="true"] .hide-toggle-knob { transform: translateX(14px); }
.hide-toggle-label ruby rt { font-size: 0.5em; color: inherit; opacity: 0.7; }

/* ===== 読み終わり（おつかれさま + 商品導線） ===== */
.reading-finished {
  margin: 4px 0 12px;
  padding: 16px 16px 18px;
  background: linear-gradient(135deg, #fff8e8, #fdf2df);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-sm);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.reading-finished[hidden] { display: none; }

.reading-finished-msg {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.9;
}
.reading-finished-msg ruby rt { color: var(--ink-mute); font-size: 0.5em; }

.reading-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 18px 0 12px;
}

.ctl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--fuda-paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  line-height: 1.4;
}

.ctl-btn:not(.ctl-btn-primary):hover { background: #fff; }
.ctl-btn:active { transform: scale(0.98); }
.ctl-btn ruby rt { font-size: 0.45em; color: var(--ink-mute); }

.ctl-btn-primary {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--crimson), var(--crimson-bright));
  color: #fff;
  border-color: var(--crimson);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 16px;
  font-size: 1.05rem;
}

.ctl-btn-primary[data-state="playing"] {
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  border-color: var(--gold);
  color: #fff;
}

.ctl-btn-primary[data-state="paused"] {
  background: linear-gradient(135deg, var(--crimson-deep), var(--crimson));
}

.ctl-btn-primary ruby rt { color: rgba(255,255,255,0.7); }

.ctl-btn-primary:hover { filter: brightness(1.05); }

.ctl-icon { font-size: 1rem; }

.reading-settings {
  margin-top: 14px;
  padding: 0 14px;
  background: rgba(255, 253, 246, 0.7);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.reading-settings > summary {
  padding: 12px 0;
  cursor: pointer;
  color: var(--ink-soft);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.reading-settings > summary::-webkit-details-marker { display: none; }

.reading-settings > summary::before {
  content: "⚙";
  font-size: 0.95rem;
}

.reading-settings > summary::after {
  content: "▼";
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--ink-mute);
  transition: transform 0.15s ease;
  transform-origin: center;
}

.reading-settings[open] > summary {
  border-bottom: 1px dashed var(--paper-line);
  margin-bottom: 8px;
}

.reading-settings[open] > summary::after {
  transform: rotate(180deg);
}
.reading-settings ruby rt { color: var(--ink-mute); font-size: 0.5em; }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 0.88rem;
}

.setting-row label { color: var(--ink-soft); }

.setting-row select {
  padding: 7px 10px;
  background: var(--fuda-paper);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 0.88rem;
}

/* ============ 読み上げ対象 番号指定 ============ */
.reading-target {
  margin: 10px 0 18px;
  padding: 14px 16px;
  background: rgba(255, 253, 246, 0.85);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
}
.reading-target-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--ink);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  font-weight: 600;
}
.reading-target-label ruby rt { color: var(--ink-mute); font-size: 0.5em; }
#r-target-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 1rem;
  font-family: var(--font-ui);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  box-sizing: border-box;
}
#r-target-input:focus {
  outline: none;
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px rgba(122, 27, 27, 0.12);
}
.reading-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.reading-preset {
  padding: 7px 12px;
  background: var(--fuda-paper);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--ink-soft);
  cursor: pointer;
  font-feature-settings: "tnum" 1;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  line-height: 1.4;
}
.reading-preset:hover { background: #fff; border-color: var(--gold-soft); }
.reading-preset:active { transform: scale(0.97); }
.reading-preset:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 168, 73, 0.5);
}
.reading-preset.is-active {
  background: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
  font-weight: 600;
}
.reading-preset.is-active ruby rt { color: rgba(255, 255, 255, 0.75); }
.reading-preset ruby rt { color: var(--ink-mute); font-size: 0.5em; }

.reading-target-hint {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.reading-target-hint ruby rt { color: var(--ink-mute); font-size: 0.5em; }
.reading-target-hint .r-target-count {
  font-weight: 700;
  color: var(--crimson);
  font-size: 1.05em;
  margin: 0 2px;
}
.reading-target-hint.is-error { color: #b53939; }
.reading-target-hint.is-error .r-target-count { color: #b53939; }
.reading-target-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.reading-target-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.74rem;
  color: var(--crimson-deep);
  background: rgba(212, 165, 116, 0.18);
  border: 1px solid rgba(122, 27, 27, 0.18);
  border-radius: 999px;
  font-feature-settings: "tnum" 1;
}

/* ============ フッタ ============ */
.app-footer {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 24px auto 0;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-top: 1px dashed var(--paper-line);
  font-size: 0.72rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  text-align: center;
}

.app-footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.app-footer-badge {
  padding: 2px 8px;
  background: rgba(122, 27, 27, 0.08);
  color: var(--crimson);
  border: 1px solid rgba(122, 27, 27, 0.20);
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
}

.app-footer-text { line-height: 1.6; }

.app-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  font-size: 0.78rem;
  line-height: 1.6;
}
.app-footer-link {
  color: var(--crimson);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 4px 2px;
  border-bottom: 1px dotted rgba(122, 27, 27, 0.35);
}
.app-footer-link:hover {
  color: var(--crimson-deep);
  border-bottom-style: solid;
}
.app-footer-link ruby rt { color: rgba(122, 27, 27, 0.55); font-size: 0.5em; }
.app-footer-extlink {
  font-size: 0.78em;
  color: var(--ink-mute);
  margin-left: 1px;
}
.app-footer-sep {
  color: var(--ink-mute);
  opacity: 0.6;
}

/* ============ ブランドバー（Essential TOP への戻り、画面上部固定） ============ */
.brand-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11;  /* app-header (10) より上に */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  font-family: "M PLUS Rounded 1c", "Klee One", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(214, 72, 60, 0.25);
  height: 34px;
  box-sizing: border-box;
}
.brand-bar:hover { background: linear-gradient(180deg, var(--brand-bright) 0%, var(--brand) 100%); }

.brand-bar-arrow {
  font-size: 1.1rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  margin-right: 2px;
}
.brand-bar-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.92);
}
.brand-bar-mark svg { width: 100%; height: 100%; }
.brand-bar-text {
  letter-spacing: 0.06em;
}

/* ============ レスポンシブ ============ */
@media (min-width: 640px) {
  .home-hero-title { font-size: 1.85rem; }
  /* 広い画面では札も少し大きく。あふれる場合は JS の fitFudaText が縮める */
  .fuda-vertical { font-size: 1.55rem; }
}

@media (max-width: 480px) {
  .back-to-top { right: 14px; bottom: 16px; padding: 9px 12px; font-size: 0.75rem; }
}