:root{
  --maroon:#7a4e49;
  --maroon-deep:#6a423d;
  --mist:#9aa6ad;
  --footer-bg:#ece8e6;
  --ink:#3c2b29;
  --white:#ffffff;
  --max:480px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:"Noto Serif TC",serif;
  background:#aeb6bb;
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  display:flex;
  justify-content:center;
}

/* 整體頁面容器（手機版型置中） */
.page{
  position:relative;
  width:100%;
  max-width:var(--max);
  min-height:100vh;
  background:transparent;            /* 底圖改由固定的 .bg-mountain 提供 */
  box-shadow:0 0 60px rgba(0,0,0,.25);
  overflow-x:hidden;                 /* 防止上師合照向右出血造成水平捲動 */
}

/* 固定山景背景：position:fixed → 捲動時固定不動，只有前景元素移動 */
.bg-mountain{
  position:fixed;
  top:0;bottom:0;left:50%;
  transform:translateX(-50%);
  width:100%;max-width:var(--max);
  background:#9aa6ad url("../images/bg.jpg") center center / cover no-repeat;
  z-index:-1;
  pointer-events:none;
}

/* ---------- 頂部選單 ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;
  padding:14px 18px;
  background:linear-gradient(to bottom,rgba(236,238,240,.85),rgba(236,238,240,0));
  backdrop-filter:blur(2px);
}
.menu-btn{
  background:none;border:none;cursor:pointer;padding:6px;
  border-radius:8px;line-height:0;
}
.menu-btn img{width:34px;height:auto;display:block;}
.topbar-brand,.topnav{display:none;}  /* 手機版不顯示，桌機版才出現 */

/* ---------- 側邊抽屜選單 ---------- */
.drawer{
  position:fixed;top:0;left:0;z-index:60;
  width:74%;max-width:300px;height:100%;
  background:rgba(74,55,52,.97);
  backdrop-filter:blur(6px);
  transform:translateX(-105%);
  transition:transform .32s ease;
  padding:64px 28px 28px;
}
.drawer.open{transform:translateX(0);}
.drawer{overflow-y:auto;}
.drawer-close{
  position:absolute;top:14px;right:18px;
  background:none;border:none;color:#fff;font-size:34px;
  line-height:1;cursor:pointer;z-index:1;
}
.drawer ul{list-style:none;}
.drawer li{border-bottom:1px solid rgba(255,255,255,.15);}
.drawer-menu>li>a,
.drawer-parent-row>a,
.drawer-sub-toggle{
  display:block;width:100%;text-align:left;
  background:none;border:none;font-family:inherit;cursor:pointer;
  color:#f3ece9;text-decoration:none;
  padding:15px 4px;font-size:1.08rem;letter-spacing:2px;
}
.drawer-menu>li>a:hover,
.drawer-parent-row>a:hover,
.drawer-sub-toggle:hover{color:#fff;}
/* 關於我們：文字可點跳轉，箭頭只負責展開子選單 */
.drawer-parent-row{display:flex;align-items:center;justify-content:space-between;}
.drawer-parent-row>a{flex:1;}
.drawer-parent-row .drawer-sub-toggle{width:auto;flex:0 0 auto;padding:15px 8px;}
.drawer-sub-toggle{display:flex;justify-content:space-between;align-items:center;}
.drawer-sub-toggle .caret{transition:transform .25s ease;font-size:.9em;}
.drawer-has-sub.open .drawer-sub-toggle .caret{transform:rotate(180deg);}
/* 子選單：預設收合 */
.drawer-sub{
  display:none;
  padding:4px 0 12px 14px;
  border-left:2px solid rgba(255,255,255,.18);
  margin:0 0 8px 4px;
}
.drawer-has-sub.open .drawer-sub{display:block;}
.drawer-sub-h{
  display:block;color:#e6c4a3;
  font-size:.82rem;letter-spacing:.14em;
  padding:10px 4px 4px;
}
.drawer-sub a{
  display:block;color:#e7ddd9;text-decoration:none;
  padding:9px 4px;font-size:1rem;letter-spacing:1px;
}
.drawer-sub a:hover{color:#fff;}
.drawer-overlay{
  position:fixed;inset:0;z-index:50;
  background:rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transition:opacity .3s ease;
}
.drawer-overlay.show{opacity:1;visibility:visible;}

/* ---------- 主視覺 ---------- */
.hero{
  position:relative;
  text-align:center;
  padding:30px 24px 56px;
  margin-top:-66px; /* 讓 hero 從頂端開始，topbar 浮在上面 */
  padding-top:96px;
}
.hero-logo{
  margin:0 auto 30px;
  width:240px;max-width:64%;
}
.hero-logo img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.18));
}
.ribbon img{display:block;width:100%;height:auto;}
.ribbon{display:block;transition:transform .2s ease,filter .2s ease;}
.ribbon:hover{transform:translateY(-2px);filter:brightness(1.05);}

