/* 
  好室正居 House CG Ltd. - 勘驗單 V2 (Premium Gold UI Edition)
  極致美化版：將紙本勘驗單的結構，升級為具備現代感、微陰影與奢華金沙互動體驗的高階網頁介面。
  採用 #DEB76E 作為主要點綴色，並完美符合繁體中文 UI 規範與極簡好懂的註解。
*/

:root {
  /* ==========================================
     1. 品牌金沙高階配色系統 (符合 WCAG AA 無障礙對比)
     ========================================== */
  --primary-color: #8C6A30;         /* 質感金褐色 (用於標題與重要文字，對白底對比度極佳) */
  --primary-light: #B58A43;         /* 輕奢淡金褐色 */
  --accent-gold: #DEB76E;           /* 品牌主打黃金色 (即使用者偏好的 #DEB76E) */
  --accent-gold-hover: #F2D296;     /* 亮金色 Hover */
  --accent-gold-light: #FAF4E6;     /* 極致淡金沙 (用於小徽章/輔助背景) */
  
  --text-dark: #2A241A;             /* 深褐黑 (高對比主文字，極具質感) */
  --text-muted: #80735E;            /* 質感金褐灰 (輔助文字) */
  --bg-main: #FAF8F5;               /* 極致質感金沙米白背景 */
  --card-bg: #FFFFFF;               /* 純白卡片 */
  --border-color: #ECE5D5;          /* 輕金灰邊框 */
  --logo-color: #1A120B;            /* 奢華極深金黑 Logo */
  
  /* 語意色彩：成功、錯誤、警告 */
  --color-success: #2A6B49;         /* 成功綠 */
  --color-success-bg: #EAF4EE;      /* 成功綠淺背景 */
  --color-error: #C84B31;           /* 錯誤紅 */
  --color-error-bg: #FDF1EE;        /* 錯誤紅淺背景 */
  --color-warning: #D9901C;         /* 警告黃 */
  --color-warning-bg: #FEF6EB;      /* 警告黃淺背景 */
  
  /* ==========================================
     2. 視覺陰影、圓角與動畫 (Modern UI)
     ========================================== */
  --font-family: 'Noto Sans TC', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; /* 代碼專用字體 */
  
  --shadow-sm: 0 2px 8px rgba(140, 106, 48, 0.04);
  --shadow-md: 0 12px 30px rgba(140, 106, 48, 0.08);
  --shadow-floating: 0 24px 50px rgba(140, 106, 48, 0.12);
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑微動畫過渡 */
  
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

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

body {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--text-dark);
  line-height: 1.7; /* 間距優化：提升內文易讀性 */
  letter-spacing: 0.02em; /* 字距優化 */
  -webkit-font-smoothing: antialiased;
}

.container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 20px; 
}

/* ==========================================
   3. 頂部導航 (Navbar) 
   ========================================== */
