/*FOOTER*/
/* ===== footer 外框 ===== */
.footer{
  position: relative;
  width: 100%;
  height: calc(520 * var(--vw-base));
  overflow: hidden;
  background-color: #f3eee7;
}

/* 背景圖 */
.footer-bg{
  position:absolute;
  inset:0;
  z-index:1;
}
.footer-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 內容層壓在背景上 */
.site-footer{
  position:relative;
  z-index: 10;
  height:100%;
  color:#756b66;
  font-family:"Noto Serif TC","Noto Sans TC",serif;
}

/* ===== 主內容區：上方 ===== */
.footer-inner{
  height: calc(520 * var(--vw-base));
  padding: calc(70 * var(--vw-base)) calc(115 * var(--vw-base)) calc(70 * var(--vw-base));
  display:grid;
  grid-template-columns: 0.95fr 1.35fr; /* 左略窄、右略寬 */
  column-gap: calc(90 * var(--vw-base));
  align-items:start;
}

/* 左側：logo + slogan + 分隔線 */
.footer-left{
  padding-top: calc(150 * var(--vw-base));
}
.footer-logo{
  width: calc(341 * var(--vw-base));
  height:auto;
  display:block;
  margin-bottom: calc(18 * var(--vw-base));
}
.footer-slogan{
  margin:0 0 0 7vw;
  padding-top: calc(15 * var(--vw-base));
  font-size: calc(22 * var(--vw-base));
  letter-spacing:.12em;
  font-weight: 700;
  color:#756b66;
  font-family:"Noto Serif TC";
}
.footer_eng{
    font-family: "Lora", serif;
    font-weight: 600;
    font-size:calc(22 * var(--vw-base));
}
.footer-slogan,
.footer_eng{
  display: inline-block;          /* 必須 */
  transform: scaleX(0.95);        /* 字寬 95% */
  transform-origin: left center;  /* 從左縮，不會置中跑位 */
}


/* ===== 右側資訊表格 ===== */
.footer-center{
  padding-top: calc(10 * var(--vw-base));
}

/* 一列 */
.footer-row{
  display:grid;
  grid-template-columns: calc(210 * var(--vw-base)) 1fr;
  align-items:center;
  padding: calc(18 * var(--vw-base)) 0;
  border-bottom: 1px solid rgba(89,80,76,.2);
}

.fake_row3{
    position: absolute;
    left: 13vw;
    top: 15.8vw;
    width: 80.3vw;
    height: 1px;
    background-color: rgba(89, 80, 76,0.2);
}
/* 第一列上方也有線（截圖） */
.footer-row:first-child{
  border-top: none;
}
.row3{border-bottom: none;}
.footer-label{
    font-family: "Lora", serif;
    font-size:calc(18 * var(--vw-base));
    letter-spacing:.05em;
    font-weight: 600;
    color:#756b66;
}
.footer-value{
  font-size: calc(16 * var(--vw-base));
  letter-spacing:.2em;
  line-height:1.7;
  color:#756b66;
  text-decoration:none;
  font-family:"Noto Sans TC",serif;
  transition: color .35s ease;
}
.footer-value:hover{
  color: #c5a583;
}

/* ADDRESS 兩行的間距更像截圖 */
.footer-row:first-child .footer-value{
  line-height:1.85;
}

/* ===== 右下社群（對齊截圖位置：在表格下方靠右） ===== */
.footer-right{
  grid-column: 2 / 3;            /* 直接放在右側欄 */
  justify-self: end;
  /*align-self: end;*/
  margin-bottom: calc(150 * var(--vw-base)); /* 離底部 copyright bar 的距離 */
  display:flex;
  align-items:center;
  gap: calc(16 * var(--vw-base));
}

/* “加入旺群 | ” */
.footer-follow{
  font-size: calc(16 * var(--vw-base));
  font-family:"Noto Serif TC";
  letter-spacing:.2em;
  color:#59504c;
  opacity:1;
  display: block;
  transition: color .35s ease;
}
.footer-follow:hover{
  color:#c5a583;
}

.footer-value,
.footer-label,
.footer-follow{
  display: inline-block;          /* 必須 */
  transform: scaleX(0.95);        /* 字寬 95% */
  transform-origin: left center;  /* 從左縮，不會置中跑位 */
}


/* icon 列 */
.footer-social{
  display:flex;
  gap: calc(20 * var(--vw-base));
}

/* 圖片 icon（灰/金疊圖換色） */
.social-btn{
  position:relative;
  width: calc(30 * var(--vw-base));
  height: calc(30 * var(--vw-base));
  display:block;
  margin-left: 0.6vw;
}
.social-btn::before{
    content: "";
    position: absolute;
    left: -0.85vw;
    top: calc(10 * var(--vw-base));
    opacity: 1;
    background-color: #867b75;
    width: 1px;
    height: calc(10 * var(--vw-base));
}
.social-btn img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
/* 預設：原本顯示、hover 隱藏 */
.social-btn .base{
  opacity: 1;
  transition: opacity .35s ease;
}
.social-btn .hover{
  opacity: 0;
  transition: opacity .35s ease;
}
/* hover：原本消失、hover 出現 */
.social-btn:hover .base{
  opacity: 0;
}
.social-btn:hover .hover{
  opacity: 1;
}


/* ===== 最底部 bar（截圖那條底線＋文字靠左） ===== */
.footer-bottom{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: calc(35 * var(--vw-base));
  display:flex;
  align-items:center;
  padding: 0 calc(115 * var(--vw-base));
  font-size: calc(12 * var(--vw-base));
  letter-spacing:.05em;
  color:#756b66;
  gap: calc(15 * var(--vw-base));
  font-family:"Noto Sans TC",serif;
}
.footer-bottom span{
  white-space:nowrap;
}

.footer-bottom span a{
  display: inline-block;
  font-family:"Noto Sans TC",serif;
  color:#756b66;
}


button:focus,
button:focus-visible,
a:focus,
a:focus-visible {
  outline: none;
  box-shadow: none;
}






/* =========================================
   Back To Top 按鈕樣式
========================================= */
.back-to-top {
    position: fixed;
    right: 2.85vw; 
    bottom: 3vw; 
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(0); 
}
.back-to-top.at-footer {
  position: absolute; 
  bottom: 29vw;       
  right: 2.85vw;      
}
.back-to-top.active {
    opacity: 1;
    visibility: visible;
}

.btt-text {
    font-size: calc(18 * var(--vw-base));
    line-height: calc(20 * var(--vw-base));
    letter-spacing: .2em;
    color: #897e79;
    margin: 0;
    text-align: right;
    font-family: "Lora", serif;
    font-weight: 600;
    transition: color 0.3s ease;
}

/* 圖片線條區塊 */
.btt-line-img {
    width: 6px;   /* 根據你的圖片寬度微調 */
    height: 60px; /* 線條高度 */
    background-image: url('../img/ar-top-be.png'); /* 預設圖片 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.3s ease, height 0.3s ease;
}

/* Hover 狀態反映 */
.back-to-top:hover .btt-line-img {
    background-image: url('../img/ar-top-af.png'); /* 替換圖片 */
    height: 70px; /* 選擇性：Hover 時稍微拉長增加動態感 */
}

.back-to-top:hover .btt-text {
    color: #c5a583; /* 文字同步變色 */
}