* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font:
    15px/1.6 "Malgun Gothic",
    Arial,
    sans-serif;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  border: 1px solid #d9d9d9;
  padding: 9px 15px;
  background: white;
  color: #222222;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
main {
  max-width: 1600px;
  margin: auto;
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 28px;
  padding: 28px;
}
h1 {
  font-size: 27px;
  margin: 0;
}
h2 {
  font-size: 18.5px;
  margin: 0 0 18px;
}
.muted {
  font-size: 13px;
}
.card {
  background: #fff;
  border: 1px solid #e5e5e5;
  padding: 22px;
  margin-bottom: 16px;
}
.step {
  color: #111111;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-weight: bold;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wide {
  grid-column: 1/-1;
}
label {
  display: block;
  font-size: 13px;
}
input,
select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #dadada;
  background: #fff;
  color: #1a1a1a;
  margin-top: 4px;
}
input:focus,
select:focus {
  outline-offset: 1px;
}
input[type="file"] {
  font-size: 12px;
}
input[type="checkbox"] {
  width: auto;
}
summary {
  cursor: pointer;
  font-weight: 700;
}
.person {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid #e8e8e8;
}
.personhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.personhead button {
  padding: 3px 10px;
}
.notice {
  font-size: 13px;
  padding: 12px;
  margin-top: 14px;
}
.summary {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.previewtop {
  justify-content: space-between;
  margin-bottom: 14px;
}
.previewtop h2 {
  margin: 0;
}
.paperwrap {
  overflow: auto;
  padding: 4px 0 20px;
}
.paper {
  background: white;
  color: black;
  width: 210mm;
  min-height: 297mm;
  padding: 24mm 20mm 25mm;
  margin: 0 auto 24px;
  position: relative;
  font:
    11pt/1.5 "Malgun Gothic",
    Arial,
    sans-serif;
}
.paper h1 {
  font-size: 24pt;
  text-align: center;
  letter-spacing: 7pt;
  margin: 20mm 0 12mm;
}
.paper h2 {
  font-size: 16pt;
  margin: 8mm 0 4mm;
}
.paper table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  border: 1.6pt solid black;
}
.paper th,
.paper td {
  border: 0.6pt solid black;
  text-align: center;
  padding: 3mm 1mm;
  word-break: break-word;
  font-weight: 400;
}
.paper th {
  font-weight: bold;
}
.identity td {
  height: 15mm;
  font-size: 13pt;
}
.identity th {
  font-size: 13pt;
}
.settlement {
  font-size: 10pt;
}
.settlement th {
  padding: 1mm 0.5mm;
}
.settlement td {
  padding: 2mm 0.4mm;
}
.settlement td.km {
  white-space: nowrap;
  font-size: 8.5pt;
  letter-spacing: -0.2pt;
}
.settlement.compact td {
  padding: 0.8mm 0.4mm;
  font-size: 9pt;
}
.settlement.tight td {
  padding: 0.2mm 0.3mm;
  font-size: 8.5pt;
  line-height: 1.35;
}
.paper.multi {
  display: flex;
  flex-direction: column;
}
.paper.multi .bank {
  position: static;
  margin-top: auto;
  padding-top: 6mm;
}
.paper.multi h1 {
  margin: 4mm 0 5mm;
}
.paper.stmt {
  padding-top: 12mm;
}
.paper.stmt h1 {
  margin-top: 13mm; /* 종이 위 끝에서 제목까지 25mm(위 안쪽 여백 12mm + 13mm) */
}
.paper.multi h2 {
  margin: 4mm 0 2mm;
}
.paper.multi .identity td {
  height: 10mm;
}
.paper.multi .calc {
  font-size: 9.5pt;
  line-height: 1.45;
  margin-top: 3mm;
}
/* 하루짜리 명세서: 입금계좌 줄은 종이 아래쪽에 고정이라, 본문(기타사항 등)이 그 자리까지 내려오지 않게 아래 여백을 둡니다. */
.paper.stmt:not(.multi) {
  padding-bottom: 31mm;
}
/* 명세서 둘째 쪽(계속): 산출 내역이 길어 넘어간 부분 */
.paper.stmt.cont {
  padding-top: 25mm;
}
.paper .contname {
  margin: 0 0 6mm;
  text-align: right;
  font-size: 9pt;
  color: #444;
}
.paper.stmt.cont h2 {
  margin-top: 0;
}
/* 명세서: 계를 절사했을 때 정산서 바로 아래 안내 */
.paper .cutnote {
  margin: 1.2mm 0 0;
  text-align: right;
  font-size: 8.5pt;
}
.paper .calc {
  text-align: right;
  font-size: 10pt;
  margin-top: 3mm;
  line-height: 1.6;
}
.bank {
  position: absolute;
  bottom: 24mm;
  left: 20mm;
  right: 20mm;
  font-size: 12pt;
  font-weight: bold;
  overflow-wrap: anywhere;
}
.paper .evidence-title {
  text-align: center;
  font-size: 19pt;
  text-decoration: underline;
  letter-spacing: 1pt;
  margin: 8mm 0 12mm;
}
.tolledit table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tolledit th {
  text-align: left;
  color: #7a7a7a;
  font-weight: 400;
  padding: 2px;
}
.tolledit td {
  padding: 2px;
  border-top: 1px solid #f0f0f0;
}
.tolledit input,
.tolledit select {
  margin: 0;
  padding: 4px 6px;
  font-size: 13px;
}
.tolledit td button {
  padding: 2px 8px;
  margin: 0;
}
.tolledit > button {
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 13px;
}
.tollsums {
  font-size: 13px;
  margin-top: 6px;
  color: #222222;
}
.tollnote {
  font-size: 10pt;
  line-height: 1.6;
  margin-top: 2mm;
}
.evsec + .evsec {
  margin-top: 14mm;
}
.evhead2 {
  font-size: 12pt;
  font-weight: bold;
  margin-bottom: 3mm;
}
.evhead2 .evlabel {
  margin-right: 2mm;
}
.evtitle {
  border-radius: 2px;
  outline: 1px dashed #d0d0d0;
  outline-offset: 1mm;
  cursor: text;
}
.evtitle:hover {
  outline-color: #666666;
  background: #f7f7f7;
}
.evtitle::after {
  content: "✎ 제목 수정";
  display: inline-block;
  margin-left: 2.5mm;
  padding: 0 1.5mm;
  border-radius: 3px;
  background: #efefef;
  color: #333333;
  font:
    600 7.5pt "Malgun Gothic",
    Arial,
    sans-serif;
  letter-spacing: 0;
  vertical-align: middle;
  text-decoration: none;
  user-select: none;
  pointer-events: none;
}
.evtitle:focus::after {
  content: "Enter로 완료";
}
.evtitle:focus {
  outline: 1.5px solid #666666;
  background: #f7f7f7;
}
.evrow {
  display: flex;
  justify-content: space-between;
  gap: 6mm;
}
.evrow figure,
.evsec figure {
  margin: 0;
}
img.evfit {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  border: 0.6pt solid #333;
}
.evsec figcaption {
  text-align: center;
  font-size: 10pt;
  margin-top: 1.5mm;
}
.evlabel {
  font-weight: bold;
}
.evsource {
  text-align: right;
  font-size: 10pt;
  margin: 4mm 0 2mm;
}
.evimg {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 91mm;
  object-fit: contain;
  border: 0.6pt solid #333;
}
.evimg.single {
  height: 175mm;
}
.caption {
  text-align: center;
  margin: 2mm 0 8mm;
}
.receipt-frame {
  border: 4px double black;
  padding: 8mm;
  height: 218mm;
  display: flex;
  align-items: center;
  justify-content: center;
}
.receipt-frame img {
  object-fit: contain;
}
.tag {
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 12px;
}
.error {
  color: #a23221;
  font-size: 14px;
}
.emptybox {
  height: 90mm;
  border: 1px dashed #ccc;
  display: grid;
  place-items: center;
  color: #999;
}
.uploadrow {
  border-bottom: 1px solid #e9e9e9;
  padding: 10px 0;
}
.evhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #555555;
}
.evhead button {
  margin-top: 0;
  padding: 4px 12px;
}
.mealrow {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 3px 0;
  font-size: 14px;
}
.mealrow span {
  width: 64px;
  white-space: nowrap;
  color: #555555;
}
.mealrow label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #1a1a1a;
}
.mealrow input {
  margin: 0;
}
.acct {
  border: 1px solid #e4e4e4;
  padding: 8px 12px 12px;
  margin: 14px 0 0;
}
.acct legend {
  font-size: 13px;
  color: #111111;
  padding: 0 4px;
}
.grid3 {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 10px;
}
table.tickets td:first-child,
.tolledit td:first-child {
  white-space: nowrap;
}
table.tickets td:nth-child(2) {
  font-size: 12.5px;
  line-height: 1.35;
}
table.tickets input {
  width: 84px;
  margin: 0;
  padding: 4px 6px;
  font-size: 13px;
  text-align: right;
}
table.tickets td button {
  padding: 2px 8px;
  margin: 0;
}
.listtitle {
  font-size: 13px;
  font-weight: 700;
  color: #111111;
  margin: 2px 0 4px;
}
.tolledit input {
  text-align: right;
  width: 96px !important;
}
table.tickets {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
}
table.tickets td {
  padding: 3px 2px;
  border-top: 1px solid #f0f0f0;
}
table.tickets td.amt {
  text-align: right;
  padding-right: 8px;
}
table.tickets select {
  margin: 0;
  padding: 3px 6px;
  font-size: 13px;
  width: auto;
}
hr.sep {
  border: 0;
  border-top: 1px solid #e4e4e4;
  margin: 12px 0;
}
.subgroup {
  border: 1px solid #e6e6e6;
  padding: 10px 14px 12px;
  margin-top: 10px;
}
.subgroup h4 {
  font-size: 14px;
  margin: 0 0 6px;
  color: #111111;
}
@media (max-width: 760px) {
  .grid3 {
    grid-template-columns: 1fr;
  }
}
.paper table.calcplain {
  width: 60%;
  margin: 0 0 0 auto;
  border: 0;
  table-layout: auto;
  font-size: 9pt;
}
.paper table.calcplain td {
  border: 0;
  padding: 0.15mm 0.6mm;
  text-align: center;
  white-space: nowrap;
  line-height: 1.3;
  word-break: keep-all;
}
.paper table.calcplain td.wrap {
  white-space: normal;
}
.paper table.calcplain.transit {
  width: auto;
  max-width: 50%;
  min-width: 38%;
}
.paper table.calcplain.transit td {
  padding: 0.3mm 1mm;
}
.paper table.calcplain td.lbl {
  text-align: left;
  padding-left: 0;
}
.paper table.calcplain td.l {
  text-align: left;
}
.paper table.calcplain td.r {
  text-align: right;
}
.paper table.calcplain small {
  font-size: 8.5pt;
}
/* 식비 공제 계산식은 끊지 않고 통째로 다음 줄로 */
.paper .dcalc {
  white-space: nowrap;
}
/* 기타사항 줄: 제목(※)보다 들여 쓰고, 넘친 줄도 같은 들여쓰기로 */
.paper table.calcplain td.note {
  padding-left: 2.5mm;
}
.paper table.calcplain tr.gap td {
  height: 1.5mm;
  padding: 0;
}
.hint {
  font-size: 13px;
  margin: 6px 0 0;
  line-height: 1.5;
}
.fieldrow {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.fieldrow > label {
  flex: 1;
}
.side {
  flex: none;
  padding: 9px 12px;
  margin-bottom: 0;
  font-size: 13px;
  white-space: nowrap;
}
a.btnlink {
  display: inline-block;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #222222;
  text-decoration: none;
}
.evline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.evline button {
  padding: 5px 12px;
  font-size: 13px;
}
.attached {
  font-size: 13px;
  color: #555555;
  margin-top: 4px;
}
.attached button {
  padding: 2px 8px;
  font-size: 12px;
  margin-left: 4px;
}
#costFields .group,
#tripFields .group {
  border: 1px solid #e6e6e6;
  padding: 12px 14px 14px;
}
#costFields .grouphead,
#tripFields .grouphead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
#costFields .grouphead h3,
#tripFields .grouphead h3 {
  margin: 0;
}
#costFields .grouphead .side,
#tripFields .grouphead .side {
  padding: 5px 12px;
}
#costFields .group h3,
#tripFields .group h3 {
  font-size: 14px;
  margin: 0 0 6px;
  color: #111111;
}
#costFields .group .fieldrow + .attached + .fieldrow,
#costFields .group .attached + .fieldrow,
#costFields .group .fieldrow + .fieldrow,
#tripFields .group .fieldrow + .attached + .fieldrow,
#tripFields .group .attached + .fieldrow,
#tripFields .group .fieldrow + .fieldrow {
  margin-top: 10px;
}
.maplinks {
  margin-top: 6px;
  font-size: 13px;
}
.maplinks .muted {
  display: block;
  margin-bottom: 4px;
}
.maplinks button {
  padding: 3px 10px;
  margin-top: 0;
}
.uploadrow button {
  padding: 3px 8px;
  margin-top: 6px;
}
#status {
  min-height: 24px;
  color: #222222;
  font-size: 13px;
}
.hide {
  display: none;
}
@media (max-width: 1150px) {
  main {
    grid-template-columns: 360px minmax(0, 1fr);
    padding: 18px;
    gap: 18px;
  }
  .paperwrap {
    max-height: 900px;
  }
  .paper {
    zoom: 0.73;
  }
}
@media (max-width: 760px) {
  header {
    align-items: flex-start;
    flex-direction: column;
  }
  main {
    display: block;
    padding: 14px;
  }
  .paper {
    zoom: 0.66;
  }
  .paperwrap {
    max-height: none;
  }
}
.acctbox {
  display: contents;
}
.acctmail {
  align-self: center;
  font-size: 13px;
  color: #555555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}
#acctDlg {
  max-width: 820px;
}
#acctDlg form label {
  margin-top: 12px;
}
.mailrow {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mailrow input {
  flex: 1;
}
.mailrow span {
  margin-top: 4px;
  color: #555555;
  white-space: nowrap;
}
.acctlinks {
  margin-top: 14px;
}
.acctlinks a {
  color: #111111;
}
.triplistwrap {
  max-height: 55vh;
  overflow: auto;
  border: 1px solid #e6e6e6;
}
.triplist {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.triplist th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 7px 8px;
  color: #555555;
  font-size: 13px;
}
.triplist td {
  padding: 7px 8px;
  border-top: 1px solid #f0f0f0;
  vertical-align: middle;
}
.triplist .r {
  text-align: right;
  white-space: nowrap;
}
.triplist tr.cur td {
  background: #f4f4f4;
}
.triplist td.acts {
  white-space: nowrap;
  text-align: right;
}
.triplist td.acts button {
  padding: 3px 9px;
  font-size: 13px;
  margin-left: 3px;
}
.emptylist {
  padding: 28px;
  text-align: center;
  color: #7a7a7a;
  border: 1px dashed #dfdfdf;
}
@page {
  size: A4;
  margin: 0;
}
@media print {
  .evtitle {
    outline: 0 !important;
    background: none !important;
  }
  .evtitle::after {
    content: none !important;
  }
  header,
  .editor,
  .previewtop,
  .summary,
  #status,
  .printhelp {
    display: none !important;
  }
  main {
    padding: 0;
    margin: 0;
    max-width: none;
  }
  .paperwrap {
    padding: 0;
    overflow: visible;
    max-height: none;
  }
  .paper {
    zoom: 1;
    margin: 0;
    width: 210mm;
    height: 297mm;
    min-height: 0;
    break-after: page;
    page-break-after: always;
    overflow: hidden;
  }
  .paper:last-child {
    break-after: auto;
    page-break-after: auto;
  }
  .paper.long {
    height: auto;
    min-height: 297mm;
    overflow: visible;
  }
}

/* 증빙 인식·첨부 창 (예전 ocr.js에서 주입하던 스타일) */
dialog {
  border: 1px solid #dcdcdc;
  max-width: 760px;
  width: 94vw;
  max-height: 90vh;
  padding: 26px;
  color: #222222;
}
dialog pre {
  white-space: pre-wrap;
  max-height: 180px;
  overflow: auto;
  background: #f5f5f5;
  padding: 12px;
  font-size: 13px;
}
dialog .evidence-preview {
  width: 100%;
  max-height: 230px;
  object-fit: contain;
  border: 1px solid #ddd;
  margin: 12px 0;
}
dialog input[type="checkbox"] {
  margin-right: 6px;
}
dialog .candidates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
dialog .candidates button {
  padding: 4px 9px;
  font-size: 13px;
}
.progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
}
.progress.hide {
  display: none;
}
.progressbar {
  flex: 1;
  height: 10px;
  background: #ebebeb;
  border-radius: 6px;
  overflow: hidden;
}
#progressBar {
  height: 100%;
  width: 0;
  background: #111111;
  border-radius: 6px;
  transition: width 0.25s ease;
}
#progressPct {
  min-width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #111111;
  font-size: 14px;
}
dialog table.tolls {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 10px 0;
}
dialog .tolls th,
dialog .tolls td {
  border-bottom: 1px solid #e8e8e8;
  padding: 6px 4px;
  text-align: left;
  vertical-align: middle;
}
dialog .tolls input {
  width: 96px;
  margin: 0;
  padding: 5px;
}
dialog .tolls select {
  width: auto;
  margin: 0;
  padding: 5px;
}
dialog .tolls tr.dup {
  background: #fff4e5;
}
.dropzone {
  border: 2px dashed #c4c4c4;
  border-radius: 10px;
  padding: 34px 16px;
  text-align: center;
  color: #444444;
  margin: 14px 0;
  outline: none;
}
.dropzone.over,
.dropzone:focus {
  border-color: #111111;
  background: #f2f2f2;
}
@media print {
  dialog {
    display: none !important;
  }
}

