:root {
  --bg: #f6f7f5;
  --surface: #ffffff;
  --surface-2: #eef3ef;
  --ink: #17211c;
  --muted: #69736d;
  --line: #dfe5df;
  --green: #2f7d5a;
  --blue: #2c66a2;
  --red: #a84642;
  --amber: #b7791f;
  --violet: #6750a4;
  --teal: #237b7b;
  --shadow: 0 16px 40px rgba(23, 33, 28, 0.1);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--bg);
  font-family:
    Pretendard,
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    system-ui,
    sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--line);
  background: #fbfcfa;
  padding: 24px 18px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

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

.nav-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  padding: 10px 12px;
  text-align: left;
}

.nav-button:hover,
.nav-button.active {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--ink);
}

.icon,
.launch-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.launch-icon {
  width: 48px;
  height: 48px;
}

.home-icon::before,
.curriculum-icon::before,
.score-icon::before,
.portfolio-icon::before,
.topic-icon::before,
.designer-icon::before,
.planner-icon::before,
.self-eval-icon::before,
.consultation-icon::before,
.admission-search-icon::before,
.home-icon::after,
.curriculum-icon::after,
.score-icon::after,
.portfolio-icon::after,
.topic-icon::after,
.designer-icon::after,
.planner-icon::after,
.self-eval-icon::after,
.consultation-icon::after,
.admission-search-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.home-icon::before {
  inset: 5px 4px 4px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.home-icon::after {
  left: 5px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.curriculum-icon::before {
  inset: 3px 5px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.curriculum-icon::after {
  left: 10px;
  top: 7px;
  width: 2px;
  height: 14px;
  background: currentColor;
  box-shadow: 6px 0 0 currentColor;
}

.score-icon::before {
  left: 4px;
  right: 4px;
  bottom: 5px;
  height: 14px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}

.score-icon::after {
  left: 8px;
  bottom: 9px;
  width: 4px;
  height: 8px;
  background: currentColor;
  box-shadow: 6px -4px 0 currentColor, 12px -8px 0 currentColor;
}

.portfolio-icon::before {
  inset: 5px 3px 4px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.portfolio-icon::after {
  left: 8px;
  top: 2px;
  width: 8px;
  height: 6px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.topic-icon::before {
  left: 5px;
  top: 5px;
  width: 25px;
  height: 25px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.topic-icon::after {
  left: 29px;
  top: 29px;
  width: 13px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

.designer-icon::before {
  left: 8px;
  top: 9px;
  width: 25px;
  height: 25px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.designer-icon::after {
  left: 3px;
  top: 5px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: #fff;
  box-shadow: 25px 0 0 -2px #fff, 25px 0 0 0 currentColor, 25px 21px 0 -2px #fff, 25px 21px 0 0 currentColor;
}

.consultation-icon::before {
  inset: 3px 6px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.consultation-icon::after {
  left: 13px;
  top: 12px;
  width: 16px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
}

.planner-icon::before {
  inset: 3px 4px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.planner-icon::after {
  left: 8px;
  top: 9px;
  width: 10px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor;
}

.self-eval-icon::before {
  inset: 4px 5px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.self-eval-icon::after {
  left: 12px;
  top: 10px;
  width: 17px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: -4px 7px 0 currentColor, 2px 14px 0 currentColor;
  transform: rotate(-24deg);
}

.main-content {
  min-width: 0;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 40px 0 56px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 8px;
  font-size: 30px;
  line-height: 1.2;
}

h3 {
  margin-bottom: 14px;
  font-size: 18px;
}

p {
  color: var(--muted);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.top-actions,
.control-row,
.metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.section-head .control-row {
  justify-content: flex-end;
  align-items: flex-start;
}

.primary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: var(--radius);
  padding: 0 16px;
  line-height: 1;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.primary-button {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
}

.ghost-button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

#home.view.active {
  display: grid;
  min-height: calc(100vh - 96px);
  align-content: center;
}

.home-intro {
  display: flex;
  justify-content: center;
  margin-bottom: 34px;
  text-align: center;
}

.home-intro h1 {
  margin-bottom: 12px;
  font-size: clamp(42px, 7vw, 76px);
}

.home-intro p:last-child {
  margin-bottom: 0;
  font-size: 18px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.section-head p {
  margin-bottom: 0;
}

.subject-section-head {
  display: block;
  width: 100%;
}

.section-title-wrap {
  width: 100%;
  min-width: 0;
}

.section-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  width: 100%;
}

.section-title-row h1,
.section-title-row h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-bottom: 0;
  white-space: nowrap;
}

.section-title-row h1 > span,
.section-title-row h2 > span {
  min-width: 0;
  white-space: nowrap;
}

.section-title-row + p {
  margin-top: 8px;
}

.title-mindmap-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #c9dfd2;
  border-radius: 11px;
  background: #eef7f1;
  padding: 5px;
}

.title-mindmap-icon path {
  fill: none;
  stroke: #6f8f7b;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.title-mindmap-icon circle {
  fill: #fff;
  stroke: var(--green);
  stroke-width: 2;
}

.title-mindmap-icon circle:nth-of-type(2) {
  stroke: var(--blue);
}

.title-mindmap-icon circle:nth-of-type(3) {
  stroke: var(--amber);
}

.title-mindmap-icon circle:nth-of-type(4) {
  stroke: var(--red);
}

.title-subject-icon,
.title-topic-icon,
.title-designer-icon,
.title-planner-icon,
.title-self-eval-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  padding: 5px;
}

.title-subject-icon {
  border: 1px solid #c7d9ed;
  background: #f3f8ff;
}

.title-subject-icon rect,
.title-subject-icon path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.title-subject-icon .subject-check {
  stroke: var(--green);
}

.title-planner-icon {
  border: 1px solid #ecd8b8;
  background: #fff8ea;
}

.title-planner-icon rect,
.title-planner-icon path {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.title-planner-icon .planner-pencil {
  stroke: var(--ink);
  fill: #fff8ea;
}

.title-topic-icon {
  border: 1px solid #bfe1df;
  background: #eefafa;
}

.title-topic-icon path,
.title-topic-icon circle {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.title-topic-icon circle {
  fill: #fff;
}

.title-topic-icon circle:nth-of-type(2) {
  stroke: var(--green);
}

.title-topic-icon circle:nth-of-type(3) {
  stroke: var(--blue);
}

.title-topic-icon circle:nth-of-type(4) {
  stroke: var(--amber);
}

.title-designer-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #bfded6;
  border-radius: 11px;
  background: #eff9f6;
  padding: 5px;
}

.title-designer-icon path,
.title-designer-icon circle {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.title-designer-icon circle {
  fill: #fff;
}

.title-designer-icon circle:nth-of-type(2) {
  stroke: var(--blue);
}

.title-designer-icon circle:nth-of-type(3) {
  stroke: var(--amber);
}

.title-designer-icon circle:nth-of-type(4) {
  stroke: var(--green);
}

.title-self-eval-icon {
  border: 1px solid #d6cdea;
  background: #f7f3ff;
}

.title-self-eval-icon rect,
.title-self-eval-icon path,
.title-self-eval-icon circle {
  fill: none;
  stroke: var(--violet);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.title-self-eval-icon .self-eval-spark {
  fill: #fff;
  stroke: var(--green);
}

.title-holistic-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #edd0d0;
  border-radius: 11px;
  background: #fff5f5;
  padding: 5px;
}

.title-holistic-icon rect,
.title-holistic-icon path,
.title-holistic-icon circle {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.title-holistic-icon circle {
  fill: #fff;
  stroke: var(--amber);
}

.title-holistic-icon .holistic-link {
  stroke: var(--green);
}

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

.launch-card {
  display: grid;
  gap: 12px;
  min-height: 210px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 20px;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(23, 33, 28, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.back-home-button {
  align-self: flex-start;
  justify-self: end;
  flex: 0 0 auto;
  min-width: 104px;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  white-space: nowrap;
}

.launch-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.launch-card strong {
  font-size: 21px;
  line-height: 1.25;
}

.launch-card span:last-child {
  color: var(--muted);
  line-height: 1.55;
}

.tone-green {
  color: var(--green);
}

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

.tone-red {
  color: var(--red);
}

.tone-amber {
  color: var(--amber);
}

.tone-violet {
  color: var(--violet);
}

.tone-teal {
  color: var(--teal);
}

.tone-designer {
  color: var(--teal);
}

.designer-launch-card {
  grid-column: 1 / -1;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 5px;
  align-items: center;
  min-height: 118px;
  border-color: #c9dfd8;
  background: #f7fbf9;
}

.designer-launch-card .launch-icon {
  grid-row: 1 / 3;
}

.designer-launch-card strong,
.designer-launch-card span:last-child {
  grid-column: 2;
}

.designer-launch-card strong {
  align-self: end;
}

.designer-launch-card span:last-child {
  align-self: start;
}

.grade3-hub {
  border-top: 1px solid var(--line);
  margin-top: 30px;
  padding-top: 24px;
}

.grade3-hub-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  gap: 24px;
  align-items: end;
  margin-bottom: 14px;
}

.grade3-hub-head h2 {
  margin: 2px 0 0;
  font-size: 26px;
  line-height: 1.25;
}

.grade3-hub-head > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  word-break: keep-all;
}

.grade3-launch-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid #c6d5e5;
  border-radius: var(--radius);
  background: #f6f9fc;
  color: #17456b;
  padding: 20px 22px;
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

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

.grade3-launch-grid .grade3-launch-card {
  grid-template-columns: auto minmax(0, 1fr);
}

.grade3-launch-grid .grade3-launch-action {
  grid-column: 2;
  justify-self: start;
}

.admission-search-icon {
  border: 2px solid currentColor;
  border-radius: 8px;
}

.admission-search-icon::before {
  left: 10px;
  top: 11px;
  width: 18px;
  height: 18px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.admission-search-icon::after {
  right: 7px;
  bottom: 8px;
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: right center;
}

.grade3-launch-card:hover {
  border-color: #8eacc7;
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.grade3-launch-copy {
  display: grid;
  gap: 6px;
}

.grade3-launch-copy strong {
  color: var(--ink);
  font-size: 21px;
  line-height: 1.3;
}

.grade3-launch-copy > span {
  color: var(--muted);
  line-height: 1.55;
  word-break: keep-all;
}

.grade3-launch-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: var(--radius);
  background: #17456b;
  color: #fff;
  padding: 0 16px;
  font-weight: 900;
  white-space: nowrap;
}

.grade3-privacy-note {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .grade3-hub-head,
  .grade3-launch-grid {
    grid-template-columns: 1fr;
  }

  .grade3-hub-head {
    gap: 8px;
  }

  .grade3-launch-grid .grade3-launch-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px 12px;
    padding: 16px;
  }

  .grade3-launch-card .consultation-icon {
    width: 40px;
    height: 40px;
  }

  .grade3-launch-card .admission-search-icon {
    width: 40px;
    height: 40px;
  }

  .grade3-launch-grid .grade3-launch-copy {
    display: contents;
  }

  .grade3-launch-grid .grade3-launch-copy strong {
    grid-column: 2;
    align-self: center;
    font-size: 18px;
  }

  .grade3-launch-grid .grade3-launch-copy > span {
    grid-column: 1 / -1;
    line-height: 1.5;
  }

  .grade3-launch-grid .grade3-launch-action {
    grid-column: 1 / -1;
  }

  .grade3-launch-action {
    width: 100%;
  }
}

.dashboard-band,
.timeline-band,
.comparison-table,
.activity-panel,
.subject-list-panel,
.course-palette {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

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

.topic-guide-grid article,
.topic-filter-panel,
.topic-card,
.topic-caution-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.topic-guide-grid article {
  padding: 18px;
}

.topic-ai-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.15fr);
  gap: 16px;
  border: 1px solid #d9e8df;
  border-radius: var(--radius);
  background: #f6fbf8;
  margin: 18px 0;
  padding: 18px;
}

.topic-ai-panel h3 {
  margin: 6px 0 8px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.35;
}

.topic-ai-panel p,
.topic-ai-panel li {
  color: var(--muted);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.topic-ai-panel ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.topic-guide-grid h3,
.topic-caution-panel h3 {
  margin: 5px 0 8px;
  font-size: 19px;
  line-height: 1.35;
  word-break: keep-all;
}

.topic-guide-grid p,
.topic-caution-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.topic-filter-panel {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(150px, 1fr) minmax(105px, 0.65fr) minmax(105px, 0.65fr) minmax(190px, 1.35fr) auto;
  gap: 10px;
  align-items: end;
  padding: 16px;
  margin: 14px 0 18px;
}

.topic-filter-panel label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.topic-search-label {
  min-width: 0;
}

.topic-result-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: end;
  margin: 22px 0 12px;
}

.topic-result-head h3 {
  margin: 4px 0 0;
  font-size: 24px;
}

.topic-result-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid #cce0dd;
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--teal);
  font-weight: 900;
  white-space: nowrap;
}

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

.topic-card {
  display: grid;
  gap: 13px;
  padding: 18px;
  min-width: 0;
}

.topic-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.topic-card h4 {
  margin: 7px 0 0;
  font-size: 20px;
  line-height: 1.35;
  word-break: keep-all;
}

.topic-subject-badge,
.topic-grade-badge,
.topic-level-badge,
.topic-keyword-row span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.topic-subject-badge {
  border: 1px solid #cce0dd;
  background: #f3fbf9;
  color: var(--teal);
  padding: 5px 9px;
  font-size: 12px;
}

.topic-level-badge {
  border: 1px solid #d8e2dd;
  background: #f7faf8;
  color: var(--muted);
  padding: 5px 9px;
  font-size: 12px;
}

.topic-badge-stack {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.topic-grade-badge {
  border: 1px solid #d6cdea;
  background: #f7f3ff;
  color: var(--violet);
  padding: 5px 9px;
  font-size: 12px;
}

.topic-level-badge.advanced {
  border-color: #ead6b2;
  background: #fff8ea;
  color: var(--amber);
}

.topic-card-section {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.topic-development {
  border: 1px solid #d9e8df;
  border-radius: var(--radius);
  background: #f6fbf8;
  padding: 11px 12px;
}

.topic-more-note {
  grid-column: 1 / -1;
  text-align: center;
}

.topic-card-section b,
.topic-card-footer b {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.topic-card-section p,
.topic-card-footer p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  word-break: keep-all;
}

.topic-card-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.topic-keyword-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.topic-keyword-row span {
  border: 1px solid var(--line);
  background: #fbfcfa;
  color: var(--muted);
  padding: 4px 8px;
  font-size: 12px;
}

.topic-empty {
  grid-column: 1 / -1;
}

.topic-caution-panel {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  padding: 18px;
}

.topic-caution-panel > div {
  min-width: 0;
}

.dashboard-band {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-top: 22px;
  padding: 20px;
}

.dashboard-band p {
  margin-bottom: 0;
}

.metric-row span {
  display: grid;
  min-width: 94px;
  border-left: 1px solid var(--line);
  padding-left: 16px;
  color: var(--muted);
}

.metric-row b {
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.control-row label,
.curriculum-filter-panel label,
.palette-head input,
.course-palette input,
.section-head input,
.section-head select {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

select,
input,
textarea {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: 9px 10px;
}

select:disabled,
input:disabled {
  background: #f2f4f1;
  color: #8a948e;
}

textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.5;
}

.curriculum-head {
  margin-bottom: 12px;
}

.curriculum-main {
  display: grid;
  gap: 14px;
}

.curriculum-lead {
  display: grid;
  gap: 2px;
  max-width: 860px;
  line-height: 1.65;
}

.curriculum-lead span {
  display: block;
}

.curriculum-lead .lead-first {
  text-indent: 0.9em;
  font-weight: 900;
}

.curriculum-filter-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "plan scope"
    "grade semester"
    "search search";
  gap: 10px 12px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
}

.curriculum-filter-panel .filter-plan {
  grid-area: plan;
}

.curriculum-filter-panel .filter-scope {
  grid-area: scope;
}

.curriculum-filter-panel .filter-grade {
  grid-area: grade;
}

.curriculum-filter-panel .filter-semester {
  grid-area: semester;
}

.curriculum-filter-panel .filter-search {
  grid-area: search;
}

.curriculum-filter-panel select,
.curriculum-filter-panel input {
  width: 100%;
}

.curriculum-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.curriculum-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 16px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px;
}

.curriculum-dashboard h3 {
  margin: 8px 0 8px;
  font-size: 24px;
}

.curriculum-dashboard p {
  margin-bottom: 0;
}

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

.curriculum-metrics span {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.curriculum-metrics b {
  display: block;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.1;
}

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

.curriculum-legend span,
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 5px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.legend-dot.fixed,
.section-badge.fixed {
  background: #ecf4ef;
  color: var(--green);
}

.legend-dot.fixed-choice {
  background: #e9f5f4;
  box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.22);
}

.legend-dot.choice,
.section-badge.choice {
  background: #eef4fb;
  color: var(--blue);
}

.legend-dot.joint,
.section-badge.joint {
  background: #fff4df;
  color: var(--amber);
}

.section-badge.has-grade,
.choice-badge.has-detail {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  white-space: normal;
  text-align: center;
  line-height: 1.08;
}

.section-badge small,
.choice-badge small {
  color: currentColor;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
  opacity: 0.86;
}

.section-badge.grade-1.fixed {
  border-color: #c9ddcf;
  background: #eef7f1;
  color: #2f7d5a;
}

.section-badge.grade-1.choice {
  border-color: #9fc9ad;
  background: #e3f3e8;
  color: #236847;
}

.section-badge.grade-2.fixed {
  border-color: #c8d9ee;
  background: #eef5ff;
  color: #2c66a2;
}

.section-badge.grade-2.choice {
  border-color: #9fc0e4;
  background: #e2f0ff;
  color: #24588b;
}

.section-badge.grade-3.fixed {
  border-color: #d6cdea;
  background: #f4f0ff;
  color: #6750a4;
}

.section-badge.grade-3.choice {
  border-color: #bfb1e3;
  background: #eee7ff;
  color: #574195;
}

.section-badge.fixed-choice {
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.16);
}

.curriculum-content {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  gap: 16px;
}

.subject-list-panel {
  padding: 18px;
}

.panel-note {
  margin-bottom: 12px;
  font-size: 14px;
}

.choice-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.choice-group-head h3 {
  margin: 0;
}

.icon-help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid #c9dfd2;
  border-radius: 999px;
  background: #f2faf5;
  color: var(--green);
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.icon-help-button:hover,
.icon-help-button[aria-expanded="true"] {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.choice-help-popover {
  border: 1px solid #c9dfd2;
  border-radius: var(--radius);
  background: #f6fbf7;
  padding: 12px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.choice-help-popover b {
  display: block;
  color: var(--ink);
  margin-bottom: 6px;
}

.choice-help-popover ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.choice-help-popover strong {
  color: var(--green);
}

.curriculum-table-wrap {
  overflow-x: auto;
}

.curriculum-table {
  min-width: 760px;
  margin-top: 0;
  table-layout: fixed;
}

.curriculum-table th,
.curriculum-table td {
  text-align: center;
  vertical-align: middle;
}

.curriculum-table th:nth-child(1),
.curriculum-table td:nth-child(1) {
  width: 14%;
}

.curriculum-table th:nth-child(2),
.curriculum-table td:nth-child(2) {
  width: 18%;
}

.curriculum-table th:nth-child(3),
.curriculum-table td:nth-child(3) {
  width: 11%;
}

.curriculum-table th:nth-child(4),
.curriculum-table td:nth-child(4) {
  width: 11%;
}

.curriculum-table th:nth-child(5),
.curriculum-table td:nth-child(5) {
  width: 28%;
}

.curriculum-table td:nth-child(5) {
  text-align: left;
}

.curriculum-table th:nth-child(6),
.curriculum-table td:nth-child(6) {
  width: 12%;
}

.sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 24px;
  gap: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  font-weight: 900;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.curriculum-table .sort-button {
  justify-content: center;
  text-align: center;
}

.sort-button:hover,
.sort-button.active {
  color: var(--ink);
}

.sort-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.sort-indicator:empty {
  display: none;
}

.sort-button.active .sort-indicator {
  background: var(--ink);
  color: #fff;
}

.curriculum-table td:first-child,
.curriculum-table th:first-child {
  border-left: 4px solid transparent;
}

.choice-linked-row.choice-group-1 td:first-child {
  border-left-color: var(--blue);
}

.choice-linked-row.choice-group-2 td:first-child {
  border-left-color: var(--green);
}

.choice-linked-row.choice-group-3 td:first-child {
  border-left-color: var(--amber);
}

.choice-linked-row.choice-group-4 td:first-child {
  border-left-color: var(--red);
}

.choice-linked-row.choice-group-5 td:first-child {
  border-left-color: var(--violet);
}

.choice-linked-row.choice-group-6 td:first-child {
  border-left-color: #54706f;
}

.choice-linked-row {
  background: #fbfcfa;
}

.choice-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 4px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.choice-badge.none {
  opacity: 0.55;
}

.choice-badge.semester-badge {
  background: #f8faf8;
  color: var(--muted);
}

.choice-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.choice-badge.choice-group-1,
.choice-group-card.choice-group-1 {
  border-color: #c7d9ed;
  background: #f3f8ff;
}

.choice-badge.choice-group-1 {
  color: var(--blue);
}

.choice-badge.choice-group-2,
.choice-group-card.choice-group-2 {
  border-color: #c9dfd2;
  background: #f2faf5;
}

.choice-badge.choice-group-2 {
  color: var(--green);
}

.choice-badge.choice-group-3,
.choice-group-card.choice-group-3 {
  border-color: #eadbc0;
  background: #fff9ed;
}

.choice-badge.choice-group-3 {
  color: var(--amber);
}

.choice-badge.choice-group-4,
.choice-group-card.choice-group-4 {
  border-color: #ead0cf;
  background: #fff6f5;
}

.choice-badge.choice-group-4 {
  color: var(--red);
}

.choice-badge.choice-group-5,
.choice-group-card.choice-group-5 {
  border-color: #d9d1ed;
  background: #f8f5ff;
}

.choice-badge.choice-group-5 {
  color: var(--violet);
}

.choice-badge.choice-group-6,
.choice-group-card.choice-group-6 {
  border-color: #c9d5d4;
  background: #f2f7f7;
}

.choice-badge.choice-group-6 {
  color: #456261;
}

.choice-group-list {
  display: grid;
  gap: 10px;
}

.choice-group-card,
.empty-note {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 13px;
}

.choice-group-card b {
  display: block;
}

.choice-group-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.choice-group-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 9px;
}

.tag.selected {
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.subject-list {
  display: grid;
  gap: 10px;
}

.subject-pill,
.course-card,
.planned-course {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px;
}

.subject-pill strong,
.course-card strong,
.planned-course strong {
  display: block;
  overflow-wrap: anywhere;
}

.subject-pill small,
.course-card small,
.planned-course small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.subject-pill.extra,
.course-card.extra {
  border-color: #d7c7a6;
  background: #fffaf0;
  color: #6b4a10;
}

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

.info-card,
.competency-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px;
}

.info-card .label,
.competency-card .label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--green);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.info-card p,
.competency-card p {
  margin-bottom: 0;
}

.comparison-table,
.timeline-band {
  margin-top: 16px;
  padding: 20px;
  overflow-x: auto;
}

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

.admission-summary-grid div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 14px;
}

.admission-summary-grid b,
.admission-summary-grid span {
  display: block;
}

.admission-summary-grid b {
  margin-bottom: 7px;
  font-size: 15px;
}

.admission-summary-grid span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.data-details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  margin-top: 12px;
  overflow-x: auto;
}

.data-details summary {
  cursor: pointer;
  min-height: 46px;
  padding: 13px 14px;
  color: var(--ink);
  font-weight: 900;
}

.data-details table {
  border-top: 1px solid var(--line);
  min-width: 920px;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 14px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

th {
  background: var(--surface-2);
}

.timeline-band ol {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-band li {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px;
  font-weight: 800;
}

.sechuk-flow {
  overflow: visible;
}

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

.sechuk-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 9px;
  align-items: center;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.sechuk-step span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #fff2df;
  color: var(--amber);
  font-size: 12px;
  font-weight: 900;
}

.sechuk-step b,
.sechuk-step small {
  display: block;
}

.sechuk-step b {
  font-size: 15px;
  line-height: 1.25;
}

.sechuk-step small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.sechuk-step.active {
  border-color: #d8c7b0;
  background: #fffaf2;
  box-shadow: inset 4px 0 0 var(--amber);
}

.sechuk-example-panel {
  border: 1px solid #d8c7b0;
  border-radius: var(--radius);
  background: #fffaf2;
  margin-top: 12px;
  padding: 15px;
}

.sechuk-example-panel h4 {
  margin: 7px 0 7px;
  color: var(--ink);
  font-size: 18px;
}

.sechuk-example-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  word-break: keep-all;
}

.planner-mode-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 16px;
  padding: 16px;
}

.planner-mode-panel h3,
.planner-mode-panel p {
  margin-bottom: 0;
}

.planner-mode-panel p {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.55;
}

.planner-mode-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  justify-self: end;
  width: min(560px, 100%);
}

.planner-mode-buttons button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  min-width: 0;
  padding: 0 10px;
  font-weight: 900;
  white-space: nowrap;
}

.planner-mode-buttons button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.planner-fixed-panel,
.planner-mine-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
}

.planner-fixed-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.planner-fixed-head h3 {
  margin-bottom: 6px;
}

.planner-fixed-head p {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
}

.planner-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.planner-control-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(140px, 0.7fr) repeat(4, auto);
  gap: 10px;
  align-items: end;
  justify-self: stretch;
  width: 100%;
}

.planner-control-row label {
  min-width: 0;
}

.planner-control-row button {
  white-space: nowrap;
}

.planner-save-status {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.fixed-curriculum-grid {
  display: grid;
  gap: 12px;
}

.fixed-grade-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 14px;
}

.fixed-grade-card h4,
.mine-grade-card h4 {
  margin: 0 0 10px;
  font-size: 17px;
}

.fixed-semester-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fixed-semester-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px;
}

