/**
 * RWD 響應式設計 - 忠泰大華企業
 * 策略：Desktop First (max-width)
 * 
 * 斷點設定：
 * - 超大型電腦版 > 1920px (min-width: 1920px)
 * - 大型電腦版 < 1920px (max-width: 1919px)
 * - 中型電腦版 < 1440px (max-width: 1439px)
 * - 電腦版     < 1024px (max-width: 1023px)
 * - 平板版     < 768px  (max-width: 767px)
 * - 手機版     < 576px  (max-width: 575px)
 * - 小型手機版 < 375px  (max-width: 374px)
 */

/* ===================================================
   桌機以上 1024px+（兩欄佈局）
   =================================================== */
@media screen and (min-width: 1024px) {
  /* 表單區塊 - 兩欄佈局 */
  .form-section__wrapper {
    flex-direction: row;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-height, 100vh);
  }

  .form-section__left {
    flex: 1;
    padding: var(--spacing-12);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .form-section__brand {
    aspect-ratio: 4 / 3;
    max-height: 400px;
  }

  .form-section__info {
    text-align: left;
  }

  .form-section__info-title {
    font-size: var(--font-size-3xl);
  }

  .form-section__contact-info {
    align-items: flex-start;
  }

  .form-section__contact-item {
    justify-content: flex-start;
  }

  .form-section__right {
    flex: 1;
    padding: var(--spacing-12);
  }

  .form-container {
    padding: var(--spacing-10);
  }
}

@media screen and (min-width: 2560px) {
  .hero-home__logo{
    max-width: 800px;
  }

}

/* ===================================================
   超大型電腦版 > 1920px
   =================================================== */
@media screen and (min-width: 1920px) {
  /* Architect Section - 文字放大 */
  .architect-section__title-light {
    font-size: var(--font-size-4xl);
  }

  .architect-section__title-name {
    font-size: var(--font-size-4xl);
  }

  .architect-section__desc {
    font-size: var(--font-size-lg);
  }
  .architect-section__content{
    max-width: 620px;
  }
  .arch-works-section__list li {
    font-size : var(--font-size-xl);
  }
  .crystal-section__desc{
    font-size: var(--font-size-lg);
  }
}

/* ===================================================
   大型電腦版 1440px ~ 1920px
   =================================================== */
@media screen and (max-width: 1919px) {
  /* Architect Section - 文字放大 */
  .architect-section__title-light {
    font-size: var(--font-size-4xl);
  }

  .architect-section__title-name {
    font-size: var(--font-size-4xl);
  }

  .architect-section__desc {
    font-size: var(--font-size-lg);
  }
  .architect-section__content{
    max-width: 620px;
  }
  .architect-section__signature{
    left:0%;
  }
  .arch-works-section__list li {
    font-size : var(--font-size-lg);
  }
  .arch-works-section{
    padding: 6vh 5% 6vh 5%;
    gap: 20px;
  }
  .arch-works-section__content{
    width: 32%;
  }
  .crystal-section__content{
    padding-top: 11rem;
    margin-right: 10%;
  }
  .crystal-section__title{
    font-size: 1.75rem;
  }
  .crystal-section__desc{
    text-align: justify;
    max-width: 430px;
  }
  .reg-section__form-title{
    margin-bottom:var(--spacing-4);
  }
  .reg-section__left{
    overflow: hidden;
  }
  .reg-section__contact-label{
    min-width: 60px;
  }
  .reg-section__contact-bar{
    padding: 5rem var(--spacing-1);
    padding-top:1rem;
  }
  .crystal-section__bg img{
    object-position: 100% center;
  }
  .badge-section__inner{
    max-width: var(--container-md);
  }
  .reg-section__phone{
    font-size: var(--font-size-5xl);
  }
  .craft-section__header{
    padding: 4rem 6rem;
  }
  .transit-section__content{
    right:0%;
    max-width: 760px;
  }
  .office-section__title{
    font-size: var(--font-size-2xl);
  }
  .reg-section__footer-line br2::after {
    content: "\A";
    white-space: pre;
}
  .reg-section__footer-line span2{
    display: none;
  }
}

/* ===================================================
   中型電腦版 1024px ~ 1440px
   =================================================== */
