:root {
  --black: #12131f;
  --ink: #17182a;
  --muted: #646b8a;
  --line: rgba(71, 112, 223, .18);
  --paper: #f4fbff;
  --panel: #ffffff;
  --acid: #ffe72e;
  --red: #ff2fa8;
  --blue: #5575e8;
  --purple: #8c48ef;
  --cyan: #61d6e8;
  --peach: #ff8db4;
  --sand: #fff2a8;
  --brand-gradient: linear-gradient(135deg, #4b6bdd 0%, #6a58ea 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(97, 214, 232, .14), rgba(85, 117, 232, .1));
  --sky-gradient: linear-gradient(135deg, #ffffff 0%, #eaf8ff 44%, #f2f5ff 100%);
  --shadow: 0 14px 38px rgba(23, 24, 42, .08);
  --radius: 6px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "YuGothic", sans-serif;
  line-height: 1.58;
  letter-spacing: 0;
}
button, input { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

.brand-ribbon {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  width: 100%;
  height: 30px;
  display: flex;
  overflow: hidden;
  align-items: center;
  background: linear-gradient(90deg, #4b6bdd 0%, #6a58ea 55%, #8c48ef 100%);
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  white-space: nowrap;
}
.brand-ribbon span { min-width: 720px; padding-right: 32px; animation: ribbon 18s linear infinite; }
@keyframes ribbon { to { transform: translateX(-720px); } }

.app-shell {
  min-height: 100vh;
  padding-top: 30px;
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 30px;
  height: calc(100vh - 30px);
  padding: 30px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  background: #ffffff;
  color: var(--ink);
  border-right: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
}
.brand-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  color: var(--ink);
  font-weight: 900;
  font-size: 22px;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.16);
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 20px; line-height: 1.02; letter-spacing: .02em; color: var(--ink); }
.brand small { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }

.side-nav { display: grid; gap: 0; border-top: 1px solid var(--line); }
.side-nav a {
  min-height: 58px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.side-nav a span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(85,117,232,.3);
  border-radius: 50%;
  color: var(--blue);
  font-size: 12px;
}
.side-nav a.active, .side-nav a:hover { color: var(--blue); background: rgba(85,117,232,.07); }
.side-nav a.active span, .side-nav a:hover span { background: var(--blue); color: white; border-color: var(--blue); }

.sidebar-panel {
  margin-top: auto;
  padding: 18px;
  background: rgba(85,117,232,.06);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel-kicker, .eyebrow, .tagline {
  display: block;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sidebar-panel strong { display: block; margin-top: 8px; line-height: 1.35; }
.progress-bar, .mini-progress {
  height: 6px;
  margin: 16px 0 8px;
  overflow: hidden;
  background: rgba(85,117,232,.14);
  border-radius: 99px;
}
.progress-bar span, .mini-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--acid), #ffb14e); }
.sidebar-panel small { color: var(--muted); }

.main { min-width: 0; position: relative; }
.topbar {
  position: sticky;
  top: 30px;
  z-index: 10;
  min-height: 82px;
  padding: 17px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(244, 251, 255, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.search-wrap {
  position: relative;
  width: min(570px, 100%);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 8px 0 11px;
  border-bottom: 2px solid rgba(85,117,232,.55);
}
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 70;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line, #e6e9f2);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(23,24,42,.16);
  padding: 8px;
}
.search-group-label { font-size: 11px; font-weight: 800; color: var(--blue); letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px 4px; }
.search-item { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 9px; padding: 9px 10px; cursor: pointer; }
.search-item:hover, .search-item.active { background: #f2f5ff; }
.search-item-main { font-weight: 800; color: var(--ink); font-size: 14px; }
.search-item-ctx { font-size: 12px; color: #7a8296; }
.search-empty { padding: 14px 12px; color: #7a8296; font-size: 13px; }
.search-wrap label { color: var(--blue); font-weight: 900; font-size: 12px; text-transform: uppercase; }
.search-wrap input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.profile { display: flex; align-items: center; gap: 10px; }
.plan { padding: 7px 10px; background: var(--brand-gradient); border: 1px solid rgba(85,117,232,.24); color: white; font-weight: 900; font-size: 11px; text-transform: uppercase; }
.avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 0; background: white; border: 1px solid rgba(85,117,232,.35); color: var(--ink); font-weight: 900; }

.view { display: none; padding: 38px; position: relative; overflow: hidden; }
.view.active { display: block; }
.section-watermark {
  position: absolute;
  left: 8px;
  top: -6px;
  color: rgba(85,117,232,.08);
  font-size: clamp(82px, 17vw, 238px);
  line-height: .8;
  font-weight: 900;
  pointer-events: none;
  z-index: 0;
}
.view > *:not(.section-watermark) { position: relative; z-index: 1; }

.hero-band {
  min-height: 500px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(360px, .86fr) minmax(420px, 1.14fr);
  gap: 0;
  align-items: stretch;
  background:
    linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.7) 46%, transparent 72%),
    var(--sky-gradient);
  color: var(--ink);
  border: 1px solid rgba(85,117,232,.26);
  box-shadow: var(--shadow);
}
.hero-copy { align-self: center; max-width: 720px; padding: 44px; }
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 18px;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.18;
  letter-spacing: .01em;
  font-weight: 900;
  color: var(--blue);
}
h2 { margin-bottom: 14px; font-size: 28px; line-height: 1.18; font-weight: 900; }
h3 { margin-bottom: 8px; font-size: 16px; line-height: 1.35; font-weight: 900; }
p { color: var(--muted); }
.hero-copy p:not(.eyebrow) { max-width: 520px; color: var(--ink); font-weight: 800; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.primary-action, .ghost-action, .grammar-card button, .library-list button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(85,117,232,.42);
  border-radius: var(--radius);
  font-weight: 900;
  text-transform: uppercase;
}
.primary-action, .grammar-card button { background: var(--brand-gradient); color: white; }
.hero-band .primary-action { background: var(--acid); color: var(--black); border-color: #f4d900; }
.ghost-action, .library-list button { background: white; color: var(--blue); }
.hero-band .ghost-action { background: white; color: var(--blue); border-color: rgba(85,117,232,.38); }
.primary-action:hover, .ghost-action:hover, .grammar-card button:hover, .library-list button:hover { background: var(--acid); color: var(--black); border-color: var(--blue); }
.hero-band .primary-action:hover, .hero-band .ghost-action:hover { border-color: var(--acid); }
.hero-media {
  margin: 0;
  min-height: 320px;
  overflow: hidden;
  position: relative;
  display: block;
  border-left: 1px solid rgba(85,117,232,.26);
  background: #eaf8ff;
}
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22), transparent 40%),
    linear-gradient(0deg, rgba(85,117,232,.22), transparent 52%);
}
.hero-media::after {
  content: "STUDY / SPEAK / REVIEW";
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 14px;
  padding: 7px 10px;
  background: white;
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}
.hero-photo {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  object-position: center top;
  filter: contrast(1.06) saturate(1.03);
}
.hero-study-card {
  position: absolute;
  left: 20px;
  bottom: 22px;
  z-index: 3;
  width: min(330px, calc(100% - 120px));
  margin: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  background: rgba(255,255,255,.94);
  color: var(--black);
  border: 1px solid rgba(85,117,232,.22);
  box-shadow: 0 18px 42px rgba(85,117,232,.18);
}
.hero-logo-badge {
  width: 48px;
  height: 48px;
  overflow: hidden;
  display: block;
  border: 1px solid var(--line);
  background: white;
}
.hero-logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
}
.hero-study-card strong,
.hero-study-card small {
  display: block;
  line-height: 1.25;
}
.hero-study-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.stats-grid { margin: 0 0 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: white; border: 1px solid rgba(85,117,232,.24); box-shadow: 0 12px 34px rgba(85,117,232,.08); }
.stats-grid article { padding: 20px; border: 0; border-right: 1px solid var(--line); }
.stats-grid article:last-child { border-right: 0; }
.stats-grid span, .stats-grid small { color: var(--muted); font-weight: 900; font-size: 11px; text-transform: uppercase; }
.stats-grid strong { display: block; margin: 5px 0; color: var(--ink); font-size: 38px; line-height: 1; font-weight: 900; }

.member-launchpad {
  margin: 22px 0 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: 18px;
}
.member-track-panel .section-head { word-break: keep-all; }
.today-plan-panel,
.member-track-panel,
.course-catalog {
  padding: 24px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(85,117,232,.24);
  box-shadow: 0 12px 34px rgba(85,117,232,.08);
}
.daily-task-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.daily-task-list button {
  min-height: 76px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 14px;
  text-align: left;
  background: white;
  border: 1px solid var(--line);
  color: var(--ink);
}
.daily-task-list button:hover {
  border-color: rgba(85,117,232,.5);
  box-shadow: 0 12px 28px rgba(85,117,232,.12);
  transform: translateY(-1px);
}
.daily-task-list span {
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--brand-gradient);
  color: white;
  border-radius: 50%;
  font-weight: 800;
}
.daily-task-list strong {
  display: block;
  line-height: 1.25;
}
.daily-task-list small {
  display: block;
  color: var(--muted);
  font-weight: 700;
}
.learning-route {
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  list-style: none;
  border: 1px solid var(--line);
}
.learning-route li {
  min-height: 82px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 14px;
  background: white;
  border-bottom: 1px solid var(--line);
}
.learning-route li:last-child { border-bottom: 0; }
.learning-route li.active { background: linear-gradient(135deg, rgba(97,214,232,.16), rgba(255,255,255,.94)); }
.learning-route span {
  grid-row: 1 / 3;
  color: var(--blue);
  font-size: 22px;
  font-weight: 800;
}
.learning-route strong {
  display: block;
  line-height: 1.25;
}
.learning-route small {
  display: block;
  color: var(--muted);
  font-weight: 700;
}
.course-catalog {
  margin: 0 0 26px;
}
.course-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.course-grid article {
  min-height: 230px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid rgba(85,117,232,.22);
}
.course-code {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 4px 8px;
  background: var(--acid);
  color: var(--black);
  border: 1px solid rgba(85,117,232,.22);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.course-grid p {
  margin-bottom: 20px;
  color: var(--muted);
  font-weight: 600;
}
.course-grid button {
  min-height: 42px;
  margin-top: auto;
  border: 1px solid rgba(85,117,232,.36);
  background: white;
  color: var(--blue);
  font-weight: 800;
}
.course-grid button:hover {
  background: var(--brand-gradient);
  color: white;
}

.content-grid.two-col { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 18px; }
.panel { padding: 26px; background: white; border: 1px solid rgba(85,117,232,.24); box-shadow: 0 12px 34px rgba(85,117,232,.08); }
.section-head, .page-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.icon-button { width: 42px; height: 42px; border: 1px solid rgba(85,117,232,.36); border-radius: 50%; background: white; color: var(--blue); font-size: 28px; }
.lesson-row { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: 22px; align-items: center; }
.thumb { display: grid; place-items: end start; padding: 12px; min-height: 154px; border-radius: var(--radius); background: var(--brand-gradient); color: white; font-weight: 900; }
.thumb span { padding: 4px 8px; background: var(--acid); color: var(--black); }
.review-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.review-list button { min-height: 58px; text-align: left; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font-weight: 900; }
.review-list button:hover { color: var(--red); }

.page-head { margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid rgba(85,117,232,.3); flex-wrap: wrap; }
.page-head.compact { display: block; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-tabs button {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(85,117,232,.32);
  border-radius: 999px;
  background: white;
  color: var(--muted);
  font-weight: 700;
  word-break: keep-all;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.filter-tabs button:hover { color: var(--blue); border-color: var(--blue); }
.filter-tabs button.active { background: var(--blue); border-color: var(--blue); color: white; }
.lesson-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) 370px; gap: 18px; }
.video-frame { min-height: 360px; display: grid; place-items: center; position: relative; background: var(--brand-gradient); border-radius: var(--radius); color: white; overflow: hidden; }
.video-frame::before {
  content: "ALPC LESSON";
  position: absolute;
  left: 18px;
  top: 14px;
  color: rgba(255,255,255,.12);
  font-size: clamp(44px, 8vw, 112px);
  line-height: 1;
  font-weight: 900;
}
.video-frame span { position: absolute; left: 16px; bottom: 14px; font-weight: 900; color: var(--acid); }
.play-button { width: 74px; height: 74px; display: grid; place-items: center; background: white; color: var(--black); border-radius: 50%; font-size: 25px; }
.lesson-body { padding-top: 22px; }
.lesson-sections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 20px; border: 1px solid var(--line); }
.lesson-sections article { padding: 16px; background: white; border-right: 1px solid var(--line); }
.lesson-sections article:last-child { border-right: 0; }
.lesson-list { display: grid; gap: 10px; align-content: start; }
.lesson-card { padding: 14px; display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; background: white; border: 1px solid rgba(85,117,232,.24); transition: transform .18s ease, box-shadow .18s ease; }
.lesson-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.1); }
.lesson-card[hidden] { display: none; }
.thumb.small { min-height: 58px; font-size: 12px; background: var(--brand-gradient); }
.thumb.small.alt { background: var(--sand); color: var(--ink); }
.thumb.small.warm { background: var(--red); }
.thumb.small.cool { background: var(--blue); }
.lesson-card p { margin: 0; font-size: 13px; }

