/*
 * 第一層：全站共用基礎樣式
 * --------------------------------------------------------------------------
 * 先於 image-theme.css 載入，負責所有頁面的基礎結構與後備外觀，
 * 包含字體、色彩變數、導覽、表單、登入、統計表格、公告列表及文章內容。
 *
 * 跨頁共用的尺寸、間距、排版、互動與無障礙設定放在此檔；
 * 首頁圖片版外觀、背景照片及個別頁面的視覺覆寫請放在 image-theme.css。
 */

/* 全站色彩變數與基礎設定 */
:root {
  --navy: #08283e;
  --navy-2: #103b55;
  --teal: #00a990;
  --mint: #79e6d3;
  --ice: #edf7f8;
  --ink: #102b3b;
  --coral: #ff7f6a;
  --sun: #ffd166;
  --violet: #8b7ed8;
  --sky: #6ec5e9;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #f4f8f9;
  color: var(--ink);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang TC",
    "Noto Sans TC",
    "Microsoft JhengHei",
    Arial,
    sans-serif;
}

a {
  color: inherit;
}

/* 舊版首頁相容樣式：保留給仍使用下列 class 的頁面 */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(620px, 1.45fr);
  background: var(--navy);
  overflow: hidden;
}

.hero-copy {
  position: relative;
  padding: clamp(3rem, 7vw, 7.5rem) clamp(2rem, 5vw, 6rem);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-copy::after {
  content: "";
  width: 260px;
  height: 260px;
  border: 48px solid rgba(121, 230, 211, 0.12);
  border-radius: 50%;
  position: absolute;
  left: -110px;
  bottom: -70px;
}

.eyebrow {
  color: var(--mint);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

h1 {
  margin: 1.4rem 0 1.5rem;
  font-size: clamp(2.6rem, 4.7vw, 5.4rem);
  line-height: 1.08;
  letter-spacing: -0.055em;
}

h1 em {
  color: var(--mint);
  font-style: normal;
}

.hero-copy p {
  max-width: 32rem;
  margin: 0;
  color: #d4e4eb;
  font-size: clamp(1rem, 1.25vw, 1.22rem);
  line-height: 1.9;
}

.skip-link {
  width: max-content;
  margin-top: 2.2rem;
  color: white;
  text-underline-offset: 6px;
  font-weight: 800;
}

.login-board {
  align-self: center;
  position: relative;
  margin: 3rem 4vw 3rem 0;
}

.login-group {
  padding: clamp(1.6rem, 2.6vw, 2.7rem);
}

.work-group {
  background: var(--teal);
  width: 88%;
  margin-left: 12%;
  color: #062c31;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
}

.admin-group {
  background: #f6fbfc;
  width: 88%;
  margin-top: 1.25rem;
  color: var(--navy);
}

.group-heading {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.group-heading>span {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 900;
}

.group-heading p {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.group-heading h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
}

.login-list {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 0.8rem;
}

.login-card {
  min-height: 112px;
  padding: 1.15rem;
  background: white;
  text-decoration: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  border: 2px solid transparent;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.admin-group .login-card {
  background: #e8f1f4;
}

.login-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(5, 40, 60, 0.18);
  border-color: var(--navy);
}

.login-card:focus-visible {
  outline: 4px solid #ffd166;
  outline-offset: 3px;
}

.login-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: var(--navy);
  font-weight: 900;
}

.admin-group .login-icon {
  background: #42536b;
}

.login-card strong,
.login-card small {
  display: block;
}

.login-card strong {
  font-size: 1.08rem;
  margin-bottom: 0.35rem;
}

.login-card small {
  color: #4d6572;
  line-height: 1.5;
}

.login-arrow {
  font-size: 1.35rem;
  font-weight: 900;
}

/* 共用內容區塊 */
.content-section {
  padding: clamp(4.5rem, 8vw, 8rem) max(5vw, calc((100vw - 1320px) / 2));
}

.sample-strip {
  padding: 1rem max(5vw, calc((100vw - 1320px) / 2));
  background: #ffd166;
  color: #142d3a;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sample-strip span {
  flex: 0 0 auto;
  padding: 0.3rem 0.65rem;
  background: var(--navy);
  color: white;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.sample-strip p {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
}

.section-heading {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  margin-bottom: 2.5rem;
}

.section-heading>span {
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 900;
}

.section-heading p {
  margin: 0 0 0.3rem;
  color: var(--teal);
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 900;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 3.6rem);
  letter-spacing: -0.045em;
}

.stats-section {
  display: grid;
  grid-template-columns: 0.7fr 1.5fr;
  gap: clamp(2rem, 6vw, 7rem);
  background: var(--ice);
}

.stats-intro>span {
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.17em;
}

.stats-intro h2 {
  margin: 0.8rem 0 2rem;
  color: var(--navy);
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.06em;
}

.stats-intro a,
.text-link {
  color: var(--navy);
  font-weight: 900;
  text-underline-offset: 6px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.stat-card {
  position: relative;
  min-height: 210px;
  padding: 2rem;
  border: 1px solid #c5d9de;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.stat-card:nth-child(2),
.stat-card:nth-child(4) {
  border-left: 0;
}

.stat-card:nth-child(n + 3) {
  border-top: 0;
}

.stat-card:hover {
  background: var(--navy);
  color: white;
}

.stat-card:focus-visible,
.resource-list a:focus-visible,
.notice-list a:focus-visible,
.text-link:focus-visible,
.skip-link:focus-visible {
  outline: 4px solid #ffd166;
  outline-offset: 4px;
}

.stat-card>span {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  font-size: 0.7rem;
  font-weight: 900;
}

.stat-card strong {
  font-size: clamp(2rem, 3.2vw, 3.5rem);
  color: var(--teal);
  letter-spacing: -0.05em;
}

.stat-card p {
  margin: 0.5rem 0 0;
  font-weight: 700;
}

.resources-section {
  background: white;
}

.resource-list {
  border-top: 2px solid var(--navy);
}

.resource-list a {
  display: grid;
  grid-template-columns: 64px minmax(250px, 1.1fr) 1.2fr 40px;
  align-items: center;
  gap: 1rem;
  padding: 1.7rem 0.5rem;
  border-bottom: 1px solid #cad9dd;
  text-decoration: none;
}

.resource-list a:hover strong,
.resource-list a:hover .resource-arrow {
  color: var(--teal);
}

.resource-no {
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--teal);
}

.resource-list strong {
  font-size: 1.08rem;
}

.resource-list p {
  margin: 0;
  color: #5a707a;
  line-height: 1.6;
}

.resource-arrow {
  justify-self: end;
  font-size: 1.4rem;
}

.news-section {
  background: var(--navy);
  color: white;
}

.news-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
}

.news-section .section-heading p {
  color: var(--mint);
}

.news-section .text-link {
  color: white;
  margin-bottom: 2.5rem;
}

.notice-list {
  border-top: 1px solid #5b7483;
}

.notice-list a {
  display: grid;
  grid-template-columns: 130px 1fr 120px 30px;
  gap: 1rem;
  align-items: center;
  padding: 1.55rem 0.4rem;
  border-bottom: 1px solid #405e70;
  color: white;
  text-decoration: none;
}

.notice-list a:hover strong,
.notice-list a:hover b {
  color: var(--mint);
}

.notice-list time {
  font-size: 0.82rem;
  color: #9fb6c2;
  font-weight: 800;
}

.notice-list strong {
  font-size: 1.06rem;
}

.notice-list span {
  color: #afc2cc;
}

.notice-list b {
  font-size: 1.25rem;
}

.checks-section {
  background: #f7fafb;
}

.checks-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.checks-grid article {
  grid-column: span 2;
  min-height: 270px;
  background: white;
  border-top: 5px solid var(--teal);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 28px rgba(6, 45, 65, 0.07);
}

.checks-grid article:nth-child(4) {
  grid-column: 2 / span 2;
}

.checks-grid article:nth-child(5) {
  grid-column: 4 / span 2;
}

.checks-grid article>span {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--teal);
}

.checks-grid h3 {
  margin: 1.2rem 0 0.8rem;
  font-size: 1.4rem;
  color: var(--navy);
}

.checks-grid p {
  margin: 0;
  color: #5c7079;
  line-height: 1.75;
}

.checks-grid b {
  width: max-content;
  margin-top: auto;
  padding: 0.4rem 0.7rem;
  background: var(--ice);
  color: var(--navy);
  font-size: 0.78rem;
}

footer {
  padding: clamp(4rem, 7vw, 7rem) max(5vw, calc((100vw - 1320px) / 2)) 2rem;
  background: #061d2c;
  color: white;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(3rem, 8vw, 9rem);
}

.footer-brand>span {
  color: var(--mint);
  font-weight: 800;
}

.footer-brand h2 {
  margin: 0.45rem 0 1rem;
  font-size: clamp(2rem, 3vw, 3.4rem);
}

.footer-brand p {
  color: #9fb5c0;
  line-height: 1.8;
}

address {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1.5rem;
  font-style: normal;
}

address div {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

address small {
  color: #7f9daa;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

address a,
address span {
  color: white;
  text-decoration: none;
  font-weight: 700;
}

address a:hover {
  color: var(--mint);
}

.copyright {
  grid-column: 1/-1;
  border-top: 1px solid #294352;
  padding-top: 1.5rem;
  color: #7794a2;
  font-size: 0.75rem;
  display: flex;
  justify-content: space-between;
}

.copyright span {
  letter-spacing: 0.15em;
}

/* 第二版共用的明亮色彩主題 */
body {
  background: #fff;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: auto;
  padding: clamp(2.5rem, 5vw, 5.5rem) 0;
  background: #fff;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 8% 18%,
      rgba(110, 197, 233, 0.18) 0 6px,
      transparent 7px) 0 0/30px 30px,
    linear-gradient(110deg,
      transparent 0 52%,
      rgba(121, 230, 211, 0.14) 52% 67%,
      transparent 67%);
  mask-image: linear-gradient(to right, #000, transparent 46%);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  right: -75px;
  top: -55px;
  border-radius: 50%;
  border: 34px solid rgba(255, 209, 102, 0.62);
}

.hero-copy {
  color: var(--navy);
}

.hero-copy::before {
  content: "+  +  +";
  position: absolute;
  top: 9%;
  right: 8%;
  color: var(--coral);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.5em;
  transform: rotate(-8deg);
}

.hero-copy::after {
  width: 190px;
  height: 190px;
  border: 36px solid rgba(139, 126, 216, 0.14);
  left: -85px;
  bottom: -25px;
}

.eyebrow {
  width: max-content;
  padding: 0.45rem 0.75rem;
  background: #e4f8f4;
  color: #087b6b;
  border-radius: 999px;
  letter-spacing: 0.13em;
}

h1 {
  color: var(--navy);
}

h1 em {
  position: relative;
  color: var(--teal);
}

h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 3%;
  bottom: -0.12em;
  height: 0.13em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sun), var(--coral), var(--violet));
}