@media screen and (max-width: 1439px) {
  :root {
    --font-size-5xl: 2.5rem;
    --font-size-4xl: 2rem;
    --font-size-3xl: 1.75rem;
  }

  .container {
    max-width: var(--container-lg);
  }

  .section {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
  }

  /* Architect Section - 文字放大 */
  .architect-section__title-light {
    font-size: var(--font-size-3xl);
  }

  .architect-section__title-name {
    font-size: var(--font-size-3xl);
  }

  .architect-section__desc {
    font-size: var(--font-size-base);
  }
  .architect-section__image .architect-section-img{
    max-height: 50vh;
  }
  .architect-section__signature{
    left:-12%;
  }
  .arch-works-section{
    
  }
  .arch-works-section__content{
    
  }
  .crystal-section__content{
    padding-top: 16rem;
    margin-right: 12%;
  }
  .office-section__info{
    padding-left: 4%;
    padding-right: 4%;
  }
  .craft-section__header{
    padding: 4rem 2rem;
    gap: var(--spacing-2);
  }
  .reg-section__contact-label{
    min-width: 60px;
  }
  .reg-section{
    padding: 2rem 1rem 2rem 1rem;
  }
  .reg-section__contact-bar{
    padding: 2rem var(--spacing-1);
  }
  .reg-section__map{
    padding: 5rem 0 0;
  }
  .reg-section__footer-line{
    font-size: var(--font-size-sm);
  }
  .reg-form__label{
    font-size: var(--font-size-base);
  }
  .reg-form__input{
    font-size: var(--font-size-base);
  }
  .reg-section__logo-placeholder{
    width:160px;
  }
  .reg-form__check-text{
    font-size: var(--font-size-sm);
  }
  .crystal-section__bg img{
    object-position: 70% center;
  }
  .badge-section__inner{
    max-width: var(--container-sm);
  }
  .office-section__title{
    font-size: var(--font-size-3xl);
  }
}

/* ===================================================
   電腦版 768px ~ 1024px
   =================================================== */