/* ---------- 입력 단계(아코디언) ---------- */
.stepcard {
  padding: 0;
}
.stephead {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  text-align: left;
  color: inherit;
}
.stepno {
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.stepcard.done .stepno {
  color: #fff;
}
.steptitle {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.stepsum {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stepsum:empty {
  display: none;
}
.stepact {
  flex: none;
  font-size: 13px;
  color: #111111;
  border: 1px solid #d9d9d9;
  padding: 3px 10px;
  visibility: hidden;
}
.stepcard.done:not(.open) .stepact,
.stepcard.skip:not(.open) .stepact {
  visibility: visible;
}
.stepbody {
  display: none;
}
.stepcard.open .stepbody {
  display: block;
}
.stepnav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.stepmsg {
  flex: 1;
  font-size: 13px;
  color: #a23221;
  line-height: 1.5;
}
.finaltable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.finaltable td {
  border-top: 1px solid #f0f0f0;
}
.finaltable .r {
  text-align: right;
  white-space: nowrap;
}
/* 5단계: 출장자별 합계(계) 절사 단위 */
.roundsel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  color: var(--sub);
  font-size: 13px;
}
.roundsel select {
  width: auto;
  margin: 0;
}
.finalmsg {
  margin-top: 14px;
  padding: 10px 12px;
  font-size: 14px;
}
.finalmsg ul {
  margin: 4px 0 0;
  padding-left: 18px;
}
.finalmsg.ok {
  background: #f3f3f3;
  color: #111111;
}
.finalmsg.err {
  background: #fbeeec;
  color: #a23221;
}
.finalbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 6px;
}
.autostate {
  align-self: center;
  font-size: 12px;
  color: #7a7a7a;
  white-space: nowrap;
}
.autostate.err {
  color: #a23221;
}
.triplist .badge {
  display: inline-block;
  font-size: 12px;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 4px;
  background: #fdf0d8;
  color: #7a5a12;
  white-space: nowrap;
}
.triplist .badge.done {
  background: #efefef;
  color: #333333;
}

/* 미리보기는 항상 보이게: 넓은 화면에서는 오른쪽에 고정하고 그 안에서 스크롤 */
.mobileonly {
  display: none;
}
@media (min-width: 761px) {
  .preview {
    position: sticky;
    align-self: start;
    overflow: auto;
  }
  .preview .paperwrap {
    max-height: none;
  }
}
@media (max-width: 760px) {
  .mobileonly {
    display: block;
  }
  .mobilebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    font-size: 14px;
  }
  .mobilebar button {
    padding: 6px 12px;
  }
  .backtoinput {
    margin-bottom: 10px;
  }
  body {
    padding-bottom: 56px;
  }
}
@media print {
  .preview {
    position: static;
    max-height: none;
  }
  .mobileonly,
  .mobilebar {
    display: none !important;
  }
  body {
    padding-bottom: 0;
  }
}

/* 02 출장 정보: 기관 이름으로 찾은 장소 */
.placehint {
  margin: -4px 0 2px;
}
.placehint:empty {
  display: none;
}

/* 출장 장소 박스: 경유지 삭제 버튼 */
.viadel {
  text-align: right;
  margin-top: 6px;
}
.viadel button {
  padding: 3px 10px;
  font-size: 13px;
}
#tripFields .group .placehint {
  margin: 6px 0 0;
}

/* 로그인 사용자: 파일 불러오기/저장 버튼 숨김(서버 저장·내 명세서 사용) */
body.logged-in #load,
body.logged-in #save {
  display: none;
}

/* 장소 칸(눌러서 검색)과 장소 검색 창 */
input.placepick {
  cursor: pointer;
  background: #fbfbfb
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357665e' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  padding-right: 32px;
}
input.placepick:hover {
  border-color: #cfcfcf;
}
#placeDlg {
  max-width: 560px;
}
.placesearch {
  display: flex;
  gap: 8px;
  margin: 10px 0 12px;
}
.placesearch input {
  flex: 1;
  margin: 0;
}
.placeresults {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow: auto;
}
.placeitem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
}
.placeitem:hover {
  border-color: #111111;
  background: #f4f4f4;
}
.placeitem .placecat {
  font-size: 12px;
  color: #7a7a7a;
  font-weight: 400;
}
.placeitem .muted {
  font-size: 13px;
}
.placeitem.manual {
  border-style: dashed;
}

/* 출장 장소: [주소 검색] + 도로명 주소 줄 */
.addrline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: 13.5px;
}
.addrline button {
  padding: 5px 12px;
  font-size: 13px;
  margin: 0;
}
.addrtext {
  flex: 1;
  min-width: 160px;
  color: #1a1a1a;
}
.pbadge {
  font-size: 12px;
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}
.pbadge.ok {
  background: #efefef;
  color: #333333;
}
.pbadge.warn {
  background: #fdf0d8;
  color: #7a5a12;
}

/* 출장신청서 불러오기 */
.formbanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #e6e6e6;
}
.formbanner div {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.formbanner .muted {
  font-size: 13px;
}
.formbanner button {
  flex: none;
}
.tftext textarea {
  width: 100%;
  margin: 8px 0;
  font: inherit;
  font-size: 13px;
  padding: 8px;
  border: 1px solid #dadada;
}
.tfbusy {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 30px 6px;
}
.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #ececec;
  border-top-color: #111111;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.tfreview {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tfreview > tbody > tr > th {
  width: 90px;
  text-align: left;
  vertical-align: top;
  padding: 12px 8px 6px 0;
  color: #555555;
  font-weight: 600;
}
.tfreview > tbody > tr > td {
  padding: 6px 0;
  border-top: 1px solid #f0f0f0;
}
.tfreview input,
.tfreview select {
  margin: 0;
}
.tfrow {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tfpeople {
  width: 100%;
  border-collapse: collapse;
}
.tfpeople th {
  font-size: 12px;
  color: #7a7a7a;
  font-weight: 400;
  text-align: left;
  padding: 0 4px 2px 0;
}
.tfpeople td {
  padding: 2px 4px 2px 0;
}

/* 내 정보: 계좌 공유 허용 */
.sharebox {
  display: flex !important;
  gap: 8px;
  align-items: flex-start;
  margin-top: 14px;
  font-size: 13.5px;
  color: #1a1a1a;
}
.sharebox input {
  width: auto;
  margin-top: 2px;
}
/* 출장자 이름 → 회원 목록 제안 */
.membersuggest {
  position: absolute;
  z-index: 50;
  background: #fff;
  border: 1px solid #d9d9d9;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.membersuggest {
  max-height: 320px;
  overflow-y: auto;
}
.membersuggest[hidden] {
  display: none;
}
.membersuggest button {
  border: 0;
  text-align: left;
  padding: 7px 10px;
  font-size: 14px;
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
}
.membersuggest button span {
  color: #555555;
  font-size: 13px;
}
.membersuggest button small {
  color: #999999;
  font-size: 12px;
}
.membersuggest button small.shareacct {
  color: #111111;
}

/* 펼친 단계 제목 오른쪽: ‘접기’ */
.stepcard.open .stepact {
  visibility: visible;
  font-size: 0;
}
.stepcard.open .stepact::after {
  content: "접기";
  font-size: 13px;
}

/* 가상 예시는 로그인 전에만, 새로 작성은 총액 상자 오른쪽 */
body.logged-in #sample {
  display: none;
}
.summaryside {
  display: flex;
}
#reset {
  background: transparent;
  color: #fff;
}
#reset:hover {
  background: #ffffff1f;
}

/* 오른쪽 위: 기관 AI 상태 점 */
.aidot {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #7a7a7a;
  padding: 0 4px;
  cursor: help;
}
.aidot i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cccccc;
}
.aidot.on i {
  background: #22a35a;
  box-shadow: 0 0 0 3px #22a35a2a;
}
.aidot.off i {
  background: #d93a2b;
  box-shadow: 0 0 0 3px #d93a2b2a;
}
.acctmail {
  max-width: 180px;
}

/* 명세서 불러오기 진행률 */
.loadoverlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #18372e66;
  display: grid;
  place-items: center;
}
.loadoverlay[hidden] {
  display: none;
}
.loadbox {
  background: #fff;
  padding: 22px 24px;
  width: min(420px, 90vw);
  box-shadow: 0 10px 40px #0003;
}
.loadbox p {
  font-size: 14px;
  color: #555555;
  margin: 8px 0 0;
}
.loadbox.err p {
  color: #a23221;
}
.loadbar {
  height: 8px;
  background: #efefef;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 12px;
}
.loadbar i {
  display: block;
  height: 100%;
  background: #111111;
  transition: width 0.25s;
}
.loadbox.err .loadbar i {
  background: #d93a2b;
}

/* 알림 팝업(화면 위쪽 가운데) – #status 내용을 보여 주므로 원래 자리는 숨깁니다 */
#status {
  display: none;
}
.toast {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 120;
  transform: translate(-50%, -12px);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(560px, 92vw);
  padding: 10px 10px 10px 16px;
  background: #111111c7; /* 반투명: 뒤의 메뉴가 비쳐 보임 */
  backdrop-filter: blur(3px);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 8px 28px #0002;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* 알림 위를 눌러도 아래의 버튼·입력란이 그대로 눌립니다(닫기 × 만 누를 수 있음) */
.toast.show button {
  pointer-events: auto;
  cursor: pointer;
}
.toast.err {
  background: #a23221d0;
}
.toast button {
  flex: none;
  border: 0;
  background: none;
  color: #fff;
  font-size: 17.5px;
  line-height: 1;
  padding: 2px 6px;
  opacity: 0.8;
}
@media print {
  .toast {
    display: none !important;
  }
}

/* 거리 증빙: 경로 목록만 자르기 선택 */
.cropopt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #f6f6f6;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  padding: 10px;
  margin: 8px 0;
}
.cropopt img {
  flex: none;
  max-height: 120px;
  max-width: 160px;
  border: 1px solid #dddddd;
  background: #fff;
}
.cropopt label {
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: #1a1a1a;
}
.cropopt input {
  width: auto;
  margin: 0 6px 0 0;
}
.cropopt .muted {
  font-size: 13px;
}
.cropopt label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 6px;
  align-items: center;
}
.cropopt label .muted {
  grid-column: 2;
}

/* 오른쪽 위 이름(아이디): 글자 링크(마우스를 올리면 밑줄), 누르면 내 정보 */
.acctname {
  align-self: center;
  font-size: 14px;
  color: #1a1a1a;
  text-decoration: none;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}
.acctname:hover,
.acctname:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #111111;
}

/* 팝업 닫기: 오른쪽 위 동그라미 안의 X */
.dlgx {
  /* 팝업 안을 스크롤해도 오른쪽 위에 붙어 있게(팝업 가운데 정렬은 브라우저 기본 고정 위치를 그대로 씀) */
  position: sticky;
  float: right;
  top: 0;
  margin: -10px -10px 0 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid #c8c8c8;
  background: #fff;
  color: #555555;
  cursor: pointer;
}
.dlgx::before,
.dlgx::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.8px;
  background: currentColor;
  border-radius: 1px;
}
.dlgx::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.dlgx::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.dlgx:hover {
  border-color: #111111;
  color: #111111;
  background: #f2f2f2;
}
/* 제목이 X와 겹치지 않게 */
dialog > h2,
.loadbox > b {
  padding-right: 40px;
}
.loadbox {
  position: relative;
}

/* 머리 줄을 본문과 같은 선에 맞춤: 제목은 입력 칸 왼쪽, 메뉴는 미리보기 오른쪽(본문 최대 폭 1600px·좌우 여백과 같은 계산) */
:root {
  --gut: 28px;
}
header {
  padding-left: calc(max(0px, (100% - 1600px) / 2) + var(--gut));
  padding-right: calc(max(0px, (100% - 1600px) / 2) + var(--gut));
}
@media (max-width: 1150px) {
  :root {
    --gut: 18px;
  }
}
@media (max-width: 760px) {
  :root {
    --gut: 14px;
  }
}

/* 입력 칸 강조: 빨간 = 꼭 입력, 노란 = 확인 필요(마우스를 올리면 이유) */
#form input.need,
#form select.need {
  border-color: #d93a2b;
  box-shadow: 0 0 0 2px #d93a2b26;
  background: #fff8f7;
}
#form input.check,
#form select.check {
  border-color: #e0a21b;
  box-shadow: 0 0 0 2px #e0a21b2e;
  background: #fffcf2;
}

/* 거리 증빙 자르기 상자 */
.cropui {
  display: grid;
  gap: 14px;
  margin: 10px 0;
  padding: 12px;
  background: #f6f6f6;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
}
.cropstage {
  position: relative;
  align-self: start;
  user-select: none;
  touch-action: none;
  cursor: crosshair;
  line-height: 0;
}
.cropstage img {
  width: 100%;
  border: 1px solid #dddddd;
}
.cropbox {
  position: absolute;
  border: 2px solid #111111;
  cursor: move;
}
.cropbox.hide {
  display: none;
}
.cropbox i {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #111111;
  border-radius: 2px;
}
.cropbox i[data-h="nw"] {
  left: -7px;
  top: -7px;
  cursor: nwse-resize;
}
.cropbox i[data-h="n"] {
  left: calc(50% - 6px);
  top: -7px;
  cursor: ns-resize;
}
.cropbox i[data-h="ne"] {
  right: -7px;
  top: -7px;
  cursor: nesw-resize;
}
.cropbox i[data-h="e"] {
  right: -7px;
  top: calc(50% - 6px);
  cursor: ew-resize;
}
.cropbox i[data-h="se"] {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}
.cropbox i[data-h="s"] {
  left: calc(50% - 6px);
  bottom: -7px;
  cursor: ns-resize;
}
.cropbox i[data-h="sw"] {
  left: -7px;
  bottom: -7px;
  cursor: nesw-resize;
}
.cropbox i[data-h="w"] {
  left: -7px;
  top: calc(50% - 6px);
  cursor: ew-resize;
}
.cropside {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
}
.cropside img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  align-self: flex-start;
  border: 1px solid #dddddd;
  background: #fff;
}
.cropside .muted {
  font-size: 12.5px;
  margin: 0 0 6px;
}
.cropleft {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
  min-width: 0;
}
.cropbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cropbtns button {
  padding: 5px 10px;
  font-size: 13px;
}
/* 상자 바깥 어둡게 하는 그림자를 원본 그림 안으로만(손잡이는 조금 넘쳐도 보이게) */
.cropstage {
  overflow: clip;
  overflow-clip-margin: 8px;
}

