.landing-training {
  width: min(100%, 860px);
  margin: 56px auto 0;
  padding-bottom: 34px;
  color: #203249;
}
.landing-training-intro {
  padding: 0 2px;
}
.landing-training-intro h2 {
  margin: 0 0 12px;
  color: #082b68;
  font-size: clamp(33px, 4vw, 48px);
  line-height: 1.14;
  letter-spacing: -.055em;
}
.landing-training-intro h2.landing-training-title-compact {
  font-size: clamp(27px, 3vw, 36px);
  white-space: nowrap;
}
.landing-training-intro p {
  margin: 0;
  color: #627084;
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
}
.kr-page .landing-training-intro p { margin: 0; }
.landing-training-path {
  position: relative;
  margin: 30px 0 0 22px;
  padding: 0 0 0 29px;
  border-left: 2px dashed #b8cbbd;
  list-style: none;
}
.landing-training-step {
  position: relative;
  margin: 0 0 18px;
}
.landing-step-marker {
  position: absolute;
  z-index: 1;
  top: 16px;
  left: -48px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0d3867;
  box-shadow: 0 0 0 6px #f8f9f7;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}
.landing-training-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid #d7e0d6;
  border-radius: 24px;
  background: #fffefa;
  box-shadow: 0 12px 30px rgba(24, 52, 85, .075);
}
.landing-training-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.landing-training-kicker {
  color: #4a6c55;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
}
.landing-training-status {
  flex: none;
  padding: 6px 10px;
  border: 1px solid #b7d6be;
  border-radius: 999px;
  background: #e5f3e8;
  color: #3f704e;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
}
.landing-training-card h3 {
  margin: 18px 0 7px;
  color: #082b68;
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -.05em;
}
.landing-training-description {
  margin: 0 0 18px;
  color: #627084;
  font-size: 15px;
  line-height: 1.55;
  word-break: keep-all;
}
.kr-page .landing-training-description { margin: 0 0 18px; }
.landing-training-rows {
  display: grid;
  gap: 9px;
}
.landing-training-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 96px;
  overflow: hidden;
  border: 1px solid #d9e1e3;
  border-radius: 16px;
  background: #f2f7f8;
  color: #193e61;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.landing-training-row:nth-child(odd) {
  border-color: #d9e1d8;
  background: #f1f6ee;
}
.landing-training-row:hover {
  transform: translateY(-2px);
  border-color: #a8c6b5;
  box-shadow: 0 8px 20px rgba(24, 52, 85, .11);
}
.landing-training-row:focus-visible,
.landing-discussion:focus-visible {
  outline: 3px solid #6c98b9;
  outline-offset: 3px;
}
.landing-training-row img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
}
.landing-training-step:first-child .landing-training-row:first-child img {
  object-fit: contain;
  background: #f7f1e3;
}
.landing-training-row > span:not(.landing-row-arrow) {
  min-width: 0;
  padding: 10px 0;
}
.landing-training-row strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
}
.landing-training-row small {
  display: block;
  margin-top: 5px;
  color: #617181;
  font-size: 12px;
  line-height: 1.45;
  word-break: keep-all;
}
.landing-row-arrow {
  margin-right: 8px;
  font-size: 16px;
  font-weight: 900;
}
.landing-readable-row {
  grid-template-columns: 128px minmax(0, 1fr) 18px;
}
.landing-readable-row img {
  width: 128px;
  height: 112px;
}
.landing-discussion-step .landing-step-marker {
  top: 11px;
  background: #ed813e;
}
.landing-discussion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 74px;
  padding: 16px 20px;
  border-radius: 18px;
  background: #e8eff9;
  color: #123967;
  text-decoration: none;
  transition: transform .18s, background .18s;
}
.landing-discussion:hover {
  transform: translateY(-2px);
  background: #dce9f9;
}
.landing-discussion strong {
  display: block;
  font-size: 19px;
  line-height: 1.25;
}
.landing-discussion small {
  display: block;
  margin-top: 4px;
  color: #506781;
  font-size: 13px;
  line-height: 1.45;
}
.landing-discussion > span:last-child {
  flex: none;
  font-size: 24px;
  line-height: 1;
}
html[data-appearance=dark] .landing-training { color: #e2ecf3; }
html[data-appearance=dark] .landing-training-intro h2,
html[data-appearance=dark] .landing-training-card h3 { color: #eaf2ff; }
html[data-appearance=dark] .landing-training-intro p,
html[data-appearance=dark] .landing-training-description { color: #b7c7d2; }
html[data-appearance=dark] .landing-training-path { border-color: #557464; }
html[data-appearance=dark] .landing-step-marker { box-shadow: 0 0 0 6px #071329; }
html[data-appearance=dark] .landing-training-card { border-color: #3b5346; background: #172724; }
html[data-appearance=dark] .landing-training-kicker { color: #b3d5bd; }
html[data-appearance=dark] .landing-training-status { border-color: #486a51; background: #253c2d; color: #bfdfc6; }
html[data-appearance=dark] .landing-training-row { border-color: #43596c; background: #223648; color: #e2ecf3; }
html[data-appearance=dark] .landing-training-row:nth-child(odd) { border-color: #496151; background: #263b32; }
html[data-appearance=dark] .landing-training-row small { color: #bdcdd4; }
html[data-appearance=dark] .landing-discussion { background: #193a5e; color: #eaf2ff; }
html[data-appearance=dark] .landing-discussion:hover { background: #224970; }
html[data-appearance=dark] .landing-discussion small { color: #c2d5e8; }
@media (max-width: 820px) {
  .landing-training { margin-top: 40px; }
  .landing-training-intro h2 { font-size: 34px; }
  .landing-training-intro h2.landing-training-title-compact { font-size: clamp(20px, 5.6vw, 24px); }
  .landing-training-intro p { font-size: 15px; }
  .landing-training-path { margin: 24px 0 0 18px; padding-left: 26px; }
  .landing-training-step { margin-bottom: 15px; }
  .landing-step-marker { left: -45px; width: 34px; height: 34px; font-size: 13px; }
  .landing-training-card { padding: 17px 16px 18px; border-radius: 20px; }
  .landing-training-kicker { font-size: 11px; }
  .landing-training-status { padding: 5px 8px; font-size: 10px; }
  .landing-training-card h3 { margin: 13px 0 7px; font-size: 27px; }
  .landing-training-description { margin-bottom: 13px; font-size: 14px; }
  .kr-page .landing-training-description { margin-bottom: 13px; }
  .landing-training-row { grid-template-columns: 76px minmax(0, 1fr) 14px; gap: 9px; min-height: 78px; border-radius: 14px; }
  .landing-training-row img { width: 76px; height: 78px; }
  .landing-training-row strong { font-size: 14px; }
  .landing-training-row small { font-size: 12px; }
  .landing-row-arrow { margin-right: 5px; font-size: 13px; }
  .landing-readable-row { grid-template-columns: 94px minmax(0, 1fr) 14px; }
  .landing-readable-row img { width: 94px; height: 94px; }
  .landing-discussion { min-height: 66px; padding: 13px 15px; border-radius: 16px; }
  .landing-discussion strong { font-size: 16px; }
  .landing-discussion small { font-size: 12px; }
}
@media (max-width: 359px) {
  .landing-training-path { margin-left: 17px; padding-left: 23px; }
  .landing-step-marker { left: -42px; }
  .landing-training-card { padding: 15px 13px; }
  .landing-training-row { grid-template-columns: 66px minmax(0, 1fr) 12px; gap: 7px; }
  .landing-training-row img { width: 66px; height: 76px; }
  .landing-readable-row { grid-template-columns: 78px minmax(0, 1fr) 12px; }
  .landing-readable-row img { width: 78px; height: 86px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-training-row, .landing-discussion { transition: none; }
}