@charset "UTF-8";
/* ═══════════════════════════════════════
     FONTS — 源柔ゴシック
  ═══════════════════════════════════════ */
@font-face {
  font-family: 'GenJyuuGothic';
  src: url('../fonts/GenJyuuGothic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GenJyuuGothic';
  src: url('../fonts/GenJyuuGothic-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GenJyuuGothic';
  src: url('../fonts/GenJyuuGothic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ═══════════════════════════════════════
     VARIABLES  — 清爽天空藍
  ═══════════════════════════════════════ */ :root {
  --sky: #00a0e8;
  --sky-bright: #5CC8FF;
  --sky-mid: #1A88D8;
  --sky-deep: #0A52A8;
  --sky-pale: #e5f3fe;
  --sky-bg: #F0F8FF;
  --navy: #0A1E3C;
  --navy2: #0D2B5C;
  --white: #FFFFFF;
  --text: #0E1E30;
  --text-mid: #4A6480;
  --text-light: #8AACC8;
  --gold: #E89A10;
  --gold2: #F5C030;
  --grass: #4AAE62;
  --border: #CBE6F8;
  --font-en: 'Avenir Next', 'Avenir', 'Montserrat', 'GenJyuuGothic', sans-serif;
  --font-ja: 'GenJyuuGothic', 'Noto Sans TC', sans-serif;
}
/* ═══════════════════════════════════════
     RESET
  ═══════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  font-family: var(--font-ja);
  background: var(--white);
  color: var(--text);
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  text-decoration: none;
  color: inherit;
}
/* ═══════════════════════════════════════
     CUSTOM CURSOR
  ═══════════════════════════════════════ */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(59, 174, 245, 0.6);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .25s cubic-bezier(.25, .46, .45, .94), height .25s cubic-bezier(.25, .46, .45, .94), border-width .25s, border-color .25s, background .25s, opacity .25s;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.cursor-ring.hovering {
  width: 48px;
  height: 48px;
  border-width: 0;
  background: rgba(59, 174, 245, 0.2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 5px;
  height: 5px;
  background: var(--sky);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .2s, height .2s, box-shadow .2s, background .2s;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.cursor-dot.hovering {
  width: 8px;
  height: 8px;
  background: var(--sky-mid);
  box-shadow: 0 0 8px rgba(59, 174, 245, 0.7), 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}
@keyframes cursorStarFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) translateY(0);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1) translateY(-8px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) translateY(-52px);
  }
}
/* ── Go to Top ── */
#go-top {
  position: fixed;
  right: 28px;
  bottom: 32px;
  z-index: 900;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #fdf00e;
  color: var(--sky);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(253, 240, 14, .45);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease, background .2s;
  pointer-events: none;
}
#go-top svg {
  width: 22px;
  height: 22px;
}
#go-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#go-top:hover {
  background: #f5e600;
  box-shadow: 0 6px 24px rgba(253, 240, 14, .6);
}
#go-top:active {
  transform: translateY(2px);
}
/* ═══════════════════════════════════════
     LOADER
  ═══════════════════════════════════════ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--sky-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .8s, visibility .8s;
}
.loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-word {
  font-family: var(--font-en);
  font-size: clamp(2.8rem, 9vw, 7rem);
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
}
.loader-word em {
  font-style: normal;
  color: var(--sky-mid);
}
.loader-track {
  width: min(300px, 80vw);
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 36px;
}
.loader-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--sky), var(--sky-mid));
  animation: fillBar 1.4s ease forwards 0.3s;
}
.loader-hint {
  margin-top: 18px;
  font-size: 0.65rem;
  letter-spacing: .35em;
  color: var(--text-light);
  text-transform: uppercase;
}
@keyframes fillBar {
  to {
    width: 100%;
  }
}
/* ═══════════════════════════════════════
     PROGRESS LINE
  ═══════════════════════════════════════ */
.progress-line {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 600;
  height: 3px;
  background: linear-gradient(90deg, var(--sky), #fdf00e);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .1s linear;
}
/* ═══════════════════════════════════════
     NAV
  ═══════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 52px;
  opacity: 0;
  transform: translateY(-10px);
  transition: background .4s, padding .3s, box-shadow .4s, opacity .4s, transform .4s;
}
.nav.solid {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  padding: 14px 52px;
  box-shadow: 0 1px 0 var(--border);
  opacity: 1;
  transform: translateY(0);
}
.nav-logo {
  font-family: var(--font-en);
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .1em;
  color: #e60012;
  transition: color .4s;
}
.nav.solid .nav-logo {
  color: #e60012;
}
.nav-logo em {
  font-style: normal;
  color: #e60012;
}
.nav.solid .nav-logo em {
  color: #e60012;
}
.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  align-items: center;
}
.nav-links a {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--sky-deep);
  transition: color .2s;
}
.nav.solid .nav-links a {
  color: var(--text-mid);
}
.nav-links a:hover {
  color: var(--sky-mid);
}
.nav.solid .nav-links a:hover {
  color: var(--sky-mid);
}
.nav-cta {
  background: #fdf00e;
  color: #00a0e8;
  font-weight: 700;
  font-size: .8rem;
  padding: 10px 26px;
  border-radius: 100px;
  letter-spacing: .05em;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(253, 240, 14, .45);
}
.nav.solid .nav-cta {
  background: #fdf00e;
  color: #00a0e8;
}
.nav-cta:hover {
  transform: translateY(-2px);
  background: #f5e600;
}
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--sky-deep);
  border-radius: 1px;
  transition: background .4s;
}
.nav.solid .nav-hamburger span {
  background: var(--text);
}
/* ═══════════════════════════════════════
     HERO — 天空藍主視覺
  ═══════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(600px, 760px, 860px);
}
/* 內容限寬容器 */
.hero-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 1330px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  z-index: 2;
  pointer-events: none;
}
.hero-inner > * {
  pointer-events: auto;
}
/* bg-hero.jpg — 底圖 100% 寬不裁切 */
.hero-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-photo-bg img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center center;
  will-change: transform;
}
/* pic-people.png — 人物圖壓在右下 */
.hero-people {
  position: absolute;
  right: 0;
  bottom: -5.1rem;
  z-index: 3;
  width: clamp(360px, 53.5vw, 900px);
  height: auto;
  display: block;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  animation: peopleSlideUp 1.2s .1s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes peopleSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 右側文字裝飾 wrapper + 圓形底 */
.hero-decorate-wrap {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
}
.hero-decorate-wrap::before {
  content: '';
  position: absolute;
  right: clamp(-50px, -9vw, -60px);
  top: clamp(-100px, -5.5vw, -60px);
  width: clamp(150px, 16vw, 300px);
  height: clamp(150px, 16vw, 300px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  animation: heroBloom .8s .1s cubic-bezier(.4, 0, .2, 1) forwards;
}
.hero-text-decorate {
  position: relative;
  z-index: 1;
  height: auto;
  width: clamp(36px, 4.6vw, 72px);
  display: block;
  margin-top: 30px;
  opacity: 0;
  animation: heroBloom .8s .25s cubic-bezier(.4, 0, .2, 1) forwards;
}
/* dashed plane trail */
.hero-trail {
  position: absolute;
  top: 40px;
  left: 22.5rem;
  right: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: heroBloom .8s .5s cubic-bezier(.4, 0, .2, 1) forwards;
}
.hero-trail img {
  display: block;
  width: clamp(400px, 40vw, 780px);
  height: auto;
  opacity: 1;
}
/* ── Rotating Badge ── */
.hero-badge {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  position: relative;
  pointer-events: none;
  margin-left: -50px;
}
.hero-badge-svg {
  width: 100%;
  height: 100%;
  animation: badgeSpin 18s linear infinite;
}
@keyframes badgeSpin {
  to {
    transform: rotate(360deg);
  }
}
.hero-badge-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #00a0e8;
}
.hero-badge-num {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #00a0e8;
}
.hero-badge-sub {
  font-family: var(--font-ja);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #00a0e8;
  opacity: 0.85;
}
/* Floating planes */
.planes-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.fp {
  position: absolute;
  animation: fpFly linear infinite;
  opacity: 0;
}
@keyframes fpFly {
  0% {
    transform: translate(-80px, 0) rotate(-12deg);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  94% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(100vw + 80px), -200px) rotate(-12deg);
    opacity: 0;
  }
}
/* Left text — overlaid on photo */
.hero-left {
  position: relative;
  z-index: 4;
  flex: 1;
  padding: 40px 0px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 55%;
}
.hero-event-label {
  display: inline-block;
  font-family: var(--font-en);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .2);
  border-radius: 100px;
  padding: 5px 16px;
  margin-bottom: 22px;
  will-change: transform, opacity;
  opacity: 0;
  animation: heroBloom 1.0s .2s cubic-bezier(.4, 0, .2, 1) forwards;
}
.hero-h1 {
  margin: 0 0 18px;
  padding: 0;
  line-height: 1;
}
.hero-slong {
  display: block;
  width: min(550px, 90%);
  height: auto;
  margin-bottom: 1.48rem;
  opacity: 0;
  animation: su8 1.0s .3s cubic-bezier(.4, 0, .2, 1) forwards;
}
.hero-tagline {
  font-size: clamp(.88rem, 1.4vw, 1rem);
  color: rgba(10, 30, 60, .72);
  line-height: 1.9;
  margin-bottom: 28px;
  will-change: transform, opacity;
  opacity: 0;
  animation: heroBloom 1.0s .5s cubic-bezier(.4, 0, .2, 1) forwards;
}
/* date/time image */
.hero-date-row {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  transform: scale(0.95) translateY(-20px);
  transform-origin: left center;
}
.hero-time-wrap {
  position: relative;
  flex-shrink: 0;
}
.hero-time-img {
  display: block;
  width: clamp(240px, 27vw, 520px);
  height: auto;
  margin-left: 1.1rem;
  opacity: 0;
  animation: su8 .9s .65s cubic-bezier(.4, 0, .2, 1) forwards;
}
.hero-time-wrap .hero-badge {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(35%, -35%);
}
.hero-icon-free-wrap {
  position: relative;
  left: 0;
  top: 0;
  width: 10px;
  display: block;
}
.hero-icon-free-inner {
  position: absolute;
  width: 95px;
  left: auto;
  right: 1.2rem;
  top: -2rem;
  opacity: 0;
  animation: heroFreeIn .7s .9s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes heroFreeIn {
  from {
    opacity: 0;
    transform: scale(.7) rotate(-10deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
.hero-icon-free {
  display: block;
  height: auto;
}
.hero-venue {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: .82rem;
  color: var(--sky-deep);
  will-change: transform, opacity;
  opacity: 0;
  animation: heroBloom 1.0s .8s cubic-bezier(.4, 0, .2, 1) forwards;
  font-weight: 500;
}
.hero-venue::before {
  content: '📍';
  flex-shrink: 0;
}
@keyframes photoIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Bottom info bar */
.hero-bar {
  position: relative;
  z-index: 5;
  overflow: hidden;
  padding: 20rem 0 1.5rem;
  margin-top: auto;
  margin-bottom: -2px;
}
.hero-bar-inner {
  max-width: 1330px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;
}
.hero-bar-waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-bar-waves img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}
.hero-bar-waves img:nth-child(1) {
  z-index: 4;
}
.hero-bar-waves img:nth-child(2) {
  z-index: 3;
}
.hero-bar-waves img:nth-child(3) {
  z-index: 2;
}
.hero-bar-waves img:nth-child(4) {
  z-index: 1;
}
.hero-bar-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.dw {
  position: absolute;
  width: 200%;
  height: auto;
  left: 0;
}
.dw1 {
  bottom: 0;
  animation: decoWave 16s 1.5s ease-in-out infinite;
}
.dw2 {
  bottom: 0;
  animation: decoWave 22s 1.5s ease-in-out infinite reverse;
}
.dw3 {
  bottom: 0;
  animation: decoWave 19s 1.5s ease-in-out infinite;
}
@keyframes decoWave {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(0);
  }
}
.hero-bar > *:not(.hero-bar-waves):not(.hero-bar-deco) {
  position: relative;
  z-index: 10;
}
.hero-bar-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
  margin-left: .9rem;
  margin-bottom: .6rem;
  opacity: 0;
  animation: su8 .8s 1.0s cubic-bezier(.4, 0, .2, 1) forwards;
}
.hero-target-tag {
  flex-shrink: 0;
  background: #fff;
  border-radius: 100px;
  padding: 6px 18px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sky);
  white-space: nowrap;
}
.hero-target-txt {
  font-size: 1.15rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.6;
}
.pc-br {
  display: block;
}
.hero-bar-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
  padding-bottom: 0px;
  opacity: 0;
  animation: su8 .8s 1.15s cubic-bezier(.4, 0, .2, 1) forwards;
}
.hero-bar-btns {
  display: flex;
  gap: 14px;
}
.btn-yellow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fdf00e;
  color: #00a0e8;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 12px 38px;
  border-radius: 100px;
  letter-spacing: .02em;
  box-shadow: 0 4px 16px rgba(255, 220, 0, .45);
  transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
  position: relative;
}
.btn-yellow:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 28px rgba(255, 220, 0, .6);
}
/* 光澤掃過動畫 */
.btn-yellow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 100px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, .12) 70%, rgba(255, 255, 255, 0) 100%);
  background-size: 250% 100%;
  background-position: -100% 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