/* 자르기 예시(네이버·카카오): 전체 화면 중 자를 부분을 빨간 점선 상자로 */
.cropguide {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cropguide figure {
  margin: 0;
}
.cropguide figcaption {
  font-size: 12.5px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 3px;
}
.gscreen {
  position: relative;
  display: flex;
  height: 150px;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.gpanel {
  width: 38%;
  flex: none;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  overflow: hidden;
}
.gpanel img {
  width: 100%;
  max-height: none;
  border: 0;
  display: block;
}
.gmore {
  display: block;
  height: 7px;
  margin: 6px 6px 0;
  border-radius: 2px;
  background: #eaeaea;
}
.gmap {
  flex: 1;
  background:
    linear-gradient(115deg, transparent 45%, #9ec98f 46%, #9ec98f 48%, transparent 49%),
    linear-gradient(20deg, transparent 60%, #f4d58a 61%, #f4d58a 63%, transparent 64%),
    #ececec;
}
.gcut {
  border: 2.5px dashed #d93a2b;
  border-radius: 3px;
  margin: 1px;
}
.gmap em {
  display: block;
  margin: 8px 0 0 4px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: #d93a2b;
}
.gpanel.kakao {
  font-size: 8px;
  line-height: 1.3;
  color: #222;
}
.khead {
  background: #206def;
  color: #fff;
  font-weight: 700;
  font-size: 9.5px;
  padding: 7px 6px 16px;
}
.kin {
  margin: 4px 6px 0;
  border: 1px solid #ccd;
  border-radius: 2px;
  padding: 2px 4px;
  color: #444;
}
.kicons {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 5px 6px;
}
.kicons span {
  width: 18px;
  height: 9px;
  border-radius: 5px;
  background: #206def;
}
.kicons i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #555;
}
.ksum {
  border-top: 1px solid #e3e3e3;
  padding: 5px 6px;
}
.ksum b {
  font-size: 9.5px;
}
.ksum {
  white-space: nowrap;
}
.ksum small {
  display: block;
  color: #666;
  font-size: 7.5px;
}

/* 맨 위 메뉴는 항상 보이게(스크롤해도 고정) */
header {
  position: sticky;
  top: 0;
  z-index: 60;
}
@media (min-width: 761px) {
  .preview {
    top: 98px; /* 고정된 머리 줄 아래 */
    max-height: calc(100vh - 110px);
  }
}

/* 팝업이 떠 있는 동안 뒤쪽 화면 스크롤 막기(스크롤 막대 자리는 유지해 화면이 흔들리지 않게) */
html {
  scrollbar-gutter: stable;
}
html.noscroll,
html.noscroll body {
  overflow: hidden;
}
html.noscroll .preview {
  overflow: hidden;
}
/* 영역 지정 화면 배치: 위 = 원본 | 증빙으로 쓸 부분·버튼, 아래 = 점선 상자 안의 예시(네이버·카카오 나란히) */
.cropui {
  grid-template-columns: minmax(0, 1fr) 260px;
}
.cropguide {
  grid-column: 1 / -1;
  margin-top: 4px;
  border-top: 2px dashed #cfcfcf;
}
.gpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cropguide .gscreen {
  height: 170px;
}
@media (max-width: 760px) {
  .cropui,
  .gpair {
    grid-template-columns: 1fr;
  }
}

/* 입금계좌가 비면 은행·계좌번호·예금주를 묶은 칸 전체를 노란 테두리로 */
#form fieldset.checkgroup {
  border-color: #e0a21b;
  box-shadow: 0 0 0 2px #e0a21b2e;
  background: #fffcf2;
}
#form fieldset.checkgroup legend {
  color: #a0700d;
}

/* 거리 증빙 검토(영역 지정 뒤): 왼쪽 잘린 이미지, 오른쪽 인식 결과·입력란 */
.distreview {
  display: grid;
  grid-template-columns: minmax(220px, 40%) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 6px;
}
.distimg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}
.distimg img {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  object-position: top left;
  border: 1px solid #dddddd;
  background: #fff;
}
.distimg button {
  align-self: flex-start;
  padding: 5px 10px;
  font-size: 13px;
}
.distinfo > .notice:first-child {
  margin-top: 0;
}
@media (max-width: 760px) {
  .distreview {
    grid-template-columns: 1fr;
  }
}

/* 거리 증빙 영역 지정 중에는 아래 버튼 줄 숨김 */
#review.cropping > .actions {
  display: none;
}

/* 맨 위 안내 문구 */
.intro {
  margin-bottom: 20px;
  flex-direction: column;
  align-items: flex-start;
}
.introtext {
  margin: 0;
  color: #1a1a1a;
}
.summary {
  box-sizing: border-box;
}
@media (max-width: 760px) {
  .intro {
    gap: 10px;
  }
}
/* 미리보기를 스크롤해도 ‘총 지급 예정액’ 상자는 미리보기 맨 위에 붙어 있게 */
@media (min-width: 761px) {
  .preview .summary {
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: 0 6px 14px -8px #0005;
  }
}

/* 총 지급 예정액: 한 줄짜리 낮은 막대(미리보기를 덜 가리게) – 왼쪽 금액, 오른쪽 인원·일수와 [새로 작성] */
:root {
  --toph: 60px;
}
.summary {
  min-height: var(--toph);
  align-items: center;
}
.summarymain {
  display: flex;
}
.summary strong {
  line-height: 1.2;
}
.summaryside {
  flex-direction: row;
  align-items: center;
  font-size: 14px;
}
#reset {
  padding: 5px 12px;
  font-size: 13.5px;
}
/* 안내 문구도 같은 높이(60px)로 – 출장신청서 상자가 ‘출력 미리보기’ 제목과 나란히 */
.intro {
  justify-content: center;
}
.introtext {
  font-size: 16px;
  line-height: 1.5;
}
/* 출장신청서 상자 오른쪽: [출장신청서 불러오기] 아래 작은 [가상 예시 채우기](로그인 전에만) */
.bannerbtns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex: none;
}
.bannerbtns #sample {
  font-size: 13px;
  background: transparent;
}

/* 미리보기 배율(화면에서만): js/zoom.js가 --pz를 정합니다 */
@media screen {
  .paper {
    zoom: var(--pz, 1);
  }
}
/* 총액 막대 오른쪽: 인원·일수 · 배율 · [새로 작성] · [PDF 저장/인쇄] */
.zoomctl {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ffffff66;
  overflow: hidden;
}
.zoomctl button {
  border: 0;
  border-radius: 0;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.2;
}
.summary #print,
.summary #saveHwpx {
  font-size: 13.5px;
}
@media (max-width: 1150px) {
  .summaryside {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }
}
/* 배율 글자(누르는 버튼 아님)와 가로·세로 맞춤 버튼 */
.zoomctl #zoomLabel {
  display: inline-block;
  min-width: 70px;
  text-align: center;
  font-size: 13px;
  padding: 5px 4px;
  border-left: 1px solid #ffffff40;
  border-right: 1px solid #ffffff40;
}
.zoomctl button[data-zoom='w'] {
  border-left: 1px solid #ffffff40;
}
.zoomctl button.on {
  font-weight: 700;
}
/* 출장신청서 상자를 맨 위(총액 막대와 같은 높이)에, 안내 문구는 그 아래 */
.intro {
  height: auto;
}

/* 출장신청서 상자: 총 지급 예정액 막대와 같은 높이(60px) 한 줄로 나란히 */
.formbanner {
  height: var(--toph);
  box-sizing: border-box;
  padding: 8px 10px 8px 16px;
}
.formbanner > div:first-child {
  min-width: 0;
}
.formbanner > div:first-child .muted {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.formbanner .bannerbtns {
  flex-direction: row;
  align-items: center;
}
.bannerbtns #tripFormBtn {
  padding: 8px 12px;
  font-size: 14px;
}
.bannerbtns #sample {
  padding: 7px 9px;
}

/* 안내 문구: 투명 상자(카드와 같은 안쪽 여백)로 감싸고, 위아래 간격을 카드 사이 간격(16px)과 같게 */
.formbanner {
  margin-bottom: 16px;
}
.intro {
  margin: 0 0 16px;
  padding: 12px 22px;
  border: 1px solid #e5e5e5;
  background: transparent;
}

/* 색: 흑백·회색 톤, 기본 버튼은 검은색, 강조는 파란색 */
:root {
  --accent: #2563eb;
}
input:focus,
select:focus {
  outline-color: #2563eb80;
}
.introtext b {
  color: var(--accent);
}
.acctname:hover,
.acctname:focus-visible {
  color: var(--accent);
}
/* 펼쳐진 단계의 [접기] 표시는 숨김(머리글을 누르면 그대로 접힘) */
.stepcard.open .stepact {
  display: none;
}

/* ---------- 마감 다듬기: 글꼴·간격·버튼·카드(배치·색 방향은 그대로) ----------
   화면 글꼴은 Pretendard(서버에 둔 파일, 선언은 vendor/fonts/pretendard.css), 출력 용지(.paper)는 맑은 고딕 그대로 둡니다.
   되돌리려면 backup/ui-v2/의 app.css·index.html을 쓰세요. */
:root {
  --ink: #111111;
  --text: #18181b;
  --sub: #52525b;
  --faint: #71717a;
  --line: #e4e4e7;
  --line2: #d4d4d8;
  --soft: #fafafa;
  --bg: #f4f4f5;
  --ring: #2563eb2e;
  --ui: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}
body {
  color: var(--text);
  font-family: var(--ui);
  letter-spacing: -0.006em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.paper {
  letter-spacing: 0;
  word-break: normal;
  box-shadow:
    0 1px 2px #0000000d,
    0 18px 40px -18px #00000033;
}

/* 머리 줄 */
.brand {
  font-weight: 720;
  letter-spacing: -0.01em;
}
.brand small {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: #a1a1aa;
  margin-bottom: 1px;
}

/* 버튼 */
button,
a.btnlink {
  border-color: var(--line2);
  border-radius: 8px;
  font-weight: 550;
  transition:
    background-color 0.12s,
    border-color 0.12s,
    color 0.12s;
}
button:hover,
a.btnlink:hover {
  background: #f4f4f5;
  border-color: #a1a1aa;
}
button:active {
  transform: translateY(0.5px);
}
button.primary {
  color: #fff;
  font-weight: 650;
}
button.primary:hover {
  border-color: #2a2a2a;
}
button:focus-visible,
a:focus-visible,
.stephead:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.stephead:focus-visible {
  outline-offset: -2px;
}

/* 입력란 */
label {
  color: var(--sub);
  font-weight: 500;
}
input,
select,
.tftext textarea {
  border-color: var(--line2);
  border-radius: 8px;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
input:hover,
select:hover {
  border-color: #a1a1aa;
}
input:focus,
select:focus,
.tftext textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
input::placeholder {
  color: #a1a1aa;
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ink);
}

/* 카드 */
.card {
  border-color: var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px #1018280a;
}
.stepcard.open {
  border-color: #2563eb59;
}
.stephead {
  transition: background-color 0.12s;
}
.stephead:hover {
  background: var(--soft);
}
.stepno {
  font-variant-numeric: tabular-nums;
  background: #f0f0f1;
  color: var(--sub);
  box-shadow: inset 0 0 0 1px var(--line);
}
.stepcard.done .stepno {
  background: var(--ink);
  box-shadow: none;
}
.stepcard.done .stepno::before {
  font-size: 12px;
}
.steptitle b {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.stepsum {
  color: var(--faint);
  margin-top: 1px;
}
.stepact {
  border-color: var(--line2);
  border-radius: 7px;
  font-weight: 550;
}
.stephead:hover .stepact {
  border-color: #a1a1aa;
}
.stepbody h2 {
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.stepnav {
  margin-top: 22px;
  padding-top: 16px;
}

/* 카드 안 묶음 상자 */
#costFields .group,
#tripFields .group,
.subgroup {
  border-radius: 11px;
}
#costFields .group h3,
#tripFields .group h3,
.subgroup h4 {
  font-weight: 650;
  letter-spacing: -0.01em;
}
.acct {
  border-radius: 11px;
}
.acct legend {
  font-weight: 650;
}
.person {
  border-top-color: #efeff0;
}
.notice {
  background: #f4f4f5;
  border-radius: 8px;
  color: #3f3f46;
}
#add {
  color: var(--sub);
}
#add:hover {
  color: var(--ink);
}

/* 출장신청서 상자·안내 문구 */
.formbanner {
  background: #fff;
  border-color: var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px #1018280a;
}
.formbanner b {
  font-weight: 650;
  letter-spacing: -0.01em;
}
.intro {
  border-color: var(--line);
  border-radius: 14px;
}
.introtext {
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* 총 지급 예정액 막대 */
.summary strong,
#mobileGrand {
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.summary #summaryMeta {
  font-variant-numeric: tabular-nums;
}
.zoomctl {
  border-radius: 8px;
}
.zoomctl #zoomLabel {
  font-variant-numeric: tabular-nums;
}
#reset {
  border-color: #ffffff4d;
  border-radius: 8px;
}
#reset:hover {
  border-color: #ffffffa6;
}
.summary #print,
.summary #saveHwpx {
  border-radius: 8px;
}

/* 미리보기 제목 줄 */
.previewtop h2 {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tag {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--sub);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.printhelp {
  color: #a1a1aa;
}

/* 확인 및 출력: 출장자별 증빙·계산 요약 */
.psum {
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 12px;
}
.psumhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}
.psumtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.psumtable th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--faint);
}
.psumtable td {
  border-top: 1px solid #efeff0;
  vertical-align: middle;
}
.psumtable td:first-child {
  width: 1%;
  white-space: nowrap;
}
.psumtable .r {
  text-align: right;
  white-space: nowrap;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.stag {
  display: inline-block;
  border: 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  font-weight: 600;
}
.stag:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
span.stag {
  cursor: default;
}
/* 출장자별 확인사항(계 바로 위): 고쳐야 할 항목 빨강, 확인해 보세요 주황 */
.psumtable tr.pnote td {
  border-top: 1px solid var(--line2);
  vertical-align: top;
}
.psumtable tr.pnote ul {
  margin: 0;
  padding-left: 16px;
  color: #7a5a12;
}
/* 확인 항목 단계별 묶음(출장자 카드 안 · 아래 목록) */
.stepgroup + .stepgroup {
  margin-top: 6px;
}
.nstep {
  display: block;
  font-size: 11.5px;
  font-weight: 650;
  opacity: 0.75;
}
.finalmsg .stepgroup {
  margin-top: 6px;
}
.psumtable tr.pnote li.err,
.psumtable tr.pnote li.err a {
  color: #a23221;
}
.psumtable tr.ev.first td {
  border-top: 1px solid var(--line2);
}
.nodoc {
  font-size: 11.5px;
  color: #a16207;
  border-radius: 4px;
  white-space: nowrap;
}
.psumtable tfoot td {
  border-top: 1.5px solid var(--line2);
  font-weight: 700;
}
.psumtable tfoot td.muted {
  font-weight: 400;
  font-size: 12.5px;
}
@media (max-width: 520px) {
  .psumtable th,
  .psumtable td {
    padding-inline: 8px;
  }
}

/* 확인 및 출력 표 */
.finaltable td {
  border-top-color: #efeff0;
  padding: 8px 4px;
}
.finaltable .r {
  font-variant-numeric: tabular-nums;
}
.finaltable tr.sum td {
  border-top: 1.5px solid var(--ink);
  font-weight: 750;
}
.finalmsg {
  border-radius: 10px;
}

/* 팝업 */
dialog {
  border-radius: 18px;
  box-shadow: 0 24px 60px -20px #0000004d;
}
dialog::backdrop,
.loadoverlay {
  background: #18181b73;
  backdrop-filter: blur(2px);
}
dialog > h2 {
  font-size: 19.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.loadbox {
  border-radius: 16px;
}
.dlgx {
  border-color: var(--line2);
}
.membersuggest {
  border-color: var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px -10px #00000033;
}
.membersuggest button {
  border-radius: 6px;
}
.placeitem {
  border-radius: 10px;
}
.triplistwrap,
.emptylist {
  border-color: var(--line);
  border-radius: 10px;
}
.triplist th {
  background: var(--soft);
  font-weight: 600;
}
.triplist .r {
  font-variant-numeric: tabular-nums;
}
.cropbox {
  box-shadow: 0 0 0 9999px #18181b73;
}
input.placepick {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  background-color: var(--soft);
}
.toast {
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation-duration: 0.01ms !important;
  }
  button:active {
    transform: none;
  }
}

/* ---------- 팝업 공통 틀 ----------
   제목 · 짧은 설명 한 줄(.dlgdesc) · 본문 · 아래 버튼 줄(.dlgbtns: 오른쪽 끝이 주 버튼, 그 왼쪽이 취소·보조, .left는 왼쪽 끝) */
dialog > h2 {
  margin: 0 0 6px;
}
dialog .dlgdesc {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
}
.dlgbtns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #efeff0;
}
.dlgbtns .left {
  margin-right: auto;
}
.loadbox .dlgbtns {
  border-top: 0;
  padding-top: 0;
  margin-top: 14px;
}
.dlgtools {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
}
button.danger {
  color: #b42318;
  border-color: #f0c5bf;
}
button.danger:hover {
  background: #fef3f2;
  border-color: #b42318;
}
/* 확인 창 */
#askDlg {
  max-width: 440px;
}
#askDlg .askbody {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #3f3f46;
}
#askDlg .dlgbtns {
  margin-top: 22px;
}

