:root {
  --primary: #6355a4;
  --section-bg: #e7def2;
  --group-bg: #eee7f7;
  --pale: #f5f0fb;
  --branch-bg: #faf8fd;
  --progress-bg: #eee7f7;
  --line: #d3c8e5;
  --text: #231c30;
  --bg: #f8f7fb;
  --blue: var(--primary);
}

body.theme-renewal {
  --primary: #6355a4;
  --section-bg: #e7def2;
  --group-bg: #eee7f7;
  --pale: #f5f0fb;
  --branch-bg: #faf8fd;
  --progress-bg: #eee7f7;
  --line: #d3c8e5;
  --text: #231c30;
  --bg: #f8f7fb;
  --blue: var(--primary);
}

body.theme-structure {
  --primary: #2d8a68;
  --section-bg: #d0ebe0;
  --group-bg: #def2eb;
  --pale: #ebf7f1;
  --branch-bg: #f6fbf9;
  --progress-bg: #def2eb;
  --line: #b8dfd1;
  --text: #182b23;
  --bg: #f4f9f6;
  --blue: var(--primary);
}

body.theme-equipment {
  --primary: #b83a6b;
  --section-bg: #fadbe7;
  --group-bg: #fde7f0;
  --pale: #fdf2f7;
  --branch-bg: #fff9fb;
  --progress-bg: #fde7f0;
  --line: #f1c2d5;
  --text: #321823;
  --bg: #fcf7f9;
  --blue: var(--primary);
}

body.theme-pipeline {
  --primary: #2080a8;
  --section-bg: #ceeaf6;
  --group-bg: #def1fa;
  --pale: #ebf6fc;
  --branch-bg: #f6fbfd;
  --progress-bg: #def1fa;
  --line: #b9deee;
  --text: #162832;
  --bg: #f4f9fc;
  --blue: var(--primary);
}