.hero-copy p {
  color: #536d7b;
}

.skip-link {
  color: var(--navy);
  text-decoration-color: var(--coral);
}

.login-board {
  filter: drop-shadow(0 24px 38px rgba(8, 40, 62, 0.12));
}

.login-board::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  left: -38px;
  top: -32px;
  z-index: -1;
  border-radius: 26px;
  background: repeating-linear-gradient(135deg,
      var(--sun) 0 9px,
      #fff 9px 18px);
  transform: rotate(-9deg);
}

.work-group {
  position: relative;
  background: #dff8f2;
  color: var(--navy);
  border: 1px solid #b9e9df;
  border-top: 8px solid var(--teal);
  box-shadow: none;
}

.work-group::after {
  content: "";
  position: absolute;
  width: 58px;
  height: 58px;
  right: 30px;
  top: -29px;
  border-radius: 50%;
  background: var(--coral);
  opacity: 0.9;
}

.admin-group {
  position: relative;
  background: #f1effb;
  color: var(--navy);
  border: 1px solid #dcd7f2;
  border-left: 8px solid var(--violet);
}

.admin-group::after {
  content: "";
  position: absolute;
  right: -15px;
  bottom: -20px;
  width: 82px;
  height: 43px;
  background: var(--sun);
  border-radius: 50%;
  transform: rotate(-12deg);
  z-index: -1;
}

