@charset "UTF-8";
/* ============================================================================
   프로포토북 상세 v2 - 우측 옵션영역
   /sub_book_s8/detail.v2.asp (포토북 상세 v2) 의 우측 옵션영역과 동일한 포맷.
   그쪽이 /service/product/detail.asp?btype=XXX 의 우측 옵션영역을 이식한 것이라
   원본 규칙 출처는 결국 아래 두 파일이다.
     - /sub_fancy/css/n_w1200.css
     - /apparel/tshirt/css/style.css
   두 파일을 통째로 로드하면 프로북 하단 영역과 충돌하므로, 필요한 규칙만
   .prb_v2_right / .prb_v2_box 로 스코프해서 옮겼다.
   (포토북쪽 대응 파일 : /sub_book_s8/css/detail_v2.css)

   ⚠️ 이 파일은 UTF-8. detail.v2.asp 는 EUC-KR(CP949) 이다. 섞지 말 것.
   ============================================================================ */

/* ---------- 컨테이너 ----------
   되돌려야 하는 규칙이 두 파일에 나뉘어 있다.

   1) prb_cmn.css (단일 클래스라 2중 클래스로 이긴다)
        (1509) .ptb_detail_cnt  {height:590px}   <- 고정높이. 옵션이 길어지면 잘린다
        (1538) .prb_detail_img  {width:425px}
        (1703) .ptb_detail_oder {width:540px}

   2) main_2025/css/style.css (1106~1115) — ※ !important 로 강제한다.
        .ptb_detail        {width:1200px !important}
        .prb_detail_img    {width:525px  !important}
        .ptb_detail_oder   {width:630px  !important}
        .prb_detail_preview{width:525px  !important}
      그래서 폭에는 !important 를 같이 걸어야 먹는다. 빼면 525/630 으로 돌아간다.

   .ptb_detail 이 실제로는 1200px 이므로 포토북 v2 와 같은 850 + 50 + 300 그리드를
   그대로 쓴다. (옵션 라벨 폭도 300 x 49% = 147px 로 포토북 v2 와 동일)
   ------------------------------------------------------------ */
.ptb_detail_cnt.prb_v2_box {display:block; position:relative; height:auto; margin:20px 0 50px 0;}
.ptb_detail_cnt.prb_v2_box::after {display:table; content:""; clear:both;}

.prb_v2_box .prb_v2_left {float:left; width:850px !important; height:auto; text-align:left; box-sizing:border-box;}

/* ============================================================================
   좌측 프리뷰 갤러리 (큰 미리보기 + 검은 캡션 + 썸네일 스트립)
   /service/product/detail.asp?btype=MNCS 의 좌측 영역 포맷.
   원본 규칙 출처는 /apparel/tshirt/css/style.css 의
     .cont_box_full .preview_box (313) / .tool_text (1477) /
     ul.tab_btn_wrap li (145~155)
   이지만, 프로북은 마크업 클래스가 달라서 값만 옮겨 .prb_v2_* 로 다시 잡았다.

   ※ 되돌려야 하는 규칙
     prb_cmn.css
       (1593) .prb_detail_item       {width:326px; height:326px; top:50px; left:50px}
       (1600) .prb_detail_item img   {width:326px; height:326px}
       (1607) .prb_detail_item_garo  {width:326px; top:80px; left:50px}
       (1614) .prb_detail_item_garo img {width:326px; height:256px}
       (1651) .prb_detail_thumb li / li img  {65x65, img 에 border}
     main_2025/css/style.css
       (1113) .prb_detail_preview {width:525px !important}
       (1115) .prb_detail_preview > div {left:100px !important}
     좌측 컬럼을 525 -> 850 으로 키웠으니 위 고정값들도 같이 키워야 한다.
     content_call() 이 .prb_detail_item ↔ _garo 를 토글하므로 두 경우를
     모두 처리한다. (326:326 -> 560:560 / 326:256 -> 640:503 - 비율 유지)
   ============================================================================ */
.prb_v2_left .prb_v2_gallery {width:850px;}
.prb_v2_left .prb_v2_gallery::after {display:table; content:""; clear:both;}

/* 큰 미리보기 */
.prb_v2_left .prb_v2_preview {position:relative; display:flex; align-items:center; justify-content:center;
    width:850px; height:700px; background:#f7f7f7; overflow:hidden; box-sizing:border-box;}
/* #detail_item_img 의 top/left 오프셋을 없애고 가운데 정렬에 맡긴다.
   ※ 반드시 #detail_item_img 로 좁혀야 한다. `> div` 로 쓰면 형제인 캡션
      (.tool_text) 에도 position:static !important 가 걸려서 캡션이 하단
      오버레이가 아니라 이미지 옆의 flex 항목으로 떨어진다. */
.prb_v2_left .prb_v2_preview #detail_item_img {position:static !important; top:auto !important; left:auto !important;
    width:auto !important; height:auto !important; margin:0; line-height:0;}
/* 비율 유지하며 확대. 어느 클래스가 붙어도 박스를 넘지 않게 max 로 한 번 더 잠근다 */
.prb_v2_left .prb_v2_preview .prb_detail_item img {width:560px !important; height:560px !important;}
.prb_v2_left .prb_v2_preview .prb_detail_item_garo img {width:640px !important; height:503px !important;}
.prb_v2_left .prb_v2_preview #detail_item_img > img {max-width:780px !important; max-height:600px !important; object-fit:contain;}

/* 하드커버 실물 컷은 여백 없이 상자를 꽉 채운다. (2026-09-11)
   기획서 목업(hard_*.png)과 달리 실사라 배경 여백이 없다. 그래서 contain 으로 두면
   850x700 상자 안에 640x503 으로 들어가 사방에 회색 여백이 남는다.
   .prb_v2_fill 은 prb_v2_select_thumb() 이 하드커버 썸네일을 고를 때만 붙인다.
   - thumb_hard_*.jpg 는 1700x1400 = 상자와 같은 비율이라 잘려나가는 부분이 없다
   - sec4_hard_img*.jpg 는 정사각이라 위아래가 가운데 기준으로 조금 잘린다 */