.fixed-semester-card > b {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.fixed-course-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fixed-course-chip {
  display: inline-grid;
  gap: 2px;
  min-height: 42px;
  border: 1px solid #d7e2da;
  border-radius: var(--radius);
  background: #f5faf6;
  padding: 7px 9px;
}

.fixed-course-chip strong {
  font-size: 13px;
}

.fixed-course-chip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

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

.mine-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 14px;
}

.mine-curriculum-grid {
  display: grid;
  gap: 12px;
}

.mine-grade-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 14px;
}

.mine-semester-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px;
}

.mine-semester-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.mine-semester-head b {
  font-size: 14px;
}

.mine-semester-head span {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.mine-course-section {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mine-course-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.mine-course-chip {
  display: inline-grid;
  gap: 2px;
  min-height: 42px;
  border: 1px solid #d7e2da;
  border-radius: var(--radius);
  background: #f5faf6;
  padding: 7px 9px;
  min-width: 0;
}

.mine-course-chip strong {
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.mine-course-chip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.mine-course-chip.selected {
  border-color: #bfd4ef;
  background: #eef6ff;
}

.mine-course-chip.joint {
  border-color: #eadbc7;
  background: #fff8ea;
}

.additional-course-section {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

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

.additional-course-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.additional-course-list {
  display: grid;
  gap: 6px;
}

.additional-course-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  border: 1px solid #eadbc7;
  border-radius: var(--radius);
  background: #fffaf0;
  padding: 9px;
  min-width: 0;
}

.additional-course-item strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.additional-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.additional-course-meta span {
  border: 1px solid #eadbc7;
  border-radius: 999px;
  background: #fff;
  color: #9a5f12;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.25;
}

.additional-course-reason {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.additional-course-remove {
  min-height: 32px;
  border: 1px solid #e3b8b2;
  border-radius: var(--radius);
  background: #fff6f4;
  color: #b34437;
  padding: 0 10px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.additional-course-form {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.25fr) auto;
  gap: 8px;
  align-items: end;
  border: 1px solid #d7e2da;
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 9px;
  min-width: 0;
}

.additional-course-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.additional-course-form input {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.additional-course-form button {
  min-height: 38px;
  padding: 0 14px;
  white-space: nowrap;
}

.additional-course-form button:disabled,
.additional-course-form input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.additional-course-preview {
  grid-column: 1 / -1;
  margin: -1px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.35;
}

.additional-course-preview.valid {
  color: var(--green);
}

.planner-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.course-palette {
  position: sticky;
  top: 24px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
}

.palette-head {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  min-width: 0;
  max-width: 100%;
}

.palette-head input,
.course-palette input {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.recommend-box {
  border: 1px solid #cad8ce;
  border-radius: var(--radius);
  background: #f2f8f4;
  padding: 12px;
  margin-bottom: 12px;
  min-width: 0;
  max-width: 100%;
}

.recommend-box strong {
  display: block;
  margin-bottom: 8px;
}

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

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

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 0 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

a.tag:hover,
a.tag:focus-visible {
  border-color: var(--green);
  color: var(--green);
  outline: none;
}

.detail-hero,
.content-block,
.explainer-card,
.scenario-card,
.check-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
  gap: 22px;
  align-items: center;
  margin-bottom: 16px;
  padding: 22px;
}

.detail-hero h3 {
  margin: 10px 0 10px;
  font-size: clamp(23px, 2.25vw, 27px);
  line-height: 1.3;
  word-break: keep-all;
  text-wrap: balance;
}

.detail-hero p {
  margin-bottom: 0;
}

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

.keyword-help {
  width: 100%;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.in-page-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: -2px 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

.in-page-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 13px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.in-page-tabs a:hover,
.in-page-tabs a:focus-visible {
  border-color: #b9c9c0;
  background: #f4f8f5;
}

.in-page-tabs a.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.holistic-tabs a {
  border-color: #ead7d7;
}

.holistic-tabs a:hover,
.holistic-tabs a:focus-visible {
  background: #fff7f7;
}

.holistic-tabs a.active {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.admission-detail-page {
  max-width: 1120px;
}

.admission-detail-head {
  margin-bottom: 16px;
}

.admission-detail-head .section-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.admission-detail-head h1 {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.12;
}

.admission-detail-head .back-home-button {
  min-width: 104px;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 15px;
}

.admission-page-tabs {
  margin-bottom: 18px;
}

.admission-basis-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: start;
  margin: -4px 0 18px;
  padding: 11px 13px;
  border-left: 4px solid #b77a16;
  background: #fff8eb;
  color: #655844;
  font-size: 14px;
  line-height: 1.55;
}

.admission-basis-note strong { color: #8a5700; }
.admission-basis-note small { color: #786b58; white-space: nowrap; }

@media (max-width: 640px) {
  .admission-basis-note { grid-template-columns: 1fr; }
}

.admission-detail-guide {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8fbf9;
  padding: 16px;
  color: var(--muted);
  line-height: 1.55;
}

.admission-detail-guide b {
  color: var(--ink);
  font-size: 16px;
}

.admission-detail-guide ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.admission-tone-holistic .admission-detail-guide {
  background: #fff8f8;
}

.content-block,
.comparison-table,
.explainer-card,
.check-panel {
  scroll-margin-top: 24px;
}

.learner-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  margin-bottom: 16px;
  padding: 22px;
}

.learner-summary h3 {
  max-width: 860px;
  margin: 10px 0 16px;
  font-size: 24px;
  line-height: 1.35;
}

.learner-points,
.credit-example,
.insight-grid,
.process-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.learner-points article,
.credit-example div,
.insight-grid article,
.process-cards article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 14px;
}

.learner-points b,
.learner-points span,
.credit-example b,
.credit-example span,
.insight-grid b,
.insight-grid span,
.process-cards span,
.process-cards b,
.process-cards p {
  display: block;
}

.learner-points b,
.credit-example b,
.insight-grid b,
.process-cards b {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 15px;
}

.learner-points span,
.credit-example span,
.insight-grid span,
.process-cards p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.process-cards span {
  width: fit-content;
  min-width: 34px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  padding: 4px 9px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 900;
}

.process-cards p {
  margin-bottom: 0;
}

.admission-block-heading {
  max-width: 880px;
  margin-bottom: 14px;
}

.admission-block-heading h3 {
  margin: 8px 0 6px;
}

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

.compact-process-cards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.compact-process-cards article {
  padding: 12px;
}

.compact-process-cards b {
  font-size: 14px;
}

.compact-process-cards p {
  font-size: 13px;
}

.admission-data-literacy,
.effective-competition-block,
.record-evidence-note {
  border-left: 4px solid var(--blue);
}

.holistic-reading-guide,
.competency-models {
  border-left: 4px solid var(--red);
}

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

.checklist-inline span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fbfcfa;
  padding: 7px 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

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

.competency-model-grid article {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 14px;
}

.competency-model-grid b {
  width: 100%;
  margin-bottom: 2px;
}

.competency-model-grid span {
  border-radius: 999px;
  background: #fff3f3;
  color: #914646;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
}

.content-block {
  margin-top: 16px;
  padding: 20px;
}

.content-block p {
  margin-bottom: 16px;
}

#subject-calculation table {
  table-layout: fixed;
  min-width: 680px;
}

#subject-calculation th,
#subject-calculation td {
  vertical-align: middle;
  word-break: keep-all;
}

#subject-calculation th:nth-child(1),
#subject-calculation td:nth-child(1) {
  width: 92px;
  text-align: center;
  white-space: nowrap;
  font-weight: 900;
}

#subject-calculation th:nth-child(2),
#subject-calculation td:nth-child(2) {
  width: 116px;
}

#subject-calculation th:nth-child(3),
#subject-calculation td:nth-child(3) {
  width: 280px;
}

#subject-calculation th:nth-child(4),
#subject-calculation td:nth-child(4) {
  width: 192px;
}

