/* Crear AI Academy 会員サイト — サイバーネイビーUI（2026-10-05 りこさん指定の配色）
   基本の5色: #050C1E #101E3B #2A3F7A #6E8CFF #EAF0FF
   背景はいちばん淡い青、内容は白いカード、文字はネイビー。差し色はサイバーブルー。
   サイバーブルー（#6E8CFF）の上には濃いネイビーの文字を載せ、白い文字を載せる所だけ同じ青の濃いめ（#3F5BD9）を使う */
:root {
  --navy-deep: #050C1E;   /* 基本色：いちばん濃いネイビー（見出し・本文） */
  --navy: #101E3B;        /* 基本色：ネイビー（ボタン・強調） */
  --royal: #2A3F7A;       /* 基本色：ロイヤルネイビー（リンク・サブの強調） */
  --navy-soft: #2A3F7A;   /* リンクの色（ロイヤルネイビー） */
  --cyber: #6E8CFF;       /* 基本色：サイバーブルー（差し色。上の文字は濃いネイビー） */
  --cyber-deep: #3F5BD9;  /* サイバーブルーの濃いめ（白い文字を載せる用） */
  --cyber-pale: #D3DDFF;  /* サイバーブルーの淡い色（線） */
  --cyber-mist: #F3F6FF;  /* サイバーブルーのごく淡い色（ホバー・地） */
  --bg: #EAF0FF;          /* 基本色：背景 */
  --blue-pale: #C5D0EC;   /* ネイビー寄りの淡い色（線） */
  --blue-mist: #EEF2FB;   /* ネイビー寄りのごく淡い色（地） */
  --ink: #050C1E;
  --sub: #44506B;         /* 補足の文字 */
  --mute: #4B5563;        /* 補足も薄い青背景で読める濃さにする */
  --field-line: #7B89A3;  /* 入力欄の境界。装飾用の --line と分ける */
  --focus: #3F5BD9;
  --line: #DCE3F5;
  --white: #ffffff;
  --warn: #3F5BD9;
  --ok: #2A3F7A;
  --danger: #B4364F;      /* エラーだけは赤（読み間違いを防ぐ） */
  --shadow: rgba(5, 12, 30, .06);
  --shadow-up: rgba(5, 12, 30, .14);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.85;
  font-size: 1rem;
}
a { color: var(--navy-soft); }

/* ---- ナビ ---- */
.topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--cyber-pale);
  position: sticky; top: 0; z-index: 10;
}
.brand img { height: 46px; display: block; }
.topnav-right { display: flex; gap: 18px; align-items: center; }
.topnav-right a { color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 500; }
.topnav-right a:hover, .topnav-right a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--cyber); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* 上のメニューと、PCの左メニュー（.sidenav）は同じリンクを使う。上のメニューでは短い名前だけ出す */
.topnav .nav-ico, .topnav .nav-full, .topnav .nav-sec { display: none; }
/* 2026-10-07 添削ルームが3つ増えたので、タブレットでも入りきらないときは1行のまま横にスクロール（いまの場所は nav.js が見える位置へ寄せる）。
   入りきるときは今までどおり右寄せ（先頭の margin-left:auto。あふれたときは0になり、左端から読める） */
