/* ═══════════════════════════════════════════════════════════
   TENA FILM — site v2
   깔(레이아웃) : lifewinner.co.kr 홈 실측 (2026-07-22 캡처)
   구조         : 뉴에피소드 / 감성·후기전시 : 버터필터 / 타이포 수치 : 뷰오브
   ═══════════════════════════════════════════════════════════ */
/* 글꼴 — optional 로 부른다. 첫 화면을 그린 뒤 늦게 도착하면 그 화면에선 바꾸지 않는다.
   (swap 이면 애플 기본글꼴로 먼저 그렸다가 프리텐다드로 확 바뀌며 화면 전체가 튄다) */
@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920; font-style:normal; font-display:optional;
  src:url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2');
}
:root{
  --bg:#FFFFFF; --surface:#F7F3F1; --surface-2:#FFFFFF;
  --line:#E9E2DF; --line-2:#161214;
  --ink:#161214; --ink-2:#6B5D60; --ink-3:#A79A9D;
  --on-ink:#FFFFFF;
  --accent:#C8103F; --accent-ink:#FFFFFF; --accent-soft:#FDECF0;
  --dark:#141011; --dark-2:#221B1D; --dark-line:#332A2C; --on-dark:#F6F1F0; --on-dark-2:#9C9092;
  --butter:#F7E9EC; --butter-ink:#8E0C2E;
  --radius:14px; --radius-sm:8px; --radius-pill:999px;
  --max:1180px; --pad:18px; --sect:70px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --fs-hero:clamp(28px,6.6vw,38px);
  --fs-h2:clamp(21px,4.4vw,30px);
  --ls-display:-0.035em; --ls-body:-0.02em; --ls-label:0.18em;
  --shadow:0 1px 2px rgba(22,18,20,.04),0 8px 24px -12px rgba(22,18,20,.14);
}
@media(min-width:768px){:root{--pad:40px;--sect:96px}}
@media(prefers-color-scheme:dark){
  :root{--bg:#141011;--surface:#1C1718;--surface-2:#201A1C;
    --line:#2F2729;--line-2:#F6F1F0;--ink:#F6F1F0;--ink-2:#A29698;--ink-3:#6E6264;
    --on-ink:#141011;--accent:#FF5B7F;--accent-ink:#1A1416;--accent-soft:#2A1A20;
    --dark:#0C0A0B;--dark-2:#1A1516;--dark-line:#2B2325;
    --butter:#2A1A20;--butter-ink:#FF8FA8;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.7);}
}
:root[data-theme="dark"]{--bg:#141011;--surface:#1C1718;--surface-2:#201A1C;
  --line:#2F2729;--line-2:#F6F1F0;--ink:#F6F1F0;--ink-2:#A29698;--ink-3:#6E6264;
  --on-ink:#141011;--accent:#FF5B7F;--accent-ink:#1A1416;--accent-soft:#2A1A20;
  --dark:#0C0A0B;--dark-2:#1A1516;--dark-line:#2B2325;
  --butter:#2A1A20;--butter-ink:#FF8FA8;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.7);}
:root[data-theme="light"]{--bg:#FFFFFF;--surface:#F7F3F1;--surface-2:#FFFFFF;
  --line:#E9E2DF;--line-2:#161214;--ink:#161214;--ink-2:#6B5D60;--ink-3:#A79A9D;
  --on-ink:#FFFFFF;--accent:#C8103F;--accent-ink:#FFFFFF;--accent-soft:#FDECF0;
  --dark:#141011;--dark-2:#221B1D;--dark-line:#332A2C;
  --butter:#F7E9EC;--butter-ink:#8E0C2E;
  --shadow:0 1px 2px rgba(22,18,20,.04),0 8px 24px -12px rgba(22,18,20,.14);}

*,*::before,*::after{box-sizing:border-box}
/* display를 주는 클래스가 hidden을 이겨버려서, 숨긴 게 안 숨겨졌다 */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:15px;line-height:1.72;letter-spacing:var(--ls-body);word-break:keep-all;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
@media(min-width:768px){body{font-size:16px}}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:var(--ls-display);line-height:1.25;text-wrap:balance}
h1{font-size:var(--fs-hero)} h2{font-size:var(--fs-h2)} h3{font-size:17px}
p{margin:0;color:var(--ink-2)}

/* ── 줄이 넘어가는 자리 (2026-08-17 사장 지적: "자연스러운 줄넘김이 덜 반영됐다") ──
   한국어는 낱말 가운데서 끊기면 읽는 속도가 뚝 떨어진다. 세 가지를 같이 건다.
     word-break:keep-all → 띄어쓰기 단위 안에서는 안 끊는다 (body에 이미 걸어뒀다)
     text-wrap:balance   → 제목은 줄 길이를 고르게 (위 h1~h4)
     text-wrap:pretty    → 본문은 마지막 줄에 낱말 하나만 덜렁 남는 걸 막는다
   ★pretty 가 본문에 안 걸려 있어서 여태 외톨이 낱말이 그대로 떨어지고 있었다. */
p, li, dd, dt, td, th, summary, figcaption, label,
.a, .lead, .sub, .note, .desc, .vs-foot, .tile span, .plist li{
  text-wrap:pretty; word-break:keep-all;
}
/* 주소·코드처럼 낱말 개념이 없는 것만 예외 */
code, kbd, .mono, [class*="mail"] input, input[type="email"]{ word-break:break-all; text-wrap:auto }
a{color:inherit;text-decoration:none}
img,canvas{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sect{padding-block:var(--sect)}
.stack{display:flex;flex-direction:column;gap:24px}
.label{font-family:var(--mono);font-size:11px;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--ink-3);font-weight:500}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tbd{background:var(--accent-soft);color:var(--accent);padding:1px 6px;border-radius:4px;font-weight:700}

/* ── 데모 배지 · 공지바 ─────────────────────── */
.demo{background:var(--ink);color:var(--on-ink);font-size:12px;text-align:center;
  padding:7px 14px;letter-spacing:-.01em}
.demo b{font-weight:700}
.topbar{background:var(--accent);color:var(--accent-ink);font-size:12.5px;font-weight:600;
  text-align:center;padding:9px 14px;letter-spacing:-.01em}

/* ── 헤더 (라이프위너 2단) ─────────────────── */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.nav1{display:flex;align-items:center;height:62px;gap:26px}
.menu{display:none;gap:24px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.menu a:hover{color:var(--ink)}
@media(min-width:880px){.menu{display:flex}}
.navend{margin-left:auto;display:flex;align-items:center;gap:9px}
.logo{font-weight:800;font-size:19px;letter-spacing:-.045em;white-space:nowrap}
.logo em{font-style:normal;color:var(--accent)}

.iconbtn{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);
  background:transparent;border-radius:var(--radius-pill);cursor:pointer;color:var(--ink);font-size:13px}
.iconbtn:hover{border-color:var(--line-2)}
/* ── 버튼 ─────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:var(--radius-pill);border:1px solid var(--accent);
  background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;
  letter-spacing:-.02em;cursor:pointer;transition:transform .12s ease,opacity .12s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px);opacity:.92}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--line-2)}
.btn--sm{padding:9px 17px;font-size:13.5px}
.btn--wide{width:100%}

/* ══ 1. 히어로 캐러셀 (라이프위너 검정 슬라이더) ══ */
.hero{background:var(--dark);padding-block:38px 46px;overflow:hidden}
.hero-grid{display:grid;gap:30px}
@media(min-width:980px){.hero-grid{grid-template-columns:352px 1fr;gap:44px;align-items:center}}
.hero-copy{display:flex;flex-direction:column;gap:16px;color:var(--on-dark)}
.hero-copy h1{color:var(--on-dark)}
.hero-copy p{color:var(--on-dark-2);font-size:14.5px}
.hero-copy .eyebrow{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.09);color:var(--on-dark);
  font-size:12.5px;font-weight:700;width:fit-content}
