/* ============================================
   家庭学習プリント工房 - スタイルシート v2
   白ベース＋オレンジ系 | レスポンシブ | 収益化対応
   ============================================ */

/* ── リセット & ベース ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:       #f97316;
  --primary-dark:  #ea580c;
  --primary-light: #fff7ed;
  --primary-soft:  #ffedd5;
  /* なぞり・罫線などの補助色（視認性を保った淡い暖色） */
  --trace-pale:    #fec9a8;
  --grid-line:     #fed7aa;
  --accent:        #ea580c;
  --accent-soft:   #fff7ed;
  --gold:          #f59e0b;
  --gold-soft:     #fffbeb;
  --gold-dark:     #b45309;
  --danger:        #ea4335;
  --danger-soft:   #fce8e6;
  --text:          #202124;
  --text-sub:      #5f6368;
  --border:        #dadce0;
  --bg:            #faf8f6;
  --white:         #ffffff;
  --shadow-sm:     0 1px 4px rgba(0,0,0,.10);
  --shadow-md:     0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:     0 8px 32px rgba(0,0,0,.15);
  --radius:        12px;
  --radius-sm:     8px;
  --font:          'Noto Sans JP', sans-serif;
  /* 印刷（PC）/ スマホPDF 共通の版面調整トークン */
  --print-side-font-size: 6.7pt;
  --print-side-line-height: 1.28;
  --print-gap-side-to-main: 1.4pt;
  --print-gap-main-to-write: 2px;
  --print-gap-row-tight: 0.8pt;
  --print-gap-sub-to-main: 1.2pt;
  --print-gap-hira-write-top: 0.8mm;
  --print-card-padding-y: 0.8pt;
  --print-card-padding-x: 2.4pt;
  --print-card-inner-gap: 0.7mm;
  --print-card-separator-gap: 0.2mm;
  --print-answer-line-height: 22px;
  --print-answer-line-height-compact: 18px;
  --print-answer-line-gap-compact: 1px;
  --print-first-header-gap: 1.8mm;
  --print-first-instruction-gap: 2.1mm;
  --print-cards-5-padding-y: 0.7pt;
  --print-cards-5-padding-x: 2.1pt;
  --print-cards-5-separator-gap: 0.18mm;
  --print-cards-5-inner-gap: 0.55mm;
  --print-hiragana-advanced-prompt-line-height: 1.25;
  --print-hiragana-advanced-write-margin-top: 0.65mm;
  --print-hiragana-advanced-card-padding-y: 0.65pt;
  --print-hiragana-advanced-card-inner-gap: 0.52mm;
  --print-hiragana-advanced-prompt-gap: 1pt;
  --print-hiragana-advanced-trace-line-height: 0.98;
  --print-hiragana-advanced-write-margin-top-tight: 0.5mm;
  --print-hiragana-advanced-write-margin-bottom-tight: 0.15mm;
  /* 50音上級のみ：印刷/PDF でなぞり・マスを約 1/1.5 スケール、1行固定用 */
  --print-hiragana-adv-trace-font: 32pt;
  --print-hiragana-adv-write-mm: 18mm;
  --print-hiragana-adv-emoji-pt: 11.5pt;
  --print-hiragana-adv-row-gap-body: 2.6pt;
  --print-hiragana-adv-col-gap: 0.1em;
  --print-hiragana-adv-trace-letter-spacing: -0.05em;
  --print-hiragana-adv-col-margin-x: 0.5px;
  /* 並び替え専用（通常表示） */
  --narabikae-screen-layout-gap: 7px;
  --narabikae-screen-choice-gap: 8px;
  --narabikae-screen-choice-font-size: 1.15rem;
  --narabikae-screen-choice-pad-y: 6px;
  --narabikae-screen-choice-pad-x: 14px;
  --narabikae-screen-answer-height: 47px;
  --narabikae-screen-answer-margin-top: 9px;
  --narabikae-screen-answer-border-width: 3px;
  /* 並び替え専用（印刷/PDF） */
  --print-narabikae-layout-gap: 1.05mm;
  --print-narabikae-choice-gap: 1.6pt;
  --print-narabikae-choice-font-size: 13.1pt;
  --print-narabikae-choice-pad-y: 1.1pt;
  --print-narabikae-choice-pad-x: 6.2pt;
  --print-narabikae-answer-height: 33px;
  --print-narabikae-answer-margin-top: 3.2px;
  --print-narabikae-answer-border-width: 2.2pt;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}

/* サイト上部ロゴ（画面のみ） */
.logo-area {
  text-align: center;
  margin-bottom: 10px;
  padding: 12px 16px 0;
}
.logo-area img {
  width: 120px;
  max-width: min(120px, 42vw);
  height: auto;
  vertical-align: middle;
}

/* プリント内ロゴはヘッダー内 .print-logo--header（タイトル横・本文フロー内。印刷範囲は従来どおり .a4-sheet 内） */

/* ============================================
   ヘッダー
   ============================================ */
.site-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: var(--shadow-md);
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.logo-icon {
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-wrap: wrap;
}
.nav-link {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 20px;
  transition: background .2s;
}
.nav-link:hover { background: rgba(255,255,255,.15); color: #fff; }
.nav-link:focus-visible {
  outline: 3px solid rgba(255,255,255,.85);
  outline-offset: 2px;
}
.nav-link--pro {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}
.nav-link--sub {
  font-size: 0.8rem;
  opacity: 0.92;
}
.nav-btn-premium {
  background: linear-gradient(135deg, var(--gold) 0%, #e69500 100%);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 16px;
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(249,171,0,.4);
  transition: all .2s;
  margin-left: 4px;
}
.nav-btn-premium:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(249,171,0,.5); }
.nav-btn-premium:focus-visible {
  outline: 3px solid rgba(255,255,255,.9);
  outline-offset: 2px;
}

.nav-btn-history {
  background: var(--white);
  color: var(--primary);
  border: 2px solid rgba(249, 115, 22, 0.35);
  border-radius: 20px;
  padding: 7px 14px;
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all .2s;
  margin-left: 4px;
}
.nav-btn-history:hover {
  border-color: var(--primary);
  background: rgba(249, 115, 22, 0.06);
}
.nav-btn-history:focus-visible {
  outline: 3px solid var(--primary-soft);
  outline-offset: 2px;
}

/* ============================================
   ヒーロー
   ============================================ */
.hero-section {
  background: linear-gradient(160deg, #f97316 0%, #ea580c 55%, #c2410c 100%);
  color: var(--white);
  padding: 72px 20px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  /* 装飾レイヤーが下のセクションのクリックを奪わないよう（PCでセレクト等が反応しない原因になり得る） */
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 20px;
}
.hero-title {
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 900;
  line-height: 1.35;
  margin-bottom: 16px;
  letter-spacing: .02em;
}
.hero-accent {
  color: #ffd54f;
  display: block;
  margin-top: 4px;
}
/* hero-desc は削除（hero-lead / hero-list に統一） */
.hero-desc { display: none; }

/* ── ヒーロー：一言説明 ── */
.hero-lead {
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  opacity: .92;
  line-height: 1.9;
  margin-bottom: 20px;
}

/* ── ヒーロー：箇条書き ── */
.hero-list {
  list-style: none;
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  margin: 0 auto 28px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  padding: 16px 22px;
  width: fit-content;
  max-width: 100%;
}
.hero-list li {
  font-size: clamp(.88rem, 2vw, .98rem);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: .95;
}
.hero-list li i {
  color: #ffd54f;
  font-size: .9rem;
  flex-shrink: 0;
}

/* ── 「誰向け？」ボックス ── */
.for-whom-box {
  background: linear-gradient(135deg, var(--primary-light) 0%, #fffbeb 100%);
  border: 2px solid var(--primary-soft);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 40px;
}
.for-whom-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .06em;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.for-whom-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.for-whom-list li {
  font-size: .93rem;
  color: var(--text);
  line-height: 1.6;
}

/* スマホのみ表示改行 */
.sp-only { display: none; }
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.stat-num {
  font-size: 2rem;
  font-weight: 900;
  color: #ffd54f;
  line-height: 1;
}
.stat-label {
  font-size: .78rem;
  opacity: .8;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  color: var(--primary-dark);
  text-decoration: none;
  padding: 16px 40px;
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  transition: all .2s;
}
.hero-cta:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,.3); }
.hero-cta:focus-visible {
  outline: 3px solid #ffd54f;
  outline-offset: 3px;
}

/* ============================================
   共通セクション
   ============================================ */
.section { padding: 72px 20px; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: .02em;
}
.section-sub {
  font-size: .95rem;
  color: var(--text-sub);
  margin-bottom: 40px;
}

/* ============================================
   使い方セクション
   ============================================ */
.how-to-section { background: var(--white); }

.steps-grid {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 48px;
}
.how-step {
  flex: 1;
  background: var(--primary-light);
  border: 2px solid var(--primary-soft);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  position: relative;
}
.how-step-num {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--white);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: .85rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-step-icon { font-size: 2.4rem; margin-bottom: 12px; }
.how-step-title { font-size: 1rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 8px; }
.how-step-desc  { font-size: .84rem; color: var(--text-sub); line-height: 1.85; }
.how-step-arrow { color: var(--primary-soft); font-size: 1.4rem; flex-shrink: 0; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.feature-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  transition: box-shadow .2s, transform .2s;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-icon { font-size: 2rem; display: block; margin-bottom: 8px; }
.feature-title { font-size: .95rem; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.feature-desc  { font-size: .8rem; color: var(--text-sub); line-height: 1.6; }

/* ============================================
   プリント生成セクション
   ============================================ */
.generator-section { background: var(--bg); }

/* ── コントロールパネル ── */
.control-panel { display: flex; flex-direction: column; gap: 20px; }
.step-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow .2s;
}
/* STEP3 設定：overflow hidden だと select のドロップダウン／クリック判定が親で切れることがある */
.step-card--settings {
  overflow: visible;
  position: relative;
  z-index: 1;
}
.step-card:hover { box-shadow: var(--shadow-md); }
.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--primary-light);
  border-bottom: 1px solid var(--primary-soft);
}
.step-badge {
  background: var(--primary);
  color: var(--white);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 20px;
}
.step-title { font-size: 1.05rem; font-weight: 700; color: var(--primary-dark); }

.option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 20px 24px;
}
.option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.option-btn:hover { border-color: var(--primary); background: var(--primary-light); transform: translateY(-2px); }
.option-btn.active { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 3px var(--primary-soft); }
.option-btn.active .option-label { color: var(--primary-dark); }
.option-btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
.option-icon  { font-size: 2rem; }
.option-label { font-size: 1rem; font-weight: 700; color: var(--text); }
.option-desc  { font-size: .76rem; color: var(--text-sub); }

.option-grid--four {
  grid-template-columns: repeat(2, 1fr);
}
/* STEP1 ジャンル名：改行で高さが増えないよう1行に固定（はみ出し時は省略） */
#contentOptions .option-btn {
  min-width: 0;
  padding: 16px 8px;
}
#contentOptions .option-label {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-size: clamp(0.78rem, 2.35vw, 1rem);
  padding: 0 2px;
}
@media (min-width: 720px) {
  #contentOptions .option-btn {
    padding: 18px 10px;
  }
  .option-grid--four {
    grid-template-columns: repeat(3, 1fr);
  }
}
.option-grid--custom-mode {
  grid-template-columns: repeat(2, 1fr);
}
.content-btn--custom {
  position: relative;
  padding-top: 26px;
}
.content-btn--trial {
  position: relative;
  padding-top: 26px;
}
.option-pro-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--gold) 0%, #e69500 100%);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
/* 有料プラン時はジャンル・レベルの「有料」バッジを出さない */
body.plan-pro .option-pro-badge {
  display: none !important;
}
body.plan-free .content-btn--custom:not(.active) {
  opacity: 0.9;
}
.level-btn--pro {
  position: relative;
  padding-top: 24px;
}
.content-btn--custom.content-btn--locked:not(.active) {
  border-style: dashed;
  border-color: rgba(249, 171, 0, 0.5);
  background: #fffdf8;
}
.level-btn--pro.level-btn--locked:not(.active) {
  border-style: dashed;
  border-color: rgba(249, 171, 0, 0.5);
  background: #fffdf8;
}
.content-btn--custom.active .option-pro-badge {
  background: #fff;
  color: #c77800;
  border: 1px solid var(--gold);
}

