@charset "UTF-8";

@import url("/css/effboki-common.css");

/* =========================================
   effboki Design System (v4.1 Final)
   コンセプト：機能的ミニマリズムと「空間」と「付箋」の使い分け
   ========================================= */

:root {
  /* --- 🎨 Base Colors (目に優しいスレート基調へ変更) --- */
  --bg-body: #F8FAFC;       /* 背景：真っ白ではなく、ごく薄い青グレー（目の保護） */
  --bg-card: #FFFFFF;       /* コンテンツ背景：白 */
  --text-main: #0F172A;     /* 見出し：ほぼ黒に近い紺色（高級感・可読性） */
  --text-body: #334155;     /* 本文：読みやすいスレートグレー */
  --text-sub: #64748B;      /* 補足：薄すぎないグレー */
  --border: #E2E8F0;        /* 境界線：主張しないグレー */

  /* --- 🟦 Primary (構造・メイン) --- */
  --primary: #2563EB;       /* 知的なブルー */
  --primary-light: #EFF6FF; /* 背景用 */
  --primary-border: #BFDBFE;
  --unit-border: #C7D2E1;   /* Unit card border (muted blue) */
  --unit-border-open: #8FA3BD; /* Unit card open border (muted blue) */

  /* --- 🟩 Definition/Success (定義・正解) --- */
  --def-text: #059669;      /* 落ち着いたグリーン */
  --def-bg: #F2FEF8;
  --def-border: #C8F5E1;

  /* --- 🟥 Alert/Danger (警告・重要) --- */
  --note-warn: #DC2626;     /* 警告の赤 */
  --warn-bg: #FEF2F2;
  --warn-border: #FECACA;

  /* --- 🟧 Hint/Story (ヒント・物語) --- */
  --note-hint: #D97706;     /* 視認性の高いアンバー */
  --hint-bg: #FFFBEB;
  --hint-border: #FDE68A;

  /* --- 🟪 Concept/Mind (概念・思考) --- */
  --mind-text: #4F46E5;     /* インディゴ */
  --mind-bg: #EEF2FF;
  --mind-border: #C7D2FE;

  /* --- Badge Colors --- */
  --badge-high: #BE123C;    /* 頻出・重要 */
  --badge-calc: #047857;    /* 計算注意 */

  /* --- Card Palette (Muted) --- */
  --card-primary: #3E74F2;
  --card-primary-bg: #EFF4FF;
  --card-primary-border: #D8E4FF;
  --card-primary-line: #07123E;
  --card-primary-dash: #2E55C9;
  --card-primary-dash-light: #6D89E4;
  --card-green: #2FAF84;
  --card-green-bg: #EAFBF3;
  --card-green-border: #CDEFE2;
  --card-green-line: #041F18;
  --card-green-dash: #2D8E6C;
  --card-green-dash-light: #66B596;
  --card-orange: #F28A2B;
  --card-orange-bg: #FFEFDD;
  --card-orange-border: #FFD6B3;
  --card-orange-line: #411700;
  --card-orange-dash: #B76A2E;
  --card-orange-dash-light: #D79B63;
  --card-red: #F26666;
  --card-red-bg: #FFEDED;
  --card-red-border: #FFD0D0;
  --card-red-line: #4B1212;
  --card-red-dash: #B94949;
  --card-red-dash-light: #D57777;
  --card-gray: #7F8BA3;
  --card-gray-bg: #F2F4F9;
  --card-gray-border: #DDE4F1;
  --card-gray-line: #6B768D;
  --card-gray-dash: #768CB0;
  --card-gray-dash-light: #93A5C3;
  --card-yellow: #EAB000;
  --card-yellow-bg: #FFF2D5;
  --card-yellow-border: #FFE0A8;
  --card-yellow-line: #352300;
  --card-yellow-dash: #B07B1D;
  --card-outline: #111827;
  --card-yellow-dash-light: #D3A455;

  /* --- Layout --- */
  --sidebar-width: 280px;
  --right-sidebar-width: 280px;
  --book-column-gap: clamp(10px, 1.2vw, 16px);

  /* --- Sidebar Typography Hierarchy --- */
  --sidebar-caption0-font-size: 1rem;
  --sidebar-category-font-size: 0.96rem;
  --sidebar-chapter-font-size: 0.9rem;
  --sidebar-unit-font-size: 0.86rem;
  --sidebar-submenu-font-size: 0.78rem;

  /* --- Header Specific --- */
  --header-bg: #42536D;     /* さらに明るめのスレート */
  --header-text: #F8FAFC;
  --header-border: #566880;
}

/* Shared password visibility control */
.password-visibility-control,
.password-visibility-field {
  position: relative;
  display: block;
  width: 100%;
}

.password-visibility-control > input,
.password-visibility-field input {
  padding-right: 54px !important;
}

.password-visibility-toggle {
  position: absolute;
  right: 7px;
  z-index: 2;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #5b6f88;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.password-visibility-control > .password-visibility-toggle {
  top: 50%;
  transform: translateY(-50%);
}

.password-visibility-field > .password-visibility-toggle {
  bottom: 4px;
}

.password-visibility-toggle:hover {
  background: #edf5ff;
  color: #1d5fbd;
}

.password-visibility-toggle:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 1px;
}

.password-visibility-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-visibility-toggle[aria-pressed="false"] .is-hide,
.password-visibility-toggle[aria-pressed="true"] .is-show {
  display: none;
}

/* Base Settings */
* { box-sizing: border-box; }

html {
  font-size: 15px;
}

body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  font-weight: 600;

  /* ★重要：数字を等幅にする（簿記の桁揃えのため） */
  font-feature-settings: "palt" 1, "tnum" 1;
  font-variant-numeric: tabular-nums;

  background-color: var(--bg-body);
  color: var(--text-body);
  display: flex; height: 100vh; overflow: hidden;
  font-size: 14px;
  line-height: 1.75; /* 読みやすさのため少し広めに */
  -webkit-font-smoothing: antialiased;
}

/* テキスト選択時の色をブランドカラーに合わせる */
::selection {
  background: rgba(37, 99, 235, 0.15);
  color: inherit;
}

html.book-view {
  font-size: 14px;
}

summary { outline: none; list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }


/* =========================================
   ① 左サイドバー (Navigation)
   ========================================= */
nav.left-nav {
  width: var(--sidebar-width);
  background: #0F172A; /* より深い色で画面を引き締める */
  color: #E2E8F0;
  display: flex; flex-direction: column; flex-shrink: 0; z-index: 20;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-right: 1px solid #000;
  white-space: nowrap;
  overflow: hidden;
}

body.book-view nav.left-nav {
  width: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}

body.book-view nav.left-nav .brand-area,
body.book-view nav.left-nav .nav-scroll {
  display: none;
  min-width: 0;
}