.login-card {
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(8, 40, 62, 0.06);
}

.admin-group .login-card {
  background: #fff;
}

.login-icon {
  box-shadow: 6px 6px 0 rgba(0, 169, 144, 0.18);
}

.admin-group .login-icon {
  background: var(--violet);
  box-shadow: 6px 6px 0 rgba(139, 126, 216, 0.18);
}

.sample-strip {
  background: #fff8dd;
  border-block: 1px solid #f3de9f;
}

.stats-section {
  position: relative;
  overflow: hidden;
  background: #f5fbfa;
}

.stats-section::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 130px;
  left: 1.5%;
  bottom: -65px;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg,
      rgba(110, 197, 233, 0.32) 0 12px,
      transparent 12px 24px);
  transform: rotate(8deg);
}

.stat-card {
  background: #fff;
}

.stat-card:nth-child(1) {
  border-top: 6px solid var(--teal);
}

.stat-card:nth-child(2) {
  border-top: 6px solid var(--coral);
}

.stat-card:nth-child(3) {
  border-bottom: 6px solid var(--violet);
}

.stat-card:nth-child(4) {
  border-bottom: 6px solid var(--sun);
}

.stat-card:hover {
  background: var(--navy);
}

.resources-section {
  position: relative;
  background: #fff;
  overflow: hidden;
}