.topnav { gap: 16px; }
.topnav-right { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.topnav-right::-webkit-scrollbar { display: none; }
.topnav-right > :first-child { margin-left: auto; }
.sidenav { display: none; }
.lesson-side, .chapter-index { display: none; }

.container { max-width: 880px; margin: 0 auto; padding: 28px 18px 80px; }
.foot { text-align: center; color: var(--mute); font-size: 12px; padding: 26px 0 34px; border-top: 1px solid var(--cyber-pale); }
.foot a { color: var(--mute); }
/* プライバシーポリシー（/privacy・2026-10-06） */
.policy { max-width: 760px; margin: 18px auto 0; background: #fff; border: 1px solid var(--cyber-pale); border-radius: 16px; padding: 28px 26px; color: var(--ink); line-height: 1.85; font-size: 14.5px; }
.policy-kicker { color: var(--cyber-deep); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.policy h1 { color: var(--navy); font-size: 24px; margin: 2px 0 14px; }
.policy h2 { color: var(--navy); font-size: 16.5px; margin: 24px 0 8px; padding-top: 14px; border-top: 1px dashed var(--cyber-pale); }
.policy ul { padding-left: 1.3em; margin: 6px 0; }
.policy p { margin: 6px 0; }
.policy-date { color: var(--mute); font-size: 13px; margin-top: 18px !important; }
@media (max-width: 560px) { .policy { padding: 20px 16px; font-size: 14px; } }

/* ---- ホーム ---- */
.hero { text-align: center; padding: 30px 0 10px; }
.hero-logo { width: 210px; max-width: 60%; }
.hero-lead { color: var(--sub); margin-top: 6px; font-size: 15px; }
.course-grid { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 640px) { .course-grid { grid-template-columns: 1fr 1fr; } }
.course-card {
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: var(--ink);
  background: var(--white);
  box-shadow: 0 1px 4px var(--shadow);
  transition: box-shadow .15s, transform .15s;
}
.course-card:hover { box-shadow: 0 6px 18px var(--shadow-up); transform: translateY(-2px); }
.course-card-body { padding: 22px 22px 14px; }
.course-card h2 { color: var(--navy); font-size: 18px; margin-bottom: 12px; }
.course-card-cta {
  background: var(--navy); color: #fff; text-align: center;
  padding: 11px; font-size: 14px; font-weight: 600; letter-spacing: .06em;
}

/* ---- 進捗 ---- */
.progress-line { display: flex; align-items: center; gap: 10px; }
.progress-bar {
  flex: 1; height: 8px; background: var(--blue-mist);
  border-radius: 99px; overflow: hidden;
}
.progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyber), var(--royal) 55%, var(--navy)); border-radius: 99px; }
.progress-num { font-size: 12.5px; color: var(--sub); white-space: nowrap; }

/* ---- パンくず ---- */
.crumb { font-size: 13px; color: var(--mute); margin-bottom: 18px; }
.crumb a { color: var(--mute); text-decoration: none; }
.crumb a:hover { color: var(--navy); }

/* ---- コースページ ---- */
.course-head h1 { color: var(--navy); font-size: 24px; margin-bottom: 12px; }
.course-head { margin-bottom: 30px; }
.chapter {
  margin-bottom: 20px; background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px var(--shadow);
}
.chapter h2 {
  font-size: 15px; color: var(--navy); background: var(--blue-mist);
  border-left: 4px solid var(--navy);
  padding: 10px 14px;
}
.lesson-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--blue-mist); font-size: 14.5px;
}
.lesson-row:last-child { border-bottom: 0; }
.lesson-row:hover { background: var(--cyber-mist); }
.lesson-row .check {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--blue-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff;
}
.lesson-row.done .check { background: var(--navy); border-color: var(--navy); }
.lesson-row.done .lesson-title { color: var(--mute); }

/* ---- レッスンページ ---- */
.lesson {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 24px 22px; box-shadow: 0 1px 4px var(--shadow);
}
.lesson h1 { color: var(--navy); font-size: 22px; margin-bottom: 18px; }
.player { border-radius: 12px; overflow: hidden; background: #000; margin-bottom: 24px; }
.player video { width: 100%; display: block; aspect-ratio: 16 / 9; }
.lesson-body { font-size: 15.5px; }
.lesson-body img { max-width: 100%; height: auto; }
.lesson-body iframe { max-width: 100%; }
.lesson-body p { margin: 0 0 1em; }
.lesson-body h1, .lesson-body h2, .lesson-body h3 { color: var(--navy); margin: 1.6em 0 .6em; }
.lesson-body a { color: var(--navy-soft); }
.lesson-body ul, .lesson-body ol { padding-left: 1.5em; margin-bottom: 1em; }
.lesson-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line);
}
@media (max-width: 560px) { .lesson { padding: 20px 16px 18px; border-radius: 14px; } }

/* ---- ボタン ---- */
.btn {
  display: inline-block; padding: 10px 20px; border-radius: 99px;
  font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--navy); background: var(--white); color: var(--navy);
  font-family: inherit;
}
.btn.primary { background: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-deep); }
.btn.ghost { border-color: var(--blue-pale); color: var(--navy-soft); }
.btn.ghost:hover { background: var(--cyber-mist); }
.btn.done-btn { background: var(--cyber-pale); border-color: var(--cyber-pale); color: var(--royal); }
.btn.wide { width: 100%; text-align: center; }
.btn.small { padding: 5px 12px; font-size: 12.5px; }