@keyframes btnShine {
  0% {
    background-position: -100% 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    background-position: 180% 0;
    opacity: 0;
  }
}
.btn-yellow:hover::after {
  animation: btnShine .9s ease forwards;
}
@keyframes starRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.btn-yellow--chara {
  position: relative;
  padding-left: 100px;
  padding-right: 30px;
  overflow: visible;
  justify-content: flex-end;
}
.btn-star {
  position: absolute;
  fill: white;
  pointer-events: none;
  z-index: 3;
}
.bs1 {
  width: 20px;
  height: 20px;
  left: 84px;
  top: -6px;
  animation: starRotate 4s linear infinite;
}
.bs2 {
  width: 7px;
  height: 7px;
  left: 28px;
  top: 26px;
  animation: starRotate 5.5s linear infinite reverse;
}
.bs3 {
  width: 14px;
  height: 14px;
  left: 14px;
  top: 12px;
  animation: starRotate 4.8s linear infinite;
}
/* hover 時往上飄的星星 */
@keyframes btnStarFloat {
  0% {
    opacity: 0;
    transform: scale(0) translateY(0) rotate(0deg);
  }
  18% {
    opacity: 1;
    transform: scale(1.2) translateY(-18px) rotate(12deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) translateY(-110px) rotate(45deg);
  }
}
.bs4 {
  width: 12px;
  height: 12px;
  left: 50px;
  top: 60%;
  opacity: 0;
}
.bs5 {
  width: 7px;
  height: 7px;
  left: 10px;
  top: 20%;
  opacity: 0;
}
.bs6 {
  width: 16px;
  height: 16px;
  left: 68px;
  top: 10%;
  opacity: 0;
}
.btn-yellow--chara:hover .bs4 {
  animation: btnStarFloat .9s ease-out infinite;
}
.btn-yellow--chara:hover .bs5 {
  animation: btnStarFloat .8s ease-out .1s infinite;
}
.btn-yellow--chara:hover .bs6 {
  animation: btnStarFloat 1.0s ease-out .2s infinite;
}
.btn-chara {
  position: absolute;
  left: 24px;
  bottom: -48px;
  height: 118px;
  width: auto;
  pointer-events: none;
  clip-path: inset(0 0 40% 0);
  transform-origin: bottom center;
  transition: transform .25s ease, clip-path .25s ease;
  z-index: 2;
}
.btn-yellow--chara:hover .btn-chara {
  transform: scale(1.1);
  clip-path: inset(0 0 37% 0);
}
.hero-bar-path {
  display: none;
}
/* 固定右下浮動按鈕 */
.fab-btns {
  position: fixed;
  right: 24px;
  bottom: 32px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 800;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.fab-btns--show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fab-btns .btn-yellow {
  font-size: .82rem;
  padding: 10px 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15), 0 4px 16px rgba(255, 220, 0, .4);
}
.hero-bar-note {
  width: 100%;
  font-size: .8rem;
  font-weight: 400;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: .4rem;
  letter-spacing: 0.01rem;
}
.hero-bar-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #fff;
  border-radius: 100px;
  padding: 1px 8px;
  font-weight: 700;
  font-size: .82rem;
  color: #00a0e6;
  flex-shrink: 0;
  letter-spacing: .06em;
  margin-left: .3rem;
}
.hero-bar-star {
  width: 17px;
  height: auto;
  display: block;
}
@keyframes su {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes su8 {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroBloom {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes lu {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0);
  }
}
/* buttons (shared) */
.btn-gold {
  background: var(--gold);
  color: var(--white);
  font-weight: 700;
  font-size: .92rem;
  padding: 16px 42px;
  border-radius: 100px;
  letter-spacing: .05em;
  box-shadow: 0 4px 24px rgba(232, 154, 16, .5);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(232, 154, 16, .65);
  background: var(--gold2);
}
.btn-sky {
  border: 1.5px solid var(--sky);
  background: var(--sky-pale);
  color: var(--sky-mid);
  font-weight: 600;
  font-size: .92rem;
  padding: 16px 36px;
  border-radius: 100px;
  letter-spacing: .04em;
  transition: background .2s, border-color .2s, transform .2s;
}
.btn-sky:hover {
  background: var(--sky-pale);
  border-color: var(--sky-mid);
  transform: translateY(-3px);
}
/* ═══════════════════════════════════════
     MARQUEE — 一直走的感覺
  ═══════════════════════════════════════ */
.marquee-wrap {
  background-color: #3baef5;
  overflow: hidden;
  padding: 22px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: mRun 50s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  font-family: var(--font-en);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .95);
}
.m-star {
  color: rgba(255, 255, 255, .6);
  font-size: .55rem;
}
@keyframes mRun {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* ═══════════════════════════════════════
     錯視 ILLUSION + INFO
  ═══════════════════════════════════════ */
.illusion {
  background: var(--white);
  padding: 100px 0 0;
  position: relative;
  overflow: hidden;
}
/* Giant ghost text behind everything */
.ill-giant {
  text-align: center;
  font-family: var(--font-en);
  font-size: clamp(7rem, 22vw, 24rem);
  font-weight: 900;
  line-height: .85;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(59, 174, 245, .08);
  pointer-events: none;
  user-select: none;
}
/* Photo floats up, overlapping the giant text */
.ill-photo-wrap {
  position: relative;
  width: min(680px, 90vw);
  margin: -5vw auto 0;
  z-index: 4;
}
.ill-photo-wrap img {
  width: 100%;
  border-radius: 28px;
  box-shadow: 0 32px 80px rgba(10, 30, 60, .2), 0 0 0 1px rgba(59, 174, 245, .08);
}
/* Text in FRONT of photo — pops out the bottom */
.ill-tag-front {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  background: var(--sky-mid);
  color: var(--white);
  font-family: var(--font-en);
  font-size: clamp(.9rem, 2.4vw, 1.5rem);
  font-weight: 900;
  padding: 14px 40px;
  border-radius: 100px;
  white-space: nowrap;
  letter-spacing: .04em;
  box-shadow: 0 8px 30px rgba(26, 136, 216, .45);
}
.ill-tag-front em {
  font-style: normal;
  color: var(--gold2);
}
/* Text BEHIND photo — sits between giant text and photo via z-index */
.ill-behind {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--font-en);
  font-size: clamp(4.5rem, 14vw, 12rem);
  font-weight: 900;
  color: var(--sky-pale);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  letter-spacing: -.04em;
}
/* Info row */
.ill-info {
  background: var(--white);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 72px 40px 100px;
  position: relative;
  z-index: 5;
  margin-top: 32px;
}
.ill-stat {
  text-align: center;
  padding: 0 48px;
  border-right: 1px solid var(--border);
}
.ill-stat:last-child {
  border-right: none;
}
.ill-stat-num {
  font-family: var(--font-en);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--sky-mid);
  line-height: 1;
}
.ill-stat-num sup {
  font-size: .5em;
  vertical-align: super;
}
.ill-stat-lbl {
  font-size: .78rem;
  color: var(--text-mid);
  letter-spacing: .08em;
  margin-top: 8px;
}
/* ═══════════════════════════════════════
     STICKY SCROLL
  ═══════════════════════════════════════ */
.sticky-section {
  background: var(--sky-bg);
  position: relative;
}
/* diagonal top cut */
.clip-top-sky {
  clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%);
  margin-top: -60px;
  padding-top: calc(100px + 60px);
}
.sticky-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  max-width: 1320px;
  margin: 0 auto;
}
.sticky-left {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 60px 80px 52px;
}
.sl-label {
  font-family: var(--font-en);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--sky-mid);
  margin-bottom: 18px;
}
.sl-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 24px;
}
.sl-desc {
  font-size: .92rem;
  color: var(--text-mid);
  line-height: 1.9;
  margin-bottom: 36px;
}
.sl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sl-tag {
  font-size: .75rem;
  font-weight: 600;
  background: rgba(59, 174, 245, .1);
  color: var(--sky-mid);
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(59, 174, 245, .2);
}
.sticky-right {
  padding: 80px 52px 80px 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sp-card {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  flex-shrink: 0;
}
.sp-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.sp-card:hover img {
  transform: scale(1.04);
}
.sp-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(10, 30, 60, .75), transparent);
  padding: 24px 20px 14px;
  color: var(--white);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
}
/* ═══════════════════════════════════════
     STRATEGY CARDS
  ═══════════════════════════════════════ */
.strategy {
  background: linear-gradient(to bottom, transparent 700px, var(--white) 700px);
  padding: 80px 0 100px;
  position: relative;
}
.strategy::before {
  content: '';
  position: absolute;
  top: -3.6rem;
  left: 0;
  right: 0;
  height: 700px;
  background: url('../images/bg-star.jpg') center bottom / 100% auto no-repeat;
  z-index: 0;
}
.strategy .sec-label {
  color: rgba(255, 255, 255, .55);
}
.strategy .sec-title {
  color: var(--white);
}
/* diagonal top */
.clip-t {
  clip-path: none;
  padding-top: 1.8rem;
}
.strategy-head {
  text-align: center;
  margin-bottom: 10px;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}
.strategy-head-inner {
  display: inline-flex;
  align-items: center;
}
.strategy-head img {
  width: 48%;
  display: block;
  margin: -1rem auto 0;
}
.strategy-pic-line {
  display: block;
  width: 94%;
  max-width: 94%;
  margin: 0 auto;
  pointer-events: none;
  position: relative;
  z-index: 3;
}
.sec-label {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--sky-mid);
  margin-bottom: 14px;
}
.sec-title {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 900;
  line-height: 1.2;
  color: var(--text);
}
.strat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  padding: 12px 52px 20px;
  max-width: 1320px;
  margin: 0 auto;
}
.sc {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 26px;
  overflow: visible;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  /* box-shadow 與卡片同一個合成層，opacity 完全同步，不會有底色先出現的問題 */
  box-shadow: 8px 8px 0 0 transparent, 0 8px 32px rgba(0, 80, 160, .14);
  transition: transform .3s, box-shadow .4s cubic-bezier(.34, 1.56, .64, 1);
}
.sc::before {
  display: none;
}
.sc:hover {
  transform: translateY(-4px);
}
.sc-c1 {
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 80, 160, .14);
}
.sc-c2 {
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 80, 160, .14);
}
.sc-c3 {
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 80, 160, .14);
}
.sc-c4 {
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 80, 160, .14);
}
.sc-c1:hover {
  box-shadow: 0 20px 56px rgba(0, 80, 160, .18);
}
.sc-c2:hover {
  box-shadow: 0 20px 56px rgba(0, 80, 160, .18);
}
.sc-c3:hover {
  box-shadow: 0 20px 56px rgba(0, 80, 160, .18);
}
.sc-c4:hover {
  box-shadow: 0 20px 56px rgba(0, 80, 160, .18);
}
/* 右線＋底線：右側從 50% 開始，在白底外側 */
.sc-bar {
  display: block;
  position: absolute;
  right: -8px;
  top: 50%;
  bottom: 0;
  width: calc(100% + 8px);
  background: transparent;
  border-right: 8px solid;
  border-bottom: 8px solid;
  border-radius: 0 0 28px 28px;
  pointer-events: none;
  z-index: 2;
}
.sc-c1 .sc-bar {
  border-color: #00a0e6;
}
.sc-c2 .sc-bar {
  border-color: #6DC930;
}
.sc-c3 .sc-bar {
  border-color: #845EDB;
}
.sc-c4 .sc-bar {
  border-color: #e93a78;
}
/* icon circle */
.sc-icon {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  flex-shrink: 0;
  overflow: hidden;
}
.sc-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.sc-c1 .sc-icon {
  background: #E8F5FF;
}
.sc-c2 .sc-icon {
  background: #EDFADB;
}
.sc-c3 .sc-icon {
  background: #F0EAFF;
}
.sc-c4 .sc-icon {
  background: #FFE8F3;
}
.sc-bg {
  display: none;
}
.sc-ov {
  display: none;
}
.sc-body {
  padding: 32px 24px 30px;
  color: var(--text);
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.sc:hover .sc-body {
  transform: translateY(-4px);
}
.sc-num {
  font-family: var(--font-en);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--sky);
  margin-bottom: 10px;
}
.sc-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 12px;
  color: #00a0e6;
}
.sc-title-main {
  font-size: 1.68rem;
  font-weight: 800;
}
.sc-title-sub {
  font-size: 1.1rem;
  font-weight: 400;
}
.sc-desc {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--text-mid);
  opacity: 1;
  transform: none;
  transition: none;
  flex: 1;
}
.sc-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--white);
  font-size: .62rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 8px;
  align-self: flex-start;
}
.sc-title small {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text);
  margin-top: 4px;
  letter-spacing: 0;
}
.sc-cta {
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--sky);
  letter-spacing: .04em;
  padding: 6px 0;
  border-bottom: 1.5px solid var(--sky);
  transition: color .2s, border-color .2s, transform .2s;
  align-self: center;
}
.sc-cta:hover {
  color: var(--sky-mid);
  border-color: var(--sky-mid);
  transform: translateX(4px);
}
.sc-cta-arrow {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: auto;
  color: inherit;
  margin-left: 2px;
  margin-bottom: 2px;
}
.sc-cta--soon {
  color: var(--sky);
  border-color: var(--sky);
  cursor: default;
  opacity: 0.6;
}
.sc-cta--soon:hover {
  color: var(--text-light);
  border-color: var(--border);
  transform: none;
}
/* ═══════════════════════════════════════
     PASS / TICKET
  ═══════════════════════════════════════ */
