/* ========== STYLE.CSS TABLE OF CONTENTS
   このファイルは Flask が直接配信するシングルファイル CSS。
   分割せず、論理セクション境界をバナー型コメントで示す。
   エディタで目的のセクションへジャンプする場合は、下の Title をそのまま検索する。

   L  238  Boki Select Page
   L  420  Qualification Page v3 Image Design
   L  776  Search Page
   L  952  Exam Info & Pass/Fail Box
   L 1015  FE Study Page
   L 1253  FE Dashboard
   L 1581  FE UX fixes 2026-05
   L 1721  Shared header menu / - Add or remove exam links in app.py QUALIFICATIONS only.
   L 1725  Desktop nav (visible ≥ 900px)
   L 1758  Hamburger toggle
   L 1819  Menu panel
   L 1989  Shared contact/menu additions and confirm modal
   L 2066  Unified four-choice study page
   L 2096  Shared learning utilities
   L 2128  Bookmark mode and menu accordion additions
   L 2403  Code Trace Panel - 疑似コード逐次実行UI
   L 2562  Flexible choice grid
   L 2584  Review mode improvements
   L 2673  Readability and consistency pass / 長時間学習で読みやすい文字サイズ・余白・フォーカス表示
   L 2806  Visual QA fixes / - Prevent decorative numbers and long labels from visually overlapping. / - Kee...
   L 2842  Mobile clarity + dark mode completion pass / - Relax cramped mobile cards and controls. / - Remov...
   L 2860  Home / qualification layout consistency pass / - Put the popular course cards directly under the ...
   L 2931  Color and button consistency pass / - Improve dark-mode search/menu colors. / - Keep Boki light t...
   L 3207  Review fix: theme-safe surfaces and mobile overflow guards
   L 3251  SEO detail pages / 学習アプリ画面とは役割を分けた、検索流入・回遊向けHTMLページ。
   L 3528  v18: shared empty states and dashboard helper classes / Inline styles previously embedded in stud...
   L 3589  v70 学習カレンダー / 連続学習記録
   L 3750  Extended question renderers / numeric_input / table_input / accounting_entry / statement_choice
   L 3978  v40 - Mobile responsive hardening / 全画面を360px級スマホで読みやすく、押しやすくするための最終調整。 / 既存UIの意味は変えず、横溢れ・小さすぎるタッ...
   L 4016  Dark Mode overrides (consolidated) / - Keep all dark-mode specific selectors in this final sectio...
   L 4718  v35 UI polish: exam landing and recent history / Generated UI mockup-inspired visual system for t...
   L 4822  v36 - Question practice UI polish
   L 5268  v37 Dashboard analytics UI polish / - Extends the v35/v36 blue dashboard language to the analytic...
   L 5631  v39 Qualification / Course Select UI Refresh
   L 5925  v41 SEO and advertising readiness
   L 7827  v70-home: Progate/Duolingo inspired course-first homepage / - Home only. Prioritizes clear course...
   L10668  v71 home/qualification card navigation fixes
   L11532  v98 UI readiness polish: navigation, / mobile, / ads
   L12769  用語集ハブ：説明拡充中の注記
   L12785  資格概要 NEXT STEPS：次に見るページ
   L12840  記事末尾「次にやること」リスト

   END OF TABLE OF CONTENTS ========== */

/* v69.3 breakpoint policy
   Existing CSS still contains historical breakpoints. New responsive work should
   reuse these documented tiers and avoid introducing additional ad hoc values.
   Main tiers: 360px,
420px,
700/700.98px mobile,
701-980.98px tablet,
901/981px desktop,
1100px density adjustment.
*/


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



a{
  text-decoration: none;
  color: inherit;
}



.header-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
















button:disabled{
  background: #cbd5e1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.quiz-section{
  max-width: 1180px;
  margin: 0 auto;
  padding: 84px 24px;
}

.section-title{
  text-align: center;
  margin-bottom: 48px;
}