@media screen and (max-width: 1023px) {
  :root {
    --font-size-5xl: 2.25rem;
    --font-size-4xl: 1.875rem;
    --font-size-3xl: 1.5rem;
    --font-size-2xl: 1.25rem;
  }

  /* Header */
  .header__container {
    height: 60px;
  }

  .header__nav {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    height: calc(var(--app-height, 100vh) - 60px);
    background-color: var(--color-bg-dark);
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--spacing-6);
    gap: var(--spacing-4);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: var(--z-modal);
  }

  .header__nav--open {
    transform: translateX(0);
  }

  .header__nav-link {
    font-size: var(--font-size-lg);
    padding: var(--spacing-3) 0;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    color: var(--color-text-light);
  }

  .header__menu-btn {
    display: flex;
  }

  .header__menu-btn--active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .header__menu-btn--active span:nth-child(2) {
    opacity: 0;
  }

  .header__menu-btn--active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Hero */
  .hero {
    min-height: 500px;
  }

  .hero__title {
    font-size: var(--font-size-4xl);
  }

  .hero__subtitle {
    font-size: var(--font-size-lg);
  }

  /* Section */
  .section {
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
  }

  .section-header {
    margin-bottom: var(--spacing-8);
  }

  /* Form */
  .form-section__left {
    padding: var(--spacing-6);
  }

  .form-section__right {
    padding: var(--spacing-6);
  }

  .form-container {
    padding: var(--spacing-8);
  }

  /* Footer */
  .footer__content {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 返回頂部按鈕 */
  .back-to-top {
    width: 45px;
    height: 45px;
    bottom: var(--spacing-4);
    right: var(--spacing-4);
  }

  /* Hero Home */
  .hero-home__nav {
    gap: var(--spacing-3);
  }

  .nav-btn {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
  }

  .nav-btn__icon {
    width: 18px;
    height: 18px;
  }

  .hero-home__logo {
    width: 240px;
  }

  .hero-home__title {
    font-size: var(--font-size-2xl);
  }

  .hero-home__slogan-zh {
    font-size: var(--font-size-lg);
  }

  .hero-home__slogan-en {
    font-size: var(--font-size-sm);
  }

  /* Architect Section */
  .architect-section {
    padding-left: 5%;
    padding-right: 5%;
    gap: var(--spacing-6);
  }
  .architect-section__title{
      align-items: center;
  }
  .architect-section__content {
    max-width: 50%;
    flex-shrink: 0;
  }

  .architect-section__title-light {
    font-size: var(--font-size-2xl);
  }

  .architect-section__title-name {
    font-size: var(--font-size-2xl);
  }

  .architect-section__desc {
    font-size: var(--font-size-sm);
  }

  .architect-section__image {
    max-width: 50%;
    flex-shrink: 1;
  }

  .architect-section__image .architect-section-img {
    max-height: 85vh;
    width: auto;
  }

  .architect-section__signature-img {
    max-width: 100px;
  }

  /* Arch Works Section - 上下排列 */
  .arch-works-section {
    flex-direction: column;
    padding: var(--spacing-6) 0 0;
    gap: var(--spacing-12);
    align-items: stretch;
  }

  .arch-works-section__content {
    width: auto;
    max-width: 700px;
    flex: 0 0 auto;
    text-align: left;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
  }

  .arch-works-section__title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-4);
  }

  .arch-works-section__list {
    align-items: flex-start;
  }

  .arch-works-section__list li {
    font-size: var(--font-size-sm);
  }

  .arch-works-section__gallery {
    flex: 1;
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .oot-section__circles {
    gap: var(--spacing-3);
  }
  /* OOT Section */
  .oot-section__circle {
    width: 13rem;
    height: 13rem;
  }

  .oot-section__circle-title {
    font-size: var(--font-size-2xl);
  }

  .oot-section__bottom {
    gap: var(--spacing-10);
  }

  /* Badge Section */
  .badge-section__img-wrap {
    max-width: 450px;
  }

  .badge-section__award-img {
    max-width: 220px;
  }

  /* Reg Section */
  .reg-section__left {
    padding: var(--spacing-6);
  }

  .reg-section__contact-bar {
    padding: var(--spacing-3) var(--spacing-4);
  }

  /* Industry & Transit Section */
  .industry-section__content,
  .transit-section__content {
    width: 60%;
    margin-right: var(--spacing-8);
    padding: var(--spacing-8) var(--spacing-6);
  }

  .transit-section__content {
    align-items: flex-start;
    text-align: left;
  }

  .industry-section__title,
  .transit-section__title {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    margin-bottom: var(--spacing-4);
  }
  .transit-section__title_sub {
    font-size: clamp(1rem, 4vw, 1.5rem);
  }

  .industry-section__desc,
  .transit-section__desc {
    font-size: clamp(0.875rem, 3.5vw, 1rem);
  }
  .crystal-section__content{
    margin-right: 1rem;
    padding: 1rem 15px;
  }
  .crystal-section__title{
    margin-bottom: var(--spacing-2);
  }
  .crystal-section__subtitle{
    margin-bottom: var(--spacing-2);
  }

  .crystal-section__desc{
    line-height: 1.5;
    max-width: 400px;
  }

  /* Landmark Section - 背景圖片左右滑動 */
  .landmark-section__bg {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .landmark-section__bg::-webkit-scrollbar {
    display: none;
  }

  .landmark-section__bg img {
    width: auto;
    height: 100%;
    max-width: none;
  }

  .office-section__info{
    flex-direction: column;
    padding-left: 4%;
    padding-right: 4%;
    height:360px;
  }
  .office-section__title-wrap{
    justify-content: flex-start;    
  }
  .office-section__title br {
    display: block;
  }
  .office-section__desc-wrap{
    align-items: flex-start;
  }
  .craft-section__header{
    flex-direction: column;
    padding: 4rem 4rem; 
    align-items: flex-start;
  }
  .reg-section__contact-label{
    min-width: 60px;
  }
  .reg-section__upper{
    flex-direction: column;
  }
  .reg-section__contact-bar{
    flex-direction: row;
  }
  .reg-section__left{
    justify-content: flex-start;
  }
  .reg-section__footer{
    padding: var(--spacing-3) var(--spacing-0) var(--spacing-0);
  }
  .reg-section__map{
    padding: 10px 0 0;
  }
  .reg-form__grid{
    row-gap: var(--spacing-1);
  }
  .reg-section__left{
    padding:5px;
  }
  .reg-section{
    padding: 10px 1rem;
  }
  .crystal-section__bg img{
    object-position: 55% center;
  }
  .fullpage-image__title{
    top : var(--spacing-16);
  }
  .reg-section__left {
    flex: 0 0 65%;
  }

  .reg-section__right {
    flex: 0 0 35%;
  }
  .reg-section__logo-placeholder{
    width:130px;
  }
}

/* ===================================================
   平板版 575px ~ 768px
   =================================================== */
@media screen and (max-width: 767px) {
  :root {
    --font-size-5xl: 2rem;
    --font-size-4xl: 1.75rem;
    --font-size-3xl: 1.375rem;
    --font-size-2xl: 1.125rem;
  }

  

  /* Container */
  .container,
  .container-fluid {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }

  /* Hero */
  .hero {
    min-height: 480px;
    padding-top: 70px;
  }

  .hero__title {
    font-size: var(--font-size-3xl);
  }

  /* Section */
  .section {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
  }

  .section-header__title {
    font-size: var(--font-size-xl);
  }

  /* Form */
  .form-section__left {
    padding: var(--spacing-4);
  }

  .form-section__right {
    padding: var(--spacing-4);
  }

  .form-section__brand {
    margin-bottom: var(--spacing-4);
  }

  .form-container {
    padding: var(--spacing-6);
  }

  .form-header__title {
    font-size: var(--font-size-xl);
  }

  /* Footer */
  .footer__content {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
    text-align: center;
  }

  /* Hero Home */
  .hero-home__nav {
    top: var(--spacing-4);
    right: var(--spacing-4);
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-2);
  }

  .nav-btn__text {
    display: none;
  }

  .nav-btn {
    padding: var(--spacing-2);
    border-radius: var(--radius-full);
  }

  .hero-home__logo {
    width: 240px;
    margin-bottom: var(--spacing-6);
  }

  .hero-home__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-4);
  }

  .hero-home__slogan-zh {
    font-size: var(--font-size-base);
  }

  .hero-home__slogan-en {
    font-size: var(--font-size-sm);
  }

  /* Architect Section - 上下排版 */
  .architect-section {
    flex-direction: column;
    padding: var(--spacing-10) var(--spacing-6);
    justify-content: flex-start;
    gap: var(--spacing-8);
  }

  .architect-section__deco {
    bottom: 50px;
    height: 30%;
  }

  .architect-section__content {
    max-width: 100%;
    padding: 0 var(--spacing-4);
    text-align: center;
    margin-bottom: 0;
    order: 1;
  }

  .architect-section__title {
    align-items: center;
    gap: var(--spacing-2);
  }

  .architect-section__title-light {
    font-size: var(--font-size-3xl);
  }

  .architect-section__title-name {
    font-size: var(--font-size-3xl);
  }

  .architect-section__desc {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
  }

  .architect-section__image {
    width: 100%;
    justify-content: center;
    order: 2;
    padding-bottom: var(--spacing-8);
  }

  .architect-section__image .architect-section-img {
    max-width: 60%;
    height: auto;
    max-height: 45vh;
  }

  .architect-section__signature {
    left: 25%;
    transform: translateX(-50%);
    bottom: 10%;
    align-items: center;
  }

  .architect-section__signature-img {
    width: 50px;
    height: 50px;
    max-width: none;
    object-fit: contain;
  }

  .architect-section__signature-name {
    font-size: 0.75rem;
  }

  /* Arch Works Section - 上下排列，圖片貼齊底部 */
  .arch-works-section {
    flex-direction: column;
    align-items: stretch;
    padding: var(--spacing-6) 0 0;
    gap: var(--spacing-12);
    overflow: hidden;
  }

  .arch-works-section__content {
    width: auto;
    max-width: 600px;
    flex: 0 0 auto;
    text-align: left;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
  }

  .arch-works-section__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-3);
  }

  .arch-works-section__list {
    align-items: flex-start;
  }

  .arch-works-section__list li {
    font-size: var(--font-size-sm);
  }

  .arch-works-section__gallery {
    flex: 1;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  /* OOT Section */
  .oot-section__inner {
    padding: var(--spacing-10) var(--spacing-6);
    gap: var(--spacing-10);
  }

  .oot-section__circles {
    gap: var(--spacing-3);
  }

  .oot-section__circle {
    width: 13rem;
    height: 13rem;
  }

  .oot-section__circle-title {
    font-size: var(--font-size-xl);
  }

  .oot-section__circle-sub {
    font-size: 0.7rem;
  }

  .oot-section__bottom {
    flex-direction: column;
    gap: var(--spacing-8);
  }

  .oot-section__tagline-word--office,
  .oot-section__tagline-word:nth-child(2),
  .oot-section__tagline-word:last-child {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }

  /* Badge Section */
  .badge-section__inner {
    margin: 0 auto;
    padding: var(--spacing-10) var(--spacing-6);
    gap: var(--spacing-4);
  }

  .badge-section__title {
    font-size: var(--font-size-2xl);
  }

  .badge-section__subtitle {
    font-size: var(--font-size-base);
  }

  .badge-section__img-wrap {
    max-width: 400px;
  }

  .badge-section__awards {
    gap: var(--spacing-8);
  }

  .badge-section__award-img {
    max-width: 180px;
  }

  .badge-section__award-text {
    font-size: var(--font-size-sm);
  }

  /* Reg Section */
  .reg-section__upper {
    flex-direction: column;
  }

  .reg-section__left {
    flex: 0 0 65%;
    border-right: none;
    border-bottom: 1px solid var(--color-gray-200);
    padding: var(--spacing-5);
  }

  .reg-section__right {
    flex: 0 0 35%;
  }

  .reg-form__grid {
    grid-template-columns: 1fr 1fr;
  }

  .reg-form__field--full {
    grid-column: 1 / -1;
  }

  .reg-section__footer-line {
    text-align: left;
    font-size: 0.75rem;
  }

  /* 第二屏標題 - 平板版換行 */
  .fullpage-image__title {
    white-space: normal;
    top: var(--spacing-6);
    left: var(--spacing-6);
    max-width: calc(100% - var(--spacing-12));
  }

  .desktop-space {
    display: none!important;
  }
  .fullpage-image__title span {
    display: initial;
  }

  .office-section__info{
    display: none;
  }
  .office-section__bg picture {
    height: 100%;
  }
  .office-section__bg picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .craft-section__header{
    flex-direction: column;
    padding: 4rem 1.5rem; 
    align-items: flex-start;
  }
  .craft-section__carousel-wrap{
    padding: 0 0 calc(var(--spacing-16) + var(--mobile-bottom-inset)) 0;
  }
  .craft-slide__label{
    padding-left:var(--spacing-6);
  }
  .reg-section__contact-label{
    min-width: 60px;
  }
  .crystal-section__content{
    max-width: 260px;
    margin-right: 1rem;
    padding: 3rem 15px;
  }
  .crystal-section__desc{
    max-width: 240px;
  }
  .crystal-section__disclaimer{
    display: block;
    position: absolute;
    bottom: var(--spacing-4);
    right: var(--spacing-4);
    font-size: 0.45rem;
    color: var(--color-text-muted);
    text-align: right;
    z-index: 5;
  }
  .crystal-section__bg img{
    object-position: center center;
  }
  .transit-section__content{
    right:0;
  }
  .reg-section__logo-placeholder{
    width:120px;
  }
}

