@charset "UTF-8";
/* ============================================================================
   포토압축앨범 상세 v2 — 좌측 갤러리 + 우측 옵션영역

   /sub_probook_s2/section.asp (프로포토북 상세 v2) 의 좌·우 구성을 그대로 옮겼다.
   그쪽이 /sub_book_s8/detail.v2.asp 를, 다시 그쪽이
   /service/product/detail.asp?btype=XXX 의 우측 옵션영역을 이식한 것이라
   원본 규칙의 출처는 결국 아래 두 파일이다.
     - /sub_fancy/css/n_w1200.css
     - /apparel/tshirt/css/style.css
   두 파일을 통째로 링크하면 포토압축앨범 하단 영역이 깨지므로, 필요한 규칙만
   .pab_v2_box / .pab_v2_left / .pab_v2_right 로 스코프해서 값만 옮겼다.
   (디카북쪽 대응 파일 : /sub_dicabook_v2/css/detail_v2.css)

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

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

   1) pab_cmn.css (단일 클래스라 2중 클래스로 이긴다)
        (1241) .ptb_detail       {width:1000px}   <- 디카북/프로포토북(1200)과 다르다
        (1307) .ptb_detail_cnt   {height:600px}   <- 고정높이. 옵션이 길어지면 잘린다
        (1338) .ptb_detail_img   {width:425px}
        (1475) .ptb_detail_oder  {width:540px}

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

   [포토압축앨범만 다른 점] 이 폴더의 pab_cmn.css 는 본문 컨테이너가 1000px 이다.
   그 폭으로는 850 + 300 이 들어가지 않으므로 아래에서 1200px 로 직접 올린다.
   main_2025/css/style.css 가 실려 이미 1200px 인 경우와 값이 같아 충돌하지 않는다.
   ※ 이 규칙은 v2 전용 CSS 라 detail.v2.asp 에서만 로드된다. 기존 detail.asp 는 무영향.
   ------------------------------------------------------------ */
.ptb_detail {width:1200px !important;}

.ptb_detail_cnt.pab_v2_box {display:block; position:relative; height:auto; margin:20px 0 50px 0;}
.ptb_detail_cnt.pab_v2_box::after {display:table; content:""; clear:both;}

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

/* ============================================================================
   좌측 프리뷰 갤러리 (큰 미리보기 + 썸네일 스트립)
   /service/product/detail.asp?btype=MNCS 의 좌측 영역 포맷.

   ※ 되돌려야 하는 규칙 — pab_cmn.css
       (1345) .ptb_detail_preview     {width:425px; height:425px}
       (1393) .ptb_detail_item        {326x326, top:50px, left:50px}   8x8 / 10x10
       (1406) .ptb_detail_item_garo   {img 326x235}                    가로형
       (1419) .ptb_detail_item_sero   {img 236x326}                    8x11
       (1434~) .ptb_detail_thumb* li / li img  {65x65 · 47x65, img 에 border}

   좌측 컬럼을 425 -> 850 으로 키웠으니 위 고정값들도 같이 키운다.
   content_call() 이 .ptb_detail_item ↔ _garo ↔ _sero 를 토글하므로
   세 경우를 모두 처리한다. 비율은 원본 그대로 유지했다.
     326:326 -> 560:560      326:235 -> 640:461      236:326 -> 440:608
   [디카북과 다른 점] 포토압축앨범에는 _svnFive / _tenEight 클래스가 없다.
   ============================================================================ */
.pab_v2_left .pab_v2_gallery {width:850px;}
.pab_v2_left .pab_v2_gallery::after {display:table; content:""; clear:both;}

/* 큰 미리보기 */
.pab_v2_left .pab_v2_preview {position:relative; display:flex; align-items:center; justify-content:center;
    width:850px !important; height:700px; background:#f7f7f7; overflow:hidden; box-sizing:border-box;
    border:0; margin:0;}

/* #detail_item_img 의 top/left 오프셋을 없애고 가운데 정렬에 맡긴다.
   ※ 반드시 #detail_item_img 로 좁혀야 한다. `> div` 로 쓰면 형제인 화살표
      (#prev_content / #next_content)까지 position:static 이 걸려 자리가 무너진다. */
