:root {
  --surface-primary: #fffdfb;
  --surface-secondary: #faf7ff;
  --surface-elevated: #ffffff;
  --surface-mint: #f3fbf7;
  --surface-peach: #fff4f0;
  --text-primary: #2a2433;
  --text-secondary: #6c6178;
  --text-tertiary: #92879b;
  --border-default: #eadfeb;
  --border-subtle: #f3edf5;
  --accent-primary: #d98aa9;
  --accent-hover: #c57597;
  --accent-secondary: #8a82d6;
  --status-success: #3f9d78;
  --status-warning: #c48a42;
  --status-error: #c66c74;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --fluid-panel-padding: clamp(10px, 1.45svh, 15px);
  --fluid-card-title: clamp(18px, calc(13px + 0.8svh), 24px);
  --fluid-subtitle: clamp(14px, calc(10px + 0.72svh), 18px);
  --fluid-body: clamp(11px, calc(8px + 0.64svh), 14px);
  --fluid-caption: clamp(10px, calc(7px + 0.45svh), 12px);
}

* {
  box-sizing: border-box;
}

html,
body,
main {
  min-height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow: auto;
  background:
    radial-gradient(circle at 18% 8%, rgba(217, 138, 169, 0.08), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(138, 130, 214, 0.07), transparent 26%),
    linear-gradient(180deg, #fffdfb, #fff8fc);
  color: var(--text-primary);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  line-height: 1.58;
}

button,
input,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

.is-hidden {
  display: none !important;
}

.kicker {
  margin: 0 0 var(--space-1);
  color: var(--accent-secondary);
  font-size: 12px;
  font-weight: 850;
}

.gate-screen {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: var(--space-5);
  width: min(1040px, calc(100vw - 40px));
  min-height: max(100dvh, 700px);
  margin: 0 auto;
  padding: clamp(18px, 4dvh, 36px) 0;
  transform: translateY(clamp(-36px, -5dvh, 0px));
}

.gate-copy {
  text-align: center;
}

.gate-logo {
  display: block;
  width: min(720px, 78vw);
  height: auto;
  margin: 0 auto var(--space-2);
}

.school-title {
  margin: 0;
  color: var(--text-primary);
  font-family: "Times New Roman", "Batang", "바탕", "Nanum Myeongjo", serif;
  font-size: clamp(32px, 5.8vw, 48px);
  font-weight: 700;
  line-height: 1.15;
}

.gate-copy h1 {
  margin: 0;
  font-family: "Times New Roman", "Batang", "바탕", "Nanum Myeongjo", serif;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.18;
}

.gate-copy p:not(.kicker) {
  margin: var(--space-1) 0 var(--space-4);
  color: var(--accent-hover);
  font-family: "Times New Roman", "Batang", "바탕", "Nanum Myeongjo", serif;
  font-size: 17px;
  font-weight: 700;
}

.gate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.96fr);
  gap: clamp(var(--space-2), 1vw, var(--space-4));
  min-height: 0;
  align-items: stretch;
}

.grade-grid {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding-top: var(--space-2);
}

.grade-card {
  position: relative;
  min-height: 142px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--text-primary);
  padding: var(--space-6);
  text-align: left;
  box-shadow: 0 1px 2px rgba(42, 36, 51, 0.05);
  transition: transform 120ms ease-out, border-color 120ms ease-out, background 120ms ease-out;
}

.grade-card:first-child {
  border-color: var(--accent-secondary);
  background: rgba(250, 247, 255, 0.92);
}

.grade-card::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 96px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #d8d3f7 0 36%, transparent 39%) 0 0 / 18px 18px,
    radial-gradient(circle, #efd3df 0 36%, transparent 39%) 9px 0 / 18px 18px;
}

.grade-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-primary);
}

.grade-card strong {
  display: block;
  font-size: 28px;
  line-height: 1.2;
}

.grade-card span {
  display: block;
  margin-top: var(--space-2);
  color: var(--accent-secondary);
  font-weight: 850;
}

.grade-card p {
  max-width: 32ch;
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
}

.gate-visual {
  display: grid;
  align-items: center;
  justify-items: center;
  min-width: 0;
  min-height: clamp(220px, 40dvh, 330px);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  padding: 0;
}

.gate-visual img {
  width: min(100%, 560px);
  height: auto;
  max-height: clamp(250px, 43dvh, 380px);
  min-height: 0;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 14px 24px rgba(138, 130, 214, 0.12));
}

.app-screen {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1288px, calc(100vw - 28px));
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  padding: 10px 0 12px;
  gap: var(--space-2);
}

.app-header {
  display: flex;
  gap: var(--space-4);
  align-items: end;
  justify-content: space-between;
  min-height: 156px;
}

.app-brand {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.cohort-title-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-home {
  display: inline-grid;
  width: min(448px, 39vw);
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.app-logo {
  width: 190px;
  height: auto;
}

.app-actions {
  display: grid;
  grid-template-columns: auto;
  gap: var(--space-2);
  align-items: center;
  align-self: end;
  justify-content: end;
  margin-bottom: var(--space-4);
}

.app-actions a,
.app-actions button,
.pill-link {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-elevated);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  font-weight: 850;
}

.app-actions a,
.pill-link:not(.subtle) {
  border-color: transparent;
  background: var(--accent-primary);
  color: white;
}

.home-button {
  min-height: 58px;
  border-color: var(--accent-secondary) !important;
  background: var(--accent-secondary) !important;
  color: white !important;
}

.home-button::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-right: var(--space-2);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2014%204%209l5-5'/%3E%3Cpath%20d='M4%209h10a6%206%200%200%201%200%2012h-2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2014%204%209l5-5'/%3E%3Cpath%20d='M4%209h10a6%206%200%200%201%200%2012h-2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pill-link.subtle {
  margin-top: var(--space-3);
  color: var(--accent-secondary);
}

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

.tab-button {
  display: flex;
  min-height: clamp(38px, 5.6dvh, 48px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text-secondary);
  font-size: clamp(10px, calc(8px + 0.55svh), 12px);
  font-weight: 850;
  line-height: 1.22;
}

.tab-button span {
  display: block;
}

.tab-button[aria-selected="true"] {
  border-color: var(--accent-secondary);
  background: var(--surface-secondary);
  color: var(--accent-secondary);
}

.tab-panel {
  display: none;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  padding: var(--fluid-panel-padding);
}

.tab-panel.is-active {
  display: block;
}

.site-footer {
  display: flex;
  min-height: 26px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--accent-secondary);
}

