/* ============================================================
   派約里亞國際教育聯盟 - 新版網站共用樣式
   對應 Figma: kindergarten (Dev Mode 量測數值)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
    --header-h: 70px;
    --content-max: 1440px;
    --content-pad: 80px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    color: #2c2c2c;
    background: #fff;
}

img { display: block; max-width: 100%; }

a { text-decoration: none; color: inherit; }

/* ============================================================
   HEADER
   Figma: width 1440 / height 70 / padding L+R 80px / bg #FFFFFF
   box-shadow 0px 2px 12px 0px #00000014
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 500;
    max-width: var(--content-max);
    margin: 0 auto;
    background: #FFFFFF;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.header-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    height: var(--header-h);
    padding: 0 var(--content-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo img { height: 44px; }

.header-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.header-nav ul li a {
    display: block;
    padding: 0.5rem 0.9rem;
    font-size: 0.95rem;
    color: #2c2c2c;
    position: relative;
    transition: color 0.2s;
}

.header-nav ul li a:hover,
.header-nav ul li a.active {
    color: #1e6ec8;
}

.header-nav ul li a.active {
    top: -4px;
}

.header-nav ul li a.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 30px;
    height: 2px;
    background: #1e6ec8;
    transform: translateX(-50%);
}

/* ============================================================
   HERO
   Figma: width 1440 / height 693 / overlay #0000004D (30% 黑)
   ============================================================ */
.hero {
    position: relative;
    max-width: var(--content-max);
    margin: 0 auto;
    height: 693px;
    background-size: cover;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--content-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--content-pad);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-logo {
    width: 274px;
    text-align: center;
}

.hero-logo-word {
    width: 274px;
    margin: 0 auto;
}

.hero-logo-name {
    margin-top: 14px;
    font-size: 1.7rem;
    line-height: 1.2;
    font-weight: 700;
    color: #FFFFFF;
    white-space: nowrap;
}

.hero-logo-tagline {
    margin-top: 2px;
    font-size: 1.2rem;
    color: #FFFFFF;
}

.hero-page-title {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 500;
    font-size: 96px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #FFFFFF;
}

/* ============================================================
   七大教學系統－頁內導覽列
   Figma: 外層 width Fill / height Fixed 58 / bg #FFFFFF
   inner: max-width 1100 / height 56 / padding L+R 32 / gap 24
   tab: padding 16px 24px / 14px 500 / active #1E6EC8 + 3px底線
   ============================================================ */
.teaching-nav {
    scroll-margin-top: 70px;
    width: 100%;
    height: 58px;
    display: flex;
    justify-content: center;
    background: #FFFFFF;
    box-sizing: border-box;
    /* 外層 border-bottom 色碼 Figma 未提供，先不加，等確認色碼再補 */
}

.teaching-nav-inner {
    width: 100%;
    max-width: 1100px;
    height: 56px;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    gap: 24px;
    overflow-x: auto;
}

.teaching-nav-tab {
    flex: 0 0 123px;
    width: 123px;
    padding: 16px 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: #444444;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.teaching-nav-tab.is-active {
    color: #1E6EC8;
    border-bottom-color: #1E6EC8;
}

.teaching-section {
    scroll-margin-top: 70px;
}

/* ============================================================
   品牌故事
   Figma: section padding-top/bottom 40px / bg #FFFFFF
   container max-width 1100 / padding L+R 32px / gap 64px
   story-text width 486 / story-image width 550 (比例同人物圖 2160:2700)
   ============================================================ */
.story {
    position: relative;
    max-width: var(--content-max);
    height: 523px;
    margin: 0 auto;
    background: #FFFFFF;
    padding: 40px 0;
}

.story-container {
    position: relative;
    max-width: 1100px;
    height: 100%;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
}

.story-text {
    position: relative;
    width: 486px;
    max-width: 100%;
}

.story-icon {
    position: absolute;
    left: -112px;
    top: 50px;
    width: 96px;
    z-index: 0;
}

.story-text h2 {
    position: relative;
    font-size: 2rem;
    font-weight: 700;
    color: #2c2c2c;
    margin-bottom: 0.5rem;
}

.story-sub {
    position: relative;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: #777;
    margin-bottom: 1.5rem;
}

.story-quote {
    position: relative;
    font-size: 1rem;
    color: #2c2c2c;
    margin-bottom: 0.4rem;
}

.story-quote-zh {
    position: relative;
    font-size: 1rem;
    color: #2c2c2c;
}

.story-image {
    position: absolute;
    right: 32px;
    bottom: -40px;
    width: 550px;
    max-width: 100%;
}

.story-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   Pieria 的含義
   Figma: width 1440 / height 1079 / padding-top+bottom 40px
   background #F8F9FA
   ============================================================ */
.meaning {
    position: relative;
    max-width: var(--content-max);
    margin: 0 auto;
    background: #F8F9FA;
    padding: 40px 0;
    overflow: hidden;
}

