:root {
  --bg: #f6f8fb;
  --panel: #ffffff;
  --text: #182033;
  --muted: #667085;
  --line: #e4e7ec;
  --border: var(--line);
  --primary: #d1131f;
  --primary-dark: #a90f19;
  --primary-soft: #fff1f2;
  --danger: var(--primary);
  --button-red: var(--primary);
  --button-red-hover: var(--primary-dark);
  --button-red-soft: var(--primary-soft);
  --button-red-border: #fecdd3;
  --button-red-focus: rgba(209, 19, 31, .18);
  --ok: #067647;
  --warning: #b54708;
  --nav: #111827;
  --radius: 18px;
  --shadow: 0 16px 40px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; font-weight: 700; }
button, input, select, textarea { font: inherit; }
button {
  border: 0;
  background: var(--primary);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  min-height: 42px;
}
button:hover { background: var(--primary-dark); }
button.secondary,
button.danger { background: var(--button-red-soft); color: var(--button-red); }
button.secondary:hover,
button.secondary:focus-visible,
button.danger:hover,
button.danger:focus-visible { background: var(--button-red-soft); color: var(--button-red-hover); }
button.ghost { background: transparent; color: var(--primary); padding: 6px 8px; }
button:disabled { opacity: .55; cursor: not-allowed; }
button.wide { width: 100%; margin-top: 14px; }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  color: var(--text);
  min-height: 42px;
}
textarea { min-height: 110px; resize: vertical; }
label { display: block; font-size: 13px; font-weight: 700; color: #344054; margin: 12px 0 6px; }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 24px 24px; }
.login-card { width: min(460px, 100%); background: var(--panel); padding: 34px; border-radius: 26px; box-shadow: var(--shadow); }
.brand { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.brand-login { align-items: flex-start; }
.brand-logo-img { width: 130px; height: auto; display: block; }
.brand h1 { font-size: 22px; margin: 0; }
.side-brand img { width: 152px; max-width: 100%; height: auto; display: block; margin-bottom: 14px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.05)); }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--danger); background: #fef3f2; border: 1px solid #fecdca; padding: 10px 12px; border-radius: 12px; margin: 12px 0; }
.success { color: var(--ok); background: #ecfdf3; border: 1px solid #abefc6; padding: 10px 12px; border-radius: 12px; margin: 12px 0; }
.warning { color: var(--warning); background: #fffaeb; border: 1px solid #fedf89; padding: 10px 12px; border-radius: 12px; margin: 12px 0; }

.app { display: grid; grid-template-columns: 270px 1fr; min-height: 100vh; }
.sidebar { background: var(--nav); color: #fff; padding: 22px;   height: 100vh;  }
.side-user { color: #cbd5e1; font-size: 13px; margin-bottom: 14px; word-break: break-word; line-height: 1.55; }
.nav button { display: block; width: 100%;  background: transparent; color: #f3f4f6; margin: 4px 0; padding: 11px 12px; border-radius: 12px; }
.nav button.active, .nav button:hover { background: rgba(255,255,255,.12); color: #fff; }
.push-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 10px; margin: 10px 0 14px; }
.push-card button { background: #fff; color: var(--primary); width:100%; margin-top: 8px; }
.main { padding: 28px; max-width: 1220px; width: 100%; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.topbar h2 { margin: 0; font-size: 26px; }

.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: 0 8px 20px rgba(16, 24, 40, .04); }
.card h3 { margin: 0 0 10px; font-size: 19px; }
.card h4 { margin: 12px 0 6px; }
.pill { display: inline-block; padding: 4px 9px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 700; margin: 2px 4px 2px 0; }
.pill.gray { background:#f2f4f7; color:#475467; }
.pill.ok { background:#ecfdf3; color:#067647; }
.pill.warn { background:#fffaeb; color:#b54708; }
.contract-management-overview {
  width: 100%;
}
.contract-summary-list {
  margin: 8px 0 0;
  border-top: 1px solid var(--line);
}
.contract-summary-row {
  display: grid;
  grid-template-columns: minmax(148px, 190px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin: 0;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.contract-summary-row dt,
.contract-summary-row dd {
  margin: 0;
}
.contract-summary-row dt {
  color: #344054;
  font-weight: 700;
}
.contract-summary-row dd {
  min-width: 0;
  overflow-wrap: anywhere;
}
.contract-status-value {
  font-weight: 400;
}
.contract-stop-deadline-note {
  margin: 10px 4px 0;
}
.contract-payment-history td {
  vertical-align: middle;
}
.contract-payment-history button {
  min-height: 36px;
  padding: 7px 12px;
}

#billingStopModal.billing-stop-modal-backdrop {
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
}
#billingStopModal .billing-stop-dialog {
  width: min(640px, 100%) !important;
  max-width: 640px !important;
  max-height: calc(100dvh - 48px) !important;
  margin: 0 !important;
  overflow-y: auto !important;
}
.billing-stop-summary {
  margin: 14px 0 18px;
  border-top: 1px solid var(--line);
}
.billing-stop-summary-row {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.billing-stop-summary-row dt,
.billing-stop-summary-row dd {
  margin: 0;
}
.billing-stop-summary-row dt {
  color: #344054;
  font-weight: 700;
}
.billing-stop-summary-row dd {
  min-width: 0;
  overflow-wrap: anywhere;
}
.billing-stop-explanation {
  margin: 16px 4px 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
  color: #344054;
  font-size: 13px;
  line-height: 1.7;
}
.billing-stop-explanation p {
  margin: 0 0 8px;
}
.billing-stop-explanation p:last-child {
  margin-bottom: 0;
}
.billing-stop-confirmation {
  width: fit-content;
  margin: 14px 4px;
  cursor: pointer;
}
.billing-stop-confirmation input {
  flex: 0 0 auto;
}
#receiptModal.receipt-modal-backdrop {
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
}
#receiptModal .receipt-dialog {
  width: min(620px, 100%) !important;
  max-width: 620px !important;
  max-height: calc(100dvh - 48px) !important;
  margin: 0 !important;
  overflow-y: auto !important;
}
.receipt-dialog > .muted:first-of-type {
  margin-top: 0;
}
.receipt-dialog input:disabled {
  color: var(--text);
  background: #f8fafc;
  opacity: 1;
  -webkit-text-fill-color: var(--text);
}
.receipt-lock-notice {
  margin-top: 14px;
  line-height: 1.65;
}
.receipt-dialog-actions {
  margin-top: 16px;
}
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { border-bottom: 1px solid var(--line); text-align: left; padding: 10px; vertical-align: top; font-size: 14px; }
th { color: #475467; background: #f9fafb; }
.article { line-height: 1.75; background: #fbfcff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 12px 0; }
.checkbox-row { display: flex; align-items: flex-start; gap: 9px; margin: 8px 0; }
.checkbox-row input { width: auto; margin-top: 4px; }
.chat-box { border: 1px solid var(--line); border-radius: 16px; background: #fbfcff; padding: 14px; max-height: 520px; overflow-y: auto; }
.msg { max-width: 78%; padding: 10px 12px; border-radius: 14px; margin: 8px 0; background: #fff; border: 1px solid var(--line); }
.msg.mine { margin-left: auto; background: var(--primary-soft); border-color: #fecdd3; }
.msg-meta { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.msg-body { white-space: pre-wrap; }

/* Mobile: offset message bubbles like PC (own messages slightly right, partner messages slightly left) */
@media (max-width: 960px) {
  .chat-box .msg {
    max-width: calc(100% - 40px);
    margin-right: 24px;
  }

  .chat-box .msg.mine {
    margin-left: 24px;
    margin-right: 0;
  }
}

.file-list { margin-top: 6px; font-size: 13px; }
.video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; background: #111827; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > * { flex: 0 0 auto; }
.grow { flex: 1 1 240px; }
.hidden { display: none !important; }
.loading { opacity: .68; pointer-events: none; }
.divider { height: 1px; background: rgba(255,255,255,.14); margin: 16px 0; }
.note-editor { min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.list { display:grid; gap:12px; }
.empty { padding: 18px; color: var(--muted); background:#fff; border:1px dashed var(--line); border-radius:16px; }
.auth-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 16px 0; background: #f2f4f7; padding: 6px; border-radius: 14px; }
.auth-tabs button { background: transparent; color: #475467; padding: 9px 6px; border-radius: 10px; font-size: 13px; min-height: 40px; }
.auth-tabs button.active { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.google-btn { width: 100%; margin-top: 12px; background: #fff; color: #344054; border: 1px solid var(--line); }
.google-btn:hover { background: #f9fafb; }
.mobile-hint { display: none; }
.selector-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.selector-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.task-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.task-card, .topic-card { cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.task-card:hover, .topic-card:hover { transform: translateY(-1px); border-color: #fecdd3; }
.auth-panel.hidden { display: none; }
.install-area { margin: 12px 0; }

/*
 * ブラウザではインストール案内を常時表示します。
 * すでにstandalone PWAとして起動している場合だけ非表示にします。
 */
html.smaei-standalone-app #installArea,
body.smaei-standalone-app #installArea {
  display: none !important;
}

@media (display-mode: standalone) {
  #installArea {
    display: none !important;
  }
}
.month-access { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }

@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 20; height: auto; padding: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .side-brand img { width: 128px; margin-bottom: 8px; }
  .side-user { margin-bottom: 10px; }
  .nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 34vh; overflow-y: auto; }
  .nav button { margin: 0; padding: 10px; font-size: 13px; }
  .main { padding: 16px; }
  .topbar { margin-bottom: 14px; }
  .topbar h2 { font-size: 22px; }
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
  .selector-grid, .selector-grid.compact { grid-template-columns: 1fr 1fr; }
  .msg { max-width: 100%; }
  .mobile-hint { display: block; }
  .table-wrap table { min-width: 760px; }
}

@media (max-width: 560px) {
  body { background: #fff; }
  .login-wrap { padding: 14px; align-items: start; }
  .login-card { padding: 20px; box-shadow: none; border: 1px solid var(--line); border-radius: 20px; margin-top: 12px; }
  .brand-logo-img { width: 112px; }
  .brand h1 { font-size: 20px; }
  .auth-tabs { grid-template-columns: 1fr; }
  .nav { grid-template-columns: 1fr; }
  .selector-grid, .selector-grid.compact { grid-template-columns: 1fr; }
  .row > * { flex: 1 1 100%; }
  .row button, .actions button { width: 100%; }
  .card { padding: 15px; border-radius: 15px; }
  .main { padding: 12px; }
  .contract-summary-row {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 0;
    font-size: 14px;
  }
  #billingStopModal.billing-stop-modal-backdrop {
    padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)) !important;
  }
  #billingStopModal .billing-stop-dialog {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
  .billing-stop-summary-row {
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 0;
    font-size: 14px;
  }
  #receiptModal.receipt-modal-backdrop {
    padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)) !important;
  }
  #receiptModal .receipt-dialog {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}

/* ===== Schedule / account additions ===== */
.teacher-profile-mini {
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  margin-top: 10px;
}
.teacher-photo {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 50%;
  margin: 8px 0;
  border: 1px solid var(--line);
}
.lesson-preview {
  
  
  gap: 6px;
  margin-top: 10px;
}
.compact-card {
  box-shadow: none;
  padding: 14px;
}

@media (max-width: 860px) {
  .app {
    display: block;
    min-height: 100vh;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: auto;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }

  .side-brand img {
    width: 104px;
    margin: 0;
  }

  .side-user {
    display: none;
  }

  .divider {
    display: none;
  }

  .sidebar > button.danger {
    grid-column: 3;
    grid-row: 1;
    width: auto !important;
    padding: 7px 10px;
    font-size: 12px;
    border-radius: 10px;
    min-height: auto;
    white-space: nowrap;
  }

  .nav {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    padding: 2px 0 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav button {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    padding: 7px 10px;
    font-size: 12px;
    border-radius: 999px;
    white-space: nowrap;
    min-height: auto;
  }

  .main {
    padding: 12px;
  }

  .topbar {
    margin-bottom: 10px;
  }

  .topbar h2 {
    font-size: 20px;
  }
}

.contract-external-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--primary);
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.contract-external-link:hover {
  border-color: var(--primary-dark);
  background: var(--primary-dark);
  color: #fff;
}

.contract-fixed-privacy-notice {
  margin-top: 14px;
  line-height: 1.7;
}

.contract-fixed-privacy-notice a {
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .contract-external-link {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .sidebar {
    padding: 7px 8px;
  }

  .nav button {
    font-size: 11px;
    padding: 6px 9px;
  }

  .sidebar > button.danger {
    font-size: 11px;
    padding: 6px 9px;
  }

  .main {
    padding: 10px;
  }
}

/* ===== Teacher schedule calendar editor ===== */
.schedule-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.schedule-tabs button.active {
  background: var(--primary, #d90d1a);
  color: #fff;
}

.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted, #637083);
}

.legend {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 5px;
  border: 1px solid #d6dbe5;
  vertical-align: middle;
  margin-left: 6px;
}

.legend.open { background: #e7f7ed; }
.legend.closed { background: #fff0f0; }
.legend.override { background: #fff7d7; }

.schedule-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.schedule-grid {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 840px;
  width: 100%;
  font-size: 12px;
}

.schedule-grid th,
.schedule-grid td {
  border-right: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
  padding: 4px;
  text-align: center;
  white-space: nowrap;
}

.schedule-grid thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f8fafc;
  color: #334155;
  font-weight: 800;
}

.schedule-grid .time-head,
.schedule-grid .time-cell {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #f8fafc;
  color: #334155;
  width: 72px;
  min-width: 72px;
}

.schedule-grid .time-cell {
  font-weight: 800;
}

.slot-btn {
  width: 68px;
  min-height: 30px;
  border: 1px solid #d6dbe5;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  padding: 5px 8px;
}

.slot-btn.open {
  background: #e7f7ed;
  color: #137333;
  border-color: #a8e0bb;
}

.slot-btn.closed {
  background: #fff0f0;
  color: #b42318;
  border-color: #ffc5c5;
}

.slot-btn.override {
  box-shadow: inset 0 0 0 2px #f5c542;
}

.slot-btn.blocked {
  text-decoration: line-through;
}

.sixty-grid .slot-btn.blocked {
  text-decoration: none;
}

.sixty-wrap .schedule-grid {
  min-width: 4300px;
}

.sixty-grid th:not(.time-head),
.sixty-grid td {
  min-width: 70px;
}

.sixty-grid th small {
  display: block;
  color: #64748b;
  font-weight: 700;
}

.schedule-apply-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed #d6dbe5;
  border-radius: 16px;
  background: #fbfdff;
}

.actions.wrap,
.row.wrap {
  flex-wrap: wrap;
}

.teacher-profile-mini {
  margin: 12px 0;
}

.teacher-photo {
  max-width: 120px;
  border-radius: 16px;
  margin-top: 8px;
}

@media (max-width: 860px) {
  .schedule-grid {
    font-size: 11px;
  }

  .slot-btn {
    width: 62px;
    min-height: 28px;
    font-size: 10px;
    padding: 4px 6px;
  }

  .sixty-wrap .schedule-grid {
    min-width: 3900px;
  }
}

.teacher-photo-preview {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, .12);
  margin: 8px 0 12px;
}

.compact-list {
  display: grid;
  gap: 8px;
}

.dash-item {
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 12px;
  background: rgba(248, 250, 252, .8);
  font-size: 14px;
}

.lesson-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}

@media (max-width: 720px) {
  .teacher-photo-preview {
    width: 96px;
    height: 96px;
  }
}

/* ===== 2026-07 comprehensive update ===== */
.app { min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; }
.nav { display: flex; flex-direction: column; gap: 6px; }
.nav button { text-align: left; }
.nav-spacer { flex: 1; min-height: 20px; }
.topbar { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.menu-toggle { display: none; width: auto; padding: 8px 12px; margin-right: 8px; }
.notice-status { border: 1px solid #d1131f; background: #fff4f5; color: #a0000b; border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.subtle-card { background: #fafafa; border-style: dashed; }
.link-button { background: transparent; color: #666; border: none; text-decoration: underline; padding: 4px 0; width: auto; }
.locked-card { border-color: #d1131f; background: #fff8f8; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 12px; margin: 8px 0 14px; }
.teacher-profile-mini .pill { margin: 2px; }
.rich-editor { min-height: 220px; border: 1px solid #d8dbe2; border-radius: 12px; padding: 12px; background: #fff; line-height: 1.7; }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.editor-toolbar button, .tiny { width: auto; font-size: 11px; padding: 4px 6px; margin: 2px; }
.schedule-table .slot { min-width: 96px; font-size: 12px;  }
.schedule-table .slot.open { background: #e9f8ee; }
.schedule-table .slot.closed { background: #f4f4f4; color: #888; }
.schedule-table .slot.pending { background: #fff6d7; }
.schedule-table .slot.reserved { background: #ffe3e6; }
.schedule-table .slot button { width: 100%; background: transparent; color: inherit; border: 0; padding: 6px; }
.video-recorder { margin: 12px 0; }
.dash-item { border: 1px solid #e6e7eb; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background:#fff; }

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .app { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 78vw; max-width: 320px; transform: translateX(-105%); transition: transform .2s ease; z-index: 50; box-shadow: 0 18px 45px rgba(0,0,0,.18); background: #fff; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0 !important; width: 100%; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .topbar { display: flex; align-items: center; }
}

/* ===== 2026-07 targeted mobile/menu fixes ===== */
.topbar-logo {
  display: none;
  width: 92px;
  height: auto;
  margin-right: 10px;
  flex: 0 0 auto;
}
.topbar-title {
  min-width: 0;
}
.menu-close {
  display: none;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .topbar {
    min-height: 56px;
    padding: 8px 10px;
    gap: 6px;
    border-bottom: 1px solid var(--line);
  }

  .topbar-logo {
    display: block;
  }

  .menu-toggle {
    background: var(--primary);
    color: #fff;
    width: auto !important;
    min-width: 42px;
    flex: 0 0 auto;
  }

  .sidebar {
    width: 52vw;
    min-width: 210px;
    max-width: 260px;
    padding: 16px 12px;
    background: var(--nav);
    color: #fff;
  }

  .sidebar .side-brand {
    padding-right: 36px;
    margin-bottom: 10px;
  }

  .sidebar .side-brand img {
    display: block;
    width: 118px;
    height: auto;
  }

  .menu-close {
    display: inline-flex;
    position: absolute;
    top: 10px;
    right: 10px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    border-radius: 999px;
    padding: 0;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 22px;
    line-height: 1;
  }

  .menu-close:hover {
    background: rgba(255, 255, 255, .22);
  }

  .sidebar .nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100dvh - 190px);
    padding-right: 2px;
  }

  .sidebar .nav button {
    width: 100%;
    flex: 0 0 auto;
    margin: 0;
    padding: 9px 10px;
    border-radius: 10px;
    background: transparent;
    color: #f8fafc;
    font-size: 13px;
    white-space: normal;
    line-height: 1.35;
  }

  .sidebar .nav button.active,
  .sidebar .nav button:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
  }

  .sidebar .nav button.danger,
  .sidebar button.danger {
    background: #fff1f3;
    color: var(--danger);
  }

  .push-card {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
    color: #fff;
  }

  .push-card .muted,
  .push-card .small {
    color: #d1d5db;
  }
}

/* ===== 学習計画：項目別評価・15分カレンダー ===== */
.learning-plan-page .learning-plan-skill-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.learning-plan-page .learning-plan-skill-card {
  padding: 17px;
}

.learning-plan-page .learning-plan-skill-label > span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.learning-plan-metric-list,
.learning-plan-metric-view-list {
  display: grid;
  gap: 7px;
  margin-top: 15px;
}

.learning-plan-metric-row,
.learning-plan-metric-view-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 8px 6px 11px;
  border: 1px solid #e7e9ee;
  border-radius: 10px;
  background: #fff;
}

.learning-plan-metric-row > span,
.learning-plan-metric-view-list > div > span {
  min-width: 0;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.learning-plan-metric-row > div {
  display: flex;
  align-items: center;
  gap: 4px;
}

.learning-plan-metric-row input[type="number"] {
  width: 67px;
  min-height: 32px;
  padding: 5px 7px;
  border-radius: 8px;
  text-align: right;
  font-weight: 800;
}

.learning-plan-metric-row input[type="text"] {
  min-width: 0;
  min-height: 32px;
  padding: 5px 7px;
  border-radius: 8px;
}

.learning-plan-metric-row small {
  color: var(--muted);
  font-size: 10px;
}

.learning-plan-metric-row button {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 8px;
}

.learning-plan-metric-view-list > div strong {
  color: var(--primary);
  font-size: 13px;
}

.learning-plan-add-metric {
  width: 100%;
  min-height: 36px;
  margin-top: 9px;
  padding: 7px 10px;
  font-size: 12px;
}

.learning-plan-calendar-guide {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border-radius: 11px;
  background: #f8fafc;
}

.learning-plan-calendar-guide > span {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2f6;
  color: #344054;
  font-size: 10px;
  font-weight: 800;
}

.learning-plan-calendar-guide p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.learning-plan-copy-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  padding: 13px 14px;
  border: 1px solid #d8dee8;
  border-radius: 12px;
  background: #fff;
}

.learning-plan-copy-panel > div:first-child {
  display: grid;
  gap: 3px;
}

.learning-plan-copy-panel > div:first-child strong {
  font-size: 13px;
}

.learning-plan-copy-panel > div:first-child span {
  color: var(--muted);
  font-size: 10px;
}

.learning-plan-copy-days {
  display: flex;
  align-items: center;
  gap: 5px;
}

.learning-plan-copy-days label {
  display: block;
  margin: 0;
}

.learning-plan-copy-days input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.learning-plan-copy-days span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fafc;
  color: #475467;
  cursor: pointer;
  font-size: 11px;
}

.learning-plan-copy-days input:checked + span {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.learning-plan-copy-panel button {
  min-height: 36px;
  padding: 7px 11px;
  white-space: nowrap;
}

.learning-plan-calendar-scroll {
  position: relative;
  max-height: 680px;
  overflow: auto;
  border: 1px solid #d8dee8;
  border-radius: 13px;
  background: #fff;
  overscroll-behavior: contain;
}

.learning-plan-calendar-grid {
  display: grid;
  grid-template-columns: 62px repeat(8, minmax(116px, 1fr));
  grid-template-rows: 45px repeat(144, 24px);
  grid-auto-rows: 24px;
  min-width: 1050px;
  position: relative;
  user-select: none;
  touch-action: pan-x pan-y;
}

.learning-plan-calendar-corner,
.learning-plan-calendar-header {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  border-right: 1px solid #d8dee8;
  border-bottom: 1px solid #cfd6e2;
  background: #f4f6f9;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.learning-plan-calendar-corner {
  left: 0;
  z-index: 10;
}

.learning-plan-calendar-header.is-base {
  background: #fff4f4;
  color: var(--primary);
}

.learning-plan-calendar-header span,
.learning-plan-calendar-header small {
  display: block;
  line-height: 1.2;
}

.learning-plan-calendar-header small {
  margin-top: 2px;
  color: #667085;
  font-size: 9px;
  font-weight: 700;
}

.learning-plan-calendar-time {
  position: sticky;
  left: 0;
  z-index: 5;
  padding: 3px 7px 0 0;
  border-right: 1px solid #cfd6e2;
  border-bottom: 1px solid #edf0f4;
  background: #fbfcfe;
  color: #667085;
  font-size: 10px;
  text-align: right;
}

.learning-plan-calendar-time.is-hour {
  color: #344054;
  font-weight: 800;
}

.learning-plan-calendar-cell {
  z-index: 1;
  border-right: 1px solid #edf0f4;
  border-bottom: 1px dashed #edf0f4;
  background: #fff;
  cursor: crosshair;
}

.learning-plan-calendar-cell.is-hour {
  border-top: 1px solid #d8dee8;
}

.learning-plan-calendar-cell.is-base {
  background: #fffbfb;
}

.learning-plan-calendar-cell:hover,
.learning-plan-calendar-cell.is-selecting {
  background: #ffe4e6;
}

.learning-plan-calendar-block {
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 2px 3px;
  padding: 5px 6px;
  overflow: hidden;
  border: 1px solid #f598a0;
  border-radius: 7px;
  background: #fff1f2;
  color: #9f111b;
  box-shadow: 0 2px 6px rgba(209, 19, 31, .08);
  cursor: pointer;
  text-align: left;
}

.learning-plan-calendar-block:hover {
  background: #ffe4e6;
  color: #7f0d15;
}

.learning-plan-calendar-block.is-base {
  border-color: #aeb8c6;
  background: #eef2f6;
  color: #344054;
}

.learning-plan-calendar-block:disabled {
  opacity: 1;
  cursor: default;
}

.learning-plan-calendar-block strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-plan-calendar-block span {
  font-size: 9px;
  line-height: 1.15;
  white-space: nowrap;
}

.learning-plan-calendar-scroll.is-readonly .learning-plan-calendar-grid {
  grid-template-columns: 62px repeat(7, minmax(126px, 1fr));
  min-width: 960px;
}

.learning-plan-block-editor {
  margin-top: 12px;
  padding: 15px;
  border: 1px solid #fda4af;
  border-radius: 13px;
  background: #fff8f8;
}

.learning-plan-block-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.learning-plan-block-editor-head > div {
  display: grid;
  gap: 2px;
}

.learning-plan-block-editor-head span {
  font-weight: 800;
}

.learning-plan-block-editor-head strong {
  color: var(--primary);
  font-size: 12px;
}

.learning-plan-block-editor-head button {
  min-height: 30px;
}

.learning-plan-block-editor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px)) minmax(260px, 1fr);
  gap: 10px;
}

.learning-plan-block-editor-fields label {
  margin: 0;
}

.learning-plan-block-editor-fields label > span {
  display: block;
  margin-bottom: 5px;
}

.learning-plan-day-totals {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.learning-plan-day-totals > div {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  text-align: center;
}

.learning-plan-day-totals span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.learning-plan-day-totals strong {
  color: #344054;
  font-size: 12px;
}

@media (max-width: 920px) {
  .learning-plan-copy-panel {
    grid-template-columns: 1fr;
  }

  .learning-plan-copy-days {
    flex-wrap: wrap;
  }

  .learning-plan-copy-panel button {
    width: 100%;
  }

  .learning-plan-block-editor-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learning-plan-block-editor-fields .wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .learning-plan-page .learning-plan-skill-grid {
    grid-template-columns: 1fr;
  }

  .learning-plan-calendar-scroll {
    max-height: 560px;
  }

  .learning-plan-calendar-guide {
    flex-direction: column;
  }

  .learning-plan-day-totals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .learning-plan-block-editor-fields {
    grid-template-columns: 1fr;
  }

  .learning-plan-block-editor-fields .wide {
    grid-column: auto;
  }
}

/* Day1〜Day6 課題学習の実績 */
.learning-plan-study-activity {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border, #dfe4ec);
}

.learning-plan-study-activity-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}

.learning-plan-study-activity-head > div > span {
  display: block;
  margin-bottom: 4px;
  color: var(--primary, #d6111b);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.learning-plan-study-activity-head h4 {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

.learning-plan-study-activity-head p {
  max-width: 440px;
  margin: 0;
  color: var(--muted, #637083);
  font-size: 12px;
  line-height: 1.6;
  text-align: right;
}

.learning-plan-study-activity-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.learning-plan-study-activity-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  padding: 12px 15px;
  border: 1px solid #e4e8ef;
  border-radius: 12px;
  background: #f8f9fb;
}

.learning-plan-study-activity-summary span {
  color: var(--muted, #637083);
  font-size: 12px;
}

.learning-plan-study-activity-summary strong {
  color: #172135;
  font-size: 17px;
  white-space: nowrap;
}

.learning-plan-study-activity-list {
  overflow: hidden;
  border: 1px solid #e1e6ed;
  border-radius: 12px;
  background: #fff;
}

.learning-plan-study-activity-row {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr) 105px;
  align-items: center;
  gap: 16px;
  padding: 13px 15px;
}

.learning-plan-study-activity-row + .learning-plan-study-activity-row {
  border-top: 1px solid #e8ebf0;
}

.learning-plan-study-activity-date,
.learning-plan-study-activity-task,
.learning-plan-study-activity-duration {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.learning-plan-study-activity-date strong,
.learning-plan-study-activity-task > strong,
.learning-plan-study-activity-duration strong {
  color: #172135;
  font-size: 13px;
  line-height: 1.45;
}

.learning-plan-study-activity-date span,
.learning-plan-study-activity-duration span {
  color: var(--muted, #637083);
  font-size: 11px;
}

.learning-plan-study-activity-task > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.learning-plan-study-activity-task .pill {
  padding: 3px 7px;
  font-size: 10px;
}

.learning-plan-study-activity-duration {
  align-items: flex-end;
  text-align: right;
}

.learning-plan-study-activity-duration strong {
  color: var(--primary, #d6111b);
  font-size: 15px;
}

.learning-plan-study-activity-empty {
  padding: 20px;
  border: 1px dashed #d5dbe4;
  border-radius: 12px;
  background: #fafbfc;
  color: var(--muted, #637083);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

.learning-plan-activity-toolbar {
  display: grid;
  gap: 10px;
  margin: 14px 0 12px;
  padding: 12px 14px;
  border: 1px solid #dfe4ec;
  border-radius: 12px;
  background: #f8fafc;
}

.learning-plan-activity-toolbar-main,
.learning-plan-activity-week-controls,
.learning-plan-activity-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.learning-plan-activity-toolbar-main {
  justify-content: space-between;
}

.learning-plan-activity-toolbar-main button {
  width: auto;
  min-height: 36px;
  padding: 7px 13px;
}

.learning-plan-activity-toolbar-main button.active {
  border-color: var(--primary, #d6111b);
  background: var(--primary, #d6111b);
  color: #fff;
}

.learning-plan-activity-toolbar-main p {
  margin: 0;
  color: var(--muted, #637083);
  font-size: 11px;
  line-height: 1.55;
}

.learning-plan-activity-week-controls {
  justify-content: center;
  padding-top: 9px;
  border-top: 1px solid #e2e6ec;
}

.learning-plan-activity-week-controls button {
  width: auto;
  min-width: 34px;
  min-height: 32px;
  padding: 5px 9px;
}

.learning-plan-activity-week-controls strong {
  min-width: 190px;
  color: #172135;
  font-size: 13px;
  text-align: center;
}

.learning-plan-activity-legend {
  justify-content: center;
}

.learning-plan-activity-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #e1e6ed;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font-size: 10px;
}

.learning-plan-activity-legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: #6b8afd;
}

.learning-plan-activity-legend b {
  margin-left: 2px;
  color: #172135;
  font-size: 10px;
}

.learning-plan-activity-legend .is-listening i {
  background: #18a57a;
}

.learning-plan-activity-legend .is-speakingWriting i {
  background: #a85ad4;
}

.learning-plan-calendar-grid.has-activity-overlay .learning-plan-calendar-cell {
  background-image: linear-gradient(90deg, transparent 33.1%, rgba(102, 112, 133, .08) 33.1%, rgba(102, 112, 133, .08) 33.8%, transparent 33.8%, transparent 66.2%, rgba(102, 112, 133, .08) 66.2%, rgba(102, 112, 133, .08) 66.9%, transparent 66.9%);
}

.learning-plan-calendar-activity {
  position: relative;
  left: var(--activity-left, 0%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(33.333% - 3px);
  min-width: 0;
  min-height: 0;
  margin: 1px;
  padding: 1px 2px;
  overflow: hidden;
  border: 1px solid #4769e8;
  border-radius: 5px;
  background: rgba(107, 138, 253, .9);
  color: #fff;
  box-shadow: 0 2px 5px rgba(39, 65, 160, .2);
  cursor: help;
  pointer-events: auto;
}

.learning-plan-calendar-activity.is-listening {
  border-color: #12805f;
  background: rgba(24, 165, 122, .9);
}

.learning-plan-calendar-activity.is-speakingWriting {
  border-color: #803baa;
  background: rgba(168, 90, 212, .9);
}

.learning-plan-calendar-activity strong,
.learning-plan-calendar-activity span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 8px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-plan-calendar-activity span {
  font-size: 7px;
}

@media (max-width: 700px) {
  .learning-plan-activity-toolbar-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .learning-plan-activity-week-controls strong {
    min-width: 150px;
    font-size: 11px;
  }
}

@media (max-width: 700px) {
  .learning-plan-study-activity-head {
    display: block;
  }

  .learning-plan-study-activity-head p {
    margin-top: 7px;
    text-align: left;
  }

  .learning-plan-study-activity-summary {
    gap: 6px;
  }

  .learning-plan-study-activity-summary > div {
    display: block;
    min-height: 0;
    padding: 10px;
    text-align: center;
  }

  .learning-plan-study-activity-summary span,
  .learning-plan-study-activity-summary strong {
    display: block;
  }

  .learning-plan-study-activity-summary strong {
    margin-top: 3px;
    font-size: 14px;
  }

  .learning-plan-study-activity-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .learning-plan-study-activity-date {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
}

/* ===== 学習計画：講師編集・生徒閲覧 ===== */
.learning-plan-page {
  display: grid;
  gap: 18px;
  padding-bottom: 92px;
}

.learning-plan-student-selector {
  display: grid;
  grid-template-columns: minmax(240px, 420px) minmax(0, 1fr);
  align-items: end;
  gap: 22px;
}

.learning-plan-student-selector label {
  margin: 0;
}

.learning-plan-student-selector label > span {
  display: block;
  margin-bottom: 7px;
}

.learning-plan-student-selector p {
  margin: 0 0 9px;
  line-height: 1.7;
}

.learning-plan-overview {
  overflow: hidden;
  padding: 22px;
  background:
    radial-gradient(circle at 95% 0%, rgba(209, 19, 31, .09), transparent 34%),
    #fff;
}

.learning-plan-overview-head,
.learning-plan-section-title,
.learning-plan-skill-label,
.learning-plan-overall-line,
.learning-plan-week-total,
.learning-plan-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.learning-plan-overview-head {
  margin-bottom: 20px;
}

.learning-plan-overview-head h3 {
  margin: 2px 0 0;
  font-size: 23px;
}

.learning-plan-eyebrow {
  margin: 0;
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

.learning-plan-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.learning-plan-summary-card {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid #e7e9ee;
  border-radius: 14px;
  background: #f8fafc;
}

.learning-plan-summary-card.accent {
  border-color: #fecdd3;
  background: linear-gradient(135deg, #fff1f2, #fff);
}

.learning-plan-summary-card > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.learning-plan-summary-card strong {
  display: block;
  overflow-wrap: anywhere;
  color: #101828;
  font-size: 18px;
  line-height: 1.4;
}

.learning-plan-summary-card.accent strong {
  color: var(--primary);
  font-size: 27px;
}

.learning-plan-summary-card strong small {
  margin-left: 3px;
  font-size: 12px;
}

.learning-plan-section {
  padding: 22px;
}

.learning-plan-section-title {
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.learning-plan-section-title > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.learning-plan-section-title > div > span {
  display: inline-grid;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}

.learning-plan-section-title h3 {
  margin: 0;
}

.learning-plan-section-title > p {
  max-width: 420px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: right;
}

.learning-plan-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.learning-plan-field {
  margin: 0;
}

.learning-plan-field.wide {
  grid-column: 1 / -1;
}

.learning-plan-field > span {
  display: block;
  margin-bottom: 7px;
}

.learning-plan-field textarea {
  min-height: 92px;
  line-height: 1.65;
}

.learning-plan-skill-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.learning-plan-skill-card {
  position: relative;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfe;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.learning-plan-skill-card.is-focus {
  border-color: #fda4af;
  background: #fff8f8;
  box-shadow: 0 6px 16px rgba(209, 19, 31, .06);
}

.learning-plan-focus-check {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  color: var(--primary);
  font-size: 11px;
}

.learning-plan-focus-check input {
  width: 17px;
  min-height: 17px;
  margin: 0;
}

.learning-plan-skill-name {
  margin-bottom: 10px;
  color: #101828;
  font-size: 16px;
  font-weight: 800;
}

.learning-plan-score-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}

.learning-plan-score-row input {
  min-width: 0;
  min-height: 38px;
  padding: 7px 9px;
  font-size: 20px;
  font-weight: 800;
}

.learning-plan-score-row span,
.learning-plan-view-score span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
}

.learning-plan-score-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9edf3;
}

.learning-plan-score-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ed7780, var(--primary));
  transition: width .2s ease;
}

.learning-plan-overall-line {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 12px;
  background: #f8fafc;
}

.learning-plan-overall-line span {
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.learning-plan-overall-line strong {
  color: var(--primary);
  font-size: 19px;
}

.learning-plan-view-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 18px 0 10px;
}

.learning-plan-view-score strong {
  color: #101828;
  font-size: 30px;
}

.learning-plan-schedule-wrap {
  border: 1px solid var(--line);
  border-radius: 14px;
}

.learning-plan-schedule-table {
  min-width: 1260px;
}

.learning-plan-schedule-table th,
.learning-plan-schedule-table td {
  padding: 8px;
  vertical-align: middle;
}

.learning-plan-schedule-table thead th {
  white-space: nowrap;
}

.learning-plan-schedule-table tbody > tr > th {
  min-width: 74px;
  color: #344054;
  white-space: nowrap;
}

.learning-plan-schedule-table td:nth-last-child(1) {
  min-width: 95px;
  color: var(--primary);
  text-align: center;
  white-space: nowrap;
}

.learning-plan-schedule-table input {
  min-height: 38px;
  padding: 7px 9px;
  border-radius: 9px;
}

.learning-plan-schedule-table td:has(.learning-plan-minute-input) {
  width: 74px;
}

.learning-plan-minute-input {
  min-width: 62px;
  text-align: right;
}

.learning-plan-week-total {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid #fecdd3;
  border-radius: 13px;
  background: var(--primary-soft);
}

.learning-plan-week-total span {
  color: #344054;
  font-weight: 700;
}

.learning-plan-week-total strong {
  color: var(--primary);
  font-size: 22px;
}

.learning-plan-schedule-view table {
  min-width: 680px;
}

.learning-plan-schedule-view td > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
}

.learning-plan-schedule-view td > div + div {
  border-top: 1px dashed var(--line);
}

.learning-plan-schedule-view td small {
  flex: 0 0 auto;
  color: var(--muted);
}

.learning-plan-view-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.learning-plan-view-details > div {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fbfcfe;
}

.learning-plan-view-details > div:first-child,
.learning-plan-view-details > div:nth-child(n + 3),
.learning-plan-view-details > div.is-wide {
  grid-column: 1 / -1;
}

.learning-plan-view-details > div > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.learning-plan-view-details p {
  margin: 0;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.learning-plan-chart-shell {
  overflow-x: auto;
}

.learning-plan-chart {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
}

.learning-plan-chart-grid line {
  stroke: #e5e7eb;
  stroke-width: 1;
}

.learning-plan-chart-grid text,
.learning-plan-chart-month {
  fill: #667085;
  font-size: 11px;
}

.learning-plan-chart-series polyline {
  fill: none;
  stroke: var(--series-color);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.learning-plan-chart-series circle {
  fill: #fff;
  stroke: var(--series-color);
  stroke-width: 3;
}

.learning-plan-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px 16px;
  margin-bottom: 5px;
}

.learning-plan-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475467;
  font-size: 11px;
  font-weight: 700;
}

.learning-plan-chart-legend i {
  display: block;
  width: 18px;
  height: 3px;
  border-radius: 99px;
  background: var(--series-color);
}

.learning-plan-history-table {
  margin-top: 14px;
}

.learning-plan-history-table table {
  min-width: 680px;
}

.learning-plan-history-table td:not(:first-child),
.learning-plan-history-table th:not(:first-child) {
  text-align: center;
}

.learning-plan-save-bar {
  position: sticky;
  z-index: 12;
  bottom: 18px;
  padding: 13px 15px 13px 18px;
  border: 1px solid #fda4af;
  border-radius: 15px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 36px rgba(16, 24, 40, .16);
  backdrop-filter: blur(12px);
}

.learning-plan-save-bar > div {
  display: grid;
  gap: 3px;
}

.learning-plan-save-bar span {
  color: var(--muted);
  font-size: 11px;
}

.learning-plan-save-bar button {
  min-width: 170px;
}

.learning-plan-readonly-notice {
  margin: 0;
}

.learning-plan-legacy summary {
  cursor: pointer;
  color: #344054;
  font-weight: 700;
}

.learning-plan-legacy[open] summary {
  margin-bottom: 14px;
}

@media (max-width: 920px) {
  .learning-plan-summary-grid,
  .learning-plan-skill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learning-plan-student-selector {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .learning-plan-page {
    gap: 12px;
    padding-bottom: 78px;
  }

  .learning-plan-overview,
  .learning-plan-section {
    padding: 15px;
  }

  .learning-plan-overview-head,
  .learning-plan-section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .learning-plan-overview-head {
    margin-bottom: 14px;
  }

  .learning-plan-overview-head h3 {
    font-size: 20px;
  }

  .learning-plan-section-title > p {
    margin-left: 41px;
    text-align: left;
  }

  .learning-plan-summary-grid,
  .learning-plan-skill-grid,
  .learning-plan-form-grid,
  .learning-plan-view-details {
    grid-template-columns: 1fr;
  }

  .learning-plan-view-details > div,
  .learning-plan-field.wide {
    grid-column: auto;
  }

  .learning-plan-summary-card {
    padding: 13px 14px;
  }

  .learning-plan-save-bar {
    bottom: calc(76px + env(safe-area-inset-bottom));
    align-items: stretch;
    flex-direction: column;
    padding: 12px;
  }

  .learning-plan-save-bar button {
    width: 100%;
  }

  .learning-plan-week-total {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .learning-plan-chart {
    min-width: 560px;
  }
}

@media (max-width: 390px) {
  .sidebar {
    width: 58vw;
    min-width: 200px;
  }

  .topbar-logo {
    width: 82px;
  }
}

/* ===== 2026-07-09 emergency mobile layout reset =====
   Purpose: override older mobile sidebar rules that conflicted with the new drawer menu. */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.menu-open {
  overflow: hidden !important;
  touch-action: none;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .app {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow-x: hidden !important;
  }

  .topbar {
    
    
    z-index: 40 !important;
    
    
    justify-content: flex-start !important;
    gap: 8px !important;
    
    min-height: 56px !important;
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px !important;
    margin: 0 0 12px !important;
    background: rgba(255,255,255,.98) !important;
    border-bottom: 1px solid var(--line) !important;
    backdrop-filter: blur(8px);
  }

  .menu-toggle {
    
    
    
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    
    
    border-radius: 12px !important;
    background: var(--primary) !important;
    
    font-size: 20px !important;
    
  }

  .topbar-logo {
    
    flex: 0 0 auto !important;
    width: 88px !important;
    max-width: 88px !important;
    
    max-height: 36px !important;
    
    margin: 0 !important;
  }

  .topbar-title {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .topbar h2 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  .topbar .muted,
  #pageStatus {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 54vw !important;
    min-width: 212px !important;
    max-width: 252px !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translate3d(-110%, 0, 0) !important;
    transition: transform .22s ease !important;
    background: #fff !important;
    color: var(--text) !important;
    border-right: 1px solid var(--line) !important;
    box-shadow: 18px 0 38px rgba(16, 24, 40, .18) !important;
  }

  

  .sidebar.open::after {
    content: "";
    position: fixed;
    left: 100%;
    top: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(15, 23, 42, .28);
    pointer-events: none;
  }

  .sidebar .side-brand {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    padding: 0 42px 10px 0 !important;
    margin: 0 0 10px !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .sidebar .side-brand img {
    display: block !important;
    width: 96px !important;
    max-width: 96px !important;
    height: auto !important;
    max-height: 44px !important;
    object-fit: contain !important;
    margin: 0 !important;
    filter: none !important;
  }

  .menu-close {
    display: inline-flex !important;
    position: absolute !important;
    top: calc(12px + env(safe-area-inset-top)) !important;
    right: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: var(--primary) !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    z-index: 2 !important;
  }

  .menu-close:hover,
  .menu-close:focus {
    background: var(--primary-dark) !important;
    color: #fff !important;
  }

  .side-user {
    display: block !important;
    color: #475467 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    margin: 0 0 10px !important;
    word-break: break-word !important;
  }

  .divider {
    display: block !important;
    height: 1px !important;
    background: var(--line) !important;
    margin: 10px 0 !important;
  }

  #pushArea {
    flex: 0 0 auto !important;
  }

  .push-card {
    background: #fff7f8 !important;
    border: 1px solid #ffd6db !important;
    color: var(--text) !important;
    padding: 8px !important;
    margin: 6px 0 10px !important;
  }

  .push-card .muted,
  .push-card .small {
    color: #667085 !important;
  }

  .push-card button {
    background: var(--primary) !important;
    color: #fff !important;
    min-height: 36px !important;
    padding: 7px 8px !important;
    font-size: 12px !important;
  }

  .sidebar .nav {
    display: flex !important;
    flex-direction: column !important;
    
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .sidebar .nav button,
  .sidebar #nav button {
    display: block !important;
    width: 100% !important;
    
    margin: 0 !important;
    padding: 8px 9px !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #344054 !important;
    text-align: left !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    
    white-space: normal !important;
  }

  .sidebar .nav button.active,
  .sidebar .nav button:hover,
  .sidebar .nav button:focus {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
  }

  .sidebar .nav-spacer {
    flex: 1 1 12px !important;
    min-height: 12px !important;
  }

  .sidebar button.danger,
  .sidebar .nav button.danger {
    background: #fff1f3 !important;
    color: var(--danger) !important;
  }

  .table-wrap,
  .card,
  .grid,
  .row,
  .selector-grid,
  .schedule-table-wrap {
    max-width: 100% !important;
  }
}

@media (max-width: 390px) {
  .sidebar {
    width: 58vw !important;
    min-width: 205px !important;
    max-width: 230px !important;
  }

  .topbar-logo {
    width: 80px !important;
    max-width: 80px !important;
  }

  .topbar h2 {
    font-size: 17px !important;
  }
}


/* ===== Auth / app visibility guard =====
   ログイン画面の下にアプリ画面が残ってスクロール表示されることを防止します。 */
body.auth-mode {
  min-height: 100dvh;
  overflow-x: hidden;
}

body.auth-mode #appView,
#loginView:not(.hidden) + #appView {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.app-mode #loginView {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.auth-mode .login-wrap {
  min-height: 100dvh;
}

body.auth-mode .sidebar,
body.auth-mode .main,
body.auth-mode .topbar {
  transform: none !important;
}

/* ===== Student account/navigation refinements ===== */
.nav-group-title {
  margin: 14px 8px 4px;
  color: #981b1e;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}
.side-user {
  line-height: 1.7;
}
.logo-button,
.side-brand button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.contract-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.announcement-snippet {
  max-height: 86px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.announcement-snippet p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 4px 0 0;
}
.note-list {
  margin: 8px 0 0 18px;
  padding: 0;
  color: #344054;
}
.message-destination-grid,
.teacher-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.destination-card,
.teacher-select-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 24, 40, .06);
}
.destination-card:hover,
.teacher-select-card:hover,
.teacher-select-card.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.teacher-select-card img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin-bottom: 8px;
}
.teacher-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 10px 0 16px;
}
.booking-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .32);
  overflow: auto;
  padding: 28px;
}
.booking-modal {
  max-width: 980px;
  margin: 0 auto;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.icon-close {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
}
.account-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.compact-settings-card textarea {
  min-height: 74px;
}
.compact-settings-card label {
  margin-top: 8px;
}
.legal-card p {
  line-height: 1.8;
}

@media (max-width: 700px) {
  .account-compact-grid,
  .message-destination-grid,
  .teacher-card-grid,
  .teacher-filter-grid {
    grid-template-columns: 1fr;
  }
  .booking-modal-backdrop {
    padding: 12px;
  }
  .booking-modal {
    border-radius: 18px;
  }
  .contract-warning {
    align-items: stretch;
  }
  .contract-warning button {
    width: 100%;
  }
}


/* ===== 2026-07-09 auth button/clickability safety patch =====
   ログイン画面でアプリ本体やメニューのレイヤーが重なり、
   「新規登録」「パスワード再設定」等が押せなくなる状態を防止します。 */
body.auth-mode {
  min-height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  touch-action: auto !important;
}

body.auth-mode #loginView {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10000 !important;
  min-height: 100dvh !important;
}

body.auth-mode #loginView,
body.auth-mode #loginView * {
  pointer-events: auto !important;
}

body.auth-mode .login-card,
body.auth-mode .auth-tabs,
body.auth-mode .auth-panel {
  position: relative !important;
  z-index: 10001 !important;
}

body.auth-mode #appView {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: auto !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.auth-mode .sidebar,
body.auth-mode .sidebar.open,
body.auth-mode .main,
body.auth-mode .topbar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.auth-mode .sidebar.open::after {
  display: none !important;
  content: none !important;
}

body.auth-mode .auth-tabs button,
body.auth-mode .auth-panel button,
body.auth-mode .auth-panel input {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10002 !important;
}

/* ===== 2026-07-09 mobile header redesign =====
   スマホ画面専用：赤い固定ヘッダー、中央の白抜きロゴ、左の白いメニューボタン */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .main {
    padding: 0 12px 12px !important;
  }

  .topbar {
    position: sticky !important;
    
    z-index: 90 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% + 24px) !important;
    min-height: 52px !important;
    margin: 0 -12px 14px !important;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important;
    background: var(--primary) !important;
    border-bottom: 0 !important;
    box-shadow: 0 3px 10px rgba(16, 24, 40, .12) !important;
    backdrop-filter: none !important;
  }

  .menu-toggle {
    position: absolute !important;
    left: 10px !important;
    top: calc(7px + env(safe-area-inset-top)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 25px !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  .menu-toggle:hover,
  .menu-toggle:focus {
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
  }

  .topbar-logo {
    display: block !important;
    width: 62px !important;
    max-width: 62px !important;
    height: auto !important;
    max-height: 26px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    filter: brightness(0) invert(1) !important;
  }

  .topbar-title,
  .topbar h2,
  #pageTitle,
  #pageStatus {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .topbar-logo {
    width: 58px !important;
    max-width: 58px !important;
    max-height: 24px !important;
  }
}


/* ===== 2026-07-10 UI refinement update ===== */
@media (min-width: 821px) {
  .nav { gap: 4px !important; }
  .nav button { padding: 8px 10px !important; margin: 2px 0 !important; min-height: 34px !important; line-height: 1.25 !important; }
  .nav-group-title { font-size: 14px !important; margin: 10px 8px 3px !important; color: #f3f4f6 !important; opacity: .9; letter-spacing: 0 !important; }
}

.compact-lesson-table th, .compact-lesson-table td { padding: 7px 8px; white-space: nowrap; }

.teacher-tab-row, .mode-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.teacher-tab-row button.active, .mode-tabs button.active { background: var(--primary) !important; color: #fff !important; }
.board-wrap { max-height: 72vh; }
.schedule-table { border-collapse: separate; border-spacing: 0; min-width: 4200px; }
.schedule-table thead th { position: sticky; top: 0; z-index: 5; background: #f9fafb; }
.schedule-table tbody th, .schedule-table thead th:first-child { position: sticky; left: 0; z-index: 6; background: #f9fafb; }
.schedule-table tbody th { min-width: 96px; }
.schedule-table .slot { min-width: 80px !important; width: 80px; padding: 6px !important; vertical-align: middle; text-align: center; }
.schedule-table .slot.open { color: #067647; font-weight: 900; }
.schedule-table .slot.closed { color: #667085; font-weight: 900; }
.schedule-table .slot.reserved { font-weight: 800; }

.filter-chip-wrap { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.filter-chip { width: auto !important; min-height: 32px; padding: 6px 10px; border-radius: 999px; background: #f2f4f7; color: #475467; }
.filter-chip.active { background: var(--primary); color: #fff; }
.teacher-card-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 6px 0 12px; -webkit-overflow-scrolling: touch; }
.compact-teacher-card { flex: 0 0 142px; width: 142px; text-align: center; padding: 12px; }
.compact-teacher-card img, .teacher-photo-placeholder { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; margin: 0 auto 8px; display: grid; place-items: center; background: #f2f4f7; color: #667085; font-weight: 800; }
.compact-teacher-card h4 { margin: 0; font-size: 14px; }
.teacher-filter-grid select[multiple] { min-height: 92px; }
.draft-list { display: flex; gap: 8px; flex-wrap: wrap; }

.slot-btn { min-height: 24px !important; height: 24px; padding: 2px 7px !important; font-size: 10px !important; border-radius: 8px !important; opacity: .82; display: inline-flex; align-items: center; justify-content: center; }
.slot-btn.override { box-shadow: none !important; }
.schedule-grid td { vertical-align: middle !important; }

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .main { padding-top: calc(58px + env(safe-area-inset-top)) !important; }
  .topbar { position: fixed !important; left: 0 !important; right: 0 !important; top: 0 !important; transform: translateY(0); transition: transform .16s ease !important; margin: 0 !important; width: 100% !important; }
  body.header-hidden .topbar { transform: translateY(calc(-100% - env(safe-area-inset-top))) !important; }
  .sidebar { padding-left: 6px !important; padding-right: 10px !important; }
  .sidebar .side-brand img { width: 67px !important; max-width: 67px !important; }
  .sidebar .nav button, .sidebar #nav button { padding-left: 5px !important; font-size: 14.5px !important; }
  .nav-group-title { font-size: 14.5px !important; margin-left: 5px !important; color: #475467 !important; }
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr !important; }
  .card, .table-wrap, .schedule-table-wrap { max-width: 100% !important; }
  #content { max-width: 100% !important; overflow-x: hidden; }
  .student-dashboard .table-wrap table, .compact-lesson-table table { min-width: 0 !important; }
  .table-wrap table { min-width: 640px; }
  .compact-lesson-table table { min-width: 520px !important; }
}


/* ===== 2026-07-10 student home mobile width fix =====
   生徒ホーム画面がスマホ横幅からはみ出る問題を防止 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .student-dashboard {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .student-dashboard .grid.two {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
  }

  .student-dashboard .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .student-dashboard .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .student-dashboard .table-wrap table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .student-dashboard .table-wrap th,
  .student-dashboard .table-wrap td {
    padding: 7px 5px !important;
    font-size: 12px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* ホームの小さな予定表では、横幅確保のため詳細列を省略 */
  .student-dashboard .table-wrap th:nth-child(n/**/+3),
  .student-dashboard .table-wrap td:nth-child(n/**/+3) {
    display: none !important;
  }

  .student-dashboard .announcement-snippet,
  .student-dashboard .announcement-snippet p,
  .student-dashboard .dash-item,
  .student-dashboard .dash-item span,
  .student-dashboard .empty {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .student-dashboard .actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .student-dashboard .actions button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ===== 2026-07-10 mobile header + modal + schedule speed refinement ===== */
:root {
  --mobile-header-offset: 0px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /* ロゴヘッダーはスクロール量に連動して上方向へ退避 */
  .topbar {
    transform: translate3d(0, calc(-1 * var(--mobile-header-offset, 0px)), 0) !important;
    
    will-change: transform !important;
  }

  body.header-hidden .topbar {
    transform: translate3d(0, calc(-1 * var(--mobile-header-offset, 0px)), 0) !important;
  }

  /* 予約リクエスト・課金停止などの別ウィンドウがヘッダーに重ならないようにする */
  .booking-modal-backdrop {
    z-index: 80 !important;
    padding-top: calc(72px + env(safe-area-inset-top)) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }

  .booking-modal {
    margin-top: 0 !important;
    max-height: calc(100dvh - 92px - env(safe-area-inset-top)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 受講スケジュール内の表・検索カードの描画負荷を少し抑える */
  .teacher-card-scroll,
  .table-wrap,
  .schedule-table-wrap {
    -webkit-overflow-scrolling: touch !important;
    contain: content;
  }

  .compact-teacher-card,
  .compact-lesson-table td,
  .compact-lesson-table th {
    contain: layout paint;
  }
}

/* ===== 2026-07-10 mobile header and teacher filter chip refinement ===== */
.filter-chip-section {
  min-width: 0;
}
.filter-chip-section label {
  margin-top: 0;
}
.teacher-filter-grid .filter-chip-wrap {
  align-items: flex-start;
  max-width: 100%;
}
.teacher-filter-grid .filter-chip {
  white-space: nowrap;
}
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .filter-chip-wrap {
    gap: 7px !important;
  }
  .filter-chip {
    min-height: 34px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
  }
}


/* ===== 2026-07-10 next-month request speed, loading, badges ===== */
.center-loading {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--muted);
  font-weight: 400;
  text-align: center;
}
.loading-spinner {
  width: 34px;
  height: 34px;
  border: 4px solid #f2f4f7;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: smaei-spin .8s linear infinite;
}
@keyframes smaei-spin { to { transform: rotate(360deg); } }
.filter-chip {
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .08s linear, color .08s linear, border-color .08s linear;
}
.filter-chip.active,
.filter-chip[aria-pressed="true"] {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.slot-accordion {
  grid-column: 1 / -1;
}
.slot-day-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  margin: 8px 0;
  background: #fff;
}
.slot-day-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.slot-day-toggle {
  width: 36px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: #f2f4f7 !important;
  color: var(--text) !important;
}
.slot-day-select {
  flex: 1;
  min-height: 30px !important;
  padding: 5px 10px !important;
  border-radius: 10px !important;
  background: #f2f4f7 !important;
  color: var(--text) !important;
}
.slot-day-select.active {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.slot-time-wrap {
  padding: 8px 0 2px;
  margin-bottom: 0 !important;
}
.specialty-filter {
  margin-top: 8px;
}
.specialty-group {
  margin: 8px 0 12px;
}
.specialty-group > label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .booking-modal .center-loading {
    min-height: 240px;
  }
  .topbar {
    transition: none !important;
  }
}


/* ===== 2026-07-10 menu / badge / scroll refinement ===== */
.filter-chip:hover:not(.active):not([aria-pressed="true"]),
.filter-chip:focus:not(.active):not([aria-pressed="true"]) {
  background: #e4e7ec !important;
  color: #344054 !important;
  border-color: #d0d5dd !important;
}
.filter-chip.active:hover,
.filter-chip[aria-pressed="true"]:hover,
.filter-chip.active:focus,
.filter-chip[aria-pressed="true"]:focus {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

@media (min-width: 821px) {
  .sidebar .nav { gap: 2px !important; }
  .sidebar .nav-group-title,
  .nav-group-title {
    
    
    
    font-weight: 900 !important;
    margin: 13px 0 5px !important;
    padding: 6px 10px 6px 12px !important;
    border-left: 3px solid rgba(255,255,255,.55) !important;
    background: rgba(255,255,255,.07) !important;
    border-radius: 8px !important;
  }
  .sidebar .nav button,
  .sidebar #nav button {
    margin: 1px 0 !important;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .sidebar .nav {
    gap: 2px !important;
  }
  .sidebar .nav button,
  .sidebar #nav button {
    min-height: 32px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 1.25 !important;
  }
  .sidebar .nav-group-title,
  .nav-group-title {
    color: var(--primary) !important;
    font-size: 14.5px !important;
    
    margin: 8px 5px 2px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
}

/* ===== 2026-07-10 task / menu / modal refresh fix ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /* スマホメニューの間隔は、前回縮める前の幅に戻す */
  .sidebar .nav {
    gap: 4px !important;
  }
  .sidebar .nav button,
  .sidebar #nav button {
    min-height: 36px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    line-height: 1.35 !important;
  }
  .sidebar .nav-group-title,
  .nav-group-title {
    margin: 10px 5px 4px !important;
  }
}

/* ===== 2026-07-11 learning cycle home / fixed PC menu update ===== */
.home-guidance {
  border-color: #fecdd3;
  background: linear-gradient(180deg, #fff7f8, #fff);
  margin-bottom: 18px;
}
.home-guidance p {
  margin: 0 0 10px;
  line-height: 1.8;
  font-weight: 700;
}
.home-guidance .actions {
  margin-top: 12px;
}

@media (min-width: 821px) {
  .app {
    display: block !important;
    padding-left: 270px !important;
    min-height: 100vh !important;
  }
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 270px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 80 !important;
  }
  .main {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    margin-left: 0 !important;
  }
  body.student-home-page .topbar {
    display: none !important;
  }
  body.student-home-page .main {
    padding-top: 28px !important;
  }
}


/* ===== 2026-07-11 changed-files-only: menu/modal/home refinements ===== */
/* 821〜960px幅でもPC固定メニュー内のナビだけが小さくならないようにする */
@media (min-width: 821px) and (max-width: 960px) {
  .sidebar .nav,
  .sidebar #nav {
    
    height: auto !important;
    overflow: visible !important;
    
    
  }
}

/* スマホドロワー内のメニューを通常の太さにし、カテゴリ名は強調のままにする */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .sidebar .nav,
  .sidebar #nav {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  .sidebar .nav button,
  .sidebar #nav button {
    font-weight: 400 !important;
  }

  .sidebar .nav-group-title,
  .nav-group-title {
    font-weight: 900 !important;
  }
}

/* 別ウィンドウはサイドメニューより前面に表示し、背景ページはスクロールさせない */
body.modal-open {
  
  touch-action: none;
}

body.modal-open .booking-modal-backdrop {
  touch-action: auto;
}

.booking-modal-backdrop {
  z-index: 1000 !important;
}

.booking-modal {
  
  z-index: 1001 !important;
}

/* ===== 2026-07-11 schedule/message/profile refinements ===== */
.center-loading,
.center-loading span:not(.loading-spinner) {
  font-weight: 400 !important;
}

.schedule-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 8px 0 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}
.schedule-table-compact,
.compact-lesson-table,
.table-wrap {
  max-width: 100% !important;
  overflow-x: auto;
  box-sizing: border-box;
}
.schedule-table-compact table,
.compact-lesson-table table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed;
}
.schedule-table-compact th,
.schedule-table-compact td,
.compact-lesson-table th,
.compact-lesson-table td {
  white-space: normal !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.schedule-table-compact th:nth-child(1),
.schedule-table-compact td:nth-child(1) { width: 22%; }
.schedule-table-compact th:nth-child(2),
.schedule-table-compact td:nth-child(2) { width: 44%; }
.schedule-table-compact th:nth-child(3),
.schedule-table-compact td:nth-child(3) { width: 34%; }
.next-plan-card { margin-top: 10px; }
.compact-plan-list { gap: 10px; }

.success.auto-success {
  transition: opacity .25s ease;
  font-weight: 400;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  input,
  select,
  textarea,
  .row input,
  .row select,
  .row textarea {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"] {
    min-width: 0 !important;
  }
}

@media (min-width: 821px) {
  .sidebar .nav-group-title,
  .nav-group-title {
    background: var(--primary) !important;
    color: #fff !important;
    
    
  }
}

.filter-chip,
.filter-chip:hover,
.filter-chip:focus,
.filter-chip:active,
.filter-chip:not(.active):hover,
.filter-chip:not(.active):focus,
.filter-chip:not([aria-pressed="true"]):hover,
.filter-chip:not([aria-pressed="true"]):focus {
  background: #f2f4f7 !important;
  color: #475467 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.filter-chip.active,
.filter-chip.active:hover,
.filter-chip.active:focus,
.filter-chip[aria-pressed="true"],
.filter-chip[aria-pressed="true"]:hover,
.filter-chip[aria-pressed="true"]:focus {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

.booking-modal-backdrop {
  background: rgba(15, 23, 42, .46) !important;
}
body.modal-open .booking-modal-backdrop {
  background: rgba(15, 23, 42, .46) !important;
}

.profile-badge-wrap {
  margin-bottom: 14px;
}
.notice-soft {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 13px;
}


/* ===== 2026-07-11 menu button / logout / PC category rollback fix ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .topbar {
    pointer-events: auto !important;
  }

  .menu-toggle,
  #menuToggle {
    pointer-events: auto !important;
    z-index: 1200 !important;
    position: absolute !important;
  }

  .sidebar {
    z-index: 1100 !important;
  }

  .sidebar.open {
    transform: translate3d(0, 0, 0) !important;
  }

  .sidebar .nav button,
  .sidebar #nav button,
  #navLogout {
    pointer-events: auto !important;
  }
}

@media (min-width: 821px) {
  .sidebar .nav-group-title,
  .nav-group-title {
    background: transparent !important;
    color: #f3f4f6 !important;
    border-left: 0 !important;
    border-bottom: 2px solid var(--primary) !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    margin: 12px 10px 5px !important;
    padding: 5px 0 6px !important;
  }
}


/* ===== 2026-07-11 PC menu / schedule table / next-month button fix ===== */
@media (min-width: 821px) and (max-width: 960px) {
  .app {
    display: block !important;
    padding-left: 270px !important;
  }
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 270px !important;
    max-width: 270px !important;
    min-width: 270px !important;
    height: 100dvh !important;
    padding: 22px !important;
    background: var(--nav) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
    border-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .sidebar .side-brand {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    border-bottom: 0 !important;
  }
  .sidebar .side-brand img {
    width: 152px !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 0 14px !important;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.05)) !important;
  }
  .side-user {
    display: block !important;
    color: #cbd5e1 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
  }
  .menu-close {
    display: none !important;
  }
  .divider {
    background: rgba(255,255,255,.14) !important;
    margin: 16px 0 !important;
  }
  .sidebar .nav,
  .sidebar #nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: none !important;
  }
  .sidebar .nav button,
  .sidebar #nav button {
    color: #f3f4f6 !important;
    background: transparent !important;
    font-weight: 700 !important;
    min-height: 42px !important;
    padding: 11px 12px !important;
  }
  .sidebar .nav button.active,
  .sidebar .nav button:hover {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
  }
}

.schedule-meta-line {
  gap: 6px !important;
}
.schedule-meta-badge {
  margin: 2px 4px 2px 0 !important;
  white-space: nowrap;
}
.next-plan-card {
  border-style: solid !important;
  background: #fff !important;
}


/* ===== 2026-07-11 notification / schedule / badge stability fix ===== */
.center-loading {
  font-weight: 400 !important;
}
.center-loading p,
.center-loading .muted,
.center-loading .small {
  font-weight: 400 !important;
}

.notice-status.notice-status-ok {
  border-color: #16a34a !important;
  background: #f0fdf4 !important;
  color: #15803d !important;
}

.checkbox-row {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
  width: 100% !important;
  margin: 10px 0 !important;
  line-height: 1.45 !important;
}
.checkbox-row input[type="checkbox"] {
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
}
.checkbox-row span {
  align-self: center !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.next-plan-card,
.compact-plan-list .next-plan-card,
.compact-plan-list .subtle-card.next-plan-card {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 未選択バッヂは hover / focus / active でも一切見た目を変えない */
.filter-chip:not(.active):not([aria-pressed="true"]),
.filter-chip:not(.active):not([aria-pressed="true"]):hover,
.filter-chip:not(.active):not([aria-pressed="true"]):focus,
.filter-chip:not(.active):not([aria-pressed="true"]):active {
  background: #f2f4f7 !important;
  color: #475467 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}
.filter-chip.active,
.filter-chip.active:hover,
.filter-chip.active:focus,
.filter-chip.active:active,
.filter-chip[aria-pressed="true"],
.filter-chip[aria-pressed="true"]:hover,
.filter-chip[aria-pressed="true"]:focus,
.filter-chip[aria-pressed="true"]:active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .compact-settings-card .checkbox-row {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }
}

/* ===== 2026-07-11 booking modal action stability ===== */
.teacher-select-card {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: inherit;
  font: inherit;
  min-height: 132px;
}
.teacher-select-card h4 {
  margin: 8px 0 0;
}
.booking-modal,
.booking-modal * {
  pointer-events: auto !important;
}
body.modal-open {
  overflow: hidden !important;
  touch-action: auto !important;
}
body.modal-open .booking-modal-backdrop {
  pointer-events: auto !important;
  touch-action: pan-y !important;
}
body.modal-open #content,
body.modal-open .main {
  touch-action: none;
}
.booking-modal button[data-booking-action] {
  cursor: pointer;
}
.teacher-filter-grid .filter-chip,
.specialty-filter .filter-chip,
.slot-accordion .filter-chip {
  user-select: none;
  -webkit-user-select: none;
}

/* ===== 2026-07-11 teacher profile click / visibility checkbox fix ===== */
.teacher-profile-visible-row {
  display: inline-grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 6px 0 14px !important;
  width: auto !important;
  max-width: 100% !important;
}
.teacher-profile-visible-row input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: start !important;
}
.teacher-profile-visible-row span {
  align-self: center !important;
  line-height: 1.4 !important;
}
.profile-badge-wrap .filter-chip {
  pointer-events: auto !important;
}

/* ===== Booking request modal stability/loading/audio fixes ===== */
.booking-modal {
  position: relative;
}
.booking-busy-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: block;
  background: rgba(255, 255, 255, 0.68);
  border-radius: inherit;
  pointer-events: none;
}
.booking-busy-overlay .center-loading {
  min-height: 120px;
  padding: 18px 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}
.teacher-audio-actions {
  justify-content: flex-start;
  margin-top: 8px;
}
.teacher-audio-button.playing {
  background: #f8d7da !important;
  color: var(--primary) !important;
  border-color: #f3b7bd !important;
}

/* メッセージ画面：カードをbutton化しても既存カードと同じ見た目にする */
button.destination-card {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  line-height: inherit;
}
button.destination-card h4,
button.destination-card p {
  margin-left: 0;
  margin-right: 0;
}


















/* ===== 2026-07-11 lesson cycle / schedule table update ===== */
.lesson-row-muted td {
  background: #f3f4f6 !important;
  color: #667085;
}
.lesson-row-cancelled td {
  color: #98a2b3;
  text-decoration: line-through;
}
.student-dashboard .card > h3,
.student-dashboard .card h3 {
  word-break: keep-all;
}

/* ===== 2026-07-11 account/message/mobile-loading/booking stability fixes ===== */
#content {
  position: relative;
}
.page-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.64);
  pointer-events: auto;
}
.page-loading-overlay .center-loading {
  min-height: 120px;
  min-width: 210px;
  padding: 22px 28px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
}
body.modal-open .page-loading-overlay {
  display: none !important;
}
.booking-modal.booking-busy {
  overflow-y: auto !important;
}
.booking-modal.booking-busy .modal-head {
  position: sticky;
  top: 0;
  z-index: 45;
  background: #fff;
}
.booking-modal.booking-busy .booking-busy-overlay {
  position: absolute !important;
  inset: 0 !important;
  min-height: 100% !important;
  border-radius: inherit;
  pointer-events: none !important;
  background: rgba(255, 255, 255, 0.68) !important;
}
.booking-modal.booking-busy .booking-busy-center {
  position: absolute;
  top: var(--booking-busy-center-top, 24px);
  left: 0;
  right: 0;
  display: grid;
  place-items: center;
  padding: 0 16px;
}
.booking-modal.booking-busy .icon-close {
  position: relative;
  z-index: 60;
  pointer-events: auto !important;
}
.booking-modal-backdrop.booking-busy-backdrop {
  overflow-y: auto !important;
}
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .page-loading-overlay {
    background: rgba(255, 255, 255, 0.72);
  }
  .page-loading-overlay .center-loading {
    min-width: 190px;
    padding: 18px 22px;
  }
}

/* ===== 2026-07-11 mobile perceived-performance refinement ===== */
.soft-page-activity {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(208, 213, 221, .9);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
  pointer-events: none;
}
.loading-spinner.mini {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .soft-page-activity {
    left: 50%;
    right: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    white-space: nowrap;
  }
  /* スマホではページ全体を塞ぐ読み込み表示は最後の手段に限定し、表示されても操作の邪魔になりにくくします。 */
  .page-loading-overlay {
    background: rgba(255, 255, 255, 0.42);
    pointer-events: none;
  }
  .page-loading-overlay .center-loading {
    pointer-events: none;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .10);
  }
}

/* ===== 2026-07-11 schedule status/table width refinement ===== */
.schedule-table-compact,
.compact-lesson-table {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}
.schedule-table-compact table,
.compact-lesson-table table {
  width: max-content !important;
  min-width: min(100%, 520px) !important;
  max-width: none !important;
  table-layout: auto !important;
}
.schedule-table-compact th,
.schedule-table-compact td,
.compact-lesson-table th,
.compact-lesson-table td {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.schedule-table-compact th:nth-child(1),
.schedule-table-compact td:nth-child(1),
.compact-lesson-table th:nth-child(1),
.compact-lesson-table td:nth-child(1) {
  width: auto !important;
  min-width: 92px;
}
.schedule-table-compact th:nth-child(2),
.schedule-table-compact td:nth-child(2),
.compact-lesson-table th:nth-child(2),
.compact-lesson-table td:nth-child(2) {
  width: auto !important;
  min-width: 190px;
}
.schedule-table-compact th:nth-child(3),
.schedule-table-compact td:nth-child(3),
.compact-lesson-table th:nth-child(3),
.compact-lesson-table td:nth-child(3) {
  width: auto !important;
  min-width: 96px;
}
.student-dashboard .schedule-table-compact th:nth-child(n/**/+3),
.student-dashboard .schedule-table-compact td:nth-child(n/**/+3),
.student-dashboard .compact-lesson-table th:nth-child(n/**/+3),
.student-dashboard .compact-lesson-table td:nth-child(n/**/+3) {
  display: table-cell !important;
}
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .student-dashboard .schedule-table-compact table,
  .student-dashboard .compact-lesson-table table,
  .schedule-table-compact table,
  .compact-lesson-table table {
    width: max-content !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }
  .student-dashboard .schedule-table-compact th,
  .student-dashboard .schedule-table-compact td,
  .student-dashboard .compact-lesson-table th,
  .student-dashboard .compact-lesson-table td,
  .schedule-table-compact th,
  .schedule-table-compact td,
  .compact-lesson-table th,
  .compact-lesson-table td {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    font-size: 12.5px !important;
  }
}

/* ===== schedule board drag / reservation readability fix ===== */
.schedule-table-wrap.board-wrap {
  cursor: grab;
  user-select: none;
  touch-action: pan-x pan-y;
  overscroll-behavior: contain;
}

.schedule-table-wrap.board-wrap.dragging {
  cursor: grabbing;
}

.schedule-table tbody th,
.schedule-table thead th {
  white-space: nowrap;
}

.schedule-table .slot.reserved {
  transition: font-weight .12s ease, box-shadow .12s ease;
}

.schedule-table .slot.reserved:hover,
.schedule-table .slot.reserved:focus-within {
  font-weight: 900;
  box-shadow: inset 0 0 0 2px rgba(209, 19, 31, .25);
}

.schedule-table .slot.reserved.clickable,
.schedule-table .slot.reserved.clickable button {
  cursor: pointer;
}

.schedule-table .slot.reserved button:hover,
.schedule-table .slot.reserved button:focus-visible {
  font-weight: 900;
}

.schedule-table .slot-student-name,
.schedule-table .slot-lesson-label {
  display: inline-block;
  white-space: nowrap;
  line-height: 1.35;
}

.schedule-table .slot-lesson-label {
  font-size: 11px;
}


/* ===== schedule board fixed time column / weekday filter refinement ===== */
.schedule-board-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}

.schedule-table .schedule-board-time-head,
.schedule-table .schedule-board-time-cell,
.schedule-table thead th:first-child,
.schedule-table tbody th {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  padding: 6px 5px !important;
  text-align: center;
  white-space: nowrap;
}

.schedule-table thead th:first-child,
.schedule-table .schedule-board-time-head {
  z-index: 12 !important;
  left: 0;
}

.schedule-table tbody th,
.schedule-table .schedule-board-time-cell {
  z-index: 10 !important;
  left: 0;
  box-shadow: 1px 0 0 rgba(16, 24, 40, .08);
}

.schedule-table thead th {
  z-index: 9 !important;
}

.schedule-table .slot.reserved.clickable:hover,
.schedule-table .slot.reserved.clickable:focus-within {
  font-weight: 900;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .schedule-board-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .schedule-board-filter-row .filter-chip {
    flex: 0 0 auto;
  }
}

/* ===== schedule board single-day filter / fixed cell sizing ===== */
.schedule-table-wrap.board-wrap .schedule-table {
  width: var(--schedule-board-table-width) !important;
  min-width: var(--schedule-board-table-width) !important;
  max-width: none !important;
  table-layout: fixed;
}

.schedule-table .schedule-board-date-head,
.schedule-table-wrap.board-wrap .schedule-table .slot {
  box-sizing: border-box;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}

.schedule-table-wrap.board-wrap .schedule-table tbody tr,
.schedule-table-wrap.board-wrap .schedule-table tbody th,
.schedule-table-wrap.board-wrap .schedule-table tbody td {
  height: 46px;
  min-height: 46px;
}

.schedule-table-wrap.board-wrap .schedule-table th {
  vertical-align: middle !important;
}

.schedule-table-wrap.board-wrap .schedule-table .slot {
  padding: 4px 5px !important;
}

.schedule-table-wrap.board-wrap .schedule-table .slot button {
  min-height: 34px;
  padding: 2px;
}

.schedule-table-wrap.board-wrap .schedule-table .slot-student-name,
.schedule-table-wrap.board-wrap .schedule-table .slot-lesson-label {
  line-height: 1.2;
}



.booking-reject-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e6e7eb;
}

.booking-reject-form[hidden] {
  display: none !important;
}

.booking-reject-warning {
  margin: 0 0 10px;
  color: #c1121f;
  font-weight: 800;
  line-height: 1.6;
}

.required-mark {
  color: #c1121f;
  
  font-weight: 800;
}

/* ===== Teacher schedule settings layout refinement ===== */
.weekly-bulk-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 12px;
}

.weekly-bulk-actions button {
  width: auto;
}

.weekly-grid .time-head {
  vertical-align: middle;
}

.weekly-grid .schedule-header-action {
  width: auto;
  min-height: 0;
  height: auto;
  margin: 3px 1px 0;
  padding: 2px 5px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 9px;
  line-height: 1.05;
  font-weight: 700;
  box-shadow: none;
}

.weekly-grid .schedule-header-open {
  background: #e7f7ed;
  color: #137333;
  border-color: #a8e0bb;
}

.weekly-grid .schedule-header-closed {
  background: #fff0f0;
  color: #b42318;
  border-color: #ffc5c5;
}

.weekly-grid .schedule-header-open:hover,
.weekly-grid .schedule-header-open:focus-visible {
  background: #d9f2e2;
  color: #0f5f2a;
  border-color: #87cf9f;
}

.weekly-grid .schedule-header-closed:hover,
.weekly-grid .schedule-header-closed:focus-visible {
  background: #ffe2e2;
  color: #922018;
  border-color: #f3a8a8;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .weekly-bulk-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .weekly-bulk-actions button {
    width: 100% !important;
    margin: 0;
  }
}

/* ===== 2026-07-12 pending Month 1 request / hidden PC scrollbars ===== */
@media (min-width: 821px) {
  .sidebar,
  .sidebar .nav,
  .sidebar #nav {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .sidebar::-webkit-scrollbar,
  .sidebar .nav::-webkit-scrollbar,
  .sidebar #nav::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

.booking-request-waiting-message {
  margin: 0 0 16px;
  line-height: 1.75;
}

.booking-request-detail-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.booking-request-detail-row {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  gap: 16px;
  padding: 13px 15px;
  align-items: start;
}

.booking-request-detail-row + .booking-request-detail-row {
  border-top: 1px solid var(--line);
}

.booking-request-detail-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.booking-request-detail-value {
  min-width: 0;
  font-weight: 600;
  line-height: 1.65;
}

.booking-request-date-list {
  display: grid;
  gap: 4px;
}

@media (max-width: 620px) {
  .booking-request-detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}


/* ===== 2026-07-12 tentative continuation schedule / payment management ===== */
.schedule-table .slot.awaiting-confirmation {
  background: #e5f0ff;
  color: #174a7e;
  font-weight: 800;
}

.schedule-table .slot.schedule-slot-tooltip {
  position: relative;
  cursor: help;
  overflow: visible;
}

.schedule-table .slot.schedule-slot-tooltip::before,
.schedule-table .slot.schedule-slot-tooltip::after {
  position: absolute;
  left: 50%;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, visibility .12s ease;
}

.schedule-table .slot.schedule-slot-tooltip::before {
  content: "";
  top: calc(100% + 2px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #101828;
}

.schedule-table .slot.schedule-slot-tooltip::after {
  content: attr(data-tooltip);
  top: calc(100% + 14px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 250px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #101828;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: normal;
  text-align: left;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .22);
}

.schedule-table .slot.schedule-slot-tooltip:hover::before,
.schedule-table .slot.schedule-slot-tooltip:hover::after,
.schedule-table .slot.schedule-slot-tooltip:focus::before,
.schedule-table .slot.schedule-slot-tooltip:focus::after {
  opacity: 1;
  visibility: visible;
}

.admin-payment-notice {
  margin-bottom: 16px;
}

.payment-row-actions {
  flex-wrap: nowrap;
  margin: 0;
}

.payment-row-actions button {
  min-width: 58px;
  padding: 7px 10px;
}

.admin-payment-edit-card textarea {
  min-height: 92px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .schedule-table .slot.schedule-slot-tooltip::after {
    max-width: 210px;
  }

  .payment-row-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===== 2026-07-12 admin payment management redesign ===== */
.admin-payment-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-payment-status-toolbar,
.admin-payment-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.admin-payment-status-toolbar h3 {
  margin: 0;
}

.admin-payment-student-filter {
  width: min(360px, 100%);
  margin: 0;
}

.admin-payment-student-filter select {
  margin-top: 6px;
}

.admin-payment-stop-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

.admin-payment-status-scroll {
  max-height: 342px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-payment-status-scroll table {
  margin: 0;
}

.admin-payment-status-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f7f8fa;
}

.admin-payment-status-badge {
  min-width: 74px;
  border: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  box-shadow: none;
}

.admin-payment-status-badge:hover,
.admin-payment-status-badge:focus-visible {
  filter: brightness(.96);
  transform: translateY(-1px);
}

.admin-charge-date-button {
  appearance: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #155eef;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.admin-charge-date-button:hover,
.admin-charge-date-button:focus-visible {
  color: #0b4bc4;
}

.admin-charge-date-status {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #667085;
  white-space: nowrap;
}

.admin-charge-date-status.error-text {
  color: #b42318;
}

.admin-payment-result-badge {
  white-space: nowrap;
}

.admin-payment-entry-card {
  width: 100%;
}

@media (max-width: 760px) {
  .admin-payment-status-toolbar,
  .admin-payment-summary {
    flex-direction: column;
  }

  .admin-payment-student-filter {
    width: 100%;
  }

  .admin-payment-stop-actions,
  .admin-payment-stop-actions button {
    width: 100%;
  }

  .admin-payment-status-scroll {
    max-height: 330px;
  }
}

/* ===== 2026-07-13 smartphone splash screen and student bottom navigation ===== */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--primary);
  opacity: 1;
  visibility: visible;
  transition: opacity .22s ease, visibility .22s ease;
}

.splash-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-screen-inner {
  display: grid;
  justify-items: center;
  gap: 20px;
  width: min(280px, 80vw);
  text-align: center;
}

.splash-logo {
  display: block;
  width: min(148px, 42vw);
  height: auto;
  filter: brightness(0) invert(1);
}

.splash-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, .34);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: smaei-splash-spin .8s linear infinite;
}

.splash-screen p {
  margin: -6px 0 0;
  color: rgba(255, 255, 255, .92);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

@keyframes smaei-splash-spin {
  to { transform: rotate(360deg); }
}

body.app-booting {
  min-height: 100dvh;
  overflow: hidden !important;
  background: var(--primary);
}

body.app-booting #loginView,
body.app-booting #appView,
body.app-booting #studentBottomNav,
body.app-booting #studentMobileHub {
  display: none !important;
}

.student-bottom-nav,
.student-mobile-hub {
  display: none;
}

.student-mobile-section-anchor {
  scroll-margin-top: 78px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.student-mobile-nav-enabled {
    --student-bottom-nav-height: 72px;
  }

  body.student-mobile-nav-enabled .app {
    display: block !important;
    min-height: 100dvh;
  }

  body.student-mobile-nav-enabled .sidebar,
  body.student-mobile-nav-enabled .sidebar.open,
  body.student-mobile-nav-enabled #menuToggle,
  body.student-mobile-nav-enabled .menu-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }

  body.student-mobile-nav-enabled .main {
    width: 100% !important;
    max-width: none !important;
    padding-bottom: calc(var(--student-bottom-nav-height) + 22px + env(safe-area-inset-bottom)) !important;
  }

  body.student-mobile-nav-enabled .topbar {
    justify-content: center !important;
  }

  body.student-mobile-nav-enabled .topbar-logo {
    margin-inline: auto !important;
  }

  body.student-mobile-nav-enabled.menu-open::before,
  body.student-mobile-nav-enabled .sidebar.open::after {
    display: none !important;
    content: none !important;
  }

  body.student-mobile-nav-enabled .student-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: calc(var(--student-bottom-nav-height) + env(safe-area-inset-bottom));
    padding: 7px 5px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid #e4e7ec;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -8px 26px rgba(16, 24, 40, .11);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.student-mobile-nav-enabled .student-bottom-nav.hidden {
    display: none !important;
  }

  .student-bottom-nav-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    margin: 0;
    padding: 4px 2px;
    border-radius: 12px;
    background: transparent;
    color: #667085;
    box-shadow: none;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
  }

  .student-bottom-nav-button:hover,
  .student-bottom-nav-button:focus-visible {
    background: #fff1f2;
    color: var(--primary);
  }

  .student-bottom-nav-button.active {
    background: #fff1f2;
    color: var(--primary);
  }

  .student-bottom-nav-button .student-mobile-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
  }

  .student-mobile-hub {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: block;
    pointer-events: none;
  }

  .student-mobile-hub.hidden {
    display: none !important;
  }

  .student-mobile-hub-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(15, 23, 42, .48);
    opacity: 0;
    transition: opacity .2s ease;
  }

  .student-mobile-hub-backdrop:hover,
  .student-mobile-hub-backdrop:focus {
    background: rgba(15, 23, 42, .48);
  }

  .student-mobile-hub-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(76dvh, 690px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -18px 46px rgba(16, 24, 40, .2);
    transform: translateY(104%);
    transition: transform .22s ease;
  }

  .student-mobile-hub.open {
    pointer-events: auto;
  }

  .student-mobile-hub.open .student-mobile-hub-backdrop {
    opacity: 1;
  }

  .student-mobile-hub.open .student-mobile-hub-panel {
    transform: translateY(0);
  }

  .student-mobile-hub-handle {
    width: 42px;
    height: 5px;
    margin: 2px auto 10px;
    border-radius: 999px;
    background: #d0d5dd;
  }

  .student-mobile-hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

  .student-mobile-hub-header h3 {
    margin: 0;
    color: #101828;
    font-size: 21px;
  }

  .student-mobile-hub-close {
    display: grid;
    place-items: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 50%;
    background: #f2f4f7;
    color: #344054;
    font-size: 24px;
    line-height: 1;
  }

  .student-mobile-hub-close:hover,
  .student-mobile-hub-close:focus-visible {
    background: #e4e7ec;
    color: #101828;
  }

  .student-mobile-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .student-mobile-menu-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
    min-height: 112px;
    margin: 0;
    padding: 15px;
    border: 1px solid #e4e7ec;
    border-radius: 17px;
    background: #fff;
    color: #182033;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .06);
    text-align: left;
    line-height: 1.35;
  }

  .student-mobile-menu-card:hover,
  .student-mobile-menu-card:focus-visible {
    border-color: #f4a5ac;
    background: #fff7f8;
    color: var(--primary);
    transform: translateY(-1px);
  }

  .student-mobile-menu-card .student-mobile-icon {
    width: 29px;
    height: 29px;
    color: var(--primary);
  }

  .student-mobile-menu-card > span {
    font-size: 14px;
    font-weight: 900;
  }

  .student-mobile-menu-card > small {
    color: inherit;
    font-size: 11px;
    font-weight: 800;
    opacity: .78;
  }

  .student-mobile-menu-card.prominent {
    grid-column: 1 / -1;
    min-height: 104px;
    padding: 17px 18px;
    border-color: #ef9aa2;
    background: linear-gradient(135deg, #d1131f, #a90f19);
    color: #fff;
    box-shadow: 0 12px 24px rgba(209, 19, 31, .2);
  }

  .student-mobile-menu-card.prominent:hover,
  .student-mobile-menu-card.prominent:focus-visible {
    border-color: #a90f19;
    background: linear-gradient(135deg, #c2111d, #97101a);
    color: #fff;
  }

  .student-mobile-menu-card.prominent .student-mobile-icon {
    width: 34px;
    height: 34px;
    color: #fff;
  }

  .student-mobile-menu-card.prominent > span {
    font-size: 17px;
  }

  .student-mobile-menu-card.danger {
    border-color: #fecdca;
    background: #fef3f2;
    color: #b42318;
  }

  .student-mobile-menu-card.danger .student-mobile-icon {
    color: #b42318;
  }

  body.student-mobile-menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  body.student-mobile-menu-open .student-mobile-hub-panel {
    touch-action: pan-y;
  }
}

@media (max-width: 370px) {
  .student-bottom-nav-button {
    font-size: 9.5px;
  }

  .student-bottom-nav-button .student-mobile-icon {
    width: 21px;
    height: 21px;
  }

  .student-mobile-menu-card {
    min-height: 104px;
    padding: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-screen,
  .student-mobile-hub-backdrop,
  .student-mobile-hub-panel,
  .student-mobile-menu-card {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== 2026-07-13 mobile bottom navigation position/size/loading refinement ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.student-mobile-nav-enabled {
    --student-bottom-nav-height: 78px;
  }

  body.student-mobile-nav-enabled .student-bottom-nav {
    
    
    width: 100% !important;
    
    
    transform: translate3d(0, 0, 0) !important;
    will-change: transform;
    isolation: isolate;
  }

  .student-bottom-nav-button {
    min-height: 60px;
    font-size: 11.5px;
    gap: 4px;
    padding: 5px 2px;
    position: relative;
    top: 3px;
  }

  .student-bottom-nav-button .student-mobile-icon {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }

  body.student-mobile-nav-enabled .soft-page-activity {
    bottom: calc(var(--student-bottom-nav-height) + 14px + env(safe-area-inset-bottom, 0px));
    z-index: 1900;
    padding: 11px 15px;
    color: #344054;
    font-size: 13px;
    font-weight: 800;
  }

  /* 固定ヘッダーと各ページの先頭コンテンツの間に約8pxの余白を追加 */
  body.app-mode .main {
    padding-top: calc(66px + env(safe-area-inset-top)) !important;
  }
}

@media (max-width: 370px) {
  .student-bottom-nav-button {
    font-size: 10.5px;
  }

  .student-bottom-nav-button .student-mobile-icon {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
  }
}


/* ===== 2026-07-13 mobile menu visibility and square page categories ===== */
/* 各ページの最上位カテゴリ枠は、PC・スマートフォンとも直角に統一 */
.card {
  border-radius: 0 !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.student-mobile-nav-enabled .student-bottom-nav {
    z-index: 1950;
    padding: 9px 5px calc(3px + env(safe-area-inset-bottom));
    align-items: end;
    touch-action: manipulation;
  }

  /* メニューを開いても下部ナビゲーションを覆わない */
  .student-mobile-hub {
    z-index: 1850;
  }

  .student-mobile-hub-backdrop {
    bottom: calc(var(--student-bottom-nav-height) + env(safe-area-inset-bottom));
    height: auto;
  }

  .student-mobile-hub-panel {
    bottom: calc(var(--student-bottom-nav-height) + env(safe-area-inset-bottom));
    max-height: min(calc(76dvh - var(--student-bottom-nav-height)), 690px);
    padding-bottom: 20px;
  }

  body.student-mobile-nav-enabled .soft-page-activity {
    z-index: 2050;
  }
}


/* ===== 2026-07-13 mobile bottom navigation spacing / active-state correction ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  

  body.student-mobile-nav-enabled .student-bottom-nav {
    height: calc(var(--student-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--student-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
    padding: 4px 5px calc(2px + env(safe-area-inset-bottom)) !important;
    
  }

  .student-bottom-nav-button {
    
    
    top: 0;
    align-self: center;
  }

  /* タッチ端末では :hover が残ることがあるため、選択色は active のみに限定 */
  @media (hover: none), (pointer: coarse) {
    .student-bottom-nav-button:hover:not(.active),
    .student-bottom-nav-button:focus:not(.active) {
      background: transparent;
      color: #667085;
    }
  }
}


/* ===== 2026-07-13 mobile page/nav spacing, neutral active state, modal clearance ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /* 固定ヘッダーの下からページ先頭までを約8pxに統一 */
  body.app-mode .main {
    padding-top: calc(60px + env(safe-area-inset-top)) !important;
  }

  /* 下部ボタン配列の上側余白を約8pxにする */
  body.student-mobile-nav-enabled {
    --student-bottom-nav-height: 68px;
  }

  body.student-mobile-nav-enabled .student-bottom-nav {
    padding: 8px 5px calc(2px + env(safe-area-inset-bottom)) !important;
    
  }

  .student-bottom-nav-button {
    min-height: 58px;
    padding: 3px 2px 2px;
    background: transparent !important;
  }

  /* 選択中・ホバー・フォーカス時も背景色は付けない */
  .student-bottom-nav-button:hover,
  .student-bottom-nav-button:focus,
  .student-bottom-nav-button:focus-visible,
  .student-bottom-nav-button.active {
    background: transparent !important;
  }

  .student-bottom-nav-button.active {
    color: var(--primary) !important;
  }

  .student-bottom-nav-button:not(.active) {
    color: #667085 !important;
  }

  /* 別ウィンドウを下部ナビゲーションより前面に出し、操作部が隠れないようにする */
  

  

  
}

/* ===== 2026-07-13 mobile menu / tap feedback consolidated refinement ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  :root {
    --primary: #C8161D;
    --primary-dark: #A50F15;
    --primary-soft: #FFF0F1;
  }

  /* ヘッダー下の余白を追加した状態に保つ */
  body.app-mode .main {
    padding-top: calc(68px + env(safe-area-inset-top)) !important;
  }

  /* 下部メニュー上側の余白を抑える */
  body.student-mobile-nav-enabled .student-bottom-nav {
    padding: 0 5px calc(2px + env(safe-area-inset-bottom)) !important;
    align-items: center !important;
  }

  /* ブラウザ標準のタップ時背景を無効化 */
  body.student-mobile-nav-enabled .student-bottom-nav,
  body.student-mobile-nav-enabled .student-bottom-nav-button,
  body.student-mobile-nav-enabled .student-bottom-nav-button * {
    -webkit-tap-highlight-color: transparent !important;
  }

  body.student-mobile-nav-enabled .student-bottom-nav-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: 58px;
    padding: 3px 2px 2px;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    touch-action: manipulation;
  }

  body.student-mobile-nav-enabled .student-bottom-nav-button:hover,
  body.student-mobile-nav-enabled .student-bottom-nav-button:focus,
  body.student-mobile-nav-enabled .student-bottom-nav-button:focus-visible,
  body.student-mobile-nav-enabled .student-bottom-nav-button:active,
  body.student-mobile-nav-enabled .student-bottom-nav-button.active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
  }

  body.student-mobile-nav-enabled .student-bottom-nav-button::-moz-focus-inner {
    border: 0;
  }

  body.student-mobile-nav-enabled .student-bottom-nav-button.active {
    color: var(--primary) !important;
  }

  body.student-mobile-nav-enabled .student-bottom-nav-button:not(.active) {
    color: #667085 !important;
  }

  /* メニュー内カードは赤い縁取り・直角・通常文字 */
  body.student-mobile-nav-enabled .student-mobile-menu-card {
    min-height: 104px;
    padding: 12px;
    gap: 7px;
    border: 1px solid var(--primary) !important;
    border-radius: 0 !important;
    background: #fff;
    color: #344054;
  }

  body.student-mobile-nav-enabled .student-mobile-menu-card.prominent {
    min-height: 96px;
    padding: 14px 15px;
    border-color: var(--primary) !important;
    border-radius: 0 !important;
  }

  body.student-mobile-nav-enabled .student-mobile-menu-card:not(.prominent):not(.danger) .student-mobile-icon {
    color: var(--primary);
  }

  body.student-mobile-nav-enabled .student-mobile-menu-card:not(.prominent):not(.danger):hover,
  body.student-mobile-nav-enabled .student-mobile-menu-card:not(.prominent):not(.danger):focus,
  body.student-mobile-nav-enabled .student-mobile-menu-card:not(.prominent):not(.danger):focus-visible,
  body.student-mobile-nav-enabled .student-mobile-menu-card:not(.prominent):not(.danger):active {
    border-color: var(--primary) !important;
    background: #fff7f8;
    color: var(--primary);
  }

  body.student-mobile-nav-enabled .student-mobile-menu-card > span,
  body.student-mobile-nav-enabled .student-mobile-menu-card > small,
  body.student-mobile-nav-enabled .student-mobile-menu-card.prominent > span,
  body.student-mobile-nav-enabled .student-mobile-menu-grid.three-columns .student-mobile-menu-card > span {
    font-weight: 400 !important;
  }

  body.student-mobile-nav-enabled .student-mobile-menu-grid.three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.student-mobile-nav-enabled .student-mobile-menu-grid.three-columns .student-mobile-menu-card {
    min-height: 96px;
    padding: 10px 8px;
    align-items: center;
    text-align: center;
  }

  body.student-mobile-nav-enabled .student-mobile-menu-grid.three-columns .student-mobile-menu-card > span {
    font-size: clamp(12px, 3.15vw, 13px);
    line-height: 1.25;
    white-space: nowrap;
  }

  body.student-mobile-nav-enabled .student-mobile-menu-grid.three-columns .student-mobile-menu-card .student-mobile-icon {
    width: 27px;
    height: 27px;
  }

  /* 補助ボタン・リンクは従来の赤系に統一 */
  body.student-mobile-nav-enabled button.secondary {
    border: 0;
    background: var(--primary-soft);
    color: var(--primary);
  }

  body.student-mobile-nav-enabled button.secondary:hover,
  body.student-mobile-nav-enabled button.secondary:focus-visible {
    background: var(--primary-soft);
    color: var(--primary);
  }

  body.student-mobile-nav-enabled button.ghost,
  body.student-mobile-nav-enabled a:not(.student-mobile-menu-card) {
    color: var(--primary);
  }

  /* 別ウィンドウを下部ナビゲーションより前面に表示 */
  body.modal-open .booking-modal-backdrop,
  .booking-modal-backdrop {
    z-index: 3000 !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }

  body.modal-open .booking-modal,
  .booking-modal {
    z-index: 3001 !important;
    max-height: calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: 24px;
  }

  body.modal-open.student-mobile-nav-enabled .student-bottom-nav {
    pointer-events: none !important;
  }
}

@media (max-width: 350px) {
  body.student-mobile-nav-enabled .student-mobile-menu-grid.three-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.student-mobile-nav-enabled .student-mobile-menu-grid.three-columns .student-mobile-menu-card > span {
    white-space: normal;
  }
}

/* ===== 課題学習：月・教材・Week・Day表示 ===== */
.study-month-selector-card,
.study-material-selector-card,
.study-confirmed-summary,
.study-theme-preview {
  margin-bottom: 16px;
}

.study-month-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.study-month-badge {
  min-width: 88px;
  padding: 9px 14px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #fff;
  color: #475467;
  font-weight: 600;
}

.study-month-badge.paid {
  border-color: #f4a5ac;
  color: var(--primary);
}

.study-month-badge.unpaid {
  background: #f9fafb;
  color: #98a2b3;
}

.study-month-badge.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.study-unpaid-message {
  margin-top: 16px;
}

.study-material-selectors {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  margin-bottom: 20px;
}

.study-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.study-theme-card {
  min-height: 70px;
  padding: 12px;
  border: 1px solid #d0d5dd;
  border-radius: 0;
  background: #fff;
  color: #344054;
  text-align: left;
  font-weight: 400;
}

.study-theme-card:hover,
.study-theme-card:focus-visible,
.study-theme-card.active {
  border-color: var(--primary);
  background: #fff7f8;
  color: var(--primary);
}

.study-theme-week-list {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 14px 0;
  overflow: visible;
}

.study-theme-week-row {
  position: relative;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #fff;
}

button.study-theme-week-row,
.study-theme-week-row[data-study-trial-row] {
  width: 100%;
  margin: 0;
  border-radius: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  appearance: none;
}

.study-theme-week-row.has-trial-reading {
  grid-template-columns: 90px minmax(0, 1fr);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.study-theme-week-row.has-trial-reading:hover,
.study-theme-week-row.has-trial-reading:focus-visible,
.study-theme-week-row.has-trial-reading.is-open {
  z-index: 30;
  border-color: #98a2b3;
  background: #f9fafb;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .06);
}

.study-theme-week-row.has-trial-reading:focus-visible {
  outline: 2px solid rgba(71, 84, 103, .22);
  outline-offset: 2px;
}

.study-theme-week-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.study-theme-trial-tooltip {
  position: absolute;
  top: auto;
  bottom: calc(100% + 9px);
  left: 102px;
  z-index: 40;
  display: block;
  width: min(680px, calc(100% - 114px));
  padding: 14px 16px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  color: #344054;
  box-shadow: 0 14px 34px rgba(16, 24, 40, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .14s ease, visibility .14s ease, transform .14s ease;
  white-space: normal;
  touch-action: pan-y;
}

.study-theme-trial-tooltip::before {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 28px;
  width: 12px;
  height: 12px;
  border-right: 1px solid #d0d5dd;
  border-bottom: 1px solid #d0d5dd;
  background: #fff;
  transform: rotate(45deg);
}

.study-theme-week-row.has-trial-reading:hover .study-theme-trial-tooltip,
.study-theme-week-row.has-trial-reading:focus-visible .study-theme-trial-tooltip,
.study-theme-week-row.has-trial-reading.is-open .study-theme-trial-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.study-theme-trial-tooltip-heading,
.study-theme-trial-tooltip-body,
.study-theme-trial-tooltip-guide {
  display: block;
}

.study-theme-trial-tooltip-heading {
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  color: #101828;
  font-size: 14px;
  font-weight: 800;
}

.study-theme-trial-tooltip-body {
  max-height: 250px;
  padding-right: 6px;
  overflow-y: auto;
  color: #344054;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.study-theme-trial-tooltip-guide {
  margin-top: 9px;
  color: #667085;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
}

.study-theme-trial-empty {
  color: #667085;
}

.study-selection-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.study-selection-summary > span {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.study-week-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  overflow-x: auto;
}

.study-week-tab {
  flex: 1 0 110px;
  border: 1px solid #d0d5dd;
  border-radius: 0;
  background: #fff;
  color: #475467;
}

.study-week-tab.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.study-day-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.study-day-card {
  border-radius: 0 !important;
}

.study-day-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.study-day-card-head h3 {
  margin: 0;
}

.study-day-card-head span {
  color: #667085;
  font-size: 13px;
}

.study-progress-track {
  width: 100%;
  height: 12px;
  margin: 12px 0 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eaecf0;
}

.study-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width .2s ease;
}

.compact-actions {
  gap: 6px;
  margin-top: 0;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-material-selectors,
  .study-selection-summary,
  .study-day-grid {
    grid-template-columns: 1fr;
  }

  .study-theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .study-month-badge {
    min-width: 0;
    flex: 1 1 calc(25% - 8px);
  }

  .study-theme-week-row {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .study-theme-week-row.has-trial-reading {
    grid-template-columns: 64px minmax(0, 1fr);
  }


  .study-theme-trial-tooltip {
    left: 8px;
    width: calc(100% - 16px);
    padding: 13px 14px 11px;
  }

  .study-theme-trial-tooltip::before {
    left: 28px;
  }

  .study-theme-trial-tooltip-body {
    max-height: 230px;
    font-size: 13px;
  }
}

/* ===== 2026-07-13 実践コース Day1〜Day6 統合学習画面 ===== */
.practical-study-shell {
  display: grid;
  gap: 16px;
}

.practical-sticky-article {
  position: sticky;
  top: 78px;
  z-index: 26;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(16, 24, 40, .10);
  padding: 16px;
}

.practical-sticky-article h2 {
  margin: 8px 0 10px;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
}

.practical-study-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.practical-study-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #f0a1a6;
  background: #fff6f7;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.practical-article-scroll {
  max-height: min(34vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 8px 0;
  border-radius: 0;
}

.practical-vocab-guide {
  margin: 6px 0 10px;
}

.study-vocabulary-highlight {
  display: inline;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 2px;
  background: #fff2a8;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: inherit;
  text-decoration: underline dotted #9a6700;
  text-underline-offset: 2px;
  cursor: pointer;
}

.study-vocabulary-highlight:hover,
.study-vocabulary-highlight:focus-visible {
  background: #ffe46b;
  color: #3b2f00;
  outline: 2px solid #d9a300;
  outline-offset: 1px;
}

.practical-audio-player {
  display: grid;
  grid-template-columns: auto auto minmax(120px, 1fr) auto auto minmax(130px, auto);
  
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  background: #f9fafb;
}

.practical-audio-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  font-size: 15px;
}

.practical-audio-time {
  min-width: 38px;
  color: #475467;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  text-align: center;
}

.practical-audio-seek{
  min-height: 28px;
  padding: 0;
}

.practical-audio-control{
  display: flex;
  
  gap: 6px;
  margin: 0;
  
}

.practical-audio-control select {
  width: auto;
  min-height: 34px;
  padding: 5px 8px;
}



.practical-audio-missing {
  padding: 8px 10px;
  border: 1px dashed #d0d5dd;
  background: #f9fafb;
}

.practical-study-workspace {
  
  gap: 14px;
}

.practical-page-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.practical-page-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border: 1px solid #d0d5dd;
  border-radius: 0;
  background: #fff;
  color: #475467;
}

.practical-page-tabs button small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 3px 7px;
  background: #f2f4f7;
  color: #667085;
  font-size: 11px;
}

.practical-page-tabs button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.practical-page-tabs button.active small {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

.practical-stage-list {
  display: grid;
  gap: 14px;
}

.practical-stage-card {
  border-radius: 0 !important;
  box-shadow: none;
}

.practical-stage-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
}

.practical-stage-heading > span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
}

.practical-stage-heading h3 {
  margin: 0;
}

.practical-stage-point {
  margin: 12px 0;
  padding: 11px 13px;
  border-left: 4px solid var(--primary);
  background: #fff7f8;
}

.practical-stage-point b {
  color: var(--primary);
}

.practical-stage-point p {
  margin: 5px 0 0;
  line-height: 1.65;
}

.practical-task-list {
  display: grid;
  gap: 12px;
}

.practical-task-item {
  padding: 14px;
  border: 1px solid var(--line);
  background: #fff;
}

.practical-task-prompt {
  margin-bottom: 10px;
}

.practical-task-prompt p {
  margin: 8px 0;
  line-height: 1.65;
}

.required-mark{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 7px;
  margin-right: 6px;
  background: #f2f4f7;
  color: #475467;
  font-size: 11px;
  font-weight: 700;
}

.required-mark {
  background: #fff1f2;
  color: var(--primary);
}

.practical-checkbox-options,
.practical-choice-options {
  display: grid;
  gap: 8px;
}

.practical-checkbox-options label,
.practical-choice-options label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 10px;
  border: 1px solid #e4e7ec;
  background: #f9fafb;
  font-weight: 500;
}

.practical-checkbox-options input,
.practical-choice-options input {
  width: auto;
  min-height: 0;
  margin-top: 3px;
}

.practical-recording-answer {
  display: grid;
  gap: 8px;
}

.practical-recording-answer audio,
.practical-file-answer audio {
  width: 100%;
}

.practical-record-button {
  justify-self: start;
}

.practical-record-button.recording {
  background: #b42318;
  color: #fff;
  animation: practical-record-pulse 1.2s ease-in-out infinite;
}

@keyframes practical-record-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, .25); }
  50% { box-shadow: 0 0 0 8px rgba(180, 35, 24, 0); }
}

.practical-recording-timer {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #344054;
}

.practical-recording-status,
.practical-save-status {
  color: #667085;
  font-size: 12px;
}

.practical-save-status {
  min-height: 22px;
  padding: 4px 0;
  text-align: right;
}

.practical-save-status.saving { color: #b54708; }
.practical-save-status.saved { color: #067647; }
.practical-save-status.error { color: #b42318; }

.practical-study-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.practical-submit-button {
  min-width: 160px;
}

.practical-submit-warning,
.warning-text {
  color: #b54708;
  font-size: 13px;
}

.practical-submitted-notice {
  border-left: 4px solid #067647;
}

.study-vocabulary-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 24, 40, .56);
}

.study-vocabulary-modal {
  width: min(620px, 100%);
  max-height: min(84vh, 720px);
  overflow-y: auto;
  border-radius: 0 !important;
}

.study-vocabulary-details {
  display: grid;
  gap: 0;
  margin: 0;
}

.study-vocabulary-details > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  border-top: 1px solid var(--line);
}

.study-vocabulary-details dt,
.study-vocabulary-details dd {
  margin: 0;
  padding: 12px;
}

.study-vocabulary-details dt {
  background: #f9fafb;
  font-weight: 700;
}

.vocab-audio-button {
  display: block;
  margin-top: 10px;
}

.study-vocab-translation {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  background: #f9fafb;
}

/* 管理者：統合教材登録 */
.admin-material-editor-card,
.admin-material-list-card {
  border-radius: 0 !important;
}

.admin-material-list-card {
  margin-top: 18px;
}

.admin-material-list-filter-toolbar {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--line);
  background: #f8fafc;
}

.admin-material-list-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.admin-material-list-filter-grid label {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.admin-material-list-filter-grid select {
  width: 100%;
  min-width: 0;
  background: #fff;
  color: var(--text);
}

.admin-material-list-filter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-material-list-filter-footer button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 14px;
}

@media (max-width: 980px) {
  .admin-material-list-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .admin-material-list-filter-grid {
    grid-template-columns: 1fr;
  }

  .admin-material-list-filter-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-material-list-filter-footer button {
    width: 100%;
  }
}

.admin-material-editor-title,
.admin-material-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-material-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.admin-material-section:first-of-type {
  margin-top: 10px;
}

.admin-material-section h3,
.admin-material-section h4 {
  margin-top: 0;
}

.admin-material-field-grid {
  gap: 12px;
}

.admin-article-html-input {
  min-height: 260px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.admin-material-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.admin-material-upload-row input {
  max-width: 380px;
}

.admin-vocabulary-list,
.admin-material-pages,
.admin-material-task-list {
  display: grid;
  gap: 12px;
}

.admin-vocabulary-card,
.admin-material-stage-card,
.admin-material-task-card {
  padding: 14px;
  border: 1px solid var(--line);
  background: #fff;
}

.admin-vocabulary-card {
  border-left: 4px solid #f0a1a6;
}

.admin-material-page {
  border: 1px solid #d0d5dd;
  background: #f9fafb;
}

.admin-material-page > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  background: #fff;
  color: #344054;
  cursor: pointer;
  font-weight: 800;
}

.admin-material-page > summary small {
  color: #667085;
  font-weight: 500;
}

.admin-material-page-body {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.admin-material-stage-card {
  border-left: 4px solid var(--primary);
}

.admin-stage-number {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
}

.admin-material-task-card {
  background: #f9fafb;
}





.small-button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}

.admin-material-table-wrap {
  max-height: 560px;
  overflow: auto;
}

.admin-material-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .practical-sticky-article {
    top: calc(64px + env(safe-area-inset-top));
    padding: 12px;
  }

  .practical-article-scroll {
    max-height: 29vh;
  }

  .practical-audio-player {
    grid-template-columns: auto auto minmax(80px, 1fr) auto;
  }

  .practical-audio-control{
    grid-column: span 2;
  }

  

  .practical-page-tabs button {
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px;
    font-size: 12px;
  }

  .practical-task-item,
  .practical-stage-card {
    padding: 12px;
  }

  .practical-study-actions button {
    flex: 1 1 140px;
  }

  .study-vocabulary-modal-backdrop {
    align-items: end;
    padding: 12px 12px calc(var(--student-bottom-nav-height, 0px) + 16px + env(safe-area-inset-bottom));
  }

  .study-vocabulary-modal {
    max-height: 78vh;
  }

  .study-vocabulary-details > div {
    grid-template-columns: 1fr;
  }

  .study-vocabulary-details dt {
    padding-bottom: 5px;
  }

  .study-vocabulary-details dd {
    padding-top: 5px;
  }

  .admin-material-field-grid.grid.two,
  .admin-material-field-grid.grid.three {
    grid-template-columns: 1fr;
  }

  .admin-material-upload-row,
  .admin-material-editor-title,
  .admin-material-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-material-upload-row input {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .practical-sticky-article h2 {
    font-size: 19px;
  }

  .practical-article-scroll {
    max-height: 26vh;
    padding: 10px;
  }

  .practical-audio-player {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 5px;
    padding: 8px;
  }

  .practical-audio-time {
    min-width: 34px;
  }

  .practical-audio-control{
    grid-column: 1 / -1;
  }

  .practical-page-tabs {
    gap: 4px;
  }

  .practical-page-tabs button span {
    line-height: 1.2;
  }
}

/* ===== 2026-07-13 課題学習スマホ表示・固定ナビゲーション最終調整 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /* アドレスバーの伸縮やスワイプ時も、下部ナビゲーションを視覚上の画面下端へ固定 */
  body.student-mobile-nav-enabled .student-bottom-nav {
    
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: var(--student-visual-bottom-offset, 0px) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: layout paint;
    will-change: bottom;
  }

  body.student-mobile-nav-enabled {
    overscroll-behavior-y: none;
  }

  /* 課題学習画面では、ヘッダー直下の余白を小さくする */
  body.practical-study-active.app-mode .main {
    padding-top: calc(58px + env(safe-area-inset-top)) !important;
  }

  body.practical-study-active #content {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .practical-study-shell {
    gap: 9px;
  }

  /* 記事は課題をスクロールしている間も常に上部へ固定 */
  .practical-sticky-article {
    position: sticky !important;
    top: max(0px, calc(52px + env(safe-area-inset-top) - var(--mobile-header-offset, 0px))) !important;
    z-index: 120 !important;
    display: flex;
    flex-direction: column;
    align-self: start;
    width: 100%;
    max-height: min(47dvh, 410px);
    padding: 10px !important;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .10);
  }

  .practical-article-topline {
    display: flex;
    
    justify-content: space-between;
    gap: 8px;
  }

  .practical-article-topline > div {
    min-width: 0;
    flex: 1 1 auto;
  }

  .practical-sticky-article h2 {
    margin: 5px 0 7px !important;
    font-size: 18px !important;
    line-height: 1.3;
  }

  .practical-study-badges {
    gap: 4px;
  }

  .practical-study-badges span {
    min-height: 23px;
    padding: 2px 7px;
    font-size: 10.5px;
  }

  .practical-article-fullscreen-button {
    flex: 0 0 auto;
    min-height: 31px;
    padding: 5px 8px;
    font-size: 11px;
    white-space: nowrap;
  }

  .practical-article-scroll {
    flex: 1 1 auto;
    min-height: 88px;
    max-height: none !important;
    margin: 3px 0 6px;
    padding: 8px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    line-height: 1.62;
    background: #fff;
  }

  .practical-vocab-guide {
    margin: 2px 0 5px;
    font-size: 10.5px;
  }

  .practical-audio-player {
    grid-template-columns: 38px 34px minmax(0, 1fr) 34px !important;
    
    padding: 6px !important;
  }

  .practical-audio-play {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .practical-audio-time {
    min-width: 30px !important;
    font-size: 10.5px;
  }

  .practical-audio-control{
    grid-column: span 2 !important;
    
    font-size: 11px;
  }

  .practical-audio-control select {
    min-height: 31px;
    padding: 3px 6px;
  }

  .practical-audio-seek{
    touch-action: pan-x;
    -webkit-user-select: none;
    user-select: none;
  }

  

  /* 全画面表示時は下部ナビゲーションを含めて記事を最前面へ表示 */
  body.practical-article-fullscreen-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .practical-sticky-article.is-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3300 !important;
    
    height: 100dvh !important;
    max-height: none !important;
    padding: calc(10px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff;
  }

  .practical-sticky-article.is-fullscreen .practical-article-scroll {
    min-height: 0;
    flex: 1 1 auto;
    font-size: 15px;
  }

  .practical-sticky-article.is-fullscreen .practical-audio-player {
    flex: 0 0 auto;
  }

  body.practical-article-fullscreen-open .student-bottom-nav {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* スマホ向け課題部分をコンパクトに整理 */
  .practical-study-workspace {
    gap: 9px;
  }

  .practical-page-tabs {
    gap: 3px;
  }

  .practical-page-tabs button {
    min-height: 45px;
    padding: 6px 3px !important;
    font-size: 11px !important;
  }

  .practical-page-tabs button small {
    min-width: 34px;
    padding: 2px 5px;
    font-size: 9.5px;
  }

  .practical-stage-list {
    gap: 9px;
  }

  .practical-stage-card {
    padding: 10px !important;
  }

  .practical-stage-heading {
    gap: 8px;
    padding-bottom: 7px;
  }

  .practical-stage-heading h3 {
    font-size: 16px;
  }

  .practical-stage-point {
    margin: 8px 0;
    padding: 8px 10px;
  }

  .practical-task-list {
    gap: 8px;
  }

  .practical-task-item {
    padding: 10px !important;
  }

  .practical-task-prompt {
    margin-bottom: 7px;
  }

  .practical-task-prompt p {
    margin: 0 0 7px;
    line-height: 1.55;
  }

  .practical-task-item textarea {
    min-height: 112px;
  }

  .practical-checkbox-options label,
  .practical-choice-options label {
    padding: 8px;
  }

  .practical-study-actions {
    display: grid;
    gap: 7px;
    justify-items: stretch;
  }

  .practical-study-page-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .practical-study-page-actions > button:only-child {
    grid-column: 1 / -1;
  }

  .practical-study-page-actions button {
    width: 100%;
    min-height: 42px;
  }

  .practical-study-back-button {
    justify-self: center;
    width: auto !important;
    min-height: 30px !important;
    padding: 4px 10px !important;
    border: 0 !important;
    background: transparent !important;
    color: #667085 !important;
    font-size: 11px !important;
    text-decoration: underline;
    box-shadow: none !important;
  }

  .practical-save-status {
    padding: 1px 0;
  }
}

@media (min-width: 821px) {
  .practical-article-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
  }

  .practical-article-topline > div {
    min-width: 0;
  }

  .practical-article-fullscreen-button {
    flex: 0 0 auto;
  }

  .practical-sticky-article.is-fullscreen {
    position: fixed !important;
    inset: 18px !important;
    z-index: 3300 !important;
    display: flex;
    flex-direction: column;
    
    max-height: none !important;
    padding: 18px !important;
    background: #fff;
  }

  .practical-sticky-article.is-fullscreen .practical-article-scroll {
    flex: 1 1 auto;
    max-height: none !important;
  }

  body.practical-article-fullscreen-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 3290;
    background: rgba(16, 24, 40, .58);
  }

  .practical-study-actions {
    display: grid;
    gap: 8px;
    justify-items: end;
  }

  .practical-study-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }

  .practical-study-back-button {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* ===== 2026-07-13 下部ナビゲーション・課題学習画面の固定表示 最終調整 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /* window 自体をスクロールさせず、main 内だけをスクロールさせることで
     下方向への引っ張り操作でも下部メニューを画面下端に固定する */
  html {
    height: 100%;
    overscroll-behavior: none;
  }

  body.student-mobile-nav-enabled {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.student-mobile-nav-enabled .app {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.student-mobile-nav-enabled .main {
    height: 100%;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.student-mobile-nav-enabled .student-bottom-nav {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    bottom: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
    contain: layout paint style;
  }

  /* 「学習」メニュー：すべて2列で中央揃え */
  body.student-mobile-nav-enabled .student-mobile-menu-grid.learning-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  body.student-mobile-nav-enabled .student-mobile-menu-grid.learning-layout .student-mobile-menu-card {
    grid-column: auto;
    min-height: 94px;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body.student-mobile-nav-enabled .student-mobile-menu-grid.learning-layout .student-mobile-menu-card.prominent {
    grid-column: auto;
    min-height: 112px;
    padding: 12px 8px;
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    color: #fff !important;
  }

  body.student-mobile-nav-enabled .student-mobile-menu-grid.learning-layout .student-mobile-menu-card.prominent:hover,
  body.student-mobile-nav-enabled .student-mobile-menu-grid.learning-layout .student-mobile-menu-card.prominent:focus,
  body.student-mobile-nav-enabled .student-mobile-menu-grid.learning-layout .student-mobile-menu-card.prominent:active {
    background: var(--primary) !important;
    color: #fff !important;
  }

  body.student-mobile-nav-enabled .student-mobile-menu-grid.learning-layout .student-mobile-menu-card.prominent .student-mobile-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    color: #fff !important;
  }

  body.student-mobile-nav-enabled .student-mobile-menu-grid.learning-layout .student-mobile-menu-card.prominent .student-mobile-menu-card-label {
    color: #fff !important;
    font-size: 16px;
    font-weight: 800 !important;
    line-height: 1.2;
  }

  body.student-mobile-nav-enabled .student-mobile-menu-grid.learning-layout .student-mobile-menu-card.prominent .student-mobile-menu-card-subtitle {
    color: #fff !important;
    font-size: 12px;
    font-weight: 400 !important;
    line-height: 1.2;
  }

  body.student-mobile-nav-enabled .student-mobile-menu-grid.learning-layout .student-mobile-menu-card:not(.prominent) .student-mobile-menu-card-label {
    font-weight: 400 !important;
    text-align: center;
  }
}

/* 記事と課題領域を別々に動かし、記事は常時表示する */
body.practical-study-active .main {
  display: flex !important;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  overflow: hidden !important;
}

body.practical-study-active .topbar {
  flex: 0 0 auto;
}

body.practical-study-active #content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden !important;
}

.practical-study-shell {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 8px !important;
  overflow: hidden;
}

.practical-study-top-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  min-height: 28px;
}

.practical-study-top-actions .practical-study-back-button {
  width: auto !important;
  min-height: 28px !important;
  margin: 0;
  padding: 3px 9px !important;
  font-size: 11px !important;
  box-shadow: none !important;
}

.practical-sticky-article:not(.is-fullscreen) {
  position: relative !important;
  top: auto !important;
  z-index: 26;
  display: flex;
  flex: 0 0 clamp(240px, 42dvh, 430px);
  flex-direction: column;
  min-height: 0;
  max-height: none !important;
  overflow: hidden;
}

.practical-sticky-article:not(.is-fullscreen) .practical-article-scroll {
  flex: 1 1 auto;
  min-height: 72px;
  max-height: none !important;
  overflow-y: auto !important;
}

.practical-study-workspace {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 4px 16px 0;
  scroll-behavior: smooth;
}

/* STAGE番号は通常本文と同程度の大きさで太字にする */
.practical-stage-heading > span {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* 前へは左、次へ／提出は右 */


.practical-prev-button {
  grid-column: 1;
  justify-self: start;
}

.practical-next-button,
.practical-submit-button {
  grid-column: 2;
  justify-self: end;
}

.practical-page-action-spacer {
  grid-column: 1;
}

.practical-study-page-actions .practical-prev-button,
.practical-study-page-actions .practical-next-button,
.practical-study-page-actions .practical-submit-button {
  width: auto !important;
  min-width: 132px;
}

/* 未入力課題の確認ウィンドウ */
.practical-incomplete-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3600;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 24, 40, .58);
}

.practical-incomplete-modal {
  width: min(680px, 100%);
  max-height: min(82dvh, 720px);
  overflow-y: auto;
  background: #fff;
}

.practical-incomplete-task-list {
  display: grid;
  gap: 8px;
  max-height: 42dvh;
  margin: 12px 0;
  overflow-y: auto;
}

.practical-incomplete-task-link {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #f0a1a6;
  border-radius: 0;
  background: #fff;
  color: #344054;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

.practical-incomplete-task-link:hover,
.practical-incomplete-task-link:focus-visible {
  background: #fff6f7;
  color: var(--primary);
}

.practical-incomplete-modal-actions {
  justify-content: flex-end;
}

.practical-task-attention {
  animation: practical-task-attention 1.8s ease;
}

@keyframes practical-task-attention {
  0%, 100% { box-shadow: none; }
  20%, 70% { box-shadow: 0 0 0 3px rgba(200, 22, 29, .28); }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.practical-study-active .main {
    height: 100%;
  }

  .practical-sticky-article:not(.is-fullscreen) {
    flex-basis: clamp(220px, 43dvh, 380px);
    padding: 9px !important;
  }

  .practical-study-workspace {
    padding-right: 2px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .practical-study-top-actions {
    min-height: 25px;
  }

  .practical-study-page-actions .practical-prev-button,
  .practical-study-page-actions .practical-next-button,
  .practical-study-page-actions .practical-submit-button {
    min-width: 118px;
  }

  .practical-incomplete-modal-backdrop {
    align-items: end;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  }

  .practical-incomplete-modal {
    max-height: 86dvh;
  }

  .practical-incomplete-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .practical-incomplete-modal-actions button {
    width: 100%;
  }
}

/* ===== 2026-07-13 課題予定・音声プレイヤー・学習状況表示 ===== */
.study-day-title-row {
  
  
  
  gap: 7px;
  
}

.study-today-task-label {
  
  
  
  padding: 3px 8px;
  border: 1px solid var(--primary);
  background: #fff4f5;
  color: var(--primary) !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.study-day-card.today-task {
  border-color: var(--primary) !important;
  box-shadow: inset 4px 0 0 var(--primary);
}

.study-day-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.study-day-status-badge {
  
  
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid #d0d5dd;
  background: #f2f4f7;
  color: #475467;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.study-day-status-badge.learning {
  border-color: #f5c06c;
  background: #fff7e8;
  color: #9a5b00;
}

.study-day-status-badge.submitted {
  border-color: #84adff;
  background: #eef4ff;
  color: #175cd3;
}

.study-day-status-badge.completed {
  border-color: #75c69a;
  background: #ecfdf3;
  color: #067647;
}

.practical-article-top-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.practical-article-fullscreen-button{
  width: auto !important;
  white-space: nowrap;
}



.practical-article-audio-panel {
  flex: 0 0 auto;
  
  width: 100%;
  overflow: visible;
}

.practical-audio-player {
  width: 100%;
  
  overflow: visible;
}

.practical-audio-player > * {
  min-width: 0;
}

/* 画面幅が狭い場合でも、記事本文を最低4行程度表示する */
.practical-sticky-article:not(.is-fullscreen) .practical-article-scroll {
  min-height: calc(1.65em * 4 + 18px) !important;
}



@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-day-status-row {
    align-items: flex-start;
  }

  .study-day-status-badge.completed {
    max-width: 100%;
    white-space: normal;
  }

  .practical-article-topline {
    align-items: flex-start;
  }

  .practical-article-top-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }

  .practical-article-fullscreen-button{
    min-height: 29px !important;
    padding: 4px 7px !important;
    
  }

  .practical-sticky-article:not(.is-fullscreen) {
    flex-basis: clamp(250px, 46dvh, 430px);
  }

  

  .practical-sticky-article:not(.is-fullscreen) .practical-article-scroll {
    min-height: calc(1.62em * 4 + 20px) !important;
  }

  .practical-article-audio-panel {
    max-width: 100%;
    overflow: visible;
  }

  .practical-audio-player {
    box-sizing: border-box;
    grid-template-columns: 38px 34px minmax(70px, 1fr) 34px !important;
    max-width: 100%;
  }

  .practical-audio-control{
    grid-column: 1 / -1 !important;
    width: 100%;
  }

  
}

@media (max-width: 390px) {
  .practical-sticky-article:not(.is-fullscreen) {
    flex-basis: clamp(255px, 48dvh, 440px);
  }

  

  .practical-article-topline {
    gap: 5px;
  }

  .practical-sticky-article h2 {
    font-size: 17px !important;
  }

  .practical-audio-player {
    grid-template-columns: 36px 30px minmax(52px, 1fr) 30px !important;
    gap: 3px !important;
    padding: 5px !important;
  }

  .practical-audio-play {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .practical-audio-control select {
    flex: 1 1 auto;
    max-width: 120px;
  }
}

/* ===== 2026-07-13 課題学習：音声・保存・全画面・モーダル最終修正 ===== */

/* 音声プレイヤーは常時表示し、縦幅を抑えた1行レイアウトを基本とする */
.practical-article-audio-panel {
  display: block !important;
  margin-top: 4px;
}

.practical-audio-player {
  
  grid-template-columns: 34px auto minmax(110px, 1fr) auto minmax(118px, auto) !important;
  
  gap: 5px !important;
  
  
}

.practical-audio-play {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  font-size: 13px !important;
}

.practical-audio-time {
  min-width: 70px !important;
  font-size: 10.5px !important;
  white-space: nowrap;
}

.practical-audio-seek{
  min-height: 22px !important;
}

.practical-audio-control{
  gap: 4px !important;
  font-size: 10.5px !important;
}

.practical-audio-control select {
  min-height: 28px !important;
  padding: 2px 5px !important;
  font-size: 11px;
}



.practical-audio-error {
  display: none;
  grid-column: 1 / -1;
  color: #b42318;
  font-size: 11px;
}

.practical-audio-error:not(:empty) {
  display: block;
}

/* 全画面表示でもアプリの「スマ英」ヘッダーを覆わない */
.practical-sticky-article.is-fullscreen {
  top: var(--practical-fullscreen-top, 0px) !important;
  bottom: 0 !important;
  height: calc(100dvh - var(--practical-fullscreen-top, 0px)) !important;
  max-height: calc(100dvh - var(--practical-fullscreen-top, 0px)) !important;
  background: #fff !important;
}

.practical-sticky-article.is-fullscreen .practical-article-scroll,
.practical-sticky-article.is-fullscreen .practical-article-audio-panel,
.practical-sticky-article.is-fullscreen .practical-audio-player {
  background: #fff !important;
}

body.practical-article-fullscreen-open::before {
  top: var(--practical-fullscreen-top, 0px) !important;
}

/* PCでは「Week X Day X 課題学習」と、そのための空白を表示しない */
@media (min-width: 821px) {
  body.practical-study-active .topbar-title {
    display: none !important;
  }

  body.practical-study-active .topbar {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.practical-study-active .practical-sticky-article {
    top: 0 !important;
  }

  .practical-sticky-article.is-fullscreen {
    left: 18px !important;
    right: 18px !important;
    width: auto !important;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .practical-audio-player {
    grid-template-columns: 32px auto minmax(0, 1fr) auto minmax(92px, auto) !important;
    
    
  }

  .practical-audio-time {
    min-width: 63px !important;
    
  }

  .practical-audio-control{
    grid-column: auto !important;
    min-width: 0;
  }

  .practical-audio-control > span{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  

  /* 予定変更リクエスト等の別ウィンドウは下部メニューの上までに収める */
  body.student-mobile-nav-enabled .booking-modal-backdrop,
  body.student-mobile-nav-enabled .study-vocabulary-modal-backdrop,
  body.student-mobile-nav-enabled .practical-incomplete-modal-backdrop {
    inset: 0 0 calc(var(--student-bottom-nav-height, 68px) + env(safe-area-inset-bottom)) 0 !important;
    height: auto !important;
    padding-bottom: 12px !important;
  }

  body.student-mobile-nav-enabled .booking-modal,
  body.student-mobile-nav-enabled .study-vocabulary-modal,
  body.student-mobile-nav-enabled .practical-incomplete-modal {
    max-height: calc(100dvh - var(--student-bottom-nav-height, 68px) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
  }

  .practical-sticky-article.is-fullscreen {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    padding-top: 10px !important;
  }
}

@media (max-width: 560px) {
  .practical-audio-player {
    grid-template-columns: 32px auto minmax(0, 1fr) !important;
  }

  .practical-audio-control{
    grid-row: 2;
  }

  .practical-audio-control {
    grid-column: 1 / 2 !important;
  }

  

  
}

body.practical-article-fullscreen-open .topbar,
body.practical-article-fullscreen-open.header-hidden .topbar {
  transform: translateY(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (min-width: 821px) {
  .practical-sticky-article.is-fullscreen {
    left: var(--practical-fullscreen-left, 18px) !important;
    right: var(--practical-fullscreen-right, 18px) !important;
  }
}

/* ===== 2026-07-13 課題学習：Day表示・Weekタブ・文字数・録音保存修正 ===== */

/* 非選択のWeekは、カーソルを載せても全面が赤くならない */
.study-week-tab:hover:not(.active),
.study-week-tab:focus-visible:not(.active) {
  border-color: #b8c0cc !important;
  background: #f8f9fb !important;
  color: #344054 !important;
}

.study-week-tab.active:hover,
.study-week-tab.active:focus-visible {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
}

/* 状態バッジをDay名の左側に配置 */


.study-day-name {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.study-day-name h3 {
  margin: 0;
  line-height: 1.2;
}

.study-day-theme {
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
}

.study-day-card-head > span:last-child {
  flex: 0 0 auto;
}

/* テキスト回答は1200文字まで。現在の文字数を右下に表示 */
.practical-text-count {
  margin-top: 4px;
  color: #667085;
  font-size: 11px;
  line-height: 1.3;
  text-align: right;
}

.practical-recording-answer audio {
  display: block;
  width: 100%;
  margin-top: 6px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /* Week 1～4を横幅内にちょうど4列で収める */
  .study-week-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    overflow: visible;
  }

  .study-week-tab {
    min-width: 0 !important;
    width: 100%;
    padding: 8px 2px !important;
    font-size: 12px;
    white-space: nowrap;
  }

  .study-day-card-head {
    align-items: flex-start;
  }

  

  .study-day-status-badge {
    flex: 0 0 auto;
    min-height: 23px;
    padding: 3px 6px;
    font-size: 10px;
  }

  .study-day-theme {
    font-size: 11px !important;
  }
}

/* ===== 2026-07-13 課題学習：プレイヤー・録音保存・端末間同期UI・ページ移動 最終調整 ===== */

/* 音量調整は廃止し、PC・スマホとも見切れない4要素の横並びにする */


.practical-article-audio-panel,
.practical-audio-player {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.practical-audio-player {
  display: grid !important;
  grid-template-columns: 34px 76px minmax(120px, 1fr) minmax(104px, auto) !important;
  align-items: center;
  gap: 6px !important;
  min-height: 38px;
  padding: 4px 6px !important;
  
}

.practical-audio-play {
  grid-column: 1;
}

.practical-audio-time {
  grid-column: 2;
  width: auto !important;
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.practical-audio-seek {
  grid-column: 3;
  width: 100% !important;
  min-width: 0 !important;
}

.practical-audio-control {
  grid-column: 4;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  min-width: 104px !important;
  width: auto !important;
  white-space: nowrap;
}

.practical-audio-control select {
  box-sizing: border-box;
  width: 72px !important;
  min-width: 72px !important;
  max-width: none !important;
  padding-right: 20px !important;
}

.practical-audio-error {
  grid-column: 1 / -1 !important;
}

/* 狭い画面でも全画面ボタンを右端からはみ出させない */
.practical-article-topline {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  width: 100%;
  min-width: 0;
  gap: 8px;
}

.practical-article-topline > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.practical-article-top-actions {
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
}

.practical-article-fullscreen-button {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 !important;
}

/* 録音停止後はアップロード完了まで全画面をロックする */
.practical-recording-upload-lock {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 24, 40, .58);
  cursor: wait;
  touch-action: none;
}

.practical-recording-upload-lock-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(420px, 100%);
  padding: 22px 20px;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #101828;
  text-align: center;
  box-shadow: 0 16px 42px rgba(16, 24, 40, .24);
}

.practical-recording-upload-lock-card > span:last-child {
  color: #667085;
  font-size: 12px;
}

.practical-recording-upload-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #f1b5b8;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: practical-recording-upload-spin .8s linear infinite;
}

@keyframes practical-recording-upload-spin {
  to { transform: rotate(360deg); }
}

body.practical-recording-uploading {
  overflow: hidden !important;
}

/* 最新指定：次へ／提出を左端、前へを右端。ボタン下の余白をなくす */
.practical-study-actions {
  margin: 0 !important;
  padding: 0 !important;
}

.practical-study-page-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}

.practical-next-button,
.practical-submit-button {
  grid-column: 1 !important;
  grid-row: 1;
  justify-self: start !important;
}

.practical-prev-button,
.practical-page-action-spacer {
  grid-column: 2 !important;
  grid-row: 1;
}

.practical-prev-button {
  justify-self: end !important;
}



@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .practical-sticky-article {
    box-sizing: border-box;
    max-width: 100%;
  }

  .practical-article-topline {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px;
  }

  .practical-article-top-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
  }

  .practical-article-fullscreen-button {
    min-width: 88px !important;
    padding: 5px 7px !important;
    font-size: 10.5px !important;
  }

  .practical-audio-player {
    grid-template-columns: 32px 66px minmax(64px, 1fr) 88px !important;
    
    
  }

  .practical-audio-time {
    font-size: 9.5px !important;
  }

  .practical-audio-control {
    grid-column: 4 !important;
    grid-row: 1 !important;
    min-width: 88px !important;
    width: 88px !important;
  }

  .practical-audio-control > span {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    margin-right: 3px;
    font-size: 9.5px;
  }

  .practical-audio-control select {
    flex: 0 0 58px;
    width: 58px !important;
    min-width: 58px !important;
    padding: 2px 17px 2px 4px !important;
    
  }

  .practical-study-workspace {
    padding-bottom: 0 !important;
  }
}

@media (max-width: 360px) {
  .practical-article-fullscreen-button {
    min-width: 80px !important;
    padding-inline: 5px !important;
    font-size: 10px !important;
  }

  .practical-audio-player {
    grid-template-columns: 30px 60px minmax(48px, 1fr) 82px !important;
    
  }

  .practical-audio-control {
    width: 82px !important;
    min-width: 82px !important;
  }

  .practical-audio-control select {
    flex-basis: 54px;
    width: 54px !important;
    min-width: 54px !important;
  }
}

/* ===== 2026-07-13 課題学習：音声・録音保持・ページ移動配置の再調整 ===== */

/* 再生速度は「1.25×」まで欠けずに表示する */
.practical-audio-control select {
  box-sizing: border-box !important;
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  padding-left: 7px !important;
  padding-right: 22px !important;
  white-space: nowrap;
}

/* 記事音声が記事領域の下端で切れないよう、記事本文側だけを縮める */
body.practical-study-active .practical-sticky-article:not(.is-fullscreen) {
  flex: 0 0 clamp(320px, 50dvh, 500px) !important;
  min-height: 320px !important;
  box-sizing: border-box;
}

body.practical-study-active .practical-sticky-article:not(.is-fullscreen) .practical-article-scroll {
  flex: 1 1 auto !important;
  min-height: calc(1.62em * 4 + 18px) !important;
  max-height: none !important;
}

.practical-article-audio-panel {
  flex: 0 0 auto !important;
  min-width: 0;
  overflow: visible !important;
}

.practical-audio-player {
  flex: 0 0 auto;
  min-width: 0;
  overflow: visible !important;
}

/* 録音済み音声は初回再生前から読み込み、再描画後も同じ表示を維持する */
.practical-recording-player {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 40px;
}

/* 「次へ／提出」は左端、「前へ」は右端に常に同じ行で配置する */
.practical-study-actions,
.practical-study-page-actions {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.practical-study-page-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 42px;
}

.practical-page-action-left,
.practical-page-action-right {
  display: flex;
  flex: 1 1 50%;
  align-items: center;
  min-width: 0;
}

.practical-page-action-left {
  justify-content: flex-start;
}

.practical-page-action-right {
  justify-content: flex-end;
}

.practical-study-page-actions .practical-next-button,
.practical-study-page-actions .practical-submit-button,
.practical-study-page-actions .practical-prev-button {
  position: static !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
  width: auto !important;
  min-width: 120px !important;
  max-width: 100%;
  margin: 0 !important;
}

.practical-study-workspace {
  padding-bottom: 0 !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) {
    flex-basis: clamp(310px, 46dvh, 450px) !important;
    min-height: 310px !important;
  }

  .practical-audio-player {
    grid-template-columns: 32px 66px minmax(54px, 1fr) 96px !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  .practical-audio-control {
    width: 96px !important;
    min-width: 96px !important;
    justify-content: flex-end !important;
  }

  .practical-audio-control select {
    flex: 0 0 70px !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    padding-left: 5px !important;
    padding-right: 19px !important;
    font-size: 11px !important;
  }

  .practical-study-page-actions {
    gap: 8px !important;
    min-height: 40px;
  }

  .practical-study-page-actions .practical-next-button,
  .practical-study-page-actions .practical-submit-button,
  .practical-study-page-actions .practical-prev-button {
    min-width: 104px !important;
    min-height: 38px !important;
    padding: 7px 12px !important;
  }
}

@media (max-width: 360px) {
  .practical-audio-player {
    grid-template-columns: 30px 60px minmax(42px, 1fr) 92px !important;
    gap: 3px !important;
  }

  .practical-audio-control {
    width: 92px !important;
    min-width: 92px !important;
  }

  .practical-audio-control select {
    flex-basis: 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
  }

  .practical-study-page-actions .practical-next-button,
  .practical-study-page-actions .practical-submit-button,
  .practical-study-page-actions .practical-prev-button {
    min-width: 96px !important;
    padding-inline: 10px !important;
  }
}

/* ===== 2026-07-13 課題学習：ページ移動ボタンの最終配置修正 ===== */
/* 「次へ／課題を提出」は左端、「前へ」は右端。両方を必ず同じ高さに揃える。 */
body.practical-study-active .practical-study-actions {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.practical-study-active .practical-study-page-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 44px !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.practical-study-active .practical-page-action-left,
body.practical-study-active .practical-page-action-right {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.practical-study-active .practical-page-action-left {
  
  grid-row: 1 !important;
  
}

body.practical-study-active .practical-page-action-right {
  
  grid-row: 1 !important;
  
}

body.practical-study-active .practical-study-page-actions .practical-next-button,
body.practical-study-active .practical-study-page-actions .practical-submit-button,
body.practical-study-active .practical-study-page-actions .practical-prev-button {
  position: static !important;
  align-self: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 120px !important;
  min-height: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 8px 18px !important;
  line-height: 1.2 !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.practical-study-active .practical-study-page-actions {
    min-height: 40px !important;
    gap: 8px !important;
  }

  body.practical-study-active .practical-page-action-left,
  body.practical-study-active .practical-page-action-right {
    height: 40px !important;
  }

  body.practical-study-active .practical-study-page-actions .practical-next-button,
  body.practical-study-active .practical-study-page-actions .practical-submit-button,
  body.practical-study-active .practical-study-page-actions .practical-prev-button {
    min-width: 104px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 7px 14px !important;
  }
}

/* ===== 2026-07-13 Week・Day選択画面／ページ移動 最終調整 ===== */

/* 前へを左端、次へ／課題を提出を右端に配置する */
body.practical-study-active .practical-page-action-left {
  grid-column: 1 !important;
  justify-content: flex-start !important;
}

body.practical-study-active .practical-page-action-right {
  grid-column: 2 !important;
  justify-content: flex-end !important;
}

body.practical-study-active .practical-study-page-actions .practical-prev-button,
body.practical-study-active .practical-study-page-actions .practical-next-button,
body.practical-study-active .practical-study-page-actions .practical-submit-button {
  position: static !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: center !important;
  margin: 0 !important;
}

/* Dayテーマを上段、状態バッジとDay名を同じ高さの下段にする */
.study-day-title-block {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.study-day-title-block .study-day-theme {
  display: block;
  margin: 0;
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.study-day-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.study-day-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.study-day-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  box-sizing: border-box;
}

.study-today-task-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Weekタブはタップ直後から確実に操作できるようにする */
.study-week-tabs,
.study-week-tab {
  position: relative;
}

.study-week-tab {
  z-index: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto !important;
  user-select: none;
}

.study-day-grid[aria-busy="true"] {
  opacity: .62;
  pointer-events: none;
  transition: opacity .12s ease;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /* コース・カリキュラム・レベルは3列、テーマは1列 */
  .study-material-selectors {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .study-material-selectors > div {
    min-width: 0;
  }

  .study-material-selectors label {
    font-size: 11px;
    white-space: nowrap;
  }

  .study-material-selectors select {
    width: 100%;
    min-width: 0;
    padding-inline: 5px;
    font-size: 12px;
  }

  .study-theme-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .study-day-title-block .study-day-theme {
    font-size: 11px !important;
  }

  

  .study-day-label,
  .study-day-status-badge,
  .study-today-task-label {
    min-height: 23px;
  }
}

/* ===== 2026-07-13 録音音声プレイヤー統一・録音保持強化 ===== */
/* 録音後のプレイヤーを記事音声と同じデザインに統一（速度変更は設けない） */
.practical-recording-audio-player {
  display: grid !important;
  grid-template-columns: 34px 76px minmax(120px, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  margin-top: 8px;
  padding: 4px 6px !important;
  overflow: visible !important;
  box-sizing: border-box;
}

.practical-recording-audio-player > audio.practical-recording-audio {
  display: none !important;
}

.practical-recording-audio-player .practical-recording-play {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.practical-recording-audio-player .practical-recording-time {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practical-recording-audio-player .practical-recording-seek {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.practical-recording-audio-player .practical-recording-error {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-width: 0;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .practical-recording-audio-player {
    grid-template-columns: 32px 66px minmax(64px, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  .practical-recording-audio-player .practical-recording-time {
    font-size: 9.5px !important;
  }
}

@media (max-width: 360px) {
  .practical-recording-audio-player {
    grid-template-columns: 30px 60px minmax(48px, 1fr) !important;
    gap: 3px !important;
  }
}

/* ===== 2026-07-13 テキスト自動保存・全画面ボタン調整 ===== */
/* PC版では「全画面表示／全画面を閉じる」を少し小さく表示する */
@media (min-width: 821px) {
  .practical-article-fullscreen-button {
    min-height: 34px !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
}

/* ===== 2026-07-13 テキスト回答・スマホヘッダー・Week/Day表示修正 ===== */
.study-day-theme-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

/* 状態バッジはDayの右側に置き、バッジらしい丸みにする */
.study-day-status-badge {
  border-radius: 999px !important;
}

.study-day-title-row {
  flex-wrap: nowrap;
}

.study-day-title-row .study-day-label,
.study-day-title-row .study-day-status-badge {
  flex: 0 0 auto;
}

/* 本日の課題はOverview等のテーマ名の左側に配置 */
.study-day-theme-row .study-today-task-label {
  flex: 0 0 auto;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-day-theme-row {
    gap: 5px;
  }

  .study-day-title-row {
    gap: 6px;
  }
}

/* ===== 2026-07-13 録音保存・スマホ記事スクロール調整 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /*
   * 課題領域だけを独立スクロールさせる構成を解除し、ページ全体を通常どおり
   * スワイプできるようにする。記事は最初から固定せず、上端に到達した時点で
   * sticky となるため、ヘッダーは従来どおり上へ隠れる。
   */
  body.practical-study-active .main {
    display: block !important;
    height: 100% !important;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  body.practical-study-active .topbar {
    position: relative !important;
    top: auto !important;
    
  }

  body.practical-study-active #content {
    display: block !important;
    min-height: 100%;
    overflow: visible !important;
  }

  body.practical-study-active .practical-study-shell {
    display: grid !important;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
  }

  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) {
    position: sticky !important;
    top: env(safe-area-inset-top, 0px) !important;
    z-index: 120 !important;
    flex: none !important;
    width: 100%;
    max-height: min(47dvh, 410px) !important;
    align-self: auto !important;
  }

  body.practical-study-active .practical-study-workspace {
    display: grid;
    min-height: 0;
    overflow: visible !important;
    overscroll-behavior: auto;
    padding-bottom: calc(var(--student-bottom-nav-height, 68px) + 16px + env(safe-area-inset-bottom));
  }
}

/* ===== 2026-07-13 スマホ課題学習ヘッダー位置復元 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /*
   * 課題学習画面だけ topbar が通常配置へ戻されていたため、
   * 固定ヘッダー用の上部余白とヘッダー本体が二重に並んでいた。
   * 他ページと同じ固定ヘッダーへ戻し、スクロール時の退避動作も維持する。
   */
  body.practical-study-active .topbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 90 !important;
    flex: none !important;
  }

  

  /* ヘッダー表示中は記事をヘッダー直下に、退避後は画面上端に固定する。 */
  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) {
    top: max(
      0px,
      calc(52px + env(safe-area-inset-top) - var(--mobile-header-offset, 0px))
    ) !important;
  }
}

/* ===== 2026-07-13 課題学習：通常ヘッダー挙動との統一 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /*
   * 「スマ英」ロゴヘッダーは他ページと同じ fixed + スクロール連動の挙動にする。
   * 上へスワイプするとヘッダーは徐々に退避し、下へ戻すと再表示される。
   */
  body.practical-study-active .main {
    padding-top: calc(58px + env(safe-area-inset-top)) !important;
    scroll-padding-top: 0 !important;
  }

  body.practical-study-active .topbar,
  body.practical-study-active.header-hidden .topbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    transform: translate3d(0, calc(-1 * var(--mobile-header-offset, 0px)), 0) !important;
    transition: none !important;
    z-index: 260 !important;
  }

  /* 記事上部の操作領域を約8px詰め、記事ウィンドウを少し上へ寄せる。 */
  body.practical-study-active .practical-study-shell {
    gap: 0 !important;
  }

  body.practical-study-active .practical-study-top-actions {
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.practical-study-active .practical-study-top-actions .practical-study-back-button {
    min-height: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /*
   * 記事は通常位置から上へスクロールし、画面最上部（iPhone等では安全領域の直下）
   * に到達してから固定する。ヘッダーの退避量を sticky の停止位置に使わないことで、
   * ヘッダーと記事の間に余白が残ったまま止まる状態を防ぐ。
   */
  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) {
    /* ヘッダーが退避した後は、画面上端まで移動してから固定する。 */
    top: 0 !important;
    margin-top: -2px !important;
    z-index: 230 !important;
  }
}

/* Deprecated volume control remains hidden if legacy markup is rendered. */
.practical-audio-volume { display: none !important; }

/* ===== 2026-07-13 スマホ課題学習：「課題一覧に戻る」と記事を一体で固定 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.practical-study-active {
    --practical-study-back-row-height: 28px;
  }

  /* 「課題一覧に戻る」も上端まで通常スクロールし、到達後は隠れず固定する。 */
  body.practical-study-active .practical-study-top-actions {
    position: sticky !important;
    top: 0 !important;
    z-index: 241 !important;
    box-sizing: border-box;
    width: 100%;
    height: var(--practical-study-back-row-height) !important;
    min-height: var(--practical-study-back-row-height) !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    background: var(--bg, #f6f8fb) !important;
  }

  body.practical-study-active .practical-study-top-actions .practical-study-back-button {
    min-height: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 1px 9px !important;
  }

  /* 戻るボタンの直下で記事を固定し、両者が重ならないようにする。 */
  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) {
    top: var(--practical-study-back-row-height) !important;
    margin-top: 0 !important;
    z-index: 240 !important;
  }
}

/* ===== 2026-07-13 スマホ課題学習：戻るボタン〜再生プレイヤー固定 最終調整 =====
   スマ英ヘッダーは通常スクロールで上へ退避させ、
   「課題一覧に戻る」が画面上端へ到達した時点で、記事・再生プレイヤーと一体で固定します。 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.practical-study-active {
    --practical-study-back-row-height: 30px;
  }

  /* 課題学習画面だけ、固定ヘッダー用の上部余白を解除して main をスクロール領域にする。 */
  body.practical-study-active.app-mode .main,
  body.practical-study-active .main {
    display: block !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 0 12px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    scroll-padding-top: 0 !important;
  }

  /* スマ英ヘッダーは固定せず、ページ上部の通常要素として一緒に上へ流す。 */
  body.practical-study-active .topbar,
  body.practical-study-active.header-hidden .topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: calc(100% + 24px) !important;
    margin: 0 -12px 0 !important;
    transform: none !important;
    transition: none !important;
    z-index: 260 !important;
  }

  body.practical-study-active #content {
    display: block !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  body.practical-study-active .practical-study-shell {
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  /* 「課題一覧に戻る」は、画面上端へ到達してから固定する。 */
  body.practical-study-active .practical-study-top-actions {
    position: sticky !important;
    top: 0 !important;
    z-index: 330 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: var(--practical-study-back-row-height) !important;
    min-height: var(--practical-study-back-row-height) !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    background: var(--bg, #f6f8fb) !important;
  }

  body.practical-study-active .practical-study-top-actions .practical-study-back-button {
    width: auto !important;
    min-height: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 1px 9px !important;
  }

  /* 記事ウィンドウ〜再生プレイヤーは戻るボタン直下で固定し、重なりを防ぐ。 */
  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) {
    position: sticky !important;
    top: var(--practical-study-back-row-height) !important;
    z-index: 320 !important;
    width: 100% !important;
    margin-top: 0 !important;
    max-height: min(47dvh, 410px) !important;
    overflow: hidden !important;
  }

  /* 課題本文側は main のスクロールに参加させ、sticky の基準を崩さない。 */
  body.practical-study-active .practical-study-workspace {
    display: grid !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: calc(var(--student-bottom-nav-height, 68px) + 16px + env(safe-area-inset-bottom)) !important;
  }
}

/* ===== 2026-07-14 スマホ課題学習：タブ・記事高さ・重要単語モーダル調整 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /* Reading / Listening等のボタンの直上に余白を設ける。 */
  body.practical-study-active .practical-page-tabs {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  /* タブ内の文字を少し大きくし、進捗（1/3等）はスマホでは表示しない。 */
  body.practical-study-active .practical-page-tabs button {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  body.practical-study-active .practical-page-tabs button small {
    display: none !important;
  }

  body.practical-study-active .practical-page-tabs button > span {
    display: block;
    line-height: 1.2 !important;
  }

  /* Writing / Speakingは2行で表示し、Writingを上段にする。 */
  body.practical-study-active .practical-page-tabs button[onclick*="speakingWriting"] > span {
    font-size: 0 !important;
    white-space: normal;
  }

  body.practical-study-active .practical-page-tabs button[onclick*="speakingWriting"] > span::before {
    content: "Writing\A Speaking";
    display: block;
    white-space: pre-line;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.12;
  }

  /* 記事本文のスクロールウィンドウを従来のおよそ80%の高さにする。 */
  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) .practical-article-scroll {
    flex: 0 1 auto !important;
    min-height: 70px !important;
    max-height: 23vh !important;
  }

  /* 重要単語モーダル表示時も、端末上部の安全領域を白のまま維持する。 */
  body.practical-study-active .study-vocabulary-modal-backdrop::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: #fff;
    z-index: 1;
    pointer-events: none;
  }

  body.practical-study-active .study-vocabulary-modal {
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 520px) {
  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) .practical-article-scroll {
    max-height: 21vh !important;
  }
}

/* ===== 2026-07-14 課題学習：全画面スクロール・ページ先頭・回答選択肢・PC STAGE調整 ===== */

/* 記事の全画面表示中は、背面にある元ページのスクロール領域を固定する。 */
html.practical-article-fullscreen-open,
body.practical-article-fullscreen-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.practical-article-fullscreen-open .app,
body.practical-article-fullscreen-open .main,
body.practical-article-fullscreen-open #content,
body.practical-article-fullscreen-open .practical-study-shell,
body.practical-article-fullscreen-open .practical-study-workspace {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* 全画面の記事本文自体は引き続きスクロールできるようにする。 */
body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen {
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-scroll {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

/* 選択式・チェック式の回答は、薄いグレーの囲みを外して通常の文章と同じ大きさにする。 */
.practical-checkbox-options label,
.practical-choice-options label {
  align-items: flex-start !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.practical-checkbox-options label > span,
.practical-choice-options label > span {
  font-size: inherit !important;
  line-height: inherit !important;
}

.practical-checkbox-options input[type="checkbox"],
.practical-choice-options input[type="radio"] {
  flex: 0 0 1em !important;
  width: 1em !important;
  height: 1em !important;
  min-width: 1em !important;
  min-height: 1em !important;
  margin: .24em 0 0 !important;
  padding: 0 !important;
}

/* PCでは「STAGE」と右側のSTAGE名を同じ文字サイズに揃える。 */
@media (min-width: 821px) {
  body.practical-study-active .practical-stage-heading > span,
  body.practical-study-active .practical-stage-heading h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
}


/* ===== 2026-07-14 課題学習マスター：Month単位20課題一括入力 ===== */
.admin-material-master-editor {
  display: grid;
  gap: 0;
}

.admin-material-master-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #f1b5b8;
  background: #fff7f8;
  color: #344054;
}

.admin-material-master-guide b {
  color: var(--primary);
}

.admin-material-master-guide span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #e4e7ec;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.admin-material-template-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.admin-material-template-tabs button {
  border: 1px solid #d0d5dd;
  border-radius: 0;
  background: #fff;
  color: #475467;
}

.admin-material-template-tabs button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.admin-material-template-current {
  margin-bottom: 10px;
}

.admin-material-master-table-wrap {
  max-height: none;
  border: 1px solid var(--line);
}

.admin-material-master-grid {
  width: 100%;
  min-width: 1120px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-material-master-grid th,
.admin-material-master-grid td {
  padding: 7px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.admin-material-master-grid thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f9fafb;
  text-align: center;
}

.admin-material-master-grid thead th:first-child,
.admin-material-master-grid tbody th {
  width: 74px;
  min-width: 74px;
  text-align: center;
}

.admin-material-master-grid thead th:nth-child(2),
.admin-material-master-grid .admin-material-week-title-cell {
  width: 230px;
  min-width: 230px;
}

.admin-material-week-title-cell b,
.admin-material-week-title-cell small {
  display: block;
  overflow-wrap: anywhere;
}

.admin-material-week-title-cell small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.admin-material-day-cell {
  display: grid;
  align-content: center;
  gap: 4px;
  width: 100%;
  min-height: 94px;
  padding: 9px;
  border: 1px solid #d0d5dd;
  border-radius: 0;
  background: #fff;
  color: #344054;
  text-align: left;
  box-shadow: none;
}

.admin-material-day-cell:hover,
.admin-material-day-cell:focus-visible {
  border-color: var(--primary);
  background: #fff7f8;
  color: #344054;
}

.admin-material-day-cell.complete {
  border-color: #75c69a;
  background: #f0fdf4;
}

.admin-material-day-cell.partial {
  border-color: #f5c06c;
  background: #fffaeb;
}

.admin-material-day-cell.selected {
  border: 2px solid var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.admin-material-day-cell b {
  color: var(--primary);
  font-size: 13px;
}

.admin-material-day-cell span {
  font-size: 12px;
  font-weight: 700;
}

.admin-material-day-cell small {
  color: #667085;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.35;
}

.admin-material-selected-day {
  border: 2px solid #f0a1a6;
  padding: 16px;
  background: #fffafa;
}

.admin-material-selected-day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-material-selected-day-head h3,
.admin-material-selected-day-head p {
  margin-top: 0;
}

.admin-material-day-navigation {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px;
}

.admin-material-day-navigation span {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-material-day-subsection {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.admin-material-day-subsection h4 {
  margin: 0;
}

.admin-material-master-actions {
  position: sticky;
  bottom: 0;
  z-index: 8;
  margin: 0 -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -8px 22px rgba(16, 24, 40, .08);
  backdrop-filter: blur(8px);
}

.admin-material-master-actions > button:first-child {
  min-width: 190px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .admin-material-master-guide {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-material-template-tabs {
    grid-template-columns: 1fr;
  }

  .admin-material-master-grid {
    min-width: 1040px;
  }

  .admin-material-selected-day {
    padding: 12px;
  }

  .admin-material-selected-day-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-material-day-navigation {
    grid-template-columns: 1fr auto 1fr;
  }

  .admin-material-day-navigation button {
    width: 100% !important;
  }

  .admin-material-master-actions {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 12px 0 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .admin-material-master-actions button {
    width: 100% !important;
  }
}

/* ===== 2026-07-14 課題学習マスター：ウィンドウ横幅超過の修正 ===== */
.admin-material-master-editor,
.admin-material-list-card,
.admin-material-master-editor > *,
.admin-material-master-editor .admin-material-section,
.admin-material-master-editor .admin-material-pages,
.admin-material-master-editor .admin-material-page,
.admin-material-master-editor .admin-material-page-body {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.admin-material-master-editor,
.admin-material-list-card {
  overflow-x: hidden;
}

.admin-material-master-editor .admin-material-editor-title,
.admin-material-master-editor .admin-material-section-head,
.admin-material-master-editor .admin-material-selected-day-head {
  min-width: 0;
  max-width: 100%;
}

.admin-material-master-editor .admin-material-editor-title > *,
.admin-material-master-editor .admin-material-section-head > *,
.admin-material-master-editor .admin-material-selected-day-head > * {
  min-width: 0;
}

.admin-material-master-table-wrap,
.admin-material-list-card .admin-material-table-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.admin-material-master-table-wrap .admin-material-master-grid,
.admin-material-list-card .admin-material-table-wrap table {
  max-width: none !important;
}

/* ===== 2026-07-14 課題学習マスター：テーマ分類・Month1固定・講師用解答キー ===== */
.admin-material-month1-fixed {
  align-self: end;
  min-height: 42px;
  margin: 0 !important;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #f9fafb;
}

.admin-material-month1-fixed span {
  display: grid;
  gap: 2px;
}

.admin-material-month1-fixed small {
  color: var(--muted);
  font-weight: 400;
  line-height: 1.45;
}

.admin-material-answer-key-input {
  min-height: 60px;
  border-color: #f0a1a6;
  background: #fff8f8;
}

.admin-material-day5-preview {
  min-height: 150px;
  max-height: 360px;
  overflow-y: auto;
  background: #f9fafb;
}

.study-theme-card small,
.study-theme-card em {
  display: block;
  margin-top: 6px;
  color: #667085;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.study-theme-card em {
  width: fit-content;
  padding: 2px 6px;
  border: 1px solid #f4a5ac;
  background: #fff1f2;
  color: var(--primary);
}

.teacher-study-feedback-section {
  max-width: 100%;
  overflow-x: hidden;
}

.teacher-study-submission-list {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

.teacher-study-submission-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  background: #fff;
}

.teacher-study-submission-card h4 {
  margin: 0;
}

.teacher-study-answer-list {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}

.teacher-study-answer-item {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: #f9fafb;
}

.teacher-study-answer-heading {
  margin-bottom: 8px;
  color: var(--primary);
}

.teacher-study-question {
  margin: 0 0 10px;
  line-height: 1.6;
}

.teacher-study-answer-block,
.teacher-study-answer-key {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--line);
  line-height: 1.6;
}

.teacher-study-answer-block > span,
.teacher-study-answer-key > span {
  font-weight: 800;
}

.teacher-study-answer-key {
  border-left: 4px solid var(--primary);
  background: #fff7f8;
}

.teacher-study-answer-item audio {
  width: 100%;
  max-width: 460px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .admin-material-month1-fixed {
    align-self: stretch;
  }

  .teacher-study-submission-card {
    padding: 12px;
  }

  .teacher-study-answer-block,
  .teacher-study-answer-key {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.admin-material-answer-key-section {
  border-top: 2px solid var(--primary);
}

.admin-material-answer-key-list {
  display: grid;
  gap: 12px;
}

.admin-material-answer-key-card {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  background: #f9fafb;
}

.admin-material-answer-key-card p {
  margin: 6px 0 0;
  line-height: 1.55;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .admin-material-answer-key-card {
    grid-template-columns: 1fr;
  }
}

/* ===== 2026-07-14 課題学習マスター：テンプレート・教材情報・単語表 ===== */
.admin-material-template-meta,
.admin-material-grid-meta {
  margin: 12px 0 16px;
  align-items: end;
}

.admin-material-template-meta > div,
.admin-material-grid-meta > div {
  min-width: 0;
}

.admin-material-applied-template-note {
  margin: 0 0 12px;
  padding: 9px 11px;
  border-left: 4px solid var(--primary);
  background: #fff7f8;
  color: #344054;
  font-size: 13px;
}

.admin-material-title-actions {
  align-items: center;
  justify-content: flex-end;
  margin-top: 0;
}

.admin-vocabulary-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
}

.admin-vocabulary-table {
  width: max-content !important;
  min-width: 1480px !important;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-vocabulary-table th,
.admin-vocabulary-table td {
  padding: 6px;
  vertical-align: top;
  white-space: normal !important;
}

.admin-vocabulary-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f9fafb;
  text-align: center;
}

.admin-vocabulary-table th:nth-child(1),
.admin-vocabulary-table td:nth-child(1) { width: 180px; }
.admin-vocabulary-table th:nth-child(2),
.admin-vocabulary-table td:nth-child(2) { width: 160px; }
.admin-vocabulary-table th:nth-child(3),
.admin-vocabulary-table td:nth-child(3) { width: 150px; }
.admin-vocabulary-table th:nth-child(4),
.admin-vocabulary-table td:nth-child(4) { width: 190px; }
.admin-vocabulary-table th:nth-child(5),
.admin-vocabulary-table td:nth-child(5) { width: 230px; }
.admin-vocabulary-table th:nth-child(6),
.admin-vocabulary-table td:nth-child(6) { width: 230px; }
.admin-vocabulary-table th:nth-child(7),
.admin-vocabulary-table td:nth-child(7) { width: 250px; }
.admin-vocabulary-table th:nth-child(8),
.admin-vocabulary-table td:nth-child(8) { width: 82px; }

.admin-vocabulary-table input,
.admin-vocabulary-table textarea {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0;
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 12px;
}

.admin-vocabulary-table textarea {
  min-height: 76px;
  resize: vertical;
}

.admin-vocabulary-table .admin-vocabulary-audio-file {
  margin-top: 6px;
  padding: 5px;
  min-height: 34px;
}

.admin-vocabulary-table td:last-child button {
  width: 100%;
  min-width: 0;
}

/* ===== 課題学習：最大5ファイル・1ファイル10MB ===== */
.practical-file-answer {
  display: grid;
  gap: 9px;
}

.practical-file-upload-guide {
  padding: 8px 10px;
  border: 1px solid #f1b5b8;
  background: #fff7f8;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
}

.practical-file-upload-slots {
  display: grid;
  gap: 8px;
}

.practical-file-upload-slot {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #f9fafb;
}

.practical-file-upload-slot > span {
  color: #475467;
  font-size: 12px;
  font-weight: 700;
}

.practical-file-upload-slot input[type="file"] {
  min-width: 0;
  width: 100%;
  padding: 6px;
}

.practical-file-add-slot {
  justify-self: start;
  width: auto !important;
}

.practical-file-status:empty {
  display: none;
}

.practical-file-uploaded-list {
  display: grid;
  gap: 6px;
}

.practical-file-uploaded-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #d0d5dd;
  background: #fff;
}

.practical-file-uploaded-item a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.practical-file-uploaded-item button {
  min-height: 32px;
}

.teacher-study-file-list {
  margin: 0;
  padding-left: 20px;
}

.teacher-study-file-list li + li {
  margin-top: 5px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .admin-material-template-meta,
  .admin-material-grid-meta {
    grid-template-columns: 1fr !important;
  }

  .admin-material-title-actions {
    width: 100%;
    justify-content: stretch;
  }

  .admin-material-title-actions button {
    width: 100% !important;
  }

  .practical-file-upload-slot {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .practical-file-add-slot {
    width: 100% !important;
  }
}

/* ===== 2026-07-14 課題学習マスター：個別課題文・横幅・入力欄再調整 ===== */
.admin-material-master-editor,
.admin-material-master-editor *,
.admin-material-list-card,
.admin-material-list-card * {
  box-sizing: border-box;
}

.admin-material-master-editor input,
.admin-material-master-editor select,
.admin-material-master-editor textarea,
.admin-material-master-editor button {
  max-width: 100%;
  min-width: 0;
}

.admin-material-master-editor .admin-material-section-head,
.admin-material-master-editor .admin-material-editor-title,
.admin-material-master-editor .admin-material-selected-day-head {
  flex-wrap: wrap;
}

.grid.three.admin-material-grid-meta {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}

.grid.two.admin-material-template-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.admin-material-master-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
}

.admin-material-master-table-wrap .admin-material-master-grid {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

.admin-material-master-grid thead th:first-child,
.admin-material-master-grid tbody th {
  width: 58px !important;
  min-width: 58px !important;
}

.admin-material-master-grid thead th:nth-child(2),
.admin-material-master-grid .admin-material-week-title-cell {
  width: 168px !important;
  min-width: 0 !important;
}

.admin-material-master-grid th,
.admin-material-master-grid td {
  min-width: 0 !important;
  padding: 5px !important;
  overflow-wrap: anywhere;
}

.admin-material-day-cell {
  min-width: 0 !important;
  min-height: 82px;
  padding: 6px !important;
  overflow: hidden;
}

.admin-material-day-cell span,
.admin-material-day-cell small {
  overflow-wrap: anywhere;
}

.admin-material-selected-day,
.admin-material-day-subsection,
.admin-material-task-card,
.admin-material-stage-card,
.admin-material-answer-key-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.admin-material-master-actions {
  width: 100%;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.admin-material-task-prompt-section {
  border-top: 2px solid #d0d5dd;
}

.admin-material-task-prompt-list {
  display: grid;
  gap: 10px;
}

.admin-material-task-prompt-card {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  background: #f9fafb;
}

.admin-material-task-prompt-card > * {
  min-width: 0;
}

.admin-material-task-prompt-template > span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.admin-material-task-prompt-template p {
  margin: 5px 0 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.admin-material-task-prompt-override-input {
  min-height: 86px;
  background: #fff;
}

.admin-material-answer-key-card {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .grid.two.admin-material-template-meta,
  .grid.three.admin-material-grid-meta {
    grid-template-columns: 1fr !important;
  }

  .admin-material-master-table-wrap .admin-material-master-grid {
    min-width: 760px !important;
    max-width: none !important;
  }

  .admin-material-task-prompt-card,
  .admin-material-answer-key-card {
    grid-template-columns: 1fr !important;
  }
}

/* ===== 2026-07-14 課題構成テンプレート：課題文の任意入力・個別設定チェック ===== */
.admin-material-task-prompt-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 10px 0 6px;
}

.admin-material-task-prompt-label-row > label {
  margin: 0;
}

.admin-material-week-day-prompt-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px;
  width: auto !important;
  max-width: 100%;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.admin-material-week-day-prompt-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
}

.admin-material-task-prompt-empty {
  margin: 0;
}

@media (max-width: 620px) {
  .admin-material-task-prompt-label-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ===== 2026-07-14 課題学習：保存表示・Day5単語・PC分割・戻るボタン ===== */
.practical-study-back-button {
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
  touch-action: manipulation;
}

/* Day5のみ表示する重要単語・熟語ハイライト切替 */
.practical-day5-vocab-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}

.practical-day5-vocab-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
}

.practical-day5-vocab-toggle input:disabled + span {
  color: #98a2b3;
}

/* 重要単語・熟語テーブルは縦横とも表内でスクロールし、ヘッダーを固定 */
.admin-vocabulary-table-wrap {
  position: relative;
  max-height: min(62vh, 620px);
  overflow: auto !important;
}

.admin-vocabulary-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  background: #f9fafb !important;
  box-shadow: 0 1px 0 var(--line);
}

/* PC版：記事音声プレイヤーとReading / Listeningの間をドラッグ調整 */
.practical-study-resize-handle {
  display: none;
}

@media (min-width: 821px) {
  body.practical-study-active .practical-study-shell {
    --practical-study-article-pane-height: clamp(320px, 50dvh, 500px);
  }

  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) {
    flex: 0 0 var(--practical-study-article-pane-height) !important;
    height: var(--practical-study-article-pane-height) !important;
    min-height: 280px !important;
    max-height: calc(100% - 202px) !important;
  }

  body.practical-study-active .practical-study-workspace {
    flex: 1 1 auto !important;
    min-height: 190px !important;
  }

  .practical-study-resize-handle {
    display: flex;
    flex: 0 0 12px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 12px;
    min-height: 12px;
    margin: 0;
    cursor: row-resize;
    touch-action: none;
    user-select: none;
    outline: none;
  }

  .practical-study-resize-handle::before {
    content: "";
    width: 100%;
    height: 1px;
    background: #d0d5dd;
  }

  .practical-study-resize-handle > span {
    position: absolute;
    width: 58px;
    height: 5px;
    border-radius: 999px;
    background: #98a2b3;
    box-shadow: 0 0 0 4px var(--bg);
  }

  .practical-study-resize-handle:hover > span,
  .practical-study-resize-handle:focus-visible > span {
    background: var(--primary);
  }

  body.practical-study-resizing,
  body.practical-study-resizing * {
    cursor: row-resize !important;
    user-select: none !important;
  }

  body.practical-study-active .practical-article-top-actions {
    align-items: flex-end;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .practical-day5-vocab-toggle {
    width: min(230px, 100%) !important;
    font-size: 10.5px;
  }

  .practical-day5-vocab-toggle input[type="checkbox"] {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
  }
}

/* ===== 2026-07-14 Writing/Speaking録音・記事領域下限・空課題文 ===== */
.practical-text-answer {
  display: grid;
  gap: 4px;
}

.practical-text-answer-with-recording .practical-supplemental-recording-answer {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.practical-supplemental-recording-answer {
  width: 100%;
  max-width: 100%;
}

.practical-supplemental-recording-answer .practical-record-button {
  justify-self: start;
}

@media (min-width: 821px) {
  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) {
    min-height: var(--practical-study-article-min-height, 280px) !important;
  }

  body.practical-study-active .practical-article-audio-panel,
  body.practical-study-active .practical-audio-player {
    flex-shrink: 0 !important;
  }

  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) .practical-article-scroll {
    min-height: 112px !important;
  }
}

/* ===== 2026-07-14 学習目標・テンプレート反映・PCタブ・Monthホバー調整 ===== */
.admin-material-learning-goal-field {
  margin-bottom: 2px;
  padding: 12px;
  border: 1px solid #f0a1a6;
  background: #fff7f8;
}

.admin-material-learning-goal-field label {
  margin-top: 0;
  color: var(--primary);
}

.admin-material-learning-goal-field textarea {
  min-height: 82px;
  background: #fff;
}

.practical-page-learning-goal {
  margin: 7px 0 3px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

/* Monthボタンは非選択時にホバーしても赤い全面表示にしない */
.study-month-badge:hover:not(.active),
.study-month-badge:focus-visible:not(.active) {
  border-color: #b8c0cc !important;
  background: #f8f9fb !important;
  color: #344054 !important;
}

.study-month-badge.unpaid:hover:not(.active),
.study-month-badge.unpaid:focus-visible:not(.active) {
  border-color: #d0d5dd !important;
  background: #f9fafb !important;
  color: #98a2b3 !important;
}

.study-month-badge.active:hover,
.study-month-badge.active:focus-visible {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
}

@media (min-width: 821px) {
  /* PCではReading等の進捗（1/3等）を表示しない */
  body.practical-study-active .practical-page-tabs button small {
    display: none !important;
  }

  body.practical-study-active .practical-page-tabs button > span {
    white-space: nowrap !important;
  }

  /* Writing / SpeakingをPCでは1行表示 */
  body.practical-study-active .practical-page-tabs button[onclick*="speakingWriting"] > span {
    white-space: nowrap !important;
  }

  /* 音声プレイヤー直後の余白を8px縮めつつ、区切り線との間隔は確保する */
  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) .practical-article-audio-panel {
    margin-bottom: 2px !important;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .practical-page-learning-goal {
    margin-top: 6px;
    font-size: 12px;
  }
}

/* ===== 2026-07-14 録音時間・Month操作・スマホ教材選択・学習目標表示 ===== */
.practical-recording-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.practical-recording-controls .practical-record-button {
  flex: 0 0 auto;
  justify-self: auto;
}

.practical-recording-controls .practical-recording-timer {
  flex: 0 0 auto;
  white-space: nowrap;
}

.practical-recording-status:empty {
  display: none;
}

.study-month-badge {
  position: relative;
  z-index: 1;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.study-theme-mobile-selector {
  display: none;
}

.practical-page-learning-goal {
  display: block !important;
  width: 100%;
  min-height: 1em;
  margin: 7px 0 3px !important;
  color: var(--primary) !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-material-selectors {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .study-material-selectors > div {
    min-width: 0;
  }

  .study-theme-mobile-selector {
    display: none !important;
  }

  .study-material-selectors > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .study-theme-list-heading {
    display: block !important;
    margin: 18px 0 9px;
  }

  .study-material-selector-card > .study-theme-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .study-material-selector-card > .study-theme-grid .study-theme-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 64px;
    margin: 0 !important;
  }

  .study-material-selectors label {
    white-space: nowrap;
  }

  .study-material-selectors select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .practical-page-learning-goal {
    display: block !important;
    margin-top: 6px !important;
    font-size: 12px;
  }

  .practical-recording-controls {
    flex-wrap: nowrap;
  }
}

@media (max-width: 390px) {
  .practical-recording-controls {
    gap: 7px;
  }

  .practical-recording-controls .practical-recording-timer {
    font-size: 12px;
  }
}

/* ===== 2026-07-14 課題学習：高さ固定・Month無装飾・全画面固定・同期・単語モーダル ===== */

/* Reading / Listening切替時に高さの補間や変形を発生させない */
@media (min-width: 821px) {
  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) {
    transition: none !important;
    contain: layout paint;
  }
}

/* Monthボタンはホバー前後で見た目を一切変えない */
.study-month-badge,
.study-month-badge:hover,
.study-month-badge:active {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
}

.study-month-badge:hover:not(.active) {
  border-color: #d0d5dd !important;
  background: #fff !important;
  color: #475467 !important;
}

.study-month-badge.paid:hover:not(.active) {
  border-color: #f4a5ac !important;
  background: #fff !important;
  color: var(--primary) !important;
}

.study-month-badge.unpaid:hover:not(.active) {
  border-color: #d0d5dd !important;
  background: #f9fafb !important;
  color: #98a2b3 !important;
}

.study-month-badge.active:hover {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
}

/* 全画面記事の背面をiOSのスワイプでも固定 */
html.practical-article-fullscreen-open,
body.practical-article-fullscreen-open {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  touch-action: none !important;
}

body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen {
  touch-action: none !important;
}

body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-scroll {
  touch-action: pan-y !important;
}

/* スマホ：コース・カリキュラム・レベル・カテゴリを必ず2列×2行 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-material-selector-card .study-material-selectors,
  .study-confirmed-summary .study-selection-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .study-material-selector-card .study-material-selectors > div,
  .study-confirmed-summary .study-selection-summary > span {
    min-width: 0 !important;
    width: auto !important;
  }
}

/* 単語・熟語モーダル表示時も上端とヘッダーを赤色のまま維持 */
html.study-vocabulary-modal-open,
body.study-vocabulary-modal-open {
  background: var(--primary) !important;
}

body.study-vocabulary-modal-open .topbar,
body.study-vocabulary-modal-open.header-hidden .topbar {
  background: var(--primary) !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.practical-study-active .study-vocabulary-modal-backdrop::before {
    background: var(--primary) !important;
  }
}

.study-vocab-example-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.study-vocab-translation-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #475467 !important;
  font-size: 17px;
  line-height: 1;
}

.study-vocab-translation-toggle:hover,
.study-vocab-translation-toggle:active {
  transform: none !important;
  background: #fff !important;
  color: #475467 !important;
}

.study-vocab-translation-toggle.is-visible::after {
  content: "";
  position: absolute;
  width: 23px;
  height: 2px;
  border-radius: 999px;
  background: var(--primary);
  transform: rotate(-42deg);
}

.study-vocab-translation {
  margin-top: 10px;
}

/* ===== 2026-07-14 単語・熟語モーダル位置・和訳バッヂ・上端色復元 ===== */
.study-vocab-example-text {
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.study-vocab-example-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}

.study-vocab-example-actions .vocab-audio-button {
  margin: 0 !important;
}

.study-vocab-translation-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0 !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  border: 1px solid #f0a1a6 !important;
  border-radius: 999px !important;
  background: #fff5f6 !important;
  color: var(--primary) !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: none !important;
}

.study-vocab-translation-badge:hover,
.study-vocab-translation-badge:focus-visible,
.study-vocab-translation-badge:active {
  transform: none !important;
  border-color: var(--primary) !important;
  background: #fff5f6 !important;
  color: var(--primary) !important;
  box-shadow: none !important;
}

.study-vocab-translation-badge.is-visible {
  background: var(--primary) !important;
  color: #fff !important;
}

/* 旧い目アイコン用レイアウトは使用しない */
.study-vocab-example-head,
.study-vocab-translation-toggle {
  display: none !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-vocabulary-modal-backdrop,
  body.student-mobile-nav-enabled .study-vocabulary-modal-backdrop {
    inset: env(safe-area-inset-top, 0px) 0
      calc(var(--student-bottom-nav-height, 68px) + env(safe-area-inset-bottom, 0px)) 0 !important;
    display: grid !important;
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
    height: auto !important;
    padding: 14px 12px !important;
  }

  .study-vocabulary-modal {
    width: min(620px, 100%) !important;
    max-height: calc(
      100dvh
      - env(safe-area-inset-top, 0px)
      - var(--student-bottom-nav-height, 68px)
      - env(safe-area-inset-bottom, 0px)
      - 28px
    ) !important;
    margin: 0 !important;
    align-self: center !important;
  }

  /* 暗いオーバーレイを安全領域へ重ねず、端末上端は常に赤色を維持 */
  body.practical-study-active .study-vocabulary-modal-backdrop::before {
    top: calc(-1 * env(safe-area-inset-top, 0px)) !important;
    height: env(safe-area-inset-top, 0px) !important;
    background: var(--primary) !important;
    z-index: 2701 !important;
  }

  html.study-vocabulary-modal-open,
  body.study-vocabulary-modal-open {
    background-color: var(--primary) !important;
  }
}

/* ===== 2026-07-14 単語ウィンドウ安全領域・上端固定・最新同期補助 ===== */

/* 課題学習中は安全領域を常に赤で覆い、モーダル開閉後の暗色残りを防ぐ */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.practical-study-active::before,
  body.study-safe-area-restoring::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4000;
    width: 100%;
    height: max(env(safe-area-inset-top, 0px), 1px);
    background: var(--study-mobile-safe-area-color, var(--primary)) !important;
    pointer-events: none;
  }
}

/* 初期表示時の上端位置を固定し、和訳表示時は下方向だけに拡張 */
.study-vocabulary-modal.is-top-locked {
  position: absolute !important;
  top: var(--study-vocabulary-modal-locked-top, 12px) !important;
  left: 50% !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  align-self: auto !important;
}

/* 和訳文の囲いを削除 */
.study-vocab-translation {
  margin-top: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-vocabulary-modal-backdrop,
  body.student-mobile-nav-enabled .study-vocabulary-modal-backdrop {
    position: fixed !important;
  }

  .study-vocabulary-modal.is-top-locked {
    width: calc(100% - 24px) !important;
    max-width: 620px !important;
  }
}

/* ===== 2026-07-14 安全領域固定・テンプレート別メニュー・Month1チェック ===== */

/* 単語・熟語モーダルは安全領域へ一切装飾を加えない */
html.study-vocabulary-modal-open,
body.study-vocabulary-modal-open,
html.study-safe-area-restoring,
body.study-safe-area-restoring {
  background: inherit !important;
}

body.practical-study-active::before,
body.study-safe-area-restoring::before,
body.practical-study-active .study-vocabulary-modal-backdrop::before {
  display: none !important;
  content: none !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-vocabulary-modal-backdrop,
  body.student-mobile-nav-enabled .study-vocabulary-modal-backdrop {
    top: env(safe-area-inset-top, 0px) !important;
  }
}

.admin-material-template-menu-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.admin-material-template-menu-card > .admin-material-template-section {
  margin-top: 14px;
}

.admin-material-month1-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.admin-material-month1-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  width: fit-content !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.admin-material-month1-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
}

.admin-material-month1-checkbox span {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ===== 2026-07-14 安全領域・テンプレート保存・Month読込・教材リセット ===== */

/* 課題学習中の安全領域は、モーダルの有無にかかわらず通常時と同じ赤色を維持 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.practical-study-active::before {
    display: block !important;
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 6000 !important;
    width: 100% !important;
    height: max(env(safe-area-inset-top, 0px), 1px) !important;
    background: var(--primary) !important;
    pointer-events: none !important;
  }

  /* Monthボタンは文字が収まる幅にし、切替中だけ右側に小さな読込マークを表示 */
  .study-month-badges {
    gap: 7px !important;
  }

  .study-month-badge {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px 11px !important;
    white-space: nowrap;
  }

  .study-month-badge.is-loading {
    padding-right: 30px !important;
  }

  .study-month-loading-mark {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 13px;
    height: 13px;
    margin-top: -6.5px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: study-month-loading-spin .7s linear infinite;
  }

  .study-month-loading-mark[hidden] {
    display: none !important;
  }

  @keyframes study-month-loading-spin {
    to { transform: rotate(360deg); }
  }

  /* 「教材を選択」の4項目を通常のフォームサイズに戻す */
  .study-material-selector-card .study-material-selectors label {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .study-material-selector-card .study-material-selectors select {
    min-height: 44px !important;
    padding: 9px 34px 9px 10px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
}

/* ===== 2026-07-14 録音欄配置・記事全文／当日分切替 ===== */

/* テキスト回答直後の録音欄から区切り線を削除 */
.practical-text-answer-with-recording .practical-supplemental-recording-answer {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.practical-text-answer-with-recording textarea + .practical-supplemental-recording-answer {
  margin-top: 2px !important;
}

/* 記事文章ウィンドウ内の右上に表示範囲切替を配置 */
.practical-article-text-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.practical-article-text-toolbar {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  padding: 7px 8px 4px;
  background: #fff;
}

.practical-article-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #f8f9fb;
}

.practical-article-view-toggle button {
  width: auto !important;
  min-width: 0 !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 5px 11px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #475467 !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: none !important;
  transform: none !important;
  white-space: nowrap;
}

.practical-article-view-toggle button:hover,
.practical-article-view-toggle button:focus-visible {
  background: #fff !important;
  color: var(--primary) !important;
  box-shadow: none !important;
  transform: none !important;
}

.practical-article-view-toggle button.active {
  background: var(--primary) !important;
  color: #fff !important;
}

.practical-article-view-toggle button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

/* 既存のスクロール領域の枠は外側パネルに統合 */
.practical-article-text-panel .practical-article-scroll {
  flex: 1 1 auto;
  min-height: 0;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

@media (min-width: 821px) {
  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) .practical-article-text-panel {
    flex: 1 1 auto;
    min-height: 112px;
  }

  body.practical-study-active .practical-sticky-article:not(.is-fullscreen) .practical-article-text-panel .practical-article-scroll {
    min-height: 0 !important;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .practical-article-text-toolbar {
    padding: 6px 6px 3px;
  }

  .practical-article-view-toggle button {
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: 10.5px;
  }
}

/* ===== 2026-07-14 記事表示切替の外側配置・長いタイトル・Writing / Speaking ===== */
.practical-article-text-toolbar {
  width: 100%;
  min-width: 0;
  margin: 0 0 6px !important;
  padding: 0 !important;
  background: transparent !important;
  justify-content: flex-end !important;
}

.practical-article-topline {
  min-width: 0 !important;
}

.practical-article-topline > div:first-child {
  width: 100%;
  min-width: 0 !important;
}

.practical-article-topline h2 {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-right: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.practical-article-top-actions {
  justify-self: end;
  align-self: start;
  min-width: 0 !important;
  max-width: min(44vw, 360px) !important;
}

.practical-article-text-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .practical-article-text-toolbar {
    margin-bottom: 5px !important;
    padding: 0 !important;
  }

  .practical-article-topline {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .practical-article-top-actions {
    max-width: min(48vw, 220px) !important;
  }

  .practical-article-topline h2 {
    line-height: 1.35;
  }
}

/* ===== 2026-07-14 記事表示ボタン・全画面縦幅調整 ===== */

/* 「記事全文を表示／当日分のみ表示」は、1つのボタンを押すたびに切り替える */
.practical-article-view-toggle.practical-article-view-buttons {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100%;
  align-items: center;
  justify-content: flex-end;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.practical-article-view-toggle.practical-article-view-buttons .practical-article-view-button {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 16px !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--primary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
  transform: none !important;
  white-space: nowrap;
}

.practical-article-view-toggle.practical-article-view-buttons .practical-article-view-button:hover:not(:disabled),
.practical-article-view-toggle.practical-article-view-buttons .practical-article-view-button:focus-visible:not(:disabled) {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(207, 31, 46, .10) !important;
}

.practical-article-view-toggle.practical-article-view-buttons .practical-article-view-button:disabled {
  border-color: #d0d5dd !important;
  background: #f2f4f7 !important;
  color: #98a2b3 !important;
  opacity: 1 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* 全画面では、固定要素を除いた残りの縦幅を記事本文にすべて割り当てる */
body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: calc(100dvh - var(--practical-fullscreen-top, 0px)) !important;
  max-height: calc(100dvh - var(--practical-fullscreen-top, 0px)) !important;
  overflow: hidden !important;
}

body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-topline,
body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-text-toolbar,
body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-vocab-guide,
body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-audio-panel {
  flex: 0 0 auto !important;
}

body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-text-panel {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-scroll {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* 再生プレイヤーは縮小・画面外への押し出しを防ぎ、全画面内の下端に収める */
body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-audio-panel {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-audio-player {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .practical-article-view-toggle.practical-article-view-buttons .practical-article-view-button {
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 6px 13px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
  }

  body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen {
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
}



/* ===== 2026-07-14 教材選択：カテゴリ項目・Month 1案内・未選択月誘導 ===== */
.study-category-selector-field {
  min-width: 0;
}

.study-category-selector-field select {
  width: 100%;
  min-width: 0;
}

.study-category-selector-field select:disabled {
  cursor: default;
  opacity: 1;
  background-color: #f6f7f9;
  color: #344054;
  -webkit-text-fill-color: #344054;
}

.study-month1-theme-notice {
  margin: 7px 0 0 !important;
  color: #667085 !important;
  line-height: 1.55;
}

.study-theme-empty-message {
  margin-top: 4px;
}

@media (min-width: 821px) {
  .study-material-selector-card .study-material-selectors {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .study-month1-theme-notice {
    font-size: 12px !important;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-material-selector-card .study-material-selectors {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 8px !important;
    width: 100% !important;
  }

  .study-material-selector-card .study-material-selectors > div {
    grid-column: auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .study-category-selector-field {
    display: flex;
    flex-direction: column;
  }

  .study-month1-theme-notice {
    margin-top: 6px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 430px) {
  .study-material-selector-card .study-material-selectors {
    gap: 9px 7px !important;
  }

  .study-month1-theme-notice {
    font-size: 10.5px !important;
  }
}


/* ===== 2026-07-14 教材カテゴリ選択・単一記事表示ボタン 最終調整 ===== */
.study-material-selector-card .study-material-selectors {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start;
}

.study-category-selector-field,
.study-category-selector-field select {
  min-width: 0;
  width: 100%;
}

.study-month1-theme-notice {
  margin: -8px 0 14px !important;
  padding: 8px 10px;
  border-left: 3px solid var(--primary);
  background: #fff7f8;
  color: #475467;
}

.study-material-selector-card > .study-theme-list-heading {
  margin: 4px 0 9px;
}

.study-material-selector-card > .study-theme-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.study-material-selector-card > .study-theme-grid .study-theme-card:disabled {
  cursor: default;
  opacity: 1;
}

.study-material-selector-card > .study-theme-grid .study-theme-card.active:disabled {
  border-color: var(--primary) !important;
  background: #fff7f8 !important;
  color: var(--primary) !important;
}

.study-confirmed-summary .study-selection-summary {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-material-selector-card .study-material-selectors {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .study-month1-theme-notice {
    margin-top: 0 !important;
  }

  .study-material-selector-card > .study-theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .study-confirmed-summary .study-selection-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===== 2026-07-14 前月未提出確認・テーマ再選択制限・管理者代理教材選択 ===== */
.study-previous-theme-notice {
  margin: -8px 0 14px !important;
  padding: 9px 11px;
  border-left: 3px solid #667085;
  background: #f8f9fb;
  color: #475467;
}

.study-theme-card.is-previously-selected {
  border-color: #d0d5dd !important;
  background: #f2f4f7 !important;
  color: #98a2b3 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.study-theme-card.is-previously-selected:hover,
.study-theme-card.is-previously-selected:focus-visible {
  border-color: #b8c0cc !important;
  background: #eaecf0 !important;
  color: #667085 !important;
}

.study-theme-card-status {
  display: block;
  margin-top: 5px;
  color: inherit;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
}

.admin-student-material-management .admin-material-proxy-selector {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.admin-material-proxy-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.admin-material-proxy-heading h4 {
  margin: 0 0 4px;
}

.admin-material-proxy-heading p {
  margin: 0;
}

.admin-material-proxy-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  align-items: end;
}

.admin-material-proxy-grid > div,
.admin-material-proxy-grid select {
  min-width: 0;
  width: 100%;
}

.admin-material-proxy-result {
  margin-top: 8px;
}

.admin-material-proxy-empty {
  margin-top: 16px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-previous-theme-notice {
    margin-top: 0 !important;
    font-size: 11px;
  }

  .admin-material-proxy-heading {
    display: grid;
    gap: 8px;
  }

  .admin-material-proxy-heading .pill {
    justify-self: start;
  }

  .admin-material-proxy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px 8px !important;
  }
}

@media (max-width: 430px) {
  .admin-material-proxy-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== 2026-07-14 date verification panel normal display ===== */
.date-override-panel {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 1600;
  width: min(390px, calc(100vw - 36px));
  max-width: calc(100vw - 36px);
  padding: 14px;
  border: 1px solid #d0d5dd;
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 48px rgba(16, 24, 40, .2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  gap: 10px;
  color: var(--text);
}

.date-override-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.date-override-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.date-override-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff1f2;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.date-override-description {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.date-override-close {
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #475467;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.date-override-close:hover {
  background: #f2f4f7;
  color: var(--text);
}

.date-override-field {
  margin: 0;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.date-override-field > span {
  display: block;
  margin-bottom: 5px;
}

.date-override-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.date-override-row input[type="date"] {
  width: 100%;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 7px 10px;
  border-radius: 10px;
}

.date-override-row button,
.date-override-actions button {
  width: auto !important;
  min-width: 0;
  min-height: 40px;
  padding: 8px 13px;
  border-radius: 10px;
  white-space: nowrap;
}

.date-override-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f9fafb;
  color: #475467;
  font-size: 12px;
}

.date-override-current b {
  color: var(--text);
  font-size: 13px;
}

.date-override-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .date-override-panel {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    padding: 12px;
    border-radius: 16px;
  }

  body.student-mobile-nav-enabled .date-override-panel {
    bottom: calc(var(--student-bottom-nav-height, 68px) + 10px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 430px) {
  .date-override-description {
    font-size: 10px;
  }

  .date-override-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .date-override-row button,
  .date-override-actions button {
    padding-inline: 11px;
    font-size: 12px;
  }
}

/* ===== 2026-07-14 記事タイトルと表示切替ボタンの下端揃え・スマホ押下色 ===== */
.practical-article-topline {
  align-items: end !important;
}

.practical-article-heading-block {
  align-self: end !important;
  min-width: 0 !important;
}

.practical-article-heading-block h2 {
  margin-bottom: 0 !important;
}

.practical-article-top-actions {
  align-self: end !important;
  align-items: flex-end !important;
}

/* 表示切替ボタンを記事タイトルと同じ上段へ移動したため、独立行用の余白を解除 */
.practical-article-top-actions .practical-article-text-toolbar {
  display: flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: flex-end !important;
}

.practical-article-top-actions .practical-article-view-toggle {
  margin: 0 !important;
}

/* 全画面表示でもタイトルと記事表示切替ボタンの下端を揃える */
body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-topline {
  align-items: end !important;
}

body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-heading-block,
body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-top-actions,
body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-text-toolbar {
  align-self: end !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .practical-article-topline {
    align-items: end !important;
  }

  .practical-article-top-actions {
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }

  .practical-article-top-actions .practical-article-text-toolbar,
  .practical-article-top-actions .practical-article-view-toggle {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* タッチ端末では、押している間だけ視覚的な色変化を残す */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) and (hover: none),
       (max-width: 820px) and (pointer: coarse) {
  button {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation;
  }

  button.mobile-touch-pressed:not(:disabled) {
    filter: brightness(.88) !important;
  }

  /* タップ後に残る疑似 hover 色を通常色へ戻す */
  .practical-article-view-toggle.practical-article-view-buttons .practical-article-view-button:hover:not(:disabled),
  .practical-article-view-toggle.practical-article-view-buttons .practical-article-view-button:focus:not(:focus-visible):not(:disabled) {
    border-color: var(--primary) !important;
    background: #fff !important;
    color: var(--primary) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
  }

  .practical-article-view-toggle.practical-article-view-buttons .practical-article-view-button.mobile-touch-pressed:not(:disabled),
  .practical-article-view-toggle.practical-article-view-buttons .practical-article-view-button:active:not(:disabled) {
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .practical-article-fullscreen-button:hover:not(:disabled),
  .practical-article-fullscreen-button:focus:not(:focus-visible):not(:disabled) {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
  }

  .practical-article-fullscreen-button.mobile-touch-pressed:not(:disabled),
  .practical-article-fullscreen-button:active:not(:disabled) {
    background: var(--primary) !important;
    color: #fff !important;
  }
}

/* ===== 2026-07-14 全画面ボタンの位置復元・タイトル下余白 ===== */
/*
  全画面表示は右上の元の位置へ戻し、記事表示切替はタイトルの下端に揃える。
  上段全体を伸ばすことで、長いタイトル・全画面表示のどちらでも下端を合わせる。
*/
.practical-article-topline {
  align-items: stretch !important;
}

.practical-article-heading-block {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-self: stretch !important;
}

.practical-article-top-actions {
  display: grid !important;
  grid-template-columns: minmax(0, auto) auto !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-self: stretch !important;
  align-items: start !important;
  justify-items: end !important;
  column-gap: 8px !important;
  row-gap: 5px !important;
}

.practical-article-top-actions .practical-day5-vocab-toggle {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

.practical-article-top-actions .practical-article-fullscreen-button {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
}

.practical-article-top-actions .practical-article-text-toolbar {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-self: end !important;
  justify-self: end !important;
  margin: 0 !important;
}

/* タイトル・表示切替行と記事本文ボックスの間に視認しやすい余白を設ける */
.practical-article-text-panel {
  margin-top: 10px !important;
}

body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-topline {
  align-items: stretch !important;
}

body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-heading-block,
body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-top-actions {
  align-self: stretch !important;
}

body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-text-panel {
  margin-top: 10px !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .practical-article-top-actions {
    column-gap: 6px !important;
    row-gap: 4px !important;
  }

  .practical-article-text-panel,
  body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-text-panel {
    margin-top: 8px !important;
  }
}

/* ===== 2026-07-14 teacher assignment feedback page ===== */
.teacher-feedback-page-head {
  display: grid;
  gap: 10px;
}

.teacher-feedback-page-head > h3,
.teacher-feedback-page-head > p {
  margin: 0;
}

.teacher-feedback-page-head > label,
.teacher-feedback-page-head > select {
  width: min(520px, 100%);
}

.teacher-feedback-page-list {
  margin-top: 16px;
}

.teacher-feedback-article-panel {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  background: #fff;
}

.teacher-feedback-article-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.teacher-feedback-article-head h4 {
  margin: 0;
}

.teacher-feedback-article-head .practical-article-view-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  white-space: nowrap;
}

.teacher-feedback-article-body {
  max-height: 360px;
  padding: 16px;
  overflow-y: auto;
  border: 1px solid var(--line);
  background: #f9fafb;
  line-height: 1.8;
}

.teacher-study-item-feedback {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.teacher-study-item-feedback-label {
  font-weight: 800;
  color: var(--primary);
}

.teacher-feedback-text-input textarea {
  min-height: 110px;
}

.teacher-feedback-recording {
  margin-top: 0;
}

.teacher-feedback-recording .practical-recording-controls {
  justify-content: flex-start;
}

.teacher-feedback-recording .practical-audio-player {
  width: 100%;
}

.teacher-feedback-choice-input {
  margin: 0;
}

.teacher-feedback-file-answer {
  display: grid;
  gap: 8px;
}

.teacher-feedback-autosave-status {
  min-height: 1.5em;
  margin-top: 8px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .teacher-feedback-article-head {
    align-items: flex-start;
  }

  .teacher-feedback-article-body {
    max-height: 300px;
    padding: 12px;
  }

  .teacher-study-item-feedback {
    padding: 10px;
  }

  .teacher-feedback-recording .practical-recording-controls {
    align-items: stretch;
  }
}

/* ===== 2026-07-14 文字数カウントと録音ボタンの上端揃え ===== */
.practical-recording-controls > .practical-text-count {
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 0 0 0 auto;
  padding: 0;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 390px) {
  .practical-recording-controls > .practical-text-count {
    font-size: 10px;
  }
}

/* ===== 2026-07-14 講師フィードバック折りたたみ・送信UI ===== */
.teacher-feedback-card-toggle-area {
  display: grid;
  gap: 0;
  cursor: pointer;
  border-radius: 8px;
}

.teacher-feedback-card-toggle-area:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.teacher-feedback-card-summary {
  gap: 12px;
}

.teacher-feedback-card-summary-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.teacher-feedback-collapse-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  line-height: 1;
}

.teacher-feedback-card-toggle-area:hover .teacher-feedback-collapse-icon {
  border-color: var(--primary);
  color: var(--primary);
}

.teacher-feedback-article-panel-head-only {
  margin-top: 14px;
  padding-bottom: 10px;
  border-bottom: 0;
}

.teacher-feedback-article-panel-body-only {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.teacher-feedback-card-body[hidden] {
  display: none !important;
}

.teacher-study-submission-card.is-collapsed .teacher-feedback-article-panel-head-only {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.teacher-feedback-send-actions {
  justify-content: flex-end;
  margin-top: 14px;
}

.teacher-feedback-send-actions button {
  min-width: 190px;
}

.pill.draft {
  border-color: #d8b45e;
  background: #fff8df;
  color: #765600;
}

.teacher-study-answer-block .practical-recording-audio-player {
  margin-top: 0;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .teacher-feedback-card-summary-side {
    gap: 6px;
  }

  .teacher-feedback-collapse-icon {
    width: 26px;
    height: 26px;
  }

  .teacher-feedback-send-actions button {
    width: 100%;
    min-width: 0;
  }
}

/* 学習履歴：Month・Week・Day別の詳細表示 */
.learning-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.learning-history-head h3,
.learning-history-head p {
  margin-top: 0;
}

.learning-history-head p {
  margin-bottom: 0;
}

.learning-history-list {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.learning-history-month,
.learning-history-week,
.learning-history-day {
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}

.learning-history-month {
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.learning-history-week {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.learning-history-week:first-child {
  border-top: 0;
}

.learning-history-day {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.learning-history-day:first-child {
  border-top: 0;
}

.learning-history-month > summary,
.learning-history-week > summary,
.learning-history-day > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.learning-history-month > summary::-webkit-details-marker,
.learning-history-week > summary::-webkit-details-marker,
.learning-history-day > summary::-webkit-details-marker {
  display: none;
}

.learning-history-month > summary {
  padding: 16px 18px;
  background: var(--primary-soft);
  font-size: 18px;
  font-weight: 700;
}

.learning-history-month > summary small,
.learning-history-week > summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.learning-history-month-body {
  display: grid;
  gap: 0;
  padding: 0;
}

.learning-history-week > summary {
  padding: 13px 18px;
  background: #f8fafc;
  font-weight: 700;
}

.learning-history-week-body {
  display: grid;
  gap: 0;
  padding: 0;
}

.learning-history-day > summary {
  padding: 14px 18px;
  background: #fff;
}

.learning-history-day[open] > summary {
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}

.learning-history-day-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.learning-history-day-title strong {
  flex: 0 0 auto;
  font-size: 16px;
}

.learning-history-day-title span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-history-day-body {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.learning-history-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.learning-history-date-grid > div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

.learning-history-date-grid span {
  color: var(--muted);
  font-size: 12px;
}

.learning-history-date-grid b {
  font-size: 14px;
}

.learning-history-article-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.learning-history-article-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.learning-history-article-heading h4 {
  margin: 4px 0 0;
}

.learning-history-section-label,
.learning-history-field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.learning-history-article-text {
  max-height: 360px;
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
  line-height: 1.8;
}

.learning-history-article-text > :first-child {
  margin-top: 0;
}

.learning-history-article-text > :last-child {
  margin-bottom: 0;
}

.learning-history-article-audio .practical-audio-player,
.learning-history-answer-value .practical-audio-player,
.learning-history-feedback-value .practical-audio-player {
  margin-top: 8px;
}

.learning-history-task-list {
  display: grid;
  gap: 12px;
}

.learning-history-task-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.learning-history-task-heading {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.learning-history-task-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.learning-history-task-section {
  min-width: 0;
  padding: 14px;
}

.learning-history-task-section + .learning-history-task-section {
  border-top: 1px solid var(--line);
}

.learning-history-task-question {
  background: #fff;
}

.learning-history-task-answer {
  background: #fbfcfe;
}

.learning-history-task-feedback {
  background: #fffdf4;
}

.learning-history-task-section .learning-history-field-label {
  margin-bottom: 8px;
  color: var(--primary);
  font-size: 12px;
  letter-spacing: .02em;
}

.learning-history-task-section > div,
.learning-history-task-content {
  line-height: 1.7;
}

.learning-history-option-list,
.learning-history-task-content ul,
.learning-history-answer-value ul,
.learning-history-feedback-value ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.learning-history-task-note {
  margin-bottom: 0;
}

.learning-history-supplemental-audio,
.learning-history-feedback-audio {
  margin-top: 10px;
}

.learning-history-general-feedback {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf4;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .learning-history-head {
    align-items: stretch;
    flex-direction: column;
  }

  .learning-history-head button {
    width: 100%;
  }

  .learning-history-month > summary {
    padding: 14px;
    font-size: 16px;
  }

  .learning-history-month-body,
  .learning-history-week-body {
    padding: 0;
  }

  .learning-history-day-body {
    padding: 12px;
  }

  .learning-history-day > summary {
    align-items: flex-start;
    padding: 12px;
  }

  .learning-history-day-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .learning-history-day-title span {
    white-space: normal;
  }

  .learning-history-date-grid {
    grid-template-columns: 1fr;
  }

  .learning-history-article-card {
    padding: 12px;
  }

  .learning-history-article-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .learning-history-article-text {
    max-height: 300px;
    padding: 12px;
  }
}

/* ===== 学習履歴：教材情報・3列日時・記事表示 ===== */
.learning-history-month,
.learning-history-week,
.learning-history-day {
  overflow: visible;
}

.learning-history-month > summary,
.learning-history-week > summary {
  align-items: flex-start;
}

.learning-history-month-summary,
.learning-history-week-summary {
  display: grid;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
}

.learning-history-summary-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.learning-history-summary-title strong {
  flex: 0 0 auto;
}

.learning-history-summary-title small {
  flex: 0 0 auto;
  white-space: nowrap;
}

.learning-history-month-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.learning-history-month-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.learning-history-month-meta b,
.learning-history-week-article-title b {
  margin-right: 5px;
  color: var(--muted);
  font-weight: 700;
}

.learning-history-week-article-title {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.learning-history-date-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.learning-history-article-card {
  position: static;
  top: auto;
  z-index: auto;
  align-self: stretch;
  max-height: none;
  overflow: visible;
  box-shadow: none;
}

/* 記事本文だけをスクロールした際、ページ全体へスクロールを連鎖させない */
.learning-history-article-text {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.learning-history-article-heading {
  display: block;
}

.learning-history-article-heading h4 {
  margin: 0;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .learning-history-month-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 10px;
  }

  .learning-history-summary-title {
    align-items: flex-start;
  }

  .learning-history-week-article-title {
    font-size: 12px;
  }

  .learning-history-date-grid {
    grid-template-columns: 1fr;
  }

  .learning-history-article-card {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 480px) {
  .learning-history-month-meta {
    grid-template-columns: 1fr;
  }
}

/* ===== 2026-07-15 学習履歴：入れ子にせず Month・Week・Day の階層を明確化 ===== */
.learning-history-list {
  gap: 24px;
}

/* 各階層は同じ横幅を保ち、余白による入れ子表示にしない */
.learning-history-month,
.learning-history-week,
.learning-history-day {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.learning-history-month-body,
.learning-history-week-body {
  width: 100%;
  padding: 0 !important;
}

.learning-history-month-body {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.learning-history-week-body {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

/* Month：最上位の帯として強く表示 */
.learning-history-month > summary {
  min-height: 72px;
  padding: 15px 18px;
  border: 1px solid rgba(37, 99, 235, .24);
  border-radius: 15px;
  background: linear-gradient(135deg, var(--primary-soft), #fff);
  box-shadow: inset 6px 0 0 var(--primary), 0 5px 16px rgba(15, 23, 42, .07);
}

.learning-history-month > summary:hover {
  border-color: rgba(37, 99, 235, .42);
}

.learning-history-month .learning-history-summary-title strong {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  line-height: 1;
}

.learning-history-month-meta span {
  display: inline-flex;
  align-items: baseline;
  padding: 3px 8px;
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: 7px;
  background: rgba(255, 255, 255, .74);
}

/* Week：Monthより一段弱い青系の帯で区別 */
.learning-history-week > summary {
  min-height: 62px;
  padding: 13px 17px;
  border: 1px solid #d9e3f3;
  border-radius: 13px;
  background: #f5f8fd;
  box-shadow: inset 4px 0 0 #7c9fd6;
}

.learning-history-week > summary:hover {
  border-color: #b9cce8;
  background: #f0f5fc;
}

.learning-history-week .learning-history-summary-title strong {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font-size: 15px;
  line-height: 1;
}

.learning-history-week-article-title {
  padding-top: 6px;
  border-top: 1px dashed #cfdaea;
}

/* Day：独立した白いカードとして表示し、横幅はWeekと同一にする */
.learning-history-day {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 3px 0 0 #c4cedc;
}

.learning-history-day > summary {
  min-height: 54px;
  padding: 12px 15px;
  border: 0;
  background: #fff;
}

.learning-history-day > summary:hover {
  background: #f9fbfd;
}

.learning-history-day[open] > summary {
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.learning-history-day-title strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 3px 9px;
  border-radius: 8px;
  background: #e8eef7;
  color: #334155;
  font-size: 14px;
  line-height: 1;
}

/* 折りたたみ可能であることを全階層で共通表示 */
.learning-history-month > summary::after,
.learning-history-week > summary::after,
.learning-history-day > summary::after {
  content: "›";
  flex: 0 0 auto;
  margin-left: 4px;
  color: var(--muted);
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .18s ease;
}

.learning-history-month[open] > summary::after,
.learning-history-week[open] > summary::after,
.learning-history-day[open] > summary::after {
  transform: rotate(-90deg);
}

/* Dayの状態バッジと開閉矢印を右側に自然に並べる */
.learning-history-day > summary .pill {
  margin-left: auto;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .learning-history-list {
    gap: 18px;
  }

  .learning-history-month-body {
    gap: 12px;
    margin-top: 10px;
  }

  .learning-history-week-body {
    gap: 8px;
    margin-top: 8px;
  }

  .learning-history-month > summary,
  .learning-history-week > summary,
  .learning-history-day > summary {
    width: 100%;
  }

  .learning-history-month > summary {
    min-height: 0;
    padding: 13px 14px;
    box-shadow: inset 5px 0 0 var(--primary), 0 3px 12px rgba(15, 23, 42, .06);
  }

  .learning-history-week > summary {
    min-height: 0;
    padding: 12px 14px;
  }

  .learning-history-day > summary {
    min-height: 0;
    padding: 11px 12px;
  }

  .learning-history-month-meta span {
    width: 100%;
  }

  .learning-history-month > summary::after,
  .learning-history-week > summary::after,
  .learning-history-day > summary::after {
    font-size: 22px;
  }
}

/* ===== 2026-07-15 学習履歴：Month・Week・Dayを一続きの構成に統合 ===== */
/* Monthだけを外枠とし、WeekとDayは同じ枠内の連続した行として表示する */
.learning-history-list {
  display: grid !important;
  gap: 18px !important;
}

.learning-history-month {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--shadow) !important;
}

.learning-history-month > summary {
  min-height: 0 !important;
  padding: 16px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--primary-soft) !important;
  box-shadow: inset 5px 0 0 var(--primary) !important;
}

.learning-history-month > summary:hover {
  border-color: transparent !important;
  background: var(--primary-soft) !important;
}

.learning-history-month .learning-history-summary-title strong {
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
}

.learning-history-month-meta {
  gap: 4px 16px !important;
}

.learning-history-month-meta span {
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.learning-history-month-body,
.learning-history-week-body {
  display: grid !important;
  width: 100% !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Weekは独立カードにせず、Month内の中見出しとしてつなげる */
.learning-history-week {
  width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.learning-history-week > summary {
  min-height: 0 !important;
  padding: 13px 18px !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
  box-shadow: inset 3px 0 0 #9cb5d8 !important;
}

.learning-history-week:first-child > summary {
  border-top: 0 !important;
}

.learning-history-week > summary:hover {
  border-color: var(--line) !important;
  background: #f5f8fc !important;
}

.learning-history-week .learning-history-summary-title strong {
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--primary) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.learning-history-week-article-title {
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* Dayも独立カードにせず、Week内の連続した行として表示する */
.learning-history-day {
  width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.learning-history-day:first-child {
  border-top: 0 !important;
}

.learning-history-day > summary {
  min-height: 0 !important;
  padding: 13px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.learning-history-day > summary:hover {
  background: #fbfcfe !important;
}

.learning-history-day[open] > summary {
  border-bottom: 1px solid var(--line) !important;
  background: #fbfcfe !important;
}

.learning-history-day-title strong {
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.learning-history-day-body {
  width: 100% !important;
  padding: 16px 18px 18px !important;
  background: #fff !important;
}

/* 開閉矢印は維持しつつ、見出しの一体感を損なわない表示にする */
.learning-history-month > summary::after,
.learning-history-week > summary::after,
.learning-history-day > summary::after {
  margin-left: 8px !important;
  color: var(--muted) !important;
  font-size: 22px !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .learning-history-list {
    gap: 14px !important;
  }

  .learning-history-month {
    border-radius: 13px !important;
  }

  .learning-history-month > summary {
    padding: 14px !important;
  }

  .learning-history-month .learning-history-summary-title strong {
    font-size: 16px !important;
  }

  .learning-history-week > summary,
  .learning-history-day > summary {
    padding: 12px 14px !important;
  }

  .learning-history-day-body {
    padding: 12px 14px 15px !important;
  }
}

/* ===== 2026-07-15 学習履歴：サイト全体の配色・UIトーンへ統一 ===== */
/* スマ英全体の赤・淡いピンク・ニュートラルグレーを使用し、
   MonthからDayまでを一続きの履歴として見せる。 */
.learning-history-list {
  gap: 18px !important;
}

.learning-history-month {
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .04) !important;
}

/* Month：サイトの主要カードと同じ赤系の見出し */
.learning-history-month > summary {
  min-height: 0 !important;
  padding: 16px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--primary-soft) !important;
  box-shadow: inset 4px 0 0 var(--primary) !important;
}

.learning-history-month > summary:hover {
  background: #ffe8eb !important;
}

.learning-history-month .learning-history-summary-title strong {
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--primary) !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
}

/* 教材情報は個別カード化せず、見出し内の補足情報として連続表示 */
.learning-history-month-meta {
  gap: 4px 16px !important;
  color: #475467 !important;
}

.learning-history-month-meta span {
  display: inline !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.learning-history-month-meta b,
.learning-history-week-article-title b {
  color: var(--muted) !important;
}

.learning-history-month-body,
.learning-history-week-body {
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Week：Month内の中見出しとしてニュートラルな薄灰色で表示 */
.learning-history-week {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.learning-history-week > summary {
  min-height: 0 !important;
  padding: 13px 18px !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: #f9fafb !important;
  box-shadow: inset 3px 0 0 #fda4af !important;
}

.learning-history-week:first-child > summary {
  border-top: 0 !important;
}

.learning-history-week > summary:hover {
  background: #f6f7f9 !important;
}

.learning-history-week .learning-history-summary-title strong {
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #344054 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.learning-history-week-article-title {
  padding-top: 0 !important;
  border-top: 0 !important;
  color: var(--text) !important;
}

/* Day：Week内の通常行として連続表示 */
.learning-history-day {
  overflow: visible !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--panel) !important;
  box-shadow: none !important;
}

.learning-history-day:first-child {
  border-top: 0 !important;
}

.learning-history-day > summary {
  min-height: 0 !important;
  padding: 13px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--panel) !important;
  box-shadow: none !important;
}

.learning-history-day > summary:hover {
  background: #fff8f8 !important;
}

.learning-history-day[open] > summary {
  border-bottom: 1px solid var(--line) !important;
  background: #fff8f8 !important;
}

.learning-history-day-title strong {
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.learning-history-day-body {
  padding: 18px !important;
  background: var(--panel) !important;
}

/* 開閉矢印もサイトの主色・補助色に統一 */
.learning-history-month > summary::after {
  color: var(--primary) !important;
}

.learning-history-week > summary::after,
.learning-history-day > summary::after {
  color: var(--muted) !important;
}

/* 日時情報・記事・課題カードをサイト共通カードの質感へ合わせる */
.learning-history-date-grid > div {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #f9fafb !important;
}

.learning-history-article-card,
.learning-history-task-card,
.learning-history-general-feedback {
  border-color: var(--line) !important;
  border-radius: 14px !important;
  background: var(--panel) !important;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .035) !important;
}

.learning-history-article-text {
  border-color: var(--line) !important;
  border-radius: 12px !important;
  background: #fbfcff !important;
}

.learning-history-task-heading {
  background: #f9fafb !important;
}

.learning-history-task-question {
  background: var(--panel) !important;
}

.learning-history-task-answer {
  background: #fbfcff !important;
}

.learning-history-task-feedback,
.learning-history-general-feedback {
  background: #fff8f8 !important;
}

.learning-history-task-section .learning-history-field-label {
  color: var(--primary) !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .learning-history-list {
    gap: 14px !important;
  }

  .learning-history-month {
    border-radius: 15px !important;
  }

  .learning-history-month > summary {
    padding: 14px !important;
  }

  .learning-history-month .learning-history-summary-title strong {
    font-size: 16px !important;
  }

  .learning-history-week > summary,
  .learning-history-day > summary {
    padding: 12px 14px !important;
  }

  .learning-history-day-body {
    padding: 12px 14px 15px !important;
  }

  .learning-history-article-card,
  .learning-history-task-card,
  .learning-history-general-feedback {
    border-radius: 12px !important;
    box-shadow: none !important;
  }
}

/* ===== 2026-07-15 学習履歴：担当講師をMonthへ集約 ===== */
.learning-history-date-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.learning-history-day-title {
  min-width: 0;
}

@media (max-width: 620px) {
  .learning-history-date-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== 2026-07-15 学習履歴：技能別グループ・STAGE表示 ===== */
.learning-history-task-list {
  display: grid;
  gap: 18px !important;
}

.learning-history-skill-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 4px 12px rgba(16, 24, 40, .035);
}

.learning-history-skill-heading {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #f9fafb;
}

.learning-history-skill-heading h4 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.4;
}

.learning-history-skill-body {
  display: grid;
}

.learning-history-stage-group + .learning-history-stage-group {
  border-top: 1px solid var(--line);
}

.learning-history-stage-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 12px;
  padding: 11px 16px;
  background: #fff8f8;
}

.learning-history-stage-heading span {
  color: var(--primary);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .035em;
}

.learning-history-stage-heading b {
  color: #475467;
  font-size: 14px;
  font-weight: 600;
}

.learning-history-stage-task-list {
  display: grid;
}

.learning-history-stage-task + .learning-history-stage-task {
  border-top: 1px solid var(--line);
}

.learning-history-stage-task-number {
  padding: 9px 16px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.learning-history-stage-task .learning-history-task-stack {
  border: 0;
  border-radius: 0;
}

.learning-history-stage-task .learning-history-task-section {
  padding: 14px 16px;
}

.learning-history-stage-task .learning-history-task-section:first-child {
  border-top: 0;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .learning-history-task-list {
    gap: 14px !important;
  }

  .learning-history-skill-group {
    border-radius: 12px;
    box-shadow: none;
  }

  .learning-history-skill-heading,
  .learning-history-stage-heading {
    padding: 11px 13px;
  }

  .learning-history-skill-heading h4 {
    font-size: 16px;
  }

  .learning-history-stage-task-number {
    padding: 8px 13px 0;
  }

  .learning-history-stage-task .learning-history-task-section {
    padding: 12px 13px;
  }
}

/* ===== 2026-07-15 学習履歴：技能枠線・フィードバック配色調整 ===== */
.learning-history-skill-group {
  border-color: var(--primary) !important;
}

.learning-history-task-feedback,
.learning-history-general-feedback {
  background: #fffdf4 !important;
}

/* ===== 2026-07-15 学習履歴：技能枠線強調・STAGE内インデント ===== */
.learning-history-skill-group {
  border-width: 2px !important;
}

.learning-history-stage-task-list {
  margin: 0 14px 14px 24px;
  padding-left: 12px;
  border-left: 2px solid #f4b8bd;
}

.learning-history-stage-task {
  min-width: 0;
  background: #fff;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .learning-history-stage-task-list {
    margin: 0 9px 11px 14px;
    padding-left: 8px;
  }
}

/* ===== 2026-07-15 学習履歴：技能枠線復元・Month情報バッヂ ===== */
.learning-history-skill-group {
  border: 1px solid var(--line) !important;
}

.learning-history-month-meta {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px !important;
  margin-top: 8px;
}

.learning-history-month-meta .learning-history-month-badge {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  max-width: 100%;
  min-height: 27px;
  padding: 4px 10px !important;
  border: 1px solid #f3c6cb !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #475467 !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.learning-history-month-meta .learning-history-month-badge-theme {
  background: #fff !important;
  color: #475467 !important;
}

@media (max-width: 620px) {
  .learning-history-month-meta {
    gap: 6px !important;
    margin-top: 7px;
  }

  .learning-history-month-meta .learning-history-month-badge {
    min-height: 25px;
    padding: 3px 8px !important;
    font-size: 11px;
  }
}


/* ===== 2026-07-15 学習履歴：記事タイトル文字色統一 ===== */
.learning-history-week-article-title,
.learning-history-article-heading h4 {
  color: var(--text) !important;
}

.learning-history-week-article-title b {
  color: var(--muted) !important;
}

/* ===== 2026-07-15 本日の課題・提出状況表示調整 ===== */
.study-day-title-row .study-today-task-label {
  border-color: var(--primary) !important;
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}

.study-day-submitted-button {
  background: #667085 !important;
  color: #fff !important;
}

.study-day-submitted-button:hover,
.study-day-submitted-button:focus-visible {
  background: #475467 !important;
}

/* ===== 2026-07-15 本日の課題バッヂ表示条件・文字サイズ調整 ===== */
/* 「本日の課題」は同じ行の状態バッヂと同じ文字サイズに揃える。 */
.study-day-title-row .study-today-task-label {
  font-size: 11px !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-day-title-row .study-today-task-label {
    font-size: 10px !important;
  }
}

/* ===== 2026-07-15 Day 5重要語ハイライト・記事結合間隔 ===== */
.practical-day5-article-part {
  margin: 0;
  padding: 0;
}

.practical-day5-article-part + .practical-day5-article-part {
  margin-top: 1.75em;
  margin-top: 1lh;
}

.practical-day5-article-part > :first-child {
  margin-top: 0 !important;
}

.practical-day5-article-part > :last-child {
  margin-bottom: 0 !important;
}


/* ===== 2026-07-15 Day5表示・本日の課題バッヂ・Week共通単語 ===== */
/* 「本日の課題」は完了等の状態バッヂと同じ寸法・形状を使い、色だけ赤にする。 */
.study-day-title-row .study-today-task-label {
  min-height: 26px !important;
  padding: 4px 9px !important;
  border: 1px solid var(--primary) !important;
  border-radius: 999px !important;
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.admin-material-week-vocabulary-section {
  border-top: 3px solid var(--primary);
}

.admin-material-week-vocabulary-section > .admin-material-section-head h3 {
  color: var(--text);
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-day-title-row .study-today-task-label {
    min-height: 23px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
  }
}

/* ===== 2026-07-15 Day5重要単語チェック位置・Week共通ハイライト修正 ===== */
.practical-day5-vocab-toggle-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 8px 0 6px;
}

.practical-day5-vocab-toggle-row .practical-day5-vocab-toggle {
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  text-align: right;
}

.practical-day5-vocab-toggle-row + .practical-article-text-panel {
  margin-top: 0 !important;
}

/* 旧配置用のグリッド指定を無効化 */
.practical-article-top-actions .practical-day5-vocab-toggle {
  grid-column: auto !important;
  grid-row: auto !important;
}

body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-day5-vocab-toggle-row {
  display: none !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .practical-day5-vocab-toggle-row {
    margin-top: 7px;
    margin-bottom: 5px;
  }

  .practical-day5-vocab-toggle-row .practical-day5-vocab-toggle {
    width: auto !important;
  }
}

/* ===== 2026-07-15 Day5ハイライト切替をタイトル下端・右端へ配置 ===== */
.practical-article-topline.has-day5-vocab-toggle {
  align-items: stretch !important;
}

.practical-article-topline.has-day5-vocab-toggle .practical-article-heading-block {
  min-width: 0 !important;
  align-self: stretch !important;
  justify-content: flex-end !important;
}

.practical-article-topline.has-day5-vocab-toggle .practical-article-heading-block h2 {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.practical-article-top-actions.has-day5-vocab-toggle {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-self: stretch !important;
  align-items: start !important;
  justify-items: end !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(48vw, 360px) !important;
  column-gap: 8px !important;
  row-gap: 5px !important;
}

.practical-article-top-actions.has-day5-vocab-toggle .practical-article-fullscreen-button {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
}

.practical-article-top-actions.has-day5-vocab-toggle .practical-day5-vocab-toggle {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-self: end !important;
  justify-self: end !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: right !important;
  white-space: normal !important;
}

.practical-article-top-actions.has-day5-vocab-toggle .practical-day5-vocab-toggle span {
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.practical-article-top-actions.has-day5-vocab-toggle .practical-article-text-toolbar {
  display: none !important;
}

/* 旧・記事本文直上の独立行は使用しない */
.practical-day5-vocab-toggle-row {
  display: none !important;
}

body.practical-article-fullscreen-open .practical-sticky-article.is-fullscreen .practical-article-top-actions.has-day5-vocab-toggle .practical-day5-vocab-toggle {
  display: none !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .practical-article-topline.has-day5-vocab-toggle {
    grid-template-columns: minmax(0, 1fr) minmax(154px, 48vw) !important;
    gap: 7px !important;
  }

  .practical-article-top-actions.has-day5-vocab-toggle {
    width: 100% !important;
    max-width: 100% !important;
    column-gap: 5px !important;
    row-gap: 4px !important;
  }

  .practical-article-top-actions.has-day5-vocab-toggle .practical-day5-vocab-toggle {
    width: auto !important;
    max-width: 100% !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 430px) {
  .practical-article-topline.has-day5-vocab-toggle {
    grid-template-columns: minmax(0, 1fr) minmax(146px, 50vw) !important;
  }
}

/* ===== 2026-07-15 Day5全画面ハイライト操作・単語モーダル前面表示 ===== */
/* 全画面表示中も、記事タイトル右側のハイライト切替を表示する。 */
body.practical-article-fullscreen-open
  .practical-sticky-article.is-fullscreen
  .practical-article-top-actions.has-day5-vocab-toggle
  .practical-day5-vocab-toggle {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 全画面記事（z-index:3300）より上に単語・熟語の詳細を表示する。 */
body.practical-article-fullscreen-open .study-vocabulary-modal-backdrop {
  top: var(--practical-fullscreen-top, 0px) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 5600 !important;
}

body.practical-article-fullscreen-open .study-vocabulary-modal {
  position: relative;
  z-index: 5601 !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.practical-article-fullscreen-open .study-vocabulary-modal-backdrop,
  body.practical-article-fullscreen-open.student-mobile-nav-enabled .study-vocabulary-modal-backdrop {
    top: var(--practical-fullscreen-top, env(safe-area-inset-top, 0px)) !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* ===== 2026-07-15 講師報酬管理 ===== */
.teacher-reward-header-card,
.teacher-reward-statement-head,
.admin-reward-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.teacher-reward-header-card h3,
.teacher-reward-statement-head h3,
.admin-reward-section-head h3 {
  margin-top: 0;
}

.teacher-reward-header-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.teacher-reward-header-actions label,
.admin-reward-section-head label {
  min-width: 180px;
  margin: 0;
}

.teacher-reward-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.teacher-reward-summary-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 112px;
  justify-content: center;
}

.teacher-reward-summary-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.teacher-reward-summary-card b {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
}

.teacher-reward-summary-card.total {
  border: 2px solid var(--primary);
}

.teacher-reward-table th,
.teacher-reward-table td {
  vertical-align: top;
}

.teacher-reward-table td small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.45;
}

.teacher-reward-table .reward-amount {
  text-align: right;
  white-space: nowrap;
}

.reward-positive {
  color: #167247;
}

.reward-negative {
  color: var(--danger);
}

.teacher-reward-adjustment {
  min-width: 130px;
}

.teacher-reward-confirm-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.teacher-reward-confirm-action p {
  margin: 0;
}

.teacher-reward-confirmed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.teacher-reward-dashboard-card {
  display: flex;
  flex-direction: column;
}

.teacher-reward-dashboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.teacher-reward-dashboard-row:first-of-type {
  border-top: 0;
}

.teacher-reward-dashboard-row > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.teacher-reward-dashboard-row span {
  font-size: 18px;
  font-weight: 700;
}

.admin-reward-config-grid {
  align-items: start;
}

.admin-reward-template-card h4 {
  margin: 18px 0 8px;
}

.admin-reward-rate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-reward-rate-grid label {
  margin: 0;
}

.admin-reward-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 280px));
  gap: 12px;
}

.admin-reward-filter-grid label {
  margin: 0;
}

.teacher-reward-adjust-cell {
  min-width: 280px;
}

.teacher-reward-adjust-controls {
  display: grid;
  grid-template-columns: 105px minmax(150px, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.teacher-reward-adjust-controls label {
  margin: 0;
  font-size: 11px;
}

.teacher-reward-adjust-controls input {
  margin-top: 4px;
}

@media (max-width: 980px) {
  .teacher-reward-summary-grid,
  .admin-reward-rate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-reward-adjust-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .teacher-reward-header-card,
  .teacher-reward-statement-head,
  .admin-reward-section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .teacher-reward-header-actions,
  .teacher-reward-header-actions label,
  .admin-reward-section-head label {
    width: 100%;
  }

  .teacher-reward-summary-grid,
  .admin-reward-rate-grid,
  .admin-reward-filter-grid {
    grid-template-columns: 1fr;
  }

  .teacher-reward-summary-card {
    min-height: 92px;
  }

  .teacher-reward-confirm-action,
  .teacher-reward-confirmed,
  .teacher-reward-dashboard-row {
    align-items: stretch;
    flex-direction: column;
  }

  .teacher-reward-dashboard-row button,
  .teacher-reward-confirm-action button {
    width: 100%;
  }
}

/* ===== 2026-07-15 学習履歴：記事タイトル・Day種別・スマホ日時2列 ===== */
/* Week内の記事タイトルが親要素のアクセント色を継承しないよう、値部分にも文字色を明示する。 */
.learning-history-week-article-title,
.learning-history-week-article-title .learning-history-week-article-title-text,
.learning-history-article-heading h4 {
  color: var(--text) !important;
}

.learning-history-week-article-title .learning-history-week-article-title-text {
  font-weight: 500;
}

/* Day番号の右隣に Overview / The Details / Review & Test / AI Training を表示する。 */
.learning-history-day-title {
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 7px 10px !important;
}

.learning-history-day-title .learning-history-day-theme {
  display: inline !important;
  min-width: 0;
  overflow: visible;
  color: var(--muted) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
}

/* スマホでも提出日時とフィードバック完了日時を横2列で表示する。 */
@media (max-width: 620px) {
  .learning-history-date-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .learning-history-date-grid > div {
    min-width: 0;
    padding: 10px 9px !important;
  }

  .learning-history-date-grid span {
    font-size: 10.5px;
    line-height: 1.35;
  }

  .learning-history-date-grid b {
    min-width: 0;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .learning-history-day-title .learning-history-day-theme {
    font-size: 12px;
  }
}


/* ===== 2026-07-15 課題学習：「提出済」ボタンの幅・色調整 ===== */
/* 「学習を始める」と同じ横幅で固定する。 */
.study-day-card > button {
  box-sizing: border-box;
  width: 143px;
  min-width: 143px;
  max-width: 143px;
}

/* 提出済みの課題は薄いグレーで表示する。 */
.study-day-card > button.study-day-submitted-button {
  background: #e4e7ec !important;
  color: #475467 !important;
}

.study-day-card > button.study-day-submitted-button:hover,
.study-day-card > button.study-day-submitted-button:focus-visible {
  background: #d0d5dd !important;
  color: #344054 !important;
}


/* ===== 2026-07-15 講師「担当生徒」テーブル ===== */
.teacher-students-table table {
  min-width: 930px;
}

.teacher-students-table th:nth-child(2),
.teacher-students-table td:nth-child(2) {
  min-width: 230px;
}

.teacher-student-course-content {
  display: grid;
  gap: 4px;
}

.teacher-student-course-content > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.teacher-student-course-content span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.teacher-student-course-content b {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.teacher-student-month-cell,
.teacher-student-name-cell {
  white-space: nowrap;
}

.teacher-student-status {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.teacher-student-status.before {
  background: #f2f4f7;
  color: #475467;
}

.teacher-student-status.active {
  background: #ecfdf3;
  color: #067647;
}

.teacher-student-status.stopped {
  background: #fffaeb;
  color: #b54708;
}

.teacher-student-status.ended {
  background: #f2f4f7;
  color: #667085;
}

.teacher-students-table .teacher-student-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 198px;
  margin-top: 0;
}

.teacher-students-table .teacher-student-actions button {
  width: auto;
  min-width: 0;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .teacher-students-table .teacher-student-actions button {
    width: auto;
  }
}


/* ===== 2026-07-15 レッスンノート編集ツールバー ===== */
.lesson-note-create-card {
  max-width: 100%;
}

.lesson-note-toolbar {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  margin: 6px 0 0;
  padding: 6px;
  border: 1px solid #d8dbe2;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #f8fafc;
  box-sizing: border-box;
}

.note-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 5px;
  margin-right: 1px;
  border-right: 1px solid #d8dbe2;
}

.note-toolbar-group:last-child {
  padding-right: 0;
  border-right: 0;
}

.note-toolbar-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #344054 !important;
  box-shadow: none !important;
}

.note-toolbar-button:hover,
.note-toolbar-button:focus-visible {
  border-color: #cfd4dc !important;
  background: #fff !important;
}

.note-toolbar-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.note-toolbar-select {
  width: auto !important;
  min-width: 116px;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 4px 28px 4px 8px !important;
  border-radius: 6px !important;
  font-size: 12px;
}

.note-toolbar-font-size {
  min-width: 78px;
}

.note-toolbar-color-group {
  gap: 4px;
}

.note-toolbar-color {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 !important;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #344054;
  font-weight: 800;
  cursor: pointer;
}

.note-toolbar-color:hover,
.note-toolbar-color:focus-within {
  border-color: #cfd4dc;
  background: #fff;
}

.note-toolbar-color::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 5px;
  left: 6px;
  height: 3px;
  border-radius: 2px;
  background: #111827;
}

.note-toolbar-highlight::after {
  background: #fff2a8;
}

.note-toolbar-color input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  cursor: pointer;
}

.lesson-note-editor {
  min-height: 280px !important;
  margin-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
  outline: none;
}

.lesson-note-editor:focus {
  border-color: #98a2b3;
  box-shadow: 0 0 0 2px rgba(152, 162, 179, .16);
}

.lesson-note-readonly {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

@media (max-width: 620px) {
  .lesson-note-toolbar {
    align-items: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .note-toolbar-group {
    flex: 0 0 auto;
  }

  .note-toolbar-select {
    min-width: 104px;
  }

  .note-toolbar-font-size {
    min-width: 72px;
  }

  .lesson-note-editor {
    min-height: 220px !important;
  }
}
/* ===== 2026-07-15 レッスンノート：全画面編集・ツールバー参照修正 ===== */
.lesson-note-editor-shell {
  position: relative;
  width: 100%;
  min-width: 0;
}

.note-toolbar-fullscreen-group {
  margin-left: auto;
  padding-right: 0;
  border-right: 0;
}

.note-toolbar-fullscreen-button[aria-pressed="true"] {
  background: #e9edf3;
  color: #101828;
}

.lesson-note-editor-shell.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
  padding: 12px;
  background: #fff;
  box-sizing: border-box;
}

.lesson-note-editor-shell.is-fullscreen .lesson-note-toolbar {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin: 0 !important;
  border-bottom: 1px solid #d8dbe2;
  border-radius: 10px 10px 0 0;
}

.lesson-note-editor-shell.is-fullscreen .lesson-note-editor {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: auto;
  border-radius: 0 0 10px 10px !important;
  box-sizing: border-box;
}

body.lesson-note-fullscreen-open {
  overflow: hidden !important;
}

@media (max-width: 620px) {
  .lesson-note-editor-shell.is-fullscreen {
    padding: 6px;
  }

  .lesson-note-editor-shell.is-fullscreen .lesson-note-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .note-toolbar-fullscreen-group {
    position: sticky;
    right: 0;
    flex: 0 0 auto;
    margin-left: 4px;
    padding-left: 4px;
    background: #f8fafc;
  }
}
/* ===== 2026-07-15 レッスンノート：生徒・Month・Week・Lesson選択 ===== */
.lesson-note-picker-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.lesson-note-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  margin-top: 14px;
}

.lesson-note-picker-field {
  min-width: 0;
}

.lesson-note-picker-field label {
  display: block;
  margin: 0 0 5px;
}

.lesson-note-picker-field select {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.lesson-note-picker-field select:disabled {
  opacity: 1;
  color: #667085;
  background: #f6f7f9;
  cursor: default;
}

.lesson-note-picker-detail {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e4e7ec;
}

.lesson-note-picker-empty {
  margin: 0;
}

.lesson-note-edit-panel,
.lesson-note-view-panel {
  min-width: 0;
}

.lesson-note-selected-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.lesson-note-selected-date {
  color: #475467;
  font-size: 13px;
  font-weight: 600;
}

.lesson-note-display-card {
  margin: 0 !important;
  box-shadow: none;
}

.lesson-note-display-card .lesson-note-readonly {
  line-height: 1.75;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .lesson-note-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 520px) {
  .lesson-note-picker-grid {
    grid-template-columns: 1fr;
  }

  .lesson-note-picker-detail {
    margin-top: 14px;
    padding-top: 14px;
  }
}


/* ===== 2026-07-15 レッスンノート：Week削除・削除・印刷 ===== */
.lesson-note-picker-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}

.lesson-note-picker-grid-student {
  max-width: 760px;
}

.lesson-note-picker-grid-teacher {
  max-width: 980px;
}

.lesson-note-view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.lesson-note-view-toolbar .lesson-note-selected-meta {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.lesson-note-print-actions {
  display: none;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin: 0;
}

.lesson-note-print-actions button {
  width: auto;
  min-width: 88px;
  margin: 0;
}

.lesson-note-document-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: -4px 0 18px;
  line-height: 1.6;
}

.lesson-note-meta-separator {
  color: #98a2b3;
}

@media (min-width: 821px) {
  .lesson-note-print-actions {
    display: flex;
  }
}

.lesson-note-edit-actions {
  align-items: center;
}

.lesson-note-edit-actions .danger {
  width: auto;
}

@media (max-width: 520px) {
  .lesson-note-view-toolbar {
    align-items: center;
    flex-wrap: nowrap;
  }

  .lesson-note-view-toolbar .lesson-note-selected-meta {
    min-width: 0;
  }

  .lesson-note-document-meta {
    display: grid;
    gap: 2px;
    margin-bottom: 16px;
  }

  .lesson-note-meta-separator {
    display: none;
  }
}

@media print {
  @page {
    size: auto;
    margin: 14mm;
  }

  html,
  body {
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body.lesson-note-printing {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.lesson-note-printing .sidebar,
  body.lesson-note-printing .topbar,
  body.lesson-note-printing .lesson-note-picker-card > h3,
  body.lesson-note-printing .lesson-note-picker-card > p,
  body.lesson-note-printing .lesson-note-picker-grid,
  body.lesson-note-printing .lesson-note-print-actions {
    display: none !important;
  }

  body.lesson-note-printing .app,
  body.lesson-note-printing .main,
  body.lesson-note-printing #content,
  body.lesson-note-printing .lesson-note-picker-card,
  body.lesson-note-printing .lesson-note-picker-detail,
  body.lesson-note-printing .lesson-note-view-panel,
  body.lesson-note-printing .lesson-note-display-card,
  body.lesson-note-printing .lesson-note-readonly {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body.lesson-note-printing .main,
  body.lesson-note-printing #content,
  body.lesson-note-printing .lesson-note-picker-card,
  body.lesson-note-printing .lesson-note-picker-detail {
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.lesson-note-printing .lesson-note-picker-detail {
    border-top: 0 !important;
  }

  body.lesson-note-printing .lesson-note-view-toolbar {
    display: block !important;
    margin: 0 0 14px !important;
  }

  body.lesson-note-printing .lesson-note-selected-meta {
    margin: 0 0 14px !important;
  }

  body.lesson-note-printing .lesson-note-display-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.lesson-note-printing .lesson-note-document-meta {
    display: flex !important;
    margin: -4px 0 18px !important;
    color: #475467 !important;
  }

  body.lesson-note-printing .lesson-note-meta-separator {
    display: inline !important;
  }

  body.lesson-note-printing .lesson-note-readonly,
  body.lesson-note-printing .lesson-note-readonly * {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.lesson-note-printing .lesson-note-readonly h1,
  body.lesson-note-printing .lesson-note-readonly h2,
  body.lesson-note-printing .lesson-note-readonly h3,
  body.lesson-note-printing .lesson-note-readonly h4 {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  body.lesson-note-printing .lesson-note-readonly p {
    orphans: 3;
    widows: 3;
  }

  body.lesson-note-printing .lesson-note-readonly img,
  body.lesson-note-printing .lesson-note-readonly video,
  body.lesson-note-printing .lesson-note-readonly tr,
  body.lesson-note-printing .lesson-note-readonly blockquote {
    max-width: 100% !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}
/* ===== 2026-07-15 ビデオフィードバック録画UI・一時保存 ===== */
.video-feedback-manage-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.video-feedback-manage-card .video-recorder {
  display: grid;
  justify-items: start;
  gap: 10px;
  width: 100%;
  margin: 14px 0 18px;
}

.video-preview-shell {
  position: relative;
  width: 100%;
  max-width: min(720px, calc(56vh * 1.7778));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  background: #101114;
  box-sizing: border-box;
}

.video-preview-shell video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #101114;
  object-fit: contain;
}

.video-preview-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  color: #d0d5dd;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  pointer-events: none;
}

.video-preview-placeholder[hidden] {
  display: none !important;
}

.video-recording-actions {
  justify-content: flex-start;
  width: 100%;
  margin: 0 !important;
}

.video-recording-actions button {
  width: auto;
  min-width: 132px;
}

.video-record-toggle.recording {
  border-color: #b42318 !important;
  background: #b42318 !important;
  color: #fff !important;
  animation: video-record-button-pulse 1.2s ease-in-out infinite;
}

.video-record-status {
  min-height: 20px;
}

@keyframes video-record-button-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(180, 35, 24, .26);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(180, 35, 24, 0);
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .video-feedback-manage-card .video-recorder {
    justify-items: center;
  }

  .video-preview-shell {
    width: min(100%, calc(58vh * 1.7778));
    max-width: 640px;
  }

  .video-recording-actions {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .video-preview-shell {
    width: 100%;
    max-width: 100%;
  }

  .video-recording-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  .video-recording-actions button {
    width: 100%;
    min-width: 0;
  }
}
/* ===== 2026-07-15 生徒ビデオフィードバック：PC動画サイズ ===== */
.student-video-feedback-card .video-frame {
  display: block;
  object-fit: contain;
  margin-top: 12px;
}

@media (min-width: 821px) {
  .student-video-feedback-card .video-frame {
    width: 100%;
    max-width: min(720px, calc(56vh * 1.7778));
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .student-video-feedback-card .video-frame {
    width: 100%;
    max-width: 100%;
  }
}
/* ===== 2026-07-15 レッスンノート印刷：全ページ出力・下部メニュー除外 ===== */
@media print {
  /*
   * スマホ表示ではbodyがposition:fixed / 100dvhになっているため、
   * 印刷時には文書全体が複数ページへ流れる通常レイアウトへ戻します。
   */
  html,
  body.lesson-note-printing {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    transform: none !important;
    contain: none !important;
    background: #ffffff !important;
  }

  body.lesson-note-printing #appView,
  body.lesson-note-printing .app,
  body.lesson-note-printing .main,
  body.lesson-note-printing #content,
  body.lesson-note-printing .lesson-note-picker-card,
  body.lesson-note-printing .lesson-note-picker-detail,
  body.lesson-note-printing .lesson-note-view-panel,
  body.lesson-note-printing .lesson-note-display-card,
  body.lesson-note-printing .lesson-note-readonly {
    position: static !important;
    inset: auto !important;
    display: block !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    transform: none !important;
    contain: none !important;
    background: #ffffff !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  body.lesson-note-printing #appView,
  body.lesson-note-printing .app,
  body.lesson-note-printing .main,
  body.lesson-note-printing #content {
    padding: 0 !important;
  }

  /*
   * 画面下に固定されるスマホ用ナビゲーションとメニューを
   * 印刷レイアウトから完全に除外します。
   */
  body.lesson-note-printing #studentBottomNav,
  body.lesson-note-printing #studentMobileHub,
  body.lesson-note-printing .student-bottom-nav,
  body.lesson-note-printing .student-mobile-hub,
  body.lesson-note-printing .student-mobile-hub-backdrop,
  body.lesson-note-printing .student-mobile-hub-panel,
  body.lesson-note-printing .mobile-bottom-nav,
  body.lesson-note-printing .page-loading-overlay,
  body.lesson-note-printing .soft-page-activity {
    display: none !important;
    visibility: hidden !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /*
   * ノートカードそのものを1ページ内に押し込めず、
   * 本文が長い場合は次ページへ自然に継続させます。
   */
  body.lesson-note-printing .lesson-note-view-panel,
  body.lesson-note-printing .lesson-note-display-card,
  body.lesson-note-printing .lesson-note-readonly,
  body.lesson-note-printing .lesson-note-readonly > div,
  body.lesson-note-printing .lesson-note-readonly > section,
  body.lesson-note-printing .lesson-note-readonly > article {
    break-before: auto !important;
    break-after: auto !important;
    break-inside: auto !important;
    page-break-before: auto !important;
    page-break-after: auto !important;
    page-break-inside: auto !important;
  }

  body.lesson-note-printing .lesson-note-readonly p,
  body.lesson-note-printing .lesson-note-readonly li {
    overflow: visible !important;
    orphans: 2;
    widows: 2;
  }

  body.lesson-note-printing .lesson-note-readonly img,
  body.lesson-note-printing .lesson-note-readonly video,
  body.lesson-note-printing .lesson-note-readonly table {
    max-width: 100% !important;
  }
}

/* ===== 2026-07-15 Day5 AI確認テスト ===== */
body.ai-confirmation-active .practical-study-shell {
  display: none;
}

.ai-confirmation-start-layout,
.ai-confirmation-session-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.ai-confirmation-start-card,
.ai-confirmation-chat-card,
.ai-confirmation-session-header {
  border: 1px solid #e3e7ee;
}

.ai-confirmation-start-heading,
.ai-confirmation-session-tutor {
  display: flex;
  align-items: center;
  gap: 24px;
}

.ai-confirmation-start-heading h2,
.ai-confirmation-session-header h2 {
  margin: 8px 0;
}

.ai-tutor-illustration {
  flex: 0 0 auto;
  width: 150px;
  text-align: center;
}

.ai-tutor-illustration svg {
  display: block;
  width: 100%;
  height: auto;
}

.ai-tutor-illustration strong,
.ai-tutor-illustration span {
  display: block;
}

.ai-tutor-illustration span {
  margin-top: 2px;
  color: #667085;
  font-size: 12px;
}

.ai-tutor-illustration.compact {
  width: 54px;
}

.ai-avatar-bg { fill: #f1f5ff; }
.ai-avatar-body { fill: #2f5fb3; }
.ai-avatar-neck, .ai-avatar-face { fill: #f2c7a5; }
.ai-avatar-hair, .ai-avatar-hair-front { fill: #27324a; }
.ai-tutor-illustration.female .ai-avatar-hair,
.ai-tutor-illustration.female .ai-avatar-hair-front { fill: #69493d; }
.ai-avatar-eye { fill: #27324a; }
.ai-avatar-smile { fill: none; stroke: #a84e4e; stroke-width: 3; stroke-linecap: round; }
.ai-avatar-badge { fill: #e31e2f; }
.ai-avatar-badge-mark { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }

.ai-confirmation-notice {
  margin: 24px 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: #f7f9fc;
}

.ai-confirmation-notice p { margin: 5px 0 0; }

.ai-confirmation-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ai-confirmation-setting.wide { grid-column: 1 / -1; }
.ai-confirmation-setting label { display: block; margin-bottom: 7px; font-weight: 700; }
.ai-confirmation-setting input,
.ai-confirmation-setting select,
.ai-confirmation-setting textarea { width: 100%; }
.ai-confirmation-setting textarea { min-height: 96px; }
.ai-confirmation-setting.range-setting input { accent-color: #e31e2f; }
.ai-confirmation-setting output { color: #e31e2f; font-size: 18px; }
.ai-confirmation-start-actions { justify-content: flex-end; margin-top: 22px; }

.ai-confirmation-session-shell {
  display: grid;
  gap: 16px;
}

.ai-confirmation-session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ai-confirmation-session-header .ai-tutor-illustration { width: 92px; }
.ai-confirmation-session-tutor { min-width: 0; }
.ai-confirmation-settings-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-confirmation-settings-summary span { padding: 5px 9px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 12px; }
.ai-confirmation-session-status { flex: 0 0 auto; min-width: 112px; padding: 12px 16px; border-radius: 12px; background: #fff6f6; text-align: center; }
.ai-confirmation-session-status span,
.ai-confirmation-session-status small { display: block; color: #667085; }
.ai-confirmation-session-status strong { display: block; margin: 3px 0; font-size: 24px; font-variant-numeric: tabular-nums; color: #c91628; }

.ai-confirmation-chat-card { padding: 0 !important; overflow: hidden; }
.ai-confirmation-chat-log { height: min(54vh, 560px); min-height: 360px; padding: 24px; overflow-y: auto; background: #f6f8fb; }
.ai-chat-row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 18px; }
.ai-chat-row.user { justify-content: flex-end; }
.ai-chat-bubble { max-width: min(76%, 720px); padding: 14px 16px; border-radius: 17px; box-shadow: 0 2px 8px rgba(22, 32, 51, .06); }
.ai-chat-bubble p { margin: 5px 0 0; line-height: 1.75; }
.ai-chat-bubble.assistant { border-bottom-left-radius: 5px; background: #fff; }
.ai-chat-bubble.user { border-bottom-right-radius: 5px; background: #dce9ff; }
.ai-chat-role { font-size: 12px; font-weight: 800; color: #475467; }
.ai-chat-mode { display: inline-block; margin-top: 8px; color: #486284; font-size: 11px; }
.ai-chat-translation { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #d5dae3; color: #475467; }
.ai-chat-translation span { font-size: 11px; font-weight: 800; }
.ai-chat-translation p { font-size: 13px; }
.ai-chat-speak-button { width: auto; margin-top: 10px; padding: 7px 11px; font-size: 12px; }

.ai-confirmation-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(280px, .72fr); gap: 18px; align-items: stretch; padding: 20px 24px; border-top: 1px solid #e5e7eb; background: #fff; }
.ai-confirmation-text-form label,
.ai-confirmation-recording-panel > label { display: block; margin-bottom: 7px; font-weight: 700; }
.ai-confirmation-text-form textarea { min-height: 105px; resize: vertical; }
.ai-confirmation-text-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; color: #667085; font-size: 12px; }
.ai-confirmation-text-footer button { width: auto; }
.ai-confirmation-or { display: grid; place-items: center; color: #98a2b3; }
.ai-confirmation-or span { padding: 6px; background: #fff; }
.ai-confirmation-record-actions { margin: 0; }
.ai-confirmation-record-actions button { width: auto; }
.ai-confirmation-record-actions .recording { color: #fff !important; background: #c91628 !important; border-color: #c91628 !important; }
.ai-confirmation-recording-panel audio { width: 100%; margin-top: 8px; }
#aiConfirmationActionResult { grid-column: 1 / -1; }
.ai-confirmation-bottom-actions { justify-content: space-between; margin: 0; padding: 14px 24px 20px; border-top: 1px solid #e5e7eb; }
.ai-confirmation-bottom-actions button { width: auto; }
.ai-confirmation-complete-panel { display: flex; align-items: center; gap: 15px; margin: 22px 24px; padding: 18px; border-radius: 14px; background: #edf9f1; }
.ai-confirmation-complete-panel h3,
.ai-confirmation-complete-panel p { margin: 0; }
.ai-confirmation-complete-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: #238a4b; color: #fff; font-size: 24px; }
.ai-confirmation-loading { min-height: 300px; display: grid; place-items: center; }

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-confirmation-start-heading,
  .ai-confirmation-session-tutor { align-items: flex-start; gap: 14px; }
  .ai-confirmation-start-heading .ai-tutor-illustration { width: 92px; }
  .ai-confirmation-settings-grid { grid-template-columns: 1fr; }
  .ai-confirmation-setting.wide { grid-column: auto; }
  .ai-confirmation-session-header { align-items: flex-start; }
  .ai-confirmation-session-header .ai-tutor-illustration { width: 72px; }
  .ai-confirmation-session-status { min-width: 92px; padding: 9px; }
  .ai-confirmation-chat-log { height: calc(100dvh - 430px); min-height: 320px; padding: 15px 12px; }
  .ai-chat-bubble { max-width: 86%; }
  .ai-confirmation-composer { grid-template-columns: 1fr; gap: 12px; padding: 16px 14px; }
  .ai-confirmation-or { display: block; text-align: center; }
  #aiConfirmationActionResult { grid-column: auto; }
  .ai-confirmation-bottom-actions { padding: 12px 14px 18px; }
}

@media (max-width: 520px) {
  .ai-confirmation-start-card { padding: 16px !important; }
  .ai-confirmation-start-heading { display: block; text-align: center; }
  .ai-confirmation-start-heading .ai-tutor-illustration { margin: 0 auto 10px; }
  .ai-confirmation-session-header { display: grid; grid-template-columns: 1fr auto; padding: 14px !important; }
  .ai-confirmation-session-tutor .ai-tutor-illustration { display: none; }
  .ai-confirmation-session-header h2 { font-size: 18px; }
  .ai-confirmation-settings-summary { display: none; }
  .ai-confirmation-session-status strong { font-size: 20px; }
  .ai-confirmation-chat-log { height: calc(100dvh - 390px); min-height: 300px; }
  .ai-chat-row .ai-tutor-illustration.compact { width: 40px; }
  .ai-chat-bubble { max-width: 88%; padding: 12px 13px; }
  .ai-confirmation-record-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
  .ai-confirmation-record-actions button { width: 100%; min-width: 0; }
  .ai-confirmation-bottom-actions { display: grid !important; grid-template-columns: 1fr; }
  .ai-confirmation-bottom-actions button { width: 100%; }
}

/* ===== 2026-07-15 AI確認テスト：スクロール・Day5記事レイアウト最適化 ===== */

/*
 * AI画面は課題学習画面から開くため、bodyにはpractical-study-activeが残ります。
 * 課題学習専用の100dvh固定とoverflow:hiddenをAI画面では解除します。
 */
html:has(body.ai-confirmation-active),
body.ai-confirmation-active {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

body.ai-confirmation-active .app {
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow: visible !important;
}

body.ai-confirmation-active .main,
body.ai-confirmation-active.app-mode .main,
body.ai-confirmation-active.practical-study-active .main {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
}

body.ai-confirmation-active #content,
body.ai-confirmation-active.practical-study-active #content {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.ai-confirmation-start-layout,
.ai-confirmation-session-shell {
  width: min(1320px, 100%);
  min-height: 0;
  padding-bottom: 36px;
  overflow: visible;
}

.ai-confirmation-start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .8fr);
  gap: 18px;
  align-items: start;
}

.ai-confirmation-session-workspace {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.5fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.ai-confirmation-start-card,
.ai-confirmation-chat-card,
.ai-confirmation-session-header,
.ai-confirmation-article-card {
  min-width: 0;
}

.ai-confirmation-article-card {
  position: sticky;
  top: 16px;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid #e3e7ee;
  background: #fff;
}

.ai-confirmation-article-summary {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 15px 46px 15px 17px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid transparent;
  background: #f8fafc;
}

.ai-confirmation-article-card[open] .ai-confirmation-article-summary {
  border-bottom-color: #e5e7eb;
}

.ai-confirmation-article-summary::-webkit-details-marker {
  display: none;
}

.ai-confirmation-article-label {
  color: #c91628;
  font-size: 12px;
  font-weight: 800;
}

.ai-confirmation-article-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.ai-confirmation-article-toggle {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #667085;
  border-bottom: 2px solid #667085;
  transform: translateY(-65%) rotate(45deg);
  transition: transform .18s ease;
}

.ai-confirmation-article-card[open] .ai-confirmation-article-toggle {
  transform: translateY(-35%) rotate(225deg);
}

.ai-confirmation-article-scroll {
  max-height: calc(100dvh - 190px);
  padding: 18px;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.ai-confirmation-start-grid .ai-confirmation-article-scroll {
  max-height: calc(100dvh - 150px);
}

.ai-confirmation-article-scroll > :first-child {
  margin-top: 0;
}

.ai-confirmation-article-scroll > :last-child {
  margin-bottom: 0;
}

.ai-confirmation-article-scroll img,
.ai-confirmation-article-scroll video,
.ai-confirmation-article-scroll iframe {
  max-width: 100%;
  height: auto;
}

.ai-confirmation-article-scroll table {
  width: 100%;
  max-width: 100%;
}

.ai-confirmation-chat-card {
  overflow: visible !important;
}

.ai-confirmation-chat-log {
  height: clamp(360px, 46dvh, 540px);
  min-height: 0;
  overflow-y: auto;
}

.ai-confirmation-composer,
.ai-confirmation-bottom-actions,
.ai-confirmation-complete-panel {
  position: static;
}

@media (max-width: 1050px) {
  .ai-confirmation-start-grid,
  .ai-confirmation-session-workspace {
    grid-template-columns: 1fr;
  }

  .ai-confirmation-article-card {
    position: static;
    order: -1;
  }

  .ai-confirmation-start-grid .ai-confirmation-article-card {
    order: 0;
  }

  .ai-confirmation-article-scroll,
  .ai-confirmation-start-grid .ai-confirmation-article-scroll {
    max-height: min(42dvh, 440px);
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.ai-confirmation-active .main,
  body.ai-confirmation-active.app-mode .main,
  body.ai-confirmation-active.practical-study-active .main {
    height: auto !important;
    min-height: 100dvh !important;
    padding-bottom: calc(
      var(--student-bottom-nav-height, 68px)
      + env(safe-area-inset-bottom)
      + 22px
    ) !important;
    overflow-y: visible !important;
  }

  body.ai-confirmation-active .topbar,
  body.ai-confirmation-active.header-hidden .topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: calc(100% + 24px) !important;
    margin: 0 -12px !important;
    transform: none !important;
  }

  .ai-confirmation-start-layout,
  .ai-confirmation-session-shell {
    padding-bottom: 18px;
  }

  .ai-confirmation-session-shell {
    gap: 10px;
  }

  .ai-confirmation-session-workspace {
    gap: 10px;
  }

  .ai-confirmation-article-card {
    position: static;
  }

  .ai-confirmation-article-summary {
    padding: 13px 42px 13px 14px;
  }

  .ai-confirmation-article-scroll,
  .ai-confirmation-start-grid .ai-confirmation-article-scroll {
    max-height: min(36dvh, 360px);
    padding: 14px;
    font-size: 14px;
  }

  .ai-confirmation-chat-log {
    height: min(45dvh, 440px) !important;
    min-height: 260px !important;
    padding: 15px 12px;
  }

  .ai-confirmation-composer {
    padding-bottom: 18px;
  }

  .ai-confirmation-bottom-actions {
    padding-bottom: 20px;
  }
}

@media (max-width: 520px) {
  .ai-confirmation-session-header {
    position: static;
  }

  .ai-confirmation-article-scroll,
  .ai-confirmation-start-grid .ai-confirmation-article-scroll {
    max-height: min(34dvh, 310px);
  }

  .ai-confirmation-chat-log {
    height: min(42dvh, 390px) !important;
    min-height: 240px !important;
  }

  .ai-confirmation-text-form textarea {
    min-height: 92px;
  }
}

/* ===== 2026-07-15 AI確認テスト：可動区切り・発話時間・設定統合 ===== */

.ai-confirmation-start-layout {
  width: min(920px, 100%);
  margin-inline: auto;
}

.ai-confirmation-start-card {
  width: 100%;
}

.ai-confirmation-start-grid {
  display: block !important;
}

.ai-confirmation-style-setting {
  padding: 16px 18px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #fafbfc;
}

.ai-confirmation-style-setting output {
  color: #c91628;
  font-size: 16px;
  font-weight: 800;
}

.ai-confirmation-style-scale,
.ai-confirmation-style-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-confirmation-style-scale {
  margin-bottom: 3px;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
}

.ai-confirmation-style-steps {
  padding-inline: 2px;
  color: #98a2b3;
  font-size: 11px;
}

.ai-confirmation-style-setting input[type="range"] {
  margin: 4px 0 0;
}

.ai-confirmation-session-workspace {
  --ai-confirmation-article-width: 38%;
  display: grid;
  grid-template-columns:
    minmax(280px, var(--ai-confirmation-article-width))
    14px
    minmax(430px, 1fr);
  gap: 0 !important;
  align-items: start;
}

.ai-confirmation-session-workspace > .ai-confirmation-article-card {
  grid-column: 1;
}

.ai-confirmation-workspace-resizer {
  position: sticky;
  top: 16px;
  grid-column: 2;
  align-self: stretch;
  width: 14px;
  min-width: 14px;
  min-height: calc(100dvh - 190px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}

.ai-confirmation-workspace-resizer::before {
  content: "";
  position: absolute;
  inset: 0 5px;
  border-radius: 999px;
  background: #d0d5dd;
  transition:
    inset .15s ease,
    background .15s ease;
}

.ai-confirmation-workspace-resizer span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 36px;
  border-top: 3px dotted #667085;
  border-bottom: 3px dotted #667085;
  transform: translate(-50%, -50%);
}

.ai-confirmation-workspace-resizer:hover::before,
.ai-confirmation-workspace-resizer:focus-visible::before,
body.ai-confirmation-resizing
.ai-confirmation-workspace-resizer::before {
  inset-inline: 3px;
  background: #e31e2f;
}

.ai-confirmation-workspace-resizer:focus-visible {
  outline: 2px solid #e31e2f;
  outline-offset: 2px;
}

body.ai-confirmation-resizing,
body.ai-confirmation-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.ai-confirmation-session-workspace > .ai-confirmation-chat-card {
  grid-column: 3;
}

.ai-confirmation-session-status span {
  font-weight: 700;
}

.ai-confirmation-session-status small {
  max-width: 130px;
  margin-inline: auto;
  line-height: 1.35;
}

@media (max-width: 1050px) {
  .ai-confirmation-session-workspace {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px !important;
  }

  .ai-confirmation-session-workspace
  > .ai-confirmation-article-card,
  .ai-confirmation-session-workspace
  > .ai-confirmation-chat-card {
    grid-column: 1;
  }

  .ai-confirmation-workspace-resizer {
    display: none !important;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-confirmation-style-setting {
    padding: 14px;
  }
}

/* ===== 2026-07-16 AI確認テスト：区切り線・回答切替・一時中断・固定タイマー ===== */

.ai-confirmation-composer {
  display: block !important;
  padding: 18px 24px 20px !important;
}

.ai-confirmation-answer-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(520px, 100%);
  margin: 0 auto 16px;
  padding: 4px;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  background: #f2f4f7;
}

.ai-confirmation-answer-mode-button {
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #475467 !important;
  box-shadow: none !important;
  font-weight: 700;
}

.ai-confirmation-answer-mode-button.active {
  border-color: #f5c2c7 !important;
  background: #fff !important;
  color: #c91628 !important;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .12) !important;
}

.ai-confirmation-answer-mode-button:focus-visible {
  outline: 2px solid #e31e2f;
  outline-offset: 2px;
}

.ai-confirmation-answer-panel {
  width: min(760px, 100%);
  margin-inline: auto;
  padding: 17px;
  border: 1px solid #e4e7ec;
  border-radius: 13px;
  background: #fff;
}

.ai-confirmation-answer-panel[hidden] {
  display: none !important;
}

.ai-confirmation-answer-panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ai-confirmation-answer-panel-heading span {
  color: #667085;
  font-size: 12px;
}

.ai-confirmation-recording-panel > label {
  display: none !important;
}

.ai-confirmation-text-form textarea {
  width: 100%;
}

#aiConfirmationActionResult {
  margin-top: 14px;
}

.ai-confirmation-bottom-actions {
  justify-content: flex-end !important;
  gap: 10px;
}

.ai-confirmation-pause-button {
  border-color: #d0d5dd !important;
  background: #fff !important;
  color: #344054 !important;
}

.ai-confirmation-pause-button:hover {
  border-color: #98a2b3 !important;
  background: #f9fafb !important;
}

/* 課題学習画面の区切り線を90度回転したデザイン */
.ai-confirmation-session-workspace {
  grid-template-columns:
    minmax(280px, var(--ai-confirmation-article-width))
    12px
    minmax(430px, 1fr) !important;
}

.ai-confirmation-workspace-resizer {
  position: sticky !important;
  top: var(--ai-confirmation-sticky-offset, 16px) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 12px !important;
  min-width: 12px !important;
  min-height: calc(100dvh - var(--ai-confirmation-sticky-offset, 190px) - 20px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bg) !important;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  outline: none;
}

.ai-confirmation-workspace-resizer::before,
.ai-confirmation-workspace-resizer:hover::before,
.ai-confirmation-workspace-resizer:focus-visible::before,
body.ai-confirmation-resizing
.ai-confirmation-workspace-resizer::before {
  content: "";
  position: absolute;
  inset: auto !important;
  top: 0;
  left: 50%;
  width: 1px !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: #d0d5dd !important;
  transform: translateX(-50%);
}

.ai-confirmation-workspace-resizer > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px !important;
  height: 58px !important;
  border: 0 !important;
  border-radius: 999px;
  background: #98a2b3;
  box-shadow: 0 0 0 4px var(--bg);
  transform: translate(-50%, -50%) !important;
  transition: background .15s ease;
}

.ai-confirmation-workspace-resizer:hover > span,
.ai-confirmation-workspace-resizer:focus-visible > span,
body.ai-confirmation-resizing
.ai-confirmation-workspace-resizer > span {
  background: var(--primary);
}

.ai-confirmation-workspace-resizer:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: -2px !important;
}

@media (min-width: 1051px) {
  body.ai-confirmation-active
  .ai-confirmation-session-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 70;
    border-color: #e4e7ec;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .09);
    backdrop-filter: blur(10px);
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  > .ai-confirmation-article-card {
    top: var(--ai-confirmation-sticky-offset, 140px) !important;
  }
}

@media (max-width: 1050px) {
  .ai-confirmation-session-workspace {
    grid-template-columns: 1fr !important;
  }

  .ai-confirmation-workspace-resizer {
    display: none !important;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-confirmation-composer {
    padding: 15px 14px 18px !important;
  }

  .ai-confirmation-answer-mode-switch {
    width: 100%;
  }

  .ai-confirmation-answer-mode-button {
    padding: 10px 8px !important;
    font-size: 13px;
  }

  .ai-confirmation-answer-panel {
    padding: 14px;
  }

  .ai-confirmation-answer-panel-heading {
    display: grid;
    gap: 3px;
  }
}

/* ===== 2026-07-16 AI個別テスト生成ロード・管理者プロンプト設定 ===== */

body.ai-confirmation-generating {
  overflow: hidden !important;
}

.ai-confirmation-generation-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(
      circle at 50% 34%,
      rgba(227, 30, 47, .12),
      transparent 38%
    ),
    rgba(248, 250, 252, .96);
  backdrop-filter: blur(8px);
}

.ai-confirmation-generation-card {
  width: min(620px, 100%);
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid #eadde0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(16, 24, 40, .18);
  text-align: center;
}

.ai-confirmation-generation-card h2 {
  margin: 17px 0 10px;
  color: #101828;
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.4;
}

.ai-confirmation-generation-card p {
  margin: 0 auto;
  max-width: 500px;
  color: #475467;
  line-height: 1.8;
}

.ai-confirmation-generation-card small {
  display: block;
  margin-top: 15px;
  color: #667085;
  line-height: 1.6;
}

.ai-confirmation-generation-orbit {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto 18px;
}

.ai-confirmation-generation-orbit > span {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: rgba(227, 30, 47, .85);
  border-radius: 50%;
  animation: ai-confirmation-orbit 1.45s linear infinite;
}

.ai-confirmation-generation-orbit > span:nth-child(2) {
  inset: 9px;
  border-top-color: transparent;
  border-right-color: rgba(227, 30, 47, .55);
  animation-duration: 1.8s;
  animation-direction: reverse;
}

.ai-confirmation-generation-orbit > span:nth-child(3) {
  inset: 18px;
  border-top-color: rgba(227, 30, 47, .28);
  animation-duration: 2.2s;
}

.ai-confirmation-generation-core {
  position: absolute;
  inset: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #e31e2f, #b70f21);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(227, 30, 47, .28);
}

.ai-confirmation-generation-progress {
  position: relative;
  height: 8px;
  margin: 25px auto 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #f2f4f7;
}

.ai-confirmation-generation-progress span {
  position: absolute;
  inset-block: 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #f9a8b1,
    #e31e2f,
    #f9a8b1
  );
  animation: ai-confirmation-progress 1.65s ease-in-out infinite;
}

.ai-confirmation-generation-step {
  min-height: 24px;
  color: #c91628;
  font-weight: 800;
  transition: opacity .2s ease;
}

@keyframes ai-confirmation-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ai-confirmation-progress {
  from {
    left: -42%;
  }
  to {
    left: 100%;
  }
}

.admin-ai-prompt-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.admin-ai-prompt-intro h2 {
  margin: 10px 0 8px;
}

.admin-ai-prompt-intro p {
  max-width: 820px;
  margin: 0;
  line-height: 1.75;
}

.admin-ai-prompt-status {
  flex: 0 0 auto;
  display: grid;
  gap: 4px;
  min-width: 185px;
  padding: 14px 16px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #f9fafb;
  text-align: right;
}

.admin-ai-prompt-status span {
  font-size: 13px;
  color: #344054;
}

.admin-ai-prompt-status small {
  color: #667085;
}

.admin-ai-prompt-fixed-notice {
  margin-bottom: 16px;
}

.admin-ai-prompt-fixed-notice p {
  margin-bottom: 0;
  line-height: 1.7;
}

.admin-ai-prompt-list {
  display: grid;
  gap: 16px;
}

.admin-ai-prompt-card {
  margin: 0;
}

.admin-ai-prompt-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.admin-ai-prompt-heading h3 {
  margin: 0 0 4px;
}

.admin-ai-prompt-heading p {
  margin: 0;
}

.admin-ai-prompt-count {
  flex: 0 0 auto;
  color: #667085;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.admin-ai-prompt-textarea {
  width: 100%;
  min-height: 310px;
  padding: 17px;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  background: #fcfcfd;
  color: #101828;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;
  font-size: 13px;
  line-height: 1.65;
  resize: vertical;
  tab-size: 2;
}

.admin-ai-prompt-textarea:focus {
  border-color: #e31e2f;
  background: #fff;
  outline: 3px solid rgba(227, 30, 47, .1);
}

.admin-ai-prompt-result {
  margin-top: 16px;
}

.admin-ai-prompt-actions {
  position: sticky;
  bottom: 12px;
  z-index: 15;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  border-color: #eadde0;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .13);
  backdrop-filter: blur(10px);
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-confirmation-generation-overlay {
    padding: 14px;
  }

  .ai-confirmation-generation-card {
    padding: 28px 18px;
    border-radius: 18px;
  }

  .ai-confirmation-generation-orbit {
    width: 94px;
    height: 94px;
  }

  .ai-confirmation-generation-core {
    inset: 25px;
  }

  .admin-ai-prompt-intro {
    display: grid;
  }

  .admin-ai-prompt-status {
    width: 100%;
    text-align: left;
  }

  .admin-ai-prompt-heading {
    display: grid;
    gap: 8px;
  }

  .admin-ai-prompt-textarea {
    min-height: 260px;
    font-size: 12px;
  }

  .admin-ai-prompt-actions {
    bottom: calc(
      var(--student-bottom-nav-height, 68px)
      + env(safe-area-inset-bottom)
      + 8px
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-confirmation-generation-orbit > span,
  .ai-confirmation-generation-progress span {
    animation-duration: 3.5s;
  }
}

/* ===== 2026-07-16 AI音声切替・カウントダウン・可変縦横レイアウト ===== */

.ai-chat-speak-button[aria-pressed="true"] {
  border-color: #c91628 !important;
  background: #c91628 !important;
  color: #fff !important;
}

.ai-confirmation-answer-mode-switch {
  margin-bottom: 12px !important;
  padding: 3px !important;
  border-radius: 10px !important;
}

.ai-confirmation-answer-mode-button {
  min-height: 36px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  line-height: 1.2 !important;
}

.ai-confirmation-answer-stage {
  width: 100%;
  height: 224px;
  min-height: 224px;
}

.ai-confirmation-answer-stage
.ai-confirmation-answer-panel {
  width: min(760px, 100%);
  height: 100%;
  min-height: 0;
  margin-inline: auto;
  overflow: auto;
}

.ai-confirmation-answer-stage
.ai-confirmation-text-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}

.ai-confirmation-answer-stage
.ai-confirmation-text-form textarea {
  width: 100%;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  resize: none;
}

.ai-confirmation-answer-stage
.ai-confirmation-recording-panel {
  display: flex;
  flex-direction: column;
}

.ai-confirmation-answer-stage
#aiConfirmationRecordingPreview {
  min-height: 48px;
  overflow: auto;
}

.ai-confirmation-recording-panel
.practical-recording-audio-player {
  margin-top: 7px;
}

.ai-confirmation-recording-preview-note {
  margin: 6px 2px 0;
}

body.ai-confirmation-active
.ai-confirmation-session-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
  border-color: #e4e7ec;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .09);
  backdrop-filter: blur(10px);
}

.ai-confirmation-session-status {
  min-width: 104px;
}

.ai-confirmation-session-status strong {
  font-variant-numeric: tabular-nums;
}

.ai-confirmation-session-status small {
  display: none !important;
}

@media (min-width: 1051px) {
  .ai-confirmation-session-workspace {
    --ai-confirmation-workspace-height:
      max(
        650px,
        calc(
          100dvh
          - var(
              --ai-confirmation-sticky-offset,
              140px
            )
          - 22px
        )
      );
    align-items: stretch !important;
  }

  .ai-confirmation-session-workspace
  > .ai-confirmation-article-card,
  .ai-confirmation-session-workspace
  > .ai-confirmation-chat-card {
    height: var(
      --ai-confirmation-workspace-height
    );
    min-height: 650px;
    max-height: none;
  }

  .ai-confirmation-session-workspace
  > .ai-confirmation-article-card {
    display: flex;
    flex-direction: column;
    top: var(
      --ai-confirmation-sticky-offset,
      140px
    ) !important;
  }

  .ai-confirmation-session-workspace
  .ai-confirmation-article-summary {
    flex: 0 0 auto;
  }

  .ai-confirmation-session-workspace
  .ai-confirmation-article-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
  }

  .ai-confirmation-session-workspace
  > .ai-confirmation-chat-card {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
  }

  .ai-confirmation-session-workspace
  .ai-confirmation-chat-log {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 210px !important;
  }

  .ai-confirmation-session-workspace
  .ai-confirmation-composer,
  .ai-confirmation-session-workspace
  .ai-confirmation-bottom-actions,
  .ai-confirmation-session-workspace
  .ai-confirmation-complete-panel {
    flex: 0 0 auto;
  }
}

/* 狭いPCでは縦並びにし、横向き区切り線で記事の高さを調整します。 */
@media (min-width: 821px) and (max-width: 1050px) {
  .ai-confirmation-session-workspace {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows:
      var(
        --ai-confirmation-article-stack-height,
        380px
      )
      18px
      auto;
    gap: 0 !important;
    align-items: stretch !important;
  }

  .ai-confirmation-session-workspace
  > .ai-confirmation-article-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: var(
      --ai-confirmation-article-stack-height,
      380px
    );
    max-height: none !important;
    overflow: hidden;
  }

  .ai-confirmation-session-workspace
  .ai-confirmation-article-summary {
    flex: 0 0 auto;
  }

  .ai-confirmation-session-workspace
  .ai-confirmation-article-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
  }

  .ai-confirmation-session-workspace
  > .ai-confirmation-workspace-resizer {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: relative !important;
    top: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 100% !important;
    min-width: 0 !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    background: var(--bg) !important;
    cursor: row-resize !important;
  }

  .ai-confirmation-session-workspace
  > .ai-confirmation-workspace-resizer::before {
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    transform: translateY(-50%) !important;
  }

  .ai-confirmation-session-workspace
  > .ai-confirmation-workspace-resizer
  > span {
    top: 50% !important;
    left: 50% !important;
    width: 58px !important;
    height: 5px !important;
    transform: translate(-50%, -50%) !important;
  }

  .ai-confirmation-session-workspace
  > .ai-confirmation-chat-card {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100%;
  }

  body.ai-confirmation-resizing-rows,
  body.ai-confirmation-resizing-rows * {
    cursor: row-resize !important;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-confirmation-answer-mode-button {
    min-height: 34px !important;
    padding: 5px 8px !important;
  }

  .ai-confirmation-answer-stage {
    height: 216px;
    min-height: 216px;
  }

  .ai-confirmation-session-workspace
  > .ai-confirmation-workspace-resizer {
    display: none !important;
  }
}

/* ===== 2026-07-16 スマホAI音声自動再生・録音プレイヤー完全統一 ===== */

/* タイマー補足文はPC・スマホのどちらにも表示しません。 */
body.ai-confirmation-active
.ai-confirmation-session-status small {
  display: none !important;
}

/* AI録音プレビューにも課題学習と同じ録音プレイヤー寸法を適用します。 */
#aiConfirmationRecordingPreview
.practical-recording-audio-player {
  display: grid !important;
  grid-template-columns:
    34px 76px minmax(120px, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  margin-top: 8px !important;
  padding: 4px 6px !important;
  border: 1px solid var(--line) !important;
  background: #f9fafb !important;
  overflow: visible !important;
  box-sizing: border-box;
}

#aiConfirmationRecordingPreview
.practical-recording-audio-player
> audio.practical-recording-audio {
  display: none !important;
}

#aiConfirmationRecordingPreview
.practical-recording-play {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#aiConfirmationRecordingPreview
.practical-recording-time {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#aiConfirmationRecordingPreview
.practical-recording-seek {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

#aiConfirmationRecordingPreview
.practical-recording-error {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  #aiConfirmationRecordingPreview {
    width: 100%;
    min-width: 0;
    overflow: visible !important;
  }

  #aiConfirmationRecordingPreview
  .practical-recording-audio-player {
    grid-template-columns:
      32px 66px minmax(64px, 1fr) !important;
    gap: 4px !important;
    margin-top: 8px !important;
    padding: 4px !important;
  }

  #aiConfirmationRecordingPreview
  .practical-recording-time {
    font-size: 9.5px !important;
  }
}

@media (max-width: 360px) {
  #aiConfirmationRecordingPreview
  .practical-recording-audio-player {
    grid-template-columns:
      30px 60px minmax(48px, 1fr) !important;
    gap: 3px !important;
  }
}

/* ===== 2026-07-16 AI講師表示・カウントダウン警告色・ヘッダー高さ調整 ===== */

/* 「AIチューター」の副ラベル削除後に余白と高さを詰めます。 */
.ai-tutor-illustration:not(.compact) strong {
  margin-top: -3px;
  line-height: 1.25;
}

.ai-confirmation-session-header {
  min-height: 0 !important;
  padding-block: 12px !important;
}

.ai-confirmation-session-header
.ai-tutor-illustration {
  width: 78px !important;
}

.ai-confirmation-session-tutor {
  gap: 16px !important;
}

.ai-confirmation-session-header h2 {
  margin: 5px 0 !important;
}

.ai-confirmation-session-status {
  padding-block: 9px !important;
  background: #f8fafc !important;
}

/* 15:00～05:00は黒、04:59～00:00は赤。 */
.ai-confirmation-session-status strong,
#aiConfirmationElapsed {
  color: #101828 !important;
  transition: color .18s ease;
}

.ai-confirmation-session-status strong.urgent,
#aiConfirmationElapsed.urgent {
  color: #d3122a !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-confirmation-session-header {
    padding-block: 10px !important;
  }

  .ai-confirmation-session-header
  .ai-tutor-illustration {
    width: 62px !important;
  }

  .ai-confirmation-session-tutor {
    gap: 10px !important;
  }

  .ai-confirmation-session-status {
    padding: 7px 8px !important;
  }
}

@media (max-width: 520px) {
  .ai-confirmation-session-header {
    min-height: 68px !important;
  }
}

/* ===== 2026-07-16 AI回答見出し・600字上限・送信ボタン調整 ===== */

.ai-confirmation-answer-panel-heading {
  min-height: 24px;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-bottom: 12px !important;
}

.ai-confirmation-answer-panel-heading strong {
  display: block;
  margin: 0;
  color: #101828;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.ai-confirmation-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ai-confirmation-answer-stage
.ai-confirmation-text-form {
  grid-template-rows:
    minmax(0, 1fr)
    auto !important;
  height: calc(100% - 36px) !important;
}

.ai-confirmation-text-footer
#aiConfirmationTextSendButton {
  min-width: 78px;
  min-height: 40px;
  padding: 9px 18px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-confirmation-answer-panel-heading {
    display: flex !important;
    min-height: 22px;
    margin-bottom: 10px !important;
  }

  .ai-confirmation-answer-panel-heading strong {
    font-size: 14px;
  }

  .ai-confirmation-answer-stage
  .ai-confirmation-text-form {
    height: calc(100% - 32px) !important;
  }

  .ai-confirmation-text-footer
  #aiConfirmationTextSendButton {
    min-width: 74px;
    min-height: 38px;
    padding: 8px 16px !important;
    font-size: 15px !important;
  }
}

/* ===== 2026-07-16 生徒回答送信後のAI音声開始待機ロック ===== */

body.ai-confirmation-response-locked {
  overflow: hidden !important;
  touch-action: none !important;
}

.ai-confirmation-response-lock {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: grid;
  place-items: center;
  padding: 20px;
  cursor: wait;
  touch-action: none;
  overscroll-behavior: none;
  background: rgba(248, 250, 252, .82);
  backdrop-filter: blur(6px);
}

.ai-confirmation-response-lock-card {
  width: min(430px, 100%);
  padding: 28px 24px;
  border: 1px solid #eadde0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 55px rgba(16, 24, 40, .2);
  text-align: center;
}

.ai-confirmation-response-lock-card strong {
  display: block;
  margin-top: 18px;
  color: #101828;
  font-size: 18px;
  line-height: 1.55;
}

.ai-confirmation-response-lock-card p {
  margin: 8px 0 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.65;
}

.ai-confirmation-response-lock-spinner {
  position: relative;
  width: 60px;
  height: 60px;
  margin-inline: auto;
}

.ai-confirmation-response-lock-spinner span {
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-top-color: #e31e2f;
  border-radius: 50%;
  animation:
    ai-confirmation-response-lock-spin
    1.15s linear infinite;
}

.ai-confirmation-response-lock-spinner span:nth-child(2) {
  inset: 8px;
  border-top-color: transparent;
  border-right-color: rgba(227, 30, 47, .65);
  animation-duration: 1.45s;
  animation-direction: reverse;
}

.ai-confirmation-response-lock-spinner span:nth-child(3) {
  inset: 16px;
  border-top-color: rgba(227, 30, 47, .35);
  animation-duration: 1.75s;
}

@keyframes ai-confirmation-response-lock-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-confirmation-response-lock {
    padding: 14px;
  }

  .ai-confirmation-response-lock-card {
    padding: 24px 18px;
    border-radius: 17px;
  }

  .ai-confirmation-response-lock-card strong {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-confirmation-response-lock-spinner span {
    animation-duration: 3s;
  }
}

/* ===== 2026-07-16 AI確認テスト終了時のフィードバック選択 ===== */

body.ai-confirmation-finish-choice-open {
  overflow: hidden !important;
}

.ai-confirmation-finish-choice-modal {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 24, 40, .52);
  backdrop-filter: blur(5px);
}

.ai-confirmation-finish-choice-card {
  width: min(520px, 100%);
  padding: 30px;
  border: 1px solid #eadde0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 75px rgba(16, 24, 40, .28);
  text-align: center;
}

.ai-confirmation-finish-choice-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #fff1f3;
  color: #d3122a;
  font-size: 27px;
  font-weight: 900;
}

.ai-confirmation-finish-choice-card h2 {
  margin: 0;
  color: #101828;
  font-size: 22px;
  line-height: 1.5;
}

.ai-confirmation-finish-choice-card > p {
  margin: 12px auto 0;
  max-width: 440px;
  color: #475467;
  line-height: 1.75;
}

.ai-confirmation-finish-choice-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.ai-confirmation-finish-choice-options button {
  width: 100%;
  min-height: 46px;
  font-size: 15px;
  font-weight: 800;
}

.ai-confirmation-finish-choice-continue {
  margin-top: 14px !important;
  color: #667085 !important;
  font-size: 13px !important;
}

.ai-confirmation-feedback-audio-notice {
  margin: 11px 0 0 !important;
  padding: 10px 12px;
  border: 1px solid #f5c2c7;
  border-radius: 10px;
  background: #fff5f6;
  color: #b42332 !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

#aiConfirmationReturnButton:disabled {
  cursor: not-allowed;
  opacity: .62;
}

@media (min-width: 560px) {
  .ai-confirmation-finish-choice-options {
    grid-template-columns: 1.15fr .85fr;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-confirmation-finish-choice-modal {
    padding: 14px;
  }

  .ai-confirmation-finish-choice-card {
    padding: 25px 18px;
    border-radius: 18px;
  }

  .ai-confirmation-finish-choice-card h2 {
    font-size: 19px;
  }
}

/* ===== 2026-07-16 10分カウントダウン・CLOSING・AI回答上端整列 ===== */

.ai-confirmation-session-status strong {
  min-width: 88px;
  text-align: center;
}

.ai-confirmation-session-status strong.closing,
#aiConfirmationElapsed.closing {
  color: #d3122a !important;
  font-size: clamp(15px, 1.8vw, 20px) !important;
  letter-spacing: .04em;
}

.ai-confirmation-chat-log
[data-ai-message-role="assistant"] {
  scroll-margin-top: 8px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-confirmation-session-status strong {
    min-width: 76px;
  }

  .ai-confirmation-session-status strong.closing,
  #aiConfirmationElapsed.closing {
    font-size: 14px !important;
    letter-spacing: .025em;
  }
}



/* ===== 2026-07-16 AI講師イラスト差し替え ===== */

.ai-tutor-illustration {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  width: 150px;
  text-align: center;
}

.ai-tutor-illustration-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 25%, #ffffff 0%, #f7f9fd 32%, #e9eef7 100%);
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, .06),
    0 8px 24px rgba(15, 23, 42, .08);
}

.ai-tutor-illustration-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ai-tutor-illustration strong {
  display: block;
  color: #23324d;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.ai-tutor-illustration span {
  display: none;
}

.ai-tutor-illustration svg {
  display: none !important;
}

.ai-confirmation-start-heading > #aiConfirmationTutorPreview {
  flex: 0 0 auto;
}

.ai-confirmation-session-header .ai-tutor-illustration {
  width: 92px;
  gap: 7px;
}

.ai-confirmation-session-header .ai-tutor-illustration strong {
  font-size: 14px;
}

.ai-chat-row.assistant .ai-tutor-illustration {
  width: 64px;
  gap: 4px;
}

.ai-chat-row.assistant .ai-tutor-illustration strong {
  font-size: 11px;
}

.ai-chat-row.assistant .ai-tutor-illustration.compact strong {
  font-size: 0;
  line-height: 0;
}

.ai-chat-row.assistant .ai-tutor-illustration.compact {
  width: 58px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-tutor-illustration {
    width: 108px;
    gap: 8px;
  }

  .ai-tutor-illustration strong {
    font-size: 16px;
  }

  .ai-confirmation-session-header .ai-tutor-illustration {
    width: 72px;
  }

  .ai-confirmation-session-header .ai-tutor-illustration strong {
    font-size: 12px;
  }
}

/* ===== 2026-07-16 AI最終評価ダッシュボード・CEFR・日英切替 ===== */

.ai-final-evaluation-card {
  margin: 8px 0 26px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid #dce4ef;
  border-radius: 22px;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfe 100%
    );
  box-shadow:
    0 18px 45px rgba(15, 23, 42, .1);
}

.ai-final-evaluation-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.ai-final-evaluation-toolbar h2 {
  margin: 8px 0 0;
  color: #162033;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.35;
}

.ai-evaluation-language-switch {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 4px;
  padding: 4px;
  border: 1px solid #d6dce7;
  border-radius: 12px;
  background: #f2f5f9;
}

.ai-evaluation-language-switch button {
  min-height: 36px;
  padding: 7px 14px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #526077 !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 800;
}

.ai-evaluation-language-switch button.active {
  background: #fff !important;
  color: #d3122a !important;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, .12) !important;
}

.ai-evaluation-copy[hidden] {
  display: none !important;
}

.ai-evaluation-overview {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 4vw, 44px);
  padding: 24px;
  border: 1px solid #e2e7ef;
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 12% 16%,
      rgba(227, 30, 47, .06),
      transparent 35%
    ),
    #fff;
}

.ai-evaluation-score-ring {
  --ai-score: 0deg;
  position: relative;
  display: grid;
  place-items: center;
  width: 164px;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background:
    conic-gradient(
      #e31e2f 0 var(--ai-score),
      #e7ebf1 var(--ai-score) 360deg
    );
}

.ai-evaluation-score-ring::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, .05);
}

.ai-evaluation-score-ring > div {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  line-height: 1;
}

.ai-evaluation-score-ring strong {
  color: #d3122a;
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.ai-evaluation-score-ring span {
  margin-top: 5px;
  color: #667085;
  font-size: 13px;
  font-weight: 700;
}

.ai-evaluation-overview-text {
  min-width: 0;
}

.ai-evaluation-kicker {
  color: #d3122a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
}

.ai-evaluation-overview-text h3 {
  margin: 7px 0 10px;
  color: #162033;
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.35;
}

.ai-evaluation-overview-text > p {
  margin: 14px 0 0;
  color: #344054;
  line-height: 1.78;
}

.ai-evaluation-cefr {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid #cad8ed;
  border-radius: 999px;
  background: #eef4fc;
}

.ai-evaluation-cefr span {
  color: #526077;
  font-size: 12px;
  font-weight: 700;
}

.ai-evaluation-cefr strong {
  color: #173b6c;
  font-size: 18px;
  font-weight: 900;
}

.ai-evaluation-categories {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.ai-evaluation-category {
  padding: 17px 18px;
  border: 1px solid #e3e7ee;
  border-radius: 14px;
  background: #fff;
}

.ai-evaluation-category-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ai-evaluation-category-heading strong {
  color: #1d2939;
  font-size: 15px;
}

.ai-evaluation-category-heading span {
  color: #344054;
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.ai-evaluation-bar {
  height: 10px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9edf3;
}

.ai-evaluation-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #f29b52,
      #e31e2f
    );
}

.ai-evaluation-category > p {
  margin: 10px 0 0;
  color: #526077;
  font-size: 13px;
  line-height: 1.7;
}

.ai-evaluation-next-step {
  margin-top: 24px;
  padding: 18px;
  border-left: 4px solid #e31e2f;
  border-radius: 0 12px 12px 0;
  background: #fff5f6;
}

.ai-evaluation-next-step span {
  color: #c91628;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}

.ai-evaluation-next-step p {
  margin: 7px 0 0;
  color: #344054;
  line-height: 1.7;
}

.ai-evaluation-disclaimer {
  margin: 17px 0 0;
  padding-top: 15px;
  border-top: 1px solid #e5e9f0;
  color: #667085;
  font-size: 11px;
  line-height: 1.65;
}

.ai-final-evaluation-audio {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.ai-final-evaluation-audio button {
  min-width: 180px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-final-evaluation-card {
    margin-inline: -10px;
    padding: 17px 14px;
    border-radius: 17px;
  }

  .ai-final-evaluation-toolbar {
    display: grid;
    gap: 14px;
  }

  .ai-evaluation-language-switch {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }

  .ai-evaluation-language-switch button {
    width: 100% !important;
  }

  .ai-evaluation-overview {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 19px 15px;
    text-align: center;
  }

  .ai-evaluation-score-ring {
    width: 146px;
  }

  .ai-evaluation-overview-text > p {
    text-align: left;
  }

  .ai-evaluation-category {
    padding: 15px 14px;
  }

  .ai-final-evaluation-audio button {
    width: 100%;
  }
}

/* ===== 2026-07-16 AI確認テスト：上部エリア退避後の残り時間表示 ===== */

.ai-confirmation-floating-timer {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 520;
  display: grid;
  justify-items: center;
  min-width: 104px;
  padding: 8px 13px 9px;
  border: 1px solid rgba(227, 30, 47, .2);
  border-radius: 13px;
  background: rgba(255, 255, 255, .97);
  box-shadow:
    0 9px 26px rgba(16, 24, 40, .17);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -10px, 0);
  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility 0s linear .16s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ai-confirmation-floating-timer.visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility 0s;
}

.ai-confirmation-floating-timer > span {
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.ai-confirmation-floating-timer > strong {
  display: block;
  margin-top: 2px;
  color: #1d2939;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.ai-confirmation-floating-timer > strong.urgent,
.ai-confirmation-floating-timer > strong.closing {
  color: #c91628;
}

.ai-confirmation-floating-timer > strong.closing {
  font-size: 17px;
  letter-spacing: .04em;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-confirmation-floating-timer {
    top: max(7px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    min-width: 92px;
    padding: 7px 10px 8px;
    border-radius: 11px;
  }

  .ai-confirmation-floating-timer > strong {
    font-size: 19px;
  }

  .ai-confirmation-floating-timer > strong.closing {
    font-size: 15px;
  }
}

/* ===== 2026-07-16 AI確認テスト：回答欄右上ヘルプバッジ ===== */

.ai-confirmation-answer-stage {
  position: relative;
}

.ai-confirmation-help-badge {
  position: absolute !important;
  top: 9px;
  right:
    max(
      9px,
      calc((100% - 760px) / 2 + 9px)
    );
  z-index: 12;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  width: auto !important;
  min-width: 0 !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 4px 9px 4px 5px !important;
  border: 1px solid #b8cae0 !important;
  border-radius: 999px !important;
  background: rgba(248, 251, 255, .98) !important;
  color: #315f96 !important;
  box-shadow:
    0 2px 7px rgba(37, 70, 111, .12) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.ai-confirmation-help-badge > span {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #315f96;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.ai-confirmation-help-badge > strong {
  color: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.ai-confirmation-help-badge:hover,
.ai-confirmation-help-badge:focus-visible {
  border-color: #668dbd !important;
  background: #fff !important;
  color: #173b67 !important;
  transform: translateY(-1px);
}

.ai-confirmation-help-badge:focus-visible {
  outline: 2px solid rgba(62, 109, 165, .28);
  outline-offset: 2px;
}

.ai-confirmation-help-badge:disabled {
  opacity: .56;
  cursor: wait;
  transform: none;
}

.ai-confirmation-answer-stage.has-help-badge
.ai-confirmation-answer-panel-heading {
  padding-right: 106px;
}

.ai-chat-help-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef4fc;
  color: #315f96;
  font-size: 11px;
  font-weight: 800;
}

.ai-chat-help-label > span {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #315f96;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-confirmation-help-badge {
    top: 8px;
    right: 8px;
    min-height: 26px !important;
    padding: 3px 8px 3px 4px !important;
  }

  .ai-confirmation-help-badge > span {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }

  .ai-confirmation-help-badge > strong {
    font-size: 10px;
  }

  .ai-confirmation-answer-stage.has-help-badge
  .ai-confirmation-answer-panel-heading {
    padding-right: 94px;
  }
}

/* ===== 2026-07-16 PC版AI確認テスト：下部ボタン見切れ防止 ===== */

/*
 * 以前はPCのセッション枠に最低650pxが指定されていたため、
 * 画面高が小さいPCでは「一時中断」「確認テストを終了する」が
 * 画面下へ押し出されていました。
 *
 * セッション枠を実際のビューポート高へ合わせ、
 * チャットログだけが残りの高さを伸縮して受け持つようにします。
 */
@media (min-width: 1051px) {
  body.ai-confirmation-active
  .ai-confirmation-session-workspace {
    --ai-confirmation-workspace-height:
      clamp(
        500px,
        calc(
          100dvh
          - var(
              --ai-confirmation-sticky-offset,
              140px
            )
          - 14px
        ),
        760px
      ) !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  > .ai-confirmation-article-card,
  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  > .ai-confirmation-chat-card {
    height:
      var(
        --ai-confirmation-workspace-height
      ) !important;
    min-height: 0 !important;
    max-height:
      var(
        --ai-confirmation-workspace-height
      ) !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  > .ai-confirmation-chat-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  .ai-confirmation-chat-log {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 120px !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  .ai-confirmation-composer,
  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  .ai-confirmation-bottom-actions {
    flex: 0 0 auto !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  .ai-confirmation-bottom-actions {
    position: relative !important;
    z-index: 3;
    background: #fff !important;
  }
}

/*
 * 縦幅が短いノートPCでは、機能は変えずに回答欄と余白だけを
 * 少し圧縮し、下部操作ボタンを常に完全表示します。
 */
@media (min-width: 1051px) and (max-height: 850px) {
  body.ai-confirmation-active
  .ai-confirmation-composer {
    padding: 12px 18px 14px !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-answer-mode-switch {
    margin-bottom: 10px !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-answer-stage {
    height:
      clamp(
        130px,
        20dvh,
        180px
      ) !important;
    min-height: 130px !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-bottom-actions {
    padding: 10px 18px 12px !important;
  }
}

/* ===== 2026-07-16 AI最終評価：証拠量・信頼度表示 ===== */

.ai-evaluation-confidence {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid #d9e2ee;
  border-radius: 14px;
  background: #f8fafc;
}

.ai-evaluation-confidence-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ai-evaluation-confidence-heading > div {
  display: grid;
  gap: 2px;
}

.ai-evaluation-confidence-heading span {
  color: #667085;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
}

.ai-evaluation-confidence-heading strong {
  color: #243b5a;
  font-size: 15px;
}

.ai-evaluation-confidence-heading b {
  color: #315f96;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.ai-evaluation-confidence-bar {
  height: 9px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.ai-evaluation-confidence-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #8da9c8,
      #315f96
    );
}

.ai-evaluation-confidence > p {
  margin: 10px 0 0;
  color: #526077;
  font-size: 12px;
  line-height: 1.65;
}

.ai-evaluation-confidence-limited {
  border-color: #e7d5a6;
  background: #fffbef;
}

.ai-evaluation-confidence-limited
.ai-evaluation-confidence-heading strong,
.ai-evaluation-confidence-limited
.ai-evaluation-confidence-heading b {
  color: #8a5b10;
}

.ai-evaluation-confidence-limited
.ai-evaluation-confidence-bar > span {
  background:
    linear-gradient(
      90deg,
      #e7c46f,
      #b7791f
    );
}

.ai-evaluation-confidence-insufficient {
  border-color: #efc3c7;
  background: #fff6f7;
}

.ai-evaluation-confidence-insufficient
.ai-evaluation-confidence-heading strong,
.ai-evaluation-confidence-insufficient
.ai-evaluation-confidence-heading b {
  color: #b42335;
}

.ai-evaluation-confidence-insufficient
.ai-evaluation-confidence-bar > span {
  background:
    linear-gradient(
      90deg,
      #ef9aa4,
      #c91628
    );
}

.ai-evaluation-evidence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.ai-evaluation-evidence-chips > span {
  padding: 5px 8px;
  border: 1px solid rgba(49, 95, 150, .15);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: #526077;
  font-size: 10px;
  font-weight: 700;
}

.ai-evaluation-evidence-chips strong {
  margin-left: 3px;
  color: #243b5a;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ai-evaluation-insufficient {
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid #efc3c7;
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(227, 30, 47, .06),
      transparent 34%
    ),
    #fff;
}

.ai-evaluation-insufficient > h3 {
  margin: 8px 0 10px;
  color: #162033;
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.35;
}

.ai-evaluation-insufficient > p {
  margin: 0;
  color: #344054;
  line-height: 1.75;
}

.ai-evaluation-score-withheld {
  margin-top: 18px;
  padding: 15px 16px;
  border-left: 4px solid #c91628;
  border-radius: 0 11px 11px 0;
  background: #fff3f4;
}

.ai-evaluation-score-withheld strong {
  color: #a31323;
  font-size: 14px;
}

.ai-evaluation-score-withheld p {
  margin: 5px 0 0;
  color: #526077;
  font-size: 12px;
  line-height: 1.6;
}

.ai-evaluation-overview-limited {
  border-color: #e7d5a6;
  background:
    radial-gradient(
      circle at 12% 16%,
      rgba(183, 121, 31, .07),
      transparent 35%
    ),
    #fff;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-evaluation-confidence {
    padding: 14px;
  }

  .ai-evaluation-confidence-heading {
    align-items: flex-start;
  }

  .ai-evaluation-evidence-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-evaluation-evidence-chips > span {
    border-radius: 9px;
  }

  .ai-evaluation-insufficient {
    padding: 18px 14px;
  }
}

/* ===== Day6 リアルタイム会話トレーニング ===== */

body.ai-conversation-active {
  overflow: hidden;
}

.ai-conversation-start-layout {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 20px;
}

.ai-conversation-start-card {
  padding: clamp(20px, 4vw, 34px);
}

.ai-conversation-start-heading {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.ai-conversation-start-heading
.ai-confirmation-tutor-illustration {
  width: 112px;
  height: 112px;
}

.ai-conversation-start-heading h2 {
  margin: 8px 0 8px;
  color: #14213d;
  font-size: clamp(25px, 3vw, 36px);
}

.ai-conversation-start-heading p {
  margin: 0;
  color: #526077;
  line-height: 1.7;
}

.ai-conversation-flow-guide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.ai-conversation-flow-guide > div {
  display: grid;
  gap: 3px;
  padding: 13px 14px;
  border: 1px solid #dce5f0;
  border-radius: 13px;
  background: #f8fbff;
}

.ai-conversation-flow-guide strong {
  color: #315f96;
  font-size: 13px;
}

.ai-conversation-flow-guide span {
  color: #526077;
  font-size: 12px;
}

.ai-conversation-topic-card {
  display: grid;
  gap: 5px;
  margin-top: 18px;
  padding: 15px 17px;
  border-left: 4px solid #e31e2f;
  border-radius: 0 13px 13px 0;
  background: #fff6f7;
}

.ai-conversation-topic-card span {
  color: #c91628;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.ai-conversation-topic-card strong {
  color: #162033;
  font-size: 17px;
}

.ai-conversation-settings {
  margin-top: 22px;
}

.ai-conversation-sensitivity-setting {
  grid-column: 1 / -1;
}

.ai-conversation-sensitivity-setting > span,
.ai-conversation-live-sensitivity > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ai-conversation-sensitivity-setting output,
.ai-conversation-live-sensitivity output {
  color: #315f96;
  font-size: 11px;
  font-weight: 800;
}

.ai-conversation-sensitivity-setting
input[type="range"],
.ai-conversation-live-sensitivity
input[type="range"] {
  width: 100%;
  margin-top: 8px;
  accent-color: #315f96;
}

.ai-conversation-sensitivity-setting small {
  display: block;
  margin-top: 5px;
  color: #667085;
  line-height: 1.5;
}

.ai-conversation-microphone-notice {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #d8e3ef;
  border-radius: 13px;
  background: #f5f9fd;
}

.ai-conversation-microphone-notice strong {
  color: #25466f;
}

.ai-conversation-microphone-notice p {
  margin: 5px 0 0;
  color: #526077;
  font-size: 12px;
  line-height: 1.6;
}

.ai-conversation-session-shell {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 18px);
  min-height: 520px;
  overflow: hidden;
  background: #f5f7fa;
}

.ai-conversation-progress-card {
  flex: 0 0 auto;
  padding: 13px 22px 25px;
  border-bottom: 1px solid #dce3ec;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 7px 22px rgba(15, 23, 42, .08);
  z-index: 30;
}

.ai-conversation-progress-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.ai-conversation-progress-heading > div {
  display: grid;
  gap: 3px;
}

.ai-conversation-progress-heading span {
  color: #667085;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.ai-conversation-progress-heading strong {
  color: #315f96;
  font-size: 15px;
}

.ai-conversation-progress-heading strong[data-phase="closing"] {
  color: #a66a12;
}

.ai-conversation-progress-heading strong[data-phase="feedback"],
.ai-conversation-progress-heading strong[data-phase="completed"] {
  color: #c91628;
}

.ai-conversation-progress-heading time {
  color: #14213d;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.ai-conversation-meter {
  position: relative;
  margin-top: 12px;
}

.ai-conversation-meter-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eaf1;
}

.ai-conversation-meter-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3e77b6, #315f96);
  transition: width .25s linear;
}

.ai-conversation-meter-track > span[data-phase="closing"] {
  background: linear-gradient(90deg, #3e77b6, #d4972d);
}

.ai-conversation-meter-track > span[data-phase="feedback"],
.ai-conversation-meter-track > span[data-phase="completed"] {
  background: linear-gradient(90deg, #3e77b6, #e31e2f);
}

.ai-conversation-meter-markers {
  position: relative;
  height: 17px;
  margin-top: 5px;
}

.ai-conversation-meter-markers > span {
  position: absolute;
  transform: translateX(-50%);
  color: #667085;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.ai-conversation-meter-markers > span:first-child {
  transform: none;
}

.ai-conversation-meter-markers > span:last-child {
  transform: translateX(-100%);
}

.ai-conversation-live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
}

.ai-conversation-live-card,
.ai-conversation-control-card {
  min-height: 0;
  margin: 0;
}

.ai-conversation-live-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 17px;
}

.ai-conversation-tutor-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.ai-conversation-tutor-row
.ai-confirmation-tutor-illustration {
  width: 66px;
  height: 66px;
}

.ai-conversation-tutor-row h2 {
  margin: 5px 0 3px;
  color: #162033;
  font-size: 18px;
}

.ai-conversation-tutor-row p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

.ai-conversation-live-status {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.ai-conversation-live-status > span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: #667085;
  font-size: 10px;
  font-weight: 800;
}

.ai-conversation-live-status
#aiConversationConnectionStatus.connected {
  background: #e9f8ef;
  color: #16864b;
}

.ai-conversation-live-status
#aiConversationMicStatus.speaking {
  background: #fff1f3;
  color: #c91628;
}

.ai-conversation-transcript {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 180px;
  margin-top: 13px;
  padding: 15px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #e0e6ee;
  border-radius: 14px;
  background: #f8fafc;
}

.ai-conversation-transcript.result {
  max-height: 480px;
}

.ai-conversation-message {
  width: min(82%, 760px);
  padding: 12px 14px;
  border-radius: 14px;
}

.ai-conversation-message.assistant {
  align-self: flex-start;
  border: 1px solid #dce5ef;
  border-bottom-left-radius: 4px;
  background: #fff;
}

.ai-conversation-message.user {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: #eaf2fc;
}

.ai-conversation-message.partial {
  opacity: .72;
  border-style: dashed;
}

.ai-conversation-message-role {
  margin-bottom: 5px;
  color: #315f96;
  font-size: 10px;
  font-weight: 900;
}

.ai-conversation-message.user
.ai-conversation-message-role {
  color: #25466f;
}

.ai-conversation-message p {
  margin: 0;
  color: #1d2939;
  font-size: 15px;
  line-height: 1.65;
}

.ai-conversation-control-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 17px;
  overflow-y: auto;
}

.ai-conversation-panel-heading span {
  color: #667085;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.ai-conversation-panel-heading h3 {
  margin: 4px 0 0;
  color: #162033;
  font-size: 18px;
}

.ai-conversation-live-sensitivity {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #f8fbff;
}

.ai-conversation-control-card button {
  width: 100%;
}

body.ai-conversation-feedback-lock
.ai-conversation-live-grid {
  pointer-events: none;
}

body.ai-conversation-feedback-lock
.ai-conversation-live-grid::after {
  content: "AIが最終フィードバックを作成しています";
  position: fixed;
  inset: 0;
  z-index: 700;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(248, 250, 252, .88);
  color: #162033;
  font-size: 16px;
  font-weight: 900;
  pointer-events: all;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.ai-conversation-result-layout {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
}

.ai-conversation-result-layout
.ai-final-evaluation-card {
  max-width: 1080px;
  margin: 0 auto 18px;
}

.ai-conversation-transcript-card {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px;
}

.ai-conversation-result-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  padding: 13px 18px;
  border-top: 1px solid #dce3ec;
  background: #fff;
}

.ai-conversation-remote-audio {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  body.ai-conversation-active {
    overflow: hidden;
  }

  .ai-conversation-start-layout {
    padding: 12px;
  }

  .ai-conversation-start-heading {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
  }

  .ai-conversation-start-heading
  .ai-confirmation-tutor-illustration {
    width: 76px;
    height: 76px;
  }

  .ai-conversation-flow-guide {
    grid-template-columns: 1fr;
  }

  .ai-conversation-session-shell {
    height: 100dvh;
    min-height: 0;
  }

  .ai-conversation-progress-card {
    padding: 10px 12px 23px;
  }

  .ai-conversation-progress-heading time {
    font-size: 25px;
  }

  .ai-conversation-meter-markers > span {
    font-size: 8px;
  }

  .ai-conversation-live-grid {
    grid-template-columns: 1fr;
    grid-template-rows:
      minmax(0, 1fr)
      auto;
    gap: 8px;
    padding: 8px;
  }

  .ai-conversation-live-card {
    padding: 12px;
  }

  .ai-conversation-control-card {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(110px, auto)
      minmax(110px, auto);
    align-items: end;
    gap: 7px;
    padding: 10px;
    max-height: 190px;
  }

  .ai-conversation-control-card
  .ai-conversation-panel-heading {
    display: none;
  }

  .ai-conversation-live-sensitivity {
    grid-column: 1 / -1;
    padding: 8px 10px;
  }

  .ai-conversation-control-card
  > .muted {
    display: none;
  }

  .ai-conversation-control-card
  #aiConversationActionResult {
    grid-column: 1 / -1;
  }

  .ai-conversation-message {
    width: 92%;
    padding: 10px 12px;
  }

  .ai-conversation-message p {
    font-size: 14px;
  }

  .ai-conversation-result-actions {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px;
  }
}

@media (max-width: 560px) {
  .ai-conversation-progress-heading span {
    display: none;
  }

  .ai-conversation-meter-markers
  > span:nth-child(2),
  .ai-conversation-meter-markers
  > span:nth-child(3) {
    max-width: 80px;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }

  .ai-conversation-tutor-row {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .ai-conversation-tutor-row
  .ai-confirmation-tutor-illustration {
    width: 50px;
    height: 50px;
  }

  .ai-conversation-tutor-row p {
    display: none;
  }

  .ai-conversation-control-card {
    grid-template-columns: 1fr 1fr;
  }

  .ai-conversation-live-sensitivity {
    grid-column: 1 / -1;
  }

  .ai-conversation-control-card
  #aiConversationConnectButton {
    grid-column: 1 / -1;
  }
}

/* ===== 2026-07-16 Day6応答間隔・AIアイコン表記調整 ===== */

/* 旧DOMやキャッシュが残った場合も、画像下の「AI」を表示しません。 */
.ai-tutor-illustration > strong {
  display: none !important;
}

.ai-conversation-response-delay-setting {
  grid-column: 1 / -1;
}

.ai-conversation-response-delay-setting > span,
.ai-conversation-live-response-delay > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ai-conversation-response-delay-setting output,
.ai-conversation-live-response-delay output {
  color: #315f96;
  font-size: 11px;
  font-weight: 800;
}

.ai-conversation-response-delay-setting
input[type="range"],
.ai-conversation-live-response-delay
input[type="range"] {
  width: 100%;
  margin-top: 8px;
  accent-color: #315f96;
}

.ai-conversation-response-delay-setting small {
  display: block;
  margin-top: 5px;
  color: #667085;
  line-height: 1.5;
}

.ai-conversation-live-response-delay {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #f8fbff;
}

@media (max-width: 900px) {
  .ai-conversation-live-response-delay {
    grid-column: 1 / -1;
    padding: 8px 10px;
  }
}

/* ===== Day5・Day6 時間表示／呼び名／スライダー配置 ===== */

@keyframes ai-confirmation-paused-time-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .28;
  }
}

.ai-confirmation-session-status strong.paused,
.ai-confirmation-floating-timer > strong.paused {
  animation:
    ai-confirmation-paused-time-blink
    1.15s
    ease-in-out
    infinite;
}

.ai-confirmation-session-status strong.paused::after {
  content: " 停止中";
  display: block;
  margin-top: 2px;
  color: #667085;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}

.ai-confirmation-floating-timer > strong.paused::after {
  content: "・停止中";
  color: #667085;
  font-size: 8px;
  font-weight: 800;
}

.ai-learner-name-setting small {
  display: block;
  margin-top: 5px;
  color: #667085;
  font-size: 11px;
  line-height: 1.5;
}

@media (min-width: 901px) {
  .ai-conversation-settings
  > .ai-conversation-sensitivity-setting {
    grid-column: auto;
    min-width: 0;
  }

  .ai-conversation-live-grid {
    grid-template-columns:
      minmax(0, 1fr)
      380px;
  }

  .ai-conversation-control-card {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 12px;
  }

  .ai-conversation-control-card
  > .ai-conversation-panel-heading,
  .ai-conversation-control-card
  > button,
  .ai-conversation-control-card
  > .muted,
  .ai-conversation-control-card
  > #aiConversationActionResult {
    grid-column: 1 / -1;
  }

  .ai-conversation-control-card
  > .ai-conversation-live-sensitivity,
  .ai-conversation-control-card
  > .ai-conversation-live-response-delay {
    grid-column: auto;
    min-width: 0;
  }

  .ai-conversation-live-sensitivity > span,
  .ai-conversation-live-response-delay > span {
    display: grid;
    gap: 3px;
  }

  .ai-conversation-live-sensitivity output,
  .ai-conversation-live-response-delay output {
    min-height: 1.3em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-confirmation-session-status strong.paused,
  .ai-confirmation-floating-timer > strong.paused {
    animation: none;
    opacity: .55;
  }
}

/* ===== Day6 音声連動チューター／読みやすい会話／Day7準備評価 ===== */

.ai-conversation-message-copy {
  color: #1d2939;
  font-size: 15px;
  line-height: 1.72;
}

.ai-conversation-message-paragraph {
  display: block;
}

.ai-conversation-message-paragraph
+ .ai-conversation-message-paragraph {
  margin-top: .85em;
}

.ai-conversation-animated-tutor {
  --ai-avatar-audio-level: 0;
  width: 118px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #eef2f7;
  box-shadow:
    0 12px 26px rgba(15, 23, 42, .16),
    0 0 0 1px rgba(49, 95, 150, .13);
  transform-origin: 50% 78%;
}

.ai-conversation-animated-tutor-stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform:
    translateY(
      calc(
        -1px
        * var(--ai-avatar-audio-level)
      )
    )
    scale(
      calc(
        1
        + .008
        * var(--ai-avatar-audio-level)
      )
    );
}

.ai-conversation-animated-tutor img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.ai-conversation-avatar-mouth,
.ai-conversation-avatar-blink {
  opacity: 0;
}

.ai-conversation-animated-tutor[data-mouth="small"]
.mouth-small,
.ai-conversation-animated-tutor[data-mouth="medium"]
.mouth-medium,
.ai-conversation-animated-tutor[data-mouth="open"]
.mouth-open {
  opacity: 1;
}

.ai-conversation-animated-tutor.blinking
.ai-conversation-avatar-blink {
  opacity: 1;
}

.ai-conversation-animated-tutor[data-state="speaking"] {
  animation:
    ai-conversation-avatar-speaking
    2.6s
    ease-in-out
    infinite;
}

.ai-conversation-animated-tutor[data-state="listening"] {
  animation:
    ai-conversation-avatar-listening
    3.2s
    ease-in-out
    infinite;
}

.ai-conversation-animated-tutor[data-state="ready"] {
  animation:
    ai-conversation-avatar-breathing
    4.8s
    ease-in-out
    infinite;
}

.ai-conversation-animated-tutor[data-state="paused"] {
  filter: saturate(.72);
  opacity: .8;
}

@keyframes ai-conversation-avatar-speaking {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  28% {
    transform: translateY(-1px) rotate(-.35deg);
  }

  62% {
    transform: translateY(0) rotate(.3deg);
  }
}

@keyframes ai-conversation-avatar-listening {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(1px) rotate(.45deg);
  }
}

@keyframes ai-conversation-avatar-breathing {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-1px) scale(1.008);
  }
}

.ai-conversation-tutor-row {
  grid-template-columns: 128px minmax(0, 1fr);
}

.ai-conversation-highlight {
  margin-top: 20px;
  padding: 17px 19px;
  border: 1px solid #d6e2f1;
  border-radius: 14px;
  background: #f5f9ff;
}

.ai-conversation-highlight > span,
.ai-conversation-day7-prep-heading > span {
  color: #315f96;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.ai-conversation-highlight p {
  margin: 7px 0 0;
  color: #26364d;
  line-height: 1.7;
}

.ai-conversation-day7-prep {
  margin-top: 22px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid #e2d7b9;
  border-radius: 17px;
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(245, 181, 47, .14),
      transparent 32%
    ),
    #fffdf7;
}

.ai-conversation-day7-prep-heading h3 {
  margin: 6px 0 0;
  color: #3b2d16;
  font-size: 20px;
}

.ai-conversation-day7-prep-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.ai-conversation-day7-prep-grid article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid #ebdfbf;
  border-radius: 12px;
  background: rgba(255, 255, 255, .86);
}

.ai-conversation-day7-prep-grid article > b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #315f96;
  color: #fff;
  font-size: 12px;
}

.ai-conversation-day7-prep-grid strong {
  color: #3b2d16;
  font-size: 13px;
}

.ai-conversation-day7-prep-grid p {
  margin: 6px 0 0;
  color: #526077;
  font-size: 12px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .ai-conversation-tutor-row {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .ai-conversation-animated-tutor {
    width: 80px;
  }

  .ai-conversation-day7-prep-grid {
    grid-template-columns: 1fr;
  }

  .ai-conversation-message-copy {
    font-size: 14px;
  }
}

@media (max-width: 560px) {
  .ai-conversation-tutor-row {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .ai-conversation-animated-tutor {
    width: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-conversation-animated-tutor {
    animation: none !important;
  }

  .ai-conversation-animated-tutor-stage {
    transform: none;
  }
}

/* ===== Day6 終了確認・自然な瞬き・停止時間・生成後音声 ===== */

/*
 * まばたき差分は顔全体ではなく目の帯だけを重ねます。
 * 画像全体の明暗が瞬間的に切り替わる「フラッシュ感」を防ぎます。
 */
.ai-conversation-avatar-blink {
  z-index: 5;
  opacity: 0;
  clip-path:
    inset(
      22.5% 18% 53.5% 18%
      round 12%
    );
  transition:
    opacity 90ms ease-in-out;
  will-change: opacity;
}

.ai-conversation-animated-tutor.blink-closing
.ai-conversation-avatar-blink {
  opacity: .58;
  transition-duration: 58ms;
}

.ai-conversation-animated-tutor.blinking
.ai-conversation-avatar-blink {
  opacity: 1;
  transition-duration: 70ms;
}

.ai-conversation-animated-tutor.blink-opening
.ai-conversation-avatar-blink {
  opacity: .28;
  transition-duration: 105ms;
}

.ai-conversation-progress-heading
time.paused {
  animation:
    ai-confirmation-paused-time-blink
    1.15s
    ease-in-out
    infinite;
}

.ai-conversation-progress-heading
time.paused::after {
  content: "・停止中";
  display: inline;
  margin-left: 4px;
  color: #667085;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
}

/*
 * Day6もDay5と同じ
 * ai-confirmation-response-lockを使用するため、
 * 旧Day6疑似オーバーレイは重ねて表示しません。
 */
body.ai-conversation-feedback-lock
.ai-conversation-live-grid::after {
  display: none !important;
  content: none !important;
}

.ai-conversation-feedback-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-conversation-feedback-toolbar-actions
#aiConversationFeedbackAudioButton {
  width: auto;
  min-width: 150px;
}

#aiConversationResultMessage {
  margin: 0 0 12px;
}

@media (max-width: 720px) {
  .ai-conversation-feedback-toolbar-actions {
    width: 100%;
    justify-content: stretch;
  }

  .ai-conversation-feedback-toolbar-actions
  #aiConversationFeedbackAudioButton,
  .ai-conversation-feedback-toolbar-actions
  .ai-evaluation-language-switch {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-conversation-avatar-blink {
    transition-duration: 180ms;
  }

  .ai-conversation-progress-heading
  time.paused {
    animation: none;
    opacity: .55;
  }
}

/* ===== Day5・Day6 完了確認／Day6 ライブ体験レイアウト ===== */

.ai-training-finish-warning {
  margin: 14px 0 0 !important;
  padding: 11px 13px;
  border: 1px solid #f1c8cd;
  border-radius: 11px;
  background: #fff5f6;
  color: #8f1d2b !important;
  font-size: 12px;
  line-height: 1.65;
  text-align: left;
}

.ai-training-finish-warning strong {
  display: block;
  margin-bottom: 2px;
  color: #c91628;
  font-size: 12px;
}

/*
 * PC: 大きなAIチューターを左、会話ログを右に配置。
 * 操作パネルは右端に残しつつ、ライブ会話を主役にします。
 */
@media (min-width: 901px) {
  .ai-conversation-live-grid {
    grid-template-columns:
      minmax(0, 1fr)
      330px;
    gap: 14px;
    padding: 14px;
  }

  .ai-conversation-live-card {
    display: grid;
    grid-template-columns:
      clamp(250px, 25vw, 330px)
      minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
    background: #fff;
  }

  .ai-conversation-live-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-width: 0;
    padding:
      clamp(22px, 3vw, 38px)
      clamp(18px, 2.4vw, 30px);
    overflow: hidden;
    border-right: 1px solid #dfe7f0;
    background:
      radial-gradient(
        circle at 50% 24%,
        rgba(255, 255, 255, .98),
        rgba(239, 246, 255, .9) 46%,
        rgba(226, 236, 249, .82) 100%
      );
  }

  .ai-conversation-live-visual {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 290px);
    aspect-ratio: 1;
  }

  .ai-conversation-live-halo {
    position: absolute;
    inset: 5%;
    border: 1px solid rgba(49, 95, 150, .18);
    border-radius: 50%;
    box-shadow:
      0 0 0 14px rgba(49, 95, 150, .045),
      0 0 0 29px rgba(49, 95, 150, .025);
    animation:
      ai-conversation-live-halo-pulse
      4.8s
      ease-in-out
      infinite;
  }

  .ai-conversation-live-stage
  .ai-conversation-animated-tutor {
    width: clamp(210px, 21vw, 270px);
    max-width: 92%;
    box-shadow:
      0 22px 44px rgba(15, 23, 42, .2),
      0 0 0 1px rgba(49, 95, 150, .15);
  }

  .ai-conversation-live-now {
    position: absolute;
    right: 4%;
    bottom: 7%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 999px;
    background: rgba(20, 33, 61, .9);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .18);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  .ai-conversation-live-now i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff4051;
    box-shadow: 0 0 0 4px rgba(255, 64, 81, .18);
    animation:
      ai-conversation-live-dot
      1.45s
      ease-in-out
      infinite;
  }

  .ai-conversation-live-copy {
    width: 100%;
    text-align: center;
  }

  .ai-conversation-live-copy h2 {
    display: -webkit-box;
    margin: 8px 0 7px;
    overflow: hidden;
    color: #14213d;
    font-size: clamp(18px, 1.7vw, 23px);
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .ai-conversation-live-copy > p {
    max-width: 280px;
    margin: 0 auto;
    color: #5f6d82;
    font-size: 12px;
    line-height: 1.65;
  }

  .ai-conversation-live-copy
  .ai-conversation-live-status {
    justify-content: center;
    margin-top: 14px;
  }

  .ai-conversation-stream {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 18px;
    background: #fbfcfe;
  }

  .ai-conversation-stream-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex: 0 0 auto;
    padding: 0 2px 12px;
  }

  .ai-conversation-stream-heading > div {
    display: grid;
    gap: 2px;
  }

  .ai-conversation-stream-heading span {
    color: #315f96;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
  }

  .ai-conversation-stream-heading strong {
    color: #162033;
    font-size: 18px;
  }

  .ai-conversation-stream-heading small {
    color: #7a8799;
    font-size: 10px;
    text-align: right;
  }

  .ai-conversation-stream
  .ai-conversation-transcript {
    min-height: 0;
    margin-top: 0;
    border-color: #dce5ef;
    background: #f5f8fc;
  }

  .ai-conversation-control-card {
    border-color: #dce5ef;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
  }
}

@keyframes ai-conversation-live-halo-pulse {
  0%,
  100% {
    transform: scale(.985);
    opacity: .72;
  }

  50% {
    transform: scale(1.015);
    opacity: 1;
  }
}

@keyframes ai-conversation-live-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .45;
    transform: scale(.78);
  }
}

/*
 * スマホ: チューターを上部へ大きく表示し、
 * その下の会話ログへ視線が自然に流れる構成。
 */
@media (max-width: 900px) {
  .ai-conversation-live-card {
    display: grid;
    grid-template-rows:
      auto
      minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
    background: #fff;
  }

  .ai-conversation-live-stage {
    display: grid;
    grid-template-columns:
      clamp(112px, 30vw, 150px)
      minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-bottom: 1px solid #dfe7f0;
    background:
      linear-gradient(
        135deg,
        #f8fbff,
        #edf4fc
      );
  }

  .ai-conversation-live-visual {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 150px;
    aspect-ratio: 1;
    margin: 0 auto;
  }

  .ai-conversation-live-halo {
    position: absolute;
    inset: 6%;
    border: 1px solid rgba(49, 95, 150, .16);
    border-radius: 50%;
    box-shadow:
      0 0 0 9px rgba(49, 95, 150, .04);
  }

  .ai-conversation-live-stage
  .ai-conversation-animated-tutor {
    width: clamp(104px, 28vw, 140px);
    max-width: 92%;
  }

  .ai-conversation-live-now {
    position: absolute;
    right: 0;
    bottom: 4%;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(20, 33, 61, .9);
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .07em;
  }

  .ai-conversation-live-now i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff4051;
  }

  .ai-conversation-live-copy {
    min-width: 0;
  }

  .ai-conversation-live-copy .pill {
    font-size: 8px;
  }

  .ai-conversation-live-copy h2 {
    display: -webkit-box;
    margin: 6px 0 4px;
    overflow: hidden;
    color: #14213d;
    font-size: clamp(15px, 4.2vw, 19px);
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .ai-conversation-live-copy > p {
    margin: 0;
    color: #667085;
    font-size: 10px;
    line-height: 1.45;
  }

  .ai-conversation-live-copy
  .ai-conversation-live-status {
    gap: 5px;
    margin-top: 8px;
  }

  .ai-conversation-live-copy
  .ai-conversation-live-status > span {
    padding: 4px 7px;
    font-size: 8px;
  }

  .ai-conversation-stream {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 8px;
    background: #fbfcfe;
  }

  .ai-conversation-stream-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
    padding: 0 2px 7px;
  }

  .ai-conversation-stream-heading > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
  }

  .ai-conversation-stream-heading span {
    color: #315f96;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
  }

  .ai-conversation-stream-heading strong {
    color: #162033;
    font-size: 14px;
  }

  .ai-conversation-stream-heading small {
    display: none;
  }

  .ai-conversation-stream
  .ai-conversation-transcript {
    min-height: 0;
    margin: 0;
    padding: 10px;
    border-radius: 11px;
  }
}

@media (max-width: 560px) {
  .ai-conversation-live-stage {
    grid-template-columns:
      98px
      minmax(0, 1fr);
    gap: 9px;
    padding: 8px 9px;
  }

  .ai-conversation-live-stage
  .ai-conversation-animated-tutor {
    width: 94px;
  }

  .ai-conversation-live-copy > p {
    display: none;
  }

  .ai-conversation-live-copy h2 {
    font-size: 14px;
  }

  .ai-conversation-live-copy
  .ai-conversation-live-status {
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-conversation-live-halo,
  .ai-conversation-live-now i {
    animation: none;
  }
}

/* ===== Day5学習履歴：講師フィードバック項目を表示しない ===== */

.learning-history-date-grid.day5-no-teacher-feedback {
  grid-template-columns:
    minmax(0, 1fr) !important;
}

.learning-history-date-grid.day5-no-teacher-feedback
> div {
  width: 100%;
}

@media (max-width: 620px) {
  .learning-history-date-grid.day5-no-teacher-feedback {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }
}

/* ===== Day6 会話ログ優先・折りたたみ式コントロール ===== */

.ai-conversation-essential-actions {
  display: grid;
  gap: 8px;
}

.ai-conversation-control-settings {
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #f8fbff;
}

.ai-conversation-control-settings > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  color: #243b5a;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}

.ai-conversation-control-settings > summary::-webkit-details-marker {
  display: none;
}

.ai-conversation-control-settings > summary > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.ai-conversation-control-settings > summary strong {
  font-size: 12px;
  line-height: 1.3;
}

.ai-conversation-control-settings > summary small {
  overflow: hidden;
  color: #667085;
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-conversation-control-settings > summary > b {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e7eff9;
}

.ai-conversation-control-settings > summary > b::before,
.ai-conversation-control-settings > summary > b::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1.5px;
  border-radius: 999px;
  background: #315f96;
  transform: translate(-50%, -50%);
  transition: transform .18s ease;
}

.ai-conversation-control-settings > summary > b::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}

.ai-conversation-control-settings[open]
> summary > b::after {
  transform:
    translate(-50%, -50%)
    rotate(0deg);
}

.ai-conversation-control-settings[open]
> summary {
  border-bottom: 1px solid #dce5ef;
  background: #f2f7fd;
}

.ai-conversation-control-settings-body {
  display: grid;
  gap: 9px;
  padding: 10px;
}

.ai-conversation-control-settings-body
.ai-conversation-live-sensitivity {
  min-width: 0;
  padding: 10px;
}

.ai-conversation-control-settings-body
> .muted {
  margin: 0;
  line-height: 1.5;
}

@media (min-width: 901px) {
  body.ai-conversation-active .main,
  body.ai-conversation-active.app-mode .main,
  body.ai-conversation-active.practical-study-active .main {
    width: 100% !important;
    max-width: none !important;
    padding: clamp(6px, .7vw, 10px) !important;
  }

  body.ai-conversation-active #content,
  body.ai-conversation-active.practical-study-active #content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .ai-conversation-session-shell {
    height: calc(100dvh - 16px);
    min-height: 500px;
    border: 1px solid #dce3ec;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  }

  .ai-conversation-progress-card {
    padding:
      11px
      clamp(14px, 1.5vw, 22px)
      22px;
  }

  .ai-conversation-live-grid {
    grid-template-columns:
      minmax(0, 1fr)
      clamp(210px, 18vw, 236px);
    gap: clamp(8px, .8vw, 12px);
    padding: clamp(8px, .8vw, 12px);
  }

  .ai-conversation-live-card {
    grid-template-columns:
      clamp(220px, 22vw, 300px)
      minmax(360px, 1fr);
  }

  .ai-conversation-live-stage {
    gap: 13px;
    padding:
      clamp(16px, 2vw, 27px)
      clamp(12px, 1.5vw, 20px);
  }

  .ai-conversation-live-visual {
    width: min(100%, 265px);
  }

  .ai-conversation-live-stage
  .ai-conversation-animated-tutor {
    width: clamp(190px, 18vw, 250px);
  }

  .ai-conversation-live-copy h2 {
    font-size: clamp(16px, 1.45vw, 21px);
    -webkit-line-clamp: 2;
  }

  .ai-conversation-live-copy > p {
    font-size: 11px;
    line-height: 1.55;
  }

  .ai-conversation-stream {
    padding:
      clamp(12px, 1.2vw, 18px);
  }

  .ai-conversation-stream-heading {
    gap: 10px;
    padding-bottom: 9px;
  }

  .ai-conversation-stream-heading small {
    max-width: 210px;
  }

  .ai-conversation-control-card {
    display: flex;
    flex-direction: column;
    align-content: initial;
    gap: 9px;
    min-width: 0;
    padding: 11px;
    overflow-y: auto;
    border-color: #dce5ef;
  }

  .ai-conversation-panel-heading span {
    font-size: 8px;
  }

  .ai-conversation-panel-heading h3 {
    margin-top: 2px;
    font-size: 15px;
  }

  .ai-conversation-essential-actions {
    gap: 7px;
  }

  .ai-conversation-essential-actions button {
    min-height: 42px;
    padding: 9px 8px;
    font-size: 12px;
    line-height: 1.35;
  }

  .ai-conversation-essential-actions
  #aiConversationFinishButton {
    font-size: 11px;
  }

  .ai-conversation-control-card
  #aiConversationActionResult {
    flex: 0 0 auto;
  }
}

/*
 * 低め・狭めのPC画面では、題名説明をさらに圧縮して
 * 会話ログの横幅と縦幅を優先します。
 */
@media (
  min-width: 901px
) and (
  max-width: 1180px
) {
  .ai-conversation-live-grid {
    grid-template-columns:
      minmax(0, 1fr)
      210px;
    gap: 8px;
    padding: 7px;
  }

  .ai-conversation-live-card {
    grid-template-columns:
      clamp(205px, 20vw, 245px)
      minmax(350px, 1fr);
  }

  .ai-conversation-live-stage
  .ai-conversation-animated-tutor {
    width: clamp(178px, 17vw, 218px);
  }

  .ai-conversation-live-copy > p {
    display: none;
  }

  .ai-conversation-live-copy
  .ai-conversation-live-status {
    margin-top: 9px;
  }

  .ai-conversation-stream {
    padding: 11px;
  }

  .ai-conversation-stream-heading small {
    display: none;
  }

  .ai-conversation-control-card {
    padding: 9px;
  }

  .ai-conversation-control-settings > summary {
    padding: 8px 9px;
  }
}

@media (max-width: 900px) {
  .ai-conversation-control-card {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr);
    align-items: stretch;
    gap: 7px;
    max-height: 42dvh;
    padding: 8px;
    overflow-y: auto;
  }

  .ai-conversation-control-card
  .ai-conversation-panel-heading {
    display: none;
  }

  .ai-conversation-essential-actions {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .ai-conversation-essential-actions
  #aiConversationConnectButton,
  .ai-conversation-essential-actions
  #aiConversationFinishButton {
    grid-column: 1 / -1;
  }

  .ai-conversation-essential-actions button {
    min-height: 40px;
    padding: 8px;
    font-size: 11px;
    line-height: 1.3;
  }

  .ai-conversation-control-settings {
    grid-column: 1 / -1;
  }

  .ai-conversation-control-settings-body {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .ai-conversation-control-settings-body
  > .muted {
    grid-column: 1 / -1;
  }

  .ai-conversation-control-card
  #aiConversationActionResult {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .ai-conversation-control-settings-body {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .ai-conversation-control-settings-body
  > .muted {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-conversation-control-settings
  > summary > b::before,
  .ai-conversation-control-settings
  > summary > b::after {
    transition: none;
  }
}

/* ===== Day6 PC：会話／コントロール縦配置 ===== */

@media (min-width: 901px) {
  /*
   * 四隅は約6pxだけ空け、利用可能な高さを
   * Day6セッションへほぼすべて割り当てます。
   */
  body.ai-conversation-active .main,
  body.ai-conversation-active.app-mode .main,
  body.ai-conversation-active.practical-study-active .main {
    padding: 6px !important;
  }

  .ai-conversation-session-shell {
    height: calc(100dvh - 12px);
    min-height: 500px;
  }

  /*
   * 上段：会話 80%
   * 下段：会話コントロール 20%
   */
  .ai-conversation-live-grid {
    grid-template-columns:
      minmax(0, 1fr);
    grid-template-rows:
      minmax(0, 4fr)
      minmax(118px, 1fr);
    gap: clamp(7px, .7vw, 10px);
    padding: clamp(7px, .7vw, 10px);
  }

  /*
   * 音声設定を開いた時だけ70:30へ変更し、
   * スライダー領域を確保します。
   */
  .ai-conversation-live-grid.controls-expanded {
    grid-template-rows:
      minmax(0, 7fr)
      minmax(180px, 3fr);
  }

  .ai-conversation-live-card {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  /*
   * 下段コントロールは横方向へ圧縮。
   * 左：見出し
   * 中央：必須ボタン
   * 右：必要時だけ開く音声設定
   */
  .ai-conversation-control-card {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns:
      minmax(118px, 150px)
      minmax(0, 1fr)
      minmax(205px, 270px);
    grid-template-rows:
      minmax(0, 1fr)
      auto;
    align-items: center;
    gap: 7px 10px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 9px 11px;
    overflow: hidden;
  }

  .ai-conversation-control-card
  .ai-conversation-panel-heading {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    min-width: 0;
  }

  .ai-conversation-control-card
  .ai-conversation-panel-heading h3 {
    margin-top: 2px;
    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.25;
  }

  .ai-conversation-essential-actions {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: stretch;
    gap: clamp(6px, .65vw, 9px);
    min-width: 0;
    height: 100%;
    max-height: 58px;
  }

  .ai-conversation-essential-actions button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 42px;
    height: 100%;
    padding: 7px 10px;
    font-size: clamp(10px, .9vw, 12px);
    line-height: 1.25;
  }

  .ai-conversation-essential-actions
  #aiConversationFinishButton {
    flex-grow: 1.25;
    font-size: clamp(10px, .86vw, 12px);
  }

  .ai-conversation-control-settings {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    width: 100%;
    min-width: 0;
    max-height: 100%;
  }

  .ai-conversation-control-settings > summary {
    min-height: 42px;
    padding: 7px 9px;
  }

  .ai-conversation-control-settings-body {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 8px;
  }

  .ai-conversation-control-settings-body
  .ai-conversation-live-sensitivity {
    padding: 8px;
  }

  .ai-conversation-control-settings-body
  > .muted {
    grid-column: 1 / -1;
    font-size: 9px;
  }

  .ai-conversation-live-grid.controls-expanded
  .ai-conversation-control-card {
    align-items: stretch;
  }

  .ai-conversation-live-grid.controls-expanded
  .ai-conversation-control-settings {
    align-self: stretch;
    overflow-y: auto;
  }

  .ai-conversation-control-card
  #aiConversationActionResult {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    max-height: 48px;
    overflow-y: auto;
  }

  .ai-conversation-control-card
  #aiConversationActionResult:empty {
    display: none;
  }

  /*
   * 会話領域内のチューターとログも、
   * 上段の高さを余さず使います。
   */
  .ai-conversation-live-stage,
  .ai-conversation-stream {
    height: 100%;
    min-height: 0;
  }

  .ai-conversation-stream
  .ai-conversation-transcript {
    height: 100%;
    min-height: 0;
  }
}

/*
 * 低いPC画面ではコントロールの最小高を少し下げ、
 * 会話ログを確保しつつ75:25程度に収めます。
 */
@media (
  min-width: 901px
) and (
  max-height: 680px
) {
  .ai-conversation-progress-card {
    padding-top: 8px;
    padding-bottom: 18px;
  }

  .ai-conversation-live-grid {
    grid-template-rows:
      minmax(0, 3fr)
      minmax(108px, 1fr);
    padding: 6px;
    gap: 6px;
  }

  .ai-conversation-live-grid.controls-expanded {
    grid-template-rows:
      minmax(0, 7fr)
      minmax(160px, 3fr);
  }

  .ai-conversation-control-card {
    grid-template-columns:
      minmax(108px, 135px)
      minmax(0, 1fr)
      minmax(190px, 240px);
    padding: 7px 9px;
  }

  .ai-conversation-essential-actions {
    max-height: 50px;
  }

  .ai-conversation-live-stage {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-conversation-live-grid {
    transition: none;
  }
}

/* ===== 生徒プロフィール：選択式・200文字制限・AI利用同意 ===== */

.student-profile-settings-card {
  gap: 0;
}

.student-profile-choice-group {
  min-width: 0;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}

.student-profile-choice-group legend {
  width: 100%;
  margin: 0 0 5px;
  padding: 0;
  color: #17233a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.student-profile-choice-group legend span {
  color: #df1528;
}

.student-profile-purpose-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 2px;
}

.student-profile-choice-row,
.student-profile-skill-choice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #17233a;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
}

.student-profile-choice-row:hover,
.student-profile-skill-choice:hover,
.student-profile-choice-row:has(input:checked),
.student-profile-skill-choice:has(input:checked) {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.student-profile-choice-row input,
.student-profile-skill-choice input,
.student-profile-ai-consent input {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  margin: 0;
  accent-color: #315f96;
}

.student-profile-choice-row span,
.student-profile-skill-choice span {
  min-width: 0;
}

.student-profile-text-field,
.student-profile-select-field {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}

.student-profile-text-field > label,
.student-profile-select-field > label {
  margin: 0;
  color: #17233a;
  font-size: 13px;
  font-weight: 800;
}

.student-profile-text-field textarea {
  min-height: 88px;
  resize: vertical;
}

.student-profile-character-count {
  justify-self: end;
  color: #758196;
  font-size: 10px;
  line-height: 1;
}

.student-profile-character-count span {
  font-variant-numeric: tabular-nums;
}

.student-profile-skill-group > .muted {
  margin: -2px 0 4px;
}

.student-profile-skill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 2px;
}

.student-profile-skill-choice {
  align-items: center;
}

.student-profile-ai-consent {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 12px 0 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.student-profile-ai-consent > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.student-profile-ai-consent strong {
  color: #173f70;
  font-size: 12px;
  line-height: 1.4;
}

.student-profile-ai-consent small {
  color: #5f7087;
  font-size: 10px;
  line-height: 1.45;
}

.student-profile-ai-consent:has(input:checked) {
  border: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 620px) {
  .student-profile-purpose-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-profile-skill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
  }

  .student-profile-text-field textarea {
    min-height: 96px;
  }
}

/* ===== Day6 redesigned layout based on July 2026 mockup ===== */

.ai-conversation-setup-shell {
  display: grid;
  gap: 18px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 16px;
}

.ai-conversation-guide-panel {
  padding: 18px 18px 14px;
}

.section-header.compact {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.section-header.compact h3 {
  margin: 0;
  color: #1f4f9c;
  font-size: 24px;
}

.section-header.compact p {
  margin: 0;
  color: #667085;
  line-height: 1.6;
}

.ai-conversation-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ai-conversation-guide-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px 14px 16px;
  border: 1px solid #d9e3f2;
  border-radius: 18px;
  background: #fff;
}

.ai-conversation-guide-card.accent {
  background: linear-gradient(180deg, #fcfeff 0%, #f4f8ff 100%);
}

.ai-conversation-guide-card h4 {
  margin: 0;
  color: #1f4f9c;
  font-size: 18px;
}

.ai-conversation-guide-card ul {
  margin: 0;
  padding-left: 18px;
  color: #344054;
  line-height: 1.6;
  font-size: 13px;
}

.ai-conversation-guide-inline-field {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #d9e3f2;
  border-radius: 14px;
  background: #f8fbff;
}

.ai-conversation-guide-inline-field label {
  color: #1f4f9c;
  font-size: 12px;
  font-weight: 800;
}

.ai-conversation-guide-inline-field input {
  width: 100%;
  border-radius: 12px;
  background: #fff;
}

.ai-conversation-guide-slider-labels {
  display: flex;
  justify-content: space-between;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.ai-conversation-guide-slider-track {
  position: relative;
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: #dde6f2;
}

.ai-conversation-guide-slider-track span {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  border: 4px solid #1f4f9c;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 10px rgba(31, 79, 156, .2);
}

.ai-conversation-guide-note {
  margin: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.55;
}

.ai-conversation-guide-example-box {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #bcd0ef;
  border-radius: 16px;
  background: #f8fbff;
}

.ai-conversation-guide-example-box strong {
  color: #1f4f9c;
}

.ai-conversation-guide-example-box p,
.ai-conversation-guide-feedback-icon p {
  margin: 0;
  color: #344054;
  line-height: 1.6;
}

.ai-conversation-guide-feedback-icon {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.ai-conversation-guide-feedback-icon span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #eef4ff;
  color: #1f4f9c;
  font-size: 28px;
}

.ai-conversation-setup-main {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.ai-conversation-preview-card {
  overflow: hidden;
  padding: 0;
}

.ai-conversation-preview-hero {
  display: grid;
  place-items: center;
  min-height: 290px;
  padding: 24px;
  background: linear-gradient(180deg, #f7f7f2 0%, #efefe7 100%);
}

.ai-conversation-preview-hero .ai-confirmation-tutor-illustration {
  width: min(100%, 250px);
  height: auto;
}

.ai-conversation-preview-body {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.pill.danger-outline {
  width: fit-content;
  color: #d92d20;
  background: #fff;
  border: 1px solid #fca5a5;
}

.ai-conversation-preview-body h2,
.ai-conversation-preview-body h3 {
  margin: 0;
  color: #14213d;
}

.ai-conversation-preview-body h2 {
  font-size: 34px;
  line-height: 1;
}

.ai-conversation-preview-body h3 {
  font-size: 22px;
}

.ai-conversation-preview-body p {
  margin: 0;
  color: #475467;
  line-height: 1.7;
}

.ai-conversation-preview-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: #1f4f9c;
  font-size: 13px;
  font-weight: 700;
}

.ai-conversation-preview-theme {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  background: #f8fbff;
  border: 1px solid #dde7f5;
}

.ai-conversation-preview-theme span {
  color: #1f4f9c;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.ai-conversation-preview-theme strong {
  color: #14213d;
  line-height: 1.5;
}

.ai-conversation-start-card.modern {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.ai-conversation-settings.modern {
  margin-top: 0;
}

.ai-conversation-inline-range {
  grid-column: 1 / -1;
}

.ai-conversation-inline-range > span,
.ai-conversation-range-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ai-conversation-inline-range output {
  color: #1f4f9c;
  font-size: 12px;
  font-weight: 800;
}

.ai-conversation-inline-range input[type="range"] {
  width: 100%;
  margin-top: 8px;
}

.ai-conversation-range-labels {
  margin-top: 8px;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
}

.ai-conversation-range-labels.split span:nth-child(2) {
  text-align: center;
  flex: 1 1 auto;
}

.ai-conversation-delay-legend {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding-left: 18px;
  color: #475467;
  font-size: 12px;
}

.ai-conversation-delay-legend li.active {
  color: #1f4f9c;
  font-weight: 800;
}

.ai-conversation-advanced-settings {
  border: 1px solid #dde6f3;
  border-radius: 14px;
  background: #fbfdff;
}

.ai-conversation-advanced-settings summary {
  cursor: pointer;
  padding: 12px 14px;
  color: #1f4f9c;
  font-weight: 800;
}

.ai-conversation-advanced-settings .form-grid {
  padding: 0 14px 14px;
}

.ai-conversation-start-actions {
  justify-content: flex-start;
  gap: 10px;
}

.ai-conversation-start-actions button:first-child {
  min-width: 270px;
}

.ai-conversation-session-shell {
  background: #f5f7fb;
}

.ai-conversation-progress-card.redesigned {
  padding: 14px 18px 22px;
}

.ai-conversation-progress-times {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.ai-conversation-progress-times small {
  display: block;
  margin-bottom: 2px;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
}

.ai-conversation-live-grid.redesigned {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: stretch;
}

.ai-conversation-live-card.redesigned {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.ai-conversation-stage-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-conversation-stage-toolbar .compact {
  margin-left: auto;
}

.ai-conversation-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #d9e3f2;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.ai-conversation-badge.status.connected,
.ai-conversation-badge.status {
  color: #16a34a;
}

.ai-conversation-stage-content {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.ai-conversation-stage-visual-column {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 12px;
  min-height: 0;
}

.ai-conversation-live-visual.refined {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 330px;
  padding: 20px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, #f4f2ec 0%, #edece4 100%);
}

.ai-conversation-live-visual.refined .ai-conversation-animated-tutor {
  width: min(100%, 250px);
}

.ai-conversation-state-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dde7f5;
  border-radius: 18px;
  background: #fbfdff;
}

.ai-conversation-state-copy {
  display: grid;
  gap: 4px;
  text-align: center;
}

.ai-conversation-state-copy strong {
  color: #14213d;
  font-size: 18px;
}

.ai-conversation-state-copy span,
.ai-conversation-stage-note {
  color: #667085;
  line-height: 1.6;
}

.ai-conversation-wave-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  align-items: end;
  min-height: 28px;
}

.ai-conversation-wave-bars span {
  display: block;
  min-height: 6px;
  height: 12px;
  border-radius: 999px;
  opacity: .35;
  transform-origin: center bottom;
}

.ai-conversation-wave-bars.assistant span {
  background: linear-gradient(180deg, #6ddf6d 0%, #49b85e 100%);
}

.ai-conversation-wave-bars.user span {
  background: linear-gradient(180deg, #8b5cf6 0%, #6d48dd 100%);
}

.ai-conversation-state-bars.user {
  display: none;
}

.ai-conversation-stage-note {
  padding: 10px 14px;
  border-radius: 14px;
  background: #f5f8fd;
  border: 1px solid #dde7f5;
  font-size: 13px;
}

.ai-conversation-stream.redesigned {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  padding: 14px;
  border: 1px solid #dde7f5;
  border-radius: 22px;
  background: #fff;
}

.ai-conversation-stream.redesigned .ai-conversation-transcript {
  margin-top: 10px;
  min-height: 320px;
  background: #f9fbfe;
}

.ai-conversation-message {
  width: min(92%, 760px);
}

.ai-conversation-message-copy,
.ai-conversation-message p {
  line-height: 1.75;
}

.ai-conversation-bottom-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #dde7f5;
  background: #fbfdff;
  color: #344054;
  font-weight: 700;
}

.ai-conversation-bottom-hint .round {
  white-space: nowrap;
}

.ai-conversation-control-card.redesigned {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.ai-conversation-control-card.redesigned .ai-conversation-essential-actions {
  display: grid;
  gap: 8px;
}

.ai-conversation-result-layout.redesigned {
  padding: 18px;
}

.ai-conversation-final-evaluation {
  padding: 18px;
}

.ai-conversation-result-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.ai-conversation-result-toolbar h2 {
  margin: 8px 0 8px;
  color: #14213d;
  font-size: 34px;
}

.ai-conversation-result-toolbar p {
  margin: 0;
  color: #526077;
  line-height: 1.6;
}

.ai-conversation-result-meta-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.ai-conversation-result-meta-card article {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #dde7f5;
  border-radius: 18px;
  background: #fbfdff;
}

.ai-conversation-result-meta-card span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.ai-conversation-result-meta-card strong {
  color: #1f4f9c;
  font-size: 24px;
}

.ai-conversation-result-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.ai-conversation-result-main-copy .ai-evaluation-copy {
  padding: 18px;
  border: 1px solid #dde7f5;
  border-radius: 20px;
  background: #fff;
}

.ai-conversation-result-sidecards {
  display: grid;
  gap: 14px;
}

.ai-conversation-result-sidecard {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #dde7f5;
  background: #fbfdff;
}

.ai-conversation-result-sidecard.strength {
  background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
}

.ai-conversation-result-sidecard.focus {
  background: linear-gradient(180deg, #fffdf7 0%, #fff8ea 100%);
}

.ai-conversation-result-sidecard h3 {
  margin: 0 0 10px;
  color: #1f4f9c;
  font-size: 20px;
}

.ai-conversation-result-sidecard ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: #344054;
  line-height: 1.7;
}

.ai-conversation-transcript-card.redesigned {
  max-width: 1200px;
  margin-top: 18px;
}

.ai-conversation-result-actions {
  justify-content: space-between;
}

.ai-conversation-result-actions button:last-child {
  min-width: 260px;
}

.ai-conversation-session-shell[data-live-state="assistant-speaking"] .ai-conversation-state-bars.assistant,
.ai-conversation-session-shell[data-live-state="user-speaking"] .ai-conversation-state-bars.user {
  display: block;
}

.ai-conversation-session-shell[data-live-state="assistant-speaking"] .ai-conversation-state-bars.user,
.ai-conversation-session-shell[data-live-state="user-speaking"] .ai-conversation-state-bars.assistant {
  display: none;
}

.ai-conversation-session-shell[data-live-state="assistant-speaking"] .ai-conversation-wave-bars.assistant span,
.ai-conversation-session-shell[data-live-state="user-speaking"] .ai-conversation-wave-bars.user span {
  opacity: 1;
  animation: aiConversationWave 1.1s ease-in-out infinite;
  animation-delay: var(--ai-bar-delay, 0s);
}

.ai-conversation-session-shell[data-live-state="ready"] .ai-conversation-wave-bars.assistant span,
.ai-conversation-session-shell[data-live-state="waiting"] .ai-conversation-wave-bars.assistant span,
.ai-conversation-session-shell[data-live-state="paused"] .ai-conversation-wave-bars.assistant span {
  opacity: .28;
  animation: aiConversationPulse 1.6s ease-in-out infinite;
  animation-delay: var(--ai-bar-delay, 0s);
}

@keyframes aiConversationWave {
  0%, 100% { transform: scaleY(.55); height: 10px; }
  50% { transform: scaleY(1.4); height: 26px; }
}

@keyframes aiConversationPulse {
  0%, 100% { transform: scaleY(.65); }
  50% { transform: scaleY(1); }
}

@media (max-width: 1180px) {
  .ai-conversation-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-conversation-setup-main,
  .ai-conversation-result-overview-grid,
  .ai-conversation-stage-content,
  .ai-conversation-live-grid.redesigned {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-conversation-result-toolbar {
    flex-direction: column;
  }

  .ai-conversation-result-sidecards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ai-conversation-setup-shell {
    padding: 12px;
  }

  .ai-conversation-guide-grid,
  .ai-conversation-result-sidecards,
  .ai-conversation-result-meta-card {
    grid-template-columns: 1fr;
  }

  .ai-conversation-start-card.modern,
  .ai-conversation-final-evaluation,
  .ai-conversation-transcript-card.redesigned {
    padding: 16px;
  }

  .ai-conversation-preview-hero {
    min-height: 220px;
  }

  .ai-conversation-preview-body h2 {
    font-size: 28px;
  }

  .ai-conversation-preview-body h3,
  .ai-conversation-result-toolbar h2 {
    font-size: 26px;
  }

  .ai-conversation-progress-card.redesigned {
    padding: 12px 12px 20px;
  }

  .ai-conversation-progress-heading {
    align-items: center;
  }

  .ai-conversation-progress-heading time {
    font-size: 24px;
  }

  .ai-conversation-live-grid.redesigned {
    padding: 10px;
  }

  .ai-conversation-live-card.redesigned {
    padding: 12px;
  }

  .ai-conversation-live-visual.refined {
    min-height: 260px;
  }

  .ai-conversation-stage-toolbar .compact {
    margin-left: 0;
  }

  .ai-conversation-stream.redesigned .ai-conversation-transcript {
    min-height: 220px;
  }

  .ai-conversation-bottom-hint,
  .ai-conversation-result-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ai-conversation-result-actions button:last-child,
  .ai-conversation-start-actions button:first-child {
    min-width: 0;
    width: 100%;
  }
}

/* ===== Day6 static tutor + red theme refinement ===== */

:root {
  --day6-red: #c92228;
  --day6-red-dark: #a7191f;
  --day6-red-soft: #fff4f4;
  --day6-red-border: #f0c8cb;
  --day6-red-muted: #7f1d1d;
}

.ai-conversation-static-tutor {
  margin: 0;
}

.ai-conversation-static-tutor img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.ai-conversation-static-tutor.preview {
  width: min(100%, 260px);
}

.ai-conversation-static-tutor.live {
  width: min(100%, 265px);
}

.ai-conversation-static-tutor.result {
  width: 86px;
  flex: 0 0 86px;
}

.ai-conversation-static-tutor.preview img,
.ai-conversation-static-tutor.live img,
.ai-conversation-static-tutor.result img {
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(17, 24, 39, .10);
}

.ai-conversation-static-tutor.result img {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-position: center top;
}

.ai-conversation-guide-panel,
.ai-conversation-preview-theme,
.ai-conversation-state-panel,
.ai-conversation-stage-note,
.ai-conversation-bottom-hint,
.ai-conversation-result-meta-card article,
.ai-conversation-result-main-copy .ai-evaluation-copy,
.ai-conversation-result-sidecard,
.ai-conversation-transcript-card.redesigned {
  border-color: var(--day6-red-border);
}

.section-header.compact h3,
.ai-conversation-guide-card h4,
.ai-conversation-guide-inline-field label,
.ai-conversation-preview-theme span,
.ai-conversation-panel-heading span,
.ai-conversation-result-sidecard h3,
.ai-conversation-result-meta-card strong,
.ai-conversation-preview-stats,
.ai-conversation-inline-range output,
.ai-conversation-sensitivity-setting output,
.ai-conversation-live-sensitivity output,
.ai-conversation-progress-heading strong,
.ai-conversation-stage-copy strong,
.ai-conversation-topic-card span {
  color: var(--day6-red);
}

.ai-conversation-guide-card.accent,
.ai-conversation-preview-hero,
.ai-conversation-live-visual.refined,
.ai-conversation-result-sidecard.strength,
.ai-conversation-result-sidecard.focus,
.ai-conversation-state-panel,
.ai-conversation-guide-example-box,
.ai-conversation-guide-inline-field,
.ai-conversation-preview-theme,
.ai-conversation-bottom-hint,
.ai-conversation-stage-note,
.ai-conversation-result-meta-card article {
  background: linear-gradient(180deg, #fffefe 0%, var(--day6-red-soft) 100%);
}

.ai-conversation-guide-feedback-icon span {
  background: #fdebec;
  color: var(--day6-red);
}

.ai-conversation-guide-slider-track,
.ai-conversation-meter-track {
  background: #f3d9db;
}

.ai-conversation-guide-slider-track span,
.ai-conversation-meter-track > span {
  background: linear-gradient(90deg, #e05b61, var(--day6-red));
  border-color: var(--day6-red);
}

.ai-conversation-meter-track > span[data-phase="closing"] {
  background: linear-gradient(90deg, #e05b61, #d97706);
}

.ai-conversation-meter-track > span[data-phase="feedback"],
.ai-conversation-meter-track > span[data-phase="completed"] {
  background: linear-gradient(90deg, #e05b61, var(--day6-red-dark));
}

.ai-conversation-badge {
  border-color: var(--day6-red-border);
}

.ai-conversation-badge.status.connected,
.ai-conversation-badge.status {
  color: var(--day6-red);
  background: #fff;
}

.ai-conversation-live-now {
  background: rgba(201, 34, 40, .95);
}

.ai-conversation-message.assistant {
  border-color: #f1cfd2;
  background: #fff7f7;
}

.ai-conversation-message.user {
  background: #fdebec;
}

.ai-conversation-message-role,
.ai-conversation-message.user .ai-conversation-message-role {
  color: var(--day6-red);
}

.ai-conversation-wave-bars.assistant span {
  background: linear-gradient(180deg, #ff8a8f 0%, var(--day6-red) 100%);
}

.ai-conversation-wave-bars.user span {
  background: linear-gradient(180deg, #ffb3b8 0%, #d9464e 100%);
}

.ai-conversation-control-card.redesigned,
.ai-conversation-live-card.redesigned,
.ai-conversation-preview-card,
.ai-conversation-start-card.modern,
.ai-conversation-guide-panel,
.ai-conversation-final-evaluation {
  box-shadow: 0 12px 28px rgba(201, 34, 40, .06);
}

.ai-conversation-control-card.redesigned .secondary,
.ai-conversation-stage-toolbar .secondary,
.ai-conversation-bottom-hint .secondary,
.ai-conversation-result-actions .secondary,
.ai-conversation-feedback-toolbar-actions .secondary {
  border-color: var(--day6-red-border);
  color: var(--day6-red);
  background: #fff;
}

.ai-conversation-start-actions button:first-child,
.ai-conversation-result-actions button:last-child,
.ai-conversation-control-card.redesigned .danger-soft,
.ai-conversation-bottom-hint .round {
  background: linear-gradient(180deg, #db3b42 0%, var(--day6-red-dark) 100%);
  border-color: var(--day6-red-dark);
  color: #fff;
}

.ai-conversation-control-card.redesigned .danger-soft:hover,
.ai-conversation-bottom-hint .round:hover,
.ai-conversation-start-actions button:first-child:hover,
.ai-conversation-result-actions button:last-child:hover {
  filter: brightness(.98);
}

.ai-conversation-result-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.ai-conversation-result-toolbar .ai-evaluation-language-switch button.active {
  background: var(--day6-red);
  border-color: var(--day6-red);
}

.ai-conversation-preview-body .pill,
.ai-conversation-result-toolbar .pill {
  background: #fff;
  color: var(--day6-red);
  border: 1px solid var(--day6-red-border);
}

.ai-conversation-result-actions {
  border-top-color: var(--day6-red-border);
}

@media (max-width: 900px) {
  .ai-conversation-result-hero {
    align-items: flex-start;
  }

  .ai-conversation-static-tutor.result {
    width: 72px;
    flex-basis: 72px;
  }
}

/* ===== Day6 PC layout correction: prevent nested-grid collapse ===== */

@media (min-width: 901px) {
  body.ai-conversation-active .main,
  body.ai-conversation-active.app-mode .main,
  body.ai-conversation-active.practical-study-active .main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 8px !important;
  }

  body.ai-conversation-active #content,
  body.ai-conversation-active.practical-study-active #content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .ai-conversation-session-shell {
    width: 100%;
    height: calc(100dvh - 16px);
    min-height: 620px;
  }

  .ai-conversation-live-grid.redesigned {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .ai-conversation-live-grid.redesigned.controls-expanded {
    grid-template-rows: minmax(0, 1fr) auto !important;
  }

  .ai-conversation-live-card.redesigned {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 14px !important;
  }

  .ai-conversation-live-card.redesigned > .ai-conversation-stage-toolbar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ai-conversation-live-card.redesigned > .ai-conversation-stage-content {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns:
      clamp(280px, 29vw, 390px)
      minmax(500px, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: clamp(12px, 1.2vw, 18px) !important;
  }

  .ai-conversation-stage-visual-column {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .ai-conversation-live-visual.refined {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    padding: clamp(12px, 1.3vw, 20px) !important;
  }

  .ai-conversation-static-tutor.live {
    width: min(100%, 300px) !important;
    max-height: 100% !important;
  }

  .ai-conversation-static-tutor.live img {
    width: 100% !important;
    max-height: min(45dvh, 500px) !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center 20% !important;
  }

  .ai-conversation-stream.redesigned {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 16px !important;
  }

  .ai-conversation-stream.redesigned .ai-conversation-stream-heading {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ai-conversation-stream.redesigned .ai-conversation-stream-heading small {
    display: block !important;
    max-width: 280px !important;
    text-align: right !important;
    white-space: normal !important;
  }

  .ai-conversation-stream.redesigned .ai-conversation-transcript {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 250px !important;
    height: 100% !important;
    margin-top: 10px !important;
    padding: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  .ai-conversation-stream.redesigned .ai-conversation-message,
  .ai-conversation-stream.redesigned .ai-conversation-message-copy,
  .ai-conversation-stream.redesigned .ai-conversation-message-paragraph,
  .ai-conversation-stream.redesigned .ai-conversation-message p {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .ai-conversation-stream.redesigned .ai-conversation-message {
    width: min(82%, 760px) !important;
    max-width: 760px !important;
  }

  .ai-conversation-bottom-hint {
    width: 100% !important;
    min-width: 0 !important;
  }

  .ai-conversation-bottom-hint #aiConversationFinishButton {
    display: none !important;
  }

  .ai-conversation-control-card.redesigned {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns:
      minmax(150px, 190px)
      minmax(320px, 1fr)
      minmax(240px, 330px) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 100px !important;
    padding: 12px 16px !important;
    overflow: visible !important;
    gap: 10px 16px !important;
  }

  .ai-conversation-control-card.redesigned
  > .ai-conversation-panel-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    min-width: 0 !important;
  }

  .ai-conversation-control-card.redesigned
  > .ai-conversation-essential-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    gap: 10px !important;
  }

  .ai-conversation-control-card.redesigned
  > .ai-conversation-essential-actions button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 54px !important;
    height: auto !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  .ai-conversation-control-card.redesigned
  > .ai-conversation-control-settings {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
  }

  .ai-conversation-control-card.redesigned
  > #aiConversationActionResult {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-height: none !important;
  }

  .ai-conversation-control-card.redesigned
  > #aiConversationActionResult:empty {
    display: none !important;
  }

  .ai-conversation-setup-shell {
    width: min(1320px, 100%) !important;
  }

  .ai-conversation-setup-main {
    grid-template-columns:
      minmax(300px, 370px)
      minmax(0, 1fr) !important;
  }

  .ai-conversation-result-layout.redesigned,
  .ai-conversation-result-layout.redesigned
  .ai-final-evaluation-card,
  .ai-conversation-transcript-card.redesigned {
    width: min(1320px, 100%) !important;
    max-width: 1320px !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .ai-conversation-live-card.redesigned
  > .ai-conversation-stage-content {
    grid-template-columns:
      clamp(250px, 31vw, 330px)
      minmax(410px, 1fr) !important;
  }

  .ai-conversation-control-card.redesigned {
    grid-template-columns:
      minmax(130px, 160px)
      minmax(280px, 1fr)
      minmax(210px, 270px) !important;
  }
}


/* ===== Day6 tutor image full-visibility fix ===== */
.ai-conversation-live-visual.refined {
  align-items: center !important;
}

.ai-conversation-static-tutor.preview,
.ai-conversation-static-tutor.live {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

.ai-conversation-static-tutor.preview img,
.ai-conversation-static-tutor.live img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 22px !important;
}

@media (min-width: 901px) {
  .ai-conversation-stage-visual-column {
    align-content: start !important;
  }

  .ai-conversation-live-visual.refined {
    min-height: clamp(260px, 28vw, 360px) !important;
    height: auto !important;
    padding: 16px !important;
  }

  .ai-conversation-static-tutor.live {
    max-width: min(100%, 520px) !important;
  }

  .ai-conversation-static-tutor.live img {
    max-height: clamp(220px, 26vw, 340px) !important;
  }
}

@media (max-width: 900px) {
  .ai-conversation-live-visual.refined {
    min-height: auto !important;
    padding: 12px !important;
  }

  .ai-conversation-static-tutor.live img,
  .ai-conversation-static-tutor.preview img {
    max-height: none !important;
  }
}

/* ===== Day6 setup screen compact single-view layout ===== */

.ai-conversation-setup-shell.compact {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 10px;
}

.ai-conversation-setup-main.compact {
  display: grid;
  grid-template-columns: minmax(300px, 38%) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.ai-conversation-preview-card.compact,
.ai-conversation-start-card.modern.compact {
  min-width: 0;
  margin: 0;
  border: 1px solid #e3e7ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

.ai-conversation-preview-card.compact {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.ai-conversation-preview-card.compact .ai-conversation-preview-hero {
  min-height: 0;
  padding: 12px;
  background: #f6f7f9;
}

.ai-conversation-preview-card.compact .ai-conversation-static-tutor.preview {
  width: 100% !important;
  max-width: 100% !important;
}

.ai-conversation-preview-card.compact .ai-conversation-static-tutor.preview img {
  width: 100% !important;
  height: 100% !important;
  max-height: 430px !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 10px !important;
  background: #f6f7f9;
  box-shadow: none;
}

.ai-conversation-preview-body.compact {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid #e7eaf0;
}

.ai-conversation-preview-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.ai-conversation-preview-title-row > div:first-child {
  min-width: 0;
}

.ai-conversation-preview-body.compact h2 {
  margin: 0;
  color: #172033;
  font-size: 25px;
  line-height: 1;
}

.ai-conversation-preview-body.compact h3 {
  margin: 4px 0 0;
  color: #172033;
  font-size: 16px;
  line-height: 1.35;
}

.ai-conversation-preview-stats.compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.ai-conversation-preview-stats.compact span {
  padding: 4px 7px;
  border: 1px solid #efc8cb;
  border-radius: 999px;
  background: #fff;
  color: #c92228;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.ai-conversation-preview-theme.compact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  background: #fafafa;
}

.ai-conversation-preview-theme.compact span {
  color: #c92228;
  font-size: 10px;
  font-weight: 900;
}

.ai-conversation-preview-theme.compact strong {
  overflow: hidden;
  color: #344054;
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-conversation-start-card.modern.compact {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px;
}

.ai-conversation-setup-heading {
  margin: 0;
}

.ai-conversation-setup-heading h3 {
  color: #c92228;
  font-size: 24px;
}

.ai-conversation-setup-heading p {
  font-size: 12px;
}

.ai-conversation-setup-fields {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
}

.ai-conversation-setup-top-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
  gap: 10px;
}

.ai-conversation-setup-top-fields label,
.ai-conversation-considerations.compact,
.ai-conversation-compact-ranges > label {
  min-width: 0;
  margin: 0;
  color: #253047;
  font-size: 12px;
  font-weight: 800;
}

.ai-conversation-setup-top-fields input,
.ai-conversation-setup-top-fields select,
.ai-conversation-considerations.compact textarea {
  width: 100%;
  margin-top: 5px;
  border-radius: 9px;
}

.ai-conversation-setup-top-fields input,
.ai-conversation-setup-top-fields select {
  min-height: 40px;
  padding: 8px 10px;
}

.ai-conversation-compact-ranges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ai-conversation-compact-ranges > label {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  background: #fafafa;
}

.ai-conversation-compact-ranges label > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ai-conversation-compact-ranges output {
  color: #c92228;
  font-size: 10px;
  font-weight: 900;
  text-align: right;
}

.ai-conversation-compact-ranges input[type="range"] {
  width: 100%;
  margin: 4px 0 0;
  accent-color: #c92228;
}

.ai-conversation-compact-ranges .ai-conversation-range-labels {
  margin: 0;
  color: #667085;
  font-size: 9px;
  font-weight: 700;
}

.ai-conversation-considerations.compact textarea {
  min-height: 62px;
  max-height: 72px;
  padding: 9px 10px;
  resize: none;
}

.ai-conversation-setup-footer {
  display: grid;
  gap: 8px;
}

.ai-conversation-microphone-note {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid #c92228;
  background: #fafafa;
  color: #526077;
  font-size: 11px;
  line-height: 1.45;
}

.ai-conversation-start-actions.compact {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
}

.ai-conversation-start-actions.compact button {
  width: auto;
  min-width: 0;
  min-height: 42px;
  padding: 9px 18px;
  border-radius: 9px;
}

.ai-conversation-start-actions.compact #aiConversationStartButton {
  min-width: 220px;
  border-color: #c92228;
  background: #c92228;
  color: #fff;
}

.ai-conversation-start-actions.compact #aiConversationSetupBackButton {
  background: #fff;
  color: #c92228;
}

@media (min-width: 901px) {
  .ai-conversation-setup-shell.compact {
    height: calc(100dvh - 16px);
    min-height: 620px;
    overflow: hidden;
  }

  .ai-conversation-setup-main.compact {
    height: 100%;
  }

  .ai-conversation-preview-card.compact,
  .ai-conversation-start-card.modern.compact {
    height: 100%;
    max-height: 100%;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .ai-conversation-setup-shell.compact {
    padding: 6px;
  }

  .ai-conversation-setup-main.compact {
    gap: 8px;
  }

  .ai-conversation-start-card.modern.compact {
    gap: 8px;
    padding: 12px;
  }

  .ai-conversation-preview-card.compact .ai-conversation-preview-hero {
    padding: 8px;
  }

  .ai-conversation-preview-card.compact .ai-conversation-static-tutor.preview img {
    max-height: 330px !important;
  }

  .ai-conversation-preview-body.compact {
    gap: 5px;
    padding: 9px 11px 10px;
  }

  .ai-conversation-preview-body.compact h2 {
    font-size: 21px;
  }

  .ai-conversation-preview-body.compact h3 {
    font-size: 14px;
  }

  .ai-conversation-setup-heading h3 {
    font-size: 20px;
  }

  .ai-conversation-setup-fields {
    gap: 8px;
  }

  .ai-conversation-compact-ranges {
    gap: 7px;
  }

  .ai-conversation-compact-ranges > label {
    padding: 8px;
  }

  .ai-conversation-considerations.compact textarea {
    min-height: 50px;
    max-height: 56px;
  }

  .ai-conversation-microphone-note {
    padding: 6px 9px;
  }

  .ai-conversation-start-actions.compact button {
    min-height: 38px;
    padding: 7px 14px;
  }
}

@media (max-width: 900px) {
  .ai-conversation-setup-shell.compact {
    padding: 8px 8px 88px;
  }

  .ai-conversation-setup-main.compact {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .ai-conversation-preview-card.compact {
    display: grid;
    grid-template-columns: minmax(120px, 42%) minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .ai-conversation-preview-card.compact .ai-conversation-preview-hero {
    min-height: 150px;
    padding: 8px;
  }

  .ai-conversation-preview-card.compact .ai-conversation-static-tutor.preview img {
    height: 100% !important;
    max-height: 190px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .ai-conversation-preview-body.compact {
    align-content: center;
    padding: 10px;
    border-top: 0;
    border-left: 1px solid #e7eaf0;
  }

  .ai-conversation-preview-title-row {
    display: grid;
    gap: 6px;
  }

  .ai-conversation-preview-stats.compact {
    justify-content: flex-start;
  }

  .ai-conversation-preview-theme.compact {
    display: block;
  }

  .ai-conversation-preview-theme.compact span {
    display: block;
    margin-bottom: 3px;
  }

  .ai-conversation-preview-theme.compact strong {
    display: block;
    white-space: normal;
  }

  .ai-conversation-start-card.modern.compact {
    gap: 10px;
    padding: 12px;
  }

  .ai-conversation-setup-heading h3 {
    font-size: 20px;
  }

  .ai-conversation-setup-top-fields {
    grid-template-columns: minmax(0, 1fr) 112px;
  }

  .ai-conversation-compact-ranges {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .ai-conversation-compact-ranges > label {
    padding: 8px 9px;
  }

  .ai-conversation-considerations.compact textarea {
    min-height: 54px;
  }

  .ai-conversation-start-actions.compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ai-conversation-start-actions.compact #aiConversationStartButton {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .ai-conversation-preview-card.compact {
    grid-template-columns: 128px minmax(0, 1fr);
  }

  .ai-conversation-preview-card.compact .pill,
  .ai-conversation-preview-stats.compact {
    display: none;
  }

  .ai-conversation-preview-body.compact h2 {
    font-size: 20px;
  }

  .ai-conversation-preview-body.compact h3 {
    font-size: 13px;
  }

  .ai-conversation-setup-top-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-conversation-start-actions.compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-conversation-start-actions.compact button {
    width: 100%;
  }
}

/* ===== Day6 final layout stabilization: use tutor images without cropping ===== */

.ai-conversation-preview-card.compact .ai-conversation-preview-hero,
.ai-conversation-live-visual.refined {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.ai-conversation-live-visual.refined .ai-conversation-live-halo {
  display: none !important;
}

.ai-conversation-preview-card.compact .ai-conversation-static-tutor.preview,
.ai-conversation-static-tutor.live {
  width: 100% !important;
  max-width: 100% !important;
}

.ai-conversation-preview-card.compact .ai-conversation-static-tutor.preview img,
.ai-conversation-static-tutor.live img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ai-conversation-preview-card.compact {
  align-content: start !important;
}

.ai-conversation-preview-card.compact .ai-conversation-preview-hero {
  min-height: 0 !important;
  padding: 14px !important;
  background: #fff !important;
}

.ai-conversation-preview-card.compact .ai-conversation-static-tutor.preview img {
  max-height: min(38vh, 300px) !important;
  border-radius: 12px !important;
}

.ai-conversation-live-grid.redesigned {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

.ai-conversation-live-card.redesigned {
  display: block !important;
  padding: 12px !important;
}

.ai-conversation-stage-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.ai-conversation-stage-toolbar .ai-conversation-badge.status {
  flex: 0 0 auto !important;
}

.ai-conversation-stage-toolbar .secondary.compact {
  margin-left: 0 !important;
}

.ai-conversation-stage-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  min-height: 0 !important;
}

.ai-conversation-stage-visual-column {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 12px !important;
  min-height: 0 !important;
}

.ai-conversation-live-visual.refined {
  min-height: 0 !important;
  height: auto !important;
  padding: 14px !important;
  border: 1px solid #e3e7ee !important;
  border-radius: 16px !important;
  background: #fff !important;
}

.ai-conversation-static-tutor.live {
  display: block !important;
}

.ai-conversation-static-tutor.live img {
  border-radius: 12px !important;
}

.ai-conversation-live-now {
  right: 14px !important;
  bottom: 14px !important;
  left: auto !important;
  transform: none !important;
}

.ai-conversation-state-panel {
  padding: 14px !important;
  border: 1px solid #e3e7ee !important;
  border-radius: 16px !important;
  background: #fff !important;
}

.ai-conversation-stream.redesigned {
  display: grid !important;
  grid-template-rows: auto minmax(280px, 1fr) auto !important;
  padding: 14px !important;
  border: 1px solid #dbe4f0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ai-conversation-stream.redesigned .ai-conversation-stream-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.ai-conversation-stream.redesigned .ai-conversation-stream-heading small {
  color: #667085 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.ai-conversation-stream.redesigned .ai-conversation-transcript {
  min-height: 280px !important;
  margin-top: 10px !important;
  padding: 14px !important;
  border-radius: 14px !important;
  border: 1px solid #e6ecf3 !important;
  background: #fff !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.ai-conversation-bottom-hint {
  margin-top: 10px !important;
  padding: 10px 12px !important;
  justify-content: flex-start !important;
  background: #fafafa !important;
}

.ai-conversation-bottom-hint #aiConversationFinishButton {
  display: none !important;
}

.ai-conversation-control-card.redesigned {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid #e3e7ee !important;
  border-radius: 16px !important;
  background: #fff !important;
}

.ai-conversation-control-card.redesigned .ai-conversation-panel-heading h3 {
  margin: 2px 0 0 !important;
}

.ai-conversation-essential-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

.ai-conversation-essential-actions button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 10px 16px !important;
}

.ai-conversation-essential-actions #aiConversationFinishButtonSecondary {
  max-width: 320px !important;
}

.ai-conversation-control-settings {
  width: 100% !important;
}

.ai-conversation-control-settings summary {
  padding: 10px 12px !important;
}

.ai-conversation-control-settings-body {
  padding: 12px !important;
}

.ai-conversation-control-settings-body .muted.small {
  margin: 0 !important;
}

#aiConversationActionResult:empty {
  display: none !important;
}

@media (min-width: 901px) {
  .ai-conversation-setup-shell.compact {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 12px !important;
  }

  .ai-conversation-setup-main.compact {
    grid-template-columns: minmax(340px, 46%) minmax(420px, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
  }

  .ai-conversation-preview-card.compact .ai-conversation-static-tutor.preview img {
    max-height: min(40vh, 340px) !important;
  }

  .ai-conversation-stage-content {
    grid-template-columns: minmax(420px, 56%) minmax(320px, 44%) !important;
  }

  .ai-conversation-stream.redesigned {
    min-height: 100% !important;
  }

  .ai-conversation-live-visual.refined {
    padding: 16px !important;
  }

  .ai-conversation-static-tutor.live img {
    max-height: min(44vh, 360px) !important;
  }

  .ai-conversation-control-card.redesigned {
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) minmax(250px, 320px) !important;
    align-items: center !important;
  }

  .ai-conversation-control-card.redesigned > .ai-conversation-panel-heading {
    grid-column: 1 !important;
  }

  .ai-conversation-control-card.redesigned > .ai-conversation-essential-actions {
    grid-column: 2 !important;
    justify-content: flex-start !important;
  }

  .ai-conversation-control-card.redesigned > .ai-conversation-control-settings {
    grid-column: 3 !important;
  }

  .ai-conversation-control-card.redesigned > #aiConversationActionResult {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 900px) {
  .ai-conversation-setup-shell.compact {
    padding: 8px 8px 88px !important;
    height: auto !important;
    overflow: visible !important;
  }

  .ai-conversation-setup-main.compact {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ai-conversation-preview-card.compact {
    display: block !important;
  }

  .ai-conversation-preview-card.compact .ai-conversation-preview-hero {
    padding: 10px !important;
  }

  .ai-conversation-preview-card.compact .ai-conversation-static-tutor.preview img {
    max-height: 220px !important;
  }

  .ai-conversation-preview-body.compact {
    border-left: 0 !important;
    border-top: 1px solid #e7eaf0 !important;
  }

  .ai-conversation-stage-toolbar {
    flex-wrap: wrap !important;
  }

  .ai-conversation-stage-content {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ai-conversation-live-visual.refined {
    padding: 10px !important;
  }

  .ai-conversation-static-tutor.live img {
    max-height: 280px !important;
  }

  .ai-conversation-stream.redesigned {
    grid-template-rows: auto minmax(220px, 1fr) auto !important;
  }

  .ai-conversation-stream.redesigned .ai-conversation-stream-heading {
    display: block !important;
  }

  .ai-conversation-stream.redesigned .ai-conversation-stream-heading small {
    display: block !important;
    margin-top: 4px !important;
  }

  .ai-conversation-bottom-hint {
    padding: 10px !important;
  }

  .ai-conversation-control-card.redesigned {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ai-conversation-essential-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ai-conversation-essential-actions button,
  .ai-conversation-essential-actions #aiConversationFinishButtonSecondary {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ===== Day6 PC setup: remove excess vertical whitespace around tutor image ===== */
@media (min-width: 901px) {
  .ai-conversation-preview-card.compact {
    height: auto !important;
    max-height: none !important;
    align-self: start !important;
    grid-template-rows: auto auto !important;
  }

  .ai-conversation-preview-card.compact .ai-conversation-preview-hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px !important;
    align-items: flex-start !important;
  }

  .ai-conversation-preview-card.compact .ai-conversation-static-tutor.preview {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .ai-conversation-preview-card.compact .ai-conversation-static-tutor.preview img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}

/* ===== Day6 PC setup: balance left and right card heights ===== */
@media (min-width: 901px) {
  .ai-conversation-setup-main.compact {
    grid-template-columns: minmax(360px, 46%) minmax(500px, 54%) !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .ai-conversation-preview-card.compact,
  .ai-conversation-start-card.modern.compact {
    align-self: stretch !important;
    height: 100% !important;
    max-height: none !important;
  }

  .ai-conversation-preview-card.compact {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .ai-conversation-preview-body.compact {
    align-content: start !important;
  }

  .ai-conversation-start-card.modern.compact {
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    gap: 10px !important;
    padding: 14px 16px !important;
  }

  .ai-conversation-setup-heading h3 {
    font-size: 22px !important;
  }

  .ai-conversation-setup-heading p {
    margin-top: 3px !important;
  }

  .ai-conversation-setup-fields {
    gap: 10px !important;
  }

  .ai-conversation-setup-top-fields {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 220px) !important;
    gap: 10px !important;
  }

  .ai-conversation-compact-ranges {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .ai-conversation-compact-ranges > label,
  .ai-conversation-compact-ranges > .ai-conversation-inline-range,
  .ai-conversation-compact-ranges > .ai-conversation-sensitivity-setting,
  .ai-conversation-compact-ranges > .ai-conversation-response-delay-setting {
    grid-column: auto !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
  }

  .ai-conversation-compact-ranges label > span {
    min-height: 32px !important;
    align-items: flex-start !important;
  }

  .ai-conversation-compact-ranges output {
    max-width: 48% !important;
    line-height: 1.3 !important;
  }

  .ai-conversation-compact-ranges .ai-conversation-range-labels {
    gap: 4px !important;
  }

  .ai-conversation-considerations.compact textarea {
    min-height: 56px !important;
    max-height: 56px !important;
  }

  .ai-conversation-setup-footer {
    gap: 7px !important;
  }

  .ai-conversation-microphone-note {
    padding: 7px 9px !important;
  }

  .ai-conversation-start-actions.compact button {
    min-height: 40px !important;
    padding: 8px 16px !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .ai-conversation-setup-main.compact {
    grid-template-columns: minmax(320px, 44%) minmax(480px, 56%) !important;
  }

  .ai-conversation-compact-ranges {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .ai-conversation-compact-ranges > label {
    padding: 8px !important;
  }
}


/* ===== Day6 PC tutor image center-crop adjustment (all PC widths) ===== */
@media (min-width: 901px) {
  .ai-conversation-preview-card.compact .ai-conversation-preview-hero {
    height: 280px !important;
    min-height: 280px !important;
    padding: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  .ai-conversation-preview-card.compact .ai-conversation-static-tutor.preview {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
  }

  .ai-conversation-preview-card.compact .ai-conversation-static-tutor.preview img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
  }

  .ai-conversation-live-visual.refined {
    min-height: 280px !important;
    height: 280px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .ai-conversation-static-tutor.live {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
  }

  .ai-conversation-static-tutor.live img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
  }
}

/* ===== Day6 PC setup: balance page whitespace without changing element layout ===== */
@media (min-width: 901px) {
  body.ai-conversation-active #content,
  body.ai-conversation-active.practical-study-active #content {
    min-height: calc(100dvh - 12px) !important;
  }

  .ai-conversation-setup-shell.compact {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
    width: min(1280px, 100%) !important;
    min-height: calc(100dvh - 24px) !important;
    margin: 0 auto !important;
    padding: clamp(14px, 2.5vh, 28px) 12px !important;
    box-sizing: border-box !important;
  }

  .ai-conversation-setup-main.compact {
    width: 100% !important;
    margin: 0 auto !important;
  }
}

/* 低いPC画面では無理に中央寄せせず、スクロールを優先します。 */
@media (min-width: 901px) and (max-height: 720px) {
  .ai-conversation-setup-shell.compact {
    align-content: start !important;
    min-height: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* ===== Day6 PC setup: stretch cards vertically instead of centering the block ===== */
@media (min-width: 901px) {
  body.ai-conversation-active #content,
  body.ai-conversation-active.practical-study-active #content {
    min-height: calc(100dvh - 8px) !important;
  }

  .ai-conversation-setup-shell.compact {
    display: block !important;
    align-content: initial !important;
    width: min(1280px, 100%) !important;
    min-height: calc(100dvh - 12px) !important;
    margin: 0 auto !important;
    padding: 18px 12px 12px !important;
    box-sizing: border-box !important;
  }

  .ai-conversation-setup-main.compact {
    width: 100% !important;
    min-height: calc(100dvh - 42px) !important;
    margin: 0 auto !important;
    align-items: stretch !important;
  }

  .ai-conversation-preview-card.compact,
  .ai-conversation-start-card.modern.compact {
    height: 100% !important;
    min-height: calc(100dvh - 42px) !important;
    align-self: stretch !important;
  }

  .ai-conversation-preview-card.compact {
    grid-template-rows: 280px minmax(0, 1fr) !important;
  }

  .ai-conversation-preview-body.compact {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: clamp(16px, 2.2vh, 28px) !important;
    padding: clamp(18px, 2.4vh, 30px) 18px !important;
  }

  .ai-conversation-preview-theme.compact {
    align-self: end !important;
  }

  .ai-conversation-start-card.modern.compact {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    gap: clamp(16px, 2vh, 26px) !important;
    padding: clamp(20px, 2.5vh, 30px) 20px !important;
  }

  .ai-conversation-setup-fields {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: clamp(18px, 2.4vh, 30px) !important;
    min-height: 0 !important;
  }

  .ai-conversation-considerations.compact {
    display: grid !important;
    grid-template-rows: auto minmax(72px, 1fr) !important;
    align-self: stretch !important;
  }

  .ai-conversation-considerations.compact textarea {
    min-height: 72px !important;
    max-height: none !important;
    height: 100% !important;
  }

  .ai-conversation-setup-footer {
    display: grid !important;
    gap: clamp(12px, 1.6vh, 20px) !important;
    align-self: end !important;
  }
}

/* 低いPC画面では過度な引き伸ばしを避け、通常のスクロールを優先します。 */
@media (min-width: 901px) and (max-height: 720px) {
  .ai-conversation-setup-shell.compact,
  .ai-conversation-setup-main.compact,
  .ai-conversation-preview-card.compact,
  .ai-conversation-start-card.modern.compact {
    min-height: 0 !important;
    height: auto !important;
  }

  .ai-conversation-preview-body.compact,
  .ai-conversation-start-card.modern.compact,
  .ai-conversation-setup-fields,
  .ai-conversation-setup-footer {
    gap: 10px !important;
  }

  .ai-conversation-considerations.compact textarea {
    min-height: 56px !important;
    height: 56px !important;
  }
}

/* ===== Day6 setup screen: unified UI/UX redesign ===== */

body.ai-conversation-setup-active {
  overflow: auto;
}

body.ai-conversation-setup-active .main,
body.ai-conversation-setup-active.app-mode .main,
body.ai-conversation-setup-active.practical-study-active .main {
  width: 100%;
  max-width: none;
  padding: 22px;
}

body.ai-conversation-setup-active #content {
  width: 100%;
  max-width: none;
}

.day6-setup-screen {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 4px 0 24px;
}

.day6-setup-grid {
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(560px, 1.08fr);
  gap: 20px;
  align-items: stretch;
}

.day6-setup-summary,
.day6-setup-settings {
  min-width: 0;
  margin: 0;
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 8px 20px rgba(16, 24, 40, .04);
}

.day6-setup-summary {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
}

.day6-setup-media {
  display: grid;
  place-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #f9fafb;
}

.day6-setup-tutor-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  border-radius: 14px;
  background: #fff;
}

.day6-setup-summary-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.day6-setup-summary-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.day6-setup-summary-topline .pill {
  margin: 0;
  border: 1px solid #fecdd3;
  background: #fff;
}

.day6-setup-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.day6-setup-meta span {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #475467;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.day6-setup-summary h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(30px, 3vw, 38px);
  line-height: 1.05;
}

.day6-setup-subtitle {
  margin: 5px 0 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}

.day6-setup-description {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.day6-setup-theme {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f9fafb;
}

.day6-setup-theme span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.day6-setup-theme strong {
  min-width: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.day6-setup-settings {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 18px;
  padding: 24px;
}

.day6-setup-settings-header {
  display: grid;
  gap: 5px;
}

.day6-setup-settings-header > span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
}

.day6-setup-settings-header h2 {
  margin: 0;
  color: var(--primary);
  font-size: 28px;
  line-height: 1.2;
}

.day6-setup-settings-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.day6-setup-fields {
  display: grid;
  align-content: start;
  gap: 16px;
}

.day6-setup-identity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .72fr);
  gap: 12px;
}

.day6-setup-identity-grid label,
.day6-setup-considerations {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
  margin: 0;
}

.day6-setup-identity-grid label > span,
.day6-setup-considerations > span {
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.day6-setup-identity-grid label > small,
.day6-setup-considerations > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.day6-setup-identity-grid input,
.day6-setup-identity-grid select,
.day6-setup-considerations textarea {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.day6-setup-identity-grid input,
.day6-setup-identity-grid select {
  min-height: 46px;
}

.day6-setup-range-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.day6-setup-range-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f9fafb;
}

.day6-setup-range-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.day6-setup-range-heading strong {
  min-width: 0;
  color: #344054;
  font-size: 12px;
  line-height: 1.35;
}

.day6-setup-range-heading output {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 10px;
  font-weight: 900;
  text-align: right;
}

.day6-setup-range-card input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--primary);
}

.day6-setup-range-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.day6-setup-range-scale span:nth-child(2) {
  text-align: center;
}

.day6-setup-range-scale span:last-child {
  text-align: right;
}

.day6-setup-considerations textarea {
  min-height: 84px;
  max-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.day6-setup-mic-note {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--primary);
  background: #f9fafb;
  color: #475467;
  font-size: 12px;
  line-height: 1.55;
}

.day6-setup-mic-note strong {
  flex: 0 0 auto;
  color: #344054;
}

.day6-setup-settings #aiConversationSetupResult:empty {
  display: none;
}

.day6-setup-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.day6-setup-actions button {
  width: auto;
  min-width: 0;
  min-height: 46px;
  padding: 10px 20px;
}

.day6-setup-actions #aiConversationStartButton {
  min-width: 230px;
}

.day6-setup-actions #aiConversationSetupBackButton {
  background: var(--primary-soft);
  color: var(--primary);
}

.day6-setup-actions #aiConversationSetupBackButton:hover {
  background: #ffe4e6;
}

.day6-setup-screen input:focus-visible,
.day6-setup-screen select:focus-visible,
.day6-setup-screen textarea:focus-visible,
.day6-setup-screen button:focus-visible {
  outline: 3px solid rgba(209, 19, 31, .18);
  outline-offset: 2px;
}

@media (min-width: 901px) and (min-height: 720px) {
  .day6-setup-grid {
    min-height: min(650px, calc(100dvh - 72px));
  }
}

@media (max-width: 1080px) and (min-width: 901px) {
  .day6-setup-grid {
    grid-template-columns: minmax(320px, .86fr) minmax(520px, 1.14fr);
    gap: 14px;
  }

  .day6-setup-settings {
    padding: 20px;
  }

  .day6-setup-range-card {
    padding: 11px;
  }
}

@media (max-width: 900px) {
  body.ai-conversation-setup-active .main,
  body.ai-conversation-setup-active.app-mode .main,
  body.ai-conversation-setup-active.practical-study-active .main {
    padding: 12px;
  }

  .day6-setup-screen {
    padding: 0 0 92px;
  }

  .day6-setup-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .day6-setup-summary,
  .day6-setup-settings {
    border-radius: 15px;
  }

  .day6-setup-media {
    padding: 9px;
  }

  .day6-setup-tutor-image {
    border-radius: 11px;
  }

  .day6-setup-summary-body {
    gap: 12px;
    padding: 15px;
  }

  .day6-setup-description {
    font-size: 12px;
  }

  .day6-setup-settings {
    gap: 16px;
    padding: 16px;
  }

  .day6-setup-settings-header h2 {
    font-size: 24px;
  }

  .day6-setup-identity-grid,
  .day6-setup-range-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .day6-setup-range-card {
    gap: 10px;
    padding: 12px;
  }

  .day6-setup-considerations textarea {
    min-height: 92px;
  }

  .day6-setup-mic-note {
    display: grid;
    gap: 2px;
  }

  .day6-setup-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .day6-setup-actions button,
  .day6-setup-actions #aiConversationStartButton {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .day6-setup-summary-topline {
    align-items: flex-start;
  }

  .day6-setup-meta {
    gap: 4px;
  }

  .day6-setup-meta span {
    padding: 4px 7px;
    font-size: 10px;
  }

  .day6-setup-summary h2 {
    font-size: 28px;
  }

  .day6-setup-subtitle {
    font-size: 16px;
  }

  .day6-setup-theme {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* ===== Day6 live learning screen: unified UI/UX redesign ===== */

.day6-live-screen {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  width: min(1440px, 100%) !important;
  height: calc(100dvh - 16px) !important;
  min-height: 620px !important;
  margin: 0 auto !important;
  padding: 8px !important;
  overflow: hidden !important;
  background: #f5f7fa !important;
}

.day6-live-progress {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 14px 18px 22px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .04) !important;
}

.day6-live-progress .ai-conversation-progress-heading {
  align-items: center !important;
}

.day6-live-progress .ai-conversation-progress-heading > div:first-child {
  gap: 4px !important;
}

.day6-live-progress .ai-conversation-progress-heading span {
  color: var(--muted) !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
}

.day6-live-progress .ai-conversation-progress-heading strong {
  color: var(--primary) !important;
  font-size: 17px !important;
}

.day6-live-progress .ai-conversation-progress-times {
  text-align: right !important;
}

.day6-live-progress .ai-conversation-progress-times small {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.day6-live-progress .ai-conversation-progress-heading time {
  display: block !important;
  color: var(--text) !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1 !important;
}

.day6-live-progress .ai-conversation-meter {
  margin-top: 12px !important;
}

.day6-live-progress .ai-conversation-meter-track {
  height: 8px !important;
  background: #f3d7da !important;
}

.day6-live-progress .ai-conversation-meter-track > span,
.day6-live-progress .ai-conversation-meter-track > span[data-phase="closing"],
.day6-live-progress .ai-conversation-meter-track > span[data-phase="feedback"],
.day6-live-progress .ai-conversation-meter-track > span[data-phase="completed"] {
  background: var(--primary) !important;
}

.day6-live-content.ai-conversation-live-grid {
  display: grid !important;
  grid-template-columns: minmax(360px, .88fr) minmax(500px, 1.12fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 12px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.day6-live-content.ai-conversation-live-grid.controls-expanded {
  grid-template-columns: minmax(360px, .88fr) minmax(500px, 1.12fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.day6-live-tutor-card,
.day6-live-conversation-card,
.day6-live-controls {
  min-width: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .04) !important;
}

.day6-live-tutor-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 14px !important;
  overflow: hidden !important;
}

.day6-live-card-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.day6-live-status-group {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.day6-live-status-badge,
.day6-live-mode-label {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.day6-live-status-badge {
  border: 1px solid #fecdd3 !important;
  background: #fff !important;
  color: var(--primary) !important;
}

.day6-live-status-badge.connected {
  border-color: #bbf7d0 !important;
  background: #f0fdf4 !important;
  color: #15803d !important;
}

.day6-live-screen[data-live-state="paused"] .day6-live-status-badge {
  border-color: #fed7aa !important;
  background: #fff7ed !important;
  color: #c2410c !important;
}

.day6-live-mode-label {
  border: 1px solid var(--line) !important;
  background: #f9fafb !important;
  color: #475467 !important;
  letter-spacing: .04em !important;
}

.day6-live-pause-button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 96px !important;
  min-height: 38px !important;
  padding: 8px 14px !important;
  border-color: #fecdd3 !important;
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}

.day6-live-tutor-media {
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: #f9fafb !important;
}

.day6-live-tutor-media .ai-conversation-static-tutor.live {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

.day6-live-tutor-media .ai-conversation-static-tutor.live img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 360px) !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.day6-live-speaking-status {
  display: grid !important;
  gap: 9px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: #fff !important;
}

.day6-live-speaking-status .ai-conversation-wave-bars {
  min-height: 22px !important;
  gap: 4px !important;
}

.day6-live-speaking-status .ai-conversation-wave-bars span,
.day6-live-screen[data-live-state="assistant-speaking"] .ai-conversation-wave-bars.assistant span,
.day6-live-screen[data-live-state="user-speaking"] .ai-conversation-wave-bars.user span {
  background: var(--primary) !important;
}

.day6-live-speaking-status .ai-conversation-state-copy {
  text-align: center !important;
}

.day6-live-speaking-status .ai-conversation-state-copy strong {
  color: var(--text) !important;
  font-size: 17px !important;
}

.day6-live-speaking-status .ai-conversation-state-copy span {
  color: var(--muted) !important;
  font-size: 12px !important;
}

.day6-live-conversation-card {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  min-height: 0 !important;
  padding: 16px !important;
  overflow: hidden !important;
}

.day6-live-conversation-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-width: 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--line) !important;
}

.day6-live-conversation-header > div {
  min-width: 0 !important;
}

.day6-live-conversation-header span,
.day6-live-controls-heading span {
  color: var(--primary) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
}

.day6-live-conversation-header h2,
.day6-live-controls-heading h3 {
  margin: 3px 0 0 !important;
  color: var(--text) !important;
  line-height: 1.25 !important;
}

.day6-live-conversation-header h2 {
  font-size: 22px !important;
}

.day6-live-conversation-header p {
  max-width: 260px !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  text-align: right !important;
}

.day6-live-topic {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 9px 11px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #f9fafb !important;
}

.day6-live-topic span {
  color: var(--primary) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.day6-live-topic strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #344054 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.day6-live-transcript.ai-conversation-transcript {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 220px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 14px !important;
  background: #f9fafb !important;
  writing-mode: horizontal-tb !important;
}

.day6-live-transcript .ai-conversation-message {
  width: min(88%, 720px) !important;
  max-width: 720px !important;
  padding: 11px 13px !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}

.day6-live-transcript .ai-conversation-message.assistant {
  border: 1px solid #f0c8cb !important;
  background: #fff !important;
}

.day6-live-transcript .ai-conversation-message.user {
  border: 1px solid #e4e7ec !important;
  background: var(--primary-soft) !important;
}

.day6-live-transcript .ai-conversation-message-copy,
.day6-live-transcript .ai-conversation-message-paragraph,
.day6-live-transcript .ai-conversation-message p {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

.day6-live-speaking-hint {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 42px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #475467 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.day6-live-mic-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  font-size: 7px !important;
}

.day6-live-controls {
  display: grid !important;
  grid-template-columns: minmax(160px, 210px) minmax(0, 1fr) minmax(240px, 320px) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 10px 16px !important;
  min-height: 92px !important;
  padding: 12px 16px !important;
  overflow: visible !important;
}

.day6-live-controls-heading {
  grid-column: 1 !important;
  min-width: 0 !important;
}

.day6-live-controls-heading h3 {
  font-size: 17px !important;
}

.day6-live-primary-actions.ai-conversation-essential-actions {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

.day6-live-primary-actions button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 9px 16px !important;
  font-size: 12px !important;
}

.day6-live-primary-actions #aiConversationFinishButtonSecondary {
  min-width: 220px !important;
  max-width: 320px !important;
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
}

.day6-live-primary-actions #aiConversationConnectButton {
  border-color: #fecdd3 !important;
  background: #fff !important;
  color: var(--primary) !important;
}

.day6-live-audio-settings {
  grid-column: 3 !important;
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #f9fafb !important;
}

.day6-live-audio-settings > summary {
  min-height: 44px !important;
  padding: 9px 11px !important;
}

.day6-live-audio-settings .ai-conversation-control-settings-body {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
}

.day6-live-audio-settings .ai-conversation-live-sensitivity {
  padding: 9px !important;
  border-color: var(--line) !important;
  background: #fff !important;
}

.day6-live-audio-settings .muted.small {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  font-size: 10px !important;
}

.day6-live-controls > #aiConversationActionResult {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
}

.day6-live-controls > #aiConversationActionResult:empty {
  display: none !important;
}

.day6-live-screen button:focus-visible,
.day6-live-screen input:focus-visible,
.day6-live-screen summary:focus-visible {
  outline: 3px solid rgba(209, 19, 31, .18) !important;
  outline-offset: 2px !important;
}

@media (max-width: 1120px) and (min-width: 901px) {
  .day6-live-content.ai-conversation-live-grid,
  .day6-live-content.ai-conversation-live-grid.controls-expanded {
    grid-template-columns: minmax(320px, .82fr) minmax(430px, 1.18fr) !important;
  }

  .day6-live-controls {
    grid-template-columns: minmax(140px, 180px) minmax(0, 1fr) minmax(220px, 280px) !important;
    gap: 8px 12px !important;
  }

  .day6-live-conversation-header p {
    display: none !important;
  }
}

@media (max-width: 900px) {
  body.ai-conversation-active {
    overflow: auto !important;
  }

  .day6-live-screen {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    padding: 8px 8px 92px !important;
    overflow: visible !important;
  }

  .day6-live-progress {
    margin-bottom: 10px !important;
    padding: 12px 12px 20px !important;
    border-radius: 14px !important;
  }

  .day6-live-progress .ai-conversation-progress-heading time {
    font-size: 28px !important;
  }

  .day6-live-progress .ai-conversation-meter-markers > span:nth-child(2),
  .day6-live-progress .ai-conversation-meter-markers > span:nth-child(3) {
    display: none !important;
  }

  .day6-live-content.ai-conversation-live-grid,
  .day6-live-content.ai-conversation-live-grid.controls-expanded {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .day6-live-tutor-card,
  .day6-live-conversation-card,
  .day6-live-controls {
    border-radius: 14px !important;
  }

  .day6-live-tutor-card {
    grid-template-rows: auto auto auto !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .day6-live-card-toolbar {
    align-items: stretch !important;
  }

  .day6-live-status-group {
    flex: 1 1 auto !important;
  }

  .day6-live-pause-button {
    min-width: 100px !important;
  }

  .day6-live-tutor-media {
    min-height: 0 !important;
    padding: 8px !important;
  }

  .day6-live-tutor-media .ai-conversation-static-tutor.live img {
    max-height: none !important;
  }

  .day6-live-speaking-status {
    padding: 11px 12px !important;
  }

  .day6-live-conversation-card {
    grid-template-rows: auto auto auto auto !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .day6-live-conversation-header {
    display: block !important;
  }

  .day6-live-conversation-header p {
    margin-top: 5px !important;
    max-width: none !important;
    text-align: left !important;
  }

  .day6-live-topic {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
  }

  .day6-live-topic strong {
    white-space: normal !important;
  }

  .day6-live-transcript.ai-conversation-transcript {
    min-height: 300px !important;
    max-height: 52dvh !important;
    height: auto !important;
  }

  .day6-live-transcript .ai-conversation-message {
    width: min(94%, 720px) !important;
  }

  .day6-live-speaking-hint {
    min-height: 44px !important;
  }

  .day6-live-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 10px !important;
    margin-top: 10px !important;
    padding: 12px !important;
  }

  .day6-live-controls-heading,
  .day6-live-primary-actions,
  .day6-live-audio-settings,
  .day6-live-controls > #aiConversationActionResult {
    grid-column: 1 !important;
  }

  .day6-live-primary-actions.ai-conversation-essential-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .day6-live-primary-actions button,
  .day6-live-primary-actions #aiConversationFinishButtonSecondary {
    width: 100% !important;
    max-width: none !important;
  }

  .day6-live-audio-settings .ai-conversation-control-settings-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .day6-live-audio-settings .muted.small {
    grid-column: 1 !important;
  }
}

@media (max-width: 480px) {
  .day6-live-card-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .day6-live-mode-label {
    display: none !important;
  }

  .day6-live-conversation-header h2 {
    font-size: 20px !important;
  }

  .day6-live-transcript.ai-conversation-transcript {
    min-height: 280px !important;
    padding: 11px !important;
  }
}

/* ===== Day6 PC tutor image: fit by height and center-crop horizontally ===== */
@media (min-width: 901px) {
  /* Day6開始前設定 */
  .day6-setup-media {
    height: clamp(300px, 34vh, 370px) !important;
    min-height: clamp(300px, 34vh, 370px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    place-items: center !important;
  }

  .day6-setup-tutor-image {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
  }

  /* Day6会話中画面 */
  .day6-live-tutor-media {
    width: 100% !important;
    height: 100% !important;
    min-height: 280px !important;
    padding: 0 !important;
    overflow: hidden !important;
    place-items: center !important;
  }

  .day6-live-tutor-media .ai-conversation-static-tutor.live {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
  }

  .day6-live-tutor-media .ai-conversation-static-tutor.live img {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
  }
}

/* ===== Day6 PC speaking-status height reduction ===== */
@media (min-width: 901px) {
  .day6-live-speaking-status {
    gap: 6px !important;
    padding: 8px 12px !important;
  }

  .day6-live-speaking-status .ai-conversation-wave-bars {
    min-height: 16px !important;
    gap: 3px !important;
  }

  .day6-live-speaking-status .ai-conversation-wave-bars span {
    min-height: 4px !important;
    height: 9px !important;
  }

  .day6-live-speaking-status .ai-conversation-state-copy {
    gap: 2px !important;
  }

  .day6-live-speaking-status .ai-conversation-state-copy strong {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  .day6-live-speaking-status .ai-conversation-state-copy span {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
}

/* ===== Day6 mobile: floating elapsed time after progress header leaves viewport ===== */
.ai-conversation-floating-timer {
  display: none;
}

@media (max-width: 900px) {
  .ai-conversation-floating-timer {
    position: fixed;
    top: max(7px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    z-index: 540;
    display: grid;
    justify-items: center;
    min-width: 92px;
    padding: 7px 10px 8px;
    border: 1px solid rgba(227, 30, 47, .2);
    border-radius: 11px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 9px 26px rgba(16, 24, 40, .17);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -10px, 0);
    transition:
      opacity .16s ease,
      transform .16s ease,
      visibility 0s linear .16s;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .ai-conversation-floating-timer.visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition:
      opacity .16s ease,
      transform .16s ease,
      visibility 0s;
  }

  .ai-conversation-floating-timer > span {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
  }

  .ai-conversation-floating-timer > time {
    display: block;
    margin-top: 2px;
    color: #1d2939;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
  }

  .ai-conversation-floating-timer > time.paused {
    color: #c91628;
    animation:
      ai-confirmation-paused-time-blink
      1.15s
      ease-in-out
      infinite;
  }

  .ai-conversation-floating-timer > time.paused::after {
    content: "・停止中";
    color: #667085;
    font-size: 8px;
    font-weight: 800;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .ai-conversation-floating-timer,
  .ai-conversation-floating-timer.visible {
    transition: none;
  }

  .ai-conversation-floating-timer > time.paused {
    animation: none;
    opacity: .65;
  }
}


/* ===== Day5・Day6 common resume button / Day5 mobile article height ===== */
.ai-confirmation-session-shell .conversation-resume-button,
.ai-conversation-session-shell .conversation-resume-button,
.day6-live-screen[data-live-state="paused"] .day6-live-pause-button {
  border-color: var(--primary, #d1131f) !important;
  background: var(--primary, #d1131f) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(209, 19, 31, .18) !important;
}

.ai-confirmation-session-shell .conversation-resume-button:hover:not(:disabled),
.ai-confirmation-session-shell .conversation-resume-button:focus-visible:not(:disabled),
.ai-conversation-session-shell .conversation-resume-button:hover:not(:disabled),
.ai-conversation-session-shell .conversation-resume-button:focus-visible:not(:disabled),
.day6-live-screen[data-live-state="paused"] .day6-live-pause-button:hover:not(:disabled),
.day6-live-screen[data-live-state="paused"] .day6-live-pause-button:focus-visible:not(:disabled) {
  border-color: #b90f1a !important;
  background: #b90f1a !important;
  color: #fff !important;
}

/*
 * Day5 AI確認テストのスマホ記事ウィンドウを、
 * 従来の min(36dvh, 360px) の75%へ縮小します。
 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  .ai-confirmation-article-scroll {
    max-height: min(27dvh, 270px) !important;
  }
}

@media (max-width: 520px) {
  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  .ai-confirmation-article-scroll {
    max-height: min(25.5dvh, 233px) !important;
  }
}

/* ===== Day6 conversation controls: always-visible final UI ===== */
.day6-live-controls {
  grid-template-columns:
    minmax(150px, 190px)
    minmax(420px, 1fr)
    minmax(220px, 290px) !important;
  grid-template-areas:
    "heading audio actions"
    "result result result" !important;
  grid-template-rows: auto auto !important;
  align-items: stretch !important;
  gap: 12px 16px !important;
  min-height: 0 !important;
  padding: 14px 16px !important;
  overflow: visible !important;
}

.day6-live-controls-heading {
  grid-area: heading !important;
  grid-column: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding-right: 16px !important;
  border-right: 1px solid var(--line) !important;
}

.day6-live-controls-heading > div {
  min-width: 0 !important;
}

.day6-live-controls-heading h3 {
  margin: 3px 0 0 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
}

.day6-live-controls-heading p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

.day6-live-audio-panel {
  grid-area: audio !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 13px !important;
  background: #f9fafb !important;
}

.day6-live-audio-panel-heading,
.day6-live-audio-panel-heading > div {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.day6-live-audio-panel-heading {
  justify-content: space-between !important;
  gap: 12px !important;
}

.day6-live-audio-panel-heading > div {
  gap: 9px !important;
}

.day6-live-audio-panel-heading > div > div {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
}

.day6-live-audio-mark {
  flex: 0 0 auto !important;
  width: 9px !important;
  height: 9px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
}

.day6-live-audio-panel-heading strong {
  color: var(--text) !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

.day6-live-audio-panel-heading small {
  color: var(--muted) !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

.day6-live-audio-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.day6-live-audio-control {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 9px 10px 7px !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 11px !important;
  background: #fff !important;
}

.day6-live-audio-control-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: #344054 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.day6-live-audio-control-heading > span {
  min-width: 0 !important;
}

.day6-live-audio-control output {
  flex: 0 0 auto !important;
  min-width: 42px !important;
  padding: 3px 7px !important;
  border: 1px solid #fecdd3 !important;
  border-radius: 999px !important;
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.day6-live-audio-control input[type="range"] {
  width: 100% !important;
  height: 22px !important;
  margin: 0 !important;
  accent-color: var(--primary) !important;
  cursor: pointer !important;
}

.day6-live-range-guide {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: #98a2b3 !important;
  font-size: 8px !important;
  line-height: 1.2 !important;
}

.day6-live-range-guide small {
  font-size: inherit !important;
  line-height: inherit !important;
}

.day6-live-audio-note {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #667085 !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
}

.day6-live-audio-note > span {
  display: inline-grid !important;
  flex: 0 0 auto !important;
  place-items: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #eef2f6 !important;
  color: #667085 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

.day6-live-session-actions {
  grid-area: actions !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding-left: 16px !important;
  border-left: 1px solid var(--line) !important;
}

.day6-live-session-actions-heading {
  display: grid !important;
  gap: 1px !important;
}

.day6-live-session-actions-heading strong {
  color: var(--text) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.day6-live-session-actions-heading small {
  color: var(--muted) !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

.day6-live-primary-actions.ai-conversation-essential-actions {
  grid-column: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center !important;
  justify-content: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.day6-live-primary-actions button,
.day6-live-primary-actions #aiConversationConnectButton,
.day6-live-primary-actions #aiConversationFinishButtonSecondary {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

.day6-live-primary-actions #aiConversationConnectButton {
  border-color: #d0d5dd !important;
  background: #fff !important;
  color: #344054 !important;
}

.day6-live-primary-actions #aiConversationConnectButton:hover:not(:disabled),
.day6-live-primary-actions #aiConversationConnectButton:focus-visible:not(:disabled) {
  border-color: #f0a6ad !important;
  background: #fff7f8 !important;
  color: var(--primary) !important;
}

.day6-live-primary-actions #aiConversationFinishButtonSecondary {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(209, 19, 31, .16) !important;
}

.day6-live-primary-actions #aiConversationFinishButtonSecondary:hover:not(:disabled),
.day6-live-primary-actions #aiConversationFinishButtonSecondary:focus-visible:not(:disabled) {
  border-color: #b90f1a !important;
  background: #b90f1a !important;
  color: #fff !important;
}

.day6-live-controls > #aiConversationActionResult {
  grid-area: result !important;
  grid-column: auto !important;
  min-width: 0 !important;
}

.day6-live-screen button:focus-visible,
.day6-live-screen input:focus-visible {
  outline: 3px solid rgba(209, 19, 31, .18) !important;
  outline-offset: 2px !important;
}

@media (min-width: 901px) and (max-width: 1120px) {
  .day6-live-controls {
    grid-template-columns:
      minmax(135px, 165px)
      minmax(360px, 1fr)
      minmax(205px, 235px) !important;
    gap: 10px 12px !important;
    padding: 12px 14px !important;
  }

  .day6-live-controls-heading {
    padding-right: 12px !important;
  }

  .day6-live-controls-heading p {
    font-size: 10px !important;
  }

  .day6-live-session-actions {
    padding-left: 12px !important;
  }

  .day6-live-audio-panel {
    padding: 9px 10px !important;
  }

  .day6-live-audio-control {
    padding-inline: 8px !important;
  }
}

@media (max-width: 900px) {
  .day6-live-controls {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "heading"
      "audio"
      "actions"
      "result" !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .day6-live-controls-heading {
    grid-column: 1 !important;
    display: grid !important;
    gap: 5px !important;
    padding: 0 0 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .day6-live-controls-heading h3 {
    font-size: 18px !important;
  }

  .day6-live-controls-heading p {
    font-size: 11px !important;
  }

  .day6-live-audio-panel {
    grid-column: 1 !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .day6-live-audio-panel-heading strong {
    font-size: 14px !important;
  }

  .day6-live-audio-panel-heading small {
    font-size: 10px !important;
  }

  .day6-live-audio-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .day6-live-audio-control {
    padding: 11px 12px 9px !important;
  }

  .day6-live-audio-control-heading {
    font-size: 12px !important;
  }

  .day6-live-audio-control input[type="range"] {
    height: 28px !important;
  }

  .day6-live-range-guide {
    font-size: 9px !important;
  }

  .day6-live-audio-note {
    font-size: 10px !important;
  }

  .day6-live-session-actions {
    grid-column: 1 !important;
    gap: 10px !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--line) !important;
    border-left: 0 !important;
  }

  .day6-live-session-actions-heading {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .day6-live-session-actions-heading small {
    text-align: right !important;
  }

  .day6-live-primary-actions.ai-conversation-essential-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .day6-live-primary-actions button,
  .day6-live-primary-actions #aiConversationConnectButton,
  .day6-live-primary-actions #aiConversationFinishButtonSecondary {
    min-height: 48px !important;
    font-size: 12px !important;
  }

  .day6-live-controls > #aiConversationActionResult {
    grid-column: 1 !important;
  }
}

@media (max-width: 420px) {
  .day6-live-controls {
    padding: 12px !important;
  }

  .day6-live-session-actions-heading {
    display: grid !important;
    gap: 2px !important;
  }

  .day6-live-session-actions-heading small {
    text-align: left !important;
  }
}

/* ===== Day5 AI確認テスト：回答方式切替ボタン廃止・自動切替レイアウト ===== */

/* 旧切替UIが残存しても表示しません。回答方式は課題指定に従って自動切替します。 */
.ai-confirmation-answer-mode-switch,
.ai-confirmation-answer-mode-button {
  display: none !important;
}

body.ai-confirmation-active .ai-confirmation-composer {
  display: block !important;
  padding: 14px 20px 16px !important;
}

body.ai-confirmation-active .ai-confirmation-answer-stage {
  width: 100%;
  margin: 0 !important;
}

body.ai-confirmation-active .ai-confirmation-answer-panel {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 15px 17px !important;
  border-color: #e4e7ec !important;
  background: #fff !important;
}

body.ai-confirmation-active .ai-confirmation-answer-panel[hidden] {
  display: none !important;
}

body.ai-confirmation-active .ai-confirmation-answer-panel-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  min-height: 22px;
  margin: 0 0 10px !important;
}

body.ai-confirmation-active .ai-confirmation-answer-panel-heading strong {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1.35;
}

body.ai-confirmation-active .ai-confirmation-answer-panel-heading span {
  min-width: 0;
  color: #667085;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
}

body.ai-confirmation-active .ai-confirmation-answer-stage .ai-confirmation-text-form {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
}

body.ai-confirmation-active #aiConfirmationActionResult {
  margin-top: 10px !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.ai-confirmation-active .ai-confirmation-composer {
    padding: 11px 12px 14px !important;
  }

  body.ai-confirmation-active .ai-confirmation-answer-panel {
    padding: 13px 14px !important;
    border-radius: 12px !important;
  }

  body.ai-confirmation-active .ai-confirmation-answer-panel-heading {
    display: grid !important;
    justify-content: stretch !important;
    gap: 2px;
    margin-bottom: 9px !important;
  }

  body.ai-confirmation-active .ai-confirmation-answer-panel-heading span {
    font-size: 10.5px;
    text-align: left;
  }

  body.ai-confirmation-active .ai-confirmation-answer-stage.has-help-badge
  .ai-confirmation-answer-panel-heading {
    min-height: 44px;
    padding-right: 92px;
  }

  body.ai-confirmation-active #aiConfirmationActionResult {
    margin-top: 8px !important;
  }
}

@media (min-width: 1051px) and (max-height: 850px) {
  body.ai-confirmation-active .ai-confirmation-composer {
    padding: 10px 16px 12px !important;
  }
}

/* ===== Day5 PC：記事スクロール復元・ページ下部余白調整 ===== */
@media (min-width: 821px) {
  /*
   * mainの上下余白は既存の28pxを使用します。
   * セッション側に追加されていた36pxの下余白だけを外し、
   * ページ上部と下部の余白量を揃えます。
   */
  body.ai-confirmation-active .ai-confirmation-session-shell {
    padding-bottom: 0 !important;
  }

  /*
   * details要素の展開内容を、固定された記事カード高の残り領域へ
   * 正しく収めます。記事本文だけを独立したスクロール領域にします。
   */
  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  > details.ai-confirmation-article-card[open] {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  > details.ai-confirmation-article-card::details-content {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  .ai-confirmation-article-scroll {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

/* ===== Day5 PC：回答欄の内部スクロールを廃止 ===== */
@media (min-width: 821px) {
  /*
   * 回答方式ごとに必要な高さをコンテンツ側で確保し、
   * 回答パネル自身にはスクロールバーを持たせません。
   * 余った／不足した高さは上部の会話ログが伸縮して受け持ちます。
   */
  body.ai-confirmation-active .ai-confirmation-answer-stage {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-answer-stage
  .ai-confirmation-answer-panel {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 録音回答は実際の操作要素に合わせて自然な高さにします。 */
  body.ai-confirmation-active
  #aiConfirmationRecordingPanel:not([hidden]) {
    min-height: 142px !important;
  }

  body.ai-confirmation-active
  #aiConfirmationRecordingPreview {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* テキスト回答は入力しやすい高さを維持します。 */
  body.ai-confirmation-active
  #aiConfirmationTextPanel:not([hidden]) {
    height: 190px !important;
    min-height: 190px !important;
    overflow: hidden !important;
  }

  body.ai-confirmation-active
  #aiConfirmationTextPanel
  .ai-confirmation-text-form {
    min-height: 0 !important;
  }

  /* 縦幅の短いPCでも録音欄を無理に縮めないようにします。 */
  body.ai-confirmation-active .ai-confirmation-composer {
    overflow: visible !important;
  }
}

/* ===== Day5 PC：記事の展開・折りたたみ操作を廃止 ===== */
@media (min-width: 821px) {
  body.ai-confirmation-active
  .ai-confirmation-article-card.is-desktop-always-open
  .ai-confirmation-article-summary {
    padding-right: 17px !important;
    cursor: default !important;
    user-select: text;
  }

  body.ai-confirmation-active
  .ai-confirmation-article-card.is-desktop-always-open
  .ai-confirmation-article-toggle {
    display: none !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-article-card.is-desktop-always-open
  .ai-confirmation-article-summary:focus {
    outline: none !important;
  }
}

/* ===== Day6 会話コントロール：高さ約50%のコンパクト最終レイアウト ===== */
.day6-live-controls.day6-live-controls-compact {
  display: grid !important;
  grid-template-columns: minmax(126px, 158px) minmax(0, 1fr) minmax(230px, 292px) !important;
  grid-template-areas:
    "compact-heading compact-settings compact-actions"
    "compact-result compact-result compact-result" !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 6px 14px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 10px 14px !important;
  overflow: visible !important;
}

.day6-control-compact-heading {
  grid-area: compact-heading !important;
  display: grid !important;
  align-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 14px 0 0 !important;
  border-right: 1px solid var(--line) !important;
}

.day6-control-compact-heading span {
  color: var(--primary) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .08em !important;
}

.day6-control-compact-heading h3 {
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
}

.day6-control-compact-settings {
  grid-area: compact-settings !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.day6-control-compact-row {
  display: grid !important;
  grid-template-columns: minmax(76px, auto) minmax(62px, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 3px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.day6-control-compact-row + .day6-control-compact-row {
  border-left: 1px solid var(--line) !important;
}

.day6-control-compact-label {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
}

.day6-control-compact-label strong {
  overflow: hidden !important;
  color: #344054 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.day6-control-compact-label small {
  color: #98a2b3 !important;
  font-size: 8px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.day6-control-compact-row input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 22px !important;
  margin: 0 !important;
  accent-color: var(--primary) !important;
  cursor: pointer !important;
}

.day6-control-compact-row output {
  min-width: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--primary) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.day6-control-compact-actions {
  grid-area: compact-actions !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 0 14px !important;
  border-left: 1px solid var(--line) !important;
}

.day6-control-compact-actions button,
.day6-control-compact-actions #aiConversationConnectButton,
.day6-control-compact-actions #aiConversationFinishButtonSecondary {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

.day6-control-compact-actions #aiConversationConnectButton[hidden] {
  display: none !important;
}

.day6-control-compact-actions #aiConversationConnectButton {
  border-color: #d0d5dd !important;
  background: #fff !important;
  color: #344054 !important;
}

.day6-control-compact-actions #aiConversationFinishButtonSecondary {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.day6-live-controls.day6-live-controls-compact > #aiConversationActionResult {
  grid-area: compact-result !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.day6-live-controls.day6-live-controls-compact > #aiConversationActionResult:empty {
  display: none !important;
}

@media (min-width: 901px) and (max-width: 1120px) {
  .day6-live-controls.day6-live-controls-compact {
    grid-template-columns: minmax(112px, 134px) minmax(0, 1fr) minmax(208px, 242px) !important;
    gap: 6px 10px !important;
    padding: 9px 12px !important;
  }

  .day6-control-compact-heading {
    padding-right: 10px !important;
  }

  .day6-control-compact-heading h3 {
    font-size: 14px !important;
  }

  .day6-control-compact-row {
    grid-template-columns: minmax(68px, auto) minmax(48px, 1fr) auto !important;
    gap: 6px !important;
    padding-inline: 8px !important;
  }

  .day6-control-compact-label strong {
    font-size: 10px !important;
  }

  .day6-control-compact-label small {
    display: none !important;
  }

  .day6-control-compact-actions {
    gap: 6px !important;
    padding-left: 10px !important;
  }

  .day6-control-compact-actions button,
  .day6-control-compact-actions #aiConversationConnectButton,
  .day6-control-compact-actions #aiConversationFinishButtonSecondary {
    padding-inline: 7px !important;
    font-size: 9.5px !important;
  }
}

@media (max-width: 900px) {
  .day6-live-controls.day6-live-controls-compact {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "compact-heading"
      "compact-settings"
      "compact-actions"
      "compact-result" !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 8px !important;
    padding: 11px 12px !important;
  }

  .day6-control-compact-heading {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    padding: 0 0 7px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .day6-control-compact-heading span {
    flex: 0 0 auto !important;
    font-size: 8px !important;
  }

  .day6-control-compact-heading h3 {
    font-size: 15px !important;
  }

  .day6-control-compact-settings {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  .day6-control-compact-row {
    grid-template-columns: minmax(92px, auto) minmax(80px, 1fr) 42px !important;
    min-height: 45px !important;
    padding: 4px 2px !important;
  }

  .day6-control-compact-row + .day6-control-compact-row {
    border-top: 1px solid var(--line) !important;
    border-left: 0 !important;
  }

  .day6-control-compact-label strong {
    font-size: 11px !important;
  }

  .day6-control-compact-label small {
    display: none !important;
  }

  .day6-control-compact-row input[type="range"] {
    height: 26px !important;
  }

  .day6-control-compact-row output {
    min-width: 42px !important;
    font-size: 10px !important;
  }

  .day6-control-compact-actions {
    display: flex !important;
    gap: 8px !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid var(--line) !important;
    border-left: 0 !important;
  }

  .day6-control-compact-actions button,
  .day6-control-compact-actions #aiConversationConnectButton,
  .day6-control-compact-actions #aiConversationFinishButtonSecondary {
    min-height: 46px !important;
    padding: 8px 9px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 420px) {
  .day6-live-controls.day6-live-controls-compact {
    padding-inline: 10px !important;
  }

  .day6-control-compact-row {
    grid-template-columns: minmax(86px, auto) minmax(64px, 1fr) 38px !important;
    gap: 6px !important;
  }

  .day6-control-compact-actions button,
  .day6-control-compact-actions #aiConversationConnectButton,
  .day6-control-compact-actions #aiConversationFinishButtonSecondary {
    min-height: 44px !important;
    padding-inline: 7px !important;
    font-size: 10px !important;
  }
}

/* ===== Day6 PC compact controls: finish button sizing and wider sliders ===== */
@media (min-width: 901px) {
  .day6-live-controls.day6-live-controls-compact {
    grid-template-columns:
      minmax(126px, 158px)
      minmax(0, 1fr)
      max-content !important;
  }

  /*
   * ラベルと現在値を上段、スライダーを下段に配置します。
   * スライダーが設定欄の横幅をほぼすべて使用できるため、
   * コンパクトな高さを維持したまま操作性を高めます。
   */
  .day6-control-compact-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 1px !important;
    min-height: 48px !important;
    padding: 3px 12px !important;
  }

  .day6-control-compact-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .day6-control-compact-row output {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  .day6-control-compact-row input[type="range"] {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 130px !important;
    height: 20px !important;
  }

  .day6-control-compact-actions {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .day6-control-compact-actions #aiConversationFinishButtonSecondary {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    padding: 9px 22px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }

  .day6-control-compact-actions #aiConversationConnectButton {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 112px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .day6-live-controls.day6-live-controls-compact {
    grid-template-columns:
      minmax(108px, 130px)
      minmax(0, 1fr)
      max-content !important;
  }

  .day6-control-compact-row {
    padding-inline: 8px !important;
  }

  .day6-control-compact-row input[type="range"] {
    min-width: 96px !important;
  }

  .day6-control-compact-actions #aiConversationFinishButtonSecondary {
    padding-inline: 17px !important;
    font-size: 15px !important;
  }
}

/* ===== Day6 PC: align conversation card right edge with progress and controls ===== */
@media (min-width: 901px) {
  .day6-live-content.ai-conversation-live-grid,
  .day6-live-content.ai-conversation-live-grid.controls-expanded {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
  }

  .day6-live-conversation-card {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
  }
}

/* ===== Day6 PC: keep conversation card aligned without overflowing ===== */
@media (min-width: 901px) {
  .day6-live-content.ai-conversation-live-grid,
  .day6-live-content.ai-conversation-live-grid.controls-expanded {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .day6-live-content.ai-conversation-live-grid > .day6-live-conversation-card,
  .day6-live-content.ai-conversation-live-grid.controls-expanded > .day6-live-conversation-card {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

/* ===== Day6 mobile: match finish-button text size to primary buttons ===== */
@media (max-width: 900px) {
  .day6-control-compact-actions #aiConversationFinishButtonSecondary {
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
  }
}


/* ===== Day6 mobile: prevent slider value labels from being clipped ===== */
@media (max-width: 900px) {
  .day6-control-compact-row {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 46%) !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    min-height: 58px !important;
    padding: 6px 4px !important;
    box-sizing: border-box !important;
  }

  .day6-control-compact-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }

  .day6-control-compact-row output {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-right: 2px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .day6-control-compact-row input[type="range"] {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 420px) {
  .day6-control-compact-row {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 48%) !important;
    column-gap: 8px !important;
    padding-inline: 2px !important;
  }

  .day6-control-compact-row output {
    font-size: 9.5px !important;
  }
}

/* ===== Day6 responsive: keep conversation-log card inside narrow windows ===== */
@media (min-width: 901px) and (max-width: 1280px) {
  /*
   * Narrow PC windows need flexible columns. The previous 24px right-edge
   * extension is removed in this range so the conversation card can shrink
   * with the same outer boundary as the other cards.
   */
  .day6-live-content.ai-conversation-live-grid,
  .day6-live-content.ai-conversation-live-grid.controls-expanded {
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  .day6-live-content.ai-conversation-live-grid > .day6-live-conversation-card,
  .day6-live-content.ai-conversation-live-grid.controls-expanded > .day6-live-conversation-card {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .day6-live-conversation-header,
  .day6-live-topic,
  .day6-live-transcript.ai-conversation-transcript,
  .day6-live-speaking-hint {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 900px) {
  .day6-live-content.ai-conversation-live-grid > .day6-live-conversation-card,
  .day6-live-content.ai-conversation-live-grid.controls-expanded > .day6-live-conversation-card {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ===== Day6: keep speaking-status card inside the tutor image ===== */
.day6-live-tutor-card {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.day6-live-tutor-media,
.day6-live-speaking-status {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.day6-live-tutor-media {
  position: relative !important;
  z-index: 1 !important;
}

.day6-live-speaking-status {
  position: relative !important;
  z-index: 2 !important;
  align-self: end !important;
  justify-self: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 16px 16px 12px 12px !important;
  box-shadow: 0 -6px 18px rgba(16, 24, 40, .08) !important;
}

@media (max-width: 900px) {
  .day6-live-tutor-card {
    grid-template-rows: auto auto !important;
    overflow: hidden !important;
  }

  .day6-live-speaking-status {
    padding-bottom: 10px !important;
  }
}

/* ===== Day5 / Day6 mobile floating timer: keep below the app header ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.ai-confirmation-active .ai-confirmation-floating-timer,
  body.ai-conversation-active .ai-conversation-floating-timer {
    top: calc(60px + env(safe-area-inset-top)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    z-index: 250 !important;
  }
}


/* ===== Day6 PC: contain every conversation-log element within its parent card ===== */
@media (min-width: 901px) {
  .day6-live-screen,
  .day6-live-content.ai-conversation-live-grid,
  .day6-live-conversation-card,
  .day6-live-conversation-header,
  .day6-live-topic,
  .day6-live-transcript.ai-conversation-transcript,
  .day6-live-speaking-hint {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .day6-live-conversation-card {
    contain: inline-size !important;
  }

  .day6-live-conversation-header,
  .day6-live-topic,
  .day6-live-transcript.ai-conversation-transcript,
  .day6-live-speaking-hint {
    width: 100% !important;
    margin-inline: 0 !important;
  }

  .day6-live-topic strong,
  .day6-live-conversation-header > div,
  .day6-live-transcript .ai-conversation-message,
  .day6-live-transcript .ai-conversation-message-copy,
  .day6-live-transcript .ai-conversation-message-paragraph,
  .day6-live-transcript .ai-conversation-message p {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .day6-live-transcript .ai-conversation-message {
    width: min(88%, 720px) !important;
  }
}


/* ===== Day5 / Day6 mobile: keep app header independent from study-area scrolling ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.ai-confirmation-active .topbar,
  body.ai-confirmation-active.header-hidden .topbar,
  body.ai-conversation-active .topbar,
  body.ai-conversation-active.header-hidden .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    will-change: auto !important;
    z-index: 300 !important;
  }

  body.ai-confirmation-active .main,
  body.ai-confirmation-active.app-mode .main,
  body.ai-confirmation-active.practical-study-active .main,
  body.ai-conversation-active .main,
  body.ai-conversation-active.app-mode .main,
  body.ai-conversation-active.practical-study-active .main {
    padding-top: calc(60px + env(safe-area-inset-top)) !important;
  }

  body.ai-confirmation-active .ai-confirmation-floating-timer,
  body.ai-conversation-active .ai-conversation-floating-timer {
    top: calc(60px + env(safe-area-inset-top)) !important;
    z-index: 250 !important;
  }
}

/* ===== Day6 mobile tutor image: keep the instructor visible down to the hands ===== */
@media (max-width: 900px) {
  .day6-live-tutor-media {
    /* Reserve the bottom area for the overlaid speaking-status card so it no
       longer covers the instructor's hands. */
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 8px 116px !important;
    align-items: start !important;
    box-sizing: border-box !important;
  }

  .day6-live-tutor-media .ai-conversation-static-tutor.live {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .day6-live-tutor-media .ai-conversation-static-tutor.live img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  .day6-live-speaking-status {
    align-self: end !important;
    margin: 0 !important;
  }
}

@media (max-width: 420px) {
  .day6-live-tutor-media {
    padding-bottom: 112px !important;
  }
}

/* ===== Day6 PC tutor image: reserve space for status card and keep hands visible ===== */
@media (min-width: 901px) {
  .day6-live-tutor-card {
    grid-template-rows: auto minmax(360px, 1fr) !important;
  }

  .day6-live-tutor-media {
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    padding: 8px 8px 82px !important;
    align-items: start !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .day6-live-tutor-media .ai-conversation-static-tutor.live {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
  }

  .day6-live-tutor-media .ai-conversation-static-tutor.live img {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  .day6-live-speaking-status {
    align-self: end !important;
    margin: 0 !important;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .day6-live-tutor-card {
    grid-template-rows: auto minmax(320px, 1fr) !important;
  }

  .day6-live-tutor-media {
    min-height: 320px !important;
    padding-bottom: 76px !important;
  }
}

/* ===== Day6 AI text Japanese translation ===== */
@media (min-width: 901px) {
  .day6-setup-identity-grid {
    grid-template-columns:
      minmax(210px, 1.3fr)
      minmax(135px, .7fr)
      minmax(165px, .82fr) !important;
  }
}

.day6-ai-translation {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f1d4d7;
}

.day6-ai-translation > span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.3;
}

.day6-ai-translation > p {
  margin: 0 !important;
  color: #475467 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 900px) {
  .day6-ai-translation {
    margin-top: 10px;
    padding-top: 9px;
  }

  .day6-ai-translation > p {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .day6-setup-identity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .day6-setup-identity-grid > label:first-child {
    grid-column: 1 / -1;
  }
}

/* ===== Day6 setup PC: restore tutor image and rebalance right padding ===== */
@media (min-width: 901px) {
  .day6-setup-media {
    position: relative !important;
    display: block !important;
    height: clamp(300px, 34vh, 370px) !important;
    min-height: clamp(300px, 34vh, 370px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #f9fafb !important;
  }

  .day6-setup-tutor-image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    border-radius: 0 !important;
  }

  .day6-setup-settings {
    padding-right: 18px !important;
  }

  .day6-setup-settings-header,
  .day6-setup-fields,
  .day6-setup-identity-grid,
  .day6-setup-range-grid,
  .day6-setup-considerations,
  .day6-setup-mic-note,
  .day6-setup-actions,
  .day6-setup-settings #aiConversationSetupResult {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .day6-setup-settings {
    padding-right: 16px !important;
  }
}


/* ===== Day6 setup PC: keep Japanese translation field inside card ===== */
@media (min-width: 1101px) {
  .day6-setup-identity-grid {
    grid-template-columns:
      minmax(0, 1.3fr)
      minmax(0, .82fr)
      minmax(0, 1fr) !important;
  }

  .day6-setup-identity-grid > label,
  .day6-setup-identity-grid input,
  .day6-setup-identity-grid select {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #aiConversationTranslation {
    width: 100% !important;
  }
}


/* ===== Day6 speaking-status: remove secondary copy and center remaining content ===== */
.day6-live-speaking-status {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

.day6-live-speaking-status .ai-conversation-state-bars {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
}

.day6-live-speaking-status .ai-conversation-state-copy {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  margin: 0 !important;
  text-align: center !important;
}

.day6-live-speaking-status .ai-conversation-state-copy > span {
  display: none !important;
}

.day6-live-speaking-status .ai-conversation-state-copy strong {
  display: block !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

@media (min-width: 901px) {
  .day6-live-speaking-status {
    height: 82px !important;
    min-height: 82px !important;
    padding: 9px 14px !important;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .day6-live-speaking-status {
    height: 76px !important;
    min-height: 76px !important;
    padding-block: 7px !important;
  }
}

@media (max-width: 900px) {
  .day6-live-speaking-status {
    height: 116px !important;
    min-height: 116px !important;
    padding: 14px 16px !important;
    gap: 10px !important;
  }
}

@media (max-width: 420px) {
  .day6-live-speaking-status {
    height: 112px !important;
    min-height: 112px !important;
    padding: 12px 14px !important;
  }
}


/* ===== Day6 PC: keep tutor/log layout stable when control messages appear ===== */
@media (min-width: 901px) {
  /*
   * The live screen uses a fixed-height final row for the control card.
   * Showing an error/success message therefore no longer steals height from
   * the tutor and conversation-log row above it.
   */
  .day6-live-screen {
    --day6-control-row-height: 118px;
    grid-template-rows:
      auto
      minmax(0, 1fr)
      var(--day6-control-row-height) !important;
  }

  .day6-live-controls.day6-live-controls-compact {
    height: var(--day6-control-row-height) !important;
    min-height: var(--day6-control-row-height) !important;
    max-height: var(--day6-control-row-height) !important;
    grid-template-rows: minmax(0, 1fr) 44px !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  /*
   * Keep this row reserved even while empty. This prevents layout movement
   * when a connection error, warning, or success message is inserted.
   */
  .day6-live-controls.day6-live-controls-compact > #aiConversationActionResult,
  .day6-live-controls.day6-live-controls-compact > #aiConversationActionResult:empty {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .day6-live-controls.day6-live-controls-compact > #aiConversationActionResult:empty {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult
  > .error,
  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult
  > .success,
  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult
  > .warning {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
}

@media (min-width: 901px) and (max-height: 720px) {
  .day6-live-screen {
    --day6-control-row-height: 108px;
  }

  .day6-live-controls.day6-live-controls-compact {
    grid-template-rows: minmax(0, 1fr) 40px !important;
    padding-block: 8px !important;
  }

  .day6-live-controls.day6-live-controls-compact > #aiConversationActionResult,
  .day6-live-controls.day6-live-controls-compact > #aiConversationActionResult:empty,
  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult
  > .error,
  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult
  > .success,
  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult
  > .warning {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
}

/* Mobile is document-flow based; messages may extend downward but never resize
   the tutor or conversation-log cards above them. */
@media (max-width: 900px) {
  .day6-live-controls.day6-live-controls-compact > #aiConversationActionResult {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult
  > .error,
  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult
  > .success,
  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult
  > .warning {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ===== Day6 controls: expand only when a status/error message is shown ===== */
@media (min-width: 901px) {
  /*
   * The screen itself grows by exactly the same amount as the control card.
   * Therefore, the tutor and conversation-log row keeps its existing height
   * while only the lower control card extends downward.
   */
  .day6-live-screen {
    --day6-control-base-height: 72px;
    --day6-control-message-extra: 0px;
    height: calc(100dvh - 16px + var(--day6-control-message-extra)) !important;
    min-height: calc(620px + var(--day6-control-message-extra)) !important;
    grid-template-rows:
      auto
      minmax(0, 1fr)
      calc(var(--day6-control-base-height) + var(--day6-control-message-extra)) !important;
  }

  .day6-live-controls.day6-live-controls-compact {
    height: calc(var(--day6-control-base-height) + var(--day6-control-message-extra)) !important;
    min-height: calc(var(--day6-control-base-height) + var(--day6-control-message-extra)) !important;
    max-height: none !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    overflow: hidden !important;
    transition: height .18s ease, min-height .18s ease !important;
  }

  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult:empty {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult:not(:empty) {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 6px 0 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult
  > .error,
  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult
  > .success,
  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult
  > .warning {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 9px 13px !important;
    overflow: visible !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}

@media (min-width: 901px) and (max-height: 720px) {
  .day6-live-screen {
    --day6-control-base-height: 68px;
  }
}


/* ===== Day6 PC controls: ensure every element fits with balanced vertical spacing ===== */
@media (min-width: 901px) {
  .day6-live-screen {
    /* Enough room for labels, current values, sliders and the primary action. */
    --day6-control-base-height: 98px !important;
  }

  .day6-live-controls.day6-live-controls-compact {
    grid-template-columns:
      minmax(150px, 178px)
      minmax(0, 1fr)
      max-content !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: center !important;
    align-content: stretch !important;
    gap: 8px 16px !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .day6-control-compact-heading {
    align-self: stretch !important;
    align-content: center !important;
    padding-right: 18px !important;
  }

  .day6-control-compact-heading span {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  .day6-control-compact-heading h3 {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  .day6-control-compact-settings {
    align-self: stretch !important;
    align-items: stretch !important;
    min-height: 0 !important;
  }

  .day6-control-compact-row {
    grid-template-columns: minmax(0, 1fr) minmax(64px, auto) !important;
    grid-template-rows: minmax(22px, auto) 26px !important;
    align-content: center !important;
    min-height: 64px !important;
    padding: 7px 14px !important;
    column-gap: 12px !important;
    row-gap: 5px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .day6-control-compact-label {
    align-self: center !important;
    overflow: visible !important;
  }

  .day6-control-compact-label strong {
    overflow: visible !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    text-overflow: clip !important;
  }

  .day6-control-compact-label small {
    font-size: 8.5px !important;
    line-height: 1.25 !important;
  }

  .day6-control-compact-row output {
    align-self: center !important;
    justify-self: end !important;
    min-width: 0 !important;
    max-width: 170px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }

  .day6-control-compact-row input[type="range"] {
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 26px !important;
    margin: 0 !important;
  }

  .day6-control-compact-actions {
    align-self: stretch !important;
    align-items: center !important;
    padding-left: 18px !important;
  }

  .day6-control-compact-actions #aiConversationConnectButton,
  .day6-control-compact-actions #aiConversationFinishButtonSecondary {
    min-height: 50px !important;
    padding-block: 11px !important;
  }

  .day6-live-controls.day6-live-controls-compact
  > #aiConversationActionResult:not(:empty) {
    padding-top: 8px !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .day6-live-screen {
    --day6-control-base-height: 104px !important;
  }

  .day6-live-controls.day6-live-controls-compact {
    grid-template-columns:
      minmax(126px, 142px)
      minmax(0, 1fr)
      max-content !important;
    gap: 8px 11px !important;
    padding: 11px 13px !important;
  }

  .day6-control-compact-heading {
    padding-right: 11px !important;
  }

  .day6-control-compact-row {
    min-height: 68px !important;
    padding-inline: 10px !important;
    column-gap: 8px !important;
  }

  .day6-control-compact-row output {
    max-width: 126px !important;
    font-size: 9.5px !important;
  }

  .day6-control-compact-actions {
    padding-left: 11px !important;
  }
}

/* ===== Day6 PC controls: increase card height so labels and sliders stay inside ===== */
@media (min-width: 901px) {
  .day6-live-screen {
    --day6-control-base-height: 124px !important;
  }

  .day6-live-controls.day6-live-controls-compact {
    height: calc(var(--day6-control-base-height) + var(--day6-control-message-extra, 0px)) !important;
    min-height: calc(var(--day6-control-base-height) + var(--day6-control-message-extra, 0px)) !important;
    grid-template-rows: minmax(88px, 1fr) auto !important;
    align-items: stretch !important;
    gap: 10px 16px !important;
    padding: 14px 18px !important;
    overflow: hidden !important;
  }

  .day6-control-compact-heading,
  .day6-control-compact-settings,
  .day6-control-compact-actions {
    align-self: stretch !important;
    min-height: 0 !important;
  }

  .day6-control-compact-heading {
    display: grid !important;
    align-content: center !important;
    padding-block: 8px !important;
  }

  .day6-control-compact-settings {
    align-items: stretch !important;
    padding-block: 4px !important;
  }

  .day6-control-compact-row {
    grid-template-columns: minmax(0, 1fr) minmax(70px, auto) !important;
    grid-template-rows: minmax(28px, auto) 32px !important;
    align-content: center !important;
    min-height: 78px !important;
    padding: 9px 14px !important;
    column-gap: 12px !important;
    row-gap: 7px !important;
    overflow: hidden !important;
  }

  .day6-control-compact-label,
  .day6-control-compact-row output {
    align-self: center !important;
    min-width: 0 !important;
  }

  .day6-control-compact-label strong {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .day6-control-compact-label small {
    display: block !important;
    margin-top: 2px !important;
    font-size: 8.5px !important;
    line-height: 1.25 !important;
  }

  .day6-control-compact-row output {
    max-width: 180px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .day6-control-compact-row input[type="range"] {
    grid-column: 1 / -1 !important;
    align-self: center !important;
    width: 100% !important;
    height: 28px !important;
    margin: 0 !important;
  }

  .day6-control-compact-actions {
    align-items: center !important;
    padding-block: 8px !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .day6-live-screen {
    --day6-control-base-height: 132px !important;
  }

  .day6-live-controls.day6-live-controls-compact {
    grid-template-rows: minmax(94px, 1fr) auto !important;
    padding: 14px !important;
  }

  .day6-control-compact-row {
    min-height: 84px !important;
    padding-inline: 11px !important;
  }
}


/* ===== Day6 PC controls: 80% height with vertically centered contents ===== */
@media (min-width: 901px) {
  .day6-live-screen {
    /* Previous base height: 124px. 100px is approximately 80%. */
    --day6-control-base-height: 100px !important;
  }

  .day6-live-controls.day6-live-controls-compact {
    height: calc(
      var(--day6-control-base-height)
      + var(--day6-control-message-extra, 0px)
    ) !important;
    min-height: calc(
      var(--day6-control-base-height)
      + var(--day6-control-message-extra, 0px)
    ) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: center !important;
    align-content: center !important;
    gap: 7px 16px !important;
    padding: 9px 16px !important;
    box-sizing: border-box !important;
  }

  .day6-control-compact-heading,
  .day6-control-compact-settings,
  .day6-control-compact-actions {
    align-self: stretch !important;
    min-height: 0 !important;
  }

  .day6-control-compact-heading {
    display: grid !important;
    align-content: center !important;
    padding-block: 0 !important;
  }

  .day6-control-compact-settings {
    align-items: center !important;
    padding-block: 0 !important;
  }

  .day6-control-compact-row {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(64px, auto) !important;
    grid-template-rows:
      minmax(24px, auto)
      28px !important;
    align-content: center !important;
    min-height: 64px !important;
    padding: 4px 12px !important;
    column-gap: 10px !important;
    row-gap: 3px !important;
    box-sizing: border-box !important;
  }

  .day6-control-compact-label,
  .day6-control-compact-row output {
    align-self: center !important;
  }

  .day6-control-compact-row input[type="range"] {
    align-self: center !important;
    height: 28px !important;
    margin: 0 !important;
  }

  .day6-control-compact-actions {
    display: flex !important;
    align-items: center !important;
    padding-block: 0 !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .day6-live-screen {
    --day6-control-base-height: 104px !important;
  }

  .day6-live-controls.day6-live-controls-compact {
    padding: 9px 13px !important;
    gap: 7px 11px !important;
  }
}


/* ===== Day6 elapsed-time card: compact height and hide the 12-minute marker ===== */
/*
 * This changes presentation only. The 12-minute closing phase and the AI lesson
 * flow remain unchanged in JavaScript.
 */
.day6-live-progress {
  min-height: 0 !important;
  padding: 10px 18px 14px !important;
  box-sizing: border-box !important;
}

.day6-live-progress .ai-conversation-progress-heading {
  min-height: 0 !important;
  gap: 12px !important;
}

.day6-live-progress .ai-conversation-progress-heading > div:first-child {
  gap: 2px !important;
}

.day6-live-progress .ai-conversation-progress-heading span {
  line-height: 1.2 !important;
}

.day6-live-progress .ai-conversation-progress-heading strong {
  line-height: 1.25 !important;
}

.day6-live-progress .ai-conversation-progress-times small {
  line-height: 1.2 !important;
}

.day6-live-progress .ai-conversation-progress-heading time {
  font-size: clamp(26px, 2.7vw, 34px) !important;
  line-height: .95 !important;
}

.day6-live-progress .ai-conversation-meter {
  margin-top: 8px !important;
}

.day6-live-progress .ai-conversation-meter-track {
  height: 7px !important;
}

.day6-live-progress .ai-conversation-meter-markers {
  height: 14px !important;
  margin-top: 3px !important;
}

.day6-live-progress .ai-conversation-meter-markers > span {
  top: 0 !important;
  font-size: 8.5px !important;
  line-height: 1.2 !important;
}

@media (max-width: 900px) {
  .day6-live-progress {
    padding: 9px 12px 14px !important;
  }

  .day6-live-progress .ai-conversation-progress-heading time {
    font-size: 24px !important;
  }

  /* Preserve the compact mobile marker layout after removing the 12-minute label. */
  .day6-live-progress .ai-conversation-meter-markers > span.is-start,
  .day6-live-progress .ai-conversation-meter-markers > span.is-end {
    display: block !important;
  }

  .day6-live-progress .ai-conversation-meter-markers > span.is-feedback {
    display: none !important;
  }
}

/* ===== Day5 / Day6 finish modal: neutral continue-button hover ===== */
.ai-confirmation-finish-choice-continue {
  min-height: 36px !important;
  padding: 6px 12px !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #667085 !important;
  box-shadow: none !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.ai-confirmation-finish-choice-continue:hover:not(:disabled),
.ai-confirmation-finish-choice-continue:active:not(:disabled) {
  background: #f2f4f7 !important;
  color: #344054 !important;
  box-shadow: none !important;
}

.ai-confirmation-finish-choice-continue:focus-visible {
  background: #f2f4f7 !important;
  color: #344054 !important;
  outline: 3px solid rgba(209, 19, 31, .18) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* ===== Day6 live screen: square primary cards and remove outer frame ===== */
/* Presentation-only change. Layout, spacing, colors and behavior remain unchanged. */
.day6-live-screen {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.day6-live-screen > .day6-live-progress,
.day6-live-screen .day6-live-tutor-card,
.day6-live-screen .day6-live-conversation-card,
.day6-live-screen > .day6-live-controls {
  border-radius: 0 !important;
}

/* ===== Day6 PC page outer spacing: match Day5 ===== */
/* Day5 uses the shared desktop .main padding of 28px. Apply the same outer
   spacing to Day6 without changing card gaps or card-internal layout. */
@media (min-width: 901px) {
  body.ai-conversation-active .main,
  body.ai-conversation-active.app-mode .main,
  body.ai-conversation-active.practical-study-active .main {
    padding: 28px !important;
    box-sizing: border-box !important;
  }

  body.ai-conversation-active #content,
  body.ai-conversation-active.practical-study-active #content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .day6-live-screen {
    width: 100% !important;
    height: calc(100dvh - 56px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ===== Day6 PC outer spacing: make top/bottom equal to left/right ===== */
@media (min-width: 901px) {
  /* The shared, empty topbar retained its default bottom margin and added
     extra vertical space on Day6. Remove it only on the live Day6 screen. */
  body.ai-conversation-active .topbar {
    display: none !important;
    margin: 0 !important;
  }

  body.ai-conversation-active .main,
  body.ai-conversation-active.app-mode .main,
  body.ai-conversation-active.practical-study-active .main {
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 28px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.ai-conversation-active #content,
  body.ai-conversation-active.practical-study-active #content {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .day6-live-screen {
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
}

/* ===== Day6 mobile progress card: keep labels visible at 560px and below ===== */
@media (max-width: 560px) {
  .day6-live-progress {
    padding: 9px 12px 16px !important;
    overflow: visible !important;
  }

  .day6-live-progress .ai-conversation-progress-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 10px !important;
  }

  .day6-live-progress .ai-conversation-progress-heading > div:first-child {
    min-width: 0 !important;
  }

  .day6-live-progress .ai-conversation-progress-heading span {
    display: block !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .day6-live-progress .ai-conversation-progress-heading strong {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  .day6-live-progress .ai-conversation-progress-times {
    min-width: 92px !important;
  }

  .day6-live-progress .ai-conversation-progress-heading time {
    font-size: 24px !important;
    white-space: nowrap !important;
  }

  .day6-live-progress .ai-conversation-meter-markers {
    height: 15px !important;
    overflow: visible !important;
  }

  .day6-live-progress .ai-conversation-meter-markers > span.is-start,
  .day6-live-progress .ai-conversation-meter-markers > span.is-end {
    display: block !important;
    max-width: none !important;
    width: auto !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    word-break: keep-all !important;
    line-height: 1.2 !important;
  }

  .day6-live-progress .ai-conversation-meter-markers > span.is-start {
    left: 0 !important;
    transform: none !important;
    text-align: left !important;
  }

  .day6-live-progress .ai-conversation-meter-markers > span.is-end {
    left: 100% !important;
    right: auto !important;
    transform: translateX(-100%) !important;
    text-align: right !important;
  }
}


/* ===== Day6 PC live tutor image: restore balanced upper-body framing ===== */
/* Keep the corrected page spacing, but prevent the tutor image from scaling
   to the full height of an expanded desktop grid row. */
@media (min-width: 901px) {
  .day6-live-tutor-card {
    grid-template-rows: auto auto !important;
    align-self: start !important;
  }

  .day6-live-tutor-media {
    width: 100% !important;
    height: clamp(400px, 50dvh, 450px) !important;
    min-height: 0 !important;
    padding: 8px 8px 82px !important;
    align-items: start !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .day6-live-tutor-media .ai-conversation-static-tutor.live {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .day6-live-tutor-media .ai-conversation-static-tutor.live img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .day6-live-speaking-status {
    align-self: end !important;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .day6-live-tutor-media {
    height: 390px !important;
    padding-bottom: 76px !important;
  }
}

/* ===== Day6 PC: restore transcript scrolling and match the tutor-card height ===== */
@media (min-width: 901px) {
  .day6-live-content.ai-conversation-live-grid,
  .day6-live-content.ai-conversation-live-grid.controls-expanded {
    align-items: start !important;
    overflow: hidden !important;
  }

  /*
   * The tutor card consists of the 38px toolbar, 12px gap, 28px vertical
   * padding and the responsive tutor-media height. Use the same calculated
   * height for the conversation card so both lower edges remain aligned.
   */
  .day6-live-conversation-card {
    align-self: start !important;
    height: calc(clamp(400px, 50dvh, 450px) + 78px) !important;
    min-height: 0 !important;
    max-height: calc(clamp(400px, 50dvh, 450px) + 78px) !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  .day6-live-transcript.ai-conversation-transcript {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .day6-live-conversation-card {
    height: 468px !important;
    max-height: 468px !important;
  }
}

/* ===== Day5 PC maximized viewport: keep the full learning screen inside the window ===== */
@media (min-width: 1051px) and (min-height: 700px) {
  /* Keep the existing .main padding (the current outer spacing) and stop only
     the browser/page-level vertical scroll on the active Day5 screen. */
  html:has(body.ai-confirmation-active),
  body.ai-confirmation-active {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  body.ai-confirmation-active .app {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.ai-confirmation-active .main,
  body.ai-confirmation-active.app-mode .main,
  body.ai-confirmation-active.practical-study-active .main {
    /* Do not change padding: the current top/bottom/left/right margins remain. */
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.ai-confirmation-active #content,
  body.ai-confirmation-active.practical-study-active #content {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  body.ai-confirmation-active .ai-confirmation-session-shell {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  body.ai-confirmation-active .ai-confirmation-session-header {
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto !important;
  }

  body.ai-confirmation-active .ai-confirmation-session-workspace {
    --ai-confirmation-workspace-height: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  > .ai-confirmation-article-card,
  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  > .ai-confirmation-chat-card {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  > .ai-confirmation-article-card {
    position: relative !important;
    top: auto !important;
    overflow: hidden !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  > .ai-confirmation-workspace-resizer {
    position: relative !important;
    top: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  .ai-confirmation-article-scroll {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  > .ai-confirmation-chat-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  .ai-confirmation-chat-log {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 80px !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  .ai-confirmation-composer,
  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  .ai-confirmation-bottom-actions,
  body.ai-confirmation-active
  .ai-confirmation-session-workspace
  .ai-confirmation-complete-panel {
    flex: 0 0 auto !important;
  }
}

/* ===== Day6 final feedback: Day5-aligned compact bilingual result screen ===== */
body.ai-conversation-feedback-completed {
  overflow: auto !important;
}

body.ai-conversation-feedback-completed #content,
body.ai-conversation-feedback-completed .main {
  min-height: 0 !important;
  overflow: visible !important;
}

.day6-final-feedback-screen {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.day6-final-feedback-screen .ai-conversation-result-layout.redesigned {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.day6-final-feedback-screen .ai-conversation-final-evaluation,
.day6-final-feedback-screen .day6-final-transcript-card,
.day6-final-feedback-screen .day6-final-result-actions {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  border: 1px solid #dce3ec !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .055) !important;
}

.day6-final-feedback-screen .ai-conversation-final-evaluation {
  margin: 0 !important;
  padding: clamp(18px, 2vw, 26px) !important;
}

.day6-final-feedback-screen .ai-conversation-result-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin: 0 0 16px !important;
}

.day6-final-feedback-screen .ai-conversation-result-hero {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 15px !important;
}

.day6-final-feedback-screen .ai-conversation-static-tutor.result {
  width: 76px !important;
  flex: 0 0 76px !important;
}

.day6-final-feedback-screen .ai-conversation-static-tutor.result img {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center top !important;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .12) !important;
}

.day6-final-feedback-screen .ai-conversation-result-toolbar .pill {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  border: 1px solid #f1c7ca !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #d5122a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.day6-final-feedback-screen .ai-conversation-result-toolbar h2 {
  margin: 7px 0 5px !important;
  color: #162033 !important;
  font-size: clamp(25px, 2.5vw, 34px) !important;
  line-height: 1.22 !important;
}

.day6-final-feedback-screen .ai-conversation-result-toolbar p {
  max-width: 720px !important;
  margin: 0 !important;
  color: #667085 !important;
  line-height: 1.55 !important;
}

.day6-final-feedback-screen .ai-conversation-feedback-toolbar-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.day6-final-feedback-screen #aiConversationFeedbackAudioButton {
  min-width: 168px !important;
  min-height: 44px !important;
  padding: 9px 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #fff3f4 !important;
  color: #d5122a !important;
  box-shadow: none !important;
}

.day6-final-feedback-screen .ai-evaluation-language-switch {
  border-radius: 10px !important;
}

.day6-final-feedback-screen .ai-conversation-result-meta-card {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
}

.day6-final-feedback-screen .ai-conversation-result-meta-card article {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  gap: 14px !important;
  padding: 12px 15px !important;
  border: 1px solid #e2e7ee !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
}

.day6-final-feedback-screen .ai-conversation-result-meta-card span {
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.day6-final-feedback-screen .ai-conversation-result-meta-card strong {
  color: #d5122a !important;
  font-size: 20px !important;
  white-space: nowrap !important;
}

.day6-final-feedback-screen .ai-conversation-result-overview-grid {
  display: block !important;
  margin: 0 !important;
}

.day6-final-feedback-screen .ai-conversation-result-language-panel {
  display: grid !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.day6-final-feedback-screen .ai-conversation-result-language-panel[hidden] {
  display: none !important;
}

.day6-final-feedback-screen .ai-conversation-result-main-copy,
.day6-final-feedback-screen .ai-conversation-result-main-copy .ai-evaluation-copy {
  min-width: 0 !important;
}

.day6-final-feedback-screen .ai-conversation-result-main-copy .ai-evaluation-copy {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.day6-final-feedback-screen .ai-evaluation-overview {
  grid-template-columns: 150px minmax(0, 1fr) !important;
  gap: 24px !important;
  padding: 20px !important;
  border: 1px solid #e2e7ee !important;
  border-radius: 12px !important;
  background: #fff !important;
}

.day6-final-feedback-screen .ai-evaluation-score-ring {
  width: 132px !important;
}

.day6-final-feedback-screen .ai-evaluation-score-ring strong {
  font-size: 42px !important;
}

.day6-final-feedback-screen .ai-evaluation-confidence,
.day6-final-feedback-screen .ai-conversation-highlight,
.day6-final-feedback-screen .ai-conversation-day7-prep,
.day6-final-feedback-screen .ai-evaluation-insufficient,
.day6-final-feedback-screen .ai-evaluation-next-step {
  margin-top: 16px !important;
}

.day6-final-feedback-screen .ai-evaluation-categories {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.day6-final-feedback-screen .ai-evaluation-category {
  min-width: 0 !important;
  padding: 14px 15px !important;
  border-radius: 10px !important;
}

.day6-final-feedback-screen .ai-evaluation-category > p {
  line-height: 1.58 !important;
}

.day6-final-feedback-screen .ai-conversation-result-sidecards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.day6-final-feedback-screen .ai-conversation-result-sidecard {
  min-width: 0 !important;
  padding: 15px 16px !important;
  border: 1px solid #e2e7ee !important;
  border-left: 4px solid #d5122a !important;
  border-radius: 10px !important;
  background: #fff !important;
}

.day6-final-feedback-screen .ai-conversation-result-sidecard h3 {
  margin: 0 0 8px !important;
  color: #162033 !important;
  font-size: 17px !important;
}

.day6-final-feedback-screen .ai-conversation-result-sidecard ul {
  gap: 6px !important;
  padding-left: 18px !important;
  line-height: 1.58 !important;
}

.day6-final-feedback-screen .day6-final-transcript-card {
  margin: 16px 0 0 !important;
  padding: 20px !important;
}

.day6-final-feedback-screen .day6-final-transcript-header {
  padding-bottom: 13px !important;
  border-bottom: 1px solid #e1e6ed !important;
}

.day6-final-feedback-screen .day6-final-transcript-header h2 {
  margin: 4px 0 0 !important;
  font-size: clamp(22px, 2vw, 28px) !important;
}

.day6-final-feedback-screen .day6-final-transcript-header p {
  max-width: 560px !important;
  margin: 0 !important;
}

.day6-final-feedback-screen .day6-final-transcript {
  flex: none !important;
  width: 100% !important;
  min-height: 260px !important;
  max-height: min(50vh, 520px) !important;
  margin-top: 14px !important;
  padding: 16px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 1px solid #dfe5ed !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  overscroll-behavior: contain !important;
}

.day6-final-feedback-screen .day6-final-transcript .ai-conversation-message {
  width: min(82%, 760px) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 13px 15px !important;
  border-radius: 14px !important;
}

.day6-final-feedback-screen .day6-final-transcript .ai-conversation-message.assistant {
  align-self: flex-start !important;
  border: 1px solid #f1cfd2 !important;
  border-bottom-left-radius: 4px !important;
  background: #fff !important;
}

.day6-final-feedback-screen .day6-final-transcript .ai-conversation-message.user {
  align-self: flex-end !important;
  border: 1px solid #f4d9dc !important;
  border-bottom-right-radius: 4px !important;
  background: #fff1f2 !important;
}

.day6-final-feedback-screen .day6-final-result-actions {
  position: static !important;
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding: 14px 18px !important;
}

.day6-final-feedback-screen .day6-final-result-actions button {
  min-height: 46px !important;
  padding: 10px 18px !important;
}

.day6-final-feedback-screen .day6-final-result-actions button:last-child {
  min-width: 270px !important;
}

@media (max-width: 900px) {
  body.ai-conversation-feedback-completed {
    overflow: auto !important;
  }

  .day6-final-feedback-screen {
    min-height: 0 !important;
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }

  .day6-final-feedback-screen .ai-conversation-final-evaluation,
  .day6-final-feedback-screen .day6-final-transcript-card {
    padding: 16px 14px !important;
  }

  .day6-final-feedback-screen .ai-conversation-result-toolbar {
    display: grid !important;
    gap: 14px !important;
  }

  .day6-final-feedback-screen .ai-conversation-result-hero {
    align-items: flex-start !important;
  }

  .day6-final-feedback-screen .ai-conversation-static-tutor.result,
  .day6-final-feedback-screen .ai-conversation-static-tutor.result img {
    width: 64px !important;
    height: 64px !important;
    flex-basis: 64px !important;
  }

  .day6-final-feedback-screen .ai-conversation-result-toolbar h2 {
    font-size: 24px !important;
  }

  .day6-final-feedback-screen .ai-conversation-feedback-toolbar-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: 100% !important;
  }

  .day6-final-feedback-screen #aiConversationFeedbackAudioButton {
    min-width: 0 !important;
    width: 100% !important;
  }

  .day6-final-feedback-screen .ai-conversation-result-meta-card {
    gap: 8px !important;
  }

  .day6-final-feedback-screen .ai-conversation-result-meta-card article {
    display: grid !important;
    gap: 4px !important;
    padding: 10px 12px !important;
  }

  .day6-final-feedback-screen .ai-conversation-result-meta-card strong {
    font-size: 17px !important;
  }

  .day6-final-feedback-screen .ai-evaluation-overview {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 17px 14px !important;
    text-align: center !important;
  }

  .day6-final-feedback-screen .ai-evaluation-overview-text > p {
    text-align: left !important;
  }

  .day6-final-feedback-screen .ai-evaluation-categories,
  .day6-final-feedback-screen .ai-conversation-result-sidecards {
    grid-template-columns: 1fr !important;
  }

  .day6-final-feedback-screen .day6-final-transcript-header {
    display: grid !important;
    gap: 7px !important;
  }

  .day6-final-feedback-screen .day6-final-transcript {
    min-height: 240px !important;
    max-height: 58vh !important;
    padding: 12px !important;
  }

  .day6-final-feedback-screen .day6-final-transcript .ai-conversation-message {
    width: 94% !important;
  }

  .day6-final-feedback-screen .day6-final-result-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }

  .day6-final-feedback-screen .day6-final-result-actions button,
  .day6-final-feedback-screen .day6-final-result-actions button:last-child {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 560px) {
  .day6-final-feedback-screen .ai-conversation-feedback-toolbar-actions {
    grid-template-columns: 1fr !important;
  }

  .day6-final-feedback-screen .ai-evaluation-language-switch {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ===== Day6 final feedback: restore page-level scrolling ===== */
html:has(body.ai-conversation-feedback-completed),
body.ai-conversation-feedback-completed {
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

body.ai-conversation-feedback-completed .app {
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow: visible !important;
}

body.ai-conversation-feedback-completed .main,
body.ai-conversation-feedback-completed.app-mode .main,
body.ai-conversation-feedback-completed.practical-study-active .main {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
}

body.ai-conversation-feedback-completed #content,
body.ai-conversation-feedback-completed.practical-study-active #content {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body.ai-conversation-feedback-completed .day6-final-feedback-screen,
body.ai-conversation-feedback-completed .ai-conversation-result-layout.redesigned {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ===== Day5 final feedback: align visual system with Day6 without changing evaluation content ===== */
html:has(body.ai-confirmation-feedback-completed),
body.ai-confirmation-feedback-completed {
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

body.ai-confirmation-feedback-completed .app {
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow: visible !important;
}

body.ai-confirmation-feedback-completed .main,
body.ai-confirmation-feedback-completed.app-mode .main,
body.ai-confirmation-feedback-completed.practical-study-active .main {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
}

body.ai-confirmation-feedback-completed #content,
body.ai-confirmation-feedback-completed.practical-study-active #content {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.day5-final-feedback-screen {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.day5-final-feedback-layout {
  display: grid !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.day5-final-feedback-screen .day5-final-evaluation,
.day5-final-feedback-screen .day5-final-transcript-card,
.day5-final-feedback-screen .day5-final-result-actions {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  border: 1px solid #dce3ec !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .055) !important;
}

.day5-final-feedback-screen .day5-final-evaluation {
  margin: 0 !important;
  padding: clamp(18px, 2vw, 26px) !important;
}

.day5-final-evaluation-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin: 0 0 16px !important;
}

.day5-final-evaluation-hero {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 15px !important;
}

.day5-final-evaluation-hero .ai-tutor-illustration,
.day5-final-evaluation-hero .ai-tutor-illustration.compact {
  width: 76px !important;
  flex: 0 0 76px !important;
}

.day5-final-evaluation-hero .ai-tutor-illustration-portrait,
.day5-final-evaluation-hero .ai-tutor-illustration-image {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
}

.day5-final-evaluation-hero .ai-tutor-illustration-portrait {
  overflow: hidden !important;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .12) !important;
}

.day5-final-evaluation-hero .ai-tutor-illustration-image {
  display: block !important;
  object-fit: cover !important;
  object-position: center top !important;
}

.day5-final-feedback-screen .day5-final-evaluation-toolbar .pill {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  border: 1px solid #f1c7ca !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #d5122a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.day5-final-feedback-screen .day5-final-evaluation-toolbar h2 {
  margin: 7px 0 0 !important;
  color: #162033 !important;
  font-size: clamp(25px, 2.5vw, 34px) !important;
  line-height: 1.22 !important;
}

.day5-final-evaluation-toolbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
}

.day5-final-evaluation-toolbar-actions > .ai-chat-speak-button {
  min-width: 170px !important;
  min-height: 42px !important;
  margin: 0 !important;
}

.day5-final-feedback-screen .ai-evaluation-copy {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.day5-final-feedback-screen .ai-evaluation-overview {
  grid-template-columns: 150px minmax(0, 1fr) !important;
  gap: 24px !important;
  padding: 20px !important;
  border: 1px solid #e2e7ee !important;
  border-radius: 12px !important;
  background: #fff !important;
}

.day5-final-feedback-screen .ai-evaluation-score-ring {
  width: 132px !important;
}

.day5-final-feedback-screen .ai-evaluation-score-ring strong {
  font-size: 42px !important;
}

.day5-final-feedback-screen .ai-evaluation-confidence,
.day5-final-feedback-screen .ai-evaluation-insufficient,
.day5-final-feedback-screen .ai-evaluation-next-step {
  margin-top: 16px !important;
}

.day5-final-feedback-screen .ai-evaluation-categories {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.day5-final-feedback-screen .ai-evaluation-category {
  min-width: 0 !important;
  padding: 14px 15px !important;
  border-radius: 10px !important;
}

.day5-final-feedback-screen .ai-evaluation-category > p {
  line-height: 1.58 !important;
}

.day5-final-transcript-card {
  margin: 0 !important;
  padding: 20px !important;
}

.day5-final-transcript-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding-bottom: 13px !important;
  border-bottom: 1px solid #e1e6ed !important;
}

.day5-final-transcript-header h2 {
  margin: 4px 0 0 !important;
  font-size: clamp(22px, 2vw, 28px) !important;
}

.day5-final-transcript-header p {
  max-width: 560px !important;
  margin: 0 !important;
}

.day5-final-transcript {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 260px !important;
  max-height: min(50vh, 520px) !important;
  margin-top: 14px !important;
  padding: 16px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 1px solid #dfe5ed !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  -webkit-overflow-scrolling: touch !important;
}

.day5-final-transcript .ai-confirmation-final-message {
  display: block !important;
  width: min(82%, 760px) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 13px 15px !important;
  border-radius: 14px !important;
}

.day5-final-transcript .ai-confirmation-final-message.assistant {
  align-self: flex-start !important;
  border: 1px solid #f1cfd2 !important;
  border-bottom-left-radius: 4px !important;
  background: #fff !important;
}

.day5-final-transcript .ai-confirmation-final-message.user {
  align-self: flex-end !important;
  border: 1px solid #f4d9dc !important;
  border-bottom-right-radius: 4px !important;
  background: #fff1f2 !important;
}

.day5-final-transcript .ai-conversation-message-role {
  margin-bottom: 7px !important;
  color: #d5122a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.day5-final-transcript .ai-conversation-message-copy,
.day5-final-transcript .ai-conversation-message-copy p {
  margin: 0 !important;
  color: #162033 !important;
  line-height: 1.7 !important;
  overflow-wrap: anywhere !important;
}

.day5-final-transcript .ai-chat-help-label {
  margin: 0 0 8px !important;
}

.day5-final-transcript .day6-ai-translation {
  margin-top: 11px !important;
}

.day5-final-transcript .ai-confirmation-final-message-mode {
  display: inline-flex !important;
  margin-top: 10px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: #f2f4f7 !important;
  color: #667085 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.day5-final-transcript .ai-chat-speak-button {
  min-height: 38px !important;
  margin-top: 11px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
}

.day5-final-result-actions {
  position: static !important;
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding: 14px 18px !important;
}

.day5-final-result-actions button {
  min-height: 46px !important;
  padding: 10px 18px !important;
}

.day5-final-result-actions #aiConfirmationReturnButton {
  min-width: 270px !important;
}

@media (max-width: 900px) {
  .day5-final-feedback-screen {
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }

  .day5-final-feedback-screen .day5-final-evaluation,
  .day5-final-feedback-screen .day5-final-transcript-card {
    padding: 16px 14px !important;
  }

  .day5-final-evaluation-toolbar {
    display: grid !important;
    gap: 14px !important;
  }

  .day5-final-evaluation-hero {
    align-items: flex-start !important;
  }

  .day5-final-evaluation-hero .ai-tutor-illustration,
  .day5-final-evaluation-hero .ai-tutor-illustration.compact,
  .day5-final-evaluation-hero .ai-tutor-illustration-portrait,
  .day5-final-evaluation-hero .ai-tutor-illustration-image {
    width: 64px !important;
    height: 64px !important;
    flex-basis: 64px !important;
  }

  .day5-final-feedback-screen .day5-final-evaluation-toolbar h2 {
    font-size: 24px !important;
  }

  .day5-final-evaluation-toolbar-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: 100% !important;
  }

  .day5-final-evaluation-toolbar-actions > .ai-chat-speak-button {
    min-width: 0 !important;
    width: 100% !important;
  }

  .day5-final-feedback-screen .ai-evaluation-overview {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 17px 14px !important;
    text-align: center !important;
  }

  .day5-final-feedback-screen .ai-evaluation-overview-text > p {
    text-align: left !important;
  }

  .day5-final-feedback-screen .ai-evaluation-categories {
    grid-template-columns: 1fr !important;
  }

  .day5-final-transcript-header {
    display: grid !important;
    gap: 7px !important;
  }

  .day5-final-transcript {
    min-height: 240px !important;
    max-height: 58vh !important;
    padding: 12px !important;
  }

  .day5-final-transcript .ai-confirmation-final-message {
    width: 94% !important;
  }

  .day5-final-result-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }

  .day5-final-result-actions button,
  .day5-final-result-actions #aiConfirmationReturnButton {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 560px) {
  .day5-final-evaluation-toolbar-actions {
    grid-template-columns: 1fr !important;
  }

  .day5-final-evaluation-toolbar-actions .ai-evaluation-language-switch {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===== Day5 setup screen: restore normal page scrolling and keep start actions visible ===== */
@media (min-width: 1051px) and (min-height: 700px) {
  html:has(body.ai-confirmation-active .ai-confirmation-start-layout),
  body.ai-confirmation-active:has(.ai-confirmation-start-layout) {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.ai-confirmation-active:has(.ai-confirmation-start-layout) .app {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.ai-confirmation-active:has(.ai-confirmation-start-layout) .main,
  body.ai-confirmation-active.app-mode:has(.ai-confirmation-start-layout) .main,
  body.ai-confirmation-active.practical-study-active:has(.ai-confirmation-start-layout) .main {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body.ai-confirmation-active:has(.ai-confirmation-start-layout) #content,
  body.ai-confirmation-active.practical-study-active:has(.ai-confirmation-start-layout) #content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.ai-confirmation-active:has(.ai-confirmation-start-layout)
  .ai-confirmation-start-layout,
  body.ai-confirmation-active:has(.ai-confirmation-start-layout)
  .ai-confirmation-start-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.ai-confirmation-active:has(.ai-confirmation-start-layout)
  .ai-confirmation-start-actions {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ===== 学習履歴：Day5 AI確認テスト／Day6 AI会話トレーニング最終フィードバック ===== */
.learning-history-date-grid.ai-learning-completion-only {
  grid-template-columns: minmax(0, 1fr) !important;
}

.learning-history-task-list.day6-final-feedback-only {
  display: block !important;
}

.learning-history-ai-feedback-card {
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 4px 12px rgba(16, 24, 40, .035);
}

.learning-history-ai-feedback-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #f9fafb;
}

.learning-history-ai-feedback-heading > div:first-child {
  min-width: 0;
}

.learning-history-ai-feedback-heading span:not(.pill) {
  display: block;
  margin-bottom: 3px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.learning-history-ai-feedback-heading h4 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.35;
}

.learning-history-ai-feedback-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.learning-history-ai-feedback-meta > span:not(.pill) {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.learning-history-ai-feedback-meta b {
  color: var(--text);
}

.learning-history-ai-feedback-body {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.learning-history-ai-overview {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid #f3c6cb;
  border-radius: 12px;
  background: #fffafa;
}

.learning-history-ai-overview-score {
  display: grid;
  place-content: center;
  width: 100px;
  height: 100px;
  border: 10px solid #f8dfe2;
  border-radius: 50%;
  background: #fff;
  text-align: center;
}

.learning-history-ai-overview-score strong {
  color: var(--primary);
  font-size: 34px;
  line-height: 1;
}

.learning-history-ai-overview-score span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.learning-history-ai-overview.score-withheld .learning-history-ai-overview-score {
  border-color: #e4e7ec;
}

.learning-history-ai-overview-copy {
  min-width: 0;
}

.learning-history-ai-overview-copy h5,
.learning-history-ai-insight-grid h5 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.4;
}

.learning-history-ai-overview-copy p,
.learning-history-ai-category p,
.learning-history-ai-next-step p,
.learning-history-ai-highlight p,
.learning-history-ai-preparation p,
.learning-history-ai-insight-grid li,
.learning-history-ai-feedback-unavailable p {
  margin: 0;
  color: #344054;
  font-size: 14px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.learning-history-ai-cefr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 5px 9px;
  border: 1px solid #f3c6cb;
  border-radius: 999px;
  background: #fff;
}

.learning-history-ai-cefr span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.learning-history-ai-cefr b {
  color: var(--primary);
  font-size: 14px;
}

.learning-history-ai-evidence {
  margin-top: 8px !important;
}

.learning-history-ai-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.learning-history-ai-category {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.learning-history-ai-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.learning-history-ai-category-head strong {
  color: var(--text);
  font-size: 14px;
}

.learning-history-ai-category-head span {
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.learning-history-ai-score-bar {
  height: 6px;
  margin: 9px 0 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #f4d6d9;
}

.learning-history-ai-score-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.learning-history-ai-next-step,
.learning-history-ai-highlight,
.learning-history-ai-preparation,
.learning-history-ai-insight-grid > section,
.learning-history-ai-feedback-unavailable {
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.learning-history-ai-next-step > span,
.learning-history-ai-highlight > span,
.learning-history-ai-preparation > span {
  display: block;
  margin-bottom: 6px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .035em;
}

.learning-history-ai-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.learning-history-ai-insight-grid > section.strength {
  background: #f8fff9;
}

.learning-history-ai-insight-grid > section.focus {
  background: #fffafa;
}

.learning-history-ai-insight-grid ul {
  margin: 0;
  padding-left: 20px;
}

.learning-history-ai-insight-grid li + li {
  margin-top: 7px;
}

.learning-history-ai-preparation > div {
  display: grid;
  gap: 9px;
}

.learning-history-ai-preparation article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.learning-history-ai-preparation article > b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
}

.learning-history-ai-preparation article strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 13px;
}

.learning-history-ai-feedback-unavailable strong {
  color: var(--text);
}

.learning-history-ai-feedback-unavailable p {
  margin-top: 5px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .learning-history-ai-feedback-card {
    border-radius: 12px;
    box-shadow: none;
  }

  .learning-history-ai-feedback-heading,
  .learning-history-ai-feedback-body {
    padding: 12px 13px;
  }

  .learning-history-ai-feedback-heading {
    align-items: flex-start;
  }

  .learning-history-ai-feedback-heading h4 {
    font-size: 16px;
  }

  .learning-history-ai-overview {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
  }

  .learning-history-ai-overview-score {
    width: 70px;
    height: 70px;
    border-width: 7px;
  }

  .learning-history-ai-overview-score strong {
    font-size: 25px;
  }

  .learning-history-ai-category-grid,
  .learning-history-ai-insight-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .learning-history-ai-feedback-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .learning-history-ai-feedback-meta {
    justify-content: flex-start;
  }

  .learning-history-ai-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .learning-history-ai-overview-score {
    width: 78px;
    height: 78px;
  }
}

/* ===== 学習履歴：Day5・Day6 AIテキスト履歴 ===== */
.learning-history-ai-transcript-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 4px 12px rgba(16, 24, 40, .035);
}

.learning-history-ai-transcript-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #f9fafb;
}

.learning-history-ai-transcript-heading > div {
  min-width: 0;
}

.learning-history-ai-transcript-heading > div > span {
  display: block;
  margin-bottom: 3px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.learning-history-ai-transcript-heading h4 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.35;
}

.learning-history-ai-transcript-count {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #f3c6cb;
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.learning-history-ai-transcript {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-height: min(58vh, 520px);
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f8fafc;
}

.learning-history-ai-message {
  width: min(82%, 760px);
  max-width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  border-radius: 14px;
  color: #1d2939;
}

.learning-history-ai-message.assistant {
  align-self: flex-start;
  border: 1px solid #f1cfd2;
  border-bottom-left-radius: 4px;
  background: #fff;
}

.learning-history-ai-message.user {
  align-self: flex-end;
  border: 1px solid #f4d9dc;
  border-bottom-right-radius: 4px;
  background: #fff1f2;
}

.learning-history-ai-message-role {
  margin-bottom: 6px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}

.learning-history-ai-message-copy,
.learning-history-ai-message-copy p,
.learning-history-ai-message-translation p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: normal;
  writing-mode: horizontal-tb;
}

.learning-history-ai-message-translation {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1d5d8;
}

.learning-history-ai-message-translation span {
  display: block;
  margin-bottom: 4px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
}

.learning-history-ai-message-translation p {
  color: #475467;
  font-size: 14px;
}

.learning-history-ai-transcript-empty {
  margin: 0;
  padding: 20px 12px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .learning-history-ai-transcript-card {
    border-radius: 12px;
    box-shadow: none;
  }

  .learning-history-ai-transcript-heading {
    padding: 12px 13px;
  }

  .learning-history-ai-transcript-heading h4 {
    font-size: 16px;
  }

  .learning-history-ai-transcript {
    max-height: min(56vh, 440px);
    padding: 12px;
  }

  .learning-history-ai-message {
    width: min(92%, 680px);
    padding: 11px 13px;
  }

  .learning-history-ai-message-copy,
  .learning-history-ai-message-copy p {
    font-size: 14px;
  }
}

@media (max-width: 520px) {
  .learning-history-ai-transcript-heading {
    gap: 10px;
  }

  .learning-history-ai-transcript {
    max-height: 420px;
    gap: 10px;
    padding: 10px;
  }

  .learning-history-ai-message {
    width: 94%;
    padding: 10px 12px;
  }
}

/* ===== 課題学習マスター：重要単語・熟語のAI自動入力 ===== */
.admin-material-vocabulary-head {
  align-items: flex-start;
  gap: 16px;
}

.admin-material-vocabulary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

.admin-material-vocabulary-actions button[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-material-vocabulary-generation-status {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid #cfe8d7;
  background: #f5fbf7;
  color: #245c37;
  font-size: 13px;
  line-height: 1.6;
}

.admin-material-vocabulary-generation-status.error {
  border-color: #f1b7bb;
  background: #fff6f6;
  color: #b51924;
}

@media (max-width: 760px) {
  .admin-material-vocabulary-head {
    display: block;
  }

  .admin-material-vocabulary-actions {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .admin-material-vocabulary-actions .small-button {
    min-height: 42px;
  }
}

/* ===== Day5 card: two-part progress bar ===== */
/* 他のDayと同じ12pxメーター。途中の白い区切りだけで2部構成を示す。 */
.study-progress-track.study-day5-segmented-progress {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: 12px;
  margin: 12px 0 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #eaecf0;
}

.study-day5-progress-segment {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #eaecf0;
}

.study-day5-progress-segment.review {
  border-radius: 999px 0 0 999px;
}

.study-day5-progress-segment.confirmation {
  border-left: 2px solid #fff;
  border-radius: 0 999px 999px 0;
}

.study-day5-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: var(--day5-segment-progress, 0%);
  height: 100%;
  border-radius: 0;
  background: var(--primary);
  transition: width .2s ease;
}

.study-day5-progress-segment.review .study-day5-progress-fill {
  border-radius: 999px 0 0 999px;
}

.study-day5-progress-segment.confirmation .study-day5-progress-fill {
  border-radius: 0 999px 999px 0;
}

/* ===== 2026-07-17 課題学習：選択中Weekの記事タイトル表示 ===== */
.study-selected-week-title {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: -2px 0 14px;
  padding: 11px 14px;
  border: 1px solid #d0d5dd;
  border-left: 4px solid var(--primary);
  background: #fff;
  color: #101828;
  line-height: 1.4;
}

.study-selected-week-title > span {
  flex: 0 0 auto;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.study-selected-week-title > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-selected-week-title {
    gap: 8px;
    margin-top: 0;
    margin-bottom: 10px;
    padding: 9px 10px;
  }

  .study-selected-week-title > span {
    font-size: 10.5px;
  }

  .study-selected-week-title > strong {
    font-size: 13px;
  }
}

/* ===== 2026-07-19 メッセージ：表示中チャンネルの明確化 ===== */
.message-page-navigation {
  padding: 20px;
}

.message-page-navigation > h3 {
  margin-bottom: 4px;
}

.message-page-navigation > .muted {
  margin: 0 0 14px;
}

.message-page-navigation .message-destination-grid {
  gap: 10px;
}

button.destination-card.message-channel-card {
  position: relative;
  display: flex;
  min-height: 112px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 15px 16px 14px;
  overflow: hidden;
  border: 1px solid #d8dee8;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  text-align: left;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

button.destination-card.message-channel-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: transparent;
  content: "";
}

button.destination-card.message-channel-card:hover {
  border-color: #e9aab0;
  background: #fffafb;
  transform: translateY(-1px);
}

button.destination-card.message-channel-card:focus-visible {
  outline: 3px solid rgba(209, 19, 31, .18);
  outline-offset: 2px;
}

button.destination-card.message-channel-card.is-active {
  border-color: var(--primary);
  background: linear-gradient(135deg, #fff 0%, #fff5f6 100%);
  box-shadow: 0 0 0 2px rgba(209, 19, 31, .08), 0 6px 16px rgba(16, 24, 40, .05);
  transform: none;
}

button.destination-card.message-channel-card.is-active::before {
  background: var(--primary);
}

.message-channel-card-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.message-channel-card-title {
  color: #101828;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}

.message-channel-status {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: transparent;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.message-channel-card.is-active .message-channel-status {
  min-height: 25px;
  padding: 5px 9px;
  background: var(--primary);
  color: #fff;
}

.message-channel-card-description {
  color: #596579;
  font-size: 13px;
  line-height: 1.65;
}

.message-recipient-panel {
  max-width: 620px;
  margin-top: 14px;
  padding: 13px 14px 14px;
  border: 1px solid #e1e5eb;
  border-radius: 10px;
  background: #f8fafc;
}

.message-recipient-panel > label {
  margin: 0 0 6px;
  color: #344054;
  font-size: 13px;
}

.message-recipient-panel > select {
  margin: 0;
  background-color: #fff;
}

.message-active-context {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #e2e6ec;
  border-left: 5px solid var(--primary);
  background: linear-gradient(90deg, #fff 0%, #fffafb 100%);
  box-shadow: 0 3px 12px rgba(16, 24, 40, .035);
}

.message-active-context-badge {
  display: inline-flex;
  min-height: 27px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.message-active-context-copy {
  min-width: 0;
}

.message-active-context-copy h3,
.message-active-context-copy p {
  margin: 0;
}

.message-active-context-copy h3 {
  color: #101828;
  font-size: 16px;
  line-height: 1.45;
}

.message-active-context-copy p {
  margin-top: 2px;
  color: #667085;
  font-size: 12px;
  line-height: 1.55;
}

.message-chat-area {
  margin-top: 10px;
}

@media (max-width: 700px) {
  .message-page-navigation {
    padding: 14px;
  }

  .message-page-navigation .message-destination-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .message-page-navigation .message-destination-grid-admin {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  button.destination-card.message-channel-card {
    min-height: 76px;
    gap: 5px;
    padding: 11px 8px 10px 11px;
  }

  .message-channel-card-head {
    align-items: flex-start;
    gap: 3px;
  }

  .message-channel-card-title {
    font-size: 12.5px;
    line-height: 1.35;
  }

  .message-channel-card.is-active .message-channel-status {
    min-height: 18px;
    padding: 3px 5px;
    font-size: 9px;
  }

  .message-channel-card-description {
    display: none;
  }

  .message-recipient-panel {
    margin-top: 10px;
    padding: 10px;
  }

  .message-active-context {
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    padding: 11px 12px;
  }

  .message-active-context-badge {
    min-height: 22px;
    padding: 4px 7px;
    font-size: 9.5px;
  }

  .message-active-context-copy h3 {
    font-size: 14px;
  }

  .message-active-context-copy p {
    font-size: 11px;
  }
}

/* 生徒用モバイルナビの汎用リンク色より、外部ポリシーボタンを優先します。 */
body.student-mobile-nav-enabled a.contract-external-link {
  color: #fff;
}

/* ===== 生徒：契約手続き ===== */
.contract-procedure-page {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.contract-procedure-header {
  border-left: 4px solid var(--primary);
  background: linear-gradient(90deg, #fff 0%, #fffafb 100%);
}

.contract-step-label {
  margin: 0 0 10px;
  letter-spacing: .03em;
}

.contract-procedure-header > p {
  margin: 6px 0 0;
  line-height: 1.7;
}

.contract-account-email {
  overflow-wrap: anywhere;
}

.contract-legal-grid,
.contract-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.contract-procedure-legal-card {
  height: 100%;
}

.contract-procedure-legal-card p {
  margin: 8px 0 0;
}

.contract-consent-list {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.contract-consent-row {
  margin: 0 !important;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.contract-consent-row:hover {
  background: #fffafb;
}

.contract-consent-row input[type="checkbox"] {
  accent-color: var(--primary);
}

.contract-plan-section > h3 {
  margin-bottom: 14px;
}

.contract-plan-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.contract-plan-option:hover {
  border-color: #f3a8ae;
  background: #fffafb;
}

.contract-plan-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 4px 0 0 var(--primary);
}

.contract-plan-option input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--primary);
}

.contract-plan-option-body {
  display: block;
  min-width: 0;
  line-height: 1.6;
}

.contract-plan-title {
  display: inline-block;
  margin: 0;
  color: #101828;
  font-size: 16px;
}

.contract-plan-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 5px;
}

.contract-plan-recommended {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.contract-plan-price {
  display: block;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.contract-plan-price > span {
  margin-left: 3px;
  color: #475467;
  font-size: 12px;
  font-weight: 400;
}

.contract-plan-description {
  display: block;
}

.contract-campaign-section {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.contract-campaign-section > h3 {
  margin: 0 0 14px;
}

.contract-campaign-section > label {
  margin-top: 0;
}

.contract-code-input {
  max-width: 380px;
}

.contract-payment-note {
  margin: 10px 0 0;
  line-height: 1.65;
}

.contract-procedure-actions {
  align-items: center;
  margin-top: 16px;
}

.contract-procedure-actions .contract-primary-button {
  width: auto;
  min-width: 220px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--primary);
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.contract-procedure-actions .contract-primary-button:hover {
  border-color: var(--primary-dark);
  background: var(--primary-dark);
}

.contract-procedure-actions .contract-primary-button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.contract-procedure-actions .contract-back-button {
  width: auto;
}

.contract-procedure-page .error,
.contract-procedure-page .success,
.contract-procedure-page .warning {
  margin-top: 14px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .contract-legal-grid,
  .contract-plan-grid {
    grid-template-columns: 1fr;
  }

  .contract-procedure-page {
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .contract-plan-option {
    padding: 14px;
  }

  .contract-code-input {
    max-width: none;
  }

  .contract-procedure-actions .contract-primary-button,
  .contract-procedure-actions .contract-back-button {
    width: 100%;
    min-width: 0;
  }
}

/* ===== 講師：教材一覧 ===== */
.teacher-material-filter-card {
  display: grid;
  gap: 18px;
}

.teacher-material-filter-heading h3,
.teacher-material-filter-heading p {
  margin-top: 0;
}

.teacher-material-filter-heading p {
  margin-bottom: 0;
}

.teacher-material-copyright-notice {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid #ecd4d7;
  border-left: 4px solid var(--primary);
  background: #fff8f8;
  color: #5f2730;
  font-size: 12.5px;
  line-height: 1.65;
}

.teacher-material-copyright-notice b {
  color: #981b27;
  font-size: 13px;
}

.teacher-material-empty-profile .teacher-material-copyright-notice {
  margin: 12px 0 16px;
}

.teacher-material-filter-grid {
  margin: 0;
}

.teacher-material-filter-grid > div {
  min-width: 0;
}

.teacher-material-filter-grid select {
  width: 100%;
}

.teacher-material-theme-selector {
  display: grid;
  gap: 9px;
}

.teacher-material-theme-selector h4 {
  margin: 0;
  color: #344054;
  font-size: 13px;
}

.teacher-material-theme-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.teacher-material-theme-button {
  width: auto;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #d9dee7;
  background: #fff;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.teacher-material-theme-button:hover,
.teacher-material-theme-button.active {
  border-color: var(--primary);
  background: #fff1f2;
  color: var(--primary);
}

.teacher-material-selected-theme {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.teacher-material-selected-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 2px;
}

.teacher-material-selected-heading > div {
  min-width: 0;
}

.teacher-material-selected-heading h3 {
  margin: 8px 0 0;
  color: #101828;
  overflow-wrap: anywhere;
}

.teacher-material-selected-heading > small {
  flex: 0 0 auto;
  color: #667085;
  font-weight: 700;
}

.teacher-material-week-list {
  display: grid;
  gap: 16px;
}

.teacher-material-week {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.teacher-material-week-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: #fafafa;
}

.teacher-material-week-heading > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.teacher-material-week-heading h4 {
  min-width: 0;
  margin: 0;
  color: #101828;
  font-size: 17px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.teacher-material-day-list {
  display: grid;
}

.teacher-material-day {
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

.teacher-material-day:last-child {
  border-bottom: 0;
}

.teacher-material-day > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  color: #344054;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
}

.teacher-material-day > summary::-webkit-details-marker {
  display: none;
}

.teacher-material-day > summary::after {
  content: "+";
  order: 3;
  color: var(--primary);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.teacher-material-day[open] > summary::after {
  content: "−";
}

.teacher-material-day > summary small {
  margin-left: auto;
  color: #667085;
  font-size: 11.5px;
  font-weight: 700;
}

.teacher-material-day-content {
  display: grid;
  gap: 18px;
  padding: 4px 18px 20px;
}

.teacher-material-article h6,
.teacher-material-questions h6 {
  margin: 0 0 9px;
  color: #101828;
  font-size: 14px;
}

.teacher-material-article-body {
  padding: 16px;
  border: 1px solid #e4e7ec;
  background: #fff;
  color: #1d2939;
  font-size: 14px;
  line-height: 1.85;
}

.teacher-material-questions {
  padding: 15px 16px;
  border: 1px solid #ead8da;
  background: #fffafa;
}

.teacher-material-questions ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 24px;
}

.teacher-material-questions li {
  padding-left: 3px;
  color: #344054;
}

.teacher-material-question-meta {
  margin-bottom: 3px;
  color: #8d2731;
  font-size: 11px;
  font-weight: 800;
}

.teacher-material-question-text {
  color: #1d2939;
  font-size: 14px;
  line-height: 1.7;
}

.teacher-material-no-theme {
  margin-top: 18px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .teacher-material-filter-card {
    gap: 14px;
  }

  .teacher-material-copyright-notice {
    padding: 11px 12px;
    font-size: 12px;
  }

  .teacher-material-theme-buttons {
    display: grid;
    grid-template-columns: 1fr;
  }

  .teacher-material-theme-button {
    width: 100%;
    text-align: left;
  }

  .teacher-material-selected-heading {
    display: grid;
    align-items: start;
    gap: 7px;
  }

  .teacher-material-week-heading {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 13px 14px;
  }

  .teacher-material-week-heading > span {
    justify-self: start;
  }

  .teacher-material-week-heading h4 {
    font-size: 15px;
  }

  .teacher-material-day > summary {
    padding: 12px 14px;
  }

  .teacher-material-day-content {
    padding: 3px 14px 16px;
  }

  .teacher-material-article-body,
  .teacher-material-questions {
    padding: 13px;
  }
}

/* ===== 講師：教材一覧（既存ページ共通デザインへの統一） ===== */
.teacher-material-copyright-notice.notice-soft {
  display: grid;
  gap: 3px;
  margin-top: 0;
  padding: 10px 12px;
  border: 1px solid #fed7aa;
  border-left: 1px solid #fed7aa;
  border-radius: 12px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 13px;
  line-height: 1.6;
}

.teacher-material-copyright-notice.notice-soft b {
  color: inherit;
  font-size: inherit;
}

.teacher-material-theme-buttons {
  margin: 0;
}

.teacher-material-theme-button,
.teacher-material-theme-button:hover,
.teacher-material-theme-button.active {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
}

.teacher-material-week {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: 0 8px 20px rgba(16, 24, 40, .04);
}

.teacher-material-week-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 13px 18px;
  background: #fafafa;
  color: #101828;
  cursor: pointer;
  list-style: none;
}

.teacher-material-week-summary::-webkit-details-marker {
  display: none;
}

.teacher-material-week-summary h4 {
  min-width: 0;
  margin: 0;
  color: #101828;
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.teacher-material-week-toggle {
  width: 10px;
  height: 10px;
  border-right: 2px solid #667085;
  border-bottom: 2px solid #667085;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}

.teacher-material-week[open] .teacher-material-week-toggle {
  transform: rotate(225deg) translate(-1px, -1px);
}

.teacher-material-week-content {
  display: grid;
  gap: 18px;
  padding: 18px;
  border-top: 1px solid var(--line);
}

.teacher-material-article h5 {
  margin: 0 0 9px;
  color: #101828;
  font-size: 14px;
}

.teacher-material-article-body {
  border-color: var(--line);
  background: var(--panel);
}

.teacher-material-question-days {
  display: grid;
  gap: 12px;
}

.teacher-material-question-day.subtle-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px dashed var(--line);
  background: #fafafa;
}

.teacher-material-question-day > h5 {
  margin: 0;
}

.teacher-material-stage-list {
  display: grid;
  gap: 10px;
}

.teacher-material-stage-group {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.teacher-material-stage-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.teacher-material-stage-heading > span {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  font-size: 11px;
  font-weight: 800;
}

.teacher-material-stage-heading h6 {
  min-width: 0;
  margin: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.teacher-material-stage-group ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 0;
  list-style: none;
  color: #1d2939;
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .teacher-material-week-summary {
    grid-template-columns: auto minmax(0, 1fr) 20px;
    gap: 8px;
    min-height: 54px;
    padding: 11px 13px;
  }

  .teacher-material-week-summary h4 {
    font-size: 14px;
  }

  .teacher-material-week-content {
    gap: 14px;
    padding: 13px;
  }

  .teacher-material-question-day.subtle-card,
  .teacher-material-stage-group {
    padding: 11px;
  }

  .teacher-material-stage-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}


/* ===== 記事文章作成プロンプト：階層タブ・折りたたみ編集 ===== */
.admin-article-prompt-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}

.admin-article-prompt-intro h2 {
  margin: 10px 0 8px;
}

.admin-article-prompt-intro p {
  max-width: 850px;
  margin: 0;
  line-height: 1.75;
}

.admin-article-prompt-status-card {
  flex: 0 0 205px;
  display: grid;
  justify-items: end;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #e4e7ec;
  background: #f9fafb;
  text-align: right;
}

.admin-article-prompt-status-card > .pill {
  margin-bottom: 5px;
}

.admin-article-prompt-status-card > span:not(.pill),
.admin-article-prompt-status-card > small {
  color: #667085;
  font-size: 12px;
}

.admin-article-prompt-hierarchy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px 18px;
}

.admin-article-prompt-hierarchy > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 2px 9px;
  min-width: 0;
}

.admin-article-prompt-hierarchy > div > span {
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.admin-article-prompt-hierarchy b,
.admin-article-prompt-hierarchy small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-article-prompt-hierarchy small {
  color: #667085;
  font-size: 11px;
}

.admin-article-prompt-hierarchy > i {
  color: #98a2b3;
  font-style: normal;
  font-weight: 800;
}

.admin-article-prompt-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.admin-article-prompt-tab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #344054;
  text-align: left;
}

.admin-article-prompt-tab:hover,
.admin-article-prompt-tab:focus-visible {
  border-color: #e31e2f;
  background: #fff7f8;
  color: #101828;
}

.admin-article-prompt-tab.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.admin-article-prompt-tab > span {
  font-size: 15px;
  font-weight: 800;
}

.admin-article-prompt-tab > small {
  grid-column: 1;
  color: #667085;
  font-size: 11px;
  font-weight: 600;
}

.admin-article-prompt-tab.active > small {
  color: rgba(255, 255, 255, .82);
}

.admin-article-prompt-tab > b {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.admin-article-prompt-tab.active > b {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.admin-article-prompt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 10px 14px;
}

.admin-article-prompt-toolbar > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.admin-article-prompt-toolbar > div:last-child {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.admin-article-prompt-toolbar button.compact {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 12px;
}

.admin-article-prompt-panel[hidden] {
  display: none !important;
}

.admin-article-prompt-panel {
  display: grid;
  gap: 10px;
}

.admin-article-prompt-editor {
  overflow: hidden;
  border: 1px solid #d0d5dd;
  background: #fff;
}

.admin-article-prompt-editor[open] {
  border-color: #e6a8ae;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .06);
}

.admin-article-prompt-editor > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
  padding: 13px 15px;
  background: #fff;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.admin-article-prompt-editor > summary::-webkit-details-marker {
  display: none;
}

.admin-article-prompt-editor[open] > summary {
  border-bottom: 1px solid #eadde0;
  background: #fffafb;
}

.admin-article-prompt-summary-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.admin-article-prompt-summary-main > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-article-prompt-summary-main b {
  color: #101828;
  font-size: 15px;
}

.admin-article-prompt-summary-main small {
  color: #667085;
  font-size: 11.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-article-prompt-chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid #667085;
  border-bottom: 2px solid #667085;
  transform: rotate(-45deg);
  transition: transform .16s ease;
}

.admin-article-prompt-editor[open] .admin-article-prompt-chevron {
  transform: rotate(45deg) translate(-2px, -2px);
}

.admin-article-prompt-summary-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex: 0 0 auto;
}

.admin-article-prompt-count {
  min-width: 100px;
  color: #667085;
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-article-prompt-editor-body {
  padding: 14px;
}

.admin-article-prompt-textarea {
  width: 100%;
  min-height: 300px;
  padding: 16px;
  border: 1px solid #d0d5dd;
  background: #fcfcfd;
  color: #101828;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.65;
  resize: vertical;
  tab-size: 2;
}

.admin-article-prompt-textarea:focus {
  border-color: #e31e2f;
  background: #fff;
  outline: 3px solid rgba(227, 30, 47, .1);
}

.admin-article-prompt-result {
  margin-top: 14px;
}

.admin-article-prompt-actions {
  position: sticky;
  bottom: 12px;
  z-index: 15;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 15px;
  border-color: #eadde0;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .13);
  backdrop-filter: blur(10px);
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .admin-article-prompt-intro {
    display: grid;
  }

  .admin-article-prompt-status-card {
    width: 100%;
    justify-items: start;
    text-align: left;
  }

  .admin-article-prompt-hierarchy {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .admin-article-prompt-hierarchy > i {
    justify-self: center;
    transform: rotate(90deg);
  }

  .admin-article-prompt-tabs {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 3px;
    scrollbar-width: thin;
  }

  .admin-article-prompt-tab {
    flex: 0 0 min(250px, 78vw);
  }

  .admin-article-prompt-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-article-prompt-toolbar > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .admin-article-prompt-toolbar > div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .admin-article-prompt-toolbar button.compact {
    width: 100% !important;
  }

  .admin-article-prompt-editor > summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .admin-article-prompt-summary-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-left: 21px;
  }

  .admin-article-prompt-count {
    min-width: 0;
    text-align: left;
  }

  .admin-article-prompt-textarea {
    min-height: 250px;
    font-size: 12px;
  }

  .admin-article-prompt-actions {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-article-prompt-actions button {
    width: 100% !important;
  }
}

/* ===== 2026-07-18 教材管理：Week単位のAI教材自動入力 ===== */
.admin-material-ai-generation-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 170px) auto;
  align-items: end;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #f2b7bc;
  background: #fff8f8;
}

.admin-material-ai-generation-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-material-ai-generation-copy > b {
  color: var(--primary);
  font-size: 15px;
}

.admin-material-ai-generation-copy > span {
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}

.admin-material-ai-generation-copy > small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.admin-material-ai-generation-week {
  display: grid !important;
  gap: 5px;
  min-width: 0;
  margin: 0 !important;
}

.admin-material-ai-generation-week > span {
  font-size: 12px;
  font-weight: 800;
}

.admin-material-ai-generation-week select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

.admin-material-ai-generation-actions {
  display: grid;
  gap: 8px;
  min-width: 170px;
}

.admin-material-ai-generation-button,
.admin-material-audio-regeneration-button {
  width: 100%;
  min-width: 170px;
  min-height: 44px;
  white-space: nowrap;
}

.admin-material-audio-regeneration-button {
  border-color: #c9d2df;
  background: #ffffff;
}

.admin-material-ai-generation-status {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #b7dfc6;
  background: #f3fbf6;
  color: #17663a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.admin-material-ai-generation-status.error {
  border-color: #f1b4b8;
  background: #fff5f5;
  color: #b4232d;
}

@media (max-width: 900px) {
  .admin-material-ai-generation-panel {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 160px);
  }

  .admin-material-ai-generation-copy {
    grid-column: 1 / -1;
  }

  .admin-material-ai-generation-actions {
    width: 100%;
    min-width: 0;
  }

  .admin-material-ai-generation-button,
  .admin-material-audio-regeneration-button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .admin-material-ai-generation-panel {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .admin-material-ai-generation-week,
  .admin-material-ai-generation-actions,
  .admin-material-ai-generation-button,
  .admin-material-audio-regeneration-button {
    width: 100% !important;
  }
}


/* ===== 記事文章作成プロンプト：ElevenLabs Voice ID設定 ===== */
.admin-article-voice-settings {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border-color: #d8dee8;
  background: #fbfcfe;
}

.admin-article-voice-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-article-voice-settings-head > div:first-child {
  min-width: 0;
}

.admin-article-voice-settings h3 {
  margin: 8px 0 5px;
  color: #101828;
}

.admin-article-voice-settings p {
  max-width: 900px;
  margin: 0;
  color: #475467;
  font-size: 12.5px;
  line-height: 1.65;
}

.admin-article-voice-settings-status {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 6px;
  color: #475467;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.admin-article-voice-settings > label {
  margin: 2px 0 0;
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.admin-article-voice-id-input {
  width: 100%;
  min-height: 126px;
  padding: 12px 14px;
  border: 1px solid #cfd6e2;
  background: #fff;
  color: #101828;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}

.admin-article-voice-id-input:focus {
  border-color: var(--primary);
  outline: 3px solid rgba(227, 30, 47, .1);
}

.admin-article-voice-settings > small {
  line-height: 1.55;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .admin-article-voice-settings {
    padding: 14px;
  }

  .admin-article-voice-settings-head {
    display: grid;
    gap: 10px;
  }

  .admin-article-voice-settings-status {
    justify-items: start;
  }

  .admin-article-voice-id-input {
    min-height: 150px;
    font-size: 12px;
  }
}

/* ===== 課題学習：選択中Weekの記事タイトルカード再設計 ===== */
.study-selected-week-title {
  position: relative;
  gap: 14px;
  margin: 0 0 16px;
  padding: 13px 16px;
  border: 1px solid #e1e5eb;
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  background: linear-gradient(90deg, #ffffff 0%, #fffafb 100%);
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.045);
}

.study-selected-week-title > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 3px 9px;
  border: 1px solid rgba(209, 19, 31, 0.14);
  border-radius: 999px;
  background: #fff1f2;
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.study-selected-week-title > strong {
  flex: 1 1 auto;
  min-width: 0;
  color: #101828;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-selected-week-title {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 12px;
    padding: 12px 13px 13px;
    border-radius: 10px;
  }

  .study-selected-week-title > span {
    align-self: flex-start;
    min-height: 23px;
    padding: 2px 8px;
    font-size: 10.5px;
    line-height: 1.25;
  }

  .study-selected-week-title > strong {
    display: block;
    width: 100%;
    overflow: visible;
    font-size: 14px;
    line-height: 1.5;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ===== 学習計画 v3：選択式評価メーター・15分枠・吹き出し編集 ===== */
.learning-plan-metric-empty {
  padding: 15px 10px;
  border: 1px dashed #d8dee8;
  border-radius: 10px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.learning-plan-page .learning-plan-metric-row {
  display: block;
  min-height: 0;
  padding: 11px;
}

.learning-plan-metric-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.learning-plan-metric-row-head strong {
  color: #344054;
  font-size: 12px;
}

.learning-plan-metric-row-head button {
  flex: 0 0 27px;
  width: 27px;
  min-width: 27px;
  min-height: 27px;
  padding: 0;
  border-radius: 8px;
}

.learning-plan-achievement-meter {
  display: block;
  margin: 0;
}

.learning-plan-achievement-meter > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: #667085;
  font-size: 10px;
  font-weight: 700;
}

.learning-plan-achievement-meter b,
.learning-plan-focus-meter b {
  color: var(--primary);
  font-size: 10px;
}

.learning-plan-achievement-meter input[type="range"] {
  width: 100%;
  height: 19px;
  min-height: 19px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  outline: none;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.learning-plan-achievement-meter input[type="range"]::-webkit-slider-runnable-track {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary) 0 var(--meter-value), #e5e9ef var(--meter-value) 100%);
}

.learning-plan-achievement-meter input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -4.5px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 1px 5px rgba(16, 24, 40, .28);
  appearance: none;
}

.learning-plan-achievement-meter input[type="range"]::-moz-range-track {
  height: 9px;
  border-radius: 999px;
  background: #e5e9ef;
}

.learning-plan-achievement-meter input[type="range"]::-moz-range-progress {
  height: 9px;
  border-radius: 999px;
  background: var(--primary);
}

.learning-plan-achievement-meter input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 1px 5px rgba(16, 24, 40, .28);
}

.learning-plan-page .learning-plan-metric-row > .learning-plan-focus-meter {
  display: grid;
  grid-template-columns: max-content 48px repeat(5, minmax(24px, 1fr)) max-content max-content;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.learning-plan-focus-meter .learning-plan-focus-title,
.learning-plan-focus-meter > b {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
}

.learning-plan-focus-meter > b {
  width: 48px;
  text-align: left;
}

.learning-plan-focus-meter button {
  min-width: 0;
  min-height: 20px;
  padding: 0;
  border-radius: 5px;
  background: #e7ebf0;
}

.learning-plan-focus-meter button i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.learning-plan-focus-meter button.active {
  background: linear-gradient(90deg, #f8a6ad, var(--primary));
}

.learning-plan-focus-meter small {
  align-self: center;
  color: #98a2b3;
  font-size: 9px;
  line-height: 20px;
}

.learning-plan-focus-meter small:last-child {
  text-align: right;
}

.learning-plan-metric-picker {
  position: relative;
  z-index: 3;
  margin-top: 9px;
  padding: 12px;
  border: 1px solid #fda4af;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .13);
}

.learning-plan-metric-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.learning-plan-metric-picker-head strong {
  font-size: 12px;
}

.learning-plan-metric-picker-head button {
  min-height: 28px;
  padding: 2px 7px;
}

.learning-plan-metric-option-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  max-height: 260px;
  overflow-y: auto;
}

.learning-plan-metric-option-list label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid #e7e9ee;
  border-radius: 8px;
  background: #fbfcfe;
  cursor: pointer;
}

.learning-plan-metric-option-list input {
  flex: 0 0 16px;
  width: 16px;
  min-height: 16px;
  margin: 0;
}

.learning-plan-metric-option-list span {
  min-width: 0;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.learning-plan-metric-picker .actions {
  margin-top: 10px;
}

.learning-plan-metric-picker .actions button {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 11px;
}

.learning-plan-metric-view-list > div {
  grid-template-columns: minmax(0, 1fr) minmax(110px, 42%);
}

.learning-plan-metric-view-meters {
  display: grid;
  gap: 4px;
}

.learning-plan-metric-view-meters i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ebf0;
}

.learning-plan-metric-view-meters i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.learning-plan-metric-view-meters small {
  color: #667085;
  font-size: 9px;
  text-align: right;
}

.learning-plan-calendar-grid {
  /* 0:00〜24:00を10分単位（144行）で固定。
     明示行数を超えたセルが内容依存のauto行になることを防ぐ。 */
  grid-template-rows: 45px repeat(144, 18px);
  grid-auto-rows: 18px;
  align-content: start;
}

.learning-plan-calendar-time,
.learning-plan-calendar-cell {
  min-height: 0;
  max-height: 18px;
  box-sizing: border-box;
  overflow: hidden;
}

.learning-plan-calendar-block {
  gap: 1px;
  margin: 1px 2px;
  padding: 2px 4px;
}

.learning-plan-calendar-block .learning-plan-calendar-block-skills {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: normal;
  scrollbar-width: thin;
}

.learning-plan-calendar-block .learning-plan-calendar-block-skills strong {
  flex: 0 0 auto;
  width: 100%;
  line-height: 1.15;
}

.learning-plan-calendar-block.has-multiple .learning-plan-calendar-block-time {
  display: none;
}

.learning-plan-block-editor.is-floating {
  position: fixed;
  z-index: 1200;
  width: min(520px, calc(100vw - 24px));
  max-height: min(650px, calc(100dvh - 24px));
  margin: 0;
  overflow-y: auto;
  border-color: #f58b95;
  background: #fff;
  box-shadow: 0 18px 55px rgba(16, 24, 40, .28);
}

.learning-plan-block-editor.is-floating::before {
  position: absolute;
  top: -8px;
  left: 22px;
  width: 15px;
  height: 15px;
  border-top: 1px solid #f58b95;
  border-left: 1px solid #f58b95;
  background: #fff;
  content: "";
  transform: rotate(45deg);
}

.learning-plan-block-editor-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.learning-plan-block-items-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 13px 0 7px;
}

.learning-plan-block-items-head strong {
  font-size: 12px;
}

.learning-plan-block-items-head span {
  color: var(--muted);
  font-size: 9px;
}

.learning-plan-block-items {
  display: grid;
  gap: 7px;
}

.learning-plan-block-item-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 7px;
}

.learning-plan-block-item-row select,
.learning-plan-block-item-row input {
  min-width: 0;
  min-height: 36px;
  padding: 7px 8px;
  border-radius: 9px;
  font-size: 11px;
}

.learning-plan-block-item-row button {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 8px;
}

.learning-plan-add-block-item {
  width: 100%;
  min-height: 34px;
  margin-top: 8px;
  padding: 6px 9px;
  font-size: 11px;
}

@media (max-width: 640px) {
  .learning-plan-metric-option-list {
    grid-template-columns: 1fr;
  }

  .learning-plan-block-editor.is-floating {
    right: 10px !important;
    bottom: calc(82px + env(safe-area-inset-bottom));
    left: 10px !important;
    top: auto !important;
    width: auto;
    max-height: min(70dvh, 620px);
    border-radius: 16px;
  }

  .learning-plan-block-editor.is-floating::before {
    display: none;
  }

  .learning-plan-block-item-row {
    grid-template-columns: 105px minmax(0, 1fr) 30px;
  }
}

/* ===== 学習計画 v4：文字サイズの最適化 ===== */
.learning-plan-page {
  font-size: 14px;
  line-height: 1.55;
}

.learning-plan-page .learning-plan-section-title h3 {
  font-size: 18px;
  line-height: 1.4;
}

.learning-plan-page .learning-plan-section-title > p,
.learning-plan-page .learning-plan-student-selector p {
  font-size: 13px;
}

.learning-plan-page .learning-plan-field > span,
.learning-plan-page .learning-plan-student-selector label > span {
  font-size: 13px;
  font-weight: 700;
}

.learning-plan-page .learning-plan-field input,
.learning-plan-page .learning-plan-field textarea,
.learning-plan-page .learning-plan-student-selector select {
  font-size: 14px;
}

.learning-plan-page .learning-plan-skill-label strong {
  font-size: 16px;
}

.learning-plan-page .learning-plan-skill-label > span {
  font-size: 13px;
}

.learning-plan-page .learning-plan-metric-row-head strong,
.learning-plan-page .learning-plan-metric-view-list > div > span {
  font-size: 13px;
  line-height: 1.45;
}

.learning-plan-page .learning-plan-achievement-meter > span,
.learning-plan-page .learning-plan-focus-meter > span,
.learning-plan-page .learning-plan-achievement-meter b,
.learning-plan-page .learning-plan-focus-meter b {
  font-size: 12px;
}

.learning-plan-page .learning-plan-metric-picker-head strong {
  font-size: 14px;
}

.learning-plan-page .learning-plan-metric-option-list span,
.learning-plan-page .learning-plan-metric-picker .actions button,
.learning-plan-page .learning-plan-add-metric {
  font-size: 12px;
}

.learning-plan-page .learning-plan-calendar-guide > span {
  font-size: 11px;
}

.learning-plan-page .learning-plan-calendar-guide p {
  font-size: 13px;
}

.learning-plan-page .learning-plan-copy-panel > div:first-child strong {
  font-size: 14px;
}

.learning-plan-page .learning-plan-copy-panel > div:first-child span {
  font-size: 12px;
  line-height: 1.5;
}

.learning-plan-page .learning-plan-copy-days span,
.learning-plan-page .learning-plan-copy-panel button {
  font-size: 12px;
}

.learning-plan-page .learning-plan-block-editor-head span {
  font-size: 14px;
}

.learning-plan-page .learning-plan-block-editor-head strong,
.learning-plan-page .learning-plan-block-items-head strong {
  font-size: 13px;
}

.learning-plan-page .learning-plan-block-items-head span {
  font-size: 11px;
}

.learning-plan-page .learning-plan-block-item-row select,
.learning-plan-page .learning-plan-block-item-row input,
.learning-plan-page .learning-plan-add-block-item,
.learning-plan-page .learning-plan-block-editor .actions button {
  font-size: 13px;
}

.learning-plan-page .learning-plan-day-totals span,
.learning-plan-page .learning-plan-metric-view-meters small,
.learning-plan-page .learning-plan-save-bar span {
  font-size: 11px;
}

.learning-plan-page .learning-plan-day-totals strong,
.learning-plan-page .learning-plan-week-total span {
  font-size: 13px;
}

@media (max-width: 640px) {
  .learning-plan-page {
    font-size: 13px;
  }

  .learning-plan-page .learning-plan-section-title h3 {
    font-size: 16px;
  }

  .learning-plan-page .learning-plan-section-title > p {
    font-size: 12px;
  }
}

/* ===== 学習計画 v9：CEFR 12段階・コンパクトメーター・レスポンシブ ===== */
.learning-plan-page,
.learning-plan-page > *,
.learning-plan-page .learning-plan-skill-card,
.learning-plan-page .learning-plan-metric-row {
  min-width: 0;
  max-width: 100%;
}

.learning-plan-achievement-meter .learning-plan-cefr-scale {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 0;
  margin-top: 1px;
  color: #7b8494;
  font-weight: 700;
}

.learning-plan-achievement-meter .learning-plan-cefr-scale small {
  min-width: 0;
  font-size: 7px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.learning-plan-page .learning-plan-metric-row > .learning-plan-focus-meter {
  grid-template-columns: max-content 48px auto max-content max-content;
  justify-content: start;
  column-gap: 4px;
  row-gap: 3px;
}

.learning-plan-focus-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 176px;
}

.learning-plan-focus-steps button {
  flex: 0 0 32px;
  width: 32px;
}

.learning-plan-metric-view-meters {
  grid-template-columns: auto minmax(72px, 1fr);
  align-items: center;
  column-gap: 8px;
}

.learning-plan-metric-view-meters > strong {
  grid-row: 1 / span 2;
  color: var(--primary);
  font-size: 15px;
  white-space: nowrap;
}

.learning-plan-metric-view-meters > i,
.learning-plan-metric-view-meters > small {
  grid-column: 2;
}

.learning-plan-page .learning-plan-calendar-scroll,
.learning-plan-page .learning-plan-chart-shell,
.learning-plan-page .table-wrap {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 920px) {
  .learning-plan-page .learning-plan-skill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learning-plan-page .learning-plan-copy-panel {
    grid-template-columns: 1fr;
  }

  .learning-plan-page .learning-plan-copy-days {
    flex-wrap: wrap;
  }

  .learning-plan-page .learning-plan-copy-panel button {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .learning-plan-page .learning-plan-skill-grid,
  .learning-plan-page .learning-plan-summary-grid,
  .learning-plan-page .learning-plan-form-grid,
  .learning-plan-page .learning-plan-view-details {
    grid-template-columns: 1fr;
  }

  .learning-plan-page .learning-plan-section-title > p {
    width: 100%;
    max-width: none;
    margin-left: 0;
    text-align: left;
  }

  .learning-plan-page .learning-plan-field.wide,
  .learning-plan-page .learning-plan-view-details > div {
    grid-column: auto;
  }

  .learning-plan-page .learning-plan-activity-week-controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .learning-plan-page .learning-plan-activity-week-controls .ghost {
    grid-column: 1 / -1;
    width: 100%;
  }

  .learning-plan-page .learning-plan-activity-week-controls strong {
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .learning-plan-page .learning-plan-overview,
  .learning-plan-page .learning-plan-section,
  .learning-plan-page .learning-plan-student-selector {
    padding: 12px;
  }

  .learning-plan-page .learning-plan-metric-row {
    padding: 10px 9px;
  }

  .learning-plan-page .learning-plan-metric-row > .learning-plan-focus-meter {
    grid-template-columns: max-content 44px minmax(0, 1fr) max-content max-content;
  }

  .learning-plan-focus-steps {
    width: 100%;
    gap: 3px;
  }

  .learning-plan-focus-steps button {
    flex: 1 1 0;
    width: auto;
    min-width: 18px;
  }

  .learning-plan-achievement-meter .learning-plan-cefr-scale small {
    font-size: 6px;
    letter-spacing: -.04em;
  }

  .learning-plan-page .learning-plan-day-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learning-plan-page .learning-plan-activity-legend {
    align-items: stretch;
    flex-direction: column;
  }

  .learning-plan-page .learning-plan-activity-legend > span {
    justify-content: space-between;
  }
}

/* 担当講師・管理者専用の生徒メモ */
.student-private-note-page {
  width: min(100%, 920px);
  margin: 0 auto;
}

.student-private-note-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.student-private-note-header-card h3 {
  margin-bottom: 6px;
}

.student-private-note-student {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.student-private-note-editor-card {
  margin-top: 16px;
}

.student-private-note-privacy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(200, 22, 29, 0.28);
  border-radius: 12px;
  background: rgba(200, 22, 29, 0.055);
  line-height: 1.55;
}

.student-private-note-privacy b {
  color: #b31319;
}

.student-private-note-field {
  display: grid;
  gap: 8px;
  font-weight: 700;
}

.student-private-note-field textarea {
  width: 100%;
  min-height: 360px;
  padding: 14px 16px;
  line-height: 1.75;
  font-weight: 400;
  resize: vertical;
}

.student-private-note-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--muted, #667085);
  font-size: 0.88rem;
}

.student-private-note-actions {
  margin-top: 16px;
}

@media (max-width: 720px) {
  .student-private-note-header-card {
    align-items: stretch;
    flex-direction: column;
  }

  .student-private-note-header-card > button {
    width: 100%;
  }

  .student-private-note-field textarea {
    min-height: 300px;
  }

  .student-private-note-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .student-private-note-actions button {
    width: 100%;
  }
}

/* 管理者・報酬管理：担当月の手動変更 */
.teacher-reward-month-cell {
  min-width: 150px;
}
.teacher-reward-month-editor {
  display: grid;
  gap: 6px;
  align-items: start;
}
.teacher-reward-month-input {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.teacher-reward-month-input input {
  width: 70px;
  min-width: 70px;
  padding: 8px 10px;
}
.teacher-reward-month-editor small.manual {
  color: #c8161d;
  font-weight: 700;
}
.teacher-reward-month-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.teacher-reward-month-actions button {
  min-height: 34px;
  padding: 7px 10px;
}
.teacher-reward-month-actions .text-button {
  background: transparent;
  border: 0;
  color: #666;
  text-decoration: underline;
  box-shadow: none;
}
@media (max-width: 720px) {
  .teacher-reward-month-cell {
    min-width: 138px;
  }
}

/* ===== 学習計画：4技能の注力分野・現在の到達度 元デザイン復元 ===== */
.learning-plan-overall-can-do {
  margin: 9px 0 0;
  color: #475467;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.65;
}

.learning-plan-page .learning-plan-overall-line {
  align-items: flex-start;
}

.learning-plan-overall-copy {
  min-width: 0;
}

.learning-plan-overall-copy p {
  margin: 5px 0 0;
  color: #667085;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
}

.learning-plan-page .learning-plan-overall-line strong {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 19px;
  white-space: nowrap;
}

.learning-plan-page,
.learning-plan-page > *,
.learning-plan-page .learning-plan-skill-card,
.learning-plan-page .learning-plan-metric-row {
  min-width: 0;
  max-width: 100%;
}

.learning-plan-page .learning-plan-skill-card {
  position: relative;
  overflow: visible;
}

.learning-plan-page .learning-plan-skill-label {
  min-height: 48px;
  margin: -4px -4px 12px;
  padding: 10px 12px;
  border: 1px solid #f2c7cb;
  border-radius: 11px;
  background: linear-gradient(135deg, #fff5f6 0%, #ffffff 82%);
}

.learning-plan-page .learning-plan-skill-label strong {
  color: #172033;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .015em;
}

.learning-plan-page .learning-plan-skill-label > span {
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #f2c7cb;
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}

.learning-plan-metric-row.is-required {
  border-color: #d7dde7;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

.learning-plan-required-metric-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 25px;
  padding: 3px 8px;
  border: 1px solid #d8dee8;
  border-radius: 999px;
  background: #eef2f6;
  color: #475467;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.learning-plan-achievement-meter {
  position: relative;
}

.learning-plan-metric-row.is-guide-open {
  position: relative;
  z-index: 30;
}

.learning-plan-level-guide {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: block;
  width: min(390px, 100%);
  margin-inline: auto;
  padding: 10px 12px;
  border: 1px solid #f3a1a8;
  border-radius: 11px;
  background: #fff;
  color: #344054;
  box-shadow: 0 12px 30px rgba(16, 24, 40, .18);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity .14s ease, transform .14s ease;
}

.learning-plan-level-guide::before,
.learning-plan-level-guide::after {
  position: absolute;
  left: clamp(12px, var(--guide-position, 50%), calc(100% - 12px));
  width: 0;
  height: 0;
  content: "";
  transform: translateX(-50%);
}

.learning-plan-level-guide::before {
  bottom: -9px;
  border-top: 9px solid #f3a1a8;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.learning-plan-level-guide::after {
  bottom: -7px;
  border-top: 8px solid #fff;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}

.learning-plan-level-guide.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.learning-plan-level-guide > strong {
  display: block;
  margin-bottom: 3px;
  color: var(--primary);
  font-size: 12px;
  line-height: 1.4;
}

.learning-plan-level-guide > span {
  display: block;
}

.learning-plan-achievement-meter .learning-plan-cefr-scale {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 0;
  margin-top: 1px;
  color: #7b8494;
  font-weight: 700;
}

.learning-plan-achievement-meter .learning-plan-cefr-scale small {
  min-width: 0;
  font-size: 7px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.learning-plan-page .learning-plan-metric-row > .learning-plan-focus-meter {
  grid-template-columns: max-content 48px auto max-content max-content;
  justify-content: start;
  column-gap: 4px;
  row-gap: 3px;
}

.learning-plan-focus-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 176px;
}

.learning-plan-focus-steps button {
  flex: 0 0 32px;
  width: 32px;
}

.learning-plan-metric-view-meters {
  grid-template-columns: auto minmax(72px, 1fr);
  align-items: center;
  column-gap: 8px;
}

.learning-plan-metric-view-meters > strong {
  grid-row: 1 / span 2;
  color: var(--primary);
  font-size: 15px;
  white-space: nowrap;
}

.learning-plan-metric-view-meters > i,
.learning-plan-metric-view-meters > small {
  grid-column: 2;
}

.learning-plan-metric-view-row {
  position: relative;
  cursor: help;
  outline: none;
}

.learning-plan-metric-view-row:focus-visible {
  border-color: #e88891;
  box-shadow: 0 0 0 3px rgba(209, 19, 31, .12);
}

.learning-plan-metric-view-guide {
  position: absolute;
  right: 8px;
  bottom: calc(100% + 8px);
  left: 8px;
  z-index: 80;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #efa1a8;
  border-radius: 11px;
  background: #fff;
  color: #344054;
  box-shadow: 0 14px 34px rgba(16, 24, 40, .2);
  font-size: 11px;
  line-height: 1.55;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity .14s ease, transform .14s ease;
}

.learning-plan-metric-view-guide::after {
  position: absolute;
  bottom: -7px;
  left: 22px;
  width: 12px;
  height: 12px;
  border-right: 1px solid #efa1a8;
  border-bottom: 1px solid #efa1a8;
  background: #fff;
  content: "";
  transform: rotate(45deg);
}

.learning-plan-metric-view-guide > strong {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.learning-plan-metric-view-row:hover .learning-plan-metric-view-guide,
.learning-plan-metric-view-row:focus .learning-plan-metric-view-guide,
.learning-plan-metric-view-row:focus-within .learning-plan-metric-view-guide {
  opacity: 1;
  transform: translateY(0);
}

.learning-plan-metric-view-row:hover,
.learning-plan-metric-view-row:focus,
.learning-plan-metric-view-row:focus-within {
  z-index: 90;
}

@media (min-width: 681px) and (max-width: 1180px) {
  .learning-plan-page .learning-plan-skill-grid {
    grid-template-columns: 1fr;
  }

  .learning-plan-page .learning-plan-section-title {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .learning-plan-page .learning-plan-section-title > p {
    width: 100%;
    max-width: none;
    margin-left: 0;
    text-align: left;
  }

  .learning-plan-page .learning-plan-overall-line {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 680px) {
  .learning-plan-page .learning-plan-skill-grid {
    grid-template-columns: 1fr;
  }

  .learning-plan-page .learning-plan-skill-card {
    padding: 12px;
    border-radius: 12px;
  }

  .learning-plan-page .learning-plan-skill-label {
    min-height: 44px;
    margin: -2px -2px 10px;
    padding: 9px 10px;
  }

  .learning-plan-page .learning-plan-skill-label strong {
    font-size: 18px;
  }

  .learning-plan-page .learning-plan-metric-list,
  .learning-plan-page .learning-plan-metric-view-list {
    margin-top: 11px;
  }

  .learning-plan-page .learning-plan-metric-row-head {
    align-items: flex-start;
  }

  .learning-plan-required-metric-badge {
    min-height: 23px;
    padding: 2px 7px;
    font-size: 9px;
  }

  .learning-plan-page .learning-plan-achievement-meter > span:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }

  .learning-plan-page .learning-plan-achievement-meter > span:first-child b {
    font-size: 14px;
  }

  .learning-plan-page .learning-plan-overall-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .learning-plan-page .learning-plan-overall-line strong {
    align-self: flex-start;
  }

  .learning-plan-page .learning-plan-overall-can-do {
    font-size: 10.5px;
    line-height: 1.6;
  }

  .learning-plan-level-guide {
    width: 100%;
    padding: 9px 10px;
    font-size: 10px;
    line-height: 1.5;
  }

  .learning-plan-level-guide > strong {
    font-size: 11px;
  }

  .learning-plan-metric-view-guide {
    position: fixed;
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    max-height: 42dvh;
    overflow-y: auto;
  }

  .learning-plan-metric-view-guide::after {
    display: none;
  }
}

@media (max-width: 420px) {
  .learning-plan-page .learning-plan-metric-row {
    padding: 10px 9px;
  }

  .learning-plan-page .learning-plan-metric-row > .learning-plan-focus-meter {
    grid-template-columns: max-content 44px minmax(0, 1fr) max-content max-content;
  }

  .learning-plan-focus-steps {
    width: 100%;
    gap: 3px;
  }

  .learning-plan-focus-steps button {
    flex: 1 1 0;
    width: auto;
    min-width: 18px;
  }

  .learning-plan-achievement-meter .learning-plan-cefr-scale small {
    font-size: 6px;
    letter-spacing: -.04em;
  }
}

/* ===== 2026-07-22 課題学習：記事タイトルを本日の課題と異なる文書見出しデザインへ変更 ===== */
.study-selected-week-title {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "article-icon article-label"
    "article-icon article-title";
  align-items: center;
  column-gap: 13px;
  row-gap: 1px;
  width: 100%;
  min-width: 0;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #d8dee8;
  border-left: 1px solid #d8dee8;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
  color: #101828;
}

.study-selected-week-title::before {
  content: "記事";
  grid-area: article-icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: #344054;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}

.study-selected-week-title > span {
  grid-area: article-label;
  display: block;
  align-self: end;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  white-space: normal;
}

.study-selected-week-title > strong {
  grid-area: article-title;
  display: block;
  align-self: start;
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-selected-week-title {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas:
      "article-icon article-label"
      "article-icon article-title";
    align-items: center;
    column-gap: 10px;
    row-gap: 1px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 5px;
  }

  .study-selected-week-title::before {
    width: 36px;
    height: 36px;
    border-radius: 5px;
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  .study-selected-week-title > span {
    align-self: end;
    min-height: 0;
    padding: 0;
    font-size: 10px;
    line-height: 1.3;
  }

  .study-selected-week-title > strong {
    align-self: start;
    width: 100%;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ===== 2026-07-22 課題学習：「本日の課題」と状態バッジの文字サイズ統一 ===== */
.study-day-title-row .study-day-status-badge,
.study-day-title-row .study-today-task-label {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-day-title-row .study-day-status-badge,
  .study-day-title-row .study-today-task-label {
    font-size: 10px !important;
  }
}

/* ===== 2026-07-22 student schedule status / table width alignment ===== */
.student-schedule-month-card .schedule-table-compact,
.student-schedule-month-card .compact-lesson-table,
.student-schedule-month-card .student-month-schedule-table {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.student-schedule-month-card .schedule-table-compact table,
.student-schedule-month-card .compact-lesson-table table,
.student-schedule-month-card .student-month-schedule-table table {
  width: 100% !important;
  min-width: 520px !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

.student-schedule-month-card .schedule-table-compact th:nth-child(1),
.student-schedule-month-card .schedule-table-compact td:nth-child(1),
.student-schedule-month-card .compact-lesson-table th:nth-child(1),
.student-schedule-month-card .compact-lesson-table td:nth-child(1) {
  width: 24% !important;
  min-width: 0 !important;
}

.student-schedule-month-card .schedule-table-compact th:nth-child(2),
.student-schedule-month-card .schedule-table-compact td:nth-child(2),
.student-schedule-month-card .compact-lesson-table th:nth-child(2),
.student-schedule-month-card .compact-lesson-table td:nth-child(2) {
  width: 48% !important;
  min-width: 0 !important;
}

.student-schedule-month-card .schedule-table-compact th:nth-child(3),
.student-schedule-month-card .schedule-table-compact td:nth-child(3),
.student-schedule-month-card .compact-lesson-table th:nth-child(3),
.student-schedule-month-card .compact-lesson-table td:nth-child(3) {
  width: 28% !important;
  min-width: 0 !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .student-schedule-month-card .schedule-table-compact table,
  .student-schedule-month-card .compact-lesson-table table,
  .student-schedule-month-card .student-month-schedule-table table {
    width: 100% !important;
    min-width: 500px !important;
    table-layout: fixed !important;
  }
}

/* ===== 2026-07-22 講師報酬：確認UI・レッスン外報酬テーブル調整 ===== */
.teacher-reward-extra-table-wrap {
  width: 100%;
  max-width: 100%;
}

.teacher-reward-extra-table {
  width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}

.teacher-reward-extra-table .teacher-reward-extra-date-col {
  width: 180px;
}

.teacher-reward-extra-table .teacher-reward-extra-content-col {
  width: auto;
}

.teacher-reward-extra-table .teacher-reward-extra-amount-col {
  width: 180px;
}

.teacher-reward-extra-table th,
.teacher-reward-extra-table td {
  overflow-wrap: anywhere;
}

.teacher-reward-extra-table th:last-child,
.teacher-reward-extra-table td:last-child {
  text-align: right;
}

.teacher-reward-dashboard-row > div {
  width: 100%;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .teacher-reward-extra-table {
    min-width: 520px !important;
  }

  .teacher-reward-extra-table .teacher-reward-extra-date-col {
    width: 120px;
  }

  .teacher-reward-extra-table .teacher-reward-extra-amount-col {
    width: 130px;
  }
}

/* ===== 2026-07-22 基礎コース：Day別課題テンプレート・構造化問題・自動採点 ===== */
.admin-basic-template-section {
  display: grid;
  gap: 18px;
}

.admin-basic-template-flow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
  margin: 10px 0 4px;
}

.admin-basic-template-flow > div {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border, #ddd);
  border-radius: 12px;
  background: var(--surface-subtle, #fafafa);
}

.admin-basic-template-flow b,
.admin-basic-template-flow span {
  display: block;
}

.admin-basic-template-flow span {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted, #666);
}

.admin-basic-day-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 8px;
  border: 1px solid var(--border, #ddd);
  border-radius: 14px;
  background: var(--card, #fff);
}

.admin-basic-day-tabs button {
  min-height: 44px;
}

.admin-basic-template-day-summary {
  padding: 12px 14px;
  border-left: 4px solid var(--brand, #c8161d);
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand, #c8161d) 6%, transparent);
}

.admin-basic-template-page > summary {
  min-height: 48px;
}

.admin-basic-template-stage-card {
  display: grid;
  gap: 12px;
}

.admin-basic-template-stage-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.admin-basic-template-stage-head > span {
  font-weight: 800;
  white-space: nowrap;
}

.admin-basic-template-task-list,
.admin-basic-material-task-list,
.admin-basic-exercise-items {
  display: grid;
  gap: 12px;
}

.admin-basic-template-task-card,
.admin-basic-material-task-card,
.admin-basic-exercise-item-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border, #ddd);
  border-radius: 12px;
  background: var(--card, #fff);
}

.admin-basic-template-task-head,
.admin-basic-material-task-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-basic-template-task-head > div,
.admin-basic-material-task-card-head > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-basic-template-task-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 0.55fr) minmax(220px, 1fr);
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-basic-template-task-grid > label:not(.admin-basic-auto-grade-toggle) {
  display: grid;
  gap: 6px;
}

.admin-basic-question-count {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.admin-basic-question-count input {
  min-width: 0;
}

.admin-basic-auto-grade-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--border, #ddd);
  border-radius: 10px;
  cursor: pointer;
}

.admin-basic-auto-grade-toggle input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.admin-basic-auto-grade-toggle span,
.admin-basic-auto-grade-toggle b,
.admin-basic-auto-grade-toggle small {
  display: block;
}

.admin-basic-auto-grade-toggle small {
  margin-top: 2px;
  color: var(--muted, #666);
}

.admin-basic-auto-grade-toggle.is-disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.admin-basic-template-preview {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--border-strong, #bbb);
  border-radius: 10px;
  background: var(--surface-subtle, #fafafa);
}

.admin-basic-template-preview > b {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}

.basic-template-mini-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  line-height: 2;
}

.basic-template-mini-preview input {
  width: 120px;
  height: 34px;
  padding: 4px 8px;
}

.basic-template-mini-preview.is-reorder span {
  padding: 5px 10px;
  border: 1px solid var(--border, #ddd);
  border-radius: 999px;
  background: var(--card, #fff);
}

.basic-template-mini-preview.is-translation {
  display: grid;
  gap: 8px;
}

.basic-template-mini-preview textarea {
  width: 100%;
  min-height: 58px;
}

.admin-basic-material-exercise-section {
  display: grid;
  gap: 14px;
}

.admin-basic-material-task-card {
  border-left: 4px solid var(--brand, #c8161d);
}

.admin-basic-exercise-item-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  background: var(--surface-subtle, #fafafa);
}

.admin-basic-exercise-item-number {
  display: grid;
  place-items: center;
  align-self: start;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight: 800;
  background: var(--brand, #c8161d);
  color: #fff;
}

.admin-basic-exercise-item-fields {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-basic-exercise-item-fields label {
  display: grid;
  gap: 6px;
}

.admin-basic-answer-key-preview {
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, #16803c 8%, transparent);
  overflow-wrap: anywhere;
}

/* 生徒画面：構造化問題 */
.basic-exercise-list {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

.basic-exercise-item {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border, #ddd);
  border-radius: 12px;
  background: var(--card, #fff);
}

.basic-exercise-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 800;
  background: var(--surface-strong, #eee);
}

.basic-fill-blank-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.basic-fill-blank-sentence {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 2.15;
  overflow-wrap: anywhere;
}

.basic-fill-blank-sentence input {
  display: inline-block;
  width: clamp(110px, 22vw, 220px);
  min-height: 42px;
  margin: 0 5px;
  padding: 6px 10px;
  border-width: 2px;
  vertical-align: middle;
}

.basic-fill-blank-content {
  flex: 1 1 auto;
  min-width: 0;
}

.basic-fill-blank-translation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  margin-top: 12px;
  padding-top: 2px;
  line-height: 1.75;
}

.basic-fill-blank-translation b {
  flex: 0 0 auto;
}

.basic-fill-blank-translation span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.basic-reorder-item {
  display: grid;
  gap: 12px;
}

.basic-reorder-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.basic-reorder-token-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  min-height: 58px;
  padding: 10px;
  border: 2px dashed var(--border-strong, #bbb);
  border-radius: 12px;
  background: var(--surface-subtle, #fafafa);
}

.basic-reorder-token {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  padding: 3px 7px;
  border: 1px solid var(--border, #ddd);
  border-radius: 10px;
  background: var(--card, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.basic-reorder-token b {
  min-width: 0;
  padding: 0 4px;
  overflow-wrap: anywhere;
}

.basic-reorder-token:active {
  cursor: grabbing;
}

.basic-reorder-token.is-dragging {
  position: relative;
  z-index: 3;
  opacity: 0.58;
  outline: 2px solid var(--brand, #c8161d);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2);
  transform: scale(1.025);
}

.basic-reorder-token.is-swiping {
  position: relative;
  z-index: 4;
  opacity: 0.9;
  border-color: var(--brand, #c8161d);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transform: translateX(var(--basic-swipe-x, 0));
  transition: none;
}

.basic-reorder-token-list.is-swipe-sorting {
  border-color: var(--brand, #c8161d);
  background: #fffafa;
}

.basic-reorder-token.is-recently-moved {
  border-color: var(--brand, #c8161d);
  box-shadow: 0 0 0 3px rgba(200, 22, 29, 0.12);
}

.basic-reorder-token-list.is-sorting {
  border-color: var(--brand, #c8161d);
  background: #fffafa;
}

.basic-reorder-drag-handle {
  color: var(--muted, #666);
  letter-spacing: -2px;
}


.basic-reorder-instruction-mobile {
  display: none;
}

.basic-translation-item {
  display: grid;
  gap: 10px;
}

.basic-translation-question {
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.basic-translation-item textarea {
  min-height: 96px;
}

.basic-exercise-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.basic-exercise-grade-badge.is-correct {
  color: #0b6a31;
  background: #e8f7ee;
  border: 1px solid #9ed8b4;
}

.basic-exercise-grade-badge.is-incorrect {
  color: #a21b22;
  background: #fff0f1;
  border: 1px solid #efb1b5;
}

.basic-exercise-correct-answer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #efb1b5;
  border-radius: 10px;
  color: #7f171d;
  background: #fff7f7;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.basic-exercise-correct-answer b {
  flex: 0 0 auto;
}

.basic-fill-blank-item {
  flex-wrap: wrap;
}

.basic-fill-blank-item .basic-exercise-correct-answer {
  margin-left: 42px;
  width: calc(100% - 42px);
}

.basic-auto-grade-summary,
.teacher-basic-auto-grade-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 16px;
  border: 1px solid #9ed8b4;
  border-radius: 12px;
  background: #f1fbf5;
}

.basic-auto-grade-summary > div {
  display: grid;
  gap: 2px;
}

.basic-auto-grade-summary > div span {
  font-size: 12px;
  color: var(--muted, #666);
}

.basic-auto-grade-summary strong {
  margin-left: auto;
  font-size: 22px;
}

.teacher-basic-auto-grade-summary {
  margin: 14px 0;
}

.teacher-basic-task-grade {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-subtle, #fafafa);
}

.teacher-basic-task-grade > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.teacher-basic-answer-list {
  margin: 0;
  padding-left: 24px;
}

.teacher-basic-answer-list li + li {
  margin-top: 7px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .basic-fill-blank-item .basic-exercise-correct-answer {
    margin-left: 0;
    width: 100%;
  }

  .admin-basic-template-flow {
    grid-template-columns: 1fr;
  }

  .admin-basic-day-tabs {
    position: static;
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    overflow-x: auto;
  }

  .admin-basic-template-task-grid {
    grid-template-columns: 1fr;
  }

  .admin-basic-template-stage-head {
    grid-template-columns: 1fr;
  }

  .admin-basic-template-task-head,
  .admin-basic-material-task-card-head {
    align-items: flex-start;
  }

  .admin-basic-exercise-item-card {
    grid-template-columns: 1fr;
  }

  .basic-fill-blank-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .basic-fill-blank-sentence {
    flex-basis: calc(100% - 44px);
    line-height: 2.15;
    overflow-wrap: normal;
    word-break: normal;
  }

  .basic-fill-blank-sentence input {
    display: inline-block;
    box-sizing: border-box;
    flex: 0 0 112px;
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    min-height: 42px;
    margin: 0 5px;
    padding: 6px 9px;
    vertical-align: middle;
  }

  .basic-fill-blank-translation {
    width: 100%;
    margin-top: 14px;
  }

  .basic-reorder-token-list {
    gap: 7px;
  }

  .basic-reorder-token {
    max-width: 100%;
  }

  .basic-reorder-token b {
    overflow-wrap: anywhere;
  }

  .basic-auto-grade-summary strong {
    margin-left: 0;
  }
}

.basic-reorder-drag-handle {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 34px;
  cursor: grab;
  touch-action: none;
}

@media (pointer: coarse), (max-width: 820px) {
  .basic-reorder-instruction-desktop {
    display: none;
  }

  .basic-reorder-instruction-mobile {
    display: inline;
  }

  .basic-reorder-token-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 9px 10px;
    padding: 12px 9px;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .basic-reorder-token {
    display: inline-flex;
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    min-height: 48px;
    padding: 8px 13px;
    gap: 0;
    cursor: default;
    touch-action: pan-y;
    -webkit-touch-callout: none;
  }

  .basic-reorder-token b {
    width: auto;
    max-width: min(72vw, 320px);
    padding: 0;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .basic-reorder-drag-handle {
    display: none;
  }

  .basic-reorder-token.is-swiping {
    cursor: grabbing;
  }
}

@media (max-width: 430px) {
  .basic-reorder-token-list {
    gap: 8px;
    padding-inline: 7px;
  }

  .basic-reorder-token {
    min-height: 46px;
    padding: 7px 11px;
  }

  .basic-reorder-token b {
    max-width: 78vw;
  }
}

/* ===== 2026-07-24 announcement edit targeting / attachment replacement / NEW badge ===== */
.announcement-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.announcement-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
}

.announcement-title-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.announcement-edit-card {
  width: min(820px, 100%);
}

.announcement-current-files {
  margin: 6px 0 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.announcement-current-files .file-list {
  margin-top: 6px;
}

@media (max-width: 720px) {
  .announcement-edit-card {
    width: 100%;
  }

  .announcement-title-row {
    gap: 6px;
  }
}

/* 基礎コース：月別4週カリキュラム設定 */
.basic-month-plan-summary,
.basic-material-fixed-review-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.basic-month-plan-summary > div,
.basic-material-fixed-review-list > div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--surface-subtle, #fafafa);
}

.basic-month-plan-summary span,
.basic-material-fixed-review-list span,
.basic-material-month-plan-grid label > span {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, #6b7280);
}

.basic-month-plan-summary b,
.basic-material-fixed-review-list b {
  line-height: 1.45;
}

.basic-month-plan-summary small,
.basic-material-fixed-review-list small {
  color: var(--muted, #6b7280);
  line-height: 1.45;
}

.basic-material-proxy-meta {
  margin-bottom: 14px;
}

.basic-material-month-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.basic-material-month-plan-grid label {
  display: grid;
  gap: 7px;
  margin: 0;
}

.basic-material-month-plan-grid select {
  width: 100%;
  min-height: 44px;
}

.study-basic-assignment-pending {
  display: grid;
  gap: 8px;
}

.study-basic-assignment-pending h3,
.study-basic-assignment-pending p {
  margin: 0;
}

.admin-basic-month-assignment-guide {
  display: grid;
  align-content: start;
  gap: 6px;
}

@media (max-width: 720px) {
  .basic-month-plan-summary,
  .basic-material-fixed-review-list,
  .basic-material-month-plan-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== 学習計画：1週間の学習実績サマリー ===== */
.learning-plan-actual-week-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 24px;
  margin-top: 12px;
  padding: 18px 20px;
  border: 1px solid #dfe5ee;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(107, 138, 253, .055), rgba(24, 165, 122, .035) 52%, rgba(168, 90, 212, .045)),
    #fff;
  box-shadow: 0 5px 16px rgba(23, 33, 53, .055);
}

.learning-plan-actual-week-total > div:first-child {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}

.learning-plan-actual-week-total > div:first-child > span {
  color: #172135;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}

.learning-plan-actual-week-total > div:first-child > small {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid #e1e6ed;
  border-radius: 999px;
  background: #f8fafc;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.learning-plan-actual-week-total > strong {
  display: grid;
  justify-items: end;
  align-content: center;
  color: var(--primary, #d6111b);
  font-size: 25px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.learning-plan-actual-week-total > strong::before {
  content: "合計";
  margin-bottom: 4px;
  color: #667085;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.learning-plan-actual-week-breakdown {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.learning-plan-actual-week-breakdown > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 11px 13px 11px 35px;
  overflow: hidden;
  border: 1px solid #e2e7ef;
  border-radius: 11px;
  background: rgba(255, 255, 255, .92);
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.learning-plan-actual-week-breakdown > span::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #6b8afd;
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(107, 138, 253, .12);
}

.learning-plan-actual-week-breakdown > span.is-listening::before {
  background: #18a57a;
  box-shadow: 0 0 0 4px rgba(24, 165, 122, .12);
}

.learning-plan-actual-week-breakdown > span.is-speakingWriting::before {
  background: #a85ad4;
  box-shadow: 0 0 0 4px rgba(168, 90, 212, .12);
}

.learning-plan-actual-week-breakdown > span b {
  flex: 0 0 auto;
  color: #172135;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .learning-plan-actual-week-total {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px;
  }

  .learning-plan-actual-week-total > strong {
    justify-items: start;
    padding-top: 11px;
    border-top: 1px solid #e7eaf0;
    font-size: 23px;
  }

  .learning-plan-actual-week-breakdown {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .learning-plan-actual-week-breakdown > span {
    min-height: 44px;
  }
}

/* Learning plan timetable: compact, uniform 10-minute rows and always-visible time ranges */
.learning-plan-calendar-grid {
  --learning-plan-slot-height: 16px;
  grid-template-rows: 45px repeat(144, var(--learning-plan-slot-height));
  grid-auto-rows: var(--learning-plan-slot-height);
  align-content: start;
}

.learning-plan-calendar-time,
.learning-plan-calendar-cell {
  height: var(--learning-plan-slot-height);
  min-height: var(--learning-plan-slot-height);
  max-height: var(--learning-plan-slot-height);
  box-sizing: border-box;
  overflow: hidden;
}

.learning-plan-calendar-time {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 3px 7px 0 2px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.learning-plan-calendar-block {
  position: relative;
  gap: 1px;
  margin: 1px 2px;
  padding: 2px 4px;
}

.learning-plan-calendar-block .learning-plan-calendar-block-time,
.learning-plan-calendar-block.has-multiple .learning-plan-calendar-block-time {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  overflow: hidden;
  color: currentColor;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-plan-calendar-block .learning-plan-calendar-block-skills {
  flex: 1 1 auto;
  min-height: 0;
}

.learning-plan-calendar-block > em {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  font-size: 7px;
  font-style: normal;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-plan-calendar-block.is-short-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.learning-plan-calendar-block.is-short-slot .learning-plan-calendar-block-time {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  font-size: 8px;
  line-height: 1;
}

.learning-plan-calendar-block.is-short-slot .learning-plan-calendar-block-skills {
  grid-column: 1;
  grid-row: 1;
  display: block;
  overflow: hidden;
}

.learning-plan-calendar-block.is-short-slot .learning-plan-calendar-block-skills strong {
  overflow: hidden;
  font-size: 8px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-plan-calendar-block.is-short-slot > em {
  display: none;
}

.learning-plan-calendar-block.is-single-slot {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  padding: 0 3px;
}

.learning-plan-calendar-block.is-single-slot .learning-plan-calendar-block-time {
  order: 2;
  flex: 0 0 auto;
  width: auto;
  font-size: 8px;
  line-height: 1;
}

.learning-plan-calendar-block.is-single-slot .learning-plan-calendar-block-skills {
  order: 1;
  display: block;
  flex: 1 1 auto;
  overflow: hidden;
}

.learning-plan-calendar-block.is-single-slot .learning-plan-calendar-block-skills strong {
  overflow: hidden;
  font-size: 8px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-plan-calendar-block.is-single-slot > em {
  display: none;
}

/* ===== 2026-07-28 基礎コース：スマホ穴埋め欄の固定幅を最終適用 =====
   既存のスマホ共通 input { width: 100% !important; } より後で、
   より高い詳細度と !important を使って確実に上書きする。 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .basic-fill-blank-content
  .basic-fill-blank-sentence
  > input.basic-fill-blank-input[type="text"] {
    display: inline-block !important;
    box-sizing: border-box !important;
    flex: 0 0 112px !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    min-height: 42px !important;
    margin: 0 5px !important;
    padding: 6px 9px !important;
    vertical-align: middle !important;
  }

  .basic-fill-blank-content
  .basic-fill-blank-sentence {
    display: block;
    width: auto;
    max-width: 100%;
    line-height: 2.15;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 380px) {
  .basic-fill-blank-content
  .basic-fill-blank-sentence
  > input.basic-fill-blank-input[type="text"] {
    flex-basis: 104px !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    padding-inline: 8px !important;
  }
}

/* ===== 2026-07-28 Day6講師画像：旧画像保持型フェード ===== */
.day6-live-tutor-media #aiConversationTutorFigure {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  contain: paint !important;
}

.day6-live-tutor-media
#aiConversationTutorFigure
> .ai-conversation-tutor-image-current {
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  will-change: auto !important;
}

/*
 * 旧画像は常に完全表示のまま残します。
 * 新画像だけを上から0→1へフェードインすることで、
 * 2枚が同時に半透明になって白背景が透ける現象を防ぎます。
 */
.day6-live-tutor-media
#aiConversationTutorFigure.is-image-transitioning
> .ai-conversation-tutor-image-current {
  opacity: 1 !important;
  visibility: visible !important;
}

.day6-live-tutor-media
#aiConversationTutorFigure
> .ai-conversation-tutor-image-next {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  margin: auto !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity 320ms cubic-bezier(.22, .61, .36, 1),
    visibility 0s linear 320ms
    !important;
  will-change: opacity !important;
}

.day6-live-tutor-media
#aiConversationTutorFigure
> .ai-conversation-tutor-image-next.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transition-delay: 0s !important;
}

@media (max-width: 900px) {
  .day6-live-tutor-media
  #aiConversationTutorFigure
  > .ai-conversation-tutor-image-next {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
  }
}

@media (min-width: 901px) {
  .day6-live-tutor-media
  #aiConversationTutorFigure
  > .ai-conversation-tutor-image-next {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}

/* ===== 2026-07-28 Day6：上部中央エラーオーバーレイ ===== */
.day6-top-message-overlay {
  position: fixed;
  z-index: 2147483000;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  left: 50%;
  width: min(760px, calc(100vw - 32px));
  max-height: min(32vh, 220px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s linear 180ms;
}

.day6-top-message-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.day6-top-message-overlay.is-leaving {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px);
}

.day6-top-message {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  max-height: min(32vh, 220px);
  padding: 12px 48px 12px 20px;
  overflow: auto;
  border: 1px solid #f3aaaa;
  border-radius: 14px;
  background: rgba(255, 247, 247, 0.98);
  box-shadow:
    0 14px 40px rgba(35, 39, 47, 0.22),
    0 2px 8px rgba(35, 39, 47, 0.10);
  color: #bd171d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.day6-top-message-overlay.warning
.day6-top-message {
  border-color: #f1cf8f;
  background: rgba(255, 251, 240, 0.98);
  color: #8a5900;
}

.day6-top-message-overlay.success
.day6-top-message {
  border-color: #a8d9bc;
  background: rgba(245, 253, 248, 0.98);
  color: #17653a;
}

.day6-top-message-copy {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
}

.day6-top-message-close {
  position: absolute;
  top: 50%;
  right: 9px;
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
}

.day6-top-message-close:hover,
.day6-top-message-close:focus-visible {
  background: rgba(189, 23, 29, 0.09);
  outline: none;
}

@media (max-width: 900px) {
  .day6-top-message-overlay {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    width: calc(100vw - 20px);
    max-height: min(36vh, 230px);
  }

  .day6-top-message {
    min-height: 52px;
    max-height: min(36vh, 230px);
    padding: 11px 44px 11px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
  }

  .day6-top-message-close {
    right: 6px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }
}

/* ===== 2026-07-28 Day6スマホ：発話状態カードを約半分の高さへ ===== */
@media (max-width: 900px) {
  .day6-live-tutor-media {
    padding: 8px 8px 62px !important;
  }

  .day6-live-speaking-status {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 5px 10px !important;
    gap: 3px !important;
    border-radius: 13px 13px 10px 10px !important;
  }

  .day6-live-speaking-status
  .ai-conversation-state-bars {
    display: block;
    flex: 0 0 11px !important;
    width: 100% !important;
    height: 11px !important;
    min-height: 11px !important;
    max-height: 11px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .day6-live-speaking-status
  .ai-conversation-wave-bars {
    width: 100% !important;
    height: 11px !important;
    min-height: 11px !important;
    max-height: 11px !important;
    gap: 3px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .day6-live-speaking-status
  .ai-conversation-wave-bars span {
    height: 7px !important;
    min-height: 7px !important;
    max-height: 7px !important;
    border-radius: 999px !important;
    transform-origin: center !important;
  }

  .day6-live-screen[data-live-state="assistant-speaking"]
  .day6-live-speaking-status
  .ai-conversation-wave-bars.assistant span,
  .day6-live-screen[data-live-state="user-speaking"]
  .day6-live-speaking-status
  .ai-conversation-wave-bars.user span {
    animation: day6CompactMobileWave 1.05s ease-in-out infinite !important;
    animation-delay: var(--ai-bar-delay, 0s) !important;
  }

  .day6-live-speaking-status
  .ai-conversation-state-copy {
    flex: 0 0 20px !important;
    width: 100% !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .day6-live-speaking-status
  .ai-conversation-state-copy strong {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--text) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 420px) {
  .day6-live-tutor-media {
    padding-bottom: 60px !important;
  }

  .day6-live-speaking-status {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 4px 9px !important;
  }

  .day6-live-speaking-status
  .ai-conversation-state-copy strong {
    font-size: 13px !important;
  }
}

@keyframes day6CompactMobileWave {
  0%, 100% {
    transform: scaleY(.68);
  }
  50% {
    transform: scaleY(1.28);
  }
}

/* ===== 2026-07-28 Day6スマホ：波形1行・外周余白削除 ===== */
@media (max-width: 900px) {
  /*
   * AI用・生徒用の2つの波形DOMが存在します。
   * スマホ用の後勝ちCSSで両方がdisplay:blockになっていたため、
   * ここで一度すべて非表示にし、現在状態に対応する1行だけを表示します。
   */
  .day6-live-speaking-status
  .ai-conversation-state-bars {
    display: none !important;
  }

  .day6-live-screen[data-live-state="assistant-speaking"]
  .day6-live-speaking-status
  .ai-conversation-state-bars.assistant,
  .day6-live-screen[data-live-state="ready"]
  .day6-live-speaking-status
  .ai-conversation-state-bars.assistant,
  .day6-live-screen[data-live-state="waiting"]
  .day6-live-speaking-status
  .ai-conversation-state-bars.assistant,
  .day6-live-screen[data-live-state="paused"]
  .day6-live-speaking-status
  .ai-conversation-state-bars.assistant {
    display: block !important;
  }

  .day6-live-screen[data-live-state="user-speaking"]
  .day6-live-speaking-status
  .ai-conversation-state-bars.user {
    display: block !important;
  }

  /*
   * Day6だけ、スマホ共通のmain左右12px余白を解除します。
   * 固定ヘッダー分の上余白と下部ナビ分の下余白は維持します。
   */
  html,
  body.ai-conversation-active {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body.ai-conversation-active #appView,
  body.ai-conversation-active .app {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body.ai-conversation-active .main,
  body.ai-conversation-active.app-mode .main,
  body.ai-conversation-active.practical-study-active .main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
  }

  body.ai-conversation-active #content,
  body.ai-conversation-active.practical-study-active #content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    border: 0 !important;
  }

  body.ai-conversation-active .day6-live-screen {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
  }

  /*
   * ヘッダーと下部ナビもビューポート端へ固定し、
   * 端に白い線や丸みが残らないようにします。
   */
  body.ai-conversation-active .topbar,
  body.ai-conversation-active.header-hidden .topbar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
  }

  body.ai-conversation-active
  .student-bottom-nav {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
  }
}

/* ===== 2026-07-29 講師教材一覧：Day別の実問題表示 ===== */
.teacher-material-day-problems {
  display: grid;
  gap: 12px;
}

.teacher-material-day-problems-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.teacher-material-day-problems-heading h5 {
  margin: 0;
  color: #101828;
  font-size: 15px;
}

.teacher-material-day-problems-heading p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.55;
  text-align: right;
}

.teacher-material-question-day > h5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.teacher-material-day-problem-count {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.teacher-material-problem-set-list {
  display: grid;
  gap: 10px;
}

.teacher-material-problem-set {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fcfcfd;
}

.teacher-material-problem-set-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.teacher-material-problem-set-heading b {
  color: #344054;
  font-size: 13px;
}

.teacher-material-problem-set-heading span {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3448a0;
  font-size: 11px;
  font-weight: 800;
}

.teacher-material-problem-instruction,
.teacher-material-practical-problem {
  margin: 0;
  color: #1d2939;
  font-size: 14px;
  line-height: 1.7;
}

.teacher-material-problem-note {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.6;
}

.teacher-material-problem-items {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teacher-material-problem-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 10px;
  border: 1px solid #eaecf0;
  border-radius: 9px;
  background: #fff;
}

.teacher-material-problem-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f2f4f7;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.teacher-material-problem-body {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.teacher-material-fill-blank-preview,
.teacher-material-translation-preview {
  color: #101828;
  font-size: 14px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.teacher-material-problem-blank {
  display: inline-block;
  min-width: 82px;
  margin: 0 4px;
  border-bottom: 2px solid #98a2b3;
  color: transparent;
  line-height: 1.2;
  vertical-align: baseline;
  user-select: none;
}

.teacher-material-problem-translation {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  color: #667085;
  font-size: 12px;
  line-height: 1.6;
}

.teacher-material-problem-translation b {
  flex: 0 0 auto;
  color: #475467;
}

.teacher-material-reorder-preview,
.teacher-material-problem-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.teacher-material-reorder-token,
.teacher-material-problem-options span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  color: #1d2939;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.teacher-material-problem-options span {
  background: #f9fafb;
  font-weight: 600;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .teacher-material-day-problems-heading {
    display: grid;
    gap: 4px;
  }

  .teacher-material-day-problems-heading p {
    text-align: left;
  }

  .teacher-material-problem-set {
    padding: 10px;
  }

  .teacher-material-problem-set-heading {
    align-items: flex-start;
  }

  .teacher-material-problem-item {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
  }

  .teacher-material-problem-number {
    width: 26px;
    height: 26px;
  }

  .teacher-material-problem-blank {
    min-width: 64px;
  }
}

/* ===== 2026-07-29 講師アカウント管理：デザイン調整 ===== */
.teacher-account-page {
  display: grid;
  gap: 16px;
  width: 100%;
}

.teacher-account-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 24px;
  background:
    linear-gradient(135deg, #ffffff 0%, #fff8f8 100%);
}

.teacher-account-overview-copy {
  min-width: 0;
}

.teacher-account-eyebrow,
.teacher-account-section-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--primary, #d51220);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.3;
}

.teacher-account-overview h3,
.teacher-account-section h4,
.teacher-account-cache-panel h4 {
  margin: 0;
  color: #101828;
}

.teacher-account-overview h3 {
  font-size: clamp(22px, 2.6vw, 30px);
}

.teacher-account-overview-copy p {
  margin: 8px 0 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.65;
}

.teacher-account-id-card {
  flex: 0 0 auto;
  display: grid;
  gap: 3px;
  min-width: 150px;
  padding: 12px 16px;
  border: 1px solid #f0d2d5;
  border-radius: 12px;
  background: rgba(255, 255, 255, .88);
  text-align: right;
}

.teacher-account-id-card span {
  color: #667085;
  font-size: 11px;
  font-weight: 700;
}

.teacher-account-id-card strong {
  color: #b9111a;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.teacher-account-settings-grid {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(420px, 1.35fr);
  gap: 16px;
  align-items: start;
}

.teacher-account-section {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 20px;
}

.teacher-account-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eaecf0;
}

.teacher-account-section h4,
.teacher-account-cache-panel h4 {
  font-size: 17px;
}

.teacher-account-primary-toggle {
  margin: 0 !important;
  padding: 13px 14px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #f9fafb;
}

.teacher-account-primary-toggle span {
  display: grid;
  gap: 3px;
}

.teacher-account-primary-toggle strong {
  color: #1d2939;
  font-size: 14px;
}

.teacher-account-primary-toggle small {
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

.teacher-account-help-text {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.7;
}

.teacher-account-notification-section
.notice-status {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.teacher-account-notification-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.teacher-account-notification-grid
.checkbox-row {
  margin: 0 !important;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  background: #fff;
}

.teacher-account-actions {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid #eaecf0;
}

/*
 * キャッシュ削除領域には点線・破線を使用しません。
 * 通常のカードより軽い、無地のメンテナンスパネルとして表示します。
 */
.teacher-account-cache-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 20px;
  border: 1px solid #e4e7ec;
  border-style: solid;
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: none;
}

.teacher-account-cache-copy {
  min-width: 0;
}

.teacher-account-cache-panel p {
  margin: 6px 0 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.65;
}

.teacher-account-cache-button {
  flex: 0 0 auto;
  min-width: 180px;
  border-style: solid !important;
}

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

@media (max-width: 700px) {
  .teacher-account-overview {
    display: grid;
    gap: 14px;
    padding: 18px;
  }

  .teacher-account-id-card {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .teacher-account-section {
    padding: 16px;
  }

  .teacher-account-section-heading {
    display: grid;
    gap: 9px;
  }

  .teacher-account-notification-section
  .notice-status {
    width: fit-content;
  }

  .teacher-account-notification-grid {
    grid-template-columns: 1fr;
  }

  .teacher-account-cache-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
  }

  .teacher-account-cache-button {
    width: 100%;
    min-width: 0;
  }
}

/* ===== 2026-07-29 講師・管理者：生徒情報・プロフィール閲覧 ===== */
.student-private-note-page {
  width: min(100%, 1080px);
}

.staff-student-profile-card {
  display: grid;
  gap: 18px;
  margin-top: 16px;
}

.staff-student-profile-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eaecf0;
}

.staff-student-profile-heading h4,
.student-private-note-editor-heading h4 {
  margin: 0;
  color: #101828;
  font-size: 18px;
}

.staff-student-profile-heading p,
.student-private-note-editor-heading p {
  margin: 6px 0 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.65;
}

.staff-student-profile-updated {
  flex: 0 0 auto;
  display: grid;
  gap: 2px;
  min-width: 150px;
  text-align: right;
}

.staff-student-profile-updated span {
  color: #98a2b3;
  font-size: 11px;
  font-weight: 700;
}

.staff-student-profile-updated strong {
  color: #475467;
  font-size: 12px;
}

.staff-student-profile-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.staff-student-profile-value {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #fcfcfd;
}

.staff-student-profile-value.is-wide {
  grid-column: 1 / -1;
}

.staff-student-profile-label {
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.staff-student-profile-copy {
  color: #1d2939;
  font-size: 14px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.staff-student-profile-value.is-empty
.staff-student-profile-copy {
  color: #98a2b3;
}

.staff-student-profile-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.staff-student-profile-skills span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid #f1c7ca;
  border-radius: 999px;
  background: #fff5f5;
  color: #b31319;
  font-size: 12px;
  font-weight: 750;
}

.staff-student-profile-ai-status {
  width: fit-content;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.staff-student-profile-ai-status.is-enabled {
  border: 1px solid #a8d5b9;
  background: #f0fbf4;
  color: #19703d;
}

.staff-student-profile-ai-status.is-disabled {
  border: 1px solid #d0d5dd;
  background: #f8fafc;
  color: #667085;
}

.student-private-note-editor-heading {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eaecf0;
}

@media (max-width: 720px) {
  .staff-student-profile-heading {
    display: grid;
    gap: 10px;
  }

  .staff-student-profile-updated {
    min-width: 0;
    text-align: left;
  }

  .staff-student-profile-grid {
    grid-template-columns: 1fr;
  }

  .staff-student-profile-value,
  .staff-student-profile-value.is-wide {
    grid-column: auto;
  }
}

/* ===== 2026-07-29 契約管理：受講証明書PDF ===== */
.course-certificate-panel {
  display: grid;
  gap: 16px;
}

.course-certificate-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.course-certificate-heading h3 {
  margin-bottom: 6px;
}

.course-certificate-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.course-certificate-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #f2c8cc;
  border-radius: 999px;
  background: #fff4f5;
  color: #b31319;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.course-certificate-student-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.course-certificate-student-line span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.course-certificate-student-line strong {
  color: #1d2939;
  font-size: 15px;
}

.course-certificate-student-line small {
  color: #667085;
  font-size: 12px;
}

.course-certificate-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.course-certificate-form-grid > div {
  min-width: 0;
}

.course-certificate-options {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.course-certificate-options-title {
  margin-bottom: 8px;
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.course-certificate-options .checkbox-row {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid #f0f2f5;
}

.course-certificate-options .checkbox-row:first-of-type {
  border-top: 0;
}

.course-certificate-options .checkbox-row span {
  display: grid;
  gap: 3px;
}

.course-certificate-options .checkbox-row strong {
  color: #1d2939;
  font-size: 14px;
}

.course-certificate-options .checkbox-row small {
  color: #667085;
  font-size: 12px;
  line-height: 1.55;
}

.course-certificate-always-included {
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border-left: 4px solid var(--primary);
  border-radius: 0 10px 10px 0;
  background: #fff7f7;
}

.course-certificate-always-included b {
  color: #b31319;
  font-size: 13px;
}

.course-certificate-always-included span {
  color: #475467;
  font-size: 12px;
  line-height: 1.65;
}

.course-certificate-limit-note {
  margin: 0;
}

.course-certificate-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.course-certificate-actions button {
  min-width: 230px;
}

@media (max-width: 700px) {
  .course-certificate-heading {
    align-items: center;
  }

  .course-certificate-form-grid {
    grid-template-columns: 1fr;
  }

  .course-certificate-student-line {
    display: grid;
    gap: 4px;
  }

  .course-certificate-actions button {
    width: 100%;
    min-width: 0;
  }
}

/* ===== 2026-07-29 Day6：画面全体の縦スクロール対応 ===== */
/*
 * Day6のライブ学習画面は、PC表示でbody・main・content・画面本体に
 * 100dvh固定とoverflow:hiddenが重なっています。
 * 通常の内部スクロール（会話ログ）は維持しつつ、画面全体の要素が
 * ウィンドウ高を超える場合はページ全体を縦スクロール可能にします。
 */
html:has(body.ai-conversation-active),
body.ai-conversation-active {
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  scrollbar-gutter: stable;
}

body.ai-conversation-active #appView,
body.ai-conversation-active .app {
  width: 100% !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow: visible !important;
}

body.ai-conversation-active .main,
body.ai-conversation-active.app-mode .main,
body.ai-conversation-active.practical-study-active .main {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
}

body.ai-conversation-active #content,
body.ai-conversation-active.practical-study-active #content {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body.ai-conversation-active
.ai-conversation-session-shell.day6-live-screen {
  grid-template-rows:
    auto
    auto
    auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: calc(100dvh - 56px) !important;
  max-height: none !important;
  overflow: visible !important;
}

body.ai-conversation-active
.day6-live-content.ai-conversation-live-grid,
body.ai-conversation-active
.day6-live-content.ai-conversation-live-grid.controls-expanded {
  grid-template-rows: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body.ai-conversation-active
.day6-live-controls.day6-live-controls-compact {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/*
 * 会話ログ自体は従来どおりカード内でスクロールできます。
 * ページ全体のスクロールと競合しないよう、横方向だけを固定します。
 */
body.ai-conversation-active
.day6-live-transcript.ai-conversation-transcript {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 900px) {
  html:has(body.ai-conversation-active),
  body.ai-conversation-active {
    min-height: 100dvh !important;
    scrollbar-gutter: auto;
  }

  body.ai-conversation-active .main,
  body.ai-conversation-active.app-mode .main,
  body.ai-conversation-active.practical-study-active .main {
    min-height: 100dvh !important;
    padding-bottom: 92px !important;
  }

  body.ai-conversation-active
  .ai-conversation-session-shell.day6-live-screen {
    min-height: 100dvh !important;
    padding-bottom: 92px !important;
  }
}

/*
 * 高さの低いPC画面では、固定されたカード寸法を保ったまま、
 * 画面全体をスクロールして下部コントロールへ到達できるようにします。
 */
@media (min-width: 901px) and (max-height: 760px) {
  body.ai-conversation-active
  .ai-conversation-session-shell.day6-live-screen {
    min-height: 620px !important;
  }
}

/* ===== 2026-07-29 生徒受講スケジュール：過去月・レッスンノート対応 ===== */
.student-schedule-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  border: 1px solid var(--line);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}

.student-schedule-table-wrap
.student-schedule-lesson-table {
  width: 100% !important;
  min-width: 620px !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse;
}

.student-schedule-lesson-table
.student-schedule-col-lesson {
  width: 15% !important;
}

.student-schedule-lesson-table
.student-schedule-col-datetime {
  width: 41% !important;
}

.student-schedule-lesson-table
.student-schedule-col-status {
  width: 18% !important;
}

.student-schedule-lesson-table
.student-schedule-col-note {
  width: 26% !important;
}

.student-schedule-table-wrap
.student-schedule-lesson-table th,
.student-schedule-table-wrap
.student-schedule-lesson-table td {
  width: auto !important;
  min-width: 0 !important;
  padding: 11px 14px !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  vertical-align: middle;
}

.student-schedule-table-wrap
.student-schedule-lesson-table th {
  background: #f8fafc;
  font-weight: 700;
}

.student-schedule-note-cell {
  text-align: center;
}

.student-schedule-note-button {
  width: auto !important;
  min-width: 88px;
  max-width: 100%;
  padding: 8px 16px !important;
  white-space: nowrap !important;
}

.student-schedule-history-card {
  overflow: visible;
}

.student-schedule-history-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.student-schedule-history-month {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.student-schedule-history-month > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  background: #f8fafc;
  color: var(--text);
  font-weight: 700;
}

.student-schedule-history-month > summary::-webkit-details-marker {
  display: none;
}

.student-schedule-history-month > summary::after {
  content: "＋";
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: var(--red);
}

.student-schedule-history-month[open] > summary::after {
  content: "－";
}

.student-schedule-history-title {
  font-size: 16px;
}

.student-schedule-history-range {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.student-schedule-history-content {
  padding: 14px 16px 16px;
}

.lesson-note-schedule-back {
  margin: 10px 0 16px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .student-schedule-table-wrap
  .student-schedule-lesson-table {
    width: 620px !important;
    min-width: 620px !important;
    max-width: none !important;
  }

  .student-schedule-table-wrap
  .student-schedule-lesson-table th,
  .student-schedule-table-wrap
  .student-schedule-lesson-table td {
    padding: 10px 11px !important;
    font-size: 12.5px !important;
  }

  .student-schedule-note-button {
    min-width: 76px;
    padding: 7px 12px !important;
    font-size: 12px !important;
  }

  .student-schedule-history-month > summary {
    align-items: flex-start;
    gap: 8px;
    padding: 13px 14px;
  }

  .student-schedule-history-range {
    max-width: 52%;
    text-align: right;
    white-space: normal;
  }

  .student-schedule-history-content {
    padding: 12px;
  }
}

/* ===== 2026-07-29 生徒受講スケジュール：過去レッスンのボタン表示 ===== */
.student-schedule-history-launcher {
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
}

.student-schedule-history-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto !important;
  min-width: 220px;
  min-height: 46px;
  padding: 10px 18px !important;
  font-weight: 700;
}

.student-schedule-history-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: rgba(218, 18, 32, 0.08);
  color: var(--red);
  font-size: 18px;
  line-height: 1;
}

.student-schedule-history-card {
  margin-top: 12px !important;
  scroll-margin-top: 18px;
}

.student-schedule-history-card[hidden] {
  display: none !important;
}

.student-schedule-history-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.student-schedule-history-card-header h3 {
  margin-bottom: 4px;
}

@media (max-width: 640px) {
  .student-schedule-history-launcher {
    width: 100%;
  }

  .student-schedule-history-toggle {
    width: 100% !important;
    min-width: 0;
  }

  .student-schedule-history-card {
    margin-top: 10px !important;
  }
}

/* ===== 2026-07-29 生徒スマホ：下部メニュー下側余白を約半分へ縮小 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.student-mobile-nav-enabled {
    --student-bottom-nav-height: 64px !important;
    --student-bottom-nav-safe-gap:
      min(
        15px,
        env(safe-area-inset-bottom, 0px)
      );
  }

  body.student-mobile-nav-enabled
  .student-bottom-nav {
    height: calc(
      var(--student-bottom-nav-height)
      + var(--student-bottom-nav-safe-gap)
    ) !important;
    min-height: calc(
      var(--student-bottom-nav-height)
      + var(--student-bottom-nav-safe-gap)
    ) !important;
    padding:
      0
      5px
      calc(
        1px
        + var(--student-bottom-nav-safe-gap)
      ) !important;
    align-items: center !important;
  }

  body.student-mobile-nav-enabled
  .student-bottom-nav-button {
    min-height: 58px !important;
    padding: 3px 2px 1px !important;
  }

  /*
   * メニューを開いた際のパネル下端も、
   * 実際の下部メニュー高に合わせます。
   */
  body.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  body.student-mobile-nav-enabled
  .student-mobile-hub-panel {
    bottom: calc(
      var(--student-bottom-nav-height)
      + var(--student-bottom-nav-safe-gap)
    ) !important;
  }

  /*
   * ページ本文の末尾が下部メニューに隠れない範囲で、
   * 従来より過剰だった下側スペースも調整します。
   */
  body.student-mobile-nav-enabled
  .main {
    padding-bottom: calc(
      var(--student-bottom-nav-height)
      + 16px
      + var(--student-bottom-nav-safe-gap)
    ) !important;
  }
}

/* ===== 2026-07-29 生徒メニュー：5カテゴリ再編（PC・スマホ共通） ===== */
@media (min-width: 821px) {
  .sidebar
  .nav-group-title.student-nav-group-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px;
  }

  .student-nav-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    color: currentColor;
  }

  .student-nav-group-icon
  .student-mobile-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke-width: 2;
  }

  .sidebar #nav
  .student-nav-item {
    position: relative;
    width: 100%;
    padding-left: 15px !important;
  }

  .sidebar #nav
  .student-nav-item-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.35;
  }

  .sidebar #nav
  .student-nav-item.danger {
    margin-top: 3px !important;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.student-mobile-nav-enabled
  .student-bottom-nav-button {
    letter-spacing: -0.01em;
  }

  body.student-mobile-nav-enabled
  .student-bottom-nav-button
  > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  body.student-mobile-nav-enabled
  .student-mobile-menu-grid.learning-layout
  .student-mobile-menu-card.prominent {
    grid-column: 1 / -1;
  }

  body.student-mobile-nav-enabled
  .student-mobile-menu-card.danger {
    border-color: #fda4af !important;
    background: #fff7f8 !important;
  }
}

@media (max-width: 370px) {
  body.student-mobile-nav-enabled
  .student-bottom-nav-button {
    font-size: 9.8px !important;
  }
}

/* ===== 2026-07-29 生徒メニュー統合・連絡カード・PC見出し調整 ===== */

/*
 * PC：
 * カテゴリ名とカテゴリ用アイコンを、その下の各メニューと
 * 同じ14.5pxへ統一します。
 */
@media (min-width: 821px) {
  .sidebar #nav
  .nav-group-title.student-nav-group-title {
    gap: 6px !important;
    min-height: 32px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }

  .sidebar #nav
  .nav-group-title.student-nav-group-title
  > span:not(.student-nav-group-icon) {
    font-size: 14.5px !important;
    line-height: 1.35 !important;
  }

  .sidebar #nav
  .student-nav-group-icon {
    width: 14.5px !important;
    height: 14.5px !important;
    flex: 0 0 14.5px !important;
  }

  .sidebar #nav
  .student-nav-group-icon
  .student-mobile-icon {
    width: 14.5px !important;
    height: 14.5px !important;
    flex: 0 0 14.5px !important;
    stroke-width: 1.9 !important;
  }
}

/*
 * スマホ「連絡」：
 * 学習・レッスン内の通常カードと同じ寸法にし、
 * アイコン・文字を中央揃えにします。
 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.student-mobile-nav-enabled
  .student-mobile-menu-grid.communication-layout {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.student-mobile-nav-enabled
  .student-mobile-menu-grid.communication-layout
  .student-mobile-menu-card {
    min-height: 94px !important;
    padding: 12px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-align: center !important;
  }

  body.student-mobile-nav-enabled
  .student-mobile-menu-grid.communication-layout
  .student-mobile-menu-card
  .student-mobile-icon {
    width: 29px !important;
    height: 29px !important;
    flex: 0 0 29px !important;
  }

  body.student-mobile-nav-enabled
  .student-mobile-menu-grid.communication-layout
  .student-mobile-menu-card-label {
    width: 100%;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }
}

/* ===== 2026-07-29 メッセージ：宛先アイコン・相手表示の明確化 ===== */
.message-page-navigation
.message-destination-grid {
  align-items: stretch;
}

button.destination-card.message-channel-card {
  min-height: 138px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 17px 14px 15px !important;
  text-align: center !important;
}

.message-channel-card-icon-wrap {
  position: relative;
  display: inline-flex;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  align-items: center;
  justify-content: center;
}

.message-channel-card-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfe5ee;
  border-radius: 16px;
  background: #f5f7fa;
  color: #344054;
  transition:
    border-color .16s ease,
    background-color .16s ease,
    color .16s ease,
    transform .16s ease;
}

.message-channel-card-icon
.student-mobile-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
}

.message-channel-card.is-person
.message-channel-card-icon {
  background: #f1f5ff;
  color: #344b78;
}

.message-channel-card.is-office
.message-channel-card-icon {
  background: #fff4f5;
  color: #b4232d;
}

.message-channel-card.is-system
.message-channel-card-icon {
  background: #f4f5f7;
  color: #475467;
}

.message-channel-selected-mark {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: inline-flex;
  width: 23px;
  height: 23px;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  opacity: 0;
  transform: scale(.72);
  transition:
    opacity .16s ease,
    transform .16s ease;
}

.message-channel-selected-mark svg {
  width: 14px;
  height: 14px;
}

.message-channel-card.is-active
.message-channel-selected-mark {
  opacity: 1;
  transform: scale(1);
}

.message-channel-card.is-active
.message-channel-card-icon {
  border-color: rgba(209, 19, 31, .32);
  background: #fff;
  color: var(--primary);
  transform: translateY(-1px);
}

.message-channel-card-copy {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.message-channel-card-title {
  width: 100%;
  text-align: center !important;
}

.message-channel-card-description {
  width: 100%;
  text-align: center !important;
}

/*
 * 旧「表示中」文字バッジは使用しません。
 * 選択状態はカードの赤い枠・背景・チェックで表します。
 */
.message-channel-status {
  display: none !important;
}

.message-conversation-card {
  padding-top: 0 !important;
  overflow: hidden;
}

.message-chat-recipient-header {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 -16px 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #e4e7ec;
  background: #f8fafc;
}

.message-chat-recipient-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfe5ee;
  border-radius: 13px;
  background: #fff;
  color: #344054;
}

.message-chat-recipient-icon
.student-mobile-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
}

.message-chat-recipient-header.is-person
.message-chat-recipient-icon {
  color: #344b78;
}

.message-chat-recipient-header.is-office
.message-chat-recipient-icon {
  color: #b4232d;
}

.message-chat-recipient-header.is-system
.message-chat-recipient-icon {
  color: #475467;
}

.message-chat-recipient-copy {
  min-width: 0;
}

.message-chat-recipient-eyebrow {
  display: block;
  margin-bottom: 1px;
  color: #667085;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
}

.message-chat-recipient-copy h3,
.message-chat-recipient-copy p {
  margin: 0;
}

.message-chat-recipient-copy h3 {
  color: #101828;
  font-size: 16px;
  line-height: 1.4;
}

.message-chat-recipient-copy p {
  margin-top: 2px;
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
}

/*
 * 生徒ページでは独立したmessage-active-contextを生成しません。
 * 既存の講師・管理者画面で生成される場合は従来表示を維持します。
 */
body.student-mobile-nav-enabled
.message-page-navigation
+ .message-chat-area {
  margin-top: 12px;
}

@media (max-width: 700px) {
  button.destination-card.message-channel-card {
    min-height: 100px !important;
    gap: 6px !important;
    padding: 10px 5px 9px !important;
  }

  .message-channel-card-icon-wrap {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .message-channel-card-icon {
    width: 39px;
    height: 39px;
    border-radius: 12px;
  }

  .message-channel-card-icon
  .student-mobile-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
  }

  .message-channel-selected-mark {
    right: -4px;
    bottom: -4px;
    width: 19px;
    height: 19px;
  }

  .message-channel-selected-mark svg {
    width: 11px;
    height: 11px;
  }

  .message-channel-card-title {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .message-chat-recipient-header {
    gap: 10px;
    margin: 0 -14px 14px;
    padding: 12px 14px;
  }

  .message-chat-recipient-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
  }

  .message-chat-recipient-icon
  .student-mobile-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
  }

  .message-chat-recipient-copy h3 {
    font-size: 14px;
  }

  .message-chat-recipient-copy p {
    font-size: 11px;
  }
}

/* ===== 2026-07-29 講師・管理者：5カテゴリメニュー（PC・スマホ共通） ===== */

/*
 * スマホでは、生徒アカウントと同じ下部メニューを使用します。
 * student-mobile-nav-enabledは共通レイアウト用クラスとして
 * 講師・管理者にも付与されます。
 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.teacher-mobile-nav-enabled
  .student-mobile-menu-card,
  body.admin-mobile-nav-enabled
  .student-mobile-menu-card {
    align-items: center !important;
    justify-content: center !important;
    min-height: 94px;
    text-align: center !important;
  }

  body.teacher-mobile-nav-enabled
  .student-mobile-menu-card-label,
  body.admin-mobile-nav-enabled
  .student-mobile-menu-card-label {
    width: 100%;
    text-align: center !important;
  }

  body.teacher-mobile-nav-enabled
  .student-mobile-menu-card
  .student-mobile-icon,
  body.admin-mobile-nav-enabled
  .student-mobile-menu-card
  .student-mobile-icon {
    margin-right: auto;
    margin-left: auto;
  }

  /*
   * 管理者の長いカテゴリ名も5分割の下部メニュー内に収めます。
   */
  body.admin-mobile-nav-enabled
  .student-bottom-nav-button,
  body.teacher-mobile-nav-enabled
  .student-bottom-nav-button {
    min-width: 0;
    font-size: 10px !important;
    letter-spacing: -0.035em;
  }

  body.admin-mobile-nav-enabled
  .student-bottom-nav-button
  > span,
  body.teacher-mobile-nav-enabled
  .student-bottom-nav-button
  > span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
  }

  body.admin-mobile-nav-enabled
  .student-mobile-menu-grid,
  body.teacher-mobile-nav-enabled
  .student-mobile-menu-grid {
    align-items: stretch;
  }

  body.admin-mobile-nav-enabled
  .student-mobile-menu-grid
  .student-mobile-menu-card,
  body.teacher-mobile-nav-enabled
  .student-mobile-menu-grid
  .student-mobile-menu-card {
    height: 100%;
  }
}

/*
 * PCは既存のサイドメニュー方向を維持します。
 * 生徒・講師・管理者で、カテゴリ見出しとアイコンの見た目を統一します。
 */
@media (min-width: 821px) {
  .sidebar #nav
  .student-nav-group-title {
    margin-top: 14px;
  }

  .sidebar #nav
  .student-nav-group-title:first-child {
    margin-top: 0;
  }

  .sidebar #nav
  .student-nav-item.danger {
    color: #fecaca !important;
  }
}

/* ===== 2026-07-29 講師教材一覧：実践コース個別質問表示の復元 ===== */
.teacher-material-practical-question-day {
  padding-bottom: 16px;
}

.teacher-material-practical-individual-questions {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding-left: 28px;
}

.teacher-material-practical-individual-questions li {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--text);
  line-height: 1.7;
}

.teacher-material-day-problems.is-practical-course
.teacher-material-question-days {
  gap: 14px;
}

@media (max-width: 700px) {
  .teacher-material-practical-individual-questions {
    padding-left: 24px;
  }

  .teacher-material-practical-individual-questions li {
    padding: 10px 11px;
    font-size: 13px;
  }
}

/* ===== 2026-07-29 講師教材一覧：実践コース問題番号重複修正 ===== */
.teacher-material-practical-individual-questions {
  list-style-position: outside;
}

.teacher-material-practical-individual-questions li::marker {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ===== 2026-07-29 全アカウント：メッセージ「表示中」カード削除 ===== */
/*
 * 生徒・講師・管理者のPC／スマホ共通で、
 * 独立した「表示中」コンテキストカードを表示しません。
 * 古いHTMLが一時的にキャッシュされていても非表示にします。
 */
.message-active-context,
#messageActiveContext {
  display: none !important;
}

/* ===== 2026-07-29 講師・管理者スマホ：通常カードデザインへ統一 ===== */
/*
 * 赤いprominentカードは生徒アカウントの
 * 「課題学習」「レッスン参加」だけに限定します。
 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.teacher-mobile-nav-enabled
  .student-mobile-menu-card.prominent,
  body.admin-mobile-nav-enabled
  .student-mobile-menu-card.prominent {
    grid-column: auto !important;
    min-height: 94px !important;
    padding: 12px 8px !important;
    border-color: var(--line) !important;
    background: #fff !important;
    color: var(--text) !important;
    box-shadow: none !important;
  }

  body.teacher-mobile-nav-enabled
  .student-mobile-menu-card.prominent:hover,
  body.teacher-mobile-nav-enabled
  .student-mobile-menu-card.prominent:focus,
  body.teacher-mobile-nav-enabled
  .student-mobile-menu-card.prominent:focus-visible,
  body.teacher-mobile-nav-enabled
  .student-mobile-menu-card.prominent:active,
  body.admin-mobile-nav-enabled
  .student-mobile-menu-card.prominent:hover,
  body.admin-mobile-nav-enabled
  .student-mobile-menu-card.prominent:focus,
  body.admin-mobile-nav-enabled
  .student-mobile-menu-card.prominent:focus-visible,
  body.admin-mobile-nav-enabled
  .student-mobile-menu-card.prominent:active {
    border-color: #d7dde7 !important;
    background: #f8fafc !important;
    color: var(--text) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.teacher-mobile-nav-enabled
  .student-mobile-menu-card.prominent
  .student-mobile-icon,
  body.admin-mobile-nav-enabled
  .student-mobile-menu-card.prominent
  .student-mobile-icon {
    width: 29px !important;
    height: 29px !important;
    flex: 0 0 29px !important;
    color: inherit !important;
  }

  body.teacher-mobile-nav-enabled
  .student-mobile-menu-card.prominent
  .student-mobile-menu-card-label,
  body.admin-mobile-nav-enabled
  .student-mobile-menu-card.prominent
  .student-mobile-menu-card-label {
    color: var(--text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  body.teacher-mobile-nav-enabled
  .student-mobile-menu-card.prominent
  .student-mobile-menu-card-subtitle,
  body.admin-mobile-nav-enabled
  .student-mobile-menu-card.prominent
  .student-mobile-menu-card-subtitle {
    color: var(--muted) !important;
  }
}

/* ===== 2026-07-29 講師ビデオフィードバック：スマホ録画黒画面修正 ===== */
.video-preview-shell video {
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .video-preview-shell {
    /*
     * スマホのカメラ映像は縦長になる場合があるため、
     * 16:9を強制せず、画面幅を基準に安定した高さを確保します。
     */
    width: 100% !important;
    max-width: 640px !important;
    aspect-ratio: auto !important;
    min-height: min(62vw, 360px);
    max-height: 62vh;
  }

  .video-preview-shell video {
    position: relative;
    width: 100% !important;
    min-height: min(62vw, 360px);
    max-height: 62vh !important;
    object-fit: contain !important;
    background: #101114 !important;
  }
}

@media (max-width: 520px) {
  .video-preview-shell {
    min-height: 56vw;
    max-height: 54vh;
    border-radius: 10px;
  }

  .video-preview-shell video {
    min-height: 56vw;
    max-height: 54vh !important;
  }
}

/* ===== 2026-07-29 全アカウントPC：各メニュー文字を少し細く調整 ===== */
@media (min-width: 821px) {
  /*
   * 生徒・講師・管理者の各メニュー項目だけを、
   * 従来の700から500へ変更します。
   */
  .sidebar #nav
  button.student-nav-item,
  .sidebar #nav
  button.student-nav-item
  .student-nav-item-label {
    font-weight: 500 !important;
  }

  /*
   * 選択中・危険操作の項目も文字の太さは統一します。
   * 背景色、文字色、枠線などの状態表示は従来どおりです。
   */
  .sidebar #nav
  button.student-nav-item.active,
  .sidebar #nav
  button.student-nav-item.danger,
  .sidebar #nav
  button.student-nav-item.active
  .student-nav-item-label,
  .sidebar #nav
  button.student-nav-item.danger
  .student-nav-item-label {
    font-weight: 500 !important;
  }

  /*
   * カテゴリ名は現在の太さを維持します。
   */
  .sidebar #nav
  .nav-group-title.student-nav-group-title,
  .sidebar #nav
  .nav-group-title.student-nav-group-title
  > span:not(.student-nav-group-icon) {
    font-weight: 700 !important;
  }
}

/* ===== 2026-07-29 講師・管理者スマホ：下部メニューを生徒と同一サイズに統一 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /*
   * 生徒アカウントの下部メニューと同じ値を適用します。
   * 講師・管理者だけに設定されていた10px・強い文字詰めを解除します。
   */
  body.teacher-mobile-nav-enabled
  .student-bottom-nav-button,
  body.admin-mobile-nav-enabled
  .student-bottom-nav-button {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
  }

  body.teacher-mobile-nav-enabled
  .student-bottom-nav-button
  .student-mobile-icon,
  body.admin-mobile-nav-enabled
  .student-bottom-nav-button
  .student-mobile-icon {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
  }
}

/*
 * 横幅の狭い端末でも、生徒アカウントと同じ縮小値を使用します。
 */
@media (max-width: 370px) {
  body.teacher-mobile-nav-enabled
  .student-bottom-nav-button,
  body.admin-mobile-nav-enabled
  .student-bottom-nav-button {
    font-size: 9.8px !important;
  }

  body.teacher-mobile-nav-enabled
  .student-bottom-nav-button
  .student-mobile-icon,
  body.admin-mobile-nav-enabled
  .student-bottom-nav-button
  .student-mobile-icon {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
  }
}

/* ===== 2026-07-29 基礎コース：記事ラベルを「文法」へ変更 ===== */
/*
 * 課題学習のWeek見出し左側ラベルをコース別に表示します。
 * 実践コースは「記事」、基礎コースは「文法」です。
 * PC・スマホ共通で適用します。
 */
.study-selected-week-title.is-practical-course::before {
  content: "記事" !important;
}

.study-selected-week-title.is-basic-course::before {
  content: "文法" !important;
  letter-spacing: 0.04em;
}

/* ===== 2026-07-29 Day6開始前設定：狭い表示領域へのレスポンシブ対応 ===== */
/*
 * PCのサイドメニューを除いた実際のコンテンツ幅に応じて
 * 2列／1列を切り替えるため、コンテナークエリを使用します。
 */
.day6-setup-screen {
  max-width: 100% !important;
  min-width: 0 !important;
  container-type: inline-size;
  container-name: day6-setup;
}

.day6-setup-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns:
    minmax(280px, .92fr)
    minmax(0, 1.08fr) !important;
}

.day6-setup-summary,
.day6-setup-settings,
.day6-setup-summary-body,
.day6-setup-fields,
.day6-setup-identity-grid,
.day6-setup-range-grid,
.day6-setup-actions {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.day6-setup-identity-grid label,
.day6-setup-considerations,
.day6-setup-range-card {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.day6-setup-identity-grid input,
.day6-setup-identity-grid select,
.day6-setup-considerations textarea,
.day6-setup-range-card input[type="range"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.day6-setup-range-heading,
.day6-setup-range-scale {
  min-width: 0;
}

.day6-setup-range-heading strong,
.day6-setup-range-scale span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.day6-setup-actions {
  flex-wrap: wrap;
}

.day6-setup-actions button,
.day6-setup-actions #aiConversationStartButton,
.day6-setup-actions #aiConversationSetupBackButton {
  max-width: 100%;
}

/*
 * サイドバー等を除いたDay6エリアが900px以下になったら、
 * 画像カードと設定カードを縦並びへ変更します。
 */
@container day6-setup (max-width: 900px) {
  .day6-setup-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .day6-setup-summary,
  .day6-setup-settings {
    width: 100% !important;
    max-width: 100% !important;
  }

  .day6-setup-summary {
    grid-template-columns:
      minmax(250px, .8fr)
      minmax(0, 1.2fr);
    grid-template-rows: auto;
  }

  .day6-setup-media {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
}

/*
 * さらに狭い場合は、左側の紹介カードも通常の縦並びへ戻します。
 */
@container day6-setup (max-width: 680px) {
  .day6-setup-summary {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .day6-setup-media {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .day6-setup-identity-grid,
  .day6-setup-range-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .day6-setup-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  .day6-setup-actions button,
  .day6-setup-actions #aiConversationStartButton,
  .day6-setup-actions #aiConversationSetupBackButton {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/*
 * コンテナークエリ非対応ブラウザ向けの安全策です。
 */
@supports not (container-type: inline-size) {
  @media (max-width: 1180px) {
    .day6-setup-grid {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }
}

/* ===== 2026-07-29 Day6：システムメッセージを上部オーバーレイだけに固定 ===== */
/*
 * Day6実行中は、成功・進行・警告・エラーを含む
 * すべてのシステムメッセージを画面上部オーバーレイへ表示します。
 *
 * 古いJavaScript／HTMLが一時的に残った場合も、
 * 会話コントロール内の結果欄を強制的に非表示にします。
 */
.day6-live-screen
#aiConversationActionResult,
.day6-live-controls
#aiConversationActionResult,
.day6-live-controls.day6-live-controls-compact
> #aiConversationActionResult,
.day6-live-controls.day6-live-controls-compact
> #aiConversationActionResult:empty,
.day6-live-controls.day6-live-controls-compact
> #aiConversationActionResult:not(:empty) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/*
 * 旧処理がhas-control-messageを付けても、
 * コントロール領域を拡張させません。
 */
.day6-live-screen,
.day6-live-screen.has-control-message {
  --day6-control-message-extra: 0px !important;
}

.day6-live-screen.has-control-message {
  height: auto !important;
}

@media (min-width: 901px) {
  .day6-live-screen,
  .day6-live-screen.has-control-message {
    grid-template-rows:
      auto
      minmax(0, 1fr)
      var(
        --day6-control-base-height,
        72px
      ) !important;
  }

  .day6-live-controls.day6-live-controls-compact {
    grid-template-rows:
      minmax(0, 1fr) !important;
    height:
      var(
        --day6-control-base-height,
        72px
      ) !important;
    min-height:
      var(
        --day6-control-base-height,
        72px
      ) !important;
  }
}

/* ===== 2026-07-29 Day6：高さ760px超のカード間余白を均等化 ===== */
/*
 * 中央カードは講師画像の構図を維持するため固定高ですが、
 * 外側グリッドの中央行だけが1frで伸びていました。
 * 余った高さを中央カードと会話コントロールの間へ入れず、
 * 3段を内容高で並べ、すべてのカード間隔を12pxに固定します。
 */
@media (min-width: 901px) and (min-height: 761px) {
  body.ai-conversation-active
  .ai-conversation-session-shell.day6-live-screen,
  .day6-live-screen,
  .day6-live-screen.has-control-message {
    grid-template-rows:
      auto
      auto
      auto !important;
    align-content: start !important;
    row-gap: 12px !important;
    column-gap: 12px !important;
  }

  body.ai-conversation-active
  .day6-live-content.ai-conversation-live-grid,
  body.ai-conversation-active
  .day6-live-content.ai-conversation-live-grid.controls-expanded,
  .day6-live-content.ai-conversation-live-grid,
  .day6-live-content.ai-conversation-live-grid.controls-expanded {
    align-self: start !important;
    align-items: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
  }

  body.ai-conversation-active
  .day6-live-controls.day6-live-controls-compact,
  .day6-live-controls.day6-live-controls-compact {
    align-self: start !important;
    margin: 0 !important;
  }

  /*
   * 中央2枚のカードはこれまでの高さと画像構図を維持します。
   * 画面が高くなっても無理に縦へ引き伸ばしません。
   */
  .day6-live-tutor-card,
  .day6-live-conversation-card {
    align-self: start !important;
  }
}

/* ===== 2026-07-29 全アカウントPC：メニュー項目を確実に細字化 ===== */
/*
 * 以前の指定はstudent-nav-itemクラスを前提としていました。
 * 今回は旧HTML・新HTMLのどちらでも適用されるよう、
 * #nav直下の全ボタンを直接指定します。
 */
@media (min-width: 821px) {
  .sidebar #nav.nav > button,
  .sidebar #nav.nav > button:hover,
  .sidebar #nav.nav > button:focus,
  .sidebar #nav.nav > button:focus-visible,
  .sidebar #nav.nav > button:active,
  .sidebar #nav.nav > button.active,
  .sidebar #nav.nav > button.danger,
  .sidebar #nav.nav > button.student-nav-item {
    font-weight: 400 !important;
    font-synthesis: none !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
  }

  .sidebar #nav.nav > button > span,
  .sidebar #nav.nav > button > .student-nav-item-label,
  .sidebar #nav.nav > button span,
  .sidebar #nav.nav > button strong,
  .sidebar #nav.nav > button b,
  .sidebar #nav.nav > button.active > span,
  .sidebar #nav.nav > button.danger > span {
    font-weight: 400 !important;
    font-synthesis: none !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
  }

  /*
   * カテゴリ名は従来どおり太字を維持します。
   */
  .sidebar #nav.nav
  > .nav-group-title,
  .sidebar #nav.nav
  > .nav-group-title.student-nav-group-title,
  .sidebar #nav.nav
  > .nav-group-title
  > span:not(.student-nav-group-icon) {
    font-weight: 700 !important;
    font-synthesis: auto !important;
  }
}

/* ===== 2026-07-29 全アカウントPC：カテゴリ名とメニューを同一サイズへ統一 ===== */
/*
 * 各メニューは基準フォントサイズ16pxで表示されていましたが、
 * カテゴリ名には14.5pxが明示されていたため、
 * カテゴリ名だけが小さく見えていました。
 */
@media (min-width: 821px) {
  /*
   * 生徒・講師・管理者の各メニュー項目を16pxで明示します。
   * 文字の太さは前回の400を維持します。
   */
  .sidebar #nav.nav > button,
  .sidebar #nav.nav > button > span,
  .sidebar #nav.nav > button > .student-nav-item-label,
  .sidebar #nav.nav > button span {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  /*
   * カテゴリ名も各メニューと同じ16pxへ変更します。
   * カテゴリ名の太さ700は維持します。
   */
  .sidebar #nav.nav
  > .nav-group-title,
  .sidebar #nav.nav
  > .nav-group-title.student-nav-group-title,
  .sidebar #nav.nav
  > .nav-group-title
  > span:not(.student-nav-group-icon) {
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }

  /*
   * カテゴリ見出しのアイコンも文字と同じ16pxへ統一します。
   */
  .sidebar #nav.nav
  > .nav-group-title
  .student-nav-group-icon {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
  }

  .sidebar #nav.nav
  > .nav-group-title
  .student-nav-group-icon
  .student-mobile-icon {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
  }
}

/* ===== 2026-07-29 Day6 PC：サイドメニュー重なり・中間幅レスポンシブ修正 ===== */

/*
 * 821px以上ではPCサイドバーを表示します。
 * Day6のmainへwidth:100%が指定されると、
 * 固定サイドバー分を含む幅として解釈される組み合わせがあったため、
 * app側で270pxを確保し、mainは残りの領域をautoで使用させます。
 */
@media (min-width: 821px) {
  body.ai-conversation-active
  #appView,
  body.ai-conversation-active
  .app {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 270px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body.ai-conversation-active
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    height: 100dvh !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    z-index: 80 !important;
  }

  body.ai-conversation-active
  .main,
  body.ai-conversation-active.app-mode
  .main,
  body.ai-conversation-active.practical-study-active
  .main {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  body.ai-conversation-active
  #content,
  body.ai-conversation-active.practical-study-active
  #content,
  body.ai-conversation-active
  .ai-conversation-session-shell.day6-live-screen {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  body.ai-conversation-active
  .day6-live-content,
  body.ai-conversation-active
  .day6-live-tutor-card,
  body.ai-conversation-active
  .day6-live-conversation-card,
  body.ai-conversation-active
  .day6-live-controls {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/*
 * サイドバーを除いたDay6領域が狭くなる中間幅では、
 * PC用の最小幅を持つ2列構成を維持すると横にはみ出します。
 *
 * 1240px以下では中央2カードを縦並びにし、
 * 会話コントロールも3段構成へ変更します。
 */
@media (min-width: 821px) and (max-width: 1240px) {
  body.ai-conversation-active
  .main,
  body.ai-conversation-active.app-mode
  .main,
  body.ai-conversation-active.practical-study-active
  .main {
    padding: 16px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body.ai-conversation-active
  .ai-conversation-session-shell.day6-live-screen {
    grid-template-rows:
      auto
      auto
      auto !important;
    height: auto !important;
    min-height: calc(100dvh - 32px) !important;
    max-height: none !important;
    align-content: start !important;
    overflow: visible !important;
  }

  body.ai-conversation-active
  .day6-live-content.ai-conversation-live-grid,
  body.ai-conversation-active
  .day6-live-content.ai-conversation-live-grid.controls-expanded {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;
    grid-template-rows:
      auto
      auto !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.ai-conversation-active
  .day6-live-tutor-card,
  body.ai-conversation-active
  .day6-live-conversation-card {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body.ai-conversation-active
  .day6-live-tutor-card {
    grid-row: 1 !important;
  }

  body.ai-conversation-active
  .day6-live-conversation-card {
    grid-row: 2 !important;
    min-height: 460px !important;
  }

  body.ai-conversation-active
  .day6-live-transcript.ai-conversation-transcript {
    min-height: 300px !important;
    max-height: 440px !important;
  }

  body.ai-conversation-active
  .day6-live-controls.day6-live-controls-compact {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;
    grid-template-rows:
      auto
      auto
      auto !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  body.ai-conversation-active
  .day6-control-compact-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    padding: 0 0 12px !important;
    border-right: 0 !important;
    border-bottom:
      1px solid var(--line) !important;
  }

  body.ai-conversation-active
  .day6-control-compact-settings {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  body.ai-conversation-active
  .day6-control-compact-row {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;
  }

  body.ai-conversation-active
  .day6-control-compact-actions {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 0 0 !important;
    border-left: 0 !important;
    border-top:
      1px solid var(--line) !important;
  }

  body.ai-conversation-active
  .day6-control-compact-actions
  button {
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/*
 * さらに狭いPC幅では、2つの設定スライダーも縦並びにします。
 */
@media (min-width: 821px) and (max-width: 1000px) {
  body.ai-conversation-active
  .day6-control-compact-settings {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  body.ai-conversation-active
  .day6-control-compact-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.ai-conversation-active
  .day6-control-compact-actions
  button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ===== 2026-07-29 全アカウントスマホ：下部メニューを完全に同一サイズへ統一 ===== */
/*
 * 実際の生徒アカウントの最終値は、
 * 通常幅で文字11.5px・アイコン25pxでした。
 *
 * 以前の講師・管理者用上書き（10.5px・23px）を無効化し、
 * 生徒・講師・管理者すべてに同じ共通セレクターを適用します。
 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.student-mobile-nav-enabled
  .student-bottom-nav-button {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    gap: 4px !important;
  }

  body.student-mobile-nav-enabled
  .student-bottom-nav-button
  .student-mobile-icon {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
    flex-basis: 25px !important;
  }
}

/*
 * 横幅370px以下では、現在の生徒アカウントの最終値へ
 * 3アカウントを統一します。
 */
@media (max-width: 370px) {
  body.student-mobile-nav-enabled
  .student-bottom-nav-button {
    font-size: 9.8px !important;
  }

  body.student-mobile-nav-enabled
  .student-bottom-nav-button
  .student-mobile-icon {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
    flex-basis: 23px !important;
  }
}

/* ===== 2026-07-29 教務管理者アカウント・講師品質管理 ===== */
.academic-manager-eyebrow{display:inline-block;margin-bottom:6px;color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.12em}
.academic-manager-hero{border-left:4px solid var(--primary);background:linear-gradient(135deg,rgba(209,19,31,.06),rgba(255,255,255,.96))}
.academic-summary-grid{align-items:stretch}
.academic-metric-card{display:flex;min-height:128px;flex-direction:column;justify-content:center;gap:5px}
.academic-metric-card>span{color:var(--muted);font-size:12px;font-weight:700}
.academic-metric-card>strong{color:var(--text);font-size:30px;line-height:1.1}
.academic-metric-card>strong.academic-duration-value{font-size:19px}
.academic-metric-card>small{color:var(--muted)}
.academic-dashboard-teacher-row{display:grid;width:100%;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;margin-bottom:8px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);text-align:left}
.academic-dashboard-teacher-row span:first-child{display:flex;min-width:0;flex-direction:column}
.academic-dashboard-teacher-row small{color:var(--muted);font-weight:400}
.academic-message-preview,.academic-assigned-student{display:grid;gap:3px;margin-bottom:8px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fafbfc}
.academic-message-preview span,.academic-message-preview small,.academic-assigned-student span{color:var(--muted)}
.academic-teacher-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.academic-teacher-card{display:flex;flex-direction:column;gap:16px}
.academic-teacher-card-head,.academic-quality-card-head,.academic-summary-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.academic-teacher-card-head h3,.academic-teacher-card-head p,.academic-quality-card-head h3,.academic-quality-card-head p{margin:0}
.academic-teacher-card-head p,.academic-quality-card-head p{margin-top:4px;color:var(--muted);font-size:12px}
.academic-teacher-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.academic-teacher-stats>div{padding:10px;border-radius:9px;background:#f6f7f9}
.academic-teacher-stats dt{color:var(--muted);font-size:11px}.academic-teacher-stats dd{margin:4px 0 0;font-size:18px;font-weight:800}
.academic-quality-list{display:grid;gap:16px}.academic-quality-card{display:grid;gap:15px}
.academic-quality-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:var(--muted);font-size:11px}
.academic-feedback-details{display:grid;gap:9px}.academic-feedback-item{display:grid;gap:5px;padding:11px;border:1px solid var(--line);border-radius:9px;background:#fafbfc;line-height:1.6}
.academic-feedback-item>b{color:var(--primary);font-size:11px}
.academic-review-controls{display:grid;gap:10px;padding:13px;border:1px solid rgba(209,19,31,.18);border-radius:11px;background:rgba(209,19,31,.035)}
.academic-review-controls textarea{min-height:88px}.academic-review-video{width:100%;max-height:520px;border-radius:11px;background:#101114}
.academic-video-message,.academic-note-review-body{padding:13px;border:1px solid var(--line);border-radius:10px;background:#fafbfc;line-height:1.7}
.academic-message-review-selectors,.academic-message-recipient-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.message-destination-grid-admin-three{grid-template-columns:repeat(3,minmax(0,1fr))!important}.message-destination-grid-four{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.academic-announcement-item{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding:12px;border:1px solid var(--line);border-radius:10px}.academic-announcement-item h4,.academic-announcement-item p{margin:0}.academic-announcement-item p,.academic-announcement-item small{color:var(--muted);font-size:11px}
@media(max-width:1100px){.message-destination-grid-four{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:980px){.academic-teacher-grid{grid-template-columns:minmax(0,1fr)}.academic-summary-header,.academic-quality-card-head{flex-direction:column}.academic-quality-meta{align-items:flex-start}}
@media(max-width:820px){.academic-teacher-grid,.academic-message-review-selectors,.academic-message-recipient-pair{grid-template-columns:minmax(0,1fr)}.academic-dashboard-teacher-row{grid-template-columns:minmax(0,1fr) auto}.message-destination-grid-admin-three,.message-destination-grid-four{grid-template-columns:repeat(2,minmax(0,1fr))!important}.academic-announcement-item{align-items:flex-start;flex-direction:column}}

/* ===== 2026-07-29 全アカウントPC中間幅：サイドメニュー余白最適化 ===== */
/*
 * 生徒・講師・教務管理者・管理者で共通の.sidebarを対象にします。
 * スマホへ切り替わる820px以下と、通常PC幅の961px以上には
 * 影響させません。
 */
@media (min-width: 821px) and (max-width: 960px) {
  .sidebar {
    padding:
      18px
      16px
      16px !important;
  }

  /*
   * 旧ルールではside-brandとimgの両方へ下余白があり、
   * ブラウザや画像の描画状態によって見た目が不安定でした。
   * 画像側の余白を0にして、コンテナ側へ一元化します。
   */
  .sidebar
  .side-brand {
    display: block !important;
    min-height: 0 !important;
    margin:
      0
      0
      22px !important;
    padding: 0 !important;
  }

  .sidebar
  .side-brand
  img {
    display: block !important;
    width: 146px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  .sidebar
  .side-user {
    margin:
      0
      0
      12px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .sidebar
  .nav,
  .sidebar
  #nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 1px !important;
    padding:
      0
      2px
      14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
  }
}

/*
 * 821～860pxでは、表示できる縦方向の情報量を増やしながら、
 * カテゴリと項目の区切りが分かる一定のリズムへ統一します。
 */
@media (min-width: 821px) and (max-width: 860px) {
  .sidebar {
    padding:
      14px
      13px
      12px !important;
  }

  .sidebar
  .side-brand {
    margin-bottom: 16px !important;
  }

  .sidebar
  .side-brand
  img {
    width: 138px !important;
  }

  .sidebar
  .side-user {
    margin-bottom: 8px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .sidebar
  .nav,
  .sidebar
  #nav {
    gap: 0 !important;
    padding:
      0
      1px
      10px !important;
  }

  .sidebar
  #nav.nav
  > .nav-group-title,
  .sidebar
  #nav.nav
  > .nav-group-title.student-nav-group-title {
    min-height: 27px !important;
    margin:
      6px
      4px
      1px !important;
    padding:
      3px
      0
      4px !important;
    gap: 6px !important;
    line-height: 1.25 !important;
  }

  .sidebar
  #nav.nav
  > button,
  .sidebar
  #nav.nav
  > button.student-nav-item {
    min-height: 32px !important;
    margin: 0 !important;
    padding:
      5px
      8px
      5px
      10px !important;
    line-height: 1.25 !important;
  }

  .sidebar
  #nav.nav
  > button
  .student-nav-item-label {
    line-height: 1.25 !important;
  }

  .sidebar
  #nav.nav
  > button.student-nav-item.danger {
    margin-top: 2px !important;
  }
}

/*
 * 861～960pxでは、ロゴとユーザー情報の間を明確に分離します。
 * 役割によってユーザー情報が1～4行になっても同じ余白です。
 */
@media (min-width: 861px) and (max-width: 960px) {
  .sidebar
  .side-brand {
    margin-bottom: 24px !important;
  }
}

/* ===== 2026-07-30 Day5：最初のAI音声開始まで読み込み画面を維持 ===== */
.ai-confirmation-initial-audio-action {
  display: grid;
  width: min(100%, 360px);
  gap: 9px;
  margin: 4px auto 14px;
}

.ai-confirmation-initial-audio-action button {
  width: 100%;
  min-height: 48px;
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
}

.ai-confirmation-initial-audio-action
#aiConfirmationInitialAudioResult {
  min-height: 1.4em;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .ai-confirmation-initial-audio-action {
    width: 100%;
  }

  .ai-confirmation-initial-audio-action button {
    min-height: 52px;
  }
}

/* ===== 2026-07-30 全アカウント：スマホ横向き時の左メニュー崩れ防止 ===== */
@media (hover: none) and (pointer: coarse) and (min-width: 821px) and (max-width: 960px) {
  body.student-mobile-nav-enabled
  .app {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    overflow-x: hidden !important;
  }

  body.student-mobile-nav-enabled
  .sidebar,
  body.student-mobile-nav-enabled
  .sidebar.open,
  body.student-mobile-nav-enabled
  #menuToggle,
  body.student-mobile-nav-enabled
  .menu-toggle {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    pointer-events: none !important;
    transform: none !important;
  }

  body.student-mobile-nav-enabled
  .main,
  body.student-mobile-nav-enabled.app-mode
  .main,
  body.student-mobile-nav-enabled.practical-study-active
  .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body.student-mobile-nav-enabled
  #content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.student-mobile-nav-enabled
  .student-bottom-nav {
    display: grid !important;
  }

  body.student-mobile-nav-enabled
  .student-bottom-nav.hidden {
    display: none !important;
  }
}

/* ===== 2026-07-30 Day5：確認テスト前の学習内容確定・編集不可確認 ===== */
body.day5-confirmation-lock-modal-open {
  overflow: hidden !important;
}

.day5-confirmation-lock-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4700;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12, 20, 34, .68);
  backdrop-filter: blur(3px);
}

.day5-confirmation-lock-modal {
  width: min(620px, 100%);
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  padding: 28px;
  border: 1px solid rgba(211, 18, 31, .28);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
}

.day5-confirmation-lock-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(211, 18, 31, .1);
  color: var(--primary);
  font-size: 28px;
  font-weight: 900;
}

.day5-confirmation-lock-heading {
  display: grid;
  gap: 4px;
}

.day5-confirmation-lock-heading > span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.day5-confirmation-lock-heading h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
}

.day5-confirmation-lock-lead {
  margin: 18px 0 12px;
  color: #344054;
  font-size: 16px;
  line-height: 1.75;
}

.day5-confirmation-lock-lead strong {
  color: var(--primary);
}

.day5-confirmation-lock-list {
  display: grid;
  gap: 9px;
  margin: 0 0 16px;
  padding-left: 22px;
  color: #344054;
  line-height: 1.65;
}

.day5-confirmation-lock-warning,
.day5-confirmation-lock-complete {
  display: grid;
  gap: 4px;
  margin: 16px 0;
  padding: 13px 15px;
  border-radius: 11px;
}

.day5-confirmation-lock-warning {
  border: 1px solid #f3b7bc;
  background: #fff5f6;
  color: #9f1722;
}

.day5-confirmation-lock-warning span {
  color: #7a2930;
  font-size: 13px;
}

.day5-confirmation-lock-complete {
  border: 1px solid #b7e5cb;
  background: #f0fff6;
  color: #137341;
  font-weight: 700;
}

.day5-confirmation-lock-check {
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.day5-confirmation-lock-actions {
  display: grid;
  grid-template-columns:
    minmax(0, .8fr)
    minmax(0, 1.4fr);
  gap: 10px;
  margin-top: 22px;
}

.day5-confirmation-lock-actions button {
  width: 100%;
  min-height: 48px;
  white-space: normal;
}

@media (max-width: 820px),
(hover: none) and (pointer: coarse) and (max-width: 960px) {
  .day5-confirmation-lock-modal-backdrop {
    align-items: end;
    padding:
      12px
      12px
      calc(12px + env(safe-area-inset-bottom));
  }

  .day5-confirmation-lock-modal {
    width: 100%;
    max-height: 90dvh;
    padding: 22px 18px;
    border-radius: 18px 18px 12px 12px;
  }

  .day5-confirmation-lock-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .day5-confirmation-lock-actions button {
    min-height: 52px;
  }
}

/* ===== 2026-07-30 生徒・講師・教務管理者別の規約管理 ===== */
.admin-legal-settings-intro {
  border-left:
    4px solid
    var(--primary);
  background:
    linear-gradient(
      135deg,
      rgba(211, 18, 31, .055),
      #fff
    );
}

.admin-legal-settings-intro
> span,
.admin-legal-audience-card-heading
> span,
.legal-audience-page-heading
> span,
.legal-audience-preview-heading
> span {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.admin-legal-settings-intro
h3,
.admin-legal-audience-card-heading
h3,
.legal-audience-page-heading
h3,
.legal-audience-preview-heading
h3 {
  margin:
    0
    0
    7px;
}

.admin-legal-settings-intro
ul {
  display: grid;
  gap: 5px;
  margin-bottom: 0;
  color: #475467;
}

.admin-legal-audience-settings-grid {
  align-items: stretch;
}

.admin-legal-audience-card {
  display: flex;
  flex-direction: column;
}

.admin-legal-audience-card
textarea {
  resize: vertical;
}

.teacher-legal-no-privacy-notice {
  margin-top: 14px;
  border:
    1px solid
    #d5dbe5;
  background: #f7f8fa;
  color: #475467;
}

.admin-contract-payment-settings {
  max-width: none;
}

.admin-payment-settings-grid {
  align-items: start;
}

.legal-audience-page,
.legal-admin-preview {
  display: grid;
  gap: 18px;
}

.legal-audience-page-heading,
.legal-audience-preview-heading {
  padding:
    18px
    20px;
  border-left:
    4px solid
    var(--primary);
  background: #fff;
}

.legal-audience-page-heading
p,
.legal-audience-preview-heading
p {
  margin: 0;
  color: var(--muted);
}

.legal-audience-preview-block {
  display: grid;
  gap: 12px;
  padding:
    18px;
  border:
    1px solid
    var(--line);
  border-radius: 13px;
  background:
    #f8f9fb;
}

.teacher-legal-card {
  border-top:
    3px solid
    #344b78;
}

.student-legal-card {
  border-top:
    3px solid
    var(--primary);
}

@media (max-width: 900px) {
  .admin-legal-audience-settings-grid,
  .admin-payment-settings-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }
}

@media (max-width: 820px),
(hover: none) and (pointer: coarse)
and (max-width: 960px) {
  .legal-audience-preview-block {
    padding: 12px;
  }

  .legal-audience-page-heading,
  .legal-audience-preview-heading {
    padding:
      15px
      16px;
  }
}

/* ===== 2026-07-30 全アカウント：縦横切替後のノッチ白抜け防止 ===== */
#mobileSafeAreaTopFill,
#mobileSafeAreaProbe {
  display: none;
}

@media (max-width: 820px),
(hover: none) and (pointer: coarse)
and (max-width: 960px) {
  /*
   * Safari/PWAがステータスバーを透明化した場合の下地を
   * HTML側へ常時確保します。各ページ本体の背景色は変更しません。
   */
  html.mobile-safe-area-red {
    background-color:
      #d1131f !important;
  }

  #mobileSafeAreaProbe {
    position: fixed;
    top: 0;
    left: -10000px;
    display: block;
    width: 0;
    height: 0;
    padding-top:
      env(
        safe-area-inset-top,
        0px
      );
    visibility: hidden;
    pointer-events: none;
  }

  #mobileSafeAreaTopFill {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483000;
    display: block;
    width: 100%;
    height: max(
      var(
        --mobile-safe-area-top,
        0px
      ),
      env(
        safe-area-inset-top,
        0px
      )
    );
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background:
      #d1131f !important;
    box-shadow:
      0 -1px 0 #d1131f;
    opacity: 1;
    pointer-events: none;
    transform:
      translate3d(0, 0, 0);
    will-change:
      transform,
      opacity;
    contain:
      layout
      paint
      style;
  }

  html.mobile-safe-area-repainting
  #mobileSafeAreaTopFill {
    transform:
      translate3d(
        0,
        .01px,
        0
      );
    opacity: .9999;
  }
}

/* ===== 2026-07-30 スマホ：ログイン見切れ・赤色統一（メニュー非変更） ===== */
:root {
  --mobile-app-red: #d1131f;
}

@media (max-width: 820px),
(hover: none) and (pointer: coarse)
and (max-width: 960px) {
  body.auth-mode {
    background: #fff !important;
  }

  body.auth-mode
  #loginView.login-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    place-items: start center !important;
    align-content: start !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 14px)
      14px
      calc(env(safe-area-inset-bottom, 0px) + 18px)
      !important;
    overflow: visible !important;
  }

  body.auth-mode .login-card {
    width: min(100%, 460px) !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  body.auth-mode .brand-login {
    margin-top: 0 !important;
  }

  body.auth-mode
  .brand-login
  .brand-logo-img {
    flex: 0 0 auto !important;
    max-width: 42% !important;
  }

  html.mobile-safe-area-red {
    background-color: var(--mobile-app-red) !important;
  }

  #mobileSafeAreaTopFill {
    background: var(--mobile-app-red) !important;
    box-shadow:
      0 -1px 0 var(--mobile-app-red)
      !important;
  }

  body.student-mobile-nav-enabled
  .topbar {
    background-color:
      var(--mobile-app-red)
      !important;
  }
}

/* ===== 2026-07-30 PWA：ヘッダー自然スクロール・ノッチ固定 ===== */
html.smaei-app-booting-root,
html.smaei-app-booting-root body,
html.smaei-app-booting-root body.app-booting,
html.smaei-app-booting-root .splash-screen {
  background:
    var(--mobile-app-red, #d1131f)
    !important;
}

html.smaei-app-runtime-root,
html.smaei-app-runtime-root.mobile-safe-area-red {
  background: #fff !important;
}

@media (max-width: 820px),
(hover: none) and (pointer: coarse)
and (max-width: 960px) {
  /*
   * 下部メニューは問題発生前の既存CSSをそのまま使用します。
   * このブロックではメニューの高さ・位置・余白に触れません。
   */
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.app-mode
  .main {
    padding-top: 0 !important;
  }

  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .topbar,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.header-hidden
  .topbar {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: calc(100% + 24px) !important;
    min-height: 52px !important;
    margin: 0 -12px 14px !important;
    padding:
      calc(8px + env(safe-area-inset-top, 0px))
      12px
      8px
      !important;
    transform: none !important;
    -webkit-transform: none !important;
    translate: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  html.smaei-standalone-app
  #mobileSafeAreaTopFill {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 2147483000 !important;
    background:
      var(--mobile-app-red, #d1131f)
      !important;
    pointer-events: none !important;
  }
}

/* ===== 2026-07-30 PWA：ヘッダー挙動維持（下部メニュー非変更） ===== */
@media (max-width: 820px),
(hover: none) and (pointer: coarse)
and (max-width: 960px) {
  html.smaei-standalone-app {
    --smaei-pwa-header-height:
      38px;
  }

  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .topbar-logo {
    display: block !important;
    width: 62px !important;
    max-width: 62px !important;
    height: auto !important;
    max-height: 26px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
  }

  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .topbar,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.header-hidden
  .topbar {
    position: fixed !important;
    top:
      var(
        --mobile-safe-area-top,
        env(safe-area-inset-top, 0px)
      )
      !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 2147481000 !important;

    width: 100% !important;
    height:
      var(--smaei-pwa-header-height)
      !important;
    min-height:
      var(--smaei-pwa-header-height)
      !important;
    max-height:
      var(--smaei-pwa-header-height)
      !important;

    margin: 0 !important;
    padding: 6px 12px !important;
    box-sizing: border-box !important;

    background:
      var(--mobile-app-red, #d1131f)
      !important;

    transform:
      translate3d(
        0,
        calc(
          0px
          - var(--mobile-header-offset, 0px)
        ),
        0
      )
      !important;
    -webkit-transform:
      translate3d(
        0,
        calc(
          0px
          - var(--mobile-header-offset, 0px)
        ),
        0
      )
      !important;
    transition: none !important;
    will-change: transform !important;
  }

  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.app-mode
  .main {
    padding-top: calc(
      var(--smaei-pwa-header-height)
      + env(safe-area-inset-top, 0px)
    ) !important;
  }

  html.smaei-standalone-app
  #mobileSafeAreaTopFill {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 2147483000 !important;
    background:
      var(--mobile-app-red, #d1131f)
      !important;
    pointer-events: none !important;
  }
}

@media (max-width: 390px) {
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .topbar-logo {
    width: 58px !important;
    max-width: 58px !important;
    max-height: 24px !important;
  }
}

/* ===== 2026-07-30 PWA：ヘッダー下余白・下部メニュー高さ最適化 ===== */
@media (max-width: 820px),
(hover: none) and (pointer: coarse)
and (max-width: 960px) {
  html.smaei-standalone-app {
    --smaei-pwa-content-top-gap:
      10px;
    --smaei-pwa-bottom-nav-height:
      67px;
    --smaei-pwa-bottom-button-height:
      54px;

    --student-bottom-nav-height:
      var(--smaei-pwa-bottom-nav-height)
      !important;
    --student-bottom-nav-safe-gap:
      0px !important;
    --student-visual-bottom-offset:
      0px !important;

    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /*
   * 100dvhではなく100vhでPWA全体を固定し、
   * 下部メニューの基準を画面全体の最下端へ戻します。
   */
  html.smaei-standalone-app
  body.student-mobile-nav-enabled {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  #appView,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .app {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /*
   * ヘッダー直下と最初のページ要素の間に10pxの余白を追加します。
   */
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.app-mode
  .main {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding-top: calc(
      var(--smaei-pwa-header-height, 38px)
      + env(safe-area-inset-top, 0px)
      + var(--smaei-pwa-content-top-gap)
    ) !important;
    padding-bottom: calc(
      var(--smaei-pwa-bottom-nav-height)
      + 12px
    ) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /*
   * 下部メニューは単一構造のまま、
   * 固定されたbodyの最下端へ配置します。
   */
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-bottom-nav {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height:
      var(--smaei-pwa-bottom-nav-height)
      !important;
    min-height:
      var(--smaei-pwa-bottom-nav-height)
      !important;
    max-height:
      var(--smaei-pwa-bottom-nav-height)
      !important;

    margin: 0 !important;
    padding: 3px 5px 8px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    align-content: center !important;

    border-radius: 0 !important;
    background: #fff !important;
    transform: none !important;
    -webkit-transform: none !important;
    translate: none !important;
  }

  /*
   * ボタンの見た目は保ちつつ、
   * メニュー内の過剰な上下余白を削減します。
   */
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-bottom-nav-button {
    position: static !important;
    top: auto !important;
    align-self: center !important;

    width: 100% !important;
    height:
      var(--smaei-pwa-bottom-button-height)
      !important;
    min-height:
      var(--smaei-pwa-bottom-button-height)
      !important;
    max-height:
      var(--smaei-pwa-bottom-button-height)
      !important;

    margin: 0 !important;
    padding: 2px 2px 1px !important;
    gap: 3px !important;
    box-sizing: border-box !important;

    transform: none !important;
    -webkit-transform: none !important;
    translate: none !important;
  }

  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-mobile-hub-panel {
    bottom:
      var(--smaei-pwa-bottom-nav-height)
      !important;
  }
}

/* ===== 2026-07-30 PWA：下部メニュー高さ・下余白の確実適用 ===== */

/*
 * navigator.standaloneで付与する同期クラス、
 * app.jsが付与するクラスのどちらでも適用します。
 */
@media (max-width: 820px),
(hover: none) and (pointer: coarse)
and (max-width: 960px) {
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled,
  body.smaei-standalone-app.student-mobile-nav-enabled {
    --smaei-pwa-bottom-nav-height:
      67px !important;
    --smaei-pwa-bottom-button-height:
      54px !important;
    --student-bottom-nav-height:
      67px !important;
    --student-bottom-nav-safe-gap:
      0px !important;
  }

  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .student-bottom-nav,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-bottom-nav,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled
  .student-bottom-nav,
  body.smaei-standalone-app.student-mobile-nav-enabled
  .student-bottom-nav {
    height: 67px !important;
    min-height: 67px !important;
    max-height: 67px !important;

    /*
     * 上側は現状維持、下側だけ5px相当から8pxへ拡大します。
     */
    padding:
      3px
      5px
      8px
      !important;

    box-sizing: border-box !important;
    align-items: center !important;
    align-content: center !important;
  }

  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .student-bottom-nav-button,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-bottom-nav-button,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled
  .student-bottom-nav-button,
  body.smaei-standalone-app.student-mobile-nav-enabled
  .student-bottom-nav-button {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;

    margin: 0 !important;
    padding:
      2px
      2px
      1px
      !important;

    box-sizing: border-box !important;
  }

  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .main,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.app-mode
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.app-mode
  .main,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled
  .main,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled.app-mode
  .main,
  body.smaei-standalone-app.student-mobile-nav-enabled
  .main,
  body.smaei-standalone-app.student-mobile-nav-enabled.app-mode
  .main {
    padding-bottom: 79px !important;
  }

  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .student-mobile-hub-panel,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-mobile-hub-panel,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled
  .student-mobile-hub-panel,
  body.smaei-standalone-app.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  body.smaei-standalone-app.student-mobile-nav-enabled
  .student-mobile-hub-panel {
    bottom: 67px !important;
  }
}

/*
 * CSSのdisplay-mode判定が利用できる環境では、
 * JavaScriptクラスの有無にかかわらず同じ値を適用します。
 */
@media (display-mode: standalone) and (max-width: 960px) {
  body.student-mobile-nav-enabled {
    --smaei-pwa-bottom-nav-height:
      67px !important;
    --smaei-pwa-bottom-button-height:
      54px !important;
    --student-bottom-nav-height:
      67px !important;
    --student-bottom-nav-safe-gap:
      0px !important;
  }

  body.student-mobile-nav-enabled
  .student-bottom-nav {
    height: 67px !important;
    min-height: 67px !important;
    max-height: 67px !important;
    padding: 3px 5px 8px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    align-content: center !important;
  }

  body.student-mobile-nav-enabled
  .student-bottom-nav-button {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    padding: 2px 2px 1px !important;
    box-sizing: border-box !important;
  }
}

/* ===== 2026-07-30 PWA：下部メニュー高さ1.2倍・要素上寄せ ===== */

/*
 * 現在の67px × 1.2 = 80.4px。
 * 端数を整理して80pxとし、増加分はすべてボタン下へ配置します。
 */
@media (max-width: 820px),
(hover: none) and (pointer: coarse)
and (max-width: 960px) {
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled,
  body.smaei-standalone-app.student-mobile-nav-enabled {
    --smaei-pwa-bottom-nav-height:
      80px !important;
    --smaei-pwa-bottom-button-height:
      54px !important;
    --student-bottom-nav-height:
      80px !important;
    --student-bottom-nav-safe-gap:
      0px !important;
  }

  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .student-bottom-nav,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-bottom-nav,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled
  .student-bottom-nav,
  body.smaei-standalone-app.student-mobile-nav-enabled
  .student-bottom-nav {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;

    /*
     * 上3px＋ボタン54px＋下23px＝80px。
     * 高くした13pxを下側へ加え、ボタンは上寄せにします。
     */
    padding:
      3px
      5px
      23px
      !important;

    box-sizing: border-box !important;
    align-items: start !important;
    align-content: start !important;
  }

  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .student-bottom-nav-button,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-bottom-nav-button,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled
  .student-bottom-nav-button,
  body.smaei-standalone-app.student-mobile-nav-enabled
  .student-bottom-nav-button {
    align-self: start !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    padding:
      2px
      2px
      1px
      !important;
    box-sizing: border-box !important;
  }

  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .main,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.app-mode
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.app-mode
  .main,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled
  .main,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled.app-mode
  .main,
  body.smaei-standalone-app.student-mobile-nav-enabled
  .main,
  body.smaei-standalone-app.student-mobile-nav-enabled.app-mode
  .main {
    padding-bottom: 92px !important;
  }

  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .student-mobile-hub-panel,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-mobile-hub-panel,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled
  .student-mobile-hub-panel,
  body.smaei-standalone-app.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  body.smaei-standalone-app.student-mobile-nav-enabled
  .student-mobile-hub-panel {
    bottom: 80px !important;
  }
}

/*
 * display-modeによるPWA判定でも同じ値を保証します。
 */
@media (display-mode: standalone) and (max-width: 960px) {
  body.student-mobile-nav-enabled {
    --smaei-pwa-bottom-nav-height:
      80px !important;
    --smaei-pwa-bottom-button-height:
      54px !important;
    --student-bottom-nav-height:
      80px !important;
    --student-bottom-nav-safe-gap:
      0px !important;
  }

  body.student-mobile-nav-enabled
  .student-bottom-nav {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    padding: 3px 5px 23px !important;
    box-sizing: border-box !important;
    align-items: start !important;
    align-content: start !important;
  }

  body.student-mobile-nav-enabled
  .student-bottom-nav-button {
    align-self: start !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    padding: 2px 2px 1px !important;
    box-sizing: border-box !important;
  }
}

/* ===== 2026-07-30 PWAタブレット：下部メニュー高さ最適化 ===== */

/*
 * 対象：
 * - ホーム画面から起動したPWA
 * - タッチ操作のタブレット
 * - CSS幅600～1366px
 *
 * スマートフォンPWAの80px設定には影響しません。
 */
@media
  (hover: none)
  and (pointer: coarse)
  and (min-width: 600px)
  and (max-width: 1366px) {
  html.smaei-pwa-layout-active,
  html.smaei-standalone-app {
    --smaei-tablet-bottom-safe-area:
      env(safe-area-inset-bottom, 0px);

    /*
     * 1.2倍化前の状態へ戻します。
     */
    --smaei-tablet-bottom-nav-content-height:
      67px;

    --smaei-tablet-bottom-nav-total-height:
      calc(
        var(
          --smaei-tablet-bottom-nav-content-height
        )
        + var(
          --smaei-tablet-bottom-safe-area
        )
      );

    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled,
  body.smaei-standalone-app.student-mobile-nav-enabled {
    --smaei-pwa-bottom-nav-height:
      var(
        --smaei-tablet-bottom-nav-content-height
      ) !important;
    --smaei-pwa-bottom-button-height:
      54px !important;
    --student-bottom-nav-height:
      var(
        --smaei-tablet-bottom-nav-content-height
      ) !important;
    --student-bottom-nav-safe-gap:
      var(
        --smaei-tablet-bottom-safe-area
      ) !important;

    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  /*
   * タブレットPWAではPC用サイドバーを表示せず、
   * 下部メニューを主ナビゲーションとして使用します。
   */
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .sidebar,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .sidebar.open,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  #menuToggle,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .menu-toggle,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .sidebar,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .sidebar.open,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  #menuToggle,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .menu-toggle {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    pointer-events: none !important;
    transform: none !important;
  }

  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  #appView,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .app,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  #appView,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .app {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /*
   * 本文末尾が、67pxのメニューと
   * iPadの下側安全領域へ隠れないようにします。
   */
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .main,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.app-mode
  .main,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.practical-study-active
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.app-mode
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.practical-study-active
  .main {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
    padding-bottom: calc(
      var(
        --smaei-tablet-bottom-nav-total-height
      )
      + 12px
    ) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  /*
   * タブレットのメニュー本体は1.2倍化前の67pxです。
   *
   * 上3px
   * ボタン54px
   * 下8px
   * 残余2pxは中央揃えで上下へ1pxずつ配分されます。
   *
   * ホームインジケーターの安全領域は、
   * この67pxのさらに下へ加えます。
   */
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .student-bottom-nav,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-bottom-nav,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled
  .student-bottom-nav,
  body.smaei-standalone-app.student-mobile-nav-enabled
  .student-bottom-nav {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2147482000 !important;

    display: grid !important;
    grid-template-columns:
      repeat(5, minmax(0, 1fr))
      !important;

    width: 100% !important;
    height:
      var(
        --smaei-tablet-bottom-nav-total-height
      ) !important;
    min-height:
      var(
        --smaei-tablet-bottom-nav-total-height
      ) !important;
    max-height:
      var(
        --smaei-tablet-bottom-nav-total-height
      ) !important;

    margin: 0 !important;
    padding:
      3px
      max(
        12px,
        env(safe-area-inset-right, 0px)
      )
      calc(
        8px
        + var(
          --smaei-tablet-bottom-safe-area
        )
      )
      max(
        12px,
        env(safe-area-inset-left, 0px)
      )
      !important;

    box-sizing: border-box !important;
    align-items: center !important;
    align-content: center !important;
    overflow: visible !important;

    border-radius: 0 !important;
    border-top:
      1px solid #e4e7ec !important;
    background: #fff !important;
    box-shadow:
      0 -8px 26px
      rgba(16, 24, 40, .11)
      !important;

    transform: none !important;
    -webkit-transform: none !important;
    translate: none !important;
    contain: none !important;
  }

  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .student-bottom-nav.hidden,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-bottom-nav.hidden {
    display: none !important;
  }

  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .student-bottom-nav-button,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-bottom-nav-button,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled
  .student-bottom-nav-button,
  body.smaei-standalone-app.student-mobile-nav-enabled
  .student-bottom-nav-button {
    position: static !important;
    top: auto !important;
    align-self: center !important;

    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;

    margin: 0 !important;
    padding: 2px 4px 1px !important;
    gap: 3px !important;
    box-sizing: border-box !important;

    visibility: visible !important;
    opacity: 1 !important;

    transform: none !important;
    -webkit-transform: none !important;
    translate: none !important;
  }

  /*
   * 展開メニューは、safe areaを含む
   * 下部メニュー全体の直上へ配置します。
   */
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled
  .student-mobile-hub-panel,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled
  .student-mobile-hub-panel,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled
  .student-mobile-hub-panel,
  body.smaei-standalone-app.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  body.smaei-standalone-app.student-mobile-nav-enabled
  .student-mobile-hub-panel {
    bottom:
      var(
        --smaei-tablet-bottom-nav-total-height
      ) !important;
  }
}

/*
 * CSSのdisplay-mode判定でも、
 * タブレットPWAへ同じ67px設定を保証します。
 */
@media
  (display-mode: standalone)
  and (hover: none)
  and (pointer: coarse)
  and (min-width: 600px)
  and (max-width: 1366px) {
  body.student-mobile-nav-enabled
  .student-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    display: grid !important;

    height: calc(
      67px
      + env(safe-area-inset-bottom, 0px)
    ) !important;
    min-height: calc(
      67px
      + env(safe-area-inset-bottom, 0px)
    ) !important;
    max-height: calc(
      67px
      + env(safe-area-inset-bottom, 0px)
    ) !important;

    padding:
      3px
      max(
        12px,
        env(safe-area-inset-right, 0px)
      )
      calc(
        8px
        + env(safe-area-inset-bottom, 0px)
      )
      max(
        12px,
        env(safe-area-inset-left, 0px)
      )
      !important;

    box-sizing: border-box !important;
    align-items: center !important;
    align-content: center !important;
    overflow: visible !important;
    contain: none !important;
  }

  body.student-mobile-nav-enabled
  .student-bottom-nav-button {
    align-self: center !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }

  body.student-mobile-nav-enabled
  .main {
    padding-bottom: calc(
      79px
      + env(safe-area-inset-bottom, 0px)
    ) !important;
  }

  body.student-mobile-nav-enabled
  .student-mobile-hub-backdrop,
  body.student-mobile-nav-enabled
  .student-mobile-hub-panel {
    bottom: calc(
      67px
      + env(safe-area-inset-bottom, 0px)
    ) !important;
  }
}

/* ===== 2026-07-30 スマホ課題学習：記事ウィンドウを画面上端で固定 ===== */
@media (max-width: 820px),
(hover: none) and (pointer: coarse)
and (max-width: 960px) {
  /*
   * 「課題一覧に戻る」は固定せず、ページと一緒に上へ流します。
   * これにより、記事ウィンドウ自身が画面上端まで移動できます。
   */
  body.practical-study-active
  .practical-study-top-actions {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  /*
   * 記事ウィンドウは通常位置からページと一緒に上へ移動し、
   * 画面上端（top: 0）へ到達した時点で固定します。
   * topが負の値にならないため、それより上には移動しません。
   */
  body.practical-study-active
  .practical-sticky-article:not(.is-fullscreen) {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 340 !important;
    width: 100% !important;
    margin-top: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    align-self: start !important;
  }
}

/* ===== 2026-07-30 スマホ・タブレット：ログイン画面を中央表示 ===== */

/*
 * スマートフォンとタッチ式タブレットのログイン画面を、
 * 画面全体の上下左右中央へ配置します。
 *
 * 上下のsafe areaは大きい側に揃えて同じpaddingを使うため、
 * ノッチやホームインジケーターがある端末でも
 * ログインカードの中心が上下へずれません。
 */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 1366px) {
  body.auth-mode {
    --smaei-login-safe-y:
      max(
        16px,
        env(safe-area-inset-top, 0px),
        env(safe-area-inset-bottom, 0px)
      );
    --smaei-login-safe-x:
      max(
        16px,
        env(safe-area-inset-left, 0px),
        env(safe-area-inset-right, 0px)
      );

    width: 100% !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /*
   * flexのauto marginを使用します。
   *
   * カードが画面内に収まる場合：
   *   上下左右中央
   *
   * カードが画面高を超える場合：
   *   auto marginが0になり、上端から安全にスクロール可能
   */
  body.auth-mode
  #loginView.login-wrap {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;

    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 !important;
    padding:
      var(--smaei-login-safe-y)
      var(--smaei-login-safe-x)
      !important;
    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;

    transform: none !important;
    -webkit-transform: none !important;
  }

  body.auth-mode
  #loginView.login-wrap
  .login-card {
    flex: 0 0 auto !important;

    width: min(460px, 100%) !important;
    max-width: 460px !important;
    height: auto !important;
    max-height: none !important;

    /*
     * 4方向のauto marginにより、
     * 画面内へ収まる場合は正確に中央へ配置します。
     */
    margin: auto !important;

    box-sizing: border-box !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  /*
   * 以前のスマホ用上寄せ指定を明示的に解除します。
   */
  body.auth-mode
  #loginView.login-wrap {
    place-items: initial !important;
    align-content: initial !important;
  }

  body.auth-mode
  #loginView.login-wrap
  .brand-login {
    margin-top: 0 !important;
  }
}

/*
 * PWAのdisplay-mode判定でも同じ中央配置を保証します。
 */
@media
  (display-mode: standalone)
  and (max-width: 1366px) {
  body.auth-mode
  #loginView.login-wrap {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.auth-mode
  #loginView.login-wrap
  .login-card {
    margin: auto !important;
  }
}

/* ===== 2026-07-30 スマホ課題学習：基礎記事下余白削除・戻る行固定 ===== */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  body.practical-study-active {
    --practical-study-back-row-height:
      30px;
  }

  /*
   * stickyが.mainを基準に動作するよう、
   * 課題学習ページのスクロール領域を明示します。
   */
  body.practical-study-active.app-mode
  .main,
  body.practical-study-active
  .main {
    display: block !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 0 !important;
  }

  body.practical-study-active
  #content {
    display: block !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /*
   * gridによるsticky位置の制限を避けるため、
   * スマホ課題画面では通常のブロックフローへ戻します。
   */
  body.practical-study-active
  .practical-study-shell {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /*
   * 「課題一覧に戻る」は通常位置から上へ移動し、
   * 画面上端へ到達したらそこで固定します。
   */
  body.practical-study-active
  .practical-study-top-actions {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 410 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height:
      var(--practical-study-back-row-height)
      !important;
    min-height:
      var(--practical-study-back-row-height)
      !important;

    margin: 0 !important;
    padding: 2px 0 !important;
    box-sizing: border-box !important;

    background:
      var(--bg, #f6f8fb)
      !important;

    transform: none !important;
    -webkit-transform: none !important;
  }

  body.practical-study-active
  .practical-study-top-actions
  .practical-study-back-button {
    width: auto !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 1px 9px !important;
  }

  /*
   * 記事ウィンドウは戻る行の直下まで上へ移動します。
   * 戻る行が画面上端で固定された後はtop:30pxで停止します。
   */
  body.practical-study-active
  .practical-sticky-article:not(.is-fullscreen) {
    position: sticky !important;
    position: -webkit-sticky !important;
    top:
      var(--practical-study-back-row-height)
      !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 400 !important;

    width: 100% !important;
    margin-top: 0 !important;
    align-self: auto !important;

    transform: none !important;
    -webkit-transform: none !important;
  }

  /*
   * 基礎コースだけ、記事カード内の下端余白を削除します。
   */
  body.practical-study-active.practical-study-basic-active
  .practical-sticky-article:not(.is-fullscreen) {
    padding-bottom: 0 !important;
  }

  body.practical-study-active.practical-study-basic-active
  .practical-sticky-article:not(.is-fullscreen)
  .practical-article-text-panel {
    margin-bottom: 0 !important;
  }

  body.practical-study-active.practical-study-basic-active
  .practical-sticky-article:not(.is-fullscreen)
  .practical-article-scroll {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.practical-study-active.practical-study-basic-active
  .practical-sticky-article:not(.is-fullscreen)
  .practical-article-scroll
  > :last-child {
    margin-bottom: 0 !important;
  }

  body.practical-study-active
  .practical-study-workspace {
    display: grid !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}



/* ===== 2026-07-30 全ページ読込速度改善・下部更新表示削除 ===== */
.soft-page-activity {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.page-loading-overlay {
  contain: layout paint;
}

/* ===== 2026-07-30 スマホ課題学習：ヘッダー完全連動・基礎記事高さ最適化 ===== */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  body.practical-study-active {
    --practical-study-back-row-height:
      30px;

    /*
     * ヘッダーが表示されている間はヘッダー直下、
     * ヘッダーが隠れるにつれて同じ移動量で上へ動きます。
     *
     * PWAではsafe areaを含むヘッダー下端が使われます。
     */
    --practical-study-visible-header-bottom:
      max(
        0px,
        calc(
          var(
            --practical-study-header-expanded-bottom,
            var(
              --mobile-header-expanded-bottom,
              var(
                --practical-study-header-height,
                52px
              )
            )
          )
          - var(
              --mobile-header-offset,
              0px
            )
        )
      );
  }

  /*
   * ヘッダー自身は既存のtransformと同じoffsetを使います。
   * transitionを使わず、スクロール量へ1対1で追従します。
   */
  body.practical-study-active
  .topbar,
  body.practical-study-active.header-hidden
  .topbar {
    transform:
      translate3d(
        0,
        calc(
          0px
          - var(
              --mobile-header-offset,
              0px
            )
        ),
        0
      )
      !important;
    -webkit-transform:
      translate3d(
        0,
        calc(
          0px
          - var(
              --mobile-header-offset,
              0px
            )
        ),
        0
      )
      !important;
    transition: none !important;
    will-change: transform !important;
  }

  /*
   * 「課題一覧に戻る」はヘッダー下端と同じ量で上下します。
   * ヘッダーが完全に退避した後もtopは0未満になりません。
   */
  body.practical-study-active
  .practical-study-top-actions {
    position: sticky !important;
    position: -webkit-sticky !important;
    top:
      var(
        --practical-study-visible-header-bottom
      )
      !important;
    z-index: 430 !important;

    height:
      var(
        --practical-study-back-row-height
      )
      !important;
    min-height:
      var(
        --practical-study-back-row-height
      )
      !important;

    margin: 0 !important;
    padding: 2px 0 !important;
    box-sizing: border-box !important;

    background:
      var(--bg, #f6f8fb)
      !important;

    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
    will-change: top !important;
  }

  /*
   * 記事ウィンドウもヘッダーと同じ移動量で上下し、
   * 常に戻るボタンの直下で停止します。
   *
   * 最小位置は戻る行の高さ30pxなので、
   * 記事が画面上端より上へ隠れることはありません。
   */
  body.practical-study-active
  .practical-sticky-article:not(
    .is-fullscreen
  ) {
    position: sticky !important;
    position: -webkit-sticky !important;
    top:
      max(
        var(
          --practical-study-back-row-height
        ),
        calc(
          var(
            --practical-study-visible-header-bottom
          )
          + var(
              --practical-study-back-row-height
            )
        )
      )
      !important;
    z-index: 420 !important;

    margin-top: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
    will-change: top !important;
  }

  /*
   * 基礎コースは記事内容を実測した高さへ縮めます。
   * 高さを縮めても本文は内部スクロールできるため、
   * 内容が切り捨てられることはありません。
   */
  body.practical-study-active.practical-study-basic-active
  .practical-sticky-article:not(
    .is-fullscreen
  ) {
    flex: none !important;
    height:
      var(
        --practical-basic-article-height,
        auto
      )
      !important;
    min-height: 0 !important;
    max-height:
      var(
        --practical-basic-article-height,
        min(47dvh, 410px)
      )
      !important;

    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  body.practical-study-active.practical-study-basic-active
  .practical-sticky-article:not(
    .is-fullscreen
  )
  .practical-article-text-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }

  body.practical-study-active.practical-study-basic-active
  .practical-sticky-article:not(
    .is-fullscreen
  )
  .practical-article-scroll {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow-y: auto !important;
  }

  body.practical-study-active.practical-study-basic-active
  .practical-sticky-article:not(
    .is-fullscreen
  )
  .practical-article-scroll
  > :last-child {
    margin-bottom: 0 !important;
  }
}

/* ===== 2026-07-30 スマホ課題一覧・Month切替：読込高速化 ===== */

.study-list-inline-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 74px;
  margin-top: 10px;
  padding: 16px;
  color: #667085;
  box-sizing: border-box;
}

.study-list-inline-loading
.loading-spinner {
  flex: 0 0 auto;
}

/*
 * Month切替時はカード全体を消さず、
 * 選択中のMonthだけに小さな進行表示を出します。
 */
.study-month-badge.is-loading {
  position: relative;
  pointer-events: none;
}

.study-month-badge.is-loading
.study-month-label {
  opacity: .72;
}

.study-month-loading-mark:not([hidden]) {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  vertical-align: -2px;
  animation:
    study-month-loading-spin
    .65s linear infinite;
}

@keyframes study-month-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  .study-list-transition-loading {
    min-height: 46dvh;
  }

  .study-list-inline-loading {
    min-height: 64px;
    margin-top: 8px;
    padding: 13px;
    font-size: 13px;
  }
}

/* ===== 2026-07-30 スマホ課題学習：ヘッダー下余白解消・記事下余白調整 ===== */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  /*
   * ヘッダー下端は「課題一覧に戻る」のsticky位置で
   * すでに確保されています。
   *
   * mainにもヘッダー高相当のpadding-topがあると、
   * ヘッダーの高さが二重に確保されて大きな空白になります。
   * 課題学習画面だけ上paddingを解除します。
   */
  body.practical-study-active
  .main,
  body.practical-study-active.app-mode
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.practical-study-active
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.practical-study-active.app-mode
  .main,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.practical-study-active
  .main,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.practical-study-active.app-mode
  .main {
    padding-top: 0 !important;
  }

  body.practical-study-active
  #content,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.practical-study-active
  #content,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.practical-study-active
  #content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.practical-study-active
  .practical-study-shell,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.practical-study-active
  .practical-study-shell,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.practical-study-active
  .practical-study-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: 0 !important;
  }

  /*
   * ヘッダー表示中：
   *   戻る行はヘッダー直下
   *   記事は戻る行の直下
   *
   * ヘッダー退避後：
   *   戻る行は画面上端
   *   記事はその30px下
   */
  body.practical-study-active
  .practical-study-top-actions {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.practical-study-active
  .practical-sticky-article:not(
    .is-fullscreen
  ) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /*
   * 基礎コースの記事下端には、
   * 記事カードの左右paddingと同じ12pxを確保します。
   */
  body.practical-study-active.practical-study-basic-active
  .practical-sticky-article:not(
    .is-fullscreen
  ) {
    padding-bottom: 12px !important;
  }

  /*
   * テキストパネル自体の余分なmarginは追加せず、
   * 外側カードの12pxだけを下余白として使用します。
   */
  body.practical-study-active.practical-study-basic-active
  .practical-sticky-article:not(
    .is-fullscreen
  )
  .practical-article-text-panel {
    margin-bottom: 0 !important;
  }

  body.practical-study-active.practical-study-basic-active
  .practical-sticky-article:not(
    .is-fullscreen
  )
  .practical-article-scroll {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.practical-study-active.practical-study-basic-active
  .practical-sticky-article:not(
    .is-fullscreen
  )
  .practical-article-scroll
  > :last-child {
    margin-bottom: 0 !important;
  }
}

/* ===== 2026-07-30 ログイン：自動ログイン切替・処理中表示 ===== */

.auth-auto-login-block {
  margin: 14px 0 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.auth-auto-login-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
}

.auth-auto-login-toggle
input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.auth-auto-login-description {
  margin: 7px 0 0 30px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.auth-panel button.is-auth-busy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.auth-panel button.is-auth-busy::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation:
    smaei-auth-button-spin
    .65s linear infinite;
}

@keyframes smaei-auth-button-spin {
  to {
    transform: rotate(360deg);
  }
}

body.auth-login-processing
#loginView
.login-card {
  cursor: wait;
}

body.auth-login-processing
#loginView
.auth-tabs,
body.auth-login-processing
#loginView
.auth-auto-login-block,
body.auth-login-processing
#loginView
input {
  transition:
    opacity .15s ease;
}

body.auth-login-processing
#loginView
.auth-tabs,
body.auth-login-processing
#loginView
.auth-auto-login-block,
body.auth-login-processing
#loginView
input:not([type="checkbox"]) {
  opacity: .72;
}

body.auth-login-processing
#loginView
button:not(.is-auth-busy),
body.auth-login-processing
#loginView
input {
  cursor: wait;
}

@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 1366px) {
  .auth-auto-login-block {
    margin-top: 12px;
    padding: 11px 12px;
  }

  .auth-auto-login-description {
    margin-left: 30px;
  }

  .auth-panel button.is-auth-busy::before {
    width: 15px;
    height: 15px;
  }
}

/* ===== 2026-07-30 ログイン：自動ログイン装飾削除・横書き固定 ===== */

/*
 * 枠・背景・カード状の装飾を使用せず、
 * チェックボックスと文言だけを表示します。
 */
.auth-auto-login-block {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.auth-auto-login-toggle {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;

  width: auto !important;
  max-width: 100% !important;
  margin: 12px 0 4px !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  color: #344054 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;

  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.auth-auto-login-toggle
input[type="checkbox"] {
  display: block !important;
  flex: 0 0 18px !important;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;

  margin: 0 !important;
  padding: 0 !important;

  writing-mode: horizontal-tb !important;
}

.auth-auto-login-toggle
span {
  display: inline-block !important;
  flex: 0 1 auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.auth-auto-login-description {
  display: none !important;
}

/*
 * ログイン処理中でも、削除済みの装飾領域は復活させません。
 */
body.auth-login-processing
#loginView
.auth-auto-login-block {
  opacity: 1 !important;
  background: transparent !important;
}

/*
 * スマホ・タブレットでは横書きを明示し、
 * 縦方向へ1文字ずつ折り返されることを防ぎます。
 */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 1366px) {
  .auth-auto-login-toggle {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    margin: 10px 0 3px !important;

    font-size: 13px !important;

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
  }

  .auth-auto-login-toggle
  span {
    display: inline-block !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
  }
}

/* ===== 2026-07-30 スマホ課題開始・再開：読込高速化 ===== */

.study-day-card
button.is-study-day-opening {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: wait !important;
}

.study-day-card
button.is-study-day-opening::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation:
    study-day-opening-spin
    .65s linear infinite;
}

@keyframes study-day-opening-spin {
  to {
    transform: rotate(360deg);
  }
}

.practical-audio-preparing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  color: #667085;
  font-size: 13px;
}

@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  .study-day-card
  button.is-study-day-opening {
    min-height: 44px !important;
    font-size: 13px !important;
  }

  .study-day-card
  button.is-study-day-opening::before {
    width: 14px;
    height: 14px;
  }

  .practical-audio-preparing {
    min-height: 44px;
    padding: 8px;
  }
}

/* ===== 2026-07-30 スマホ課題学習：記事とSTAGE領域の重なり解消 ===== */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  body.practical-study-active
  .practical-study-workspace {
    position: relative !important;
    z-index: 1 !important;

    margin-top:
      var(
        --practical-workspace-separation,
        12px
      )
      !important;

    padding-top: 0 !important;

    background:
      var(--bg, #f6f8fb)
      !important;

    isolation: isolate !important;
  }

  body.practical-study-active
  .practical-sticky-article:not(
    .is-fullscreen
  ) {
    position: sticky !important;
    z-index: 420 !important;

    margin-bottom: 0 !important;

    background: #fff !important;
    isolation: isolate !important;
  }

  body.practical-study-active.practical-study-basic-active
  .practical-sticky-article:not(
    .is-fullscreen
  ) {
    padding-bottom: 12px !important;
  }

  body.practical-study-active
  .practical-study-workspace
  > :first-child {
    margin-top: 0 !important;
  }

  body.practical-study-active
  .practical-stage-list,
  body.practical-study-active
  .practical-stage-card {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* ===== 2026-07-30 スマホ課題学習：STAGE領域上下余白削除 ===== */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  /*
   * 記事とSTAGE領域の間は固定12px。
   * スクロール位置によって増減する可変marginは使用しません。
   */
  body.practical-study-active
  .practical-study-workspace {
    display: grid !important;
    flex: 0 0 auto !important;
    align-content: start !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    gap: 8px !important;

    margin:
      12px
      0
      0
      !important;

    padding:
      0
      0
      8px
      !important;

    box-sizing: border-box !important;

    overflow: visible !important;
    overscroll-behavior: auto !important;

    background: transparent !important;
    isolation: auto !important;
  }

  /*
   * 以前の可変補正値がDOMへ残っていても使用しません。
   */
  body.practical-study-active
  .practical-study-workspace[style] {
    margin-top: 12px !important;
  }

  /*
   * Reading / Listening等のタブ上部に残っていた
   * 追加marginを削除します。
   */
  body.practical-study-active
  .practical-study-workspace
  .practical-page-tabs {
    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * 基礎コースのSTAGEページ表示も、
   * gridのgapだけで間隔を管理します。
   */
  body.practical-study-active
  .practical-study-workspace
  .basic-stage-page-counter {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.practical-study-active
  .practical-study-workspace
  .practical-stage-list,
  body.practical-study-active
  .practical-study-workspace
  .practical-stage-list.is-basic-stage-paging {
    display: grid !important;
    gap: 8px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    min-height: 0 !important;
  }

  body.practical-study-active
  .practical-study-workspace
  .practical-stage-card,
  body.practical-study-active
  .practical-study-workspace
  .practical-stage-list.is-basic-stage-paging
  .practical-stage-card {
    width: 100% !important;

    margin: 0 !important;
    padding: 10px !important;

    box-sizing: border-box !important;
  }

  /*
   * STAGE内部で、最初と最後の子要素が
   * カード外側へ余白を持ち出さないようにします。
   */
  body.practical-study-active
  .practical-stage-card
  > :first-child {
    margin-top: 0 !important;
  }

  body.practical-study-active
  .practical-stage-card
  > :last-child {
    margin-bottom: 0 !important;
  }

  body.practical-study-active
  .practical-task-list {
    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * 保存状態と前へ／次へ／提出ボタン周辺の
   * 不要な上下余白を削除します。
   */
  body.practical-study-active
  .practical-save-status {
    min-height: 0 !important;

    margin: 0 !important;
    padding: 2px 0 !important;

    line-height: 1.35 !important;
  }

  body.practical-study-active
  .practical-study-actions,
  body.practical-study-active
  .practical-study-page-actions,
  body.practical-study-active
  .practical-page-action-left,
  body.practical-study-active
  .practical-page-action-right {
    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * workspace側に残っていた下部メニュー高相当のpaddingを削除します。
   * 下部メニューとの重なり防止は.main側のpaddingだけで行います。
   */
  body.student-mobile-nav-enabled.practical-study-active
  .practical-study-workspace,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.practical-study-active
  .practical-study-workspace,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.practical-study-active
  .practical-study-workspace {
    padding-bottom: 8px !important;
  }

  /*
   * workspace直後に追加の空要素が存在する場合は表示しません。
   */
  body.practical-study-active
  .practical-study-workspace
  > :empty:not(
    .practical-save-status
  ) {
    display: none !important;
  }
}

/* ===== 2026-07-30 スマホ課題学習：STAGEを記事下へ固定 ===== */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  body.practical-study-active {
    /*
     * 戻る行・記事・STAGEの位置を同じ式から算出します。
     */
    --practical-stage-workspace-top:
      calc(
        var(
          --practical-study-visible-header-bottom,
          0px
        )
        + var(
            --practical-study-back-row-height,
            30px
          )
        + var(
            --practical-study-article-height-live,
            320px
          )
        + 12px
      );
  }

  /*
   * 課題画面全体ではなく、STAGE領域だけをスクロールします。
   * これによりSTAGEが固定記事の背面へ入り込みません。
   */
  body.practical-study-active
  .main,
  body.practical-study-active.app-mode
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.practical-study-active
  .main,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.practical-study-active
  .main {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.practical-study-active
  #content,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.practical-study-active
  #content,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.practical-study-active
  #content {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    overflow: hidden !important;
  }

  body.practical-study-active
  .practical-study-shell,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.practical-study-active
  .practical-study-shell,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.practical-study-active
  .practical-study-shell {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
  }

  /*
   * ヘッダーとの連動位置を直接使用します。
   * 通常フローの位置に依存しないため、
   * sticky要素が押し下げられた分だけSTAGEが裏へ入る問題を解消します。
   */
  body.practical-study-active
  .practical-study-top-actions {
    position: absolute !important;

    top:
      var(
        --practical-study-visible-header-bottom,
        0px
      )
      !important;
    right: 0 !important;
    left: 0 !important;

    z-index: 430 !important;
  }

  body.practical-study-active
  .practical-sticky-article:not(
    .is-fullscreen
  ) {
    position: absolute !important;

    top:
      calc(
        var(
          --practical-study-visible-header-bottom,
          0px
        )
        + var(
            --practical-study-back-row-height,
            30px
          )
      )
      !important;
    right: 0 !important;
    left: 0 !important;

    z-index: 420 !important;

    margin: 0 !important;
  }

  /*
   * スマホではドラッグ式リサイズを使用しません。
   * 記事の実測高に応じてSTAGE領域を自動配置します。
   */
  body.practical-study-active
  .practical-study-resize-handle {
    display: none !important;
  }

  /*
   * STAGE領域の上端は必ず
   *
   * ヘッダー下端
   * ＋ 戻る行30px
   * ＋ 記事実測高
   * ＋ 12px
   *
   * となります。
   */
  body.practical-study-active
  .practical-study-workspace,
  body.practical-study-active
  .practical-study-workspace[style],
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.practical-study-active
  .practical-study-workspace,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.practical-study-active
  .practical-study-workspace {
    position: absolute !important;

    top:
      var(
        --practical-stage-workspace-top
      )
      !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: grid !important;
    align-content: start !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    gap: 8px !important;

    margin: 0 !important;
    padding:
      0
      0
      8px
      !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;

    background:
      var(--bg, #f6f8fb)
      !important;

    z-index: 10 !important;
    isolation: isolate !important;
  }

  /*
   * 以前の境界補正用インライン変数は、
   * 新しい絶対配置では使用しません。
   */
  body.practical-study-active
  .practical-study-workspace {
    --practical-workspace-separation:
      0px !important;
  }

  /*
   * STAGE先頭要素の外側marginを除去し、
   * 計算した開始位置から正確に表示します。
   */
  body.practical-study-active
  .practical-study-workspace
  > :first-child,
  body.practical-study-active
  .practical-stage-list
  > :first-child {
    margin-top: 0 !important;
  }

  body.practical-study-active
  .practical-study-workspace
  > :last-child {
    margin-bottom: 0 !important;
  }
}

/* ===== 2026-07-30 スマホ課題学習：STAGE下端・次へボタン表示 ===== */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  /*
   * STAGE領域の下端を、実際に表示されている下部メニューの
   * 直上へ配置します。
   */
  body.practical-study-active
  .practical-study-workspace,
  body.practical-study-active
  .practical-study-workspace[style],
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.practical-study-active
  .practical-study-workspace,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.practical-study-active
  .practical-study-workspace {
    bottom:
      var(
        --practical-study-workspace-bottom-inset-live,
        0px
      )
      !important;

    /*
     * 最後の「次へ」「提出」ボタンを完全に表示できるよう、
     * スクロール末尾に最小限の16pxを確保します。
     */
    padding:
      0
      0
      16px
      !important;

    scroll-padding-bottom: 16px !important;
  }

  /*
   * 操作ボタン領域を縮ませず、スクロール末尾に必ず残します。
   */
  body.practical-study-active
  .practical-study-actions,
  body.practical-study-active
  .practical-study-page-actions,
  body.practical-study-active
  .practical-page-action-left,
  body.practical-study-active
  .practical-page-action-right {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.practical-study-active
  .practical-study-page-actions {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      !important;
    align-items: center !important;
    gap: 8px !important;

    width: 100% !important;
  }

  body.practical-study-active
  .practical-page-action-left {
    display: flex !important;
    justify-content: flex-start !important;
  }

  body.practical-study-active
  .practical-page-action-right {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  body.practical-study-active
  .practical-study-page-actions
  button {
    min-height: 44px !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /*
   * 保存状態と操作ボタンの間に必要な8pxだけを維持します。
   */
  body.practical-study-active
  .practical-save-status
  + .practical-study-actions {
    margin-top: 8px !important;
  }

  /*
   * iOSの慣性スクロールで最下部が跳ね返った場合も、
   * 最後のボタンを安全に表示します。
   */
  body.practical-study-active
  .practical-study-workspace::after {
    content: "";
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
  }
}

/* ===== 2026-07-30 生徒お知らせ：折りたたみ・既読・URLリンク・幅調整 ===== */

.student-announcements-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;

  width: 100%;
  min-width: 0;
  max-width: 100%;

  margin: 0;
  padding: 0;

  box-sizing: border-box;
  overflow-x: hidden;
}

.student-announcement-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  margin: 0;
  padding: 0;

  box-sizing: border-box;
  overflow: hidden;
}

.student-announcement-toggle {
  appearance: none;
  -webkit-appearance: none;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    18px;
  align-items: center;
  gap: 10px;

  width: 100%;
  min-width: 0;
  max-width: 100%;

  margin: 0;
  padding: 15px 16px;

  border: 0;
  border-radius: 0;
  background: transparent;

  color: var(--text);
  text-align: left;
  cursor: pointer;

  box-sizing: border-box;
}

.student-announcement-toggle:hover {
  background: #f8fafc;
}

.student-announcement-toggle:focus-visible {
  outline: 3px solid
    rgba(209, 19, 31, .22);
  outline-offset: -3px;
}

.student-announcement-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  min-width: 0;
  max-width: 100%;
}

.student-announcement-badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;

  flex: 0 0 auto;
}

.student-announcement-card
.announcement-title-text {
  flex: 1 1 180px;

  min-width: 0;
  max-width: 100%;

  font-size: 16px;
  font-weight: 800;
  line-height: 1.55;

  writing-mode: horizontal-tb;
  text-orientation: mixed;

  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.announcement-read-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;
  min-height: 22px;

  padding: 3px 8px;

  border: 1px solid transparent;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.announcement-read-badge.is-unread {
  border-color: #d1131f;
  background: #fff0f1;
  color: #c4141d;
}

.announcement-read-badge.is-read {
  border-color: #d0d5dd;
  background: #f2f4f7;
  color: #667085;
}

.student-announcement-chevron {
  position: relative;

  display: block;

  width: 12px;
  height: 12px;

  border-right: 2px solid #667085;
  border-bottom: 2px solid #667085;

  transform:
    rotate(45deg)
    translate(-2px, -2px);

  transition:
    transform .18s ease;
}

.student-announcement-toggle[
  aria-expanded="true"
]
.student-announcement-chevron {
  transform:
    rotate(225deg)
    translate(-1px, -1px);
}

.student-announcement-content {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  padding:
    0
    16px
    16px;

  border-top: 1px solid var(--line);

  box-sizing: border-box;
  overflow-x: hidden;
}

.student-announcement-content[hidden] {
  display: none !important;
}

.student-announcement-date {
  margin: 12px 0 8px;
}

.student-announcement-body {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  margin: 0 0 10px;

  color: var(--text);
  font-size: 15px;
  line-height: 1.8;

  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.announcement-auto-link {
  color: #075ea8;
  text-decoration: underline;
  text-underline-offset: 2px;

  word-break: break-all;
  overflow-wrap: anywhere;
}

.announcement-auto-link:hover {
  text-decoration-thickness: 2px;
}

.student-announcement-content
.file-list,
.student-announcement-content
a {
  max-width: 100%;
  box-sizing: border-box;
}

@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 1366px) {
  body.student-mobile-nav-enabled
  #content:has(
    .student-announcements-page
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;

    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .student-announcements-page,
  .student-announcement-card,
  .student-announcement-toggle,
  .student-announcement-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }

  .student-announcement-toggle {
    grid-template-columns:
      minmax(0, 1fr)
      16px;

    gap: 8px;

    padding: 13px 12px;
  }

  .student-announcement-heading {
    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr);

    align-items: center;
    gap: 7px;

    width: 100%;
    min-width: 0;
  }

  .student-announcement-badges {
    align-self: start;
  }

  .student-announcement-card
  .announcement-title-text {
    flex: initial;

    min-width: 0;
    max-width: 100%;

    font-size: 15px;
    line-height: 1.5;

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;

    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .student-announcement-content {
    padding:
      0
      12px
      14px;
  }

  .student-announcement-body {
    font-size: 14px;
    line-height: 1.75;
  }

  .announcement-auto-link {
    display: inline;
    max-width: 100%;

    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 390px) {
  .student-announcement-heading {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .student-announcement-badges {
    order: 1;
  }

  .student-announcement-card
  .announcement-title-text {
    order: 2;
  }
}

/* ===== 2026-07-30 課題学習：前へ・次へを問題直下へ固定 ===== */

/*
 * 操作領域は必ず問題カードの通常フロー内に置きます。
 * 過去のgrid・flex・左右端配置の競合をここで一本化します。
 */
body.practical-study-active
.practical-stage-navigation {
  position: static !important;
  inset: auto !important;
  float: none !important;
  clear: both !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  align-content: start !important;
  gap: 8px !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 12px 0 0 !important;
  padding: 10px 0 0 !important;

  border-top: 1px solid var(--line) !important;

  box-sizing: border-box !important;
  overflow: visible !important;

  transform: none !important;
  z-index: auto !important;
}

body.practical-study-active
.practical-stage-card {
  overflow: visible !important;
}

body.practical-study-active
.practical-stage-card
.practical-save-status {
  position: static !important;

  width: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;
  line-height: 1.4 !important;
}

body.practical-study-active
.practical-stage-card
.practical-study-actions {
  position: static !important;
  inset: auto !important;

  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  transform: none !important;
}

body.practical-study-active
.practical-stage-card
.practical-study-page-actions {
  position: static !important;
  inset: auto !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 44px !important;

  margin: 0 !important;
  padding: 0 !important;

  grid-template-columns: none !important;
  grid-template-rows: none !important;

  overflow: visible !important;
  transform: none !important;
}

body.practical-study-active
.practical-stage-card
.practical-page-action-left,
body.practical-study-active
.practical-stage-card
.practical-page-action-right {
  position: static !important;
  inset: auto !important;

  display: flex !important;
  align-items: center !important;

  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 44px !important;

  margin: 0 !important;
  padding: 0 !important;

  grid-column: auto !important;
  grid-row: auto !important;

  overflow: visible !important;
  transform: none !important;
}

body.practical-study-active
.practical-stage-card
.practical-page-action-left {
  justify-content: flex-start !important;
}

body.practical-study-active
.practical-stage-card
.practical-page-action-right {
  justify-content: flex-end !important;
  gap: 8px !important;
}

body.practical-study-active
.practical-stage-card
.practical-page-action-left:empty {
  display: none !important;
}

body.practical-study-active
.practical-stage-card
.practical-page-action-left:empty
+ .practical-page-action-right {
  flex: 1 1 100% !important;
  justify-content: flex-end !important;
}

body.practical-study-active
.practical-stage-card
.practical-study-page-actions
.practical-prev-button,
body.practical-study-active
.practical-stage-card
.practical-study-page-actions
.practical-next-button,
body.practical-study-active
.practical-stage-card
.practical-study-page-actions
.practical-submit-button {
  position: static !important;
  inset: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 auto !important;

  width: auto !important;
  min-width: 104px !important;
  max-width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 9px 14px !important;

  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
  align-self: center !important;

  box-sizing: border-box !important;
  transform: none !important;
}

/*
 * 旧構造の操作領域が万一キャッシュDOMに残っても、
 * 問題カード外では表示しません。
 */
body.practical-study-active
.practical-study-workspace
> .practical-save-status,
body.practical-study-active
.practical-study-workspace
> .practical-study-actions {
  display: none !important;
}

@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  body.practical-study-active
  .practical-stage-navigation {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  body.practical-study-active
  .practical-stage-card
  .practical-study-page-actions {
    min-height: 44px !important;
  }

  body.practical-study-active
  .practical-stage-card
  .practical-page-action-left,
  body.practical-study-active
  .practical-stage-card
  .practical-page-action-right {
    min-height: 44px !important;
  }

  body.practical-study-active
  .practical-stage-card
  .practical-study-page-actions
  .practical-prev-button,
  body.practical-study-active
  .practical-stage-card
  .practical-study-page-actions
  .practical-next-button,
  body.practical-study-active
  .practical-stage-card
  .practical-study-page-actions
  .practical-submit-button {
    min-width: 96px !important;
    min-height: 44px !important;
    padding: 9px 12px !important;
  }
}

@media (max-width: 360px) {
  body.practical-study-active
  .practical-stage-card
  .practical-study-page-actions
  .practical-prev-button,
  body.practical-study-active
  .practical-stage-card
  .practical-study-page-actions
  .practical-next-button,
  body.practical-study-active
  .practical-stage-card
  .practical-study-page-actions
  .practical-submit-button {
    min-width: 88px !important;
    padding-inline: 10px !important;
  }
}

/* ===== 2026-07-30 スマホ課題学習：最下部跳ね防止・全画面記事拡張 ===== */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  /*
   * STAGE最下部のネイティブ引っ張りと、
   * スクロール位置の自動補正による跳ねを抑止します。
   */
  body.practical-study-active
  .practical-study-workspace,
  body.practical-study-active
  .practical-study-workspace[style],
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.practical-study-active
  .practical-study-workspace,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.practical-study-active
  .practical-study-workspace {
    overscroll-behavior:
      none !important;
    overscroll-behavior-y:
      none !important;

    overflow-anchor:
      none !important;

    scroll-behavior:
      auto !important;

    scroll-snap-type:
      none !important;

    touch-action:
      pan-y !important;
  }

  /*
   * 全画面記事はtopとbottomで直接画面高を決めます。
   * 外側の下paddingをなくし、本文パネル自体を画面下端まで広げます。
   */
  body.practical-article-fullscreen-open
  .practical-sticky-article.is-fullscreen {
    position: fixed !important;

    inset: auto !important;

    top:
      var(
        --practical-fullscreen-top,
        0px
      )
      !important;

    right:
      var(
        --practical-fullscreen-right,
        0px
      )
      !important;

    bottom: 0 !important;

    left:
      var(
        --practical-fullscreen-left,
        0px
      )
      !important;

    display: flex !important;
    flex-direction: column !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    padding:
      8px
      10px
      0
      !important;

    box-sizing:
      border-box !important;

    overflow: hidden !important;
  }

  body.practical-article-fullscreen-open
  .practical-sticky-article.is-fullscreen
  .practical-article-text-panel {
    display: flex !important;
    flex:
      1 1 0 !important;
    flex-direction:
      column !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin:
      8px
      0
      0
      !important;

    padding: 0 !important;

    box-sizing:
      border-box !important;

    overflow: hidden !important;
  }

  body.practical-article-fullscreen-open
  .practical-sticky-article.is-fullscreen
  .practical-article-scroll {
    flex:
      1 1 0 !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    padding-bottom:
      max(
        8px,
        env(
          safe-area-inset-bottom,
          0px
        )
      )
      !important;

    box-sizing:
      border-box !important;

    overflow-x:
      hidden !important;
    overflow-y:
      auto !important;

    overscroll-behavior:
      none !important;

    touch-action:
      pan-y !important;
  }

  body.practical-article-fullscreen-open
  .practical-sticky-article.is-fullscreen
  .practical-article-scroll
  > :last-child {
    margin-bottom:
      0 !important;
  }

  /*
   * 音声プレイヤーがある実践コースでは、
   * 安全領域をプレイヤー内側にだけ確保します。
   */
  body.practical-article-fullscreen-open
  .practical-sticky-article.is-fullscreen
  .practical-article-audio-panel {
    flex:
      0 0 auto !important;

    margin:
      6px
      0
      0
      !important;

    padding-bottom:
      env(
        safe-area-inset-bottom,
        0px
      )
      !important;
  }
}

/* ===== 2026-07-30 スマホ課題学習：独立複製レイヤーで全画面表示 ===== */
/*
 * 元の課題画面は完全に不可視にし、body直下へ作成した複製記事だけを表示します。
 * Popover・DOM移動・祖先要素のoverflowに依存しないため、WebKitでタイトルだけが
 * 残り本文が白紙になる問題を回避します。
 */
body.practical-article-fullscreen-open .practical-study-shell {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.practical-article-fullscreen-open
#practicalArticleFullscreenOverlay {
  position: fixed !important;
  top: var(--practical-fullscreen-top, env(safe-area-inset-top, 0px)) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 5400 !important;

  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  isolation: isolate !important;

  background: #fff !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

body.practical-article-fullscreen-open
#practicalArticleFullscreenOverlay
> .practical-fullscreen-article-clone {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 1 !important;

  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-self: stretch !important;

  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 8px 10px 0 !important;
  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  clip-path: none !important;

  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  color: var(--text, #182033) !important;
  background: #fff !important;
  overflow: hidden !important;
  touch-action: auto !important;
}

body.practical-article-fullscreen-open
#practicalArticleFullscreenOverlay
.practical-article-topline,
body.practical-article-fullscreen-open
#practicalArticleFullscreenOverlay
.practical-vocab-guide,
body.practical-article-fullscreen-open
#practicalArticleFullscreenOverlay
.practical-article-audio-panel {
  flex: 0 0 auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.practical-article-fullscreen-open
#practicalArticleFullscreenOverlay
.practical-article-text-panel {
  position: relative !important;
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;

  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;

  margin: 8px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  visibility: visible !important;
  opacity: 1 !important;
  background: #fff !important;
  overflow: hidden !important;
  contain: none !important;
}

body.practical-article-fullscreen-open
#practicalArticleFullscreenOverlay
.practical-article-scroll {
  position: relative !important;
  display: block !important;
  flex: 1 1 0 !important;

  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 10px 8px max(10px, env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;

  visibility: visible !important;
  opacity: 1 !important;
  color: var(--text, #182033) !important;
  background: #fff !important;
  -webkit-text-fill-color: currentColor !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain !important;
  overflow-anchor: none !important;
  touch-action: pan-y !important;
  contain: none !important;
  content-visibility: visible !important;
}

body.practical-article-fullscreen-open
#practicalArticleFullscreenOverlay
.practical-article-scroll > * {
  visibility: visible !important;
  opacity: 1 !important;
  content-visibility: visible !important;
}

body.practical-article-fullscreen-open
#practicalArticleFullscreenOverlay
.practical-article-audio-panel {
  width: 100% !important;
  min-width: 0 !important;
  margin: 6px 0 0 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  box-sizing: border-box !important;
}

body.practical-article-fullscreen-open
#practicalArticleFullscreenOverlay
.practical-audio-player {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* 単語詳細モーダルは全画面記事より前面へ表示します。 */
body.practical-article-fullscreen-open .study-vocabulary-modal-backdrop {
  z-index: 5600 !important;
}

body.practical-article-fullscreen-open .study-vocabulary-modal {
  z-index: 5601 !important;
}

@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  body.practical-article-fullscreen-open
  #practicalArticleFullscreenOverlay
  > .practical-fullscreen-article-clone {
    padding: 8px 10px 0 !important;
  }

  body.practical-article-fullscreen-open
  #practicalArticleFullscreenOverlay
  .practical-sticky-article h2,
  body.practical-article-fullscreen-open
  #practicalArticleFullscreenOverlay
  h2 {
    margin: 5px 0 7px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
}



/* ===== 2026-07-30 スマホ課題学習：全画面中も下部メニューを表示 ===== */
/*
 * JavaScriptで取得した下部メニューの実測高さだけ記事レイヤーを縮めます。
 * メニューは記事より前面、単語詳細モーダルより背面に配置します。
 */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  body.practical-article-fullscreen-open.student-mobile-nav-enabled
  #practicalArticleFullscreenOverlay {
    bottom: var(--practical-fullscreen-bottom, var(--student-bottom-nav-height, 68px)) !important;
  }

  body.practical-article-fullscreen-open.student-mobile-nav-enabled
  .student-bottom-nav {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 5500 !important;
    touch-action: manipulation !important;
  }

  body.practical-article-fullscreen-open.student-mobile-nav-enabled
  #practicalArticleFullscreenOverlay
  .practical-article-audio-panel {
    padding-bottom: 0 !important;
  }

  body.practical-article-fullscreen-open.student-mobile-nav-enabled
  #practicalArticleFullscreenOverlay
  .practical-article-scroll {
    padding-bottom: 10px !important;
  }
}


/* ===== 2026-07-31 スマホ課題学習：全画面時も通常の下部メニューを維持 v120 ===== */
/*
 * v118では全画面表示中に下部メニューの高さ・padding・grid行・ボタン高を
 * 再定義していました。しかし、既存のPWA用セレクタの方が詳細度が高く、
 * 外枠は80px／下padding 23px、内部は58px固定／overflow:hiddenという
 * 混在状態になり、アイコン下部とメニュー名が切り取られていました。
 *
 * 全画面時は下部メニューの寸法・内部配置を一切変更しません。
 * 通常画面で確定したメニューをそのまま前面へ出し、記事レイヤーの高さだけを
 * JavaScriptで取得したメニュー上端へ合わせます。
 */
body.practical-article-fullscreen-open
#practicalArticleFullscreenOverlay {
  top: var(--practical-fullscreen-top, env(safe-area-inset-top, 0px)) !important;
  right: var(--practical-fullscreen-right, 0px) !important;
  bottom: auto !important;
  left: var(--practical-fullscreen-left, 0px) !important;
  height: var(
    --practical-fullscreen-height,
    calc(
      100dvh
      - var(--practical-fullscreen-top, 0px)
      - var(--practical-fullscreen-bottom, 0px)
    )
  ) !important;
  min-height: 0 !important;
  max-height: var(
    --practical-fullscreen-height,
    calc(
      100dvh
      - var(--practical-fullscreen-top, 0px)
      - var(--practical-fullscreen-bottom, 0px)
    )
  ) !important;
}

@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  /*
   * 表示・操作・重なり順だけを保証します。
   * height / min-height / max-height / padding / grid-template-rows /
   * buttonサイズ / labelサイズには触れず、通常表示のCSSをそのまま使用します。
   */
  html.smaei-pwa-layout-active
  body.practical-article-fullscreen-open.student-mobile-nav-enabled
  .student-bottom-nav,
  html.smaei-standalone-app
  body.practical-article-fullscreen-open.student-mobile-nav-enabled
  .student-bottom-nav,
  body.smaei-pwa-layout-active.practical-article-fullscreen-open.student-mobile-nav-enabled
  .student-bottom-nav,
  body.smaei-standalone-app.practical-article-fullscreen-open.student-mobile-nav-enabled
  .student-bottom-nav,
  body.practical-article-fullscreen-open.student-mobile-nav-enabled
  .student-bottom-nav {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 5500 !important;
    overflow: visible !important;
    touch-action: manipulation !important;
  }

  html.smaei-pwa-layout-active
  body.practical-article-fullscreen-open.student-mobile-nav-enabled
  .student-bottom-nav-button,
  html.smaei-standalone-app
  body.practical-article-fullscreen-open.student-mobile-nav-enabled
  .student-bottom-nav-button,
  body.smaei-pwa-layout-active.practical-article-fullscreen-open.student-mobile-nav-enabled
  .student-bottom-nav-button,
  body.smaei-standalone-app.practical-article-fullscreen-open.student-mobile-nav-enabled
  .student-bottom-nav-button,
  body.practical-article-fullscreen-open.student-mobile-nav-enabled
  .student-bottom-nav-button,
  body.practical-article-fullscreen-open.student-mobile-nav-enabled
  .student-bottom-nav-button
  > span,
  body.practical-article-fullscreen-open.student-mobile-nav-enabled
  .student-bottom-nav-button
  .student-mobile-icon {
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* ===== 2026-07-30 PWA起動時：認証画面フラッシュ防止 v119 =====
   後段のauth-mode用!important指定よりも優先し、認証状態が確定するまで
   ログイン画面・アプリ画面・下部メニューを一切描画しません。 */
html.smaei-app-booting-root
body.app-booting.auth-mode
#loginView,
html.smaei-app-booting-root
body.app-booting.app-mode
#loginView,
html.smaei-app-booting-root
body.app-booting
#appView,
html.smaei-app-booting-root
body.app-booting
#studentBottomNav,
html.smaei-app-booting-root
body.app-booting
#studentMobileHub {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  content-visibility: hidden !important;
}

html.smaei-app-booting-root,
html.smaei-app-booting-root body,
html.smaei-app-booting-root body.app-booting {
  min-height: 100% !important;
  background: var(--mobile-app-red, #d1131f) !important;
  overflow: hidden !important;
}

html.smaei-app-booting-root
.splash-screen {
  z-index: 2147483647 !important;
  background: var(--mobile-app-red, #d1131f) !important;
}

/* スプラッシュの透明化中も背面は赤一色のままにします。 */
body.app-booting.boot-exit-pending {
  background: var(--mobile-app-red, #d1131f) !important;
}

/* ===== 2026-07-31 スマホ課題学習：全画面時は下部メニューを非表示 v121 =====
 * 下部メニュー表示対応（v115〜v120）を明示的に上書きし、
 * 全画面記事を端末の表示領域下端まで広げます。
 */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  html.smaei-pwa-layout-active
  body.practical-article-fullscreen-open
  #studentBottomNav,
  html.smaei-standalone-app
  body.practical-article-fullscreen-open
  #studentBottomNav,
  body.smaei-pwa-layout-active.practical-article-fullscreen-open
  #studentBottomNav,
  body.smaei-standalone-app.practical-article-fullscreen-open
  #studentBottomNav,
  body.practical-article-fullscreen-open
  #studentBottomNav,
  body.practical-article-fullscreen-open
  .student-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    content-visibility: hidden !important;
  }

  body.practical-article-fullscreen-open
  #practicalArticleFullscreenOverlay {
    top: var(--practical-fullscreen-top, env(safe-area-inset-top, 0px)) !important;
    right: var(--practical-fullscreen-right, 0px) !important;
    bottom: 0 !important;
    left: var(--practical-fullscreen-left, 0px) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.practical-article-fullscreen-open
  #practicalArticleFullscreenOverlay
  .practical-article-scroll {
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }

  body.practical-article-fullscreen-open
  #practicalArticleFullscreenOverlay
  .practical-article-audio-panel {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* ===== 2026-07-31 課題学習：狭いDayカード内でバッヂを折り返す ===== */
.study-day-card,
.study-day-card-head,
.study-day-title-block,
.study-day-title-row {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.study-day-card {
  overflow: hidden;
}

.study-day-card-head,
.study-day-title-block,
.study-day-title-row {
  width: 100%;
}

.study-day-title-row {
  flex-wrap: wrap !important;
  align-content: flex-start;
  row-gap: 6px;
}

.study-day-title-row .study-day-label {
  flex: 0 0 auto !important;
}

.study-day-title-row .study-day-status-badge,
.study-day-title-row .study-today-task-label {
  flex: 0 1 auto !important;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .study-day-title-row {
    column-gap: 6px;
  }
}

/* ===== 2026-07-31 選択済み教材の2行表示・Month横スクロール ===== */
.study-month-selector-card {
  min-width: 0;
  overflow: hidden;
}

.study-month-badges {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 1px 6px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  box-sizing: border-box;
}

.study-month-badge {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  scroll-snap-align: start;
}

.study-confirmed-summary .study-selection-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
}

.study-confirmed-summary .study-selection-summary-row {
  display: grid;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.study-confirmed-summary .study-selection-summary-primary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.study-confirmed-summary .study-selection-summary-secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.study-confirmed-summary .study-selection-summary-row > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #fff;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

@media (max-width: 520px) {
  .study-confirmed-summary .study-selection-summary-row {
    gap: 6px;
  }

  .study-confirmed-summary .study-selection-summary-row > span {
    padding: 9px 8px;
    font-size: 12px;
  }

  .study-confirmed-summary .study-selection-summary-row > span > b {
    font-size: 11px;
  }
}

/* ===== 2026-07-31 全アカウント：各ページ冒頭の重複タイトルを非表示 v134 =====
 * PC表示ではトップバーがページ名だけを表示しているため、バーごと非表示にします。
 * スマホ・タブレット用のロゴヘッダーは維持し、タイトル領域だけを表示しません。
 */
.topbar-title,
#pageTitle,
#pageStatus {
  display: none !important;
}

@media (min-width: 821px) and (hover: hover) and (pointer: fine),
       (min-width: 961px) {
  .app-mode .topbar {
    display: none !important;
  }
}

/* ===== 2026-07-31 実践コース課題画面：翻訳安定化・コンパクト切替 v137 ===== */
body.practical-study-active .practical-study-top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.practical-study-active .practical-language-switch-wrap {
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
}

body.practical-study-active .practical-language-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(54px, 1fr));
  align-items: stretch;
  overflow: hidden;
  min-width: 122px;
  border: 1px solid #df0a1b;
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
}

body.practical-study-active .practical-language-switch button {
  min-width: 0 !important;
  min-height: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 1px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #c70b1b !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.practical-study-active .practical-language-switch button + button {
  border-left: 1px solid #df0a1b !important;
}

body.practical-study-active .practical-language-switch button.active {
  background: #df0a1b !important;
  color: #fff !important;
}

body.practical-study-active .practical-language-switch[aria-busy="true"] button:last-child:not(.active) {
  opacity: 0.72;
}

body.practical-study-active .practical-study-language-en .practical-task-prompt,
body.practical-study-active .practical-study-language-en .practical-page-learning-goal,
body.practical-study-active .practical-study-language-en .practical-stage-point {
  word-break: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.practical-study-active {
    --practical-study-back-row-height: 32px;
  }

  body.practical-study-active .practical-study-top-actions {
    height: var(--practical-study-back-row-height) !important;
    min-height: var(--practical-study-back-row-height) !important;
    padding: 3px 0 !important;
  }

  body.practical-study-active .practical-study-top-actions .practical-study-back-button {
    flex: 0 1 auto;
    max-width: calc(100% - 136px);
    min-height: 26px !important;
    height: 26px !important;
    padding: 2px 8px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.practical-study-active .practical-language-switch {
    grid-template-columns: repeat(2, minmax(52px, 1fr));
    min-width: 120px;
  }
}

@media (max-width: 390px) {
  body.practical-study-active .practical-study-top-actions {
    gap: 6px !important;
  }

  body.practical-study-active .practical-study-top-actions .practical-study-back-button {
    max-width: calc(100% - 126px);
    padding-inline: 6px !important;
    font-size: 10px !important;
  }

  body.practical-study-active .practical-language-switch {
    grid-template-columns: repeat(2, minmax(48px, 1fr));
    min-width: 112px;
  }

  body.practical-study-active .practical-language-switch button {
    padding-inline: 6px !important;
    font-size: 11px !important;
  }
}


/* ===== 2026-07-31 実践課題：英語STAGEラベル折返し防止 v140 ===== */
body.practical-study-active .practical-study-language-en .practical-stage-heading {
  align-items: flex-start;
}

body.practical-study-active .practical-study-language-en .practical-stage-heading > span {
  display: inline-block;
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict;
}

body.practical-study-active .practical-study-language-en .practical-stage-heading h3 {
  flex: 1 1 auto;
  min-width: 0;
}


/* ===== 2026-07-31 スマホ言語切替・講師教材重要語句 v148 ===== */
/* スマホでは文字サイズを維持し、言語切替スイッチの高さだけを従来の約80%へ縮小します。 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.practical-study-active .practical-language-switch {
    height: 22.8px !important;
    min-height: 22.8px !important;
    align-items: center !important;
  }

  body.practical-study-active .practical-language-switch button {
    min-height: 20.8px !important;
    height: 20.8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }
}

.teacher-material-article-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.teacher-material-article-heading h5 {
  margin: 0 !important;
}

.teacher-material-vocabulary-controls {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.teacher-material-vocab-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  max-width: 100%;
  margin: 0;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}

.teacher-material-vocab-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
}

.teacher-material-vocab-toggle input:disabled + span {
  color: #98a2b3;
}

.teacher-material-vocab-guide {
  margin: 7px 0 0;
}

.teacher-material-vocabulary-highlight {
  display: inline;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 2px;
  background: #fff2a8;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: inherit;
  text-decoration: underline dotted #9a6700;
  text-underline-offset: 2px;
  cursor: pointer;
}

.teacher-material-vocabulary-highlight:hover,
.teacher-material-vocabulary-highlight:focus-visible {
  background: #ffe46b;
  color: #3b2f00;
  outline: 2px solid #d9a300;
  outline-offset: 1px;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .teacher-material-article-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .teacher-material-vocabulary-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .teacher-material-vocab-toggle {
    font-size: 11px;
  }
}

/* ===== 2026-07-31 基礎コース・モバイル並び替えリアルタイムドラッグ v149 ===== */
.basic-reorder-token.is-touch-drag-source {
  visibility: hidden;
}

.basic-reorder-drag-ghost {
  position: fixed !important;
  z-index: 2147483000 !important;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 !important;
  opacity: 0.96;
  border-color: var(--brand, #c8161d) !important;
  background: var(--card, #fff);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28) !important;
  pointer-events: none !important;
  touch-action: none !important;
  transform: scale(1.04);
  transform-origin: center;
  transition: none !important;
  will-change: left, top, transform;
}

.basic-reorder-drag-ghost .basic-reorder-drag-handle {
  display: none !important;
}

.basic-reorder-token-list.is-touch-sorting {
  cursor: grabbing;
}

html.basic-reorder-touch-dragging,
html.basic-reorder-touch-dragging body {
  user-select: none !important;
  -webkit-user-select: none !important;
  overscroll-behavior-y: contain;
}

@media (pointer: coarse), (max-width: 820px) {
  .basic-reorder-token-list.is-touch-sorting .basic-reorder-token:not(.is-touch-drag-source) {
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
  }

  .basic-reorder-token-list.is-touch-sorting .basic-reorder-token:not(.is-touch-drag-source) {
    border-color: color-mix(in srgb, var(--brand, #c8161d) 34%, var(--border, #ddd));
  }
}


/* ===== 2026-07-31 基礎コース・モバイル並び替え即時開始 v151 ===== */
@media (pointer: coarse), (max-width: 820px) {
  .basic-reorder-token {
    /* 語句に触れた瞬間からPointer Eventsでドラッグを開始できるようにする。 */
    touch-action: none;
  }
}


/* ===== 2026-07-31 基礎コース・モバイル並び替え 行移動安定化／枠内拘束 v153 ===== */
.basic-reorder-drag-ghost {
  contain: layout style paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.basic-reorder-token.is-touch-drag-source {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (pointer: coarse), (max-width: 820px) {
  .basic-reorder-token-list.is-touch-sorting {
    /* 行をまたぐ再配置中の一時的な描画アニメーションを止め、点滅を防ぐ。 */
    overflow: hidden;
  }

  .basic-reorder-token-list.is-touch-sorting .basic-reorder-token {
    transition: none !important;
  }
}

/* ===== 2026-07-31 課題フィードバック経過時間の色分け ===== */
.teacher-study-submission-card {
  --teacher-feedback-age-accent: var(--line);
  --teacher-feedback-age-soft: #fff;
  border-left: 5px solid var(--teacher-feedback-age-accent);
  transition: border-color .2s ease, background-color .2s ease;
}

.teacher-study-submission-card.teacher-feedback-age-green {
  --teacher-feedback-age-accent: #5d9470;
  --teacher-feedback-age-soft: #f3f9f5;
}

.teacher-study-submission-card.teacher-feedback-age-yellow {
  --teacher-feedback-age-accent: #c79a3a;
  --teacher-feedback-age-soft: #fff9e9;
}

.teacher-study-submission-card.teacher-feedback-age-red {
  --teacher-feedback-age-accent: #d6535f;
  --teacher-feedback-age-soft: #fff3f4;
}

.teacher-study-submission-card.teacher-feedback-age-purple {
  --teacher-feedback-age-accent: #76569d;
  --teacher-feedback-age-soft: #f7f2fb;
}

.teacher-study-submission-card .teacher-feedback-card-toggle-area {
  margin: -16px -16px 0;
  padding: 16px;
  border-radius: 0;
  background: var(--teacher-feedback-age-soft);
}

.teacher-feedback-age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: #fff;
  color: var(--teacher-feedback-age-accent, var(--text));
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.teacher-feedback-age-badge.teacher-feedback-age-green {
  color: #3f7652;
  background: #edf7f0;
}

.teacher-feedback-age-badge.teacher-feedback-age-yellow {
  color: #84620d;
  background: #fff5cf;
}

.teacher-feedback-age-badge.teacher-feedback-age-red {
  color: #a4313c;
  background: #ffe9eb;
}

.teacher-feedback-age-badge.teacher-feedback-age-purple {
  color: #5d3d83;
  background: #eee6f6;
}

.teacher-feedback-age-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafafa;
  color: var(--muted, #667085);
  font-size: 12px;
  line-height: 1.4;
}

.teacher-feedback-age-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.teacher-feedback-age-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

.teacher-feedback-age-dot.teacher-feedback-age-green {
  background: #5d9470;
}

.teacher-feedback-age-dot.teacher-feedback-age-yellow {
  background: #c79a3a;
}

.teacher-feedback-age-dot.teacher-feedback-age-red {
  background: #d6535f;
}

.teacher-feedback-age-dot.teacher-feedback-age-purple {
  background: #76569d;
}

.teacher-feedback-reminder-note {
  margin: 0;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .teacher-study-submission-card .teacher-feedback-card-toggle-area {
    margin: -12px -12px 0;
    padding: 12px;
  }

  .teacher-feedback-card-summary {
    align-items: flex-start;
  }

  .teacher-feedback-card-summary-side {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .teacher-feedback-age-badge {
    min-height: 26px;
    padding: 3px 8px;
  }
}

/* ===== 2026-07-31 講師フィードバック・記事重要語句ハイライト v158 ===== */
.teacher-feedback-article-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 14px;
  min-width: 0;
}

.teacher-feedback-vocab-toggle {
  flex: 0 1 auto;
}

.teacher-feedback-vocab-guide {
  margin: 7px 0 0;
}

.teacher-feedback-vocabulary-highlight {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .teacher-feedback-article-head {
    flex-direction: column;
    align-items: stretch;
  }

  .teacher-feedback-article-actions {
    justify-content: flex-start;
    align-items: flex-start;
  }
}


/* ===== 2026-07-31 メッセージ表示先：4種のアイコン配色を明確化 ===== */
/*
 * 人物・事務局・教務管理者・システム通知を、それぞれ固有色で表示します。
 * 選択中もカテゴリ色を維持し、赤い枠とチェックだけを選択状態として使用します。
 */
.message-channel-card.is-person .message-channel-card-icon {
  border-color: #d5e1f3;
  background: #eef4ff;
  color: #35558a;
}

.message-channel-card.is-office .message-channel-card-icon {
  border-color: #f1d2d6;
  background: #fff1f2;
  color: #b4232d;
}

.message-channel-card.is-academic .message-channel-card-icon {
  border-color: #ddd3f2;
  background: #f5f1ff;
  color: #6941a5;
}

.message-channel-card.is-system .message-channel-card-icon {
  border-color: #eadbad;
  background: #fff8e6;
  color: #8a5a00;
}

.message-channel-card.is-active.is-person .message-channel-card-icon {
  border-color: #b9cae4;
  background: #f8fbff;
  color: #35558a;
}

.message-channel-card.is-active.is-office .message-channel-card-icon {
  border-color: #e9b6bc;
  background: #fff8f8;
  color: #b4232d;
}

.message-channel-card.is-active.is-academic .message-channel-card-icon {
  border-color: #cbbbe9;
  background: #fbf9ff;
  color: #6941a5;
}

.message-channel-card.is-active.is-system .message-channel-card-icon {
  border-color: #dcc98e;
  background: #fffdf6;
  color: #8a5a00;
}

.message-chat-recipient-header.is-person .message-chat-recipient-icon {
  border-color: #d5e1f3;
  background: #eef4ff;
  color: #35558a;
}

.message-chat-recipient-header.is-office .message-chat-recipient-icon {
  border-color: #f1d2d6;
  background: #fff1f2;
  color: #b4232d;
}

.message-chat-recipient-header.is-academic .message-chat-recipient-icon {
  border-color: #ddd3f2;
  background: #f5f1ff;
  color: #6941a5;
}

.message-chat-recipient-header.is-system .message-chat-recipient-icon {
  border-color: #eadbad;
  background: #fff8e6;
  color: #8a5a00;
}

/* ===== 2026-07-31 レッスン日時テーブル共通レイアウト v162 ===== */
/*
 * 生徒・講師・管理者のレッスン日時表を同じコンポーネントとして表示します。
 * PCでは内容に合う幅に収め、スマホでは画面幅を基本として必要時のみ横スクロールします。
 */
.lesson-schedule-table-wrap,
.student-schedule-month-card .lesson-schedule-table-wrap,
.lesson-schedule-table-wrap.student-schedule-table-wrap {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  box-sizing: border-box !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.lesson-schedule-table-wrap .lesson-schedule-data-table,
.student-schedule-month-card .lesson-schedule-table-wrap .lesson-schedule-data-table,
.lesson-schedule-table-wrap.student-schedule-table-wrap .lesson-schedule-data-table {
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  background: #fff !important;
}

.lesson-schedule-table-wrap .lesson-schedule-data-table th,
.lesson-schedule-table-wrap .lesson-schedule-data-table td {
  width: auto !important;
  min-width: 0 !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  vertical-align: middle !important;
}

.lesson-schedule-table-wrap .lesson-schedule-data-table th {
  background: #f8fafc !important;
  color: #475467;
  font-weight: 700;
}

.lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(1),
.lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(1) {
  min-width: 104px !important;
}

.lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(2),
.lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(2) {
  min-width: 228px !important;
}

.lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(3),
.lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(3) {
  min-width: 128px !important;
}

.lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(4),
.lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(4) {
  min-width: 142px !important;
}

.lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(5),
.lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(5) {
  min-width: 176px !important;
}

.student-schedule-plan-list,
.student-schedule-plan-section {
  width: fit-content;
  max-width: 100%;
}

.student-schedule-plan-section + .student-schedule-plan-section {
  margin-top: 12px;
}

.student-schedule-note-unavailable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .lesson-schedule-table-wrap,
  .student-schedule-month-card .lesson-schedule-table-wrap,
  .lesson-schedule-table-wrap.student-schedule-table-wrap,
  .student-schedule-plan-list,
  .student-schedule-plan-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table,
  .student-schedule-month-card .lesson-schedule-table-wrap .lesson-schedule-data-table,
  .lesson-schedule-table-wrap.student-schedule-table-wrap .lesson-schedule-data-table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table th,
  .lesson-schedule-table-wrap .lesson-schedule-data-table td {
    padding: 9px 11px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(1),
  .lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(1) {
    min-width: 88px !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(2),
  .lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(2) {
    min-width: 190px !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(3),
  .lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(3) {
    min-width: 104px !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(4),
  .lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(4) {
    min-width: 120px !important;
  }
}

/* v162: 既存の割合指定より内容幅を優先します。 */
.lesson-schedule-table-wrap .lesson-schedule-data-table col {
  width: auto !important;
}


/* ===== 20260731-schedule-change-inline-page-v163: 予定変更リクエストを同一画面内で表示 ===== */
.booking-modal-backdrop.booking-inline-page-shell {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box;
}

.booking-inline-page-shell .booking-inline-page {
  position: relative !important;
  z-index: auto !important;
  width: min(100%, 1120px);
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  overflow: visible !important;
}

.booking-inline-back-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.booking-inline-back-button {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
}

.booking-inline-page-header,
.booking-inline-request-card {
  margin: 0;
}

.booking-inline-page-header {
  padding: 22px 24px;
  border-top: 4px solid var(--primary);
}

.booking-inline-page-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.booking-inline-page-heading h3 {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.2vw, 28px);
}

.booking-inline-page-heading p {
  margin: 0;
  line-height: 1.7;
}

.booking-inline-month-pill {
  flex: 0 0 auto;
  margin-top: 2px;
  border-color: rgba(220, 15, 35, .22);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.booking-inline-request-card {
  padding: 22px 24px 26px;
}

.booking-request-section {
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.booking-request-section:first-of-type {
  margin-top: 14px;
}

/* 通常の予約リクエストでは、最初の「講師を選択」上部に区切り線を表示しません。 */
.booking-inline-request-card > .booking-request-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.booking-request-section-heading {
  margin-bottom: 12px;
}

.booking-request-section-heading h4 {
  margin: 0 0 4px;
  font-size: 18px;
}

.booking-request-section-heading p {
  margin: 0;
}

.booking-request-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 4px;
}

.booking-request-mode-tabs .secondary.active {
  border-color: var(--primary) !important;
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}

.booking-request-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.booking-request-field {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fbfcfe;
}

.booking-request-field label {
  margin-top: 0;
}

.booking-request-field p {
  margin-bottom: 0;
}

.booking-request-preview-block {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(220, 15, 35, .16);
  border-radius: 14px;
  background: #fffafa;
}

.booking-request-preview-block .lesson-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 8px;
}

.booking-request-preview-block p {
  margin: 0;
}

.booking-request-submit-actions {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.booking-inline-loading-card {
  min-height: 260px;
  display: grid;
  place-items: center;
}

body.student-mobile-nav-enabled .booking-modal-backdrop.booking-inline-page-shell {
  inset: auto !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
}

body.student-mobile-nav-enabled .booking-inline-page-shell .booking-modal {
  max-height: none !important;
}

.booking-inline-page.booking-busy {
  overflow: visible !important;
}

.booking-inline-page.booking-busy .booking-busy-overlay {
  position: fixed !important;
  inset: 0 !important;
  min-height: 100dvh !important;
  border-radius: 0 !important;
  z-index: 1400;
}

.booking-inline-page.booking-busy .booking-busy-center {
  position: fixed !important;
  inset: 0 !important;
  display: grid;
  place-items: center;
}

@media (max-width: 820px) {
  .booking-inline-page-shell .booking-inline-page {
    width: 100%;
    gap: 12px;
  }

  .booking-inline-page-header,
  .booking-inline-request-card {
    padding: 18px 16px;
    border-radius: 16px;
  }

  .booking-inline-page-heading {
    display: grid;
    gap: 10px;
  }

  .booking-request-form-grid {
    grid-template-columns: 1fr;
  }

  .booking-request-mode-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .booking-request-mode-tabs button,
  .booking-request-submit-actions button {
    width: 100%;
  }

  .booking-inline-back-button {
    width: auto !important;
  }
}

/* ===== 20260731-student-schedule-row-compact-v164 ===== */
/* レッスン日時表の行高を少し詰めます。文字サイズと改行禁止設定は維持します。 */
.lesson-schedule-table-wrap .lesson-schedule-data-table th,
.lesson-schedule-table-wrap .lesson-schedule-data-table td {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.lesson-schedule-table-wrap .student-schedule-note-button {
  min-height: 30px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .lesson-schedule-table-wrap .lesson-schedule-data-table th,
  .lesson-schedule-table-wrap .lesson-schedule-data-table td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .lesson-schedule-table-wrap .student-schedule-note-button {
    min-height: 28px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}


/* ===== 20260731-lesson-schedule-table-width-refinement-v166 ===== */
/* PC: remove the reserved scrollbar gutter and keep the table only as wide as its content. */
.lesson-schedule-table-wrap,
.student-schedule-month-card .lesson-schedule-table-wrap,
.lesson-schedule-table-wrap.student-schedule-table-wrap {
  scrollbar-gutter: auto !important;
}

.lesson-schedule-table-wrap .lesson-schedule-data-table th,
.lesson-schedule-table-wrap .lesson-schedule-data-table td {
  padding-left: 11px !important;
  padding-right: 11px !important;
}

.lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(1),
.lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(1) {
  min-width: 84px !important;
}

.lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(2),
.lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(2) {
  min-width: 190px !important;
}

.lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(3),
.lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(3) {
  min-width: 92px !important;
}

.lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(4),
.lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(4) {
  min-width: 116px !important;
}

.lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(5),
.lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(5) {
  min-width: 148px !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .lesson-schedule-table-wrap .lesson-schedule-data-table th,
  .lesson-schedule-table-wrap .lesson-schedule-data-table td {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(1),
  .lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(1) {
    min-width: 74px !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(2),
  .lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(2) {
    min-width: 168px !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(3),
  .lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(3) {
    min-width: 82px !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(4),
  .lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(4) {
    min-width: 94px !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table th:nth-child(5),
  .lesson-schedule-table-wrap .lesson-schedule-data-table td:nth-child(5) {
    min-width: 124px !important;
  }
}


/* ===== 20260731-schedule-change-request-refinement-v168 ===== */
/* 選択中の受講方法を明確な赤で表示します。 */
.booking-request-mode-tabs .secondary.active,
.booking-request-mode-tabs .secondary[aria-pressed="true"] {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(220, 15, 35, .18) !important;
}

.booking-request-mode-tabs .secondary.active:hover,
.booking-request-mode-tabs .secondary.active:focus-visible {
  border-color: var(--primary-dark, #b70d1d) !important;
  background: var(--primary-dark, #b70d1d) !important;
  color: #fff !important;
}

/* PCでも講師候補をスマホと同じ横並び・横スクロール表示に統一します。 */
.booking-modal .teacher-card-scroll,
.booking-inline-page .teacher-card-scroll {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 6px 2px 12px !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.booking-modal .teacher-card-scroll .compact-teacher-card,
.booking-inline-page .teacher-card-scroll .compact-teacher-card {
  flex: 0 0 142px !important;
  width: 142px !important;
  max-width: 142px !important;
  scroll-snap-align: start;
}


/* ===== 20260731-schedule-change-other-teachers-mobile-fit-v169 =====
   スマホの「他の講師を探す」画面をビューポート内に収めます。 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.student-mobile-nav-enabled .main,
  body.student-mobile-nav-enabled #content,
  body.student-mobile-nav-enabled .booking-inline-page-shell,
  body.student-mobile-nav-enabled .booking-inline-page-shell .booking-inline-page,
  body.student-mobile-nav-enabled .booking-inline-page-header,
  body.student-mobile-nav-enabled .booking-inline-request-card,
  body.student-mobile-nav-enabled .booking-request-section,
  body.student-mobile-nav-enabled .booking-teacher-search-section,
  body.student-mobile-nav-enabled .teacher-filter-grid,
  body.student-mobile-nav-enabled .specialty-filter,
  body.student-mobile-nav-enabled .teacher-profile-mini,
  body.student-mobile-nav-enabled .booking-request-form-grid,
  body.student-mobile-nav-enabled .booking-request-field,
  body.student-mobile-nav-enabled .booking-request-preview-block {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.student-mobile-nav-enabled #content,
  body.student-mobile-nav-enabled .booking-inline-page-shell,
  body.student-mobile-nav-enabled .booking-inline-page-shell .booking-inline-page,
  body.student-mobile-nav-enabled .booking-inline-request-card {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  body.student-mobile-nav-enabled .booking-inline-page-shell .booking-inline-page {
    margin: 0 !important;
  }

  body.student-mobile-nav-enabled .booking-inline-page-header,
  body.student-mobile-nav-enabled .booking-inline-request-card {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.student-mobile-nav-enabled .booking-request-mode-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.student-mobile-nav-enabled .booking-request-mode-tabs button {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 7px 8px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  body.student-mobile-nav-enabled .booking-teacher-search-section {
    overflow: hidden !important;
  }

  body.student-mobile-nav-enabled .booking-teacher-search-section .teacher-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  body.student-mobile-nav-enabled .booking-teacher-search-section .filter-chip-section,
  body.student-mobile-nav-enabled .booking-teacher-search-section .specialty-group,
  body.student-mobile-nav-enabled .booking-teacher-search-section .slot-day-group,
  body.student-mobile-nav-enabled .booking-teacher-search-section .slot-day-head {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 各検索条件は画面全体ではなく、その行の中だけ左右にスクロールさせます。 */
  body.student-mobile-nav-enabled .booking-teacher-search-section .filter-chip-wrap {
    display: flex !important;
    flex-flow: row nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    margin: 6px 0 10px !important;
    padding: 0 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  body.student-mobile-nav-enabled .booking-teacher-search-section .filter-chip {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 30px !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  body.student-mobile-nav-enabled .booking-teacher-search-section .slot-day-group {
    padding: 7px !important;
  }

  body.student-mobile-nav-enabled .booking-teacher-search-section .slot-day-toggle {
    flex: 0 0 32px !important;
    width: 32px !important;
  }

  body.student-mobile-nav-enabled .booking-teacher-search-section .slot-day-select {
    min-width: 0 !important;
  }

  body.student-mobile-nav-enabled .booking-teacher-search-section .teacher-card-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 4px 0 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
  }

  body.student-mobile-nav-enabled .booking-teacher-search-section .compact-teacher-card {
    flex: 0 0 116px !important;
    width: 116px !important;
    max-width: 116px !important;
    min-width: 116px !important;
    min-height: 118px !important;
    padding: 9px 7px !important;
  }

  body.student-mobile-nav-enabled .booking-teacher-search-section .compact-teacher-card img,
  body.student-mobile-nav-enabled .booking-teacher-search-section .compact-teacher-card .teacher-photo-placeholder {
    width: 62px !important;
    height: 62px !important;
    margin-bottom: 6px !important;
  }

  body.student-mobile-nav-enabled .booking-teacher-search-section .compact-teacher-card h4 {
    max-width: 100% !important;
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.student-mobile-nav-enabled .booking-teacher-search-section .teacher-profile-mini {
    width: 100% !important;
    padding: 11px !important;
    overflow: hidden !important;
  }

  body.student-mobile-nav-enabled .booking-teacher-search-section .teacher-profile-mini p,
  body.student-mobile-nav-enabled .booking-teacher-search-section .teacher-profile-business-experience,
  body.student-mobile-nav-enabled .booking-teacher-search-section .notice-soft {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  body.student-mobile-nav-enabled .booking-request-field select,
  body.student-mobile-nav-enabled .booking-request-field input,
  body.student-mobile-nav-enabled .booking-request-field textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.student-mobile-nav-enabled .booking-request-preview-block .lesson-preview {
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px !important;
    overscroll-behavior-x: contain;
  }

  body.student-mobile-nav-enabled .booking-request-preview-block .lesson-preview .pill {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  body.student-mobile-nav-enabled .booking-request-submit-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body.student-mobile-nav-enabled .booking-request-submit-actions button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===== 2026-08-01 Day5：自己学習案内と記述式模範解答 ===== */
body.practical-study-active .day5-self-study-notice {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 2px 0 4px;
  color: var(--muted, #5f6b82);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
  text-align: right;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

body.practical-study-active .day5-self-study-no-break {
  white-space: nowrap;
}

.basic-exercise-model-answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #b9d8c4;
  border-radius: 10px;
  color: #245b38;
  background: #f3faf5;
  line-height: 1.7;
  box-sizing: border-box;
}

.basic-exercise-model-answer b {
  white-space: nowrap;
}

.basic-exercise-model-answer span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 820px) {
  body.practical-study-active .day5-self-study-notice {
    padding-bottom: 2px;
    font-size: 13px;
    text-align: center;
  }

  .basic-exercise-model-answer {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    padding: 10px 11px;
  }
}


/* ===== 20260801-schedule-rejection-status-table-border-v172 ===== */
/* 最終行は外枠のみで閉じ、セルの下罫線との二重線を防ぎます。 */
.lesson-schedule-table-wrap .lesson-schedule-data-table tbody tr:last-child > th,
.lesson-schedule-table-wrap .lesson-schedule-data-table tbody tr:last-child > td {
  border-bottom: 0 !important;
}


/* ===== 20260801-button-red-palette-unified-v173 ===== */
/*
 * サイト内の赤系ボタンを、濃い赤／薄い赤の共通パレットへ統一します。
 * 選択状態や hover は役割を保ちつつ、近似色の乱立を防ぎます。
 */

/* 標準の薄い赤ボタン */
button.secondary,
button.danger,
button.danger-soft,
.student-mobile-menu-card.danger,
body.student-mobile-nav-enabled .student-mobile-menu-card.danger,
.day6-setup-actions #aiConversationSetupBackButton,
.day6-live-pause-button,
.day6-final-feedback-screen #aiConversationFeedbackAudioButton,
.practical-article-fullscreen-button {
  background: var(--button-red-soft) !important;
  color: var(--button-red) !important;
  border-color: var(--button-red-border) !important;
}

button.secondary:hover,
button.secondary:focus-visible,
button.danger:hover,
button.danger:focus-visible,
button.danger-soft:hover,
button.danger-soft:focus-visible,
.student-mobile-menu-card.danger:hover,
.student-mobile-menu-card.danger:focus-visible,
body.student-mobile-nav-enabled .student-mobile-menu-card.danger:hover,
body.student-mobile-nav-enabled .student-mobile-menu-card.danger:focus-visible,
.day6-setup-actions #aiConversationSetupBackButton:hover,
.day6-setup-actions #aiConversationSetupBackButton:focus-visible,
.day6-live-pause-button:hover,
.day6-live-pause-button:focus-visible,
.day6-final-feedback-screen #aiConversationFeedbackAudioButton:hover,
.day6-final-feedback-screen #aiConversationFeedbackAudioButton:focus-visible,
.practical-article-fullscreen-button:hover,
.practical-article-fullscreen-button:focus-visible {
  background: var(--button-red-soft) !important;
  color: var(--button-red-hover) !important;
  border-color: var(--button-red) !important;
}

/* 赤い選択・実行ボタン */
.schedule-tabs button.active,
.learning-plan-activity-toolbar-main button.active,
.teacher-tab-row button.active,
.mode-tabs button.active,
.practical-page-tabs button.active,
.admin-material-template-tabs button.active,
.practical-article-view-toggle button.active,
.ai-confirmation-answer-mode-button.active,
.ai-chat-speak-button[aria-pressed="true"],
.ai-evaluation-language-switch button.active,
.booking-request-mode-tabs .secondary.active,
.booking-request-mode-tabs .secondary[aria-pressed="true"],
body.practical-study-active .practical-language-switch button.active,
.day6-live-primary-actions #aiConversationFinishButtonSecondary,
.day6-control-compact-actions #aiConversationFinishButtonSecondary {
  background: var(--button-red) !important;
  color: #fff !important;
  border-color: var(--button-red) !important;
}

.schedule-tabs button.active:hover,
.learning-plan-activity-toolbar-main button.active:hover,
.teacher-tab-row button.active:hover,
.mode-tabs button.active:hover,
.practical-page-tabs button.active:hover,
.admin-material-template-tabs button.active:hover,
.practical-article-view-toggle button.active:hover,
.ai-confirmation-answer-mode-button.active:hover,
.ai-chat-speak-button[aria-pressed="true"]:hover,
.ai-evaluation-language-switch button.active:hover,
.booking-request-mode-tabs .secondary.active:hover,
.booking-request-mode-tabs .secondary[aria-pressed="true"]:hover,
body.practical-study-active .practical-language-switch button.active:hover,
.day6-live-primary-actions #aiConversationFinishButtonSecondary:hover,
.day6-control-compact-actions #aiConversationFinishButtonSecondary:hover {
  background: var(--button-red-hover) !important;
  border-color: var(--button-red-hover) !important;
}

/* 赤系ボタンのフォーカス表示も共通化 */
button.secondary:focus-visible,
button.danger:focus-visible,
button.danger-soft:focus-visible,
.schedule-tabs button.active:focus-visible,
.booking-request-mode-tabs .secondary[aria-pressed="true"]:focus-visible {
  outline: 3px solid var(--button-red-focus) !important;
  outline-offset: 2px;
}


/* ===== 2026-08-01 student home welcome emphasis ===== */
.home-guidance .home-welcome-copy {
  color: var(--primary);
}
.home-guidance .home-welcome-title,
.home-guidance .home-welcome-subtitle {
  color: var(--primary);
  font-weight: 800;
}
.home-guidance .home-welcome-title {
  font-size: 1.28em;
  line-height: 1.45;
}
.home-guidance .home-welcome-subtitle {
  font-size: 1.10em;
  line-height: 1.55;
}


/* ===== 2026-08-01 課題学習：本日の学習Weekを明示 ===== */
.study-week-tab {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 54px;
}

.study-week-tab-text {
  display: block;
  line-height: 1.15;
  white-space: nowrap;
}

.study-week-current-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary, #d1131f);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .02em;
  white-space: nowrap;
}

.study-week-tab.is-today-week:not(.active) {
  border: 2px solid var(--primary, #d1131f) !important;
  background: #fff8f8 !important;
  color: var(--primary, #d1131f) !important;
  box-shadow: 0 0 0 3px rgba(209, 19, 31, .08);
}

.study-week-tab.is-today-week.active {
  box-shadow: 0 0 0 3px rgba(209, 19, 31, .16);
}

.study-week-tab.is-today-week.active .study-week-current-badge {
  background: #fff;
  color: var(--primary, #d1131f);
}

.study-week-tab.is-today-week:not(.active):hover,
.study-week-tab.is-today-week:not(.active):focus-visible {
  border-color: var(--primary, #d1131f) !important;
  background: #fff1f2 !important;
  color: var(--primary, #d1131f) !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .study-week-tab {
    min-height: 45px;
    gap: 1px;
  }

  .study-week-current-badge {
    min-height: 13px;
    padding: 0 5px;
    font-size: 8px;
  }
}


/* ===== 20260801-home-week-table-refinement-v176 ===== */
/* 歓迎文の補足行は、その下の通常案内文と同じ文字サイズにします。 */
.home-guidance .home-welcome-subtitle {
  font-size: 1em !important;
  line-height: inherit;
}

/* 本日の学習Weekは、Dayカードの「本日の課題」と同じ赤枠＋左アクセントで示します。 */
.study-week-tab {
  flex-direction: row;
  gap: 0;
}

.study-week-current-badge {
  display: none !important;
}

.study-week-tab.is-today-week:not(.active) {
  border-color: var(--primary, #d1131f) !important;
  background: #fff !important;
  color: var(--primary, #d1131f) !important;
  box-shadow: inset 4px 0 0 var(--primary, #d1131f) !important;
}

/* 本日のWeekを選択中は、通常の選択タブと同じ赤地・白文字にします。
 * 左側の濃い赤アクセントを残し、「本日のWeek」と「選択中」の両方を示します。 */
.study-week-tab.is-today-week.active {
  border-color: var(--primary, #d1131f) !important;
  background: var(--primary, #d1131f) !important;
  color: #fff !important;
  box-shadow: inset 4px 0 0 var(--primary-hover, #a90f19) !important;
}

.study-week-tab.is-today-week:not(.active):hover,
.study-week-tab.is-today-week:not(.active):focus-visible {
  border-color: var(--primary, #d1131f) !important;
  background: var(--primary-soft, #fff1f2) !important;
  color: var(--primary, #d1131f) !important;
  box-shadow: inset 4px 0 0 var(--primary, #d1131f) !important;
}

.study-week-tab.is-today-week.active:hover,
.study-week-tab.is-today-week.active:focus-visible {
  border-color: var(--primary-hover, #a90f19) !important;
  background: var(--primary-hover, #a90f19) !important;
  color: #fff !important;
  box-shadow: inset 4px 0 0 #820b13 !important;
}

/*
 * スマホ用テーブルは、内容幅で終端を決め、余剰幅を右端へ残しません。
 * 内容が画面幅を超える場合だけ、各テーブル領域内で横スクロールします。
 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .lesson-schedule-table-wrap,
  .student-schedule-month-card .lesson-schedule-table-wrap,
  .lesson-schedule-table-wrap.student-schedule-table-wrap,
  .schedule-table-compact,
  .compact-lesson-table {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-gutter: auto !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table,
  .student-schedule-month-card .lesson-schedule-table-wrap .lesson-schedule-data-table,
  .lesson-schedule-table-wrap.student-schedule-table-wrap .lesson-schedule-data-table {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    table-layout: auto !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table th,
  .lesson-schedule-table-wrap .lesson-schedule-data-table td {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table th:first-child,
  .lesson-schedule-table-wrap .lesson-schedule-data-table td:first-child {
    padding-left: 8px !important;
  }

  .lesson-schedule-table-wrap .lesson-schedule-data-table th:last-child,
  .lesson-schedule-table-wrap .lesson-schedule-data-table td:last-child {
    width: 1% !important;
    padding-right: 5px !important;
  }

  .lesson-schedule-table-wrap .student-schedule-note-button {
    min-width: 82px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 同種の横スクロール表でも、右側の予約領域や余分なpaddingを作らないよう統一します。 */
  .table-wrap,
  .schedule-table-wrap {
    padding-right: 0 !important;
    scrollbar-gutter: auto !important;
  }

  .table-wrap > table,
  .schedule-table-wrap > table {
    margin-right: 0 !important;
  }
}

/* ===== 20260801-current-week-active-state-v177 ===== */

/* ===== 20260801-current-week-border-width-v179 ===== */
/* 本日のDayカードと同じ、通常1pxの外枠＋左側4pxアクセントに統一します。 */
.study-week-tab.is-today-week:not(.active),
.study-week-tab.is-today-week.active {
  border-width: 1px !important;
  border-style: solid !important;
}

/* ===== 2026-08-01 予定変更リクエスト：段階表示と空き状況再確認 ===== */
.booking-availability-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-color: rgba(209, 19, 31, .16);
  background: #fff8f8;
  color: var(--text, #14213d);
}

.booking-availability-status-main {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  line-height: 1.6;
}

.booking-availability-spinner {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(209, 19, 31, .2);
  border-top-color: var(--primary, #d1131f);
  border-radius: 50%;
  animation: booking-availability-spin .8s linear infinite;
}

.booking-availability-retry {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 14px;
  white-space: nowrap;
}

@keyframes booking-availability-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .booking-availability-status {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 11px 12px;
  }

  .booking-availability-retry {
    align-self: flex-start;
    width: auto !important;
    min-width: 92px;
  }
}

/* ===== 2026-08-01 ホーム案内カード：メッセージ連動うさぎイラスト ===== */
.home-guidance-with-illustration {
  position: relative;
  overflow: hidden;
  background: linear-gradient(112deg, #ffffff 0%, #ffffff 58%, #fff8f8 100%);
  border-color: #f7c9cd;
}

.home-guidance-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(132px, 18vw, 196px);
  align-items: end;
  gap: clamp(14px, 2vw, 28px);
  min-height: 184px;
}

.home-guidance-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: clamp(-48px, -2vw, -18px);
  bottom: clamp(-60px, -4vw, -24px);
  width: clamp(200px, 24vw, 310px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 42%, rgba(255, 255, 255, .96) 0 36%, rgba(255, 237, 239, .82) 67%, rgba(255, 237, 239, 0) 72%);
  pointer-events: none;
}

.home-guidance-copy {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.home-guidance-copy::after {
  content: none;
  display: none;
}

.home-guidance-illustration {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  padding: 0;
  margin-bottom: -10px;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.home-guidance-illustration img {
  display: block;
  width: 100%;
  max-width: 188px;
  max-height: 176px;
  object-fit: contain;
  filter: none;
  transform: translateY(1px);
}

.home-guidance-with-illustration .actions {
  justify-content: flex-start;
}

@media (max-width: 960px) {
  .home-guidance-shell {
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 10px;
    min-height: 0;
  }

  .home-guidance-shell::after {
    right: -50px;
    bottom: -42px;
    width: 180px;
  }

  .home-guidance-illustration {
    margin-bottom: -4px;
  }

  .home-guidance-illustration img {
    width: 126px;
    max-width: 126px;
    max-height: 148px;
  }

  .home-guidance-copy p {
    line-height: 1.6;
  }

  .home-guidance-copy .actions button {
    width: auto;
    min-width: 120px;
  }
}

@media (max-width: 640px) {
  .home-guidance-with-illustration {
    background: linear-gradient(108deg, #ffffff 0%, #ffffff 70%, #fff8f8 100%);
  }

  .home-guidance-shell {
    grid-template-columns: minmax(0, 1fr) 106px;
    gap: 4px;
  }

  .home-guidance-shell::after {
    right: -42px;
    bottom: -24px;
    width: 138px;
  }

  .home-guidance-illustration {
    margin-bottom: 0;
  }

  .home-guidance-illustration img {
    width: 104px;
    max-width: 104px;
    max-height: 122px;
  }

  .home-guidance-copy p {
    line-height: 1.54;
  }

  .student-dashboard .home-guidance-copy .actions,
  .home-guidance-copy .actions {
    width: auto !important;
    max-width: 100% !important;
  }

  .student-dashboard .home-guidance-copy .actions button,
  .home-guidance-copy .actions button {
    width: fit-content !important;
    min-width: 164px !important;
    max-width: 100% !important;
    padding-inline: 26px !important;
  }
}

@media (max-width: 430px) {
  .home-guidance-shell {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 2px;
  }

  .home-guidance-shell::after {
    right: -34px;
    bottom: -18px;
    width: 116px;
  }

  .home-guidance-illustration img {
    width: 94px;
    max-width: 94px;
    max-height: 112px;
  }
}

/* ===== 2026-08-02 ホーム案内カード：歓迎文・画像・ボタン配置 v191 =====
 * 歓迎文をカード全幅に分離し、画像の横幅による不自然な改行を防ぎます。
 * 画像は、その下の案内文の右側に配置し、淡い赤の円形背景も画像に追従させます。
 */
.home-guidance-with-illustration .home-guidance-shell {
  display: block;
  min-height: 0;
}

.home-guidance-with-illustration .home-welcome-copy {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: none;
  margin: 0 0 6px;
  padding: 0;
  line-height: 1.55;
}

.home-guidance-with-illustration .home-welcome-title,
.home-guidance-with-illustration .home-welcome-subtitle {
  display: inline;
}

.home-guidance-with-illustration .home-welcome-subtitle {
  display: inline-block;
  margin-top: 2px;
}

.home-guidance-with-illustration .home-welcome-title {
  margin-right: .35em;
}

.home-guidance-lower {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(158px, 19vw, 220px);
  align-items: end;
  gap: clamp(12px, 2vw, 26px);
  min-height: 204px;
}

.home-guidance-lower .home-guidance-copy {
  align-self: center;
  min-width: 0;
  padding-block: 8px 14px;
}

/* 旧レイアウトのカード基準の円形背景は使わず、画像自身を基準に配置します。 */
.home-guidance-with-illustration .home-guidance-shell::after {
  content: none !important;
  display: none !important;
}

.home-guidance-lower .home-guidance-illustration {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  margin: 0 0 -14px;
  padding: 0;
}

.home-guidance-lower .home-guidance-illustration::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 8px;
  width: clamp(190px, 22vw, 258px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(255, 255, 255, .98) 0 24%, rgba(255, 244, 245, .98) 45%, rgba(252, 231, 234, .96) 68%, rgba(247, 214, 219, .94) 100%);
  transform: translateX(-50%);
  pointer-events: none;
}

.home-guidance-lower .home-guidance-illustration img {
  display: block;
  width: auto;
  height: clamp(214px, 21vw, 262px);
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
}

/* タブレット幅でも、スマホと同じく内容に合った長さのボタンにします。 */
@media (min-width: 641px) and (max-width: 820px) {
  .student-dashboard .home-guidance-copy .actions,
  .home-guidance-copy .actions {
    width: auto !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }

  .student-dashboard .home-guidance-copy .actions button,
  .home-guidance-copy .actions button {
    width: fit-content !important;
    min-width: 164px !important;
    max-width: 100% !important;
    padding-inline: 26px !important;
  }
}

@media (max-width: 960px) {
  .home-guidance-lower {
    grid-template-columns: minmax(0, 1fr) 154px;
    gap: 10px;
    min-height: 178px;
  }

  .home-guidance-lower .home-guidance-copy {
    padding-block: 6px 12px;
  }

  .home-guidance-lower .home-guidance-illustration {
    margin-bottom: -10px;
  }

  .home-guidance-lower .home-guidance-illustration::before {
    bottom: 7px;
    width: 188px;
  }

  .home-guidance-lower .home-guidance-illustration img {
    height: 198px;
  }
}

@media (max-width: 640px) {
  .home-guidance-with-illustration .home-welcome-copy {
    margin-bottom: 4px;
  }

  .home-guidance-lower {
    grid-template-columns: minmax(0, 1fr) 126px;
    gap: 4px;
    min-height: 154px;
  }

  .home-guidance-lower .home-guidance-copy {
    align-self: center;
    padding-block: 4px 10px;
  }

  .home-guidance-lower .home-guidance-illustration {
    margin-bottom: -8px;
  }

  .home-guidance-lower .home-guidance-illustration::before {
    bottom: 8px;
    width: 154px;
  }

  .home-guidance-lower .home-guidance-illustration img {
    height: 172px;
  }
}

@media (max-width: 430px) {
  .home-guidance-with-illustration .home-welcome-copy {
    line-height: 1.5;
  }

  .home-guidance-lower {
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 2px;
    min-height: 142px;
  }

  .home-guidance-lower .home-guidance-illustration::before {
    width: 136px;
  }

  .home-guidance-lower .home-guidance-illustration img {
    height: 154px;
  }
}


/* ===== 2026-08-02 ホーム案内カード：PNGイラスト使用 v192 =====
 * public/assets/home-guidance 内のPNG画像を表示します。
 * SVG描画差異を避け、イラスト内部が赤く塗りつぶされて見える問題を防ぎます。
 */
.home-guidance-lower .home-guidance-illustration img {
  filter: none !important;
  mix-blend-mode: normal !important;
}


/* ===== 2026-08-02 ホーム案内カード：PC高さ・円形背景配置 v193 =====
 * PCではイラストを本文レイアウトから外して歓迎文の高さまで引き上げ、
 * イラストのためだけにカードが縦へ伸びないようにします。
 * 円形背景はイラストより大きくし、右下をカード外へ逃がして一部を切り取ります。
 */
@media (min-width: 961px) {
  .home-guidance-with-illustration .home-guidance-shell {
    position: relative;
    min-height: 0;
  }

  .home-guidance-with-illustration .home-welcome-copy,
  .home-guidance-lower .home-guidance-copy {
    padding-right: clamp(224px, 25vw, 300px);
  }

  .home-guidance-lower {
    position: static;
    display: block;
    min-height: 0;
  }

  .home-guidance-lower .home-guidance-copy {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .home-guidance-lower .home-guidance-illustration {
    position: absolute;
    z-index: 1;
    top: -8px;
    right: clamp(-14px, -1vw, -4px);
    bottom: -16px;
    width: clamp(218px, 23vw, 282px);
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
  }

  .home-guidance-lower .home-guidance-illustration::before {
    left: auto;
    right: clamp(-122px, -8vw, -76px);
    bottom: clamp(-126px, -8vw, -84px);
    width: clamp(318px, 32vw, 410px);
    transform: none;
  }

  .home-guidance-lower .home-guidance-illustration img {
    width: auto;
    height: clamp(218px, 22vw, 272px);
    max-width: 100%;
    object-position: center bottom;
  }
}

@media (min-width: 641px) and (max-width: 960px) {
  .home-guidance-lower .home-guidance-illustration::before {
    left: auto;
    right: -82px;
    bottom: -64px;
    width: 252px;
    transform: none;
  }
}

@media (max-width: 640px) {
  .home-guidance-lower .home-guidance-illustration::before {
    left: auto;
    right: -68px;
    bottom: -54px;
    width: 210px;
    transform: none;
  }
}

@media (max-width: 430px) {
  .home-guidance-lower .home-guidance-illustration::before {
    right: -60px;
    bottom: -48px;
    width: 184px;
  }
}


/* ===== 2026-08-02 ホーム案内カード：PC画像フィット調整 v194 =====
 * PCでイラストがカード外にはみ出さないよう、
 * イラスト枠の上下位置をカード内に収め、画像は枠内で高さに合わせて縮小します。
 * 円形背景は大きめのまま、右下がカード外へ一部はみ出す配置を維持します。
 */
@media (min-width: 961px) {
  .home-guidance-with-illustration .home-welcome-copy,
  .home-guidance-lower .home-guidance-copy {
    padding-right: clamp(232px, 25vw, 314px);
  }

  .home-guidance-lower .home-guidance-copy {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .home-guidance-lower .home-guidance-illustration {
    top: 8px;
    right: clamp(2px, 0.6vw, 12px);
    bottom: 8px;
    width: clamp(198px, 20vw, 248px);
    justify-content: center;
    align-items: center;
  }

  .home-guidance-lower .home-guidance-illustration::before {
    right: clamp(-126px, -8vw, -84px);
    bottom: clamp(-120px, -8vw, -78px);
    width: clamp(308px, 31vw, 392px);
  }

  .home-guidance-lower .home-guidance-illustration img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
  }
}


/* ===== 2026-08-02 ホーム案内カード：PC画像拡大調整 v195 =====
 * PCではカード外にはみ出さない範囲で、イラストをもう一段大きく見せます。
 * 画像枠の上下余白をわずかに詰め、表示倍率を少し上げて、
 * 文字量に対して小さく見えすぎないようにします。
 */
@media (min-width: 961px) {
  .home-guidance-with-illustration .home-welcome-copy,
  .home-guidance-lower .home-guidance-copy {
    padding-right: clamp(244px, 26vw, 326px);
  }

  .home-guidance-lower .home-guidance-illustration {
    top: 4px;
    right: clamp(4px, 0.7vw, 14px);
    bottom: 4px;
    width: clamp(214px, 21vw, 260px);
  }

  .home-guidance-lower .home-guidance-illustration::before {
    right: clamp(-122px, -8vw, -80px);
    bottom: clamp(-116px, -8vw, -74px);
    width: clamp(316px, 31vw, 398px);
  }

  .home-guidance-lower .home-guidance-illustration img {
    max-width: 100%;
    max-height: 100%;
    transform: scale(1.12);
    transform-origin: center center;
  }
}


/* ===== 2026-08-02 ホーム案内カード：PC画像さらに約20%拡大 v196 =====
 * v195からさらにPC時のイラストを約20%大きく見せます。
 * カード外にはみ出さないよう右側領域もあわせて少し広げます。
 */
@media (min-width: 961px) {
  .home-guidance-with-illustration .home-welcome-copy,
  .home-guidance-lower .home-guidance-copy {
    padding-right: clamp(266px, 28vw, 352px);
  }

  .home-guidance-lower .home-guidance-illustration {
    top: 2px;
    right: clamp(6px, 0.8vw, 16px);
    bottom: 2px;
    width: clamp(236px, 23vw, 298px);
  }

  .home-guidance-lower .home-guidance-illustration::before {
    right: clamp(-126px, -8vw, -84px);
    bottom: clamp(-114px, -7.8vw, -72px);
    width: clamp(324px, 32vw, 410px);
  }

  .home-guidance-lower .home-guidance-illustration img {
    max-width: 100%;
    max-height: 100%;
    transform: scale(1.34);
    transform-origin: center center;
  }
}


/* ===== 2026-08-02 ホーム案内カード：PC画像10%縮小 v197 =====
 * v196の表示からPC時のイラストを約10%縮小します。
 * カード内配置と円形背景の見せ方は維持します。
 */
@media (min-width: 961px) {
  .home-guidance-with-illustration .home-welcome-copy,
  .home-guidance-lower .home-guidance-copy {
    padding-right: clamp(258px, 27vw, 340px);
  }

  .home-guidance-lower .home-guidance-illustration {
    top: 3px;
    right: clamp(6px, 0.8vw, 16px);
    bottom: 3px;
    width: clamp(226px, 22vw, 284px);
  }

  .home-guidance-lower .home-guidance-illustration img {
    max-width: 100%;
    max-height: 100%;
    transform: scale(1.206);
    transform-origin: center center;
  }
}


/* ===== 2026-08-02 ホーム案内カード：円形背景960px基準固定 v198 =====
 * 画面幅960px時の円形背景（252px）を上限とし、
 * それより広いPC画面でも背景円が拡大しないよう固定します。
 */
@media (min-width: 961px) {
  .home-guidance-lower .home-guidance-illustration::before {
    right: -82px;
    bottom: -64px;
    width: 252px;
  }
}


/* ===== 2026-08-02 ホーム案内カード：円形背景960px時1.25倍 v199 =====
 * 960px時の背景円を252pxから315px（1.25倍）へ拡大します。
 * 961px以上では315pxを上限として固定し、それ以上は拡大しません。
 */
@media (min-width: 641px) and (max-width: 960px) {
  .home-guidance-lower .home-guidance-illustration::before {
    right: clamp(-103px, -10.7vw, -82px);
    bottom: clamp(-80px, -8.34vw, -64px);
    width: clamp(252px, 32.8125vw, 315px);
  }
}

@media (min-width: 961px) {
  .home-guidance-lower .home-guidance-illustration::before {
    right: -103px;
    bottom: -80px;
    width: 315px;
  }
}


/* ===== 2026-08-02 ホーム案内カード：レッスン日歓迎文・高さ統一 v200 =====
 * レッスン日にも歓迎文を表示します。
 * カードの高さはDay 1〜Day 6の通常表示を基準に、画面幅ごとに固定します。
 * メッセージ量が少ない状態でもカードの縦幅が変わりません。
 */
.home-guidance-with-illustration {
  height: 290px;
  min-height: 290px;
  max-height: 290px;
}

.home-guidance-with-illustration .home-guidance-shell {
  height: 100%;
}

@media (max-width: 960px) {
  .home-guidance-with-illustration {
    height: 286px;
    min-height: 286px;
    max-height: 286px;
  }
}

@media (max-width: 640px) {
  .home-guidance-with-illustration {
    height: 300px;
    min-height: 300px;
    max-height: 300px;
  }
}

@media (max-width: 430px) {
  .home-guidance-with-illustration {
    height: 320px;
    min-height: 320px;
    max-height: 320px;
  }
}


/* ===== 2026-08-02 ホーム案内カード：画像わずかに縮小 v201 =====
 * 初回案内カードなどで画像がやや大きく見え、
 * ボタン下の余白が目立つため、PC表示のイラストだけ少し縮小します。
 * カードの標準高さと円形背景のサイズ・配置は維持します。
 */
@media (min-width: 961px) {
  .home-guidance-with-illustration .home-welcome-copy,
  .home-guidance-lower .home-guidance-copy {
    padding-right: clamp(248px, 26vw, 332px);
  }

  .home-guidance-lower .home-guidance-illustration {
    top: 8px;
    right: clamp(6px, 0.8vw, 16px);
    bottom: 8px;
    width: clamp(216px, 21vw, 272px);
  }

  .home-guidance-lower .home-guidance-illustration img {
    max-width: 100%;
    max-height: 100%;
    transform: scale(1.10);
    transform-origin: center center;
  }
}


/* ===== 2026-08-02 ホーム案内カード：スマホ下部余白解消 v202 =====
 * スマホ表示では固定されたカード高さを解除し、
 * テキスト・ボタン・画像の実際の高さに合わせてカードを収めます。
 * PC・タブレットの高さ設定には影響しません。
 */
@media (max-width: 640px) {
  .home-guidance-with-illustration {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .home-guidance-with-illustration .home-guidance-shell {
    height: auto;
    min-height: 0;
  }

  .home-guidance-lower {
    min-height: 0;
  }
}


/* ===== 2026-08-02 ホーム案内カード：PC高さ80%・画像上下中央 v203 =====
 * PC表示のカード高さを290pxから232px（80%）へ変更します。
 * イラスト枠はカード内の上下余白を均等にし、画像を上下中央に配置します。
 * スマホ表示の内容連動高さには影響しません。
 */
@media (min-width: 961px) {
  .home-guidance-with-illustration {
    height: 232px;
    min-height: 232px;
    max-height: 232px;
  }

  .home-guidance-with-illustration .home-guidance-shell {
    height: 100%;
  }

  .home-guidance-lower .home-guidance-illustration {
    top: 8px;
    bottom: 8px;
    align-items: center;
    justify-content: center;
  }

  .home-guidance-lower .home-guidance-illustration img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    transform: scale(1.08);
    transform-origin: center center;
  }
}


/* ===== 2026-08-02 ホーム案内カード：PC高さ290pxへ復元 v204 =====
 * PC表示のカード高さを290pxへ戻します。
 * イラストの上下中央配置は維持し、スマホの自動高さ設定には影響させません。
 */
@media (min-width: 961px) {
  .home-guidance-with-illustration {
    height: 290px;
    min-height: 290px;
    max-height: 290px;
  }

  .home-guidance-lower .home-guidance-illustration {
    top: 8px;
    bottom: 8px;
    align-items: center;
  }
}


/* ===== 2026-08-02 ホーム案内カード：PC高さ10%短縮 v210 =====
 * PC表示のカード高さを290pxから261px（90%）へ変更します。
 * イラストは縮小後のカード内でも上下中央を維持します。
 * タブレット・スマホ表示には影響させません。
 */
@media (min-width: 961px) {
  .home-guidance-with-illustration {
    height: 261px;
    min-height: 261px;
    max-height: 261px;
  }

  .home-guidance-with-illustration .home-guidance-shell {
    height: 100%;
  }

  .home-guidance-lower .home-guidance-illustration {
    top: 8px;
    bottom: 8px;
    align-items: center;
    justify-content: center;
  }

  .home-guidance-lower .home-guidance-illustration img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
  }
}


/* ===== 2026-08-04 基礎コース 並び替え 文末記号表示 v224 ===== */
.basic-reorder-punctuation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: flex-end;
  min-width: 36px;
  min-height: 42px;
  margin-left: auto;
  padding: 3px 6px;
  color: var(--text, #1e2746);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

@media (pointer: coarse), (max-width: 820px) {
  .basic-reorder-punctuation {
    min-height: 46px;
    font-size: 24px;
  }
}


/* ===== 2026-08-04 Day5・Day6 AI学習注意事項・同意 v228 ===== */
body.ai-learning-notice-modal-open {
  overflow: hidden !important;
  touch-action: none;
}

.ai-learning-notice-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5200;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(20, 25, 38, 0.58);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.ai-learning-notice-modal {
  width: min(720px, 100%);
  max-height: calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: clamp(22px, 4vw, 36px);
  overflow: auto;
  border: 1px solid rgba(209, 19, 31, 0.18);
  box-shadow: 0 24px 70px rgba(10, 18, 35, 0.28);
}

.ai-learning-notice-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.ai-learning-notice-heading > div:last-child {
  min-width: 0;
}

.ai-learning-notice-heading span {
  display: block;
  margin-bottom: 4px;
  color: var(--primary, #d1131f);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.ai-learning-notice-heading h2 {
  margin: 0;
  font-size: clamp(24px, 4vw, 32px);
}

.ai-learning-notice-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--primary, #d1131f);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .04em;
}

.ai-learning-notice-lead {
  margin: 0 0 16px;
  line-height: 1.75;
}

.ai-learning-notice-list-wrap {
  max-height: min(340px, 42dvh);
  margin-bottom: 18px;
  padding: 16px 18px;
  overflow: auto;
  border: 1px solid var(--border, #dfe3ea);
  border-radius: 14px;
  background: var(--surface-subtle, #f7f8fb);
  overscroll-behavior: contain;
}

.ai-learning-notice-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 22px;
  line-height: 1.7;
}

.ai-learning-notice-check {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid var(--border, #dfe3ea);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.ai-learning-notice-check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--primary, #d1131f);
}

.ai-learning-notice-check span {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.ai-learning-notice-actions {
  justify-content: flex-end;
  margin-top: 22px;
}

@media (max-width: 640px) {
  .ai-learning-notice-modal-backdrop {
    align-items: end;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .ai-learning-notice-modal {
    width: 100%;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 20px 16px;
    border-radius: 20px 20px 14px 14px;
  }

  .ai-learning-notice-heading {
    align-items: flex-start;
    gap: 12px;
  }

  .ai-learning-notice-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 17px;
  }

  .ai-learning-notice-list-wrap {
    max-height: 38dvh;
    padding: 14px 14px;
  }

  .ai-learning-notice-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ai-learning-notice-actions button {
    width: 100%;
  }

  .ai-learning-notice-actions button:not(.secondary) {
    order: -1;
  }
}


/* ===== 2026-08-04 生徒お知らせ：ページタイトルカード v234 ===== */
.student-announcements-title-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 16px;
  box-sizing: border-box;
}

.student-announcements-title-card h3 {
  margin: 0;
}

.student-announcements-empty {
  margin-top: 0;
}


/* ===== 2026-08-04 全アカウントPC：ログアウトボタンデザイン v236 ===== */
@media (min-width: 821px) {
  .sidebar #nav.nav > button.student-nav-item.danger[data-action="logout"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 42px !important;
    margin-top: 8px !important;
    padding: 9px 13px !important;
    border: 1px solid rgba(255, 118, 128, 0.42) !important;
    border-radius: 12px !important;
    background: rgba(209, 19, 31, 0.10) !important;
    color: #ffd5d8 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
  }

  .sidebar #nav.nav > button.student-nav-item.danger[data-action="logout"] .student-nav-item-label {
    color: inherit !important;
    font-weight: 600 !important;
  }

  .sidebar #nav.nav > button.student-nav-item.danger[data-action="logout"] .sidebar-logout-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    color: #ff9da5 !important;
  }

  .sidebar #nav.nav > button.student-nav-item.danger[data-action="logout"] .sidebar-logout-icon .student-mobile-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
  }

  .sidebar #nav.nav > button.student-nav-item.danger[data-action="logout"]:hover,
  .sidebar #nav.nav > button.student-nav-item.danger[data-action="logout"]:focus-visible {
    border-color: rgba(255, 151, 159, 0.72) !important;
    background: rgba(209, 19, 31, 0.22) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    outline: none !important;
  }

  .sidebar #nav.nav > button.student-nav-item.danger[data-action="logout"]:hover .sidebar-logout-icon,
  .sidebar #nav.nav > button.student-nav-item.danger[data-action="logout"]:focus-visible .sidebar-logout-icon {
    color: #ffffff !important;
  }

  .sidebar #nav.nav > button.student-nav-item.danger[data-action="logout"]:active {
    transform: translateY(0) !important;
    background: rgba(209, 19, 31, 0.28) !important;
  }
}


/* ===== 2026-08-04 生徒お知らせ：タイトル説明文 v237 ===== */
.student-announcements-title-card p {
  margin: 7px 0 0;
  line-height: 1.6;
}


/* ===== 2026-08-05 決済・課金履歴：右側余白解消 v289 ===== */
.contract-payment-history-wrap {
  width: 100%;
  max-height: 330px;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.contract-payment-history-wrap .contract-payment-history {
  width: 100%;
  min-width: 100%;
  margin: 0;
}

.contract-payment-history-wrap .contract-payment-history thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-subtle, #f7f8fa);
  box-shadow: 0 1px 0 var(--line);
}

.contract-payment-history-wrap:focus-visible {
  outline: 3px solid var(--button-red-focus);
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .contract-payment-history-wrap {
    max-height: 300px;
  }
}


/* ===== 2026-08-04 PC teacher filter options horizontal layout v240 ===== */
@media (min-width: 821px) {
  .booking-teacher-search-section .teacher-filter-grid {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 28px;
  }

  .booking-teacher-search-section .teacher-filter-grid > .filter-chip-section {
    flex: 0 1 auto;
    min-width: 0;
  }

  .booking-teacher-search-section .teacher-filter-grid > .filter-chip-section .filter-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: none;
    margin: 8px 0 10px;
  }

  .booking-teacher-search-section .teacher-filter-grid > .filter-chip-section .filter-chip {
    white-space: nowrap;
  }
}


/* ===== 2026-08-04 PC teacher filter lesson availability newline v241 ===== */
@media (min-width: 821px) {
  .booking-teacher-search-section .teacher-filter-grid > .slot-accordion {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .booking-teacher-search-section .teacher-filter-grid > .slot-accordion > label {
    display: block;
  }
}


/* ===== 2026-08-04 Selected teacher profile layout v242 ===== */
.booking-teacher-search-section .teacher-profile-mini .teacher-profile-summary,
.booking-request-section .teacher-profile-mini .teacher-profile-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.booking-teacher-search-section .teacher-profile-mini .teacher-profile-name,
.booking-request-section .teacher-profile-mini .teacher-profile-name {
  display: block;
  font-size: 20px;
  line-height: 1.4;
}

.booking-teacher-search-section .teacher-profile-mini .teacher-photo,
.booking-request-section .teacher-profile-mini .teacher-photo {
  display: block;
  width: 168px;
  height: 168px;
  max-width: none;
  margin: 10px auto 12px;
  object-fit: cover;
  border-radius: 22px;
}

.booking-teacher-search-section .teacher-profile-mini .teacher-profile-badges,
.booking-request-section .teacher-profile-mini .teacher-profile-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-bottom: 12px;
}

.booking-teacher-search-section .teacher-profile-mini .teacher-profile-badges .pill,
.booking-request-section .teacher-profile-mini .teacher-profile-badges .pill {
  margin: 0;
}

.booking-teacher-search-section .teacher-profile-mini .teacher-profile-bio,
.booking-teacher-search-section .teacher-profile-mini .teacher-profile-business-experience p,
.booking-request-section .teacher-profile-mini .teacher-profile-bio,
.booking-request-section .teacher-profile-mini .teacher-profile-business-experience p {
  font-size: 15px;
  line-height: 1.75;
}

@media (max-width: 820px) {
  .booking-teacher-search-section .teacher-profile-mini .teacher-photo,
  .booking-request-section .teacher-profile-mini .teacher-photo {
    width: 136px;
    height: 136px;
    border-radius: 20px;
  }

  .booking-teacher-search-section .teacher-profile-mini .teacher-profile-name,
  .booking-request-section .teacher-profile-mini .teacher-profile-name {
    font-size: 18px;
  }

  .booking-teacher-search-section .teacher-profile-mini .teacher-profile-bio,
  .booking-teacher-search-section .teacher-profile-mini .teacher-profile-business-experience p,
  .booking-request-section .teacher-profile-mini .teacher-profile-bio,
  .booking-request-section .teacher-profile-mini .teacher-profile-business-experience p {
    font-size: 14px;
  }
}


/* ===== 2026-08-04 スマホ講師カード：選択中のみ赤枠 v243 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .teacher-card-scroll {
    touch-action: pan-x !important;
  }

  /* タップしながら横へスワイプしたカードに hover / focus が残っても、
     選択中でなければ赤枠や薄赤背景を表示しません。 */
  .teacher-card-scroll .teacher-select-card:not(.selected),
  .teacher-card-scroll .teacher-select-card:not(.selected):hover,
  .teacher-card-scroll .teacher-select-card:not(.selected):focus,
  .teacher-card-scroll .teacher-select-card:not(.selected):focus-visible,
  .teacher-card-scroll .teacher-select-card:not(.selected):active,
  .teacher-card-scroll .teacher-select-card:not(.selected).mobile-touch-pressed {
    border-color: var(--border) !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .06) !important;
    outline: none !important;
  }

  .teacher-card-scroll .teacher-select-card.selected,
  .teacher-card-scroll .teacher-select-card.selected:hover,
  .teacher-card-scroll .teacher-select-card.selected:focus,
  .teacher-card-scroll .teacher-select-card.selected:active {
    border-color: var(--primary) !important;
    background: var(--primary-soft) !important;
  }
}


/* ===== 2026-08-04 予定変更リクエスト：標準カードデザイン統一 v244 ===== */
.booking-inline-page-header,
.booking-inline-request-card {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 8px 20px rgba(16, 24, 40, .04);
}

.booking-inline-page-header {
  border-top: 1px solid var(--line);
}

.booking-inline-page-heading {
  align-items: flex-start;
  gap: 12px;
}

.booking-inline-page-heading h3 {
  margin: 0 0 7px;
  font-size: 19px;
  line-height: 1.4;
}

.booking-inline-page-heading p {
  margin: 0;
  line-height: 1.6;
}

.booking-inline-month-pill {
  margin-top: 0;
}


/* ===== 2026-08-04 schedule change mobile header pill fix v246 ===== */
@media (max-width: 820px) {
  .booking-inline-page-header {
    border-radius: 15px;
  }

  .booking-inline-page-heading > .booking-inline-month-pill {
    display: inline-flex;
    width: auto;
    max-width: max-content;
    justify-self: start;
    align-self: start;
    margin-right: 0;
  }
}


/* ===== 2026-08-04 schedule change mobile border continuity fix v247 ===== */
@media (max-width: 820px) {
  .booking-inline-page-header,
  .booking-inline-request-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line) !important;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
  }
}


/* ===== 2026-08-04 学習計画・進捗：下部余白整理 v248 ===== */
.learning-plan-page {
  padding-bottom: 0;
}

@media (max-width: 820px) {
  body.student-mobile-nav-enabled .learning-plan-page {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* ===== 2026-08-04 スマホ予定変更：講師カード上からの縦スクロール許可 v249 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.student-mobile-nav-enabled .booking-teacher-search-section .teacher-card-scroll,
  body.student-mobile-nav-enabled .booking-teacher-search-section .teacher-select-card,
  body.student-mobile-nav-enabled .booking-teacher-search-section .teacher-select-card img,
  body.student-mobile-nav-enabled .booking-teacher-search-section .teacher-photo-placeholder {
    touch-action: pan-x pan-y pinch-zoom !important;
  }

  body.student-mobile-nav-enabled .booking-teacher-search-section .teacher-card-scroll {
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
  }
}


/* ===== 2026-08-04 生徒スタディノート v250 ===== */
.study-notes-page,
.admin-study-notes-page {
  display: grid;
  gap: 16px;
}

.study-notes-title-card h3,
.study-notes-title-card p,
.admin-study-notes-header h3,
.admin-study-notes-header p {
  margin-top: 0;
}

.study-notes-title-card p,
.admin-study-notes-header p {
  margin-bottom: 0;
}

.study-notes-layout {
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.study-notes-list-card,
.study-note-editor-card {
  min-width: 0;
}

.study-notes-list-heading,
.study-note-editor-heading,
.admin-study-notes-header,
.admin-study-note-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.study-notes-list-heading {
  margin-bottom: 12px;
}

.study-notes-list-heading h3,
.study-note-editor-heading h3,
.admin-study-note-heading h3 {
  margin: 0;
}

.study-note-editor-heading {
  margin-bottom: 12px;
}

.study-note-editor-heading p {
  margin: 5px 0 0;
}

.study-note-list {
  display: grid;
  gap: 8px;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 3px;
}

.study-note-list-item {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 64px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.study-note-list-item strong,
.study-note-list-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.study-note-list-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.study-note-list-item.selected,
.study-note-list-item[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 0 0 2px rgba(209, 19, 31, .09);
}

.study-note-editor-card #studyNoteTitle {
  margin-bottom: 12px;
}

.study-note-editor-card .lesson-note-editor {
  min-height: 300px;
}

.study-note-editor-actions {
  margin-top: 14px;
}

.study-note-page-notice {
  margin: 0;
}

.admin-study-notes-header {
  align-items: flex-start;
}

.admin-study-notes-list {
  display: grid;
  gap: 14px;
}

.admin-study-note-heading {
  align-items: flex-start;
  margin-bottom: 12px;
}

.admin-study-note-heading span {
  flex: 0 0 auto;
}

.admin-study-note-body {
  min-height: 80px;
}

@media (max-width: 820px) {
  .study-notes-layout {
    grid-template-columns: 1fr;
  }

  .study-note-list {
    max-height: 260px;
  }

  .study-notes-list-heading,
  .study-note-editor-heading,
  .admin-study-notes-header,
  .admin-study-note-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .study-notes-list-heading #studyNoteNewButton,
  .admin-study-notes-header > button {
    width: auto !important;
  }

  .study-note-editor-card .lesson-note-editor {
    min-height: 240px;
  }
}


/* ===== 2026-08-04 スタディノート 一覧・編集画面分離 v251 ===== */
.study-notes-list-page .study-notes-list-card,
.study-note-editor-page .study-note-editor-card {
  width: 100%;
  min-width: 0;
}

.study-notes-list-page .study-note-list {
  max-height: none;
}

.study-note-list-open-label {
  justify-self: start;
  color: var(--primary) !important;
  font-weight: 700 !important;
}

.study-note-editor-heading #studyNoteBackButton {
  flex: 0 0 auto;
  width: auto;
}

@media (max-width: 820px) {
  .study-note-editor-heading #studyNoteBackButton {
    width: 100% !important;
  }

  .study-note-editor-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .study-note-editor-actions button {
    width: 100%;
  }
}


/* ===== 2026-08-04 スタディノート：メモカードのホバー表示改善 v252 ===== */
.study-note-list-item:hover,
.study-note-list-item:focus,
.study-note-list-item:focus-visible,
.study-note-list-item:active {
  border-color: rgba(209, 19, 31, .32) !important;
  background: #fff7f8 !important;
  color: var(--text) !important;
  box-shadow: 0 3px 10px rgba(16, 24, 40, .07) !important;
  transform: none !important;
}

.study-note-list-item:hover strong,
.study-note-list-item:focus strong,
.study-note-list-item:focus-visible strong,
.study-note-list-item:active strong {
  color: var(--text) !important;
}

.study-note-list-item:hover span:not(.study-note-list-open-label),
.study-note-list-item:focus span:not(.study-note-list-open-label),
.study-note-list-item:focus-visible span:not(.study-note-list-open-label),
.study-note-list-item:active span:not(.study-note-list-open-label) {
  color: var(--muted) !important;
}

.study-note-list-item:hover .study-note-list-open-label,
.study-note-list-item:focus .study-note-list-open-label,
.study-note-list-item:focus-visible .study-note-list-open-label,
.study-note-list-item:active .study-note-list-open-label {
  color: var(--primary) !important;
}


/* ===== 2026-08-04 契約手続き：規約カード縦配置・読了後同意 v260 ===== */
.contract-legal-grid {
  grid-template-columns: minmax(0, 1fr);
}

.contract-procedure-terms-card {
  max-height: min(440px, 56vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

.contract-procedure-terms-card:focus-visible {
  outline: 2px solid rgba(216, 13, 28, .28);
  outline-offset: 2px;
}

.contract-procedure-terms-card.is-read-to-end {
  border-color: rgba(6, 118, 71, .38);
}

.contract-terms-scroll-hint {
  margin: 5px 0 8px;
  line-height: 1.6;
}

.contract-consent-row.is-locked {
  cursor: not-allowed;
  opacity: .58;
  background: #f8f9fb;
}

.contract-consent-row.is-locked:hover {
  background: #f8f9fb;
}

.contract-consent-row input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

@media (max-width: 820px) {
  .contract-procedure-terms-card {
    max-height: min(380px, 52vh);
  }
}


/* ===== 2026-08-05 生徒向け利用規約：太字編集 v261 ===== */
.contract-terms-editor-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.contract-terms-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  background: #f8f9fb;
}

.contract-terms-format-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto !important;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.contract-terms-format-button:hover,
.contract-terms-format-button:focus-visible {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.contract-terms-format-button strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1;
}

.contract-terms-rich-editor {
  min-height: 310px;
  max-height: 520px;
  overflow-y: auto;
  padding: 13px 14px;
  color: var(--text);
  line-height: 1.75;
  outline: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.contract-terms-rich-editor:focus {
  box-shadow: inset 0 0 0 2px rgba(216, 14, 31, .12);
}

.contract-terms-rich-editor p,
.contract-terms-rich-editor div {
  margin: 0 0 .85em;
}

.contract-terms-rich-editor p:last-child,
.contract-terms-rich-editor div:last-child {
  margin-bottom: 0;
}

@media (max-width: 820px) {
  .contract-terms-rich-editor {
    min-height: 260px;
    max-height: 440px;
  }
}


/* ===== 2026-08-05 契約手続き：利用規約見出し固定 v262 ===== */
.contract-procedure-terms-card {
  padding: 0;
}

.contract-terms-sticky-title {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 3px 8px rgba(16, 24, 40, .04);
}

.contract-terms-sticky-title h3 {
  margin: 0;
}

.contract-terms-scroll-body {
  padding: 14px 18px 18px;
}

.contract-terms-scroll-body > :first-child {
  margin-top: 0;
}

.contract-terms-scroll-body > :last-child {
  margin-bottom: 0;
}

@media (max-width: 820px) {
  .contract-terms-sticky-title {
    padding: 15px 15px 11px;
  }

  .contract-terms-scroll-body {
    padding: 13px 15px 15px;
  }
}


/* ===== 2026-08-05 生徒向け利用規約：番号付きリスト編集 v263 ===== */
.contract-terms-ordered-list-button strong {
  min-width: 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.contract-terms-rich-editor ol,
.contract-settings-text ol,
.legal-card ol,
.contract-terms-scroll-body ol {
  margin: .65em 0 .9em;
  padding-left: 2em;
  list-style: decimal;
}

.contract-terms-rich-editor li,
.contract-settings-text li,
.legal-card li,
.contract-terms-scroll-body li {
  margin: .35em 0;
  padding-left: .2em;
  line-height: 1.75;
}

@media (max-width: 820px) {
  .contract-terms-editor-toolbar {
    flex-wrap: wrap;
  }

  .contract-terms-format-button {
    min-width: 0;
  }
}


/* ===== 2026-08-05 スタディノート：未契約時は閲覧専用 v266 ===== */
.study-note-readonly-notice {
  margin: 0;
}

.study-note-readonly-title {
  min-height: 44px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
  color: var(--text);
  overflow-wrap: anywhere;
}

.study-note-readonly-body {
  min-height: 240px;
  background: #f8fafc;
  cursor: default;
}

.study-note-editor-card.is-readonly .study-note-editor-heading {
  margin-bottom: 14px;
}

/* ===== 2026-08-05 スマホ：AI学習注意事項チェック欄の横書き固定 v270 ===== */
.ai-learning-notice-check {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 11px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

.ai-learning-notice-check input[type="checkbox"] {
  display: block !important;
  grid-column: 1 !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ai-learning-notice-check span {
  display: block !important;
  grid-column: 2 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 640px) {
  .ai-learning-notice-check {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    padding: 13px 14px !important;
  }

  .ai-learning-notice-check span {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}


/* ===== 2026-08-05 学習履歴：未確認フィードバックバッジ ===== */
.learning-history-summary-side,
.learning-history-day-summary-side {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.learning-history-summary-title .learning-history-summary-side {
  margin-left: auto;
}

.learning-history-day-summary-side {
  margin-left: auto;
}

.learning-history-day > summary .learning-history-day-summary-side .pill {
  margin-left: 0;
}

.learning-history-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid #d9121b;
  border-radius: 999px;
  background: #d9121b;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(217, 18, 27, .16);
}

.learning-history-unread-badge[hidden] {
  display: none !important;
}

@media (max-width: 620px) {
  .learning-history-summary-side,
  .learning-history-day-summary-side {
    gap: 5px;
  }

  .learning-history-unread-badge {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 11px;
  }

  .learning-history-day-summary-side .pill {
    font-size: 11px;
  }
}


/* ===== 2026-08-05 スタディノート：タイトル太字調整・100件上限 v283 / v285 ===== */
.study-note-list-item .study-note-list-title,
.study-note-list-item > strong {
  font-weight: 600 !important;
}

.study-note-count {
  margin: 4px 0 0;
  line-height: 1.3;
}

.study-note-limit-notice {
  margin: 0 0 12px;
}

.study-notes-list-heading > div:first-child {
  min-width: 0;
}

#studyNoteNewButton:disabled {
  cursor: not-allowed;
  opacity: .65;
}


/* ===== 2026-08-05 ノート全画面：スマホのヘッダー・下部メニューを除外 v284 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /* 全画面中もアプリのヘッダーを画面上部に残します。 */
  body.lesson-note-fullscreen-open .topbar,
  body.lesson-note-fullscreen-open.header-hidden .topbar {
    transform: translate3d(0, 0, 0) !important;
    z-index: 10030 !important;
  }

  /* 生徒・講師の下部メニューも編集画面の外側に残します。 */
  body.lesson-note-fullscreen-open .student-bottom-nav:not(.hidden) {
    z-index: 10030 !important;
  }

  body.lesson-note-fullscreen-open .lesson-note-editor-shell.is-fullscreen {
    inset:
      var(--lesson-note-fullscreen-top, calc(52px + env(safe-area-inset-top, 0px)))
      0
      var(--lesson-note-fullscreen-bottom, calc(var(--student-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px)))
      0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 6px !important;
    border-top: 1px solid #e4e7ec;
    border-bottom: 1px solid #e4e7ec;
    box-shadow: none !important;
  }

  body.lesson-note-fullscreen-open .lesson-note-editor-shell.is-fullscreen .lesson-note-toolbar {
    max-height: 78px;
    overscroll-behavior-x: contain;
  }

  /* 横長のツールバーをスクロールしても、全画面解除ボタンを右端に固定します。 */
  body.lesson-note-fullscreen-open .lesson-note-editor-shell.is-fullscreen .note-toolbar-fullscreen-group {
    position: sticky !important;
    right: 0;
    z-index: 5;
    margin-left: 4px !important;
    padding-left: 6px !important;
    background: #f8fafc;
    box-shadow: -8px 0 10px rgba(248, 250, 252, .96);
  }

  body.lesson-note-fullscreen-open .lesson-note-editor-shell.is-fullscreen .note-toolbar-fullscreen-button {
    flex: 0 0 auto;
  }
}


/* ===== 2026-08-05 ノート全画面：ヘッダー下余白・タイトルウェイト再調整 v285 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.lesson-note-fullscreen-open .lesson-note-editor-shell.is-fullscreen {
    /* JSで実測したヘッダー下端＋8pxを優先。JS実行前の予備値も少し広くします。 */
    top: var(--lesson-note-fullscreen-top, calc(60px + env(safe-area-inset-top, 0px))) !important;
  }
}

/* ===== 2026-08-05 ノート通常表示：スマホの編集ツールバーは横スクロール専用 v286 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body:not(.lesson-note-fullscreen-open)
  .lesson-note-editor-shell:not(.is-fullscreen)
  .lesson-note-toolbar {
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-height: 46px !important;
    max-height: 46px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body:not(.lesson-note-fullscreen-open)
  .lesson-note-editor-shell:not(.is-fullscreen)
  .lesson-note-toolbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  body:not(.lesson-note-fullscreen-open)
  .lesson-note-editor-shell:not(.is-fullscreen)
  .lesson-note-toolbar > .note-toolbar-group {
    flex: 0 0 auto;
    align-self: center;
  }
}


/* ===== 2026-08-05 契約プラン：キャンペーンコード欄を同一カード内へ統合 v287 ===== */


/* ===== 2026-08-05 契約手続き：規約未読時の同意案内吹き出し v288 ===== */
.contract-consent-lock-wrap {
  position: relative;
}

.contract-consent-row.is-locked input[type="checkbox"] {
  pointer-events: none;
}

.contract-consent-row.is-locked:focus-visible {
  outline: 2px solid rgba(216, 13, 28, .28);
  outline-offset: -2px;
}

.contract-consent-row.is-attention {
  animation: contract-consent-attention-v288 .28s ease-out;
}

.contract-consent-lock-tooltip {
  position: absolute;
  z-index: 20;
  left: 46px;
  bottom: calc(100% - 4px);
  width: max-content;
  max-width: min(390px, calc(100vw - 92px));
  padding: 9px 12px;
  border: 1px solid rgba(216, 13, 28, .25);
  border-radius: 9px;
  background: #fff;
  color: #b10d1a;
  box-shadow: 0 7px 22px rgba(15, 23, 42, .16);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(5px) scale(.98);
  transform-origin: left bottom;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.contract-consent-lock-tooltip::before,
.contract-consent-lock-tooltip::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
}

.contract-consent-lock-tooltip::before {
  border-width: 8px 7px 0;
  border-color: rgba(216, 13, 28, .25) transparent transparent;
}

.contract-consent-lock-tooltip::after {
  left: 19px;
  border-width: 7px 6px 0;
  border-color: #fff transparent transparent;
}

.contract-consent-lock-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

@keyframes contract-consent-attention-v288 {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(3px); }
  70% { transform: translateX(-2px); }
}

@media (max-width: 560px) {
  .contract-consent-lock-tooltip {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }

  .contract-consent-lock-tooltip::before {
    left: 27px;
  }

  .contract-consent-lock-tooltip::after {
    left: 28px;
  }
}


/* ===== 2026-08-05 スマホ：レッスン表の右側余白解消 v290 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /*
   * 生徒ホームの「レッスンスケジュール」と、受講スケジュール画面の
   * 「今月／次月のレッスン」は、表が短い場合もカードの内幅いっぱいに広げます。
   * 表が画面幅を超える場合の横スクロールはそのまま維持します。
   */
  .student-dashboard .lesson-schedule-table-wrap,
  .student-dashboard .schedule-table-compact,
  .student-dashboard .compact-lesson-table,
  .student-schedule-month-card .lesson-schedule-table-wrap,
  .student-schedule-month-card .schedule-table-compact,
  .student-schedule-month-card .compact-lesson-table,
  .student-schedule-month-card .student-month-schedule-table {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-gutter: auto !important;
  }

  .student-dashboard .lesson-schedule-table-wrap > .lesson-schedule-data-table,
  .student-dashboard .schedule-table-compact > table,
  .student-dashboard .compact-lesson-table > table,
  .student-schedule-month-card .lesson-schedule-table-wrap > .lesson-schedule-data-table,
  .student-schedule-month-card .schedule-table-compact > table,
  .student-schedule-month-card .compact-lesson-table > table,
  .student-schedule-month-card .student-month-schedule-table > table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    table-layout: auto !important;
  }

  .student-dashboard .lesson-schedule-table-wrap > .lesson-schedule-data-table th:last-child,
  .student-dashboard .lesson-schedule-table-wrap > .lesson-schedule-data-table td:last-child,
  .student-schedule-month-card .lesson-schedule-table-wrap > .lesson-schedule-data-table th:last-child,
  .student-schedule-month-card .lesson-schedule-table-wrap > .lesson-schedule-data-table td:last-child {
    padding-right: 8px !important;
  }
}


/* ===== 2026-08-05 スマホ 決済・課金履歴テーブル崩れ修正 v293 ===== */
.contract-payment-history-wrap .contract-payment-history th,
.contract-payment-history-wrap .contract-payment-history td {
  white-space: nowrap;
}

.contract-payment-history-wrap .contract-payment-history th:nth-child(1),
.contract-payment-history-wrap .contract-payment-history td:nth-child(1) {
  min-width: 108px;
}

.contract-payment-history-wrap .contract-payment-history th:nth-child(2),
.contract-payment-history-wrap .contract-payment-history td:nth-child(2) {
  min-width: 126px;
}

.contract-payment-history-wrap .contract-payment-history th:nth-child(3),
.contract-payment-history-wrap .contract-payment-history td:nth-child(3) {
  min-width: 88px;
}

.contract-payment-history-wrap .contract-payment-history th:nth-child(4),
.contract-payment-history-wrap .contract-payment-history td:nth-child(4) {
  min-width: 132px;
}

.contract-payment-history-wrap .contract-payment-history th:nth-child(5),
.contract-payment-history-wrap .contract-payment-history td:nth-child(5) {
  min-width: 106px;
}

.contract-payment-history-wrap .contract-payment-history th:nth-child(6),
.contract-payment-history-wrap .contract-payment-history td:nth-child(6) {
  min-width: 112px;
}

@media (max-width: 820px) {
  .contract-payment-history-wrap {
    overflow-x: auto;
    overflow-y: auto;
  }

  .contract-payment-history-wrap .contract-payment-history {
    width: max-content;
    min-width: 700px;
  }

  .contract-payment-history-wrap .contract-payment-history button {
    white-space: nowrap;
  }
}


/* ===== 2026-08-05 記事全画面・実践音声プレイヤー下余白 v294 ===== */
body.practical-article-fullscreen-open
#practicalArticleFullscreenOverlay {
  bottom: 10px !important;
  height: auto !important;
  max-height: none !important;
}

body.practical-article-fullscreen-open
#practicalArticleFullscreenOverlay
> .practical-fullscreen-article-clone {
  padding-bottom: 0 !important;
}

body.practical-article-fullscreen-open
#practicalArticleFullscreenOverlay
.practical-article-audio-panel {
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 820px),
  (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.practical-article-fullscreen-open
  #practicalArticleFullscreenOverlay {
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }

  body.practical-article-fullscreen-open
  #practicalArticleFullscreenOverlay
  .practical-article-audio-panel {
    padding-bottom: 10px !important;
  }
}


/* ===== 2026-08-05 Day6: PC右側余白の解消 / スマホ下余白の再調整 ===== */
/*
 * v296 ではPC側で scrollbar-gutter: both-edges を使っていましたが、
 * 右端に不要な白い余白として見えてしまうケースがありました。
 * ここではDay6画面に限ってガター予約を解除し、右側の白余白を除去します。
 *
 * スマホ側では main と shell の両方に大きな下余白が入っていたため、
 * 会話コントロールカード下の空きが広く見えていました。
 * 下部メニュー用の安全余白は main 側で確保しつつ、
 * shell 側の下余白は最小限へ戻します。
 */
@media (min-width: 901px) {
  html:has(body.ai-conversation-active),
  body.ai-conversation-active {
    scrollbar-gutter: auto !important;
  }
}

@media (max-width: 900px) {
  body.ai-conversation-active .main,
  body.ai-conversation-active.app-mode .main,
  body.ai-conversation-active.practical-study-active .main {
    padding-bottom: calc(var(--student-bottom-nav-height, 68px) + 16px + env(safe-area-inset-bottom)) !important;
  }

  body.ai-conversation-active .ai-conversation-session-shell.day6-live-screen,
  .day6-live-screen {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  body.ai-conversation-active .day6-live-controls.day6-live-controls-compact,
  .day6-live-controls.day6-live-controls-compact {
    margin-bottom: 0 !important;
  }
}


/* ===== 2026-08-05 Day6: viewport gutter完全解除 / モバイル下余白最終調整 v298 ===== */
/*
 * ブラウザがルート要素に確保していたスクロールバー用ガターを解除し、
 * サイドメニュー左側と画面右側に生じる白い帯をなくします。
 * Day6内のカード配置・列構成・ボタン配置には触れません。
 */
html {
  scrollbar-gutter: auto !important;
}

@media (min-width: 901px) {
  html,
  body.ai-conversation-active {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    scrollbar-gutter: auto !important;
  }

  body.ai-conversation-active #appView,
  body.ai-conversation-active .app {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.ai-conversation-active .sidebar {
    left: 0 !important;
    margin-left: 0 !important;
  }

  body.ai-conversation-active .main,
  body.ai-conversation-active.app-mode .main,
  body.ai-conversation-active.practical-study-active .main {
    width: auto !important;
    max-width: none !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 900px) {
  body.ai-conversation-active .main,
  body.ai-conversation-active.app-mode .main,
  body.ai-conversation-active.practical-study-active .main {
    min-height: 0 !important;
    padding-bottom: calc(var(--student-bottom-nav-height, 68px) + 10px + env(safe-area-inset-bottom)) !important;
  }

  body.ai-conversation-active .ai-conversation-session-shell.day6-live-screen,
  .day6-live-screen {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.ai-conversation-active .day6-live-controls.day6-live-controls-compact,
  .day6-live-controls.day6-live-controls-compact {
    margin-bottom: 0 !important;
  }
}


/* ===== 2026-08-05 学習計画：スマホ長押し・連続時間選択 v300 ===== */
@media (max-width: 900px) {
  .learning-plan-calendar-scroll.is-student-editable
  .learning-plan-calendar-grid.has-student-editing
  .learning-plan-calendar-cell {
    -webkit-touch-callout: none;
  }

  .learning-plan-calendar-scroll.is-touch-selecting {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }

  .learning-plan-calendar-scroll.is-touch-selecting
  .learning-plan-calendar-grid,
  .learning-plan-calendar-scroll.is-touch-selecting
  .learning-plan-calendar-cell {
    touch-action: none !important;
  }

  body.learning-plan-calendar-touch-selecting {
    overscroll-behavior: none !important;
    touch-action: none !important;
  }

  .learning-plan-calendar-guide.is-student-touch-guide {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}


/* ===== 2026-08-05 学習計画：スマホのネイティブ文字選択を無効化 v301 ===== */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .learning-plan-calendar-scroll.is-student-editable,
  .learning-plan-calendar-scroll.is-student-editable
  .learning-plan-calendar-grid,
  .learning-plan-calendar-scroll.is-student-editable
  .learning-plan-calendar-grid * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }

  .learning-plan-calendar-scroll.is-student-editable
  .learning-plan-calendar-cell,
  .learning-plan-calendar-scroll.is-student-editable
  .learning-plan-calendar-time,
  .learning-plan-calendar-scroll.is-student-editable
  .learning-plan-calendar-header,
  .learning-plan-calendar-scroll.is-student-editable
  .learning-plan-calendar-corner,
  .learning-plan-calendar-scroll.is-student-editable
  .learning-plan-calendar-block {
    -webkit-user-drag: none !important;
    user-drag: none !important;
    caret-color: transparent !important;
  }
}


/* ===== 2026-08-05 スマホ：ピンチ拡大・縮小を無効化 v302 ===== */
@media (max-width: 960px), (hover: none) and (pointer: coarse) {
  html,
  body,
  #appView,
  .app {
    touch-action: pan-x pan-y !important;
  }
}


/* ===== 2026-08-05 生徒アカウント：PCカード配置最適化／チェックボックス統一 v307 ===== */
@media (min-width: 701px) {
  .account-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "account profile"
      "notifications profile"
      "cache profile" !important;
    grid-template-rows: max-content max-content max-content !important;
    align-items: start !important;
  }

  .account-compact-grid > :nth-child(1) {
    grid-area: account !important;
  }

  .account-compact-grid > :nth-child(2) {
    grid-area: profile !important;
  }

  .account-compact-grid > :nth-child(3) {
    grid-area: notifications !important;
  }

  .account-compact-grid > :nth-child(4) {
    grid-area: cache !important;
  }
}

/*
 * すべての通常チェックボックスを本文文字に合う16pxへ統一します。
 * 入力欄共通の min-height:42px が適用されても大型化しないよう、
 * 幅・高さ・最小／最大寸法を同じ値で固定します。
 */
input[type="checkbox"] {
  box-sizing: border-box !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  padding: 0 !important;
  accent-color: var(--primary) !important;
}

.checkbox-row {
  grid-template-columns: 24px minmax(0, 1fr) !important;
}

@media (max-width: 960px) {
  .compact-settings-card .checkbox-row,
  .checkbox-row {
    grid-template-columns: 24px minmax(0, 1fr) !important;
  }
}


/* ===== 2026-08-05 Day5 AI音声停止ボタンのホバー表示修正 v310 ===== */
/*
 * 再生中のAI音声ボタンは aria-pressed="true" になります。
 * 共通のsecondary:hover指定が文字色を赤へ戻していたため、
 * 赤い背景上でラベルが見えなくなる場合がありました。
 * Day5内のすべてのAI音声再生／停止ボタンを淡い赤で統一し、
 * 通常・hover・keyboard focusのいずれでも文字を明瞭に表示します。
 */
.ai-confirmation-session-shell
.ai-chat-speak-button[aria-pressed="true"],
.ai-confirmation-session-shell
.ai-chat-speak-button[aria-pressed="true"]:hover,
.ai-confirmation-session-shell
.ai-chat-speak-button[aria-pressed="true"]:focus-visible,
.day5-final-feedback-screen
.ai-chat-speak-button[aria-pressed="true"],
.day5-final-feedback-screen
.ai-chat-speak-button[aria-pressed="true"]:hover,
.day5-final-feedback-screen
.ai-chat-speak-button[aria-pressed="true"]:focus-visible {
  background: var(--button-red-soft) !important;
  color: var(--button-red) !important;
  border-color: var(--button-red-border) !important;
  box-shadow: none !important;
}

.ai-confirmation-session-shell
.ai-chat-speak-button[aria-pressed="true"]:hover,
.day5-final-feedback-screen
.ai-chat-speak-button[aria-pressed="true"]:hover {
  background: #ffe7e9 !important;
  color: var(--button-red-hover) !important;
  border-color: var(--button-red) !important;
}

/*
 * 赤い選択状態を使う他のボタンでも、共通secondaryのhover/focusが
 * 文字色を上書きしないよう、選択中の文字色を白で固定します。
 * AI音声ボタンは上記のより具体的な指定により淡い赤を維持します。
 */
.schedule-tabs button.active:hover,
.schedule-tabs button.active:focus-visible,
.learning-plan-activity-toolbar-main button.active:hover,
.learning-plan-activity-toolbar-main button.active:focus-visible,
.teacher-tab-row button.active:hover,
.teacher-tab-row button.active:focus-visible,
.mode-tabs button.active:hover,
.mode-tabs button.active:focus-visible,
.practical-page-tabs button.active:hover,
.practical-page-tabs button.active:focus-visible,
.admin-material-template-tabs button.active:hover,
.admin-material-template-tabs button.active:focus-visible,
.practical-article-view-toggle button.active:hover,
.practical-article-view-toggle button.active:focus-visible,
.ai-confirmation-answer-mode-button.active:hover,
.ai-confirmation-answer-mode-button.active:focus-visible,
.ai-evaluation-language-switch button.active:hover,
.ai-evaluation-language-switch button.active:focus-visible,
.booking-request-mode-tabs .secondary.active:hover,
.booking-request-mode-tabs .secondary.active:focus-visible,
.booking-request-mode-tabs .secondary[aria-pressed="true"]:hover,
.booking-request-mode-tabs .secondary[aria-pressed="true"]:focus-visible,
body.practical-study-active .practical-language-switch button.active:hover,
body.practical-study-active .practical-language-switch button.active:focus-visible,
.day6-live-primary-actions #aiConversationFinishButtonSecondary:hover,
.day6-live-primary-actions #aiConversationFinishButtonSecondary:focus-visible,
.day6-control-compact-actions #aiConversationFinishButtonSecondary:hover,
.day6-control-compact-actions #aiConversationFinishButtonSecondary:focus-visible {
  color: #fff !important;
}


/* ===== 2026-08-06 全アカウント：タイトルカード説明文サイズ統一 v315 ===== */
:root {
  --page-title-description-font-size: 16px;
  --page-title-description-line-height: 1.6;
}

/*
 * 見出し直下の説明文と、各画面で明示的に使用している
 * タイトル／イントロカードの説明文を同じ大きさに統一します。
 * .small が付いている既存画面も、タイトルカード内に限り上書きします。
 */
.card > h3:first-child + p.muted,
.card > h3:first-child + p.muted.small,
.card > div:first-child > h3:first-child + p.muted,
.card > div:first-child > h3:first-child + p.muted.small,
.student-announcements-title-card > p,
.study-notes-title-card > p,
.admin-study-notes-header p,
.learning-history-head p,
.teacher-feedback-page-head p,
.booking-inline-page-header p,
.contract-procedure-header p,
.learning-plan-intro p,
.legal-audience-page-heading p,
.message-page-navigation > p,
.staff-material-proxy-header p,
.student-private-note-header-card p,
.teacher-reward-header-card p,
.teacher-reward-statement-head p,
.academic-manager-hero > p,
.academic-summary-header p,
.admin-ai-prompt-intro p,
.admin-article-prompt-intro p,
.admin-legal-settings-intro p {
  font-size: var(--page-title-description-font-size) !important;
  line-height: var(--page-title-description-line-height) !important;
}


/* ===== 2026-08-06 生徒アカウント：登録項目移動・カード再配置・チェック行操作 v318 ===== */
@media (min-width: 701px) {
  .account-compact-grid {
    grid-template-columns: minmax(320px, .78fr) minmax(0, 1.35fr) !important;
    grid-template-areas:
      "notifications profile"
      "cache profile" !important;
    grid-template-rows: max-content max-content !important;
    align-items: start !important;
  }

  .account-compact-grid > .student-account-profile-card {
    grid-area: profile !important;
  }

  .account-compact-grid > .student-account-notification-card {
    grid-area: notifications !important;
  }

  .account-compact-grid > .student-account-cache-card {
    grid-area: cache !important;
  }
}

label.checkbox-row,
label:has(> input[type="checkbox"]) {
  cursor: pointer;
}

label.checkbox-row > span,
label:has(> input[type="checkbox"]) > span {
  cursor: pointer;
}


/* ===== 2026-08-06 生徒アカウント：カード配置を共通レイアウトへ統一 v319 ===== */
/*
 * 長いプロフィールカードをページ上部の全幅カードとして配置し、
 * 通知設定とキャッシュ削除を下段の同幅2列へ並べます。
 * 他ページと同じ等幅グリッド・共通間隔を使用し、
 * 各カード固有の内容や操作には変更を加えません。
 */
@media (min-width: 701px) {
  .account-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "profile profile"
      "notifications cache" !important;
    grid-template-rows: auto auto !important;
    gap: 16px !important;
    align-items: start !important;
  }

  .account-compact-grid > .student-account-profile-card {
    grid-area: profile !important;
    width: 100% !important;
  }

  .account-compact-grid > .student-account-notification-card {
    grid-area: notifications !important;
    width: 100% !important;
  }

  .account-compact-grid > .student-account-cache-card {
    grid-area: cache !important;
    width: 100% !important;
  }
}

@media (max-width: 700px) {
  .account-compact-grid {
    gap: 14px !important;
  }
}


/* ===== 2026-08-06 生徒プロフィール：職業連携・表示整理 v320 ===== */
/* 職業欄と次のプロフィール項目の間に、他項目と同等の余白を確保します。 */
.student-profile-occupation-field {
  margin-bottom: 12px !important;
}

/* 通知設定の選択肢は「特に伸ばしたいスキル」と同じ通常ウェイトに揃えます。 */
.student-account-notification-card .checkbox-row,
.student-account-notification-card .checkbox-row > span {
  color: #17233a !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* ===== 2026-08-06 新規登録：生年月日のスマホ横幅・性別順序対応 v321 ===== */
/*
 * iOS Safariを含むスマートフォンでは、date入力の内部UIが
 * 親要素より大きい最小幅を持つ場合があるため、登録フォーム内に限って
 * インライン方向の幅と最小幅を明示します。
 */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  body.auth-mode #panel-signup {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  body.auth-mode #panel-signup input,
  body.auth-mode #panel-signup select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
  }

  body.auth-mode #signupBirthDate {
    overflow: hidden !important;
    font-size: 16px !important;
  }

  body.auth-mode #signupBirthDate::-webkit-date-and-time-value {
    min-width: 0 !important;
    text-align: left !important;
  }

  body.auth-mode #signupBirthDate::-webkit-datetime-edit {
    min-width: 0 !important;
    padding: 0 !important;
  }

  body.auth-mode #signupBirthDate::-webkit-calendar-picker-indicator {
    flex: 0 0 auto !important;
  }
}



/* ===== 2026-08-06 認証画面：上端固定・生年月日入力幅統一 v322 ===== */
/*
 * ログイン・新規登録・パスワード再設定でフォームの高さが異なっても、
 * カード上端が移動しないよう、認証画面を常に上寄せで配置します。
 */
body.auth-mode #loginView.login-wrap {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  place-items: initial !important;
  align-content: initial !important;

  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;

  margin: 0 !important;
  padding:
    max(24px, env(safe-area-inset-top, 0px))
    max(24px, env(safe-area-inset-right, 0px))
    24px
    max(24px, env(safe-area-inset-left, 0px))
    !important;
  box-sizing: border-box !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
}

body.auth-mode #loginView.login-wrap > .login-card {
  flex: 0 0 auto !important;
  width: min(460px, 100%) !important;
  max-width: 460px !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto 24px !important;
  box-sizing: border-box !important;
  transform: none !important;
  -webkit-transform: none !important;
}

body.auth-mode #loginView .auth-panel,
body.auth-mode #panel-signup {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  body.auth-mode #loginView.login-wrap {
    padding:
      max(16px, env(safe-area-inset-top, 0px))
      max(16px, env(safe-area-inset-right, 0px))
      16px
      max(16px, env(safe-area-inset-left, 0px))
      !important;
  }

  body.auth-mode #loginView.login-wrap > .login-card {
    margin: 0 auto 16px !important;
    overflow-x: hidden !important;
  }

  /*
   * iOS Safariのdate入力は独自の最小幅と外観を持つため、
   * 登録フォーム内だけ標準入力欄と同じボックスとして描画します。
   */
  body.auth-mode #signupBirthDate {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;

    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    color: var(--text) !important;
    box-sizing: border-box !important;

    -webkit-appearance: none !important;
    appearance: none !important;
    overflow: hidden !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }

  body.auth-mode #signupBirthDate::-webkit-date-and-time-value,
  body.auth-mode #signupBirthDate::-webkit-datetime-edit {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  body.auth-mode #signupBirthDate::-webkit-calendar-picker-indicator {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
  }
}

/* ===== 2026-08-06 認証画面：ノッチ外側の上部余白 v323 ===== */
/*
 * safe-area-insetだけではカードがノッチ領域の境界に接して見えるため、
 * スマートフォンではセーフエリアの外側に通常の16px余白を追加します。
 * 左右も同じ考え方に揃え、画面回転時のノッチにも対応します。
 */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  body.auth-mode #loginView.login-wrap {
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    padding-right: calc(env(safe-area-inset-right, 0px) + 16px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    padding-left: calc(env(safe-area-inset-left, 0px) + 16px) !important;
  }
}


/* ===== 2026-08-06 生徒スマホ：アカウントメニュー2×2・目的ラジオ整列 v324 ===== */
/*
 * 生徒用「アカウント」には4項目があるため、短いラベル向けの
 * 3列自動レイアウトを上書きし、2列×2行で均等に配置します。
 */
@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  body.student-mobile-nav-enabled
  .student-mobile-menu-grid.account-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.student-mobile-nav-enabled
  .student-mobile-menu-grid.account-layout
  .student-mobile-menu-card {
    min-height: 94px !important;
    padding: 12px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-align: center !important;
  }

  body.student-mobile-nav-enabled
  .student-mobile-menu-grid.account-layout
  .student-mobile-menu-card-label {
    width: 100% !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/*
 * 英語学習目的のラジオボタンを、同カード内のスキル選択用
 * チェックボックスと同じ16pxにし、本文の縦中央へ揃えます。
 */
.student-profile-choice-row {
  align-items: center !important;
}

.student-profile-choice-row input[type="radio"] {
  box-sizing: border-box !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--primary) !important;
}

.student-profile-choice-row > span {
  min-height: 16px;
  line-height: 1.4 !important;
}

/* ===== 2026-08-06 生徒スマホ：通知設定を2列表示 v325 ===== */
/*
 * 「特に伸ばしたいスキル」と同じく、通知設定の6項目を
 * スマートフォンでは2列×3行で表示します。
 * 見出し・通知許可状態・操作ボタン・結果表示は全幅を維持します。
 */
@media (max-width: 700px) {
  .student-account-notification-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
  }

  .student-account-notification-card > h3,
  .student-account-notification-card > .notice-status,
  .student-account-notification-card > .actions,
  .student-account-notification-card > #studentAccountResult {
    grid-column: 1 / -1 !important;
  }

  .student-account-notification-card > .checkbox-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 0 !important;
  }

  .student-account-notification-card > .checkbox-row input[type="checkbox"] {
    flex: 0 0 16px !important;
    margin: 0 !important;
  }

  .student-account-notification-card > .checkbox-row > span {
    min-width: 0 !important;
    line-height: 1.4 !important;
  }
}

/* ===== 2026-08-06 講師画面：表示言語切り替え ===== */
.teacher-account-language-section {
  grid-column: 1 / -1;
}

.teacher-account-language-section .teacher-account-section-heading p {
  margin: 5px 0 0;
  line-height: 1.55;
}

.teacher-language-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #f8fafc;
}

.teacher-language-switch button {
  min-height: 42px;
  margin: 0;
  padding: 9px 18px;
  border-color: transparent !important;
  background: transparent !important;
  color: #475467 !important;
  box-shadow: none !important;
  font-weight: 700;
}

.teacher-language-switch button:hover,
.teacher-language-switch button:focus-visible {
  border-color: #f2c7cb !important;
  background: #fff5f6 !important;
  color: #a80f1b !important;
}

.teacher-language-switch button.active,
.teacher-language-switch button[aria-pressed="true"] {
  border-color: #d51220 !important;
  background: #d51220 !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(213, 18, 32, .16) !important;
}

.teacher-language-switch button.active:hover,
.teacher-language-switch button.active:focus-visible,
.teacher-language-switch button[aria-pressed="true"]:hover,
.teacher-language-switch button[aria-pressed="true"]:focus-visible {
  border-color: #b9111a !important;
  background: #b9111a !important;
  color: #fff !important;
}

.teacher-ui-english .teacher-account-overview-copy,
.teacher-ui-english .teacher-account-section,
.teacher-ui-english .teacher-account-cache-copy {
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .teacher-language-switch {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-language-switch button {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
  }
}

/* PC：講師メニュー内の表示言語スイッチ */
.teacher-sidebar-language-setting {
  display: grid;
  gap: 7px;
  margin: 14px 10px 4px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
}

.teacher-sidebar-language-label {
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.teacher-sidebar-language-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .16);
}

.teacher-sidebar-language-switch button {
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 7px 6px;
  border: 1px solid transparent !important;
  border-radius: 7px;
  background: transparent !important;
  color: rgba(255, 255, 255, .82) !important;
  box-shadow: none !important;
  font-size: 12px;
  font-weight: 700;
}

.teacher-sidebar-language-switch button:hover,
.teacher-sidebar-language-switch button:focus-visible {
  border-color: rgba(255, 255, 255, .35) !important;
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
}

.teacher-sidebar-language-switch button.active,
.teacher-sidebar-language-switch button[aria-pressed="true"] {
  border-color: #fff !important;
  background: #fff !important;
  color: #b9111a !important;
}

/* スマホ：アカウント管理ページ内で切り替え */
@media (min-width: 961px) {
  .teacher-account-language-section {
    display: none;
  }
}

@media (max-width: 960px) {
  .teacher-sidebar-language-setting {
    display: none;
  }

  .teacher-account-language-section {
    display: grid;
  }
}

/* ===== 2026-08-06 Instructor English UI: compact labels and overflow control v331 ===== */
.teacher-ui-english .teacher-students-table table {
  min-width: 840px;
}

.teacher-ui-english .teacher-students-table .teacher-student-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  min-width: 200px;
  max-width: 230px;
  gap: 5px;
}

.teacher-ui-english .teacher-students-table .teacher-student-actions button {
  width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.teacher-ui-english .teacher-student-status {
  max-width: 145px;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

.teacher-ui-english .learning-plan-activity-toolbar-main button {
  max-width: 190px;
  white-space: normal;
  line-height: 1.25;
}

.teacher-ui-english .teacher-reward-dashboard-card .actions button,
.teacher-ui-english .teacher-dashboard-today-lessons-card button {
  max-width: 100%;
  white-space: normal;
}

@media (min-width: 921px) and (max-width: 1180px) {
  .teacher-ui-english .learning-plan-copy-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
  }

  .teacher-ui-english .learning-plan-copy-panel > div:first-child {
    grid-column: 1 / -1;
  }

  .teacher-ui-english .learning-plan-copy-panel button {
    max-width: 180px;
    white-space: normal;
    line-height: 1.25;
  }
}

@media (max-width: 640px) {
  .teacher-ui-english .learning-plan-activity-toolbar-main {
    align-items: stretch;
    flex-direction: column;
  }

  .teacher-ui-english .learning-plan-activity-toolbar-main button {
    width: 100%;
    max-width: none;
  }
}


/* ===== 2026-08-07 認証画面：タブ廃止・リンク導線 v332 ===== */
/*
 * 認証画面はログインを初期表示とし、新規登録・パスワード再設定へは
 * テキストリンクから移動します。英語表示で文言が長くなっても、
 * カード横幅を押し広げず自然に折り返すようにします。
 */
body.auth-mode #loginView .auth-panel-title {
  margin: 8px 0 18px !important;
  color: var(--text) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

body.auth-mode #loginView .auth-panel-links {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

body.auth-mode #loginView .auth-text-link {
  display: inline !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  cursor: pointer !important;
}

body.auth-mode #loginView .auth-text-link:hover,
body.auth-mode #loginView .auth-text-link:focus-visible {
  background: var(--button-red-soft) !important;
  color: var(--primary-dark) !important;
}

body.auth-mode #loginView .auth-text-link:disabled {
  background: transparent !important;
  cursor: wait !important;
}

body.auth-login-processing #loginView .auth-panel-links {
  opacity: .72 !important;
  transition: opacity .15s ease !important;
}

@media
  (max-width: 560px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  body.auth-mode #loginView .auth-panel-title {
    margin-top: 4px !important;
    margin-bottom: 15px !important;
    font-size: 20px !important;
  }

  body.auth-mode #loginView .auth-text-link {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
}

/* ===== Day5 / Day6 feedback return button: fixed Japanese label and solid red ===== */
#aiConfirmationReturnButton.ai-feedback-return-button,
#aiConversationReturnButton.ai-feedback-return-button {
  border-color: #c91f2c !important;
  background: #c91f2c !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
  filter: none !important;
}

#aiConfirmationReturnButton.ai-feedback-return-button:hover:not(:disabled),
#aiConversationReturnButton.ai-feedback-return-button:hover:not(:disabled),
#aiConfirmationReturnButton.ai-feedback-return-button:focus-visible:not(:disabled),
#aiConversationReturnButton.ai-feedback-return-button:focus-visible:not(:disabled) {
  border-color: #ad1722 !important;
  background: #ad1722 !important;
  background-image: none !important;
  color: #fff !important;
}

#aiConfirmationReturnButton.ai-feedback-return-button:disabled,
#aiConversationReturnButton.ai-feedback-return-button:disabled {
  border-color: #c91f2c !important;
  background: #c91f2c !important;
  background-image: none !important;
  color: #fff !important;
  opacity: .5 !important;
}


/* ===== 2026-08-07 Day5 / Day6 final feedback cleanup v342 =====
 * 会話時間・終了時刻のメタ情報カードは画面から削除済み。
 * 戻るボタンはラベルの文字幅に合わせ、不要に横へ広げない。
 */
#aiConfirmationReturnButton.ai-feedback-return-button,
#aiConversationReturnButton.ai-feedback-return-button {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  justify-self: end !important;
  padding-inline: 18px !important;
  white-space: nowrap !important;
}

/* ===== 2026-08-07 Admin billing charge-date retry UI v351 ===== */
.admin-payment-status-scroll td:nth-child(5) {
  min-width: 240px;
  vertical-align: top;
}

.admin-charge-date-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  max-width: 340px;
}

.admin-charge-date-text {
  display: inline-block;
  color: #344054;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}

.admin-charge-date-button,
.admin-charge-date-button:hover,
.admin-charge-date-button:focus,
.admin-charge-date-button:focus-visible,
.admin-charge-date-button:active {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 2px !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #175cd3 !important;
  font: inherit !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transform: none !important;
  filter: none !important;
}

.admin-charge-date-button:hover,
.admin-charge-date-button:focus-visible {
  color: #0b4a9f !important;
  border-bottom-width: 2px !important;
}

.admin-charge-date-button:focus-visible {
  outline: 2px solid rgba(23, 92, 211, .28) !important;
  outline-offset: 4px !important;
}

.admin-charge-date-status-list {
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.admin-charge-date-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.admin-charge-date-status.is-processing {
  color: #475467;
}

.admin-charge-date-status.is-success {
  color: #067647;
}

.admin-charge-date-status.is-error {
  color: #b42318;
}

.admin-charge-date-status.is-retry {
  color: #475467;
  font-weight: 500;
}

.admin-charge-date-error-details {
  width: 100%;
  min-width: 0;
  color: #667085;
  font-size: 11px;
  line-height: 1.5;
}

.admin-charge-date-error-details summary {
  width: fit-content;
  color: #475467;
  cursor: pointer;
  user-select: none;
}

.admin-charge-date-error-details > span {
  display: block;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #fecdca;
  border-radius: 8px;
  background: #fffbfa;
  color: #912018;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .admin-payment-status-scroll td:nth-child(5) {
    min-width: 210px;
  }

  .admin-charge-date-cell {
    max-width: 280px;
  }
}

/* ROBOT PAYMENT課金日変更：安全な診断情報 */
.admin-charge-date-error-details .admin-charge-date-diagnostic {
  margin-top: 8px;
  border-color: #d0d5dd;
  background: #f9fafb;
  color: #344054;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.55;
}

/* ===== 2026-08-07 ホーム案内カード：うさぎイラスト10%拡大 v358 =====
 * PC・タブレット・スマホ共通で、現在の表示サイズから約10%拡大します。
 * transform-originを中央に固定し、画像中心の位置は変えません。
 */
@media (max-width: 960px) {
  .home-guidance-lower .home-guidance-illustration img {
    transform: scale(1.10) !important;
    transform-origin: center center !important;
  }
}

@media (min-width: 961px) {
  .home-guidance-lower .home-guidance-illustration img {
    transform: scale(1.188) !important;
    transform-origin: center center !important;
  }
}

/* ===== 20260807-teacher-booking-decision-buttons-v362 ===== */
/* 講師アカウントの予約リクエスト：他画面と揃えたコンパクトなサイズにします。 */
.teacher-booking-decision-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.teacher-booking-decision-actions > .teacher-booking-approve-button,
.teacher-booking-decision-actions > .teacher-booking-reject-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 72px;
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  min-height: 40px;
  padding: 8px 10px;
  border: 0 !important;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: none !important;
}

.teacher-booking-decision-actions > .teacher-booking-reject-button {
  background: var(--button-red-soft) !important;
  color: var(--button-red) !important;
}

.teacher-booking-decision-actions > .teacher-booking-reject-button:hover,
.teacher-booking-decision-actions > .teacher-booking-reject-button:focus-visible,
.teacher-booking-decision-actions > .teacher-booking-reject-button:active {
  border: 0 !important;
  background: #ffe4e7 !important;
  color: var(--button-red-hover) !important;
  box-shadow: none !important;
}


/* ===== 2026-08-07 メッセージ：表示先カードの未読バッヂ ===== */
.message-destination-grid-single {
  max-width: 360px;
  grid-template-columns: minmax(0, 1fr) !important;
}

button.destination-card.message-channel-card.has-unread {
  border-color: rgba(209, 19, 31, .38);
  box-shadow: 0 0 0 2px rgba(209, 19, 31, .05);
}

.message-channel-unread-badge {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: inline-flex;
  min-width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 3px 9px rgba(209, 19, 31, .24);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.message-channel-unread-badge[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  .message-destination-grid-single {
    max-width: none;
  }

  .message-channel-unread-badge {
    top: 6px;
    right: 6px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    font-size: 9.5px;
  }
}


/* ===== 2026-08-07 スタディノート：ラベル作成・登録・絞り込み v367 ===== */
.study-note-filter-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fafbfc;
}

.study-note-filter-heading,
.study-note-label-manager-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.study-note-filter-heading > div,
.study-note-label-manager-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.study-note-filter-chips,
.study-note-label-chips,
.study-note-label-selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.study-note-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid #d8dee8;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
}

.study-note-filter-chip:hover,
.study-note-filter-chip:focus-visible {
  border-color: rgba(209, 19, 31, .35);
  background: #fff7f8;
  color: var(--primary);
  transform: none;
  box-shadow: none;
}

.study-note-filter-chip.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.study-note-filter-chip.is-active:hover,
.study-note-filter-chip.is-active:focus-visible {
  background: var(--primary);
  color: #fff;
}

.study-note-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #667085;
  font-size: 11px;
  line-height: 1;
}

.study-note-filter-chip.is-active .study-note-filter-count {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

.study-note-no-labels-help {
  margin: 0;
}

.study-note-label-manager {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid rgba(209, 19, 31, .2);
  border-radius: 14px;
  background: #fff8f9;
}

.study-note-label-manager-heading p {
  margin: 0;
}

.study-note-label-limit-count {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.study-note-label-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.study-note-label-add-form input,
.study-note-label-manager-main input {
  margin: 0;
}

.study-note-label-add-form button,
.study-note-label-manager-actions button,
.study-note-filter-heading button {
  width: auto;
  white-space: nowrap;
}

.study-note-label-manager-list {
  display: grid;
  gap: 8px;
}

.study-note-label-manager-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eadfe2;
  border-radius: 12px;
  background: #fff;
}

.study-note-label-manager-main {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.study-note-label-manager-actions {
  display: flex;
  gap: 7px;
}

.study-note-label-delete-button {
  border: 0;
  background: #fff0f2;
  color: var(--primary);
  box-shadow: none;
}

.study-note-label-delete-button:hover,
.study-note-label-delete-button:focus-visible {
  background: #ffe4e8;
  color: var(--primary);
  transform: none;
  box-shadow: none;
}

.study-note-label-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 9px;
  border: 1px solid #f2c9cf;
  border-radius: 999px;
  background: #fff4f5;
  color: #b42332 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.25;
}

.study-note-list-item .study-note-label-chips {
  margin-top: 1px;
}

.study-note-list-item:hover .study-note-label-chip,
.study-note-list-item:focus .study-note-label-chip,
.study-note-list-item:focus-visible .study-note-label-chip,
.study-note-list-item:active .study-note-label-chip {
  color: #b42332 !important;
}

.study-note-label-selector {
  margin: 12px 0;
  padding: 13px 14px 14px;
  border: 1px solid #e4e7ec;
  border-radius: 13px;
  background: #fafbfc;
}

.study-note-label-selector legend {
  padding: 0 6px;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}

.study-note-label-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.study-note-label-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.study-note-label-option span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #d8dee8;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.study-note-label-option input:checked + span {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 0 0 2px rgba(209, 19, 31, .08);
}

.study-note-label-option input:focus-visible + span {
  outline: 2px solid rgba(209, 19, 31, .3);
  outline-offset: 2px;
}

.study-note-label-selector-empty,
.study-note-label-empty-inline {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.study-note-readonly-labels {
  display: grid;
  gap: 7px;
  margin: 12px 0;
}

.admin-study-note-card > .study-note-label-chips {
  margin: -3px 0 12px;
}

@media (max-width: 820px) {
  .study-note-filter-heading,
  .study-note-label-manager-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .study-note-filter-heading button,
  .study-note-label-add-form button,
  .study-note-label-manager-actions button {
    width: auto !important;
  }

  .study-note-label-add-form,
  .study-note-label-manager-row,
  .study-note-label-manager-main {
    grid-template-columns: 1fr;
  }

  .study-note-label-manager-actions {
    justify-content: flex-start;
  }

  .study-note-label-add-form button {
    justify-self: start;
  }
}

/* ===== 2026-08-07 スタディノート：ラベル管理デザイン改善 v369 ===== */
.study-note-label-manager {
  gap: 18px;
  margin: 0 0 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .055);
}

.study-note-label-manager-heading {
  align-items: flex-start;
  padding-bottom: 15px;
  border-bottom: 1px solid #edf0f4;
}

.study-note-label-manager-title-group {
  display: flex !important;
  align-items: flex-start;
  gap: 11px !important;
}

.study-note-label-manager-title-group > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.study-note-label-manager-title-group strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1.35;
}

.study-note-label-manager-title-group p {
  line-height: 1.55;
}

.study-note-label-manager-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.study-note-label-limit-count {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 4px;
  min-width: 62px;
  min-height: 34px;
  justify-content: center;
  padding: 7px 11px;
  border: 1px solid #f8d1d5;
  background: #fff7f8;
  color: var(--primary);
}

.study-note-label-limit-count strong {
  font-size: 15px;
  line-height: 1;
}

.study-note-label-limit-count span {
  color: #9a4a52;
  font-size: 11px;
  font-weight: 700;
}

.study-note-label-add-form {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: end;
  padding: 16px;
  border: 1px solid #e8ebf0;
  border-radius: 15px;
  background: #f8fafc;
}

.study-note-label-add-copy {
  display: grid;
  gap: 4px;
  align-self: center;
}

.study-note-label-add-copy label {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.study-note-label-add-copy span {
  line-height: 1.5;
}

.study-note-label-add-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.study-note-label-add-controls input {
  margin: 0;
  min-width: 0;
  border-color: #d9dee7;
  background: #fff;
}

.study-note-label-add-controls input:focus {
  border-color: rgba(209, 19, 31, .52);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(209, 19, 31, .09);
}

.study-note-label-add-button {
  width: auto !important;
  min-width: 82px;
  padding-inline: 18px;
  white-space: nowrap;
}

.study-note-label-limit-notice {
  margin: -4px 0 0;
}

.study-note-label-manager-list {
  gap: 10px;
}

.study-note-label-manager-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #e6e9ee;
  border-radius: 14px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.study-note-label-manager-row:hover,
.study-note-label-manager-row:focus-within {
  border-color: rgba(209, 19, 31, .24);
  background: #fffdfd;
  box-shadow: 0 4px 14px rgba(16, 24, 40, .05);
}

.study-note-label-manager-main {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 12px;
}

.study-note-label-name-field {
  position: relative;
  min-width: 0;
}

.study-note-label-row-mark {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #c63a45;
  font-size: 14px;
  font-weight: 900;
  pointer-events: none;
}

.study-note-label-name-input {
  min-height: 40px;
  padding-left: 30px;
  border-color: #dfe3ea;
  background: #fff;
}

.study-note-label-name-input:focus {
  border-color: rgba(209, 19, 31, .46);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(209, 19, 31, .08);
}

.study-note-label-usage-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #667085;
  font-size: 12px;
  white-space: nowrap;
}

.study-note-label-usage-count strong {
  color: #344054;
  font-size: 13px;
}

.study-note-label-manager-actions {
  align-items: center;
  gap: 7px;
}

.study-note-label-manager-actions button {
  min-width: 64px;
  min-height: 38px;
  padding: 7px 13px;
  border: 0;
  border-radius: 11px;
  box-shadow: none;
}

.study-note-label-save-button {
  background: var(--primary-soft);
  color: var(--primary);
}

.study-note-label-save-button:hover,
.study-note-label-save-button:focus-visible {
  background: #ffe4e7;
  color: var(--primary-dark);
  transform: none;
  box-shadow: none;
}

.study-note-label-delete-button {
  background: transparent;
  color: #667085;
}

.study-note-label-delete-button:hover,
.study-note-label-delete-button:focus-visible {
  background: #fef2f2;
  color: var(--primary);
}

.study-note-label-manager-empty {
  padding: 22px 16px;
  border: 1px dashed #d8dde6;
  border-radius: 13px;
  background: #fafbfc;
  color: var(--muted);
}

@media (max-width: 820px) {
  .study-note-label-manager {
    gap: 15px;
    padding: 16px;
    border-radius: 16px;
  }

  .study-note-label-manager-heading {
    flex-wrap: nowrap;
  }

  .study-note-label-manager-title-group {
    gap: 9px !important;
  }

  .study-note-label-manager-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .study-note-label-add-form {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 14px;
  }

  .study-note-label-add-controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .study-note-label-manager-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .study-note-label-manager-main {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .study-note-label-usage-count {
    justify-self: start;
  }

  .study-note-label-manager-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .study-note-label-manager-heading {
    gap: 8px;
  }

  .study-note-label-manager-title-group p {
    font-size: 11px;
  }

  .study-note-label-limit-count {
    min-width: 56px;
    padding-inline: 8px;
  }

  .study-note-label-add-controls {
    grid-template-columns: 1fr;
  }

  .study-note-label-add-button {
    width: 100% !important;
  }

  .study-note-label-manager-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .study-note-label-manager-actions button {
    width: 100% !important;
  }
}

/* ===== 20260807-teacher-booking-lesson-date-readability-v376 ===== */
/* 講師アカウントの予約リクエスト：各レッスン日時を読みやすくします。 */
.teacher-booking-lesson-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.teacher-booking-lesson-dates .teacher-booking-lesson-date {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 11px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .teacher-booking-lesson-dates {
    gap: 7px;
  }

  .teacher-booking-lesson-dates .teacher-booking-lesson-date {
    min-height: 31px;
    padding: 6px 10px;
    font-size: 14px;
  }
}

/* ===== 20260807-student-booking-lesson-date-readability-v378 ===== */
/* 生徒アカウント内で、予約候補・送信済み予約に表示する各レッスン日時を読みやすくします。 */
.student-booking-lesson-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.student-booking-lesson-dates .student-booking-lesson-date,
.booking-request-preview-block .lesson-preview .student-booking-lesson-date {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 11px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .student-booking-lesson-dates {
    gap: 7px;
  }

  .student-booking-lesson-dates .student-booking-lesson-date,
  .booking-request-preview-block .lesson-preview .student-booking-lesson-date {
    min-height: 31px;
    padding: 6px 10px;
    font-size: 14px;
  }
}

/* ===== 2026-08-08 メッセージ表示先カード：選択枠・未読バッヂ・管理者アイコン v382 ===== */
/* 選択中は四辺を同じ太さの赤枠で表示し、左側だけのアクセント線は使用しません。 */
button.destination-card.message-channel-card::before,
button.destination-card.message-channel-card.is-active::before {
  display: none !important;
  width: 0 !important;
  content: none !important;
}

button.destination-card.message-channel-card.is-active {
  border: 2px solid var(--primary) !important;
  box-shadow: 0 6px 16px rgba(16, 24, 40, .05) !important;
}

/* 未読カードは赤枠にせず、右下の件数バッヂだけで未読を示します。 */
button.destination-card.message-channel-card.has-unread:not(.is-active) {
  border-color: #d8dee8 !important;
  box-shadow: none !important;
}

/* 旧選択チェックは廃止します。 */
.message-channel-selected-mark {
  display: none !important;
}

/* 未読件数はカード右上ではなく、カテゴリ―アイコンの右下へ表示します。 */
.message-channel-card-icon-wrap > .message-channel-unread-badge {
  top: auto !important;
  right: -5px !important;
  bottom: -5px !important;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  border-width: 2px;
  font-size: 10.5px;
}

@media (max-width: 700px) {
  .message-channel-card-icon-wrap > .message-channel-unread-badge {
    top: auto !important;
    right: -4px !important;
    bottom: -4px !important;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    font-size: 9px;
  }
}

/* ===== 2026-08-08 メッセージ表示先カード：スマホの残留ホバー・講師アイコン改善 v383 ===== */
/* 管理者画面の「講師」は、教壇に立つ人物を表す専用アイコンと暖色で明確に区別します。 */
button.destination-card.message-channel-card[data-message-channel="admin-teacher"]
.message-channel-card-icon {
  border-color: #f1d7a6;
  background: #fff8eb;
  color: #9a6700;
}

/* タッチ端末では :hover が指を離した後も残るブラウザがあるため、
   未選択カードのホバー状態を通常表示へ戻します。 */
@media (hover: none), (pointer: coarse) {
  button.destination-card.message-channel-card:not(.is-active):hover,
  button.destination-card.message-channel-card:not(.is-active):focus:not(:focus-visible) {
    border-color: #d8dee8 !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }

  button.destination-card.message-channel-card {
    -webkit-tap-highlight-color: transparent;
  }
}



/* ===== 2026-08-08 講師ホーム：自動確認・優先順位 v384 ===== */
.teacher-dashboard-grid > .teacher-reward-dashboard-card {
  grid-column: 2;
}

@media (max-width: 960px) {
  .teacher-dashboard-grid > .teacher-reward-dashboard-card {
    grid-column: auto;
  }
}

/* ===== 2026-08-08 recurring lesson slot payment / confirmation colors ===== */
.schedule-table .slot.reserved.recurring-unpaid {
  background: #fff1db;
  color: #8a4300;
}

.schedule-table .slot.reserved.recurring-awaiting-confirmation {
  background: #e5f0ff;
  color: #174a7e;
}

.schedule-table .slot.reserved.recurring-confirmed {
  background: #ffe3e6;
  color: inherit;
}

.schedule-table .slot.reserved.recurring-unpaid:hover,
.schedule-table .slot.reserved.recurring-unpaid:focus,
.schedule-table .slot.reserved.recurring-unpaid:focus-within {
  box-shadow: inset 0 0 0 2px rgba(190, 94, 0, .28);
}

.schedule-table .slot.reserved.recurring-awaiting-confirmation:hover,
.schedule-table .slot.reserved.recurring-awaiting-confirmation:focus,
.schedule-table .slot.reserved.recurring-awaiting-confirmation:focus-within {
  box-shadow: inset 0 0 0 2px rgba(23, 74, 126, .28);
}

.schedule-table .slot.reserved.recurring-confirmed:hover,
.schedule-table .slot.reserved.recurring-confirmed:focus,
.schedule-table .slot.reserved.recurring-confirmed:focus-within {
  box-shadow: inset 0 0 0 2px rgba(209, 19, 31, .25);
}


/* ===== 2026-08-08 staff/admin upcoming 7-day lesson schedule refinement v400 ===== */
.staff-upcoming-schedule {
  margin-top: 4px;
}

.staff-upcoming-schedule-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid #e4e8ef;
  border-radius: 12px;
  background: #f8fafc;
}

.staff-upcoming-schedule-range {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}

.staff-upcoming-schedule-range > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.staff-upcoming-schedule-range > strong {
  color: var(--text);
  font-size: 14px;
  letter-spacing: .01em;
}

.staff-upcoming-schedule-total,
.staff-upcoming-day-count,
.staff-upcoming-today-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 700;
}

.staff-upcoming-schedule-total {
  min-height: 28px;
  padding: 4px 11px;
  background: #fff0f1;
  color: var(--primary);
  font-size: 12px;
}

.staff-upcoming-schedule-days {
  overflow: hidden;
  border: 1px solid #dfe4ec;
  border-radius: 14px;
  background: #fff;
}

.staff-upcoming-day + .staff-upcoming-day {
  border-top: 1px solid #e8ebf0;
}

.staff-upcoming-day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 9px 14px;
  background: #fbfcfe;
}

.staff-upcoming-day.has-lessons .staff-upcoming-day-heading {
  background: #f7f9fc;
}

.staff-upcoming-day.is-today .staff-upcoming-day-heading {
  box-shadow: inset 3px 0 0 var(--primary);
}

.staff-upcoming-day-date {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.staff-upcoming-day-date > strong {
  font-size: 15px;
}

.staff-upcoming-today-badge {
  min-height: 22px;
  padding: 2px 8px;
  background: #fff0f1;
  color: var(--primary);
  font-size: 11px;
}

.staff-upcoming-day-count {
  min-height: 25px;
  padding: 3px 9px;
  background: #eef1f5;
  color: #344054;
  font-size: 11px;
}

.staff-upcoming-day-count.is-zero {
  background: transparent;
  color: #98a2b3;
  font-weight: 600;
}

.staff-upcoming-empty-message {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 16px 11px;
  color: #7a8699;
  font-size: 13px;
  background: #fff;
}

.staff-upcoming-empty-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd2dc;
}

.staff-upcoming-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-top: 1px solid #e8ebf0;
  -webkit-overflow-scrolling: touch;
}

.staff-upcoming-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
}

.staff-upcoming-table.has-teacher-column {
  min-width: 900px;
}

.staff-upcoming-table th,
.staff-upcoming-table td {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid #eef0f4;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
}

.staff-upcoming-table tbody tr:last-child td {
  border-bottom: 0;
}

.staff-upcoming-table th {
  padding-top: 9px;
  padding-bottom: 9px;
  background: #fff;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.staff-upcoming-table td {
  color: var(--text);
  font-size: 13px;
}

.staff-upcoming-table tbody tr:hover {
  background: #fffafb;
}

.staff-upcoming-table:not(.has-teacher-column) th:nth-child(1),
.staff-upcoming-table:not(.has-teacher-column) td:nth-child(1) { width: 15%; }
.staff-upcoming-table:not(.has-teacher-column) th:nth-child(2),
.staff-upcoming-table:not(.has-teacher-column) td:nth-child(2) { width: 23%; }
.staff-upcoming-table:not(.has-teacher-column) th:nth-child(3),
.staff-upcoming-table:not(.has-teacher-column) td:nth-child(3) { width: 21%; }
.staff-upcoming-table:not(.has-teacher-column) th:nth-child(4),
.staff-upcoming-table:not(.has-teacher-column) td:nth-child(4) { width: 16%; }
.staff-upcoming-table:not(.has-teacher-column) th:nth-child(5),
.staff-upcoming-table:not(.has-teacher-column) td:nth-child(5) { width: 25%; }

.staff-upcoming-table.has-teacher-column th:nth-child(1),
.staff-upcoming-table.has-teacher-column td:nth-child(1) { width: 13%; }
.staff-upcoming-table.has-teacher-column th:nth-child(2),
.staff-upcoming-table.has-teacher-column td:nth-child(2) { width: 18%; }
.staff-upcoming-table.has-teacher-column th:nth-child(3),
.staff-upcoming-table.has-teacher-column td:nth-child(3) { width: 18%; }
.staff-upcoming-table.has-teacher-column th:nth-child(4),
.staff-upcoming-table.has-teacher-column td:nth-child(4) { width: 18%; }
.staff-upcoming-table.has-teacher-column th:nth-child(5),
.staff-upcoming-table.has-teacher-column td:nth-child(5) { width: 13%; }
.staff-upcoming-table.has-teacher-column th:nth-child(6),
.staff-upcoming-table.has-teacher-column td:nth-child(6) { width: 20%; }

.staff-upcoming-time,
.staff-upcoming-month-lesson {
  font-variant-numeric: tabular-nums;
}

.staff-upcoming-time {
  font-weight: 700;
  white-space: nowrap !important;
}

.staff-upcoming-month-lesson {
  color: #475467 !important;
}

.staff-upcoming-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.staff-upcoming-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

button.staff-upcoming-action {
  min-height: 36px;
  margin: 0;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: none;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .staff-upcoming-schedule-summary {
    align-items: flex-start;
    padding: 10px 12px;
  }

  .staff-upcoming-schedule-range {
    display: grid;
    gap: 3px;
  }

  .staff-upcoming-day-heading {
    min-height: 46px;
    padding: 9px 12px;
  }

  .staff-upcoming-empty-message {
    min-height: 38px;
    padding: 6px 13px 10px;
  }

  .staff-upcoming-table th,
  .staff-upcoming-table td {
    padding: 10px 11px;
  }
}

/* ===== 2026-08-08 staff dashboards: action-required card emphasis v402 ===== */
.card.dashboard-action-required-card {
  border: 2px solid #df1428 !important;
  background: #fff5f6 !important;
  box-shadow: 0 8px 22px rgba(216, 15, 31, 0.09);
}

.card.dashboard-action-required-card > h3:first-child,
.card.dashboard-action-required-card > div:first-child > h3:first-child {
  color: #b80f20;
}

@media (max-width: 820px) {
  .card.dashboard-action-required-card {
    box-shadow: 0 6px 18px rgba(216, 15, 31, 0.08);
  }
}


/* ===== 2026-08-08 staff dashboards: unified action-card buttons v403 ===== */
/*
 * 講師・管理者・教務管理者の対応が必要なカードでは、
 * ボタン種別（secondary / danger / 独自クラス）にかかわらず、
 * アプリ共通の赤背景・白文字へ統一します。
 */
.card.dashboard-action-required-card button:not(:disabled) {
  background: var(--button-red) !important;
  color: #fff !important;
  border-color: var(--button-red) !important;
  box-shadow: none !important;
}

.card.dashboard-action-required-card button:not(:disabled):hover,
.card.dashboard-action-required-card button:not(:disabled):focus-visible,
.card.dashboard-action-required-card button:not(:disabled):active {
  background: var(--button-red-hover) !important;
  color: #fff !important;
  border-color: var(--button-red-hover) !important;
}


/* ===== 2026-08-08 講師教材一覧：4週間の記事構成サマリー ===== */
.teacher-material-series-plan-summary {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #e4e7ec;
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(16, 24, 40, .035);
}

.teacher-material-series-plan-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaecf0;
}

.teacher-material-series-plan-heading h4 {
  margin: 0;
  color: #101828;
  font-size: 15px;
  line-height: 1.45;
}

.teacher-material-series-plan-heading span {
  color: #667085;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.teacher-material-series-plan-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.teacher-material-series-plan-item {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  background: #fafafa;
}

.teacher-material-series-plan-item h5 {
  margin: 0 0 7px;
  color: #b42318;
  font-size: 12.5px;
  line-height: 1.45;
}

.teacher-material-series-plan-item p {
  margin: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

@media (max-width: 960px) {
  .teacher-material-series-plan-items {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .teacher-material-series-plan-summary {
    gap: 12px;
    padding: 14px;
  }

  .teacher-material-series-plan-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .teacher-material-series-plan-heading span {
    white-space: normal;
  }
}


/* ===== 2026-08-09 スマホ：記事試し読み吹き出しの再タップ閉じる対応 v421 ===== */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  /* タッチ端末で残留する:hover / focusだけでは吹き出しを表示しない。 */
  .study-theme-week-row.has-trial-reading:hover .study-theme-trial-tooltip,
  .study-theme-week-row.has-trial-reading:focus-visible .study-theme-trial-tooltip {
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
  }

  /* JavaScriptでis-openになった行だけを表示する。 */
  .study-theme-week-row.has-trial-reading.is-open .study-theme-trial-tooltip,
  .study-theme-week-row.has-trial-reading.is-open:hover .study-theme-trial-tooltip,
  .study-theme-week-row.has-trial-reading.is-open:focus-visible .study-theme-trial-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* ===== 2026-08-10 Day5設定画面：通常ページ共通シェルへ完全統一 v436 =====
 * AI設定画面ではセッション用の全画面レイアウトを使用せず、通常ページと同じ
 * 固定下部メニュー・スクロール連動ヘッダー・.mainスクロール領域を使用します。
 * 下部メニュー本体、ボタン、アイコン、文字の寸法は一切指定しません。
 */
@media (max-width: 820px),
       (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /*
   * practical-study-active に残る課題画面専用 overflow:hidden を、
   * 設定画面だけ通常ページの .main スクロールへ戻します。
   */
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.app-mode.practical-study-active.ai-confirmation-start-open
  .main,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.app-mode.practical-study-active.ai-confirmation-start-open
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.ai-confirmation-start-open
  .main,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.ai-confirmation-start-open
  .main,
  body.smaei-standalone-app.student-mobile-nav-enabled.app-mode.practical-study-active.ai-confirmation-start-open
  .main,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled.app-mode.practical-study-active.ai-confirmation-start-open
  .main,
  body.smaei-standalone-app.student-mobile-nav-enabled.ai-confirmation-start-open
  .main,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled.ai-confirmation-start-open
  .main {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding-top: calc(
      var(--smaei-pwa-header-height, 38px)
      + env(safe-area-inset-top, 0px)
      + var(--smaei-pwa-content-top-gap, 10px)
    ) !important;
    padding-bottom: calc(
      var(--smaei-pwa-bottom-nav-height, 67px)
      + 12px
    ) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }

  body.student-mobile-nav-enabled.ai-confirmation-start-open
  #content,
  body.student-mobile-nav-enabled.ai-confirmation-start-open
  .ai-confirmation-start-layout,
  body.student-mobile-nav-enabled.ai-confirmation-start-open
  .ai-confirmation-start-card {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.student-mobile-nav-enabled.ai-confirmation-start-open
  .ai-confirmation-start-layout {
    margin: 0 auto !important;
    padding-bottom: 18px !important;
  }

  body.student-mobile-nav-enabled.ai-confirmation-start-open
  .ai-confirmation-start-actions {
    position: static !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* ===== 2026-08-10 Day5開始画面：スクロール復元 v438 =====
 * 原因：practical-study-active 用の高詳細度ルールが #content を height:100% / overflow:hidden
 * に固定し、Day5開始画面の中身が #content の外へ描画されるだけで .main の scrollHeight に
 * 加算されていませんでした。
 *
 * Day5開始画面の #content だけを通常の内容高へ戻します。
 * ヘッダー、下部メニュー本体、その高さ、アイコン、文字サイズ、位置には一切触れません。
 */
@media (max-width: 820px),
       (hover: none) and (pointer: coarse) and (max-width: 960px) {
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.app-mode.practical-study-active.ai-confirmation-start-open
  #content,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.app-mode.practical-study-active.ai-confirmation-start-open
  #content,
  body.smaei-standalone-app.student-mobile-nav-enabled.app-mode.practical-study-active.ai-confirmation-start-open
  #content,
  body.smaei-pwa-layout-active.student-mobile-nav-enabled.app-mode.practical-study-active.ai-confirmation-start-open
  #content,
  body.student-mobile-nav-enabled.app-mode.practical-study-active.ai-confirmation-start-open
  #content {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* ===== 2026-08-10 Day5 AI確認テスト本番画面：PWAスクロール復元 v439 =====
 * Day5本番画面にも課題学習(practical-study-active)の overflow:hidden / height:100%
 * が残っていたため、画面全体をスクロールできず、会話ログだけが内部スクロールに
 * なっていました。また ai-confirmation-active が html/body の高さを通常PWAから
 * 外していたため、下部メニューの固定基準も不安定になっていました。
 *
 * このブロックは「本番のAI確認テスト画面」だけを通常PWAシェルへ戻します。
 * 下部メニューの高さ・アイコン・文字・ボタン内余白は一切変更しません。
 */
@media (max-width: 820px),
       (hover: none) and (pointer: coarse) and (max-width: 960px) {
  /* 通常ページと同じ固定PWA外枠を使用し、.mainだけを縦スクロールさせます。 */
  html.smaei-standalone-app:has(body.student-mobile-nav-enabled.ai-confirmation-active),
  html.smaei-pwa-layout-active:has(body.student-mobile-nav-enabled.ai-confirmation-active) {
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  html.smaei-standalone-app
  body.student-mobile-nav-enabled.ai-confirmation-active,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.ai-confirmation-active {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  html.smaei-standalone-app
  body.student-mobile-nav-enabled.ai-confirmation-active
  #appView,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.ai-confirmation-active
  .app,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.ai-confirmation-active
  #appView,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.ai-confirmation-active
  .app {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  /* practical-study-activeの後段ルールより優先して、ページスクロールを復元します。 */
  body.student-mobile-nav-enabled.ai-confirmation-active
  .main,
  body.student-mobile-nav-enabled.ai-confirmation-active.app-mode
  .main,
  body.student-mobile-nav-enabled.ai-confirmation-active.practical-study-active
  .main,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.ai-confirmation-active.practical-study-active
  .main,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.ai-confirmation-active.practical-study-active
  .main {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  body.student-mobile-nav-enabled.ai-confirmation-active
  #content,
  body.student-mobile-nav-enabled.ai-confirmation-active.practical-study-active
  #content,
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.ai-confirmation-active.practical-study-active
  #content,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.ai-confirmation-active.practical-study-active
  #content {
    position: static !important;
    display: block !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.student-mobile-nav-enabled.ai-confirmation-active
  .ai-confirmation-session-shell {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 24px !important;
    overflow: visible !important;
  }

  /* セッション見出しはページ内の通常要素として流し、上部要素が隠れないようにします。 */
  body.student-mobile-nav-enabled.ai-confirmation-active
  .ai-confirmation-session-header {
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  body.student-mobile-nav-enabled.ai-confirmation-active
  .ai-confirmation-session-workspace {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.student-mobile-nav-enabled.ai-confirmation-active
  .ai-confirmation-session-workspace
  > .ai-confirmation-chat-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* スマホでは会話ログだけを閉じ込めず、ページ全体をスワイプ対象にします。 */
  body.student-mobile-nav-enabled.ai-confirmation-active
  .ai-confirmation-session-workspace
  .ai-confirmation-chat-log {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto !important;
  }

  body.student-mobile-nav-enabled.ai-confirmation-active
  .ai-confirmation-composer,
  body.student-mobile-nav-enabled.ai-confirmation-active
  .ai-confirmation-bottom-actions,
  body.student-mobile-nav-enabled.ai-confirmation-active
  .ai-confirmation-complete-panel {
    position: static !important;
  }

  /* 位置だけを通常PWAと同じ画面下端へ固定。寸法・文字・アイコンには触れません。 */
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.ai-confirmation-active
  .student-bottom-nav,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.ai-confirmation-active
  .student-bottom-nav {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    pointer-events: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    translate: none !important;
  }
}


/* ===== 2026-08-10 Day5 AI確認テスト：ページ上端を固定ヘッダー直下に確保 =====
 * ライブセッションではヘッダーがfixedのため、スクロール位置の補正だけに依存せず、
 * スクロールコンテンツ自身の先頭位置をヘッダー下端から開始させます。
 * 下部メニューの高さ・アイコン・文字サイズ・位置には一切触れません。
 */
@media (max-width: 820px),
       (hover: none) and (pointer: coarse) and (max-width: 960px) {
  html.smaei-standalone-app
  body.student-mobile-nav-enabled.ai-confirmation-active
  .main,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.ai-confirmation-active
  .main {
    --ai-confirmation-header-bottom:
      var(
        --mobile-header-expanded-bottom,
        calc(
          var(--mobile-safe-area-top, env(safe-area-inset-top, 0px))
          + var(--smaei-pwa-header-height, 38px)
        )
      );

    /* 既存の複数のDay5用padding-topが競合しないよう、余白の責務を#contentへ一本化。 */
    padding-top: 0 !important;
    scroll-padding-top:
      calc(var(--ai-confirmation-header-bottom) + 8px)
      !important;
  }

  html.smaei-standalone-app
  body.student-mobile-nav-enabled.ai-confirmation-active
  #content,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.ai-confirmation-active
  #content {
    box-sizing: border-box !important;
    padding-top:
      calc(var(--ai-confirmation-header-bottom) + 8px)
      !important;
  }

  html.smaei-standalone-app
  body.student-mobile-nav-enabled.ai-confirmation-active
  .ai-confirmation-session-header,
  html.smaei-pwa-layout-active
  body.student-mobile-nav-enabled.ai-confirmation-active
  .ai-confirmation-session-header {
    scroll-margin-top:
      calc(var(--ai-confirmation-header-bottom) + 8px)
      !important;
  }
}

/* ===== 2026-08-10 Day5 AI確認テスト：ヘッダー挙動を通常ページと統一 v444 =====
 * ページ開始位置・本文・下部メニューには触れず、Day5セッション中の
 * ヘッダーtransformだけを通常PWAの --mobile-header-offset に戻します。
 */
@media (max-width: 820px),
       (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.student-mobile-nav-enabled.ai-confirmation-active .topbar,
  body.student-mobile-nav-enabled.ai-confirmation-active.header-hidden .topbar {
    transform: translate3d(
      0,
      calc(-1 * var(--mobile-header-offset, 0px)),
      0
    ) !important;
    -webkit-transform: translate3d(
      0,
      calc(-1 * var(--mobile-header-offset, 0px)),
      0
    ) !important;
    will-change: transform !important;
  }
}


/* ===== 2026-08-11 Day5開始設定画面：PCスクロール復元 v447 =====
 * Day5開始設定画面では practical-study-active が残るため、PCでも共通の
 * 課題学習用 height:100dvh / overflow:hidden が .main と #content に適用され、
 * 設定カードの下部までスクロールできない状態になっていました。
 *
 * PC版の開始設定画面に限り、通常ページと同じ document スクロールへ戻します。
 * スマホ/PWA、AI確認テスト本番画面、ヘッダー、下部メニューには影響しません。
 */
@media (min-width: 961px) {
  html:has(body.ai-confirmation-start-open),
  body.ai-confirmation-start-open {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.ai-confirmation-start-open .app {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.ai-confirmation-start-open .main,
  body.ai-confirmation-start-open.app-mode .main,
  body.ai-confirmation-start-open.practical-study-active .main {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body.ai-confirmation-start-open #content,
  body.ai-confirmation-start-open.practical-study-active #content {
    display: block !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.ai-confirmation-start-open .ai-confirmation-start-layout,
  body.ai-confirmation-start-open .ai-confirmation-start-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* ===== 2026-08-11 PWA：AI学習注意事項モーダル位置調整 v449 =====
 * スマホ用の既存ルールではモーダルを画面下端に寄せる bottom-sheet 表示でした。
 * PWA のときだけ安全領域を保ったまま画面中央へ戻します。
 * モーダル以外のページレイアウト、ヘッダー、下部メニューには影響しません。
 */
@media (max-width: 640px) {
  html.smaei-standalone-app .ai-learning-notice-modal-backdrop,
  html.smaei-pwa-layout-active .ai-learning-notice-modal-backdrop,
  body.smaei-standalone-app .ai-learning-notice-modal-backdrop,
  body.smaei-pwa-layout-active .ai-learning-notice-modal-backdrop {
    align-items: center !important;
  }
}


/* ===== 2026-08-14 講師プロフィール表示の可読性改善 v503 ===== */
.booking-teacher-search-section .teacher-profile-mini.teacher-profile-public-card,
.booking-request-section .teacher-profile-mini.teacher-profile-public-card {
  max-width: 880px;
  margin: 18px auto 0;
  padding: 22px 20px;
  border: 1px solid #d7e0ec;
  border-radius: 24px;
  background: linear-gradient(180deg, #fcfdff 0%, #f7f9fc 100%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.booking-teacher-search-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-summary,
.booking-request-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-summary {
  gap: 10px;
}

.booking-teacher-search-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-name,
.booking-request-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-name {
  font-size: 34px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.booking-teacher-search-section .teacher-profile-mini.teacher-profile-public-card .teacher-photo,
.booking-request-section .teacher-profile-mini.teacher-profile-public-card .teacher-photo {
  width: 152px;
  height: 152px;
  margin: 6px auto 10px;
  border-radius: 28px;
  border: 4px solid #fff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
}

.booking-teacher-search-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-badges,
.booking-request-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-badges {
  gap: 8px;
}

.teacher-profile-public-card .teacher-profile-basic-badges {
  margin-bottom: 0;
}

.teacher-profile-public-card .teacher-profile-section {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid #e3e8f0;
  border-radius: 18px;
  background: #fff;
}

.teacher-profile-public-card .teacher-profile-specialty-section {
  background: #fbfcff;
}

.teacher-profile-public-card .teacher-profile-section-title {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 800;
  color: #1f2a37;
}

.teacher-profile-public-card .teacher-profile-specialty-badges {
  justify-content: flex-start;
}

.teacher-profile-public-card .teacher-profile-empty {
  display: inline-block;
  padding: 4px 0;
}

.teacher-profile-public-card .teacher-profile-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.teacher-profile-public-card .teacher-profile-meta-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 88px;
  padding: 14px 16px;
  border: 1px solid #e3e8f0;
  border-radius: 18px;
  background: #fff;
}

.teacher-profile-public-card .teacher-profile-meta-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
}

.teacher-profile-public-card .teacher-profile-meta-value {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 700;
  color: #111827;
  word-break: break-word;
}

.booking-teacher-search-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-bio,
.booking-teacher-search-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-business-experience p,
.booking-request-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-bio,
.booking-request-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-business-experience p {
  margin: 0;
  font-size: 15px;
  line-height: 1.95;
  color: #4b5563;
}

.teacher-profile-public-card .teacher-profile-footer-actions {
  justify-content: center;
  margin-top: 16px;
}

.teacher-profile-public-card .teacher-profile-notice {
  margin-top: 16px;
}

@media (max-width: 820px) {
  .booking-teacher-search-section .teacher-profile-mini.teacher-profile-public-card,
  .booking-request-section .teacher-profile-mini.teacher-profile-public-card {
    margin: 14px auto 0;
    padding: 16px 14px;
    border-radius: 20px;
  }

  .booking-teacher-search-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-name,
  .booking-request-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-name {
    font-size: 28px;
  }

  .booking-teacher-search-section .teacher-profile-mini.teacher-profile-public-card .teacher-photo,
  .booking-request-section .teacher-profile-mini.teacher-profile-public-card .teacher-photo {
    width: 136px;
    height: 136px;
    border-radius: 24px;
  }

  .teacher-profile-public-card .teacher-profile-section {
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
  }

  .teacher-profile-public-card .teacher-profile-meta-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .teacher-profile-public-card .teacher-profile-meta-item {
    min-height: 0;
    padding: 12px 14px;
  }

  .teacher-profile-public-card .teacher-profile-meta-value {
    font-size: 15px;
  }

  .booking-teacher-search-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-bio,
  .booking-teacher-search-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-business-experience p,
  .booking-request-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-bio,
  .booking-request-section .teacher-profile-mini.teacher-profile-public-card .teacher-profile-business-experience p {
    font-size: 14px;
    line-height: 1.9;
  }
}


/* ===== 2026-08-14 講師プロフィール微調整 / 曜日表示復元 v504 ===== */
.booking-teacher-search-section .teacher-profile-mini.teacher-profile-public-card .teacher-photo,
.booking-request-section .teacher-profile-mini.teacher-profile-public-card .teacher-photo {
  border: 0 !important;
}

/* 空き時間がまだない曜日も、曜日ラベル自体は日〜土すべて残します。 */
.slot-day-group.no-slots .slot-day-head {
  opacity: .55;
}
.slot-day-group.no-slots .slot-day-toggle,
.slot-day-group.no-slots .slot-day-select {
  cursor: default;
}

@media (max-width: 820px) {
  /* 英語指導歴と日本居住歴をスマホでも横2列にします。 */
  .teacher-profile-public-card .teacher-profile-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* 試験指導経験は情報量が長くなりやすいため、2列の下で全幅表示します。 */
  .teacher-profile-public-card .teacher-profile-meta-item:nth-child(3) {
    grid-column: 1 / -1;
  }
}


/* ===== 2026-08-15 Googleログイン：必須プロフィール補完 v516 ===== */
body.auth-mode #panel-google-profile {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.auth-mode #panel-google-profile .auth-profile-completion-note {
  margin: -6px 0 18px !important;
  line-height: 1.65 !important;
}

body.auth-mode #panel-google-profile #googleProfileEmail:disabled {
  background: #f6f7f9 !important;
  color: #667085 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #667085 !important;
}

body.auth-mode #panel-google-profile #googleProfileLogoutBtn {
  width: 100% !important;
  margin-top: 10px !important;
}

@media
  (max-width: 820px),
  (hover: none)
  and (pointer: coarse)
  and (max-width: 960px) {
  body.auth-mode #panel-google-profile input,
  body.auth-mode #panel-google-profile select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
  }

  body.auth-mode #googleProfileBirthDate {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    color: var(--text) !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    overflow: hidden !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }

  body.auth-mode #googleProfileBirthDate::-webkit-date-and-time-value,
  body.auth-mode #googleProfileBirthDate::-webkit-datetime-edit {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  body.auth-mode #googleProfileBirthDate::-webkit-calendar-picker-indicator {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
  }
}

/* ===== v555 Consultant schedule editor ===== */
.consultant-availability-summary {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed #d6dbe5;
  border-radius: 12px;
  background: #fbfdff;
  color: #475467;
  font-size: 12px;
}

.consultant-weekly-grid .slot-btn.open,
.consultant-21-grid .slot-btn.open {
  background: #e7f7ed;
  color: #137333;
  border-color: #a8e0bb;
}

.consultant-weekly-grid .slot-btn.closed,
.consultant-21-grid .slot-btn.closed {
  background: #fff0f0;
  color: #b42318;
  border-color: #ffc5c5;
}

.consultant-21-wrap .schedule-grid {
  min-width: 1600px;
}

.consultant-21-grid th:not(.time-head),
.consultant-21-grid td {
  min-width: 70px;
}

.consultant-21-grid th small {
  display: block;
  color: #64748b;
  font-weight: 700;
}

.consultant-reset-date-btn {
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 4px 0 0 !important;
  padding: 2px 5px !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #475467 !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.consultant-reset-date-btn:hover,
.consultant-reset-date-btn:focus-visible {
  background: #f8fafc !important;
  border-color: #98a2b3 !important;
}

@media (max-width: 860px) {
  .consultant-21-wrap .schedule-grid {
    min-width: 1500px;
  }
}

/* --------------------------------------------------------------------------
   v568 Consultant booking calendar
   -------------------------------------------------------------------------- */
.consultant-schedule-header-card,
.consultant-calendar-card,
.consultant-settings-card {
  overflow: hidden;
}

.consultant-schedule-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.consultant-schedule-tabs button {
  min-width: 210px;
}

.consultant-calendar-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.consultant-calendar-heading h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

.consultant-calendar-toolbar,
.consultant-week-chip-row,
.consultant-day-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.consultant-week-chip,
.consultant-day-chip {
  min-width: auto;
  padding: 8px 14px;
  border-radius: 999px;
}

.consultant-week-chip.active,
.consultant-day-chip.active {
  background: #c8161d;
  border-color: #c8161d;
  color: #fff;
}

.consultant-calendar-scroll {
  width: 100%;
  max-height: 650px;
  overflow: auto;
  border: 1px solid #e7e2df;
  border-radius: 14px;
  background: #fff;
  overscroll-behavior: contain;
}

.consultant-block-calendar {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  user-select: none;
}

.consultant-block-calendar.single-day {
  min-width: 0;
}

.consultant-block-calendar th,
.consultant-block-calendar td {
  padding: 0;
  border-right: 1px solid #eee9e6;
  border-bottom: 1px solid #eee9e6;
}

.consultant-block-calendar thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 10px 6px;
  background: #faf9f8;
  text-align: center;
  font-size: 13px;
}

.consultant-block-calendar .consultant-calendar-time-head {
  left: 0;
  z-index: 6;
  width: 72px;
}

.consultant-block-calendar .consultant-calendar-time {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 72px;
  padding: 0 8px;
  background: #faf9f8;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.consultant-calendar-cell {
  display: block;
  width: 100%;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: transparent;
  font-size: 10px;
  line-height: 28px;
  box-shadow: none;
  cursor: crosshair;
  touch-action: manipulation;
  transition: background-color .08s ease, box-shadow .08s ease;
}

.consultant-calendar-cell:hover,
.consultant-calendar-cell:focus-visible {
  background: #f7eeee;
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(200, 22, 29, .25);
}

.consultant-calendar-cell.blocked {
  background: #f6cfd1;
  color: #9f171d;
  box-shadow: inset 3px 0 0 #c8161d;
}

.consultant-calendar-cell.blocked:hover,
.consultant-calendar-cell.blocked:focus-visible {
  background: #efb9bc;
}

.consultant-calendar-cell span {
  pointer-events: none;
}

.consultant-date-nav {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}

.consultant-date-nav button {
  min-width: 0;
  padding: 8px;
}

.consultant-date-nav-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid #e8e2df;
  border-radius: 10px;
  background: #faf9f8;
}

.consultant-date-nav-label span {
  margin-top: 2px;
  color: #777;
  font-size: 12px;
}

.consultant-reception-panel,
.consultant-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.consultant-reception-panel {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #ebe4e1;
  border-radius: 14px;
  background: #fbfaf9;
}

.consultant-reception-panel p {
  margin: 5px 0 0;
}

.consultant-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.consultant-status-pill.accepting {
  background: #e7f5ec;
  color: #18713b;
}

.consultant-status-pill.stopped {
  background: #f5e7e7;
  color: #9a2025;
}

.consultant-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
  flex: 0 0 auto;
}

.consultant-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.consultant-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #c9c5c2;
  cursor: pointer;
  transition: .18s ease;
}

.consultant-switch-slider::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  transition: .18s ease;
}

.consultant-switch input:checked + .consultant-switch-slider {
  background: #2f9c5d;
}

.consultant-switch input:checked + .consultant-switch-slider::before {
  transform: translateX(22px);
}

.consultant-switch input:focus-visible + .consultant-switch-slider {
  outline: 3px solid rgba(47, 156, 93, .2);
  outline-offset: 2px;
}

.consultant-teacher-profile-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.consultant-teacher-photo {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  border-radius: 50%;
  object-fit: cover;
}

.consultant-directory-error {
  display: grid;
  gap: 8px;
}

.consultant-directory-error button {
  width: fit-content;
}

@media (max-width: 760px) {
  .consultant-schedule-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .consultant-schedule-tabs button {
    min-width: 0;
    padding: 10px 8px;
    font-size: 12px;
  }

  .consultant-calendar-card {
    padding-left: 12px;
    padding-right: 12px;
  }

  .consultant-calendar-scroll {
    max-height: 58vh;
    border-radius: 12px;
  }

  .consultant-block-calendar,
  .consultant-block-calendar.single-day {
    min-width: 0;
  }

  .consultant-block-calendar .consultant-calendar-time-head,
  .consultant-block-calendar .consultant-calendar-time {
    width: 62px;
  }

  .consultant-calendar-cell {
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    font-size: 10px;
  }

  .consultant-calendar-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .consultant-calendar-toolbar button {
    width: 100%;
    min-width: 0;
    padding: 9px 7px;
    font-size: 11px;
  }

  .consultant-calendar-toolbar button:last-child:nth-child(3) {
    grid-column: 1 / -1;
  }

  .consultant-day-chip-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }

  .consultant-day-chip {
    padding: 8px 4px;
  }

  .consultant-reception-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .consultant-reception-panel .consultant-toggle-row {
    justify-content: flex-start;
  }

  .consultant-dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  .consultant-booking-table,
  .consultant-teacher-schedule-table {
    -webkit-overflow-scrolling: touch;
  }

  .consultant-teacher-profile-row {
    gap: 12px;
  }

  .consultant-teacher-photo {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
}


/* v572: Consultant teacher directory / availability readability */
.consultant-teacher-profile-card {
  padding: 22px;
}

.consultant-teacher-profile-row {
  gap: 22px;
  align-items: center;
}

.consultant-teacher-photo {
  width: 124px;
  height: 124px;
  flex: 0 0 124px;
  border-radius: 18px;
  object-fit: cover;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.consultant-teacher-photo-placeholder {
  display: grid;
  place-items: center;
  font-size: 42px;
}

.consultant-teacher-profile-summary {
  min-width: 0;
}

.consultant-teacher-profile-summary h3 {
  margin: 0 0 10px;
  font-size: 24px;
}

.consultant-teacher-summary-badges,
.consultant-teacher-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.consultant-teacher-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.consultant-teacher-meta-item {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fafafa;
}

.consultant-teacher-meta-label {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.consultant-teacher-meta-value {
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.consultant-teacher-detail-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #ededed;
}

.consultant-teacher-detail-title {
  margin-bottom: 7px;
  font-weight: 700;
  color: #20242a;
}

.consultant-teacher-detail-body {
  line-height: 1.75;
  color: #394150;
}

.consultant-teacher-audio {
  width: min(100%, 520px);
}

.consultant-teacher-schedule-heading h4 {
  margin: 0 0 4px;
}

.consultant-teacher-weekday-filter {
  margin: 12px 0;
}

.consultant-teacher-schedule-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 10px 0 12px;
  font-size: 12px;
  color: #555f6d;
}

.consultant-teacher-schedule-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.consultant-teacher-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid transparent;
}

.consultant-teacher-legend-dot.is-open,
.consultant-teacher-slot.is-open {
  background: #e7f6ed;
  border-color: #a9dcc0;
  color: #177245;
}

.consultant-teacher-legend-dot.is-busy,
.consultant-teacher-slot.is-busy {
  background: #fdeaea;
  border-color: #efb7b7;
  color: #c83232;
}

.consultant-teacher-legend-dot.is-closed,
.consultant-teacher-slot.is-closed {
  background: #f1f2f4;
  border-color: #d9dce1;
  color: #7a818c;
}

.consultant-teacher-schedule-table {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.consultant-teacher-schedule-table table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content !important;
  min-width: max-content;
  table-layout: fixed;
}

.consultant-teacher-schedule-table th,
.consultant-teacher-schedule-table td {
  width: 74px;
  min-width: 74px;
  max-width: 74px;
  height: 44px;
  padding: 7px 9px;
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  text-align: center;
  vertical-align: middle;
}

.consultant-teacher-time-head,
.consultant-teacher-time-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  background: #fff;
  box-shadow: 1px 0 0 #e8e8e8;
}

.consultant-teacher-time-head {
  z-index: 4;
}

.consultant-teacher-date-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  white-space: nowrap;
}

.consultant-teacher-date-head span,
.consultant-teacher-date-head small {
  display: block;
}

.consultant-teacher-date-head small {
  margin-top: 2px;
  color: #7a818c;
  font-size: 11px;
  font-weight: 500;
}

.consultant-teacher-slot {
  font-size: 18px;
  font-weight: 800;
}

.consultant-teacher-warning {
  margin-top: 10px;
}

@media (max-width: 760px) {
  .consultant-teacher-profile-card {
    padding: 16px;
  }

  .consultant-teacher-profile-row {
    gap: 14px;
    align-items: flex-start;
  }

  .consultant-teacher-photo {
    width: 92px;
    height: 92px;
    flex-basis: 92px;
    border-radius: 14px;
  }

  .consultant-teacher-profile-summary h3 {
    font-size: 20px;
  }

  .consultant-teacher-meta-grid {
    grid-template-columns: 1fr;
  }

  .consultant-teacher-weekday-filter {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .consultant-teacher-weekday-filter::-webkit-scrollbar {
    display: none;
  }

  .consultant-teacher-weekday-filter .filter-chip {
    flex: 0 0 auto;
  }

  .consultant-teacher-schedule-table {
    max-height: 62vh;
  }

  .consultant-teacher-schedule-table th,
  .consultant-teacher-schedule-table td {
    width: 68px;
    min-width: 68px;
    max-width: 68px;
    height: 42px;
    padding: 6px 7px;
  }
}


/* ===== v581: 旧システム学習履歴 ===== */
.legacy-learning-history-entry-card,
.legacy-learning-history-head,
.admin-legacy-history-sync-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.legacy-learning-history-entry-card h3,
.legacy-learning-history-entry-card p,
.legacy-learning-history-head h3,
.legacy-learning-history-head p,
.admin-legacy-history-sync-heading h3,
.admin-legacy-history-sync-heading p {
  margin-top: 0;
  margin-bottom: 0;
}

.legacy-learning-history-sync-meta {
  margin: -4px 2px 12px;
}

.legacy-learning-history-group {
  margin-top: 16px;
}

.legacy-learning-history-group > h4 {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f4f6f8;
}

.legacy-learning-history-task-list {
  display: grid;
  gap: 10px;
}

.legacy-learning-history-task-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
}

.legacy-learning-history-task-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.legacy-learning-history-stage {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 7px;
  border-radius: 5px;
  background: #2f6fed;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.legacy-learning-history-question,
.legacy-learning-history-answer,
.legacy-learning-history-feedback {
  line-height: 1.75;
}

.legacy-learning-history-answer,
.legacy-learning-history-feedback {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #edf0f3;
}

.legacy-learning-history-feedback {
  padding: 12px;
  border: 1px solid #b9d5ff;
  border-radius: 9px;
  background: #f7fbff;
}

.legacy-learning-history-text {
  white-space: normal;
  overflow-wrap: anywhere;
}

.legacy-learning-history-audio {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.legacy-learning-history-audio audio {
  width: min(520px, 100%);
}

.legacy-learning-history-file-preview {
  display: block;
  width: auto;
  max-width: min(320px, 100%);
  max-height: 320px;
  margin: 6px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.legacy-learning-history-file-link {
  color: #235fd4;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.legacy-learning-history-status-reviewed {
  background: #e8f7ee;
  color: #187442;
}

.legacy-learning-history-status-submitted {
  background: #eaf2ff;
  color: #2459a9;
}

.legacy-learning-history-status-draft,
.legacy-learning-history-status-unknown {
  background: #f1f3f5;
  color: #5b6573;
}

.admin-legacy-history-sync-card {
  margin-top: 18px;
}

.admin-legacy-history-sync-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 14px;
}

.admin-legacy-history-sync-meta span {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}

.error-text {
  color: #c92a2a !important;
}

@media (max-width: 760px) {
  .legacy-learning-history-entry-card,
  .legacy-learning-history-head,
  .admin-legacy-history-sync-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .legacy-learning-history-entry-card button,
  .legacy-learning-history-head button {
    width: 100%;
  }
}


/* ===== 2026-08-17 契約規約：レッスンノート同等リッチエディタ v591 ===== */
.contract-rich-editor-shell {
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}

.contract-rich-editor-shell .contract-rich-toolbar {
  margin-top: 0;
}

.contract-rich-editor {
  min-height: 310px !important;
  max-height: 520px;
  overflow-y: auto;
  padding: 13px 14px !important;
  color: var(--text);
  line-height: 1.75;
  white-space: normal;
  overflow-wrap: anywhere;
}

.contract-rich-editor p,
.contract-rich-editor div {
  margin: 0 0 .85em;
}

.contract-rich-editor h2,
.contract-settings-text h2,
.legal-card h2,
.contract-terms-scroll-body h2 {
  margin: 1.05em 0 .55em;
  font-size: 1.35em;
  line-height: 1.45;
}

.contract-rich-editor h3,
.contract-settings-text h3,
.legal-card h3,
.contract-terms-scroll-body h3 {
  margin: 1em 0 .5em;
  font-size: 1.15em;
  line-height: 1.5;
}

.contract-rich-editor blockquote,
.contract-settings-text blockquote,
.legal-card blockquote,
.contract-terms-scroll-body blockquote {
  margin: .8em 0;
  padding: .65em .9em;
  border-left: 3px solid #d0d5dd;
  background: #f8f9fb;
}

.contract-rich-editor ul,
.contract-settings-text ul,
.legal-card ul,
.contract-terms-scroll-body ul {
  margin: .65em 0 .9em;
  padding-left: 2em;
  list-style: disc;
}

.contract-rich-editor ol,
.contract-settings-text ol,
.legal-card ol,
.contract-terms-scroll-body ol {
  margin: .65em 0 .9em;
  padding-left: 2em;
  list-style: decimal;
}

.contract-rich-editor li,
.contract-settings-text li,
.legal-card li,
.contract-terms-scroll-body li {
  margin: .35em 0;
  padding-left: .2em;
  line-height: 1.75;
}

.contract-rich-editor a,
.contract-settings-text a,
.legal-card a,
.contract-terms-scroll-body a {
  color: #b70d19;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.lesson-note-editor-shell.is-fullscreen .contract-rich-editor {
  max-height: none !important;
}

@media (max-width: 820px) {
  .contract-rich-editor {
    min-height: 260px !important;
    max-height: 440px;
  }

  .lesson-note-editor-shell.is-fullscreen .contract-rich-editor {
    min-height: 0 !important;
    max-height: none !important;
  }
}


/* ===== v594 講師アカウント管理：住所・報酬振込先 ===== */
.teacher-account-private-section {
  grid-column: 1 / -1;
}

.teacher-private-account-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 16px;
}

.teacher-private-account-group {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line, #dfe3ea);
  border-radius: 14px;
  background: #fff;
}

.teacher-private-account-group h5 {
  margin: 0 0 14px;
  font-size: 16px;
}

.teacher-private-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.teacher-private-account-grid > div {
  min-width: 0;
}

.teacher-private-account-grid label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.teacher-private-account-grid input,
.teacher-private-account-grid select {
  width: 100%;
}

.teacher-private-span-2 {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .teacher-private-account-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .teacher-private-account-group {
    padding: 14px;
  }

  .teacher-private-account-grid {
    grid-template-columns: 1fr;
  }

  .teacher-private-span-2 {
    grid-column: auto;
  }
}


/* ===== v595 講師アカウント管理：個人情報の再認証表示 ===== */
.teacher-private-account-locked {
  min-height: 190px;
}

.teacher-private-account-lock-content {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  border: 1px dashed var(--line, #dfe3ea);
  border-radius: 12px;
  background: #f8f9fb;
  text-align: center;
}

.teacher-private-lock-icon {
  font-size: 24px;
  line-height: 1;
}

.teacher-private-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 20px;
}

.teacher-private-auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.56);
}

.teacher-private-auth-dialog {
  position: relative;
  width: min(460px, 100%);
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.teacher-private-auth-dialog h3 {
  margin: 0 0 8px;
}

.teacher-private-auth-dialog > p {
  margin: 0 0 18px;
}

.teacher-private-auth-dialog label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.teacher-private-auth-dialog input[type="password"] {
  width: 100%;
}

.teacher-private-auth-dialog .actions {
  margin-top: 16px;
}

@media (max-width: 600px) {
  .teacher-private-auth-modal {
    padding: 14px;
  }
  .teacher-private-auth-dialog {
    padding: 20px;
  }
}


/* ===== v603 PWA: テーマカードの「タップ中」と「選択中」を分離 ===== */
/*
 * iOS/Androidのタッチブラウザでは、スクロール開始時に触れた要素の
 * :hover が指を離した後も残ることがあります。テーマ選択済みの active と
 * 同じ装飾に見えないよう、タッチ端末では未選択の疑似hoverを通常表示へ戻します。
 */
@media (hover: none), (pointer: coarse) {
  .study-material-selector-card > .study-theme-grid
  .study-theme-card:not(.active):not(.is-previously-selected):hover,
  .study-material-selector-card > .study-theme-grid
  .study-theme-card:not(.active):not(.is-previously-selected):focus:not(:focus-visible) {
    border-color: #d0d5dd !important;
    background: #fff !important;
    color: #344054 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
  }

  /* タップ中：ニュートラルな押下表現。選択済みの赤系装飾とは区別します。 */
  .study-material-selector-card > .study-theme-grid
  .study-theme-card.mobile-touch-pressed:not(.active):not(.is-previously-selected) {
    border-color: #98a2b3 !important;
    background: #f2f4f7 !important;
    color: #344054 !important;
    box-shadow: inset 0 0 0 1px rgba(52, 64, 84, .08) !important;
    transform: scale(.985) !important;
    filter: none !important;
  }

  /* 選択中：赤系の枠＋淡い背景で持続状態を明確にします。 */
  .study-material-selector-card > .study-theme-grid
  .study-theme-card.active:not(.is-previously-selected) {
    border: 2px solid var(--primary) !important;
    background: #fff1f2 !important;
    color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(209, 19, 31, .10) !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ===== 2026-08-18 v605 PWA：読込中も下部メニュー操作を最優先 ===== */
/*
 * page-rendering / student-mobile-navigation-loading は本文の読込状態だけを表し、
 * 下部ナビゲーションや、そのメニューカードの pointer-events は無効化しません。
 * モーダル・録音・記事全画面など各機能固有の操作制限は従来ルールを維持します。
 */
@media (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  body.student-mobile-nav-enabled .page-loading-overlay {
    pointer-events: none !important;
  }
}


/* ===== 2026-08-18 管理者メッセージ：スタッフ申し送り v607 ===== */
.admin-message-handover-card {
  margin-top: 16px;
  border: 1px solid #d8dee8;
  background: #fff;
}

.admin-message-handover-card.has-handover {
  border: 2px solid #df1428;
  background: #fff9fa;
}

.admin-message-handover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.admin-message-handover-head h3,
.admin-message-handover-head p {
  margin: 0;
}

.admin-message-handover-head p {
  margin-top: 4px;
}

.admin-message-handover-badge[hidden] {
  display: none !important;
}

.admin-message-handover-badge {
  display: inline-flex;
  min-height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #df1428;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.admin-message-handover-card textarea {
  min-height: 120px;
  resize: vertical;
}

.admin-message-handover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.admin-message-handover-footer [data-admin-message-handover-status] {
  flex: 1 1 auto;
}

.admin-message-handover-dashboard-list {
  gap: 10px;
}

.admin-message-handover-dashboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-message-handover-dashboard-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-message-handover-dashboard-copy b,
.admin-message-handover-dashboard-copy span {
  overflow-wrap: anywhere;
}

.admin-message-handover-dashboard-copy span {
  color: #475467;
  font-size: 13px;
}

.admin-message-handover-dashboard-item button {
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  .admin-message-handover-head,
  .admin-message-handover-footer,
  .admin-message-handover-dashboard-item {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-message-handover-badge {
    align-self: flex-start;
  }

  .admin-message-handover-footer button,
  .admin-message-handover-dashboard-item button {
    width: 100%;
  }
}

/* ===== 2026-08-18 講師画面：生徒録音の表示・再生速度 ===== */
.student-recording-status {
  margin-top: 10px;
  min-width: 0;
}

.student-recording-status .student-recording-label {
  display: block;
  margin-bottom: 4px;
}

.student-recording-status .student-recording-missing {
  display: inline-block;
  padding: 4px 0;
}

.practical-recording-audio-player.has-speed-control {
  grid-template-columns: 34px 76px minmax(120px, 1fr) auto !important;
}

.practical-recording-audio-player.has-speed-control .practical-recording-speed-control {
  grid-column: 4 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  white-space: nowrap;
}

.practical-recording-audio-player.has-speed-control .practical-recording-speed-control select {
  min-width: 68px;
}

.practical-recording-audio-player.has-speed-control .practical-recording-error {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .practical-recording-audio-player.has-speed-control {
    grid-template-columns: 32px 66px minmax(64px, 1fr) auto !important;
  }

  .practical-recording-audio-player.has-speed-control .practical-recording-speed-control > span {
    display: none;
  }

  .practical-recording-audio-player.has-speed-control .practical-recording-speed-control select {
    min-width: 58px;
    padding-inline: 5px;
  }
}

@media (max-width: 420px) {
  .practical-recording-audio-player.has-speed-control {
    grid-template-columns: 30px 58px minmax(52px, 1fr) auto !important;
    gap: 3px !important;
  }
}

/* 教材開発者は下部メニューが3項目のため、既存の高さ・アイコン・文字サイズは変えず均等配置だけ調整します。 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  body.material-developer-mobile-nav-enabled .student-bottom-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== 2026-08-18 リッチエディタ：インデント時の自動装飾を解除 v613 =====
 * contenteditable の indent コマンドが blockquote を生成するブラウザでも、
 * インデント幅だけを維持し、引用用の背景・左罫線・paddingを付けない。
 * レッスンノート／スタディノート／利用規約の編集・表示を共通化する。
 */
.lesson-note-editor blockquote,
.lesson-note-readonly blockquote,
.study-note-readonly-body blockquote,
.admin-study-note-body blockquote,
.contract-rich-editor blockquote,
.contract-settings-text blockquote,
.legal-card blockquote,
.contract-terms-scroll-body blockquote {
  margin-top: .65em !important;
  margin-right: 0 !important;
  margin-bottom: .85em !important;
  margin-left: 2em !important;
  padding: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== 2026-08-19 Writing / Speaking feedback split ===== */
.teacher-feedback-writing-speaking-input {
  display: grid;
  gap: 8px;
}

.teacher-feedback-writing-speaking-input > .practical-text-count {
  margin-top: -2px;
  text-align: right;
}

.teacher-feedback-speaking-text-block {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.teacher-feedback-speaking-label {
  display: block;
}

.teacher-feedback-writing-speaking-input .teacher-feedback-recording {
  margin-top: 8px;
}

/* ===== 2026-08-20 staff lesson schedule month navigation / lesson edit selectors v664 ===== */
.staff-lesson-month-switcher {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 10px 0 12px;
}

button.staff-lesson-month-button {
  width: auto !important;
  min-width: 96px;
  min-height: 36px;
  margin: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: #f4f6f9;
  border-color: #e2e7ee;
  color: #475467;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

button.staff-lesson-month-button:hover,
button.staff-lesson-month-button:focus-visible {
  background: #fff4f5;
  border-color: #f1b9bf;
  color: var(--primary);
}

.staff-lesson-month-current {
  min-width: 0;
  color: #344054;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.staff-upcoming-month-empty {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 76px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafbfc;
  color: #667085;
  font-size: 13px;
}

.lesson-edit-selector-grid {
  align-items: end;
}

.lesson-edit-selector-note {
  margin: -2px 0 12px !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .staff-lesson-month-switcher {
    grid-template-columns: auto minmax(90px, 1fr) auto;
    gap: 6px;
    margin-top: 8px;
  }

  button.staff-lesson-month-button {
    min-width: 0;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 11px;
  }

  .staff-lesson-month-current {
    font-size: 13px;
  }

  .staff-upcoming-schedule-summary {
    gap: 10px;
  }

  .lesson-edit-selector-note {
    margin-top: 2px !important;
  }
}