@charset "utf-8";
/* ───────── 2026-10-24 내 사진 액자 만들기 PC (pf-) — shop_main/ordermade/index.php
   그림액자 상세의 frame_view.css(fv-) 위에 사진 올리기 · 화질 표시 · 수량 버튼만 더함
   ───────── */

/* 사진 올리기 전 — 미리보기 칸 가운데 */
.pf-empty { position:absolute; left:0; top:0; right:0; bottom:0; z-index:5; display:flex; align-items:center; justify-content:center; }
.pf-has-photo .pf-empty { display:none; }
.pf-empty-box { width:420px; padding:44px 36px 34px; border-radius:10px; background:rgba(255, 255, 255, 0.94); box-shadow:0 10px 40px rgba(0, 0, 0, 0.12); text-align:center; font-family:'Noto Sans KR', sans-serif; transition:box-shadow .2s, transform .2s; }
.pf-drag .pf-empty-box { box-shadow:0 0 0 3px #4499aa, 0 10px 40px rgba(0, 0, 0, 0.12); transform:scale(1.02); }
.pf-empty-t { margin:16px 0 6px; font-size:20px; font-weight:500; letter-spacing:-0.8px; color:#111111; }
.pf-empty-s { margin:0 0 22px; font-size:13px; font-weight:300; letter-spacing:-0.3px; color:#666666; }
.pf-empty-n { margin:18px 0 0; font-size:12px; font-weight:300; line-height:1.6; letter-spacing:-0.3px; color:#888888; }
.pf .pf-btn-main { height:46px; padding:0 30px; border:0; border-radius:4px; background:#111111; font-family:'Noto Sans KR', sans-serif; font-size:15px; font-weight:500; letter-spacing:-0.4px; color:#ffffff; cursor:pointer; }
.pf .pf-btn-main:hover { background:#333333; }
.pf .pf-btn-main:disabled { background:#bbbbbb; cursor:default; }
.pf-drag .fv-stage.pf-stage:after { content:''; position:absolute; left:10px; top:10px; right:10px; bottom:10px; z-index:9; border:2px dashed #4499aa; border-radius:6px; pointer-events:none; }

/* 올리는 중 */
.pf-progress { display:none; position:absolute; left:0; top:0; right:0; bottom:0; z-index:10; align-items:center; justify-content:center; background:rgba(255, 255, 255, 0.6); }
.pf-uploading .pf-progress { display:flex; }
.pf-progress-box { width:300px; padding:22px 24px; border-radius:8px; background:#ffffff; box-shadow:0 8px 30px rgba(0, 0, 0, 0.14); text-align:center; }
.pf-progress-box p { margin:0 0 12px; font-size:13px; letter-spacing:-0.3px; color:#333333; }
.pf-progress-box span { display:block; height:4px; overflow:hidden; border-radius:2px; background:#eeeeee; }
.pf-progress-box i { display:block; width:0; height:100%; background:#4499aa; transition:width .2s; }

/* 사진 올리기 전에는 사양·구매를 흐리게 */
.pf .pf-spec, .pf .pf-buy-box, .pf .fv-buy, .pf .fv-btns, .pf .pf-mode { transition:opacity .2s; }
body:not(.pf-has-photo) .pf .pf-spec, body:not(.pf-has-photo) .pf .pf-buy-box, body:not(.pf-has-photo) .pf .fv-buy, body:not(.pf-has-photo) .pf .fv-btns { opacity:0.35; pointer-events:none; }
body:not(.pf-has-photo) .pf .pf-mode { display:none; }

/* 올린 사진 목록 (여러 장 · 10-24) — 누르면 그 사진의 사양을 고름 */
.pf .pf-photos { display:none; margin:0 0 18px; }
.pf-has-photo .pf .pf-photos { display:block; }
.pf-photos-head { display:flex; align-items:baseline; justify-content:space-between; margin:0 0 8px; }
.pf-photos-head b { font-size:14px; font-weight:500; letter-spacing:-0.4px; color:#111111; }
.pf-photos-head span { font-size:11px; font-weight:300; letter-spacing:-0.3px; color:#999999; }
.pf ul#pfPhotos { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px 8px; max-height:206px; overflow-y:auto; margin:-4px; padding:6px 4px 4px; list-style:none; }
.pf ul#pfPhotos li { position:relative; min-width:0; }
.pf ul#pfPhotos .pf-ph { position:relative; display:block; width:100%; aspect-ratio:1 / 1; margin:0; padding:0; overflow:hidden; border:0; border-radius:4px; background:#f2f2f0; box-shadow:0 0 0 1px #e3e3e3; cursor:pointer; }
.pf ul#pfPhotos li.on .pf-ph { box-shadow:0 0 0 2px #111111; }
.pf ul#pfPhotos .pf-ph img { display:block; width:100%; height:100%; object-fit:cover; }
.pf ul#pfPhotos .pf-ph em { position:absolute; left:4px; top:4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:rgba(17, 17, 17, 0.72); font:700 10px/16px arial, sans-serif; font-style:normal; color:#ffffff; }
.pf .pf-ph-p { display:block; margin-top:4px; overflow:hidden; font-family:arial, sans-serif; font-size:10.5px; text-align:center; white-space:nowrap; text-overflow:ellipsis; color:#777777; }
.pf ul#pfPhotos li.on .pf-ph-p { font-weight:700; color:#111111; }
.pf ul#pfPhotos .pf-ph-x { position:absolute; right:-5px; top:-5px; width:20px; height:20px; margin:0; padding:0; border:0; border-radius:50%; background:#ffffff; box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); font-size:13px; line-height:20px; color:#555555; cursor:pointer; }
.pf ul#pfPhotos .pf-ph-x:hover { color:#c00000; }
.pf ul#pfPhotos li.pf-ph-add .pf-pick { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; aspect-ratio:1 / 1; margin:0; padding:0; border:1px dashed #c8c8c8; border-radius:4px; background:#fafafa; font-family:'Noto Sans KR', sans-serif; font-size:11px; color:#666666; cursor:pointer; }
.pf ul#pfPhotos li.pf-ph-add .pf-pick:hover { border-color:#111111; color:#111111; }
.pf ul#pfPhotos li.pf-ph-add span { margin-bottom:2px; font-size:20px; line-height:1; }
.pf .pf-applyall { display:none; width:100%; height:32px; margin:10px 0 0; padding:0; border:0; border-radius:4px; background:#eef6f7; font-family:'Noto Sans KR', sans-serif; font-size:12px; letter-spacing:-0.3px; color:#1d5964; cursor:pointer; }
.pf .pf-applyall:hover { background:#e1eff1; }
.pf #pfCurNo { margin-left:6px; font-size:12px; font-style:normal; font-weight:500; color:#4499aa; }
.pf .pf-nophoto { margin:0 0 18px; }
.pf .pf-nophoto .pf-btn-main { width:100%; }
.pf-has-photo .pf .pf-nophoto { display:none; }

/* 단계 칸 — 그림액자 상세와 같은 높이 */
.pf .pf-panel { display:none; }
.pf .pf-off { display:none !important; }	/* 고를 수 없는 단계 (예: 매트를 못 넣는 프레임) */
.pf #mediadiv.pf-panel { display:block; }

/* 사이즈 — 화질 */
.pf ul#optionVal { grid-template-columns:repeat(3, minmax(0, 1fr)); max-height:206px; }
.pf ul#optionVal li label input + p { height:46px; padding:7px 4px 0; line-height:1.2; }
.pf ul#optionVal li label input + p em { display:block; margin-top:4px; font-family:'Noto Sans KR', sans-serif; font-size:10.5px; font-style:normal; font-weight:400; letter-spacing:-0.3px; color:#3a8c5c; }
.pf ul#optionVal li.q-ok label input + p em { color:#888888; }
.pf ul#optionVal li.q-low label input + p em { color:#c05a1a; }
.pf ul#optionVal li label input:checked + p em { color:rgba(255, 255, 255, 0.75); }
.pf ul#optionVal li label input:disabled + p { opacity:0.35; cursor:not-allowed; }
.pf .pf-warn { display:none; margin:10px 0 0; padding:9px 12px; border-radius:6px; background:#fbf1ea; font-size:12px; line-height:1.5; letter-spacing:-0.3px; color:#8a4516; }

/* 프레임 — 이 사이즈에 못 쓰는 것 */
.pf ul#frame_type li.is-off { opacity:0.35; }
.pf ul#frame_type li.is-off label { cursor:not-allowed; }

/* 수량 · 가격 */
.pf .fv-buy p.quantity.pf-qty button { width:36px; height:38px; margin:0; padding:0; border:0; background:transparent; font-size:18px; line-height:38px; color:#555555; cursor:pointer; }
.pf .fv-buy p.quantity.pf-qty button:hover { color:#111111; }
.pf #pfPrice { font-family:arial, sans-serif; font-size:26px; font-weight:700; letter-spacing:-0.5px; color:#111111; }
.pf #pfPrice:empty:after { content:none; }
.pf #pfPrice:after { content:'원'; margin-left:2px; font-family:'Noto Sans KR', sans-serif; font-size:16px; font-weight:500; letter-spacing:0; }
.pf .pf-unit { display:block; margin:0 0 5px; font-size:11px; font-weight:400; color:#999999; }
.pf .fv-ship.fv-flash { animation:fvflash 1.4s ease; border-radius:6px; }

/* 안내 */
.pf-guide ul { margin:0; padding:24px 28px; border-radius:6px; background:#f6f6f5; list-style:none; }
.pf-guide li { position:relative; margin:0 0 10px; padding-left:104px; font-size:13px; font-weight:300; line-height:1.65; letter-spacing:-0.3px; color:#555555; }
.pf-guide li:last-child { margin-bottom:0; }
.pf-guide li b { position:absolute; left:0; top:0; font-weight:500; color:#111111; }