/*!**********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-1.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-1.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-1.use[3]!./resources/src/css/home/index.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
:root {
  /* === Songshan brand palette === */
  --bg: #ffffff;
  --bg-warm: #f5f5f3;
  --bg-warm-2: #ebebe7;
  --line: #dbdcdc;
  --line-soft: #e8e8e6;
  --ink: #2a2a28;
  --ink-2: #595757;
  --muted: #88908d;
  --muted-2: #b8bcb9;
  /* category accents */
  --moss: rgb(49, 79, 63);
  --moss-soft: rgb(94, 121, 106);
  --moss-tint: #e8f0ec;
  --indigo: #005787;
  --indigo-soft: #c9e1ee;
  --indigo-tint: #e6f0f7;
  --terracotta: #bd8145;
  --terracotta-soft: #dfbc8b;
  --terracotta-tint: #f4e8d4;
  --sun: #f8dd00;
  /* fonts */
  --serif-tc: "Noto Serif TC", "Songti TC", serif;
  --serif-en: "Cormorant Garamond", "Noto Serif TC", serif;
  --sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* === legacy fluid sizes (kept) === */
  --fs-xs: 0.875rem;
  --fs-s: 1rem;
  --fs-r: 1.125rem;
  --fs-m: 1.25rem;
  --fs-ml: 1.8125rem;
  --fs-l: 2.3125rem;
  --fs-xl: 2.6875rem;
  --fs-xxl: 3.3125rem;
}
@supports (color: color(display-p3 0 0 0)){
:root {
  --moss: color(display-p3 0.22014 0.30800 0.25261);
}
}
@supports (color: color(display-p3 0 0 0)){
:root {
  --moss-soft: color(display-p3 0.38885 0.47177 0.41797);
}
}

@media screen and (max-width: 480px) {
  :root {
    --fs-ml: 1.6875rem;
  }
}
@media (orientation: portrait) {
  .main {
    padding-top: 6.5rem;
  }
}

/* ============ KV (Hero Banner) ============ */
.kv {
  padding: 6.25rem 0 3.5rem;
}
@media (orientation: portrait) {
  .kv {
    padding: 0 0 2.5rem;
  }
}
@media screen and (max-width: 480px) {
  .kv {
    padding: 0 0 2rem;
  }
}

.kv_shell {
  position: relative;
  border-radius: 0.25rem;
  overflow: hidden;
  aspect-ratio: 16/5;
}
@media (orientation: portrait) {
  .kv_shell {
    aspect-ratio: 10/11;
  }
}
@media screen and (max-width: 480px) {
  .kv_shell {
    aspect-ratio: 10/16;
  }
}

.kv_slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 0.33fr 0.67fr;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.kv_slide.active {
  opacity: 1;
  pointer-events: auto;
}
@media (orientation: portrait) {
  .kv_slide {
    grid-template-columns: 1fr;
  }
}

.kv_title {
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-family: var(--serif-tc);
  font-weight: 500;
  font-size: 3.25rem;
  line-height: 1.25;
  color: #2a2a28;
  color: var(--ink);
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}
.kv_title .accent {
  font-family: "Cormorant Garamond", "Noto Serif TC", serif;
  font-family: var(--serif-en);
  font-style: italic;
  font-weight: 400;
  color: rgb(49, 79, 63);
  color: color(display-p3 0.22014 0.30800 0.25261);
  color: var(--moss);
}
@media (orientation: portrait) {
  .kv_title {
    font-size: 2.25rem;
  }
}
@media screen and (max-width: 480px) {
  .kv_title {
    font-size: 1.75rem;
  }
}

.kv_slide .subtitle {
  font-family: "Cormorant Garamond", "Noto Serif TC", serif;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 1.125rem;
  color: #88908d;
  color: var(--muted);
  margin-bottom: 1.75rem;
  letter-spacing: 0.04em;
}

.kv_slide .lede {
  font-size: 0.90625rem;
  color: #595757;
  color: var(--ink-2);
  line-height: 1.85;
  max-width: 26.25rem;
  margin-bottom: 2.25rem;
}

.kv_text {
  padding: 0.3125rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
  background: var(--bg);
}
@media (orientation: portrait) {
  .kv_text {
    padding: 3rem 0;
  }
}
@media screen and (max-width: 480px) {
  .kv_text {
    padding: 2rem 0;
  }
}

