.student-class-stock-page {
  --student-stock-blue: #2367ed;
  --student-stock-blue-soft: #edf4ff;
  --student-stock-green: #25a66f;
  --student-stock-ink: #172643;
  --student-stock-muted: #68788f;
  --student-stock-line: #d5e1ee;
  min-width: 760px;
  background: #edf4fa;
  color: var(--student-stock-ink);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  scroll-behavior: smooth;
}

.student-class-stock-page .student-class-stock-shell {
  width: min(1500px, calc(100% - 32px));
  margin: 0 auto;
  padding: 10px 0 38px;
}

.student-class-stock-header {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(210px, .7fr) minmax(540px, 1.9fr) minmax(170px, .55fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 88px;
  border: 1px solid var(--student-stock-line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 5px 16px rgb(30 64 120 / 7%);
  padding: 10px 14px;
}

.student-class-stock-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.student-class-stock-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #b9d2f7;
  border-radius: 50%;
  background: #edf5ff;
  color: #2968c8;
  font-size: 19px;
}

.student-class-stock-identity > div {
  display: grid;
  min-width: 0;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 7px;
}

.student-class-stock-identity h1 {
  grid-column: 1 / -1;
  overflow: hidden;
  margin: 0;
  color: var(--student-stock-ink);
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-class-stock-identity p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--student-stock-muted);
  font-size: 11px;
  font-weight: 800;
}

.student-class-stock-identity span:last-child {
  width: fit-content;
  border-radius: 5px;
  background: #e8f1ff;
  padding: 3px 6px;
  color: #1d58c4;
  font-size: 9px;
  font-weight: 900;
}

