@charset "UTF-8";
/* ============================================================================
   포토압축앨범 디자인 리스트 (list.v2.asp) — 전용 보정 CSS

   레이아웃/카드 스타일의 원본은 페이지 안 <style> 블록이다.
   그 블록은 /sub_probook_s2/list.v2.asp 에서, 다시 그쪽은
   /sub_fancy/html/pan_sticker_list.asp 계열의 디자인시스템(redesign_SS)에서
   옮겨온 것이라 손대지 않는다.
   이 파일에는 "포토압축앨범이라서 달라지는 것" 만 둔다.
   (디카북쪽 대응 파일 : /sub_dicabook_v2/css/dicabook_list.css)

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

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

   ※ 사이즈에 따라 표지 비율이 다르다(8x8·10x10 정사각 / 8x11 세로).
      카드는 1:1 정사각으로 고정하고 이미지만 contain 으로 넣는다. 그래야
      사이즈를 바꿔도 그리드 줄맞춤이 흔들리지 않는다. */
.redesign_SS .redesign_SS-card .thumb {display:flex; align-items:center; justify-content:center;
    padding:clamp(14px,8%,34px); background:#f7f7f7;}
/* [2026-10-14] 표지 컷을 카드 안에서 75% 로 줄였다(= 약 25% 축소).
   프로포토북은 14x11 펼침면이라 가로로 길쭉해 1:1 카드 안에서 자연히 작게 들어가는데,
   포토압축앨범 표지는 정사각이라 카드를 꽉 채워 혼자만 커 보였다.
   카드 크기(1:1)와 그리드 줄맞춤은 그대로 두고 이미지만 줄인다. */
.redesign_SS .redesign_SS-card .thumb > img {width:auto; max-width:75%; max-height:75%;
    object-fit:contain; display:block; border-radius:0;}

/* 썸네일 이미지가 없는 디자인 자리 (gallery5 에 표지 컷이 아직 없는 경우) */
.redesign_SS .redesign_SS-card .thumb .pablist_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 .pablist_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)만 갖게 한다. */
.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 원 + 22px 이미지
   여기서는          배경 rgba(0,0,0,0.3)      / 100px 라운드사각(15px) + 50px 이미지
   ※ 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;}

/* ---------- 카드 메타 ---------- */
.redesign_SS .redesign_SS-card h4 {font-family:Montserrat, YoonGothicPro740, sans-serif;
    font-size:18px; font-weight:500; color:#000;}
.redesign_SS .redesign_SS-card .cat_txt {margin:0 0 6px; font-size:12px; color:#999;}

/* ---------- 상단 네이비 바 ---------- */
/* [2026-10-14] 바 높이(60px) 한가운데에 한 줄로 놓는다.
   페이지 안 <style> 의 원본은 .ptp_nav{padding-top:12px} + .title{padding-top:18px} 라
   위 31px / 아래 9px 로 아래쪽에 치우쳐 있었다(CDP 실측).
   원본 블록은 디자인시스템 값이라 손대지 않고 여기서만 덮는다. */
.fixed_wrap .ptp_nav {display:flex; align-items:center; padding-top:0 !important;}
.fixed_wrap .ptp_nav .title {padding-top:0 !important; width:1200px; margin:0 auto;}

.fixed_wrap .title h3 em {font-style:normal; font-weight:400; color:rgba(255,255,255,0.7);}
.fixed_wrap .title .pablist_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 .pablist_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;}

/* 옵션 줄이 둘(사이즈 · 테마)이라 세로로 쌓는다.
   프로포토북은 카테고리 한 줄뿐이라 flex 가로 배치였다.
   포토압축앨범은 테마가 9개라 한 줄이 길다. 1240px 보정은 list.v2.asp 안에 있다. */
.fixed_wrap .opt_nav_wrap {display:block;}
.fixed_wrap .opt_nav_wrap .opt_list::after {display:table; content:""; clear:both;}

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

.redesign_SS .redesign_SS-grid .pablist_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-top:42px;}
.option .right .pablist_guide {display:inline-block; margin-top:5px; font-size:13px; color:#777;
    word-break:keep-all; text-align:right;}

