/* D 版经历目录与主舞台：松墨绿 × 岩白。 */
#experience .experience-deck[hidden],
#experience .experience-source[hidden] { display: none; }

#experience .experience-deck {
  --deck-ink: #203530;
  --deck-muted: #687770;
  --deck-accent: #748c7d;
  --deck-menu: #e3eae4;
  --deck-card: #fcfdfb;
  --deck-image: #eff2ef;
  --deck-edge: #c9d6cc;
  margin: 20px 0 8px;
  color: var(--deck-ink);
}
#experience .experience-deck-main {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
}
#experience .experience-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--deck-edge);
  background: var(--deck-menu);
}
#experience .experience-menu button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0 7px;
  width: 100%;
  padding: 12px 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--deck-ink);
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
#experience .experience-menu button span {
  grid-row: span 2;
  color: #5e776a;
  font: 700 13px Georgia, serif;
}
#experience .experience-menu button strong {
  font-size: 12px;
  line-height: 1.38;
}
#experience .experience-menu button small {
  margin-top: 4px;
  color: var(--deck-muted);
  font-size: 10px;
  letter-spacing: .02em;
}
#experience .experience-menu button:hover,
#experience .experience-menu button[aria-current="step"] {
  background: var(--deck-ink);
  color: #fff;
}
#experience .experience-menu button:hover span,
#experience .experience-menu button:hover small,
#experience .experience-menu button[aria-current="step"] span,
#experience .experience-menu button[aria-current="step"] small { color: #e1e7df; }

#experience .experience-slide {
  display: grid;
  grid-template-columns: 56% 44%;
  min-width: 0;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid var(--deck-edge);
  border-left: 6px solid var(--deck-accent);
  background: var(--deck-card);
  box-shadow: 0 13px 34px rgba(29, 41, 36, .08);
}
#experience .experience-deck[data-density="dense"] .experience-slide { grid-template-columns: 56% 44%; min-height: 540px; }
#experience .experience-deck[data-density="short"] .experience-slide { grid-template-columns: 52% 48%; min-height: 410px; }
#experience .experience-slide.is-changing { animation: experience-enter .4s cubic-bezier(.2,.7,.2,1); }
@keyframes experience-enter {
  from { opacity: .25; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
#experience .experience-slide-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 29px 30px;
}
#experience .experience-slide-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #5e776a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}
#experience .experience-slide-body time {
  color: var(--deck-muted);
  font: italic 15px Georgia, serif;
}
#experience .experience-slide-body h3 {
  margin: 16px 0 8px;
  color: var(--deck-ink);
  font-size: clamp(25px, 2.8vw, 36px);
  line-height: 1.22;
  letter-spacing: -.045em;
}
#experience .experience-slide-role {
  margin: 0 0 19px;
  color: #5e776a;
  font-size: 14px;
  font-weight: 800;
}
#experience .experience-slide-points {
  margin: 0;
  padding-left: 1.2em;
  color: #4f6159;
  font-size: 13px;
  line-height: 1.72;
}
#experience .experience-slide-points li + li { margin-top: 8px; }
#experience .experience-slide-points strong { color: var(--deck-ink); }
#experience .experience-slide-end {
  margin-top: 22px;
  padding-top: 13px;
  border-top: 1px solid var(--deck-edge);
  color: #7a8c82;
  font-size: 10px;
  letter-spacing: .14em;
}
#experience .experience-slide-visual {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  align-self: center;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 1.25;
  height: auto;
  max-height: calc(100% - 36px);
  margin: 10px;
  padding: 0;
  border: 1px solid var(--deck-edge);
  background: var(--deck-image);
}
#experience .experience-slide-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
}
#experience .experience-slide-visual img[src$="01-wastewater-project.png"],
#experience .experience-slide-visual img[src$="02-chachang-lab.png"],
#experience .experience-slide-visual img[src$="06-longcha-lab.png"] { object-fit: cover; }
#experience .experience-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0 8px;
}
#experience .experience-control {
  min-width: 105px;
  padding: 10px 14px;
  border: 1px solid var(--deck-edge);
  background: var(--deck-card);
  color: var(--deck-ink);
  font: 700 13px var(--sans);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
