/* ============================================================
   CORPIA（仮） — L2 レッスン一覧 / L3 レッスン画面 / 資料倉庫
   構図の出典は Circle Academy（circle.so/academy）。ボス指示 2026-09-07。
   ただし本家は濃紺サイドバー。CORPIA は tokens.css の「純白の創造前世界」
   なので、構図だけ借りて色は全面的に白基調へ翻訳している。
   トップ（index.html）の .card 系とは名前を分けてある（.lcard / .lib など）。
   ============================================================ */

/* ============================================================
   共通：サブページの土台
   ============================================================ */
.sub {
  position: relative; z-index: 1;
  padding: clamp(5rem, 10vh, 7rem) var(--pad-x) clamp(4rem, 9vw, 7rem);
}
.wrap { max-width: 1680px; margin-inline: auto; }

/* パンくず（← 一覧へ戻る） */
.crumb {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-sans); font-size: var(--t-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-mute); text-decoration: none;
  transition: color .3s ease;
}
.crumb:hover { color: var(--c-ink); }
.crumb__ar { transition: transform .45s cubic-bezier(.22,1,.36,1); }
.crumb:hover .crumb__ar { transform: translateX(-4px); }

/* ============================================================
   L2 コース見出し
   ============================================================ */
/* ★2026-09-07：ボス指示「大幅にカット・お手本のシンプルさを踏襲」。
   リード文と、Lessons/Runtime/Sections の大きな数字3本を落とした。
   本家 circle.so/academy のコース見出しも、題名と "3 sections・10 lessons" の
   1行だけで、あとはすぐ中身に入る。 */
.chero { display: grid; gap: .9rem; padding-block: 1.4rem 0; }
.chero__cat {
  font-family: var(--f-sans); font-size: var(--t-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-mute);
}
.chero__ttl {
  font-family: var(--f-sans); font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.3; color: var(--c-ink);
  letter-spacing: -.005em; text-wrap: balance;
}
/* 数字は大きく見せず、1行の添え物にする */
.chero__meta {
  font-family: var(--f-sans); font-size: .78rem; color: var(--c-mute);
  font-variant-numeric: tabular-nums;
}

/* 進捗（Circle の "Completed 0 of 10 lessons / 0%" 相当） */
.prog { display: grid; gap: .7rem; max-width: 640px; }
.prog__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: var(--f-sans); font-size: .78rem; color: var(--c-mute);
  font-variant-numeric: tabular-nums;
}
.prog__pct { color: var(--c-ink); font-size: .95rem; }
.prog__bar {
  height: 2px; background: var(--c-line); position: relative; overflow: hidden;
}
.prog__fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--c-ink);
  transition: width .9s cubic-bezier(.22,1,.36,1);
}

.course-next { display: grid; gap: .35rem; margin-top: .6rem; }
.course-next > span, .course-next__done {
  font-family: var(--f-jp); font-size: .78rem; color: var(--c-mute);
}
.course-next a, .course-next__done a {
  width: fit-content; font-family: var(--f-jp); font-size: .88rem;
  color: var(--c-ink); text-decoration: underline; text-underline-offset: 4px;
}
.course-next__done { margin-top: .6rem; }
.course-next__done a { margin-left: .5em; }

/* ============================================================
   L2 レッスンのカードグリッド（ボス選択：アコーディオンではなくグリッド）
   セクション名はグリッドの上に置くだけ。折りたたまない。
   ============================================================ */
.sec { margin-top: clamp(3rem, 7vw, 5rem); }
.sec__hd {
  display: flex; align-items: baseline; gap: 1rem;
  padding-bottom: .9rem; margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--c-line);
}
.sec__ttl {
  font-family: var(--f-jp); font-weight: 400;
  font-size: var(--t-h3); color: var(--c-ink); letter-spacing: .02em;
}
.sec__n {
  font-family: var(--f-sans); font-size: var(--t-label);
  letter-spacing: .14em; color: var(--c-mute); margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.lgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.8rem, 3vw, 2.6rem) clamp(1.4rem, 2.2vw, 2rem);
}

/* ★2026-09-07：本家 circle.so/academy のカードに寄せて作り直した。
   絵を端まで敷くのではなく、白い枠の【中】に余白を持って画を置き、その下に文字を置く。
   ★前版の不具合：.lcard__vis が <span>（インライン）のまま position:relative だったため、
     絶対配置の「◯分」「講」がカードの外へ飛び出し、見出しが次の行に食い込んでいた。
     要素を div にし、display:block を明示して直した。 */