.settings-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px 24px;
}
.setting-item  { display: flex; flex-direction: column; gap: 8px; }
.setting-label {
  font-size: .88rem; font-weight: 700; color: var(--text-sub);
  display: flex; align-items: center; gap: 6px;
}
.setting-label i { color: var(--primary); }
.setting-select {
  padding: 10px 36px 10px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: .95rem;
  color: var(--text);
  background: var(--white);
  cursor: pointer;
  transition: border-color .2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23f97316' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.setting-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.setting-select:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
.setting-select.setting-select--locked,
select.setting-select--locked {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: #f3f4f6;
  color: var(--text-sub);
}

.settings-row--custom {
  grid-template-columns: 1fr;
  padding-top: 0;
}
.settings-row--katakana {
  grid-template-columns: 1fr;
  padding-top: 0;
}
.settings-row--kana-mode {
  grid-template-columns: 1fr;
  padding-top: 0;
}
.settings-row--kanji {
  grid-template-columns: 1fr;
  padding-top: 0;
}
.settings-row--kanji .setting-item--full {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.settings-row--question-count {
  grid-template-columns: 1fr;
  padding-top: 0;
}
.settings-row--question-count .setting-item--full {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.settings-row--maze-category {
  grid-template-columns: 1fr;
  padding-top: 0;
}
.settings-row--katakana .setting-item--full {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.settings-row--kana-mode .setting-item--full {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  z-index: 2;
}
/* PC幅：セレクトのヒット領域を確保し、重なり時も操作できるよう明示 */
@media (min-width: 861px) {
  .settings-row--kana-mode .setting-select {
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 3;
    pointer-events: auto;
  }
}
.settings-row--custom .setting-item--full {
  flex-direction: column;
  align-items: stretch;
}
.custom-words-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.custom-word-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-sizing: border-box;
}
.custom-word-row .custom-word-input {
  flex: 1;
  width: 100%;
  max-width: none;
  min-height: 48px;
  font-size: 1.05rem;
}
.custom-add-btn,
.custom-remove-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  padding: 9px 12px;
}
.custom-remove-btn {
  background: #fff5f5;
  border-color: #f1b5b5;
  color: #b33a3a;
  min-height: 44px;
}
.custom-add-btn {
  margin-top: 6px;
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
  align-self: stretch;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.custom-add-btn:hover,
.custom-remove-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #fff;
}
.custom-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.setting-item--full {
  max-width: 100%;
}
.setting-input {
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: .95rem;
  color: var(--text);
  background: var(--white);
  transition: border-color .2s;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
}
.setting-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.setting-input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: var(--bg);
}
.setting-hint {
  font-size: .74rem;
  color: var(--text-sub);
  margin: 0;
  line-height: 1.45;
}

.option-btn.level-btn--locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.generate-section { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0 4px; }
.generate-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 56px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white); border: none; border-radius: 50px;
  font-family: var(--font); font-size: 1.15rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 20px rgba(249, 115, 22, 0.38);
  transition: all .2s; letter-spacing: .04em;
}
.generate-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(249, 115, 22, 0.48); }
.generate-btn:focus-visible {
  outline: 3px solid var(--primary-soft);
  outline-offset: 3px;
}
.generate-quota {
  font-size: .8rem;
  color: var(--text-sub);
  margin: 0 0 4px;
  text-align: center;
  line-height: 1.45;
}
.generate-katakana-note {
  font-size: 0.82rem;
  color: var(--text-sub);
  margin: 0;
  text-align: center;
  line-height: 1.55;
  max-width: 420px;
}
.generate-note {
  font-size: .82rem;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.sentence-trial-notice {
  max-width: 460px;
  width: 100%;
  background: #fff6e9;
  border: 1px solid #f2c582;
  border-radius: 10px;
  padding: 10px 12px 12px;
  text-align: center;
  position: relative;
}
.sentence-trial-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #9a4f00;
}
.sentence-trial-sub {
  margin-top: 4px;
  font-size: 0.82rem;
  color: #7a5a2f;
}
.sentence-trial-list {
  margin: 8px 0 10px;
  padding-left: 1.2em;
  text-align: left;
  color: #684b1f;
  font-size: 0.82rem;
}
.sentence-trial-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: #ffe8c7;
  color: #9a4f00;
  font-size: 18px;
  cursor: pointer;
}
.sentence-trial-btn {
  margin-top: 8px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #ff9f43, #ff7a18);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  min-height: 46px;
  padding: 10px 18px;
  cursor: pointer;
}
.sentence-trial-btn:hover { filter: brightness(1.05); }
.generate-note i { color: var(--gold); }
.link-btn {
  background: none; border: none; color: var(--primary);
  font-family: var(--font); font-size: .82rem; font-weight: 700;
  cursor: pointer; padding: 0; text-decoration: underline;
}
.link-btn:hover { color: var(--primary-dark); }
.link-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── プレビュー ── */
.preview-section { margin-top: 40px; animation: fadeInUp .4s ease; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px);} to {opacity:1;transform:translateY(0);} }
.preview-controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.preview-title { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.preview-title i { color: var(--primary); }
.preview-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.preview-actions .action-btn { min-height: 44px; }
.action-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 20px; border: none; border-radius: 50px;
  font-family: var(--font); font-size: .9rem; font-weight: 700; cursor: pointer; transition: all .2s;
}
.action-btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
.btn-regenerate { background: var(--gold-soft); color: var(--gold-dark); border: 1px solid var(--gold); }
.btn-regenerate:hover { background: var(--gold); color: var(--white); }
.btn-print { background: var(--primary-light); color: var(--primary-dark); border: 1px solid var(--primary); }
.btn-print:hover { background: var(--primary); color: var(--white); }
.btn-pdf { background: var(--danger-soft); color: #8b0000; border: 1px solid var(--danger); }
.btn-pdf:hover { background: var(--danger); color: var(--white); }

/* ── A4 ──
   プレビュー寸法を @media print の印字域と一致させる（210−12×2 = 186mm 幅、297−12×2 = 273mm 高）。
   html2canvas は screen のみ参照するため、ここを mm ベースにして印刷・PDFと同じレイアウトボックスにする。 */
.a4-wrapper {
  display: flex; justify-content: center;
  background: #e8ecf0; border-radius: var(--radius);
  padding: 32px 20px; box-shadow: inset 0 2px 8px rgba(0,0,0,.1);
}
.a4-sheet {
  width: 186mm;
  max-width: 100%;
  min-height: 273mm;
  box-sizing: border-box;
  background: var(--white); border-radius: 4px;
  box-shadow: var(--shadow-lg);
  padding: 5mm 6mm;
  font-family: var(--font);
  position: relative;
  display: flex; flex-direction: column;
}
/* 迷路・ひらがな迷路：SVG2枚／ページで縦に長い。最小高さ273mmに縛られるとプレビュー下端が欠けるため、内容に合わせて伸ばす */
.a4-sheet--maze {
  min-height: auto;
  overflow: visible;
}

/*
 * PC・タブレット幅のプレビュー／印刷パック実測用：迷路は 273mm 印字域に 2 枚載せる高さに合わせる。
 * （スマホは (max-width:600px) 側の .maze-svg と競合しないよう min-width:601px に限定）
 */
@media (min-width: 601px) {
  .a4-sheet--maze .maze-card {
    padding: 1.5px 1.5px 3px;
  }
  .a4-sheet--maze .maze-svg {
    min-height: 69mm;
    max-height: 84mm;
  }
  .a4-sheet--maze .maze-card--normal .maze-svg {
    min-height: 69mm;
    max-height: 86mm;
  }
  .a4-sheet--maze .maze-card--hiragana .maze-svg {
    min-height: 65mm;
    max-height: 80mm;
  }
  .a4-sheet--maze .maze-answer-row {
    margin-top: 5px;
    gap: 7px;
  }
}

/*
 * PC幅（769px以上）のみ：助詞・中級／上級のパック実測（measurePrintPackSizes）用。
 * スマホでは適用されない。.print-area を持たない DOM（スマホPDF用クローン等）には掛からない。
 */
@media screen and (min-width: 769px) {
  /* 中級：本文約1.5倍＋全体を詰めて +1 問相当の実測に寄せる */
  .print-area .question.joshi:has(.choice-sentence) .choice-sentence {
    font-size: 1.875rem;
    line-height: 1.2;
    margin-bottom: 2px;
  }
  .print-area .question.joshi:has(.choice-sentence) .choices-row {
    gap: 4px;
    margin-top: 0;
  }
  .print-area .question.joshi:has(.choice-sentence) .choice-item {
    font-size: 0.82rem;
    padding: 2px 6px;
  }
  .print-area .question.joshi:has(.choice-sentence) .choice-label {
    font-size: 0.72rem;
  }
  .print-area .question.joshi:has(.choice-sentence) .question-card-content {
    gap: 2px;
  }

  /* 上級：本文約1.5倍＋段落を詰め、枚数増を抑える */
  .print-area .question.joshi .advanced-compact--joshi {
    gap: 2px;
  }
  .print-area .question.joshi .advanced-compact--joshi .desc-sentence {
    font-size: 2.8125rem;
    line-height: 1.17;
    margin-bottom: 0;
  }

  /* 50音：中級 +4 / 上級 +1 向けに PC 実測を圧縮 */
  .print-area .question.hiragana:has(.emoji-question-row:not(.emoji-question-row--tight)) .emoji-question-row {
    gap: 6px;
  }
  .print-area .question.hiragana:has(.emoji-question-row:not(.emoji-question-row--tight)) .emoji-large {
    font-size: 2rem;
  }
  .print-area .question.hiragana:has(.emoji-question-row:not(.emoji-question-row--tight)) .emoji-question-prompt {
    font-size: 0.7rem;
    line-height: 1.2;
    margin-bottom: 1px;
  }
  .print-area .question.hiragana:has(.emoji-question-row:not(.emoji-question-row--tight)) .choice-item {
    font-size: 0.8rem;
    padding: 2px 6px;
  }
  .print-area .question.hiragana:has(.emoji-question-row--tight) .emoji-question-row--tight {
    gap: 6px;
  }
  .print-area .question.hiragana:has(.emoji-question-row--tight) .emoji-large {
    font-size: 2.15rem;
  }
  .print-area .question.hiragana:has(.emoji-question-row--tight) .emoji-question-prompt {
    font-size: 0.72rem;
    margin-bottom: 1px;
    line-height: 1.2;
  }
  .print-area .question.hiragana:has(.emoji-question-row--tight) .hira-write {
    width: 45px;
    height: 45px;
  }

  /* 並び替え：全レベル +2 向け */
  .print-area .question.narabikae .question-card-content {
    gap: 2px;
  }
  .print-area .question.narabikae .emoji-question-prompt {
    font-size: 0.72rem;
    line-height: 1.18;
    margin-bottom: 1px;
  }
  .print-area .question.narabikae .choices-row {
    gap: 4px;
  }
  .print-area .question.narabikae .choice-item {
    font-size: 0.8rem;
    padding: 2px 6px;
  }
  .print-area .question.narabikae .adv-prompt-sub {
    margin-bottom: 2px;
    line-height: 1.16;
  }
  .print-area .question.narabikae .answer-line {
    height: 30px;
  }

  /* 文章問題：全レベル +4 向け */
  .print-area .question.sentence .question-card-content {
    gap: 2px;
  }
  .print-area .question.sentence .choice-sentence {
    font-size: 1.06rem;
    line-height: 1.24;
    margin-bottom: 1px;
  }
  .print-area .question.sentence .emoji-question-prompt {
    font-size: 0.7rem;
    line-height: 1.18;
    margin-bottom: 1px;
  }
  .print-area .question.sentence .choice-item {
    font-size: 0.8rem;
    padding: 2px 6px;
  }
  .print-area .question.sentence .answer-line {
    height: 28px;
    margin-top: 1px;
  }
  .print-area .question.sentence .sentence-illust-block {
    margin: 0 0 2px;
  }
  .print-area .question.sentence .sentence-illust-svg {
    width: 15mm;
    height: 15mm;
  }

  /* 漢字（読み・中級） +2 向け（writing への影響を避ける） */
  .print-area .question.kanji .emoji-question-prompt:has(+ .choices-row .choice-label) {
    font-size: 0.7rem;
    line-height: 1.16;
    margin-bottom: 1px;
  }
  .print-area .question.kanji .emoji-question-prompt:has(+ .choices-row .choice-label) + .choices-row .choice-item {
    font-size: 0.8rem;
    padding: 2px 6px;
  }
}

.print-header {
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 3px solid var(--primary);
}
.print-header-main-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  width: 100%;
}
.print-header-left {
  min-width: 0;
  flex: 0 1 38%;
  max-width: 42%;
}
.print-title-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px 12px;
  min-width: 0;
  width: 100%;
}
.print-title-block {
  min-width: 0;
  flex: 1 1 auto;
}
.print-logo--header {
  flex: 0 0 auto;
  width: 13.5mm;
  max-width: 22%;
  height: auto;
  object-fit: contain;
  opacity: 0.88;
  pointer-events: none;
  align-self: flex-end;
  margin-bottom: 1px;
}
.print-header-fields {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto;
  align-items: flex-end;
  justify-content: stretch;
  gap: 10px 14px;
  flex: 1 1 62%;
  max-width: 78%;
  width: 100%;
  margin-left: auto;
}
.print-header-field {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-size: 1.62rem;
  flex-shrink: 0;
}
.print-header-field--name {
  min-width: 0;
  flex: 1 1 auto;
  max-width: none;
}
.print-header-field--date {
  flex: 0 1 auto;
  gap: 4px;
  min-width: 12rem;
  justify-self: end;
}
.print-field-label {
  color: var(--text-sub);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
}
.print-field-line {
  border-bottom: 1.5px solid #999;
  display: inline-block;
  vertical-align: bottom;
  min-height: 54px;
  height: 54px;
  box-sizing: border-box;
}
.print-field-line--name {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}
.print-date-slot {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}
.print-date-blank {
  border-bottom: 1.5px solid #999;
  display: inline-block;
  vertical-align: bottom;
  height: 54px;
  box-sizing: border-box;
}
.print-date-blank--month {
  width: 4.8rem;
  min-width: 4.2rem;
}
.print-date-blank--day {
  width: 4.8rem;
  min-width: 4.2rem;
}
.print-date-suffix {
  font-weight: 600;
  color: var(--text-sub);
  line-height: 1.2;
  font-size: 1em;
  padding-bottom: 2px;
}
/* プリント上部のジャンル行：1行固定（印刷の縦幅節約・レイアウト安定） */
.print-title-block .print-category {
  font-size: clamp(0.68rem, 1.65vw, 0.78rem);
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
.print-title-block .print-title { font-size: 1.6rem; font-weight: 900; color: var(--text); letter-spacing: .04em; }
.print-title-main,
.print-title-suffix {
  display: inline;
}
.print-info-block { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.print-info-row { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.info-label { color: var(--text-sub); font-weight: 500; }
.info-line {
  border-bottom: 1.5px solid #999;
  width: 180px;
  min-width: 160px;
  min-height: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: bottom;
}
.print-instruction {
  background: var(--primary-light); border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 7px 11px; font-size: .85rem; color: var(--primary-dark); font-weight: 600; margin-bottom: 12px;
}
@media screen {
  /* 通常表示は印刷内容に寄せる。見た目崩れは screen 側だけで吸収 */
  .print-header-main-row {
    align-items: flex-start;
    gap: 10px 14px;
  }
  .print-header-left {
    flex: 1 1 46%;
    max-width: 56%;
  }
  .print-title-row {
    align-items: flex-start;
    gap: 7px 10px;
  }
  .print-title-block {
    min-width: 0;
  }
  .print-title-block .print-category {
    display: block;
    font-size: clamp(0.62rem, 1.5vw, 0.74rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.22;
  }
  .print-title-block .print-title-suffix {
    display: inline;
  }
  .print-header-fields {
    grid-template-columns: minmax(10rem, 1fr) auto;
    gap: 8px 10px;
    max-width: 52%;
    align-items: flex-end;
  }
  .print-header-field {
    font-size: 0.94rem;
    gap: 6px;
  }
  .print-field-line--name {
    min-height: 36px;
    height: 36px;
  }
  .print-date-blank--month,
  .print-date-blank--day {
    width: 3rem;
    min-width: 2.6rem;
    height: 36px;
  }
  .print-date-suffix {
    font-size: 0.92rem;
    padding-bottom: 1px;
  }
}

@media screen and (max-width: 860px) {
  .print-header-main-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .print-header-left {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .print-header-fields {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 6px 0;
  }
  .print-header-field {
    font-size: 0.86rem;
  }
  .print-header-field--date {
    justify-content: flex-end;
  }
  .print-date-blank--month,
  .print-date-blank--day {
    width: 2.7rem;
    min-width: 2.4rem;
    height: 32px;
  }
  .print-field-line--name {
    min-height: 32px;
    height: 32px;
  }
}
.questions-grid { display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* 問題カードの新しい土台クラス（既存見た目は維持） */
.question {
  box-sizing: border-box;
}
/* ジャンル別上書き用のフック（現時点では土台のみ） */
.question.kanji {}
.question.hiragana {}
.question.maze {}
.question.joshi {}
.question.sentence {}
.question.narabikae {}
.question.custom {}
.question.kanji {
  padding: 6px 10px;
  margin-bottom: 6px;
  min-height: auto;
}
.question.kanji p {
  font-size: 30px;
  line-height: 1.18;
  display: flex;
  align-items: center;
  margin: 0;
}
.question.kanji .kanji-box,
.question.kanji .kanji-blank-square,
.question.kanji .kanji-masu--kanji {
  width: 40px;
  height: 40px;
}
.question.kanji .kanji-stack__bottom--kanji {
  font-size: 1em;
  line-height: 1.3;
}
.question.kanji ruby {
  font-size: 1em;
}
.question.kanji rt {
  font-size: 0.5em;
  line-height: 1;
}
.question.kanji .question-card-content {
  gap: 4px;
}
/* 上級（助詞・文章・並べ替え）だけ縦密度を少し上げる */
.question.joshi .advanced-compact--joshi,
.question.sentence .advanced-compact--sentence,
.question.narabikae .advanced-compact--narabikae {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.question.joshi .advanced-compact--joshi {
  gap: 5px;
}
.question.joshi .advanced-compact--joshi .desc-sentence,
.question.sentence .advanced-compact--sentence .choice-sentence,
.question.narabikae .advanced-compact--narabikae .emoji-question-prompt {
  line-height: 1.16;
  margin-bottom: 0;
}

/* 助詞 上級：本文を読みやすく（スマホ表示＆スマホPDFの差が出にくいよう同じセレクタで上書き） */
.question.joshi .advanced-compact--joshi .desc-sentence {
  font-size: 1.875rem;
  line-height: 1.25;
  margin-bottom: 0;
}

.question.sentence .advanced-compact--sentence .answer-line,
.question.narabikae .advanced-compact--narabikae .answer-line {
  height: 18px;
  margin-top: 1px;
}
.question.narabikae .advanced-compact--narabikae .adv-prompt-sub {
  margin-bottom: 1px;
  line-height: 1.18;
}
/* 並び替え専用：通常表示は崩れないことを優先して整える */
.question.narabikae .narabikae-layout {
  display: flex;
  flex-direction: column;
  gap: var(--narabikae-screen-layout-gap);
}
.question.narabikae .narabikae-choices-row {
  gap: var(--narabikae-screen-choice-gap);
  align-items: center;
  flex-wrap: wrap;
}
.question.narabikae .narabikae-choices-row .choice-item {
  font-size: var(--narabikae-screen-choice-font-size);
  padding: var(--narabikae-screen-choice-pad-y) var(--narabikae-screen-choice-pad-x);
  line-height: 1.2;
}
.question.narabikae .narabikae-answer-line {
  height: var(--narabikae-screen-answer-height);
  margin-top: var(--narabikae-screen-answer-margin-top);
  border-bottom-width: var(--narabikae-screen-answer-border-width);
  border-bottom-color: var(--primary-dark);
}

/* 漢字の読み問題だけ少し大きく（書き問題バランスは維持） */
.question.kanji .kanji-stack--reading-adv .kanji-stack__bottom--kanji {
  font-size: 1.08em;
  line-height: 1.28;
}
.question.kanji .kanji-stack--reading-adv .kanji-reading-blank-line {
  font-size: 0.68em;
  line-height: 1.18;
}

@media (max-width: 768px) {
  .question.narabikae .narabikae-layout {
    gap: 5px;
  }
  .question.narabikae .narabikae-choices-row {
    gap: 5px;
  }
  .question.narabikae .narabikae-choices-row .choice-item {
    font-size: 1.02rem;
    padding: 4px 9px;
    min-width: 0;
  }
  .question.narabikae .narabikae-answer-line {
    height: 43px;
    margin-top: 7px;
  }
  .question.kanji {
    padding: 6px 10px;
    margin-bottom: 6px;
    min-height: auto;
  }
  .question.kanji .question-card-content {
    gap: 4px;
  }
  .question.kanji p,
  .question.kanji .choice-sentence,
  .question.kanji .desc-sentence,
  .question.kanji .kanji-sentence-line--prominent {
    font-size: 1.22rem;
    line-height: 1.28;
    margin-bottom: 0;
  }
  .question.kanji .kanji-stack {
    gap: 0.08em;
  }
  .question.kanji .kanji-box,
  .question.kanji .kanji-blank-square,
  .question.kanji .kanji-masu--kanji {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }
}

.question-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 0;
  align-items: start;
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--white);
}
.question-card-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/*
 * ちょうど5問のページ（.print-page--cards-5）だけ、印刷時と同じ詰めをプレビュー・実測でも再現する。
 * ページ分割の segment 測定と実表示のズレをなくすため @media print と同値の pt/mm を使う。
 */
.print-page--cards-5 .question-card {
  padding: 0.7pt 2.1pt;
}
.print-page--cards-5 .question-card:not(:last-child) {
  margin-bottom: 0.18mm;
}
.print-page--cards-5 .question-card-content {
  gap: 0.55mm;
}
.print-page--maze.print-page--cards-5 .question-card {
  padding: 1.6pt 3.8pt;
}

.question-num {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--white);
  font-size: .75rem; font-weight: 700;
  width: 22px; height: 22px; border-radius: 50%; margin-bottom: 0;
  flex-shrink: 0;
}
/* 漢字ジャンルの共通パーツ（試験導入） */
.kanji-wrap {
  display: block;
  width: 100%;
}
/* 続きページ用（画面上は非表示想定だが、プレビューで確認できるようスタイルのみ） */
.print-continuation-strip {
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 8px;
  margin-bottom: 10px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.print-continuation-kicker {
  font-size: 0.72rem;
  color: var(--text-sub);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.print-continuation-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-top: 2px;
}
.print-continuation-hint {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.45;
}
.trace-area { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 2rem; line-height: 1.15; letter-spacing: .08em; margin-top: 2px; }
.trace-char { color: var(--text); font-weight: 700; }
.trace-target { color: var(--trace-pale); font-weight: 900; border-bottom: 2px dashed var(--primary-soft); min-width: 2rem; text-align: center; }
.write-box {
  display: inline-block; border: 2px solid var(--border); border-radius: 6px;
  width: 52px; height: 52px; vertical-align: middle; background: #fffdfb; position: relative;
}
.write-box-tight {
  display: inline-block;
  margin: 0 2px;
  vertical-align: middle;
}
.write-box::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right,transparent calc(50% - .5px),var(--grid-line) calc(50% - .5px),var(--grid-line) calc(50% + .5px),transparent calc(50% + .5px)),
              linear-gradient(to bottom,transparent calc(50% - .5px),var(--grid-line) calc(50% - .5px),var(--grid-line) calc(50% + .5px),transparent calc(50% + .5px));
}
.choice-sentence { font-size: 1.25rem; font-weight: 600; margin-bottom: 6px; line-height: 1.45; }
.kanji-sentence-line { letter-spacing: 0.02em; }
/* 漢字短文：例文は1行（ターゲットのみ縦に補助・記入欄） */
.kanji-sentence-line--prominent {
  font-size: clamp(1.28rem, 3.9vw, 1.78rem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
}
.kanji-sentence-line--nowrap {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
/* ターゲット1字：上＝補助、下＝本文中の字。inline-flex の最下行ベースラインで前後の文字と揃える */
.kanji-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  vertical-align: baseline;
  margin: 0 0.03em;
  gap: 0.12em;
  flex-shrink: 0;
  max-width: none;
  break-inside: avoid;
  page-break-inside: avoid;
}
.kanji-stack__top {
  display: block;
  font-size: 0.68em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}
/* 薄いオレンジ寄り（補助のなぞり用） */
.kanji-stack__top--trace {
  color: #d4a574;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 0.94em;
  line-height: 1.45;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
/* 読み・上級：横長の読み記入欄＋漢字 */
.kanji-stack--reading-adv {
  gap: 0.1em;
}
.kanji-reading-blank-line {
  display: block;
  box-sizing: border-box;
  min-width: 5.5em;
  width: 100%;
  max-width: 12em;
  font-size: 0.62em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.18em;
  color: #333333;
  text-align: center;
  white-space: nowrap;
}
/* 書き・上級：よみ（補助）→ 漢字（主役）→ 書字マス（下段マスでベースラインがズレないよう中央寄せ） */
.kanji-stack--writing-adv {
  gap: 0.14em;
  vertical-align: middle;
}
.kanji-stack__yomi-read--writing {
  display: block;
  font-size: 0.52em;
  font-weight: 600;
  line-height: 1.15;
  color: #888888;
  text-align: center;
  width: 100%;
  letter-spacing: 0.04em;
}
.kanji-stack__masu-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0.28em;
  flex-wrap: nowrap;
}
.kanji-stack__masu-row--write {
  margin-top: 0.06em;
}
/* 漢字上級（書き）：中が真っ白の四角い記入欄 */
.kanji-blank-square {
  box-sizing: border-box;
  display: inline-block;
  width: clamp(56px, 15vw, 72px);
  height: clamp(56px, 15vw, 72px);
  min-width: 56px;
  min-height: 56px;
  border: 2px solid #333333;
  border-radius: 4px;
  background: #ffffff;
  flex-shrink: 0;
}
/* 書字マス：白地・濃い枠・十字（ぼかし・透明・影・opacity 不使用） */
.kanji-masu--kanji {
  box-sizing: border-box;
  display: inline-block;
  width: clamp(56px, 15vw, 72px);
  height: clamp(56px, 15vw, 72px);
  min-width: 56px;
  min-height: 56px;
  border: 2px solid #333333;
  border-radius: 4px;
  background: #ffffff;
  position: relative;
  flex-shrink: 0;
}
.kanji-masu--kanji::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 6%;
  bottom: 6%;
  width: 1px;
  margin-left: -0.5px;
  background: #333333;
}
.kanji-masu--kanji::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 6%;
  right: 6%;
  height: 1px;
  margin-top: -0.5px;
  background: #333333;
}
.kanji-stack__bottom--kanji {
  font-weight: 900;
  font-size: 1em;
  line-height: 1.32;
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 2px;
  text-align: center;
}
.kanji-stack__bottom--kanji.kanji-stack__bottom--primary {
  font-size: 1.08em;
  line-height: 1.24;
  text-decoration: none;
}
.kanji-stack__bottom--slot {
  font-weight: 700;
  font-size: 0.72em;
  line-height: 1.35;
  text-align: center;
}
/* 書き・初級：なぞり漢字を大きく、（よみ）を小さく */
.kanji-stack__top--trace:has(+ .kanji-stack__bottom--slot) {
  font-size: 1.12em;
}
.question.joshi .joshi-inline-blank {
  display: inline-block;
  min-width: 4.8em;
  text-align: center;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.kanji-drill-target {
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 2px;
}
.kanji-yomi-trace {
  justify-content: center;
  margin-top: 10px;
}
.kanji-yomi-trace .trace-target {
  font-size: clamp(1.22rem, 3.9vw, 1.78rem);
  line-height: 1.45;
  min-width: 3.5em;
  padding: 4px 8px;
}
.kanji-write-box-advanced {
  width: 56px;
  height: 56px;
  font-size: 2rem;
}
.blank-box { display: inline-block; border: 2px solid var(--primary); border-radius: 6px; width: 44px; height: 36px; vertical-align: middle; background: var(--primary-light); }
.choices-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.choice-label { font-size: .78rem; color: var(--text-sub); font-weight: 500; margin-right: 3px; }
.choice-item {
  display: flex; align-items: center; justify-content: center;
  padding: 4px 12px; border: 2px solid var(--primary-soft); border-radius: 18px;
  font-size: 1.05rem; font-weight: 700; color: var(--primary-dark); background: var(--primary-light); min-width: 48px;
}
.desc-sentence { font-size: 1.25rem; font-weight: 600; margin-bottom: 6px; line-height: 1.45; }
.answer-line { border: none; border-bottom: 2px solid var(--border); height: 36px; width: 100%; background: transparent; display: block; margin-top: 4px; }
.hiragana-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin-top: 4px; }
/* 50音・初級：5マスを必ず1行に。隙間・マスを詰めて折り返しと印刷縦幅を抑える */
.hiragana-grid--beginner-compact {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 1px !important;
  margin-top: 2px !important;
  width: 100%;
}
.hiragana-grid--beginner-compact.hiragana-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.hiragana-grid--beginner-compact.hiragana-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.hiragana-grid--beginner-compact.hiragana-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.hiragana-grid--beginner-compact.hiragana-grid--cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
.hiragana-grid--beginner-compact.hiragana-grid--cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
.hiragana-grid--beginner-compact.hiragana-grid--cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
}
.hiragana-grid--beginner-compact.hiragana-grid--cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
}
.hiragana-grid--beginner-compact.hiragana-grid--cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
}
.hiragana-grid--beginner-compact .hira-cell {
  gap: 1px !important;
  min-width: 0;
}
.hiragana-grid--beginner-compact .hira-cell--yo-on-small {
  align-self: end;
}
.hiragana-grid--beginner-compact .hira-trace {
  font-size: 1.35rem !important;
  line-height: 1 !important;
}
.hiragana-grid--beginner-compact .hira-trace--small {
  font-size: 0.95rem !important;
}
.hiragana-grid--beginner-compact .hira-write {
  width: 34px !important;
  height: 34px !important;
  border-width: 1.5px !important;
}
.hiragana-grid--beginner-compact .hira-write--small {
  width: 22px !important;
  height: 22px !important;
  border-radius: 4px !important;
  border-style: dashed !important;
  border-color: var(--primary-soft) !important;
  background: var(--primary-light) !important;
}
/* 拗音：「き」＋小「ゃ」を1セットとして横密着（マス同士の隙間なし） */
.hira-yoon-pair {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.hira-yoon-pair .hira-cell {
  margin: 0;
}
.hira-yoon-pair .hira-cell:first-child .hira-write {
  border-right-width: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.hira-yoon-pair .hira-cell--yo-on-small .hira-write {
  margin-left: -1.5px;
  border-left-width: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  position: relative;
  z-index: 1;
}
.hira-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hira-trace { font-size: 2rem; color: var(--trace-pale); font-weight: 900; line-height: 1; border-bottom: 2px dashed var(--primary-soft); }
.hira-write { width: 48px; height: 48px; border: 2px solid var(--border); border-radius: 6px; background: #fffdfb; position: relative; }
.hira-write::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right,transparent calc(50% - .5px),var(--grid-line) calc(50% - .5px),var(--grid-line) calc(50% + .5px),transparent calc(50% + .5px)),
              linear-gradient(to bottom,transparent calc(50% - .5px),var(--grid-line) calc(50% - .5px),var(--grid-line) calc(50% + .5px),transparent calc(50% + .5px));
}
.print-footer {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: #bbb;
}

/* generator.js が出力するページ単位ラッパー（.a4-sheet 直下に複数） */
.print-page {
  display: block;
  width: 100%;
}

/* ── プリント問題内のコンパクト用クラス ── */
.hira-group-label {
  font-size: .76rem;
  color: var(--text-sub);
  margin-bottom: 3px;
}
.question-card-content .hira-group-label + .hiragana-grid--beginner-compact {
  margin-top: 1px;
}
/* 50音 初級のみ: スマホPDFの見た目を基準に、通常プレビュー側を安定化 */
.question.hiragana .gojuon-basic-row .hira-group-label {
  display: none !important;
}
.question.hiragana .gojuon-basic-row .gojuon-basic-grid {
  column-gap: 10px !important;
  row-gap: 8px !important;
  justify-content: flex-start;
}
.question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-cell {
  gap: 4px !important;
}
.question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-trace {
  font-size: clamp(1rem, 1.55vw, 1.2rem) !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
  border-bottom-width: 2px !important;
  white-space: nowrap !important;
}
.question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-trace--small {
  font-size: clamp(0.62rem, 1.05vw, 0.78rem) !important;
}
.question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-write {
  width: 56px !important;
  height: 56px !important;
  border-width: 2px !important;
  border-color: #9ca3af !important;
  border-radius: 4px !important;
  margin-right: 1px !important;
  margin-left: 1px !important;
}
.question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-write--small {
  width: 36px !important;
  height: 36px !important;
}
.question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-yoon-pair {
  gap: 7px !important;
}
.trace-second-row { margin-top: 5px; }
.trace-second-label { font-size: .72rem; color: var(--text-sub); }
.write-box-inline { margin-left: 5px; }
.hint-line { font-size: .74rem; color: var(--text-sub); margin-bottom: 3px; }

/* スマホ画面の生成直後プレビュー専用：50音 初級の重なり防止 */
@media screen and (max-width: 768px) {
  .question-card.question.hiragana:has(.gojuon-basic-row) .question-card-content {
    gap: 8px;
  }
  .question.hiragana .gojuon-basic-row .gojuon-basic-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: 4px !important;
    row-gap: 6px !important;
    box-sizing: border-box !important;
  }
  .question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-cell {
    gap: 4px !important;
    min-width: 0 !important;
  }
  .question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-trace {
    font-size: clamp(0.85rem, 3vw, 1rem) !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
  }
  .question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-trace--small {
    font-size: clamp(0.54rem, 2vw, 0.66rem) !important;
  }
  .question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-write {
    width: 100% !important;
    max-width: 64px !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 1 !important;
    transform: none !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
  }
  .question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-write--small {
    width: 100% !important;
    max-width: 48px !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 1 !important;
    transform: none !important;
  }
  .question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-yoon-pair {
    gap: 5px !important;
  }
}