.visit-counter {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  color: var(--accent-secondary);
}

.counter-unit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: 999px;
  background: var(--surface-secondary);
  padding: 3px 10px;
}

.counter-unit strong {
  font-variant-numeric: tabular-nums;
}

#panelOfferings.is-active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#panelCreditDetails.is-active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#panelPlanner.is-active {
  overflow: hidden;
}

#panelQa.is-active {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.panel-grid,
.semester-board,
.selection-board,
.guide-layout,
.qa-layout,
.planner-layout,
.references-layout {
  height: 100%;
  min-height: 100%;
}

.basics-grid {
  display: grid;
  grid-template-columns: repeat(35, minmax(0, 1fr));
  grid-auto-rows: minmax(clamp(170px, 29dvh, 238px), 1fr);
  align-content: stretch;
  gap: clamp(8px, 1.6dvh, 12px);
  height: 100%;
  min-height: 0;
}

.basics-grid > .note-card:not(.soft):not(.teacher-qa-card):not(.timeline-card):not(.credit-overview-card),
.basics-grid > .credit-mini {
  grid-column: span 3;
  display: grid;
  grid-template-rows: 22px minmax(58px, auto) 1fr;
  min-height: clamp(188px, 32dvh, 236px);
  align-content: start;
}

.note-card,
.mini-card,
.semester-column,
.selection-column,
.result-card,
.qa-card,
.empty-card {
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: var(--surface-elevated);
  padding: var(--fluid-panel-padding);
}

.note-card h2,
.panel-header h2,
.result-card h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--fluid-card-title);
  line-height: 1.28;
}

.basics-grid > .note-card:not(.soft):not(.teacher-qa-card):not(.timeline-card):not(.credit-overview-card) h2,
.basics-grid > .credit-mini strong {
  grid-row: 2;
  min-height: clamp(54px, 9dvh, 76px);
}

.basics-grid > .note-card:not(.soft):not(.teacher-qa-card):not(.timeline-card):not(.credit-overview-card) .kicker {
  grid-row: 1;
}

.basics-grid > .note-card:not(.soft):not(.teacher-qa-card):not(.timeline-card):not(.credit-overview-card) p:not(.kicker),
.basics-grid > .credit-mini p {
  grid-row: 3;
}

.note-card p,
.mini-card p,
.panel-header p,
.result-card p,
.qa-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fluid-body);
  line-height: 1.5;
}

.credit-overview-card,
.basics-grid > .credit-mini {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(14px, 2.3dvh, 22px);
  min-height: clamp(160px, 27dvh, 230px);
  align-content: start;
}

.credit-overview-card {
  grid-column: span 14;
}

.basics-grid > .credit-mini {
  grid-column: span 7;
}

.credit-overview-card h2,
.basics-grid > .credit-mini strong {
  grid-row: 1;
  min-height: 0;
}

.credit-overview-card p,
.basics-grid > .credit-mini p {
  grid-row: 2;
}

.basics-grid > .credit-mini strong,
.credit-overview-card h2,
.note-card.soft h2,
.teacher-qa-card h2,
.timeline-card h2 {
  display: grid;
  grid-template-columns: clamp(18px, 2.2vw, 24px) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-2);
}

.basics-grid > .credit-mini strong::before,
.credit-overview-card h2::before,
.note-card.soft h2::before,
.teacher-qa-card h2::before,
.timeline-card h2::before {
  content: "";
  width: 100%;
  aspect-ratio: 1;
  margin-top: 0.18em;
  background: url("assets/rose-title-icon.svg") center / contain no-repeat;
}

.split-title {
  display: grid;
  gap: 0;
}

.split-title span {
  display: block;
}

.bokja-character {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 10px 16px rgba(138, 130, 214, 0.1));
}

.has-character {
  overflow: hidden;
}

.credit-overview-card.has-character {
  grid-template-columns: minmax(0, 1fr) clamp(132px, 14vw, 188px);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: start;
}

.credit-overview-card.has-character h2 {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
  font-size: clamp(18px, calc(12px + 0.72svh), 22px);
  line-height: 1.28;
}

.credit-overview-card.has-character p {
  grid-column: 1;
  grid-row: 2;
}

.overview-character {
  grid-column: 2;
  grid-row: 1 / -1;
  width: clamp(116px, 12.2vw, 172px);
  height: clamp(108px, 12vw, 168px);
  align-self: end;
  justify-self: end;
  object-fit: contain;
  transform: translateY(-8px);
}

.note-card.soft.has-character,
.teacher-qa-card.has-character {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(88px, 9.5vw, 142px);
  grid-template-rows: auto minmax(clamp(84px, 12dvh, 116px), auto) auto;
  column-gap: var(--space-2);
  align-items: start;
}

.note-card.soft.has-character p,
.teacher-qa-card.has-character p {
  grid-column: 1;
  margin-top: clamp(14px, 2.4dvh, 22px);
}

.note-card.soft.has-character .pill-link,
.teacher-qa-card.has-character .pill-link {
  grid-column: 1;
  grid-row: 3;
  margin-top: 0;
}

.note-card.soft.has-character h2,
.teacher-qa-card.has-character h2 {
  grid-column: 1;
  margin-bottom: var(--space-4);
}

.action-character {
  grid-column: 2;
  grid-row: 1 / -1;
  width: clamp(88px, 9.5vw, 142px);
  height: clamp(92px, 10.8vw, 150px);
  align-self: end;
  justify-self: end;
  object-fit: contain;
  transform: translateY(4px);
}

.pill-link {
  white-space: nowrap;
}

.note-card.soft {
  grid-column: span 12;
  background: var(--surface-mint);
}

.teacher-qa-card {
  grid-column: span 12;
  border-color: rgba(217, 138, 169, 0.45);
  background: var(--surface-peach);
}

.teacher-qa-card h2 {
  color: var(--text-primary);
}

.teacher-qa-card .action-character {
  width: clamp(76px, 8.5vw, 124px);
  height: clamp(86px, 9.5vw, 138px);
  transform: translateY(4px);
}

.teacher-qa-card p {
  margin-bottom: var(--space-3);
}

