/*
 * 神大家 AI講座 受講サイト用の追加スタイル
 * 画面部品は AI実践ラーニングの styles.css / lesson-content.css をそのまま使い、
 * ここには神大家版で増やした部品と、表紙の色だけを書く。
 */

/* 表紙の色（名前・色は神大家版に差し替え） */
.product-card__cover--kamiooya-basic { background: #fff2bd; color: var(--design-ink); }
.product-card__cover--kamiooya-pro { background: #1f3a5f; color: #fff; }
.product-card__cover--kamiooya-pro .product-card__cover-label,
.product-card__cover--kamiooya-pro small { color: #dbe6f5; }
.brand__mark { letter-spacing: 0; }

/* メニューの「準備中」 */
.nav-soon { margin-left: auto; padding: 1px 8px; font-size: .68rem; font-weight: 700; color: var(--design-muted); background: var(--design-surface-alt); border: 1px solid var(--design-soft-line); border-radius: 999px; }

/* 表の横スクロール */
.table-scroll { max-width: 100%; overflow-x: auto; }

/* コースホームのレッスン一覧 */
.course-lessons__progress { font-size: .85rem; font-weight: 700; color: var(--design-muted); }
.course-lessons__bar { width: 100%; height: 8px; margin: 4px 0 14px; }
.course-lessons { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.course-lesson__link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; color: var(--design-ink); text-decoration: none; background: var(--design-surface); border: 1px solid var(--design-soft-line); border-radius: var(--design-radius); }
.course-lesson__link:hover { border-color: var(--design-line); background: var(--design-surface-alt); }
.course-lesson__mark { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border: 1.5px solid var(--design-soft-line); border-radius: 50%; font-weight: 800; color: var(--design-action); }
.course-lesson.is-done .course-lesson__mark { background: var(--design-action-soft); border-color: var(--design-action); }
.course-lesson__copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.course-lesson__step { font-size: .74rem; font-weight: 700; color: var(--design-action); }
.course-lesson__copy strong { font-size: .98rem; }
.course-lesson__copy small { font-size: .8rem; line-height: 1.6; color: var(--design-muted); }
.course-lesson__state { flex: 0 0 auto; font-size: .76rem; font-weight: 700; color: var(--design-muted); }
.course-lesson.is-done .course-lesson__state { color: var(--design-action); }
.course-lesson.is-soon .course-lesson__link { background: var(--design-surface-alt); }

/* 上級コースでできること */
.feature-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.feature-table th, .feature-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--design-soft-line); }
.feature-table th { font-size: .78rem; color: var(--design-muted); }
.feature-table td:last-child { white-space: nowrap; font-size: .8rem; color: var(--design-action); font-weight: 700; }
.feature-note { margin-top: 12px; font-size: .82rem; line-height: 1.7; color: var(--design-muted); }

/* レッスン上部のキット欄 */
.lesson-kit-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; padding: 14px 18px; background: var(--design-surface-alt); border: 1px solid var(--design-soft-line); border-radius: var(--design-radius); }
.lesson-kit-bar .section-kicker { margin: 0 0 2px; }

