/* 기본 스타일 (PC 및 공통) */
.navigation {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 15px;
color: #000;
}
.navigation a {
text-decoration: none;
color: #000;
white-space: nowrap;
position: relative;
padding-right: 12px;
font-weight: 600; /* 더 두껍게 */
}
.navigation a::after {
content: ">";
position: absolute;
right: 2px;
color: #222; /* 더 진한 구분자 */
}
.navigation i {
font-style: normal;
color: #222; /* 최종 카테고리도 더 진하게 */
padding-left: 4px;
font-weight: 600;
}
/* 마지막 a 태그의 > 구분자는 제거 */
.navigation a:last-of-type::after {
content: "";
}
/* 모바일 반응형 스타일 */
@media screen and (max-width: 768px) {
.navigation {
font-size: 13px;
line-height: 1.6;
gap: 4px;
}
.navigation a {
padding-right: 10px;
}
.navigation a::after {
right: 1px;
}
.container {
padding: 0 10px;
word-break: break-word;
}
}
/* 확대된 레이어 */
.zoom-preview {
position: absolute;
border: 1px solid #ccc;
width: 300px;
height: 300px;
overflow: hidden;
display: none;
z-index: 1000;
background: #fff;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
/* 확대 이미지 */
.zoom-preview img {
position: absolute;
max-width: none;
pointer-events: none;
}
/* ===== 공통(이미 사용 중이면 유지) ===== */
#optionArea .goods-option{ margin:12px 0 0; padding:12px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.04); }
#optionArea .goods-option .top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
#optionArea .goods-option .top .add-option{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid #e2e8f0; border-radius:999px; text-decoration:none; font-size:13px; color:#0f172a; background:#f8fafc; }
#optionArea .goods-option .middle{ display:grid; gap:10px; align-items:center; }
#optionArea .qty-box{ display:inline-flex; align-items:center; gap:6px; background:#f8fafc; padding:8px; border-radius:10px; }
#optionArea .qty-box .btnQty{ appearance:none; -webkit-appearance:none; width:36px; height:36px; border:0; border-radius:10px; background:#e2e8f0; cursor:pointer; }
#optionArea .qty-box .qty{ width:64px; height:36px; text-align:center; border:1px solid #e5e7eb; border-radius:10px; font-size:14px; background:#fff; color:#111827; }
#optionArea .right-side{ display:flex; align-items:center; gap:10px; }
#optionArea .price{ margin:0; font-size:15px; color:#111827; }
#optionArea .f-msb{ font-weight:800; }
/* === 모바일 옵션 바텀시트 UI === */
@media (max-width: 768px){
.custom-select.mainOp .selected{
display:flex; align-items:center; justify-content:space-between;
width:100%; padding:16px; border:1px solid #e5e7eb; border-radius:12px;
background:#fff; font-size:16px; line-height:1.2;
}
.custom-select.mainOp .selected.on{ border-color:#111827; }
.custom-select.mainOp .select-items{
position:fixed; left:0; right:0; bottom:0;
max-height:72vh; overflow:auto; -webkit-overflow-scrolling:touch;
background:#fff; border-top-left-radius:16px; border-top-right-radius:16px;
box-shadow:0 -8px 24px rgba(0,0,0,.18);
padding:8px 12px 12px; margin-top:0; border:0;
transform:translateY(100%); opacity:0; pointer-events:none;
z-index:99991;
}
.custom-select.mainOp .selected.on + .select-items{
display:block !important;
transform:translateY(0); opacity:1; pointer-events:auto;
transition:transform .18s ease-out, opacity .18s ease-out;
}
.custom-select.mainOp .select-items::before{
content:""; display:block; width:38px; height:4px; border-radius:999px;
background:#e5e7eb; margin:10px auto 6px;
}
.custom-select.mainOp .select-items li{ list-style:none; }
.custom-select.mainOp .select-items li + li{ margin-top:8px; }
.custom-select.mainOp .select-items a{
display:flex; align-items:center; gap:8px;
text-decoration:none; color:#111827; background:#fff;
border:1px solid #e5e7eb; border-radius:12px;
padding:14px 16px; min-height:56px;
}
.custom-select.mainOp .select-items a:hover{ background:#f9fafb; }
.custom-select.mainOp .select-items a.sold-out{
color:#9ca3af; background:#fafafa; border-color:#e5e7eb;
}
/* 바텀시트 어두운 배경 */
.opt-sheet-backdrop{
position:fixed; inset:0; background:rgba(0,0,0,.45);
opacity:0; pointer-events:none; z-index:99990; transition:opacity .15s ease;
}
.opt-sheet-backdrop.is-open{ opacity:1; pointer-events:auto; }
}
/* ===== 데스크톱 최적화 (PC 전용) ===== */
@media (min-width: 769px){
/* 제목이 버튼에 눌리지 않게 폭 분리 */
#optionArea .goods-option .top .title{
margin:0; font-size:15px; font-weight:700; color:#0f172a; line-height:1.3;
max-width: calc(100% - 120px); /* add-option 자리 확보 */
display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; overflow:hidden;
word-break: keep-all;
}
/* 행 배치: [수량박스] [남은 공간] [가격/삭제] */
#optionArea .goods-option .middle{
grid-template-columns: auto 1fr auto;
}
#optionArea .qty-box{ min-width: 160px; }
#optionArea .right-side{ min-width: 170px; justify-content:flex-end; }
/* 추가선택(PC) 옵션 텍스트 넘침 방지 */
#optionArea .addon-item.-pc .option{
max-width: 48vw; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
}
/* ===== 버튼 아이콘 표시 (마크업에 value를 못 넣는 경우용) ===== */
/* input에는 ::before가 안 먹으므로 배경 SVG로 처리 */
#optionArea .qty-box .btnQty.subtract{
background-image: url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
#optionArea .qty-box .btnQty.add{
background-image: url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
/* 삭제 버튼 정렬 이슈 예방 */
#optionArea .btn-del{ display:inline-flex; }
#optionArea .btn-del img{ width:22px; height:22px; display:block; }
/* “최소/최대” 안내가 본문에 붙도록 */
#optionArea .limit-info{ margin:6px 0 0; font-size:12px; color:#64748b; }
/* PC에서 '추가구성' 버튼 줄바꿈 방지 + 폭 고정 + 스타일 유지 */
@media (min-width:769px){
html.opt-ui-v2 #optionArea .goods-option .top{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
}
html.opt-ui-v2 #optionArea .goods-option .top .title{
flex:1 1 auto !important; /* 제목은 남는 공간만 사용 */
max-width:100% !important;
}
html.opt-ui-v2 #optionArea .goods-option .top .add-option{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:8px 12px !important;
border-radius:999px !important;
background:#ff6b00 !important; /* 주황 */
border:1px solid #ff6b00 !important;
color:#fff !important;
font-weight:800 !important;
/* ★ 줄바꿈/쪼개짐 방지 */
white-space:nowrap !important;
word-break:keep-all !important;
overflow-wrap:normal !important;
flex:0 0 auto !important; /* 버튼 폭 줄어들지 않게 */
min-width:110px; /* 필요 시 100~120px로 조정 */
}
html.opt-ui-v2 #optionArea .goods-option .top .add-option:hover{
background:#ef4444 !important; /* 오버시 빨강 */
border-color:#ef4444 !important;
}
/* 추가된 옵션 카드들 간격을 조금 더 자연스럽게 */
html.opt-ui-v2 #optionArea .goods-option + .goods-option,
html.opt-ui-v2 #optionArea .add-goods + .add-goods,
html.opt-ui-v2 #optionArea .addon-item + .addon-item,
html.opt-ui-v2 #optionArea [id^="addProBody_"] + [id^="addProBody_"]{
margin-top:12px !important;
}
}
/* ===================================================================
쇼핑몰 상세 옵션 UI v2 (scoped by .opt-ui-v2)
- 팝업/추가구성/수량버튼/PC 레이아웃 강제
- 테마 역오버라이드 방지: 스코프 + 선택적 !important
=================================================================== */
/* ===== 팝업 레이어 (모바일/PC 모두) ===== */
.opt-ui-v2 #proSubLyForm .default-pop{
position:fixed !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important;
width:min(680px,96vw) !important; max-height:92vh !important;
background:#fff !important; border-radius:16px !important;
box-shadow:0 20px 48px rgba(0,0,0,.22) !important; z-index:100200 !important;
overflow:hidden !important; box-sizing:border-box !important;
font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans KR",Helvetica,Arial,sans-serif;
}
.opt-ui-v2 #proSubLyForm .default-pop .head{
display:flex !important; align-items:center !important; justify-content:space-between !important;
height:56px !important; padding:0 16px !important; border-bottom:1px solid #e5e7eb !important; background:#f8fafc !important;
}
.opt-ui-v2 #proSubLyForm .default-pop .head .title{ margin:0 !important; font-size:16px !important; font-weight:700 !important; color:#0f172a !important; }
.opt-ui-v2 #proSubLyForm .default-pop .add-option-box{
max-height:calc(92vh - 56px - 64px) !important; padding:12px 16px !important;
overflow:auto !important; -webkit-overflow-scrolling:touch !important;
}
.opt-ui-v2 #proSubLyForm .default-pop .btn-wrap{
display:flex !important; gap:10px !important; align-items:center !important; height:64px !important; padding:8px 16px !important;
border-top:1px solid #e5e7eb !important; background:#fff !important;
}
.opt-ui-v2 #proSubLyForm .default-pop .btn-wrap .btn{
flex:1 1 0 !important; height:48px !important; border-radius:12px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
font-size:15px !important; font-weight:700 !important; text-decoration:none !important;
}
.opt-ui-v2 #proSubLyForm .default-pop .btn-wrap .btn1{ background:#0f172a !important; color:#fff !important; }
.opt-ui-v2 #proSubLyForm .default-pop .btn-wrap .btn2{ background:#e2e8f0 !important; color:#0f172a !important; }
/* 팝업 내부 드롭다운: 메인 바텀시트 스타일 상쇄 */
.opt-ui-v2 #proSubLyForm .default-pop .custom-select .selected{
display:flex !important; align-items:center !important; justify-content:space-between !important;
width:100% !important; padding:14px 16px !important; border:1px solid #e5e7eb !important; border-radius:12px !important; background:#fff !important; font-size:15px !important; cursor:pointer !important;
}
.opt-ui-v2 #proSubLyForm .default-pop .custom-select .selected.on{ border-color:#0f172a !important; }
.opt-ui-v2 #proSubLyForm .default-pop .custom-select .select-items{
position:static !important; transform:none !important; opacity:1 !important; pointer-events:auto !important;
display:none; margin-top:8px !important; padding:8px !important;
border:1px solid #e5e7eb !important; border-radius:12px !important; background:#fff !important;
max-height:40vh !important; overflow:auto !important; -webkit-overflow-scrolling:touch !important; z-index:100210 !important;
}
/* ===== 옵션 선택 후 카드 공통 ===== */
.opt-ui-v2 #optionArea .card{
border:1px solid #e5e7eb !important; border-radius:12px !important; background:#fff !important;
box-shadow:0 2px 8px rgba(0,0,0,.04) !important;
}
.opt-ui-v2 #optionArea .goods-option{ margin:12px 0 0 !important; padding:12px !important; }
.opt-ui-v2 #optionArea .goods-option .top{
display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; margin-bottom:8px !important;
}
.opt-ui-v2 #optionArea .goods-option .top .title{
margin:0 !important; font-size:15px !important; font-weight:700 !important; color:#0f172a !important; line-height:1.3 !important;
display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
}
/* ===== 수량 박스 + 버튼 (모바일/PC 공통) ===== */
.opt-ui-v2 #optionArea .qty-box{
display:inline-flex !important; align-items:center !important; gap:6px !important; background:#f8fafc !important; padding:8px !important; border-radius:10px !important;
}
.opt-ui-v2 #optionArea .qty-box .btnQty{
appearance:none !important; -webkit-appearance:none !important;
width:36px !important; height:36px !important; border:0 !important; border-radius:10px !important;
background:#e2e8f0 !important; cursor:pointer !important; position:relative !important;
line-height:1 !important; font-size:14px !important; color:#0f172a !important;
}
/* 버튼 텍스트가 숨겨져도 아이콘 보이게(배경 SVG) */
.opt-ui-v2 #optionArea .qty-box .btnQty.subtract{
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important; background-position:center !important; background-size:18px 18px !important;
}
.opt-ui-v2 #optionArea .qty-box .btnQty.add{
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important; background-position:center !important; background-size:18px 18px !important;
}
.opt-ui-v2 #optionArea .qty-box .qty{
width:64px !important; height:36px !important; text-align:center !important;
border:1px solid #e5e7eb !important; border-radius:10px !important; font-size:14px !important;
background:#fff !important; color:#111827 !important;
}
/* ===== PC 레이아웃 고정 ===== */
@media (min-width:769px){
.opt-ui-v2 #optionArea .goods-option .top .title{ max-width:calc(100% - 120px) !important; word-break:keep-all !important; }
.opt-ui-v2 #optionArea .goods-option .middle{ display:grid !important; grid-template-columns:auto 1fr auto !important; gap:10px !important; align-items:center !important; }
.opt-ui-v2 #optionArea .qty-box{ min-width:160px !important; }
.opt-ui-v2 #optionArea .right-side{ min-width:170px !important; justify-content:flex-end !important; }
.opt-ui-v2 #optionArea .addon-item.-pc .option{ max-width:48vw !important; overflow:hidden !important; white-space:nowrap !important; text-overflow:ellipsis !important; }
}
/* ===== 아주 작은 화면 ===== */
@media (max-width:480px){
.opt-ui-v2 #proSubLyForm .default-pop{ width:100vw !important; max-height:100vh !important; }
.opt-ui-v2 #proSubLyForm .default-pop .add-option-box{ max-height:calc(100vh - 56px - 64px) !important; }
}
/* ===== Mobile Bottom Sheet for Selected Options ===== */
/* ================================
모바일 옵션/추가상품 바텀시트 최종본
================================ */
@media (max-width: 768px){
/* 바텀시트 컨테이너 */
.choose-option_wrap{
position: fixed; left: 0; right: 0; bottom: 0;
transform: translateY(100%); transition: transform .28s ease;
background: #fff; border-radius: 16px 16px 0 0;
box-shadow: 0 -14px 40px rgba(0,0,0,.18);
z-index: 100300 !important;
max-height: 88vh;
display: flex; flex-direction: column;
will-change: transform;
}
.choose-option_wrap.active{ transform: translateY(0); }
/* 헤더 */
.choose-option_wrap .sheet-header{
display:flex; align-items:center; justify-content:space-between;
padding: 12px 14px; border-bottom: 1px solid #eef2f7;
position: relative;
}
.choose-option_wrap .grabber{
position:absolute; top:6px; left:50%; transform:translateX(-50%);
width:36px; height:4px; border-radius:2px; background:#cbd5e1;
}
.choose-option_wrap .sheet-header .title{ font-size:15px; font-weight:700; color:#0f172a; }
.choose-option_wrap .sheet-close{ width:28px; height:28px; opacity:.6; cursor:pointer; }
/* 본문 */
.choose-option_wrap .sheet-body{
flex:1; overflow:auto; -webkit-overflow-scrolling:touch;
padding: 10px 12px;
}
.choose-option_wrap .sheet-list > *{ margin-top:8px; }
/* 선택된 옵션 카드 */
.choose-option_wrap #optionArea .goods-option,
.choose-option_wrap #optionArea .add-goods,
.choose-option_wrap #optionArea .addon-item{
background:#fff; border:1px solid #e5e7eb; border-radius:12px;
box-shadow:0 2px 8px rgba(0,0,0,.04);
padding:12px;
}
.choose-option_wrap .goods-option .top{
display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
}
.choose-option_wrap .goods-option .top .title{ font-size:14px; font-weight:600; }
.choose-option_wrap .goods-option .right-side{ display:flex; align-items:center; gap:8px; }
.choose-option_wrap .goods-option .price{ font-size:14px; color:#111827; }
/* 수량 박스 */
.choose-option_wrap .qty-box{
--ctl-h: 40px; --ctl-r: 10px; --ctl-bw: 1px;
display:inline-flex; align-items:center; gap:6px;
background:#f1f5f9; padding:8px; border-radius:10px;
min-width:140px;
}
.choose-option_wrap .qty-box .btnQty{
width: var(--ctl-h); height: var(--ctl-h);
border:0; border-radius: var(--ctl-r);
background:#e2e8f0; cursor:pointer;
flex:0 0 var(--ctl-h);
}
.choose-option_wrap .qty-box .btnQty.subtract{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
.choose-option_wrap .qty-box .btnQty.add{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
.choose-option_wrap .qty-box .qty{
box-sizing: border-box;
width:56px; height: var(--ctl-h);
border: var(--ctl-bw) solid #e5e7eb;
border-radius: var(--ctl-r);
text-align:center; font-size:16px;
line-height: calc(var(--ctl-h) - 2 * var(--ctl-bw));
background:#fff;
}
/* 합계/버튼 푸터 */
.choose-option_wrap .sheet-footer{
border-top:1px solid #eef2f7; background:#fff;
padding:10px 12px;
display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.choose-option_wrap .total{
grid-column:1 / -1;
display:flex; justify-content:space-between; align-items:baseline;
margin-bottom:6px;
}
.choose-option_wrap .total .label{ font-size:13px; color:#475569; }
.choose-option_wrap .total .amount{ font-size:18px; font-weight:800; color:#dc2626; }
.choose-option_wrap .btn{
height:46px; border-radius:12px;
display:flex; align-items:center; justify-content:center;
font-size:15px; font-weight:700;
}
.choose-option_wrap .btn.cart{ background:#0f172a; color:#fff; }
.choose-option_wrap .btn.buy{ background:#ef4444; color:#fff; }
}
/* 백드롭 */
.option-sheet-backdrop{
position: fixed; inset:0;
background: rgba(0,0,0,.35);
z-index:100290; display:none;
}
.option-sheet-backdrop.active{ display:block; }
/* 닫은 뒤 다시 열 수 있는 도크 버튼 */
.option-dock{
position: fixed; right: 12px; bottom: 88px;
z-index: 100280; display:none;
background:#0f172a; color:#fff;
border-radius:999px; padding:10px 14px;
font-size:14px; font-weight:700;
box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.option-dock.on{ display:inline-flex; align-items:center; gap:8px; }
.option-dock .cnt{ background:#ef4444; color:#fff; border-radius:999px; padding:2px 8px; font-size:12px; }
/* === 레이어 z-index 재정렬 (낮은 → 높은) ===
페이지(기본) < 백드롭 < 바텀시트 < 추가구성 팝업
*/
.option-sheet-backdrop{ z-index: 100300 !important; } /* 어둡게 */
.choose-option_wrap{ z-index: 100500 !important; } /* 하단 시트(= CTA) ★팝업보다 위로 */
#proSubLyForm .default-pop{
z-index: 100400 !important; /* 팝업은 시트 본문보다 위, CTA(푸터)보다는 아래 */
position: fixed !important;
left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important;
}
/* 시트/팝업은 꼭 클릭 가능해야 함 */
/* !important와 * 제거 → JS가 부분적으로 끌 수 있음 */
.choose-option_wrap { pointer-events:auto; }
#proSubLyForm .default-pop, #proSubLyForm .default-pop *{ pointer-events:auto !important; }
.choose-option_wrap .sheet-footer{
position: sticky; bottom: 0;
z-index: 2;
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 8px;
background: #fff;
padding: 10px 12px calc(env(safe-area-inset-bottom, 0) + 10px);
border-top: 1px solid #eef2f7;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.choose-option_wrap .sheet-footer .btn{
display:flex !important; align-items:center; justify-content:center;
height:46px; border-radius:12px; font-weight:700;
}
/* 시트 안으로 옮겨온 사이트 기본 버튼도 항상 보이게 강제 */
.choose-option_wrap .sheet-footer .cart_no,
.choose-option_wrap .sheet-footer .buy_now_no{
display:flex !important;
align-items:center; justify-content:center;
height:46px; width:100%; border-radius:12px;
}
/* 시트가 열려 있을 때 사이트 공통 고정 하단바 숨김(있을 때만 적용) */
html.opt-ui-sheet-open .detail-fixed,
html.opt-ui-sheet-open .buy-fixed,
html.opt-ui-sheet-open .bottom-btn-wrap,
html.opt-ui-sheet-open .order-fixed,
html.opt-ui-sheet-open .floating-bottom {
display: none !important;
}
/* 시트로 옮겨온 실제 버튼의 레이아웃 */
.choose-option_wrap .sheet-footer .sheet-cta{
width: 100%; height: 46px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width:768px){
.choose-option_wrap .sheet-footer{
visibility: visible !important;
display: grid !important;
pointer-events: auto !important;
}
.choose-option_wrap .sheet-footer .btn{
height:46px; border-radius:12px; font-weight:700;
display:flex; align-items:center; justify-content:center;
}
.choose-option_wrap .btn.cart{ background:#0f172a; color:#fff; }
.choose-option_wrap .btn.buy{ background:#ef4444; color:#fff; }
}
/* 시트가 실제로 열렸을 때만 외부 버튼 감춤 (Fail-safe) */
@media (max-width:768px){
.choose-option_wrap.active ~ .each_option_btn { display:none !important; }
}
/* 시트로 옮겨온 CTA 래퍼를 그리드 2열 버튼바로 */
.choose-option_wrap .sheet-footer .sheet-cta-wrap{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px !important;
width:100% !important;
}
/* 시트 안에서 버튼 크기/라운드 통일 */
.choose-option_wrap .sheet-footer .sheet-cta-wrap .cart_no,
.choose-option_wrap .sheet-footer .sheet-cta-wrap .buy_now_no,
.choose-option_wrap .sheet-footer .sheet-cta-wrap .btn-cart,
.choose-option_wrap .sheet-footer .sheet-cta-wrap .btn-buy,
.choose-option_wrap .sheet-footer .sheet-cta-wrap .btn_order,
.choose-option_wrap .sheet-footer .sheet-cta-wrap .btn-order{
height:46px !important;
border-radius:12px !important;
width:100% !important;
}
/* 시트가 열렸을 때 외부 CTA는 무조건 숨김 */
html.opt-ui-sheet-open .each_option_btn { display: none !important; }
@media (max-width:768px){
.each_option_btn { display:none !important; }
}
html.opt-ui-sheet-open .detail-fixed,
html.opt-ui-sheet-open .buy-fixed,
html.opt-ui-sheet-open .bottom-btn-wrap,
html.opt-ui-sheet-open .order-fixed,
html.opt-ui-sheet-open .floating-bottom,
html.opt-ui-sheet-open .each_option_btn { display:none !important; }
/* 시트로 옮겨온 사이트 기본 버튼을 항상 보이게(테마 숨김 방지) */
.choose-option_wrap .sheet-footer .cart_no,
.choose-option_wrap .sheet-footer .buy_now_no{
display:flex !important; align-items:center; justify-content:center;
width:100%; height:46px; border-radius:12px;
}
/* 백드롭은 기본적으로 숨김, active일 때만 보이기 */
.option-sheet-backdrop{ display:none; }
.option-sheet-backdrop.active{ display:block; }
/* ===== PC 레이아웃 복구 ===== */
@media (min-width: 769px){
/* 관련상품: 캐러셀/그리드 정렬 + 여백 */
.rel_products .container{ max-width: 1200px; margin: 0 auto; }
.rel_products .rel_products_banner.owl-carousel{ overflow: visible; }
/* 혹시 Owl이 비활성일 때 그리드로 예쁘게 */
.rel_products .rel_products_banner:not(.owl-loaded){
display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px;
}
.rel_products .rel_products_banner .item a{
display:block; border:1px solid #e5e7eb; border-radius:12px;
padding:12px; height:100%;
}
.rel_products .rel_products_banner .thumb{ overflow:hidden; border-radius:10px; }
.rel_products .rel_products_banner .thumb img{ width:100%; height:auto; display:block; }
/* 상품정보 탭 컨텐츠가 좌측으로 쏠리는 현상 방지 */
.product_info .container{ max-width: 1200px; margin: 0 auto; overflow: visible; }
.product_info .product_info_tab{ width:100%; max-width:100%; overflow: visible; }
.product_info .product_info_tab > div{ width:100%; }
}
/* ===== 옵션 카드 간 간격/패딩 보강 (공통) ===== */
#optionArea .goods-option,
#optionArea .add-goods,
#optionArea .addon-item{
border:1px solid #e5e7eb; border-radius:12px;
padding:14px 16px; /* 내부 패딩 */
margin-top:12px; /* 카드 간 간격 */
box-shadow:0 2px 8px rgba(0,0,0,.04);
}
#optionArea .goods-option .middle{
display:grid; gap:14px; /* 내부 요소 간격 */
}
/* 수량 박스 여백 강화 */
#optionArea .qty-box{ padding:10px; }
/* 가격/삭제 영역이 가장자리에 딱 붙지 않도록 */
#optionArea .right-side{ padding-left:8px; }
#optionArea .goods-option .top{ margin-bottom:8px; }
/* 모바일 시트 안으로 이동한 경우도 동일하게 */
@media (max-width:768px){
.choose-option_wrap .sheet-list > *{ margin-top:10px; }
.choose-option_wrap .goods-option{ padding:12px 14px; }
.choose-option_wrap .qty-box{ padding:8px 10px; }
}
/* ===== PC: 추가구성 버튼 강조 ===== */
@media (min-width:769px){
#optionArea .goods-option .top .add-option{
background:#ff6b00; /* 주황 */
color:#fff !important;
border-color:#ff6b00;
font-weight:800;
padding:8px 12px;
border-radius:999px;
box-shadow:0 2px 6px rgba(255,107,0,.25);
}
#optionArea .goods-option .top .add-option:hover{
background:#ef4444; /* 호버 시 빨강 */
border-color:#ef4444;
box-shadow:0 3px 10px rgba(239,68,68,.28);
}
#optionArea .goods-option .top .add-option img{
width:16px; height:16px; margin-left:6px; filter:brightness(0) invert(1);
}
}
/* === PC: Related Products 강제 세로 배치 & 너비 복구 (최우선) === */
@media (min-width:769px){
/* 섹션 컨테이너가 flex여도 세로로만 흐르게 */
.rel_products > .container{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
max-width:1200px;
margin:0 auto;
gap:0; /* 안전 */
}
/* 헤더는 한 줄만 차지 (float/flex 영향 제거) */
.rel_products .rel_products_header{
display:block !important;
width:100% !important;
float:none !important;
flex:none !important;
margin:0 0 16px 0 !important;
clear:both !important;
}
.rel_products .rel_products_header h4{
margin:0; font-size:20px; font-weight:800;
}
/* 리스트는 다음 줄, 전체 폭 */
.rel_products .rel_products_banner{
display:block !important;
width:100% !important;
float:none !important;
flex:none !important;
clear:both !important;
overflow:visible; /* Owl stage 잘림 방지 */
}
/* Owl 미초기화 시 그리드로 보기 좋게 */
.rel_products .rel_products_banner:not(.owl-loaded){
display:grid !important;
grid-template-columns:repeat(4, minmax(0,1fr));
gap:20px;
}
/* 카드 기본 UI(테마 float/inline-block 상쇄) */
.rel_products .rel_products_banner .item{
float:none !important;
display:block !important;
}
.rel_products .rel_products_banner .item a{
display:block;
border:1px solid #e5e7eb; border-radius:12px;
padding:12px; background:#fff; height:100%;
}
.rel_products .rel_products_banner .thumb{
overflow:hidden; border-radius:10px; margin-bottom:10px;
}
.rel_products .rel_products_banner .thumb img{
width:100%; height:auto; display:block;
}
}
/* === 상품정보 영역 좌측 쏠림/우측 잘림 보정(PC) === */
@media (min-width:769px){
.product_info > .container{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
max-width:1200px; margin:0 auto;
}
.product_info .product_info_tab{
width:100% !important; max-width:100% !important;
overflow:visible !important;
}
/* 상세 이미지가 컨테이너 넘치지 않도록 */
.product_info .product_info_tab img{
max-width:100%; height:auto;
}
}
/* ===== 옵션 카드/셀 간 간격·패딩 보강 (공통) ===== */
#optionArea .goods-option,
#optionArea .add-goods,
#optionArea .addon-item{
border:1px solid #e5e7eb; border-radius:12px;
padding:14px 16px; /* 내부 여백 */
margin-top:12px; /* 카드 간 간격 */
box-shadow:0 2px 8px rgba(0,0,0,.04);
}
#optionArea .goods-option .middle{ display:grid; gap:14px; }
#optionArea .qty-box{ padding:10px; }
#optionArea .right-side{ padding-left:8px; }
@media (max-width:768px){
.choose-option_wrap .sheet-list > *{ margin-top:10px; }
.choose-option_wrap .goods-option{ padding:12px 14px; }
.choose-option_wrap .qty-box{ padding:8px 10px; }
}
/* PC 상세 컨테이너 폭 확대 (기존 레이아웃 건드리지 않고 상세만) */
@media (min-width:1200px){
.sub_content.section_detail .container{ max-width: 1320px !important; }
.product_description > .container{ max-width: 1320px !important; }
.product_info > .container{ max-width: 1320px !important; }
}
@media (min-width:1500px){
.sub_content.section_detail .container,
.product_description > .container,
.product_info > .container{ max-width: 1400px !important; } /* 더 넓게 원하면 이 값만 키우세요 */
}
/* PC: 관련상품 섹션 세로 스택 + 여백/너비 복구 (최우선) */
@media (min-width:769px){
.rel_products{ padding-top: 24px; }
.rel_products > .container{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
max-width:inherit; /* 위에서 확대한 폭 상속 */
gap:0 !important;
}
.rel_products .rel_products_header{
display:block !important;
width:100% !important;
float:none !important; flex:none !important; clear:both !important;
margin: 8px 0 16px !important; /* 제목이 천장에 붙지 않도록 */
}
.rel_products .rel_products_header h4{
margin:0 !important; font-size:20px; font-weight:800;
}
.rel_products .rel_products_banner{
display:block !important; width:100% !important;
float:none !important; flex:none !important; clear:both !important;
overflow:visible !important;
}
/* Owl 미초기화 시 예쁜 그리드 */
.rel_products .rel_products_banner:not(.owl-loaded){
display:grid !important;
grid-template-columns:repeat(4, minmax(0,1fr));
gap:20px;
}
/* 카드 기본 UI */
.rel_products .rel_products_banner .item{ float:none !important; display:block !important; }
.rel_products .rel_products_banner .item a{
display:block; border:1px solid #e5e7eb; border-radius:12px;
padding:12px; background:#fff; height:100%;
}
.rel_products .rel_products_banner .thumb{
overflow:hidden; border-radius:10px; margin-bottom:10px;
}
.rel_products .rel_products_banner .thumb img{
width:100%; height:auto; display:block;
}
}
/* 백드롭 < 시트 */
.option-sheet-backdrop{ z-index:100498 !important; }
.choose-option_wrap { z-index:100499 !important; }
/* 추가구성 모달이 있으면 모달은 시트보다 위 */
#proSubLyForm .default-pop{ z-index:100800 !important; }
/* ─────────────────────────────────────────────
공통: '추가구성' 버튼 스타일 (PC + Mobile)
───────────────────────────────────────────── */
html.opt-ui-v2 .add-option{
display:inline-flex !important; align-items:center !important; gap:8px !important;
height:36px !important; padding:0 14px !important;
border-radius:999px !important;
background:#ff6b00 !important; /* 주황 */
border:1px solid #ff6b00 !important;
color:#fff !important; font-weight:800 !important; font-size:13px !important; line-height:1 !important;
text-decoration:none !important;
box-shadow:0 2px 6px rgba(255,107,0,.25) !important;
transition:background .15s ease, border-color .15s ease, transform .06s ease !important;
}
html.opt-ui-v2 .add-option:hover,
html.opt-ui-v2 .add-option:focus{
background:#ef4444 !important; /* 빨강 */
border-color:#ef4444 !important;
}
html.opt-ui-v2 .add-option:active{ transform:translateY(1px) !important; }
html.opt-ui-v2 .add-option img{
width:16px !important; height:16px !important;
filter:brightness(0) invert(1) !important; /* 아이콘 흰색화 */
}
/* PC에서 약간 더 여유 */
@media (min-width:769px){
html.opt-ui-v2 .add-option{ height:38px !important; padding:0 16px !important; font-size:14px !important; }
}
/* ─────────────────────────────────────────────
추가된 옵션 카드 간격/패딩 정리 (자연스럽게)
───────────────────────────────────────────── */
/* 공통 카드 */
html.opt-ui-v2 #optionArea .goods-option,
html.opt-ui-v2 #optionArea .add-goods,
html.opt-ui-v2 #optionArea .addon-item{
border:1px solid #e5e7eb !important; border-radius:12px !important;
padding:12px 14px !important; margin-top:10px !important;
background:#fff !important; box-shadow:0 2px 8px rgba(0,0,0,.04) !important;
}
html.opt-ui-v2 #optionArea .goods-option .top{ margin-bottom:8px !important; }
/* 수량 박스(모바일 손맛 개선) */
html.opt-ui-v2 #optionArea .qty-box{
display:inline-flex !important; align-items:center !important; gap:6px !important;
background:#f1f5f9 !important; padding:8px 10px !important; border-radius:10px !important;
}
html.opt-ui-v2 #optionArea .qty-box .btnQty{ width:36px !important; height:36px !important; border-radius:10px !important; }
html.opt-ui-v2 #optionArea .qty-box .qty { width:56px !important; height:36px !important; border-radius:10px !important; }
/* ─────────────────────────────────────────────
모바일 바텀시트 내부 폴리싱 (심플/모바일성)
───────────────────────────────────────────── */
@media (max-width:768px){
/* 바디 패딩 & 리스트 간격 */
html.opt-ui-v2 .choose-option_wrap .sheet-body{ padding:10px 12px !important; }
html.opt-ui-v2 .choose-option_wrap .sheet-list > *{ margin-top:10px !important; }
/* 카드 본문 폰트와 정렬 */
html.opt-ui-v2 .choose-option_wrap #optionArea .goods-option{ padding:12px 14px !important; }
html.opt-ui-v2 .choose-option_wrap #optionArea .goods-option .top .title{
font-size:14px !important; font-weight:700 !important; color:#0f172a !important;
}
html.opt-ui-v2 .choose-option_wrap #optionArea .goods-option .right-side{
display:flex !important; align-items:center !important; gap:8px !important;
}
html.opt-ui-v2 .choose-option_wrap #optionArea .goods-option .price{
font-size:14px !important; color:#111827 !important; margin:0 !important;
}
}
/* ─────────────────────────────────────────────
‘PC처럼 보이게’ 보강 (상단 제목이 버튼에 밀리지 않게)
───────────────────────────────────────────── */
@media (min-width:769px){
html.opt-ui-v2 #optionArea .goods-option .top .title{
max-width:calc(100% - 120px) !important; /* add-option 자리 */
margin:0 !important; font-size:15px !important; font-weight:700 !important; color:#0f172a !important;
display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
}
}
@media (max-width:768px){
.option-sheet-backdrop{ z-index: 999998 !important; display:none; }
.option-sheet-backdrop.active{ display:block; }
.choose-option_wrap{
z-index: 999999 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(100%);
}
.choose-option_wrap.active{ transform: translateY(0); }
}
.opt-ui-v2 .option-sheet-backdrop{ display:none !important; }
/************ ultra-compact RESCUE (최하단에 추가) ************/
@media (max-width:360px){
/* ── 1) 제목: 1줄 고정 + 말줄임 + 가로쓰기 강제 ── */
.choose-option_wrap #optionArea .goods-option .top{
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:8px !important;
flex-wrap:nowrap !important;
}
.choose-option_wrap #optionArea .goods-option .top .title{
flex:1 1 auto !important; min-width:0 !important;
margin:0 !important; font-size:14px !important; font-weight:700 !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
word-break:normal !important; overflow-wrap:normal !important;
writing-mode:horizontal-tb !important;
/* 다른 데서 line-clamp 넣어둔 것 제거 */
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
}
/* ── 2) “추가구성” 버튼: 아이콘만(36x36)으로 축소 ── */
.choose-option_wrap #optionArea .goods-option .top .add-option,
.choose-option_wrap #optionArea .goods-option .top .add-option:link{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:36px !important; height:36px !important; flex:0 0 36px !important;
padding:0 !important; border-radius:10px !important;
font-size:0 !important; line-height:0 !important; /* 텍스트 숨김 */
white-space:nowrap !important; box-sizing:border-box !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option img{
width:18px !important; height:18px !important; margin:0 !important; filter:brightness(0) invert(1) !important;
}
/* ← 텍스트 버튼으로 아래줄에 내리고 싶으면 위 블록 대신 아래 3줄만 켜세요.
.choose-option_wrap #optionArea .goods-option .top{ flex-wrap:wrap !important; }
.choose-option_wrap #optionArea .goods-option .top .add-option{ order:2 !important; width:100% !important; height:36px !important; font-size:13px !important; }
*/
/* ── 3) 본문 레이아웃: 수량 1행 / 가격·삭제 2행 ── */
.choose-option_wrap #optionArea .goods-option .middle{
display:flex !important; flex-direction:column !important; gap:6px !important;
}
.choose-option_wrap #optionArea .goods-option .qty-box{
order:1 !important; align-self:flex-start !important;
}
.choose-option_wrap #optionArea .goods-option .right-side{
order:2 !important;
display:flex !important; align-items:center !important; justify-content:space-between !important;
width:100% !important; padding-left:0 !important; margin-top:2px !important;
}
.choose-option_wrap #optionArea .goods-option .right-side .price,
.choose-option_wrap #optionArea .goods-option .price{
font-size:18px !important; font-weight:800 !important; color:#111827 !important;
white-space:nowrap !important; margin-left:auto !important;
}
.choose-option_wrap #optionArea .goods-option .right-side .del,
.choose-option_wrap #optionArea .goods-option .right-side .btn-del{
flex:0 0 auto !important; width:28px !important; height:28px !important;
}
/* ── 4) 수량 터치 타깃 확보 ── */
.choose-option_wrap .qty-box .btnQty{ width:40px !important; height:40px !important; }
.choose-option_wrap .qty-box .qty { height:40px !important; line-height:38px !important; font-size:16px !important; }
/* ── 5) 가격 숫자 개행 방지(콤마 중간 잘림 방지) ── */
.choose-option_wrap .price,
.choose-option_wrap .total .amount{ white-space:nowrap !important; }
}
/* 혹시 테마가 a.btn 류를 강제로 width:100%로 만드는 경우 방지(모바일 한정) */
@media (max-width:360px){
.choose-option_wrap #optionArea .goods-option .top .add-option.btn,
.choose-option_wrap #optionArea .goods-option .top a.add-option{
width:36px !important; display:inline-flex !important;
}
}
/************ compact fix (<=500px 디바이스) ************/
@media (max-width:500px){
/* ── 1) 제목: 1줄 고정 + 말줄임 ── */
.choose-option_wrap #optionArea .goods-option .top{
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:8px !important;
flex-wrap:nowrap !important;
}
.choose-option_wrap #optionArea .goods-option .top .title{
flex:1 1 auto !important; min-width:0 !important;
margin:0 !important; font-size:14px !important; font-weight:700 !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
word-break:normal !important; overflow-wrap:normal !important;
writing-mode:horizontal-tb !important;
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
}
/* ── 2) “추가구성” 버튼: 아이콘만(36x36)으로 축소 ── */
.choose-option_wrap #optionArea .goods-option .top .add-option,
.choose-option_wrap #optionArea .goods-option .top .add-option:link{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:36px !important; height:36px !important; flex:0 0 36px !important;
padding:0 !important; border-radius:10px !important;
font-size:0 !important; line-height:0 !important; /* 텍스트 숨김 */
}
.choose-option_wrap #optionArea .goods-option .top .add-option img{
width:18px !important; height:18px !important; margin:0 !important; filter:brightness(0) invert(1) !important;
}
/* ── 3) 본문: 수량 한 줄 / 가격·삭제 아래 줄 ── */
.choose-option_wrap #optionArea .goods-option .middle{
display:flex !important; flex-direction:column !important; gap:6px !important;
}
.choose-option_wrap #optionArea .goods-option .qty-box{
order:1 !important; align-self:flex-start !important;
}
.choose-option_wrap #optionArea .goods-option .right-side{
order:2 !important;
display:flex !important; align-items:center !important; justify-content:space-between !important;
width:100% !important; padding-left:0 !important; margin-top:2px !important;
}
.choose-option_wrap #optionArea .goods-option .right-side .price,
.choose-option_wrap #optionArea .goods-option .price{
font-size:18px !important; font-weight:800 !important; color:#111827 !important;
white-space:nowrap !important; margin-left:auto !important;
}
/* ── 4) 수량 버튼 터치 타깃 확대 ── */
.choose-option_wrap .qty-box .btnQty{ width:40px !important; height:40px !important; }
.choose-option_wrap .qty-box .qty { height:40px !important; line-height:38px !important; font-size:16px !important; }
}
/************ FIX for <=500px (put at the very end) ************/
@media (max-width:500px){
/* 1) 헤더행: 제목 1줄 고정 + 말줄임, 버튼은 아이콘만(36x36) */
.choose-option_wrap #optionArea .goods-option .top{
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:8px !important;
flex-wrap:nowrap !important;
}
/* 제목이 어디 클래스든 잡히도록: .title 또는 .option 텍스트 */
.choose-option_wrap #optionArea .goods-option .top .title,
.choose-option_wrap #optionArea .goods-option .top .option{
flex:1 1 auto !important; min-width:0 !important;
margin:0 !important; font-size:14px !important; font-weight:700 !important; color:#0f172a !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
word-break:normal !important; overflow-wrap:normal !important;
/* ↓ 기존 line-clamp 강제 해제 */
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
}
/* 테마의 a.btn width:100%를 무력화하고, 아이콘만 보이게 */
.choose-option_wrap #optionArea .goods-option .top .add-option,
.choose-option_wrap #optionArea .goods-option .top a.add-option{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:36px !important; height:36px !important; flex:0 0 36px !important;
padding:0 !important; border-radius:10px !important;
font-size:0 !important; line-height:0 !important; /* 텍스트 숨김 */
white-space:nowrap !important; box-sizing:border-box !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option img{
width:18px !important; height:18px !important; margin:0 !important; filter:brightness(0) invert(1) !important;
}
/* 혹시 add-option에 .btn 클래스가 붙어 width:100%를 먹는 테마 방지 */
.choose-option_wrap #optionArea .goods-option .top .add-option.btn{ width:36px !important; }
/* 2) 본문행: 수량(1행) → 가격/삭제(2행)로 분리해서 ‘찌그러짐’ 해소 */
.choose-option_wrap #optionArea .goods-option .middle{
display:flex !important; flex-direction:column !important; gap:6px !important;
}
.choose-option_wrap #optionArea .goods-option .qty-box{
order:1 !important; align-self:flex-start !important;
}
.choose-option_wrap #optionArea .goods-option .right-side{
order:2 !important;
display:flex !important; align-items:center !important; justify-content:space-between !important;
width:100% !important; padding-left:0 !important; margin-top:2px !important;
}
/* 가격은 항상 한 줄, 크게 */
.choose-option_wrap #optionArea .goods-option .right-side .price,
.choose-option_wrap #optionArea .goods-option .price{
font-size:18px !important; font-weight:800 !important; color:#111827 !important;
white-space:nowrap !important; margin-left:auto !important;
}
/* 3) 수량 터치 타깃 40px 확보 */
.choose-option_wrap .qty-box .btnQty{ width:40px !important; height:40px !important; }
.choose-option_wrap .qty-box .qty { height:40px !important; line-height:38px !important; font-size:16px !important; }
/* 4) 혹시 가격/합계가 콤마다 끊기면 개행 금지 */
.choose-option_wrap .price,
.choose-option_wrap .total .amount{ white-space:nowrap !important; }
}
/* (선택) 아이콘 대신 버튼을 '아래 줄'로 내리고 싶으면 위 아이콘 규칙 대신 이 3줄을 켜세요.
@media (max-width:500px){
.choose-option_wrap #optionArea .goods-option .top{ flex-wrap:wrap !important; }
.choose-option_wrap #optionArea .goods-option .top .add-option{ order:2 !important; width:100% !important; height:36px !important; font-size:13px !important; line-height:36px !important; }
}
*/
/************ ultra-compact fix (<=360px) ************/
@media (max-width:360px){
.choose-option_wrap #optionArea .goods-option .top{
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:6px !important;
flex-wrap:nowrap !important;
}
.choose-option_wrap #optionArea .goods-option .top .title,
.choose-option_wrap #optionArea .goods-option .top .option{
flex:1 1 auto !important; min-width:0 !important;
margin:0 !important; font-size:13px !important; font-weight:700 !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
word-break:normal !important; overflow-wrap:normal !important;
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:32px !important; height:32px !important; flex:0 0 32px !important;
padding:0 !important; border-radius:8px !important;
font-size:0 !important; line-height:0 !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option img{
width:16px !important; height:16px !important;
}
.choose-option_wrap #optionArea .goods-option .middle{
display:flex !important; flex-direction:column !important; gap:4px !important;
}
.choose-option_wrap #optionArea .goods-option .right-side{
order:2 !important; display:flex !important; justify-content:space-between !important; width:100% !important;
}
.choose-option_wrap #optionArea .goods-option .price{
font-size:16px !important; font-weight:800 !important;
white-space:nowrap !important;
}
.choose-option_wrap .qty-box .btnQty{ width:32px !important; height:32px !important; }
.choose-option_wrap .qty-box .qty{ width:48px !important; height:32px !important; font-size:14px !important; }
}
/************ compact fix (<=500px) ************/
@media (max-width:500px){
.choose-option_wrap #optionArea .goods-option .top{
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:8px !important;
flex-wrap:nowrap !important;
}
.choose-option_wrap #optionArea .goods-option .top .title,
.choose-option_wrap #optionArea .goods-option .top .option{
flex:1 1 auto !important; min-width:0 !important;
margin:0 !important; font-size:14px !important; font-weight:700 !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
word-break:normal !important; overflow-wrap:normal !important;
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:36px !important; height:36px !important; flex:0 0 36px !important;
padding:0 !important; border-radius:10px !important;
font-size:0 !important; line-height:0 !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option img{
width:18px !important; height:18px !important;
}
.choose-option_wrap #optionArea .goods-option .middle{
display:flex !important; flex-direction:column !important; gap:6px !important;
}
.choose-option_wrap #optionArea .goods-option .right-side{
order:2 !important; display:flex !important; justify-content:space-between !important; width:100% !important;
}
.choose-option_wrap #optionArea .goods-option .price{
font-size:18px !important; font-weight:800 !important;
white-space:nowrap !important;
}
.choose-option_wrap .qty-box .btnQty{ width:40px !important; height:40px !important; }
.choose-option_wrap .qty-box .qty{ width:56px !important; height:40px !important; font-size:16px !important; }
}
/**************** HARD OVERRIDE: mobile layout fix ****************/
/* 1) 일반 스마트폰(<=540px) */
@media (max-width:540px){
/* 헤더 줄: 제목 1줄 고정, 버튼은 아이콘 사이즈 */
.choose-option_wrap #optionArea .goods-option .top{
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:8px !important; flex-wrap:nowrap !important;
}
.choose-option_wrap #optionArea .goods-option .top .title,
.choose-option_wrap #optionArea .goods-option .top .option{
flex:1 1 auto !important; min-width:0 !important;
margin:0 !important; font-size:14px !important; font-weight:700 !important; color:#0f172a !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
word-break:normal !important; overflow-wrap:normal !important;
/* 기존 line-clamp/세로쓰기 강제 해제 */
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
writing-mode:horizontal-tb !important; text-orientation:mixed !important;
}
/* add-option 버튼이 block/100% 되는 테마 무력화 + 아이콘화 */
.choose-option_wrap #optionArea .goods-option .top .add-option,
.choose-option_wrap #optionArea .goods-option .top a.add-option{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:36px !important; height:36px !important; flex:0 0 36px !important;
padding:0 !important; border-radius:10px !important;
font-size:0 !important; line-height:0 !important; white-space:nowrap !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option.btn{ width:36px !important; } /* 테마 보호 */
.choose-option_wrap #optionArea .goods-option .top .add-option img{
width:18px !important; height:18px !important; margin:0 !important; filter:brightness(0) invert(1) !important;
}
/* 본문을 수직 스택으로 단순화: 수량 → 안내문 → 가격/삭제 */
.choose-option_wrap #optionArea .goods-option .middle{
display:flex !important; flex-direction:column !important; gap:6px !important;
}
.choose-option_wrap #optionArea .goods-option .qty-box{
order:1 !important; align-self:flex-start !important;
}
/* (최소/최대) 안내문이 겹치지 않게 별도 줄로 고정 */
.choose-option_wrap #optionArea .goods-option .limit-info{
order:2 !important; display:block !important; clear:both !important;
margin:2px 0 0 !important; font-size:12px !important; color:#64748b !important;
max-width:100% !important; white-space:normal !important; line-height:1.3 !important;
position:static !important;
}
/* 가격/삭제 줄 */
.choose-option_wrap #optionArea .goods-option .right-side{
order:3 !important; width:100% !important;
display:flex !important; align-items:center !important; justify-content:space-between !important;
gap:10px !important; padding-left:0 !important; margin-top:2px !important;
}
.choose-option_wrap #optionArea .goods-option .right-side .price,
.choose-option_wrap #optionArea .goods-option .price{
margin:0 0 0 auto !important;
font-size:18px !important; font-weight:800 !important; color:#111827 !important;
white-space:nowrap !important;
}
/* 수량 터치 타깃/입력 */
.choose-option_wrap .qty-box .btnQty{ width:40px !important; height:40px !important; }
.choose-option_wrap .qty-box .qty { width:56px !important; height:40px !important; line-height:38px !important; font-size:16px !important; }
}
/* 2) 초소형(<=360px): 더 타이트하게 축소 */
@media (max-width:360px){
.choose-option_wrap #optionArea .goods-option .top{ gap:6px !important; }
.choose-option_wrap #optionArea .goods-option .top .title,
.choose-option_wrap #optionArea .goods-option .top .option{
font-size:13px !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option,
.choose-option_wrap #optionArea .goods-option .top a.add-option{
width:32px !important; height:32px !important; flex:0 0 32px !important; border-radius:8px !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option img{ width:16px !important; height:16px !important; }
.choose-option_wrap .qty-box .btnQty{ width:32px !important; height:32px !important; }
.choose-option_wrap .qty-box .qty { width:48px !important; height:32px !important; font-size:14px !important; line-height:30px !important; }
.choose-option_wrap #optionArea .goods-option .right-side .price{ font-size:16px !important; }
}
/* (선택) 아이콘 대신 버튼을 다음 줄로 내리고 싶다면 — 위 add-option 아이콘 규칙을 지우고 아래 3줄을 켜세요.
@media (max-width:540px){
.choose-option_wrap #optionArea .goods-option .top{ flex-wrap:wrap !important; }
.choose-option_wrap #optionArea .goods-option .top .add-option{ order:2 !important; width:100% !important; height:36px !important; font-size:13px !important; line-height:36px !important; }
}
*/
/************ MOBILE OPTION CARD FIX (<=540px) ************/
@media (max-width:540px){
/* 옵션명: 한 줄 고정 + 말줄임 + 수평쓰기 강제 */
.choose-option_wrap #optionArea .goods-option .top .title,
.choose-option_wrap #optionArea .goods-option .top .option{
flex:1 1 auto !important; min-width:0 !important;
font-size:14px !important; font-weight:700 !important; color:#0f172a !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
writing-mode:horizontal-tb !important;
}
/* 추가구성 버튼: 아이콘형 (36px) */
.choose-option_wrap #optionArea .goods-option .top .add-option{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:36px !important; height:36px !important; flex:0 0 36px !important;
padding:0 !important; border-radius:10px !important;
font-size:0 !important; line-height:0 !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option img{
width:18px !important; height:18px !important; margin:0 !important;
}
/* 본문 레이아웃: 수량 → 안내 → 가격/삭제 순서 */
.choose-option_wrap #optionArea .goods-option .middle{
display:flex !important; flex-direction:column !important; gap:6px !important;
}
.choose-option_wrap #optionArea .goods-option .qty-box{
order:1 !important; align-self:flex-start !important;
}
.choose-option_wrap #optionArea .goods-option .limit-info{
order:2 !important; margin:2px 0 0 !important;
font-size:12px !important; color:#64748b !important;
position:static !important; line-height:1.3 !important;
}
.choose-option_wrap #optionArea .goods-option .right-side{
order:3 !important; width:100% !important;
display:flex !important; align-items:center !important; justify-content:space-between !important;
margin-top:2px !important;
}
.choose-option_wrap #optionArea .goods-option .price{
margin-left:auto !important;
font-size:18px !important; font-weight:800 !important; color:#111827 !important;
white-space:nowrap !important;
}
/* 수량 버튼 크기 강화 */
.choose-option_wrap .qty-box .btnQty{ width:40px !important; height:40px !important; }
.choose-option_wrap .qty-box .qty { width:56px !important; height:40px !important; font-size:16px !important; line-height:38px !important; }
}
/************ 초소형 기기 (<=360px) ************/
@media (max-width:360px){
.choose-option_wrap #optionArea .goods-option .top .title,
.choose-option_wrap #optionArea .goods-option .top .option{
font-size:13px !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option{
width:32px !important; height:32px !important; flex:0 0 32px !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option img{
width:16px !important; height:16px !important;
}
.choose-option_wrap .qty-box .btnQty{ width:32px !important; height:32px !important; }
.choose-option_wrap .qty-box .qty { width:48px !important; height:32px !important; font-size:14px !important; line-height:30px !important; }
.choose-option_wrap #optionArea .goods-option .price{ font-size:16px !important; }
}
/*******************************
ADD-ON MODAL (모바일 전용 고정)
대상: #proSubLyForm .default-pop
********************************/
/* 공통: 모달 박스 안정화 + 동적 뷰포트 */
#proSubLyForm .default-pop{
position: fixed !important;
left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important;
width: min(560px, 94dvw) !important;
max-height: 92dvh !important;
background:#fff !important; border-radius:16px !important; overflow:hidden !important;
box-shadow:0 20px 48px rgba(0,0,0,.22) !important;
z-index: 100700 !important;
box-sizing:border-box !important;
font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans KR",Helvetica,Arial,sans-serif;
}
/* 헤더: 타이틀 1줄 고정 + 말줄임, 닫기 버튼 터치영역 확장 */
#proSubLyForm .default-pop .head{
display:flex !important; align-items:center !important; justify-content:space-between !important;
height:56px !important; padding:0 14px !important; border-bottom:1px solid #e5e7eb !important; background:#f8fafc !important;
}
#proSubLyForm .default-pop .head .title{
margin:0 !important; font-weight:800 !important; color:#0f172a !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#proSubLyForm .default-pop .head .pop-close{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:36px !important; height:36px !important; padding:0 !important; border:0 !important; background:transparent !important;
}
/* 스크롤 영역 */
#proSubLyForm .default-pop .add-option-box{
padding:12px 14px !important;
max-height: calc(92dvh - 56px - 64px) !important;
overflow:auto !important; -webkit-overflow-scrolling:touch !important;
}
/* 버튼 영역 */
#proSubLyForm .default-pop .btn-wrap{
display:flex !important; gap:10px !important; align-items:center !important;
height:64px !important; padding:8px 14px !important; border-top:1px solid #e5e7eb !important; background:#fff !important;
}
#proSubLyForm .default-pop .btn-wrap .btn{
flex:1 1 0 !important; height:48px !important; border-radius:12px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
font-weight:800 !important; text-decoration:none !important;
}
#proSubLyForm .default-pop .btn-wrap .btn1{ background:#0f172a !important; color:#fff !important; }
#proSubLyForm .default-pop .btn-wrap .btn2{ background:#e2e8f0 !important; color:#0f172a !important; }
/* 셀렉트 UI ─ 길이/줄바꿈 문제 해결 */
#proSubLyForm .default-pop .custom-select{ margin-top:8px !important; }
#proSubLyForm .default-pop .custom-select .selected{
display:flex !important; align-items:center !important; justify-content:space-between !important;
gap:10px !important; width:100% !important; cursor:pointer !important;
padding:14px 16px !important; border:1px solid #e5e7eb !important; border-radius:12px !important; background:#fff !important;
}
/* 선택된 옵션 텍스트: 한 줄 고정 + … */
#proSubLyForm .default-pop .custom-select .selected .option{
flex:1 1 auto !important; min-width:0 !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
font-weight:700 !important; color:#0f172a !important;
}
/* 드롭다운 버튼(캐럿) */
#proSubLyForm .default-pop .custom-select .selected .btn{
flex:0 0 16px !important; width:16px !important; height:16px !important;
background: conic-gradient(from 45deg,#64748b 0 25%,transparent 0 100%) !important;
-webkit-mask: radial-gradient(8px at 50% 30%,#000 98%,transparent 100%) !important;
mask: radial-gradient(8px at 50% 30%,#000 98%,transparent 100%) !important;
}
/* 드롭다운 목록: 여러 줄 허용 + 스크롤 안정화 */
#proSubLyForm .default-pop .custom-select .select-items{
display:none; margin-top:8px !important; padding:8px !important;
border:1px solid #e5e7eb !important; border-radius:12px !important; background:#fff !important;
max-height:40dvh !important; overflow:auto !important; -webkit-overflow-scrolling:touch !important;
}
#proSubLyForm .default-pop .custom-select .select-items li{ list-style:none !important; }
#proSubLyForm .default-pop .custom-select .select-items a{
display:block !important; padding:12px !important; text-decoration:none !important;
color:#111827 !important; line-height:1.4 !important; font-size:14px !important;
word-break: keep-all !important; overflow-wrap:anywhere !important; white-space:normal !important;
}
#proSubLyForm .default-pop .custom-select .select-items li + li a{ border-top:1px dashed #eef2f7 !important; }
/* ====== 반응형 오버라이드 ====== */
/* 500px 이하: 텍스트/버튼 축소, 레이아웃 안정 */
@media (max-width:500px){
#proSubLyForm .default-pop{ width: 100dvw !important; max-height: 100dvh !important; border-radius:14px !important; }
#proSubLyForm .default-pop .head{ height:52px !important; padding:0 12px !important; }
#proSubLyForm .default-pop .head .title{ font-size:15px !important; }
#proSubLyForm .default-pop .add-option-box{ max-height: calc(100dvh - 52px - 64px) !important; padding:10px 12px !important; }
/* 선택 박스/리스트 폰트 줄임 */
#proSubLyForm .default-pop .custom-select .selected{ padding:12px !important; }
#proSubLyForm .default-pop .custom-select .selected .option{ font-size:14px !important; }
#proSubLyForm .default-pop .custom-select .select-items a{ font-size:14px !important; padding:10px 12px !important; }
}
/* 360px 이하: 더 타이트하게 */
@media (max-width:360px){
#proSubLyForm .default-pop .head{ height:48px !important; }
#proSubLyForm .default-pop .head .title{ font-size:14px !important; }
#proSubLyForm .default-pop .btn-wrap{ height:56px !important; padding:6px 10px !important; }
#proSubLyForm .default-pop .btn-wrap .btn{ height:42px !important; font-size:14px !important; }
#proSubLyForm .default-pop .custom-select .selected{ padding:10px 12px !important; }
#proSubLyForm .default-pop .custom-select .selected .option{ font-size:13px !important; }
#proSubLyForm .default-pop .custom-select .select-items{ max-height: 48dvh !important; }
}
/**************** BOTTOM SHEET OPTION CARD – HARD FIX ****************/
/* 대상: 바텀시트 내부 #optionArea */
@media (max-width:540px){
/* 헤더행: 제목 1줄 고정(…) */
.choose-option_wrap #optionArea .goods-option .top{
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:8px !important; flex-wrap:nowrap !important;
}
.choose-option_wrap #optionArea .goods-option .top .title,
.choose-option_wrap #optionArea .goods-option .top .option{
flex:1 1 auto !important; min-width:0 !important;
margin:0 !important; font-size:14px !important; font-weight:700 !important; color:#0f172a !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
writing-mode:horizontal-tb !important;
}
/* '추가구성' 버튼을 아이콘만 보이게 (a, button 모두) */
.choose-option_wrap #optionArea .goods-option .top .add-option,
.choose-option_wrap #optionArea .goods-option .top a.add-option,
.choose-option_wrap #optionArea .goods-option .top button.add-option{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:36px !important; height:36px !important; flex:0 0 36px !important;
padding:0 !important; border-radius:10px !important; box-sizing:border-box !important;
/* 글자 완전 숨김 (테마 width:100%/block 방지) */
font-size:0 !important; line-height:0 !important; color:transparent !important;
text-indent:-9999px !important; overflow:hidden !important; white-space:nowrap !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option.btn{ width:36px !important; } /* 테마 보호 */
.choose-option_wrap #optionArea .goods-option .top .add-option img{
width:18px !important; height:18px !important; margin:0 !important; filter:brightness(0) invert(1) !important;
text-indent:0 !important;
}
/* 본문: 수량 → (안내문) → 가격/삭제 3단계로 강제 */
.choose-option_wrap #optionArea .goods-option .middle{
display:flex !important; flex-direction:column !important; gap:6px !important;
}
.choose-option_wrap #optionArea .goods-option .qty-box{
order:1 !important; align-self:flex-start !important;
}
/* ⚠ 안내문 클래스가 일정치 않아도 잡히도록: 수량·가격영역 외 요소 = 안내문으로 처리 */
.choose-option_wrap #optionArea .goods-option .middle > *:not(.qty-box):not(.right-side){
order:2 !important; display:block !important; clear:both !important;
margin:2px 0 0 !important; font-size:12px !important; color:#64748b !important;
position:static !important; line-height:1.3 !important;
max-width:100% !important; white-space:normal !important; word-break:keep-all !important; overflow-wrap:anywhere !important;
}
/* 가격/삭제는 항상 마지막 줄, 전체폭 사용 */
.choose-option_wrap #optionArea .goods-option .right-side{
order:3 !important; width:100% !important;
display:flex !important; align-items:center !important; justify-content:space-between !important;
gap:10px !important; padding-left:0 !important; margin-top:2px !important;
}
.choose-option_wrap #optionArea .goods-option .right-side .price,
.choose-option_wrap #optionArea .goods-option .price{
margin-left:auto !important;
font-size:18px !important; font-weight:800 !important; color:#111827 !important;
white-space:nowrap !important;
}
/* 수량 터치 타깃 업 */
.choose-option_wrap .qty-box .btnQty{ width:40px !important; height:40px !important; }
.choose-option_wrap .qty-box .qty { width:56px !important; height:40px !important; line-height:38px !important; font-size:16px !important; }
}
/* 초소형 기기: 더 타이트하게 */
@media (max-width:360px){
.choose-option_wrap #optionArea .goods-option .top .title,
.choose-option_wrap #optionArea .goods-option .top .option{ font-size:13px !important; }
.choose-option_wrap #optionArea .goods-option .top .add-option,
.choose-option_wrap #optionArea .goods-option .top a.add-option,
.choose-option_wrap #optionArea .goods-option .top button.add-option{
width:32px !important; height:32px !important; flex:0 0 32px !important; border-radius:8px !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option img{ width:16px !important; height:16px !important; }
.choose-option_wrap .qty-box .btnQty{ width:32px !important; height:32px !important; }
.choose-option_wrap .qty-box .qty { width:48px !important; height:32px !important; font-size:14px !important; line-height:30px !important; }
.choose-option_wrap #optionArea .goods-option .right-side .price{ font-size:16px !important; }
}
/**************** MOBILE (<=500px): 갯수 → 엔터 → 금액 ****************/
@media (max-width:500px){
/* 제목(옵션명)은 1줄 + … */
.choose-option_wrap #optionArea .goods-option .top .title,
.choose-option_wrap #optionArea .goods-option .top .option,
#proSubLyForm #optionArea .goods-option .top .title,
#proSubLyForm #optionArea .goods-option .top .option{
flex:1 1 auto !important; min-width:0 !important;
margin:0 !important; font-weight:700 !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
}
/* '추가구성' 버튼은 아이콘만 보이게(폭 차지 금지) */
.choose-option_wrap #optionArea .goods-option .top .add-option,
.choose-option_wrap #optionArea .goods-option .top a.add-option,
#proSubLyForm #optionArea .goods-option .top .add-option,
#proSubLyForm #optionArea .goods-option .top a.add-option{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:36px !important; height:36px !important; flex:0 0 36px !important;
padding:0 !important; border-radius:10px !important;
font-size:0 !important; line-height:0 !important; white-space:nowrap !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option img,
#proSubLyForm #optionArea .goods-option .top .add-option img{
width:18px !important; height:18px !important; margin:0 !important;
filter:brightness(0) invert(1) !important;
}
/* 본문은 '세로 스택': [수량] → [안내문] → [가격/삭제] */
.choose-option_wrap #optionArea .goods-option .middle,
#proSubLyForm #optionArea .goods-option .middle{
display:flex !important; flex-direction:column !important;
gap:6px !important;
}
.choose-option_wrap #optionArea .goods-option .qty-box,
#proSubLyForm #optionArea .goods-option .qty-box{
order:1 !important; align-self:flex-start !important;
}
/* 안내문이 섞여 들어가도 줄 따로 차지하도록 강제 */
.choose-option_wrap #optionArea .goods-option .middle > .limit-info,
#proSubLyForm #optionArea .goods-option .middle > .limit-info,
.choose-option_wrap #optionArea .goods-option .middle > *:not(.qty-box):not(.right-side):not(.limit-info),
#proSubLyForm #optionArea .goods-option .middle > *:not(.qty-box):not(.right-side):not(.limit-info){
order:2 !important; display:block !important; clear:both !important;
margin:2px 0 0 !important; font-size:12px !important; color:#64748b !important;
position:static !important; line-height:1.3 !important; white-space:normal !important;
}
/* 가격/삭제 줄은 항상 마지막(3번째) 줄 + 우측 정렬 */
.choose-option_wrap #optionArea .goods-option .right-side,
#proSubLyForm #optionArea .goods-option .right-side{
order:3 !important; width:100% !important;
display:flex !important; align-items:center !important; justify-content:space-between !important;
padding-left:0 !important; margin-top:2px !important; gap:10px !important;
}
.choose-option_wrap #optionArea .goods-option .price,
#proSubLyForm #optionArea .goods-option .price{
margin-left:auto !important; white-space:nowrap !important;
font-size:18px !important; font-weight:800 !important; color:#111827 !important;
}
/* 수량 터치 타깃 업(손가락으로 편하게) */
.choose-option_wrap .qty-box .btnQty, #proSubLyForm .qty-box .btnQty{ width:40px !important; height:40px !important; }
.choose-option_wrap .qty-box .qty, #proSubLyForm .qty-box .qty { width:56px !important; height:40px !important; line-height:38px !important; font-size:16px !important; }
}
/* 초소형(<=360px)은 조금 더 타이트 */
@media (max-width:360px){
.choose-option_wrap #optionArea .goods-option .top .add-option,
#proSubLyForm #optionArea .goods-option .top .add-option{
width:32px !important; height:32px !important; flex:0 0 32px !important; border-radius:8px !important;
}
.choose-option_wrap #optionArea .goods-option .top .add-option img,
#proSubLyForm #optionArea .goods-option .top .add-option img{
width:16px !important; height:16px !important;
}
.choose-option_wrap .qty-box .btnQty, #proSubLyForm .qty-box .btnQty{ width:32px !important; height:32px !important; }
.choose-option_wrap .qty-box .qty, #proSubLyForm .qty-box .qty { width:48px !important; height:32px !important; font-size:14px !important; line-height:30px !important; }
.choose-option_wrap #optionArea .goods-option .price,
#proSubLyForm #optionArea .goods-option .price{ font-size:16px !important; }
}
/**************** for .goods-option.card.-main (새 마크업 전용) ****************/
/* ── 데스크톱(참고): 3열 그리드 정리 ── */
@media (min-width:501px){
.goods-option.card.-main .top{
display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.goods-option.card.-main .top .title{
margin:0; font-weight:700; color:#0f172a; line-height:1.3;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
word-break:keep-all;
}
.goods-option.card.-main .middle{
display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
}
.goods-option.card.-main .limit-info{ font-size:12px; color:#64748b; }
}
/* ── 모바일(<=500px): 갯수 → 안내 → 금액 순서 강제 ── */
@media (max-width:500px){
/* 제목 1줄 + …, 버튼은 자리 안 먹게 */
.goods-option.card.-main .top{
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:8px !important; flex-wrap:nowrap !important;
}
.goods-option.card.-main .top .title{
flex:1 1 auto !important; min-width:0 !important;
margin:0 !important; font-size:14px !important; font-weight:700 !important; color:#0f172a !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
}
/* '추가구성'은 아이콘만(36px). 테마의 width:100%/block 무력화 */
.goods-option.card.-main .top .add-option{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
width:36px !important; height:36px !important; flex:0 0 36px !important;
padding:0 !important; border-radius:10px !important; box-sizing:border-box !important;
font-size:0 !important; line-height:0 !important; white-space:nowrap !important;
}
.goods-option.card.-main .top .add-option span{ display:none !important; }
.goods-option.card.-main .top .add-option img{
width:18px !important; height:18px !important; margin:0 !important; filter:brightness(0) invert(1);
}
/* 본문은 세로 스택: [수량] → [안내] → [가격/삭제] */
.goods-option.card.-main .middle{
display:flex !important; flex-direction:column !important; gap:6px !important;
}
/* 수량 박스(왼쪽) */
.goods-option.card.-main .left-side.qty-box{
order:1 !important; align-self:flex-start !important;
display:inline-flex !important; align-items:center !important; gap:6px !important;
background:#f1f5f9; padding:8px 10px; border-radius:10px;
}
.goods-option.card.-main .left-side.qty-box .btnQty{
width:40px; height:40px; border:0; border-radius:10px; background:#e2e8f0; cursor:pointer;
background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
.goods-option.card.-main .left-side.qty-box .subtract{
background-image:url("data:image/svg+xml;utf8,");
}
.goods-option.card.-main .left-side.qty-box .add{
background-image:url("data:image/svg+xml;utf8,");
}
.goods-option.card.-main .left-side.qty-box .qty{
width:56px; height:40px; text-align:center; border:1px solid #e5e7eb; border-radius:10px;
font-size:16px; line-height:38px; background:#fff; color:#111827;
}
/* 안내문(두 번째 줄) */
.goods-option.card.-main .limit-info{
order:2 !important; display:block !important; margin:2px 0 0 !important;
font-size:12px !important; color:#64748b !important; line-height:1.3 !important;
white-space:normal !important; word-break:keep-all !important; overflow-wrap:anywhere !important;
}
/* 가격/삭제(세 번째 줄) */
.goods-option.card.-main .right-side{
order:3 !important; width:100% !important;
display:flex !important; align-items:center !important; justify-content:space-between !important;
gap:10px !important; padding-left:0 !important; margin-top:2px !important;
}
.goods-option.card.-main .right-side .price{
margin:0 0 0 auto !important; white-space:nowrap !important;
font-size:18px !important; font-weight:800 !important; color:#111827 !important;
}
.goods-option.card.-main .right-side .btn-del img{ width:22px; height:22px; display:block; }
}
/* ── 초소형(<=360px): 더 타이트 ── */
@media (max-width:360px){
.goods-option.card.-main .top .title{ font-size:13px !important; }
.goods-option.card.-main .top .add-option{ width:32px !important; height:32px !important; border-radius:8px !important; }
.goods-option.card.-main .top .add-option img{ width:16px !important; height:16px !important; }
.goods-option.card.-main .left-side.qty-box .btnQty{ width:32px !important; height:32px !important; }
.goods-option.card.-main .left-side.qty-box .qty { width:48px !important; height:32px !important; font-size:14px !important; line-height:30px !important; }
.goods-option.card.-main .right-side .price{ font-size:16px !important; }
}
/**************** Added Item (추가상품 카드) – 모바일 하드픽스 ****************/
/* 데스크톱(참고): 옵션명 너비/정렬만 살짝 */
@media (min-width:501px){
#optionArea .addon-item.-pc.card{
display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
}
#optionArea .addon-item.-pc .left-side .option{
margin:0; font-weight:700; color:#0f172a;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:keep-all;
}
#optionArea .addon-item.-pc .right-side{
display:flex; align-items:center; gap:12px;
}
}
/* ── 모바일(<=500px): [옵션명 1줄] → [수량] → [가격/삭제] ── */
@media (max-width:500px){
/* 카드 자체는 세로 스택 */
#optionArea .addon-item.-pc.card{
display:flex !important; flex-direction:column !important; gap:8px !important;
}
/* 옵션명: 한 줄 + … */
#optionArea .addon-item.-pc .left-side .option{
margin:0 !important; font-size:14px !important; font-weight:700 !important; color:#0f172a !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
}
/* right-side는 내부를 다시 세로로: 수량 → 가격/삭제 */
#optionArea .addon-item.-pc .right-side{
display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:6px !important;
padding-left:0 !important;
}
/* 수량 박스 */
#optionArea .addon-item.-pc .right-side .qty-box{
order:1 !important; align-self:flex-start !important;
display:inline-flex !important; align-items:center !important; gap:6px !important;
background:#f1f5f9 !important; padding:8px 10px !important; border-radius:10px !important;
}
#optionArea .addon-item.-pc .right-side .qty-box .btnQty{
width:40px !important; height:40px !important; border:0 !important; border-radius:10px !important; background:#e2e8f0 !important;
background-repeat:no-repeat !important; background-position:center !important; background-size:18px 18px !important;
}
#optionArea .addon-item.-pc .right-side .qty-box .subtract{
background-image:url("data:image/svg+xml;utf8,") !important;
}
#optionArea .addon-item.-pc .right-side .qty-box .add{
background-image:url("data:image/svg+xml;utf8,") !important;
}
#optionArea .addon-item.-pc .right-side .qty-box .qty{
width:56px !important; height:40px !important; text-align:center !important;
border:1px solid #e5e7eb !important; border-radius:10px !important; font-size:16px !important; line-height:38px !important; background:#fff !important;
}
/* 가격 + 삭제: 한 줄로 우측 정렬 */
#optionArea .addon-item.-pc .right-side .price,
#optionArea .addon-item.-pc .right-side .btn-del{
order:2 !important;
}
#optionArea .addon-item.-pc .right-side .price{
margin:0 0 0 auto !important; white-space:nowrap !important;
font-size:18px !important; font-weight:800 !important; color:#111827 !important;
}
#optionArea .addon-item.-pc .right-side .btn-del{
margin-left:8px !important; align-self:flex-end !important;
}
#optionArea .addon-item.-pc .right-side .btn-del img{ width:22px; height:22px; display:block; }
}
/* ── 초소형(<=360px): 더 타이트 ── */
@media (max-width:360px){
#optionArea .addon-item.-pc .left-side .option{ font-size:13px !important; }
#optionArea .addon-item.-pc .right-side .qty-box .btnQty{ width:32px !important; height:32px !important; }
#optionArea .addon-item.-pc .right-side .qty-box .qty { width:48px !important; height:32px !important; font-size:14px !important; line-height:30px !important; }
#optionArea .addon-item.-pc .right-side .price{ font-size:16px !important; }
}
/**************** ADD-ON (추가상품) 카드 – 모바일 레이아웃 하드픽스 ****************/
/* 대상: 바텀시트 내부 #optionArea .addon-item.-pc.card */
@media (max-width:540px){
/* 카드: 세로 스택 + 테마 float/position 초기화 */
.choose-option_wrap #optionArea .addon-item.-pc.card{
display:flex !important; flex-direction:column !important; gap:8px !important;
position:static !important; float:none !important; clear:both !important;
}
/* 옵션명 줄깨짐/세로쓰기 방지 + 1줄 … */
.choose-option_wrap #optionArea .addon-item.-pc .left-side{
position:static !important; float:none !important; width:auto !important;
}
.choose-option_wrap #optionArea .addon-item.-pc .left-side .option{
margin:0 !important; font-size:14px !important; font-weight:700 !important; color:#0f172a !important;
writing-mode:horizontal-tb !important; text-orientation:mixed !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
}
/* 우측 영역: 수량 → 가격/삭제 로 세로 스택 */
.choose-option_wrap #optionArea .addon-item.-pc .right-side{
display:flex !important; flex-direction:column !important; align-items:stretch !important;
gap:6px !important; padding-left:0 !important; position:static !important; float:none !important; width:100% !important;
}
/* 수량 박스: 한 줄 박스 + 터치 타깃 확보 */
.choose-option_wrap #optionArea .addon-item.-pc .right-side .qty-box{
order:1 !important; align-self:flex-start !important;
display:inline-flex !important; align-items:center !important; gap:6px !important;
background:#f1f5f9 !important; padding:8px 10px !important; border-radius:10px !important;
}
.choose-option_wrap #optionArea .addon-item.-pc .right-side .qty-box .btnQty{
width:40px !important; height:40px !important; border:0 !important; border-radius:10px !important;
background:#e2e8f0 !important; background-repeat:no-repeat !important; background-position:center !important; background-size:18px 18px !important;
}
.choose-option_wrap #optionArea .addon-item.-pc .right-side .qty-box .subtract{
background-image:url("data:image/svg+xml;utf8,") !important;
}
.choose-option_wrap #optionArea .addon-item.-pc .right-side .qty-box .add{
background-image:url("data:image/svg+xml;utf8,") !important;
}
.choose-option_wrap #optionArea .addon-item.-pc .right-side .qty-box .qty{
width:56px !important; height:40px !important; line-height:38px !important;
text-align:center !important; border:1px solid #e5e7eb !important; border-radius:10px !important; font-size:16px !important;
background:#fff !important; color:#111827 !important;
}
/* 가격/삭제 줄: 한 줄, 우측 정렬, 겹침 방지 */
.choose-option_wrap #optionArea .addon-item.-pc .right-side .price,
.choose-option_wrap #optionArea .addon-item.-pc .right-side .btn-del{
order:2 !important; position:static !important; float:none !important;
}
.choose-option_wrap #optionArea .addon-item.-pc .right-side .price{
margin:0 0 0 auto !important; white-space:nowrap !important;
font-size:18px !important; font-weight:800 !important; color:#111827 !important;
}
.choose-option_wrap #optionArea .addon-item.-pc .right-side .btn-del{ align-self:flex-end !important; margin-left:8px !important; }
.choose-option_wrap #optionArea .addon-item.-pc .right-side .btn-del img{ width:22px !important; height:22px !important; display:block !important; }
}
/* 초소형(<=360px) 조금 더 촘촘히 */
@media (max-width:360px){
.choose-option_wrap #optionArea .addon-item.-pc .left-side .option{ font-size:13px !important; }
.choose-option_wrap #optionArea .addon-item.-pc .right-side .qty-box .btnQty{ width:32px !important; height:32px !important; }
.choose-option_wrap #optionArea .addon-item.-pc .right-side .qty-box .qty { width:48px !important; height:32px !important; font-size:14px !important; line-height:30px !important; }
.choose-option_wrap #optionArea .addon-item.-pc .right-side .price{ font-size:16px !important; }
}
/************* ADD-ON ITEM (추가상품) – 모바일 레이아웃 리빌드 *************/
@media (max-width:540px){
/* 카드: 부모 그리드로 영역을 강제 정의 */
#optionArea .addon-item.-pc.card{
display:grid !important;
grid-template-columns: 1fr auto !important;
grid-template-areas:
"name name" /* 옵션명 */
"qty qty" /* 수량 */
"limit limit" /* 안내(있을 때) */
"price del" /* 가격/삭제 */
!important;
row-gap:8px !important; column-gap:8px !important;
align-items:center !important;
position:static !important; float:none !important; clear:both !important;
background:#fff !important; /* 뒷배경 보임 방지 */
}
/* 옵션명: 항상 맨 위 한 줄 + … */
#optionArea .addon-item.-pc.card > .left-side{ grid-area:name !important; width:auto !important; }
#optionArea .addon-item.-pc.card > .left-side .option{
margin:0 !important; font-size:14px !important; font-weight:700 !important; color:#0f172a !important;
writing-mode:horizontal-tb !important; text-orientation:mixed !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
}
/* 우측 래퍼를 "투명 컨테이너"로 → 자식들을 부모 그리드에 배치 */
#optionArea .addon-item.-pc.card > .right-side{
display:contents !important; /* ← 핵심: 내부 아이템을 부모 그리드에 직접 배치 */
}
/* 수량 박스 = 둘째 줄 */
#optionArea .addon-item.-pc.card .right-side .qty-box{
grid-area:qty !important;
justify-self:start !important;
display:inline-flex !important; align-items:center !important; gap:6px !important;
background:#f1f5f9 !important; padding:8px 10px !important; border-radius:10px !important;
}
#optionArea .addon-item.-pc.card .right-side .qty-box .btnQty{
width:40px !important; height:40px !important; border:0 !important; border-radius:10px !important;
background:#e2e8f0 !important; background-repeat:no-repeat !important; background-position:center !important; background-size:18px 18px !important;
}
#optionArea .addon-item.-pc.card .right-side .qty-box .subtract{
background-image:url("data:image/svg+xml;utf8,") !important;
}
#optionArea .addon-item.-pc.card .right-side .qty-box .add{
background-image:url("data:image/svg+xml;utf8,") !important;
}
#optionArea .addon-item.-pc.card .right-side .qty-box .qty{
width:56px !important; height:40px !important; line-height:38px !important; text-align:center !important;
border:1px solid #e5e7eb !important; border-radius:10px !important; font-size:16px !important; background:#fff !important;
}
/* (있다면) 최소/최대 안내 = 셋째 줄
- DOM에 .limit-info가 없고 텍스트 노드로 삽입될 수도 있어 겹침 방지용 공통 규칙 */
#optionArea .addon-item.-pc.card .limit-info{
grid-area:limit !important;
margin:0 !important; font-size:12px !important; color:#64748b !important; line-height:1.3 !important;
white-space:normal !important; word-break:keep-all !important; overflow-wrap:anywhere !important;
}
/* 안내문이 클래스 없이 들어갈 경우: qty/price/btn-del이 아닌 모든 텍스트 노드를 limit 줄로 강제 */
#optionArea .addon-item.-pc.card > :not(.left-side):not(.right-side){ grid-area:limit !important; }
/* 가격/삭제 = 마지막 줄 */
#optionArea .addon-item.-pc.card .right-side .price{
grid-area:price !important; justify-self:end !important;
margin:0 !important; white-space:nowrap !important; font-size:18px !important; font-weight:800 !important; color:#111827 !important;
}
#optionArea .addon-item.-pc.card .right-side .btn-del{
grid-area:del !important; justify-self:end !important; margin-left:8px !important;
}
#optionArea .addon-item.-pc.card .right-side .btn-del img{ width:22px !important; height:22px !important; display:block !important; }
/* 겹침/가림 방지 */
#optionArea .addon-item.-pc.card *{
position:static !important; float:none !important;
}
}
/* 초소형(<=360px) 조금 더 타이트 */
@media (max-width:360px){
#optionArea .addon-item.-pc.card .left-side .option{ font-size:13px !important; }
#optionArea .addon-item.-pc.card .right-side .qty-box .btnQty{ width:32px !important; height:32px !important; }
#optionArea .addon-item.-pc.card .right-side .qty-box .qty { width:48px !important; height:32px !important; font-size:14px !important; line-height:30px !important; }
#optionArea .addon-item.-pc.card .right-side .price{ font-size:16px !important; }
}
/************* ADD-ON(추가상품) 카드 – 360~540px 하드 픽스 *************/
@media (max-width:540px){
/* 0) 이전 패치/테마 무력화 */
.choose-option_wrap #optionArea .addon-item.-pc.card{
/* 기존 grid/float/absolute/contents 제거 */
display:block !important;
position:static !important; float:none !important; clear:both !important;
background:#fff !important;
}
/* 1) 옵션명: 항상 맨 위 한 줄(…) */
.choose-option_wrap #optionArea .addon-item.-pc.card > .left-side{
display:block !important; width:100% !important; margin:0 0 8px !important;
position:static !important; float:none !important;
}
.choose-option_wrap #optionArea .addon-item.-pc.card > .left-side .option{
margin:0 !important; font-size:14px !important; font-weight:700 !important; color:#0f172a !important;
writing-mode:horizontal-tb !important; text-orientation:mixed !important; /* 세로쓰기 방지 */
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
}
/* 2) 나머지(수량/가격/삭제)는 자체 그리드 */
.choose-option_wrap #optionArea .addon-item.-pc.card > .right-side{
display:grid !important;
grid-template-columns: 1fr auto !important;
grid-template-areas:
"qty qty" /* 둘째 줄: 수량 */
"price del" /* 마지막 줄: 가격 / 삭제 */
!important;
row-gap:6px !important; column-gap:8px !important;
align-items:center !important; padding-left:0 !important;
position:static !important; float:none !important; width:100% !important;
}
/* 2-1) 수량 박스(둘째 줄, 좌측 정렬) */
.choose-option_wrap #optionArea .addon-item.-pc.card > .right-side .qty-box{
grid-area:qty !important; justify-self:start !important;
display:inline-flex !important; align-items:center !important; gap:6px !important;
background:#f1f5f9 !important; padding:8px 10px !important; border-radius:10px !important;
}
.choose-option_wrap #optionArea .addon-item.-pc.card > .right-side .qty-box .btnQty{
width:40px !important; height:40px !important; border:0 !important; border-radius:10px !important;
background:#e2e8f0 !important; background-repeat:no-repeat !important; background-position:center !important; background-size:18px 18px !important;
}
.choose-option_wrap #optionArea .addon-item.-pc.card > .right-side .qty-box .subtract{
background-image:url("data:image/svg+xml;utf8,") !important;
}
.choose-option_wrap #optionArea .addon-item.-pc.card > .right-side .qty-box .add{
background-image:url("data:image/svg+xml;utf8,") !important;
}
.choose-option_wrap #optionArea .addon-item.-pc.card > .right-side .qty-box .qty{
width:56px !important; height:40px !important; line-height:38px !important; text-align:center !important;
border:1px solid #e5e7eb !important; border-radius:10px !important; font-size:16px !important; background:#fff !important;
}
/* 2-2) 가격/삭제(마지막 줄, 우측 정렬) */
.choose-option_wrap #optionArea .addon-item.-pc.card > .right-side .price{
grid-area:price !important; justify-self:end !important;
margin:0 !important; white-space:nowrap !important;
font-size:18px !important; font-weight:800 !important; color:#111827 !important;
}
.choose-option_wrap #optionArea .addon-item.-pc.card > .right-side .btn-del{
grid-area:del !important; justify-self:end !important; margin-left:8px !important;
position:static !important; float:none !important;
}
.choose-option_wrap #optionArea .addon-item.-pc.card > .right-side .btn-del img{
width:22px !important; height:22px !important; display:block !important;
}
}
/* 초소형(<=360px): 좀 더 타이트하게 */
@media (max-width:360px){
.choose-option_wrap #optionArea .addon-item.-pc.card > .left-side .option{ font-size:13px !important; }
.choose-option_wrap #optionArea .addon-item.-pc.card > .right-side .qty-box .btnQty{ width:32px !important; height:32px !important; }
.choose-option_wrap #optionArea .addon-item.-pc.card > .right-side .qty-box .qty { width:48px !important; height:32px !important; font-size:14px !important; line-height:30px !important; }
.choose-option_wrap #optionArea .addon-item.-pc.card > .right-side .price{ font-size:16px !important; }
}
/* ===========================
Selected Add-on item (모바일 전용 레이아웃)
- 구조는 그대로 두고 CSS Grid 로만 재배치
- 이름 1줄, 수량/삭제 1행, 가격은 하단 가득
===========================*/
@media (max-width: 500px) {
/* 카드 자체를 그리드로: name → (qty,del) → price */
#optionArea .addon-item{
display: grid !important;
grid-template-areas:
"name name"
"qty del"
"price price";
grid-template-columns: 1fr auto;
gap: 8px !important;
align-items: center !important;
padding: 12px !important;
}
/* 옵션명(왼쪽 영역)은 1줄 고정 + 말줄임 */
#optionArea .addon-item > .left-side{ grid-area: name !important; }
#optionArea .addon-item > .left-side .option{
display:block !important;
margin:0 !important;
font-size:14px !important;
font-weight:700 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
writing-mode: horizontal-tb !important; /* 세로흐름 방지 */
}
/* 오른쪽 묶음 내부는 그리드로 평면화 */
#optionArea .addon-item > .right-side{
display: grid !important;
grid-template-areas:
"qty del"
"price price";
grid-template-columns: 1fr auto;
gap: 8px !important;
align-items: center !important;
padding-left: 0 !important; /* 테마가 준 좌여백 제거 */
}
/* 수량 박스는 좌측 */
#optionArea .addon-item .qty-box{
grid-area: qty !important;
justify-self: start !important;
background: #f1f5f9 !important;
padding: 8px !important;
border-radius: 10px !important;
}
#optionArea .addon-item .qty-box .btnQty{ width:36px !important; height:36px !important; border-radius:10px !important; }
#optionArea .addon-item .qty-box .qty { width:56px !important; height:36px !important; font-size:16px !important; }
/* 삭제 버튼은 우측 상단 */
#optionArea .addon-item .btn-del{
grid-area: del !important;
justify-self: end !important;
width: 28px !important; height: 28px !important;
display: inline-flex !important; align-items:center !important; justify-content:center !important;
}
/* 가격은 아래 한 줄, 우측 정렬(숫자 개행 방지) */
#optionArea .addon-item .price{
grid-area: price !important;
margin:0 !important;
font-size:16px !important; font-weight:800 !important;
text-align:right !important; white-space:nowrap !important;
}
/* 테마/기존 PC용 클래스가 모바일에서 방해하는 것들 무력화 */
#optionArea .addon-item.-pc .option,
#optionArea .addon-item .option{
word-break: normal !important;
overflow-wrap: normal !important; /* 강제 줄바꿈 방지 */
}
#optionArea .addon-item .left-side,
#optionArea .addon-item .right-side{
float:none !important; /* 테마가 float 주는 경우 방지 */
}
}
/* 초소형(≤360px)에서는 조~금 더 압축 */
@media (max-width: 360px){
#optionArea .addon-item{ gap:6px !important; padding:10px !important; }
#optionArea .addon-item .qty-box .btnQty{ width:34px !important; height:34px !important; }
#optionArea .addon-item .qty-box .qty { width:50px !important; height:34px !important; font-size:15px !important; }
}
/* 메인 옵션 카드의 레이아웃은 middle 내부 자식에게만 적용(누수 차단) */
@media (max-width:500px){
#optionArea .goods-option.card.-main > .middle > .right-side{
order:3 !important; width:100% !important;
display:flex !important; align-items:center !important;
}
/* 메인 카드 안쪽에 들어온 추가상품(.addon-item)에는 메인 규칙이 먹지 않게 리셋 */
#optionArea .goods-option.card.-main > .bottom.addon-item *{
order:initial !important; width:auto !important; flex:none !important;
}
}
/* 540px 이하: 옵션명 → 수량 → 가격/삭제 순서로 3단 스택 */
@media (max-width:540px){
/* 카드 컨테이너 */
#optionArea .goods-option.card.-main > .bottom.addon-item,
#optionArea .addon-item.-pc.card{
display:grid !important;
grid-template-areas:
"name name" /* 1행: 옵션명 */
"qty del" /* 2행: 수량 / 삭제 */
"price price"; /* 3행: 가격 */
grid-template-columns: 1fr auto;
row-gap:8px !important; column-gap:8px !important;
position:static !important; float:none !important;
background:#fff !important;
}
/* 1) 옵션명(1줄 …) */
#optionArea .addon-item.-pc.card > .left-side{ grid-area:name !important; }
#optionArea .addon-item.-pc.card > .left-side .option{
margin:0 !important; font-size:14px !important; font-weight:700 !important; color:#0f172a !important;
writing-mode:horizontal-tb !important; /* 세로쓰기 방지 */
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
}
/* 2) 수량 박스(2행 좌측) */
#optionArea .addon-item.-pc.card > .right-side{ /* 내부 묶음은 그리드로 평면화 */
display:grid !important;
grid-template-areas:"qty del" "price price";
grid-template-columns:1fr auto;
gap:8px !important; align-items:center !important; padding-left:0 !important;
}
#optionArea .addon-item.-pc.card .qty-box{
grid-area:qty !important; justify-self:start !important;
display:inline-flex !important; align-items:center !important; gap:6px !important;
background:#f1f5f9 !important; padding:8px 10px !important; border-radius:10px !important;
}
#optionArea .addon-item.-pc.card .qty-box .btnQty{ width:40px !important; height:40px !important; border-radius:10px !important; }
#optionArea .addon-item.-pc.card .qty-box .qty { width:56px !important; height:40px !important; line-height:38px !important; font-size:16px !important; }
/* 3) 가격/삭제(3행, 우측 정렬) */
#optionArea .addon-item.-pc.card .price{
grid-area:price !important; margin:0 !important; text-align:right !important;
white-space:nowrap !important; font-size:18px !important; font-weight:800 !important; color:#111827 !important;
}
#optionArea .addon-item.-pc.card .btn-del{
grid-area:del !important; justify-self:end !important; width:28px !important; height:28px !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
#optionArea .addon-item.-pc.card .btn-del img{ width:22px !important; height:22px !important; display:block !important; }
}
/* 360px 이하: 조금 더 압축 */
@media (max-width:360px){
#optionArea .addon-item.-pc.card{ row-gap:6px !important; }
#optionArea .addon-item.-pc.card .qty-box .btnQty{ width:32px !important; height:32px !important; }
#optionArea .addon-item.-pc.card .qty-box .qty { width:48px !important; height:32px !important; font-size:14px !important; line-height:30px !important; }
#optionArea .addon-item.-pc.card .price{ font-size:16px !important; }
}
/* 화살표 닫기 버튼 */
#mobileOptionSheet .choose-option_arrow{
position:absolute; left:50%; top:-18px; transform:translateX(-50%);
width:40px; height:40px; border-radius:999px;
display:flex; align-items:center; justify-content:center;
background:#e2e8f0; box-shadow:0 4px 12px rgba(0,0,0,.18);
cursor:pointer; z-index:100510; pointer-events:auto;
}
#mobileOptionSheet{ z-index:100500; } /* 시트 */
.option-sheet-backdrop{ z-index:100400; } /* 백드롭은 시트보다 아래 */
#mobileOptionSheet .choose-option_arrow img{ pointer-events:none; } /* 이미지가 클릭을 먹지 않게 */
/* 열림/닫힘 애니메이션은 기존 클래스 그대로 사용 */
.choose-option_wrap{ transform:translateY(100%); transition:transform .28s ease; }
.choose-option_wrap.active{ transform:translateY(0); }
#mobileOptionSheet .choose-option_arrow{
position:absolute; left:50%; top:-14px; transform:translateX(-50%);
width:48px; height:32px; padding:0; border:0; background:transparent;
z-index:100510; /* 이미 확인된 값 유지 */
pointer-events:auto; cursor:pointer;
}
#mobileOptionSheet .choose-option_arrow img{
display:block; width:100%; height:auto; pointer-events:none;
}
#mobileOptionSheet .choose-option_arrow{
position:absolute; left:50%; top:-14px; transform:translateX(-50%);
width:48px; height:32px; border:0; background:transparent;
z-index:100510; cursor:pointer; pointer-events:auto !important;
}
#mobileOptionSheet .choose-option_arrow img{ pointer-events:none; display:block; }
#mobileOptionSheet .choose-option_arrow{
pointer-events:auto !important; cursor:pointer;
}
#mobileOptionSheet .choose-option_arrow img{
pointer-events:none; /* 이미지가 클릭을 먹지 않게 */
}
/************** PC 레이아웃 고정 & 정렬 (>=1025px) — 최종 **************/
@media (min-width:1025px){
/* 카드 공통 간격 */
#optionArea .goods-option.card.-main,
#optionArea .addon-item.-pc.card{
padding:12px 14px !important;
margin-top:10px !important;
border-radius:12px !important;
}
/* ── 메인 옵션 행: [안내] | [가격] | [수량] ── */
#optionArea .goods-option.card.-main .middle{
display:grid !important;
grid-template-columns: 1fr auto auto !important;
grid-template-areas: "info price qty" !important;
column-gap:16px !important;
align-items:center !important;
}
#optionArea .goods-option.card.-main .limit-info{
grid-area: info !important;
margin:0 !important; font-size:12px !important; color:#64748b !important;
white-space:nowrap !important;
}
#optionArea .goods-option.card.-main .right-side{
grid-area: price !important;
justify-self:end !important;
display:flex !important; align-items:center !important; gap:10px !important;
position:static !important;
}
#optionArea .goods-option.card.-main .right-side .price{
margin:0 !important; white-space:nowrap !important; line-height:1.2 !important;
}
#optionArea .goods-option.card.-main .left-side.qty-box{
grid-area: qty !important;
justify-self:end !important;
}
/* ── 추가구성 행: [옵션명] …… [가격] [수량] [삭제] (우측 정렬) ── */
#optionArea .addon-item.-pc.card{
display:grid !important;
grid-template-columns: 1fr auto auto auto !important; /* 옵션명 | 가격 | 수량 | 삭제 */
column-gap:16px !important;
align-items:center !important;
}
#optionArea .addon-item.-pc.card > .left-side{
min-width:0 !important;
}
#optionArea .addon-item.-pc.card > .left-side .option{
margin:0 !important; font-size:14px !important; line-height:1.35 !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
/* 오른쪽 3개 영역 */
#optionArea .addon-item.-pc.card > .right-side{
display:contents !important; /* 안쪽 요소들을 그리드 셀에 직접 배치 */
}
#optionArea .addon-item.-pc.card > .right-side .price{
grid-column:2 !important; justify-self:end !important;
margin:0 !important; white-space:nowrap !important; line-height:1.2 !important;
}
#optionArea .addon-item.-pc.card > .right-side .qty-box{
grid-column:3 !important; justify-self:end !important;
}
#optionArea .addon-item.-pc.card > .right-side .btn-del{
grid-column:4 !important; justify-self:end !important;
position:static !important; display:inline-flex !important;
}
/* 수량 박스 공통 보정 */
#optionArea .qty-box{ padding:6px 8px !important; }
#optionArea .qty-box .qty{
height:36px !important; line-height:36px !important;
font-size:14px !important; text-align:center !important;
}
}
/* === FINAL LAYOUT OVERRIDE (scoped) ============================== */
/* 공통: 카드 기본 정렬/타이포 안정화 */
html.opt-ui-v2 #optionArea .goods-option.card.-main,
html.opt-ui-v2 #optionArea .addon-item.-pc.card{
padding:12px 14px !important;
border-radius:12px !important;
box-shadow:0 2px 8px rgba(0,0,0,.04) !important;
}
html.opt-ui-v2 #optionArea .addon-item.-pc.card .left-side .option{
margin:0 !important; line-height:1.35 !important; white-space:nowrap !important;
overflow:hidden !important; text-overflow:ellipsis !important;
}
/* ─ PC(>=1025px): [이름 | ........ | 가격 | 수량 | 삭제] - 우측정렬 통일 ─ */
@media (min-width:1025px){
html.opt-ui-v2 #optionArea .goods-option.card.-main .middle{
display:grid !important; grid-template-columns: 1fr auto auto !important;
grid-template-areas: "info price qty" !important; column-gap:16px !important; align-items:center !important;
}
html.opt-ui-v2 #optionArea .goods-option.card.-main .limit-info{ grid-area:info !important; margin:0 !important; font-size:12px !important; color:#64748b !important; }
html.opt-ui-v2 #optionArea .goods-option.card.-main .right-side{ grid-area:price !important; justify-self:end !important; gap:10px !important; }
html.opt-ui-v2 #optionArea .goods-option.card.-main .left-side.qty-box{ grid-area:qty !important; justify-self:end !important; }
html.opt-ui-v2 #optionArea .addon-item.-pc.card{
display:grid !important;
grid-template-columns: 1fr auto auto auto !important; /* 이름 | 가격 | 수량 | 삭제 */
column-gap:16px !important; align-items:center !important;
}
/* 우측 묶음은 contents로 풀어서 각 셀에 바로 배치 */
html.opt-ui-v2 #optionArea .addon-item.-pc.card > .right-side{ display:contents !important; }
html.opt-ui-v2 #optionArea .addon-item.-pc.card .price { justify-self:end !important; margin:0 !important; white-space:nowrap !important; line-height:1.2 !important; }
html.opt-ui-v2 #optionArea .addon-item.-pc.card .qty-box { justify-self:end !important; }
html.opt-ui-v2 #optionArea .addon-item.-pc.card .btn-del { justify-self:end !important; position:static !important; display:inline-flex !important; }
/* 수량 입력 높이 통일 */
html.opt-ui-v2 #optionArea .qty-box .qty{ height:36px !important; line-height:36px !important; font-size:14px !important; }
}
/* ─ Mobile(<=500px): [이름] → [수량] → [가격 | 삭제] 3단 스택 ─ */
@media (max-width:500px){
/* 메인 옵션 */
html.opt-ui-v2 #optionArea .goods-option.card.-main .top{
display:flex !important; align-items:center !important; gap:8px !important; justify-content:space-between !important;
}
html.opt-ui-v2 #optionArea .goods-option.card.-main .top .title{
flex:1 1 auto !important; min-width:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
margin:0 !important; font-size:14px !important; font-weight:700 !important;
}
html.opt-ui-v2 #optionArea .goods-option.card.-main .top .add-option{
width:36px !important; height:36px !important; padding:0 !important; border-radius:10px !important; font-size:0 !important; line-height:0 !important;
}
html.opt-ui-v2 #optionArea .goods-option.card.-main .middle{
display:flex !important; flex-direction:column !important; gap:6px !important;
}
html.opt-ui-v2 #optionArea .goods-option.card.-main .left-side.qty-box{ order:1 !important; align-self:flex-start !important; }
html.opt-ui-v2 #optionArea .goods-option.card.-main .limit-info { order:2 !important; font-size:12px !important; color:#64748b !important; }
html.opt-ui-v2 #optionArea .goods-option.card.-main .right-side { order:3 !important; width:100% !important; display:flex !important; justify-content:space-between !important; }
html.opt-ui-v2 #optionArea .goods-option.card.-main .right-side .price{ margin-left:auto !important; font-size:18px !important; font-weight:800 !important; white-space:nowrap !important; }
/* 추가구성: name → qty → [price | del] */
html.opt-ui-v2 #optionArea .addon-item.-pc.card{
display:grid !important;
grid-template-areas: "name name" "qty del" "price price" !important;
grid-template-columns: 1fr auto !important;
row-gap:8px !important; column-gap:8px !important;
}
html.opt-ui-v2 #optionArea .addon-item.-pc.card > .left-side{ grid-area:name !important; }
html.opt-ui-v2 #optionArea .addon-item.-pc.card > .left-side .option{
font-size:14px !important; font-weight:700 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
html.opt-ui-v2 #optionArea .addon-item.-pc.card > .right-side{ display:contents !important; }
html.opt-ui-v2 #optionArea .addon-item.-pc.card .qty-box { grid-area:qty !important; justify-self:start !important; }
html.opt-ui-v2 #optionArea .addon-item.-pc.card .price { grid-area:price !important; justify-self:end !important; font-size:16px !important; font-weight:800 !important; white-space:nowrap !important; }
html.opt-ui-v2 #optionArea .addon-item.-pc.card .btn-del { grid-area:del !important; justify-self:end !important; width:28px !important; height:28px !important; display:inline-flex !important; }
}
/* ─ 초소형(<=360px): 살짝 더 압축 ─ */
@media (max-width:360px){
html.opt-ui-v2 #optionArea .goods-option.card.-main .top .title,
html.opt-ui-v2 #optionArea .addon-item.-pc.card > .left-side .option{ font-size:13px !important; }
html.opt-ui-v2 #optionArea .qty-box .btnQty{ width:32px !important; height:32px !important; }
html.opt-ui-v2 #optionArea .qty-box .qty { height:32px !important; line-height:30px !important; font-size:14px !important; }
}
/* ─ 화살표(닫기 버튼) 중복 정의 정리 ─ */
html.opt-ui-v2 #mobileOptionSheet .choose-option_arrow{
position:absolute; left:50%; top:-14px; transform:translateX(-50%);
width:48px; height:32px; border:0; background:transparent; cursor:pointer;
z-index:100510; pointer-events:auto;
}
html.opt-ui-v2 #mobileOptionSheet .choose-option_arrow img{ display:block; width:100%; height:auto; pointer-events:none; }
/* === PC: 추가옵션 한 줄 고정 (이름 | 가격 | 수량 | 삭제) ================== */
@media (min-width:769px){
html.opt-ui-v2 #optionArea .addon-item.-pc.card{
/* 무조건 4열 그리드로: 이름 1fr | 가격 | 수량 | 삭제 */
display:grid !important;
grid-template-columns: 1fr max-content max-content max-content !important;
column-gap:14px !important;
align-items:center !important;
}
/* 우측 래퍼 안의 자식들을 바로 그리드 셀로 배치 */
html.opt-ui-v2 #optionArea .addon-item.-pc.card > .right-side{
display:contents !important;
width:auto !important; padding-left:0 !important;
}
/* 각 셀 고정 */
html.opt-ui-v2 #optionArea .addon-item.-pc.card .price{
justify-self:end !important;
margin:0 !important; white-space:nowrap !important; line-height:1.2 !important;
}
html.opt-ui-v2 #optionArea .addon-item.-pc.card .qty-box{
justify-self:end !important;
min-width:0 !important; /* 기존 min-width로 밀려 내려가는 것 방지 */
}
html.opt-ui-v2 #optionArea .addon-item.-pc.card .qty-box .qty{
width:48px !important; height:36px !important; line-height:36px !important;
font-size:14px !important;
}
html.opt-ui-v2 #optionArea .addon-item.-pc.card .btn-del{
justify-self:end !important;
position:static !important; display:inline-flex !important;
}
}
/* PC 일반: 수량 박스가 너무 커서 줄바꿈 되는 것 방지 */
@media (min-width:769px){
html.opt-ui-v2 #optionArea .qty-box{ min-width:auto !important; padding:6px 8px !important; }
}
/* === PC: 추가구성/옵션 라인에서 수량 박스 줄바꿈 방지 고정 === */
@media (min-width:1025px){
/* 1) 추가구성(행 전체를 4열 그리드로: [이름 | 가격 | 수량 | 삭제]) */
#optionArea .addon-item.-pc,
#optionArea .addon-item.-pc.card{
display: grid !important;
grid-template-columns: 1fr auto auto auto !important; /* 이름 | 가격 | 수량 | 삭제 */
align-items: center !important;
column-gap: 16px !important;
}
#optionArea .addon-item.-pc > .left-side{ min-width:0 !important; }
#optionArea .addon-item.-pc > .left-side .option{
margin:0 !important; white-space:nowrap !important;
overflow:hidden !important; text-overflow:ellipsis !important;
}
/* 우측 묶음은 껍데기 제거(자식들을 바로 그리드에 배치) */
#optionArea .addon-item.-pc > .right-side{ display: contents !important; }
/* 가격 / 수량 / 삭제 각각 고정 셀 */
#optionArea .addon-item.-pc .price{
grid-column: 2 !important; justify-self: end !important;
margin:0 !important; white-space:nowrap !important;
}
#optionArea .addon-item.-pc .qty-box{
grid-column: 3 !important; justify-self: end !important;
display: inline-flex !important;
float: none !important; clear: none !important;
min-width: auto !important; /* ← wrap의 주범 제거 */
}
#optionArea .addon-item.-pc .btn-del{
grid-column: 4 !important; justify-self: end !important;
display: inline-flex !important;
}
/* 2) 메인 옵션 행도 동일하게 우측 정렬 강제(필요 시) */
#optionArea .goods-option.card.-main .middle{
display: grid !important;
grid-template-columns: 1fr auto auto !important; /* 안내 | 가격 | 수량 */
align-items: center !important;
column-gap: 16px !important;
}
#optionArea .goods-option.card.-main .right-side{
justify-self: end !important;
display: flex !important; align-items:center !important; gap:10px !important;
}
#optionArea .goods-option.card.-main .left-side.qty-box{
justify-self: end !important;
min-width: auto !important; /* ← PC에서 불필요한 최소폭 제거 */
}
/* 3) 전역적으로 PC에서는 큰 최소폭을 없애 wrap 원천봉쇄 */
#optionArea .qty-box{ min-width: auto !important; }
#optionArea .qty-box .qty{
height: 36px !important; line-height: 36px !important; text-align:center !important;
}
}
/* === PC: 옵션 행을 4열 그리드로 고정해서 수량 박스 줄바꿈 방지 === */
@media (min-width:1025px){
/* 추가구성(추가상품) 행 전체를: [이름 | 가격 | 수량 | 삭제] */
#optionArea .addon-item,
#optionArea .addon-item.-pc,
#optionArea .addon-item.-pc.card,
#optionArea [id^="addProBody_"],
#optionArea .add-goods{
display:grid !important;
grid-template-columns: 1fr auto auto auto !important; /* 이름 | 가격 | 수량 | 삭제 */
align-items:center !important;
column-gap:16px !important;
row-gap:0 !important;
float:none !important; /* 테마 float 잔재 무력화 */
clear:none !important;
}
/* 옵션명(왼쪽) */
#optionArea .addon-item > .left-side,
#optionArea [id^="addProBody_"] > .left-side{
min-width:0 !important;
}
#optionArea .addon-item > .left-side .option,
#optionArea [id^="addProBody_"] > .left-side .option{
margin:0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* 오른쪽 묶음은 껍데기 제거 → 자식들을 부모 그리드에 직접 배치 */
#optionArea .addon-item > .right-side,
#optionArea [id^="addProBody_"] > .right-side{
display:contents !important;
float:none !important;
clear:none !important;
}
/* 가격 / 수량 / 삭제 각 칸 고정 */
#optionArea .addon-item .price,
#optionArea [id^="addProBody_"] .price{
grid-column:2 !important;
justify-self:end !important;
margin:0 !important;
white-space:nowrap !important;
}
#optionArea .addon-item .qty-box,
#optionArea [id^="addProBody_"] .qty-box{
grid-column:3 !important;
justify-self:end !important;
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
white-space:nowrap !important;
min-width:auto !important; /* ← 큰 최소폭 제거 */
width:auto !important;
float:none !important;
clear:none !important;
}
#optionArea .addon-item .btn-del,
#optionArea [id^="addProBody_"] .btn-del{
grid-column:4 !important;
justify-self:end !important;
display:inline-flex !important;
}
/* 메인 옵션 카드도 동일 컨셉으로 우측 정렬(필요 시) */
#optionArea .goods-option.card.-main .middle{
display:grid !important;
grid-template-columns: 1fr auto auto !important; /* 안내 | 가격 | 수량 */
align-items:center !important;
column-gap:16px !important;
}
#optionArea .goods-option.card.-main .right-side{
justify-self:end !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
flex-wrap:nowrap !important;
}
#optionArea .goods-option.card.-main .left-side.qty-box{
justify-self:end !important;
min-width:auto !important;
}
/* 전역: PC에선 큰 최소폭/폭 100% 같은 랩핑 유발 요소 제거 */
#optionArea .qty-box{ min-width:auto !important; width:auto !important; }
#optionArea .qty-box .qty{ width:56px !important; height:36px !important; line-height:36px !important; }
}
/***** 👇 최종 패치: PC에서 수량/가격 줄바꿈 방지 + 정렬 고정 (파일 맨 끝에 추가) *****/
@media (min-width:769px){
/* 옵션 카드 상단: 제목은 늘 1줄 …, 버튼은 고정폭 */
#optionArea .goods-option .top{
display:flex !important; align-items:center !important; gap:12px !important;
}
#optionArea .goods-option .top .title,
#optionArea .goods-option .top .option{
flex:1 1 auto !important; min-width:0 !important;
margin:0 !important; font-weight:700 !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#optionArea .goods-option .top .add-option{
flex:0 0 auto !important; width:auto !important; max-width:100% !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
/* 옵션 카드 본문: 1행 고정(줄바꿈 금지) – 수량 왼쪽, 가격/삭제 오른쪽 */
#optionArea .goods-option .middle{
display:flex !important; align-items:center !important; gap:12px !important;
flex-wrap:nowrap !important; /* ★ 줄바꿈 금지 */
}
#optionArea .goods-option .qty-box{
flex:0 0 auto !important; /* 크기 고정(밀림 방지) */
min-width:140px !important;
}
#optionArea .goods-option .right-side{
margin-left:auto !important;
display:flex !important; align-items:center !important; gap:10px !important;
min-width:0 !important; /* 우측 영역이 넘칠 때도 가로 유지 */
}
#optionArea .goods-option .right-side .price,
#optionArea .goods-option .price{
white-space:nowrap !important; /* 1,234,567 개행 방지 */
font-weight:800 !important;
}
/* 모바일용 레이아웃이 PC에 섞여 들어오는 것 강제 무력화 */
#optionArea .goods-option .middle > *{
order:initial !important; width:auto !important;
}
/* 혹시 테마가 버튼을 block/100%로 만드는 경우 대비 */
#optionArea .goods-option .top .add-option.btn,
#optionArea .goods-option .top a.add-option{
width:auto !important; display:inline-flex !important;
}
}
/* ===== z-index 일원화(중복 선언/충돌 정리): 백드롭 < 시트 < 추가구성 모달 ===== */
.option-sheet-backdrop{ z-index:100480 !important; }
.choose-option_wrap { z-index:100500 !important; }
#proSubLyForm .default-pop{ z-index:100550 !important; }
/* ===== 안전 장치: 숫자 입력칸이 줄어들며 세로로 찌그러지는 경우 방지 ===== */
#optionArea .qty-box .qty{
min-width:56px !important; box-sizing:border-box !important;
}
#optionArea .goods-option .right-side .btn-del,
#optionArea .addon-item .right-side .btn-del{
flex:0 0 auto !important;
}
/* === 옵션 영역 수량/가격 정렬 고정 === */
#optionArea .goods-option .middle {
display: flex !important;
align-items: center !important; /* 수직 가운데 정렬 */
}
#optionArea .goods-option .middle > * {
flex: 0 0 auto; /* 자동 줄바꿈 방지 */
margin-right: 8px;
}
#optionArea .goods-option .qty-box {
display: flex !important;
align-items: center !important; /* 버튼/인풋 세로 정렬 */
gap: 4px;
}
#optionArea .goods-option .qty-box input,
#optionArea .goods-option .qty-box button {
vertical-align: middle !important;
}
/***** FIX: .goods-option.card.-main – 두 번째부터 수량(– 1 +)이 줄 아래로 내려가는 현상 *****/
/* 데스크톱에서만 적용 */
@media (min-width:769px){
/* 가운데 행을 '3칸 그리드'로 고정: [수량] [안내문(늘어나는 칸)] [가격/삭제] */
#optionArea .goods-option.card.-main .middle{
display: grid !important;
grid-template-columns: auto 1fr auto !important; /* 좌:수량(내용폭) / 중:가변 / 우:가격·삭제(내용폭) */
align-items: center !important;
column-gap: 12px !important;
}
/* 수량 박스(왼쪽) – 내부 높이/정렬만 맞춤, 폭 강제 증가 없음 */
#optionArea .goods-option.card.-main .left-side.qty-box{
display:flex !important; align-items:center !important; gap:6px !important;
background:#f1f5f9; padding:8px 10px; border-radius:10px;
}
#optionArea .goods-option.card.-main .left-side.qty-box .btnQty{ width:36px; height:36px; border-radius:10px; }
#optionArea .goods-option.card.-main .left-side.qty-box .qty { width:56px; height:36px; line-height:34px; }
/* 가운데 안내문은 늘어나는 칸(1fr). 넘치면 …처리 → 줄바꿈으로 레이아웃 깨지지 않게 */
#optionArea .goods-option.card.-main .limit-info{
min-width:0 !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
color:#64748b;
}
/* 오른쪽 가격/삭제는 한 줄 유지 + 끝으로 밀착 */
#optionArea .goods-option.card.-main .right-side{
display:flex !important; align-items:center !important; gap:10px !important;
justify-self:end !important; padding-left:0 !important;
}
#optionArea .goods-option.card.-main .right-side .price{ white-space:nowrap !important; font-weight:800; }
#optionArea .goods-option.card.-main .right-side .btn-del{ flex:0 0 auto !important; }
}
/* 혹시 남아있는 모바일 강제 규칙이 PC에 새는 경우 차단(선택적으로 유지) */
@media (min-width:769px){
#optionArea .goods-option.card.-main .middle > *{ order:initial !important; width:auto !important; }
}
/******** FIX: .goods-option.card.-main – 2번째부터 수량 줄 하강 방지 (PC) ********/
@media (min-width:769px){
/* 가운데 행을 '한 줄 고정'으로: [수량] [안내(늘어남)] [가격/삭제] */
#optionArea .goods-option.card.-main > .middle{
display:flex !important;
align-items:center !important;
gap:12px !important;
flex-wrap:nowrap !important; /* ★ 줄바꿈 금지 */
}
/* 수량 박스(왼쪽) — 내용 크기만큼, 세로 중앙정렬 */
#optionArea .goods-option.card.-main > .middle .left-side.qty-box{
display:flex !important;
align-items:center !important;
gap:6px !important;
flex:0 0 auto !important; /* 폭 고정(늘리지 않음) */
}
/* 안내문(가운데) — 늘어나는 영역, 넘치면 … */
#optionArea .goods-option.card.-main > .middle .limit-info{
flex:1 1 auto !important;
min-width:0 !important; /* flex 항목 줄바꿈 방지용 */
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* 가격/삭제(오른쪽) — 항상 한 줄, 끝으로 붙이기 */
#optionArea .goods-option.card.-main > .middle .right-side{
display:flex !important;
align-items:center !important;
gap:10px !important;
flex:0 0 auto !important;
margin-left:auto !important; /* 오른쪽 정렬 */
padding-left:0 !important;
}
#optionArea .goods-option.card.-main > .middle .right-side .price{
white-space:nowrap !important; /* 1,234,000 개행 금지 */
font-weight:800;
}
/* 혹시 남아있는 '모바일용 order/width' 규칙이 PC에 새면 차단 */
#optionArea .goods-option.card.-main > .middle > *{
order:0 !important; width:auto !important;
}
}
/* addon-item 한 줄 정렬 */
.addon-item.-pc.card{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:8px 0;
}
/* 옵션명(왼쪽) */
.addon-item .option-title{
flex:1 1 auto;
min-width:0;
}
.addon-item .option-title .option{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* 수량 박스(가운데) */
.addon-item .qty-box{
display:flex;
align-items:center;
gap:6px;
flex:0 0 auto; /* 폭 고정 */
background:#f9fafb;
padding:6px 10px;
border-radius:8px;
}
.addon-item .qty-box .btnQty{
width:32px; height:32px;
}
.addon-item .qty-box .qty{
width:50px; height:32px;
text-align:center;
}
/* 가격/삭제(오른쪽) */
.addon-item .price-actions{
display:flex;
align-items:center;
gap:8px;
flex:0 0 auto;
}
.addon-item .price-actions .price{
font-weight:700;
white-space:nowrap;
}
/***** 옵션/추가옵션 – 높이 통일 + 가로 과확장 방지 (기존 레이아웃 유지) *****/
@media (min-width:769px){
:root{
--opt-row-h: 36px; /* 버튼·인풋·가격 줄 높이 */
--opt-gap: 8px; /* 좌우 요소 간격 */
}
/* 1) 카드 내부 상하 여백 정돈(기존 대비 과한 세로 간격 제거) */
#optionArea .goods-option.card.-main,
#optionArea .addon-item.-pc.card{
padding-top:10px !important;
padding-bottom:10px !important;
}
/* 2) 메인 옵션 – 가운데 줄을 한 줄 유지(폭은 기존대로) */
#optionArea .goods-option.card.-main > .middle{
display:flex !important; align-items:center !important;
gap:var(--opt-gap) !important; flex-wrap:nowrap !important;
}
#optionArea .goods-option.card.-main > .middle .left-side.qty-box{ flex:0 0 auto !important; }
#optionArea .goods-option.card.-main > .middle .limit-info{
flex:1 1 auto !important; min-width:0 !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#optionArea .goods-option.card.-main > .middle .right-side{
margin-left:auto !important; flex:0 0 auto !important;
display:flex !important; align-items:center !important; gap:var(--opt-gap) !important; padding-left:0 !important;
}
/* 3) 수량 컨트롤/가격/삭제 – 높이/세로정렬 100% 통일 */
#optionArea .qty-box{ display:flex !important; align-items:center !important; gap:6px !important; }
#optionArea .qty-box,
#optionArea .qty-box .btnQty,
#optionArea .qty-box .qty{ height:var(--opt-row-h) !important; }
#optionArea .qty-box .qty{
line-height:calc(var(--opt-row-h) - 2px) !important; /* border 1px * 2 고려 */
width:56px !important;
}
#optionArea .price{ line-height:var(--opt-row-h) !important; white-space:nowrap !important; }
/* 4) 추가옵션 줄 – ‘가운데가 불필요하게 넓어지는’ 현상 방지 (기존 좌/중/우 배치 유지) */
#optionArea .addon-item.-pc.card{
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:var(--opt-gap) !important;
}
#optionArea .addon-item.-pc.card > .left-side{ /* 옵션명 */
flex:1 1 auto !important; min-width:0 !important;
}
#optionArea .addon-item.-pc.card > .left-side .option{
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#optionArea .addon-item.-pc.card > .right-side{ /* 수량 + 가격 + 삭제 */
flex:0 0 auto !important; display:flex !important; align-items:center !important;
gap:var(--opt-gap) !important; padding-left:0 !important;
}
#optionArea .addon-item.-pc.card > .right-side .qty-box{ flex:0 0 auto !important; }
#optionArea .addon-item.-pc.card > .right-side .price{ flex:0 0 auto !important; white-space:nowrap !important; }
#optionArea .addon-item.-pc.card > .right-side .btn-del{ flex:0 0 auto !important; }
/* 5) 혹시 위쪽 규칙이 새어 들어오면 초기화 (모바일용 order/width 차단) */
#optionArea .goods-option.card.-main > .middle > *,
#optionArea .addon-item.-pc.card > *{
order:0 !important; width:auto !important;
}
}
/******** FINAL: 옵션/추가옵션 — 가로 과확장 차단 + 세로 높이 40px로 통일 (PC) ********/
@media (min-width:769px){
:root{
--opt-row-h: 40px; /* ← 요구대로 더 크게 */
--opt-gap: 10px;
}
/* ===== 메인 옵션(.goods-option.card.-main) ===== */
#optionArea .goods-option.card.-main > .middle{
display:flex !important;
align-items:center !important;
gap:var(--opt-gap) !important;
flex-wrap:nowrap !important; /* 줄바꿈 금지 */
}
#optionArea .goods-option.card.-main > .middle .left-side.qty-box{
display:flex !important; align-items:center !important; gap:6px !important;
flex:0 0 auto !important; /* 내용폭만 */
height:var(--opt-row-h) !important;
padding:0 8px !important; border-radius:10px !important; background:#f1f5f9 !important;
}
#optionArea .goods-option.card.-main > .middle .limit-info{
flex:1 1 auto !important; min-width:0 !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#optionArea .goods-option.card.-main > .middle .right-side{
margin-left:auto !important;
display:grid !important; /* space-between 제거 → 과확장 방지 */
grid-auto-flow:column !important;
grid-auto-columns:max-content; /* 각 아이템 내용폭 */
align-items:center !important;
justify-content:end !important;
gap:var(--opt-gap) !important;
padding-left:0 !important;
width:auto !important; max-width:100% !important;
}
/* 공통 컨트롤 높이 통일 */
#optionArea .qty-box .btnQty{ width:var(--opt-row-h) !important; height:var(--opt-row-h) !important; border-radius:10px !important; }
#optionArea .qty-box .qty { height:var(--opt-row-h) !important; line-height:calc(var(--opt-row-h) - 2px) !important; width:56px !important; }
#optionArea .price { line-height:var(--opt-row-h) !important; white-space:nowrap !important; font-weight:800; }
#optionArea .btn-del { width:28px !important; height:28px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
/* ===== 추가옵션(.addon-item.-pc.card) — 가로 벌어짐 제거 ===== */
#optionArea .addon-item.-pc.card{
display:grid !important;
grid-template-columns: 1fr auto !important; /* 왼쪽(옵션명 늘어남) | 오른쪽(내용폭) */
align-items:center !important;
column-gap:var(--opt-gap) !important;
box-sizing:border-box !important;
max-width:100% !important; overflow:hidden !important;
}
#optionArea .addon-item.-pc.card > .left-side{
min-width:0 !important; /* … 처리 위해 */
}
#optionArea .addon-item.-pc.card > .left-side .option{
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#optionArea .addon-item.-pc.card > .right-side{
display:grid !important;
grid-auto-flow:column !important; /* 타이트 패킹 */
grid-auto-columns:max-content !important; /* 각 항목 내용폭만 */
align-items:center !important;
justify-content:end !important;
gap:var(--opt-gap) !important;
padding-left:0 !important;
width:auto !important; max-width:100% !important; /* ← 100% 강제 규칙 무력화 */
}
#optionArea .addon-item.-pc.card > .right-side .qty-box{
display:flex !important; align-items:center !important; gap:6px !important;
height:var(--opt-row-h) !important; padding:0 8px !important; border-radius:10px !important; background:#f1f5f9 !important;
flex:0 0 auto !important;
}
#optionArea .addon-item.-pc.card > .right-side .qty-box .btnQty{ width:var(--opt-row-h) !important; height:var(--opt-row-h) !important; }
#optionArea .addon-item.-pc.card > .right-side .qty-box .qty { height:var(--opt-row-h) !important; line-height:calc(var(--opt-row-h) - 2px) !important; width:56px !important; }
#optionArea .addon-item.-pc.card > .right-side .price { line-height:var(--opt-row-h) !important; white-space:nowrap !important; font-weight:800; }
/* 모바일 규칙이 PC로 새는 것 차단 */
#optionArea .goods-option.card.-main > .middle > *,
#optionArea .addon-item.-pc.card > *{ order:0 !important; width:auto !important; }
}