/* 教育ツール一覧（フラット・不透明・1px境界・角丸6px）
   学校らしさ＝黒板のヒーロー（静的）・チョーク受け・方眼ノート風の地。色は青系。 */
:root {
  --ed-bg: #f4f7fb;
  --ed-grid: #e6ecf5;
  --ed-surface: #ffffff;
  --ed-border: #d5deeb;
  --ed-text: #0f1b2d;
  --ed-sub: #54637c;
  --ed-accent: #1d4ed8;
  --ed-accent-bg: #e8f0ff;
  --ed-on-accent: #ffffff;
  --ed-hit: #1d4ed8;
  --ed-range: #a9c3f3;
  --ed-off: #e1e8f2;
  --ed-board: linear-gradient(160deg, #123a7a 0%, #0d2a5c 100%);
  --ed-chalk: #f3f7ff;
  --ed-chalk-yellow: #ffe08a;
  --ed-radius: 6px;
  --ed-bolt: #d98a0b;
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  /* 教科の色（アイコン・見出しの下線用） */
  --sc-math:#2f6fdb; --sc-japanese:#cf4b2c; --sc-science:#0f9170; --sc-social:#a8760a; --sc-english:#0b86a8; --sc-music:#c43d7e;
  --sc-art:#e07b12; --sc-pe:#d23a3a; --sc-home:#7a8a1e; --sc-life:#3f9b3f; --sc-info:#4b5a73; --sc-common:#5b6b86;
  /* 学年の色（小1-2 / 小3-4 / 小5-6 / 中 / 高） */
  --gb-1:#0b7d6e; --gb-2:#2b6fc4; --gb-3:#1d4ed8; --gb-4:#b45309; --gb-5:#b42343;
  --gb-on:#ffffff;
}
html[data-theme="dark"] {
  --ed-bg: #0d1420;
  --ed-grid: #131c2b;
  --ed-surface: #152033;
  --ed-border: #2a3a54;
  --ed-text: #e8eefb;
  --ed-sub: #9aabc7;
  --ed-accent: #7fb0ff;
  --ed-accent-bg: #1b2d4d;
  --ed-on-accent: #0b1424;
  --ed-hit: #7fb0ff;
  --ed-range: #38568a;
  --ed-off: #25334c;
  --ed-board: linear-gradient(160deg, #0f2a55 0%, #081833 100%);
  --ed-bolt: #ffc14d;
  --sc-math:#7fa8ff; --sc-japanese:#ff9a7d; --sc-science:#5fd6b0; --sc-social:#e6bb5a; --sc-english:#5cc7e6; --sc-music:#f08ab8;
  --sc-art:#ffb35c; --sc-pe:#ff8f8f; --sc-home:#bfd05a; --sc-life:#8fd88f; --sc-info:#a9b8d0; --sc-common:#a9b8d0;
  --gb-1:#4fd1bd; --gb-2:#6fb0ff; --gb-3:#8aa8ff; --gb-4:#ffb15c; --gb-5:#ff8da1;
  --gb-on:#0b1424;
}
[data-sub="math"]{--sc:var(--sc-math)} [data-sub="japanese"]{--sc:var(--sc-japanese)} [data-sub="science"]{--sc:var(--sc-science)}
[data-sub="social"]{--sc:var(--sc-social)} [data-sub="english"]{--sc:var(--sc-english)} [data-sub="music"]{--sc:var(--sc-music)}
[data-sub="art"]{--sc:var(--sc-art)} [data-sub="pe"]{--sc:var(--sc-pe)} [data-sub="home"]{--sc:var(--sc-home)}
[data-sub="life"]{--sc:var(--sc-life)} [data-sub="info"]{--sc:var(--sc-info)} [data-sub="common"]{--sc:var(--sc-common)}
[data-band="1"]{--gb:var(--gb-1)} [data-band="2"]{--gb:var(--gb-2)} [data-band="3"]{--gb:var(--gb-3)}
[data-band="4"]{--gb:var(--gb-4)} [data-band="5"]{--gb:var(--gb-5)}

body.ed {
  background-color: var(--ed-bg);
  background-image:
    linear-gradient(var(--ed-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ed-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ed-text);
  font-size: 15px;
  line-height: 1.7;
}
body.ed .tool-header { background: var(--ed-surface); border-bottom: 1px solid var(--ed-border); }
body.ed .ed-about i { color: var(--ed-accent); margin-right: 0.45rem; }
body.ed .backmenu-button:hover { border-color: var(--ed-accent); color: var(--ed-accent); }
.ed-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

/* 黒板のヒーロー */
.ed-hero { background: var(--ed-board); color: var(--ed-chalk); position: relative; overflow: hidden; }
.ed-board { position: relative; padding-top: 1.5rem; padding-bottom: 2.4rem; }
.ed-crumb { font-size: 0.8rem; opacity: 0.75; margin-bottom: 1rem; }
.ed-crumb a { color: inherit; text-decoration: none; }
.ed-crumb a:hover { text-decoration: underline; }
.ed-crumb span { margin: 0 0.45em; }
.ed-hero h1 {
  position: relative; display: inline-block; margin: 0; color: var(--ed-chalk);
  font-size: 2.3rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.3;
}
.ed-hero h1::after {
  content: ""; display: block; height: 4px; margin-top: 0.25rem; border-radius: 2px;
  background: var(--ed-chalk-yellow); opacity: 0.9; transform: rotate(-0.6deg);
}
.ed-lead { margin-top: 0.8rem; font-size: 0.97rem; opacity: 0.92; max-width: 36em; }

/* チョークの落書き（飾り） */
.ed-doodles { position: absolute; top: 0; right: 1.5rem; bottom: 0; width: 46%; color: var(--ed-chalk); pointer-events: none; }
.ed-doodles .d { position: absolute; opacity: 0.5; font-weight: 500; line-height: 1; white-space: nowrap; }
.d1 { top: 22%; left: 6%; font-size: 1.5rem; transform: rotate(-4deg); }
.d2 { top: 12%; left: 62%; font-size: 1.6rem; transform: rotate(5deg); }
.d3 { top: 58%; left: 38%; font-size: 1.9rem; letter-spacing: 0.12em; transform: rotate(-3deg); opacity: 0.4; }
.d4 { top: 50%; left: 78%; font-size: 2.6rem; transform: rotate(8deg); }
.d5 { top: 62%; left: 6%; font-size: 1.7rem; transform: rotate(3deg); opacity: 0.38; }
.d6 { top: 8%; left: 32%; font-size: 1.3rem; transform: rotate(2deg); opacity: 0.38; }
svg.d7 { top: 30%; left: 44%; width: 68px; transform: rotate(-6deg); }
svg.d8 { top: 4%; left: 86%; width: 52px; opacity: 0.4; }

/* チョーク受け */
.ed-pieces { position: absolute; right: 2.5rem; bottom: 0; display: flex; align-items: flex-end; gap: 8px; }
.ed-pieces i { display: block; border-radius: 2px; }
.ed-pieces .chalk { width: 30px; height: 8px; background: #f3f7ff; transform: rotate(-3deg); }
.ed-pieces .chalk.y { width: 24px; background: var(--ed-chalk-yellow); transform: rotate(2deg); }
.ed-pieces .eraser { width: 44px; height: 14px; background: linear-gradient(#e9eef8 0 55%, #2b3b5c 55%); border-radius: 2px; }
.ed-tray { height: 10px; background: #b98a54; border-top: 2px solid #d6b07c; }
html[data-theme="dark"] .ed-tray { background: #7d5c38; border-top-color: #98774d; }

/* 2カラム */
.ed-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.6rem; align-items: start; padding-top: 1.8rem; padding-bottom: 3rem; flex: 1; }
.ed-toggle { display: none; }

/* 絞り込みパネル */
.ed-side { position: sticky; top: 1rem; background: var(--ed-surface); border: 1px solid var(--ed-border); border-radius: var(--ed-radius); padding: 0 1rem 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.ed-block { padding: 1rem 0; border-bottom: 1px solid var(--ed-border); }
.ed-block:last-of-type { border-bottom: 0; padding-bottom: 0.2rem; }
.ed-block h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 700; margin-bottom: 0.7rem; }
.ed-block h2 b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: var(--ed-accent); color: var(--ed-on-accent); font-size: 0.75rem; }
.ed-block h2 small { margin-left: auto; font-weight: 400; font-size: 0.7rem; color: var(--ed-sub); }

/* 学年 */
.ed-gl { display: grid; grid-template-columns: 3.4em 1fr; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.ed-gl:last-child { margin-bottom: 0; }
.ed-gl-name { font-size: 0.78rem; color: var(--ed-sub); }
.ed-gl-btns { display: flex; gap: 4px; }
.ed-g {
  flex: 1; min-width: 0; height: 34px;
  border: 1px solid var(--ed-border); border-radius: var(--ed-radius);
  background: var(--ed-surface); color: var(--ed-text);
  font-family: inherit; font-size: 0.88rem; font-weight: 500; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.ed-g { box-shadow: inset 0 -3px 0 var(--gb); }
.ed-g:hover { border-color: var(--gb); }
.ed-g[aria-pressed="true"] { background: linear-gradient(var(--gb), var(--gb)) left center / 100% 100% no-repeat var(--ed-surface); border-color: var(--gb); color: var(--gb-on); font-weight: 700; box-shadow: none; }
.ed-g.is-zero:not([aria-pressed="true"]) { color: var(--ed-sub); opacity: 0.5; }

/* 教科 */
.ed-subjects { display: flex; flex-direction: column; gap: 1px; }
.ed-s {
  display: grid; grid-template-columns: 1.5em 1fr auto; align-items: center; gap: 0.5rem;
  width: 100%; padding: 0.42rem 0.6rem; border: 1px solid transparent; border-radius: var(--ed-radius);
  background: transparent; color: var(--ed-text); font-family: inherit; font-size: 0.88rem; text-align: left; cursor: pointer;
}
.ed-s i { color: var(--sc, var(--ed-sub)); text-align: center; font-size: 0.85rem; }
.ed-s .n { font-size: 0.75rem; color: var(--ed-sub); font-variant-numeric: tabular-nums; }
.ed-s:hover { background: var(--ed-accent-bg); }
.ed-s[aria-pressed="true"] { background: linear-gradient(var(--ed-accent-bg), var(--ed-accent-bg)) left center / 100% 100% no-repeat var(--ed-surface); border-color: var(--sc, var(--ed-accent)); color: var(--ed-text); font-weight: 700; }
.ed-s[aria-pressed="true"] .n { color: var(--ed-text); }
.ed-s.is-zero:not([aria-pressed="true"]) { opacity: 0.4; }

/* 使う人（切替） */
.ed-seg { display: flex; border: 1px solid var(--ed-border); border-radius: var(--ed-radius); overflow: hidden; }
.ed-seg button { flex: 1; padding: 0.45rem 0.2rem; border: 0; border-left: 1px solid var(--ed-border); background: var(--ed-surface); color: var(--ed-text); font-family: inherit; font-size: 0.8rem; cursor: pointer; }
.ed-seg button:first-child { border-left: 0; }
.ed-seg button:hover { background: var(--ed-accent-bg); }
.ed-seg button[aria-pressed="true"] { background: linear-gradient(var(--ed-accent), var(--ed-accent)) left center / 100% 100% no-repeat var(--ed-surface); color: var(--ed-on-accent); font-weight: 700; }
.ed-seg button.is-zero:not([aria-pressed="true"]) { opacity: 0.45; }

.ed-reset { display: block; width: 100%; margin-top: 0.9rem; padding: 0.5rem; border: 1px solid var(--ed-border); border-radius: var(--ed-radius); background: var(--ed-surface); color: var(--ed-text); font-family: inherit; font-size: 0.82rem; cursor: pointer; }
.ed-reset:hover { border-color: var(--ed-accent); color: var(--ed-accent); }
.ed-reset[hidden] { display: none; }

:is(.ed-g, .ed-s, .ed-seg button, .ed-reset, .ed-toggle, .ed-x, .ed-row, .ed-chip, .ed-qedit, .ed-qadd button, .ed-qadd select, .ed-chip.is-edit button):focus-visible { outline: 2px solid var(--ed-accent); outline-offset: 2px; }

/* 今日の授業で使う（先生の定番ショートカット） */
.ed-quick { margin-bottom: 1.3rem; padding: 0.9rem 1rem 1rem; background: var(--ed-accent-bg); border: 1px solid var(--ed-border); border-radius: var(--ed-radius); }
.ed-quick[hidden] { display: none; }
.ed-quick h2 { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.95rem; font-weight: 700; margin-bottom: 0.65rem; }
.ed-quick h2 i { color: var(--ed-bolt); font-size: 0.85rem; }
.ed-quick h2 small { font-weight: 400; font-size: 0.75rem; color: var(--ed-sub); }
.ed-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ed-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem; border: 1px solid var(--ed-border); border-radius: var(--ed-radius); background: var(--ed-surface); color: var(--ed-text); font-size: 0.88rem; font-weight: 500; text-decoration: none; transition: border-color 0.25s, color 0.25s; }
.ed-chip i { color: var(--ed-accent); transition: scale 0.45s var(--ease-out), rotate 0.45s var(--ease-out); }
a.ed-chip:hover i { scale: 1.25; rotate: -8deg; }
.ed-chip:hover { border-color: var(--ed-accent); color: var(--ed-accent); }
.ed-qhead { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; }
.ed-qhead h2 { margin-bottom: 0; }
.ed-qedit, .ed-qadd button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; border: 1px solid var(--ed-border); border-radius: var(--ed-radius); background: var(--ed-surface); color: var(--ed-sub); font: inherit; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.ed-qedit:hover, .ed-qadd button:hover { border-color: var(--ed-accent); color: var(--ed-accent); }
.is-editing .ed-qedit { background: var(--ed-accent); border-color: var(--ed-accent); color: #fff; }
.ed-qempty { margin: 0; font-size: 0.85rem; color: var(--ed-sub); }
.ed-chip.is-edit { padding-right: 0.3rem; gap: 0.35rem; }
.ed-chip.is-edit:hover { border-color: var(--ed-border); color: var(--ed-text); }
.ed-chip.is-edit button { width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--ed-radius); background: transparent; color: var(--ed-sub); font-size: 0.75rem; cursor: pointer; }
.ed-chip.is-edit button i { color: inherit; }
.ed-chip.is-edit button:hover:not(:disabled) { border-color: var(--ed-border); color: var(--ed-accent); background: var(--ed-surface); }
.ed-chip.is-edit button[data-q^="del"]:hover:not(:disabled) { color: #b91c1c; }
.ed-chip.is-edit button:disabled { opacity: 0.3; cursor: default; }
.ed-qadd { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.ed-qadd select { flex: 1 1 14rem; max-width: 22rem; padding: 0.4rem 0.5rem; border: 1px solid var(--ed-border); border-radius: var(--ed-radius); background: var(--ed-surface); color: var(--ed-text); font: inherit; font-size: 0.85rem; }
@media (max-width: 420px) { .ed-qhead { flex-wrap: wrap; } .ed-qhead h2 small { display: none; } }

/* 結果 */
.ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; min-height: 2rem; margin-bottom: 0.9rem; }
#ed-count { font-size: 0.9rem; color: var(--ed-sub); }
#ed-count b { font-size: 1.4rem; color: var(--ed-text); margin-right: 0.15em; font-variant-numeric: tabular-nums; }
.ed-active { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ed-x { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.55rem; border: 1px solid var(--ed-accent); border-radius: var(--ed-radius); background: var(--ed-accent-bg); color: var(--ed-accent); font-family: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.ed-x i { font-size: 0.7rem; }
.ed-x:hover { background: var(--ed-accent); color: var(--ed-on-accent); }

.ed-group { margin-bottom: 1.6rem; }
.ed-group h2 {
  display: flex; align-items: baseline; gap: 0.6rem; font-size: 1.08rem; font-weight: 700; margin-bottom: 0.55rem; padding-bottom: 0.35rem;
  border-bottom: 2px solid transparent;
  background: linear-gradient(var(--sc, var(--ed-accent)), var(--sc, var(--ed-accent))) left bottom / 100% 2px no-repeat,
              linear-gradient(var(--ed-border), var(--ed-border)) left bottom / 100% 2px no-repeat;
}
.ed-group h2 i { color: var(--sc, var(--ed-accent)); width: 1.3em; text-align: center; font-size: 0.95rem; }
.ed-group h2 small { font-weight: 400; font-size: 0.78rem; color: var(--ed-sub); }
.ed-list { list-style: none; background: var(--ed-surface); border: 1px solid var(--ed-border); border-radius: var(--ed-radius); overflow: hidden; }
.ed-list li + li { border-top: 1px solid var(--ed-border); }

.ed-row { display: grid; grid-template-columns: minmax(0, 1fr) 136px; gap: 1.2rem; align-items: center; padding: 0.85rem 1.1rem; color: inherit; text-decoration: none; }
.ed-row { transition: background-color 0.3s var(--ease-out); }
.ed-row:hover { background: var(--ed-accent-bg); }
.ed-row:hover .ed-name { color: var(--ed-accent); }
.ed-name { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1rem; line-height: 1.4; transition: color 0.25s; }
.ed-name > i:first-child { width: 1.3em; text-align: center; color: var(--sc, var(--ed-accent)); flex-shrink: 0; transition: scale 0.5s var(--ease-out), rotate 0.5s var(--ease-out); }
.ed-row:hover .ed-name > i:first-child { scale: 1.28; rotate: -6deg; }
.ed-name .ed-go { margin-left: 0.2rem; font-size: 0.8rem; color: var(--ed-accent); opacity: 0; translate: -10px 0; transition: opacity 0.3s, translate 0.5s var(--ease-out); }
.ed-row:hover .ed-go, .ed-row:focus-visible .ed-go { opacity: 1; translate: 0 0; }
@media (hover: none) { .ed-name .ed-go { opacity: 0.45; translate: 0 0; } }
.ed-desc { margin-top: 0.2rem; padding-left: 1.9em; font-size: 0.83rem; color: var(--ed-sub); line-height: 1.6; }
.ed-subj { margin-top: 0.35rem; padding-left: 2.3em; font-size: 0.75rem; color: var(--ed-sub); }
.ed-subj span + span::before { content: "・"; }

/* 学年バー：対象学年を10マスで示す（小1〜小6｜中1〜中3｜高校） */
.ed-gbar { justify-self: end; width: 136px; }
.ed-cells { display: flex; gap: 2px; }
.ed-cells i { flex: 1; height: 8px; border-radius: 2px; background: var(--ed-off); }
.ed-cells i.r { background: var(--gb); }
.ed-cells i.dim { background: var(--gb); opacity: 0.35; }
.ed-cells i.s6, .ed-cells i.s9 { margin-right: 5px; }
.ed-gtext { margin-top: 0.3rem; font-size: 0.75rem; color: var(--ed-sub); text-align: right; white-space: nowrap; }

.ed-empty-i { display: block; margin-bottom: 0.6rem; font-size: 1.8rem; color: var(--ed-range); }
.ed-alts { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin-top: 0.9rem; }
.ed-alts .ed-reset { width: auto; min-width: 14em; margin: 0; }
.ed-empty { padding: 2.5rem 1rem; text-align: center; color: var(--ed-sub); background: var(--ed-surface); border: 1px solid var(--ed-border); border-radius: var(--ed-radius); }
.ed-note { margin-top: 1.4rem; font-size: 0.78rem; color: var(--ed-sub); line-height: 1.7; }

@media (max-width: 1000px) {
  .ed-doodles .d6, .ed-doodles .d5, .ed-doodles .d3 { display: none; }
}

/* スマホ・タブレット：絞り込みを開閉式に */
@media (max-width: 860px) {
  .ed-wrap { padding: 0 1rem; }
  .ed-board { padding-top: 1.1rem; padding-bottom: 2rem; }
  .ed-hero h1 { font-size: 1.7rem; }
  .ed-doodles { display: none; }
  .ed-pieces { right: 1rem; }
  .ed-layout { grid-template-columns: 1fr; gap: 0.9rem; padding-top: 1.1rem; }
  .ed-toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.65rem 0.9rem; border: 1px solid var(--ed-border); border-radius: var(--ed-radius); background: var(--ed-surface); color: var(--ed-text); font-family: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer; }
  .ed-toggle i { color: var(--ed-accent); }
  .ed-toggle b { min-width: 1.5em; padding: 0 0.4em; border-radius: 4px; background: var(--ed-accent); color: var(--ed-on-accent); font-size: 0.78rem; text-align: center; }
  .ed-toggle b[hidden] { display: none; }
  .ed-toggle::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.7rem; margin-left: auto; color: var(--ed-sub); }
  .ed-toggle[aria-expanded="true"]::after { content: "\f077"; }
  .ed-side { display: none; position: static; max-height: none; }
  .ed-side.is-open { display: block; }
  .ed-subjects { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
  .ed-row { grid-template-columns: 1fr; gap: 0.6rem; padding: 0.8rem 0.9rem; }
  .ed-gbar { justify-self: start; width: 136px; margin-left: 1.9em; }
  .ed-gtext { text-align: left; }
}
@media (max-width: 420px) {
  .ed-gl { grid-template-columns: 1fr; gap: 0.25rem; }
  .ed-subjects { grid-template-columns: 1fr; }
}

.ed-chip.is-edit { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.ed-grip { color: var(--ed-sub) !important; font-size: 0.8rem; opacity: 0.7; }
.ed-chip.is-edit.is-drag { opacity: 0.35; border-style: dashed; border-color: var(--ed-accent); }
.ed-chip.is-ghost { position: fixed; z-index: 1000; margin: 0; pointer-events: none; cursor: grabbing; background: var(--ed-surface); border-color: var(--ed-accent); box-shadow: 0 1px 4px rgba(0,0,0,.18); }

/* ===== 教科のティッカー（黒板の下の帯。飾り） ===== */
.ed-ticker { overflow: hidden; background: var(--ed-surface); border-bottom: 1px solid var(--ed-border); }
.ed-ticker-track { display: flex; width: max-content; }
.ed-ticker-set { display: flex; flex-shrink: 0; }
.ed-ticker-set span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0 0.55rem 1.5rem; font-size: 0.82rem; font-weight: 700; color: var(--ed-sub); white-space: nowrap; }
.ed-ticker-set span i { color: var(--sc, var(--ed-accent)); }
.ed-ticker-set span::after { content: "/"; margin-left: 1.5rem; font-weight: 400; color: var(--ed-border); }

/* 行の名前の下線がのびる */
.ed-name > span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease-out); }
.ed-row:hover .ed-name > span { background-size: 100% 1px; }

/* ===== 動き（JS が ed-anim を付けたときだけ。動きを減らす設定・軽量モードでは付かない） ===== */
@keyframes edRise { from { opacity: 0; translate: 0 18px; } }
@keyframes edDrop { from { opacity: 0; translate: 0 -22px; } }
@keyframes edFade { from { opacity: 0; } }
@keyframes edWipe { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes edDoodleIn { from { opacity: 0; scale: 0.5; rotate: -14deg; } }
@keyframes edFloat { from { translate: 0 0; } to { translate: 0 -7px; } }
@keyframes edStroke { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes edMarq { to { translate: -50% 0; } }
@keyframes edPop { 0% { scale: 0.5; opacity: 0; } 60% { scale: 1.12; opacity: 1; } 100% { scale: 1; } }
@keyframes edPress { 0% { scale: 0.9; } 55% { scale: 1.06; } 100% { scale: 1; } }
@keyframes edSweep { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
@keyframes edUnder { from { background-size: 0 2px, 100% 2px; } to { background-size: 100% 2px, 100% 2px; } }
@keyframes edBob { from { translate: 0 0; } to { translate: 0 -5px; } }

/* ヒーロー：順に現れ、落書きは描かれてからゆっくり漂う */
.ed-anim .ed-crumb { animation: edRise 0.7s var(--ease-out) both; }
.ed-anim .ed-hero h1 { animation: edRise 0.8s var(--ease-out) 0.12s both; }
.ed-anim .ed-hero h1::after { transform-origin: 0 50%; animation: edWipe 0.8s var(--ease-out) 0.55s both; }
.ed-anim .ed-lead { animation: edRise 0.8s var(--ease-out) 0.3s both; }
.ed-anim .ed-doodles .d { animation: edDoodleIn 0.9s var(--ease-out) var(--dl, 0.6s) both, edFloat var(--fd, 7s) ease-in-out calc(var(--dl, 0.6s) + 0.9s) infinite alternate; }
.ed-anim .ed-doodles { translate: 0 calc(var(--py, 0) * 1px); }
.ed-anim .d1 { --dl: 0.6s; --fd: 7s; } .ed-anim .d2 { --dl: 0.75s; --fd: 8s; } .ed-anim .d3 { --dl: 0.9s; --fd: 6.5s; }
.ed-anim .d4 { --dl: 1.05s; --fd: 9s; } .ed-anim .d5 { --dl: 1.2s; --fd: 7.5s; } .ed-anim .d6 { --dl: 1.35s; --fd: 8.5s; }
.ed-anim .d7 { --dl: 0.7s; --fd: 8s; } .ed-anim .d8 { --dl: 1s; --fd: 7s; }
.ed-anim svg.d > * { stroke-dasharray: 1; animation: edStroke 1.8s var(--ease-out) calc(var(--dl, 0.6s) + 0.2s) both; }
.ed-anim svg.d > *:nth-child(2) { animation-delay: calc(var(--dl, 0.6s) + 0.9s); }
.ed-anim svg.d > *:nth-child(3) { animation-delay: calc(var(--dl, 0.6s) + 1.5s); }
.ed-anim .ed-pieces i { animation: edDrop 0.8s var(--ease-out) 1.2s both; }
.ed-anim .ed-pieces i:nth-child(2) { animation-delay: 1.35s; }
.ed-anim .ed-pieces i:nth-child(3) { animation-delay: 1.5s; }
.ed-anim .ed-tray { transform-origin: 0 50%; animation: edWipe 1s var(--ease-out) 0.2s both; }

/* 教科のティッカーが流れる */
.ed-anim .ed-ticker-track { animation: edMarq 80s linear infinite; }
.ed-anim .ed-ticker:hover .ed-ticker-track { animation-play-state: paused; }

/* 絞り込みパネルは上から順に、結果側はあとから */
.ed-anim .ed-side > .ed-block { animation: edRise 0.8s var(--ease-out) both; }
.ed-anim .ed-side > .ed-block:nth-of-type(1) { animation-delay: 0.25s; }
.ed-anim .ed-side > .ed-block:nth-of-type(2) { animation-delay: 0.4s; }
.ed-anim .ed-side > .ed-block:nth-of-type(3) { animation-delay: 0.55s; }
.ed-anim .ed-toggle { animation: edRise 0.7s var(--ease-out) 0.2s both; }
.ed-anim .ed-bar { animation: edFade 0.8s ease 0.5s both; }
.ed-anim .ed-side.is-open { animation: edFade 0.35s ease both; }
.ed-anim .ed-note { animation: edFade 1s ease 0.8s both; }

/* 今日の授業で使う：枠が現れ、チップが順に弾む */
.ed-anim .ed-quick { animation: edRise 0.8s var(--ease-out) 0.35s both; }
.ed-anim .ed-quick.is-intro .ed-chip { animation: edPop 0.6s var(--ease-out) calc(var(--i, 0) * 80ms + 0.7s) both; }
.ed-anim .ed-quick.is-intro h2 i { animation: edBob 0.7s ease-in-out 0.6s 3 alternate both; }

/* 選んだ瞬間：ボタンがふくらみ、色が左からのびる */
.ed-anim .ed-g.is-pop, .ed-anim .ed-s.is-pop, .ed-anim .ed-seg button.is-pop { animation: edPress 0.45s var(--ease-out), edSweep 0.45s var(--ease-out); }
.ed-anim .ed-x.is-new { animation: edPop 0.4s var(--ease-out) both; }
.ed-anim #ed-count b.is-tick { display: inline-block; animation: edPress 0.35s var(--ease-out); }

/* 結果の行：スクロールで見えたところから順に現れる */
.ed-anim .ed-rv li { opacity: 0; translate: 0 22px; transition: opacity 0.7s var(--ease-out), translate 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.ed-anim .ed-rv.is-in li { opacity: 1; translate: 0 0; }
.ed-anim .ed-rv .ed-cells i { scale: 0 1; transform-origin: 0 50%; transition: scale 0.6s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms + var(--c, 0) * 45ms + 0.25s); }
.ed-anim .ed-rv.is-in .ed-cells i { scale: 1 1; }
.ed-anim .ed-rv h2 { opacity: 0; transition: opacity 0.5s ease; }
.ed-anim .ed-rv.is-in h2 { opacity: 1; animation: edUnder 0.9s var(--ease-out) both; }
.ed-anim .ed-rv.is-in h2 i { animation: edPop 0.5s var(--ease-out) 0.1s both; }
.ed-anim .ed-empty { animation: edRise 0.6s var(--ease-out) both; }
.ed-anim .ed-empty-i { animation: edBob 1.6s ease-in-out infinite alternate; }


/* ===== 探し方の切替（一覧／質問／教科パネル） ===== */
.ed-views { padding-top: 1.1rem; }
.ed-views-in { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; }
.ed-views-lab { font-size: 0.78rem; font-weight: 700; color: var(--ed-sub); letter-spacing: 0.08em; }
.ed-vseg { display: inline-flex; border: 1px solid var(--ed-border); border-radius: var(--ed-radius); background: var(--ed-surface); overflow: hidden; }
.ed-vseg button { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem; border: 0; border-right: 1px solid var(--ed-border); background: transparent; color: var(--ed-text); font-family: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.ed-vseg button:last-child { border-right: 0; }
.ed-vseg button i { color: var(--ed-accent); font-size: 0.85rem; transition: color 0.2s; }
.ed-vseg button:hover { background: var(--ed-accent-bg); }
.ed-vseg button[aria-pressed="true"] { background: var(--ed-accent); color: var(--ed-on-accent); }
.ed-vseg button[aria-pressed="true"] i { color: var(--ed-on-accent); }
.ed-views-hint { font-size: 0.8rem; color: var(--ed-sub); flex: 1 1 260px; min-width: 0; }
.ed-vseg button:focus-visible, .ed-qz button:focus-visible, .ed-pl button:focus-visible, .ed-pl-a:focus-visible { outline: 2px solid var(--ed-accent); outline-offset: 2px; }
.ed-qz button:focus-visible { outline-color: var(--ed-chalk-yellow); }
.ed-pl button:focus-visible, .ed-pl-a:focus-visible { outline-color: #fff; outline-offset: -3px; }
.ed-qz[hidden], .ed-panels[hidden], #ed-result[hidden] { display: none; }

/* 質問・パネル表示では絞り込みパネルを使わない */
.ed-layout[data-view="quiz"], .ed-layout[data-view="panels"] { grid-template-columns: minmax(0, 1fr); }
.ed-layout[data-view="quiz"] > .ed-side, .ed-layout[data-view="panels"] > .ed-side,
.ed-layout[data-view="quiz"] > .ed-toggle, .ed-layout[data-view="panels"] > .ed-toggle { display: none; }
.ed-layout[data-view="quiz"] #ed-bar, .ed-layout[data-view="panels"] #ed-bar, .ed-layout[data-view="panels"] #ed-result { display: none; }

/* ===== 質問に答えて探す ===== */
.ed-qz { background: var(--ed-board); color: var(--ed-chalk); border-radius: var(--ed-radius); border-bottom: 10px solid #b98a52; padding: 1.4rem 1.4rem 1.8rem; margin-bottom: 1.2rem; overflow: hidden; }
html[data-theme="dark"] .ed-qz { border-bottom-color: #7d5c38; }
.ed-qz-in { max-width: 920px; margin: 0 auto; }
.ed-qz-steps { list-style: none; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: 0.8rem; }
.ed-qz-steps li { display: inline-flex; align-items: center; gap: 0.5rem; }
.ed-qz-steps button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0; border: 0; background: none; color: rgba(243, 247, 255, 0.65); font-family: inherit; font-size: inherit; cursor: pointer; }
.ed-qz-steps button[disabled] { cursor: default; }
.ed-qz-steps b { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 0.78rem; transition: background-color 0.3s, color 0.3s; }
.ed-qz-steps .on { color: var(--ed-chalk-yellow); }
.ed-qz-steps .done { color: var(--ed-chalk); }
.ed-qz-steps .done b, .ed-qz-steps .on b { background: var(--ed-chalk-yellow); border-color: var(--ed-chalk-yellow); color: #0d2a5c; }
.ed-qz-bar { width: 28px; height: 2px; background: currentColor; opacity: 0.4; }
.ed-qz-v { font-weight: 700; }
.ed-qz-q { font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: 0.02em; margin: 0.2rem 0 1.1rem; color: var(--ed-chalk); outline: none; }
.ed-qz-q small { display: block; margin-top: 0.25rem; font-size: 0.88rem; font-weight: 500; letter-spacing: 0; color: rgba(243, 247, 255, 0.72); }
.ed-qz-q b { color: var(--ed-chalk-yellow); font-size: 1.3em; }
.ed-qz-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.ed-qz-opts.is-wide { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ed-qz-o { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.9rem 0.4rem; border: 1.5px solid rgba(243, 247, 255, 0.55); border-radius: var(--ed-radius); background: transparent; color: var(--ed-chalk); font-family: inherit; font-weight: 800; font-size: 1.1rem; cursor: pointer; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.ed-qz-o small { font-size: 0.72rem; font-weight: 500; opacity: 0.78; }
.ed-qz-o i { font-size: 1.3rem; }
.ed-qz-o:hover { border-color: var(--ed-chalk-yellow); color: var(--ed-chalk-yellow); }
.ed-qz-o.sel, .ed-qz-o[aria-pressed="true"] { background: var(--ed-chalk-yellow); border-color: var(--ed-chalk-yellow); color: #0d2a5c; }
.ed-qz-o[disabled] { opacity: 0.3; cursor: not-allowed; }
.ed-qz-o.wide { grid-column: span 2; }
.ed-qz-sum { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.ed-qz-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem; border: 1.5px solid rgba(243, 247, 255, 0.55); border-radius: var(--ed-radius); background: transparent; color: var(--ed-chalk); font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.ed-qz-chip i { font-size: 0.7rem; opacity: 0.75; }
.ed-qz-chip:hover { border-color: var(--ed-chalk-yellow); color: var(--ed-chalk-yellow); }
.ed-qz-redo { margin-left: auto; border-style: dashed; }

/* ===== 教科パネルで見る ===== */
.ed-panels { display: flex; width: min(calc(100vw - 3rem), 1440px); margin: 0 0 1.2rem 50%; translate: -50% 0; height: clamp(520px, calc(100dvh - 160px), 760px); background: #0b0f1d; border-radius: var(--ed-radius); overflow: hidden; }
.ed-pl { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--c); color: #fff; border-right: 1px solid rgba(255, 255, 255, 0.25); cursor: pointer; transition: flex-grow 0.8s var(--ease-out); }
.ed-pl:last-child { border-right: 0; }
.ed-pl.open { flex-grow: 12; cursor: default; }
.ed-pl:not(.open):hover { flex-grow: 1.35; }
.ed-pl.is-zero:not(.open) { filter: saturate(0.35); opacity: 0.8; }
.ed-pl::before { content: attr(data-en); position: absolute; right: -2%; bottom: -8%; font-size: clamp(6rem, 16vw, 14rem); font-weight: 900; line-height: 0.8; color: rgba(255, 255, 255, 0.1); white-space: nowrap; pointer-events: none; letter-spacing: -0.04em; }
.ed-pl-n { position: absolute; left: 50%; top: 1.3rem; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: 0.2rem 0.3rem; border: 0; background: none; color: inherit; font-family: inherit; cursor: pointer; transition: opacity 0.4s, translate 0.6s var(--ease-out); }
.ed-pl-n i { font-size: 1.4rem; }
.ed-pl-n b { writing-mode: vertical-rl; font-size: 1.35rem; font-weight: 800; letter-spacing: 0.25em; }
.ed-pl-n em { font-style: normal; font-size: 0.82rem; font-weight: 800; border: 1.5px solid rgba(255, 255, 255, 0.8); border-radius: 6px; padding: 0.05rem 0.5rem; }
.ed-pl.open .ed-pl-n { opacity: 0; translate: -50% -20px; pointer-events: none; }
.ed-pl-body { position: absolute; inset: 0; min-width: 0; display: flex; flex-direction: column; padding: 1.5rem 2rem 1.3rem; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.ed-pl.open .ed-pl-body { opacity: 1; pointer-events: auto; transition: opacity 0.6s 0.35s; }
.ed-pl-hd { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding-right: 3rem; }
.ed-pl-hd h2 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; font-weight: 900; letter-spacing: 0.02em; }
.ed-pl-c { font-size: 1rem; font-weight: 700; padding-bottom: 0.4rem; }
.ed-pl-c b { font-size: 1.8rem; }
.ed-pl-gs, .ed-pl-us { display: flex; gap: 4px; flex-wrap: wrap; }
.ed-pl-gs { margin: 0.9rem 0 0.5rem; }
.ed-pl-us { margin-bottom: 0.8rem; }
.ed-pl-gs button, .ed-pl-us button { padding: 0.2rem 0.6rem; border: 1.5px solid rgba(255, 255, 255, 0.6); border-radius: 6px; background: transparent; color: #fff; font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.ed-pl-gs button:hover, .ed-pl-us button:hover { background: rgba(255, 255, 255, 0.22); }
.ed-pl-gs button[aria-pressed="true"], .ed-pl-us button[aria-pressed="true"] { background: #fff; color: var(--c); }
.ed-pl-gs button[disabled] { opacity: 0.35; cursor: not-allowed; }
.ed-pl-ls { list-style: none; flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; align-content: start; padding-right: 4px; scrollbar-width: thin; }
.ed-pl-a { display: flex; align-items: center; gap: 0.7rem; height: 100%; padding: 0.7rem 0.85rem; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 6px; color: #fff; text-decoration: none; transition: background-color 0.25s, color 0.25s; }
.ed-pl-a:hover { background: #fff; color: var(--c); }
.ed-pl-a > i { flex: none; width: 1.4em; text-align: center; font-size: 1.3rem; }
.ed-pl-a b { display: block; font-size: 0.92rem; line-height: 1.35; }
.ed-pl-a small { display: block; margin-top: 0.1rem; font-size: 0.72rem; opacity: 0.85; }
.ed-pl-none { grid-column: 1 / -1; padding: 1rem 0; font-size: 0.9rem; opacity: 0.9; }
.ed-pl-close { position: absolute; right: 1.1rem; top: 1rem; z-index: 1; width: 38px; height: 38px; border: 1.5px solid rgba(255, 255, 255, 0.7); border-radius: 6px; background: transparent; color: #fff; font-size: 1.1rem; cursor: pointer; transition: background-color 0.2s; }
.ed-pl-close:hover { background: rgba(255, 255, 255, 0.25); }

@media (max-width: 860px) {
  .ed-views { padding-top: 0.9rem; }
  .ed-views-hint { flex-basis: 100%; }
  .ed-qz { padding: 1.1rem 1rem 1.4rem; }
}
@media (max-width: 1000px) {
  .ed-panels { width: auto; margin-left: 0; translate: none; flex-direction: column; height: auto; }
  .ed-pl, .ed-pl.is-zero:not(.open) { flex: none; height: 64px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.25); transition: height 0.6s var(--ease-out); }
  .ed-pl.open { height: calc(100dvh - 48px - 64px * 11); min-height: 460px; flex-grow: 0; }
  .ed-pl:not(.open):hover { flex-grow: 0; }
  .ed-pl::before { font-size: 5rem; }
  .ed-pl-n { left: 1rem; top: 0; height: 64px; translate: 0 0; flex-direction: row; gap: 0.7rem; align-items: center; }
  .ed-pl-n b { writing-mode: horizontal-tb; font-size: 1.1rem; letter-spacing: 0.08em; }
  .ed-pl-n em { margin-left: 0.2rem; }
  .ed-pl.open .ed-pl-n { translate: 0 -20px; }
}
@media (max-width: 760px) {
  .ed-vseg { width: 100%; }
  .ed-vseg button { flex: 1 1 0; justify-content: center; padding: 0.55rem 0.3rem; font-size: 0.8rem; gap: 0.3rem; }
  .ed-vseg button i { display: none; }
  .ed-qz-redo { margin-left: 0; }
  .ed-pl-body { padding: 1rem 1rem 0.9rem; }
  .ed-pl-hd { padding-right: 2.8rem; }
  .ed-pl-hd h2 { font-size: 2rem; }
  .ed-pl-close { right: 0.7rem; top: 0.7rem; }
  .ed-pl-ls { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .ed-qz-o.wide { grid-column: 1 / -1; }
}

/* 動き（軽量モードでは付かない） */
.ed-anim .ed-qz-pane { animation: edQzIn 0.7s var(--ease-out) both; }
.ed-anim .ed-qz-o { animation: edPop 0.5s var(--ease-out) calc(var(--i, 0) * 40ms) both; }
.ed-anim .ed-pl { animation: edRise 0.8s var(--ease-out) calc(var(--i, 0) * 60ms) both; }
.ed-anim .ed-pl.open .ed-pl-ls.is-fresh li { animation: edRise 0.6s var(--ease-out) calc(var(--k, 0) * 28ms + 0.45s) both; }
@keyframes edQzIn { from { opacity: 0; translate: 40px 0; } }