/* 증빙 검토 창: 단계별 제목, 영역 지정 중에는 설명·아래 버튼 줄을 영역 지정용으로 */
#review .t-crop,
#review.cropping .t-read {
  display: none;
}
#review.cropping .t-crop {
  display: inline;
}
#review.cropping > .dlgdesc,
#review.cropping > #reviewBtns {
  display: none;
}
/* 긴 내용을 스크롤해도 아래 버튼 줄은 창 아래에 붙어 있게 */
#review #reviewBtns,
#review .cropfoot {
  position: sticky;
  bottom: -26px;
  z-index: 4;
  margin: 20px -26px -26px;
  padding: 14px 26px 26px;
  background: #fff;
}
#readProgress:empty {
  display: none;
}
#readProgress {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 10px;
}
.cropguide {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.cropguide > summary {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sub);
}
.cropguide[open] > summary {
  border-bottom: 1px solid #efeff0;
}
.cropguide > .gpair,
.cropguide > .muted {
  margin: 12px 14px;
}

/* 출장신청서·증빙 첨부 창 */
.tftext {
  margin-top: 4px;
}
.tftext > summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--sub);
}
.tftext .muted {
  margin: 6px 0 0;
}
#tripFormDlg .error:empty {
  display: none;
}

/* 증빙 첨부 버튼: 클립 아이콘으로 일반 버튼과 구분 */
button.attach {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
button.attach::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 바깥 사이트로 가는 것(하이패스·네이버 길찾기)은 버튼이 아니라 파란 글자 링크로 */
.grouphead a.btnlink[target="_blank"],
.grouphead [data-naver-route] {
  border: 0;
  background: none;
  color: var(--accent);
  padding: 4px 2px;
  font-weight: 550;
}
.grouphead a.btnlink[target="_blank"]::after,
.grouphead [data-naver-route]::after {
  content: " ↗";
}
.grouphead a.btnlink[target="_blank"]:hover,
.grouphead [data-naver-route]:hover {
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 5단계 저장 안내, 아래쪽 개인정보 안내(접기) */
.savenote {
  margin: 4px 0 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sub);
}
.privacy {
  margin: 4px 0 24px;
  font-size: 13.5px;
  color: var(--faint);
}
.privacy > summary {
  font-weight: 600;
  color: var(--sub);
  padding: 4px 0;
}
.privacy ul {
  margin: 6px 0 0;
  padding-left: 18px;
  line-height: 1.6;
}

/* 위쪽 안내 문구는 첫 단계를 끝내기 전까지만 */
body.started .intro {
  display: none;
}

/* 머리 줄 [새로 작성]: 다른 머리 줄 버튼과 같은 모양(예전 총액 막대용 흰 글자 스타일 해제) */
header #reset {
  background: #fff;
  padding: 9px 15px;
  font-size: 15px;
}
.aidot {
  order: -2;
}
#autoState {
  order: -1;
}

/* 미리보기 제목 줄: 왼쪽 제목·쪽수, 오른쪽 배율(밝은 바탕용) */
.previewtop h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.zoomctl button {
  color: var(--text);
}
.zoomctl #zoomLabel,
.zoomctl button[data-zoom="w"] {
  border-color: var(--line);
}
.zoomctl #zoomLabel {
  color: var(--sub);
}
.zoomctl button.on {
  color: var(--accent);
}
/* 머리 줄 순서: AI · 자동 저장 상태 · 새로 작성 · 파일 열기 · 파일로 저장 · (계정) */
#acctLogin,
#acctProfile,
#acctList,
#acctOut {
  order: 1;
}

/* 경고 문구(날짜 불일치·동승 증빙 주의·AI 인식 실패 등)는 주황색으로 */
.notice.warn,
.finalmsg.warn {
  background: #fff4e8;
  color: #a1440c;
  box-shadow: inset 0 0 0 1px #fbd5b0;
}
.finalmsg.warn b {
  color: #8a3a0a;
}

/* 증빙 검토 창 제목: 읽는 중(.busy)에는 지금 하는 일, 영역 지정 중(.cropping)이 가장 우선 */
#review .t-busy,
#review.busy .t-read {
  display: none;
}
#review.busy:not(.cropping) .t-busy {
  display: inline;
}

/* [새로 작성]: 지금 화면을 비우는 버튼이라 다른 머리 줄 버튼과 색을 달리(빨간 글자) */
header #reset {
  color: #b42318;
  border-color: #f0c5bf;
}
header #reset:hover {
  background: #fef3f2;
  border-color: #b42318;
}

/* 배율 버튼(미리보기 제목 줄)은 미리보기를 스크롤해도 총액 막대 바로 아래에 붙어 있게 */
@media (min-width: 761px) {
  .preview .summary {
    margin-bottom: 0;
  }
  .preview .previewtop {
    position: sticky;
    top: var(--toph);
    z-index: 3;
    margin: 0 0 4px;
    padding: 14px 0 10px;
    background: var(--bg);
  }
}
/* 읽는 중에는 누를 수 있는 버튼이 없으므로 아래 버튼 줄을 숨기고, 눌리지 않는 버튼은 흐리게 */
#review.busy > #reviewBtns {
  display: none;
}
button:disabled {
  cursor: not-allowed;
}

/* 총액 막대: 왼쪽 ‘N명 · N일 | 총 지급 예정액 금액’, 오른쪽 [새로 작성] [PDF 저장 / 인쇄] */
.summary #summaryMeta {
  display: inline-block;
  padding-right: 12px;
  border-right: 1px solid #ffffff40;
  white-space: nowrap;
}
/* [새로 작성]: 어두운 막대 위에서도 다른 버튼과 구분되게 파란색 계열 */
.summary #reset {
  padding: 5px 12px;
  font-size: 13.5px;
}

/* 단계 제목에 마우스를 올리면 그 단계에서 하는 일을 풍선으로 */
.stepcard {
  overflow: visible;
}
.steptitle {
  position: relative;
}
.steptitle[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: -6px;
  top: calc(100% + 10px);
  z-index: 30;
  width: max-content;
  max-width: 300px;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 450;
  line-height: 1.5;
  white-space: normal;
  box-shadow: 0 8px 20px -8px #0006;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition:
    opacity 0.15s,
    transform 0.15s,
    visibility 0.15s;
  pointer-events: none;
}
.steptitle[data-tip]::before {
  content: "";
  position: absolute;
  left: 10px;
  top: calc(100% + 4px);
  z-index: 30;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s,
    visibility 0.15s;
}
/* 잠깐 스쳐 지나갈 때는 뜨지 않게 0.4초 뒤에 */
.stephead:hover .steptitle[data-tip]::after,
.stephead:hover .steptitle[data-tip]::before,
.stephead:focus-visible .steptitle[data-tip]::after,
.stephead:focus-visible .steptitle[data-tip]::before {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.4s;
}

/* 출장자별 영수증(동승 증빙·숙박비·기타 지출·운임): 종이를 꽉 채우지 않고 글씨를 읽을 수 있는 크기로 */
.receipt-frame img {
  max-width: 120mm;
  max-height: 165mm;
}

/* 출장신청서 불러오기 안내: 왼쪽 두 방법(순서 있는 단계), 오른쪽 가져올 부분 약도 */
#tripFormDlg {
  max-width: 760px;
}
.tfguide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 14px;
  margin-bottom: 14px;
}
.tfways {
  display: grid;
  gap: 10px;
}
.tfway {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--soft);
  padding: 11px 14px 12px;
}
.tfway h3 {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 650;
}
.tfrec {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 10px;
  background: #e8eefc;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  vertical-align: 1px;
}
.tfway ol {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.75;
  color: #3f3f46;
}
kbd {
  display: inline-block;
  min-width: 20px;
  padding: 0 5px;
  border: 1px solid var(--line2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #fff;
  font: 600 12px/19.5px var(--ui);
  text-align: center;
  color: var(--text);
}
.tfmap {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.tfmap figcaption {
  font-size: 12.5px;
  font-weight: 650;
  color: #d93a2b;
  margin-bottom: 4px;
}
.tfm-doc {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 9px;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  background: #fff;
}
.tfm-line,
.tfm-row {
  display: block;
  height: 6px;
  border-radius: 2px;
  background: #e6e6e6;
}
.tfm-line.short {
  width: 60%;
}
.tfm-line.mid {
  width: 50%;
  margin: 4px auto 0;
}
.tfm-row {
  height: 9px;
  background: #f1f1f1;
  box-shadow: inset 0 -1px 0 #dcdcdc;
}
.tfm-row.head {
  background: #e4e4e4;
}
.tfm-sec {
  font-size: 10.5px;
  font-weight: 700;
  color: #444;
  margin-top: 3px;
}
.tfm-cut {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px -4px;
  padding: 2px 4px 5px;
  border: 2px dashed #d93a2b;
  border-radius: 4px;
}
@media (max-width: 760px) {
  .tfguide {
    grid-template-columns: 1fr;
  }
  .tfmap {
    display: none;
  }
}

/* 아래쪽 단계(4·5단계)를 펼쳐도 위쪽을 ‘총 지급 예정액’ 막대와 맞출 수 있게 입력 칸 아래에 스크롤 여유를 둡니다. */
@media (min-width: 761px) {
  .editor {
    padding-bottom: 50vh;
  }
}

/* 끝난 단계: 번호는 그대로(검은 동그라미 속 숫자) 두고, 완료 표시(✓)는 제목 글자 바로 옆에 작게 */
.stepcard.done .stepno {
  font-size: 13.5px;
}
.stepcard.done .stepno::before {
  content: none;
}
.stepcard.done .steptitle b::after {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  vertical-align: -2px;
  border-radius: 50%;
  background: #e8eefc
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
    center / 10px no-repeat;
}
/* 지금 펼친 단계는 끝난 단계라도 번호를 파란색으로(지금 보고 있는 단계 표시) */
.stepcard.open .stepno {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px #2563eb22;
}
/* AI 연결 상태: 점 + ‘AI 연결 정상 / 안 됨’ 글자 */
.aidot {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.aidot.off {
  color: #b42318;
}

/* 1단계 위: 로그인하지 않은 사용자에게 로그인하면 줄어드는 입력을 안내(로그인하면 숨김) */
.loginhint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px 0 6px;
  border-radius: 10px;
  color: #1e3a8a;
}
.loginhint b {
  font-weight: 650;
}
.loginhint button {
  flex: none;
  color: var(--accent);
}
.loginhint button:hover {
  border-color: var(--accent);
}
body.logged-in .loginhint {
  display: none;
}

/* ---------- 단계 바로가기 막대(1-2-3-4-5) ----------
   넓은 화면에서는 스크롤해도 ‘총 지급 예정액’ 막대와 같은 높이에 붙어 있고, 펼친 단계는 그 아래에 맞춰집니다. */
.stepbar {
  display: flex;
  height: var(--toph);
  margin-bottom: 16px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px #1018280a;
}
.stepbar button {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 10px;
  margin: 5px 0;
  padding: 0 2px;
  background: none;
  color: var(--faint);
  font-size: 12.5px;
  font-weight: 550;
}
.stepbar button:hover {
  background: var(--soft);
  color: var(--text);
}
/* 단계 사이 연결선 */
.stepbar button + button::before {
  content: "";
  position: absolute;
  top: 16px;
  right: calc(50% + 15px);
  width: calc(100% - 30px);
  height: 1.5px;
  background: var(--line);
}
.stepbar i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #f0f0f1;
  color: var(--sub);
  box-shadow: inset 0 0 0 1px var(--line);
}
.stepbar span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stepbar button.done i {
  background: var(--ink);
  color: #fff;
  box-shadow: none;
}
.stepbar button.done {
  color: var(--text);
}
.stepbar button.done + button::before,
.stepbar button.done + button.done::before {
  background: #a1a1aa;
}
.stepbar button.on i {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px #2563eb26;
}
.stepbar button.on {
  color: var(--accent);
  font-weight: 650;
}
.stepbar button.skip {
  opacity: 0.45;
}
@media (min-width: 761px) {
  .stepbar {
    position: sticky;
    top: 98px; /* 미리보기(총 지급 예정액 막대)가 붙는 줄과 같게 */
    z-index: 20;
    /* 머리 줄과 막대 사이 틈(약 14px)으로 아래 단계 상자가 비치지 않게 바탕색으로 덮음 */
    box-shadow:
      0 1px 2px #1018280a,
      0 -14px 0 var(--bg);
  }
}
@media print {
  .stepbar {
    display: none;
  }
}

/* 배율 글자: 누르면 100%(버튼이지만 글자처럼 보이게, 마우스를 올리면 바탕만) */
.zoomctl #zoomLabel {
  background: none;
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  font-weight: 550;
  cursor: pointer;
}
.zoomctl #zoomLabel:hover {
  background: #f4f4f5;
  color: var(--text);
}

/* 출장자별 경비: 이름 옆 이동 구분을 눈에 띄게(운전자 = 진한 파랑, 동승 = 연한 파랑, 대중교통 = 검정) */
.tag.role {
  padding: 4px 10px;
  border: 0;
  font-size: 13px;
  font-weight: 650;
}
.tag.role-driver {
  background: var(--accent);
  color: #fff;
}
.tag.role-passenger {
  background: #e8eefc;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px #b6c8f5;
}
.tag.role-transit {
  background: var(--ink);
  color: #fff;
}

/* 명세서 관리 표: 출장 기간은 한 줄, 제목 칸은 좁게(길면 줄바꿈) */
.triplist td.period {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.triplist td.ttl {
  max-width: 220px;
  overflow-wrap: anywhere;
}
.triplist td.muted {
  white-space: nowrap;
}

/* 2단계 거리 계산: 길찾기 캡처 방법(순서 있는 단계 + 네이버·카카오 예시 그림) */
.routeguide {
  margin: 2px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.routeguide > summary {
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sub);
}
.routeguide[open] > summary {
  border-bottom: 1px solid #efeff0;
}
.routeguide ol {
  margin: 10px 12px 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.75;
  color: #3f3f46;
}
.routeguide > .muted {
  margin: 6px 12px 0;
  font-size: 13px;
  line-height: 1.55;
}
.routeguide .gpair {
  gap: 10px;
  margin: 10px 12px 12px;
}
.routeguide .gscreen {
  height: 130px;
}
.routeguide figure {
  margin: 0;
}
.routeguide figcaption {
  font-size: 12.5px;
  font-weight: 700;
  color: #333;
  margin-bottom: 3px;
}
.routeguide .gmap em {
  font-size: 10.5px;
}

/* ======================================================================
   레이아웃 v2 (시험판): 왼쪽 = 단계 줄 + 입력, 오른쪽 = 문서(A4 미리보기)
   - 한 화면에 한 단계만, 단계 줄에서 언제든 이동, [이전]·[확인하고 다음]은 입력 영역 아래에 붙어 있음
   - 넓은 화면(761px 이상)에서는 화면 전체가 움직이지 않고 입력 영역과 문서 영역이 각각 스크롤
   ====================================================================== */
:root {
  --hdr: 58px;
}
body {
  background: var(--desk);
}
header {
  height: var(--hdr);
  padding: 0 20px !important;
  border-bottom: 1px solid var(--line);
}
.brand {
  font-size: 18.5px;
}
.brand small {
  display: none;
}
header .actions {
  align-items: center;
}
header .actions button {
  padding: 7px 13px;
  font-size: 14.5px;
}
/* 안내 문구 상자는 단계 줄이 대신하므로 숨김 */
.intro {
  display: none !important;
}

/* ---------- 단계 줄 ---------- */
.stepbar button small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.45;
  color: var(--faint);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.stepbar button small:empty {
  display: none;
}
.stepbar b {
  font-weight: 600;
}
.stepbar button.done b::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  vertical-align: -2px;
  border-radius: 50%;
  background: #e8eefc
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
    center / 9px no-repeat;
}

