@charset "UTF-8";
/* ============================================================================
   포토북 상세 v2 - 우측 옵션영역
   /service/product/detail.asp?btype=XXX 의 우측 옵션영역(article.right_wrap)
   포맷을 그대로 이식한다. 원본 규칙 출처 :
     - /sub_fancy/css/n_w1200.css
     - /apparel/tshirt/css/style.css
   두 파일을 통째로 로드하면 포토북 상세 하단 영역(.option_box / .w1200 /
   .tab_cont_wrap 등)과 충돌하므로, 필요한 규칙만 .ptb_v2_right 로 스코프해서
   옮겼다. (cascade 순서도 원본과 동일하게 n_w1200 -> tshirt/style 순으로 배치)
   ============================================================================ */

/* ---------- 컨테이너 : btype 페이지 실측치와 동일 ----------
   section.sub_option  1200 / article.left_wrap 850(float:left) /
   article.right_wrap 300(float:right) / 좌우 간격 50
   ------------------------------------------------------------ */
.ptb_v2_box {display:block !important; position:relative; margin:20px 0 50px 0;}
.ptb_v2_box::after {display:table; content:""; clear:both}

.ptb_v2_box .ptb_v2_left {float:left; display:block; width:850px; height:818px; text-align:center; background:transparent; box-sizing:border-box;}
.ptb_v2_box .ptb_v2_left > div {display:block;}

/* ---------- 좌측 프리뷰 + 미니 썸네일 : btype=gspst(.preview_wrap / .tab_cont_wrap / ul.tab_btn_wrap) 규격
   전체 850x818 = 메인 704 + 썸네일줄 114.
   높이를 calc 으로 잡아서 포토매거진(mz, 인라인 height:590px)에서도 우측과 정렬이 유지된다.
   썸네일 규격을 바꾸면 아래 114px 두 군데를 같이 맞출 것.
   ------------------------------------------------------------ */
.ptb_v2_left .ptb_v2_preview_wrap {position:relative; width:100%; height:100%; box-sizing:border-box;}

