/* 2026-11-05 맨 끝에 사양 옵션 '✏️ 직접 입력' 칸(.spec-free) 6줄 */
/* ===== qm-modal.css — 2026-10-15 core.css 3130줄~끝을 그대로 옮김 (견적 품목 창 .qm-modal 묶음). 불러오는 순서 core-ui.css 바로 뒤, dashboard.css 앞 — 바꾸지 말 것 ===== */
/* ===== 견적 품목 창 (.qm-modal) — 2026-10-09 디자인 정리 =====
   카탈로그 카드 → 접힘 두 줄(표시 정보 수정 / 사양 옵션·기준가) → 판매가·수량 → 원가·마진(접힘) → 합계 고정.
   글자: 16px(창 제목·제품명·합계·기준가 값) / 14px(항목·입력) / 12px(설명·요약·이름표)
   색: 기준표(--ds-*)만 사용. 버튼은 앱 공통 .btn 그대로.
   예전 스펙 줄 규칙에 !important 가 많아 이 창 안에서는 .qm-modal 로 한 단계 높여 덮는다. */
.qm-modal .modal-header h2{font-size:var(--ds-fs-lg);font-weight:500;color:var(--ds-gray-900);}
.qm-modal .qm-body{display:flex;flex-direction:column;gap:var(--ds-sp-4);padding:var(--ds-sp-4);}
.qm-modal .qm-body > *{flex-shrink:0;} /* 내용이 길면 줄어들지 말고 스크롤 */
.qm-modal [hidden]{display:none !important;}
.qm-modal .field-label{font-size:var(--ds-fs-sm);font-weight:400;color:var(--ds-gray-600);margin-bottom:var(--ds-sp-1);}
.qm-modal .field-input{height:40px;font-size:var(--ds-fs-base);color:var(--ds-gray-900);border:var(--ds-line) solid var(--ds-gray-200);border-radius:var(--ds-radius-md);background:#fff;}
.qm-modal .field-input:focus{border-color:var(--ds-primary);outline:none;}
.qm-modal .qm-num{text-align:right;}
.qm-modal .qm-sub{font-size:var(--ds-fs-sm);font-weight:400;color:var(--ds-gray-400);}
.qm-modal .qm-label{font-size:var(--ds-fs-base);color:var(--ds-gray-900);margin-bottom:6px;}
.qm-modal .qm-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-sp-2);}
.qm-modal .qm-note{font-size:var(--ds-fs-sm);color:var(--ds-gray-400);}

/* ① 카탈로그 카드 (읽기 전용) */
.qm-modal .qm-catalog{background:var(--ds-gray-50);border-radius:var(--ds-radius-lg);padding:var(--ds-sp-3) 14px;}
.qm-modal .qm-product-info{padding:0;margin:0;background:none;border:none;}
.qm-modal .qm-product-info .atq-meta{display:flex;gap:6px;font-size:var(--ds-fs-sm);color:var(--ds-gray-400);margin:0;}
.qm-modal .qm-product-info .atq-meta span{background:none;padding:0;font-size:inherit;color:inherit;border:none;}
.qm-modal .qm-product-info .atq-name{font-size:var(--ds-fs-lg);font-weight:500;color:var(--ds-gray-900);line-height:1.4;margin:2px 0 var(--ds-sp-2);}
.qm-modal .qm-product-info .atq-spec{font-size:var(--ds-fs-sm);color:var(--ds-gray-600);line-height:1.7;max-height:calc(1.7em * 4);overflow:hidden;background:none;padding:0;border:none;}
.qm-modal .qm-catalog.expanded .atq-spec{max-height:none;}
.qm-modal .qm-product-info .atq-spec .spec-line{font-size:inherit !important;line-height:1.7 !important;margin:0 !important;padding:0 !important;color:inherit !important;}
.qm-modal .qm-product-info .atq-feature{font-size:var(--ds-fs-sm);color:var(--ds-gray-400);margin-top:var(--ds-sp-1);}
.qm-modal .qm-more-btn{margin-top:var(--ds-sp-1);padding:0;background:none;border:none;font-size:var(--ds-fs-sm);color:var(--ds-primary);cursor:pointer;}

