/* Desktop hide */
  .wj-bottom-nav{ display:none; }

  @media (max-width: 768px){
    :root{
      --wj-h: 56px;
      --wj-gap: 6px;
      --wj-radius: 10px;
      --wj-ease: cubic-bezier(.2,.8,.2,1);
      --wj-dur: 220ms;
      --wj-blue: #065CF5;
      --wj-safe: env(safe-area-inset-bottom, 0px);
    }

    /* Bottom nav */
    .wj-bottom-nav{
      display:flex;
      position:fixed;
      left:0; right:0; bottom:0;
      height: calc(var(--wj-h) + var(--wj-safe));
      padding: 0 var(--wj-gap) var(--wj-safe);
      background:#fff;
      border-top:1px solid #e5e5e5;
      z-index:9999;

      transform: translateY(0);
      transition: transform var(--wj-dur) var(--wj-ease);
      will-change: transform;
    }

    /* ChannelTalk open => slide out */
    body.wj-ct-open .wj-bottom-nav{
      transform: translateY(110%);
      pointer-events:none;
    }

    /* ✅ 특정 페이지에서는 네비 자체 숨김 */
    body.wj-nav-hidden .wj-bottom-nav{
      display:none !important;
    }

    /* Items */
    .wj-bottom-nav a{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      height:44px;
      margin:auto 4px;
      padding:0 6px;
      font-size:12px;
      color:#666;
      text-decoration:none;
      font-weight:600;
      letter-spacing:-0.2px;
      white-space:nowrap;
      border-radius:var(--wj-radius);
      overflow:visible;
      flex:0.95;
      -webkit-tap-highlight-color: transparent;
      user-select:none;
    }

    .wj-bottom-nav a.wj-active{
      color:var(--wj-blue);
      font-weight:700;
    }

    /* Width balance */
    .wj-bottom-nav a.wj-booking{ flex:1.45; }
    .wj-bottom-nav a.wj-chat{ flex:1.15; }

    /* Page padding (nav 보일 때만) */
    body{
      padding-bottom: calc(var(--wj-h) + var(--wj-safe)) !important;
    }
    /* ✅ nav 숨김 페이지에서는 패딩 제거 */
    body.wj-nav-hidden{
      padding-bottom: 0 !important;
    }

    /* Scroll lock */
    body.wj-scroll-lock{
      position: fixed !important;
      overflow: hidden !important;
      width:100% !important;
      left:0; right:0;
    }

    /* Booking base */
    .wj-booking{
      background:var(--wj-blue);
      color:#fff !important;
      font-weight:800;
      z-index:1;
    }

    /* ChannelTalk open => CTA effect OFF */
    body.wj-ct-open .wj-booking{
      animation:none !important;
    }
    body.wj-ct-open .wj-booking::before,
    body.wj-ct-open .wj-booking::after{
      content:none !important;
      animation:none !important;
      opacity:0 !important;
    }

    html, body{ overscroll-behavior:none; }
  }

  /* ===== CTA Rainbow Effect ===== */
  @media (max-width: 768px){
    .wj-booking.wj-rainbow-on{
      animation: wjPop 3s infinite;
    }

    .wj-booking.wj-rainbow-on::before{
      content:"";
      position:absolute;
      inset:-6px;
      z-index:-1;
      background: conic-gradient(
        from 0deg,
        #ff0059, #ff7a00, #ffe600,
        #15ff00, #00e5ff, #6a5cff,
        #ff00e1, #ff0059
      );
      filter: blur(14px) saturate(140%);
      border-radius:14px;
      opacity:0;
      transform: scale(0.95);
      animation: wjRainbow 3s infinite;
      pointer-events:none;
    }

    .wj-booking.wj-rainbow-on::after{
      content:"";
      position:absolute;
      inset:-30%;
      background: linear-gradient(
        115deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 42%,
        rgba(255,255,255,0.65) 50%,
        rgba(255,255,255,0) 58%,
        rgba(255,255,255,0) 100%
      );
      mix-blend-mode: screen;
      transform: translateX(-130%) rotate(8deg);
      opacity:0;
      animation: wjShine 3s infinite;
      pointer-events:none;
    }

    @keyframes wjRainbow{
      0%,65%{opacity:0;transform:scale(0.95);}
      75%{opacity:.9;transform:scale(1.02);}
      86%{opacity:.6;transform:scale(1);}
      100%{opacity:0;transform:scale(0.97);}
    }
    @keyframes wjShine{
      0%,60%{opacity:0;transform:translateX(-130%) rotate(8deg);}
      70%{opacity:.85;transform:translateX(0) rotate(8deg);}
      85%,100%{opacity:0;transform:translateX(130%) rotate(8deg);}
    }
    @keyframes wjPop{
      0%,76%{transform:scale(1);}
      80%{transform:scale(1.01);}
      86%{transform:scale(1.005);}
      100%{transform:scale(1);}
    }

    @media (prefers-reduced-motion: reduce){
      .wj-bottom-nav,
      .wj-booking,
      .wj-booking::before,
      .wj-booking::after{
        animation:none !important;
        transition:none !important;
      }
    }
  }