/* =====================================================================
   2026 SNQ 專題研討會（五場疾病主題論壇）共用樣式
   配色沿用設計稿「01 睡眠醫學 Sleep & OSA」的 SNQ 青綠；版面與字級依台灣醫療科技展 2026 活動頁系列規範：
   字體  hero 大標、區塊標題用 Montserrat；其他文字（內文、標籤、時間、按鈕、分頁）都用 Inter；中文一律 Noto Sans TC
   字重  內文 400｜副標、小數字 500｜標題、姓名、標籤、按鈕 700
   字級  hero 主標 64（手機 32）；區塊標題 48（手機 32，引言標題同級）；其他 32 / 20 / 16 / 13｜手機 20 / 17 / 15 / 12
   版心  內容 1200 寬；桌機兩側至少 32、手機 16
   Hero  桌機高度 560；區塊間距 桌機 120｜手機 60；區塊標題 標籤 → 16 → 標題 → 56（手機 24）→ 內容
   ===================================================================== */
:root {
  --teal: #0F6F7F;
  --teal-deep: #0A4F5B;
  --teal-bright: #14ABBE;
  --ink: #0B2E35;
  --body: #24474E;
  --muted: #4A6A70;
  --line: #B8D7DD;
  --line-soft: #E3ECF1;
  --mint: #D7F0F2;
  --bg-soft: #F1F7F7;
  --font: Inter, 'Noto Sans TC', sans-serif;
  --title: Montserrat, 'Noto Sans TC', sans-serif;
}
html, body { margin: 0; background: #fff; }
body { overflow-x: hidden; color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
/* 與其他系列網站相同的全域重設（官網 header / footer 依賴 border-box） */
* { box-sizing: border-box; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:is(h1, h2, h3) { text-wrap: balance; }

.wrap { position: relative; width: min(1200px, 100% - 64px); margin-inline: auto; }
.label { font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }

/* ---------- 分頁列：五場論壇互相切換 ---------- */
.tabs { background: #fff; border-bottom: 1px solid var(--line); }
.tabs-in { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; padding-block: 16px; }
.tab {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: 12px;
  background: var(--bg-soft); border: 1px solid #DCE9EC; color: var(--teal);
  transition: background .15s, border-color .15s;
}
.tab:hover { border-color: var(--teal); }
.tab .t-date { font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
.tab .t-zh { font-size: 20px; line-height: 1.3; font-weight: 700; }
.tab .t-en { font-size: 13px; font-weight: 500; color: var(--muted); }
.tab.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.tab.is-active :is(.t-date, .t-en) { color: #CFE8EC; }

/* ---------- Hero：高度 560、內容垂直置中 ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 60% 90% at 100% 0%, rgba(20, 171, 190, .18), rgba(20, 171, 190, 0) 70%),
    linear-gradient(180deg, #EEF7F8 0%, #F7FBFB 100%);
}
.hero .rings { position: absolute; right: -140px; top: 50%; width: 720px; height: 720px; transform: translateY(-50%); stroke: var(--teal); stroke-width: 1; opacity: .18; z-index: -1; }
.hero-in { min-height: 560px; display: flex; flex-direction: column; justify-content: center; padding-block: 40px; }
.hero .zh { margin-top: 16px; font-size: 32px; line-height: 1.35; font-weight: 700; color: var(--teal); }
.hero h1 { margin-top: 12px; max-width: 1100px; font-size: 64px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.hero .sub { margin-top: 16px; font-size: 20px; line-height: 1.6; font-weight: 500; color: var(--body); }
.hero .meta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.hero .date { display: inline-flex; align-items: center; gap: 16px; font-size: 32px; line-height: 1.2; font-weight: 500; color: var(--ink); }
.hero .date .sep { width: 1px; height: 28px; background: rgba(11, 46, 53, .2); }
.hero .venue { font-size: 20px; font-weight: 500; color: var(--body); }
.hero .actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 16px; }

.btn, .btn-line {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 32px; border-radius: 999px;
  font-size: 20px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; transition: transform .15s, filter .15s;
}
.btn { background: var(--teal); color: #fff !important; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-line { border: 1px solid var(--teal); color: var(--teal) !important; background: rgba(255, 255, 255, .6); }
.btn-line:hover { background: #fff; }
.btn.is-soon { background: #C9DCDF; color: var(--muted) !important; cursor: default; }
.btn.is-soon:hover { transform: none; filter: none; }

/* ---------- 主辦資訊條 ---------- */
.org { background: #CBEFEB; border-block: 1px solid rgba(11, 46, 53, .08); }
.org-in { display: flex; flex-wrap: wrap; gap: 16px 48px; padding-block: 20px; }
.org dl { display: flex; align-items: baseline; gap: 12px; }
.org dt { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.org dd { display: flex; flex-direction: column; gap: 2px; }
.org dd b { font-size: 16px; font-weight: 500; color: var(--ink); }

/* ---------- 區塊共用 ---------- */
main > section { padding-top: 120px; }
.head h2 { margin-top: 16px; font-size: 48px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }

/* 簡介：左標題、右內文 */
/* 簡介：左邊大標（兩行），右邊一段中文引言，底部對齊；不放英文長文 */
/* 英文版大標比較長：左右兩欄固定比例，大標在欄內換行 */
/* 英文引言 560px：每行約 65 字元（舒適行長 60–75） */
.lang-en .overview { grid-template-columns: 1fr 560px; }
.lang-en .overview .head h2 { line-height: 1.2; letter-spacing: -.01em; }
.lang-en .overview .head h2 span + span { margin-top: 8px; color: var(--teal); }
.lang-en .overview .lead { margin-top: 34px; text-align: left; }
/* 引言上緣對齊大標第一行（不是上方的小標 label）：margin-top 跳過 label 與 h2 的 margin，中英文各自微調到字面對齊 */
/* 中文引言固定 460px（每行約 25 字）；大標跟其他區塊標題同級 48px（手機 32），長 slogan 會在欄內換行 */
.overview { display: grid; grid-template-columns: 1fr 460px; gap: 80px; align-items: start; }
.overview h2 span { display: block; }
/* headline_flow：兩句接著排，太長才自動換行（不平均分配行長） */
.overview h2.flow { text-wrap: wrap; }
.overview h2.flow span { display: inline; }
.overview .head h2 { font-size: 48px; line-height: 1.3; }
.overview .lead { margin-top: 31px; font-size: 18px; line-height: 1.8; color: var(--body); text-align: justify; }

/* 大標（hero、區塊標題）用 Montserrat，其他沿用 body 的 Inter */
.hero h1, .hero .zh, .head h2, .register h2 { font-family: var(--title); }

/* 講者清單（議程、座長共用）：▸ 粗體姓名＋灰色職稱，同亞太醫療品質年會 */
.people { display: grid; }
.people li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--line-soft); font-size: 16px; line-height: 1.5; }
.people li:first-child { border-top: 0; }
.people li::before { content: ""; position: absolute; left: 2px; top: 17px; border: 5px solid transparent; border-left: 7px solid var(--teal); border-right: 0; }
.people .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.people b { font-weight: 700; color: var(--ink); }
.people .who span { color: var(--muted); }

/* ---------- 講者照片卡：同亞太（主持人、國內 4／5 欄直式卡；國際 2 欄左圖右文） ---------- */
main > .speakers { display: grid; gap: 120px; padding-top: 120px; }
.pic { display: block; position: relative; aspect-ratio: 7 / 8; border-radius: 12px; overflow: hidden; background: #E1E7EF; }
.pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* 去背照片自帶卡底（同亞太 .pic.is-new）：不另加底色、靠底完整顯示 */
.pic.is-new { background: none; border-radius: 0; }
.pic.is-new img { object-fit: contain; object-position: bottom; }
/* 佔位：卡底從 30% 高度開始，跟去背照片的卡底對齊 */
.pic.is-empty { display: grid; place-items: end center; background: none; border-radius: 0; }
.pic.is-empty::before { content: ""; position: absolute; inset: 30% 0 0; border-radius: 16px; background: #E1E7EF; }
.pic.is-empty i { position: relative; margin-bottom: 22%; }
.pic.is-empty i { font-size: 72px; color: #AEB9C9; }
.sp-local { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px; margin-top: 28px; }  /* 標題到人像：原 56 減半 */
.sp-local.five { grid-template-columns: repeat(5, 1fr); gap: 40px 20px; }
.sp-local .txt { display: grid; gap: 6px; margin-top: 20px; padding-inline: 4px; }
.sp-local h3 { font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.sp-local .role { font-size: 16px; line-height: 1.5; color: var(--muted); }
/* 講者特色標籤：藍色膠囊，放在姓名上方 */
.sp-local .feature { justify-self: start; padding: 4px 14px; border-radius: 999px;
  background: #1F4FB0; color: #fff; font-size: 14px; line-height: 1.5; font-weight: 700; }
.sp-intl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 24px; margin-top: 28px; }
.sp-intl article { display: grid; grid-template-columns: 274px 1fr; gap: 40px; align-items: end; }
.sp-intl .txt { padding-bottom: 30px; }
.sp-intl .sp-org { font-size: 13px; line-height: 1.5; font-weight: 700; letter-spacing: .04em; color: var(--teal); }
.sp-intl hr { width: 40px; height: 2px; margin: 6px 0 8px; border: 0; background: var(--teal); }
.sp-intl h3 { font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.sp-intl .role { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--muted); }


/* ---------- 議程 ---------- */
.session { margin-top: 56px; }
.session + .session { margin-top: 64px; }
.s-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding-bottom: 14px; border-bottom: 2px solid var(--teal); }
.s-label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.s-head h3 { font-size: 20px; line-height: 1.4; font-weight: 700; color: var(--ink); }
.chairs { display: grid; grid-template-columns: 90px 1fr; gap: 32px; margin-top: 12px; padding: 20px 40px; border-radius: 16px; background: var(--bg-soft); }
.chairs .k { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--teal); padding-top: 12px; }
.chairs .people { grid-template-columns: 1fr 1fr; column-gap: 40px; }
.chairs .people li:nth-child(2) { border-top: 0; }
.items { display: grid; gap: 12px; margin-top: 16px; }
.item { display: grid; grid-template-columns: 90px 1fr; gap: 32px; padding: 32px 40px; border-radius: 16px; background: #fff; border: 1px solid #DEE3E5; }
.item.is-break { background: var(--mint); border-color: transparent; padding-block: 22px; align-items: center; }
.time .range { display: grid; justify-items: center; row-gap: 6px; width: max-content; }
.time .start, .time .end { font-size: 20px; line-height: 24px; font-weight: 500; color: var(--ink); }
.time .bar { width: 1.5px; height: 14px; background: #8A9696; }
.time .time-m { display: none; }
.tag { display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(15, 111, 127, .45); color: var(--teal); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.item h4 { margin-top: 12px; font-size: 20px; line-height: 1.5; font-weight: 700; color: var(--ink); }
/* 中文版：中文講題下附英文原題 */
.item .t-en { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.item h4.tbc { color: var(--muted); font-weight: 500; font-style: italic; }
.item.is-break h4 { margin: 0; }
.item .desc { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.item .note { margin-top: 2px; font-size: 16px; color: var(--muted); }
.item .people { margin-top: 12px; }
.item .tag + .people { margin-top: 12px; }
/* 引言＋解決方案簡報合成一格（pitch_block）：大標在上，各家用細線分隔 */
.item.is-block h4.block-title { margin-top: 0; font-size: 22px; }
.item .subs { display: grid; margin-top: 8px; }
.item .sub { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line-soft); }
.item .sub:first-child { margin-top: 16px; }
/* 產業發表分類（pitch_groups）：分類標題＋該類各家，分類之間用較深的線分隔 */
.item .grp { margin-top: 32px; }
.item .grp-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 18px; border-radius: 10px; background: var(--mint); font-size: 18px; line-height: 1.5; }
.item .grp-h b { font-weight: 700; color: var(--teal); }
.item .grp-h span { font-size: 15px; color: var(--muted); }
.item .grp-subs { display: grid; }
.item .grp .sub { padding-top: 20px; margin-top: 20px; }
.item .grp .sub:first-child { padding-top: 0; margin-top: 20px; border-top: 0; }
.item .grp .sub h4 { margin-top: 0; }

/* ---------- 報名 ---------- */
.register { margin-top: 120px; padding-block: 120px; background:
  radial-gradient(ellipse 50% 90% at 10% 100%, rgba(20, 171, 190, .22), rgba(20, 171, 190, 0) 70%),
  radial-gradient(ellipse 50% 90% at 95% 0%, rgba(203, 239, 235, .9), rgba(203, 239, 235, 0) 70%),
  var(--bg-soft); }
main > .register { padding-top: 120px; }
.reg-in { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; }
.register h2 { margin-top: 16px; font-size: 48px; line-height: 1.25; font-weight: 700; color: var(--ink); }
.reg-meta { margin-top: 20px; font-size: 20px; line-height: 1.6; font-weight: 500; color: var(--body); }
/* 學分：已核准實線框、審核中虛線框 */
.register .credits { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.register .credits .k { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--teal); }
.register .credits ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.register .credits li { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 15px; line-height: 1.4; }
.register .credits li b { font-weight: 500; color: var(--ink); }
.register .credits li span { font-weight: 700; color: var(--teal); }
.register .credits li.pending { background: transparent; border-style: dashed; }
.register .credits li.pending span { font-weight: 500; color: var(--muted); }

/* ---------- 官網 header / footer：照官網原樣；只修正官網固定 1366 寬在較窄螢幕撐出橫向捲動 ---------- */
@media (max-width: 1365px) {
  body .ths-chrome .header_NEW, body .ths-chrome .headerTopLine_NEW { min-width: 0; }
  body .ths-chrome .headerTopLine_TEXT { width: auto; max-width: 1226px; }
  body .ths-chrome .main { width: auto; max-width: 1366px; }
  body .ths-chrome .footer_main { width: auto; max-width: 1246px; }
}

/* ---------- 窄桌機、平板 ---------- */
@media (max-width: 1100px) {
  .tabs-in { grid-auto-columns: minmax(168px, 1fr); overflow-x: auto; scrollbar-width: none; }
  .tabs-in::-webkit-scrollbar { display: none; }
  .overview, .lang-en .overview { grid-template-columns: 1fr; gap: 24px; }
  .overview .lead, .lang-en .overview .lead { margin-top: 0; }
  .sp-local, .sp-local.five { grid-template-columns: repeat(3, 1fr); }
  .sp-intl article { grid-template-columns: 200px 1fr; gap: 24px; }
}
@media (max-width: 960px) and (min-width: 641px) {
  .sp-intl { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .hero h1 { font-size: 48px; }
  .chairs .people { grid-template-columns: 1fr; }
  .chairs .people li:nth-child(2) { border-top: 1px solid var(--line-soft); }
  .reg-in { grid-template-columns: 1fr; }
}

/* ---------- 手機（≤640）：字級 32 / 20 / 17 / 15 / 12，間距 60，左右 16 ---------- */
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .label, .s-label, .tag { font-size: 12px; }
  .tabs-in { display: flex; gap: 8px; padding-block: 12px; width: 100%; padding-inline: 16px; overflow-x: auto; scroll-snap-type: x proximity; }
  .tab { flex: 0 0 148px; padding: 10px 14px; border-radius: 10px; scroll-snap-align: start; }
  .tab .t-date, .tab .t-en { font-size: 12px; }
  .tab .t-zh { font-size: 17px; }

  .hero .rings { width: 420px; height: 420px; right: -200px; top: 0; transform: none; }
  .hero-in { min-height: 0; padding-block: 40px 48px; }
  .hero .zh { margin-top: 12px; font-size: 20px; }
  .hero h1 { font-size: 32px; line-height: 1.2; }
  .hero .sub { margin-top: 12px; font-size: 17px; }
  .hero .meta { margin-top: 24px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero .date { font-size: 20px; gap: 12px; }
  .hero .date .sep { height: 18px; }
  .hero .venue { font-size: 15px; }
  .hero .actions { margin-top: 24px; }
  .register .credits { margin-top: 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .register .credits .k { font-size: 12px; }
  .register .credits li { padding: 5px 12px; font-size: 13px; }
  .btn, .btn-line { min-height: 48px; padding: 0 24px; font-size: 17px; }

  .org-in { flex-direction: column; gap: 12px; padding-block: 16px; }
  .org dl { gap: 10px; }
  .org dt { font-size: 12px; min-width: 6em; }
  .org dd b { font-size: 15px; }

  main > section { padding-top: 60px; }
  .head h2, .register h2 { margin-top: 12px; font-size: 32px; }
  .people li { font-size: 15px; padding-left: 20px; }
  .people li::before { top: 16px; }
  .overview { gap: 16px; }
  .overview .head h2 { font-size: 32px; line-height: 1.35; }
  .overview .lead { font-size: 15px; line-height: 1.8; }
  .item .t-en { font-size: 13px; }
  main > .speakers { gap: 60px; padding-top: 60px; }
  .sp-local, .sp-local.five, .sp-intl { grid-template-columns: 1fr 1fr; gap: 28px 12px; margin-top: 12px; }
  .sp-intl article { display: block; }
  .sp-intl .txt { padding: 0 4px; margin-top: 16px; }
  .sp-local .txt { margin-top: 16px; gap: 4px; }
  .sp-local h3, .sp-intl h3 { font-size: 17px; }
  .sp-intl .sp-org { font-size: 12px; }
  .sp-local .feature { padding: 3px 12px; font-size: 12px; }
  .sp-local .role, .sp-intl .role { font-size: 15px; }
  .pic { border-radius: 10px; }
  .pic.is-empty i { font-size: 48px; }

  .session { margin-top: 24px; }
  .session + .session { margin-top: 40px; }
  .s-head h3 { font-size: 17px; }
  .chairs { grid-template-columns: 1fr; gap: 4px; padding: 16px; }
  .chairs .k { font-size: 12px; padding-top: 0; }
  .items { gap: 10px; margin-top: 12px; }
  .item { grid-template-columns: 1fr; gap: 10px; padding: 20px 16px; border-radius: 12px; }
  .item.is-break { padding-block: 16px; }
  .time .range { display: none; }
  .time .time-m { display: block; font-size: 17px; font-weight: 500; color: var(--teal); }
  .item h4 { margin-top: 8px; font-size: 17px; }
  .item .desc, .item .note { font-size: 15px; }

  .register { margin-top: 60px; padding-block: 60px; }
  main > .register { padding-top: 60px; }
  .reg-in { gap: 24px; }
  .reg-meta { font-size: 15px; }
}