.pass-section {
  background: var(--white);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.pass-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 0 0 40px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 10px;
  align-items: end;
}
/* ── 左欄標題 ── */
.ps-head-img {
  display: block;
  max-width: 500px;
  height: auto;
  margin-bottom: 12px;
  margin-left: -3.2rem;
}
.ps-badge {
  display: inline-block;
  border: 1.5px solid var(--sky);
  color: var(--sky-mid);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 5px 18px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.ps-script-wrap {
  margin-bottom: 10px;
}
.ps-script {
  font-family: 'Caveat', cursive;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--sky);
  line-height: 1.1;
  display: block;
}
.ps-script-sub {
  font-family: 'Caveat', cursive;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: var(--sky);
  margin-top: -6px;
}
.ps-title {
  font-family: var(--font-ja);
  font-size: clamp(1.7rem, 3.6vw, 2.25rem);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.35;
  margin: 0 0 5px;
}
.pass-desc {
  font-size: 1rem;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 20px;
}
/* 4 項特權 */
.benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 26px;
  margin-right: 1rem;
}
.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--sky);
  border-radius: 100px;
  padding: 10px 16px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #00a0e8;
  background-color: #f0f8fe;
}
.benefit-icon {
  height: 26px;
  width: auto;
  flex-shrink: 0;
  margin-left: 1rem;
}
/* 票卡 */
.price-list {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
  margin-right: 1rem;
}
.price-row {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  background: var(--sky);
  border-radius: 20px;
  padding: 24px 12px 30px;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 160, 232, .35), 0 1px 3px rgba(0, 160, 232, .2);
}
.pr-label {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  width: 100%;
  padding-bottom: 5px;
  border-bottom: 1.5px dashed rgba(255, 255, 255, .8);
  margin-bottom:0rem;
}
.pr-num {
  font-size: 1.7rem;
  line-height: 1;
  vertical-align: middle;
  font-family: var(--font-en);
  font-weight: 800;
}
.pr-price {
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 800;
  color: #fdf00e;
  line-height: 1;
}
/* CTA */
.pass-cta-btn {
  margin-top: 4px;
  font-size: 1.35rem;
  padding: 16px 48px 16px 120px;
  max-width: 380px;
  margin-bottom: .9rem;
}
.pass-cta-btn .btn-chara {
  height: 130px;
  left: 35px;
  bottom: -52px;
}
.pass-cta-btn .bs1 {
  left: 100px;
}
.pass-note {
  margin-top: 0;
  margin-left: 1.2rem;
  color: var(--text-light);
  font-size: .9rem;
}
/* ── 右欄配額卡 ── */
.quota-card {
  border: 2px solid rgba(59, 174, 245, .35);
  border-radius: 30px;
  background-image: url(../images/bg-2people.png);
  background-size: 110% auto;
  background-position: center 145px;
  background-repeat: no-repeat;
  background-color: #f0f8fe;
  overflow: hidden;
  padding: 38px 32px 12rem;
  box-shadow: 0 8px 40px rgba(59, 174, 245, .1);
  position: relative;
  margin: 0 2rem;
}
.q-badge {
  display: inline-block;
  background: var(--sky);
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 5px 20px;
  border-radius: 100px;
  margin-bottom: 8px;
}
.qc-sparks {
  float: right;
  margin-top: -21px;
  margin-right: 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.qc-spark--lg {
  position: absolute;
  width: 38px;
  height: auto;
  top: 1rem;
  left: 26rem;
}
.qc-spark--sm {
  position: absolute;
  width: 16px;
  height: auto;
  left: 29.5rem;
  top: 3.2rem;
}
.qc-spark--tl {
  position: absolute;
  top: 25px;
  left: 17px;
  width: 17px;
  height: auto;
}
.q-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 6px;
  clear: both;
}
.q-title-sub {
  font-size: clamp(1.2rem, 2.1vw, 1.6rem);
}
.q-desc {
  font-size: .96rem;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 10px;
}
.q-schedule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sky);
  margin-bottom: 8px;
}
.q-schedule-row svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.q-schedule-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.q-months {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 94%;
}
.q-month {
  border: 2px solid var(--sky);
  border-radius: 50%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  background: rgba(255, 255, 255, .9);
  transition: background .2s, transform .2s;
}
.q-month:hover {
  background: rgba(255, 255, 255, .95);
  transform: translateY(-3px);
}
.q-month-n {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  font-weight: 900;
  color: var(--sky);
  line-height: 1;
}
.q-month-t {
  font-size: .8rem;
  color: var(--sky);
  margin-top: 2px;
}
/* ═══════════════════════════════════════
     SCHOOLS
  ═══════════════════════════════════════ */
.schools-section {
  background: #00a0e6;
  padding: 0px 0 80px;
  overflow: hidden;
}
.clip-t2 {
  clip-path: none;
  margin-top: 0;
  padding-top: 100px;
  padding-bottom: 100px;
}
.schools-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0;
}
.schools-head {
  margin-bottom: 0;
  position: relative;
}
.schools-head-img {
  display: block;
  width: clamp(220px, 31vw, 500px);
  height: auto;
}
.sch-fly2 {
  position: absolute;
  right: 0px;
  top: 4.5rem;
  width: clamp(260px, 55vw, 700px);
  height: auto;
  pointer-events: none;
}
/* ── 學校陣容 標題 ── */
.sch-badge {
  display: inline-block;
  background: white;
  color: var(--sky-deep);
  font-size: .72rem;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.sch-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  width: 100%;
}
.sch-spark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: #fdf00e;
}
.sch-script {
  font-family: 'Caveat', var(--font-ja);
  font-size: clamp(3rem, 6vw, 4.8rem);
  font-weight: 700;
  color: white;
  line-height: 1;
  flex-shrink: 0;
}
.sch-dash-line {
  flex: 1;
  height: 0;
  border-top: 2px dashed rgba(255, 255, 255, .4);
}
.sch-plane {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: white;
}
.sch-heading {
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  font-weight: 900;
  color: white;
  margin-top: -60px;
  margin-left: 210px;
  position: relative;
  z-index: 1;
  margin-bottom: 0px;
}
.sch-desc {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 1);
  line-height: 1.75;
  margin-left: 210px;
  margin-bottom: 4px;
}
/* ── 已解禁 badge ── */
.sch-unlock-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1.5px solid #fdf00e;
  color: #fdf00e;
  font-size: 1rem;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 100px;
  margin-left: 210px;
  margin-top: 8px;
}
.sch-unlock-badge svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #fdf00e;
}
.sch-unlock-badge strong {
  font-size: 1.3em;
}