.hero-cta{display:flex;flex-wrap:wrap;gap:9px;margin-top:2px}
.btn--line{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.3)}
.btn--line:hover{border-color:var(--on-dark)}
.hero-note{font-size:12px;color:#7A6E70}
.hero-rail{overflow:hidden}
.slides{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 calc(100% - 52px);max-width:400px;scroll-snap-align:start}
@media(min-width:760px){.slide{flex:0 0 calc(50% - 7px);max-width:none}}
@media(min-width:980px){.slide{flex:0 0 300px;max-width:300px}}
.slide-in{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:3/4;background:#000}
.slide-in canvas{width:100%;height:100%;object-fit:cover}
.slide-in::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,.55) 100%)}
.slide-top,.slide-bot{position:absolute;left:18px;right:18px;z-index:2;color:#fff}
.slide-top{top:20px;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.82}
.slide-bot{bottom:24px}
.slide-bot .en{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3.2vw,29px);
  line-height:1.06;letter-spacing:-.015em;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.slide-bot .ko{margin-top:9px;font-size:13.5px;font-weight:700;letter-spacing:-.03em;opacity:.92}
.hero-ctl{display:flex;align-items:center;gap:10px;margin-top:15px;justify-content:center}
.hero-ctl .dots{margin:0 auto}
.hero-ctl .arrow{display:none}
.arrow{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:transparent;color:#fff;cursor:pointer;font-size:14px;display:grid;place-items:center}
.arrow:hover{background:rgba(255,255,255,.12)}
.dots{display:flex;gap:8px;padding:4px 0}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);
  cursor:pointer;transition:width .25s ease,background .25s ease}
.dots i.on{background:var(--accent);width:22px;border-radius:5px}
@media(min-width:760px){
  .hero-ctl{margin-top:18px;justify-content:flex-start}
  .hero-ctl .dots{margin:0 auto 0 0}
  .hero-ctl .arrow{display:grid;width:32px;height:32px}
}

/* ══ 2. 카테고리 타일 4개 (라이프위너 검정 타일) ══ */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);margin-top:34px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2)}
@media(min-width:860px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{padding:18px 20px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .16s ease}
.tile:nth-child(2n){border-right:0}
@media(min-width:860px){.tile{border-bottom:0}.tile:nth-child(2n){border-right:1px solid var(--line)}
  .tile:last-child{border-right:0}}
.tile:hover{background:var(--surface)}
.tile b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.035em}
.tile span{display:block;margin-top:5px;font-size:11.5px;line-height:1.55;color:var(--ink-3)}

/* ══ 3. 섹션 헤드 ══ */
.shead{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.shead h2{letter-spacing:-.04em}
.shead p{font-size:14px}
.shead.center{align-items:center;text-align:center}

/* ══ 4. 상품 카드 (라이프위너 BEST) ══ */
.pshelf{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;
  scrollbar-width:none;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
.pshelf::-webkit-scrollbar{display:none}
@media(min-width:1000px){
  .pshelf{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;overflow:visible;
    margin-inline:0;padding-inline:0}
  .pcard{flex:none}
}
.pcard{flex:0 0 210px;scroll-snap-align:start;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:var(--surface-2);transition:transform .16s ease,border-color .16s ease}
.pcard:hover{transform:translateY(-3px);border-color:var(--line-2)}
.pcard .im{position:relative;aspect-ratio:1/1;background:#000}
.pcard canvas{width:100%;height:100%;object-fit:cover}
.pbadge{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.94);color:#161214;
  border-radius:3px;padding:2px 8px;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.14em}
.pcard .body{padding:13px 14px 15px}
.pcard .nm{font-size:14.5px;font-weight:800;letter-spacing:-.035em;line-height:1.3}
.pcard .tags{margin-top:6px;font-size:10.5px;color:var(--ink-3);line-height:1.5}

/* ══ 5. 노란 배너 ══ */
.butter{background:var(--butter);border-radius:8px;padding:30px 24px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:6px}
@media(min-width:700px){.butter{padding:44px 40px}}
.butter b{font-size:clamp(20px,4vw,29px);font-weight:800;letter-spacing:-.045em;line-height:1.25;
  color:var(--butter-ink)}
.butter b i{font-style:normal;color:var(--ink)}
.butter .go{margin-top:12px;font-size:13.5px;font-weight:700;color:var(--butter-ink);
  display:inline-flex;align-items:center;gap:9px}
.butter .deco{position:absolute;right:-30px;top:50%;transform:translateY(-50%);
  width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.5);pointer-events:none}
.butter .deco2{position:absolute;right:38px;top:50%;transform:translateY(-50%);
  font-size:74px;pointer-events:none;line-height:1}
@media(max-width:699px){.butter .deco,.butter .deco2{display:none}}

/* ══ 6. 직접 해보기 (폰 데모) ══ */
.try{display:grid;gap:34px;align-items:center}
@media(min-width:900px){.try{grid-template-columns:.92fr 1.08fr;gap:52px}}
.phone{position:relative;width:100%;max-width:320px;margin-inline:auto;
  border-radius:34px;border:1px solid var(--line);background:var(--surface-2);
  padding:12px;box-shadow:var(--shadow)}
.phone-screen{position:relative;border-radius:24px;overflow:hidden;background:#000;aspect-ratio:3/4}
.phone-screen canvas{width:100%;height:100%;object-fit:cover;
  transition:filter .45s cubic-bezier(.2,.7,.3,1)}
.phone-tag{position:absolute;left:10px;top:10px;z-index:2;padding:5px 10px;border-radius:var(--radius-pill);
  background:rgba(0,0,0,.55);color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  backdrop-filter:blur(6px)}
.phone-detect{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;padding:10px 12px;
  border-radius:var(--radius-sm);background:rgba(0,0,0,.55);color:#fff;font-size:12.5px;font-weight:600;
  backdrop-filter:blur(6px);display:flex;align-items:center;gap:8px}
.pulse{width:7px;height:7px;border-radius:50%;background:#5BE39A;flex:none;
  box-shadow:0 0 0 0 rgba(91,227,154,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(91,227,154,0)}100%{box-shadow:0 0 0 0 rgba(91,227,154,0)}}
.filmrow-wrap{position:relative}
.filmrow-wrap::after{content:"";position:absolute;right:0;top:12px;bottom:4px;width:38px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--surface-2))}
.filmrow{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:none}
.filmrow::-webkit-scrollbar{display:none}
.fchip{flex:none;border:1px solid var(--line);background:transparent;border-radius:var(--radius-sm);
  padding:6px 7px 7px;cursor:pointer;transition:border-color .15s,transform .15s;min-width:64px}
