.app-version{font-size:11px;color:#94a3b8;margin-top:4px}
.product-search{margin:12px 0 6px}
.product-search input{width:100%;min-height:48px;border:1px solid #cbd5e1;border-radius:12px;padding:12px 14px;font-size:16px}

/* V0.1.3 final UX polish */
:root{
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow-md:0 10px 30px rgba(15,23,42,.08);
  --focus:0 0 0 3px rgba(36,91,145,.16);
}
button{transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease,border-color .12s ease}
button:not(:disabled):active{transform:translateY(1px)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{
  outline:3px solid rgba(36,91,145,.22);outline-offset:2px
}
.shell{box-shadow:0 0 0 1px rgba(15,23,42,.03),var(--shadow-md)}
.topbar{box-shadow:0 1px 10px rgba(15,23,42,.04)}
.card{box-shadow:var(--shadow-sm)}
.card h2{display:flex;align-items:center;gap:8px}
.card h2:before{
  content:"";width:5px;height:20px;border-radius:999px;background:var(--brand);display:inline-block
}
.product{transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
/* 담긴 품목은 왼쪽 주황 막대로 한눈에 표시(2026-09-22 오너 지시 — 추가·삭제가 편하게).
   inset 그림자라 레이아웃을 밀지 않는다. */
.product.selected{box-shadow:inset 4px 0 0 #e8842c}
/* 스테퍼는 위 .qty 기본 규칙(3D와 통일된 알약)을 그대로 쓴다 — 폭·스핀을 여기서
   다시 정의하지 않는다. 예전엔 이 자리의 width:58px·opacity:1 이 알약과 싸워
   스핀 화살표가 다시 보였다(2026-09-15 통일하며 걷어냄). */
.qty button{flex:none}
.qty .qty-input{width:var(--qstep-num-w)}
.qty .qty-input::-webkit-inner-spin-button,.qty .qty-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;display:none}
.empty-product{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:120px;border:1px dashed #cbd5e1;border-radius:14px;background:#f8fafc;color:#64748b
}
.empty-product b{color:#334155}
/* 입력 오류 안내는 화면 맨 위에 띠로 붙인다(2026-08-14 오너 지시 — "맨위에
   떠서 화면을 가리지 않게 하자. 어중간하게 뜬다"). 예전엔 흐름 안에
   sticky로 두고 showFormError_가 화면 한가운데로 스크롤해 버려서, 정작
   고쳐야 할 입력칸을 가린 채 어중간한 높이에 떴다. 이제 흐름에서 빼내
   상단에 고정하고(레이아웃도 안 밀린다), 스크롤은 문제의 입력칸 쪽으로
   보낸다. */
.form-error{
  display:none;position:fixed;top:0;left:0;right:0;z-index:60;
  border:0;border-bottom:3px solid #ef4444;background:#fff1f1;color:#991b1b;
  border-radius:0;padding:calc(11px + env(safe-area-inset-top)) 14px 11px;
  font-weight:800;font-size:14px;text-align:center;
  box-shadow:0 6px 18px rgba(15,23,42,.14)
}
.form-error.show{display:block}
.input-error{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.10)!important}
.bottom{box-shadow:0 -8px 24px rgba(15,23,42,.08)}
.bottom .primary{box-shadow:0 6px 16px rgba(233,120,33,.22)}
.primary:not(:disabled):hover{filter:brightness(.98)}
.product-search{position:relative;margin-bottom:10px}
.product-search:before{
  content:"⌕";position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:#64748b;font-size:19px;pointer-events:none
}
.product-search input{
  width:100%;min-height:48px;border:1px solid #cbd5e1;border-radius:12px;
  padding:11px 12px 11px 40px;font-size:15px
}
.segment{scrollbar-width:none}.segment::-webkit-scrollbar{display:none}
.app-version{margin-top:6px;font-size:11px;color:#94a3b8}

@media(max-width:520px){
  .content{padding:13px 12px 112px}
  .topbar{padding:18px 15px 14px}
  .brand{font-size:21px}
  .card{padding:15px;border-radius:15px}
  .product{padding:8px 12px}
  .p-name{font-size:16px}
  .qty-input{width:52px}
  .bottom-inner{gap:8px}
  .bottom{padding-left:12px;padding-right:12px}
  .bottom .primary{min-width:125px;padding-left:14px;padding-right:14px}
  .selection strong{font-size:14px}
  .selection span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


.card h2:before{display:none}
.step-number{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:#173b63;color:#fff;font-size:13px;font-weight:900;flex:0 0 28px
}
.section-helper{margin:-6px 0 14px;color:#64748b;font-size:12px;line-height:1.5}


.draft-note{margin-top:7px;font-size:11px;color:#7c8a9b}


/* ══ 글씨 잘림 방지(2026-08-06 전체 검토) ══════════════════════ */
.grid2>*,.address-row>*,.product>*{min-width:0}
.badge,.step-number{flex:0 0 auto;white-space:nowrap}
label,.helper,.section-helper,.p-name,.p-spec,h2,h3{white-space:normal;overflow-wrap:anywhere}
input,select,textarea{box-sizing:border-box;max-width:100%}
.field input,.field select,.field textarea{width:100%}
body{overflow-x:hidden}
.card>*{max-width:100%}


/* 지금 쓰고 있는 칸을 눈에 띄게 해서 자판이 떠도 어디를 쓰는지 알게 한다 */
input:focus,textarea:focus,select:focus{
  border-color:var(--brand2) !important;
  box-shadow:0 0 0 3px rgba(36,91,145,.14) !important
}
.field:focus-within label{color:var(--brand2)}


/* 카톡 등 앱 내 브라우저 안내 띠 */
.inapp-bar{
  display:none;align-items:center;justify-content:space-between;gap:10px;
  margin:12px 18px 0;padding:11px 14px;border-radius:12px;
  background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:13px;font-weight:700
}
.inapp-bar button{
  flex:0 0 auto;border:0;background:var(--accent);color:#fff;border-radius:10px;
  padding:9px 13px;font-weight:900;font-size:13px;white-space:nowrap
}


/* 자판이 올라온 동안에는 입력칸에 화면을 몰아준다 */
body.kb-open .topbar,
body.kb-open .progress-box,
body.kb-open .draft-note,
body.kb-open .section-helper,
body.kb-open .inapp-bar{display:none !important}
body.kb-open .content{padding:10px 14px 24px}
body.kb-open .card{padding:12px;margin-bottom:10px}
body.kb-open .card h2{font-size:16px;margin-bottom:8px}
body.kb-open .field{margin-bottom:9px}
body.kb-open .field label{font-size:13px}

/* 최종 확인 시트 */
.review-back{
  position:fixed;inset:0;z-index:240;background:rgba(15,23,42,.5);
  display:flex;align-items:flex-end;justify-content:center
}
.review-sheet{
  width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -14px 40px rgba(15,23,42,.3)
}
@media(min-width:600px){
  /* PC에서는 A4 한 장처럼 보이게(폭 794px=A4 96dpi). 모바일은 위의 바텀시트 그대로.
     (2026-09-23 오너 "확인창도 A4사이즈로, 모바일은 모바일사이즈") */
  .review-back{align-items:center;padding:20px}
  .review-sheet{border-radius:20px;width:794px;max-width:100%;max-height:92vh}
}
.review-head{
  padding:18px 20px 12px;font-size:19px;font-weight:900;color:var(--brand);
  border-bottom:1px solid var(--line);text-align:center
}
.review-body{padding:14px 20px;overflow-y:auto;flex:1}
.review-actions{display:flex;gap:10px;padding:14px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.review-actions button{flex:1;min-height:54px;border:0;border-radius:14px;font-weight:900;font-size:16px}
.rv-back{background:#eef2f7;color:#334155}
.rv-go{background:var(--accent);color:#fff}
.review-actions .rv-print{flex:0 0 auto;padding:0 20px;background:#fff;color:#0071e3;box-shadow:inset 0 0 0 1.5px #bcdafc}
/* 견적서 인쇄 — A4 한 장으로 문서(qp-paper)만 깔끔하게. 모달·앱 화면은 인쇄에서 숨긴다. */
@media print{
  @page{size:A4;margin:12mm}
  body>*:not(.review-back){display:none!important}
  .review-back{position:static!important;display:block!important;inset:auto!important;background:#fff!important;padding:0!important;overflow:visible!important}
  .review-back .review-head,.review-back .review-actions{display:none!important}
  .review-back .review-sheet{width:auto!important;max-height:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
  .review-back .review-body{overflow:visible!important;max-height:none!important;padding:0!important}
  .review-back .qp-paper{border:0!important;border-radius:0!important;box-shadow:none!important}
  .review-back .qp-items-table{min-width:0!important}
  .review-back .qp-items-table tr,.review-back .qp-party{break-inside:avoid}
}

/* 접수 전 최종 확인을 A4 문서(견적서) 느낌으로 보여준다(2026-08-14 오너
   지시 — "그 최종 견적서 a4스타일문서 같은거 그걸로 보여주고"). 가격은
   절대 넣지 않는다(7절 보안 불변조건, showReviewSheet_ 참고) — 실제
   발송되는 견적서(quote.html, 관리자가 가격을 정한 뒤)와 헷갈리지 않게
   "확인용" 안내를 문서 위에 붙인다. */
.qp-sheet{width:min(640px,100%)}
.qp-paper{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qp-title{text-align:center;font-size:22px;font-weight:900;letter-spacing:10px;
  padding:18px 12px 14px;border-bottom:1px solid var(--line);color:var(--ink,#0f172a)}
.qp-caution{text-align:center;font-size:11.5px;color:#9a3412;background:#fff7ed;
  border-bottom:1px solid #fed7aa;padding:7px 12px}
.qp-parties{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.qp-party{padding:12px 14px;border-right:1px solid var(--line)}
.qp-party:last-child{border-right:0}
.qp-party>b{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
.qp-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:13px}
.qp-row span{color:var(--muted);flex:0 0 auto}
.qp-row b{text-align:right;word-break:break-all}
.qp-notes{padding:12px 14px;border-bottom:1px solid var(--line)}
.qp-notes b{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.qp-notes p{margin:0;font-size:13px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.qp-sub{padding:10px 14px 0;font-size:12.5px;font-weight:800;color:var(--brand)}
.qp-table-wrap{padding:8px 14px 14px;overflow-x:auto}
.qp-items-table{width:100%;border-collapse:collapse;min-width:420px}
.qp-items-table th,.qp-items-table td{border:1px solid var(--line);padding:7px 8px;font-size:12.5px;text-align:center}
.qp-items-table th{background:#f8fafc;color:var(--muted);font-weight:800}
.qp-items-table td:nth-child(2){text-align:left}
.qp-foot{padding:10px 14px 14px;font-size:11.5px;color:var(--muted);text-align:center}
@media(max-width:520px){
  .qp-parties{grid-template-columns:1fr}
  .qp-party{border-right:0;border-bottom:1px solid var(--line)}
  .qp-party:last-child{border-bottom:0}
}


/* ══ 모바일 견적요청 화면 ══════════════════════════════════════
   상단 제목이 고정돼 있어 화면을 계속 먹고, 하단 버튼도 떠 있어 입력칸을 덮었다
   (2026-08-07 오너 지적). 폰에서는 위에서 아래로 한 번 훑고 끝나게 한다. */
@media(max-width:760px){
  .topbar{position:static}
  .bottom{
    position:static;transform:none;width:auto;left:auto;bottom:auto;
    border-top:1px solid var(--line);border-radius:0;
    padding:14px 16px calc(18px + env(safe-area-inset-bottom))
  }
  .bottom-inner{flex-direction:column;align-items:stretch;gap:10px}
  .bottom .primary{width:100%;min-height:56px;font-size:17px}
  .content{padding-bottom:18px}
}


/* ══ 품목 선택: 분류 필터 버튼(3D 낱개 담기와 통일) ══
   2026-09-15 오너 — "위에 카테고리 버튼누르면 해당항목만 뜨듯이 카테고리는
   정지된채로 아래 품목만 움직이게". 분류 버튼 줄은 위에 그대로 있고(자리가
   바뀌지 않는다), 누르면 그 분류 품목만 아래 목록에 뜬다. 3D 견적서의 낱개
   담기(customer_bt3d.html .b3-cats/.b3-cat)와 같은 방식·모양이라, 3D든 일반이든
   부품 고르는 조작이 똑같다. 분류를 누를 때 목록만 바뀌고 버튼 줄은 안 움직인다
   — 예전 접이식(아코디언)처럼 눌러서 아래를 밀어내지 않으므로 어지럽지 않다. */
/* 분류 버튼은 3D 낱개 담기(.b3-cats/.b3-cat)와 글자·크기·색까지 똑같이 맞춘다
   (2026-09-16 오너 — "UI최대한 통일해라"). 담음 개수 배지는 3D에 없어 뺐다. */
.pick-cats{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.pick-cat{
  flex:none;font:inherit;font-size:12px;font-weight:800;white-space:nowrap;cursor:pointer;
  border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#5a6672;padding:7px 11px
}
.pick-cat.on{background:#173b63;border-color:#173b63;color:#fff}
/* 품목 고르는 칸 — 위 구분·방식(설정)과 갈라지게 파란 패널로 묶는다. 3D 낱개
   담기(.b3-piecepick)와 같은 파란색이라 두 화면이 통일된다(2026-09-16 오너 지시). */
.pick-pick{
  margin-top:2px;border:1px solid #bfdbfe;border-radius:14px;background:#f4f8ff;
  padding:13px 12px 14px;display:flex;flex-direction:column;gap:11px
}
.pick-pick-head{font-size:14px;font-weight:900;color:#1d4ed8}
/* '분류' 라벨을 붙여 구분·방식과 같은 모양의 라벨 달린 줄로 만든다 — 라벨 없이
   버튼만 떠 있어 헷갈리던 것을 없앤다. */
.pick-cat-row{gap:8px}
.pick-cat-row .pick-cats{flex:1;min-width:0;margin-top:0}
.pick-pick .product-search{margin:0}
.pick-pick .product-list{margin-top:0}

/* 상호 옆 버전 표시. 제목 아래로 떨어지지 않게 같은 줄에 붙인다(2026-08-07). */
.brand .app-version{
  display:inline;margin:0 0 0 8px;font-size:12px;font-weight:700;color:#94a3b8;
  vertical-align:middle;letter-spacing:0
}
.topbar{padding:16px 20px 14px}


/* 고객 화면 알림 */
.cust-toast{
  position:fixed;left:50%;transform:translateX(-50%);top:14px;z-index:250;   /* 알림은 모두 위 가운데(2026-10-03 오너) */
  max-width:min(520px,92vw);padding:13px 18px;border-radius:12px;
  background:#0c4a6e;color:#fff;font-size:14px;font-weight:800;line-height:1.5;
  box-shadow:0 12px 30px rgba(15,23,42,.28);transition:opacity .3s ease
}
.cust-toast.out{opacity:0}

/* 같은 자리를 안내로도 쓴다 — 관리자가 정보를 미리 채워 보낸 링크로 들어온 경우.
   오류가 아니므로 붉은색을 파랗게 바꾼다(2026-08-08). */
.form-error.ok{
  border-bottom-color:#2563eb;background:#f4f8ff;color:#173b63
}

/* ══ 구분·방식을 한 화면에서 (2026-08-11 오너 지시) ══════════════
   구분(임대/판매)은 눌러서 켜두는 값이고, 방식(3D/일반)을 누르면 바로 시작한다. */
.pick-setup{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.pick-setup-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pick-setup-label{
  flex:0 0 40px;font-size:12.5px;font-weight:900;color:var(--muted);
  padding-right:9px;border-right:2px solid #e2e8f0;line-height:1.9;white-space:nowrap
}
.pick-setup-opts{display:flex;gap:7px;flex-wrap:wrap;flex:1;min-width:0}
.pick-opt{
  font:inherit;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap;
  flex:1 1 auto;padding:0 16px;min-height:44px;border-radius:11px;
  border:1px solid var(--line);background:#fff;color:var(--muted)
}
.pick-opt.on{color:#fff}
/* 링크에 실려 온 가격 등급 — 고객은 바꿀 수 없는 표시칸(2026-10-12 오너 "고객견적서와 어드민에서 보는 내용이 일치") */
.pick-opt.pick-grade-fixed{display:flex;align-items:center;justify-content:center;cursor:default;pointer-events:none;background:#eef2f7;border-color:#cfd8e3;color:#334155}
.pick-opt.pk-rent.on{background:#2563eb;border-color:#2563eb}
.pick-opt.pk-sale.on{background:#e8842c;border-color:#e8842c}
.pick-opt.pk-3d{background:linear-gradient(135deg,#173b63,#245089);border-color:#173b63;color:#fff;min-height:50px}
.pick-opt.pk-list{border:1.5px solid var(--brand);color:var(--brand);min-height:50px}
.pick-setup-hint{font-size:12px;color:var(--muted);padding-left:50px}
.pick-setup-hint b{color:var(--brand)}
/* 담기 화면 위에서도 구분·방식을 상시 보이는 버튼으로 바로 바꿀 수 있게
   한다(2026-08-14 오너 지시 — "바꾸기버튼모드로 되있는데... 버튼 전부
   나오게 하고 둘중하나 선택하게 해"). 처음 고르는 화면(.pick-setup)과 같은
   마크업을 그대로 쓰되, 방식(pk-3d/pk-list)은 고르는 화면에서는 둘 다
   똑같이 눈에 띄어야 하는 선택지지만 여기서는 이미 하나가 골라진 값이라
   안 고른 쪽을 옅게 죽여야 지금 값이 한눈에 보인다.*/
.pick-setup-crumb{margin-bottom:14px}
.pick-setup-crumb .pick-opt.pk-3d,.pick-setup-crumb .pick-opt.pk-list{
  background:#fff;border:1px solid var(--line);color:var(--muted);min-height:44px
}
.pick-setup-crumb .pick-opt.pk-3d.on{background:linear-gradient(135deg,#173b63,#245089);border-color:#173b63;color:#fff}
.pick-setup-crumb .pick-opt.pk-list.on{border:1.5px solid var(--brand);color:var(--brand);background:#fff7ed}
@media(max-width:520px){
  .pick-setup-row{align-items:flex-start}
  .pick-setup-label{flex-basis:100%;border-right:0;padding-right:0;line-height:1.4}
  .pick-setup-hint{padding-left:0}
}

.pick-review{margin-top:14px;padding:14px;border-radius:14px;background:#f8fafc;border:1px solid var(--line)}
.pick-review-empty{font-size:13px;color:var(--muted);text-align:center;padding:10px 0}
.pick-review-actions{display:flex;gap:8px;margin-top:12px}
.pick-review-actions button{
  flex:1;min-height:48px;border-radius:12px;font-size:14px;font-weight:800;font-family:inherit;cursor:pointer
}
.pick-review-actions .pr-confirm{border:1px solid var(--brand);background:var(--brand);color:#fff}
.pick-review-actions .pr-confirm:disabled{opacity:.45}

/* ══ 담은 품목 목록(2026-08-14 오너 지시 — "어떤품목을 샀는지 한눈에 볼수
   있게 잘 다듬자") ══
   예전엔 이름·규격·수량을 알약(chip) 하나에 몰아넣어 줄줄이 흘렸다 —
   품목이 열 개만 넘어도 어디까지가 한 품목인지 눈으로 못 끊었다.
   한 줄에 한 품목, 수량은 오른쪽 끝에 고정폭 숫자로 세로줄을 맞춘다. */
.picked-box{
  margin-top:12px;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden
}
.pk-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:11px 14px;background:#f8fafc;border-bottom:1px solid var(--line)
}
.pk-head b{font-size:13.5px;color:var(--brand)}
.pk-head span{font-size:12.5px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.pk-group-label{
  padding:8px 14px 5px;font-size:11.5px;font-weight:900;color:var(--muted);
  letter-spacing:.03em;background:#fbfcfe
}
/* 임대/구매를 색으로 확실히 구분(2026-09-22 요청서 #9). 임대=파랑 띠, 구매=보라 띠. */
.pk-group-label.pk-rent{font-size:14px;color:#1d4ed8;background:#eef4ff;border-left:5px solid #1d4ed8}
.pk-group-label.pk-sale{font-size:14px;color:#7c3aed;background:#f5f0ff;border-left:5px solid #7c3aed}
.pk-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-top:1px solid #f1f5f9
}
.pk-group:first-child .pk-group-label{border-top:0}
.picked-box>.pk-row:first-of-type{border-top:0}
.pk-main{flex:1 1 auto;min-width:0}
.pk-main b{
  display:block;font-size:14px;font-weight:800;color:var(--ink,#0f172a);
  line-height:1.35;overflow-wrap:anywhere
}
.pk-main small{
  display:block;margin-top:2px;font-size:12px;color:var(--muted);
  line-height:1.35;overflow-wrap:anywhere
}
.pk-qty{
  flex:0 0 auto;font-size:15px;font-weight:900;color:var(--brand);
  font-variant-numeric:tabular-nums;white-space:nowrap
}
.pk-qty i{font-style:normal;font-size:12px;font-weight:800;color:var(--muted);margin-left:1px}
.pk-del{
  flex:0 0 auto;width:28px;height:28px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:#94a3b8;font-size:16px;line-height:1;padding:0;cursor:pointer
}
.pk-del:hover{background:#fef2f2;border-color:#fecaca;color:#dc2626}

.pick-confirmed{margin-top:14px;padding:14px;border-radius:14px;background:#f0fdf4;border:1px solid #bbf7d0}
.pick-confirmed-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pick-confirmed-head b{color:#15803d;font-size:14px}
.pick-edit-link{
  border:0;background:transparent;color:#15803d;font-size:12.5px;
  text-decoration:underline;padding:4px 0;font-family:inherit
}

/* ── 현장 견적 담기(담기 모드) ──────────────────────────────────
   2026-08-14 오너 지시 — "관리자도 모바일 모드를 만들어야할거같아 …
   오너가 밖에서 작업해서 링크만 카톡으로 건네주면"
   손님 화면을 그대로 쓰기 때문에, 지금이 담기 모드라는 것을 맨 위에서
   확실히 알려야 한다. 안 그러면 접수하는 화면과 구분이 안 된다. */
.pick-mode-head{
  margin:0 0 12px;padding:11px 13px;border-radius:12px;
  background:#0f2d52;color:#fff;line-height:1.55
}
.pick-mode-head b{display:block;font-size:15px;font-weight:900;margin-bottom:3px}
.pick-mode-head span{display:block;font-size:12.5px;color:#c7d7ea}
.pick-mode-head span b{display:inline;color:#fff;font-size:inherit;margin:0}
.pick-grade-opts{margin-top:2px}
.pick-grade-card .helper{margin-top:7px}

/* 만들어진 링크를 보여주는 창 */
.pick-link-sheet{padding:0}
.pl-head{
  padding:15px 18px 11px;font-size:16px;font-weight:900;color:#0f2d52;
  border-bottom:1px solid #e2e8f0
}
.pl-body{padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.pl-lead{margin:0;font-size:14px;line-height:1.6;color:#0f172a}
.pl-url{
  width:100%;border:1px solid #cbd5e1;border-radius:9px;background:#f8fafc;
  padding:9px 11px;font-family:inherit;font-size:12px;line-height:1.5;
  color:#334155;resize:none;word-break:break-all
}
.pl-note{
  margin:0;padding:9px 11px;border-radius:9px;background:#f0fdf4;
  border:1px solid #bbf7d0;font-size:12.5px;line-height:1.55;color:#166534
}
.pl-actions{display:flex;gap:9px;padding:12px 18px 16px;border-top:1px solid #e2e8f0}
.pl-actions button{flex:1;min-height:46px;border-radius:11px;font-size:15px;font-weight:900}
/* 등급 단가가 아직 없는 품목(V5.7.3) */
.p-unit.p-ask{color:#b45309;font-weight:800}
.ct-row.ct-ask b{color:#b45309}
/* 완료 화면(V5.7.7) — 폰에서 버튼을 누른 뒤 잠깐 크게 보이고 카톡으로 돌아간다 */
.done-fx{position:fixed;inset:0;z-index:99999;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.done-fx .df-card{background:#fff;border-radius:22px;padding:30px 24px 24px;max-width:340px;width:100%;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.done-fx .df-ok{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;background:#16a34a;color:#fff;font-size:42px;font-weight:900;display:flex;align-items:center;justify-content:center}
.done-fx b{display:block;font-size:22px;color:#0f172a;margin-bottom:6px}
.done-fx p{margin:0 0 12px;font-size:16px;color:#334155;line-height:1.5}
.done-fx small{display:block;font-size:14px;color:#64748b;line-height:1.6}
.done-fx .df-close{margin-top:12px;min-height:48px;width:100%;border:0;border-radius:12px;background:#173b63;color:#fff;font-size:17px;font-weight:800}