/* ===========================
   프로필 보기 (/social/profile.php)
   =========================== */
:root{
  --pf-blue:#3b82f6; --pf-yellow:#f7c948; --pf-pink:#f800ff; --pf-ink:#111827; --pf-sub:#6b7280;
  --pf-line:#e5e7eb; --pf-bg:#ffffff; --pf-red:#ef4444;
}
.pf{color:var(--pf-ink); background:var(--pf-bg); line-height:1.45;}
.pf a{color:inherit; text-decoration:none}
.pf img{max-width:100%; display:block}



/* Layout */

.pf-wrap{max-width:1100px; margin:0 auto; padding-bottom:132px;}
.pf-hero{position:relative; height:120vw; min-height:320px; max-height:750px; overflow:hidden; border-radius: 16px;}
.pf-hero>img{width:100%; height:100%; object-fit:cover; object-position:center}
.pf-hero .swiper-pagination-bullet{background:#FFF !important;}
.pf-hero .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{bottom: 10px !important;}

/* 상단/하단 어두운 그라데이션 */
.pf-hero::before{
  content:""; position:absolute; left:0; right:0; top:0; height:clamp(96px, 22vw, 220px);
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,0) 100%);
  pointer-events:none; z-index:1;
}
.pf-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:200px;
  background:linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%);
  pointer-events:none; z-index:1;
}

/* 히어로 상단 UI */
.pf-hero-ui{
  position:absolute; z-index:2;
  top:calc(max(8px, env(safe-area-inset-top))); left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; pointer-events:none;
}
.pf-hero-ui-right{display:flex; align-items:center; gap:6px; pointer-events:none;}
.pf-hero-ui-right .pf-ico-btn{pointer-events:auto;}

/* 공통 아이콘 버튼(항상 흰색) */
.pf-ico-btn{
  pointer-events:auto; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:transparent; border:none; color:#fff !important;
}
.pf-ico-btn:active{opacity:.9}
.pf-ico-btn svg{width:22px; height:22px; display:block}

/* ===== 썸네일 바: 좌 스크롤 / 우 고정 ===== */
.pf-thumbs{position:absolute; left:0; right:0; bottom:12px; padding:0 12px; z-index:2; overflow:visible; display:none;}
.pf-thumbs-row{display:flex; align-items:center; gap:8px;}
.pf-thumbs-scroll{
  flex:1 1 auto; display:flex; gap:8px; overflow:auto; scrollbar-width:none; min-width:0;
  touch-action:pan-y; -webkit-user-select:none; user-select:none;
}
.pf-thumbs-scroll::-webkit-scrollbar{display:none}
.pf-thumbs-fixed{flex:0 0 auto; display:flex; gap:8px;}
.is-reorder .pf-thumbs{display:block;}
.is-reorder .pf-thumbs-scroll{touch-action:none;}

/* 썸네일 셀 (메인화면용) */
.pf-thumb{
  position:relative;
  flex:0 0 auto; width:52px; height:52px; border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.9); background:rgba(0,0,0,.18);
}
.pf-thumb img{width:100%; height:100%; object-fit:cover; object-position:center}

/* 삭제 뱃지 */
.pf-del-badge{
  position:absolute; top:2px; right:2px;
  width:18px; height:18px; border-radius:999px; border:none;
  display:none; align-items:center; justify-content:center;
  background:var(--pf-red); color:#fff; font-size:9px; line-height:1;
  box-shadow:0 1px 4px rgba(0,0,0,.25); z-index:5;
}
.is-reorder .pf-del-badge{display:flex;}
.pf-del-badge:active{transform:scale(.98);}

