@charset "utf-8";
/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 內容頁共用（RWD，三語共用）<<<-------------------------------------------------*/
/* 原則：沿用原 HTML 結構與 class，只用這支 CSS 重新排版；尺寸以原 1080 寬設計稿等比換算                           */
/* --w：頁面寬度，所有「跟著設計稿縮放」的尺寸都以它為基準（#015）：                                                */
/*      寬 = 螢幕寬，最多 700px（電腦版固定約 700 置中）。只跟螢幕寬有關，手機滑動時網址列收合不會讓版面跳動       */
/* ----------------------------------------------------------------------------------------------------------------*/

:root { --w:min(100vw, 700px); }

html, body { margin:0; padding:0; }
body { background:#74c043; color:#3F2210; font-family:"Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif; -webkit-text-size-adjust:100%; }
img { border:0; }

/* ---------- 版面：背景圖（頁首＋木牌＋白卡）跟著寬度縮放；內容超出白卡時以 CSS 白底延長 ---------- */
#wrapper { position:relative; box-sizing:border-box; width:var(--w); min-height:calc(var(--w) * 2220 / 1080);   /* index-bg.jpg 為 1080×2220（#017） */
           margin:0 auto; padding-bottom:calc(var(--w) * 0.11); background:no-repeat center top / 100% auto; }
.lang-tw #wrapper { background-image:url(../../tw/images/index-bg.jpg); }
.lang-en #wrapper { background-image:url(../../en/images/index-bg.jpg); }
.lang-jp #wrapper { background-image:url(../../jp/images/index-bg.jpg); }

/* 白卡延長：從木牌下方開始，蓋在背景圖原本的白卡上（同色），內容多長就往下長 */
#wrapper::before { content:""; position:absolute; z-index:0; top:calc(var(--w) * 0.40); bottom:calc(var(--w) * 0.06); left:6.1%; right:6.1%; background:#fff; border-radius:0 0 calc(var(--w) * 0.012) calc(var(--w) * 0.012); }
#wrapper > * { position:relative; z-index:1; }

/* 內容區左右留白（原設計 840 / 1080） */
#carousel, #intro, #content, #content2, #attractions, .guide-audio { margin-left:11%; margin-right:11%; }