.fchip:hover{transform:translateY(-2px)}
.fchip[aria-pressed="true"]{border-color:var(--line-2)}
.fchip .sw{display:block;height:26px;border-radius:5px;border:1px solid rgba(0,0,0,.06)}
.fchip .nm{display:block;margin-top:5px;font-size:9.5px;font-weight:700;color:var(--ink-2);
  letter-spacing:-.02em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60px}
.fchip[aria-pressed="true"] .nm{color:var(--ink)}

/* ── Before / After ── */
.ba{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:4/3;cursor:ew-resize;user-select:none;touch-action:none}
.ba canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--split,50%))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.16);z-index:3;pointer-events:none}
.ba-handle::after{content:"⇄";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:#fff;color:#161214;display:grid;place-items:center;
  font-size:15px;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.ba-tag{position:absolute;bottom:12px;z-index:2;padding:5px 11px;border-radius:var(--radius-pill);
  background:rgba(0,0,0,.55);color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  backdrop-filter:blur(6px)}
.ba-tag.l{left:12px} .ba-tag.r{right:12px}

/* ── 숫자 넉 줄 ── */
.kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(min-width:680px){.kpi{grid-template-columns:repeat(4,1fr)}}
.kpi>div{background:var(--bg);padding:18px 16px;display:flex;flex-direction:column;gap:6px}
.kpi dt{margin:0;font-size:11.5px;letter-spacing:.06em;color:var(--ink-3)}
.kpi dd{margin:0;font-size:22px;font-weight:800;letter-spacing:-.04em;color:var(--ink);
  font-variant-numeric:tabular-nums}

.planfoot{margin-top:11px;font-size:11.5px;color:var(--ink-3);line-height:1.6;text-align:center}

/* ── 값 비교 (「필터에 6만원?」에 대한 답) ── */
.costcmp{display:grid;gap:10px;margin:26px 0 10px}
@media(min-width:760px){.costcmp{grid-template-columns:repeat(3,1fr)}}
.costcmp>div{padding:18px 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);display:flex;flex-direction:column;gap:5px}
.costcmp>div.on{border-color:var(--accent);background:var(--accent-soft)}
.cc-l{font-size:12.5px;color:var(--ink-3)}
.costcmp b{font-size:20px;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.costcmp .on b{color:var(--accent)}
.cc-s{font-size:12px;color:var(--ink-2);line-height:1.6}
.costnote{text-align:center;font-size:11.5px;color:var(--ink-3);margin-bottom:22px}

/* ── 값을 먼저 보여주는 띠 ── */
.offerbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface)}
.ob-main{flex:1 1 300px;display:flex;flex-direction:column;gap:5px}
.ob-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3)}
.ob-main b{font-size:19px;letter-spacing:-.04em;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ob-price{color:var(--accent);font-size:24px;font-variant-numeric:tabular-nums}
.ob-sub{font-size:12.5px;color:var(--ink-3);letter-spacing:-.02em}
.ob-cta{display:flex;gap:8px;flex-wrap:wrap}
.ob-cta .btn{padding:12px 20px;font-size:14px}
@media(max-width:520px){.ob-cta{width:100%}.ob-cta .btn{flex:1}}

/* ── 잠긴 컷 안내 ── */
.fchip .lock{display:none;position:absolute;top:5px;right:6px;font-size:10px;opacity:.55}
.fchip{position:relative}
.fchip.locked .lock{display:block}
.fchip.locked .sw{opacity:.42}
.fchip.locked .nm{color:var(--ink-3)}
.lockbox{display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding:15px 16px;border:1px solid var(--accent);border-radius:var(--radius);
  background:var(--accent-soft)}
.lockbox .lk{font-size:19px}
.lockbox>div{flex:1 1 210px;font-size:13.5px;letter-spacing:-.02em;color:var(--ink)}
.lockbox>div b{font-weight:800}
.lockbox p{margin-top:4px;font-size:12.5px;line-height:1.65;color:var(--ink-2)}

/* ── 후기 정렬·거르기 ── */
.rvbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
.rvchips{display:flex;gap:6px;flex-wrap:wrap}
.rvchips .chip{border:1px solid var(--line);background:transparent;color:var(--ink-2);
  padding:7px 13px;border-radius:var(--radius-pill);font:inherit;font-size:12.5px;cursor:pointer}
.rvchips .chip:hover{border-color:var(--line-2)}
.rvchips .chip.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink);font-weight:700}
.rvsort{margin-left:auto;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.rvsort select{font:inherit;font-size:12.5px;padding:6px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--ink)}
.rvcount{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rv .by i{font-style:normal;color:var(--ink-3)}

/* ── 후기 쓰면 열리는 것 ── */
.rvask{margin-top:26px;padding:22px 20px;border:1px dashed var(--accent);border-radius:var(--radius);
  background:var(--accent-soft);display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.rvask div{flex:1 1 260px}
.rvask>div>b{display:block;font-size:15px;letter-spacing:-.03em;color:var(--ink)}
.rvask p b{color:var(--ink);font-weight:700}
.rvask p{margin-top:5px;font-size:13px;line-height:1.7;color:var(--ink-2)}

/* ── 다음 롤 ── */
.nextroll{display:grid;gap:14px;margin-top:20px}
@media(min-width:760px){.nextroll{grid-template-columns:1fr 1fr}}
.upgrade{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  display:grid;gap:4px;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.upgrade .neg{color:var(--accent)}
.upgrade b{font-size:19px;color:var(--ink);letter-spacing:-.03em;margin-top:4px}

/* ── 계좌이체로 먼저 받기 ── */
.bank{margin-top:20px;padding:18px 16px;border:1px solid var(--accent);border-radius:var(--radius);
  background:var(--accent-soft)}
.bank>b{display:block;font-size:14.5px;letter-spacing:-.03em;color:var(--ink)}
.bank>p{margin-top:6px;font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.bank>p b{color:var(--ink)}
.bankno{display:flex;align-items:center;gap:8px;margin-top:13px;padding:11px 13px;
  border-radius:9px;background:var(--bg);border:1px solid var(--line)}
.bankno span{flex:1;font-family:var(--mono);font-size:13.5px;font-weight:600;
  letter-spacing:-.01em;color:var(--ink);word-break:break-all}
.bankmeta{margin:13px 0 0;display:grid;gap:5px;font-size:12.5px}
.bankmeta div{display:flex;gap:10px}
.bankmeta dt{margin:0;width:64px;color:var(--ink-3);flex:none}
.bankmeta dd{margin:0;color:var(--ink-2)}
.bank .btn--wide{margin-top:14px}
.bankfoot{margin-top:9px;font-size:11.5px;color:var(--ink-3);line-height:1.6}
.bankfoot a{color:var(--accent);text-decoration:underline}

/* ── 약관 같은 긴 글 ── */
.doc-note{margin-top:8px;font-size:12.5px;color:var(--ink-3)}
.doc{margin-top:18px;padding:26px 22px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);font-size:14px;line-height:1.85}
.doc h3{margin-top:26px;font-size:15px;letter-spacing:-.03em}
.doc h3:first-child{margin-top:0}
.doc p{margin-top:8px;color:var(--ink-2)}
.doc p b{color:var(--ink)}
.doc ul{margin:8px 0 0;padding-left:18px;color:var(--ink-2)}
.doc li{margin-top:4px}
.doc a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.doc .spec th{white-space:nowrap;vertical-align:top;padding-right:20px;width:1%}

/* ── 내 사진 올리기 ── */
.upl{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px}
.upl-note{flex:1 1 100%;font-size:12.5px;color:var(--ink-3);margin:0}
.upl-note b{color:var(--ink-2);font-weight:700}
.upl-msg{color:var(--accent);font-weight:700;margin-left:6px}
.phone-screen.drag{outline:2px dashed var(--accent);outline-offset:-6px}

/* ── Before / After 두 장 나란히 ──
   슬라이더는 얼굴이 한쪽에 치우친 사진에서 반쪽만 보여 비교가 안 된다.
   같은 자리를 두 번 보여주는 이 방식은 어떤 사진이든 어긋나지 않는다. */
.ba2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ba2 figure{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:3/4;background:var(--surface)}
.ba2 canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba2 figcaption{position:absolute;left:9px;bottom:9px;z-index:2;padding:5px 10px;
  border-radius:var(--radius-pill);background:rgba(0,0,0,.55);color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;backdrop-filter:blur(6px)}
.ba2 .aft{border-color:var(--accent)}
.ba2 .aft::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 2px var(--accent);pointer-events:none;z-index:1}
.ba2 .aft figcaption{background:var(--accent);color:#fff}
.ba2 figcaption.ba-tag-r{background:var(--accent);color:#fff}
.ba2 .aft .glint{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 48%,transparent 58%);
  transform:translateX(-120%);animation:glint 4.6s ease-in-out 1.2s infinite}
@keyframes glint{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.ba2 .aft .glint{animation:none;opacity:0}}
.ba2note{margin-top:11px;font-size:13px;color:var(--ink-3)}
.ba2note b{color:var(--ink)}

/* ══ 7. 단계 비교 ══ */
.vs{display:grid;gap:14px}
@media(min-width:760px){.vs{grid-template-columns:1fr 1fr;gap:18px}}
.vs-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:var(--surface-2)}
.vs-card.ours{border-color:var(--ink);position:relative}
.vs-card.ours::before{content:"태나필름";position:absolute;top:-11px;left:20px;background:var(--accent);
  color:var(--accent-ink);font-size:11px;font-weight:800;padding:3px 11px;border-radius:var(--radius-pill)}
.vs-card h3{margin-bottom:14px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
  font-size:14px;color:var(--ink-2);counter-reset:s}
.steps li{display:flex;gap:10px;align-items:flex-start;counter-increment:s}
.steps li::before{content:counter(s);flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--surface);color:var(--ink-3);font-family:var(--mono);font-size:10.5px;font-weight:700;
  display:grid;place-items:center;margin-top:2px}
.vs-card.ours .steps li::before{background:var(--ink);color:var(--on-ink)}
.vs-card.ours .steps li{color:var(--ink);font-weight:600}
.steps.dim li{color:var(--ink-3)}
.vs-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;font-weight:700}