.meaning-bg-illust {
    position: absolute;
    top: 40px;
    right: 200px;
    width: 300px;
    transform: rotate(-35deg);
    transform-origin: top right;
    z-index: 0;
}

.meaning-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 32px;
}

.meaning-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.meaning-title-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meaning-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.title-illust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.meaning-title {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #2c2c2c;
}

.meaning-subtitle {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #444444;
}

.hearts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.heart-card {
    height: 332px;
    padding: 29px 26px;
    background: #FFFFFFCC;
    border: 2px solid #E8ECF0;
    box-sizing: border-box;
}

.heart-letter {
    font-size: 45px;
    font-weight: 700;
    line-height: 44.8px;
    margin-bottom: 0.6rem;
}

.heart-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 8px;
    margin-bottom: 0.9rem;
    border-bottom: 2px solid #E8ECF0;
}

.heart-desc {
    font-size: 13.44px;
    font-weight: 400;
    line-height: 24.86px;
    color: #666666;
}

.meaning-closing {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 15.2px;
    line-height: 30.4px;
    letter-spacing: 0;
    color: #666666;
}

/* ============================================================
   教學目標
   Figma: width 1440 / padding-top+bottom 80px
   Frame 50: max-width 1068 / gap 40px，圖片跟文字各半寬
   ============================================================ */
.philosophy {
    max-width: var(--content-max);
    margin: 0 auto;
    background: #FFFFFF;
    padding: 80px 0;
}

.philosophy-inner {
    max-width: 1068px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
}

.philosophy-illust {
    flex: 1;
    display: flex;
    justify-content: center;
}

.philosophy-illust img {
    width: 100%;
    max-width: 380px;
    transform: rotate(15deg);
}

.philosophy-text {
    flex: 1;
}

.philosophy-title {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0;
    color: #2c2c2c;
    margin-bottom: 25px;
}

.philosophy-text p {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 15.2px;
    line-height: 30.4px;
    letter-spacing: 0;
    color: #444444;
}

/* ============================================================
   教學方法
   Figma: width 1440 / padding-top+bottom 80px / bg #F8F9FA
   container max-width 1100 / padding L+R 32px / gap 32px
   ============================================================ */
.methods {
    position: relative;
    max-width: var(--content-max);
    margin: 0 auto;
    background: #F8F9FA;
    padding: 80px 0;
    overflow: hidden;
}

.methods-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    overflow: visible;
}

.methods-title {
    position: relative;
    z-index: 1;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #444444;
}

.methods-text {
    position: relative;
    z-index: 1;
}

.methods-text p {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 15.2px;
    line-height: 30.4px;
    letter-spacing: 0;
    color: #444444;
}

/* ============================================================
   教學原則
   Figma: width Fill / height Hug / padding-top+bottom 80px
   container: width Fixed 1100 / height Hug / padding L+R 32 / gap 32
   title-illust-row: width Fixed 1036 / height Hug / gap 16
   content-text: width Fill / height Hug / gap 19.2
   ============================================================ */
.principles {
    position: relative;
    max-width: var(--content-max);
    margin: 0 auto;
    background: #FFFFFF;
    padding: 80px 0;
    overflow: hidden;
}

.principles-illust {
    position: absolute;
    left: 6%;
    bottom: 20px;
    width: clamp(240px, 25vw, 360px);
    height: auto;
    pointer-events: none;
    z-index: 0;
    transform: rotate(45deg);
}