.teacher-qa-card .pill-link {
  border-color: transparent;
  background: var(--accent-secondary);
  color: white;
  cursor: pointer;
}

.timeline-card {
  grid-column: span 11;
}

.note-card.soft,
.teacher-qa-card,
.timeline-card {
  display: grid;
  grid-template-rows: minmax(52px, auto) minmax(96px, 1fr) auto;
  align-self: stretch;
  min-height: clamp(180px, 27dvh, 230px);
  align-content: start;
}

.note-card.soft h2,
.teacher-qa-card h2,
.timeline-card h2 {
  grid-row: 1;
}

.note-card.soft p:not(.kicker),
.teacher-qa-card p:not(.kicker) {
  grid-row: 2;
  align-self: start;
}

.note-card.soft .pill-link,
.teacher-qa-card .pill-link {
  appearance: none;
  grid-row: 3;
  display: inline-flex;
  height: 48px;
  min-height: 48px;
  min-width: 196px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  align-self: start;
  justify-self: start;
  padding: 0 20px;
  font-size: 14px;
  line-height: 1.2;
}

.note-card.soft .pill-link::after,
.teacher-qa-card .pill-link::after {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.timeline-card .timeline-list {
  grid-row: 2 / span 2;
  margin-top: 0;
  gap: clamp(5px, 1dvh, 7px);
}

.timeline-card .timeline-list li {
  padding: 7px var(--space-3);
  line-height: 1.25;
}

.credit-mini strong {
  font-size: var(--fluid-subtitle);
}

#panelCreditDetails {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

#panelCreditDetails .panel-header.tight {
  margin-bottom: var(--space-2);
}

#panelCreditDetails .panel-header h2 {
  margin-bottom: var(--space-1);
}

.credit-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-3);
  height: 100%;
  min-height: 0;
}

.detail-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(clamp(78px, 11dvh, 114px), 1fr));
  grid-auto-rows: minmax(clamp(78px, 11dvh, 114px), 1fr);
  gap: clamp(8px, 1.4dvh, 14px);
  align-items: stretch;
  min-height: 0;
}

.detail-card {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--surface-elevated);
  padding: 8px var(--space-3) 8px 38px;
  min-height: 0;
}

#panelCreditDetails .checklist-card {
  display: flex;
  align-self: stretch;
  flex-direction: column;
  padding: var(--space-3);
}

#panelCreditDetails .checklist-card h2 {
  margin-bottom: var(--space-1);
}

.checkmark {
  position: absolute;
  left: 13px;
  top: 13px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent-secondary);
  border-radius: 5px;
  background: var(--surface-secondary);
}

.checkmark::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid var(--accent-secondary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.detail-card h3 {
  margin: 0 0 var(--space-1);
  font-size: 15px;
  line-height: 1.35;
}

.detail-card p,
.checklist-card li {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.42;
}

.detail-card p {
  margin: 0;
}

.selection-tip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: clamp(10px, 2dvh, 18px);
  align-items: start;
}

.selection-tip-grid article {
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--surface-secondary);
  padding: clamp(8px, 1.4dvh, 12px) var(--space-3);
  min-height: clamp(58px, 8dvh, 82px);
}

.selection-tip-grid strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 14px;
}

.selection-tip-grid p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.42;
}

.checklist-card ul,
.timeline-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.checklist-card li,
.timeline-list li {
  border-radius: 12px;
  background: var(--surface-secondary);
  padding: var(--space-2) var(--space-3);
}

.checklist-card li {
  padding: 0;
}

#panelCreditDetails .checklist-card ul {
  flex: 1 1 auto;
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.check-button {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 34px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 4px 8px;
  color: var(--text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#panelCreditDetails .check-button {
  font-size: 12px;
  line-height: 1.32;
}

.check-button-box {
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent-secondary);
  border-radius: 5px;
  background: var(--surface-elevated);
}

.check-button[aria-pressed="true"] {
  color: var(--text-primary);
  font-weight: 700;
}

.check-button[aria-pressed="true"] .check-button-box {
  background: var(--accent-secondary);
  box-shadow: inset 0 0 0 3px var(--surface-elevated);
}

.check-button:focus-visible {
  outline: 3px solid var(--accent-primary);
  outline-offset: 2px;
}

.timeline-list li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 12px;
}

.timeline-list strong {
  color: var(--accent-secondary);
}

.mini-card strong {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 24px;
}

.panel-header {
  margin-bottom: var(--space-3);
}

.panel-header.tight {
  margin-bottom: var(--space-3);
}

.semester-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
}

.semester-selection-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow: auto;
  padding-right: var(--space-1);
}

.offering-grade-tabs {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.offering-semester-tabs {
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.offering-grade-tabs button {
  min-width: 96px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-elevated);
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-4);
  font-weight: 850;
}

.offering-grade-tabs button[aria-selected="true"] {
  border-color: var(--accent-secondary);
  background: var(--surface-secondary);
  color: var(--accent-secondary);
}

.semester-panel {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--surface-elevated);
  padding: var(--space-3);
}

.semester-panel h3 {
  margin: 0 0 var(--space-2);
  font-size: 17px;
}

.semester-panel > h3:empty {
  display: none;
}

.semester-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: auto;
  align-items: start;
  gap: var(--space-2);
  height: auto;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
}

.selection-mini {
  min-height: 0;
  overflow: visible;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-primary);
  padding: var(--space-2);
}

.selection-mini-head {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.selection-mini-head strong {
  font-size: 14px;
}

.selection-mini-head span {
  color: var(--accent-secondary);
  font-size: 11px;
  font-weight: 850;
}

.mini-course-list {
  display: grid;
  align-content: start;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 6px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.selection-board {
  display: grid;
  grid-auto-columns: minmax(280px, 1fr);
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: var(--space-3);
  height: calc(100dvh - 300px);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--space-1);
}

.semester-column,
.selection-column {
  min-height: 0;
}

.selection-column {
  display: flex;
  flex-direction: column;
}

.selection-column .compact-list {
  flex: 1;
  max-height: none;
  min-height: 0;
}

.semester-column h3,
.selection-head h3 {
  margin: 0 0 var(--space-3);
}

.selection-head p,
.empty-card p {
  margin: 0;
  color: var(--text-secondary);
}

.selection-head {
  margin-bottom: var(--space-3);
}

.compact-list {
  display: grid;
  align-content: start;
  max-height: calc(100dvh - 420px);
  gap: var(--space-2);
  overflow: auto;
  padding-right: var(--space-1);
}

.compact-course,
.subject-tab,
.course-chip,
.course-filter {
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--surface-primary);
  color: var(--text-primary);
  padding: var(--space-3);
  text-align: left;
}