/* ---------- 한 화면에 한 단계 ---------- */
.stepcard:not(.open) {
  display: none;
}
.stepcard,
.stepcard.open {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.stephead,
.stepcard.open .stephead {
  pointer-events: none;
  padding: 2px 0 0;
  gap: 12px;
  background: none;
  border-radius: 0;
}
.stepno,
.stepcard.open .stepno {
  width: 32px;
  height: 32px;
  font-size: 15px;
}
.stepcard .steptitle b {
  font-size: 22.5px;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.stepcard .stepsum,
.stepcard .stepact {
  display: none !important;
}
.steptitle[data-tip]::after,
.steptitle[data-tip]::before {
  display: none !important;
}
.stepbody {
  padding: 0;
}
/* [이전]·[확인하고 다음]: 입력 영역 아래에 붙어 있음 */
.stepnav {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin: 28px 0 0;
  padding: 14px 0 18px;
  border-top: 1px solid var(--line);
}
.stepnav button {
  padding: 10px 18px;
}

/* ---------- 문서 영역 ---------- */
.preview .paperwrap {
  padding: 6px 0 18px;
}
.pager {
  position: sticky;
  bottom: 16px;
  z-index: 4;
  width: max-content;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.pager button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 21.5px;
  line-height: 1;
  color: var(--text);
}
.pager button:hover {
  color: var(--accent);
}
.pager span {
  min-width: 56px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
}

@media screen and (min-width: 761px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }
  main {
    max-width: none;
    padding: 0;
    gap: 0;
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  }
  /* 왼쪽: 단계 줄 | 입력 */
  .editor {
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
    border-right: 1px solid var(--line);
  }
  .stepbar {
    position: relative;
    top: auto;
    z-index: auto;
    flex-direction: column;
    gap: 2px;
    height: auto;
    margin: 0;
    padding: 22px 12px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
  }
  /* 단계 사이 세로선: 각 번호 동그라미 아래에서 다음 동그라미까지 */
  .stepbar button:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 34px;
    bottom: -12px;
    width: 1.5px;
    background: var(--line);
  }
  .stepbar button.done:not(:last-child)::after {
    background: #a1a1aa;
  }
  .stepbar button + button::before {
    content: none;
  }
  .stepbar button {
    flex: none;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 10px;
    border-radius: 10px;
    text-align: left;
    font-size: 14.5px;
    color: var(--sub);
  }
  .stepbar button:hover {
    background: #e9edf3;
  }
  .stepbar button.on {
    color: var(--text);
  }
  .stepbar button.on b {
    color: var(--accent);
  }
  .stepbar i {
    position: relative;
    z-index: 1;
    flex: none;
    width: 24px;
    height: 24px;
    font-size: 13px;
  }
  .stepbar span {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    padding-top: 2px;
  }
  .workspace {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px 32px 0;
    scrollbar-width: thin;
  }
  .workspace > * {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
  .workspace .formbanner {
    margin-bottom: 26px;
  }
  .workspace .privacy {
    margin-top: 18px;
  }
  /* 오른쪽: 문서 */
  .preview {
    position: relative;
    top: auto;
    height: 100%;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 28px;
    scrollbar-width: thin;
  }
  .previewhead {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-top: 18px;
  }
  .previewhead .summary,
  .previewhead .previewtop {
    position: static;
  }
  .previewhead .summary {
    margin-bottom: 0;
    box-shadow: 0 8px 20px -12px #0f172a80;
  }
  .previewhead .previewtop {
    margin: 0;
    padding: 12px 0 10px;
    background: none;
  }
  .summary {
    flex-wrap: wrap;
    row-gap: 8px;
    height: auto;
  }
  .summarymain {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .summarylabel {
    white-space: nowrap;
  }
  .summaryside {
    margin-left: auto;
  }
  .preview .printhelp {
    margin: 0 0 6px;
  }
}
@media (max-width: 760px) {
  header {
    height: auto;
    padding: 12px 14px !important;
  }
  .stepbar small {
    display: none !important;
  }
  /* 좁은 화면 단계 줄: 다섯 단계 이름이 잘리지 않게 글자는 조금 작게 */
  .stepbar button {
    font-size: 11.5px;
  }
  .workspace {
    padding-top: 14px;
  }
}
@media print {
  html,
  body {
    height: auto;
    overflow: visible;
    background: #fff !important;
  }
  main {
    height: auto;
    display: block;
  }
  .preview {
    height: auto;
    padding: 0;
    background: none;
    overflow: visible;
  }
  .previewhead,
  .pager {
    display: none !important;
  }
}

/* 출장신청서 불러오기 상자는 1단계 화면에서만(다른 단계에서는 숨김) */
body:not([data-step="1"]) .workspace .formbanner {
  display: none;
}
/* 1280px 이하: 단계 줄을 번호만 보이는 좁은 줄로(단계 이름은 마우스를 올리면 보임) */
@media screen and (min-width: 761px) and (max-width: 1280px) {
  .editor {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .stepbar {
    padding: 18px 10px;
  }
  .stepbar button {
    justify-content: center;
    padding: 9px 0;
  }
  .stepbar button span {
    display: none;
  }
  .stepbar button:not(:last-child)::after {
    left: 50%;
    top: 33px;
    bottom: -11px;
  }
  .workspace {
    padding: 20px 22px 0;
  }
}
/* 휴대폰: 아래쪽 금액 막대(약 56px) 위에 [이전]·[확인하고 다음]이 오게, 단계 줄의 체크는 생략 */
@media (max-width: 760px) {
  .stepnav {
    bottom: 56px;
  }
  .stepbar button.done b::after {
    content: none;
  }
}
@media print {
  .preview .paperwrap {
    padding: 0;
  }
}

/* ---------- 단계 내용 정리(검토 반영) ---------- */
/* 끝난 단계 표시는 왼쪽 단계 줄에만(단계 제목 옆 체크는 생략) */
.stepcard.done .steptitle b::after {
  content: none;
}
/* 저장과 개인정보 안내는 5단계(확인 및 출력)에서만 */
body:not([data-step="5"]) .workspace .privacy {
  display: none;
}
/* 통행료 목록 합계 칸: 직접 고칠 수 없음(아래 목록에서 고침) */
input.summed {
  background: var(--soft);
  color: var(--sub);
  border-style: dashed;
  cursor: default;
}
input.summed:hover,
input.summed:focus {
  border-color: var(--line2);
  box-shadow: none;
}
/* 유가 직접 첨부: 자동 캡처가 안 될 때 쓰는 보조 길 */
.evline.minor .muted {
  font-size: 13px;
}
.evline.minor button {
  padding: 4px 10px;
  font-size: 13px;
}
/* 4단계 맨 위 안내(식비 공제) */
.stephint {
  margin: -8px 0 14px;
}
/* 증빙 확인 창: AI가 읽은 값 후보(주 버튼과 구분되게 파란 테두리) */
button.cand-ai {
  border-color: #b6c8f5;
  background: #eef3fe;
  color: var(--accent);
  font-weight: 650;
}
button.cand-ai:hover {
  border-color: var(--accent);
  background: #e3ebfd;
}
/* 1단계 로그인 안내: 글자를 키움 */
.loginhint {
  font-size: 15px;
  line-height: 1.6;
  padding: 13px 14px 13px 16px;
}
.loginhint button {
  font-size: 14.5px;
  padding: 7px 14px;
}
/* 증빙 확인 창: 실패·경고 상자 안의 [AI로 다시 읽기] */
button.reread {
  margin-top: 6px;
  padding: 4px 11px;
  font-size: 13.5px;
  font-weight: 600;
  border-color: #f0b27a;
  background: #fff;
  color: #9a3d0a;
}
button.reread::before {
  content: "↻ ";
}
button.reread:hover {
  border-color: #c2570c;
  background: #fff7ef;
}
/* 출장신청서 확인표: 이동 구분 선택이 잘리지 않게(‘자가 차량 운전자’) */
.tfpeople select {
  min-width: 156px;
}

/* ---------- 주요 기능 상자: 통행료 영수증 첨부, 오피넷 자동 캡처 ---------- */
.featrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 2px;
  padding: 13px 14px 13px 16px;
  border: 1px solid #c9d8fb;
  border-radius: 11px;
}
.featrow > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.featrow b {
  font-size: 14.5px;
  font-weight: 650;
  color: #1e3a8a;
  line-height: 1.45;
}
.featrow span {
  font-size: 13.5px;
  line-height: 1.5;
  color: #3b4a6b;
}
button.feature {
  flex: none;
  padding: 10px 15px;
  color: #fff;
  font-weight: 650;
  white-space: nowrap;
}
button.feature:hover {
  border-color: #1d4ed8;
}
.featrow + .attached {
  margin-top: 6px;
}

/* ---------- 머리 줄: 제목(누르면 처음 화면) + [새로 작성] ---------- */
.titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
a.brand {
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
a.brand:hover {
  color: var(--accent);
}
.titlebar #reset {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  border-color: #c9d8fb;
  background: #eef3fe;
  color: var(--accent);
}
.titlebar #reset:hover {
  border-color: var(--accent);
  background: #e3ebfd;
  color: #1d4ed8;
}
body.on-landing .titlebar #reset {
  display: none;
}

/* ---------- 대문 ---------- */
.landing {
  height: calc(100vh - var(--hdr));
  overflow-y: auto;
  padding: 40px 20px 56px;
}
.landing[hidden] {
  display: none;
}
body.on-landing main,
body.on-landing .mobilebar {
  display: none !important;
}
.landwrap {
  margin: 0 auto;
  padding: 52px 56px 44px;
  border-radius: 18px;
}
.landing h1 {
  margin: 0;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.035em;
}
.landlead {
  max-width: 620px;
  margin: 14px 0 0;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--sub);
}
.landsteps {
  counter-reset: s;
  list-style: none;
  display: grid;
  margin: 34px 0 0;
  padding: 0;
}
.landsteps li {
  counter-increment: s;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.landsteps li::before {
  content: counter(s);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.landsteps b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.landsteps span {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sub);
}
.landbtns {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}
.landbtns button {
  padding: 13px 22px;
  font-size: 16px;
  font-weight: 650;
}
.landcompare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.landcompare dt {
  font-size: 14px;
  font-weight: 700;
}
.landcompare dd {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sub);
}
@media (max-width: 760px) {
  .landing {
    height: auto;
    padding: 18px 14px 40px;
  }
  .landwrap {
    padding: 28px 22px;
  }
  .landsteps,
  .landcompare {
    grid-template-columns: 1fr;
  }
  .landbtns {
    flex-direction: column;
  }
  .featrow {
    flex-direction: column;
    align-items: stretch;
  }
}
@media print {
  .landing {
    display: none !important;
  }
}

/* ---------- 대문 v2: 머리 줄 없이, 왼쪽 소개·3단계 / 오른쪽 바로 로그인 + 로그인 없이 작성 ---------- */
body.on-landing header {
  display: none;
}
body.on-landing .landing {
  height: 100vh;
}
.landwrap {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
  gap: 44px;
  max-width: 1080px;
  align-items: start;
}
.landbrand {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}
.landing h1 {
  font-size: 34.5px;
}
.landsteps {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 28px;
}
.landsteps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 12px;
  padding: 14px 16px;
}
.landsteps li::before {
  grid-row: span 2;
  margin: 0;
}
.landsteps span {
  margin-top: 2px;
}
.landside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.landlogin {
  padding: 24px 24px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 30px -18px #0f172a4d;
}
.landlogin h2 {
  margin: 0 0 4px;
  font-size: 19.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.landlogin > .muted {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
}
.landlogin label {
  margin-top: 10px;
}
.landlogin .error:empty {
  display: none;
}
.landlogin .error {
  margin: 10px 0 0;
}
.landlogin button.primary {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  font-size: 16px;
}
.landlinks {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--faint);
  text-align: center;
}
.landlinks a {
  color: var(--accent);
}
.landguest {
  padding: 16px 18px;
  border: 1px dashed var(--line2);
  border-radius: 14px;
}
.landguest button {
  width: 100%;
  padding: 11px;
  font-size: 15.5px;
  font-weight: 600;
}
.landguest .muted {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
}
@media (max-width: 860px) {
  .landwrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* 명세서 관리: 페이지 번호 */
.listpager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
}
.listpager button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.listpager button.on {
  border-color: var(--accent);
  background: #eef3fe;
  color: var(--accent);
  font-weight: 700;
}
.listpager .muted {
  margin-left: 8px;
  font-size: 13px;
}

/* 전기·수소: 무공해차 통합누리집 링크를 기능 상자 버튼 모양으로 */
a.btnlink.feature {
  flex: none;
  padding: 10px 15px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: #fff;
  font-weight: 650;
  white-space: nowrap;
}
a.btnlink.feature:hover {
  border-color: #1d4ed8;
}
/* 대문 로그인: @gitc.or.kr을 크고 진하게 */
.landlogin .mailrow span {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
/* [새로 작성]: 버튼 바탕 자체를 하늘색으로(검은 총액 막대 위) */
.summary #reset {
  background: #7cc8fb;
  border-color: #7cc8fb;
  color: #0b2a44;
  font-weight: 650;
}
.summary #reset:hover {
  background: #a5dafd;
  border-color: #a5dafd;
  color: #0b2a44;
}

/* 1단계 위 ‘출장신청서가 있나요?’ 상자: 가장 먼저 눈에 들어오게(파란 강조 상자, 큰 글자, 설명은 줄여 자르지 않음) */
.workspace .formbanner {
  height: auto;
  align-items: center;
  gap: 18px;
  padding: 20px 20px 20px 22px;
  border: 1.5px solid #9dbaf7;
  border-radius: 14px;
  background: linear-gradient(0deg, #eaf1fe, #f3f7ff);
  box-shadow: 0 6px 18px -12px #2563eb66;
}
.workspace .formbanner > div:first-child {
  gap: 4px;
}
.workspace .formbanner b {
  font-size: 19.5px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #1e3a8a;
}
.workspace .formbanner > div:first-child .muted {
  font-size: 15px;
  line-height: 1.55;
  color: #3b4a6b;
  white-space: normal;
  overflow: visible;
}
.workspace .formbanner .bannerbtns {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.workspace .formbanner #tripFormBtn {
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  border-color: var(--accent);
  background: var(--accent);
}
.workspace .formbanner #tripFormBtn:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}
.workspace .formbanner #sample {
  padding: 6px 10px;
  font-size: 13.5px;
  background: #fff;
}
@media (max-width: 760px) {
  .workspace .formbanner {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- 왼쪽 단계 줄 맨 위: [출장신청서 불러오기] [새로 작성] (시작에 관한 두 버튼을 한 묶음으로) ---------- */
.railacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.railacts button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  font-size: 14.5px;
  font-weight: 650;
}
.railacts button::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.rail-trip {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
  color: #fff !important;
}
.rail-new {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  color: #075985 !important;
}
.railacts .rail-sample {
  padding: 4px;
  border: 0;
  background: none;
  color: var(--faint);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.railacts .rail-sample::before {
  content: none;
}
body.logged-in .rail-sample {
  display: none;
}
@media screen and (min-width: 761px) {
  /* 단계 줄 칸 전체(버튼 + 단계 목록)를 하나의 세로 영역으로 */
  .rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    padding: 18px 12px;
    overflow-y: auto;
  }
  .railacts {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }
  .rail .stepbar {
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
  }
}
/* 좁은 단계 줄(1280px 이하): 버튼은 아이콘만(이름은 마우스를 올리면) */
@media screen and (min-width: 761px) and (max-width: 1280px) {
  .rail {
    padding: 14px 8px;
    align-items: center;
  }
  .railacts button {
    width: 44px;
    height: 40px;
    padding: 0;
  }
  .railacts button span {
    display: none;
  }
  .railacts .rail-sample {
    display: none;
  }
}
@media (max-width: 760px) {
  .railacts {
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .railacts button {
    width: auto;
    flex: 1;
  }
  .railacts .rail-sample {
    flex-basis: 100%;
  }
}

/* ---------- 시작 방법 고르기 창 ---------- */
#startDlg {
  max-width: 760px;
}
.startopts {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 10px;
}
.startopt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 132px;
  padding: 16px;
  border-radius: 12px;
  text-align: left;
  font-weight: 400;
}
.startopt b {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.startopt span {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sub);
}
.startopt.main {
  border: 1.5px solid #9dbaf7;
}
.startopt.main b {
  color: #1e3a8a;
}
.startopt:hover {
  border-color: var(--accent);
  background: #f5f8ff;
}
.startsample {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13.5px;
}
.startsample a {
  color: var(--faint);
}
@media (max-width: 760px) {
  .startopts {
    grid-template-columns: 1fr;
  }
  .startopt {
    min-height: 0;
  }
}
/* 대문은 body.on-landing일 때만(첫 화면 결정은 index.html 맨 앞의 짧은 스크립트) */
.landing {
  display: none;
}
body.on-landing .landing {
  display: block;
}

