/* ============================================================
   4DMIXX — 온라인 주문 (주문서 모달 · 정찰제 상품 페이지)
   ============================================================ */

/* ---------- 주문서 모달 (js/order.js) ---------- */
.od-bg{ position:fixed; inset:0; z-index:200; background:rgba(20,24,30,.55); display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:32px 16px; }
.od-bg[hidden]{ display:none; }
.od{ position:relative; background:#fff; width:100%; max-width:520px; padding:26px 24px 22px; border:1px solid var(--line); box-shadow:0 18px 50px rgba(0,0,0,.18); }
.od h3{ font-size:19px; font-weight:800; margin:0 0 12px; }
.od-x{ position:absolute; top:10px; right:12px; border:0; background:none; font-size:26px; line-height:1; color:var(--metal); cursor:pointer; padding:4px 8px; }
.od-sum{ background:var(--surface); border:1px solid var(--line); padding:12px 14px; margin-bottom:16px; display:grid; gap:2px; }
.od-sum b{ font-size:15px; }
.od-sum span{ font-size:20px; font-weight:800; color:var(--accent); }
.od-sum small{ color:var(--text-dim); font-size:12.5px; word-break:break-all; }
.od form{ display:grid; gap:10px; }
.od label{ display:grid; gap:4px; font-size:13px; font-weight:600; color:var(--text); }
.od label small{ font-weight:400; color:var(--text-dim); }
.od input, .od textarea{ font:inherit; font-size:14.5px; font-weight:400; padding:9px 10px; border:1px solid var(--line); background:#fff; width:100%; box-sizing:border-box; }
.od input:focus, .od textarea:focus{ outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
.od-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.od-zip{ grid-template-columns:1fr auto; align-items:end; }
.od-find{ font:inherit; font-size:13.5px; padding:9px 14px; border:1px solid var(--navy); background:var(--navy); color:#fff; cursor:pointer; }
.od-policy{ margin:4px 0 0; padding:12px 14px 12px 30px; background:var(--surface); border:1px solid var(--line); font-size:12.5px; color:var(--text-dim); line-height:1.65; }
.od-policy b{ color:var(--text); }
.od label.od-agree{ display:flex; gap:8px; align-items:flex-start; font-weight:500; font-size:13.5px; }
.od-agree input{ width:auto; margin-top:3px; }
.od-agree a{ color:var(--laser); text-decoration:underline; }
.od-msg{ margin:0; min-height:1em; color:#C62828; font-size:13px; }
.od-go{ width:100%; justify-content:center; padding:14px; font-size:15.5px; }
.od-go:disabled{ opacity:.6; cursor:wait; }
@media (max-width:520px){
  .od-bg{ padding:0; }
  .od{ min-height:100%; border:0; padding:22px 16px; }
  .od-row:not(.od-zip){ grid-template-columns:1fr; }
}

/* ---------- 정찰제 상품 (shop.html) ---------- */
.shop-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.shop-card{ background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; }
.shop-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--surface); }
.shop-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.shop-body h3{ font-size:17px; font-weight:800; margin:0; }
.shop-body p{ margin:0; font-size:13.5px; color:var(--text-dim); }
.shop-price{ font-size:22px; font-weight:800; color:var(--accent); }
.shop-price small{ font-size:12px; font-weight:500; color:var(--text-dim); margin-left:4px; }
.shop-spec{ margin:0; padding:0; list-style:none; font-size:12.5px; color:var(--text-dim); display:grid; gap:2px; }
.shop-spec li::before{ content:"· "; }
.shop-file{ border:1px dashed var(--line); padding:10px; font-size:13px; display:grid; gap:6px; }
.shop-file input{ font-size:12.5px; max-width:100%; }
.shop-file .ok{ color:var(--laser); font-weight:600; }
.shop-file .bad{ color:#C62828; }
.shop-qty{ display:flex; align-items:center; gap:8px; font-size:13px; }
.shop-qty input{ width:64px; padding:6px 8px; border:1px solid var(--line); font:inherit; }
.shop-card .btn{ justify-content:center; margin-top:auto; }
.shop-card .btn:disabled{ opacity:.5; cursor:not-allowed; }
.shop-note{ margin-top:26px; background:var(--surface); border:1px solid var(--line); padding:18px 20px; font-size:13.5px; color:var(--text-dim); line-height:1.75; }
.shop-note b{ color:var(--text); }
.shop-note a{ color:var(--laser); text-decoration:underline; }
.shop-steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin:0 0 22px; padding:0; list-style:none; counter-reset:st; }
.shop-steps li{ background:#fff; border:1px solid var(--line); padding:12px 14px; font-size:13.5px; counter-increment:st; }
.shop-steps li::before{ content:"0" counter(st); display:block; font-weight:800; color:var(--accent); font-size:12px; margin-bottom:2px; }
@media (max-width:860px){
  .shop-grid{ grid-template-columns:1fr; }
  .shop-steps{ grid-template-columns:1fr 1fr; }
}
#shop{ padding-top:28px; }
.od textarea{ min-height:0; height:auto; resize:vertical; }