/* ---- 認証カード ---- */
.auth-card {
  max-width: 400px; margin: 40px auto; padding: 34px 30px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--white);
  box-shadow: 0 4px 24px rgba(5, 12, 30, .08);
  text-align: center;
}
.auth-logo { width: 160px; margin-bottom: 10px; }
.auth-card h1 { color: var(--navy); font-size: 19px; margin-bottom: 16px; }
.auth-note { font-size: 13.5px; color: var(--sub); text-align: left; margin-bottom: 14px; }
.auth-card form { text-align: left; }
.auth-card label { display: block; font-size: 13px; color: var(--navy); font-weight: 600; margin-bottom: 14px; }
.auth-card input {
  width: 100%; padding: 11px 12px; margin-top: 5px;
  border: 1.5px solid var(--line); border-radius: 8px; font-size: 15px;
  font-family: inherit;
}
.auth-card input:focus { outline: none; border-color: var(--cyber); box-shadow: 0 0 0 3px var(--cyber-mist); }
.auth-links { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.auth-links a { font-size: 13px; }
.notice {
  background: var(--blue-mist); border-left: 4px solid var(--navy);
  color: var(--navy); font-size: 13.5px; text-align: left;
  padding: 10px 14px; border-radius: 0 8px 8px 0; margin-bottom: 16px;
}

/* ---- 管理 ---- */
.admin-stats { display: flex; gap: 14px; margin: 18px 0; flex-wrap: wrap; }
.stat {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 22px; background: var(--white);
  display: flex; flex-direction: column; align-items: center; min-width: 120px;
}
.stat b { color: var(--navy); font-size: 22px; }
.stat span { font-size: 12px; color: var(--mute); }
.admin-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.admin-tools input[type=search] { padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; }
.table-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.admin-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.admin-table th, .admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--blue-mist); text-align: left; white-space: nowrap; }
.admin-table th { color: var(--navy); background: var(--blue-mist); }
.tag { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; background: var(--blue-mist); color: var(--sub); }
.tag.ok { background: #E3E9F8; color: var(--ok); }
.tag.info { background: var(--cyber-pale); color: var(--royal); }
.tag.warn { background: #EEF2FF; color: var(--cyber-deep); }   /* 注意（未設定・除外済など） */
.tag.ng { background: #FDEEF1; color: var(--danger); }          /* 失敗 */
.actions form { margin-right: 4px; }
.row-inactive td { opacity: .5; text-decoration: line-through; }
.row-inactive td:first-child, .row-inactive .actions { text-decoration: none; }
.linkbox {
  background: var(--blue-mist); border-radius: 10px; padding: 14px 16px;
  margin: 16px 0; word-break: break-all; font-size: 13px;
}

/* ================= PCのレイアウト（2026-10-06 りこさん依頼「パソコンでは横に広く・一回り大きく」） =================
   スマホ（〜767px）は今までどおり。
   タブレット（768〜1199px）：上のメニューのまま、本文の幅を広げる。
   PC（1200px〜）：左にメニュー（.sidenav）、右に広い本文。文字・カード・ボタンを一回り大きく。
   PC（1280px〜）：ページによって2列（.split。shared.mjs の split()）。講座ページは左に章の目次、レッスンは右にレッスン一覧。
   AIツールの場所ごとの大きさと、2列の中身は coach.css の「PCのレイアウト」。 */
@media (min-width: 768px) {
  .container { max-width: 1080px; padding: 30px 28px 88px; }
}

@media (min-width: 1200px) {
  body { font-size: 16px; }
  body.has-side { padding-left: 264px; }
  .has-side .topnav { display: none; }
  .sidenav {
    display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: 264px; z-index: 20;
    background: var(--white); border-right: 1px solid var(--cyber-pale); padding: 20px 12px 16px; overflow-y: auto; scrollbar-width: thin;
  }
  .side-brand { display: block; padding: 2px 10px 12px; }
  .side-brand img { height: 54px; display: block; }
  .side-links { display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .sidenav .nav-sec { display: block; margin: 18px 12px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--mute); }
  .sidenav .nav-short { display: none; }
  .sidenav .nav-link {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
    color: var(--navy); text-decoration: none; font-size: 14.5px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  }
  .sidenav .nav-link:hover { background: var(--cyber-mist); }
  .sidenav .nav-full { overflow: hidden; text-overflow: ellipsis; }
  .sidenav .nav-ico { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--blue-mist); color: var(--royal); }
  .sidenav .ico { width: 19px; height: 19px; display: block; }
  .sidenav .nav-link[aria-current="page"] { background: var(--navy); color: #fff; }
  .sidenav .nav-link[aria-current="page"] .nav-ico { background: var(--cyber); color: var(--navy-deep); }
  .side-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--cyber-pale); display: flex; flex-direction: column; gap: 2px; }
  .side-user { display: flex; align-items: center; gap: 10px; padding: 4px 12px 8px; font-size: 13.5px; font-weight: 600; color: var(--sub); }
  .side-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
  .side-foot .nav-link { font-size: 14px; font-weight: 500; color: var(--sub); }
  .side-foot .nav-ico { background: transparent; }

  .has-side .container { max-width: 1240px; padding: 34px 40px 96px; }
  .crumb { font-size: 13.5px; }

  /* ボタン・ログインのカードを一回り大きく */
  .btn { padding: 11px 22px; font-size: 14.5px; }
  .btn.small { padding: 6px 14px; font-size: 13px; }
  .auth-card { max-width: 440px; margin: 56px auto; padding: 40px 36px; }
  .auth-card h1 { font-size: 21px; }
  .auth-card input { font-size: 16px; padding: 12px 14px; }

  /* ホーム：ロゴは左メニューにあるので、あいさつを見出しにする */
  .has-side .hero { text-align: left; padding: 4px 0 0; }
  .has-side .hero-logo { display: none; }
  .has-side .hero-lead { font-size: 23px; font-weight: 700; color: var(--navy); margin: 0; line-height: 1.6; }
  .course-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; margin-top: 32px; }
  .course-card-body { padding: 26px 26px 18px; }
  .course-card h2 { font-size: 20px; }
  .course-card-cta { padding: 13px; font-size: 15px; }

  /* 講座・レッスン */
  .course-head h1 { font-size: 27px; }
  .chapter h2 { font-size: 16px; padding: 12px 18px; }
  .lesson-row { padding: 13px 18px; font-size: 15.5px; }
  .lesson-row .check { width: 24px; height: 24px; }
  .lesson { padding: 30px 30px 26px; border-radius: 18px; }
  .lesson h1 { font-size: 26px; margin-bottom: 22px; }
  .lesson-body { font-size: 16.5px; }

  /* 管理 */
  .stat { padding: 16px 26px; min-width: 150px; }
  .stat b { font-size: 25px; }
  .stat span { font-size: 12.5px; }
  .admin-table { font-size: 14px; }
  .admin-table th, .admin-table td { padding: 10px 12px; }

  /* プライバシーポリシー：左メニューがあるときは左にそろえる */
  .has-side .policy { max-width: 900px; margin: 6px 0 0; padding: 36px 40px; font-size: 15.5px; }
}
@media (min-width: 1440px) { .has-side .container { padding-left: 52px; padding-right: 52px; } }
@media (min-width: 1680px) { .has-side .container { max-width: 1400px; } }