.navbar {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
  position: sticky; 
  top: 0; 
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.navbar-container { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

.logo { 
  font-size: 24px; 
  font-weight: 800; 
  color: var(--logo-color); 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  letter-spacing: 0.5px; 
}

.logo i { 
  color: var(--accent-gold); /* Logo 圖示使用品牌金色 */
  font-size: 26px; 
}

.logo span small { 
  display: block; 
  font-size: 11px; 
  font-weight: 600; 
  color: var(--text-muted); 
  letter-spacing: 1px; 
  margin-top: -2px;
}

.badge-v2 { 
  font-size: 12px; 
  font-weight: 700; 
  color: var(--text-dark); 
  background-color: var(--accent-gold); /* 改用金沙主色 */
  padding: 6px 14px; 
  border-radius: 20px; 
  letter-spacing: 0.5px; 
  box-shadow: 0 4px 12px rgba(222, 183, 110, 0.3); 
}

/* ==========================================
   4. 主版面佈局 
   ========================================== */
.main-content { 
  padding: 50px 20px; 
}

.grid-layout { 
  display: grid; 
  grid-template-columns: 1.6fr 1fr; 
  gap: 40px; 
  align-items: start; 
}

/* 左側：勘驗單面板 */
.document-panel { 
  background-color: var(--card-bg); 
  padding: 50px; 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-md); 
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.doc-header { 
  margin-bottom: 40px; 
  text-align: center; 
}

.doc-company-name { 
  font-size: 16px; 
  font-weight: 800; 
  color: var(--primary-color); 
  margin-bottom: 8px; 
  letter-spacing: 0.5px; 
  text-transform: uppercase; 
}

.doc-title { 
  font-size: 26px; 
  font-weight: 800; 
  color: var(--text-dark); 
  letter-spacing: 1px; 
  display: inline-block; 
  position: relative; 
}

.doc-title::after { 
  content: ''; 
  position: absolute; 
  bottom: -12px; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 60px; 
  height: 4px; 
  background: var(--accent-gold); 
  border-radius: 2px; 
}

.doc-section { 
  margin-bottom: 45px; 
  background: var(--card-bg); 
}

.section-title { 
  font-size: 18px; 
  font-weight: 800; 
  color: var(--primary-color); 
  margin-bottom: 8px; 
  padding-left: 14px; 
  border-left: 5px solid var(--accent-gold);
  display: flex; 
  align-items: center;
}

.section-subtitle { 
  font-size: 13px; 
  color: var(--text-muted); 
  margin-bottom: 25px; 
  padding-left: 19px; 
}

.sub-section-title { 
  font-size: 15px; 
  font-weight: 700; 
  color: var(--primary-color); 
  margin: 30px 0 15px 19px; 
  background: var(--accent-gold-light); 
  display: inline-block; 
  padding: 6px 14px; 
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-gold);
}

/* ==========================================
   5. 手寫表單輸入框美化 (Line Inputs)
   ========================================== */
.form-list, .demo-list { 
  list-style: none; 
  padding-left: 19px; 
}

.form-list li { 
  margin-bottom: 18px; 
  font-size: 15px; 
  display: flex; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: 8px; 
  color: var(--text-dark); 
}

.bullet-point { 
  width: 6px; 
  height: 6px; 
  background: var(--accent-gold); 
  border-radius: 50%; 
  display: inline-block; 
  margin-right: 10px; 
}

.label-bold { 
  font-weight: 700; 
  color: var(--text-dark); 
}

/* 手寫感下底線輸入框設計 */
.line-input {
  border: none; 
  border-bottom: 2px dashed var(--border-color); 
  background: transparent; 
  font-family: var(--font-family); 
  font-size: 15px; 
  color: var(--primary-color); 
  font-weight: 800; 
  text-align: center; 
  padding: 4px 8px; 
  outline: none; 
  transition: var(--transition);
}

.line-input:focus, .line-input:not(:placeholder-shown) { 
  border-bottom: 2px solid var(--primary-color); 
  background: var(--accent-gold-light); 
}

.long-input { width: 280px; text-align: left; }
.short-input { width: 70px; }
.medium-input { width: 140px; text-align: left; }
.tiny-input { width: 50px; }

/* 美化 Radio 按鈕 */
.radio-label { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  cursor: pointer; 
  margin-right: 16px; 
  font-weight: 500; 
  transition: var(--transition); 
  padding: 4px 8px; 
  border-radius: var(--radius-sm); 
}

.radio-label:hover { 
  background: var(--accent-gold-light); 
}

.radio-label input[type="radio"] { 
  accent-color: var(--primary-color); 
  transform: scale(1.1); 
}

/* ==========================================
   6. 高級難度加權表格 (Risk Table) 
   ========================================== */
.risk-table { 
  width: calc(100% - 19px); 
  margin-left: 19px;
  border-collapse: separate; 
  border-spacing: 0; 
  border-radius: var(--radius-md); 
  overflow: hidden; 
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
}

.risk-table th, .risk-table td { 
  padding: 14px 18px; 
  text-align: left; 
  border-bottom: 1px solid var(--border-color); 
}

.risk-table th { 
  background-color: var(--primary-color); 
  color: #fff; 
  font-weight: 700; 
  letter-spacing: 0.5px; 
  border-bottom: none; 
}

.risk-table th:not(:last-child) { 
  border-right: 1px solid rgba(255, 255, 255, 0.1); 
}

.risk-table tr:last-child td { 
  border-bottom: none; 
}

.risk-table tr { 
  transition: var(--transition); 
}

.risk-table tr:hover { 
  background-color: var(--accent-gold-light); 
}

.risk-table td strong { 
  color: var(--text-dark); 
  font-size: 15px; 
}

.k-col { 
  position: relative; 
  color: var(--text-muted); 
  font-weight: 500; 
}

.hidden-k-input {
  width: 55px; 
  border: none; 
  background: var(--accent-gold-light); 
  font-weight: 800; 
  color: var(--primary-color); 
  outline: none; 
  padding: 4px; 
  border-radius: var(--radius-sm); 
  text-align: center;
  transition: var(--transition); 
  margin-left: 8px;
}

.hidden-k-input:focus { 
  background: #FFF; 
  box-shadow: 0 0 0 2px var(--accent-gold); 
}

.custom-chk { 
  width: 18px; 
  height: 18px; 
  cursor: pointer; 
  accent-color: var(--color-error); /* 原生核取方塊樣式語意化 */
  transition: transform 0.2s; 
}

.custom-chk:checked { 
  transform: scale(1.1); 
}

/* ==========================================
   7. 拆除清單列表 (互動Hover與卡片特效)
   ========================================== */
.demo-list li { 
  padding: 12px 16px; 
  border-radius: var(--radius-sm); 
  transition: var(--transition); 
  border: 1px solid transparent; 
  margin-bottom: 8px;
}

.demo-list li:hover { 
  background-color: #ffffff; 
  transform: translateX(5px); /* 微動畫：滑鼠懸停微幅向右滑移 */
  box-shadow: var(--shadow-sm); 
  border-color: var(--border-color);
}

.item-label { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  cursor: pointer; 
  font-weight: 600; 
  color: var(--text-dark); 
}

.note-text { 
  font-size: 12px; 
  color: var(--primary-color); 
  font-weight: 600; 
  background: var(--accent-gold-light); 
  padding: 2px 8px; 
  border-radius: 4px; 
  margin-left: 8px;
}

/* ==========================================
   8. 右側：懸浮玻璃質感報價單 (Floating Quote Card)
   ========================================== */
.sticky-sidebar { 
  position: sticky; 
  top: 100px; 
}

.quote-card {
  background: var(--card-bg);
  border: none;
  border-top: 6px solid var(--accent-gold); /* 改為高亮金頂欄邊框 */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
  padding: 40px 30px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.quote-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 60px rgba(140, 106, 48, 0.16);
}

/* 奢華金沙裝飾性背景圖形 */
.quote-card::before {
  content: ''; 
  position: absolute; 
  top: -50px; 
  right: -50px; 
  width: 150px; 
  height: 150px;
  background: radial-gradient(circle, rgba(222, 183, 110, 0.15) 0%, rgba(255, 255, 255, 0) 70%); 
  border-radius: 50%;
}

.quote-header { 
  text-align: center; 
  margin-bottom: 25px; 
  border-bottom: 2px dashed var(--border-color); 
  padding-bottom: 20px; 
}

.company-logo-black { 
  font-size: 22px; 
  font-weight: 800; 
  color: var(--logo-color); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px; 
  margin-bottom: 12px; 
}

.company-logo-black i {
  color: var(--accent-gold);
}

.company-logo-black small { 
  display: block; 
  font-size: 11px; 
  letter-spacing: 0.5px; 
  margin-top: -2px; 
  color: var(--text-muted);
}

.quote-header h2 { 
  font-size: 19px; 
  font-weight: 800; 
  color: var(--text-dark); 
  letter-spacing: 0.5px;
}

.quote-date { 
  font-size: 12px; 
  color: var(--text-muted); 
  margin-top: 6px; 
  font-weight: 500; 
}

.price-display { 
  display: flex; 
  justify-content: center; 
  align-items: flex-start; 
  gap: 6px; 
  margin: 25px 0 10px 0; 
}

.currency { 
  font-size: 22px; 
  font-weight: 800; 
  color: var(--primary-color); 
  margin-top: 6px;
}

.amount { 
  font-size: 46px; 
  font-weight: 800; 
  color: var(--primary-color); 
  letter-spacing: -1px; 
  line-height: 1; 
}

.tax-tip { 
  font-size: 12px; 
  text-align: center; 
  color: var(--primary-color); 
  font-weight: 600; 
  margin-bottom: 25px; 
}

/* 全局難度係數盒美化 */
.global-multiplier-box { 
  background: linear-gradient(135deg, var(--accent-gold-light) 0%, #FAF8F5 100%); 
  padding: 16px; 
  border-radius: var(--radius-md); 
  border: 1px solid var(--border-color); 
  margin-bottom: 25px; 
  box-shadow: inset 0 2px 4px rgba(140, 106, 48, 0.02);
}

.multiplier-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  font-weight: 800; 
  font-size: 14px; 
  color: var(--text-dark); 
}

.multiplier-value { 
  color: var(--color-error); 
  font-size: 20px; 
  font-weight: 800; 
  background: #fff; 
  padding: 4px 12px; 
  border-radius: var(--radius-sm); 
  box-shadow: var(--shadow-sm); 
  border: 1px solid var(--border-color);
}

.quote-body h3 { 
  font-size: 15px; 
  font-weight: 800; 
  color: var(--primary-color); 
  margin-bottom: 15px; 
  border-left: 3px solid var(--accent-gold); 
  padding-left: 10px;
}

.detail-list { 
  margin-top: 10px; 
  max-height: 280px; 
  overflow-y: auto; 
  padding-right: 5px;
}

.detail-list::-webkit-scrollbar { 
  width: 5px; 
}

.detail-list::-webkit-scrollbar-thumb { 
  background: var(--border-color); 
  border-radius: 10px; 
}

.detail-row { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  font-size: 14px; 
  padding: 12px 0; 
  border-bottom: 1px dashed var(--border-color); 
  font-weight: 500; 
  color: var(--text-dark); 
}

.detail-price { 
  font-weight: 800; 
  color: var(--primary-color); 
  font-size: 15px;
}

/* ==========================================
   9. 按鈕與交互效果 
   ========================================== */
.quote-footer { 
  margin-top: 30px; 
}

.btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px; 
  width: 100%; 
  padding: 14px; 
  border-radius: var(--radius-md); 
  font-weight: 800; 
  font-size: 15px; 
  cursor: pointer; 
  border: none; 
  transition: var(--transition); 
  font-family: var(--font-family); 
}

