/* ============================================================
   ALL PASS — /close 專屬樣式
   ============================================================
   目前只有「結案文件怎麼填」區塊（dg- = docs guide）。
   本頁其餘版面沿用 base.css。
   ============================================================ */

/* 本頁專屬 RWD:PLAN/ACTUAL 兩欄在手機收成單欄 */
@media (max-width: 600px) {
  .plan-actual-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ---------- 文件導覽:三份文件各一個摺疊區 ---------- */
.dg-item {
  border: var(--border);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 16px;
}

.dg-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  font-size: 1.05rem;
  transition: 0.15s;
}
.dg-item > summary::-webkit-details-marker { display: none; }
.dg-item > summary:hover { background: #fafafa; }
.dg-item[open] > summary {
  background: var(--ink);
  color: var(--surface);
  border-bottom: var(--border);
}

.dg-icon { font-size: 1.6rem; flex-shrink: 0; }
.dg-item[open] .dg-icon { color: var(--neon); }

.dg-titles { flex: 1; min-width: 0; }
.dg-name { display: block; line-height: 1.4; }
.dg-att {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--sub-ink);
  margin-top: 3px;
  letter-spacing: 0.5px;
}
.dg-item[open] .dg-att { color: #999; }

/* 摺疊箭頭 */
.dg-caret {
  flex-shrink: 0;
  font-family: var(--mono);
  font-weight: 900;
  font-size: 1.1rem;
  transition: transform 0.2s;
}
.dg-item[open] .dg-caret { transform: rotate(90deg); color: var(--neon); }

.dg-body { padding: 20px 18px; }

/* ---------- 流程步驟 ---------- */
.dg-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: #f7f7f7;
  border: 2px dashed #ccc;
  margin-bottom: 22px;
}
.dg-step {
  font-size: 0.88rem;
  font-weight: 700;
  background: var(--surface);
  border: 2px solid var(--ink);
  padding: 5px 11px;
}
.dg-step-arrow { font-family: var(--mono); font-weight: 900; color: var(--sub-ink); }

/* ---------- 欄位對照表 ---------- */
.dg-table-wrap { overflow-x: auto; }
.dg-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.dg-table th, .dg-table td {
  border: 2px solid var(--ink);
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
  line-height: 1.65;
}
.dg-table th {
  background: var(--ink);
  color: var(--surface);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.dg-table td { background: var(--surface); }
/* 左欄=表格上的欄位名稱,做成像表單標籤 */
.dg-table td.dg-field {
  background: #f0f0f0;
  font-weight: 900;
  white-space: nowrap;
  width: 1%;
}
.dg-table tr.dg-skip td.dg-field { background: #ffe9e9; }
.dg-table tr.dg-skip td { color: var(--sub-ink); }
.dg-hint {
  display: block;
  font-size: 0.82rem;
  color: var(--sub-ink);
  margin-top: 4px;
  line-height: 1.55;
}
.dg-eg {
  font-family: var(--mono);
  font-size: 0.85rem;
  background: #f0f0f0;
  border: 1px solid #ddd;
  padding: 1px 6px;
}

/* ---------- 注意事項 ---------- */
.dg-warn {
  margin-top: 20px;
  background: #FFF8E1;
  border: 2px solid var(--warn);
  border-left-width: 8px;
  padding: 14px 18px;
}
.dg-warn-title {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #8a6800;
  margin: 0 0 10px;
}
.dg-warn ul { margin: 0; padding-left: 20px; }
.dg-warn li { font-size: 0.93rem; line-height: 1.8; color: #5D4037; }

/* ---------- 下載鈕（空白表 + 填寫範例並排） ---------- */
.dg-dls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.dg-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--ink);
  color: var(--surface);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--neon);
  font-weight: 900;
  font-size: 0.95rem;
  text-decoration: none;
  transition: 0.15s;
}
.dg-dl:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--neon); }
.dg-dl:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--neon); }
.dg-dl i { font-size: 1.3rem; color: var(--neon); }
.dg-dl-sub {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  color: #aaa;
  margin-top: 2px;
}

/* 填寫範例:白底,跟「空白表」在視覺上分開,免得抓錯檔送件 */
.dg-dl--sample {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.dg-dl--sample:hover { box-shadow: 6px 6px 0 var(--ink); }
.dg-dl--sample:active { box-shadow: 0 0 0 var(--ink); }
.dg-dl--sample i { color: #c00; }
.dg-dl--sample .dg-dl-sub { color: var(--sub-ink); }

/* ---------- 手機 ---------- */
@media (max-width: 600px) {
  .dg-item { box-shadow: 3px 3px 0 var(--ink); }
  .dg-item > summary { padding: 14px; font-size: 0.98rem; gap: 10px; }
  .dg-body { padding: 16px 14px; }

  /* 流程橫排在窄螢幕會折行、箭頭跑到行首;改直排,箭頭轉成向下 */
  .dg-flow { flex-direction: column; align-items: stretch; padding: 12px; gap: 6px; }
  .dg-step { font-size: 0.85rem; padding: 7px 10px; text-align: center; }
  .dg-step-arrow { text-align: center; line-height: 1; }
  .dg-step-arrow::before { content: '↓'; }
  .dg-step-arrow { font-size: 0; }
  .dg-step-arrow::before { font-size: 1rem; }

  /* 欄位對照表:窄螢幕改成堆疊卡片,不要橫向捲動
     (這是查「哪一格填什麼」的內容,捲來捲去會對不上) */
  .dg-table, .dg-table tbody, .dg-table tr, .dg-table td { display: block; width: auto; }
  .dg-table { min-width: 0; }
  .dg-table thead { display: none; }
  .dg-table tr { border: 2px solid var(--ink); margin-bottom: -2px; }
  .dg-table td { border: none; padding: 11px 13px; }
  .dg-table td.dg-field {
    width: auto;
    white-space: normal;
    border-bottom: 2px solid var(--ink);
    font-family: var(--mono);
    font-size: 0.88rem;
  }
  .dg-table td.dg-field br { display: none; }

  .dg-dls { flex-direction: column; gap: 10px; }
  .dg-dl { width: 100%; justify-content: center; text-align: left; }
  .dg-dl:hover { transform: none; box-shadow: 4px 4px 0 var(--neon); }
  .dg-dl--sample:hover { box-shadow: 4px 4px 0 var(--ink); }
}