/* 메인 미리보기 : gspst .cont_box_full .preview_box 와 동일한 배경(#f7f7f7) */
.ptb_v2_left .ptb_v2_cont_wrap {position:relative; width:100%; height:calc(100% - 114px); background:#f7f7f7; overflow:hidden;}
.ptb_v2_left .ptb_v2_cont {display:none; width:100%; height:100%;}
.ptb_v2_left .ptb_v2_cont.active {display:block;}
.ptb_v2_left .ptb_v2_cont > img {width:100%; height:100%; object-fit:contain; vertical-align:middle;}
.ptb_v2_left .ptb_v2_cont > #detailPreview {width:100%; height:100%;}
.ptb_v2_left .ptb_v2_cont > #detailPreview iframe {display:block; width:100%; height:100%; border:0;}

/* 미니 썸네일 줄 : gspst ul.tab_btn_wrap 규격(100px 폭 / margin 5 / 테두리 1px #e6e6e6 / 선택·호버 #222450)
   그레이 박스(.ptb_v2_cont_wrap) 밖, 흰 배경 위에 놓인다.
   좌측 전체를 회색으로 칠하는 detail.css:71 `.option_box .left {background:#f7f7f7}` 는
   위 .ptb_v2_left 의 background:transparent 로 끈다.
   높이 84px 는 전달받은 이미지 1700x1400(1.214) 비율에 맞춘 값이다. */
.ptb_v2_left ul.ptb_v2_thumbs {display:flex; flex-wrap:wrap; justify-content:flex-start; width:100%; height:114px; margin:0; padding:10px; box-sizing:border-box; overflow:hidden;}
.ptb_v2_left ul.ptb_v2_thumbs > li {float:none; list-style:none; width:100px; height:84px; margin:5px; padding:0; background:#f8f9fa; border:1px solid #e6e6e6; box-sizing:border-box; cursor:pointer; transition:0.3s;}
.ptb_v2_left ul.ptb_v2_thumbs > li img {display:block; width:100%; height:100%; object-fit:cover; vertical-align:top;}
.ptb_v2_left ul.ptb_v2_thumbs > li.active,
.ptb_v2_left ul.ptb_v2_thumbs > li:hover {border:1px solid #222450; transition:0.5s;}

.ptb_v2_box .ptb_v2_right {float:right; width:300px; text-align:left;}
.ptb_v2_right article.right_wrap {width:100%; box-sizing:border-box;}
.ptb_v2_right article.right_wrap::after {display:table; content:""; clear:both}

/* ---------- 타이틀 ---------- */
.ptb_v2_right .option_title {padding-top:0; text-align:left; margin-bottom:10px}
.ptb_v2_right .option_title.tit_box {position:relative;}
.ptb_v2_right .option_title h1 {font-family:'Montserrat','YoonGothicPro760', sans-serif; font-size:23px; font-weight:600; color:#333; letter-spacing:-0.2px;}
.ptb_v2_right .option_title h4 {font-size:14px; color:#333; margin-bottom:10px; letter-spacing:0.5px}
.ptb_v2_right .option_title p {font-size:13px; color:#888;}

/* 제목에서 디자인명(1분할[유테]) 은 감춘다. h1 에는 상품명(포토북)만 남는다.
   #content_title_txt2 를 DOM 에서 지우면 안 된다 —
   content_call() 이 .html() 로 값을 넣고 go_share_popup() 이 그 값을 공유 제목으로 쓴다.
   디자인명은 상단 브레드크럼(#content_title_txt1)에 그대로 나온다. */
.ptb_v2_right .option_title h1 .tit_hidden {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* 링크/하트(.more) 는 제거했다. 남아있어도 안 보이도록 차단 */
.ptb_v2_right .option_title .more {display:none !important;}

/* 공유 아이콘 : btype 과 동일한 위치·크기. SVG 안에 남색(#222450) 원이 포함돼 있어 별도 배경이 필요없다 */
.ptb_v2_right .option_title.tit_box .sum_share {position:absolute; top:0; right:0;}
.ptb_v2_right .option_title.tit_box .sum_share button {padding:0; background:none; border:0; cursor:pointer; line-height:0;}
.ptb_v2_right .option_title.tit_box .sum_share button img {width:30px; height:30px;}

/* NEW / 런칭특가 배지 (마크업은 주석 상태. 살릴 때 이 규칙이 쓰인다) */
.ptb_v2_right .option_title h4 {margin-bottom:8px; font-size:0; line-height:0;}
.ptb_v2_right .option_title h4 .gnb_label {display:inline-block; margin-right:4px; padding:2px 6px; font-size:10px; font-weight:500; line-height:15px; border-radius:3px;}
.ptb_v2_right .option_title h4 .gnb_label.l_new {color:#ff4040; border:1px solid #ff4040;}
.ptb_v2_right .option_title h4 .gnb_label.l_event {color:#555; border:1px solid #ccc;}

/* ---------- 정보표 : 제작기간 라벨을 밑줄 링크로 (btype 포맷) ---------- */
.ptb_v2_right article.right_wrap .tb_option th a.th_link {color:#111; text-decoration:underline;}

/* ---------- 다중배송 안내 + 물음표 툴팁 ----------
   btype 원본은 /apparel/tshirt/css/style.css 의 .info_multiship 를 쓰지만
   그 파일을 통째로 링크하면 포토북 하단이 깨지므로(02 문서 참조) 여기서 스코프해 다시 만든다 */
.ptb_v2_right .info_multiship {position:relative; display:inline-block;}
.ptb_v2_right .info_multiship .multiship_help {width:13px; height:13px; margin-left:4px; vertical-align:-2px; cursor:pointer;}
.ptb_v2_right .info_multiship .multiship_layer {display:none; z-index:20; position:absolute; bottom:22px; left:0; width:290px; padding:14px 16px; font-size:12px; line-height:18px; color:#555; text-align:left; background:#fff; border:1px solid #d9d9d9; box-shadow:0 4px 12px rgba(0,0,0,.12); box-sizing:border-box;}
.ptb_v2_right .info_multiship .multiship_layer strong {display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:#111;}
.ptb_v2_right .info_multiship:hover .multiship_layer {display:block;}
/* ---------- 가격 (value_sum) ---------- */
.ptb_v2_right .value_sum {display:flex; margin:20px 0 10px 0; padding:0; font-size:15px; color:#111; border-top:none; border-bottom:none}
.ptb_v2_right .value_sum dt {text-align:left; display:inline-block; width:0%; box-sizing:border-box; position:relative; font-size:12px; font-weight:500;}
.ptb_v2_right .value_sum dd {text-align:left; display:inline-block; width:100%; margin:0; padding:5px 0; box-sizing:border-box;}
.ptb_v2_right .value_sum dd span {padding:0}
.ptb_v2_right .value_sum dd span.n_price {font-size:22px; line-height:32px; font-weight:500; color:#333;}
.ptb_v2_right .value_sum dd span.x_price {margin-left:5px; font-size:15px; line-height:22px; color:#aaa; font-weight:400; text-decoration:line-through;}
.ptb_v2_right .value_sum dd span.dis_percent {margin-left:5px; font-size:13px !important; font-weight:500 !important; color:#fff !important; padding:2px 7px !important; background:#e5362c; border-radius:5px; vertical-align:text-bottom;}

/* ---------- 정보/옵션 테이블 ---------- */
.ptb_v2_right article.right_wrap .tb_option {width:100%; text-align:left}
.ptb_v2_right article.right_wrap .tb_option caption {display:none}
.ptb_v2_right article.right_wrap .tb_option th {padding:5px 0; font-size:12px; font-weight:500; color:#111; text-align:left; vertical-align:top;}
.ptb_v2_right article.right_wrap .tb_option td {padding:5px 0; position:relative; font-size:12px; color:#666; word-break:keep-all;}
.ptb_v2_right article.right_wrap .tb_option td a {color:#1a1a1a;}
.ptb_v2_right .tb_option.mt20 {margin-top:20px;}

/* ---------- 옵션 항목 제목 ---------- */
.ptb_v2_right .td_select h4 {margin-bottom:0 !important; padding:5px 0 10px 0; font-weight:600; color:#111; text-align:left; font-size:13px;}
.ptb_v2_right .td_select h4 span.sub_tit {font-size:12px; color:#666; font-weight:normal;}
.ptb_v2_right .td_select .size_abs {position:absolute; top:20px; right:0; font-size:12px; color:#999;}
.ptb_v2_right .td_select .op_t10 {top:10px !important;}

/* ---------- 라디오 옵션 (radio_select) ---------- */
.ptb_v2_right .radio_select {position:relative; padding:1px 0; font-size:0;}
.ptb_v2_right .radio_select input {position:absolute !important; height:0; width:0; border:0; overflow:hidden;}
.ptb_v2_right .radio_select label {width:110px; height:45px; display:inline-block; margin-right:-1px; margin-top:-1px; font-size:13px; text-align:center; color:#777; line-height:43px; border:1px solid #d4d4d4; background:#fff; transition:all 0.1s ease-in-out; box-sizing:border-box; cursor:pointer}
.ptb_v2_right .radio_select label:hover {z-index:1; position:relative; border:1px solid #222450; cursor:pointer;}
.ptb_v2_right .radio_select input:checked + label {z-index:1; position:relative; color:#222450; border:1px solid #222450;}
.ptb_v2_right .radio_select label.active {z-index:1; position:relative; color:#222450 !important; border:1px solid #222450 !important;}
.ptb_v2_right .radio_select .lb_no_select {opacity:.4 !important;}
.ptb_v2_right .radio_select label span.size {font-size:11px}

.ptb_v2_right article.right_wrap .td_select .radio_select {display:flex;}
.ptb_v2_right article.right_wrap .td_select .radio_select label {display:table; position:relative; width:12%; height:35px; margin-right:2%; line-height:15px; font-size:11px; vertical-align:top}
.ptb_v2_right article.right_wrap .td_select .radio_select label.none {opacity:0.5; cursor:default}
.ptb_v2_right article.right_wrap .td_select .radio_select label.none:hover {border:1px solid #d4d4d4;}
.ptb_v2_right article.right_wrap .td_select .radio_select label > span {display:table-cell; vertical-align:middle; line-height:20px;}
.ptb_v2_right article.right_wrap .td_select .radio_full2 {justify-content:space-between; flex-wrap:wrap;}
.ptb_v2_right article.right_wrap .td_select .radio_full2 label {width:49% !important; height:45px !important; margin-right:0; margin-bottom:6px;}
/* btype 포맷에는 라벨 호버 썸네일이 없다. 혹시 남아있어도 노출되지 않도록 차단 */
.ptb_v2_right article.right_wrap .td_select .radio_select label span.thumb,
.ptb_v2_right article.right_wrap .td_select .radio_select label:hover span.thumb {display:none !important;}

/* ---------- 드롭다운 옵션 (select_wrap) : btype=gdtm 수량 영역 포맷 ---------- */
.ptb_v2_right .select_wrap {position:relative; margin:0px 0px 6px 0px !important; cursor:pointer;}
.ptb_v2_right .select_wrap h4 {padding:10px 15px !important; margin-top:0 !important; border:1px solid #d9d9d9; font-weight:normal;}
.ptb_v2_right .select_wrap h4 span {font-size:12px; color:#666; font-weight:normal;}
.ptb_v2_right .select_wrap button.more_btn {position:absolute; top:50%; right:15px; transform:translateY(-50%)}
.ptb_v2_right .select_wrap button.more_btn img {width:13px; display:block;}
.ptb_v2_right .select_wrap .more_box {display:none; z-index:9; position:absolute; top:0; left:0; width:100%; max-height:300px; border:1px solid #d9d9d9; background:#fff; overflow-y:auto; overflow-x:hidden;}
.ptb_v2_right .select_wrap .more_box li {display:flex; align-items:center; float:none; width:100%; padding:5px 10px; font-size:12px !important; text-align:left; border-bottom:1px solid #f2f2f2; box-sizing:border-box; cursor:pointer;}
.ptb_v2_right .select_wrap .more_box li img {width:70px; margin-right:15px;}
.ptb_v2_right .select_wrap .more_box li:first-child {padding-top:10px}
.ptb_v2_right .select_wrap .more_box li:last-child {padding-bottom:10px; border:none;}
.ptb_v2_right .select_wrap .more_box li:hover {background:#f8f9fa}
.ptb_v2_right .select_wrap .more_box li:hover p {text-decoration:underline; color:#1a1a1a;}
.ptb_v2_right .select_wrap .more_box_new {max-height:500px;}
.ptb_v2_right .select_wrap .more_box.more_box_new li {padding:12px 15px;}

/* ---------- 제본 설명 영역 ---------- */
.ptb_v2_right #bind_pur_desc, .ptb_v2_right #bind_lf_desc {margin-top:10px;}

/* ---------- 만들기 버튼 : btype 과 동일하게 300x60 ---------- */
.ptb_v2_right .btn_make {display:flex; justify-content:space-between; margin-top:30px; width:100%; height:60px;}
.ptb_v2_right .btn_make a.select_design {display:inline-block; width:100%; height:60px; padding:20px 0; font-size:16px; line-height:20px; color:#fff; text-align:center; background-color:#222450; background-image:none; box-sizing:border-box; transition:.5s;}
.ptb_v2_right .btn_make a.select_design:hover {background-color:#3e4188; color:#fff; transition:.5s;}
.ptb_v2_right .btn_make .none_box {width:60px; height:60px; background:#CCC url('/sub_book_s8/img/detail/arrow@2x.png?t=1') center no-repeat; border-radius:0;}
.ptb_v2_right .btn_make .none_box:hover {background:#999 url('/sub_book_s8/img/detail/arrow@2x.png?t=1') center no-repeat;}

/* ---------- 옵션 미리보기 딤 문구바 (상단 옵션 커버/내지/제본 클릭시) ----------
   #ptb_v2_cont_opt 안에서 이미지 '위에 겹치는' 절대배치 바.
   이미지(.ptb_v2_cont > img)는 기존 규칙 그대로 850x704 를 다 쓴다 — 크기 변화 없음.
   기준 박스 : 데스크톱은 .ptb_v2_cont_wrap(position:relative),
   모바일은 .ptb_v2_cont 자체가 absolute 라 둘 다 박스 하단에 붙는다.
   문구는 JS 의 PTB_OPT_PREVIEW 맵(tit / desc / sub).
   ------------------------------------------------------------ */
.ptb_v2_left .ptb_v2_optcap {position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px 20px; background:rgba(45,50,58,0.88); text-align:left;}
.ptb_v2_left .ptb_v2_optcap strong {display:block; margin-bottom:4px; font-size:14px; font-weight:600; line-height:1.4; color:#fff; letter-spacing:-0.2px;}
.ptb_v2_left .ptb_v2_optcap span {display:block; font-size:13px; line-height:1.6; color:#e2e5ea; letter-spacing:-0.2px;}
.ptb_v2_left .ptb_v2_optcap span + span {margin-top:3px; color:#b6bcc6;}