/* ---- 2列（.split）：1280px〜。メイン＋右の列（.split.left は左の列＋メイン） ---- */
@media (min-width: 1280px) {
  .split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 28px; align-items: start; margin-top: 22px; }
  .split.left { grid-template-columns: 300px minmax(0, 1fr); }
  .split-main { min-width: 0; }
  .split-main > :first-child { margin-top: 0 !important; }
  .split-aside { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  .split-aside > * { margin-top: 0 !important; margin-bottom: 0 !important; }
  /* 横の列が短いページは、スクロールしても付いてくる（長いときは列の中でスクロール） */
  .split.sticky > .split-aside, .pg-course > .split-aside, .lesson-side {
    position: sticky; top: 22px; max-height: calc(100vh - 44px); overflow-y: auto; scrollbar-width: thin;
    padding: 2px 4px 8px; margin: -2px -4px 0;
  }

  /* 講座ページ：左に講座名・進み具合・章の目次 */
  .pg-course .course-head { margin: 0; padding: 20px 20px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 4px var(--shadow); }
  .pg-course .course-head h1 { font-size: 21px; line-height: 1.5; }
  .pg-course .progress-line { flex-wrap: wrap; }
  .chapter-index { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
  .chapter-index b { font-size: 12px; letter-spacing: .12em; color: var(--mute); padding: 0 8px 6px; }
  .chapter-index a { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; padding: 7px 8px; border-radius: 10px; text-decoration: none; color: var(--navy); font-size: 13.5px; line-height: 1.5; }
  .chapter-index a:hover { background: var(--cyber-mist); }
  .chapter-index small { flex: none; font-size: 11.5px; color: var(--mute); }
  .chapter-index a.done span { color: var(--mute); }
  .pg-course .chapter { scroll-margin-top: 20px; }

  /* レッスン：右にこのコースのレッスン一覧（1680px〜だけ。それより狭いPCは、動画を大きく見せるため1列のまま） */
  .split.pg-lesson { display: block; }
  .split.pg-lesson > .lesson-side { display: none; }
  .ls-box { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 16px 12px 10px; max-height: calc(100vh - 56px); }
  .ls-course { padding: 0 8px 6px; font-weight: 700; font-size: 15px; color: var(--navy); text-decoration: none; line-height: 1.5; }
  .ls-course:hover { text-decoration: underline; }
  .ls-box .progress-line { padding: 0 8px 12px; border-bottom: 1px solid var(--line); }
  .ls-list { position: relative; overflow-y: auto; margin-top: 4px; padding-bottom: 4px; scrollbar-width: thin; }
  .ls-group { position: sticky; top: 0; z-index: 1; margin: 10px 0 4px; padding: 5px 8px; border-radius: 8px; background: var(--blue-mist); color: var(--royal); font-size: 12px; font-weight: 700; line-height: 1.5; }
  .ls-item { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: 10px; text-decoration: none; color: var(--ink); font-size: 13.5px; line-height: 1.55; }
  .ls-item:hover { background: var(--cyber-mist); }
  .ls-item .check { width: 18px; height: 18px; flex: none; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--blue-pale); display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
  .ls-item.done .check { background: var(--navy); border-color: var(--navy); }
  .ls-item.done .ls-title { color: var(--mute); }
  .ls-item.is-current { background: var(--navy); color: #fff; }
  .ls-item.is-current .ls-title { color: #fff; }
  .ls-item.is-current .check { border-color: var(--cyber); }
  .ls-item.is-current.done .check { background: var(--cyber); border-color: var(--cyber); color: var(--navy-deep); }
}
@media (min-width: 1440px) {
  .split { grid-template-columns: minmax(0, 1fr) 340px; gap: 0 36px; }
  .split.left { grid-template-columns: 320px minmax(0, 1fr); }
}
@media (min-width: 1680px) {
  .split.pg-lesson { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 36px; }
  .split.pg-lesson > .lesson-side { display: block; }
}

/* 会員を追加する（管理画面・2026-10-08） */
.admin-add { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.admin-add summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.admin-add form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.admin-add textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.admin-add button { align-self: flex-start; }

/* 視認性・キーボード操作（2026-10-13） */
[hidden] { display: none !important; }
html { scroll-padding-top: 90px; }
/* 個別フォームの outline:none より優先し、すべての操作に同じ選択枠を出す。 */
:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 3px; }
input::placeholder, textarea::placeholder { color: var(--mute); opacity: 1; }
.auth-card input, .admin-tools input[type=search], .admin-add textarea {
  border-color: var(--field-line); font-size: 1rem;
}
.auth-card input:focus { border-color: var(--focus); }
.foot, .crumb { font-size: .875rem; }
.auth-note, .auth-card label, .auth-links a, .notice { font-size: .875rem; }
.nav-toggle {
  display: inline-flex; gap: 8px; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 14px; margin-left: auto; border: 1.5px solid var(--navy);
  border-radius: 10px; color: var(--navy); background: #fff; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
@media (max-width: 1199px) {
  .member-nav { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; }
  .member-nav .brand img { height: 40px; }
  .member-nav .topnav-right {
    flex: 0 0 100%; display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    max-height: min(65vh, 620px); overflow-y: auto; overflow-x: hidden; white-space: normal;
    scrollbar-width: auto; padding: 8px 4px; border-top: 1px solid var(--line);
  }
  .member-nav .topnav-right > :first-child { margin-left: 0; }
  .member-nav .topnav-right::-webkit-scrollbar { display: block; }
  .member-nav .topnav-right a {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px;
    border-radius: 8px; font-size: 1rem; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere;
  }
  .member-nav .nav-short { display: none; }
  .member-nav .nav-full { display: inline; }
  .member-nav .nav-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--royal); }
  .member-nav .nav-ico .ico { display: block; width: 22px; height: 22px; }
  .member-nav .nav-sec { display: block; margin: 12px 12px 2px; color: var(--mute); font-size: .875rem; font-weight: 700; }
  .member-nav a[aria-current="page"] { background: var(--navy); color: #fff; text-decoration: none; }
  .member-nav a[aria-current="page"] .nav-ico { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .course-card { transition: none; }
}