@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

body,html {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 15px;
  /*font-size: 0.92rem;*/
}


:root{
  --gap: clamp(12px, 50px, 50px);
  --col: minmax(0, 1fr);
  --radius: 14px;
  --card-pad: 16px;
  --muted: #6b7280;
  --line: #dee2e6;
  --input-h: 44px;
  --wrap-max: 1280px;
}

a {
  text-decoration: none; color: inherit;
}

a:hover{
  text-decoration: none; color: inherit;
}

ul {
  padding:0;
  margin:0;
  list-style: none;
}

ul li {
  padding:0;
  margin:0;
  list-style: none;
}



input[readonly] {
  background-color: #f1f1f1;
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
select:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active {
  outline: 0px !important;
  -webkit-appearance: none;
  box-shadow: none !important;
}

/* 페이지 3영역 레이아웃 */
.order-page {
  display: grid;
  gap: 0;
  grid-template-areas:
    "title"
    "preview"
    "form"
    "invoice";
  grid-template-columns: 1fr;
  align-items: start;
  padding-inline: clamp(12px,4vw,40px);
  max-width: var(--wrap-max);
  margin: 0 auto;
}

/* 반응형: 태블릿/데스크탑에서 2~3열 배치 */
@media (min-width:900px) {
  .order-page {
    grid-template-areas:
      "title   title"
      "preview form"
      "invoice invoice";
    grid-template-columns: 1.2fr 1.6fr;
    column-gap: var(--gap);
    row-gap: 0;
  }
}

@media (min-width:1200px) {
  .order-page{
    grid-template-areas:
      "title   title   invoice"
      "preview form    invoice";
    grid-template-columns: 400px 1fr 210px;   /* 가운데는 1fr 권장 */
    grid-template-rows: auto 1fr;            /* 상단 타이틀 높이(auto) + 본문(1fr) */
    column-gap: var(--gap);
    row-gap: 0;
  }
}

.guide-body img {
  width: 100%;
}

.title {
  grid-area: title; font-size: clamp(22px,3vw,32px); font-weight: 600;
}

.preview {
  grid-area: preview; height:0; visibility: hidden;
}

@media (min-width:900px) {
  .preview {
    grid-area: preview; height: auto; visibility: visible;
  }

  .preview img {
    width: 100%; height: auto; display: block; border-radius: var(--radius);
  }


  .preview-box-wrap {
    position: relative; min-height: 400px;
  }

  .preview-wrapper {
    width: 400px;
    height: 400px;
    background-color: #e7e7e7;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  }

  .preview-inner {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .preview-box {
    position: absolute;
    background: #fff;
  }


  .preview-actions {
    display: grid; gap: 10px; margin-top: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}







/* 요약(사이드바) */
.invoice {
  grid-area: invoice;
  background-color: #fff;
}


/* 반응형: 태블릿/데스크탑에서 2~3열 배치 */
@media (min-width:900px) {
  .invoice {
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    min-height: 100vh;
  }
}

@media (min-width:1200px) {

}




.invoice-wrap {
  position: relative; top:0;
  /*padding:var(--card-pad);*/
}

@media (min-width:1200px) {
  .invoice { position: sticky; top: 0; }
}

.invoice-head {
  text-align: center; font-size: 1.1em;
  /*display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; margin-bottom:12px;*/
}

hr {
  border: none;
  border-top: 1px solid #dfdfdf;
  margin: 0.5em 0;
  opacity: 1;
}

dt {
  font-weight: normal;
}

.fp-big {
  font-size: 2em; color: #e8494e;
}



.invoice .price-list {
}

@media (min-width:900px) {
  .invoice .price-list {
    margin: 10px 0; padding-inline: 16px;
    min-height: calc(100vh - 540px);
  }
}


.invoice .price-list > div {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
}

.invoice .price-list dt {

}

.invoice .price-list dd {
  margin: 0;
}

.invoice .price-list .sub dt, .price-list .sub dd {
  /*color:var(--muted);*/
}

.invoice .price-list .total {
  color: #dc2626;
}

.invoice .price-list .total dt {
  /*font-weight:700;*/
}
.invoice .price-list .total dd {
  /*font-weight:800; */
}


.invoice .actions {
}

@media (min-width:900px) {
  .invoice .actions {
    /*display:grid; gap:10px; */
    display: grid; gap: 0;
    background-color: #f4f4f4;
    padding-bottom: 200px;
  }
}


.btn, .btn-outline, .btn-primary {
  /*padding: 5px 0; border-radius: 4px; border: 1px solid var(--line); background: #f9fafb; cursor: pointer;*/
}

.custom-check-box {
  padding: 5px 0; border-radius: 4px; border: 1px solid var(--line); background: #f9fafb; cursor: pointer;
}

.custom-check-box.active {
  background-color: #d1d1d1; color: #fff;
}

.invoice .btn-cart {
  border:none; padding: 12px 0; background: #d1d1d1; cursor: pointer;
}

.invoice .btn-submit {
  border: none; padding: 12px 0; background: #e8494e; color: #fff; cursor: pointer;
}


.btn-bg {
  padding: 0 10px; border-radius: 4px; border: 1px solid var(--line); background: #f0f0f0; cursor: pointer; font-size: 0.9em;
}

.btn:hover, .custom-check-box:hover {
  background-color: #d1d1d1; color: #fff;
}

.btn-outline {
  background: #fff;
}

.btn-primary {
  background: #ef4444; color: #fff; border-color: #ef4444;
}

.full {
  width: 100%;
}

.blue {
  color: #1a66ea !important;
}

.note {
  color: var(--muted); font-size: .8rem; margin: 6px 0 0;
}

/* 폼 영역 */
.form {
  grid-area: form;
  display: grid; gap: 20px;
}

/* 공통 필드: 라벨 + 컨트롤(2열) */
.field {
  display: grid; gap: 10px; align-items: center;
  grid-template-columns: 100px 1fr; /* 라벨, 컨트롤 */
}

.field label {
  /*color:#111827; */
  font-weight: 500;
}

.input, select, input[type="text"], input[type="number"] {
  /*
  width:100%; padding: .375rem 2.25rem .375rem .75rem;
  border:1px solid var(--line); border-radius:4px; background:#fff;
  */
}

/* 좁아지면 라벨 위/컨트롤 아래 */
@media (max-width:520px) {
  .field {
    grid-template-columns: 1fr;
  }
}

/* 유틸 그리드 */
.pair {
  display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0,1fr));
}

.pair1-2-auto {
  display: grid; gap: 20px; grid-template-columns: 1fr minmax(0,1.8fr) auto; align-items: center;
}

.triple {
  display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0,1fr));
}