.student-class-stock-flow {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.student-class-stock-flow li {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  border-radius: 7px;
  padding: 7px 5px;
}

.student-class-stock-flow li::after {
  position: absolute;
  top: 50%;
  right: -3px;
  width: 6px;
  height: 1px;
  background: #cbd5e1;
  content: "";
}

.student-class-stock-flow li:last-child::after { display: none; }

.student-class-stock-flow b {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  background: #fff;
  color: #617089;
  font-size: 10px;
}

.student-class-stock-flow span { min-width: 0; }
.student-class-stock-flow strong,
.student-class-stock-flow small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-class-stock-flow strong { color: #52627a; font-size: 10px; }
.student-class-stock-flow small { margin-top: 2px; color: #94a3b8; font-size: 8px; }
.student-class-stock-flow li.is-active { background: var(--student-stock-blue-soft); }
.student-class-stock-flow li.is-active b { border-color: var(--student-stock-blue); background: var(--student-stock-blue); color: #fff; }
.student-class-stock-flow li.is-active strong { color: #1d58c4; }

.student-class-stock-account {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center;
  gap: 8px;
  border: 1px solid #d8e6f4;
  border-radius: 10px;
  background: #f7fbff;
  padding: 8px 10px;
}

.student-class-stock-account span,
.student-class-stock-account strong,
.student-class-stock-account small { display: block; }
.student-class-stock-account span,
.student-class-stock-account small { color: var(--student-stock-muted); font-size: 9px; }
.student-class-stock-account strong { margin: 2px 0; color: #1658df; font-size: 17px; white-space: nowrap; }
.student-class-stock-account > i {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 16px;
  background: #fff2db;
  color: #ee8e42;
  font-size: 28px;
}

.student-class-stock-header-actions {
  display: grid;
  gap: 5px;
}

.student-class-stock-header-actions a {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #d5dfeb;
  border-radius: 999px;
  background: #fff;
  padding: 4px 9px;
  color: #2f405d;
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.student-class-stock-header-actions a:first-child {
  border-color: #bed4fb;
  background: #edf4ff;
  color: #1554c5;
}

.student-class-stock-mission-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.student-class-stock-mission-tabs a {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #ccd9e7;
  border-radius: 10px;
  background: #fff;
  color: #344b6c;
  font-size: 16px;
  font-weight: 950;
  text-decoration: none;
}

.student-class-stock-mission-tabs a.is-active {
  border-color: var(--student-stock-blue);
  background: var(--student-stock-blue);
  color: #fff;
  box-shadow: 0 8px 20px rgb(35 103 237 / 18%);
}

.student-class-stock-page .class-stock-card {
  border-color: var(--student-stock-line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 5px 16px rgb(30 64 120 / 7%);
  padding: 17px;
}

.student-class-stock-page .student-class-stock-message-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
}
.student-class-stock-page .class-stock-message { color: #365a49; font-size: 12px; font-weight: 850; }
.student-class-stock-page .student-class-stock-message-card > p:last-child {
  margin: 0;
  color: #66758a;
  font-size: 10px;
  font-weight: 800;
}
.student-class-stock-page .student-class-stock-message-card > p:last-child i { color: #2d8a61; }
.student-class-stock-page .class-stock-workspace { gap: 10px; margin-top: 10px; }

.student-class-stock-page .class-stock-control-card {
  display: grid;
  grid-template-columns: minmax(210px, .7fr) minmax(450px, 1.3fr) auto;
  align-items: center;
  gap: 14px;
}

.student-class-stock-page .class-stock-control-card > div:first-child { min-width: 0; }
.student-class-stock-page .class-stock-control-card h2 { overflow-wrap: anywhere; font-size: 17px; }
.student-class-stock-page .class-stock-control-card p { margin: 0; color: var(--student-stock-muted); font-size: 11px; font-weight: 800; }
.student-class-stock-page .class-stock-kicker,
.student-class-stock-page .class-stock-section-heading span { color: #1d63db; }

.student-class-stock-page .class-stock-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  flex: none;
}

.student-class-stock-page .class-stock-metrics div {
  border: 1px solid #e1e9f2;
  border-radius: 9px;
  background: #f7faff;
  padding: 10px 12px;
}

.student-class-stock-page .class-stock-metrics dt { font-size: 10px; }
.student-class-stock-page .class-stock-metrics dd { font-size: 14px; }

.student-class-stock-page .secondary-button,
.student-class-stock-page .class-stock-primary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
}

.student-class-stock-page .class-stock-primary { background: var(--student-stock-blue); }
.student-class-stock-page .class-stock-section-heading { align-items: flex-start; }
.student-class-stock-page .class-stock-section-heading h2 { margin-bottom: 3px; font-size: 17px; }
.student-class-stock-page .class-stock-section-heading p { margin: 0; color: var(--student-stock-muted); font-size: 11px; line-height: 1.5; }
.student-class-stock-page .class-stock-badge { border: 1px solid #bfd4fb; background: #edf4ff; color: #1554c5 !important; }

.student-class-stock-page .class-stock-scenario-card,
.student-class-stock-page .class-stock-result-card {
  border-color: #dce6ef;
  border-radius: 9px;
  background: #f8fbff;
}

.student-class-stock-page .class-stock-budget {
  position: static;
  margin: 12px 0;
  border-radius: 9px;
  background: #eaf2ff;
  color: #1d58c4;
  font-size: 12px;
}

.student-class-stock-page .class-stock-company-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.student-class-stock-page .class-stock-company-card {
  min-width: 0;
  border-color: #dce5ef;
  border-left: 3px solid #8aa7cd;
  border-radius: 9px;
  background: #fff;
  padding: 13px 12px;
}

.student-class-stock-page .class-stock-company-card[data-held="true"] {
  border-color: var(--student-stock-blue);
  box-shadow: inset 0 0 0 1px rgb(35 103 237 / 18%);
}

.student-class-stock-page .class-stock-company-card strong { color: #233853; font-size: 13px; }
.student-class-stock-page .class-stock-company-card small { color: var(--student-stock-muted); font-size: 10px; line-height: 1.45; }
.student-class-stock-page .class-stock-company-meta { font-size: 10px; }
.student-class-stock-page .class-stock-company-order { grid-template-columns: 1fr 1fr; }
.student-class-stock-page .class-stock-company-order select,
.student-class-stock-page .class-stock-company-order input,
.student-class-stock-page .class-stock-reason-form select,
.student-class-stock-page .class-stock-reason-form textarea,
.student-class-stock-page .class-stock-reflection-form input,
.student-class-stock-page .class-stock-reflection-form textarea {
  min-width: 0;
  min-height: 44px;
  border: 1px solid #cfdbe8;
  border-radius: 8px;
  background: #fff;
}

.student-class-stock-page .class-stock-reason-form {
  grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr);
  border: 1px solid #e0e8f1;
  border-radius: 9px;
  background: #f9fbfd;
  padding: 12px;
}

.student-class-stock-page .class-stock-actions { justify-content: flex-end; }
.student-class-stock-page .class-stock-actions .class-stock-primary { min-width: 190px; }
.student-class-stock-page .class-stock-two-column { gap: 10px; }
.student-class-stock-page .class-stock-holding,
.student-class-stock-page .class-stock-feedback-card,
.student-class-stock-page .class-stock-quiz-card,
.student-class-stock-page .class-stock-score-card,
.student-class-stock-page .class-stock-award {
  border-radius: 9px;
  background: #f8fbff;
}

.student-class-stock-page .class-stock-table th,
.student-class-stock-page .class-stock-table td { border-color: #e0e8f1; }

@media (max-width: 1320px) {
  .student-class-stock-header { grid-template-columns: minmax(200px, .65fr) minmax(470px, 1.55fr) minmax(160px, .5fr); }
  .student-class-stock-header-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .student-class-stock-header-actions a { min-height: 44px; border-radius: 8px; }
  .student-class-stock-page .class-stock-company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .student-class-stock-page .student-class-stock-shell { width: calc(100% - 20px); }
  .student-class-stock-header { grid-template-columns: minmax(0, 1fr) minmax(170px, .55fr); }
  .student-class-stock-flow { grid-column: 1 / -1; grid-row: 2; }
  .student-class-stock-header-actions { grid-row: 3; }
  .student-class-stock-page .class-stock-control-card { grid-template-columns: 1fr auto; }
  .student-class-stock-page .class-stock-control-card .class-stock-metrics { grid-column: 1 / -1; grid-row: 2; }
  .student-class-stock-page .class-stock-reason-form { grid-template-columns: 1fr; }
  .student-class-stock-page .class-stock-two-column { grid-template-columns: 1fr; }
}