.compact-course[aria-pressed="true"] {
  border-color: var(--accent-secondary);
  background: var(--surface-secondary);
}

.compact-course.small {
  border-radius: 10px;
  padding: 8px 9px;
}

.compact-course.small strong {
  font-size: 13px;
}

.compact-course.small span {
  font-size: 10px;
}

.compact-course strong,
.course-chip strong {
  display: block;
  line-height: 1.35;
}

.compact-course span,
.course-chip span {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 750;
}

.guide-layout,
.qa-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: var(--space-3);
}

.guide-layout-wide {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

.guide-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
}

.guide-topbar .panel-header {
  margin-bottom: 0;
}

.guide-topbar h2 {
  max-width: 880px;
  font-size: 21px;
}

.guide-helper {
  margin-top: var(--space-1) !important;
  font-size: 12px;
  line-height: 1.45;
}

.guide-subject-strip {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
}

.guide-subject-strip .subject-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 9px 14px;
  font-size: 16px;
  white-space: nowrap;
  text-align: center;
}

.guide-subject-strip .guide-full-book-button {
  min-width: 112px;
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: white;
  cursor: pointer;
}

.guide-subject-strip .guide-full-book-button:hover {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: white;
}

.subject-menu {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-height: 0;
  max-height: 100%;
  overflow: auto;
}

.subject-tab[aria-selected="true"] {
  border-color: var(--accent-secondary);
  background: var(--surface-secondary);
  color: var(--accent-secondary);
  font-weight: 850;
}

.guide-courses {
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  padding-bottom: var(--space-3);
}

.guide-layout-wide .guide-courses {
  overflow: visible;
}

.guide-courses.has-guide-character {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(170px, 23vw, 320px);
  column-gap: var(--space-4);
  align-items: start;
}

.guide-courses.has-guide-character .guide-semester-group {
  grid-column: 1;
}

.guide-character-row {
  grid-column: 2;
  grid-row: 1 / span 6;
  display: flex;
  min-height: clamp(190px, 42dvh, 360px);
  align-items: end;
  justify-content: flex-end;
  padding: var(--space-2) var(--space-3) var(--space-3) 0;
}

.guide-character-img {
  width: clamp(150px, 22vw, 300px);
  height: clamp(150px, 34dvh, 300px);
  object-fit: contain;
}

.guide-semester-group {
  margin-top: 10px;
}

.guide-semester-group:first-child {
  margin-top: 0;
}

.guide-semester-group h3 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.35;
}

.course-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-2);
}

.guide-layout-wide .course-chip-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-layout-wide .course-chip {
  min-height: 62px;
  padding: 8px var(--space-3);
  text-align: center;
  transition: background 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}

.guide-layout-wide .course-chip:hover {
  border-color: var(--status-success);
  background: var(--surface-mint);
}

.course-chip-meta {
  display: block !important;
  margin-top: var(--space-1);
}

.course-chip-meta span {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.course-chip[aria-pressed="true"] {
  border-color: var(--accent-secondary);
  background: var(--surface-secondary);
}

.course-chip.available {
  border-color: rgba(63, 157, 120, 0.35);
}

.course-chip.past {
  border-color: rgba(196, 138, 66, 0.35);
}

.course-chip.unavailable {
  border-color: rgba(198, 108, 116, 0.28);
}

.result-card {
  align-self: start;
  background: #fffefd;
}

.status {
  display: inline-flex;
  margin: var(--space-2) 0 var(--space-3);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  color: white;
  font-size: 12px;
  font-weight: 900;
}

.status.available {
  background: var(--status-success);
}

.status.past {
  background: var(--status-warning);
}

.status.unavailable {
  background: var(--status-error);
}

.fact-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.fact-list li {
  border-radius: 999px;
  background: var(--surface-secondary);
  padding: var(--space-1) var(--space-3);
  color: var(--accent-secondary);
  font-size: 12px;
  font-weight: 850;
}

.qa-layout {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-3);
  height: 100%;
  min-height: 0;
}

.qa-topbar {
  display: grid;
  grid-column: 2;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.qa-subject-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.qa-subject-strip .subject-tab {
  min-height: 40px;
  min-width: 82px;
  padding: 9px 14px;
  text-align: center;
  font-weight: 850;
}

.qa-course-menu {
  display: flex;
  grid-row: 1 / span 2;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  align-self: stretch;
}

.qa-course-summary {
  display: none;
}

.qa-course-summary::-webkit-details-marker {
  display: none;
}

.qa-course-menu .panel-header {
  flex: 0 0 auto;
}

.qa-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  align-content: start;
  min-height: 0;
  overflow: auto;
}

.accordion-list {
  padding-right: var(--space-1);
}

.qa-main,
.qa-course-list {
  min-height: 0;
}

.qa-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.qa-course-list {
  display: grid;
  flex: 1 1 auto;
  gap: var(--space-2);
  align-content: start;
  grid-auto-rows: max-content;
  min-height: 0;
  overflow: auto;
  padding-right: var(--space-1);
}

@media (min-width: 921px) {
  #panelQa.is-active .qa-course-menu {
    height: clamp(360px, calc(100dvh - 290px), 760px);
  }

  #panelQa.is-active .qa-course-list {
    height: clamp(320px, calc(100dvh - 320px), 720px);
    max-height: clamp(320px, calc(100dvh - 320px), 720px);
    scrollbar-gutter: stable;
  }
}

.qa-course-menu:not([open]) > .qa-course-list {
  display: none;
}

.course-filter {
  min-width: 0;
  padding: 9px 12px;
}

.course-filter[aria-pressed="true"] {
  border-color: var(--accent-secondary);
  background: var(--surface-secondary);
  color: var(--accent-secondary);
}

.course-filter strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.course-filter span {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 750;
}

.course-filter {
  text-align: center;
}

.qa-course-list .course-filter {
  width: 100%;
  min-height: 64px;
  text-align: left;
}