.emoji-question-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.emoji-question-row--tight { gap: 8px; }
.emoji-large { font-size: 2.5rem; line-height: 1; flex-shrink: 0; }
.emoji-question-body { min-width: 0; flex: 1; }
.emoji-question-prompt {
  font-size: .76rem;
  color: var(--text-sub);
  margin-bottom: 4px;
  line-height: 1.35;
}

.adv-prompt {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1.35;
}
.adv-prompt-sub {
  font-size: .76rem;
  color: var(--text-sub);
  margin-bottom: 5px;
}
.adv-write-row { line-height: 1.2; }

.seikatsu-char-col {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 1px;
  vertical-align: top;
}
.seikatsu-char-gap {
  display: inline-block;
  width: 52px;
  height: 52px;
  margin: 0 2px;
  vertical-align: top;
}
.seikatsu-trace {
  font-size: 1.6rem;
  color: var(--trace-pale);
  font-weight: 900;
  line-height: 1;
}
.question.custom .seikatsu-trace {
  font-size: 3.2rem;
  line-height: 1;
}
.question.custom .seikatsu-char-col .hira-write {
  width: 64px;
  height: 64px;
}
.question.custom .seikatsu-char-gap {
  width: 64px;
  height: 64px;
}

.maze-card {
  width: 100%;
  border: 1px solid var(--primary-soft);
  background: linear-gradient(180deg, #ffffff 0%, var(--primary-light) 100%);
  border-radius: 10px;
  padding: 2px 2px 4px;
}
.maze-svg {
  width: 100%;
  min-height: 112mm;
  max-height: 132mm;
  display: block;
  background: #fff;
  border-radius: 8px;
}
.maze-walls { fill: none; stroke: #1e293b; stroke-linecap: round; stroke-linejoin: round; }
.maze-walls--curve { stroke-linecap: round; stroke-linejoin: round; }
.maze-start { fill: #16a34a; }
.maze-goal { fill: #ea4335; }
.maze-label {
  font-size: 12px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 3.5px;
  letter-spacing: 0.02em;
}
.maze-label--start { fill: #15803d; }
.maze-label--goal { fill: #b91c1c; }
.maze-char-on-path {
  font-size: 13px;
  font-weight: 800;
  fill: #c2410c;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 2px;
}
.maze-card--hiragana .maze-char-on-path {
  font-size: 14px;
  font-weight: 900;
}
.maze-word-hint { margin-top: 6px; font-size: 0.85rem; }
.maze-char {
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
  font-weight: 700;
  border-bottom: 1px dashed #94a3b8;
  margin-right: 4px;
}
.maze-word-question { margin-top: 2px; font-size: 0.82rem; color: var(--text-sub); }
.maze-card--hiragana .maze-word-question { display: none !important; }
.maze-answer-row {
  margin-top: 6px;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}
.maze-answer-box {
  width: 68px;
  height: 68px;
  border: 2.5px solid #64748b;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  flex: 0 0 auto;
}

.sentence-illust-block {
  display: flex;
  justify-content: center;
  margin: 2px 0 6px;
}
.sentence-illust-svg {
  width: 72px;
  height: 72px;
}
.sentence-illust-frame {
  fill: #ffffff;
  stroke: #334155;
  stroke-width: 1.8;
}
.sentence-illust-line,
.sentence-illust-head {
  fill: none;
  stroke: #111827;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================
   有料プランCTAバナー
   ============================================ */
.plan-cta-section {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 50%, #9a3412 100%);
  color: var(--white);
  padding: 56px 20px;
}
.plan-cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.plan-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(249,171,0,.2);
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.plan-cta-title {
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  font-weight: 900;
  margin-bottom: 8px;
}
.plan-cta-desc { font-size: .9rem; opacity: .85; line-height: 1.7; max-width: 520px; }
.plan-cta-right { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.plan-cta-btn {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--gold) 0%, #e69500 100%);
  color: var(--white); border: none; border-radius: 50px;
  padding: 16px 36px; font-family: var(--font); font-size: 1rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 20px rgba(249,171,0,.4);
  transition: all .2s; white-space: nowrap;
}
.plan-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(249,171,0,.5); }
.plan-cta-btn:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}
.plan-cta-note { font-size: .78rem; opacity: .75; text-align: center; }
.plan-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  align-items: stretch;
}
.plan-cta-btn--secondary {
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: #fff;
  box-shadow: none;
}
.plan-cta-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.plan-cta-btn--ghost {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: none;
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 600;
}
.plan-cta-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ============================================
   FAQセクション
   ============================================ */
.faq-section { background: var(--white); }
.faq-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  width: 100%; background: none; border: none;
  padding: 18px 20px; font-family: var(--font); font-size: .97rem; font-weight: 600;
  color: var(--text); cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; text-align: left; transition: background .2s;
}
.faq-q:hover { background: var(--primary-light); }
.faq-q:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: -3px;
}
.faq-q span { display: flex; align-items: center; gap: 10px; }
.faq-icon { color: var(--primary); font-size: 1rem; flex-shrink: 0; }
.faq-arrow { color: var(--primary); font-size: .85rem; transition: transform .3s; flex-shrink: 0; }
.faq-q.open .faq-arrow { transform: rotate(180deg); }
.faq-a {
  display: none;
  padding: 0 20px 18px 44px;
  font-size: .9rem; color: var(--text-sub); line-height: 1.8;
  border-top: 1px solid var(--primary-soft); background: var(--primary-light);
}
.faq-a strong { color: var(--primary-dark); }
.faq-a.open { display: block; }

/* ============================================
   フッター
   ============================================ */
.site-footer {
  background: #292524;
  color: rgba(255,255,255,.7);
  padding: 40px 20px 24px;
}
.footer-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.footer-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 10px;
}
.footer-desc { font-size: .83rem; margin-bottom: 20px; line-height: 1.7; }
.footer-links {
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.footer-links a {
  color: rgba(255,255,255,.6); text-decoration: none; font-size: .83rem;
  transition: color .2s;
}
.footer-links a:hover { color: var(--white); }
.footer-links a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 4px;
}
.footer-link-pro {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  padding: 6px 12px !important;
}
.footer-link-pro:hover {
  color: var(--gold) !important;
  border-color: rgba(249, 171, 0, 0.55);
}
.footer-copy { font-size: .75rem; opacity: .5; }

/* ============================================
   ローディング
   ============================================ */
.loading-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 999;
}
.loading-box {
  background: var(--white); border-radius: var(--radius);
  padding: 40px 60px; text-align: center; box-shadow: var(--shadow-lg);
}
.loading-spinner {
  width: 48px; height: 48px;
  border: 5px solid var(--primary-soft); border-top-color: var(--primary);
  border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-box p { font-size: 1rem; font-weight: 600; color: var(--text-sub); }

/* ============================================
   有料プランモーダル
   ============================================ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center;
  z-index: 1000; padding: 16px;
  /* タッチスクロール対応 */
  -webkit-overflow-scrolling: touch;
}
.modal-overlay.open { display: flex; }
#historyModal {
  z-index: 1000;
}
#planModal {
  z-index: 1100;
}
#historyModal .modal-box {
  position: relative;
  z-index: 1001;
}
#planModal .modal-box {
  position: relative;
  z-index: 1101;
}
.modal-overlay--inactive {
  pointer-events: none;
}
.modal-overlay--inactive .modal-box {
  pointer-events: none;
}

.modal-box {
  background: var(--white);
  border-radius: 16px;
  width: 100%;
  max-width: 780px;
  max-height: 90vh;          /* 画面内に収める */
  display: flex;
  flex-direction: column;    /* header/body/footerを縦並び */
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ── モーダルヘッダー（固定） ── */
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;             /* 圧縮させない */
  background: var(--white);
}
.modal-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold-soft); color: var(--gold-dark);
  border: 1px solid var(--gold); border-radius: 20px;
  padding: 3px 12px; font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; margin-bottom: 4px;
}
.modal-title { font-size: 1.3rem; font-weight: 900; color: var(--text); }
.modal-close {
  background: none; border: none; font-size: 1.2rem;
  color: var(--text-sub); cursor: pointer; padding: 4px 8px;
  border-radius: 6px; transition: background .2s; flex-shrink: 0;
}
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-close:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* ── モーダル本体（スクロール可） ── */
.modal-body {
  flex: 1;                    /* 残り高さを占める */
  overflow-y: auto;           /* 縦スクロール有効 */
  -webkit-overflow-scrolling: touch; /* iOS タッチスクロール */
  padding: 20px 24px;
}
.modal-intro { font-size: .9rem; color: var(--text-sub); margin-bottom: 20px; }

