:root{
  --ink:#172033;
  --muted:#6b7280;
  --line:#e5e7eb;
  --soft:#f7f8fa;
  --brand:#173b63;
  --brand2:#245b91;
  --accent:#e97821;
  --ok:#177245;
  --danger:#b42318;
  --radius:18px;

  /* ── 수량 −/＋ 스테퍼 기준 치수 ───────────────────────────────
     이 값 하나만 고치면 −/＋가 쓰이는 모든 곳(직접입력 표·세트편집 표·
     견적데이터 상세 표·관리자 3D·고객 3D)이 같이 바뀐다.

     같은 −/＋인데 화면마다 크기가 제각각이라 어떤 표에서는 ＋가 잘리고
     어떤 표에서는 안 잘리는 일이 다섯 번 반복됐다(V1.0.5·V1.1.0·V1.1.2·
     V1.2.3·V1.2.4 — 매번 원인이 달랐지만 근본은 "치수가 여섯 군데에
     따로 적혀 있다"는 것이었다). 2026-08-11 오너 지시("딱 요렇게 -+버튼
     나오게 모두다 적절한 사이즈로 글씨 안잘리게 기본으로 조절해줘라")로
     직접입력 표의 모양을 표준으로 삼아 여기 한 곳에 모았다.

     ⚠ 이 값을 키우면 표의 수량 열 폭(--qstep-col-w를 쓰는 곳)도 같이
     커져야 한다 — 열이 스테퍼보다 좁으면 ＋가 다시 잘린다. */
  --qstep-btn-w:40px;      /* −/＋ 버튼 한 개 폭 — 2026-09-22 오너 지시로 키웠다(누르기 쉽게) */
  --qstep-h:48px;          /* 스테퍼 높이(버튼·입력칸 공통) */
  --qstep-num-w:46px;      /* 숫자 칸 폭 — 세 자리(999)까지 안 잘린다 */
  --qstep-btn-font:24px;   /* −/＋ 글자 크기 */
  --qstep-num-font:22px;   /* 숫자 글자 크기 — −/＋(24px)와 비슷하게 키워 PC에서도 개수가 또렷이 보이게(2026-09-23 오너) */
  /* 스테퍼 전체 폭 = 버튼 2개 + 숫자칸 + 좌우 테두리 2px */
  --qstep-w:calc(var(--qstep-btn-w) * 2 + var(--qstep-num-w) + 2px);
  /* 표의 수량 열은 스테퍼보다 칸 여백만큼 넉넉해야 한다 */
  --qstep-col-w:calc(var(--qstep-w) + 22px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#f3f5f7;color:var(--ink);font-family:Arial,"Noto Sans KR",sans-serif}
/* 가로 스크롤이 생기면 모바일에서 화면이 좌우로 밀린다. 어떤 요소가 넘쳐도 잘라낸다. */
body{min-height:100vh;overflow-x:hidden}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
/* 760px은 넓은 화면에서 좌우 여백이 과하게 남았다. 폭을 늘리고
   넓을 때는 품목 목록을 2열로 펼쳐 공간을 실제로 쓰게 한다. */
.shell{max-width:1040px;margin:0 auto;min-height:100vh;background:white}
.topbar{padding:24px 20px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.96);z-index:20}
.brand{font-weight:900;font-size:24px;letter-spacing:-1px;color:var(--brand)}
.subtitle{font-size:14px;color:var(--muted);margin-top:5px}
/* 내 견적 조회(요청서 #10) */
.brand{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.my-orders-btn{margin-left:auto;font-size:13px;font-weight:700;color:#0071e3;background:#eef4ff;border:1px solid #cfe0f5;border-radius:999px;padding:7px 13px;cursor:pointer;white-space:nowrap}
.mo-list{display:flex;flex-direction:column;gap:10px}
.mo-item{border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;background:#fff}
.mo-item-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mo-item-top b{font-size:15px;color:#0f172a}
.mo-status{font-size:12px;font-weight:800;color:#1d4ed8;background:#eef4ff;border-radius:999px;padding:3px 10px;white-space:nowrap}
.mo-item-sub{font-size:13px;color:#64748b;margin-top:5px}
.mo-open{display:inline-block;margin-top:9px;font-size:14px;font-weight:700;color:#0071e3;text-decoration:none}
.mo-wait{margin-top:8px;font-size:13px;color:#94a3b8}
.mo-empty{padding:20px;text-align:center;color:#64748b;line-height:1.6}
.content{padding:18px 18px 110px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.card h2{font-size:19px;margin:0 0 14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.field label{font-weight:700;font-size:14px}
.field input,.field textarea,.field select{
  width:100%;border:1px solid #ccd2da;border-radius:12px;padding:15px 13px;background:#fff;outline:none;
  min-height:52px;font-size:16px
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand2);box-shadow:0 0 0 3px rgba(36,91,145,.08)}

/* ===== 작성 완료 표시 =====
   채운 항목은 초록 테두리 + 라벨 앞 체크로 바뀐다.
   무엇이 남았는지 스크롤하며 찾지 않아도 되게 하는 것이 목적. */
.field.done input,.field.done textarea{border-color:#86c8a4;background:#f6fdf9}
.field.done label::before{
  content:'✓ ';color:var(--ok);font-weight:900
}
.progress-box{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;margin-bottom:14px
}
.progress-track{
  height:7px;border-radius:999px;background:#eef2f7;overflow:hidden
}
.progress-fill{
  height:100%;width:0;border-radius:999px;background:var(--brand2);
  transition:width .25s ease,background .25s ease
}
.progress-box.complete .progress-fill{background:var(--ok)}
.progress-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.progress-chip{
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;
  font-size:12px;font-weight:800;color:var(--muted);background:#fafbfc;
  white-space:nowrap
}
.progress-chip.on{
  border-color:#86c8a4;background:#ecfdf3;color:var(--ok)
}
.progress-text{
  margin-top:8px;font-size:12px;font-weight:800;color:var(--muted)
}
.progress-box.complete .progress-text{color:var(--ok)}
.segment{display:flex;gap:8px;overflow:auto;padding-bottom:4px}
.segment button{border:1px solid var(--line);background:white;border-radius:999px;padding:10px 14px;white-space:nowrap;font-weight:800}
.segment button.active{background:var(--brand);color:white;border-color:var(--brand)}
/* 좁은 화면: 1열. 넓은 화면: 2~3열로 펼쳐 품목을 한눈에 본다.
   엑셀에서 품목 전체를 훑어보던 방식에 가깝게 만드는 것이 목적이다. */
/* 품목 목록은 항상 1열(세로)로 쌓는다 — 2026-09-22 오너 지시.
   예전엔 넓은 화면에서 2~3열이라, 분류를 바꾸면 같은 품목이 다른 열로 재배치돼
   "위치가 흔들려" 보였다. 1열이면 어떤 분류를 눌러도 품목이 늘 같은 세로줄에 온다. */
.product-list{display:grid;grid-template-columns:1fr;gap:6px;margin-top:10px}
/* 품목 줄 — 3D 견적서 낱개 담기(customer_bt3d.html .b3-row)와 똑같은 한 줄 모양으로
   통일한다(2026-09-16 오너 — "일반견적서 3D UI처럼 통일하라니까 / 모바일에서 다르게
   나오잖아"). 이름(굵게) + 규격(작게 회색)이 왼쪽, −/＋ 스테퍼가 오른쪽. 담으면 회색
   바탕이 주황으로 바뀐다. 분류색 왼쪽 띠·2줄 카드·"N개 선택" 줄·파란 규격은 뺐다 —
   3D 줄에는 없다. 분류는 위 필터 버튼(.pick-cats)으로 이미 나뉘어 있어 줄마다 색을
   줄 이유도 없다. */
.product{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid #d7dde3;border-radius:9px;padding:6px 10px 6px 12px;background:#f2f5f7
}
/* 항목(카드)을 누르면 1개씩 담긴다 — 2026-09-22 오너 지시. 담길 때 잠깐 커졌다 돌아오는
   애니메이션으로 "담겼다"를 보여준다. 스테퍼(.qty)를 직접 누른 경우는 카드 담기를 건너뛴다. */
@keyframes qtyAddPulse{0%{transform:scale(1)}28%{transform:scale(1.03)}100%{transform:scale(1)}}
.product.just-added{animation:qtyAddPulse .26s ease}
/* 담을 때 [이 내용으로 확인] 버튼(장바구니)으로 날아가는 표시 + 버튼이 톡 튀는 효과. */
.fly-dot{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);
  background:#e8842c;color:#fff;font-weight:900;font-size:13px;padding:4px 10px;border-radius:999px;
  box-shadow:0 6px 16px rgba(232,132,44,.45);
  transition:transform .6s cubic-bezier(.2,.75,.3,1),opacity .6s ease}
.cart-bump{animation:cartBump .4s ease}
@keyframes cartBump{0%{transform:scale(1)}38%{transform:scale(1.18)}70%{transform:scale(.96)}100%{transform:scale(1)}}
/* 화면에 떠 있는 장바구니 — 담은 품목이 이 안으로 날아든다. 누르면 확인으로. 모바일도 같다. */
.cart-fab{position:fixed;right:16px;bottom:88px;z-index:900;width:58px;height:58px;border-radius:50%;
  border:0;background:#e8842c;color:#fff;box-shadow:0 8px 22px rgba(232,132,44,.42);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.cart-fab svg{width:26px;height:26px}
.cart-fab-count{position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;border-radius:999px;
  background:#173b63;color:#fff;font-size:12px;font-weight:900;line-height:22px;text-align:center;padding:0 5px;
  border:2px solid #fff}
.cart-fab-count:empty,.cart-fab-count[data-zero="1"]{display:none}
.product.selected{border-color:#e8842c;background:#ffe6c9}
.p-main{flex:1;min-width:0}
.p-name{font-size:14px;font-weight:800;line-height:1.35;color:#173b63;word-break:keep-all}
.product.selected .p-name{color:#8a4a10}
.p-sub{font-size:12px;color:#5a6672;margin-top:2px;line-height:1.4;overflow-wrap:anywhere}
/* 규격은 분홍색으로 눈에 띄게 — 이름이 같고 규격만 다른 품목이 많아 헷갈린다
   (2026-09-16 오너 지시). 가격(.p-unit)은 회색으로 조용히. */
.p-size{color:#db2777;font-weight:800;font-size:13px}
.p-unit{color:#5a6672;font-weight:700}
/* 수량 −/＋ 스테퍼 — 3D 견적서(.b3-row .st)·관리자 직접입력 표와 완전히 같은
   알약 모양으로 통일한다(2026-09-15 오너 — "3d견적서처럼 깔끔하게 일반견적서도
   ui통일해줘"). 빨강 −, 파랑 ＋, 가운데 숫자칸. 브라우저 기본 스핀 화살표는
   없앤다(예전엔 opacity:1 로 일부러 보였는데 지저분했다). 크기는 --qstep-* 하나가
   기준이다 — 여기서 px 를 다시 적지 않는다. */
.qty{
  display:inline-flex;align-items:stretch;flex:none;
  width:var(--qstep-w);min-width:var(--qstep-w);height:var(--qstep-h);
  border:1px solid #cbd5e1;border-radius:9px;overflow:hidden;background:#fff
}
/* 2026-09-22 오너 지시: ＋를 왼쪽·－를 오른쪽으로(row-reverse). 색은 버튼 의미를 따라간다
   (− first-child 빨강, + last-child 파랑) — 뒤집혀도 빨강이 오른쪽(－), 파랑이 왼쪽(＋)이 된다. */
.qty button{
  width:var(--qstep-btn-w);min-width:var(--qstep-btn-w);height:100%;flex:none;
  border:0;border-radius:0;padding:0;background:#fff;
  font-family:inherit;font-size:var(--qstep-btn-font);font-weight:900;line-height:1
}
.qty button:first-child{background:#fef2f2;color:#dc2626}
.qty button:last-child{background:#eff6ff;color:#1d4ed8}
.qty button:active{transform:translateY(1px)}
.qty .qty-input{
  width:var(--qstep-num-w);min-width:var(--qstep-num-w);flex:none;height:100%;
  min-height:0!important;margin:0;padding:0!important;text-align:center;background:#fff;
  border:0;border-left:1px solid #e2e8f0;border-right:1px solid #e2e8f0;border-radius:0;
  font-family:inherit;font-size:var(--qstep-num-font);font-weight:900;
  font-variant-numeric:tabular-nums;color:#1c242c;
  -webkit-appearance:none;-moz-appearance:textfield;appearance:none
}
.qty .qty-input::-webkit-inner-spin-button,
.qty .qty-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;display:none}
.qty .num{width:var(--qstep-num-w);min-width:var(--qstep-num-w);text-align:center;font-weight:900;font-size:var(--qstep-num-font)}

/* 고객이 고른 금액 합계 */
.customer-total{display:none;margin-top:14px}
.customer-total.show{display:block}
.ct-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:14px
}
.ct-row b{font-variant-numeric:tabular-nums}
.ct-row.grand{
  border-bottom:0;border-top:2px solid var(--brand);margin-top:4px;padding-top:12px;
  font-size:16px;font-weight:900;color:var(--brand)
}
.ct-row.grand b{font-size:22px}
.ct-note{
  margin-top:10px;padding:10px 12px;border-radius:10px;background:#fffbeb;
  border:1px solid #fde68a;font-size:12px;color:#92400e;line-height:1.6
}
.bottom{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(1040px,100%);
  background:white;border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));z-index:30
}
.bottom-inner{display:flex;align-items:center;gap:12px}
/* 주문 화면 맨 아래 개인정보 안내 한 줄(2026-10-10) — 아래 고정 막대 높이만큼 띄운다 */
.cust-legal{margin:0;padding:8px 16px calc(160px + env(safe-area-inset-bottom));text-align:center;font-size:13px;line-height:1.6;color:var(--muted)}
.cust-legal a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.selection{flex:1}
.selection strong{display:block;font-size:16px}
.selection span{font-size:13px;color:var(--muted)}
.primary{border:0;background:var(--accent);color:white;border-radius:14px;padding:15px 20px;font-weight:900;min-width:145px}
.primary:disabled{opacity:.5;cursor:default}
.success{padding:40px 22px;text-align:center}
.success .icon{font-size:54px}
.success h1{font-size:26px}
.success .request-id{font-weight:900;color:var(--brand);font-size:18px}
.loading{padding:60px 20px;text-align:center;color:var(--muted)}
.hide{display:none!important}

/* admin */
/* 관리 화면은 폭 제한 없이 모니터를 꽉 채운다(2026-08-07 오너 요청).
   표가 많은 화면이라 가운데 1200px로 묶어두면 양옆이 놀고 열이 좁아진다. */
.admin-shell{max-width:none;margin:0 auto;padding:14px 16px}
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.admin-title{font-size:26px;font-weight:900}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.stat{background:white;border:1px solid var(--line);border-radius:14px;padding:15px}
.stat b{display:block;font-size:24px;margin-top:6px}
/* 견적데이터: 왼쪽 목록은 상호·번호만 보이면 되고, 오른쪽 상세가 항목이 많아 잘렸다.
   왼쪽을 줄이고 남는 폭을 오른쪽에 준다(2026-08-06 오너 지적). */
.admin-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px}
.admin-grid>*{min-width:0}
@media(max-width:1400px){.admin-grid{grid-template-columns:270px minmax(0,1fr)}}
.panel{background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.panel-head{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:900}
.request-row{padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.request-row:hover{background:#f8fafc}
.request-row.active{background:#eef6ff}
.request-row .line1{display:flex;justify-content:space-between;gap:8px;font-weight:900}
.request-row .line2{font-size:13px;color:var(--muted);margin-top:5px}
.badge{padding:4px 8px;border-radius:999px;background:#eef2f7;font-size:12px}
.detail{padding:18px}
.detail-empty{padding:50px 20px;text-align:center;color:var(--muted)}
.price-table{width:100%;border-collapse:collapse;margin-top:12px}
.price-table th,.price-table td{border-bottom:1px solid var(--line);padding:10px 6px;text-align:right;font-size:13px}
.price-table th:first-child,.price-table td:first-child{text-align:left}
.price-input{width:90px;padding:8px;border:1px solid #cbd5e1;border-radius:8px;text-align:right}
.grade-buttons{display:flex;gap:8px;margin:12px 0}
.grade-buttons button{border:1px solid #cbd5e1;background:white;border-radius:10px;padding:9px 13px;font-weight:800}
.grade-buttons button.active{background:var(--brand);color:white;border-color:var(--brand)}
.admin-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.secondary{border:1px solid #cbd5e1;background:white;border-radius:10px;padding:10px 13px;font-weight:800}
.danger{border:1px solid #fecaca;background:#fff5f5;color:var(--danger);border-radius:10px;padding:10px 13px;font-weight:800}
.totalbox{margin-top:14px;background:#f8fafc;border-radius:12px;padding:14px}
.totalrow{display:flex;justify-content:space-between;padding:5px 0}
.totalrow.grand{font-size:19px;font-weight:900;border-top:1px solid #d8dee7;margin-top:5px;padding-top:11px}
.loginbox{max-width:420px;margin:80px auto;background:white;border:1px solid var(--line);border-radius:18px;padding:24px}

@media(max-width:760px){
  .grid2{grid-template-columns:1fr}
  .admin-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .admin-shell{padding:12px}
}

.quick-block{margin-top:5px}
.quick-label{font-size:13px;font-weight:800;color:var(--muted);margin:3px 0 8px}
.quick-buttons{display:flex;gap:8px;flex-wrap:wrap}
.quick-buttons button{
  border:1px solid #cfd6df;background:#fff;border-radius:12px;padding:11px 14px;font-weight:900;min-height:44px
}
.quick-buttons button.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.address-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.address-search-btn{
  border:0;background:var(--brand);color:white;border-radius:12px;padding:0 16px;font-weight:900;min-height:52px
}
.address-input{background:#f8fafc!important;cursor:pointer}
.address-layer{
  position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:100;display:none;padding:18px
}
.address-sheet{
  max-width:640px;height:min(720px,90vh);margin:3vh auto 0;background:white;border-radius:18px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.22);display:flex;flex-direction:column
}
.address-sheet-head{
  height:58px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-weight:900
}
.address-close{border:0;background:#eef2f7;border-radius:10px;padding:9px 12px;font-weight:900}
#postcodeEmbed{flex:1;min-height:0}
.helper{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.45}
@media(max-width:760px){
  .address-layer{padding:0}
  .address-sheet{max-width:none;width:100%;height:100vh;margin:0;border-radius:0}
  .quick-buttons button{flex:1 1 auto}
}


/* 현재 시각 표시 — 납품 희망일을 고르기 전에 "지금이 언제인지"를 바로 보여준다 */
.now-clock{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 12px;padding:9px 12px;
  border:1px solid #dbeafe;background:#f4f8ff;border-radius:11px;
  font-size:13px;color:#334155
}
.now-clock-label{
  border-radius:999px;background:var(--brand);color:#fff;
  padding:3px 9px;font-size:11px;font-weight:900;flex:0 0 auto
}
.now-clock-date{font-weight:800}
.now-clock-time{font-weight:900;color:var(--brand);font-variant-numeric:tabular-nums}

/* v0.3~v0.7 모바일 날짜/시간 스피너·달력·휠 CSS는 여기 있었다 — 희망
   시간·납품희망일 입력 화면을 통째로 없애면서(2026-08-14 오너 지시)
   같이 지웠다. */


/* v0.8 관리자 검색 / 지난가격 / 버전이력 */
.admin-search{padding:12px;border-bottom:1px solid var(--line);background:#fbfcfe}
.admin-search-row{display:grid;grid-template-columns:1fr 130px;gap:8px}
.admin-search input,.admin-search select{
  min-height:44px;border:1px solid #cbd5e1;border-radius:10px;padding:9px 11px;background:#fff
}
.last-price-btn{
  margin-top:7px;border:1px solid #fed7aa;background:#fff7ed;color:#9a3412;
  border-radius:9px;padding:6px 8px;font-size:12px;font-weight:900
}
.version-line{
  margin-top:14px;border-top:1px dashed #d8dee7;padding-top:12px
}
.version-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.version-chip{
  border:1px solid #cbd5e1;background:#f8fafc;border-radius:999px;
  padding:6px 9px;font-size:12px;font-weight:800
}
.empty-list{padding:30px 15px;text-align:center;color:var(--muted)}
@media(max-width:760px){
  .admin-search-row{grid-template-columns:1fr}
}


/* 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}