/* =============================================================================
   AIミニ校長 — 画面のスタイル
   デザインシステムは「とここと手帳」（tokens.css）。ここでは部品だけを足す。
   守ること:
   - グラデーション・影の多用・一辺だけの色枠は使わない（手帳＝白い紙と黒い細枠）
   - 色は「識別」にだけ使う。塗りつぶして目立たせない
   - 角は直角寄り（--radius-sm / md）。丸っこくしない
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-app);
  letter-spacing: var(--ls-mid);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--text-link); }
img, svg { max-width: 100%; }
button { font: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.logo-font { font-family: var(--font-logo); letter-spacing: var(--ls-wide); font-weight: 400; }
.muted { color: var(--text-secondary); }
.small { font-size: var(--fs-sm); }
.micro { font-size: var(--fs-micro); color: var(--text-tertiary); }
.center { text-align: center; }
.hidden { display: none !important; }
.stack > * + * { margin-top: var(--space-4); }

/* ───────── ヘッダ ───────── */
header.site {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--paper); border-bottom: 1px solid var(--border-strong);
}
.hbar {
  max-width: 960px; margin: 0 auto; padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
}
.hbar .brand {
  font-family: var(--font-logo); font-size: 20px; letter-spacing: var(--ls-wide);
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
.hbar .brand em { font-style: normal; color: var(--ginkgo-deep); }
.hbar .sp { flex: 1; }
.hbar nav { display: flex; gap: var(--space-2); align-items: center; }
.hbar nav a { font-size: var(--fs-sm); text-decoration: none; color: var(--text-secondary); white-space: nowrap; }
.hbar nav a:hover { color: var(--ink); text-decoration: underline; }

main { max-width: 960px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-12); }
main.narrow { max-width: 560px; }

/* ───────── 見出し ───────── */
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-mid); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
.sec { margin-top: var(--space-12); }
.sec > h2 {
  padding-bottom: var(--space-2); margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-strong);
  display: flex; align-items: baseline; gap: var(--space-3);
}
.sec > h2 small { font-size: var(--fs-caption); color: var(--text-tertiary); font-weight: 400; }

/* ───────── カード（手帳の黒細枠） ───────── */
.card {
  background: var(--paper); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: var(--space-5);
}
.card.soft { border-color: var(--border-default); }
.grid { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .grid.two { grid-template-columns: 1fr 1fr; } }

/* ───────── ボタン ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 11px var(--space-5); border-radius: var(--radius-sm);
  border: 1px solid var(--ink); background: var(--ink); color: var(--text-ondark);
  font-size: var(--fs-body); font-weight: 500; letter-spacing: var(--ls-mid);
  text-decoration: none; cursor: pointer; transition: opacity var(--dur) var(--ease);
}
.btn:hover { opacity: .84; }
.btn:disabled { opacity: .35; cursor: default; }
.btn.line { background: var(--paper); color: var(--ink); }
.btn.ghost { background: transparent; border-color: var(--border-default); color: var(--text-secondary); }
.btn.sm { padding: 7px var(--space-4); font-size: var(--fs-sm); }
.btn.lg { padding: 14px var(--space-8); font-size: var(--fs-body-lg); }
.btn.wide { width: 100%; }
.btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ───────── 入力 ───────── */
label.f { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: var(--space-2); }
input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%; padding: 11px var(--space-3); font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
}
input:focus, textarea:focus, select:focus { border-color: var(--ink); outline: none; }
.otp-in { font-size: 24px; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }

/* ───────── 注記（手帳の note） ───────── */
.note { border-left: 3px solid var(--border-default); padding: var(--space-3) var(--space-4);
        background: var(--bg-subtle); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--fs-sm); }
.note.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.note.good { border-left-color: var(--good); background: var(--good-bg); }
.note.risk { border-left-color: var(--risk); background: var(--risk-bg); }
.note b { font-weight: 700; }

/* ───────── LP ───────── */
.hero { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 760px) { .hero { grid-template-columns: 1fr 220px; } }
.hero h1 { font-family: var(--font-logo); font-size: 34px; line-height: 1.45; letter-spacing: var(--ls-wide); }
.hero .lead { margin-top: var(--space-4); color: var(--text-secondary); }
.hero .chara { justify-self: center; }
.hero .chara img { width: 200px; }

.steps-line { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
              font-size: var(--fs-sm); color: var(--text-secondary); }
.steps-line span { border: 1px solid var(--border-default); border-radius: var(--radius-full); padding: 3px 12px; background: var(--paper); }