/* ── 篩選標籤 ── */
.sch-filter-wrap {
  max-width: 1360px;
  margin: 40px auto 40px;
  padding: 0;
}
.sch-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.sch-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.45);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
  font-family: var(--font-ja);
}
.sch-filter-btn .sch-count {
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255,255,255,0.25);
  border-radius: 100px;
  padding: 1px 8px;
  transition: background 0.22s ease, color 0.22s ease;
}
.sch-filter-btn:hover,
.sch-filter-btn.active {
  background: #fff;
  border-color: #fff;
  color: var(--sky-deep);
}
.sch-filter-btn.active .sch-count {
  background: var(--sky-pale);
  color: var(--sky-deep);
}
/* 分類按鈕顏色識別點 */
.sch-filter-btn[data-filter]::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.85;
}
.sch-filter-btn[data-filter="all"]::before        { display: none; }
.sch-filter-btn[data-filter="language"]::before   { background: #3AAAE0; box-shadow: 0 0 5px rgba(58,170,224,0.75); }
.sch-filter-btn[data-filter="vocational"]::before { background: #6DC238; box-shadow: 0 0 5px rgba(109,194,56,0.75); }
.sch-filter-btn[data-filter="university"]::before { background: #9060C8; box-shadow: 0 0 5px rgba(144,96,200,0.75); }
.sch-filter-btn[data-filter="graduate"]::before   { background: #D84888; box-shadow: 0 0 5px rgba(216,72,136,0.75); }
.sch-filter-btn[data-filter="highschool"]::before { background: #20A8A0; box-shadow: 0 0 5px rgba(32,168,160,0.75); }
.sch-filter-btn[data-filter="housing"]::before    { background: #E07820; box-shadow: 0 0 5px rgba(224,120,32,0.75); }

/* ── 學校名單格線 ── */
.sch-grid {
  max-width: 1220px;
  margin: 0 auto 56px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.sch-card {
  background: rgba(255,255,255,0.93);
  border-radius: 14px;
  padding: 14px 18px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sch-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,50,120,0.18);
}
.sch-card.hidden {
  display: none;
}
/* 圓形縮圖 */
.sch-card-thumb {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #c8e6f8;
}
.sch-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 無圖色塊 */
.sch-card-thumb--ph {
  background: var(--ph-color, #c8e6f8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
/* 右側資訊區 */
.sch-card-info {
  flex: 1;
  min-width: 0;
}
.sch-card-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sch-card-sub {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-mid);
}
.sch-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
/* 類別 tag */
.sch-cat-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  color: #fff;
  white-space: nowrap;
}
.sch-cat--language  { background: #0078c8; }
.sch-cat--vocational{ background: var(--gold); color: #3a2000; }
.sch-cat--university{ background: #7340bc; }
.sch-cat--graduate  { background: var(--navy); }
.sch-cat--highschool{ background: var(--grass); }
.sch-cat--housing   { background: #d94e20; }
/* 課程 tag */
.sch-course-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(0,100,200,0.08);
  color: var(--sky-deep);
  border: 1px solid rgba(0,100,200,0.18);
  white-space: nowrap;
}
/* 陸續增加 卡片 */
.sch-card--more {
  background: rgba(255,255,255,0.3);
  border: 2px dashed rgba(255,255,255,0.65);
  justify-content: center;
}
.sch-card--more .sch-card-name {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  text-align: center;
  margin-bottom: 0;
}
.sch-card--more:hover {
  transform: none;
  box-shadow: none;
}

/* ── 手機滑動提示 ── */
.sch-scroll-hint {
  display: none;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.75);
  margin: 0 0 20px;
}

/* ── 學校表格 ── */
.sch-table-wrap {
  max-width: 1360px;
  margin: 0 auto 56px;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  box-shadow:
    0 2px 6px rgba(0,15,60,0.08),
    0 10px 40px rgba(0,20,80,0.20),
    0 0 0 1px rgba(255,255,255,0.10);
}
.sch-table {
  width: 100%;
  min-width: 880px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
  table-layout: fixed;
}
/* ── 表頭 ── */
.sch-table thead {
  position: relative;
  z-index: 10;
}
.sch-table thead.sch-thead--pinned {
  filter: drop-shadow(0 4px 8px rgba(0,10,50,0.18));
}
/* 群組標題列高度 */
.sch-table thead tr:first-child { height: 44px; }
/* 學校欄標頭 */
.sch-th-name {
  background: linear-gradient(160deg, #162f54 0%, #0a1e3c 100%);
  color: rgba(255,255,255,0.92);
  text-align: center;
  padding: 10px 18px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 1;
  width: 340px;
  min-width: 340px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* 第一列左上圓角 */
.sch-table thead tr:first-child .sch-th-name { border-radius: 0; }
/* 群組標頭 */
.sch-th-group {
  color: rgba(255,255,255,0.95);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 5px 6px;
  border-left: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  vertical-align: middle;
}
.th-lang  { background: #5BB8E8; }
.th-voc   { background: #72C840; }
.th-univ  { background: #A06ED4; }
.th-grad  { background: #E060A0; }
.th-hs    { background: #28C4BC; }
.th-house { background: #F09040; }
/* 子標題列 */
.sch-th-sub {
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  padding: 8px 5px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.90);
  border-left: 1px solid rgba(255,255,255,0.10);
  line-height: 1.3;
}
.sch-th-sub.th-lang  { background: #3AAAD8; }
.sch-th-sub.th-voc   { background: #5AB030; }
.sch-th-sub.th-univ  { background: #8858C0; }
.sch-th-sub.th-grad  { background: #C84888; }
.sch-th-sub.th-hs    { background: #18ACAC; }
.sch-th-sub.th-house { background: #D87830; }
/* ── 資料列 ── */
.sch-table tbody { background: #fff; }
.sch-table tbody tr { transition: background 0.14s ease; }
.sch-table tbody tr:nth-child(even) { background: #f4f9ff; }
.sch-table tbody tr:hover { background: #e6f2ff; }
.sch-table tbody tr[data-cats=""] { display: none; }
.sch-table tbody tr.hidden { display: none; }
/* 點擊發光 */
@keyframes cell-glow {
  0%   { box-shadow: inset 0 2px 0 rgba(91,184,232,0.9), inset 0 -2px 0 rgba(91,184,232,0.9); background: rgba(91,184,232,0.2); }
  70%  { box-shadow: inset 0 2px 0 rgba(91,184,232,0.9), inset 0 -2px 0 rgba(91,184,232,0.9); }
  100% { box-shadow: none; background: transparent; }
}
@keyframes cell-glow-first {
  0%   { box-shadow: inset 2px 2px 0 rgba(91,184,232,0.9), inset 0 -2px 0 rgba(91,184,232,0.9); background: rgba(91,184,232,0.2); }
  70%  { box-shadow: inset 2px 2px 0 rgba(91,184,232,0.9), inset 0 -2px 0 rgba(91,184,232,0.9); }
  100% { box-shadow: none; background: transparent; }
}
@keyframes cell-glow-last {
  0%   { box-shadow: inset 0 2px 0 rgba(91,184,232,0.9), inset -2px -2px 0 rgba(91,184,232,0.9); background: rgba(91,184,232,0.2); }
  70%  { box-shadow: inset 0 2px 0 rgba(91,184,232,0.9), inset -2px -2px 0 rgba(91,184,232,0.9); }
  100% { box-shadow: none; background: transparent; }
}
.sch-table tbody tr.sch-row--glow td {
  animation: cell-glow 1.6s ease-out forwards;
}
.sch-table tbody tr.sch-row--glow td:first-child {
  animation: cell-glow-first 1.6s ease-out forwards;
}
.sch-table tbody tr.sch-row--glow td:last-child {
  animation: cell-glow-last 1.6s ease-out forwards;
}
/* ── 學校名稱欄 ── */
.sch-td-name {
  position: relative;
  background: #fff;
  z-index: 1;
  padding: 8px 14px 8px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 11px;
  width: 340px;
  min-width: 340px;
  border-bottom: 1px solid rgba(0,70,160,0.07);
  border-right: 2px solid rgba(0,90,200,0.10);
  border-left: 3px solid transparent;
  transition: border-left-color 0.14s ease, background 0.14s ease;
}
.sch-table tbody tr:nth-child(odd)  .sch-td-name { background: #fff; }
.sch-table tbody tr:nth-child(even) .sch-td-name { background: #f4f9ff; }
.sch-table tbody tr:hover           .sch-td-name { background: #e6f2ff; border-left-color: var(--sky); }
.sch-td-name span {
  white-space: normal;
}
/* ── 縮圖 ── */
.sch-row-thumb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  box-shadow: 0 2px 8px rgba(0,40,120,0.18);
}
.sch-row-thumb--ph {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ph-color, #aaa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 8px rgba(0,40,120,0.18);
}
/* ── 打勾欄 ── */
.sch-td-check {
  text-align: center;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(0,70,160,0.07);
  border-left: 1px solid rgba(0,70,160,0.05);
}
.sch-table tbody td {
  border-bottom: 1px solid rgba(0,70,160,0.07);
  border-left: 1px solid rgba(0,70,160,0.05);
}
/* ── 類別圓點 ── */
.sch-dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  vertical-align: middle;
}
.sch-dot--lang  { background: #3AAAE0; box-shadow: 0 0 8px rgba(58,170,224,0.65); }
.sch-dot--voc   { background: #6DC238; box-shadow: 0 0 8px rgba(109,194,56,0.65); }
.sch-dot--univ  { background: #9060C8; box-shadow: 0 0 8px rgba(144,96,200,0.65); }
.sch-dot--grad  { background: #D84888; box-shadow: 0 0 8px rgba(216,72,136,0.65); }
.sch-dot--hs    { background: #20A8A0; box-shadow: 0 0 8px rgba(32,168,160,0.65); }
.sch-dot--house { background: #E07820; box-shadow: 0 0 8px rgba(224,120,32,0.65); }
/* ── 格內備註小字 ── */
.sch-note {
  display: block;
  font-size: .75rem;
  color: #555;
  line-height: 1.2;
  margin-top: 5px;
  white-space: nowrap;
}
/* ── 最後一列「陸續增加」 ── */
.sch-tr-more td, p.sch-td-more {
  text-align: center;
  padding: 24px 20px;
  color: rgba(255,255,255,0.85);
  font-size: 1.35rem;
  font-style: italic;
  letter-spacing: 0.08em;
  border: none;
  background: rgba(0,80,200,0.025);
  margin: 0;
  max-width: 1360px;
  margin-inline: auto;
}
p.sch-td-more .ss {
  display: inline;
  position: static;
  vertical-align: middle;
  opacity: 0.85;
}
p.sch-td-more .ss-lg {
  width: 24px;
  height: 24px;
  margin: 0 10px;
}

.sch-ref {
  margin-top: 20px;
  font-size: 1rem;
  letter-spacing: .05rem;
  color: #fff;
  text-align: center;
  font-weight: 500;
}
.sch-ref a {
  color: #fff;
  font-weight: 500;
  text-decoration: underline;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .18);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, .45);
  font-size: .75rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 100px;
  letter-spacing: .04em;
  backdrop-filter: blur(4px);
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  animation: blink 1.4s infinite;
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .25;
  }
}
/* ── 泡泡浮動 CSS 變數與動畫 ── */
@property --float-y {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --sc {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}
@keyframes sc-float-s {
  0%, 100% {
    --float-y: 0px
  }
  50% {
    --float-y: -12px
  }
}
@keyframes sc-float-m {
  0%, 100% {
    --float-y: 0px
  }
  50% {
    --float-y: -20px
  }
}
@keyframes sc-float-l {
  0%, 100% {
    --float-y: 0px
  }
  50% {
    --float-y: -28px
  }
}
/* ── 散落圓圈佈局（滿版） ── */
.schools-bubbles {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: visible;
}
/* ── 分隔帶 ── */
.sch-divider {
  padding: 0;
  margin: 50px 0 0;
}
.sch-divider-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}
.sch-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.35);
}
.sch-divider-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
.sc-b {
  --sc: 1;
  position: absolute;
  width: var(--bs, 150px);
  height: var(--bs, 150px);
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  transform: translate(-50%, -50%) scale(var(--sc)) translateY(var(--float-y, 0px));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  cursor: default;
  transition: transform .18s ease, box-shadow .2s, outline .15s ease;
  will-change: transform;
}
.sc-b-filter,
.sc-b[data-filter] {
  cursor: pointer;
}
.sc-b-filter:hover,
.sc-b[data-filter]:hover {
  --sc: 1.06;
}
.sc-b--active {
  --sc: 1.06;
  box-shadow: 0 0 0 5px rgba(255,255,255,1), 0 0 30px 12px rgba(255,255,255,0.9), 0 0 70px 28px rgba(91,184,232,0.75);
}
/* 藍底配色：白圓 / 金圓 / 深藍圓 */
.sc-b--sky {
  background: white;
  box-shadow: 0 6px 28px rgba(0, 60, 140, .2);
}
.sc-b--gold {
  background: #fdf00e;
  box-shadow: 0 6px 28px rgba(0, 30, 80, .2);
}
.sc-b--pale {
  background: white;
  box-shadow: 0 6px 28px rgba(0, 60, 140, .15);
}
.sc-b--navy {
  background: #0A1E3C;
  box-shadow: 0 6px 28px rgba(0, 0, 30, .3);
}
.sc-b:hover {
  box-shadow: 0 12px 40px rgba(0, 60, 140, .35);
}
.sc-b--sky .sc-b-text {
  color: #00a0e6;
}
.sc-b--gold .sc-b-text {
  color: #00a0e6;
}
.sc-b--pale .sc-b-text {
  color: #00a0e6;
}
.sc-b--navy .sc-b-text {
  color: white;
}
/* 14 顆泡泡座標（對應設計稿） */
.sc-b:nth-child(1) {
  --cx: 4%;
  --cy: 43%;
} /* 頂級國立大學，左側出血 */
.sc-b:nth-child(2) {
  --cx: 23%;
  --cy: 33%;
} /* 常春藤大，左上 */
.sc-b:nth-child(3) {
  --cx: 18%;
  --cy: 57%;
} /* 升學型語言，左中 */
.sc-b:nth-child(4) {
  --cx: 40%;
  --cy: 15%;
} /* 寄宿家庭，上中 */
.sc-b:nth-child(5) {
  --cx: 49%;
  --cy: 47%;
} /* 畢業即就業，中央大 */
.sc-b:nth-child(6) {
  --cx: 66%;
  --cy: 23%;
} /* 聲優動漫，右上 */
.sc-b:nth-child(7) {
  --cx: 96%;
  --cy: 22%;
} /* 製菓料理，右邊出血 */
.sc-b:nth-child(8) {
  --cx: 82%;
  --cy: 47%;
} /* 英語授課，右中大 */
.sc-b:nth-child(9) {
  --cx: 60%;
  --cy: 70%;
} /* 日本生活，中右下 */
.sc-b:nth-child(10) {
  --cx: 7%;
  --cy: 78%;
} /* 房屋租賃，左下出血 */
.sc-b:nth-child(11) {
  --cx: 26%;
  --cy: 88%;
} /* 藝術升學，左下 */
.sc-b:nth-child(12) {
  --cx: 50%;
  --cy: 92%;
} /* 會話專業，下方出血 */
.sc-b:nth-child(13) {
  --cx: 74%;
  --cy: 84%;
} /* 求職超強，右下 */
.sc-b:nth-child(14) {
  --cx: 93%;
  --cy: 84%;
} /* 建築設計，右下出血 */
/* rv scroll reveal 與 absolute 定位共存 */
.sc-b.rv {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(24px) scale(var(--sc));
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1);
}
.sc-b.rv.on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(var(--sc)) translateY(var(--float-y, 0px));
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1), --sc .18s cubic-bezier(.25, .46, .45, .94);
}
/* 每顆泡泡的浮動時序（duration + 負 delay = 立即錯開進場）*/
.sc-b:nth-child(1).rv.on {
  animation: sc-float-s 3.8s ease-in-out -0.4s infinite;
}
.sc-b:nth-child(2).rv.on {
  animation: sc-float-l 5.5s ease-in-out -2.8s infinite;
}
.sc-b:nth-child(3).rv.on {
  animation: sc-float-l 4.2s ease-in-out -1.6s infinite;
}
.sc-b:nth-child(4).rv.on {
  animation: sc-float-m 6.0s ease-in-out -3.5s infinite;
}
.sc-b:nth-child(5).rv.on {
  animation: sc-float-s 3.5s ease-in-out -1.0s infinite;
}
.sc-b:nth-child(6).rv.on {
  animation: sc-float-m 5.0s ease-in-out -0.7s infinite;
}
.sc-b:nth-child(7).rv.on {
  animation: sc-float-s 4.7s ease-in-out -2.3s infinite;
}
.sc-b:nth-child(8).rv.on {
  animation: sc-float-m 3.9s ease-in-out -1.5s infinite;
}
.sc-b:nth-child(9).rv.on {
  animation: sc-float-l 5.3s ease-in-out -4.0s infinite;
}
.sc-b:nth-child(10).rv.on {
  animation: sc-float-m 4.4s ease-in-out -0.9s infinite;
}
.sc-b:nth-child(11).rv.on {
  animation: sc-float-l 6.2s ease-in-out -5.0s infinite;
}
.sc-b:nth-child(12).rv.on {
  animation: sc-float-s 3.6s ease-in-out -2.7s infinite;
}
.sc-b:nth-child(13).rv.on {
  animation: sc-float-m 5.8s ease-in-out -1.1s infinite;
}
.sc-b:nth-child(14).rv.on {
  animation: sc-float-s 4.1s ease-in-out -3.3s infinite;
}
.sc-b.sb-active {
  z-index: 10;
}
.sc-b-text {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.6;
}
.sc-b:nth-child(3) .sc-b-text, .sc-b:nth-child(11) .sc-b-text {
  font-size: 1.3rem;
}
/* tablet */
/* 手機: flex wrap */
/* ═══════════════════════════════════════
     HORIZONTAL PHOTO STRIP — 一直走的感覺
  ═══════════════════════════════════════ */
.strip-section {
  background: var(--sky-pale);
  padding: 64px 0 30px;
  overflow-x: hidden;
  overflow-y: visible;
}
.strip-label {
  text-align: center;
  font-family: var(--font-en);
  font-size: .83rem;
  font-weight: 600;
  letter-spacing: .15rem;
  color: var(--sky);
  margin-bottom: 35px;
  margin-top: .1rem;
}
.strip-stars {
  position: relative;
  width: 100%;
  pointer-events: none;
}
.strip-stars--top {
  height: 64px;
  margin-bottom: 4px;
}
.strip-stars--bottom {
  height: 64px;
  margin-top: 25px;
}
.strip-star {
  display: block;
  position: absolute;
  opacity: .9;
  left: 50%;
  transform: translateX(-50%);
  fill: var(--sky);
  color: var(--sky);
}
.ss-lg {
  width: 34px;
  height: 34px;
}
.ss-md {
  width: 18px;
  height: 18px;
}
.ss-sm {
  width: 10px;
  height: 10px;
}
/* 上方3顆：大左下、小右上、中右中 */
.strip-stars--top .strip-star:nth-child(1) {
  left: calc(50% - 36px);
  top: 0px;
}
.strip-stars--top .strip-star:nth-child(2) {
  left: calc(50% + 28px);
  top: -24px;
}
.strip-stars--top .strip-star:nth-child(3) {
  left: calc(50% + 8px);
  bottom: 5px;
  width: 19px;
  height: 19px;
}
/* 下方2顆：中左上、小右下 */
.strip-stars--bottom .strip-star:nth-child(1) {
  left: calc(50% - 15px);
  top: 26px;
  width: 16px;
  height: 16px;
}
.strip-stars--bottom .strip-star:nth-child(2) {
  left: calc(50% + 16px);
  top: -4px;
  width: 24px;
  height: 24px;
}
.strip-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: stripRun 32s linear infinite;
}
.strip-track:hover {
  animation-play-state: paused;
}
.strip-item {
  flex-shrink: 0;
  width: 360px;
  height: 260px;
  overflow: visible;
  position: relative;
}
.strip-img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
}
.strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.strip-item:hover img {
  transform: scale(1.05);
}
/* ── 圓形對話泡泡（右上、部分壓在圖片上） ── */
.strip-item[data-bubble]:hover {
  z-index: 20;
}
.strip-item[data-bubble]::before {
  content: attr(data-bubble);
  position: absolute;
  bottom: calc(100% - 120px);
  left: 72%;
  transform: translateX(-50%) translateY(12px);
  width: 134px;
  height: 134px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  color: var(--sky-mid);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.55;
  white-space: normal;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
  box-shadow:
    0 0 0 2.5px rgba(255, 255, 255, .9), 0 6px 24px rgba(255, 255, 255, .3);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  z-index: 10;
}
.strip-item[data-bubble]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  animation: bubbleGlow 2.2s ease-in-out infinite;
}
@keyframes bubbleGlow {
  0%, 100% {
    box-shadow:
      0 6px 28px rgba(255, 255, 255, .25);
  }
  50% {
    box-shadow:
      0 8px 40px rgba(255, 255, 255, .55), 0 0 24px 8px rgba(255, 255, 255, .2);
  }
}
@keyframes stripRun {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* ═══════════════════════════════════════
     STORIES
  ═══════════════════════════════════════ */
.stories-section {
  background: var(--white);
  padding: 0;
  overflow: hidden;
}
/* ── 標題 ── */
.stories-head {
  text-align: center;
  padding: 0 40px;
  margin-bottom: 30px;
}
.stories-head-img {
  display: block;
  width: clamp(280px, 50vw, 1000px);
  height: auto;
  margin: 0 auto;
}
.stories-title-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.stories-title {
  font-family: var(--font-ja);
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight: 900;
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
}
.st-script {
  font-family: 'Caveat', cursive;
  font-size: 1.2em;
  font-weight: 700;
  color: var(--sky);
}
.st-spark {
  font-size: 1.2rem;
  color: var(--sky);
  line-height: 1;
}
.st-spark small {
  font-size: .55em;
  display: block;
}
.st-spark--l {
  margin-top: -.4em;
}
.st-spark--r small {
  margin-top: .2em;
}
.stories-dash-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
  color: var(--sky);
}
.stories-dash-line {
  flex: 1;
  height: 0;
  border-top: 2px dashed rgba(59, 174, 245, .4);
}
.stories-plane {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
/* ── 照片牆 ── */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: 420px;
  gap: 8px;
}
.story-card:nth-child(1) {
  grid-column: 1 / 4;
}
.story-card:nth-child(2) {
  grid-column: 4 / 8;
}
.story-card:nth-child(3) {
  grid-column: 8 / 11;
}
.story-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.story-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 12, 36, .9) 0%, rgba(4, 12, 36, .4) 40%, transparent 100%);
  opacity: .7;
  transition: opacity .4s ease;
  z-index: 1;
}
.story-card:hover::after {
  opacity: .9;
}
.story-img {
  width: 100%;
  height: 100%;
}
.story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s ease;
}
.story-card:hover .story-img img {
  transform: scale(1.07);
}
.ss-lg {
  animation: ssRotate 4s linear infinite;
  animation-play-state: paused;
}
.ss-sm {
  animation: ssRotate 3s linear infinite reverse;
  animation-play-state: paused;
}
.ss-xs {
  animation: ssRotate 5s linear infinite;
  animation-play-state: paused;
}
.story-card:hover .ss-lg, .story-card:hover .ss-sm, .story-card:hover .ss-xs {
  animation-play-state: running;
}
@keyframes ssRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.story-float-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.story-float-stars svg {
  position: absolute;
  opacity: 0;
  height: auto;
}
.sf1 {
  width: 18px;
  left: 22%;
  bottom: 28%;
}
.sf2 {
  width: 10px;
  left: 32%;
  bottom: 22%;
}
.sf3 {
  width: 22px;
  left: 72%;
  bottom: 30%;
}
.sf4 {
  width: 8px;
  left: 55%;
  bottom: 35%;
}
.sf5 {
  width: 14px;
  left: 85%;
  bottom: 25%;
}
@keyframes ssFloat {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(0deg) scale(0.5);
  }
  12% {
    opacity: 1;
  }
  75% {
    opacity: .5;
  }
  100% {
    opacity: 0;
    transform: translateY(-130px) rotate(40deg) scale(1.1);
  }
}
.story-card:hover .sf1 {
  animation: ssFloat 1.3s ease-out infinite;
}
.story-card:hover .sf2 {
  animation: ssFloat 1.0s ease-out .3s infinite;
}
.story-card:hover .sf3 {
  animation: ssFloat 1.5s ease-out .15s infinite;
}
.story-card:hover .sf4 {
  animation: ssFloat 0.9s ease-out .45s infinite;
}
.story-card:hover .sf5 {
  animation: ssFloat 1.2s ease-out .6s infinite;
}
.story-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 40px 35px;
  z-index: 2;
}
.story-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.story-type-pill {
  display: inline-block;
  background: var(--sky);
  color: white;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 100px;
}
.story-sparks {
  position: relative;
  width: 36px;
  height: 30px;
  flex-shrink: 0;
  opacity: .9;
}
.ss {
  display: block;
  position: absolute;
}
.ss-lg {
  width: 32px;
  height: auto;
  left: -12px;
  top: -24px;
}
.ss-sm {
  width: 12px;
  height: auto;
  right: -22px;
  top: -12px;
}
.ss-xs {
  width: 17px;
  height: auto;
  right: 0px;
  bottom: 6px;
}
.story-name {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.25;
  color: white;
  margin-bottom: 0;
  letter-spacing: .08rem;
}
.story-desc {
  font-size: .95rem;
  color: rgba(255, 255, 255, .8);
  line-height: 1.6;
  margin-top: 6px;
  max-height: 120px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  max-width: 400px;
}
/* ── 底部 CTA ── */
.stories-bottom {
  background: white;
  padding: 72px 24px 16px;
  text-align: center;
}
.sb-sparkles {
  position: relative;
  width: 80px;
  height: 60px;
  margin: 0 auto 16px;
}
.sb-sp {
  position: absolute;
  display: block;
  height: auto;
}
.sb-sp1 {
  width: 38px;
  left: 0;
  top: 0px;
}
.sb-sp2 {
  width: 14px;
  right: -10px;
  top: -24px;
}
.sb-sp3 {
  width: 24px;
  right: 4px;
  bottom: 0;
}
.sb-trail {
  text-align: center;
  font-family: var(--font-en);
  font-size: .83rem;
  font-weight: 600;
  letter-spacing: .2rem;
  color: var(--sky);
  margin-bottom: 12px;
}
.sb-title {
  font-family: var(--font-ja);
  font-size: clamp(1.15rem, 3.3vw, 1.6rem);
  font-weight: 500;
  color: var(--sky);
  margin: 0 0 5px;
  letter-spacing: .5rem;
}
.sb-curl {
  display: block;
  width: clamp(50px, 5.8vw, 90px);
  height: auto;
  margin: 0 auto;
}
/* ═══════════════════════════════════════
     COUNTDOWN
  ═══════════════════════════════════════ */
.countdown-section {
  background: var(--sky-pale);
  padding: 80px 0 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.countdown-inner {
  position: relative;
  z-index: 2;
  padding: 0 24px;
}
/* 標題 */
.cd-head {
  text-align: center;
  margin-bottom: 36px;
}
.cd-head-img {
  display: block;
  width: clamp(220px, 31vw, 480px);
  height: auto;
  margin: 0 auto;
  transform: translateX(-28px);
}
.cd-badge {
  display: inline-block;
  border: 1.5px solid var(--sky);
  color: var(--sky-mid);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 5px 18px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.cd-script {
  display: block;
  font-family: 'Caveat', 'GenJyuuGothic', cursive;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 700;
  color: var(--sky);
  line-height: 1.15;
  margin-bottom: 10px;
}
.cd-sub {
  font-family: var(--font-ja);
  font-size: clamp(1.4rem, 3.5vw, 2.25rem);
  font-weight: 900;
  color: var(--navy);
  display: block;
  transform: translateX(30px);
  margin-top: -1rem;
}
/* 倒數 */
.cd-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}
.cd-unit {
  text-align: center;
}
.cd-n {
  font-family: var(--font-en);
  font-size: clamp(3.5rem, 10vw, 8rem);
  font-weight: 900;
  color: var(--sky);
  display: block;
  line-height: 1;
}
.cd-l {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 8px;
}
.cd-sep {
  font-family: var(--font-en);
  font-size: clamp(3.5rem, 10vw, 8rem);
  font-weight: 900;
  color: var(--sky);
  ;
  line-height: 1;
  align-self: center;
  transform: translateY(-16px);
  opacity: .2;
}
/* CTA */
.cd-cta {
  margin-top: 45px;
}
.cd-cta .btn-yellow {
  font-size: 1.6rem;
  padding: 20px 70px 20px 170px;
}
.cd-cta .btn-chara {
  height: 152px;
  left: 70px;
  bottom: -61px;
}
.cd-cta .bs1 {
  left: 152px;
  top: 2px;
  width: 25px;
  height: 25px;
}
.cd-cta .bs2 {
  left: 72px;
  top: 43px;
  width: 9px;
  height: 9px;
}
.cd-cta .bs3 {
  left: 50px;
  top: 20px;
  width: 20px;
  height: 20px;
}
.cd-btn {
  display: inline-flex;
  align-items: center;
  position: relative;
  background: #fdf00e;
  border-radius: 100px;
  padding: 16px 40px 16px 64px;
  font-family: var(--font-ja);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--sky-deep);
  letter-spacing: .04em;
  box-shadow: 0 6px 28px rgba(253, 240, 14, .55);
  transition: transform .2s, box-shadow .2s;
  overflow: visible;
}
.cd-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(253, 240, 14, .7);
}
/* 角色圖 */
.cd-chara {
  position: absolute;
  left: -20px;
  bottom: 0;
  height: 110px;
  width: auto;
  object-fit: contain;
  pointer-events: none;
}
.cd-msg {
  margin-top: 20px;
  font-size: .9rem;
  color: var(--text-light);
  letter-spacing: .02em;
}
.cd-bye {
  display: block;
  width: 100vw;
  height: auto;
  margin-top: 80px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
/* ═══════════════════════════════════════
     VENUE
  ═══════════════════════════════════════ */
.venue-section {
  background: var(--navy);
  padding: 90px 0 90px;
  position: relative;
  overflow: hidden;
}
/* 背景照片 */
.venue-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(../images/landing.avif) center / cover no-repeat;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
/* 深藍遮罩 */
.venue-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 56, 80, 0.75) 0%, rgba(0, 56, 80, 0.6) 60%, rgba(0, 56, 80, 0.6) 100%);
  pointer-events: none;
  z-index: 1;
}
/* 上排：兩張圖 */
.venue-top {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  margin: 0 auto 40px;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.vn-head-img {
  display: block;
  width: clamp(200px, 38vw, 550px);
  height: auto;
  flex-shrink: 1;
}
.vn-fly3 {
  display: block;
  width: clamp(200px, 46vw, 680px);
  height: auto;
  flex-shrink: 0;
  left: -8rem;
  top: -1rem;
  position: relative;
  z-index: 9;
}
/* 下排：交通 + 地圖 */
.venue-inner {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 25px;
  align-items: start;
}
.venue-left {
  color: white;
}
.vn-transport-block {
  margin-bottom: 24px;
}
.vn-transport-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fdf00e;
  color: var(--sky);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.vn-badge-icon {
  width: 22px;
  height: 22px;
}
.vn-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vn-list li {
  font-size: 1rem;
  color: rgba(255, 255, 255, .82);
  line-height: 1.6;
  padding-left: 14px;
  position: relative;
}
.vn-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #fdf00e;
}
.vn-list li strong {
  color: white;
}
.vn-car-note {
  font-size: 1rem;
  color: rgba(255, 255, 255, .75);
  line-height: 1.65;
  margin-bottom: 10px;
}
.venue-map-card {
  background: white;
  border-radius: 30px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .35);
  padding: 1.2rem 1rem;
}
.venue-map-card img {
  width: 100%;
  height: auto;
  display: block;
}
/* RWD */
/* ═══════════════════════════════════════
     CTA / REGISTER
  ═══════════════════════════════════════ */
.cta-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-bg {
  position: absolute;
  inset: 0;
}
.cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* giant ghost text — 錯視 layer */
.cta-ghost {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.cta-ghost span {
  font-family: var(--font-en);
  font-size: clamp(12rem, 32vw, 36rem);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(92, 200, 255, .06);
  letter-spacing: -.05em;
}
.cta-content {
  position: relative;
  z-index: 2;
  padding: 100px 40px;
}
.cta-content .sec-label {
  color: rgba(255, 255, 255, .45);
  display: block;
  margin-bottom: 14px;
}
.cta-title {
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 18px;
}
.cta-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.85;
  max-width: 480px;
  margin: 0 auto 48px;
}
.cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-note {
  margin-top: 20px;
  font-size: .75rem;
  color: rgba(255, 255, 255, .3);
}
/* ── 報名表單 layout ── */
.reg-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.7rem 0 10rem;
  display: grid;
  grid-template-columns: 1.3fr 1.55fr;
  gap: 0px;
  align-items: start;
}
.reg-left-img {
  display: block;
  width: clamp(240px, 39vw, 580px);
  height: auto;
  margin-left: -2rem;
  margin-top: .7rem;
}
/* 活動徽章 */
.reg-event-badge {
  display: inline-block;
  background: var(--sky);
  color: white;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: 22px;
}
/* 手寫體標題列 */
.reg-script-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.reg-script {
  font-family: 'Caveat', var(--font-ja);
  font-size: clamp(3.2rem, 7vw, 5.2rem);
  font-weight: 700;
  color: white;
  line-height: 1;
}
.reg-spark-icon {
  width: 30px;
  height: 30px;
  color: #fdf00e;
  flex-shrink: 0;
}
.reg-spark-sm {
  width: 18px;
  height: 18px;
}
/* 分隔線 */
.reg-hl {
  width: 56px;
  height: 2px;
  background: rgba(255, 255, 255, .38);
  margin-bottom: 22px;
}
/* 標題強調 */
.cta-title-em {
  font-size: 1.1em;
}
/* 漂浮裝飾圓圈 */
.reg-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.rd-c {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .12);
  animation: rdFloat 8s ease-in-out infinite;
}
.rd-c1 {
  width: 320px;
  height: 320px;
  top: -80px;
  left: -60px;
  animation-duration: 9s;
}
.rd-c2 {
  width: 180px;
  height: 180px;
  top: 40%;
  right: 8%;
  animation-duration: 11s;
  animation-delay: 2s;
  background: rgba(255, 255, 255, .04);
}
.rd-c3 {
  width: 100px;
  height: 100px;
  bottom: 15%;
  left: 20%;
  animation-duration: 7s;
  animation-delay: 1s;
}
.rd-c4 {
  width: 240px;
  height: 240px;
  bottom: -60px;
  right: 35%;
  animation-duration: 13s;
  animation-delay: 4s;
}
@keyframes rdFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-24px) rotate(8deg);
  }
}
/* ── 表單卡片 ── */
.reg-form {
  background: rgba(255, 255, 255, .98);
  border-radius: 24px;
  padding: 40px 42px 50px;
  box-shadow: 0 28px 90px rgba(4, 18, 50, .45);
  position: relative;
  overflow: visible;
  border: 1px solid rgba(59, 174, 245, .15);
  /* 保留圓角視覺效果（讓 border-radius 對 bg 生效） */
  -webkit-mask-image: radial-gradient(white, white);
  mask-image: radial-gradient(white, white);
}
/* 頂部天空藍漸層條 */
/* Strategy card 星星動畫 */
.sc-star {
  pointer-events: none;
  z-index: 9999;
  overflow: visible;
  will-change: transform, opacity;
  animation: sc-star-pop 1s ease-out forwards;
  transform-origin: center;
}
@keyframes sc-star-pop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(0px) rotate(0deg);
  }
  15% {
    opacity: 1;
    transform: scale(1.2) translateY(-12px) rotate(8deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.6) translateY(-70px) rotate(30deg);
  }
}
.rf-title {
  font-family: var(--font-ja);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 8px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--border);
}
.rf-subtitle {
  font-size: .88rem;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 24px;
}
.rf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.rf-field label {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--sky-deep);
  text-transform: none;
}
.rf-req {
  color: #e74c3c;
}
.rf-opt {
  color: var(--text-light);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.rf-field input[type="text"], .rf-field input[type="tel"], .rf-field input[type="email"], .rf-field input[type="date"], .rf-field input[type="number"] {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid rgba(59, 174, 245, .3);
  border-radius: 10px;
  font-size: 1rem;
  color: var(--text);
  background: var(--sky-bg);
  outline: none;
  font-family: var(--font-ja);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.rf-field input:focus {
  border-color: var(--sky);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59, 174, 245, .18);
}
/* 出生年月日：年/月/日 三下拉（套用與輸入框一致的外觀、三欄等寬）*/
.rf-dob-row {
  display: flex;
  gap: 8px;
}
.rf-dob-row select {
  -webkit-appearance: none;   /* 關掉原生外觀，讓 Safari 也吃 padding、與輸入框等高 */
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  padding: 13px 28px 13px 12px;   /* 右側留空給自畫箭頭 */
  border: 1.5px solid rgba(59, 174, 245, .3);
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  background-color: var(--sky-bg);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A6480' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px;
  outline: none;
  font-family: var(--font-ja);
  cursor: pointer;
}
.rf-dob-row select:focus {
  border-color: var(--sky);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59, 174, 245, .18);
}
/* 橫排兩欄 */
.rf-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: flex-end;
}
.rf-row .rf-field {
  margin-bottom: 0;
  flex: 1;
}
/* 性別 radio */
.rf-radios {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rf-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-mid);
  transition: border-color .2s, background .2s, color .2s;
}
.rf-radio input {
  display: none;
}
.rf-radio:has(input:checked) {
  border-color: var(--sky);
  background: var(--sky-pale);
  color: var(--sky-mid);
}
/* OTP */
.rf-row--phone .rf-field:first-child {
  flex: 3;
}
.rf-phone-row {
  display: flex;
  gap: 8px;
}
/* 國碼 + 號碼合併成單一框 */
.rf-phone-combo {
  flex: 1;
  display: flex;
  min-width: 0;
  background: var(--sky-bg);
  border: 1.5px solid rgba(59, 174, 245, .3);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.rf-phone-combo:focus-within {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(59, 174, 245, .18);
}
.rf-phone-combo input[type="tel"] {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.rf-phone-combo input[type="tel"]:focus {
  border: none;
  box-shadow: none;
  background: transparent;
}
.rf-phone-row .rf-btn-otp {
  flex-shrink: 0;
}
.rf-country-code {
  flex-shrink: 0;
  max-width: 130px;
  padding: 11px 8px;
  border: none;
  border-right: 1.5px solid rgba(59, 174, 245, .25);
  border-radius: 0;
  background: transparent;
  color: #333;
  font-size: .9rem;
  font-family: var(--font-ja);
  cursor: pointer;
  appearance: auto;
  outline: none;
  transition: border-color .2s;
}
.rf-otp-row {
  display: flex;
  gap: 8px;
}
.rf-otp-row input {
  flex: 1;
}
.rf-btn-otp {
  padding: 11px 13px;
  border: 1.5px solid var(--sky);
  border-radius: 10px;
  background: transparent;
  color: var(--sky-mid);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-ja);
  transition: background .2s, color .2s;
}
.rf-btn-otp:hover {
  background: var(--sky-pale);
}
.rf-btn-otp:disabled {
  opacity: .45;
  cursor: not-allowed;
}
/* 收不到驗證碼？ 標籤列 + 按鈕 */
.rf-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rf-otp-help {
  border: 1px solid #f0c4c4;
  background: #fcebeb;
  color: #d05656;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-ja);
  transition: background .2s, color .2s, border-color .2s;
  position: relative;
  top:-2px
}
.rf-otp-help:hover {
  background: #f7dcdc;
  border-color: #e3a9a9;
  color: #b84545;
}
/* 收不到驗證碼 Modal 內容 */
.pm-box--otp {
  max-width: 480px;
  padding: 40px 36px 55px;
}
.pm-box--otp .pm-body p {
  margin-bottom: 0;
}
.pm-box--otp .rf-field label {
  margin-bottom: 4px;
}
.rf-otp-email-actions {
  text-align: center;
  margin-top: 26px;
  margin-bottom: 1.1rem;
}
.rf-otp-email-send {
  padding: 12px 38px;
  border: none;
  border-radius: 100px;
  background: #fdf00e;
  color: #00a0e8;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--font-ja);
  transition: transform .15s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(255, 220, 0, .45);
}
.rf-otp-email-send:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 28px rgba(255, 220, 0, .6);
}
.rf-otp-email-send:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.rf-otp-email-msg {
  font-size: .85rem;
  font-weight: 600;
  margin: 8px 0 0;
}
.rf-otp-email-msg.is-error {
  color: #d05656;
}
.rf-otp-email-msg.is-ok {
  color: #1a9d57;
}
/* 驗證碼 */
.rf-captcha-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.rf-captcha-row input {
  flex: 1;
}
.rf-captcha-img {
  flex-shrink: 0;
  align-self: center;
  height: 50px;
  width: auto;
  border: 1.5px solid rgba(59, 174, 245, .3);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: opacity .2s;
}
.rf-captcha-img:hover {
  opacity: .85;
}
.rf-captcha-row input {
  min-width: 0;
}
.rf-captcha-refresh {
  flex-shrink: 0;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(59, 174, 245, .3);
  border-radius: 10px;
  background: var(--sky-bg);
  color: var(--sky-mid);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.rf-captcha-refresh:hover {
  background: var(--sky-pale);
  border-color: var(--sky);
  color: var(--sky);
}
.rf-captcha-refresh svg {
  transition: transform .2s ease;
}
.rf-captcha-refresh.is-spinning svg {
  animation: captchaSpin .55s cubic-bezier(.4, 0, .2, 1);
}
@keyframes captchaSpin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
.rf-captcha-err {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  vertical-align: middle;
  font-size: .78rem;
  font-weight: 600;
  color: rgb(208, 86, 86);
}
.rf-captcha-err[hidden] { display: none !important; }
.rf-captcha-err::before {
  content: "⚠";
  font-size: .9rem;
}
/* Checkbox */
.rf-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 1.02rem;
  color: var(--text-mid);
  line-height: 1.55;
  margin-bottom: 35px;
}
.rf-check input {
  display: none;
}
.rf-check-box {
  min-width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: border-color .2s, background .2s;
}
.rf-check:has(input:checked) .rf-check-box {
  border-color: var(--sky);
  background: var(--sky);
}
.rf-check:has(input:checked) .rf-check-box::after {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg) translate(-1px, -1px);
  display: block;
}
.rf-divider {
  height: 1px;
  background: var(--border);
  margin: 36px 0 18px;
}
/* 送出按鈕 */
.rf-submit {
  border: none;
  cursor: pointer;
  font-family: var(--font-ja);
  margin: 28px auto 0;
  display: flex;
  font-size: 1.6rem;
  padding: 20px 70px 20px 170px;
  overflow: visible;
}
.rf-submit .btn-chara {
  height: 152px;
  left: 70px;
  bottom: -61px;
}
.rf-submit .bs1 {
  left: 152px;
  top: 2px;
  width: 25px;
  height: 25px;
}
.rf-submit .bs2 {
  left: 72px;
  top: 43px;
  width: 9px;
  height: 9px;
}
.rf-submit .bs3 {
  left: 50px;
  top: 20px;
  width: 20px;
  height: 20px;
}
.rf-submit-star {
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
  display: inline-block;
}
.rf-footnote {
  margin-top: 13px;
  text-align: center;
  font-size: .9rem;
  color: var(--text-light);
  line-height: 1.6;
}
/* ── 報名成功 Modal ── */
.sm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(10, 30, 60, .6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: smOverlayIn .25s ease both;
}
.sm-overlay[hidden] {
  display: none !important;
}
@keyframes smOverlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.sm-box {
  position: relative;
  background: #fff;
  border-radius: 20px;
  max-width: 680px;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 32px 80px rgba(0, 20, 60, .28), 0 4px 16px rgba(0, 20, 60, .12);
  animation: smBoxIn .38s cubic-bezier(.34, 1.15, .64, 1) both;
  max-height: calc(100dvh - 48px);
}
#passOrderModal .sm-box {
  overflow-y: hidden;
}
.sm-box::-webkit-scrollbar { width: 8px; }
.sm-box::-webkit-scrollbar-track { background: #dff0fb; border-radius: 10px; }
.sm-box::-webkit-scrollbar-thumb { background: #5BBDE0; border-radius: 10px; border: 2px solid #dff0fb; }
.sm-box::-webkit-scrollbar-thumb:hover { background: var(--sky); }
.sm-scroll-hint {
  position: sticky;
  bottom: 0;
  height: 60px;
  margin-top: -60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 65%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  pointer-events: none;
  flex-shrink: 0;
  z-index: 2;
  color: var(--sky);
  transition: opacity .3s;
}
.sm-scroll-hint.is-gone { opacity: 0; }
.sm-scroll-hint svg { animation: scrollBounce 1.1s ease-in-out infinite; filter: drop-shadow(0 1px 4px rgba(0,160,232,.4)); }
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: .8; }
  50%       { transform: translateY(6px); opacity: 1; }
}
@keyframes smBoxIn {
  from { opacity: 0; transform: translateY(28px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.sm-overlay.is-closing {
  animation: smOverlayOut .25s ease forwards;
}
.sm-overlay.is-closing .sm-box {
  animation: smBoxOut .25s cubic-bezier(.4, 0, .6, 1) forwards;
}
@keyframes smOverlayOut {
  to { opacity: 0; }
}
@keyframes smBoxOut {
  to { opacity: 0; transform: translateY(16px) scale(.96); }
}
/* ── 付款失敗 Modal 樣式 ── */
.sm-header--fail {
  background: linear-gradient(160deg, #e84040 0%, #c0392b 100%);
}
.pf-box { overflow-y: hidden; }
.pf-suggestion {
  background: #fff5f5;
  border-radius: 8px;
  padding: 14px 20px;
  margin: 4px 0 16px;
  text-align: left;
  width: 90%;
  max-width: 450px;
}
.pf-suggestion-title {
  font-weight: 700;
  color: #e74c3c;
  margin-bottom: 8px;
  font-size: 1.1rem;
}
.pf-suggestion-list {
  padding-left: 18px;
  color: #666;
  font-size: .95rem;
  line-height: 2;
  margin: 0;
}
.pf-cancel-btn {
  background: none;
  border: 1.5px solid #ddd;
  color: #999;
  border-radius: 50px;
  padding: 10px 32px;
  font-size: .9rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.pf-cancel-btn:hover { border-color: #aaa; color: #666; }

/* 關閉按鈕 */
.sm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, .25);
  border: none;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  z-index: 2;
}
.sm-close:hover {
  background: rgba(255, 255, 255, .4);
}
/* Header 漸層區 */
.sm-header {
  background: url('../images/bg-star.jpg') center/100% auto no-repeat;
  background-position: center -280px;
  padding: 30px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.sm-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.sm-check {
  display: flex;
  align-items: center;
  line-height: 0;
}
.sm-check svg {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .15));
}
.sm-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1;
  letter-spacing: .04em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.sm-reg-label {
  font-size: .82rem;
  color: rgba(255, 255, 255, .8);
  margin: 4px 0 0;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sm-reg-badge {
  background: #fff;
  border-radius: 10px;
  padding: 10px 28px;
  margin-top: 4px;
  margin-bottom: 4px;
}
/* 加購 modal 的輸入框閃爍光暈 */
#upsellModal .sm-reg-badge {
  animation: regBadgePulse 2s ease-in-out infinite;
}
@keyframes regBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,160,232,0); }
  50%       { box-shadow: 0 0 0 6px rgba(0,160,232,.25); }
}
.sm-reg-badge span {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sky);
  letter-spacing: .05rem;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-en);
}
/* Body 區 */
.sm-body {
  padding: 20px 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.sm-msg {
  color: var(--text);
  line-height: 1.7;
  font-size: 1rem;
  margin: 0;
  max-width: 550px;
}
/* LINE 框 */
.sm-line-box {
  width: auto;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 14px;
  padding: 18px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  margin-top: 6px;
}
.sm-line-label {
  font-size: .8rem;
  color: #16a34a;
  font-weight: 600;
  margin: 0;
  letter-spacing: .02em;
}
.sm-qr-wrap {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
}
.sm-qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  border-radius: 8px;
  padding: 6px;
  transition: background .15s, transform .15s;
}
.sm-qr-item:hover {
  transform: translateY(-2px);
}
.sm-qr-item img {
  width: 130px;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}