/* ② 접힘 두 줄 (한 상자) */
.qm-modal .qm-folds{border:var(--ds-line) solid var(--ds-gray-200);border-radius:var(--ds-radius-lg);overflow:hidden;}
.qm-modal .qm-fold-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--ds-sp-2);padding:var(--ds-sp-3) 14px;background:#fff;border:none;cursor:pointer;text-align:left;font-size:var(--ds-fs-base);color:var(--ds-gray-900);}
.qm-modal .qm-folds > .qm-fold-head + .qm-fold-body + .qm-fold-head,
.qm-modal .qm-folds > .qm-fold-body + .qm-fold-head{border-top:var(--ds-line) solid var(--ds-gray-200);}
.qm-modal .qm-fold-head.open{background:var(--ds-gray-50);}
.qm-modal .qm-fold-title{font-weight:400;}
.qm-modal .qm-fold-sum{display:flex;align-items:center;gap:6px;font-size:var(--ds-fs-sm);color:var(--ds-gray-600);white-space:nowrap;}
.qm-modal .qm-caret{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--ds-primary-soft);color:var(--ds-primary);font-size:var(--ds-fs-base);line-height:1;padding-bottom:3px;transition:transform .15s;} /* 펼친다는 표시: 아래 화살표 동그라미 */
.qm-modal .qm-fold-head.open .qm-caret{transform:rotate(180deg);padding-bottom:0;padding-top:2px;}
.qm-modal .qm-fold-body{display:flex;flex-direction:column;gap:var(--ds-sp-2);padding:var(--ds-sp-3) 14px 14px;border-top:var(--ds-line) solid var(--ds-gray-200);}
.qm-modal .qm-textarea{height:auto;min-height:96px;padding:var(--ds-sp-2) var(--ds-sp-3);line-height:1.6;resize:vertical;}

