/*!***************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/event_list.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;
  }
}
/* event_list 頁面僅需處理：page_intro / event_section / event_filter
   / event_tools / event_meta / empty_state 等頁面骨架；
   篩選 pill、表單欄位、卡片、分頁皆由 share/components 共用元件提供。 */
@media (orientation: portrait) {
  .main {
    padding-top: 6.5rem;
  }
}

/* .breadcrumb / .page_intro / .page_head / .page_title / .page_desc /
   .page_head_stats 已抽出至 share/components/_breadcrumb.scss 與
   share/components/_page_intro.scss，於 event_list.js 中 import。 */
/* ============ EVENT SECTION ============ */
.event_section {
  padding: 3.5rem 0 6rem;
}
@media (orientation: portrait) {
  .event_section {
    padding: 2.5rem 0 4rem;
  }
}
@media screen and (max-width: 480px) {
  .event_section {
    padding: 1.75rem 0 3rem;
  }
}

/* ---- filter bar ---- */
.event_filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 1.75rem;
  border-bottom: 0.0625rem solid #dbdcdc;
  border-bottom: 0.0625rem solid var(--line);
  margin-bottom: 0.5rem;
}
@media (orientation: portrait) {
  .event_filter {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }
}

.event_tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
@media (orientation: portrait) {
  .event_tools {
    width: 100%;
    gap: 0.5rem;
  }
}

/* ---- result meta ---- */
.event_meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0 2rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: #88908d;
  color: var(--muted);
  text-transform: uppercase;
}
.event_meta strong {
  font-family: "Cormorant Garamond", "Noto Serif TC", serif;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 1rem;
  color: #2a2a28;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0.125rem;
  letter-spacing: 0;
}
@media screen and (max-width: 480px) {
  .event_meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding-bottom: 1.25rem;
  }
}

/* ---- empty state ---- */
.empty_state {
  text-align: center;
  padding: 5rem 1.25rem;
  border-top: 0.0625rem solid #dbdcdc;
  border-top: 0.0625rem solid var(--line);
}
@media (orientation: portrait) {
  .empty_state {
    padding: 3.5rem 1rem;
  }
}

.empty_icon {
  color: #b8bcb9;
  color: var(--muted-2);
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.25rem;
}
.empty_icon svg {
  width: 100%;
  height: 100%;
}

.empty_title {
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-family: var(--serif-tc);
  font-size: 1.375rem;
  font-weight: 500;
  color: #2a2a28;
  color: var(--ink);
  margin: 0 0 0.625rem;
}

.empty_desc {
  font-size: 0.84375rem;
  color: #88908d;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

.empty_reset {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.375rem;
  border: 0.0625rem solid #2a2a28;
  border: 0.0625rem solid var(--ink);
  border-radius: 62.4375rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: #2a2a28;
  color: var(--ink);
  transition: background 0.2s, color 0.2s;
}
.empty_reset:hover {
  background: #2a2a28;
  background: var(--ink);
  color: #fff;
}
/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/_breadcrumb.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;
  }
}
/* ============================================================
   共用麵包屑 breadcrumb
   配置：
     <nav class="breadcrumb" aria-label="麵包屑">
       <a class="breadcrumb_link" href="...">首頁</a>
       <span class="breadcrumb_sep" aria-hidden="true">／</span>
       <a class="breadcrumb_link" href="...">最新資訊</a>
       <span class="breadcrumb_sep" aria-hidden="true">／</span>
       <span class="breadcrumb_current" aria-current="page">當前頁面</span>
     </nav>
   .breadcrumb_current 含長標題 ellipsis 截斷；短標題不受影響。
   ============================================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem 0.5rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: #88908d;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}
@media (orientation: portrait) {
  .breadcrumb {
    margin-bottom: 1.75rem;
  }
}

.breadcrumb_link {
  color: #88908d;
  color: var(--muted);
  transition: color 0.2s;
}
.breadcrumb_link:hover {
  color: rgb(49, 79, 63);
  color: color(display-p3 0.22014 0.30800 0.25261);
  color: var(--moss);
}

.breadcrumb_sep {
  color: #b8bcb9;
  color: var(--muted-2);
}

.breadcrumb_current {
  color: #2a2a28;
  color: var(--ink);
  font-weight: 500;
  max-width: 23.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (orientation: portrait) {
  .breadcrumb_current {
    max-width: 13.75rem;
  }
}
@media screen and (max-width: 480px) {
  .breadcrumb_current {
    max-width: 10rem;
  }
}
/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/_page_intro.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;
  }
}
/* ============================================================
   共用列表頁頭 page intro
   配置：
     <section class="page_intro" aria-label="頁面標題">
       <div class="container">
         <nav class="breadcrumb">...</nav>     ← 需另外 import _breadcrumb.scss
         <div class="page_head">
           <div class="page_head_text">
             <div class="eyebrow">News & Notice</div>
             <h1 class="page_title">最新消息<span class="en">／ News</span></h1>
             <p class="page_desc">頁面描述 …</p>
           </div>
           <div class="page_head_stats">
             <div class="stat_num">142<sup>篇</sup></div>
             <div class="stat_lbl">累計消息</div>
           </div>
         </div>
       </div>
     </section>
   ============================================================ */
