:root {
  font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
  color: #123431;
  background: #f3f7f5;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: linear-gradient(135deg, #f7faf8, #eef5f2); }
button, input, select { font: inherit; }
button { color: inherit; }

.app-header {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 26px 18px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
}
.app-header p { margin: 0 0 6px; color: #5f7c78; font-size: 13px; letter-spacing: .08em; }
.app-header h1 { margin: 0; font-family: DFKai-SB, "Microsoft JhengHei", sans-serif; font-size: 32px; }
.header-actions { display: flex; gap: 10px; }

button {
  border: 1px solid #bdd1cd;
  border-radius: 8px;
  background: #fff;
  padding: 10px 16px;
  cursor: pointer;
}
button:hover { border-color: #2f7e70; }
button.primary, #export-word { background: #145e52; color: #fff; border-color: #145e52; }

.steps {
  max-width: 1128px;
  margin: 0 auto 20px;
  padding: 0 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.steps button { display: flex; align-items: center; justify-content: center; gap: 8px; color: #69807c; }
.steps button span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e8f0ee; }
.steps button.active { color: #145e52; border-color: #4b9286; background: #e8f3f0; font-weight: 700; }
.steps button.active span { background: #145e52; color: #fff; }

main { max-width: 1128px; margin: 0 auto; padding: 0 26px 50px; }
.panel {
  background: rgba(255,255,255,.96);
  border: 1px solid #ccdbd8;
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 14px 40px rgba(25,67,59,.06);
}
.panel h2 { margin: 0 0 22px; font-size: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 22px; }
.form-grid label { display: grid; gap: 7px; font-size: 14px; }
input, select { width: 100%; border: 1px solid #c7d8d5; border-radius: 8px; padding: 11px 12px; background: #fff; color: #123431; }
input:focus, select:focus { outline: 2px solid #9fc9c1; border-color: #2f7e70; }

.assessment-panel { padding: 18px; }
.assessment-panel > h2 { padding: 8px 10px 0; }
.route-group { border: 1px solid #b7d0cb; border-radius: 12px; margin: 14px 0; overflow: hidden; background: #f9fcfb; }
.route-group > button { width: 100%; border: 0; border-radius: 0; padding: 20px 18px; display: grid; grid-template-columns: 1fr auto auto; gap: 15px; text-align: left; background: #f8fbfa; }
.route-group > button strong { font-size: 16px; }
.route-group > button small { min-width: 35px; text-align: right; }
.route-group.selected > button { box-shadow: inset 4px 0 #2e8475; background: #eef6f3; }
.route-options { padding: 12px 16px 18px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.route-option { border: 1px solid #cbdad7; border-radius: 9px; background: #fff; overflow: hidden; }
.route-option > label, .child-option, .type-option > label, .type-option-heading, .procedure-option {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  cursor: pointer;
}
.type-option-heading { cursor: default; }
.route-option.selected, .type-option.selected { border-color: #2f8878; box-shadow: inset 4px 0 #2f8878; background: #edf6f3; }
.route-option input, .child-option input, .type-option input, .procedure-option input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.option-copy { display: grid; gap: 3px; }
.option-copy small { color: #71847f; font-size: 12px; }
.child-options, .procedure-options { padding: 0 10px 10px 34px; display: grid; gap: 7px; }
.child-option, .procedure-option { min-height: 44px; background: #fff; border: 1px solid #d4e0de; border-radius: 7px; }
.child-option.selected, .procedure-option.selected { background: #e8f4f0; border-color: #4b9286; }
.child-option.pending { cursor: not-allowed; background: #f7f9f8; border-color: #dce5e3; }
.child-option.pending .option-copy { color: #526762; }
.child-option.pending .option-copy small { color: #8a9b97; }
.route-subgroup-card {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid #bcd2cd;
  border-radius: 11px;
  background: #f7fbfa;
}
.route-subgroup-header {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  text-align: left;
  background: #eaf4f1;
}
.route-subgroup-card.expanded .route-subgroup-header { border-bottom: 1px solid #d5e3e0; }
.route-subgroup-header strong { color: #214f47; font-size: 15px; font-weight: 750; }
.route-subgroup-header small { min-width: 35px; color: #47766d; font-size: 12px; font-weight: 700; text-align: right; }
.route-subgroup-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 12px;
}
.route-subgroup-options .child-option { padding: 12px 13px; }
.type-option { align-self: start; border: 1px solid #cbdad7; border-radius: 9px; background: #fff; overflow: hidden; }
.type-list { display: contents; }
.subgroup-title { grid-column: 1 / -1; margin: 8px 0 0; font-size: 14px; color: #50706a; }

.page-actions { display: flex; justify-content: space-between; margin-top: 22px; }
.page-actions button[hidden] { display: none; }
.empty-result { text-align: center; padding: 70px 30px; color: #708581; }
.empty-result h2 { color: #506b66; }
.result-title-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.basic-summary, .report-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.basic-summary th, .basic-summary td, .report-table th, .report-table td { border: 1px solid #cfddda; padding: 10px; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; text-indent: 0; }
.basic-summary th { width: 26%; text-align: center; background: #e9f1ef; font-weight: 500; }
.report-section { margin-top: 20px; background: #fff; border: 1px solid #cbdad7; border-radius: 12px; overflow: hidden; }
.report-section h3 { margin: 0; padding: 16px 18px; background: #f1f7f5; font-size: 17px; }
.report-table th { background: #e4efec; font-size: 13px; text-align: left; }
.report-table td { font-size: 13px; line-height: 1.6; }
.report-table th { vertical-align: middle; }
.report-table td { vertical-align: top; }
.report-table td.merged-procedure-cell { vertical-align: middle; }
.report-table td.merged-table-two-cell { vertical-align: middle; }
.report-section[data-table="TABLE_2"] .table-two-subrow td { border-top-color: #dfe9e7; }
.report-section[data-table="TABLE_2"] .table-two-subrow:first-child td { border-top-color: #afc8c3; }
.report-cell-lines { display: grid; gap: 5px; min-width: 0; }
.report-cell-line { min-width: 0; }
.report-cell-line.numbered {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  align-items: start;
  column-gap: 6px;
}
.report-cell-marker {
  grid-column: 1;
  white-space: nowrap;
  text-align: left;
}
.report-cell-text {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
.report-cell-line:not(.numbered) .report-cell-text { grid-column: 1 / -1; }
.report-section[data-table="TABLE_1"] .report-cell-line.hierarchy-level-0:not(:first-child) { margin-top: 8px; }
.report-section[data-table="TABLE_1"] .report-cell-line.numbered {
  grid-template-columns: 2.15em minmax(0, 1fr);
  column-gap: 2px;
}
.report-section[data-table="TABLE_1"] .report-cell-line.hierarchy-level-0 .report-cell-marker {
  color: #17483f;
  font-weight: 700;
}
.report-section[data-table="TABLE_1"] .report-cell-line.hierarchy-level-1 { margin-left: 1.35rem; }
.report-section[data-table="TABLE_1"] .report-cell-line.hierarchy-level-2 { margin-left: 2.7rem; }
.report-section[data-table="TABLE_1"] .report-cell-line.hierarchy-level-3 { margin-left: 4.05rem; }

/* 五表各自使用固定欄寬，避免欄位平均切割後文字與列線錯位。 */
.report-section:is([data-table="TABLE_1"], [data-table="PLAN_IDENTIFICATION"]) .report-table th:nth-child(1),
.report-section:is([data-table="TABLE_1"], [data-table="PLAN_IDENTIFICATION"]) .report-table td:nth-child(1) { width: 7%; }
.report-section:is([data-table="TABLE_1"], [data-table="PLAN_IDENTIFICATION"]) .report-table th:nth-child(2),
.report-section:is([data-table="TABLE_1"], [data-table="PLAN_IDENTIFICATION"]) .report-table td:nth-child(2) { width: 25%; }
.report-section:is([data-table="TABLE_1"], [data-table="PLAN_IDENTIFICATION"]) .report-table th:nth-child(3),
.report-section:is([data-table="TABLE_1"], [data-table="PLAN_IDENTIFICATION"]) .report-table td:nth-child(3) { width: 68%; }

.report-section[data-table="TABLE_2"] .report-table th:nth-child(1) { width: 6%; }
.report-section[data-table="TABLE_2"] .report-table th:nth-child(2) { width: 18%; }
.report-section[data-table="TABLE_2"] .report-table th:nth-child(3) { width: 13%; }
.report-section[data-table="TABLE_2"] .report-table th:nth-child(4) { width: 24%; }
.report-section[data-table="TABLE_2"] .report-table th:nth-child(5) { width: 29%; }
.report-section[data-table="TABLE_2"] .report-table th:nth-child(6) { width: 10%; }

.report-section[data-table="TABLE_3"] .report-table th:nth-child(1),
.report-section[data-table="TABLE_3"] .report-table td:nth-child(1) { width: 34%; }
.report-section[data-table="TABLE_3"] .report-table th:nth-child(2),
.report-section[data-table="TABLE_3"] .report-table td:nth-child(2) { width: 66%; }

.report-section[data-table="TABLE_4"] .report-table th:nth-child(1),
.report-section[data-table="TABLE_4"] .report-table td:nth-child(1) { width: 20%; }
.report-section[data-table="TABLE_4"] .report-table th:nth-child(2),
.report-section[data-table="TABLE_4"] .report-table td:nth-child(2) { width: 24%; }
.report-section[data-table="TABLE_4"] .report-table th:nth-child(3),
.report-section[data-table="TABLE_4"] .report-table td:nth-child(3) { width: 14%; }
.report-section[data-table="TABLE_4"] .report-table th:nth-child(4),
.report-section[data-table="TABLE_4"] .report-table td:nth-child(4) { width: 42%; }

.report-section[data-table="PLAN_ASSESSMENT"] .report-table th:nth-child(1),
.report-section[data-table="PLAN_ASSESSMENT"] .report-table td:nth-child(1) { width: 24%; }
.report-section[data-table="PLAN_ASSESSMENT"] .report-table th:nth-child(2),
.report-section[data-table="PLAN_ASSESSMENT"] .report-table td:nth-child(2) { width: 16%; }
.report-section[data-table="PLAN_ASSESSMENT"] .report-table th:nth-child(3),
.report-section[data-table="PLAN_ASSESSMENT"] .report-table td:nth-child(3) { width: 38%; }
.report-section[data-table="PLAN_ASSESSMENT"] .report-table th:nth-child(4),
.report-section[data-table="PLAN_ASSESSMENT"] .report-table td:nth-child(4) { width: 22%; }

.report-section[data-table="PLAN_CONTROL"] .report-table th:nth-child(1),
.report-section[data-table="PLAN_CONTROL"] .report-table td:nth-child(1) { width: 24%; }
.report-section[data-table="PLAN_CONTROL"] .report-table th:nth-child(2),
.report-section[data-table="PLAN_CONTROL"] .report-table td:nth-child(2) { width: 16%; }
.report-section[data-table="PLAN_CONTROL"] .report-table th:nth-child(3),
.report-section[data-table="PLAN_CONTROL"] .report-table td:nth-child(3) { width: 60%; }

.report-section[data-table="TABLE_5"] .report-table th:nth-child(1),
.report-section[data-table="TABLE_5"] .report-table td:nth-child(1) { width: 14%; }
.report-section[data-table="TABLE_5"] .report-table th:nth-child(2),
.report-section[data-table="TABLE_5"] .report-table td:nth-child(2) { width: 10%; }
.report-section[data-table="TABLE_5"] .report-table th:nth-child(3),
.report-section[data-table="TABLE_5"] .report-table td:nth-child(3) { width: 17%; }
.report-section[data-table="TABLE_5"] .report-table th:nth-child(4),
.report-section[data-table="TABLE_5"] .report-table td:nth-child(4) { width: 17%; }
.report-section[data-table="TABLE_5"] .report-table th:nth-child(5),
.report-section[data-table="TABLE_5"] .report-table td:nth-child(5) { width: 10%; }
.report-section[data-table="TABLE_5"] .report-table th:nth-child(6),
.report-section[data-table="TABLE_5"] .report-table td:nth-child(6) { width: 15%; }
.report-section[data-table="TABLE_5"] .report-table th:nth-child(7),
.report-section[data-table="TABLE_5"] .report-table td:nth-child(7) { width: 17%; }

.report-table td:first-child { text-align: left; }
.report-section[data-table="TABLE_3"] .report-table td:first-child,
.report-section[data-table="TABLE_4"] .report-table td:first-child,
.report-section[data-table="TABLE_5"] .report-table td:first-child { text-align: left; }
.report-section[data-table="TABLE_2"] .report-table td:nth-child(3),
.report-section[data-table="TABLE_2"] .report-table td:nth-child(6),
.report-section[data-table="TABLE_3"] .report-table td:nth-child(2),
.report-section[data-table="TABLE_4"] .report-table td:nth-child(3),
.report-section[data-table="TABLE_5"] .report-table td:nth-child(2) { text-align: left; }

#notice { position: fixed; right: 22px; top: 22px; max-width: 360px; padding: 13px 17px; border-radius: 8px; background: #315e57; color: #fff; box-shadow: 0 8px 26px rgba(0,0,0,.2); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: .2s; }
#notice.show { opacity: 1; transform: translateY(0); }
#notice.error { background: #87453d; }

@media (max-width: 760px) {
  .app-header { align-items: flex-start; flex-direction: column; }
  .steps { grid-template-columns: 1fr; }
  .form-grid, .route-options { grid-template-columns: 1fr; }
  .panel { padding: 18px; }
  .result-title-row { align-items: flex-start; flex-direction: column; }
  .report-section { overflow-x: auto; }
  .report-table { min-width: 850px; }
}

/* 原版三步驟外觀 */
.app-shell { min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  min-height: 70px; padding: 12px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-bottom: 1px solid #d7e2df; background: rgba(255,255,255,.96);
  box-shadow: 0 5px 22px rgba(27,73,65,.05);
}
.brand { display: flex; align-items: center; gap: 11px; color: #194f45; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #1d6556; color: #fff; font-size: 22px; }
.brand strong { font-family: DFKai-SB, "Microsoft JhengHei", sans-serif; font-size: 18px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.utility-button { padding: 9px 13px; background: transparent; border-color: transparent; }
.utility-button:hover { background: #edf5f2; border-color: #c6d8d4; }
.utility-button.danger { color: #913d36; }
.utility-button.danger:hover { background: #faefed; border-color: #e4b8b2; }

.layout { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 34px; padding: 36px 28px 70px; }
.step-rail { position: sticky; top: 104px; align-self: start; }
.step-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.step-rail li { position: relative; }
.step-rail li:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: 48px; width: 1px; height: 24px; background: #c9d9d5; }
.step-rail button { width: 100%; border: 0; background: transparent; padding: 8px; display: flex; align-items: center; gap: 12px; text-align: left; color: #758984; }
.step-rail button > span:last-child { display: grid; gap: 2px; }
.step-rail button small { font-size: 10px; font-weight: 400; }
.step-number { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid #bfd1cd; border-radius: 50%; background: #fff; font-size: 12px; }
.step-rail li.active button { color: #174f44; font-weight: 700; }
.step-rail li.active .step-number { background: #1d6556; border-color: #1d6556; color: #fff; }
.step-rail li.complete .step-number { background: #e4f1ed; color: #1d6556; border-color: #8eb9b0; }
.main-content { min-width: 0; }
.step-header { margin-bottom: 24px; }
.step-progress { height: 3px; background: #dfe9e6; border-radius: 3px; overflow: hidden; }
.step-progress span { display: block; height: 100%; width: 33.333%; background: #2b796a; transition: width .2s; }
.step-label { margin-top: 12px; display: flex; justify-content: space-between; color: #79908b; font-size: 12px; }
.step-label em { font-style: normal; }
.step-header h1 { margin: 12px 0 0; font-family: DFKai-SB, "Microsoft JhengHei", sans-serif; font-size: 31px; color: #153d37; }
.step-body { background: #fff; border: 1px solid #d5e1de; border-radius: 15px; padding: 28px; box-shadow: 0 14px 40px rgba(25,67,59,.06); }

.field { display: grid; align-content: start; gap: 7px; font-size: 14px; }
.field.wide { grid-column: 1 / -1; }
.field span b { margin-left: 5px; color: #a14c42; font-size: 11px; }
.field-hint { color: #7a8e89; font-size: 11px; line-height: 1.55; }
.unit-input { position: relative; display: flex; align-items: center; }
.unit-input input { padding-right: 80px; }
.unit-input em { position: absolute; right: 11px; color: #6f837e; font-size: 11px; font-style: normal; pointer-events: none; }
.segmented { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.segmented button { text-align: left; padding: 13px 15px; }
.segmented button.active { background: #e6f2ee; border-color: #398477; box-shadow: inset 3px 0 #2d806f; color: #164e43; font-weight: 700; }
.step-footer { margin-top: 26px; padding-top: 20px; border-top: 1px solid #e1eae8; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #748783; font-size: 13px; }
.button.secondary { background: #fff; }
.assessment-panel > h2 { margin: 0 0 18px; font-size: 18px; }

/* 第15條之1及丁類工程 */
.regulatory-panel { margin-top: 28px; border: 1px solid #bfd4cf; border-radius: 12px; overflow: hidden; background: #f9fcfb; }
.regulatory-panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 18px; background: #f2f8f6; }
.regulatory-panel > summary::-webkit-details-marker { display: none; }
.regulatory-panel > summary div { display: grid; gap: 5px; }
.regulatory-panel > summary span { color: #65817b; font-size: 11px; }
.regulatory-panel > summary strong { font-family: DFKai-SB, "Microsoft JhengHei", sans-serif; font-size: 16px; }
.regulatory-panel > summary b { border-radius: 999px; padding: 7px 12px; background: #387d70; color: #fff; font-size: 11px; }
.regulatory-panel-body { padding: 20px; border-top: 1px solid #d3e2de; }
.regulatory-panel-intro { margin: 0 0 16px; color: #637d77; font-size: 13px; }
.regulatory-field-grid { display: grid; gap: 16px; }
.readonly-engineering-action { display: grid; gap: 5px; border: 1px solid #cededa; border-radius: 9px; padding: 13px 15px; background: #fff; }
.readonly-engineering-action small { color: #788b87; }
.category-d-panel { border: 1px solid #cededa; border-radius: 10px; padding: 16px; background: #fff; }
.category-d-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.category-d-heading p { margin: 5px 0 0; color: #788b87; font-size: 12px; }
.category-d-heading > span { border-radius: 999px; padding: 5px 9px; background: #e6f2ee; color: #39786d; font-size: 11px; }
.category-d-fields { margin-top: 15px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.regulatory-status-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.regulatory-status-card { border: 1px solid #d2dfdc; border-radius: 10px; padding: 15px; background: #fff; }
.regulatory-status-card > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.regulatory-status-card h4 { margin: 0; font-size: 14px; line-height: 1.5; }
.regulatory-status-card strong { flex: 0 0 auto; color: #a06c24; font-size: 12px; white-space: nowrap; }
.regulatory-status-card p { margin: 10px 0 0; color: #70827e; font-size: 12px; line-height: 1.55; }
.regulatory-status-card.status-match { border-color: #75ad9f; background: #f2f9f7; box-shadow: inset 4px 0 #2f8878; }
.regulatory-status-card.status-match strong { color: #17685a; }
.regulatory-status-card.status-not-match { border-color: #cbd9d6; background: #fbfcfc; }
.regulatory-status-card.status-not-match strong { color: #60746f; }
.regulatory-status-card.status-pending { border-color: #dec99e; background: #fffbf2; box-shadow: inset 4px 0 #c28a31; }
.regulatory-status-card.status-pending strong { color: #98641d; }
.regulatory-status-reasons { margin: 9px 0 0; padding-left: 19px; color: #526d67; font-size: 12px; line-height: 1.65; }
.regulatory-status-reasons li + li { margin-top: 3px; }

/* 五表結果與浮動下載視窗 */
.five-table-results-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.five-table-results-head h2 { margin: 0; font-family: DFKai-SB, "Microsoft JhengHei", sans-serif; }
.common-result-header { margin-bottom: 20px; }
.result-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.result-table th, .result-table td { border: 1px solid #cfddda; padding: 10px; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; text-indent: 0; }
.common-result-header th { width: 26%; background: #e9f1ef; text-align: center; font-weight: 500; }
.five-table-copy-dock { position: fixed; z-index: 25; right: 24px; bottom: 24px; width: 260px; border: 1px solid #afcbc5; border-radius: 12px; padding: 14px; background: rgba(255,255,255,.97); box-shadow: 0 14px 38px rgba(21,65,57,.2); }
.five-table-copy-count { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.five-table-copy-count strong { color: #226f61; }
.five-table-copy-options { margin: 12px 0; display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; }
.five-table-copy-options button { padding: 7px 3px; font-size: 11px; }
.five-table-copy-options button.active { background: #2a796a; color: #fff; border-color: #2a796a; }
.five-table-copy-select-all, .five-table-copy-submit { width: 100%; margin-top: 7px; }
.five-table-copy-submit { background: #145e52; color: #fff; border-color: #145e52; }
.five-table-copy-submit:disabled { cursor: not-allowed; opacity: .5; }
.empty-state { padding: 65px 20px; text-align: center; color: #708581; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .step-rail { position: static; }
  .step-rail ol { grid-template-columns: repeat(3,1fr); }
  .step-rail li:not(:last-child)::after { display: none; }
  .five-table-copy-dock { position: static; width: 100%; margin-top: 20px; }
}

@media (max-width: 680px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar-actions { width: 100%; justify-content: space-between; }
  .layout { padding: 22px 14px 50px; }
  .step-body { padding: 18px; }
  .category-d-fields, .regulatory-status-grid, .segmented { grid-template-columns: 1fr; }
  .step-footer { align-items: stretch; flex-direction: column; }
}

/* 2026-09 視覺整理：統一字體、版面尺度與卡片層級 */
:root {
  --ink: #173a35;
  --muted: #6d827d;
  --brand: #17685a;
  --brand-dark: #105247;
  --brand-soft: #e9f3f0;
  --line: #cbdcd8;
  --line-soft: #dde8e5;
  --surface: #ffffff;
  --surface-soft: #f7faf9;
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", Arial, sans-serif;
  color: var(--ink);
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  min-width: 320px;
  background:
    radial-gradient(circle at 92% 2%, rgba(199,226,218,.32), transparent 30%),
    linear-gradient(180deg, #f8fbfa 0%, #f2f7f5 100%);
  color: var(--ink);
  line-height: 1.55;
  -webkit-user-select: none;
  user-select: none;
}
body, button, input, select, textarea, h1, h2, h3, h4, strong, th, td {
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", Arial, sans-serif !important;
}
input, select, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}
button, input, select { letter-spacing: 0; }

.topbar {
  min-height: 92px;
  padding: 16px max(32px, calc((100vw - 1480px) / 2));
  border-bottom-color: #d9e5e2;
  backdrop-filter: blur(12px);
}
.brand { gap: 15px; }
.brand-mark {
  display: block;
  width: 60px;
  height: 60px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid #d7e3e0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 7px 18px rgba(23,104,90,.14);
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}
.brand strong { font-size: 21px; font-weight: 750; letter-spacing: .04em; }
.topbar-actions { gap: 10px; }
.utility-button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #355d56;
  font-size: 15px;
  font-weight: 600;
}
.utility-button:hover { background: #edf5f2; border-color: #c3d8d3; }
.utility-button.danger { color: #a24c43; }
.utility-button.danger:hover { background: #fff2f0; border-color: #e7c1bc; }

.layout {
  width: min(1480px, calc(100% - 64px));
  max-width: none;
  margin: 0 auto;
  padding: 42px 0 80px;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 48px;
}
main.main-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.step-rail { top: 102px; padding-top: 8px; }
.step-rail ol { gap: 13px; }
.step-rail button {
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background .16s ease, color .16s ease;
}
.step-rail button:hover { background: rgba(233,243,240,.75); }
.step-rail li:not(:last-child)::after { left: 29px; top: 54px; height: 28px; background: #bed3ce; }
.step-number {
  width: 40px; height: 40px;
  border-color: #b8cfca;
  color: #6e837e;
  font-size: 12px;
  font-weight: 700;
}
.step-rail button > span:last-child { font-size: 15px; line-height: 1.35; }
.step-rail button small { color: #7c908b; font-size: 10px; }
.step-rail li.active button { background: rgba(233,243,240,.78); }
.step-rail li.active .step-number { box-shadow: 0 6px 15px rgba(23,104,90,.18); }

.step-header { margin: 0 0 24px; }
.step-progress { height: 4px; background: #dbe8e4; }
.step-progress span { background: linear-gradient(90deg, #17685a, #409486); }
.step-label { margin-top: 13px; color: #718882; font-size: 12px; }
.step-header h1 {
  margin-top: 8px;
  color: #153f38;
  font-size: clamp(27px, 2.1vw, 34px);
  font-weight: 750;
  letter-spacing: .02em;
}
.step-body {
  width: 100%;
  padding: 34px 38px;
  border: 1px solid #d5e3df;
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 48px rgba(26,67,59,.075);
}

.form-grid { gap: 22px 24px; }
.field { gap: 8px; color: #244b44; font-size: 14px; font-weight: 600; }
.field input, .field select {
  min-height: 46px;
  padding: 10px 13px;
  border-color: #bfd4cf;
  border-radius: 10px;
  background: #fff;
  color: #173a35;
  font-size: 14px;
  font-weight: 400;
  box-shadow: inset 0 1px 1px rgba(23,58,53,.02);
}
.field input:hover, .field select:hover { border-color: #91b8b0; }
.field input:focus, .field select:focus {
  outline: 3px solid rgba(50,137,121,.13);
  border-color: #438f81;
}
.field input::placeholder { color: #8b9b97; }
.field-hint { color: #7d908b; font-size: 11px; font-weight: 400; }
.field span b { color: #b05248; }
.unit-input em { right: 13px; color: #657d77; font-size: 11px; font-weight: 500; }
.segmented { gap: 12px; }
.segmented button {
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 10px;
  color: #315c54;
  font-size: 14px;
  font-weight: 600;
}
.segmented button.active {
  background: linear-gradient(180deg, #edf7f4, #e4f1ed);
  border-color: #328676;
  box-shadow: inset 4px 0 #247666;
}
.button {
  min-height: 42px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
}
.button.primary {
  background: linear-gradient(145deg, #17685a, #10594d);
  border-color: #145f52;
  box-shadow: 0 7px 17px rgba(23,104,90,.17);
}
.step-footer { margin-top: 30px; padding-top: 22px; }

.assessment-panel > h2 {
  margin: 0 0 20px;
  color: #174c43;
  font-size: 19px;
  font-weight: 750;
}
.route-group {
  margin: 12px 0;
  border-color: #c3d8d3;
  border-radius: 13px;
  background: #fbfdfc;
  box-shadow: 0 2px 7px rgba(26,67,59,.025);
}
.route-group > button {
  min-height: 66px;
  padding: 18px 20px;
  background: #fbfdfc;
  align-items: center;
}
.route-group > button strong { color: #204d45; font-size: 15px; font-weight: 700; }
.route-group > button small { color: #2d7568; }
.route-group.selected > button { background: #edf6f3; box-shadow: inset 4px 0 #2e8475; }
.route-options { padding: 14px 16px 18px; gap: 11px; border-top: 1px solid #e0ebe8; }
.route-option, .type-option { border-color: #ccdcd8; border-radius: 10px; }
.route-option > label, .child-option, .type-option > label, .type-option-heading, .procedure-option { min-height: 54px; padding: 13px 14px; }
.route-option.selected, .type-option.selected { background: #edf6f3; border-color: #3d8c7e; box-shadow: inset 4px 0 #2f8878; }
.option-copy { color: #234b44; font-size: 14px; }
.option-copy small { color: #718681; }

.assessment-browser {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}
.assessment-directory {
  position: sticky;
  top: 112px;
  max-height: calc(100vh - 136px);
  overflow: hidden;
  border: 1px solid #c5d9d4;
  border-radius: 13px;
  background: #f8fbfa;
  box-shadow: 0 6px 18px rgba(22, 68, 59, .06);
}
.assessment-directory-header {
  display: grid;
  gap: 4px;
  padding: 16px 16px 13px;
  border-bottom: 1px solid #dce8e5;
  background: #edf5f2;
}
.assessment-directory-header strong { color: #1d5148; font-size: 15px; }
.assessment-directory-header small { color: #6f857f; font-size: 11px; }
.assessment-directory-links {
  max-height: calc(100vh - 215px);
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
}
.assessment-directory-group + .assessment-directory-group { margin-top: 4px; }
.assessment-directory-group:nth-child(4n + 1) { --directory-tint: #edf6f3; }
.assessment-directory-group:nth-child(4n + 2) { --directory-tint: #eef4f9; }
.assessment-directory-group:nth-child(4n + 3) { --directory-tint: #faf6ea; }
.assessment-directory-group:nth-child(4n) { --directory-tint: #f5f1f7; }
.assessment-directory-link {
  width: 100%;
  min-height: 49px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--directory-tint, transparent);
  color: #526e68;
  text-align: left;
}
.assessment-directory-links .assessment-directory-link:hover { background: #e3efeb; border-color: transparent; }
.assessment-directory-links .assessment-directory-link.active {
  background: var(--directory-tint, #dfeee9);
  color: #174f44;
  box-shadow: inset 3px 0 #2f8878;
}
.assessment-directory-link strong { font-size: 14px; line-height: 1.5; font-weight: 650; }
.assessment-directory-link small {
  min-width: 20px;
  color: #2c7568;
  font-size: 11px;
  font-weight: 750;
  text-align: right;
}
.assessment-directory-number { color: #79908a; font-size: 11px; font-weight: 750; }
.assessment-directory-sublinks {
  display: grid;
  gap: 2px;
  margin: 3px 0 8px 17px;
  padding-left: 8px;
  border-left: 1px solid #d5e3df;
}
.assessment-directory-sublink {
  width: 100%;
  min-height: 35px;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 6px 8px 6px 3px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #617a74;
  text-align: left;
}
.assessment-directory-sublink:hover { background: rgba(255, 255, 255, .72); color: #285e54; }
.assessment-directory-sublink.active {
  background: rgba(255, 255, 255, .88);
  color: #174f44;
  box-shadow: inset 2px 0 #5a9c90;
}
.assessment-directory-sublink strong { font-size: 12.5px; line-height: 1.4; font-weight: 650; }
.assessment-directory-sublink small {
  min-width: 14px;
  color: #3d7d71;
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}
.assessment-directory-branch { color: #9aada8; font-size: 11px; }
.assessment-sections { min-width: 0; }
.assessment-section {
  margin: 0 0 20px;
  scroll-margin-top: 112px;
  border-color: var(--section-border, #c3d8d3);
}
.assessment-section:nth-child(4n + 1) { --section-tint: #edf6f3; --section-body: #fbfdfc; --section-border: #bfd8d0; --section-number: #d9ebe5; }
.assessment-section:nth-child(4n + 2) { --section-tint: #eef4f9; --section-body: #fbfcfe; --section-border: #c8d7e4; --section-number: #dce8f2; }
.assessment-section:nth-child(4n + 3) { --section-tint: #faf6ea; --section-body: #fffdf8; --section-border: #e3d7b9; --section-number: #f1e7cb; }
.assessment-section:nth-child(4n) { --section-tint: #f5f1f7; --section-body: #fdfbfe; --section-border: #d9cde0; --section-number: #e8deec; }
.assessment-section-header {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 19px;
  background: var(--section-tint, #f4f9f7);
  border-bottom: 1px solid var(--section-border, #dce8e5);
}
.assessment-section-heading-copy { display: flex; align-items: center; gap: 11px; min-width: 0; }
.assessment-section-heading-copy strong { color: #204d45; font-size: 16px; font-weight: 750; }
.assessment-section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--section-number, #deece8);
  color: #2a7568;
  font-size: 11px;
  font-weight: 800;
}
.assessment-section-header > small { color: #2d7568; font-size: 12px; font-weight: 700; white-space: nowrap; }
.route-group.selected > .assessment-section-header { background: var(--section-tint, #eaf4f1); box-shadow: inset 4px 0 #2e8475; }
.assessment-section .route-options { border-top: 0; background: var(--section-body, #fff); }
.assessment-section .route-subgroup-card { border-color: var(--section-border, #cededa); background: var(--section-body, #fff); }
.assessment-section .route-subgroup-header { grid-template-columns: 1fr auto; cursor: default; background: var(--section-tint, #eaf4f1); }
.assessment-section .route-subgroup-header:hover { border-color: transparent; }
.assessment-directory-subsection { scroll-margin-top: 112px; }

.page[data-page="2"] { padding-bottom: 92px; }
.floating-assessment-actions {
  position: fixed;
  z-index: 35;
  left: calc((100vw - min(1480px, calc(100vw - 64px))) / 2 + 238px);
  right: calc((100vw - min(1480px, calc(100vw - 64px))) / 2);
  bottom: max(16px, env(safe-area-inset-bottom));
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(174, 204, 197, .92);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 15px 38px rgba(20, 68, 59, .22);
  backdrop-filter: blur(12px);
}
.floating-assessment-actions .button { min-width: 168px; }

.regulatory-panel { margin-top: 30px; border-color: #bfd4cf; border-radius: 14px; }
.regulatory-panel > summary { min-height: 76px; padding: 17px 20px; background: #f4f9f7; }
.regulatory-panel > summary strong { color: #1d5148; font-size: 16px; font-weight: 750; }
.regulatory-panel > summary b { padding: 7px 12px; background: #347d70; }
.regulatory-panel-body { padding: 24px; }
.category-d-panel, .readonly-engineering-action, .regulatory-status-card { border-color: #cfdfdb; box-shadow: 0 3px 10px rgba(23,58,53,.035); }
.category-d-heading strong { color: #214e46; }
.category-d-fields { gap: 16px 18px; }

.five-table-results-head h2 { margin: 0; color: #17483f; font-size: 23px; font-weight: 750; }
.result-preview-heading { display: grid; gap: 5px; }
.result-preview-heading p { margin: 0; color: #6f837e; font-size: 12px; }
.common-result-header, .report-section { border-radius: 12px; overflow: hidden; }
.basic-summary th, .basic-summary td, .report-table th, .report-table td {
  border-color: #cadbd7;
  padding: 11px 12px;
  font-size: 13px;
  line-height: 1.62;
}
.basic-summary th, .report-table th { background: #e7f0ed; color: #234b44; font-weight: 700; }
.report-section { margin-top: 22px; border-color: #c7d9d4; box-shadow: 0 4px 15px rgba(23,58,53,.035); }
.report-section h3 { padding: 17px 19px; background: #f0f6f4; color: #1c4b42; font-size: 17px; font-weight: 750; }
.report-section-title { display: flex; align-items: center; gap: 11px; }
.report-table-name { min-width: 0; }
.report-preview-count {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e2efeb;
  color: #3c746a;
  font-size: 11px;
  font-weight: 700;
}
.report-table-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 30px;
  padding: 4px 9px;
  border-radius: 8px;
  background: #246f62;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}
.report-preview-frame { position: relative; overflow-x: auto; }
.report-preview-frame.truncated::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 22px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(239,246,244,.9));
}
.report-preview-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 18px;
  border-top: 1px solid #cfdfdb;
  background: #f1f7f5;
  color: #5e7771;
  font-size: 12px;
}
.report-preview-notice strong { color: #205f54; }
.five-table-copy-dock {
  right: 28px; bottom: 28px; width: 280px;
  padding: 16px;
  border-color: #a9c9c2;
  border-radius: 15px;
  box-shadow: 0 18px 45px rgba(18,65,56,.22);
}
.five-table-copy-options { gap: 6px; }
.five-table-copy-options button { min-height: 34px; border-radius: 8px; font-weight: 700; }
.five-table-copy-submit { min-height: 42px; border-radius: 9px; font-weight: 700; }
.download-disclaimer {
  margin: 11px 1px 0;
  color: #6d817c;
  font-size: 10px;
  line-height: 1.55;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 16px 4px 0;
  color: #6d827d;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}
.site-footer-links { display: flex; align-items: center; gap: 14px; }
.site-footer a,
.legal-dialog a { color: #216f62; text-decoration: none; }
.site-footer a:hover,
.legal-dialog a:hover { text-decoration: underline; }
.site-footer button {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #216f62;
  font-size: inherit;
  text-decoration: underline;
}

.legal-dialog {
  width: min(720px, calc(100% - 32px));
  max-height: min(82vh, 760px);
  padding: 0;
  overflow: hidden;
  border: 1px solid #aac8c1;
  border-radius: 18px;
  background: #fff;
  color: #173a35;
  box-shadow: 0 28px 80px rgba(16, 57, 50, .28);
}
.legal-dialog::backdrop { background: rgba(14, 42, 37, .48); backdrop-filter: blur(2px); }
.legal-dialog-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; }
.legal-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid #dce7e4;
  background: #f4f9f7;
}
.legal-dialog-header small { color: #6c837d; font-size: 11px; }
.legal-dialog-header h2 { margin: 5px 0 0; color: #174e44; font-size: 22px; }
.legal-dialog-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  color: #466760;
  font-size: 25px;
  line-height: 1;
}
.legal-dialog-content { overflow-y: auto; padding: 22px 26px; }
.legal-dialog-content p { margin: 0; color: #425f59; font-size: 14px; line-height: 1.85; }
.legal-dialog-content p + p { margin-top: 15px; }
.legal-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 26px;
  border-top: 1px solid #dce7e4;
  background: #fbfdfc;
  font-size: 12px;
}

#notice { right: 28px; top: 86px; border-radius: 10px; font-size: 13px; }

@media (max-width: 1100px) {
  .layout { width: min(100% - 36px, 1040px); grid-template-columns: 165px minmax(0,1fr); gap: 28px; }
  .step-body { padding: 28px; }
  .floating-assessment-actions {
    left: calc((100vw - min(1040px, calc(100vw - 36px))) / 2 + 193px);
    right: calc((100vw - min(1040px, calc(100vw - 36px))) / 2);
  }
}

@media (max-width: 1180px) {
  .assessment-browser { grid-template-columns: 1fr; }
  .assessment-directory {
    top: 92px;
    z-index: 12;
    max-height: none;
    padding: 9px;
  }
  .assessment-directory-header { display: none; }
  .assessment-directory-links {
    max-height: none;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 2px;
  }
  .assessment-directory-group { flex: 0 0 190px; }
  .assessment-directory-link { width: 100%; }
  .assessment-directory-sublinks { display: none; }
  .assessment-section { scroll-margin-top: 160px; }
  .assessment-directory-subsection { scroll-margin-top: 160px; }
}

@media (max-width: 900px) {
  .layout { width: min(100% - 28px, 820px); grid-template-columns: 1fr; padding-top: 24px; }
  main.main-content { width: 100%; }
  .step-rail ol { gap: 8px; }
  .step-rail button { justify-content: center; }
  .step-rail button > span:last-child { display: none; }
  .five-table-copy-dock { position: static; width: 100%; }
  .floating-assessment-actions {
    left: calc((100vw - min(820px, calc(100vw - 28px))) / 2);
    right: calc((100vw - min(820px, calc(100vw - 28px))) / 2);
  }
}

@media (max-width: 680px) {
  .topbar { padding: 12px 16px; }
  .utility-button { padding: 7px 8px; font-size: 12px; }
  .layout { width: calc(100% - 20px); }
  .step-body { padding: 20px 16px; border-radius: 14px; }
  .form-grid, .route-options { grid-template-columns: 1fr; }
  .route-subgroup-options { grid-template-columns: 1fr; }
  .assessment-panel { padding: 0; }
  .assessment-directory { top: 84px; border-radius: 10px; }
  .assessment-directory-group { flex-basis: 165px; }
  .assessment-section-header { padding: 14px; }
  .assessment-section .route-options { padding: 12px; }
  .page[data-page="2"] { padding-bottom: 106px; }
  .floating-assessment-actions {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px;
  }
  .floating-assessment-actions .button {
    min-width: 0;
    flex: 1 1 0;
    padding: 11px 8px;
    font-size: 13px;
  }
  .five-table-results-head { align-items: stretch; flex-direction: column; }
  .report-section-title { align-items: flex-start; flex-wrap: wrap; }
  .report-preview-count { margin-left: 0; }
  .report-preview-notice { align-items: flex-start; flex-direction: column; gap: 3px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 7px; }
  .site-footer-links { align-items: flex-start; flex-direction: column; gap: 4px; }
  .legal-dialog-header { padding: 20px 18px 15px; }
  .legal-dialog-content { padding: 18px; }
  .legal-dialog-footer { align-items: stretch; flex-direction: column; padding: 15px 18px; }
}