.qa-external-note {
  display: inline-block;
  margin-top: var(--space-2) !important;
  border-radius: 12px;
  background: var(--surface-peach);
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  font-weight: 750;
}

.qa-accordion summary > span {
  display: inline-flex;
  margin-bottom: var(--space-2);
  border-radius: 999px;
  background: var(--surface-secondary);
  color: var(--accent-secondary);
  padding: var(--space-1) var(--space-3);
  font-size: 12px;
  font-weight: 850;
}

.qa-external-badge {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 var(--space-2);
  border-radius: 999px;
  background: var(--surface-peach);
  color: var(--status-warning);
  padding: var(--space-1) var(--space-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.qa-card h3 {
  margin: 0 0 var(--space-2);
  font-size: 15px;
  line-height: 1.42;
}

.qa-card {
  padding: var(--space-3);
}

.qa-accordion {
  border-radius: 16px;
}

.qa-accordion summary {
  position: relative;
  display: block;
  min-height: 34px;
  cursor: pointer;
  list-style: none;
}

.qa-accordion summary::-webkit-details-marker {
  display: none;
}

.qa-accordion summary strong {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin-top: var(--space-1);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.58;
}

.qa-toggle-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-secondary);
  color: var(--accent-secondary);
  font-style: normal;
}

.qa-toggle-icon::before {
  content: "▾";
  font-size: 11px;
  line-height: 1;
}

.qa-accordion[open] .qa-toggle-icon::before {
  content: "▴";
}

.qa-accordion p {
  margin-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
}

.qa-card .qa-answer {
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.72;
}

.qa-card .qa-answer strong {
  color: var(--text-primary);
  font-weight: 850;
}

.qa-emphasis-red {
  color: var(--status-error);
  font-weight: 850;
}

.planner-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.62fr) minmax(620px, 1.78fr) 234px;
  gap: 10px;
  min-height: 0;
}

.planner-picker,
.planner-board,
.planner-summary {
  min-height: 0;
}

.planner-picker,
.planner-board {
  display: flex;
  flex-direction: column;
}

.planner-picker-scroll {
  display: grid;
  gap: var(--space-3);
  min-height: 0;
  overflow: auto;
  padding-right: var(--space-1);
}

.planner-semester,
.summary-card,
.planner-board {
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  background: var(--surface-elevated);
  padding: var(--space-3);
}

.panel-header .planner-board-title {
  margin: 0;
  font-size: 24px;
  font-weight: 850;
  line-height: 1.2;
}

.planner-semester h3 {
  margin: 0 0 var(--space-2);
  font-size: 16px;
}

.planner-selection {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2);
}

.planner-selection + .planner-selection {
  margin-top: var(--space-2);
}

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

.planner-course {
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--surface-primary);
  padding: 8px 9px;
  text-align: left;
}

.planner-course.type-general {
  border-color: rgba(138, 130, 214, 0.34);
  background: var(--surface-secondary);
}

.planner-course.type-career {
  border-color: rgba(217, 138, 169, 0.42);
  background: var(--surface-peach);
}

.planner-course.type-fusion {
  border-color: rgba(47, 158, 115, 0.36);
  background: var(--surface-mint);
}

.planner-course[aria-pressed="true"] {
  border-color: var(--status-error);
  border-width: 2px;
  color: var(--text-primary);
}

.planner-course strong {
  display: block;
  font-size: 12px;
  line-height: 1.3;
}

.planner-course span {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 750;
}

.course-warning {
  display: block;
  margin-top: 4px;
  color: var(--status-error);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.35;
}

.planner-term-list {
  display: grid;
  gap: var(--space-2);
  min-height: 0;
  overflow: auto;
  padding-right: var(--space-1);
}

.planner-picker-scroll,
.planner-term-list,
.planner-term-body,
.planner-summary,
.planner-matrix {
  scrollbar-color: rgba(138, 130, 214, 0.4) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.planner-picker-scroll::-webkit-scrollbar,
.planner-term-list::-webkit-scrollbar,
.planner-term-body::-webkit-scrollbar,
.planner-summary::-webkit-scrollbar,
.planner-matrix::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.planner-picker-scroll::-webkit-scrollbar-track,
.planner-term-list::-webkit-scrollbar-track,
.planner-term-body::-webkit-scrollbar-track,
.planner-summary::-webkit-scrollbar-track,
.planner-matrix::-webkit-scrollbar-track {
  background: transparent;
}

.planner-picker-scroll::-webkit-scrollbar-thumb,
.planner-term-list::-webkit-scrollbar-thumb,
.planner-term-body::-webkit-scrollbar-thumb,
.planner-summary::-webkit-scrollbar-thumb,
.planner-matrix::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(138, 130, 214, 0.38);
  background-clip: padding-box;
}

.planner-picker-scroll::-webkit-scrollbar-thumb:hover,
.planner-term-list::-webkit-scrollbar-thumb:hover,
.planner-term-body::-webkit-scrollbar-thumb:hover,
.planner-summary::-webkit-scrollbar-thumb:hover,
.planner-matrix::-webkit-scrollbar-thumb:hover {
  background: rgba(138, 130, 214, 0.58);
  background-clip: padding-box;
}

.planner-term {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-primary);
  overflow: visible;
}

.planner-term summary {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
}

.planner-term summary::-webkit-details-marker {
  display: none;
}

.planner-term summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease-out;
}

.planner-term[open] summary::after {
  transform: rotate(225deg) translate(-2px, -1px);
}

.planner-term summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.planner-term summary strong {
  font-size: 14px;
  line-height: 1.35;
}

.planner-term summary small {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.planner-term-body {
  display: grid;
  gap: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-3);
}

.planner-term-body section {
  display: grid;
  gap: var(--space-2);
}

.planner-term-body h3 {
  margin: 0;
  color: var(--accent-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.planner-group-section + .planner-group-section {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2);
}

.planner-pill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 6px;
}