.lcard {
  display: block; text-decoration: none; color: inherit;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  padding: .8rem .8rem 1.15rem;
  transition: border-color .35s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.lcard:hover { border-color: var(--c-ink); transform: translateY(-3px); }

/* サムネ：48枚ぶんの絵が無いので、コース画像を白へ沈めて【講番号】を識別子にしている。
   ホバーで色と濃度が戻る＝トップの .card:hover と同じ性格の反応。 */
.lcard__vis {
  display: block;
  position: relative; aspect-ratio: 5 / 3; overflow: hidden;
  background: var(--c-bg-2);
}
.lcard__vis img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--ox, 50%) 50%;
  filter: grayscale(1) contrast(1.02);
  opacity: .22;
  transform: scale(1.001);
  transition: opacity .8s ease, filter .8s ease, transform 1.2s cubic-bezier(.22,1,.36,1);
}
.lcard:hover .lcard__vis img { opacity: .44; filter: grayscale(.15) contrast(1); transform: scale(1.04); }

.lcard__no {
  position: absolute; left: .85rem; bottom: .55rem;
  font-family: var(--f-disp); font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1; color: var(--c-ink); font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.lcard__cap { display: block; padding-top: 1rem; }
.lcard__meta {
  display: block; margin-bottom: .45rem;
  font-family: var(--f-sans); font-size: .68rem; letter-spacing: .06em;
  color: var(--c-mute); font-variant-numeric: tabular-nums;
}
.lcard__ttl {
  display: block;
  font-family: var(--f-jp); font-weight: 400;
  font-size: .95rem; line-height: 1.75; color: var(--c-ink);
}

/* 視聴済み */
.lcard.is-done { border-color: var(--c-ink); }
.lcard.is-done .lcard__ttl { color: var(--c-mute); }
.lcard.is-done .lcard__meta::after { content: " ・受講済み"; color: var(--c-ink); }

/* ============================================================
   L3 レッスン画面
   ============================================================ */
.lp { display: grid; grid-template-columns: minmax(0, 1fr) 0; min-height: 100vh; }
.lp.is-open { grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 380px); }
@media (max-width: 980px) { .lp.is-open { grid-template-columns: minmax(0, 1fr) 0; } }

/* 上のバー */
.lbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem var(--pad-x);
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.lbar__ttl {
  font-family: var(--f-jp); font-size: .9rem; font-weight: 400; color: var(--c-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lbar__sp { margin-left: auto; }
.lbtn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--f-sans); font-size: .7rem; letter-spacing: .1em;
  color: var(--c-ink-2); background: none; border: 1px solid var(--c-line);
  padding: .42rem .8rem; cursor: pointer; text-decoration: none;
  transition: border-color .3s ease, color .3s ease;
}
.lbtn:hover { border-color: var(--c-ink); color: var(--c-ink); }
.lbtn.is-on { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

/* 本体 */
.lmain { padding: clamp(1.6rem, 4vw, 3rem) var(--pad-x) clamp(4rem, 8vw, 6rem); min-width: 0; }
.lmain__in { max-width: 1080px; margin-inline: auto; }

.lnav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem;
}
.lnav__i {
  font-family: var(--f-sans); font-size: var(--t-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-mute);
  font-variant-numeric: tabular-nums;
}
.lnav__btns { display: flex; gap: .5rem; }
.lnav__b {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--c-line); background: none; color: var(--c-ink);
  cursor: pointer; text-decoration: none; font-size: .85rem;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.lnav__b:hover { border-color: var(--c-ink); }
.lnav__b[aria-disabled="true"] { color: var(--c-line); pointer-events: none; }

.lttl {
  font-family: var(--f-jp); font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.5;
  color: var(--c-ink); margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
  text-wrap: balance;
}

/* 映像の枠。★再生機能は一切入れない（ボス指示 2026-09-05 を踏襲）。
   トップの旧ライトボックスと同じ「黒い長方形＋再生ボタン」の画をここへ引き継いだ。 */
