/* ===========================================================
   main-modern.css — for index.html & f2e.html
   =========================================================== */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-family: "Lato", sans-serif;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
#root, #__next { isolation: isolate; }
ul, ol { list-style: none; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; }
table { border-collapse: collapse; }

/* ---------- Custom Font (kept for brand text elsewhere if needed) ---------- */
@font-face {
  font-family: "cwTeXKai";
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.eot?#iefix) format("embedded-opentype"),
       url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.woff2) format("woff2"),
       url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.woff) format("woff"),
       url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.ttf) format("truetype");
}

/* ===========================================================
   NAVBAR
   =========================================================== */
.navbar {
  position: fixed; top: 0; width: 100%; z-index: 50;
  background-color: #2c3e50; color: white; transition: all 0.3s ease; padding: 0;
}
.navbar--shrink { padding: 5px 0; box-shadow: 0 0 10px rgba(0,0,0,.5); }

.navbar__container { max-width: 1600px; margin: 0.6rem auto; padding: 0 2rem; }
.navbar__content { display: flex; justify-content: space-between; align-items: center; }

.navbar__brand {
  color: white; font-size: 1.3em; font-weight: bold;
  font-family: "Montserrat", sans-serif; text-transform: uppercase;
  letter-spacing: .1em; transition: all .3s ease;
}
.navbar__brand:hover { color: #18bc9c; }

.navbar__toggle {
  display: block; border: none; background: transparent; padding: .5rem;
  cursor: pointer; position: relative; width: 2.5rem; height: 2.5rem; border-radius: 4px;
  transition: background-color .2s ease;
}
.navbar__toggle:hover { background-color: rgba(255,255,255,.1); }
.navbar__toggle:focus { outline: none; }
.navbar__toggle-bar {
  display: block; width: 1.5rem; height: 2px; background-color: white;
  position: absolute; left: 50%; transform: translateX(-50%);
  transition: all .3s cubic-bezier(.4,0,.2,1); border-radius: 1px;
}
.navbar__toggle-bar--top { top: .9rem; }
.navbar__toggle-bar--bottom { bottom: .9rem; }
/* hover spread */
.navbar__toggle:hover .navbar__toggle-bar--top { top: .7rem; }
.navbar__toggle:hover .navbar__toggle-bar--bottom { bottom: .7rem; }
/* active to X */
.navbar__toggle.navbar__toggle--active .navbar__toggle-bar--top {
  top: calc(50% - 1px); transform: translate(-50%, 0) rotate(45deg);
}
.navbar__toggle.navbar__toggle--active .navbar__toggle-bar--bottom {
  bottom: calc(50% - 1px); transform: translate(-50%, 0) rotate(-45deg);
}
.navbar__toggle.navbar__toggle--active:hover .navbar__toggle-bar--top {
  top: calc(50% - 1px); transform: translate(-50%, 0) rotate(45deg);
}
.navbar__toggle.navbar__toggle--active:hover .navbar__toggle-bar--bottom {
  bottom: calc(50% - 1px); transform: translate(-50%, 0) rotate(-45deg);
}

.navbar__nav { display: none; gap: 1.5rem; }
.navbar__nav-item {
  color: white; font-family: "Montserrat", sans-serif; text-transform: uppercase;
  letter-spacing: .1em; transition: color .3s ease; text-decoration: none;
}
.navbar__nav-item:hover { color: #18bc9c; }

.navbar__nav--mobile {
  max-height: 0; overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), border-top .4s cubic-bezier(.4,0,.2,1);
  background-color: #2c3e50; border-top: 1px solid transparent;
}
.navbar__nav--mobile.show-mobile { max-height: 400px; border-top: 1px solid rgba(255,255,255,.1); }
.navbar__nav--mobile-content { padding-top: 1rem; padding-bottom: .5rem; }
.navbar__nav--mobile-item {
  display: block; padding: .75rem 1rem; color: white; font-family: "Montserrat", sans-serif;
  text-transform: uppercase; letter-spacing: .1em; text-decoration: none; opacity: 0;
  transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease, color .2s ease, background-color .2s ease;
}
.navbar__nav--mobile.show-mobile .navbar__nav--mobile-item { opacity: 1; transform: translateY(0); }
.navbar__nav--mobile.show-mobile .navbar__nav--mobile-item:nth-child(1) { transition-delay: .1s; }
.navbar__nav--mobile.show-mobile .navbar__nav--mobile-item:nth-child(2) { transition-delay: .2s; }
.navbar__nav--mobile.show-mobile .navbar__nav--mobile-item:nth-child(3) { transition-delay: .3s; }
.navbar__nav--mobile.show-mobile .navbar__nav--mobile-item:nth-child(4) { transition-delay: .4s; }
.navbar__nav--mobile-item:hover { color: #18bc9c; background-color: rgba(255,255,255,.1); }

/* helpers toggled by JS */
.hidden-mobile { max-height: 0; }
.show-mobile { max-height: 400px; }

/* ===========================================================
   HEADER（共用）
   =========================================================== */
.header { text-align: center; color: white; background-color: #00979c; }
.header__container { max-width: 1400px; margin: 0 auto; padding: 100px 1rem 50px; }
.header__profile-image {
  display: block; margin: 0 auto 1.25rem; border-radius: 30%; width: 180px; height: 180px;
  object-fit: cover; box-shadow: 0 1.5px 4px rgba(0,0,0,.24), 0 1.5px 6px rgba(0,0,0,.12);
}
.header__name {
  display: block; text-transform: uppercase; font-family: "Montserrat", sans-serif;
  font-weight: 200; font-size: 2em;
}
.header__skills { font-weight: 300; text-transform: capitalize; font-size: 1.25em; }

/* ===========================================================
   SECTION（共用）
   =========================================================== */
.section { padding: 75px 0; width: 100%; }
.section--primary { color: white; background-color: #00979c; }
.section--white { background-color: white; }

.section__container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
.section__header { text-align: center; margin-bottom: 3rem; }

.section__title {
  font-size: 3em; font-weight: bold; text-transform: uppercase;
  font-family: "Montserrat", sans-serif; color: #2c3e50; margin: 0;
}
.section--primary .section__title { color: white; }

.section__content { max-width: 64rem; margin: 0 auto; }
.section__text {
  font-size: 1.25rem; line-height: 3.3rem; letter-spacing: 2px;
  margin-bottom: 2rem; padding: 0 2rem; text-indent: 40px;
}
.syllabus__text {
  font-size: 1.25rem; line-height: 2rem; letter-spacing: 2px;
  margin-bottom: 2rem; padding: 0 .9rem; text-indent: 40px;
}
.text-center { text-align: center; }

/* star divider */
.star-divider {
  display: block; margin: 25px auto 30px; padding: 0; max-width: 250px;
  border: 0; border-top: solid 5px; text-align: center;
}
.star-divider--light { border-color: white; }
.star-divider--primary { border-color: #2c3e50; }

/* f2e title hover tweak */
#f2e-title:hover .star-divider--primary {
  transition: all .5s; border-color: rgb(4,167,167); max-width: 260px;
}
#f2e-title #title-font:hover { color: rgb(0,98,98); cursor: pointer; }

/* ===========================================================
   COURSE GRID / CARD（index）
   =========================================================== */
.course-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem; justify-content: center;
  width: 100%; margin: 0 auto; box-sizing: border-box;
}
.course-card {
  display: block; background-color: white; border-radius: 0; transition: all .3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
  text-decoration: none; height: 100%; position: relative; overflow: hidden;
  width: 100%; max-width: 20rem; margin: 0 auto;
}
.course-card:hover { transform: translateY(-2px); box-shadow: 3px 6px 12px 0 rgba(0,0,0,.25); }
.course-card__image {
  width: 100%; object-fit: contain; object-position: center; display: block; background-color: #f3f3f3;
}
.course-card__content { padding: 1.5rem 1rem; background-color: #f3f3f3; text-align: center; height: 100%; }
.course-card__title {
  font-size: 1.7rem; font-weight: 900; margin-bottom: 1rem; color: #00304a;
  text-decoration: underline; text-align: center;
}
.course-card__description {
  color: #333; font-size: 1.3rem; font-weight: 300; line-height: 1.4; text-align: center; margin-bottom: 2rem;
}
/* footer strip element (HTML uses a separate div) */
.course-card__footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; }
.course-card__footer--f2e { border-bottom: 20px solid #2584bf; }
.course-card__footer--react { border-bottom: 20px solid #222222; }
.course-card__footer--app { border-bottom: 20px solid #2aa4b5; }
.course-card__footer--advanced-fullstack { border-bottom: 20px solid #5ebbab; }
.course-card__footer--digital-design { border-bottom: 20px solid #253232; }
.course-card__footer--digital-design-lab { border-bottom: 20px solid #feae00; }
.course-card__footer--research { border-bottom: 20px solid #ced3b1; }
.course-card__footer--vue { border-bottom: 20px solid #61b083; }
.course-card__footer--fullstack { border-bottom: 20px solid #5ebbab; }
.course-card__footer--wordpress { border-bottom: 20px solid #09537f; }
.course-card__footer--iot { border-bottom: 20px solid #cbb2a4; }
.struct-card__footer--uiux { border-bottom: 20px solid #5AABF3; }
.struct-card__footer--f2e { border-bottom: 20px solid #F4D23E; }
.struct-card__footer--react { border-bottom: 20px solid #EDBC42; }

/* ===========================================================
   HOBBY GRID / CARD（index）
   =========================================================== */
.hobby-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem; justify-content: center;
  width: 100%; margin: 0 auto; box-sizing: border-box;
}
.hobby-card {
  display: block; background-color: white; border-radius: 0; transition: all .3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
  text-decoration: none; height: 100%; position: relative; overflow: hidden;
  width: 100%; max-width: 20rem; margin: 0 auto;
}
.hobby-card:hover { transform: translateY(-2px); box-shadow: 3px 6px 12px 0 rgba(0,0,0,.25); }
.hobby-card__image-container {
  padding: 1rem 0; display: flex; justify-content: center; align-items: center; min-height: 250px;
}
.hobby-card--doushu .hobby-card__image-container { background-color: #cbb2a4; }
.hobby-card--taichi .hobby-card__image-container { background-color: #515259; }
.hobby-card__image {
  display: block; border-radius: 50%; width: 60%; max-width: 200px; aspect-ratio: 1; object-fit: cover;
}
.hobby-card__content { padding: 1.5rem 1rem; background-color: #f3f3f3; text-align: center; height: 100%; }
.hobby-card__title {
  font-size: 1.8rem; font-weight: 900; margin-bottom: 1rem; color: #00304a; text-decoration: underline; text-align: center;
}
.hobby-card__description { color: #333; font-size: 1rem; line-height: 1.4; text-align: center; padding: 0 .5rem; }
.hobby-card__footer { height: 1.5rem; width: 100%; position: absolute; bottom: 0; left: 0; }
.hobby-card__footer--doushu { background-color: #cbb2a4; }
.hobby-card__footer--taichi { background-color: #515259; }

/* ===========================================================
   BUTTONS
   =========================================================== */
.btn {
  display: inline-block; padding: 1rem 2rem; font-size: 1.3rem; font-weight: normal;
  transition: all .3s ease; text-decoration: none;
}
.btn--outline {
  border: 2px solid white; border-radius: 7px; color: white; background: transparent; margin-top: 1rem;
}
.btn--outline:hover { border: 2px solid white; background: white; color: #00979c; text-decoration: none; }
.btn--outline_black {
  border: 2px solid #222; border-radius: 7px; color: #222; background: transparent; margin-top: 1rem;
}
.btn--social {
  display: inline-block; width: 3rem; height: 3rem; border: 2px solid white; border-radius: 50%;
  text-align: center; line-height: 2.5rem; color: white; transition: all .3s ease; text-decoration: none;
}
.btn--social:hover { background: white; color: #2c3e50; text-decoration: none; }

/* ===========================================================
   FOOTER（共用）
   =========================================================== */
.footer { text-align: center; color: white; }
.footer__main { padding: 3rem 0; background-color: #2c3e50; }
.footer__address { font-size: 1.2rem; margin-bottom: 1rem; }
.footer__bottom { padding: 1.5rem 0; background-color: #233140; }
.footer__grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 1400px; margin: 0 auto; padding: 0 2rem;
}
.footer__social-list { display: flex; justify-content: center; gap: 1rem; }

/* ===========================================================
   F2E：TEACHERS & STRUCTURE
   =========================================================== */
.teacher-wrap {
  display: grid; gap: 4rem; row-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 18rem)); justify-content: center; margin-top: 9rem;
}
.person {
  text-align: center; text-indent: 0; margin: 0 0 10rem 0; padding: 0 0 1rem 0;
  display: flex; border-radius: .4rem; flex-direction: column; background-color: #fff;
  justify-content: center; align-items: center;
  box-shadow: 0 1.5px 4px rgba(0,0,0,.24), 0 1.5px 6px rgba(0,0,0,.12);
}
.teacher-card {
  border-radius: 50%; width: 250px; height: 250px; margin-bottom: -9.5rem;
  transition: transform 250ms cubic-bezier(.4,0,.2,1);
  transform: translateY(-7rem) scale(.7);
  overflow: hidden; border: #fff solid 1rem;
}
.teacher-divider {
  background-color: gray; margin-top: 1rem; height: 1px; width: 160px;
}
.teacher-name {
  color: black; font-size: 2rem; font-weight: 400; margin-top: 1rem; text-align: center; margin-bottom: 1rem;
}
.teacher-title {
  padding: 1rem; padding-top: 0; color: black; font-family: arial; font-weight: 200; font-style: italic;
  font-size: 1.2rem; margin-top: 4px; text-align: center; line-height: 1.5rem;
}
.img-teacher { display: block; border-radius: 50%; object-fit: cover; margin: 0 auto; }
.img-hobby { width: 180px; height: 180px; border-radius: 30%;
  box-shadow: 0 1.5px 4px rgba(0,0,0,.24), 0 1.5px 6px rgba(0,0,0,.12);
}
.img-hobby-teacher { transform: scale(1.3); border-radius: 100%; transition: all .7s ease; }
.img-hobby-teacher:hover { cursor: pointer; transform: scale(1.6); }

/* Course Structure */
.struct-wrap {
  display: grid; gap: 6rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 18rem));
  justify-content: center; margin-top: 4rem;
}
.front { z-index: 2; background: white; }
.struct-upper, .struct-lower { background-color: #f3f3f3; }
.struct-upper { height: 20rem; }
.struct-lower { height: auto; padding-bottom: 2rem; }
.struct-img-wrap {
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 2rem;
}
/* keep large circular art for f2e */
.struct-img {
  display: block; border-radius: 100%; border: #fff solid 10px; width: 100rem;
  transform: translateY(-50%) scale(2.1); box-shadow: .8px .8px 1.5px #ddd1d1;
}
.struct-title { text-align: center; font-size: 2rem; font-weight: 200; margin-bottom: 1rem; }
.struct-title-first { font-weight: bold; }
.struct-divider { width: 80%; height: 1px; background-color: black; margin: 1rem auto; }
.struct-content { font-size: 1.3rem; font-weight: 200; line-height: 1.6; padding-left: 2rem; padding-right: 2rem; margin: 0; }

/* ===========================================================
   SCROLL TO TOP（f2e）
   =========================================================== */
.scroll-top { position: fixed; right: 16px; bottom: 16px; z-index: 60; }
.scroll-top__btn {
  display: inline-flex; width: 44px; height: 44px; border-radius: 9999px;
  align-items: center; justify-content: center; background: #18bc9c; color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* Shrink Navbar */
.navbar--shrink .navbar__brand { font-size: 1.3em; }
.navbar--shrink.navbar { padding: 0.4rem 0; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
/* ≥575px */
@media (min-width: 575px) {
  .section { padding: 100px 0; }
  .section__container { padding: 0 2rem; }

  .course-grid {
    grid-template-columns: repeat(2, 16.5rem); gap: 2rem; justify-content: center;
    width: min(calc(2 * 16.5rem + 3rem), 100%); box-sizing: border-box;
  }
  .course-card { width: 16.5rem; max-width: none; margin: 0; }
  .course-card__title { font-size: 1.6rem; }
  .course-card__description { font-size: 1.3rem; }

  .hobby-grid {
    grid-template-columns: repeat(2, 1fr); gap: 2rem; justify-content: center;
    width: min(calc(2 * 25rem + 3rem), 100%); box-sizing: border-box;
  }
  .hobby-card { max-width: 25rem; }
  .hobby-card__title { font-size: 2.2rem; }
  .hobby-card__description { font-size: 1.1rem; }
}
/* ≥768px */
@media (min-width: 768px) {
  .navbar { padding: 1rem 0; }
  .navbar__brand { font-size: 1.9em; }
  .navbar__nav { display: flex; }
  .navbar__toggle { display: none; }
  .header__container { padding: 200px 2rem 100px; }
  .header__name { font-size: 3em; }
  .header__skills { font-size: 1.75em; }

  .course-grid {
    grid-template-columns: repeat(2, 22rem); gap: 3rem; justify-content: center;
    width: min(calc(2 * 22rem + 3rem), 100%); box-sizing: border-box;
  }
  .course-card { width: 22rem; max-width: none; margin: 0; }
  .course-card__title { font-size: 2rem; }
  .course-card__description { font-size: 1.5rem; }

  .hobby-grid { grid-template-columns: repeat(2, 1fr); }
  .hobby-card__title { font-size: 2.2rem; }
  .hobby-card__description { font-size: 1.1rem; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
/* ≥1000px */
@media (min-width: 1000px) {
  .course-grid {
    grid-template-columns: repeat(3, 17rem); gap: 2rem; justify-content: center;
    width: min(calc(3 * 17rem + 2 * 2rem), 100%); box-sizing: border-box;
  }
  .course-card { width: 17rem; }
  .course-card__title { font-size: 1.8rem; }
  .course-card__description { font-size: 1.4rem; }
}
/* ≥1220px */
@media (min-width: 1220px) {
  .course-grid {
    grid-template-columns: repeat(4, 17rem); gap: 2rem; justify-content: center;
    width: min(calc(4 * 17rem + 3 * 2rem), 100%); box-sizing: border-box;
  }
  .course-card { width: 17rem; }
}
/* ≥1620px */
@media (min-width: 1620px) {
  .course-grid {
    grid-template-columns: repeat(5, 17rem); gap: 3rem; justify-content: center;
    width: min(calc(4 * 17rem + 3 * 3rem), 100%); box-sizing: border-box;
  }
}