.curriculum-career-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.curriculum-career-note h3 {
  margin: 8px 0;
}

.curriculum-career-note p {
  margin-bottom: 0;
}

.career-note-actions {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.career-note-actions span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.career-note-actions b {
  color: var(--ink);
}

.subject-page-grid,
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
}

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

.explainer-card,
.scenario-card {
  padding: 20px;
}

.explainer-card h3,
.scenario-card h3 {
  margin-top: 10px;
}

.explainer-card p,
.scenario-card p {
  margin-bottom: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.scenario-card strong {
  display: block;
  margin-top: 12px;
  color: var(--ink);
  line-height: 1.5;
}

.compact-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
}

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

.type-grid div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 13px;
}

.type-grid b,
.type-grid span {
  display: block;
}

.type-grid span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.course-choice-note {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  margin-top: 14px;
  padding: 16px;
}

.course-choice-note h4 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 17px;
}

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

.choice-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 14px;
}

.choice-grid b,
.choice-grid span {
  display: block;
}

.choice-grid b {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 15px;
}

.choice-grid span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.document-impact {
  border: 1px solid #d8c7b0;
  border-radius: var(--radius);
  background: #fffaf2;
  margin-top: 14px;
  padding: 16px;
}

.document-impact h4 {
  margin: 8px 0 8px;
  color: var(--ink);
  font-size: 18px;
}

.document-impact p {
  margin-bottom: 12px;
}

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

.impact-list article {
  border: 1px solid #eadbc7;
  border-radius: var(--radius);
  background: #fff;
  padding: 14px;
}

.impact-list b {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 15px;
}

.impact-list ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.evidence-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 14px;
  overflow-x: auto;
}

.evidence-grid h4 {
  margin: 0 0 10px;
  font-size: 15px;
}

.evidence-grid table {
  min-width: 0;
  margin-top: 0;
  font-size: 13px;
}

.evidence-grid th,
.evidence-grid td {
  padding: 10px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.recommendation-tool {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 16px;
}

.recommendation-use-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.recommendation-use-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 14px;
}

.recommendation-use-grid b,
.recommendation-use-grid span {
  display: block;
}

.recommendation-use-grid b {
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 15px;
}

.recommendation-use-grid span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.recommendation-view-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  margin: 14px 0;
  padding: 12px;
}

.recommendation-view-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.recommendation-view-tabs button,
.recommendation-deep-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: 0 13px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.recommendation-view-tabs button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.recommendation-deep-link {
  border-color: #e8d4ad;
  background: #fff8e8;
  color: #7b5415;
}

.recommendation-view-panel p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.recommendation-tool.major-mode .recommendation-controls,
.recommendation-tool.university-mode .recommendation-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.recommendation-tool.subject-mode .recommendation-controls {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
}

.recommendation-tool.major-mode .recommendation-subject-control,
.recommendation-tool.major-mode .recommendation-university-control,
.recommendation-tool.subject-mode .recommendation-major-control,
.recommendation-tool.subject-mode .recommendation-university-control,
.recommendation-tool.university-mode .recommendation-major-control,
.recommendation-tool.university-mode .recommendation-subject-control {
  display: none;
}

.recommendation-university-control {
  display: none;
}

.recommendation-tool.university-mode .recommendation-university-control {
  display: grid;
}

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

.recommendation-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.quick-major-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}

.quick-major-row > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.quick-major-row button,
.recommendation-card-head button,
.subject-match-card button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.recommendation-results {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.recommendation-result-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.recommendation-result-head h4 {
  margin: 0;
  font-size: 17px;
}

.recommendation-result-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.recommendation-card,
.subject-match-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 16px;
}

.recommendation-card-head,
.subject-match-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.recommendation-card h4,
.subject-match-card h4 {
  margin: 8px 0 10px;
  font-size: 18px;
}

.recommendation-card p,
.subject-match-card p {
  margin-bottom: 8px;
}

.recommendation-card small {
  color: var(--muted);
  line-height: 1.45;
}

.subject-badge-section {
  margin-top: 10px;
}

.subject-badge-section.compact {
  margin-top: 8px;
}

.subject-badge-section b {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 7px;
  font-size: 14px;
}