.survey-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.survey-nav-link {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: #475569;
  background: #fff;
  border: 1px solid var(--line);
  transition: all 0.2s ease;
}
.survey-nav-link:hover {
  background: var(--pale);
  color: var(--primary);
}
.survey-nav-link.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);font-family:"Yu Gothic UI","Meiryo",sans-serif;color:var(--text);line-height:1.65}
main{max-width:950px;margin:28px auto;padding:0 16px 50px} h1{font-size:28px;margin:0 0 8px} .lead{color:#5c6872;margin:0 0 22px;padding-left:20px}
.lead li{margin-bottom:4px}
.lead li:last-child{margin-bottom:0}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;margin:0 0 22px;overflow:hidden;box-shadow:0 2px 8px #0000000b}
.section{background:var(--section-bg);padding:11px 16px;font-size:20px;font-weight:700} .group{background:var(--group-bg);padding:9px 16px;font-size:17px;font-weight:700;border-top:1px solid var(--line)}
.sub{background:var(--pale);padding:9px 16px;font-weight:700;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.q{padding:16px;border-bottom:1px dotted var(--line)} .qtitle{font-weight:700;margin:4px 0 9px} .req{font-size:12px;color:#b42318;margin-left:6px}
.choice{display:inline-flex;align-items:center;gap:6px;margin:3px 20px 3px 0} .check{display:block;padding:4px 0}
select,input[type=number],input[type=text],input[type=tel],input[type=email],textarea{max-width:650px;width:100%;padding:9px;border:1px solid #aebbc6;border-radius:6px;font:inherit;background:#fff}
input[type=number]{width:160px} textarea{min-height:78px;resize:vertical}
.branch{margin-top:12px;padding:12px 14px;background:var(--branch-bg);border-left:4px solid var(--primary);border-radius:4px}
.mini{margin:10px 0;padding:12px;background:#fbfcfd;border:1px solid #dbe3e9;border-radius:7px} .hidden{display:none!important}
.actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px;margin-top:20px} button{border:0;border-radius:7px;padding:10px 15px;font:inherit;cursor:pointer}
.secondary{background:#e4e8ec} .primary{background:var(--primary);color:#fff}
.msg{display:none;margin-top:20px;padding:16px 20px;border:2px solid #2e7d32;background:#edf7ed;color:#1e4620;border-radius:8px;font-size:16px;font-weight:700;line-height:1.6;box-shadow:0 4px 12px rgba(46,125,50,0.15);text-align:center}
@media(max-width:600px){h1{font-size:23px} .choice{display:flex}}

.qno{
  display:inline-block;
  font-weight:700;
  margin-right:.45em;
  white-space:nowrap;
}


.validation-error{
  outline:2px solid #c62828;
  outline-offset:4px;
  border-radius:6px;
}


.qtitle.unanswered{color:#c62828 !important;}
.qtitle.unanswered .qno{color:#c62828 !important;}

/* Confirm Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.modal-overlay.active{opacity:1;pointer-events:auto}
.modal-box{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px rgba(0,0,0,.15);max-width:540px;width:100%;overflow:hidden;transform:scale(.95);transition:transform .2s ease}
.modal-overlay.active .modal-box{transform:scale(1)}
.modal-header{background:var(--pale);padding:16px 20px;font-size:18px;font-weight:700;color:var(--text);border-bottom:1px solid var(--line)}
.modal-body{padding:20px;font-size:14px;color:#24313b}
.modal-summary{background:var(--branch-bg);border:1px solid #dbe3e9;border-radius:8px;padding:14px;margin:12px 0 16px}
.modal-summary-row{display:flex;margin-bottom:8px;line-height:1.5}
.modal-summary-row:last-child{margin-bottom:0}
.modal-summary-label{width:110px;font-weight:700;color:#5c6872;flex-shrink:0}
.modal-summary-val{flex:1;word-break:break-all;color:#0f172a;font-weight:600}
.modal-note{font-size:12px;color:#64748b;line-height:1.5}
.modal-footer{padding:14px 20px;background:#f8fafc;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:10px}
.btn-cancel{background:#e2e8f0;color:#334155;border:0;padding:9px 16px;border-radius:6px;font-weight:600;cursor:pointer}
.btn-cancel:hover{background:#cbd5e1}
.btn-confirm{background:var(--primary);color:#fff;border:0;padding:9px 18px;border-radius:6px;font-weight:700;cursor:pointer}
.btn-confirm:hover{filter:brightness(0.9)}
.btn-confirm:disabled{background:#94a3b8;cursor:not-allowed}
.btn-proceed{background:#0f172a;color:#fff;border:0;padding:9px 18px;border-radius:6px;font-weight:700;cursor:pointer;transition:background-color .15s ease}
.btn-proceed:hover{background:#1e293b}
button:disabled{background:#94a3b8!important;color:#fff!important;cursor:not-allowed!important;opacity:.65;box-shadow:none}
.modal-warning{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:12px 14px;margin-bottom:14px;color:#92400e;font-size:13px;line-height:1.5;display:flex;align-items:flex-start;gap:8px}
.modal-warning.hidden{display:none!important}
.modal-warning-icon{font-size:18px;flex-shrink:0;line-height:1}
.modal-warning-content{flex:1}
.modal-warning-title{font-weight:700;margin-bottom:3px;color:#b45309}

/* Validation Modal Error List */
.val-error-header{font-size:15px;font-weight:700;color:#1e293b;margin-bottom:12px;line-height:1.5}
.val-error-list-container{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;max-height:250px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.val-error-list{list-style:none;padding:0;margin:0;color:#334155;font-size:13px;line-height:1.6}
.val-error-item{margin-bottom:6px;word-break:break-word}
.val-error-item:last-child{margin-bottom:0}
.val-error-more{font-weight:600;color:#64748b;font-size:13px;margin-top:6px}

/* Step Wizard & Progress Bar */
.survey-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  padding: 10px 0 15px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.progress-text {
  font-weight: 700;
  color: var(--primary);
  font-size: 15px;
}
.progress-container {
  height: 8px;
  background-color: var(--progress-bg);
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background-color: var(--primary);
  width: 0%;
  transition: width 0.3s ease;
}
.card:not(.active-step) {
  display: none !important;
}
.step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 16px;
  background: var(--branch-bg);
  border-top: 1px solid var(--line);
  gap: 10px;
  flex-wrap: wrap;
}
.step-actions-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.step-actions .secondary {
  background: #e4e8ec;
  color: #334155;
}
.step-actions .primary {
  background: var(--primary);
  color: #fff;
}
.top-actions {
  display: flex;
  gap: 10px;
}
.step-actions button {
  white-space: nowrap;
}
@media(max-width:600px){
  .step-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 12px;
  }
  .step-actions-left,
  .step-actions-right {
    display: contents;
  }
  .step-actions button {
    white-space: nowrap;
    text-align: center;
    border-radius: 6px;
    box-sizing: border-box;
  }

  /* Step 1 (no previous button): Next button takes full width */
  .step-actions:not(.has-prev) .btn-next {
    grid-column: 1 / -1;
    order: 1;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 700;
  }

  /* Step 2+ (has previous button): Prev (left) and Next/Submit (right) on the top row */
  .step-actions.has-prev .btn-prev {
    grid-column: 1 / 2;
    order: 1;
    padding: 12px 10px;
    font-size: 15px;
    font-weight: 600;
  }
  .step-actions.has-prev .btn-next,
  .step-actions.has-prev .btn-submit {
    grid-column: 2 / 3;
    order: 2;
    padding: 12px 10px;
    font-size: 15px;
    font-weight: 700;
  }

  /* Fallback for submit button full-width if no has-prev */
  .step-actions:not(.has-prev) .btn-submit {
    grid-column: 1 / -1;
    order: 1;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 700;
  }

  /* Bottom row: Reset and PDF Export buttons (each takes 50%) */
  .step-actions .btn-reset {
    grid-column: 1 / 2;
    order: 3;
    font-size: 13px;
    padding: 10px 4px;
    color: #475569;
  }
  .step-actions .btn-pdf {
    grid-column: 2 / 3;
    order: 4;
    font-size: 13px;
    padding: 10px 4px;
    color: #475569;
  }

  /* Survey switcher on mobile: keep 1 line with horizontal scroll */
  .survey-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 4px;
  }
  .survey-nav-link {
    flex: 0 0 auto;
    width: auto;
    padding: 7px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Progress meta on mobile */
  .progress-meta {
    gap: 6px;
  }
  .progress-text {
    font-size: 13px;
    line-height: 1.3;
  }
  .top-actions {
    gap: 6px;
    flex-shrink: 0;
  }
  .top-actions button {
    padding: 6px 9px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    border-radius: 4px;
  }

  /* Modal on mobile */
  .modal-overlay {
    padding: 12px;
  }
  .modal-box {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 12px;
    margin: 0;
  }
  .modal-header {
    padding: 14px 18px;
    font-size: 16px;
    flex-shrink: 0;
  }
  .modal-body {
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    font-size: 13px;
  }
  .modal-summary {
    padding: 10px 12px;
    margin: 10px 0 14px;
    border-radius: 6px;
  }
  .modal-summary-row {
    margin-bottom: 6px;
  }
  .modal-summary-label {
    width: 92px;
    font-size: 12px;
  }
  .modal-summary-val {
    font-size: 12px;
  }
  .modal-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    flex-shrink: 0;
  }
  .modal-footer button {
    flex: 1;
    padding: 12px 6px;
    font-size: 14px;
    text-align: center;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
  }
}


/* No-JavaScript Global Alert & Fallbacks */
.noscript-banner {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-left: 6px solid #e11d48;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0 0 24px 0;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.08);
}
.noscript-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.noscript-icon {
  font-size: 22px;
  line-height: 1;
}
.noscript-title {
  font-size: 17px;
  font-weight: 700;
  color: #9f1239;
  margin: 0;
}
.noscript-desc {
  font-size: 14px;
  color: #4c0519;
  line-height: 1.6;
  margin: 0 0 10px 0;
}
.noscript-guide {
  font-size: 13px;
  color: #881337;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #ffe4e6;
  border-radius: 6px;
  padding: 8px 12px;
  line-height: 1.5;
}
.noscript-progress-text {
  display: inline-block !important;
  color: #e11d48 !important;
  font-weight: 700;
  font-size: 15px;
}

/* Tab Switch Save Confirm Modal */
.tab-save-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.btn-discard {
  background: #fff !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}
.btn-discard:hover {
  background: #fef2f2 !important;
}
@media (max-width: 600px) {
  .tab-save-footer {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .tab-save-footer button {
    width: 100% !important;
    padding: 11px 12px !important;
  }
}