/* ══ 8. 랭킹 + 실시간 구매현황 (라이프위너 2열) ══ */
.rank2{display:grid;gap:38px}
@media(min-width:900px){.rank2{grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}}
.rank2 h2{font-size:clamp(22px,4vw,31px);line-height:1.14}
.rk{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.rk li{display:flex;gap:14px;align-items:center;padding-block:13px;border-bottom:1px solid var(--line);font-size:14px}
/* 순위 줄 전체가 그 컷으로 가는 링크 — 모양은 그대로 두고 누를 수 있게만 만든다 */
.rk li a.rkl{display:flex;gap:14px;align-items:center;flex:1;min-width:0}
.rk li a.rkl--big{display:block;flex:1}
.rk li:first-child{flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line);padding-top:0}
.rk .n{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--ink-3);flex:none;width:26px;
  letter-spacing:-.04em}
.rk li:first-child .n{color:var(--accent)}
.rk .t{font-weight:600;letter-spacing:-.03em}
.rk li:first-child .head{display:flex;gap:14px;align-items:center;padding-bottom:13px}
.rk .big{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:16/10;background:#000;margin-bottom:14px}
.rk .big canvas{width:100%;height:100%;object-fit:cover}
.rk .big .cap{position:absolute;left:0;right:0;bottom:16px;z-index:2;text-align:center;color:#fff}
.rk .big::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.6) 100%)}
.rk .up{margin-left:auto;font-size:11px;font-family:var(--mono);color:var(--accent);flex:none}

.live{border:1px solid var(--line);border-radius:12px;padding:22px 20px;background:var(--surface-2)}
.live h3{font-size:15px;letter-spacing:-.035em;margin-bottom:4px}
.live .cap{font-size:12px;color:var(--ink-3);margin-bottom:14px}
/* 흐르는 구매 목록이었는데, 판매 전이라 사실 목록으로 바꿨다.
   목록이 고정이면 위아래를 흐리게 할 이유도, 굴릴 이유도 없다. */
.live-vp{position:relative}
.live-track{display:flex;flex-direction:column;gap:2px}
.lv{border-left:2px solid var(--accent);padding:9px 0 9px 13px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lv .top{display:contents}
.lv .id{font-size:13px;font-weight:600;letter-spacing:-.03em;color:var(--ink-2)}
.lv .ago{margin-left:auto;font-size:11.5px;color:var(--ink-3);order:3}
.lv .what{font-size:14px;font-weight:800;letter-spacing:-.035em;color:var(--ink)}

/* ══ 9. 필름 그리드 ══ */
.films{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.films{grid-template-columns:repeat(3,1fr)}}
@media(min-width:940px){.films{grid-template-columns:repeat(5,1fr);gap:14px}}
.film{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface-2);
  transition:transform .18s ease,border-color .18s ease}
.film:hover{transform:translateY(-3px);border-color:var(--line-2)}
.film .thumb{aspect-ratio:4/5;background:#000;overflow:hidden}
.film .thumb canvas{width:100%;height:100%;object-fit:cover}
.film .strip{height:9px;display:flex}
.film .strip i{flex:1}
.film .meta{padding:11px 12px 13px}
.film .no{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3)}
.film .nm{display:block;margin-top:3px;font-size:13.5px;font-weight:800;letter-spacing:-.03em;line-height:1.3}
.film .lt{display:block;margin-top:5px;font-size:11.5px;color:var(--ink-3)}
.film.fun{border-color:var(--accent)}
.film.fun .no{color:var(--accent)}

/* ══ 10. 가격 ══ */
.plans{display:grid;gap:16px}
@media(min-width:860px){.plans{grid-template-columns:repeat(3,1fr);align-items:start}}
.plan{border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;background:var(--surface-2);
  display:flex;flex-direction:column;gap:16px}
