/* === Reset === */

* { box-sizing: border-box; }

html:focus-within { scroll-behavior: smooth; }

body { margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

img, picture { max-width: 100%; display: block; }

button, input, select, textarea { font: inherit; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary) 60%, white); outline-offset: 2px; }

h1{margin: 0;}

h2{margin: 0;}



/* === 設計 Token === */

:root{

  /* —— 字級（px → rem） —— */

  /* clamp(最小值, 偏好值, 最大值)

     「偏好值」通常設為隨螢幕寬度變化的 vw 單位，

     例如 2vw 在手機約 7.5px，在桌機約 19.2px，可讓字級平滑過渡。 */



  --fs-bigTitle: clamp(1.25rem, 1rem + 1vw, 1.75rem); /* 20px → 28px */

  --fs-title: clamp(1.125rem, 0.9rem + 0.9vw, 1.5rem); /* 18px → 24px */

  --fs-body: clamp(1rem, 0.8rem + 0.5vw, 1.25rem); /* 16px → 20px */

  --fs-note: clamp(0.875rem, 0.75rem + 0.4vw, 1.125rem); /* 14px → 18px */



  /* —— 行高（unitless，設計稿 → 相對字級）—— */

  /* 20px → 28px = 1.4 ; 16px → 24px = 1.5 */

  --lh-16: 1.5;   /* 給 16px m內文 */

  --lh-20: 1.4;   /* 給 20px px內文/m小標題 */





  --topbar-h: 50px;

  --c-sky: #B4E4FF;                               /* 上方淡藍 */

  --c-primary: #3EA1F6;                               /* Pill 藍 */

  --c-text: #1B1B1B;

  --c-text-secondary: #525252;

  --radius-pill: 999px;

  --shadow-bottom: 0 4px 12px #438BC8;





  --brand: #FC4C53;/*按鈕強調色*/

  --radius-sm: 10px;

  --radius-md: 20px;

  --radius-lg: 24px;

  --shadow-lg: 0 20px 50px rgba(0,0,0,.25);



}



/* === 基礎排版 === */

body {

  font-family: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;

  font-size: var(--fs-body);

  color: var(--color-text);

  /* background: var(--c-sky); */

  line-height: 1.6;

}



.d-flex{display: flex;}



.flex-d-col{flex-direction: column;}

.flex-d-row{flex-direction: column;}







/* —— 圓角 —— */

.rounded-sm { border-radius: var(--radius-sm); }

.rounded-md { border-radius: var(--radius-md); }

.rounded-lg { border-radius: var(--radius-lg); }



.mb-xl{margin-bottom: 100px;}

@media(max-width:768px){

  .mb-xl{margin-bottom: 13vw;}

}

.mb-l{margin-bottom: 50px;}

@media(max-width:768px){

  .mb-l{margin-bottom: 3vw;}

}



.mb-m{margin-bottom: 24px;}

@media(max-width:768px){

  .mb-m{margin-bottom: 2vw;}

}



.mb-s{margin-bottom: 10px;}

@media(max-width:768px){

  .mb-s{margin-bottom: 1vw;}

}









/*----------------------------------------------start--------------------------------------------------------*/







/* 基本設定 */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }                     /* 平滑捲動 */





.container {

  max-width: 1220px;

  padding-inline: 16px;

  margin-inline: auto;

}





body {

  background-image: url("../img/bg_repeat_pc.png");

  background-repeat: repeat;       /* X 軸和 Y 軸都重複 */

  background-size: 1940px 20px;

  overflow-x: hidden; /* ✅ 關掉水平捲軸 */

}

@media (max-width: 767px) { 

body{

    background-size:970px 10px;

}

}



@media (max-width: 767px) { 

  /* 手機版樣式 */

  .pc_display{display: none;}

  .m_display{ display: block;}

 }

@media (min-width: 768px) { 

  /* 桌機版樣式 */ 

  .pc_display{display: block;}

  .m_display{ display: none;}

}



/* Topbar 外觀（依你的截圖做近似風格） */

.topbar {

  position: sticky; top: 0; z-index: 1000;

  height: var(--topbar-h);

  background: var(--c-sky);

  box-shadow: var(--shadow-bottom);

}