.subject-badge-section b span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.subject-badge-section.suggested {
  border-top: 1px dashed var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.recommendation-department-examples {
  display: grid;
  gap: 8px;
  border-top: 1px dashed var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.recommendation-department-examples b {
  color: var(--ink);
  font-size: 13px;
}

.recommendation-department-examples div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.recommendation-department-examples span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fbfcfa;
  padding: 5px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.university-recommendation-card h4 span {
  display: inline;
  color: var(--muted);
  font-weight: 800;
}

.university-recommendation-note {
  border-top: 1px dashed var(--line);
  margin-top: 12px;
  padding-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.subject-badge-groups {
  display: grid;
  gap: 8px;
}

.subject-badge-group {
  display: grid;
  gap: 5px;
}

.subject-badge-group-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.subject-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.subject-badge {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 4px 9px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.subject-badge small {
  color: inherit;
  opacity: 1;
  font-size: 11px;
}

.subject-badge.grade-1 {
  border-color: #b9d7c6;
  background: #ecf7f0;
  color: var(--green);
}

.subject-badge.grade-2 {
  border-color: #bfd4ef;
  background: #eef6ff;
  color: var(--blue);
}

.subject-badge.grade-3 {
  border-color: #d4c4e8;
  background: #f5efff;
  color: #6d4aa2;
}

.subject-badge.grade-multi {
  border-color: #cbd7cc;
  background: #fbfcfa;
  color: var(--ink);
}

.subject-badge.missing-core {
  border-color: #f0b9b3;
  background: #fff1ef;
  color: var(--red);
}

.subject-badge.missing-recommended {
  border-color: #eadbc7;
  background: #fffaf2;
  color: #7b5415;
}

.course-title-with-info {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}

.course-title-with-info strong {
  display: inline;
  min-width: 0;
  overflow-wrap: anywhere;
}

.subject-info-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid #cbd7cc;
  border-radius: 50%;
  background: #f8fbf8;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.subject-info-button:hover {
  border-color: var(--green);
  background: #ecf7f0;
}

body.modal-open {
  overflow: hidden;
}

.subject-info-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}

.subject-info-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 33, 28, 0.42);
}

.subject-info-dialog {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  max-height: min(680px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 22px;
}

.subject-info-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.subject-info-dialog h3 {
  margin: 4px 40px 10px 0;
  font-size: 23px;
}

.subject-info-copy {
  margin-bottom: 14px;
  color: var(--muted);
  line-height: 1.6;
  word-break: keep-all;
}

.subject-info-section {
  border: 1px solid #d7e2da;
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 12px;
}

.subject-info-section b {
  display: block;
  margin-bottom: 8px;
}

.subject-info-track-list {
  display: grid;
  gap: 10px;
}

.subject-info-track-card {
  border: 1px solid #d9e4dc;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

.subject-info-track-card strong {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 14px;
}

.subject-info-major-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.subject-info-major-list span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid #bfd4ef;
  border-radius: 999px;
  background: #eef6ff;
  color: var(--blue);
  padding: 4px 9px;
  font-size: 13px;
  font-weight: 900;
}

.subject-info-caution {
  margin: 14px 0 0;
  border-left: 4px solid #eadbc7;
  background: #fff8ea;
  padding: 10px 12px;
  color: #6f5a35;
  font-size: 13px;
  line-height: 1.55;
}

.subject-guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.subject-guide-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid #d7e2da;
  border-radius: 999px;
  background: #f8faf8;
  color: var(--muted);
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 900;
}

.subject-guide-meta .subject-guide-badge {
  border-color: #c7d9eb;
  background: #f1f6fb;
  color: var(--blue);
}

.subject-guide-opening {
  border-left: 4px solid var(--green);
  background: #f3f8f4;
  padding: 12px 14px;
}

.subject-guide-opening > b {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}

.subject-guide-offering-list {
  display: grid;
  gap: 6px;
}

.subject-guide-offering {
  display: block;
  border: 1px solid #d4dfd7;
  background: #fff;
  padding: 7px 9px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  word-break: keep-all;
}

.subject-guide-offering.grade-1 {
  border-left: 4px solid #3d936b;
}

.subject-guide-offering.grade-2 {
  border-left: 4px solid #3976b5;
}

.subject-guide-offering.grade-3 {
  border-left: 4px solid #7855a5;
}

.subject-guide-opening-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.subject-guide-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  border-block: 1px solid var(--line);
  margin-top: 14px;
}

.subject-guide-summary-card {
  min-width: 0;
  padding: 14px;
}

.subject-guide-summary-card + .subject-guide-summary-card {
  border-left: 1px solid var(--line);
}

.subject-guide-summary-card > span,
.subject-guide-detail-section > b {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.subject-guide-summary-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  word-break: keep-all;
}

.subject-guide-chip-list,
.subject-guide-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.subject-guide-chip-list span,
.subject-guide-related-list span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid #d7e2da;
  border-radius: 999px;
  background: #fff;
  padding: 3px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.subject-guide-related-list span {
  border-color: #c9d9ea;
  background: #f3f7fb;
  color: #315f91;
}

.subject-guide-detail-section {
  border-bottom: 1px solid var(--line);
  padding: 14px;
}

.subject-guide-detail-section ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.subject-guide-major-details {
  border-bottom: 1px solid var(--line);
  padding: 0 14px;
}

.subject-guide-major-details summary {
  cursor: pointer;
  padding: 13px 0;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.subject-guide-major-details[open] summary {
  margin-bottom: 2px;
}

.subject-guide-major-details .subject-info-track-list {
  padding-bottom: 14px;
}

.subject-guide-basis {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.recommendation-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  margin-top: 12px;
  padding: 10px 12px;
}

.recommendation-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.legend-chip {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.legend-chip.grade-1 {
  border-color: #b9d7c6;
  background: #ecf7f0;
}

.legend-chip.grade-2 {
  border-color: #bfd4ef;
  background: #eef6ff;
}

.legend-chip.grade-3 {
  border-color: #d4c4e8;
  background: #f5efff;
}

.legend-chip.missing-core {
  border-color: #f0b9b3;
  background: #fff1ef;
}

.legend-chip.missing-recommended {
  border-color: #eadbc7;
  background: #fffaf2;
}

.advanced-page .main-content {
  width: min(1120px, calc(100% - 40px));
}

.advanced-hero {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 18px;
  padding: 22px;
}

.advanced-hero h1 {
  margin-bottom: 0;
}

.advanced-hero p:last-child {
  max-width: 820px;
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.page-link-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.external-resource-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid #c9d9eb;
  border-radius: var(--radius);
  background: #f5f9ff;
  margin-top: 16px;
  padding: 20px 22px;
}

.external-resource-card h3 {
  margin: 8px 0 6px;
  font-size: 21px;
  line-height: 1.35;
  word-break: keep-all;
}

.external-resource-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  word-break: keep-all;
}

.external-resource-card .page-link-button {
  min-width: 138px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .external-resource-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }

  .external-resource-card .page-link-button {
    width: 100%;
  }
}

.availability-marks {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.availability-mark {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 900;
}

.availability-mark.grade-1 {
  background: #dff1e6;
  color: var(--green);
}

.availability-mark.grade-2 {
  background: #e3f0ff;
  color: var(--blue);
}

.availability-mark.grade-3 {
  background: #efe6fb;
  color: #6d4aa2;
}

.check-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 18px;
  margin-top: 16px;
  padding: 20px;
}

.check-panel p {
  margin-bottom: 0;
}

.checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.checklist label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 10px;
  color: var(--ink);
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.checklist input {
  min-height: auto;
  margin-top: 4px;
}

.next-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.bottom-actions {
  margin-top: 14px;
}

.source-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}

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

.accordion-list details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 0;
  overflow: hidden;
}

.accordion-list summary {
  cursor: pointer;
  padding: 14px 16px;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.45;
  word-break: keep-all;
}

.accordion-list details[open] summary {
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.accordion-list p {
  margin: 0;
  padding: 14px 16px 16px;
}

.timeline-cards,
.trend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

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

.timeline-cards div,
.trend-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 14px;
}

.timeline-cards b,
.timeline-cards span,
.trend-grid b,
.trend-grid span {
  display: block;
}

.timeline-cards b,
.trend-grid b {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 17px;
}

.timeline-cards span,
.trend-grid span {
  color: var(--muted);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.table-caption {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.course-pool {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.course-card {
  cursor: grab;
  min-width: 0;
  max-width: 100%;
}

.course-card:active {
  cursor: grabbing;
}

.course-card.disabled-choice {
  cursor: not-allowed;
  opacity: 0.58;
}

.quick-add-row {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  min-width: 0;
  width: 100%;
}

.quick-action-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(78px, 92px));
  gap: 6px;
  justify-content: start;
  min-width: 0;
  max-width: 100%;
  width: max-content;
}

.quick-add-row button,
.quick-action-pair button {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0 8px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-action-pair button:disabled {
  cursor: not-allowed;
  background: #f2f4f1;
  color: #9aa39c;
}

.quick-action-pair .cancel-choice-button:not(:disabled) {
  border-color: #e6c9c5;
  background: #fff5f4;
  color: var(--red);
}

.course-card.recommended {
  border-color: #a8c5b4;
  box-shadow: inset 4px 0 0 var(--green);
}

.planning-workspace {
  display: grid;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}

.planner-choice-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
}

.planner-choice-head h3 {
  margin-bottom: 0;
}

.year-tabs {
  display: flex;
  gap: 8px;
}

.year-tab {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--muted);
  padding: 0 16px;
  font-weight: 900;
}

.year-tab.active {
  background: var(--ink);
  color: #fff;
}

.semester-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.semester-board {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.semester-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #fbfcfa;
  padding: 14px;
}

.semester-head h3,
.semester-head p {
  margin-bottom: 0;
}

.credit-badge {
  display: grid;
  place-items: center;
  min-width: 84px;
  min-height: 42px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.credit-badge.ok {
  background: #e7f5ec;
  color: var(--green);
}

.credit-badge.warn {
  background: #fff4df;
  color: var(--amber);
}

.drop-zone,
.joint-zone {
  min-height: 190px;
  border-bottom: 1px solid var(--line);
  padding: 12px;
}

.drop-zone.drag-over,
.joint-zone.drag-over {
  background: #eef6ff;
}

.joint-zone {
  min-height: 96px;
  background: #fbfaf7;
}

.board-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.planned-course {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 32px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  min-width: 0;
}

.planned-course > div {
  min-width: 0;
}

.planned-course strong {
  overflow-wrap: anywhere;
}

.planned-credit {
  display: grid;
  place-items: center;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.remove-course {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--red);
  font-weight: 900;
}

.semester-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
}

.summary-chip {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.summary-chip b {
  display: block;
  color: var(--ink);
  font-size: 20px;
}

.activity-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.activity-panel {
  padding: 16px;
}

.planner-summary-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
}

.planner-summary-panel h3 {
  margin-bottom: 12px;
}

.planner-summary-table {
  margin-top: 0;
  font-size: 14px;
}

.planner-summary-table th {
  width: 130px;
  white-space: nowrap;
}

.planner-summary-table small {
  color: var(--muted);
  font-weight: 800;
}

.field-grid {
  display: grid;
  gap: 10px;
}

.field-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.self-eval-head {
  display: grid;
  gap: 16px;
}

.self-eval-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(520px, 100%);
}

.self-eval-mode-switch button,
.creative-eval-type-switch button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  padding: 0 14px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.self-eval-mode-switch button.active,
.creative-eval-type-switch button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.self-eval-identity-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) auto;
  gap: 10px;
  align-items: end;
  width: min(440px, 100%);
}

.self-eval-identity-row label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.self-eval-identity-row input {
  width: 100%;
}

.reset-button {
  border-color: #d8b1ab;
  background: #fffafa;
  color: #a54136;
}

.reset-button:hover {
  border-color: #b85a4e;
  background: #fff3f1;
  color: #8f3027;
}

.self-eval-control-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(140px, 0.85fr) minmax(220px, 1.45fr) auto auto;
  width: 100%;
  align-items: end;
}

.self-eval-control-row label {
  min-width: 0;
}

.creative-eval-control-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.35fr) minmax(140px, 0.8fr) auto auto;
  width: 100%;
  align-items: end;
}

.creative-eval-control-row label {
  min-width: 0;
}