.resources-section::before {
  content: "";
  position: absolute;
  right: 4vw;
  top: 3rem;
  width: 150px;
  height: 75px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--coral) 0 4px, transparent 5px) 0 0/20px 20px;
  opacity: 0.4;
  transform: rotate(-8deg);
}

.resource-list a:nth-child(1) .resource-no {
  color: var(--teal);
}

.resource-list a:nth-child(2) .resource-no {
  color: var(--coral);
}

.resource-list a:nth-child(3) .resource-no {
  color: var(--violet);
}

.news-section {
  position: relative;
  overflow: hidden;
  background: #fff4f1;
  color: var(--navy);
}

.news-section::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 300px;
  height: 300px;
  border: 46px solid rgba(255, 127, 106, 0.14);
  border-radius: 50%;
}

.news-section .section-heading p {
  color: var(--coral);
}

.news-section .text-link,
.notice-list a {
  color: var(--navy);
}

.notice-list {
  border-top-color: #e7c8c1;
}

.notice-list a {
  border-bottom-color: #ead5d0;
}

.notice-list time {
  color: #aa675b;
}

.notice-list span {
  color: #826f6b;
}

.notice-list a:nth-child(even) {
  background: rgba(255, 255, 255, 0.52);
}

.notice-list a:hover strong,
.notice-list a:hover b {
  color: #d9513a;
}

.checks-section {
  position: relative;
  background: #f8f7fc;
}

.checks-section::before {
  content: "";
  position: absolute;
  left: 2vw;
  top: 3.5rem;
  width: 90px;
  height: 90px;
  border-radius: 20px;
  background: linear-gradient(45deg,
      rgba(139, 126, 216, 0.18) 25%,
      transparent 25% 75%,
      rgba(139, 126, 216, 0.18) 75%) 0 0/24px 24px;
  transform: rotate(12deg);
}

.checks-grid article {
  border-top-color: var(--teal);
  border-radius: 0 0 18px 18px;
}

.checks-grid article:nth-child(2) {
  border-top-color: var(--coral);
}

.checks-grid article:nth-child(3) {
  border-top-color: var(--sun);
}

.checks-grid article:nth-child(4) {
  border-top-color: var(--violet);
}

.checks-grid article:nth-child(5) {
  border-top-color: var(--sky);
}

.admin-zone {
  position: relative;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  margin-top: clamp(4rem, 8vw, 8rem);
  background: #eef0f8;
  border-top: 12px solid var(--navy);
  overflow: hidden;
}

.admin-zone::before {
  content: "";
  position: absolute;
  left: -70px;
  bottom: -100px;
  width: 250px;
  height: 250px;
  border: 38px solid rgba(139, 126, 216, 0.13);
  border-radius: 50%;
}

.admin-zone-intro {
  position: relative;
  z-index: 1;
}

.admin-zone-intro>span {
  color: var(--violet);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.admin-zone-intro h2 {
  margin: 0.7rem 0 1rem;
  color: var(--navy);
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.admin-zone-intro p {
  margin: 0;
  color: #596b7a;
  font-size: 1.05rem;
  line-height: 1.85;
}

.admin-zone .admin-group {
  width: 100%;
  margin: 0;
  z-index: 1;
}

footer {
  position: relative;
  overflow: hidden;
}

footer::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 240px;
  height: 240px;
  border: 34px solid rgba(121, 230, 211, 0.09);
  border-radius: 50%;
}

/* 登入、統計與公告等次頁共用設定 */
.subpage {
  min-height: 100vh;
  background: #f7fafb;
}

.subnav {
  min-height: 82px;
  padding: 1rem max(4vw, calc((100vw - 1240px) / 2));
  background: #fff;
  border-bottom: 1px solid #dce8eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.subnav a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 800;
}

.subnav>a:last-child,
.subnav nav a {
  padding: 0.55rem 0.25rem;
  border-bottom: 2px solid transparent;
}

.subnav>a:last-child:hover,
.subnav nav a:hover {
  border-color: var(--teal);
}

.subnav nav {
  display: flex;
  gap: 1.5rem;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.brand-mark span {
  padding: 0.42rem 0.65rem;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 0.76rem;
}

.page-kicker {
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

/* 登入頁：角色圖片區與登入表單 */
.login-shell {
  min-height: calc(100vh - 82px);
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(460px, 1.1fr);
}

.role-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 7rem);
  color: var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #dff8f2;
}

.role-panel::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -85px;
  bottom: -85px;
  border: 38px solid rgba(0, 169, 144, 0.13);
  border-radius: 50%;
}

