/* ============================================================
   Happy Valley（北海道自由行租車千歲）網站配色系統 v1 — 2026-09-30
   色彩學依據：Logo 藍（色相 264°）與套版金（84°）互為補色；森林綠（163°）與鼠尾草（190°）
   落在兩者之間當調和的橋樑色。全部色票以 OKLCH 同一套明度階梯產生，彩度壓在 .10～.17。
   一個顏色一個意思：藍＝品牌與資訊（目前頁籤用實心藍）、綠＝行動（預約／送出／聯絡）、金＝細線點綴（選單目前頁底線、標題底線）、
   沙＝溫暖底色、鼠尾草＝標籤與輔助、石板／霧＝內容與版面、紅＝警示。
   換色：只改下面 :root 的色票，全站跟著變。本檔載入在 style.css 之後，蓋過套版原色。
   ============================================================ */
:root {
  --snow: #FFFFFF;
  --mist-50: #F5F8FC;
  --mist-100: #ECF0F7;
  --line: #D8DFE8;
  --ink-500: #7D8796;
  --ink-600: #5F6A79;
  --ink-700: #495362;
  --ink-800: #2E3948;
  --ink-900: #202938;
  --lake-50: #F3F7FF;
  --lake-100: #E4EDFF;
  --lake-200: #CCDDFF;
  --lake-600: #3561C8;
  --lake-700: #264BA3;
  --lake-800: #1D3878;
  --forest-100: #DEF3E8;
  --forest-600: #0D7C56;
  --forest-700: #006243;
  --sage-100: #E8F0F0;
  --sage-200: #D1E0DF;
  --sage-500: #6E8886;
  --sage-700: #3E5856;
  --gold-500: #B79348;
  --gold-600: #856309;
  --sand-50: #FBF7F0;
  --sand-100: #F5EEDE;
  --sand-200: #E5DAC4;
  --sand-300: #D7CBA9;
  --danger-50: #FFEFED;
  --danger-600: #B63B35;
}

/* 1. 套版變數 → 系統色票 */
* {
  --c-main: var(--lake-700);
  --c-font: var(--ink-900);
  --c-active: var(--lake-600);
  --c-light: var(--sand-200);
  --c-grey: var(--mist-100);
  --c-img-bg: var(--mist-50);
}