/* 上師法語 ＋ 上師合照：並排，照片置於右側並向右出血 */
.hero-yulu{
  position:relative;
  width:100%;max-width:440px;
  margin:0 auto;
  min-height:200px;
  display:flex;align-items:center;
}
.ribbon-yulu{
  position:relative;z-index:2;
  flex:0 0 auto;
  width:190px;margin:0;
}
.hero-teachers{
  position:absolute;z-index:1;
  right:-9%;top:50%;
  transform:translateY(-50%);
  width:56%;               /* 縮小並右移，避免與上師法語重疊 */
  pointer-events:none;
}
.hero-teachers img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.22));
}

/* ---------- 介紹 ---------- */
.intro{
  text-align:center;
  padding:6px 22px 40px;
}
.people{margin:0 auto 26px;max-width:380px;}
.people img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.12));}
.intro-text{
  font-size:1.02rem;line-height:2.1;letter-spacing:.04em;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.2);
  margin-bottom:34px;font-weight:500;
}
.ribbon-contact{width:200px;margin:0 auto;}

/* ---------- 服務項目（交錯雙欄卡片）---------- */
.categories{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:12px;               /* 兩欄之間留空隙，不再貼太近 */
  padding:18px 12px 52px;
}
.cat-col{
  display:flex;
  flex-direction:column;
  width:48%;
}
.cat-col-right{
  margin-left:0;
  padding-top:30%;        /* 右欄向下錯位 */
}
.card{
  display:block;
  margin-top:18%;         /* 同欄卡片拉開距離，貼近設計圖的「開」 */
  transition:transform .25s ease, filter .25s ease;
}
.card:first-child{margin-top:0;}
.card img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));
}
.card:hover{transform:translateY(-5px) scale(1.015);}
.card:hover img{filter:drop-shadow(0 10px 20px rgba(0,0,0,.28));}

/* ---------- 地圖 ---------- */
.location{padding:10px 16px 30px;}
.map-frame{
  border-radius:14px;overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
  border:3px solid rgba(255,255,255,.5);
  background:#e7ece9;
}
.map-frame iframe{
  display:block;width:100%;height:280px;border:0;
}

/* ---------- 頁尾 ---------- */
.footer{
  background:var(--footer-bg);
  color:var(--maroon);
  padding:40px 24px 46px;
  border-radius:26px 26px 0 0;
  margin-top:14px;
}
.social{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px 8px;
  max-width:340px;margin:0 auto 30px;
}
.social-item{
  display:flex;flex-direction:column;align-items:center;
  gap:9px;text-decoration:none;color:var(--maroon);
}
.social-icon{
  width:58px;height:58px;border-radius:50%;
  background:var(--maroon);
  display:flex;align-items:center;justify-content:center;
  color:#fff;transition:transform .2s ease,background .2s ease;
  box-shadow:0 4px 10px rgba(122,78,73,.35);
}
.social-icon svg{width:30px;height:30px;}
.social-item:hover .social-icon{background:var(--maroon-deep);transform:translateY(-3px);}
.social-label{
  font-size:.74rem;letter-spacing:.06em;line-height:1.3;
  text-align:center;font-weight:500;
}
.footer-info{
  text-align:center;color:var(--maroon);
  border-top:1px solid rgba(122,78,73,.2);
  padding-top:24px;line-height:2;font-size:.92rem;letter-spacing:.04em;
}
.footer-info a{color:var(--maroon);text-decoration:none;}
.footer-info a:hover{text-decoration:underline;}

