/* ══════════════════════════════════════════════════════════════════════════ [옵션 검토 — 좌우 2단] 2026-09-20 · 사장님 지시 ┌──────────────┬────────────────────────────────┐ │ [대표 썸네일] │ ☑ ⭐ [옵션이미지] 옵션명 가격 사유 │ │ 240px │ ☑ ○ [옵션이미지] 옵션명 가격 사유 │ │ 상품명 │ … │ │ 기준가·상한 │ │ └──────────────┴────────────────────────────────┘ ★ 두 화면(/opt-review · 불사자 팝업)이 **이 파일 하나**를 읽는다. 따로 두면 또 갈라진다 — 오늘 그래서 /opt-review 만 뒤처져 있었다. ★ 왼쪽은 굴려도 따라온다(sticky). 옵션이 스무 개여도 무엇을 고르는 물건인지 늘 보여야 한다. ══════════════════════════════════════════════════════════════════════ */ .bs-opt2 { display: flex; gap: 14px; align-items: flex-start; } /* ── 왼쪽: 대표 썸네일 + 설명 ─────────────────────────────────────────── */ .bs-opt2-left { flex: 0 0 320px; width: 320px; /* ★[맨 위에서 16px · 2026-09-20 · 사장님 지시] 표를 끝까지 굴려도 썸네일·상품명·기준가가 계속 보여야 한다. ★ sticky 는 조상 중 하나라도 overflow 가 visible 이 아니면 안 먹는다. 실측 2026-09-20: /opt-review 는 조상 전부 visible 이라 잘 먹는다 (900px 굴려도 윗변이 16px 에 붙어 있다). 조상에 overflow 를 걸지 마라. */ position: sticky; top: 16px; align-self: flex-start; } .bs-opt2-left img.bs-opt2-thumb { width: 320px; height: 320px; object-fit: cover; border: 1px solid #e0d5d0; border-radius: 8px; background: #fff; cursor: zoom-in; display: block; } .bs-opt2-left .bs-opt2-noimg { width: 320px; height: 320px; border: 1px dashed #cfc4be; border-radius: 8px; background: #fafafa; color: #b0a8a4; font-size: 14px; display: flex; align-items: center; justify-content: center; } /* ★ 글씨 14px 이상 — 사장님 지시. 줄이지 마라. */ .bs-opt2-left .bs-opt2-name { margin-top: 9px; font-size: 15px; font-weight: 700; line-height: 1.45; color: #263238; word-break: keep-all; } .bs-opt2-left .bs-opt2-meta { margin-top: 6px; font-size: 14px; line-height: 1.6; color: #5d4037; } .bs-opt2-left .bs-opt2-meta b { color: #263238; } .bs-opt2-left .bs-opt2-sub { margin-top: 4px; font-size: 13px; color: #8d9aa3; } /* ── 오른쪽: 옵션 표 ───────────────────────────────────────────────────── */ /* min-width:0 이 없으면 flex 자식이 안 줄어 표가 밖으로 넘친다(1280px 에서 실측). */ .bs-opt2-right { flex: 1 1 auto; min-width: 0; } /* ★ 옵션 이미지 80px 이상 — 44px 은 너무 작아 무엇인지 안 보인다(사장님 지시). */ table.bs-optman img.bs-hoverimg, table.bs-optman img.omimg { width: 84px !important; height: 84px !important; object-fit: cover; border-radius: 5px; cursor: zoom-in; } /* ══ [표는 오른쪽 끝까지 · 줄은 접지 않는다 · 2026-09-20 · 사장님 지시] ══════ [무엇이 있었나] 오른쪽이 비어 있는데 가격·사유가 두 줄로 접혔다: "576,600 / 원" "대표가 2.5 / 배 초과" ★ 글씨를 줄이지 않는다. 줄이 접히는 게 문제지 글씨가 큰 게 문제가 아니다. ★ 칸 폭은 여기 한 곳에서 정한다 — 두 화면이 같은 파일을 읽는다. */ table.bs-optman { width: 100%; table-layout: auto; } /* 가격·사유는 한 줄로. 쪼개지면 읽을 수 없다. */ table.bs-optman td:nth-child(5), table.bs-optman th:nth-child(5) { white-space: nowrap; width: 1%; } table.bs-optman td:nth-child(6), table.bs-optman th:nth-child(6) { white-space: nowrap; width: 1%; } /* 체크·대표·이미지는 내용만큼만 */ table.bs-optman td:nth-child(1), table.bs-optman th:nth-child(1), table.bs-optman td:nth-child(2), table.bs-optman th:nth-child(2), table.bs-optman td:nth-child(3), table.bs-optman th:nth-child(3) { white-space: nowrap; width: 1%; } /* ★ 남는 폭은 전부 옵션명에. 이름이 길어도 다 보인다. */ table.bs-optman td:nth-child(4), table.bs-optman th:nth-child(4) { width: auto; } /* 좁은 화면에서는 위아래로 접는다 — 표가 찌그러지는 것보다 낫다. */ @media (max-width: 900px) { .bs-opt2 { display: block; } .bs-opt2-left { position: static; width: auto; flex: none; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; } .bs-opt2-left img.bs-opt2-thumb, .bs-opt2-left .bs-opt2-noimg { width: 140px; height: 140px; } } /* ── 왼쪽 아래: 상세페이지 미리보기 ────────────────────────────────────── ★[2026-09-20 · 사장님 지시] 세로로 길게 죽 이어서, 폭은 좁게. 따로 굴린다. ★ 이 상자는 **보기 전용**이다. 지우는 기능은 불사자 MCP 에 없다(전체 55개 확인). 지우려면 상세 HTML 을 통째로 다시 적용해야 한다(bulsaja_detail_apply) — 되돌릴 수 없는 일이라 사장님 승인 없이 만들지 않았다. */ .bs-opt2-detail { margin-top: 10px; width: 300px; border: 1px solid #e0d5d0; border-radius: 8px; background: #fff; } .bs-opt2-detail .bs-opt2-dhead { padding: 5px 9px; font-size: 13px; font-weight: 700; color: #5d4037; background: #f5efec; border-bottom: 1px solid #e0d5d0; border-radius: 7px 7px 0 0; display: flex; align-items: center; gap: 6px; } /* ★[상세페이지 편집 · 2026-09-20 · 사장님 지시] 새 창으로 연다 — 검토하던 자리가 안 날아가게. ★ 주소는 bulsaja.com/products/manage/list/ 하나뿐이다(실측 200). '/products/manage/detail/…' 은 404 다. 탭을 지정하는 조각은 확인하지 못했다 (로그인이 필요해 그 화면을 볼 수 없다) — **추측해서 붙이지 마라.** */ .bs-opt2-detail .bs-opt2-dedit { margin-left: auto; padding: 2px 8px; font-size: 12px; font-weight: 700; border: 1px solid #b0bec5; border-radius: 5px; background: #fff; color: #37474f; cursor: pointer; white-space: nowrap; } .bs-opt2-detail .bs-opt2-dedit:hover { border-color: #78909c; } .bs-opt2-detail .bs-opt2-dbody { max-height: 560px; overflow-y: auto; padding: 6px; } .bs-opt2-detail .bs-opt2-dbody img { display: block; width: 100%; height: auto; border-radius: 4px; margin-bottom: 4px; background: #fafafa; } .bs-opt2-detail .bs-opt2-dnone { padding: 14px 9px; font-size: 13px; color: #b0a8a4; text-align: center; } /* ══ [아래 단추 줄은 한 벌이다 · 2026-09-20 · 사장님 지시] ═════════════════ "단추 줄을 그리는 곳이 몇 군데인지 먼저 세라. 한 벌로 합쳐라." 전: 불사자 팝업과 /opt-review 가 **각자** 그렸다(글자·색·크기가 달랐다). ★ 클래스를 범위로 두어 다른 화면의 단추에 영향을 주지 않는다 (/opt-review 는 전역 `button {}` 을 썼는데 팝업에 그대로 쓰면 남의 단추까지 바뀐다). */ .bs-optbtns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; } .bs-optbtns button { font: inherit; font-size: 14px; font-weight: 700; line-height: 1.3; border-radius: 7px; padding: 8px 16px; cursor: pointer; border: 1px solid #e0e0e0; background: #fff; color: #263238; } .bs-optbtns button:hover { border-color: #b0bec5; } .bs-optbtns button.go { background: #2e7d32; border-color: #2e7d32; color: #fff; } .bs-optbtns button.del { color: #c62828; border-color: #ef9a9a; } .bs-optbtns button:disabled { opacity: .5; cursor: not-allowed; } /* 안전망 해제 — /opt-review 에는 없는 단추다. 오른쪽 끝에 조용히 둔다. */ .bs-optbtns button.unlock { margin-left: auto; font-size: 12px; padding: 6px 11px; color: #c62828; border-color: #ef9a9a; font-weight: 400; } /* [AI 판단은 참고 · 2026-09-25 · 사장님 지시] 사유 칸은 흐린 글씨 — 막는 말이 아니다 */ table.bs-optman td.bsom-reason { color: #b0a8a4 !important; font-size: 11.5px; } table.bs-optman td.bsom-reason b { color: #e65100; }