.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(49, 79, 63);
  color: color(display-p3 0.22014 0.30800 0.25261);
  color: var(--moss);
  margin-bottom: 1.75rem;
  padding-left: 3rem;
  position: relative;
}
.eyebrow::before {
  content: "";
  position: absolute;
  top: 0.5625rem;
  left: 0;
  width: 2rem;
  height: 0.0625rem;
  background: rgb(49, 79, 63);
  background: color(display-p3 0.22014 0.30800 0.25261);
  background: var(--moss);
}

.kv_cta {
  display: flex;
  gap: 0.875rem;
  align-items: center;
}

.btn_primary {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: #2a2a28;
  background: var(--ink);
  color: #fff;
  padding: 0.875rem 1.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  border-radius: 62.4375rem;
  transition: background 0.2s, transform 0.2s;
}
.btn_primary:hover {
  background: rgb(49, 79, 63);
  background: color(display-p3 0.22014 0.30800 0.25261);
  background: var(--moss);
  transform: translateX(0.125rem);
}
.btn_primary svg {
  width: 0.875rem;
  height: 0.875rem;
}

.btn_ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #595757;
  color: var(--ink-2);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  padding: 0.125rem 0.5rem;
  border-bottom: 0.0625rem solid #2a2a28;
  border-bottom: 0.0625rem solid var(--ink);
  border-radius: 0;
  transition: color 0.2s;
}
.btn_ghost:hover {
  color: rgb(49, 79, 63);
  color: color(display-p3 0.22014 0.30800 0.25261);
  color: var(--moss);
}

.kv_image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 890/416;
}

.kv_meta {
  position: absolute;
  left: 1.5rem;
  bottom: 1.375rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.65625rem;
  letter-spacing: 0.18em;
  color: rgba(31, 29, 24, 0.7);
  background: rgba(255, 255, 255, 0.85);
  padding: 0.375rem 0.75rem;
  text-transform: uppercase;
}