/* ── プランカード ── */
.plan-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.plan-card {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px;
  position: relative;
  background: var(--white);
}
.plan-pro {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(249,171,0,.12);
}
.plan-popular-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--white);
  font-size: .75rem; font-weight: 700;
  padding: 3px 14px; border-radius: 20px; white-space: nowrap;
}
.plan-card-header { margin-bottom: 16px; }
.plan-name { font-size: 1rem; font-weight: 700; color: var(--text-sub); margin-bottom: 6px; }
.plan-price { font-size: 1.8rem; font-weight: 900; color: var(--text); line-height: 1; }
.plan-price span { font-size: 2.2rem; }
.plan-price small { font-size: .85rem; font-weight: 400; color: var(--text-sub); }
.plan-trial { font-size: .78rem; color: var(--accent); font-weight: 700; margin-top: 4px; }
.plan-pro-tagline {
  font-size: .82rem;
  color: var(--primary-dark);
  font-weight: 600;
  margin: 0 0 12px;
  line-height: 1.5;
  padding: 8px 10px;
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.plan-features li { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; line-height: 1.5; }
.plan-features li.ok { color: var(--text); }
.plan-features li.ng { color: #bbb; }
.plan-features li.ok i { color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.plan-features li.ng i { color: #ccc; flex-shrink: 0; margin-top: 3px; }
.plan-features li.hot {
  font-weight: 700;
  color: var(--primary-dark);
}
.plan-feature-ico {
  flex-shrink: 0;
  margin-right: 2px;
}

/* 有料プラン詳細（単体ページ） */
.pricing-standalone {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}
.pricing-standalone .pricing-back {
  margin-bottom: 20px;
}
.pricing-standalone .pricing-back a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.pricing-standalone .pricing-back a:hover {
  text-decoration: underline;
}
.pricing-standalone h1 {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 16px;
  letter-spacing: .04em;
}
.pricing-standalone .pricing-lead {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text-sub);
  margin-bottom: 28px;
}
.pricing-block {
  margin-bottom: 20px;
  padding: 16px 18px;
  background: #f8fafc;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.pricing-block h2 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 12px;
}
.pricing-block ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--text);
}
.pricing-line-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #06c755 0%, #05a546 100%);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(6, 199, 85, 0.35);
  transition: transform .2s, box-shadow .2s;
}
.pricing-line-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 199, 85, 0.45);
  color: #fff;
}
.pricing-line-btn:focus-visible {
  outline: 3px solid var(--primary-soft);
  outline-offset: 3px;
}

/* ── 有料プラン LP（pricing.html） ── */
body.lp-pricing-page {
  margin: 0;
  background: var(--bg);
  font-family: var(--font);
  color: var(--text);
  min-height: 100vh;
}
.lp-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 28px 20px 64px;
  box-sizing: border-box;
}
.lp-back { margin-bottom: 20px; }
.lp-back a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.lp-back a:hover { text-decoration: underline; }
.lp-pro-cta-bar {
  background: linear-gradient(135deg, #fff8e6 0%, #fff 100%);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 24px;
  text-align: center;
}
.lp-pro-cta-text {
  font-size: 0.9rem;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.55;
}
.lp-pro-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--gold) 0%, #e69500 100%);
  color: #fff !important;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(249, 171, 0, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.lp-pro-open-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(249, 171, 0, 0.45);
  color: #fff;
}
.lp-pro-open-btn--large {
  max-width: 380px;
  margin-bottom: 12px;
}
.lp-cta-sub {
  font-size: 0.82rem;
  color: var(--text-sub);
  margin: 0 0 24px;
  line-height: 1.55;
}
.lp-cta-sub--top {
  margin: 10px 0 0;
}
.lp-line-btn--hero {
  min-width: min(360px, 100%);
  font-size: 1.04rem;
  box-shadow: 0 8px 24px rgba(6, 199, 85, 0.35);
}
.lp-cta-lead--line {
  margin-top: 12px;
}
.lp-hero {
  text-align: center;
  padding: 8px 0 4px;
}
.lp-hero-label {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .08em;
  margin-bottom: 12px;
}
.lp-hero-title {
  font-size: clamp(1.35rem, 4.2vw, 1.8rem);
  font-weight: 900;
  line-height: 1.4;
  margin: 0 0 16px;
  letter-spacing: .03em;
}
.lp-hero-sub {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--text-sub);
  margin: 0;
}
.lp-value-card {
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 12px;
  padding: 22px 20px 24px;
  margin: 28px 0;
  box-shadow: 0 4px 24px rgba(249, 115, 22, 0.08);
}
.lp-value-lead {
  font-size: .95rem;
  font-weight: 800;
  color: var(--primary-dark);
  text-align: center;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--primary-light) 0%, #ffedd5 100%);
  border-radius: 8px;
  border-left: 4px solid var(--primary);
  line-height: 1.55;
}
.lp-value-desc {
  font-size: .88rem;
  line-height: 1.75;
  color: var(--text-sub);
  margin: 0;
}
.lp-value-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-value-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  line-height: 1.5;
}
.lp-value-list i {
  color: var(--primary);
  margin-top: 3px;
  flex-shrink: 0;
}
.lp-value-footnote {
  margin: 14px 0 0;
  font-size: 0.8rem;
  color: var(--text-sub);
  line-height: 1.55;
}
.lp-history-focus {
  margin: 20px 0 26px;
  padding: 18px 16px;
  border-radius: 12px;
  border: 1px solid #fdba74;
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
  box-shadow: 0 6px 22px rgba(249, 115, 22, 0.12);
}
.lp-history-title {
  margin: 0 0 10px;
  font-size: 1.02rem;
  font-weight: 900;
  color: #9a3412;
  line-height: 1.45;
}
.lp-history-desc {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: #7c2d12;
  line-height: 1.7;
}
.lp-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-history-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #7c2d12;
}
.lp-history-list i {
  color: #f97316;
  margin-top: 2px;
  flex-shrink: 0;
}
.lp-section-title {
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
  margin: 0 0 16px;
  color: var(--text);
}
.lp-compare { margin: 32px 0 8px; }
.lp-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lp-compare-card {
  border-radius: 10px;
  padding: 18px 16px;
  border: 1px solid var(--border);
  background: #fff;
  position: relative;
}
.lp-compare-card--free { background: #f9fafb; }
.lp-compare-card--pro {
  border-color: var(--primary-soft);
  box-shadow: 0 6px 22px rgba(249, 115, 22, 0.16);
  transform: translateY(-2px);
}
.lp-compare-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  background: linear-gradient(135deg, var(--gold) 0%, #e69500 100%);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
}
.lp-compare-name {
  font-size: .95rem;
  margin: 0 0 6px;
  font-weight: 800;
}
.lp-compare-price {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--primary-dark);
  margin: 0 0 12px;
}
.lp-compare-price span {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-sub);
}
.lp-compare-card ul {
  margin: 0;
  padding-left: 1.15em;
  font-size: .82rem;
  line-height: 1.65;
  color: var(--text);
}
.lp-compare-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #fed7aa;
  background: #fff7ed;
}
.lp-compare-note-title {
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #9a3412;
}
.lp-compare-note-list {
  margin: 0;
  padding-left: 1.15em;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #7c2d12;
}
.lp-cta {
  text-align: center;
  padding: 32px 16px 18px;
  margin-top: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff8e6 0%, #ffffff 100%);
  border: 1px solid #fde68a;
}
.lp-cta-lead {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1.55;
}
.lp-line-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: min(320px, 100%);
  padding: 16px 36px;
  background: linear-gradient(135deg, #06c755 0%, #05a546 100%);
  color: #fff !important;
  border: none;
  border-radius: 50px;
  font-family: var(--font);
  font-size: 1.12rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(6, 199, 85, 0.4);
  transition: transform .2s, box-shadow .2s;
}
.lp-line-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(6, 199, 85, 0.48);
  color: #fff;
}
.lp-line-btn:focus-visible {
  outline: 3px solid var(--primary-soft);
  outline-offset: 3px;
}
.lp-cta-note {
  font-size: .8rem;
  color: var(--text-sub);
  margin: 8px 0 0;
}
@media (max-width: 560px) {
  .lp-compare-grid { grid-template-columns: 1fr; }
  .lp-line-btn--hero {
    min-width: 100%;
    font-size: 1rem;
  }
  .lp-compare-card--pro {
    transform: none;
  }
}
@media (min-width: 561px) {
  br.sp-br { display: none; }
}

.plan-btn {
  width: 100%; padding: 12px; border: none; border-radius: 50px;
  font-family: var(--font); font-size: .95rem; font-weight: 700; cursor: pointer; transition: all .2s;
}
.plan-btn-current { background: var(--bg); color: var(--text-sub); cursor: default; border: 1px solid var(--border); }
.plan-btn-pro {
  background: linear-gradient(135deg, var(--gold) 0%, #e69500 100%);
  color: var(--white); box-shadow: 0 4px 14px rgba(249,171,0,.35);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.plan-btn-pro:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249,171,0,.45); }
.plan-btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
.modal-note { font-size: .78rem; color: var(--text-sub); text-align: center; padding: 4px 0; }

/* ── モーダルフッター（固定） ── */
.modal-footer {
  display: flex;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;             /* 圧縮させない */
  background: var(--white);
}
.modal-footer--plan {
  flex-wrap: wrap;
  align-items: stretch;
}
.modal-pro-app-btn {
  flex: 1;
  min-width: 140px;
  padding: 12px 14px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--gold) 0%, #e69500 100%);
  color: #fff;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 12px rgba(249, 171, 0, 0.35);
}
.modal-pro-app-btn:hover {
  filter: brightness(1.05);
}
.modal-pro-app-btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
.modal-close-btn {
  flex: 1; padding: 12px; border: 2px solid var(--border); border-radius: 50px;
  background: var(--white); font-family: var(--font); font-size: .95rem; font-weight: 700;
  color: var(--text-sub); cursor: pointer; transition: all .2s;
}
.modal-close-btn:hover { border-color: var(--primary); color: var(--primary); }
.modal-close-btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
.modal-detail-btn {
  flex: 2; padding: 12px; border: none; border-radius: 50px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white); font-family: var(--font); font-size: .95rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .2s; box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}
.modal-detail-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45); }
.modal-detail-btn:focus-visible {
  outline: 3px solid var(--primary-soft);
  outline-offset: 2px;
}

/* ── 履歴モーダル ── */
.history-modal-box {
  max-width: 520px;
  width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.history-modal-plan-hint {
  font-size: 0.78rem;
  color: var(--text-sub);
  margin: 6px 0 0;
  font-weight: 500;
}
.history-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  flex-shrink: 0;
  background: var(--white);
}
.history-tab {
  flex: 1;
  padding: 12px 10px;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-sub);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.history-tab:hover {
  color: var(--text);
}
.history-tab--active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.history-modal-body {
  flex: 1;
  min-height: 120px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding-top: 8px;
}
.modal-footer--history {
  justify-content: flex-end;
}
.history-empty {
  text-align: center;
  color: var(--text-sub);
  font-size: 0.9rem;
  padding: 28px 16px;
}
.history-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--bg);
}
.history-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.history-card-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.35;
}
.history-card-badge-fav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid rgba(234, 179, 8, 0.55);
  background: rgba(254, 249, 195, 0.55);
  color: #a16207;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  white-space: nowrap;
}
.history-card-meta {
  font-size: 0.78rem;
  color: var(--text-sub);
  margin: 0 0 10px;
}
.history-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.history-mini-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: border-color 0.2s, background 0.2s;
}
.history-mini-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.history-mini-btn--primary {
  border-color: var(--primary);
  background: rgba(249, 115, 22, 0.08);
  color: var(--primary);
}
.history-mini-btn--secondary {
  border-color: rgba(249, 115, 22, 0.35);
  background: rgba(255, 247, 237, 0.85);
  color: #9a3412;
}
.history-mini-btn--fav {
  border-color: rgba(234, 179, 8, 0.4);
  background: rgba(254, 249, 195, 0.45);
  color: #92400e;
}
.history-mini-btn--danger {
  border-color: rgba(220, 38, 38, 0.35);
  color: #b91c1c;
}
.history-mini-btn--danger:hover {
  border-color: #dc2626;
  background: rgba(254, 226, 226, 0.5);
}
.history-mini-btn--fav-on {
  border-color: rgba(234, 179, 8, 0.6);
  background: rgba(254, 249, 195, 0.6);
  color: #a16207;
}
.history-limit-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 12px);
  width: min(92vw, 640px);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #fdba74;
  background: rgba(255, 247, 237, 0.97);
  color: #9a3412;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(120, 53, 15, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1400;
}
.history-limit-toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================
   レスポンシブ
   ============================================ */
@media (max-width: 860px) {
  /* 幅だけ狭いビューに追従。パディングは印刷・PDFと同じ 5mm 6mm のまま（キャプチャの一貫性） */
  .a4-sheet { width: 100%; max-width: 186mm; min-height: auto; padding: 5mm 6mm; box-sizing: border-box; }
  .a4-wrapper { padding: 16px 8px; }
  /* 50音・初級コンパクトは常に5列。それ以外のひらがなグリッドのみ4列に落とす */
  .hiragana-grid:not(.hiragana-grid--beginner-compact) {
    grid-template-columns: repeat(4, 1fr);
  }
  .steps-grid { flex-direction: column; }
  .how-step-arrow { transform: rotate(90deg); }
  .features-grid { grid-template-columns: repeat(2,1fr); }
  .plan-cta-inner { flex-direction: column; text-align: center; }
  .plan-cta-desc { margin: 0 auto; }
  .maze-card { padding: 3px 2px 6px; }
  .maze-svg { min-height: 92mm; max-height: 106mm; }
  .maze-label { font-size: 10.5px; stroke-width: 3.2px; }
}