.topbar__inner {

  height: var(--topbar-h);

  display: flex;

  justify-content:space-between;

  align-items: center;

  margin: 0 30px 0 30px;

}

@media (max-width: 767px) { 

  .topbar__inner {margin: 0 3vw;}

}





.topbar__brand img{

  height: 28px;         /* 用高度固定視覺，讓寬度自動等比 */

  width: auto;          /* 取消 320px 寫死 */

  max-width: 40vw;      /* 手機上避免過大 */

}









/* 中：pills 群組 */

.topbar__pills {

  list-style: none; margin: 0; padding: 0;

  display: inline-flex; align-items: center; gap: 8px;

  background: var(--c-primary);

  border-radius: 28px;

  padding: 0px 20px;

  justify-self: center;

}

.pill {

  display: inline-block;

  color: #fff; text-decoration: none;

  padding: 4px 10px;

  border-radius: var(--radius-pill);

  font-size: 20px;

  font-weight: 750; letter-spacing: .02em;



  white-space: nowrap;

  transition: background-color .2s ease, opacity .2s ease;

}

.pill:hover{ 

    color: #fff1bb;

    /*background: rgba(255, 255, 255, 0.15); 增加透明的白色*/

}







@media(max-width:1140px){

  .pill{display: none;}

}







/* 右 icon 按鈕*/

.topbar__actions {

  display: inline-flex;

  align-items: center;

  justify-content: right;

  gap: 10px;

  width: 290px;

}





/* 共有的圓形 icon 按鈕樣式 */

.icon-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 30px;

  height: 30px;

  border-radius: 50%;

  background: #fff;

  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;

  transition: box-shadow 0.2s ease, transform 0.2s ease;

}

.icon-btn img {

  width: 30px;

  height: 30px;

  object-fit: contain;

  display: block;

}

.icon-btn:hover {

  transform: translateY(-1px);

}



/* icon 與登入字級在手機略縮，避免擠壓 */

@media (max-width: 767px){

  .icon-btn { width: 28px; height: 28px; }

  .icon-btn img { width: 28px; height: 28px; }

  .login-btn { font-size: 0.95rem; }

}

@media (max-width: 400px){

.login-btn span{display: none;}

}







/* 登入按鈕：加文字的版本 */

.login-btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  height: 30px;

  border-radius: 16px;

  text-decoration: none;

  font-size: var(--fs-body);

  font-weight: 600;

  color: #0b2b4a;

  transition: background-color .2s ease, transform .2s ease;

}

.login-btn img {

  width: 30px;

  height: 30px;

}

.login-btn:hover {

  transform: translateY(-1px);

}





/* 讓錨點滾動時不會被固定頂欄遮住 */

#campaignDetails, #reward, #awardWinnerList, #notice { scroll-margin-top: calc(var(--topbar-h) + 12px); }









/*body橢圓-------------------------------------------------*/





.top .oval-bg{

  position: absolute;

  left: 50%;

  top: -690px;                 /* 以視窗比例定位更穩 */

  transform: translateX(-50%);

  width: 2800px;  /* 手機用 140vw，桌機上限 2470px */

  aspect-ratio: 2470 / 1184;  /* 維持比例 */

  border-radius: 50%;

  background: rgba(67,139,200,.2);

  z-index: -3;

  pointer-events: none;

}



.top{

position: relative;

overflow: clip;}









@media(max-width:991px){

    .top .oval-bg{

      top: -750px;

    }

}



@media(max-width:767px){

  .top .oval-bg{

      top: -19vw;  

      width: min(200vw, 2470px);  /* 手機用 140vw，桌機上限 2470px */

  }

}

@media(max-width:320px){

  .top .oval-bg{

      top: -10vw;  

  }

}











.top__main img{width: 100%; position: relative; left: -30px; margin: 0 auto; padding-top: 40px;}

@media(max-width:767px){

  .top__main img{width: 95vw; left: 0vw;}

}