.btn-secondary { 
  background: var(--primary-color); 
  color: #fff; 
  box-shadow: 0 4px 15px rgba(140, 106, 48, 0.2); 
}

.btn-secondary:hover { 
  background: var(--primary-light); 
  transform: translateY(-2px); 
  box-shadow: 0 8px 20px rgba(140, 106, 48, 0.3); 
}

.btn-secondary:active {
  transform: translateY(0);
}

/* ==========================================
   10. 頁尾與助理徽章
   ========================================== */
.footer { 
  text-align: center; 
  padding: 30px 0; 
  color: var(--text-muted); 
  font-size: 13px; 
  margin-top: 40px; 
}

.agent-avatar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto 0 auto;
  max-width: 1080px;
}

.agent-avatar-img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 20px rgba(140, 106, 48, 0.08));
  transition: var(--transition);
}

.agent-avatar-img:hover {
  transform: translateY(-6px) scale(1.03); /* 微動畫：助理徽章放大發光 */
  filter: drop-shadow(0 12px 30px rgba(140, 106, 48, 0.16));
}

/* 輔助類別：防止巢狀清單 Hover 背景 */
.demo-list li.no-hover:hover {
  background-color: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ==========================================
   11. 響應式佈局 (Mobile First - 手機優先設計)
   ========================================== */

/* 預設針對 375px 以上的手機螢幕完美顯示 */
@media (min-width: 375px) {
  .container {
    padding: 0 16px;
  }
}

/* 平板斷點 (768px 以上)：間距與卡片佈局優化 */
@media (min-width: 768px) {
  .container {
    padding: 0 24px;
  }
  .risk-table { 
    width: calc(100% - 19px); 
    margin-left: 19px;
  }
  .line-input.long-input { 
    width: 280px; 
  }
}

/* 桌面斷點 (1200px 以上)：恢復雙欄並排放大呈現 */
@media (min-width: 1200px) {
  .grid-layout { 
    grid-template-columns: 1.6fr 1fr; 
    gap: 40px; 
  }
}

/* 針對小於 1200px 的中小型螢幕，將雙欄改為單欄上下排列 */
@media (max-width: 1199px) {
  .grid-layout { 
    grid-template-columns: 1fr; 
  }
  .sticky-sidebar { 
    position: static; 
    margin-top: 40px; 
  }
  .document-panel { 
    padding: 30px 20px; 
  }
  .risk-table { 
    width: 100%; 
    margin-left: 0; 
  }
  .line-input.long-input { 
    width: 100%; 
    margin-top: 10px; 
    text-align: center;
  }
}

/* ==========================================
   12. 列印樣式優化 
   ========================================== */
@media print {
  body { 
    background: #fff; 
  }
  .navbar, .footer, .btn, .doc-title::after, .agent-avatar-wrapper { 
    display: none; 
  }
  .main-content { 
    padding: 0; 
  }
  .grid-layout { 
    display: block; 
  }
  .document-panel, .quote-card { 
    box-shadow: none; 
    border: none; 
    padding: 0; 
    margin-bottom: 30px; 
  }
  .quote-card { 
    border-top: none; 
  }
}