@font-face {
  font-family: "Klee One";
  src: url("./assets/fonts/KleeOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Klee One";
  src: url("./assets/fonts/KleeOne-SemiBold.ttf") format("truetype");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #153a4c;
  --ink-deep: #092b3b;
  --sky: #73d9e8;
  --aqua: #14afbd;
  --aqua-deep: #087c91;
  --sun: #ffca4d;
  --sun-deep: #f29b32;
  --leaf: #55b96d;
  --coral: #ff775e;
  --ivory: #fffaf0;
  --white: #fff;
  --shadow: 0 24px 80px rgba(17, 67, 82, .14);
  --display: "Zen Maru Gothic", sans-serif;
  --body: "M PLUS Rounded 1c", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--body);
  font-weight: 500;
  line-height: 1.8;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
ol, ul { margin: 0; padding: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; background: #fff; border-radius: 1rem; box-shadow: var(--shadow); }
.skip-link:focus { top: 1rem; }

a:focus-visible,
button:focus-visible,
.chip:focus-visible {
  outline: 3px solid var(--sun-deep);
  outline-offset: 3px;
  border-radius: .4rem;
}

/* ===== ヘッダー ===== */
.drill-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.1rem, 4vw, 2.4rem);
  background: rgba(255, 250, 240, .9);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(20, 175, 189, .14);
}
.drill-brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 900; letter-spacing: .04em; color: var(--ink-deep); font-size: 1.02rem; }
.drill-brand em { margin-left: .1rem; color: var(--aqua-deep); font-style: normal; font-size: .82em; }
.drill-brand-flame { position: relative; width: 22px; height: 22px; border-radius: 46% 54% 58% 42% / 65% 45% 55% 35%; background: linear-gradient(145deg, #fff8a9, var(--sun)); transform: rotate(45deg); box-shadow: 0 0 14px rgba(255, 218, 91, .55); }
.drill-brand-flame i { position: absolute; width: 8px; height: 8px; left: 6px; top: 7px; border-radius: 50%; background: #fff; }
.drill-nav { display: flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 800; }
.drill-nav a { padding: .55rem .85rem; border-radius: 999px; color: var(--ink); transition: background .2s, color .2s; }
.drill-nav a:hover { background: rgba(20, 175, 189, .1); }
.drill-nav-cta { color: #fff !important; background: var(--aqua); }
.drill-nav-cta:hover { background: var(--aqua-deep) !important; }

/* ===== ボタン共通 ===== */
.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: .8rem 1.35rem;
  border-radius: 999px;
  border: 0;
  font-weight: 900;
  font-size: .92rem;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.button:hover { transform: translateY(-2px); }
.button b { font-size: 1.05rem; }
.button-primary { color: #fff; background: var(--aqua); box-shadow: 0 14px 32px rgba(8, 124, 145, .28); }
.button-primary:hover { background: var(--aqua-deep); }
.button-ghost { color: var(--ink-deep); background: #fff; border: 1.5px solid rgba(9, 43, 59, .16); }
.button-light { color: var(--ink-deep); background: #fff; box-shadow: 0 16px 40px rgba(0, 40, 50, .22); }
.button-ghost-light { color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); }

/* ===== 汎用セクション ===== */
.drill-section { padding: clamp(3.5rem, 7vw, 6rem) 0; scroll-margin-top: 84px; }
.drill-section-inner { width: min(1120px, calc(100% - 2.4rem)); margin-inline: auto; }
.section-kicker { margin: 0 0 .8rem; color: var(--aqua-deep); font-size: .68rem; font-weight: 900; letter-spacing: .2em; }
.section-kicker-light { color: #fff2a5; }
.drill-section h2 { margin: 0 0 1.1rem; font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.3; letter-spacing: -.02em; }
.drill-section h2 span { color: var(--aqua); }
.drill-lead { max-width: 46rem; margin: 0 0 2rem; color: #4d6872; }

/* ===== ヒーロー ===== */
.drill-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.6rem, 6vw, 5rem) 0 clamp(2.6rem, 6vw, 4.5rem);
  background: linear-gradient(165deg, #e6fbfb 0%, #fffaf0 52%, #fff2d9 100%);
}
/* 承認済みのヒーロー静止画は「空気」としてだけ使う。
   モバイルでは display:none ではなく、そもそもデスクトップ幅でしか
   background-image を宣言しないので、画像の通信自体が発生しない。 */
.drill-hero-art,
.drill-hero-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.drill-hero-art { display: none; }
.drill-hero-veil {
  background:
    radial-gradient(120% 90% at 12% 30%, rgba(255, 250, 240, .96) 0%, rgba(255, 250, 240, .72) 42%, rgba(255, 250, 240, 0) 78%),
    linear-gradient(0deg, rgba(255, 250, 240, .85) 0%, rgba(255, 250, 240, 0) 40%);
}
.drill-hero-inner {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 2.4rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: start;
  gap: clamp(1.6rem, 4vw, 3.4rem);
}
.drill-hero-copy-col { padding-top: .35rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem; color: var(--aqua-deep); font-size: .72rem; font-weight: 900; letter-spacing: .22em; }
.eyebrow::before, .eyebrow::after { content: ""; width: 2rem; height: 2px; background: var(--sun-deep); }
.drill-hero h1 { margin: 0 0 1.2rem; font-family: var(--display); font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.24; letter-spacing: -.03em; }
.drill-hero h1 em { position: relative; color: var(--aqua-deep); font-style: normal; }
.drill-hero-copy { max-width: 34rem; margin: 0 0 1.6rem; color: #47646f; font-size: clamp(.92rem, 1.5vw, 1.02rem); }
.drill-hero-copy b { color: var(--ink-deep); font-weight: 900; }
.drill-hero-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.drill-hero-badges { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; list-style: none; }
.drill-hero-badges li { padding: .38rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(20, 175, 189, .24); color: var(--ink-deep); font-size: .72rem; font-weight: 800; }

/* ===== ヒーローのミニメーカー（おためし） ===== */
.hero-maker-stack { min-width: 0; display: grid; gap: .9rem; }
.hero-maker {
  min-width: 0;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  border: 1px solid rgba(8, 124, 145, .2);
  border-radius: 1.75rem;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 30px 70px rgba(17, 67, 82, .18), 0 2px 0 rgba(255, 255, 255, .9) inset;
  backdrop-filter: blur(10px);
}
.hero-maker-label { display: block; color: var(--aqua-deep); font-size: .6rem; font-weight: 900; letter-spacing: .18em; }
.hero-maker-title { margin: .3rem 0 .9rem; color: #55707a; font-size: .8rem; font-weight: 700; line-height: 1.6; }
.hero-maker-title b { color: var(--ink-deep); font-family: var(--display); }
.hero-maker-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; margin-bottom: .9rem; }
.hero-kanji {
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .05rem;
  padding: .45rem .1rem;
  border: 1.5px solid rgba(9, 43, 59, .13);
  border-radius: .8rem;
  color: var(--ink-deep);
  background: #fff;
  font-family: var(--display);
  cursor: pointer;
  transition: transform .15s, background .2s, border-color .2s, box-shadow .2s;
}
.hero-kanji b { font-size: clamp(1.05rem, 2.4vw, 1.35rem); line-height: 1.1; }
.hero-kanji small { font-family: var(--body); font-size: .52rem; font-weight: 800; color: #7d939a; }
.hero-kanji:hover { transform: translateY(-2px); border-color: var(--aqua); }
.hero-kanji[aria-pressed="true"] { color: #fff; border-color: transparent; background: linear-gradient(150deg, var(--aqua), var(--aqua-deep)); box-shadow: 0 8px 18px rgba(8, 124, 145, .3); }
.hero-kanji[aria-pressed="true"] small { color: rgba(255, 255, 255, .82); }
.hero-maker-sheet {
  overflow: hidden;
  border: 1px solid rgba(9, 43, 59, .12);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 14px 30px rgba(9, 43, 59, .12);
}
.hero-maker-sheet-bar { display: flex; align-items: center; gap: .3rem; padding: .45rem .7rem; border-bottom: 1px solid rgba(9, 43, 59, .09); background: #f3fafa; }
.hero-maker-sheet-bar i { width: .4rem; height: .4rem; border-radius: 50%; background: rgba(9, 43, 59, .16); }
.hero-maker-sheet-bar span { margin-left: auto; color: var(--aqua-deep); font-size: .55rem; font-weight: 900; letter-spacing: .08em; }
.hero-maker-preview { display: grid; gap: .3rem; min-height: 8.5rem; align-content: start; padding: .6rem .7rem; }
.hero-maker-empty { margin: auto; color: #8ba0a7; font-size: .74rem; font-weight: 700; text-align: center; }
.hero-row { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); align-items: center; gap: .35rem; }
.hero-row-label { color: #7d939a; font-size: .55rem; font-weight: 800; text-align: right; }
.hero-row-boxes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .18rem; min-width: 0; }
.hero-box {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid #b7cace;
  border-radius: .12rem;
  color: var(--ink-deep);
  font-family: var(--display);
  font-size: clamp(.6rem, 1.5vw, .95rem);
  line-height: 1;
}
.hero-box::before { content: ""; position: absolute; inset: 0; border-left: 1px dashed rgba(159, 183, 187, .55); width: 50%; pointer-events: none; }
.hero-box.is-model { border-color: var(--aqua); background: #e7f9f8; font-weight: 700; }
.hero-box.is-trace { color: rgba(23, 56, 71, .3); }
.hero-box.is-blank { background: #fff; }
.hero-maker-status { margin: .75rem 0 .8rem; min-height: 2.4em; color: var(--aqua-deep); font-size: .7rem; font-weight: 800; line-height: 1.6; }
.hero-maker-cta { width: 100%; }
.hero-maker-cta span { text-align: center; }
.hero-maker-note { margin: .7rem 0 0; color: #7d939a; font-size: .62rem; line-height: 1.6; }

/* 漢字練習とは別の第2レーン。文章を入れた瞬間にペン習字紙面へ変わる。 */
.hero-penmanship {
  min-width: 0;
  padding: clamp(.9rem, 2vw, 1.25rem);
  border: 1px solid rgba(224, 139, 31, .26);
  border-radius: 1.5rem;
  background: rgba(255, 253, 247, .95);
  box-shadow: 0 22px 50px rgba(79, 55, 22, .15), 0 2px 0 rgba(255, 255, 255, .9) inset;
  backdrop-filter: blur(10px);
}
.hero-penmanship .hero-maker-label { color: #b96818; }
.hero-penmanship-field { display: grid; gap: .3rem; color: var(--ink-deep); font-size: .64rem; font-weight: 900; }
.hero-penmanship-field > span::before { content: "PEN"; display: inline-grid; place-items: center; min-width: 2.2rem; height: 1.3rem; margin-right: .45rem; border-radius: 999px; color: #fff; background: #bd6f1f; font-size: .48rem; letter-spacing: .08em; vertical-align: middle; }
.hero-penmanship-field textarea {
  width: 100%;
  min-height: 4.35rem;
  resize: vertical;
  padding: .42rem .8rem;
  border: 1px solid rgba(189, 111, 31, .3);
  border-left: 4px solid #e49a35;
  border-radius: .8rem;
  color: var(--ink-deep);
  background-color: #fffdf7;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.85rem - 1px), rgba(189, 111, 31, .2) calc(1.85rem - 1px), rgba(189, 111, 31, .2) 1.85rem);
  font-family: var(--display);
  font-size: .78rem;
  line-height: 1.85rem;
}
.hero-penmanship-field small { color: #8a7452; font-size: .57rem; font-weight: 700; line-height: 1.55; }
.hero-penmanship-field textarea:focus { outline: 3px solid rgba(242, 155, 50, .25); border-color: var(--sun-deep); }
.penmanship-practice-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.penmanship-practice-flow li { position: relative; min-width: 0; display: flex; align-items: center; gap: .45rem; padding: .62rem .65rem; border: 1px solid rgba(189, 111, 31, .2); border-radius: .85rem; color: #6d5a3d; background: linear-gradient(145deg, #fffdf7, #fff8e8); font-size: .68rem; font-weight: 900; line-height: 1.35; }
.penmanship-practice-flow li b { flex: 0 0 1.45rem; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; color: #fff; background: #bd6f1f; font-size: .62rem; }
.penmanship-practice-flow li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; right: -.39rem; width: .42rem; height: .42rem; border-top: 2px solid rgba(189, 111, 31, .48); border-right: 2px solid rgba(189, 111, 31, .48); transform: rotate(45deg); }
.penmanship-practice-flow-compact { gap: .35rem; margin: .5rem 0 .15rem; }
.penmanship-practice-flow-compact li { gap: .28rem; padding: .4rem .38rem; font-size: .56rem; }
.penmanship-practice-flow-compact li b { flex-basis: 1.2rem; width: 1.2rem; height: 1.2rem; font-size: .52rem; }
.hero-penmanship-layouts { display: flex; gap: .35rem; margin: .55rem 0; }
.hero-penmanship-layouts button {
  min-height: 44px;
  padding: .4rem .75rem;
  border: 1px solid rgba(9, 43, 59, .13);
  border-radius: 999px;
  color: #6d5a3d;
  background: #fff;
  font-size: .64rem;
  font-weight: 900;
  cursor: pointer;
}
.hero-penmanship-layouts button[aria-pressed="true"] { color: #fff; border-color: #bd6f1f; background: #bd6f1f; }
.hero-penmanship-sheet { display: grid; gap: .3rem; min-height: 6.8rem; padding: .65rem; border: 1px solid rgba(189, 111, 31, .2); border-radius: .9rem; background-color: #fffefb; background-image: linear-gradient(rgba(232, 204, 158, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 204, 158, .12) 1px, transparent 1px); background-size: 1.6rem 1.6rem; box-shadow: 0 10px 24px rgba(79, 55, 22, .1); }
.hero-penmanship-row { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); align-items: center; gap: .45rem; min-width: 0; }
.hero-penmanship-row > span { padding: .2rem .32rem; border-radius: 999px; color: #7b613b; background: rgba(255, 244, 219, .94); font-size: .52rem; font-weight: 900; text-align: center; }
.hero-penmanship-row > b { min-width: 0; min-height: 1.62rem; display: flex; align-items: flex-end; overflow: hidden; padding: .28rem .45rem; border-bottom: 1px solid #c8b795; color: var(--ink-deep); background: rgba(255, 255, 255, .68); font-family: var(--display); font-size: .72rem; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.hero-penmanship-char { display: inline-grid; place-items: center; min-width: .82em; color: inherit; font: inherit; font-size: 1em; font-style: normal; line-height: 1; }
.hero-penmanship-char.is-kana { min-width: .66em; font-size: .76em; }
.hero-penmanship-char.is-punctuation { min-width: .48em; place-items: start end; font-size: .55em; }
.hero-penmanship-row.is-model > b { border-left: 3px solid #e49a35; color: #4d3920; }
.hero-penmanship-row.is-trace > b { color: rgba(23, 56, 71, .24); text-shadow: 0 0 0 rgba(23, 56, 71, .14); }
.hero-penmanship-row.is-blank > b { background: repeating-linear-gradient(90deg, transparent 0, transparent 2.2rem, rgba(175, 194, 196, .3) 2.2rem, rgba(175, 194, 196, .3) 2.25rem); }
.hero-penmanship-sheet.is-vertical { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 9rem; direction: rtl; }
.hero-penmanship-sheet.is-vertical .hero-penmanship-row { grid-template-columns: 1fr; align-content: start; justify-items: center; gap: .2rem; direction: ltr; }
.hero-penmanship-sheet.is-vertical .hero-penmanship-row > span { text-align: center; }
.hero-penmanship-sheet.is-vertical .hero-penmanship-row > b { width: 100%; height: 6.8rem; flex-direction: column; align-items: center; justify-content: flex-start; border: 0; border-left: 1px solid #b9c9ca; white-space: nowrap; }
.hero-penmanship-sheet.is-vertical .hero-penmanship-char { min-width: 0; min-height: .82em; }
.hero-penmanship-sheet.is-vertical .hero-penmanship-char.is-kana { min-height: .66em; }
.hero-penmanship-sheet.is-vertical .hero-penmanship-char.is-punctuation { min-height: .5em; align-self: flex-end; }
.hero-penmanship-sheet.is-vertical .hero-penmanship-row.is-blank > b { background: repeating-linear-gradient(0deg, transparent 0, transparent 2rem, rgba(175, 194, 196, .3) 2rem, rgba(175, 194, 196, .3) 2.05rem); }

/* ===== 今週のお題 / 先行配信 ===== */
.weekly-writing {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 14%, rgba(255, 202, 77, .32), transparent 23rem),
    radial-gradient(circle at 91% 80%, rgba(255, 119, 94, .3), transparent 30rem),
    linear-gradient(145deg, #062c3d 0%, #08465a 54%, #06313f 100%);
}
.weekly-writing::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background: repeating-linear-gradient(118deg, transparent 0, transparent 46px, rgba(255, 255, 255, .15) 47px, transparent 49px);
  mask-image: linear-gradient(90deg, #000, transparent 74%);
}
.weekly-writing-campaign { position: relative; z-index: 2; display: flex; align-items: center; width: fit-content; margin: 0 0 1.45rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: #fff; background: rgba(3, 28, 39, .5); box-shadow: 0 16px 38px rgba(1, 22, 32, .24); font-size: .68rem; font-weight: 900; letter-spacing: .05em; }
.weekly-writing-campaign span { padding: .65rem .9rem; color: #163342; background: var(--sun); letter-spacing: .14em; }
.weekly-writing-campaign b { padding: .65rem 1rem; }
.weekly-writing-campaign em { margin-right: .35rem; padding: .35rem .7rem; border-radius: 999px; color: #fff; background: var(--coral); font-style: normal; }
.weekly-writing-intro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 31rem); align-items: end; gap: 2rem; margin-bottom: 1.8rem; }
.weekly-writing-intro .section-kicker { color: #ffd970; }
.weekly-writing-intro h2 { color: #fff; }
.weekly-writing-intro h2 span { color: #ffce56; }
.weekly-writing-intro .drill-lead { margin: 0; color: rgba(255, 255, 255, .78); }
.weekly-writing-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(19rem, .75fr);
  min-height: 36rem;
  overflow: hidden;
  border: 1px solid rgba(255, 220, 126, .48);
  border-radius: 2.4rem;
  background: #fffdf7;
  box-shadow: 0 38px 100px rgba(1, 21, 31, .44);
}
.weekly-writing-copy { position: relative; z-index: 2; padding: clamp(1.5rem, 4vw, 3.2rem); }
.weekly-writing-meta { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; color: #6b858d; font-size: .7rem; font-weight: 900; letter-spacing: .04em; }
.weekly-writing-badge { padding: .38rem .72rem; border-radius: 999px; color: #fff; background: var(--coral); border: 1px solid rgba(255, 119, 94, .25); }
.weekly-writing-overline { margin: 1.4rem 0 .25rem; color: var(--aqua-deep); font-size: .72rem; font-weight: 900; letter-spacing: .16em; }
.weekly-writing-copy > h3 { margin: 0; color: var(--ink-deep); font-family: var(--display); font-size: clamp(1.65rem, 3.3vw, 2.65rem); line-height: 1.35; letter-spacing: -.025em; line-break: strict; text-wrap: balance; word-break: auto-phrase; }
.weekly-writing-summary { max-width: 42rem; margin: .75rem 0 1.25rem; color: #526f78; font-size: .87rem; line-height: 1.8; }
.weekly-writing-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; margin-bottom: 1rem; }
.weekly-writing-day {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: .12rem;
  padding: .52rem .2rem;
  border: 1px solid rgba(9, 43, 59, .1);
  border-radius: .9rem;
  color: #668089;
  background: #f8fbfa;
  cursor: pointer;
  transition: transform .2s, color .2s, background .2s, border-color .2s;
}
.weekly-writing-day small { font-size: .48rem; font-weight: 900; letter-spacing: .04em; }
.weekly-writing-day b { font-family: var(--display); font-size: .9rem; }
.weekly-writing-day:hover { transform: translateY(-2px); border-color: var(--aqua); }
.weekly-writing-day[aria-selected="true"] { color: #fff; border-color: transparent; background: linear-gradient(145deg, var(--coral), #ee9636); box-shadow: 0 8px 18px rgba(230, 106, 70, .26); }
.weekly-writing-today { padding: 1.25rem 1.35rem 1.15rem; border: 1px solid rgba(8, 124, 145, .13); border-radius: 1.45rem; background: linear-gradient(150deg, #fff, #f6fffd); box-shadow: 0 15px 38px rgba(18, 77, 91, .08); }
.weekly-writing-today-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.weekly-writing-today-head [data-weekly-day-label] { color: var(--coral); font-size: .56rem; font-weight: 900; letter-spacing: .16em; }
.weekly-writing-today h4 { margin: .15rem 0 .85rem; color: var(--ink-deep); font-family: var(--display); font-size: 1.04rem; }
.weekly-writing-streak { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: .25rem; color: #889aa0; font-size: .52rem; font-weight: 900; letter-spacing: .08em; }
.weekly-writing-streak b { color: var(--sun-deep); font-family: var(--display); font-size: 1.35rem; }
.weekly-writing-levels { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .85rem; }
.weekly-writing-level { min-height: 34px; padding: .35rem .7rem; border: 1px solid rgba(9, 43, 59, .11); border-radius: 999px; color: #627c84; background: #fff; font-size: .65rem; font-weight: 900; cursor: pointer; }
.weekly-writing-level[aria-selected="true"] { color: #fff; border-color: var(--coral); background: var(--coral); }
.weekly-writing-amount-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: 0 0 .8rem; }
.weekly-writing-amount-row > span { color: #536e77; font-size: .66rem; font-weight: 900; }
.weekly-writing-amounts { display: flex; gap: .3rem; padding: .22rem; border-radius: 999px; background: #edf2f1; }
.weekly-writing-amounts button { min-width: 4.5rem; display: inline-flex; align-items: center; justify-content: center; gap: .28rem; padding: .38rem .58rem; border: 0; border-radius: 999px; color: #637c84; background: transparent; cursor: pointer; }
.weekly-writing-amounts b { font-size: .67rem; }
.weekly-writing-amounts small { font-size: .48rem; }
.weekly-writing-amounts button[aria-pressed="true"] { color: #fff; background: var(--ink-deep); box-shadow: 0 6px 14px rgba(9, 43, 59, .2); }
.weekly-writing-today blockquote { position: relative; min-height: 7.6rem; display: grid; align-items: center; margin: 0; padding: .9rem 1rem .9rem 1.4rem; border-left: 4px solid var(--sun); color: #263f49; background: #fffaf0; font-family: var(--display); font-size: clamp(.96rem, 1.8vw, 1.15rem); font-weight: 600; line-height: 1.9; white-space: pre-line; }
.weekly-writing-note { display: flex; justify-content: space-between; gap: .75rem; margin: .55rem 0 .8rem; color: #789097; font-size: .61rem; }
.weekly-writing-note b { flex: 0 0 auto; color: var(--coral); }
.weekly-writing-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.weekly-writing-actions .button { min-height: 46px; padding: .65rem 1.05rem; color: #173543; background: linear-gradient(135deg, var(--sun), #ff9f43); box-shadow: 0 12px 25px rgba(242, 155, 50, .28); font-size: .76rem; }
.weekly-writing-alt { min-height: 42px; padding: .5rem .8rem; border: 0; color: var(--aqua-deep); background: transparent; font-size: .68rem; font-weight: 900; cursor: pointer; }
.weekly-writing-alt:hover { text-decoration: underline; text-underline-offset: .25em; }
.weekly-writing-status { margin: .55rem 0 0; color: #67828a; font-size: .61rem; line-height: 1.5; }
.weekly-writing-status.is-error { color: #b34838; }
.weekly-writing-visual { position: relative; display: grid; place-items: center; min-height: 100%; overflow: hidden; padding: 2rem; background: linear-gradient(155deg, #ff775e, #e45148 48%, #f2a13c); }
.weekly-writing-visual::before { content: ""; position: absolute; width: 18rem; height: 18rem; border-radius: 42% 58% 62% 38% / 50% 42% 58% 50%; background: rgba(255, 239, 174, .22); filter: blur(2px); transform: rotate(18deg); }
.weekly-writing-orbit { position: absolute; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; }
.weekly-writing-orbit-one { width: 26rem; height: 13rem; transform: rotate(-23deg); }
.weekly-writing-orbit-two { width: 14rem; height: 25rem; transform: rotate(31deg); }
.weekly-writing-calendar { position: relative; z-index: 2; width: min(100%, 20rem); padding: .75rem; border: 1px solid rgba(255, 255, 255, .5); border-radius: 1.8rem; background: rgba(255, 255, 255, .94); box-shadow: 0 26px 60px rgba(2, 40, 53, .3); transform: rotate(2deg); }
.weekly-writing-calendar-top { display: flex; align-items: center; gap: .3rem; padding: .15rem .25rem .65rem; color: #69858c; font-size: .5rem; font-weight: 900; letter-spacing: .1em; }
.weekly-writing-calendar-top i { width: .42rem; height: .42rem; border-radius: 50%; background: #d7e4e4; }
.weekly-writing-calendar-top span { margin-left: auto; }
.weekly-writing-calendar-date { display: flex; align-items: center; justify-content: space-between; padding: .6rem .8rem; border-radius: 1rem; color: #fff; background: linear-gradient(135deg, var(--coral), #f39a42); }
.weekly-writing-calendar-date small { font-weight: 900; letter-spacing: .18em; }
.weekly-writing-calendar-date strong { font-family: var(--display); font-size: 2.5rem; line-height: 1; }
.weekly-writing-paper { margin: .7rem 0; padding: .9rem; border: 1px solid #eadfc9; border-radius: 1rem; background: #fffdf7; }
.weekly-writing-paper > span { color: #af772e; font-size: .52rem; font-weight: 900; letter-spacing: .12em; }
.weekly-writing-paper p { max-height: 7.6em; margin: .45rem 0 .7rem; overflow: hidden; color: #324b54; font-family: var(--display); font-size: .82rem; font-weight: 600; line-height: 1.9; }
.weekly-writing-paper i { display: block; height: 1.8rem; border-bottom: 1px solid #ccbfa7; }
.weekly-writing-calendar-foot { padding: .25rem; color: #789097; font-size: .52rem; font-weight: 900; text-align: center; letter-spacing: .08em; }
.weekly-writing-calendar-foot b { color: var(--aqua-deep); font-size: .75rem; }
.weekly-writing-calendar-foot em { margin-inline: .25rem; color: var(--coral); font-style: normal; }
.button-penmanship { color: #fff; background: linear-gradient(145deg, #eea02f, #bd6f1f); box-shadow: 0 10px 24px rgba(189, 111, 31, .26); }
.button-penmanship:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(189, 111, 31, .34); }

@media (min-width: 900px) {
  .drill-hero-art {
    display: block;
    background-image: url("./assets/video/repeta-drill-hero-still-v1.webp");
    background-size: cover;
    background-position: 72% 42%;
    background-repeat: no-repeat;
  }
}

/* ===== 学年 / 習熟段階 / 目的 / 形式 ===== */
.drill-discovery { background: #fff; }
.discovery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 1.4rem; }
.discovery-card { padding: 1.4rem 1.5rem; border-radius: 1.5rem; border: 1px solid rgba(20, 175, 189, .16); background: linear-gradient(160deg, #f5fffc, #eef9ff); }
.discovery-card h3 { margin: 0 0 1rem; font-family: var(--display); font-size: 1rem; color: var(--ink-deep); }
.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.chip-list li { display: flex; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: .5rem .95rem;
  border-radius: 999px;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  border: 1px solid rgba(9, 43, 59, .12);
  background: #fff;
  color: #6c848c;
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s, border-color .2s;
}
button.chip { appearance: none; }
.chip:hover { transform: translateY(-1px); }
.chip-active { color: var(--aqua-deep); background: #fff; border-color: rgba(20, 175, 189, .35); }
.chip-active[aria-pressed="true"] { color: #fff; background: var(--aqua); border-color: transparent; box-shadow: 0 8px 20px rgba(8, 124, 145, .28); }
.chip-soon { color: #92a3a8; background: #f3f6f5; border-color: transparent; cursor: default; }
.chip-reset {
  color: var(--ink-deep);
  background: #fff;
  border: 1.5px solid rgba(9, 43, 59, .16);
  font-size: .76rem;
}
.chip-reset:hover { background: #f3f6f5; }
.discovery-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.filter-status { margin: 0; color: #5c747c; font-size: .78rem; font-weight: 700; }
.drill-note { max-width: 50rem; margin: 0; padding: 1rem 1.2rem; border-left: 3px solid var(--sun-deep); border-radius: .6rem; background: #fff8e6; color: #6b5a34; font-size: .82rem; line-height: 1.75; }

/* ===== A・B・C 3つの練習 ===== */
.drill-types { background: linear-gradient(150deg, #fffdf4 15%, #eafaf6 100%); }
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.type-card { position: relative; padding: 1.9rem 1.7rem; border-radius: 1.75rem; background: #fff; box-shadow: var(--shadow); }
.type-badge { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; border-radius: 50%; font-family: var(--display); font-weight: 900; font-size: 1.15rem; color: #fff; }
.type-badge-a { background: var(--aqua); }
.type-badge-b { background: var(--coral); }
.type-badge-c { background: var(--leaf); }
.type-card h3 { margin: 0 0 .7rem; font-family: var(--display); font-size: 1.15rem; color: var(--ink-deep); }
.type-card > p { margin: 0 0 1.2rem; color: #4d6872; font-size: .88rem; }
.type-steps { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; counter-reset: step; }
.type-steps li { counter-increment: step; padding: .4rem .8rem .4rem .5rem; border-radius: 999px; background: #f2f8f8; color: var(--ink-deep); font-size: .74rem; font-weight: 700; }
.type-steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-right: .35rem; border-radius: 50%; background: var(--aqua); color: #fff; font-size: .64rem; font-weight: 900; }

/* ===== ダウンロード ===== */
.drill-catalog { background: #fff; }
.download-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }

/* しぼり込み・ライブラリ（折りたたみ）。JS無しでも開閉でき、中身は常にDOMにある。 */
.drill-refine, .drill-library {
  margin: 0 0 1.8rem;
  border: 1px solid rgba(20, 175, 189, .22);
  border-radius: 1.35rem;
  background: linear-gradient(160deg, #f7fffd, #f1fbff);
}
.drill-library { margin: 2rem 0 0; }
.drill-refine > summary, .drill-library > summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  padding: 1rem 1.3rem;
  border-radius: 1.35rem;
  color: var(--ink-deep);
  cursor: pointer;
  list-style: none;
}
.drill-refine > summary::-webkit-details-marker,
.drill-library > summary::-webkit-details-marker { display: none; }
.drill-refine > summary::after, .drill-library > summary::after {
  content: "＋";
  margin-left: auto;
  color: var(--aqua-deep);
  font-weight: 900;
}
.drill-refine[open] > summary::after, .drill-library[open] > summary::after { content: "−"; }
.drill-refine > summary b, .drill-library > summary b { font-family: var(--display); font-size: clamp(.9rem, 2vw, 1.05rem); }
.drill-refine > summary span, .drill-library > summary span { color: #6c848c; font-size: .72rem; font-weight: 800; }
.drill-refine > summary:hover, .drill-library > summary:hover { background: rgba(20, 175, 189, .07); }
.drill-refine-body, .drill-library-body { padding: 0 clamp(.9rem, 2.4vw, 1.3rem) clamp(1rem, 2.4vw, 1.4rem); }
.drill-refine-body .discovery-grid { margin-bottom: 1rem; }
.drill-refine-body .discovery-actions { margin-bottom: 0; }
.drill-library-note { max-width: 46rem; margin: 0 0 1.3rem; color: #536e77; font-size: .82rem; line-height: 1.75; }
.download-card { padding: 1.6rem; border-radius: 1.75rem; border: 1px solid rgba(9, 43, 59, .1); background: linear-gradient(180deg, #fff, #fbfefe); box-shadow: var(--shadow); }
.download-card[hidden] { display: none; }
.download-card img { width: 100%; height: auto; margin-bottom: 1.1rem; border-radius: 1rem; border: 1px solid rgba(9, 43, 59, .1); box-shadow: 0 16px 34px rgba(9, 43, 59, .1); }
.download-tag { display: inline-block; margin-bottom: .8rem; padding: .3rem .8rem; border-radius: 999px; background: #eafcfc; color: var(--aqua-deep); font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.download-card h3 { margin: 0 0 .6rem; font-family: var(--display); font-size: 1.1rem; color: var(--ink-deep); }
.download-card > p { margin: 0 0 1rem; color: #4d6872; font-size: .85rem; }
.download-meta { display: grid; gap: .45rem; margin: 0 0 1.1rem; padding: .9rem 1rem; border-radius: 1rem; background: #f7faf9; }
.download-meta div { display: flex; align-items: baseline; gap: .5rem; }
.download-meta dt { flex: 0 0 4.4rem; margin: 0; color: #7c9199; font-size: .68rem; font-weight: 800; }
.download-meta dd { flex: 1; margin: 0; color: var(--ink-deep); font-size: .74rem; font-weight: 700; }
.download-specs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.3rem; list-style: none; }
.download-specs li { padding: .3rem .75rem; border-radius: 999px; background: #f3f6f5; color: #5c747c; font-size: .7rem; font-weight: 800; }
.download-button { width: 100%; }
.download-button span { text-align: center; }
.download-card-actions { display: flex; flex-direction: column; gap: .6rem; }
.download-empty { max-width: 40rem; margin: 1.6rem 0 0; padding: 1rem 1.2rem; border-radius: .8rem; background: #fff8e6; color: #6b5a34; font-size: .84rem; text-align: center; }
.download-empty[hidden] { display: none; }
.catalog-editor-bridge { display: grid; grid-template-columns: 9.5rem 1fr; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: 2rem; padding: clamp(1.2rem, 3vw, 2rem); overflow: hidden; border: 1px solid rgba(20, 175, 189, .2); border-radius: 1.75rem; background: linear-gradient(135deg, #e9fcfa, #fff8e5); }
.catalog-editor-bridge img { width: 9.5rem; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(9, 43, 59, .16)); }
.catalog-editor-label { display: block; margin-bottom: .35rem; color: var(--aqua-deep); font-size: .62rem; font-weight: 900; letter-spacing: .16em; }
.catalog-editor-bridge h3 { margin: 0 0 .45rem; color: var(--ink-deep); font-family: var(--display); font-size: clamp(1.05rem, 2vw, 1.35rem); }
.catalog-editor-bridge p { margin: 0; color: #536e77; font-size: .82rem; line-height: 1.75; }
.catalog-editor-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.catalog-editor-actions .button { min-height: 44px; padding: .65rem 1rem; font-size: .72rem; }

/* ===== 学年・ブロックまるごと ===== */
.drill-bundles { background: linear-gradient(160deg, #fff 0%, #f5fffc 60%, #eafcfc 100%); }
.bundle-filter { margin-bottom: 1.6rem; }
.bundle-filter .chip-list { margin-bottom: 1rem; }
.bundle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-bottom: 2rem; }
.bundle-card[hidden] { display: none; }
.bundle-actions { display: grid; gap: .7rem; }
.bundle-actions .button { width: 100%; }
.bundle-actions .button span { text-align: center; }
.bundle-callout { margin-top: .4rem; padding: 1.8rem 2rem; border-radius: 1.5rem; background: linear-gradient(160deg, #fff8e6, #fff3d1); border: 1px solid rgba(242, 155, 50, .25); }
.bundle-callout-badge { display: inline-block; margin-bottom: .8rem; padding: .4rem 1rem; border-radius: 999px; background: var(--sun); color: var(--ink-deep); font-size: .7rem; font-weight: 900; letter-spacing: .06em; }
.bundle-callout h3 { margin: 0 0 .7rem; font-family: var(--display); font-size: 1.15rem; color: var(--ink-deep); }

/* ===== エディター紹介動画 ===== */
.drill-demo {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 9% 18%, rgba(255, 211, 103, .2), transparent 26rem),
    radial-gradient(circle at 92% 88%, rgba(96, 225, 190, .2), transparent 28rem),
    linear-gradient(135deg, #083f46 0%, #075d61 58%, #0b7771 100%);
}
.drill-demo::before,
.drill-demo::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.drill-demo::before { width: 17rem; height: 17rem; top: -10rem; right: 18%; border: 1px solid rgba(255, 255, 255, .12); }
.drill-demo::after { width: 9rem; height: 9rem; bottom: -5rem; left: 38%; background: rgba(255, 211, 103, .08); }
.drill-demo-inner { position: relative; z-index: 1; display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: clamp(2rem, 5vw, 4.4rem); }
.drill-demo-copy h2 { color: #fff; }
.drill-demo-copy h2 span { color: #ffe49a; }
.drill-demo-copy > p { margin: 0 0 1.5rem; color: rgba(255, 255, 255, .82); }
.drill-demo-points { display: grid; gap: .7rem; margin: 0 0 1.8rem; list-style: none; }
.drill-demo-points li { display: flex; align-items: center; gap: .8rem; color: rgba(255, 255, 255, .9); font-size: .86rem; font-weight: 700; }
.drill-demo-points b { display: grid; place-items: center; flex: 0 0 1.75rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: #084c50; background: #ffe49a; font-size: .72rem; }
.drill-demo-stage { position: relative; padding: .55rem; border-radius: 1.7rem; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 34px 90px rgba(1, 28, 31, .36); backdrop-filter: blur(12px); }
.drill-demo-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1.25rem; background: #edf8f1; }
.drill-demo-badge { position: absolute; z-index: 2; top: 1.2rem; right: 1.2rem; padding: .35rem .75rem; border-radius: 999px; color: #fff; background: rgba(8, 63, 70, .78); border: 1px solid rgba(255, 255, 255, .35); font-size: .62rem; font-weight: 900; letter-spacing: .14em; backdrop-filter: blur(8px); }
.drill-demo-caption { position: absolute; z-index: 2; right: 1.2rem; bottom: 1.2rem; display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .7rem; border-radius: 999px; color: #fff; background: rgba(8, 63, 70, .74); font-size: .62rem; font-weight: 800; backdrop-filter: blur(8px); }
.drill-demo-caption i { width: .5rem; height: .5rem; border-radius: 50%; background: #7df1ce; box-shadow: 0 0 0 .24rem rgba(125, 241, 206, .13); }
.bundle-callout p { margin: 0; max-width: 52rem; color: #6b5a34; font-size: .86rem; line-height: 1.8; }
.bundle-callout-action { margin-top: 1.2rem; }

/* ===== 自分だけのプリントエディター ===== */
.drill-editor { background: linear-gradient(150deg, #edfdf9 0%, #fff9e8 48%, #f0f8ff 100%); }
.editor-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; width: min(100%, 48rem); margin-bottom: 1.4rem; padding: .45rem; border-radius: 1.35rem; background: rgba(9, 43, 59, .08); }
.editor-mode { min-height: 68px; display: grid; gap: .2rem; align-content: center; padding: .75rem 1.15rem; border: 0; border-radius: 1rem; color: #5c747c; background: transparent; text-align: left; cursor: pointer; }
.editor-mode b { font-family: var(--display); font-size: .92rem; }
.editor-mode span { font-size: .69rem; font-weight: 700; }
.editor-mode.is-active { color: #fff; background: var(--aqua-deep); box-shadow: 0 10px 22px rgba(8, 124, 145, .24); }
.editor-workspace { display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); gap: 1.6rem; align-items: start; }
.editor-controls, .editor-preview-shell { border: 1px solid rgba(9, 43, 59, .1); border-radius: 1.75rem; background: rgba(255, 255, 255, .94); box-shadow: var(--shadow); }
.editor-controls { padding: clamp(1.25rem, 3vw, 2rem); }
.editor-panel[hidden] { display: none; }
.editor-step { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1rem; }
.editor-step-spaced { margin-top: 1.8rem; }
.editor-step-number { flex: 0 0 2rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; background: var(--coral); font-size: .8rem; font-weight: 900; }
.editor-step h3 { margin: 0 0 .25rem; font-family: var(--display); color: var(--ink-deep); font-size: 1rem; }
.editor-step p { margin: 0; color: #657d85; font-size: .78rem; line-height: 1.6; }
.editor-field { display: grid; gap: .45rem; margin-bottom: 1rem; color: var(--ink-deep); font-size: .78rem; font-weight: 900; }
.editor-field select, .editor-field input, .editor-field textarea { width: 100%; border: 1.5px solid rgba(9, 43, 59, .14); border-radius: .9rem; color: var(--ink-deep); background: #fff; font: inherit; font-weight: 600; }
.editor-field select, .editor-field input { min-height: 46px; padding: .65rem .8rem; }
.editor-field textarea { min-height: 9rem; padding: .8rem 1rem; resize: vertical; line-height: 1.8; }
.editor-field select:focus, .editor-field input:focus, .editor-field textarea:focus { outline: 3px solid rgba(242, 155, 50, .3); border-color: var(--sun-deep); }
.editor-field-hint { margin: -0.55rem 0 1rem; color: #6e848b; font-size: .72rem; line-height: 1.6; }
.penmanship-source-field { position: relative; padding: 1rem; border: 1px solid rgba(189, 111, 31, .22); border-radius: 1.1rem; background: linear-gradient(145deg, #fffdf8, #fff8e9); box-shadow: 0 10px 24px rgba(79, 55, 22, .07); }
.penmanship-source-field > span::before { content: "お手本"; display: inline-grid; place-items: center; min-width: 3.2rem; min-height: 1.55rem; margin-right: .5rem; padding: 0 .55rem; border-radius: 999px; color: #fff; background: #bd6f1f; font-size: .58rem; letter-spacing: .04em; vertical-align: middle; }
.penmanship-source-field textarea { min-height: 10.5rem; padding: .55rem 1rem; border-color: rgba(189, 111, 31, .28); border-left: 5px solid #e49a35; background-color: #fffdf7; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2.25rem - 1px), rgba(189, 111, 31, .2) calc(2.25rem - 1px), rgba(189, 111, 31, .2) 2.25rem); font-family: var(--display); font-size: 1rem; font-weight: 500; line-height: 2.25rem; }
.penmanship-source-field small { color: #7d6848; font-size: .67rem; font-weight: 700; line-height: 1.6; }
.kanji-block-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: -.25rem 0 1.15rem; }
.kanji-block-button { min-height: 38px; padding: .45rem .35rem; border: 1px solid rgba(9, 43, 59, .13); border-radius: .7rem; color: #526c75; background: #f7faf9; font-size: .69rem; font-weight: 900; cursor: pointer; }
.kanji-block-button:hover { border-color: var(--aqua); background: #eafcfc; }
.kanji-block-button.is-active { color: #fff; border-color: transparent; background: var(--aqua-deep); box-shadow: 0 5px 12px rgba(8, 124, 145, .18); }
.editor-selection-actions, .editor-samples { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .75rem; }
/* 完成PDFと同じ6テーマのワンタップ・プリセット（文言は tools/worksheets_content.py と同一） */
.editor-presets { margin: .2rem 0 1rem; padding: .9rem 1rem 1rem; border: 1px solid rgba(8, 124, 145, .16); border-radius: 1.15rem; background: #f6fdfc; }
.editor-presets-title { margin: 0; color: var(--ink-deep); font-family: var(--display); font-size: .84rem; }
.editor-presets-hint { margin: .25rem 0 .75rem; color: #657d85; font-size: .68rem; line-height: 1.6; }
.editor-presets-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.editor-preset {
  min-width: 0;
  min-height: 44px;
  display: grid;
  align-content: center;
  gap: .1rem;
  padding: .5rem .55rem;
  border: 1px solid rgba(9, 43, 59, .13);
  border-radius: .8rem;
  color: var(--ink-deep);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
}
.editor-preset b { font-family: var(--display); font-size: .74rem; line-height: 1.35; }
.editor-preset small { color: #7d939a; font-size: .58rem; font-weight: 800; }
.editor-preset:hover { transform: translateY(-2px); border-color: var(--aqua); background: #eafcfc; }
.editor-mini-button { padding: .5rem .75rem; border: 1px solid rgba(9, 43, 59, .13); border-radius: .7rem; color: var(--ink-deep); background: #f7faf9; font-size: .72rem; font-weight: 800; cursor: pointer; }
.editor-mini-button:hover { border-color: var(--aqua); background: #eafcfc; }
.sentence-maker { margin: 1rem 0 1.4rem; padding: 1rem; border: 1px solid rgba(8, 124, 145, .17); border-radius: 1.15rem; background: linear-gradient(145deg, #f1fffc, #fff9e8); }
.sentence-maker-heading { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.sentence-maker-icon { display: grid; place-items: center; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--ink-deep); background: var(--sun); box-shadow: 0 8px 18px rgba(242, 155, 50, .2); }
.sentence-maker-heading h4 { margin: 0; color: var(--ink-deep); font-family: var(--display); font-size: .84rem; }
.sentence-maker-heading p { margin: .1rem 0 0; color: #657d85; font-size: .68rem; line-height: 1.55; }
.sentence-maker-quick { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem .7rem; margin-bottom: .9rem; }
.sentence-maker-quick > span { color: #657d85; font-size: .62rem; font-weight: 700; }
.sentence-maker-ai-options { border-top: 1px dashed rgba(8, 124, 145, .2); }
.sentence-maker-ai-options > summary { display: flex; justify-content: space-between; gap: .8rem; padding: .78rem 0 .1rem; color: var(--ink-deep); cursor: pointer; list-style: none; }
.sentence-maker-ai-options > summary::-webkit-details-marker { display: none; }
.sentence-maker-ai-options > summary::after { content: "+"; flex: 0 0 auto; color: var(--aqua-deep); font-size: 1rem; line-height: 1; }
.sentence-maker-ai-options[open] > summary::after { content: "−"; }
.sentence-maker-ai-options > summary b { font-family: var(--display); font-size: .74rem; }
.sentence-maker-ai-options > summary span { color: #657d85; font-size: .62rem; font-weight: 700; }
.sentence-maker-ai-heading { display: grid; gap: .1rem; margin: .2rem 0 .7rem; padding-top: .8rem; border-top: 1px dashed rgba(8, 124, 145, .2); }
.sentence-maker-ai-heading b { color: var(--ink-deep); font-family: var(--display); font-size: .76rem; }
.sentence-maker-ai-heading span { color: #657d85; font-size: .63rem; }
.sentence-maker-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.sentence-maker-fields label, .sentence-maker-focus { display: grid; gap: .35rem; color: var(--ink-deep); font-size: .68rem; font-weight: 900; }
.sentence-maker-fields select, .sentence-maker-focus input, .sentence-maker-focus textarea { width: 100%; min-height: 42px; padding: .55rem .7rem; border: 1px solid rgba(9, 43, 59, .14); border-radius: .7rem; color: var(--ink-deep); background: #fff; font: inherit; font-size: .72rem; font-weight: 700; }
.sentence-maker-focus textarea { resize: vertical; line-height: 1.6; }
.sentence-maker-focus { margin-top: .7rem; }
.sentence-maker-fields select:focus, .sentence-maker-focus input:focus, .sentence-maker-focus textarea:focus { outline: 3px solid rgba(242, 155, 50, .25); border-color: var(--sun-deep); }
.sentence-maker-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.sentence-maker-primary { color: #fff; border-color: transparent; background: var(--aqua-deep); }
.sentence-maker-primary:hover { color: #fff; border-color: transparent; background: #075f71; }
.sentence-maker-link { display: inline-flex; align-items: center; }
.sentence-maker-status { margin: .75rem 0 0; color: var(--aqua-deep); font-size: .68rem; font-weight: 800; }
.sentence-prompt-preview { margin-top: .75rem; border: 1px solid rgba(8, 124, 145, .14); border-radius: .8rem; background: rgba(255, 255, 255, .72); }
.sentence-prompt-preview summary { padding: .65rem .75rem; color: var(--ink-deep); font-size: .66rem; font-weight: 900; cursor: pointer; }
.sentence-prompt-preview pre { max-height: 18rem; overflow: auto; margin: 0; padding: .75rem; border-top: 1px solid rgba(8, 124, 145, .12); color: #405d67; font-family: var(--body); font-size: .62rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.sentence-maker-note { margin: .45rem 0 0; color: #7a6a49; font-size: .62rem; line-height: 1.55; }
.editor-selection-status { margin: 0 0 .7rem; color: #5c747c; font-size: .74rem; font-weight: 800; }
.kanji-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.8rem, 1fr)); gap: .4rem; max-height: 17rem; padding: .75rem; overflow-y: auto; border: 1px solid rgba(9, 43, 59, .1); border-radius: 1rem; background: #f7faf9; }
.kanji-choice { aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: .08rem; border: 1px solid rgba(9, 43, 59, .12); border-radius: .65rem; color: var(--ink-deep); background: #fff; font-family: var(--display); cursor: pointer; }
.kanji-choice b { font-size: 1.15rem; }
.kanji-choice small { max-width: 100%; overflow: hidden; font-family: var(--body); font-size: .45rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.kanji-choice[aria-pressed="true"] { color: #fff; background: var(--aqua-deep); border-color: transparent; box-shadow: 0 6px 14px rgba(8, 124, 145, .22); }
.kanji-picker-empty { grid-column: 1 / -1; margin: 1rem; color: #7c9199; text-align: center; font-size: .8rem; }
.editor-choice-group { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 1rem; padding: 0; border: 0; }
.editor-choice-group legend { width: 100%; margin-bottom: .45rem; color: var(--ink-deep); font-size: .78rem; font-weight: 900; }
.editor-choice-group label { cursor: pointer; }
.editor-choice-group input { position: absolute; opacity: 0; pointer-events: none; }
.editor-choice-group span { display: inline-flex; min-height: 42px; align-items: center; padding: .55rem .9rem; border: 1.5px solid rgba(9, 43, 59, .13); border-radius: .8rem; background: #fff; font-size: .76rem; font-weight: 900; }
.editor-choice-group input:checked + span { color: #fff; background: var(--aqua-deep); border-color: transparent; }
.editor-choice-group input:focus-visible + span { outline: 3px solid var(--sun-deep); outline-offset: 2px; }
.editor-choice-group label.is-disabled { cursor: not-allowed; opacity: .42; }
.editor-choice-subgroup { margin-top: -.2rem; padding: .8rem; border: 1px dashed rgba(189, 111, 31, .28); border-radius: 1rem; background: #fffaf0; }
.editor-actions { display: grid; gap: .55rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(9, 43, 59, .1); }
.editor-actions .button { width: 100%; }
.editor-actions .button:disabled { cursor: not-allowed; opacity: .42; box-shadow: none; transform: none; }
.editor-actions p { margin: 0; color: #687f87; font-size: .74rem; text-align: center; }
.editor-preview-shell { position: sticky; top: 6.5rem; padding: 1rem; overflow: hidden; }
.editor-preview-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; padding: .25rem .35rem; }
.editor-preview-heading span { color: var(--aqua-deep); font-size: .62rem; font-weight: 900; letter-spacing: .16em; }
.editor-preview-heading h3 { margin: .15rem 0 0; font-family: var(--display); color: var(--ink-deep); font-size: 1rem; }
.editor-preview-heading p { margin: 0; color: #6c848c; font-size: .72rem; font-weight: 800; }
.editor-preview { min-height: 32rem; max-height: 72vh; padding: 1rem; overflow: auto; border-radius: 1.15rem; background: #dbe5e4; }
.editor-preview-empty { min-height: 28rem; display: grid; place-content: center; gap: .35rem; border: 2px dashed rgba(9, 43, 59, .18); border-radius: 1rem; color: #6c848c; text-align: center; }
.editor-preview-empty b { color: var(--ink-deep); font-family: var(--display); }
.editor-preview-empty span { font-size: .78rem; }

/* エディターが作るA4紙面。画面では縮小し、印刷時だけ実寸に戻す。 */
.print-sheet { position: relative; width: 210mm; height: 297mm; padding: 11mm 12mm 10mm; overflow: hidden; color: #173847; background: #fff; font-family: "Klee One", "Yu Mincho", serif; box-shadow: 0 12px 34px rgba(9, 43, 59, .2); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.worksheet-header { min-height: 27mm; display: grid; grid-template-columns: 38mm 1fr 20mm; align-items: start; gap: 5mm; padding-bottom: 4mm; border-bottom: 1.2px solid #42b8bc; }
.worksheet-brand { display: grid; gap: 1mm; color: #087c91; }
.worksheet-brand b { font-family: var(--display); font-size: 11pt; }
.worksheet-brand span { color: #607980; font-family: var(--body); font-size: 6.5pt; }
.worksheet-heading { text-align: center; }
.worksheet-heading h2 { margin: 0 0 1.5mm; color: #173847; font-family: "Klee One", "Yu Mincho", serif; font-size: 15pt; letter-spacing: .04em; }
.worksheet-heading p { margin: 0; color: #607980; font-size: 7.5pt; }
.worksheet-page-meta { justify-self: end; padding: 1.6mm 2.5mm; border-radius: 999px; color: #087c91; background: #e7f9f8; font-size: 7pt; font-weight: 700; }
.worksheet-footer { position: absolute; right: 12mm; bottom: 5mm; left: 12mm; display: flex; justify-content: space-between; padding-top: 2mm; border-top: .7px solid #adc1c5; color: #71888f; font-size: 6.5pt; }
.worksheet-kanji-grid { height: 241mm; display: grid; gap: 4mm; padding: 6mm 0 5mm; }
.worksheet-kanji-card { min-width: 0; padding: 3.5mm; border: .8px solid #adc1c5; border-radius: 3mm; background: #fff; }
.worksheet-kanji-card.is-retry { border-style: dashed; background: #fffaf0; }
.worksheet-kanji-label { display: flex; align-items: baseline; gap: 2.2mm; margin-bottom: 2.2mm; white-space: nowrap; }
.worksheet-kanji-label b { color: #173847; font-size: 14pt; }
.worksheet-kanji-label span { color: #45626c; font-size: 7.2pt; }
.worksheet-kanji-label small { margin-left: auto; color: #71888f; font-size: 6.6pt; overflow: hidden; text-overflow: ellipsis; }
.practice-boxes { display: grid; grid-auto-flow: row; grid-template-columns: repeat(var(--practice-columns), minmax(0, 1fr)); align-content: start; gap: 1.2mm; }
.practice-box { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: .7px solid #9fb7bb; color: #173847; font-size: 16pt; }
.practice-box::before, .practice-box::after { content: ""; position: absolute; pointer-events: none; opacity: .38; }
.practice-box::before { top: 50%; right: 0; left: 0; border-top: .45px dashed #adc1c5; }
.practice-box::after { top: 0; bottom: 0; left: 50%; border-left: .45px dashed #adc1c5; }
.practice-box.is-model { border-color: #42b8bc; background: #e7f9f8; font-weight: 700; }
.practice-box.is-trace { color: rgba(23, 56, 71, .28); }
.practice-box.is-free { border-style: dashed; background: #fff4d8; }
.profile-large .worksheet-kanji-grid { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); gap: 5mm; }
.profile-large .worksheet-kanji-card { padding: 5mm; }
.profile-large .worksheet-kanji-label { margin-bottom: 4mm; }
.profile-large .practice-boxes { gap: 2mm; }
.profile-large .practice-box { font-size: 18pt; }
.profile-beginner .worksheet-kanji-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 5mm; }
.profile-standard .worksheet-kanji-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
.profile-dense .worksheet-kanji-grid, .profile-compact .worksheet-kanji-grid { grid-template-columns: 1fr; grid-template-rows: repeat(7, 1fr); gap: 2.5mm; }
.profile-dense .worksheet-kanji-card, .profile-compact .worksheet-kanji-card { display: grid; grid-template-columns: 43mm 1fr; align-items: center; gap: 3mm; padding: 2.2mm 3mm; }
.profile-dense .worksheet-kanji-label, .profile-compact .worksheet-kanji-label { margin: 0; }
.profile-dense .practice-box, .profile-compact .practice-box { font-size: 13pt; }

.penmanship-body { display: grid; align-content: start; gap: 6mm; padding: 7mm 0; }
.penmanship-tips { display: grid; gap: 3mm; margin-top: 5mm; padding: 4mm 5mm; border: .7px solid #a9c8cb; border-radius: 4mm; background: #eefafa; color: #173847; }
.penmanship-tips > b { font-family: var(--display); font-size: 8pt; }
.penmanship-tip-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; }
.penmanship-tip { display: flex; align-items: center; gap: 2.5mm; }
.penmanship-tip strong { display: grid; place-items: center; width: 11mm; height: 11mm; border: .7px solid #9fb7bb; background: #fff; font-family: var(--display); font-size: 17pt; }
.penmanship-tip:nth-child(2) strong { font-size: 12pt; }
.penmanship-tip small { font-family: var(--body); font-size: 6.5pt; font-weight: 700; line-height: 1.45; }
.horizontal-sheet { --horizontal-row-height: 11mm; --horizontal-font-size: 18pt; }
.horizontal-sheet.size-large { --horizontal-row-height: 13mm; --horizontal-font-size: 21pt; }
.horizontal-sheet.size-compact { --horizontal-row-height: 9.5mm; --horizontal-font-size: 15pt; }
.pen-horizontal-block { display: grid; gap: 1.2mm; padding-bottom: 3mm; border-bottom: .7px solid #d4dfe0; }
.pen-row { display: grid; grid-template-columns: 15mm 1fr; align-items: center; gap: 2mm; }
.pen-row-label { color: #607980; font-family: var(--body); font-size: 6.5pt; text-align: center; }
.pen-row-cells { position: relative; display: flex; align-items: end; height: var(--horizontal-row-height); overflow: hidden; border-top: .65px solid #9fb7bb; border-bottom: .65px solid #9fb7bb; background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(10mm - .45px), rgba(159, 183, 187, .55) 10mm); font-size: var(--horizontal-font-size); }
.pen-row-cells::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; border-top: .45px dashed rgba(159, 183, 187, .72); }
.pen-inline-char { position: relative; z-index: 1; display: grid; place-items: end center; width: 9.5mm; height: 100%; padding-bottom: 1mm; color: #173847; font-family: var(--display); font-size: 1em; line-height: 1; }
.pen-inline-char.is-kana { width: 7.2mm; padding-bottom: 1.35mm; font-size: var(--penmanship-kana-scale, 76%); }
.pen-inline-char.is-punctuation { width: 5mm; padding-bottom: 1.35mm; font-size: 66%; }
.pen-inline-char.is-trace { color: rgba(23, 56, 71, .24); }
.pen-inline-char.is-blank { color: transparent; }
.pen-cell { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; border: .65px solid #9fb7bb; color: #173847; font-size: 14pt; }
.pen-cell.is-trace { color: rgba(23, 56, 71, .26); }
.size-large .pen-cell { font-size: 17pt; }
.size-compact .pen-cell { font-size: 11pt; }
.vertical-sheet { --vertical-cell-size: 12mm; --vertical-kanji-size: 20pt; }
.vertical-sheet.size-large { --vertical-cell-size: 16mm; --vertical-kanji-size: 27pt; }
.vertical-sheet.size-compact { --vertical-cell-size: 11mm; --vertical-kanji-size: 18pt; }
.vertical-body { height: 205mm; display: flex; flex-direction: row-reverse; justify-content: center; gap: 4mm; padding: 7mm 0 4mm; }
.pen-vertical-block { display: flex; flex-direction: row-reverse; gap: 1.6mm; padding-left: 3mm; border-left: .7px solid #d4dfe0; }
.pen-column { display: flex; flex-direction: column; align-items: center; font-size: var(--vertical-kanji-size); }
.pen-column-label { width: var(--vertical-cell-size); margin-bottom: 1.8mm; color: #607980; font-family: var(--body); font-size: 6pt; text-align: center; }
.pen-column .pen-cell { position: relative; width: var(--vertical-cell-size); height: var(--vertical-cell-size); flex: 0 0 var(--vertical-cell-size); font-family: var(--display); font-size: 1em; line-height: 1; }
.pen-column .pen-cell::before, .pen-column .pen-cell::after { content: ""; position: absolute; pointer-events: none; opacity: .42; }
.pen-column .pen-cell::before { top: 50%; right: 0; left: 0; border-top: .45px dashed #adc1c5; }
.pen-column .pen-cell::after { top: 0; bottom: 0; left: 50%; border-left: .45px dashed #adc1c5; }
.pen-column.is-model .pen-cell:first-of-type { border-color: #42b8bc; background: #e7f9f8; }
.pen-column .pen-cell.is-kana { font-size: var(--penmanship-kana-scale, 76%); }
.pen-column .pen-cell.is-punctuation { place-items: start end; padding: 1.3mm 1.2mm 0 0; font-size: 42%; }
.vertical-sheet.guide-line .pen-column { background: rgba(255, 253, 247, .7); }
.vertical-sheet.guide-line .pen-column .pen-cell { border-top: 0; border-bottom: 0; border-right-color: rgba(159, 183, 187, .72); border-left-color: rgba(159, 183, 187, .72); }
.vertical-sheet.guide-line .pen-column .pen-cell::before { top: auto; right: 34%; bottom: 0; left: 34%; border-top-style: solid; opacity: .32; }
.vertical-sheet.guide-line .pen-column .pen-cell::after { opacity: .56; }
.vertical-sheet.guide-line .pen-column .pen-cell:first-of-type { border-top: .65px solid rgba(159, 183, 187, .72); }
.vertical-sheet.guide-line .pen-column .pen-cell:last-of-type { border-bottom: .65px solid rgba(159, 183, 187, .72); }
.genkou-grid { --genkou-kanji-size: 14pt; --genkou-punctuation-size: 5.88pt; position: relative; width: 180mm; height: 220mm; display: grid; grid-template-columns: repeat(var(--genkou-columns), 1fr); grid-template-rows: repeat(var(--genkou-rows), 1fr); margin: 9mm auto 0; border: 1.2px solid #c27979; font-size: var(--genkou-kanji-size); }
.genkou-grid .pen-cell { aspect-ratio: auto; border-color: rgba(194, 121, 121, .7); font-size: 1em; }
.genkou-sheet.size-large .genkou-grid { --genkou-kanji-size: 18pt; --genkou-punctuation-size: 7.56pt; }
.genkou-grid .pen-cell.is-kana { font-size: var(--penmanship-kana-scale, 76%); }
.genkou-grid .pen-cell.is-punctuation { align-items: start; justify-items: end; padding: .75mm .75mm 0 0; font-size: var(--genkou-punctuation-size); }
.genkou-grid .has-combined-mark { position: relative; }
.genkou-main { display: grid; place-items: center; width: 100%; height: 100%; }
.genkou-mark { position: absolute; right: .6mm; bottom: .4mm; font-size: .48em; line-height: 1; }
.genkou-direction-note { position: absolute; top: -7mm; right: 0; margin: 0; color: #9b6767; font-family: var(--body); font-size: 6.5pt; font-weight: 800; }

@media screen {
  .editor-preview .print-sheet { margin: 0 auto 1rem; zoom: .5; }
}

/* ===== マス目が効くわけ ===== */
.drill-why { background: linear-gradient(150deg, #083f50 0%, #0a5a68 55%, #0c7a80 100%); color: #fff; }
.drill-why h2 { color: #fff; }
.drill-why h2 span { color: #fff2a7; }
.drill-why .drill-lead { color: rgba(255, 255, 255, .82); }
.drill-why .section-kicker { color: #9fe9e2; }
.why-layout { display: grid; grid-template-columns: .95fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.why-list { display: grid; gap: 1.1rem; list-style: none; }
.why-list li { padding: 1.3rem 1.4rem; border-radius: 1.25rem; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px); }
.why-list h3 { margin: 0 0 .5rem; font-family: var(--display); font-size: 1rem; color: #fff2a7; }
.why-list p { margin: 0; color: rgba(255, 255, 255, .82); font-size: .84rem; }

/* ===== AI先生 ===== */
.drill-ai { background: #fffdf4; }
.ai-layout { display: grid; grid-template-columns: .95fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ai-copy .section-kicker { color: var(--aqua-deep); }
.ai-status-badge { display: inline-block; margin-bottom: 1rem; padding: .45rem 1rem; border-radius: 999px; background: var(--sun); color: var(--ink-deep); font-size: .72rem; font-weight: 900; letter-spacing: .06em; }
.ai-copy h2 { color: var(--ink-deep); }
.ai-copy > p { max-width: 34rem; color: #4d6872; }
.ai-safety { padding: 1.6rem 1.8rem; border-radius: 1.5rem; background: #fff; border: 1px solid rgba(9, 43, 59, .1); box-shadow: var(--shadow); }
.ai-safety h3 { margin: 0 0 .9rem; font-family: var(--display); font-size: 1rem; color: var(--ink-deep); }
.ai-safety ul { display: grid; gap: .7rem; list-style: none; }
.ai-safety li { position: relative; padding-left: 1.3rem; color: #4d6872; font-size: .84rem; line-height: 1.7; }
.ai-safety li::before { content: "✓"; position: absolute; left: 0; color: var(--aqua-deep); font-weight: 900; }

/* ===== REPETAの世界 ===== */
.drill-world { position: relative; min-height: clamp(34rem, 66vw, 48rem); display: grid; align-items: center; overflow: hidden; color: #fff; background: #062d3b; }
.drill-world-video, .drill-world-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.drill-world-video { object-fit: cover; background: #062d3b; }
.drill-world-shade { background: linear-gradient(90deg, rgba(4, 28, 39, .9) 0%, rgba(4, 35, 44, .72) 42%, rgba(4, 35, 44, .18) 72%), linear-gradient(0deg, rgba(4, 28, 39, .6), transparent 45%); }
.drill-world-copy { position: relative; z-index: 2; width: min(1120px, calc(100% - 2.4rem)); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) 0 8rem; }
.drill-world-copy h2 { max-width: 40rem; margin: 0 0 1rem; color: #fff; font-family: var(--display); font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.3; letter-spacing: -.03em; }
.drill-world-copy h2 span { color: #fff0a6; }
.drill-world-copy > p { max-width: 34rem; margin: 0 0 1.6rem; color: rgba(255, 255, 255, .88); }
.drill-world-evolution { position: absolute; z-index: 3; right: max(1.2rem, calc((100vw - 1120px) / 2)); bottom: 1.2rem; display: flex; align-items: center; gap: .15rem; padding: .45rem .8rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(5, 44, 53, .58); backdrop-filter: blur(12px); }
.drill-world-evolution img { width: clamp(3.2rem, 7vw, 5.8rem); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .25)); }
.drill-world-evolution i { color: #ffe49a; font-style: normal; font-weight: 900; }

/* ===== フィナーレ ===== */
.drill-finale { padding: clamp(3.5rem, 8vw, 6rem) 0; text-align: center; color: #fff; background: linear-gradient(140deg, #087c91 0%, #14afbd 55%, #55c990 100%); }
.drill-finale-inner { width: min(760px, calc(100% - 2.4rem)); margin: 0 auto; }
.drill-finale h2 { color: #fff; margin-bottom: 1rem; }
.drill-finale h2 span { color: #fff2a7; }
.drill-finale > .drill-finale-inner > p { margin: 0 auto 1.8rem; max-width: 34rem; color: rgba(255, 255, 255, .9); }
.drill-finale-actions { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; }

/* ===== フッター ===== */
.drill-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; padding: 2rem clamp(1.2rem, 4vw, 3rem); color: rgba(255, 255, 255, .75); background: var(--ink-deep); font-size: .68rem; }
.drill-brand-footer { color: #fff; }
.drill-brand-footer em { color: #9fe9e2; }
.drill-footer p { margin: 0; }
.drill-footer nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.drill-footer small { grid-column: 3; }

/* ===== レスポンシブ ===== */
@media (max-width: 1180px) {
  .discovery-grid { grid-template-columns: repeat(2, 1fr); }
  .type-grid, .download-grid, .bundle-grid { grid-template-columns: repeat(2, 1fr); }
  .editor-workspace { grid-template-columns: 1fr; }
  .editor-preview-shell { position: static; }
}

@media (max-width: 1024px) {
  .drill-hero-inner { grid-template-columns: 1fr; }
  /* モバイル・タブレットではミニメーカーを先に見せる（重いメディアより体験を優先）。 */
  .drill-hero-copy-col { order: 2; padding-top: 0; }
  .hero-maker-stack { order: 1; width: min(100%, 36rem); }
  .drill-hero-copy { max-width: none; }
}

@media (max-width: 900px) {
  .drill-nav a:not(.drill-nav-cta) { display: none; }
  .weekly-writing-intro, .weekly-writing-stage { grid-template-columns: 1fr; }
  .weekly-writing-intro { align-items: start; gap: .5rem; }
  .weekly-writing-visual { min-height: 28rem; }
  .editor-presets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discovery-grid, .type-grid, .download-grid, .bundle-grid, .why-layout, .ai-layout { grid-template-columns: 1fr; }
  .drill-footer { grid-template-columns: 1fr; text-align: center; gap: 1rem; }
  .drill-footer nav { justify-content: center; }
  .drill-footer small { grid-column: 1; }
  .drill-demo-inner { grid-template-columns: 1fr; }
  .drill-demo-copy { max-width: 42rem; }
  .drill-world-shade { background: linear-gradient(0deg, rgba(4, 28, 39, .92) 0%, rgba(4, 35, 44, .62) 62%, rgba(4, 35, 44, .25) 100%); }
  .drill-world-copy { align-self: end; padding-bottom: 9rem; }
}

@media (max-width: 560px) {
  .weekly-writing-campaign { width: 100%; display: grid; grid-template-columns: auto 1fr; border-radius: 1.1rem; }
  .weekly-writing-campaign span { grid-row: span 2; display: grid; place-items: center; padding-inline: .65rem; font-size: .54rem; writing-mode: vertical-rl; }
  .weekly-writing-campaign b { padding: .55rem .75rem .15rem; font-size: .65rem; }
  .weekly-writing-campaign em { width: fit-content; margin: 0 0 .5rem .75rem; padding: .2rem .55rem; font-size: .52rem; }
  .weekly-writing-stage { margin-inline: -.35rem; border-radius: 1.65rem; }
  .weekly-writing-copy { padding: 1.2rem 1rem; }
  .weekly-writing-summary { font-size: .78rem; }
  .weekly-writing-days { gap: .25rem; }
  .weekly-writing-day { padding: .45rem .1rem; border-radius: .65rem; }
  .weekly-writing-day small { display: none; }
  .weekly-writing-today { padding: 1rem .9rem; border-radius: 1.1rem; }
  .weekly-writing-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weekly-writing-level { padding-inline: .3rem; }
  .weekly-writing-amount-row { align-items: stretch; flex-direction: column; gap: .35rem; }
  .weekly-writing-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: .85rem; }
  .weekly-writing-amounts button { min-width: 0; flex-direction: column; gap: 0; border-radius: .7rem; }
  .weekly-writing-today blockquote { font-size: .88rem; }
  .weekly-writing-note { align-items: flex-start; }
  .weekly-writing-actions { display: grid; }
  .weekly-writing-actions > * { width: 100%; }
  .weekly-writing-visual { min-height: 18rem; padding: 1.1rem; }
  .weekly-writing-calendar { width: min(88%, 15rem); border-radius: 1.25rem; transform: rotate(1deg); }
  .weekly-writing-calendar-date strong { font-size: 2rem; }
  .weekly-writing-paper { padding: .7rem; }
  .weekly-writing-paper p { max-height: 4em; }
  .weekly-writing-paper i { height: .8rem; }
  .drill-hero-actions { flex-direction: column; align-items: stretch; }
  .drill-hero-actions .button { width: 100%; }
  .editor-mode-switch { width: 100%; border-radius: 1rem; }
  .editor-mode { min-height: 74px; padding-inline: .7rem; border-radius: .75rem; }
  .editor-mode b { font-size: .76rem; }
  .editor-mode span { font-size: .58rem; }
  .editor-preview { min-height: 25rem; padding: .5rem; }
  .editor-preview .print-sheet { zoom: .39; }
  .drill-demo-stage { margin-inline: -.45rem; border-radius: 1.25rem; }
  .drill-demo-video { border-radius: .9rem; }
  .drill-demo-caption { display: none; }
  .hero-maker, .hero-penmanship { padding: .85rem; border-radius: 1.35rem; }
  .penmanship-practice-flow { gap: .3rem; }
  .penmanship-practice-flow li { display: grid; justify-items: center; gap: .25rem; padding: .45rem .25rem; text-align: center; font-size: .56rem; }
  .penmanship-practice-flow li:not(:last-child)::after { right: -.25rem; width: .3rem; height: .3rem; }
  .hero-maker-chips { gap: .28rem; }
  .hero-kanji { padding: .4rem .05rem; border-radius: .6rem; }
  .hero-row { grid-template-columns: 1.6rem minmax(0, 1fr); gap: .25rem; }
  .hero-row-label { font-size: .5rem; }
  .hero-maker-preview { padding: .45rem .5rem; min-height: 7rem; }
  .editor-presets-grid { grid-template-columns: 1fr; }
  .catalog-editor-bridge { grid-template-columns: 1fr; text-align: center; }
  .catalog-editor-bridge img { width: 7.5rem; margin: -1rem auto -1.2rem; }
  .catalog-editor-actions { justify-content: center; }
  .catalog-editor-actions .button { width: 100%; }
  .sentence-maker-fields { grid-template-columns: 1fr; }
  .sentence-maker-actions > * { width: 100%; justify-content: center; }
  .drill-world { min-height: 39rem; }
  .drill-world-copy { padding-bottom: 8.2rem; }
  .drill-world-copy > p { font-size: .84rem; }
  .drill-world-evolution { right: 50%; width: max-content; transform: translateX(50%); }
  .drill-world-evolution.will-reveal.is-visible { transform: translateX(50%); }
}

/* ===== スクロールリビール（JS側で will-reveal / is-visible を付与） ===== */
.will-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.will-reveal.is-visible { opacity: 1; transform: none; }

/* ===== モーション抑制 ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===== 印刷時（このHTMLページ自体を印刷した場合） ===== */
@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { width: 210mm; margin: 0; padding: 0; background: #fff; }
  body > .skip-link, body > .drill-header, body > .drill-footer,
  main > :not(.drill-editor),
  .drill-editor > .drill-section-inner > :not(.editor-workspace),
  .editor-controls, .editor-preview-heading { display: none !important; }
  .drill-editor { padding: 0; background: #fff; }
  .drill-editor > .drill-section-inner { width: 210mm; margin: 0; }
  .editor-workspace { display: block; }
  .editor-preview-shell { position: static !important; padding: 0; overflow: visible !important; border: 0; border-radius: 0; box-shadow: none; }
  .editor-preview {
    position: static;
    width: 210mm;
    max-height: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: #fff;
  }
  .editor-preview-empty { display: none; }
  .print-sheet {
    width: 210mm;
    height: 297mm;
    margin: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  .print-sheet:last-child { break-after: auto; page-break-after: auto; }
}