/* ══════════════════════════════════════════════════════════════
       주문 페이지 — 넥스트(printhub template-1 order) 디자인.
       좌: 연회색(#F8F9FC) 갤러리 / 우: 520px 흰색 주문 패널.
       banner.js 가 쓰는 id/name/class(.thumb, #inv-* 등)는 그대로 유지.
       ══════════════════════════════════════════════════════════════ */
    .od-page { font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif; color:#18181b; letter-spacing:-0.02em; --od-main:#0068FF; }
    .od-page p { margin:0; }

    .od-hero { position:relative; background:#F8F9FC; }
    .od-hero-right { display:none; position:absolute; top:0; bottom:0; right:0; background:#fff; }
    .od-grid { position:relative; z-index:1; }
    @media (min-width:1024px) {
      .od-hero { min-height:calc(100vh - 200px); }
      .od-hero-right { display:block; width:max(520px, calc((100vw - 1200px) / 2 + 520px)); }
      .od-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(520px,610px) minmax(14px,70px) 520px minmax(0,1fr); align-items:start; }
    }

    /* ── 갤러리 (좌) ── */
    .od-gallery { display:flex; justify-content:center; align-items:flex-start; gap:20px; padding:24px 16px; }
    @media (min-width:1024px) {
      /* 헤더는 스크롤 시 사라지므로 화면 상단에 고정 (자체 padding 32px 이 여백 역할) */
      .od-gallery { grid-column:2; position:sticky; top:0; justify-content:flex-start; padding:32px 0; }
    }
    .od-thumbs { display:none; }
    @media (min-width:640px) { .od-thumbs { display:flex; flex-direction:column; gap:12px; width:48px; flex-shrink:0; } }
    .od-thumbs .thumb { width:48px; height:48px; border:1px solid #e4e4e7; border-radius:8px; overflow:hidden; cursor:pointer; background:#fff; padding:0; display:block; flex-shrink:0; transition:border-color .15s; }
    .od-thumbs .thumb:hover { border-color:#d4d4d8; }
    .od-thumbs .thumb.active { border:1px solid var(--od-main); }
    .od-thumbs .thumb img { width:100%; height:100%; object-fit:cover; }
    .od-stage { position:relative; width:100%; max-width:520px; border-radius:8px; overflow:hidden; background:#fff; aspect-ratio:520/530; }
    @media (min-width:1024px) { .od-stage { height:530px; aspect-ratio:auto; flex-shrink:0; } }
    .od-stage img { width:100%; height:100%; object-fit:cover; display:block; }

    /* ── 주문 패널 (우) ── */
    .od-aside { background:#fff; padding:18px 20px 24px; }
    @media (min-width:1024px) { .od-aside { grid-column:4; width:520px; padding:0; } }
    .od-aside-inner { width:100%; max-width:490px; margin:0 auto; }
    @media (min-width:1024px) { .od-aside-inner { margin:0 0 0 30px; padding:20px 0 24px; } }

    .od-titlebox { border-bottom:1px solid #e4e4e7; padding-bottom:20px; }
    .od-title-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
    .od-title { font-size:30px; font-weight:600; line-height:1.25; letter-spacing:-0.04em; color:#09090b; margin:0; }
    .od-badge-n { display:inline-flex; height:20px; min-width:21px; align-items:center; justify-content:center; padding:0 5px; font-size:11px; font-weight:700; line-height:1; color:#fff; background:#F1479C; border-radius:5px; }
    .od-chip { display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap; }
    .od-chip svg { width:14px; height:14px; }
    .od-chip-point { background:#FFF7E0; color:#B07B00; border:1px solid #F3E2AA; }
    .od-chip-today { background:#EAF2FF; color:var(--od-main); border:1px solid #CCE0FF; }
    .od-intro { margin-top:8px; font-size:13px; color:#71717a; }

    /* ── 옵션 행 ── */
    .od-opts { display:flex; flex-direction:column; gap:10px; padding:28px 0 0; }
    .od-row { display:grid; grid-template-columns:84px minmax(0,1fr); align-items:center; gap:12px; }
    .od-row-top { align-items:start; }
    .od-row-top > .od-label { padding-top:14px; }
    .od-label { font-size:14px; color:#09090b; }
    .od-2col { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; min-width:0; }
    .od-2col-paper { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:8px; min-width:0; }

    /* 셀렉트/인풋 — 레퍼런스 드롭다운 버튼 룩 (부트스트랩 덮어쓰기) */
    .od-aside .form-select, .od-aside .form-control {
      height:48px; border:1px solid #e4e4e7; border-radius:8px;
      font-size:14px; letter-spacing:-0.02em; color:#3f3f46;
      padding:0 34px 0 12px; box-shadow:none; background-color:#fff;
    }
    .od-aside .form-control { padding-right:12px; }
    .od-aside .form-select:hover, .od-aside .form-control:hover { border-color:#d4d4d8; }
    .od-aside .form-select:focus, .od-aside .form-control:focus { border-color:var(--od-main); box-shadow:none; outline:0; }
    .od-aside .form-select {
      appearance:none; -webkit-appearance:none;
      background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
      background-repeat:no-repeat; background-size:16px; background-position:right 10px center;
    }
    .od-aside .form-control[readonly] { background-color:#f4f4f5; color:#71717a; }

    /* 옵션(추가상품)·후가공 — 레퍼런스 드롭다운 행. 기존 위젯 카드는 숨기고 프록시로 조작 */
    .od-hidden-widgets { display:none !important; }
    .od-fakeselect {
      display:flex; height:48px; width:100%; align-items:center;
      border:1px solid #e4e4e7; border-radius:8px; background-color:#fff;
      background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
      background-repeat:no-repeat; background-size:16px; background-position:right 10px center;
      padding:0 60px 0 12px; font-size:14px; letter-spacing:-0.02em; color:#3f3f46;
      cursor:pointer; text-align:left; transition:border-color .15s;
    }
    .od-fakeselect:hover { border-color:#d4d4d8; }
    .od-sel-list { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
    /* 선택 항목이 없을 때는 여백도 차지하지 않게 — 행 간격이 다른 행과 동일해짐 */
    .od-sel-list:empty { display:none; }
    #holder-list:empty { display:none !important; }
    .od-sel-item { display:flex; align-items:center; gap:8px; border:0; border-radius:8px; background:#f4f4f5; padding:6px; }
    .od-sel-item .nm { flex:1; min-width:0; font-size:13px; letter-spacing:-0.02em; color:#27272a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    /* 칩 썸네일 — 이미지 없으면 회색 박스 */
    .od-sel-item .thumb { width:36px; height:36px; flex-shrink:0; border-radius:6px; object-fit:cover; }
    span.thumb.thumb-ph { display:inline-block; background:#e4e4e7; }
    /* 칩 안 수량 스테퍼 — 레퍼런스 박스형(-|n|+) */
    .od-sel-item .od-step { gap:0; height:28px; border:1px solid #e4e4e7; border-radius:6px; background:#fff; overflow:hidden; }
    .od-sel-item .od-step button { width:24px; height:100%; border:0; border-radius:0; background:#fff; color:#18181b; }
    .od-sel-item .od-step button:hover { background:#fafafa; color:#18181b; }
    .od-sel-item .od-step button:first-child { border-right:1px solid #e4e4e7; }
    .od-sel-item .od-step button:last-child { border-left:1px solid #e4e4e7; }
    .od-sel-item .od-step b { min-width:38px; text-align:center; font-size:13px; color:var(--od-main); }
    .od-step { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; }
    .od-step button { display:flex; width:22px; height:22px; align-items:center; justify-content:center; border-radius:50%; border:1px solid #d4d4d8; background:#fff; color:#3f3f46; font-size:13px; line-height:1; cursor:pointer; padding:0; }
    .od-step button:hover { border-color:var(--od-main); color:var(--od-main); }
    .od-step b { min-width:14px; text-align:center; font-size:13px; color:#18181b; }
    .od-step-lg button { width:30px; height:30px; font-size:15px; }
    .od-step-lg b { min-width:20px; font-size:15px; }
    .od-sel-x { border:0; background:none; color:#a1a1aa; cursor:pointer; font-size:15px; line-height:1; padding:0 2px; flex-shrink:0; }
    .od-sel-x:hover { color:#dc3545; }
    .odg-card .odg-step { margin-left:auto; }

    /* ── 코팅 2단 드롭다운 (printhub 레퍼런스: 좌 코팅 종류 / 우 코팅 면) ── */
    #od-coating-open .min-w-0 { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    #od-coating-open.open { border-color:var(--od-main); }
    /* 칩(.od-coat-sel)이 .od-dd 안에 쌓여도 ⋯버튼·드롭다운은 트리거(높이 48px) 기준으로 고정 */
    .od-coat-dd .od-detail-btn { top:24px; }
    .od-coatdd {
      position:absolute; top:54px; left:0; z-index:50; width:100%;
      display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr);
      overflow:hidden; border:1px solid #e4e4e7; border-radius:8px; background:#fff;
      box-shadow:0 16px 34px rgba(15,23,42,.12);
    }
    .od-coatdd-col { min-width:0; padding:8px; overflow-y:auto; max-height:264px; }
    .od-coatdd-types { border-right:1px solid #e4e4e7; }
    .od-coatdd-col button {
      display:flex; height:40px; width:100%; align-items:center; border:0; border-radius:6px;
      background:transparent; padding:0 12px; text-align:left; font-size:14px;
      letter-spacing:-0.02em; color:#3f3f46; cursor:pointer; transition:background-color .15s;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .od-coatdd-col button:hover { background:#f4f4f5; }
    .od-coatdd-col button.on { background:#f4f4f5; }
    .od-coatdd-col button:disabled { background:#fafafa; color:#d4d4d8; cursor:not-allowed; }
    /* 후가공 드롭다운 카테고리 구분 헤더 (카테고리별 1개 선택) */
    .od-coatdd-col .od-coatdd-cat {
      padding:10px 12px 4px; font-size:11.5px; font-weight:700; letter-spacing:-0.01em; color:#a1a1aa;
    }
    .od-coatdd-col .od-coatdd-cat:first-child { padding-top:4px; }
    /* 선택된 코팅 칩 — 썸네일 + 명칭 + 삭제 (레퍼런스: bg-zinc-100 rounded p-1.5) */
    .od-coat-sel { margin-top:8px; display:grid; gap:6px; }
    .od-coat-sel:empty { display:none; }
    .od-coat-sel .itm { display:flex; min-height:36px; align-items:center; justify-content:space-between; gap:8px; border-radius:8px; background:#f4f4f5; padding:6px; }
    .od-coat-sel .l { display:flex; min-width:0; flex:1; align-items:center; gap:8px; }
    .od-coat-sel img { width:36px; height:36px; flex-shrink:0; border-radius:6px; object-fit:cover; }
    .od-coat-sel .nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; letter-spacing:-0.02em; color:#27272a; }
    .od-coat-sel .x { display:flex; width:28px; height:28px; flex-shrink:0; align-items:center; justify-content:center; border:0; border-radius:6px; background:none; color:#a1a1aa; cursor:pointer; padding:0; transition:color .15s, background-color .15s; }
    .od-coat-sel .x:hover { background:#e4e4e7; color:#dc3545; }
    .od-coat-sel .x:disabled { cursor:not-allowed; color:#d4d4d8; background:none; }
    .od-coat-sel .pr { flex-shrink:0; font-size:13px; letter-spacing:-0.02em; color:#3f3f46; }
    .od-coat-sel .pr-main { color:var(--od-main); font-weight:500; font-variant-numeric:tabular-nums; }
    .od-coat-sel .thumb-ph { width:36px; height:36px; flex-shrink:0; border-radius:6px; background:#e4e4e7; display:inline-block; }

    /* 후가공 칩 안 개수 버튼(금속링 아일렛) — 클릭 시 위치 선택 모달 */
    .od-coat-sel .cnt { flex-shrink:0; height:28px; min-width:64px; border:1px solid #e4e4e7; border-radius:6px; background:#fff; padding:0 8px; font-size:12px; font-weight:600; letter-spacing:-0.02em; color:var(--od-main); cursor:pointer; transition:background-color .15s; }
    .od-coat-sel .cnt:hover { background:#f0f6ff; }

    /* ── 금속링(아일렛) 위치 선택 모달 (printhub 레퍼런스) ── */
    /* body 직속으로 붙는 모달이라 .od-page 의 --od-main 이 상속되지 않음 — 여기서 재정의 */
    .odey { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.45); padding:12px; --od-main:#0068FF; }
    .odey.open { display:flex; }
    .odey-panel { display:flex; flex-direction:column; overflow:hidden; width:100%; max-width:680px; max-height:94vh; border-radius:16px; background:#fff; box-shadow:0 24px 70px rgba(15,23,42,.24); }
    .odey-head { flex-shrink:0; border-bottom:1px solid #e4e4e7; padding:18px 24px; text-align:center; }
    .odey-head h3 { margin:0; font-size:19px; font-weight:600; letter-spacing:-0.03em; color:#09090b; }
    .odey-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:20px 28px; }
    .odey-dim-h { display:flex; align-items:center; margin:0 36px 12px 0; }
    .odey-dim-h .ln { flex:1; height:1px; background:#d4d4d8; }
    .odey-dim-h .tx { margin:0 14px; font-size:14px; font-weight:500; letter-spacing:-0.02em; color:#3f3f46; white-space:nowrap; }
    .odey-wrap { position:relative; margin-right:36px; }
    .odey-rect { position:relative; height:420px; border:1px solid #d4d4d8; background:#fafafa; }
    .odey-dim-v { position:absolute; top:0; bottom:0; right:-28px; display:flex; flex-direction:column; align-items:center; }
    .odey-dim-v .ln { flex:1; width:1px; background:#d4d4d8; }
    .odey-dim-v .tx { margin:10px 0; font-size:14px; font-weight:500; letter-spacing:-0.02em; color:#3f3f46; writing-mode:vertical-rl; white-space:nowrap; }
    .odey-dots { position:absolute; display:flex; justify-content:space-between; }
    .odey-dots.c { justify-content:center; }
    /* 상·하단 1개 — 왼쪽/오른쪽 적용 선택에 따라 점 위치 이동 (시안: 아일렛버튼.png) */
    .odey-dots.one-left { justify-content:flex-start; }
    .odey-dots.one-right { justify-content:flex-end; }
    .odey-dots-top { top:12px; left:12px; right:12px; }
    .odey-dots-bottom { bottom:12px; left:12px; right:12px; }
    /* 좌/우 변은 상하 모서리 점(상/하변 소속)과 겹치지 않게 안쪽으로 들여 배치 — 레퍼런스 동일 */
    .odey-dots-left { left:12px; top:38px; bottom:38px; flex-direction:column; }
    .odey-dots-right { right:12px; top:38px; bottom:38px; flex-direction:column; }
    .odey-dots i { width:14px; height:14px; border-radius:50%; background:var(--od-main); box-shadow:0 1px 2px rgba(15,23,42,.12); }
    .odey-ctl { position:absolute; z-index:5; display:flex; align-items:center; gap:8px; }
    .odey-ctl-top { top:40px; left:50%; transform:translateX(-50%); }
    .odey-ctl-bottom { bottom:40px; left:50%; transform:translateX(-50%); }
    .odey-ctl-left { left:40px; top:50%; transform:translateY(-50%); flex-direction:column-reverse; }
    .odey-ctl-right { right:40px; top:50%; transform:translateY(-50%); flex-direction:column-reverse; }
    .odey-ctl button { display:flex; width:40px; height:40px; align-items:center; justify-content:center; border:0; border-radius:7px; background:#e6f0ff; color:var(--od-main); font-size:20px; line-height:1; cursor:pointer; padding:0; transition:background-color .15s; }
    .odey-ctl button:hover { background:#dbe7fb; }
    .odey-ctl button:disabled { opacity:.4; cursor:not-allowed; }
    .odey-ctl b { min-width:24px; text-align:center; font-size:13px; font-weight:600; color:var(--od-main); font-variant-numeric:tabular-nums; }
    /* 상·하단 아일렛 1개일 때 왼쪽/오른쪽 적용 토글 (레퍼런스 printhub-wine, 시안: 아일렛버튼.png)
       상단: 스테퍼 위 / 하단: 스테퍼 아래 배치 */
    .odey-align { position:absolute; z-index:5; left:50%; transform:translateX(-50%); display:none; gap:6px; }
    .odey-align.show { display:flex; }
    .odey-align-top { top:4px; }
    .odey-align-bottom { bottom:4px; }
    .odey-align button { height:30px; padding:0 12px; border:1px solid #e4e4e7; border-radius:6px; background:#fff;
      color:#71717a; font-size:12px; white-space:nowrap; cursor:pointer; transition:.15s; }
    .odey-align button:hover { border-color:#d4d4d8; }
    .odey-align button.on { border-color:var(--od-main); background:#EAF2FF; color:var(--od-main); font-weight:600; }
    .odey-presets { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:28px; }
    .odey-preset { position:relative; width:88px; height:88px; border:1px solid #d4d4d8; border-radius:0; background:#fff; cursor:pointer; padding:0; transition:background-color .15s, border-color .15s; }
    .odey-preset:hover { background:#f4f4f5; }
    .odey-preset.on { border-color:var(--od-main); background:#eef4ff; }
    .odey-preset .r { position:absolute; left:6px; right:6px; display:flex; justify-content:space-between; }
    .odey-preset .r.t { top:5px; }
    .odey-preset .r.b { bottom:5px; }
    .odey-preset .r i { width:6px; height:6px; border-radius:50%; background:#a1a1aa; }
    .odey-preset.on .r i { background:var(--od-main); }
    .odey-note { margin-top:14px; text-align:center; }
    .odey-note p { margin:0; font-size:14px; font-weight:500; letter-spacing:-0.02em; color:#18181b; }
    .odey-note p b { display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; margin:0 2px; border-radius:4px; background:#e6f0ff; color:var(--od-main); font-weight:600; }
    .odey-note small { display:block; margin-top:6px; font-size:12px; letter-spacing:-0.02em; color:#71717a; }
    .odey-foot { flex-shrink:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; border-top:1px solid #e4e4e7; padding:16px 40px; }
    .odey-foot button { height:48px; border-radius:7px; font-size:14px; font-weight:600; letter-spacing:-0.02em; cursor:pointer; }
    .odey-cancel { border:1px solid #d4d4d8; background:#fff; color:#3f3f46; }
    .odey-cancel:hover { background:#fafafa; }
    .odey-done { border:0; background:var(--od-main); color:#fff; transition:opacity .15s; }
    .odey-done:hover { opacity:.9; }
    .odey-done:disabled { opacity:.4; cursor:not-allowed; }

    /* 모양재단 서브옵션(flex 행) 안에 래핑된 드롭다운 — 도형 셀렉트가 남은 폭을 차지 */
    #shape-cutting-detail .od-dd { flex:1; }

    /* ── 추가구매 드롭다운 — 단일 컬럼 목록 (printhub 레퍼런스) ── */
    .od-addondd { grid-template-columns:1fr; }
    .od-addondd .od-coatdd-col { border-right:0; max-height:280px; }
    .od-addondd .od-coatdd-col button.ph { background:#e6f0ff; color:var(--od-main); }
    .od-addondd .od-coatdd-col button.ph:hover { background:#e6f0ff; }

    /* 규격 안내 스트립 + 직접입력 */
    .od-size-strip { margin-top:8px; border-radius:6px; background:#f4f4f5; padding:8px 12px; font-size:12px; color:#71717a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .od-free { margin-top:8px; display:none; grid-template-columns:1fr 1fr; gap:8px; }
    .od-free.show { display:grid; }
    .od-free-item { position:relative; }
    .od-free-item input.form-control { width:100%; text-align:center; padding:0 38px 0 42px; }
    .od-free-item .lab-l, .od-free-item .lab-r { position:absolute; top:50%; transform:translateY(-50%); font-size:12px; color:#a1a1aa; z-index:2; }
    .od-free-item .lab-l { left:12px; }
    .od-free-item .lab-r { right:12px; }

    /* ── 안내 체크리스트 ── */
    .od-note { border-top:1px solid #e4e4e7; margin-top:28px; padding-top:24px; display:grid; gap:8px; font-size:13px; line-height:20px; color:#71717a; }
    .od-note .item { display:flex; gap:8px; align-items:flex-start; min-width:0; }
    .od-note svg { width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--od-main); }
    .od-note .strong { font-weight:500; color:#52525b; }

    /* ── 견적 요약 + 버튼 ── */
    .od-summary { border-top:1px solid #e4e4e7; margin-top:24px; padding-top:20px; }
    #inv-post-items { font-size:13px; color:#3f3f46; }
    #inv-post-items:not(:empty) { padding-bottom:6px; border-bottom:1px dashed #e4e4e7; margin-bottom:14px; }
    .od-sum { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
    /* 제작사양 한 줄 요약 — printhub 레퍼런스 (13px, zinc-600) */
    .od-sum-specs { margin:0 0 8px; max-width:300px; font-size:13px; font-weight:500; line-height:20px; letter-spacing:-0.02em; color:#52525b; }
    .od-sum-specs:empty { display:none; }
    .od-sum-tax { font-size:12px; font-weight:500; color:#a1a1aa; }
    .od-sum-due { font-size:12px; color:#71717a; margin-top:4px; }
    #inv-due-date { color:var(--od-main); font-weight:600; }
    .od-sum-total { display:flex; align-items:center; gap:8px; white-space:nowrap; }
    .od-sum-total .cap { font-size:13px; color:#71717a; }
    .od-sum-total strong { font-size:26px; font-weight:700; letter-spacing:-0.05em; color:var(--od-main); line-height:1; }
    /* 견적서(104px) + 장바구니 + 주문하기 — printhub 레퍼런스 3버튼 그리드 */
    .od-buttons { display:grid; grid-template-columns:104px minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:20px; }
    .od-buttons button { display:flex; height:56px; align-items:center; justify-content:center; gap:8px; border-radius:8px; font-size:15px; letter-spacing:-0.02em; cursor:pointer; transition:background-color .15s, opacity .15s, border-color .15s; }
    #btn-quote { border:1px solid #e4e4e7; background:#fff; color:#3f3f46; }
    #btn-quote:hover { border-color:#d4d4d8; }
    #btn-cart { border:1px solid var(--od-main); background:#fff; color:var(--od-main); }
    #btn-cart:hover { background:#EAF2FF; }
    #btn-order, #btn-order-open { border:0; background:var(--od-main); color:#fff; }
    #btn-order:hover, #btn-order-open:hover { opacity:.9; }

    /* ── 주문 진행 팝업 (파일업로드·주문 제목·메모 — upload-row 파셜) ── */
    /* 주문 진행 팝업 — body 직속 이동(.od-grid 스태킹 컨텍스트 탈출)으로 .od-page 의 --od-main 미상속 → 재정의 */
    .odg.odp { --od-main:#0068FF; }
    /* SweetAlert — 기본 z-index(1060)가 주문 팝업(.odg 9999)·견적 모달(.od-est 10000)보다 낮아 가려짐 → 최상위로 */
    .swal2-container { z-index: 10050 !important; }
    .odg-panel.odp-panel { max-width:550px; height:790px; max-height:92vh; }
    .odp-head { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 0; }
    .odp-head h3 { margin:0; font-size:18px; font-weight:700; letter-spacing:-0.03em; color:#09090b; }
    .odp-x { border:0; background:none; font-size:24px; line-height:1; color:#a1a1aa; cursor:pointer; }
    .odp-x:hover { color:#3f3f46; }
    .odp-panel { position:relative; }
    .odp-webhard { margin:4px 0 0; font-size:12px; letter-spacing:-0.02em; color:#a1a1aa; }
    /* 2단계 슬라이드 — 페이지 폭 100%씩 가로 트랙, transform 으로 전환 (printhub-wine 레퍼런스) */
    .odp-slider { flex:1; min-height:0; overflow:hidden; }
    .odp-track { display:flex; height:100%; transition:transform .28s ease; }
    .odp-page { flex:0 0 100%; min-width:0; overflow-y:auto; padding:16px 24px 12px; }
    .odp-sec { margin:16px 0 8px; font-size:13px; font-weight:700; letter-spacing:-0.02em; color:#09090b; }
    .odp-hint { margin:8px 0 0; font-size:12px; letter-spacing:-0.02em; color:#a1a1aa; }
    .odp-2col { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    /* 세그먼트(라디오 필) — 교정확인·수령 방법 */
    .odp-seg { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
    .odp-seg-4 { grid-template-columns:repeat(4,1fr); margin-top:0; }
    .odp-seg label { display:block; cursor:pointer; }
    .odp-seg input { position:absolute; opacity:0; pointer-events:none; }
    .odp-seg span {
      display:flex; height:40px; align-items:center; justify-content:center;
      border:1px solid #e4e4e7; border-radius:8px; background:#fff;
      font-size:13px; letter-spacing:-0.02em; color:#3f3f46; transition:.15s; white-space:nowrap;
    }
    .odp-seg input:checked + span { border-color:var(--od-main); background:#EAF2FF; color:var(--od-main); font-weight:600; }
    /* 파일 없음 확인 오버레이 */
    .odp-nofile { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.2); border-radius:12px; }
    .odp-nofile-box { width:calc(100% - 64px); max-width:400px; border-radius:12px; background:#fff; padding:24px; box-shadow:0 16px 40px rgba(15,23,42,.25); }
    .odp-nofile-box p { margin:0 0 16px; font-size:13.5px; letter-spacing:-0.02em; color:#52525c; text-align:center; line-height:1.6; }
    .odp-nofile-box p b { color:#09090b; font-size:15px; display:block; margin-bottom:6px; }
    .odp-nofile-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .odp-nofile-btns button { height:44px; border-radius:8px; font-size:14px; letter-spacing:-0.02em; cursor:pointer; }
    .odp-input { width:100%; border:1px solid #e4e4e7; border-radius:8px; padding:10px 12px; font-size:14px; letter-spacing:-0.02em; color:#18181b; outline:none; transition:border-color .15s; resize:vertical; }
    /* 연락처 3분할 (담당자·받는 분) */
    .odp-phone3 { display:grid; grid-template-columns:1fr 12px 1fr 12px 1fr; gap:4px; align-items:center; }
    .odp-phone3 .dash { text-align:center; color:#a1a1aa; }
    .odp-phone3 .odp-input { text-align:center; }
    /* 받는 분 주소 — 1줄: 우편번호+주소+주소찾기 / 2줄: 상세주소 */
    .odp-addr-row { display:grid; grid-template-columns:96px minmax(0,1fr) 84px; gap:6px; margin-bottom:6px; }
    .odp-addr-row .odp-input[readonly] { background:#fafafa; color:#52525c; }
    .odp-addr-btn {
      border:1px solid #d4d4d8; border-radius:8px; background:#fff; color:#3f3f46;
      font-size:13px; letter-spacing:-0.02em; cursor:pointer; white-space:nowrap; transition:background-color .15s;
    }
    .odp-addr-btn:hover { background:#f4f4f5; }
    .odp-input:focus { border-color:var(--od-main); }
    .odp-specs { border-radius:8px; background:#fafafa; padding:12px 14px; font-size:13px; letter-spacing:-0.02em; color:#52525c; line-height:1.6; }
    .odp-foot { display:grid; grid-template-columns:120px minmax(0,1fr); gap:10px; padding:16px 24px 20px; border-top:1px solid #f0f0f1; }
    .odp-foot button { height:48px; border-radius:8px; font-size:15px; letter-spacing:-0.02em; cursor:pointer; transition:background-color .15s, opacity .15s; }
    .odp-cancel { border:1px solid #e4e4e7; background:#fff; color:#3f3f46; }
    .odp-cancel:hover { border-color:#d4d4d8; background:#fafafa; }
    .odp-primary { border:0; background:var(--od-main); color:#fff; }
    .odp-primary:hover { opacity:.9; }

    /* 셀렉트+직접입력 콤보 (수량류 위젯 'both') */
    .od-combo { min-width:0; }
    .od-combo-input { display:none; gap:8px; align-items:center; }
    .od-combo-input input { flex:1; min-width:0; }
    .od-combo-back {
      flex-shrink:0; height:48px; border:1px solid #e4e4e7; border-radius:8px; background:#fff;
      padding:0 14px; font-size:13px; letter-spacing:-0.02em; color:#3f3f46; cursor:pointer;
      transition:border-color .12s, background-color .12s;
    }
    .od-combo-back:hover { border-color:#d4d4d8; background:#fafafa; }

    /* 금액 변경 하이라이트 */
    @keyframes inv-flash { 0% { opacity:.3; } 100% { opacity:1; } }
    .inv-updated { animation:inv-flash .5s ease-out; }

    /* ── 파일 업로드 ── */
    .upload-zone {
      border:2px dashed #e4e4e7; border-radius:8px; padding:26px 16px;
      text-align:center; cursor:pointer; color:#a1a1aa; font-size:0.86rem; user-select:none;
      transition:border-color .2s, background-color .2s, color .2s;
    }
    .upload-zone:hover, .upload-zone.drag-over { border-color:var(--od-main); background-color:#F5F9FF; color:var(--od-main); }
    .upload-zone .upload-icon { font-size:1.9rem; display:block; margin-bottom:6px; }
    .upload-zone .upload-hint { font-size:0.75rem; margin-top:4px; color:#d4d4d8; }
    .od-upload-note { margin-top:6px; font-size:12px; color:#a1a1aa; }

    .upload-file-item {
      display:flex; align-items:center; justify-content:space-between;
      padding:6px 10px; background:#fafafa; border:1px solid #f0f0f2; border-radius:6px;
      margin-top:6px; font-size:0.84rem; gap:8px;
    }
    .upload-file-item .file-info { display:flex; align-items:center; gap:6px; overflow:hidden; }
    .upload-file-item .file-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .upload-file-item .file-size { flex-shrink:0; color:#a1a1aa; font-size:0.78rem; }
    .upload-file-item .file-remove { flex-shrink:0; border:none; background:none; color:#a1a1aa; cursor:pointer; padding:0; line-height:1; font-size:1rem; }
    .upload-file-item .file-remove:hover { color:#dc3545; }

    /* 커스텀 필드(부트스트랩 그리드) 폭 보정 */
    .od-aside .row { --bs-gutter-x:0.75rem; }

    /* ── 옵션안내(⋯) 버튼 — 셀렉트 우측, 호버 시 문구로 전환 ── */
    .od-dd { position:relative; min-width:0; }
    .od-dd select { padding-right:60px; }
    .od-detail-btn {
      position:absolute; right:28px; top:50%; transform:translateY(-50%);
      display:flex; align-items:center; justify-content:center; gap:3px;
      height:32px; min-width:28px; padding:0 5px; z-index:3;
      border:0; background:transparent; cursor:pointer; color:#a1a1aa;
    }
    .od-detail-btn .dot { width:3px; height:3px; border-radius:50%; background:currentColor; }
    .od-detail-btn .txt { display:none; font-size:12px; font-weight:500; letter-spacing:-0.02em; color:var(--od-main); white-space:nowrap; line-height:1; }
    .od-dd:hover .od-detail-btn .dot { display:none; }
    .od-dd:hover .od-detail-btn .txt { display:inline; }

    /* ── 옵션 안내 팝업 (레퍼런스 tK 모달) ── */
    .odg { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); padding:0 12px; }
    .odg-panel { display:flex; flex-direction:column; overflow:hidden; width:100%; max-width:760px; height:min(86vh,720px); border-radius:12px; background:#fff; box-shadow:0 24px 70px rgba(15,23,42,.24); }
    .odg-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-shrink:0; border-bottom:1px solid #e4e4e7; padding:20px 24px; }
    .odg-titlerow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
    .odg-titlerow h3 { margin:0; font-size:18px; font-weight:600; letter-spacing:-0.03em; color:#09090b; }
    .odg-pill { display:inline-flex; height:28px; align-items:center; border-radius:999px; background:#f4f4f5; padding:0 12px; font-size:12px; font-weight:600; color:#52525b; }
    .odg-pill-total { background:#EAF2FF; color:var(--od-main,#0068FF); }
    .odg-sub { margin:4px 0 0; font-size:13px; font-weight:500; color:#71717a; }
    .odg-close { display:flex; width:36px; height:36px; align-items:center; justify-content:center; flex-shrink:0; border-radius:8px; border:1px solid #e4e4e7; background:#fff; color:#71717a; cursor:pointer; transition:.15s; }
    .odg-close:hover { border-color:#d4d4d8; color:#18181b; }
    .odg-body { position:relative; display:grid; min-height:0; flex:1; overflow:hidden; padding:24px; grid-template-columns:minmax(0,1fr) 260px; gap:24px; }
    .odg-gridwrap { position:relative; min-height:0; overflow:hidden; }
    .odg-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-content:start; overflow-y:auto; overscroll-behavior:contain; padding-right:8px; padding-bottom:56px; min-height:0; height:100%; scrollbar-width:none; -ms-overflow-style:none; }
    /* 안내 팝업 카테고리 그룹 헤더 (후가공 — 카테고리별 1개 선택) */
    .odg-grid .odg-group {
      grid-column:1/-1; margin-top:4px; padding-bottom:2px; border-bottom:1px solid #f0f0f1;
      font-size:12.5px; font-weight:700; letter-spacing:-0.02em; color:#18181b;
    }
    .odg-grid .odg-group:first-child { margin-top:0; }
    .odg-grid::-webkit-scrollbar { display:none; }
    .odg-more { position:absolute; left:0; right:8px; bottom:0; display:none; align-items:flex-end; justify-content:center; border:0; padding:32px 0 10px; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%); cursor:pointer; }
    .odg-more.show { display:flex; }
    .odg-more-pill { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:999px; border:1px solid #e4e4e7; background:#fff; box-shadow:0 2px 10px rgba(15,23,42,.1); font-size:13px; font-weight:600; color:#52525b; transition:.15s; }
    .odg-more:hover .odg-more-pill { border-color:#d4d4d8; color:#18181b; }
    .odg-card { min-width:0; }
    .odg-cell { min-width:0; }
    .odg-cell .odg-card { width:100%; }
    .odg-price { margin:8px 0 0; text-align:center; font-size:14px; font-weight:400; color:#18181b; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
    /* overflow:hidden 을 버튼에 주면 이 페이지 CSS 조합에서 높이가 라인박스로 붕괴 — 이미지 영역만 클리핑 */
    .odg-card { position:relative; border-radius:8px; border:1px solid #e4e4e7; background:#fff; text-align:left; cursor:pointer; padding:0; transition:box-shadow .15s, border-color .15s; }
    .odg-card:hover { box-shadow:0 6px 20px rgba(15,23,42,.12); border-color:#d4d4d8; }
    .odg-card.selected { border-color:var(--od-main); }
    .odg-card.active { border-color:var(--od-main); } /* 활성 보더 1px — 기존 1px 링 그림자 제거 */
    .odg-card.active .chk { border-color:var(--od-main); background:var(--od-main); }
    .odg-card.active .nm { color:var(--od-main); }
    .odg-card .img { height:155px; width:100%; background:#f4f4f5; display:flex; align-items:center; justify-content:center; font-size:13px; color:#a1a1aa; border-radius:7px 7px 0 0; overflow:hidden; }
    .odg-card .img img { width:100%; height:100%; object-fit:cover; }
    .odg-card .name { display:flex; align-items:center; gap:8px; padding:9px 12px; min-width:0; }
    .odg-card .chk { display:flex; width:16px; height:16px; flex-shrink:0; align-items:center; justify-content:center; border-radius:4px; border:1.5px solid #d4d4d8; background:#fff; color:#fff; }
    .odg-card.selected .chk { border-color:var(--od-main); background:var(--od-main); }
    /* 라디오형 표시 — 점은 JS 가 .dotted 로 부여: 단일 선택 팝업은 전체 1개, 후가공은 카테고리마다 1개.
       카드를 클릭하면 그 범위의 점(과 파란 강조)이 클릭한 카드로 바로 이동 */
    .odg-card .chk.radio { border-radius:50%; background:#fff; transition:border-color .15s, box-shadow .15s; }
    .odg-card .chk.radio::after { content:''; width:8px; height:8px; border-radius:50%; background:var(--od-main); transform:scale(0); transition:transform .18s cubic-bezier(.34,1.56,.64,1); }
    .odg-card:hover .chk.radio { border-color:#a1a1aa; }
    .odg-card.dotted .chk.radio { border-color:var(--od-main); box-shadow:0 0 0 3px rgba(0,104,255,.12); }
    .odg-card.dotted .chk.radio::after { transform:scale(1); }
    /* 점을 잃은 이전 적용 카드(selected 인데 점이 다른 카드로 이동)는 라디오·카드 모두 기본 상태로 */
    .odg-card.selected:not(.dotted) .chk.radio { border-color:#d4d4d8; box-shadow:none; }
    .odg-card.selected:not(.dotted):has(.chk.radio) { border-color:#e4e4e7; }
    .odg-card.selected:not(.dotted):has(.chk.radio) .nm { color:#18181b; }
    .odg-card .nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:#18181b; }
    .odg-card .nm-wrap { display:flex; flex-direction:column; min-width:0; gap:2px; }
    .odg-card .prc-r { margin-left:auto; flex-shrink:0; font-size:12px; font-weight:600; letter-spacing:-0.02em; color:#52525b; }
    .odg-card .prc { font-size:12px; color:#71717a; letter-spacing:-0.02em; white-space:nowrap; }
    .odg-card.selected .nm { color:var(--od-main); }
    .odg-preview { display:flex; flex-direction:column; min-height:0; overflow:hidden; border-radius:8px; border:1px solid #e4e4e7; background:#fafafa; padding:16px; }
    .odg-preview .img { height:150px; width:100%; border-radius:8px; background:#f4f4f5; display:flex; align-items:center; justify-content:center; font-size:13px; color:#a1a1aa; margin-bottom:16px; flex-shrink:0; }
    .odg-preview .img img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
    .odg-preview .nm { font-size:13px; font-weight:600; color:#09090b; }
    .odg-preview .empty { margin:auto; font-size:14px; color:#a1a1aa; }
    .odg-preview .desc { margin-top:10px; font-size:14px; font-weight:500; line-height:1.55; color:#52525b; white-space:pre-line; } /* pre-line: 관리자 포장 설명(textarea) 줄바꿈 유지 */
    .odg-preview .apply { margin-top:auto; height:40px; width:100%; flex-shrink:0; border-radius:8px; border:0; background:#EAF2FF; color:var(--od-main); font-size:13px; font-weight:600; cursor:pointer; transition:.15s; }
    .odg-preview .apply:hover { background:#DCE9FF; }
    .odg-preview .apply:disabled { background:#e4e4e7; color:#71717a; cursor:default; }
    /* 거치대 프리뷰 수량 설정 — 스테퍼 + 직접입력 */
    .odg-preview .odg-qty { margin-top:auto; padding-top:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:6px; }
    .odg-preview .odg-qty + .apply { margin-top:10px; }
    .odg-preview .odg-qty button {
      width:32px; height:32px; border:1px solid #e4e4e7; border-radius:7px; background:#fff;
      color:#3f3f46; font-size:16px; line-height:1; cursor:pointer; transition:.12s;
    }
    .odg-preview .odg-qty button:hover { border-color:#a1a1aa; }
    .odg-preview .odg-qty input {
      width:64px; height:32px; border:1px solid #e4e4e7; border-radius:7px; background:#fff;
      text-align:center; font-size:13.5px; font-weight:600; color:#18181b; outline:none;
      -moz-appearance:textfield;
    }
    .odg-preview .odg-qty input::-webkit-outer-spin-button,
    .odg-preview .odg-qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
    .odg-preview .odg-qty input:focus { border-color:var(--od-main); }
    .odg-preview .odg-qty .u { font-size:13px; color:#71717a; }

    /* 아일렛 현재 위치 표시 + 위치 수정 보조 버튼 (선택된 위치선택형 아일렛 프리뷰) */
    /* 출고방법 팝업 — 출고 지연 안내 박스 (시안: 출고경고.png) */
    .odg-preview .odg-shipnote { margin-top:auto; flex-shrink:0; width:100%; background:#fff; border:1px solid #f0f0f2; border-radius:8px; padding:12px 14px; text-align:left; }
    .odg-preview .odg-shipnote .t { margin:0 0 6px; padding-left:8px; border-left:3px solid var(--od-main); font-size:12.5px; font-weight:700; color:#18181b; }
    .odg-preview .odg-shipnote .d { margin:0; font-size:12px; color:#71717a; line-height:1.55; }
    .odg-preview .odg-shipnote + .apply { margin-top:10px; }
    .odg-preview .odg-eyepos { margin-top:auto; padding-top:10px; flex-shrink:0; font-size:12px; color:#52525c; text-align:center; }
    .odg-preview .odg-eyepos + .apply.apply-sub { margin-top:8px; }
    .odg-preview .apply.apply-sub { background:#f4f4f5; color:#3f3f46; }
    .odg-preview .apply.apply-sub:hover { background:#e4e4e7; }
    .odg-preview .apply.apply-sub + .apply { margin-top:8px; }

    /* ── 거치대 종류보기 팝업 — 전용 와이드 레이아웃 (시안: 거치대종류보기.png) ── */
    .odg.odg-holder .odg-panel { max-width:1140px; height:min(90vh,800px); }
    .odg.odg-holder .odg-body { grid-template-columns:300px minmax(0,1fr); }
    .odg.odg-holder .odg-card .img { height:120px; background:#fafafa; }
    .odg.odg-holder .odg-preview { flex-direction:row; padding:0; background:#fff; border-color:#ececef; }
    .odh-img { flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; padding:24px; }
    .odh-img img { max-width:100%; max-height:100%; object-fit:contain; }
    .odh-noimg { font-size:13px; color:#a1a1aa; }
    .odh-info { width:46%; min-width:320px; max-width:420px; flex-shrink:0; display:flex; flex-direction:column; background:#f6f6f8; padding:26px 22px; overflow-y:auto; }
    .odh-info h4 { margin:0 0 14px; font-size:22px; font-weight:700; letter-spacing:-0.03em; color:#18181b; }
    .odh-desc { margin:0 0 16px; font-size:13.5px; font-weight:500; color:#3f3f46; line-height:1.6; white-space:pre-line; }
    .odh-chips { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:16px; }
    .odh-chip { display:inline-block; max-width:100%; border-radius:8px; background:#ececef; padding:8px 12px; font-size:13px; letter-spacing:-0.02em; color:#18181b; }
    .odh-comp { border-radius:10px; background:#ececef; padding:14px 16px; }
    .odh-comp .t { margin:0 0 12px; font-size:14px; font-weight:600; color:#18181b; }
    .odh-comp .imgs { display:flex; flex-wrap:wrap; gap:10px; }
    .odh-comp .imgs span { width:92px; height:92px; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .odh-comp .imgs img { max-width:100%; max-height:100%; object-fit:contain; }
    .odh-foot { margin-top:auto; padding-top:18px; }
    .odh-foot-row { display:flex; align-items:stretch; gap:10px; }
    .odh-foot-row .odg-qty { margin:0; padding:0; flex-shrink:0; display:flex; align-items:center; gap:6px; }
    .odh-foot-row .apply { flex:1 1 auto; margin:0; height:44px; }
    .odh-foot .apply.apply-sub { width:100%; margin-top:8px; height:38px; }
    .odh-sum { margin:12px 0 0; text-align:right; font-size:13px; font-weight:500; color:#52525b; }
    .odh-sum b { color:var(--od-main,#0068FF); font-weight:700; }

    @media (max-width:639px) {
      .odg-body { grid-template-columns:minmax(0,1fr); padding:12px; }
      .odg-preview { display:none; }
      .odg-card .img { height:111px; } /* 레퍼런스 모바일 썸네일 높이 */
      .odg.odg-holder .odg-body { grid-template-columns:minmax(0,1fr); }
    }

    /* ── 견적서 출력 팝업 — printhub 레퍼런스 ── */
    .odf-quote { margin-top:12px; display:flex; height:40px; width:100%; align-items:center; justify-content:center; gap:6px; border:0; border-radius:8px; background:#f4f4f5; color:#52525b; font-size:13px; font-weight:600; letter-spacing:-0.03em; cursor:pointer; transition:background-color .15s; }
    .odf-quote:hover { background:#e4e4e7; }
    .od-est { position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; overflow:auto; overscroll-behavior:contain; background:rgba(0,0,0,.45); padding:12px; --od-main:#0068FF; } /* body 직속 이동으로 변수 스코프 밖 — 재정의 */
    .od-est-shell { width:100%; max-width:960px; max-height:calc(100dvh - 48px); overflow:auto; border-radius:12px; background:#fff; box-shadow:0 24px 70px rgba(15,23,42,.24); -webkit-overflow-scrolling:touch; }
    .od-est-actions { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #e4e4e7; background:#fff; padding:14px 20px; }
    .od-est-actions h2 { margin:0; font-size:18px; font-weight:600; letter-spacing:-0.03em; color:#09090b; }
    .od-est-actions .btns { display:flex; align-items:center; gap:8px; }
    .od-est-actions .btns button { height:36px; padding:0 16px; border-radius:8px; font-size:13px; font-weight:500; letter-spacing:-0.02em; cursor:pointer; transition:.15s; }
    #od-est-close { border:1px solid #e4e4e7; background:#fff; color:#3f3f46; }
    #od-est-close:hover { border-color:#d4d4d8; }
    #od-est-go { border:0; background:var(--od-main); color:#fff; }
    #od-est-go:hover { opacity:.9; }
    .od-est-paper { padding:32px; color:#09090b; background:#fff; }
    .od-est-title { margin:0; text-align:center; font-size:32px; font-weight:700; letter-spacing:-0.05em; }
    .od-est-grid { margin-top:32px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; }
    .od-est-row { display:grid; grid-template-columns:110px minmax(0,1fr); align-items:center; min-height:40px; border-bottom:1px solid #e4e4e7; font-size:13px; }
    .od-est-row.wide { grid-template-columns:118px minmax(0,1fr); }
    .od-est-row .l { font-weight:600; }
    .od-est-row .l.stmt { grid-column:1 / -1; }
    .od-est-row .r { min-width:0; word-break:keep-all; color:#52525b; }
    .od-est-note { margin:12px 0 0; font-size:13px; line-height:1.6; letter-spacing:-0.02em; color:#3f3f46; }
    .od-est-items { margin-top:40px; border-top:2px solid #09090b; }
    .od-est-th { display:grid; grid-template-columns:64px minmax(0,1fr) 120px 150px; border-bottom:1px solid #e4e4e7; padding:16px 0; text-align:center; font-size:13px; font-weight:700; }
    .od-est-th .amt-h { text-align:right; padding-right:24px; }
    .od-est-th .sub { font-weight:700; }
    .od-est-tr { display:grid; grid-template-columns:64px minmax(0,1fr) 120px 150px; align-items:center; min-height:104px; padding:16px 0; font-size:13px; }
    .od-est-tr .no { text-align:center; font-size:16px; font-weight:700; }
    .od-est-tr .spec { margin:0; line-height:1.6; letter-spacing:-0.02em; word-break:keep-all; }
    .od-est-tr .qty { text-align:center; word-break:keep-all; }
    .od-est-tr .amt { text-align:right; padding-right:24px; font-weight:500; }
    .od-est-sums { border-top:1px solid #a1a1aa; font-size:14px; }
    .od-est-sums .row { display:grid; grid-template-columns:1fr 180px; align-items:center; min-height:48px; border-bottom:1px solid #e4e4e7; padding:0 24px; font-weight:600; }
    .od-est-sums .row .v { text-align:right; }
    .od-est-sums .row.total { grid-template-columns:1fr minmax(0,360px); min-height:56px; background:#fafafa; border-bottom:2px solid #09090b; font-weight:700; }
    .od-est-sums .row.total .vat { font-size:12px; font-weight:400; color:#71717a; }
    .od-est-sums .row.total .v { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px 12px; }
    .od-est-sums .row.total .kor { font-size:12px; font-weight:600; letter-spacing:-0.03em; color:#71717a; }
    .od-est-sums .row.total .won { font-size:20px; font-weight:700; }
    .od-est-tail { height:40px; }
    @media (max-width:767px) {
      .od-est-paper { padding:24px 16px; }
      .od-est-title { font-size:24px; }
      .od-est-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
      .od-est-th, .od-est-tr { grid-template-columns:34px minmax(0,1fr) 58px 68px; font-size:11px; }
      .od-est-th .sub { display:none; }
      .od-est-th .amt-h, .od-est-tr .amt { padding-right:4px; }
      .od-est-sums .row { grid-template-columns:1fr 96px; padding:0 12px; }
      .od-est-sums .row.total { grid-template-columns:1fr; }
    }
    @media print {
      body.od-est-open { overflow:visible !important; height:auto !important; background:#fff !important; }
      body.od-est-open > :not(#od-est) { display:none !important; }
      body.od-est-open #od-est { display:block !important; position:static; padding:0; background:#fff; overflow:visible; }
      body.od-est-open .od-est-shell { max-width:none; max-height:none; overflow:visible; border-radius:0; box-shadow:none; }
      body.od-est-open .od-est-actions { display:none !important; }
      @page { size:A4; margin:14mm; }
    }

    /* ── 우측 고정 견적창 (제작사양 안내) — 1600px 이상에서 표시 ── */
    .od-float { display:none; }
    @media (min-width:1600px) {
      .od-float { display:block; position:fixed; left:calc((100vw - 1200px) / 2 + 1217px); top:180px; z-index:80; width:190px; }
    }
    .odf-card { overflow:hidden; border-radius:12px; border:1px solid #e4e4e7; background:#fff; }
    .odf-head { background:#f4f4f5; padding:12px; }
    .odf-head h2 { margin:0; font-size:14px; font-weight:600; letter-spacing:-0.03em; color:#09090b; }
    .odf-body { padding:16px 12px; }
    .odf-specs { display:grid; gap:10px; font-size:12.5px; line-height:1.25; letter-spacing:-0.03em; color:#52525b; }
    .odf-hr { height:1px; background:#e4e4e7; margin:16px 0; }
    .odf-costs { display:grid; gap:10px; font-size:12.5px; letter-spacing:-0.03em; color:#09090b; }
    .odf-costs > div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .odf-total { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .odf-total .cap { font-size:13px; color:#09090b; }
    .odf-total .amt { display:block; text-align:right; font-size:15px; font-weight:700; letter-spacing:-0.04em; color:var(--od-main); }
    .odf-total .ship { display:block; margin-top:2px; text-align:right; font-size:11px; font-weight:500; color:#71717a; }
    .odf-due { display:none; margin-top:12px; align-items:flex-start; gap:8px; border-radius:10px; background:#E6F0FF; padding:10px 12px; font-size:12px; line-height:20px; letter-spacing:-0.03em; color:var(--od-main); }
    .odf-due.show { display:flex; }
    .odf-due svg { width:20px; height:20px; flex-shrink:0; margin-top:2px; }
    .odf-due .t1 { display:block; color:#27272a; }
    .odf-close { display:flex; width:32px; height:32px; margin:12px auto 0; align-items:center; justify-content:center; border-radius:50%; border:0; background:#f4f4f5; color:#52525b; cursor:pointer; transition:.15s; }
    .odf-close:hover { background:#e4e4e7; color:#09090b; }
    .odf-close svg { width:16px; height:16px; }
    .odf-open { display:flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:8px; border:1px solid #e4e4e7; background:#fff; color:#3f3f46; cursor:pointer; transition:.15s; }
    .odf-open:hover { border-color:var(--od-main); color:var(--od-main); }
    .odf-open svg { width:16px; height:16px; }

    /* ── 하단 고정 결제바 — 견적 요약(.od-summary)이 화면 밖일 때 중앙 플로팅 카드로 표시 ── */
    /* 레퍼런스(printhub): 1600px 이상에선 첫 화면부터 항상 고정 표시(JS matchMedia) —
       옵션 목록 끝의 견적/버튼 박스는 숨기고, 목록이 바에 가려지지 않게 여백 확보 */
    /* 1600px 이상: 인플로우 요약 박스도 고정 박스와 동일한 레이아웃(레퍼런스 도킹 상태) —
       제작사양 요약줄·견적서 버튼 없이 [공급가|총비용] + [장바구니|주문하기] 2열 */
    @media (min-width: 1600px) {
      .od-hero { padding-bottom:40px; }
      .od-aside .od-sum-specs, .od-aside #btn-quote { display:none; }
      .od-aside .od-buttons { grid-template-columns:1fr 1fr; }
      .od-aside .od-sum-tax { font-size:13px; font-weight:600; letter-spacing:-0.03em; }
      .od-aside .od-sum-total strong { font-size:30px; }
    }
    .od-fixedbar { position:fixed; left:0; right:0; bottom:20px; z-index:70; display:none; justify-content:center; padding:0 16px; pointer-events:none; }
    .od-fixedbar.show { display:flex; }
    .od-fb-card { width:100%; max-width:1000px; background:#fff; border-radius:16px; border:1px solid #ececef; box-shadow:0 10px 30px rgba(15,23,42,.10); padding:14px 16px; pointer-events:auto; }
    .od-fb-detail { display:none; padding:2px 4px 12px 4px; margin-bottom:12px; border-bottom:1px solid #f0f0f2; }
    .od-fb-detail.open { display:block; }
    .od-fb-opts { margin:0; font-size:13px; font-weight:500; line-height:20px; letter-spacing:-0.02em; color:#52525b; }
    .od-fb-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
    .od-fb-toggle { display:flex; width:40px; height:40px; flex-shrink:0; align-items:center; justify-content:center; border-radius:8px; border:1px solid #e4e4e7; background:#fff; color:#52525b; cursor:pointer; transition:.15s; }
    .od-fb-toggle:hover { border-color:#d4d4d8; color:#18181b; }
    .od-fb-toggle svg { width:16px; height:16px; transition:transform .2s; }
    .od-fb-toggle.open svg { transform:rotate(180deg); }
    .od-fb-tax { margin:0; font-size:14px; font-weight:500; letter-spacing:-0.02em; color:#52525b; white-space:nowrap; }
    .od-fb-total { display:flex; align-items:center; gap:8px; white-space:nowrap; margin-left:auto; }
    .od-fb-total .cap { font-size:13px; color:#52525b; }
    .od-fb-total strong { font-size:24px; font-weight:700; letter-spacing:-0.05em; color:var(--od-main); line-height:1; }
    .od-fb-div { width:1px; height:36px; background:#e4e4e7; flex-shrink:0; }
    .od-fb-btns { display:contents; } /* 1600px 미만: 기존 한 줄 배치 유지 */
    button.od-fb-btn { display:flex; height:48px; width:180px; align-items:center; justify-content:center; gap:8px; border-radius:8px; font-size:15px; letter-spacing:-0.02em; cursor:pointer; transition:background-color .15s, opacity .15s; }
    button.od-fb-btn svg { width:17px; height:17px; }
    #odb-cart { border:1px solid var(--od-main); background:#fff; color:var(--od-main); }
    #odb-cart:hover { background:#EAF2FF; }
    #odb-order { border:0; background:var(--od-main); color:#fff; }
    #odb-order:hover { opacity:.9; }
    @media (max-width:767px) {
      .od-fb-total { margin-left:auto; }
      .od-fb-div { display:none; }
      button.od-fb-btn { width:calc(50% - 8px); flex:1; }
    }
    /* ── 1600px 이상: printhub 레퍼런스 — 아사이드 컬럼 위치에 흰 박스로 하단 고정(1단계).
       [공급가+부가세 | 총 제작 비용] 행 + [장바구니][주문하기] 2열 행.
       .od-fb-float(3단계: 요약을 지나친 뒤)일 때는 기본 플로팅 카드 디자인으로 복귀 ── */
    @media (min-width:1600px) {
      .od-fixedbar:not(.od-fb-float) { padding:0; }
      .od-fixedbar.show:not(.od-fb-float) { display:grid; grid-template-columns:minmax(0,1fr) minmax(520px,610px) minmax(14px,70px) 520px minmax(0,1fr); }
      .od-fixedbar:not(.od-fb-float) .od-fb-card {
        grid-column:4; width:520px; max-width:none;
        border:0; border-radius:0; box-shadow:none;
        padding:0 0 20px 30px; background:#fff;
      }
      .od-fixedbar:not(.od-fb-float) .od-fb-toggle,
      .od-fixedbar:not(.od-fb-float) .od-fb-detail,
      .od-fixedbar:not(.od-fb-float) .od-fb-div { display:none !important; }
      .od-fixedbar:not(.od-fb-float) .od-fb-row {
        display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
        gap:20px 16px; border-top:1px solid #e4e4e7; padding-top:20px;
      }
      .od-fixedbar:not(.od-fb-float) .od-fb-tax { font-size:13px; font-weight:600; letter-spacing:-0.03em; color:#a1a1aa; }
      .od-fixedbar:not(.od-fb-float) .od-fb-total { margin-left:0; }
      .od-fixedbar:not(.od-fb-float) .od-fb-total .cap { font-size:13px; color:#71717a; }
      .od-fixedbar:not(.od-fb-float) .od-fb-total strong { font-size:30px; }
      .od-fixedbar:not(.od-fb-float) .od-fb-btns { display:grid; grid-column:1 / -1; grid-template-columns:1fr 1fr; gap:12px; }
      .od-fixedbar:not(.od-fb-float) button.od-fb-btn { width:100%; height:56px; }
    }

    /* ── 하단 상세 탭 (상품 안내/작업가이드/구매 후기/주문 안내) ── */
    .od-tabs { background:#fff; }
    .od-tabbar { position:sticky; top:0; z-index:5; border-bottom:1px solid #e4e4e7; background:#fff; }
    .od-tabbar-in { position:relative; max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); padding:0 16px; }
    .od-tab { display:flex; height:60px; align-items:center; justify-content:center; border:0; background:none; cursor:pointer; font-size:15px; font-weight:600; letter-spacing:-0.02em; color:#71717a; transition:color .15s; }
    .od-tab:hover { color:#18181b; }
    .od-tab.active { color:var(--od-main); }
    .od-tab-ind { position:absolute; bottom:-1px; height:2px; background:var(--od-main); transition:left .3s ease, width .3s ease; }
    .od-tabbody { max-width:1200px; margin:0 auto; padding:64px 16px 0; }
    .od-sec { scroll-margin-top:84px; }
    .od-sec h2 { margin:0; font-size:26px; font-weight:600; letter-spacing:-0.04em; color:#09090b; }
    .od-sec-0 { border-bottom:1px solid #e4e4e7; padding-bottom:64px; }
    .od-sec-1, .od-sec-2 { border-bottom:1px solid #e4e4e7; padding:64px 0; }
    .od-sec-3 { padding:64px 0 96px; }
    .od-feat-grid { margin-top:32px; display:grid; gap:20px; }
    .od-feat { border-radius:8px; background:#F8F9FC; padding:24px; }
    .od-feat .t { font-size:18px; font-weight:600; letter-spacing:-0.03em; color:#09090b; }
    .od-feat .d { margin-top:12px; font-size:14px; font-weight:500; line-height:24px; letter-spacing:-0.02em; color:#71717a; }
    .od-guide-list { margin-top:32px; display:grid; gap:16px; }
    .od-guide-card { border-radius:8px; background:#fff; padding:20px; border:1px solid rgba(228,228,231,.7); box-shadow:0 1px 2px rgba(0,0,0,.05); }
    .od-guide-head { display:flex; align-items:center; gap:12px; }
    .od-guide-num { display:flex; width:28px; height:28px; flex-shrink:0; align-items:center; justify-content:center; border-radius:50%; background:#F1F6FF; font-size:13px; font-weight:600; color:var(--od-main); }
    .od-guide-head h3 { margin:0; font-size:16px; font-weight:600; letter-spacing:-0.03em; color:#09090b; }
    .od-guide-body { margin-top:16px; padding-left:40px; display:grid; gap:8px; font-size:14px; font-weight:500; line-height:24px; letter-spacing:-0.02em; color:#52525b; }
    .od-review-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
    .od-rv-left { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
    .od-rv-sat { display:inline-flex; height:44px; align-items:center; gap:12px; border-radius:999px; background:#f4f4f5; padding:0 20px; font-size:13px; font-weight:500; letter-spacing:-0.02em; color:#52525b; }
    .od-rv-sat strong { font-size:24px; font-weight:600; letter-spacing:-0.04em; color:#09090b; }
    .od-rv-tools { display:flex; align-items:center; gap:16px; }
    .od-rv-sort { border:0; background:none; cursor:pointer; font-size:14px; font-weight:500; letter-spacing:-0.02em; color:#71717a; transition:color .15s; }
    .od-rv-sort:hover { color:#18181b; }
    .od-rv-sort.active { color:var(--od-main); }
    .od-rv-filter { position:relative; }
    .od-rv-filter-btn { display:flex; height:44px; width:190px; align-items:center; justify-content:space-between; border-radius:8px; border:1px solid #d4d4d8; background:#fff; padding:0 16px; font-size:14px; letter-spacing:-0.02em; color:#27272a; cursor:pointer; transition:border-color .15s; }
    .od-rv-filter-btn:hover { border-color:#a1a1aa; }
    .od-rv-filter-btn svg { width:18px; height:18px; color:#71717a; }
    .od-rv-filter-menu { display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:100%; border:1px solid #e4e4e7; border-radius:8px; background:#fff; box-shadow:0 12px 30px rgba(15,23,42,.12); padding:6px; }
    .od-rv-filter-menu.open { display:block; }
    .od-rv-filter-menu button { display:block; width:100%; border:0; background:none; text-align:left; padding:9px 10px; font-size:14px; color:#3f3f46; border-radius:6px; cursor:pointer; }
    .od-rv-filter-menu button:hover { background:#f6f7f9; }
    .od-rv-filter-menu button.active { color:var(--od-main); font-weight:600; }
    .od-rv-list { margin-top:32px; border-top:1px solid #e4e4e7; border-bottom:1px solid #e4e4e7; }
    .od-rv-item { padding:24px 0; }
    .od-rv-item + .od-rv-item { border-top:1px solid #e4e4e7; }
    .od-rv-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
    .od-rv-meta-l { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
    .od-rv-stars { display:inline-flex; gap:2px; }
    .od-rv-stars svg { width:18px; height:18px; }
    .od-rv-id { font-size:13px; font-weight:500; color:#71717a; }
    .od-rv-badge { border-radius:999px; background:#EEF4FF; padding:4px 10px; font-size:12px; font-weight:600; letter-spacing:-0.02em; color:var(--od-main); }
    .od-rv-date { font-size:13px; font-weight:600; color:#a1a1aa; }
    .od-rv-body { margin-top:12px; display:grid; gap:20px; }
    .od-rv-opts { margin:0; font-size:13px; font-weight:500; line-height:20px; letter-spacing:-0.02em; color:#71717a; }
    .od-rv-text { margin:12px 0 0; font-size:15px; font-weight:500; line-height:28px; letter-spacing:-0.02em; color:#09090b; white-space:pre-wrap; word-break:break-word; }
    .od-rv-photos { display:flex; flex-wrap:wrap; gap:8px; align-content:start; }
    .od-rv-photo { width:50px; height:50px; border-radius:7px; overflow:hidden; background:#f4f4f5; border:0; padding:0; cursor:pointer; flex-shrink:0; }
    .od-rv-photo img { width:100%; height:100%; object-fit:cover; }
    .od-rv-photo:hover { outline:2px solid var(--od-main); outline-offset:2px; }
    @media (min-width:1024px) {
      .od-rv-body { grid-template-columns:minmax(0,1fr) 282px; }
      .od-rv-photos { justify-content:flex-end; }
    }
    .od-rv-pager { margin-top:24px; display:flex; justify-content:center; gap:6px; }
    .od-rv-page { display:flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; border:0; background:none; font-size:14px; color:#3f3f46; cursor:pointer; transition:background-color .15s; }
    .od-rv-page:hover { background:#F7F7F7; }
    .od-rv-page.active { background:#18181b; color:#fff; }
    .od-rv-empty { padding:56px 0; text-align:center; font-size:14px; font-weight:500; color:#a1a1aa; }
    .od-rv-lightbox { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.7); padding:24px; cursor:zoom-out; }
    .od-rv-lightbox.open { display:flex; }
    .od-rv-lightbox img { max-width:min(90vw,900px); max-height:85vh; border-radius:12px; background:#fff; }
    .od-order-info { margin-top:32px; display:grid; gap:12px; font-size:15px; font-weight:500; line-height:28px; letter-spacing:-0.02em; color:#52525b; }
    .od-order-info p { margin:0; }
    @media (min-width:768px) {
      .od-feat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    }
    @media (min-width:1024px) {
      .od-tabbar-in { padding:0; }
      .od-tabbody { padding-left:0; padding-right:0; }
    }

    /* ── 공용 추가 규칙 (배너 외 주문폼) ───────────────────────── */
    /* 직접입력 항상 노출형 — 장폭형(현수막 등)은 길이를 항상 입력 */
    .od-free.od-free-static { display:grid; }

    /* 폼 JS 의 .closest('.row') 계약 때문에 .row 를 함께 가진 옵션 행 — 부트스트랩 그리드 무력화 */
    .od-aside .od-row.row { display:grid; margin:0; }
    .od-aside .od-row.row > * { padding:0; margin:0; width:auto; max-width:none; }

    /* 라디오 행 (출력면 등) */
    .od-radio-wrap { display:flex; align-items:center; gap:20px; min-height:48px; flex-wrap:wrap; }
    .od-radio-wrap .form-check { margin:0; padding:0; display:flex; align-items:center; gap:6px; }
    .od-radio-wrap .form-check-input { margin:0; }
    .od-radio-wrap .form-check-label { font-size:14px; color:#3f3f46; }

    /* 체크 행 (7일출고 등) */
    .od-check-wrap { display:flex; align-items:center; min-height:48px; }
    .od-check-wrap .form-check { margin:0; }
    .od-check-wrap .form-check-label { font-size:13px; color:#3f3f46; }

    /* 3열 셀렉트 (보조시트지: 폭/길이/매수) */
    .od-3col { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 84px; gap:8px; min-width:0; }

    /* 마감방식 위치 서브옵션 — 기본 숨김 (long-banner.js 가 토글) */
    .finish-position-detail { display:none; }