.plan.best{border-color:var(--ink);box-shadow:var(--shadow);position:relative}
.plan.best::before{content:"🎞️ 이걸로 시작하세요";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:var(--accent-ink);font-size:11.5px;font-weight:800;padding:4px 13px;
  border-radius:var(--radius-pill);white-space:nowrap}
.plan .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:var(--ls-label);color:var(--ink-3);text-transform:uppercase}
.plan .nm{font-size:19px;font-weight:800;letter-spacing:-.035em}
.price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.price .now{font-size:30px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.price .was{font-size:15px;color:var(--ink-3);text-decoration:line-through;font-variant-numeric:tabular-nums}
.price .off{font-size:12.5px;font-weight:800;color:var(--accent)}
.coupon{font-size:12.5px;background:var(--accent-soft);color:var(--accent);font-weight:700;
  padding:8px 12px;border-radius:var(--radius-sm)}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-2)}
.plist li{display:flex;gap:8px}
.plist li::before{content:"✓";color:var(--accent);font-weight:800;flex:none}

/* ══ 11. 후기 (넥스트클래스 홈 방식) ══
   사진도 아바타도 배지도 없다. 별 · 따옴표 본문 · 맨 아래 누가 무엇을 샀는지 한 줄. */
.rvsect{background:var(--surface);border-block:1px solid var(--line)}
.rvwall{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.rvwall{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.rvwall{grid-template-columns:repeat(3,1fr)}}
.rv{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
  padding:22px 22px 20px;display:flex;flex-direction:column;gap:13px;min-height:200px}
.rv .stars{color:#F5B22A;font-size:12px;letter-spacing:.06em}
.rv .txt{font-size:13.5px;line-height:1.8;color:var(--ink);flex:1}
.rv .by{font-size:11.5px;color:var(--ink-3);letter-spacing:-.01em}
.rv .by b{color:var(--accent);font-weight:600}
.rv .ph{display:flex;gap:6px}
.rv .ph canvas{width:auto;height:150px;border-radius:6px;background:#000}
.pill{display:inline-block;background:var(--ink);color:var(--on-ink);font-size:12px;font-weight:700;
  padding:4px 13px;border-radius:var(--radius-pill);width:fit-content}
.placeholder-note{margin-top:22px;font-size:12.5px;color:var(--ink-3);text-align:center}

/* ══ 12. 만든 사람 ══ */
.maker{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);
  padding:34px 26px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;
  max-width:640px;margin-inline:auto}
.maker .q{font-size:clamp(18px,3.6vw,22px);font-weight:800;letter-spacing:var(--ls-display);line-height:1.4;color:var(--ink)}
.maker p{font-size:14.5px;max-width:44ch}
.maker .sig{font-family:var(--mono);font-size:11px;letter-spacing:var(--ls-label);color:var(--ink-3)}

/* ══ 13. FAQ ══ */
.faq{border-top:1px solid var(--line);max-width:760px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;font-weight:700;font-size:15px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:19px;font-weight:400;color:var(--ink-3);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .a{padding:0 0 20px;font-size:14px;color:var(--ink-2);max-width:60ch}

/* ══ 14. CTA · 푸터 ══ */
.band{background:var(--dark);color:var(--on-dark);border-radius:var(--radius);padding:48px 26px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px}
.band h2{color:var(--on-dark)}
.band p{color:var(--on-dark-2);max-width:40ch}
.band .btn{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
/* 푸터: 접이식 사업자 정보(사주신화 이식). 색은 테마 변수라 다크모드에서도 안 깨진다 */
footer.site-foot{border-top:1px solid var(--line);background:var(--bg);color:var(--ink-2);margin-top:var(--sect)}
.sfoot-inner{width:100%;max-width:1120px;margin:0 auto;padding:24px 16px 18px;box-sizing:border-box}
@media(min-width:768px){.sfoot-inner{padding:32px 40px 24px}}
.sfoot-brand{margin-bottom:18px}
.sfoot-eyebrow{margin:0 0 4px;color:var(--ink-2);font-size:11px;font-weight:700;
  letter-spacing:var(--ls-label);font-family:var(--mono);text-transform:uppercase}
.sfoot-co{margin:0;color:var(--ink);font-size:14px;font-weight:700;letter-spacing:-.025em}
.sfoot-co-sub{margin-left:8px;color:var(--ink-2);font-size:12px;font-weight:500}
.sfoot-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0;font-size:12px;letter-spacing:-.025em}
.sfoot-links a{color:var(--ink-2);text-decoration:none;padding:4px 0;transition:color .15s ease}
.sfoot-links a:hover{color:var(--ink)}
.sfoot-links span{color:var(--ink-3);opacity:.9}
.sfoot-biz{margin:0 0 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sfoot-biz>summary{list-style:none;cursor:pointer;padding:12px 0;font-size:12px;font-weight:600;
  color:var(--ink-2);letter-spacing:-.025em;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sfoot-biz>summary::-webkit-details-marker{display:none}
.sfoot-biz>summary::after{content:"⌄";color:var(--ink-3);font-size:14px;line-height:1;transition:transform .18s ease}
.sfoot-biz[open]>summary::after{transform:rotate(180deg)}
.sfoot-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin:0;
  padding:12px 0 16px;border-top:1px solid var(--line);font-size:11.5px;line-height:1.5;letter-spacing:-.025em}
.sfoot-meta>div{display:flex;align-items:baseline;gap:6px;min-width:0}
.sfoot-meta .wide{grid-column:1/-1}
.sfoot-meta dt{color:var(--ink-3);font-weight:600;min-width:76px;flex:none}
.sfoot-meta dd{margin:0;color:var(--ink-2);flex:1;min-width:0;word-break:break-word}
.sfoot-meta a{color:var(--ink-2);text-decoration:none}
.sfoot-meta a:hover{color:var(--ink)}
.sfoot-meta .note{color:var(--ink-3);font-size:.9em}
.sfoot-copy{margin:0;font-size:11px;color:var(--ink-3);letter-spacing:-.025em}
@media(max-width:760px){.sfoot-meta{grid-template-columns:1fr;gap:4px}
  .sfoot-meta .wide{grid-column:1}.sfoot-links{font-size:13px}}

/* ── 후기 마퀴 ── */
.ticker{border-block:1px solid var(--line);background:var(--surface);overflow:hidden;padding-block:13px}
.ticker-track{display:flex;gap:12px;width:max-content;animation:slide 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.tk{display:flex;align-items:center;gap:9px;padding:8px 15px;border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--line);font-size:13px;white-space:nowrap}
.tk .w{font-weight:700;font-size:12px}
.tk .a{color:var(--ink-3);font-size:11.5px;font-family:var(--mono)}
.tk .n{color:var(--accent);font-weight:800;font-size:11px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════
   페이지 공통 — 목록·상세·고객센터에서 쓰는 것
   ═══════════════════════════════════════════════════ */
/* 앵커로 뛸 때 고정 헤더에 글자가 가리지 않게 */
:target,[id]{scroll-margin-top:118px}

/* 빵부스러기 */
.crumb{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--ink-3);padding-block:18px}
.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.5}

/* 페이지 머리 */
.phead{padding-block:14px 30px;border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(24px,4.6vw,34px);letter-spacing:-.045em}
.phead p{margin-top:9px;font-size:14px}

/* 가로 탭 (넥스트클래스 상품 상세 방식) — 눌러도 헤더에 안 가림 */
.tabs{position:sticky;top:62px;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line);
  display:flex;gap:22px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:15px 0;font-size:13.5px;font-weight:700;color:var(--ink-3);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--ink);border-bottom-color:var(--ink)}

/* 상품 상세 2단 */
.pd{display:grid;gap:32px;padding-block:36px}
@media(min-width:940px){.pd{grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}}
.pd-buy{position:sticky;top:124px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);
  padding:26px 24px;display:flex;flex-direction:column;gap:15px}