/* 2. 套版寫死的顏色 → 系統色票（腳本依 style.css 自動產生，95 處） */
.unreset p, .unreset span { color: var(--ink-800); }
.breadcrumb li:not(:last-child):after { color: var(--ink-600); }
.breadcrumb a { color: var(--ink-600); }
.page-head:before { background: var(--mist-100); }
.page_box a { color: var(--ink-800); }
.pg-head .title { color: var(--ink-800); }
.pg-head .des { color: var(--ink-800); }
.related-grid { background: var(--mist-50); }
.related-grid .related a:before { color: var(--ink-600); }
.related-grid .related a, .related-grid .related p { color: var(--ink-600); }
.table-contaienr #listTab { border-left: 1px var(--line) solid; border-top: 1px var(--line) solid; }
.table-contaienr #listTab .highlight { background: var(--sand-50); }
.table-contaienr #listTab .highlight td { color: var(--gold-600); }
.table-contaienr #listTab th, .table-contaienr #listTab td { color: var(--ink-800); }
.table-contaienr #listTab td { border-right: 1px var(--line) solid; border-bottom: 1px var(--line) solid; }
.table-contaienr #listTab .word_02 { color: var(--ink-800); }
.table-contaienr #listTab .word_04 { color: var(--lake-700); }
.main-header { background: var(--mist-50); }
.pop-calc .right-calc .sec-head .title { color: var(--ink-800); }
.pop-calc .right-calc .field .field-input { color: var(--ink-800); }
.pop-calc .right-calc .field input:not([type="radio"]), .pop-calc .right-calc .field select { border: 1px solid var(--line); }
.pop-calc .right-calc .form-table .field { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.pop-calc .right-calc .form-table .final-cal { background: var(--mist-100); }
.pop-calc .right-calc .form-table .final-cal .price { color: var(--lake-700); }
.page-quick-calc .form-table .field { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.page-quick-calc .form-table .final-cal { background: var(--mist-100); }
.page-quick-calc .form-table .final-cal .price { color: var(--lake-700); }
.index-row-head h3 { color: var(--ink-800); }
.index-model-row .model .content .model-name { color: var(--ink-800); }
.index-model-row .model .content .des { border-top: 1px solid var(--line); color: var(--ink-800); }
.index-tv-row { background: var(--ink-700); }
.index-ltinerary-row .ltinerary .title { color: var(--ink-800); }
.index-ltinerary-row .ltinerary .des { border-top: 1px solid var(--line); }
.index-process-row { background: var(--ink-700); }
.pg-news-grid .news-item .content .news-title { border-bottom: 1px solid var(--sage-200); }
.pg-news-grid .news-item .content .des p { color: var(--ink-800); }
.pgdl-news .highlight:nth-child(2n) .content .sub-title { color: var(--sage-500); }
.pgdl-news .highlight:nth-child(2n) .content .des { border-top: 1px solid var(--sage-200); }
.pgdl-news .highlight .content h4 { color: var(--ink-800); }
.pgdl-news .highlight .content .des p { color: var(--ink-800); }
.pgdl-news .slider-nav .slick-arrow { color: var(--ink-600); }
.pgdl-news .bottom-content { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pgdl-news .hotel-content .content .hotel-name { border-bottom: 1px solid var(--line); color: var(--ink-800); }
.pgdl-news .hotel-content .content .info-list li { color: var(--ink-800); }
.pg-car-grid .model .content .model-name { color: var(--ink-800); }
.pg-car-grid .model .content .des { border-top: 1px solid var(--line); color: var(--ink-800); }
.pg-car-grid .model .price-box .box { background: var(--sand-50); }
.pg-car-grid .model .price-box .hot:before { color: var(--lake-600); }
.pg-car-grid .model .price-box .super-hot:before { color: var(--danger-600); }
.pgdl-car .slick-arrow { color: var(--ink-600); }
/* 車款頁小圖列的箭頭是深藍底方塊，箭頭要白色才看得清楚（2026-09-30） */
.pgdl-car .slider-nav .slick-arrow { color: #fff; background: var(--lake-700); }
.pgdl-car .slider-nav .slick-arrow:hover { color: #fff; background: var(--lake-600); }
.car-bottom-grid .slick-arrow { color: var(--ink-600); }
.pg-reserve-form .form-des p { color: var(--ink-800); }
.pg-reserve-form .form-des span { color: var(--danger-600); }
.pg-reserve-form .field .field-title p { color: var(--ink-800); }
.pg-reserve-form .field .field-title p.must:after { color: var(--danger-600); }
.pg-reserve-form .field .field-input { color: var(--ink-800); }
.pg-reserve-form .field input:not([type="radio"]), .pg-reserve-form .field select, .pg-reserve-form .field textarea { border: 1px solid var(--line); }
.pg-reserve-form .field .acc-row .del-acc:hover i { color: var(--danger-600); }
.reserve-bottom-grid .acc-item .content p { color: var(--ink-800); }
.reserve-bottom-grid .slick-arrow { color: var(--ink-600); }
.pg-newbie .common-des { border-top: 1px solid var(--line); color: var(--ink-800); }
.pg-newbie .remark { color: var(--sage-700); }
.pg-newbie-process .process .place { border: 15px solid var(--sage-200); }
.newbie-insurance-info .insurance-des p { color: var(--ink-800); }
.traffic-road-grid .road-tip .content .top-data .des { color: var(--ink-800); }
.traffic-road-grid .road-tip .tip .des { border-top: 1px solid var(--line); }
.traffic-road-grid .road-tip .tip .des p { color: var(--ink-800); }
.traffic-road-grid .road-tip .tip .des .remark { color: var(--ink-600); }
.traffic-road-grid .method-grid .method-list-title:before { background: var(--line); }
.traffic-road-grid .method-grid .mehtod { border: 1px solid var(--sage-200); background: var(--mist-50); color: var(--ink-800); }
.traffic-road-grid .method-grid .mehtod .etc-first .arrow i { color: var(--sage-500); }
.etc-row-grid .etc .light-content .light .des { color: var(--ink-800); }
.etc-row-grid .high-attention p { background: var(--gold-600); }
.traffic-qa-grid .qa { border-bottom: 1px dotted var(--line); }
.traffic-qa-grid .qa p { color: var(--ink-800); }
.pg-about-top .content p { color: var(--ink-800); }
.pg-about-map .place-slider .slick-arrow { color: var(--ink-800); }
.pg-about-map .place-info .info p { color: var(--ink-800); }
.pg-about-contact .field input:not([type="radio"]), .pg-about-contact .field select, .pg-about-contact .field textarea { border: 1px solid var(--line); }
.pg-about-contact .field-label span { color: var(--ink-600); }
.accGalleryPop .item-img { background: var(--mist-100); }
@media (max-width: 640px) {
  .related-grid .related.next { border-top: 1px dashed var(--line); }
  .pg-reserve-form .field .acc-row { border-bottom: 1px dashed var(--line); }
}
@media (max-width: 1200px) {
  .main-header .main-menu li:not(:last-child) { border-bottom: 1px dashed var(--line); }
}

/* 3. 角色規則 */
/* 3-1 綠＝行動：預約、送出、聯絡 */
.main-header .hv-cta { background: var(--forest-600); color: #fff !important; }
.main-header .hv-cta:hover, .main-header .hv-cta.is-active { background: var(--forest-700); }
.active-btns .slide-switch, .active-btns .slide-btns a { background: var(--forest-600); }
.active-btns .slide-switch:hover, .active-btns .slide-btns a:hover { background: var(--forest-700); }
.pg-reserve-form .btn-row .submit, .pg-about-contact .btn-row .submit, .pop-calc .right-calc .btn-row .form-btn { background: var(--forest-600); color: #fff; }
.pg-reserve-form .btn-row .submit:hover, .pg-about-contact .btn-row .submit:hover, .pop-calc .right-calc .btn-row .form-btn:hover { background: var(--forest-700); }
.pop-calc .right-calc .btn-row .form-btn:before { border-color: transparent transparent transparent var(--forest-600); }
.pop-calc .right-calc .btn-row .form-btn:hover:before { border-color: transparent transparent transparent var(--forest-700); }
/* 3-2 目前位置：頁籤與分頁用實心藍（其他淡藍）；金色只做細線（選單目前頁底線、區塊標題底線） */
.main-header .main-menu li.active a { color: var(--lake-700); text-decoration: underline; text-decoration-color: var(--gold-500); text-decoration-thickness: 3px; text-underline-offset: 10px; }
@media (max-width: 1200px) { .main-header .main-menu li.active a { text-underline-offset: 6px; } }
.quick-link a { background: var(--lake-50); color: var(--lake-700); box-shadow: inset 0 0 0 1px var(--lake-200); }
.quick-link a:hover { background: var(--lake-100); color: var(--lake-800); }
.quick-link a.active, .quick-link a.active:hover { background: var(--lake-700); color: #fff; box-shadow: none; }
.page_box a:hover { background: var(--lake-100); color: var(--lake-800); }
.page_box a.active { background: var(--lake-700); color: #fff; }
.pg-head:before, .pg-about-top .head-title:before { background: var(--gold-500); }
/* 3-3 藍＝品牌與資訊（大字與大面積用深階，不用飽和的 600） */
.page-banner .banner-text { -webkit-text-fill-color: var(--lake-800); }
.top-btn { background: var(--ink-700); }
.top-btn:hover { background: var(--lake-600); }
/* 3-5 內容細節：配件說明原本是淺灰字（1.7:1），改石板 600；編輯器的分隔線 */
.reserve-bottom-grid .acc-item .content .acc-des { color: var(--ink-600); }
.unreset hr, .ck-editor hr { border: 0; border-top: 1px solid var(--line); }
/* 3-4 鼠尾草＝標籤與輔助 */
.index-tv-row .index-tv .index-row-dec, .index-process-row .index-process .index-row-dec, .pg-newbie-process .process .place .place-text { background: var(--sage-700); }
.pg-reserve-form .field .acc-row .del-acc i { color: var(--sage-500); }
.pg-reserve-form .field .acc-row .del-acc:hover i { color: var(--danger-600); }

/* 4. 文章內容（新手上路、Blog、關於我們）內嵌樣式的變數 */
body .hv-doc { --hv-main: var(--lake-600); --hv-blue: var(--lake-600); --hv-text: var(--ink-800); --hv-muted: var(--ink-600); --hv-line: var(--line); --hv-bg: var(--mist-50); }
body .hv-note { background: var(--sand-50); border-left-color: var(--gold-500); }
body .hv-about { --hv-main: var(--ink-900); --hv-blue: var(--lake-600); --hv-text: var(--ink-800); --hv-muted: var(--ink-600); --hv-soft: var(--sand-50); --hv-tint: var(--lake-100); }
body .hv-about .hv-why-title:after { background: var(--gold-500); }
body .hv-about .hv-ic:before { color: var(--lake-600); }
body .hv-about .hv-card { box-shadow: 0 8px 28px rgba(32, 41, 56, 0.07); }