.kv_controls {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.5rem;
}
@media screen and (max-width: 480px) {
  .kv_controls {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
}

.kv_dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.kv_dots button {
  width: 2rem;
  height: 0.125rem;
  background: #dbdcdc;
  background: var(--line);
  transition: background 0.3s, width 0.3s;
}
.kv_dots button.active {
  background: #2a2a28;
  background: var(--ink);
  width: 3.5rem;
}

.kv_progress {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: #88908d;
  color: var(--muted);
}
.kv_progress .num {
  color: #2a2a28;
  color: var(--ink);
  font-weight: 500;
}

.kv_arrows {
  display: flex;
  gap: 0.25rem;
}
.kv_arrows button {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  border: 0.0625rem solid #dbdcdc;
  border: 0.0625rem solid var(--line);
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  transition: all 0.2s;
}
.kv_arrows button:hover {
  background: #2a2a28;
  background: var(--ink);
  color: #fff;
  border-color: #2a2a28;
  border-color: var(--ink);
}

/* ============ NEWS ============ */
.news {
  padding-top: 3rem;
}

.news_grid {
  display: grid;
  grid-template-columns: 17.5rem 1fr;
  grid-gap: 4rem;
  gap: 4rem;
  align-items: start;
}
@media (orientation: portrait) {
  .news_grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.news_tabs {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border-top: 0.0625rem solid #dbdcdc;
  border-top: 0.0625rem solid var(--line);
}
@media (orientation: portrait) {
  .news_tabs {
    flex-direction: row;
    flex-wrap: wrap;
    border-top: 0;
    gap: 0.5rem;
  }
}

.news_tab {
  text-align: left;
  padding: 1.125rem 0.25rem;
  border-bottom: 0.0625rem solid #dbdcdc;
  border-bottom: 0.0625rem solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-family: var(--serif-tc);
  font-size: 1rem;
  color: #595757;
  color: var(--ink-2);
  transition: all 0.2s;
}
.news_tab:hover {
  color: rgb(49, 79, 63);
  color: color(display-p3 0.22014 0.30800 0.25261);
  color: var(--moss);
  padding-left: 0.75rem;
}
.news_tab.active {
  color: rgb(49, 79, 63);
  color: color(display-p3 0.22014 0.30800 0.25261);
  color: var(--moss);
  font-weight: 500;
  padding-left: 0.75rem;
}
.news_tab .count {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: #88908d;
  color: var(--muted);
  letter-spacing: 0.1em;
}
@media (orientation: portrait) {
  .news_tab {
    padding: 0.5rem 0.875rem;
    border: 0.0625rem solid #dbdcdc;
    border: 0.0625rem solid var(--line);
    border-radius: 62.4375rem;
    font-size: 0.875rem;
    gap: 0.5rem;
  }
  .news_tab:hover, .news_tab.active {
    padding-left: 0.875rem;
    border-color: rgb(49, 79, 63);
    border-color: color(display-p3 0.22014 0.30800 0.25261);
    border-color: var(--moss);
  }
}

/* .news_list / .news_li / .news_link 樣式已抽出至
   share/components/_news_link.scss，於 home/index.js 中 import。
   若需頁面層級微調可在此覆寫。 */
.article_empty {
  padding: 3rem 0.5rem;
  color: #88908d;
  color: var(--muted);
  font-size: 0.875rem;
  border-top: 0.0625rem solid #dbdcdc;
  border-top: 0.0625rem solid var(--line);
  border-bottom: 0.0625rem solid #dbdcdc;
  border-bottom: 0.0625rem solid var(--line);
  text-align: center;
  letter-spacing: 0.08em;
}

/* ============ COURSES ============
   .course_list / .course_li / .course_link 等卡片樣式已抽出至
   share/components/_course_card.scss，於 home/index.js 中 import。 */
.courses {
  background: #f5f5f3;
  background: var(--bg-warm);
}

/* ============ MARKET ============ */
.market_grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.875rem;
  gap: 0.875rem;
}

.market_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.875rem 4rem;
  gap: 0.875rem 4rem;
}
@media (orientation: portrait) {
  .market_list {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.market_li {
  border-bottom: 0.0625rem solid #dbdcdc;
  border-bottom: 0.0625rem solid var(--line);
}

.market_link {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  padding: 1.375rem 0.25rem;
  align-items: center;
  transition: padding 0.25s, background 0.25s;
}
.market_link:hover {
  padding-left: 1rem;
  background: rgba(246, 243, 238, 0.5);
}
.market_link .when {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: #88908d;
  color: var(--muted);
  text-align: right;
  line-height: 1.6;
}
.market_link .when strong {
  display: block;
  color: #2a2a28;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}
@media screen and (max-width: 480px) {
  .market_link {
    grid-template-columns: 6rem 1fr;
    gap: 1rem;
  }
  .market_link .when {
    grid-column: 1/-1;
    text-align: left;
  }
}

.market_thumb {
  width: 9rem;
  aspect-ratio: 890/416;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0,rgba(0, 0, 0, 0.04) 0.0625rem, transparent 0.0625rem, transparent 0.5rem), linear-gradient(135deg, #d8d0bf, #c2b9a3);
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0 0.0625rem, transparent 0.0625rem 0.5rem), linear-gradient(135deg, #d8d0bf, #c2b9a3);
  position: relative;
}
.market_thumb img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.market_thumb.t2 {
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0,rgba(0, 0, 0, 0.04) 0.0625rem, transparent 0.0625rem, transparent 0.5rem), linear-gradient(135deg, #cfd6c8, #a8b39b);
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0 0.0625rem, transparent 0.0625rem 0.5rem), linear-gradient(135deg, #cfd6c8, #a8b39b);
}
.market_thumb.t3 {
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0,rgba(0, 0, 0, 0.04) 0.0625rem, transparent 0.0625rem, transparent 0.5rem), linear-gradient(135deg, #e8d4bd, #c8a780);
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0 0.0625rem, transparent 0.0625rem 0.5rem), linear-gradient(135deg, #e8d4bd, #c8a780);
}
.market_thumb.t4 {
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0,rgba(0, 0, 0, 0.04) 0.0625rem, transparent 0.0625rem, transparent 0.5rem), linear-gradient(135deg, #d8c5b3, #a89784);
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0 0.0625rem, transparent 0.0625rem 0.5rem), linear-gradient(135deg, #d8c5b3, #a89784);
}
.market_thumb.t5 {
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0,rgba(0, 0, 0, 0.04) 0.0625rem, transparent 0.0625rem, transparent 0.5rem), linear-gradient(135deg, #c4cdd6, #8a98a8);
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0 0.0625rem, transparent 0.0625rem 0.5rem), linear-gradient(135deg, #c4cdd6, #8a98a8);
}
.market_thumb.t6 {
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0,rgba(0, 0, 0, 0.04) 0.0625rem, transparent 0.0625rem, transparent 0.5rem), linear-gradient(135deg, #d6c8d2, #a890a3);
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0 0.0625rem, transparent 0.0625rem 0.5rem), linear-gradient(135deg, #d6c8d2, #a890a3);
}
@media screen and (max-width: 480px) {
  .market_thumb {
    width: 6rem;
  }
}

.market_info {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.market_info .cat {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.65625rem;
  letter-spacing: 0.18em;
  color: rgb(49, 79, 63);
  color: color(display-p3 0.22014 0.30800 0.25261);
  color: var(--moss);
  text-transform: uppercase;
}
.market_info .place {
  font-size: 0.78125rem;
  color: #88908d;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.market_info .place::before {
  content: "";
  width: 0.25rem;
  height: 0.25rem;
  background: #b8bcb9;
  background: var(--muted-2);
  border-radius: 50%;
}

.market_info_title {
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-family: var(--serif-tc);
  font-size: 1rem;
  font-weight: 500;
  color: #2a2a28;
  color: var(--ink);
  line-height: 1.45;
}

.market_feature {
  grid-column: 1/-1;
  margin-top: 2.25rem;
  background: rgb(49, 79, 63);
  background: color(display-p3 0.22014 0.30800 0.25261);
  background: var(--moss);
  color: #fff;
  padding: 3.5rem 4rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-gap: 4rem;
  gap: 4rem;
  align-items: center;
  border-radius: 0.125rem;
}
@media (orientation: portrait) {
  .market_feature {
    grid-template-columns: 1fr;
    padding: 2.5rem 1.75rem;
    gap: 2rem;
  }
}
@media screen and (max-width: 480px) {
  .market_feature {
    padding: 2rem 1.25rem;
    gap: 1.5rem;
  }
}
.market_feature .label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.market_feature p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.85;
  margin-bottom: 1.75rem;
  max-width: 42.5rem;
}

.market_feature_title {
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-family: var(--serif-tc);
  font-weight: 500;
  font-size: 1.875rem;
  line-height: 1.4;
  margin: 0 0 1rem;
  letter-spacing: 0.03em;
}
.market_feature_title .en {
  font-family: "Cormorant Garamond", "Noto Serif TC", serif;
  font-family: var(--serif-en);
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
  margin-left: 0.5rem;
  font-size: 1.375rem;
}

.feature_cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  color: rgb(49, 79, 63);
  color: color(display-p3 0.22014 0.30800 0.25261);
  color: var(--moss);
  padding: 0.875rem 1.75rem;
  border-radius: 62.4375rem;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  transition: background 0.2s, color 0.2s;
}
.feature_cta:hover {
  background: #bd8145;
  background: var(--terracotta);
  color: #fff;
}

.stat_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem 1.5rem;
  gap: 2rem 1.5rem;
  border-left: 0.0625rem solid rgba(255, 255, 255, 0.18);
  padding-left: 3.5rem;
}
@media (orientation: portrait) {
  .stat_list {
    border-left: 0;
    padding-left: 0;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.18);
    padding-top: 2rem;
  }
}