/* 講座カード */
.course {
  background: var(--paper); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
}
.course .top { display: flex; align-items: flex-start; gap: var(--space-3); }
.course .lvbadge {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
  color: var(--paper); background: var(--lv);
}
.course h3 { font-size: var(--fs-h3); }
.course .meta { font-size: var(--fs-caption); color: var(--text-tertiary); }
.course .goal { font-size: var(--fs-sm); color: var(--text-secondary); }
.course ul { margin: 0; padding-left: 1.15em; font-size: var(--fs-sm); color: var(--text-secondary); }
.course ul li { margin: 2px 0; }
.course .foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle);
                display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.price { font-size: var(--fs-h2); font-weight: 700; }
.price small { font-size: var(--fs-caption); font-weight: 400; color: var(--text-tertiary); margin-left: 2px; }
.tag { font-size: var(--fs-micro); border: 1px solid var(--border-default); border-radius: var(--radius-full);
       padding: 2px 10px; color: var(--text-secondary); background: var(--bg-subtle); }
.tag.own { border-color: var(--good); color: var(--good); background: var(--good-bg); }
.tag.free { border-color: var(--lv-free); color: var(--lv-free); background: var(--good-bg); }

/* 進捗バー（カード内の細いやつ） */
.pbar { height: 4px; background: var(--bg-neutral); border-radius: var(--radius-full); overflow: hidden; }
.pbar > i { display: block; height: 100%; background: var(--ink); }

/* ───────── 表 ───────── */
table.t { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.t th, table.t td { border: 1px solid var(--border-subtle); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
table.t th { background: var(--bg-subtle); font-weight: 500; white-space: nowrap; }
.scrollx { overflow-x: auto; }

/* =============================================================================
   スライド学習画面（Progate 型）
   1画面＝1つのことだけ。進むボタンは常に同じ場所（親指の位置）にある。
   ========================================================================== */
body.learn { background: var(--bg-app); }
.lrn-head {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--paper); border-bottom: 1px solid var(--border-strong);
}
.lrn-head .row {
  max-width: var(--slide-max); margin: 0 auto; padding: var(--space-2) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
}
.lrn-head .ttl { font-size: var(--fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrn-head .sp { flex: 1; }
.lrn-head .cnt { font-size: var(--fs-caption); color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lrn-head .x { text-decoration: none; color: var(--text-tertiary); font-size: 18px; line-height: 1; padding: 4px; }
.lrn-prog { height: 3px; background: var(--bg-neutral); }
.lrn-prog > i { display: block; height: 100%; background: var(--ginkgo); transition: width .25s var(--ease); }

.lrn-stage { max-width: var(--slide-max); margin: 0 auto; padding: var(--space-6) var(--space-4) 120px; }
.slide { animation: slidein .22s var(--ease); }
@keyframes slidein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.slide .kicker { font-size: var(--fs-micro); letter-spacing: var(--ls-wide); color: var(--text-tertiary); margin-bottom: var(--space-2); }
.slide h2 { font-size: 21px; line-height: 1.5; margin-bottom: var(--space-4); }
.slide .body > * + * { margin-top: var(--space-4); }
.slide .body p { font-size: var(--fs-body-lg); }
.slide .body ul, .slide .body ol { padding-left: 1.3em; }
.slide .body li + li { margin-top: var(--space-2); }
.slide .body b { font-weight: 700; }
.slide .body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: var(--bg-neutral); border-radius: var(--radius-sm); padding: 1px 5px; }

/* 図解 */
figure.fig { background: var(--paper); border: 1px solid var(--border-default); border-radius: var(--radius-md);
             padding: var(--space-5) var(--space-4); }
figure.fig svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
figure.fig figcaption { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--text-tertiary); text-align: center; }

/* ミニ校長のひとこと（吹き出し） */
.kocho { display: flex; align-items: flex-end; gap: var(--space-3); }
.kocho img { width: 74px; flex-shrink: 0; }
.kocho .baloon {
  position: relative; background: var(--ginkgo-wash); border: 1px solid var(--ginkgo-deep);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--fs-sm);
}
.kocho .baloon::before {
  content: ""; position: absolute; left: -7px; bottom: 16px; width: 12px; height: 12px;
  background: var(--ginkgo-wash); border-left: 1px solid var(--ginkgo-deep); border-bottom: 1px solid var(--ginkgo-deep);
  transform: rotate(45deg);
}

/* 選択肢（設問・分岐） */
.choices { display: grid; gap: var(--space-3); }
.choice {
  display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; text-align: left;
  background: var(--paper); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-4); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice:hover { border-color: var(--ink); }
.choice .mk {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-full);
  border: 1px solid var(--border-default); display: grid; place-items: center;
  font-size: var(--fs-caption); color: var(--text-tertiary); background: var(--bg-subtle);
}
.choice .tx { font-size: var(--fs-body); }
.choice .tx small { display: block; color: var(--text-tertiary); font-size: var(--fs-caption); margin-top: 2px; }
.choice.picked { border-color: var(--ink); background: var(--bg-subtle); }
.choice.ok { border-color: var(--good); background: var(--good-bg); }
.choice.ok .mk { border-color: var(--good); background: var(--good); color: #fff; }
.choice.ng { border-color: var(--risk); background: var(--risk-bg); }
.choice.ng .mk { border-color: var(--risk); background: var(--risk); color: #fff; }
.choice:disabled { cursor: default; }
.verdict { margin-top: var(--space-4); }

/* チェック（手を動かす） */
.checks { display: grid; gap: var(--space-2); }
.chk { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--paper);
       border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
       cursor: pointer; }
.chk input { margin-top: 5px; width: 17px; height: 17px; accent-color: var(--ink); flex-shrink: 0; }
.chk.done { background: var(--good-bg); border-color: var(--good); }
.chk .tx small { display: block; color: var(--text-tertiary); font-size: var(--fs-caption); margin-top: 2px; }

/* プロンプト枠 */
.pr { border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--paper); }
.pr .prh { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
           background: var(--ink); color: var(--text-ondark); font-size: var(--fs-caption); }