.topBox{

  position: relative;

  width: min(922px, 95vw);  /* 以 922px 當設計稿寬，手機則 95vw */

  margin: 0 auto;

}





 .top_deco01,.top_deco02,.top_deco03{

  position: absolute;

  animation: floatUpDown 4.5s ease-in-out infinite; 

  /* 時間：4.5s，可自行調 3～6s */

  }



 .top_deco01{

  top: 26%;      /* 例：距離主圖上緣約 24% 高度 */

  left: -2%;   /* 125 / 922 ≒ 13.6% */

  width: min(220px, 25vw);;

  }

 .top_deco02{

  top: 40%;

  right: 7.5%;  /* 198 / 922 ≒ 21.5% */

  width: min(165px, 18vw);

  z-index: -1;

}

 .top_deco03{

  top: 11%;

  right: 9.5%;  /* 198 / 922 ≒ 21.5% */

  width: min(214px, 22vw);

  z-index: -2;

  }





/* @media(max-width:1120px){

 .top_deco01{

  left: 0vw;

  width: 20vw;

  }

} */











.top__btnBox{

  width: fit-content;

  margin: 0 auto;

  position: relative;

  bottom:100px;

}

@media(max-width:910px){

  .top__btnBox{bottom:10vw;}

}







.img-btn {

  display: inline-block;

  position: relative;

  width: fit-content;

  cursor: pointer;

  text-decoration: none;

}





/* 讓兩張圖疊在一起 */

.img-btn img {

  display: block;

  max-width: min(160px, 25vw);

  height: auto;

}



/* 預設：hover 圖片隱藏 */

.img-btn__hover {

  position: absolute;

  inset: 0;                 /* 四邊都貼齊 */

  opacity: 0;

  transition: opacity 0s ease;

}



/* hover 時切換 */

.img-btn:hover .img-btn__hover {

  opacity: 1;

}

.img-btn:hover .img-btn__normal {

  opacity: 0;

}





/*彈跳視窗*/





/* 方便看排版 */

body { font-family: system-ui, "PingFang TC", "Noto Sans TC", sans-serif; margin:0; }

.page { padding: 2rem; }





/* A11y(無障礙Accessibility)：隱藏但仍被讀屏器讀取 */

.visually-hidden{

  position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;

  clip:rect(0 0 0 0); white-space:nowrap; border:0;

}















.areaTitle{

  width: min(430px, 70vw);

  margin: 0 auto 20px auto;

}

@media(max-width:768px){

.areaTitle{

    margin: 0 auto 1vw auto;



}

}







/*活動辦法campaignDetails*/

#campaignDetails ul{

  list-style: decimal;

  font-size: var(--fs-body);

}







/*本期大獎reward*/

#reward{

position: relative;

overflow-x: hidden;

overflow-x: clip;

height: 671px;

}



.reward_bg{

  position: absolute;

  max-width: none;

  height: 671px;

  width: 2000px;

  left: 50%;

  transform: translateX(-50%);

  z-index: -1;

}



#reward .container.d-flex{

 align-items: center;

 gap: 10px;

}



.reward_btn_box{

  margin-top: 285px;

  position: relative;

  margin-bottom: 10px;

}



.reward_btn{

  position: absolute;

  bottom: 0;

  right: 0;

  z-index: 10;

  width: 425px;

}



.reward_btn img{

  display:block;

  width:100%;   /* 跟著你原本 .reward_btn 的寬度縮放 */

  height:auto;

}



.reward_btn .reward_hover{

  position:absolute;  /* 疊在同一個位置 */

  inset:0;            /* 四個邊都貼齊 */

  opacity:0;          /* 一開始看不到 */

  pointer-events:none;/* 不擋點擊 */

}





@media (hover: hover) and (pointer: fine) {



  /* 滑鼠移到按鈕上：讓 hover 圖顯示出來 */

  .reward_btn:hover .reward_hover{

    opacity:1;

  }



  /* 同時把正常圖藏起來 */

  .reward_btn:hover .reward_normal{

    opacity:0;

  }

}





.reward_rule p{

  margin: 0;

}