/* 사양 옵션 · 기준가: 상자 없이 줄과 선만. 금액은 평소 글자처럼, 누르면 입력칸 */
.qm-modal .qm-spec-body{gap:0;}
.qm-modal .qm-amount{width:120px;height:32px;padding:0 var(--ds-sp-2);text-align:right;font-size:var(--ds-fs-base);color:var(--ds-gray-900);background:transparent;border:var(--ds-line) solid transparent;border-radius:var(--ds-radius-md);outline:none;-moz-appearance:textfield;}
.qm-modal .qm-amount:hover{border-color:var(--ds-gray-200);}
.qm-modal .qm-amount:focus{border-color:var(--ds-primary);background:#fff;}
.qm-modal .qm-amount::-webkit-outer-spin-button,.qm-modal .qm-amount::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.qm-modal .qm-base-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:var(--ds-line) solid var(--ds-gray-200);font-size:var(--ds-fs-base);font-weight:500;color:var(--ds-gray-900);}
.qm-modal .qm-base-row .qm-amount{font-weight:500;}
.qm-modal .spec-dropdown-section{border:none !important;padding:0 !important;margin:0 !important;background:none !important;}
.qm-modal .spec-dd-row{display:grid !important;grid-template-columns:56px minmax(0,1fr) 104px !important;gap:var(--ds-sp-3) !important;align-items:center;padding:6px 0 !important;margin:0 !important;border:none !important;border-bottom:var(--ds-line) solid #f1f5f9 !important;background:none !important;}
.qm-modal .spec-dd-label{min-width:0 !important;width:56px;padding:3px 0;text-align:center;font-size:var(--ds-fs-sm) !important;font-weight:400 !important;color:var(--ds-brand) !important;background:var(--ds-primary-soft);border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qm-modal .spec-dd-row:has(.spec-dd-select option:checked[value=""]) .spec-dd-label{color:var(--ds-gray-400) !important;background:#f1f5f9;}
.qm-modal .spec-dd-row:has(.spec-dd-select option:checked[value=""]) .spec-dd-select{color:var(--ds-gray-400) !important;}
.qm-modal .spec-dd-select{height:32px !important;padding:0 20px 0 0 !important;font-size:var(--ds-fs-base) !important;color:var(--ds-gray-900) !important;border:none !important;border-radius:0 !important;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232E7FC1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center !important;-webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis;}
.qm-modal .spec-dd-price{width:100% !important;height:32px !important;padding:0 var(--ds-sp-2) !important;text-align:right !important;font-size:var(--ds-fs-base) !important;font-weight:400 !important;color:var(--ds-gray-900) !important;background:transparent !important;border:var(--ds-line) solid transparent !important;border-radius:var(--ds-radius-md) !important;-moz-appearance:textfield;}
.qm-modal .spec-dd-price:hover{border-color:var(--ds-gray-200) !important;}
.qm-modal .spec-dd-price:focus{border-color:var(--ds-primary) !important;background:#fff !important;}
.qm-modal .spec-dd-price::-webkit-outer-spin-button,.qm-modal .spec-dd-price::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.qm-modal .qm-ref-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--ds-sp-3);padding:var(--ds-sp-3) var(--ds-sp-2) 0 0;border-top:1.5px solid var(--ds-gray-900);font-size:var(--ds-fs-base);font-weight:500;color:var(--ds-gray-900);}
.qm-modal .qm-ref-row #aq-ref-price{font-size:var(--ds-fs-lg);}

/* ③ 판매가 · 수량 */
.qm-modal .qm-sale{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--ds-sp-3);}
.qm-modal .qm-stepper{display:flex;align-items:center;height:40px;border:var(--ds-line) solid var(--ds-gray-200);border-radius:var(--ds-radius-md);overflow:hidden;background:#fff;}
.qm-modal .qm-stepper button{width:36px;height:100%;border:none;background:#fff;color:var(--ds-gray-600);font-size:var(--ds-fs-lg);cursor:pointer;}
.qm-modal .qm-stepper button:hover{background:var(--ds-gray-50);}
.qm-modal .qm-stepper input{flex:1;min-width:0;height:100%;border:none;text-align:center;font-size:var(--ds-fs-base);color:var(--ds-gray-900);outline:none;background:transparent;-moz-appearance:textfield;}
.qm-modal .qm-stepper input::-webkit-outer-spin-button,.qm-modal .qm-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* ④ 원가 · 마진 (내부용) */
.qm-modal .qm-cost{border:var(--ds-line) dashed #cbd5e1;border-radius:var(--ds-radius-lg);overflow:hidden;}
.qm-modal .qm-cost .qm-fold-head{background:transparent;color:var(--ds-gray-600);}
.qm-modal .qm-cost .qm-fold-head.open{background:var(--ds-gray-50);}
.qm-modal .qm-cost .qm-fold-body{border-top-style:dashed;border-top-color:#cbd5e1;}
.qm-modal .qm-vat{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--ds-sp-1);font-size:var(--ds-fs-sm);color:var(--ds-gray-600);padding-bottom:var(--ds-sp-1);}
.qm-modal .qm-vat label{display:flex;align-items:center;gap:6px;cursor:pointer;}
.qm-modal .qm-margin-hint{text-align:right;min-height:16px;font-size:var(--ds-fs-sm);}

/* ⑤ 합계 + 버튼 (아래 고정) */
.qm-modal .qm-footer{flex-direction:column !important;align-items:stretch !important;gap:var(--ds-sp-3) !important;padding:var(--ds-sp-3) var(--ds-sp-4) !important;background:#fff;}
.qm-modal .qm-total{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--ds-fs-base);color:var(--ds-gray-600);}
.qm-modal .qm-total-val{font-size:var(--ds-fs-lg);font-weight:500;color:var(--ds-gray-900);}
.qm-modal .qm-actions{display:flex;gap:var(--ds-sp-2);}
.qm-modal .qm-actions .btn{flex:1 !important;justify-content:center;height:40px;padding:0 var(--ds-sp-3) !important;font-size:var(--ds-fs-base) !important;border-radius:var(--ds-radius-md);}
.qm-modal .qm-actions .btn-primary{flex:2 !important;}
/* 직접 입력 창의 제품 정보 칸 묶음 */
.qm-modal .qm-fields{display:flex;flex-direction:column;gap:var(--ds-sp-2);}
.qm-modal .qm-fold-group > .qm-fold-head{border-top:var(--ds-line) solid var(--ds-gray-200);}
.qm-modal .spec-dd-header{display:none !important;}
/* 렌탈 카탈로그 카드: 렌탈 전용 색 클래스 덮기, 사양 글 줄바꿈 유지 */
.qm-modal .qm-product-info .atq-name{color:var(--ds-gray-900) !important;}
.qm-modal .qm-product-info .atq-meta,.qm-modal .qm-product-info .atq-meta *{color:var(--ds-gray-400) !important;font-weight:400 !important;}
.qm-modal .qm-product-info .atq-spec{white-space:pre-line;}
/* 주요 항목 묶음 상자 (.qm-group): 제목 줄 + "왼쪽 이름 / 오른쪽 입력" 줄 — 2026-10-09 */
.qm-modal .qm-group{border:var(--ds-line) solid var(--ds-gray-200);border-radius:var(--ds-radius-lg);overflow:hidden;background:#fff;}
.qm-modal .qm-group-title{padding:var(--ds-sp-3) 14px;font-size:var(--ds-fs-base);color:var(--ds-gray-900);border-bottom:var(--ds-line) solid var(--ds-gray-200);}
.qm-modal .qm-group-body{display:flex;flex-direction:column;gap:var(--ds-sp-2);padding:var(--ds-sp-3) 14px 14px;}
.qm-modal .qm-row{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-sp-3);padding:10px 14px;}
.qm-modal .qm-row + .qm-row{border-top:var(--ds-line) solid #f1f5f9;}
.qm-modal .qm-row-label{font-size:var(--ds-fs-base);color:var(--ds-gray-600);white-space:nowrap;}
.qm-modal .qm-ctl{width:198px !important;flex:0 0 198px;height:36px !important;}
.qm-modal .qm-money-wrap:has(> .qm-ctl){flex:0 0 198px;width:198px;}
.qm-modal #r-atq-unit-label .label-muted{display:none;}
/* 모바일: 품목 창은 모두 아래에서 올라오는 모양 (구매 카탈로그 창과 같게) */
@media screen and (max-width: 600px) {
  .modal-overlay.open:has(> .qm-modal){align-items:flex-end !important;padding:0 !important;}
}
/* 전환 버튼 (일 / 월 / 직접 입력) — 테두리 하나에 붙은 칸, 고른 칸만 파랑. 칸 넓이 같게 */
.qm-modal .qm-seg{display:grid;gap:0;padding:0;background:#fff;border:var(--ds-line) solid var(--ds-primary) !important;border-radius:var(--ds-radius-md);overflow:hidden;}
.qm-modal .qm-seg-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.qm-modal .qm-seg-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.qm-modal .qm-seg-btn{height:100%;padding:0 !important;min-width:0 !important;flex:none !important;letter-spacing:0;font-size:var(--ds-fs-md) !important;font-weight:400;color:var(--ds-primary) !important;background:transparent !important;border:none !important;border-radius:0 !important;cursor:pointer;white-space:nowrap;box-shadow:none !important;}
.qm-modal .qm-seg-btn + .qm-seg-btn{border-left:var(--ds-line) solid var(--ds-primary) !important;}
.qm-modal .qm-seg-btn.active{background:var(--ds-primary) !important;color:#ffffff !important;font-weight:500;}
/* 숫자 −/+ 칸: 값과 단위("5일")를 가운데에 붙여 보여 줌 */
.qm-modal .qm-stepper.qm-ctl input{text-align:center;}
.qm-modal .qm-stepper.qm-ctl input.qm-has-suffix{text-align:right;padding-right:2px;}
.qm-modal .qm-suffix{flex:1;min-width:0;text-align:left;font-size:var(--ds-fs-base);color:var(--ds-gray-900);white-space:nowrap;}
.qm-modal .label-muted{font-size:var(--ds-fs-sm);color:var(--ds-gray-400);font-weight:400;}

/* 금액 칸 쉼표 표시: 평소엔 겹친 글자(.qm-money-view), 누르면 원래 숫자 칸 */
.qm-modal .qm-money-wrap{position:relative;display:block;}
.qm-modal .qm-base-row .qm-money-wrap{display:inline-block;}
.qm-modal .qm-money-wrap > input:not(:focus){color:transparent !important;}
.qm-modal .qm-money-view{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;color:var(--ds-gray-900);pointer-events:none;white-space:nowrap;overflow:hidden;}
.qm-modal .qm-money-wrap > input:focus + .qm-money-view{display:none;}
@media screen and (max-width: 600px) {
  .qm-modal{width:100vw !important;max-width:100vw !important;max-height:92dvh !important;border-radius:16px 16px 0 0 !important;}
}
/* 2026-11-05 사양 옵션 '✏️ 직접 입력' 글 쓰는 칸(.spec-free — 목록 자리에 들어감, ✕ = 다시 목록) · 직접입력 창 사양 옵션 묶음(#mi-spec-fold) */
.qm-modal .spec-free{display:flex;align-items:center;gap:4px;min-width:0;}
.qm-modal .spec-free[hidden]{display:none;}
.qm-modal .spec-free input{flex:1;min-width:0;height:32px;box-sizing:border-box;padding:0 8px;font-size:var(--ds-fs-base);color:var(--ds-gray-900);border:var(--ds-line) solid var(--ds-primary);border-radius:var(--ds-radius-md);background:#fff;font-family:inherit;outline:none;}
.qm-modal .spec-free button{flex:none;width:24px;height:24px;padding:0;border:none;border-radius:50%;background:#f1f5f9;color:var(--ds-gray-600);font-size:12px;line-height:24px;cursor:pointer;}
.qm-modal .spec-free button:hover{background:var(--ds-gray-200);}