@media (max-width: 600px) {
  .history-limit-toast {
    bottom: 14px;
    font-size: 0.8rem;
    padding: 9px 12px;
  }
  .maze-card {
    padding: 3px 2px 6px;
    border-radius: 9px;
  }
  .maze-svg {
    min-height: 82mm;
    max-height: 98mm;
    border-radius: 7px;
  }
  .maze-label {
    font-size: 10px;
    stroke-width: 3px;
  }
  .maze-answer-row {
    margin-top: 5px;
    gap: 8px;
  }
  .maze-answer-box {
    width: 60px;
    height: 60px;
  }
  .maze-card--hiragana .maze-svg {
    min-height: 76mm;
    max-height: 90mm;
  }
  .maze-card--hiragana .maze-answer-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin: 6px 0 0;
    overflow: hidden;
  }
  .maze-card--hiragana .maze-answer-box {
    width: 40px;
    height: 40px;
    max-width: 40px;
    flex: 0 0 40px;
  }
  .header-nav .nav-link { display: none; }
  .option-grid { grid-template-columns: repeat(2,1fr); gap: 8px; padding: 14px 12px; }
  .option-grid.option-grid--four { grid-template-columns: repeat(2, 1fr); }
  .option-grid.option-grid--custom-mode { grid-template-columns: repeat(2, 1fr); }
  .custom-remove-btn { width: 100%; }
  .option-btn { padding: 14px 6px; }
  .option-icon { font-size: 1.6rem; }
  .option-label { font-size: .85rem; }
  .option-desc  { font-size: .68rem; }
  .settings-row { grid-template-columns: 1fr; padding: 14px 16px; }
  .settings-row .setting-item { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .setting-select { width: 100%; }
  .settings-row--katakana .setting-item--full,
  .settings-row--kana-mode .setting-item--full,
  .settings-row--kanji .setting-item--full,
  .settings-row--question-count .setting-item--full,
  .settings-row--answer .setting-item--full { gap: 8px; }
  .settings-row--katakana .setting-label--checkbox,
  .settings-row--answer .setting-label--checkbox { width: 100%; align-items: flex-start; }
  .settings-row--katakana .setting-hint,
  .settings-row--kana-mode .setting-hint,
  .settings-row--kanji .setting-hint,
  .settings-row--question-count .setting-hint,
  .settings-row--answer .setting-hint { margin-top: 2px; }
  .generate-btn { padding: 16px 32px; font-size: 1rem; }
  .preview-controls { flex-direction: column; align-items: stretch; }
  .preview-actions { justify-content: center; }
  /* プリントヘッダー：タイトル左・名前・日付を同一行・右寄せ（PCレイアウトは @media (max-width: 860px) 以前のまま） */
  .print-header-main-row {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px 8px;
    flex-wrap: wrap;
  }
  .print-header .print-header-left {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }
  .print-header .print-logo--header {
    width: 11.2mm;
    max-width: 20%;
  }
  .print-header .print-title-block .print-title {
    font-size: clamp(0.92rem, 4vw, 1.2rem);
    line-height: 1.12;
    letter-spacing: 0.02em;
  }
  .print-header .print-title-block .print-category {
    font-size: clamp(0.55rem, 2.6vw, 0.65rem);
    margin-bottom: 2px;
    line-height: 1.2;
  }
  .print-header-fields {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
    min-width: 0;
    margin-left: auto;
    grid-template-columns: 1fr;
    justify-content: stretch;
    align-items: flex-end;
    gap: 8px 0;
  }
  .print-header-field {
    font-size: 1.24rem;
    gap: 3px;
  }
  .print-header-field--name {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }
  .print-header-field--date {
    min-width: 0;
    width: 100%;
    justify-self: stretch;
    justify-content: flex-end;
  }
  .print-field-line--name {
    min-width: 0;
    max-width: none;
    min-height: 40px;
    height: 40px;
  }
  .print-header-field--date {
    flex: 1 1 auto;
    gap: 4px;
  }
  .print-date-blank--month,
  .print-date-blank--day {
    width: 2.5rem;
    min-width: 2.2rem;
    height: 40px;
  }
  .print-date-suffix {
    font-size: 1.06rem;
    padding-bottom: 0;
  }
  .print-info-block { align-items: flex-start; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .plan-cards { grid-template-columns: 1fr; }
  .modal-box { max-height: 92vh; border-radius: 12px; }
  .modal-header { padding: 16px 16px 12px; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 12px 16px; flex-direction: column; }
  .modal-detail-btn,
  .modal-close-btn,
  .modal-pro-app-btn { flex: none; width: 100%; min-width: 0; }
  .faq-q { font-size: .9rem; padding: 14px 16px; }
  .faq-a { padding: 0 16px 14px 36px; }

  /* ── ヒーロー スマホ調整 ── */
  .sp-only { display: inline; }
  .hero-list { padding: 14px 16px; width: 100%; }
  .hero-list li { font-size: .88rem; }
  .hero-stats { gap: 20px; }
  .stat-num { font-size: 1.6rem; }

  /* ── 誰向け？ボックス スマホ調整 ── */
  .for-whom-box { padding: 16px; }
  .for-whom-list li { font-size: .88rem; }

  /* ── ステップカード スマホ調整 ── */
  .how-step { padding: 24px 14px 18px; }
  .how-step-desc { font-size: .82rem; }
  .section-title { line-height: 1.4; }

  /* ── 機能カード スマホ調整 ── */
  .feature-desc { font-size: .78rem; line-height: 1.7; }
}

/* ============================================
   モーション軽減設定
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .nav-btn-premium:hover,
  .hero-cta:hover,
  .feature-card:hover,
  .option-btn:hover,
  .generate-btn:hover,
  .plan-cta-btn:hover,
  .plan-btn-pro:hover,
  .modal-detail-btn:hover {
    transform: none !important;
  }
}

/* ============================================
   印刷用スタイル
   ============================================ */
@media print {
  /*
   * 用紙余白は @page のみで固定（10〜15mm）。コンテンツ幅は印刷領域いっぱいに合わせ、
   * 画面用の 794px / max-width:210mm との二重指定でズレないようにする。
   */
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  /* 背景色・枠線を可能な限りそのまま印刷 */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-sizing: border-box;
  }

  html {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    font-size: 9.5pt;
    display: block !important;
  }

  /* ヘッダー・操作パネル・モーダル等 */
  .no-print {
    display: none !important;
  }

  /* 誤って印刷されないよう UI 系を明示的に非表示（.no-print 漏れ対策） */
  .site-header,
  .hero-section,
  .how-to-section,
  .control-panel,
  .generate-section,
  .preview-controls,
  .plan-cta-section,
  .faq-section,
  .site-footer,
  .loading-overlay,
  .modal-overlay {
    display: none !important;
  }

  .generator-section.section {
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .generator-section > .section-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .print-target,
  .preview-section {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* 高さ固定や隠しを解除し、1ページ目下部の欠けを防ぐ */
  .generator-section,
  .section-inner,
  .preview-section,
  .print-target,
  .print-area,
  .a4-wrapper,
  .a4-sheet,
  .print-page {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* @page 余白の内側いっぱい（物理210mm 固定はせず、印刷ボックス幅に一致） */
  .print-area,
  .a4-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .a4-sheet {
    /* 印刷可能幅いっぱい（@page の margin 内側）。固定 px は使わない */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    /* 用紙余白は @page に任せ、シート内は軽い内側余白（1ページ5問を収めるためやや詰める） */
    padding: 2.2mm 3mm !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    background: #fff !important;
    box-sizing: border-box !important;
    /* flex だと Safari 等で break-inside が効きにくいため block に */
    display: block !important;
    /* hidden だと子の改ページが欠けることがあるため visible のまま */
    overflow: visible !important;
    text-align: left !important;
  }

  /* 明示的な改ページ（最終ページの後は余白ページを出さない） */
  .print-page:not(:last-child) {
    break-after: page;
    page-break-after: always;
  }
  .print-page {
    overflow: visible !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  .questions-grid {
    display: block !important;
    min-height: 0 !important;
    gap: 0 !important;
  }

  /*
   * ページ別レイアウト（仕様）
   * - 通常コンテンツ：各 .print-page は5問（.print-page--cards-5）。1ページ目はフルヘッダー＋説明あり。
   * - .print-page--continuation … 続きは .print-continuation-strip のみ。
   * - .question-card-content は複数ブロックを左列に回り込ませないためのラッパ（構造上の必須）。
   */
  .print-continuation-strip {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    padding: 4pt 6pt !important;
    margin-bottom: 6pt !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-left: 3pt solid #f97316 !important;
    background: #fff7ed !important;
    border-radius: 0 4pt 4pt 0 !important;
  }
  .print-continuation-kicker {
    font-size: 7pt !important;
    color: #5f6368 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0.02em !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
  }
  .print-continuation-title {
    font-size: 9.5pt !important;
    font-weight: 800 !important;
    color: #c2410c !important;
    margin-top: 1pt !important;
  }
  .print-continuation-hint {
    margin: 3pt 0 0 !important;
    font-size: 7.8pt !important;
    line-height: 1.3 !important;
    color: #3c4043 !important;
  }

  /* ── ⑥ 問題カード：改ページ制御（カード途中分割はしない） */
  .question-card {
    display: grid !important;
    grid-template-columns: 15pt 1fr !important;
    align-items: start !important;
    column-gap: 4pt !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    border: 1.5pt solid #dadce0 !important;
    padding: var(--print-card-padding-y) var(--print-card-padding-x) !important;
    overflow: visible !important;
  }
  /* 主役（問題文・記入欄）を活かすため、周辺要素のみ整える */
  .question-card .choice-label,
  .question-card .emoji-question-prompt,
  .question-card .adv-prompt-sub {
    font-size: var(--print-side-font-size) !important;
    line-height: var(--print-side-line-height) !important;
    letter-spacing: 0.01em !important;
    color: #5f6368 !important;
  }
  .question-card .emoji-question-prompt {
    margin-bottom: var(--print-gap-side-to-main) !important;
  }
  .question-card .adv-prompt-sub {
    margin-bottom: var(--print-gap-sub-to-main) !important;
  }
  .question-card .choices-row {
    margin-top: var(--print-gap-row-tight) !important;
  }
  .question-card .answer-line {
    height: var(--print-answer-line-height) !important;
    margin-top: var(--print-gap-main-to-write) !important;
  }
  .question-card .hira-write {
    margin-top: var(--print-gap-hira-write-top) !important;
  }
  .questions-grid .question-card:not(:last-child) {
    margin-bottom: var(--print-card-separator-gap) !important;
  }
  .print-page--cards-5 .question-card {
    padding: var(--print-cards-5-padding-y) var(--print-cards-5-padding-x) !important;
  }
  .print-page--cards-5 .question-card:not(:last-child) {
    margin-bottom: var(--print-cards-5-separator-gap) !important;
  }
  .question-card-content {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--print-card-inner-gap) !important;
    min-width: 0 !important;
  }
  .print-page--cards-5 .question-card-content {
    gap: var(--print-cards-5-inner-gap) !important;
  }
  .maze-svg {
    min-height: 72mm !important;
    max-height: 86mm !important;
  }
  .maze-card {
    padding: 1.2mm 1.2mm 1.8mm !important;
    border-radius: 6px !important;
    border: 1pt solid #fed7aa !important;
    background: #ffffff !important;
  }
  .maze-card--normal .maze-svg {
    min-height: 72mm !important;
    max-height: 88mm !important;
  }
  .maze-card--hiragana .maze-svg {
    min-height: 66mm !important;
    max-height: 82mm !important;
  }
  .maze-answer-row {
    margin-top: 1.1mm !important;
    gap: 1.8mm !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  .maze-answer-box {
    width: 18mm;
    height: 18mm;
    border-width: 2pt;
    border-color: #475569 !important;
    border-radius: 1.2mm !important;
  }
  .maze-label {
    font-size: 8.6pt !important;
    stroke-width: 2.8pt !important;
  }
  .maze-card--hiragana .maze-char-on-path {
    font-size: 11pt !important;
    stroke-width: 1.6pt !important;
  }
  .maze-card--hiragana .maze-answer-row {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 1.4mm !important;
  }
  .maze-card--hiragana .maze-answer-box {
    width: 14mm !important;
    height: 14mm !important;
    flex: 0 0 14mm !important;
  }
  .maze-start {
    r: 2.4mm;
  }
  .maze-goal {
    width: 4.8mm !important;
    height: 4.8mm !important;
  }
  .sentence-illust-block {
    margin: 0.5mm 0 1.2mm !important;
  }
  .sentence-illust-svg {
    width: 18mm !important;
    height: 18mm !important;
  }
  .sentence-illust-frame {
    stroke-width: 1.2pt !important;
  }
  .sentence-illust-line,
  .sentence-illust-head {
    stroke-width: 1.6pt !important;
  }

  .questions-grid .question-card:last-child {
    margin-bottom: 0 !important;
  }
  .question-num {
    width: 14pt !important;
    height: 14pt !important;
    font-size: 7pt !important;
    margin: 0 !important;
    align-self: start !important;
  }
  .print-page--first .print-header {
    margin-bottom: var(--print-first-header-gap) !important;
    padding-bottom: 1.4mm !important;
  }
  .print-page--first .print-instruction {
    font-size: 7.4pt !important;
    line-height: 1.3 !important;
    margin-bottom: var(--print-first-instruction-gap) !important;
    padding: 4.5pt 6.5pt !important;
  }
  .print-page--first .question-card {
    margin-top: 0.2mm !important;
  }

  .question-card .choice-sentence,
  .question-card .desc-sentence {
    margin-bottom: 0.25pt !important;
    font-size: 9.5pt !important;
    line-height: 1.18 !important;
  }

  .question-card .kanji-sentence-line--prominent {
    font-size: 11pt !important;
    line-height: 1.42 !important;
    margin-bottom: 2mm !important;
  }
  .question-card .kanji-sentence-line--nowrap {
    overflow-x: visible !important;
  }
  .question-card .kanji-stack__top {
    font-size: 7.6pt !important;
  }
  .question-card .kanji-reading-blank-line {
    font-size: 7pt !important;
    letter-spacing: 0.14em !important;
  }
  .question-card .kanji-stack__yomi-read--writing {
    font-size: 6.5pt !important;
    color: #888888 !important;
  }
  .question-card .joshi-inline-blank {
    min-width: 4.6em !important;
    letter-spacing: 0.08em !important;
  }
  .question-card .kanji-stack__bottom--kanji.kanji-stack__bottom--primary {
    font-size: 10.8pt !important;
    line-height: 1.22 !important;
  }
  .question-card .kanji-blank-square {
    width: 16mm !important;
    height: 16mm !important;
    min-width: 16mm !important;
    min-height: 16mm !important;
    border: 1.2pt solid #333333 !important;
    background: #ffffff !important;
  }
  .question-card .kanji-masu--kanji {
    width: 16mm !important;
    height: 16mm !important;
    min-width: 16mm !important;
    min-height: 16mm !important;
    border: 1.2pt solid #333333 !important;
    background: #ffffff !important;
  }
  .question-card .kanji-masu--kanji::before,
  .question-card .kanji-masu--kanji::after {
    background: #333333 !important;
  }
  .question-card .kanji-stack__top--trace {
    color: #b8956a !important;
    font-size: 9.5pt !important;
    line-height: 1.22 !important;
  }

  .question-card .hint-line {
    font-size: 7.4pt !important;
    line-height: 1.25 !important;
    color: #5f6368 !important;
    margin-bottom: 2pt !important;
  }

  .question-card .trace-area {
    margin-top: 0 !important;
    font-size: 15pt !important;
    line-height: 1.12 !important;
  }

  .question-card .trace-second-row {
    margin-top: 0.6pt !important;
  }

  .question-card .choices-row {
    gap: 1pt !important;
  }

  .question-card .choice-item {
    font-size: 9pt !important;
    padding: 1pt 6pt !important;
  }

  .question-card .hiragana-grid {
    margin-top: 0 !important;
  }

  .question-card .emoji-question-row,
  .question-card .emoji-question-row--tight {
    gap: 4pt !important;
  }

  .question-card .emoji-question-prompt {
    margin-bottom: 1pt !important;
    line-height: 1.16 !important;
  }
  .question-card.question.custom .emoji-question-body {
    margin-top: 0 !important;
  }
  .question-card.question.custom .seikatsu-trace {
    font-size: 30pt !important;
    line-height: 1 !important;
  }
  .question-card.question.custom .seikatsu-char-col .hira-write {
    width: 18mm !important;
    height: 18mm !important;
  }
  .question-card.question.custom .seikatsu-char-gap {
    width: 18mm !important;
    height: 18mm !important;
    margin: 0 1mm !important;
  }

  .question-card .adv-prompt {
    margin-bottom: 2pt !important;
  }

  .question-card .adv-prompt-sub {
    margin-bottom: 2pt !important;
    line-height: 1.2 !important;
  }
  .answer-line {
    height: 20px !important;
    margin-top: 1px !important;
  }

  /* 上級ジャンル別：さらに縦密度を上げる（可読性は維持） */
  .question.joshi .advanced-compact--joshi,
  .question.sentence .advanced-compact--sentence,
  .question.narabikae .advanced-compact--narabikae {
    gap: 0.45mm !important;
  }
  .question.joshi .advanced-compact--joshi .desc-sentence,
  .question.sentence .advanced-compact--sentence .choice-sentence,
  .question.narabikae .advanced-compact--narabikae .emoji-question-prompt {
    margin-bottom: 0 !important;
    line-height: 1.14 !important;
  }
  .question.sentence .advanced-compact--sentence .answer-line,
  .question.narabikae .advanced-compact--narabikae .answer-line {
    height: 16px !important;
    margin-top: 0 !important;
  }
  .question.narabikae .advanced-compact--narabikae .adv-prompt-sub {
    margin-bottom: 1pt !important;
    line-height: 1.15 !important;
  }

  /* 助詞・中級（PC @media print）：PDFモバイル出力と同等（約1.7倍） */
  .question-card.question.joshi:has(.choice-sentence) {
    padding: 0.45pt 1.6pt !important;
    align-items: start !important;
  }
  .question-card.question.joshi:has(.choice-sentence) .choice-sentence {
    font-size: 16.2pt !important;
    line-height: 1.22 !important;
    margin-bottom: 0 !important;
  }
  .question-card.question.joshi:has(.choice-sentence) .choices-row {
    gap: 0.8pt !important;
    margin-top: 0.8pt !important;
  }
  .question-card.question.joshi:has(.choice-sentence) .choice-item {
    font-size: 13.6pt !important;
    padding: 1.6pt 9.8pt !important;
    line-height: 1.12 !important;
  }
  .question-card.question.joshi:has(.choice-sentence) .choice-label {
    font-size: 7.2pt !important;
  }
  .question-card.question.joshi:has(.choice-sentence) .question-card-content {
    gap: 0.35mm !important;
  }
  .questions-grid > .question-card.question.joshi:has(.choice-sentence):not(:last-child) {
    margin-bottom: 0.12mm !important;
  }

  /* 助詞・上級（PC @media print）：本文を拡大しつつ、行間とカード間余白を確保 */
  .question-card.question.joshi:has(.advanced-compact--joshi) {
    padding: 0.45pt 1.6pt !important;
    align-items: start !important;
    margin-bottom: 7.5px !important; /* 約2mm */
  }
  .question-card.question.joshi .advanced-compact--joshi {
    gap: 0.45mm !important;
  }
  .question-card.question.joshi .advanced-compact--joshi .desc-sentence {
    font-size: 18pt !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
  }
  .question-card.question.joshi:has(.advanced-compact--joshi) .joshi-inline-blank {
    min-width: 9.2em !important;
    margin-left: -0.75em !important;
    margin-right: -0.35em !important;
    line-height: 1.2 !important;
  }
  .questions-grid > .question-card.question.joshi:has(.advanced-compact--joshi):not(:last-child) {
    margin-bottom: 7.5px !important; /* 約2mm */
  }

  /* 50音：PDFモバイル出力と同等（中級/上級を拡大） */
  .question-card.question.hiragana:has(.emoji-question-row:not(.emoji-question-row--tight)) {
    padding: 0.45pt 1.7pt !important;
  }
  .question-card.question.hiragana:has(.emoji-question-row:not(.emoji-question-row--tight)) .emoji-question-row {
    gap: 3.2pt !important;
  }
  .question-card.question.hiragana:has(.emoji-question-row:not(.emoji-question-row--tight)) .emoji-large {
    font-size: 34.5pt !important;
    line-height: 1 !important;
  }
  .question-card.question.hiragana:has(.emoji-question-row:not(.emoji-question-row--tight)) .emoji-question-prompt {
    font-size: 6.6pt !important;
    line-height: 1.28 !important;
    margin-bottom: 1.4pt !important;
  }
  .question-card.question.hiragana:has(.emoji-question-row:not(.emoji-question-row--tight)) .choice-item {
    font-size: 18pt !important;
    padding: 1.8pt 10pt !important;
    min-width: 86px !important;
  }
  .question-card.question.hiragana:has(.emoji-question-row--tight) {
    padding: 0.48pt 1.8pt !important;
  }
  .question-card.question.hiragana:has(.emoji-question-row--tight) .emoji-question-row--tight {
    gap: 3.6pt !important;
  }
  .question-card.question.hiragana:has(.emoji-question-row--tight) .emoji-large {
    font-size: 17.2pt !important;
  }
  .question-card.question.hiragana:has(.emoji-question-row--tight) .emoji-question-prompt {
    display: none !important;
  }
  .question-card.question.hiragana:has(.emoji-question-row--tight) .seikatsu-trace {
    font-size: 48pt !important;
    line-height: 1 !important;
  }
  .question-card.question.hiragana:has(.emoji-question-row--tight) .hira-write {
    width: 27mm !important;
    height: 27mm !important;
    min-width: 27mm !important;
    min-height: 27mm !important;
    border-width: 2pt !important;
    border-color: #7b8794 !important;
  }

  /* 50音上級のみ：単語を1行・約1/1.5倍に縮小（.hiragana-advanced-trace-row が付くカード） */
  .question-card.question.hiragana:has(.hiragana-advanced-trace-row) .emoji-question-row--tight {
    gap: var(--print-hiragana-adv-row-gap-body) !important;
  }
  .question-card.question.hiragana:has(.hiragana-advanced-trace-row) .emoji-large {
    font-size: var(--print-hiragana-adv-emoji-pt) !important;
  }
  .question-card.question.hiragana:has(.hiragana-advanced-trace-row) .hiragana-advanced-trace-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: var(--print-hiragana-adv-col-gap) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .question-card.question.hiragana:has(.hiragana-advanced-trace-row) .seikatsu-char-col {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 var(--print-hiragana-adv-col-margin-x) !important;
  }
  .question-card.question.hiragana:has(.hiragana-advanced-trace-row) .seikatsu-trace {
    font-size: var(--print-hiragana-adv-trace-font) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    letter-spacing: var(--print-hiragana-adv-trace-letter-spacing) !important;
  }
  .question-card.question.hiragana:has(.hiragana-advanced-trace-row) .hira-write {
    width: var(--print-hiragana-adv-write-mm) !important;
    height: var(--print-hiragana-adv-write-mm) !important;
    min-width: var(--print-hiragana-adv-write-mm) !important;
    min-height: var(--print-hiragana-adv-write-mm) !important;
    border-width: 2pt !important;
    border-color: #7b8794 !important;
  }

  /* 並び替え：PDFモバイル出力と同等 */
  .question-card.question.narabikae {
    padding: 0.45pt 1.6pt !important;
  }
  .question-card.question.narabikae .question-card-content {
    gap: 0.8mm !important;
  }
  .question-card.question.narabikae .emoji-question-prompt {
    font-size: 14.25pt !important;
    line-height: 1.24 !important;
    margin-bottom: var(--print-gap-sub-to-main) !important;
  }
  .question-card.question.narabikae .choices-row {
    gap: 1pt !important;
    margin-top: 0.8pt !important;
  }
  .question-card.question.narabikae .choice-item {
    font-size: 8.1pt !important;
    padding: 0.5pt 4pt !important;
    line-height: 1.1 !important;
  }
  .question-card.question.narabikae .adv-prompt-sub {
    display: none !important;
  }
  .question-card.question.narabikae .answer-line {
    height: var(--print-answer-line-height) !important;
    margin-top: var(--print-gap-main-to-write) !important;
  }
  .question-card.question.narabikae .narabikae-layout {
    gap: var(--print-narabikae-layout-gap) !important;
  }
  .question-card.question.narabikae .narabikae-choices-row {
    gap: var(--print-narabikae-choice-gap) !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  .question-card.question.narabikae .narabikae-choices-row .choice-item {
    font-size: var(--print-narabikae-choice-font-size) !important;
    padding: var(--print-narabikae-choice-pad-y) var(--print-narabikae-choice-pad-x) !important;
    line-height: 1.18 !important;
  }
  .question-card.question.narabikae .narabikae-answer-line {
    height: var(--print-narabikae-answer-height) !important;
    margin-top: var(--print-narabikae-answer-margin-top) !important;
    border-bottom-width: var(--print-narabikae-answer-border-width) !important;
    border-bottom-color: #c2410c !important;
  }

  /* 文章問題：全レベル +4 */
  .question-card.question.sentence {
    padding: 0.45pt 1.6pt !important;
  }
  .question-card.question.sentence .question-card-content {
    gap: 0.35mm !important;
  }
  .question-card.question.sentence .choice-sentence {
    font-size: 8.9pt !important;
    line-height: 1.14 !important;
    margin-bottom: 0 !important;
  }
  .question-card.question.sentence .emoji-question-prompt {
    font-size: 7pt !important;
    line-height: 1.14 !important;
    margin-bottom: 0 !important;
  }
  .question-card.question.sentence .choice-item {
    font-size: 8.1pt !important;
    padding: 0.5pt 4pt !important;
  }
  .question-card.question.sentence .answer-line {
    height: 16px !important;
    margin-top: 0 !important;
  }
  .question-card.question.sentence .sentence-illust-block {
    margin: 0.3mm 0 0.8mm !important;
  }
  .question-card.question.sentence .sentence-illust-svg {
    width: 15mm !important;
    height: 15mm !important;
  }

  /* 漢字（読み・中級） +2（reading のみ） */
  .question-card.question.kanji .emoji-question-prompt:has(+ .choices-row .choice-label) {
    font-size: 6.8pt !important;
    line-height: 1.12 !important;
    margin-bottom: 0 !important;
  }
  .question-card.question.kanji .emoji-question-prompt:has(+ .choices-row .choice-label) + .choices-row {
    gap: 0.45pt !important;
  }
  .question-card.question.kanji .emoji-question-prompt:has(+ .choices-row .choice-label) + .choices-row .choice-item {
    font-size: 8pt !important;
    padding: 0.45pt 4pt !important;
  }

  /* 問題数が多いプリント向け：やや小さめ（助詞は上書きのため除外） */
  .print-page--total-15 .question-card:not(.joshi) .choice-sentence,
  .print-page--total-20 .question-card:not(.joshi) .choice-sentence,
  .print-page--total-30 .question-card:not(.joshi) .choice-sentence,
  .print-page--total-15 .question-card:not(.joshi) .desc-sentence,
  .print-page--total-20 .question-card:not(.joshi) .desc-sentence,
  .print-page--total-30 .question-card:not(.joshi) .desc-sentence {
    font-size: 9.3pt !important;
  }

  /* ── ⑦ フォント・色を印刷向けに最適化（必要最低限で一段小さく） ── */
  .print-title {
    font-size: 15pt !important;
  }
  .print-header .print-header-left {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }
  .print-logo--header {
    width: 11.2mm !important;
    max-width: 20% !important;
    height: auto !important;
    opacity: 0.88 !important;
    flex-shrink: 0 !important;
  }
  .print-category {
    font-size: 7.5pt !important;
    letter-spacing: 0.02em !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
  }
  .print-instruction {
    font-size: 8pt !important;
    padding: 1pt 4pt !important;
    margin-bottom: 1.5mm !important;
    line-height: 1.3 !important;
    border-left: 3pt solid #f97316 !important;
    background: #fff7ed !important;
  }
  /* 1ページ目：5問収容のため説明・ヘッダーを詰める */
  .print-page--first .print-header {
    margin-bottom: 0.6mm !important;
    padding-bottom: 0.5mm !important;
  }
  .print-page--first .print-instruction {
    padding: 3pt 6pt !important;
    margin-bottom: 2.5pt !important;
    font-size: 7.6pt !important;
    line-height: 1.28 !important;
  }
  .print-page--first .question-card-content {
    gap: 0.9mm !important;
  }
  .print-page--first .hira-group-label {
    font-size: 6.9pt !important;
    margin-bottom: 0.5pt !important;
    line-height: 1.2 !important;
  }

  /* ── ⑧ なぞり書き文字：色を明確に出す ── */
  .trace-target {
    color: #fdba74 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .trace-char {
    font-size: 17pt !important;
  }
  .hira-trace {
    color: #fdba74 !important;
    font-size: 17pt !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── ⑨ 書き取りマス目：印刷でも枠線を表示 ── */
  .write-box,
  .hira-write {
    border: 1.5pt solid #dadce0 !important;
    background: #fff !important;
  }
  .seikatsu-char-gap {
    width: 12mm !important;
    height: 12mm !important;
    margin: 0 0.8mm !important;
  }
  .write-box::after,
  .hira-write::after {
    background:
      linear-gradient(to right,  transparent calc(50% - 0.5pt), #fed7aa calc(50% - 0.5pt), #fed7aa calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
      linear-gradient(to bottom, transparent calc(50% - 0.5pt), #fed7aa calc(50% - 0.5pt), #fed7aa calc(50% + 0.5pt), transparent calc(50% + 0.5pt)) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── ⑩ 選択肢ボタン：枠線を印刷でも表示 ── */
  .choice-item {
    border: 1.5pt solid #ffedd5 !important;
    background: #fff7ed !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .blank-box {
    border: 1.5pt solid #f97316 !important;
    background: #fff7ed !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── ⑪ 解答記述欄 ── */
  .answer-line {
    border-bottom: 1.5pt solid #dadce0 !important;
  }
  .word-answer-line {
    border-bottom: 1.5pt solid #ffedd5 !important;
  }

  /* ── ⑫ プリントヘッダーの区切り線（1ページ目の .print-page--first にのみ存在） ── */
  .print-header {
    flex-shrink: 0 !important;
    border-bottom: 2pt solid #f97316 !important;
    margin-bottom: 1mm !important;
    padding-bottom: 1mm !important;
  }
  .print-info-block {
    gap: 9pt !important;
  }
  .print-info-row {
    gap: 8pt !important;
  }
  .print-header-fields {
    gap: 10pt 14pt !important;
    max-width: 80% !important;
    grid-template-columns: minmax(70mm, 1fr) auto !important;
    width: 100% !important;
  }
  .print-header-field {
    font-size: 15pt !important;
  }
  .print-header-field--date {
    min-width: 32mm !important;
    justify-self: end !important;
  }
  .print-field-line--name {
    min-height: 16mm !important;
    height: 16mm !important;
    min-width: 70mm !important;
    max-width: none !important;
    width: 100% !important;
    border-bottom: 1.5pt solid #999 !important;
  }
  .print-date-blank {
    min-height: 16mm !important;
    height: 16mm !important;
    border-bottom: 1.5pt solid #999 !important;
  }
  .print-date-blank--month,
  .print-date-blank--day {
    width: 17mm !important;
    min-width: 15mm !important;
  }
  .print-date-suffix {
    font-size: 15pt !important;
  }
  .info-line {
    width: 52mm !important;
    min-width: 48mm !important;
    min-height: 7mm !important;
    height: 7mm !important;
    border-bottom: 1.5pt solid #999 !important;
  }

  /* ── ⑬ プリントフッター ── */
  .print-footer {
    border-top: 0.5pt solid #dadce0 !important;
    padding-top: 1mm !important;
    margin-top: 2pt !important;
    font-size: 6.5pt !important;
    color: #bbb !important;
  }

  /* ── ⑭ 問題番号バッジ ── */
  .question-num {
    background: #f97316 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── ⑮ ひらがなグリッドを印刷向けサイズに ── */
  .hiragana-grid:not(.hiragana-grid--beginner-compact) {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 2.5mm !important;
  }
  .hiragana-grid--beginner-compact {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.35mm !important;
  }
  .hiragana-grid--beginner-compact.hiragana-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .hiragana-grid--beginner-compact.hiragana-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .hiragana-grid--beginner-compact.hiragana-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .hiragana-grid--beginner-compact.hiragana-grid--cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .hiragana-grid--beginner-compact.hiragana-grid--cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
  .hiragana-grid--beginner-compact.hiragana-grid--cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
  .hiragana-grid--beginner-compact.hiragana-grid--cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  }
  .hiragana-grid--beginner-compact.hiragana-grid--cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  }
  .hiragana-grid--beginner-compact .hira-cell {
    gap: 0.25mm !important;
  }
  .hiragana-grid--beginner-compact .hira-trace {
    font-size: 12.5pt !important;
  }
  .hiragana-grid--beginner-compact .hira-trace--small {
    color: #fdba74 !important;
    font-size: 9pt !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .hiragana-grid--beginner-compact .hira-write {
    width: 8.5mm !important;
    height: 8.5mm !important;
  }
  .hiragana-grid--beginner-compact .hira-write--small {
    width: 5.2mm !important;
    height: 5.2mm !important;
    border-style: dashed !important;
    border-color: #fb923c !important;
  }
  .hira-yoon-pair .hira-cell:first-child .hira-write {
    border-right-width: 0 !important;
  }
  .hira-yoon-pair .hira-cell--yo-on-small .hira-write {
    margin-left: -1pt !important;
    border-left-width: 0 !important;
  }
  .question.hiragana .gojuon-basic-row .gojuon-basic-grid {
    column-gap: 2.4mm !important;
    row-gap: 1.8mm !important;
  }
  .question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-trace {
    font-size: 13pt !important;
  }
  .question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-trace--small {
    font-size: 8pt !important;
  }
  .question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-write {
    margin-left: 0.5mm !important;
    margin-right: 0.5mm !important;
    border-right-width: 2px !important;
    border-left-width: 2px !important;
  }
  .question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-yoon-pair {
    gap: 1.6mm !important;
  }
  .question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-yoon-pair .hira-cell:first-child .hira-write,
  .question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-yoon-pair .hira-cell--yo-on-small .hira-write {
    margin-left: 0 !important;
    border-left-width: 2px !important;
    border-right-width: 2px !important;
  }
  .hira-cell { gap: 1.2mm !important; }
  .hiragana-grid:not(.hiragana-grid--beginner-compact) .hira-write {
    width: 12mm !important;
    height: 12mm !important;
  }

  /*
   * 迷路・ひらがな迷路（.print-page--maze / .a4-sheet--maze）専用
   * 原因: 他ジャンル向けの印刷最適化が迷路にも当たり、次が積み重なって1ページ内に収まらなくなっていた。
   *  - .a4-sheet の padding 詰め（3.5mm 4.5mm）
   *  - .print-page--first のヘッダー・説明文の詰め
   *  - .questions-grid .question-card の間隔の縮小
   * 迷路は SVG の min-height が大きく2枚／ページのため、上記で縦が不足し印刷・PDF で下端が欠ける。
   * 対応: 迷路のみシート余白・1ページ目の説明・カード padding を最適化前相当に戻し、SVG はやや低めの min/max に調整。
   */
  .a4-sheet--maze {
    padding: 4mm 5mm !important;
  }
  .print-page--maze.print-page--first .print-header {
    margin-bottom: 1mm !important;
    padding-bottom: 1mm !important;
  }
  .print-page--maze.print-page--first .print-instruction {
    padding: 5pt 8pt !important;
    margin-bottom: 8pt !important;
    font-size: 8.4pt !important;
    line-height: 1.32 !important;
  }
  .print-page--maze.print-page--first .question-card-content {
    gap: 1.4mm !important;
  }
  .print-page--maze .questions-grid .question-card:not(:last-child) {
    margin-bottom: 0.55mm !important;
  }
  .print-page--maze .question-card {
    padding: 1.6pt 3.8pt !important;
  }
  .print-page--maze.print-page--cards-5 .question-card {
    padding: 1.6pt 3.8pt !important;
  }
  .print-page--maze .maze-svg {
    min-height: 72mm !important;
    max-height: 84mm !important;
  }
  .print-page--maze .maze-card--normal .maze-svg {
    min-height: 72mm !important;
    max-height: 86mm !important;
  }
  .print-page--maze .maze-card--hiragana .maze-svg {
    min-height: 66mm !important;
    max-height: 80mm !important;
  }

  /* ── ⑯ 絵付き単語カードを印刷向けに ── */
  .word-card-grid {
    gap: 2.5mm !important;
  }
  .word-card {
    border: 1.5pt solid #dadce0 !important;
    padding: 2mm !important;
  }
  .word-emoji { font-size: 18pt !important; }

  /* ヘッダー内ロゴ（タイトル横）：フロー内のまま印刷。改ページ・余白ロジックは従来の .print-page 単位を維持 */
  .print-logo--header {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: 11.2mm !important;
    max-width: 20% !important;
    height: auto !important;
    opacity: 0.88 !important;
    pointer-events: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* スマホ Safari 等：印刷プレビューで ::after の多層 linear-gradient が黒塗りに崩れることがあるため、
   疑似要素の十字線のみ無効化（枠線は @media print 内の .write-box / .hira-write の border を維持） */
@media print and (max-width: 768px) {
  .write-box::after,
  .hira-write::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}

/* PC印刷のみ：ページ先頭のタイトル上余白を詰める（通常表示/スマホPDFには影響させない） */
@media print and (min-width: 769px) {
  .a4-sheet {
    /* 既定 2.2mm 3mm のうち上だけさらに詰める（左右・下は維持） */
    padding-top: 0.15mm !important;
    padding-right: 3mm !important;
    padding-bottom: 2.2mm !important;
    padding-left: 3mm !important;
  }
  .print-page--first .print-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0.35mm !important;
    padding-bottom: 0.35mm !important;
  }
  .print-page--first .print-header-main-row {
    gap: 2px 10px !important;
  }
  .print-page--first .print-instruction {
    margin-top: 0 !important;
    padding-top: 2pt !important;
  }
  .print-page--continuation .print-continuation-strip {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-right: 6pt !important;
    padding-bottom: 4pt !important;
    padding-left: 6pt !important;
  }
  .print-page--continuation .print-continuation-title {
    margin-top: 0 !important;
  }
  .print-page--continuation .print-continuation-hint {
    margin-top: 1pt !important;
  }
}

/* ============================================
   PDF キャプチャ中の一時スタイル
   （html2canvas が正しく描画できるよう補助）
   ============================================ */
.pdf-capturing {
  /* ブラウザ独自フォント補完を無効化して文字ズレ防止 */
  font-synthesis: none !important;
  /* 背景色を確実に描画 */
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}
/* 50音上級のスマホPDFのみ：カード縦トークンを少し詰める（他ジャンルPDFには影響しない） */
.pdf-capturing.pdf-capturing--hiragana-advanced {
  --print-card-padding-y: 0.72pt;
  --print-card-inner-gap: 0.6mm;
  --print-gap-main-to-write: 1.8px;
}
.pdf-capturing .trace-target,
.pdf-capturing .hira-trace,
.pdf-capturing .hira-trace--small {
  /* なぞり文字の淡い暖色をキャンバスでも再現 */
  color: #fdba74 !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}
.pdf-capturing .choice-item {
  background: #fff7ed !important;
  border-color: #ffedd5 !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}
.pdf-capturing .question-card {
  padding: var(--print-card-padding-y) var(--print-card-padding-x) !important;
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}
.pdf-capturing .questions-grid .question-card:not(:last-child) {
  margin-bottom: var(--print-card-separator-gap) !important;
}
.pdf-capturing .question-card-content {
  gap: var(--print-card-inner-gap) !important;
}
.pdf-capturing .question-card .choice-label,
.pdf-capturing .question-card .emoji-question-prompt,
.pdf-capturing .question-card .adv-prompt-sub {
  font-size: var(--print-side-font-size) !important;
  line-height: var(--print-side-line-height) !important;
  letter-spacing: 0.01em !important;
  color: #5f6368 !important;
}
.pdf-capturing .question-card .emoji-question-prompt {
  margin-bottom: var(--print-gap-side-to-main) !important;
}
.pdf-capturing .question-card .adv-prompt-sub {
  margin-bottom: var(--print-gap-sub-to-main) !important;
}
.pdf-capturing .question-card .choices-row {
  margin-top: var(--print-gap-row-tight) !important;
}
.pdf-capturing .question-card .answer-line {
  height: var(--print-answer-line-height) !important;
  margin-top: var(--print-gap-main-to-write) !important;
}
.pdf-capturing .question-card .choice-sentence,
.pdf-capturing .question-card .desc-sentence {
  font-size: 9.5pt !important;
  line-height: 1.18 !important;
}
.pdf-capturing .question.kanji {
  padding: 0.6pt 2pt !important;
  margin-bottom: 0.15mm !important;
}
.pdf-capturing .question.kanji p {
  font-size: 30px !important;
  line-height: 1.18 !important;
  display: flex !important;
  align-items: center !important;
}
.pdf-capturing .question.kanji ruby {
  font-size: 1em !important;
}
.pdf-capturing .question.kanji .question-card-content {
  gap: 4px !important;
}
.pdf-capturing .question.kanji .kanji-stack__bottom--kanji {
  font-size: 1em !important;
  line-height: 1.28 !important;
}
.pdf-capturing .question.kanji rt {
  font-size: 0.5em !important;
  line-height: 1 !important;
}
.pdf-capturing .question.kanji .kanji-box,
.pdf-capturing .question.kanji .kanji-blank-square,
.pdf-capturing .question.kanji .kanji-masu--kanji {
  width: 40px !important;
  height: 40px !important;
}
.pdf-capturing .question.joshi .advanced-compact--joshi,
.pdf-capturing .question.sentence .advanced-compact--sentence,
.pdf-capturing .question.narabikae .advanced-compact--narabikae {
  gap: 3px !important;
}

.pdf-capturing .question.joshi .advanced-compact--joshi .desc-sentence {
  font-size: 18pt !important;
  line-height: 1.3 !important;
  margin-bottom: 0 !important;
}
.pdf-capturing .question-card.question.joshi:has(.choice-sentence) .choice-sentence {
  font-size: 16.2pt !important; /* 助詞中級: 約1.7倍 */
  line-height: 1.22 !important;
}
.pdf-capturing .question-card.question.joshi:has(.choice-sentence) .choice-item {
  font-size: 13.6pt !important;
  padding: 1.6pt 9.8pt !important;
}
.pdf-capturing .question-card.question.joshi:has(.advanced-compact--joshi) .desc-sentence {
  font-size: 18pt !important;
  line-height: 1.3 !important;
}
.pdf-capturing .question-card.question.joshi:has(.advanced-compact--joshi) {
  margin-bottom: 7.5px !important; /* 約2mm */
}
.pdf-capturing .question-card.question.joshi:has(.advanced-compact--joshi) .joshi-inline-blank {
  min-width: 9.2em !important;
  margin-left: -0.75em !important;
  margin-right: -0.35em !important;
  letter-spacing: 0.1em !important;
  line-height: 1.2 !important;
}
.pdf-capturing .question-card.question.hiragana:has(.emoji-question-row:not(.emoji-question-row--tight)) .choice-item {
  font-size: 18pt !important; /* 50音中級: 前回設定からさらに約1.5倍 */
  padding: 1.8pt 10pt !important;
  min-width: 86px !important;
}
.pdf-capturing .question-card.question.hiragana:has(.emoji-question-row:not(.emoji-question-row--tight)) .emoji-large {
  font-size: 34.5pt !important; /* 50音中級: 前回設定からさらに約1.5倍 */
}
.pdf-capturing .question-card.question.hiragana:has(.emoji-question-row:not(.emoji-question-row--tight)) .emoji-question-prompt {
  font-size: 6.6pt !important;
  line-height: 1.28 !important;
  margin-bottom: var(--print-gap-side-to-main) !important;
}
.pdf-capturing .question-card.question.hiragana:has(.emoji-question-row--tight) .emoji-question-prompt {
  display: none !important; /* 50音上級: PDF時のみ「なぞってかこう」を非表示 */
  line-height: var(--print-hiragana-advanced-prompt-line-height) !important;
}
.pdf-capturing .question-card.question.hiragana:has(.emoji-question-row--tight) {
  padding: var(--print-hiragana-advanced-card-padding-y) var(--print-card-padding-x) !important;
}
.pdf-capturing .question-card.question.hiragana:has(.emoji-question-row--tight) .question-card-content {
  gap: var(--print-hiragana-advanced-card-inner-gap) !important;
}
.pdf-capturing--hiragana-advanced .questions-grid {
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}
.pdf-capturing--hiragana-advanced .question-card.question.hiragana:has(.emoji-question-row--tight) .emoji-question-prompt {
  margin-bottom: var(--print-hiragana-advanced-prompt-gap) !important;
}
.pdf-capturing .question-card.question.hiragana:has(.emoji-question-row--tight) .seikatsu-trace {
  font-size: 48pt !important; /* 50音上級: 前回設定からさらに約1.5倍 */
  line-height: var(--print-hiragana-advanced-trace-line-height) !important;
}
.pdf-capturing .question-card.question.hiragana:has(.emoji-question-row--tight) .hira-write {
  width: 27mm !important; /* 50音上級: 前回設定からさらに約1.5倍 */
  height: 27mm !important;
  border-width: 2pt !important;
  border-color: #7b8794 !important;
  margin-top: var(--print-hiragana-advanced-write-margin-top-tight) !important;
  margin-bottom: var(--print-hiragana-advanced-write-margin-bottom-tight) !important;
}
/* 50音 初級（PDFキャプチャ）：印刷と同じ縮小率で可読性を維持 */
.pdf-capturing .question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-trace {
  font-size: 13pt !important;
}
.pdf-capturing .question.hiragana .gojuon-basic-row .gojuon-basic-grid .hira-trace--small {
  font-size: 8pt !important;
}
.pdf-capturing .question-card.question.hiragana:has(.hiragana-advanced-trace-row) .emoji-question-row--tight {
  gap: var(--print-hiragana-adv-row-gap-body) !important;
}
.pdf-capturing .question-card.question.hiragana:has(.hiragana-advanced-trace-row) .emoji-large {
  font-size: var(--print-hiragana-adv-emoji-pt) !important;
}
.pdf-capturing .question-card.question.hiragana:has(.hiragana-advanced-trace-row) .hiragana-advanced-trace-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: var(--print-hiragana-adv-col-gap) !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.pdf-capturing .question-card.question.hiragana:has(.hiragana-advanced-trace-row) .seikatsu-char-col {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 var(--print-hiragana-adv-col-margin-x) !important;
}
.pdf-capturing .question-card.question.hiragana:has(.hiragana-advanced-trace-row) .seikatsu-trace {
  font-size: var(--print-hiragana-adv-trace-font) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  letter-spacing: var(--print-hiragana-adv-trace-letter-spacing) !important;
}
.pdf-capturing .question-card.question.hiragana:has(.hiragana-advanced-trace-row) .hira-write {
  width: var(--print-hiragana-adv-write-mm) !important;
  height: var(--print-hiragana-adv-write-mm) !important;
  min-width: var(--print-hiragana-adv-write-mm) !important;
  min-height: var(--print-hiragana-adv-write-mm) !important;
  border-width: 2pt !important;
  border-color: #7b8794 !important;
  margin-top: var(--print-hiragana-advanced-write-margin-top-tight) !important;
  margin-bottom: var(--print-hiragana-advanced-write-margin-bottom-tight) !important;
}
.pdf-capturing .question-card.question.narabikae .adv-prompt-sub {
  display: none !important; /* 並べ替え: PDF時のみ「こたえをしたにかこう」を非表示 */
}
.pdf-capturing .question-card.question.narabikae .emoji-question-prompt {
  font-size: 14.25pt !important; /* 並べ替え全難易度: 問題文を約1.5倍 */
  line-height: 1.24 !important;
  margin-bottom: var(--print-gap-sub-to-main) !important;
}
.pdf-capturing .question-card.question.narabikae .question-card-content {
  gap: 0.8mm !important;
}
.pdf-capturing .question-card.question.narabikae .choices-row {
  gap: 1pt !important;
  margin-top: 0.8pt !important;
}
.pdf-capturing .question-card.question.narabikae .narabikae-layout {
  gap: var(--print-narabikae-layout-gap) !important;
}
.pdf-capturing .question-card.question.narabikae .narabikae-choices-row {
  gap: var(--print-narabikae-choice-gap) !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.pdf-capturing .question-card.question.narabikae .narabikae-choices-row .choice-item {
  font-size: var(--print-narabikae-choice-font-size) !important;
  padding: var(--print-narabikae-choice-pad-y) var(--print-narabikae-choice-pad-x) !important;
  line-height: 1.18 !important;
}
.pdf-capturing .question-card.question.narabikae .narabikae-answer-line {
  height: var(--print-narabikae-answer-height) !important;
  margin-top: var(--print-narabikae-answer-margin-top) !important;
  border-bottom-width: var(--print-narabikae-answer-border-width) !important;
  border-bottom-color: #c2410c !important;
}
.pdf-capturing .question.sentence .advanced-compact--sentence .answer-line,
.pdf-capturing .question.narabikae .advanced-compact--narabikae .answer-line {
  height: var(--print-answer-line-height-compact) !important;
  margin-top: var(--print-answer-line-gap-compact) !important;
}
.pdf-capturing .question.kanji .kanji-stack--reading-adv .kanji-stack__bottom--kanji {
  font-size: 1.08em !important;
  line-height: 1.28 !important;
}
.pdf-capturing .question.kanji .kanji-stack--reading-adv .kanji-reading-blank-line {
  font-size: 0.68em !important;
  line-height: 1.18 !important;
}
.pdf-capturing .question-num {
  background: #f97316 !important;
  color: #fff !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}
.pdf-capturing .print-instruction {
  background: #fff7ed !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}
.pdf-capturing .print-continuation-strip {
  background: #fff7ed !important;
  border-left-color: #f97316 !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}
.pdf-capturing .print-header {
  border-bottom-color: #f97316 !important;
}
.pdf-capturing .kanji-masu--kanji {
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 2px solid #333333 !important;
}
.pdf-capturing .kanji-blank-square {
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 2px solid #333333 !important;
}
.pdf-capturing .kanji-masu--kanji::before,
.pdf-capturing .kanji-masu--kanji::after {
  background: #333333 !important;
}

/* ラスタライズ時の細枠のにじみを抑える（1px 実数・背景色は単色） */
.pdf-capturing .write-box,
.pdf-capturing .write-box-tight,
.pdf-capturing .hira-write,
.pdf-capturing .blank-box {
  box-sizing: border-box !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #dadce0 !important;
}
.pdf-capturing .blank-box {
  border-color: #f97316 !important;
}
.pdf-capturing .write-box::after,
.pdf-capturing .hira-write::after {
  opacity: 1 !important;
}

/* スマホ html2canvas→PDF のみ（savePdfViaHtml2Canvas 中に body に pdf-mobile-capture）。
   十字線はラスタ化でにじむため無効化し、外枠＋白地のみ。PC の @media print は変更しない。 */
body.pdf-mobile-capture .print-page {
  width: 186mm !important;
  min-width: 186mm !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
body.pdf-mobile-capture .maze-card--hiragana .maze-answer-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.2mm !important;
  overflow: hidden !important;
}
body.pdf-mobile-capture .maze-card--hiragana .maze-answer-box {
  width: 12.5mm !important;
  height: 12.5mm !important;
  max-width: 12.5mm !important;
  flex: 0 0 12.5mm !important;
}
body.pdf-mobile-capture .print-header-fields {
  grid-template-columns: minmax(0, 1fr) auto !important;
  width: 100% !important;
  gap: 8px 10px !important;
}
body.pdf-mobile-capture .print-header-field--name {
  flex: 0 1 50% !important;
  max-width: 50% !important;
  min-width: 0 !important;
}
body.pdf-mobile-capture .print-header-field {
  font-size: 1.1rem !important;
  gap: 6px !important;
}
body.pdf-mobile-capture .print-field-line--name {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
}
body.pdf-mobile-capture .print-header-field--date {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  justify-self: end !important;
}
body.pdf-mobile-capture .print-date-blank--month,
body.pdf-mobile-capture .print-date-blank--day {
  width: 3rem !important;
  min-width: 2.7rem !important;
  height: 42px !important;
}
body.pdf-mobile-capture .print-date-suffix {
  font-size: 1.05rem !important;
}
body.pdf-mobile-capture .write-box,
body.pdf-mobile-capture .write-box-tight,
body.pdf-mobile-capture .hira-write {
  box-sizing: border-box !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #94a3b8 !important;
  background: #ffffff !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}
body.pdf-mobile-capture .write-box::after,
body.pdf-mobile-capture .hira-write::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
body.pdf-mobile-capture .kanji-masu--kanji {
  background: #ffffff !important;
  border-color: #333333 !important;
}
body.pdf-mobile-capture .kanji-blank-square {
  background: #ffffff !important;
  border-color: #333333 !important;
}
body.pdf-mobile-capture .question.kanji {
  padding: 0.6pt 2pt !important;
  margin-bottom: 0.15mm !important;
}
body.pdf-mobile-capture .question.kanji p {
  font-size: 30px !important;
  line-height: 1.18 !important;
  display: flex !important;
  align-items: center !important;
}
body.pdf-mobile-capture .question.kanji ruby {
  font-size: 1em !important;
}
body.pdf-mobile-capture .question.kanji .question-card-content {
  gap: 4px !important;
}
body.pdf-mobile-capture .question.kanji .choice-sentence,
body.pdf-mobile-capture .question.kanji .desc-sentence,
body.pdf-mobile-capture .question.kanji .kanji-sentence-line--prominent {
  font-size: 9.5pt !important;
  line-height: 1.22 !important;
}
body.pdf-mobile-capture .question.kanji .kanji-stack__bottom--kanji {
  font-size: 1em !important;
  line-height: 1.28 !important;
}
body.pdf-mobile-capture .question.kanji rt {
  font-size: 0.5em !important;
  line-height: 1 !important;
}
body.pdf-mobile-capture .question.kanji .kanji-box,
body.pdf-mobile-capture .question.kanji .kanji-blank-square,
body.pdf-mobile-capture .question.kanji .kanji-masu--kanji {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}
body.pdf-mobile-capture .question.joshi .advanced-compact--joshi,
body.pdf-mobile-capture .question.sentence .advanced-compact--sentence,
body.pdf-mobile-capture .question.narabikae .advanced-compact--narabikae {
  gap: 3px !important;
}
body.pdf-mobile-capture .question.narabikae .narabikae-layout {
  gap: var(--print-narabikae-layout-gap) !important;
}
body.pdf-mobile-capture .question.narabikae .narabikae-choices-row {
  gap: var(--print-narabikae-choice-gap) !important;
}
body.pdf-mobile-capture .question.narabikae .narabikae-choices-row .choice-item {
  font-size: var(--print-narabikae-choice-font-size) !important;
  padding: var(--print-narabikae-choice-pad-y) var(--print-narabikae-choice-pad-x) !important;
}

body.pdf-mobile-capture .question.joshi .advanced-compact--joshi .desc-sentence {
  font-size: 14.25pt !important; /* 9.5pt の 1.5倍 */
  line-height: 1.25 !important;
  margin-bottom: 0 !important;
}
body.pdf-mobile-capture .question.sentence .advanced-compact--sentence .answer-line,
body.pdf-mobile-capture .question.narabikae .advanced-compact--narabikae .answer-line {
  height: var(--print-narabikae-answer-height) !important;
  margin-top: var(--print-narabikae-answer-margin-top) !important;
}
body.pdf-mobile-capture .question.narabikae .narabikae-answer-line {
  height: var(--print-narabikae-answer-height) !important;
  margin-top: var(--print-narabikae-answer-margin-top) !important;
  border-bottom-width: var(--print-narabikae-answer-border-width) !important;
  border-bottom-color: #c2410c !important;
}
body.pdf-mobile-capture .question.kanji .kanji-stack--reading-adv .kanji-stack__bottom--kanji {
  font-size: 1.08em !important;
  line-height: 1.28 !important;
}
body.pdf-mobile-capture .question.kanji .kanji-stack--reading-adv .kanji-reading-blank-line {
  font-size: 0.68em !important;
  line-height: 1.18 !important;
}
body.pdf-mobile-capture .kanji-masu--kanji::before,
body.pdf-mobile-capture .kanji-masu--kanji::after {
  background: #333333 !important;
}

/*
 * ページ分割の実測（measurePrintPackSizes）は、プレビューと同じ
 * .a4-wrapper.print-area > .a4-sheet > .print-page 構造で行う。
 * [data-print-pack-meter] 専用のタイポ上書きは置かず、プレビュー用 CSS と同一条件で測る。
 */

/* savePDF() が組み立てる一時ページ（画面外DOM）。画面表示には使わない */
.a4-sheet.pdf-export-surface {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.a4-sheet.pdf-export-surface .questions-grid {
  flex: none !important;
}
.a4-sheet.pdf-export-surface .print-footer {
  margin-top: 8px !important;
}

/* ============================================
   プラン表示・無料案内・LINE案内モーダル
   ============================================ */
.plan-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: 8px;
  white-space: nowrap;
}
.plan-badge--free {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.plan-badge--pro {
  background: var(--gold-soft);
  color: var(--gold-dark);
  border: 1px solid var(--gold);
}
.plan-pro .free-plan-notice {
  display: none !important;
}
.pro-plan-banner {
  font-size: 0.88rem;
  text-align: center;
  margin: 8px auto 16px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--primary-light) 100%);
  border: 2px solid var(--gold);
  border-radius: var(--radius-sm);
  max-width: 560px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
}
.pro-plan-banner:not([hidden]) {
  display: flex;
}
.pro-plan-banner-badge {
  font-weight: 800;
  color: var(--gold-dark);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.pro-plan-banner-line {
  font-size: 0.86rem;
  color: var(--text-sub);
  font-weight: 600;
}
.plan-pro .generate-note#generateUpgradeNote {
  display: none !important;
}
.free-plan-notice {
  font-size: 0.88rem;
  color: var(--text-sub);
  text-align: center;
  margin: 8px auto 16px;
  padding: 10px 14px;
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  max-width: 560px;
}
.plan-modal-context {
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: var(--gold-dark);
  line-height: 1.5;
}
.plan-modal-context[hidden] {
  display: none !important;
}
.plan-pitch-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text);
}
.plan-pitch-list {
  margin: 0 0 16px 1.15em;
  padding: 0;
  line-height: 1.65;
  font-size: 0.92rem;
}
.plan-pitch-text-mobile {
  display: none;
}
.plan-line-btn-text-mobile {
  display: none;
}
.plan-pitch-line {
  font-size: 0.88rem;
  color: var(--text-sub);
  margin-bottom: 10px;
  text-align: center;
}
.plan-line-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 12px;
  padding: 12px 18px;
  background: #06c755;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.plan-line-btn:hover {
  filter: brightness(1.05);
}
.plan-line-btn--ghost {
  background: #fff;
  color: #06c755;
  border: 2px solid #06c755;
}
.modal-note--soft {
  font-size: 0.82rem;
  color: var(--text-sub);
  text-align: center;
  margin-top: 8px;
}
.modal-note--soft a {
  color: var(--primary);
}
.plan-active-lead {
  font-size: 0.95rem;
  margin-bottom: 12px;
  color: var(--text);
  line-height: 1.55;
}
.plan-active-lead code {
  font-size: 0.85em;
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
}
.settings-row--answer {
  margin-top: 8px;
}
.setting-label--checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.45;
}
.setting-checkbox {
  margin-top: 4px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.one-click-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  text-align: center;
}
.one-click-btn {
  width: 100%;
  max-width: 400px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 2px solid var(--primary);
  background: var(--white);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.one-click-btn:hover {
  background: var(--primary-light);
}
.one-click-hint {
  font-size: 0.8rem;
  color: var(--text-sub);
  margin-top: 8px;
}
.answer-sheet {
  padding: 8px 0 16px;
}
.answer-sheet-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--text);
}
.answer-sheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.answer-sheet-item {
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 8px 10px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.answer-sheet-qnum {
  display: inline-block;
  min-width: 1.8em;
  font-weight: 800;
  color: var(--primary);
}
@media (max-width: 640px) {
  .header-inner {
    height: auto;
    min-height: 56px;
    padding: 10px 16px;
    flex-wrap: wrap;
  }
  .header-logo {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .plan-badge {
    margin-left: 0;
    font-size: 0.65rem;
  }
  .modal-box {
    max-height: 92vh;
    margin: 8px;
  }
}

/* ============================================
   ファーストビュー・フロー生成UI（2026 刷新）
   ============================================ */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero-flow {
  background: linear-gradient(180deg, #fff7ed 0%, var(--bg) 100%);
  padding: 48px 20px 56px;
  text-align: center;
}
.hero-flow-inner {
  max-width: 640px;
  margin: 0 auto;
}
.hero-flow-title {
  font-size: clamp(1.45rem, 4.5vw, 1.85rem);
  font-weight: 900;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.hero-flow-sub {
  font-size: 1.05rem;
  color: var(--text-sub);
  margin-bottom: 8px;
}
.hero-flow-note {
  font-size: 0.92rem;
  color: var(--text-sub);
  margin-bottom: 28px;
}
.hero-flow-note i { color: var(--primary); margin-right: 6px; }
.hero-flow-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 36px;
  font-size: 1.08rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: none;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(249, 115, 22, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hero-flow-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(249, 115, 22, 0.5);
  color: #fff;
}
.hero-history-btn {
  margin: 14px auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  width: min(85%, 420px);
  padding: 14px 20px;
  border-radius: 999px;
  border: 2px solid #ff7a00;
  background: #ffffff;
  color: #ff7a00;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.1);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hero-history-btn:hover {
  background: #fff7f0;
  border-color: #ff8f24;
  color: #e06800;
}
.hero-history-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.hero-history-btn-count {
  font-size: 0.9em;
  color: #888888;
}
.hero-history-hint {
  margin-top: 0;
  font-size: 0.84rem;
  color: var(--text-sub);
  line-height: 1.55;
  max-width: 520px;
}

.section-inner--flow {
  max-width: 800px;
}
.flow-page-title {
  font-size: 1.65rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 8px;
  color: var(--text);
}
.free-plan-notice--compact {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-sub);
  margin-bottom: 28px;
  line-height: 1.5;
}
.generator-section--flow {
  padding-top: 28px;
  padding-bottom: 48px;
}
.control-panel--flow {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.flow-step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px 20px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.flow-step-head {
  margin-bottom: 18px;
}
.flow-step-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 6px;
}
.flow-step-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
}

.flow-block {
  margin-bottom: 4px;
}
.flow-block--conditional {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}
.flow-setting-select {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-bottom: 6px;
}

.genre-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: stretch;
}
.genre-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 14px 12px 16px;
  min-height: 128px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.genre-card:hover {
  border-color: rgba(249, 115, 22, 0.45);
  background: var(--primary-light);
}
.genre-card.active,
.genre-card.content-btn.active {
  border-color: var(--primary);
  background: rgba(249, 115, 22, 0.1);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.25);
}
.genre-card-icon {
  font-size: 1.35rem;
  line-height: 1;
  margin-bottom: 8px;
}
.genre-card-name {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.genre-card-desc {
  font-size: 0.78rem;
  color: var(--text-sub);
  line-height: 1.35;
  flex: 1;
}
.genre-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 6px;
  line-height: 1;
}
.genre-card-badge--free {
  background: #e8f5e9;
  color: #2e7d32;
}
.genre-card-badge--trial {
  background: #fff8e1;
  color: #f57c00;
}
.genre-card-badge--paid {
  background: #fce4ec;
  color: #c2185b;
}
/* 有料版：ジャンル右上の無料／有料／体験バッジを非表示（body.plan-pro は app.js が付与） */
body.plan-pro #contentOptions .genre-card .genre-card-badge {
  display: none !important;
}
.genre-card.content-btn--locked {
  opacity: 0.55;
}

/* 並び替え・文章・ひらがな迷路：本日の無料体験を使い切った状態（無料版） */
.genre-card.content-btn--trial.genre-card--trial-exhausted-today {
  cursor: pointer;
  opacity: 0.8;
  filter: grayscale(0.3) saturate(0.72);
  background: #f1efec;
  border-color: rgba(120, 113, 108, 0.42);
  box-shadow: none;
  padding-bottom: 40px;
}
.genre-card.content-btn--trial.genre-card--trial-exhausted-today:hover {
  border-color: rgba(100, 95, 90, 0.55);
  background: #ebe8e4;
}
.genre-card.content-btn--trial.genre-card--trial-exhausted-today.genre-card.active,
.genre-card.content-btn--trial.genre-card--trial-exhausted-today.content-btn.active {
  border-color: rgba(100, 95, 90, 0.6);
  background: #e5e2de;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
}
.genre-trial-day-badge {
  display: block;
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  font-size: 0.62rem;
  font-weight: 800;
  color: #44403c;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(120, 113, 108, 0.4);
  border-radius: 6px;
  padding: 5px 6px;
  line-height: 1.3;
  text-align: center;
  z-index: 2;
}

.level-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.level-pill {
  flex: 1;
  min-width: 96px;
  max-width: 200px;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text);
}
.level-pill:hover {
  border-color: rgba(249, 115, 22, 0.45);
}
.level-pill.active,
.level-pill.level-btn.active {
  border-color: var(--primary);
  background: rgba(249, 115, 22, 0.12);
  color: var(--primary-dark);
}
.level-pill-lock {
  font-size: 0.75em;
  margin-left: 4px;
}
.level-pill.level-btn--locked {
  opacity: 0.55;
}

.flow-block-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-sub);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.flow-field-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.flow-field-label--spaced {
  margin-top: 16px;
}
.count-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.count-pill {
  min-width: 52px;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  color: var(--text);
  transition: 0.2s;
}
.count-pill:hover:not(:disabled) {
  border-color: rgba(249, 115, 22, 0.45);
}
.count-pill.active {
  border-color: var(--primary);
  background: rgba(249, 115, 22, 0.1);
  color: var(--primary-dark);
}
.count-pill:disabled,
.count-pill.count-pill--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.flow-hint {
  font-size: 0.8rem;
  color: var(--text-sub);
  margin-bottom: 14px;
  line-height: 1.45;
}
.flow-hint--sub {
  margin-top: -6px;
  margin-bottom: 0;
  font-size: 0.76rem;
}
.flow-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.flow-check input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
.flow-check input:disabled + span {
  opacity: 0.55;
}

.pill-duo {
  display: flex;
  gap: 0;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--border);
  max-width: 100%;
}
.pill-duo-btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: var(--white);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  color: var(--text-sub);
  transition: background 0.2s, color 0.2s;
}
.pill-duo-btn + .pill-duo-btn {
  border-left: 1px solid var(--border);
}
.pill-duo-btn.active {
  background: rgba(249, 115, 22, 0.15);
  color: var(--primary-dark);
}

.generate-section--flow {
  text-align: center;
  padding: 8px 0 0;
}
.generate-btn--hero {
  width: 100%;
  max-width: 420px;
  padding: 18px 28px;
  font-size: 1.12rem;
  font-weight: 900;
  border-radius: 999px;
  box-shadow: 0 10px 32px rgba(249, 115, 22, 0.42);
}
.generate-quota--center {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--text-sub);
  text-align: center;
}

/* 有料CTA シンプル */
.plan-cta-section--simple {
  padding: 48px 20px;
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.plan-cta-inner--simple {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.plan-cta-simple-title {
  font-size: 1.35rem;
  font-weight: 900;
  margin-bottom: 16px;
  color: var(--text);
}
.plan-cta-simple-list {
  list-style: none;
  text-align: left;
  max-width: 280px;
  margin: 0 auto 16px;
  padding: 0;
  font-size: 0.95rem;
  color: var(--text-sub);
  line-height: 1.85;
}
.plan-cta-simple-list i {
  color: var(--primary);
  margin-right: 8px;
  width: 1em;
}
.plan-cta-simple-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 18px;
}
.plan-cta-simple-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 800;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.plan-cta-simple-btn:hover {
  filter: brightness(1.05);
}

/* 下部3機能 */
.tool-features-section {
  padding: 48px 20px 56px;
  background: var(--bg);
}
.tool-features-inner {
  max-width: 900px;
  margin: 0 auto;
}
.tool-features-title {
  font-size: 1.35rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 32px;
  color: var(--text);
}
.tool-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tool-feature-item {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px 18px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm);
}
.tool-feature-num {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}
.tool-feature-head {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text);
}
.tool-feature-text {
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.55;
}

/* ============================================
   スマホ最適化（768px以下・480px以下）
   ============================================ */

/* 下部固定の生成バー */
.mobile-gen-sticky {
  display: none;
}
.mobile-gen-sticky__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 16px 20px;
  border: none;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-gen-sticky__icon {
  font-size: 1.35rem;
  line-height: 1;
}
.mobile-gen-sticky__label {
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.mobile-gen-sticky__btn:active {
  filter: brightness(0.97);
}

@media (max-width: 768px) {
  #planModal .plan-modal-pitch .modal-note--soft {
    display: none !important;
  }
  #planModal .plan-modal-pitch .plan-pitch-line {
    display: none !important;
  }
  #planModal .plan-pitch-text-desktop {
    display: none !important;
  }
  #planModal .plan-pitch-text-mobile {
    display: inline !important;
  }
  #planModal .plan-line-btn-text-desktop {
    display: none !important;
  }
  #planModal .plan-line-btn-text-mobile {
    display: inline !important;
  }
  #planModal .plan-modal-pitch .plan-line-btn {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    margin: 10px auto 18px;
    padding: 14px 18px;
    font-size: 1.02rem;
    font-weight: 800;
    border-radius: 12px;
  }
  #planModal .modal-footer--plan {
    gap: 8px;
    padding: 12px 14px;
  }
  #planModal .modal-footer--plan .modal-pro-app-btn {
    display: none !important;
  }
  #planModal .modal-close-btn,
  #planModal .modal-detail-btn,
  #planModal .modal-pro-app-btn {
    min-height: 44px;
    padding: 10px 12px;
  }

  /* 固定バーと重ならず最下部までスクロールできるよう余白（表示中のみ） */
  html.has-mobile-gen-sticky-pad body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-gen-sticky {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 190;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(250, 248, 246, 0.98) 70%, rgba(250, 248, 246, 0));
    pointer-events: none;
    contain: layout style;
  }
  .mobile-gen-sticky[hidden] {
    display: none !important;
  }
  .mobile-gen-sticky__btn {
    pointer-events: auto;
    max-width: 520px;
    margin: 0 auto;
  }

  /* ヘッダー：低く・タップしやすく */
  .site-header {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  }
  .header-inner {
    height: auto;
    min-height: 48px;
    padding: 8px 12px 10px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
  }
  .header-logo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.92rem;
    gap: 6px;
  }
  .logo-icon {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }
  .logo-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .plan-badge {
    font-size: 0.58rem;
    padding: 3px 6px;
    max-width: 5.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header-nav {
    width: 100%;
    margin-left: 0;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
  }
  /* 主要1本＋履歴・機能のみ（その他はフッターへ） */
  .header-nav .nav-link:not([href="#generator"]) {
    display: none;
  }
  .header-nav .nav-link[href="#generator"] {
    flex: 1 1 auto;
    text-align: center;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 12px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
  }
  .nav-btn-history,
  .nav-btn-premium {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
  }
  .nav-btn-history i,
  .nav-btn-premium i {
    font-size: 1rem;
  }

  .logo-area {
    padding: 8px 12px 4px;
  }
  .logo-area img {
    width: 96px;
  }

  /* ヒーロー */
  .hero-flow {
    padding: 32px 18px 40px;
  }
  .hero-flow-title {
    font-size: 1.35rem;
    line-height: 1.4;
    margin-bottom: 12px;
  }
  .hero-flow-sub {
    font-size: 0.98rem;
    line-height: 1.55;
    padding: 0 4px;
  }
  .hero-flow-note {
    font-size: 0.9rem;
    margin-bottom: 24px;
  }
  .hero-flow-cta {
    width: 100%;
    max-width: none;
    min-height: 54px;
    padding: 16px 20px;
    font-size: 1.05rem;
    border-radius: 14px;
    margin-top: 4px;
  }
  .hero-history-btn {
    width: 100%;
    min-height: 54px;
    padding: 14px 18px;
    margin-top: 10px;
    border-radius: 999px;
    font-size: 1rem;
  }
  .hero-history-hint {
    width: 100%;
    font-size: 0.8rem;
    text-align: left;
  }

  /* 生成セクション全体 */
  .generator-section--flow {
    padding-top: 20px;
    padding-bottom: 32px;
  }
  .section-inner--flow {
    padding-left: 14px;
    padding-right: 14px;
  }
  .flow-page-title {
    font-size: 1.35rem;
    margin-bottom: 6px;
  }
  .free-plan-notice--compact {
    font-size: 0.8rem;
    margin-bottom: 20px;
    padding: 0 4px;
  }

  .control-panel--flow {
    gap: 20px;
  }

  /* STEP カード：区切りと余白（スティッキーヘッダー分のスクロール位置調整） */
  .flow-step {
    padding: 20px 16px 22px;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    scroll-margin-top: 96px;
  }
  .flow-step:nth-child(odd) {
    background: #fffefb;
  }
  .flow-step:nth-child(even) {
    background: var(--white);
  }
  .flow-step-head {
    margin-bottom: 14px;
  }
  .flow-step-badge {
    font-size: 0.75rem;
    margin-bottom: 4px;
  }
  .flow-step-title {
    font-size: 1.2rem;
    line-height: 1.35;
  }

  /* ジャンル：2列・大きめタップ（min-height はベース 128px で統一） */
  .genre-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .genre-card {
    min-height: 128px;
    padding: 14px 10px 14px 12px;
    border-radius: 12px;
  }
  .genre-card-desc {
    font-size: 0.76rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .genre-card-name {
    font-size: 0.95rem;
  }
  .genre-card-badge {
    font-size: 0.62rem;
    padding: 4px 6px;
  }
  .genre-card.active,
  .genre-card.content-btn.active {
    border-color: var(--primary);
    border-width: 3px;
    background: rgba(249, 115, 22, 0.14);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
  }
  .genre-card.content-btn--trial.genre-card--trial-exhausted-today.genre-card.active,
  .genre-card.content-btn--trial.genre-card--trial-exhausted-today.content-btn.active {
    border-width: 2px;
    border-color: rgba(100, 95, 90, 0.65);
    background: #e5e2de;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    filter: grayscale(0.3) saturate(0.72);
    opacity: 0.82;
  }

  /* レベル：横3のまま高さアップ */
  .level-row {
    gap: 8px;
  }
  .level-pill {
    min-width: 0;
    min-height: 50px;
    padding: 14px 10px;
    font-size: 1.02rem;
    border-radius: 12px;
  }

  .flow-block-label {
    font-size: 0.78rem;
    margin-bottom: 10px;
  }
  .flow-field-label {
    font-size: 0.92rem;
    margin-bottom: 10px;
    display: block;
  }
  .flow-field-label--spaced {
    margin-top: 18px;
  }
  .count-pill-row {
    gap: 8px;
  }
  .count-pill {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    font-size: 1rem;
    border-radius: 12px;
  }
  .pill-duo {
    border-radius: 12px;
  }
  .pill-duo-btn {
    min-height: 50px;
    font-size: 0.95rem;
    padding: 14px 12px;
  }
  .flow-hint {
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .flow-check {
    align-items: center;
    min-height: 48px;
    padding: 8px 0;
    font-size: 0.95rem;
  }
  .flow-check input {
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin-top: 0;
    flex-shrink: 0;
  }
  .setting-select,
  .flow-setting-select {
    width: 100%;
    max-width: none;
    min-height: 48px;
    font-size: 16px;
    padding: 12px 14px;
    border-radius: 10px;
  }

  .generate-section--flow {
    padding-top: 4px;
    padding-bottom: 8px;
  }
  .generate-btn--hero {
    max-width: none;
    width: 100%;
    min-height: 56px;
    font-size: 1.08rem;
    padding: 18px 20px;
    border-radius: 14px;
  }
  .generate-quota--center {
    font-size: 0.82rem;
    margin-top: 12px;
  }
  .generate-note {
    font-size: 0.8rem;
    margin-top: 10px;
  }

  /* 有料CTA：短く */
  .plan-cta-section--simple {
    padding: 32px 16px;
  }
  .plan-cta-simple-title {
    font-size: 1.15rem;
    margin-bottom: 12px;
  }
  .plan-cta-simple-list {
    font-size: 0.88rem;
    max-width: 100%;
    margin-bottom: 12px;
  }
  .plan-cta-simple-price {
    font-size: 1rem;
    margin-bottom: 14px;
  }
  .plan-cta-simple-btn {
    width: 100%;
    max-width: 400px;
    min-height: 50px;
    border-radius: 12px;
  }

  .tool-features-section {
    padding: 36px 16px 44px;
  }
  .tool-features-title {
    font-size: 1.15rem;
    margin-bottom: 22px;
  }
  .tool-features-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 420px;
  }
  .tool-feature-item {
    padding: 20px 16px;
  }
  .tool-feature-text {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  /* FAQ：英語ラベル非表示 */
  .faq-section .section-label {
    display: none;
  }
  .faq-section .section-sub {
    font-size: 0.88rem;
  }

  .footer-inner {
    padding: 20px 16px;
  }
  .footer-links a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 8px;
  }

  /* カスタム単語・プレビュー操作 */
  .custom-add-btn {
    min-height: 48px;
    width: 100%;
    justify-content: center;
    border-radius: 12px;
  }
  .custom-word-input {
    min-height: 48px;
    font-size: 16px;
  }
  .preview-actions {
    flex-direction: column;
    gap: 10px;
  }
  .preview-actions .action-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .level-row {
    flex-direction: column;
  }
  .level-pill {
    max-width: none;
    width: 100%;
  }

  .genre-grid {
    gap: 10px;
  }
  .genre-card {
    min-height: 128px;
    padding: 12px 8px 12px 10px;
  }

  .hero-flow-title {
    font-size: 1.25rem;
  }
}

/* 代表的な端末幅：詰まりを避ける微調整 */
@media (max-width: 430px) {
  .section-inner--flow {
    padding-left: 12px;
    padding-right: 12px;
  }
  .genre-grid {
    gap: 10px;
  }
  .flow-step {
    scroll-margin-top: 92px;
  }
}

@media (max-width: 390px) {
  .genre-card-name {
    font-size: 0.92rem;
  }
  .genre-card-desc {
    font-size: 0.74rem;
  }
  .level-pill {
    font-size: 0.98rem;
  }
}

@media (max-width: 375px) {
  .section-inner--flow {
    padding-left: 10px;
    padding-right: 10px;
  }
  .genre-grid {
    gap: 9px;
  }
  .genre-card {
    padding: 12px 7px 12px 9px;
  }
  .hero-flow {
    padding-left: 14px;
    padding-right: 14px;
  }
}