.role-number {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.role-panel h1 {
  margin: 2rem 0 1.3rem;
  font-size: clamp(2.7rem, 5vw, 5.2rem);
  line-height: 1.05;
}

.role-panel p {
  max-width: 34rem;
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.85;
}

.onsite-role {
  background: #fff0eb;
}

.hospital-role {
  background: #f0eefb;
}

.system-role {
  background: #e9f1f5;
}

.role-panel>* {
  position: relative;
  z-index: 1;
}

.role-panel::before {
  position: absolute;
  z-index: 0;
  inset: -8%;
  white-space: pre;
  pointer-events: none;
  transform: rotate(-7deg);
  font-weight: 950;
  letter-spacing: 0.9em;
  line-height: 2.8;
  opacity: 0.1;
}

.school-role {
  background-color: #e9faf5;
}

.school-role::before {
  content: "✎   ▤   ✎   ▤\A  ▤   ✎   ▤   ✎\A✎   ▤   ✎   ▤\A  ▤   ✎   ▤   ✎";
  color: #087b6b;
  font-size: 1.8rem;
  left: 43%;
  top: 4%;
}

.onsite-role::before,
.hospital-role::before {
  content: "✚   ·   ✚   ·   ✚\A  ·   ✚   ·   ✚\A✚   ·   ✚   ·   ✚\A  ·   ✚   ·   ✚";
  font-size: 2rem;
  left: 46%;
  top: 1%;
}

.onsite-role::before {
  color: #d9513a;
}

.hospital-role::before {
  color: #6757bd;
}

.system-role::before {
  content: "+  □  +  □  +\A□  +  □  +  □\A+  □  +  □  +\A□  +  □  +  □";
  color: #426377;
  font-size: 1.8rem;
  left: 48%;
  top: 3%;
}

.work-group {
  background-image:
    radial-gradient(circle at 88% 17%,
      rgba(255, 127, 106, 0.18) 0 5px,
      transparent 6px),
    repeating-linear-gradient(0deg,
      transparent 0 27px,
      rgba(0, 169, 144, 0.055) 27px 28px);
}

.checks-grid article {
  position: relative;
  overflow: hidden;
}

.checks-grid article::after {
  content: "✚";
  position: absolute;
  right: 1rem;
  bottom: -1.1rem;
  color: rgba(0, 169, 144, 0.08);
  font-size: 6rem;
  font-weight: 950;
  line-height: 1;
}

.checks-grid article:nth-child(2)::after,
.checks-grid article:nth-child(4)::after {
  content: "◎";
  color: rgba(255, 127, 106, 0.1);
}

.login-guide {
  padding: clamp(3rem, 7vw, 7rem);
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-guide h2 {
  margin: 0.7rem 0 2rem;
  color: var(--navy);
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.identity-note {
  padding: 1.5rem;
  border-left: 6px solid var(--teal);
  background: #eefaf7;
}

.identity-note strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--navy);
  font-size: 1.1rem;
}

.identity-note p {
  margin: 0;
  color: #556c77;
  line-height: 1.7;
}

.coral-note {
  border-color: var(--coral);
  background: #fff4f1;
}

.violet-note {
  border-color: var(--violet);
  background: #f5f3fc;
}

.navy-note {
  border-color: var(--navy);
  background: #eef3f6;
}

.primary-action {
  margin-top: 1.5rem;
  padding: 1.2rem 1.4rem;
  border-radius: 12px;
  background: var(--teal);
  color: #052f34;
  text-decoration: none;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.primary-action:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(8, 40, 62, 0.14);
}

.primary-action:focus-visible,
.subnav a:focus-visible,
.data-toolbar a:focus-visible,
.announcement-cards a:focus-visible {
  outline: 4px solid var(--sun);
  outline-offset: 4px;
}

.coral-action {
  background: var(--coral);
  color: #35120d;
}

.violet-action {
  background: var(--violet);
  color: #fff;
}

.navy-action {
  background: var(--navy);
  color: #fff;
}

.secure-note {
  margin: 2rem 0 0;
  color: #71848d;
  font-size: 0.86rem;
  line-height: 1.7;
}

.warm-login {
  background: linear-gradient(135deg, #fff9f5 0%, #ffeee4 100%);
}

.warm-login .subnav {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
}

.warm-login .school-role {
  background: linear-gradient(145deg, #fff5ee 0%, #ffe0cd 100%);
}

.warm-login .school-role::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 16% 20%,
      rgba(232, 168, 124, 0.32) 0 5px,
      transparent 6px) 0 0/28px 28px;
  mask-image: linear-gradient(135deg, #000, transparent 55%);
}

.warm-login .onsite-role {
  background: linear-gradient(145deg, #fff7f1 0%, #fdded2 100%);
}

.warm-login .onsite-role::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  left: -80px;
  top: -70px;
  border: 42px solid rgba(232, 168, 124, 0.2);
  border-radius: 50%;
}

/* 登入表單欄位與操作按鈕 */
.prototype-login {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.prototype-login label {
  margin-top: 0.55rem;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 900;
}

.prototype-login input {
  width: 100%;
  min-height: 56px;
  padding: 0.85rem 1rem;
  border: 2px solid #ccdce1;
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 1rem;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.prototype-login input::placeholder {
  color: #8b9aa2;
}

.prototype-login input:focus {
  border-color: var(--teal);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(0, 169, 144, 0.14);
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 5rem;
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  transform: translateY(-50%);
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 7px;
  background: #edf4f6;
  color: var(--navy);
  font-weight: 900;
  cursor: pointer;
}

.toggle-password:focus-visible,
.submit-login:focus-visible {
  outline: 4px solid var(--sun);
  outline-offset: 3px;
}

.submit-login {
  margin-top: 1rem;
  min-height: 58px;
  padding: 0.9rem 1.2rem;
  border: 0;
  border-radius: 11px;
  background: var(--teal);
  color: #062f32;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.submit-login:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(8, 40, 62, 0.15);
}

.coral-form .submit-login {
  background: var(--coral);
  color: #38150f;
}

.violet-form .submit-login {
  background: var(--violet);
  color: #fff;
}

.navy-form .submit-login {
  background: var(--navy);
  color: #fff;
}

.coral-form input:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(255, 127, 106, 0.14);
}

.violet-form input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(139, 126, 216, 0.14);
}

.navy-form input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(8, 40, 62, 0.13);
}

.role-warning {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border-left: 5px solid var(--coral);
  background: #fff3ef;
  color: #6a3a31;
  line-height: 1.6;
}

.violet-warning {
  border-color: var(--violet);
  background: #f3f1fb;
  color: #4f486f;
}

.captcha-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 0.55rem;
  align-items: stretch;
}

