/* Tailwind의 기본 sans 폰트를 강제 변경 */
:root {
    --tw-font-sans: 'Pretendard', sans-serif !important;
    --main-color: #3CCBDB !important;
    --main-color-hover: #16B9CB !important;
    --main-color-soft: #ECF9FB !important;
    --main-color-tint: #D5F2F7 !important;
    --main-color-deep: #2D929E !important;
    --accent-yellow: #F7E948 !important;
    --accent-green: #40A436 !important;
    --hot-color: #FF5151 !important;
    --hot-color-soft: #FFE9E9 !important;
    --hot-color-deep: #E63333 !important;
    --gradient-hero: linear-gradient(135deg, #3CCBDB 0%, #16B9CB 100%) !important;
    --gradient-hot: linear-gradient(135deg, #FF5151 0%, #FE6F61 100%) !important;
    --subcolor-red: #FF6B7A !important;
    --subcolor-blue: #52ABF8 !important;
    --bg-color: #FAFAFA !important;
    --bg-soft: #F5F5FA !important;
    --line-color: #E4E8EE !important;
    --line-color-light: #EEEEEE !important;
    --d-font-color: #222222 !important;
    --font-color: #666666 !important;
    --dark-section-bg: #1F2A30 !important;
}

/* body에 폰트 강제 적용 */
body {
    font-family: 'Pretendard', sans-serif !important;
}

.blog {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/blog.svg);
    background-size: cover;
}
.youtube {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/youtube.svg);
    background-size: cover;
}
.instagram {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/instagram.svg);
    background-size: cover;
}
.tiktok {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/tiktok.svg);
    background-size: cover;
}

.instagram_reels {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/instagram_reels.svg);
    background-size: cover;
}
.youtube_shorts {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/youtube_shorts.svg);
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.shop {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/shop.svg);
    background-size: cover;
}

.off {
    filter: grayscale(100%);
    opacity: 0.3;
}

.clip {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/clip.svg);
    background-size: cover;
}
.naver {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/influencer.svg);
    background-size: cover;
}
.threads {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/threads.svg);
    background-size: cover;
}
.bnone {
    border: none !important;
    box-shadow: none !important;
}

.zzim {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(/img/zzim.svg);
    background-size: cover;
}

.zzim.on {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(/img/zzim_on.svg);
    background-size: cover;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
    /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.touch-scroll {
    -webkit-overflow-scrolling: touch;
}

.checkbox-icon {
    background: url('/img/checkbox_off.svg') no-repeat center / cover;
}

input:checked + .checkbox-icon {
    background-image: url('/img/checkbox_on.svg');
}

.zzim_btn {
    width: 50px;
    height: 50px;
    background-image: url(/img/zzim.svg);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    border: solid 1px #ececec;
    background-color: #d9d9d9;
}

.zzim_btn:hover {
    width: 50px;
    height: 50px;
    background-image: url(/img/zzim_on.svg);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    background-color: var(--main-color);
}

.zzim_btn.on {
    width: 50px;
    height: 50px;
    background-image: url(/img/zzim_on.svg);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    border: solid 1px #ececec;
    background-color: var(--main-color);
}

.zzim.on {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(/img/zzim_on.svg);
    background-size: cover;
}
.custom-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #ffffff !important;
    opacity: 0.2 !important;
    margin: 0 5px !important;
    border-radius: 10px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.custom-pagination .swiper-pagination-bullet-active {
    width: 30px !important;
    background: var(--main-color, #ffcd00) !important;
    opacity: 1 !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none !important;
    content: '' !important;
    font-size: 0 !important;
}

.swiper-navigation-icon {
    display: none !important;
}

/* ===== GNB (대메뉴) 디자인 ===== */
.tzGnb { position: relative; }

.tzGnbItem {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    color: #222;
    font-weight: 600;
    transition: color .2s ease;
    cursor: pointer;
    white-space: nowrap;
}
.tzGnbItem::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    background: linear-gradient(90deg, #3CCBDB 0%, #16B9CB 100%);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tzGnbItem:hover { color: var(--main-color); }
.tzGnbItem:hover::after,
.tzGnbItem.active::after { transform: scaleX(1); }
.tzGnbItem.active { color: var(--main-color-deep); }

.tzGnbBadge {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 5px;
    border-radius: 4px;
    background: var(--main-color);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3px;
    margin-left: 2px;
    line-height: 1;
    box-shadow: 0 2px 6px -2px rgba(60, 203, 219, 0.6);
}

.tzGnbCta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 700;
    transition: all .2s ease;
    white-space: nowrap;
    cursor: pointer;
}
.tzGnbCta--cyan {
    background: var(--main-color);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(60, 203, 219, 0.5);
}
.tzGnbCta--cyan:hover {
    background: var(--main-color-hover);
    box-shadow: 0 6px 16px -4px rgba(22, 185, 203, 0.6);
    transform: translateY(-1px);
}
.tzGnbCta--ghost {
    background: #fff;
    color: #222;
    border: 1px solid var(--line-color);
}
.tzGnbCta--ghost:hover {
    background: var(--main-color-soft);
    color: var(--main-color-deep);
    border-color: var(--main-color-tint);
}
.tzGnbCta.active.tzGnbCta--cyan { background: var(--main-color-deep); }
.tzGnbCta.active.tzGnbCta--ghost {
    background: var(--main-color-soft);
    color: var(--main-color-deep);
    border-color: var(--main-color-tint);
}

.tzGnbAll { transition: all .2s ease; font-weight: 700; }
.tzGnbAll:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(60, 203, 219, 0.4); }

/* ===== TOP UTILITY BAR ===== */
.tzTopItem {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    height: 36px;
    font-size: 12px;
    font-weight: 500;
    color: #555;
    transition: color .15s ease;
    white-space: nowrap;
}
.tzTopItem:hover { color: var(--main-color-deep); }

.tzTopIconBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 2px;
    border-radius: 50%;
    color: #555;
    transition: all .15s ease;
}
.tzTopIconBtn:hover {
    background: var(--main-color-soft);
    color: var(--main-color-deep);
}