@media (orientation: portrait) {
  .stat_li {
    text-align: center;
  }
}

.stat_num {
  font-family: "Cormorant Garamond", "Noto Serif TC", serif;
  font-family: var(--serif-en);
  font-size: 2.75rem;
  font-style: italic;
  line-height: 1;
  color: #fff;
}
.stat_num sup {
  font-size: 1rem;
  font-style: normal;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  color: rgba(255, 255, 255, 0.6);
  margin-left: 0.25rem;
}

.stat_label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.5rem;
  letter-spacing: 0.06em;
}
/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-1.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-1.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-1.use[3]!./resources/src/css/share/components/_article_link.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
:root {
  /* === Songshan brand palette === */
  --bg: #ffffff;
  --bg-warm: #f5f5f3;
  --bg-warm-2: #ebebe7;
  --line: #dbdcdc;
  --line-soft: #e8e8e6;
  --ink: #2a2a28;
  --ink-2: #595757;
  --muted: #88908d;
  --muted-2: #b8bcb9;
  /* category accents */
  --moss: rgb(49, 79, 63);
  --moss-soft: rgb(94, 121, 106);
  --moss-tint: #e8f0ec;
  --indigo: #005787;
  --indigo-soft: #c9e1ee;
  --indigo-tint: #e6f0f7;
  --terracotta: #bd8145;
  --terracotta-soft: #dfbc8b;
  --terracotta-tint: #f4e8d4;
  --sun: #f8dd00;
  /* fonts */
  --serif-tc: "Noto Serif TC", "Songti TC", serif;
  --serif-en: "Cormorant Garamond", "Noto Serif TC", serif;
  --sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* === legacy fluid sizes (kept) === */
  --fs-xs: 0.875rem;
  --fs-s: 1rem;
  --fs-r: 1.125rem;
  --fs-m: 1.25rem;
  --fs-ml: 1.8125rem;
  --fs-l: 2.3125rem;
  --fs-xl: 2.6875rem;
  --fs-xxl: 3.3125rem;
}
@supports (color: color(display-p3 0 0 0)){
:root {
  --moss: color(display-p3 0.22014 0.30800 0.25261);
}
}
@supports (color: color(display-p3 0 0 0)){
:root {
  --moss-soft: color(display-p3 0.38885 0.47177 0.41797);
}
}

