@charset "UTF-8";

/********************************************************
■ 개인결제 (fs-personalpay)
  - 목록 : shop/personalpay.php (skin personalpay.skin.php : .fs-pp-list)
  - 결제 : shop/personalpayform.php (PC #forderform, 모바일 #m_pv_sod_frm)
********************************************************/

/* ─── 목록 카드 ─── */
.fs-pp-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.fs-pp-item a { display:flex; flex-direction:column; align-items:center; height:100%; padding:32px 20px 22px; border:1px solid #ece7e2; border-radius:16px; background:#fff; color:#222; text-align:center; transition:border-color 200ms, box-shadow 200ms, transform 200ms; }
.fs-pp-item a:hover { border-color:var(--main-color1, #5B412D); box-shadow:0 10px 24px rgba(91,65,45,.10); transform:translateY(-2px); }
.fs-pp-ico { display:flex; align-items:center; justify-content:center; width:72px; height:72px; margin-bottom:16px; border-radius:50%; background:#f5efe9; color:var(--main-color1, #5B412D); }
.fs-pp-ico svg { width:34px; height:34px; }
.fs-pp-label { display:inline-flex; align-items:center; height:22px; margin-bottom:8px; padding:0 10px; border-radius:99px; background:#faf7f4; color:#8c7a6b; font-size:.75rem; font-weight:600; }
.fs-pp-name { max-width:100%; overflow:hidden; color:#222; font-size:1.0625rem; font-weight:600; line-height:1.4; letter-spacing:-0.02em; text-overflow:ellipsis; white-space:nowrap; }
.fs-pp-price { margin-top:4px; color:var(--main-color1, #5B412D); font-size:1.25rem; font-weight:700; }
.fs-pp-go { display:inline-flex; align-items:center; gap:4px; height:36px; margin-top:18px; padding:0 18px; border:1px solid var(--main-color1, #5B412D); border-radius:99px; color:var(--main-color1, #5B412D); font-size:.875rem; font-weight:600; transition:background-color 200ms, color 200ms; }
.fs-pp-go:after { content:""; width:14px; height:14px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain; }
.fs-pp-item a:hover .fs-pp-go { background:var(--main-color1, #5B412D); color:#fff; }
.fs-pp-empty { padding:80px 20px; border-radius:12px; background:#faf7f4; color:#999; text-align:center; }

@media (max-width: 767px) {
    .fs-pp-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
    .fs-pp-item a { padding:24px 12px 18px; border-radius:14px; }
    .fs-pp-ico { width:56px; height:56px; margin-bottom:12px; }
    .fs-pp-ico svg { width:26px; height:26px; }
    .fs-pp-name { font-size:.9375rem; }
    .fs-pp-price { font-size:1.0625rem; }
    .fs-pp-go { height:32px; margin-top:14px; padding:0 14px; font-size:.8125rem; }
}

/* ─── 결제 화면 (PC) ─── */
#forderform:has(#personal_pay) { max-width:720px; margin:0 auto; }
#forderform .pesonal,
#forderform #personal_pay { width:100%; margin:0 0 20px; overflow:hidden; border:1px solid #ece7e2; border-radius:16px; background:#fff; }
#forderform .pesonal h2,
#forderform #personal_pay h2 { display:flex; align-items:center; gap:8px; margin:0; padding:18px 24px; border-bottom:1px solid #f0ece8; background:#faf7f4; color:#222; font-size:1.0625rem; font-weight:700; }
#forderform .pesonal h2:before,
#forderform #personal_pay h2:before { content:""; width:18px; height:18px; background:var(--main-color1, #5B412D); }
#forderform .pesonal h2:before { -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h4'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h4'/%3E%3C/svg%3E") no-repeat center/contain; }
#forderform #personal_pay h2:before { -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E") no-repeat center/contain; }

/* 개인결제정보 표 → 입력 폼 */
#forderform .pesonal .tbl_frm01 { margin:0; padding:20px 24px 24px; }
#forderform .pesonal table { width:100%; border:0; border-collapse:separate; border-spacing:0; table-layout:fixed; }
#forderform .pesonal th,
#forderform .pesonal td { padding:0; border:0; background:none; text-align:left; vertical-align:top; }
#forderform .pesonal th { padding:14px 6px 6px 0; color:#666; font-size:.8125rem; font-weight:500; }
#forderform .pesonal td { padding-right:6px; color:#222; font-weight:400; }
#forderform .pesonal th + th,
#forderform .pesonal td + td { padding:14px 0 6px 6px; }
#forderform .pesonal td + td { padding-top:0; }
#forderform .pesonal tr:first-child th { padding-top:0; }
/* 결제금액 강조 */
#forderform .pesonal td[colspan] { font-size:.9375rem; line-height:1.7; }
#forderform .pesonal tr:has(+ tr th label[for="pp_name"]) td { color:var(--main-color1, #5B412D); font-size:1.5rem; font-weight:700; }
#forderform .pesonal .frm_input,
#m_pv_sod_frm .frm_input { width:100%; height:48px; padding:0 14px; border:1px solid #ddd; border-radius:10px; background:#fff; color:#222; font-size:.9375rem; box-shadow:none; transition:border-color 200ms, box-shadow 200ms; }
#forderform .pesonal .frm_input:focus,
#m_pv_sod_frm .frm_input:focus { outline:none; border-color:var(--main-color1, #5B412D); box-shadow:0 0 0 3px rgba(91,65,45,.12); }
#forderform .pesonal .required,
#m_pv_sod_frm .required { background-image:none !important; }

/* 결제수단 */
#forderform #personal_pay fieldset { margin:0; padding:0; border:0; }
#forderform #personal_pay .pay_way,
#m_pv_sod_frm .pay_way { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:0; padding:20px 24px 4px; border:0; }
#m_pv_sod_frm .pay_way { padding:4px 0 0; }
#forderform #personal_pay .pay_way li:not(:has(input)) { display:none; }
#forderform #personal_pay .pay_way li,
#m_pv_sod_frm .pay_way li { position:relative; margin:0; padding:0; float:none; width:auto; line-height:1.4; list-style:none; }
#forderform #personal_pay .pay_way input[type="radio"],
#m_pv_sod_frm .pay_way input[type="radio"] { position:absolute; left:0; top:0; width:0; height:0; opacity:0; }
#forderform #personal_pay .pay_way label,
#m_pv_sod_frm .pay_way label { position:relative; display:flex; align-items:center; width:100%; height:52px; padding:0 14px 0 42px; border:1px solid #ddd; border-radius:10px; background:#fff; color:#444; font-size:.9375rem; font-weight:500; cursor:pointer; transition:border-color 200ms, background-color 200ms, color 200ms; }
#forderform #personal_pay .pay_way label span,
#m_pv_sod_frm .pay_way label span { position:absolute; left:14px; top:50%; width:18px; height:18px; margin-top:-9px; border:1.5px solid #ccc; border-radius:50%; background:#fff; box-sizing:border-box; transform:none; transition:border-color 200ms, box-shadow 200ms; }
#forderform #personal_pay .pay_way label span:before,
#m_pv_sod_frm .pay_way label span:before { display:none; }
#forderform #personal_pay .pay_way label:hover,
#m_pv_sod_frm .pay_way label:hover { border-color:var(--main-color1, #5B412D); }
#forderform #personal_pay .pay_way input:checked + label,
#m_pv_sod_frm .pay_way input:checked + label { border-color:var(--main-color1, #5B412D); background:#faf7f4; color:var(--main-color1, #5B412D); font-weight:600; }
#forderform #personal_pay .pay_way input:checked + label span,
#m_pv_sod_frm .pay_way input:checked + label span { border-color:var(--main-color1, #5B412D); box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 9px var(--main-color1, #5B412D); }

/* 결제수단 없음 안내 */
#forderform #personal_pay > p,
#m_pv_sod_frm #m_sod_frm_orderer > p { margin:20px 24px 0; padding:16px 18px; border-radius:10px; background:#faf7f4; color:#8c7a6b; font-size:.875rem; line-height:1.6; }

/* 주문하기 · 취소 */
#forderform #personal_pay #display_pay_button { display:flex; flex-direction:row-reverse; gap:8px; margin:0; padding:20px 24px 24px; }
#forderform #personal_pay #display_pay_button .btn_submit,
#forderform #personal_pay #display_pay_button .btn01 { flex:1; display:flex; align-items:center; justify-content:center; width:auto; height:52px; margin:0; padding:0; border-radius:10px; font-size:1rem; font-weight:600; }
#forderform #personal_pay #display_pay_button .btn_submit { flex:2; border:1px solid var(--main-color1, #5B412D) !important; background:var(--main-color1, #5B412D) !important; color:#fff !important; }
#forderform #personal_pay #display_pay_button .btn_submit:hover { border-color:var(--main-color3, #795840) !important; background:var(--main-color3, #795840) !important; }
#forderform #personal_pay #display_pay_button .btn01 { border:1px solid #ddd; background:#fff; color:#555; }
#forderform #personal_pay #display_pay_button .btn01:hover { border-color:#bbb; color:#222; }

/* ─── 결제 화면 (모바일 결제폼) ─── */
#m_pv_sod_frm #m_sod_frm_orderer { margin-bottom:16px; padding:18px 16px 20px; border:1px solid #ece7e2; border-radius:14px; background:#fff; }
#m_pv_sod_frm #m_sod_frm_orderer h2 { margin:0 0 12px; color:#222; font-size:1rem; font-weight:700; }
#m_pv_sod_frm .odf_tbl table { width:100%; border:0; }
#m_pv_sod_frm .odf_tbl th,
#m_pv_sod_frm .odf_tbl td { display:block; width:100%; padding:0; border:0; background:none; text-align:left; }
#m_pv_sod_frm .odf_tbl th { padding:12px 0 6px; color:#666; font-size:.8125rem; font-weight:500; }
#m_pv_sod_frm .odf_tbl tr:first-child th { padding-top:0; }
#m_pv_sod_frm fieldset { margin:16px 0 0; padding:0; border:0; }
#m_pv_sod_frm #m_sod_frm_orderer > p { margin:16px 0 0; }

@media (max-width: 767px) {
    #forderform .pesonal .tbl_frm01 { padding:16px 16px 20px; }
    #forderform .pesonal h2,
    #forderform #personal_pay h2 { padding:16px; }
    #forderform #personal_pay .pay_way { padding:16px 16px 4px; }
    #forderform #personal_pay > p { margin:16px 16px 0; }
    #forderform #personal_pay #display_pay_button { padding:16px; }
}

/* 결제수단이 하나도 없으면 [주문하기] 대신 안내만 (눌러도 결제가 안 되므로) */
#forderform #personal_pay:not(:has(input[name="pp_settle_case"])) #display_pay_button .btn_submit { display:none; }

/* 연락처 안내 (결제하시는 분 휴대폰·이메일은 공개되지 않음) */
#forderform .pesonal td.fs-pp-notice,
#m_pv_sod_frm td.fs-pp-notice { padding-top:12px !important; color:#999 !important; font-size:.8125rem !important; font-weight:400 !important; line-height:1.5; }