.section-title p{
  color: var(--gold-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.24em;
  margin-bottom: 10px;
}

.section-title h2{
  font-family: "Yu Mincho", serif;
  font-size: 42px;
  color: var(--navy);
  letter-spacing: 0.08em;
}

.course-label{
  position: relative;
  z-index: 1;
  color: var(--gold-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  margin-bottom: 18px;
}



.empty-message{
  text-align: center;
  color: var(--muted);
}

.quiz-header{
  text-align: center;
  margin-bottom: 34px;
}







.question-meta{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}



.question-meta small{
  color: var(--muted);
}



.options{
  display: grid;
  gap: 12px;
}





.submit-btn{
  display: block;
  margin: 30px auto 0;
  min-width: 220px;
}

.result-actions{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}




.site-footer-inner{
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.site-footer-brand{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--text);
}



.site-footer-links{
  display: flex;
  gap: 12px 18px;
  flex-wrap: wrap;
}



.site-footer-links a:hover{
  text-decoration: underline;
}

.site-footer-notice{
  max-width: 880px;
  line-height: 1.8;
  margin: 0;
}

.site-footer-copy{
  margin: 0;
}



.seo-source-box h2{
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.seo-source-box p{
  margin: 8px 0;
  line-height: 1.8;
}

.seo-source-meta{
  color: var(--muted);
  font-size: .92rem;
}

.legal-card{
  display: grid;
  gap: 14px;
}

.legal-card h2{
  margin: 14px 0 0;
}

.legal-card h2:first-child{
  margin-top: 0;
}

.legal-card p{
  margin: 0;
  line-height: 1.9;
}


@media (max-width: 800px) {

  .quiz-box{
    padding: 24px;
  }
}

/* =========================
   Boki Select Page
========================= */

.boki-main{
  max-width: 1180px;
  margin: 0 auto;
  padding: 86px 24px;
}

.boki-hero-box{
  position: relative;
  padding: 72px 48px;
  margin-bottom: 56px;
  color: var(--text);
  background: linear-gradient(135deg, #e0f5ef, #e8f4fd, #fef5ec);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.boki-hero-box::before{
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(75, 184, 154, 0.15);
  border-radius: 20px;
  pointer-events: none;
}

.boki-label{
  position: relative;
  z-index: 1;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.24em;
  margin-bottom: 14px;
}

.boki-hero-box h1{
  position: relative;
  z-index: 1;
  font-family: "Yu Mincho", serif;
  font-size: clamp(42px, 5vw, 68px);
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

.boki-hero-box p{
  position: relative;
  z-index: 1;
  max-width: 760px;
  color: var(--muted);
  line-height: 2;
}

.boki-menu-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.boki-menu-card{
  position: relative;
  padding: 40px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.boki-menu-card::before{
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(75, 184, 154, 0.25);
  pointer-events: none;
}

.boki-number{
  position: absolute;
  right: 28px;
  top: 18px;
  font-family: "Yu Mincho", serif;
  font-size: 68px;
  line-height: 1;
  color: rgba(75, 184, 154, 0.16);
  font-weight: 700;
}

.boki-menu-card h2{
  position: relative;
  z-index: 1;
  font-family: "Yu Mincho", serif;
  color: var(--navy);
  font-size: 36px;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.boki-menu-card p{
  position: relative;
  z-index: 1;
  color: var(--muted);
  margin-bottom: 24px;
}

.boki-tags{
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.boki-tags span{
  padding: 6px 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.boki-actions{
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.boki-actions a{
  display: inline-block;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent), #38a085);
  color: #fff;
  font-weight: 900;
}


.boki-study-flow{
  padding: 86px 0 0;
}

.flow-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.flow-card{
  background: rgba(255, 250, 240, 0.9);
  border: 1px solid var(--line);
  padding: 30px;
  box-shadow: 0 18px 44px rgba(30, 58, 95, 0.04);
}

.flow-card strong{
  display: block;
  color: var(--gold-dark);
  font-family: "Yu Mincho", serif;
  font-size: 34px;
  margin-bottom: 10px;
}

.flow-card h3{
  color: var(--navy);
  font-family: "Yu Mincho", serif;
  font-size: 23px;
  margin-bottom: 10px;
}

.flow-card p{
  color: var(--muted);
}


/* =========================
   Qualification Page v3 Image Design
========================= */



.qualification-hero-v3{
  max-width: 1180px;
  margin: 0 auto;
  padding: 86px 24px 56px;
}

.qualification-hero-overlay{
  position: relative;
  overflow: hidden;
  padding: 76px 56px;
  color: #fff;
  background:
    linear-gradient(120deg, rgba(30, 58, 95, 0.38) 0%, rgba(30, 58, 95, 0.43) 48%, rgba(30, 58, 95, 0.23) 100%),
    none;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(75, 184, 154, 0.55);
  box-shadow: 0 30px 80px rgba(30, 58, 95, 0.11);
}

.qualification-hero-overlay::before{
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(75, 184, 154, 0.38);
  pointer-events: none;
}

.qualification-hero-overlay::after{
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  top: -90px;
  border-radius: 50%;
  background: rgba(75, 184, 154, 0.16);
}

.qualification-hero-overlay > *{
  position: relative;
  z-index: 1;
}

.hero-eyebrow{
  color: #7dd3c0;
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.24em;
  margin-bottom: 14px;
}

.qualification-hero-overlay h1{
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(42px, 5vw, 70px);
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

.qualification-hero-overlay p{
  max-width: 780px;
  color: #edf2f7;
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  line-height: 2;
  margin-bottom: 32px;
}

.qualification-search-v3{
  display: flex;
  max-width: 820px;
  padding: 9px;
  background: rgba(255, 250, 240, 0.96);
  border: 1px solid rgba(75, 184, 154, 0.9);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  overflow: hidden;
}

.qualification-search-v3 input{
  flex: 1;
  border: none;
  outline: none;
  padding: 17px 18px;
  background: transparent;
  color: var(--text-strong);
  font-size: 15px;
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
}

.qualification-search-v3 button{
  border: none;
  padding: 0 34px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #fff;
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  font-weight: 900;
  cursor: pointer;
  transition: 0.25s;
  border-radius: var(--radius-sm);
}

.qualification-search-v3 button:hover{
  background: linear-gradient(135deg, var(--button-emphasis-bg-hover), var(--button-emphasis-bg));
}

.quick-tags-v3{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
}

.quick-tags-v3 a{
  padding: 8px 14px;
  border: 1px solid rgba(75, 184, 154, 0.52);
  color: #fff;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  font-size: 13px;
  transition: 0.25s;
}

.quick-tags-v3 a:hover{
  background: rgba(75, 184, 154, 0.28);
}

.qualification-content-v3{
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 96px;
}

.qualification-heading-v3{
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 34px;
}



.qualification-heading-v3 h2{
  color: var(--text-strong);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: 0.08em;
}

.reset-link-v3{
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--line-warm);
  color: var(--text-strong);
  background: rgba(255, 250, 240, 0.8);
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  font-weight: 800;
  transition: 0.25s;
}

.reset-link-v3:hover{
  background: var(--button-emphasis-bg);
  color: #fff;
}

.qualification-grid-v3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.qualification-card-v3{
  overflow: hidden;
  background: var(--surface-warm);
  border: 1px solid var(--line-warm);
  box-shadow: 0 20px 50px rgba(30, 58, 95, 0.05);
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.qualification-card-v3:hover{
  transform: translateY(-8px);
  box-shadow: 0 34px 74px rgba(30, 58, 95, 0.09);
}

.qualification-image-v3{
  position: relative;
  height: 190px;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}

.qualification-image-v3 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.45s;
}

.qualification-card-v3:hover .qualification-image-v3 img{
  transform: scale(1.08);
}

.image-shade-v3{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 58, 95, 0.04), rgba(30, 58, 95, 0.27));
}

.category-pill-v3{
  position: absolute;
  top: 16px;
  right: 18px;
  bottom: auto;
  left: auto;
  max-width: calc(100% - 36px);
  padding: 7px 13px;
  background: rgba(23, 32, 51, 0.72);
  color: var(--text-on-accent);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.qualification-body-v3{
  position: relative;
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-number-v3{
  position: absolute;
  top: 22px;
  right: 26px;
  color: rgba(75,184,154,0.22);
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
}

.qualification-body-v3 h3{
  position: relative;
  z-index: 1;
  color: var(--text-strong);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 30px;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.qualification-body-v3 p{
  position: relative;
  z-index: 1;
  color: #667085;
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 22px;
}

.qualification-meta-v3{
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.qualification-meta-v3 span{
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--line-warm);
  color: var(--muted);
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.qualification-body-v3 button{
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--button-emphasis-bg);
  background: transparent;
  color: var(--text-strong);
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  font-weight: 900;
  cursor: pointer;
  transition: 0.25s;
  border-radius: var(--radius-sm);
}

.qualification-body-v3 button:hover{
  background: var(--button-emphasis-bg);
  color: #fff;
}

.qualification-body-v3 button:disabled{
  border: none;
  background: #cbd5e1;
  color: var(--muted);
  cursor: not-allowed;
}

.no-result-v3{
  text-align: center;
  padding: 64px 32px;
  background: var(--surface-warm);
  border: 1px solid var(--line-warm);
  box-shadow: 0 20px 50px rgba(30, 58, 95, 0.04);
}

.no-result-icon-v3{
  font-size: 42px;
  margin-bottom: 14px;
}

.no-result-v3 h3{
  color: var(--text-strong);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 30px;
  margin-bottom: 12px;
}

.no-result-v3 p{
  color: #667085;
  margin-bottom: 24px;
}

.no-result-v3 a{
  display: inline-block;
  padding: 12px 24px;
  background: var(--button-emphasis-bg);
  color: #fff;
  font-weight: 800;
}


/* =========================
   Search Page
========================= */

.search-page{
  max-width: 1180px;
  margin: 0 auto;
  padding: 86px 24px;
}

.search-hero{
  position: relative;
  overflow: hidden;
  padding: 72px 48px;
  margin-bottom: 56px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(30, 58, 95, 0.47), rgba(45, 90, 135, 0.36)),
    none;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(75, 184, 154, 0.5);
  box-shadow: 0 28px 70px rgba(30, 58, 95, 0.09);
  text-align: center;
}

.search-hero::before{
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(75, 184, 154, 0.35);
  pointer-events: none;
}

.search-hero > *{
  position: relative;
  z-index: 1;
}

.search-hero h1{
  font-family: "Yu Mincho", serif;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.search-hero p{
  color: #edf2f7;
  margin-bottom: 28px;
}

.search-form{
  display: flex;
  max-width: 690px;
  margin: 0 auto;
  padding: 9px;
  background: rgba(255, 250, 240, 0.96);
  border: 1px solid rgba(75, 184, 154, 0.9);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.search-form input{
  flex: 1;
  border: none;
  outline: none;
  padding: 17px 18px;
  background: transparent;
  color: var(--navy);
  font-size: 15px;
}

.search-form button{
  border: none;
  padding: 0 34px;
  background: linear-gradient(135deg, var(--accent), #38a085);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: 0.25s;
}

.search-form button:hover{
  background: linear-gradient(135deg, var(--navy-light), var(--navy));
}

.search-results{
  max-width: 1180px;
  margin: 0 auto;
}

.search-result-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.search-result-card{
  position: relative;
  padding: 34px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(30, 58, 95, 0.04);
  overflow: hidden;
}

.search-result-card::before{
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(75, 184, 154, 0.25);
  pointer-events: none;
}

.search-result-card h3{
  position: relative;
  z-index: 1;
  font-family: "Yu Mincho", serif;
  color: var(--navy);
  font-size: 28px;
  margin-bottom: 14px;
}

.search-result-card p{
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
}

.search-result-card button{
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font-weight: 900;
  cursor: pointer;
  transition: 0.25s;
}

.search-result-card button:hover{
  background: var(--navy);
  color: #fff;
}

.search-result-card button:disabled{
  border: none;
  background: #cbd5e1;
  color: var(--muted);
  cursor: not-allowed;
}

.no-result{
  text-align: center;
  padding: 64px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(30, 58, 95, 0.04);
}

.no-result h3{
  font-family: "Yu Mincho", serif;
  color: var(--navy);
  font-size: 28px;
  margin-bottom: 12px;
}

.no-result p{
  color: var(--muted);
}


/* =========================
   Exam Info & Pass/Fail Box
========================= */

.exam-info{
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.exam-info > div{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 28px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
}

.exam-info span{
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.exam-info strong{
  color: var(--navy);
  font-family: "Yu Mincho", serif;
  font-size: 24px;
}

.pass-box{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 36px;
  margin-top: 18px;
  border: 2px solid var(--line);
  font-size: 14px;
}

.pass-box strong{
  font-family: "Yu Mincho", serif;
  font-size: 28px;
}

.pass-box.passed{
  background: #dcfce7;
  border-color: #22c55e;
  border-left: 6px solid #22c55e;
  color: #166534;
}

.pass-box.failed{
  background: var(--danger-bg);
  border-color: var(--danger);
  border-left: 6px solid var(--danger);
  color: var(--danger-text);
}

/* =========================
   FE Study Page
========================= */

.fe-tabs{
  display: flex;
  gap: 14px;
  margin-bottom: 28px;
}







.fe-tab-icon{
  font-size: 28px;
  line-height: 1;
}

.fe-tab-label{
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.fe-tab.active .fe-tab-label{
  color: #fff;
}

.fe-tab-desc{
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.fe-tab.active .fe-tab-desc{
  color: #7dd3c0;
}

/* Tab badge */
.fe-tab-badge{
  display: inline-block;
  padding: 2px 10px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.fe-tab-badge:empty{
  display: none;
}

.fe-tab.active .fe-tab-badge{
  background: rgba(75, 184, 154, 0.2);
  border-color: rgba(75, 184, 154, 0.4);
  color: #7dd3c0;
}

/* Quiz info bar */
.fe-quiz-info{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.fe-info-count{
  display: inline-block;
  padding: 3px 10px;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}

.fe-info-cats{
  color: var(--muted);
  font-size: 12px;
}

/* Mode bar */


.fe-mode-option{
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

/* Review list clear button (in mode bar) */
.fe-review-clear-btn{
  padding: 6px 14px;
  background: transparent;
  border: 1px solid #fca5a5;
  color: var(--danger-hover);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
}

.fe-review-clear-btn:hover{
  background: #fef2f2;
  border-color: var(--danger);
  transform: none;
  box-shadow: none;
}

/* Review list remove button (in dashboard) */
.fe-review-remove-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 12px;
  background: color-mix(in srgb, var(--exam-blue-soft) 58%, transparent);
  border: 1px solid var(--exam-blue-line);
  border-radius: 12px;
  color: var(--exam-blue-2);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
  line-height: 1;
  white-space: nowrap;
}

.fe-review-remove-btn:hover{
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 62%, var(--line));
  color: var(--danger-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px var(--danger-shadow);
}

.fe-mode-option input[type="radio"]{
  accent-color: var(--gold-dark);
  width: 16px;
  height: 16px;
}

.fe-mode-option small{
  color: var(--muted);
  font-weight: 400;
}


.fe-practice-count-option{
  gap: 8px;
}
.fe-practice-count-option .category-filter{
  min-width: 92px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.fe-accuracy{
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-dark);
}

/* Score bar */


/* Explanation */
.fe-explanation{
  display: none;
  margin-top: 16px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--accent-light) 55%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
}

/* Option states */




.option.fe-correct-answer{
  background: rgba(75, 184, 154, 0.12);
  border-color: #86efac;
  border-left: 4px solid #22c55e;
  position: relative;
}

.option.fe-correct-answer::after{
  content: "← 正解";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* Algorithm nav */
.fe-algo-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 14px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.02);
}

.fe-algo-nav button{
  padding: 10px 20px;
  font-size: 13px;
}

.fe-algo-nav-label{
  font-weight: 900;
  font-size: 15px;
  color: var(--navy);
}


/* =========================
   FE Dashboard
========================= */

.fe-dash{
  padding: 10px 0;
}

.fe-dash-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}

.fe-dash-card{
  position: relative;
  text-align: center;
  padding: 32px 24px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(30, 58, 95, 0.03);
  overflow: hidden;
}

.fe-dash-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, var(--accent), #38a085);
}


.fe-dash-big{
  font-family: "Yu Mincho", serif;
  font-size: 56px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
  margin: 18px 0;
}

.fe-dash-sub{
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.fe-dash-section{
  margin-bottom: 24px;
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(30, 58, 95, 0.03);
}

.fe-dash-section h3{
  font-family: "Yu Mincho", serif;
  color: var(--navy);
  font-size: 20px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.fe-dash-cats{
  display: grid;
  gap: 14px;
}

.fe-dash-cat-row{
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(180px, 1fr) 120px;
  align-items: center;
  gap: 16px;
}

.fe-dash-cat-name{
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-dash-bar-wrap{
  width: 100%;
  min-width: 0;
  height: 22px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.fe-dash-bar{
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
  min-width: 0;
}

.fe-dash-pct{
  min-width: 120px;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
}

.fe-dash-history-wrap{
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--paper) 82%, var(--surface-soft));
  box-shadow: 0 18px 42px rgba(30, 58, 95, 0.06);
}

.fe-dash-history-head{
  display: grid;
  grid-template-columns: 126px 92px minmax(120px, 170px) minmax(220px, 1fr) 136px 116px;
  gap: 12px;
  align-items: center;
  padding: 16px 22px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
}

.fe-dash-history{
  display: grid;
  gap: 0;
  max-height: 480px;
  overflow-y: auto;
  padding: 14px;
}

.fe-dash-history-row{
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 13px;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.fe-dash-history-row + .fe-dash-history-row{
  margin-top: 10px;
}

.fe-dash-history-row:hover{
  background: color-mix(in srgb, var(--exam-blue-soft) 48%, var(--paper));
  border-color: var(--exam-blue-line);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}

.fe-dash-time{
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}






.fe-exam-landing::before{
  left: 28px;
  bottom: 28%;
}

.fe-exam-landing::after{
  right: 28px;
  top: 28%;
}

.fe-exam-kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--exam-blue);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 20px;
}



.fe-exam-landing h3,
.fe-exam-status h3{
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: #0f2344;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.35;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.fe-exam-lead,
.fe-exam-landing > p:not(.quiz-label){
  color: #45627f;
  font-size: clamp(15px, 1.6vw, 18px);
  margin-bottom: 30px;
}















.fe-exam-note strong{
  color: var(--exam-blue-2);
}

.fe-exam-note-icon{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--exam-blue);
  border-radius: 50%;
  color: var(--exam-blue);
  font-weight: 900;
  line-height: 1;
}





.fe-exam-cta-icon{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 22px;
}

.fe-exam-cta-arrow{
  font-size: 38px;
  line-height: 1;
}

.fe-exam-status{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.02);
}

.fe-exam-timer-box,
.fe-exam-answered-box{
  min-width: 150px;
  padding: 14px 18px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}

.fe-exam-timer-box span,
.fe-exam-answered-box span{
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.fe-exam-timer-box strong,
.fe-exam-answered-box strong{
  display: block;
  color: var(--navy);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
}

.fe-exam-submit-row{
  margin-top: 28px;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  text-align: center;
}

.fe-exam-submit-row p{
  color: var(--muted);
  font-size: 13px;
  margin-top: 10px;
}


/* =========================
   FE UX fixes 2026-05
========================= */
.fe-danger-btn{
  background: linear-gradient(135deg, var(--danger), var(--danger-deep)) !important;
  color: #fff !important;
  border: 1px solid var(--danger-deep) !important;
}

.fe-danger-btn:hover{
  background: linear-gradient(135deg, var(--danger-hover), var(--danger-text)) !important;
  box-shadow: 0 14px 28px var(--danger-shadow);
}


.fe-review-remove-current-btn{
  display: block;
  margin: 14px auto 0;
  padding: 10px 18px;
  background: var(--paper);
  color: var(--danger-hover);
  border: 1px solid #fca5a5;
  font-size: 13px;
  font-weight: 800;
}

.fe-review-remove-current-btn:hover{
  background: #fef2f2;
  border-color: var(--danger);
  transform: none;
  box-shadow: none;
}

.fe-recent-history-section{
  position: relative;
}

.fe-dash-section-title{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.fe-dash-section-title h3{
  margin-bottom: 4px;
}

.fe-section-icon{
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid var(--exam-blue);
  border-radius: 14px;
  color: var(--exam-blue);
  font-size: 18px;
  font-weight: 900;
  flex: 0 0 auto;
}

.fe-history-row-v2{
  display: grid;
  grid-template-columns: 126px 92px minmax(120px, 170px) minmax(220px, 1fr) 136px 116px;
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 16px 18px;
}

.fe-history-status,
.fe-history-subject,
.fe-history-category,
.fe-history-title{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-history-status{
  display: inline-grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.fe-history-status-icon{
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--success-bg);
  border: 1px solid color-mix(in srgb, var(--success) 68%, transparent);
  color: var(--success);
  font-size: 24px;
  line-height: 1;
}

.fe-history-status-text{
  color: var(--success);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.fe-history-row-v2.is-incorrect .fe-history-status-icon{
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 58%, transparent);
  color: var(--danger-hover);
}

.fe-history-row-v2.is-incorrect .fe-history-status-text{
  color: var(--danger-hover);
}

.fe-history-subject{
  color: var(--navy);
  font-weight: 900;
}

.fe-history-category{
  color: var(--gold-dark);
  font-weight: 900;
}

.fe-history-title{
  color: var(--navy);
  font-weight: 800;
  line-height: 1.55;
}

.fe-history-row-v2 .fe-dash-time{
  margin-left: 0;
  text-align: right;
  font-size: 13px;
}


/* =========================
   Shared header menu
   - Add or remove exam links in app.py QUALIFICATIONS only.
========================= */
/* ===== Desktop nav (visible ≥ 900px) ===== */
.site-nav-desktop{
  display: flex;
  gap: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

.site-nav-desktop a{
  position: relative;
  padding: 4px 0;
}

.site-nav-desktop a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.25s;
}

.site-nav-desktop a:hover{
  color: var(--navy);
}

.site-nav-desktop a:hover::after{
  width: 100%;
}

/* ===== Hamburger toggle ===== */
.site-menu-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 104px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 8px 18px rgba(30, 58, 95, 0.07);
  cursor: pointer;
  border: none;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}

.site-menu-label{
  display: inline-block;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.site-menu-toggle:hover{
  background: var(--navy-light);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(30, 58, 95, 0.09);
}

.site-menu-hamburger{
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}

.site-menu-hamburger span{
  display: block;
  height: 2px;
  background: var(--paper);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.2s;
}

.site-menu-toggle.is-open .site-menu-hamburger span:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}

.site-menu-toggle.is-open .site-menu-hamburger span:nth-child(2){
  opacity: 0;
}

.site-menu-toggle.is-open .site-menu-hamburger span:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

/* ===== Menu panel ===== */


.site-menu-panel[hidden]{
  display: none !important;
}

.site-menu-content{
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 24px 28px;
  display: grid;
  grid-template-columns: 180px 1fr 260px;
  gap: 24px;
  align-items: start;
}

/* --- Menu columns --- */
.site-menu-col{
  min-width: 0;
}


.site-menu-heading{
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(75, 184, 154, 0.26);
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- Navigation column --- */
.site-menu-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  transition: background 0.2s;
}

.site-menu-link:hover{
  background: rgba(30, 58, 95, 0.03);
}

.site-menu-link + .site-menu-link{
  border-top: 1px solid rgba(75, 184, 154, 0.48);
}

.site-menu-link-icon{
  font-size: 16px;
  line-height: 1;
}

/* --- Exam list column --- */
.site-menu-exam-list{
  list-style: none;
  display: grid;
  gap: 0;
}

.site-menu-exam-list li + li{
  border-top: 1px solid rgba(75, 184, 154, 0.48);
}

.site-menu-exam-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  transition: background 0.2s, border-color 0.2s;
}

a.site-menu-exam-item:hover{
  background: rgba(30, 58, 95, 0.03);
  border-color: var(--line);
}

.site-menu-exam-name{
  flex-shrink: 0;
}

.site-menu-exam-category{
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.site-menu-exam-item.is-disabled{
  color: var(--muted);
  cursor: default;
}

/* --- Search column --- */
.site-menu-search{
  display: flex;
  gap: 8px;
  padding: 10px;
  background: var(--paper);
  border: 1px solid rgba(75, 184, 154, 0.32);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.site-menu-search input{
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 8px 10px;
  background: var(--surface-soft);
  border-radius: 4px;
  color: var(--navy);
  font-size: 13px;
}

.site-menu-search button{
  padding: 8px 16px;
  white-space: nowrap;
  border: none;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.25s;
}

.site-menu-search button:hover{
  background: var(--navy-light);
}


@media (min-width: 901px){
.site-menu-col:not(:last-child){
    padding-right: 24px;
    border-right: 1px solid rgba(75, 184, 154, 0.24);
  }


.site-menu-toggle{
    /* Keep toggle visible on desktop too for full menu access */
  }
}

@media (max-width: 420px) {
  .site-menu-toggle{
    min-width: 92px;
    padding: 0 12px;
    gap: 8px;
  }

  .site-menu-label{
    font-size: 12px;
  }
}


/* =========================
   Shared contact/menu additions and confirm modal
========================= */
.site-header-actions{
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-contact-link{
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-warm);
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
}

.site-contact-link:hover{
  background: var(--navy);
  color: #fff;
}

.confirm-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(30, 58, 95, 0.19);
}

.confirm-modal-box{
  width: min(460px, 100%);
  padding: 30px;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(30, 58, 95, 0.11);
  text-align: center;
}

.confirm-modal-box h3{
  font-family: "Yu Mincho", serif;
  color: var(--navy);
  font-size: 26px;
  margin-bottom: 12px;
}

.confirm-modal-box p{
  color: var(--text);
  margin-bottom: 22px;
}

.confirm-modal-actions{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.shared-study-tabs{
  margin-bottom: 24px;
}

.practice-history-row .fe-history-subject{
  font-size: 12px;
}

.fe-menu-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* =========================
   Unified four-choice study page
========================= */
.unified-key-help{
  margin: -10px 0 24px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.unified-question-card h3{
  font-size: 19px;
  line-height: 1.8;
}


.unified-nav-bottom{
  margin-top: 24px;
  margin-bottom: 0;
}

.unified-nav button:disabled{
  opacity: 0.55;
}


/* =========================
   Shared learning utilities
========================= */
.bookmark-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-warm);
  color: #b45309;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}

.bookmark-btn:hover,
.bookmark-btn.bookmarked{
  background: var(--surface-warm);
  border-color: #f59e0b;
  color: var(--gold-deep);
  box-shadow: 0 8px 18px rgba(180, 83, 9, 0.12);
}



/* =========================
   Bookmark mode and menu accordion additions
========================= */
.site-menu-accordion-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  transform: none;
}

.site-menu-accordion-toggle:hover{
  transform: none;
  box-shadow: none;
}

.site-menu-heading-button{
  flex: 1;
  margin-bottom: 0;
}

.site-menu-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 4px 9px;
  border: 1px solid rgba(75, 184, 154, 0.28);
  border-radius: 999px;
  background: var(--surface-warm);
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.site-menu-chevron{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(75, 184, 154, 0.28);
  border-radius: 999px;
  background: var(--paper);
  color: var(--navy);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.site-menu-accordion-toggle.is-collapsed .site-menu-chevron{
  transform: rotate(-90deg);
}

.site-menu-exam-list[hidden]{
  display: none !important;
}

.bookmark-study-panel{
  margin: 22px 0;
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.bookmark-study-panel h3{
  margin: 0 0 8px;
  font-family: "Yu Mincho", serif;
  color: var(--navy);
  font-size: 22px;
}

.bookmark-study-panel p{
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.bookmark-study-list{
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
  padding-right: 4px;
}

.bookmark-study-row{
  display: grid;
  grid-template-columns: auto minmax(88px, 130px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(75, 184, 154, 0.62);
  background: var(--paper);
  color: var(--navy);
  font-size: 13px;
}

.bookmark-study-row.is-current{
  border-color: var(--gold);
  background: var(--warm);
  box-shadow: inset 3px 0 0 var(--gold);
}

.bookmark-study-star{
  color: #b45309;
  font-size: 16px;
}

.bookmark-study-category{
  color: var(--gold-dark);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookmark-study-title{
  min-width: 0;
  color: var(--navy);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookmark-study-actions{
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.bookmark-jump-btn,
.bookmark-delete-btn{
  padding: 5px 9px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}

.bookmark-delete-btn{
  color: var(--danger-hover);
  border-color: #fca5a5;
}

.bookmark-jump-btn:hover,
.bookmark-delete-btn:hover{
  transform: none;
  box-shadow: none;
}

.bookmark-delete-btn:hover{
  background: #fef2f2;
  border-color: var(--danger);
}

.fe-bookmark-empty-actions{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.fe-bookmark-empty-actions button{
  padding: 10px 16px;
}

@media (max-width: 720px) {
  .bookmark-study-row{
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .bookmark-study-category{
    display: none;
  }
  .bookmark-study-actions{
    flex-direction: column;
  }
}

/* schema_version: 2.0 question assets */
.question-asset{
  margin: 18px 0 20px;
  padding: 14px;
  border: 1px solid rgba(30, 58, 95, 0.08);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-sm);
}
.question-asset img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.question-asset figcaption{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.question-asset-mermaid{
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Bookmark tab icon: keep the star visible on both light and active tab backgrounds. */
.fe-tab .bookmark-tab-icon{
  color: #facc15;
  text-shadow: 0 1px 0 rgba(120, 53, 15, 0.35), 0 0 10px rgba(250, 204, 21, 0.28);
}

.fe-tab.active .bookmark-tab-icon{
  color: #fde047;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 0 12px rgba(253, 224, 71, 0.35);
}

/* v2 rich question content */
.question-body{
  color: var(--navy);
  font-size: 18px;
  line-height: 1.85;
  margin-bottom: 18px;
  overflow-x: auto;
}
.question-body p{ margin: 0 0 12px; }
.question-body pre,
.fe-explanation pre{
  white-space: pre-wrap;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.7;
}

.question-body table,
.fe-explanation table{
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  background: var(--paper);
}
.question-body th,
.question-body td,
.fe-explanation th,
.fe-explanation td{
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.question-body th,
.fe-explanation th{ background: var(--surface-soft); font-weight: 800; }

/* ========================================
   Code Trace Panel - 疑似コード逐次実行UI
   ======================================== */
.code-trace-panel{
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}
.code-trace-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  background: var(--button-emphasis-bg);
  color: #f1f5f9;
}
.code-trace-title{
  font-weight: 700;
  font-size: 14px;
}
.code-trace-controls{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.trace-btn{
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--muted);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--line);
  cursor: pointer;
  transition: background 0.15s;
}
.trace-btn:hover:not(:disabled){
  background: var(--muted);
}
.trace-btn:disabled{
  opacity: 0.4;
  cursor: not-allowed;
}
.trace-step-label{
  font-size: 12px;
  color: var(--muted);
  min-width: 90px;
  text-align: center;
}
.code-trace-body{
  display: grid;
  grid-template-columns: 1fr 240px;
  min-height: 120px;
}


/* Code listing */
.code-trace-code{
  overflow-x: auto;
  border-right: 1px solid var(--line);
}
.trace-code-table{
  width: 100%;
  border-collapse: collapse;
  font-family: "Consolas", "Courier New", "Source Code Pro", monospace;
  font-size: 13px;
  line-height: 1.7;
}
.trace-line{
  transition: background 0.2s;
}
.trace-ln{
  width: 32px;
  padding: 1px 8px 1px 12px;
  text-align: right;
  color: var(--muted);
  user-select: none;
  border-right: 1px solid var(--line);
  font-size: 11px;
}
.trace-code-cell{
  padding: 1px 12px;
  white-space: pre;
}
.trace-line.trace-active{
  background: var(--surface-warm);
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.trace-line.trace-active .trace-ln{
  color: var(--gold-deep);
  font-weight: 700;
}
.trace-line.trace-visited{
  background: rgba(75, 184, 154, 0.12);
}
.trace-line.trace-visited .trace-ln{
  color: var(--accent);
}

/* Variable panel */
.code-trace-vars{
  padding: 8px 12px;
  background: var(--paper);
}
.trace-var-header{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.trace-var-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.trace-var-table th{
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 4px;
  border-bottom: 1px solid var(--line);
}
.trace-var-table td{
  padding: 3px 4px;
  border-bottom: 1px solid var(--line);
}
.trace-var-name{
  font-family: "Consolas", monospace;
  font-weight: 600;
  color: var(--button-emphasis-bg);
}
.trace-var-val{
  font-family: "Consolas", monospace;
  color: var(--navy);
  transition: background 0.3s;
}
.trace-var-val.trace-var-changed{
  background: var(--surface-warm);
  font-weight: 700;
}
.trace-note{
  margin-top: 8px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-soft);
  border-radius: 6px;
  min-height: 20px;
}

/* ========================================
   Flexible choice grid
   ======================================== */
.options-grid{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.options-grid.choices-6 .option,
.options-grid.choices-many .option{
  padding: 8px 12px;
  font-size: 14px;
}

/* Trace panel mobile improvements */


/* Question card SVG images responsive */
/* Improve option label touch targets on mobile */


/* ========================================
   Review mode improvements
   ======================================== */

.review-nudge span{
  font-weight: 600;
}
.review-nudge-btn{
  padding: 8px 16px !important;
  background: var(--gold) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: var(--radius-xs, 6px) !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  box-shadow: none !important;
  transform: none !important;
}
.review-nudge-btn:hover{
  background: var(--gold-dark) !important;
  transform: none !important;
  box-shadow: none !important;
}


/* Category filter dropdown */
.category-filter{
  padding: 9px 12px;
  border: 1px solid var(--line, #e8e0d8);
  border-radius: var(--radius-xs, 6px);
  background: var(--paper);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  max-width: 200px;
  transition: border-color 0.2s;
}
.category-filter:focus{
  border-color: var(--accent, #4bb89a);
}


/* Theme toggle button */
.theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s;
  box-shadow: none;
  transform: none;
  line-height: 1;
}
.theme-toggle:hover{
  background: var(--accent-light);
  border-color: var(--accent);
  transform: none;
  box-shadow: none;
}

/* Study filter / dashboard polish */
.fe-mode-bar .category-filter{
  min-width: 140px;
}
.fe-dash-bar.is-good{
  background: #22c55e;
}
.fe-dash-bar.is-ok{
  background: #f59e0b;
}
.fe-dash-bar.is-weak{
  background: var(--danger);
}

/* --- Responsive --- */


/* ========================================
   Readability and consistency pass
   長時間学習で読みやすい文字サイズ・余白・フォーカス表示
   ======================================== */
html{
  scroll-behavior: smooth;
  overflow-x: clip;
}

button,
input,
select,
textarea{
  font: inherit;
}

button,
a,
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]){
  -webkit-tap-highlight-color: transparent;
}

:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

.site-header,
.quiz-box,
.question-card,
.fe-dash-section,
.fe-dash-card,
.qualification-card-v3,
.search-result-card,
.boki-menu-card,
.flow-card{
  color: var(--text);
}

.quiz-box,
.question-card,
.fe-dash-section,
.fe-dash-card,
.qualification-card-v3,
.search-result-card,
.boki-menu-card,
.flow-card{
  background-color: var(--paper);
}

.quiz-header > p:last-child,
.section-title > p:last-child,
.boki-hero-box p,
.qualification-body-v3 p,
.search-result-card p{
  color: var(--muted);
  line-height: 1.9;
}

.question-card h3,
.question-body{
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.9;
  letter-spacing: 0.015em;
}

.question-body p,
.fe-explanation,
.option,
.bookmark-study-title,
.fe-dash-history-row,
.fe-history-row-v2{
  line-height: 1.85;
}

.option input{
  margin-top: 0.35em;
  accent-color: var(--accent);
}

.option:has(input:checked){
  border-color: var(--accent);
  background: var(--accent-light);
}

.fe-explanation,
.review-nudge,
.review-success{
  font-size: 15px;
}

.category-filter,
.site-menu-search input,
.search-form input,
.qualification-search-v3 input{
  min-height: 44px;
  color: var(--text);
}

.fe-mode-bar,
.unified-mode-bar,
.result-actions,
.boki-actions{
  gap: 12px;
}

.fe-tab-desc,
.fe-info-cats,
.fe-dash-sub,
.fe-dash-pct,
.site-menu-exam-category{
  color: var(--muted);
}

/* Home page dark/readability refinements */


@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* ========================================
   Visual QA fixes
   - Prevent decorative numbers and long labels from visually overlapping.
   - Keep mobile header inside the viewport.
   - Allow search inputs to shrink before causing horizontal scroll.
   ======================================== */
.qualification-body-v3 h3,
.boki-menu-card h2,
.search-result-card h3{
  padding-right: 78px;
  overflow-wrap: anywhere;
}

.card-number-v3,
.boki-number{
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
}

.qualification-body-v3 > *:not(.card-number-v3),
.boki-menu-card > *:not(.boki-number){
  position: relative;
  z-index: 1;
}

.qualification-search-v3 input,
.search-form input,
.site-menu-search input{
  min-width: 0;
}


/* Visual QA refinement: keep mobile course titles readable without forcing awkward line breaks. */


/* ========================================
   Mobile clarity + dark mode completion pass
   - Relax cramped mobile cards and controls.
   - Remove decorative inset lines on small screens where they compete with text.
   - Cover UI parts that previously stayed light in dark mode.
   ======================================== */


/* Dark mode completion: containers,
tabs,
forms,
generated result panels,
and card internals. */


/* Final dark-mode specificity guard for mobile screenshots and older browsers. */


/* ========================================
   Home / qualification layout consistency pass
   - Put the popular course cards directly under the home overview.
   - Keep mobile pages away from the viewport edge.
   - Prevent qualification image subtitles from being covered by UI badges.
   - Unify rounded corners across the qualification list.
   ======================================== */
.qualification-hero-overlay,
.qualification-search-v3,
.qualification-card-v3,
.no-result-v3,
.reset-link-v3{
  border-radius: var(--radius);
}

.quick-tags-v3 a,
.qualification-meta-v3 span,
.category-pill-v3{
  border-radius: 999px;
}


@media (max-width: 360px){
.logo{
    font-size: 14px;
  }

  .site-menu-label{
    display: none;
  }

  .site-menu-toggle{
    min-width: 42px;
    width: 42px;
    padding: 0;
  }


.quiz-section{
    padding-left: 10px;
    padding-right: 10px;
  }

  .quiz-box{
    padding: 20px 16px;
  }

  .quiz-header h2{
    font-size: 28px;
  }

  .fe-tab{
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 13px 12px;
  }

  .fe-tab-icon{
    font-size: 22px;
  }

  .qualification-body-v3 h3{
    padding-right: 42px;
  }
.qualification-hero-v3,
.qualification-content-v3{
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Keep the mobile hero headline inside the card without horizontal text overflow. */
/* ========================================
   Color and button consistency pass
   - Improve dark-mode search/menu colors.
   - Keep Boki light theme soft while making Boki dark theme closer to FE.
   - Reuse the glowing action-button pattern across pages.
   ======================================== */


/* Site menu search: avoid pale/low-contrast buttons in dark theme. */
.site-menu-search button,
.search-form button,
.qualification-search-v3 button{
  background: linear-gradient(135deg, var(--action-bg-strong), var(--action-bg-strong-2));
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--action-bg-strong-2) 72%, transparent);
  box-shadow: var(--action-shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.site-menu-search button:hover,
.search-form button:hover,
.qualification-search-v3 button:hover{
  transform: translateY(-1px);
  box-shadow: var(--action-shadow-hover);
  background: linear-gradient(135deg, var(--action-bg-strong-2), var(--action-bg-strong));
}


/* Shared action button style: visible at rest,
glowing on hover. */
.qualification-body-v3 button:not(:disabled),
.search-result-card button:not(:disabled),
.boki-actions a,
.submit-btn,
.result-actions button,
.result-actions a,
.fe-bookmark-empty-actions button:not(:disabled){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--action-border);
  background: var(--action-bg);
  color: var(--action-text);
  font-weight: 900;
  box-shadow: var(--action-shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.qualification-body-v3 button:not(:disabled):hover,
.search-result-card button:not(:disabled):hover,
.boki-actions a:hover,
.submit-btn:hover,
.result-actions button:hover,
.result-actions a:hover,
.fe-bookmark-empty-actions button:not(:disabled):hover{
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--action-bg-strong), var(--action-bg-strong-2));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--action-shadow-hover);
}


/* Disabled buttons stay quiet and readable. */
.qualification-body-v3 button:disabled,
button:disabled{
  background: color-mix(in srgb, var(--line) 70%, var(--paper));
  border-color: var(--line);
  color: var(--muted);
  box-shadow: none;
}

/* Qualification card category badges use the base top-right style to avoid generated icon/English text overlap. */

/* Boki dark theme: keep the light theme warm,
but prevent washed-out pastel cards in dark mode. */


/* FE is already readable; only normalize border/glow so it aligns with the Boki dark pass. */


/* Dark qualification page: text and card contrast adjustments. */


/* Keep mobile layouts airy while preserving the unified action look. */


/* Ensure secondary action links do not fall back to the old navy-only style. */
.boki-actions a:nth-child(2){
  background: var(--action-bg);
  border: 1px solid var(--action-border);
  color: var(--action-text);
  box-shadow: var(--action-shadow);
}

.boki-actions a:nth-child(2):hover{
  background: linear-gradient(135deg, var(--action-bg-strong), var(--action-bg-strong-2));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--action-shadow-hover);
}


/* Keyboard shortcut help modal */
.shortcut-help-link{
  appearance: none;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--accent);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.shortcut-help-link:hover{
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 8px 18px rgba(49, 134, 111, 0.13);
}

.shortcut-help-grid{
  display: grid;
  gap: 8px;
  margin: 18px 0 8px;
  text-align: left;
}

.shortcut-help-row{
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
}

.shortcut-help-key{
  display: inline-flex;
  justify-content: center;
  min-width: 44px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--text-strong);
  font-weight: 900;
  font-size: 12px;
}


/* Mock exam trend chart */
.fe-mock-trend{
  padding: 14px;
  margin-bottom: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.fe-mock-trend-title{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.fe-mock-trend svg{
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.fe-mock-trend-line{
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fe-mock-trend-area{
  fill: color-mix(in srgb, var(--accent) 16%, transparent);
}

.fe-mock-trend-dot{
  fill: var(--paper);
  stroke: var(--accent);
  stroke-width: 3;
}

.fe-mock-trend-axis{
  stroke: var(--line);
  stroke-width: 1;
}

.fe-mock-heatmap{
  display: grid;
  gap: 10px;
}

.fe-mock-heatmap-row{
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) repeat(3, minmax(74px, .8fr));
  gap: 8px;
  align-items: stretch;
}

.fe-mock-heatmap-cell{
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}

.fe-mock-heatmap-cell.is-head{
  color: var(--muted);
  font-weight: 900;
  background: var(--paper);
}

.fe-mock-heatmap-cell.is-good{ border-color: var(--accent); background: var(--accent-light); }
.fe-mock-heatmap-cell.is-ok{ border-color: var(--gold); background: var(--warm); }
.fe-mock-heatmap-cell.is-weak{ border-color: var(--danger); background: var(--danger-bg); }


/* Mock exam history in shared dashboards */
.fe-mock-history-list{
  display: grid;
  gap: 10px;
}

.fe-mock-history-row{
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
}

.fe-mock-history-date,
.fe-mock-history-wrong{
  color: var(--muted);
  font-size: 13px;
}

.fe-mock-history-score{
  font-size: 18px;
  font-weight: 900;
  color: var(--accent);
}

.fe-mock-history-score.is-ok{ color: var(--gold-dark); }
.fe-mock-history-score.is-weak{ color: var(--danger); }


/* ========================================
   Review fix: theme-safe surfaces and mobile overflow guards
   ======================================== */
.question-body,
.fe-explanation{
  overflow-x: auto;
}

.question-body pre,
.fe-explanation pre{
  background: var(--surface-soft);
  border-color: var(--line);
}

/* Long labels should not push mobile layouts outside the viewport. */
.category-pill-v3,
.qualification-meta-v3 span,
.quick-tags-v3 a,
.site-menu-count,
.fe-tab-badge,
.bookmark-study-category,
.fe-history-category,
.fe-dash-cat-name{
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qualification-body-v3 button:disabled,
button:disabled{
  background: color-mix(in srgb, var(--line) 70%, var(--paper));
  border-color: var(--line);
  color: var(--muted);
}

.code-trace-slot{
  margin: 14px 0 4px;
}
[data-theme="dark"] .code-trace-panel{
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   SEO detail pages
   学習アプリ画面とは役割を分けた、検索流入・回遊向けHTMLページ。
   ========================================================= */
.seo-main{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 64px;
}

.seo-hero,
.seo-detail-card,
.seo-section{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

.seo-hero{
  padding: clamp(28px, 5vw, 56px);
  margin-bottom: 24px;
  background:
    radial-gradient(circle at 12% 18%, rgba(75, 184, 154, .18), transparent 30%),
    linear-gradient(135deg, var(--surface-soft), var(--paper));
}

.seo-hero h1,
.seo-detail-head h1,
.seo-section-heading h2{
  color: var(--text-strong);
  line-height: 1.35;
  letter-spacing: .02em;
}

.seo-hero h1{
  font-size: clamp(1.75rem, 5vw, 3rem);
  margin: 8px 0 12px;
}

.seo-hero p,
.seo-section-heading{
  color: var(--muted);
}

.seo-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.seo-section{
  padding: clamp(22px, 4vw, 36px);
  margin-top: 24px;
}

.seo-section-heading{
  margin-bottom: 18px;
}

.seo-section-heading h2{
  margin: 4px 0 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.seo-category-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.seo-category-card,
.seo-question-row,
.seo-summary-card{
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--text);
}

.seo-category-card,
.seo-question-row{
  display: grid;
  gap: 8px;
  padding: 18px;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.seo-category-card:hover,
.seo-question-row:hover{
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}

.seo-card-kicker,
.seo-question-category{
  color: var(--accent);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.seo-card-meta{
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

.seo-question-list{
  display: grid;
  gap: 12px;
}

.seo-question-row{
  grid-template-columns: minmax(96px, 160px) 1fr minmax(120px, auto);
  align-items: center;
}

/* v128 fix: study-method rows (number + title + body). Stop long JP titles
   from collapsing into a too-narrow column. */
.seo-question-list .seo-question-row{
  grid-template-columns: 48px 1fr;
  align-items: start;
  column-gap: 16px;
  row-gap: 4px;
}
.seo-question-list .seo-question-row .seo-question-category{
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1rem;
}
.seo-question-list .seo-question-row strong{
  grid-column: 2;
  line-height: 1.5;
  font-size: 1.02rem;
}
.seo-question-list .seo-question-row .seo-card-meta{
  grid-column: 2;
}

.seo-breadcrumb{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: .92rem;
}

.seo-breadcrumb a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}

.seo-detail-card{
  padding: clamp(24px, 5vw, 48px);
}

.seo-detail-head{
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.seo-detail-head h1{
  margin: 8px 0 12px;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
}

.seo-meta-line{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.seo-meta-line span,
.seo-choice-id{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 800;
  font-size: .85rem;
}

.seo-question-body,
.seo-answer-box{
  margin-top: 24px;
}

.seo-question-body h2,
.seo-answer-box h2{
  color: var(--text-strong);
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.seo-assets{
  overflow-x: auto;
  margin: 16px 0;
}

.seo-assets img{
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
}

.seo-choice-list{
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.seo-choice-list li{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  color: var(--text);
}

.seo-choice-list li.is-correct{
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-light) 72%, var(--paper));
}

.seo-correct-answer{
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 16px;
  background: var(--surface-soft);
  color: var(--text);
}

.seo-summary-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.seo-summary-card{
  padding: 16px;
}

.seo-summary-card span{
  display: block;
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 6px;
}

.seo-summary-card strong{
  color: var(--text-strong);
  font-size: 1.45rem;
}

@media (max-width: 700px) {
  .seo-main{
    width: min(100% - 20px, 640px);
    padding-top: 18px;
  }

  .seo-hero,
.seo-detail-card,
.seo-section{
    border-radius: 22px;
  }

  .seo-question-row{
    grid-template-columns: 1fr;
  }
  .seo-question-list .seo-question-row{
    grid-template-columns: 1fr;
  }
  .seo-question-list .seo-question-row .seo-question-category{
    grid-row: auto;
  }
  .seo-question-list .seo-question-row strong,
  .seo-question-list .seo-question-row .seo-card-meta{
    grid-column: 1;
  }

  .seo-actions .start-btn,
.seo-actions .secondary-btn{
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   v18: shared empty states and dashboard helper classes
   Inline styles previously embedded in study_core/progress are centralized here.
   ========================================================= */
.empty-state{
  padding: 48px;
  text-align: center;
}

.empty-state-card{
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
}

.empty-state-icon{
  font-size: 48px;
  line-height: 1;
  margin-bottom: 16px;
}

.empty-state h3{
  font-family: "Yu Mincho", serif;
  color: var(--navy);
  font-size: 24px;
  margin-bottom: 12px;
}

.empty-state p{
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 24px;
}

.fe-explanation.is-visible{
  display: block;
}

.fe-dash-note,
.dashboard-empty-note,
.review-summary-empty{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.dashboard-section-note{
  color: var(--muted);
  font-size: 13px;
  margin: -8px 0 16px;
}

.dashboard-reset-actions{
  margin-top: 28px;
}

.streak-dashboard-wrap{
  text-align: center;
  margin-bottom: 16px;
}

/* =========================
   v70 学習カレンダー / 連続学習記録
========================= */

.learning-calendar-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.streak-display-idle{
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  background: var(--accent-light);
  color: var(--accent);
}
.learning-calendar-stats{
  display: flex;
  gap: 16px;
}
.learning-calendar-stats .cal-stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.learning-calendar-stats .cal-stat strong{
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
}
.learning-calendar-stats .cal-stat small{
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-top: 2px;
}


.cal-cell.cal-empty{ background: transparent; }






.learning-calendar-legend{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.learning-calendar-legend small{
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin: 0 4px;
}


.review-summary-lead{
  color: var(--text);
  font-size: 14px;
  margin-bottom: 12px;
}

.review-summary-chips{
  margin-bottom: 12px;
}

.review-summary-chip{
  display: inline-block;
  padding: 4px 10px;
  background: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 20px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
  margin: 2px 4px 2px 0;
}

.review-summary-list{
  margin-bottom: 8px;
}

.review-summary-row{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.review-summary-wrong{
  color: var(--danger);
  font-weight: 700;
  min-width: 28px;
}

.review-summary-category{
  color: var(--muted);
  min-width: 80px;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-summary-title{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-summary-more{
  color: var(--muted);
  font-size: 12px;
}


/* SEO question pager: improves internal linking without touching the study app. */
.seo-question-pager{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
}

.seo-question-pager a,
.seo-question-pager span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  text-align: center;
}

.seo-question-pager a:hover{
  border-color: var(--accent);
  color: var(--gold-dark);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);
}

.seo-question-pager .is-disabled{
  color: var(--muted);
  background: var(--surface-soft);
  cursor: not-allowed;
}


/* =========================================================
   Extended question renderers
   numeric_input / table_input / accounting_entry / statement_choice
   ========================================================= */
.numeric-answer-box,
.table-input-box,
.accounting-entry-box,
.statement-list{
  width: 100%;
}

.numeric-answer-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.numeric-answer-label,
.table-blank-row span{
  display: inline-block;
  font-weight: 800;
  color: var(--text-strong);
  margin-bottom: 6px;
}

.numeric-answer-input,
.numeric-input-field,
.table-blank-input,
.accounting-account,
.accounting-amount{
  width: min(100%, 280px);
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.numeric-answer-input:focus,
.numeric-input-field:focus,
.table-blank-input:focus,
.accounting-account:focus,
.accounting-amount:focus{
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-color: var(--accent);
}

.numeric-answer-input.is-correct,
.numeric-input-field.is-correct,
.table-blank-input.is-correct{
  border-color: var(--accent);
  background: var(--paper);
  background: color-mix(in srgb, var(--accent) 9%, var(--paper));
}

.numeric-answer-input.is-incorrect,
.numeric-input-field.is-incorrect,
.table-blank-input.is-incorrect{
  border-color: var(--danger);
  background: var(--paper);
  background: color-mix(in srgb, var(--danger) 8%, var(--paper));
}

.numeric-answer-unit{
  font-weight: 800;
  color: var(--text-strong);
}

.numeric-answer-note{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .92rem;
}

.numeric-answer-correct,
.table-input-correct-list,
.accounting-correct-box{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
  color: var(--text);
}

.table-input-scroll,
.accounting-entry-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-input-table,
.accounting-entry-table{
  width: 100%;
  min-width: 540px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper);
}

.table-input-table th,
.table-input-table td,
.accounting-entry-table th,
.accounting-entry-table td{
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 10px;
  vertical-align: middle;
}

.table-input-table th,
.accounting-entry-table th{
  background: var(--surface-soft);
  color: var(--text-strong);
  text-align: left;
}

.table-input-table tr:last-child td,
.accounting-entry-table tr:last-child td{
  border-bottom: 0;
}

.table-input-table td:last-child,
.accounting-entry-table td:last-child,
.table-input-table th:last-child,
.accounting-entry-table th:last-child{
  border-right: 0;
}

.table-input-cell .table-blank-input{
  width: 100%;
  min-width: 120px;
}

.table-blank-list{
  display: grid;
  gap: 12px;
}

.table-blank-row{
  display: grid;
  grid-template-columns: minmax(110px, 220px) minmax(140px, 1fr);
  gap: 12px;
  align-items: center;
}

.table-input-correct-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px dashed var(--line);
}

.table-input-correct-row.is-correct{
  color: var(--accent);
}

.table-input-correct-row.is-incorrect{
  color: var(--danger);
}

.accounting-entry-table td{
  min-width: 160px;
}

.accounting-account,
.accounting-amount{
  width: 100%;
  margin: 4px 0;
}

.accounting-correct-box{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.accounting-correct-entry{
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.statement-list{
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.statement-item{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

.statement-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  height: 2.4em;
  border-radius: 999px;
  background: var(--button-emphasis-bg);
  color: var(--text-on-accent, #fff);
  font-weight: 900;
}

.statement-text{
  color: var(--text);
  line-height: 1.8;
}


/* ========================================
   v40 - Mobile responsive hardening
   全画面を360px級スマホで読みやすく、押しやすくするための最終調整。
   既存UIの意味は変えず、横溢れ・小さすぎるタップ領域・履歴/表の詰まりを防ぐ。
======================================== */


img,
svg,
canvas,
video{
  max-width: 100%;
  height: auto;
}

@media (min-width: 701px) and (max-width: 980.98px) {
.fe-dashboard-grid-v37,
.course-card-grid-v39,
.qualification-grid-v39,
.flow-grid-v39{
    grid-template-columns: 1fr;
  }
.fe-dash-hero-v37,
.course-hero-v39,
.qualification-hero-panel-v39{
    max-width: 100%;
  }

  .quiz-section,
.qualification-content-v39,
.boki-main.course-select-v39{
    padding-left: 20px;
    padding-right: 20px;
  }
}



/* ========================================
   Dark Mode overrides (consolidated)
   - Keep all dark-mode specific selectors in this final section.
   - Prefer editing :root[data-theme="dark"] tokens before adding selector overrides.
   ======================================== */
:root[data-theme="dark"]{
  color-scheme: dark;
  --navy: #c8ddf0;
  --navy-light: #a3c4e0;
  --gold: #f0965b;
  --gold-dark: #e8884a;
  --cream: var(--dark-page-end);
  --paper: #212636;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --line: #334155;
  --green: #1a3a28;
  --red: var(--danger-bg);
  --accent: #5cc8a8;
  --accent-light: #1a3a30;
  --warm: #2a2218;
  --coral: #f07b6e;
  --sky: #1a2a3a;
  --surface-soft: var(--dark-page-mid);
  --surface-warm: #1e2433;
  --line-warm: #334155;
  --text-strong: var(--dark-text-heading);
  --button-emphasis-bg: var(--dark-button-bg);
  --button-emphasis-bg-hover: var(--dark-button-bg-hover);
  --gold-deep: #f2b26d;
  --danger: #f87171;
  --danger-hover: #fb7185;
  --danger-deep: #ef4444;
  --danger-text: #fecdd3;
  --danger-bg: #3a1a1a;
  --danger-shadow: rgba(248, 113, 113, 0.22);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
  --action-bg: rgba(30, 126, 107, 0.22);
  --action-bg-strong: #239577;
  --action-bg-strong-2: #3ad0aa;
  --action-text: #eafff7;
  --action-border: rgba(92, 200, 168, 0.72);
  --action-shadow: 0 14px 34px rgba(28, 171, 134, 0.18);
  --action-shadow-hover: 0 20px 52px rgba(58, 208, 170, 0.34);
  --exam-blue: #3b82f6;
  --exam-blue-2: #2563eb;
  --exam-blue-soft: rgba(59, 130, 246, 0.14);
  --exam-blue-line: var(--dark-blue-border-strong);
  --exam-card-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
  --exam-card-shadow-hover: 0 28px 80px rgba(37, 99, 235, 0.28);
  --success: #4ade80;
  --success-bg: rgba(34, 197, 94, 0.15);
  --course-blue: var(--dark-link-blue-strong);
  --course-blue-2: #38bdf8;
  --course-navy: var(--dark-blue-pale);
  --course-ink: var(--dark-text-heading);
  --course-card: rgba(33, 38, 54, 0.92);
  --course-card-border: rgba(96, 165, 250, 0.26);
  --course-glow: 0 26px 70px rgba(14, 165, 233, 0.16);
  /* v56 dark semantic tokens: use these before adding selector-level color literals. */
  --dark-page-start: #0f1219;
  --dark-page-mid: var(--surface-soft);
  --dark-page-end: var(--paper);
  --dark-surface-deep: #111827;
  --dark-surface-base: #151a26;
  --dark-surface-raised: #1a1e2a;
  --dark-surface-overlay: rgba(8, 22, 42, 0.78);
  --dark-surface-overlay-soft: rgba(8, 22, 42, 0.72);
  --dark-surface-overlay-hover: rgba(14, 38, 72, 0.88);
  --dark-card-blue: rgba(14, 31, 57, 0.82);
  --dark-text-heading: #eaf7ff;
  --dark-text-bright: #f8fbff;
  --dark-text-inverse: #ffffff;
  --dark-text-accent-bright: #f8fffd;
  --dark-muted-blue: #c8d7ea;
  --dark-muted-blue-2: #bdd2e4;
  --dark-muted-blue-3: #a9c7ee;
  --dark-muted-blue-4: #bed3ee;
  --dark-link-blue: #93c5fd;
  --dark-link-blue-strong: #60a5fa;
  --dark-link-blue-soft: #bfdbfe;
  --dark-blue-pale: #dbeafe;
  --dark-accent-muted: #88dec8;
  --dark-accent-from: #1f8e72;
  --dark-accent-to: #42dfba;
  --dark-accent-to-soft: #37cba6;
  --dark-accent-from-soft: #249a7c;
  --dark-button-bg: #25476f;
  --dark-button-bg-hover: #2f5a88;
  --dark-button-border: #3b6ea3;
  --dark-success-surface: #163323;
  --dark-warning-surface: #493316;
  --dark-blue-border: rgba(96, 165, 250, 0.32);
  --dark-blue-border-strong: rgba(96, 165, 250, 0.42);
  --dark-blue-border-soft: rgba(96, 165, 250, 0.24);
  --dark-shadow-strong: rgba(0, 0, 0, 0.32);
  --dark-shadow-card: rgba(0, 0, 0, 0.22);
}





:root[data-theme="dark"] footer{
  background: var(--surface-soft);
  color: var(--muted);
  border-top-color: var(--line);
}




:root[data-theme="dark"] .site-menu-search,
:root[data-theme="dark"] .site-contact-link,
:root[data-theme="dark"] .unified-key-help,
:root[data-theme="dark"] .bookmark-btn,
:root[data-theme="dark"] .site-menu-count,
:root[data-theme="dark"] .site-menu-chevron,
:root[data-theme="dark"] .bookmark-jump-btn,
:root[data-theme="dark"] .bookmark-delete-btn{
  background: var(--paper);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] .site-menu-search input{
  background: var(--paper);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] .site-menu-link:hover,
:root[data-theme="dark"] a.site-menu-exam-item:hover{
  background: rgba(92, 200, 168, 0.12);
}

:root[data-theme="dark"] .bookmark-study-row.is-current{
  background: #2a2218;
}

:root[data-theme="dark"] .pass-box.passed{
  background: var(--green);
}

:root[data-theme="dark"] .pass-box.failed{
  background: var(--red);
}

:root[data-theme="dark"] .streak-display{
  background: #2a2218;
  border-color: rgba(240, 150, 91, 0.3);
  color: #fdba74;
}

/* v70 学習カレンダー（dark） */







:root[data-theme="dark"] .question-card,
:root[data-theme="dark"] .quiz-box{
  background: var(--paper);
}





:root[data-theme="dark"] .fe-correct-answer{
  background: var(--green) !important;
}

:root[data-theme="dark"] .fe-incorrect{
  background: var(--red) !important;
}

:root[data-theme="dark"] .question-body pre,
:root[data-theme="dark"] .fe-explanation pre{
  background: var(--paper);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] .question-body table,
:root[data-theme="dark"] .fe-explanation table{
  background: var(--paper);
}

:root[data-theme="dark"] .question-body th,
:root[data-theme="dark"] .fe-explanation th{
  background: var(--paper);
}

:root[data-theme="dark"] .question-body td,
:root[data-theme="dark"] .question-body th,
:root[data-theme="dark"] .fe-explanation td,
:root[data-theme="dark"] .fe-explanation th{
  border-color: var(--line);
}

:root[data-theme="dark"] .code-trace-panel{
  background: var(--paper);
  border-color: var(--line);
}

:root[data-theme="dark"] .code-trace-vars{
  background: var(--paper);
}





:root[data-theme="dark"] .category-filter{
  background: var(--paper);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] .confirm-modal-box{
  background: var(--paper);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] .question-asset{
  background: rgba(30, 36, 51, 0.8);
  border-color: var(--line);
}

:root[data-theme="dark"] .bookmark-study-panel{
  background: var(--paper);
  border-color: var(--line);
}

:root[data-theme="dark"] .bookmark-study-row{
  background: var(--paper);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] .fe-dash-bar-wrap{
  background: var(--dark-surface-deep);
}

:root[data-theme="dark"] .fe-dash-bar.is-good{
  background: #4ade80;
}

:root[data-theme="dark"] .fe-dash-bar.is-ok{
  background: #fbbf24;
}

:root[data-theme="dark"] .fe-dash-bar.is-weak{
  background: var(--danger);
}
:root[data-theme="dark"] .boki-menu-card,
:root[data-theme="dark"] .flow-card,
:root[data-theme="dark"] .qualification-card-v3,
:root[data-theme="dark"] .search-result-card{
  background: var(--paper);
  border-color: var(--line);
}
:root[data-theme="dark"] .search-form input,
:root[data-theme="dark"] .qualification-search-v3 input{
  color: var(--text);
}
:root[data-theme="dark"] .search-form input,
:root[data-theme="dark"] .qualification-search-v3 input{
  background: var(--paper);
  border-color: var(--line);
}
:root[data-theme="dark"] .question-card h3{
  color: var(--navy);
}

:root[data-theme="dark"] .fe-explanation{
  background: #1a2a30;
  border-color: var(--line);
}

:root[data-theme="dark"] .qualification-page-v3,
:root[data-theme="dark"] .boki-main,
:root[data-theme="dark"] .search-page,
:root[data-theme="dark"] .quiz-section{
  background: linear-gradient(175deg, var(--dark-page-start) 0%, var(--surface-soft) 52%, var(--dark-surface-deep) 100%);
}

:root[data-theme="dark"] .fe-tab,
:root[data-theme="dark"] .fe-mode-bar,
:root[data-theme="dark"] .unified-key-help,
:root[data-theme="dark"] .fe-algo-nav,
:root[data-theme="dark"] .fe-exam-landing,
:root[data-theme="dark"] .fe-exam-status,
:root[data-theme="dark"] .fe-exam-timer-box,
:root[data-theme="dark"] .fe-exam-answered-box,
:root[data-theme="dark"] .exam-info,
:root[data-theme="dark"] .pass-box,
:root[data-theme="dark"] .no-result,
:root[data-theme="dark"] .no-result-v3{
  background: var(--paper);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] .fe-tab:not(.active):hover{
  background: #20293a;
  border-color: var(--accent);
}

:root[data-theme="dark"] .fe-tab:not(.active) .fe-tab-label,
:root[data-theme="dark"] .fe-mode-option,
:root[data-theme="dark"] .fe-algo-nav-label,
:root[data-theme="dark"] .no-result h3,
:root[data-theme="dark"] .no-result-v3 h3,
:root[data-theme="dark"] .qualification-heading-v3 h2,
:root[data-theme="dark"] .qualification-body-v3 h3,
:root[data-theme="dark"] .flow-card h3,
:root[data-theme="dark"] .boki-menu-card h2,
:root[data-theme="dark"] .search-result-card h3{
  color: var(--navy);
}

:root[data-theme="dark"] .fe-tab:not(.active) .fe-tab-desc,
:root[data-theme="dark"] .fe-mode-option small,
:root[data-theme="dark"] .no-result p,
:root[data-theme="dark"] .no-result-v3 p,
:root[data-theme="dark"] .qualification-body-v3 p,
:root[data-theme="dark"] .flow-card p,
:root[data-theme="dark"] .boki-menu-card p,
:root[data-theme="dark"] .search-result-card p{
  color: var(--muted);
}

:root[data-theme="dark"] .fe-tab-badge,
:root[data-theme="dark"] .boki-tags span,
:root[data-theme="dark"] .qualification-meta-v3 span,
:root[data-theme="dark"] .category-pill-v3,
:root[data-theme="dark"] .reset-link-v3{
  background: var(--paper);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] .qualification-card-v3,
:root[data-theme="dark"] .qualification-body-v3,
:root[data-theme="dark"] .flow-card,
:root[data-theme="dark"] .boki-menu-card,
:root[data-theme="dark"] .search-result-card{
  background: var(--paper);
  border-color: var(--line);
}

:root[data-theme="dark"] .qualification-body-v3 button,
:root[data-theme="dark"] .search-result-card button,
:root[data-theme="dark"] .reset-link-v3,
:root[data-theme="dark"] .bookmark-jump-btn,
:root[data-theme="dark"] .bookmark-delete-btn{
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] .qualification-body-v3 button:hover,
:root[data-theme="dark"] .search-result-card button:hover,
:root[data-theme="dark"] .reset-link-v3:hover{
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--text);
}

:root[data-theme="dark"] .qualification-body-v3 button:disabled,
:root[data-theme="dark"] .search-result-card button:disabled{
  background: #263244;
  border-color: #334155;
  color: var(--muted);
}

:root[data-theme="dark"] .qualification-search-v3,
:root[data-theme="dark"] .search-form,
:root[data-theme="dark"] .site-menu-search{
  background: var(--paper);
  border-color: var(--line);
}

:root[data-theme="dark"] .qualification-search-v3 input,
:root[data-theme="dark"] .search-form input,
:root[data-theme="dark"] .site-menu-search input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select{
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] .qualification-search-v3 input::placeholder,
:root[data-theme="dark"] .search-form input::placeholder,
:root[data-theme="dark"] .site-menu-search input::placeholder{
  color: var(--muted);
}

:root[data-theme="dark"] .question-body table,
:root[data-theme="dark"] .fe-explanation table,
:root[data-theme="dark"] .trace-var-table{
  background: var(--paper);
  color: var(--text);
}

:root[data-theme="dark"] .question-body th,
:root[data-theme="dark"] .fe-explanation th,
:root[data-theme="dark"] .trace-var-table th{
  background: var(--surface-soft);
  color: var(--text);
}

:root[data-theme="dark"] .trace-var-table td,
:root[data-theme="dark"] .trace-var-table th,
:root[data-theme="dark"] .trace-ln,
:root[data-theme="dark"] .code-trace-code{
  border-color: var(--line);
}

:root[data-theme="dark"] .code-trace-header{
  background: var(--dark-surface-deep);
  border-bottom: 1px solid var(--line);
}

:root[data-theme="dark"] .trace-line.trace-active{
  background: var(--dark-warning-surface);
}

:root[data-theme="dark"] .trace-line.trace-visited{
  background: var(--dark-success-surface);
}

:root[data-theme="dark"] .trace-note{
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] .option.fe-correct,
:root[data-theme="dark"] .option.fe-correct-answer,
:root[data-theme="dark"] .pass-box.passed{
  background: var(--dark-success-surface);
  border-color: #22c55e;
}

:root[data-theme="dark"] .option.fe-incorrect,
:root[data-theme="dark"] .pass-box.failed{
  background: var(--danger-bg);
  border-color: var(--danger);
}

:root[data-theme="dark"] .fe-tab:not(.active),
:root[data-theme="dark"] .fe-mode-bar,
:root[data-theme="dark"] .unified-key-help,
:root[data-theme="dark"] .qualification-card-v3,
:root[data-theme="dark"] .qualification-body-v3,
:root[data-theme="dark"] .boki-menu-card,
:root[data-theme="dark"] .flow-card,
:root[data-theme="dark"] .search-result-card,
:root[data-theme="dark"] .question-card,
:root[data-theme="dark"] .fe-dash-card,
:root[data-theme="dark"] .fe-dash-section,
:root[data-theme="dark"] .bookmark-study-panel,
:root[data-theme="dark"] .code-trace-panel{
  background-color: var(--paper) !important;
  background-image: none !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

:root[data-theme="dark"] .fe-tab:not(.active){
  background-color: var(--paper) !important;
}

:root[data-theme="dark"] .fe-tab:not(.active) .fe-tab-label,
:root[data-theme="dark"] .qualification-body-v3 h3,
:root[data-theme="dark"] .boki-menu-card h2,
:root[data-theme="dark"] .flow-card h3,
:root[data-theme="dark"] .search-result-card h3,
:root[data-theme="dark"] .question-card h3,
:root[data-theme="dark"] .question-body,
:root[data-theme="dark"] .bookmark-study-title{
  color: var(--navy) !important;
}

:root[data-theme="dark"] .fe-tab:not(.active) .fe-tab-desc,
:root[data-theme="dark"] .qualification-body-v3 p,
:root[data-theme="dark"] .boki-menu-card p,
:root[data-theme="dark"] .flow-card p,
:root[data-theme="dark"] .search-result-card p,
:root[data-theme="dark"] .bookmark-study-panel p{
  color: var(--muted) !important;
}

:root[data-theme="dark"] .boki-tags span,
:root[data-theme="dark"] .qualification-meta-v3 span,
:root[data-theme="dark"] .category-pill-v3,
:root[data-theme="dark"] .fe-tab-badge,
:root[data-theme="dark"] .bookmark-jump-btn,
:root[data-theme="dark"] .bookmark-delete-btn{
  background-color: var(--surface-soft) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

:root[data-theme="dark"] .option,
:root[data-theme="dark"] .options-grid .option{
  background-color: var(--surface-soft) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

:root[data-theme="dark"] .option:has(input:checked){
  background-color: #15372f !important;
  border-color: var(--accent) !important;
}



:root[data-theme="dark"] .fe-tab.active .fe-tab-label{
  color: var(--dark-text-inverse) !important;
}

:root[data-theme="dark"] .fe-tab.active .fe-tab-desc,
:root[data-theme="dark"] .fe-tab.active .fe-tab-badge{
  color: #7dd3c0 !important;
}

:root[data-theme="dark"] .site-menu-toggle{
  background: var(--dark-button-bg) !important;
  border: 1px solid var(--dark-button-border) !important;
  color: var(--dark-text-inverse) !important;
}

:root[data-theme="dark"] .site-menu-toggle:hover{
  background: var(--dark-button-bg-hover) !important;
}

:root[data-theme="dark"] .site-menu-label,
:root[data-theme="dark"] .site-menu-hamburger span{
  color: var(--dark-text-inverse) !important;
}

:root[data-theme="dark"] .category-pill-v3{
  background: rgba(15, 18, 25, 0.78) !important;
  border-color: rgba(148, 163, 184, 0.32) !important;
  color: var(--line) !important;
}

:root[data-theme="dark"] .qualification-search-v3 button{
  color: var(--dark-text-inverse);
}

:root[data-theme="dark"] .site-menu-search button{
  background: linear-gradient(135deg, var(--dark-accent-from), var(--dark-accent-to-soft)) !important;
  color: var(--dark-text-accent-bright) !important;
  border-color: rgba(92, 200, 168, 0.8) !important;
}

:root[data-theme="dark"] .site-menu-search button:hover{
  background: linear-gradient(135deg, var(--dark-accent-to), var(--dark-accent-from-soft)) !important;
  box-shadow: 0 16px 40px rgba(66, 223, 186, 0.32) !important;
}

:root[data-theme="dark"] .qualification-body-v3 button:not(:disabled),
:root[data-theme="dark"] .search-result-card button:not(:disabled),
:root[data-theme="dark"] .boki-actions a,
:root[data-theme="dark"] .submit-btn,
:root[data-theme="dark"] .result-actions button,
:root[data-theme="dark"] .result-actions a,
:root[data-theme="dark"] .fe-bookmark-empty-actions button:not(:disabled){
  background: rgba(25, 110, 92, 0.32);
  border-color: var(--action-border);
  color: var(--action-text);
}

:root[data-theme="dark"] .qualification-body-v3 button:not(:disabled):hover,
:root[data-theme="dark"] .search-result-card button:not(:disabled):hover,
:root[data-theme="dark"] .boki-actions a:hover,
:root[data-theme="dark"] .submit-btn:hover,
:root[data-theme="dark"] .result-actions button:hover,
:root[data-theme="dark"] .result-actions a:hover,
:root[data-theme="dark"] .fe-bookmark-empty-actions button:not(:disabled):hover{
  background: linear-gradient(135deg, var(--dark-accent-from), var(--dark-accent-to));
  color: var(--dark-text-accent-bright);
  box-shadow: 0 20px 52px rgba(66, 223, 186, 0.34);
}

:root[data-theme="dark"] .boki-hero-box:not(.fe-hero-box){
  color: var(--text);
  background:
    radial-gradient(circle at 88% 12%, rgba(92, 200, 168, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(22, 38, 54, 0.98) 0%, rgba(24, 47, 67, 0.98) 52%, rgba(27, 38, 58, 0.98) 100%);
  border-color: rgba(92, 200, 168, 0.28);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
}

:root[data-theme="dark"] .boki-hero-box:not(.fe-hero-box)::before{
  border-color: rgba(92, 200, 168, 0.22);
}

:root[data-theme="dark"] .boki-hero-box:not(.fe-hero-box) h1,
:root[data-theme="dark"] .boki-hero-box:not(.fe-hero-box) .boki-label{
  color: var(--dark-text-heading);
}

:root[data-theme="dark"] .boki-hero-box:not(.fe-hero-box) .boki-label{
  color: var(--dark-accent-muted);
}

:root[data-theme="dark"] .boki-hero-box:not(.fe-hero-box) p{
  color: var(--dark-muted-blue-2);
}

:root[data-theme="dark"] .fe-hero-box{
  border-color: rgba(92, 200, 168, 0.24);
  box-shadow: 0 24px 64px var(--dark-shadow-strong);
}

:root[data-theme="dark"] .qualification-page-v3{
  background:
    radial-gradient(circle at 8% 0%, rgba(92, 200, 168, 0.12), transparent 34%),
    linear-gradient(180deg, var(--dark-page-start) 0%, var(--surface-soft) 100%);
}

:root[data-theme="dark"] .qualification-hero-overlay{
  background:
    radial-gradient(circle at 86% 16%, rgba(92, 200, 168, 0.14), transparent 26%),
    linear-gradient(135deg, rgba(22, 38, 54, 0.94), rgba(18, 28, 42, 0.98));
  color: var(--text);
  border-color: rgba(92, 200, 168, 0.28);
}

:root[data-theme="dark"] .qualification-hero-overlay p,
:root[data-theme="dark"] .qualification-hero-overlay h1,
:root[data-theme="dark"] .hero-eyebrow{
  color: var(--text);
}

:root[data-theme="dark"] .hero-eyebrow{
  color: var(--dark-accent-muted);
}

:root[data-theme="dark"] .qualification-heading-v3 h2,
:root[data-theme="dark"] .qualification-body-v3 h3,
:root[data-theme="dark"] .no-result-v3 h3{
  color: var(--dark-text-heading);
}

:root[data-theme="dark"] .reset-link-v3,
:root[data-theme="dark"] .no-result-v3,
:root[data-theme="dark"] .qualification-meta-v3 span{
  background: var(--paper);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] .qualification-body-v3 p{
  color: #a8bdd0;
}

:root[data-theme="dark"] .boki-actions a:nth-child(2){
  background: rgba(25, 110, 92, 0.32);
  border-color: var(--action-border);
  color: var(--action-text);
}

/* v32: dark-mode reinforcement for typed answers and accounting select/input fields. */
:root[data-theme="dark"] .accounting-account,
:root[data-theme="dark"] .accounting-amount,
:root[data-theme="dark"] .table-blank-input,
:root[data-theme="dark"] .numeric-answer-input,
:root[data-theme="dark"] .numeric-input-field{
  background: var(--paper);
  color: var(--text);
  border-color: var(--line);
}

:root[data-theme="dark"] .numeric-answer-input.is-correct,
:root[data-theme="dark"] .numeric-input-field.is-correct,
:root[data-theme="dark"] .table-blank-input.is-correct{
  border-width: 2px;
  background: var(--paper);
  background: color-mix(in srgb, var(--accent) 18%, var(--paper));
}

:root[data-theme="dark"] .numeric-answer-input.is-incorrect,
:root[data-theme="dark"] .numeric-input-field.is-incorrect,
:root[data-theme="dark"] .table-blank-input.is-incorrect{
  border-width: 2px;
  background: var(--paper);
  background: color-mix(in srgb, var(--danger) 16%, var(--paper));
}

/* =========================
   v35 UI polish: exam landing and recent history
   Generated UI mockup-inspired visual system for the actual project screens.
========================= */
:root[data-theme="dark"] .quiz-box .fe-exam-landing{
  background:
    radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.18), transparent 34%),
    radial-gradient(circle at 0% 90%, rgba(37, 99, 235, 0.16), transparent 30%),
    radial-gradient(circle at 100% 90%, rgba(59, 130, 246, 0.12), transparent 28%),
    linear-gradient(180deg, #071426 0%, #0a1b33 52%, #08162a 100%) !important;
  border-color: var(--dark-blue-border) !important;
  box-shadow: var(--exam-card-shadow) !important;
}

:root[data-theme="dark"] .quiz-box .fe-exam-landing h3{
  color: var(--dark-text-bright) !important;
  text-shadow: 0 10px 28px var(--dark-shadow-strong);
}

:root[data-theme="dark"] .quiz-box .fe-exam-kicker,
:root[data-theme="dark"] .quiz-box .fe-section-icon{
  color: var(--dark-link-blue-strong) !important;
}

:root[data-theme="dark"] .quiz-box .fe-exam-lead,
:root[data-theme="dark"] .quiz-box .fe-exam-landing > p:not(.quiz-label){
  color: var(--dark-muted-blue) !important;
}

:root[data-theme="dark"] .quiz-box .exam-info > .fe-exam-info-card{
  background: var(--dark-card-blue) !important;
  border-color: var(--dark-blue-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 42px var(--dark-shadow-card) !important;
}

:root[data-theme="dark"] .quiz-box .exam-info > .fe-exam-info-card > span:not(.fe-exam-info-icon){
  color: var(--dark-muted-blue-3) !important;
}

:root[data-theme="dark"] .quiz-box .exam-info > .fe-exam-info-card > strong{
  color: var(--dark-text-inverse) !important;
}

:root[data-theme="dark"] .quiz-box .fe-exam-note,
:root[data-theme="dark"] .quiz-box .fe-dash-history-wrap{
  background: var(--dark-surface-overlay) !important;
  border-color: var(--dark-blue-border) !important;
  color: #dce8f7 !important;
}

:root[data-theme="dark"] .quiz-box .fe-exam-note strong{
  color: var(--dark-link-blue) !important;
}

:root[data-theme="dark"] .quiz-box .fe-exam-cta.submit-btn{
  background: linear-gradient(135deg, #2ea8ff 0%, #2454e8 100%) !important;
  border-color: rgba(147, 197, 253, 0.52) !important;
  color: var(--dark-text-inverse) !important;
  box-shadow: 0 22px 62px rgba(37, 99, 235, 0.42) !important;
}

:root[data-theme="dark"] .quiz-box .fe-exam-cta.submit-btn:hover{
  background: linear-gradient(135deg, #60c0ff 0%, #1d4ed8 100%) !important;
}

:root[data-theme="dark"] .quiz-box .fe-dash-history-head{
  color: var(--dark-muted-blue-4) !important;
  border-color: rgba(96, 165, 250, 0.28) !important;
}

:root[data-theme="dark"] .quiz-box .fe-dash-history-row.practice-history-row{
  background: var(--dark-surface-overlay-soft) !important;
  border-color: var(--dark-blue-border-soft) !important;
  color: #e8f2ff !important;
}

:root[data-theme="dark"] .quiz-box .fe-dash-history-row.practice-history-row:hover{
  background: var(--dark-surface-overlay-hover) !important;
  border-color: rgba(96, 165, 250, 0.46) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26) !important;
}

:root[data-theme="dark"] .quiz-box .fe-history-subject,
:root[data-theme="dark"] .quiz-box .fe-history-title{
  color: #f4f8ff !important;
}

:root[data-theme="dark"] .quiz-box .fe-history-category{
  color: #fb923c !important;
}

:root[data-theme="dark"] .quiz-box .fe-review-remove-btn{
  background: rgba(37, 99, 235, 0.14) !important;
  border-color: var(--dark-blue-border-strong) !important;
  color: var(--dark-link-blue) !important;
}

:root[data-theme="dark"] .quiz-box .fe-review-remove-btn:hover{
  background: rgba(248, 113, 113, 0.14) !important;
  border-color: rgba(248, 113, 113, 0.58) !important;
  color: #fecdd3 !important;
}


/* ========================================
   v36 - Question practice UI polish
   ======================================== */
.quiz-section .quiz-box{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 6%, rgba(37, 99, 235, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  border-color: color-mix(in srgb, var(--exam-blue-line) 55%, var(--line));
  border-radius: 30px;
  box-shadow: 0 22px 70px rgba(15, 35, 68, 0.10);
}

.quiz-header .quiz-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--exam-blue);
}

.quiz-header .quiz-label::before{
  content: "◆";
  color: var(--exam-blue);
  font-size: 12px;
  letter-spacing: 0;
}

.quiz-header p:not(.quiz-label){
  color: #45627f;
}

.question-card.unified-question-card{
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 38px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.98));
  border: 1px solid color-mix(in srgb, var(--exam-blue-line) 68%, var(--line));
  border-radius: 26px;
  box-shadow: 0 18px 46px rgba(15, 35, 68, 0.08);
}

.question-card.unified-question-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--exam-blue), #38bdf8, var(--success));
}

.question-meta-v36{
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--exam-blue-line) 72%, var(--line));
}

.question-meta-main{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.question-mode-badge,
.question-number-badge,
.question-category-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.question-mode-badge{
  background: linear-gradient(135deg, var(--exam-blue), var(--exam-blue-2));
  color: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

.question-number-badge{
  background: var(--exam-blue-soft);
  border: 1px solid var(--exam-blue-line);
  color: var(--exam-blue-2);
}

.question-category-pill{
  max-width: min(100%, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  background: color-mix(in srgb, #fff7ed 72%, var(--paper));
  border: 1px solid color-mix(in srgb, #fb923c 42%, var(--line));
  color: #c2410c;
}

.bookmark-btn-v36{
  width: auto;
  min-width: 92px;
  height: 40px;
  padding: 0 14px;
  gap: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, #fff7ed 78%, var(--paper));
  border-color: color-mix(in srgb, #f59e0b 45%, var(--line));
  color: #b45309;
  font-size: 14px;
  font-weight: 900;
}

.bookmark-btn-v36 .bookmark-icon{
  font-size: 18px;
  line-height: 1;
}

.bookmark-btn-v36.bookmarked{
  background: linear-gradient(135deg, #fbbf24, #f97316);
  border-color: transparent;
  color: #fff;
}

.question-content-v36{
  display: grid;
  gap: 20px;
}

.question-source-note{
  justify-self: end;
  max-width: min(100%, 720px);
  margin-top: 2px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
}


.question-content-v36 .question-body{
  margin: 0;
  padding: clamp(18px, 3vw, 26px);
  background: color-mix(in srgb, var(--exam-blue-soft) 34%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--exam-blue-line) 66%, var(--line));
  border-radius: 20px;
  color: #173154;
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 700;
  line-height: 1.95;
}

.unified-question-card .v36-options{
  gap: 14px;
}

.unified-question-card .option{
  position: relative;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid color-mix(in srgb, var(--exam-blue-line) 44%, var(--line));
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(15, 35, 68, 0.045);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.unified-question-card .option:hover{
  background: color-mix(in srgb, var(--exam-blue-soft) 58%, #fff);
  border-color: var(--exam-blue-line);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.10);
}

.unified-question-card .option input[type="radio"],
.unified-question-card .option input[type="checkbox"]{
  width: 20px;
  height: 20px;
  accent-color: var(--exam-blue);
  flex: 0 0 auto;
}

.unified-question-card .option span{
  min-width: 0;
  color: #243447;
  font-size: 16px;
  font-weight: 700;
}

.unified-question-card .option:has(input:checked){
  background: color-mix(in srgb, var(--exam-blue-soft) 78%, #fff);
  border-color: var(--exam-blue);
  box-shadow: 0 16px 38px rgba(37, 99, 235, 0.15);
}

.unified-question-card .option.fe-correct,
.unified-question-card .option.fe-correct-answer{
  background: color-mix(in srgb, var(--success-bg) 82%, #fff);
  border-color: var(--success);
  border-left-width: 6px;
}

.unified-question-card .option.fe-incorrect{
  background: color-mix(in srgb, var(--danger-bg) 82%, #fff);
  border-color: var(--danger);
  border-left-width: 6px;
}







.fe-explanation-heading{
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-strong);
}









.fe-answer-summary span{
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.fe-answer-summary b{
  color: var(--text-strong);
  font-size: 16px;
}

.fe-explanation-body{
  color: var(--text);
  line-height: 1.9;
}

.v36-question-nav{
  padding: 12px;
  background: color-mix(in srgb, var(--exam-blue-soft) 36%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--exam-blue-line) 68%, var(--line));
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15, 35, 68, 0.05);
}

.v36-nav-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--exam-blue-line);
  color: var(--exam-blue-2);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

.v36-question-progress{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-width: 140px;
  color: var(--muted);
}

.v36-question-progress strong{
  color: var(--exam-blue-2);
  font-size: 24px;
  line-height: 1;
}

.question-action-panel-v36{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--exam-blue-soft) 32%, var(--paper));
  border-color: color-mix(in srgb, var(--exam-blue-line) 68%, var(--line));
}

.question-answer-btn-v36{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: min(100%, 280px);
  min-height: 56px;
  margin: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #2d9cff, #2454e8);
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.24);
}

@media (max-width: 760px){
.site-header-actions{
    gap: 8px;
  }
  .site-contact-link{
    display: none;
  }
  .fe-menu-grid{
    grid-template-columns: 1fr;
  }


.unified-key-help{
    text-align: left;
  }

  .unified-nav{
    flex-direction: column;
  }

  .unified-nav button{
    width: 100%;
  }


.fe-mode-bar .category-filter{
    width: 100%;
    max-width: none;
  }


.fe-practice-count-option{
    width: 100%;
    justify-content: space-between;
  }
  .fe-practice-count-option .category-filter{
    width: auto;
    min-width: 112px;
    margin-top: 0;
  }


.question-meta-v36,
.question-meta-main{
    align-items: stretch;
  }

  .question-meta-v36{
    flex-direction: column;
  }

  .bookmark-btn-v36{
    width: 100%;
    margin-left: 0;
  }

  .question-mode-badge,
.question-number-badge,
.question-category-pill{
    max-width: 100%;
  }

  .question-content-v36 .question-body{
    font-size: 16px;
  }
}

:root[data-theme="dark"] .quiz-section .quiz-box,
:root[data-theme="dark"] .question-card.unified-question-card{
  background:
    radial-gradient(circle at 8% 6%, rgba(59, 130, 246, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(33, 38, 54, 0.98), rgba(21, 26, 38, 0.98));
  border-color: var(--exam-blue-line);
  box-shadow: var(--exam-card-shadow);
}

:root[data-theme="dark"] .quiz-header p:not(.quiz-label),
:root[data-theme="dark"] .question-content-v36 .question-body,
:root[data-theme="dark"] .unified-question-card .option span{
  color: var(--text);
}

:root[data-theme="dark"] .question-content-v36 .question-body,
:root[data-theme="dark"] .v36-question-nav,
:root[data-theme="dark"] .question-action-panel-v36{
  background: color-mix(in srgb, var(--exam-blue-soft) 44%, var(--paper));
  border-color: var(--exam-blue-line);
}

:root[data-theme="dark"] .unified-question-card .option,
:root[data-theme="dark"] .v36-nav-btn,
:root[data-theme="dark"] .fe-answer-summary{
  background: var(--paper);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] .unified-question-card .option:hover,
:root[data-theme="dark"] .unified-question-card .option:has(input:checked){
  background: rgba(59, 130, 246, 0.16);
  border-color: var(--exam-blue-line);
}

:root[data-theme="dark"] .question-category-pill{
  background: rgba(249, 115, 22, 0.14);
  border-color: rgba(251, 146, 60, 0.38);
  color: #fdba74;
}

:root[data-theme="dark"] .bookmark-btn-v36{
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(251, 191, 36, 0.38);
  color: #facc15;
}

:root[data-theme="dark"] .fe-explanation-v36{
  background: rgba(59, 130, 246, 0.12);
  border-color: var(--exam-blue-line);
}

:root[data-theme="dark"] .fe-explanation-v36.is-correct{
  background: rgba(34, 197, 94, 0.13);
  border-color: rgba(74, 222, 128, 0.42);
}

:root[data-theme="dark"] .fe-explanation-v36.is-incorrect{
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.44);
}

/* ========================================
   v37 Dashboard analytics UI polish
   - Extends the v35/v36 blue dashboard language to the analytics tab.
   ======================================== */
.v37-dashboard{
  display: grid;
  gap: 24px;
}

.fe-dash-hero-v37{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(20px, 4vw, 36px);
  align-items: stretch;
  padding: clamp(26px, 5vw, 44px);
  border: 1px solid color-mix(in srgb, var(--exam-blue-line) 76%, var(--line));
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--exam-blue) 20%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--exam-blue-soft) 76%, var(--paper)) 0%, var(--paper) 70%);
  box-shadow: 0 24px 64px rgba(37, 99, 235, 0.09);
  overflow: hidden;
}



.fe-dash-hero-copy,
.fe-dash-insight-grid-v37{
  position: relative;
  z-index: 1;
}

.fe-dash-kicker-v37{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--exam-blue-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
}

.fe-dash-hero-copy h3{
  margin: 0 0 12px;
  color: var(--text-strong);
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.25;
  letter-spacing: .04em;
}

.fe-dash-hero-copy p:last-child{
  max-width: 720px;
  color: var(--muted);
  line-height: 1.9;
}

.fe-dash-insight-grid-v37{
  display: grid;
  gap: 12px;
}

.fe-dash-insight-card-v37{
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--exam-blue-line) 72%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, #fff 64%, var(--paper));
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.08);
}

.fe-dash-insight-card-v37 span{
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.fe-dash-insight-card-v37 strong{
  min-width: 0;
  color: var(--text-strong);
  font-size: 17px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-dash-insight-card-v37.is-focus{
  border-color: color-mix(in srgb, var(--gold) 70%, var(--line));
  background: color-mix(in srgb, var(--warm) 62%, var(--paper));
}

.v37-summary-cards{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

.v37-summary-card{
  display: grid;
  gap: 10px;
  text-align: left;
  min-height: 190px;
  border-radius: 24px;
  border-color: color-mix(in srgb, var(--exam-blue-line) 62%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 72%, var(--paper)), var(--paper));
  box-shadow: 0 18px 44px rgba(15, 35, 68, 0.06);
}

.v37-summary-card::before{
  height: 5px;
  background: linear-gradient(90deg, var(--exam-blue), #38bdf8, var(--success));
}

.fe-dash-card-icon{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: var(--exam-blue-soft);
  border: 1px solid var(--exam-blue-line);
  color: var(--exam-blue-2);
  font-size: 20px;
  font-weight: 900;
}

.fe-dash-card-icon.is-warn{
  background: color-mix(in srgb, var(--danger-bg) 48%, var(--paper));
  border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
  color: var(--danger-hover);
}

.v37-summary-card .quiz-label{
  margin-bottom: 0;
  color: var(--muted);
}

.v37-summary-card .fe-dash-big{
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: clamp(42px, 5vw, 58px);
  letter-spacing: -.04em;
}

.fe-dash-card-progress{
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 62%, var(--paper));
}

.fe-dash-card-progress span{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--exam-blue), #38bdf8);
}

.fe-dashboard-grid-v37{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 24px;
  align-items: start;
}

.v37-panel{
  margin-bottom: 0;
  border-radius: 24px;
  border-color: color-mix(in srgb, var(--exam-blue-line) 48%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 92%, var(--exam-blue-soft)), var(--paper));
  box-shadow: 0 18px 48px rgba(15, 35, 68, 0.06);
}

.fe-dash-panel-header{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.fe-dash-panel-header h3,
.v37-panel > h3{
  margin: 0 0 3px;
  padding-bottom: 0;
  border-bottom: none;
}

.v37-panel .dashboard-section-note{
  margin: 0;
}

.v37-cat-row{
  grid-template-columns: minmax(160px, 240px) minmax(190px, 1fr) 86px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--paper));
}

.fe-dash-cat-track{
  display: grid;
  gap: 6px;
  min-width: 0;
}

.fe-dash-cat-meta{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.v37-cat-row .fe-dash-bar-wrap{
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 72%, var(--paper));
}

.v37-cat-row .fe-dash-bar{
  border-radius: inherit;
}

.v37-cat-row .fe-dash-pct{
  min-width: 0;
  padding: 5px 9px;
  border-radius: 999px;
  text-align: center;
  background: var(--exam-blue-soft);
  color: var(--exam-blue-2);
}

.v37-cat-row .fe-dash-pct.is-good{
  background: var(--success-bg);
  color: var(--success);
}

.v37-cat-row .fe-dash-pct.is-ok{
  background: var(--warm);
  color: var(--gold-dark);
}

.v37-cat-row .fe-dash-pct.is-weak{
  background: var(--danger-bg);
  color: var(--danger-hover);
}

.v37-dashboard .fe-mock-trend,
.v37-dashboard .fe-mock-history-row,
.v37-dashboard .fe-mock-heatmap-cell,
.v37-dashboard .review-summary-row{
  border-radius: 16px;
}

.v37-dashboard .fe-mock-trend{
  padding: 18px;
  background: color-mix(in srgb, var(--exam-blue-soft) 38%, var(--paper));
  border-color: color-mix(in srgb, var(--exam-blue-line) 74%, var(--line));
}

.v37-dashboard .fe-mock-history-row{
  min-height: 58px;
  padding: 14px 16px;
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--paper));
}

.v37-dashboard .fe-mock-heatmap-cell{
  min-height: 52px;
  padding: 10px 12px;
  text-align: center;
}

.v37-dashboard .review-summary-row{
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 48%, var(--paper));
}

.v37-dashboard .review-summary-wrong{
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 28px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger-hover);
  font-weight: 900;
}

.v37-dashboard .review-summary-chip{
  background: var(--exam-blue-soft);
  border-color: var(--exam-blue-line);
  color: var(--exam-blue-2);
}

@media (max-width: 980px){
.qualification-grid-v3{
    grid-template-columns: 1fr;
  }

  .qualification-heading-v3{
    align-items: flex-start;
    flex-direction: column;
  }


.fe-dash-hero-v37,
.fe-dashboard-grid-v37,
.v37-summary-cards{
    grid-template-columns: 1fr;
  }
}


:root[data-theme="dark"] .fe-dash-hero-v37,
:root[data-theme="dark"] .v37-panel,
:root[data-theme="dark"] .v37-summary-card{
  background:
    radial-gradient(circle at 8% 8%, rgba(59, 130, 246, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(33, 38, 54, 0.98), rgba(21, 26, 38, 0.98));
  border-color: var(--exam-blue-line);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .fe-dash-insight-card-v37,
:root[data-theme="dark"] .v37-cat-row,
:root[data-theme="dark"] .v37-dashboard .fe-mock-history-row,
:root[data-theme="dark"] .v37-dashboard .review-summary-row,
:root[data-theme="dark"] .v37-dashboard .fe-mock-heatmap-cell{
  background: var(--paper);
  border-color: var(--line);
}

:root[data-theme="dark"] .fe-dash-insight-card-v37.is-focus{
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(251, 146, 60, 0.38);
}

:root[data-theme="dark"] .v37-dashboard .fe-dash-cat-name,
:root[data-theme="dark"] .v37-dashboard .fe-dash-hero-copy h3,
:root[data-theme="dark"] .v37-summary-card .fe-dash-big,
:root[data-theme="dark"] .fe-dash-insight-card-v37 strong{
  color: var(--text-strong);
}

:root[data-theme="dark"] .v37-dashboard .fe-mock-trend{
  background: rgba(59, 130, 246, 0.11);
  border-color: var(--exam-blue-line);
}

:root[data-theme="dark"] .v37-dashboard .fe-dash-card-progress,
:root[data-theme="dark"] .v37-cat-row .fe-dash-bar-wrap{
  background: var(--dark-surface-deep);
}


/* ========================================
   v39 Qualification / Course Select UI Refresh
   ======================================== */


.qualification-hero-v39,
.course-select-v39{
  position: relative;
  overflow: hidden;
}



























.qualification-hero-stats-v39,
.course-hero-metrics-v39{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}





.qualification-hero-stats-v39 strong,
.course-hero-metrics-v39 strong{
  display: block;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.25;
}

.qualification-hero-stats-v39 small,
.course-hero-metrics-v39 small{
  display: block;
  margin-top: 6px;
  color: #b9d6ff;
  font-weight: 750;
  line-height: 1.45;
}

.qualification-heading-v39 h2,
.course-section-title-v39 h2{
  color: var(--course-ink);
  font-family: var(--font-sans);
  font-weight: 950;
  letter-spacing: -0.02em;
}

.qualification-grid-v39,
.course-card-grid-v39{
  gap: 26px;
}

.qualification-card-v39,
.course-action-card-v39,
.flow-card-v39,
.no-result-v39{
  border-radius: 28px;
  background: var(--course-card);
  border: 1px solid var(--course-card-border);
  box-shadow: 0 14px 46px rgba(15, 42, 87, 0.08);
  overflow: hidden;
}

.qualification-card-v39:hover,
.course-action-card-v39:hover,
.flow-card-v39:hover{
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--course-blue) 38%, var(--line));
  box-shadow: var(--course-glow);
}

.qualification-image-v39{
  border-radius: 0;
}

.image-shade-v39{
  background: linear-gradient(180deg, transparent 10%, rgba(7, 24, 47, 0.76));
}

.category-pill-v39{
  border-radius: 999px;
  background: rgba(7, 24, 47, 0.78);
  border: 1px solid rgba(147, 197, 253, 0.36);
  color: #dbeafe;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.qualification-body-v39,
.course-action-card-v39{
  position: relative;
}

.qualification-card-icon-v39{
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--course-blue) 12%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--course-blue) 22%, var(--line));
  font-size: 22px;
}

.qualification-card-kicker-v39,
.course-label-v39{
  color: var(--course-blue);
  font-weight: 950;
  letter-spacing: 0.16em;
}

.qualification-body-v39 h3,
.course-action-card-v39 h2,
.flow-card-v39 h3{
  color: var(--course-ink);
  font-family: var(--font-sans);
  font-weight: 950;
  letter-spacing: -0.01em;
}

.card-number-v39,
.course-number-v39{
  color: color-mix(in srgb, var(--course-blue) 18%, transparent);
  font-family: var(--font-sans);
  font-weight: 950;
}

.qualification-meta-v39,
.course-tags-v39{
  gap: 8px;
}

.qualification-meta-v39 span,
.course-tags-v39 span,
.qualification-feature-line-v39 span,
.course-feature-strip-v39 span{
  border-radius: 999px;
  background: color-mix(in srgb, var(--course-blue) 8%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--course-blue) 16%, var(--line));
  color: color-mix(in srgb, var(--course-blue) 75%, var(--text));
  font-weight: 850;
}

.qualification-feature-line-v39,
.course-feature-strip-v39{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}

.qualification-feature-line-v39 span,
.course-feature-strip-v39 span{
  padding: 6px 10px;
  font-size: 12px;
}

.qualification-cta-v39,
.course-actions-v39 a{
  width: 100%;
  min-height: 50px;
  border-radius: 16px;
  font-weight: 950;
}

/* v128 fix: anchor CTA must render like a button + readable card spacing */
a.qualification-cta-v39{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  margin-top: 20px;
  padding: 0 18px;
}
.qualification-card-kicker-v39{
  margin: 0 0 6px;
}
.qualification-body-v39 h3{
  margin: 0 0 10px;
  line-height: 1.4;
}
.qualification-body-v39 > p{
  margin: 0 0 16px;
  line-height: 1.7;
}

.course-select-v39{
  padding-bottom: 96px;
}

.course-hero-v39{
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(44px, 6vw, 76px) clamp(26px, 5vw, 60px);
}

.course-hero-v39 > *{
  position: relative;
  z-index: 1;
}

.course-card-grid-v39{
  max-width: 1120px;
  margin-inline: auto;
}

.course-action-card-v39{
  padding: 34px;
}

.course-action-card-v39.is-featured-v39{
  border-color: color-mix(in srgb, var(--course-blue) 28%, var(--line));
  background:
    radial-gradient(circle at 84% 10%, color-mix(in srgb, var(--course-blue) 12%, transparent), transparent 28%),
    var(--course-card);
}

.course-actions-v39{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.course-flow-v39,
.course-overview-v39{
  max-width: 1120px;
  margin-inline: auto;
}

.flow-grid-v39{
  gap: 22px;
}

.flow-card-v39{
  padding: 28px;
}

.flow-card-v39 strong{
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--course-blue) 12%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--course-blue) 20%, var(--line));
  color: var(--course-blue);
  font-family: var(--font-sans);
  font-size: 18px;
}




:root[data-theme="dark"] .qualification-card-v39,
:root[data-theme="dark"] .course-action-card-v39,
:root[data-theme="dark"] .flow-card-v39,
:root[data-theme="dark"] .no-result-v39{
  background: rgba(33, 38, 54, 0.92) !important;
  border-color: var(--dark-blue-border-soft) !important;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.28);
}





:root[data-theme="dark"] .qualification-meta-v39 span,
:root[data-theme="dark"] .course-tags-v39 span,
:root[data-theme="dark"] .qualification-feature-line-v39 span,
:root[data-theme="dark"] .course-feature-strip-v39 span,
:root[data-theme="dark"] .qualification-card-icon-v39,
:root[data-theme="dark"] .flow-card-v39 strong{
  background: rgba(96, 165, 250, 0.10) !important;
  border-color: rgba(96, 165, 250, 0.22) !important;
  color: var(--dark-link-blue-soft) !important;
}

:root[data-theme="dark"] .qualification-heading-v39 h2,
:root[data-theme="dark"] .course-section-title-v39 h2,
:root[data-theme="dark"] .qualification-body-v39 h3,
:root[data-theme="dark"] .course-action-card-v39 h2,
:root[data-theme="dark"] .flow-card-v39 h3{
  color: var(--text-strong) !important;
}


/* ========================================
   v41 SEO and advertising readiness
   ======================================== */
.ad-slot-v41{
  width: min(1120px, calc(100% - 32px));
  margin: 28px auto;
  padding: clamp(20px, 3vw, 28px);
  border: 1px dashed var(--seo-ad-border-v41);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--seo-blue-v41) 12%, transparent), transparent 34%),
    var(--seo-ad-bg-v41);
  color: var(--text);
  box-shadow: 0 14px 38px rgba(37, 99, 235, 0.07);
  text-align: center;
}

.ad-slot-label-v41{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--seo-blue-v41) 28%, var(--line));
  border-radius: 999px;
  background: var(--paper);
  color: var(--seo-blue-v41);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ad-slot-label-v41::before{
  content: "AD";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--seo-blue-v41) 12%, var(--paper));
  color: var(--seo-blue-v41);
  font-size: 10px;
}

.ad-slot-v41 strong{
  display: block;
  color: var(--text-strong);
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.45;
}

.ad-slot-v41 p{
  max-width: 760px;
  margin: 8px auto 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.seo-link-hub-v41{
  padding-top: 64px;
}

.seo-link-grid-v41{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}



.seo-link-grid-v41 a:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--seo-blue-v41) 52%, var(--line));
  box-shadow: 0 24px 54px rgba(37, 99, 235, 0.14);
}

.seo-link-grid-v41 span{
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--seo-blue-v41) 11%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--seo-blue-v41) 24%, var(--line));
  font-size: 22px;
}

.seo-link-grid-v41 strong{
  color: var(--text-strong);
  font-size: 17px;
}

.seo-link-grid-v41 small{
  color: var(--muted);
  line-height: 1.7;
}

.legal-hero-v41,
.legal-page-v41{
  position: relative;
  overflow: hidden;
}

.legal-page-v41 h2{
  margin-top: 28px;
  color: var(--text-strong);
}

.legal-page-v41 h2:first-child{
  margin-top: 0;
}

.legal-page-v41 a{
  color: var(--seo-blue-v41);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px){
.boki-menu-grid,
.flow-grid{
    grid-template-columns: 1fr;
  }

  .boki-hero-box{
    padding: 56px 28px;
  }


.search-result-grid{
    grid-template-columns: 1fr;
  }


/* fe-exam-info-grid 1fr rule removed — moved to mobile media query in v71 */


.fe-dash-history-head{
    display: none;
  }

  .fe-history-row-v2{
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
  }

  .fe-history-status,
.fe-history-subject,
.fe-history-category,
.fe-history-title,
.fe-history-row-v2 .fe-dash-time{
    white-space: normal;
  }

  .fe-history-title,
.fe-history-category{
    grid-column: 1 / -1;
  }

  .fe-history-row-v2 .fe-dash-time{
    text-align: left;
  }


.site-nav-desktop{
    display: none;
  }

  .site-menu-content{
    grid-template-columns: 1fr;
  }

  .site-menu-search{
    flex-direction: column;
  }

  .site-menu-col:not(:last-child){
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(75, 184, 154, 0.24);
  }


.qualification-hero-stats-v39,
.course-hero-metrics-v39,
.course-actions-v39{
    grid-template-columns: 1fr;
  }

  .course-action-card-v39{
    padding: 28px;
  }


.seo-link-grid-v41{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
.site-footer{
    padding: 28px 18px;
  }

  .site-footer-brand{
    display: grid;
    gap: 4px;
  }

  .site-footer-links{
    gap: 10px 14px;
  }

  .seo-source-box{
    padding: 16px;
    border-radius: 18px;
  }


.quiz-box{
  padding: 22px 20px;
  border-radius: 18px;
}

  .quiz-section{padding: 64px 22px;
padding: 48px 14px 64px;}


.qualification-search-v3{
  flex-direction: column;
  border-radius: 15px;
}

  .qualification-search-v3 button{
  padding: 15px;
  border-radius: 12px;
  min-height: 46px;
}


.search-hero{
    padding: 56px 28px;
  }

  .search-form{
    flex-direction: column;
  }

  .search-form button{
    padding: 15px;
  }


.fe-tabs{
    flex-direction: column;
    gap: 10px;
  }

      .fe-mode-bar{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

    .fe-algo-nav{
    flex-direction: column;
    gap: 10px;
  }


.fe-quiz-info{
    display: none;
  }


.fe-dash-cards{
    grid-template-columns: 1fr;
  }

  .fe-dash-cat-row{
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 6px;
  }

  .fe-dash-cat-name{
    white-space: normal;
  }

  .fe-dash-pct{
    min-width: auto;
    text-align: left;
  }

  .fe-dash-bar-wrap{
    width: 100%;
  }


.fe-exam-landing{
    padding: 32px 18px;
    border-radius: 22px;
  }

  .fe-exam-landing::before,
.fe-exam-landing::after{
    display: none;
  }

  .exam-info > .fe-exam-info-card{
    min-height: 150px;
    padding: 22px 18px;
  }

  .fe-exam-note{
    align-items: flex-start;
  }

  .fe-exam-cta.submit-btn{
    min-height: 60px;
    font-size: 17px;
  }


.fe-dash-section-title{
    gap: 10px;
  }

  .fe-dash-history{
    padding: 10px;
  }

  .fe-history-row-v2{
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 14px;
  }

  .fe-review-remove-btn{
    width: 100%;
  }


.code-trace-body{ grid-template-columns: 1fr; }


.code-trace-header{
    flex-direction: column;
    align-items: flex-start;
  }
  .code-trace-controls{
    width: 100%;
    justify-content: space-between;
  }
  .trace-code-table{
    font-size: 11px;
  }
  .trace-btn{
    padding: 6px 8px;
    font-size: 11px;
  }


.options-grid .option{
    padding: 12px 14px;
    min-height: 44px;
  }


.category-filter{
    max-width: 100%;
    width: 100%;
    margin-top: 6px;
  }
  .review-nudge{
    flex-direction: column;
    text-align: center;
  }


body{
    font-size: 15px;
  }

  .question-card,
.quiz-box,
.fe-dash-section,
.fe-dash-card{
    padding: 20px;
  }

  .question-card h3,
.question-body{
    font-size: 16px;
  }


.header-inner{
    padding: 10px 12px;
    gap: 10px;
  }

  .logo{
    min-width: 0;
    gap: 6px;
    font-size: 16px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .logo-mark{
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 14px;
  }

  .site-header-actions{
    flex-shrink: 0;
    gap: 6px;
  }

  .theme-toggle{
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 15px;
  }

  .site-menu-toggle{
    min-width: 86px;
    height: 36px;
    padding: 0 10px;
    gap: 7px;
  }

  .site-menu-label{
    font-size: 11px;
  }

  .site-menu-hamburger{
    width: 16px;
  }

  .qualification-body-v3 h3,
.boki-menu-card h2{
    padding-right: 68px;
  }

  .fe-menu-grid .boki-menu-card h2,
.boki-menu-card h2{
    padding-right: 0;
  }

  .fe-menu-grid .boki-menu-card h2{
    font-size: 31px;
    line-height: 1.6;
  }

  .section-title h2,
.qualification-heading-v3 h2{
    line-height: 1.55;
  }


    .quiz-header{
    margin-bottom: 26px;
  }

  .quiz-label{
    font-size: 10px;
    line-height: 1.8;
    letter-spacing: 0.16em;
  }

  .quiz-header h2{
    font-size: clamp(28px, 7.2vw, 34px);
    line-height: 1.42;
    letter-spacing: 0.025em;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .quiz-header p{
    font-size: 14px;
    line-height: 2;
  }

  .boki-menu-card::before,
.search-result-card::before,
.qualification-hero-overlay::before{
    display: none;
  }

  .boki-main,
.search-page,
.qualification-hero-v3,
.qualification-content-v3{
    padding-left: 14px;
    padding-right: 14px;
  }

  .boki-hero-box,
.fe-hero-box,
.search-hero,
.qualification-hero-overlay{
    padding: 40px 22px;
    border-radius: 18px;
  }

  .boki-hero-box h1,
.search-hero h1,
.qualification-hero-overlay h1{
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.35;
    letter-spacing: 0.04em;
  }

  .boki-hero-box p,
.fe-hero-box p,
.search-hero p,
.qualification-hero-overlay p{
    font-size: 14px;
    line-height: 2;
  }

  .fe-tabs,
.shared-study-tabs{
    gap: 10px;
    margin-bottom: 22px;
  }

  .fe-tab{
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas:
      "icon label"
      "icon desc"
      "icon badge";
    align-items: center;
    justify-items: start;
    gap: 4px 12px;
    min-height: 0;
    padding: 15px 14px;
    border-width: 1px;
    border-radius: 14px;
    text-align: left;
    transform: none !important;
  }

  .fe-tab-icon{
    grid-area: icon;
    font-size: 25px;
  }

  .fe-tab-label{
    grid-area: label;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .fe-tab-desc{
    grid-area: desc;
    font-size: 12px;
    line-height: 1.45;
  }

  .fe-tab-badge{
    grid-area: badge;
    width: fit-content;
    margin-top: 2px;
  }

  .fe-mode-bar,
.unified-mode-bar{
    padding: 14px;
    gap: 10px;
    border-radius: 14px;
    box-shadow: none;
  }

  .fe-mode-option{
    width: 100%;
    min-height: 34px;
    padding: 4px 0;
    line-height: 1.6;
  }

  .fe-accuracy{
    width: 100%;
    margin-left: 0;
    line-height: 1.7;
  }

  .unified-key-help{
    margin: -4px 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    line-height: 1.8;
  }

  .question-card{
    padding: 20px 18px;
    border-radius: 16px;
  }

  .question-meta{
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }

  .option,
.options-grid .option{
    padding: 12px 13px;
    gap: 10px;
    border-radius: 12px;
    line-height: 1.75;
  }

  .boki-menu-card,
.flow-card,
.search-result-card{
    padding: 22px 20px;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
  }

  .boki-menu-card h2,
.flow-card h3,
.search-result-card h3{
    font-size: clamp(23px, 7.2vw, 30px);
    line-height: 1.45;
    letter-spacing: 0.03em;
  }

  .boki-menu-card p,
.flow-card p,
.search-result-card p{
    font-size: 13.5px;
    line-height: 1.95;
  }

  .boki-actions{
    gap: 10px;
  }

  .boki-actions a,
.search-result-card button,
.qualification-body-v3 button{
    width: 100%;
    text-align: center;
    border-radius: 12px;
  }

    .qualification-body-v3{
  padding: 24px 22px 28px;
}

  .qualification-body-v3 h3{
    padding-right: 48px;
    font-size: clamp(25px, 7.4vw, 30px);
    line-height: 1.45;
    letter-spacing: 0.03em;
  }

  .card-number-v3{
    top: 24px;
    right: 18px;
    font-size: 36px;
    opacity: 0.55;
  }

  .qualification-body-v3 p{
    font-size: 13.5px;
    line-height: 1.95;
  }

  .qualification-meta-v3{
    gap: 6px;
    margin-bottom: 22px;
  }

  .qualification-meta-v3 span{
    padding: 5px 8px;
    font-size: 11px;
  }

  .bookmark-study-row{
    border-radius: 12px;
    align-items: start;
  }

  .qualification-hero-v3{
    padding: 52px 18px 26px;
  }

  .qualification-content-v3{
    padding: 30px 18px 76px;
  }

  .qualification-hero-overlay{
    padding: 42px 24px;
    border-radius: 22px;
  }

    .qualification-search-v3 input{
    padding: 14px 15px;
  }

    .quick-tags-v3{
    gap: 8px;
  }

  .quick-tags-v3 a{
    padding: 7px 12px;
    font-size: 12px;
  }

  .qualification-heading-v3{
    margin-bottom: 26px;
    align-items: flex-start;
  }

  .qualification-grid-v3{
    gap: 22px;
  }

  .qualification-card-v3{
    border-radius: 18px;
  }

  .qualification-image-v3{
    height: 174px;
    border-radius: 18px 18px 0 0;
  }

  .category-pill-v3{
    top: 14px;
    right: 14px;
    left: auto;
    bottom: auto;
    max-width: calc(100% - 28px);
    padding: 6px 11px;
    font-size: 11px;
  }


.boki-actions a,
.qualification-body-v3 button,
.search-result-card button{
    min-height: 54px;
    border-radius: 14px;
  }

  .site-menu-search button{
    border-radius: 8px;
  }


.shortcut-help-row{
    grid-template-columns: 1fr;
    gap: 6px;
  }


.fe-mock-heatmap-row{
    grid-template-columns: 1fr;
  }


.fe-mock-history-row{
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    align-items: start;
  }
  .fe-mock-history-row span:nth-child(3),
.fe-mock-history-wrong{
    grid-column: 1 / -1;
  }


.empty-state{
    padding: 32px 18px;
  }

  .empty-state h3{
    font-size: 21px;
  }

  .review-summary-category{
    min-width: 64px;
  }


.seo-question-pager{
    grid-template-columns: 1fr;
  }


.numeric-answer-row,
.table-blank-row,
.accounting-correct-box{
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .numeric-answer-input,
.numeric-input-field,
.table-blank-input,
.accounting-account,
.accounting-amount{
    width: 100%;
  }

  .statement-item{
    grid-template-columns: 1fr;
  }

  .statement-label{
    width: fit-content;
  }


.fe-dash-hero-v37,
.v37-panel,
.v37-summary-card{
    border-radius: 20px;
  }

  .fe-dash-hero-v37,
.v37-panel{
    padding: 20px;
  }

  .v37-cat-row{
    grid-template-columns: 1fr;
  }

  .v37-cat-row .fe-dash-pct{
    width: fit-content;
    text-align: left;
  }


.qualification-hero-panel-v39,
.course-hero-v39{
    border-radius: 24px;
  }

  .qualification-hero-stats-v39 div,
.course-hero-metrics-v39 div,
.course-action-card-v39,
.flow-card-v39{
    border-radius: 20px;
  }

  .qualification-content-v39,
.boki-main.course-select-v39{
    padding-left: 14px;
    padding-right: 14px;
  }


.ad-slot-v41{
    width: min(100% - 24px, 1120px);
    margin: 22px auto;
    border-radius: 20px;
    text-align: left;
  }

  .seo-link-grid-v41{
    grid-template-columns: 1fr;
  }

  .seo-link-grid-v41 a{
    min-height: 0;
    border-radius: 20px;
  }

  .understanding-button-row{ grid-template-columns: 1fr; }
  .understanding-summary-row{ grid-template-columns: 1fr; }
}

:root[data-theme="dark"] .ad-slot-v41{
  background:
    radial-gradient(circle at 12% 18%, rgba(96, 165, 250, 0.16), transparent 34%),
    rgba(15, 23, 42, 0.78);
  border-color: var(--dark-blue-border);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .ad-slot-label-v41,
:root[data-theme="dark"] .seo-link-grid-v41 span{
  background: rgba(96, 165, 250, 0.10);
  border-color: var(--dark-blue-border-soft);
  color: var(--dark-link-blue-soft);
}



:root[data-theme="dark"] .seo-link-grid-v41 strong,
:root[data-theme="dark"] .legal-page-v41 h2{
  color: var(--text-strong);
}

:root[data-theme="dark"] .legal-page-v41 a{
  color: var(--dark-link-blue);
}

/* v65: live study renderer overflow hardening for small screens.
   Keep interactive accounting/table/numeric renderers inside the card while
   allowing their inner tables to scroll horizontally when needed. */
:where(.question-card.unified-question-card,
.question-meta-v36,
.question-meta-main,
.question-content-v36,
.question-content-v36 .question-body,
.unified-question-card .v36-options,
.numeric-answer-box,
.table-input-box,
.accounting-entry-box,
.table-input-scroll,
.accounting-entry-scroll){
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

:where(.table-input-scroll,
.accounting-entry-scroll){
  width: 100%;
}

:where(.question-content-v36 .question-body,
.question-content-v36 .question-body p){
  overflow-wrap: anywhere;
}



/* v66: post-submit non-choice result overflow hardening.
   Long blank IDs and accounting/table answer summaries must wrap on 360px screens. */
:where(.fe-answer-summary,
.fe-answer-summary b,
.table-input-correct-list,
.table-input-correct-row,
.table-input-correct-row span,
.accounting-correct-box,
.accounting-correct-entry){
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.table-input-correct-list{
  overflow-x: hidden;
}

:where(.table-input-correct-row){
  flex-wrap: wrap;
  align-items: flex-start;
}

:where(.fe-answer-summary b){
  min-width: 0;
  white-space: normal;
}



/* v67: learning proposal dashboard.
   The analytics tab now recommends concrete next actions instead of only showing past metrics. */
.fe-learning-plan{
  display: grid;
  gap: 18px;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid color-mix(in srgb, var(--exam-blue-line) 70%, var(--line));
  border-radius: 26px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--exam-blue) 16%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--paper) 84%, var(--exam-blue-soft)), var(--paper));
  box-shadow: 0 20px 54px rgba(37, 99, 235, 0.08);
  overflow: hidden;
}

.fe-learning-plan-header{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
  gap: 18px;
  align-items: center;
}

.fe-learning-kicker{
  margin: 0 0 8px;
  color: var(--exam-blue-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
}

.fe-learning-plan h3,
.fe-learning-plan h4{
  margin: 0;
  color: var(--text-strong);
}

.fe-learning-plan-header p:last-child{
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.8;
}

.fe-learning-score{
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--exam-blue-line) 70%, var(--line));
  border-radius: 20px;
  background: color-mix(in srgb, #fff 68%, var(--paper));
  text-align: center;
}

.fe-learning-score span,
.fe-learning-score small,
.fe-learning-meta{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.fe-learning-score strong{
  color: var(--exam-blue-2);
  font-size: 34px;
  line-height: 1;
}

.fe-learning-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.fe-learning-card{
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-soft) 56%, var(--paper));
}

.fe-learning-card-head{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.fe-learning-icon{
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 15px;
  background: var(--exam-blue-soft);
  border: 1px solid var(--exam-blue-line);
  color: var(--exam-blue-2);
  font-weight: 900;
}

.fe-learning-card h4,
.fe-learning-card p{
  min-width: 0;
  overflow-wrap: anywhere;
}

.fe-learning-card p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.fe-learning-priority{
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger-hover);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.fe-learning-action{
  justify-self: start;
  padding: 10px 14px;
  border: none;
  border-radius: 999px;
  background: var(--exam-blue);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

.fe-learning-action:hover{
  background: var(--exam-blue-2);
  transform: translateY(-1px);
}
.fe-learning-card.is-weak .fe-learning-icon{
  background: color-mix(in srgb, var(--danger-bg) 70%, var(--paper));
  border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
  color: var(--danger-hover);
}

@media (max-width: 1100px) {
  .fe-learning-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



:root[data-theme="dark"] .fe-learning-plan{
  background:
    radial-gradient(circle at 10% 0%, rgba(59, 130, 246, 0.15), transparent 32%),
    linear-gradient(180deg, rgba(33, 38, 54, 0.98), rgba(21, 26, 38, 0.98));
  border-color: var(--exam-blue-line);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .fe-learning-score,
:root[data-theme="dark"] .fe-learning-card{
  background: var(--paper);
  border-color: var(--line);
}

:root[data-theme="dark"] .fe-learning-plan h3,
:root[data-theme="dark"] .fe-learning-plan h4{
  color: var(--text-strong);
}

/* v68: mock exam full report and configurable landing */
.fe-mock-config-panel{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 18px;
  background: rgba(239, 246, 255, 0.74);
}

.fe-mock-config-panel label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 800;
  color: #1e3a8a;
}

.fe-mock-config-panel select{
  width: 100%;
}

.fe-mock-config-note{
  grid-column: 1 / -1;
  color: #475569;
  font-size: 0.94rem;
  line-height: 1.7;
}

.fe-mock-result-report{
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.fe-mock-result-summary small{
  display: block;
  margin-top: 8px;
  color: inherit;
  opacity: 0.82;
  overflow-wrap: anywhere;
}

.fe-mock-result-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.fe-mock-result-panel{
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.fe-mock-result-panel h4{
  margin: 0 0 12px;
  color: #0f172a;
}

.fe-mock-result-category-list{
  display: grid;
  gap: 8px;
}

.fe-mock-result-category-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border-left: 5px solid #94a3b8;
}

.fe-mock-result-category-row.is-good{ border-left-color: #16a34a; }
.fe-mock-result-category-row.is-ok{ border-left-color: #f59e0b; }
.fe-mock-result-category-row.is-weak{ border-left-color: #dc2626; }

.fe-mock-result-category-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-mock-next-actions{
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.75;
  color: #334155;
}

.fe-mock-result-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.fe-mock-result-actions .submit-btn,
.fe-mock-result-actions .secondary-btn{
  min-height: 42px;
}

:root[data-theme="dark"] .fe-mock-config-panel,
:root[data-theme="dark"] .fe-mock-result-panel{
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(96, 165, 250, 0.26);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .fe-mock-config-panel label,
:root[data-theme="dark"] .fe-mock-result-panel h4{
  color: #dbeafe;
}

:root[data-theme="dark"] .fe-mock-config-note,
:root[data-theme="dark"] .fe-mock-next-actions{
  color: #cbd5e1;
}

:root[data-theme="dark"] .fe-mock-result-category-row{
  background: rgba(30, 41, 59, 0.78);
  color: #e5e7eb;
}



/* v69: explanation understanding feedback */

.understanding-feedback-head{
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin-bottom: .8rem;
}

.understanding-feedback-head p,
.understanding-saved-note{
  margin: 0;
  color: #475569;
  font-size: .9rem;
  line-height: 1.6;
}
.understanding-button-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin: .8rem 0;
}




.understanding-btn strong{ font-size: .95rem; }
.understanding-btn small{
  color: #64748b;
  line-height: 1.45;
}
.fe-learning-card.is-understanding .fe-learning-icon,
.fe-dash-insight-card-v37.is-understanding strong{
  color: #7c3aed;
}
.understanding-summary-list{
  display: grid;
  gap: .55rem;
}
.understanding-summary-row{
  display: grid;
  grid-template-columns: auto minmax(6rem, .7fr) minmax(0, 1fr);
  gap: .55rem;
  align-items: center;
  padding: .65rem .75rem;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 14px;
  background: rgba(250, 245, 255, 0.72);
}
.understanding-summary-level{
  font-weight: 800;
  color: #6d28d9;
  white-space: nowrap;
}
.understanding-summary-category,
.understanding-summary-title{
  min-width: 0;
  overflow-wrap: anywhere;
}

/* v69: dashboard proposal mobile overflow guard */


/* v69: dashboard grid child min-width guard */


/* v69: nested dashboard panel mobile shrink guard */


/* v69.2: ダッシュボードは学習提案を主役にし、詳細分析は折りたたむ */
.fe-dashboard-details.v69-2-dashboard-details{
  margin-top: 18px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 18px;
  background: var(--surface-color, #fff);
  overflow: hidden;
}
.fe-dashboard-details.v69-2-dashboard-details > summary{
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  font-weight: 800;
}
.fe-dashboard-details.v69-2-dashboard-details > summary::-webkit-details-marker{ display: none; }
.fe-dashboard-details.v69-2-dashboard-details > summary::after{
  content: '＋';
  font-weight: 900;
}
.fe-dashboard-details.v69-2-dashboard-details[open] > summary::after{ content: '−'; }
.fe-dashboard-details.v69-2-dashboard-details > summary small{
  font-weight: 600;
  color: var(--muted-text, #64748b);
}
.fe-dashboard-details.v69-2-dashboard-details[open]{
  padding-bottom: 16px;
}

/* v69.8: consolidated mobile breakpoint.
   Keep the historic 700.98px threshold for visual compatibility,
but maintain it in one block. */
@media (max-width: 700.98px){
  body {
    overflow-x: hidden;
  }

  .header-inner,
  .qualification-content-v39,
  .qualification-hero-v39,
  .boki-main.course-select-v39,
  .course-select-v39,
  .quiz-section {
    padding-left: var(--mobile-page-pad-v40);
    padding-right: var(--mobile-page-pad-v40);
  }

  .site-header {
    position: sticky;
  }

  .header-inner {
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .logo {
    font-size: 21px;
  }

  .logo-mark {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }

  

  

  .quiz-section {
    padding-top: 28px;
    padding-bottom: 48px;
  }

  .quiz-box {
    padding: 18px;
    border-radius: 22px;
  }

  .quiz-header {
    margin-bottom: 24px;
  }

  .quiz-header h2,
  .section-title h2,
  .qualification-heading-v39 h2,
  .course-section-title-v39 h2 {
    font-size: clamp(24px, 8vw, 32px);
    line-height: 1.25;
  }

  .fe-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
  }

  .fe-tab {
    min-width: 0;
    min-height: 92px;
    padding: 14px 8px;
    border-radius: 18px;
    overflow: hidden;
  }

  .fe-tab-icon {
    font-size: 23px;
  }

  .fe-tab-label {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1.35;
  }

  .fe-tab-desc,
  .fe-tab-badge {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
    font-size: 11px;
  }

  .fe-mode-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
  }

  .fe-mode-option,
  .fe-practice-count-option,
  .fe-mode-bar .category-filter,
  .fe-review-clear-btn,
  .fe-quiz-info,
  .fe-accuracy {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .fe-mode-option,
  .category-filter,
  .fe-review-clear-btn {
    min-height: 44px;
  }

  .unified-key-help {
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 1.7;
  }

  .shortcut-help-link {
    min-height: 34px;
    margin-top: 8px;
  }

  .question-card.unified-question-card {
    padding: 18px;
    border-radius: var(--mobile-card-radius-v40);
  }

  .question-meta-v36 {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .question-mode-badge{
    min-height: 36px;
  }

  .question-content-v36 {
    padding: 16px;
    border-radius: 18px;
  }

  .question-content-v36 .question-body,
  .fe-explanation-body,
  .question-body,
  .fe-explanation {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .question-content-v36 .question-body {
    font-size: 15.5px;
    line-height: 1.9;
  }

  .options,
  .options-grid {
    gap: 10px;
  }

  .option,
  .options-grid .option {
    min-height: var(--tap-target-v40);
    padding: 14px;
    border-radius: 16px;
    line-height: 1.75;
  }

  .option.fe-correct-answer::after {
    position: static;
    display: inline-flex;
    transform: none;
    margin-left: auto;
    padding-left: 8px;
  }

  .v36-question-nav,
  .unified-nav,
  .fe-exam-status,
  .fe-exam-submit-row,
  .fe-dashboard-grid-v37,
  .v37-summary-cards,
  .fe-dash-cards,
  .fe-dash-insight-grid-v37,
  .qualification-hero-stats-v39,
  .course-hero-metrics-v39,
  .course-actions-v39 {
    grid-template-columns: 1fr;
  }

  .v36-question-nav {
    padding: 10px;
    border-radius: 18px;
  }

  .v36-question-nav button,
  .submit-btn,
  .question-answer-btn-v36,
  .fe-exam-cta,
  .qualification-cta-v39,
  .course-actions-v39 a,
  .fe-review-remove-btn {
    width: 100%;
    min-height: var(--tap-target-v40);
  }

  .fe-exam-landing,
  .fe-exam-status,
  .fe-exam-submit-row,
  .fe-dash-hero-v37,
  .qualification-hero-panel-v39,
  .course-hero-v39 {
    border-radius: 22px;
  }

  .fe-exam-landing {
    padding: 24px 16px;
  }

  .fe-exam-landing h3,
  .fe-dash-hero-v37 h3,
  .course-hero-v39 h1,
  .qualification-hero-panel-v39 h1{
    font-size: clamp(28px, 9vw, 38px);
    line-height: 1.18;
  }

  .exam-info,
  .fe-exam-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .exam-info > div,
  .exam-info > .fe-exam-info-card,
  .fe-exam-timer-box,
  .fe-exam-answered-box {
    width: 100%;
    min-width: 0;
    border-radius: 18px;
  }

  .fe-exam-status {
    gap: 12px;
    padding: 16px;
  }

  .fe-dash-hero-v37,
  .v37-summary-card,
  .fe-dash-section,
  .fe-dash-card,
  .fe-dash-insight-card-v37 {
    padding: 18px;
    border-radius: 20px;
  }

  .fe-dash-history-wrap,
  .fe-dash-history {
    overflow-x: visible;
    max-height: none;
  }

  .fe-dash-history-head {
    display: none;
  }

  .fe-dash-history-row.practice-history-row,
  .fe-history-row-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
  }

  .fe-history-title,
  .fe-history-category,
  .fe-dash-time {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .fe-history-status,
  .fe-history-subject,
  .fe-history-category,
  .fe-history-title,
  .fe-dash-time,
  .fe-review-remove-btn {
    min-width: 0;
    max-width: 100%;
  }

  .v37-cat-row,
  .fe-dash-cat-row,
  .fe-mock-history-row,
  .fe-mock-heatmap-row,
  .bookmark-study-row {
    grid-template-columns: 1fr;
  }

  .fe-dash-cat-track,
  .fe-dash-bar-wrap {
    width: 100%;
  }
  .course-card-grid-v39,
  .qualification-grid-v39,
  .flow-grid-v39,
  .fp3-area-grid-v117 {
    grid-template-columns: 1fr;
  }
  .qualification-search-v39 {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 18px;
  }
  .qualification-search-v39 input {
    min-height: 48px;
  }
  .qualification-search-v39 button {
    min-height: var(--tap-target-v40);
    border-radius: 0 0 16px 16px;
  }
  .course-action-card-v39,
  .qualification-card-v39,
  .flow-card-v39,
  .fp3-area-card-v117 {
    border-radius: 20px;
  }

  .course-action-card-v39,
  .flow-card-v39,
  .fp3-area-card-v117{
    padding: 22px;
  }

  .qualification-hero-panel-v39,
  .course-hero-v39 {
    padding: 34px 18px;
  }

  .qualification-hero-stats-v39 div,
  .course-hero-metrics-v39 div {
    padding: 16px;
  }


  .accounting-entry-scroll, .table-input-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .accounting-entry-table, .table-input-table {
    min-width: 520px;
  }

  :where(.question-content-v36) {
    padding: 0;
  }

  :where(.question-content-v36 .question-body) {
    padding: 16px;
  }

  :where(.table-input-correct-row) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  :where(.accounting-correct-box) {
    grid-template-columns: 1fr;
  }

  .fe-learning-plan-header,
  .fe-learning-grid {
    grid-template-columns: 1fr;
  }

  .fe-learning-card-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .fe-learning-priority {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .fe-mock-result-grid {
    grid-template-columns: 1fr;
  }
  .fe-mock-result-category-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .fe-mock-result-category-row span:last-child {
    grid-column: 1 / -1;
  }
  .fe-mock-result-actions {
    flex-direction: column;
  }
  .fe-mock-result-actions .submit-btn,
  .fe-mock-result-actions .secondary-btn {
    width: 100%;
  }

  .fe-dash,
  .streak-dashboard-wrap,
  .fe-dash-hero-v37,
  .fe-dash-hero-copy,
  .fe-dash-insight-grid-v37,
  .fe-dash-insight-card-v37,
  .fe-learning-plan,
  .fe-learning-card {
    min-width: 0;
    max-width: 100%;
  }
  .fe-dash-hero-v37 {
    grid-template-columns: 1fr;
    width: 100%;
    box-sizing: border-box;
  }

  .v37-dashboard {
    grid-template-columns: minmax(0, 1fr);
  }
  .v37-dashboard > * {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .fe-dashboard-grid-v37,
  .v37-summary-cards,
  .fe-dash-cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .fe-dashboard-grid-v37 > *,
  .v37-summary-cards > *,
  .fe-dash-cards > *,
  .v37-panel,
  .fe-dash-section {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .fe-dash-panel-header,
  .fe-mock-history-list,
  .dashboard-empty-note {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }


  /* v70 home course-first mobile layout */
.home-v70-hero { padding: 34px 14px 28px; }
    .home-v70-hero::before { inset: 10px; border-radius: 22px; }
    .home-v70-hero h1 { font-size: clamp(36px, 13vw, 54px); }
    .home-v70-lead { font-size: 15px; line-height: 1.85; }
    .home-v70-actions { display: grid; }
    .home-v70-primary,
    .home-v70-secondary { width: 100%; }
    .home-v70-search { grid-template-columns: 1fr; }
    .home-v70-search button { min-height: 48px; }
    .home-v70-path-card { padding: 18px; border-radius: 22px; }
    .home-v70-streak-preview { grid-template-columns: 1fr; }
    .home-v70-launcher,
    .home-v70-flow,
    .home-v70-seo { padding: 48px 14px; }
    .home-v70-course-grid { grid-template-columns: 1fr; }
    .home-v70-course-card,
    .home-v70-course-card.is-featured,
    .home-v70-course-card:nth-child(2) {
      grid-column: auto;
      min-height: auto;
      padding: 20px;
      border-radius: 22px;
    }
    .home-v70-course-card h3 { font-size: 23px; }
    .home-v70-section-title { text-align: left; }
    .home-v70-final-cta { margin: 8px 14px 52px; border-radius: 24px; }
  .home-v70-quick-tags a {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ========================================
   v70-home: Progate/Duolingo inspired course-first homepage
   - Home only. Prioritizes clear course selection and quick-start CTAs.
   ======================================== */


.home-v70-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(42px, 7vw, 88px) 20px 42px;
}



.home-v70-hero-inner{
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.72fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.home-v70-copy{ max-width: 720px; }







.home-v70-lead{
  max-width: 650px;
  color: var(--muted);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 2;
}

.home-v70-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 16px;
}

.home-v70-primary,
.home-v70-secondary,
.home-v70-final-cta a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 48px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}





.home-v70-primary:hover,
.home-v70-secondary:hover,
.home-v70-final-cta a:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(49, 134, 111, 0.22);
}



.home-v70-search input,
.home-v70-search button{
  min-height: 54px;
  border: 0;
  font: inherit;
}

.home-v70-search input{
  min-width: 0;
  padding: 0 18px;
  background: transparent;
  color: var(--text);
}



.home-v70-quick-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}





.home-v70-path-head{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.home-v70-path-head span,
.home-v70-streak-preview span{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.home-v70-path-head strong{ color: var(--text-strong); }

.home-v70-path-list{
  display: grid;
  gap: 12px;
  list-style: none;
}





.home-v70-path-list strong{ display: block; color: var(--text-strong); }
.home-v70-path-list small{ color: var(--muted); }

.home-v70-streak-preview{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}





.home-v70-launcher,
.home-v70-flow,
.home-v70-seo{
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(54px, 7vw, 84px) 20px;
}

.home-v70-section-title{
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
}



.home-v70-section-title p{
  color: var(--muted);
  line-height: 1.9;
}







.home-v70-course-card:nth-child(2){ grid-column: span 3; }

.home-v70-card-top{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}



.home-v70-status{
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.home-v70-status.is-live{ background: var(--success-bg); color: #15803d; }



.home-v70-course-card p:not(.home-v70-course-label){
  color: var(--muted);
  line-height: 1.8;
}

.home-v70-flow-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}






.home-v70-flow-grid p{ color: var(--muted); line-height: 1.8; }





.home-v70-final-cta p{
  margin: 12px 0 24px;
  color: var(--muted);
}



:root[data-theme="dark"] .home-v70-hero::before,
:root[data-theme="dark"] .home-v70-course-card,
:root[data-theme="dark"] .home-v70-path-card,
:root[data-theme="dark"] .home-v70-flow-grid div,
:root[data-theme="dark"] .home-v70-final-cta{
  border-color: var(--dark-border-soft);
}

:root[data-theme="dark"] .home-v70-path-card,
:root[data-theme="dark"] .home-v70-course-card,
:root[data-theme="dark"] .home-v70-flow-grid div,
:root[data-theme="dark"] .home-v70-search,
:root[data-theme="dark"] .home-v70-quick-tags a,
:root[data-theme="dark"] .home-v70-final-cta{
  background: color-mix(in srgb, var(--paper) 88%, transparent);
}

:root[data-theme="dark"] .home-v70-hero h1,
:root[data-theme="dark"] .home-v70-section-title h2,
:root[data-theme="dark"] .home-v70-course-card h3,
:root[data-theme="dark"] .home-v70-path-head strong,
:root[data-theme="dark"] .home-v70-path-list strong,
:root[data-theme="dark"] .home-v70-flow-grid h3,
:root[data-theme="dark"] .home-v70-final-cta h2{
  color: var(--dark-text-heading);
}

:root[data-theme="dark"] .home-v70-lead,
:root[data-theme="dark"] .home-v70-section-title p,
:root[data-theme="dark"] .home-v70-course-card p:not(.home-v70-course-label),
:root[data-theme="dark"] .home-v70-flow-grid p,
:root[data-theme="dark"] .home-v70-final-cta p,
:root[data-theme="dark"] .home-v70-path-list small{
  color: var(--dark-text-muted);
}

:root[data-theme="dark"] .home-v70-search input,
:root[data-theme="dark"] .home-v70-quick-tags a{
  color: var(--dark-text-body);
}

@media (max-width: 980.98px) {
  .home-v70-hero-inner,
.home-v70-flow-grid{
    grid-template-columns: 1fr;
  }

  
  
}



/* ────────────────────────────────────────────────────────
   Cat Mascot System — light/dark theme switching
   White cat = light theme,
Black cat = dark theme
   ──────────────────────────────────────────────────────── */

/* Base: show light cat,
hide dark cat */
.cat-dark{ display: none; }
.cat-light{ display: block; }

:root[data-theme="dark"] .cat-light{ display: none; }
:root[data-theme="dark"] .cat-dark{ display: block; }

/* ── Hero mascot ── */
.home-v70-hero-right{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.home-v70-mascot-hero{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}



:root[data-theme="dark"] .home-v70-mascot-hero img{
  filter: drop-shadow(0 18px 40px rgba(92, 200, 168, 0.22));
}

@keyframes catFloat {
  0%,
100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

.mascot-speech{
  position: absolute;
  top: -8px;
  right: -24px;
  padding: 10px 16px;
  background: var(--paper);
  border: 2px solid var(--accent);
  border-radius: 18px 18px 18px 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(49, 134, 111, 0.12);
  animation: speechPop 0.5s ease-out 0.8s both;
}

.mascot-speech::after{
  content: "";
  position: absolute;
  bottom: 8px;
  left: -8px;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

@keyframes speechPop {
  0%{ opacity: 0; transform: scale(0.7) translateY(8px); }
  100%{ opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Course card corner cats ── */
.home-v70-card-cat{
  position: absolute;
  bottom: -6px;
  right: -6px;
  pointer-events: none;
  opacity: 0.18;
  transition: opacity 0.4s ease, transform 0.4s ease;
}



.home-v70-course-card:hover .home-v70-card-cat{
  opacity: 0.4;
  transform: scale(1.08) rotate(-3deg);
}

/* ── Flow section cats ── */






/* ── Final CTA with cat ── */
.home-v70-cta-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 48px);
}



.home-v70-final-cta:hover .home-v70-cta-cat img{
  transform: scale(1.08) rotate(-4deg);
}

:root[data-theme="dark"] .home-v70-cta-cat img{
  filter: drop-shadow(0 12px 28px rgba(92, 200, 168, 0.2));
}

.home-v70-cta-text{ text-align: center; }

/* ── Footer cat ── */
.footer-brand-row{
  display: flex;
  align-items: center;
  gap: 12px;
}



.site-footer:hover .footer-cat img{
  opacity: 0.85;
  transform: rotate(-5deg) scale(1.05);
}

/* ── Mobile adjustments ── */
/* v71 mobile: consolidated at end of file */

/* v71 mobile: consolidated at end of file */

/* v70-home overflow fix: long English course labels should wrap on 360px screens. */
.home-v70-course-label{
  max-width: 100%;
  overflow-wrap: anywhere;
}
@media (max-width: 420px) {
  .home-v70-course-label{ letter-spacing: 0.10em; }
}

/* v70-home mobile overrides are placed after the base home block so they win cascade order. */
@media (max-width: 700px){
  
  
  
  
  
  
  
  .home-v70-search button { min-height: 48px; }
  
  
  
  
  
  
  
  
  
  
}

/* ════════════════════════════════════════════════════════════════════════════
   v71 "色えんぴつノート" – Warm Illustrated Aesthetic System
   Aligns site-wide UI with the hand-drawn cat mascot characters.
   Softer shadows,
warmer borders,
storybook feel.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Root token warm shift (light) ── */
:root{  --font-sans: "Yu Gothic", "Hiragino Sans", "Meiryo", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --focus-ring: 0 0 0 4px rgba(49, 134, 111, 0.22);
  --surface-soft: #f8fbff;
  --surface-warm: #fffaf0;
  --line-warm: #ddcfb2;
  --text-strong: #172033;
  --button-emphasis-bg: #172033;
  --button-emphasis-bg-hover: #26344f;
  --gold-deep: #967b3d;
  --text-on-accent: #ffffff;
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-deep: #b91c1c;
  --danger-text: #991b1b;
  --danger-bg: #fee2e2;
  --danger-shadow: rgba(185, 28, 28, 0.22);
  color-scheme: light;
  --navy: #1e3a5f;
  --navy-light: #2d5a87;
  --gold: #f0965b;
  --gold-dark: #a85f20;
  --cream: #fdf8f3;
  --paper: #ffffff;
  --text: #243447;
  --muted: #64748b;
  --line: #e8e0d8;
  --green: #e8f8ee;
  --red: #fef0f0;
  --accent: #31866f;
  --accent-light: #e6f6f1;
  --warm: #fef5ec;
  --coral: #f07b6e;
  --sky: #e8f4fd;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --shadow-sm: 0 2px 8px rgba(30, 58, 95, 0.06);
  --shadow-md: 0 8px 24px rgba(30, 58, 95, 0.08);
  --shadow-lg: 0 16px 48px rgba(30, 58, 95, 0.10);
  --seo-blue-v41: #2563eb;
  --seo-blue-soft-v41: #eff6ff;
  --seo-ad-border-v41: rgba(37, 99, 235, 0.28);
  --seo-ad-bg-v41: rgba(239, 246, 255, 0.78);
  /* Shared action color tokens */
  --action-bg: #f1fffa;
  --action-bg-strong: #21826d;
  --action-bg-strong-2: #35ad91;
  --action-text: #155f51;
  --action-border: rgba(33, 130, 109, 0.55);
  --action-shadow: 0 12px 28px rgba(33, 130, 109, 0.18);
  --action-shadow-hover: 0 18px 40px rgba(53, 173, 145, 0.34);
  --home-blue: #2563eb;
  --home-blue-2: #60a5fa;
  --home-indigo: #0f2a57;
  --home-panel: rgba(255, 255, 255, 0.84);
  --home-glow: 0 28px 80px rgba(37, 99, 235, 0.18);
  --exam-blue: #2563eb;
  --exam-blue-2: #1d4ed8;
  --exam-blue-soft: #eaf3ff;
  --exam-blue-line: #bfd7ff;
  --exam-card-shadow: 0 18px 48px rgba(37, 99, 235, 0.10);
  --exam-card-shadow-hover: 0 22px 56px rgba(37, 99, 235, 0.16);
  --success: #22c55e;
  --success-bg: #dcfce7;
  --course-blue: #2563eb;
  --course-blue-2: #0ea5e9;
  --course-navy: #0f2a57;
  --course-ink: #10213d;
  --course-card: rgba(255, 255, 255, 0.92);
  --course-card-border: rgba(37, 99, 235, 0.16);
  --course-glow: 0 26px 70px rgba(37, 99, 235, 0.14);
  /* v40 mobile responsive tokens */
  --tap-target-v40: 52px;
  --mobile-page-pad-v40: 14px;
  --mobile-card-radius-v40: 20px;
  --line: #e4d9cc;
  --line-warm: #d9cab4;
  --shadow-sm: 0 2px 10px rgba(120, 90, 50, 0.06);
  --shadow-md: 0 8px 28px rgba(120, 90, 50, 0.08);
  --shadow-lg: 0 18px 52px rgba(120, 90, 50, 0.10);
  --surface-soft: #faf6f0;
  --surface-warm: #fdf5e9;
  --paper: #fffdf9;
}

/* ── 2. Body background: warm parchment ── */
body{  font-family: var(--font-sans);
  font-size: 16px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: linear-gradient(175deg, var(--surface-soft) 0%, #fdf8f3 40%, #fef5ec 100%);
  color: var(--text);
  line-height: 1.8;
  letter-spacing: 0.01em;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 220, 170, 0.12), transparent 50%),
    radial-gradient(ellipse at 80% 10%, rgba(200, 230, 210, 0.10), transparent 40%),
    linear-gradient(175deg, #faf7f2 0%, #fdf5e9 40%, #faf2e6 100%);
}

:root[data-theme="dark"] body{  background: linear-gradient(175deg, var(--dark-page-start) 0%, var(--surface-soft) 40%, var(--paper) 100%);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(92, 200, 168, 0.06), transparent 50%),
    radial-gradient(ellipse at 80% 10%, rgba(245, 180, 100, 0.04), transparent 40%),
    linear-gradient(175deg, var(--dark-page-start) 0%, var(--surface-soft) 50%, var(--dark-page-start) 100%);
}

/* ── 3. Header: warmer,
softer ── */
.site-header{  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(232, 224, 216, 0.6);
  background: rgba(255, 253, 248, 0.92);
  border-bottom: 1px solid rgba(210, 190, 160, 0.45);
}

:root[data-theme="dark"] .site-header{  background: rgba(21, 26, 38, 0.92);
  border-bottom-color: var(--line);
  background: rgba(21, 26, 38, 0.94);
  border-bottom-color: rgba(80, 70, 55, 0.35);
}

.logo{  font-family: "Yu Mincho", serif;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--navy);
  font-family: var(--font-serif);
  color: #4a3520;
}

.logo span:last-child{  color: var(--gold-dark);
  color: #b87333;
}

:root[data-theme="dark"] .logo{
  color: #e8d8c4;
}

:root[data-theme="dark"] .logo span:last-child{
  color: #f0b878;
}

.logo-mark{  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  background: linear-gradient(135deg, var(--accent), #38a085);
  border: none;
  box-shadow: 0 2px 8px rgba(75, 184, 154, 0.3);
  background: linear-gradient(135deg, #5aab8e, #3d9178);
  box-shadow: 0 3px 12px rgba(90, 171, 142, 0.28);
}

/* ── 4. Buttons: softer,
warmer ── */
button{  border: none;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent), #38a085);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: 0.25s;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #5aab8e, #47977a);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(74, 150, 120, 0.2);
}

button:hover{  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(75, 184, 154, 0.25);
  box-shadow: 0 8px 24px rgba(74, 150, 120, 0.28);
}

button.secondary{  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius-sm);
  border: 2px solid #5aab8e;
  color: #5aab8e;
  border-radius: 14px;
}

button.secondary:hover{  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  background: #5aab8e;
}

/* ── 5. Quiz box & question cards: notebook paper feel ── */
.quiz-box{  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-md);
  background: rgba(255, 253, 248, 0.96);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 12px 36px rgba(120, 90, 50, 0.07);
}

:root[data-theme="dark"] .quiz-box{
  background: rgba(26, 30, 42, 0.96);
  border-color: rgba(80, 70, 55, 0.28);
}

.quiz-header h2{  font-family: "Yu Mincho", serif;
  color: var(--navy);
  font-size: 36px;
  margin-bottom: 10px;
  font-family: var(--font-serif);
  color: #3a2815;
  letter-spacing: 0.06em;
}

:root[data-theme="dark"] .quiz-header h2{
  color: #e8d8c4;
}

.quiz-label{  color: var(--gold-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.22em;
  margin-bottom: 8px;
  color: #b87333;
}

.question-card{  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 4px 16px rgba(120, 90, 50, 0.05);
}

:root[data-theme="dark"] .question-card{
  background: #1e2230;
  border-color: rgba(80, 70, 55, 0.22);
}

.question-meta span{  color: var(--gold-dark);
  font-weight: 900;
  color: #b87333;
}

.question-card h3{  color: var(--navy);
  font-size: 18px;
  margin-bottom: 18px;
  color: #3a2815;
}

:root[data-theme="dark"] .question-card h3{
  color: #e8d8c4;
}

/* ── 6. Options: warm interactive style ── */
.option{  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 48px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  line-height: 1.85;
  background: #faf7f2;
  border: 1px solid #e4d9cc;
  border-radius: 14px;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.option:hover{  background: var(--accent-light);
  border-color: var(--accent);
  background: #eef8f3;
  border-color: #5aab8e;
  box-shadow: 0 4px 16px rgba(90, 171, 142, 0.12);
}

:root[data-theme="dark"] .option{  background: #1e2433;
  border-color: var(--line);
  background: var(--paper);
  border-color: rgba(80, 70, 55, 0.24);
}

:root[data-theme="dark"] .option:hover{  background: var(--accent-light);
  border-color: var(--accent);
  background: rgba(30, 126, 107, 0.15);
  border-color: rgba(92, 200, 168, 0.5);
}

/* ── 7. Correct/incorrect: warm result colors ── */
.option.fe-correct{  background: #dcfce7;
  border-color: #22c55e;
  border-left: 4px solid #22c55e;
  background: #f0faf4;
  border-color: #5aab8e;
}

.option.fe-incorrect{  background: var(--danger-bg);
  border-color: var(--danger);
  border-left: 4px solid var(--danger);
  background: #fef5f0;
  border-color: #e8886a;
}

:root[data-theme="dark"] .option.fe-correct{
  background: rgba(90, 171, 142, 0.12);
  border-color: rgba(90, 171, 142, 0.5);
}

:root[data-theme="dark"] .option.fe-incorrect{
  background: rgba(232, 136, 106, 0.1);
  border-color: rgba(232, 136, 106, 0.4);
}

/* ── 8. Tabs: rounded notebook tabs ── */
.fe-tab{  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 82px;
  padding: 22px 16px;
  background: var(--paper);
  border: 2px solid var(--line);
  cursor: pointer;
  transition: 0.3s;
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #faf7f2;
  transition: all 0.25s ease;
}

.fe-tab:hover{  border-color: var(--gold);
  background: var(--surface-warm);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(30, 58, 95, 0.06);
  background: #eef8f3;
  border-color: #5aab8e;
}

.fe-tab.active{  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 16px 40px rgba(30, 58, 95, 0.12);
  transform: translateY(-2px);
  background: linear-gradient(135deg, #eaf6f0, #e6f0ea);
  border-color: #5aab8e;
  box-shadow: 0 4px 16px rgba(90, 171, 142, 0.14);
}

:root[data-theme="dark"] .fe-tab{
  background: var(--paper);
  border-color: rgba(80, 70, 55, 0.22);
}

:root[data-theme="dark"] .fe-tab:hover{
  background: rgba(30, 126, 107, 0.12);
}

:root[data-theme="dark"] .fe-tab.active{  background: var(--dark-button-bg) !important;
  border-color: var(--dark-button-border) !important;
  color: var(--dark-text-inverse) !important;
  background: rgba(30, 126, 107, 0.2);
  border-color: rgba(92, 200, 168, 0.5);
  box-shadow: 0 4px 20px rgba(92, 200, 168, 0.12);
}

/* ── 9. Mode bar: warm paper ── */
.fe-mode-bar{  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding: 16px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.02);
  background: #faf7f2;
  border: 1px solid var(--line);
  border-radius: 16px;
}

:root[data-theme="dark"] .fe-mode-bar{
  background: var(--paper);
  border-color: rgba(80, 70, 55, 0.22);
}

/* ── 10. Explanation panel: warm tones ── */
.fe-explanation-v36{  display: grid;
  gap: 16px;
  margin-top: 22px;
  padding: clamp(18px, 3vw, 26px);
  border-radius: 20px;
  background: color-mix(in srgb, var(--exam-blue-soft) 42%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--exam-blue-line) 74%, var(--line));
  border-left: 6px solid var(--exam-blue);
  box-shadow: 0 16px 36px rgba(15, 35, 68, 0.06);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(120, 90, 50, 0.06);
}

.fe-explanation-v36.is-correct{  background: color-mix(in srgb, var(--success-bg) 54%, var(--paper));
  border-color: color-mix(in srgb, var(--success) 68%, var(--line));
  border-left-color: var(--success);
  background: linear-gradient(135deg, #edf8f2, #f5faf7);
  border-color: #90d4a8;
  border-left-color: #5aab8e;
}

.fe-explanation-v36.is-incorrect{  background: color-mix(in srgb, var(--danger-bg) 54%, var(--paper));
  border-color: color-mix(in srgb, var(--danger) 62%, var(--line));
  border-left-color: var(--danger);
  background: linear-gradient(135deg, #fef5f0, #fdf0ea);
  border-color: #f0b8a0;
  border-left-color: #e8886a;
}

.fe-explanation-icon{  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--exam-blue);
  color: #fff;
  font-weight: 900;
  border-radius: 12px;
}

.fe-explanation-v36.is-correct .fe-explanation-icon{  background: var(--success);
  background: #5aab8e;
}

.fe-explanation-v36.is-incorrect .fe-explanation-icon{  background: var(--danger);
  background: #e8886a;
}

.fe-answer-summary{  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: rgba(255,255,255,0.62);
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 14px;
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.7);
}

/* ── 11. Understanding feedback: warm version ── */
.understanding-feedback{  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.96));
  border: 1px solid rgba(180, 140, 90, 0.2);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(250, 247, 242, 0.92), rgba(255, 253, 248, 0.96));
}

.understanding-feedback-head h4{  margin: 0 0 .15rem;
  font-size: 1rem;
  color: #1e3a8a;
  color: #4a3520;
}

.understanding-btn{  appearance: none;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: .8rem;
  display: grid;
  gap: .2rem;
  text-align: left;
  cursor: pointer;
  color: #0f172a;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(180, 140, 90, 0.18);
  background: rgba(255, 253, 248, 0.9);
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(120, 90, 50, 0.05);
}

.understanding-btn:hover,
.understanding-btn:focus-visible{  border-color: rgba(37, 99, 235, 0.55);
  transform: translateY(-1px);
  border-color: #5aab8e;
  box-shadow: 0 6px 20px rgba(90, 171, 142, 0.12);
}

.understanding-btn.is-selected{  border-color: #2563eb;
  background: rgba(219, 234, 254, 0.95);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
  border-color: #5aab8e;
  background: rgba(234, 246, 240, 0.92);
  box-shadow: 0 8px 24px rgba(90, 171, 142, 0.16);
}

.understanding-btn > span{  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  font-weight: 900;
  background: rgba(90, 171, 142, 0.12);
  color: #3d8a6c;
}

:root[data-theme="dark"] .understanding-feedback{
  background: linear-gradient(135deg, rgba(26, 30, 42, 0.92), rgba(21, 26, 38, 0.94));
  border-color: rgba(92, 200, 168, 0.2);
}

:root[data-theme="dark"] .understanding-feedback-head h4{
  color: #b8e8d4;
}

:root[data-theme="dark"] .understanding-btn{
  background: rgba(21, 26, 38, 0.88);
  border-color: rgba(80, 70, 55, 0.22);
}

:root[data-theme="dark"] .understanding-btn.is-selected{
  background: rgba(30, 126, 107, 0.2);
  border-color: rgba(92, 200, 168, 0.5);
}

/* ── 12. Review nudge/success: warm paper note feel ── */
.review-nudge{  margin-top: 14px;
  padding: 12px 16px;
  background: var(--warm, #fef5ec);
  border: 1px solid rgba(240, 150, 91, 0.25);
  border-radius: var(--radius-sm, 10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text);
  border-radius: 16px;
  background: linear-gradient(135deg, #fef9f0, #fdf5e9);
  border: 1px solid rgba(184, 115, 51, 0.2);
}

.review-success{  margin-top: 14px;
  padding: 12px 16px;
  background: var(--green, #e8f8ee);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: var(--radius-sm, 10px);
  font-size: 13px;
  font-weight: 600;
  color: #166534;
  border-radius: 16px;
  background: linear-gradient(135deg, #edf8f2, #f0faf4);
  border: 1px solid rgba(90, 171, 142, 0.25);
}

:root[data-theme="dark"] .review-nudge{  background: #2a2218;
  border-color: rgba(240, 150, 91, 0.3);
  background: rgba(42, 34, 24, 0.6);
  border-color: rgba(240, 180, 120, 0.2);
}

:root[data-theme="dark"] .review-success{  background: #1a3a28;
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
  background: rgba(26, 58, 40, 0.5);
  border-color: rgba(92, 200, 168, 0.2);
}

/* ── 13. Footer: warmer ── */
.site-footer{  padding: 34px 24px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 13px;
  border-top: 1px solid var(--line);
  background: #f5f0e8;
  border-top: 1px solid #e4d9cc;
}

:root[data-theme="dark"] .site-footer{
  background: #111520;
  border-top-color: rgba(80, 70, 55, 0.3);
}

.site-footer-brand strong{  color: var(--text-strong);
  letter-spacing: .02em;
  color: #4a3520;
}

:root[data-theme="dark"] .site-footer-brand strong{
  color: #e8d8c4;
}

.site-footer-links a{  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  color: #5aab8e;
}

.boki-hero-box,
.course-hero-v39{
  background: linear-gradient(135deg, #edf5ef, #f0f3e8, #fef5e9);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(120, 90, 50, 0.07);
}

:root[data-theme="dark"] .boki-hero-box,
:root[data-theme="dark"] .course-hero-v39{
  background: linear-gradient(135deg, rgba(26, 58, 40, 0.3), rgba(26, 30, 42, 0.8));
  border-color: rgba(80, 70, 55, 0.28);
}

.boki-hero-box h1,
.course-hero-v39 h1{
  font-family: var(--font-serif);
  color: #3a2815;
}

:root[data-theme="dark"] .boki-hero-box h1,
:root[data-theme="dark"] .course-hero-v39 h1{
  color: #e8d8c4;
}

.boki-hero-box::before,
.course-hero-v39::before{
  border-color: rgba(180, 140, 90, 0.15);
}

.boki-label,
.course-eyebrow-v39{
  color: #b87333;
}

.boki-menu-card,
.course-action-card-v39{
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 10px 32px rgba(120, 90, 50, 0.06);
}

:root[data-theme="dark"] .boki-menu-card,
:root[data-theme="dark"] .course-action-card-v39{
  background: rgba(26, 30, 42, 0.92);
  border-color: rgba(80, 70, 55, 0.22);
}

.boki-menu-card h2,
.course-action-card-v39 h2{
  color: #3a2815;
}

:root[data-theme="dark"] .boki-menu-card h2,
:root[data-theme="dark"] .course-action-card-v39 h2{
  color: #e8d8c4;
}

/* Course number badge */
.boki-number,
.course-number-v39{
  color: #b87333;
}

/* Flow cards (study steps) */
.flow-card,
.flow-card-v39{
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 6px 20px rgba(120, 90, 50, 0.05);
}

:root[data-theme="dark"] .flow-card,
:root[data-theme="dark"] .flow-card-v39{
  background: rgba(26, 30, 42, 0.88);
  border-color: rgba(80, 70, 55, 0.22);
}

.flow-card h3,
.flow-card-v39 h3{
  color: #3a2815;
}

:root[data-theme="dark"] .flow-card h3,
:root[data-theme="dark"] .flow-card-v39 h3{
  color: #e8d8c4;
}

/* ── 16. Course action buttons: warm green ── */
.boki-actions a,
.course-actions-v39 a{
  border-radius: 14px;
}

/* ── 17. Home page warm alignment ── */
.home-v70-page{  background:
    radial-gradient(circle at 12% 0%, rgba(75, 184, 154, 0.16), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(96, 165, 250, 0.18), transparent 32%),
    linear-gradient(180deg, #f8fffc 0%, #f8fbff 46%, #fffaf2 100%);
  background:
    radial-gradient(circle at 12% 0%, rgba(200, 170, 120, 0.1), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(130, 190, 160, 0.1), transparent 32%),
    linear-gradient(180deg, #faf7f2 0%, #fdf5e9 46%, #faf2e6 100%);
}

:root[data-theme="dark"] .home-v70-page{  background:
    radial-gradient(circle at 12% 0%, rgba(53, 173, 145, 0.16), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(96, 165, 250, 0.16), transparent 32%),
    linear-gradient(180deg, var(--surface-soft) 0%, #101827 100%);
  background:
    radial-gradient(circle at 12% 0%, rgba(92, 200, 168, 0.08), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(240, 180, 120, 0.05), transparent 32%),
    linear-gradient(180deg, var(--dark-page-start) 0%, var(--surface-soft) 50%, var(--dark-page-start) 100%);
}

.home-v70-hero::before{  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(49, 134, 111, 0.12);
  border-radius: 32px;
  pointer-events: none;
  border-color: rgba(180, 140, 90, 0.12);
}

.home-v70-hero h1{  margin: 18px 0 16px;
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: clamp(42px, 7vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #3a2815;
  font-family: var(--font-serif);
}

:root[data-theme="dark"] .home-v70-hero h1{
  color: #e8d8c4;
}

.home-v70-hero h1 em{  color: var(--accent);
  font-style: normal;
  background: linear-gradient(transparent 62%, rgba(75, 184, 154, 0.22) 0);
  color: #5aab8e;
  background: linear-gradient(transparent 62%, rgba(90, 171, 142, 0.18) 0);
}

.home-v70-lead-mark{
  font-style: normal;
  font-weight: 800;
  color: #47977a;
  background: linear-gradient(transparent 60%, rgba(90, 171, 142, 0.28) 0);
}
:root[data-theme="dark"] .home-v70-lead-mark{
  color: #7fd0b2;
  background: linear-gradient(transparent 60%, rgba(127, 208, 178, 0.22) 0);
}

.home-v70-eyebrow,
.home-v70-kicker,
.home-v70-course-label{  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #b87333;
}

.home-v70-primary,
.home-v70-final-cta a{  padding: 0 24px;
  background: linear-gradient(135deg, var(--accent), #39b892);
  color: #fff;
  box-shadow: 0 16px 36px rgba(49, 134, 111, 0.26);
  background: linear-gradient(135deg, #5aab8e, #47977a);
  box-shadow: 0 14px 32px rgba(74, 150, 120, 0.22);
  border-radius: 999px;
}

.home-v70-secondary{  padding: 0 22px;
  border: 1px solid rgba(49, 134, 111, 0.28);
  background: rgba(255, 255, 255, 0.72);
  color: var(--accent);
  border-color: rgba(90, 171, 142, 0.3);
  background: rgba(255, 253, 248, 0.8);
  color: #5aab8e;
}

.home-v70-search{  display: grid;
  grid-template-columns: 1fr auto;
  max-width: 680px;
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(49, 134, 111, 0.18);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(30, 58, 95, 0.08);
  overflow: hidden;
  background: rgba(255, 253, 248, 0.9);
  border-color: rgba(180, 140, 90, 0.18);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(120, 90, 50, 0.06);
}

.home-v70-search button{  padding: 0 22px;
  background: var(--text-strong);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  background: #3a2815;
}

.home-v70-quick-tags a{  padding: 7px 12px;
  border: 1px solid rgba(49, 134, 111, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  border-color: rgba(180, 140, 90, 0.18);
  background: rgba(255, 253, 248, 0.7);
}

.home-v70-path-card{  padding: 24px;
  border: 1px solid rgba(49, 134, 111, 0.18);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 28px 80px rgba(30, 58, 95, 0.12);
  backdrop-filter: blur(12px);
  border-color: rgba(180, 140, 90, 0.18);
  background: rgba(255, 253, 248, 0.85);
  box-shadow: 0 20px 60px rgba(120, 90, 50, 0.08);
}

.home-v70-path-list li{  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  border-color: var(--line);
  border-radius: 16px;
  background: var(--paper);
}

.home-v70-path-list li > span{  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 900;
  background: rgba(90, 171, 142, 0.12);
  color: #5aab8e;
}

.home-v70-streak-preview div{  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-light), #eff6ff);
  background: linear-gradient(135deg, rgba(90, 171, 142, 0.08), rgba(250, 242, 230, 0.5));
}

.home-v70-streak-preview strong{  display: block;
  margin-top: 4px;
  color: var(--accent);
  font-size: 26px;
  color: #5aab8e;
}

.home-v70-course-card{  grid-column: span 2;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 24px;
  border: 1px solid rgba(49, 134, 111, 0.16);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 42px rgba(30, 58, 95, 0.08);
  border-color: rgba(180, 140, 90, 0.14);
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 14px 38px rgba(120, 90, 50, 0.06);
  border-radius: 24px;
}

.home-v70-course-card.is-featured{  grid-column: span 3;
  background: rgba(255, 253, 248, 0.92);
}

.home-v70-course-card h3{  margin: 8px 0 10px;
  color: var(--text-strong);
  font-size: 26px;
  letter-spacing: -0.02em;
  color: #3a2815;
}

:root[data-theme="dark"] .home-v70-course-card h3{
  color: #e8d8c4;
}

.home-v70-course-icon{  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--surface-soft);
  font-size: 28px;
  border-radius: 16px;
  background: #faf7f2;
}

:root[data-theme="dark"] .home-v70-course-icon{
  background: rgba(42, 34, 24, 0.5);
}

.home-v70-flow-grid div{  padding: 24px;
  border: 1px solid rgba(49, 134, 111, 0.14);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  border-color: rgba(180, 140, 90, 0.14);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(120, 90, 50, 0.05);
}

.home-v70-flow-grid span{  display: inline-flex;
  margin-bottom: 16px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #b87333;
}

.home-v70-flow-grid h3{ margin-bottom: 8px; color: var(--text-strong); 
  color: #3a2815;
}

:root[data-theme="dark"] .home-v70-flow-grid h3{
  color: #e8d8c4;
}

.home-v70-section-title h2{  margin: 10px 0 10px;
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.03em;
  color: #3a2815;
  font-family: var(--font-serif);
}

:root[data-theme="dark"] .home-v70-section-title h2{
  color: #e8d8c4;
}

.home-v70-final-cta{  max-width: 1120px;
  margin: 24px auto 80px;
  padding: clamp(34px, 6vw, 58px) 20px;
  border: 1px solid rgba(49, 134, 111, 0.16);
  border-radius: 32px;
  background: linear-gradient(135deg, #e9f9f3, #eff6ff, #fff7ed);
  text-align: center;
  box-shadow: 0 26px 64px rgba(30, 58, 95, 0.10);
  border-color: rgba(180, 140, 90, 0.14);
  background: linear-gradient(135deg, #edf5ef, #fef5e9, #faf7f2);
  box-shadow: 0 20px 52px rgba(120, 90, 50, 0.08);
  border-radius: 28px;
}

.home-v70-final-cta h2{  color: var(--text-strong);
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing: -0.03em;
  color: #3a2815;
  font-family: var(--font-serif);
}

:root[data-theme="dark"] .home-v70-final-cta h2{
  color: #e8d8c4;
}

:root[data-theme="dark"] .home-v70-final-cta{
  background: rgba(26, 30, 42, 0.9);
  border-color: rgba(80, 70, 55, 0.28);
}

/* ── 18. SEO link hub: warm ── */
.seo-link-grid-v41 a{  display: grid;
  gap: 8px;
  min-height: 170px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--seo-blue-v41) 18%, var(--line));
  border-radius: 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--seo-blue-v41) 7%, var(--paper)), var(--paper));
  box-shadow: 0 16px 36px rgba(30, 58, 95, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  border-radius: 18px;
  border-color: var(--line);
  background: var(--paper);
}

:root[data-theme="dark"] .seo-link-grid-v41 a{  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.10), rgba(33, 38, 54, 0.92));
  border-color: var(--dark-blue-border-soft);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.26);
  background: rgba(26, 30, 42, 0.88);
  border-color: rgba(80, 70, 55, 0.22);
}

/* ── 19. Navigation panel: warm ── */
.site-menu-panel{  border-top: 1px solid rgba(75, 184, 154, 0.5);
  background: rgba(255, 250, 240, 0.98);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px rgba(30, 58, 95, 0.05);
  background: rgba(255, 253, 248, 0.98);
}

:root[data-theme="dark"] .site-menu-panel{  background: rgba(26, 30, 42, 0.98);
  border-top-color: var(--line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  background: rgba(21, 26, 38, 0.98);
}

/* ── 20. Streak display: warm ── */
.streak-display{  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: var(--warm);
  color: #9a3412;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
  border-radius: 18px;
}

/* ── 21. Learning calendar: warm accent ── */





/* ── 22. Qualifications page warm alignment ── */
.qualification-page-v3{  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 0%, rgba(75,184,154,0.18), transparent 32%),
    linear-gradient(180deg, var(--surface-soft) 0%, #fdf8f3 100%);
  background: transparent;
}

/* ── 23. Global border-radius uplift for all cards ── */
.seo-source-box{  margin-top: 18px;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
 border-radius: 22px; 
}

/* ── 24. Dark mode card backgrounds ── */
:root[data-theme="dark"] .home-v70-course-card,
:root[data-theme="dark"] .home-v70-path-card,
:root[data-theme="dark"] .home-v70-flow-grid div,
:root[data-theme="dark"] .home-v70-search,
:root[data-theme="dark"] .home-v70-quick-tags a{
  background: rgba(26, 30, 42, 0.92);
  border-color: rgba(80, 70, 55, 0.28);
}

/* ── 25. Study page cat companion (via JS) ── */
.study-cat-companion{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.study-cat-companion.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}



.study-cat-companion img:hover{
  transform: scale(1.1) rotate(-3deg);
}

:root[data-theme="dark"] .study-cat-companion img{
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));
}

.study-cat-companion .cat-speech{
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  padding: 8px 14px;
  background: var(--paper);
  border: 2px solid #5aab8e;
  border-radius: 14px 14px 4px 14px;
  color: #3d8a6c;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(90, 171, 142, 0.12);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s, transform 0.3s;
}

.study-cat-companion .cat-speech.is-visible{
  opacity: 1;
  transform: scale(1);
}

/* v71 mobile: see consolidated block at end of file */

/* ── 26. Course hero metrics: warm badges ── */
.course-hero-metrics-v39 div{
  border-radius: 16px;
}

/* ── 27. Tags: warm outline style ── */
.boki-tags span,
.course-tags-v39 span{
  border-radius: 12px;
}

.course-feature-strip-v39 span{
  border-radius: 10px;
}

/* ── 29. Dark theme home overrides: ensure warm dark,
not cold ── */
:root[data-theme="dark"] .home-v70-hero::before{
  border-color: rgba(184, 115, 51, 0.1);
}

:root[data-theme="dark"] .home-v70-path-list li > span{
  background: rgba(92, 200, 168, 0.15);
  color: #5cc8a8;
}

:root[data-theme="dark"] .home-v70-streak-preview div{
  background: linear-gradient(135deg, rgba(92, 200, 168, 0.1), rgba(42, 34, 24, 0.4));
}

:root[data-theme="dark"] .home-v70-streak-preview strong{
  color: #5cc8a8;
}

:root[data-theme="dark"] .home-v70-primary,
:root[data-theme="dark"] .home-v70-final-cta a{
  background: linear-gradient(135deg, #3d9178, #2d7a64);
  box-shadow: 0 14px 32px rgba(61, 145, 120, 0.2);
}

:root[data-theme="dark"] .home-v70-secondary{
  border-color: rgba(92, 200, 168, 0.3);
  background: rgba(26, 30, 42, 0.7);
  color: #5cc8a8;
}

:root[data-theme="dark"] .home-v70-search{
  border-color: rgba(80, 70, 55, 0.22);
}

:root[data-theme="dark"] .home-v70-search button{
  background: #2a3a50;
}

:root[data-theme="dark"] .home-v70-eyebrow,
:root[data-theme="dark"] .home-v70-kicker,
:root[data-theme="dark"] .home-v70-course-label{
  color: #f0b878;
}

:root[data-theme="dark"] .home-v70-flow-grid span{
  color: #f0b878;
}


/* ── 30. Course hero cat mascot ── */
.course-hero-cat{
  position: absolute;
  top: 20px;
  right: 24px;
  opacity: 0.22;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}



.boki-hero-box:hover .course-hero-cat,
.course-hero-v39:hover .course-hero-cat{
  opacity: 0.45;
  transform: scale(1.06) rotate(-3deg);
}

/* v71 mobile: see consolidated block at end of file */


/* ════════════════════════════════════════════════════════════════════════════
   v71 Fix: Qualification page,
Calendar,
Mock exam alignment
   ════════════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: 資格一覧ページを暖色テーマに統一 ── */

/* Hero panel: dark navy → warm illustrated */


.qualification-hero-panel-v39::after,
.course-hero-v39::after{  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(147, 197, 253, 0.16);
  border-radius: 26px;
  pointer-events: none;
  border-color: rgba(184, 115, 51, 0.14);
}



:root[data-theme="dark"] .qualification-hero-panel-v39::after,
:root[data-theme="dark"] .course-hero-v39::after{
  border-color: rgba(92, 200, 168, 0.1);
}

/* Eyebrow badge */
.hero-eyebrow-v39,
.course-eyebrow-v39{  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.13);
  border: 1px solid rgba(147, 197, 253, 0.22);
  color: #bfdbfe;
  font-family: var(--font-sans);
  letter-spacing: 0.16em;
  background: rgba(184, 115, 51, 0.15);
  border-color: rgba(184, 115, 51, 0.25);
  color: #f0d0a0;
}

.v39-eyebrow-icon,
.course-eyebrow-v39 span{  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  background: rgba(96, 165, 250, 0.18);
  color: #dbeafe;
  letter-spacing: 0;
  background: rgba(184, 115, 51, 0.2);
  color: #f0d0a0;
}

:root[data-theme="dark"] .hero-eyebrow-v39,
:root[data-theme="dark"] .course-eyebrow-v39{
  background: rgba(240, 184, 120, 0.1);
  border-color: rgba(240, 184, 120, 0.2);
  color: #f0b878;
}

/* Title */
.qualification-hero-panel-v39 h1,
.course-hero-v39 h1{  color: #f8fbff;
  font-family: var(--font-sans);
  font-weight: 950;
  letter-spacing: -0.03em;
  text-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
  color: #faf2e6;
  font-family: var(--font-serif);
  letter-spacing: 0.04em;
  text-shadow: 0 12px 36px rgba(42, 24, 10, 0.3);
}

/* Description text */
.qualification-hero-panel-v39 p,
.course-hero-v39 p{  color: #d7e8ff;
  color: #e8d8c4;
}

/* Search bar: warm green button instead of blue */
.qualification-search-v39{  border-radius: 18px;
  border-color: rgba(147, 197, 253, 0.34);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 22px 60px rgba(2, 8, 23, 0.24);
  border-color: rgba(90, 171, 142, 0.35);
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 22px 60px rgba(42, 24, 10, 0.18);
}

.qualification-search-v39 input{  color: #10213d;
  color: #3a2815;
}

.qualification-search-v39 button,
.qualification-cta-v39,
.course-actions-v39 a{  background: linear-gradient(135deg, var(--course-blue), var(--course-blue-2));
  border: 1px solid color-mix(in srgb, var(--course-blue-2) 48%, transparent);
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.24);
  background: linear-gradient(135deg, #5aab8e, #47977a);
  border: 1px solid rgba(90, 171, 142, 0.4);
  color: #ffffff;
  box-shadow: 0 12px 32px rgba(74, 150, 120, 0.22);
}

.qualification-search-v39 button:hover,
.qualification-cta-v39:hover,
.course-actions-v39 a:hover{  background: linear-gradient(135deg, #1d4ed8, var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 24px 58px rgba(37, 99, 235, 0.32);
  background: linear-gradient(135deg, #47977a, #3d8a6c);
  box-shadow: 0 18px 44px rgba(74, 150, 120, 0.3);
}

:root[data-theme="dark"] .qualification-search-v39 button,
:root[data-theme="dark"] .qualification-cta-v39,
:root[data-theme="dark"] .course-actions-v39 a{
  background: linear-gradient(135deg, #3d9178, #2d7a64);
  border-color: rgba(92, 200, 168, 0.35);
  box-shadow: 0 12px 32px rgba(61, 145, 120, 0.18);
}

:root[data-theme="dark"] .qualification-search-v39{  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(96, 165, 250, 0.26);
  background: rgba(26, 30, 42, 0.96);
  border-color: rgba(92, 200, 168, 0.25);
}

:root[data-theme="dark"] .qualification-search-v39 input{  color: var(--text);
  color: #e2e8f0;
}

/* Quick tags */
.quick-tags-v39 a,
.reset-link-v39{  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(147, 197, 253, 0.26);
  color: #dbeafe;
  background: rgba(255, 240, 220, 0.15);
  border-color: rgba(240, 208, 160, 0.3);
  color: #f0d0a0;
}

.quick-tags-v39 a:hover,
.reset-link-v39:hover{  background: rgba(96, 165, 250, 0.18);
  color: #ffffff;
  background: rgba(240, 208, 160, 0.2);
  color: #fff;
}

:root[data-theme="dark"] .quick-tags-v39 a{
  background: rgba(240, 184, 120, 0.08);
  border-color: rgba(240, 184, 120, 0.18);
  color: #f0b878;
}

/* Stats cards in hero */
.qualification-hero-stats-v39 div,
.course-hero-metrics-v39 div{  min-width: 0;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(147, 197, 253, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  background: rgba(255, 240, 220, 0.08);
  border-color: rgba(184, 115, 51, 0.18);
}

.qualification-hero-stats-v39 span,
.course-hero-metrics-v39 span{  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: rgba(96, 165, 250, 0.18);
  color: #dbeafe;
  font-weight: 950;
  background: rgba(184, 115, 51, 0.2);
  color: #f0d0a0;
}

:root[data-theme="dark"] .qualification-hero-stats-v39 div,
:root[data-theme="dark"] .course-hero-metrics-v39 div{
  background: rgba(92, 200, 168, 0.06);
  border-color: rgba(92, 200, 168, 0.14);
}

:root[data-theme="dark"] .qualification-hero-stats-v39 span,
:root[data-theme="dark"] .course-hero-metrics-v39 span{
  background: rgba(92, 200, 168, 0.14);
  color: #88dec8;
}

/* Page background: warm */
.qualification-page-v39,
.course-select-v39{  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--course-blue) 18%, transparent), transparent 30%),
    radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 28%),
    linear-gradient(180deg, var(--surface-soft) 0%, var(--paper) 54%, var(--surface-soft) 100%);
  background:
    radial-gradient(circle at 10% 0%, rgba(200, 170, 120, 0.1), transparent 30%),
    radial-gradient(circle at 86% 10%, rgba(130, 190, 160, 0.08), transparent 28%),
    linear-gradient(180deg, #faf7f2 0%, #fffdf9 54%, #faf7f2 100%);
}

:root[data-theme="dark"] .qualification-page-v39,
:root[data-theme="dark"] .course-select-v39{  background:
    radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.16), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(92, 200, 168, 0.12), transparent 28%),
    linear-gradient(180deg, #07111f 0%, #101827 56%, #07111f 100%);
  background:
    radial-gradient(circle at 10% 0%, rgba(92, 200, 168, 0.05), transparent 30%),
    radial-gradient(circle at 86% 10%, rgba(240, 180, 120, 0.03), transparent 28%),
    linear-gradient(180deg, var(--dark-page-start) 0%, var(--surface-soft) 54%, var(--dark-page-start) 100%);
}

/* Radial glow: warm instead of blue */


/* Qualification cards warm */
.qualification-card-v39{
  border-color: var(--line);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 10px 32px rgba(120, 90, 50, 0.06);
}

:root[data-theme="dark"] .qualification-card-v39{
  background: rgba(26, 30, 42, 0.92);
  border-color: rgba(80, 70, 55, 0.22);
}

.qualification-card-kicker-v39{
  color: #b87333;
}

.qualification-body-v39 h3{
  color: #3a2815;
}

:root[data-theme="dark"] .qualification-body-v39 h3{
  color: #e8d8c4;
}

.section-kicker{  color: var(--gold-deep);
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.24em;
  margin-bottom: 8px;
  color: #b87333;
}

.qualification-heading-v39 h2{
  color: #3a2815;
}

:root[data-theme="dark"] .qualification-heading-v39 h2{
  color: #e8d8c4;
}


/* ── FIX 2: カレンダー — 日付表示 + セルサイズ縮小 ── */

.learning-calendar-grid{  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 10px;
  gap: 3px;
  margin-bottom: 8px;
}

.cal-cell{  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 6%, #eceff1);
  display: inline-block;
  min-width: 12px;
  aspect-ratio: auto;
  width: 100%;
  min-width: 0;
  height: 14px;
  border-radius: 3px;
  position: relative;
  font-size: 0;
}

/* Date labels: show day number via CSS content from title attr */
.cal-cell[title]::after{
  content: attr(data-day);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.4);
  line-height: 1;
}

.cal-cell.cal-3[title]::after,
.cal-cell.cal-4[title]::after{
  color: rgba(255, 255, 255, 0.7);
}

:root[data-theme="dark"] .cal-cell[title]::after{
  color: rgba(255, 255, 255, 0.35);
}

:root[data-theme="dark"] .cal-cell.cal-3[title]::after,
:root[data-theme="dark"] .cal-cell.cal-4[title]::after{
  color: rgba(255, 255, 255, 0.7);
}

.cal-cell.cal-empty::after{
  content: none;
}

/* Legend cells keep their small fixed size */
.learning-calendar-legend .cal-cell{  width: 12px;
  height: 12px;
  aspect-ratio: auto;
  height: 12px;
  aspect-ratio: 1 / 1;
}

.learning-calendar-legend .cal-cell::after{
  content: none;
}

/* Calendar warm styling */
.learning-calendar{  background: var(--bg-card, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: left;
  background: var(--paper);
  border-color: rgba(180, 140, 90, 0.18);
  border-radius: 20px;
}

:root[data-theme="dark"] .learning-calendar{  background: var(--paper);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: var(--paper);
  border-color: rgba(80, 70, 55, 0.22);
}

/* Warm calendar cell colors */
.cal-cell.cal-0{ background: color-mix(in srgb, var(--accent) 6%, #eceff1); 
 background: rgba(90, 171, 142, 0.08); 
 background: rgba(228, 217, 204, 0.5); 
}
.cal-cell.cal-1{ background: color-mix(in srgb, var(--accent) 28%, #fff); 
 background: rgba(90, 171, 142, 0.3); 
 background: rgba(90, 171, 142, 0.25); 
}
.cal-cell.cal-2{ background: color-mix(in srgb, var(--accent) 50%, #fff); 
 background: rgba(90, 171, 142, 0.55); 
 background: rgba(90, 171, 142, 0.5); 
}
.cal-cell.cal-3{ background: color-mix(in srgb, var(--accent) 75%, #fff); 
 background: #5aab8e; 
 background: rgba(90, 171, 142, 0.75); 
}
.cal-cell.cal-4{ background: var(--accent); 
 background: #5aab8e; 
}

:root[data-theme="dark"] .cal-cell.cal-0{ background: color-mix(in srgb, var(--accent) 12%, var(--surface-soft)); 
 background: rgba(92, 200, 168, 0.08); 
}
:root[data-theme="dark"] .cal-cell.cal-1{ background: color-mix(in srgb, var(--accent) 35%, var(--surface-soft)); 
 background: rgba(92, 200, 168, 0.22); 
}
:root[data-theme="dark"] .cal-cell.cal-2{ background: color-mix(in srgb, var(--accent) 55%, var(--surface-soft)); 
 background: rgba(92, 200, 168, 0.42); 
}
:root[data-theme="dark"] .cal-cell.cal-3{ background: color-mix(in srgb, var(--accent) 78%, var(--surface-soft)); 
 background: rgba(92, 200, 168, 0.65); 
}
:root[data-theme="dark"] .cal-cell.cal-4{ background: var(--accent); 
 background: #5cc8a8; 
}

.cal-cell.cal-today{  outline: 2px solid var(--accent);
  outline-offset: 1px;
  outline: 2px solid #5aab8e;
  outline-offset: 1px;
}

:root[data-theme="dark"] .cal-cell.cal-today{
  outline-color: #5cc8a8;
}


/* ── FIX 3: 模擬試験 4カードを1列に ── */

.fe-exam-info-grid{  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  max-width: 920px;
  margin: 30px auto 28px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.exam-info > .fe-exam-info-card{  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 190px;
  padding: 26px 24px 28px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid color-mix(in srgb, var(--exam-blue-line) 80%, var(--line));
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(15, 35, 68, 0.06);
  min-height: 160px;
  padding: 20px 16px 22px;
  border-radius: 20px;
  background: rgba(255, 253, 248, 0.88);
  border-color: rgba(180, 140, 90, 0.18);
  box-shadow: 0 10px 28px rgba(120, 90, 50, 0.06);
}

.exam-info > .fe-exam-info-card::after{  content: "";
  width: 100%;
  height: 1px;
  margin: 4px 0 2px;
  background: linear-gradient(90deg, transparent, var(--exam-blue-line), transparent);
  order: 2;
  background: linear-gradient(90deg, transparent, rgba(180, 140, 90, 0.2), transparent);
}

.fe-exam-info-icon{  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--exam-blue-soft);
  border: 1px solid color-mix(in srgb, var(--exam-blue-line) 84%, transparent);
  color: var(--exam-blue);
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 900;
  box-shadow: inset 0 0 0 8px rgba(37, 99, 235, 0.04);
  width: 48px;
  height: 48px;
  font-size: 22px;
  background: rgba(90, 171, 142, 0.1);
  border-color: rgba(90, 171, 142, 0.2);
  color: #5aab8e;
  box-shadow: none;
}

.exam-info > .fe-exam-info-card > span:not(.fe-exam-info-icon){  color: #38516f;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  order: 1;
  color: #7a6b58;
  font-size: 13px;
}

.exam-info > .fe-exam-info-card > strong{  color: #0c2461;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: 0.04em;
  order: 3;
  color: #3a2815;
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 40px);
}

:root[data-theme="dark"] .exam-info > .fe-exam-info-card{
  background: rgba(26, 30, 42, 0.88);
  border-color: rgba(80, 70, 55, 0.22);
}

:root[data-theme="dark"] .fe-exam-info-icon{
  background: rgba(92, 200, 168, 0.12);
  border-color: rgba(92, 200, 168, 0.22);
  color: #5cc8a8;
}

:root[data-theme="dark"] .exam-info > .fe-exam-info-card > span:not(.fe-exam-info-icon){
  color: #94a3b8;
}

:root[data-theme="dark"] .exam-info > .fe-exam-info-card > strong{
  color: #e8d8c4;
}

/* Mock exam landing warm */
.fe-exam-landing{  position: relative;
  overflow: hidden;
  padding: clamp(42px, 6vw, 78px);
  background:
    radial-gradient(circle at 12% 20%, rgba(37, 99, 235, 0.10), transparent 24%),
    radial-gradient(circle at 88% 20%, rgba(37, 99, 235, 0.08), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  border: 1px solid color-mix(in srgb, var(--exam-blue-line) 72%, var(--line));
  border-radius: 28px;
  box-shadow: var(--exam-card-shadow);
  text-align: center;
  border-radius: 24px;
  background: rgba(255, 253, 248, 0.6);
  border-color: rgba(180, 140, 90, 0.14);
}

:root[data-theme="dark"] .fe-exam-landing{
  background: rgba(26, 30, 42, 0.5);
  border-color: rgba(80, 70, 55, 0.2);
}

.fe-exam-kicker span:first-child{  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid currentColor;
  border-radius: 9px;
  font-size: 13px;
  letter-spacing: 0;
  background: rgba(184, 115, 51, 0.12);
  color: #b87333;
}

.fe-exam-kicker span:last-child{
  color: #b87333;
}

:root[data-theme="dark"] .fe-exam-kicker span:first-child{
  background: rgba(240, 184, 120, 0.1);
  color: #f0b878;
}

:root[data-theme="dark"] .fe-exam-kicker span:last-child{
  color: #f0b878;
}

.fe-exam-landing h3{
  color: #3a2815;
  font-family: var(--font-serif);
}

:root[data-theme="dark"] .fe-exam-landing h3{
  color: #e8d8c4;
}

/* Mock exam start button: warm green */
.fe-exam-cta.submit-btn{  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: min(100%, 430px);
  min-height: 68px;
  margin: 6px auto 0;
  padding: 0 24px;
  border: 1px solid color-mix(in srgb, #93c5fd 72%, transparent);
  border-radius: 16px;
  background: linear-gradient(135deg, #2d9cff 0%, #2454e8 100%);
  color: #fff;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: 0 20px 50px rgba(37, 99, 235, 0.30);
  background: linear-gradient(135deg, #5aab8e, #47977a);
  box-shadow: 0 14px 36px rgba(74, 150, 120, 0.24);
  border-radius: 18px;
}

.fe-exam-cta.submit-btn:hover{  background: linear-gradient(135deg, #55b5ff 0%, #1d4ed8 100%);
  box-shadow: 0 26px 64px rgba(37, 99, 235, 0.38);
  background: linear-gradient(135deg, #47977a, #3d8a6c);
  box-shadow: 0 20px 48px rgba(74, 150, 120, 0.32);
}

/* Mock exam note */
.fe-exam-note{  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 920px;
  margin: 0 auto 30px;
  padding: 17px 22px;
  background: color-mix(in srgb, var(--exam-blue-soft) 72%, #fff);
  border: 1px solid var(--exam-blue-line);
  border-radius: 16px;
  color: #324b67;
  font-size: 15px;
  text-align: left;
  border-radius: 16px;
  background: rgba(250, 247, 242, 0.8);
  border-color: rgba(180, 140, 90, 0.18);
}

:root[data-theme="dark"] .fe-exam-note{
  background: rgba(26, 30, 42, 0.6);
  border-color: rgba(80, 70, 55, 0.2);
}

/* v71 mobile: mock exam responsive rules in consolidated block at end */


/* Calendar day-of-week header */
.learning-calendar-dow{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 3px;
}

.cal-dow{
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--muted);
  line-height: 1;
  padding: 2px 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   v71 Fix2: Remove overlay boxes,
soften browns,
enlarge flow cats
   ════════════════════════════════════════════════════════════════════════════ */

/* ── REMOVE pseudo-element overlay boxes ── */

/* Inner border frame on hero panels → gone */
.qualification-hero-panel-v39::after,
.course-hero-v39::after,
.boki-hero-box::before{
  content: none !important;
  display: none !important;
}

/* Floating circle decoration → gone */
.qualification-hero-v39::before,
.course-select-v39::before{  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -90px;
  top: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--course-blue-2) 16%, transparent), transparent 68%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(184, 115, 51, 0.08), transparent 68%);
  content: none !important;
  display: none !important;
}

/* ── SOFTER hero backgrounds (less dark brown) ── */

/* Qualification hero: warm but lighter */
.qualification-hero-panel-v39,
.course-hero-v39{  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 82% 16%, rgba(96, 165, 250, 0.22), transparent 34%),
    radial-gradient(circle at 12% 8%, rgba(92, 200, 168, 0.20), transparent 32%),
    linear-gradient(135deg, #07182f 0%, #0f2a57 52%, #123766 100%);
  border: 1px solid rgba(147, 197, 253, 0.24);
  box-shadow: 0 34px 90px rgba(15, 42, 87, 0.20);
  background:
    radial-gradient(circle at 82% 16%, rgba(90, 171, 142, 0.14), transparent 34%),
    radial-gradient(circle at 12% 8%, rgba(184, 115, 51, 0.10), transparent 32%),
    linear-gradient(135deg, #2c1e10 0%, #3a2815 52%, #4a3520 100%);
  border-color: rgba(184, 115, 51, 0.28);
  box-shadow: 0 34px 90px rgba(42, 24, 10, 0.22);
  background:
    radial-gradient(circle at 80% 20%, rgba(90, 171, 142, 0.18), transparent 40%),
    radial-gradient(circle at 15% 80%, rgba(184, 115, 51, 0.08), transparent 40%),
    linear-gradient(135deg, #3d3028 0%, #4a3f30 52%, #544838 100%);
  border-color: rgba(160, 130, 90, 0.3);
  box-shadow: 0 28px 72px rgba(60, 45, 25, 0.18);
}

/* Boki page uses same class through course-hero-v39,
already covered */

/* Dark theme hero: keep subtle dark */
:root[data-theme="dark"] .qualification-hero-panel-v39,
:root[data-theme="dark"] .course-hero-v39{  background:
    radial-gradient(circle at 82% 16%, rgba(92, 200, 168, 0.10), transparent 34%),
    radial-gradient(circle at 12% 8%, rgba(240, 180, 120, 0.06), transparent 32%),
    linear-gradient(135deg, var(--dark-page-start) 0%, var(--surface-soft) 52%, var(--paper) 100%);
  border-color: rgba(92, 200, 168, 0.2);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.3);
  background:
    radial-gradient(circle at 80% 20%, rgba(92, 200, 168, 0.08), transparent 40%),
    radial-gradient(circle at 15% 80%, rgba(240, 180, 120, 0.04), transparent 40%),
    linear-gradient(135deg, #13171f 0%, #181d28 52%, #1c2130 100%);
  border-color: rgba(92, 200, 168, 0.16);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.25);
}

/* ── FLOW cats: remove box-in-box,
show image directly,
bigger ── */

.flow-cat{  margin: 8px 0 4px;
  margin: 12px 0 8px;
  display: flex;
  justify-content: center;
}

.flow-cat img{  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.3s ease;
  width: 160px;
  height: 160px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border: none;
  object-fit: contain;
  opacity: 1;
}

.home-v70-flow-grid div:hover .flow-cat img{  transform: scale(1.12) rotate(3deg);
  transform: scale(1.06) rotate(2deg);
}

/* ── Course hero cat: also remove box frame,
show raw image ── */
.course-hero-cat img{  width: 120px;
  height: 120px;
  border-radius: 24px;
  object-fit: cover;
  border-radius: 0;
  background: none;
  box-shadow: none;
  object-fit: contain;
}

/* ── Home course card cats: remove border-radius boxing ── */
.home-v70-card-cat img{  width: 100px;
  height: 100px;
  border-radius: 20px;
  object-fit: cover;
  border-radius: 0;
  background: none;
  object-fit: contain;
}

/* ── Hero mascot: remove border-radius boxing ── */
.home-v70-mascot-hero img{  width: clamp(180px, 22vw, 280px);
  height: auto;
  border-radius: 28px;
  filter: drop-shadow(0 18px 40px rgba(49, 134, 111, 0.18));
  animation: catFloat 4s ease-in-out infinite;
  border-radius: 0;
  background: none;
  object-fit: contain;
}

/* ── CTA cat: remove border-radius boxing ── */
.home-v70-cta-cat img{  width: clamp(100px, 14vw, 140px);
  height: auto;
  border-radius: 22px;
  filter: drop-shadow(0 12px 28px rgba(49, 134, 111, 0.16));
  transition: transform 0.4s ease;
  border-radius: 0;
  background: none;
  object-fit: contain;
}

/* ── Footer cat: remove border-radius boxing ── */
.footer-cat img{  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity 0.3s ease, transform 0.3s ease;
  border-radius: 0;
  background: none;
  object-fit: contain;
}

/* ── Study companion cat: remove border-radius boxing ── */
.study-cat-companion img{  width: 80px;
  height: 80px;
  border-radius: 20px;
  object-fit: cover;
  filter: drop-shadow(0 8px 20px rgba(120, 90, 50, 0.12));
  cursor: pointer;
  transition: transform 0.3s ease;
  border-radius: 0;
  background: none;
  object-fit: contain;
}

/* ── Mobile: flow cats slightly smaller ── */
/* v71 mobile: consolidated at end of file */




.fe-course-main .fe-hero-box{
  background:
    radial-gradient(circle at 80% 20%, rgba(90, 171, 142, 0.18), transparent 40%),
    radial-gradient(circle at 15% 80%, rgba(184, 115, 51, 0.08), transparent 40%),
    linear-gradient(135deg, #3d3028 0%, #4a3f30 52%, #544838 100%) !important;
  border-color: rgba(160, 130, 90, 0.3) !important;
  box-shadow: 0 28px 72px rgba(60, 45, 25, 0.18) !important;
}

:root[data-theme="dark"] .fe-course-main .fe-hero-box{
  background:
    radial-gradient(circle at 80% 20%, rgba(92, 200, 168, 0.08), transparent 40%),
    radial-gradient(circle at 15% 80%, rgba(240, 180, 120, 0.04), transparent 40%),
    linear-gradient(135deg, #13171f 0%, #181d28 52%, #1c2130 100%) !important;
  border-color: rgba(92, 200, 168, 0.16) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.25) !important;
}

.fe-hero-box h1{
  color: #faf2e6 !important;
  font-family: var(--font-serif) !important;
  text-shadow: 0 12px 36px rgba(42, 24, 10, 0.3) !important;
}

.fe-hero-box p{
  color: #e8d8c4 !important;
}

.fe-hero-box .boki-label,
.fe-hero-box .course-eyebrow-v39{
  background: rgba(184, 115, 51, 0.15) !important;
  border-color: rgba(184, 115, 51, 0.25) !important;
  color: #f0d0a0 !important;
}

:root[data-theme="dark"] .fe-hero-box h1{
  color: #e8d8c4 !important;
}

:root[data-theme="dark"] .fe-hero-box p{
  color: #b0c0d0 !important;
}

.fe-hero-box .course-hero-metrics-v39 div{
  background: rgba(255, 240, 220, 0.08);
  border-color: rgba(184, 115, 51, 0.18);
}

.fe-hero-box .course-hero-metrics-v39 span{
  background: rgba(184, 115, 51, 0.2);
  color: #f0d0a0;
}

.fe-hero-box .course-hero-metrics-v39 strong{
  color: #fff;
}

.fe-hero-box .course-hero-metrics-v39 small{
  color: #d0c0a8;
}


/* ── 2. Mock exam landing: remove dot patterns ── */

.fe-exam-landing::before,
.fe-exam-landing::after{  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  opacity: 0.45;
  pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--exam-blue) 40%, transparent) 2px, transparent 2.5px);
  background-size: 18px 18px;
  content: none !important;
  display: none !important;
}

/* Also remove dashboard dot decorations */
.fe-dash-hero-v37::after{  content: "";
  position: absolute;
  right: -72px;
  top: -72px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--exam-blue-line) 70%, transparent);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--exam-blue) 42%, transparent) 2px, transparent 2.5px);
  background-size: 20px 20px;
  opacity: .34;
  pointer-events: none;
  content: none !important;
  display: none !important;
}



/* ════════════════════════════════════════════════════════════════════════════
   v71 CONSOLIDATED MOBILE — single source of truth for all responsive rules
   added by the v71 cat mascot system. Placed last to win cascade.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤980px): 2-col → 1-col hero,
keep mascot ── */
@media (max-width: 980.98px){
  .home-v70-hero-inner {
    grid-template-columns: 1fr;
  }
  .home-v70-hero-right {
    max-width: 100%;
    align-items: center;
  }
  .home-v70-mascot-hero img {
    width: clamp(140px, 28vw, 200px);
  }
  .mascot-speech {
    font-size: 12px;
    right: -10px;
    top: -4px;
  }
  .home-v70-path-card { max-width: 620px; 
    max-width: 100%;
}
  .home-v70-flow-grid {
    grid-template-columns: 1fr;
  }
  .home-v70-course-card,
  .home-v70-course-card.is-featured,
  .home-v70-course-card:nth-child(2) { grid-column: span 3;
}

  /* Mock exam: 4 → 2 cols */
  .fe-exam-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Mobile (≤700px): compact single-column ── */
@media (max-width: 700px){

  /* -- Hero section -- */
  .home-v70-hero { padding: 34px 14px 28px; 
    padding: 28px 14px 20px;
}
  .home-v70-hero::before { inset: 10px; border-radius: 22px; 
    inset: 8px;
    border-radius: 18px;
}
  .home-v70-hero h1 { font-size: clamp(36px, 13vw, 54px); 
    font-size: clamp(28px, 8vw, 42px);
}
  .home-v70-lead { font-size: 15px; line-height: 1.85; 
    font-size: 14px;
    line-height: 1.8;
}
  .home-v70-eyebrow {
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  /* -- Hero actions -- */
  .home-v70-actions { display: grid;
    gap: 10px;
}
  .home-v70-primary,
  .home-v70-secondary { width: 100%;
    min-height: 48px;
    font-size: 14px;
}

  /* -- Search bar -- */
  .home-v70-search { grid-template-columns: 1fr;
}
  .home-v70-search input,
  .home-v70-search button {
    min-height: 48px;
  }

  /* -- Quick tags -- */
  .home-v70-quick-tags {
    gap: 6px;
  }
  .home-v70-quick-tags a {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* -- Mascot in hero -- */
  .home-v70-mascot-hero img {
    width: 130px;
  }
  .mascot-speech {
    right: -4px;
    top: -2px;
    padding: 6px 10px;
    font-size: 11px;
  }

  /* -- Path card -- */
  .home-v70-path-card { padding: 18px; border-radius: 22px; 
    padding: 16px;
    border-radius: 18px;
}
  .home-v70-path-list li {
    padding: 10px;
    grid-template-columns: 36px 1fr;
    gap: 10px;
  }
  .home-v70-path-list li > span {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .home-v70-streak-preview { grid-template-columns: 1fr; 
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
  .home-v70-streak-preview div {
    padding: 12px;
  }
  .home-v70-streak-preview strong {
    font-size: 20px;
  }

  /* -- Section spacing -- */
  .home-v70-launcher,
  .home-v70-flow,
  .home-v70-seo { padding: 48px 14px; 
    padding: 36px 14px;
}
  .home-v70-section-title { text-align: left;
    margin-bottom: 20px;
}
  .home-v70-section-title h2 {
    font-size: clamp(22px, 5.5vw, 32px);
  }

  /* -- Course cards: 1-col -- */
  .home-v70-course-grid { grid-template-columns: 1fr;
}
  .home-v70-course-card,
  .home-v70-course-card.is-featured,
  .home-v70-course-card:nth-child(2) {    grid-column: auto;
    min-height: auto;
    padding: 20px;
    border-radius: 22px;
  
    grid-column: auto;
    min-height: auto;
    padding: 18px;
    border-radius: 18px;
}
  .home-v70-course-card h3 { font-size: 23px; 
    font-size: 20px;
}
  /* Card corner cats: hidden on mobile */
  .home-v70-card-cat {
    display: none;
  }

  /* -- Flow grid: 1-col -- */
  .home-v70-flow-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .home-v70-flow-grid div {
    padding: 18px;
    border-radius: 18px;
  }
  .flow-cat img {
    width: 120px;
    height: 120px;
  }

  /* -- CTA: vertical stack -- */
  .home-v70-cta-inner {
    flex-direction: column;
    gap: 14px;
  }
  .home-v70-cta-cat img {
    width: 90px;
  }
  .home-v70-final-cta { margin: 8px 14px 52px; border-radius: 24px; 
    margin: 8px 14px 44px;
    padding: 28px 18px;
    border-radius: 20px;
}
  .home-v70-final-cta h2 {
    font-size: clamp(20px, 5vw, 28px);
  }

  /* -- Study cat companion -- */
  .study-cat-companion {
    bottom: 12px;
    right: 12px;
  }
  .study-cat-companion img {
    width: 56px;
    height: 56px;
  }

    .course-hero-cat {
    top: 10px;
    right: 10px;
    opacity: 0.15;
  }
  .course-hero-cat img {
    width: 72px;
    height: 72px;
  }

  /* -- Mock exam: 2-col compact -- */
  .fe-exam-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .exam-info > .fe-exam-info-card {
    min-height: 120px;
    padding: 14px 10px 16px;
  }
  .fe-exam-info-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .exam-info > .fe-exam-info-card > strong {
    font-size: clamp(22px, 6vw, 30px);
  }
}

/* ── Very small (≤380px) ── */
@media (max-width: 380px){
  .home-v70-hero h1 {
    font-size: 24px;
  }
  .home-v70-mascot-hero img {
    width: 100px;
  }
  .mascot-speech {
    font-size: 10px;
    padding: 5px 8px;
  }
}



/* ===== v71 home/qualification card navigation fixes ===== */
.qualification-page-v39 .image-shade-v39{
  top: auto;
  height: 34%;
  background: linear-gradient(180deg, rgba(7, 24, 47, 0), rgba(7, 24, 47, 0.18));
  pointer-events: none;
}

.qualification-page-v39 .qualification-image-v39 img{
  position: relative;
  z-index: 0;
}

.qualification-page-v39 .category-pill-v39{
  z-index: 2;
}

.home-v70-course-grid{  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  align-items: stretch;
}

.home-v70-course-card,
.home-v70-course-card.is-featured,
.home-v70-course-card:nth-child(2){
  grid-column: span 2;
  min-height: 310px;
  height: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.home-v70-course-card:focus-visible{
  outline: 3px solid rgba(90, 171, 142, 0.45);
  outline-offset: 4px;
}

.home-v70-course-card:hover{
  transform: translateY(-6px);
  border-color: rgba(90, 171, 142, 0.32);
  box-shadow: 0 22px 52px rgba(120, 90, 50, 0.10);
}

.home-v70-course-summary-link{
  width: max-content;
  margin-top: auto;
  padding: 10px 14px;
  border: 1px solid rgba(90, 171, 142, 0.22);
  border-radius: 14px;
  background: rgba(90, 171, 142, 0.10);
  color: #3d8a6c;
  font-size: 13px;
  font-weight: 900;
}

:root[data-theme="dark"] .home-v70-course-summary-link{
  background: rgba(95, 199, 166, 0.14);
  border-color: rgba(95, 199, 166, 0.26);
  color: #9ce3c8;
}

@media (max-width: 900px) {
  .home-v70-course-card,
.home-v70-course-card.is-featured,
.home-v70-course-card:nth-child(2){
    grid-column: 1 / -1;
    min-height: 290px;
  }
}

/* v75: code_trace復習ガイド */
.trace-guide{
  margin: 8px 0 12px;
  color: var(--muted, #64748b);
  font-size: 0.9rem;
  line-height: 1.7;
}



/* v86: Boki mock exam blueprint preview */
.fe-mock-blueprint{
  display: grid;
  gap: 10px;
  margin: 18px 0;
}
.fe-mock-blueprint-row{
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) minmax(120px, .7fr) 2fr;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}
.fe-mock-blueprint-row strong{
  color: var(--text-strong);
}
.fe-mock-blueprint-row span{
  font-weight: 700;
  color: var(--accent);
}
.fe-mock-blueprint-row small{
  color: var(--muted);
  line-height: 1.6;
}
:root[data-theme="dark"] .fe-mock-blueprint-row{
  background: var(--paper);
  border-color: var(--dark-border);
}
@media (max-width: 760px) {
  .fe-mock-blueprint-row{
    grid-template-columns: 1fr;
  }
}
.qualification-cta-v39.is-disabled{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 800;
  cursor: not-allowed;
}
:root[data-theme="dark"] .qualification-cta-v39.is-disabled{
  background: var(--dark-surface-muted);
  border-color: var(--dark-border);
  color: var(--dark-muted);
}

/* v93 FP3 placeholder overview */
.seo-empty-card{
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.seo-actions .is-disabled{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.62;
  cursor: not-allowed;
  pointer-events: none;
}

/* v94 learning guide and tutorial pages */
.learning-guide-v94{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 72px;
}
.guide-hero-v94{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: clamp(28px, 5vw, 56px);
  background:
    radial-gradient(circle at top right, rgba(75, 184, 154, 0.22), transparent 34%),
    linear-gradient(135deg, var(--paper), var(--surface-soft));
  box-shadow: var(--shadow);
}
.guide-hero-fe-v94{
  background:
    radial-gradient(circle at top right, rgba(79, 124, 255, 0.20), transparent 34%),
    linear-gradient(135deg, var(--paper), var(--surface-soft));
}
.guide-hero-boki-v94{
  background:
    radial-gradient(circle at top right, rgba(240, 150, 91, 0.22), transparent 34%),
    linear-gradient(135deg, var(--paper), var(--surface-soft));
}
.guide-hero-help-v94{
  background:
    radial-gradient(circle at top right, rgba(250, 204, 21, 0.22), transparent 34%),
    linear-gradient(135deg, var(--paper), var(--surface-soft));
}
.guide-eyebrow-v94{
  letter-spacing: 0.2em;
  color: var(--gold-dark);
  font-weight: 900;
  font-size: 0.78rem;
  margin: 0 0 14px;
}
.guide-hero-v94 h1{
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--text-strong);
  margin: 0 0 18px;
  line-height: 1.15;
}
.guide-hero-v94 p{
  max-width: 780px;
  color: var(--muted);
  line-height: 1.9;
  margin: 0;
}
.guide-hero-actions-v94,
.course-hero-linkbar-v94{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.guide-hero-actions-v94 a,
.course-hero-linkbar-v94 a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(75, 184, 154, 0.34);
  background: rgba(75, 184, 154, 0.12);
  color: var(--gold-dark);
  font-weight: 900;
  text-decoration: none;
}
.guide-inline-actions-v94{
  margin-top: 16px;
}
.guide-section-v94{
  margin-top: 28px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.guide-section-head-v94 p:first-child{
  margin: 0 0 8px;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 900;
  font-size: 0.78rem;
}
.guide-section-head-v94 h2{
  margin: 0 0 12px;
  color: var(--text-strong);
  font-size: clamp(1.45rem, 3vw, 2.2rem);
}
.guide-section-head-v94 p:not(:first-child){
  color: var(--muted);
  line-height: 1.85;
  margin: 0;
}
.guide-stat-grid-v94,
.guide-reference-grid-v94,
.guide-warning-grid-v94{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.guide-reference-grid-v94,
.guide-warning-grid-v94{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.guide-stat-grid-v94 article,
.guide-reference-grid-v94 article,
.guide-warning-grid-v94 article,
.guide-step-list-v94 article{
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-soft);
  padding: 18px;
}
.guide-stat-grid-v94 span{
  color: var(--accent);
  font-weight: 900;
  font-size: 0.8rem;
}
.guide-stat-grid-v94 strong{
  display: block;
  margin: 8px 0;
  color: var(--text-strong);
  font-size: 1.45rem;
}
.guide-stat-grid-v94 p,
.guide-reference-grid-v94 p,
.guide-warning-grid-v94 p,
.guide-step-list-v94 p{
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}
.guide-step-list-v94{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.guide-step-list-v94 strong{
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  margin-bottom: 12px;
}
.guide-step-list-v94 h3,
.guide-warning-grid-v94 h3{
  color: var(--text-strong);
  margin: 0 0 10px;
}
.guide-code-panel-v94{
  display: grid;
  grid-template-columns: 1fr minmax(260px, 0.8fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 20px;
}
.guide-code-panel-v94 > div,
.guide-code-panel-v94 pre{
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-soft);
  padding: 20px;
}
.guide-code-panel-v94 h3{
  margin: 0 0 12px;
  color: var(--text-strong);
}
.guide-code-panel-v94 ol{
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
  line-height: 1.8;
}
.guide-code-panel-v94 code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-strong);
  line-height: 1.75;
}
.tutorial-shot-v94{
  margin: 22px 0 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface-soft);
}
.tutorial-shot-v94 img{
  display: block;
  width: 100%;
  height: auto;
}
.tutorial-shot-v94 figcaption{
  padding: 12px 16px;
  color: var(--muted);
  font-weight: 700;
}
.tutorial-mockup-v94{
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface-soft);
  padding: 18px;
}
.mock-browser-v94{
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.mock-browser-v94 span{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--line-strong);
}
.mock-hero-v94{
  border-radius: 20px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.mock-hero-v94 strong{
  display: block;
  color: var(--text-strong);
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.mock-hero-v94 p{
  margin: 0;
  color: var(--muted);
}
.mock-actions-v94{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.mock-actions-v94 b{
  border-radius: 999px;
  background: rgba(75, 184, 154, 0.13);
  color: var(--gold-dark);
  padding: 10px 14px;
}
.guide-shortcut-grid-v94{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.guide-shortcut-grid-v94 span{
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-soft);
  padding: 14px;
  color: var(--text-strong);
  font-weight: 800;
}
.guide-shortcut-grid-v94 kbd{
  display: inline-block;
  min-width: 28px;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 3px 7px;
  margin: 0 2px;
  background: var(--paper);
}
:root[data-theme="dark"] .guide-hero-v94,
:root[data-theme="dark"] .guide-section-v94,
:root[data-theme="dark"] .tutorial-shot-v94,
:root[data-theme="dark"] .tutorial-mockup-v94{
  background: var(--paper);
  border-color: var(--dark-border);
}
:root[data-theme="dark"] .guide-stat-grid-v94 article,
:root[data-theme="dark"] .guide-reference-grid-v94 article,
:root[data-theme="dark"] .guide-warning-grid-v94 article,
:root[data-theme="dark"] .guide-step-list-v94 article,
:root[data-theme="dark"] .guide-code-panel-v94 > div,
:root[data-theme="dark"] .guide-code-panel-v94 pre,
:root[data-theme="dark"] .mock-hero-v94,
:root[data-theme="dark"] .guide-shortcut-grid-v94 span{
  background: var(--dark-surface-muted);
  border-color: var(--dark-border);
}
@media (max-width: 860px) {
  .guide-stat-grid-v94,
.guide-reference-grid-v94,
.guide-warning-grid-v94,
.guide-step-list-v94,
.guide-code-panel-v94,
.guide-shortcut-grid-v94{
    grid-template-columns: 1fr;
  }
}


/* v95 guide CTA readability and home tutorial entry */
.home-v95-first-guide{
  width: min(1120px, calc(100% - 56px));
  margin: 28px auto 0;
  padding: clamp(22px, 4vw, 34px);
  border-radius: 28px;
  border: 1px solid rgba(75, 184, 154, 0.24);
  background:
    radial-gradient(circle at 10% 18%, rgba(75, 184, 154, 0.16), transparent 26%),
    linear-gradient(135deg, var(--paper), var(--surface-soft));
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
}
.home-v95-first-badge{
  display: inline-flex;
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(75, 184, 154, 0.14);
  color: var(--gold-dark);
  font-weight: 900;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
}
.home-v95-first-guide h2{
  margin: 0 0 10px;
  color: var(--text-strong);
  font-size: clamp(1.6rem, 3vw, 2.45rem);
  line-height: 1.25;
}
.home-v95-first-guide p{
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
}
.home-v95-first-guide-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(42, 129, 107, 0.24);
  white-space: nowrap;
}
.home-v95-first-guide-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(42, 129, 107, 0.30);
}
.course-hero-linkbar-v94 a{
  min-height: 48px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.74);
  color: #173f35;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}
.course-hero-linkbar-v94 a:first-child{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.course-hero-linkbar-v94 a:hover,
.guide-hero-actions-v94 a:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(42, 129, 107, 0.22);
}
.guide-hero-actions-v94 a{
  min-height: 48px;
  padding: 0 20px;
  background: var(--paper);
  border-color: rgba(75, 184, 154, 0.42);
  color: var(--gold-dark);
  box-shadow: var(--shadow-sm);
}
.seo-actions a[href*="/guides/"]{
  font-size: 1rem;
  min-height: 52px;
  padding-inline: 22px;
}
.guide-source-note-v95 .guide-reference-grid-v94{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (max-width: 760px) {
  .home-v95-first-guide{
    width: calc(100% - 28px);
    grid-template-columns: 1fr;
    margin-top: 18px;
  }
  .home-v95-first-guide-button{
    width: 100%;
  }
}

/* v96 adsense content hardening */
.article-page-v96{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 48px 0 80px;
}
.article-hero-v96{
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(28px, 5vw, 56px);
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,246,240,.9));
  box-shadow: var(--shadow-md);
}
.article-eyebrow-v96{
  color: var(--gold-dark);
  font-weight: 800;
  letter-spacing: .18em;
  font-size: .78rem;
  margin: 0 0 12px;
}
.article-hero-v96 h1{
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height: 1.16;
  color: var(--text);
}
.article-hero-v96 p{
  max-width: 820px;
  color: var(--muted);
  line-height: 2;
  margin: 22px 0 0;
}
.home-v96-article-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.article-card-v96,
.home-v96-article-grid a{
  display: block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  background: var(--paper);
  color: var(--text);
  box-shadow: var(--shadow-md);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.article-card-v96:hover,
.home-v96-article-grid a:hover{
  transform: translateY(-3px);
  border-color: rgba(75, 184, 154, .48);
  box-shadow: 0 18px 44px rgba(28, 40, 52, .14);
}
.article-card-v96 span,
.home-v96-article-grid span{
  display: inline-block;
  margin-bottom: 10px;
  color: var(--gold-dark);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
}
.article-card-v96 h2,
.home-v96-article-grid strong{
  display: block;
  margin: 0 0 10px;
  font-size: 1.15rem;
  line-height: 1.55;
}
.article-card-v96 p,
.home-v96-article-grid span:last-child{
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}
.article-detail-v96 article{
  max-width: 920px;
  margin: 0 auto;
}
.article-body-v96{
  margin-top: 28px;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.article-body-v96 h2{
  margin: 32px 0 12px;
  color: var(--text);
  font-size: 1.55rem;
}
.article-body-v96 h2:first-child{
  margin-top: 0;
}
.article-body-v96 p,
.article-body-v96 li{
  color: var(--muted);
  line-height: 2;
}
.article-body-v96 ol{
  padding-left: 1.4rem;
}
.article-note-v96{
  margin-top: 34px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(75, 184, 154, .1);
  border: 1px solid rgba(75, 184, 154, .22);
  color: var(--muted);
  font-size: .92rem;
}
.article-table-wrap-v96{
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.article-table-wrap-v96 table{
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.article-table-wrap-v96 th,
.article-table-wrap-v96 td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.article-table-wrap-v96 th{
  background: rgba(75, 184, 154, .1);
  color: var(--text);
}
.home-v96-article-hub{
  width: min(1120px, calc(100% - 40px));
  margin: 72px auto;
  padding: clamp(24px, 4vw, 42px);
  border-radius: 28px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.74);
  box-shadow: var(--shadow-md);
}
.home-v96-article-more{
  margin-top: 22px;
  text-align: center;
}
.home-v96-article-more a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}

/* ===== 更新履歴: ホームのセクション ===== */
.home-updates{
  width: min(100% - 32px, 1120px);
  margin: 0 auto 56px;
}
.home-updates__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.home-updates__item{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.home-updates__meta{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 96px;
}
.home-updates__date{
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.home-updates__tag{
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--accent);
}
.home-updates__title{
  display: block;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
}
.home-updates__text{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.home-updates__more{
  margin-top: 18px;
  text-align: center;
}
.home-updates__more a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
}
.home-updates__more a:hover{ text-decoration: underline; }

/* ===== 更新履歴: 専用ページ ===== */
.updates-page__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.updates-page__item{
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
}
.updates-page__item:last-child{ border-bottom: 0; }
.updates-page__meta{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 104px;
}
.updates-page__date{
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.updates-page__tag{
  align-self: flex-start;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--accent);
}
.updates-page__title{
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text);
}
.updates-page__text{
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.7;
}
@media (max-width: 640.1px){
  .home-updates__item,
  .updates-page__item{
    flex-direction: column;
    gap: 8px;
  }
  .home-updates__meta,
  .updates-page__meta{
    flex-direction: row;
    align-items: center;
    min-width: 0;
  }
}
[data-theme="dark"] .article-hero-v96,
[data-theme="dark"] .home-v96-article-hub{
  background: linear-gradient(135deg, var(--paper), var(--surface-soft));
}
@media (max-width: 640.1px) {
  .article-page-v96,
.home-v96-article-hub{
    width: min(100% - 24px, 1120px);
    padding-top: 28px;
  }
}
.contact-form-v96 form{
  display: grid;
  gap: 18px;
}
.contact-form-v96 label{
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 800;
}
.contact-form-v96 input,
.contact-form-v96 select,
.contact-form-v96 textarea{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--cream);
  color: var(--text);
  font: inherit;
  font-weight: 500;
}
.contact-form-v96 textarea{
  resize: vertical;
  min-height: 180px;
}

/* v97 article personality pass: cat commentary */
.article-hero-cat-v97{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 4vw, 42px);
  align-items: center;
}
.article-cat-hero-img-v97{
  width: clamp(96px, 16vw, 164px);
  height: auto;
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(75,184,154,.18);
  box-shadow: 0 18px 44px rgba(30, 40, 56, .12);
}
.cat-dialogue-v97{
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 24px 0;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.cat-dialogue-v97 img{
  width: 74px;
  height: 74px;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(255,255,255,.7);
}
.cat-dialogue-v97 p{
  margin: 0;
  line-height: 1.9;
  color: var(--text);
}
.cat-white-v97{
  background: linear-gradient(135deg, rgba(237, 253, 245, .88), rgba(255, 255, 255, .9));
  border-color: rgba(75, 184, 154, .28);
}
.cat-black-v97{
  background: linear-gradient(135deg, rgba(35, 43, 58, .94), rgba(70, 55, 42, .9));
  border-color: rgba(179, 123, 61, .38);
}
.cat-black-v97 p,
.cat-black-v97 strong{
  color: #fff8ea;
}
.cat-tip-grid-v97{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 22px 0 28px;
}
.cat-tip-grid-v97 article{
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
}
.cat-tip-grid-v97 strong{
  display: block;
  margin-bottom: 8px;
  color: var(--text);
}
.cat-tip-grid-v97 p{
  margin: 0;
  line-height: 1.8;
}
[data-theme="dark"] .cat-tip-grid-v97 article{
  background: var(--surface-soft);
}

/* v128 article inline figures (SVG diagrams that match the site theme) */
.article-figure-v128{
  margin: 26px 0 30px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
}
.article-figure-v128 svg{
  display: block;
  width: 100%;
  height: auto;
}
.article-figure-v128 figcaption{
  margin: 14px 2px 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--text);
  opacity: .82;
}
.article-figure-v128 .fig-ink{ fill: var(--text); }
.article-figure-v128 .fig-muted{ fill: var(--text); opacity: .62; }
.article-figure-v128 .fig-accent{ fill: var(--accent); }
.article-figure-v128 .fig-line{ stroke: var(--line); }
.article-figure-v128 .fig-accent-line{ stroke: var(--accent); }
.article-figure-v128 .fig-panel{ fill: rgba(75,184,154,.10); stroke: var(--line); }
.article-figure-v128 .fig-panel-accent{ fill: rgba(75,184,154,.18); stroke: var(--accent); }
.article-figure-v128 .fig-cell{ fill: var(--paper); stroke: var(--line); }
.article-figure-v128 .fig-cell-hl{ fill: rgba(75,184,154,.16); stroke: var(--accent); }
[data-theme="dark"] .article-figure-v128{
  background: var(--surface-soft);
}

/* v128 学習画面・分析タブの文脈アフィリエイト枠（ディスプレイ広告ではない） */
.study-affiliate-v128{
  margin: 28px 0 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
}
.study-affiliate-head-v128{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-weight: 800;
  color: var(--text);
}
.study-affiliate-pr-v128{
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(75,184,154,.16);
  color: var(--accent);
}
.study-affiliate-grid-v128{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.study-affiliate-card-v128{
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--text);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.study-affiliate-card-v128:hover{
  transform: translateY(-2px);
  border-color: var(--accent);
}
.study-affiliate-card-v128 strong{ color: var(--accent); }
.study-affiliate-card-v128 span{ font-size: .86rem; line-height: 1.7; opacity: .82; }
.study-affiliate-note-v128{
  margin: 12px 2px 0;
  font-size: .8rem;
  opacity: .7;
}
[data-theme="dark"] .study-affiliate-v128{ background: var(--surface-soft); }
[data-theme="dark"] .study-affiliate-card-v128{ background: rgba(255,255,255,.04); }
@media (max-width: 640.1px){
  .study-affiliate-v128{ padding: 14px; }
}
[data-theme="dark"] .article-figure-v128 .fig-cell{ fill: rgba(255,255,255,.04); }
[data-theme="dark"] .article-figure-v128 .fig-panel{ fill: rgba(92,200,168,.12); }
[data-theme="dark"] .article-figure-v128 .fig-panel-accent{ fill: rgba(92,200,168,.2); }
@media (max-width: 640.1px){
  .article-figure-v128{ padding: 14px; }
  .article-figure-v128 figcaption{ font-size: .85rem; }
}
[data-theme="dark"] .cat-white-v97{
  background: linear-gradient(135deg, rgba(32, 57, 49, .95), rgba(23, 33, 43, .95));
}
[data-theme="dark"] .cat-white-v97 p,
[data-theme="dark"] .cat-white-v97 strong{
  color: var(--text);
}
@media (max-width: 640.1px) {
  .article-hero-cat-v97{
    grid-template-columns: 1fr;
  }
  .article-cat-hero-img-v97{
    width: 112px;
    justify-self: start;
  }
  .cat-dialogue-v97{
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }
  .cat-dialogue-v97 img{
    width: 56px;
    height: 56px;
  }
}

/* ========================================
   v98 UI readiness polish: navigation,
mobile,
ads
   ======================================== */
.skip-link-v98{
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  transform: translateY(-140%);
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
  transition: transform 0.18s ease;
}
.skip-link-v98:focus{
  transform: translateY(0);
  outline: 3px solid color-mix(in srgb, var(--accent) 42%, #fff);
  outline-offset: 3px;
}
.main-content-anchor-v98{
  scroll-margin-top: 92px;
}
.main-content-anchor-v98:focus{
  outline: none;
}

body .site-header{
  backdrop-filter: blur(14px);
}
body .site-nav-desktop a,
body .site-contact-link,
body .site-menu-toggle,
body .theme-toggle{
  min-height: 42px;
}
body .site-nav-desktop a:hover,
body .site-nav-desktop a:focus-visible,
body .site-contact-link:focus-visible,
body .site-menu-toggle:focus-visible,
body .theme-toggle:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 3px;
}

body .home-v70-actions,
body .guide-hero-actions-v94,
body .course-hero-linkbar-v94,
body .seo-actions{
  align-items: stretch;
}
body .home-v70-actions a,
body .guide-hero-actions-v94 a,
body .course-hero-linkbar-v94 a,
body .seo-actions a,
body .seo-actions span{
  min-height: 48px;
  text-align: center;
}
body .guide-hero-actions-v94 a,
body .course-hero-linkbar-v94 a,
body .seo-actions a[href*="/guides/"]{
  border-width: 2px;
}

body .ad-slot-v41{
  min-height: 156px;
  display: grid;
  place-items: center;
  scroll-margin-top: 90px;
}
body .ad-slot-v41 strong{
  max-width: 760px;
  margin-inline: auto;
}
body .ad-slot-v41::after{
  content: "";
  display: block;
  position: absolute;
}

.study-ux-strip-v98{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 18px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
}
.study-ux-strip-v98 span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--text-strong);
  font-size: 0.85rem;
  font-weight: 900;
}
.study-ux-strip-v98 span::before{
  content: "✓";
  color: var(--accent);
}
.study-ux-strip-v98 a{
  margin-left: auto;
  color: var(--gold-dark);
  font-weight: 900;
  text-decoration: none;
}
.study-ux-strip-v98 a:hover,
.study-ux-strip-v98 a:focus-visible{
  text-decoration: underline;
}

.guide-quick-start-v98{
  margin-top: 24px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  background:
    radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 28%),
    var(--paper);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
.guide-quick-start-cat-v98{
  width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-soft));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}
.guide-quick-start-cat-v98 img{
  width: 92px;
  height: 92px;
  object-fit: contain;
}
.guide-eyebrow-v98{
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.guide-quick-start-v98 h2{
  margin: 0 0 14px;
  color: var(--text-strong);
  font-size: clamp(1.35rem, 2.8vw, 2rem);
}
.guide-quick-start-list-v98{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guide-quick-start-list-v98 li{
  padding: 14px;
  border-radius: 18px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}
.guide-quick-start-list-v98 strong{
  display: block;
  color: var(--text-strong);
  margin-bottom: 5px;
}
.guide-quick-start-list-v98 span{
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

body .tutorial-shot-v94{
  overflow: hidden;
}
body .tutorial-shot-v94 img{
  width: 100%;
  height: auto;
  display: block;
}
body .mock-actions-v94 b{
  min-height: 42px;
}

:root[data-theme="dark"] .skip-link-v98{
  background: var(--dark-button-bg);
  color: var(--dark-text-inverse);
}
:root[data-theme="dark"] .study-ux-strip-v98,
:root[data-theme="dark"] .guide-quick-start-v98{
  background: var(--paper);
  border-color: var(--dark-border);
}
:root[data-theme="dark"] .study-ux-strip-v98 span,
:root[data-theme="dark"] .guide-quick-start-list-v98 li,
:root[data-theme="dark"] .guide-quick-start-cat-v98{
  background: var(--dark-surface-muted);
  border-color: var(--dark-border);
}

@media (max-width: 980px) {
  body .site-nav-desktop{
    display: none;
  }
  body .site-contact-link{
    display: none;
  }
  body .home-v70-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  body .home-v70-actions a{
    width: 100%;
  }
  body .guide-quick-start-list-v98{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .main-content-anchor-v98{
    scroll-margin-top: 74px;
  }
  body .home-v70-hero,
body .home-v70-launcher,
body .home-v70-flow,
body .home-v96-article-hub,
body .seo-link-hub-v41,
body .learning-guide-v94,
body .article-page-v96{
    width: calc(100% - 24px);
  }
  body .home-v70-actions{
    grid-template-columns: 1fr;
  }
  body .home-v70-search{
    display: grid;
    grid-template-columns: 1fr;
  }
  body .home-v70-search button{
    width: 100%;
    min-height: 46px;
  }
  body .fe-tabs{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  body .fe-tab{
    min-height: 72px;
    padding: 14px 10px;
    transform: none !important;
  }
  body .fe-tab-desc,
body .fe-tab-badge{
    display: none;
  }
  body .fe-mode-bar{
    gap: 10px;
    padding: 12px;
  }
  body .fe-mode-option,
body .fe-mode-bar .category-filter,
body .fe-review-clear-btn{
    width: 100%;
  }
  .study-ux-strip-v98{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .study-ux-strip-v98 a{
    grid-column: 1 / -1;
    margin-left: 0;
    text-align: center;
    padding: 8px 10px;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--line);
  }
  body .ad-slot-v41{
    width: calc(100% - 24px);
    min-height: 132px;
    padding: 18px;
    text-align: center;
  }
  .guide-quick-start-v98{
    grid-template-columns: 1fr;
  }
  .guide-quick-start-cat-v98{
    width: 84px;
    height: 84px;
  }
  .guide-quick-start-cat-v98 img{
    width: 72px;
    height: 72px;
  }
  .guide-quick-start-list-v98{
    grid-template-columns: 1fr;
  }
  body .guide-hero-actions-v94,
body .course-hero-linkbar-v94,
body .seo-actions{
    display: grid;
    grid-template-columns: 1fr;
  }
  body .guide-hero-actions-v94 a,
body .course-hero-linkbar-v94 a,
body .seo-actions a,
body .seo-actions span{
    width: 100%;
  }
  body .study-cat-companion{
    right: 10px;
    bottom: 10px;
    opacity: 0.92;
  }
}

@media (max-width: 420px) {
  body .logo{
    font-size: 18px;
  }
  body .theme-toggle,
body .site-menu-toggle{
    min-width: 42px;
  }
  body .site-menu-label{
    display: none;
  }
  .study-ux-strip-v98{
    grid-template-columns: 1fr;
  }
}

/* v99 detailed tutorial page */
.howto{
  scroll-behavior: smooth;
}
.howto-hero{
  isolation: isolate;
}
.howto-anchor-nav{
  position: sticky;
  top: 72px;
  z-index: 5;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 18px 0 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}
.howto-anchor-nav a{
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 999px;
  padding: 9px 13px;
  color: var(--text-strong);
  background: var(--surface-soft);
  text-decoration: none;
  font-weight: 900;
  font-size: 0.88rem;
}
.howto-anchor-nav a:hover,
.howto-anchor-nav a:focus-visible{
  background: color-mix(in srgb, var(--accent) 13%, var(--paper));
  transform: translateY(-1px);
}
.howto .guide-section-v94{
  scroll-margin-top: 150px;
}
.howto-cat-note{
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(135deg, var(--surface-soft), var(--paper));
}
.howto-cat-note img{
  width: 72px;
  height: 72px;
  object-fit: contain;
}
.howto-cat-note p{
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-weight: 700;
}
.howto-cat-note strong{
  color: var(--text-strong);
}
.howto-cat-note.is-black{
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38%),
    var(--paper);
}
.howto-tab-map,
.howto-control-grid,
.howto-answer-grid,
.howto-mock-panels,
.howto-dashboard-flow,
.howto-mobile-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.howto-tab-map{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.howto-control-grid,
.howto-answer-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.howto-tab-map article,
.howto-control-grid article,
.howto-answer-grid article,
.howto-mock-panels article,
.howto-dashboard-flow article,
.howto-mobile-cards article{
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-soft);
  padding: 18px;
  min-width: 0;
}
.howto-tab-map span,
.howto-dashboard-flow span{
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 15%, var(--paper));
  color: var(--text-strong);
  font-weight: 900;
  margin-bottom: 10px;
}
.howto-tab-map h3,
.howto-answer-grid h3,
.howto-dashboard-flow h3,
.howto-control-grid strong,
.howto-mock-panels strong,
.howto-mobile-cards strong{
  display: block;
  color: var(--text-strong);
  margin: 0 0 9px;
  font-size: 1.05rem;
}
.howto-tab-map p,
.howto-control-grid p,
.howto-answer-grid p,
.howto-mock-panels p,
.howto-dashboard-flow p,
.howto-mobile-cards p{
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}
.howto-compare-table{
  display: grid;
  gap: 0;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: var(--paper);
}
.howto-compare-table > div{
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(180px, 1fr) minmax(220px, 1.4fr);
  border-bottom: 1px solid var(--line);
}
.howto-compare-table > div:last-child{
  border-bottom: 0;
}
.howto-compare-table strong,
.howto-compare-table span{
  padding: 13px 14px;
  border-right: 1px solid var(--line);
  color: var(--text-strong);
  line-height: 1.65;
}
.howto-compare-table span{
  color: var(--muted);
  font-weight: 700;
}
.howto-compare-table strong:last-child,
.howto-compare-table span:last-child{
  border-right: 0;
}
.howto-compare-table > div:first-child{
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-soft));
}
.howto-overview-mock .mock-actions-v94 b:last-child{
  background: color-mix(in srgb, var(--accent) 20%, var(--paper));
  color: var(--text-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--line));
}
:root[data-theme="dark"] .howto-anchor-nav,
:root[data-theme="dark"] .howto-cat-note,
:root[data-theme="dark"] .howto-tab-map article,
:root[data-theme="dark"] .howto-control-grid article,
:root[data-theme="dark"] .howto-answer-grid article,
:root[data-theme="dark"] .howto-mock-panels article,
:root[data-theme="dark"] .howto-dashboard-flow article,
:root[data-theme="dark"] .howto-mobile-cards article,
:root[data-theme="dark"] .howto-compare-table{
  background: var(--paper);
  border-color: var(--dark-border);
}
:root[data-theme="dark"] .howto-anchor-nav a,
:root[data-theme="dark"] .howto-compare-table > div:first-child{
  background: var(--dark-surface-muted);
  border-color: var(--dark-border);
}
@media (max-width: 980px) {
  .howto-tab-map,
.howto-control-grid,
.howto-answer-grid,
.howto-mock-panels,
.howto-dashboard-flow,
.howto-mobile-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .howto-compare-table{
    overflow-x: auto;
  }
  .howto-compare-table > div{
    min-width: 720px;
  }
}
@media (max-width: 720px) {
  .howto-anchor-nav{
    top: 62px;
    border-radius: 20px;
  }
  .howto .guide-section-v94{
    scroll-margin-top: 128px;
  }
  .howto-cat-note,
.howto-tab-map,
.howto-control-grid,
.howto-answer-grid,
.howto-mock-panels,
.howto-dashboard-flow,
.howto-mobile-cards{
    grid-template-columns: 1fr;
  }
  .howto-cat-note img{
    width: 64px;
    height: 64px;
  }
}


/* v100 official FE alignment,
glossary,
source links */
.official-source-links-v100{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 18px;
}
.official-source-links-v100 a,
.glossary-chip-list-v100 a,
.glossary-link-v100{
  color: #1f6f5b;
  background: rgba(75, 184, 154, 0.1);
  border: 1px solid rgba(75, 184, 154, 0.35);
  border-radius: 999px;
  padding: 6px 12px;
  text-decoration: none;
  font-weight: 700;
}
.glossary-link-v100{
  padding: 1px 6px;
  font-weight: 700;
  border-radius: 8px;
}
.official-source-links-v100 a:hover,
.glossary-chip-list-v100 a:hover,
.glossary-link-v100:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(31, 111, 91, 0.14);
}
.glossary-search-box-v100,
.glossary-term-card-v100{
  max-width: 1040px;
  margin: 26px auto;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(75, 184, 154, 0.18);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 40px rgba(44, 32, 20, 0.08);
}
.glossary-page-v100{
  padding-top: 28px;
}
.glossary-hero-v100{
  max-width: 1040px;
  margin: 0 auto 24px;
}
.glossary-term-card-v100 h2{
  color: #2c2118;
}
.glossary-card-grid-v100{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.glossary-card-v100{
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(75, 184, 154, 0.16);
  background: rgba(255, 255, 255, 0.88);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(44, 32, 20, 0.07);
}
.glossary-card-v100 strong{
  font-size: 1.15rem;
  color: #1f6f5b;
}
.glossary-card-v100 span,
.glossary-term-summary-v100,
.glossary-alias-v100{
  color: #5f6f82;
  line-height: 1.8;
}
.glossary-chip-list-v100{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
[data-theme="dark"] .glossary-search-box-v100,
[data-theme="dark"] .glossary-term-card-v100,
[data-theme="dark"] .glossary-card-v100{
  background: rgba(26, 30, 42, 0.86);
  border-color: rgba(132, 225, 188, 0.18);
}
[data-theme="dark"] .glossary-term-card-v100 h2{
  color: #f6efe6;
}
[data-theme="dark"] .official-source-links-v100 a,
[data-theme="dark"] .glossary-chip-list-v100 a,
[data-theme="dark"] .glossary-link-v100{
  color: #9de4c9;
  background: rgba(75, 184, 154, 0.12);
  border-color: rgba(132, 225, 188, 0.25);
}
@media (max-width: 820px) {
  .glossary-card-grid-v100{
    grid-template-columns: 1fr;
  }
  .official-source-links-v100 a{
    width: 100%;
    text-align: center;
  }
}

/* v101 syllabus glossary expansion */
.glossary-page-v101{
  gap: 24px;
}
.glossary-hero-v101 h1{
  letter-spacing: 0.02em;
}
.glossary-search-box-v101{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 20px;
  align-items: end;
}
.glossary-search-label-v101{
  display: grid;
  gap: 8px;
  font-weight: 700;
  color: var(--text-main);
}
.glossary-search-label-v101 input{
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 14px 16px;
  font-size: 1rem;
  background: var(--surface-main);
  color: var(--text-main);
  box-shadow: var(--shadow-soft);
}
.glossary-helper-v101{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
/* glossary各ページで使う白猫/黒猫メモのカード。glossary-helper-v101 配下で2カラム並びを想定。 */
.cat-comment{
  padding: 18px 20px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--surface-base);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 8px;
}
.cat-comment strong{
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--text-strong);
}
.cat-comment p{
  margin: 0;
  color: var(--text-muted);
  line-height: 1.75;
}
.cat-comment-white{
  background: var(--surface-base);
  border-color: var(--border-soft);
}
.cat-comment-black{
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38%),
    var(--surface-raised);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border-soft));
}
.cat-comment-black strong{
  color: var(--accent);
}
@media (max-width: 760px){
  .glossary-helper-v101{
    grid-template-columns: 1fr;
  }
}
.glossary-section-v101{
  background: var(--surface-main);
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow-soft);
}
.section-heading-row-v101{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 18px;
}
.section-heading-row-v101 h2{
  margin: 0;
}
.section-heading-row-v101 p{
  margin: 0;
  color: var(--text-muted);
}
.glossary-category-grid-v101{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.glossary-category-card-v101{
  display: grid;
  gap: 8px;
  min-height: 168px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(74, 124, 104, 0.22);
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(244,250,246,0.9));
  color: var(--text-main);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}
.glossary-category-card-v101:hover,
.glossary-card-v101:hover{
  transform: translateY(-2px);
  border-color: var(--accent-main);
}
.glossary-category-card-v101 strong{
  font-size: 1.15rem;
}
.glossary-category-card-v101 small{
  color: var(--text-muted);
  line-height: 1.6;
}
.glossary-category-system-v101{
  width: fit-content;
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(75,184,154,0.12);
  color: var(--accent-deep);
  font-size: 0.78rem;
  font-weight: 800;
}
.glossary-card-grid-v101{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.glossary-card-v101{
  position: relative;
}
.glossary-card-v101 em{
  color: var(--accent-deep);
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 700;
}
.glossary-initial-grid-v101{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.glossary-initial-grid-v101 a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(74,124,104,0.24);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.82);
  color: var(--accent-deep);
  text-decoration: none;
  font-weight: 800;
}
.glossary-initial-grid-v101 span{
  color: var(--text-muted);
  font-weight: 700;
}
.glossary-no-results-v101{
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 230, 180, 0.35);
  color: var(--text-main);
}
.glossary-term-table-wrap-v101{
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
}
.glossary-term-table-v101{
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.glossary-term-table-v101 th,
.glossary-term-table-v101 td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: top;
}
.glossary-term-table-v101 th{
  background: rgba(75,184,154,0.10);
  color: var(--text-main);
}
.glossary-term-table-v101 a{
  color: var(--accent-deep);
  font-weight: 800;
}
.glossary-term-card-v101{
  display: grid;
  gap: 20px;
}
.glossary-breadcrumb-v101{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.glossary-breadcrumb-v101 a{
  color: var(--accent-deep);
  font-weight: 800;
  text-decoration: none;
}
.glossary-term-summary-v101{
  font-size: 1.12rem;
  line-height: 1.85;
}
.glossary-term-section-v101,
.glossary-term-meta-grid-v101 > div{
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 20px;
  background: rgba(255,255,255,0.72);
}
.glossary-term-section-v101 h2,
.glossary-term-meta-grid-v101 h2{
  margin-top: 0;
}
.glossary-term-explanation-v101,
.glossary-term-section-v101 p,
.glossary-term-meta-grid-v101 p{
  line-height: 1.9;
}
.glossary-term-meta-grid-v101{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
[data-theme="dark"] .glossary-category-card-v101,
[data-theme="dark"] .glossary-term-section-v101,
[data-theme="dark"] .glossary-term-meta-grid-v101 > div,
[data-theme="dark"] .glossary-initial-grid-v101 a,
[data-theme="dark"] .glossary-search-label-v101 input{
  background: var(--dark-surface-raised);
  color: var(--dark-text-main);
  border-color: var(--dark-border-soft);
}
[data-theme="dark"] .glossary-category-card-v101 small,
[data-theme="dark"] .section-heading-row-v101 p,
[data-theme="dark"] .glossary-initial-grid-v101 span{
  color: var(--dark-text-muted);
}
@media (max-width: 900px) {
  .glossary-search-box-v101,
.glossary-helper-v101,
.glossary-term-meta-grid-v101{
    grid-template-columns: 1fr;
  }
  .glossary-category-grid-v101,
.glossary-card-grid-v101{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .glossary-category-grid-v101,
.glossary-card-grid-v101{
    grid-template-columns: 1fr;
  }
  .glossary-section-v101,
.glossary-search-box-v101{
    padding: 18px;
  }
  .section-heading-row-v101{
    display: grid;
  }
}

/* v102 glossary polish */
.glossary-search-form-v102{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.glossary-search-form-v102 .primary-btn{
  min-height: 50px;
  white-space: nowrap;
}
.glossary-results-section-v102{
  border-color: rgba(75, 184, 154, 0.26);
}
.glossary-result-grid-v102 .glossary-card-v101{
  min-height: 190px;
}
.glossary-card-v101 strong,
.glossary-term-card-v101 h1,
.glossary-term-table-v101 a{
  overflow-wrap: anywhere;
  word-break: auto-phrase;
}
.glossary-initial-grid-v101 a.is-active{
  background: var(--accent-main);
  color: #fff;
  border-color: var(--accent-main);
  box-shadow: 0 10px 22px rgba(31, 111, 91, 0.18);
}
.glossary-initial-grid-v101 a.is-active span{
  color: rgba(255,255,255,0.86);
}
.glossary-term-table-v101 td:nth-child(1){
  min-width: 180px;
}
.glossary-term-table-v101 td:nth-child(3){
  min-width: 360px;
}
[data-theme="dark"] .glossary-initial-grid-v101 a.is-active{
  background: var(--accent-main);
  color: #102019;
}
@media (max-width: 620px) {
  .glossary-search-form-v102{
    grid-template-columns: 1fr;
  }
  .glossary-search-form-v102 .primary-btn{
    width: 100%;
  }
  .glossary-result-grid-v102 .glossary-card-v101{
    min-height: unset;
  }
  .glossary-term-summary-v101{
    font-size: 1rem;
  }
}

/* v103 content hub,
article index,
and glossary landing polish */
.article-index-v103,
.glossary-hub-v103{
  display: grid;
  gap: 28px;
}
.article-index-tools-v103{
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.article-search-form-v103{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.article-search-form-v103 label{
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 800;
}
.article-search-form-v103 input{
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 16px;
  background: var(--cream);
  color: var(--text);
  font: inherit;
}
.article-search-form-v103 button{
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  padding: 0 24px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.article-category-tabs-v103{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.article-category-tabs-v103 a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--accent-deep, var(--accent));
  background: rgba(255,255,255,.72);
  text-decoration: none;
  font-weight: 800;
}
.article-category-tabs-v103 a.is-active{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.article-featured-v103,
.article-list-section-v103,
.glossary-hub-grid-v103{
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-md);
}
.article-featured-grid-v103,
.glossary-hub-grid-v103{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.article-featured-card-v103,
.glossary-hub-card-v103{
  display: grid;
  gap: 10px;
  min-height: 220px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(75,184,154,.24);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(246,251,248,.92));
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.article-featured-card-v103:hover,
.glossary-hub-card-v103:hover{
  transform: translateY(-2px);
  border-color: var(--accent);
}
.article-featured-card-v103 span,
.glossary-hub-card-v103 span{
  width: fit-content;
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(75,184,154,.12);
  color: var(--accent-deep, var(--accent));
  font-weight: 900;
  font-size: .78rem;
}
.article-featured-card-v103 h3,
.glossary-hub-card-v103 h2{
  margin: 0;
  line-height: 1.45;
}
.article-featured-card-v103 p,
.glossary-hub-card-v103 p{
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}
.article-list-v103{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.article-card-v103{
  min-height: 230px;
}
.article-card-meta-v103{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.article-card-meta-v103 span{
  margin-bottom: 0;
}
.article-card-meta-v103 em{
  color: var(--muted);
  font-style: normal;
  font-size: .84rem;
  font-weight: 800;
}
.article-tag-row-v103{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.article-tag-row-v103 small{
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(179,123,61,.1);
  color: var(--gold-dark);
  font-weight: 800;
}
.article-empty-v103{
  padding: 24px;
  border-radius: 18px;
  background: rgba(255,230,180,.28);
  color: var(--text);
}
.glossary-hub-card-v103.is-primary{
  border-color: rgba(75,184,154,.42);
  background: linear-gradient(135deg, rgba(235,255,246,.98), rgba(255,255,255,.92));
}
.glossary-hub-note-v103{
  font-size: 1rem;
}
[data-theme="dark"] .article-index-tools-v103,
[data-theme="dark"] .article-featured-v103,
[data-theme="dark"] .article-list-section-v103,
[data-theme="dark"] .glossary-hub-grid-v103,
[data-theme="dark"] .article-featured-card-v103,
[data-theme="dark"] .glossary-hub-card-v103,
[data-theme="dark"] .article-category-tabs-v103 a,
[data-theme="dark"] .article-search-form-v103 input{
  background: var(--dark-surface-raised);
  color: var(--dark-text-main);
  border-color: var(--dark-border-soft);
}
[data-theme="dark"] .article-featured-card-v103 p,
[data-theme="dark"] .glossary-hub-card-v103 p,
[data-theme="dark"] .article-card-meta-v103 em{
  color: var(--dark-text-muted);
}
@media (max-width: 760px) {
  .article-search-form-v103,
.article-featured-grid-v103,
.glossary-hub-grid-v103,
.article-list-v103{
    grid-template-columns: 1fr;
  }
  .article-search-form-v103 button{
    width: 100%;
  }
  .article-featured-card-v103,
.glossary-hub-card-v103,
.article-card-v103{
    min-height: unset;
  }
  .article-card-meta-v103{
    display: grid;
    justify-content: start;
  }
}

/* === 用語集ハブ：説明拡充中の注記 === */
.glossary-hub-status-note{
  margin-top: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 80%, var(--paper));
  border-left: 3px solid color-mix(in srgb, var(--accent, #2563eb) 60%, var(--line));
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

:root[data-theme="dark"] .glossary-hub-status-note{
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

/* === 資格概要 NEXT STEPS：次に見るページ === */
.seo-next-steps-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.seo-next-step-card{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  min-height: 44px;
}

.seo-next-step-card span[aria-hidden]{
  font-size: 22px;
  line-height: 1;
}

.seo-next-step-card strong{
  font-size: 15px;
  color: var(--text-strong);
}

.seo-next-step-card small{
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}

.seo-next-step-card:hover,
.seo-next-step-card:focus-visible{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent, #2563eb) 50%, var(--line));
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.08);
}

:root[data-theme="dark"] .seo-next-step-card{
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

@media (max-width: 620px) {
  .seo-next-steps-grid{
    grid-template-columns: 1fr;
  }
}

/* === 記事末尾「次にやること」リスト === */
.article-next-actions{
  margin: 12px 0 20px;
  padding: 16px 22px;
  list-style: none;
  background: color-mix(in srgb, var(--surface) 75%, var(--paper));
  border: 1px solid var(--line);
  border-radius: 14px;
}

.article-next-actions li{
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
}

.article-next-actions li:last-child{
  border-bottom: none;
  padding-bottom: 4px;
}

.article-next-actions li:first-child{
  padding-top: 4px;
}

.article-next-actions a{
  color: var(--text-strong);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.7;
  padding: 6px 0;
  display: inline-block;
  min-height: 32px;
}

.article-next-actions a::before{
  content: "→ ";
  color: color-mix(in srgb, var(--accent, #2563eb) 75%, var(--muted));
  font-weight: 700;
  margin-right: 4px;
}

.article-next-actions a:hover,
.article-next-actions a:focus-visible{
  color: var(--accent, #2563eb);
  text-decoration: underline;
}

:root[data-theme="dark"] .article-next-actions{
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

/* === v103.1 タップターゲット最小サイズ補強 ===
   AdSense審査・モバイルUXの観点から、主要なリンク/ボタン要素に 44px+ を保証する。 */
.seo-question-row,
.seo-category-card,
.seo-summary-card,
.seo-question-list a,
.home-v70-course-card,
.article-card-v96,
.glossary-card-v100,
.glossary-card-v101,
.glossary-hub-card-v103,
.start-btn,
.secondary-btn,
.home-v96-article-grid a,
.seo-link-grid-v41 a,
.home-v70-quick-tags a{
  min-height: 44px;
}


/* v106 safety and operations page */
.safety-page-v106 .safety-hero-v106{
  background: linear-gradient(135deg, rgba(67, 166, 138, 0.18), rgba(255, 244, 214, 0.82));
}
.cat-dialogue-v106{
  display: grid;
  gap: 14px;
}
.cat-line-v106{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--surface-base);
}
.cat-line-v106 img{
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.cat-line-v106 p{
  margin: 0;
}
.cat-line-black-v106{
  background: var(--surface-raised);
}
.safety-check-grid-v106{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.safety-check-grid-v106 article{
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--surface-base);
}
.safety-check-grid-v106 h3{
  margin: 0 0 8px;
  font-size: 1rem;
}
.safety-check-grid-v106 p{
  margin: 0;
  color: var(--text-muted);
}
@media (max-width: 760px) {
  .safety-check-grid-v106{
    grid-template-columns: 1fr;
  }
  .cat-line-v106{
    grid-template-columns: 48px 1fr;
  }
  .cat-line-v106 img{
    width: 48px;
    height: 48px;
  }
}


/* v117: FP3 course overview uses neutral class names instead of old course-specific selectors. */
.fp3-overview{
  margin-top: 28px;
}
.fp3-area-grid-v117{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.fp3-area-card-v117{
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
}
.fp3-area-icon{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--surface-warm);
  margin-bottom: 12px;
  font-size: 22px;
}
.fp3-area-card-v117 h3{
  margin: 0 0 8px;
}
.fp3-area-card-v117 p{
  margin: 0;
  color: var(--text-muted);
}

/* v120: 用語集ハブ内ジャンプリンク、用語詳細ページのCTA改善、FP3トップの公式情報セクション間隔 */
.glossary-hub-jump-v120{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.glossary-hub-jump-v120 a{
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(75,184,154,.42);
  background: rgba(235,255,246,.7);
  color: var(--text);
  text-decoration: none;
  font-size: .92rem;
  line-height: 1.4;
  transition: background .15s ease, transform .12s ease;
}
.glossary-hub-jump-v120 a:hover,
.glossary-hub-jump-v120 a:focus-visible{
  background: rgba(75,184,154,.18);
  transform: translateY(-1px);
}
[data-theme="dark"] .glossary-hub-jump-v120 a{
  background: var(--dark-surface-raised);
  color: var(--dark-text-main);
  border-color: var(--dark-border-soft);
}
.section-heading-row-v101 a{
  font-weight: 600;
  white-space: nowrap;
}

/* 用語詳細ページ末尾の "学習に戻る" CTA群 */
.glossary-term-back-actions-v120{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed var(--border-soft, rgba(0,0,0,.08));
}
.glossary-term-back-actions-v120 a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--border-soft, rgba(0,0,0,.1));
  background: var(--surface, #fff);
  color: var(--text);
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.3;
  transition: background .15s ease, transform .12s ease;
}
.glossary-term-back-actions-v120 a:hover,
.glossary-term-back-actions-v120 a:focus-visible{
  background: rgba(75,184,154,.12);
  transform: translateY(-1px);
}
.glossary-term-back-actions-v120 a.is-primary{
  background: rgba(75,184,154,.18);
  border-color: rgba(75,184,154,.42);
  font-weight: 600;
}
[data-theme="dark"] .glossary-term-back-actions-v120 a{
  background: var(--dark-surface-raised);
  color: var(--dark-text-main);
  border-color: var(--dark-border-soft);
}

/* FP3トップの公式情報セクション、上下に空気を入れる */
.fp3-official-sources-v119{
  margin-top: 28px;
}
.fp3-official-sources-v119 .official-source-links-v100{
  margin-top: 18px;
}

/* === Guide pages cat dialogue ===
   guide_fe / guide_boki3 / guide_fp3 で使う、画像 + セリフを並べる小カード。
   既存の .cat-comment と組み合わせて使う想定（クラスは併記）。
   命名は新方針に従い BEM ライク・kebab-case。-vN なし。 */
.guide-cat-note{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: center;
  margin: 18px 0;
}
.guide-cat-note__avatar{
  width: 72px;
  height: 72px;
  display: block;
}
.guide-cat-note__body{
  display: grid;
  gap: 6px;
}
.guide-cat-note__body strong{
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--text-strong);
}
.guide-cat-note__body p{
  margin: 0;
  color: var(--text-muted);
  line-height: 1.75;
}
.guide-cat-note--black .guide-cat-note__body strong{
  color: var(--accent, #4bb89a);
}
@media (max-width: 420px){
  .guide-cat-note{
    grid-template-columns: 56px 1fr;
    gap: 10px;
  }
  .guide-cat-note__avatar{
    width: 56px;
    height: 56px;
  }
}