.brand-area {
  padding: 16px; font-size: 1.1rem; font-weight: 800; color: #fff;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: #020617;
  min-width: var(--sidebar-width);
}
.brand-icon {
  width: 24px; height: 24px; min-width: 24px;
  background: linear-gradient(135deg, var(--primary), #60A5FA);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: bold; color: #fff;
}

.nav-scroll {
  overflow-y: auto; padding: 14px; flex: 1;
  min-width: var(--sidebar-width);
}

/* チャプター開閉用 */
.chapter-group { margin: 14px 0; }
.chapter-label {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 0 0 5px;
  padding: 7px 8px;
  color: #C6DCF8;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  line-height: 1.25;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.chapter-label:hover,
.chapter-label:focus-visible {
  color: #F5FAFF;
  background: rgba(78, 134, 222, 0.1);
  outline: none;
}
.chapter-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #A9D3FF;
  background: rgba(24, 61, 116, 0.36);
  border: 1px solid rgba(127, 180, 244, 0.22);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.chapter-label-copy { display: flex; align-items: center; gap: 7px; min-width: 0; }
.chapter-title {
  color: inherit;
  font-size: var(--sidebar-chapter-font-size);
  font-weight: 900;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.chapter-group.open > .chapter-label { color: #F2F8FF; }
.chapter-group.is-caption-group > .chapter-label {
  min-height: 48px;
  padding: 8px;
  background: transparent;
  border-top: 1px solid rgba(135, 190, 255, 0.35);
  border-bottom: 1px solid rgba(135, 190, 255, 0.22);
  border-radius: 0;
  box-shadow: none;
}
.chapter-group.is-caption-group > .chapter-label .chapter-index {
  color: #FFFFFF;
  background: #2F72CF;
  border-color: rgba(209, 234, 255, 0.44);
}
.chapter-group.is-caption-group > .chapter-label .chapter-title { font-size: 1.08rem; }

.chapter-group.open > .chapter-items {
  margin-left: 15px;
  padding-left: 8px;
  border-left: 1px solid rgba(109, 154, 211, 0.42);
}

.chapter-arrow {
  transition: transform 0.3s ease;
  font-size: 0.8em;
  color: currentColor;
  opacity: 0.95;
}
.chapter-group.closed .chapter-arrow { transform: rotate(-90deg); }
.chapter-group.closed .chapter-items { display: none; }

.nav-item {
  display: flex; align-items: center; padding: 8px 10px;
  border-radius: 8px; color: #D3E3FB; text-decoration: none; font-size: var(--sidebar-unit-font-size);
  margin-bottom: 2px; transition: all 0.2s;
  line-height: 1.45;
  font-weight: 700;
  border: 1px solid transparent;
}
.chapter-items > .nav-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 8px;
  white-space: normal;
}
.chapter-items > .nav-item .status-icon { margin: 0; }
.nav-item-label { min-width: 0; overflow-wrap: anywhere; }
.nav-item:hover { background: rgba(121, 171, 255, 0.2); color: #FFFFFF; }
.nav-item.active {
  background: rgba(59, 130, 246, 0.22);
  color: #F8FCFF;
  font-weight: 900;
  border: 0;
  box-shadow: none;
}

.nav-item.is-home-link {
  min-height: 50px;
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 1.16rem;
  font-weight: 900;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(86, 151, 255, 0.24) 0%, rgba(44, 108, 226, 0.2) 100%);
  border: 1px solid rgba(134, 188, 255, 0.44);
  box-shadow: 0 8px 18px rgba(8, 28, 67, 0.36);
}

.nav-item.is-home-link:hover {
  background: linear-gradient(135deg, rgba(104, 167, 255, 0.32) 0%, rgba(58, 123, 240, 0.26) 100%);
}

.nav-item.is-home-link .status-icon {
  width: 1.28rem;
  height: 1.28rem;
  min-width: 1.28rem;
  margin-right: 10px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.nav-item.is-home-link.active {
  border-color: rgba(190, 224, 255, 0.65);
  box-shadow: 0 10px 22px rgba(7, 28, 71, 0.44);
}

.status-icon {
  margin-right: 10px; width: 8px; height: 8px; min-width: 8px;
  border: 2px solid #7FA4CF; border-radius: 50%;
}
.nav-item.active .status-icon {
  border-color: #C5E2FF;
  background: #7EC0FF;
  box-shadow: 0 0 0 3px rgba(108, 176, 255, 0.2);
}

.nav-sub-group { margin-left: 20px; padding-left: 10px; border-left: 1px solid #54739F; margin-bottom: 8px; margin-top: 4px; }
.nav-item.active + .nav-sub-group {
  margin: 5px 0 9px 9px;
  padding: 3px 0 3px 9px;
  border: 0;
  border-left: 2px solid #7FB4F4;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.nav-sub-item {
  display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: center; gap: 4px; min-height: 24px; padding: 2px 4px; font-size: var(--sidebar-submenu-font-size); color: #C6DCF8; text-decoration: none; transition: color 0.2s, background 0.2s, border-color 0.2s;
  line-height: 1.35;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid transparent;
}
.nav-sub-item-number {
  display: inline-block;
  padding: 0;
  color: #87B6ED;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.nav-sub-item-label { min-width: 0; }
.nav-sub-item:hover {
  color: #FFFFFF;
  background: rgba(107, 164, 255, 0.14);
  border-color: transparent;
}
.nav-sub-item:hover .nav-sub-item-number {
  color: #FFFFFF;
  background: transparent;
  border-color: transparent;
}
.nav-sub-item.current {
  color: #FFFFFF;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(94, 157, 255, 0.36) 0%, rgba(69, 131, 235, 0.28) 100%);
  border: 1px solid rgba(145, 194, 255, 0.44);
}
.nav-sub-item.current .nav-sub-item-number {
  color: #FFFFFF;
  background: transparent;
  border-color: transparent;
}
.nav-sub-item:focus-visible {
  outline: 2px solid #D4ECFF;
  outline-offset: 2px;
}
.nav-sub-item.current::before { content: none; }

/* -----------------------------------------
   SEO静的サイドバー（JavaScript無効時のフォールバック）
   -----------------------------------------
   目的:
   - HTML初期状態でも内部リンクを並べて、クローラーに構造を伝える
   - JS有効時は createSidebar(...) が nav全体を書き換えるため、この見た目は一瞬のみ
*/
.seo-static-sidebar {
  padding: 14px 12px;
  overflow-y: auto;
  min-width: var(--sidebar-width);
}

.seo-static-sidebar-title {
  margin: 0 0 12px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #93C5FD;
  letter-spacing: 0.03em;
}

.seo-static-sidebar-list,
.seo-static-sidebar-list ul {
  margin: 0;
  padding-left: 14px;
}

.seo-static-sidebar-list > li {
  margin-bottom: 8px;
}

.seo-static-sidebar-list a {
  color: #C7D2FE;
  text-decoration: none;
  font-size: 0.78rem;
  line-height: 1.55;
}

.seo-static-sidebar-list a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

@media (min-width: 769px) {
  /* デスクトップ: 閉じた状態は「縮小」ではなく完全に閉じる */
  body.sidebar-closed nav.left-nav {
    width: 0;
    border-right: none;
  }

  body.sidebar-closed nav.left-nav .brand-area,
  body.sidebar-closed nav.left-nav .nav-scroll {
    visibility: hidden;
    pointer-events: none;
  }

  nav.left-nav .btn-sidebar-close {
    display: none;
  }
}


/* =========================================
   ② メインレイアウト & ヘッダー
   ========================================= */
.main-wrapper {
  flex: 1; display: flex; flex-direction: column; height: 100vh;
  overflow-y: auto; scroll-behavior: smooth; position: relative;
  background: var(--bg-body);
}

/* ヘッダー背景 */
.sticky-header {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  display: flex; flex-direction: column;
  pointer-events: none;
}

/* ヘッダー帯部分 */
.header-container {
  display: flex; align-items: flex-start; padding: 0 24px;
  min-height: 60px;
  background: var(--header-bg);
  color: var(--header-text);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  width: 100%;
  pointer-events: auto;
}

/* ハンバーガーボタン */
.btn-hamburger {
  margin-top: 14px; margin-right: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #E2E8F0;
  flex-shrink: 0; transition: all 0.2s;
}
.btn-hamburger:hover { background: rgba(255,255,255,0.1); color: #fff; }
.icon-menu { font-size: 1.2rem; }

/* 2面表示トグル */
.btn-book-toggle {
  margin-top: 12px;
  margin-left: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  color: #E2E8F0;
  font-weight: 700;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.2s;
}

.btn-book-toggle:hover { background: rgba(255,255,255,0.16); color: #fff; }

.btn-book-toggle.is-active {
  background: #fff;
  color: var(--header-bg);
  border-color: #fff;
}

body:not(.sidebar-closed) .btn-book-toggle {
  opacity: 0.9;
}


/* --- モダンなタイトルデザイン --- */
details.header-toggle { flex: 1; margin-top: 8px; }

details.header-toggle summary {
  padding: 8px 12px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 8px;
  transition: background 0.2s;
  cursor: pointer;
  border: 1px solid transparent;
}
details.header-toggle summary:hover { background: rgba(255, 255, 255, 0.08); }

/* タイトル周り */
.header-title-wrapper { display: flex; align-items: center; gap: 10px; }
.title-icon { font-size: 1.2rem; }
.page-title {
  margin: 0; padding: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.4;
}

/* 右側の開閉ステータス */
.toggle-status { display: flex; align-items: center; gap: 8px; }
.status-text {
  font-size: 0.75rem;
  color: #fff;
  font-weight: 700;
  background: var(--primary);
  padding: 4px 10px; border-radius: 20px;
  opacity: 1; transition: opacity 0.2s;
}
details.header-toggle[open] .status-text {
  background: var(--header-border); color: #CBD5E1;
}
.toggle-arrow {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--header-border); color: #94A3B8;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem;
  transition: transform 0.3s;
}
details.header-toggle[open] .toggle-arrow {
  transform: rotate(180deg);
  background: #fff; color: var(--header-bg);
}

.header-content {
  display: flex; gap: 16px; padding: 12px 4px 16px 4px;
  animation: slideDown 0.3s ease-out;
  border-top: 1px dashed rgba(255,255,255,0.2);
  margin-top: 8px;
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* スマホ対応 */
@media (max-width: 600px) {
  .page-title { font-size: 0.95rem; }
  .status-text { display: none; }
  .header-content { flex-direction: column; gap: 10px; }
  .btn-book-toggle { display: none; }
}

/* ヘッダーカード */
.concept-card {
  flex: 1; padding: 12px 16px; border-radius: 8px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.concept-card.def { background: var(--def-bg); border: 1px solid var(--def-border); }
.concept-card.mind { background: var(--mind-bg); border: 1px solid var(--mind-border); }

.label-jp { font-size: 0.65rem; font-weight: 800; opacity: 0.8; letter-spacing: 0.05em; display: block; }
.concept-card.def .label-jp { color: var(--def-text); }
.concept-card.mind .label-jp { color: var(--mind-text); }

.text-jp { font-size: 0.9rem; font-weight: 700; line-height: 1.5; margin: 0; color: var(--text-main); }


/* =========================================
   ③ コンテンツエリア (Content)
   ========================================= */
.content-flex-container { display: flex; width: 100%; position: relative; }
.center-column {
  flex: 1;
  container-name: textbook;
  container-type: inline-size;
  padding: 24px 32px;
  max-width: 1000px;
  margin: 0 auto;
}

/* -----------------------------------------
   SEO/UX パンくず
   -----------------------------------------
   - 章・単元の位置を明示して回遊を増やす
   - 内部リンクを増やしてクロール構造を理解しやすくする
*/
.seo-breadcrumb {
  margin: 4px 0 16px;
}

.seo-breadcrumb ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #64748B;
  font-size: 0.78rem;
}

.seo-breadcrumb li {
  display: inline-flex;
  align-items: center;
}

.seo-breadcrumb li + li::before {
  content: "›";
  margin-right: 6px;
  color: #94A3B8;
}

.seo-breadcrumb a {
  color: #2563EB;
  text-decoration: none;
}

.seo-breadcrumb a:hover {
  text-decoration: underline;
}

.book-spread {
  display: block;
}

.book-page {
  min-width: 0;
}

.book-page-right {
  display: none;
}

.book-scroll {
  height: auto;
  overflow: visible;
}

.book-content {
  container-name: textbook;
  container-type: inline-size;
  min-width: 0;
}

.book-compare-shell {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #fff;
}

.book-compare-frame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  background: #fff;
}

.book-compare-status {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(248, 250, 252, 0.94);
  color: var(--text-sub);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.7;
  text-align: center;
}

.book-compare-status[hidden] {
  display: none !important;
}

.book-compare-status[data-tone="error"] {
  color: #991B1B;
  background: rgba(254, 242, 242, 0.96);
}

@media (min-width: 769px) {
  body.sidebar-closed.book-view .main-wrapper {
    overflow: hidden;
  }

  body.sidebar-closed.book-view .content-flex-container {
    flex: 1;
    min-height: 0;
  }

  body.sidebar-closed.book-view .center-column {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 6px clamp(6px, 1vw, 12px) 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.sidebar-closed.book-view .book-spread {
    flex: 1;
    display: flex;
    gap: var(--book-column-gap);
    min-height: 0;
    position: relative;
  }

  body.sidebar-closed.book-view .book-page {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.sidebar-closed.book-view .book-page-right {
    display: flex;
  }

  body.sidebar-closed.book-view.book-view-forced-single .book-page-right {
    display: none;
  }

  body.sidebar-closed.book-view.book-view-forced-single .book-spread::before,
  body.sidebar-closed.book-view.book-view-forced-single .book-spread::after {
    content: none;
  }

  body.sidebar-closed.book-view.book-view-forced-single .book-page-left .book-scroll {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  }

  body.sidebar-closed.book-view .book-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  }

  body.sidebar-closed.book-view .book-content .unit-content {
    padding: 14px 12px 20px;
  }

  body.sidebar-closed.book-view .book-content .card-fill,
  body.sidebar-closed.book-view .book-content .card-fill-dashed {
    padding: 14px 12px;
  }

  body.sidebar-closed.book-view .book-content .card-border,
  body.sidebar-closed.book-view .book-content .card-border-fill {
    padding: 12px;
  }

  body.sidebar-closed.book-view .book-compare-scroll {
    overflow: hidden;
    scrollbar-gutter: auto;
  }

  body.sidebar-closed.book-view .book-page-left .book-scroll {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08), inset -12px 0 18px rgba(15, 23, 42, 0.05);
  }

  body.sidebar-closed.book-view .book-page-right .book-scroll {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08), inset 12px 0 18px rgba(15, 23, 42, 0.05);
  }

  body.sidebar-closed.book-view .book-spread::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.7) 12%, rgba(148, 163, 184, 0.7) 88%, transparent);
    border-radius: 999px;
    pointer-events: none;
  }

  body.sidebar-closed.book-view .book-spread::after {
    content: none;
  }

  body.sidebar-closed.book-view aside.right-notes {
    width: 220px;
    min-width: 220px;
    padding: 16px 12px;
  }

  body.sidebar-closed.book-view.notes-closed aside.right-notes {
    width: 0;
    min-width: 0;
    padding: 0;
    border: none;
    opacity: 0;
    display: none;
  }

  body.sidebar-closed.book-view .notes-header {
    margin-bottom: 12px;
  }

  body.sidebar-closed.book-view .note-card {
    padding: 10px 12px;
    margin-bottom: 12px;
  }
}

@keyframes book-flow {
  0% { transform: translate(-50%, 0) rotate(45deg); opacity: 0; }
  20% { opacity: 0.9; }
  70% { transform: translate(-50%, 36px) rotate(45deg); opacity: 0.9; }
  100% { transform: translate(-50%, 52px) rotate(45deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.sidebar-closed.book-view .book-spread::after {
    animation: none;
    opacity: 0.6;
  }
}

.section-title {
  font-size: 1.2rem; font-weight: 800; color: var(--text-main);
  margin-top: 24px; margin-bottom: 16px; padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}

.text-body {
  font-size: 1rem;
  color: var(--text-body);
  font-weight: 600;
  line-height: 1.9;
  margin-bottom: 16px;
}

p {
  line-height: 1.9;
}

ul,
ol {
  color: var(--text-body);
  line-height: 1.9;
}

li {
  margin-bottom: 6px;
  font-weight: 600;
}

strong {
  color: var(--text-main);
  font-weight: 800;
}
.keyword { font-weight: 800; color: var(--text-main); }


/* --- 大見出しカード (unit-card) --- */
details.unit-card {
  background: var(--bg-card);
  border: 1px solid var(--unit-border);
  border-radius: 10px;
  margin-bottom: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

details.unit-card[open] {
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.1);
  border-color: var(--unit-border-open);
}

summary.unit-summary {
  padding: 12px 16px;
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 12px;
  background: var(--primary-light);
  border-bottom: 1px solid var(--unit-border);
  transition: background 0.2s;
}

summary.unit-summary:hover { background: #DBEAFE; }

/* アイコン */
.unit-icon {
  width: 26px; height: 26px; border-radius: 6px;
  background: #fff;
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 0.9rem;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* タイトル */
.unit-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--primary);
  flex: 1;
}

.unit-toggle-arrow { transition: transform 0.3s; color: var(--primary); opacity: 0.7; }
details.unit-card[open] .unit-toggle-arrow { transform: rotate(180deg); opacity: 1; }

/* コンテンツ部分の余白 */
.unit-content {
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.85;
  padding: 18px 20px 24px 20px;
}

/* --- 公開プレビュー / 会員限定導線 --- */
.preview-gate {
  margin: 24px 0;
  padding: 0;
}

.preview-gate-card {
  padding: 22px;
  border: 1px solid var(--primary-border);
  border-radius: 10px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}

.preview-gate-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 900;
  border: 1px solid var(--primary-border);
}

.preview-gate-title {
  margin: 12px 0 8px;
  color: var(--text-main);
  font-size: 1.22rem;
  line-height: 1.45;
  font-weight: 900;
}

.preview-gate-text {
  margin: 0 0 14px;
  color: var(--text-body);
}

.preview-gate-list {
  margin: 0 0 18px;
  padding-left: 1.2em;
}

.preview-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.preview-gate-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.35;
  border: 1px solid var(--primary);
}

.preview-gate-button.is-primary {
  color: #FFFFFF;
  background: var(--primary);
}

.preview-gate-button.is-secondary {
  color: var(--primary);
  background: #FFFFFF;
}

.preview-paywall {
  display: none !important;
}


/* --- 中見出しカード (section-toggle) --- */
details.section-toggle {
  margin-top: 16px; border: 1px solid #94A3B8; border-radius: 8px;
  background: #fff; overflow: hidden;
}
summary.section-summary {
  padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center;
  background: #F1F5F9;
  transition: all 0.2s;
  cursor: pointer;
}
summary.section-summary:hover { background: #E2E8F0; }

details.section-toggle[open] summary.section-summary {
  background: #F1F5F9;
  border-bottom: 1px solid #94A3B8;
}

.section-title-wrap { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--text-body); font-size: 1rem; }

.section-number {
  width: 20px; height: 20px;
  background: #94A3B8;
  color: #fff;
  border-radius: 5px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.75rem;
}
details.section-toggle[open] .section-number { background: #64748B; }

.section-icon-plus { font-size: 1.1rem; color: #94A3B8; font-weight: 300; line-height: 1; }
.section-icon-plus::after { content: "+"; }
details.section-toggle[open] .section-icon-plus::after { content: "−"; }
details.section-toggle[open] .section-icon-plus { color: #94A3B8; }

.section-inner, .text-content { padding: 12px 20px 20px 20px; background: #fff; }

details.section-toggle.is-highlight {
  border-color: #F59E0B;
  background: #FFFBEB;
}
details.section-toggle.is-highlight summary.section-summary {
  background: #FEF3C7;
}
details.section-toggle.is-highlight summary.section-summary:hover {
  background: #FDE68A;
}
details.section-toggle.is-highlight[open] summary.section-summary {
  border-bottom: 1px solid #F59E0B;
}
details.section-toggle.is-highlight .section-title-wrap {
  color: #B45309;
}
details.section-toggle.is-highlight .section-number {
  background: #F59E0B;
}
details.section-toggle.is-highlight .section-icon-plus {
  color: #B45309;
}
details.section-toggle.is-highlight .section-inner {
  background: #FFFBEB;
}

details.section-toggle.is-expense {
  border-color: var(--warn-border);
}

details.section-toggle.is-expense summary.section-summary {
  background: var(--warn-bg);
}

details.section-toggle.is-expense summary.section-summary:hover {
  background: #FEE2E2;
}

details.section-toggle.is-expense[open] summary.section-summary {
  border-bottom-color: var(--warn-border);
}

details.section-toggle.is-expense .section-title-wrap,
details.section-toggle.is-expense .section-icon-plus {
  color: var(--note-warn);
}

details.section-toggle.is-expense .section-number {
  background: var(--note-warn);
}

details.section-toggle.is-revenue {
  border-color: var(--primary-border);
}

details.section-toggle.is-revenue summary.section-summary {
  background: var(--primary-light);
}

details.section-toggle.is-revenue summary.section-summary:hover {
  background: #DBEAFE;
}

details.section-toggle.is-revenue[open] summary.section-summary {
  border-bottom-color: var(--primary-border);
}

details.section-toggle.is-revenue .section-title-wrap,
details.section-toggle.is-revenue .section-icon-plus {
  color: var(--primary);
}

details.section-toggle.is-revenue .section-number {
  background: var(--primary);
}


/* =========================================
   ★小見出しカード (sub-title)
   ========================================= */
h3.sub-title {
  font-size: 1rem;       /* 本文より少し大きく */
  font-weight: 800;      /* 太字で強調 */
  color: var(--text-main);
  border-left: 5px solid #CBD5E1;
  padding-left: 12px;
  margin-top: 28px;
  margin-bottom: 12px;
  line-height: 1.4;
}


/* =========================================
   ★学習用コンポーネント (Learning Parts & Cards)
   ★変更点：FillとBorderの使い分けロジックを追加
   ========================================= */

/* カード名の対応表（プロンプト用）
   大見出しカード: details.unit-card
   中見出しカード: details.section-toggle
   小見出しカード: h3.sub-title
   比較カード: details.compare-box
   縦線カード: .card-border
   縦線背景色カード: .card-border-fill
   背景色カード: .card-fill
   点線背景色カード: .card-fill-dashed
   透明枠カード: .card-outline
*/

/* --- C. Utility Cards (汎用カードクラス) ★NEW --- */

/* 1. 背景色カード (card-fill) */
.card-fill {
  background-color: var(--card-gray-bg); /* グレー */
  border: 1px solid var(--card-gray-border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.card-fill.is-primary { background-color: var(--card-primary-bg); border-color: var(--card-primary-border); }
.card-fill.is-green { background-color: var(--card-green-bg); border-color: var(--card-green-border); }
.card-fill.is-orange { background-color: var(--card-orange-bg); border-color: var(--card-orange-border); }
.card-fill.is-red { background-color: var(--card-red-bg); border-color: var(--card-red-border); }

/* 2. 縦線カード (card-border) */
.card-border {
  background-color: #fff;
  border: 1px solid var(--border);
  border-left-width: 5px; /* 太い左線 */
  border-left-color: var(--card-gray);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.card-border.is-green { border-left-color: var(--card-green); }
.card-border.is-red   { border-left-color: var(--card-red); }
.card-border.is-primary { border-left-color: var(--card-primary); }
.card-border.is-orange { border-left-color: var(--card-orange); }

/* 3. 縦線背景色カード (card-border-fill) */
.card-border-fill {
  background-color: var(--card-gray-bg);
  border: 1px solid var(--card-gray-border);
  border-left-width: 5px;
  border-right-width: 5px;
  border-left-color: var(--card-gray-dash);
  border-right-color: var(--card-gray-dash);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.card-border-fill.is-primary {
  border-left-color: var(--card-primary-dash);
  border-right-color: var(--card-primary-dash);
  background-color: var(--card-primary-bg);
  border-color: var(--card-primary-border);
}
.card-border-fill.is-green {
  border-left-color: var(--card-green-dash);
  border-right-color: var(--card-green-dash);
  background-color: var(--card-green-bg);
  border-color: var(--card-green-border);
}
.card-border-fill.is-orange {
  border-left-color: var(--card-orange-dash);
  border-right-color: var(--card-orange-dash);
  background-color: var(--card-orange-bg);
  border-color: var(--card-orange-border);
}
.card-border-fill.is-red {
  border-left-color: var(--card-red-dash);
  border-right-color: var(--card-red-dash);
  background-color: var(--card-red-bg);
  border-color: var(--card-red-border);
}

/* 4. 点線背景色カード (card-fill-dashed) */
.card-fill-dashed {
  background-color: var(--card-gray-bg);
  border: 2px dashed var(--card-gray-dash-light);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.card-fill-dashed.is-primary { background-color: var(--card-primary-bg); border-color: var(--card-primary-dash-light); }
.card-fill-dashed.is-green { background-color: var(--card-green-bg); border-color: var(--card-green-dash-light); }
.card-fill-dashed.is-orange { background-color: var(--card-orange-bg); border-color: var(--card-orange-dash-light); }
.card-fill-dashed.is-red { background-color: var(--card-red-bg); border-color: var(--card-red-dash-light); }

/* 5. 透明枠カード (card-outline) */
.card-outline {
  background: transparent;
  border: 1px solid var(--card-outline);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.example-card {
  margin-bottom: 18px;
}

.example-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 10px;
}

.example-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 900;
}

.example-note {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 0.85rem;
  color: var(--text-sub);
}

.example-part {
  margin-bottom: 16px;
}

.example-part:last-child {
  margin-bottom: 0;
}

.example-card > .example-part {
  padding: 14px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.example-card > .example-part:nth-of-type(1) {
  background-color: var(--card-gray-bg);
  border: 1px solid var(--card-gray-border);
  border-left-width: 5px;
  border-right-width: 5px;
  border-left-color: var(--card-gray-dash);
  border-right-color: var(--card-gray-dash);
}

.example-card > .example-part:nth-of-type(2) {
  background-color: var(--card-red-bg);
  border: 2px dashed var(--card-red-dash-light);
}

.example-card > .example-part:nth-of-type(3) {
  background-color: var(--card-green-bg);
  border: 1px solid var(--card-green-border);
}

.example-part-title {
  display: block;
  margin-bottom: 10px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--text-sub);
}

.example-card > .example-part .example-part-title {
  padding-left: 0;
  border-left: none;
}

.example-card > .example-part:nth-of-type(1) .example-part-title {
  color: var(--text-main);
}

.example-card > .example-part:nth-of-type(2) .example-part-title {
  color: var(--card-red);
}

.example-card > .example-part:nth-of-type(3) .example-part-title {
  color: var(--card-green);
}

.card-demo {
  margin-bottom: 0;
  height: 100%;
}

.card-demo-title {
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}

.card-demo-desc {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-sub);
}


/* --- 既存コンポーネントへの適用 --- */

/* 1. Story & Formula -> Fill Style */
.story-box {
  background: var(--hint-bg); border: 1px solid var(--hint-border); border-radius: 8px;
  padding: 16px 20px; margin-bottom: 16px;
}
.story-title { font-weight: 800; color: #B45309; margin-bottom: 8px; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.story-card-heading {
  display: inline-flex; align-items: center;
  padding: 4px 10px; margin-bottom: 10px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-body); color: var(--text-sub);
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em;
}

.formula-box {
  background: var(--primary-light); border: 2px dashed var(--primary-border);
  border-radius: 8px; padding: 16px; text-align: center;
  font-weight: 800; color: var(--primary); font-size: 1rem; margin: 16px 0;
}
.formula-caption { font-size: 0.75rem; color: var(--text-sub); font-weight: normal; margin-top: 4px; display: block; }

/* 2. Practice (練習問題) -> Border Style (Warning) */
.practice-zone { margin-top: 24px; }
details.practice-toggle {
  background: #fff; border: 1px solid var(--warn-border); border-left: 5px solid var(--note-warn);
  border-radius: 6px; overflow: hidden; margin-bottom: 16px;
}
details.practice-toggle summary {
  padding: 12px 16px; color: var(--note-warn); font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; gap: 8px; transition: background 0.2s; cursor: pointer;
  background: #fff; /* Border styleなので白背景 */
}
details.practice-toggle summary:hover { background: var(--warn-bg); }
.answer-area { padding: 16px; border-top: 1px dashed var(--warn-border); background: #fff; font-family: monospace; font-weight: 700; color: var(--note-warn); font-size: 0.95rem; }

/* 3. Process Flow (手順の流れ図) */
.process-flow {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0;
  counter-reset: flow-step;
}
.flow-step {
  flex: 1; min-width: 140px;
  background: #fff; border: 1px solid var(--border); border-bottom: 3px solid var(--border);
  border-radius: 8px;
  padding: 12px 12px 12px 36px; /* 左側に番号スペース */
  position: relative;
  font-size: 0.85rem; color: var(--text-body); font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.flow-step::before {
  counter-increment: flow-step;
  content: counter(flow-step);
  position: absolute; left: 10px; top: 12px;
  width: 20px; height: 20px;
  background: var(--primary); color: #fff;
  border-radius: 50%; font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
/* 矢印（スマホでは下向き、PCでは右向き） */
.flow-step:not(:last-child)::after {
  content: "▶";
  position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  color: #94A3B8; font-size: 0.8rem; z-index: 1;
}
.process-flow.is-points {
  counter-reset: none;
}
.process-flow.is-points .flow-step {
  padding: 12px;
}
.process-flow.is-points .flow-step::before,
.process-flow.is-points .flow-step::after {
  content: none;
}
.flow-point {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--primary);
  background: var(--card-primary-bg);
  border: 1px solid var(--card-primary-border);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.process-flow.is-vertical {
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 820px;
  margin: 20px auto;
}
.process-flow.is-vertical .flow-step {
  width: 100%; min-width: 0;
  display: grid; grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 8px 18px; align-items: start;
  padding-left: 44px;
}
.process-flow.is-vertical .flow-step-title {
  font-size: 0.9rem; font-weight: 800; color: inherit;
}
.process-flow.is-vertical .flow-step-desc { font-size: 0.85rem; line-height: 1.6; color: inherit; }
.process-flow.is-vertical .flow-step-lead { font-weight: 600; }
.process-flow.is-vertical .flow-step-note { font-size: 0.78rem; opacity: 0.8; margin-top: 4px; }
.process-flow.is-vertical .flow-step:not(:last-child)::after {
  content: "▼";
  right: 50%; top: auto; bottom: -18px; transform: translateX(50%);
}
@media (max-width: 720px) {
  .process-flow.is-vertical .flow-step { grid-template-columns: 1fr; gap: 6px; }
}

@container textbook (max-width: 720px) {
  .process-flow.is-vertical .flow-step { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 600px) {
  .process-flow { flex-direction: column; gap: 16px; }
  .flow-step:not(:last-child)::after {
    content: "▼"; right: 50%; top: auto; bottom: -18px; transform: translateX(50%);
  }
}

@container textbook (max-width: 600px) {
  .process-flow { flex-direction: column; gap: 16px; }
  .flow-step:not(:last-child)::after {
    content: "▼"; right: 50%; top: auto; bottom: -18px; transform: translateX(50%);
  }
}

/* 3.5 Closing Transfer (決算振替イメージ) */
.closing-transfer {
  background: #fff;
  border: 1px solid var(--border);
  padding: 24px 18px;
  --closing-transfer-gap: 16px;
  --branch-zero-length: 420px;
  --branch-zero-top: 2px;
  --profit-arrow-up: 260px;
  --profit-arrow-down: 60px;
}
.closing-transfer-row {
  display: grid;
  gap: var(--closing-transfer-gap);
  width: 100%;
}
.closing-transfer-row.is-top,
.closing-transfer-row.is-arrows {
  grid-template-columns: repeat(2, minmax(360px, 1fr));
}
.closing-transfer-row.is-postclose {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  justify-items: center;
  margin-top: 12px;
}
.closing-transfer-row.is-center {
  grid-template-columns: minmax(260px, 1fr);
  justify-items: center;
}
.closing-transfer-node {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.closing-transfer-node.is-wide { max-width: 520px; width: 100%; }
.closing-transfer-node.is-equity { background: var(--card-green-bg); border-color: var(--card-green-border); }
.closing-transfer-title {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--text-main);
  margin-bottom: 8px;
}
.closing-transfer-note { font-size: 0.75rem; color: var(--text-sub); margin-top: 6px; }
.closing-transfer-sum { font-size: 0.78rem; font-weight: 800; color: var(--text-main); margin-top: 4px; }
.closing-transfer-amount { font-weight: 800; font-size: 1rem; color: var(--primary); }
.closing-transfer-arrow {
  text-align: center;
  font-size: 0.8rem;
  color: #64748B;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  overflow: visible;
}
.closing-transfer-arrow-sub { font-size: 0.7rem; color: var(--text-sub); font-weight: 600; }
.closing-transfer-arrow-lines { display: grid; gap: 4px; margin: 4px 0; }
.closing-transfer-journal {
  font-size: 0.72rem;
  color: #334155;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}
.closing-transfer-arrow-note {
  font-size: 0.72rem;
  color: var(--text-body);
  font-weight: 700;
  margin-top: 2px;
}
.closing-transfer-journal-card {
  border: 1px dashed #CBD5E1;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  margin: 6px 0;
  display: grid;
  gap: 4px;
}
.closing-transfer-branch {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  margin: 2px 0 4px;
  position: relative;
  --branch-zero-offset: 0%;
}
.closing-transfer-branch-to-center,
.closing-transfer-branch-to-zero {
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #64748B;
  font-weight: 700;
}
.closing-transfer-branch-to-zero { grid-column: 2; }
.closing-transfer-branch-to-center {
  grid-column: 3;
  justify-self: end;
}
.closing-transfer-branch.is-right .closing-transfer-branch-to-center {
  grid-column: 1;
  justify-self: start;
}
.closing-transfer-branch.is-left,
.closing-transfer-branch.is-right {
  --branch-zero-offset: 0%;
}
.closing-transfer-branch-label {
  font-size: 0.64rem;
  color: var(--text-sub);
  font-weight: 600;
  line-height: 1;
}
.closing-transfer-arrow-icon.is-diagonal {
  display: inline-block;
  transform: rotate(45deg);
}
.closing-transfer-branch.is-right .closing-transfer-arrow-icon.is-diagonal {
  transform: rotate(-45deg);
}
.closing-transfer-branch-to-zero {
  position: absolute;
  left: calc(50% + var(--branch-zero-offset));
  top: calc(100% + var(--branch-zero-top));
  transform: translateX(-50%);
  width: 2px;
  height: var(--branch-zero-length);
  background: #64748B;
  z-index: 2;
  pointer-events: none;
}
.closing-transfer-branch-to-zero::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #64748B;
}
.closing-transfer-zero {
  border: 1px dashed #E2E8F0;
  border-radius: 10px;
  padding: 6px 8px;
  background: #fff;
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}
.closing-transfer-row.is-postclose .closing-transfer-zero {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
  position: relative;
  z-index: 1;
}
.closing-transfer-arrow.is-profit-link {
  position: relative;
  padding: 6px 0;
}
.closing-transfer-arrow.is-profit-link::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--profit-arrow-up));
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(var(--profit-arrow-up) + var(--profit-arrow-down));
  background: #64748B;
}
.closing-transfer-arrow.is-profit-link::after {
  content: "";
  position: absolute;
  top: calc(var(--profit-arrow-down) - 2px);
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #64748B;
}
.closing-transfer-arrow-label {
  font-size: 0.78rem;
  color: #64748B;
  font-weight: 700;
  background: #fff;
  padding: 0 6px;
  position: relative;
  z-index: 1;
}
.closing-transfer-zero-title {
  font-size: 0.68rem;
  color: var(--text-sub);
  font-weight: 700;
}
.closing-transfer-zero-stack {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.closing-transfer-taccount.is-zero { max-width: 120px; width: 120px; }
.closing-transfer-taccount.is-zero .taccount-name { font-size: 0.7rem; }
.closing-transfer-taccount.is-zero .taccount-row { font-size: 0.66rem; }
.closing-transfer-taccount.is-zero .taccount-cause { font-size: 0.6rem; }
.closing-transfer-taccount.is-zero .taccount-amount { font-size: 0.72rem; }
.taccount-entry.is-zero .taccount-amount { color: #0F172A; }
.closing-transfer-arrow.is-wide { grid-column: 1 / -1; }
.closing-transfer-arrow-icon { font-size: 1.2rem; line-height: 1; }
.closing-transfer-arrow-icon.is-mini { font-size: 0.9rem; }
.closing-transfer-taccount { margin: 0 auto; max-width: 150px; width: 150px; }
.closing-transfer-row.is-center .closing-transfer-taccount { max-width: 320px; width: 320px; }
.closing-transfer-stack {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
}
.closing-transfer-taccount.is-large .taccount-row { font-size: 0.78rem; }
.closing-transfer-taccount.is-large .taccount-cause { font-size: 0.72rem; }
.closing-transfer-taccount.is-large .taccount-amount { font-size: 0.82rem; }
.closing-transfer .taccount-table {
  overflow: hidden;
  border-radius: 4px;
}
.closing-transfer .taccount-side,
.closing-transfer .taccount-entry,
.closing-transfer .taccount-row {
  min-width: 0;
}
.closing-transfer .taccount-row {
  padding: 0 8px;
  column-gap: 6px;
}
.closing-transfer .taccount-cause,
.closing-transfer .taccount-amount {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}
.closing-transfer-responsive {
  overflow-x: hidden;
}
.closing-transfer-responsive .closing-transfer-row.is-top,
.closing-transfer-responsive .closing-transfer-row.is-arrows,
.closing-transfer-responsive .closing-transfer-row.is-postclose {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.closing-transfer-responsive .closing-transfer-node,
.closing-transfer-responsive .closing-transfer-zero {
  max-width: 100%;
  min-width: 0;
}
.closing-transfer-responsive .closing-transfer-flow-down {
  color: #64748B;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  padding: 6px 0 2px;
  text-align: center;
}
.closing-transfer-responsive .closing-transfer-split-arrow {
  max-width: min(620px, 100%);
  margin: 0 auto;
}
.taccount-entry.is-empty { color: transparent; }
.taccount-entry.is-profit .taccount-amount { color: #16A34A; }
@media (max-width: 720px) {
  .closing-transfer { --branch-zero-length: 260px; --branch-zero-top: 2px; --profit-arrow-up: 200px; --profit-arrow-down: 50px; }
  .closing-transfer-row.is-top,
  .closing-transfer-row.is-arrows {
    grid-template-columns: 1fr;
  }
  .closing-transfer-row.is-postclose {
    grid-template-columns: 1fr;
  }
  .closing-transfer-stack { flex-wrap: wrap; }
  .closing-transfer-arrow-icon { transform: none; }
  .closing-transfer-branch {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .closing-transfer-branch-to-center,
  .closing-transfer-branch-to-zero {
    grid-column: auto;
    justify-self: center;
  }
  .closing-transfer-branch-to-zero {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    height: 32px;
  }
  .closing-transfer-arrow-icon.is-diagonal { transform: rotate(0deg); }
}

@container textbook (max-width: 720px) {
  .closing-transfer { --branch-zero-length: 260px; --branch-zero-top: 2px; --profit-arrow-up: 200px; --profit-arrow-down: 50px; }
  .closing-transfer-row.is-top,
  .closing-transfer-row.is-arrows {
    grid-template-columns: 1fr;
  }
  .closing-transfer-row.is-postclose {
    grid-template-columns: 1fr;
  }
  .closing-transfer-stack { flex-wrap: wrap; }
  .closing-transfer-arrow-icon { transform: none; }
  .closing-transfer-branch {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .closing-transfer-branch-to-center,
  .closing-transfer-branch-to-zero {
    grid-column: auto;
    justify-self: center;
  }
  .closing-transfer-branch-to-zero {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    height: 32px;
  }
  .closing-transfer-arrow-icon.is-diagonal { transform: rotate(0deg); }
}

/* 4. Mask (暗記用目隠し) */
.mask {
  background-color: #475569; /* 黒塗り */
  color: transparent;
  padding: 0 4px; border-radius: 4px;
  cursor: pointer; user-select: none;
  transition: all 0.2s ease;
  font-weight: 700;
}
.mask:hover, .mask:active {
  background-color: var(--hint-border); /* 黄色のマーカー風に変化 */
  color: #92400E;
}
/* スマホでタップしやすいように調整 */
@media (hover: none) {
  .mask:active { background-color: var(--hint-border); color: #92400E; }
}

/* 5. Exam Badge (試験対策バッジ) */
.badge-exam {
  display: inline-block; background: var(--badge-high); color: #fff;
  font-size: 0.65rem; padding: 2px 6px; border-radius: 4px;
  margin-right: 6px; vertical-align: middle; font-weight: bold; letter-spacing: 0.05em;
}
.badge-calc {
  background: var(--badge-calc);
}

/* =========================================
   ④ 右サイドバー (Right Sidebar)
   ========================================= */
aside.right-notes {
  width: var(--right-sidebar-width); flex-shrink: 0;
  border-left: 1px solid var(--border); background: #fff;
  height: calc(100vh - 65px); position: sticky; top: 65px;
  padding: 20px; overflow-y: auto; transition: all 0.3s ease;
}

/* 備考ボタンのJS制御で非表示になる時 */
body.notes-closed aside.right-notes {
  width: 0; padding: 20px 0; border: none; opacity: 0;
}

/* 以前の制御（念のため残し） */
aside.right-notes.closed { width: 0; padding: 20px 0; border: none; opacity: 0; }

.notes-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; font-size: 0.7rem; font-weight: 800; color: #94A3B8; letter-spacing: 0.05em;
}
.btn-close {
  background: none; border: none; color: #94A3B8; cursor: pointer;
  font-size: 0.8rem; display: flex; align-items: center; gap: 4px; font-weight: 600;
}
.btn-close:hover { color: var(--text-main); }

/* 右サイドバーのカード（Border Styleを適用） */
.note-card {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  border-left-width: 4px; border-left-style: solid; font-size: 0.85rem; line-height: 1.6;
}
.note-card.hint { border-left-color: var(--note-hint); }
.note-card.warn { border-left-color: var(--note-warn); }
.note-card.info { border-left-color: var(--primary); }

.note-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 800; margin-bottom: 6px; }
.note-card.hint .note-badge { color: var(--note-hint); }
.note-card.warn .note-badge { color: var(--note-warn); }
.note-card.info .note-badge { color: var(--primary); }

.note-title { display: block; font-size: 0.9rem; font-weight: 800; color: var(--text-main); margin-bottom: 4px; }
.note-desc { font-size: 0.85rem; color: var(--text-sub); line-height: 1.5; margin: 0; }

body.has-ai-chat {
  --right-sidebar-width: 360px;
  --ai-mobile-sheet-height: min(74vh, 620px);
  --ai-accent: #5B4BC4;
  --ai-accent-strong: #4437A5;
  --ai-accent-soft: #F3F1FF;
  --ai-accent-soft-strong: #EAE7FF;
  --ai-accent-border: #D6D0F5;
  --ai-panel-surface: #FAF9FF;
  --ai-ink: #2C2850;
}

.effboki-ai-notes-header {
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* Full-page chat is available for both ordinary and image questions. */
.effboki-ai-expand-panel {
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid var(--ai-accent-border);
  border-radius: 7px;
  background: var(--ai-panel-surface);
  color: var(--ai-accent);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.effboki-ai-expand-panel[hidden] { display: none; }
body.has-ai-chat.is-ai-image-question .center-column { min-width: 0; }

.effboki-ai-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #F8FAFC;
}

.effboki-ai-tab {
  border: none;
  background: transparent;
  color: var(--text-sub);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.effboki-ai-tab.is-active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.effboki-ai-tab:focus-visible,
.effboki-ai-expand-panel:focus-visible,
.effboki-ai-chip:focus-visible,
.effboki-ai-send:focus-visible,
.effboki-ai-image-mode-toggle:focus-visible,
.effboki-ai-image-choose:has(.effboki-ai-image-input:focus-visible),
.effboki-ai-image-remove:focus-visible,
.effboki-ai-sent-image:focus-visible,
.effboki-ai-image-viewer-button:focus-visible,
.effboki-ai-image-retry:focus-visible,
.effboki-ai-unit-choice:focus-visible {
  outline: 2px solid rgba(91, 75, 196, 0.38);
  outline-offset: 2px;
}

aside.right-notes[data-active-panel="ai"] {
  border-left-color: var(--ai-accent-border);
  background: var(--ai-panel-surface);
}

aside.right-notes[data-active-panel="ai"] .effboki-ai-tabs {
  border-color: var(--ai-accent-border);
  background: var(--ai-accent-soft);
}

aside.right-notes[data-active-panel="ai"] .effboki-ai-tab.is-active {
  background: var(--ai-accent);
  color: #fff;
  box-shadow: 0 2px 7px rgba(68, 55, 165, 0.22);
}

.effboki-ai-panels {
  min-height: 0;
}

body.has-ai-chat aside.right-notes {
  display: flex;
  flex-direction: column;
  width: var(--right-sidebar-width);
  min-width: var(--right-sidebar-width);
  position: sticky;
  overflow: visible;
}

body.has-ai-chat .effboki-ai-panels {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.effboki-ai-panel {
  min-height: 0;
}

.effboki-ai-panel[hidden] {
  display: none !important;
}

.effboki-ai-source[hidden] {
  display: none !important;
}

.effboki-ai-notes-panel {
  overflow-y: auto;
  padding-right: 2px;
}

.effboki-ai-chat-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.effboki-ai-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--ai-accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.effboki-ai-messages {
  container-type: inline-size;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  overflow-anchor: none;
  scroll-behavior: auto;
  scrollbar-gutter: stable;
  padding: 10px;
  border: 1px solid var(--ai-accent-border);
  border-radius: 8px;
  background:
    radial-gradient(circle at top right, rgba(234, 231, 255, 0.75), transparent 42%),
    #F7F7FC;
}

.effboki-ai-message {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 10px;
}

.effboki-ai-message.is-user {
  justify-content: flex-end;
}

.effboki-ai-bubble {
  max-width: 92%;
  white-space: normal;
  overflow-wrap: anywhere;
  border: 1px solid #DEDCEC;
  border-radius: 8px;
  padding: 9px 11px;
  background: #fff;
  color: var(--text-body);
  font-size: max(14px, 0.95rem);
  font-weight: 500;
  line-height: 1.85;
}

.effboki-ai-message.is-assistant .effboki-ai-bubble {
  max-width: calc(100% - 35px);
  box-shadow: 0 2px 8px rgba(44, 40, 80, 0.05);
}

.effboki-ai-avatar {
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--ai-accent-soft-strong);
  color: var(--ai-accent-strong);
}

@container (max-width: 460px) {
  .effboki-ai-message.is-assistant:has(.effboki-ai-unit-card[open]) .effboki-ai-bubble {
    width: calc(100% - 35px);
    max-width: calc(100% - 35px);
  }
}

.effboki-ai-bubble > :first-child {
  margin-top: 0;
}

.effboki-ai-bubble > :last-child {
  margin-bottom: 0;
}

.effboki-ai-paragraph {
  margin: 0 0 1em;
  line-height: 1.9;
}

.effboki-ai-heading {
  margin: 24px 0 12px;
  padding: 9px 12px;
  border-left: 4px solid var(--ai-accent);
  border-radius: 0 7px 7px 0;
  background: var(--ai-accent-soft);
  color: var(--ai-accent-strong);
  font-weight: 800;
  line-height: 1.55;
}

.effboki-ai-heading.is-level-1 {
  margin: 16px 0 10px;
  padding: 12px 16px;
  border: 1px solid var(--ai-accent-border);
  border-radius: 10px;
  background: var(--ai-accent-soft);
  box-shadow: 0 4px 6px -1px rgba(68, 55, 165, 0.06);
  color: var(--ai-accent-strong);
  font-size: 1.08rem;
  line-height: 1.45;
}

.effboki-ai-heading.is-level-2 {
  font-size: max(15px, 1.08em);
}

.effboki-ai-heading.is-level-3 {
  font-size: max(15px, 1.05em);
}

.effboki-ai-heading.is-level-4 {
  border-left-width: 3px;
  font-size: max(14px, 1em);
}

.effboki-ai-bubble .effboki-ai-heading strong {
  color: inherit;
  font-weight: inherit;
}

.effboki-ai-heading.is-guidance-label {
  display: inline-flex;
  width: fit-content;
  margin: 14px 0 8px;
  padding: 5px 10px;
  border: 1px solid var(--ai-accent-border);
  border-radius: 999px;
  background: var(--ai-accent-soft);
  color: var(--ai-accent-strong);
  font-size: 0.86rem;
  line-height: 1.35;
}

.effboki-ai-heading.is-calculation-label {
  border-color: #A7F3D0;
  background: #ECFDF5;
  color: #047857;
}

.effboki-ai-heading.is-answer-label {
  border-color: #BFDBFE;
  background: #EFF6FF;
  color: #1D4ED8;
}

.effboki-ai-unit-card {
  margin: 12px 0 14px;
  border-color: var(--ai-accent-border);
  box-shadow: 0 3px 9px rgba(68, 55, 165, 0.06);
}

.effboki-ai-unit-card[open] {
  border-color: #AAA0E0;
  box-shadow: 0 7px 16px rgba(68, 55, 165, 0.1);
}

.effboki-ai-unit-card > .effboki-ai-unit-summary {
  padding: 10px 12px;
  border-bottom-color: var(--ai-accent-border);
  background: var(--ai-accent-soft);
}

.effboki-ai-unit-card > .effboki-ai-unit-summary:hover {
  background: var(--ai-accent-soft-strong);
}

.effboki-ai-unit-card .effboki-ai-unit-title,
.effboki-ai-unit-card .unit-toggle-arrow {
  color: var(--ai-accent-strong);
}

.effboki-ai-unit-card > .effboki-ai-unit-content {
  padding: 12px;
  background: #FEFDFF;
  font-size: inherit;
  line-height: inherit;
}

.effboki-ai-section-card {
  margin: 10px 0 12px;
  border-color: #C8C3DF;
  background: #FEFDFF;
}

.effboki-ai-section-card > .effboki-ai-section-summary {
  padding: 9px 10px;
  background: #F6F4FC;
}

.effboki-ai-section-card > .effboki-ai-section-summary:hover,
.effboki-ai-section-card[open] > .effboki-ai-section-summary {
  border-bottom-color: var(--ai-accent-border);
  background: var(--ai-accent-soft-strong);
}

.effboki-ai-section-card .effboki-ai-section-title {
  color: var(--ai-ink);
}

.effboki-ai-section-card .section-icon-plus {
  color: var(--ai-accent);
}

.effboki-ai-section-card > .effboki-ai-section-content {
  padding: 10px 12px 12px;
  background: #FEFDFF;
  font-size: inherit;
  line-height: inherit;
}

.effboki-ai-list {
  margin: 6px 0 12px;
  padding-left: 1.25rem;
}

.effboki-ai-list .effboki-ai-list {
  margin: 4px 0 5px;
  padding-left: 1.05rem;
}

.effboki-ai-list li {
  margin: 4px 0;
  padding-left: 2px;
}

.effboki-ai-list li::marker {
  color: var(--ai-accent);
  font-weight: 900;
}

.effboki-ai-bubble strong {
  color: var(--text-main);
  font-weight: 900;
}

.effboki-ai-bubble em {
  font-style: normal;
  color: var(--text-main);
  font-weight: 800;
}

.effboki-ai-inline-code {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #F8FAFC;
  color: var(--text-main);
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.82em;
}

.effboki-ai-quote {
  margin: 10px 0 14px;
  padding: 8px 10px;
  border-left: 4px solid var(--primary);
  border-radius: 0 8px 8px 0;
  background: var(--primary-light);
  color: var(--text-body);
}

.effboki-ai-divider {
  height: 0;
  margin: 14px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.effboki-ai-journal-wrap {
  max-width: 100%;
  margin: 10px 0 14px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.effboki-ai-journal {
  min-width: max-content;
  margin: 0;
  padding-bottom: 0;
  font-size: 0.86rem;
}

.effboki-ai-codeblock {
  margin: 10px 0 14px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #F8FAFC;
  color: var(--text-main);
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre;
}

.effboki-ai-formula-box.formula-box {
  margin: 10px 0 16px;
  padding: 12px;
  overflow: hidden;
  text-align: left;
  font-size: 0.9rem;
}

.effboki-ai-formula-title {
  margin-bottom: 8px;
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 900;
}

.effboki-ai-formula-row {
  display: block;
  padding: 8px 10px;
  border: 1px solid #D9D4F0;
  border-radius: 7px;
  background: #fff;
}

.effboki-ai-formula-row + .effboki-ai-formula-row {
  margin-top: 6px;
}

.effboki-ai-formula-step,
.effboki-ai-formula-result-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5em;
  border-radius: 999px;
  background: var(--ai-accent-soft-strong);
  color: var(--ai-accent-strong);
  padding: 2px 7px;
  font-size: 0.72rem;
  font-weight: 900;
}

.effboki-ai-formula-step {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 6px;
  white-space: normal;
}

.effboki-ai-formula-expression {
  display: block;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  color: var(--text-main);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  padding-bottom: 5px;
  scrollbar-gutter: stable;
}

.effboki-ai-formula-expression:focus-visible {
  outline: 2px solid var(--ai-accent, #5C4BC4);
  outline-offset: 2px;
  border-radius: 2px;
}

.effboki-ai-formula-annotated {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: max-content;
  margin: 0 0.14em;
  vertical-align: top;
}

.effboki-ai-formula-annotated-value {
  width: 100%;
  border-bottom: 2px solid var(--ai-accent, #5C4BC4);
  padding: 0 0.1em 1px;
  text-align: center;
}

.effboki-ai-formula-annotation {
  max-width: 24em;
  padding-top: 5px;
  color: var(--ai-accent-strong, #4437A5);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: max(12px, 0.85rem);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
}

.effboki-ai-formula-result {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  padding: 9px 10px;
  border-radius: 7px;
  background: #E8F1FF;
  color: #1D4ED8;
}

.effboki-ai-formula-result strong {
  color: #1D4ED8;
  font-size: 1rem;
}

.effboki-ai-formula-note {
  margin-top: 8px;
  line-height: 1.55;
  text-align: left;
}

.effboki-ai-taccount-wrap {
  max-width: 100%;
  margin: 10px 0 16px;
  container: ai-ledger / inline-size;
}

/* Inline-size containment must not collapse the surrounding chat bubble. */
.effboki-ai-message.is-assistant .effboki-ai-bubble:has(.effboki-ai-taccount-wrap),
.effboki-ai-message.is-assistant .effboki-ai-bubble:has(.effboki-ai-timeline-host),
.effboki-ai-message.is-assistant .effboki-ai-bubble:has(.effboki-ai-ledger-host) {
  width: calc(100% - 35px);
  min-width: 0;
}

/* Two three-column accounts need enough width to show both debit/credit halves. */
@container ai-ledger (min-width: 1120px) {
  .effboki-ai-taccount-wrap.勘定科目紹介t字勘定.is-grouped > .taccount-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.effboki-ai-taccount-wrap.勘定科目紹介t字勘定 > .taccount-quick-grid {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 0;
}

.effboki-ai-taccount-wrap .effboki-ai-taccount-item {
  /* AI diagrams keep a readable line length even in the full-screen chat (2026-09-09). */
  width: 100%;
  max-width: 680px;
  min-width: 0;
  justify-self: center;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
}

.effboki-ai-taccount-wrap .taccount-name {
  margin-bottom: 5px;
  color: var(--text-main);
}

.effboki-ai-taccount-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 2px 0 6px;
  color: var(--text-sub);
  font-size: max(12px, 0.85rem);
  font-weight: 700;
  text-align: center;
}

.effboki-ai-taccount-wrap .taccount-side {
  min-width: 0;
}

.effboki-ai-taccount-wrap .taccount-row {
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  padding: 0 6px;
}

.effboki-ai-taccount-wrap .taccount-cause {
  min-width: 0;
  text-align: left;
}

/* AI ledgers intentionally differ from textbook home-position diagrams (2026-09-07).
   Dates, counterpart accounts and amounts stay on one row; narrow diagrams scroll
   horizontally rather than changing the bookkeeping column order. */
.effboki-ai-taccount-wrap .effboki-ai-taccount-item {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.effboki-ai-taccount-wrap .effboki-ai-taccount-item:focus-visible {
  outline: 2px solid var(--ai-accent, #5c4bc4);
  outline-offset: 2px;
}

.effboki-ai-taccount-scroll-hint { display: none; }
@container ai-ledger (max-width: 543px) {
  .effboki-ai-taccount-scroll-hint {
    display: block;
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
  }
}

.effboki-ai-taccount-wrap.勘定科目紹介t字勘定 .taccount-quick-item .effboki-ai-taccount {
  min-width: 520px;
}

.effboki-ai-taccount-wrap.勘定科目紹介t字勘定 .taccount-quick-item .taccount-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.effboki-ai-taccount-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.effboki-ai-taccount-wrap.勘定科目紹介t字勘定 .taccount-quick-item .effboki-ai-taccount .taccount-side.is-fixed {
  height: auto;
  min-height: 38px;
  flex: 0 0 auto;
}

.effboki-ai-taccount-wrap.勘定科目紹介t字勘定 .taccount-quick-item .effboki-ai-taccount .taccount-side.is-full-height {
  flex: 1 0 auto;
}

/* A lower border marks each side's extent even when amounts are still unknown.
   Different heights, rather than a missing border, show a debit/credit difference. */
.effboki-ai-taccount-wrap .taccount-side:not(.is-empty) {
  border-bottom: 2px solid var(--taccount-border);
}

.effboki-ai-taccount-wrap.勘定科目紹介t字勘定 .taccount-quick-item .taccount-row {
  grid-template-columns: var(--ai-ledger-date-width, 2.6em) minmax(0, 1fr) auto;
  min-height: 38px;
  height: auto;
  gap: 4px;
  padding: 6px;
  align-items: center;
}

.effboki-ai-taccount-wrap.勘定科目紹介t字勘定 .taccount-quick-item .taccount-side.is-fixed .taccount-entry {
  align-items: stretch;
  flex: 1 0 auto;
  height: auto;
  min-height: 0;
}

.effboki-ai-taccount-date {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.effboki-ai-taccount-wrap.勘定科目紹介t字勘定 .taccount-quick-item .taccount-cause {
  padding: 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.effboki-ai-taccount-wrap .taccount-amount {
  min-width: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.effboki-ai-taccount-blank,
.effboki-ai-taccount-new,
.effboki-ai-taccount-filled {
  white-space: nowrap;
}

.effboki-ai-taccount-blank {
  font-weight: 500;
}

.effboki-ai-taccount-new {
  color: #6d28d9;
}

.effboki-ai-taccount-link {
  margin-right: 3px;
  font-size: 10px;
  font-weight: 700;
  vertical-align: super;
}

.effboki-ai-taccount-caption {
  margin: 8px 0 0;
  color: #475569;
  font-size: 0.85rem;
  line-height: 1.65;
}

.effboki-ai-taccount-wrap .effboki-ai-taccount.is-neutral .taccount-side,
.effboki-ai-message.is-image-question .effboki-ai-taccount-wrap.勘定科目紹介t字勘定 .taccount-quick-item .effboki-ai-taccount .taccount-side:not(.is-empty) {
  background: transparent;
}

/* Color encodes a verified transfer pair only in image-question answers. */
.effboki-ai-message.is-image-question .taccount-entry[data-transfer-color="0"] { --transfer-ink: #6d28d9; --transfer-bg: #f3e8ff; }
.effboki-ai-message.is-image-question .taccount-entry[data-transfer-color="1"] { --transfer-ink: #036951; --transfer-bg: #e7f8f0; }
.effboki-ai-message.is-image-question .taccount-entry[data-transfer-color="2"] { --transfer-ink: #9a3412; --transfer-bg: #fff0e5; }
.effboki-ai-message.is-image-question .taccount-entry[data-transfer-color="3"] { --transfer-ink: #075985; --transfer-bg: #e6f4ff; }
.effboki-ai-message.is-image-question .effboki-ai-taccount-wrap.勘定科目紹介t字勘定 .taccount-quick-item .taccount-entry[data-transfer-color] {
  background: var(--transfer-bg);
}
.effboki-ai-message.is-image-question .taccount-entry[data-transfer-color] :is(.taccount-cause, .taccount-amount, .effboki-ai-taccount-new) {
  color: var(--transfer-ink);
}

.effboki-ai-taccount-gap {
  position: relative;
  min-height: 50px;
  flex: 1 0 50px;
  display: flex;
  align-items: center;
  padding: 6px 16px;
}

.effboki-ai-taccount-gap.is-left { justify-content: flex-end; }
.effboki-ai-taccount-gap svg {
  position: absolute;
  left: 3px;
  top: 0;
  width: 12px;
  height: 100%;
  fill: none;
  stroke: #475569;
  stroke-width: 1.6;
}
.effboki-ai-taccount-gap.is-left svg {
  left: auto;
  right: 3px;
  transform: scaleX(-1);
}
.effboki-ai-taccount-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  max-width: 100%;
}
.effboki-ai-taccount-balance-label { white-space: nowrap; }

/* Whole-side totals are outside the ledger, with one footer per debit/credit half. */
.effboki-ai-taccount-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
}
.effboki-ai-taccount-total {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}
.effboki-ai-taccount-total-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Optional before/after explanations share one horizontal scroll area. Each
   snapshot keeps the normal accounting columns without nested scroll regions. */
.effboki-ai-ledger-comparison {
  min-width: 0;
  max-width: 100%;
  margin: 14px 0 18px;
}
.effboki-ai-ledger-comparison-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #475569;
}
.effboki-ai-ledger-comparison-nav > span { margin-right: auto; }
.effboki-ai-ledger-comparison-nav button {
  padding: 5px 10px;
  border: 1px solid #c4b5fd;
  border-radius: 6px;
  color: #4c3aa0;
  background: #fff;
  font: inherit;
  cursor: pointer;
}
.effboki-ai-ledger-comparison-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(550px, calc((100% - 16px) / 2));
  align-items: start;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: #b7a9e5 #f6f3ff;
  padding-bottom: 8px;
}
.effboki-ai-ledger-comparison-scroll:focus-visible,
.effboki-ai-ledger-comparison-nav button:focus-visible {
  outline: 2px solid #5c4bc4;
  outline-offset: 2px;
}
.effboki-ai-ledger-comparison-stage { min-width: 0; }
.effboki-ai-ledger-comparison-title {
  padding: 8px 12px;
  border-left: 3px solid #a899d7;
  background: #f5f2fc;
  color: #4c3aa0;
  font-size: 0.9rem;
  font-weight: 700;
}
.effboki-ai-ledger-comparison-stage .effboki-ai-taccount-wrap { margin: 8px 0 0; }
.effboki-ai-ledger-comparison-stage .effboki-ai-taccount-item { overflow: visible; }
.effboki-ai-ledger-comparison-stage .effboki-ai-taccount-scroll-hint { display: none; }
.effboki-ai-ledger-comparison-hint {
  margin: 5px 0 0;
  font-size: 12px;
  color: #64748b;
}

.effboki-ai-table-wrap {
  max-width: 100%;
  margin: 10px 0 14px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.effboki-ai-table {
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  font-size: 0.82rem;
  line-height: 1.55;
}

.effboki-ai-table th,
.effboki-ai-table td {
  border-bottom: 1px solid var(--border);
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}

.effboki-ai-table th {
  background: var(--primary-light);
  color: var(--text-main);
  font-weight: 900;
}

.effboki-ai-table tr:last-child td {
  border-bottom: none;
}

.effboki-ai-table-wrap:focus-visible {
  outline: 2px solid var(--ai-accent);
  outline-offset: 2px;
}

/* Reuse the textbook journal layout inside cells; scroll the table, not each entry. */
.effboki-ai-table-wrap.has-journals .effboki-ai-table-text {
  display: block;
  min-width: 7em;
  max-width: 18em;
  overflow-wrap: break-word;
}

.effboki-ai-table .effboki-ai-journal-cell {
  vertical-align: middle;
}

.effboki-ai-table-journal.effboki-ai-journal-wrap {
  margin: 0;
  padding: 7px 8px;
  overflow: visible;
  min-width: max-content;
}

.effboki-ai-table-journal .journal-grid.effboki-ai-journal {
  --journal-col-min: 0px;
  --journal-col-gap: 1.2em;
  --journal-group-gap: 0.4em;
  --journal-row-gap: 8px;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  font-size: max(12px, 0.82rem);
}

.effboki-ai-table-journal .journal-group-inner {
  align-content: start;
}

.effboki-ai-citations {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.effboki-ai-citations-label {
  margin-bottom: 4px;
  color: var(--text-sub);
  font-size: 0.74rem;
  font-weight: 900;
}

.effboki-ai-citations-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  line-height: 1.5;
}

.effboki-ai-citations-list li {
  margin: 3px 0;
}

.effboki-ai-citations-list a {
  color: var(--primary);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.effboki-ai-output-notice {
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--text-body);
  font-size: 0.78rem;
  line-height: 1.5;
}

.effboki-ai-message.is-user .effboki-ai-bubble {
  border-color: var(--primary-border);
  background: var(--primary-light);
  color: var(--text-main);
  white-space: pre-wrap;
  box-shadow: 0 2px 7px rgba(37, 99, 235, 0.06);
}

.effboki-ai-user-selection {
  margin-bottom: 8px;
  padding: 7px 9px;
  border: 1px solid var(--primary-border);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: #fff;
  white-space: normal;
}

.effboki-ai-user-selection-label {
  margin-bottom: 2px;
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 900;
}

.effboki-ai-user-selection-text {
  color: var(--text-body);
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.effboki-ai-user-message {
  white-space: pre-wrap;
}

.effboki-ai-quick-actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 6px;
}
.effboki-ai-quick-actions[hidden] { display: none !important; }

.effboki-ai-chip {
  border: 1px solid var(--ai-accent-border);
  border-radius: 999px;
  background: #fff;
  color: var(--text-body);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 9px;
}

.effboki-ai-chip:hover {
  border-color: #AAA0E0;
  background: var(--ai-accent-soft);
  color: var(--ai-accent-strong);
}

.effboki-ai-mode-bar {
  display: flex;
  flex-shrink: 0;
}

.effboki-ai-image-mode-toggle {
  width: 100%;
  border: 1px solid var(--ai-accent);
  border-radius: 8px;
  background: #fff;
  color: var(--ai-accent-strong);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 900;
  padding: 7px 10px;
}

.effboki-ai-image-mode-toggle:hover,
.effboki-ai-image-mode-toggle.is-active {
  background: var(--ai-accent-soft);
}

.effboki-ai-image-mode-toggle:disabled {
  cursor: wait;
  opacity: 0.65;
}

.effboki-ai-image-composer {
  flex-shrink: 0;
  max-height: min(310px, 38vh);
  overflow-y: auto;
  border: 1px solid var(--ai-accent-border);
  border-radius: 9px;
  background: #fff;
  padding: 9px;
}

.effboki-ai-image-composer[hidden] {
  display: none !important;
}

.effboki-ai-image-hint {
  margin: 0 0 8px;
  color: var(--text-sub);
  font-size: 0.72rem;
  line-height: 1.45;
}

.effboki-ai-image-picker + .effboki-ai-image-picker {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #ECEAF7;
}

.effboki-ai-image-picker-header,
.effboki-ai-image-picker-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.effboki-ai-image-picker-title {
  color: var(--ai-ink);
  font-size: 0.77rem;
}

.effboki-ai-image-count {
  color: var(--text-sub);
  font-size: 0.69rem;
  font-weight: 800;
}

.effboki-ai-image-picker-controls {
  justify-content: flex-start;
  margin-top: 6px;
}

.effboki-ai-image-choose {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  border: 1px solid var(--ai-accent-border);
  border-radius: 7px;
  background: var(--ai-accent-soft);
  color: var(--ai-accent-strong);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 5px 8px;
}

.effboki-ai-image-choose.is-disabled {
  cursor: wait;
  opacity: 0.55;
}

.effboki-ai-image-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.effboki-ai-image-picker-description {
  color: var(--text-sub);
  font-size: 0.66rem;
  line-height: 1.35;
}

.effboki-ai-image-previews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

.effboki-ai-image-previews:empty {
  display: none;
}

.effboki-ai-image-preview {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #DEDCEC;
  border-radius: 7px;
  background: #F8FAFC;
}

.effboki-ai-image-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.effboki-ai-image-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 900;
  padding: 2px 6px;
}

.effboki-ai-image-status {
  min-height: 1.2em;
  margin-top: 7px;
  color: var(--text-sub);
  font-size: 0.68rem;
  line-height: 1.4;
}

.effboki-ai-image-status.is-error {
  color: #B42318;
  font-weight: 800;
}

/* Sent attachments belong to the message, not the next question's composer. */
.effboki-ai-sent-images {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.effboki-ai-sent-image-label {
  margin-bottom: 5px;
  font-size: 0.8rem;
  font-weight: 800;
}

.effboki-ai-sent-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 96px));
  gap: 6px;
}

.effboki-ai-sent-image {
  display: block;
  min-width: 0;
  aspect-ratio: 4 / 3;
  padding: 3px;
  overflow: hidden;
  border: 1px solid #B8B3DB;
  border-radius: 8px;
  background: #fff;
  cursor: zoom-in;
}

.effboki-ai-sent-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.effboki-ai-sent-image:hover {
  border-color: var(--ai-accent);
  box-shadow: 0 0 0 1px var(--ai-accent);
}

.effboki-ai-sent-image-note {
  font-size: 0.75rem;
  line-height: 1.5;
}

.effboki-ai-image-retry {
  display: block;
  margin-top: 9px;
  padding: 8px 12px;
  border: 1px solid var(--ai-accent-border);
  border-radius: 8px;
  background: var(--ai-accent-soft);
  color: var(--ai-accent-strong);
  font: inherit;
  cursor: pointer;
}

.effboki-ai-image-retry:disabled {
  opacity: 0.55;
  cursor: default;
}

.effboki-ai-image-viewer {
  position: fixed;
  inset: 0;
  width: min(1040px, calc(100vw - 24px));
  height: min(960px, calc(100dvh - 32px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  background: #F1F5F9;
  color: #0F172A;
}

.effboki-ai-image-viewer[open] {
  display: flex;
  flex-direction: column;
}

.effboki-ai-image-viewer::backdrop {
  background: rgba(15, 23, 42, 0.76);
}

.effboki-ai-image-viewer-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #CBD5E1;
  background: #fff;
}

.effboki-ai-image-viewer-title {
  flex: 1;
  font-size: 1rem;
}

.effboki-ai-image-viewer-button {
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #C4BDEB;
  border-radius: 8px;
  background: #F1EFFF;
  color: #4438A5;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.effboki-ai-image-viewer-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.effboki-ai-image-viewer-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.effboki-ai-image-viewer-stage:focus-visible {
  outline: 2px solid #5B4BC4;
  outline-offset: -2px;
}

.effboki-ai-image-viewer-stage.is-zoomed img {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: auto;
}

.effboki-ai-unit-choices {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}

.effboki-ai-unit-choice {
  width: 100%;
  border: 1px solid var(--ai-accent-border);
  border-radius: 7px;
  background: var(--ai-accent-soft);
  color: var(--ai-accent-strong);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.4;
  padding: 7px 9px;
  text-align: left;
}

.effboki-ai-unit-choice:hover {
  border-color: var(--ai-accent);
  background: var(--ai-accent-soft-strong);
}

.effboki-ai-unit-choice:disabled {
  cursor: wait;
  opacity: 0.58;
}

.effboki-ai-form {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}

.effboki-ai-input {
  width: 100%;
  height: 42px;
  min-height: 42px;
  overflow-y: hidden;
  resize: none;
  border: 1px solid var(--ai-accent-border);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--text-main);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.55;
  background: #fff;
}

.effboki-ai-input:focus {
  outline: 2px solid rgba(91, 75, 196, 0.16);
  border-color: var(--ai-accent);
}

.effboki-ai-send {
  border: 1px solid var(--ai-accent);
  border-radius: 8px;
  background: var(--ai-accent);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  padding: 10px 13px;
  min-height: 42px;
}

.effboki-ai-send:disabled,
.effboki-ai-input:disabled {
  cursor: wait;
  opacity: 0.65;
}

.effboki-ai-source {
  flex-shrink: 0;
  color: var(--text-sub);
  font-size: 0.72rem;
  line-height: 1.4;
}

.effboki-ai-selection {
  flex-shrink: 0;
  border: 1px solid var(--primary-border);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: var(--primary-light);
  padding: 8px 10px;
}

.effboki-ai-selection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.effboki-ai-selection-label {
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 900;
}

.effboki-ai-selection-clear {
  border: none;
  background: transparent;
  color: var(--text-sub);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 0;
}

.effboki-ai-selection-clear:hover {
  color: var(--text-main);
}

.effboki-ai-selection-text {
  margin: 0;
  color: var(--text-body);
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.effboki-ai-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  z-index: 4;
  width: 20px;
  cursor: col-resize;
  touch-action: none;
}

.effboki-ai-sheet-resizer {
  display: none;
}

.effboki-ai-resizer::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 9px;
  width: 2px;
  border-radius: 999px;
  background: #DBEAFE;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.effboki-ai-resizer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 10px;
  height: 42px;
  border: 1px solid #93C5FD;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  transform: translate(-50%, -50%);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.effboki-ai-resizer:hover::before,
.effboki-ai-resizer:focus-visible::before,
body.is-ai-resizing .effboki-ai-resizer::before {
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.effboki-ai-resizer:hover::after,
.effboki-ai-resizer:focus-visible::after,
body.is-ai-resizing .effboki-ai-resizer::after {
  border-color: var(--primary);
  background: #EFF6FF;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.16);
}

.effboki-ai-resizer:focus-visible {
  outline: none;
}

body.is-ai-resizing,
body.is-ai-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

body.is-ai-sheet-resizing,
body.is-ai-sheet-resizing * {
  cursor: ns-resize !important;
  user-select: none !important;
}

@media (min-width: 769px) {
  body.has-ai-chat.notes-closed aside.right-notes {
    display: none;
    width: 0;
    min-width: 0;
    padding: 0;
    border: none;
    opacity: 0;
  }

  body.has-ai-chat.notes-closed .content-flex-container {
    justify-content: center;
  }

  body.has-ai-chat.notes-closed .center-column {
    width: 100%;
    max-width: min(1180px, calc(100vw - 64px));
    margin: 0 auto;
  }

  body.has-ai-chat.sidebar-closed.book-view aside.right-notes {
    width: var(--right-sidebar-width);
    min-width: var(--right-sidebar-width);
  }

  body.has-ai-chat.sidebar-closed.book-view.notes-closed aside.right-notes {
    display: none;
    width: 0;
    min-width: 0;
    padding: 0;
    border: none;
    opacity: 0;
  }

  body.has-ai-chat.sidebar-closed.book-view.notes-closed .center-column {
    width: 100%;
    max-width: none;
    margin: 0;
  }
}


/* =========================================
   ⑤ ユーティリティ (Utility Classes)
   ========================================= */
.grade-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.grade-switcher-link {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-sub);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  background: #F8FAFC;
  transition: all 0.2s ease;
}

.grade-switcher-link:hover {
  color: var(--text-main);
  background: #fff;
}

.grade-switcher-link.is-current {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

/* --- Grid (レイアウト用グリッド) --- */

/* 2列レイアウト */
.layout-grid-2 {
  display: grid;
  --layout-grid-min: 280px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-grid-min)), 1fr));
  gap: 16px;
  width: 100%;
  margin-bottom: 24px;
  align-items: start;
}

/* 3列レイアウト */
.layout-grid-3 {
  display: grid;
  --layout-grid-min: 240px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-grid-min)), 1fr));
  gap: 16px;
  width: 100%;
  margin-bottom: 24px;
  align-items: start;
}

/* --- Step 2 / Step 3 の中見出しカード --- */
.entry-topic-card {
  margin-bottom: 24px;
}

.entry-topic-card:last-child {
  margin-bottom: 0;
}

.entry-topic-title {
  display: block;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.6;
}

.entry-topic-card.is-expense .entry-topic-title {
  color: var(--note-warn);
  border-bottom-color: var(--warn-border);
}

.entry-topic-card.is-revenue .entry-topic-title {
  color: var(--primary);
  border-bottom-color: var(--primary-border);
}

.entry-topic-use {
  margin: 0 0 14px;
  padding-left: 20px;
  font-size: 0.95rem;
  line-height: 1.8;
}

.entry-topic-use li {
  margin-bottom: 0;
}

.entry-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  width: 100%;
}

.entry-case {
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 12px;
}

.entry-topic-card.is-expense .entry-case {
  border-color: var(--warn-border);
}

.entry-topic-card.is-revenue .entry-case {
  border-color: var(--primary-border);
}

.entry-case-title {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-main);
}

.entry-example {
  margin: 0 0 10px;
  font-size: 0.88rem;
  line-height: 1.7;
}

.entry-example strong {
  color: var(--text-main);
}

.entry-note {
  margin: 12px 0 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-sub);
}

/* 仕訳と、その仕訳になる理由を一組で示す解説 */
.journal-explanation-list {
  display: grid;
  gap: 12px;
  margin: 10px 0 0;
}

.journal-explanation-item {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 8px;
}

.journal-explanation-title {
  display: block;
  color: var(--text-main);
  font-size: 0.92rem;
}

.journal-explanation-item .journal-grid {
  margin-top: 10px;
  padding-bottom: 4px;
}

.journal-explanation-reason {
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 118, 110, 0.25);
  font-size: 0.9rem;
  line-height: 1.8;
}

/* --- Journal Entry (仕訳：修正完了版) --- */
.journal-grid {
  --journal-col-min: 130px;
  --journal-col-gap: clamp(2em, 3vw, 5em);
  --journal-bottom-gap: 14px;
  --journal-group-gap: 10px;
  --journal-row-gap: 4px;
  --journal-row-attr-gap: 8px;
  --journal-row-attr-stack-gap: 14px;
  --journal-paren-pad: 1em;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 600px;
  margin: 10px auto 0;
  padding-bottom: var(--journal-bottom-gap);
  justify-content: center;
  align-items: stretch;
  row-gap: 10px;
  column-gap: var(--journal-col-gap);
}

.journal-grid > div {
  flex: 0 1 auto;
  min-width: var(--journal-col-min);
  display: flex;
  flex-direction: column;
}

/* 比較カード内の仕訳も、入る時は左右に並べ、入らない時は貸方を次の行へ送る */
.journal-grid.journal-compact {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  flex-wrap: wrap;
  column-gap: min(var(--journal-col-gap), 5em);
}

.journal-grid.journal-compact:not(.is-stacked) > div {
  flex: 0 1 auto;
}

.journal-grid.journal-compact.journal-bleed {
  width: calc(100% + var(--journal-bleed-left, 0px) + var(--journal-bleed-right, 0px));
  margin-left: calc(-1 * var(--journal-bleed-left, 0px));
  margin-right: calc(-1 * var(--journal-bleed-right, 0px));
}

/* Stack when two columns cannot fit on one line */
.journal-grid.is-stacked {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.journal-grid.is-stacked > div {
  flex: 0 0 auto;
  width: 100%;
}

/* 1. 借方（左側）。折り返した時も左に置く */
.journal-grid > div:nth-child(1) {
  align-items: flex-start;
}

/* 2. 貸方（右側）。折り返した時は右のまま次の行に置く */
.journal-grid > div:nth-child(2) {
  align-items: flex-end;
  margin-left: 0;
  border-left: none;
}

/* Stack時は外側に寄せる */
.journal-grid.is-stacked > div:nth-child(1) {
  align-items: flex-start;
  order: 1;
}

.journal-grid.is-stacked > div:nth-child(2) {
  align-items: flex-end;
  order: 2;
}

/* Legacy padding for non-group rows */
.journal-grid > div:not(.journal-group):nth-child(1) {
  padding-right: 5px;
}

.journal-grid > div:not(.journal-group):nth-child(2) {
  padding-left: 5px;
}

/* Remove column padding when stacked */
.journal-grid.is-stacked > div:not(.journal-group):nth-child(1),
.journal-grid.is-stacked > div:not(.journal-group):nth-child(2) {
  padding-left: 0;
  padding-right: 0;
}

/* Grouped rows (for compound entries) */
.journal-group {
  align-self: stretch;
}

.journal-group-inner {
  display: inline-grid;
  grid-template-columns: var(--journal-label-width, max-content) var(--journal-account-width, max-content) var(--journal-amount-width, max-content);
  column-gap: var(--journal-group-gap);
  row-gap: var(--journal-row-gap);
  align-items: baseline;
}

.journal-grid.journal-no-label .journal-group-inner {
  grid-template-columns: var(--journal-account-width, max-content) var(--journal-amount-width, max-content);
}

.journal-group-inner:has(.account-stack small),
.journal-group-inner:has(.account-stack span.attr),
.journal-group-inner:has(.journal-account > small),
.journal-group-inner:has(.journal-account > span.attr),
.journal-group-inner:has(.amount-stack small),
.journal-group-inner:has(.amount-stack span.attr),
.journal-group-inner:has(.journal-amount > small),
.journal-group-inner:has(.journal-amount > span.attr) {
  row-gap: max(var(--journal-row-gap), var(--journal-row-attr-stack-gap));
}

.journal-row {
  display: contents;
}

.journal-row.has-attr:not(:last-child) > .journal-label,
.journal-row.has-attr:not(:last-child) > .journal-account,
.journal-row.has-attr:not(:last-child) > .journal-amount {
  margin-bottom: var(--journal-row-attr-gap);
}

.journal-label {
  font-weight: 800;
  font-size: 1rem;
  text-align: center;
  white-space: nowrap;
}

.journal-label.is-empty {
  visibility: hidden;
}

.journal-grid.journal-no-label .journal-label {
  display: none;
}

.journal-account {
  position: relative;
  padding: 0 var(--journal-paren-pad);
  text-align: center;
  white-space: nowrap;
}

.journal-account::before,
.journal-account::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  font-weight: inherit;
  color: inherit;
}

.journal-account::before {
  content: "（";
  left: 0;
}

.journal-account::after {
  content: "）";
  right: 0;
}

.journal-amount {
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  position: relative;
  padding-right: 0;
  min-width: 0;
  justify-self: stretch;
}

.journal-amount > small,
.journal-amount > span.attr {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.7em;
  color: var(--text-sub);
  font-weight: normal;
  line-height: 1;
  padding-top: 1px;
}

/* --- 金額の下に補足文字を入れる --- */
.amount-stack {
  display: inline-flex;
  position: relative;
  justify-content: flex-end;
  text-align: right;
  flex-direction: row;
}

.amount-stack small,
.amount-stack span.attr {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.7em;
  color: var(--text-sub);
  font-weight: normal;
  line-height: 1;
  padding-top: 1px;
}

/* --- 金額の右に注記マークを付ける --- */
.amount-mark {
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: inherit;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 1;
}

/* --- 左端の仕訳番号 --- */
.journal-label.journal-index {
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 1.6em;
  color: var(--text-main);
}

.journal-grid.journal-has-amount-mark .journal-amount {
  padding-right: 1.4em;
}

/* --- 横一列に揃える設定 --- */
.journal-grid > div:not(.journal-group) > div {
  align-items: baseline !important;
  margin-bottom: 18px;
  display: inline-flex;
  /* ★修正: 文字（科目+金額）は絶対に折り返さない */
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 6px;
}

/* --- 勘定科目と属性のスタック設定 --- */
.account-stack {
  display: inline-flex;
  position: relative;
  justify-content: center;
  text-align: center;
  flex-direction: row;
  /* ★属性が長い場合に備えて行間に少し余裕を持つ */
  line-height: 1.2;
}

/* --- 属性（(資産)など）を絶対配置で下にぶら下げる --- */
.account-stack small,
.account-stack span.attr,
.journal-account > small,
.journal-account > span.attr {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

  font-size: 0.7em;
  color: var(--text-sub);
  font-weight: normal;
  line-height: 1;
  padding-top: 1px;
}

.account-stack small::before,
.account-stack small::after,
.account-stack span.attr::before,
.account-stack span.attr::after,
.journal-account > small::before,
.journal-account > small::after,
.journal-account > span.attr::before,
.journal-account > span.attr::after {
  content: "-";
}


/* スマホ調整 */
@media (max-width: 450px) {
  .entry-case-grid {
    grid-template-columns: 1fr;
  }

  .journal-grid {
    max-width: none;
    flex-wrap: wrap;
    --journal-group-gap: 3px;
    --journal-col-min: 0px;
    column-gap: min(var(--journal-col-gap), 5em);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .journal-grid:not(.is-stacked) > div {
    flex: 0 0 auto;
  }

  .journal-grid.journal-bleed {
    width: calc(100% + var(--journal-bleed-left, 0px) + var(--journal-bleed-right, 0px));
    margin-left: calc(-1 * var(--journal-bleed-left, 0px));
    margin-right: calc(-1 * var(--journal-bleed-right, 0px));
  }

  .journal-grid:not(.is-stacked) > div:nth-child(1) {
    align-items: flex-start;
  }

  .journal-grid:not(.is-stacked) > div:nth-child(2) {
    align-items: flex-end;
  }
}

@container textbook (max-width: 450px) {
  .entry-case-grid {
    grid-template-columns: 1fr;
  }

  .journal-grid {
    max-width: none;
    flex-wrap: wrap;
    --journal-group-gap: 3px;
    --journal-col-min: 0px;
    column-gap: min(var(--journal-col-gap), 5em);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .journal-grid:not(.is-stacked) > div {
    flex: 0 0 auto;
  }

  .journal-grid.journal-bleed {
    width: calc(100% + var(--journal-bleed-left, 0px) + var(--journal-bleed-right, 0px));
    margin-left: calc(-1 * var(--journal-bleed-left, 0px));
    margin-right: calc(-1 * var(--journal-bleed-right, 0px));
  }

  .journal-grid:not(.is-stacked) > div:nth-child(1) {
    align-items: flex-start;
  }

  .journal-grid:not(.is-stacked) > div:nth-child(2) {
    align-items: flex-end;
  }
}

/* --- Images --- */
.img-box {
  width: 100%; border-radius: 8px; border: 1px solid var(--border);
  overflow: hidden; margin-bottom: 20px; background: #fff;
  padding: 20px; display: flex; justify-content: center;
}
.img-box svg, .img-box img { width: 100%; height: auto; display: block; }
.slide-caption {
  font-size: 0.8rem; color: var(--text-sub); text-align: center;
  padding: 8px; background: #F9FAFB; border-top: 1px solid var(--border);
}

/* --- Tables (集計表：修正完了版) --- */
.comparison-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 0.9rem; }
.comparison-table th, .comparison-table td { border: 1px solid var(--border); padding: 10px 12px; }
.comparison-table th { background: #F3F4F6; color: var(--text-main); font-weight: 800; width: 30%; }
.comparison-table td { background: #fff; color: var(--text-body); }

/* ゼブラストライプ（1行おきに色を変える）★NEW */

/* --- T Account (Reusable) --- */
.taccount {
  --taccount-border: #334155;
  --taccount-range: 120px;
  --taccount-min-height: 12px;
  --taccount-max: 100;
  --taccount-date-width: 2.8em;
  --taccount-cause-width: 1fr;
  --taccount-amount-width: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.taccount-name {
  text-align: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: #0F172A;
}
.taccount-table {
  display: flex;
  align-items: flex-start;
  position: relative;
}
.taccount-table::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--taccount-border);
  transform: translateX(-1px);
}
.taccount-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-top: 2px solid var(--taccount-border);
  border-bottom: 2px solid var(--taccount-border);
}
.taccount-side.is-left {
  border-left: 2px solid var(--taccount-border);
  border-right: 0;
}
.taccount-side.is-right {
  border-right: 2px solid var(--taccount-border);
  border-left: 0;
}
.taccount-side.is-empty {
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  background: transparent;
}
.taccount-side.is-strong {
  border-width: 3px;
}
.taccount-side.is-fixed {
  height: var(--side-height);
}
.taccount-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--taccount-border);
  background: var(--entry-bg, transparent);
  height: calc((var(--value) / var(--taccount-max)) * var(--taccount-range) + var(--taccount-min-height));
}
.taccount-entry:first-child { border-top: none; }
.taccount-side.is-fixed .taccount-entry {
  height: auto;
  flex: var(--weight, var(--value, 1));
  min-height: var(--taccount-min-height);
}
.taccount-entry.is-strong {
  box-shadow: inset 0 0 0 2px var(--taccount-border);
}
.taccount-row {
  display: grid;
  grid-template-columns: var(--taccount-date-width) minmax(2.6em, var(--taccount-cause-width)) var(--taccount-amount-width);
  width: 100%;
  align-items: center;
  column-gap: 6px;
  padding: 0 8px;
  font-size: 0.72rem;
  color: #334155;
  font-weight: 700;
}
.taccount-row.is-no-date {
  grid-template-columns: minmax(2.6em, var(--taccount-cause-width)) var(--taccount-amount-width);
}
.taccount-row.is-no-date .taccount-date { display: none; }
.taccount-date { font-size: 0.62rem; color: #475569; text-align: left; }
.taccount-cause { font-size: 0.7rem; color: #334155; white-space: nowrap; word-break: keep-all; text-align: center; }
.taccount-amount { font-size: 0.78rem; font-weight: 800; color: #0F172A; text-align: right; }
.taccount.is-retained-earnings {
  transform: scale(1.03, 1.12);
  transform-origin: top center;
}
.taccount-totals {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 800;
  color: #334155;
  gap: 8px;
}
.taccount-total {
  flex: 1;
  text-align: center;
}

.taccount-wrap {
  position: relative;
  display: inline-block;
}
.taccount-bracket {
  position: absolute;
  left: calc(100% + 10px);
  top: var(--bracket-top, 0px);
  height: var(--bracket-height, 40px);
  border-right: 2px solid var(--taccount-border);
}
.taccount-bracket::before,
.taccount-bracket::after {
  content: "";
  position: absolute;
  right: -2px;
  width: 14px;
  border-top: 2px solid var(--taccount-border);
}
.taccount-bracket::before { top: 0; }
.taccount-bracket::after { bottom: 0; }
.taccount-bracket-label {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: #334155;
  white-space: nowrap;
}

/* --- 勘定科目紹介t字勘定 (Reusable) --- */
.勘定科目紹介t字勘定 {
  --kanjo-home-extra-height: 10px;
  --kanjo-liability-offset-x: -14px;
}
.勘定科目紹介t字勘定 .taccount-preview-card {
  margin-top: 14px;
  margin-bottom: 10px;
}
.勘定科目紹介t字勘定 .taccount-preview-title {
  font-weight: 900;
  color: #0f172a;
}
.勘定科目紹介t字勘定 .taccount-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 0 0 16px;
}
.勘定科目紹介t字勘定 .taccount-quick-item {
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
}
.勘定科目紹介t字勘定 .taccount-quick-item .taccount {
  width: 100%;
  min-width: 0;
  --taccount-min-height: 18px;
  --taccount-diff-height: calc(var(--quick-home-height, 72px) + var(--kanjo-home-extra-height) - var(--quick-away-height, 44px));
  --taccount-diff-brace-size: max(calc(var(--taccount-diff-height) + 12px), 44px);
}
.勘定科目紹介t字勘定 .taccount-quick-item .taccount-name {
  font-size: 0.9rem;
}
.勘定科目紹介t字勘定 .taccount-quick-item .taccount-table {
  align-items: flex-start;
}
.勘定科目紹介t字勘定 .taccount-quick-item .taccount-side.is-fixed {
  height: var(--quick-away-height, 44px);
}
.勘定科目紹介t字勘定 .taccount-quick-item .taccount-side.is-home.is-fixed {
  height: calc(var(--quick-home-height, 72px) + var(--kanjo-home-extra-height));
}
.勘定科目紹介t字勘定 .taccount-quick-item .taccount-side.is-home:not(.is-empty) {
  background: #dbeafe;
}
.勘定科目紹介t字勘定 .taccount-quick-item .taccount.is-liability .taccount-side.is-home:not(.is-empty) {
  background: #fee2e2;
}
.勘定科目紹介t字勘定 .taccount-quick-item .taccount-side.is-home .taccount-entry {
  background: transparent;
}
.勘定科目紹介t字勘定 .taccount-quick-item .taccount-side:has(.taccount-entry.is-empty:only-child) {
  border-bottom: 0;
  background: transparent;
}
.勘定科目紹介t字勘定 .taccount-quick-item .taccount-entry.is-empty {
  visibility: hidden;
  border-top: 0;
  background: transparent;
}
.勘定科目紹介t字勘定 .taccount-quick-item .taccount-cause {
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  font-size: 0.72rem;
  text-align: left;
  padding: 0 6px;
}
.勘定科目紹介t字勘定 .taccount-quick-diff {
  position: absolute;
  top: var(--taccount-diff-top, var(--quick-away-height, 44px));
  left: calc(50% - 1px);
  height: var(--taccount-diff-height);
  width: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.勘定科目紹介t字勘定 .taccount-quick-diff-brace {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 100%;
  line-height: 1;
  font-family: "Courier New", "Consolas", "SFMono-Regular", monospace;
  font-size: var(--taccount-diff-brace-size);
  font-weight: 400;
  text-align: center;
  color: #475569;
  overflow: visible;
}
.勘定科目紹介t字勘定 .taccount-quick-diff-brace::before {
  content: "}";
}
.勘定科目紹介t字勘定 .taccount-quick-diff-brace::after {
  content: none;
}
.勘定科目紹介t字勘定 .taccount-quick-diff.is-right .taccount-quick-diff-brace::before {
  content: "{";
}
.勘定科目紹介t字勘定 .taccount-quick-diff.is-left .taccount-quick-diff-brace {
  left: 0;
}
.勘定科目紹介t字勘定 .taccount-quick-diff.is-right .taccount-quick-diff-brace {
  left: -18px;
}
.勘定科目紹介t字勘定 .taccount-quick-diff-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  line-height: 1.1;
  font-size: 0.78rem;
  font-weight: 800;
  color: #334155;
}
.勘定科目紹介t字勘定 .taccount-quick-diff.is-left .taccount-quick-diff-label {
  left: 18px;
  text-align: left;
}
.勘定科目紹介t字勘定 .taccount-quick-diff.is-right .taccount-quick-diff-label {
  right: 34px;
  text-align: right;
}
.勘定科目紹介t字勘定 .taccount-balance-snapshot .taccount {
  --quick-away-height: var(--credit-height, 44px);
  --quick-home-height: var(--debit-height, 44px);
  --kanjo-home-extra-height: 0px;
  --taccount-diff-top: var(--balance-start, var(--quick-away-height, 44px));
  --taccount-diff-height: var(--balance-height, calc(var(--quick-home-height, 72px) - var(--quick-away-height, 44px)));
  --taccount-diff-brace-size: max(calc(var(--taccount-diff-height) + 12px), 44px);
}
.勘定科目紹介t字勘定 .taccount-balance-snapshot .taccount-table {
  min-height: max(var(--debit-height, 44px), var(--credit-height, 44px), 18px);
  overflow: visible;
}
.勘定科目紹介t字勘定 .taccount-balance-snapshot .taccount-side.is-left,
.勘定科目紹介t字勘定 .taccount-balance-snapshot .taccount-side.is-right {
  height: var(--side-height);
  overflow: hidden;
}
.勘定科目紹介t字勘定 .taccount-balance-snapshot .taccount-side.is-left {
  --side-height: var(--debit-height, 44px);
}
.勘定科目紹介t字勘定 .taccount-balance-snapshot .taccount-side.is-right {
  --side-height: var(--credit-height, 44px);
}
.勘定科目紹介t字勘定 .taccount-balance-snapshot .taccount-entry {
  flex: 1 1 0;
  min-height: 0;
  padding: 0 6px;
}
.勘定科目紹介t字勘定 .taccount-balance-snapshot .taccount-row {
  grid-template-columns: 2.6em 1fr auto;
  gap: 4px;
}
.勘定科目紹介t字勘定 .taccount-balance-snapshot .taccount-quick-diff-label {
  white-space: normal;
  width: 7.8em;
  line-height: 1.05;
  font-size: 0.68rem;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 4px;
  padding: 1px 3px;
}

@media (max-width: 640px) {
  .勘定科目紹介t字勘定 .taccount-preview-card {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
  }

  .勘定科目紹介t字勘定 .taccount-quick-grid {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .勘定科目紹介t字勘定 .taccount-quick-item {
    padding: 8px !important;
    border-radius: 8px !important;
  }

  .勘定科目紹介t字勘定 .taccount-quick-item .taccount-row {
    gap: 4px !important;
    padding-inline: 6px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定 {
    padding: 8px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定 .lesson-t-stages {
    grid-template-columns: minmax(430px, 1fr) 24px minmax(430px, 1fr) !important;
    gap: 8px !important;
    min-width: 900px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定 .lesson-t-stages.is-three {
    grid-template-columns: minmax(430px, 1fr) 24px minmax(430px, 1fr) 24px minmax(430px, 1fr) !important;
    min-width: 1370px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定 .lesson-t-arrow {
    font-size: 1rem !important;
    transform: none !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定 .lesson-t-stage {
    padding: 8px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定 .lesson-t-stage-title {
    margin-bottom: 8px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定 .lesson-t-grid {
    gap: 6px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定.is-next-period-flow .lesson-t-stages.is-three {
    grid-template-columns: minmax(500px, 1fr) 24px minmax(500px, 1fr) 24px minmax(500px, 1fr) !important;
    min-width: 1580px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定.is-next-period-flow .lesson-t-grid {
    gap: 8px !important;
  }
}

@container textbook (max-width: 640px) {
  .勘定科目紹介t字勘定 .taccount-preview-card {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
  }

  .勘定科目紹介t字勘定 .taccount-quick-grid {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .勘定科目紹介t字勘定 .taccount-quick-item {
    padding: 8px !important;
    border-radius: 8px !important;
  }

  .勘定科目紹介t字勘定 .taccount-quick-item .taccount-row {
    gap: 4px !important;
    padding-inline: 6px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定 {
    padding: 8px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定 .lesson-t-stages {
    grid-template-columns: minmax(430px, 1fr) 24px minmax(430px, 1fr) !important;
    gap: 8px !important;
    min-width: 900px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定 .lesson-t-stages.is-three {
    grid-template-columns: minmax(430px, 1fr) 24px minmax(430px, 1fr) 24px minmax(430px, 1fr) !important;
    min-width: 1370px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定 .lesson-t-arrow {
    font-size: 1rem !important;
    transform: none !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定 .lesson-t-stage {
    padding: 8px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定 .lesson-t-stage-title {
    margin-bottom: 8px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定 .lesson-t-grid {
    gap: 6px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定.is-next-period-flow .lesson-t-stages.is-three {
    grid-template-columns: minmax(500px, 1fr) 24px minmax(500px, 1fr) 24px minmax(500px, 1fr) !important;
    min-width: 1580px !important;
  }

  .lesson-t-board.勘定科目紹介t字勘定.is-next-period-flow .lesson-t-grid {
    gap: 8px !important;
  }
}
.comparison-table tr:nth-child(even) td {
  background-color: #F9FAFB;
}
/* ホバーで行を強調 */
.comparison-table tr:hover td {
  background-color: #EFF6FF;
}
/* 数値セル専用クラス（右寄せ＋等幅フォント）★NEW */
.td-num {
  text-align: right;
  font-family: 'Roboto Mono', monospace;
  letter-spacing: 0.05em;
}

/* --- Textbook Account (教科書風勘定) --- */
.textbook-account {
  --tb-line: #334155;
  --tb-muted: #64748B;
  --tb-row-height: 22px;
  font-family: "Noto Sans JP", "Inter", sans-serif;
  color: #0F172A;
  max-width: 640px;
  margin: 0 auto;
}
.textbook-account-title {
  text-align: center;
  font-weight: 800;
  margin-bottom: 6px;
}
.textbook-account-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 0.75rem;
  color: var(--tb-muted);
  margin-bottom: 4px;
}
.textbook-account-head-cell {
  text-align: center;
}
.textbook-account-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--tb-line);
  position: relative;
}
.textbook-account-body::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--tb-line);
  transform: translateX(-1px);
}
.textbook-account-side {
  padding: 6px 8px;
  display: grid;
  row-gap: 4px;
}
.textbook-account-row {
  display: grid;
  grid-template-columns: 44px 1fr 72px;
  column-gap: 6px;
  align-items: center;
  height: var(--tb-row-height);
  line-height: var(--tb-row-height);
  font-size: 0.8rem;
}
.textbook-account-row .amount {
  text-align: right;
  font-weight: 700;
}
.textbook-account-blank.is-slash {
  height: calc(var(--tb-row-height) * var(--tb-slash-rows, 2));
  position: relative;
}
.textbook-account-blank.is-slash::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-top: none;
  background: linear-gradient(to top right, transparent 49.2%, var(--tb-line) 49.6%, var(--tb-line) 50.4%, transparent 50.8%);
}
.textbook-account-sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.textbook-account-sum-side {
  padding: 0 8px 6px;
}
.textbook-account-sum-line {
  border-top: 1px solid var(--tb-line);
  margin-top: 6px;
}
.textbook-account-sum-row {
  display: grid;
  grid-template-columns: 44px 1fr 72px;
  column-gap: 6px;
  align-items: center;
  margin-top: 4px;
  font-size: 0.8rem;
}
.textbook-account-sum-row .amount {
  text-align: right;
  font-weight: 700;
}
.textbook-account-close {
  border-top: 3px double var(--tb-line);
  margin-top: 6px;
}
.textbook-account.is-no-total .textbook-account-sum-line,
.textbook-account.is-no-total .textbook-account-sum-row {
  display: none;
}
.textbook-account.is-no-close .textbook-account-close {
  display: none;
}
.textbook-account.is-no-slash .textbook-account-blank.is-slash {
  display: none;
}
.textbook-account.is-one-line .textbook-account-sum-line,
.textbook-account.is-one-line .textbook-account-sum-row {
  display: none;
}
.textbook-account.is-one-line .textbook-account-close {
  margin-top: 4px;
}
.textbook-account-row.is-blue { background: #DBEAFE; }
.textbook-account-row.is-yellow { background: #FEF3C7; }
.textbook-account-row.is-green { background: #DCFCE7; }
.textbook-account-row.is-gray { background: #F1F5F9; }


/* =========================================
   ⑥ 比較カード (compare-box) - Collapsible
   ========================================= */
details.compare-box {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column;
  height: auto;
  margin-bottom: 0;
}

summary.compare-header {
  padding: 10px 16px;
  font-weight: 800;
  font-size: 0.9rem;
  border-bottom: 1px solid transparent;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  transition: background 0.2s;
}

details.compare-box[open] summary.compare-header {
  border-bottom-color: #E5E7EB;
}

summary.compare-header::after {
  content: "▼";
  font-size: 0.75rem;
  margin-left: 10px;
  transition: transform 0.3s ease;
  opacity: 0.5;
}
details.compare-box:not([open]) summary.compare-header::after {
  transform: rotate(-90deg);
}

/* ★修正ポイント: 比較カード内部の上部余白を減らす (16px -> 10px) */
.compare-content { padding: 10px 16px 16px 16px; background: #fff; }

/* バリエーション（色） */
details.compare-box.gray summary.compare-header {
  background: var(--card-gray-bg);
  color: var(--card-gray);
  border-top: 4px solid var(--card-gray);
}
details.compare-box.red summary.compare-header {
  background: var(--card-red-bg);
  color: var(--card-red);
  border-top: 4px solid var(--card-red);
}
details.compare-box.green summary.compare-header {
  background: var(--card-green-bg);
  color: var(--card-green);
  border-top: 4px solid var(--card-green);
}
details.compare-box.yellow summary.compare-header {
  background: var(--card-yellow-bg);
  color: var(--card-yellow);
  border-top: 4px solid var(--card-yellow);
}


/* =========================================
   ⑦ 備考ボタン (Improved - Hanging Style)
   ========================================= */

/* ボタンを包むエリア（ヘッダーの下にぶら下がる） */
.notes-toggle-area {
  width: 100%;
  display: none;
  justify-content: flex-end;
  padding: 0 24px;
  background: transparent;
  pointer-events: none;
}

body.notes-closed .notes-toggle-area {
  display: flex;
  animation: slideDownFade 0.3s ease;
}

/* ボタン本体のデザイン */
.btn-notes-toggle {
  pointer-events: auto;
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 16px;
  cursor: pointer;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  transition: all 0.2s;
}

.btn-notes-toggle:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: translateY(-2px);
}

@keyframes slideDownFade {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* =========================================
   ⑧ スマホ対応（★重要修正ポイント）
   ========================================= */
@media (max-width: 768px) {

  body,
  .main-wrapper {
    height: 100dvh;
  }

  .main-wrapper {
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  :root {
    --sidebar-caption0-font-size: 0.98rem;
    --sidebar-category-font-size: 0.94rem;
    --sidebar-chapter-font-size: 0.86rem;
    --sidebar-unit-font-size: 0.82rem;
    --sidebar-submenu-font-size: 0.75rem;
  }

  .nav-item.is-home-link {
    min-height: 46px;
    padding: 9px 12px;
    font-size: 1.06rem;
  }

  html { font-size: 14px; }
  body { font-size: 13px; }

  /* 1. 左サイドバーをフローから除外する（重要！） */
  /* ★修正: PC用の「閉じた時 width: 0」を無効化し、幅を確保 */
  body.sidebar-closed nav.left-nav,
  nav.left-nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(86vw, 280px);
    transform: translateX(-100%); /* 普段は隠す */
    z-index: 1000;
    transition: transform 0.3s ease;
    border-right: 1px solid #000;
    padding: 0;
  }

  /* 左サイドバーを開いた時のスタイル（JSで制御想定） */
  body.sidebar-open nav.left-nav {
    transform: translateX(0);
  }
  body.sidebar-open .btn-sidebar-close {
    display: flex;
  }

  /* 2. メインラッパーを横スクロール可能に */
  .main-wrapper {
    width: 100%;
    overflow-x: auto;
  }

  /* 3. コンテンツコンテナの幅設定 */
  .content-flex-container {
    width: max-content; /* 中身に合わせて幅を広げる（備考がある時用） */
    min-width: 100%;
  }

  /* 4. メインカラム（教科書本文）の設定 */
  .center-column {
    /* 備考が開いている時：画面幅いっぱいに固定 */
    width: 100vw;
    min-width: 100vw;
    flex-shrink: 0;
    padding: 20px 16px calc(96px + env(safe-area-inset-bottom, 0px));
  }

  /* 5. 右サイドバー（備考） */
  aside.right-notes {
    width: 280px;
    min-width: 280px;
    flex-shrink: 0;
    height: auto;
    border-left: 1px solid #E5E7EB;
  }

  /* 6. ★重要：備考が閉じている時のリセット処理 */
  body.notes-closed .content-flex-container {
    width: 100%; /* コンテナを画面幅に合わせる */
  }

  body.notes-closed .center-column {
    /* ここがポイント：固定幅(100vw)を解除し、親に合わせる */
    width: 100%;
    min-width: 0;
  }

  /* 念のため非表示 */
  body.notes-closed aside.right-notes {
    display: none;
  }

  /* 7. 黒い背景（オーバーレイ）の追加 */
  body.sidebar-open::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 900;
    pointer-events: auto;
  }

  body.has-ai-chat .main-wrapper {
    overflow-x: hidden;
  }

  body.has-ai-chat .content-flex-container {
    width: 100%;
    min-width: 100%;
  }

  body.has-ai-chat .center-column {
    width: 100%;
    min-width: 0;
  }

  body.has-ai-chat aside.right-notes {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 1200;
    width: 100%;
    min-width: 0;
    height: min(74dvh, 620px);
    padding: 22px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -18px 46px rgba(15, 23, 42, 0.2);
    background: #fff;
    transform: translateY(0);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  body.has-ai-chat.notes-closed aside.right-notes {
    display: flex;
    width: 100%;
    padding: 22px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 18px));
  }

  body.has-ai-chat .effboki-ai-chat-panel {
    min-height: 0;
  }

  body.has-ai-chat .effboki-ai-resizer {
    display: none;
  }

  body.has-ai-chat .effboki-ai-sheet-resizer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    height: 24px;
    cursor: ns-resize;
    touch-action: none;
  }

  body.has-ai-chat .effboki-ai-sheet-resizer::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 54px;
    height: 5px;
    border-radius: 999px;
    background: #CBD5E1;
    transform: translateX(-50%);
  }

  body.has-ai-chat .effboki-ai-sheet-resizer:hover::before,
  body.has-ai-chat .effboki-ai-sheet-resizer:focus-visible::before,
  body.is-ai-sheet-resizing .effboki-ai-sheet-resizer::before {
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
  }

  body.has-ai-chat .effboki-ai-sheet-resizer:focus-visible {
    outline: none;
  }

  body.has-ai-chat .effboki-ai-messages {
    min-height: 0;
  }

  body.has-ai-chat .effboki-ai-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  body.has-ai-chat .effboki-ai-quick-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  body.has-ai-chat .effboki-ai-input {
    height: 42px;
    min-height: 42px;
    max-height: 128px;
    overflow-y: hidden;
    resize: none;
  }

  body.has-ai-chat .effboki-ai-send {
    height: 42px;
    width: auto;
    min-width: 58px;
    padding: 0 10px;
  }
}

/* Full-page mode uses the viewport, including the unit-title header area.
   The original textbook layout and chat width return when this class is removed. */
@media screen {
  body.has-ai-chat.is-ai-fullscreen { overflow: hidden; }
  body.has-ai-chat.is-ai-fullscreen aside.right-notes[data-active-panel="ai"] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    transition: none;
    overflow: hidden;
  }
  body.has-ai-chat.is-ai-fullscreen .effboki-ai-resizer,
  body.has-ai-chat.is-ai-fullscreen .effboki-ai-sheet-resizer { display: none; }
  body.has-ai-chat.is-ai-fullscreen .effboki-ai-notes-header { flex-shrink: 0; }
}

@media (max-width: 600px) {
  .center-column { padding: 16px 10px calc(96px + env(safe-area-inset-bottom, 0px)); }

  details.unit-card { margin-bottom: 12px; }
  summary.unit-summary { padding: 10px 12px; }
  .unit-content { padding: 8px 10px 16px; }

  .card-fill,
  .card-fill-dashed {
    padding: 14px 12px;
  }

  .card-border,
  .card-border-fill {
    padding: 12px 10px;
  }

  .layout-grid-2,
  .layout-grid-3 {
    gap: 10px;
    margin-bottom: 16px;
  }

  details.section-toggle { margin-top: 12px; }
  summary.section-summary { padding: 10px 12px; }
  .section-inner,
  .text-content { padding: 10px 10px 16px; }

  summary.compare-header { padding: 8px 12px; }
  .compare-content { padding: 8px 10px 12px; }
}

/* =========================================
   ⑨ 印刷設定（Print Layout）
   教科書として印刷・PDF化する際の最適化
   ========================================= */
@media print {
  /* 不要なUIを非表示 */
  nav.left-nav,
  .sticky-header,
  .btn-notes-toggle,
  .notes-toggle-area,
  .btn-hamburger,
  .btn-book-toggle {
    display: none !important;
  }

  /* レイアウトのリセット */
  body, html, .main-wrapper, .content-flex-container {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    font-size: 11pt; /* 印刷用の読みやすいサイズ */
    background: #fff !important;
  }

  .center-column {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 備考（右サイドバー）の扱い：印刷時は末尾にまとめるか非表示にする */
  aside.right-notes {
    display: none !important;
  }

  /* インク節約と視認性 */
  details {
    break-inside: avoid; /* 途中でページが切れないように */
  }

  details[open] summary {
    border-bottom: 1px solid #000;
  }

  /* リンクの色を黒にして下線を消す */
  a { text-decoration: none; color: #000; }

  /* 背景色の調整（薄い色は印刷で消えることがあるため枠線を強化） */
  .story-box, .formula-box, .unit-card, .section-toggle, .flow-step, .card-fill, .card-border {
    border: 1px solid #000 !important;
    background: none !important;
    color: #000 !important;
    box-shadow: none !important;
  }
}

/* =========================================
   ⑨ Public Pages (Home / Preview / Dictionary / Gate)
   ========================================= */
body.public-page {
  display: block;
  height: auto;
  overflow: auto;
  background: var(--bg-body);
}

[hidden] {
  display: none !important;
}

.public-shell {
  min-height: 100vh;
}

.public-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}

.public-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #0F172A;
  color: #E2E8F0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.2);
}

.public-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1rem;
  color: #F8FAFC;
  text-decoration: none;
}

.public-brand-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563EB, #60A5FA);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #fff;
}

.public-nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.public-nav-links a {
  color: #E2E8F0;
  text-decoration: none;
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.public-nav-disabled {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  color: #94A3B8;
  border: 1px dashed rgba(148, 163, 184, 0.55);
  background: rgba(148, 163, 184, 0.08);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: not-allowed;
  user-select: none;
  white-space: nowrap;
}

.public-nav-links a:hover {
  border-color: rgba(148, 163, 184, 0.5);
  background: rgba(148, 163, 184, 0.12);
}

.public-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 50%, #2563EB 100%);
  color: #F8FAFC;
  padding: 72px 0 48px;
}

.public-hero.dictionary-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 118px) 0 clamp(58px, 7vw, 86px);
  background:
    linear-gradient(90deg, rgba(8, 17, 36, 0.94) 0%, rgba(10, 28, 62, 0.86) 45%, rgba(16, 42, 88, 0.54) 100%),
    url("/img/generated/dictionary-hero.jpg") center / cover no-repeat,
    linear-gradient(135deg, #0F172A 0%, #1E3A8A 54%, #2563EB 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.public-hero.dictionary-hero::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    radial-gradient(720px 360px at 18% 28%, rgba(49, 110, 232, 0.2), transparent 72%),
    linear-gradient(180deg, rgba(7, 15, 31, 0.06) 0%, rgba(7, 15, 31, 0.38) 100%);
}

.dictionary-hero .public-hero-grid {
  position: relative;
  z-index: 1;
}

.dictionary-hero .public-tag {
  border-color: rgba(191, 219, 254, 0.52);
  background: rgba(255, 255, 255, 0.13);
  color: #DBEAFE;
}

.dictionary-hero h1 {
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.32);
}

.dictionary-hero-title-detail {
  display: block;
}

.dictionary-hero p {
  max-width: 62ch;
  color: #DBEAFE;
}

.dictionary-hero .public-hero-card {
  background: rgba(9, 25, 55, 0.68);
  border-color: rgba(191, 219, 254, 0.24);
}

.article-index-category {
  margin-top: 32px;
}

.article-index-category[id] {
  scroll-margin-top: 92px;
}

.article-index-category:first-of-type {
  margin-top: 22px;
}

.article-index-category .public-section-head {
  margin-bottom: 14px;
}

.article-index-category .public-section-head h2,
.article-index-category .public-section-head h3 {
  margin: 0 0 6px;
  color: #10203b;
  font-size: clamp(1.12rem, 2vw, 1.28rem);
}

.article-index-category .public-section-head p {
  margin: 0;
  max-width: 70ch;
  color: #475569;
}

.public-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  align-items: center;
}

.public-hero h1 {
  margin: 0 0 12px;
  font-size: 2.1rem;
  letter-spacing: 0.02em;
}

.public-hero p {
  margin: 0 0 16px;
  color: #E2E8F0;
}

.public-hero-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.2);
}

.public-hero-card strong,
.public-hero-card [data-membership-label],
.public-hero-card [data-membership-grades] {
  color: #FFFFFF;
}

.public-hero.article-hero {
  padding: clamp(34px, 5vw, 58px) 0;
  background: #ffffff;
  color: #10203b;
  border-bottom: 1px solid #dce6f4;
}

.article-hero .public-hero-grid {
  display: block;
  max-width: 1120px;
  text-align: center;
}

.article-hero .public-tag {
  margin: 0 auto 14px;
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.article-hero h1 {
  margin: 0 auto 14px;
  max-width: none;
  color: #10203b;
  text-align: center;
  font-size: clamp(2rem, 3.35vw, 2.72rem);
  line-height: 1.35;
}

.article-hero p {
  margin: 0 auto;
  max-width: 760px;
  color: #334155;
  text-align: center;
}

.method-article-page .article-hero p {
  margin-top: 20px;
  max-width: 860px;
  padding: 18px 22px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.1);
  color: #17324f;
  font-weight: 800;
  line-height: 1.85;
  text-align: left;
}

.public-section {
  padding: 48px 0;
}

.public-section.alt {
  background: #F1F5F9;
}

#boki-aru-aru {
  background: #EEF6FF;
}

#boki-benkyou-method {
  background: #F7F3FF;
}

.public-section h2 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  color: var(--text-main);
}

.public-section p {
  margin: 0 0 12px;
}

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

.article-index-list {
  grid-template-columns: 1fr;
  gap: 10px;
}

.article-index-card {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
}

.article-category-card,
.article-link-card {
  display: block;
  color: var(--text-main);
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.article-category-card {
  border-color: #CBD5E1;
  border-left: 4px solid var(--primary);
  border-radius: 6px;
  box-shadow: none;
}

.article-category-disclosure {
  overflow: hidden;
  border-color: #CBD5E1;
  border-left: 4px solid var(--primary);
  border-radius: 6px;
  box-shadow: none;
}

.article-category-disclosure[open] {
  border-color: #9CC4FF;
  box-shadow: 0 14px 24px rgba(37, 99, 235, 0.1);
}

.article-category-disclosure:focus-within {
  border-color: #9CC4FF;
  box-shadow: 0 14px 24px rgba(37, 99, 235, 0.1);
}

.article-category-summary {
  position: relative;
  padding-right: 190px;
  cursor: pointer;
}

.article-category-summary p {
  margin-bottom: 0;
}

.article-category-summary:hover h3,
.article-category-summary:focus-visible h3 {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.article-category-disclosure-toggle {
  position: absolute;
  top: 50%;
  right: 18px;
  color: var(--primary);
  font-size: 0.86rem;
  font-weight: 900;
  transform: translateY(-50%);
}

.article-category-disclosure-toggle::after {
  content: "論点一覧を開く ＋";
}

.article-category-disclosure[open] .article-category-disclosure-toggle::after {
  content: "論点一覧を閉じる −";
}

.article-category-disclosure-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #DBEAFE;
}

.article-topic-title-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.article-topic-title-card {
  display: flex;
  align-items: center;
  min-height: 64px;
}

.article-topic-title-card h3 {
  font-size: 1rem;
}

.boki-topic-section[id],
#boki-3kyuu,
#boki-benkyou-method {
  scroll-margin-top: 92px;
}

.article-category-card:hover,
.article-category-card:focus-visible,
.article-link-card:hover,
.article-link-card:focus-visible {
  border-color: #9cc4ff;
  box-shadow: 0 14px 24px rgba(37, 99, 235, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.article-index-card h3 {
  margin: 0;
  color: var(--primary);
  font-size: clamp(1rem, 2vw, 1.14rem);
  line-height: 1.55;
}

.article-index-card p {
  color: var(--text-body);
}

.article-trust-panel {
  padding: 18px 0 22px;
  background: #fff;
  border-top: 1px solid var(--border);
}

.article-trust-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.article-trust-list > div {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #F8FAFC;
}

.article-trust-list dt {
  margin: 0 0 4px;
  color: var(--text-sub);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.article-trust-list dd {
  margin: 0;
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.55;
}

.article-trust-note {
  margin: 10px 0 0;
  color: var(--text-sub);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.7;
}

.article-category-links .public-section-head {
  max-width: 760px;
}

.article-category-card:hover h3,
.article-category-card:focus-visible h3,
.article-link-card:hover h3,
.article-link-card:focus-visible h3 {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.article-index-more {
  display: grid;
  gap: 10px;
}

.article-index-more-toggle {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--primary-border);
  border-radius: 6px;
  background: #EFF6FF;
  color: var(--primary);
  font: inherit;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}

.article-index-more-toggle[hidden] {
  display: none;
}

.article-index-more-panel {
  height: 0;
  overflow: hidden;
  transition: height 260ms ease;
}

.article-index-more-panel[hidden] {
  display: none;
}

.article-index-more-list {
  display: grid;
  gap: 10px;
}

.article-index-close-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.article-index-close {
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

@media (max-width: 600px) {
  .article-category-summary {
    padding-right: 12px;
  }

  .article-category-disclosure-toggle {
    position: static;
    display: block;
    margin-top: 10px;
    transform: none;
  }

  .article-topic-title-grid {
    grid-template-columns: 1fr;
  }
}

.public-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}

.public-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--text-main);
}

.public-card p {
  margin: 0 0 10px;
  color: var(--text-body);
}

.article-shell {
  max-width: 940px;
  margin: 0 auto;
}

.article-lead-card,
.article-example,
.article-note,
.article-mistakes {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: clamp(18px, 3vw, 26px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.article-lead-card {
  border-left: 5px solid var(--primary);
}

.article-lead-card p,
.article-example p,
.article-note p,
.article-mistakes p {
  margin: 0 0 12px;
  color: var(--text-body);
}

.article-lead-card p:last-child,
.article-example p:last-child,
.article-note p:last-child,
.article-mistakes p:last-child {
  margin-bottom: 0;
}

.article-quote-card {
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid #d8e4f5;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
}

.article-quote-card p {
  margin: 0;
  color: #17324f;
  font-weight: 900;
  line-height: 1.85;
}

.article-quote-card p + p {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5edf8;
}

.article-answer-card h3 {
  margin-bottom: 8px;
  color: #475569;
  font-size: 0.98rem;
  font-weight: 800;
}

.article-answer-card p {
  margin: 0;
  color: #0f2f57;
  font-size: clamp(1.18rem, 2.3vw, 1.48rem);
  font-weight: 900;
  line-height: 1.75;
}

.article-section-title {
  margin: 0 0 14px;
  color: var(--text-main);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.45;
}

.learning-flow-compare {
  align-items: stretch;
}

.learning-flow-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.learning-flow-card h3 {
  margin: 0;
}

.learning-flow-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: learning-step;
}

.learning-flow-list li {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #dbe7f6;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: #17324f;
  font-weight: 900;
  line-height: 1.55;
}

.learning-flow-list li::before {
  counter-increment: learning-step;
  content: counter(learning-step);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 900;
  box-shadow: 0 8px 14px rgba(37, 99, 235, 0.22);
}

.learning-flow-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27px;
  bottom: -17px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg);
}

.learning-flow-card.is-general .learning-flow-list li::before {
  background: #64748b;
  box-shadow: 0 8px 14px rgba(100, 116, 139, 0.18);
}

.learning-flow-card.is-boki .learning-flow-list li:nth-child(3) {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.08);
}

.article-step-list {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
}

.article-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
}

.article-step-num {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #fff;
  font-weight: 800;
  line-height: 1;
}

.article-step strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-main);
}

.article-step p {
  margin: 0;
  color: var(--text-body);
}

.article-mini-table {
  width: 100%;
  margin: 14px 0 0;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
}

.article-mini-table th,
.article-mini-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  color: var(--text-body);
}

.article-mini-table th {
  background: #eef6ff;
  color: var(--text-main);
  font-weight: 800;
}

.article-mini-table tr:last-child td {
  border-bottom: 0;
}

.article-quote {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-left: 5px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  background: #fffbeb;
  color: #713f12;
  font-weight: 800;
}

.article-check-list {
  margin: 14px 0 0;
  padding-left: 1.2em;
  color: var(--text-body);
}

.article-check-list li {
  margin: 0 0 8px;
}

.article-journal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 14px;
  border: 1px solid #334155;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.article-journal > div {
  padding: 12px;
  border-bottom: 1px solid #cbd5e1;
  font-weight: 800;
  color: #0f172a;
}

.article-journal > div:nth-child(odd) {
  border-right: 1px solid #334155;
  background: #eff6ff;
}

.article-journal > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.article-textbook-section {
  background: var(--bg-body);
}

.article-textbook-section.article-textbook-body {
  width: min(940px, 100%);
  max-width: 100%;
  margin-top: clamp(24px, 3vw, 36px);
  margin-left: auto;
  margin-right: auto;
}

.article-textbook-preview {
  font-family: var(--font-body);
}

.article-textbook-preview .unit-title {
  line-height: 1.45;
}

.article-textbook-preview .unit-content {
  font-size: 0.98rem;
}

.article-textbook-preview .unit-icon {
  width: 42px;
}

.article-textbook-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 900;
  margin-bottom: 10px;
}

.article-textbook-quote {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-left: 5px solid var(--primary);
  border-radius: 6px;
  background: #fff;
  color: var(--text-main);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.85;
}

.article-textbook-quote p {
  margin: 0;
  background: linear-gradient(transparent 62%, var(--highlight-yellow) 62%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 2px;
}

.article-textbook-source-note {
  margin-top: 8px;
  color: var(--text-sub);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.6;
}

.article-textbook-excerpt-shell {
  border: 1px solid var(--unit-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
}

.article-textbook-excerpt {
  padding: clamp(16px, 3vw, 28px);
  background: #F8FAFC;
}

.article-textbook-excerpt > .unit-card,
.article-textbook-excerpt > .section {
  margin: 0;
}

.article-textbook-excerpt > .section {
  padding: 0;
}

.article-textbook-excerpt .container {
  width: 100%;
  max-width: none;
  margin: 0;
}

.article-textbook-excerpt .unit-card {
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.article-textbook-excerpt .statement-grid,
.article-textbook-excerpt .flow-statement-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 18px 0;
}

.article-textbook-excerpt .statement-card,
.article-textbook-excerpt .flow-statement-card {
  width: min(340px, 100%);
  overflow: hidden;
  border: 2px solid #334155;
  border-radius: 8px;
  background: #fff;
}

.article-textbook-excerpt .statement-title,
.article-textbook-excerpt .flow-statement-header {
  padding: 8px;
  border-bottom: 2px solid #334155;
  background: #F1F5F9;
  color: #334155;
  text-align: center;
  font-weight: 900;
}

.article-textbook-excerpt .statement-body,
.article-textbook-excerpt .flow-statement-body {
  display: flex;
  min-height: 210px;
}

.article-textbook-excerpt .statement-col,
.article-textbook-excerpt .flow-statement-col {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-auto-rows: 1fr;
  border-right: 2px solid #334155;
}

.article-textbook-excerpt .statement-col-right,
.article-textbook-excerpt .statement-col:last-child,
.article-textbook-excerpt .flow-statement-col:last-child {
  border-right: 0;
}

.article-textbook-excerpt .statement-group,
.article-textbook-excerpt .flow-statement-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
}

.article-textbook-excerpt .statement-group + .statement-group,
.article-textbook-excerpt .flow-statement-group + .flow-statement-group {
  border-top: 1px solid #CBD5E1;
}

.article-textbook-excerpt .statement-group.is-asset,
.article-textbook-excerpt .statement-group.is-expense,
.article-textbook-excerpt .flow-statement-group.is-asset,
.article-textbook-excerpt .flow-statement-group.is-expense {
  background: #E8F1FF;
}

.article-textbook-excerpt .statement-group.is-liability,
.article-textbook-excerpt .flow-statement-group.is-liability {
  background: #FEEDEE;
}

.article-textbook-excerpt .statement-group.is-equity,
.article-textbook-excerpt .statement-group.is-revenue,
.article-textbook-excerpt .flow-statement-group.is-equity,
.article-textbook-excerpt .flow-statement-group.is-revenue {
  background: #FFF6DA;
}

.article-textbook-excerpt .statement-group.is-profit,
.article-textbook-excerpt .flow-statement-group.is-profit {
  background: #E5FBEF;
}

.article-textbook-excerpt .statement-col-title,
.article-textbook-excerpt .flow-statement-section-title {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 900;
}

.article-textbook-excerpt .statement-col-title.asset,
.article-textbook-excerpt .statement-col-title.expense,
.article-textbook-excerpt .flow-statement-section-title.is-asset,
.article-textbook-excerpt .flow-statement-section-title.is-expense {
  background: #DBEAFE;
  color: #1E40AF;
}

.article-textbook-excerpt .statement-col-title.liability,
.article-textbook-excerpt .flow-statement-section-title.is-liability {
  background: #FEE2E2;
  color: #991B1B;
}

.article-textbook-excerpt .statement-col-title.equity,
.article-textbook-excerpt .statement-col-title.revenue,
.article-textbook-excerpt .flow-statement-section-title.is-equity,
.article-textbook-excerpt .flow-statement-section-title.is-revenue {
  background: #FEF3C7;
  color: #92400E;
}

.article-textbook-excerpt .statement-col-title.profit,
.article-textbook-excerpt .flow-statement-section-title.is-profit {
  background: #D1FAE5;
  color: #047857;
}

.article-textbook-excerpt .statement-list,
.article-textbook-excerpt .flow-statement-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.article-textbook-excerpt .statement-list li,
.article-textbook-excerpt .flow-statement-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #334155;
  font-size: 0.84rem;
}

.article-textbook-excerpt .statement-list .amount,
.article-textbook-excerpt .flow-statement-list .amount {
  color: #0F172A;
  font-weight: 900;
}

.article-textbook-excerpt .statement-ellipsis,
.article-textbook-excerpt .flow-statement-dots {
  justify-content: center;
  color: #94A3B8;
  font-weight: 900;
  letter-spacing: 2px;
}

.article-textbook-excerpt .statement-profit-box,
.article-textbook-excerpt .flow-statement-profit {
  margin-top: 8px;
  padding: 5px 8px;
  border: 1px dashed #059669;
  border-radius: 6px;
  background: #ECFDF3;
  color: #047857;
  text-align: center;
  font-weight: 900;
}

.article-textbook-excerpt .element-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.article-textbook-excerpt .element-card {
  --element-bg: #DBEAFE;
  --element-accent: #1E40AF;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #fff;
}

.article-textbook-excerpt .element-card.is-liability { --element-bg: #FEE2E2; --element-accent: #991B1B; }
.article-textbook-excerpt .element-card.is-equity,
.article-textbook-excerpt .element-card.is-revenue { --element-bg: #FEF3C7; --element-accent: #92400E; }
.article-textbook-excerpt .element-card.is-expense { --element-bg: #DBEAFE; --element-accent: #1E40AF; }

.article-textbook-excerpt .element-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.article-textbook-excerpt .element-title,
.article-textbook-excerpt .element-taccount-name {
  color: #0F172A;
  font-weight: 900;
}

.article-textbook-excerpt .element-badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--element-bg);
  color: var(--element-accent);
  font-size: 0.72rem;
  font-weight: 900;
}

.article-textbook-excerpt .element-taccount-body {
  position: relative;
  display: flex;
}

.article-textbook-excerpt .element-taccount-body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #334155;
  transform: translateX(-1px);
}

.article-textbook-excerpt .element-taccount-side {
  flex: 1;
  border-top: 2px solid #334155;
  border-bottom: 2px solid #334155;
  background: #fff;
}

.article-textbook-excerpt .element-taccount-side.is-left { border-left: 2px solid #334155; }
.article-textbook-excerpt .element-taccount-side.is-right { border-right: 2px solid #334155; }
.article-textbook-excerpt .element-taccount-side.is-home { background: var(--element-bg); }

.article-textbook-excerpt .element-taccount-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 6px;
  border-top: 1px solid #334155;
  color: #334155;
  font-size: 0.74rem;
  font-weight: 800;
}

.article-textbook-excerpt .element-taccount-cell:first-child {
  border-top: 0;
}

.article-textbook-excerpt .element-taccount-row,
.article-textbook-excerpt .element-taccount-totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  width: 100%;
}

.article-textbook-excerpt .element-note,
.article-textbook-excerpt .note-desc {
  color: #475569;
  font-size: 0.84rem;
  line-height: 1.55;
}

.article-textbook-excerpt .bad-debts-keyline,
.article-textbook-excerpt .grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.article-textbook-excerpt .bad-debts-keyline-item,
.article-textbook-excerpt .card,
.article-textbook-excerpt .narrative-card,
.article-textbook-excerpt .problem-feature-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.article-textbook-excerpt .bad-debts-keyline-item strong,
.article-textbook-excerpt .card h3,
.article-textbook-excerpt .problem-feature-card h3 {
  display: block;
  margin: 0 0 8px;
  color: var(--primary);
  font-weight: 900;
}

.article-textbook-excerpt .problem-feature-grid {
  display: grid;
  gap: 14px;
}

.article-textbook-excerpt .problem-feature-card summary {
  display: grid;
  gap: 6px;
  cursor: pointer;
}

.article-textbook-excerpt .problem-feature-no,
.article-textbook-excerpt .kicker {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 900;
}

.article-textbook-excerpt .problem-feature-section {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #F8FAFC;
}

.article-textbook-excerpt .narrative-highlight {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 5px solid var(--primary);
  border-radius: 8px;
  background: var(--primary-light);
}

.article-textbook-excerpt .prompt-list,
.article-textbook-excerpt .list {
  margin: 10px 0 0;
  padding-left: 1.2em;
}

.article-continuation-card {
  margin: 22px 0 0;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}

.article-faq-list {
  display: grid;
  gap: 10px;
}

.article-related-list {
  display: grid;
  gap: 10px;
}

.article-faq-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
}

.article-related-item {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-main);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
}

.article-faq-item summary {
  padding: 14px 16px;
  color: var(--text-main);
  font-weight: 900;
}

.article-faq-item p {
  margin: 0;
  padding: 0 16px 16px;
  color: var(--text-body);
  font-weight: 800;
  line-height: 1.8;
}

.textbook-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.textbook-preview-grid.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.textbook-preview-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 14px;
}

.textbook-preview-panel.is-primary {
  background: var(--primary-light);
  border-color: var(--primary-border);
}

.textbook-preview-panel.is-green {
  background: var(--card-green-bg);
  border-color: var(--card-green-border);
}

.textbook-preview-panel.is-orange {
  background: var(--hint-bg);
  border-color: var(--hint-border);
}

.textbook-preview-panel.is-red {
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

.textbook-preview-panel-title {
  display: block;
  margin-bottom: 8px;
  color: var(--text-main);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.5;
}

.textbook-preview-panel p {
  margin: 0;
  color: var(--text-body);
  font-weight: 700;
  line-height: 1.75;
}

.textbook-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  margin: 16px 0;
}

.textbook-flow-card {
  border: 2px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 14px;
  text-align: center;
  font-weight: 900;
  line-height: 1.6;
}

.textbook-flow-card.is-primary {
  border-color: var(--primary-border);
  background: var(--primary-light);
  color: var(--primary);
}

.textbook-flow-card.is-green {
  border-color: var(--card-green-border);
  background: var(--card-green-bg);
  color: var(--def-text);
}

.textbook-flow-card.is-orange {
  border-color: var(--hint-border);
  background: var(--hint-bg);
  color: #B45309;
}

.textbook-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  font-size: 1.6rem;
  font-weight: 900;
}

.textbook-home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.textbook-home-sheet {
  border: 2px solid #334155;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.textbook-home-title {
  padding: 8px;
  background: #F1F5F9;
  border-bottom: 2px solid #334155;
  color: #334155;
  font-weight: 900;
  text-align: center;
}

.textbook-home-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 150px;
}

.textbook-home-side + .textbook-home-side {
  border-left: 2px solid #334155;
}

.textbook-home-side-label {
  padding: 6px 8px;
  border-bottom: 1px solid #CBD5E1;
  background: #F8FAFC;
  color: #475569;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 900;
}

.textbook-home-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 10px 8px;
  text-align: center;
  font-weight: 900;
  line-height: 1.35;
}

.textbook-home-cell + .textbook-home-cell {
  border-top: 1px solid #CBD5E1;
}

.textbook-home-cell.is-blue {
  background: #DBEAFE;
  color: #1E40AF;
}

.textbook-home-cell.is-red {
  background: #FEE2E2;
  color: #991B1B;
}

.textbook-home-cell.is-yellow {
  background: #FEF3C7;
  color: #92400E;
}

.textbook-home-cell.is-green {
  background: #D1FAE5;
  color: #047857;
}

.textbook-statement {
  border: 2px solid #334155;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  margin: 16px auto;
  max-width: 420px;
}

.textbook-statement-title {
  padding: 8px;
  border-bottom: 2px solid #334155;
  background: #F1F5F9;
  color: #334155;
  text-align: center;
  font-weight: 900;
}

.textbook-statement-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 150px;
}

.textbook-statement-col + .textbook-statement-col {
  border-left: 2px solid #334155;
}

.textbook-statement-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  text-align: center;
  font-weight: 900;
  line-height: 1.35;
}

.textbook-statement-cell + .textbook-statement-cell {
  border-top: 1px solid #CBD5E1;
}

.textbook-fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 180px;
  vertical-align: middle;
}

.textbook-fraction-top,
.textbook-fraction-bottom {
  display: block;
  padding: 2px 10px;
  font-weight: 900;
}

.textbook-fraction-top {
  border-bottom: 2px solid currentColor;
}

.textbook-table-wrap {
  overflow-x: auto;
  margin: 14px 0;
}

.textbook-note-title {
  display: block;
  margin-bottom: 8px;
  color: var(--text-main);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .textbook-preview-grid,
  .textbook-preview-grid.is-three,
  .textbook-home-grid {
    grid-template-columns: 1fr;
  }

  .textbook-flow {
    grid-template-columns: 1fr;
  }

  .textbook-flow-arrow {
    transform: rotate(90deg);
    min-height: 28px;
  }

}

.public-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1E40AF;
  background: #DBEAFE;
  border-radius: 999px;
  padding: 4px 10px;
}