.page_intro {
  padding: 4rem 0 2.5rem;
  border-bottom: 0.0625rem solid #dbdcdc;
  border-bottom: 0.0625rem solid var(--line);
}
@media (orientation: portrait) {
  .page_intro {
    padding: 2.5rem 0 1.75rem;
  }
}
@media screen and (max-width: 480px) {
  .page_intro {
    padding: 1.75rem 0 1.25rem;
  }
}

.page_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
}
@media (orientation: portrait) {
  .page_head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

.page_head_text .eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(49, 79, 63);
  color: color(display-p3 0.22014 0.30800 0.25261);
  color: var(--moss);
  margin-bottom: 1.25rem;
  padding-left: 3rem;
  position: relative;
}
.page_head_text .eyebrow::before {
  content: "";
  position: absolute;
  top: 0.4375rem;
  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);
}

.page_title {
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-family: var(--serif-tc);
  font-weight: 500;
  font-size: 3.25rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: #2a2a28;
  color: var(--ink);
  margin: 0 0 1.25rem;
}
.page_title .en {
  font-family: "Cormorant Garamond", "Noto Serif TC", serif;
  font-family: var(--serif-en);
  font-style: italic;
  font-weight: 400;
  color: #88908d;
  color: var(--muted);
  font-size: 1.75rem;
  margin-left: 0.75rem;
}
@media (orientation: portrait) {
  .page_title {
    font-size: 2.375rem;
  }
  .page_title .en {
    font-size: 1.375rem;
  }
}
@media screen and (max-width: 480px) {
  .page_title {
    font-size: 1.75rem;
  }
  .page_title .en {
    font-size: 1.125rem;
    margin-left: 0.5rem;
  }
}

.page_desc {
  font-size: 0.90625rem;
  line-height: 1.85;
  color: #595757;
  color: var(--ink-2);
  max-width: 38.75rem;
}

.page_head_stats {
  text-align: right;
  flex-shrink: 0;
}
@media (orientation: portrait) {
  .page_head_stats {
    text-align: left;
  }
}

.stat_num {
  font-family: "Cormorant Garamond", "Noto Serif TC", serif;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 3.5rem;
  line-height: 1;
  color: #2a2a28;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.stat_num sup {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.875rem;
  color: #88908d;
  color: var(--muted);
  margin-left: 0.375rem;
  letter-spacing: 0.12em;
}
@media screen and (max-width: 480px) {
  .stat_num {
    font-size: 2.5rem;
  }
}

.stat_lbl {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: #88908d;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 0.5rem;
}
/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/_form_field.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;
  }
}
/* ============================================================
   共用表單元件 form field
   - .select_field：包裝 native <select>，含右側 .caret 下拉箭頭
   - .search_field：搜尋輸入框，含左側 .icon 放大鏡（絕對定位）
   尺寸 / 邊距為預設值，頁面如有特殊需求可在該頁 scss 中覆寫。
   ============================================================ */
.select_field {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.select_field select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #2a2a28;
  color: var(--ink);
  background: transparent;
  border: 0.0625rem solid #dbdcdc;
  border: 0.0625rem solid var(--line);
  border-radius: 0.125rem;
  padding: 0.75rem 2.25rem 0.75rem 0.875rem;
  line-height: 1.2;
  cursor: pointer;
  min-width: 8.75rem;
  transition: border-color 0.2s, color 0.2s;
}
.select_field select:hover, .select_field select:focus {
  border-color: rgb(49, 79, 63);
  border-color: color(display-p3 0.22014 0.30800 0.25261);
  border-color: var(--moss);
  outline: none;
}
.select_field .caret {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.625rem;
  height: 0.625rem;
  color: #88908d;
  color: var(--muted);
  pointer-events: none;
}
@media (orientation: portrait) {
  .select_field {
    flex: 0 0 8.75rem;
  }
  .select_field select {
    width: 100%;
  }
}