.captcha-image {
  width: 112px;
  height: 56px;
  object-fit: contain;
  align-self: stretch;
  border: 2px solid #ccdce1;
  border-radius: 10px;
  background: #fff;
}

@media (max-width: 460px) {
  .captcha-row {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .captcha-image {
    width: 96px;
  }
}

/* 統計頁與公告列表頁的內容容器 */
.data-shell,
.announcement-shell {
  padding: clamp(3rem, 6vw, 6rem) max(4vw, calc((100vw - 1240px) / 2));
}

.data-hero {
  max-width: 850px;
}

.data-hero h1 {
  margin: 0.7rem 0 1.2rem;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1.08;
}

.data-hero p {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.8;
}

.data-toolbar {
  margin: 3rem 0 1.2rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border: 1px solid #d7e4e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.data-toolbar a {
  color: var(--navy);
  font-weight: 900;
  text-underline-offset: 5px;
}

.sample-badge {
  padding: 0.35rem 0.65rem;
  background: var(--sun);
  color: var(--navy);
  font-size: 0.74rem;
  font-weight: 900;
}

.table-wrap {
  overflow-x: auto;
  background: #fff;
  box-shadow: 0 12px 35px rgba(8, 40, 62, 0.07);
}

table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
}

th,
td {
  padding: 1rem 0.8rem;
  border: 1px solid #d9e5e8;
  text-align: center;
  white-space: nowrap;
}