/* 고정 영역 버튼 */
.pf-thumb--add, .pf-thumb--sort, .pf-thumb--save{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:10px; border:1px solid rgba(255,255,255,.9); color:#fff;
}
.pf-thumb--add svg, .pf-thumb--sort svg{width:22px; height:22px; display:block;}
.pf-thumb--add:active{opacity:.9}
.pf-thumb--add:focus-visible,
.pf-thumb--sort:focus-visible,
.pf-thumb--save:focus-visible{outline:2px solid var(--pf-blue); outline-offset:2px; border-radius:10px;}
.pf-thumb--sort{ background:rgba(0,0,0,.18); }
.is-reorder .pf-thumb--sort{ background:var(--pf-yellow); color:#111; }
.pf-thumb--save{ background:var(--pf-blue); color:#fff; font-size:14px; }
.pf-thumb--save[hidden]{display:none !important;}

/* 정렬 피드백 */
.pf-thumb[data-thumb="item"]{ cursor:default; }
.is-reorder .pf-thumb[data-thumb="item"]{ cursor:grab; }
.is-reorder .pf-thumb[data-thumb="item"].dragging{ opacity:.6; cursor:grabbing; }

/* 더보기 메뉴 */
.pf-menu{
  position:absolute; z-index:3; top:calc(max(8px, env(safe-area-inset-top)) + 50px); right:10px;
  min-width:180px; background:#fff; border:1px solid var(--pf-line); border-radius:12px; display:none;
}
.pf-menu.is-open{display:block;}
.pf-menu[hidden]{display:none !important;}
.pf-menu a{
  display:flex; align-items:center; gap:10px; padding:12px 14px; font-size:14px;
  text-decoration:none; border-bottom:1px solid var(--pf-line); color:var(--pf-ink);
}
.pf-menu a:last-child{border-bottom:0}
.pf-menu a:focus-visible{outline:2px solid var(--pf-blue); outline-offset:2px; border-radius:6px}

/* 섹션 공통 */
.pf-section{padding:18px 2px; border-top:1px solid var(--pf-line);}
.pf-section.info{}
.pf-section.thumbnail{padding:0px;}
.pf-section .pf-sec-box{background:#f7f7f7; border-radius:10px; padding:10px; margin-top: 15px;}
.pf-section .pf-sec-title{font-size:18px; margin-bottom:12px; padding: 10px;}

/* 정보 섹션 상단: 좋아요만 */
.pf-topline{display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:8px; padding-right: 20px;}
.pf-title{font-size:28px; margin:0;}
.pf-age-inline{font-size:24px; color:var(--pf-sub); margin-left: 5px; line-height:1;}

/* 하트 버튼 */
.pf-like-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:none; background:transparent; color:#2b2b2b;
  border-radius:10px;
}
.pf-like-btn:active{opacity:.9}
.pf-like-btn svg{width:32px; height:32px; display:block}
.pf-like-btn.is-liked{color:#e11d48}

/* 정보 칩 */
.pf-chips{}
.pf-chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--pf-line); border-radius:999px; padding:8px 12px; background:#fff; font-size:18px; margin:3px;}
.pf-chip .pf-k{color:var(--pf-sub)}

/* 자기소개 */
.pf-bio{}
.pf-bio-text{white-space:pre-wrap; word-break:break-word; font-size:16px; color:#111; padding: 0 10px 10px;}
.pf-bio-empty{color:var(--pf-sub)}
.pf-bio-edit{display:inline-block; margin-top:15px; font-size:13px; color:var(--pf-blue); text-decoration:none; padding:5px 10px; border-radius:5px; background:#f7f7f7;}
.pf-bio-edit:active{opacity:.9}
.pf-bio-countwrap{font-size:12px; color:var(--pf-sub); text-align:right}

/* 하단 고정 버튼(채팅) */
.pf-fixed{position:fixed; left:0; right:0; bottom:0; padding-bottom:20px;}
.pf-actions{margin:0 auto; padding:12px max(16px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right)); text-align:center;}
.pf-act{display:inline-flex; align-items:center; justify-content:center; height:54px; border-radius:27px; font-size:16px; padding:0 24px; gap: 10px; box-shadow:0px 5px 12px rgba(0,0,0,.2);}
.pf-act--primary{background:var(--pf-blue); color:#fff !important;}
.pf-act--send_chat{background:var(--pf-pink); color:#fff !important;}
.pf-act:active{opacity:.9}
.pf-act .icon {padding-top: 5px;}

/* Desktop */
@media (min-width:960px){
  .pf-wrap{padding:0 0 142px}
  .pf-grid{display:grid; gap:24px; align-items:start}
  .pf-section{padding:18px 0}
  .pf-hero{position:sticky; top:-630px;}
}

/* Mobile */
@media (max-width:768px){
  main#main {padding: 0 !important;}
  .pf-hero{border-radius: 0;}
  .pf-section.info{padding:18px 10px;}
  .pf-fixed{padding-bottom: 56px;}
}

/* 모달 */
.pf-modal{position:fixed; inset:0; z-index:60; display:none;}
.pf-modal.is-open{display:block;}
.pf-modal[hidden]{display:none!important;}
.pf-modal .pf-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45);}
.pf-modal .pf-sheet{
  position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:16px 16px 0 0; border:1px solid var(--pf-line);
  padding:16px clamp(14px, 3vw, 20px) max(16px, env(safe-area-inset-bottom)); max-height:80vh; overflow:auto; box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.pf-modal .pf-sheet-header{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;}
.pf-modal .pf-sheet-title{font-size:18px; margin:0;}
.pf-modal .pf-close-btn{background:transparent; border:none; width:36px; height:36px; border-radius:10px; color:#111;}
.pf-modal .pf-close-btn:focus-visible{outline:2px solid var(--pf-blue); outline-offset:2px;}
.pf-form{display:grid; gap:12px;}
.pf-field{display:grid; gap:6px;}
.pf-label{font-size:14px; color:#374151;}
.pf-input, .pf-select, .pf-form textarea{
  width:100%; box-sizing:border-box; min-height:42px; padding:10px 12px;
  border:1px solid var(--pf-line); border-radius:10px; font-size:14px; color:#111; background:#fff;
}
.pf-input[type="date"]{padding:0 10px;}
.pf-row-2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pf-modal-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px;}
.pf-modal-actions .pf-act{height:48px; border-radius:12px;}
@media (min-width:960px){
  .pf-modal .pf-sheet{left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%, -50%); width:min(560px, 92vw); max-height:80vh; border-radius:16px; padding:20px;}
}

/* === 모달 내 사진 그리드 (3x2) === */
.pf-photo-field{margin-bottom:4px;}
.pf-modal-thumbs{
  margin-top:4px;
  padding:10px;
  border-radius:10px;
  background:#f9fafb;
}
.pf-modal-thumbs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pf-modal-thumbs-grid .pf-thumb {
  width: 100%;
  aspect-ratio: 1/1;
  height: auto;
  border-color: #ddd;
  background: #fff;
  cursor: grab;
  /* 브라우저 기본 동작 차단 (드래그시 팝업/저장 방지) */
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
}
.pf-modal-thumbs-grid .pf-thumb.pf-placeholder {
  cursor: pointer;
  background: #f0f0f0;
  border: 1px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}
.pf-modal-thumbs-grid .pf-thumb.pf-placeholder svg {
  width: 24px; height: 24px;
}
.pf-modal-thumbs-grid .pf-thumb.dragging {
  opacity: 0.3;
}
.pf-modal-thumbs-grid .pf-del-badge {
  display: flex; /* 항상 표시 */
  width: 22px; height: 22px;
  top: -5px; right: -5px;
  background: #ef4444;
  border: 2px solid #fff;
}
/* 이미지 드래그 방지 */
.pf-img-no-drag {
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.pf-photo-help{
  margin:6px 2px 0;
  font-size:12px;
  color:var(--pf-sub);
}

/* === 히어로 오버레이(닉네임/나이 + 한줄 정보) === */
.pf-hero-meta{
  position:absolute; left:12px; bottom:16px; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:8px 10px; border-radius:12px; color:#fff;
}
.pf-meta-top{display:flex; align-items:center; gap:15px;}
.pf-hero-name{font-size:34px; margin:0;}
.pf-hero-age{font-size:26px; opacity:.9;}
.pf-hero-attrs{display:flex; align-items:center; gap:20px; white-space:nowrap;}
.pf-attr{display:inline-flex; align-items:center; gap:6px; font-size:16px;}
.pf-attr svg{width:30px; height:30px; display:block; color:#fff;}
.pf-meta-top img.pf-gender-icon { width: 30px; height: 30px; }

/* 팔로우 카운트 배지 */
.pf-counters{display:flex; align-items:center; gap:8px; margin-right:auto;flex-grow: 1;}
.pf-count-badge{
  display:flex; flex-direction: column; align-items:center; gap:6px; flex-grow: 1;
  padding:6px 10px; font-size:14px;
}
.pf-count-k{color:var(--pf-sub);}
.pf-count-v{font-size:22px;}

/* ===== 리빌더 프로필 사진(닉네임/나이 옆) ===== */
.rb_prof_info_img{display:inline-flex; align-items:center; gap:8px; align-self:center;}
.rb_prof_info_img #prof_image_ch img{
  width:48px; height:48px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.95); box-shadow:0 1px 4px rgba(0,0,0,.35);
}
#prof_ch_btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border:0; border-radius:10px;
  background:#3a3a3a; cursor:pointer;
}
#prof_ch_btn:active{transform:scale(.98);}


/* ===========================
   프로필 생성 (/social/profile.create.php)
   =========================== */
:root{
  --pcr-ink:#111111; --pcr-sub:#6b7280; --pcr-line:#E5E7EB; --pcr-bg:#FFFFFF; --pcr-blue:#4F7CF8; --pcr-danger:#EF4444;
}

#pcr-root{
  background:var(--pcr-bg); color:var(--pcr-ink);
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  min-height:100vh; font-family:-apple-system,system-ui,Segoe UI,Roboto,Helvetica,Arial;
}
@supports(height:100dvh){ #pcr-root{ min-height:100dvh; } }
@supports(height:100svh){ #pcr-root{ min-height:100svh; } }
#pcr-root *{ box-sizing:border-box }
#pcr-root a{ color:inherit; text-decoration:none }

/* 전역 .pc / .mobile 환경에서도 입력 가능 보장 */
#pcr-root, #pcr-root * { pointer-events:auto !important; }
#pcr-root input, #pcr-root textarea, #pcr-root select { user-select:text !important; -webkit-user-select:text !important; }

/* ===== 상단 타이틀바 (Step1/2에서만 보임) ===== */
.pcr-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:#fff; border-bottom:1px solid var(--pcr-line);
}
.pcr-hback{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; }
.pcr-hback:active{ transform:translateY(1px) }
.pcr-htitle{ font-size:18px; margin:0; }

/* 컨테이너 */
.pcr-wrap{ max-width:980px; margin:0 auto; padding:8px 0 80px }

/* ====== Step 0: 온보딩 (풀스크린) ====== */
.pcr-onb{ position:fixed; inset:0; z-index:60; overflow:hidden; color:#fff; }
.pcr-onb-bg{ position:absolute; inset:-6% -6% -6% -6%; overflow:hidden; z-index:0; }
.pcr-onb-bg img{
  position:absolute; left:50%; top:50%; width:120%; height:120%;
  object-fit:cover; transform:translate3d(-50%,-50%,0) scale(1.06);
  transition:transform 9s ease-in-out; will-change:transform;
  filter:saturate(1.05) contrast(1.03);
}
.pcr-onb-shade{ position:absolute; inset:0; z-index:1;
  background: radial-gradient(120% 100% at 80% 70%, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.65) 100%);
}
.pcr-onb-back{
  position:absolute; z-index:3;
  top:calc(12px + env(safe-area-inset-top)); left:calc(10px + env(safe-area-inset-left));
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(0,0,0,.25); border-radius:12px; backdrop-filter: blur(2px);
}
.pcr-onb-in{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:0 18px; }
.pcr-onb-head{ margin-bottom:96px; max-width:680px; padding:0 4px; }
.pcr-onb-title{ font-weight:800; letter-spacing:-.02em; line-height:1.05; margin:0 0 12px; }
.pcr-onb-title .l1{ font-size:36px; } .pcr-onb-title .l2{ font-size:28px; opacity:.95; } .pcr-onb-title .l3{ font-size:28px; color:#BFD1FF; }
@media (min-width:480px){
  .pcr-onb-title .l1{ font-size:44px; } .pcr-onb-title .l2{ font-size:32px; } .pcr-onb-title .l3{ font-size:32px; }
}
.pcr-onb-sub{ font-size:14px; opacity:.9; margin:0 0 18px; }

/* PC에서 온보딩 텍스트 상단 중앙 */
@media (min-width:960px){
  .pcr-onb-in{ justify-content:flex-start; align-items:center; padding-top:10vh; }
  .pcr-onb-head{ margin-bottom:0; text-align:center; }
  .pcr-onb-title, .pcr-onb-sub{ text-align:center; }
}

.pcr-onb-cta{
  position:absolute; left:16px; right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex; justify-content:center;
}
.pcr-bigbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; max-width:520px; height:54px; border-radius:16px;
  background:var(--pcr-blue); color:#fff; font-size:16px; border:0;
  box-shadow:0 8px 24px rgba(79,124,248,.35);
}
.pcr-bigbtn:active{ transform:translateY(1px) }

/* 섹션 공통 */
.pcr-sect-hd{ padding:10px 16px 6px; font-size:12px; color:#9CA3AF }
.pcr-card{ border-top:1px solid var(--pcr-line); border-bottom:1px solid var(--pcr-line); background:#fff }
.pcr-body{ padding:12px 16px }

/* 약관 */
.pcr-terms{ height:180px; overflow:auto; border:1px solid var(--pcr-line); border-radius:8px; margin-bottom: 10px; padding:12px; background:#FAFAFA; color:#222 }
.pcr-chk{ display:flex; gap:8px; align-items:center; margin-top:12px }

/* 모바일 리스트 — 기억값 반영 */
.pcr-list{ background:#fff; border-top:1px solid var(--pcr-line); border-bottom:1px solid var(--pcr-line) }
.pcr-cell{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-top:1px solid var(--pcr-line); background:#fff; width:100%; }
.pcr-cell:first-child{ border-top:none }
.pcr-k{ flex:1 1 auto; font-size:15px; min-width:0; text-align:left; }
.pcr-right{ flex:0 0 auto; display:flex; align-items:center; gap:6px; margin-left:auto; }
.pcr-v{ flex:0 0 auto; text-align:right; font-size:15px; color:#9CA3AF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcr-v.on{ color:var(--pcr-ink) }
.pcr-v.link{ color:var(--pcr-blue) }
.pcr-chev{ flex:0 0 auto; width:18px; height:18px; opacity:.35 }

/* 버튼 */
.pcr-actions{ padding:12px 16px }
.pcr-btn{ width:100%; height:44px; border:1px solid #D1D5DB; background:#fff; border-radius:8px; font-size:15px }
.pcr-btn--pri{ background:var(--pcr-blue); border-color:var(--pcr-blue); color:#fff }
.pcr-btn:active{ transform:translateY(1px) }

/* 동의 전/후 비주얼 */
#pcr-root .pcr-btn--pri[disabled]{
  background:#E5E7EB !important; border-color:#E5E7EB !important; color:#9CA3AF !important;
  box-shadow:none !important; cursor:not-allowed !important; opacity:1 !important;
}
#pcr-root .pcr-btn--pri:not([disabled]){
  background:var(--pcr-blue) !important; border-color:var(--pcr-blue) !important; color:#fff !important;
}

/* 에러 */
.pcr-err{ display:none; color:var(--pcr-danger); padding:8px 16px 0; font-size:13px }
.pcr-err.on{ display:block }

/* ===== 프로필 사진 업로드 + 정렬 (3x2 고정 그리드) ===== */
.pcr-ph-card { border-bottom:1px solid var(--pcr-line); background:#fff; }
.pcr-ph-hd { display:flex; align-items:center; justify-content:space-between; padding:12px 16px 4px; }
.pcr-ph-title { font-size:14px; color:#111; font-weight:600; }
.pcr-ph-help  { font-size:12px; color:#9CA3AF; padding:6px 16px 12px; }

/* 그리드 레이아웃 수정: 3열 고정 */
.pcr-ph-grid{
  display:grid; gap:8px; padding:0 16px 12px;
  grid-template-columns: repeat(3, 1fr);
  align-items:stretch;
}

/* 아이템 스타일: 기존 유지 + 플레이스홀더 지원 */
.pcr-ph-item {
  position:relative; width:100%; aspect-ratio:1/1; border-radius:12px;
  border:1px solid var(--pcr-line); background:#F8FAFC; overflow:hidden;
  cursor: grab;
  /* 브라우저 기본 드래그/팝업 차단 */
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
}
.pcr-ph-item.dragging { opacity:0.3; }

/* 플레이스홀더 스타일 */
.pcr-ph-item.pcr-placeholder {
  cursor: pointer;
  background: #EEF2FF;
  border: 1px dashed #C7D2FE;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4B5563;
}
.pcr-ph-item.pcr-placeholder svg {
  width: 24px; height: 24px;
}

.pcr-ph-thumb{
  width:100%; height:100%; object-fit:cover; display:block;
  pointer-events: none; -webkit-user-drag: none; /* 이미지 드래그 방지 */
}

/* 삭제 뱃지 (생성 페이지용, 항상 표시하거나 필요시 조정) */
.pcr-del-badge {
  position:absolute; top:4px; right:4px;
  width:20px; height:20px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--pcr-danger); color:#fff; font-size:10px; line-height:1;
  box-shadow:0 1px 4px rgba(0,0,0,.25); z-index:5;
}

.pcr-ph-ghost{
  position:fixed; z-index:9990; width:120px; height:120px; pointer-events:none; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}

/* 바텀시트(모바일 입력) — 언더라인 입력 */
.pcr-modal{ position:fixed; inset:0; display:none!important; z-index:90 }
.pcr-modal.open{ display:block!important }
.pcr-dim{ position:absolute; inset:0; background:rgba(0,0,0,.2) }
.pcr-sheet{
  position:absolute; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--pcr-line);
  border-radius:12px 12px 0 0; padding:16px 16px 12px; max-height:78vh; overflow:auto
}
.pcr-sheet h3{ margin:0 0 10px; font-size:16px }
.pcr-row{ display:grid; gap:16px }
.pcr-uinput, .pcr-utext, .pcr-uselect{
  width:100% !important; background:transparent !important;
  border:none !important; border-bottom:1px solid #D1D5DB !important;
  padding:8px 0 !important; font-size:16px !important; color:#111 !important;
  outline:none !important; border-radius:0 !important;
}
.pcr-uinput:focus, .pcr-utext:focus, .pcr-uselect:focus{ border-bottom-color:var(--pcr-blue) !important; box-shadow:none !important; }
.pcr-utext{ min-height:80px !important; resize:vertical !important }

/* ===== 데스크탑 인라인 폼 ===== */
.pcr-desk-form{
  display:none; padding:8px 16px 16px; background:#fff;
  border-top:1px solid var(--pcr-line); border-bottom:1px solid var(--pcr-line);
  position:relative; z-index:6;
}
.pcr-df-grid{ display:grid; grid-template-columns:240px 1fr; gap:10px 18px; align-items:center; }
.pcr-df-lab{ font-size:14px; color:#111; }
.pcr-dinp, .pcr-dtext, .pcr-dselect{
  width:100% !important; background:transparent !important; border:none !important;
  border-bottom:1px solid #D1D5DB !important; padding:8px 0 !important;
  font-size:15px !important; color:#111 !important; outline:none !important; border-radius:0 !important;
}
.pcr-dinp:focus, .pcr-dtext:focus, .pcr-dselect:focus{ border-bottom-color:var(--pcr-blue) !important; }
.pcr-dtext{ min-height:84px !important; resize:vertical !important; }
.pcr-df-help{ color:var(--pcr-sub); font-size:12px; }

/* 반응형: 모바일=리스트, PC=인라인 */
@media (max-width:959.98px){
  .pcr-list{ display:block !important; position:relative; z-index:6; }
  .pcr-desk-form{ display:none !important; }
  .pf-modal .pf-sheet { padding-bottom: 80px; }
}
@media (min-width:960px){
  .pcr-list{ display:none; }
  .pcr-desk-form{ display:block; }
  .pcr-actions{ display:flex; gap:10px; justify-content:flex-end; }
  .pcr-btn{ width:auto; padding:0 16px; }
}

/* 섹션 토글 */
.pcr-fade{ animation:pcr-fade .15s ease both }
@keyframes pcr-fade{ from{opacity:0} to{opacity:1} }

#pcr-s0[aria-hidden="true"],
#pcr-s1[aria-hidden="true"],
#pcr-s2[aria-hidden="true"],
#pcr-s3[aria-hidden="true"]{
  display:none !important; pointer-events:none !important; visibility:hidden !important;
}
#pcr-s0[aria-hidden="true"]{ z-index:-1 !important; }
#pcr-s1, #pcr-s2, #pcr-s3{ position:relative; z-index:5; }

/* ===== Step 3: 완료 풀스크린(온보딩 스타일) ===== */
.pcr-done-screen{ position:fixed; inset:0; z-index:60; overflow:hidden; color:#fff; }
.pcr-done-bg{ position:absolute; inset:-6% -6% -6% -6%; z-index:0; overflow:hidden; }
.pcr-done-bg img{
  position:absolute; left:50%; top:50%; width:120%; height:120%; object-fit:cover;
  transform:translate3d(-50%,-50%,0) scale(1.06); transition:transform 9s ease-in-out; will-change:transform;
  filter:saturate(1.05) contrast(1.03);
}
.pcr-done-shade{ position:absolute; inset:0; z-index:1;
  background: radial-gradient(120% 100% at 20% 30%, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.7) 100%);
}
.pcr-done-in{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0 18px; }
.pcr-done-center{ display:grid; place-items:center; gap:14px; transform:translateY(-8vh); }
.pcr-done-cta{ position:absolute; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); display:flex; justify-content:center; }

/* 체크 애니메이션 */
.pcr-check{ width:112px; height:112px; display:block; }
.pcr-check .c{ fill:rgba(255,255,255,.08); stroke:#fff; stroke-width:4; stroke-linecap:round;
  stroke-dasharray:276; stroke-dashoffset:276; animation:pcr-draw .9s ease forwards .1s;
}
.pcr-check .t{ fill:none; stroke:#fff; stroke-width:6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:96; stroke-dashoffset:96; animation:pcr-draw .6s ease forwards .85s;
}
@keyframes pcr-draw{ to{ stroke-dashoffset:0; } }
.pcr-check-wrap{ position:relative; }
.pcr-check-wrap:after{
  content:""; position:absolute; inset:-16px; border-radius:999px; box-shadow:0 0 0 0 rgba(255,255,255,.25);
  animation:pcr-pulse 1.2s ease .9s 1 both;
}
@keyframes pcr-pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.25); } 100%{ box-shadow:0 0 0 28px rgba(255,255,255,0); } }
.pcr-check{ animation:pcr-pop .5s cubic-bezier(.2,.8,.2,1) .75s both; }
@keyframes pcr-pop{ 0%{ transform:scale(.92); } 100%{ transform:scale(1); } }

/* 완료 메시지: 체크 끝난 뒤 나타남 */
.pcr-done-msg{ 
  opacity:0; text-align:center; color:#fff; 
  animation:pcr-upfade .6s ease 1.6s both; /* ← 체크(1.45s) 이후 살짝 뒤에 */
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.pcr-done-msg .t1{ font-size:18px; font-weight:700; letter-spacing:-.01em; }
.pcr-done-msg .t2{ font-size:14px; opacity:.95; margin-top:4px; }
@media (min-width:960px){
  .pcr-done-msg .t1{ font-size:22px; }
  .pcr-done-msg .t2{ font-size:15px; }
}
@keyframes pcr-upfade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

/* === 완료 화면이 외부 스코프에 가려지지 않도록 강제 === */
#pcr-s3.pcr-show { display:block !important; }
.pcr-done-screen{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* 스켈레톤 애니메이션 */
@keyframes skeleton-glow {
    0% { background-color: #f2f2f2; }
    50% { background-color: #e0e0e0; }
    100% { background-color: #f2f2f2; }
}

.ubp-skeleton {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3열 그리드 기준 */
    gap: 10px;
    padding: 15px;
}

.ubp-skeleton-item {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    animation: skeleton-glow 1.5s infinite ease-in-out;
}