.pd-gallery{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
.pd-gallery .g{border-radius:12px;overflow:hidden;background:#000;aspect-ratio:4/5}
.pd-gallery .g:first-child{grid-column:1/-1;aspect-ratio:4/3}
.pd-gallery canvas{width:100%;height:100%;object-fit:cover}
.spec{width:100%;border-collapse:collapse;font-size:13.5px}
.spec th,.spec td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:110px;color:var(--ink-3);font-weight:600}

/* 필름 상세 — 큰 비포애프터 */
.fd{display:grid;gap:26px;padding-block:34px}
@media(min-width:900px){.fd{grid-template-columns:1.2fr .8fr;gap:44px;align-items:start}}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--line);border-radius:var(--radius-pill);padding:11px 15px;font-size:12.5px;min-height:40px;display:inline-flex;align-items:center;
  color:var(--ink-2);background:transparent;cursor:pointer}
.chip.on{border-color:var(--line-2);color:var(--ink);font-weight:700}

/* 목록 필터 줄 */
.filters{display:flex;gap:8px;overflow-x:auto;padding-block:20px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}

/* 맨 위로 (넥스트클래스에 있는 그것) */
.totop{position:fixed;right:18px;bottom:18px;z-index:70;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:17px;cursor:pointer;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  transform:translateY(8px)}
.totop.on{opacity:1;pointer-events:auto;transform:translateY(0)}

/* 빈 목록 */
.empty{padding:56px 20px;text-align:center;color:var(--ink-3);font-size:14px}

/* ═══ 로그인·주문 ═══════════════════════════════════ */
.loginlink{font-size:13px;font-weight:600;color:var(--ink-2)}
.loginlink:hover{color:var(--ink)}

.narrow{max-width:460px;margin-inline:auto}
.card{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);padding:28px 26px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.field label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.field input,.field select{font:inherit;font-size:14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:9px;background:var(--bg);color:var(--ink);width:100%}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.field .hint{font-size:11.5px;color:var(--ink-3)}

