/* CADCH_00047A — AS 米白紙紋佈景
上半部：設計稿 xoops_theme_handoff/css/style.css 原樣（class 名稱與數值皆為定稿，請勿改）
下半部「XOOPS 整合」：區塊版位、模組內容、Liaise 表單 */
:root{
--ink:#3b2f25; --ink-2:#4a3a2c; --ink-3:#5a4636; --muted:#7a6350; --muted-2:#8a6a4c; --hint:#a08a76;
--accent:#8a5a33; --accent-dark:#5c3a1e; --accent-hover:#7a4d28; --accent-soft:#a07a56; --display:#c9a582;
--required:#b0552e; --success:#4f6b3a; --paper:#fbf6ef; --on-accent:#fbf5ec;
--line:rgba(138,90,51,.3); --line-soft:rgba(138,90,51,.2);
--serif:'Noto Serif TC',serif; --sans:'Noto Sans TC',sans-serif; --latin:'Cormorant Garamond',serif;
--gutter:clamp(20px,5vw,72px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:#efe3d3}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark);text-decoration:underline}
input,select,textarea,button{font-family:inherit}
.site{min-height:100vh;display:flex;flex-direction:column;background:url('../images/bg.avif') center top/cover fixed}
/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:28px var(--gutter)}
.brand{display:flex;align-items:baseline;gap:12px;color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand__name{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:.04em}
.brand__slogan{font-family:var(--latin);font-style:italic;font-size:17px;color:var(--muted-2)}
.site-nav{display:flex;gap:28px;font-size:14px;letter-spacing:.12em}
.site-nav a{color:var(--ink)}
/* Page hero */
.page-hero{max-width:1200px;width:100%;margin:0 auto;padding:clamp(16px,3vw,40px) var(--gutter) clamp(40px,6vw,72px)}
.page-hero__logo{display:block;width:clamp(200px,32vw,420px);height:auto}
.page-hero__title{font-family:var(--serif);font-weight:700;font-size:clamp(32px,4.5vw,52px);letter-spacing:.08em;margin:12px 0 20px}
.page-hero__lead{max-width:560px;margin:0;font-size:17px;line-height:1.9;color:var(--ink-3);text-wrap:pretty}
/* Main */
.site-main{max-width:1200px;width:100%;margin:0 auto;padding:0 var(--gutter) 96px;display:flex;flex-direction:column;gap:48px}
/* Intro / notes */
.intro{max-width:860px;display:flex;flex-direction:column;gap:32px;font-size:15px;line-height:1.95;color:var(--ink-2)}
.intro__title{font-family:var(--serif);font-size:26px;letter-spacing:.06em;line-height:1.5;margin:0}
.intro p{margin:0;text-wrap:pretty}
.notice{border-top:1px solid var(--line);padding-top:18px}
.notice summary{display:flex;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;font-family:var(--serif);font-size:18px;font-weight:700}
.notice summary::-webkit-details-marker{display:none}
.notice__no{font-family:var(--latin);color:var(--accent-soft)}
.notice__body{margin-top:12px;font-size:14.5px;text-wrap:pretty}
.notice__body p{margin:0 0 .6em}
.notice__body ol{margin:0 0 .8em;padding-left:1.6em}
/* Form card */
.form-card{display:flex;flex-direction:column;gap:36px;padding:clamp(24px,4vw,48px);border-radius:20px;background:rgba(255,251,245,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);box-shadow:0 30px 60px -40px rgba(90,60,30,.35)}
.form-card__eyebrow{font-family:var(--latin);font-size:15px;letter-spacing:.3em;color:var(--accent-soft)}
.form-card__tagline{font-family:var(--latin);font-style:italic;font-size:20px;color:var(--muted-2);margin-top:2px}
.form-card__title{font-family:var(--serif);font-size:26px;letter-spacing:.06em;margin:16px 0 8px}
.form-card__desc{margin:0;font-size:14px;line-height:1.8;color:var(--muted)}
.fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:22px;min-width:0}
.fieldset__legend{width:100%;padding:0 0 14px;margin-bottom:18px;border-bottom:1px solid rgba(138,90,51,.25);font-family:var(--serif);font-size:18px;font-weight:700}
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:8px;font-size:14px}
.field__tag{font-size:12px;margin-top:-6px;color:var(--hint)}
.field__tag--req{color:var(--required)}
.field__note{font-size:12px;color:var(--hint)}
.field--narrow{max-width:260px}
.group{display:flex;flex-direction:column;gap:10px;font-size:14px}
.group__label .field__tag{margin:0}
.input,.select,.textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.7);font-size:15px;color:var(--ink)}
.input,.select{height:46px;padding:0 14px}
.select{padding:0 12px}
.textarea{padding:12px 14px;line-height:1.7;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:2px solid rgba(138,90,51,.35);outline-offset:1px;border-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chip{display:flex;align-items:center;gap:8px;min-height:42px;padding:8px 16px;line-height:1.5;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.6);cursor:pointer}
.chip--lg{min-height:46px;padding:8px 18px}
.chip--other{padding-right:6px}
.chip input[type=radio],.chip input[type=checkbox],.agree input{accent-color:var(--accent)}
.chip:has(input:checked){border-color:var(--accent);background:rgba(255,255,255,.9)}
.chip__other{width:90px;border:0;border-bottom:1px solid rgba(138,90,51,.4);background:transparent;font-size:14px;color:var(--ink);outline:none}
.agree{display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}
.agree input{width:18px;height:18px}
.form-actions{display:flex;flex-direction:column;gap:14px;padding-top:28px;border-top:1px solid var(--line-soft)}
.form-actions__btns{display:flex;flex-wrap:wrap;gap:12px}
.form-actions p{margin:0;font-size:13px;line-height:1.8;color:var(--muted)}
.form-actions .req-note{color:var(--required)}
.form-msg{font-size:14px}
.form-msg[hidden]{display:none}
.form-msg--ok{color:var(--success)}
.form-msg--err{color:var(--required)}
.btn{height:52px;padding:0 28px;border-radius:999px;font-size:15px;letter-spacing:.1em;cursor:pointer;transition:background .15s}
.btn--primary{padding:0 40px;border:0;background:var(--accent-dark);color:var(--on-accent);font-size:16px;letter-spacing:.2em}
.btn--primary:hover{background:var(--accent-hover)}
.btn--ghost{border:1px solid rgba(92,58,30,.4);background:transparent;color:var(--accent-dark)}
.btn--ghost:hover{background:rgba(255,255,255,.5)}
.btn--block{width:100%;height:48px}
/* Footer */
.site-footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:36px var(--gutter);border-top:1px solid var(--line-soft);background:rgba(255,250,243,.4);font-size:13px;color:var(--muted)}
.site-footer .brand__name{font-size:16px;color:var(--ink)}
.site-footer .brand__slogan{font-size:15px;color:var(--muted)}
.site-footer__meta{display:flex;flex-wrap:wrap;gap:20px}
/* Login modal */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(59,47,37,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal[hidden]{display:none}
.modal__panel{width:100%;max-width:360px;display:flex;flex-direction:column;gap:16px;padding:36px;border-radius:20px;background:var(--paper);box-shadow:0 30px 80px -30px rgba(60,40,20,.5)}
.modal__title{font-family:var(--serif);font-size:22px;letter-spacing:.06em;margin:0 0 4px}
.modal .input{background:#fff}
.modal__links{display:flex;justify-content:space-between;font-size:13px}
.modal .agree{font-size:14px;gap:8px}
.modal .agree input{width:auto;height:auto}
/* =====================================================================
XOOPS 整合
===================================================================== */
/* Header：nav 項目多於設計稿（登入後有 編輯資料／登出）時，窄螢幕允許換行 */
.site-nav{flex-wrap:wrap;row-gap:10px}
.site-nav a:hover{color:var(--accent-dark)}
/* theme.tpl 依規範不用原生 ，page-hero 標題改為 div，保留設計稿的區塊間距 */
div.page-hero__title{display:block}
/* ---------- 區塊版位 ----------
.zones：有左右側欄（canvas_left / canvas_right）時才變成多欄；設計稿本身是單欄。 */
.zones{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.zone-main{display:flex;flex-direction:column;gap:48px;min-width:0}
.zone-contents{min-width:0}
.zone-stack,.zone-bottom,.zone-side,.zone-half{display:flex;flex-direction:column;gap:24px;min-width:0}
.zone-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
@media (min-width:992px){
.zones.has-left{grid-template-columns:260px minmax(0,1fr)}
.zones.has-right{grid-template-columns:minmax(0,1fr) 260px}
.zones.has-left.has-right{grid-template-columns:240px minmax(0,1fr) 240px}
}
@media (max-width:991.98px){
/* 手機：側欄排到主內容之後 */
.zones .zone-side{order:2}
}
/* 一般區塊外框：與表單卡片同一套毛玻璃語彙，但較輕 */
.block{padding:clamp(20px,3vw,32px);border-radius:20px;background:rgba(255,251,245,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);font-size:15px;line-height:1.85;color:var(--ink-2)}
.block__title{margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--line-soft);font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.block__body > :first-child{margin-top:0}
.block__body > :last-child{margin-bottom:0}
/* ---------- 一般模組內容（非 Liaise 頁的最低限度排版） ---------- */
.zone-contents{font-size:15px;line-height:1.9;color:var(--ink-2)}
.zone-contents :is(h1,h2,h3,h4){font-family:var(--serif);color:var(--ink);letter-spacing:.04em;line-height:1.5}
.zone-contents img{max-width:100%;height:auto}
.zone-contents table{margin:0 0 1.2em;font-size:14px}
.zone-contents :is(th,td){padding:8px 12px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.zone-contents :is(.outer){border:1px solid var(--line-soft)}
.zone-contents :is(.head,th){background:rgba(255,255,255,.55);font-weight:700}
.zone-contents .even{background:rgba(255,255,255,.35)}
.zone-contents .odd{background:transparent}
.zone-contents :is(input[type=text],input[type=password],input[type=email],input[type=number],select,textarea){max-width:100%;min-height:42px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.7);font-size:15px;color:var(--ink)}
.zone-contents :is(input[type=submit],input[type=button],input[type=reset],button,.formButton):not(.btn){min-height:42px;padding:0 24px;border:0;border-radius:999px;background:var(--accent-dark);color:var(--on-accent);font-size:15px;letter-spacing:.1em;cursor:pointer}
.zone-contents :is(input[type=submit],input[type=button],input[type=reset],button,.formButton):not(.btn):hover{background:var(--accent-hover)}
:is(.errorMsg,.resultMsg,.confirmMsg){margin:0 0 24px;padding:14px 18px;border-radius:12px;border:1px solid;font-size:14px;line-height:1.7}
.errorMsg{border-color:rgba(176,85,46,.5);background:rgba(253,241,236,.8);color:var(--required)}
.resultMsg{border-color:rgba(79,107,58,.4);background:rgba(240,246,234,.8);color:var(--success)}
.confirmMsg{border-color:var(--line);background:rgba(255,251,245,.8);color:var(--ink-2)}
/* =====================================================================
Liaise 表單（modules/liaise/liaise_form.html）
欄位本體由核心 XoopsFormRendererBootstrap5 產生（class 為 form-control / form-check …），
本佈景**不載入 Bootstrap**，所以不會有 !important 互搶；以下把那些 class 畫成設計稿的元件。
===================================================================== */
.liaise-wrap{container:liaise / inline-size;--lz-gap:18px;--lz-cols:12}
.form-card__head > :first-child{margin-top:0}
.form-card__desc > :first-child{margin-top:0}
.form-card__desc > :last-child{margin-bottom:0}
.form-msg--warn{margin:0;color:var(--accent-dark);font-weight:700}
.form-alert{padding:14px 18px;border:1px solid rgba(176,85,46,.5);border-radius:12px;background:rgba(253,241,236,.8);color:var(--required);font-size:14px;line-height:1.7}
.form-alert p{margin:0;font-weight:700}
.form-alert ul{margin:4px 0 0;padding-left:1.4em}
/* 版面：flex ＋ 後台 12 等分欄寬（--col），表單實際寬度 ≥640px 才並排 */
.liaise{display:flex;flex-wrap:wrap;column-gap:var(--lz-gap);row-gap:22px;align-items:flex-start;margin:0}
.liaise .liaise-field{flex:1 1 100%;min-width:0;margin:0;font-size:14px}
@container liaise (min-width:640px){
.liaise .liaise-field[data-col]{flex:0 1 calc((var(--col) / var(--lz-cols)) * 100% - var(--lz-gap) * (var(--lz-cols) - var(--col)) / var(--lz-cols))}
}
@supports not (container-type:inline-size){
@media (min-width:768px){
.liaise .liaise-field[data-col]{flex:0 1 calc((var(--col) / var(--lz-cols)) * 100% - var(--lz-gap) * (var(--lz-cols) - var(--col)) / var(--lz-cols))}
}
}
/* 標籤（對應設計稿 .field / .group__label） */
.liaise .liaise-label{display:block;margin:0 0 8px;font-size:14px;line-height:1.6;color:var(--ink)}
.liaise .liaise-label .field__tag{margin:0 0 0 2px}
/* 分段標題：有 caption 的 html 型別（對應設計稿 .fieldset__legend；第一段之外上方多留距離） */
.liaise [data-field="html"] .fieldset__legend{margin:0}
.liaise > .liaise-field[data-field="html"]:has(.fieldset__legend):not(:first-child){margin-top:14px}
/* html 型別本體（說明文字） */
.liaise [data-field="html"] .liaise-control{font-size:14px;line-height:1.85;color:var(--muted)}
.liaise [data-field="html"] .col-form-label{display:block;margin:0;padding:0;font:inherit;color:inherit}
.liaise [data-field="html"] .col-form-label:empty{display:none}
.liaise [data-field="html"] .liaise-control :is(p,ul,ol){margin:0 0 .6em}
/* 長篇須知：後台內容外包
…
即成捲動框 */
.liaise .liaise-notice{max-height:360px;overflow:auto;overscroll-behavior:contain;padding:18px 22px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.6);color:var(--ink-2);font-size:14px;line-height:1.9}
/* 文字輸入（對應設計稿 .input / .textarea / .select） */
.liaise .liaise-field :is(input.form-control,input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=url],input[type=file],select,textarea){
display:block;width:100%;max-width:100%;height:46px;margin:0;padding:0 14px;
border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.7);
font:inherit;font-size:15px;color:var(--ink);box-shadow:none
}
.liaise .liaise-field textarea{height:auto;min-height:140px;padding:12px 14px;line-height:1.7;resize:vertical}
.liaise .liaise-field select{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
background:rgba(255,255,255,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a5a33' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center/12px 8px}
.liaise .liaise-field select:is([multiple],[size]:not([size="1"])){height:auto;min-height:140px;padding:6px;background-image:none}
.liaise .liaise-field input[type=file]{padding:7px;cursor:pointer}
.liaise .liaise-field input.liaise-color{width:72px;padding:4px;cursor:pointer}
.liaise .liaise-field :is(input,select,textarea):focus{outline:2px solid rgba(138,90,51,.35);outline-offset:1px;border-color:var(--accent)}
/* date / datetime：renderer 自帶的 .input-group ＋ 日曆鈕（圖示是 font-awesome，本佈景未載入，改用 CSS 畫） */
.liaise .liaise-field .input-group{display:flex;flex-wrap:nowrap;align-items:stretch;width:100%;margin:0}
.liaise .liaise-field .input-group > .form-control{flex:1 1 auto;width:1%;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0}
.liaise .liaise-field .input-group-append{display:flex}
.liaise .liaise-field .input-group .btn{display:inline-flex;align-items:center;justify-content:center;width:52px;height:46px;margin:0 0 0 -1px;padding:0;border:1px solid var(--line);border-radius:0 10px 10px 0;background:rgba(255,255,255,.9);color:var(--accent-dark);cursor:pointer}
.liaise .liaise-field .input-group .btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--on-accent)}
.liaise .liaise-field .input-group .btn i{display:none}
.liaise .liaise-field .input-group .btn::before{content:"";width:18px;height:18px;background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat}
.liaise [data-field="datetime"] .liaise-control{display:flex;flex-wrap:wrap;gap:8px}
.liaise [data-field="datetime"] .liaise-control > .input-group{flex:1 1 220px;width:auto}
.liaise [data-field="datetime"] .liaise-control > select{flex:0 1 160px;width:auto}
/* 選項 checkbox / radio / yn → 設計稿 .chips / .chip
renderer 的 .form-check 帶 m-2 等 Bootstrap 工具 class，本佈景沒載 Bootstrap，不會生效。 */
.liaise :is([data-field="checkbox"],[data-field="radio"],[data-field="yn"]) .liaise-control{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.liaise .liaise-control > :is(span,div):not(.form-check):has(> .form-check){display:contents}
.liaise .liaise-field .form-check{position:relative;display:flex;align-items:center;gap:8px;min-height:42px;margin:0;padding:8px 16px;line-height:1.5;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.6);cursor:pointer;transition:border-color .15s,background-color .15s}
.liaise .liaise-field .form-check:hover{border-color:rgba(138,90,51,.5)}
.liaise .liaise-field .form-check:has(input:checked){border-color:var(--accent);background:rgba(255,255,255,.9)}
.liaise .liaise-field .form-check:has(.form-check-input:focus-visible){outline:2px solid rgba(138,90,51,.35);outline-offset:1px}
/* 設計稿的性別 chip 較高（.chip--lg）：選項 3 個以下的短清單套用 */
.liaise .liaise-control:not(:has(.form-check:nth-of-type(4))) .form-check{min-height:46px;padding:8px 18px}
.liaise .liaise-field .form-check-input{flex:0 0 auto;width:auto;height:auto;margin:0;accent-color:var(--accent);cursor:pointer}
.liaise .liaise-field .form-check-label{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;color:var(--ink);cursor:pointer}
/* 整顆 chip 可點：label 偽元素蓋滿 chip（{OTHER} 文字框以 z-index 浮在上面） */
.liaise .liaise-field .form-check-label::after{content:"";position:absolute;inset:0;border-radius:inherit}
/* {OTHER} 內嵌輸入（對應設計稿 .chip__other：寬 90px、只有底線） */
.liaise .liaise-field .form-check:has(input[type=text]){padding-right:6px}
.liaise .liaise-field .form-check input[type=text]{position:relative;z-index:1;display:inline-block;width:90px;height:auto;min-height:0;padding:0 2px;border:0;border-bottom:1px solid rgba(138,90,51,.4);border-radius:0;background:transparent;font-size:14px;outline:none}
.liaise .liaise-field .form-check input[type=text]:focus{outline:none;border-bottom-color:var(--accent)}
/* 確認碼（對應設計稿 .field--narrow）。核心文字驗證碼題目是 inline style 的 span，只有這條用 !important */
.liaise [data-field="captcha"] .liaise-control{max-width:420px;font-size:12px;line-height:1.9;color:var(--hint)}
.liaise [data-field="captcha"] .liaise-control > span[style]{display:inline-flex !important;align-items:center;height:46px;margin:0 8px 6px 0;padding:0 16px !important;border:1px solid var(--line) !important;border-radius:10px;background:rgba(255,255,255,.9);color:var(--ink) !important;font-size:16px !important;letter-spacing:.12em;vertical-align:middle}
.liaise [data-field="captcha"] .liaise-control input[type=text]{display:inline-block;width:140px;margin:0 0 6px;vertical-align:middle}
.liaise [data-field="captcha"] .liaise-control img{margin:0 0 6px 6px;border:1px solid var(--line);border-radius:10px;vertical-align:middle;cursor:pointer}
/* 送出（對應設計稿 .form-actions ＋ .btn--primary / .btn--ghost） */
.liaise .liaise-field[data-field="submit"]{flex-basis:100%;margin-top:6px;padding-top:28px;border-top:1px solid var(--line-soft)}
.liaise [data-field="submit"] .liaise-control{display:flex;flex-wrap:wrap;gap:12px}
.liaise [data-field="submit"] :is(button,input)[type=submit]{height:52px;padding:0 40px;border:0;border-radius:999px;background:var(--accent-dark);color:var(--on-accent);font:inherit;font-size:16px;letter-spacing:.2em;cursor:pointer;transition:background .15s}
.liaise [data-field="submit"] :is(button,input)[type=submit]:hover{background:var(--accent-hover)}
.liaise [data-field="submit"] .btn--ghost{font:inherit;font-size:15px;letter-spacing:.1em;padding:0 28px}
.liaise .req-note{flex-basis:100%;margin:-8px 0 0;font-size:13px;line-height:1.8;color:var(--required)}
.liaise .req-note > :last-child{margin-bottom:0}
/* 客製驗證的欄位錯誤訊息（樣板最後的驗證 JS） */
.liaise .liaise-fielderr{margin:6px 0 0;font-size:13px;color:var(--required)}
.liaise .liaise-field [aria-invalid="true"]{border-color:var(--required)}
/* =====================================================================
nc_vision 區塊（modules/nc_vision/nc_vision_block_tmpl_1|2.html）
===================================================================== */
/* page-hero 前言改用 div 輸出（後台內文可能含換行
），沿用設計稿 .page-hero__lead 的字級 */
/* logo 有超連結時外包 a.page-hero__logo-link（寬度貼齊圖片，避免整列都可點） */
.page-hero__logo-link{display:block;width:fit-content}
.page-hero__lead > :first-child{margin-top:0}
.page-hero__lead > :last-child{margin-bottom:0}
/* intro 說明內文：textarea（
換行）或 HTML 編輯器（）皆可 */
.intro__text > :is(p,ul,ol){margin:0 0 .8em;text-wrap:pretty}
.intro__text > :last-child{margin-bottom:0}
.notice__body > :last-child{margin-bottom:0}
.notice__body ul{margin:0 0 .8em;padding-left:1.4em}
/* 有編輯權限時的「編輯」連結（$block.prem） */
.vision-edit{display:inline-block;align-self:flex-start;margin-top:12px;padding:4px 14px;border:1px dashed var(--line);border-radius:999px;font-size:12px;letter-spacing:.1em;color:var(--muted)}
.vision-edit:hover{text-decoration:none;color:var(--accent-dark);border-color:var(--accent)}
/* =====================================================================
主選單（nav.site-nav ＋ nc_menu 區塊 headermenu：modules/nc_menu/blocks/nc_menu_block.html）
設計稿的 .site-nav（14px、字距 .12em、間距 28px）維持不動，以下補清單、下拉與手機面板。
===================================================================== */
.site-header{position:relative;z-index:30}
.site-nav{align-items:center}
.site-nav ul{margin:0;padding:0;list-style:none}
.site-nav__list{display:flex;align-items:center;gap:28px}
.site-nav .nav-item{position:relative}
.site-nav .nav-row{display:flex;align-items:center;gap:2px}
.site-nav .nav-link{display:inline-block;padding:4px 0;color:var(--ink)}
.site-nav .nav-link:hover{text-decoration:none;color:var(--accent-dark)}
.site-nav .nav-link.is-current{color:var(--accent-dark);box-shadow:inset 0 -1px 0 currentColor}
.nav-expand{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted-2);cursor:pointer}
.nav-expand svg{width:14px;height:14px;transition:transform .2s}
.nav-expand:hover{color:var(--accent-dark)}
.nav-expand:focus-visible{outline:2px solid rgba(138,90,51,.35);outline-offset:1px}
.nav-item.is-open > .nav-row > .nav-expand svg{transform:rotate(180deg)}
/* 下拉面板（第 2 層） */
.site-nav .sub-menu{position:absolute;top:100%;left:-18px;z-index:40;min-width:220px;margin-top:12px;padding:10px;
border:1px solid rgba(255,255,255,.85);border-radius:14px;background:rgba(251,246,239,.94);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 48px -28px rgba(90,60,30,.5);
letter-spacing:.06em;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility 0s .18s}
/* 滑鼠從連結移到面板之間的 12px 空隙不能斷，用透明橋接 */
.site-nav .sub-menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:14px}
.site-nav .nav-item:is(:hover,:focus-within,.is-open) > .sub-menu{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
.site-nav .sub-menu .nav-row{justify-content:space-between}
.site-nav .sub-link{display:block;flex:1 1 auto;padding:8px 12px;border-radius:8px;font-size:14px;line-height:1.5;color:var(--ink);white-space:nowrap}
.site-nav .sub-link:hover{text-decoration:none;background:rgba(138,90,51,.08);color:var(--accent-dark)}
/* 第 3 層向右飛出 */
.site-nav .sub-menu--deep{top:-11px;left:100%;margin:0 0 0 8px}
.site-nav .sub-menu--deep::before{left:auto;right:100%;top:0;bottom:0;width:10px;height:auto}
.site-nav .sub-menu .nav-expand svg,.site-nav .sub-menu .nav-item.is-open > .nav-row > .nav-expand svg{transform:rotate(-90deg)}
/* 漢堡鈕（只在手機出現） */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin:0;padding:0 11px;border:1px solid var(--line-soft);border-radius:999px;background:rgba(255,255,255,.5);cursor:pointer}
.nav-toggle span{display:block;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.site-header.is-nav-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.site-header.is-nav-open .nav-toggle span:nth-child(2){opacity:0}
.site-header.is-nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:860px){
.nav-toggle{display:inline-flex}
/* 沒有任何選單項目（例如訪客對每一項都沒權限，樣板輸出空的 ul）時不顯示漢堡鈕。
:has() 讓畫面一載入就正確、不閃；不支援 :has() 的舊瀏覽器由 js/script.js 補 .is-menu-empty */
.site-header.is-menu-empty .nav-toggle{display:none}
/* 分開寫：不支援 :has() 的瀏覽器會整條丟棄含 :has() 的規則，合寫會連上面那條一起失效 */
.site-header:not(:has(.site-nav__list > li)) .nav-toggle{display:none}
/* 面板：從 header 下方展開，左右對齊頁面內距 */
.site-nav{display:none;position:absolute;top:calc(100% - 12px);left:var(--gutter);right:var(--gutter);z-index:40;
flex-direction:column;align-items:stretch;gap:0;max-height:calc(100vh - 110px);overflow:auto;overscroll-behavior:contain;padding:10px 20px;
border:1px solid rgba(255,255,255,.85);border-radius:20px;background:rgba(251,246,239,.97);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 60px -36px rgba(90,60,30,.5)}
.site-header.is-nav-open .site-nav{display:flex}
.site-nav__list{flex-direction:column;align-items:stretch;gap:0}
.site-nav__list > .nav-item + .nav-item{border-top:1px solid var(--line-soft)}
.site-nav .nav-row{justify-content:space-between}
.site-nav .nav-link{display:block;flex:1 1 auto;padding:13px 0}
.site-nav .nav-link.is-current{box-shadow:none}
.nav-expand{width:40px;height:40px}
/* 子層改為手風琴：不浮動，靠 .is-open 開合（取消桌機的 :hover / :focus-within） */
.site-nav .sub-menu,.site-nav .sub-menu--deep{position:static;display:none;min-width:0;margin:0 0 10px;padding:4px 0 4px 12px;
border:0;border-left:1px solid var(--line);border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
opacity:1;visibility:visible;transform:none;transition:none}
.site-nav .sub-menu::before{display:none}
.site-nav .nav-item.is-open > .sub-menu{display:block}
.site-nav .sub-link{white-space:normal;padding:9px 10px}
.site-nav .sub-menu .nav-expand svg{transform:none}
.site-nav .sub-menu .nav-item.is-open > .nav-row > .nav-expand svg{transform:rotate(180deg)}
}
/* =====================================================================
nc_vision ICON 挑選器（項目編輯頁 modules/nc_vision/index.php?op=edit 的 #icons）
模組把整份圖示清單（images/icons1.html：Bootstrap Icons 1953 個；icons.html：Font Awesome 976 個）
塞進 #icons，以 position:absolute; top:-6800em 藏在畫面外，點 ICON 欄位才加 .showicons 移到 top:0。
清單靠 Bootstrap 的 .row / .col / row-cols-* 排成每列 6～8 個；CADCH_00043A 有載 Bootstrap 所以正常，
本佈景不載 Bootstrap，每個圖示各佔一列，清單高度超過 6800em，尾巴就從畫面外伸進來壓在頁面上。
這裡只在 #icons 範圍內補回需要的版面，不載入整套 Bootstrap：
1. 限制高度、內部捲動 → 不論清單多長，藏起來時都不會伸進畫面（根治）
2. 打開時改為視窗置中的浮動面板（原本跳到頁面最上方，在頁面下方編輯時看不到）
模組的