/* ==========================================================================
   (주)투어수다 - 전역 플로팅 위젯 (AI챗봇 / 카카오상담 / 우측사이드바+장바구니 / 영상광고)
   _reference_source App.tsx 의 4개 위젯을 이식. 전부 프론트 디자인 + 기본 클릭 동작만 구현.
   ========================================================================== */

/* ---------- FloatingVideoAd (좌하단) ---------- */
.suda-videoad{
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: 240px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(17,24,39,.18);
    overflow: hidden;
    z-index: 450;
    transition: width .3s ease;
}
.suda-videoad.is-expanded{ width: 400px; }
.suda-videoad.is-hidden{ display: none; }
.suda-videoad-close{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 0;
    background: rgba(0,0,0,.35);
    color: #fff;
    opacity: 0;
    transition: opacity .2s ease;
}
.suda-videoad:hover .suda-videoad-close{ opacity: 1; }
.suda-videoad-media{
    position: relative;
    aspect-ratio: 4/5;
    background: #111827;
    overflow: hidden;
}
.suda-videoad.is-expanded .suda-videoad-media{ aspect-ratio: 16/9; }
.suda-videoad-media video{ width: 100%; height: 100%; object-fit: cover; }
.suda-videoad-badge{
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--suda-red, #ef4444);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
}
.suda-videoad-dot{ width: 5px; height: 5px; border-radius: 999px; background: #fff; animation: suda-pulse 1.4s infinite; }
.suda-videoad-controls{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
    opacity: 0;
    transition: opacity .2s ease;
}
.suda-videoad-media:hover .suda-videoad-controls{ opacity: 1; }
.suda-videoad-controls button{
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
}
#sudaVideoAdMute{ width: 28px; height: 28px; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; }
#sudaVideoAdMute .suda-icon-unmuted{ display: none; }
#sudaVideoAdMute.is-unmuted .suda-icon-muted{ display: none; }
#sudaVideoAdMute.is-unmuted .suda-icon-unmuted{ display: inline-flex; }
#sudaVideoAdExpand{ padding: 6px 12px; background: var(--suda-blue, #2563eb); }
.suda-videoad-info{ padding: 14px; }
.suda-videoad-info h4{ font-size: 14px; font-weight: 700; color: var(--suda-gray-900, #111827); margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suda-videoad-info p{ font-size: 12px; color: var(--suda-gray-500, #6b7280); margin: 0 0 10px; }
.suda-videoad-info button{
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: 10px;
    background: #eef2ff;
    color: var(--suda-blue, #2563eb);
    font-size: 12px;
    font-weight: 700;
}
.suda-videoad-info button:hover{ background: #e0e7ff; }

/* ---------- FloatingSidebar (우측 세로 아이콘 독) ---------- */
.suda-fsidebar{
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 350;
    display: none;
    flex-direction: column;
    gap: 10px;
}
.suda-fsidebar-btn{
    position: relative;
    width: 56px;
    height: 56px;
    background: #fff;
    border: 1px solid var(--suda-gray-100, #f3f4f6);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(17,24,39,.1);
    color: var(--suda-gray-500, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform .25s ease, color .25s ease, background .25s ease;
}
.suda-fsidebar-btn:hover{ color: var(--suda-blue, #2563eb); background: #eff6ff; transform: translateX(-4px); }
.suda-fsidebar-badge{
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--suda-red, #ef4444);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.suda-fsidebar-tip{
    position: absolute;
    right: 100%;
    margin-right: 12px;
    padding: 5px 10px;
    background: var(--suda-gray-900, #111827);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.suda-fsidebar-btn:hover .suda-fsidebar-tip{ opacity: 1; }
.suda-fsidebar-top{
    width: 56px;
    height: 40px;
    border: 0;
    border-radius: 14px;
    background: var(--suda-gray-900, #111827);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
}

/* ---------- 장바구니 드로어 ---------- */
.suda-cart-dim{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,.4);
    z-index: 599;
}
.suda-cart-dim.is-open{ display: block; }
.suda-cart-drawer{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background: #fff;
    z-index: 600;
    box-shadow: -20px 0 40px rgba(0,0,0,.15);
    transform: translateX(100%);
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
}
.suda-cart-drawer.is-open{ transform: translateX(0); }
.suda-cart-head{
    padding: 24px;
    border-bottom: 1px solid var(--suda-gray-100, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    color: var(--suda-gray-900, #111827);
}
.suda-cart-head b{ color: var(--suda-blue, #2563eb); margin-left: 6px; }
.suda-cart-head button{ border: 0; background: none; font-size: 19px; color: var(--suda-gray-400, #9ca3af); }
.suda-cart-empty{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 24px;
}
.suda-cart-empty-icon{
    width: 72px;
    height: 72px;
    border-radius: 24px;
    background: var(--suda-gray-50, #f9fafb);
    color: var(--suda-gray-200, #e5e7eb);
    font-size: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.suda-cart-empty p{ color: var(--suda-gray-400, #9ca3af); font-weight: 700; margin: 0; }
.suda-cart-empty button{
    border: 0;
    background: none;
    color: var(--suda-blue, #2563eb);
    font-weight: 700;
}
.suda-cart-empty button:hover{ text-decoration: underline; }

/* ---------- 카카오 상담 FAB ---------- */
.suda-kakao-fab{
    position: fixed;
    right: 20px;
    bottom: 90px;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 16px;
    min-width: 56px;
    height: 56px;
    border: 0;
    border-radius: 999px;
    background: #FEE500;
    color: #3C1E1E;
    font-size: 24px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.suda-kakao-fab span{
    max-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: max-width .25s ease, margin-left .25s ease;
}
.suda-kakao-fab:hover span{ max-width: 100px; margin-left: 8px; }
.suda-kakao-fab:hover{ transform: scale(1.05); }

/* ---------- AI 챗봇 FAB + 패널 ---------- */
.suda-ai-fab{
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 500;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--suda-blue, #2563eb);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 10px 24px rgba(37,99,235,.35);
    transition: transform .25s ease;
}
.suda-ai-fab:hover{ transform: scale(1.08); }
.suda-ai-panel{
    display: none;
    position: fixed;
    right: 20px;
    bottom: 88px;
    z-index: 500;
    width: min(360px, calc(100vw - 40px));
    height: 500px;
    max-height: 70vh;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(17,24,39,.25);
    border: 1px solid var(--suda-gray-100, #f3f4f6);
    overflow: hidden;
    flex-direction: column;
}
.suda-ai-panel.is-open{ display: flex; }
.suda-ai-head{
    background: var(--suda-blue, #2563eb);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
}
.suda-ai-head button{ border: 0; background: none; color: #fff; font-size: 16px; }
.suda-ai-messages{
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--suda-gray-50, #f9fafb);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.suda-ai-msg{
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
}
.suda-ai-msg-bot{ align-self: flex-start; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); border-bottom-left-radius: 4px; }
.suda-ai-msg-user{ align-self: flex-end; background: var(--suda-blue, #2563eb); color: #fff; border-bottom-right-radius: 4px; }
.suda-ai-input-row{
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--suda-gray-100, #f3f4f6);
    background: #fff;
}
.suda-ai-input-row input{
    flex: 1;
    border: 0;
    background: var(--suda-gray-100, #f3f4f6);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
}
.suda-ai-input-row button{
    width: 40px;
    border: 0;
    border-radius: 12px;
    background: var(--suda-blue, #2563eb);
    color: #fff;
}
.suda-ai-input-row button:hover{ background: var(--suda-blue-dark, #1d4ed8); }

@media (min-width: 1280px){
    .suda-fsidebar{ display: flex; }
}

@media (max-width: 767px){
    .suda-videoad{ display: none; }
}




@media screen and (max-width:1024px) {
    .suda-videoad-badge{ font-size: 0.98vw; }
    .suda-videoad-controls button{ font-size: 1.07vw; }
    .suda-videoad{ width: 23.44vw; }
    .suda-videoad.is-expanded{ width: 39.06vw; }
    .suda-videoad-info h4{ font-size: 1.37vw; }
    .suda-videoad-info p{ font-size: 1.17vw; }
    .suda-videoad-info button{ font-size: 1.17vw; }
    .suda-fsidebar-btn{ font-size: 2.34vw; width: 5.47vw; height: 5.47vw; }
    .suda-fsidebar-badge{ font-size: 1.07vw; }
    .suda-fsidebar-tip{ font-size: 1.17vw; }
    .suda-fsidebar-top{ font-size: 1.07vw; width: 5.47vw; height: 3.91vw; }
    .suda-cart-head button{ font-size: 1.86vw; }
    .suda-cart-empty-icon{ font-size: 2.83vw; }
    .suda-kakao-fab{ font-size: 2.34vw; min-width: 5.47vw; height: 5.47vw; }
    .suda-kakao-fab span{ font-size: 1.37vw; }
    .suda-ai-fab{ font-size: 2.34vw; width: 5.47vw; height: 5.47vw; }
    .suda-ai-head{ font-size: 1.37vw; }
    .suda-ai-head button{ font-size: 1.56vw; }
    .suda-ai-msg{ font-size: 1.37vw; }
    .suda-ai-input-row input{ font-size: 1.37vw; }
}




@media screen and (max-width:768px) {
    .suda-videoad-badge{ font-size: 1.30vw; }
    .suda-videoad-controls button{ font-size: 1.43vw; }
    .suda-videoad{ width: 31.25vw; }
    .suda-videoad.is-expanded{ width: 52.08vw; }
    .suda-videoad-info h4{ font-size: 1.82vw; }
    .suda-videoad-info p{ font-size: 1.56vw; }
    .suda-videoad-info button{ font-size: 1.56vw; }
    .suda-fsidebar-btn{ font-size: 3.13vw; width: 7.29vw; height: 7.29vw; }
    .suda-fsidebar-badge{ font-size: 1.43vw; }
    .suda-fsidebar-tip{ font-size: 1.56vw; }
    .suda-fsidebar-top{ font-size: 1.43vw; width: 7.29vw; height: 5.21vw; }
    .suda-cart-head button{ font-size: 2.47vw; }
    .suda-cart-empty-icon{ font-size: 3.78vw; }
    .suda-kakao-fab{ font-size: 3.13vw; min-width: 7.29vw; height: 7.29vw; }
    .suda-kakao-fab span{ font-size: 1.82vw; }
    .suda-ai-fab{ font-size: 3.13vw; width: 7.29vw; height: 7.29vw; }
    .suda-ai-head{ font-size: 1.82vw; }
    .suda-ai-head button{ font-size: 2.08vw; }
    .suda-ai-msg{ font-size: 1.82vw; }
    .suda-ai-input-row input{ font-size: 1.82vw; }
}




@media screen and (max-width:480px) {
    .suda-videoad-badge{ font-size: 2.08vw; }
    .suda-videoad-controls button{ font-size: 2.29vw; }
    .suda-videoad-info h4{ font-size: 2.92vw; }
    .suda-videoad-info p{ font-size: 2.50vw; }
    .suda-videoad-info button{ font-size: 2.50vw; }
    .suda-fsidebar-btn{ font-size: 5.00vw; width: 11.67vw; height: 11.67vw; }
    .suda-fsidebar-badge{ font-size: 2.29vw; }
    .suda-fsidebar-tip{ font-size: 2.50vw; }
    .suda-fsidebar-top{ font-size: 2.29vw; width: 11.67vw; height: 8.33vw; }
    .suda-cart-head button{ font-size: 3.96vw; }
    .suda-cart-empty-icon{ font-size: 6.04vw; }
    .suda-kakao-fab{ font-size: 5.00vw; min-width: 11.67vw; height: 11.67vw; }
    .suda-kakao-fab span{ font-size: 2.92vw; }
    .suda-ai-fab{ font-size: 5.00vw; width: 11.67vw; height: 11.67vw; }
    .suda-ai-head{ font-size: 2.92vw; }
    .suda-ai-head button{ font-size: 3.33vw; }
    .suda-ai-msg{ font-size: 2.92vw; }
    .suda-ai-input-row input{ font-size: 2.92vw; }
}