/* ============================================================
   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); }

/* 空白表鈕目前用 hidden 藏起來（檔案仍在 /docs）。.dg-dl 自帶 display，要明寫才藏得住 */
.dg-dl[hidden] { display: none; }

/* ---------- 手機 ---------- */
@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); }
}

/* ============================================================
   2026-09-05 改版：這一頁不再送出任何東西，改成團隊自己的對照表
   新增三組樣式：
     rm- = read me（頁首「會 / 不會」兩格）
     fl- = flow（01 結案 10 關，誰做哪一關）
     rd- = red flags（06 審件時會被挑出來的地方）
   ============================================================ */

/* ---------- rm-：頁首兩格「會怎樣 / 不會怎樣」 ---------- */
.rm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rm-fact {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px; border: 2px solid var(--ink); background: var(--surface);
  box-shadow: 4px 4px 0 var(--ink);
}
.rm-fact > i { font-size: 1.5rem; flex-shrink: 0; line-height: 1.4; }
.rm-fact > div > strong { display: block; font-size: 0.98rem; margin-bottom: 5px; }
.rm-fact > div > span { display: block; font-size: 0.88rem; line-height: 1.75; color: #333; }
.rm-fact a { color: var(--ink); font-weight: 700; }
.rm-yes { border-left: 6px solid var(--neon); }
.rm-yes > i { color: var(--neon); }
.rm-no { border-left: 6px solid var(--warn); }
.rm-no > i { color: var(--warn); }

/* ---------- fl-：說明框（01 與 04 共用） ---------- */
.fl-intro {
  background: #f6f6f6; color: #222; padding: 15px; margin-bottom: 25px;
  border-radius: 6px; font-size: 0.95rem; line-height: 1.75;
  border-left: 5px solid var(--ink);
}
.fl-intro--green { background: #f1fdf5; color: #14532d; border-left-color: var(--neon); }

/* 責任標籤：說明框裡的圖例與每一關標題後的小標共用同一組顏色 */
.fl-k, .fl-who {
  display: inline-block; font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  padding: 2px 7px; border: 2px solid var(--ink); border-radius: 3px;
  line-height: 1.5; white-space: nowrap; vertical-align: middle;
}
.fl-k-you { background: var(--neon); color: var(--ink); }
.fl-k-ctr { background: #e5e5e5; color: #444; }
.fl-t .fl-who { margin-left: 8px; }

/* ---------- fl-：10 關清單 ---------- */
.fl-list { list-style: none; margin: 0; padding: 0; }
.fl-step {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 15px; border: 2px solid var(--ink); background: var(--surface);
  margin-bottom: -2px;   /* 相鄰兩關共用一條線 */
}
.fl-step:last-child { margin-bottom: 0; }
.fl-n {
  flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 900; font-size: 0.95rem;
  border: 2px solid var(--ink); border-radius: 50%;
}
.fl-b { min-width: 0; }
.fl-t { font-weight: 700; font-size: 1rem; line-height: 1.9; }
.fl-d { font-size: 0.88rem; line-height: 1.8; color: #444; margin-top: 5px; }

/* 要你動手的關卡整列打亮、中心的關卡壓灰，掃一眼就知道哪幾格是自己的 */
.fl-you { background: #f4fff8; }
.fl-you .fl-n { background: var(--neon); }
.fl-ctr { background: #fafafa; }
.fl-ctr .fl-n { background: #e5e5e5; color: #555; }
.fl-ctr .fl-t { color: #444; }
.fl-both { background: #fbfffc; }
.fl-both .fl-n { background: linear-gradient(135deg, var(--neon) 50%, #e5e5e5 50%); }

/* ---------- rd-：審件時會被挑出來的地方 ---------- */
.rd-intro {
  background: #fff1f2; color: #881337; padding: 15px; margin-bottom: 25px;
  border-radius: 6px; font-size: 0.95rem; line-height: 1.75;
  border-left: 5px solid #e11d48;
}
.rd-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; font-size: 0.9rem; font-weight: 700; color: var(--sub-ink);
}
.rd-item + .rd-h { margin-top: 30px; }
.rd-badge {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  padding: 3px 8px; border: 2px solid var(--ink); border-radius: 3px; color: var(--ink);
}
.rd-badge-rule { background: var(--warn); }
.rd-badge-sys { background: #fecdd3; }
.rd-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; border: 2px solid var(--ink); background: var(--surface);
  margin-bottom: -2px;   /* 相鄰兩項共用一條線 */
}
.rd-i { flex-shrink: 0; font-size: 1.15rem; line-height: 1.6; }
.rd-item > div > strong { display: block; font-size: 0.96rem; line-height: 1.6; }
.rd-item > div > span { display: block; font-size: 0.87rem; line-height: 1.8; color: #444; margin-top: 4px; }

/* ---------- 07 第 1 列改成整列可點 ---------- */
.ev-click { cursor: pointer; -webkit-user-select: none; user-select: none; }
.ev-click:hover { background: #fafafa; }
.ev-click:active { transform: scale(0.995); }
.ev-hint { font-style: normal; font-weight: 400; font-size: 0.78rem; color: #999; }

/* ---------- 手機 ---------- */
@media (max-width: 600px) {
  .rm-facts { grid-template-columns: 1fr; gap: 12px; }
  .rm-fact { box-shadow: 3px 3px 0 var(--ink); padding: 13px; }

  .fl-step { padding: 12px 13px; gap: 11px; }
  .fl-n { width: 26px; height: 26px; font-size: 0.85rem; }
  .fl-t { font-size: 0.95rem; }

  .rd-item { padding: 12px 13px; gap: 10px; }
  .rd-item > div > strong { font-size: 0.93rem; }
}