.principles-container {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.principles-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.principles-title {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #444444;
}

.principles-text {
    display: flex;
    flex-direction: column;
    gap: 19.2px;
}

.principles-text p {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 15.2px;
    line-height: 30.4px;
    letter-spacing: 0;
    color: #444444;
}

.methods-illust {
    position: absolute;
    right: 30px;
    top:20px;
    width: 260px;
    z-index: 0;
}

.methods-illust img {
    width: 100%;
}

/* ============================================================
   Footer
   Figma: width 1440 / padding 32px 80px / bg #E8ECF0
   container: width Fill(1280) / height Fixed 234 / padding L+R 32 / gap 32
   Frame32: Horizontal / Fill / Hug ~162 / justify-content space-between
   footer-brand: Vertical / Hug / gap 32 (logo 314x48 + contact 314px)
   Frame62: Vertical / Fixed 532x162 / padding 16px 0 / gap 24
   Frame33(nav第一排): Horizontal / Fill / Hug / gap 32，無底線
   Frame61(nav第二排): Horizontal / Fixed 532 / Hug / gap 32，靠右、有底線
   Frame60: Fill，內含置中的 copyright(350x42, Noto Sans JP 13px)
   ============================================================ */
.footer {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 32px 80px;
    background: #E8ECF0;
    box-sizing: border-box;
}

.footer-container {
    width: 100%;
    height: 234px;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.footer-top {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.footer-logo {
    width: 314px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.footer-contact {
    width: 314px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 13.6px;
    line-height: 27.2px;
    letter-spacing: 0;
    color: #444444;
}

.footer-nav {
    width: 532px;
    height: 162px;
    padding: 16px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-nav-primary {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    white-space: nowrap;
}

.footer-nav-primary a {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-size: 14px;
    color: #444444;
    text-decoration: none;
}

.footer-nav-secondary {
    width: 532px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 32px;
    white-space: nowrap;
}

.footer-nav-secondary a {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-size: 14px;
    color: #444444;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-copyright {
    width: 350px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans JP', 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #444444;
}

/* ============================================================
   我們的幼兒園 (about.html)
   Figma: width Fill / height Hug / padding-top+bottom 88px / bg #F8F9FA
   container: Fixed 1100 / Hug / padding L+R 32 / gap 40
   school-info-table: Fill / Hug
   info-row: Fill / Hug / padding 29px 0 / border-bottom 1px #787877
   label: Fixed 73px / 12px letter-spacing 2.25px #666666
   info-content: Fill / padding-left 32 / gap 5
   content text: 16px / 500 / line-height 30.4px / #2C2C2C
   ============================================================ */
.kindergarten {
    position: relative;
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
    padding: 88px 0;
    background-color: #F8F9FA;
    overflow: hidden;
    box-sizing: border-box;
}

.kindergarten-decoration {
    position: absolute;
    right: -100px;
    bottom: 0;
    width: 60%;
    height: auto;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}

.kindergarten-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.kindergarten-title-image {
    width: 420px;
    height: 120px;
    max-width: 100%;
    object-fit: cover;
    display: block;
    align-self: flex-start;
}

.school-info-table {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.school-info-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 29px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #787877;
}

.school-info-label {
    flex: 0 0 73px;
    width: 73px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 2.25px;
    text-align: center;
    color: #666666;
}

.info-content {
    flex: 1;
    min-width: 0;
    padding-left: 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.school-info-content-text {
    margin: 0;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 30.4px;
    letter-spacing: 0;
    color: #2C2C2C;
    text-align: left;
}

/* ============================================================
   一日作息 (about.html)
   Figma layer 誤命名「我們的幼兒園」，實際內容為一日作息
   section: Fill / Hug / padding-top+bottom 88 / bg #FFFFFF
   container: Fixed 1100 / Hug / padding L+R 32 / gap 40
   schedule-table: Fill / Hug
   thead: Fill / Hug / border-bottom 1px #444444，內容水平置中
   col-time: Fixed 88 / weekday cell: Fixed 146.4
   body row: Fill / Hug / border-bottom 1px #444444
   time cell: Fixed 88 / shared activity cell: Fixed 732 (=146.4*5)
   ============================================================ */
.schedule {
    position: relative;
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
    padding: 88px 0;
    background: #FFFFFF;
    overflow: hidden;
    box-sizing: border-box;
}

.schedule-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.schedule-title-row {
    position: relative;
}

.schedule-title {
    width: 290px;
    height: 106px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.schedule-title-decoration {
    position: absolute;
    left: 360px;
    top: -40px;
    width: 56px;
    height: auto;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-105deg);
}

.schedule-table {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.schedule-head {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-bottom: 1px solid #444444;
}

.schedule-head-time {
    flex: 0 0 88px;
    width: 88px;
    box-sizing: border-box;
    padding: 8px 16px 19px 0;
}

.schedule-day {
    flex: 0 0 146.4px;
    width: 146.4px;
    box-sizing: border-box;
    padding: 8px 10px 32px 10px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 2.25px;
    text-align: center;
    color: #444444;
}

.schedule-row {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    border-bottom: 1px solid #444444;
}

.schedule-row:last-child {
    border-bottom: none;
}

.schedule-time {
    flex: 0 0 88px;
    width: 88px;
    box-sizing: border-box;
    padding: 24px 16px 24px 0;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 21.2px;
    letter-spacing: 0;
    color: #444444;
}

.schedule-activity {
    flex: 0 0 732px;
    width: 732px;
    box-sizing: border-box;
    padding: 24px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.72px;
    color: #444444;
}

.schedule-nap-decoration {
    position: absolute;
    left: calc(50% + 80px);
    top: -70%;
    width: 110px;
    height: auto;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}

.nursery-schedule-nap-decoration {
    position: absolute;
    left: calc(50% + 80px);
    top: calc(-70% + 20px);
    width: 110px;
    height: auto;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
    transform: rotate(30deg);
}

.schedule-note {
    width: 100%;
    text-align: right;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.72px;
    color: #444444;
}

/* ============================================================
   頁面預留區（尚未收到內容規格）
   ============================================================ */
.placeholder-note {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 4rem var(--content-pad);
    color: #999;
    font-size: 0.9rem;
    text-align: center;
}

/* ============================================================
   我們的托嬰中心 (about.html)
   Figma layer 誤命名「我們的幼兒園」，實際內容為托嬰中心
   section: Fill / Hug / padding-top+bottom 88 / bg #F8F9FA
   container: Fixed 1100 / Hug / padding L+R 32 / gap 40
   info-row: Fill / Hug / padding 29px 0 / border-bottom 1px #444444
   label: Fixed 73px / 12px letter-spacing 2.25px #444444
   info-content: Fill / padding-left 32 / gap 5
   content text: 16px / 500 / line-height 30.4px / #444444
   ============================================================ */
.nursery-section {
    position: relative;
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
    padding: 88px 0;
    background-color: #F8F9FA;
    overflow: hidden;
    box-sizing: border-box;
}

.nursery-decoration {
    position: absolute;
    right: 50px;
    top: -200px;
    width: 30%;
    height: auto;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-20deg);
}

.nursery-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.nursery-title {
    width: 420px;
    height: 102px;
    max-width: 100%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.nursery-info-table {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.nursery-info-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 29px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #444444;
}

.nursery-info-label {
    flex: 0 0 73px;
    width: 73px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 2.25px;
    text-align: center;
    color: #444444;
}

.nursery-info-content {
    flex: 1;
    min-width: 0;
    padding-left: 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nursery-info-text {
    margin: 0;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 30.4px;
    letter-spacing: 0;
    color: #444444;
    text-align: left;
}

/* ============================================================
   托嬰中心 一日作息（沿用 .schedule 系列樣式）
   新增：schedule-row-split（小寶共用時段 + 中大寶依日不同活動）
   ============================================================ */
.nursery-schedule-decoration {
    position: absolute;
    left: 280px;
    top: 30px;
    width: 96px;
    height: auto;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-10deg);
}

.schedule-split-content {
    flex: 0 0 732px;
    width: 732px;
    display: flex;
    flex-direction: column;
}

.schedule-split-baby {
    width: 732px;
    border-bottom: 1px solid #666666;
}

.schedule-split-baby-cell {
    width: 100%;
    padding: 24px 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.72px;
    color: #444444;
}

.schedule-split-older {
    width: 732px;
    display: flex;
    flex-direction: row;
    gap: 7px;
}

.schedule-split-older-cell {
    flex: 0 0 140.8px;
    width: 140.8px;
    padding: 24px 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.72px;
    color: #444444;
}

/* ============================================================
   七大教學系統 - 各系統內容區塊（共用）
   Figma: section Fill / Hug / padding-top+bottom 64 / bg #FFFFFF
   humanities-main: Fixed 1100 / Hug / padding 16px 0 / gap 32
   humanities-content: Fill / Hug / padding 36px 0 / gap 80
   main-grid: 左欄562 + gap32 + 右欄Fill(506)
   ============================================================ */
.teaching-system-section {
    position: relative;
    width: 100%;
    padding: 64px 0;
    background-color: #FFFFFF;
    overflow: hidden;
    box-sizing: border-box;
    scroll-margin-top: 70px;
}

.teaching-system-main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.teaching-system-title {
    position: relative;
    width: 100%;
    min-height: 59px;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.teaching-system-title h2 {
    margin: 0;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #444444;
}

.teaching-system-title-decoration {
    position: absolute;
    top: -10px;
    right: -24px;
    width: 120px;
    height: auto;
    pointer-events: none;
    z-index: 0;
    transform: rotate(24deg);
}

.teaching-system-content {
    width: 100%;
    padding: 36px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.teaching-main-grid {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
}

.teaching-images {
    position: relative;
    flex: 0 0 562px;
    width: 562px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.teaching-images img {
    width: 562px;
    max-width: 100%;
    display: block;
    object-fit: cover;
}

.teaching-media {
    flex: 0 0 562px;
    width: 562px;
    max-width: 100%;
    position: relative;
}

.teaching-media-main-image {
    width: 562px;
    max-width: 100%;
    height: 670px;
    object-fit: contain;
    display: block;
}

.teaching-media-decoration {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.teaching-content-block.is-relative {
    position: relative;
}

.teaching-info {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.teaching-info-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.teaching-info-section-title,
.teaching-info-section-body,
.teaching-content-block-title,
.teaching-content-block-body {
    width: 100%;
    padding: 0 32px;
    box-sizing: border-box;
}

.teaching-info-section-title {
    margin: 0;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    color: #444444;
}

.teaching-info-section-body {
    margin: 0;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    color: #444444;
    white-space: pre-line;
}

.teaching-info-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.teaching-content-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.teaching-content-block-title {
    margin: 0;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    color: #444444;
}

.teaching-content-block-body {
    margin: 0;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    color: #444444;
    white-space: pre-line;
}

.teaching-content-list {
    list-style: '\00B7\0020';
    width: 100%;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 32px;
    padding-left: calc(32px + 1em);
    box-sizing: border-box;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    color: #444444;
}

.teaching-content-list.is-nested {
    padding-left: calc(32px + 2.5em);
}

.teaching-content-sub-title {
    width: 100%;
    padding: 0 32px;
    box-sizing: border-box;
    margin: 0;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    color: #444444;
}

/* ---- Gallery（各教學系統共用）---- */
.teaching-gallery {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.teaching-gallery-track {
    width: 100%;
    height: 253px;
    padding: 32px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 21px;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid #787877;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.teaching-gallery-track::-webkit-scrollbar {
    display: none;
}

.gallery-slide {
    flex-shrink: 0;
    height: 188px;
    scroll-snap-align: start;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teaching-gallery-nav {
    width: 100%;
    height: 56px;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.gallery-arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}


.gallery-arrow svg,
.gallery-arrow img {
    width: 24px;
    height: 24px;
    display: block;
}

.gallery-indicators {
    width: fit-content;
    height: 32px;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gallery-dot {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #D9D9D9;
    cursor: pointer;
}

.gallery-dot.is-active {
    background: #444444;
}

/* ---- Lightbox（共用，點擊 Gallery 圖片放大用） ---- */
.gallery-slide img {
    cursor: zoom-in;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
}

.lightbox[hidden] {
    display: none;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

/* ============================================================
   分校資訊－地區導覽列
   Figma: 外層 width Fill / height Fixed 58 / bg #FFFFFF
   inner: width 1100 / height 56 / padding L+R 32
   tab: width 175 / padding 16px 24px / 14px 500 / #666666
        active #1E6EC8 + 3px 底線
   ============================================================ */
.region-nav {
    width: 100%;
    height: 58px;
    display: flex;
    justify-content: center;
    background: #FFFFFF;
    /* 不加底部分隔線（依設計稿） */
    box-sizing: border-box;
}

.region-nav-inner {
    width: 100%;
    max-width: 1100px;
    height: 56px;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    overflow-x: auto;
}

.region-tab {
    flex: 0 0 175px;
    width: 175px;
    padding: 16px 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: #666666;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.region-tab.is-active {
    color: #1E6EC8;
    border-bottom-color: #1E6EC8;
}

/* ============================================================
   分校資訊－地區分校列表（台北 / 新竹 / 台中 / 海外共用）
   Figma: section Fill / padding-top 40 bottom 68 / bg #FFFFFF
          背景插圖 opacity 80%
   container: 1100 / padding L+R 32 / gap 28
   region-header: gap 16 / 標題 27px 700 / 所數 14px 400 / #444444
   branch-grid: 1036 / gap 22.4
   branch-item: padding 24px 10px / border-bottom 2px #E8ECF0
   photo 160x160 / info padding 19px 22px
   name 17px 700 / detail gap 8 / icon 14px, 文字 13px lh 19.68
   btns: icon 29x29 / gap 8
   ============================================================ */
.region-section {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1440px; /* 限制在設計稿寬度內，插圖才會貼著內容區，不會跑到寬螢幕最右邊 */
    margin: 0 auto;
    padding: 40px 0 68px;
    background: #FFFFFF;
    box-sizing: border-box;
}

.region-deco {
    position: absolute;
    top: 155px;
    right: -90px;
    width: 337px;
    height: auto;
    opacity: 0.8;
    transform: rotate(-15deg);
    pointer-events: none;
}

.region-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.region-header {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #444444;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

.region-title {
    margin: 0;
    font-size: 27px;
    font-weight: 700;
    line-height: 40px;
}

.region-count {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

.branch-grid {
    display: flex;
    flex-direction: column;
    gap: 22.4px;
}

.branch-item {
    display: flex;
    align-items: center;
    padding: 24px 10px;
    border-bottom: 2px solid #E8ECF0;
}

.branch-photo {
    flex: 0 0 160px;
    width: 160px;
    height: 160px;
    object-fit: cover;
    display: block;
}

.branch-info {
    flex: 1;
    min-width: 0;
    padding: 19px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #444444;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

.branch-name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 25px;
}

.branch-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.branch-detail {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 19.68px;
}

.branch-detail-icon {
    flex: 0 0 14px;
    width: 14px;
    font-size: 14px;
    line-height: 21.6px;
    text-align: center;
}

.branch-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 33px;
}

.branch-btn {
    display: flex;
    width: 29px;
    height: 29px;
    color: #444444;
    transition: opacity 0.2s;
}

.branch-btn svg {
    width: 100%;
    height: 100%;
}

.branch-btn:hover {
    opacity: 0.7;
}

@media (max-width: 600px) {
    .branch-item {
        align-items: flex-start;
    }
    .branch-photo {
        flex-basis: 100px;
        width: 100px;
        height: 100px;
    }
    .branch-info {
        padding: 0 0 0 16px;
    }
}

/* 新竹地區插圖（星星）：原圖 216x232 以 @2x 顯示 */
.region-deco--hsinchu {
    top: 272px;
    right: 205px;
    width: 108px;
    transform: none;
}

/* 台中地區插圖（水滴）：原圖直向，旋轉 -90 度成橫向 */
.region-deco--taichung {
    top: 429px;
    right: 177px;
    width: 152px;
    transform: rotate(-90deg);
}

/* 海外地區插圖（花）：原圖 502x410 以 @2x 顯示，位於標題列右上 */
.region-deco--overseas {
    top: 12px;
    right: 195px;
    width: 251px;
    transform: none;
}

/* 海外地區標題前的藍色標籤
   Figma region-tag: Hug 84x29 / padding 5px 16px / radius 20 / bg #1E6EC8
   文字 13px 700 / #FFFFFF */
.region-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 16px;
    border-radius: 20px;
    background: #1E6EC8;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    line-height: 19px;
    white-space: nowrap;
}

/* 有標籤的標題列（海外），所數文字改用 #666666 */
.region-tag ~ .region-count {
    color: #666666;
}

/* ============================================================
   最新消息－列表（accordion）
   Figma news-body: Fill 1440 / padding 48 0 / bg #FFFFFF
          背景插圖：右下襪子 opacity 80%、左中 U 形
   main: 1100 / padding L+R 32 / gap 24
   list-header: 796 / 標題 18px 700 #444444（置中）
   accordion: 1036 / radius 12 / border 1px rgba(255,255,255,.7)
   acc-item: border-bottom 1px #E8ECF0
   acc-head: padding 18px 22px / gap 12.8 / bg rgba(255,255,255,.7)
     date 13px #787877 / tag padding 2px 7px radius 4, 12px 700
     title 15px 500 #444444 / chevron 13px #787877
   acc-body: padding 19px 22px 26px / gap 16 / bg rgba(255,255,255,.7)
   event: padding 16px 19px / radius 8 / border-bottom 1px #E8ECF0
     name 15px 700 / meta 13.28px #787877 / desc 14.08px lh 23.94
   ============================================================ */
.news-body {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 48px 0;
    background: #FFFFFF;
    box-sizing: border-box;
}

.news-deco {
    position: absolute;
    z-index: 0;
    height: auto;
    pointer-events: none;
}

/* 左中 U 形：依區塊高度垂直置中，收合/展開都維持在左側中段；原圖開口朝上，轉 90 度讓開口朝右 */
.news-deco--left {
    top: 45%;
    left: 80px;
    width: 183px;
    transform: translateY(-50%) rotate(90deg);
}

/* 右下襪子：貼著區塊底部，展開/收合時跟著移動 */
.news-deco--right {
    bottom: 78px;
    right: 99px;
    width: 249px;
    opacity: 0.8;
}

.news-main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

.news-list-header {
    width: 100%;
    max-width: 796px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 12.8px;
}

.news-list-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    color: #444444;
}

.news-accordion {
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    overflow: hidden;
}

.news-acc-item {
    border-bottom: 1px solid #E8ECF0;
}

.news-acc-head {
    display: flex;
    align-items: center;
    gap: 12.8px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    list-style: none;
}

.news-acc-head::-webkit-details-marker {
    display: none;
}

.news-date {
    flex: 0 0 80px;
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    color: #787877;
}

.news-tag {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

.news-tag--donghu { background: #D5F2EF; color: #2A9D8F; }
.news-tag--tianmu { background: #DCEEFF; color: #1E6EC8; }
.news-tag--neihu  { background: #D8F0E3; color: #4A9E6B; }
.news-tag--shilin { background: #EEDFF7; color: #9B59B6; }

.news-title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    color: #444444;
}

.news-chevron {
    flex: 0 0 13px;
    font-size: 13px;
    line-height: 19px;
    color: #787877;
}

.news-acc-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 19px 22px 26px;
    background: rgba(255, 255, 255, 0.7);
}

/* 還沒有活動內容的消息，展開時不顯示空白區 */
.news-acc-body:empty {
    display: none;
}

.news-event {
    padding: 16px 19px;
    border-radius: 8px;
    border-bottom: 1px solid #E8ECF0;
    background: rgba(255, 255, 255, 0.7);
    color: #444444;
}

.news-event-name {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
}

.news-event-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 13.28px;
    line-height: 19px;
    color: #787877;
}

.news-event-desc {
    margin: 0;
    font-size: 14.08px;
    line-height: 23.94px;
}

@media (max-width: 600px) {
    .news-acc-head {
        flex-wrap: wrap;
        padding: 16px;
    }
    .news-title {
        flex-basis: calc(100% - 26px);
    }
    .news-acc-body {
        padding: 16px;
    }
}

/* ============================================================
   探索視角－文章列表（外文）
   Figma 校園花絮: Fill 1440 / padding 64 0 80 / bg #FFFFFF
   container: 1100 / padding L+R 32 / gap 48
   subtitle: 20px 500 #444444 置中
   list: gap 32
   文章: row / gap 48 / padding 24 0 / border-bottom 1px #787877
     左欄 gap 20：作者列（頭像 53 圓形 + 16px 身分，gap 12）
                  內容區 固定高 204 / gap 16
                  標題 32px 600 #000 / 摘要 16px 400 #000
     右欄 照片 413x277
   ============================================================ */
.gallery-body {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 64px 0 80px;
    background: #FFFFFF;
    box-sizing: border-box;
}

.gallery-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 48px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

.gallery-subtitle {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 29px;
    color: #444444;
    text-align: center;
}

.gallery-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.gallery-article {
    display: flex;
    gap: 48px;
    padding: 24px 0;
    border-bottom: 1px solid #787877;
    color: #000000;
    text-decoration: none;
}

.gallery-article-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gallery-article-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gallery-article-avatar {
    width: 53px;
    height: 53px;
    border-radius: 50%;
    object-fit: cover;
}

.gallery-article-role {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #444444;
}

.gallery-article-content {
    height: 204px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.gallery-article-title {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 46px;
    color: #000000;
    transition: color 0.2s;
}

.gallery-article-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #000000;
}

.gallery-article-desc p {
    margin: 0;
    text-indent: 2em;
}

.gallery-article-photo {
    flex: 0 0 413px;
    width: 413px;
    height: 277px;
    object-fit: cover;
    transition: opacity 0.2s;
}

.gallery-article:hover .gallery-article-title {
    color: #1E6EC8;
}

.gallery-article:hover .gallery-article-photo {
    opacity: 0.85;
}

@media (max-width: 900px) {
    .gallery-article {
        flex-direction: column-reverse;
        gap: 20px;
    }
    .gallery-article-photo {
        flex-basis: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 413 / 277;
    }
    .gallery-article-content {
        height: auto;
    }
    .gallery-article-title {
        font-size: 24px;
        line-height: 1.4;
    }
}

/* ============================================================
   探索視角－文章內文頁
   Figma Hero: 1440 x 455 / 圖片 + #000 20% 遮罩 / 無標題
   校園花絮: Fill 1440 / padding 64 0 80 / bg #FFFFFF
     背景：右中蛋形照片、右中水滴插圖、左下蛋形照片
   Frame 39: 900 / padding-bottom 48 / gap 32
     作者列：頭像 53 + 16px #444444（gap 12）
     標題 32px 600 #444444 / 內文 16px 400 #444444
     小節（gap 8）：小標 24px 700 / 內文 16px
   ============================================================ */
.hero--article {
    height: 455px;
}

.hero--article::before {
    background: rgba(0, 0, 0, 0.2);
}

.post-body {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 64px 0 80px;
    background: #FFFFFF;
    box-sizing: border-box;
}

.post-deco {
    position: absolute;
    height: auto;
    pointer-events: none;
}

.post-deco--right-photo {
    top: 255px;
    z-index: 1;
    right: 49px;
    width: 191px;
}

/* 水滴：原圖水滴尖端朝上，轉 -125 度讓尖端朝左下 */
.post-deco--right-illust {
    top: 468px;
    z-index: 2; /* 疊在蛋形照片上面 */
    right: 128px;
    width: 48px;
    transform: rotate(-125deg);
}

.post-deco--left-photo {
    top: 550px;
    left: -20px;
    width: 257px;
}

.post-main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 0 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 32px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    color: #444444;
}

.post-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.post-author-avatar {
    width: 53px;
    height: 53px;
    border-radius: 50%;
    object-fit: cover;
}

.post-author-role {
    font-size: 16px;
    line-height: 24px;
}

.post-title {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 46px;
}

.post-text,
.post-section p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.post-text p {
    margin: 0 0 24px;
}

.post-list {
    margin: 0;
    padding-left: 1.5em;
}

.post-list-head {
    display: block;
}

.post-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.post-section-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
}

.post-section p {
    margin: 0;
}

/* 視窗較窄時，裝飾圖會壓到內文，先隱藏 */
@media (max-width: 1300px) {
    .post-deco {
        display: none;
    }
}

@media (max-width: 960px) {
    .post-main {
        padding: 0 16px 48px;
    }
    .hero--article {
        height: 260px;
    }
}

/* 內文 2 裝飾圖（依 Figma 完成圖換算位置）
   左：黃色塗鴉插圖 817x794 / 右下：圓形照片 569x575 */
.post-body .post-text p:last-child {
    margin-bottom: 0;
}

.post2-deco--left-illust {
    top: 352px;
    left: 97px;
    width: 136px;
}

/* 照片下緣超出區塊，被裁掉一截（同設計稿） */
.post2-deco--right-photo {
    top: 415px;
    right: 32px;
    width: 238px;
}

/* 內文 3：標題為 Bold 700 */
.post-title--bold {
    font-weight: 700;
}

/* 內文 3 裝飾圖（依 Figma 完成圖換算位置） */
.post3-deco--left-photo {
    top: 354px;
    left: -58px;
    width: 295px;
}

.post3-deco--right-photo {
    top: 246px;
    right: 6px;
    width: 210px;
    z-index: 1;
    transform: rotate(-15deg);
}

/* 漢堡插圖疊在右側照片左下角之上 */
.post3-deco--right-illust {
    top: 449px;
    right: 133px;
    width: 98px;
    z-index: 2;
}


/* ============================================================
   學員登入 login.php
   login-body: Fill / Hug / padding 48px 0 / #FFFFFF
   login-box: Fixed 400 / radius 8 / border 1px #DDE3EC / padding 40
   標題→表單 gap 24；欄位之間、欄位→按鈕 gap 19；label→input gap 6
   input: Fixed 318x44 / radius 4 / border 1px #CCCCCC / padding 0 13
   btn: Fixed 318x47 / radius 4 / #1E6EC8
   ============================================================ */
.login-body {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 48px 16px;
    background: #FFFFFF;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-box {
    width: 400px;
    max-width: 100%;
    padding: 40px;
    background: #FFFFFF;
    border: 1px solid #DDE3EC;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

.login-title {
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #1E6EC8;
    text-align: center;
}

.login-error {
    font-size: 14px;
    line-height: normal;
    color: #C0392B;
    text-align: center;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.login-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-label {
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #555555;
}

.login-input {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 16px;
    color: #2C2C2C;
}

.login-input::placeholder {
    color: #999999;
}

.login-input:focus,
.login-input-password:focus-within {
    outline: none;
    border-color: #1E6EC8;
}

.login-input-password {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.login-input-password input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: #2C2C2C;
    outline: none;
}

.login-pw-toggle {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: #AAAAAA;
}

.login-btn {
    width: 100%;
    height: 47px;
    border: 0;
    border-radius: 4px;
    background: #1E6EC8;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.login-btn:hover {
    background: #1558A8;
}


/* ============================================================
   語音教學 audio.php（登入後音檔列表）
   沿用登入框的配色：邊框 #DDE3EC / 主色 #1E6EC8
   ============================================================ */
.audio-body {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 48px 16px 80px;
    background: #FFFFFF;
    box-sizing: border-box;
}

.audio-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

.audio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #1E6EC8;
}

.audio-semester-title {
    font-weight: 700;
    font-size: 24px;
    line-height: normal;
    color: #1E6EC8;
}

.audio-logout {
    flex-shrink: 0;
    padding: 6px 16px;
    border: 1px solid #1E6EC8;
    border-radius: 4px;
    font-size: 14px;
    color: #1E6EC8;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.audio-logout:hover {
    background: #1E6EC8;
    color: #FFFFFF;
}

.audio-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.audio-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border: 1px solid #DDE3EC;
    border-radius: 8px;
}

.audio-track-name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: #2C2C2C;
    overflow-wrap: anywhere;
}

.audio-download {
    flex-shrink: 0;
    padding: 8px 20px;
    border-radius: 4px;
    background: #1E6EC8;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: none;
    transition: background 0.15s;
}

.audio-download:hover {
    background: #1558A8;
}

.audio-empty {
    padding: 48px 24px;
    border: 1px solid #DDE3EC;
    border-radius: 8px;
    font-size: 16px;
    color: #999999;
    text-align: center;
}


/* ============================================================
   隱私權政策 privacy.html
   section: Fill / padding 80 0 / #FFFFFF
   container: Fixed 1100 / padding 0 32 / gap 32
   麵包屑: 15.2px / 30.4 / #444，項目 gap 8，目前頁 700
   標題: 30px 700 置中 / 內文: 15.2px / 30.4 置中
   ============================================================ */
.policy-body {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 0;
    background: #FFFFFF;
    box-sizing: border-box;
}

.policy-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 32px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    color: #444444;
}

.policy-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 15.2px;
    line-height: 30.4px;
}

.policy-breadcrumb a {
    color: #444444;
    text-decoration: none;
}

.policy-breadcrumb a:hover {
    color: #1E6EC8;
}

.policy-breadcrumb-current {
    font-weight: 700;
}

.policy-title {
    font-weight: 700;
    font-size: 30px;
    line-height: normal;
    text-align: center;
}

.policy-text {
    font-weight: 400;
    font-size: 15.2px;
    line-height: 30.4px;
    text-align: center;
}


/* 聯絡我們 contact.html：content-text 背景 #F8F9FA，多行文字保留換行 */
.policy-text--boxed {
    background: #F8F9FA;
    white-space: pre-line;
}


/* 潛能開發：行高照 Figma 實測高度固定（標題 24px→35px、內文 16px→每行 24px），讓文字欄與圖片欄 1670px 等高 */
#potential-development .teaching-info-section-title,
#potential-development .teaching-content-block-title {
    line-height: 35px;
}

#potential-development .teaching-info-section-body,
#potential-development .teaching-content-block-body,
#potential-development .teaching-content-list {
    line-height: 24px;
}