.student-job-quest--reflection .student-job-quest__head {
  min-height: 58px;
  border-bottom: 0;
  padding: 0 6px 8px;
}

.student-job-quest--reflection .student-job-quest__head h2 {
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  font-size: clamp(30px, 3vw, 36px);
  font-weight: 1000;
  line-height: 1.05;
}

.student-job-reflection__policy-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: #d4b275;
  border-radius: 8px;
  background: #fff8e9b8;
  color: #392a1b;
  font-size: 11px;
  font-weight: 850;
}

.student-job-reflection__policy-pill span {
  border: 1px solid #bc3f31;
  border-radius: 6px;
  background: #d9503e;
  padding: 3px 7px;
  color: #fff;
  font-size: 10px;
  font-weight: 1000;
}

.student-job-reflection__policy-pill span[data-mode="optional"] { border-color: #147337; background: #268d40; }
.student-job-reflection__policy-pill span[data-mode="off"] { border-color: #777; background: #8a8a8a; }

.student-job-reflection__summary {
  display: grid;
  grid-template-columns: 1.05fr .92fr 1fr;
  min-height: 70px;
  overflow: hidden;
  border: 1px solid #d4b278;
  border-radius: 11px;
  background: #fffaf0a8;
}

.student-job-reflection__summary > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 17px;
  border-left: 1px solid #ddc28d;
  padding: 9px 23px;
}

.student-job-reflection__summary > div:first-child { border-left: 0; }
.student-job-reflection__summary > div > i { flex: 0 0 auto; color: #108232; font-size: 36px; }
.student-job-reflection__identity > i { color: #a36a12 !important; }
.student-job-reflection__summary span { display: grid; min-width: 0; gap: 4px; }
.student-job-reflection__summary small { color: #795735; font-size: 10px; font-weight: 850; }
.student-job-reflection__summary strong { color: #282017; font-size: 17px; line-height: 1.2; }
.student-job-reflection__period strong { color: #08752b; }
.student-job-reflection__activity-progress { align-content: center; gap: 8px !important; }
.student-job-reflection__activity-progress span { display: block; color: #2c251e; font-size: 12px; font-weight: 900; }
.student-job-reflection__activity-progress i { width: 20px; color: #147f32; font-size: 16px; text-align: center; }
.student-job-reflection__activity-progress .fa-circle { color: #176fc5; }

.student-job-reflection {
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(280px, .82fr);
  gap: 18px;
}

.student-job-reflection > section,
.student-job-reflection__side > section {
  min-width: 0;
  border: 1px solid #d7b87d;
  border-radius: 11px;
  background: #fffaf0a3;
}

.student-job-reflection__form { padding: 14px 18px 16px; }
.student-job-reflection__intro { margin: 0 0 7px; color: #35291d; font-size: 11px; font-weight: 850; }
.student-job-reflection__field { display: grid; position: relative; gap: 5px; margin-top: 7px; }
.student-job-reflection__field > strong { display: flex; align-items: center; gap: 5px; color: #08752b; font-size: 15px; font-weight: 1000; }
.student-job-reflection__field > strong b { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: #08752b; color: #fff; font-size: 11px; }
.student-job-reflection__field > span { color: #6e5c47; font-size: 9px; font-weight: 700; }

.student-job-reflection__field textarea {
  min-height: 92px;
  border: 1px solid #9c9c9c;
  border-radius: 8px;
  background: #fffdf8b8;
  padding: 11px 14px 22px;
  color: #2d251e;
  font: inherit;
  font-size: 11px;
  line-height: 1.55;
  resize: none;
}

.student-job-reflection__field textarea:focus-visible { border-color: #176fc5; outline: 2px solid #176fc52b; }
.student-job-reflection__field textarea:disabled { color: #5e5448; cursor: default; opacity: .82; }
.student-job-reflection__field > small { position: absolute; right: 12px; bottom: 7px; color: #6e655a; font-size: 9px; }

.student-job-reflection__criteria {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  border: 1px solid #ddbd80;
  border-radius: 8px;
  background: #fff8e9a8;
  padding: 8px 12px;
}

.student-job-reflection__criteria > strong { color: #3b2d1e; font-size: 10px; }
.student-job-reflection__criteria > strong i { color: #9b5d12; }
.student-job-reflection__criteria > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.student-job-reflection__criteria span { color: #382e24; font-size: 9px; font-weight: 750; white-space: nowrap; }
.student-job-reflection__criteria span i { color: #a0a5aa; font-size: 13px; }

.student-job-reflection__notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0 0;
  border: 1px solid #9ebbe0;
  border-radius: 8px;
  background: #edf5ff9c;
  padding: 8px 12px;
  color: #164f93;
  font-size: 9px;
  font-weight: 800;
}

.student-job-reflection__notice i { color: #176fc5; font-size: 16px; }
.student-job-reflection__actions { display: grid; grid-template-columns: minmax(160px, .72fr) minmax(260px, 1.38fr); gap: 11px; margin-top: 10px; }
.student-job-reflection__actions button { min-height: 51px; font-size: 13px; }
.student-job-reflection__actions button i { margin-right: 6px; }
.student-job-reflection__draft { border: 1px solid #858585; border-radius: 9px; background: #fffdf8b5; color: #176fc5; font: inherit; font-weight: 1000; cursor: pointer; }
.student-job-reflection__draft:disabled { cursor: default; filter: grayscale(.8); opacity: .62; }

.student-job-reflection__side { display: grid; align-content: start; gap: 14px; }
.student-job-reflection__salary { padding: 14px 17px; }
.student-job-reflection__salary h3,
.student-job-reflection__feedback h3 { margin: 0 0 9px; color: #2b221a; font-size: 15px; }
.student-job-reflection__salary h3 i { margin-left: 5px; color: #148334; font-size: 14px; }
.student-job-reflection__salary > small { display: block; color: #715942; font-size: 9px; }
.student-job-reflection__salary > strong { display: block; margin-top: 2px; color: #08752b; font-size: 27px; line-height: 1.1; }

.student-job-reflection__timeline { margin: 11px 0 0; border: 1px solid #dfc28b; border-radius: 9px; padding: 7px 13px; list-style: none; }
.student-job-reflection__timeline li { position: relative; display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: start; gap: 7px; min-height: 46px; border-bottom: 1px solid #ead7b5; padding: 8px 0; }
.student-job-reflection__timeline li:last-child { border-bottom: 0; }
.student-job-reflection__timeline li > i { z-index: 1; color: #a39b90; font-size: 18px; background: #fffaf0; }
.student-job-reflection__timeline li:not(:last-child)::before { position: absolute; top: 23px; bottom: -10px; left: 8px; width: 1px; background: #ddcba8; content: ""; }
.student-job-reflection__timeline span { display: grid; gap: 3px; }
.student-job-reflection__timeline strong { color: #2d251e; font-size: 11px; }
.student-job-reflection__timeline small { color: #6d6256; font-size: 8px; }
.student-job-reflection__timeline [data-state="complete"] > i { color: #168a3b; }
.student-job-reflection__timeline [data-state="current"] > i { color: #176fc5; }
.student-job-reflection__timeline [data-state="current"] strong { color: #176fc5; }
.student-job-reflection__timeline [data-state="revision"] > i,
.student-job-reflection__timeline [data-state="revision"] strong { color: #cf6b12; }
.student-job-reflection__salary-note { display: flex; gap: 7px; margin: 9px 0 0; color: #40372e; font-size: 8px; font-weight: 700; line-height: 1.45; }
.student-job-reflection__salary-note i { flex: 0 0 auto; color: #168a3b; font-size: 14px; }

.student-job-reflection__feedback { padding: 13px 17px; }
.student-job-reflection__feedback > div { display: flex; min-height: 64px; align-items: center; gap: 13px; border: 1px solid #dfc28b; border-radius: 9px; padding: 10px 14px; }
.student-job-reflection__feedback i { color: #aa9f8e; font-size: 25px; }
.student-job-reflection__feedback p { margin: 0; color: #5e5143; font-size: 10px; line-height: 1.5; white-space: pre-wrap; }
.student-job-reflection__back { display: grid; min-height: 52px; grid-template-columns: 26px minmax(0, 1fr) 18px; align-items: center; gap: 8px; border: 1px solid #b3b3b3; border-radius: 9px; background: #fffdf8b5; color: #2c251e; font: inherit; font-size: 12px; font-weight: 1000; text-align: left; cursor: pointer; }
.student-job-reflection__back i:first-child { color: #176fc5; font-size: 20px; text-align: center; }
.student-job-reflection__back i:last-child { color: #777; text-align: center; }

@media (max-width: 1050px) {
  .student-job-quest--reflection .student-job-quest__head { align-items: flex-start; }
  .student-job-reflection__summary { grid-template-columns: 1fr; }
  .student-job-reflection__summary > div { border-top: 1px solid #ddc28d; border-left: 0; }
  .student-job-reflection__summary > div:first-child { border-top: 0; }
  .student-job-reflection { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .student-job-quest--reflection .student-job-quest__head { display: grid; }
  .student-job-reflection__policy-pill { justify-self: start; }
  .student-job-reflection__summary > div { padding-inline: 16px; }
  .student-job-reflection__criteria > div,
  .student-job-reflection__actions { grid-template-columns: 1fr; }
  .student-job-reflection__criteria span { white-space: normal; }
}