thead th {
  background: var(--navy);
  color: #fff;
  font-size: 0.86rem;
}

tbody th {
  color: var(--navy);
  text-align: left;
}

tbody tr:nth-child(even) {
  background: #f5faf9;
}

.total-row {
  background: #dff8f2 !important;
}

.rate-good,
.rate-warn {
  display: inline-block;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  font-weight: 900;
}

.rate-good {
  background: #dff8f2;
  color: #087663;
}

.rate-warn {
  background: #fff0c8;
  color: #7a5700;
}

.table-note {
  color: #71848d;
  font-size: 0.86rem;
  line-height: 1.7;
}

/* 公告列表 */
.announcement-cards {
  border-top: 2px solid var(--navy);
}

.announcement-cards a {
  display: grid;
  grid-template-columns: 150px 1fr 30px;
  align-items: center;
  gap: 2rem;
  padding: 1.7rem 0.5rem;
  border-bottom: 1px solid #d2e0e4;
  color: var(--navy);
  text-decoration: none;
}

.announcement-cards a:hover h2,
.announcement-cards a:hover>b {
  color: var(--coral);
}

.announcement-cards time {
  color: #6f828b;
  font-size: 0.88rem;
  font-weight: 800;
}

.announcement-cards time small {
  display: block;
  margin-top: 0.25rem;
}

.announcement-cards div>span {
  color: var(--coral);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.announcement-cards h2 {
  margin: 0.35rem 0;
  font-size: 1.2rem;
}

.announcement-cards p {
  margin: 0;
  color: #71848d;
  font-size: 0.88rem;
}

.announcement-cards>b {
  font-size: 1.3rem;
}

@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    padding: 4rem 7vw 3rem;
  }

  .login-board {
    margin: 0 5vw 4rem;
  }

  .work-group,
  .admin-group {
    width: 100%;
    margin-left: 0;
  }

  .stats-section,
  .admin-zone,
  .login-shell {
    grid-template-columns: 1fr;
  }

  .resource-list a {
    grid-template-columns: 50px 1fr 40px;
  }

  .resource-list p {
    grid-column: 2/3;
  }

  .checks-grid {
    grid-template-columns: 1fr 1fr;
  }

  .checks-grid article,
  .checks-grid article:nth-child(4),
  .checks-grid article:nth-child(5) {
    grid-column: auto;
  }

  footer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero-copy {
    padding: 3.2rem 1.25rem 2.5rem;
  }

  .login-board {
    margin: 0 1rem 2rem;
  }

  .login-group {
    padding: 1.25rem;
  }

  .login-list,
  .stats-grid,
  .checks-grid,
  address {
    grid-template-columns: 1fr;
  }

  .login-card {
    min-height: 100px;
  }

  .content-section {
    padding: 4rem 1.2rem;
  }

  .sample-strip {
    align-items: flex-start;
    padding: 1rem 1.2rem;
  }

  .stats-grid {
    gap: 0.7rem;
  }

  .stat-card {
    min-height: 175px;
    border: 1px solid #c5d9de !important;
  }

  .resource-list a {
    grid-template-columns: 40px 1fr 25px;
  }

  .notice-list a {
    grid-template-columns: 1fr 30px;
  }

  .notice-list time,
  .notice-list span {
    grid-column: 1;
  }

  .notice-list strong {
    grid-column: 1;
  }

  .notice-list b {
    grid-column: 2;
    grid-row: 1/4;
  }

  .news-header {
    display: block;
  }

  .news-section .text-link {
    display: inline-block;
  }

  .copyright {
    display: block;
  }

  .copyright span {
    display: block;
    margin-top: 0.7rem;
  }

  .subnav {
    align-items: flex-start;
  }

  .brand-mark {
    font-size: 0.84rem;
  }

  .subnav nav {
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .login-guide,
  .role-panel {
    padding: 3rem 1.25rem;
  }

  .data-shell,
  .announcement-shell {
    padding: 3rem 1rem;
  }

  .data-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .announcement-cards a {
    grid-template-columns: 1fr 25px;
    gap: 0.75rem;
  }

  .announcement-cards time {
    grid-column: 1;
  }

  .announcement-cards div {
    grid-column: 1;
  }

  .announcement-cards>a>b {
    grid-column: 2;
    grid-row: 1/3;
  }
}