.planner-pill-grid em {
  color: var(--text-tertiary);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.planner-pill {
  display: grid;
  min-width: 0;
  gap: 2px;
  border-radius: 10px;
  background: var(--surface-peach);
  padding: 7px 8px;
}

.planner-pill.is-fixed {
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}

.planner-pill.type-general {
  background: var(--surface-secondary);
  color: var(--accent-secondary);
}

.planner-pill.type-career {
  background: var(--surface-peach);
  color: var(--accent-hover);
}

.planner-pill.type-fusion {
  background: var(--surface-mint);
  color: var(--status-success);
}

.planner-pill strong {
  min-width: 0;
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.planner-pill small {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

.planner-first-grade-button {
  justify-self: end;
  align-self: end;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-secondary);
  color: var(--accent-secondary);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  cursor: pointer;
}

.planner-first-grade-button:hover {
  border-color: var(--accent-secondary);
  background: var(--surface-elevated);
}

.planner-first-modal {
  display: grid;
  gap: var(--space-4);
}

.planner-first-modal section {
  display: grid;
  gap: var(--space-2);
}

.planner-first-modal h3 {
  margin: 0;
  color: var(--accent-secondary);
  font-size: 18px;
}

.planner-first-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (min-width: 921px) {
  .planner-board {
    overflow: hidden;
  }

  .planner-board .panel-header.tight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-3);
  }

  .planner-term-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    overflow: hidden;
    padding-right: 0;
  }

  .planner-term {
    min-width: 0;
    overflow: hidden;
  }

  .planner-term summary {
    min-height: 38px;
    align-items: center;
    padding: 7px 8px;
  }

  .planner-term summary strong {
    font-size: 12px;
  }

  .planner-term summary small {
    font-size: 10px;
  }

  .planner-term-body {
    max-height: clamp(315px, calc(100dvh - 395px), 520px);
    overflow: auto;
    padding: 8px;
  }

  .planner-term-body h3 {
    font-size: 11px;
  }

  .planner-pill-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .planner-pill {
    padding: 6px;
  }

  .planner-pill strong {
    font-size: 10px;
  }

  .planner-pill small {
    font-size: 9px;
  }
}

.planner-matrix {
  display: grid;
  grid-template-columns: 82px repeat(var(--semester-count, 4), minmax(0, 1fr));
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 14px;
}

.matrix-head,
.matrix-group,
.matrix-cell {
  min-height: 36px;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 7px 8px;
  font-size: 11px;
}

.matrix-group.matrix-row-medium,
.matrix-cell.matrix-row-medium {
  min-height: var(--matrix-row-min, 66px);
}

.matrix-group.matrix-row-regular,
.matrix-cell.matrix-row-regular {
  min-height: var(--matrix-row-min, 66px);
}

.matrix-group.matrix-row-large,
.matrix-cell.matrix-row-large {
  min-height: var(--matrix-row-min, 92px);
}

.matrix-head,
.matrix-group {
  background: var(--surface-secondary);
  color: var(--accent-secondary);
  font-weight: 850;
  text-align: center;
}

.matrix-cell {
  display: grid;
  gap: 4px;
  align-content: start;
  background: rgba(255, 255, 255, 0.72);
}

.matrix-cell span {
  display: block;
  min-width: 0;
  max-width: 100%;
  border-radius: 999px;
  background: var(--surface-peach);
  padding: 2px 6px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: keep-all;
}

.matrix-cell span.type-general {
  background: var(--surface-secondary);
  color: var(--accent-secondary);
}

.matrix-cell span.type-career {
  background: var(--surface-peach);
  color: var(--accent-hover);
}

.matrix-cell span.type-fusion {
  background: var(--surface-mint);
  color: var(--status-success);
}

.matrix-cell em {
  color: var(--text-tertiary);
  font-style: normal;
}

.planner-summary {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  overflow: auto;
}

.summary-card h2 {
  margin: 0 0 var(--space-2);
  font-size: 20px;
  line-height: 1.25;
}

.summary-card p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.credit-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-secondary);
}

.credit-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-secondary);
}

.limit-ok {
  color: var(--status-success) !important;
  font-weight: 850;
}

.limit-error {
  color: var(--status-error) !important;
  font-weight: 850;
}

.planner-alert-note {
  color: var(--status-error) !important;
  display: grid;
  font-size: 11px !important;
  font-weight: 800;
  gap: 2px;
  line-height: 1.45;
  margin-top: var(--space-3) !important;
}

.planner-alert-note span {
  display: block;
}

.requirement-list,
.selected-plan ul,
.group-credit-list {
  display: grid;
  gap: 6px;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.requirement-list li,
.selected-plan li,
.group-credit-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  border-radius: 10px;
  background: var(--surface-secondary);
  padding: 7px 8px;
  font-size: 12px;
}

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

.group-credit-list li {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 6px 7px;
}

.requirement-list em {
  border-radius: 999px;
  padding: 2px 6px;
  font-style: normal;
  font-weight: 850;
}

.requirement-list .ok {
  background: rgba(63, 157, 120, 0.12);
  color: var(--status-success);
}

.requirement-list .warn {
  background: rgba(196, 138, 66, 0.12);
  color: var(--status-warning);
}

.selected-plan button {
  border: 0;
  border-radius: 999px;
  background: var(--accent-secondary);
  color: white;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 850;
}

.references-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-3);
  min-height: 0;
}

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

#panelReferences .panel-header.tight {
  margin-bottom: var(--space-4);
}

.reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.reference-main {
  display: grid;
  grid-template-rows: auto;
  min-height: 100%;
}

.reference-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(122px, 15vw, 190px);
  gap: var(--space-4);
  align-items: stretch;
  min-height: clamp(300px, 52dvh, 410px);
}

.reference-grid {
  align-self: start;
}

.reference-character {
  position: relative;
  display: grid;
  min-height: 100%;
  align-self: stretch;
  align-items: end;
  justify-items: end;
  padding: 0 var(--space-3) 0 0;
}

#panelReferences .panel-header .kicker {
  display: none;
}

.reference-character-img {
  width: clamp(122px, 15vw, 190px);
  height: clamp(122px, 32dvh, 230px);
  object-fit: contain;
}

.reference-card {
  display: block;
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  background: var(--surface-elevated);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
}

.reference-card strong,
.reference-card span {
  display: block;
}

.reference-card strong {
  font-size: 18px;
}

.reference-card span {
  margin-top: 2px;
  color: var(--accent-secondary);
  font-size: 12px;
  font-weight: 850;
}

.reference-card p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: var(--space-6);
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(42, 36, 51, 0.34);
}

