/* ═══════════════════════════════════════════════════════════════
   품앗히 홈 ⇄ 골라주세요 ⇄ 수다방 — 옆으로 넘기기 (pvx) · build 20260926vs4 · css vs7(탭 밑줄 = 더블유포지션 효과 2px · 늘 하나 · 글자 아래 7px · VS 딱지 뺌) · 오름히
   9/23 대표님 기획: "인스타그램처럼 홈에서 왼쪽·오른쪽으로 밀면 화면이 바뀌는 기능 — vs 페이지"
   · 위쪽 탭 [홈 | 골라주세요] — 헤더 바로 아래에 붙어 따라온다 (홈·골라주세요 첫 화면에만)
   · 폰: 옆으로 밀면 골라주세요 화면(.pvx-pane)이 손가락을 따라 넘어온다 — pvx.js
   · PC: 탭을 눌러 이동 (지원 브라우저는 옆으로 미끄러지는 전환)
   ═══════════════════════════════════════════════════════════════ */

/* ── 위쪽 탭 ──
   사이트 공통 규칙(main > * 에 1180px 기둥·좌우 14/16px)을 풀어 배경은 화면 끝까지, 글자는 로고 선에 맞춘다.
   (홈은 v39.css 의 html,body{overflow-x:hidden} 때문에 헤더와 함께 위로 지나가고,
    /vs 에서는 헤더 바로 아래에 붙어 따라온다 — 헤더가 하는 그대로) */
