/* 플랫폼별 페이지 엔진 — landing.css 위에 테마·첫 화면 변형·시세 탐색기만 추가 */

/* ── 테마 (페이지 설정 theme 값) ── */
.t-blue .hero{background:var(--blue);color:#fff}
.t-night .hero{background:radial-gradient(95% 60% at 50% 58%,#3A62D3 0%,#1B3893 45%,#0B1638 100%);color:#fff}
.t-night{--cream:#0B1638;background:#0B1638}
.t-night .sheet{background:#fff}
.t-sky .hero{background:linear-gradient(180deg,#CFE1FB 0%,var(--sky) 55%,var(--cream) 100%);color:var(--navy)}
.t-paper .hero{background:#fff;color:var(--navy)}
.t-paper{--cream:#F6F4EF;background:#F6F4EF}
.t-pop .hero{background:var(--yellow);color:var(--navy)}
.t-local .hero{background:linear-gradient(180deg,#FFF1DC 0%,var(--cream) 100%);color:var(--navy)}
.t-blue .hero header img,.t-night .hero header img{filter:brightness(0) invert(1)}
.t-blue .giant,.t-night .giant{color:rgba(255,255,255,.12)}
.t-sky .giant,.t-paper .giant,.t-local .giant{color:rgba(34,87,167,.08)}
.t-pop .giant{color:rgba(34,87,167,.12)}
.t-blue .trust3 span,.t-night .trust3 span{background:rgba(255,255,255,.14);color:#fff}
.t-sky .trust3 span,.t-paper .trust3 span,.t-local .trust3 span,.t-pop .trust3 span{background:#fff;color:var(--blue);box-shadow:0 1px 0 var(--line)}
.t-pop mark{background:var(--blue);color:#fff}
.t-night .blk h3,.t-night .blk .h-sub,.t-night .src,.t-night .calm{color:#E7ECF8}
.t-night .blk .h-sub,.t-night .src{opacity:.75}
.t-night footer{background:#08102A;color:#9AA6C7}
.t-night footer img{filter:brightness(0) invert(1);opacity:.7}
.t-night .cta{background:rgba(11,22,56,.96)}
.t-night .cta p{color:#C3CCE4}

/* 큰 글자가 스크롤에 따라 천천히 움직임(릴스1) */
.giant{will-change:transform}

/* ── 첫 화면 변형: rail (릴스2: 손으로 넘기는 진열대 + 기울어짐) ── */
.v-rail{position:relative;z-index:2;margin:30px -20px 0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 11% 30px;perspective:900px}
.v-rail::-webkit-scrollbar{display:none}
.v-rail .sl{flex:0 0 78%;scroll-snap-align:center;transition:transform .08s linear,opacity .08s linear}
.v-rail .sl img{width:100%;filter:drop-shadow(0 26px 22px rgba(0,0,0,.4))}
.rail-meta{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-top:-14px}
.rail-meta b{font-size:16px}
.dots{display:flex;gap:6px}.dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.35);transition:width .2s}.dots i.on{width:18px;background:var(--yellow)}

/* ── 첫 화면 변형: search (네이버 검색 의도 → 바로 시세) ── */
.v-search{position:relative;z-index:3;margin-top:18px;background:#fff;border-radius:20px;box-shadow:0 18px 40px -24px rgba(26,26,46,.45),inset 0 0 0 1.5px var(--line);padding:16px}
.sbox{display:flex;align-items:center;gap:10px;height:52px;border-radius:14px;background:var(--tile);padding:0 14px;font-size:16px;font-weight:700}
.sbox i{width:18px;height:18px;border:2.5px solid var(--blue);border-radius:50%;position:relative;flex:none}
.sbox i::after{content:"";position:absolute;width:8px;height:2.5px;background:var(--blue);right:-7px;bottom:-3px;transform:rotate(45deg)}
.sbox span{color:var(--faint);font-weight:500}
.sbox b{color:var(--navy)}
.sbox em{font-style:normal;margin-left:auto;width:2px;height:20px;background:var(--blue);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ── 첫 화면 변형: chips (카카오 비즈보드에서 이어지는 짧은 화면) ── */
.v-chips{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.v-chips button{position:relative;height:108px;border-radius:20px;background:#fff;box-shadow:0 4px 0 rgba(26,26,46,.12);text-align:left;padding:12px 14px;overflow:hidden;transition:transform .12s}
.v-chips button:active{transform:translateY(3px)}
.v-chips b{font-size:18px;font-weight:900;letter-spacing:-.04em}
.v-chips small{display:block;font-size:12px;color:var(--sub)}
.v-chips small{display:none}
.v-chips .pr{display:block;margin-top:6px;font-size:12px;color:var(--sub)}
.v-chips .pr b{display:block;font-size:20px;color:var(--blue);letter-spacing:-.04em}

/* ── 첫 화면 변형: local (당근: 동네 매장 + 탁송) ── */
.v-local{position:relative;z-index:3;margin-top:18px;background:#fff;border-radius:22px;padding:16px;box-shadow:0 18px 40px -26px rgba(26,26,46,.45)}
.map{position:relative;height:150px;border-radius:16px;overflow:hidden;background:
  linear-gradient(90deg,transparent 46%,#fff 46% 54%,transparent 54%) 0 0/120px 120px,
  linear-gradient(0deg,transparent 46%,#fff 46% 54%,transparent 54%) 0 0/120px 120px,#E8EEF6}
.map .ring{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:50%;border:2px dashed rgba(34,87,167,.45);animation:pulse 2.4s ease-out infinite}
.map .ring.r2{animation-delay:1.2s}
@keyframes pulse{from{transform:scale(.3);opacity:1}to{transform:scale(1.1);opacity:0}}
.map img{position:absolute;left:50%;top:50%;width:54px;margin:-46px 0 0 -27px}
.map .lb{position:absolute;left:50%;top:58%;transform:translateX(-50%);font-size:12px;font-weight:800;background:var(--navy);color:#fff;border-radius:6px;padding:2px 8px;white-space:nowrap}
.towns{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.towns button{height:38px;border-radius:999px;padding:0 14px;background:var(--tile);font-size:14px;font-weight:700}
.towns button.on{background:var(--blue);color:#fff}
.far{font-size:13px;color:var(--sub);margin-top:10px}

/* ── 시세 탐색기 (카바나 Value Tracker 방식 · 카매니저 매물가 집계) ── */
.px{background:#fff;border-radius:22px;padding:16px;box-shadow:0 1px 0 var(--line);margin-top:16px}
.v-search .px{box-shadow:none;padding:12px 0 0;margin-top:0}
.px-models{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:2px}
.px-models::-webkit-scrollbar{display:none}
.px-models button{flex:none;height:38px;border-radius:999px;padding:0 14px;background:var(--tile);font-size:14px;font-weight:700}
.px-models button.on{background:var(--navy);color:#fff}
.px-year{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:13px;color:var(--sub)}
.px-year b{font-size:16px;color:var(--navy)}
.px-big{font-size:38px;font-weight:900;letter-spacing:-.05em;margin-top:6px;line-height:1.1}
.px-big small{font-size:15px;font-weight:600;color:var(--sub);margin-left:4px}
.px-bar{position:relative;height:10px;border-radius:5px;background:var(--line);margin:14px 0 6px}
.px-bar i{position:absolute;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,#8FB2EC,var(--blue));transition:left .35s,right .35s}
.px-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--sub)}
.px-note{font-size:11px;color:var(--faint);margin-top:10px}
.px-go{display:flex;align-items:center;justify-content:center;width:100%;height:52px;border-radius:14px;background:var(--blue);color:#fff;font-size:16px;font-weight:800;margin-top:12px}

/* 예산 단계: 시세 기준 "이 예산이면 이런 차" */
.fit{display:grid;gap:6px;margin-top:10px}
.fit div{display:grid;grid-template-columns:1fr auto;align-items:center;background:var(--tile);border-radius:12px;padding:10px 12px}
.fit b{font-size:15px}
.fit span{font-size:13px;font-weight:800;color:var(--blue)}
.fit small{grid-column:1/-1;font-size:11.5px;color:var(--sub)}

.t-paper .hero header img,.t-sky .hero header img,.t-pop .hero header img,.t-local .hero header img{filter:none}

/* 캡처용(?shot=1): 움직임 없이 최종 상태로 */
.shot *{animation:none!important;transition:none!important}
.shot .slot img{transform:none;opacity:1}
.t-night .sheet .src,.t-night .sheet .calm{color:var(--sub);opacity:1}

/* 신청 칸 변형 */
.safe-note{text-align:center;font-size:12.5px;color:var(--sub);margin-top:10px}
.stepno{font-size:13px;font-weight:800;color:var(--blue);margin-bottom:4px}
.f-step .inp{height:64px}.f-step .inp input{font-size:22px;letter-spacing:.02em}
.f-step .next-f{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)}
.calm-list{list-style:none;display:grid;gap:6px;margin:14px 0 4px}
.calm-list li{background:var(--sky);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--sub)}
.calm-list b{display:block;font-size:15px;color:var(--navy)}