/* 5단계 버튼 아래 안내: 테두리 없는 연회색 상자 하나에 항목별로(저장 · PDF 설정 · 출력 전) */
.finalnotes {
  margin-top: 14px;
  padding: 4px 16px;
  border-radius: 12px;
  background: var(--rail);
}
.finalnotes p {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  margin: 0;
  padding: 11px 0;
  font-size: 14px;
  line-height: 1.6;
}
.finalnotes p + p {
  border-top: 1px solid var(--line);
}
.finalnotes b {
  font-weight: 650;
  color: var(--text);
}
.finalnotes span {
  color: var(--sub);
}
@media (max-width: 760px) {
  .finalnotes p {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* 왼쪽 단계 줄 맨 아래: 문의(누르면 문의하기 창) */
.railcontact {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.contactlink {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 6px 4px;
  border-radius: 8px;
  color: var(--sub);
  font-size: 12.5px;
  line-height: 1.55;
  text-decoration: none;
}
.contactlink::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.contactlink:hover {
  background: #e9edf3;
  color: var(--accent);
}
.contactlink:hover span {
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media screen and (min-width: 761px) and (max-width: 1280px) {
  .railcontact {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .contactlink {
    padding: 10px;
  }
  .contactlink span {
    display: none;
  }
  .contactlink::before {
    width: 18px;
    height: 18px;
    margin: 0;
  }
}
@media (max-width: 760px) {
  .railcontact {
    margin-top: 10px;
    padding-top: 8px;
  }
}
/* 문의하기 창 */
#contactDlg {
  max-width: 560px;
}
#contactDlg label {
  margin-top: 12px;
}
#contactDlg textarea {
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  font: inherit;
  resize: vertical;
}
#contactDlg textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
#contactDlg .error:empty {
  display: none;
}

/* 문의(단계 줄 맨 아래): 네 줄, 메일 주소는 누를 수 있는 파란 링크로 */
.contactinfo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sub);
}
.contactinfo b {
  font-weight: 650;
  color: var(--text);
}
a.contactmail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin: 1px 0;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a.contactmail::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
a.contactmail:hover {
  color: #1d4ed8;
  text-decoration-thickness: 2px;
}
/* 좁은 단계 줄에서는 편지 아이콘 버튼만 */
a.contacticon {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent);
  -webkit-mask: none;
}
@media screen and (min-width: 761px) and (max-width: 1280px) {
  .contactinfo {
    display: none;
  }
  a.contacticon {
    display: grid;
    place-items: center;
    margin: 0 auto;
    background: #e8eefc;
    color: var(--accent);
  }
  a.contacticon::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  a.contacticon:hover {
    background: #dbe6fd;
  }
}

/* 문의하기 창: 이미지 첨부(선택 · Ctrl+V · 끌어 놓기), 미리보기와 빼기 */
.ctattach {
  margin-top: 12px;
}
.ctlabel {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--sub);
}
.ctdrop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1.5px dashed var(--line2);
  border-radius: 10px;
  outline: none;
}
.ctdrop:focus-within,
.ctdrop:hover {
  border-color: #9dbaf7;
  background: #f5f8ff;
}
.ctdrop button {
  flex: none;
  padding: 6px 12px;
  font-size: 14px;
}
.ctdrop .muted {
  font-size: 13.5px;
  line-height: 1.5;
}
.ctthumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ctthumbs:not(:empty) {
  margin-top: 8px;
}
.ctthumbs figure {
  position: relative;
  margin: 0;
}
.ctthumbs img {
  display: block;
  width: 92px;
  height: 70px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.ctthumbs button {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border-color: var(--line2);
  background: #fff;
  font-size: 15px;
  line-height: 1;
}

/* 좁은 화면(760px 이하): 문의는 단계 줄이 아니라 입력 영역 맨 아래 바닥글로 */
.wsfooter {
  display: none;
}
@media (max-width: 760px) {
  .railcontact {
    display: none;
  }
  .wsfooter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin: 22px 0 0;
    padding: 14px 2px 4px;
    border-top: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--sub);
  }
  .wsfooter b {
    color: var(--text);
  }
}
/* 휴대폰: 총액 막대·미리보기 제목이 글자 단위로 꺾이지 않게 */
@media (max-width: 760px) {
  .summary {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .summarymain {
    flex-wrap: wrap;
  }
  .summarylabel,
  .summary #summaryMeta,
  .previewtop h2 {
    white-space: nowrap;
  }
  .summaryside {
    margin-left: auto;
  }
  .previewtop {
    flex-wrap: wrap;
  }
}

/* 문의 연락처: 사람·메일·휴대폰 아이콘을 같은 크기·간격으로(메일만 파란 링크) */
.ct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}
.ct::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ct-ico) center / contain no-repeat;
  mask: var(--ct-ico) center / contain no-repeat;
}
.ct-person {
  --ct-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
}
a.ct.contactmail {
  --ct-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  gap: 6px;
}
a.ct.contactmail::before {
  width: 14px;
  height: 14px;
  -webkit-mask: var(--ct-ico) center / contain no-repeat;
  mask: var(--ct-ico) center / contain no-repeat;
}
.ct-phone {
  --ct-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
}
.contactinfo .ct {
  margin: 1px 0;
}
/* 통행료 목록: ‘제외’인 방향 칸은 주황 테두리(합계에 안 들어감) */
.tolledit select.dirnone {
  border-color: #f0a35e;
  background: #fff7ef;
  color: #9a3d0a;
  box-shadow: 0 0 0 2px #f0a35e2e;
}
.tollwarn {
  margin: 4px 0 8px;
  font-size: 13.5px;
}
/* 통행료 ‘제외’ 이유(줄마다)와 경고 목록 */
.tolledit .dirwhy {
  display: block;
  font-size: 12px;
  color: #b4530a;
}
.tollwarn ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.tollwarn li {
  margin: 3px 0;
  line-height: 1.55;
}
/* 첨부됨 옆 파일 이름: 누르면 원본 보기 */
a.viewlink {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.viewlink:hover {
  color: #1d4ed8;
}
/* 원본 보기 창 */
#viewDlg {
  max-width: 900px;
}
.viewpages {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 70vh;
  overflow: auto;
  padding: 4px;
  border-radius: 10px;
  background: var(--rail);
}
.viewpages figure {
  margin: 0;
  text-align: center;
}
.viewpages img {
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.viewpages figcaption {
  margin-top: 4px;
  font-size: 13px;
  color: var(--faint);
}

/* 5단계 확인 항목: 누르면 해당 입력란으로 */
.finalhint {
  margin-left: 4px;
  font-size: 12.5px;
  font-weight: 400;
  opacity: 0.8;
}
a.golink {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a.golink:hover {
  text-decoration-thickness: 2px;
}
/* 이동한 입력란을 잠깐 파랗게 표시 */
@keyframes flashField {
  0%,
  60% {
    box-shadow: 0 0 0 4px #2563eb59;
    border-color: var(--accent);
  }
  100% {
    box-shadow: 0 0 0 0 #2563eb00;
  }
}
#form .flash {
  animation: flashField 1.6s ease-out;
}
.tollwarn .reread {
  margin-top: 8px;
}
/* 문의: 담당자 이름은 진하게 */
.ct-person {
  font-weight: 650;
  color: var(--text);
}
/* 미리보기 아래 여백 없음(고친 부분이 페이지 맨 아래쪽이면 가운데까지 올리지 않고 페이지 끝이 화면 아래에 오도록만) */
@media screen and (min-width: 761px) {
  .preview .paperwrap {
    padding-bottom: 0;
  }
  .preview .paper:last-child {
    margin-bottom: 12px;
  }
}

/* 페이지 이동(‹ 1 / 2 ›): 미리보기 제목 줄 가운데(‘출력 미리보기’와 배율 조절 사이) */
.previewtop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.previewtop .zoomctl {
  justify-self: end;
}
.previewtop .pager {
  position: static;
  margin: 0;
  padding: 2px;
  box-shadow: none;
  border: 1px solid var(--line2);
  background: #fff;
}
.previewtop .pager button {
  width: 28px;
  height: 28px;
  font-size: 19.5px;
}
.previewtop .pager span {
  min-width: 50px;
  font-size: 14px;
}
@media (max-width: 760px) {
  .previewtop {
    grid-template-columns: 1fr auto;
  }
  .previewtop .pager {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/* 관리자: 머리 줄 [관리자] 버튼, 회원 목록, 다른 회원 명세서 보기 중 표시 줄 */
#acctAdmin.adminbtn {
  border-color: #c9d7f8;
  color: var(--accent);
}
.dlgtools .adminsearch {
  flex: 1;
  max-width: 320px;
  height: 36px;
}
.dlgtools .muted {
  align-self: center;
  font-size: 13px;
}
.triplist.adminlist td.who {
  white-space: nowrap;
}
.triplist.adminlist td.who .muted {
  font-size: 13px;
}
.viewbar {
  position: fixed;
  bottom: 16px;
  right: 28px; /* 미리보기 아래쪽(위쪽 알림과 겹치지 않게) */
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 7px 8px 7px 16px;
  border: 1px solid #f2c46d;
  border-radius: 12px;
  background: #fff7e6;
  color: #5c3d00;
  font-size: 14px;
  box-shadow: 0 6px 20px #18181b26;
}
.viewbar[hidden] {
  display: none;
}
/* 보는 중에는 저장 버튼 숨김(저장하지 않음) */
body.admin-viewing [data-final="server"] {
  display: none;
}
.viewbar > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewbar small {
  margin-left: 8px;
  color: #8a6420;
  font-size: 13px;
}
.viewbar button {
  flex: none;
  padding: 5px 11px;
  font-size: 13px;
}
@media print {
  .viewbar {
    display: none !important;
  }
}

/* 태블릿·휴대폰 브라우저: 100vh는 주소창·도구 막대가 숨었을 때 높이라 화면 아래(단계 [확인하고 다음] 버튼)가 가려짐
   → 지금 실제로 보이는 높이(dvh)로 계산(지원하지 않는 브라우저는 위의 vh 그대로) */
@supports (height: 100dvh) {
  @media screen and (min-width: 761px) {
    main {
      height: calc(100dvh - var(--hdr));
    }
  }
  .landing {
    height: calc(100dvh - var(--hdr));
  }
  body.on-landing .landing {
    height: 100dvh;
  }
}

/* 4단계 기타사항 입력란 */
.notefield textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  font: inherit;
  color: var(--text);
  resize: vertical;
}
.notefield textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

/* 출장자 삭제: 빨간 글씨·테두리로 눈에 띄게 */
.personhead button[data-remove] {
  padding: 4px 12px;
  font-weight: 600;
}

/* ‘직접 입력’을 골랐을 때 [출장신청서 불러오기] 옆 말풍선 */
.tiptour {
  position: fixed;
  z-index: 70;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 14px 16px 12px;
  border-radius: 12px;
  background: #1e3a8a;
  color: #fff;
  font-size: 14px;
  line-height: 1.55;
  box-shadow: 0 10px 30px #0f172a40;
  animation: tipin 0.25s ease-out;
}
.tiptour[hidden] {
  display: none;
}
/* 말풍선 꼬리: 넓은 화면은 왼쪽(버튼 쪽), 좁은 화면은 위쪽 */
.tiptour::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 27px;
  width: 14px;
  height: 14px;
  background: #1e3a8a;
  transform: rotate(45deg);
}
.tiptour.below::before {
  left: 24px;
  top: -7px;
}
.tiptour > b {
  display: block;
  margin: 0 22px 4px 0;
  font-size: 15px;
}
.tiptour p {
  margin: 0;
  color: #dbeafe;
}
.tiptour p b {
  color: #fff;
}
.tiptour .tipx {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #bfdbfe;
}
.tiptour .tipx::before {
  content: "✕";
  font-size: 13px;
}
.tiptour .tipx:hover {
  background: #ffffff1f;
  color: #fff;
}
.tiptour .tipbtns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.tiptour .tipbtns button {
  margin: 0;
  padding: 6px 12px;
  border: 1px solid #ffffff55;
  background: transparent;
  color: #fff;
  font-size: 13px;
}
.tiptour .tipbtns button:hover {
  background: #ffffff1a;
}
.tiptour .tipbtns button.primary {
  font-weight: 700;
}
/* 말풍선이 떠 있는 동안 버튼을 은은하게 깜빡여 눈에 띄게 */
#tripFormBtn.tipping {
  animation: tippulse 1.6s ease-in-out infinite;
}
@keyframes tippulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 #2563eb66;
  }
  50% {
    box-shadow: 0 0 0 7px #2563eb00;
  }
}
@keyframes tipin {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tiptour,
  #tripFormBtn.tipping {
    animation: none;
  }
}
@media print {
  .tiptour {
    display: none !important;
  }
}

/* 출장자 선택 창: 가입자 체크 목록 + 직접 입력 */
#pickDlg {
  width: 520px;
  max-width: calc(100vw - 32px);
}
#pickDlg .picksearch {
  width: 100%;
  margin: 0 0 8px;
}
#pickDlg .picklist {
  max-height: min(46vh, 380px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px;
}
#pickDlg .picklist label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
#pickDlg .picklist label[hidden] {
  display: none;
}
#pickDlg .picklist label:hover {
  background: var(--soft);
}
#pickDlg .picklist label:has(input:checked) {
  background: #eff6ff;
}
#pickDlg .picklist input {
  align-self: center;
  margin: 0 4px 0 0;
}
#pickDlg .picklist span {
  color: var(--sub);
  font-size: 13px;
}
#pickDlg .picklist small.shareacct {
  color: #1d4ed8;
  font-size: 12px;
}
#pickDlg .pickempty {
  margin: 10px;
}
#pickDlg .pickmanual {
  display: block;
  margin-top: 14px;
  font-size: 14px;
}
#pickDlg .pickmanual input {
  display: block;
  width: 100%;
  margin-top: 6px;
}

/* 유가 정보: ‘자동 캡처가 안 되면 ○○ 화면을…’의 사이트 이름 링크 */
a.sitelink {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.sitelink::after {
  content: " ↗";
  text-decoration: none;
  display: inline-block;
}

/* 명세서 관리: 저장됨 · 임시 저장 탭 */
.listtabs {
  display: flex;
  gap: 4px;
  margin: 4px 0 10px;
  border-bottom: 1px solid var(--line);
}
/* 탭은 버튼 유리 효과에서 빼고(안 고른 탭이 버튼처럼 떠 보여 고른 탭과 거꾸로 보였음),
   고른 탭: 연한 파란 바탕 + 파란 굵은 글자 + 파란 밑줄 3px / 안 고른 탭: 바탕 없이 회색 글자 */
.listtabs button[role="tab"] {
  margin: 0 0 -1px;
  padding: 9px 16px 8px;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 8px 8px 0 0;
  background: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--faint);
  font-weight: 600;
}
.listtabs button[role="tab"]:hover {
  background: #f4f6f9 !important;
  color: var(--text);
}
.listtabs button[role="tab"].on {
  border-bottom-color: var(--accent) !important;
  background: #eff6ff !important;
  color: var(--accent);
  font-weight: 750;
}
.listtabs button span {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 10px;
  background: #f0f0f1;
  color: var(--sub);
  font-size: 12px;
  line-height: 18px;
}
.listtabs button.on span {
  background: var(--accent);
  color: #fff;
}

/* 명세서 관리: 체크 칸·선택 삭제 */
.triplist th.sel,
.triplist td.sel {
  width: 28px;
  padding-right: 0;
  text-align: center;
}
.triplist .sel input {
  margin: 0;
  vertical-align: middle;
}
.triplist tr:has(td.sel input:checked) td {
  background: #fef3f2;
}
.dlgtools [data-delsel] {
  margin-left: auto;
}
.dlgtools [data-delsel]:disabled {
  color: #b9b9be;
  border-color: var(--line);
  background: #fff;
  cursor: default;
}

