@charset "UTF-8";
/* ============================================================================
   프로포토북 디자인 리스트 (prophotobook_list.asp) - 전용 보정 CSS

   레이아웃/카드 스타일의 원본은 페이지 안 <style> 블록이다.
   그 블록은 /sub_fancy/html/pan_sticker_list.asp 계열의 디자인시스템
   (redesign_SS)을 기획 파일에서 그대로 옮겨온 것이라 손대지 않는다.
   이 파일에는 "프로포토북이라서 달라지는 것" 만 둔다.

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

/* ---------- 카드 썸네일 ----------
   스티커 리스트는 용지/모양/코팅 3단 합성(.list_sticker_thumb)이지만
   프로포토북은 표지 이미지 1장이다. .thumb 안에서 가운데 정렬만 해준다.

   배경색은 pan_sticker_list 실측값 #f7f7f7 로 맞춘다.
   (redesign_SS 원본은 --belief = #F0F1F6 이라 살짝 더 어둡다) */
.redesign_SS .redesign_SS-card .thumb {display:flex; align-items:center; justify-content:center;
    padding:clamp(14px,8%,34px); background:#f7f7f7;}
.redesign_SS .redesign_SS-card .thumb > img {width:auto; max-width:100%; max-height:100%;
    object-fit:contain; display:block; border-radius:0;}

/* 썸네일 이미지가 없는 디자인 자리 (기획서의 점선 플레이스홀더) */
.redesign_SS .redesign_SS-card .thumb .pplist_noimg {width:100%; aspect-ratio:4/3;
    border:1px dashed #C9A96E; border-radius:4px; background:#FDFBF7;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    font-size:12px; color:#999; text-align:center; padding:10px;}
.redesign_SS .redesign_SS-card .thumb .pplist_noimg b {font-family:Montserrat,sans-serif;
    font-size:11px; font-weight:700; letter-spacing:1px; color:#C9A96E;}

/* ---------- 호버 분리 ----------
   원본은 .redesign_SS-card:hover 로 걸려 있어서, 카드 아래 메타영역
   (디자인명 · 자세히 보기)에 마우스를 올려도 썸네일 오버레이가 같이 떴다.
   썸네일에만 걸어서 「자세히 보기」는 자기 호버(.detail-btn:hover)만 갖게 한다.
   ↓ 원본 규칙을 끄고 .thumb:hover 로 다시 건다. */
.redesign_SS .redesign_SS-card:hover .thumb .list_cover {opacity:0;}
.redesign_SS .redesign_SS-card .thumb:hover .list_cover {opacity:1;}

/* ---------- 호버 오버레이 배경 + 만들기 아이콘 ----------
   원본(redesign_SS)은  배경 rgba(17,17,17,0.45) / 56px 원(border-radius:50%) + 22px 이미지
   프로포토북은         배경 rgba(0,0,0,0.3)     / 100px 라운드사각(15px)   + 50px 이미지
   -> pan_sticker_list 의 원래 만들기 버튼과 같은 모양·크기다.
   ※ border-radius 를 안 적으면 원본의 50% 가 그대로 남아 원형이 된다. */
.redesign_SS .thumb .list_cover {background:rgba(0, 0, 0, 0.3);}
.redesign_SS .thumb .list_cover .make_img {width:100px; height:100px; border-radius:15px;}
.redesign_SS .thumb .list_cover .make_img img {width:50px;}

/* ---------- 카드 메타 ----------
   상품명은 pan_sticker_list 의 .list ul li h4 실측값에 맞춘다.
     실측 : font-size 19px / font-weight 500 / color #000
            font-family Montserrat, YoonGothicPro740, sans-serif
   redesign_SS 원본은 16px / 700 / #111 이고, 컨테이너가 font-family 를
   'Noto Sans KR' 로 바꿔놔서 글꼴까지 달라 보였다. 넷 다 되돌린다. */
.redesign_SS .redesign_SS-card h4 {font-family:Montserrat, YoonGothicPro740, sans-serif;
    font-size:19px; font-weight:500; color:#000;}
.redesign_SS .redesign_SS-card .cat_txt {margin:0; font-size:12px; color:#999;}

/* ---------- 상단 네이비 바 ----------
   .title h3 / .title p 는 참고 레이아웃 원본 규칙을 그대로 쓴다.
   ( p 의 왼쪽 테두리가 「|」 구분선 역할 ) */
.fixed_wrap .title h3 em {font-style:normal; font-weight:400; color:rgba(255,255,255,0.7);}
.fixed_wrap .title .pplist_reopt {display:inline-block; vertical-align:middle; margin-left:12px;
    font-size:13px; color:rgba(255,255,255,0.75); text-decoration:underline; text-underline-offset:2px;
    white-space:nowrap;}
.fixed_wrap .title .pplist_reopt:hover {color:#fff;}

/* 카테고리 탭 옆 개수 */
.fixed_wrap .opt_nav_wrap .opt_list ul li em {font-style:normal; font-size:11px; color:#aaa;}
.fixed_wrap .opt_nav_wrap .opt_list ul li .this_on em {color:#666;}

/* 개수 옆 범위 표기 */
.option .left .pplist_range {font-style:normal; margin-left:4px; font-size:12px; color:#999;}

.redesign_SS .redesign_SS-grid .pplist_empty {grid-column:1/-1; padding:80px 0;
    text-align:center; font-size:14px; color:#999;}

/* 안내 문구 : .option 행 오른쪽 (개수 표기와 같은 줄).
   .option .left / .right 가 float 이라 clearfix 가 없으면 아래 그리드가 말려 올라간다. */
.option::after {display:table; content:""; clear:both;}

/* 개수/안내 행과 카드 그리드 사이 여백.
   원본 redesign_SS 는 padding:60px 0 인데 위쪽이 넓어서 42px 로 줄인다. (아래는 60px 유지) */
.redesign_SS {padding-top:42px;}
.option .right .pplist_guide {display:inline-block; margin-top:5px; font-size:13px; color:#777;
    word-break:keep-all; text-align:right;}

/* ---------- 더보기 ---------- */
.pplist_more {display:flex; justify-content:center; width:1200px; margin:40px auto 0;}
.pplist_more button {min-height:52px; border:1px solid #222450; background:#fff; color:#222450;
    border-radius:8px; padding:15px 44px; font-size:15px; font-weight:700; cursor:pointer;
    display:inline-flex; align-items:center; gap:10px; transition:all .15s;}
.pplist_more button:hover {background:#222450; color:#fff;}
.pplist_more button span.plus {font-size:18px; line-height:1;}

/* ============================================================================
   자세히 보기 : 내지 디자인 팝업
   기획서 pc-search.html 의 dl-modal 포맷 (커버 + 펼침면 페이지 넘김 뷰어)
   ============================================================================ */
/* ※ 모달은 .redesign_SS 바깥이라 그쪽 box-sizing:border-box 가 안 미친다.
      content-box 로 두면 .pplist_btn 이 min-height 44px + padding 12/12 = 70px 로
      부풀어 버튼 위아래 여백이 어긋난다. 여기서 다시 border-box 로 잡는다. */
.pplist_backdrop, .pplist_backdrop * {box-sizing:border-box;}

.pplist_backdrop {position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.55);
    display:flex; align-items:center; justify-content:center;}
.pplist_modal {position:relative; display:flex; flex-direction:column;
    width:min(880px,92vw); height:min(580px,90vh);
    background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.3);}
.pplist_modal_header {padding:20px 24px 16px; text-align:center;
    font-size:16px; font-weight:700; color:#333;}
.pplist_modal_close {position:absolute; top:12px; right:12px; z-index:1; width:36px; height:36px;
    border:1px solid #ddd; border-radius:50%; background:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; color:#666; cursor:pointer; transition:all .15s;}
.pplist_modal_close:hover {background:#f5f5f5; color:#333;}

/* 뷰어 : 화살표 - 스테이지 - 화살표 한 줄 flex.
   화살표를 absolute 로 얹으면 펼침면이 넓어질 때 겹친다. */
.pplist_modal_body {flex:1; overflow:hidden; display:flex; align-items:center; justify-content:center;
    padding:20px 16px 8px;}
.pplist_viewer {display:flex; align-items:center; gap:12px; width:100%;}
.pplist_nav {flex:none; width:44px; height:44px; border:1px solid #ddd; border-radius:50%; background:#fff;
    font-size:24px; line-height:1; color:#555; cursor:pointer; transition:all .15s;
    display:flex; align-items:center; justify-content:center;}
.pplist_nav:hover {background:#f5f5f5; border-color:#bbb;}
.pplist_stage {flex:1; min-width:0;}

/* 1페이지 : 커버
   ※ aspect-ratio 는 카드가 아니라 "이미지 영역" 에 걸어야 한다.
      카드(이미지+캡션) 전체에 걸면 캡션 높이만큼 이미지가 눌려서
      납작해진다. 기획서 시안도 이미지 영역 기준이다.
      (JS 가 style="aspect-ratio:..." 를 .pplist_cover_img 에 붙인다) */
.pplist_cover_pg {display:flex; flex-direction:column; width:260px; margin:0 auto;
    background:#fff; border:1px solid #e0e0e0; border-radius:4px; overflow:hidden;
    box-shadow:0 2px 16px rgba(0,0,0,.08);}
.pplist_cover_img {background:#F0F1F6; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.pplist_cover_img img {width:100%; height:100%; object-fit:contain; display:block;}
.pplist_cover_cap {padding:14px 12px; text-align:center; display:flex; flex-direction:column; gap:4px;}
.pplist_cover_cap .en {font-family:Montserrat,sans-serif; font-size:10px; letter-spacing:2px;
    color:#aaa; text-transform:uppercase;}
.pplist_cover_cap .ko {font-size:13px; font-weight:500; color:#333;}

/* 2~5페이지 : 펼침면. 좌/우 페이지에 사진 슬롯이 grid 로 깔린다 */
.pplist_spread {display:flex; gap:0; background:#fff; border:1px solid #e0e0e0; border-radius:4px;
    overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,.08);}
.pplist_pg {flex:1; display:grid; gap:6px; padding:12px; grid-auto-rows:1fr;}
.pplist_pg_l {border-right:1px solid #eee;}
.pplist_ph {background:#CED2DC; border-radius:2px;}

.pplist_modal_pager {padding:8px 0 4px; text-align:center;
    font-family:Montserrat,sans-serif; font-size:13px; color:#999;}
.pplist_modal_footer {display:flex; gap:12px; justify-content:center; padding:16px 24px 20px;
    border-top:1px solid #eee;}
.pplist_btn {min-height:44px; padding:12px 32px; border-radius:8px;
    font-size:14px; font-weight:600; cursor:pointer; transition:all .15s;}
.pplist_btn_outline {border:1px solid #ddd; background:#fff; color:#555;}
.pplist_btn_outline:hover {background:#f5f5f5; border-color:#bbb;}
.pplist_btn_primary {border:none; background:#222450; color:#fff;}
.pplist_btn_primary:hover {background:#1a1c3e;}