.pr .prh .sp { flex: 1; }
.pr .prh button { background: transparent; color: var(--text-ondark); border: 1px solid rgba(255,255,255,.45);
                  border-radius: var(--radius-sm); padding: 3px 10px; font-size: var(--fs-micro); cursor: pointer; }
.pr .prh button:hover { background: rgba(255,255,255,.12); }
.pr pre { margin: 0; padding: var(--space-4); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
          font-size: 12.5px; line-height: 1.75; white-space: pre-wrap; word-break: break-word;
          max-height: 340px; overflow: auto; }
.pr .fill { padding: var(--space-3) var(--space-4); border-top: 1px dashed var(--border-default); background: var(--bg-subtle); }
.pr .fill label { font-size: var(--fs-caption); color: var(--text-secondary); }
.pr .fill input { margin-top: 4px; }

/* 下の操作バー（常に同じ位置） */
.lrn-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header);
  background: var(--paper); border-top: 1px solid var(--border-strong);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
}
.lrn-foot .row { max-width: var(--slide-max); margin: 0 auto; display: flex; align-items: center; gap: var(--space-3); }
.lrn-foot .sp { flex: 1; }
.lrn-foot .hint { font-size: var(--fs-micro); color: var(--text-tertiary); }

/* 章の区切り・修了 */
.chapter-cover { text-align: center; padding: var(--space-10) 0; }
.chapter-cover .num { font-family: var(--font-logo); font-size: 46px; color: var(--ginkgo-deep); }
.chapter-cover h2 { margin-top: var(--space-2); }
.finish { text-align: center; }
.finish img { width: 150px; }

/* 鍵のかかった講座 */
.lock { text-align: center; padding: var(--space-10) var(--space-4); }
.lock img { width: 120px; margin-bottom: var(--space-4); }

/* ───────── 管理画面 ───────── */
.adm-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.adm-tabs button { background: var(--paper); border: 1px solid var(--border-default); border-radius: var(--radius-full);
                   padding: 5px 14px; font-size: var(--fs-sm); cursor: pointer; color: var(--text-secondary); }
.adm-tabs button.cur { background: var(--ink); border-color: var(--ink); color: var(--text-ondark); }
.kpi { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.kpi .k { background: var(--paper); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4); }
.kpi .k .n { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .k .l { font-size: var(--fs-caption); color: var(--text-tertiary); }

footer.site { border-top: 1px solid var(--border-default); background: var(--paper); }
footer.site .row { max-width: 960px; margin: 0 auto; padding: var(--space-6) var(--space-4);
                   font-size: var(--fs-caption); color: var(--text-tertiary); display: flex; gap: var(--space-4); flex-wrap: wrap; }
footer.site a { color: var(--text-secondary); }

/* トースト */
#toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 200;
         background: var(--ink); color: var(--text-ondark); border-radius: var(--radius-sm);
         padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); opacity: 0; pointer-events: none;
         transition: opacity var(--dur) var(--ease); }
#toast.on { opacity: 1; }

/* 図解の中の文字も本文と同じ字面にそろえる（SVG は継承しないので明示する） */
figure.fig svg text { font-family: var(--font-body); fill: var(--ink); }
figure.fig svg .sub { fill: var(--text-secondary); }
figure.fig svg .box { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
figure.fig svg .box-soft { fill: var(--bg-subtle); stroke: var(--border-default); stroke-width: 1; }
figure.fig svg .box-hi { fill: var(--ginkgo-wash); stroke: var(--ginkgo-deep); stroke-width: 1; }
figure.fig svg .ln { stroke: var(--ink); stroke-width: 1; fill: none; }
figure.fig svg .ln-soft { stroke: var(--border-default); stroke-width: 1; fill: none; }
figure.fig svg .ng { stroke: var(--risk); }