/* playB 브랜드 모션 — 2026-11-10 재구성
   하나의 진행률(0~1)이 모든 요소 위치를 정한다. 장면은 1440×900(가로) / 720×1280(세로) 설계 캔버스 기준 좌표. */
:root{--cream:#f8f3e8;--blue:#3451df;--ink:#262a38;--muted:#6b7183;--pt:#11a37f;--ptsoft:#e7f6f1}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* 상단 헤더 */
header{position:fixed;z-index:40;top:0;left:0;width:100%;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:rgba(248,243,232,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.logo{font-size:26px;letter-spacing:-1.2px;font-weight:800;color:var(--ink)}
.logo span{color:var(--blue)}
.site-nav{display:flex;gap:34px;font-size:15px;color:#3d4252}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--blue)}
#restart{border:0;background:none;font:inherit;font-size:14px;color:var(--muted);cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* 스크롤 구간 + 고정 무대 */
#brand{position:relative;height:1500vh}
#brand.reduced{height:600vh}
.pb-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--cream)}
.pb-canvas{position:absolute;left:50%;top:50%;transform-origin:0 0}
.pb-canvas>*{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity}

/* 글자 */
.pb-kicker,.pb-sub{width:100%;text-align:center;color:var(--muted)}
.pb-kicker span,.pb-sub span{position:absolute;left:0;right:0;text-align:center}
.pb-kicker{font-size:17px}
.pb-sub{font-size:20px;color:#3d4252;line-height:1.5}
.pb-word{margin:0;font-weight:800;letter-spacing:-.06em;line-height:1;white-space:nowrap;display:flex;transform-origin:50% 0}
.pb-word .b{color:var(--blue)}
.pb-tailwin{display:inline-block;overflow:hidden;position:relative;height:1.2em;margin-top:-.1em;padding-top:.1em;vertical-align:top}
.pb-tailwin span{position:absolute;left:0;top:.1em;color:var(--blue);white-space:nowrap;padding-right:.08em}

/* 인물 */
.pb-person img{position:absolute;inset:0;width:100%;height:100%;visibility:hidden}
.pb-person img.on{visibility:visible}

/* 지하철 */
.pb-car{overflow:visible}
.pb-car img{position:absolute;display:block}
.pb-car{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 97%);mask-image:linear-gradient(90deg,#000 88%,transparent 97%)}
.pb-pano{position:absolute;overflow:hidden}
.pb-pano img{height:100%;width:auto;max-width:none}

/* 콘텐츠 카드 */
.pb-card{width:150px;border-radius:12px;background:#fff;padding:7px;box-shadow:0 12px 30px rgba(38,42,56,.13);transform-origin:50% 50%}
.pb-card img{display:block;width:100%;border-radius:7px}

/* 알림 */
.pb-chip{background:#fff;border:1px solid #e6e0d2;border-radius:999px;padding:12px 20px 12px 16px;font-size:16px;display:flex;gap:10px;align-items:center;box-shadow:0 8px 24px rgba(38,42,56,.08);white-space:nowrap}
.pb-chip i{width:9px;height:9px;border-radius:50%;background:var(--blue)}

/* 렌즈 */
svg.pb-lens{overflow:visible;pointer-events:none}

/* 파트너 앱 (가상 교통 앱 '출근길') — 실제 서비스 UI가 아닌 연동 개념 설명용 */
.pb-phone{width:290px;height:560px}
.pb-phone .bezel{width:100%;height:100%;border:3px solid var(--ink);border-radius:46px;background:#fff;padding:9px;box-shadow:0 30px 60px rgba(38,42,56,.14)}
.pb-phone .screen{width:100%;height:100%;border-radius:37px;background:#f3f5f7;overflow:hidden;position:relative;font-size:11px;color:#1f2430;letter-spacing:-.02em}
.pb-phone .status{height:28px;display:flex;justify-content:space-between;align-items:center;padding:2px 22px 0;font-size:11px;font-weight:700;background:#fff}
.pb-phone .sig{display:flex;align-items:flex-end;gap:1.5px}.pb-phone .sig i{width:3px;background:#1f2430;border-radius:1px}.pb-phone .sig i:nth-child(1){height:4px}.pb-phone .sig i:nth-child(2){height:6px}.pb-phone .sig i:nth-child(3){height:8px}.pb-phone .sig b{width:16px;height:8px;border:1.4px solid #1f2430;border-radius:2.5px;margin-left:4px;background:linear-gradient(90deg,#1f2430 70%,transparent 70%)}
.pb-phone .apphdr{display:flex;justify-content:space-between;align-items:center;padding:4px 14px 6px;background:#fff}
.pb-phone .brandmark{display:flex;align-items:center;gap:6px}.pb-phone .brandmark em{width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,#3fd3a0,#11a37f);position:relative}.pb-phone .brandmark em:after{content:"";position:absolute;left:5px;top:4px;width:6px;height:9px;border:2px solid #fff;border-top:0;border-radius:0 0 4px 4px}
.pb-phone .brandmark b{font-size:16px;letter-spacing:-.05em}
.pb-phone .hdricons{display:flex;gap:10px}.pb-phone .hdricons svg{width:17px;height:17px;fill:none;stroke:#3a4150;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pb-phone .arr{margin:4px 10px 0;background:#fff;border-radius:14px;padding:9px 12px;box-shadow:0 1px 0 #e8ebf0}
.pb-phone .arr-top{display:flex;align-items:center;gap:8px}
.pb-phone .line{width:20px;height:20px;border-radius:50%;background:#00a84d;color:#fff;font-weight:800;font-size:11px;display:grid;place-items:center}
.pb-phone .arr-top b{font-size:13px;display:block}.pb-phone .arr-top small{font-size:9.5px;color:#7a8190}
.pb-phone .loc{margin-left:auto;font-size:9px;color:#11a37f;background:#e7f6f1;border-radius:999px;padding:3px 7px;font-weight:700}
.pb-phone .arr-time{display:flex;align-items:baseline;gap:6px;margin:8px 0 7px}
.pb-phone .arr-time b{font-size:19px;color:#e0484a;letter-spacing:-.04em}.pb-phone .arr-time span{font-size:10px;color:#4a5068}.pb-phone .arr-time em{margin-left:auto;font-style:normal;font-size:10px;color:#7a8190}
.pb-phone .arr-bus{display:flex;align-items:center;gap:7px;border-top:1px solid #eef0f3;padding-top:7px;font-size:10px;color:#4a5068}
.pb-phone .busno{background:#3d5bd9;color:#fff;font-weight:800;border-radius:4px;padding:1px 5px;font-size:9.5px}.pb-phone .arr-bus em{margin-left:auto;font-style:normal;font-weight:700;color:#1f2430}
.pb-phone .quick{display:flex;justify-content:space-between;padding:8px 12px 7px;margin-top:8px;background:#fff}
.pb-phone .quick div{width:58px;text-align:center;font-size:9.5px;color:#3a4150}
.pb-phone .quick img{display:block;width:30px;height:30px;margin:0 auto 3px}
.pb-phone .hub{background:#fff;margin-top:8px;padding:9px 12px}
.pb-phone h5{font-size:12.5px;letter-spacing:-.04em;margin:0 2px 8px}
.pb-phone .grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:50px 50px;gap:6px}
.pb-phone .tl{border-radius:12px;padding:8px 9px;position:relative;overflow:hidden}
.pb-phone .tl small{display:block;font-size:8.5px;opacity:.72}.pb-phone .tl b{font-size:12px;letter-spacing:-.04em}
.pb-phone .slot{position:absolute;right:4px;bottom:3px;width:40px;height:40px;background-size:contain;background-repeat:no-repeat;background-position:center}
.pb-phone .tl.big{grid-row:1 / span 2;background:linear-gradient(160deg,#fff6df,#ffecc2)}.pb-phone .tl.big .slot{width:76px;height:76px;right:6px;bottom:2px}
.pb-phone .tl.s1{background:linear-gradient(160deg,#eef5ff,#dcebff)}.pb-phone .tl.s2{background:linear-gradient(160deg,#eefaf1,#dbf2e2)}
.pb-phone .mission{background:#fff;margin-top:8px;padding:9px 12px 60px}
.pb-phone .row{display:flex;align-items:center;gap:9px;padding:4px 2px}
.pb-phone .row img{width:30px;height:30px;border-radius:9px}
.pb-phone .row div{flex:1}.pb-phone .row b{font-size:11px;display:block}.pb-phone .row small{font-size:9.5px;color:var(--pt)}
.pb-phone .row span{background:var(--pt);color:#fff;border-radius:7px;font-size:9.5px;padding:5px 9px;font-weight:700}
.pb-phone .tab{position:absolute;left:0;right:0;bottom:0;height:50px;background:rgba(255,255,255,.96);border-top:1px solid #eceef3;display:flex;justify-content:space-around;align-items:center;font-size:8.5px;color:#9aa0ad;padding-bottom:6px}
.pb-phone .tab span{display:flex;flex-direction:column;align-items:center;gap:3px}.pb-phone .tab i{width:16px;height:16px;border-radius:5px;background:#dfe3ea}
.pb-phone .tab .on{color:#1f2430;font-weight:700}.pb-phone .tab .on i{background:var(--pt)}

/* Benefit 카드 */
.pb-panel{background:#fff;border-radius:24px;box-shadow:0 18px 48px rgba(38,42,56,.09),0 1px 0 rgba(38,42,56,.04);padding:26px 28px 26px 28px;display:flex;flex-direction:column}
.pb-panel img{width:64px;height:64px;margin:-6px 0 10px -6px}
.pb-panel h4{font-size:14px;color:var(--blue);font-weight:700;margin:0 0 6px;letter-spacing:-.01em}
.pb-panel p{font-size:28px;font-weight:700;letter-spacing:-.045em;margin:0;line-height:1.25}
.pb-panel .desc{font-size:15px;line-height:1.6;color:#5a6070;margin-top:10px;word-break:keep-all}
.pb-panel .toast{margin-top:18px;align-self:flex-start;background:#262a38;color:#fff;border-radius:12px;padding:11px 15px;font-size:14px;display:flex;align-items:center;gap:9px}
.pb-panel .toast i{width:16px;height:16px;border-radius:50%;background:#2fbf8f;position:relative}.pb-panel .toast i:after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pb-panel .week{display:flex;gap:7px;margin-top:18px}
.pb-panel .week span{width:30px;height:30px;border-radius:9px;background:#eef1fb;color:#8a90a8;font-size:12px;display:grid;place-items:center;font-weight:700}
.pb-panel .week span.on{background:var(--blue);color:#fff}
.pb-tall .pb-panel{padding:18px 22px}
.pb-tall .pb-panel img{width:46px;height:46px;margin:0 0 6px -4px}
.pb-tall .pb-panel .desc,.pb-tall .pb-panel .toast,.pb-tall .pb-panel .week{display:none}
.pb-tall .pb-panel p{font-size:25px}

/* 하단 조작부 */
.pb-bottom{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:0 40px 26px;z-index:5;font-size:13px;color:var(--muted)}
.pb-bottom button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:6px 4px}
#pb-autoplay{background:rgba(248,243,232,.9);border:1px solid #cfc8b8;border-radius:999px;padding:7px 14px;margin-right:14px;color:var(--ink)}
.pb-scenes{display:flex;gap:18px}
.pb-scenes button.active{color:var(--ink);font-weight:700}
.pb-progress{position:absolute;left:0;bottom:0;height:3px;background:var(--blue);width:0;z-index:6}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:760px){
  header{height:60px;padding:0 18px}
  .logo{font-size:22px}
  .site-nav{gap:14px;font-size:13px}
  #restart{display:none}
  .pb-bottom{padding:0 16px 18px}
  .pb-hint{display:none}
}