/* ===================================================
   手機版 374px ~ 576px
   =================================================== */
@media screen and (max-width: 575px) {
  /* 手機版隱藏白色梯形遮罩 */
  .fullpage-section::before {
    display: none;
  }

  :root {
    --font-size-5xl: 1.875rem;
    --font-size-4xl: 1.5rem;
    --font-size-3xl: 1.25rem;
    --font-size-2xl: 1.125rem;
    --font-size-xl: 1rem;
  }

  html {
    font-size: 15px;
  }

  /* 防止 iOS Safari 點擊輸入框時自動縮放（字體需 >= 16px） */
  .reg-form__input,
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px;
  }

  /* Container */
  .container,
  .container-fluid {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }

  /* Section */
  .section {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
  }

  .section-header {
    margin-bottom: var(--spacing-6);
  }

  .section-header__title {
    font-size: var(--font-size-xl);
  }

  .section-header__subtitle {
    font-size: var(--font-size-base);
  }

  /* Hero */
  .hero {
    min-height: 450px;
    padding-top: 60px;
  }

  .hero__content {
    padding: var(--spacing-3);
  }

  .hero__title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-3);
  }

  .hero__subtitle {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-6);
  }

  /* Buttons */
  .btn {
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--font-size-sm);
  }

  .btn-lg {
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-base);
  }

  /* Cards */
  .card__body {
    padding: var(--spacing-4);
  }

  .card__title {
    font-size: var(--font-size-lg);
  }

  /* Form */
  .form-section__wrapper {
    min-height: auto;
  }

  .form-section__left {
    padding: var(--spacing-4);
  }

  .form-section__right {
    padding: var(--spacing-4);
  }

  .form-section__brand {
    aspect-ratio: 16 / 10;
  }

  .form-section__info-title {
    font-size: var(--font-size-xl);
  }

  .form-container {
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
  }

  .form-header {
    margin-bottom: var(--spacing-6);
  }

  .form-header__title {
    font-size: var(--font-size-lg);
  }

  .form-group {
    margin-bottom: var(--spacing-4);
  }

  .form-input {
    padding: var(--spacing-3);
    font-size: var(--font-size-base);
  }

  .form-submit {
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
  }

  .form-checkbox-group {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .form-checkbox {
    width: 100%;
  }

  /* Footer */
  .footer {
    padding: var(--spacing-8) 0 var(--spacing-4);
  }

  .footer__section {
    text-align: center;
  }

  /* 返回頂部按鈕 */
  .back-to-top {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-sm);
    bottom: var(--spacing-3);
    right: var(--spacing-3);
  }

  /* Hero Home */
  .hero-home__nav {
    top: var(--spacing-3);
    right: var(--spacing-3);
  }

  .nav-btn {
    width: 36px;
    height: 36px;
    padding: var(--spacing-2);
  }

  .nav-btn__icon {
    width: 16px;
    height: 16px;
  }

  .hero-home__logo {
    width: 240px;
    margin-bottom: var(--spacing-5);
  }

  .hero-home__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-3);
  }

  .hero-home__slogan {
    gap: var(--spacing-1);
  }

  .hero-home__slogan-zh {
    font-size: var(--font-size-sm);
  }

  .hero-home__slogan-en {
    font-size: var(--font-size-xs);
  }

  .hero-home__scroll-hint {
    bottom: var(--spacing-4);
  }

  .scroll-hint__icon {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-base);
  }

  /* Architect Section - 手機版調整 */
  .architect-section {
    padding: var(--spacing-8) var(--spacing-4);
    gap: var(--spacing-6);
  }

  .architect-section__content {
    padding: 0 var(--spacing-2);
    height:250px;
    justify-content: flex-end;
    display: flex;
    flex-direction: column;
  }

  .architect-section__title-light {
    font-size: var(--font-size-3xl);
  }

  .architect-section__title-name {
    font-size: var(--font-size-3xl);
  }

  .architect-section__desc {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
  }

  .architect-section__image {
    padding-bottom: var(--spacing-6);
    max-width: 100%;
  }

  .architect-section__image .architect-section-img {
    max-width: 100%;
    width:100%;
  }

  .architect-section__signature {
    bottom: 8%;
  }

  .architect-section__signature-img {
    width: 120px;
    height: auto;
  }

  /* Arch Works Section - 手機版調整 */
  .arch-works-section {
    padding: var(--spacing-4) 0 0;
    gap: var(--spacing-10);
  }

  .arch-works-section__content {
    max-width: 100%;
    width:auto;
    padding: 0 var(--spacing-3);
  }

  .arch-works-section__title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-2);
  }

  .arch-works-section__list li {
    font-size: var(--font-size-xs);
  }

  .arch-gallery__caption {
    font-size: 9px;
    padding: 2px 5px;
  }

  /* OOT Section */
  .oot-section__inner {
    padding: var(--spacing-8) var(--spacing-4);
    gap: var(--spacing-8);
  }

  .oot-section__circles {
    gap: var(--spacing-4);
    flex-wrap: nowrap;
  }

  .oot-section__circle {
    width: 7rem;
    height: 7rem;
  }

  .oot-section__circle-title {
    font-size: var(--font-size-lg);
  }

  .oot-section__info-title {
    font-size: var(--font-size-base);
  }

  .oot-section__info-body {
    font-size: var(--font-size-sm);
    text-align: justify;
  }

  /* Badge Section */
  .badge-section__inner {
    padding: var(--spacing-8) var(--spacing-4);
    gap: var(--spacing-3);
  }

  .badge-section__title {
    font-size: var(--font-size-xl);
  }

  .badge-section__subtitle {
    font-size: var(--font-size-sm);
  }
  .craft-section__desc{
    text-align: justify;
  }

  .badge-section__img-wrap {
    max-width: 320px;
  }

  .badge-section__awards {
    flex-direction: column;
    gap: var(--spacing-6);
  }

  .badge-section__award-img {
    max-width: 200px;
  }

  .badge-section__award-text {
    font-size: var(--font-size-sm);
  }

  /* Reg Section */
  .reg-section__left {
    flex: 0 0 70%;
    padding: var(--spacing-4) var(--spacing-0);
  }

  .reg-section__right {
    flex: 0 0 30%;
  }

  .reg-form__grid {
    grid-template-columns: 1fr 1fr;
  }

  .reg-form__field{
    padding: var(--spacing-0);
  }
  .reg-form__field--full {
    grid-column: 1 / -1;
  }

  .reg-section__form-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-3);
  }

  .reg-section__phone {
    font-size: var(--font-size-5xl);
  }

  .reg-section__sns-icon {
    width: 36px;
    height: 36px;
  }

  .reg-section__footer {
    padding: var(--spacing-2) var(--spacing-4);
  }
  /* 第二屏標題 - 手機版 */
  .fullpage-image__title {
    position: absolute;
    z-index: 5;
    top: var(--spacing-16);
    left: var(--spacing-6);
    max-width: calc(100% - var(--spacing-12));
    font-size: clamp(1rem, 6vw, 2rem);
    white-space: normal;
  }


  /* Landmark Section - 滑動提示 */
  .landmark-section__swipe-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .landmark-section__swipe-hint.is-visible {
    opacity: 1;
  }

  .landmark-section__swipe-hint.is-hidden {
    opacity: 0;
  }

  .landmark-section__swipe-hint.is-visible .swipe-hint__icon {
    animation: swipeHintSlide 1.5s ease-in-out infinite;
  }

  /* Industry & Transit Section */
  .industry-section__content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--spacing-6);
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  /* Transit Section - 手機版：文字在上、圖片在下 */
  .transit-section {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .transit-section__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--spacing-6);
    background: #ffffff;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    flex-shrink: 0;
    order: -1; /* 文字排在上方 */
  }

  .transit-section__title {
    font-size: clamp(1rem, 5vw, 1.5rem);
    color: var(--color-secondary);
  }
  .transit-section__title_sub {
    font-size: clamp(0.875rem, 4vw, 1.25rem);
    color: var(--color-secondary);
  }

  .transit-section__desc {
    font-size: clamp(0.8rem, 3vw, 0.9rem);
    color: var(--color-secondary);
  }

  .transit-section__bg {
    position: relative;
    inset: auto;
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .transit-section__bg::-webkit-scrollbar {
    display: none;
  }

  .transit-section__bg img {
    display: block;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .transit-section__bg::after {
    display: none;
  }

  /* 滑動提示：用 transition 控制淡入淡出，JS 控制顯示時機 */
  .transit-section__swipe-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .transit-section__swipe-hint.is-visible {
    opacity: 1;
  }

  .transit-section__swipe-hint.is-hidden {
    opacity: 0;
  }

  .swipe-hint__icon {
    width: 48px;
    height: 48px;
    color: #000;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  }

  .transit-section__swipe-hint.is-visible .swipe-hint__icon {
    animation: swipeHintSlide 1.5s ease-in-out infinite;
  }

  .swipe-hint__text {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: #000;
    font-weight: bolder;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  @keyframes swipeHintSlide {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-12px); }
    75% { transform: translateX(12px); }
  }

  .industry-section__bg::after {
    background: rgba(255, 255, 255, 0.85);
  }

  .industry-section__image-label,
  .transit-section__image-label {
    display: none;
  }

  .office-section__info{
    flex-direction: column;
  }
  .office-section__desc-wrap{
    align-items: flex-start;
    padding:16px;
  }
  .office-section__image-wrap{
    flex:2;
  }
  .office-section__info{
    flex:2;
  }
  .office-section__title-wrap{
    flex:0;
    padding:0px;
    justify-content: flex-start;
  }
  .office-section__info{
    height:360px;
  }
  .craft-section__header{
    flex-direction: column;
    padding: 2rem 1.5rem 2rem; 
    align-items: flex-start;
  }
  .craft-section__carousel-wrap{
    padding: 0 0 calc(var(--spacing-8) + var(--mobile-bottom-inset)) 0;
  }
  /* 手機版：輪播圖片滿版，隱藏右側漸層遮罩 */
  .craft-swiper .swiper-slide {
    width: 100%;
  }
  .craft-section__fade-right {
    display: none;
  }
  .craft-slide__image {
    flex: none;
    aspect-ratio: 1 / 1;
  }
  .craft-slide__label{
    padding-left:var(--spacing-6);
  }
  .reg-section__contact-label{
    min-width: 66px;
  }
  .reg-section__form-title{
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-1);
  }
  .reg-section__contact-label{
    min-width:57px;
  }
  .reg-section__contact-bar{
    gap: var(--spacing-2);
  }
  .reg-section__sns-btns{
    gap: var(--spacing-1);
  }
  .reg-section__sns-label{
    font-size: var(--font-size-xs);
  }
  .reg-section__footer{
    padding: var(--spacing-2) 0;
  }
  .reg-section__contact-bar{
    padding:var(--spacing-3) 0;
  }
  .reg-section__sns-label{
    display: none;
  }
  .reg-form__field{
    padding-bottom: var(--spacing-1);
  }
  .crystal-section__content{
    margin-right: 0;
    max-width: 100%;
    text-align: center;
    padding: .5rem var(--spacing-6);
  }
  .crystal-section__title{
    text-align: center;
    margin-bottom: var(--spacing-0);
    font-size: 1.5rem;
    color: var(--color-white);
  }
  .crystal-section__subtitle{
    text-align: right;
    padding-right: var(--spacing-4);
    margin-bottom: var(--spacing-2);
    color: var(--color-white);
  }
  .crystal-section__desc{
    text-align: justify;
    margin: 0 auto;
    max-width: 340px;
    font-size: var(--font-size-sm);
    color: var(--color-white);
  }
  .crystal-section__bg img{
    object-position: bottom;
  }
  .reg-section__footer-line br{
    display: block;
  }
  .reg-section__footer-line span{
    display: none;
  }
  .reg-section__footer-line br2{
    display: none;
  }
  .reg-section__footer-line span2{
    display: inline;
  }
  .reg-section__logos{
    margin-bottom: 1rem;
  }
  .reg-section__logo-placeholder {
    width: 110px;
  }
  .office-section__desc-item{
    font-size: var(--font-size-sm);
  }
}