@media screen and (max-width: 480px) {
  :root {
    --fs-ml: 1.6875rem;
  }
}
/* ============================================================
   共用列表元件 news link list
   - .article_list / .article_li / .article_link
   - 配置：[ date(110px) ｜ body(flex) ｜ arrow(auto) ] 三欄
   - body 可選擇性放入 .tag / h3 / .excerpt
   - .tag 支援 .warn（terracotta）/ .gray（muted）兩個變體
   - 已內含 portrait（rem(90) 兩欄式）與 ≤480（rem(72) 兩欄、隱藏 arrow / excerpt）的 RWD
   首頁、最新消息列表與其他頁面如需「條列式新聞連結」皆可直接套用。
   ============================================================ */
.article_list {
  border-top: 0.0625rem solid #2a2a28;
  border-top: 0.0625rem solid var(--ink);
}

.article_li {
  border-bottom: 0.0625rem solid #dbdcdc;
  border-bottom: 0.0625rem solid var(--line);
}

.article_link {
  display: grid;
  grid-template-columns: 6.875rem 1fr auto;
  grid-gap: 2rem;
  gap: 2rem;
  padding: 1.75rem 0;
  align-items: baseline;
  transition: padding 0.25s;
}
.article_link:hover {
  padding-left: 0.5rem;
}
.article_link:hover h3 {
  color: rgb(49, 79, 63);
  color: color(display-p3 0.22014 0.30800 0.25261);
  color: var(--moss);
}
.article_link:hover .arrow {
  color: #2a2a28;
  color: var(--ink);
  transform: translateX(0.375rem);
}
.article_link .date {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: #88908d;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.article_link .date .y {
  display: block;
  font-size: 0.625rem;
  color: #b8bcb9;
  color: var(--muted-2);
  margin-bottom: 0.125rem;
}
.article_link .date .d {
  font-size: 1.125rem;
  color: #2a2a28;
  color: var(--ink);
  font-weight: 500;
}
@media (orientation: portrait) {
  .article_link .date .d {
    font-size: 0.875rem;
  }
}
.article_link .body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.article_link .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.65625rem;
  letter-spacing: 0.16em;
  color: rgb(49, 79, 63);
  color: color(display-p3 0.22014 0.30800 0.25261);
  color: var(--moss);
  text-transform: uppercase;
  width: -moz-fit-content;
  width: fit-content;
}
.article_link .tag::before {
  content: "";
  width: 0.3125rem;
  height: 0.3125rem;
  background: rgb(49, 79, 63);
  background: color(display-p3 0.22014 0.30800 0.25261);
  background: var(--moss);
  border-radius: 50%;
}
.article_link .tag.warn {
  color: #bd8145;
  color: var(--terracotta);
}
.article_link .tag.warn::before {
  background: #bd8145;
  background: var(--terracotta);
}
.article_link .tag.gray {
  color: #88908d;
  color: var(--muted);
}
.article_link .tag.gray::before {
  background: #88908d;
  background: var(--muted);
}
.article_link h3 {
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-family: var(--serif-tc);
  font-size: 1.125rem;
  font-weight: 500;
  color: #2a2a28;
  color: var(--ink);
  line-height: 1.5;
  transition: color 0.2s;
}
.article_link .excerpt {
  font-size: 0.8125rem;
  line-height: 1.75;
  color: #595757;
  color: var(--ink-2);
  max-width: 40rem;
}
.article_link .arrow {
  color: #b8bcb9;
  color: var(--muted-2);
  font-family: "Cormorant Garamond", "Noto Serif TC", serif;
  font-family: var(--serif-en);
  font-size: 1.125rem;
  transition: transform 0.25s, color 0.2s;
}
@media (orientation: portrait) {
  .article_link {
    grid-template-columns: 5.625rem 1fr auto;
    gap: 1.25rem;
    padding: 1.375rem 0;
  }
}
@media screen and (max-width: 480px) {
  .article_link {
    grid-template-columns: 4.5rem 1fr;
    gap: 1rem;
    padding: 1.25rem 0;
  }
  .article_link .arrow {
    display: none;
  }
  .article_link .excerpt {
    display: none;
  }
}
/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-1.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-1.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-1.use[3]!./resources/src/css/share/components/_course_card.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
:root {
  /* === Songshan brand palette === */
  --bg: #ffffff;
  --bg-warm: #f5f5f3;
  --bg-warm-2: #ebebe7;
  --line: #dbdcdc;
  --line-soft: #e8e8e6;
  --ink: #2a2a28;
  --ink-2: #595757;
  --muted: #88908d;
  --muted-2: #b8bcb9;
  /* category accents */
  --moss: rgb(49, 79, 63);
  --moss-soft: rgb(94, 121, 106);
  --moss-tint: #e8f0ec;
  --indigo: #005787;
  --indigo-soft: #c9e1ee;
  --indigo-tint: #e6f0f7;
  --terracotta: #bd8145;
  --terracotta-soft: #dfbc8b;
  --terracotta-tint: #f4e8d4;
  --sun: #f8dd00;
  /* fonts */
  --serif-tc: "Noto Serif TC", "Songti TC", serif;
  --serif-en: "Cormorant Garamond", "Noto Serif TC", serif;
  --sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* === legacy fluid sizes (kept) === */
  --fs-xs: 0.875rem;
  --fs-s: 1rem;
  --fs-r: 1.125rem;
  --fs-m: 1.25rem;
  --fs-ml: 1.8125rem;
  --fs-l: 2.3125rem;
  --fs-xl: 2.6875rem;
  --fs-xxl: 3.3125rem;
}
@supports (color: color(display-p3 0 0 0)){
:root {
  --moss: color(display-p3 0.22014 0.30800 0.25261);
}
}
@supports (color: color(display-p3 0 0 0)){
:root {
  --moss-soft: color(display-p3 0.38885 0.47177 0.41797);
}
}