.dictionary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.grammar-card { padding: 18px; background: white; border: 1px solid rgba(85,117,232,.24); min-height: 220px; display: flex; flex-direction: column; }
.grammar-card.selected { background: var(--brand-gradient); color: white; }
.grammar-card.selected p { color: rgba(255,255,255,.72); }
.grammar-card span { display: inline-block; margin-bottom: 14px; padding: 3px 8px; border: 1px solid currentColor; color: var(--red); font-size: 11px; font-weight: 900; }
.grammar-card button { width: 100%; margin-top: auto; }
.grammar-card.selected button { background: white; color: var(--black); }
.grammar-detail { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 22px; align-items: start; }

/* 文法詳細モーダル：カードの「開く」で画面中央に表示する */
.grammar-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.grammar-modal[hidden] { display: none; }
.grammar-modal-backdrop { position: absolute; inset: 0; background: rgba(22, 22, 48, .55); backdrop-filter: blur(2px); animation: grammar-modal-fade .18s ease; }
.grammar-modal-card { position: relative; z-index: 1; background: #fff; border-radius: 18px; padding: 30px 32px; width: 100%; max-width: 720px; max-height: 86vh; overflow-y: auto; box-shadow: 0 24px 70px rgba(20, 20, 60, .35); animation: grammar-modal-pop .2s ease; }
.grammar-modal-card .grammar-detail { grid-template-columns: 1fr; gap: 18px; }
.grammar-modal-close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: none; border-radius: 50%; background: #f0f0f6; color: #333; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.grammar-modal-close:hover { background: #e2e2ee; }
@keyframes grammar-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes grammar-modal-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.lead { font-size: 18px; color: var(--ink); font-weight: 700; }
.example-table { display: grid; gap: 0; border: 1px solid rgba(85,117,232,.24); }
.example-table div { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 12px; padding: 14px; background: white; border-bottom: 1px solid var(--line); }
.example-table div:last-child { border-bottom: 0; }
.example-table span { color: var(--red); font-weight: 900; text-transform: uppercase; }
.example-table p { margin: 0; color: var(--ink); font-weight: 900; }

.correction-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.correction-card { padding: 18px; background: white; border: 1px solid rgba(85,117,232,.24); }
.correction-card:hover { background: var(--brand-gradient); color: white; }
.correction-card:hover p { color: rgba(255,255,255,.82); }
.correction-card span { display: inline-block; margin: 12px 0 6px; color: var(--red); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.correction-card p { margin-bottom: 0; color: var(--ink); font-weight: 800; }
.library-list { display: grid; gap: 0; background: white; border: 1px solid rgba(85,117,232,.24); }
.library-list article { min-height: 82px; padding: 16px; display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 14px; border: 0; border-bottom: 1px solid var(--line); }
.library-list article:last-child { border-bottom: 0; }
.library-list span { color: var(--muted); }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding: 16px; }
  .side-nav { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .side-nav a { justify-content: center; min-height: 46px; font-size: 12px; padding: 0 8px; }
  .side-nav a span { display: none; }
  .sidebar-panel { display: none; }
  .topbar { top: 30px; }
  .hero-band, .lesson-layout, .content-grid.two-col, .grammar-detail, .member-launchpad { grid-template-columns: 1fr; }
  .hero-media { border-left: 0; border-top: 1px solid rgba(255,255,255,.24); }
  .stats-grid, .dictionary-grid, .correction-board, .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-sections { grid-template-columns: 1fr; border: 0; gap: 10px; }
  .lesson-sections article { border: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .topbar { align-items: stretch; flex-direction: column; padding: 12px 16px; }
  .view { padding: 16px; }
  .hero-copy { padding: 24px; }
  .hero-media { min-height: 240px; }
  .hero-photo { min-height: 320px; }
  .hero-study-card { width: calc(100% - 40px); bottom: 54px; }
  .stats-grid, .dictionary-grid, .correction-board, .course-grid { grid-template-columns: 1fr; }
  .stats-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .lesson-row, .lesson-card, .library-list article { grid-template-columns: 1fr; }
  .side-nav { overflow-x: auto; grid-template-columns: repeat(7, 132px); }
  .today-plan-panel, .member-track-panel, .course-catalog { padding: 18px; }
  .daily-task-list button { grid-template-columns: 38px minmax(0, 1fr); }
  .daily-task-list span { width: 38px; height: 38px; }
  h1 { font-size: 28px; }
  .hero-media::after { left: 12px; right: auto; max-width: calc(100% - 24px); }
}


.photo-avatar {
  overflow: hidden;
  border: 1px solid rgba(85,117,232,.35);
  background: white;
}
.photo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mentor-strip {
  margin: 22px 0 26px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 190px;
  align-items: stretch;
  background:
    linear-gradient(120deg, rgba(255,255,255,.2), transparent 44%),
    var(--brand-gradient);
  color: white;
  border: 1px solid rgba(85,117,232,.24);
  box-shadow: 0 16px 42px rgba(85,117,232,.14);
}
.mentor-photo {
  margin: 0;
  min-height: 180px;
  overflow: hidden;
  background: #9d7aa9;
}
.mentor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: contrast(1.08) saturate(.92);
}
.mentor-copy {
  padding: 24px;
  align-self: center;
}
.mentor-copy h2 {
  margin-bottom: 10px;
  color: white;
  font-size: clamp(26px, 4vw, 46px);
  line-height: .98;
  text-transform: uppercase;
}
.mentor-copy p:not(.eyebrow) {
  max-width: 640px;
  margin-bottom: 0;
  color: rgba(255,255,255,.86);
  font-weight: 700;
}
.mentor-meta {
  padding: 20px;
  display: grid;
  align-content: end;
  border-left: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.16);
}
.mentor-meta strong {
  font-size: 34px;
  line-height: .92;
  font-weight: 900;
}
.mentor-meta span {
  margin-top: 8px;
  color: var(--acid);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.coach-note {
  margin: 18px 0;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(85,117,232,.28);
  background: var(--brand-gradient-soft);
}
.coach-note img {
  width: 78px;
  height: 78px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  border: 1px solid rgba(85,117,232,.32);
}
.coach-note span {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.coach-note strong {
  display: block;
  line-height: 1.35;
}

@media (max-width: 980px) {
  .mentor-strip { grid-template-columns: 150px minmax(0, 1fr); }
  .mentor-meta { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
}

@media (max-width: 620px) {
  .mentor-strip { grid-template-columns: 1fr; }
  .mentor-photo { min-height: 260px; }
  .coach-note { grid-template-columns: 62px minmax(0, 1fr); }
  .coach-note img { width: 62px; height: 62px; }
}


.alpaca-status {
  margin: 0 0 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.alpaca-status article {
  min-height: 106px;
  padding: 14px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  background: white;
  border: 1px solid rgba(85,117,232,.24);
  box-shadow: 0 10px 28px rgba(85,117,232,.08);
}
.alpaca-status img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--brand-gradient-soft);
  border: 1px solid rgba(85,117,232,.24);
}
.alpaca-status span {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.alpaca-status strong {
  display: block;
  line-height: 1.28;
  font-size: 15px;
}

.newsletter-panel {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 0;
  overflow: hidden;
  background: white;
  border: 1px solid rgba(85,117,232,.24);
  box-shadow: 0 12px 34px rgba(85,117,232,.08);
}
.newsletter-panel figure {
  margin: 0;
  min-height: 190px;
  background: linear-gradient(135deg, #ffffff, #eaf8ff 38%, #ffe7f5);
}
.newsletter-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.newsletter-panel > div {
  padding: 22px;
  align-self: center;
  border-left: 1px solid rgba(85,117,232,.24);
}
.newsletter-panel h2 {
  margin-bottom: 10px;
  font-size: clamp(24px, 4vw, 40px);
  line-height: .98;
  text-transform: uppercase;
}
.newsletter-panel p:not(.eyebrow) {
  margin-bottom: 0;
  font-weight: 700;
}
.inline-alpaca {
  width: 34px;
  height: 34px;
  object-fit: contain;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--brand-gradient);
  border: 1px solid rgba(85,117,232,.28);
}
.library-list strong {
  display: flex;
  align-items: center;
}

@media (max-width: 980px) {
  .alpaca-status { grid-template-columns: 1fr; }
  .newsletter-panel { grid-template-columns: 1fr; }
  .newsletter-panel > div { border-left: 0; border-top: 1px solid rgba(85,117,232,.24); }
}


.podcast-card {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: stretch;
  background:
    linear-gradient(120deg, rgba(255,255,255,.18), transparent 46%),
    var(--brand-gradient);
  color: white;
  border: 1px solid rgba(85,117,232,.24);
  box-shadow: 0 12px 34px rgba(85,117,232,.1);
}
.podcast-card img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  object-position: center;
}
.podcast-card > div {
  padding: 22px;
  align-self: center;
}
.podcast-card h2 {
  color: white;
  margin-bottom: 10px;
  font-size: clamp(24px, 4vw, 42px);
  line-height: .98;
  text-transform: uppercase;
}
.podcast-card p:not(.eyebrow) {
  margin-bottom: 0;
  color: rgba(255,255,255,.86);
  font-weight: 700;
}

@media (max-width: 620px) {
  .podcast-card { grid-template-columns: 1fr; }
  .podcast-card img { max-height: 320px; }
}


/* Softer typography and language controls */
body {
  font-weight: 400;
}
.brand-ribbon,
.brand strong,
.side-nav a,
.panel-kicker,
.eyebrow,
.tagline,
.search-wrap label,
.plan,
.stats-grid span,
.stats-grid small,
.alpaca-status span,
.coach-note span,
.newsletter-panel h2,
.podcast-card h2 {
  font-weight: 700;
}
.side-nav a b {
  font: inherit;
  font-weight: 700;
}
h1 {
  font-weight: 700;
  line-height: 1.18;
}
h2 {
  font-weight: 700;
}
h3,
.review-list button,
.example-table p,
.coach-note strong,
.alpaca-status strong {
  font-weight: 600;
}
.hero-copy p:not(.eyebrow),
.mentor-copy p:not(.eyebrow),
.newsletter-panel p:not(.eyebrow),
.podcast-card p:not(.eyebrow) {
  font-weight: 500;
}
.primary-action,
.ghost-action,
.grammar-card button,
.library-list button,
.filter-tabs button {
  font-weight: 700;
}
.stats-grid strong,
.mentor-meta strong {
  font-weight: 700;
}
.language-switch {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(85,117,232,.34);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(85,117,232,.1);
}
.language-switch button {
  min-width: 42px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid rgba(85,117,232,.18);
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}
.language-switch button:last-child {
  border-right: 0;
}
.language-switch button.active {
  background: var(--brand-gradient);
  color: white;
}
@media (max-width: 620px) {
  .profile {
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .language-switch {
    order: 3;
    width: 100%;
  }
  .language-switch button {
    flex: 1;
  }
}


.source-foundation {
  margin: 0 0 26px;
  padding: 24px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(85,117,232,.24);
  box-shadow: 0 12px 34px rgba(85,117,232,.08);
}
.source-head { margin-bottom: 18px; }
.source-pill {
  padding: 8px 12px;
  background: var(--acid);
  color: var(--black);
  border: 1px solid rgba(85,117,232,.22);
  font-size: 12px;
  font-weight: 800;
}
.source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.source-grid article {
  min-height: 170px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(97,214,232,.16), rgba(255,255,255,.92) 46%, rgba(255,47,168,.1));
  border: 1px solid rgba(85,117,232,.2);
}
.source-grid span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.source-grid strong {
  display: block;
  margin: 8px 0;
  color: var(--red);
  font-size: 44px;
  line-height: 1;
  font-weight: 800;
}
.source-grid p { margin-bottom: 0; color: var(--ink); font-weight: 600; }
.pipeline-panel {
  margin-top: 18px;
  padding: 24px;
  background: white;
  border: 1px solid rgba(85,117,232,.24);
  box-shadow: 0 12px 34px rgba(85,117,232,.08);
}
.pipeline-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 16px;
  border: 1px solid var(--line);
}
.pipeline-steps article {
  padding: 18px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(97,214,232,.12), rgba(255,255,255,0));
}
.pipeline-steps article:last-child { border-right: 0; }
.pipeline-steps span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  background: var(--brand-gradient);
  color: white;
  border-radius: 50%;
  font-weight: 800;
}
.pipeline-steps strong { display: block; margin-bottom: 8px; font-weight: 800; }
.pipeline-steps p { margin-bottom: 0; font-weight: 600; }