/* 版型切換按鈕（手機／桌機共用） */
.view-toggle{text-align:center;margin-top:26px;}
.view-toggle button{
  font-family:inherit;cursor:pointer;
  background:transparent;color:var(--maroon);
  border:1px solid rgba(122,78,73,.45);border-radius:30px;
  padding:8px 22px;font-size:.9rem;letter-spacing:.08em;
  transition:background .2s ease,color .2s ease;
}
.view-toggle button:hover{background:var(--maroon);color:#fff;}

/* ================= 桌機版（寬版）— 由 body.view-desktop 啟用 ================= */
body.view-desktop{
  background:linear-gradient(180deg,#b4bdc2 0%,#abb0b1 30%,#aaa39c 58%,#b3a89f 78%,#cdc5be 100%);
  background-attachment:fixed;
}
body.view-desktop .page{
  max-width:1200px;width:100%;
  background:none;
  box-shadow:0 0 90px rgba(0,0,0,.16);
}
/* 桌機版：同一張山景固定，鎖在置中欄內（與手機版取景一致，不隨螢幕寬度跑掉） */
body.view-desktop .bg-mountain{
  display:block;
  left:50%;right:auto;
  transform:translateX(-50%);
  width:100%;max-width:1200px;
  background-position:center top;
  background-size:cover;
}

/* 頂部導覽列 */
body.view-desktop .topbar{
  justify-content:space-between;align-items:center;
  padding:16px 42px;
  background:linear-gradient(to bottom,rgba(58,40,38,.6),rgba(58,40,38,0));
}
body.view-desktop .menu-btn{display:none;}
body.view-desktop .topbar-brand{
  display:block;color:#fff;text-decoration:none;
  font-size:1.55rem;font-weight:700;letter-spacing:.16em;white-space:nowrap;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
body.view-desktop .topnav{display:flex;align-items:center;gap:22px;}
body.view-desktop .topnav>a,
body.view-desktop .nav-item>a{
  color:#fff;text-decoration:none;font-size:1rem;letter-spacing:.05em;white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.4);padding:6px 2px;
  border-bottom:2px solid transparent;transition:border-color .25s ease;
}
body.view-desktop .topnav>a:hover,
body.view-desktop .nav-item:hover>a{border-color:rgba(255,255,255,.85);}

/* 下拉子選單 */
body.view-desktop .nav-item{position:relative;}
body.view-desktop .nav-item>a::after{content:"▾";margin-left:5px;font-size:.78em;opacity:.85;}
body.view-desktop .submenu{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(10px);
  display:flex;gap:28px;
  background:rgba(74,55,52,.98);backdrop-filter:blur(6px);
  border-radius:12px;padding:20px 26px;
  box-shadow:0 14px 34px rgba(0,0,0,.32);
  opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease;z-index:40;
}
body.view-desktop .nav-item:hover .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
body.view-desktop .sub-group{display:flex;flex-direction:column;min-width:148px;}
body.view-desktop .sub-title{
  color:#e6c4a3;font-size:.8rem;letter-spacing:.12em;
  padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.18);
}
body.view-desktop .submenu a{
  color:#f3ece9;text-decoration:none;font-size:.94rem;
  padding:7px 4px;white-space:nowrap;border-bottom:none;transition:color .2s;
}
body.view-desktop .submenu a:hover{color:#fff;}

/* 主視覺 */
body.view-desktop .hero{margin-top:-66px;padding:122px 24px 70px;}
body.view-desktop .hero-logo{width:320px;max-width:none;margin-bottom:38px;}
body.view-desktop .hero-yulu{max-width:500px;min-height:230px;}
body.view-desktop .ribbon-yulu{width:215px;margin:0;}
body.view-desktop .hero-teachers{width:58%;right:-6%;}

/* 介紹 */
body.view-desktop .intro{max-width:960px;margin:0 auto;padding:6px 24px 64px;}
body.view-desktop .people{max-width:660px;margin:0 auto 30px;}
body.view-desktop .intro-text{font-size:1.22rem;line-height:2.2;max-width:780px;margin:0 auto 40px;}
body.view-desktop .ribbon-contact{width:240px;}

/* 服務項目：三欄交錯網格 */
body.view-desktop .categories{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:28px 60px;align-items:start;
  max-width:1100px;margin:0 auto;padding:24px 34px 84px;
}
body.view-desktop .cat-col{display:contents;}      /* 6 張卡片直接進入網格 */
body.view-desktop .cat-col-right{margin-left:0;padding-top:0;}
body.view-desktop .card{margin-top:0;}
/* 棋盤式交錯排序：文字上／下交替成波浪 */
body.view-desktop .cat-col-left .card:nth-of-type(1){order:1;}
body.view-desktop .cat-col-right .card:nth-of-type(1){order:2;}
body.view-desktop .cat-col-left .card:nth-of-type(2){order:3;}
body.view-desktop .cat-col-right .card:nth-of-type(2){order:4;}
body.view-desktop .cat-col-left .card:nth-of-type(3){order:5;}
body.view-desktop .cat-col-right .card:nth-of-type(3){order:6;}
/* 三欄乾淨對齊，不做垂直位移（避免中間欄卡片重疊）；
   拱形上下交替已有律動感 */

/* 地圖 */
body.view-desktop .location{max-width:1000px;margin:0 auto;padding:30px 30px 50px;}
body.view-desktop .map-frame iframe{height:440px;}

/* 頁尾 */
body.view-desktop .footer{border-radius:46px 46px 0 0;padding:64px 40px 56px;margin-top:30px;}
body.view-desktop .social{grid-template-columns:repeat(6,1fr);gap:18px;max-width:920px;margin:0 auto 34px;}
body.view-desktop .social-icon{width:74px;height:74px;}
body.view-desktop .social-icon svg{width:37px;height:37px;}
body.view-desktop .social-label{font-size:.86rem;}
body.view-desktop .footer-info{font-size:1.05rem;padding-top:28px;}

/* 手動切回手機版時，於寬螢幕置中 */
body.view-mobile .page{margin:0 auto;}