.triple1-2 {
  display: grid; gap: 20px; grid-template-columns: 1fr minmax(0,1.5fr);
}


.wh {
  display: grid; gap: 8px; align-items: center; grid-template-columns: auto 1fr auto 1fr;
}

.wh span {
  color: var(--muted); white-space: nowrap;
}

/* 수량/매/종류 (요청하신 형태) */
.field-qty {
  display: grid; gap: 8px; align-items: center;
  grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr);
}

.field-qty label {
  font-weight: 600;
}

.field-qty .unit {
  white-space: nowrap; color: #111827;
}

.form-with-txt {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
}




.guide {
  grid-column: span 2;
}

.guide .guide-tab {
  display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid #d1d1d1; border-left:none; border-right: none; margin-bottom: 50px;
}

.guide .guide-tab .item {
  display: flex; align-items: center; justify-content: center; min-height: 46px;
}

.guide .guide-tab .item.active {
  border-bottom: 1px solid #1a66ea;
}


/* 업로드 레이어*/
#upload-layer-modal[hidden] {
  display: none!important;
}

:root {
  --panel-w: 662px;
  --panel-h: 540px;
  --radius: 14px;
}

@media (min-width:900px) {
  :root {
    --panel-h: 600px;
  }
}

.body--lock{ overflow:hidden; }