/* ===================================================
   小型手機版 < 375px
   =================================================== */
@media screen and (max-width: 374px) {
  html {
    font-size: 14px;
  }

  /* 防止 iOS Safari 點擊輸入框時自動縮放（字體需 >= 16px） */
  .reg-form__input,
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px;
  }

  :root {
    --font-size-5xl: 1.75rem;
    --font-size-4xl: 1.5rem;
    --font-size-3xl: 1.25rem;
  }

  /* Container */
  .container,
  .container-fluid {
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
  }

  /* Hero */
  .hero {
    min-height: 400px;
  }

  .hero__title {
    font-size: var(--font-size-2xl);
  }

  /* Form */
  .form-section__left,
  .form-section__right {
    padding: var(--spacing-3);
  }

  .form-container {
    padding: var(--spacing-4);
  }

  .form-header__title {
    font-size: var(--font-size-lg);
  }

  /* Hero Home */
  .hero-home__logo {
    width: 240px;
  }

  .hero-home__title {
    font-size: var(--font-size-base);
  }

  /* Architect Section - 小型手機版調整 */
  .architect-section {
    padding: var(--spacing-6) var(--spacing-3);
    gap: var(--spacing-4);
  }

  .architect-section__title-light {
    font-size: var(--font-size-lg);
  }

  .architect-section__title-name {
    font-size: var(--font-size-lg);
  }

  .architect-section__desc {
    font-size: var(--font-size-sm);
  }

  .architect-section__image .architect-section-img {
    max-width: 75%;
    max-height: 35vh;
  }

  .architect-section__signature-img {
    width: 50px;
    height: 50px;
  }

  /* Arch Works Section - 小型手機版調整 */
  .arch-works-section {
    padding: var(--spacing-3) 0 0;
    gap: var(--spacing-2);
  }

  .arch-works-section__content {
    padding: 0 var(--spacing-2);
  }

  .arch-works-section__title {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-2);
  }

  .arch-works-section__list li {
    font-size: 0.7rem;
  }

  .arch-gallery__caption {
    font-size: 8px;
    padding: 1px 4px;
  }

  .oot-section__circles {
    gap: var(--spacing-3);
  }

  .oot-section__circle {
    width: 7rem;
    height: 7rem;
  }

  .office-section__info{
    flex-direction: column;
  }
  .office-section__title-wrap{
    justify-content: flex-start;    
  }
  .office-section__desc-wrap{
    align-items: flex-start;
  }
  .office-section__image-wrap{
    flex:2;
  }
  .office-section__info{
    flex:2;
  }
  .office-section__title-wrap{
    flex:0;
  }
  .craft-section__header{
    flex-direction: column;
    padding: 4rem 1.5rem; 
    align-items: flex-start;
  }
  .craft-section__carousel-wrap{
    padding: 0 0 calc(var(--spacing-8) + var(--mobile-bottom-inset)) 0;
  }
  .craft-slide__label{
    padding-left:var(--spacing-6);
  }
  .reg-section__contact-label{
    min-width: 57px;
  }

  /* Transit Section - 小型手機版文字更小 */
  .transit-section__title {
    font-size: clamp(0.85rem, 3.5vw, 1.25rem);
  }
  .transit-section__title_sub {
    font-size: clamp(0.75rem, 3vw, 1rem);
  }

  .transit-section__desc {
    font-size: clamp(0.75rem, 2.8vw, 0.85rem);
  }

  .crystal-section__bg img{
    object-position: center center;
  }
  .reg-section__logos{
    margin-bottom: 1rem;
  }
  .reg-section__logo-placeholder {
    width: 110px;
  }
  .office-section__desc-item{
    font-size: var(--font-size-sm);
  }
}