.pvx-tabs{max-width:none !important;margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important;box-sizing:border-box}
.pvx-tabs{position:sticky;top:var(--pvx-hd,58px);z-index:150;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid #F4E7F0;
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
.pvx-in{position:relative;display:flex;align-items:stretch;gap:24px;max-width:1180px;height:46px;margin:0 auto;padding:0 14px;box-sizing:border-box}
.pvx-t{position:relative;display:inline-flex;align-items:center;gap:5px;height:100%;padding:0 2px;
  font-size:15.5px;font-weight:700;letter-spacing:-.03em;color:#8E8995 !important;text-decoration:none !important;
  white-space:nowrap;transition:color .2s}
.pvx-t.pvx-on{color:#241F2A !important;font-weight:800}
.pvx-t:focus-visible{outline:3px solid rgba(255,46,147,.5);outline-offset:-3px;border-radius:10px}
/* 수다방 새 글 표시 */
.pvx-new{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:#DE1479;color:#fff;
  font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:11px;font-weight:800;line-height:1}
.pvx-new[hidden]{display:none}
/* '골라주세요' 옆 VS 딱지는 뺐다 (vs6 · 2026-09-26 대표님 지시 — 탭 이름은 '골라주세요'만). 옛 화면이 남아 있어도 안 보이게 */
.pvx-vs{display:none !important}
/* 밑줄 — 더블유포지션 헤더 메뉴 효과 그대로 (pumathi 레이아웃 .main_menu a::after : 2px 선) · vs5→vs6 2026-09-26 대표님 지시
   탭마다 자기 밑줄: 켜지면(또는 PC 에서 마우스를 올리면) 왼쪽에서 오른쪽으로 그어지고, 꺼질 땐 오른쪽 끝으로 빠진다.
   0.5초 · cubic-bezier(.8,0,.2,1) — 천천히 시작해 가운데서 빠르게, 끝에서 부드럽게.
   vs6: 굵기 3px → 2px (업체 원본 굵기) · 밑줄은 언제나 하나 — PC 에서 다른 탭에 마우스를 올리면 켜진 탭 밑줄은
        오른쪽으로 빠지고 올린 탭에 그어진다. 마우스를 떼면 켜진 탭에 다시 그어진다.
   vs7: 밑줄 자리 — 탭 줄 맨 아래(글자와 15px 남짓 떨어짐)에서 글자 바로 밑으로 올림. 글자 아래 약 7px
        (업체 원본 간격 6.5px 과 같은 느낌, 글자에 붙지는 않게). 글자가 탭 가운데에 있으므로 가운데 + 14px 자리.
   (예전 '탭 사이를 미끄러지는 밑줄 하나(.pvx-ink)'는 쓰지 않는다 — pvx.js 는 그대로 두어도 된다) */
.pvx-t::after{content:"";position:absolute;left:0;right:0;top:calc(50% + 14px);height:2px;background:#FF2E93;pointer-events:none;
  transform:scale3d(0,1,1);transform-origin:100% 50%;transition:transform .5s cubic-bezier(.8,0,.2,1)}
.pvx-t.pvx-on::after{transform:scale3d(1,1,1);transform-origin:0% 50%}
@media (hover:hover) and (pointer:fine){
  .pvx-t:hover::after{transform:scale3d(1,1,1);transform-origin:0% 50%}
  .pvx-in:has(.pvx-t:hover) .pvx-t.pvx-on:not(:hover)::after{transform:scale3d(0,1,1);transform-origin:100% 50%}
}
@media (prefers-reduced-motion:reduce){ .pvx-t::after{transition:none} }
.pvx-ink{display:none !important}
/* 처음 온 폰에만 — "옆으로 밀어도 넘어가요" (한 번 넘기면 다시 안 나옴) */
.pvx-hint{display:none;margin-left:auto;align-self:center;align-items:center;gap:5px;font-size:12.5px;font-weight:600;letter-spacing:-.02em;color:#A39DAB;white-space:nowrap}
.pvx-hint svg{width:15px;height:15px;flex:0 0 auto;animation:pvxNudge 1.6s ease-in-out infinite}
.pvx-showhint .pvx-hint{display:inline-flex}
@keyframes pvxNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
@media(min-width:1024px){
  .pvx-tabs{top:var(--pvx-hd,71px)}
  .pvx-in{height:50px;gap:28px;padding:0 14px}
  .pvx-t{font-size:16px}
}
@media(max-width:374px){ .pvx-in{gap:18px} .pvx-hint{font-size:12px} }
/* 탭이 셋(홈·골라주세요·수다방)이면 좁은 폰에선 안내를 짧게 — 360px 남짓은 "밀어 보세요", 340px 아래는 화살표만 */
.pvx-hint-s{display:none}
@media(max-width:430px){ .pvx-in:has(.pvx-t[data-k="suda"]) .pvx-hint-l{display:none} .pvx-in:has(.pvx-t[data-k="suda"]) .pvx-hint-s{display:inline} }
@media(max-width:340px){ .pvx-in:has(.pvx-t[data-k="suda"]) .pvx-hint-s{display:none} }
/* 히어로는 '헤더 아래 첫 화면을 꽉 채우게' 높이를 잡아 두었다(v40cf.css: 100svh - 120px / 폰 96px).
   탭 줄(PC 51px · 폰 47px)이 생긴 만큼 빼서 첫 화면 구성이 전과 같게 — 히어로 파일은 건드리지 않는다 */
.pvx-tabs ~ .cf{height:calc(100vh - 167px);height:calc(100svh - 167px)}
@media (min-width:1024px){ .pvx-tabs ~ .cf{height:calc(100vh - 171px);height:calc(100svh - 171px)} }
@media (max-width:760px){ .pvx-tabs ~ .cf{height:calc(100vh - 143px);height:calc(100svh - 143px)} }
@media (pointer:coarse) and (orientation:portrait){
  .pvx-tabs ~ .cf.cf-js{height:min(166.667vw,calc(100vh - 143px));height:min(166.667vw,calc(100svh - 143px))}
}
@media (pointer:coarse) and (orientation:landscape){
  .pvx-tabs ~ .cf.cf-js{height:min(50vw,calc(100vh - 167px));height:min(50vw,calc(100svh - 167px))}
}
@media (pointer:coarse) and (orientation:landscape) and (min-width:1024px){
  .pvx-tabs ~ .cf.cf-js{height:min(50vw,calc(100vh - 171px));height:min(50vw,calc(100svh - 171px))}
}

/* ── 폰: 옆 화면 (골라주세요) ── */
.pvx-pane{position:fixed;left:0;right:0;bottom:0;top:var(--pvx-top,0px);z-index:140;
  background:#fff;transform:translate3d(100%,0,0);will-change:transform;
  box-shadow:-14px 0 34px -22px rgba(36,31,42,.45);outline:0}
.pvx-pane[hidden],.pvx-shade[hidden]{display:none !important}
.pvx-scroll{position:absolute;left:0;right:0;top:0;bottom:0;overflow-x:hidden;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pvx-shade{position:fixed;left:0;right:0;bottom:0;top:var(--pvx-top,0px);z-index:139;background:#241F2A;opacity:0;pointer-events:none;will-change:opacity}
.pvx-open .pvx-shade{pointer-events:auto}
/* 옆 화면이 열려 있는 동안: 뒤(홈)는 스크롤·후기 쓰기 단추 멈춤 */
html.pvx-open body{overflow:hidden !important}
html.pvx-open .pv-fab{opacity:0 !important;pointer-events:none !important}
html.pvx-drag,html.pvx-drag *{-webkit-user-select:none !important;user-select:none !important}
html.pvx-drag main .vs-fab{opacity:0 !important;transition:none !important}
/* 옆 화면 속 수다방 — 수다방이 자기 기둥(680px)을 쓴다 */
.pvx-scroll > .pvsuda{min-height:100%}
.pvx-pane[data-pvx-k="suda"]{background:#fff}
/* 옆 화면 속 골라주세요 — /vs 페이지와 같은 기둥(사이트 공통 main > * 규칙과 같은 값) */
.pvx-scroll > .pvvs{min-height:100%;max-width:1180px;margin-left:auto;margin-right:auto;box-sizing:border-box;padding-left:14px;padding-right:14px}
@media(max-width:760px){ .pvx-scroll > .pvvs{padding-left:16px;padding-right:16px} }
/* 옆 화면 안의 '고민 올리기' 단추(position:fixed)는 옆 화면(transform)을 기준으로 오른쪽 아래에 붙는다 */
/* 홈을 내려 본 상태(위 탭이 안 보일 때)에서 넘기면 옆 화면이 맨 위부터 덮고, 자기 탭을 단다 */
.pvx-pane > .pvx-tabs{display:none;position:absolute !important;left:0;right:0;top:0;z-index:2}
.pvx-pane.pvx-full > .pvx-tabs{display:block}
.pvx-pane.pvx-full > .pvx-scroll{top:var(--pvx-th,47px)}

/* 불러오는 동안 보이는 뼈대 */
.pvx-skel{max-width:1180px;margin:0 auto;padding:22px 18px 40px}
.pvx-sk-hand{font-family:'Nanum Pen Script',cursive;color:#FF2E93;font-size:23px;line-height:1.1}
.pvx-sk-tt{margin-top:2px;font-size:28px;font-weight:900;letter-spacing:-.045em;color:#241F2A;line-height:1.2}
.pvx-sk-line{height:13px;border-radius:7px;margin-top:10px;width:82%}
.pvx-sk-line.s{width:56%;margin-top:8px}
.pvx-sk-today{height:212px;border-radius:22px;margin-top:18px;background:linear-gradient(135deg,#FF2E93 0%,#FF5FAE 55%,#FF8AC4 100%);opacity:.9;position:relative;overflow:hidden}
.pvx-sk-today::after{content:"";position:absolute;left:18px;right:18px;bottom:18px;height:92px;border-radius:16px;background:rgba(255,255,255,.9)}
.pvx-sk-card{height:150px;border-radius:22px;margin-top:14px}
.pvx-sk-line,.pvx-sk-card{background:linear-gradient(90deg,#F6F1F5 0%,#FBF8FA 45%,#F6F1F5 90%);background-size:220% 100%;animation:pvxShim 1.3s linear infinite}
@keyframes pvxShim{from{background-position:120% 0}to{background-position:-100% 0}}
/* 수다방 뼈대 — 영수증 쪽지 + 카드 */
.pvx-skel-sd{max-width:680px}
.pvx-sk-rc{height:170px;border-radius:10px 10px 0 0;margin-top:18px;background:#FBFAF6;box-shadow:0 8px 14px -6px rgba(36,31,42,.12)}
.pvx-sk-card.s{height:128px;border-radius:18px;margin-top:12px}
.pvx-sk-err{display:none;margin-top:18px;font-size:14px;color:#6B6674}
.pvx-sk-err a{color:#FF2E93;font-weight:800;text-decoration:underline}
.pvx-fail .pvx-sk-err{display:block}

@media (prefers-reduced-motion: reduce){
  .pvx-hint svg,.pvx-sk-line,.pvx-sk-card{animation:none}
}

/* ── PC 등: 탭으로 페이지를 옮길 때 옆으로 미끄러지는 전환 (크롬·엣지·사파리 18.2+) ──
   @view-transition 은 홈·골라주세요 첫 화면의 <head> 에만 들어간다 (다른 화면으로 갈 땐 전환 없음) */
header{view-transition-name:pvx-hd}
.pvx-tabs{view-transition-name:pvx-tabs}
.pvx-pane .pvx-tabs{view-transition-name:none}
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:cubic-bezier(.22,.8,.22,1);animation-fill-mode:both}
  ::view-transition-old(root){animation-name:pvxOutL}
  ::view-transition-new(root){animation-name:pvxInR}
  html:active-view-transition-type(pvx-back)::view-transition-old(root){animation-name:pvxOutR}
  html:active-view-transition-type(pvx-back)::view-transition-new(root){animation-name:pvxInL}
}
@keyframes pvxOutL{to{transform:translateX(-5%);opacity:0}}
@keyframes pvxInR{from{transform:translateX(5%);opacity:0}}
@keyframes pvxOutR{to{transform:translateX(5%);opacity:0}}
@keyframes pvxInL{from{transform:translateX(-5%);opacity:0}}