/* ---------- 사용 안내 ---------- */
/* 맨 위 [? 사용 안내]: 버튼보다 가벼운 글자 링크 모양(좁은 화면에서는 ? 아이콘만) */
.actions .guidebtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  padding: 6px 8px;
  border: 0;
  background: none;
  color: var(--sub);
  font-weight: 600;
}
.actions .guidebtn:hover {
  background: var(--soft);
  color: var(--text);
}
.guidebtn i {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
@media (max-width: 1150px) {
  .actions .guidebtn span {
    display: none;
  }
}
/* 휴대폰: 메뉴 줄이 넘치지 않게 [?]는 제목 줄 오른쪽에 */
.titlebar .mobileguide {
  display: none;
}
@media (max-width: 760px) {
  .actions .guidebtn {
    display: none;
  }
  .titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .titlebar .mobileguide {
    display: inline-flex;
    margin: 0;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--sub);
  }
}
.landguide {
  margin: 18px 0 0;
}
.landguide a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.landguide a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 펼친 단계 질문 제목 오른쪽 [?] */
.stepbody > h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stephelp {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1.5px solid #c4c4cc;
  border-radius: 50%;
  color: var(--sub);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
}
.stephelp:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* 안내 창: 왼쪽 목차 · 오른쪽 본문 */
#guideDlg {
  width: 880px;
  max-width: calc(100vw - 32px);
  padding-bottom: 20px;
}
.guidewrap {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  height: min(70vh, 640px);
  margin-top: 8px;
}
.guidenav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding-right: 8px;
  border-right: 1px solid var(--line);
}
.guidenav a {
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--sub);
  font-size: 14px;
  text-decoration: none;
}
.guidenav a:hover {
  background: var(--soft);
  color: var(--text);
}
.guidenav a.on {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 650;
}
.guidebody {
  overflow-y: auto;
  padding-right: 6px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
  outline: none;
}
.guidebody section + section {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #f0f0f1;
}
.guidebody section:last-child {
  min-height: 100%;
}
.guidebody h3 {
  margin: 0 0 10px;
  font-size: 17px;
}
.guidebody h4 {
  margin: 16px 0 6px;
  font-size: 15px;
}
.guidebody p,
.guidebody ul,
.guidebody ol {
  margin: 0 0 10px;
}
.guidebody ul,
.guidebody ol {
  padding-left: 20px;
}
.guidebody li + li {
  margin-top: 4px;
}
.guidebody .gnote {
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--soft);
  color: var(--sub);
  font-size: 13.5px;
}
.guidebody .gtable {
  width: 100%;
  margin: 6px 0 12px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.guidebody .gtable th,
.guidebody .gtable td {
  padding: 7px 10px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.guidebody .gtable th {
  background: var(--soft);
  font-weight: 650;
}
.guidebody .gtag {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 6px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11.5px;
  font-weight: 650;
}
.guidebody .gfaq dt {
  margin-top: 12px;
  font-weight: 650;
}
.guidebody .gfaq dd {
  margin: 4px 0 0;
  color: var(--sub);
}
.guidebody kbd {
  padding: 1px 6px;
  border: 1px solid #d4d4d8;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
}
/* 좁은 화면: 목차를 위쪽 가로 줄로 */
@media (max-width: 760px) {
  .guidewrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    height: 72vh;
  }
  .guidenav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 0 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .guidenav a {
    flex: none;
    white-space: nowrap;
  }
}
@media print {
  #guideDlg {
    display: none !important;
  }
}

/* 사용 안내 그림: 화면을 캡처한 그림(빨간 번호) + 아래 같은 번호의 설명 */
.guidebody .gfig {
  margin: 10px 0 8px;
}
.guidebody .gfig img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 10px #18181b14;
}
.guidebody .gfigs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.guidebody .gfigs > div {
  flex: 0 1 410px;
  min-width: 0;
}
.guidebody .gcap {
  margin: 0 0 4px;
  font-weight: 650;
}
.guidebody .glegend {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.guidebody .glegend li {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.guidebody .gn {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e11d48;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-1px);
}

/* 3·4단계 날짜(10월 2일): 진하게 */
b.mday {
  font-weight: 700;
  color: var(--text);
}
td > b.mday {
  margin-right: 4px;
}

/* 영수증 첨부 창: 카드사·은행 바로 가기(로고 + 이름) */
.brandbox {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  padding: 10px 12px;
}
.brandbox > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}
.brandbox > p {
  margin: 8px 0 4px;
  font-size: 13px;
}
.brandhead {
  display: block;
  margin: 10px 0 6px;
  font-size: 13px;
  color: var(--sub);
}
.brandrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.brandchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
}
.brandchip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.brandchip img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: contain;
}

/* ---------- 단계 입력 영역 정리 ----------
   질문이 제목, 금액은 장부처럼 오른쪽 정렬 (묶음 상자는 구분용으로 그대로) */