@media(max-width:767px){



  #reward{

    height: auto;

  }

  .reward_rule{

    width: 80vw;

    background-color: #ceecff;

    border-radius: var(--radius-sm);

  }

  .reward_rule p{padding: 3vw; text-align: left;}

  .reward_bg_top_repeat{

    background: url("../img/giftBox_m_repeat.png") repeat-y center top;

    background-size: 100% auto;      /* x 軸拉滿，y 軸照原比例重複 */

    overflow: hidden;     /* 防止邊緣溢出 */

    z-index: -1;

  }

  .reward_bg{

    width: 100vw;

    height: auto;

  }

  .reward_btn_box{

    margin-top: 0vw;

    padding-inline: 8vw;

    margin-bottom: 2vw;

  }

  .reward_btn{

    width: 100%;

    position: relative;

  }

  .reward_btn__hover {

      position: absolute;

      width: 80vw;

      left: 50%;

      transform: translateX(-50%);

  }

  .reward_btn img{width: 70vw; margin: 0 auto;}

  .reward_content{

    display: inline-block;

    margin-bottom: .5vw;

  }

  #reward span{font-size:var(--fs-body); font-weight: 900; margin-bottom: 5vw;} /* 內文: PC最大20px，MB最小16px */



}





@media(max-width:420px){

  .reward_btn_box{

      padding-inline: 8vw;

      margin-bottom: 0vw;

  }

}



@media(max-width:320px){

  .reward_btn_box{

      padding-inline: 10vw;

      margin-bottom: 0vw;

  }

}



/*  */

#campaignStep .box{

  display:flex; justify-content:center; gap:30px;

}



#campaignStep .stepBtnBox{

  display:flex; flex-direction:column; gap:30px;

  margin-top:30px; width:fit-content; position:relative;

}



/* 讓每顆按鈕成為「可疊圖」的小盒子 */

#campaignStep .img-btn{

  display:inline-block;

  position:relative;

  width:fit-content;

  cursor:pointer;

  text-decoration:none;

}



/* 兩張圖尺寸一致，疊在一起 */

#campaignStep .img-btn img{

  display:block;

  max-width:min(242px, 35vw);

  height:auto;

}



/* hover 圖層先隱藏，絕對定位疊滿父層 */

#campaignStep .img-btn__hover{

  position:absolute;

  inset:0;          /* 上右下左都 0，完全疊齊 */

  opacity:0;

  transition:opacity 0s linear;

}



/* 滑入時：顯示 hover 圖，隱藏 normal 圖 */

#campaignStep .img-btn:hover .img-btn__hover { opacity:1; }

#campaignStep .img-btn:hover .img-btn__normal{ opacity:0; }



/* （可選）鍵盤可達性：用 Tab 聚焦時也切換 */

#campaignStep .img-btn:focus-visible .img-btn__hover { opacity:1; }

#campaignStep .img-btn:focus-visible .img-btn__normal{ opacity:0; }





/* awardWinnerList輪播 -----------------------------------------------*/

/* 尺寸控制：PC 顯示 1.2 張，MB 顯示 1 張 */

.carousel {

  --slides-per-view: 1.2;        /* PC: 1 張 */

  --gap: 1rem;

  position: relative;

  font-size: var(--fs-title);

  line-height: normal;

}



/* 視窗與軌道（scroll-snap）*/

.carousel__viewport{

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

}

.carousel__viewport::-webkit-scrollbar{ display:none; }



.carousel__track{

  display: flex;

  gap: var(--gap);

  padding: .25rem 0 1.25rem;   /* 底部留空放小點點 */

}



/* 單張卡片寬度：容器寬 / slides-per-view */

.slide{

  scroll-snap-align: start;

  flex: 0 0 calc((100% - var(--gap) * (var(--slides-per-view) - 1)) / var(--slides-per-view));

}







@media (max-width: 1140px){

  .carousel{ --slides-per-view: 1; }



}





/* mb：顯示 1.2 張 */

@media (max-width: 991px){

  .carousel{ --slides-per-view: 1.5; }

  .slide{

    flex-direction: column;

  }

}



@media (max-width: 767px){

    .carousel{ --slides-per-view: 1; }

    .step_pic{position: absolute; width: 60vw;}



    #campaignStep .box{

      padding-bottom: 3vw;

    }



    #campaignStep .stepBtnBox{

    gap:13vw;

    width: 68vw; position:relative;

    }



    #campaignStep .stepBtnBox::before{

        content:"";

        position:absolute;

        left: 15.2vw;

        top: .25rem;

        bottom: .25rem;

        width: 0.8vw;

        background: var(--c-text);

        border-radius: 999px;

    }

    .stepBtnBox_content{position: relative;} 

    #campaignStep .img-btn{

      position: absolute;

      bottom: -3vw;

      left: 22vw;

    }



}