.search_field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 20rem;
}
.search_field .icon {
  position: absolute;
  top: 50%;
  left: 0.625rem;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  color: #88908d;
  color: var(--muted);
  flex-shrink: 0;
  pointer-events: none;
}
.search_field input {
  flex: 1;
  width: 100%;
  border: 0.0625rem solid #dbdcdc;
  border: 0.0625rem solid var(--line);
  border-radius: 0.125rem;
  background: transparent;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: #2a2a28;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: 0.12em;
  padding: 0.75rem 0.75rem 0.75rem 1.875rem;
  outline: none;
  transition: border-color 0.2s;
}
.search_field input:focus {
  border-color: rgb(49, 79, 63);
  border-color: color(display-p3 0.22014 0.30800 0.25261);
  border-color: var(--moss);
}
.search_field input::-moz-placeholder {
  color: #b8bcb9;
  color: var(--muted-2);
}
.search_field input::placeholder {
  color: #b8bcb9;
  color: var(--muted-2);
}
.search_field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
@media (orientation: portrait) {
  .search_field {
    flex: 1;
    max-width: 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;
}
/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/_filter_chips.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;
  }
}
/* ============================================================
   共用篩選 pill 元件 filter chips
   配置：
     <div class="filter_chips" role="tablist">
       <button class="filter_chip active">全部 <span class="count">14</span></button>
       <button class="filter_chip">分類 A <span class="count">4</span></button>
       ...
     </div>
   active 為 ink 底白字；.count 為 mono 小字。
   ============================================================ */
.filter_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter_chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 0.0625rem solid #dbdcdc;
  border: 0.0625rem solid var(--line);
  border-radius: 62.4375rem;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-family: var(--serif-tc);
  font-size: 0.8125rem;
  color: #595757;
  color: var(--ink-2);
  background: transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.filter_chip .count {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.65625rem;
  letter-spacing: 0.1em;
  color: #b8bcb9;
  color: var(--muted-2);
}
.filter_chip:hover {
  color: rgb(49, 79, 63);
  color: color(display-p3 0.22014 0.30800 0.25261);
  color: var(--moss);
  border-color: rgb(49, 79, 63);
  border-color: color(display-p3 0.22014 0.30800 0.25261);
  border-color: var(--moss);
}
.filter_chip:hover .count {
  color: rgb(94, 121, 106);
  color: color(display-p3 0.38885 0.47177 0.41797);
  color: var(--moss-soft);
}
.filter_chip.active {
  color: #fff;
  background: #2a2a28;
  background: var(--ink);
  border-color: #2a2a28;
  border-color: var(--ink);
}
.filter_chip.active .count {
  color: rgba(255, 255, 255, 0.55);
}
@media screen and (max-width: 480px) {
  .filter_chip {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }
}
/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/_pagination.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;
  }
}
/* ============================================================
   共用分頁元件 pagination
   配置：
     <nav class="pagination">
       <button class="page_arrow"> ← </button>
       <ul class="page_list">
         <li class="page_li"><button class="page_btn"> 01 </button></li>
         <li class="page_li"><button class="page_btn active"> 02 </button></li>
         <li class="page_li"><span class="page_ellipsis">…</span></li>
         <li class="page_li"><button class="page_btn"> 12 </button></li>
       </ul>
       <button class="page_arrow"> → </button>
     </nav>
   active 頁碼為 moss 底白字；arrow 為圓形 ink hover。
   ============================================================ */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  margin-top: 3.5rem;
}
@media (orientation: portrait) {
  .pagination {
    margin-top: 2.5rem;
    gap: 0.75rem;
  }
}

.page_arrow {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 0.0625rem solid #dbdcdc;
  border: 0.0625rem solid var(--line);
  color: #595757;
  color: var(--ink-2);
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  transition: all 0.2s;
}
.page_arrow svg {
  width: 0.875rem;
  height: 0.875rem;
}
.page_arrow:hover:not(:disabled) {
  background: #2a2a28;
  background: var(--ink);
  color: #fff;
  border-color: #2a2a28;
  border-color: var(--ink);
}
.page_arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.page_list {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.page_btn {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.625rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #595757;
  color: var(--ink-2);
  border-radius: 0.125rem;
  transition: color 0.2s, background 0.2s;
}
.page_btn:hover {
  color: rgb(49, 79, 63);
  color: color(display-p3 0.22014 0.30800 0.25261);
  color: var(--moss);
}
.page_btn.active {
  background: rgb(49, 79, 63);
  background: color(display-p3 0.22014 0.30800 0.25261);
  background: var(--moss);
  color: #fff;
  font-weight: 500;
}

.page_ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  color: #b8bcb9;
  color: var(--muted-2);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-family: var(--mono);
}

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