.sm-qr-item p {
  font-size: .76rem;
  color: #16a34a;
  font-weight: 600;
  margin: 0;
}
.sm-line-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #06c755;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  padding: 11px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: background .2s, transform .2s;
  box-shadow: 0 4px 12px rgba(6, 199, 85, .35);
}
.sm-line-btn:hover {
  background: #05b34b;
  transform: translateY(-1px);
}
/* Upsell 底部區塊 */
.sm-upsell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 28px 30px;
  width: 100%;
  overflow: visible;
}
#successModal .pass-cta-btn {
  font-size: 1.35rem;
}
.sm-upsell-label {
  color: var(--sky);
  font-size: .85rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: .02em;
  margin-bottom: 1rem;
}
.sm-pass-btn {
  display: inline-block;
  padding: 13px 36px;
  background: #fdf00e;
  color: #0077c8;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(253, 240, 14, .45);
  transition: background .2s, transform .2s, box-shadow .2s;
}
/* ── 加購快速通關券 Modal ── */
.up-box {
  max-width: 680px;
}

/* upsell modal 報名編號可編輯輸入框 */
.up-reg-input-wrap {
  display: flex;
  align-items: center;
  width: auto;
}
.up-reg-prefix {
  font-size: 2.2rem;
  font-weight: 700;
  color: #0077c8;
  letter-spacing: 0;
  font-family: var(--font-en);
  line-height: 1;
  user-select: none;
}
.up-reg-input {
  width: 9ch;
  min-width: 9ch;
  max-width: 9ch;
  padding: 0 0 0 6px;
  text-align: left;
  background: transparent;
  border: none;
  outline: none;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sky);
  letter-spacing: .05rem;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-en);
  caret-color: var(--sky);
}
.up-reg-input::-webkit-contacts-auto-fill-button,
.up-reg-input::-webkit-credentials-auto-fill-button,
.up-reg-input::-ms-clear,
.up-reg-input::-ms-reveal {
  display: none !important;
  visibility: hidden;
}
.up-reg-input::placeholder {
  color: rgba(0,119,200,.35);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .05em;
  font-family: inherit;
}
.up-reg-input--err {
  color: #e53e3e !important;
  animation: upShake .35s ease;
}
@keyframes upShake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}
.up-reg-hint {
  font-size: .82rem;
  color: rgba(255,255,255,.75);
  margin: 4px 0 0;
  text-align: center;
  animation: smOverlayIn .2s ease both;
}
.up-reg-hint-link {
  color: var(--sky) !important;
  font-weight: 700;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  cursor: pointer;
}
.up-reg-hint-link:hover { color: #0080c0 !important; }

/* upsell modal 內的副標 */
.up-subtitle {
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  margin: 0;
  letter-spacing: .04em;
}

/* benefit-grid / price-list 在 modal sm-body 裡的寬度還原 */
.up-benefit-grid {
  width: 100%;
  margin-bottom: 0;
}
.up-price-list {
  width: 100%;
  margin-right: 0;
  margin-bottom: .6rem;
  margin-top: .8rem;
}

/* 票價列：可點擊選擇 */
.up-price-list .price-row {
  cursor: pointer;
  border: 3px solid transparent;
  position: relative;
  padding: 14px 12px 12px;
  opacity: 0.6;
  transition: transform .15s, box-shadow .15s, border-color .15s, opacity .15s;
}
.up-price-list .price-row--sel,
.up-price-list .price-row:hover {
  opacity: 1;
}
.up-price-list .price-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,160,232,.45), 0 1px 3px rgba(0,160,232,.2);
}
.up-price-list .price-row--sel {
  border-color: #fdf00e;
  box-shadow: 0 0 0 3px rgba(253,240,14,.4), 0 6px 20px rgba(0,160,232,.4);
  transform: translateY(-3px);
}

