/* Two local design candidates. Scope begins only when the new component is present. */
.baro-site-contact {
    --contact-surface: rgba(249, 247, 243, .92);
    --contact-ink: #65584e;
    --contact-border: rgba(140, 119, 101, .18);
    --contact-divider: rgba(140, 119, 101, .1);
    --contact-hover: rgba(150, 100, 106, .08);
    --contact-nav: #447957;
    --contact-radius: 36px;
    --contact-shadow: 0 8px 26px rgba(64, 56, 49, .09);
    font-family: "Pretendard", "Asta Sans", sans-serif;
    color: var(--contact-ink);
}
.baro-site-contact[data-contact-theme="dark"] {
    --contact-surface: rgba(40, 33, 29, .78);
    --contact-ink: #f9f5ed;
    --contact-border: rgba(255, 245, 232, .15);
    --contact-divider: rgba(255, 245, 232, .1);
    --contact-hover: rgba(255, 245, 232, .09);
    --contact-nav: #fffdfa;
    --contact-radius: 18px;
    --contact-shadow: 0 12px 32px rgba(39, 28, 21, .18);
}
.baro-site-contact *, .baro-site-contact *::before, .baro-site-contact *::after { box-sizing: border-box; }
.baro-site-contact__desktop { position: fixed; z-index: 90; right: 18px; top: 50%; transform: translateY(-50%); width: 72px; }
.baro-site-contact__panel { padding: 8px 0; border: 1px solid var(--contact-border); border-radius: var(--contact-radius); background: var(--contact-surface); box-shadow: var(--contact-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.baro-site-contact__slot, .baro-site-contact__top-slot { position: relative; }
.baro-site-contact__slot + .baro-site-contact__slot { border-top: 1px solid var(--contact-divider); }
.baro-site-contact__item, .baro-site-contact__mobile > * { display: grid; place-items: center; width: 100%; height: 64px; padding: 0; color: var(--contact-ink); background: transparent; border: 0; text-decoration: none; appearance: none; transition: background .2s ease; }
.baro-site-contact svg { display: block; width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.baro-site-contact svg.baro-site-contact__naver { width: 32px; height: 32px; color: var(--contact-nav); fill: currentColor; stroke: none; }
.baro-site-contact__kakao { width: 34px; height: 34px; object-fit: contain; }
.baro-site-contact[data-contact-theme="dark"] .baro-site-contact__kakao { filter: brightness(0) invert(1); opacity: .94; }
.baro-site-contact__item svg, .baro-site-contact__item img { transition: transform .2s ease; }
.baro-site-contact__slot:hover svg, .baro-site-contact__slot:hover img, .baro-site-contact__slot:focus-within svg, .baro-site-contact__slot:focus-within img { transform: translateY(-1px) scale(1.05); }
.baro-site-contact__item:disabled, .baro-site-contact__mobile button:disabled { opacity: 1; cursor: default; pointer-events: none; }
.baro-site-contact__top-slot { margin-top: 14px; }
.baro-site-contact__top { display: grid; place-items: center; width: 100%; height: 38px; padding: 0; color: #847267; background: transparent; border: 0; border-radius: 20px; cursor: pointer; }
.baro-site-contact__top svg { width: 27px; height: 27px; }
.baro-site-contact[data-contact-theme="dark"] .baro-site-contact__top { background: var(--contact-surface); border: 1px solid var(--contact-border); color: var(--contact-ink); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.baro-site-contact__tooltip { position: absolute; top: 50%; right: calc(100% + 13px); z-index: 1; padding: 11px 15px; background: #3e352e; color: #fffaf3; border: 1px solid rgba(255, 245, 232, .12); border-radius: 9px; box-shadow: 0 6px 18px rgba(40, 33, 29, .14); font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-5px, -50%); transition: opacity .18s ease, visibility .18s ease, transform .18s ease; }
.baro-site-contact__tooltip::after { content: ""; position: absolute; right: -5px; top: calc(50% - 4px); width: 8px; height: 8px; background: #3e352e; transform: rotate(45deg); }
.baro-site-contact__tooltip small { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: #dfd0c2; }
.baro-site-contact__slot:hover > .baro-site-contact__tooltip, .baro-site-contact__slot:focus-within > .baro-site-contact__tooltip, .baro-site-contact__top-slot:hover > .baro-site-contact__tooltip, .baro-site-contact__top-slot:focus-within > .baro-site-contact__tooltip { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.baro-site-contact a:focus-visible, .baro-site-contact button:focus-visible, .baro-site-contact__slot:focus-visible { outline: 2px solid #b89086; outline-offset: -5px; border-radius: 12px; }
.baro-site-contact__mobile { display: none; }
body:has(.baro-site-contact) #quick_menu_pill, body:has(.baro-site-contact) #quick_menu_box, body:has(.baro-site-contact) #quick_menu_mobile { display: none !important; }
@media (max-width: 991.98px) {
    .baro-site-contact__desktop { display: none; }
    .baro-site-contact__mobile { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; position: fixed; z-index: 90; bottom: 0; left: 0; right: 0; padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--contact-border); background: var(--contact-surface); box-shadow: 0 -4px 20px rgba(64, 56, 49, .06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
    .baro-site-contact__mobile > * { height: 56px; }
    .baro-site-contact__mobile svg { width: 32px; height: 32px; }
    .baro-site-contact__mobile svg.baro-site-contact__naver { width: 29px; height: 29px; }
    .baro-site-contact__mobile img { width: 32px; height: 32px; }
    .baro-site-contact__mobile a:hover { background: var(--contact-hover); border-radius: 12px; }
    body:has(.baro-site-contact) { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    .baro-site-contact__item, .baro-site-contact__item svg, .baro-site-contact__item img, .baro-site-contact__tooltip { transition: none; }
}