@media (max-width: 980px) {
  .source-grid, .pipeline-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline-steps article:nth-child(2) { border-right: 0; }
  .pipeline-steps article { border-bottom: 1px solid var(--line); }
  .pipeline-steps article:nth-child(n+3) { border-bottom: 0; }
}

@media (max-width: 620px) {
  .source-head { display: grid; }
  .source-grid, .pipeline-steps { grid-template-columns: 1fr; }
  .pipeline-steps article { border-right: 0; border-bottom: 1px solid var(--line); }
  .pipeline-steps article:last-child { border-bottom: 0; }
}


.bilingual-panel {
  margin-top: 18px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(97,214,232,.14));
  border: 1px solid rgba(85,117,232,.24);
  box-shadow: 0 12px 34px rgba(85,117,232,.08);
}
.review-badge {
  padding: 7px 11px;
  background: var(--acid);
  color: var(--black);
  border: 1px solid rgba(85,117,232,.22);
  font-size: 12px;
  font-weight: 800;
}
.bilingual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.bilingual-grid article {
  min-height: 140px;
  padding: 16px;
  background: white;
  border: 1px solid var(--line);
}
.bilingual-grid span {
  display: block;
  margin-bottom: 10px;
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.bilingual-grid p {
  margin-bottom: 0;
  color: var(--ink);
  font-weight: 650;
}
.mistake-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.mistake-chips span {
  padding: 7px 10px;
  background: white;
  border: 1px solid rgba(85,117,232,.24);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

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


.correction-workspace {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.correction-queue,
.correction-editor {
  background: white;
  border: 1px solid rgba(85,117,232,.24);
  box-shadow: 0 12px 34px rgba(85,117,232,.08);
}
.correction-queue { padding: 18px; }
.queue-summary {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.queue-summary span,
.queue-summary small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.queue-summary strong {
  display: block;
  margin: 7px 0;
  color: var(--ink);
  line-height: 1.25;
}
.queue-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 14px 0;
  border: 1px solid var(--line);
}
.queue-tabs button {
  min-height: 36px;
  border: 0;
  border-right: 1px solid var(--line);
  background: white;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}
.queue-tabs button:last-child { border-right: 0; }
.queue-tabs button.active { background: var(--brand-gradient); color: white; }
.correction-segment-list { display: grid; gap: 8px; max-height: 660px; overflow: auto; }
.queue-item {
  width: 100%;
  padding: 12px;
  display: grid;
  gap: 4px;
  text-align: left;
  background: rgba(244,251,255,.8);
  border: 1px solid rgba(85,117,232,.18);
  color: var(--ink);
}
.queue-item.active { border-color: var(--red); box-shadow: inset 4px 0 0 var(--red); background: white; }
.queue-item span,
.queue-item small { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.queue-item strong { font-size: 14px; }
.correction-editor { padding: 24px; }
.editor-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.editor-field {
  display: grid;
  gap: 8px;
}
.editor-field.wide { grid-column: 1 / -1; }
.editor-field span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.editor-field textarea,
.editor-field input {
  width: 100%;
  border: 1px solid rgba(85,117,232,.24);
  background: rgba(244,251,255,.54);
  color: var(--ink);
  outline: 0;
  padding: 12px;
  font: inherit;
  font-size: 14px;
}
.editor-field textarea { min-height: 126px; resize: vertical; }
.editor-field.wide textarea { min-height: 110px; }
.editor-field textarea:focus,
.editor-field input:focus { border-color: var(--red); background: white; }
.candidate-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
.candidate-strip span {
  padding: 7px 10px;
  background: var(--acid);
  color: var(--black);
  border: 1px solid rgba(85,117,232,.2);
  font-size: 12px;
  font-weight: 800;
}
.status-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.status-actions button {
  min-height: 42px;
  border: 1px solid rgba(85,117,232,.28);
  background: white;
  color: var(--blue);
  font-weight: 800;
}
.status-actions button:hover { background: var(--brand-gradient); color: white; }
.publish-checks {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 14px;
  background: rgba(97,214,232,.1);
  border: 1px solid rgba(85,117,232,.18);
}
.publish-checks label {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--ink);
  font-weight: 700;
}
.editor-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.editor-footer p { margin: 0; }

@media (max-width: 980px) {
  .correction-workspace { grid-template-columns: 1fr; }
  .correction-segment-list { max-height: none; }
}
@media (max-width: 620px) {
  .editor-toolbar,
  .editor-footer { display: grid; }
  .editor-grid,
  .status-actions { grid-template-columns: 1fr; }
}


.correction-warning {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: #fff2a8;
  border: 1px solid rgba(255,47,168,.32);
  color: var(--black);
  font-weight: 800;
}
.correction-warning[hidden] { display: none; }


.correction-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.correction-export-actions .ghost-action,
.correction-export-actions .primary-action {
  min-height: 40px;
}


.video-queue-summary {
  margin: 12px 0;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255,231,46,.24);
  border: 1px solid rgba(85,117,232,.18);
}
.video-queue-summary strong { color: var(--red); }
.video-queue-summary span { color: var(--ink); font-size: 12px; font-weight: 800; }
.correction-video-list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  max-height: 250px;
  overflow: auto;
}
.video-queue-item {
  padding: 10px;
  display: grid;
  gap: 4px;
  background: white;
  border: 1px solid rgba(85,117,232,.18);
}
.video-queue-item.done { border-color: rgba(255,47,168,.45); box-shadow: inset 4px 0 0 var(--red); }
.video-queue-item strong { color: var(--blue); font-size: 12px; }
.video-queue-item span,
.video-queue-item small { color: var(--muted); font-size: 11px; font-weight: 800; }
.video-queue-item small { line-height: 1.35; }

.video-queue-item.selected {
  border-color: var(--red);
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,47,168,.08));
}
.correction-video-list button.video-queue-item {
  text-align: left;
  cursor: pointer;
}


.source-alignment {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(85,117,232,.2);
  background: rgba(244,251,255,.72);
}
.source-alignment-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 12px;
}
.source-alignment-head strong { color: var(--blue); font-size: 14px; }
.source-alignment-head small { color: var(--muted); font-weight: 800; }
.source-priority-note {
  margin: -2px 0 12px;
  padding: 9px 10px;
  background: rgba(255,47,168,.08);
  border-left: 3px solid var(--red);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}
.source-student-doc {
  border-color: rgba(255,47,168,.28) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,251,255,.78)) !important;
}
.source-student-doc a {
  display: inline-flex;
  margin-top: 4px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1px solid rgba(85,117,232,.36);
}
.source-student-doc a:hover { color: var(--red); }
.source-alignment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.source-alignment article {
  border: 1px solid rgba(85,117,232,.14);
  background: white;
  padding: 12px;
}
.source-alignment h3 {
  margin: 0 0 8px;
  color: var(--red);
  font-size: 12px;
}
.source-alignment p {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.source-local { grid-column: 1 / -1; }
.source-local ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.source-local li {
  display: grid;
  gap: 4px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}
.source-local li strong { color: var(--blue); font-size: 11px; }
.source-romaji-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.source-romaji-tags span {
  padding: 6px 8px;
  background: #fff2a8;
  border: 1px solid rgba(255,47,168,.25);
  color: var(--black);
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 620px) {
  .source-alignment-grid { grid-template-columns: 1fr; }
}

.common-mistakes-panel {
  margin-top: 18px;
  padding: 22px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(85,117,232,.18);
}
.common-mistake-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.common-mistake-summary article {
  min-height: 86px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(244,251,255,.96), rgba(255,255,255,.92));
  border: 1px solid rgba(85,117,232,.18);
}
.common-mistake-summary article strong {
  display: block;
  color: var(--blue);
  font-size: 30px;
  line-height: 1;
}
.common-mistake-summary article span {
  display: inline-flex;
  margin-top: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}
.common-mistake-summary article.wide {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 8px;
}
.common-mistake-summary article.wide span {
  margin: 0;
  padding: 7px 9px;
  background: white;
  border: 1px solid rgba(255,47,168,.18);
  color: var(--ink);
}
.common-mistake-summary article.wide b { color: var(--red); margin-right: 4px; }
.common-mistake-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.common-mistake-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 18px;
  background: white;
  border: 1px solid rgba(85,117,232,.2);
  overflow: hidden;
}
.common-mistake-rank {
  position: absolute;
  top: 12px;
  right: 14px;
  color: rgba(85,117,232,.14);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}
.common-mistake-card-head {
  display: grid;
  gap: 5px;
  padding-right: 54px;
}
.common-mistake-card-head span,
.common-mistake-meta span,
.common-mistake-card li span,
.common-mistake-card footer b {
  color: var(--red);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.common-mistake-card-head strong {
  color: var(--black);
  font-size: 18px;
  line-height: 1.35;
}
.common-mistake-card p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.65;
  font-weight: 650;
}
.common-mistake-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.common-mistake-meta span {
  padding: 6px 8px;
  background: rgba(244,251,255,.95);
  border: 1px solid rgba(85,117,232,.16);
  color: var(--blue);
}
.common-mistake-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.common-mistake-card li {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: rgba(244,251,255,.68);
  border-left: 3px solid var(--blue);
}
.common-mistake-card footer {
  display: grid;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid rgba(85,117,232,.14);
}
.common-mistake-card footer span {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 750;
}
@media (max-width: 980px) {
  .common-mistake-summary,
  .common-mistake-grid { grid-template-columns: 1fr; }
}

.common-mistake-card li small {
  display: block;
  margin: -2px 0 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.quality-panel {
  margin: 0 0 18px;
  padding: 18px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(85,117,232,.18);
}
.quality-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.quality-summary article {
  min-height: 74px;
  padding: 12px;
  background: rgba(244,251,255,.82);
  border: 1px solid rgba(85,117,232,.14);
}
.quality-summary strong {
  display: block;
  color: var(--blue);
  font-size: 28px;
  line-height: 1;
}
.quality-summary span {
  display: inline-flex;
  margin-top: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}
.quality-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.quality-grid h3 {
  margin: 0 0 8px;
  color: var(--black);
  font-size: 16px;
}
.quality-list {
  display: grid;
  gap: 8px;
}
.quality-item {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 11px 12px;
  background: white;
  border: 1px solid rgba(85,117,232,.18);
  text-align: left;
  cursor: pointer;
}
.quality-item:hover {
  border-color: rgba(255,47,168,.36);
  box-shadow: 0 10px 24px rgba(85,117,232,.12);
}
.quality-item strong {
  color: var(--black);
  font-size: 13px;
  line-height: 1.35;
}
.quality-item span,
.quality-item small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}
@media (max-width: 980px) {
  .quality-summary,
  .quality-grid { grid-template-columns: 1fr; }
}


/* Admin entry (kept low-key at the bottom of the sidebar) */
.sidebar-admin {
  padding-top: 12px;
  border-top: 1px dashed rgba(100,107,138,.4);
  font-size: 11px;
}
.sidebar-admin span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.sidebar-admin a {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid rgba(100,107,138,.35);
  overflow-wrap: anywhere;
}
.sidebar-admin a:hover,
.sidebar-admin a.active { color: var(--blue); border-bottom-color: var(--blue); }

