/* 방식 카드는 4개(빠른·상세·여러건·상담)라 4칸으로 맞춘다(사용자 지시 2026-09-26). 5칸이면 오른쪽이 빈다. */
.qom-method-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Added jobs: title, variable specifications, files and price. Optional details expand only on demand. */
.qm-compact{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:.75rem;padding:1.25rem}
.qm-compact-title{display:flex;align-items:center;gap:.75rem}.qm-compact-title>input[name=title]{flex:1;min-width:0;border:1px solid #dce3ef;border-radius:.5rem;background:#fff}.qm-compact-title>.qm-number{align-self:center;padding:0}.qm-compact-title>.qom-btn{border:0;padding-inline:.5rem;color:#526079}
.qm-compact-controls{display:flex;align-items:center;gap:.75rem}.qm-variant-slot{flex:1;min-width:0}.qm-variant-row{display:flex;gap:.75rem;align-items:center}.qm-compact .qm-variant-row .qom-field{display:flex;flex-direction:row;align-items:center;gap:.5rem;margin:0;flex:1;min-width:0;white-space:nowrap}.qm-variant-row input,.qm-variant-row select{width:100%;min-width:0}.qm-attach{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;min-height:3rem;padding:.5rem .875rem;border:1px solid #c8d6ed;border-radius:.5rem;color:#2456df;cursor:pointer;background:#f7faff;overflow:hidden}.qm-attach input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.qm-attach:focus-within{outline:3px solid #90b3f5;outline-offset:2px}
.qm-compact-bottom{display:flex;align-items:center;gap:.875rem;min-width:0}.qm-file-summary{flex:1;min-width:0}.qm-compact .qm-files{margin:0}.qm-compact .qm-files li{padding:0;border:0;min-height:2.75rem}.qm-compact .qm-files span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qm-compact .qm-files button{min-height:2.75rem}.qm-compact .qm-item-estimate{margin:0;padding:0;border:0;flex-shrink:0}.qm-compact .qm-upload-status{margin:0;color:#dc2626;font-weight:700}.qm-compact .qm-upload-status:empty{display:none}.qm-compact-bottom>.qom-btn{padding-inline:1rem}
.qm-extra{font-size:var(--text-helper);color:#526079}.qm-extra>summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center;justify-content:flex-end}.qm-extra[open]>summary{justify-content:flex-start}.qm-compact .qm-extra{margin-top:-.5rem}.qm-insert-slot:empty{display:none}.qm-insert-detail{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:1rem;padding:1rem;background:#f7f9fd;border-radius:.5rem}.qm-compact .qm-insert-detail .qom-field{margin:0}.qm-compact .qm-editor-error{margin:0}
@media(max-width:74rem) and (min-width:58.001rem){.qm-compact-controls{flex-wrap:wrap}.qm-variant-row .qom-field{flex-direction:column!important;align-items:stretch!important}}
@media(max-width:47.999rem){.qm-compact{padding:1rem}.qm-compact-controls{flex-wrap:wrap}.qm-variant-slot{flex-basis:100%}.qm-variant-row{flex-wrap:wrap}.qm-compact .qm-variant-row .qom-field{flex-basis:calc(50% - .75rem)}.qm-attach{width:100%}.qm-compact-bottom{flex-wrap:wrap}.qm-file-summary{flex-basis:100%}.qm-compact .qm-item-estimate{flex:1}.qm-insert-detail{grid-template-columns:1fr}.qm-compact-title{gap:.375rem}.qm-compact .qm-extra>summary{justify-content:flex-start}}
/* 화면 틀·오른쪽 견적 카드는 상세 사양 주문(#concept-3)의 .qom-layout · #qom-quote-slot · .qom-quote 를 그대로 쓴다. */
.qm-items{margin:0 0 1.5rem}.qm-items>header h2{margin:0}
.qm-current{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-top:1px solid #e2e8f2;margin-top:1.25rem;padding-top:1rem;font-size:var(--text-label);color:var(--text-muted)}.qm-current strong{color:var(--text-ink);white-space:nowrap}.qm-current+.qom-total{margin-top:.75rem}
.qm-editor-heading{margin:1.5rem 0}.qm-editor-heading>span{color:#2456df;font-size:var(--text-label);font-weight:600}.qm-editor-heading h2{margin:.375rem 0;font-size:var(--text-product);font-weight:500;color:#52627b}
.qm-items>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.25rem}.qm-items>header>span{font-size:var(--text-helper);white-space:nowrap;color:#2456df}
.qm-item{display:flex;gap:1.25rem;align-items:center;padding:1.5rem;background:#fff;border:1px solid #dce3ef;border-radius:1rem;margin-bottom:.75rem}.qm-item.is-editing{border-color:#2456df;background:#f6f9ff}.qm-number{color:#8b9ab0;align-self:flex-start;font-size:var(--text-label);padding-top:.2rem}.qm-item-info{flex:1;min-width:0}.qm-item h2{font-size:var(--text-product);margin:0 0 .5rem;overflow-wrap:anywhere}.qm-item p{color:#52627b;margin:0 0 .25rem}.qm-item small{color:#728098;font-size:var(--text-helper)}.qm-item-end{text-align:right;flex-shrink:0}.qm-item-end strong{font-size:var(--text-price)}.qm-item-end>div{display:flex;justify-content:flex-end;gap:1rem;margin-top:.5rem}.qm-item-end button,.qm-files button{border:0;background:none;color:#52627b;font-size:var(--text-label);padding:.4rem 0}
.qm-add{margin:1rem 0 2rem}.qm-add .qom-btn{width:100%;border-style:dashed;background:#fff;min-height:3.75rem;color:#2456df}
.qm-editor .qom-field{margin-top:1.25rem}.qm-check{display:flex;align-items:flex-start;gap:.625rem;margin:1rem 0;font-size:var(--text-label);color:#52627b}.qm-check input{width:1.125rem;height:1.125rem;accent-color:#2456df;margin:.2rem 0;flex-shrink:0}
.qm-upload{display:flex;flex-direction:column;gap:1rem;padding:1.25rem;border:1px dashed #b4c4df;border-radius:.75rem;background:#f8faff;margin-top:1.5rem}.qm-upload span{font-weight:600}.qm-upload small{display:block;color:#728098;font-weight:400;font-size:var(--text-helper);margin-top:.25rem}.qm-upload input{max-width:100%;font-size:var(--text-label)}.qm-upload input::file-selector-button{font:inherit;border:1px solid #ccd7e7;border-radius:.5rem;background:#fff;color:#2456df;padding:.65rem 1rem;margin-right:.75rem}.qm-files{list-style:none;margin:.75rem 0;padding:0}.qm-files li{display:flex;align-items:center;gap:1rem;padding:.65rem 0;border-bottom:1px solid #edf0f6;font-size:var(--text-label)}.qm-files span{flex:1;overflow-wrap:anywhere;min-width:0}.qm-files button{flex-shrink:0}.qm-optional{display:inline;color:#8995a8;font-size:var(--text-helper)}
.qm-item-estimate{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid #e1e7f0;margin-top:1.5rem;padding-top:1.5rem}.qm-item-estimate small{display:block;color:#728098;font-size:var(--text-helper);margin-top:.3rem}.qm-item-estimate strong{font-size:var(--text-price);white-space:nowrap}.qm-editor-error{color:#b42318;font-size:var(--text-helper);overflow-wrap:anywhere}.qm-editor-error:empty{display:none}
@media(max-width:74rem){.qom-method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:24rem){.quick-order-page .pv-shell-footer-grid{grid-template-columns:1fr}}
@media(max-width:47.999rem){.qom-method-grid{grid-template-columns:1fr}.qm-item{padding:1rem;gap:.75rem;flex-wrap:wrap}.qm-item-end{width:100%;display:flex;align-items:center;justify-content:space-between;padding-left:1.75rem}.qm-item-end>div{margin:0}.qm-items>header{align-items:flex-start}.qm-item-estimate{align-items:flex-start;flex-direction:column}.qm-editor-heading h2{line-height:1.6}}
.qm-compact .qm-extra{position:relative;margin:0;flex-shrink:0}.qm-compact .qm-extra>summary{width:2.75rem;min-height:3rem;justify-content:center;font-size:1.5rem;border-radius:.5rem;list-style:none}.qm-extra>summary::-webkit-details-marker{display:none}.qm-extra>summary:hover{background:#edf3ff}.qm-extra-body{position:absolute;right:0;top:100%;z-index:10;width:min(24rem,calc(100vw - 5rem));padding:1rem;background:#fff;border:1px solid #d9e3f4;border-radius:.75rem;box-shadow:0 8px 24px #172c4d1a}.qm-extra-body .qom-field{margin-top:.75rem}.qm-compact .qm-editor-error:empty{display:none}
/* Shared specifications directly below the page title, grouped in two quiet rows. */
.qm-common-overview{margin:0;padding:1rem 1.25rem;background:#f7f9fd;border:1px solid #e5ebf5;border-radius:.75rem;color:#26364e}.qm-common-overview dl{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0}.qm-common-overview dl+dl{margin-top:.625rem;padding-top:.625rem;border-top:1px solid #e5ebf5}.qm-common-overview dl>div{display:flex;align-items:baseline;gap:.5rem;min-width:0}.qm-common-overview dt{color:#728096;font-size:var(--text-helper);white-space:nowrap}.qm-common-overview dd{margin:0;font-size:var(--text-helper);font-weight:500;overflow-wrap:anywhere}@media(max-width:47.999rem){.qm-common-overview{padding:.875rem 1rem}.qm-common-overview dl{gap:.5rem 1rem}}
/* 2026-09-26 사용자 지시: 업로드 중 안내는 빨간 글씨, '개별 주문 추가' 단추는 가로로 넓게,
   주문서 작성 단추를 감싼 span(1건일 때 마우스 오버 안내), 파일이 없을 때 '파일명을 제목으로 사용'은 흐리게. */
.qm-upload-status{color:#dc2626;font-weight:700}
/* 업로드 완료 표시(단건 주문서 assets/checkout-address.css 의 .pv-upload-done · .pv-upload-finished 와 같은 색). */
.qm-upload-done{display:inline-block;flex-shrink:0;padding:2px 9px;border-radius:4px;background:#2456df;color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.qm-upload-status.is-finished,.qm-compact .qm-upload-status.is-finished{color:#2456df}
.qm-editor [data-multi="save"]{min-width:11rem;padding-inline:1.5rem}
.qm-editor .qom-actions [data-multi="save"]{width:100%}
.qm-checkout-wrap{display:block}
.qm-checkout-wrap .qom-btn{width:100%;margin:.5rem 0 0}
.qm-checkout-wrap .qom-btn:disabled{pointer-events:none}
.qm-title-from-file.is-disabled{opacity:.5;cursor:not-allowed}
/* 주문서 작성 단추의 두 줄 풍선(1건일 때, 사용자 지시 2026-09-26). 브라우저 기본 title 대신 직접 그린다. */
.qm-checkout-wrap{position:relative}
.qm-checkout-wrap[data-tip]::after{content:attr(data-tip);white-space:pre-line;position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);width:max-content;max-width:min(20rem,calc(100vw - 2rem));padding:.625rem .875rem;border-radius:.5rem;background:#17233b;color:#fff;font-size:.8125rem;line-height:1.55;text-align:left;box-shadow:0 8px 24px #17233b33;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s,visibility .15s;z-index:20}
.qm-checkout-wrap[data-tip]::before{content:'';position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(-50%,4px);border:6px solid transparent;border-top-color:#17233b;border-bottom:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s,visibility .15s;z-index:20}
.qm-checkout-wrap[data-tip]:hover::after,.qm-checkout-wrap[data-tip]:hover::before{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.qm-checkout-wrap[data-tip]::after,.qm-checkout-wrap[data-tip]::before{transition:none}}
/* '개별 주문 추가'로 여는 입력칸은 테두리·배경·머리표로 목록과 구분한다(사용자 지시 2026-09-26). */
#qm-editor-slot .qm-editor.qm-compact{border:2px solid #2456df;background:#f3f7ff;box-shadow:0 0 0 4px #2456df14;border-radius:1rem}
#qm-editor-slot .qm-editor.qm-compact::before{justify-self:start;padding:.25rem .75rem;border-radius:999px;background:#2456df;color:#fff;font-size:.8125rem;font-weight:700;line-height:1.5}
#qm-editor-slot .qm-editor.qm-compact.qm-adding::before{content:'새 개별 주문 추가'}
#qm-editor-slot .qm-editor.qm-compact.qm-editing::before{content:'개별 주문 수정';background:#526079}
#qm-editor-slot .qm-editor.qm-compact.qm-editing{border-color:#526079;background:#f7f8fb;box-shadow:none}
#qm-editor-slot .qm-editor.qm-compact input:not([type=checkbox]):not([type=file]),#qm-editor-slot .qm-editor.qm-compact select,#qm-editor-slot .qm-editor.qm-compact textarea{background:#fff}
/* 개별 주문 추가 칸의 파일 첨부: 아래쪽에 크게, 끌어다 놓기 안내와 함께(사용자 지시 2026-09-26). */
.qm-attach.qm-dropzone{flex-direction:column;gap:.25rem;width:100%;min-height:5.5rem;padding:1rem 1.25rem;border:2px dashed #9fb6e6;border-radius:.75rem;background:#fff;text-align:center;transition:border-color .15s,background .15s}
.qm-dropzone strong{font-size:var(--text-body);color:#2456df}
.qm-dropzone span{font-size:var(--text-helper);color:#526079}
.qm-dropzone:hover{border-color:#2456df;background:#f7faff}
.qm-dropzone.is-dragover,.qm-upload.is-dragover{border-color:#2456df;border-style:solid;background:#eaf0ff}
/* 첫 항목 입력칸(.qm-upload)의 끌어다 놓기 안내(사용자 지시 2026-09-26). */
.qm-upload .qm-drop-hint{display:block;margin-top:.375rem;font-style:normal;font-weight:700;color:#2456df;font-size:var(--text-helper)}