/* 圓圈緊接在數字前（與「校通關」同一行、一起置中）*/
.up-price-list .price-row::before,
.up-price-list .price-row::after {
  display: none;   /* 停用舊的絕對定位圓圈／勾 */
}
.up-price-list .pr-label::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  margin-top: -4px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.6);
  background: transparent;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.up-price-list .price-row--sel .pr-label::before {
  border-color: #fdf00e;
  background: #fdf00e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230077c8' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 6'/%3E%3C/svg%3E") center / 17px no-repeat;
  box-shadow: 0 2px 10px rgba(253,240,14,.65);
}

.up-header {
  background: url('../images/bg-star.jpg') center/100% auto no-repeat;
  background-position: center -300px;
  background-color: #0A1E3C;
  padding: 32px 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.up-tag {
  display: inline-block;
  background: rgba(253,240,14,0.18);
  border: 1px solid rgba(253,240,14,0.5);
  color: #fdf00e;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 14px;
  border-radius: 100px;
  margin-bottom: 4px;
}
.up-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  margin: 0;
  letter-spacing: 0.04em;
}
.up-subtitle {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  margin: 0;
  letter-spacing: 0.04em;
}
.up-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.up-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.up-benefit {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f8ff;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #0A1E3C;
}
.up-benefit-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.up-price-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8AACC8;
  text-transform: uppercase;
  align-self: flex-start;
}
.up-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}
.up-price-card {
  cursor: pointer;
  position: relative;
}
.up-price-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.up-price-inner {
  border: 2px solid #CBE6F8;
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: border-color .15s, background .15s, transform .15s;
  position: relative;
  overflow: hidden;
}
.up-price-card input:checked + .up-price-inner {
  border-color: #00a0e8;
  background: #e5f3fe;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,160,232,0.2);
}
.up-price-card--popular .up-price-inner {
  border-color: #fdf00e;
  background: #fffef0;
}
.up-price-card--popular input:checked + .up-price-inner {
  border-color: #00a0e8;
  background: #e5f3fe;
}
.up-popular-tag {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: #fdf00e;
  color: #0A1E3C;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 0;
  text-align: center;
}
.up-price-num {
  font-size: 2rem;
  font-weight: 900;
  color: #0A1E3C;
  line-height: 1;
  margin-top: 8px;
  font-family: var(--font-en);
}
.up-price-school {
  font-size: 0.78rem;
  color: #4A6480;
  font-weight: 600;
}
.up-price-amt {
  font-size: 1rem;
  font-weight: 800;
  color: #00a0e8;
  margin-top: 4px;
  font-family: var(--font-en);
}
.up-cta-btn {
  width: 100%;
  justify-content: center;
  max-width: 340px;
}
.up-skip {
  background: none;
  border: none;
  color: #8AACC8;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0px 8px;
  text-decoration: underline;
  font-family: var(--font-ja);
  transition: color .15s;
}
.up-skip:hover {
  color: #4A6480;
}
.pass-slot-wrap {
  margin: 2px 0 0;
  width: 100%;
}
/* 付款方式 + 信箱（彈窗內一步完成結帳，並排同一行） */
.pass-pay-email-row {
  display: flex;
  gap: 16px;
  margin:11px 0 0;
  width: 100%;
  align-items: flex-start;
}
.pass-pay-email-row .pass-pay-wrap,
.pass-pay-email-row .pass-email-wrap {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.pass-pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pay-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid rgba(59, 174, 245, .3);
  border-radius: 12px;
  background: #f4f9ff;
  cursor: pointer;
  padding: 11px 6px;
  font-size: .95rem;
  font-weight: 700;
  color: #00a0e8;
  white-space: nowrap;
  font-family: var(--font-ja);
  transition: border-color .15s, background .15s, color .15s;
}
.pay-opt:hover:not(.pay-opt--sel) {
  border-color: #00a0e8;
  background: #e0f3fc;
}
.pay-opt--sel {
  border-color: #00a0e8;
  background: #00a0e8;
  color: #fff;
}
.pay-opt-name small {
  font-weight: 500;
  opacity: .8;
  font-size: .76rem;
}
.pass-email-wrap {
  margin: 16px 0 0;
}
.pass-email-input {
  width: 100%;
  padding: 10px 15px;
  border: 2px solid rgba(59, 174, 245, .3);
  border-radius: 10px;
  font-size: 1rem;
  font-family: var(--font-ja);
  color: var(--text);
  background: #f4f9ff;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.pass-email-input:focus {
  border-color: var(--sky);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59, 174, 245, .18);
}
.pass-email-input.is-err {
  border-color: #e84040;
}
.pass-email-hint {
  font-size: .78rem;
  color: var(--text-light);
  margin-top: 6px;
  text-align: left;
}
.pass-slot-title {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--sky-deep);
  margin-bottom: 4px;
  text-align: left;
}
.pass-slot-req {
  color: #e74c3c;
  font-weight: 700;
  margin-left: 0px;
  vertical-align: middle;
}
.pass-slot-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.slot-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 2px solid rgba(59, 174, 245, .3);
  border-radius: 10px;
  background: #f4f9ff;
  cursor: pointer;
  padding: 6px 16px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #00a0e8;
  font-family: var(--font-ja);
  transition: border-color .15s, background .15s, color .15s;
  line-height: 1.2;
}
.slot-btn:hover:not(:disabled):not(.slot-btn--sel) {
  border-color: #00a0e8;
  background: #e0f3fc;
}
.slot-btn--sel:hover {
  border-color: #00a0e8;
  background: #00a0e8;
  color: #fff;
}
.slot-btn--sel {
  border-color: #00a0e8;
  background: #00a0e8;
  color: #fff;
}
.slot-btn--sel .slot-remain {
  color: rgba(255,255,255,.85);
}
.slot-btn:disabled:not(.slot-btn--sold) {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: line-through;
}
.slot-btn--sold,
.slot-btn--sold:disabled {
  background: #e5f3fe;
  border-color: #b3d9f5;
  color: #a0c4db;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
  overflow: hidden;
  opacity: 1 !important;
  text-decoration: none !important;
}
.slot-btn--sold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(0,120,200,.05) 4px,
    rgba(0,120,200,.05) 8px
  );
}
.slot-btn--sold .slot-time {
  text-decoration: line-through;
  text-decoration-color: #a0c4db;
}
.slot-btn--sold .slot-remain {
  color: #e74c3c;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .04em;
}
.slot-remain {
  font-size: 0.72rem;
  font-weight: 500;
  color: #888;
  pointer-events: none;
}
.pass-slot-err {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  font-weight: 600;
  color: rgb(208, 86, 86);
  margin-top: 8px;
}
.pass-slot-err[hidden] { display: none !important; }
.pass-slot-err::before {
  content: "⚠";
  font-size: .9rem;
}
/* 時段提示：放在標題右邊（inline）*/
.pass-slot-title .pass-slot-err {
  margin-top: 0;
  margin-left: 4px;
  vertical-align: middle;
}
.pass-notes-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}
.pass-notes-list li {
  font-size: 0.78rem;
  color: #888;
  line-height: 1.6;
  padding-left: 1em;
  text-indent: -1em;
}
.pass-notes-list li::before {
  content: "＊";
  margin-right: 2px;
}

