@charset "UTF-8";
:root{--wine:#7b302f;--wine2:#542020;--rose:#a75d5a;--blush:#f7eeee;--cream:#fbf8f6;--ink:#292525;--muted:#706967;--line:#eadfdd;--white:#fff;--shadow:0 14px 40px rgba(74,31,30,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:system-ui,-apple-system,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.8;letter-spacing:.015em}img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}a:hover{color:var(--rose)}.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:white;padding:.5rem;z-index:99}.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.header-inner{max-width:1200px;margin:auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:14px;min-width:0}.brand img{width:74px;height:58px;object-fit:contain}.brand-name{font-weight:800;color:var(--wine);line-height:1.35}.brand-name small{display:block;font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:600}.header-cta{background:var(--wine);color:#fff!important;border-radius:999px;padding:9px 20px;font-size:14px}.nav{background:var(--wine)}.nav-inner{max-width:1200px;margin:auto;display:flex;justify-content:center;flex-wrap:wrap;padding:0 12px}.nav a{color:#fff;padding:12px 15px;font-size:14px;white-space:nowrap;border-bottom:3px solid transparent}.nav a:hover,.nav a.active{background:rgba(255,255,255,.1);border-bottom-color:#e7b9b4}.hero{background:linear-gradient(120deg,#fbf5f3,#f2e2df);overflow:hidden}.hero-inner{max-width:1320px;margin:auto;min-height:560px;padding:56px 28px;display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:center}.eyebrow{color:var(--rose);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px}.hero h1{font-size:clamp(34px,4vw,54px);line-height:1.35;color:var(--wine2);margin:0 0 16px;letter-spacing:.02em}.hero h1 em{font-style:normal;color:var(--rose)}.hero p{color:#5f5654;max-width:620px}.hero-image{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);max-height:330px}.hero-image img{width:100%;height:330px;object-fit:cover}.btn{display:inline-block;background:var(--wine);color:#fff!important;border-radius:999px;padding:10px 22px;font-weight:700;margin:6px 8px 0 0}.btn.outline{background:transparent;border:1px solid var(--wine);color:var(--wine)!important}.wrap{max-width:1160px;margin:auto;padding:62px 24px}.section-head{text-align:center;max-width:760px;margin:0 auto 32px}.section-head h2,.page-title{font-size:clamp(27px,3vw,38px);line-height:1.4;color:var(--wine2);margin:0 0 12px}.section-head p{color:var(--muted);margin:0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}.card img{width:100%;height:210px;object-fit:cover;background:var(--blush)}.card-body{padding:22px}.card h3{color:var(--wine);font-size:20px;line-height:1.5;margin:0 0 8px}.card p{margin:0 0 12px;color:var(--muted)}.tag{display:inline-block;color:var(--wine);background:var(--blush);padding:4px 10px;border-radius:999px;font-size:12px;margin:0 5px 7px 0}.banner{background:var(--wine2);color:#fff}.banner .wrap{padding-top:44px;padding-bottom:44px}.banner h2{font-size:30px;margin:0 0 8px}.banner p{color:#f2ddda}.page-hero{background:linear-gradient(115deg,#f8efed,#fff);padding:42px 24px;text-align:center;border-bottom:1px solid var(--line)}.page-hero .page-title{margin-bottom:6px}.page-hero p{margin:0;color:var(--muted)}.content{max-width:1100px;margin:auto;padding:42px 24px 70px}.content h2{color:var(--wine);font-size:25px;margin:36px 0 14px}.content h2:first-child{margin-top:0}.content h3{color:var(--wine);margin:0 0 8px}.content p{color:#514b49}.info-list{padding-left:1.3em}.info-list li{margin:8px 0}.cert img{height:260px;object-fit:contain;background:#faf7f6;padding:10px}.teacher img{height:280px;object-fit:cover;object-position:top}.course img{height:280px;object-fit:contain;background:#faf7f6}.photo-grid img{height:260px;object-fit:cover}.contact-panel{background:var(--cream);border:1px solid var(--line);padding:26px;border-radius:18px}.site-footer{background:#2d2221;color:#f7eeec;padding:32px 24px}.footer-inner{max-width:1160px;margin:auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.site-footer p{margin:4px 0;color:#d9c9c6;font-size:13px}.site-footer a{color:#fff}.small{font-size:13px;color:var(--muted)}
@media(max-width:800px){.hero-inner{min-height:0}.header-inner{padding:10px 16px}.brand img{width:58px;height:48px}.header-cta{padding:7px 12px}.nav-inner{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}.nav a{padding:10px 12px}.hero-inner{grid-template-columns:1fr;padding:35px 20px}.hero-image img{height:230px}.wrap{padding:44px 18px}.content{padding:32px 18px 50px}.grid,.grid.two{grid-template-columns:1fr 1fr}.card img{height:170px}}
@media(max-width:520px){.brand-name{font-size:13px}.brand-name small{font-size:9px}.header-cta{font-size:12px}.grid,.grid.two{grid-template-columns:1fr}.card img{height:210px}.page-hero{padding:32px 18px}.hero h1{font-size:34px}}

/* 師資完整履歷頁 */
.teacher-team{display:grid;grid-template-columns:1fr;gap:26px}.teacher-profile{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:start}.teacher-photo img{width:100%;height:100%;min-height:280px;max-height:400px;object-fit:cover;object-position:top}.teacher-no-photo{min-height:280px;display:grid;place-items:center;background:var(--blush);color:var(--wine);font-weight:700}.teacher-profile .card-body{padding:24px 28px}.teacher-profile h2{color:var(--wine);margin:0 0 18px;font-size:25px}.bio-section{margin:16px 0 20px}.bio-section h3{font-size:16px;border-left:4px solid var(--rose);padding-left:10px;margin-bottom:8px}.bio-list{margin:0;padding-left:1.25em;columns:2;column-gap:32px}.bio-list li{break-inside:avoid;margin:0 0 6px;color:#514b49;line-height:1.7}@media(max-width:760px){.teacher-profile{grid-template-columns:1fr}.teacher-photo img{height:300px;min-height:0}.bio-list{columns:1}.teacher-profile .card-body{padding:20px}}


/* 2026-10 圖片顯示修正：首頁主視覺完整呈現，技能圖片正確對應，師資照片統一白色圓框 */
.hero-image{max-height:none;overflow:visible;border-radius:0;box-shadow:none;background:#fff;display:flex;align-items:center;justify-content:center;padding:10px}
.hero-image img{width:100%;height:auto;max-height:600px;object-fit:contain;object-position:center}
/* 專業技能卡片使用一致比例，完整顯示海報內容 */
.content .grid.two .card>img{width:100%;height:360px;object-fit:contain;object-position:center;background:#fff;padding:10px}
/* 師資照片統一為白色圓框與一致比例 */
.teacher-photo{display:flex;align-items:center;justify-content:center;background:#fff;padding:18px;min-height:280px}
.teacher-photo img{width:220px;height:220px;min-height:0;max-height:none;aspect-ratio:1/1;object-fit:cover;object-position:center;border-radius:50%;border:8px solid #fff;box-shadow:0 0 0 1px #eadfdd,0 8px 24px rgba(74,31,30,.12);background:#fff}
@media(max-width:760px){.teacher-photo{min-height:0;padding:18px}.teacher-photo img{width:220px;height:220px}.content .grid.two .card>img{height:300px}.hero-image img{max-height:480px}}


/* 文字換行修正：避免標題及段落最後一行只剩單字／單字元 */
:where(h1,h2,h3,h4,h5,h6,.page-title,.eyebrow,.brand-name,p,li,.card-body,.contact-panel,.venue-section) {
  text-wrap: pretty;
  line-break: strict;
  overflow-wrap: break-word;
}
:where(h1,h2,h3,h4,h5,h6,.page-title,.brand-name) {
  text-wrap: balance;
}
/* 中文標題避免不必要的任意斷行；窄螢幕仍允許正常換行 */
.page-title, .card-body h3, .venue-section h2 {
  word-break: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  :where(p,li) { text-wrap: pretty; }
}

/* 師資照片：白色正方形底框，使用 contain 保留原始照片完整內容，不修改照片本身 */
.teacher-photo{width:100%;min-height:0;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#fff;padding:14px;border:1px solid #eee7e5}
.teacher-photo img{width:100%;height:100%;max-width:280px;max-height:280px;min-height:0;aspect-ratio:1/1;object-fit:contain;object-position:center;border:0;border-radius:0;box-shadow:none;background:#fff}
@media(max-width:760px){.teacher-photo{width:min(100%,320px);margin:auto}.teacher-photo img{max-width:100%;max-height:100%}}
/* 場地照片：一致縮圖比例，完整顯示照片 */
.venue-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.venue-gallery figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.venue-gallery img{width:100%;height:220px;object-fit:contain;background:#fff}
.venue-gallery figcaption{padding:10px 12px;color:var(--wine);font-weight:700}
@media(max-width:800px){.venue-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.venue-gallery img{height:180px}}
@media(max-width:520px){.venue-gallery{grid-template-columns:1fr}.venue-gallery img{height:auto;max-height:280px}}


/* 關於學會頁面：理念圖片加大，證書採兩欄×兩列排列 */
.about-vision-image{height:390px!important;object-fit:contain!important;background:#fff!important;padding:12px}
.cert-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px}
.cert-grid .cert img{height:360px;object-fit:contain;background:#fff;padding:14px}
.cert-grid .cert .card-body{padding:16px 20px}
@media(max-width:640px){.about-vision-image{height:auto!important;max-height:420px;object-fit:contain!important}.cert-grid{grid-template-columns:1fr!important}.cert-grid .cert img{height:auto;max-height:420px}}


/* 2026-10 首頁主視覺加大：放大圖片版面並完整顯示原圖，不裁切 */
@media (min-width: 761px) {
  .hero-inner { max-width: 1500px; min-height: 680px; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.5fr); gap: 38px; padding: 44px 28px; }
  .hero-image { width: 100%; max-height: none; padding: 0; overflow: visible; border-radius: 16px; }
  .hero-image img { display: block; width: 100%; height: auto; max-height: 760px; object-fit: contain; object-position: center; }
}
@media (max-width: 760px) {
  .hero-inner { grid-template-columns: 1fr; min-height: 0; padding: 32px 18px; gap: 24px; }
  .hero-image { width: 100%; max-height: none; padding: 0; overflow: visible; }
  .hero-image img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; }
}


/* 課程介紹：明確區分課程類別與已開課班次 */
.course-intro, .course-history { margin-bottom: 2rem; }
.course-intro { padding: 0 0 2rem; }
.course-history { padding: clamp(18px, 3vw, 32px); border: 2px solid #e3c9ce; border-radius: 18px; background: #fbf5f6; }
.section-heading { margin-bottom: 1.5rem; }
.section-heading h2 { margin: .45rem 0 .6rem; }
.section-heading p { max-width: 72ch; line-height: 1.85; }
.history-heading { padding-bottom: 1rem; border-bottom: 1px solid #e5cdd2; }
.status-tag { display: inline-flex; align-items: center; padding: .35rem .7rem; border-radius: 999px; background: #7b2338; color: #fff; font-size: .88rem; font-weight: 700; }
.course-history .card { border: 1px solid #ead6da; background: #fff; }
.course-history .card h3 { line-height: 1.5; }
.course-history .card p { line-height: 1.8; overflow-wrap: anywhere; }
@media (max-width: 640px) { .course-history { padding: 16px; } }

/* 師資照片：白底正方形，完整顯示原圖，不裁切 */
.teacher-profile .teacher-photo{width:100%;aspect-ratio:1/1;min-height:0;display:flex;align-items:center;justify-content:center;padding:14px;background:#fff;border:1px solid #eee7e5;overflow:hidden}
.teacher-profile .teacher-photo img{display:block;width:100%;height:100%;max-width:280px;max-height:280px;min-height:0;aspect-ratio:1/1;object-fit:contain!important;object-position:center!important;background:#fff;border:0;border-radius:0;box-shadow:none}
@media(max-width:760px){.teacher-profile .teacher-photo{width:min(100%,320px);margin:0 auto}.teacher-profile .teacher-photo img{max-width:280px;max-height:280px}}

/* 本次整合修改：首頁主視覺圖片在上、文字在下；圖像以雙欄排列並保留原圖比例 */
.hero-inner.hero-stacked{display:flex;flex-direction:column;align-items:center;gap:24px;min-height:0;padding:32px 24px 48px}
.hero-stacked .hero-image{width:100%;max-width:1180px;max-height:none;border-radius:18px;box-shadow:var(--shadow)}
.hero-stacked .hero-image img{width:100%;height:auto;max-height:none;object-fit:contain}
.hero-stacked .hero-copy{width:100%;max-width:1000px;text-align:center}
.hero-stacked .hero-copy p{margin-left:auto;margin-right:auto}
.hero-stacked .hero-copy .eyebrow{max-width:none}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
.course img{width:100%;height:260px;object-fit:contain;background:#fff}
.started-course-grid .card{height:100%}
.certificate-example{max-width:900px;margin:1rem auto 2rem;text-align:center}
.certificate-example img{width:100%;height:auto;object-fit:contain;background:#fff}
.certificate-example figcaption{color:var(--muted);font-size:.95rem;margin-top:.5rem}
.official-skill-link{text-align:center;margin:1.5rem 0 2.5rem}
@media(max-width:700px){.grid,.grid.two,.grid.three{grid-template-columns:1fr}.hero-stacked .hero-copy h1{font-size:clamp(30px,8vw,44px)}.course img{height:auto;max-height:320px}}

/* 願景與組織圖：電腦並排，窄螢幕自動上下排列；原圖不裁切 */
.about-side-by-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:24px;margin:0 0 36px}
.about-side-by-side .about-section{min-width:0;margin:0}
.about-side-by-side .about-section h2{margin:0 0 18px}
.about-side-by-side .original-image-panel{width:100%;display:flex;align-items:flex-start;justify-content:center}
.about-side-by-side .original-image-panel img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;border:0}
@media(max-width:700px){.about-side-by-side{grid-template-columns:1fr;gap:28px}}

/* 2026-10-20: readability and responsive image corrections */
img { max-width:100%; height:auto; }
html { overflow-wrap:break-word; }
@media (max-width: 700px) {
  .header-inner, .nav-inner { max-width:100%; }
  .nav-inner { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .hero-image img { width:100%; height:auto; object-fit:contain; }
}

/* Final teacher layout: two profiles per row on desktop */
.teacher-team { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
@media(max-width:700px) { .teacher-team { grid-template-columns:1fr; } }