/* 公告詳細內容頁 */
.article-page {
  background: #f7f8fc;
}

.article-shell {
  width: min(940px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0 6rem;
}

.article-back {
  display: inline-block;
  margin-bottom: 2rem;
  color: #3f6571;
  font-weight: 850;
  text-decoration: none;
}

.article-shell article {
  overflow: hidden;
  border: 1px solid #dce8eb;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(16, 58, 71, 0.1);
}

.article-heading {
  padding: 3.5rem clamp(1.5rem, 6vw, 4.5rem) 2.5rem;
  color: #fff;
}

.article-heading>span {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border-radius: 99px;
  background: #ff8069;
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.1em;
}

.article-heading h1 {
  max-width: 760px;
  margin: 1.2rem 0;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  color: #c8e2e4;
  font-size: 0.9rem;
  font-weight: 750;
}

.article-body {
  padding: clamp(2rem, 6vw, 4.5rem);
  color: #253f48;
  font-size: 1.08rem;
  line-height: 2;
}

.article-body>p:first-child {
  margin-top: 0;
  font-size: 1.18rem;
}

.article-attachments {
  margin-top: 2.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid #d8e3e7;
  border-radius: 18px;
  background: #f4f7f8;
}

.attachment-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.attachment-heading span {
  color: #a84a3a;
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.attachment-heading h2,
.attachment-heading p {
  margin: 0;
}

.attachment-heading h2 {
  color: #173f49;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
}

.attachment-heading p {
  color: #627980;
  font-size: 0.95rem;
}

.attachment-list {
  display: grid;
  gap: 0.8rem;
}

.attachment-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #d8e3e7;
  border-radius: 14px;
  background: #fff;
}

.attachment-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 12px;
  background: #ffe5dc;
  color: #b94f38;
  font-size: 0.75rem;
  font-weight: 950;
}

.file-info {
  min-width: 0;
}

.file-info strong,
.file-info small {
  display: block;
}

.file-info strong {
  overflow-wrap: anywhere;
  color: #173f49;
  line-height: 1.5;
}

.file-info small {
  margin-top: 0.15rem;
  color: #72858b;
}

.download-button {
  min-height: 46px;
  padding: 0.65rem 1.1rem;
  border-radius: 10px;
  background: #c83f3f;
  color: #fff;
  font-weight: 900;
  line-height: 1.5;
  text-decoration: none;
}

.download-button:hover {
  background: #a92f2f;
}

.download-button:focus-visible {
  outline: 3px solid #ffbf69;
  outline-offset: 3px;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

.schedule-grid section {
  padding: 1.5rem;
  border-radius: 16px;
  background: #f0f7f8;
}

.schedule-grid span,
.schedule-grid strong {
  display: block;
}

.schedule-grid span {
  color: #d9513a;
  font-size: 0.8rem;
  font-weight: 950;
}

.schedule-grid strong {
  margin: 0.4rem 0;
  font-size: 1.15rem;
}

.schedule-grid p {
  margin: 0;
}

.form-list {
  display: grid;
  gap: 0.75rem;
  margin: 2rem 0;
}

.form-list>div {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.1rem 1rem;
  padding: 1.2rem;
  border-bottom: 1px solid #dce8eb;
}

.form-list span {
  grid-row: 1/3;
  color: #ff6e57;
  font-weight: 950;
}

.form-list strong,
.form-list small {
  grid-column: 2;
}

.form-list small {
  color: #71848d;
}

.article-pagination {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 0.25rem 0;
}

.article-pagination a {
  color: #0b6e78;
  font-weight: 900;
  text-decoration: none;
}

.article-pagination a:last-child {
  text-align: right;
}

@media (max-width: 640px) {
  .article-shell {
    padding-top: 2rem;
  }

  .article-heading {
    padding: 2.5rem 1.4rem 2rem;
  }

  .article-body {
    padding: 2rem 1.4rem;
  }

  .attachment-heading {
    align-items: start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .attachment-file {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .download-button {
    grid-column: 1 / -1;
    text-align: center;
  }

  .schedule-grid {
    grid-template-columns: 1fr;
  }

  .article-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .article-pagination a:last-child {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .login-card {
    transition: none;
  }
}