/* レッスンから質問する */
.lesson-question { margin: 28px 0 10px; padding: 22px; background: var(--design-surface); border: 1px solid var(--design-soft-line); border-radius: var(--design-radius-large); }
.lesson-question h2 { margin: 2px 0 6px; font-size: 1.1rem; }
.lesson-question__lead { margin: 0 0 14px; font-size: .86rem; line-height: 1.7; color: var(--design-body); }
.lesson-question__categories { display: block; margin: 0 0 14px; padding: 0; border: 0; }
.lesson-question__categories legend { margin-bottom: 8px; font-size: .84rem; font-weight: 700; }
.lesson-question__categories > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lesson-question__category { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--design-soft-line); border-radius: var(--design-radius); cursor: pointer; }
.lesson-question__category:has(input:checked) { border-color: var(--design-action); background: var(--design-action-soft); }
.lesson-question__category span { display: grid; gap: 2px; }
.lesson-question__category small { font-size: .74rem; color: var(--design-muted); }
.lesson-question label[for="lessonQuestionBody"] { display: block; margin-bottom: 6px; font-size: .84rem; font-weight: 700; }
.lesson-question textarea, .admin-reply textarea { width: 100%; padding: 10px 12px; font: inherit; font-size: .9rem; line-height: 1.7; border: 1px solid var(--design-soft-line); border-radius: var(--design-radius); }
.lesson-question__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.member-access__message.is-error { color: #b42318; }

/* 質問と回答の1件 */
.qa-item { margin: 0 0 14px; padding: 16px 18px; background: var(--design-surface); border: 1px solid var(--design-soft-line); border-radius: var(--design-radius); }
.qa-item .qa-inbox__origin { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; font-size: .78rem; color: var(--design-muted); }
.qa-item__category { padding: 1px 8px; font-weight: 700; color: var(--design-action); background: var(--design-action-soft); border-radius: 999px; }
.qa-item__label { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: .78rem; font-weight: 700; color: var(--design-muted); }
.qa-item__label small { font-weight: 400; }
.qa-item__text { margin: 0; white-space: pre-wrap; font-size: .9rem; line-height: 1.8; color: var(--design-body); }
.qa-item__reply { margin-top: 12px; padding: 12px 14px; background: var(--design-action-soft); border-radius: var(--design-radius); }
.qa-item__waiting { margin: 10px 0 0; font-size: .82rem; color: var(--design-muted); }

/* キットを画面で読む */
.kit-dialog { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--design-line); border-radius: var(--design-radius-large); }
.kit-dialog::backdrop { background: rgb(23 32 51 / 45%); }
.kit-dialog__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--design-soft-line); }
.kit-dialog__head h2 { margin: 0; font-size: 1.05rem; }
.kit-dialog__actions { display: flex; gap: 8px; }
.kit-dialog__body { padding: 8px 24px 24px; }

/* 管理画面 */
.admin-main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 60px; }
.admin-tabs { display: flex; gap: 8px; margin: 0 0 16px; }
.admin-tabs .is-active { background: var(--design-action-soft); border-color: var(--design-action); }
.admin-add { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; padding: 14px; background: var(--design-surface-alt); border-radius: var(--design-radius); }
.admin-add label { display: grid; gap: 4px; font-size: .8rem; }
.admin-add input { padding: 8px 10px; font: inherit; border: 1px solid var(--design-soft-line); border-radius: 8px; }
.admin-add .member-access__message { flex-basis: 100%; margin: 0; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.admin-table th, .admin-table td { padding: 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--design-soft-line); }
.admin-table th { font-size: .76rem; color: var(--design-muted); }
.admin-table small { color: var(--design-muted); }
.admin-table select { padding: 6px 8px; font: inherit; border: 1px solid var(--design-soft-line); border-radius: 8px; }
.admin-state { display: inline-block; margin-right: 6px; padding: 1px 8px; font-size: .76rem; font-weight: 700; color: var(--design-muted); background: var(--design-surface-alt); border-radius: 999px; }
.admin-state.is-on { color: var(--design-action); background: var(--design-action-soft); }
.admin-reply { display: grid; gap: 6px; margin-top: 12px; }
.admin-reply label { font-size: .8rem; font-weight: 700; }
.admin-reply .primary-button { justify-self: start; }

@media (max-width: 640px) {
  .lesson-question__categories > div { grid-template-columns: minmax(0, 1fr); }
  .course-lesson__state { display: none; }
}

/* 見学用の帯（見学用でログインした時だけ、全画面の上に出す） */
.demo-banner { position: relative; z-index: 2200; padding: 6px 16px; font-size: .8rem; font-weight: 700; line-height: 1.5; text-align: center; color: #fff; background: var(--design-action); }

/* ログイン画面: 見学用パスワード・準備中の表示 */
.login-card__preparing { margin: 8px 0 4px; padding: 12px 14px; font-size: .9rem; font-weight: 700; color: var(--design-body); background: var(--design-surface-alt); border-radius: var(--design-radius); }
.login-card__demo { margin-top: 20px; padding: 16px; background: var(--design-surface-alt); border-radius: 12px; }
.login-card__demo h2 { margin: 0 0 10px; font-size: .95rem; }
.login-card__demo label { display: block; margin-bottom: 6px; font-size: .8rem; font-weight: 700; }
.login-card__demo input { flex: 1; min-width: 0; padding: 10px 12px; font: inherit; border: 1px solid var(--design-soft-line); border-radius: 8px; }