:root {
  color-scheme: dark;
  --bg: #0a1113;
  --panel: #111a1d;
  --panel-2: #172327;
  --line: #2c3d43;
  --text: #eef7f2;
  --muted: #9fb0aa;
  --mint: #42d7a3;
  --amber: #f3b44b;
  --blue: #78b8ff;
  --rose: #e86f83;
  --button-height-large: 38px;
  --button-height-medium: 32px;
  --button-height-small: 30px;
  --button-font-large: 15px;
  --button-font-medium: 14px;
  --button-font-small: 13px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100svh;
  background:
    radial-gradient(circle at top left, rgba(66, 215, 163, 0.12), transparent 26%),
    linear-gradient(160deg, #091012 0%, #111719 55%, #111312 100%);
  color: var(--text);
  font-family: "Pretendard", "Noto Sans KR", Arial, sans-serif;
  line-height: 1.5;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  min-height: var(--button-height-large);
  border: 1px solid rgba(66, 215, 163, 0.26);
  border-radius: 8px;
  background: rgba(66, 215, 163, 0.08);
  padding: 0 14px;
  color: var(--text);
  cursor: pointer;
  font-size: var(--button-font-large);
  line-height: 1.2;
}

.classroomShell {
  width: min(1380px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 20px 0 26px;
}

.classroomHeader,
.classroomNotice,
.classroomAuthCard,
.classroomCreatePanel,
.summaryCard,
.classroomListPanel,
.classroomDetailPanel,
.classroomGuidePanel {
  border: 1px solid rgba(66, 215, 163, 0.18);
  border-radius: 10px;
  background: var(--panel);
}

.classroomHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.classroomBrand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.classroomBrand img {
  width: 54px;
  height: 54px;
}

.classroomBrand p,
.summaryEyebrow {
  margin: 0 0 4px;
  color: var(--mint);
  font-size: 12px;
  font-weight: 900;
}

.classroomBrand h1,
.summaryCard strong,
.panelHead strong {
  margin: 0;
}

.classroomBrand h1 {
  font-size: 28px;
  line-height: 1.1;
}

.classroomBrand span {
  color: var(--muted);
  font-size: 13px;
}

.headerLinkButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height-large);
  border: 1px solid rgba(120, 184, 255, 0.26);
  border-radius: 8px;
  background: rgba(120, 184, 255, 0.08);
  padding: 0 14px;
  color: #d7ebff;
  font-size: var(--button-font-medium);
  font-weight: 800;
}

.textButton {
  min-height: var(--button-height-small);
  border: 1px solid rgba(159, 176, 170, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: var(--button-font-small);
  font-weight: 800;
  padding: 0 12px;
}

.classroomNotice {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 12px 16px;
}

.classroomPublicIntro {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid rgba(66, 215, 163, 0.18);
  border-radius: 10px;
  background: rgba(17, 26, 29, 0.72);
  padding: 16px;
}

.classroomPublicIntro > div > p,
.classroomPublicIntro > p {
  margin: 0;
}

.classroomPublicIntro > div > p {
  color: var(--mint);
  font-size: 12px;
  font-weight: 850;
}

.classroomPublicIntro h2 {
  margin: 4px 0 0;
  font-size: clamp(18px, 2.4vw, 24px);
}

.classroomPublicIntro > p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.classroomPublicIntro nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.classroomPublicIntro a {
  color: var(--mint);
  font-size: 13px;
  font-weight: 750;
}

.classroomCreateEntry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  border: 1px solid rgba(120, 184, 255, 0.2);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(120, 184, 255, 0.09), rgba(66, 215, 163, 0.08));
  padding: 14px 16px;
}