.vid {
  position: relative; aspect-ratio: 16 / 9; background: #030303;
  display: grid; place-items: center; overflow: hidden;
}
.vid__btn {
  width: clamp(52px, 6vw, 74px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.94); display: grid; place-items: center;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.vid:hover .vid__btn { transform: scale(1.07); }
.vid__tri {
  width: 0; height: 0; margin-left: .18em;
  border-left: .85em solid #0A0A0A;
  border-top: .52em solid transparent;
  border-bottom: .52em solid transparent;
}
.lbody { margin-top: clamp(1.8rem, 4vw, 2.8rem); display: grid; gap: 1.6rem; }
.lbody h2 {
  font-family: var(--f-jp); font-weight: 400; font-size: var(--t-h3); color: var(--c-ink);
}
.lbody p {
  font-family: var(--f-jp); font-size: var(--t-body);
  line-height: var(--lh-body); color: var(--c-ink-2); max-width: 62em;
}

.lesson-next {
  display: grid; gap: .5rem; margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.3rem; border-top: 1px solid var(--c-line);
}
.lesson-next > span { font-size: .75rem; color: var(--c-mute); }
.lesson-next a { width: fit-content; color: var(--c-ink); text-decoration: underline; text-underline-offset: 4px; }

/* この講の資料 */
.att { display: grid; gap: .5rem; max-width: 620px; }
.att__i {
  display: flex; align-items: center; gap: .8rem;
  padding: .75rem .9rem; border: 1px solid var(--c-line);
  text-decoration: none; color: var(--c-ink);
  transition: border-color .3s ease;
}
.att__i:hover { border-color: var(--c-ink); }
.att__k {
  font-family: var(--f-sans); font-size: .58rem; letter-spacing: .1em;
  color: var(--c-mute); border: 1px solid var(--c-line); padding: .12rem .35rem;
}
.att__t { font-family: var(--f-jp); font-size: .84rem; }
.att__s {
  margin-left: auto; font-family: var(--f-sans); font-size: .66rem;
  color: var(--c-mute); font-variant-numeric: tabular-nums;
}

/* ============================================================
   L3 右ドロワー（Circle の Lessons パネル相当）
   これがあるので、次の講へはコース一覧に戻らず横移動できる。
   ============================================================ */
.drawer {
  position: sticky; top: 0; align-self: start; height: 100vh;
  border-left: 1px solid var(--c-line); background: var(--c-bg);
  overflow: hidden auto; overscroll-behavior: contain;
}
.lp:not(.is-open) .drawer { display: none; }
.drawer__hd {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.2rem; background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.drawer__ttl {
  font-family: var(--f-sans); font-size: var(--t-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-mute);
}
.drawer__x {
  background: none; border: 0; cursor: pointer; color: var(--c-mute);
  font-size: 1rem; line-height: 1; padding: .2rem;
}
.drawer__x:hover { color: var(--c-ink); }
.drawer__sec {
  padding: 1.1rem 1.2rem .35rem;
  font-family: var(--f-jp); font-size: .78rem; color: var(--c-ink);
}
.drow {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .6rem 1.2rem; text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.drow:hover { background: var(--c-bg-2); }
.drow.is-cur { background: var(--c-bg-2); border-left-color: var(--c-ink); }
.drow__n {
  font-family: var(--f-sans); font-size: .66rem; color: var(--c-mute);
  font-variant-numeric: tabular-nums; padding-top: .18em; flex: none; min-width: 1.6em;
}
.drow__t {
  font-family: var(--f-jp); font-size: .8rem; line-height: 1.55; color: var(--c-ink-2);
}
.drow.is-cur .drow__t { color: var(--c-ink); }
.drow.is-cur::after {
  content: '今ここ'; flex: none; margin-left: auto; padding-top: .1em;
  color: var(--c-ink); font-size: .6rem; font-weight: 600; white-space: nowrap;
}
.drow.is-done .drow__t { color: var(--c-mute); text-decoration: line-through; text-decoration-thickness: 1px; }

/* ============================================================
   資料倉庫
   ============================================================ */
.lib { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); }
.libc {
  display: grid; gap: .9rem; text-decoration: none; color: inherit;
  border: 1px solid var(--c-line); padding: clamp(1.2rem, 2.4vw, 1.8rem);
  transition: border-color .35s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.libc:hover { border-color: var(--c-ink); transform: translateY(-3px); }
.libc__hd { display: flex; align-items: center; gap: .6rem; }
.libc__k {
  font-family: var(--f-sans); font-size: .58rem; letter-spacing: .12em;
  color: var(--c-mute); border: 1px solid var(--c-line); padding: .14rem .4rem;
}
.libc__s {
  margin-left: auto; font-family: var(--f-sans); font-size: .66rem;
  color: var(--c-mute); font-variant-numeric: tabular-nums;
}
.libc__t { font-family: var(--f-jp); font-size: .98rem; line-height: 1.6; color: var(--c-ink); }
.libc__c { font-family: var(--f-sans); font-size: var(--t-label); letter-spacing: .1em; color: var(--c-mute); }

/* ============================================================
   狭い画面
   ============================================================ */
@media (max-width: 1180px) { .lgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .lib   { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib   { grid-template-columns: minmax(0, 1fr); }
  .lbar__ttl { font-size: .8rem; }
  .lbar__library { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lcard__vis img, .lcard, .libc, .prog__fill, .vid__btn, .crumb__ar { transition: none; }
}