/* 레이어 */
.layer{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
.layer__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.52);
  /* 선택: 더 스윗알럿 느낌
  backdrop-filter:saturate(160%) blur(2px);
  */
}
.layer__panel {
  position:relative; z-index:1;
  width:var(--panel-w); height:var(--panel-h);
  max-width:calc(100vw - 32px); max-height:calc(100vh - 32px);
  background:#fff; border-radius:var(--radius);
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  overflow: hidden;
  /* 등장 애니메이션 */
  transform:scale(.98); opacity:0;
  transition:transform .18s ease, opacity .18s ease;
  scrollbar-width: thin;
}
.layer.is-open .layer__panel{ transform:scale(1); opacity:1; }

.layer__close{
  position:absolute; right:12px; top:10px;
  width:32px; height:32px; padding:0; border:0; cursor:pointer;
  background:transparent; font-size:24px; line-height:32px;
}
.layer__close:focus-visible{ outline:2px solid #2563eb; border-radius:8px; }

.layer__title{ margin:18px 16px 8px; font-size:18px; font-weight:600; }
.layer__body{ padding:0 16px 16px; color:#374151; }

.dm-uploader .drag-area {
  position: relative;
  border: 1px solid #d1d1d1;
}

@media (min-width:900px) {
  .dm-uploader .drag-area {
    min-height: 160px;
  }
}


.dm-uploader .drag-area .drag-area-wrap {
  width:500px; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); display: none;
}

@media (min-width:900px) {
  .dm-uploader .drag-area .drag-area-wrap {
    display: block;
  }
}



.dm-uploader .upload-button {
  display:grid; grid-template-columns: auto 1fr; align-items: center; justify-content: start; background-color: #d1d1d1; gap: 10px; padding:10px; margin-bottom: 10px;
}


.dm-uploader .upload-button > button {
  border:none; background-color: #0d0d0d; color:#fff; text-align:center; padding:2px 20px; border-radius:4px;
}

.dm-uploader .upload-button > .uploader-progress-wrap {
  border:1px solid #aaa;
}

.dm-uploader #uploader-progress-bar {
  height:20px; background-color: #1279bd; width: 0%;
}


.dm-uploader .btn-select {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.dm-uploader .btn-select input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: solid transparent;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}


#upload-layer-modal .sub-contents {
  display: grid; grid-template-columns: 1fr; gap:10px; margin-bottom: 10px;
}
@media (min-width:900px) {
  #upload-layer-modal .sub-contents {
    grid-template-columns: 1fr 1fr;
  }
}

#upload-layer-modal .sub-contents-btn {
  display: grid; grid-template-columns: 1fr 1fr; gap:10px;
}


#upload-layer-modal .sub-contents .customer-memo {
  width:100%; height:120px; border: none; background-color: #f4f4f4;
}

#upload-layer-modal .spec-header {
  background-color: #f1f1f1; padding: 6px 12px; margin-bottom: 8px;
}

#upload-layer-modal .attach-files label {
  min-width: 110px;
}

#upload-layer-modal .attach-files .attach-header {
  padding: 6px 0; margin-bottom: 2px;
}

#upload-layer-modal .attach-files #files {
  padding: 8px;
  display: grid; grid-template-columns: 1fr; gap: 8px;
  border:1px solid #ced4da; height:50px; overflow-y:auto;
}
@media (min-width:900px) {
  #upload-layer-modal .attach-files label {
    grid-template-columns: 1fr 1fr;
  }
}



#upload-layer-modal .attach-files label {
  display: none;
}
@media (min-width:900px) {
  #upload-layer-modal .attach-files label {
    display: block;
  }
}




#upload-layer-modal .sub-contents-btn .cancel-btn {
  width:100%; border:none; background-color:#d1d1d1; text-align: center; padding:12px 0;
}

#upload-layer-modal .sub-contents-btn .ok-btn {
  width:100%; border:none; background-color:#e8494e; text-align: center; padding:12px 0; color: #fff;
}



/* 인풋 전체 위에서 손가락 커서 */
input[type="file"] { cursor: pointer; }

/* 버튼 위에서 손가락 커서 (표준) */
input[type="file"]::file-selector-button { cursor: pointer; }

/* 웹킷 계열(사파리 구버전 등) */
input[type="file"]::-webkit-file-upload-button { cursor: pointer; }