@media screen and (max-width: 480px) {
  :root {
    --fs-ml: 1.6875rem;
  }
}
/* ============================================================
   共用卡片元件 course / event card
   配置：垂直結構
     .course_link
     ├─ .course_image  (img + .badge)
     └─ .course_body
        ├─ .course_meta  ( span ｜ .dot ｜ span ｜ ... )
        ├─ h3            (標題，serif-tc rem(20))
        ├─ .desc         (內文摘要，可省略)
        └─ .course_foot  ( .price ｜ .more )
   .badge 變體：預設白底 ／ .hot terracotta ／ .full ink
   .course_list 預設 3 欄網格 → portrait 2 欄 → ≤480 1 欄；頁面可覆寫。
   ============================================================ */
.course_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem;
  gap: 2rem;
}
@media (orientation: portrait) {
  .course_list {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 480px) {
  .course_list {
    grid-template-columns: 1fr;
  }
}

.course_li {
  display: flex;
}

.course_link {
  background: #ffffff;
  background: var(--bg);
  border-radius: 0.125rem;
  overflow: hidden;
  transition: transform 0.35s, box-shadow 0.35s;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-shadow: 0.125rem 0.1875rem 0.5rem rgba(31, 29, 24, 0.15);
}
.course_link:hover {
  transform: translateY(-0.375rem);
  box-shadow: 0 1.5rem 3.75rem -1.875rem rgba(31, 29, 24, 0.25);
}
.course_link:hover .placeholder,
.course_link:hover img {
  transform: scale(1.05);
}
.course_link h3 {
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-family: var(--serif-tc);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.45;
  color: #2a2a28;
  color: var(--ink);
}
.course_link .desc {
  font-size: 0.84375rem;
  color: #595757;
  color: var(--ink-2);
  line-height: 1.75;
  flex: 1;
}

.course_image {
  position: relative;
  aspect-ratio: 890/416;
  overflow: hidden;
}
.course_image img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.8s ease;
}
.course_image .placeholder {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0,rgba(0, 0, 0, 0.03) 0.0625rem, transparent 0.0625rem, transparent 0.75rem), linear-gradient(135deg, #d8d0bf, #c2b9a3);
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0 0.0625rem, transparent 0.0625rem 0.75rem), linear-gradient(135deg, #d8d0bf, #c2b9a3);
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.65625rem;
  letter-spacing: 0.18em;
  color: rgba(31, 29, 24, 0.7);
  transition: transform 0.8s ease;
}
.course_image .placeholder span {
  background: rgba(255, 255, 255, 0.78);
  padding: 0.375rem 0.75rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.05);
}
.course_image .placeholder.tone_a {
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0,rgba(0, 0, 0, 0.03) 0.0625rem, transparent 0.0625rem, transparent 0.75rem), linear-gradient(135deg, #cfd6c8, #a8b39b);
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0 0.0625rem, transparent 0.0625rem 0.75rem), linear-gradient(135deg, #cfd6c8, #a8b39b);
}
.course_image .placeholder.tone_b {
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0,rgba(0, 0, 0, 0.03) 0.0625rem, transparent 0.0625rem, transparent 0.75rem), linear-gradient(135deg, #e8d4bd, #c8a780);
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0 0.0625rem, transparent 0.0625rem 0.75rem), linear-gradient(135deg, #e8d4bd, #c8a780);
}
.course_image .placeholder.tone_c {
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0,rgba(0, 0, 0, 0.03) 0.0625rem, transparent 0.0625rem, transparent 0.75rem), linear-gradient(135deg, #d8c5b3, #a89784);
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0 0.0625rem, transparent 0.0625rem 0.75rem), linear-gradient(135deg, #d8c5b3, #a89784);
}
.course_image .badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: #ffffff;
  background: var(--bg);
  color: #2a2a28;
  color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.65625rem;
  letter-spacing: 0.18em;
  padding: 0.375rem 0.75rem;
  text-transform: uppercase;
}
.course_image .badge.full {
  background: #2a2a28;
  background: var(--ink);
  color: #fff;
}
.course_image .badge.hot {
  background: #bd8145;
  background: var(--terracotta);
  color: #fff;
}

.course_body {
  padding: 1.75rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  flex: 1;
}

.course_meta {
  display: flex;
  gap: 0.875rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: #88908d;
  color: var(--muted);
  text-transform: uppercase;
}
.course_meta .dot {
  color: #b8bcb9;
  color: var(--muted-2);
}

.course_foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 0.0625rem solid #dbdcdc;
  border-top: 0.0625rem solid var(--line);
  font-size: 0.8125rem;
}
.course_foot .price {
  font-family: "Cormorant Garamond", "Noto Serif TC", serif;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 1.125rem;
  color: #2a2a28;
  color: var(--ink);
  line-height: 1.18;
}
.course_foot .price .free {
  color: rgb(49, 79, 63);
  color: color(display-p3 0.22014 0.30800 0.25261);
  color: var(--moss);
  font-style: normal;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
}
.course_foot .more {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: #595757;
  color: var(--ink-2);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/*# sourceMappingURL=index.min.css.map*/