/* 卡片視覺（依你的稿件風格） */

.card{

  background: #fff;

  border: 6px solid #e33;

  border-radius: 1.5rem;

  overflow: hidden;

  position: relative;

  /* box-shadow: 0 0 0 3px #000;   

  box-sizing: border-box; */

}





.card__media img{

  display: block; width: 288px; height: auto; border-radius: 1rem; margin: 20px;

}

.card__body{ padding: 0 1.25rem 1.25rem; width:70%; }

.meta{ display: grid; margin: 20px 0 0 0;}

.meta dt{ font-weight: 900; width: 130px; }

.meta dd{ margin: 0; }

.meta > div{ display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }

.sep{ border: 0; border-top: 1px solid #e8e8e8; margin: 10px 0 10px; }



/* 得獎者：手機單欄，PC 兩欄自動排 */

.winners{ display: grid; grid-template-columns: auto 1fr; gap: 10px; }

.winners__title{ margin: 0; font-weight: 900; width: 130px; line-height: normal; }



/* === PC 預設 === */

.winners__list{

  margin: 0;

  padding: 0;

  list-style: none;

  display: grid;

  grid-template-columns: repeat(2, max-content); /* 預設兩欄 */

  column-gap: 2.5rem;

  row-gap: .5rem;

  align-items: start;

  line-height: normal;

}



.winners__list li{

  white-space: nowrap;

}



/* === 手機以下，改為單欄 === */

@media (max-width: 991px){

  .winners__list{

    grid-template-columns: 1fr;  /* 改成單欄 */

    row-gap: .35rem;

  }

  .card__media {margin: 20px 20px 0 20px;}

  .card__media img{

  width:fit-content; margin: 0;

  }

.card__body{ width:100%; }



}





@media (max-width: 767px){

  .meta dt{ width: 24vw;}

  .winners__title{width: 24vw;}

  .carousel{font-size: var(--fs-body);}

  .meta > div{gap: 1vw;}

  .winners{gap: 1vw;}



}





/* 左右箭頭 */

.carousel__nav{

  position: absolute; top: 50%; transform: translateY(-50%);

  width: 48px; height: 48px; border-radius: 50%;

  border: none; background: rgba(255, 255, 255, 0.35); box-shadow: 0 6px 16px rgba(0,0,0,.15);

  cursor: pointer; z-index: 2;

  color: var(--c-text);

}

.carousel__nav.prev{ left: -4px; }

.carousel__nav.next{ right: -4px; }



/* 小點點 */

.carousel__dots{

  display: flex; justify-content: center; gap: .5rem;

  position: absolute; left: 0; right: 0; bottom: 0;

}

.carousel__dots button{

  width: 8px; height: 8px; border-radius: 50%;

  border: 0; background: #cdd6e0; cursor: pointer;

  padding: 0;

}

.carousel__dots button[aria-current="true"]{ background: var(--c-text);  padding: 0; }





@media (max-width: 767px){

.carousel__nav.prev{ left: -4px; }

.carousel__nav.next{ right: -4px; }

}





/*new*/



.awardWinnerList {

  font-size: var(--fs-title);

  line-height: normal;

}



/* 外層區塊照舊：#awardWinnerList, .awardWinnerList_Box 保留你原本設定 */



.awardWinnerList_Box {

  position: relative;

}

.awardWinnerList_Box .swiper {

  width: 100%;

}



/* Swiper 預設會用 flex 橫排，我們只要讓 slide 本身維持你的 card 寬度 */

.awardWinnerList_Box .swiper-slide {

  /* 如果想 PC 一次看 1.2 張卡片，可以用寬度 + Swiper 設定一起控制 */

  height: auto;        /* 重要：照內容高度 */

  display: flex;       /* 保留 card 裡面 d-flex 的行為 */



}



/* 小圓點樣式可以客製（先給一個簡單版） */

.awardWinnerList_Box .swiper-pagination {

  /* margin-top: 1rem; */

  position: static;    /* 不要疊到內容上，而是正常排在下方 */

  text-align: center;

}



@media (max-width: 991px){

  .awardWinnerList_Box .swiper-slide {

    flex-direction: column;

  }

}

@media (max-width: 767px){

  .awardWinnerList{font-size: var(--fs-body);}

}









/* 左右箭頭容器 */

.awardWinnerList_Box .swiper-button-next,

.awardWinnerList_Box .swiper-button-prev {

  width: 48px;

  height: 48px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.4);

  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);

  color: var(--c-text);

  /* 讓它在區塊中垂直置中左右兩邊 */

  top: 50%;

  transform: translateY(-50%);

}