/* ---------- 標題（木牌上的文字） ---------- */
.index-title { box-sizing:border-box; margin:0; padding:calc(var(--w) * 0.288) 6% 0 !important; height:calc(var(--w) * 0.358); text-align:center; font-weight:bold; color:#fff; font-size:max(17px, calc(var(--w) * 0.046)) !important; line-height:calc(var(--w) * 0.07); letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- 照片輪播 ---------- */
#carousel { width:auto; height:auto; overflow:visible; margin-top:calc(var(--w) * 0.03); }
.list_carousel { display:flex; flex-wrap:wrap; align-items:center; gap:10px; width:auto; margin:0; }
.list_carousel > ul,
.list_carousel > div { flex:0 0 100%; }
.list_carousel > div { height:calc(var(--w) * 0.012) !important; }   /* 原 30px 間距 */

#banner { position:relative; margin:0; padding:0; list-style:none; aspect-ratio:820 / 490; overflow:hidden; touch-action:pan-y; }
#banner li { position:absolute; inset:0; opacity:0; transition:opacity 1s ease; }
#banner li.is-active,
#banner li:first-child { opacity:1; }                           /* 第一張直接顯示，不做淡入 */
#banner.is-ready li:not(.is-active) { opacity:0; }
#banner img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }   /* 同原本：顯示照片上半部 */
#banner li.is-tall img { object-fit:contain; }                                                         /* 直式照片完整顯示 */

.back { order:1; margin-right:auto; width:44%; max-width:370px; }
.prev { order:2; }
.next { order:3; }
.prev, .next { width:9.8%; min-width:40px; max-width:82px; }
.back img, .prev img, .next img { display:block; width:100%; height:auto; }
.prev:hover, .next:hover { opacity:.75; }
.list_carousel.is-single .prev,
.list_carousel.is-single .next { display:none; }   /* 只有一張照片時不顯示箭頭（同原本） */

/* ---------- 園主／電話等資料表格 ---------- */
#intro { width:auto; margin-top:10px; padding:calc(var(--w) * 0.01) 0; }   /* 與上方返回鈕多留 10px（#011） */
#intro table { width:100%; }
/* 綠色標籤：至少 4em 寬（中文兩字），英日文標籤較長時自動變寬（同原導覽機）；高 1.5em 靠上，不隨列高拉長；內容行高同 1.5em 讓兩者對齊 */
#intro .title-text { box-sizing:border-box; flex:none; width:auto !important; min-width:4em; height:1.5em; padding:0 .35em; vertical-align:top; background:url(../../tw/images/title-bg.png) no-repeat left top / 100% 1.5em; color:#FEF200; font-weight:bold; text-align:center; font-size:clamp(16px, calc(var(--w) * 0.024), 26px); line-height:1.5em; letter-spacing:2px; white-space:nowrap; }
#intro .title-content { box-sizing:border-box; padding:0 0 0 .4em; vertical-align:top; color:#484848; font-weight:bold; text-align:left; font-size:clamp(16px, calc(var(--w) * 0.024), 26px); line-height:1.5em; letter-spacing:1px; }
#intro td[width="120"] { width:auto; padding-left:8px; vertical-align:top; }
#intro td[width="120"] img { width:clamp(64px, calc(var(--w) * 0.105), 114px); height:auto; }

/* 表格列改成可換行，「電話＋手機」放不下時手機自動換到下一行，號碼不會被拆斷
   （#010 起電腦版版面也變窄，所以不再只限手機，一律套用） */
#intro table, #intro tbody { display:block; width:100%; }
#intro tr { display:flex; flex-wrap:wrap; align-items:flex-start; row-gap:6px; }
#intro td { display:block; }
#intro td[colspan]:not([class]) { flex:0 0 100%; }    /* 原本的間距列（英文版有內容欄也帶 colspan，所以只認沒有 class 的） */
#intro td[valign="top"] { flex:1 1 0; min-width:0; }  /* 左側資料區，右側為 QR Code */
#intro .title-content { flex:1 1 0; min-width:0; margin-right:0; }   /* 內容一律留在標籤右側、在欄內換行（英文標籤較寬時也不會掉到下一行，#012） */
/* 「電話＋手機」同一列：在手機欄位前強制換行（::after 撐滿一整行當分隔），標籤多寬都不會出現標籤和號碼分家（#012） */
#intro tr:has(> .title-text:nth-child(3))::after { content:""; order:1; flex:0 0 100%; height:0; }
#intro tr > td:nth-child(n+3) { order:2; }
#intro td:not([class]):not([colspan]):not([valign]):not([width]) { display:none; }   /* 原本補位用的 &nbsp; 空格 */

/* ---------- 內文 ---------- */
#content, #content2, #attractions { width:auto; height:auto; overflow:visible; padding:calc(var(--w) * 0.01) 0; color:#3F2210; text-align:left; font-weight:bold; font-size:clamp(17px, calc(var(--w) * 0.0204), 22px); line-height:1.6; letter-spacing:1px; }
.content_wrap, .attractions_wrap { width:auto; height:auto; }

/* 部分頁面在 HTML 寫死尺寸（如 18 的 style="height:750px;"、30 的 style="width: 820px; height: 450px"），
   用 !important 蓋掉，不必逐頁改 HTML */
#content, #content2, #attractions, .content_wrap, .attractions_wrap { width:auto !important; height:auto !important; }

/* ---------- 影片頁 video.html（#009）：白卡較短、下方為風景，內容全部跟著 --w 等比縮放以維持在白卡內 ---------- */
#wrapper_v { box-sizing:border-box; width:var(--w); min-height:calc(var(--w) * 1920 / 1080); margin:0 auto; background:no-repeat center top / 100% auto; text-align:center; }
.lang-tw #wrapper_v { background-image:url(../../tw/images/video-bg.jpg); }
.lang-en #wrapper_v { background-image:url(../../en/images/video-bg.jpg); }
.lang-jp #wrapper_v { background-image:url(../../jp/images/video-bg.jpg); }
#video { width:auto; height:auto; margin:calc(var(--w) * 0.02) 8.33% 0; padding:0; }
#video video { display:block; width:100%; aspect-ratio:16 / 9; background:#000; }
.video-title { margin:calc(var(--w) * 0.045) 8% calc(var(--w) * 0.05); padding:0; color:#7E501F; font-weight:bold; font-size:max(18px, calc(var(--w) * 0.051)); line-height:1.25; letter-spacing:1px; }
.video-title span { display:inline-block; max-width:100%; box-sizing:border-box; padding:.25em .4em; background:#FFFCDD; font-size:1em !important; }   /* 英文版 span 寫死 50px，統一蓋掉 */
.video-content { margin:0 8% calc(var(--w) * 0.04); color:#7E501F; font-weight:bold; font-size:max(12px, calc(var(--w) * 0.0278)); line-height:1.35; letter-spacing:1px; }
.video_button { width:auto; margin:0; }
.video_button img { display:inline-block; width:40.9%; height:auto; }

/* ---------- 語音導覽播放列（#004） ---------- */
.guide-audio { display:flex; align-items:center; gap:12px; margin-top:calc(var(--w) * 0.05); margin-bottom:0; padding:6px 14px 6px 6px; background:#eef6e6; border:2px solid #146c2e; border-radius:999px; }
.guide-audio__btn { flex:none; display:inline-flex; align-items:center; gap:8px; padding:8px 18px 8px 10px; border:0; border-radius:999px; background:#146c2e; color:#fef200; font:bold clamp(16px, calc(var(--w) * 0.02), 21px)/1.2 "Microsoft JhengHei", "PingFang TC", sans-serif; letter-spacing:1px; cursor:pointer; }
.guide-audio__btn:hover { background:#0e5523; }
.guide-audio__btn:focus-visible { outline:3px solid #f39800; outline-offset:2px; }
/* 圖示：黃色圓底＋CSS 畫的 ▶（三角形）／❚❚（兩條直線） */
.guide-audio__icon { position:relative; flex:none; width:1.5em; height:1.5em; border-radius:50%; background:#fef200; }
.guide-audio__icon::before,
.guide-audio__icon::after { content:""; position:absolute; top:50%; transform:translateY(-50%); }
.guide-audio__icon::before { left:40%; border-style:solid; border-width:.32em 0 .32em .52em; border-color:transparent transparent transparent #146c2e; }
.guide-audio.is-playing .guide-audio__icon::before,
.guide-audio.is-playing .guide-audio__icon::after { width:.13em; height:.46em; border:0; border-radius:1px; background:#146c2e; }
.guide-audio.is-playing .guide-audio__icon::before { left:33%; }
.guide-audio.is-playing .guide-audio__icon::after { right:33%; }
.guide-audio.is-loading .guide-audio__icon { animation:guide-audio-pulse 1s ease-in-out infinite; }
.guide-audio__bar { position:relative; flex:1; min-width:40px; height:8px; background:#cfe3c2; border-radius:4px; cursor:pointer; }
.guide-audio__fill { position:absolute; inset:0 auto 0 0; width:0; background:#146c2e; border-radius:4px; }
.guide-audio__time { flex:none; font:clamp(13px, calc(var(--w) * 0.015), 16px)/1 Consolas, monospace; color:#146c2e; white-space:nowrap; }
@keyframes guide-audio-pulse { 50% { opacity:.35; } }
@media (max-width:420px) {
	.guide-audio__time { display:none; }
}

@media (prefers-reduced-motion: reduce) {
	#banner li { transition:none; }
	.guide-audio.is-loading .guide-audio__icon { animation:none; }
}