.public-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #065F46;
  background: #D1FAE5;
  border-radius: 999px;
  padding: 4px 8px;
}

.public-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.public-btn.primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 16px rgba(37, 99, 235, 0.25);
}

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

.public-btn.is-disabled,
.public-btn[aria-disabled="true"] {
  background: #CBD5E1 !important;
  border-color: #CBD5E1 !important;
  color: #64748B !important;
  box-shadow: none !important;
  cursor: not-allowed;
  pointer-events: none;
}

.public-btn.is-disabled:hover,
.public-btn[aria-disabled="true"]:hover {
  filter: none !important;
}

.public-btn.outline {
  border-color: var(--primary);
  color: var(--primary);
  background: #fff;
}

.public-btn.ghost {
  border-color: rgba(148, 163, 184, 0.5);
  color: #334155;
  background: transparent;
}

.public-btn + .public-btn {
  margin-left: 8px;
}

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

.public-list li {
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text-body);
}

.public-cta {
  padding: 32px 0 64px;
}

.public-footer {
  padding: 24px 0 40px;
  color: #64748B;
  font-size: 0.85rem;
  text-align: center;
}

.public-inline-note {
  font-size: 0.85rem;
  color: #64748B;
}

@media (max-width: 860px) {
  .public-container {
    width: min(1100px, calc(100% - 24px));
  }

  .public-nav-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 0 12px;
  }

  .public-brand {
    justify-content: center;
  }

  .public-nav-links {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    margin: 0 -2px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .public-nav-links::-webkit-scrollbar {
    height: 5px;
  }

  .public-nav-links::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.5);
    border-radius: 999px;
  }

  .public-nav-links a {
    white-space: nowrap;
    flex: 0 0 auto;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(148, 163, 184, 0.46);
    background: rgba(148, 163, 184, 0.16);
  }

  .public-hero {
    padding: 54px 0 38px;
  }

  .public-hero-grid {
    gap: 16px;
  }

  .article-trust-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .public-hero {
    padding: 44px 0 30px;
  }

  .public-hero h1 {
    font-size: clamp(1.5rem, 8vw, 1.88rem);
    line-height: 1.42;
  }

  .public-hero-card,
  .public-card {
    padding: 12px;
  }

  .article-index-card,
  .article-step,
  .article-quote,
  .article-textbook-quote,
  .article-continuation-card,
  .article-related-item,
  .textbook-preview-panel,
  .textbook-flow-card {
    padding-left: 12px;
    padding-right: 12px;
  }

  .article-faq-item summary,
  .article-faq-item p {
    padding-left: 12px;
    padding-right: 12px;
  }

  .article-textbook-excerpt {
    padding: 12px;
  }

  .article-textbook-excerpt .statement-group,
  .article-textbook-excerpt .flow-statement-group,
  .article-textbook-excerpt .problem-feature-section {
    padding-left: 8px;
    padding-right: 8px;
  }

  .article-textbook-excerpt .bad-debts-keyline-item,
  .article-textbook-excerpt .card,
  .article-textbook-excerpt .narrative-card,
  .article-textbook-excerpt .problem-feature-card,
  .article-textbook-excerpt .narrative-highlight {
    padding-left: 12px;
    padding-right: 12px;
  }

  .article-trust-list {
    grid-template-columns: 1fr;
  }

  .public-section {
    padding: 34px 0;
  }

  .public-cta {
    padding: 28px 0 44px;
  }

  .public-btn {
    width: 100%;
  }

  .public-btn + .public-btn {
    margin-left: 0;
    margin-top: 8px;
  }
}

