@charset "UTF-8";

/* 總覽頁延續已驗收配色；只調整外觀，不改級別、課程排列與間距。 */
.route-title {
  color: var(--brand);
  background: var(--title-bg);
  box-shadow: inset 0 0 0 2px var(--title-line);
}

.unit-level {
  color: var(--ink);
  background: #dce2d9;
  box-shadow: inset 0 0 0 1px #91a69c, 0 2px 6px rgba(18, 63, 70, 0.06);
}

.unit-level h3,
.unit-level .unit-num {
  color: var(--brand);
}

.unit-level .unit-sub {
  color: var(--ink);
}

.required-block {
  --group-bg: #cfe0d8;
  --group-line: #8ba99b;
  --group-accent: #185a63;
  --group-hover: #bdd3c8;
}

.optional-block {
  --group-bg: #e6dbc1;
  --group-line: #b4a071;
  --group-accent: #795c23;
  --group-hover: #dacaa5;
}

.required-block,
.optional-block {
  background: var(--group-bg);
  border-radius: 6px;
  box-shadow: inset 4px 0 var(--group-accent), inset 0 0 0 1px var(--group-line);
}

.required-label,
.optional-label {
  color: var(--group-accent);
  background: transparent;
  border-left-color: transparent;
  position: relative;
  padding-left: 26px;
}

/* 短色條與外側整段色線分開；只調整標籤內部，不增加區塊高度。 */
.required-label::before,
.optional-label::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 4px;
  height: 1em;
  background: var(--group-accent);
  transform: translateY(-50%);
  pointer-events: none;
}

.unit-list li a {
  color: var(--ink);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.unit-list li a:hover {
  color: var(--ink);
  background: var(--group-hover);
  transform: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.unit-list li a:focus-visible {
  outline: 2px solid var(--group-accent);
  outline-offset: 1px;
  background: var(--group-hover);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.unit-list li a:active {
  color: #fff;
  background: var(--brand-dark);
  transform: none;
}