.pab_v2_left .pab_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 로 한 번 더 잠근다 */
/* [2026-10-14] 표지 이미지를 30% 줄였다(요청). 비율은 그대로 두고 값만 x0.7 했다.
     560x560 -> 392x392      640x461 -> 448x323      440x608 -> 308x426
     상한    780x640 -> 546x448
   ※ 미리보기 상자(850x700)는 건드리지 않았다. 상자를 줄이면 썸네일 줄 위치와
     좌우 넘김 화살표 좌표까지 따라 움직인다. 되돌리려면 위 왼쪽 값으로만 바꾸면 된다. */
.pab_v2_left .pab_v2_preview .ptb_detail_item img          {width:392px !important; height:392px !important;}
.pab_v2_left .pab_v2_preview .ptb_detail_item_garo img     {width:448px !important; height:323px !important;}
.pab_v2_left .pab_v2_preview .ptb_detail_item_sero img     {width:308px !important; height:426px !important;}
.pab_v2_left .pab_v2_preview #detail_item_img > img {max-width:546px !important; max-height:448px !important; object-fit:contain;}

/* 미리보기(확대) 버튼.
   원본은 썸네일 오른쪽에 붙은 65x65 그라데이션 박스(.preview_bt)였다.
   btype 포맷에는 그 자리가 없어 미리보기 상자 우측 상단 오버레이로 옮겼다.
   ( /sub_probook_s2/css/detail_v2.css 의 .prb_v2_zoom 규칙과 같은 값이다 ) */
.pab_v2_left .pab_v2_preview .pab_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;}
.pab_v2_left .pab_v2_preview .pab_v2_zoom:hover {opacity:1; transition:0.3s;}
.pab_v2_left .pab_v2_preview .pab_v2_zoom img {position:static; width:16px; height:16px; float:none;
    top:auto; left:auto; margin-right:6px;}
.pab_v2_left .pab_v2_preview .pab_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;
    font-weight:normal; position:static; top:auto; left:auto;}

/* 이전/다음 디자인 화살표.
   원본은 .ptb_detail_cnt 안에서 float + main_2025/style.css 의
   `.ptb_detail_cnt .img_nxt {right:-720px !important}` 로 자리를 잡았다.
   850+300 그리드에서는 그 좌표가 화면 밖이라, 미리보기 상자 위 오버레이로 바꿨다.
   (JS 의 show()/hide()/attr("href") 는 그대로 #prev_content / #next_content 를 쓴다) */
.pab_v2_left .pab_v2_preview .pab_v2_arrow {position:absolute; top:50%; z-index:3;
    transform:translateY(-50%); display:block; width:47px; height:83px;}
.pab_v2_left .pab_v2_preview .pab_v2_arrow.pab_v2_prev {left:12px;}
.pab_v2_left .pab_v2_preview .pab_v2_arrow.pab_v2_next {right:12px;}
.pab_v2_left .pab_v2_preview .pab_v2_arrow .img_prv,
.pab_v2_left .pab_v2_preview .pab_v2_arrow .img_nxt {float:none !important; position:static !important;
    right:auto !important; left:auto !important; opacity:0.55; transition:0.3s;}
.pab_v2_left .pab_v2_preview .pab_v2_arrow:hover .img_prv,
.pab_v2_left .pab_v2_preview .pab_v2_arrow:hover .img_nxt {opacity:1; transition:0.3s;}

/* 썸네일 스트립 : btype 처럼 100x100 박스, 활성 테두리는 li 가 갖는다.
   content_call() 이 ul 의 클래스를 _garo / _sero 로 바꾸므로
   세 가지를 모두 같은 규칙으로 덮는다. (썸네일은 2칸이다) */
.pab_v2_left ul.pab_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;}
.pab_v2_left ul.pab_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 !important; background:#f8f9fa; box-sizing:border-box;
    cursor:pointer; transition:.3s; overflow:hidden;}
