@charset "utf-8";

/*
 * 웹 하단 메뉴의 플로팅 표면입니다. 네이티브 전환·복구는 기존 capability
 * 클래스와 어댑터가 담당하므로 DOM, display, 메뉴 동작을 변경하지 않습니다.
 * 바닥까지 닿는 투명 영역은 후기·알림의 고정 UI 실측 기준을 보존합니다.
 */
html:not(.kihya-native-tabbar-v1) .bottom_toolbar {
    --kh-web-tabbar-safe-bottom: env(safe-area-inset-bottom, 0px);
    left: var(--kh-content-center, 50%);
    right: auto;
    bottom: 0;
    width: calc(100% - 32px);
    max-width: 480px;
    height: calc(72px + var(--kh-web-tabbar-safe-bottom));
    margin: 0;
    padding: 6px 6px calc(18px + var(--kh-web-tabbar-safe-bottom));
    box-sizing: border-box;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: translateX(-50%);
    isolation: isolate;
    pointer-events: none;
}

html:not(.kihya-native-tabbar-v1) .bottom_toolbar::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: calc(12px + var(--kh-web-tabbar-safe-bottom));
    left: 0;
    z-index: 0;
    box-sizing: border-box;
    border: 1px solid rgba(225, 228, 233, 0.9);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 8px 28px rgba(24, 29, 38, 0.14), 0 2px 6px rgba(24, 29, 38, 0.04);
    content: "";
    pointer-events: none;
}

html:not(.kihya-native-tabbar-v1) .bottom_toolbar > a {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 48px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    border-radius: 18px;
    color: #717680;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    transition: background-color 0.15s ease, color 0.15s ease;
}

html:not(.kihya-native-tabbar-v1) .bottom_toolbar > a > p {
    height: 24px;
    margin: 0;
    padding: 0;
    line-height: 0;
}

html:not(.kihya-native-tabbar-v1) .bottom_toolbar > a img {
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
}

html:not(.kihya-native-tabbar-v1) .bottom_toolbar > a > span {
    margin: 0 !important;
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: -0.25px;
    white-space: nowrap;
}

html:not(.kihya-native-tabbar-v1) .bottom_toolbar > a.on {
    background: #fff0f1;
    color: #f7323f;
}

html:not(.kihya-native-tabbar-v1) .bottom_toolbar > a.on > span {
    font-weight: 700;
}

html:not(.kihya-native-tabbar-v1) .bottom_toolbar > a:active {
    background: #f4f5f7;
}

html:not(.kihya-native-tabbar-v1) .bottom_toolbar > a:focus-visible {
    outline: 2px solid #f7323f;
    outline-offset: 2px;
}

/* 구형 AI iframe과 소믈리에 V2가 만드는 동일한 런처 DOM을 함께 지원합니다. */
html:not(.kihya-native-tabbar-v1) .bottom_toolbar .bottom_ai_btn .ai-center-circle {
    position: static;
    left: auto;
    width: 36px;
    height: 26px;
    flex: 0 0 26px;
    margin: 0;
    border-radius: 12px;
    background: #fff0f1;
    box-shadow: none;
    transform: none;
}

html:not(.kihya-native-tabbar-v1) .bottom_toolbar .bottom_ai_btn .ai-center-circle i {
    color: #f7323f;
    font-size: 23px;
    line-height: 1;
}

html:not(.kihya-native-tabbar-v1) .bottom_toolbar .bottom_ai_btn .ai-center-badge {
    display: none;
}

html:not(.kihya-native-tabbar-v1) .bottom_toolbar .bottom_ai_btn:active .ai-center-circle {
    transform: scale(0.94);
}

@media (hover: hover) {
    html:not(.kihya-native-tabbar-v1) .bottom_toolbar > a:hover {
        background: #f4f5f7;
    }

    html:not(.kihya-native-tabbar-v1) .bottom_toolbar > a.on:hover {
        background: #ffe6e8;
    }
}

@media (min-width: 1200px) {
    html:not(.kihya-native-tabbar-v1) .bottom_toolbar {
        /* 현행 640px 본문의 중심. 확장 레이아웃에서는 공통 중심 변수를 사용합니다. */
        left: var(--kh-content-center, calc(50% + 275px));
    }
}

@media (prefers-reduced-motion: reduce) {
    html:not(.kihya-native-tabbar-v1) .bottom_toolbar > a,
    html:not(.kihya-native-tabbar-v1) .bottom_toolbar .ai-center-circle {
        transition: none;
    }
}