/* ── 券號複製 ── */
.po-ticket-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.po-copy-btn-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
}
.po-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f5fbff;
  border: 1.5px solid #c8dff0;
  border-radius: 50%;
  color: #0077c8;
  cursor: pointer;
  width: 34px;
  height: 34px;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.po-copy-btn:hover { background: var(--sky); border-color: var(--sky); color: #fff; transform: scale(1.08); }
.po-copy-btn:active { transform: scale(.95); }
.po-copy-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #fdf00e;
  color: #0077c8;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  pointer-events: none;
  letter-spacing: .04em;
  z-index: 10;
}
.po-copy-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #fdf00e;
}
.po-copy-tip.show { display: block; }
.sm-reg-badge .po-copy-tip { font-size: 13px; 
padding: 4px 10px;
border-radius: 999px;
}

/* ── 訂單資訊列 ── */
.po-info-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.po-info-row {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--sky);
  margin: 0;
}
.po-info-slot {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background: var(--sky);
  border-radius: 20px;
  padding: 6px 20px;
  letter-spacing: .04em;
  box-shadow: 0 3px 10px rgba(0,160,232,.35);
}

/* ── 快速通關券訂單成功 Modal ── */
.po-icon-wrap {
  margin-bottom: 14px;
}
.po-title {
  font-size: 22px;
  font-weight: 800;
  color: #0A1E3C;
  margin-bottom: 6px;
}
.po-subtitle {
  font-size: 13px;
  color: #6B8FAC;
  margin-bottom: 24px;
  line-height: 1.6;
}
.po-ticket-wrap {
  background: #fff;
  border-radius: 14px;
  padding: 18px 25px 14px;
  margin-bottom: 8px;
}
.po-ticket-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #00a0e8;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.po-ticket-num {
  font-size: 22px;
  font-weight: 800;
  color: #0A1E3C;
  letter-spacing: 0.06em;
  font-family: 'Courier New', monospace;
  word-break: break-all;
}
.po-plan {
  font-size: 13px;
  color: #6B8FAC;
  margin-top: 6px;
}
.po-note {
  font-size: 12px;
  color: #8AACC8;
  line-height: 1.7;
  margin-bottom: 24px;
}
.po-close-btn {
  border: none;
  cursor: pointer;
  font-family: var(--font-ja);
  margin: 8px auto 0;
  display: flex;
  font-size: 1.35rem;
  padding: 16px 48px 16px 120px;
  overflow: visible;
}
.po-close-btn .btn-chara {
  height: 135px;
  left: 35px;
  bottom: -55px;
}
.po-close-btn .bs1 {
  left: 120px;
  top: -6px;
  width: 25px;
  height: 25px;
}
.po-close-btn .bs2 {
  left: 32px;
  top: 43px;
  width: 9px;
  height: 9px;
}
.po-close-btn .bs3 {
  left: 10px;
  top: 20px;
  width: 20px;
  height: 20px;
}

/* ═══════════════════════════════════════
     FOOTER
  ═══════════════════════════════════════ */
