/* cart_modal.css — 장바구니 옵션 모달 테마 톤
   26.10.06: shop_custom/css/shop_common.css 끝에 있던 블록을 떼어왔다.
   이유 = shop_common.css 는 sh.php·주문 스킨이 "페이지별"로 붙이는 221KB 파일이라
          메인(/)에는 안 걸린다. 그런데 모달은 메인·목록 양쪽에서 열린다.
          -> 모달 CSS 만 분리해 head.sub.php 에서 전역 로드한다.
   ※ 원본 스타일은 shop/cart.ajax.inc1.php 가 함께 내보내는 인라인 <style> 에 있다.
     문서상 뒤에 오므로 같은 특이도로는 못 이긴다 -> `body` 를 앞에 붙여 한 단계 올렸다.
     "순서" 가 아니라 "특이도" 로 이기는 구조라 로드 위치가 바뀌어도 그대로 동작한다. */

/* ============================================================
   26.10.02 장바구니 옵션 모달 테마 톤 맞춤
   - 원본 CSS 는 shop/cart.ajax.inc1.php 가 함께 내보내는 인라인 <style> 에 있다.
     그 블록이 문서상 뒤에 오므로 같은 특이도로는 이길 수 없다.
     → 코어 파일을 고치지 않고 `body` 를 앞에 붙여 특이도를 한 단계 올렸다.
   - '취소' 버튼만 마크업에 인라인 style(background:#b3b3b3) 이 박혀 있어
     그 배경 한 가지는 !important 가 불가피하다.
   ============================================================ */
body #modalLayer .mask {background:rgba(17,17,17,.55);}
/* ★ 위치는 transform 으로 잡는다.
   mo_open() 이 outerWidth/outerHeight 를 재서 음수 마진으로 가운데를 맞추는데,
   그 측정이 모달이 **숨겨진 상태**에서 일어난다. 폭을 %로 주면 그때 0 으로 계산돼
   margin:0 이 박히고 모달이 오른쪽으로 밀린다. JS 가 넣는 인라인 마진을 무력화하고
   transform 으로 직접 중앙 정렬한다(인라인 style 이라 !important 가 불가피). */
body #modalLayer .modalContent {width:min(100% - 40px, 560px); height:auto; max-height:82vh; padding:0;

  left:50%; top:50%; transform:translate(-50%, -50%); margin:0 !important;

  border:0; border-radius:12px; background:#fff; box-shadow:0 18px 50px rgba(0,0,0,.22);

  overflow-x:hidden; overflow-y:auto;}

/* 닫기 — 검정 사각형(모달 바깥 top:-50px)에서 안쪽 고스트 버튼으로 */
body #modalLayer .gnb_close_btn {position:absolute; top:14px; right:14px; width:40px; height:40px; padding:0;
  border:0; border-radius:50%; background:transparent; color:var(--gray-600,#656565);
  font-size:18px; line-height:1; cursor:pointer; transition:background-color .2s, color .2s;}
body #modalLayer .gnb_close_btn:hover, body #modalLayer .gnb_close_btn:focus {background:var(--gray-100,#f2f4f7); color:var(--navy,#182b54);}

body #modalLayer .cont {margin:0; padding:28px 28px 24px;}
body #modalLayer #mod_option_frm h2 {margin:0 0 20px; padding-right:44px; font-size:22px; font-weight:700; line-height:1.4; color:var(--dark,#111);}

/* 상품 정보 */
body #modalLayer .pop_item_info {display:flex; align-items:center; gap:16px; padding:16px;
  border:1px solid var(--gray-200,#e5e5e5); border-radius:10px; background:var(--gray-50,#fafafa);}
body #modalLayer .pop_item_thumb img {display:block; width:60px; height:60px; border-radius:8px; object-fit:cover; background:#fff;}
body #modalLayer .pop_item_name {margin:0; font-size:16px; font-weight:700; line-height:1.4; color:var(--dark,#111);}
body #modalLayer .pop_item_price {margin-top:6px;}
body #modalLayer .pop_item_price em {font-style:normal; font-size:20px; font-weight:700; color:var(--navy,#182b54);}
body #modalLayer .pop_item_price em span {margin-left:2px; font-size:15px; font-weight:500;}

/* 선택옵션 */
body #modalLayer .sit_option {margin-top:24px;}
body #modalLayer .sit_option h3 {margin:0 0 10px !important; font-size:15px; font-weight:700; color:var(--navy,#182b54);}
body #modalLayer .get_item_options label {display:block; margin-bottom:6px; font-size:14px; color:var(--gray-600,#656565);}
body #modalLayer .get_item_options select {width:100%; min-height:48px; padding:10px 12px;
  border:1px solid var(--gray-300,#d5d5d5); border-radius:8px; font-size:15px; color:var(--dark,#111);}
body #modalLayer .get_item_options select:focus {border-color:var(--navy,#182b54); outline:none;}

/* 선택된 옵션 */
body #modalLayer #sit_sel_option {margin:20px 0 0 !important;}
body #modalLayer #sit_sel_option h3 {font-size:15px; font-weight:700; color:var(--navy,#182b54);}
body #modalLayer #sit_opt_added li {padding:12px 14px; border:1px solid var(--gray-200,#e5e5e5); border-radius:8px;}
body #modalLayer #sit_opt_added li + li {margin-top:8px;}

/* 버튼 */
body #modalLayer #mod_option_frm .btn_confirm {display:flex; gap:10px; margin-top:24px;}
body #modalLayer #mod_option_frm .btn_confirm .btn_submit {flex:1; width:auto; height:52px;
  border:1px solid var(--navy,#182b54); border-radius:8px; background:var(--navy,#182b54);
  font-size:16px; font-weight:700; color:#fff !important; cursor:pointer; transition:background-color .2s, border-color .2s;}
body #modalLayer #mod_option_frm .btn_confirm .btn_submit:hover {background:var(--sky,#00abff); border-color:var(--sky,#00abff);}
body #modalLayer #mod_option_frm .btn_confirm input[value="취소"] {flex:0 0 38%;
  border-color:var(--gray-300,#d5d5d5); background:#fff !important; color:#454545 !important; font-weight:500;}
body #modalLayer #mod_option_frm .btn_confirm input[value="취소"]:hover {border-color:var(--navy,#182b54);
  background:#fff !important; color:#182b54 !important;}

@media (max-width:768px) {
	body #modalLayer .cont {padding:20px 18px 18px;}
	body #modalLayer #mod_option_frm h2 {font-size:19px;}
	body #modalLayer .pop_item_info {padding:12px; gap:12px;}
	body #modalLayer #mod_option_frm .btn_confirm .btn_submit {height:46px; font-size:15px;}
}