#experience .experience-control:hover:not(:disabled) { background: var(--deck-ink); color: #fff; }
#experience .experience-control:disabled { opacity: .4; cursor: not-allowed; }
#experience .experience-status { display: flex; align-items: center; gap: 15px; }
#experience .experience-counter { white-space: nowrap; font: 700 13px Georgia, serif; }
#experience .experience-progress { width: 136px; height: 2px; background: var(--deck-edge); }
#experience .experience-progress span { display: block; height: 100%; background: var(--deck-accent); transition: width .3s ease; }

@media (max-width: 1100px) and (min-width: 651px) {
  #experience .experience-deck-main { grid-template-columns: clamp(165px, 21vw, 210px) minmax(0, 1fr); }
  #experience .experience-menu { padding: 8px; }
  #experience .experience-menu button { grid-template-columns: 25px minmax(0, 1fr); padding: 10px 7px; }
  #experience .experience-menu button strong { font-size: 11px; }
  #experience .experience-slide-copy { padding: 24px; }
}
@media (max-width: 1000px) {
  #experience .experience-slide,
  #experience .experience-deck[data-density="dense"] .experience-slide,
  #experience .experience-deck[data-density="short"] .experience-slide { grid-template-columns: 1fr; min-height: 0; }
  #experience .experience-slide-visual { grid-row: 1; aspect-ratio: auto; height: 235px; max-height: none; }
  #experience .experience-slide-copy { grid-row: 2; }
  #experience .experience-deck[data-density="dense"] .experience-slide-visual { height: 235px; }
  #experience .experience-deck[data-density="short"] .experience-slide-visual { height: 260px; }
}
@media (max-width: 650px) {
  #experience .experience-deck-main { display: block; }
  #experience .experience-menu {
    flex-direction: row;
    gap: 7px;
    overflow-x: auto;
    margin-bottom: 10px;
    padding: 8px;
    scrollbar-width: none;
  }
  #experience .experience-menu::-webkit-scrollbar { display: none; }
  #experience .experience-menu button {
    flex: 0 0 145px;
    grid-template-columns: 22px minmax(0, 1fr);
    padding: 8px;
  }
  #experience .experience-menu button strong { font-size: 10px; }
  #experience .experience-menu button small { font-size: 9px; }
  #experience .experience-slide { min-height: 0; }
  #experience .experience-slide-visual,
  #experience .experience-deck[data-density="medium"] .experience-slide-visual {
    height: 210px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--deck-edge);
  }
  #experience .experience-deck[data-density="dense"] .experience-slide-visual { height: 190px; }
  #experience .experience-deck[data-density="short"] .experience-slide-visual { height: 235px; }
  #experience .experience-slide-copy { padding: 22px; }
  #experience .experience-slide-body h3 { margin-top: 11px; font-size: clamp(23px, 6.7vw, 31px); }
  #experience .experience-slide-role { margin-bottom: 12px; font-size: 13px; }
  #experience .experience-slide-points { font-size: 12px; line-height: 1.6; }
  #experience .experience-slide-points li + li { margin-top: 5px; }
  #experience .experience-slide-end { display: none; }
  #experience .experience-controls {
    position: sticky;
    z-index: 8;
    bottom: 0;
    margin-inline: -14px;
    padding: 10px 14px;
    border-top: 1px solid var(--deck-edge);
    background: rgba(252, 253, 251, .96);
    backdrop-filter: blur(9px);
  }
  #experience .experience-control { min-width: 76px; padding: 9px 6px; font-size: 11px; }
  #experience .experience-progress { width: 65px; }
  #experience .experience-status { gap: 8px; }
  #experience .experience-counter { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  #experience .experience-slide.is-changing { animation: none; }
  #experience .experience-control,
  #experience .experience-menu button,
  #experience .experience-progress span { transition: none; }
}