/* Lessons: course-type layout */
.course-board {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}
.course-block {
  padding: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(85,117,232,.24);
  box-shadow: 0 12px 34px rgba(85,117,232,.08);
}
.course-block[hidden] { display: none; }
.course-block-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.course-block-head .course-code { margin-bottom: 0; flex: none; }
.course-block-head h2 { margin-bottom: 4px; font-size: 22px; }
.course-block-head p { margin: 0; font-weight: 600; }
.course-data-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.course-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.course-block[data-course="grammar"] .course-card-grid,
.course-block[data-course="review"] .course-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.course-lesson-card {
  min-width: 0;
  padding: 16px;
  display: grid;
  gap: 8px;
  align-content: start;
  background: white;
  border: 1px solid rgba(85,117,232,.22);
}
.course-lesson-card .course-code {
  margin-bottom: 0;
  justify-self: start;
}
.course-lesson-card h3 {
  margin: 0;
  overflow-wrap: anywhere;
}
.course-lesson-card p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.course-lesson-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.course-lesson-card .course-labels {
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .06em;
}
/* コース動画プレイヤー */
.lesson-video {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.lesson-video video,
.lesson-video iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #0c1020;
  border: 1px solid rgba(85,117,232,.3);
  border-radius: 8px;
}
.lesson-video video[hidden] { display: none; }
.video-fallback {
  margin: 0;
  padding: 12px;
  background: rgba(244,251,255,.85);
  border-left: 3px solid var(--red, #d64545);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}
.video-fallback[hidden] { display: none; }
.video-duration {
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.video-coming-soon {
  justify-self: start;
  padding: 4px 10px;
  background: rgba(85,117,232,.1);
  border: 1px dashed rgba(85,117,232,.4);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
/* 基本教材リンク（出典: ALPC School Materials） */
.material-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.material-links:empty { display: none; }
.material-link {
  display: inline-block;
  max-width: 100%;
  padding: 4px 10px;
  background: rgba(85,117,232,.08);
  border: 1px solid rgba(85,117,232,.35);
  border-radius: 999px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.material-link:hover {
  background: rgba(85,117,232,.16);
}
.material-link-workbook,
.material-link-slides {
  border-color: rgba(214,69,158,.4);
  background: rgba(214,69,158,.07);
  color: var(--magenta, #d6459e);
}
.material-link-workbook:hover,
.material-link-slides:hover {
  background: rgba(214,69,158,.14);
}
.material-link.is-coming-soon {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
  cursor: default;
}
/* オリエンテーション動画パネル（ロードマップSTEP 00で使用） */
.orientation-video-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 20px;
  align-items: center;
  margin-bottom: 18px;
}
.orientation-video-body h2 { margin: 4px 0 8px; }
.orientation-video-body p { margin: 0 0 10px; }
@media (max-width: 860px) {
  .orientation-video-panel { grid-template-columns: 1fr; }
}

/* ロードマップ */
.roadmap-step-no {
  margin: 0 0 2px;
  color: var(--red);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.roadmap-vimeo-link {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.roadmap-vimeo-link:hover { color: var(--blue); }
.roadmap-route-panel { margin-bottom: 18px; }
.roadmap-route li { grid-template-columns: 54px minmax(0, 1fr) auto; }
.roadmap-route li .ghost-action {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .roadmap-route li { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 12px; }
  .roadmap-route span { font-size: 18px; }
}

/* 動画ライブラリ: ロードマップへの誘導 */
.library-roadmap-note {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
}
.library-roadmap-note a { color: var(--blue); }

.course-before-after {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: rgba(244,251,255,.72);
  border-left: 3px solid var(--blue);
}
.course-before-after span {
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.course-before-after p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.course-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.course-block-footer {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

/* Keep text inside buttons and cards on narrow screens */
.course-grid article,
.daily-task-list button,
.learning-route li,
.lesson-card,
.quality-item,
.video-queue-item { min-width: 0; }
.course-grid h3,
.course-grid p,
.daily-task-list strong,
.daily-task-list small,
.learning-route strong,
.learning-route small,
.primary-action,
.ghost-action { overflow-wrap: anywhere; }

@media (max-width: 980px) {
  .course-card-grid,
  .course-block[data-course="grammar"] .course-card-grid,
  .course-block[data-course="review"] .course-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .filter-tabs button {
    padding: 0 12px;
    font-size: 12px;
  }
  .course-block { padding: 16px; }
  .course-block-head { flex-wrap: wrap; }
  .course-card-grid,
  .course-block[data-course="grammar"] .course-card-grid,
  .course-block[data-course="review"] .course-card-grid { grid-template-columns: 1fr; }
  .course-block-footer { justify-content: stretch; }
  .course-block-footer .ghost-action { width: 100%; }
  .sidebar-admin { padding-top: 10px; }
}

/* 授業アーカイブ */
.page-lead {
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 700;
  max-width: 720px;
}
.class-archive-panel { margin-bottom: 18px; }
.class-archive-panel .course-data-note { margin-top: 10px; }
.class-archive-groups { display: grid; gap: 20px; margin-top: 14px; }
.archive-month h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.archive-rows { display: grid; gap: 0; border: 1px solid rgba(85,117,232,.24); background: white; }
.archive-row {
  display: grid;
  grid-template-columns: 104px 88px minmax(0, 1fr) 44px 96px 130px;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}
.archive-row:last-child { border-bottom: 0; }
.archive-row > * { min-width: 0; overflow-wrap: anywhere; }
.archive-date { color: var(--muted); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.archive-session { color: var(--ink); font-weight: 900; }
.archive-topic { color: var(--ink); font-weight: 700; font-size: 14px; }
.archive-region {
  justify-self: start;
  padding: 2px 7px;
  border: 1px solid currentColor;
  color: var(--red);
  font-size: 11px;
  font-weight: 900;
}
.archive-region:empty { display: none; }
.archive-duration { color: var(--muted); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.archive-link {
  justify-self: end;
  padding: 7px 12px;
  border: 1px solid rgba(85,117,232,.36);
  background: white;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.archive-link:hover { background: var(--acid); color: var(--black); border-color: var(--blue); }
.archive-no-recording { justify-self: end; color: var(--muted); font-size: 12px; font-weight: 800; }
.archive-row.is-no-recording { opacity: .55; }
.orientation-archive-cta { margin-top: 14px; }

@media (max-width: 980px) {
  .archive-row { grid-template-columns: 96px 72px minmax(0, 1fr) 110px; }
  .archive-region { display: none; }
  .archive-region:empty { display: none; }
  .archive-duration { display: none; }
  .archive-topic { grid-column: 3; }
}

@media (max-width: 620px) {
  .archive-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
    padding: 12px 14px;
  }
  .archive-date { grid-column: 1; grid-row: 1; }
  .archive-session { grid-column: 2; grid-row: 1; justify-self: end; }
  .archive-topic { grid-column: 1 / -1; grid-row: 2; }
  .archive-region { display: inline-block; grid-column: 1; grid-row: 3; }
  .archive-region:empty { display: none; }
  .archive-duration { display: block; grid-column: 1; grid-row: 4; }
  .archive-link, .archive-no-recording, .archive-actions { grid-column: 2; grid-row: 3 / 5; justify-self: end; align-self: center; }
  .orientation-archive-cta .ghost-action { width: 100%; }
}

/* Output session 2列（NA / EU を1回=1行で並列） */
.archive-row.output-row,
.archive-row.output-head {
  grid-template-columns: 58px 104px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
}
.output-head {
  min-height: 0;
  padding-top: 7px;
  padding-bottom: 7px;
  background: rgba(85,117,232,.07);
  border-bottom: 1px solid var(--line);
}
.output-head .archive-session,
.output-head .archive-date,
.output-head .archive-topic {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.output-col-label {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .05em;
}
.archive-region-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.archive-region-cell .archive-region-body { min-width: 0; }
.archive-region-cell.is-empty { min-height: 24px; }
.output-cell-tag {
  display: none;
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid var(--blue);
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
}
.output-row .archive-actions,
.output-row .archive-link { justify-self: start; }

/* 個別レッスンアーカイブ（生徒ごと） */
.private-lessons-groups { gap: 24px; }
.private-student h3 { display: flex; align-items: baseline; gap: 10px; text-transform: none; letter-spacing: 0; }
.private-student h3 small { color: var(--muted); font-size: 12px; font-weight: 800; }
.archive-row.private-row { grid-template-columns: 104px minmax(0, 1fr) 96px 132px; }
.archive-coming-soon { justify-self: end; color: var(--muted); font-size: 12px; font-weight: 800; opacity: .75; }

@media (max-width: 980px) {
  .archive-row.output-row,
  .archive-row.output-head {
    grid-template-columns: 50px 92px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .archive-row.private-row { grid-template-columns: 92px minmax(0, 1fr) auto; }
}

@media (max-width: 620px) {
  .archive-row.output-row,
  .archive-row.private-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
    padding: 12px 14px;
  }
  .archive-row.output-row > *,
  .archive-row.private-row > * {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
  }
  .output-head { display: none; }
  .output-cell-tag { display: inline-block; }
  .archive-region-cell.is-empty { display: none; }
  .output-row .archive-actions,
  .private-row .archive-actions,
  .archive-coming-soon { justify-self: start !important; }
}

/* サイト内Vimeo再生（授業アーカイブのアコーディオン / 教材のモーダル） */
.archive-actions {
  display: grid;
  gap: 5px;
  justify-items: end;
  justify-self: end;
}
.archive-play {
  padding: 7px 12px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: white;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.archive-play:hover { background: var(--acid); color: var(--black); }
.archive-play.is-open { background: var(--black); border-color: var(--black); color: white; }
.archive-vimeo-sub {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-decoration: underline;
}
.archive-vimeo-sub:hover { color: var(--blue); }
.archive-player {
  padding: 12px 14px 14px;
  background: rgba(244,251,255,.72);
  border-bottom: 1px solid var(--line);
}
.archive-player:last-child { border-bottom: 0; }
.archive-player-frame {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.archive-player-frame iframe,
.vimeo-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.archive-player-actions {
  max-width: 860px;
  margin: 8px auto 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}
.archive-player-external {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.archive-player-external:hover { color: var(--blue); }
.archive-player-close {
  padding: 6px 16px;
  border: 1px solid var(--line);
  background: white;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.archive-player-close:hover { background: var(--acid); border-color: var(--blue); }
.vimeo-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 12, 26, .78);
}
.vimeo-modal {
  width: min(920px, 100%);
  max-height: 100%;
  overflow: auto;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(0,0,0,.4);
}
.vimeo-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}
.vimeo-modal-head strong {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.vimeo-modal-external {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.vimeo-modal-external:hover { color: var(--blue); }
.vimeo-modal-close {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: white;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.vimeo-modal-close:hover { background: var(--acid); border-color: var(--blue); }
.vimeo-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
body.has-video-modal { overflow: hidden; }

@media (max-width: 620px) {
  .archive-player { padding: 10px; }
  .archive-play { padding: 6px 10px; font-size: 11px; }
  .vimeo-modal-backdrop { padding: 8px; }
}

/* 埋め込みアプリ（AI事典・進捗トラッカー） */
/* 見出し（page-head）は他タブと同じ余白にする。embed特有の詰めはやめる。 */
.embed-frame { position: relative; width: 100%; height: calc(100vh - 190px); min-height: 480px; border: 1px solid var(--line, #e6e9f2); border-radius: 14px; overflow: hidden; background: #fff; }
.embed-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* 進捗トラッカーは他タブと同じく本文へ溶け込ませる。枠線・固定高さ・内部スクロールをやめ、
   iframeの高さは中身に合わせて可変（JSがjlt:heightで設定）。背景は本文の水色ベースを透かす。 */
#tracker .embed-frame { height: auto; min-height: 60vh; border: 0; border-radius: 0; overflow: visible; background: transparent; }
#tracker .embed-frame iframe { height: 60vh; background: transparent; }
.embed-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; }
.embed-fallback p { margin: 0; font-size: 15px; }
.embed-fallback .embed-hint { color: #5b6478; font-size: 13px; max-width: 460px; }
.embed-fallback .embed-open { display: inline-block; margin-top: 8px; padding: 10px 20px; border-radius: 10px; background: #5b4cff; color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; }

/* ===== AI辞典（#ai-dict）: ai-dictionary/app.py のUIを会員サイト内へ移植 ===== */
/* クラス名は会員サイトと衝突しないよう aidict- 接頭辞を付ける。 */
.aidict-phone {
  width: 100%;
  margin: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  color: #1c1c1e;
  -webkit-tap-highlight-color: transparent;
}
.aidict-phone * { box-sizing: border-box; }
.aidict-header {
  background: transparent;
  padding: 0 0 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(85,117,232,.3);
}
.aidict-toprow { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.aidict-h1 { margin: 0; font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; color: var(--blue); letter-spacing: .01em; }
.aidict-toggles { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.aidict-seg { display: inline-flex; background: #eef0f3; border-radius: 9px; padding: 2px; }
.aidict-seg button {
  border: none; background: transparent; color: #6a6f78;
  font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px; cursor: pointer;
}
.aidict-seg button.active { background: #fff; color: #2c5fc4; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.aidict-searchbar { display: flex; gap: 10px; margin-top: 16px; max-width: 620px; }
.aidict-searchbar input {
  flex: 1; font-size: 19px; padding: 15px 18px;
  border: 1px solid #d6dae0; border-radius: 14px; background: #f1f3f6; outline: none; color: #1c1c1e;
}
.aidict-searchbar input:focus { background: #fff; border-color: #4a78d6; }
.aidict-searchbar button {
  font-size: 18px; font-weight: 700; padding: 0 26px;
  border: none; border-radius: 14px; background: #4a78d6; color: #fff; cursor: pointer;
}
.aidict-searchbar button:active { background: #3a63ba; }
.aidict-main { padding: 4px 0 40px; }
/* PC・タブレットの幅ではカードを段組みで隙間なく詰める（高さ差の空きを作らない）。
   見出し・自然な訳・メモは全幅（column-span: all）で上下に置く。 */
@media (min-width: 720px) {
  .aidict-main {
    column-count: 2;
    column-gap: 14px;
  }
  .aidict-main .aidict-card { break-inside: avoid; }
  .aidict-main > .aidict-card--wide { column-span: all; }
}
.aidict-hint {
  column-span: all;
  color: #6a6f78; text-align: left; margin: 4px 0 0;
  font-size: 17px; line-height: 1.8; max-width: 620px;
  padding: 20px 22px; background: #fff; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.aidict-card {
  background: #fff; border-radius: 16px; padding: 20px 22px;
  margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.aidict-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.aidict-head .aidict-word { font-size: 34px; font-weight: 800; }
.aidict-head .aidict-reading { font-size: 19px; color: #8a8f98; }
.aidict-pills { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.aidict-pill { font-size: 13.5px; font-weight: 600; padding: 5px 13px; border-radius: 999px; }
.aidict-lv-absolute_beginner { background: #e3f6e8; color: #1f8a4c; }
.aidict-lv-beginner          { background: #e3f1fc; color: #2c7fc4; }
.aidict-lv-intermediate      { background: #fff1da; color: #c47e1a; }
.aidict-lv-advanced          { background: #fde6ea; color: #c0395a; }
.aidict-meta { background: #eef0f3; color: #5a6068; }
.aidict-spk {
  border: none; background: #eef3fb; color: #4a78d6; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.aidict-spk:active { background: #d9e4f7; }
.aidict-o-row { display: flex; align-items: flex-start; gap: 8px; }
.aidict-o-row .aidict-o { flex: 1; }
.aidict-pitchlink-note { font-size: 14.5px; color: #6a6f78; line-height: 1.6; margin-bottom: 10px; }
.aidict-pitchlink {
  display: inline-block; font-size: 15px; font-weight: 600; text-decoration: none;
  color: #2c5fc4; background: #eef2fb; padding: 8px 14px; border-radius: 10px;
}
.aidict-pitchlink:hover { background: #e2eafb; }
.aidict-label { font-size: 13px; color: #8a8f98; font-weight: 700; margin: 0 0 8px; letter-spacing: .04em; }
.aidict-natural { font-size: 24px; font-weight: 700; color: #2c5fc4; }
.aidict-usage { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid #f0f1f4; }
.aidict-usage:first-of-type { border-top: none; }
.aidict-usage .aidict-sit { flex: 1; color: #555; font-size: 16px; }
.aidict-usage .aidict-arrow { color: #c2c6cd; }
.aidict-usage .aidict-tr { flex: 1; font-weight: 600; font-size: 16px; }
.aidict-ex { padding: 12px 0; border-top: 1px solid #f0f1f4; }
.aidict-ex:first-of-type { border-top: none; }
.aidict-ex .aidict-o { font-size: 21px; line-height: 2.1; }
.aidict-ex .aidict-t { font-size: 15.5px; color: #6a6f78; margin-top: 5px; }
.aidict-main ruby rt { font-size: 12px; color: #8a8f98; font-weight: 400; }
.aidict-note { font-size: 16px; line-height: 1.8; color: #444; background: #fbfaf4; }

/* 語義（意味） */
.aidict-sense { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #f0f1f4; }
.aidict-sense:first-of-type { border-top: none; }
.aidict-sense-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: #eef2fb; color: #2c5fc4; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.aidict-sense-body { font-size: 16.5px; line-height: 1.6; color: #23262b; }
.aidict-sense-pos { font-size: 12.5px; color: #8a8f98; }

/* 漢字ブレイクダウン */
.aidict-kanji { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid #f0f1f4; align-items: flex-start; }
.aidict-kanji:first-of-type { border-top: none; }
.aidict-kanji-char {
  flex: 0 0 auto; font-size: 40px; font-weight: 700; line-height: 1;
  color: #1c1c1e; width: 52px; text-align: center;
}
.aidict-kanji-body { flex: 1; min-width: 0; }
.aidict-kanji-mean { font-size: 16px; color: #23262b; margin-bottom: 4px; }
.aidict-kanji-yomi { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.aidict-yomi { font-size: 14.5px; color: #5a6068; }
.aidict-yomi b { color: #4a78d6; font-weight: 700; margin-right: 4px; }

/* 活用 */
.aidict-conj { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f0f1f4; }
.aidict-conj:first-of-type { border-top: none; }
.aidict-conj-form { flex: 0 0 42%; font-size: 14.5px; color: #6a6f78; }
.aidict-conj-val { flex: 1; font-size: 17px; font-weight: 600; color: #23262b; }

/* 関連語・類語・対義語 */
.aidict-rel-group { padding: 8px 0; border-top: 1px solid #f0f1f4; }
.aidict-rel-group:first-of-type { border-top: none; }
.aidict-rel-tag { display: block; font-size: 12.5px; color: #8a8f98; font-weight: 600; margin-bottom: 6px; }
.aidict-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.aidict-chip { font-size: 15px; padding: 5px 12px; border-radius: 999px; background: #eef2fb; color: #2c5fc4; }

/* よく使う言い回し（共起） */
.aidict-colloc { padding: 10px 0; border-top: 1px solid #f0f1f4; }
.aidict-colloc:first-of-type { border-top: none; }
.aidict-colloc-p { font-size: 18px; font-weight: 600; color: #23262b; }
.aidict-colloc-g { font-size: 14.5px; color: #6a6f78; margin-top: 3px; }
.aidict-spinner { text-align: center; color: #8a8f98; margin-top: 60px; font-size: 15px; }
.aidict-err { color: #c0392b; text-align: center; margin-top: 40px; font-size: 15px; }

/* ===== フィードバック（転写アーカイブ）===== */
.fb-archive-count { margin: 4px 0 0; color: var(--muted); font-weight: 800; font-size: 14px; }
.fb-archive-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; }
.fb-filter {
  padding: 8px 16px; border: 1px solid rgba(85,117,232,.28); background: white;
  color: var(--ink); font-weight: 900; font-size: 13px; cursor: pointer; border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s;
}
.fb-filter:hover { border-color: var(--blue); }
.fb-filter.active { background: var(--brand-gradient); color: white; border-color: transparent; }

.fb-archive-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fb-empty { color: var(--muted); font-weight: 800; grid-column: 1 / -1; padding: 20px 0; }

.fb-card {
  padding: 16px 18px; background: white; border: 1px solid rgba(85,117,232,.22);
  border-radius: 14px; display: flex; flex-direction: column; gap: 10px;
}
.fb-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fb-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-badge {
  display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 900;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}
.fb-badge-video { background: rgba(85,117,232,.14); color: var(--blue); }
.fb-badge-audio { background: rgba(140,72,239,.14); color: var(--purple); }
.fb-badge-corrected { background: rgba(31,157,85,.16); color: #1f9d55; }
.fb-badge-diagram { background: var(--acid); color: var(--black); }
.fb-loom { font-size: 13px; font-weight: 900; color: var(--red); text-decoration: none; white-space: nowrap; }
.fb-loom:hover { text-decoration: underline; }
.fb-topic { margin: 0; color: var(--ink); font-weight: 800; font-size: 15px; line-height: 1.5; }
.fb-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 12px; font-weight: 800; }
.fb-meta span { position: relative; }

.fb-diagrams { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

/* ビフォーアフター図解 */
.fbdiagram {
  display: flex; flex-direction: column; align-items: stretch;
  border: 1px solid rgba(85,117,232,.16); border-radius: 12px; overflow: hidden; background: var(--paper);
}
.fbdiagram-label {
  display: inline-block; font-size: 10px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 4px;
}
.fbdiagram-before {
  padding: 12px 14px; background: rgba(255,47,168,.07); border-left: 4px solid var(--red);
}
.fbdiagram-before .fbdiagram-label { color: var(--red); }
.fbdiagram-before p { margin: 0; color: var(--ink); font-weight: 700; text-decoration: line-through; text-decoration-color: rgba(255,47,168,.45); line-height: 1.6; }
.fbdiagram-arrow { text-align: center; font-size: 20px; font-weight: 900; color: var(--blue); padding: 4px 0; line-height: 1; }
.fbdiagram-note { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 0 12px 8px; }
.fbdiagram-tag {
  display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 900; border-radius: 999px; line-height: 1.4;
}
.fbdiagram-tag-grammar { background: rgba(85,117,232,.14); color: var(--blue); }
.fbdiagram-tag-reason { background: white; color: var(--ink); border: 1px solid rgba(71,112,223,.22); font-weight: 700; }
.fbdiagram-after {
  padding: 12px 14px; background: rgba(31,157,85,.08); border-left: 4px solid #1f9d55;
}
.fbdiagram-after .fbdiagram-label { color: #1f9d55; }
.fbdiagram-after p { margin: 0; color: var(--ink); font-weight: 800; line-height: 1.6; }

@media (max-width: 720px) {
  .fb-archive-list { grid-template-columns: 1fr; }
}

/* 添削アーカイブ：場面イラスト */
.fb-illust { margin: 16px 0 4px; }
.fb-illust img { width: 100%; max-width: 380px; border-radius: 16px; display: block; box-shadow: 0 6px 20px rgba(30,30,80,.12); }
.fb-illust figcaption { margin-top: 10px; font-weight: 700; color: #1f9d55; font-size: 16px; }

/* 添削アーカイブ：文字起こしトグル */
.fb-transcript-wrap { margin-top: 14px; }
.fb-transcript-toggle { border: 1px solid var(--line, #e6e9f2); background: #f4f6fb; color: #3a55c4; border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.fb-transcript-toggle:hover { background: #e9edf8; }
.fb-transcript { margin-top: 10px; background: #fbfbfe; border: 1px solid var(--line, #e6e9f2); border-radius: 12px; padding: 14px 16px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto; font-family: inherit; color: #2a2f42; }

/* ===== 文法スケジュール（N5/N4） ===== */
.gsched-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 22px; margin-bottom: 10px; }
.gsched-field { display: flex; flex-direction: column; gap: 4px; }
.gsched-field label { font-size: 12px; font-weight: 800; color: var(--blue); letter-spacing: .02em; }
.gsched-field input[type="date"] { border: 1px solid rgba(85,117,232,.3); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 15px; color: var(--ink); background: #fff; }
.gsched-filters { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.gsched-filter { border: 1px solid rgba(85,117,232,.3); background: #fff; color: #3a55c4; border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 800; cursor: pointer; }
.gsched-filter.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.gsched-actions { display: inline-flex; gap: 10px; margin-left: auto; }
.gsched-reset { border: 1px solid var(--line, #e6e9f2); background: #f4f6fb; color: #3a55c4; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.gsched-reset:hover { background: #e9edf8; }
.gsched-save { border: 0; background: var(--brand-gradient); color: #fff; border-radius: 999px; padding: 8px 20px; font-size: 14px; font-weight: 800; cursor: pointer; }
.gsched-save:disabled { opacity: .7; cursor: default; }
.gsched-hint { color: #5b6478; font-size: 13px; margin: 0 0 18px; line-height: 1.6; }
.gsched-body { display: flex; flex-direction: column; gap: 26px; }
.gsched-level-head { font-size: 22px; font-weight: 900; color: var(--ink); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid rgba(85,117,232,.22); }
.gsched-week { margin: 0 0 16px; }
.gsched-week-head { font-size: 13px; font-weight: 800; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.gsched-day { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line, #e6e9f2); border-radius: 12px; background: #fff; margin-bottom: 8px; }
.gsched-day.is-today { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(85,117,232,.15); }
.gsched-day.is-adjusted { background: #fbfaf3; border-color: #e7dca6; }
.gsched-day-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.gsched-day-date { border: 1px solid rgba(85,117,232,.28); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 13px; color: var(--ink); background: #fff; }
.gsched-day-disp { font-weight: 800; color: var(--ink); font-size: 15px; }
.gsched-day-num { font-size: 12px; color: #7a8296; font-weight: 700; }
.gsched-badge { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.gsched-badge-today { background: var(--blue); color: #fff; }
.gsched-badge-adj { background: #efe4b0; color: #7a6512; }
.gsched-points { display: flex; flex-wrap: wrap; gap: 6px; }
.gsched-point { display: inline-flex; align-items: baseline; gap: 5px; background: #f2f5ff; border: 1px solid rgba(85,117,232,.16); border-radius: 8px; padding: 4px 10px; font-size: 14px; color: var(--ink); }
.gsched-point-unsched { background: #fff; border-style: dashed; color: #7a8296; }
.gsched-note { font-style: normal; font-size: 11px; color: #7a8296; }
@media (max-width: 640px) {
  .gsched-actions { margin-left: 0; }
  .gsched-controls { gap: 12px 16px; }
}

/* ===== 学習タイマー（ヘッダー常時表示） ===== */
.timer-widget { position: relative; display: inline-flex; }
.timer-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(85,117,232,.28); background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 12px; font-weight: 800; cursor: pointer; font-variant-numeric: tabular-nums; }
.timer-toggle:hover { background: #f2f5ff; }
.timer-widget.running .timer-toggle { background: var(--brand-gradient); border-color: transparent; color: #fff; }
.timer-icon { font-size: 15px; }
.timer-display { font-size: 14px; letter-spacing: .02em; }
.timer-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 300px; max-width: 86vw; background: #fff; border: 1px solid var(--line, #e6e9f2); border-radius: 16px; box-shadow: 0 18px 44px rgba(23,24,42,.16); padding: 16px; }
.timer-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.timer-mode { border: 1px solid rgba(85,117,232,.24); background: #fff; color: #3a55c4; border-radius: 999px; padding: 7px 6px; font-size: 12px; font-weight: 800; cursor: pointer; }
.timer-mode.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.timer-phase { text-align: center; font-size: 12px; font-weight: 800; color: #7a8296; min-height: 16px; letter-spacing: .04em; text-transform: uppercase; }
.timer-big { text-align: center; font-size: 46px; font-weight: 900; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; margin: 2px 0 10px; }
.timer-big.is-break { color: #2aa775; }
.timer-presets { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 10px; }
.timer-preset { border: 1px solid rgba(85,117,232,.24); background: #f2f5ff; color: #3a55c4; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 800; cursor: pointer; }
.timer-preset.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.timer-preset-unit { font-size: 12px; color: #7a8296; font-weight: 700; }
.timer-controls { display: flex; gap: 8px; }
.timer-startpause { flex: 1; border: 0; background: var(--brand-gradient); color: #fff; border-radius: 10px; padding: 10px; font-size: 14px; font-weight: 800; cursor: pointer; }
.timer-reset { border: 1px solid var(--line, #e6e9f2); background: #f4f6fb; color: #3a55c4; border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 800; cursor: pointer; }
.timer-totals { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line, #e6e9f2); font-size: 12px; color: #5b6478; text-align: center; line-height: 1.6; }
@media (max-width: 700px) {
  .timer-panel { right: -40px; }
  .timer-display { display: none; }
}

/* ===== 学習データ（トップページ分析） ===== */
.study-data { margin: 8px 0 4px; }
.study-data-body { display: flex; flex-direction: column; gap: 22px; margin-top: 12px; }
.sd-empty { margin: 0 0 6px; color: #5b6478; font-size: 14px; background: #f2f5ff; border: 1px solid rgba(85,117,232,.16); border-radius: 12px; padding: 14px 16px; }
.sd-group-title { font-size: 13px; font-weight: 800; color: var(--blue); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px; }
.sd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sd-card { border: 1px solid var(--line, #e6e9f2); border-radius: 14px; background: #fff; padding: 16px 18px; box-shadow: 0 1px 2px rgba(23,24,42,.03); }
.sd-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sd-icon { font-size: 15px; color: var(--blue); }
.sd-card-title { font-size: 13px; font-weight: 800; color: #5b6478; }
.sd-value { font-size: 28px; font-weight: 900; color: var(--ink); line-height: 1.1; display: flex; align-items: baseline; gap: 8px; }
.sd-sub { font-size: 12px; font-weight: 700; color: #7a8296; }
.sd-msg { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: #7a8296; }
@media (max-width: 900px) { .sd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sd-grid { grid-template-columns: 1fr; } }

/* ===== ホーム カレンダー（学習実績＋予定文法） ===== */
.calendar-card { margin: 8px 0; }
.cal-tz-wrap { display: flex; align-items: center; gap: 8px; }
.cal-tz-wrap label { font-size: 12px; font-weight: 800; color: var(--blue); }
.cal-tz { border: 1px solid rgba(85,117,232,.3); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; color: var(--ink); background: #fff; }
.cal-nav { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.cal-navbtn { border: 1px solid var(--line, #e6e9f2); background: #fff; color: var(--ink); width: 32px; height: 32px; border-radius: 9px; font-size: 18px; font-weight: 900; cursor: pointer; line-height: 1; }
.cal-navbtn:hover { background: #f2f5ff; }
.cal-month { font-size: 18px; font-weight: 900; color: var(--ink); min-width: 132px; }
.cal-todaybtn { margin-left: auto; border: 1px solid rgba(85,117,232,.3); background: #f2f5ff; color: #3a55c4; border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 800; cursor: pointer; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-wd { text-align: center; font-size: 12px; font-weight: 800; color: #7a8296; padding: 4px 0; }
.cal-wd.sun { color: #d1477a; } .cal-wd.sat { color: #4b6bdd; }
.cal-cell { position: relative; min-height: 58px; border: 1px solid var(--line, #e6e9f2); border-radius: 10px; background: #fff; padding: 6px 8px; text-align: left; cursor: pointer; font: inherit; }
.cal-cell.empty { border: 0; background: transparent; cursor: default; }
.cal-cell:hover:not(.empty) { border-color: var(--blue); }
.cal-cell.is-today { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(85,117,232,.18); }
.cal-cell.is-selected { background: #eaf0ff; border-color: var(--blue); }
.cal-daynum { font-size: 13px; font-weight: 800; color: var(--ink); }
.cal-cell.lv1 { background: #eef3ff; } .cal-cell.lv2 { background: #d9e4ff; } .cal-cell.lv3 { background: #b9cdff; } .cal-cell.lv4 { background: #93b0ff; }
/* 月はAnki風ヒートマップ（小さい正方形セル・色の濃淡のみ・数字なし） */
.cal-heatmap { grid-template-columns: repeat(7, 30px); gap: 6px; justify-content: start; }
.cal-heatmap .cal-wd { width: 30px; font-size: 10px; padding: 0 0 2px; }
.cal-heatmap .cal-cell { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 6px; }
.cal-heatmap .cal-cell.empty { width: 30px; height: 30px; border: 0; background: transparent; }
.cal-heatmap .cal-daynum { display: none; }
.cal-heatmap .cal-cell.is-today { box-shadow: 0 0 0 2px var(--blue); }
.cal-heatmap .cal-cell.is-selected { outline: 2px solid var(--blue); outline-offset: -2px; }
/* 選択中の週をヒートマップ上でも薄く示す */
.cal-heatmap .cal-cell.in-week { outline: 2px solid rgba(85,117,232,.3); outline-offset: -2px; }
@media (max-width: 560px) { .cal-heatmap { grid-template-columns: repeat(7, 1fr); } .cal-heatmap .cal-cell, .cal-heatmap .cal-cell.empty, .cal-heatmap .cal-wd { width: auto; } .cal-heatmap .cal-cell { aspect-ratio: 1; height: auto; } }

/* 1週間分の詳細（学習時間＋予定文法） */
.cal-week-title { font-size: 13px; font-weight: 800; color: var(--blue); letter-spacing: .04em; margin: 16px 0 8px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-wday { border: 1px solid var(--line, #e6e9f2); border-radius: 11px; background: #fff; padding: 9px 10px; min-height: 96px; }
.cal-wday.is-today { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(85,117,232,.15); }
.cal-wday-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.cal-wday-date { font-size: 13px; font-weight: 900; color: var(--ink); }
.cal-wday-wd { font-size: 11px; font-weight: 800; color: #7a8296; }
.cal-wday-study { font-size: 12px; font-weight: 800; color: #3a55c4; margin-bottom: 6px; }
.cal-wday-study.none { color: #b3b9c9; }
.cal-wday-points { display: flex; flex-direction: column; gap: 3px; }
.cal-wpoint { font-size: 12px; color: var(--ink); line-height: 1.4; }
.cal-wnone { font-size: 11px; color: #b3b9c9; }
@media (max-width: 760px) {
  .cal-week { grid-template-columns: 1fr; }
  .cal-wday { min-height: auto; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; }
  .cal-wday-head { display: contents; }
  .cal-wday-points { grid-column: 2; }
}

/* ===== 今日やること（編集できるToDo） ===== */
.todo-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.todo-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line, #e6e9f2); border-radius: 12px; background: #fff; padding: 10px 12px; }
.todo-item.done { background: #f7f8fb; }
.todo-check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px; border: 2px solid rgba(85,117,232,.4); background: #fff; color: transparent; cursor: pointer; font-size: 13px; font-weight: 900; line-height: 1; display: flex; align-items: center; justify-content: center; }
.todo-item.done .todo-check { background: var(--blue); border-color: var(--blue); color: #fff; }
.todo-text { flex: 1 1 auto; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); padding: 2px 0; }
.todo-item.done .todo-text { text-decoration: line-through; color: #9aa1b2; font-weight: 600; }
.todo-del { flex: 0 0 auto; border: 0; background: transparent; color: #c2c7d4; font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.todo-del:hover { color: #d1477a; background: #fdeef4; }
.todo-empty { color: #9aa1b2; font-size: 14px; padding: 8px 2px; }
.todo-add { display: flex; gap: 10px; margin-top: 12px; }
.todo-add input { flex: 1 1 auto; border: 1px solid rgba(85,117,232,.28); border-radius: 12px; padding: 11px 14px; font: inherit; font-size: 15px; color: var(--ink); background: #fff; }
.todo-add input:focus { outline: 2px solid rgba(85,117,232,.35); outline-offset: -1px; }
.todo-add button { flex: 0 0 auto; border: 0; background: var(--brand-gradient); color: #fff; border-radius: 12px; padding: 11px 22px; font-size: 15px; font-weight: 800; cursor: pointer; }

/* ===== 文法スケジュール：今日やる文法（最上部の目印） ===== */
.gsched-today { margin: 4px 0 14px; border: 1px solid rgba(85,117,232,.28); border-radius: 14px; background: var(--brand-gradient-soft, #eef3ff); padding: 14px 18px; }
.gsched-today:empty { display: none; }
.gsched-today-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.gsched-today-badge { font-size: 12px; font-weight: 900; letter-spacing: .04em; color: #fff; background: var(--blue); border-radius: 999px; padding: 3px 12px; }
.gsched-today-date { font-size: 15px; font-weight: 900; color: var(--ink); }
.gsched-today-meta { font-size: 12px; font-weight: 800; color: #7a8296; }
.gsched-today-points { display: flex; flex-wrap: wrap; gap: 8px; }
.gsched-today-point { background: #fff; border: 1px solid rgba(85,117,232,.22); border-radius: 9px; padding: 6px 12px; font-size: 15px; font-weight: 700; color: var(--ink); }
.gsched-today-none { font-size: 13px; color: #7a8296; }

/* ===== 会員ログイン ゲート ===== */
.login-gate { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--sky-gradient, linear-gradient(135deg,#fff,#eaf8ff 44%,#f2f5ff)); }
.login-card { width: min(400px, 100%); background: #fff; border: 1px solid var(--line, #e6e9f2); border-radius: 20px; box-shadow: 0 24px 60px rgba(23,24,42,.18); padding: 28px 26px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.login-logo { width: 42px; height: 42px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; }
.login-logo img { width: 100%; height: 100%; object-fit: cover; }
.login-brand strong { font-size: 18px; font-weight: 900; color: var(--ink); }
.login-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #f2f5ff; border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.login-tab { border: 0; background: transparent; color: #5b6478; border-radius: 999px; padding: 9px; font-size: 14px; font-weight: 800; cursor: pointer; }
.login-tab.active { background: #fff; color: var(--blue); box-shadow: 0 1px 3px rgba(23,24,42,.08); }
.login-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.login-field span { font-size: 12px; font-weight: 800; color: var(--blue); }
.login-field input { border: 1px solid rgba(85,117,232,.28); border-radius: 12px; padding: 11px 14px; font: inherit; font-size: 15px; color: var(--ink); background: #fff; }
.login-field input:focus { outline: 2px solid rgba(85,117,232,.35); outline-offset: -1px; }
.login-error { margin: 0 0 12px; color: #d1477a; font-size: 13px; font-weight: 700; background: #fdeef4; border-radius: 10px; padding: 9px 12px; }
.login-submit { width: 100%; border: 0; background: var(--brand-gradient); color: #fff; border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 800; cursor: pointer; }
.login-submit:disabled { opacity: .65; cursor: default; }
.login-note { margin: 16px 0 0; font-size: 12px; color: #7a8296; text-align: center; line-height: 1.6; }
.plan { cursor: pointer; border: 0; font: inherit; }

/* ===== 管理者専用の表示制御 ===== */
.admin-only { display: none !important; }
body[data-role="admin"] .admin-only { display: revert !important; }
body[data-role="admin"] .sidebar-admin.admin-only { display: flex !important; }
/* ログインゲート：管理者ログイン導線 */
.login-admin-toggle { display: block; width: 100%; margin: 14px 0 0; border: 0; background: transparent; color: #7a8296; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.login-admin-toggle:hover { color: var(--blue); }
/* 管理ダッシュボード */
.admin-panel { border: 1px solid var(--line, #e6e9f2); border-radius: 16px; background: #fff; padding: 18px 20px; margin-bottom: 18px; }
.admin-members { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.admin-member-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line, #e6e9f2); border-radius: 12px; padding: 11px 14px; }
.admin-member-name { font-weight: 800; color: var(--ink); font-size: 15px; }
.admin-member-date { font-size: 12px; color: #7a8296; }
.admin-empty { color: #7a8296; font-size: 14px; padding: 8px 2px; }
.admin-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.admin-tools button { border: 1px solid rgba(85,117,232,.3); background: #f2f5ff; color: #3a55c4; border-radius: 12px; padding: 11px 20px; font-size: 14px; font-weight: 800; cursor: pointer; }
.admin-tools button:hover { background: #e6ecff; }

/* 管理: 会員↔生徒の照合ドロップダウン */
.admin-assign-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #7a8296; }
.admin-assign { border: 1px solid rgba(85,117,232,.3); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; color: var(--ink); background: #fff; }
.admin-member-row { flex-wrap: wrap; }

/* 管理: 会員の追加とパスワード発行 */
.admin-create { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.admin-create select { flex: 1 1 240px; min-width: 180px; border: 1px solid rgba(85,117,232,.3); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ink); background: #fff; }
.admin-create button { border: none; background: #5575e8; color: #fff; border-radius: 10px; padding: 10px 18px; font-size: 14px; font-weight: 800; cursor: pointer; }
.admin-create button:hover { background: #4763d6; }
.admin-create button:disabled { opacity: .5; cursor: default; }
.admin-create .admin-create-all { background: #eef1fb; color: #3a55c4; border: 1px solid rgba(85,117,232,.3); }
.admin-create .admin-create-all:hover { background: #e2e8fa; }
.admin-reset { border: 1px solid rgba(224,90,90,.35); background: #fff; color: #c0433f; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 800; cursor: pointer; }
.admin-reset:hover { background: #fdeceb; }
.admin-reset.armed { background: #c0433f; color: #fff; border-color: #c0433f; }
.admin-delete { border: 1px solid rgba(150,150,160,.4); background: #fff; color: #6a7080; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 800; cursor: pointer; }
.admin-delete:hover { background: #f2f3f6; }
.admin-delete.armed { background: #c0433f; color: #fff; border-color: #c0433f; }
.admin-cred-lname { min-width: 120px; color: var(--ink); }
.admin-cred { margin-top: 12px; border: 1px solid #ffd9a8; background: #fff8ee; border-radius: 12px; padding: 14px 16px; }
.admin-cred-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.admin-cred-k { min-width: 78px; font-size: 12px; font-weight: 700; color: #9a7b4a; }
.admin-cred-row code { font-size: 18px; font-weight: 800; letter-spacing: .04em; color: var(--ink); background: #fff; border: 1px solid #ffd9a8; border-radius: 8px; padding: 4px 10px; }
.admin-cred-row #admin-cred-copy { border: 1px solid rgba(85,117,232,.3); background: #f2f5ff; color: #3a55c4; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 800; cursor: pointer; }
.admin-cred-hint { font-size: 12px; color: #9a7b4a; margin: 6px 0 10px; }
.admin-cred-close { border: 1px solid var(--line, #e6e9f2); background: #fff; color: var(--ink); border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.admin-cred-err { color: #c0433f; font-size: 14px; font-weight: 700; margin: 0; }

/* ===== ロードマップ拡充 ===== */
.roadmap-content { display: flex; flex-direction: column; gap: 22px; margin-top: 18px; }
.rm-block { border: 1px solid var(--line, #e6e9f2); border-radius: 16px; background: #fff; padding: 20px 22px; }
.rm-block h2 { font-size: 22px; font-weight: 900; color: var(--ink); margin: 2px 0 10px; }
.rm-lead { font-size: 15px; line-height: 1.7; color: #3a3f52; margin: 0 0 14px; }
.rm-note { font-size: 13px; line-height: 1.7; color: #7a8296; margin: 0 0 14px; }
.rm-overview { background: var(--brand-gradient-soft, #eef3ff); }
.rm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rm-stat { background: #fff; border: 1px solid rgba(85,117,232,.16); border-radius: 12px; padding: 12px 14px; }
.rm-stat strong { display: block; font-size: 19px; font-weight: 900; color: var(--ink); line-height: 1.2; }
.rm-stat span { font-size: 12px; font-weight: 700; color: #7a8296; }
.rm-routine { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rm-routine-item { display: flex; gap: 12px; border: 1px solid var(--line, #e6e9f2); border-radius: 12px; padding: 13px 15px; }
.rm-routine-icon { font-size: 20px; line-height: 1.2; }
.rm-routine-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; }
.rm-routine-head strong { font-size: 15px; font-weight: 800; color: var(--ink); }
.rm-time { font-size: 12px; font-weight: 800; color: var(--blue); }
.rm-routine-item p { margin: 0; font-size: 13px; line-height: 1.6; color: #5b6478; }
.rm-extra { margin-top: 14px; border-top: 1px solid var(--line, #e6e9f2); padding-top: 12px; }
.rm-extra-label { font-size: 12px; font-weight: 800; color: #7a8296; text-transform: uppercase; letter-spacing: .04em; }
.rm-extra ul { margin: 8px 0 0; padding-left: 18px; }
.rm-extra li { font-size: 13px; line-height: 1.7; color: #5b6478; }
.rm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rm-steps li { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line, #e6e9f2); border-radius: 12px; padding: 12px 14px; }
.rm-step-no { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.rm-steps strong { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.rm-steps small { display: block; font-size: 12px; color: #7a8296; margin-top: 2px; line-height: 1.5; }
.rm-week { display: flex; flex-direction: column; gap: 8px; }
.rm-week-row { display: flex; gap: 14px; align-items: baseline; border: 1px solid var(--line, #e6e9f2); border-radius: 10px; padding: 10px 14px; }
.rm-week-day { flex: 0 0 96px; font-weight: 800; color: var(--blue); font-size: 13px; }
.rm-week-row p { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.6; }
.rm-levels-wrap { overflow-x: auto; }
.rm-levels { width: 100%; border-collapse: collapse; font-size: 14px; }
.rm-levels th { text-align: left; font-size: 12px; font-weight: 800; color: var(--blue); text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 2px solid rgba(85,117,232,.2); white-space: nowrap; }
.rm-levels td { padding: 10px; border-bottom: 1px solid var(--line, #e6e9f2); color: var(--ink); vertical-align: top; }
.rm-levels td.rm-lv { font-weight: 900; color: var(--blue); white-space: nowrap; }
@media (max-width: 760px) { .rm-stats, .rm-routine, .rm-steps { grid-template-columns: 1fr; } .rm-week-day { flex-basis: 72px; } }

/* ===== 26週カリキュラム ===== */
.c26-content { display: flex; flex-direction: column; gap: 22px; }
.c26-concept { border: 1px solid var(--line, #e6e9f2); border-radius: 16px; background: var(--brand-gradient-soft, #eef3ff); padding: 20px 22px; }
.c26-concept h2 { font-size: 20px; font-weight: 900; color: var(--ink); margin: 0 0 12px; }
.c26-points { margin: 0 0 14px; padding-left: 18px; }
.c26-points li { font-size: 15px; line-height: 1.7; color: #3a3f52; margin-bottom: 4px; }
.c26-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.c26-chip { font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px; border: 1px solid transparent; }
.c26-letters { background: rgba(97, 214, 232, .18); color: #1c8195; border-color: rgba(97, 214, 232, .4); }
.c26-n5 { background: rgba(85, 117, 232, .14); color: #3a52c0; border-color: rgba(85, 117, 232, .32); }
.c26-n4 { background: rgba(140, 72, 239, .14); color: #6a34c0; border-color: rgba(140, 72, 239, .3); }
.c26-gate-chip { background: rgba(255, 47, 168, .12); color: #c01a78; border-color: rgba(255, 47, 168, .34); }
.c26-note { font-size: 13px; line-height: 1.7; color: #7a8296; margin: 0; }
.c26-phase-head { font-size: 16px; font-weight: 900; color: var(--ink); margin: 6px 0 2px; padding-left: 12px; border-left: 4px solid var(--blue); }
.c26-phase-head.c26-letters { border-left-color: var(--cyan); }
.c26-phase-head.c26-n5 { border-left-color: var(--blue); }
.c26-phase-head.c26-n4 { border-left-color: var(--purple); }
.c26-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 6px; }
.c26-card { border: 1px solid var(--line, #e6e9f2); border-radius: 14px; background: #fff; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.c26-card-gate { border-color: rgba(255, 47, 168, .4); box-shadow: 0 0 0 1px rgba(255, 47, 168, .18); background: linear-gradient(180deg, rgba(255, 47, 168, .05), #fff 42%); }
.c26-card-head { display: flex; align-items: center; justify-content: space-between; }
.c26-week { font-size: 17px; font-weight: 900; color: var(--ink); }
.c26-gate-badge { font-size: 11px; font-weight: 800; color: #fff; background: var(--red); padding: 3px 10px; border-radius: 999px; }
.c26-field p, .c26-bunpro p { margin: 2px 0 0; font-size: 14px; line-height: 1.6; color: #2f3346; }
.c26-label { font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #8a90a6; text-transform: uppercase; }
.c26-check { background: rgba(85, 117, 232, .06); border-radius: 10px; padding: 8px 10px; }
.c26-check p { font-weight: 700; color: #2a3ba0; }
.c26-bunpro { margin-top: 2px; padding-top: 9px; border-top: 1px dashed var(--line, #e6e9f2); }
.c26-bunpro p { font-size: 12.5px; color: #7a8296; }
@media (max-width: 640px) { .c26-grid { grid-template-columns: 1fr; } }

/* ===== 26週カリキュラム：ガントチャート ===== */
.c26-gantt-wrap { overflow-x: auto; border: 1px solid var(--line, #e6e9f2); border-radius: 14px; background: #fff; padding: 12px; -webkit-overflow-scrolling: touch; }
.c26-gantt { display: flex; align-items: stretch; gap: 4px; min-width: max-content; }
.c26-gantt-phase { display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; text-orientation: mixed; font-size: 11px; font-weight: 900; padding: 0 2px; margin: 0 2px; border-radius: 8px; color: #fff; letter-spacing: .04em; }
.c26-gantt-phase.c26-letters { background: var(--cyan); }
.c26-gantt-phase.c26-n5 { background: var(--blue); }
.c26-gantt-phase.c26-n4 { background: var(--purple); }
.c26-seg { flex: 0 0 auto; width: 82px; min-height: 62px; border: 1px solid var(--line, #e6e9f2); border-radius: 10px; background: #fff; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 6px; text-align: center; transition: transform .08s ease, box-shadow .12s ease; border-top: 3px solid var(--blue); }
.c26-seg.c26-letters { border-top-color: var(--cyan); }
.c26-seg.c26-n5 { border-top-color: var(--blue); }
.c26-seg.c26-n4 { border-top-color: var(--purple); }
.c26-seg:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(23,24,42,.1); }
.c26-seg-week { font-size: 12px; font-weight: 900; color: var(--ink); }
.c26-seg-short { font-size: 11.5px; font-weight: 700; color: #566; line-height: 1.25; }
.c26-seg-gate { border: 1.5px solid var(--red); border-top-color: var(--red); background: linear-gradient(180deg, rgba(255,47,168,.08), #fff 55%); }
.c26-seg-gate .c26-seg-week { color: #c01a78; }
.c26-tap-hint { margin: 8px 2px 2px; }
.c26-card-short { font-size: 12px; font-weight: 800; color: var(--blue); margin-left: 8px; }
.c26-card-gate .c26-card-short { color: #c01a78; }
.c26-card-active { outline: 2px solid var(--blue); outline-offset: 2px; box-shadow: 0 10px 26px rgba(85,117,232,.22) !important; }
.c26-bunpro { margin-top: 2px; padding-top: 9px; border-top: 1px dashed var(--line, #e6e9f2); }
.c26-bunpro summary { font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #8a90a6; text-transform: uppercase; cursor: pointer; list-style: revert; }
.c26-bunpro p { font-size: 12.5px; color: #7a8296; margin: 6px 0 0; }

/* ===== 26週カリキュラム：ガントチャート（Backlog型・時間軸バー） ===== */
.c26-gantt2 { border-collapse: collapse; font-size: 12px; }
.c26-gantt2 th, .c26-gantt2 td { border: 1px solid rgba(71, 112, 223, .1); }
.c26-g-corner, .c26-g-label { position: sticky; left: 0; z-index: 2; background: #fff; }
.c26-g-corner { min-width: 190px; width: 190px; }
.c26-g-label { min-width: 190px; width: 190px; max-width: 190px; text-align: left; padding: 5px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c26-g-wkno { font-weight: 900; color: var(--ink); margin-right: 6px; }
.c26-g-topic { font-weight: 700; color: #3a3f52; }
.c26-g-row:hover .c26-g-label { background: #f1f6ff; }
.c26-g-row .c26-gate-badge { margin-left: 6px; font-size: 10px; padding: 2px 7px; }
.c26-g-wk { width: 30px; min-width: 30px; text-align: center; font-weight: 800; color: #566; padding: 3px 0; }
.c26-g-wk.c26-letters { background: rgba(97, 214, 232, .2); }
.c26-g-wk.c26-n5 { background: rgba(85, 117, 232, .12); }
.c26-g-wk.c26-n4 { background: rgba(140, 72, 239, .12); }
.c26-g-dia { display: block; color: var(--red); font-size: 9px; line-height: 1; margin-top: 1px; }
.c26-g-gatecol { border-left: 2px solid var(--red) !important; }
.c26-g-cell { height: 24px; padding: 0 2px; }
.c26-bar { display: block; height: 13px; border-radius: 6px; background: var(--blue); }
.c26-bar.c26-letters { background: var(--cyan); }
.c26-bar.c26-n5 { background: var(--blue); }
.c26-bar.c26-n4 { background: var(--purple); }
.c26-bar-gate { background: var(--red); box-shadow: 0 0 0 2px rgba(255, 47, 168, .25); }
.c26-g-row:hover .c26-bar { filter: brightness(1.1); }

/* ===== 26週ガント：幅を広げ、各週の項目をタイムライン上に表示 ===== */
.c26-g-corner, .c26-g-label { min-width: 88px !important; width: 88px !important; max-width: 88px !important; }
.c26-g-label { white-space: nowrap; overflow: visible; text-overflow: clip; padding: 6px 10px; }
.c26-g-wk { width: 42px !important; min-width: 42px !important; font-size: 12px; padding: 5px 0; }
.c26-g-cell { width: 42px; min-width: 42px; height: 34px; vertical-align: middle; }
.c26-bar { height: 16px; margin: 0 3px; }
.c26-has-bar { position: relative; z-index: 5; overflow: visible; }
.c26-bar-label { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 12.5px; font-weight: 800; color: #2f3346; z-index: 6; pointer-events: none; }
.c26-bl-right { left: calc(100% + 4px); }
.c26-bl-left { right: calc(100% + 4px); }
.c26-has-bar.c26-n4 ~ .c26-bar-label, .c26-bar-gate + .c26-bar-label { }

/* ===== 26週ガント：横長・縦短めに調整 ===== */
.c26-g-wk { width: 54px !important; min-width: 54px !important; padding: 3px 0; }
.c26-g-cell { width: 54px; min-width: 54px; height: 23px; }
.c26-bar { height: 12px; margin: 0 4px; }
.c26-g-label { padding: 3px 10px; }
.c26-bar-label { font-size: 12px; }

/* ===== 26週ガント：予備（調整）週 ===== */
.c26-buffer-chip { background: rgba(100, 107, 138, .14); color: #5a627a; border-color: rgba(100, 107, 138, .3); }
.c26-buffer-badge { font-size: 10px; font-weight: 800; color: #5a627a; background: rgba(100, 107, 138, .15); border: 1px solid rgba(100, 107, 138, .3); padding: 2px 7px; border-radius: 999px; margin-left: 6px; }
.c26-bar-buffer { background: repeating-linear-gradient(45deg, #aeb6cf, #aeb6cf 4px, #ccd2e6 4px, #ccd2e6 8px) !important; box-shadow: none !important; }
.c26-card-buffer { border-style: dashed; border-color: rgba(100, 107, 138, .45); background: #fafbfe; }
.c26-card-buffer .c26-card-short { color: #5a627a; }

/* 26週ガント左列の関門マーク（週番号のみ・インライン◆） */
.c26-g-dia-inline { display: inline; color: var(--red); font-size: 10px; margin-left: 3px; }

/* ===== 基本フレーズ フラッシュカード ===== */
.bp-flash-wrap { margin-top: 20px; border-top: 1px dashed var(--line, #e6e9f2); padding-top: 18px; }
.bp-flash-head { margin-bottom: 14px; }
.bp-flash-head h3 { font-size: 18px; font-weight: 900; color: var(--ink); margin: 6px 0 4px; }
.bp-flash-head p { font-size: 14px; color: #5a627a; margin: 0; }
.bpf-stage { perspective: 1200px; }
.bpf-card { width: 100%; max-width: 540px; height: 360px; margin: 0 auto; cursor: pointer; }
.bpf-inner { position: relative; width: 100%; height: 100%; transition: transform .5s; transform-style: preserve-3d; }
.bpf-card.flipped .bpf-inner { transform: rotateY(180deg); }
.bpf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 18px; border: 1px solid var(--line, #e6e9f2); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; box-shadow: var(--shadow, 0 14px 38px rgba(23,24,42,.08)); overflow: hidden; }
.bpf-front img { max-width: 100%; max-height: 250px; border-radius: 12px; object-fit: cover; }
.bpf-q { margin: 14px 0 0; font-size: 14px; font-weight: 800; color: #8a90a6; }
.bpf-back { transform: rotateY(180deg); background: linear-gradient(135deg, rgba(97,214,232,.12), #fff 60%); }
.bpf-a { font-size: 34px; font-weight: 900; color: var(--ink); text-align: center; line-height: 1.3; margin: 0; }
.bpf-scene { margin: 12px 0 0; font-size: 13px; font-weight: 700; color: #7a8296; }
.bpf-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.bpf-btn { border: 1px solid var(--line, #e6e9f2); background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 14px; color: var(--ink); cursor: pointer; }
.bpf-btn:hover { background: #f3f6ff; }
.bpf-flip { background: var(--brand-gradient, #5575e8); color: #fff; border: none; }
.bpf-count { font-weight: 900; color: var(--ink); min-width: 62px; text-align: center; }
@media (max-width: 560px) { .bpf-card { height: 300px; } .bpf-a { font-size: 26px; } }

/* 基本フレーズ フラッシュカード：日本語は教科書体（UD デジタル教科書体／Mac は 游教科書体） */
.bpf-a, .bpf-q, .bpf-scene {
  font-family: "UD デジタル教科書体 NK-R", "UD デジタル教科書体 NP-R", "UD Digital Kyokasho NK-R", "UD Digital Kyokasho NP-R", "YuKyokasho Yoko", "YuKyokasho", "Yu Kyokasho", "Hiragino Mincho ProN", serif;
}

/* 次へ移動時はフリップを即座に戻す（回転中に次の答えが見えるのを防ぐ） */
.bpf-card.bpf-no-anim .bpf-inner { transition: none !important; }

/* ===== Klee One（教科書体・オープンライセンス）を自己ホストして全端末で固定 ===== */
@font-face {
  font-family: 'Klee One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/klee-one-japanese-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Klee One';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/klee-one-japanese-600.woff2') format('woff2');
}
.bpf-a, .bpf-q, .bpf-scene {
  font-family: 'Klee One', "UD デジタル教科書体 NK-R", "UD Digital Kyokasho NK-R", "YuKyokasho Yoko", "Yu Kyokasho", serif !important;
}
.bpf-a { font-weight: 600; }

/* ===== 基本フレーズ フラッシュカード：セクションタブ（複数選択＋すべて） ===== */
.bpf-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bpf-tab { border: 1px solid var(--line, #e6e9f2); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 800; color: #5a627a; cursor: pointer; }
.bpf-tab:hover { background: #f1f6ff; }
.bpf-tab.active { background: var(--brand-gradient, #5575e8); color: #fff; border-color: transparent; }
.bpf-tab-all.active { background: var(--ink, #17182a); color: #fff; }

/* 基本フレーズ フラッシュカード：ふりがなトグル＆ルビ */
.bpf-opts { display: flex; justify-content: flex-end; margin: -6px 0 10px; }
.bpf-furi { border: 1px solid var(--line, #e6e9f2); background: #fff; border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 800; color: #5a627a; cursor: pointer; }
.bpf-furi::before { content: "あ "; font-weight: 900; }
.bpf-furi.active { background: rgba(97, 214, 232, .18); color: #1c8195; border-color: rgba(97, 214, 232, .5); }
.bpf-a rt { font-size: .42em; font-weight: 700; color: #566; user-select: none; }
.bpf-a ruby { ruby-align: center; }

/* ふりがな ON/OFF ボタン（状態がはっきり見えるトグル） */
.bpf-opts { align-items: center; }
.bpf-furi { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; }
.bpf-furi-state { display: inline-block; min-width: 34px; text-align: center; font-size: 11px; font-weight: 900; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: #e6e9f2; color: #8a90a6; }
.bpf-furi.active .bpf-furi-state { background: #1c8195; color: #fff; }

/* ===== 数え方（カウンター）練習 ===== */
.ctr-tabs { margin-bottom: 16px; }
.ctr-big { font-size: 56px; font-weight: 900; color: var(--ink); margin: 0; line-height: 1.1; }
.ctr-read { font-size: 40px; font-weight: 900; color: var(--ink); margin: 0; }
.bpf-a, .bpf-q, .bpf-scene, .ctr-big, .ctr-read, .ctr-num, .ctr-read2, .ctr-table { font-family: 'Klee One', "UD デジタル教科書体 NK-R", "UD Digital Kyokasho NK-R", "YuKyokasho Yoko", "Yu Kyokasho", serif; }
.ctr-ans-btn { background: rgba(255, 47, 168, .1); color: #c01a78; border-color: rgba(255, 47, 168, .3) !important; }
.ctr-answers { max-width: 460px; margin: 0 auto; }
.ctr-ans-head { text-align: center; font-size: 18px; font-weight: 900; color: var(--ink); margin-bottom: 12px; }
.ctr-table { width: 100%; border-collapse: collapse; }
.ctr-table td { border: 1px solid var(--line, #e6e9f2); padding: 8px 14px; font-size: 18px; }
.ctr-table .ctr-num { font-weight: 900; color: var(--ink); width: 40%; text-align: center; background: #f3f6ff; }
.ctr-table .ctr-read { font-weight: 800; color: #2a3ba0; }

/* 数え方練習：文字を大きく */
.ctr-big { font-size: 110px !important; line-height: 1.05; }
.ctr-read { font-size: 78px !important; }
.ctr-card .bpf-q { font-size: 16px; margin-top: 18px; }
.ctr-table td { font-size: 24px; padding: 10px 16px; }
.ctr-ans-head { font-size: 22px; }
@media (max-width: 560px) { .ctr-big { font-size: 76px !important; } .ctr-read { font-size: 56px !important; } }

/* 数え方練習：答え画面のスライド画像 */
.ctr-slide { display: block; width: 100%; max-width: 560px; margin: 0 auto 16px; border-radius: 12px; border: 1px solid var(--line, #e6e9f2); }
.ctr-answers { max-width: 560px; }

/* 数え方練習：クイズの数字を小さめに（大きすぎ調整） */
.ctr-big { font-size: 60px !important; }
.ctr-read { font-size: 48px !important; }
.ctr-card { height: 260px; }
@media (max-width: 560px) { .ctr-big { font-size: 46px !important; } .ctr-read { font-size: 36px !important; } }