.footer {
  background: #00a0e6;
  padding: 62px 0 38px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* 水印 Re：Start */
.footer-mobile-deco {
  display: none;
}
.footer-watermark {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
  line-height: 0;
}
.footer-watermark img {
  width: 100%;
  height: auto;
  opacity: 1;
}
/* Logo 圖片 */
.footer-top {
  position: relative;
  z-index: 1;
  margin-bottom: 45px;
}
.footer-logo-img {
  display: block;
  height: 50px;
  width: auto;
  filter: brightness(0) invert(1);
  margin: 0 auto 16px;
}
.footer-tag {
  font-size: .9rem;
  color: rgba(255, 255, 255, .95);
  letter-spacing: .05rem;
  margin: 0;
}
/* 5欄 */
.footer-cols {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 1330px;
  margin: 0 auto 9.5rem;
  padding: 0;
  position: relative;
  z-index: 1;
}
.footer-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 20px;
}
.fc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 0px;
}
.fc-icon svg {
  width: 28px;
  height: 28px;
}
.fc-svg-icon {
  width: 56px;
  height: 56px;
}
.footer-col:hover .fc-icon {
  animation: sfBounce 0.8s ease forwards;
}
.fc-line {
  display: block;
  font-size: .9rem;
  color: rgba(255, 255, 255, 1);
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.02rem;
}
.fc-line a {
  color: white;
  font-weight: 500;
}
.fc-line a:hover {
  opacity: 1;
}
.fc-bold {
  font-weight: 700;
  color: white;
}
/* 小標籤 */
.fc-tag {
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05rem;
  color: rgba(255, 255, 255, .5);
  text-transform: uppercase;
}
/* 虛線分隔 */
.fc-sep {
  width: 1.5px;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .5) 0px, rgba(255, 255, 255, .5) 4px, transparent 4px, transparent 7px);
  flex-shrink: 0;
  align-self: stretch;
}
.footer-copy {
  font-size: .9rem;
  color: rgba(255, 255, 255, .6);
  position: relative;
  z-index: 1;
}
/* ═══════════════════════════════════════
     4 STEPS
  ═══════════════════════════════════════ */
.steps-section {
  padding: 0;
  overflow: hidden;
  position: relative;
  margin-top: -5.2rem;
}
/* 右側虛線弧 */
.steps-curve {
  position: absolute;
  right: -8px;
  top: 32%;
  width: 130px;
  pointer-events: none;
  overflow: visible;
}
/* 標題 */
.steps-head {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 40px;
  padding: 0 52px;
}
.steps-head-img {
  display: block;
  margin: 0 auto;
  width: clamp(260px, 32vw, 560px);
  height: auto;
}
.steps-script {
  font-family: 'Caveat', var(--font-ja);
  font-size: 2rem;
  font-weight: 700;
  color: var(--sky);
  line-height: 1;
  margin-bottom: 4px;
}
/* Flow */
.steps-flow {
  display: flex;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 2;
}
.sf-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.sf-circle {
  width: 134px;
  height: 134px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
  transition: transform .3s, box-shadow .3s;
}
.sf-num {
  font-family: var(--font-en);
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1;
  color: white;
}
.sf-step-lbl {
  font-family: var(--font-en);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .85);
}
.sf-c1 {
  background: #00a0e6;
}
.sf-c2 {
  background: #9ad50b;
}
.sf-c3 {
  background: #7e63d2;
}
.sf-c4 {
  background: #e93a78;
}
.sf-item:hover .sf-circle {
  animation: sfBounce 0.8s ease forwards;
}
@keyframes sfBounce {
  0% {
    transform: translateY(0) scaleY(1);
  }
  15% {
    transform: translateY(4px) scaleY(0.92) scaleX(1.08);
  }
  35% {
    transform: translateY(-22px) scaleY(1.1) scaleX(0.92);
  }
  55% {
    transform: translateY(0) scaleY(0.95) scaleX(1.05);
  }
  70% {
    transform: translateY(-10px) scaleY(1.05) scaleX(0.96);
  }
  82% {
    transform: translateY(0) scaleY(0.98) scaleX(1.02);
  }
  92% {
    transform: translateY(-4px) scaleY(1.02) scaleX(0.99);
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
  }
}
.sf-body {
  padding: 0 6px;
}
.sf-title {
  font-family: var(--font-ja);
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 8px;
}
.sf-desc {
  font-size: 1rem;
  color: var(--text-mid);
  line-height: 1.5;
}
.sf-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--sky);
  letter-spacing: .04em;
  padding: 6px 0;
  border-bottom: 1.5px solid var(--sky);
  transition: color .2s, border-color .2s, transform .2s;
}
.sf-link--note {
  line-height: 1.3;
  text-align: center;
}
.sf-link:hover {
  color: var(--sky-mid);
  border-color: var(--sky-mid);
  transform: translateX(4px);
}
/* 箭頭 */
.sf-arrow {
  flex-shrink: 0;
  width: auto;
  height: auto;
  background: none;
  margin-top: 54px;
  padding: 0;
  margin-left: -44px;
  margin-right: -44px;
  display: flex;
  align-items: center;
}
.sf-arrow-img {
  width: 40px;
  height: auto;
  display: block;
}
.sf-arrow::after {
  display: none;
}
/* 底部照片 */
.steps-photo-wrap {
  position: relative;
  z-index: 1;
  margin-top: -200px;
  height: auto;
  overflow: hidden;
  padding-top: 32rem;
  /* 底部兜底色 */
  background: #fff;
}
.steps-parallax-img {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  display: block;
  will-change: transform;
}
.steps-pic-restart {
  position: relative;
  z-index: 4;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  margin-bottom: -4px;
}
.steps-bottom-text {
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Caveat', var(--font-ja);
  font-size: clamp(5rem, 14vw, 11.5rem);
  font-weight: 700;
  color: #00a0e6;
  line-height: 1;
  z-index: 3;
  pointer-events: none;
  letter-spacing: -.01em;
}
/* ═══════════════════════════════════════
     BENEFIT TAGS (pass section)
  ═══════════════════════════════════════ */
/* ═══════════════════════════════════════
     第二彈 TEASER
  ═══════════════════════════════════════ */
.teaser-section {
  background: #fff;
  padding: 0 0 110px;
}
.teaser-inner {
  margin: 0 auto;
  padding: 0 40px;
}
.teaser-head {
  text-align: center;
  margin-bottom: 45px;
}
.teaser-head-img {
  display: block;
  width: clamp(220px, 31vw, 480px);
  height: auto;
  margin: 0 auto;
}
/* 小標籤 */
.teaser-badge {
  display: inline-block;
  border: 1.5px solid var(--sky);
  color: var(--sky-mid);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 5px 18px;
  border-radius: 100px;
  margin-bottom: 18px;
}
/* 手寫風大標題 */
.teaser-script {
  display: block;
  font-family: 'Caveat', 'GenJyuuGothic', cursive;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 700;
  color: var(--sky);
  line-height: 1.15;
  position: relative;
  margin-bottom: 10px;
}
.teaser-sparkle {
  font-size: .55em;
  color: var(--sky-deep);
  position: relative;
  display: inline-block;
}
.teaser-sparkle--tl {
  margin-right: 4px;
  top: -0.3em;
}
.teaser-sparkle--tr {
  margin-left: 4px;
  top: -0.5em;
}
.teaser-sparkle--br {
  font-size: .38em;
  margin-left: 2px;
  top: 0.2em;
}
/* 副標 */
.teaser-subtitle {
  font-family: var(--font-ja);
  font-size: clamp(1.4rem, 3.5vw, 2.25rem);
  font-weight: 900;
  color: var(--navy);
  margin: -1rem 0 0 4rem;
}
.teaser-grid {
  display: flex;
  flex-direction: column;
  gap: 38px;
  width: 830px;
  max-width: 100%;
  margin: 0 auto;
}
.teaser-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f0f8fe;
  border: 3px solid var(--sky);
  border-radius: 100px;
  padding: 16px 50px;
  position: relative;
  overflow: visible;
}
.teaser-check {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}
.teaser-check img {
  width: 100%;
  height: auto;
}
.teaser-title {
  flex: 1;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sky);
  letter-spacing: .06em;
}
.teaser-stamp {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fdf00e;
  color: var(--sky);
  font-family: var(--font-ja);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: .06em;
  padding: 16px 45px;
  border-radius: 10px;
  transform: rotate(-20deg) translateX(20px);
  position: absolute;
  right: 120px;
  z-index: 2;
  box-shadow: 0 6px 20px rgba(253, 240, 14, .5);
}
.teaser-stamp::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .45) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: tsScan 2.8s ease-in-out infinite;
}
@keyframes tsScan {
  0% {
    background-position: -100% 0;
  }
  60% {
    background-position: 200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.ts-lock {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--sky);
  position: static;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .1));
}
/* ═══════════════════════════════════════
     FOOTER SOCIAL
  ═══════════════════════════════════════ */
/* ═══════════════════════════════════════
     REVEAL ON SCROLL
  ═══════════════════════════════════════ */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1);
}
.rv.on {
  opacity: 1;
  transform: none;
}
.rvl {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1);
}
.rvl.on {
  opacity: 1;
  transform: none;
}
.rvr {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1);
}
.rvr.on {
  opacity: 1;
  transform: none;
}
.d1 {
  transition-delay: .1s;
}
.d2 {
  transition-delay: .2s;
}
.d3 {
  transition-delay: .3s;
}
.d4 {
  transition-delay: .4s;
}
.d5 {
  transition-delay: .5s;
}
/* opacity-only reveal（用於有既有 transform 的元素，避免衝突） */
.rv-fade {
  opacity: 0;
  transition: opacity 1s cubic-bezier(.4, 0, .2, 1);
}
.rv-fade.on {
  opacity: 1;
}
/* 子項目 stagger 入場（在父容器變 .on 後依序出現）*/
@keyframes rv-child-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* benefit-item：隨 .pass-left.on 依序入場 */
.pass-left.on .benefit-item {
  animation: rv-child-up .45s cubic-bezier(.4, 0, .2, 1) backwards;
}
.pass-left.on .benefit-item:nth-child(1) {
  animation-delay: .65s;
}
.pass-left.on .benefit-item:nth-child(2) {
  animation-delay: .78s;
}
.pass-left.on .benefit-item:nth-child(3) {
  animation-delay: .91s;
}
.pass-left.on .benefit-item:nth-child(4) {
  animation-delay: 1.04s;
}
/* price-row：隨 .pass-left.on 依序入場 */
.pass-left.on .price-row {
  animation: rv-child-up .45s cubic-bezier(.4, 0, .2, 1) backwards;
}
.pass-left.on .price-row:nth-child(1) {
  animation-delay: .80s;
}
.pass-left.on .price-row:nth-child(2) {
  animation-delay: .93s;
}
.pass-left.on .price-row:nth-child(3) {
  animation-delay: 1.06s;
}
/* pass-cta-btn + pass-note：price-list 全部出現後才進場 */
.pass-left.on .pass-cta-btn {
  animation: rv-child-up .55s cubic-bezier(.34, 1.2, .64, 1) backwards;
  animation-delay: 1.2s;
}
.pass-left.on .pass-note {
  animation: rv-child-up .45s cubic-bezier(.4, 0, .2, 1) backwards;
  animation-delay: 1.45s;
}
/* q-month：隨 .quota-card.on 依序 scale+fade 入場 */
@keyframes rv-month-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.quota-card.on .q-month {
  animation: rv-month-in .45s cubic-bezier(.4, 0, .2, 1) backwards;
}
.quota-card.on .q-month:nth-child(1) {
  animation-delay: .4s;
}
.quota-card.on .q-month:nth-child(2) {
  animation-delay: .55s;
}
.quota-card.on .q-month:nth-child(3) {
  animation-delay: .70s;
}
.quota-card.on .q-month:nth-child(4) {
  animation-delay: .85s;
}
/* prefers-reduced-motion：全部子項目 stagger 停用 */
/* ═══════════════════════════════════════
     隱私權條款 MODAL
  ═══════════════════════════════════════ */
.pm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 30, 80, .55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: pmFadeIn .25s ease;
}
.pm-overlay[hidden] {
  display: none;
}
@keyframes pmFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.pm-box {
  background: #fff;
  border-radius: 20px;
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 48px 44px 40px;
  position: relative;
  box-shadow: 0 32px 80px rgba(0, 30, 80, .3);
  animation: pmSlideUp .28s cubic-bezier(.22, 1, .36, 1);
}
@keyframes pmSlideUp {
  from {
    transform: translateY(28px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.pm-close {
  position: sticky;
  top: 0;
  float: right;
  margin-bottom: -32px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: #aaa;
  line-height: 1;
  padding: 4px 8px;
  transition: color .15s;
  z-index: 10;
}
.pm-close:hover {
  color: #333;
}
.pm-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--sky);
  margin-bottom: 24px;
}
.pm-body {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.7;
}
.pm-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sky);
  margin: 20px 0 6px;
}
.pm-body ul {
  padding-left: 1.4em;
}
.pm-body li {
  margin-bottom: 4px;
}
.pm-body a {
  color: var(--sky-mid);
  text-decoration: underline;
}
/* ── 手機版表格學校欄寬度 ── */









/* ── 滑動提示動畫 ── */
@keyframes swipe-hint {
  0%   { transform: translateX(0);    opacity: 0.75; }
  30%  { transform: translateX(-8px); opacity: 1;    }
  60%  { transform: translateX(8px);  opacity: 1;    }
  100% { transform: translateX(0);    opacity: 0.75; }
}
.sch-scroll-hint {
  animation: swipe-hint 2.2s ease-in-out infinite;
}


















.m-br { display: none; }

@keyframes glow-hint {
  0%, 100% { text-shadow: 0 0 6px rgba(255,255,255,0.3); opacity: 0.75; }
  50%       { text-shadow: 0 0 18px rgba(255,255,255,0.95), 0 0 32px rgba(100,210,255,0.6); opacity: 1; }
}
.sch-scroll-hint {
  animation: swipe-hint 2.2s ease-in-out infinite, glow-hint 2.2s ease-in-out infinite;
}

/* ── 手機篩選下拉選單 ── */
.sch-filter-select {
  display: none;
}