.pab_v2_left ul.pab_v2_thumbs > li:hover,
.pab_v2_left ul.pab_v2_thumbs > li.active {border:1px solid #222450 !important; transition:.5s;}
/* 원본은 img 에 테두리를 줬다. 전체가 잘리지 않게 축소만 하고 테두리는 li 로 넘긴다 */
/* [2026-10-16] 칸 안에서 70% 로 줄였다(요청). 칸(li 100x100)은 그대로 두고 그림만 작게.
   width 를 auto 로 두면 원본 비율대로 칸을 꽉 채운다. */
.pab_v2_left ul.pab_v2_thumbs > li img {width:70% !important; height:auto !important;
    max-width:70% !important; max-height:100% !important; border:none !important; object-fit:contain;}

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

/* ---------- 제목 + 공유/찜 ----------
   좌측 위 회색 전체폭 바(pab_cmn.css 1629 .ptb_detail_title)를 없애고
   MNCS / 포토북 상세 v2 처럼 우측 패널 맨 위로 옮겼다.
   찜 버튼은 pab_cmn.css 의 .favorite_item(float:right; margin:13px 20px 13px 0)과
   .favorite_star_on/off(25x25 배경) 를 그대로 쓰되 float/margin 만 되돌린다. */
.pab_v2_right .option_title {position:relative; padding-top:0; margin-bottom:10px; text-align:left; min-height:34px;}
.pab_v2_right .option_title h1 {display:block; margin:0; padding-right:80px; font-size:23px; font-weight:600;
    color:#333; letter-spacing:-0.2px; line-height:1.3; word-break:keep-all;}
/* 공유 아이콘 : 제목 오른쪽. 프로포토북 detail_v2.css 322~325줄과 같은 값이다.
   기준이 되는 .option_title 에는 위에서 position:relative 를 걸어뒀다.

   [주의] 셀렉터를 .sum_share 로 잡아야 한다.
      2026-09-23 에 공유를 ajax 주입(#share_button 안에 마크업이 통째로 들어오던 방식)에서
      정적 버튼으로 바꾸면서 바깥 상자 .pab_v2_more 를 없앴다. 그때 이 규칙들이
      .pab_v2_more 를 그대로 가리키고 있어 전부 죽었고, img 에 크기 제약이 하나도
      남지 않아 SVG 가 컨테이너 폭만큼 커졌다. 마크업과 이 셀렉터는 같이 움직여야 한다.
   ※ 찜(.favorite_item)은 요청으로 제거해서 관련 규칙도 같이 지웠다. */
.pab_v2_right .option_title .sum_share {position:absolute; right:0; bottom:1px;}
.pab_v2_right .option_title .sum_share .sns_share {line-height:0;}
.pab_v2_right .option_title .sum_share .sns_share button {padding:0; border:none;
    background:none; cursor:pointer; line-height:0;}
.pab_v2_right .option_title .sum_share .sns_share button img {width:30px; height:30px; margin-top:0;}

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

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

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

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

.pab_v2_right article.right_wrap .td_select .radio_select {display:flex;}
.pab_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;}
.pab_v2_right article.right_wrap .td_select .radio_select label.none {opacity:0.5; cursor:default;}
.pab_v2_right article.right_wrap .td_select .radio_select label.none:hover {border:1px solid #d4d4d4;}
.pab_v2_right article.right_wrap .td_select .radio_select label > span {display:table-cell; vertical-align:middle; line-height:20px;}

/* 1열 / 2열 / 3열. 포토압축앨범은
     사이즈 3종 -> 3열(32.5%)  ·  커버 2종 / 내지타입 2종 -> 2열(49%)
   로 쓴다. 1열(100%)은 선택지가 하나뿐인 항목용이다. */
.pab_v2_right article.right_wrap .td_select .radio_full1 {justify-content:flex-start; flex-wrap:wrap;}
.pab_v2_right article.right_wrap .td_select .radio_full1 label {width:100% !important; height:45px !important; margin-right:0; margin-bottom:6px;}
.pab_v2_right article.right_wrap .td_select .radio_full2 {justify-content:space-between; flex-wrap:wrap;}
.pab_v2_right article.right_wrap .td_select .radio_full2 label {width:49% !important; height:45px !important; margin-right:0; margin-bottom:6px;}
.pab_v2_right article.right_wrap .td_select .radio_full3 {justify-content:space-between; flex-wrap:wrap;}
.pab_v2_right article.right_wrap .td_select .radio_full3 label {width:32.5% !important; height:45px !important; margin-right:0; margin-bottom:6px;}
/* btype 포맷에는 라벨 호버 썸네일이 없다. 혹시 남아있어도 노출되지 않도록 차단 */
.pab_v2_right article.right_wrap .td_select .radio_select label span.thumb,
.pab_v2_right article.right_wrap .td_select .radio_select label:hover span.thumb {display:none !important;}

/* ---------- 커버색 : 왼쪽에 큰 색상 미리보기, 오른쪽에 셀렉트 박스 ----------
   /sub_probook_s2/css/detail_v2.css 의 .prb_color_* 규칙을 그대로 옮겼다.
   칩 색은 인라인 style 로 들어가고, 값은 detail.v2.asp 의 PAB_COVER_COLORS 가 갖는다. */
.pab_v2_right .pab_color_row {display:flex; align-items:stretch; gap:8px;}
.pab_v2_right .pab_color_preview {flex:0 0 auto; width:45px; height:45px; border:1px solid #d9d9d9;
    background-color:#484C57; box-sizing:border-box;}

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

/* 드롭다운 항목의 작은 색상칩. 인라인 style 로 실제 색이 들어간다 */
.pab_v2_right .pab_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;}

/* 커버색 우측 표기("네이비 · 래더/패브릭 커버")는 사이즈 표기와 같은 자리를 쓴다 */
.pab_v2_right #cover_state_txt {color:#999;}

/* ---------- 스티키 네비게이션 ----------
   .fixed_nav_wrap / ul.fixed_nav2 스타일은 main_2025/css/style.css 에 공용으로 있다.
   화면에 붙는 것만 여기서 얹는다. (프로포토북 .prb_v2_nav 와 같은 값)
   [주의] 아래 .more_box 의 z-index:300 은 이 120 을 이기려고 준 값이다.
          한쪽만 고치면 페이지수 목록이 이 바에 가려진다. */
.pab_v2_nav {position:sticky; top:0; z-index:120; background:#fff;}

/* ---------- 드롭다운 옵션 (select_wrap) : btype=gdtm 수량 영역 포맷 ----------
   커버색상 · 페이지수가 이 형식을 쓴다. 값은 여전히 숨긴 <select> 가 들고 있고
   이 UI 는 그 select 를 그려주기만 한다. */
.pab_v2_right .select_wrap {position:relative; margin:0px 0px 6px 0px !important; cursor:pointer;}
.pab_v2_right .select_wrap h4 {padding:10px 15px !important; margin-top:0 !important; border:1px solid #d9d9d9; font-weight:normal;}
.pab_v2_right .select_wrap h4 span {font-size:12px; color:#666; font-weight:normal;}
.pab_v2_right .select_wrap button.more_btn {position:absolute; top:18px; right:15px; background:none; border:none; padding:0; cursor:pointer;}
.pab_v2_right .select_wrap button.more_btn img {width:13px;}
/* z-index : 원본(btype)은 9 였다. 페이지수 목록이 길게 펼쳐지면 아래 콘텐츠에
   가리므로 넉넉히 올린다. */
.pab_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;}
.pab_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;}
.pab_v2_right .select_wrap .more_box li p {margin:0;}
.pab_v2_right .select_wrap .more_box li:first-child {padding-top:10px;}
.pab_v2_right .select_wrap .more_box li:last-child {padding-bottom:10px; border:none;}
.pab_v2_right .select_wrap .more_box li:hover {background:#f8f9fa;}
.pab_v2_right .select_wrap .more_box li:hover p {text-decoration:underline; color:#1a1a1a;}
.pab_v2_right .select_wrap .more_box_new {max-height:500px;}
.pab_v2_right .select_wrap .more_box.more_box_new li {padding:12px 15px;}

/* ---------- 배송비 안내 (CTA 버튼 위) ----------
   /service/product/detail.asp?btype=cack 의 <p class="delivery"> 와 같은 형식.
   원본 규칙 : service/product/style.css 352~353.
   가운데 구분선은 span 의 배경 이미지로 그린다. */
.pab_v2_right p.delivery {margin-top:20px; font-size:13.5px; text-align:left; color:#666;}
.pab_v2_right p.delivery span {margin-left:10px; padding-left:10px;
    background:url('/apparel/tshirt/img/line.png?t=1') 0 5px no-repeat;}

/* ---------- 만들기 버튼 : btype 과 동일하게 300x60 ---------- */
.pab_v2_right .btn_make {display:block; margin-top:12px; width:100%; height:60px; float:none;}
.pab_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;}
.pab_v2_right .btn_make a.select_design:hover {background-color:#3e4188; color:#fff; transition:.5s;}
.pab_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;}

/* 대량주문 배너는 원본(.bulk_order_banner)이 pab_cmn.css 에 있다.
   우측 300px 컬럼 안으로 들어오면서 테이블 래퍼만 폭을 풀어준다. */
.pab_v2_right .bulk_wrap {margin-top:16px;}
.pab_v2_right .bulk_wrap table.main_option {width:100% !important;}

/* 스티키 네비게이션의 ul 은 공용 규칙이 1200px 로 고정한다. 좁을 때만 풀어준다 */
@media (max-width:1240px) {
    .pab_v2_nav ul.fixed_nav2 {width:100% !important; padding:0 16px; box-sizing:border-box;}
}

@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;}

    /* --- 공통 배송안내 (/include/html/post_delivery.asp) -------------------------
       main_2025/css/style.css 1055~1057 이 1200px / 600px 을 !important 로 박아둔다.
       CDP 실측에서 이 블록이 가로 넘침의 뿌리였다(1024px 화면에서 scrollWidth 1200).
       이 파일이 그 CSS 보다 뒤에 로드되므로 같은 !important 로 덮인다. */
    .cnt-wrap8, .cnt-box8, .cnt-box8 .cnt-delivery,
    .cnt-delivery, .cnt-quick-disc {width:auto !important; max-width:100% !important;
        box-sizing:border-box;}
    .cnt-quick-disc .delivery-txt,
    .delivery-img2, .delivery-img3 {width:auto !important; max-width:100% !important;
        float:none !important; box-sizing:border-box;}

    /* --- 상세 설명 영역 -----------------------------------------------------
       pab_cmn.css 가 1000px / 790px / 600px 로 고정하는 블록들이다.
       CDP 로 이 페이지에 실제로 나오는 클래스만 골라 적었다(쓰지 않는 것은 넣지 않음).
       [주의] 자식 img 는 width 가 아니라 부모 폭을 따라가야 한다. 부모를 안 풀고
              img 에만 max-width 를 줘도 부모가 1000px 이면 그대로 1000px 이다. */
    .cmn_detail_info, .cmn_info, .cmn_info_paper, .cmn_style_info,
    .ptb_paper, .ptb_paper_cnt, .ptb_paper_infotxt,
    .tab_ctainer_cmn, .tab_ctainer_cmn .tab_img_cnt, .tab_img_cnt,
    .tab_ctainer_cmn .tab_img_cnt .in_tab_area, .in_tab_area,
    .tab_ctainer_in, .in_size_area, .ptb_bar_cmn {
        width:auto !important; max-width:100% !important; box-sizing:border-box;}

    /* 가로로 띄워 놓은 2단 구성은 좁은 화면에서 세로로 쌓는다.
       .ptb_paper_infotxt 는 float 외에 position:relative + left:170px(짝수단은 330px)
       오프셋으로 1000px 안에 글자를 배치한다. 폭을 풀면 그 오프셋만큼 화면 밖으로
       밀려나므로 좌표도 같이 0 으로 되돌린다. (pab_cmn.css 의 해당 규칙 참조) */
    .ptb_paper_infotxt, .ptb_paper_infotxt_even,
    .cmn_info_paper > li, .tab_img_cnt > li {float:none !important;}
    .ptb_paper_infotxt, .ptb_paper_infotxt_even {left:0 !important; top:0 !important;}

    /* 용지/내지 설명의 글·그림 2단. 역시 position + top/left 오프셋으로 자리를 잡는다 */
    .cmn_info_txt, .cmn_style_info_txt {width:auto !important; max-width:100% !important;
        top:0 !important; left:0 !important; padding:0 16px; box-sizing:border-box;}
    .cmn_info_img {width:auto !important; max-width:100% !important; height:auto !important;
        float:none !important;}
    .cmn_info_img img {width:auto !important; max-width:100% !important; height:auto !important;
        position:static !important;}

    .cmn_detail_info img {max-width:100% !important; height:auto !important;}

    /* 마지막 안전망. 공통 헤더의 툴팁(span.tooltip-box)처럼 absolute 로 떠 있는
       사이트 공용 요소까지 쫓아다니지 않도록 가로 스크롤 자체를 막는다.
       (프로포토북 list.v2.asp 의 1240px 블록과 같은 처리) */
    html, body {overflow-x:hidden;}
}

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

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

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

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

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

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

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