/* ===================================================
   高度相關的媒體查詢
   =================================================== */

/* 短視窗（1000px 以下）：reg-section 壓縮 */
@media screen and (max-height: 1000px) {
  .reg-section {
    padding-top: 2rem;
    padding-bottom: 0.5rem;
  }
  .reg-section__form-title {
    margin-bottom: 0.5rem;
  }
  .reg-form__grid {
    row-gap: 4px;
  }
  .reg-form__field {
    padding-bottom: 0;
  }
  .reg-section__contact-bar {
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
  }
}

/* 短視窗（768px 以下）：進一步壓縮 */
@media screen and (max-height: 768px) {
  .reg-section {
    padding-top: 1.5rem;
    padding-bottom: 0.25rem;
  }
  .reg-section__form-title {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
  }
  .reg-form__grid {
    row-gap: 2px;
  }
  .reg-form__field {
    padding-bottom: 0;
  }
  .reg-form__label,
  .reg-form__input {
    font-size: var(--font-size-base);
  }
  .reg-form__check {
    width: 22px;
    height: 22px;
  }
  .reg-section__contact-bar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}

@media screen and (max-height: 600px) {
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-height, 100vh);
    padding-top: 70px;
    padding-bottom: var(--spacing-6);
  }

  .hero__content {
    padding: var(--spacing-4);
  }
  .reg-section {
    padding-top: 0.5rem;
    padding-bottom: 0;
  }
  .reg-section__form-title {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
  }
  .reg-form__grid {
    row-gap: 0;
  }
  .reg-form__field {
    padding-bottom: 0;
  }
  .reg-form__label,
  .reg-form__input {
    font-size: var(--font-size-sm);
  }
  .reg-form__check {
    width: 16px;
    height: 16px;
  }
  .reg-section__contact-bar {
    padding-top: 0.25rem;
    padding-bottom: 0;
  }
  .reg-section__footer{
    padding-bottom:0px;
  }
}

@media screen and (max-height: 650px) {
  .reg-section__footer{
    padding-bottom:0px;
  }
  .reg-section__sns-icon{
    width: 50px;
    height: 50px;
  }
}

/* ===================================================
   觸控裝置優化
   =================================================== */
@media (hover: none) and (pointer: coarse) {
  /* 增加觸控目標大小 */
  .btn {
    min-height: 44px;
  }

  .form-input,
  .form-select {
    min-height: 44px;
  }

  .header__nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 移除 hover 效果 */
  .card:hover {
    transform: none;
  }

  .form-submit:hover:not(:disabled) {
    transform: none;
  }
}

/* ===================================================
   深色模式支援（可選）
   =================================================== */
@media (prefers-color-scheme: dark) {
  /* 
   * 若需支援深色模式，可在此定義
   * 目前保持淺色主題
   */
}

/* ===================================================
   減少動畫偏好
   =================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================================
   列印樣式
   =================================================== */
@media print {
  .header,
  .back-to-top,
  .form-submit {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .hero {
    min-height: auto;
    padding: 20pt 0;
  }

  .hero::before {
    display: none;
  }

  .hero__content {
    color: #000;
  }

  .section {
    padding: 20pt 0;
    page-break-inside: avoid;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }
}