/* 右箭頭靠右 */

.awardWinnerList_Box .swiper-button-next {

  right: -4px;

}



/* 左箭頭靠左 */

.awardWinnerList_Box .swiper-button-prev {

  left: -4px;

}



/* 箭頭本體（使用 Swiper 內建 icon 字型）*/

.awardWinnerList_Box .swiper-button-next::after,

.awardWinnerList_Box .swiper-button-prev::after {

  font-size: 18px;

}





.awardWinnerList_Box .swiper-button-next::after, .awardWinnerList_Box .swiper-button-prev::after {font-size: 10px; font-weight: 800;}





.swiper-pagination-bullet-active {

    background: var(--c-text);

}











#notice ul{

  list-style: decimal;

}



.rightsReserved{

  text-align: center;

}







/* ---- Modal ---- */

.modal{ position:fixed; inset:0; display:none; z-index:1000; }

.modal.is-open{ display:block; }



/* 40% 黑色遮罩 */

.modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.4); }



/* 對話框 */

.modal__dialog{

  position:relative;

  top:50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: min(92vw, 800px);

  background:#fff;

  background-image: url("../img/bg_repeat_popup.png");

  background-repeat: repeat;       /* X 軸和 Y 軸都重複 */

  background-size: 400px;

  overflow: hidden;   

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-lg);

  padding: clamp(1.25rem, 4vw, 3.125rem);

  outline: none;

}



@media (max-width: 767px){

  .modal__dialog{

    display: flex;

    flex-direction: column;



    max-height: 85svh;           /* 新一代 viewport 單位，較準確（含瀏海/工具列） */

    max-height: 85vh;            /* 備援：舊瀏覽器使用 */

    padding-left: 0.5rem;

    padding-right: 0.5rem;



  }



    .modal__body{

    /* ✅ 這裡負責滾動 */

    overflow: auto;

    -webkit-overflow-scrolling: touch; /* iOS 慣性滑動 */

    overscroll-behavior: contain;      /* 避免內捲帶動外層回彈/刷新 */

    padding-bottom: max(1rem, env(safe-area-inset-bottom)); /* iPhone 底部安全區 */

    padding-left: 0.75rem;

    padding-right: 0.75rem;

  }

}



/* 關閉鈕 */

.modal__close{

  position:absolute; top:.5rem; right:.5rem;

  width:2rem; height:2rem; border:2px solid var(--c-text); border-radius:50%;

  background:#0000000d; cursor:pointer; font-size:1.25rem; line-height:1; color: var(--c-text);

}

