/* 2026-08-14 PART C 추가분 — 상품 옵션 선택 UI + 이미지 확대.
   기존 rxshop.css / monster-daiso-flow-v310.css는 건드리지 않고
   새 클래스(rxshop-options-select*, rxshop-image-zoom*)만 정의합니다. */

.rxshop-options-select{margin:14px 0}
.rxshop-options-select dt{font-weight:700;font-size:14px;color:#111;margin-bottom:8px}
.rxshop-option-list{display:flex;flex-wrap:wrap;gap:8px}
.rxshop-option-item{position:relative;display:inline-flex}
.rxshop-option-item input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.rxshop-option-item span{display:inline-flex;align-items:center;height:38px;padding:0 16px;border:1px solid #dfe2e6;border-radius:999px;font-size:19px;font-weight:600;color:#333;background:#fff;transition:border-color .15s,color .15s,background .15s}
.rxshop-option-item input:checked + span{border-color:#fa140a;color:#fa140a;background:#fff5f5;font-weight:800}
.rxshop-option-item input:focus-visible + span{outline:2px solid #ef233c;outline-offset:2px}

/* 장바구니/주문서 목록에 옵션 표기 */
.rxcheckout-item em,.ds310-cart-row .product em{display:block;margin-top:2px;font-style:normal;font-size:12px;color:#8b909a}

/* 이미지 확대 */
.rxshop-detail-image.rxshop-zoomable{cursor:zoom-in}
.rxshop-image-zoom{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);padding:24px}
.rxshop-image-zoom[hidden]{display:none}
.rxshop-image-zoom img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.rxshop-image-zoom__close{position:absolute;top:16px;right:16px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.rxshop-image-zoom__close:hover{background:rgba(255,255,255,.28)}

@media (max-width:900px){
    .rxshop-image-zoom{padding:12px}
    .rxshop-image-zoom__close{top:10px;right:10px}
}