.self-eval-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.creative-eval-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.self-eval-guide article,
.creative-eval-guide article,
.self-eval-side-panel,
.self-eval-form,
.self-eval-field {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.self-eval-guide article {
  padding: 18px;
}

.creative-eval-guide article {
  padding: 18px;
}

.self-eval-guide h3 {
  margin-bottom: 8px;
}

.creative-eval-guide h3 {
  margin-bottom: 8px;
}

.self-eval-guide p {
  margin-bottom: 0;
}

.self-eval-evidence-starter {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
  border: 1px solid #cfe0d7;
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  background: #f7fbf8;
  padding: 16px;
}

.self-eval-evidence-starter[hidden] {
  display: none;
}

.self-eval-evidence-starter h3 {
  margin: 7px 0;
  font-size: 18px;
  line-height: 1.4;
}

.self-eval-evidence-starter p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.self-eval-evidence-starter ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.self-eval-evidence-starter li {
  min-width: 0;
  border: 1px solid #d8e4dc;
  border-radius: 6px;
  background: #fff;
  padding: 10px;
}

.self-eval-evidence-starter li span,
.self-eval-evidence-starter li b,
.self-eval-evidence-starter li small {
  display: block;
}

.self-eval-evidence-starter li span {
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
}

.self-eval-evidence-starter li b {
  margin-top: 4px;
  font-size: 13px;
}

.self-eval-evidence-starter li small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.creative-eval-guide p {
  margin-bottom: 0;
}

.creative-eval-workspace {
  display: grid;
  gap: 12px;
}

.creative-eval-type-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.creative-eval-example-toolbar {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(240px, 1.2fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
}

.creative-eval-example-toolbar label {
  min-width: 0;
  color: var(--muted);
  font-weight: 900;
}

.creative-eval-example-toolbar select {
  width: 100%;
  margin-top: 6px;
}

.creative-eval-example-toolbar p {
  grid-column: 1 / -1;
  align-self: center;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.creative-eval-layout {
  width: 100%;
}

.self-eval-guide-button {
  margin-top: 12px;
}

.self-eval-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
  gap: 16px;
  align-items: start;
}

.self-eval-side-panel {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
  padding: 18px;
}

.self-eval-side-panel h3 {
  margin-bottom: 0;
}

.self-eval-side-panel p {
  margin-bottom: 0;
}

.self-eval-status {
  border: 1px solid #d8e4dc;
  border-radius: var(--radius);
  background: #f5faf6;
  color: var(--green);
  padding: 10px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
}

.self-eval-evidence-check {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 11px;
}

.self-eval-evidence-check.complete {
  border-color: #b8d5c5;
  background: #f3faf6;
}

.self-eval-evidence-check-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.self-eval-evidence-check-head span {
  border-radius: 999px;
  background: #e8f3ed;
  color: var(--green);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 900;
}

.self-eval-evidence-check ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.self-eval-evidence-check li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.self-eval-evidence-check li span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #cfd9d3;
  border-radius: 50%;
  background: #fff;
  color: #fff;
  font-size: 10px;
}

.self-eval-evidence-check li.complete {
  color: var(--ink);
}

.self-eval-evidence-check li.complete span {
  border-color: var(--green);
  background: var(--green);
}

.self-eval-evidence-check p {
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.self-eval-competency-box {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.self-eval-competency-box b {
  display: block;
  margin-bottom: 2px;
}

.self-eval-competency-box label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.self-eval-competency-box .self-eval-competency-note-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.self-eval-competency-note-label span {
  color: #91a099;
  font-size: 12px;
}

.self-eval-competency-note {
  width: 100%;
  min-height: 40px;
  border-radius: 10px;
  font-size: 13px;
}

.self-eval-form {
  padding: 16px;
}

.self-eval-form > div {
  display: grid;
  gap: 12px;
}

.self-eval-submit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 16px;
}

.self-eval-submit-row button {
  width: 100%;
}

.self-eval-field {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.self-eval-field > span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.self-eval-writing-cue {
  display: block;
  border-left: 3px solid #cbd9d3;
  padding-left: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.self-eval-field textarea {
  min-height: 110px;
  width: 100%;
  height: auto;
  overflow-y: hidden;
  resize: none;
}

.self-eval-field textarea[rows="2"] {
  min-height: 66px;
}

.self-eval-print-view {
  display: none;
}

.self-help-button {
  width: 24px;
  height: 24px;
}

.creative-help-principle {
  border: 1px solid #d8e4dc;
  border-radius: var(--radius);
  background: #f5faf6;
  margin: 14px 0;
  padding: 13px;
}

.creative-help-principle b {
  display: block;
  margin-bottom: 5px;
}

.creative-help-principle p {
  margin: 0;
}

.creative-help-example-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.creative-help-example-list article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 13px;
}

.creative-help-example-list article.active {
  border-color: #83b89a;
  background: #f3faf5;
}

.creative-help-example-list span,
.creative-help-example-list b {
  display: block;
}

.creative-help-example-list span {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.creative-help-example-list b {
  margin: 3px 0 8px;
}

.creative-help-example-list p {
  margin: 0;
}

.creative-flow-summary {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.creative-flow-summary article {
  border: 1px solid var(--line);
  border-left: 4px solid #9bbbaa;
  border-radius: var(--radius);
  background: var(--surface);
  padding: 15px;
}

.creative-flow-summary article.active {
  border-color: #6ba181;
  background: #f3faf5;
}

.creative-flow-heading {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
}

.creative-flow-heading span {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.creative-flow-summary dl,
.creative-flow-summary dl div {
  margin: 0;
}

.creative-flow-summary dl {
  display: grid;
  gap: 8px;
}

.creative-flow-summary dl div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
}

.creative-flow-summary dt {
  color: var(--muted);
  font-weight: 900;
}

.creative-flow-summary dd {
  margin: 0;
}

.self-help-example-grid {
  display: grid;
  gap: 10px;
}

.self-help-example-grid article {
  border: 1px solid #d9e4dc;
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 12px;
}

.self-help-example-grid article:last-child {
  border-color: #eed0ca;
  background: #fff8f6;
}

.self-help-section {
  border: 1px solid #d9e4dc;
  border-radius: var(--radius);
  background: #fff;
  margin-top: 12px;
  padding: 13px;
}

.self-help-section b {
  display: block;
  margin-bottom: 6px;
}

.self-help-section p {
  margin: 0 0 8px;
}

.self-help-section p:last-child {
  margin-bottom: 0;
}

.self-help-section span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.self-help-section.subject-case {
  background: #f7fbf8;
}

.self-help-section.subject-case strong {
  color: var(--green);
}

.self-help-section.concept-case {
  border-color: #e7dcc3;
  background: #fffdf7;
}

.concept-depth-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.concept-depth-list article {
  border: 1px solid #e4ebe6;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.concept-depth-list article.active {
  border-color: #97c4a6;
  background: #f2faf5;
}

.concept-depth-list b {
  color: var(--green);
  font-size: 13px;
}

.concept-depth-list p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.advanced-grade-case .advanced-grade-intro {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.concept-depth-list.detailed {
  grid-template-columns: 1fr;
  gap: 10px;
}

.concept-depth-list.detailed article {
  padding: 12px;
}

.concept-depth-list.detailed p {
  margin-top: 7px;
}

.concept-depth-list.detailed strong {
  display: inline-block;
  min-width: 58px;
  color: var(--ink);
}

.self-help-convert-box {
  border-top: 1px solid #eadfc8;
  margin-top: 12px;
  padding-top: 12px;
}

.self-help-convert-box b {
  display: block;
  margin-bottom: 6px;
}

.self-help-convert-box p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.self-help-deep-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.advanced-sechuk-list {
  display: grid;
  gap: 12px;
}

.advanced-sechuk-list article {
  border: 1px solid #d9e4dc;
  border-radius: var(--radius);
  background: #fbfcfa;
  padding: 14px;
}

.advanced-sechuk-list article > div {
  border-top: 1px solid #e4ebe6;
  margin-top: 10px;
  padding-top: 10px;
}

.advanced-sechuk-list b {
  display: block;
  margin-bottom: 4px;
}

.advanced-sechuk-list p {
  margin: 0;
}

.self-help-example-grid b {
  display: block;
  margin-bottom: 6px;
}

.self-help-example-grid p {
  margin-bottom: 0;
  color: var(--muted);
}

.course-designer-setup,
.course-designer-results,
.course-designer-review {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px;
}

[data-course-designer-panel][hidden] {
  display: none !important;
}

.course-designer-document-bar {
  display: grid;
  grid-template-columns: minmax(180px, 260px) auto minmax(220px, 1fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.course-designer-document-bar label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.course-designer-document-bar > div {
  display: flex;
  gap: 8px;
}

.course-designer-document-bar > span {
  align-self: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.course-designer-step-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.course-designer-step-tabs button {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.course-designer-step-tabs button span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #edf2ee;
  font-size: 12px;
  font-weight: 900;
}

.course-designer-step-tabs button b {
  font-size: 13px;
}

.course-designer-step-tabs button.active {
  border-color: var(--teal);
  background: #eef8f4;
  color: var(--ink);
}

.course-designer-step-tabs button.active span {
  background: var(--teal);
  color: #fff;
}

.course-designer-step-tabs button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.course-designer-setup {
  margin-bottom: 18px;
}

.course-designer-control-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr);
  gap: 16px;
  align-items: end;
  margin-bottom: 22px;
}

.course-designer-control-grid > label,
.course-designer-status-fieldset {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--muted);
  font-weight: 800;
}

.course-designer-status-fieldset legend {
  margin-bottom: 7px;
  padding: 0;
}

.course-designer-control-grid select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
  font-weight: 800;
}

.course-designer-status-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.course-designer-status-switch button {
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--muted);
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 800;
}

.course-designer-status-switch button.active {
  border-color: var(--teal);
  background: #edf8f5;
  color: var(--teal);
  box-shadow: inset 0 -3px 0 var(--teal);
}

.course-designer-path-guide {
  margin-bottom: 20px;
  border-left: 4px solid var(--teal);
  background: #f2f8f5;
  padding: 12px 14px;
}

.course-designer-path-guide > div {
  display: grid;
  gap: 8px;
}

.course-designer-path-guide b {
  font-size: 13px;
  line-height: 1.5;
}

.course-designer-path-guide span {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.course-designer-path-guide em {
  border: 1px solid #cee0d8;
  border-radius: 999px;
  background: #fff;
  padding: 4px 8px;
  color: var(--teal);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.course-designer-path-guide i {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.course-designer-exploration {
  margin-bottom: 20px;
  border: 1px solid #cfe0db;
  border-radius: var(--radius);
  background: #f8fbfa;
  padding: 14px;
}

.course-designer-exploration-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 11px;
}

.course-designer-exploration-head h3,
.course-designer-exploration-head p {
  margin: 0;
}

.course-designer-exploration-head h3 {
  margin-top: 3px;
  font-size: 16px;
}

.course-designer-exploration-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.course-designer-exploration-head > strong {
  flex: 0 0 auto;
  border-radius: 6px;
  background: #e5f3ef;
  padding: 7px 10px;
  color: var(--teal);
  font-size: 12px;
}

.course-designer-exploration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.course-designer-exploration-button {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 10px;
  color: var(--ink);
  text-align: left;
}

.course-designer-exploration-button b {
  font-size: 12px;
  line-height: 1.4;
}

.course-designer-exploration-button small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.course-designer-exploration-button.active {
  border-color: var(--teal);
  background: #eaf7f3;
  box-shadow: inset 4px 0 0 var(--teal);
}

.course-designer-interest-head,
.course-designer-actions,
.course-designer-result-head,
.course-designer-map-head,
.course-designer-alternative-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
}

.course-designer-interest-head h3,
.course-designer-result-head h3,
.course-designer-map-head h3,
.course-designer-alternative-head h3 {
  margin: 4px 0 0;
}

.course-designer-limit-note,
.course-designer-no-rank {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.course-designer-no-rank {
  color: var(--teal);
  font-weight: 800;
}

.course-designer-scope-note {
  max-width: 760px;
  margin: 10px 0 0;
  border-left: 3px solid var(--teal);
  background: #edf8f5;
  padding: 9px 11px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.course-designer-interest-head > strong {
  display: grid;
  place-items: center;
  min-width: 64px;
  min-height: 36px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--teal);
}

.course-designer-interest-groups {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.course-designer-interest-group {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.course-designer-interest-group h4 {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.course-designer-interest-group > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.course-designer-interest-button {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: 12px;
  text-align: left;
}

.course-designer-interest-button b {
  padding-right: 22px;
  font-size: 14px;
  line-height: 1.35;
}

.course-designer-interest-button small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.course-designer-interest-button.active {
  border-color: var(--teal);
  background: #edf8f5;
  box-shadow: inset 4px 0 0 var(--teal);
}

.course-designer-interest-button.active::after {
  content: "✓";
  position: absolute;
  top: 9px;
  right: 10px;
  color: var(--teal);
  font-weight: 900;
}

.course-designer-interest-button.suggested {
  border-color: #9ccfc1;
}

.course-designer-suggested-label {
  justify-self: start;
  border-radius: 999px;
  background: #e2f3ee;
  padding: 3px 6px;
  color: var(--teal);
  font-size: 9px;
  font-weight: 900;
}

.course-designer-priority-list {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.course-designer-priority-list > div {
  display: grid;
  gap: 2px;
}

.course-designer-priority-list > div b {
  font-size: 13px;
}

.course-designer-priority-list > div span {
  color: var(--muted);
  font-size: 10px;
}

.course-designer-priority-list ol {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-designer-priority-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 210px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 6px 7px;
}

.course-designer-priority-list li > span {
  border-radius: 999px;
  background: #edf8f5;
  padding: 3px 6px;
  color: var(--teal);
  font-size: 9px;
  font-weight: 900;
}

.course-designer-priority-list li > b {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-designer-priority-list li > div {
  display: flex;
  gap: 2px;
}

.course-designer-priority-list button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.course-designer-priority-list button:disabled {
  opacity: 0.35;
}

.course-designer-actions {
  align-items: center;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.course-designer-actions p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.course-designer-actions > div {
  display: flex;
  gap: 8px;
}

.course-designer-version-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  border-left: 4px solid var(--amber);
  background: #fff8ea;
  padding: 13px 15px;
  color: #725326;
}

.course-designer-results {
  display: grid;
  gap: 18px;
}

.course-designer-result-tools > span,
.course-designer-map-head > span {
  max-width: 440px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
}

.course-designer-result-tools {
  display: grid;
  justify-items: end;
  gap: 8px;
  max-width: 440px;
}

.course-designer-result-tools > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.course-designer-result-tools .ghost-button,
.course-designer-result-tools .primary-button {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 12px;
}

.course-designer-option-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.course-designer-option-tab {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: 11px;
  text-align: left;
}

.course-designer-option-tab > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 34px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.course-designer-option-tab b {
  align-self: end;
  font-size: 15px;
}

.course-designer-option-tab small {
  align-self: start;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-designer-option-tab.active {
  border-color: var(--teal);
  background: #edf8f5;
  box-shadow: inset 0 -4px 0 var(--teal);
}

.course-designer-option-tab.active > span {
  background: var(--teal);
  color: #fff;
}

.course-designer-option-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 20px;
  align-items: center;
  border-left: 4px solid var(--teal);
  background: #f2f8f5;
  padding: 14px 16px;
}

.course-designer-option-intro > div:first-child {
  display: flex;
  gap: 12px;
  align-items: center;
}

.course-designer-option-intro h3,
.course-designer-option-intro p {
  margin: 0;
}

.course-designer-option-intro h3 {
  font-size: 18px;
}

.course-designer-option-intro > div:first-child p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.course-designer-option-code {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.course-designer-option-intro dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(68px, auto));
  gap: 6px;
  margin: 0;
}

.course-designer-option-intro dl > div {
  display: grid;
  justify-items: center;
  min-width: 76px;
  border-left: 1px solid #cfe0d8;
  padding: 2px 10px;
}

.course-designer-option-intro dt {
  color: var(--muted);
  font-size: 11px;
}

.course-designer-option-intro dd {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 900;
}

.course-designer-option-caution {
  grid-column: 1 / -1;
  border-top: 1px solid #d6e5de;
  padding-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.course-designer-comparison {
  display: grid;
  gap: 11px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}

.course-designer-comparison-head h3 {
  margin: 3px 0 0;
  font-size: 18px;
}

.course-designer-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.course-designer-compare-card,
.course-designer-connect-step {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 11px;
}

.course-designer-compare-card.common {
  border-color: #a8d3c7;
  background: #f4faf8;
}

.course-designer-compare-card > span,
.course-designer-connect-step > span {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 24px;
  border-radius: 999px;
  background: var(--surface-2);
  padding: 3px 7px;
  color: var(--teal);
  font-size: 9px;
  font-weight: 900;
}

.course-designer-compare-card h4,
.course-designer-connect-step h4 {
  margin: 7px 0;
  font-size: 13px;
}

.course-designer-compare-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.course-designer-compare-tags span {
  border-radius: 999px;
  background: var(--surface-2);
  padding: 4px 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.course-designer-compare-empty,
.course-designer-connect-step p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.course-designer-comparison-grid.clear-path {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.course-designer-connect-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 9px;
  align-content: start;
}

.course-designer-connect-step > div h4,
.course-designer-connect-step > div p {
  margin: 0;
}

.course-designer-connect-step .course-designer-compare-tags,
.course-designer-connect-step .course-designer-compare-empty {
  grid-column: 1 / -1;
}

.course-designer-explore-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.course-designer-explore-flow article {
  border-left: 3px solid var(--teal);
  background: #f6faf8;
  padding: 10px 11px;
}

.course-designer-explore-flow span {
  color: var(--teal);
  font-size: 10px;
  font-weight: 900;
}

.course-designer-explore-flow b {
  display: block;
  margin-top: 3px;
  font-size: 12px;
}

.course-designer-explore-flow p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.course-designer-conflicts {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) repeat(2, minmax(0, 1fr));
  gap: 7px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

.course-designer-conflicts > div,
.course-designer-conflicts article {
  display: grid;
  gap: 3px;
  align-content: start;
}

.course-designer-conflicts article {
  border-left: 3px solid var(--amber);
  background: #fffaf0;
  padding: 8px 9px;
}

.course-designer-conflicts b {
  font-size: 11px;
}

.course-designer-conflicts span,
.course-designer-conflicts p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.course-designer-map {
  display: grid;
  gap: 12px;
}

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

.course-designer-grade-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
  border-radius: var(--radius);
  background: #fff;
  padding: 13px;
}

.course-designer-grade-card.grade-2 {
  border-top-color: var(--blue);
}

.course-designer-grade-card.grade-3 {
  border-top-color: var(--violet);
}

.course-designer-grade-card > header {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 11px;
}

.course-designer-grade-card > header > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #edf7f1;
  color: var(--green);
  font-weight: 900;
}

.course-designer-grade-card.grade-2 > header > span {
  background: #edf4fb;
  color: var(--blue);
}

.course-designer-grade-card.grade-3 > header > span {
  background: #f2effa;
  color: var(--violet);
}

.course-designer-grade-card h4,
.course-designer-grade-card header small {
  display: block;
  margin: 0;
}

.course-designer-grade-card h4 {
  font-size: 17px;
}

.course-designer-grade-card header small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.course-designer-grade-card header small b {
  color: var(--ink);
}

.course-designer-foundation {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
}

.course-designer-foundation > b,
.course-designer-grade-courses > b {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
}

.course-designer-foundation > b small {
  margin-left: 3px;
  color: var(--muted);
  font-weight: 600;
}

.course-designer-grade-courses > b small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.course-designer-foundation > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.course-designer-foundation span {
  border-radius: 999px;
  background: var(--surface-2);
  padding: 4px 7px;
  color: var(--muted);
  font-size: 11px;
}

.course-designer-foundation span.empty {
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.course-designer-grade-courses {
  padding-top: 10px;
}

.course-designer-course-card {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.course-designer-grade-courses > b + .course-designer-course-card {
  border-top: 0;
  padding-top: 0;
}

.course-designer-course-head {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  align-items: flex-start;
}

.course-designer-course-head .course-title-with-info {
  min-width: 0;
}

.course-designer-course-head .course-title-with-info strong {
  font-size: 14px;
  line-height: 1.35;
}

.course-designer-source-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #eef4fb;
  color: var(--blue);
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.source-official-core .course-designer-source-badge {
  background: #fff0ef;
  color: var(--red);
}

.source-official-recommended .course-designer-source-badge {
  background: #fff7e8;
  color: var(--amber);
}

.source-field-guide .course-designer-source-badge {
  background: #eef4fb;
  color: var(--blue);
}

.source-suggested .course-designer-source-badge {
  background: #edf8f5;
  color: var(--teal);
}

.course-designer-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.course-designer-course-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 6px;
  color: var(--muted);
  font-size: 10px;
}

.course-designer-course-meta .course-designer-link-candidate {
  border-color: #e4c890;
  background: #fff8e9;
  color: #8a611e;
  font-weight: 800;
}

.course-designer-evidence {
  margin-top: 8px;
  border: 1px solid #d8e3de;
  border-radius: 6px;
  background: #f8fbf9;
  padding: 0 9px;
}

.course-designer-evidence summary {
  cursor: pointer;
  padding: 8px 0;
  color: var(--teal);
  font-size: 10px;
  font-weight: 900;
}

.course-designer-evidence ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0 0 7px 15px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.course-designer-evidence li span {
  margin-left: 3px;
  color: var(--ink);
  font-weight: 800;
}

.course-designer-evidence p,
.course-designer-evidence small {
  display: block;
  margin: 0;
  border-top: 1px solid #e0e8e4;
  padding: 7px 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.course-designer-course-card > p,
.course-designer-grade-empty {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.course-designer-course-card > .course-designer-course-reason b {
  color: var(--ink);
}

.course-designer-course-card > .course-designer-source-note {
  border-left: 2px solid #cbd9d3;
  background: #f7f9f8;
  padding: 6px 7px;
  font-size: 9px;
  line-height: 1.45;
}

.course-designer-more-courses {
  margin-top: 11px;
  border: 1px solid #cbdcd5;
  border-radius: 6px;
  background: #f8fbfa;
  overflow: hidden;
}

.course-designer-more-courses > summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  padding: 10px 11px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  list-style: none;
}

.course-designer-more-courses > summary::-webkit-details-marker {
  display: none;
}

.course-designer-more-courses > summary > span::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border: 1px solid #add0c5;
  border-radius: 50%;
  background: #fff;
  line-height: 1;
}

.course-designer-more-courses[open] > summary > span::before {
  content: "-";
}

.course-designer-more-courses > summary small {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #e4f2ed;
  padding: 3px 7px;
  color: var(--teal);
  font-size: 9px;
}

.course-designer-more-courses > p {
  margin: 0;
  border-top: 1px solid #dce6e2;
  padding: 9px 11px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.course-designer-more-course-list {
  border-top: 1px solid #dce6e2;
  background: #fff;
  padding: 0 11px 4px;
}

.course-designer-more-course-list .course-designer-course-card:first-child {
  border-top: 0;
}

.course-designer-decision {
  display: grid;
  gap: 7px;
  margin-top: 9px;
  border-top: 1px dashed var(--line);
  padding-top: 9px;
}

.course-designer-decision-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.course-designer-decision-head b {
  font-size: 11px;
}

.course-designer-decision-head span {
  color: var(--muted);
  font-size: 9px;
}

.course-designer-decision-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.course-designer-decision-switch button {
  min-width: 0;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  padding: 5px 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.course-designer-decision-switch button.active {
  border-color: var(--teal);
  background: #eaf7f3;
  color: var(--teal);
}

.course-designer-decision-switch button[data-course-designer-decision="exclude"].active {
  border-color: #d7aaa5;
  background: #fff3f2;
  color: var(--red);
}

.course-designer-decision input {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 6px 8px;
  color: var(--ink);
  font-size: 10px;
}

.course-designer-planner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.course-designer-add-button {
  min-height: 34px;
  border: 1px solid #b8d6cd;
  border-radius: 6px;
  background: #edf8f5;
  padding: 7px 11px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.course-designer-add-button:hover:not(:disabled) {
  border-color: var(--teal);
  background: #dff2ec;
}

.course-designer-add-button.selected,
.course-designer-add-button:disabled {
  border-color: var(--line);
  background: #f3f5f4;
  color: var(--muted);
  cursor: default;
}

.course-designer-grade-empty {
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.course-designer-alternatives {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.course-designer-alternative-head {
  align-items: start;
  margin-bottom: 10px;
}

.course-designer-alternative-head > p {
  max-width: 430px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

.course-designer-alternative-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.course-designer-alternative-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  background: #fff;
  padding: 11px;
}

.course-designer-alternative-card.source-official-core {
  border-left-color: var(--red);
}

.course-designer-alternative-card.source-official-recommended {
  border-left-color: var(--amber);
}

.course-designer-alternative-card.source-field-guide {
  border-left-color: var(--blue);
}

.course-designer-alternative-card.source-suggested {
  border-left-color: var(--teal);
}

.course-designer-alternative-card > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.course-designer-alternative-card > div span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #fff3e6;
  color: #a75c15;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 900;
}

.course-designer-alternative-card > small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.course-designer-alternative-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.course-designer-caution {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-left: 4px solid var(--amber);
  background: #fffaf0;
  padding: 13px 15px;
}

.course-designer-caution p {
  margin: 0;
  color: #735d39;
  font-size: 12px;
  line-height: 1.55;
}

.course-designer-review {
  display: grid;
  gap: 16px;
}

.course-designer-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.course-designer-review-head h3 {
  margin: 4px 0 5px;
}

.course-designer-review-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.course-designer-review-summary {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 8px;
}

.course-designer-review-summary > div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  background: #f7faf8;
  padding: 10px 12px;
}

.course-designer-review-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.course-designer-review-summary b {
  font-size: 13px;
}

.course-designer-review-grades {
  display: grid;
  gap: 10px;
}

.course-designer-review-grades > article {
  border: 1px solid var(--line);
  padding: 12px;
}

.course-designer-review-grades h4 {
  margin: 0 0 8px;
  font-size: 16px;
}

.course-designer-review-list {
  display: grid;
  gap: 6px;
}

.course-designer-review-list > div {
  display: grid;
  grid-template-columns: 82px minmax(120px, 0.7fr) minmax(180px, 1fr) minmax(220px, 1.5fr);
  gap: 8px;
  align-items: center;
  border-top: 1px solid #e1e7e2;
  padding-top: 7px;
}

.course-designer-review-list > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.course-designer-review-list small,
.course-designer-review-list p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.course-designer-review-list p {
  margin: 0;
}

.review-decision {
  border-radius: 999px;
  background: #eef2ef;
  padding: 5px 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.review-decision.priority {
  background: #e8f6ef;
  color: #21764f;
}

.review-decision.review {
  background: #fff4dd;
  color: #9a6510;
}

.review-decision.exclude {
  background: #fff0ee;
  color: #a34137;
}

.course-designer-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  transform: translateY(20px);
  opacity: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  padding: 12px 14px;
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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

  .hero-grid,
  .info-grid,
  .competency-grid,
  .planner-layout,
  .planner-mode-panel,
  .self-eval-guide,
  .creative-eval-guide,
  .self-eval-layout,
  .activity-layout,
  .curriculum-filter-panel,
  .curriculum-layout,
  .curriculum-dashboard,
  .curriculum-content,
  .detail-hero,
  .subject-page-grid,
  .subject-page-grid.two-columns,
  .check-panel,
  .recommendation-controls {
    grid-template-columns: 1fr 1fr;
  }

  .type-grid,
  .scenario-grid,
  .timeline-cards,
  .trend-grid,
  .admission-summary-grid,
  .learner-points,
  .credit-example,
  .insight-grid,
  .process-cards,
  .choice-grid,
  .impact-list,
  .evidence-grid,
  .recommendation-use-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-palette {
    position: static;
    max-height: none;
  }

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

  .recommendation-tool.major-mode .recommendation-controls,
  .recommendation-tool.subject-mode .recommendation-controls,
  .recommendation-tool.university-mode .recommendation-controls {
    grid-template-columns: 1fr 1fr;
  }

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

  .topic-search-label {
    grid-column: 1 / -1;
  }

  #topicResetButton {
    width: 100%;
  }

  .planner-mode-buttons,
  .planner-fixed-head,
  .planner-choice-head {
    justify-content: flex-start;
  }

  .planner-head {
    grid-template-columns: 1fr;
  }

  .planner-control-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch;
    width: 100%;
  }

  .planner-control-row button {
    width: 100%;
  }

  .self-eval-control-row {
    grid-template-columns: 1fr 1fr;
  }

  .creative-eval-control-row {
    grid-template-columns: 1fr 1fr;
  }

  .creative-eval-control-row button {
    width: 100%;
  }

  .creative-help-example-list {
    grid-template-columns: 1fr;
  }

  .self-eval-control-row button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .main-content {
    max-width: 100%;
    width: 100%;
    padding: 22px 16px 40px;
  }

  #planner,
  #planner .section-head,
  #planner .planner-mode-panel,
  #planner .planner-fixed-view,
  #planner .planner-mine-view,
  #planner .planner-mine-panel,
  #planner .planner-layout,
  #planner .course-palette,
  #planner .planning-workspace,
  #planner .planner-summary-panel,
  #planner .palette-head,
  #planner .recommend-box,
  #planner .course-pool,
  #planner .course-card,
  #planner .mine-grade-card,
  #planner .mine-semester-card,
  #planner .mine-course-list,
  #planner .additional-course-form,
  #planner .additional-course-item,
  #planner .quick-add-row {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
  }

  #planner .course-palette input {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .topbar,
  .section-head,
  .dashboard-band {
    display: grid;
  }

  .info-grid,
  .competency-grid,
  .planner-layout,
  .planner-mode-panel,
  .self-eval-guide,
  .creative-eval-guide,
  .self-eval-layout,
  .activity-layout,
  .curriculum-filter-panel,
  .curriculum-layout,
  .curriculum-dashboard,
  .curriculum-content,
  .semester-grid,
  .nav-list,
  .detail-hero,
  .subject-page-grid,
  .subject-page-grid.two-columns,
  .scenario-grid,
  .type-grid,
  .timeline-cards,
  .trend-grid,
  .admission-summary-grid,
  .learner-points,
  .credit-example,
  .insight-grid,
  .process-cards,
  .choice-grid,
  .impact-list,
  .evidence-grid,
  .recommendation-use-grid,
  .check-panel,
  .checklist,
  .recommendation-controls,
  .topic-ai-panel,
  .topic-guide-grid,
  .topic-filter-panel,
  .topic-card-grid {
    grid-template-columns: 1fr;
  }

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

  .topic-search-label {
    grid-column: auto;
  }

  .topic-caution-panel {
    display: grid;
  }

  .topic-caution-panel .primary-button {
    width: 100%;
  }

  .topic-card-footer {
    grid-template-columns: 1fr;
  }

  .subject-match-card,
  .recommendation-card-head {
    display: grid;
  }

  .in-page-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .in-page-tabs a {
    min-height: 34px;
    padding-inline: 11px;
    font-size: 13px;
  }

  .subject-info-modal {
    padding: 12px;
  }

  .subject-info-dialog {
    max-height: calc(100vh - 24px);
    padding: 18px;
  }

  .subject-info-dialog h3 {
    font-size: 20px;
  }

  .subject-guide-summary-grid {
    grid-template-columns: 1fr;
  }

  .subject-guide-summary-card {
    padding-inline: 10px;
  }

  .subject-guide-summary-card + .subject-guide-summary-card {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .subject-guide-detail-section,
  .subject-guide-major-details {
    padding-inline: 10px;
  }

  .subject-guide-offering {
    font-size: 11.5px;
  }

  .recommendation-tool.major-mode .recommendation-controls,
  .recommendation-tool.subject-mode .recommendation-controls,
  .recommendation-tool.university-mode .recommendation-controls {
    grid-template-columns: 1fr;
  }

  .planner-mode-buttons,
  .planner-fixed-head,
  .planner-mine-actions,
  .additional-course-form,
  .mine-export-actions,
  .planner-choice-head {
    display: grid;
  }

  .planner-mode-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .planner-mode-buttons button {
    min-height: 36px;
    padding: 0 4px;
    font-size: 11.5px;
    line-height: 1.15;
  }

  .planner-control-row {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .self-eval-control-row {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .creative-eval-control-row {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .creative-eval-example-toolbar {
    grid-template-columns: 1fr;
  }

  .creative-eval-example-toolbar button {
    width: 100%;
  }

  .creative-eval-control-row button {
    grid-column: auto;
  }

  .self-eval-identity-row {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .self-eval-identity-row button {
    width: 100%;
  }

  .creative-flow-summary dl div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .concept-depth-list {
    grid-template-columns: 1fr;
  }

  .self-eval-submit-row {
    grid-template-columns: 1fr;
  }

  .planner-mode-buttons button,
  .planner-mine-actions button,
  .mine-export-actions button,
  .planner-fixed-head .primary-button,
  .planner-choice-head .ghost-button,
  .planner-control-row .ghost-button,
  .planner-control-row .primary-button,
  .self-eval-control-row .ghost-button,
  .self-eval-control-row .primary-button,
  .creative-eval-control-row .ghost-button,
  .creative-eval-control-row .primary-button {
    width: 100%;
  }

  .self-eval-side-panel {
    position: static;
  }

  .planner-layout,
  .planning-workspace {
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
  }

  .additional-course-head,
  .additional-course-item {
    display: grid;
  }

  .additional-course-form {
    grid-template-columns: 1fr;
  }

  .additional-course-form button,
  .additional-course-remove {
    width: 100%;
  }

  .course-palette {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
  }

  .planner-layout {
    display: block;
  }

  .planner-layout > * + * {
    margin-top: 12px;
  }

  .course-palette,
  .planner-summary-panel,
  .planner-choice-head,
  .planner-mode-panel,
  .planner-fixed-panel,
  .planner-mine-panel {
    padding: 12px;
  }

  .mine-grade-card,
  .mine-semester-card {
    padding: 10px;
  }

  .mine-semester-head {
    display: grid;
    gap: 4px;
  }

  .mine-semester-head span {
    white-space: normal;
  }

  .course-card,
  .planned-course {
    padding: 9px 10px;
  }

  .course-card strong,
  .planned-course strong {
    font-size: 14px;
    line-height: 1.35;
  }

  .course-card small,
  .planned-course small {
    font-size: 12px;
    line-height: 1.35;
  }

  .quick-add-row {
    gap: 8px;
    margin-top: 8px;
  }

  .quick-action-pair {
    gap: 6px;
    grid-template-columns: repeat(2, minmax(72px, 86px));
  }

  .quick-add-row button,
  .quick-action-pair button {
    min-height: 34px;
    padding: 0 6px;
    font-size: 11.5px;
  }

  .semester-head {
    gap: 8px;
    padding: 12px;
  }

  .credit-badge {
    min-width: 70px;
    min-height: 38px;
  }

  .drop-zone,
  .joint-zone {
    padding: 10px;
  }

  .planned-course {
    grid-template-columns: minmax(0, 1fr) 48px 30px;
    gap: 6px;
  }

  .planned-credit {
    min-height: 30px;
  }

  .remove-course {
    width: 30px;
    height: 30px;
  }

  .semester-summary {
    gap: 6px;
    padding: 10px;
  }

  .summary-chip {
    padding: 8px 6px;
    font-size: 11px;
  }

  .fixed-semester-grid {
    grid-template-columns: 1fr;
  }

  .advanced-hero {
    padding: 16px;
  }

  .curriculum-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "plan scope"
      "grade semester"
      "search search";
  }

  .launch-card {
    gap: 8px;
    min-height: 156px;
    padding: 14px;
  }

  .launch-card strong {
    font-size: 17px;
  }

  .launch-card span:last-child {
    font-size: 12px;
    line-height: 1.45;
  }

  .timeline-band ol {
    grid-template-columns: 1fr;
  }

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

  .sechuk-step {
    min-height: 82px;
    padding: 10px;
  }

  .sechuk-step b {
    font-size: 14px;
  }

  .sechuk-step small {
    font-size: 11px;
  }

  .section-title-row {
    gap: 8px;
    align-items: center;
  }

  #curriculum-title,
  #subject-title,
  #holistic-title,
  #topic-title,
  #planner-title,
  #self-eval-title {
    font-size: clamp(20px, 5.4vw, 23px);
    line-height: 1.08;
  }

  .title-mindmap-icon,
  .title-subject-icon,
  .title-holistic-icon,
  .title-topic-icon,
  .title-planner-icon,
  .title-self-eval-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    padding: 4px;
  }

  .curriculum-lead {
    font-size: 14px;
  }

  .back-home-button {
    min-width: 84px;
    height: 36px;
    min-height: 36px;
    padding: 0 9px;
    font-size: 13px;
  }

  .admission-detail-head .section-title-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }

  .admission-detail-head h1 {
    gap: 6px;
    font-size: 20px;
    line-height: 1.08;
    white-space: nowrap;
  }

  .admission-detail-head h1 > span {
    white-space: nowrap;
  }

  .admission-detail-head .back-home-button {
    min-width: 78px;
    height: 34px;
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
  }

  .curriculum-table-wrap {
    overflow-x: hidden;
    padding-bottom: 4px;
  }

  .curriculum-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
    font-size: 10.5px;
  }

  .curriculum-table th,
  .curriculum-table td {
    padding: 6px 4px;
    line-height: 1.28;
    overflow-wrap: anywhere;
  }

  .curriculum-table th:nth-child(1),
  .curriculum-table td:nth-child(1) {
    width: 17%;
  }

  .curriculum-table th:nth-child(2),
  .curriculum-table td:nth-child(2) {
    width: 17%;
  }

  .curriculum-table th:nth-child(3),
  .curriculum-table td:nth-child(3) {
    width: 10%;
  }

  .curriculum-table th:nth-child(4),
  .curriculum-table td:nth-child(4) {
    width: 10%;
  }

  .curriculum-table th:nth-child(5),
  .curriculum-table td:nth-child(5) {
    width: 32%;
  }

  .curriculum-table th:nth-child(6),
  .curriculum-table td:nth-child(6) {
    width: 14%;
    text-align: center;
  }

  .curriculum-table .sort-button {
    justify-content: center;
    font-size: 11px;
  }

  .curriculum-table .sort-indicator {
    min-width: 16px;
    height: 16px;
    font-size: 9px;
  }

  .curriculum-table .section-badge,
  .curriculum-table .choice-badge {
    min-height: 22px;
    padding: 3px;
    font-size: 9px;
    line-height: 1.15;
    white-space: normal;
  }

  .curriculum-table td:nth-child(5) strong {
    font-size: 10.8px;
    line-height: 1.25;
  }

  .curriculum-table .course-title-with-info {
    gap: 3px;
  }

  .curriculum-table .subject-info-button {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .choice-badge-list {
    gap: 3px;
  }

  .curriculum-main {
    gap: 12px;
  }

  .curriculum-filter-panel,
  .curriculum-dashboard {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    padding: 14px;
  }

  .curriculum-career-note {
    grid-template-columns: 1fr;
  }

  .career-note-actions {
    justify-items: stretch;
  }

  .subject-list-panel {
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .main-content {
    padding-inline: 12px;
  }

  #curriculum-title,
  #subject-title,
  #holistic-title,
  #topic-title,
  #planner-title,
  #self-eval-title {
    font-size: clamp(18px, 5.15vw, 21px);
  }

  .title-mindmap-icon,
  .title-subject-icon,
  .title-holistic-icon,
  .title-topic-icon,
  .title-planner-icon,
  .title-self-eval-icon {
    width: 28px;
    height: 28px;
  }

  .back-home-button {
    min-width: 78px;
    padding-inline: 7px;
    font-size: 12px;
  }

  .course-palette {
    padding: 10px;
  }

  .course-pool {
    gap: 6px;
  }

  .quick-add-row {
    gap: 6px;
  }

  .quick-action-pair {
    grid-template-columns: repeat(2, minmax(68px, 82px));
  }

  .curriculum-table {
    font-size: 9.8px;
  }

  .curriculum-table th,
  .curriculum-table td {
    padding-inline: 3px;
  }

  .curriculum-table .section-badge,
  .curriculum-table .choice-badge {
    font-size: 8.6px;
  }

  .curriculum-table td:nth-child(5) strong {
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  .admission-detail-head h1 {
    gap: 4px;
    font-size: 17px;
  }

  .admission-detail-head h1 .title-subject-icon,
  .admission-detail-head h1 .title-holistic-icon {
    width: 25px;
    height: 25px;
  }

  .admission-detail-head .back-home-button {
    min-width: 66px;
    padding-inline: 6px;
    font-size: 11px;
  }
}

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  body.print-mine-curriculum {
    background: #fff;
    color: #111;
  }

  body.print-mine-curriculum .sidebar,
  body.print-mine-curriculum .topbar,
  body.print-mine-curriculum .section-head,
  body.print-mine-curriculum .planner-mode-panel,
  body.print-mine-curriculum #plannerFixedView,
  body.print-mine-curriculum #plannerChoiceView,
  body.print-mine-curriculum .mine-export-actions,
  body.print-mine-curriculum .additional-course-form,
  body.print-mine-curriculum .additional-course-remove,
  body.print-mine-curriculum .subject-info-modal,
  body.print-mine-curriculum .toast {
    display: none !important;
  }

  body.print-mine-curriculum .main-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  body.print-mine-curriculum .view {
    display: none !important;
  }

  body.print-mine-curriculum #planner.view,
  body.print-mine-curriculum #plannerMineView,
  body.print-mine-curriculum #plannerMineView[hidden] {
    display: block !important;
  }

  body.print-mine-curriculum .planner-mine-panel {
    border: 0;
    padding: 0;
  }

  body.print-mine-curriculum .planner-fixed-head {
    display: block;
    border-bottom: 2px solid #111;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  body.print-mine-curriculum .planner-fixed-head h3 {
    font-size: 20px;
  }

  body.print-mine-curriculum .planner-fixed-head p {
    color: #444;
  }

  body.print-mine-curriculum .subject-info-button {
    display: none !important;
  }

  body.print-mine-curriculum .mine-curriculum-grid {
    gap: 10px;
  }

  body.print-mine-curriculum .mine-grade-card,
  body.print-mine-curriculum .mine-semester-card,
  body.print-mine-curriculum .mine-course-chip {
    break-inside: avoid;
    box-shadow: none;
  }

  body.print-mine-curriculum .mine-grade-card {
    border-color: #cfd6cf;
    padding: 10px;
  }

  body.print-mine-curriculum .fixed-semester-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.print-mine-curriculum .mine-semester-card {
    gap: 8px;
    padding: 10px;
  }

  body.print-mine-curriculum .mine-course-chip {
    border-color: #cfd6cf;
    background: #fff;
  }

  body.print-mine-curriculum .additional-course-item {
    border-color: #cfd6cf;
    background: #fff;
  }

  body.print-self-evaluation {
    background: #fff;
    color: #111;
  }

  body.print-self-evaluation .sidebar,
  body.print-self-evaluation .topbar,
  body.print-self-evaluation .section-head,
  body.print-self-evaluation .self-eval-guide,
  body.print-self-evaluation .self-eval-layout,
  body.print-self-evaluation .subject-info-modal,
  body.print-self-evaluation .toast {
    display: none !important;
  }

  body.print-self-evaluation .main-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  body.print-self-evaluation .view {
    display: none !important;
  }

  body.print-self-evaluation #selfEvaluation.view,
  body.print-self-evaluation #selfEvalPrintView,
  body.print-self-evaluation #selfEvalPrintView[hidden] {
    display: block !important;
  }

  body.print-self-evaluation .self-eval-print-paper {
    font-size: 12px;
    line-height: 1.55;
  }

  body.print-self-evaluation .print-paper-head {
    border-bottom: 2px solid #111;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  body.print-self-evaluation .print-paper-head span {
    display: inline-block;
    border: 1px solid #111;
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 800;
  }

  body.print-self-evaluation .print-paper-head h2 {
    margin: 6px 0 3px;
    font-size: 22px;
  }

  body.print-self-evaluation .print-paper-head p,
  body.print-self-evaluation .print-meta-grid p,
  body.print-self-evaluation .print-competency-box p,
  body.print-self-evaluation .print-field-list p,
  body.print-self-evaluation .print-note {
    margin: 0;
  }

  body.print-self-evaluation .print-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #c9d3cc;
    margin-bottom: 10px;
  }

  body.print-self-evaluation .print-meta-grid > div {
    border-right: 1px solid #c9d3cc;
    padding: 8px;
  }

  body.print-self-evaluation .print-meta-grid > div:last-child {
    border-right: 0;
  }

  body.print-self-evaluation .print-meta-grid b,
  body.print-self-evaluation .print-competency-box b,
  body.print-self-evaluation .print-field-list b,
  body.print-self-evaluation .teacher-memo-box b {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
  }

  body.print-self-evaluation .print-competency-box,
  body.print-self-evaluation .teacher-memo-box {
    border: 1px solid #c9d3cc;
    margin-bottom: 10px;
    padding: 8px;
    break-inside: avoid;
  }

  body.print-self-evaluation .print-field-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  body.print-self-evaluation .print-field-list article {
    border: 1px solid #c9d3cc;
    min-height: 72px;
    padding: 8px;
    break-inside: avoid;
  }

  body.print-self-evaluation .print-field-list article:nth-child(4),
  body.print-self-evaluation .print-field-list article:nth-child(7),
  body.print-self-evaluation .print-field-list article:nth-child(10) {
    grid-column: 1 / -1;
  }

  body.print-self-evaluation .teacher-memo-box {
    margin-top: 10px;
  }

  body.print-self-evaluation .teacher-memo-box div {
    min-height: 70px;
    border-top: 1px solid #d8dfda;
  }

  body.print-self-evaluation .print-note {
    color: #444;
    font-size: 10px;
  }

  body.print-self-evaluation .print-export-time {
    margin-top: 5px;
    color: #222;
    font-size: 10px;
    font-weight: 700;
    text-align: right;
  }
}

@media (max-width: 1100px) {
  .course-designer-option-intro {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .course-designer-option-caution {
    grid-column: 1 / -1;
  }

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

@media (max-width: 760px) {
  #course-designer-title {
    min-width: 0;
    font-size: clamp(1.25rem, 5.5vw, 1.75rem);
    white-space: nowrap;
  }

  .title-designer-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }

  .designer-launch-card {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 108px;
    padding: 18px;
  }

  .designer-launch-card .launch-icon {
    width: 42px;
    height: 42px;
  }

  .course-designer-setup,
  .course-designer-results {
    padding: 18px;
  }

  .course-designer-control-grid,
  .course-designer-option-intro,
  .course-designer-grade-grid,
  .course-designer-alternative-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-designer-exploration-grid,
  .course-designer-explore-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-designer-priority-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-designer-comparison-grid.clear-path,
  .course-designer-conflicts {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-designer-interest-head,
  .course-designer-actions,
  .course-designer-result-head,
  .course-designer-map-head,
  .course-designer-alternative-head {
    align-items: flex-start;
  }

  .course-designer-interest-group > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-designer-interest-button {
    min-height: 64px;
    padding: 11px 12px;
  }

  .course-designer-interest-button small {
    display: none;
  }

  .course-designer-actions {
    display: grid;
    gap: 14px;
  }

  .course-designer-actions > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
  }

  .course-designer-actions button {
    width: 100%;
  }

  .course-designer-option-tabs {
    gap: 6px;
  }

  .course-designer-option-tab {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 58px;
    padding: 9px;
  }

  .course-designer-option-tab > span {
    width: 40px;
    height: 30px;
  }

  .course-designer-option-tab small {
    display: none;
  }

  .course-designer-option-intro dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-designer-option-caution {
    grid-column: auto;
  }

  .course-designer-map-head > span,
  .course-designer-alternative-head > p {
    max-width: none;
    text-align: left;
  }

  .course-designer-course-head {
    align-items: flex-start;
  }

  .course-designer-course-meta {
    gap: 5px;
  }

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

@media (max-width: 480px) {
  .course-designer-status-switch {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-designer-interest-head,
  .course-designer-result-head,
  .course-designer-map-head,
  .course-designer-alternative-head {
    display: grid;
    gap: 8px;
  }

  .course-designer-path-guide i {
    display: none;
  }

  .course-designer-exploration-grid,
  .course-designer-explore-flow,
  .course-designer-comparison-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-designer-exploration-button {
    min-height: 58px;
  }

  .course-designer-exploration-button small {
    display: none;
  }

  .course-designer-priority-list ol {
    display: grid;
  }

  .course-designer-priority-list li {
    width: 100%;
    min-width: 0;
  }

  .course-designer-interest-head > strong {
    justify-self: start;
  }

  .course-designer-result-tools {
    justify-items: stretch;
    width: 100%;
    max-width: none;
  }

  .course-designer-result-tools > span {
    text-align: left;
  }

  .course-designer-result-tools > div,
  .course-designer-result-tools .ghost-button,
  .course-designer-result-tools .primary-button,
  .course-designer-add-button {
    width: 100%;
  }

  .course-designer-document-bar {
    grid-template-columns: 1fr;
  }

  .course-designer-document-bar > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .course-designer-document-bar > span {
    text-align: left;
  }

  .course-designer-step-tabs {
    gap: 5px;
  }

  .course-designer-step-tabs button {
    min-height: 42px;
    gap: 5px;
    padding: 6px 4px;
  }

  .course-designer-step-tabs button span {
    width: 21px;
    height: 21px;
    font-size: 10px;
  }

  .course-designer-step-tabs button b {
    font-size: 11.5px;
  }

  .course-designer-review-head,
  .course-designer-review-actions {
    display: grid;
  }

  .course-designer-review-head button,
  .course-designer-review-actions button {
    width: 100%;
  }

  .course-designer-review-summary {
    grid-template-columns: 1fr;
  }

  .course-designer-review-list > div {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .course-designer-review-list small,
  .course-designer-review-list p {
    grid-column: 1 / -1;
  }

  .course-designer-interest-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .course-designer-interest-group h4 {
    margin: 0;
    font-size: 12px;
  }

  .course-designer-interest-button b {
    padding-right: 18px;
    font-size: 12px;
  }

  .course-designer-option-tab {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    min-height: 46px;
    padding: 6px;
    text-align: center;
  }

  .course-designer-option-tab > span {
    grid-row: auto;
    width: 100%;
    height: 32px;
  }

  .course-designer-option-tab b,
  .course-designer-option-tab small {
    display: none;
  }

  .course-designer-option-intro dl {
    gap: 5px;
  }

  .course-designer-option-intro dl > div {
    padding: 10px 6px;
  }

  .course-designer-option-intro dd {
    font-size: 1.05rem;
  }

  .course-designer-grade-card {
    padding: 15px;
  }

  .course-designer-course-head {
    display: grid;
    gap: 7px;
  }

  .course-designer-source-badge {
    justify-self: start;
  }

  .course-designer-decision-head {
    display: grid;
  }
}

@media (max-width: 980px) {
  .compact-process-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .self-eval-evidence-starter {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .compact-process-cards,
  .competency-model-grid {
    grid-template-columns: 1fr;
  }

  .self-eval-evidence-starter {
    padding: 14px;
  }

  .self-eval-evidence-starter ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* 자기평가서: 작성 화면 자동확장 + PDF 출력 누락/한 줄 잘림 보정 */
@media print {
  body.print-self-evaluation .self-eval-print-paper,
  body.print-self-evaluation .self-eval-print-paper * {
    box-sizing: border-box;
  }

  body.print-self-evaluation .self-eval-print-paper {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.print-self-evaluation .print-field-list {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }

  body.print-self-evaluation .print-field-list article {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 8px !important;
    overflow: visible !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
    grid-column: auto !important;
  }

  body.print-self-evaluation .print-competency-box,
  body.print-self-evaluation .teacher-memo-box {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  body.print-self-evaluation .print-field-list p,
  body.print-self-evaluation .print-competency-box p,
  body.print-self-evaluation .print-meta-grid p,
  body.print-self-evaluation .print-note {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    line-break: anywhere !important;
  }

  body.print-self-evaluation textarea {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
  }

  body.print-self-evaluation .back-home-button,
  body.print-self-evaluation .bottom-actions,
  body.print-self-evaluation .next-action-row {
    display: none !important;
  }
}