.modal__close:hover{ background:#0000001f; color: var(--c-text); }



/* 標題/分隔/段落 */

.modal__title{ margin:0 0 1rem 0; font-size: var(--fs-title);  text-align: center; font-weight: 700;}

.modal__divider{ border:none; border-top:1px solid #9A9A9A; margin:1rem 0; }

/* .modal__section{ margin-top:1rem;} */

.modal__section p{ margin:0;}

.modal__q{ margin:.75rem 0 .25rem; font-weight:900; font-size: var(--fs-body); }



/* 表單 */

.modal__form {

  display: grid;

  grid-template-columns: 2fr 1fr; /* 左2份：右1份 */

  gap: 10px;                     /* 中間間距 */

  align-items: center;

  width: min(440px,70vw);                  /* 總寬度固定 */

  margin: 0 auto;                /* 置中 */

  padding-bottom: 20px;

}

.modal__input{

  height:2.75rem; padding:0 .875rem; border-radius:999px; border:1px solid #d8dbe0; font-size:1rem;

}

.modal__input:focus-visible{ outline:2px solid #acd3ff; outline-offset:2px; }

.modal__submit{

  height:2.75rem; padding:0 1.25rem; border:0; border-radius:999px; background:var(--brand);

  color:#fff; font-weight:900; cursor:pointer;

}

.modal__submit:hover{ filter:brightness(.95); }



/* 小尺寸：表單改直排 */

@media (max-width: 767px){ 

  .modal__title{font-size: var(--fs-title); margin-bottom: 1vw;} 

  .modal__form{ padding-bottom: 1rem; }}

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









/*活動編號*/



.modal_codeModal{

 gap: 1.25rem;

}

.modal_codeModal_pic{

  width: 35%;

  height: auto;

  border-radius: 5px;

}



@media(max-width:767px){

  .modal__section.modal_codeModal{

    flex-direction: column;

    align-items: center;

  }

  .modal_codeModal_pic{

    border-radius: var(--radius-sm);

    width: min(70vw, 100vw );

  }

}





/* APP下載 */



#downloadModal .content{

  flex-direction: row;

  gap: 24px;

}

#downloadModal .content .btnBox{

  flex-direction: column;

  gap: 10px;

  width: 166px;

}

#downloadModal .content .appQRcode{

  width: 208px;

  border-radius: var(--radius-sm);



}

#downloadModal .modal__section{

  align-items: center;

}



@media(max-width:767px){

#downloadModal .content{

  flex-direction: column;

}

}





.register_step{

  gap: 16px;

}

.register_step_card img{

border-radius: var(--radius-sm);

}

@media(max-width:767px){

  .register_step{

    flex-direction: column;

    align-items: center;

    gap: 1rem;

  }

  .register_step_card img{

    width: 60vw;

  }

}



/*今日小確幸*/

/* 面板通用樣式（可視需求微調） */

.panel { display: grid; text-align: center;}

.panel[hidden] { display: none !important; }



.panel p{margin-top: 0;}

.panel__desc{display: inline-block;}

.panel__desc b{color: var(--c-primary);}

.panel__note{color: var(--c-text-secondary); margin-bottom: 0; font-size: var(--fs-note);}



.btn { display:inline-flex; align-items:center; justify-content:center;

       padding: .6rem .5rem; border-radius: .5rem; }

.btn-login {color:#3EA1F6; }





/* 🔧 DEV ONLY: Debug Panel */

.debug-panel{

  display: none;

  position: fixed; right: 1rem; bottom: 1rem;

  background: rgba(0,0,0,.75); color: #fff;

  padding: .75rem; border-radius: .75rem; z-index: 9999;

  font: 12px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;

  box-shadow: 0 8px 24px rgba(0,0,0,.25);

}

.debug-panel .row{ display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }

.debug-panel button{

  border: 0; padding: .4rem .6rem; border-radius: .5rem; cursor: pointer;

  background: #2C7BE5; color:#fff;

}

.debug-panel input{ vertical-align: middle; margin-right: .35rem; }

.debug-panel kbd{ background: #333; padding: 0 .35rem; border-radius: .25rem; }











.goTop {

  position: fixed;

  right: 1.5rem;        /* 離右邊距 */

  bottom: 1.5rem;       /* 離下邊距 */

  width: 3.5rem;

  height: 3.5rem;

  border-radius: 50%;

  background: var(--c-primary);

  color: #fff;

  font-size: 0.9rem;

  font-weight: 900;

  line-height: 1.1;

  text-align: center;

  box-shadow: var(--shadow-bottom);

  border: none;

  cursor: pointer;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.3s ease, transform 0.3s ease;

  z-index: 50;

}



.goTop.show {

  opacity: 1;

  transform: translateY(0);

}



/* hover 效果 */

.goTop:hover {

  background: color-mix(in srgb, var(--c-primary) 85%, white);

}



/* 小螢幕微調 */

@media (max-width: 768px) {

  .goTop {

    right: 1rem;

    bottom: 1rem;

    width: 3rem;

    height: 3rem;

    font-size: 0.75rem;

  }

}











#todayHappyModal .panel{

  display: none;

}

#todayHappyModal .panel.active{

  display: grid;

}