.classroomCenterWorkspace {
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.classroomRouteTreePanel {
  border: 1px solid rgba(66, 215, 163, 0.18);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}

.classroomRouteTree {
  --route-tree-indent: 13px;
  --route-parent-spine-x: 16px;
  --route-tree-line: rgba(61, 111, 110, 0.7);
  display: grid;
  align-content: start;
  gap: 0;
  max-height: calc(100svh - 360px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 15px 13px 18px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.classroomRouteTree::-webkit-scrollbar { display: none; }
.classroomRouteList { margin: 0; padding: 0; list-style: none; }
.classroomRouteChildren { margin: 0; padding: 0 0 0 calc(var(--route-parent-spine-x) + var(--route-tree-indent)); list-style: none; }
.classroomRouteChildren > li { position: relative; }
.classroomRouteChildren > li::before { content: ""; position: absolute; top: 15px; left: calc(-1 * var(--route-tree-indent)); width: var(--route-tree-indent); border-top: 1px solid var(--route-tree-line); }
.classroomRouteChildren > li::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: calc(-1 * var(--route-tree-indent)); border-left: 1px solid var(--route-tree-line); }
.classroomRouteChildren > li:last-child::after { bottom: auto; height: 17px; }
.classroomRouteChildren.classroomLectureTypeTree {
  display: block;
  margin-top: 0;
  border-bottom: 0;
}
.classroomRouteChildren.classroomLectureTypeTree[hidden] { display: none; }
.classroomRouteParent,
.classroomRouteChildren button {
  position: relative;
  display: block;
  width: 100%;
  min-height: var(--button-height-small);
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 4px 8px;
  color: #c3dad4;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}
.classroomRouteParent { color: #eef7f2; }
.classroomRouteParent.is-current-branch { color: #eef7f2; font-weight: 700; }
.classroomRouteChildren button.active { border-left-color: #42d7a3; color: #42d7a3; font-weight: 800; }
.classroomRouteChildren button.is-context { border-left-color: rgba(66, 215, 163, 0.28); color: #c3dad4; font-weight: 700; }
.classroomLectureTypeTree .classroomTab.active::after { content: none; }
.classroomRouteParent:hover,
.classroomRouteChildren button:hover { background: rgba(66, 215, 163, 0.08); }
.classroomRouteParent:focus-visible,
.classroomRouteChildren button:focus-visible { outline: 1px solid #75b8ff; outline-offset: -1px; }

.classroomCenterWorkspace .classroomLayout { margin-top: 0; min-height: calc(100svh - 340px); }
.classroomCenterWorkspace[data-center-section="browse"] {
  --classroom-browse-panel-height: clamp(560px, calc(100svh - 212px), 760px);
  align-items: start;
}
.classroomCenterWorkspace[data-center-section="browse"] > .classroomRouteTreePanel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: var(--classroom-browse-panel-height);
}
.classroomCenterWorkspace[data-center-section="browse"] .classroomRouteTree {
  max-height: none;
}
.classroomCenterWorkspace[data-center-section="browse"] .classroomLayout {
  height: var(--classroom-browse-panel-height);
  min-height: 0;
}
.classroomRentalHeading { display: grid; gap: 3px; }
.classroomRentalHeading > span { color: var(--blue); font-size: 11px; font-weight: 800; text-align: left; }

.classroomRentalWizardProgress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 4px; }
.classroomRentalWizardProgress span { position: relative; display: grid; gap: 5px; color: #718982; font-size: 10px; text-align: center; }
.classroomRentalWizardProgress span::before { content: ""; width: 17px; height: 17px; margin: 0 auto; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); }
.classroomRentalWizardProgress span::after { content: ""; position: absolute; top: 8px; right: 50%; left: -50%; border-top: 1px solid var(--line); z-index: -1; }
.classroomRentalWizardProgress span:first-child::after { display: none; }
.classroomRentalWizardProgress span.done::before,
.classroomRentalWizardProgress span.current::before { border-color: var(--mint); background: var(--mint); }
.classroomRentalWizardProgress span.done::after,
.classroomRentalWizardProgress span.current::after { border-color: var(--mint); }
.classroomRentalWizardProgress span.current { color: var(--mint); font-weight: 900; }

.classroomRentalWizardIntro { display: grid; gap: 3px; border-bottom: 1px solid var(--line); padding-bottom: 11px; }
.classroomRentalWizardIntro strong { font-size: 17px; }
.classroomRentalWizardIntro span { color: var(--muted); font-size: 12px; }
.classroomRentalFixedCapacity { display: grid; gap: 5px; border: 1px solid rgba(66, 215, 163, 0.25); border-left: 3px solid var(--mint); background: rgba(66, 215, 163, 0.06); padding: 13px 14px; }
.classroomRentalFixedCapacity span { color: var(--muted); font-size: 12px; }
.classroomRentalReview { display: grid; grid-template-columns: 150px minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
.classroomRentalReview dt,
.classroomRentalReview dd { margin: 0; border-bottom: 1px solid var(--line); padding: 10px 8px; font-size: 13px; }
.classroomRentalReview dt { color: var(--muted); }
.classroomRentalReview dd { font-weight: 800; }
.classroomRentalWizardActions { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 13px; }
.classroomRentalWizardActions > div { display: flex; gap: 8px; }
.classroomRentalDeferred { display: none !important; }

.classroomRentalCompletion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  border: 1px solid rgba(66, 215, 163, 0.28);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(66, 215, 163, 0.09), rgba(120, 184, 255, 0.06));
  padding: 16px;
}
.classroomRentalCompletionMark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--mint); border-radius: 50%; color: var(--mint); font-weight: 900; }
.classroomRentalCompletion strong { font-size: 17px; }
.classroomRentalCompletion p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.classroomRentalCompletionActions { display: flex; gap: 8px; }

.classroomCreateEntry strong {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
}

.classroomNotice strong {
  color: var(--amber);
  font-size: 14px;
}

.classroomNotice p,
.summaryCard p,
.classroomCard p,
.detailSection p,
.detailMeta li,
.scheduleCard p,
.materialRow p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}

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

.classroomControlGrid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.classroomCenterWorkspace > .classroomControlGrid {
  min-width: 0;
  margin-top: 0;
}

.classroomAuthCard,
.classroomCreatePanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.classroomAuthBody,
.classroomCreateForm {
  line-height: 1.45;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.classroomCreateForm,
.classroomCreatePanel {
  --classroom-create-line-height: 1.4;
}

.classroomAuthBody {
  align-content: start;
}

.authStateHero,
.authStateList,
.optionGrid,
.formSplit,
.createFooter,
.scheduleNoticeComposer,
.scheduleNoticeBlock {
  display: grid;
  gap: 10px;
}

.authStateHero {
  border: 1px solid rgba(159, 176, 170, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 14px;
}

.classroomCautionBox {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(243, 180, 75, 0.22);
  border-radius: 12px;
  background: rgba(243, 180, 75, 0.06);
  padding: 12px;
}

.classroomCautionBox strong {
  color: #ffe2a5;
  font-size: 14px;
  line-height: 1.3;
}

.classroomRentalHeading > strong {
  font-size: 18px;
  line-height: 1.3;
}

.classroomCautionList {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.classroomCautionList li {
  line-height: var(--classroom-create-line-height);
}

.authStateHero strong {
  font-size: 18px;
}

.authStateHero p,
.authStateList li,
.optionCard span,
.formField input,
.formField select,
.formField textarea,
.inlineMessage {
  color: var(--muted);
}

.authStateBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.authStateList {
  margin: 0;
  padding-left: 18px;
}

.authStateList li {
  line-height: 1.5;
}

.roleBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(159, 176, 170, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.roleBadge.guest,
.roleBadge.student {
  border-color: rgba(159, 176, 170, 0.28);
}

.roleBadge.creator {
  border-color: rgba(120, 184, 255, 0.34);
  color: #d8ecff;
}

.formField {
  display: grid;
  gap: 8px;
}

.formField input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"])),
.formField select,
.formField textarea,
.classroomLectureSearch input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(159, 176, 170, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 9px 11px;
  color: var(--text);
  font: inherit;
  line-height: 1.4;
}

.formField input[type="search"],
.classroomLectureSearch input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

.formField input::placeholder,
.formField textarea::placeholder,
.classroomLectureSearch input::placeholder {
  color: rgba(159, 176, 170, 0.82);
}

.formField textarea {
  resize: vertical;
}

.classroomCreateForm .formField span,
.classroomCreateForm .formField legend {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: var(--classroom-create-line-height);
}

.classroomCreateForm .formField {
  gap: 6px;
}

.classroomCreateForm .formField input,
.classroomCreateForm .formField select,
.classroomCreateForm .formField textarea {
  width: 100%;
  border: 1px solid rgba(159, 176, 170, 0.24);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  min-height: 34px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  font-family: "Noto Sans KR", "Pretendard", "Malgun Gothic", Arial, sans-serif;
  letter-spacing: 0;
  word-spacing: 0;
  line-height: 1.4;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.classroomCreateForm .formField input:not([type="checkbox"]):not([type="radio"]),
.classroomCreateForm .formField select {
  height: 34px;
}

.classroomCreateForm .formField input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

.classroomCreateForm .formField input::placeholder,
.classroomCreateForm .formField textarea::placeholder {
  color: rgba(159, 176, 170, 0.88);
}

.classroomCreateForm .formField textarea {
  resize: vertical;
  min-height: 108px;
  line-height: var(--classroom-create-line-height);
}

.formField input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"])):focus-visible,
.formField select:focus-visible,
.formField textarea:focus-visible,
.classroomLectureSearch input:focus-visible {
  border-color: rgba(66, 215, 163, 0.72);
  outline: 2px solid rgba(66, 215, 163, 0.2);
  outline-offset: 1px;
}

.formField input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]))[readonly],
.formField textarea[readonly],
.classroomLectureSearch input[readonly] {
  border-color: rgba(159, 176, 170, 0.2);
  background: rgba(159, 176, 170, 0.06);
  color: #c3dad4;
}

.formField input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"])):disabled,
.formField select:disabled,
.formField textarea:disabled,
.classroomLectureSearch input:disabled {
  cursor: not-allowed;
  border-color: rgba(159, 176, 170, 0.16);
  background: rgba(159, 176, 170, 0.07);
  color: rgba(195, 218, 212, 0.58);
  opacity: 1;
}

.fieldHint {
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: var(--classroom-create-line-height);
}

.computedFieldValue {
  min-height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(159, 176, 170, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  padding: 12px 13px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.readOnlyStaticValue {
  margin: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(159, 176, 170, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  padding: 0 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.composerHead,
.scheduleNoticeBlockHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.composerHead strong,
.scheduleNoticeBlockHead strong {
  font-size: 15px;
}

.composerHead span,
.scheduleNoticeBlockHead span {
  color: var(--muted);
  font-size: 12px;
}

.scheduleNoticeComposer {
  border: 1px solid rgba(159, 176, 170, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 14px;
}

.scheduleNoticeBlock {
  border: 1px solid rgba(159, 176, 170, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px;
}

.optionField {
  margin: 0;
  padding: 0;
  border: 0;
  gap: 8px;
}

.optionField legend {
  margin-bottom: 8px;
}

.classroomCreateForm > .optionField + .optionField {
  margin-top: 6px;
}

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

.optionGridCompact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.optionCard {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(159, 176, 170, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 14px;
  cursor: pointer;
}

.classroomCreateForm .optionCard {
  gap: 5px;
  border-radius: 8px;
  padding: 10px;
}

.optionCard input {
  margin: 0;
  width: 14px;
  height: 14px;
  aspect-ratio: 1 / 1;
}

.classroomCreateForm .optionCard input {
  width: 16px;
  height: 16px;
}

.optionCard strong {
  font-size: 15px;
}

.classroomCreateForm .optionCard strong {
  font-size: 14px;
  line-height: 1.4;
}

.confirmField {
  gap: 10px;
}

.confirmCheck {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(159, 176, 170, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px;
}

.confirmCheck input {
  margin: 0;
}

.confirmCheck span {
  color: var(--muted);
  line-height: 1.55;
}

.optionCard.is-disabled {
  border-color: rgba(159, 176, 170, 0.14);
  background: rgba(255, 255, 255, 0.02);
  cursor: not-allowed;
  opacity: 0.64;
}

.optionCard:has(input:checked) {
  border-color: rgba(66, 215, 163, 0.56);
  background: rgba(66, 215, 163, 0.08);
}

.optionCard.is-disabled:has(input:checked) {
  border-color: rgba(159, 176, 170, 0.2);
  background: rgba(255, 255, 255, 0.03);
}

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

.classroomPairConfig {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.classroomPairConfig > strong {
  color: var(--mint);
  font-size: 13px;
  line-height: 1.3;
}

.classroomCreateForm .inlineMessage {
  font-size: 12px;
  line-height: var(--classroom-create-line-height);
}

.inlineMessage[data-tone="warning"] {
  color: #ffd5dc;
}

.inlineMessage[data-tone="info"] {
  color: #d8ecff;
}

.submitButton {
  min-height: 42px;
  border-color: rgba(66, 215, 163, 0.36);
  background: rgba(66, 215, 163, 0.14);
  font-weight: 900;
}

.submitButton:disabled,
.optionCard input:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.submitButton:disabled {
  border-color: rgba(159, 176, 170, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

.accountWithdrawalPanel {
  display: grid;
  gap: 12px;
}

.accountWithdrawalButton {
  justify-self: start;
  border-color: rgba(232, 111, 131, 0.52);
  background: rgba(232, 111, 131, 0.08);
  color: #ffd5dc;
}

.summaryCard {
  display: grid;
  gap: 7px;
  padding: 16px;
}

.summaryCard strong {
  font-size: 18px;
  line-height: 1.3;
}

.classroomSectionTabs,
.classroomActivityRoleTabs,
.classroomTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid rgba(44, 61, 67, 0.86);
  margin-top: 12px;
}

.classroomSectionTab,
.classroomActivityRoleTab,
.classroomTab {
  position: relative;
  min-height: var(--button-height-small);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--button-font-small);
  font-weight: 900;
  padding: 0 12px;
}

.classroomSectionTab.active,
.classroomActivityRoleTab.active,
.classroomTab.active {
  border: 0;
  background: transparent;
  color: var(--mint);
}

.classroomSectionTab.active::after,
.classroomActivityRoleTab.active::after,
.classroomTab.active::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  background: var(--mint);
}

.classroomActivityRoleTab:disabled {
  color: var(--muted);
  opacity: 0.48;
}

.classroomTab.active,
.classroomCard.active {
  border-color: rgba(66, 215, 163, 0.68);
  background: rgba(66, 215, 163, 0.14);
}

.classroomTab.active {
  border: 0;
  background: transparent;
}

.classroomLayout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
  min-height: calc(100svh - 280px);
}

.classroomGuidePanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  margin-top: 14px;
  overflow: hidden;
}

.classroomGuideBody {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 18px 16px 16px;
}

.guideCard {
  display: grid;
  gap: 12px;
}

.guideCard strong {
  font-size: 15px;
}

.guideQuestion {
  color: var(--blue);
}

.guideCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.68;
}

.classroomListPanel,
.classroomDetailPanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.classroomListPanel {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.panelHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid rgba(44, 61, 67, 0.86);
  padding: 16px 18px;
}

.panelHead strong {
  line-height: 1.35;
}

.panelHead span {
  flex: 1 1 240px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.58;
  text-align: right;
}

.classroomList,
.classroomDetailCard {
  min-height: 0;
  overflow: auto;
}

.classroomList {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px 16px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

.classroomLectureSearch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(44, 61, 67, 0.86);
  padding: 10px 16px;
}

.classroomLectureSearch > span {
  color: #c3dad4;
  font-size: 13px;
  font-weight: 700;
}

.classroomLectureSearch input {
  min-width: 0;
  min-height: 32px;
  font-size: 13px;
}

.classroomPairSummary {
  display: grid;
  gap: 8px;
  border-left: 2px solid rgba(66, 215, 163, 0.45);
  padding: 4px 0 4px 13px;
}

.classroomPairSummary > strong {
  color: #eef7f2;
  font-size: 13px;
  line-height: 1.3;
}

.classroomPairSummary ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.classroomPairSummary li {
  color: var(--muted);
  font-size: 12px;
  line-height: var(--classroom-create-line-height);
}

.classroomPairSummary li span {
  margin-right: 6px;
  color: #c3dad4;
  font-weight: 800;
}

.manageClassroomTree {
  --manage-tree-indent: 14px;
  --manage-tree-line: rgba(61, 111, 110, 0.7);
  --manage-parent-spine-x: 14px;
  --manage-work-parent-spine-x: 20px;
  display: grid;
  gap: 10px;
  border-bottom: 1px solid rgba(44, 61, 67, 0.86);
  padding: 0 0 14px;
}

.manageTreeGuidance {
  margin: -3px 0 2px;
  color: #9fb0aa;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.lectureDiscoveryTree {
  gap: 8px;
  border-bottom: 0;
}

.lectureTypeBranch {
  display: grid;
  gap: 4px;
}

.lectureTreeEntries {
  display: grid;
  gap: 0;
  margin: 0;
  padding-left: var(--manage-tree-indent);
}

.lectureTreeItem {
  --manage-node-center: 27px;
  position: relative;
}

.lectureTreeItem::before {
  content: "";
  position: absolute;
  top: var(--manage-node-center);
  left: calc(-1 * var(--manage-tree-indent));
  width: var(--manage-tree-indent);
  border-top: 1px solid var(--manage-tree-line);
}

.lectureTreeItem::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(-1 * var(--manage-tree-indent));
  border-left: 1px solid var(--manage-tree-line);
}

.lectureTreeItem:first-child::after {
  top: var(--manage-node-center);
}

.lectureTreeItem:last-child::after {
  bottom: calc(100% - var(--manage-node-center));
}

.lectureDiscoveryList .lectureTreeEntries {
  gap: 0;
  padding-left: 0;
}

.lectureDiscoveryList .lectureTreeItem::before,
.lectureDiscoveryList .lectureTreeItem::after {
  content: none;
}

.lectureTreeNode {
  display: grid;
  align-content: center;
  gap: 2px;
  width: 100%;
  min-height: 54px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 5px 8px;
  color: #c3dad4;
  text-align: left;
}

.lectureTreeNode strong {
  min-width: 0;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.lectureTreeNode span,
.lectureTreeNode small {
  color: #9fb0aa;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.lectureDiscoveryList .lectureTreeNode {
  border-bottom: 1px solid rgba(143, 174, 181, 0.12);
}

.lectureDiscoveryList .lectureTreeNode[data-active="true"] {
  background: rgba(66, 215, 163, 0.035);
}

.lectureTreeNode:hover {
  background: rgba(66, 215, 163, 0.08);
}

.lectureDiscoveryList .lectureTreeNode:hover,
.lectureDiscoveryList .lectureTreeNode:focus-visible {
  border-left-color: rgba(66, 215, 163, 0.68);
  background: rgba(66, 215, 163, 0.08);
}

.lectureTreeNode:focus-visible {
  outline: 1px solid #75b8ff;
  outline-offset: -1px;
}

.lectureClassroomOrigin,
.publicLectureLocator {
  margin: 5px 0 0;
  color: #9fb0aa;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.publicLectureLocator {
  color: #cfe6ff;
  letter-spacing: 0.02em;
}

.manageTreeRoot,
.manageTreeGroup {
  display: grid;
  gap: 7px;
}

.manageTreeRoot {
  color: #f2cd82;
  font-size: 14px;
  font-weight: 800;
}

.manageTreeLabel {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.manageTypeBranch {
  --manage-type-parent-spine-x: 15.5px;
  --manage-type-parent-gap: 3px;
  gap: 0;
}

.manageTypeRootNode {
  display: flex;
  align-items: center;
  min-height: var(--button-height-small);
  padding: 0 8px;
  color: #dffaf2;
  line-height: 1.4;
}

.manageTypeList {
  display: grid;
  gap: 0;
  margin: 0;
  padding-left: calc(var(--manage-type-parent-spine-x) + var(--manage-tree-indent));
}

.manageTypeItem,
.manageClassroomBranch,
.manageWorkGroupBranch,
.manageLectureStateBranch,
.manageTreeItem,
.manageScheduleBranch {
  --manage-node-center: 14.2px;
  position: relative;
}

.manageClassroomBranch {
  --manage-node-center: 24px;
  --manage-classroom-parent-spine-x: 18px;
}
.manageTypeItem { --manage-node-center: 15px; }
.manageScheduleBranch { --manage-node-center: 14px; }

.manageTypeList > .manageTypeItem::before {
  content: "";
  position: absolute;
  top: var(--manage-node-center);
  left: calc(-1 * var(--manage-tree-indent));
  width: var(--manage-tree-indent);
  border-top: 1px solid var(--manage-tree-line);
}

.manageTypeList > .manageTypeItem::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(-1 * var(--manage-tree-indent));
  border-left: 1px solid var(--manage-tree-line);
}

.manageTypeList > .manageTypeItem:first-child::after {
  top: calc(-1 * var(--manage-type-parent-gap));
}

.manageTypeList > .manageTypeItem:last-child::after {
  bottom: calc(100% - var(--manage-node-center));
}

:where(
  .manageWorkTree > .manageWorkGroupBranch,
  .manageWorkTree > .manageLectureStateBranch,
  .manageWorkTree > .manageTreeItem,
  .manageWorkItems > .manageTreeItem,
  .manageWorkItems > .manageScheduleBranch,
  .manageLectureStateSchedules > .manageScheduleBranch,
  .manageLectureStateSchedules > .manageTreeItem,
  .manageScheduleTasks > .manageTreeItem,
  .manageLinkSlots > .manageTreeItem
)::before {
  content: "";
  position: absolute;
  top: var(--manage-node-center);
  left: calc(-1 * var(--manage-tree-indent));
  width: var(--manage-tree-indent);
  border-top: 1px solid var(--manage-tree-line);
}

:where(
  .manageWorkTree > .manageWorkGroupBranch,
  .manageWorkTree > .manageLectureStateBranch,
  .manageWorkTree > .manageTreeItem,
  .manageWorkItems > .manageTreeItem,
  .manageWorkItems > .manageScheduleBranch,
  .manageLectureStateSchedules > .manageScheduleBranch,
  .manageLectureStateSchedules > .manageTreeItem,
  .manageScheduleTasks > .manageTreeItem,
  .manageLinkSlots > .manageTreeItem
)::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(-1 * var(--manage-tree-indent));
  border-left: 1px solid var(--manage-tree-line);
}

:where(
  .manageWorkTree > .manageWorkGroupBranch,
  .manageWorkTree > .manageLectureStateBranch,
  .manageWorkTree > .manageTreeItem,
  .manageWorkItems > .manageTreeItem,
  .manageWorkItems > .manageScheduleBranch,
  .manageLectureStateSchedules > .manageScheduleBranch,
  .manageLectureStateSchedules > .manageTreeItem,
  .manageScheduleTasks > .manageTreeItem,
  .manageLinkSlots > .manageTreeItem
):first-child::after {
  top: var(--manage-node-center);
}

:where(
  .manageWorkTree > .manageWorkGroupBranch,
  .manageWorkTree > .manageLectureStateBranch,
  .manageWorkTree > .manageTreeItem,
  .manageWorkItems > .manageTreeItem,
  .manageWorkItems > .manageScheduleBranch,
  .manageLectureStateSchedules > .manageScheduleBranch,
  .manageLectureStateSchedules > .manageTreeItem,
  .manageScheduleTasks > .manageTreeItem,
  .manageLinkSlots > .manageTreeItem
):last-child::after {
  bottom: calc(100% - var(--manage-node-center));
}

.manageTypeNode,
.manageClassroomNode {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.manageTypeNode {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 6px;
  min-height: var(--button-height-small);
  border-left: 2px solid transparent;
  border-radius: 0;
  padding: 0 7px 0 9px;
}

.manageTypeNode em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.manageTypeNode em {
  min-width: 22px;
  text-align: right;
}

.manageTypeNode.is-active {
  border-left-color: var(--mint);
  background: transparent;
  color: var(--mint);
  font-weight: 800;
}

.manageTypeNode[aria-pressed="true"] {
  border-left-color: var(--mint);
  background: rgba(66, 215, 163, 0.14);
  color: var(--mint);
  font-weight: 800;
}

.manageTypeNode[aria-pressed="true"] em {
  color: #9ceacb;
}

.manageTypeNode.is-active em {
  color: var(--mint);
}

.manageTypeNode.is-context {
  border-left-color: rgba(66, 215, 163, 0.28);
  color: var(--text);
  font-weight: 700;
}

.manageTypeNode.is-context em { color: var(--muted); }

.manageTreeClassrooms {
  padding-top: 3px;
}

.manageTreePath,
.manageClassroomMeta,
.manageClassroomEmpty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.manageWorkTree {
  --manage-classroom-parent-gap: 17px;
  display: grid;
  gap: 0;
  position: relative;
  margin: 4px 0 6px;
  padding-left: calc(var(--manage-classroom-parent-spine-x) + var(--manage-tree-indent));
}

.manageClassroomBranches,
.manageWorkItems,
.manageLectureStateSchedules,
.manageScheduleTasks,
.manageLinkSlots {
  display: grid;
  gap: 0;
  margin: 0;
  padding-left: calc(var(--manage-parent-spine-x) + var(--manage-tree-indent));
}

.manageClassroomBranches {
  padding-top: 2px;
  padding-left: 0;
}

.manageLinkSlots {
  padding-left: calc(var(--manage-work-parent-spine-x) + var(--manage-tree-indent));
}

.manageWorkGroupBranch,
.manageLectureStateBranch,
.manageScheduleBranch {
  display: grid;
  gap: 2px;
}

.manageWorkGroupNode,
.manageLectureStateNode {
  display: flex;
  align-items: center;
  min-height: var(--button-height-small);
  padding: 0 8px;
  color: #dffaf2;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.manageLectureStateNode {
  color: #c3dad4;
}

.manageWorkTree > .manageWorkGroupBranch:first-child::after,
.manageWorkTree > .manageLectureStateBranch:first-child::after,
.manageWorkTree > .manageTreeItem:first-child::after {
  top: calc(-1 * var(--manage-classroom-parent-gap));
}

.manageWorkItems > .manageTreeItem:first-child::after,
.manageLectureStateSchedules > .manageScheduleBranch:first-child::after,
.manageLectureStateSchedules > .manageTreeItem:first-child::after {
  top: -6px;
}

.manageScheduleTasks > .manageTreeItem:first-child::after {
  top: -25px;
}

.manageLinkSlots > .manageTreeItem:first-child::after {
  top: -5px;
}

.manageLinkSlots .manageTreeItem {
  --manage-node-center: 8.7px;
}

.manageLinkSlots > .manageTreeItem::before {
  width: calc(var(--manage-tree-indent) - 4px);
}

.manageLectureStateEmpty {
  margin: 0 8px 5px calc(2 * var(--manage-tree-indent));
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.manageScheduleNode {
  display: grid;
  align-content: center;
  gap: 1px;
  min-height: 46px;
  color: #c3dad4;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
  padding: 3px 8px;
}

.manageScheduleNode small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.manageScheduleBranch.is-active .manageScheduleNode {
  color: #c3dad4;
}

.manageScheduleTasks {
  margin-left: 0;
  padding-left: calc(12.5px + var(--manage-tree-indent));
}

.manageLinkSlots {
  margin: 0 0 3px;
}

.manageLinkSlot {
  display: grid;
  min-height: 34px;
  gap: 1px;
  align-content: center;
}

.manageLinkSlot strong {
  font-size: 12px;
  line-height: 1.35;
}

.manageLinkSlot small,
.manageLinkSlotEmpty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.manageLinkSlot.is-linked small {
  color: #b9ddcf;
}

.manageLinkSlotEmpty {
  margin: 2px 8px 5px 14px;
}

.manageWorkNode {
  position: relative;
  min-height: var(--button-height-small);
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #c3dad4;
  font-size: var(--button-font-small);
  font-weight: 800;
  padding: 0 8px 0 14px;
  text-align: left;
}

.manageWorkNode.is-active {
  border-left-color: var(--mint);
  color: var(--mint);
}

.manageWorkNode.is-context {
  border-left-color: rgba(66, 215, 163, 0.28);
  color: #c3dad4;
}

.manageClassroomNode {
  display: grid;
  gap: 2px;
  min-height: 48px;
  align-content: center;
  border-left: 2px solid transparent;
  border-radius: 0;
  margin: 0;
  padding: 6px 10px;
}

.manageClassroomNode.active {
  border-left-color: var(--mint);
  background: transparent;
}

.manageClassroomNode.is-context {
  border-left-color: rgba(66, 215, 163, 0.28);
}

.manageClassroomTitle {
  color: #c3dad4;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.manageClassroomNode.active .manageClassroomTitle {
  color: var(--mint);
  font-weight: 800;
}

.manageClassroomNode.is-context .manageClassroomTitle {
  color: #c3dad4;
  font-weight: 700;
}

.manageTypeNode:hover,
.manageClassroomNode:hover,
.manageWorkNode:hover { background: rgba(66, 215, 163, 0.08); }

.manageTypeNode:focus-visible,
.manageClassroomNode:focus-visible,
.manageWorkNode:focus-visible {
  outline: 1px solid #75b8ff;
  outline-offset: -1px;
}

.manageClassroomEmpty {
  margin: 0 0 0 16px;
  border-left: 1px solid rgba(120, 184, 255, 0.28);
  padding: 8px 0 8px 18px;
}

.classroomCard {
  display: grid;
  align-self: start;
  gap: 12px;
  border: 1px solid rgba(159, 176, 170, 0.2);
  border-radius: 10px;
  background: var(--panel-2);
  padding: 16px 16px 17px;
  text-align: left;
}

.classroomCardHead,
.detailInlineMeta,
.detailSectionHead,
.materialRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.classroomCardHead,
.detailSectionHead {
  flex-wrap: wrap;
}

.classroomCardHead > div:first-child,
.detailSectionHead > div:first-child,
.materialRow > div:first-child {
  flex: 1 1 260px;
  min-width: 0;
}

.classroomCardHead strong {
  display: block;
  font-size: 18px;
  line-height: 1.34;
  word-break: keep-all;
}

.classroomIdentity {
  margin: 6px 0 0;
  color: #d8ecff;
  font-size: 13px;
  font-weight: 800;
}

.classroomInstructorLine {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: #cfe2dc;
  font-size: 13px;
  line-height: 1.45;
}

.classroomInstructorRole {
  color: var(--muted);
  font-weight: 600;
}

.classroomInstructorAlias {
  color: #d9ebe5;
  font-size: inherit !important;
  font-weight: 800;
}

.qrBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid rgba(243, 180, 75, 0.58);
  border-radius: 5px;
  background: rgba(243, 180, 75, 0.18);
  color: #ffe0a0;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.classroomTagRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.classroomTagChip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid rgba(120, 184, 255, 0.22);
  border-radius: 999px;
  background: rgba(120, 184, 255, 0.08);
  padding: 0 10px;
  color: #d8ecff;
  font-size: 12px;
  font-weight: 800;
}

.classroomCardHead span,
.detailSectionHead span,
.badge {
  color: var(--muted);
  font-size: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(159, 176, 170, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-weight: 900;
  white-space: nowrap;
}

.badge.type-free {
  border-color: rgba(66, 215, 163, 0.44);
  color: var(--mint);
}

.badge.type-scheduled {
  border-color: rgba(120, 184, 255, 0.44);
  color: #cfe6ff;
}

.badge.material-paid {
  border-color: rgba(232, 111, 131, 0.42);
  color: #ffd5dc;
}

.badge.material-provided {
  border-color: rgba(66, 215, 163, 0.42);
  color: #c9fff0;
}

.badge.material-none {
  border-color: rgba(159, 176, 170, 0.24);
  color: var(--muted);
}

.classroomMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.classroomMeta div,
.detailInlineMeta div {
  display: grid;
  gap: 4px;
}

.classroomMeta span,
.detailInlineMeta span {
  color: var(--muted);
  font-size: 12px;
}

.classroomMeta strong,
.detailInlineMeta strong {
  font-size: 14px;
  line-height: 1.45;
  word-break: keep-all;
}

.classroomDetailCard {
  display: grid;
  gap: 18px;
  padding: 18px 16px 16px;
}

.classroomDetailCard.is-browse-detail {
  align-content: start;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow-x: hidden;
}

.is-browse-detail .classroomBrowseDetailRoot,
.is-browse-detail .classroomBrowseDetailSections,
.is-browse-detail .classroomBrowseFlatSection,
.is-browse-detail .classroomBrowseDetailGuidance,
.is-browse-detail .classroomBrowseDetailRoot > *,
.is-browse-detail .classroomBrowseDetailSections > *,
.is-browse-detail .classroomBrowseFlatSection > * {
  min-width: 0;
  max-width: 100%;
}

.is-browse-detail .classroomBrowseDetailSections {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
}

.is-browse-detail .classroomBrowseDetailRoot {
  position: relative;
  gap: 8px;
  border-left: 2px solid #42d7a3;
  padding: 2px 0 4px 14px;
}

.is-browse-detail .classroomBrowseDetailRoot h2 {
  color: #42d7a3;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
}

.is-browse-detail .classroomBrowseDetailRoot .detailSectionHead {
  align-items: flex-start;
}

.is-browse-detail .classroomBrowseRootMeta {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  margin-left: 0;
}

.is-browse-detail .classroomBrowseRootMeta:empty {
  display: none;
}

.is-browse-detail .classroomBrowseDetailRoot .badge {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 2px 0;
}

.is-browse-detail .classroomBrowseFlatSection {
  display: grid;
  gap: 10px;
  margin: 0;
  border-top: 1px solid rgba(44, 61, 67, 0.8);
  background: transparent;
  padding: 15px 0;
}

.is-browse-detail .classroomBrowseFlatSection > .detailSectionHead {
  align-items: center;
}

.is-browse-detail .classroomBrowseFlatSection > .detailSectionHead strong {
  color: #c3dad4;
  font-size: 14px;
  font-weight: 800;
}

.is-browse-detail .classroomDetailFacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.is-browse-detail .classroomDetailFact {
  display: grid;
  gap: 3px;
}

.is-browse-detail .classroomDetailFact span {
  color: #9fb0aa;
  font-size: 12px;
  line-height: 1.45;
}

.is-browse-detail .classroomDetailFact strong {
  color: #d8ecff;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.is-browse-detail .classroomDetailAdminActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.is-browse-detail .classroomBrowseAccessSection .ticketSaleBox {
  gap: 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.is-browse-detail .classroomBrowseAccessSection .ticketSaleMeta {
  gap: 6px 14px;
}

.is-browse-detail .classroomBrowseAccessSection .ticketMetaChip {
  justify-content: flex-start;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: #9fb0aa;
  font-size: 12px;
  text-align: left;
}

.is-browse-detail .classroomBrowseAccessSection .inlineMessage {
  font-size: 13px;
  line-height: 1.6;
}

.is-browse-detail .classroomBrowseAccessSection .ticketLabel {
  display: none;
}

.is-browse-detail .classroomBrowseDetailSections > .detailSection {
  margin: 0;
  padding: 15px 0;
}

.is-browse-detail .classroomBrowseDetailGuidance {
  margin: 18px 0 0;
  border-top: 1px solid rgba(44, 61, 67, 0.8);
  padding: 14px 0 0;
}

.is-browse-detail .classroomBrowseDetailGuidance summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #9fb0aa;
  font-size: 12px;
  font-weight: 500;
}

.detailHero {
  display: grid;
  gap: 12px;
}

.detailHero h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.24;
  word-break: keep-all;
}

.detailSection {
  display: grid;
  gap: 14px;
  border-top: 1px solid rgba(44, 61, 67, 0.8);
  padding-top: 16px;
}

.detailSection:first-child {
  border-top: 0;
  padding-top: 0;
}

.detailSectionHead strong {
  font-size: 16px;
  line-height: 1.45;
}

.detailSectionHead > div:first-child {
  display: grid;
  gap: 5px;
}

.detailMeta {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.classroomPreviewChecklist {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(120, 184, 255, 0.18);
  border-radius: 12px;
  background: rgba(120, 184, 255, 0.05);
  padding: 14px;
}

.classroomPreviewChecklistItem {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(159, 176, 170, 0.14);
  padding-top: 10px;
}

.classroomPreviewChecklistActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.classroomPreviewChecklistActions .confirmCheck {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 10px;
}

.workspaceGuideCard {
  border: 1px solid rgba(120, 184, 255, 0.16);
  border-radius: 12px;
  background: rgba(120, 184, 255, 0.06);
  padding: 13px 14px;
}

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

.dashboardStatCard,
.dashboardAlertCard {
  border: 1px solid rgba(159, 176, 170, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 13px 14px;
}

.dashboardStatCard {
  display: grid;
  gap: 4px;
}

.dashboardStatCard span {
  color: var(--muted);
  font-size: 12px;
}

.dashboardStatCard strong {
  font-size: 20px;
  line-height: 1.2;
}

.dashboardStatCard p,
.dashboardAlertCard p,
.workspaceGuideCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.dashboardAlertList {
  display: grid;
  gap: 10px;
}

.dashboardAlertCard {
  display: grid;
  gap: 6px;
}

.dashboardAlertCard[data-tone="warning"] {
  border-color: rgba(243, 180, 75, 0.28);
  background: rgba(243, 180, 75, 0.08);
}

.dashboardAlertCard[data-tone="info"] {
  border-color: rgba(120, 184, 255, 0.22);
  background: rgba(120, 184, 255, 0.06);
}

.scheduleList,
.materialsList,
.aliasList,
.noticeList,
.ownedScheduleList {
  display: grid;
  gap: 10px;
}

.scheduleSettingsWorkspace {
  display: grid;
  grid-template-columns: minmax(168px, 210px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.scheduleSettingsTree {
  --step-tree-indent: 14px;
  --step-tree-line: rgba(61, 111, 110, 0.7);
  --step-node-center: 14.4px;
  --step-parent-anchor-x: 6px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.scheduleSettingsTreeBranch,
.freeOperateTreeBranch {
  display: grid;
  gap: 0;
  min-width: 0;
}

.scheduleSettingsTreeRootNode,
.freeOperateTreeRootNode {
  min-width: 0;
}

.freeOperateTreeBranch.is-numbered-root {
  --step-parent-anchor-x: 3px;
}

.scheduleSettingsTreeTitle {
  display: block;
  color: #f2cd82;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.scheduleSettingsTreeGuidance {
  margin: 0;
  color: #9fb0aa;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.scheduleSettingsTreeItems {
  position: relative;
  display: grid;
  gap: 0;
  max-height: min(520px, calc(100vh - 220px));
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 0 0 calc(var(--step-tree-indent) + var(--step-parent-anchor-x));
  cursor: default;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scheduleSettingsTreeItems::before,
.freeOperateTreeItems::before {
  content: "";
  position: absolute;
  top: 3px;
  left: var(--step-parent-anchor-x);
  height: calc(5px + var(--step-node-center));
  border-left: 1px solid var(--step-tree-line);
  pointer-events: none;
}

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

.scheduleSettingsTreeItem {
  position: relative;
}

.scheduleSettingsTreeItem::before,
.freeOperateTreeItem::before {
  content: "";
  position: absolute;
  top: var(--step-node-center);
  left: calc(-1 * var(--step-tree-indent));
  width: var(--step-tree-indent);
  border-top: 1px solid var(--step-tree-line);
}

.scheduleSettingsTreeItem::after,
.freeOperateTreeItem::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(-1 * var(--step-tree-indent));
  border-left: 1px solid var(--step-tree-line);
}

.scheduleSettingsTreeItem:first-child::after,
.freeOperateTreeItem:first-child::after {
  top: var(--step-node-center);
}

.scheduleSettingsTreeItem:last-child::after,
.freeOperateTreeItem:last-child::after {
  bottom: calc(100% - var(--step-node-center));
}

.scheduleSettingsTreeNode {
  width: 100%;
  min-height: var(--button-height-small);
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #c3dad4;
  padding: 0 8px 0 12px;
  font-size: var(--button-font-small);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

.scheduleSettingsTreeNode:hover {
  background: rgba(66, 215, 163, 0.08);
}

.scheduleSettingsTreeNode:focus-visible {
  outline: 1px solid #75b8ff;
  outline-offset: -1px;
}

.scheduleSettingsTreeNode.is-active {
  border-left-color: #42d7a3;
  background: transparent;
  color: #42d7a3;
  font-weight: 800;
}

.scheduleSettingsSurface {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.scheduleSettingsSurfaceHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  border-bottom: 1px solid rgba(61, 111, 110, 0.7);
  padding: 0 0 8px;
}

.scheduleSettingsSurfaceHead strong {
  color: #42d7a3;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.scheduleSettingsSurfaceHead span {
  min-width: 0;
  color: #9fb0aa;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  text-align: right;
  overflow-wrap: anywhere;
}

.scheduleSettingsSurface > .ownedScheduleForm {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.scheduleSettingsPanel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.scheduleSettingsPanel[hidden],
[data-schedule-settings-form-actions][hidden],
[data-schedule-settings-panel][hidden] {
  display: none;
}

[data-schedule-settings-form-actions] {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.scheduleSettingsStepActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.scheduleSettingsNextButton {
  margin-left: auto;
  border-color: rgba(66, 215, 163, 0.34);
  color: #d0fff1;
}

[data-schedule-settings-panel="operation-time"] .scheduleTimingGrid,
[data-schedule-settings-panel="operation-time"] .scheduleTimingSummary {
  grid-template-columns: minmax(0, 1fr);
}

.scheduleBreakStandaloneField {
  max-width: 320px;
}

.freeOperateWorkspace {
  display: grid;
  grid-template-columns: minmax(168px, 210px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.freeOperateWorkspace[data-free-operate-workspace="profile"] {
  grid-template-columns: minmax(156px, 180px) minmax(0, 1fr);
  width: 100%;
  max-width: 480px;
  gap: 14px;
}

.freeOperateTree {
  --step-tree-indent: 14px;
  --step-tree-line: rgba(61, 111, 110, 0.7);
  --step-node-center: 14.4px;
  --step-parent-anchor-x: 6px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.freeOperateTreeTitle {
  display: block;
  color: #f2cd82;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.freeOperateTreeItems {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  overflow-x: hidden;
  padding: 8px 0 0 calc(var(--step-tree-indent) + var(--step-parent-anchor-x));
  cursor: default;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

.freeOperateTreeItem {
  position: relative;
}

.freeOperateTreeNode {
  width: 100%;
  min-height: var(--button-height-small);
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #c3dad4;
  padding: 0 8px 0 12px;
  font-size: var(--button-font-small);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

.freeOperateTreeNode:hover {
  background: rgba(66, 215, 163, 0.08);
}

.freeOperateTreeNode:focus-visible {
  outline: 1px solid #75b8ff;
  outline-offset: -1px;
}

.freeOperateTreeNode.is-active {
  border-left-color: #42d7a3;
  background: transparent;
  color: #42d7a3;
  font-weight: 800;
}

.freeOperateSurface {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.freeOperateSurfaceHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  border-bottom: 1px solid rgba(61, 111, 110, 0.7);
  padding: 0 0 8px;
}

.freeOperateSurfaceHead strong {
  color: #42d7a3;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.freeOperateSurfaceHead span {
  min-width: 0;
  color: #9fb0aa;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  text-align: right;
  overflow-wrap: anywhere;
}

.freeOperateSurface > .ownedClassroomProfileForm,
.freeOperateSurface > .ownedScheduleForm {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.freeOperatePanel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.freeOperatePanel[hidden],
[data-free-operate-panel][hidden] {
  display: none;
}

@media (max-width: 720px) {
  .is-browse-detail .classroomDetailFacts {
    grid-template-columns: minmax(0, 1fr);
  }

  .scheduleSettingsWorkspace,
  .freeOperateWorkspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .freeOperateWorkspace[data-free-operate-workspace="profile"] {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    gap: 12px;
  }

  .scheduleSettingsTree,
  .freeOperateTree {
    gap: 6px;
  }

  .scheduleSettingsTree .horizontalScrollShell,
  .freeOperateTree .horizontalScrollShell {
    min-width: 0;
  }

  .scheduleSettingsTreeItems,
  .freeOperateTreeItems {
    display: flex;
    flex-wrap: nowrap;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 2px;
    cursor: grab;
    touch-action: pan-x;
  }

  .scheduleSettingsTreeItems.dragging,
  .freeOperateTreeItems.dragging {
    cursor: grabbing;
  }

  .scheduleSettingsTreeItem,
  .freeOperateTreeItem {
    flex: 0 0 auto;
  }

  .scheduleSettingsTreeItem::before,
  .scheduleSettingsTreeItem::after,
  .scheduleSettingsTreeItems::before,
  .freeOperateTreeItem::before,
  .freeOperateTreeItem::after,
  .freeOperateTreeItems::before {
    content: none;
  }

  .scheduleSettingsTreeNode,
  .freeOperateTreeNode {
    width: auto;
    min-width: max-content;
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 0 10px;
    text-align: center;
    white-space: nowrap;
  }

  .scheduleSettingsTreeNode.is-active,
  .freeOperateTreeNode.is-active {
    border-bottom-color: #42d7a3;
  }

  .scheduleSettingsSurfaceHead,
  .freeOperateSurfaceHead {
    align-items: flex-start;
    flex-direction: column;
  }

  .scheduleSettingsSurfaceHead span,
  .freeOperateSurfaceHead span {
    text-align: left;
  }
}

.ownedLectureStateGroups {
  display: grid;
  gap: 14px;
}

.ownedLectureStateGroup {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(133, 167, 166, 0.24);
  border-radius: 14px;
  background: rgba(8, 25, 30, 0.38);
}

.ownedLectureStateList {
  display: grid;
  gap: 8px;
}

.ownedLectureStateList > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.ownedLectureStateRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.ownedLectureStateRow > button:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(133, 167, 166, 0.2);
  border-radius: 10px;
  color: var(--text);
  background: rgba(7, 20, 25, 0.5);
  text-align: left;
  cursor: pointer;
}

.ownedLectureStateRow > button:first-child span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ownedLectureStateRow > button:first-child small {
  color: var(--muted);
}

.ownedLectureStateRow.is-active > button:first-child {
  border-color: rgba(66, 215, 163, 0.72);
  background: rgba(66, 215, 163, 0.1);
}

.ownedLectureStateRow.is-active .freeLectureSelectionInfo {
  border-color: rgba(66, 215, 163, 0.72);
  background: rgba(66, 215, 163, 0.1);
}

@media (max-width: 720px) {
  .ownedLectureStateRow {
    grid-template-columns: minmax(0, 1fr);
  }

  .ownedLectureStateRow > button:first-child {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ownedLectureStateRow > button:first-child small {
    grid-column: 1 / -1;
  }
}

.scheduleCard,
.materialRow,
.noticeCard,
.ownedScheduleCard,
.ownedScheduleEmpty,
.ownedScheduleForm {
  border: 1px solid rgba(159, 176, 170, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 15px 16px;
}

.scheduleCard strong,
.materialRow strong,
.noticeCard strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 1.4;
  word-break: keep-all;
}

.scheduleSubject {
  color: #d8ecff;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}

.lectureIdentityHierarchy {
  --lecture-identity-anchor-x: 5.5px;
  --lecture-identity-child-label-x: 26px;
  display: grid;
  gap: 10px;
}

.lectureIdentityField {
  position: relative;
  display: grid;
  grid-template-columns: minmax(112px, 0.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.lectureIdentityField > span {
  line-height: 1.4;
}

.lectureIdentityFieldParent::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(50% + 9px);
  bottom: -11px;
  left: var(--lecture-identity-anchor-x);
  border-left: 1px solid rgba(61, 111, 110, 0.7);
  pointer-events: none;
}

.lectureIdentityFieldChild::before,
.lectureIdentityFieldChild::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--lecture-identity-anchor-x);
  pointer-events: none;
}

.lectureIdentityFieldChild::before {
  top: -11px;
  height: calc(50% + 11px);
  border-left: 1px solid rgba(61, 111, 110, 0.7);
}

.lectureIdentityFieldChild::after {
  top: calc(50% - 0.6px);
  width: calc(var(--lecture-identity-child-label-x) - var(--lecture-identity-anchor-x) - 6px);
  border-top: 1px solid rgba(61, 111, 110, 0.7);
}

.lectureIdentityFieldChild > span {
  padding-left: var(--lecture-identity-child-label-x);
}

.lectureIdentitySummary {
  --lecture-identity-anchor-x: 5.5px;
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.lectureIdentitySummaryParent,
.lectureIdentitySummaryChild {
  position: relative;
  margin: 0;
  line-height: 1.4;
}

.lectureIdentitySummaryParent {
  color: #d8ecff;
  font-size: 13px;
  font-weight: 800;
}

.lectureIdentitySummary.has-parent .lectureIdentitySummaryParent::after {
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  bottom: -16px;
  left: var(--lecture-identity-anchor-x);
  border-left: 1px solid rgba(61, 111, 110, 0.7);
  pointer-events: none;
}

.lectureIdentitySummaryChild {
  padding-left: 26px;
}

.lectureIdentitySummary.has-parent .lectureIdentitySummaryChild::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.6px);
  left: var(--lecture-identity-anchor-x);
  width: 13.5px;
  border-top: 1px solid rgba(61, 111, 110, 0.7);
  pointer-events: none;
}

.scheduleCard .lectureIdentitySummaryChild {
  margin-bottom: 0;
}

.scheduleTimeMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.scheduleTimeMeta div {
  display: grid;
  gap: 4px;
}

.scheduleTimeMeta span {
  color: var(--muted);
  font-size: 12px;
}

.scheduleTimeMeta strong {
  margin-bottom: 0;
  font-size: 14px;
}

.noticeCard {
  display: grid;
  gap: 10px;
}

.ownedScheduleCard,
.ownedScheduleEmpty,
.ownedScheduleForm {
  display: grid;
  gap: 16px;
  align-content: start;
}

.ownedScheduleForm {
  position: relative;
  z-index: 30;
  isolation: isolate;
}

.ownedScheduleBoardSection {
  position: relative;
  z-index: 20;
  isolation: isolate;
}

body.entryWindowMode {
  background:
    radial-gradient(circle at top left, rgba(120, 184, 255, 0.14), transparent 28%),
    linear-gradient(160deg, #071013 0%, #101719 52%, #0e1213 100%);
}

.entryWindowShell {
  display: grid;
  gap: 12px;
}

.entryWindowHeader,
.entryWindowCard {
  border: 1px solid rgba(120, 184, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.entryWindowHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
}

.entryWindowTitleBlock {
  display: block;
}

.entryWindowTitleBlock p,
.entryWindowTitleBlock span,
.entryWindowMetaLine,
.entryWindowPlaybackTime,
.entryWindowRuleList,
.entryWindowMaterialRow p {
  margin: 0;
  color: var(--muted);
}

.entryWindowTitleBlock p {
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.entryWindowTitleBlock h1 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.18;
}

.entryWindowActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.entryWindowCard strong,
.entryWindowCardHead strong,
.entryWindowMaterialRow strong {
  display: block;
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  word-break: keep-all;
}

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

.entryWindowPlayerStage {
  min-height: 520px;
  border: 1px solid rgba(120, 184, 255, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at top, rgba(120, 184, 255, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(12, 19, 25, 0.98), rgba(8, 13, 18, 0.98));
  padding: 14px;
}

.entryWindowPlayerStageEmpty {
  min-height: 340px;
}

.entryWindowStageSurface {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    radial-gradient(circle at center, rgba(120, 184, 255, 0.08), transparent 45%);
  padding: 16px 18px;
}

.entryWindowStageTop,
.entryWindowStageBadgeRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.entryWindowStageBadgeRow {
  justify-content: flex-start;
}

.entryWindowStageCenter {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 30px 18px;
}

.entryWindowStageEyebrow {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.entryWindowStageCenter strong {
  display: block;
  margin: 0;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.2;
  word-break: keep-all;
}

.entryWindowStageCenter p,
.entryWindowPlaybackRail,
.entryWindowPlaybackClock {
  margin: 0;
  color: var(--muted);
}

.entryWindowAudioPlayer,
.entryWindowMediaPlayer {
  width: min(620px, 100%);
  margin-top: 4px;
}

.entryWindowAudioPlaceholder {
  display: grid;
  gap: 6px;
  width: min(620px, 100%);
  border: 1px solid rgba(159, 176, 170, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  padding: 16px 18px;
}

.entryWindowAudioPlaceholder strong {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.entryWindowAudioPlaceholder p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.entryWindowBundlePlayer {
  display: grid;
  gap: 12px;
  width: min(1240px, 100%);
  justify-self: stretch;
  text-align: left;
}

.entryWindowBundlePlayButton {
  justify-self: center;
}

.entryWindowBundleAudioControls {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(760px, 100%);
  justify-self: center;
}

.entryWindowBundleAudioControls.is-free {
  grid-template-columns: repeat(3, auto) minmax(120px, 1fr);
}

.entryWindowBundleAudioControls .entryWindowBundlePlayButton {
  justify-self: auto;
}

.entryWindowBundleAudioControls input[type="range"] {
  width: 100%;
  min-width: 0;
}

.entryWindowBundleAudioControls span {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.entryWindowBundleViewport {
  position: relative;
  isolation: isolate;
  height: clamp(320px, 68svh, 720px);
  width: 100%;
  border: 1px solid rgba(120, 184, 255, 0.16);
  border-radius: 14px;
  background: rgba(6, 12, 16, 0.92);
  overflow: hidden;
  scrollbar-width: none;
}

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

.entryWindowBundleViewport:fullscreen {
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
}

.entryWindowBundleContent {
  position: relative;
  min-width: 1px;
  min-height: 1px;
  margin-right: auto;
  margin-left: auto;
}

.entryWindowBundleStage {
  position: relative;
  z-index: 1;
  min-height: 420px;
  padding: clamp(18px, 4vw, 56px);
  display: grid;
  align-content: start;
  justify-items: stretch;
}

.entryWindowBundleCanvas,
.entryWindowBundleLaserCanvas {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.entryWindowBundleLaserCanvas {
  z-index: 6;
}

.entryWindowBundleToolIndicator {
  position: absolute;
  z-index: 7;
  width: 32px;
  height: 32px;
  pointer-events: none;
  user-select: none;
  transform: translate(-7px, -7px);
  transition: opacity 140ms ease-out;
}

.entryWindowBundleControls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.entryWindowBundleCounter {
  min-width: 86px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.entryWindowBundleSlide {
  display: grid;
  gap: 24px;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.entryWindowBundleSlide-note {
  width: min(680px, 100%);
}

/* 녹화실/강의보기의 note presentation 레이아웃을 그대로 사용한다.
   강의실만 본문 간격이나 note-surface 높이가 달라지면, QR 블록과 필기
   좌표가 서로 다른 사각형을 기준으로 계산된다. */
.entryWindowBundleStage .presentationSlide {
  position: relative;
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 24px;
  font-size: 1rem;
}

.entryWindowBundleStage .presentationNoteInkSurface {
  position: relative;
  z-index: 1;
  min-height: max(420px, 68vh);
  display: grid;
  align-content: start;
}

.entryWindowBundleStage .presentationNoteInkSurface > .notePageInkTarget {
  margin-right: auto;
  margin-left: auto;
}

.entryWindowBundleStage .presentationCardInkTarget,
.entryWindowBundleStage .presentationChoiceInkTarget {
  display: grid;
  gap: 24px;
}

.entryWindowBundleStage .flashcardFace {
  border: 1px solid rgba(66, 215, 163, 0.26);
  border-radius: 12px;
  background: rgba(14, 27, 30, 0.96);
  padding: 24px;
}

.entryWindowBundleStage .flashcardBack {
  border-style: dashed;
  background: rgba(66, 215, 163, 0.08);
}

.entryWindowBundleStage .flashcardFaceLabel,
.entryWindowBundleStage .flashcardMemo strong {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--amber);
  font-size: 13px;
  font-weight: 800;
}

.entryWindowBundleStage .flashcardFaceBody {
  color: var(--text);
  font-size: 20px;
  line-height: 1.45;
}

.entryWindowBundleStage .flashcardMemo {
  border: 1px solid rgba(243, 180, 75, 0.22);
  border-radius: 10px;
  background: rgba(243, 180, 75, 0.08);
  padding: 14px 16px;
  color: #cbeede;
  font-size: 14px;
  line-height: 1.6;
}

.entryWindowBundleStage .presentationChoiceInkTarget > .questionText,
.entryWindowBundleStage .presentationChoiceInkTarget > .presentationQuestion {
  max-width: 1040px;
  font-size: 18px;
  line-height: 1.35;
}

.entryWindowBundleStage .presentationChoiceInkTarget > .choices,
.entryWindowBundleStage .presentationChoices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.entryWindowBundleStage .presentationChoice {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  min-height: 88px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(17, 26, 29, 0.78);
  padding: 18px;
  font-size: 15px;
  line-height: 1.45;
}

.entryWindowBundleStage .presentationChoice > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(117, 184, 255, 0.18);
  color: #d9ecff;
  font-weight: 900;
}

.entryWindowBundleStage .presentationChoice.correct {
  border-color: var(--mint);
  background: rgba(66, 215, 163, 0.18);
}

.entryWindowBundleMeta {
  margin: 0;
  color: var(--amber);
  font-weight: 900;
}

.entryWindowBundleNoteBody,
.entryWindowBundleQuestion,
.entryWindowBundleAnswer,
.entryWindowBundleExplain {
  display: grid;
  gap: 12px;
}

.entryWindowBundleNoteBody {
  font-size: inherit;
  line-height: inherit;
}

.entryWindowBundleQuestion {
  font-size: inherit;
  line-height: inherit;
}

.entryWindowBundleAnswer,
.entryWindowBundleExplain {
  font-size: inherit;
  line-height: inherit;
}

.entryWindowBundleExplain {
  font-size: inherit;
}

.entryWindowBundleNoteBody p,
.entryWindowBundleQuestion p,
.entryWindowBundleAnswer p,
.entryWindowBundleExplain p,
.entryWindowBundleBlockText p {
  margin: 0;
}

.entryWindowBundleImageBoard {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.entryWindowBundleImageFrame,
.entryWindowBundleBlockImage {
  margin: 0;
  width: min(100%, 320px);
}

.entryWindowBundleImageFrame img,
.entryWindowBundleBlockImage img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(159, 176, 170, 0.16);
}

.entryWindowBundleEmpty {
  display: grid;
  place-items: center;
  min-height: 320px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

.entryWindowBundleStage .notePage,
.entryWindowBundleStage .notePageInkTarget,
.entryWindowBundleStage .presentationNoteBody {
  width: 100%;
}

.entryWindowBundleStage .notePage {
  position: relative;
  display: grid;
  gap: 10px;
  background: transparent;
  padding: 2px 0 10px;
}

.entryWindowBundleStage .notePageInkTarget {
  position: relative;
  display: grid;
  gap: 10px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.entryWindowBundleStage .notePageInkTarget > * {
  min-width: 0;
}

.entryWindowBundleStage .notePageInkTarget p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.entryWindowBundleStage .entryWindowLectureNotePage {
  width: 100%;
  padding: 2px 0 10px;
  margin: 0;
}

.entryWindowBundleStage .entryWindowQrNoteBody {
  position: relative;
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: left;
}

.entryWindowBundleStage .notePage,
.entryWindowBundleStage .notePageInkTarget,
.entryWindowBundleStage .notePageInkTarget > *,
.entryWindowBundleStage .notePageInkTarget p,
.entryWindowBundleStage .notePageInkTarget li,
.entryWindowBundleStage .notePageInkTarget dd,
.entryWindowBundleStage .notePageInkTarget .lessonBlocks,
.entryWindowBundleStage .notePageInkTarget .lessonBlockText,
.entryWindowBundleStage .presentationNoteBody,
.entryWindowBundleStage .presentationNoteBody p,
.entryWindowBundleStage .presentationNoteBody li,
.entryWindowBundleStage .presentationNoteBody dd {
  color: inherit;
}

.entryWindowStageCenter > .entryWindowBundlePlayer,
.entryWindowStageCenter > [data-entry-window-bundle-playback] {
  width: 100%;
  justify-self: stretch;
  text-align: left;
}

.entryWindowBundleStage .presentationNoteBody {
  font-size: clamp(1.25rem, 2.65vw, 2.1rem);
  line-height: 1.62;
  text-align: left;
}

.entryWindowBundleStage[data-lecture-renderer-version="3"] .presentationSlide {
  gap: var(--lecture-slide-gap, 24px);
  font-size: var(--lecture-root-px, 16px);
}

.entryWindowBundleStage[data-lecture-renderer-version="3"] .presentationNoteBody {
  font-size: var(--lecture-note-fallback-px, 20px);
}

.entryWindowBundleStage[data-lecture-renderer-version="3"] .presentationNoteInkSurface {
  min-height: max(420px, calc(var(--lecture-screen-height, 650px) * 0.68));
}

.entryWindowBundleStage[data-lecture-renderer-version="3"] .presentationChoiceInkTarget > .questionText,
.entryWindowBundleStage[data-lecture-renderer-version="3"] .presentationChoiceInkTarget > .presentationQuestion,
.entryWindowBundleStage[data-lecture-renderer-version="3"] .presentationChoiceQuestion {
  font-size: var(--lecture-question-px, 24px);
  line-height: 1.25;
}

.entryWindowBundleStage[data-lecture-renderer-version="3"] .presentationChoiceInkTarget > .choices,
.entryWindowBundleStage[data-lecture-renderer-version="3"] .presentationChoices,
.entryWindowBundleStage[data-lecture-renderer-version="3"] .presentationChoiceList {
  grid-template-columns: repeat(var(--lecture-choice-columns, 2), minmax(0, 1fr)) !important;
}

.entryWindowBundleStage[data-lecture-renderer-version="3"] .presentationChoice {
  font-size: var(--lecture-choice-px, 18px);
}

.entryWindowBundleStage[data-lecture-renderer-version="3"] .presentationChoiceInkTarget > .explain,
.entryWindowBundleStage[data-lecture-renderer-version="3"] .presentationChoiceExplain {
  font-size: var(--lecture-explain-px, 16px);
}

.entryWindowBundleStage[data-lecture-renderer-version="3"] .flashcardFaceBody {
  font-size: var(--lecture-card-body-px, 20px);
}

.entryWindowBundleStage[data-lecture-renderer-version="3"] .flashcardFace {
  border-radius: 8px;
  padding: 18px;
}

.entryWindowBundleStage[data-lecture-renderer-version="3"] .flashcardMemo {
  font-size: var(--lecture-card-memo-px, 14px);
  line-height: 1.55;
}

.entryWindowBundleStage[data-lecture-renderer-version="3"] .flashcardFaceLabel,
.entryWindowBundleStage[data-lecture-renderer-version="3"] .flashcardMemo strong {
  font-size: var(--lecture-card-label-px, 13px);
  font-weight: 700;
}

.entryWindowBundleStage[data-lecture-renderer-version="3"][data-lecture-layout="compact"] .noteImageBoard {
  display: grid;
  gap: 12px;
}

.entryWindowBundleStage[data-lecture-renderer-version="3"][data-lecture-layout="compact"] .noteImageItem {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 12px 0 0 !important;
}

.entryWindowBundleStage[data-lecture-renderer-version="3"][data-lecture-layout="compact"] .noteImageItem img,
.entryWindowBundleStage[data-lecture-renderer-version="3"][data-lecture-layout="compact"] .noteImageFrame img {
  display: block;
  width: 100%;
}

.entryWindowBundleStage .lessonBlocks,
.entryWindowBundleStage .questionBodyBlocks {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  font-size: 0.72em;
}

.entryWindowBundleStage .noteCallout,
.entryWindowBundleStage .formulaExampleBlock {
  display: grid;
  gap: 8px;
  break-inside: avoid;
  border-left: 3px solid rgba(66, 215, 163, 0.72);
  padding: 4px 0 4px 16px;
}

.entryWindowBundleStage .noteCallout strong {
  color: var(--mint);
  font-size: 13px;
}

.entryWindowBundleStage .noteCallout ol {
  list-style-position: inside;
  padding-left: 0;
}

.entryWindowBundleStage .noteCallout li {
  margin: 3px 0;
  padding-left: 0;
}

.entryWindowBundleStage .noteCallout dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px 12px;
  margin: 0;
}

.entryWindowBundleStage .noteCallout dt {
  color: #ffd38c;
  font-weight: 900;
}

.entryWindowBundleStage .noteCallout dd {
  margin: 0;
}

.entryWindowBundleStage .noteCallout-주의,
.entryWindowBundleStage .noteCallout-오답 {
  border-left-color: rgba(255, 122, 151, 0.78);
}

.entryWindowBundleStage .noteCallout-주의 strong,
.entryWindowBundleStage .noteCallout-오답 strong {
  color: #ff9eb5;
}

.entryWindowBundleStage .noteCallout-암기,
.entryWindowBundleStage .noteCallout-풀이,
.entryWindowBundleStage .noteCallout-steps,
.entryWindowBundleStage .noteCallout-summary {
  border-left-color: rgba(245, 174, 74, 0.76);
}

.entryWindowBundleStage .noteCallout-암기 strong,
.entryWindowBundleStage .noteCallout-풀이 strong,
.entryWindowBundleStage .noteCallout-steps strong,
.entryWindowBundleStage .noteCallout-summary strong {
  color: var(--amber);
}

.entryWindowBundleStage .noteCallout-definition {
  border-left-color: rgba(159, 208, 255, 0.78);
}

.entryWindowBundleStage .noteCallout-definition strong {
  color: #9fd0ff;
}

.entryWindowBundleStage .noteCallout-warning {
  border-left-color: rgba(255, 122, 151, 0.78);
}

.entryWindowBundleStage .noteCallout-warning strong {
  color: #ff9eb5;
}

.entryWindowBundleStage .noteCallout-example {
  border-left-color: rgba(127, 240, 197, 0.78);
}

.entryWindowBundleStage .noteCallout-example strong {
  color: #7ff0c5;
}

.entryWindowBundleStage .noteCallout-compare {
  border-left-color: rgba(245, 174, 74, 0.76);
}

.entryWindowBundleStage .noteCallout-compare strong {
  color: var(--amber);
}

.entryWindowBundleStage .noteCallout-compare .noteTable {
  margin: 0;
}

.entryWindowBundleStage .styleRule-key {
  color: #ffd38c;
  font-weight: 900;
  border-bottom: 2px solid rgba(245, 174, 74, 0.55);
  padding-bottom: 1px;
}

.entryWindowBundleStage .styleRule-bold {
  font-weight: 900;
}

.entryWindowBundleStage .styleRule-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.entryWindowBundleStage .styleRule-blue {
  color: #9fd0ff;
}

.entryWindowBundleStage .styleRule-mint {
  color: #7ff0c5;
}

.entryWindowBundleStage .styleRule-amber {
  color: #ffd38c;
}

.entryWindowBundleStage .noteTable {
  width: 100%;
  border-collapse: collapse;
  break-inside: avoid;
  overflow-wrap: anywhere;
  font-size: 0.95em;
}

.entryWindowBundleStage .noteTable th,
.entryWindowBundleStage .noteTable td {
  border: 1px solid rgba(159, 176, 170, 0.28);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.entryWindowBundleStage .noteTable th {
  background: rgba(66, 215, 163, 0.12);
  color: var(--mint);
}

.entryWindowBundleStage hr {
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(159, 176, 170, 0.28);
  margin: 8px 0;
}

.entryWindowBundleStage .noteImageBoard {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  margin-top: 10px;
  border: 0;
  background: transparent;
}

.entryWindowBundleStage .noteImageBoard .noteImageItem {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: default;
  user-select: none;
}

.entryWindowBundleStage .noteImageBoard .noteImageItem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.entryWindowBundleStage .noteImageFrame {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: inline-block;
  margin: 12px 12px 0 0;
  vertical-align: top;
}

.entryWindowBundleStage .noteImageFrame img {
  display: block;
  width: 100%;
  height: auto;
}

.entryWindowBundleStage [data-font="default"],
.entryWindowBundleStage [data-font="sans"] {
  font-family: "Noto Sans KR", Arial, sans-serif;
}

.entryWindowBundleStage [data-font="pretendard"] {
  font-family: Pretendard, "Noto Sans KR", Arial, sans-serif;
}

.entryWindowBundleStage [data-font="nanum-gothic"] {
  font-family: "Nanum Gothic", "Noto Sans KR", Arial, sans-serif;
}

.entryWindowBundleStage [data-font="serif"] {
  font-family: "Noto Serif KR", Batang, "Times New Roman", serif;
}

.entryWindowBundleStage [data-font="gowun-batang"] {
  font-family: "Gowun Batang", "Noto Serif KR", Batang, serif;
}

.entryWindowBundleStage [data-font="round"] {
  font-family: "Malgun Gothic", "Noto Sans KR", Arial, sans-serif;
  letter-spacing: 0;
}

.entryWindowPlaybackHint {
  margin: 0;
  color: #d7ebff;
  font-size: 13px;
  line-height: 1.55;
}

.entryWindowStageFoot {
  display: grid;
  gap: 10px;
}

.entryWindowPlaybackRail {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.entryWindowPlaybackDot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--mint);
  box-shadow: 0 0 0 6px rgba(66, 215, 163, 0.12);
}

.entryWindowPlaybackLine {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(66, 215, 163, 0.82), rgba(120, 184, 255, 0.32));
}

.entryWindowPlayerSidebar {
  display: grid;
  align-content: start;
}

.entryWindowCard {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
}

.entryWindowCardMuted {
  border-color: rgba(159, 176, 170, 0.2);
}

.entryWindowCardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.entryWindowCardHead span {
  color: var(--muted);
  font-size: 12px;
}

.entryWindowPlaybackTime {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

.entryWindowCurrentTime {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}

.entryWindowCurrentTime strong {
  color: var(--text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.entryWindowScheduleList {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.entryWindowScheduleListRow {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(159, 176, 170, 0.16);
}

.entryWindowScheduleListTime {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.entryWindowScheduleListTitle {
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.entryWindowMaterialList {
  display: grid;
  gap: 10px;
}

.entryWindowMaterialRow {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(159, 176, 170, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 13px;
}

.entryWindowRuleList {
  padding-left: 18px;
  line-height: 1.7;
}

.entryWindowRoomRuleCard {
  margin-top: 2px;
}

@media (max-width: 980px) {
  body.entryWindowMode .classroomShell {
    width: calc(100% - 8px);
    padding-top: 4px;
  }

  .entryWindowPlayerSection {
    grid-template-columns: minmax(0, 1fr);
  }

  .entryWindowPlayerStage {
    min-height: 380px;
    padding: 4px;
  }

  .entryWindowStageSurface {
    padding-right: 4px;
    padding-left: 4px;
  }

  .entryWindowStageCenter {
    padding-right: 0;
    padding-left: 0;
  }

  .entryWindowGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .entryWindowBundleChoices {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ownedScheduleForm .formSplit,
.ownedScheduleForm .formField,
.ownedScheduleForm input,
.ownedScheduleForm select,
.ownedScheduleForm textarea,
.ownedScheduleForm button {
  position: relative;
  z-index: 40;
}

.ownedClassroomProfileForm {
  display: grid;
  gap: 18px;
}

.ownedClassroomProfileForm .formField {
  gap: 10px;
}

.ownedClassroomProfileForm textarea {
  line-height: 1.7;
}

.ownedClassroomProfileForm .ownedScheduleFormActions {
  padding-top: 4px;
}

.ownedClassroomProfileForm .inlineMessage {
  margin-top: -2px;
}

.classroomTimezoneGuide {
  display: grid;
  gap: 10px;
  margin-top: -8px;
  border: 1px solid rgba(120, 184, 255, 0.24);
  border-radius: 12px;
  background: rgba(120, 184, 255, 0.06);
  padding: 13px;
}

.classroomTimezoneGuide[hidden] {
  display: none;
}

.classroomTimezoneGuideHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.classroomTimezoneGuideHead strong {
  color: #eef8ff;
  font-size: 14px;
}

.classroomTimezoneGuideHead span,
.classroomTimezoneGuide p,
.classroomTimezoneDirectHint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.classroomTimezoneGuide p {
  margin: 0;
}

.classroomTimezoneGuide p strong {
  color: #d8ecff;
}

.classroomTimezoneBrowser {
  border-left: 2px solid rgba(66, 215, 163, 0.45);
  padding-left: 9px;
}

.classroomTimezoneChoices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.classroomTimezoneChoice {
  display: grid;
  min-width: 0;
  gap: 3px;
  border: 1px solid rgba(159, 176, 170, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  padding: 9px 10px;
  text-align: left;
}

.classroomTimezoneChoice strong,
.classroomTimezoneChoice small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.classroomTimezoneChoice strong {
  color: #d8ecff;
  font-size: 13px;
}

.classroomTimezoneChoice small {
  color: var(--muted);
  font-size: 11px;
}

.classroomTimezoneChoice:hover {
  background: rgba(66, 215, 163, 0.08);
}

.classroomTimezoneChoice.is-active {
  border-color: rgba(66, 215, 163, 0.62);
  background: rgba(66, 215, 163, 0.12);
}

.classroomTimezoneChoice.is-active strong {
  color: var(--mint);
}

.classroomTimezoneChoice:focus-visible {
  outline: 2px solid #75b8ff;
  outline-offset: 1px;
}

.freeLectureEditorIdentity {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(66, 215, 163, 0.3);
}

.freeLectureEditorIdentity strong {
  color: #d8ecff;
  font-size: 14px;
}

.freeLectureAutomaticState {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.freeLectureAutomaticState strong {
  color: var(--mint);
  font-size: 13px;
}

.freeLectureTimeFields {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.freeLectureTimeFields > .formField,
.freeLectureTimeFields input[type="datetime-local"] {
  width: 100%;
  min-width: 0;
}

.freeLectureSelectionActions {
  display: flex;
  justify-content: flex-end;
}

.freeLectureSelectionInfo {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(133, 167, 166, 0.2);
  border-radius: 10px;
  background: rgba(7, 20, 25, 0.5);
}

.freeLectureSelectionInfo small {
  color: var(--muted);
}

@media (max-width: 640px) {
  .classroomTimezoneChoices {
    grid-template-columns: minmax(0, 1fr);
  }
}

.scheduleEditorContext {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(120, 184, 255, 0.24);
  border-radius: 10px;
  background: rgba(120, 184, 255, 0.08);
  padding: 14px 15px;
}

.scheduleEditorContext strong {
  color: #d8ecff;
  font-size: 15px;
  line-height: 1.4;
}

.scheduleEditorContext p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.scheduleTimingGrid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.scheduleMealGrid {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(159, 176, 170, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 14px;
}

.scheduleMealToggleField .confirmCheck {
  min-height: 44px;
}

.scheduleTimingSummary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 12px;
  align-items: end;
}

.scheduleTimeField input[type="time"] {
  min-height: 48px;
}

.scheduleBreakField input[type="number"] {
  min-height: 48px;
  text-align: center;
}

.scheduleWeekdayField {
  min-width: 0;
}

.weekdayOptionGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.weekdayOption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  border: 1px solid rgba(159, 176, 170, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 0 10px;
  cursor: pointer;
}

.weekdayOption input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #78b8ff;
}

.weekdayOption span {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.weekdayOption:has(input:checked) {
  border-color: rgba(66, 215, 163, 0.48);
  background: rgba(66, 215, 163, 0.12);
}

.ownedScheduleInlineEditor,
.ownedScheduleLinkSummary {
  display: grid;
  gap: 10px;
}

[data-schedule-view="settings"] .connectBoardSection,
[data-schedule-view="settings"] .ownedScheduleLinkSummary,
[data-schedule-view="settings"] .scheduleTimelineBoard {
  display: none;
}

[data-link-view="recording"] #ownedMaterialLinkForm,
[data-link-view="material"] #ownedRecordingLinkForm {
  display: none;
}

[data-link-view="recording"] .recordingScheduleMeta,
[data-link-view="recording"] .recordingLinkHistory,
[data-link-view="material"] .materialLinkHistory {
  display: none;
}

.creatorWorkspaceTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid rgba(44, 61, 67, 0.86);
}

.creatorWorkspaceTab {
  position: relative;
  min-height: var(--button-height-small);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--button-font-small);
  font-weight: 800;
  padding: 0 12px;
}

.creatorWorkspaceTab.is-active {
  color: var(--mint);
}

.creatorWorkspaceTab.is-active::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  background: var(--mint);
}

.creatorOperateFlow,
.creatorOperatePanels {
  display: grid;
  gap: 12px;
}

/* 운영 트리의 말단 화면은 왼쪽 트리와 같은 정보 밀도로 유지한다. */
.creatorOperatePanels .detailSection {
  gap: 10px;
  padding-top: 12px;
}

.creatorOperatePanels .detailSectionHead {
  gap: 8px;
}

.creatorOperatePanels .detailSectionHead strong {
  font-size: 14px;
  line-height: 1.4;
}

.creatorOperatePanels .detailSectionHead span {
  font-size: 13px;
}

.creatorOperatePanels .formField {
  gap: 6px;
}

.creatorOperatePanels .formField span,
.creatorOperatePanels .formField legend {
  font-size: 13px;
}

.creatorOperatePanels .formField input,
.creatorOperatePanels .formField select,
.creatorOperatePanels .formField textarea {
  min-height: 38px;
  padding: 9px 11px;
  line-height: 1.5;
}

.creatorOperatePanels .scheduleEditorContext,
.creatorOperatePanels .inlineEditorBlock {
  gap: 8px;
  border-radius: 8px;
  padding: 10px 12px;
}

.creatorOperatePanels .scheduleEditorContext strong,
.creatorOperatePanels .inlineEditorBlockHead strong {
  font-size: 14px;
}

.creatorOperatePanels .inlineEditorBlockHead {
  gap: 6px 10px;
}

.creatorOperatePanels .inlineTreePickerItem {
  padding-block: 8px;
}

.creatorOperatePanels .inlineTreePickerItem strong {
  font-size: 13px;
}

.creatorOperateTabs {
  --operate-step-indent: 14px;
  --operate-step-line: rgba(61, 111, 110, 0.7);
  --operate-step-center: 15.2px;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 2px 0 2px var(--operate-step-indent);
  list-style: none;
}

.creatorOperateTabs > li {
  position: relative;
  min-width: 0;
  padding: 0;
}

.creatorOperateTabs > li::before {
  content: "";
  position: absolute;
  top: var(--operate-step-center);
  left: calc(-1 * var(--operate-step-indent));
  width: var(--operate-step-indent);
  border-top: 1px solid var(--operate-step-line);
}

.creatorOperateTabs > li::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(-1 * var(--operate-step-indent));
  border-left: 1px solid var(--operate-step-line);
}

.creatorOperateTabs > li:first-child::after {
  top: var(--operate-step-center);
}

.creatorOperateTabs > li:last-child::after {
  bottom: calc(100% - var(--operate-step-center));
}

.horizontalScrollShell {
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr) 0;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.horizontalScrollShell.hasHorizontalOverflow {
  grid-template-columns: 22px minmax(0, 1fr) 22px;
}

.horizontalScrollShell > :not(.horizontalScrollCaret) {
  grid-column: 2;
  min-width: 0;
}

.horizontalScrollCaret {
  position: static;
  display: grid;
  place-items: center;
  width: 22px;
  min-width: 0;
  height: var(--button-height-small);
  min-height: var(--button-height-small);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--mint);
}

.horizontalScrollCaret.isPrevious {
  grid-column: 1;
}

.horizontalScrollCaret.isNext {
  grid-column: 3;
}

.horizontalScrollCaret::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--mint);
}

.horizontalScrollCaret.isPrevious::before {
  transform: rotate(180deg);
}

.horizontalScrollCaret:hover,
.horizontalScrollCaret:focus-visible {
  background: transparent;
  color: var(--mint);
  filter: brightness(1.2);
}

.horizontalScrollCaret:focus-visible {
  outline: 1px solid var(--mint);
  outline-offset: -2px;
}

.creatorOperateTab {
  position: relative;
  width: 100%;
  min-height: var(--button-height-medium);
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #eef8ff;
  text-align: left;
  padding: 7px 10px;
}

.creatorOperateTab strong {
  padding: 0;
  font-size: 13px;
  line-height: 1.35;
}

.creatorOperateTab span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.creatorOperateTab.is-active {
  border-left-color: var(--mint);
  background: transparent;
  color: #d0fff1;
}

.creatorOperateTab.is-active strong {
  color: var(--mint);
}

.creatorOperatePanel[hidden] {
  display: none;
}

@media (max-width: 680px) {
  .creatorOperateTabs {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    margin-inline: -2px;
    padding: 2px 0 0;
    cursor: grab;
    touch-action: pan-x;
  }

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

  .creatorOperateTabs.dragging {
    cursor: grabbing;
  }

  .creatorOperateTabs > li {
    flex: 0 0 158px;
    padding: 0 6px 10px 0;
  }

  .creatorOperateTabs > li::before,
  .creatorOperateTabs > li::after {
    content: none;
  }

  .creatorOperateTab {
    grid-template-columns: 1fr;
    gap: 2px;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }

  .creatorOperateTab.is-active {
    border-bottom-color: var(--mint);
  }

  .creatorOperateTab span {
    display: none;
  }
}

.connectBoardSection,
.connectBoardList {
  display: grid;
  gap: 10px;
}

.connectBoardRow {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(159, 176, 170, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  padding: 14px;
}

.connectBoardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 12px;
  flex-wrap: wrap;
}

.connectBoardHead > div {
  display: grid;
  gap: 3px;
}

.connectBoardHead span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

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

.connectBoardSlot {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(159, 176, 170, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 13px;
}

.connectBoardSlotHead {
  display: grid;
  gap: 6px;
}

.connectBoardTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.connectBoardSourceTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.connectBoardSourceTab {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid rgba(159, 176, 170, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  padding: 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.connectBoardSourceTab.is-active {
  border-color: rgba(120, 184, 255, 0.3);
  background: rgba(120, 184, 255, 0.12);
  color: #d7ebff;
}

.connectBoardSlot.is-linked {
  background: rgba(255, 255, 255, 0.035);
}

.connectBoardSlot.is-recording-linked {
  border-color: rgba(120, 184, 255, 0.34);
  box-shadow: inset 0 0 0 1px rgba(120, 184, 255, 0.08);
}

.connectBoardSlot.is-material-linked {
  border-color: rgba(66, 215, 163, 0.3);
  box-shadow: inset 0 0 0 1px rgba(66, 215, 163, 0.07);
}

.connectBoardFileRow.is-linked {
  border-width: 1px;
}

.connectBoardFileRow.is-recording-linked {
  border-color: rgba(120, 184, 255, 0.3);
  background: rgba(120, 184, 255, 0.08);
}

.connectBoardFileRow.is-material-linked {
  border-color: rgba(66, 215, 163, 0.28);
  background: rgba(66, 215, 163, 0.08);
}

.connectBoardActionButton.is-linked {
  border-color: rgba(66, 215, 163, 0.36);
  background: rgba(66, 215, 163, 0.12);
  color: #d3fff4;
}

.connectBoardFileActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.connectBoardUnlinkButton {
  border-color: rgba(232, 111, 131, 0.4);
  color: #ffd5dc;
}

.compactLinkCurrent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  border: 1px solid rgba(120, 184, 255, 0.24);
  border-radius: 8px;
  background: rgba(120, 184, 255, 0.07);
  padding: 10px 12px;
}

.compactLinkCurrent > div {
  min-width: 0;
}

.compactLinkCurrent span,
.compactLinkCurrent strong {
  display: block;
}

.compactLinkCurrent span {
  color: var(--muted);
  font-size: 12px;
}

.compactLinkCurrent strong {
  overflow: hidden;
  color: #d8ecff;
  font-size: 14px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compactLinkCurrent .compactLinkConnectionState {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 28px;
  white-space: nowrap;
}

.ownedLinkForm {
  display: grid;
  gap: 10px;
}

.ownedLinkForm .formField {
  gap: 8px;
}

.inlineFilterBar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 8px;
}

.inlineFilterField {
  min-width: 0;
}

.inlineFilterFieldCompact {
  max-width: 180px;
}

.inlineRecentList {
  display: grid;
  gap: 6px;
}

.inlineRecentList > strong {
  color: #d8ecff;
  font-size: 13px;
}

.inlineRecentButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recentFileButton {
  display: grid;
  gap: 2px;
  min-height: auto;
  border: 1px solid rgba(120, 184, 255, 0.2);
  border-radius: 10px;
  background: rgba(120, 184, 255, 0.07);
  padding: 8px 10px;
  text-align: left;
}

.recentFileButton span {
  color: #d7ebff;
  font-size: 13px;
  font-weight: 800;
}

.recentFileButton small {
  color: var(--muted);
  font-size: 11px;
}

.recentFileButton.is-active {
  border-color: rgba(66, 215, 163, 0.42);
  background: rgba(66, 215, 163, 0.12);
}

.inlineEditorBlock {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(159, 176, 170, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  padding: 14px;
}

.inlineEditorBlockHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.inlineEditorBlockHead strong {
  font-size: 15px;
  line-height: 1.4;
}

.inlineEditorBlockHead span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.lectureSlotBoard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.lectureSlotNode {
  display: grid;
  gap: 3px;
  min-height: 78px;
  border: 1px solid rgba(120, 184, 255, 0.22);
  border-left: 2px solid rgba(120, 184, 255, 0.5);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
}

.lectureSlotNode strong {
  color: #d0fff1;
  font-size: 13px;
}

.lectureSlotNode span,
.lectureSlotNode small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lectureSlotNode.is-linked {
  border-left-color: rgba(66, 215, 163, 0.68);
}

.lectureSlotNode.is-active {
  border-color: var(--mint);
  border-left-color: var(--mint);
  background: rgba(66, 215, 163, 0.09);
}

.lectureSlotNode.is-active span,
.lectureSlotNode.is-active small {
  color: #cceee3;
}

.inlineFilePickerPanel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(159, 176, 170, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 13px;
}

.inlineFilePickerPanel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.inlineTreePicker {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.inlineTreePickerList {
  display: grid;
  gap: 0;
  border-left: 0;
  padding: 2px 0;
}

.inlineTreePickerItem {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  border-bottom: 1px solid rgba(159, 176, 170, 0.14);
  padding: 10px 0;
}

.inlineTreePickerItem:last-child {
  border-bottom: 0;
}

.inlineTreePickerItem > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.inlineTreePickerItem strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.inlineTreePickerItem p {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.inlineTreePickerItem .textButton {
  align-self: center;
}

.inlineStatusText {
  margin: -2px 0 0;
  color: #d8ecff;
  font-size: 13px;
  line-height: 1.55;
}

.ownedLinkForm .inlineStatusText {
  margin-top: 2px;
}

.ownedScheduleInlineEditor {
  border-top: 1px solid rgba(44, 61, 67, 0.8);
  padding-top: 12px;
}

.ownedScheduleInlineEditor .ownedFileGrid {
  grid-template-columns: 1fr;
}

.ownedScheduleInlineEditor .ownedFileGrid > * {
  min-width: 0;
}

.ownedScheduleEmpty strong {
  margin-bottom: 0;
}

.ownedScheduleActions,
.ownedScheduleFormActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ownedStickySaveBar {
  position: sticky;
  bottom: 10px;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid rgba(66, 215, 163, 0.28);
  border-radius: 12px;
  background: rgba(14, 23, 28, 0.95);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
  padding: 12px 14px;
}

.ownedStickySaveBar > div:first-child {
  display: grid;
  gap: 4px;
}

.ownedStickySaveBar strong {
  font-size: 14px;
  line-height: 1.4;
}

.ownedStickySaveBar p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.ownedScheduleActions {
  row-gap: 8px;
  justify-content: flex-end;
}

.ownedScheduleFormActions {
  padding-top: 2px;
}

.ownedFileKindTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.activeKindButton {
  border-color: rgba(66, 215, 163, 0.42);
  background: rgba(66, 215, 163, 0.12);
  color: #d0fff1;
}

.ownedFileGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.ownedFileList {
  display: grid;
  gap: 10px;
}

.ownedFileListScrollable {
  max-height: 430px;
  overflow-y: auto;
  padding-right: 4px;
}

.ownedFileRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid rgba(159, 176, 170, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 13px;
}

.ownedFileRow > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ownedFileRow .textButton,
.detailSectionHead .textButton,
.classroomCardHead .textButton {
  align-self: flex-start;
}

.ownedScheduleCard p,
.ownedScheduleEmpty p,
.ownedScheduleForm p,
.ownedFileRow p {
  margin: 0;
  line-height: 1.65;
}

.rentalStatusSection .ownedScheduleCard > p,
.rentalStatusSection .inlineMessage {
  font-size: 13px;
}

.noticeCardMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.noticeLead {
  color: #d8ecff;
}

.scheduleCard > p + .noticeCardMeta,
.scheduleCard > .noticeCardMeta + p,
.scheduleCard > p + .scheduleTicketBoard,
.scheduleCard > .noticeCardMeta + .scheduleTicketBoard {
  margin-top: 6px;
}

.scheduleTicketBoard .detailSectionHead {
  margin-bottom: 2px;
}

.ticketCtaRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ticketActionButton {
  min-height: var(--button-height-medium);
  border: 1px solid rgba(243, 180, 75, 0.34);
  background: rgba(243, 180, 75, 0.12);
  color: #ffe4a8;
  font-size: var(--button-font-small);
  font-weight: 900;
}

.enterClassButton {
  min-height: var(--button-height-medium);
  border: 1px solid rgba(66, 215, 163, 0.34);
  background: rgba(66, 215, 163, 0.14);
  color: #d0fff1;
  font-size: var(--button-font-small);
  font-weight: 900;
}

.ticketSaleBox {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(243, 180, 75, 0.22);
  border-radius: 12px;
  background: rgba(243, 180, 75, 0.06);
  padding: 14px;
}

.scheduleTicketBoard {
  display: grid;
  gap: 10px;
}

.ticketSaleTopRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ticketSaleMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.ticketMetaChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}

.ticketMetaChip em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.ticketMetaChip strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  word-break: keep-all;
}

@media (max-width: 720px) {
  .entryWindowBundleAudioControls {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .entryWindowBundleAudioControls span {
    grid-column: 1 / -1;
    text-align: center;
  }

  .entryWindowBundleAudioControls.is-free {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .entryWindowBundleAudioControls.is-free span {
    grid-column: 1 / -1;
  }

  .ticketSaleTopRow {
    flex-direction: column;
    align-items: stretch;
  }

  .ticketLabel {
    align-self: flex-start;
  }
}

.scheduleTimelineBoard {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(120, 184, 255, 0.16);
  border-radius: 12px;
  background: rgba(120, 184, 255, 0.05);
  padding: 14px;
}

.automaticTimetableTabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 0 3px;
  cursor: grab;
  touch-action: pan-x;
  scrollbar-width: none;
}

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

.automaticTimetableTabs.dragging {
  cursor: grabbing;
}

.automaticTimetableTab {
  display: grid;
  flex: 0 0 auto;
  min-width: 132px;
  gap: 3px;
  border: 1px solid rgba(120, 184, 255, 0.24);
  border-radius: 10px;
  background: rgba(120, 184, 255, 0.06);
  color: var(--text);
  padding: 9px 12px;
  text-align: left;
  white-space: nowrap;
}

.automaticTimetableTab strong {
  color: #d8ecff;
  font-size: 13px;
}

.automaticTimetableTab small {
  max-width: 220px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
}

.automaticTimetableTab.is-active {
  border-color: rgba(66, 215, 163, 0.68);
  background: rgba(66, 215, 163, 0.12);
}

.automaticTimetableTab.is-active strong {
  color: var(--mint);
}

.automaticTimetableTab:focus-visible {
  outline: 2px solid #75b8ff;
  outline-offset: 2px;
}

.scheduleTimelineList {
  display: grid;
  gap: 8px;
}

.scheduleTimelineList p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.scheduleTimelineItem {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(159, 176, 170, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 13px;
}

.ticketLabel {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  align-self: center;
}

.aliasList {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.aliasChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid rgba(120, 184, 255, 0.26);
  border-radius: 999px;
  background: rgba(120, 184, 255, 0.08);
  color: #d8ecff;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

@media (max-width: 980px) {
  .classroomControlGrid,
  .classroomSummaryGrid,
  .classroomLayout,
  .classroomGuideBody {
    grid-template-columns: 1fr;
  }

  .classroomCenterWorkspace { grid-template-columns: 1fr; }
  .classroomRouteTree { max-height: none; }

  .classroomLayout {
    min-height: auto;
  }

  .classroomCenterWorkspace[data-center-section="browse"] {
    --classroom-browse-panel-height: clamp(480px, 72svh, 640px);
  }

  .classroomCenterWorkspace[data-center-section="browse"] > .classroomRouteTreePanel {
    display: block;
    height: auto;
  }

  .classroomCenterWorkspace[data-center-section="browse"] .classroomLayout {
    height: auto;
    min-height: 0;
  }

  .classroomCenterWorkspace[data-center-section="browse"] .classroomListPanel,
  .classroomCenterWorkspace[data-center-section="browse"] .classroomDetailPanel {
    height: var(--classroom-browse-panel-height);
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .classroomShell {
    width: min(100vw - 18px, 100%);
    padding-top: 12px;
  }

  .classroomHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .classroomCreateEntry {
    align-items: flex-start;
    flex-direction: column;
  }

  .classroomRentalCompletion { grid-template-columns: auto minmax(0, 1fr); }
  .classroomRentalCompletionActions { grid-column: 1 / -1; }
  .classroomRentalWizardActions { align-items: flex-start; flex-direction: column; }
  .classroomRentalReview { grid-template-columns: 110px minmax(0, 1fr); }
  .classroomRentalWizardProgress span { font-size: 0; }

  .classroomBrand {
    align-items: flex-start;
  }

  .classroomBrand img {
    width: 46px;
    height: 46px;
  }

  .classroomMeta {
    grid-template-columns: 1fr;
  }

  .panelHead span {
    flex-basis: 100%;
    text-align: left;
  }

  .optionGrid,
  .optionGridCompact,
  .formSplit,
  .scheduleTimingGrid,
  .scheduleTimingSummary,
  .connectBoardGrid,
  .ticketSaleMeta,
  .ownedFileGrid,
  .dashboardStatGrid,
  .inlineFilterBar {
    grid-template-columns: 1fr;
  }

  .weekdayOptionGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .inlineFilterFieldCompact {
    max-width: none;
  }

  .ownedFileRow {
    grid-template-columns: 1fr;
  }

  .inlineTreePickerItem {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .inlineTreePickerItem .textButton {
    justify-self: start;
  }
}

.headerLinkButton.homeIconButton {
  width: var(--button-height-medium);
  min-width: var(--button-height-medium);
  height: var(--button-height-medium);
  min-height: var(--button-height-medium);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c9ddd6;
}

.headerLinkButton.homeIconButton svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.headerLinkButton.homeIconButton:hover,
.headerLinkButton.homeIconButton:focus-visible {
  color: var(--mint);
  outline: 1px solid rgba(66, 215, 163, 0.46);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .classroomHeader {
    align-items: flex-start;
    flex-direction: row;
  }

  .headerLinkButton.homeIconButton {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .classroomActivityRoleTab,
  .classroomRouteParent,
  .classroomRouteChildren button,
  .ticketActionButton {
    min-height: 44px;
  }

  #classroomLectureSearchInput {
    min-height: 44px;
  }

  .classroomRouteChildren > li::before {
    top: 22px;
  }

  .classroomRouteChildren > li:last-child::after {
    height: 24px;
  }
}