.modal-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(920px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 48px));
  border: 1px solid var(--border-default);
  border-radius: 24px;
  background: var(--surface-primary);
  box-shadow: 0 24px 70px rgba(42, 36, 51, 0.22);
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-5);
}

.modal-header h2 {
  margin: 0;
  line-height: 1.25;
}

.modal-close {
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-elevated);
  padding: var(--space-2) var(--space-4);
  color: var(--text-primary);
  font-weight: 850;
}

.modal-body {
  min-height: 0;
  overflow: auto;
  padding: var(--space-5);
}

.pdf-frame {
  width: 100%;
  height: min(620px, calc(100dvh - 180px));
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: white;
}

.modal-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.modal-facts span {
  border-radius: 999px;
  background: var(--surface-secondary);
  color: var(--accent-secondary);
  padding: var(--space-1) var(--space-3);
  font-size: 12px;
  font-weight: 850;
}

.course-detail-text {
  white-space: pre-wrap;
  color: var(--text-secondary);
}

.guide-sheet {
  border: 1px solid var(--border-default);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(250, 247, 255, 0.82), rgba(255, 255, 255, 0.92));
  color: var(--text-primary);
  padding: var(--space-4);
}

.guide-sheet-title {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-primary);
  text-align: center;
  overflow: hidden;
}

.guide-sheet-title h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 850;
}

.guide-sheet-title span {
  display: grid;
  min-height: 52px;
  place-items: center;
  border-right: 1px solid var(--border-default);
  background: var(--surface-secondary);
  color: var(--accent-secondary);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 850;
}

.guide-sheet-intro {
  border: 1px solid var(--border-default);
  border-radius: 18px;
  margin: var(--space-3) 0;
  background: rgba(255, 255, 255, 0.74);
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.guide-sheet-intro p,
.guide-lines p {
  margin: 0;
}

.guide-sheet-section {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2) 0;
}

.guide-sheet-section h3 {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  font-weight: 800;
}

.guide-lines {
  display: grid;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.guide-lines p {
  position: relative;
  padding-left: 12px;
}

.guide-sheet-intro,
.guide-sheet-summary .guide-lines {
  text-align: center;
}

.guide-sheet-intro p,
.guide-sheet-summary .guide-lines p {
  padding-left: 0;
}

.guide-sheet-summary .guide-lines p::before {
  display: none;
}

.guide-lines p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent-secondary);
  opacity: 0.68;
}

.guide-career-section {
  padding-top: var(--space-3);
}

.guide-career-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.guide-career-card {
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  padding: var(--space-3);
}

.guide-career-card h4 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-size: 13px;
}

.guide-career-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
}

.guide-career-icon::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-secondary);
}

.guide-career-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.48;
}

.guide-career-card li {
  position: relative;
  padding-left: 12px;
}

.guide-career-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent-primary);
}

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

.guide-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-2);
  font-size: 11px;
  table-layout: fixed;
}

.guide-table td {
  border: 1px solid var(--border-default);
  padding: 4px 5px;
  text-align: center;
  vertical-align: middle;
  word-break: keep-all;
  background: rgba(255, 255, 255, 0.72);
}

.guide-info-table {
  table-layout: auto;
}

.guide-info-table td {
  min-width: 54px;
}

.modal-pdf-button {
  margin-top: var(--space-5);
}

:focus-visible {
  outline: 3px solid rgba(138, 130, 214, 0.32);
  outline-offset: 3px;
}

@media (max-width: 920px) {
  .gate-screen,
  .app-screen {
    height: auto;
    min-height: 100dvh;
  }

  .gate-screen {
    transform: none;
  }

  .gate-layout,
  .guide-layout,
  .qa-layout,
  .credit-detail-layout,
  .planner-layout,
  .references-layout {
    grid-template-columns: 1fr;
  }

  #panelQa.is-active {
    overflow: auto;
  }

  .qa-layout {
    height: auto;
    min-height: 0;
  }

  .qa-topbar {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .qa-subject-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    justify-content: stretch;
  }

  .qa-subject-strip .subject-tab {
    grid-column: span 2;
    width: 100%;
    min-width: 0;
  }

  .qa-subject-strip .subject-tab:nth-last-child(2):nth-child(3n + 1),
  .qa-subject-strip .subject-tab:nth-last-child(1):nth-child(3n + 2) {
    grid-column: span 3;
  }

  .qa-subject-strip .subject-tab:nth-last-child(1):nth-child(3n + 1) {
    grid-column: 1 / -1;
  }

  .guide-layout-wide .course-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-courses.has-guide-character {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-courses.has-guide-character .guide-semester-group,
  .guide-character-row {
    grid-column: 1;
  }

  .qa-course-menu,
  .qa-main {
    min-height: 0;
  }

  .qa-course-menu {
    display: block;
    max-height: none;
    overflow: visible;
    padding: var(--space-3);
  }

  .qa-course-summary {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;
  }

  .qa-course-summary span {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .qa-course-summary strong {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.3;
  }

  .qa-course-summary small {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
  }

  .qa-course-summary::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--text-tertiary);
    border-bottom: 2px solid var(--text-tertiary);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 160ms ease-out;
  }

  .qa-course-menu[open] .qa-course-summary::after {
    transform: rotate(225deg) translate(-2px, -1px);
  }

  .qa-course-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    max-height: min(48dvh, 430px);
    overflow: auto;
    padding-top: var(--space-3);
    padding-right: 0;
  }

  .qa-course-list .course-filter {
    min-height: 64px;
    padding: 9px 8px;
    border-radius: 14px;
  }

  .qa-course-list .course-filter strong {
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  .qa-course-list .course-filter span {
    font-size: 11px;
    line-height: 1.35;
  }

  .qa-card .qa-answer {
    font-size: 16px;
    line-height: 1.72;
  }

  .qa-list {
    overflow: visible;
  }

  #panelPlanner.is-active {
    overflow: auto;
  }

  .planner-layout,
  .references-layout {
    height: auto;
    min-height: 0;
  }

  .planner-layout > *,
  .references-layout > * {
    min-width: 0;
  }

  .planner-picker-scroll,
  .planner-summary {
    overflow: visible;
  }

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

  .gate-visual {
    display: grid;
    min-height: 260px;
    max-height: none;
  }

  .gate-visual img {
    display: block;
    width: min(100%, 430px);
    height: auto;
    max-height: none;
    object-fit: contain;
  }

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

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

  .basics-grid > .note-card:not(.soft):not(.teacher-qa-card):not(.timeline-card),
  .credit-overview-card,
  .basics-grid > .credit-mini,
  .note-card.soft,
  .teacher-qa-card,
  .timeline-card {
    grid-column: auto;
  }

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

  .credit-overview-card.has-character,
  .note-card.soft.has-character,
  .teacher-qa-card.has-character {
    grid-template-columns: minmax(0, 1fr) clamp(92px, 24vw, 132px);
    min-height: auto;
  }

  .overview-character,
  .action-character {
    width: clamp(76px, 18vw, 120px);
    height: clamp(82px, 22vw, 132px);
  }

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

  .selection-character-card {
    grid-column: 1 / -1;
  }

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

  .reference-character {
    min-height: 116px;
    justify-items: end;
  }

  .reference-character-img {
    width: clamp(120px, 28vw, 190px);
    height: clamp(120px, 28vw, 190px);
  }

  #panelCreditDetails .checklist-card ul {
    grid-template-columns: 1fr;
  }

  .app-header {
    align-items: flex-start;
    flex-direction: column;
    min-height: auto;
  }

  .logo-home {
    width: min(100%, 560px);
  }
}