.stepcard.open .stephead {
  gap: 8px;
}
.stepcard.open .stepno {
  width: 22px;
  height: 22px;
  font-size: 12px;
}
.stepcard.open .steptitle b {
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--accent);
}
.stepbody > h2 {
  margin: 8px 0 22px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--ink);
}
/* 금액: 숫자를 오른쪽에 붙이고 자릿수 폭을 같게(명세서 표처럼 자리가 맞게) */
input[data-money] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* 안내 글: 크기·줄 간격 하나로 */
.stepbody .hint,
.stepbody > p.muted,
.stepbody .group > p.muted,
.stepbody .tolledit > .muted,
.stepbody .routeguide .muted {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--faint);
}
/* [이전]·[확인하고 다음] 위: 지나가는 입력 칸이 버튼 줄 밑으로 흐려지며 사라지게 */
.stepnav::before {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 28px;
  background: linear-gradient(to bottom, #ffffff00, var(--ws));
  pointer-events: none;
}
/* 휴대폰은 버튼 줄 바탕이 입력 영역과 달라 흐림을 쓰지 않음 */

/* ======================================================================
   글래스(유리) 효과: 파랑 계열 색 번짐 배경 위에 반투명 판을 얹음
   - A4 미리보기(.paper)·입력 칸 안쪽은 흰색 그대로(출력과 같게, 글자가 잘 읽히게)
   - 투명도 줄이기를 켠 기기와 인쇄에서는 효과를 끔
   ====================================================================== */
:root {
  --glass: #ffffff8f; /* 큰 판: 머리 줄·입력 영역 */
  --glass-soft: #ffffff6b; /* 판 안의 묶음 상자 */
  --glass-edge: #ffffffb3; /* 유리 가장자리 빛 */
  --glass-blur: blur(20px) saturate(160%);
  --glass-shadow: 0 8px 32px -12px #1e3a8a33;
  --ws: #ffffff80;
  --rail: #ffffff4d;
  --desk: transparent;
}
body {
  background-color: #e6edf9;
  background-image:
    radial-gradient(46% 52% at 8% 6%, #93c5fdcc 0%, #93c5fd00 100%),
    radial-gradient(40% 46% at 92% 12%, #a5b4fcb3 0%, #a5b4fc00 100%),
    radial-gradient(48% 50% at 78% 96%, #7dd3fc99 0%, #7dd3fc00 100%),
    radial-gradient(44% 48% at 18% 92%, #bfdbfecc 0%, #bfdbfe00 100%);
  background-attachment: fixed;
}
header {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom-color: var(--glass-edge);
}
@media screen and (min-width: 761px) {
  .stepbar {
    border-right-color: var(--glass-edge);
  }
}
.stepnav::before {
  content: none;
}
/* 파란 안내 상자(AI 안내·로그인 안내) */
.featrow,
.loginhint {
  border-color: #bfdbfecc;
  background: #dbeafeb3;
}
input,
select,
textarea {
  background-color: #fff;
}
/* 팝업 */
dialog {
  background: #ffffffe0;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-edge);
}
dialog::backdrop,
.loadoverlay {
  background: #1e293b4d;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* 대문 */
.landing {
  background: transparent;
}
.landwrap {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    0 24px 60px -28px #1e3a8a59;
  outline: 1px solid var(--glass-edge);
}
.landsteps li {
  border-color: var(--glass-edge);
  background: var(--glass-soft);
}
.landlogin {
  border-color: var(--glass-edge);
  background: #ffffffb3;
}
.landguest {
  border-color: #94a3b880;
}
/* 회색 안내 글: 비치는 바탕에서도 읽히게 한 단계 진하게 */
.muted,
.hint {
  color: #52525b;
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: #fff;
    --glass-soft: #fafafa;
    --ws: #fff;
    --rail: #f4f6f9;
  }
  body {
    background: #e5e8ed;
  }
}
@media print {
  body {
    background: #fff !important;
  }
}

/* 단계 줄: 지금 단계는 유리 조각, 마우스를 올리면 옅게 */
@media (min-width: 761px) {
  .stepbar button:hover {
    background: #ffffff59;
  }
  .stepbar button.on {
    background: #ffffff9e;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow:
      inset 0 1px 0 #ffffff,
      inset 0 0 0 1px var(--glass-edge),
      0 6px 18px -10px #1e3a8a4d;
  }
}

/* ---------- 5단계 출장자별 요약 카드: 유리 + 정리 ----------
   내용은 그대로 두고 색 덩어리만 줄임: 구분은 칩 대신 글자, 금액 칸 부분 바탕 없앰,
   ‘증빙 없음’은 점 + 글자, 확인사항은 줄 전체 색 대신 왼쪽 색 막대 */
.psum {
  border-radius: 14px;
}
.psumhead {
  padding: 12px 16px 10px;
  background: none;
  font-size: 15px;
}
.psumtable th {
  padding: 8px 16px 6px;
}
.psumtable td {
  padding: 9px 16px;
  border-top-color: #e4e7ee99;
}
.stag,
.psumtable tr.ref .stag,
.psumtable tr.pnote .stag,
.psumtable tr.pnote.err .stag {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 13px;
}
.stag {
  color: var(--accent);
}
.psumtable tr.ref .stag {
  color: var(--sub);
}
.stag:hover {
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.psumtable tr.calc .r {
  background: none;
}
.psumtable tr.ref .r {
  font-weight: 500;
  color: var(--sub);
}
.psumtable tr.ev.first td {
  border-top-color: #d4d8e2;
}
.nodoc {
  padding: 0;
  background: none;
  font-weight: 600;
}
.nodoc::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 4px 0 2px;
  border-radius: 50%;
  background: #f59e0b;
  vertical-align: 1px;
}
.psumtable tr.pnote td,
.psumtable tr.pnote.err td {
  background: #fffbeb80;
}
.psumtable tr.pnote td:first-child {
  box-shadow: inset 3px 0 0 #f59e0b;
}
.psumtable tr.pnote.err td {
  background: #fef2f280;
}
.psumtable tr.pnote.err td:first-child {
  box-shadow: inset 3px 0 0 #dc2626;
}
.psumtable tr.pnote .stag {
  color: #92400e;
  font-weight: 700;
}
.psumtable tr.pnote.err .stag {
  color: #a23221;
}
.psumtable tr.pnote a.golink {
  text-decoration: none;
}
.psumtable tr.pnote a.golink:hover {
  text-decoration: underline;
}
.psumtable tfoot td {
  border-top-color: #cbd2de;
  font-size: 14px;
}
.psumtable tfoot td.r {
  font-size: 16px;
}

/* 유리 다듬기: 흐림을 .editor 전체가 아니라 입력 영역(.workspace)에만 걸어,
   단계 줄의 지금 단계 칸이 뒤의 색 번짐 배경을 직접 흐리게 비추도록(바깥 판이 흐림을 걸면 안쪽 유리는 그 판만 비춤) */
@media screen and (min-width: 761px) {
  .editor {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .stepbar {
    background: transparent;
  }
  .stepbar button.on {
    background: linear-gradient(135deg, #ffffffc7 0%, #ffffff73 55%, #dbeafe8c 100%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
  }
}

/* 스크롤 막대: 유리 조각 같은 손잡이(Chrome·Edge·Safari), Firefox는 색만 */
@supports selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 99px;
    background:
      linear-gradient(180deg, #ffffffb3, #ffffff4d) padding-box,
      #94a3b880 padding-box;
    box-shadow:
      inset 0 0 0 1px #ffffffb3,
      inset 0 -1px 2px #1e3a8a26;
  }
  ::-webkit-scrollbar-thumb:hover {
    background:
      linear-gradient(180deg, #ffffffd9, #ffffff80) padding-box,
      #60a5fab3 padding-box;
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
}
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: #94a3b8b3 transparent;
  }
}
/* [이전]·[확인하고 다음] 줄: 바탕 없이 버튼만 */
.stepnav {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top-color: transparent;
  box-shadow: none;
}
/* 바탕이 없으니 버튼이 아래 내용과 겹쳐도 떠 보이게 */
.stepnav button {
  box-shadow: 0 6px 18px -6px #0f172a59;
}
/* 넓은 화면은 페이지 전체가 스크롤되지 않으므로 오른쪽 스크롤 막대 자리를 비워 두지 않음(미리보기가 오른쪽 끝까지),
   미리보기 머리(총액 막대·쪽 넘김 줄)의 유리 바탕도 좌우 끝까지 */
@media screen and (min-width: 761px) {
  html {
    scrollbar-gutter: auto;
  }
}

/* 머리 줄 버튼(명세서 관리·관리자·로그아웃·파일 열기·파일로 저장·로그인)과 [출장자 삭제]: 유리 버튼 */
header .actions button:not(.guidebtn),
.personhead button[data-remove] {
  border: 1px solid #ffffffcc !important;
  background: linear-gradient(160deg, #ffffffd1 0%, #ffffff66 100%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(170%);
  backdrop-filter: blur(10px) saturate(170%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 14px -8px #1e3a8a59;
  transition:
    background-color 0.15s,
    box-shadow 0.15s;
}
header .actions button:not(.guidebtn):hover {
  background: linear-gradient(160deg, #ffffff 0%, #ffffffa6 100%) !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 6px 18px -8px #1e3a8a73;
}
/* 관리자: 파란 유리 */
header #acctAdmin.adminbtn {
  border-color: #bfdbfecc !important;
  background: linear-gradient(160deg, #eff6ffd9 0%, #bfdbfe73 100%) !important;
  color: var(--accent);
}
header #acctAdmin.adminbtn:hover {
  background: linear-gradient(160deg, #eff6ff 0%, #bfdbfeb3 100%) !important;
}
/* 출장자 삭제: 붉은 유리(빨간 글자로 지우는 버튼임은 그대로) */
.personhead button[data-remove] {
  border-color: #fca5a5b3 !important;
  background: linear-gradient(160deg, #fff5f5d9 0%, #fecaca66 100%) !important;
  color: #d92d20 !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 14px -8px #b91c1c4d;
}
.personhead button[data-remove]:hover {
  background: linear-gradient(160deg, #fff5f5 0%, #fecacaa6 100%) !important;
}

/* ---------- 나머지 버튼도 유리로 ----------
   버튼 위계(화면마다 진한 파랑은 ‘다음에 누를 것’ 하나):
   주요 → 진한 파란 유리, AI 기능(불러오기·첨부·자동 캡처) → 흰 바탕 파란 글자, 보조 → 흰 유리, 지우기 → 붉은 유리.
   글자처럼 쓰는 버튼(단계 줄·단계 머리·구분 글자·사용 안내·길찾기 링크·가상 예시 링크)은 그대로 */
:root {
  --gbtn-white: linear-gradient(160deg, #ffffffd1 0%, #ffffff66 100%);
  --gbtn-white-hover: linear-gradient(160deg, #ffffff 0%, #ffffffa6 100%);
  --gbtn-shadow: inset 0 1px 0 #ffffff, 0 4px 14px -8px #1e3a8a59;
}
.workspace button:not([class]),
dialog button:not([class]),
.landing button:not([class]),
.loginhint button,
button.side.attach:not(.feature),
button.btnlink.side:not([data-naver-route]),
.stephelp,
#add,
.summary #print,
.summary #saveHwpx,
.finalbtns button:not(.primary),
.pager,
.zoomctl {
  border-color: #ffffffcc !important;
  background: var(--gbtn-white) !important;
  -webkit-backdrop-filter: blur(10px) saturate(170%);
  backdrop-filter: blur(10px) saturate(170%);
  box-shadow: var(--gbtn-shadow);
}
.workspace button:not([class]):hover,
dialog button:not([class]):hover,
.landing button:not([class]):hover,
.loginhint button:hover,
button.side.attach:not(.feature):hover,
button.btnlink.side:not([data-naver-route]):hover,
.stephelp:hover,
#add:hover,
.summary #print:hover,
.summary #saveHwpx:hover,
.finalbtns button:not(.primary):hover {
  background: var(--gbtn-white-hover) !important;
}
#add {
  border-style: dashed !important;
}
/* 쪽 넘김·확대 묶음: 겉은 유리 한 장, 안의 버튼은 투명 */
.pager button,
.zoomctl button {
  background: transparent !important;
  box-shadow: none;
}
.pager button:hover,
.zoomctl button:hover {
  background: #ffffff8c !important;
}
.zoomctl button.on {
  background: #dbeafecc !important;
}
/* 주요 버튼(확인하고 다음·로그인하고 작성·팝업의 확인·PDF 저장 등): 진한 파란 유리(앱 강조색, 총액 판과 같은 계열) */
button.primary {
  border-color: #1d4ed8 !important;
  background:
    linear-gradient(160deg, #ffffff38 0%, #ffffff00 45%),
    var(--accent) !important;
  color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(170%);
  backdrop-filter: blur(10px) saturate(170%);
  box-shadow:
    inset 0 1px 0 #ffffff4d,
    0 8px 20px -8px #1d4ed8a6;
}
button.primary:hover {
  background:
    linear-gradient(160deg, #ffffff38 0%, #ffffff00 45%),
    #1d4ed8 !important;
}
/* AI 기능 버튼(영수증 첨부·자동 캡처): 흰 바탕 + 파란 테두리·글자 — 주요 버튼보다 한 단계 아래 */
button.feature,
a.btnlink.feature {
  border-color: #93c5fd !important;
  background: linear-gradient(160deg, #ffffff 0%, #eff6ff 100%) !important;
  color: #1d4ed8 !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 14px -8px #1d4ed866;
}
button.feature:hover,
a.btnlink.feature:hover {
  border-color: var(--accent) !important;
  background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 100%) !important;
}
/* 출장신청서 불러오기: 작성의 첫 단계라 파란 유리에 흰 글자 */
.rail-trip {
  border-color: #93c5fd99 !important;
  background:
    linear-gradient(160deg, #ffffff40 0%, #ffffff00 50%),
    #2563ebe0 !important;
  box-shadow:
    inset 0 1px 0 #ffffff59,
    0 8px 20px -8px #1d4ed8a6;
}
.rail-trip:hover {
  background:
    linear-gradient(160deg, #ffffff4d 0%, #ffffff00 50%),
    #1d4ed8f0 !important;
}
/* 새로 작성: 보조 버튼과 같은 흰 유리(지금 내용을 비우는 동작이라 눈에 띄게 두지 않음) */
.rail-new {
  border-color: var(--line2) !important;
  background: var(--gbtn-white) !important;
  color: var(--ink) !important;
  box-shadow: var(--gbtn-shadow);
}
.rail-new:hover {
  background: var(--gbtn-white-hover) !important;
}
/* 지우기 버튼(팝업의 삭제·선택 삭제 등): 붉은 유리 */
button.danger:not([data-remove]) {
  border-color: #fca5a5b3 !important;
  background: linear-gradient(160deg, #fff5f5d9 0%, #fecaca66 100%) !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 14px -8px #b91c1c4d;
}
button.danger:not([data-remove]):hover {
  background: linear-gradient(160deg, #fff5f5 0%, #fecacaa6 100%) !important;
}
button:disabled {
  opacity: 0.55;
}
/* 1단계 ‘로그인하면 입력이 줄어듭니다’ 안내: 파란 유리 */
.loginhint {
  border: 1px solid #bfdbfecc;
  background: linear-gradient(150deg, #ffffffb3 0%, #dbeafe8c 55%, #bfdbfe73 100%);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  backdrop-filter: blur(12px) saturate(170%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 6px 20px -10px #1d4ed859;
}
/* 시작 팝업의 고르기 칸: 유리 */
.startopt {
  background: var(--gbtn-white) !important;
  box-shadow: var(--gbtn-shadow);
}
.startopt.main {
  border-color: #bfdbfecc !important;
  background: linear-gradient(150deg, #ffffffb3 0%, #dbeafe8c 55%, #bfdbfe73 100%) !important;
}
.startopt:hover,
.startopt:focus-visible {
  border-color: var(--accent) !important;
}
/* 바탕 없는 버튼 줄의 [이전]: 뒤 글자와 섞이지 않게 거의 불투명한 흰 유리 */
.stepnav button:not(.primary) {
  background: linear-gradient(160deg, #fffffffa 0%, #ffffffe0 100%) !important;
}
.workspace .stepnav button {
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 0 0 1px #94a3b84d,
    0 8px 20px -6px #0f172a59;
}
/* 총액 판 위 [PDF 저장 / 인쇄]·[한글로 저장]: 마우스 올림 테두리, 뒤 흐림 없음 */
.summary #print:hover,
.summary #saveHwpx:hover {
  border-color: #ffffff80 !important;
}
.summary #print,
.summary #saveHwpx {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 파란 말풍선 안의 버튼은 말풍선에 맞춘 원래 모양 그대로(검은 유리 규칙에서 빼기): [출장신청서 불러오기] 흰 바탕·진한 파란 글자 */
.tiptour .tipbtns button.primary {
  border-color: #fff !important;
  background: #fff !important;
  color: #1e3a8a;
  box-shadow: 0 4px 12px -4px #0f172a66;
}
.tiptour .tipbtns button.primary:hover {
  background: #dbeafe !important;
}

/* ---------- 넓은 화면: 화면 글씨·버튼을 10% 크게 ----------
   CSS 곳곳의 px 크기를 하나씩 바꾸지 않고 영역 단위로 확대(--ui-zoom 하나만 바꾸면 됨).
   A4 미리보기 종이(.preview 안)와 출력물은 확대하지 않음. 휴대폰(760px 이하)은 그대로 */
:root {
  --ui-zoom: 1.1;
}
@media screen and (min-width: 761px) {
  header,
  .editor,
  .previewhead,
  .landwrap,
  dialog,
  .tiptour {
    zoom: var(--ui-zoom);
  }
}
@media screen and (min-width: 761px) {
  /* 머리 줄이 확대된 만큼 본문 높이를 줄여 화면 아래가 넘치지 않게 */
  main {
    height: calc(100vh - var(--hdr) * var(--ui-zoom));
  }
  /* 미리보기 머리의 좌우 끝 채움: 확대된 상태라 -28px도 그만큼 나눠 줌 */
  .previewhead {
    margin-inline: calc(-28px / var(--ui-zoom));
    padding-inline: calc(28px / var(--ui-zoom));
  }
}
@supports (height: 100dvh) {
  @media screen and (min-width: 761px) {
    main {
      height: calc(100dvh - var(--hdr) * var(--ui-zoom));
    }
  }
}
/* 파란 AI 안내 상자: 칸이 좁으면 설명이 세로로 길게 눌리지 않도록 버튼을 설명 아래로 */
.featrow {
  flex-wrap: wrap;
}
.featrow > div {
  flex: 1 1 250px;
}
.featrow > button,
.featrow > a {
  margin-left: auto;
}

/* ======================================================================
   작성 화면 배경은 정식판처럼 단색: 단계 줄 회색 | 입력 흰색 | 미리보기 회색 (대문은 색 번짐 배경 그대로)
   흰 바탕에서 흰 유리 테두리는 보이지 않으므로 묶음 상자·보조 버튼 테두리는 회색 선으로
   ====================================================================== */
body:not(.on-landing) {
  background: #e5e8ed;
}
body:not(.on-landing) header {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: var(--line);
}
@media screen and (min-width: 761px) {
  .rail {
    background: #f4f6f9;
    border-right: 1px solid var(--line);
  }
  .workspace {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .editor {
    border-right-color: var(--line);
    box-shadow: none;
  }
  .preview,
  .previewhead {
    background: #e5e8ed;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (max-width: 760px) {
  main,
  .workspace {
    background: #fff;
  }
}
/* 출장자 요약 카드 머리 줄 구분선 */
.psumhead {
  border-bottom-color: var(--line);
}
/* 흰 보조 버튼: 흰 바탕 위에서도 보이게 회색 테두리 */
body:not(.on-landing) header .actions button:not(.guidebtn),
.workspace button:not([class]),
dialog button:not([class]),
button.side.attach:not(.feature),
button.btnlink.side:not([data-naver-route]),
.stephelp,
.finalbtns button:not(.primary),
.startopt,
.pager,
.zoomctl {
  border-color: var(--line2) !important;
}
#add {
  border-color: #a1a1aa !important;
}
/* 단계 줄의 지금 단계: 회색 줄 위의 흰 유리 */
@media screen and (min-width: 761px) {
  .stepbar button.on {
    box-shadow:
      inset 0 1px 0 #ffffff,
      inset 0 0 0 1px var(--line),
      0 6px 16px -10px #1d4ed84d;
  }
}

/* ---------- 총 지급 예정액: 크기·간격(색은 아래 ‘파란 유리판’) ----------
   금액을 가장 크게·진하게(자릿수 맞춤), 라벨·인원은 작게 */
.summary {
  padding: 12px 14px 12px 22px;
  border-radius: 14px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.summarymain {
  align-items: baseline;
  gap: 14px;
}
.summary #summaryMeta {
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  opacity: 1;
  align-self: center;
}
.summarylabel {
  font-size: 14px;
  font-weight: 500;
  opacity: 1;
}
.summary strong {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.summaryside {
  gap: 8px;
}
.summary #print,
.summary #saveHwpx {
  padding: 9px 16px;
  font-weight: 650;
}
/* 휴대폰 아래 총액 막대도 같은 흰 판 */
@media (max-width: 760px) {
  .mobilebar {
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
  }
  #mobileGrand {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
  }
}

/* ---------- 총 지급 예정액: 파란 유리판(앱 강조색, 파란 기능 버튼·대문 색 번짐과 같은 계열) ---------- */
.summary {
  border: 1px solid #1d4ed8;
  background:
    radial-gradient(120% 140% at 0% 0%, #ffffff33 0%, #ffffff00 45%),
    radial-gradient(80% 120% at 100% 100%, #60a5fa66 0%, #60a5fa00 60%),
    linear-gradient(120deg, #1e40af 0%, #2563eb 55%, #3b82f6 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 #ffffff47,
    0 12px 28px -14px #1d4ed8a6;
}
.summary #summaryMeta {
  background: #ffffff26;
  color: #fff;
  box-shadow: inset 0 0 0 1px #ffffff33;
}
.summarylabel {
  color: #dbeafe;
}
.summary strong {
  color: #fff;
  text-shadow: 0 1px 2px #1e3a8a59;
}
/* 주요 동작: 흰 바탕 + 진한 파란 글자 */
.summary #print {
  border-color: #fff !important;
  background: linear-gradient(160deg, #ffffff 0%, #eff6ff 100%) !important;
  color: #1e40af !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 16px -8px #0f172a80;
}
/* 보조 동작: 반투명 흰 유리 + 흰 글자 */
.summary #saveHwpx {
  border-color: #ffffff66 !important;
  background: linear-gradient(160deg, #ffffff38 0%, #ffffff1a 100%) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 #ffffff40;
}
.summary #saveHwpx:hover {
  border-color: #ffffffa6 !important;
  background: linear-gradient(160deg, #ffffff52 0%, #ffffff29 100%) !important;
}
/* 휴대폰 아래 총액 막대도 같은 파란 유리 */
@media (max-width: 760px) {
  .mobilebar {
    border-top: 1px solid #1d4ed8;
    background:
      radial-gradient(120% 160% at 0% 0%, #ffffff2e 0%, #ffffff00 50%),
      linear-gradient(120deg, #1e40af 0%, #2563eb 60%, #3b82f6 100%);
    color: #dbeafe;
    box-shadow: 0 -8px 24px -14px #1d4ed88c;
  }
  #mobileGrand {
    color: #fff;
  }
  .mobilebar button {
    border-color: #fff;
    background: #fff;
    color: #1e40af;
  }
}

/* 대문 로그인: [아이디 저장]·[로그인 상태 유지] */
.landopts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 12px;
}
.landopts label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.landopts input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.landopts small {
  margin-left: 2px;
  color: var(--faint);
  font-size: 12.5px;
}

/* 로그인·가입·비밀번호 찾기 창: 입력이 메일 하나뿐이라 창을 좁게, 아이디 칸은 아이디 길이만큼, 뒤 도메인은 작은 회색 */
#acctDlg[data-mode="login"],
#acctDlg[data-mode="signup"],
#acctDlg[data-mode="reset"] {
  max-width: 460px;
}
#acctDlg .mailrow input {
  flex: 0 1 220px;
  min-width: 0;
}
#acctDlg .mailrow span {
  margin-top: 0;
}
/* 가입·로그인 창: @gitc.or.kr을 입력 글자와 같은 크기로 */
#acctDlg .mailrow span {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

/* 묶음 상자(출장 장소·통행료·식비 등)·출장자 요약 카드: 회색 유리
   흰 바탕이라 뒤가 비치지는 않으므로, 위는 밝고 아래로 옅은 회청색이 도는 판 + 윗면 빛 + 아래 옅은 그림자로 유리 두께감 */
#costFields .group,
#tripFields .group,
.subgroup,
.acct,
.psum {
  border-color: #e2e6ee;
  background: linear-gradient(170deg, #fbfcfe 0%, #f3f5f9 60%, #eef1f6 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 #e6eaf1,
    0 6px 18px -12px #33415559;
}
/* [PDF 저장 / 인쇄] 마우스 올림: 단색으로 바꾸면 그라데이션이 먼저 사라지고 바탕색이 투명→흰색으로 서서히 바뀌는 동안
   뒤의 파란 막대가 비쳐 반짝였음 → 올렸을 때도 그라데이션(조금 더 밝게)으로 */
.summary #print {
  background-color: #fff !important;
}
.summary #print:hover {
  background: linear-gradient(160deg, #ffffff 0%, #f8fbff 100%) #fff !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 8px 20px -8px #0f172a99;
}

/* 4단계 출장자별 경비: 출장자 이름을 크게(여러 명일 때 누구 경비인지 바로 보이게), 왼쪽에 파란 막대로 사람마다 구역 시작 표시 */
.personhead strong[data-exp-name] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.personhead strong[data-exp-name]::before {
  content: "";
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--accent);
}
.personhead:has(strong[data-exp-name]) {
  margin: 4px 0 14px;
}

/* ---------- UI/UX 점검(2026-10-12) 반영: 휴대폰 사용성·접근성 ----------
   1) 휴대폰은 맨 위 머리 줄(제목·파일·로그인, 약 160px)을 고정하지 않음: 고정 머리 줄 + 아래 총액 막대 + [확인하고 다음]이 화면의 1/3을 가리던 문제
   2) 입력 칸을 누르면 [확인하고 다음]·아래 총액 막대에 가리지 않는 위치까지 올라오게
   3) 휴대폰 입력 칸 글자 16px: iPhone에서 칸을 누를 때 화면이 저절로 확대되지 않게
   4) 휴대폰에서 작은 버튼(쪽 넘김·확대/축소·?·창 닫기)의 누르는 자리를 44px로(단계 제목 옆 [?]는 모양은 그대로 두고 누르는 자리만) */
@media (max-width: 760px) {
  header {
    position: static;
  }
  html {
    scroll-padding-top: 16px;
    scroll-padding-bottom: 150px;
  }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
  }
  .pager button,
  .zoomctl button,
  .mobileguide,
  .dlgx {
    min-width: 44px;
    min-height: 44px;
  }
  /* 단계 제목 옆 동그란 [?]: 모양은 22px 그대로, 누르는 자리만 둘레로 넓힘 */
  .stephelp {
    position: relative;
  }
  .stephelp::after {
    content: "";
    position: absolute;
    inset: -11px;
  }
}
/* 글자 링크 [가상 예시로 둘러보기]도 누르는 자리 높이 24px 이상 */
#sample {
  min-height: 28px;
}

/* 유리 효과 정리(2026-10-12): 작성 화면은 바탕이 단색(흰색·회색)이라 버튼·안내 상자의 뒤 흐림(backdrop-filter)이 눈에 보이지 않고
   그리기 부담만 큼 → 작성 화면에서는 흐림만 끔(색·빛·그림자는 그대로라 모양은 같음).
   내용 위에 떠서 뒤로 입력 칸이 지나가는 [이전]·[확인하고 다음], 대문, 팝업, 휴대폰 아래 총액 막대는 그대로 유리 */
body:not(.on-landing) :is(header, .rail, .workspace, .preview) :is(button, .pager, .zoomctl, .loginhint, .featrow):not(.stepnav button) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}