.tzBadge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--main-color);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--bg-soft);
}

.tzTopDropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px -10px rgba(31, 42, 48, 0.15);
    font-size: 12px;
    color: #555;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    z-index: 100;
}
/* 트리거 ↔ 드롭다운 사이 hover 브리지 */
.tzTopDropdown::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
    background: transparent;
}
.relative.group:hover .tzTopDropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 알림창 등 inline 드롭다운 hover 브리지 */
.tzHoverBridge {
    position: relative;
}
.tzHoverBridge::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
    background: transparent;
}

/* ===== 카테고리 아이콘 (호버 시 화이트 틴트) ===== */
.tzCategoryIcon {
    filter: none;
    transition: filter .25s ease, transform .3s ease;
}
.group:hover .tzCategoryIcon {
    filter: brightness(0) invert(1);
}

/* ===== 배너 카드 ===== */
.tzBannerCard {
    transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1);
}
.tzBannerCard:hover {
    transform: translateY(-4px);
}

/* ===== SNS 채널 칩 (인플루언서 목록/상세 공통) ===== */
.tzSnsChip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    min-height: 24px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -.2px;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
    background: #F6F7F9;
    color: #6b7280;
    line-height: 1;
    border: 1px solid transparent;
}
.tzSnsChip > .tzSnsIcon {
    width: 14px; height: 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: .85;
}
.tzSnsChip > .tzSnsIcon img { width: 11px; height: 11px; }
.tzSnsChip:hover {
    transform: translateY(-1px);
    background: #fff;
    border-color: var(--line-color);
}