/* [2026-10-14] 정렬(인기순/신상품순) 노출을 뺐다. 프로포토북 목록에도 없다.
   마크업을 되살리면 쓰도록 규칙만 남겨 둔다. */
.option .right .pablist_sort {display:inline-block; margin-left:15px; vertical-align:middle;}
.option .right .pablist_sort a {display:inline-block; padding:0 8px; font-size:13px; color:#999;}
.option .right .pablist_sort a.this_on {color:#111; font-weight:bold;}
.option .right .pablist_sort a + a {border-left:1px solid #ddd;}

/* ---------- 더보기 ---------- */
.pablist_more {display:flex; justify-content:center; width:1200px; margin:40px auto 0;}
.pablist_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;}
.pablist_more button:hover {background:#222450; color:#fff;}
.pablist_more button span.plus {font-size:18px; line-height:1;}

/* ============================================================================
   자세히 보기 : gallery5 미리보기 팝업
   ============================================================================ */
/* ※ 모달은 .redesign_SS 바깥이라 그쪽 box-sizing:border-box 가 안 미친다.
      content-box 로 두면 .pablist_btn 이 min-height 44px + padding 12/12 = 70px 로
      부풀어 버튼 위아래 여백이 어긋난다. 여기서 다시 border-box 로 잡는다. */
.pablist_backdrop, .pablist_backdrop * {box-sizing:border-box;}

.pablist_backdrop {position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.55);
    display:flex; align-items:center; justify-content:center;}
.pablist_modal {position:relative; display:flex; flex-direction:column;
    width:min(1040px,96vw); height:min(620px,92vh);
    background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.3);}
.pablist_modal_header {padding:20px 24px 16px; text-align:center;
    font-size:16px; font-weight:700; color:#333;}
.pablist_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;}
.pablist_modal_close:hover {background:#f5f5f5; color:#333;}

.pablist_modal_body {flex:1; overflow:hidden; display:flex; align-items:center; justify-content:center;
    padding:20px 16px 8px;}

/* gallery5 미리보기 iframe.
   preview.asp 는 안쪽이 고정 픽셀 레이아웃이라 늘리지 않고 통째로 축소한다.
   크기 계산은 pablist_preview_fit() 이 한다. */
/* [2026-10-15] 바탕을 흰색으로. iframe(preview.asp)은 고정 픽셀이라 가운데에 놓이고
   남는 좌우가 이 배경으로 보이는데, #f5f5f5 라 모달 흰 바탕에 회색 띠처럼 드러났다. */
.pablist_preview {position:relative; flex:1; align-self:stretch; min-width:0; background:#fff;
    display:flex; align-items:center; justify-content:center; overflow:hidden;}
.pablist_preview_fit {flex:none; transform-origin:center center;}
.pablist_preview_fit iframe {display:block; width:100%; height:100%; border:0;}
.pablist_preview_loading {position:absolute; left:0; top:0; right:0; bottom:0; display:flex;
    align-items:center; justify-content:center; background:#fff; color:#999; font-size:13px;}

.pablist_modal_footer {display:flex; gap:12px; justify-content:center; padding:16px 24px 20px;
    border-top:1px solid #eee;}
.pablist_btn {min-height:44px; padding:12px 32px; border-radius:8px;
    font-size:14px; font-weight:600; cursor:pointer; transition:all .15s;}
.pablist_btn_outline {border:1px solid #ddd; background:#fff; color:#555;}
.pablist_btn_outline:hover {background:#f5f5f5; border-color:#bbb;}
.pablist_btn_primary {border:none; background:#222450; color:#fff;}
.pablist_btn_primary:hover {background:#1a1c3e;}

@media (max-width:640px) {
    .pablist_backdrop .pablist_modal {width:96vw; height:92vh;}
    .pablist_modal_body {padding:12px 8px 6px;}
    .pablist_modal_footer {padding:12px 16px 16px;}
    .pablist_btn {padding:12px 20px;}
}