.prb_v2_left .prb_v2_preview.prb_v2_fill #detail_item_img {width:100% !important; height:100% !important;}
.prb_v2_left .prb_v2_preview.prb_v2_fill .prb_detail_item img,
.prb_v2_left .prb_v2_preview.prb_v2_fill .prb_detail_item_garo img,
.prb_v2_left .prb_v2_preview.prb_v2_fill #detail_item_img > img {width:100% !important; height:100% !important;
    max-width:none !important; max-height:none !important; object-fit:cover !important; display:block;}

/* 검은 캡션 : MNCS 의 .tool_text 와 동일 */
.prb_v2_left .prb_v2_preview .tool_text {position:absolute; bottom:0; left:0; z-index:2; width:100%;
    padding:20px 30px; color:#fff; background-color:rgba(0,0,0,0.6); box-sizing:border-box;
    text-align:left; line-height:1.5;}
.prb_v2_left .prb_v2_preview .tool_text p {margin:0 0 5px 0; font-size:17px; font-weight:600; color:#fff;
    float:none; padding:0; line-height:1.4;}
.prb_v2_left .prb_v2_preview .tool_text span {font-size:13px; color:#fff;}

/* 미리보기(확대) 버튼.
   ※ 2026-09-08 요청으로 마크업에서 제거했다. 지금은 쓰이지 않는 규칙이다.
      되살릴 때 그대로 쓰려고 남겨뒀다 (detail.v2.asp.bak9_20260908 의 106~110줄). */
.prb_v2_left .prb_v2_preview .prb_v2_zoom {position:absolute; top:20px; right:20px; z-index:3;
    display:flex; align-items:center; gap:6px; width:auto; height:auto; padding:8px 14px;
    border:1px solid #d7d7d7; border-radius:3px; background:#fff; box-sizing:border-box;
    text-decoration:none; opacity:0.85; transition:0.3s;}
.prb_v2_left .prb_v2_preview .prb_v2_zoom:hover {opacity:1; transition:0.3s;}
.prb_v2_left .prb_v2_preview .prb_v2_zoom img {position:static; width:16px; height:16px; float:none;
    top:auto; left:auto; margin-right:6px;}
.prb_v2_left .prb_v2_preview .prb_v2_zoom p {margin:0; padding:0; float:none; width:auto; height:auto;
    font-size:12px; line-height:16px; color:#333; letter-spacing:0; background:none;}

/* 썸네일 스트립 : btype 처럼 100x100 박스, 활성 테두리는 li 가 갖는다 */
.prb_v2_left ul.prb_v2_thumbs {display:flex; flex-wrap:wrap; justify-content:flex-start;
    width:850px !important; margin:10px 0 0 0; padding:0; list-style:none; float:none;}
.prb_v2_left ul.prb_v2_thumbs > li {display:flex; align-items:center; justify-content:center;
    float:none; width:100px !important; height:100px !important; margin:0 6px 6px 0 !important;
    padding:4px; border:1px solid #ccc; background:#f8f9fa; box-sizing:border-box;
    cursor:pointer; transition:.3s; overflow:hidden;}
.prb_v2_left ul.prb_v2_thumbs > li:hover,
.prb_v2_left ul.prb_v2_thumbs > li.active {border:1px solid #222450; transition:.5s;}
/* 원본은 img 에 테두리를 줬다. 전체가 잘리지 않게 축소만 하고 테두리는 li 로 넘긴다 */
.prb_v2_left ul.prb_v2_thumbs > li img {width:auto !important; height:auto !important;
    max-width:100% !important; max-height:100% !important; border:none !important; object-fit:contain;}

/* 하드커버 실물 컷 썸네일은 칸을 꽉 채운다. (2026-09-11)
   기본 규칙은 contain 이고 li 에 padding:4px 이 있어 사방에 흰 여백이 남는다.
   기획서 목업과 달리 실사 컷은 배경 여백이 없어 그게 그대로 드러난다.
   큰 미리보기의 .prb_v2_fill 과 같은 처리다.
   내지 미리보기 칸(1번)과 레더/패브릭 커버색 칸은 예전 그대로 둔다.
   모바일(64x64)도 이 규칙을 그대로 탄다 - 아래 미디어쿼리는 li 크기만 바꾼다. */
.prb_v2_left ul.prb_v2_thumbs > li.prb_hard_thumb {padding:0;}
.prb_v2_left ul.prb_v2_thumbs > li.prb_hard_thumb img {width:100% !important; height:100% !important;
    max-width:none !important; max-height:none !important; object-fit:cover !important; display:block;}

.prb_v2_box .prb_v2_right {float:right; width:300px !important; height:auto; text-align:left;}
.prb_v2_right article.right_wrap {width:100%; box-sizing:border-box;}
.prb_v2_right article.right_wrap::after {display:table; content:""; clear:both;}

/* ---------- 제목 + 공유/찜 ----------
   좌측 위 회색 전체폭 바(prb_cmn.css 1453 .ptb_detail_title)를 없애고
   MNCS / 포토북 상세 v2 처럼 우측 패널 맨 위로 옮겼다.
   찜 버튼은 prb_cmn.css 의 .favorite_item(float:right; margin:13px 20px 13px 0)과
   .favorite_star_on/off(25x25 배경) 를 그대로 쓰되 float/margin 만 되돌린다. */
.prb_v2_right .option_title {position:relative; padding-top:0; margin-bottom:10px; text-align:left; min-height:34px;}
.prb_v2_right .option_title h1 {display:block; margin:0; padding-right:70px; font-size:23px; font-weight:600;
    color:#333; letter-spacing:-0.2px; line-height:1.3; word-break:keep-all;}
.prb_v2_right .option_title .more {position:absolute; top:0; right:0; display:flex; align-items:center; gap:8px;}
.prb_v2_right .option_title .more .favorite_item {float:none !important; margin:0 !important;
    width:34px; height:34px; box-sizing:border-box;}
.prb_v2_right .option_title .more button.prb_v2_share {margin-right:8px;}

/* ---------- 가격 (value_sum) ----------
   ⚠️ 포토북과 다른 점 : 프로북 JS 는
        $("#discount_price_txt").html(addCommas(...) + "원")
      처럼 "원" 을 값에 포함시켜 넣는다. 그래서 포토북 v2 처럼 별도의
      <span class="n_price">원</span> 을 두지 않는다. 마크업 바꿀 때 주의. */
.prb_v2_right .value_sum {display:flex; margin:20px 0 10px 0; padding:0; font-size:15px; color:#111; border-top:none; border-bottom:none;}
.prb_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;}
.prb_v2_right .value_sum dd {text-align:left; display:inline-block; width:100%; margin:0; padding:5px 0; box-sizing:border-box;}
.prb_v2_right .value_sum dd span {padding:0;}
.prb_v2_right .value_sum dd span.n_price {font-size:22px; line-height:32px; font-weight:500; color:#333; text-decoration:none;}
.prb_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;}
.prb_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; text-decoration:none;}

/* ---------- 정보/옵션 테이블 ---------- */
.prb_v2_right article.right_wrap .tb_option {width:100%; text-align:left; border-collapse:collapse;}
.prb_v2_right article.right_wrap .tb_option caption {display:none;}
.prb_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;}
.prb_v2_right article.right_wrap .tb_option td {padding:5px 0; position:relative; font-size:12px; color:#666; word-break:keep-all;}
.prb_v2_right article.right_wrap .tb_option td a {color:#1a1a1a;}
.prb_v2_right .tb_option.mt20 {margin-top:20px;}

/* ---------- 옵션 항목 제목 ---------- */
.prb_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;}
.prb_v2_right .td_select h4 span.sub_tit {font-size:12px; color:#666; font-weight:normal;}
.prb_v2_right .td_select .size_abs {position:absolute; top:20px; right:0; font-size:12px; color:#999;}
.prb_v2_right .td_select .op_t10 {top:10px !important;}
.prb_v2_right .td_select .processing_btn02 {width:20px; margin-left:5px; vertical-align:middle; transition:0.3s; opacity:0.4; cursor:pointer;}
.prb_v2_right .td_select .processing_btn02:hover {transition:0.3s; opacity:1;}

/* ---------- 라디오 옵션 (radio_select) : 라벨 147x45px 2열 ---------- */
.prb_v2_right .radio_select {position:relative; padding:1px 0; font-size:0;}
.prb_v2_right .radio_select input {position:absolute !important; height:0; width:0; border:0; overflow:hidden;}
.prb_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;}
.prb_v2_right .radio_select label:hover {z-index:1; position:relative; border:1px solid #222450; cursor:pointer;}
.prb_v2_right .radio_select input:checked + label {z-index:1; position:relative; color:#222450; border:1px solid #222450;}
.prb_v2_right .radio_select label.active {z-index:1; position:relative; color:#222450 !important; border:1px solid #222450 !important;}
.prb_v2_right .radio_select .lb_no_select {opacity:.4 !important;}
.prb_v2_right .radio_select label span.size {font-size:11px;}

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

/* 단일 선택 옵션(커버/내지타입)은 btype 처럼 라벨 1개를 꽉 채운다 */
.prb_v2_right article.right_wrap .td_select .radio_full1 {justify-content:flex-start; flex-wrap:wrap;}
.prb_v2_right article.right_wrap .td_select .radio_full1 label {width:100% !important; height:45px !important; margin-right:0; margin-bottom:6px;}

/* ---------- 드롭다운 옵션 (select_wrap) : btype=gdtm 수량 영역 포맷 ---------- */
.prb_v2_right .select_wrap {position:relative; margin:0px 0px 6px 0px !important; cursor:pointer;}
.prb_v2_right .select_wrap h4 {padding:10px 15px !important; margin-top:0 !important; border:1px solid #d9d9d9; font-weight:normal;}
.prb_v2_right .select_wrap h4 span {font-size:12px; color:#666; font-weight:normal;}
.prb_v2_right .select_wrap button.more_btn {position:absolute; top:18px; right:15px; background:none; border:none; padding:0; cursor:pointer;}
.prb_v2_right .select_wrap button.more_btn img {width:13px;}
/* z-index : 원본(btype)은 9 였다. 하지만 이 페이지에는 상세정보 위에
   스티키 네비게이션(.prb_v2_nav, z-index:120)이 있어서, 페이지수 목록이
   길게 펼쳐지면 그 바에 잘려 가려진다. 그래서 바보다 위로 올린다.
   (.select_wrap 은 position:relative 지만 z-index 가 없어 스태킹 컨텍스트를
    만들지 않으므로, 이 값이 네비게이션의 120 과 직접 비교된다) */
.prb_v2_right .select_wrap .more_box {display:none; z-index:300; position:absolute; top:0; left:0; width:100%; max-height:300px; margin:0; padding:0; list-style:none; border:1px solid #d9d9d9; background:#fff; overflow-y:auto; overflow-x:hidden;}
.prb_v2_right .select_wrap .more_box li {display:flex; align-items:center; float:none; width:100%; height:auto; margin:0; padding:5px 10px; font-size:12px !important; line-height:normal; color:#666; text-align:left; border-bottom:1px solid #f2f2f2; box-sizing:border-box; cursor:pointer;}
.prb_v2_right .select_wrap .more_box li p {margin:0;}
.prb_v2_right .select_wrap .more_box li:first-child {padding-top:10px;}
.prb_v2_right .select_wrap .more_box li:last-child {padding-bottom:10px; border:none;}
.prb_v2_right .select_wrap .more_box li:hover {background:#f8f9fa;}
.prb_v2_right .select_wrap .more_box li:hover p {text-decoration:underline; color:#1a1a1a;}
.prb_v2_right .select_wrap .more_box_new {max-height:500px;}
.prb_v2_right .select_wrap .more_box.more_box_new li {padding:12px 15px;}

/* ---------- 만들기 버튼 : btype 과 동일하게 300x60 ----------
   프로북은 포토북과 달리 「목록」 화살표 버튼이 없어서 300px 단일 버튼이다.
   (btype=gdtm 원본과 같은 형태) */
.prb_v2_right .btn_make {display:block; margin-top:30px; width:100%; height:60px; float:none;}
.prb_v2_right .btn_make a.select_design {display: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;}
.prb_v2_right .btn_make a.select_design:hover {background-color:#3e4188; color:#fff; transition:.5s;}
.prb_v2_right .btn_make a.select_design p {margin:0; padding:0; width:auto; height:auto; float:none; background:none; color:#fff; font-size:16px; line-height:20px; text-align:center;}
/* 단축 URL 표시용. 원본은 .ptb_make_bt span 으로 스타일이 잡혀 있었다.
   COM ajax(short_url_load) 를 제거했으므로 지금은 비어 있다 */
.prb_v2_right .btn_make_sns {display:block; margin-top:10px; font-size:11px; color:#aaa; word-break:break-all; text-align:left;}

/* ---------- 공유 버튼 ----------
   원본은 <span id="share_button"> 안에 share_button_load() 가 서버 HTML 을 넣었지만
   그 ajax 가 COM(AbyzSystems2016.ShortURL) 의존으로 죽어서 항상 비어 있었다.
   포토북 상세 v2 처럼 go_share_popup() 을 직접 띄우는 버튼으로 바꿨고,
   아이콘은 포토북이 쓰는 것을 그대로 참조한다. */
button.prb_v2_share {display:inline-block; width:25px; height:25px; padding:0; border:none; cursor:pointer;
    opacity:0.4; transition:0.3s; text-indent:-9999px; overflow:hidden; white-space:nowrap;
    background:url('/sub_book_s8/img/detail/link@2x.png?t=1') no-repeat center;}
button.prb_v2_share:hover {opacity:1; transition:0.3s;}

/* ============================================================================
   커버 3종 + 커버색 색상칩 셀렉트  (2026-09-08)
   기획서(pc-detail.html) "⑪ 커버 선택 가이드" 구성을 옵션 영역에 반영한 것.
   색상칩 형식은 /apparel/detail.asp?book_type=TF1 의 색상 옵션과 같은 방식이다.
   ============================================================================ */

/* 커버 라벨 3개를 한 줄에 : radio_full2(49%) 와 같은 계열의 3열 버전 */
.prb_v2_right article.right_wrap .td_select .radio_full3 {justify-content:space-between; flex-wrap:wrap;}
.prb_v2_right article.right_wrap .td_select .radio_full3 label {width:32.5% !important; height:45px !important;
    margin-right:0; margin-bottom:6px;}

/* 커버색 : 왼쪽에 큰 색상 미리보기, 오른쪽에 셀렉트 박스 */
.prb_v2_right .prb_color_row {display:flex; align-items:stretch; gap:8px;}
.prb_v2_right .prb_color_preview {flex:0 0 auto; width:45px; height:45px; border:1px solid #d9d9d9;
    background-color:#6B6A6B; box-sizing:border-box;}

/* 셀렉트가 남는 폭을 채운다. .select_wrap 의 margin-bottom 은 행 간격이라 유지 */
.prb_v2_right .prb_color_select {flex:1 1 auto; min-width:0;}

/* 드롭다운 항목의 작은 색상칩. 인라인 style 로 실제 색이 들어간다 */
.prb_v2_right .prb_chip {display:inline-block; flex:0 0 auto; width:16px; height:16px; margin-right:8px;
    border:1px solid rgba(0,0,0,0.15); box-sizing:border-box;}

/* 커버색 우측 표기("그레이 · 레더커버")는 사이즈 표기와 같은 자리를 쓴다 */
.prb_v2_right #cover_state_txt {color:#999;}

/* ============================================================================
   스티키 네비게이션  — 2026-09-08 (스타일 교체)

   /sub_book_s8/detail.v2.asp 의 고정 네비게이션과 같은 모양으로 맞췄다.
   모양을 내는 규칙은 main_2025/css/style.css 에 사이트 공용으로 이미 있다.
     (1256) .fixed_nav_wrap              height:50px; border-bottom:1px solid #eee
     (1267) ul.fixed_nav2                width:1200px; display:flex; space-between
     (1264) .fixed_nav_wrap ul li a      15px / #333 / padding-top:14px
     (1265) .fixed_nav_wrap ul li a.active   bold + 2px #222450 밑줄
   그래서 여기서는 "화면에 고정" 하는 것만 얹는다. 색·간격·밑줄을 다시 쓰면
   공용 규칙과 어긋나므로 건드리지 말 것.

   직전에 있던 기획서식 바(.pd-topbar - 가격 + "프로포토북 만들기" 버튼)의
   규칙은 이 교체로 전부 삭제했다. 되살리려면 detail.v2.asp.bak5_20260908 참고.
   ============================================================================ */
.prb_v2_nav {position:sticky; top:0; z-index:120; background:#fff;}

/* 공용 규칙이 ul 을 1200px 로 고정하므로 화면이 좁을 때만 넘치지 않게 풀어준다 */
@media (max-width:1240px) {
    .prb_v2_nav ul.fixed_nav2 {width:100% !important; padding:0 16px; box-sizing:border-box;}
}

/* ============================================================================
   제목 영역 배지 + 공유 아이콘
   /service/product/detail.asp?btype=cack 의 제목 영역과 같은 형식.

   span.gnb_label / span.l_new 는 main_2025/css/style.css 에 사이트 공용으로
   있다(413·420줄). 다만 .gnb_label 은 width:17px 고정이라 "NEW" / "런칭특가" 가
   잘린다. 그래서 폭만 풀어주는 아래 두 규칙을 참조 페이지에서 값만 가져왔다.
     원본 : service/product/style.css (673~674) = apparel/tshirt/css/style.css (704~705)
   그 CSS 파일을 통째로 링크하면 프로북 하단 레이아웃이 깨지므로 값만 옮긴 것이다.
   ============================================================================ */
/* 우측 옵션 컬럼 상단 여백.
   좌측 미리보기 박스와 top 이 딱 붙어(둘 다 y=270) 배지가 박스 맨 윗변에
   달라붙어 보였다. 참조 페이지(btype=cack)처럼 위에 숨을 조금 준다.
   좌우 컬럼은 여전히 같은 y 에서 시작하고, 여백은 컬럼 안쪽에 있다. */
.prb_v2_right article.right_wrap {padding-top:10px;}

/* 배지 줄 -> 제목 간격. 기존 6px 은 너무 붙어 있었다 */
.prb_v2_right .option_title h4 {margin:0 0 13px 0; padding:0; line-height:1;}
.prb_v2_right .option_title h4 span.gnb_label {margin-bottom:0;}
span.new_full {padding:1px 10px !important; height:18px; width:auto; margin-left:0;}
span.new_lun  {padding:1px 7px  !important; height:18px; width:auto;}

/* 공유 아이콘 : 제목 오른쪽. 참조 페이지의 .sum_share 위치값을 그대로 썼다.
   기준이 되는 .option_title 에는 이미 position:relative 가 걸려 있다. */
/* 공유 아이콘은 제목(h1) 줄에 맞춘다.
   참조 페이지는 top:46% 였는데, 그건 제목 블록 높이가 고정일 때만 맞는다.
   여기서는 배지 간격을 바꾸면 블록 높이가 달라지므로 bottom 기준으로 붙였다. */
.prb_v2_right .option_title .sum_share {position:absolute; right:0; bottom:1px;}
.prb_v2_right .option_title .sum_share .sns_share button {padding:0; border:none;
    background:none; cursor:pointer; line-height:0;}
.prb_v2_right .option_title .sum_share .sns_share button img {width:30px; margin-top:0;}

/* 제목이 공유 아이콘 아래로 파고들지 않게 자리를 비워둔다 */
.prb_v2_right .option_title h1 {padding-right:44px;}

/* ============================================================================
   배송비 안내 (CTA 버튼 아래)
   /service/product/detail.asp?btype=cack 의 <p class="delivery"> 와 같은 형식.
   원본 규칙 : service/product/style.css 352~353 (= apparel/tshirt/css/style.css 359~360)
   그 CSS 를 통째로 링크하면 이 페이지 레이아웃이 깨지므로 값만 옮겼다.
   가운데 구분선은 span 의 배경 이미지로 그린다.
   ============================================================================ */
.prb_v2_right p.delivery {margin-top:20px; font-size:13.5px; text-align:left; color:#666;}
.prb_v2_right p.delivery span {margin-left:10px; padding-left:10px;
    background:url('/apparel/tshirt/img/line.png?t=1') 0 5px no-repeat;}

/* 동판 안내 배너 (2026-09-11)
   동판 드롭다운 바로 아래. #stampRow 안에 있어서 하드커버에서는 같이 숨는다. */
.prb_v2_right .prb_stamp_note {margin-top:12px; padding:14px 16px; background:#f5f5f5;
    font-size:12px; line-height:1.65; color:#767676; text-align:left; box-sizing:border-box;}
.prb_v2_right .prb_stamp_note p {margin:0; padding:0; float:none; width:auto; height:auto;
    font-size:12px; line-height:1.65; color:#767676; background:none;}
.prb_v2_right .prb_stamp_note strong {font-weight:700; color:#333;}
.prb_v2_right .prb_stamp_note .prb_stamp_contact {margin-top:10px;}

/* 배송비 안내를 CTA 버튼 "위" 로 옮겼다 (2026-09-11).
   .btn_make 의 margin-top:30px 은 옵션 표 바로 아래에 있을 때 기준이라,
   배송비 문구가 앞에 오는 경우에만 간격을 좁힌다. 인접 선택자라 예전 배치에는 영향이 없다. */
.prb_v2_right p.delivery + .btn_make,
.prb_v2_right p.prb_price_note + .btn_make {margin-top:12px;}

/* 가격 기준 안내 : 배송비 문구 바로 아래 한 줄 (2026-09-11)
   내용이 비어 있으면(스크립트가 아직 안 돌았으면) 자리를 차지하지 않는다. */
.prb_v2_right p.prb_price_note {margin-top:6px; font-size:12px; line-height:1.5;
    color:#999; text-align:left;}
.prb_v2_right p.prb_price_note:empty {display:none;}

/* ============================================================================
   상세정보 영역 (detail_v2_content.asp — 프로포토북 기획서 v1.0 이식)

   기획서 마크업은 거의 전부 인라인 style 이라 사이트 CSS 와 부딪히는 곳이
   많지 않다. 다만 인라인으로 안 잡은 기본값(ul 불릿, button 폰트, img 크기)은
   ptb_cmn.css / style_category.css 의 전역 규칙이 끼어들 수 있어서
   래퍼 안쪽만 최소한으로 되돌려 놓는다.
   전역으로 쓰지 말고 반드시 .pb_v2_detail 스코프를 유지할 것.
   ============================================================================ */
.pb_v2_detail {width:100%; margin:0; padding:0; text-align:left;
    font-family:'Noto Sans KR', 'Malgun Gothic', sans-serif; color:#111;}
.pb_v2_detail * {box-sizing:border-box;}

/* 전역 리스트/버튼/이미지 기본값 되돌리기 */
.pb_v2_detail ul, .pb_v2_detail ol, .pb_v2_detail li {margin:0; padding:0; list-style:none;}
.pb_v2_detail button {font-family:inherit; border:0; background:none; cursor:pointer;}
.pb_v2_detail img {max-width:100%; vertical-align:top;}
.pb_v2_detail a {text-decoration:none;}

/* 기획서가 1200 고정 그리드라 좌우 가운데 정렬을 방해하는 규칙만 차단 */
.pb_v2_detail .w1200 {width:auto; text-align:left;}

/* 하단 고정 CTA 바(기획서 모바일용)는 이 페이지에 이미 스티키바가 있어 숨긴다 */
.pb_v2_detail .pd-fixed-cta {display:none !important;}

/* ----------------------------------------------------------------------------
   주의사항 / FAQ 탭 + 아코디언  (detail_v2_content.asp 의 #sec-faq)

   이 섹션만 기획서 마크업을 그대로 안 쓰고 다시 짰다. 원본은 React 가 탭과
   아코디언을 처리해서, 접혀 있는 항목의 본문이 DOM 에 아예 없었다.
   그대로 긁어오면 "자주 묻는 질문" 탭 13문항이 통째로 비어버린다.
   수치는 기획서 실측값을 그대로 옮겼다. 동작은 같은 파일의 <script> 참고.
   ---------------------------------------------------------------------------- */
.pb_v2_detail .pbfaq_wrap {max-width:1200px; margin:0 auto;
    padding:clamp(40px,5vw,72px) clamp(16px,4vw,40px);}

/* 탭 : active 색/밑줄은 인라인으로 두면 JS 로 못 바꾸니 반드시 CSS 에 둔다 */
.pb_v2_detail .pbfaq_tabs {display:flex; margin:0 0 32px; border-bottom:1px solid #E4E5EC;}
.pb_v2_detail .pbfaq-tab {flex:1 1 0; border:0; border-bottom:2px solid transparent;
    background:transparent; cursor:pointer; padding:16px 0; margin-bottom:-1px;
    font-family:'Noto Sans KR', 'Malgun Gothic', sans-serif; font-size:16px; font-weight:700;
    color:#999; transition:150ms cubic-bezier(.4,0,.2,1);}
.pb_v2_detail .pbfaq-tab.active {border-bottom-color:#222450; color:#222450;}
.pb_v2_detail .pbfaq_num {font-family:Montserrat, sans-serif; font-size:13px; font-weight:400;}

/* 패널 : 활성된 것만 flex 로 보인다 */
.pb_v2_detail .pbfaq-panel {display:none; flex-direction:column; gap:8px;}
.pb_v2_detail .pbfaq-panel.active {display:flex;}

/* 문답 한 칸 */
.pb_v2_detail .pbfaq-item {background:#fff; border:1px solid #E4E5EC; border-radius:12px; overflow:hidden;}
.pb_v2_detail .pbfaq-q {display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; border:0; background:transparent; cursor:pointer; padding:18px 20px; text-align:left;
    font-family:'Noto Sans KR', 'Malgun Gothic', sans-serif; font-size:15px; font-weight:500;
    color:#111; line-height:1.6;}
.pb_v2_detail .pbfaq-q:hover {background:#FAFAFC;}
.pb_v2_detail .pbfaq-sign {flex:0 0 auto; font-size:15px; color:#999;}
.pb_v2_detail .pbfaq-a {display:none; padding:0 20px 20px; font-size:14px; color:#666; line-height:1.9;}
.pb_v2_detail .pbfaq-item.open .pbfaq-a {display:block;}

.pb_v2_detail .pbfaq_foot {margin:24px 0 0; font-size:13px; color:#999;}
.pb_v2_detail .pbfaq_foot b {color:#222450;}


/* ============================================================================
   모바일 반응형   2026-09-09

   이 사이트는 원래 "PC 고정폭 + 별도 모바일 사이트(m.publog.co.kr)" 구조다.
   공통 헤더(common_s2/inc/sub_top_wide.asp)가 뷰포트를 1300px 로 못박고 있어서
   폰에서는 1300px 짜리 화면이 통째로 축소돼 보였다. 미디어쿼리는 한 번도
   참이 되지 않았고, 기획서에서 가져온 모바일 보정 CSS 도 전부 죽어 있었다.

   detail.v2.asp 의 head 끝에서 viewport 를 device-width 로 다시 선언해
   이 페이지에서만 반응형으로 돌린다. (뒤에 선언한 meta 가 이긴다 - 실측 확인)

   ⚠️ 이 파일은 /sub_probook_s2/detail.v2.asp 에서만 링크된다.
      그래서 아래에서 공통 헤더/GNB/푸터 클래스를 건드려도
      다른 페이지에는 영향이 없다. 공통 CSS 는 한 줄도 고치지 않았다.

   중단점
     - 1240px 이하 : 가로 넘침만 없앤다 (태블릿 · 좁은 창)
     - 768px  이하 : 1단 레이아웃 (기획서 상세정보 CSS 와 같은 중단점)
   ============================================================================ */

/* ---------------------------------------------------------------------------
   S3 상세 콘텐츠(redesign_SS) 보정   2026-09-09
   PC·모바일 공통이라 미디어쿼리 밖에 둔다.

   redesign_SS.html 은 원래 **독립 HTML 문서**로 만들어졌다. 그 안에는
   box-sizing 전역 리셋이 없고(`.hardgal-item` 한 곳에만 있다), 자기 페이지에서는
   버튼 padding 이 문제가 안 됐다. 그런데 우리 페이지 안으로 들어오면
   사이트 공통 CSS 가 button 에 padding 을 얹어서
       width:356px + padding  ->  실제 404px
   처럼 넘친다. 실측된 것만도 .acc-header / .cover-example-btn /
   .paper-toggle 세 종류였다. 스코프 안에서만 border-box 로 통일한다.

   ※ 이 규칙은 .redesign_SS 안에만 걸린다. 페이지의 다른 영역에는 영향이 없다.
   --------------------------------------------------------------------------- */
.redesign_SS,
.redesign_SS *,
.redesign_SS *::before,
.redesign_SS *::after {box-sizing:border-box;}

/* ---------------------------------------------------------------------------
   1240px 이하 : 고정폭 1200 컨테이너들이 화면을 밀어내지 않게만 한다.
   여기서 잡는 것은 전부 "가로 넘침의 뿌리"로 실측된 요소들이다.
   --------------------------------------------------------------------------- */
@media (max-width:1240px) {

    /* 페이지 본문 래퍼 (prb_cmn.css / style.css 가 1200px !important 로 잡고 있다) */
    .ptb_detail {width:auto !important; max-width:100% !important; box-sizing:border-box;}

    /* --- 공통 헤더를 "일반 흐름"으로 되돌린다 -----------------------------------
       PC 헤더는 #header 200px 안에서
         .head-top-wrap  : position:absolute; top:0  (퍼블로그바 + 로고/검색/아이콘)
         .head-gnb-new   : padding-top:65px          (그만큼 자리를 비워둔 GNB)
       로 짜인 고정 높이 조합이다. 폭만 100% 로 바꾸면 위쪽이 여러 줄로 늘어나면서
       절대배치 그대로 GNB 를 덮어버린다. 그래서 흐름 배치로 바꾸고
       비워뒀던 padding-top 을 걷어낸다. --------------------------------------- */
    #header {height:auto !important;}
    #header .section {height:auto !important;}
    #header .head-top-wrap {position:static !important; height:auto !important;}
    #header .head-gnb.head-gnb-new {padding-top:0 !important; height:auto !important;}
    #header .head-gnb-new .gnb-depth1-area {padding-top:0 !important;}
    #header .head-gnb-new h1 {position:static !important; top:auto !important; left:auto !important;}

    #header .head-top,
    #header .head_topmenu,
    #header .head-gnb,
    #header .head-gnb.head-gnb-new,
    #header .gnb-area {width:100% !important; max-width:100% !important; box-sizing:border-box;}
    #header .head-top,
    #header .head_topmenu,
    #header .gnb-area {padding-left:16px; padding-right:16px;}

    /* GNB 는 항목이 많다. 페이지를 밀지 말고 그 줄 안에서 가로로 스크롤시킨다 */
    #header .gnb-area {overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;}
    #header .gnb-area::-webkit-scrollbar {display:none;}
    #header ul.gnb-depth1-area {width:max-content !important; min-width:100%; flex-wrap:nowrap !important;}

    /* 로고 줄 : 한 줄에 로고(130) + 검색(402) + 아이콘메뉴(240) = 772px 이라 넘친다.
       줄바꿈을 허용하고 검색창이 한 줄을 통째로 쓰게 한다 */
    #header .head-top-wrap .head_topmenu {width:100% !important; height:auto !important;
        flex-wrap:wrap; align-items:center; gap:8px; padding:8px 16px; box-sizing:border-box;}
    #header .head_topmenu h1.logo {display:flex !important; flex-wrap:wrap; align-items:center;
        width:100% !important; gap:10px;}
    #header .head_topmenu h1.logo > a {flex:0 0 auto;}
    /* PC 에서 로고 옆에 붙이려고 준 margin-left:40px 은 줄바꿈 후엔 어긋나 보인다 */
    #header .head_topmenu .search_wrap {width:100% !important; flex:1 1 100%;
        min-width:0; margin-left:0 !important; box-sizing:border-box;}
    /* style.css 가 .searching_wrap 을 400px 로 고정하고 있다 */
    #header .head_topmenu .search_wrap .searching_wrap {width:100% !important;
        max-width:100% !important; box-sizing:border-box;}
    #header .head_topmenu .search_wrap .searching_wrap .search_box {width:100%; min-width:0;}
    #header .head_topmenu .search_wrap input {min-width:0; max-width:100%; box-sizing:border-box;}
    #header .head_topmenu .search_wrap .input_search {width:auto !important; min-width:0; flex:1 1 auto;}
    #header .head_topmenu .right_menu {position:static !important; width:100% !important;
        top:auto !important; right:auto !important;}

    /* 푸터 · 하단 후기 모듈 */
    #footer .footer .section {width:100% !important; max-width:100% !important;
        padding-left:16px; padding-right:16px; box-sizing:border-box;}
    /* style.css 가 .footer .logo / .sitemap / .siteinfo 를 1200px 로 잡고 있다 */
    #footer .footer .logo,
    #footer .footer .sitemap,
    #footer .footer .siteinfo {width:100% !important; max-width:100% !important; box-sizing:border-box;}
    #footer .footer .sitemap {flex-wrap:wrap; gap:14px 24px;}
    #footer .footer .logo ul {position:static !important; margin-top:10px;}
    /* [주의] 이 div 는 마크업에 style="width:900px !important" 가 박혀 있다.
       인라인 !important 는 스타일시트로 못 이긴다. width 대신 max-width 로 조인다
       (max-width 는 다른 속성이라 width 의 !important 와 무관하게 폭을 제한한다) */
    #footer .footer .siteinfo .info_txt {max-width:100% !important; box-sizing:border-box;}
    /* 앱스토어 배지 2개가 right 음수로 절대배치돼 화면 밖에 나가 있었다 */
    #footer .footer .siteinfo .info_store {width:100% !important; height:auto !important;
        position:relative; margin-top:10px;}
    #footer .footer .siteinfo .info_store a.playstore,
    #footer .footer .siteinfo .info_store a.appstore {position:static !important;
        display:inline-block; margin:0 8px 8px 0; top:auto !important; right:auto !important;}

    #gift_review.review_w1000 {width:100% !important; max-width:100% !important;
        padding-left:16px; padding-right:16px; box-sizing:border-box;}

    /* 우측 플로팅 퀵버튼 : right 좌표가 1200 그리드 기준이라 화면 밖에 있었다 */
    .quick.button {right:10px !important;}
    .quick.button .gotop,
    .quick.button .sameday_delivery,
    .quick.button .gocscenter {right:10px !important;}

    /* 상세정보 안의 가로 스크롤 영역 : 페이지가 아니라 자기 안에서 넘치게 */
    .redesign_SS .pd-price-scroll,
    .redesign_SS .pd-deco-grid,
    .redesign_SS .pd-size-cards,
    .redesign_SS .pd-media-detail {overflow-x:auto; -webkit-overflow-scrolling:touch;}
}

/* ---------------------------------------------------------------------------
   768px 이하 : 옵션 영역을 1단으로
   PC 는 좌 850 + 우 300 의 float 2단이다. 모바일은 미리보기 -> 옵션 순서로 쌓는다.
   --------------------------------------------------------------------------- */
@media (max-width:768px) {

    .ptb_detail {padding:0 !important;}
    .ptb_detail_cnt.prb_v2_box {margin:12px 0 30px 0;}

    /* --- 2단 해제 --- */
    .prb_v2_box .prb_v2_left,
    .prb_v2_box .prb_v2_right {float:none !important; width:100% !important;}
    .prb_v2_box .prb_v2_right {margin-top:24px; padding:0 16px; box-sizing:border-box;}

    /* --- 좌측 미리보기 --- */
    .prb_v2_left .prb_v2_gallery {width:100%;}
    /* 850x700 고정 -> 화면폭 기준 같은 비율(6:5). height 를 그냥 비우면 상자가 무너진다 */
    .prb_v2_left .prb_v2_preview {width:100%; height:auto; aspect-ratio:6 / 5; padding:12px;}
    .prb_v2_left .prb_v2_preview .prb_detail_item img,
    .prb_v2_left .prb_v2_preview .prb_detail_item_garo img {width:100% !important; height:auto !important;
        max-width:100% !important; max-height:100% !important; object-fit:contain;}
    .prb_v2_left .prb_v2_preview #detail_item_img > img {max-width:100% !important; max-height:100% !important;}

    /* 하드커버 꽉채움은 모바일에서도 유지한다.
       바로 위 contain 규칙보다 뒤에 와야 이긴다. 상자 padding 도 빼야 여백이 안 남는다. */
    .prb_v2_left .prb_v2_preview.prb_v2_fill {padding:0;}
    .prb_v2_left .prb_v2_preview.prb_v2_fill .prb_detail_item img,
    .prb_v2_left .prb_v2_preview.prb_v2_fill .prb_detail_item_garo img,
    .prb_v2_left .prb_v2_preview.prb_v2_fill #detail_item_img > img {width:100% !important; height:100% !important;
        max-width:none !important; max-height:none !important; object-fit:cover !important;}
    .prb_v2_left .prb_v2_preview .tool_text {padding:12px 16px;}
    .prb_v2_left .prb_v2_preview .tool_text p {font-size:14px;}
    .prb_v2_left .prb_v2_preview .tool_text span {font-size:12px;}

    /* 썸네일 : 100px 두 줄로 넘치므로 줄인다 */
    .prb_v2_left ul.prb_v2_thumbs {width:100% !important; padding:0 16px; box-sizing:border-box;}
    .prb_v2_left ul.prb_v2_thumbs > li {width:64px !important; height:64px !important;}

    /* --- 우측 옵션 --- */
    .prb_v2_right .option_title h1 {font-size:20px;}
    /* 라디오는 이미 49% 2열이라 그대로 두고, 높이만 손가락에 맞춘다 */
    .prb_v2_right article.right_wrap .td_select .radio_full2 label,
    .prb_v2_right article.right_wrap .td_select .radio_full1 label,
    .prb_v2_right article.right_wrap .td_select .radio_full3 label {height:48px !important; line-height:46px;}
    .prb_v2_right .select_wrap h4 {padding:14px 15px !important;}
    .prb_v2_right .btn_make,
    .prb_v2_right .btn_make a.select_design {height:56px;}
    .prb_v2_right .btn_make a.select_design {padding:18px 0;}

    /* --- 스티키 네비게이션 --- */
    /* 메뉴 5개가 한 줄에 안 들어간다. 줄 안에서 가로 스크롤 */
    .prb_v2_nav ul.fixed_nav2 {width:100% !important; padding:0 12px; box-sizing:border-box;
        overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap;}
    .prb_v2_nav ul.fixed_nav2::-webkit-scrollbar {display:none;}
    /* style.css 가 li 를 width:100% 로 잡아서 한 칸이 366px 이나 됐다 */
    .prb_v2_nav ul.fixed_nav2 > li {width:auto !important; flex:0 0 auto; white-space:nowrap;}
    .prb_v2_nav ul.fixed_nav2 > li a {padding:0 12px; font-size:14px;}

    /* --- 상세정보 --- */
    /* S3 콘텐츠(redesign_SS)가 자체 @media(max-width:768px) 를 갖고 있다.
       여기서는 우리 페이지에 얹혔을 때만 생기는 문제만 보정한다. */
    .redesign_SS img {max-width:100%; height:auto;}
    .redesign_SS table {max-width:100%;}

    /* --- 퀵버튼 : 모바일에서는 CTA 와 겹친다 --- */
    .quick.button {display:none !important;}
}