/* 채널별 살짝의 브랜드 톤 (배경은 거의 동일, 글자색만 살짝 차이) */
.tzSns--youtube   { color: #8B5252; }
.tzSns--instagram { color: #8C5A7B; }
.tzSns--blog      { color: #4F7B4F; }
.tzSns--tiktok    { color: #4b5563; }
.tzSns--clip      { color: #4F8369; }
.tzSns--threads   { color: #4b5563; }


/* ===== 메가메뉴 hover 브리지 ===== */
/* 트리거 버튼과 메뉴 사이 공간을 hover 영역으로 잡아 메뉴가 닫히지 않게 함 */
.tzGnbAll { position: relative; }
.tzGnbAll::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px;
    background: transparent;
    pointer-events: auto;
}


/* ============================================== */
/* ===== SweetAlert2 (tzAlert / tzConfirm) ====== */
/* ============================================== */
.tzSwalPopup {
    border-radius: 20px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px -16px rgba(15, 23, 42, .25),
                0 8px 20px -8px rgba(60, 203, 219, .15) !important;
    border: 1px solid var(--line-color) !important;
    width: min(94vw, 400px) !important;
    font-family: 'Pretendard', sans-serif !important;
}
.tzSwalBackdrop {
    background: rgba(15, 23, 42, .55) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}
/* 기본 swal 아이콘 외곽 ring/line 숨기기 → 커스텀 박스만 보이게 */
.tzSwalIcon.swal2-icon {
    width: 72px !important;
    height: 72px !important;
    margin: 26px auto 18px !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}
.tzSwalIcon.swal2-icon .swal2-icon-content { font-size: 0 !important; line-height: 0 !important; }
.tzSwalIcon.swal2-icon .swal2-success-ring,
.tzSwalIcon.swal2-icon .swal2-success-circular-line-left,
.tzSwalIcon.swal2-icon .swal2-success-circular-line-right,
.tzSwalIcon.swal2-icon .swal2-success-fix,
.tzSwalIcon.swal2-icon [class^=swal2-success-line],
.tzSwalIcon.swal2-icon [class^=swal2-x-mark-line],
.tzSwalIcon.swal2-icon .swal2-x-mark { display: none !important; }

/* ===== 커스텀 아이콘 박스 ===== */
.tzSwalIconBox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    position: relative;
}
.tzSwalIconBox::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 26px;
    opacity: .35;
    z-index: 0;
}
.tzSwalIconBox svg {
    width: 36px;
    height: 36px;
    position: relative;
    z-index: 1;
    display: block;
}
/* 종류별 컬러 */
.tzSwalIconBox-warning  { background: #FEF3C7; color: #D97706; }
.tzSwalIconBox-warning::before  { background: #FDE68A; }

.tzSwalIconBox-info,
.tzSwalIconBox-question {
    background: var(--main-color-soft);
    color: var(--main-color-deep);
}
.tzSwalIconBox-info::before,
.tzSwalIconBox-question::before {
    background: var(--main-color-tint);
}

.tzSwalIconBox-success  { background: #D1FAE5; color: #059669; }
.tzSwalIconBox-success::before  { background: #A7F3D0; }

.tzSwalIconBox-error    { background: #FEE2E2; color: #DC2626; }
.tzSwalIconBox-error::before    { background: #FECACA; }
.tzSwalTitle {
    color: var(--d-font-color) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    padding: 0 24px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
.tzSwalContent {
    color: #4b5563 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    padding: 8px 24px 24px !important;
    margin: 0 !important;
    word-break: keep-all !important;
}
.tzSwalActions {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 20px !important;
    background: var(--bg-soft) !important;
    border-top: 1px solid var(--line-color) !important;
    gap: 8px !important;
    display: flex !important;
    justify-content: center !important;
}
.tzSwalConfirm {
    flex: 1 1 auto !important;
    height: 44px !important;
    padding: 0 20px !important;
    border-radius: 12px !important;
    background: var(--main-color) !important;
    background-image: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 6px 14px -6px rgba(60, 203, 219, .55) !important;
    transition: background .2s ease, transform .15s ease !important;
}
.tzSwalConfirm:hover { background: var(--main-color-hover) !important; }
.tzSwalConfirm:active { transform: translateY(1px) !important; }
.tzSwalConfirm:focus { box-shadow: 0 0 0 3px rgba(60, 203, 219, .25) !important; }
.tzSwalCancel {
    flex: 0 0 auto !important;
    min-width: 90px !important;
    height: 44px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    background: #fff !important;
    background-image: none !important;
    color: #4b5563 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border: 1px solid var(--line-color) !important;
    transition: background .2s ease !important;
}
.tzSwalCancel:hover { background: #f3f4f6 !important; }

/* 팝업 등장 애니메이션 부드럽게 */
.swal2-show.tzSwalPopup { animation: tzSwalPop .22s cubic-bezier(0.16, 1, 0.3, 1) both !important; }
@keyframes tzSwalPop {
    0%   { opacity: 0; transform: translateY(8px) scale(.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}