/* AI composer, 2026-09-15: attachments are edited in a dialog and kept in a
   compact tray. Scope these controls to chat; lesson/article layouts stay local. */
.effboki-ai-message-viewport { position: relative; display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }
.effboki-ai-message-viewport > .effboki-ai-messages { min-width: 0; }
body.has-ai-chat .effboki-ai-form { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
body.has-ai-chat .effboki-ai-form .effboki-ai-image-mode-toggle { width: auto; min-height: 44px; padding: 9px 12px; white-space: nowrap; font-size: 14px; }
body.has-ai-chat .effboki-ai-form .effboki-ai-input { min-width: 0; font-size: 16px; min-height: 44px; }
body.has-ai-chat .effboki-ai-form .effboki-ai-send { min-height: 44px; height: 44px; white-space: nowrap; }
.effboki-ai-new-answer { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2; border: 1px solid var(--ai-accent-border); border-radius: 24px; padding: 10px 18px; background: #fff; color: var(--ai-accent-strong); box-shadow: 0 3px 16px #28204a22; font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.effboki-ai-new-answer[hidden], .effboki-ai-attachment-tray[hidden], .effboki-ai-composer-status[hidden], .effboki-ai-image-status[hidden] { display: none !important; }
.effboki-ai-attachment-tray { display: flex; flex: 0 0 auto; gap: 8px; min-width: 0; overflow-x: auto; padding: 3px 2px 5px; }
.effboki-ai-attachment-thumb { position: relative; flex: 0 0 84px; border: 1px solid var(--ai-accent-border); border-radius: 10px; background: #fff; padding: 4px; }
.effboki-ai-attachment-preview { display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; padding: 0; background: #fff; border: 0; border-radius: 6px; color: var(--text-main); font: inherit; cursor: zoom-in; }
.effboki-ai-attachment-preview img { display: block; width: 100%; height: 124px; object-fit: contain; background: #f5f6fa; border-radius: 6px; }
.effboki-ai-attachment-preview span { padding: 6px; font-size: 13px; font-weight: 700; }
.effboki-ai-attachment-thumb .effboki-ai-attachment-preview img { height: 48px; }
.effboki-ai-attachment-thumb .effboki-ai-attachment-preview span { padding: 3px 0 0; font-size: 12px; text-align: left; }
.effboki-ai-attachment-remove { position: absolute; right: 3px; top: 3px; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid #fff; border-radius: 50%; padding: 0; color: #fff; background: #51466d; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.effboki-ai-attachment-remove:hover { background: #37284f; }
.effboki-ai-attachment-remove:disabled { opacity: .45; cursor: default; }
.effboki-ai-attachment-thumb .effboki-ai-attachment-remove { right: -2px; top: -2px; width: 28px; height: 28px; font-size: 18px; }
.effboki-ai-composer-status { flex: 0 0 auto; color: var(--text-sub); font-size: 12px; line-height: 1.45; }
.effboki-ai-composer-status.is-error { color: #a22c22; }
.effboki-ai-composer-status.is-busy::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border: 2px solid #d7d1ef; border-top-color: var(--ai-accent); border-radius: 50%; animation: ai-composer-spin 1s linear infinite; }
@keyframes ai-composer-spin { to { transform: rotate(360deg); } }
.effboki-ai-attachment-dialog { position: fixed; inset: auto 16px 80px auto; margin: 0; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: min(720px, 78dvh); border: 1px solid var(--ai-accent-border); border-radius: 18px; color: var(--text-main); background: #fff; box-shadow: 0 12px 60px #201a4433; overflow: hidden; }
.effboki-ai-attachment-dialog[open] { display: flex; flex-direction: column; }
.effboki-ai-attachment-dialog::backdrop { background: #15122538; }
.effboki-ai-attachment-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #eceaf4; flex-shrink: 0; }
.effboki-ai-attachment-header strong { font-size: 18px; }
.effboki-ai-attachment-close { border: 0; border-radius: 8px; background: #f3f1fa; color: var(--ai-accent-strong); font: inherit; font-size: 14px; padding: 10px 14px; cursor: pointer; }
.effboki-ai-attachment-body { padding: 18px 20px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.effboki-ai-attachment-dialog .effboki-ai-image-hint { font-size: 13px; line-height: 1.7; margin: 0 0 14px; }
.effboki-ai-attachment-dialog .effboki-ai-image-picker { padding: 14px; border: 1px dashed #c0b9da; border-radius: 12px; background: #faf9fd; }
.effboki-ai-attachment-dialog .effboki-ai-image-picker + .effboki-ai-image-picker { margin-top: 16px; }
.effboki-ai-attachment-dialog .effboki-ai-image-picker + .effboki-ai-image-hint { margin-top: 16px; margin-bottom: 0; }
.effboki-ai-attachment-dialog .effboki-ai-image-picker.is-dragging { background: #ebe6ff; border-color: var(--ai-accent); }
.effboki-ai-attachment-dialog .effboki-ai-image-picker-title { font-size: 15px; }
.effboki-ai-attachment-dialog .effboki-ai-image-count { font-size: 12px; }
.effboki-ai-attachment-dialog .effboki-ai-image-picker-controls { flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.effboki-ai-attachment-dialog .effboki-ai-image-choose { font-size: 14px; min-height: 44px; padding: 8px 14px; }
.effboki-ai-attachment-dialog .effboki-ai-image-picker-description { flex: 1 1 200px; font-size: 13px; line-height: 1.6; }
.effboki-ai-attachment-dialog .effboki-ai-image-previews { gap: 10px; margin-top: 14px; }
.effboki-ai-attachment-item { position: relative; min-width: 0; padding: 6px; border: 1px solid #dfdbe9; border-radius: 10px; background: #fff; }
.effboki-ai-attachment-actions { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.effboki-ai-attachment-actions button { width: 36px; min-height: 32px; border: 1px solid #dfdbe9; background: #f8f7fc; border-radius: 6px; padding: 4px; font: inherit; font-size: 16px; color: #4e426e; cursor: pointer; }
.effboki-ai-attachment-actions button:disabled { opacity: .45; cursor: default; }
.effboki-ai-attachment-dialog .effboki-ai-image-status { font-size: 13px; line-height: 1.6; }
.effboki-ai-attachment-footer { display: flex; flex-shrink: 0; align-items: center; justify-content: flex-end; gap: 12px; border-top: 1px solid #eceaf4; padding: 14px 20px; }
.effboki-ai-attachment-dialog button:focus-visible, .effboki-ai-attachment-tray button:focus-visible, .effboki-ai-new-answer:focus-visible, .effboki-ai-attachment-dialog .effboki-ai-image-choose:focus-within { outline: 3px solid #aaa0df; outline-offset: 2px; }
@media (max-width: 768px) {
  .effboki-ai-attachment-dialog { inset: auto 0 0 !important; width: 100% !important; max-width: none; max-height: 88dvh !important; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .effboki-ai-attachment-body { padding: 14px; }
  .effboki-ai-attachment-header, .effboki-ai-attachment-footer { padding: 12px 14px; }
  .effboki-ai-attachment-dialog .effboki-ai-image-previews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .effboki-ai-attachment-actions button { width: 40px; min-height: 40px; }
  .effboki-ai-attachment-dialog .effboki-ai-attachment-remove { width: 36px; height: 36px; }
  .effboki-ai-attachment-dialog .effboki-ai-attachment-preview img { height: 104px; }
  body.has-ai-chat .effboki-ai-form { gap: 6px; }
  body.has-ai-chat .effboki-ai-form .effboki-ai-image-mode-toggle { padding: 8px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .effboki-ai-composer-status.is-busy::before { animation: none; }
}