.sso{display:flex;flex-direction:column;gap:9px}
.sso button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px;
  border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.sso .kakao{background:#FEE500;border-color:#FEE500;color:#191600}
.sso .naver{background:#03C75A;border-color:#03C75A;color:#fff}
.divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--ink-3);font-size:11.5px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* 주문서 — 왼쪽 입력, 오른쪽 금액 (아임웹·우커머스 표준) */
.order{display:grid;gap:26px;padding-block:30px var(--sect)}
@media(min-width:940px){.order{grid-template-columns:1.25fr .75fr;gap:44px;align-items:start}}
.sum{position:sticky;top:120px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);padding:24px 22px}
.sum h3{font-size:15px;margin-bottom:16px}
.sumrow{display:flex;justify-content:space-between;font-size:13.5px;padding:8px 0;color:var(--ink-2)}
.sumrow.total{border-top:1px solid var(--line);margin-top:10px;padding-top:14px;
  font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.sumrow .neg{color:var(--accent);font-weight:700}
.orderitem{display:flex;gap:13px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.orderitem canvas{width:56px;height:56px;border-radius:8px;background:#000;flex:none;object-fit:cover}
.orderitem b{display:block;font-size:14px;letter-spacing:-.03em}
.orderitem span{font-size:12px;color:var(--ink-3)}
.orderitem .won{margin-left:auto;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}

.agree{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);padding:7px 0}
.agree input{margin-top:3px;accent-color:var(--accent);width:15px;height:15px;flex:none}
.agree a{text-decoration:underline;color:var(--ink-2)}
.paylist{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.paylist label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;
  padding:12px 13px;font-size:13.5px;cursor:pointer}
.paylist label:has(input:checked){border-color:var(--ink);font-weight:700}
.paylist input{accent-color:var(--accent)}

/* 주문 완료 */
.done{text-align:center;padding-block:52px}
.done .mark{width:62px;height:62px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:28px;margin:0 auto 20px}
.done .no{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-top:9px}
.steps3{display:grid;gap:10px;margin-top:30px;text-align:left}
@media(min-width:700px){.steps3{grid-template-columns:repeat(3,1fr)}}
.steps3 div{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--surface-2)}
.steps3 b{display:block;font-size:14px;margin-bottom:5px}
.steps3 span{font-size:12.5px;color:var(--ink-3);line-height:1.6}

/* ═══ 로그인 게이트 · 마이페이지 · 어드민 ══════════════ */
.gate{max-width:420px;margin:70px auto;text-align:center;
  border:1px solid var(--line);border-radius:16px;background:var(--surface-2);padding:44px 32px}
.gate .lock{width:66px;height:66px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:26px;margin:0 auto 18px}
.gate .kicker{font-size:12.5px;color:var(--ink-3)}
.gate h1{font-size:21px;margin-top:7px}
.gate p{margin-top:9px;font-size:13.5px}
.gate .btn{margin-top:22px;width:100%}
.gate .sub{margin-top:16px;font-size:12.5px;color:var(--ink-3)}
.gate .sub a{color:var(--accent);font-weight:700}

/* 마이페이지 */
.my{display:grid;gap:26px;padding-block:26px var(--sect)}
@media(min-width:900px){.my{grid-template-columns:210px 1fr;gap:40px;align-items:start}}
.myside{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);padding:20px 18px}
.myside .who{display:flex;gap:11px;align-items:center;padding-bottom:15px;border-bottom:1px solid var(--line)}
.myside .av{width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:800;flex:none}
.myside .who b{display:block;font-size:13.5px;letter-spacing:-.03em}
.myside .who span{font-size:11.5px;color:var(--ink-3)}
.mynav{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.mynav button{text-align:left;background:transparent;border:0;font:inherit;font-size:13.5px;
  padding:10px 11px;border-radius:8px;color:var(--ink-2);cursor:pointer}
.mynav button:hover{background:var(--surface)}
.mynav button.on{background:var(--surface);color:var(--ink);font-weight:700}
.mypanel{display:none}
.mypanel.on{display:block}
.mypanel h2{font-size:19px;margin-bottom:6px}
.mypanel .lead{font-size:13.5px;margin-bottom:20px}

.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:11.5px;color:var(--ink-3);font-weight:600;padding:10px 12px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:var(--surface)}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.mono{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.stat{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill)}
.stat.ok{background:#E7F6EE;color:#1E7F52} .stat.wait{background:#FFF3DC;color:#8A5D00}
.stat.no{background:#FBE9EC;color:#A81034}
:root[data-theme="dark"] .stat.ok{background:#12311F;color:#6FD6A2}
:root[data-theme="dark"] .stat.wait{background:#38290C;color:#F0C275}
:root[data-theme="dark"] .stat.no{background:#3A1620;color:#FF8FA8}

.coupons{display:grid;gap:11px}
@media(min-width:640px){.coupons{grid-template-columns:repeat(2,1fr)}}
.cpn{border:1px dashed var(--line);border-radius:12px;padding:17px 18px;background:var(--surface-2);
  display:flex;flex-direction:column;gap:5px}
.cpn.used{opacity:.5}
.cpn b{font-size:17px;letter-spacing:-.035em;color:var(--accent)}
.cpn .code{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

/* 어드민 */
.adm{padding-block:24px var(--sect)}
.goal{border:1px solid var(--ink);border-radius:14px;padding:24px;background:var(--surface-2);margin-bottom:22px}
.goal .top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.goal .big{font-size:34px;font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.goal .of{font-size:14px;color:var(--ink-3)}
.bar{height:9px;border-radius:99px;background:var(--surface);overflow:hidden;margin-top:14px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.goal .note{margin-top:11px;font-size:12.5px;color:var(--ink-3)}
.admgrid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.admgrid{grid-template-columns:repeat(4,1fr)}}
.admcard{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:17px 18px}
.admcard dt{font-size:11.5px;color:var(--ink-3)}
.admcard dd{margin:6px 0 0;font-size:22px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.admcard .sm{font-size:11.5px;color:var(--ink-3);font-weight:500}

/* ═══ 인라인 편집 ═══════════════════════════════════
   화면에서 바로 문구를 고치고, 고친 것만 뽑아낸다.
   워드프레스로 옮기기 전에 카피를 확정하려고 만든 것. */
.edbtn{position:fixed;right:18px;bottom:72px;z-index:80;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:16px;cursor:pointer;
  box-shadow:var(--shadow)}
.edbtn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.edbar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ink);color:var(--on-ink);
  padding:11px 16px;display:none;align-items:center;gap:10px;flex-wrap:wrap;
  box-shadow:0 -6px 24px rgba(0,0,0,.18)}
body.editing .edbar{display:flex}
.edbar b{font-size:13px;font-weight:700}
.edbar .cnt{font-family:var(--mono);font-size:12px;opacity:.7}
.edbar .sp{margin-left:auto}
.edbar button{font:inherit;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);background:transparent;color:var(--on-ink);cursor:pointer}
.edbar button:hover{background:rgba(255,255,255,.12)}
.edbar button.pri{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.edbar .msg{font-size:12px;opacity:.75}

body.editing [data-ed]{outline:1px dashed rgba(200,16,63,.35);outline-offset:2px;border-radius:3px;cursor:text}
body.editing [data-ed]:hover{outline-color:var(--accent);background:rgba(200,16,63,.05)}
body.editing [data-ed]:focus{outline:2px solid var(--accent);background:rgba(200,16,63,.06)}
body.editing [data-ed].changed{outline-style:solid;outline-color:var(--accent)}
body.editing{padding-bottom:56px}
@media print{.edbtn,.edbar,.totop{display:none!important}}

/* ═══ 후기 모달 (넥스트클래스 nc-rev-lightbox 구조) ═══ */
.rv{cursor:pointer;transition:transform .16s ease,border-color .16s ease}
.rv:hover{transform:translateY(-2px);border-color:var(--line-2)}
.rv:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.lb{position:fixed;inset:0;z-index:100;background:rgba(12,10,11,.72);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:24px}
.lb.open{display:flex}
.lb-card{position:relative;background:var(--surface-2);border-radius:16px;width:100%;max-width:520px;
  max-height:86vh;overflow-y:auto;padding:30px 28px 26px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.lb-close{position:absolute;right:12px;top:10px;width:34px;height:34px;border:0;background:transparent;
  color:var(--ink-3);font-size:24px;line-height:1;cursor:pointer;border-radius:50%}
.lb-close:hover{background:var(--surface);color:var(--ink)}
.lb-photos{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.lb-photos canvas{height:230px;width:auto;border-radius:10px;background:#000}
.lb-stars{color:#F5B22A;font-size:15px;letter-spacing:.08em}
.lb-text{margin-top:12px;font-size:14.5px;line-height:1.82;color:var(--ink)}
.lb-meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.lb-meta b{color:var(--accent);font-weight:700}
.lb-counter{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.lb-mnav{display:flex;gap:8px;margin-top:16px}
.lb-mnav button{flex:1;font:inherit;font-size:13px;font-weight:700;padding:11px;border-radius:9px;
  border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.lb-mnav button:hover{border-color:var(--line-2)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.35);color:#fff;font-size:20px;cursor:pointer;
  display:grid;place-items:center}
.lb-nav:hover{background:rgba(0,0,0,.6)}
.lb-nav.prev{left:24px} .lb-nav.next{right:24px}
@media(max-width:820px){.lb-nav{display:none}}
@media(min-width:821px){.lb-mnav{display:none}}

/* ═══ 섹션 머리 — 배지 + 전체 보기 (넥스트클래스 홈) ═══ */
.shead{position:relative}
.seeall{position:absolute;right:0;bottom:6px;font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.seeall:hover{color:var(--accent)}
@media(max-width:640px){.seeall{position:static;margin-top:6px;display:inline-block}}

/* 카드 별점 (넥스트클래스 클래스 카드) */
.rate-sm{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11.5px}
.rate-sm .st{color:#F5B22A;letter-spacing:.04em}
.rate-sm .sc{font-weight:700}
.rate-sm .ct{color:var(--ink-3)}

/* ═══ 모바일 메뉴 ═══ */
.burger{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);
  background:transparent;border-radius:9px;cursor:pointer;color:var(--ink);font-size:15px}
@media(min-width:880px){.burger{display:none}}
.mmenu{position:fixed;inset:0;z-index:95;background:var(--bg);display:none;flex-direction:column;padding:18px}
.mmenu.open{display:flex}
.mmenu .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mmenu a{font-size:19px;font-weight:700;letter-spacing:-.035em;padding:15px 4px;border-bottom:1px solid var(--line)}
.mmenu .cta{margin-top:auto;display:flex;flex-direction:column;gap:9px;border:0;padding-top:20px}
.mmenu .cta a{border:0;text-align:center}

/* ═══ 알록달록 — 뉴에피소드 콜라주 / 라이프위너 컬러 범벅에서 ═══
   필름 열 컷의 색을 그대로 화면 장식에 쓴다. 브랜드 색이 열 개인 셈. */
:root{
  --c01:#D3B394; --c02:#E97F4B; --c03:#C98A6A; --c04:#B45C9E; --c05:#8FAFC2;
  --c06:#5E7CA8; --c07:#C9AFA4; --c08:#3FA8C4; --c09:#F2AFA0; --c10:#E3B6F0;
}

/* 섹션 배지를 컷마다 다른 색으로 */
.pill.c1{background:var(--c02)} .pill.c2{background:var(--c04)}
.pill.c3{background:var(--c08)} .pill.c4{background:var(--c06)}
.pill.c5{background:var(--c09);color:#3A1E1A}

/* 컬러 리본 — 마흔 개 색이 화면을 가로지른다 */
.ribbon{display:flex;height:9px;width:100%;overflow:hidden}
.ribbon i{flex:1}
.ribbon.tall{height:16px;border-radius:99px}

/* 스티커 — 찢어붙인 느낌의 회전 라벨 */
.sticker{display:inline-block;padding:5px 12px;border-radius:4px;font-size:12px;font-weight:800;
  letter-spacing:-.03em;transform:rotate(-3deg);box-shadow:0 2px 0 rgba(0,0,0,.08)}
.sticker.y{background:#FFE27A;color:#4A3A00}
.sticker.p{background:#FFC2DA;color:#5B1030}
.sticker.b{background:#BBE0FF;color:#0B3557}
.sticker.g{background:#C6EFCF;color:#12452A}

/* 필름 팔레트 띠 — 열 컷을 색으로 한 줄에 */
.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:26px}
@media(min-width:760px){.palette{grid-template-columns:repeat(10,1fr)}}
.palette a{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);
  transition:transform .16s ease}
.palette a:hover{transform:translateY(-4px)}
.palette .sw{height:52px;display:flex;flex-direction:column}
.palette .sw i{flex:1}
.palette .nm{display:block;padding:7px 6px 8px;font-size:10px;font-weight:700;letter-spacing:-.03em;
  text-align:center;line-height:1.25;color:var(--ink-2)}

/* 필름 카드 색띠를 크게 (지금은 너무 얇다) */
.film .strip{height:14px}
.film:hover .strip{height:18px;transition:height .16s ease}

/* 히어로 슬라이드에 색띠 얹기 */
.slide-in .filmstrip{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;height:7px}
.slide-in .filmstrip i{flex:1}

/* BEST 카드에 스티커 */
.pcard{position:relative}
.pcard .tape{position:absolute;left:9px;top:9px;z-index:3}

/* 컬러 배경 섹션 */
.tint{background:linear-gradient(180deg,#FFF6EE 0%,#FDF1F4 50%,#F1F6FD 100%)}
:root[data-theme="dark"] .tint{background:linear-gradient(180deg,#241A18 0%,#231519 50%,#161C28 100%)}

/* ── 저장 관문: 메일 한 줄 받는 자리 (tf.js askMail) ── */
.tf-mailwrap{position:fixed;inset:0;z-index:120;background:rgba(12,10,11,.66);
  backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:20px}
.tf-mail{background:var(--surface-2);border-radius:18px;width:100%;max-width:400px;
  padding:26px 24px 20px;box-shadow:0 26px 64px rgba(0,0,0,.42);
  animation:tfMailUp .22s cubic-bezier(.2,.8,.3,1)}
@keyframes tfMailUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tf-mail{animation:none}}
.tf-mail h3{margin:0 0 8px;font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.tf-mail-sub{font-size:13.5px;line-height:1.7;color:var(--ink-2);margin:0 0 16px;word-break:keep-all;text-wrap:pretty}
.tf-mail input[type=email]{width:100%;box-sizing:border-box;padding:13px 15px;font:inherit;font-size:15px;
  color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:11px;outline:none}
.tf-mail input[type=email]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tf-mail-ok{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.tf-mail-ok input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.tf-mail-law{font-size:11.5px;line-height:1.65;color:var(--ink-3);margin:12px 0 0;word-break:keep-all}
.tf-mail-btns{display:flex;gap:8px;margin-top:18px}
.tf-mail-btns button{flex:1;padding:13px 16px;font:inherit;font-weight:700;font-size:14.5px;
  letter-spacing:-.02em;border-radius:var(--radius-pill);cursor:pointer;
  background:transparent;color:var(--ink);border:1px solid var(--line)}
.tf-mail-btns button:hover{border-color:var(--line-2)}
.tf-mail-btns .cta{flex:1.5;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tf-mail-btns .cta:hover{opacity:.92}
.tf-mail-err{margin:12px 0 0;font-size:13px;font-weight:600;color:var(--accent)}

/* ── 후기 쓰는 칸 (/reviews/) ──
   대가를 안 주는 대신, 쓰는 데 걸리는 게 없어야 한다. 칸 네 개로 끝낸다. */
.rvform{margin-top:30px;padding:26px 24px 22px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface-2);position:relative}
.rvform h2{font-size:17px;letter-spacing:-.03em;color:var(--ink);
  word-break:keep-all;text-wrap:balance}
.rvform-sub{margin-top:6px;font-size:13px;line-height:1.7;color:var(--ink-2);
  word-break:keep-all;text-wrap:pretty}
.rvform-row{margin-top:18px;display:flex;flex-direction:column;gap:7px;position:relative}
.rvform-lbl{font-size:12.5px;font-weight:700;color:var(--ink-2);letter-spacing:-.02em}
.rvform-two{display:grid;gap:0 16px}
@media(min-width:620px){.rvform-two{grid-template-columns:1fr 1fr}}
.rvform input,.rvform select,.rvform textarea{
  font:inherit;font-size:14px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;width:100%}
.rvform textarea{resize:vertical;min-height:104px;line-height:1.75}
.rvform input:focus,.rvform select:focus,.rvform textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.rvform-help{position:absolute;right:2px;bottom:-17px;font-size:11.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}

.rvstars{display:flex;gap:4px}
.rvstars button{background:none;border:0;padding:2px 3px;cursor:pointer;
  font-size:27px;line-height:1;color:var(--line);transition:color .12s ease,transform .12s ease}
.rvstars button:hover{transform:scale(1.12)}
.rvstars button.on{color:#F5B22A}
.rvstars button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.rvform-foot{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.rvform-note{font-size:12.5px;color:var(--accent);line-height:1.6;
  word-break:keep-all;text-wrap:pretty}
.rvform-done{text-align:center;padding:14px 0 8px}
.rvform-done b{display:block;font-size:17px;letter-spacing:-.03em;color:var(--ink)}
.rvform-done p{margin-top:7px;font-size:13.5px;color:var(--ink-2)}

/* 안 채운 별은 흐리게. 별 다섯 개를 늘 채워 보여주면 그건 지어낸 거다. */
.rv .stars .off,.lb-stars .off{color:var(--line)}

/* 저장하고 나서 물어보는 자리 (/try/) */
.tf-rvping{margin-top:14px;padding:13px 15px;border:1px dashed var(--accent);
  border-radius:var(--radius-sm);background:var(--accent-soft);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  animation:tfMailUp .26s ease both}
.tf-rvping p{flex:1 1 200px;font-size:13px;line-height:1.65;color:var(--ink);
  word-break:keep-all;text-wrap:pretty}
.tf-rvping a{font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap}
.tf-rvping button{background:none;border:0;padding:2px 6px;cursor:pointer;
  font-size:17px;line-height:1;color:var(--ink-3)}
@media(prefers-reduced-motion:reduce){
  .tf-rvping{animation:none}
  .rvstars button{transition:none}
}