@media (max-width: 560px) {
  :root {
    --fluid-panel-padding: 12px;
    --fluid-card-title: 20px;
    --fluid-subtitle: 16px;
    --fluid-body: 13px;
    --fluid-caption: 11px;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .gate-screen,
  .app-screen {
    width: calc(100vw - 24px);
    max-width: 1240px;
    padding: var(--space-3) 0;
  }

  .gate-screen {
    gap: var(--space-3);
  }

  .gate-logo {
    width: min(100%, 440px);
  }

  .tab-panel {
    padding: var(--space-3);
  }

  .gate-copy h1,
  .school-title {
    font-size: 36px;
  }

  .grade-card {
    min-height: 118px;
    padding: var(--space-4);
  }

  .gate-copy {
    text-align: left;
  }

  .app-actions {
    width: auto;
    grid-template-columns: minmax(0, 1fr);
    justify-self: end;
    margin-bottom: 0;
  }

  .app-actions a,
  .app-actions button {
    width: auto;
    min-width: 110px;
    min-height: 32px;
    height: 32px;
    padding: 4px 12px;
    font-size: 12px;
  }

  .home-button {
    min-height: 34px;
    height: 34px;
    border-radius: 999px;
  }

  .home-button::before {
    width: 13px;
    height: 13px;
    margin-right: 5px;
  }

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

  .tab-button {
    min-height: 38px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.15;
  }

  .credit-overview-card.has-character h2 {
    font-size: 20px;
  }

  .basics-grid {
    grid-auto-rows: auto;
    gap: var(--space-3);
  }

  .basics-grid > .note-card:not(.soft):not(.teacher-qa-card):not(.timeline-card):not(.credit-overview-card),
  .basics-grid > .credit-mini,
  .credit-overview-card,
  .note-card.soft,
  .teacher-qa-card,
  .timeline-card {
    display: block;
    min-height: 0;
  }

  .basics-grid > .credit-mini strong,
  .credit-overview-card h2 {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    margin-bottom: var(--space-3);
  }

  .basics-grid > .credit-mini strong::before,
  .credit-overview-card h2::before,
  .note-card.soft h2::before,
  .teacher-qa-card h2::before,
  .timeline-card h2::before {
    width: 100%;
  }

  .subject-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
  }

  .subject-menu .panel-header {
    grid-column: 1 / -1;
    margin-bottom: var(--space-1);
  }

  .subject-tab {
    min-height: 42px;
    border-radius: 12px;
    padding: 9px 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 850;
  }

  .guide-career-grid {
    grid-template-columns: 1fr;
  }

  .planner-layout,
  .references-layout {
    gap: var(--space-3);
  }

  .planner-picker .panel-header h2,
  .references-layout .panel-header h2,
  .references-layout .result-card h2 {
    font-size: 24px;
    line-height: 1.28;
  }

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

  .planner-course {
    min-height: 68px;
    padding: 9px 10px;
  }

  .planner-board,
  .planner-summary,
  .planner-semester,
  .summary-card {
    border-radius: 16px;
  }

  .planner-matrix {
    grid-template-columns: 64px repeat(var(--semester-count, 4), minmax(68px, 1fr));
  }

  .matrix-head,
  .matrix-group,
  .matrix-cell {
    min-height: 34px;
    padding: 6px;
    font-size: 10px;
  }

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

  .guide-layout-wide .course-chip-grid {
    grid-template-columns: 1fr;
  }

  .credit-overview-card.has-character,
  .note-card.soft.has-character,
  .teacher-qa-card.has-character {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-character,
  .action-character {
    grid-column: 1;
    grid-row: auto;
    width: clamp(86px, 28vw, 122px);
    height: clamp(86px, 32vw, 138px);
    align-self: end;
    justify-self: end;
    margin-top: var(--space-1);
  }

  .note-card.soft.has-character,
  .teacher-qa-card.has-character {
    grid-template-rows: auto auto auto auto;
  }

  .note-card.soft.has-character p,
  .teacher-qa-card.has-character p {
    max-width: none;
  }

  .note-card.soft.has-character .pill-link,
  .teacher-qa-card.has-character .pill-link {
    height: 42px;
    min-width: 0;
    width: min(100%, 230px);
    min-height: 42px;
    margin-top: var(--space-4);
    padding: 0 14px;
    font-size: 13px;
  }

  .selection-tip-grid {
    grid-template-columns: 1fr;
  }

  .selection-character-img,
  .guide-character-img,
  .reference-character-img {
    width: clamp(108px, 42vw, 168px);
    height: clamp(108px, 42vw, 168px);
  }

  .guide-courses.has-guide-character {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-character-row {
    grid-column: 1;
    grid-row: auto;
    min-height: 112px;
    justify-content: flex-end;
    padding: var(--space-2) 0 0;
  }
}

@media (max-height: 740px) and (min-width: 921px) {
  .app-screen {
    min-height: 740px;
  }

  .app-header {
    min-height: clamp(110px, 20dvh, 146px);
  }

  .tab-button {
    min-height: 42px;
  }

  .detail-card {
    min-height: 84px;
  }
}