/* ============================================================
 * 채팅 모달 - 전 페이지 공통 스타일 (main.css에서 이관)
 * 서브페이지 퀵메뉴 메일 채팅 지원. 메인은 시각/렌더 동일.
 * ============================================================ */
/* ===== 채팅 모달 — cta 외부 fixed, 우하단 floating ===== */
.apmedia-main-hero-cta-chat {
    position: fixed;
    right: clamp(2.5rem, 4vw, 4rem);
    bottom: clamp(5rem, 7vw, 7rem);
    width: clamp(22rem, 28vw, 28rem);
    max-width: calc(100vw - var(--space-xl-2));
    background: var(--chat-modal-bg-light);
    backdrop-filter: blur(var(--blur-xl)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(180%);
    border: 1px solid var(--color-white-70);
    border-radius: var(--radius-md);
    box-shadow: 0 clamp(0.875rem, 1.6vw, 1.25rem) clamp(1.75rem, 3vw, 2.5rem) var(--color-black-08);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transform: translateY(clamp(0.625rem, 1.2vw, 1rem)) scale(0.96);
    transform-origin: bottom right;
    transition: opacity var(--dur-tap) ease, transform var(--dur-tap) var(--ease-cta);
    color: var(--text-color);
    font-family: inherit;
}
.apmedia-main-hero-cta-chat.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
[data-theme="dark"] .apmedia-main-hero-cta-chat {
    background: var(--chat-modal-bg-dark);
    border-color: var(--color-white-14);
    color: var(--color-white);
}

/* 헤더 */
.apmedia-main-hero-cta-chat-header {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1vw, 1rem);
    padding: clamp(1rem, 1.6vw, 1.375rem) clamp(1.25rem, 1.8vw, 1.625rem);
    border-bottom: 1px solid var(--color-black-06);
}
[data-theme="dark"] .apmedia-main-hero-cta-chat-header {
    border-bottom-color: var(--color-white-10);
}
.apmedia-main-hero-cta-chat-avatar {
    width: var(--chat-avatar-size);
    height: var(--chat-avatar-size);
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--chat-avatar-pad);
    background: var(--signature-color);
    border-radius: 50%;
    overflow: hidden;
}
.apmedia-main-hero-cta-chat-avatar-bot {
    width: 100%;
    height: 100%;
    display: block;
    color: var(--color-white);
}
.apmedia-main-hero-cta-chat-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: var(--lh-snug);
    gap: clamp(0.125rem, 0.2vw, 0.1875rem);
}
.apmedia-main-hero-cta-chat-title strong {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
}
.apmedia-main-hero-cta-chat-status {
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    color: var(--signature-sub-color);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}
.apmedia-main-hero-cta-chat-status-dot {
    width: clamp(0.375rem, 0.5vw, 0.4375rem);
    height: clamp(0.375rem, 0.5vw, 0.4375rem);
    border-radius: 50%;
    background: var(--status-idle);
    flex-shrink: 0;
    transition: background var(--transition-base), box-shadow var(--transition-base);
}
.apmedia-main-hero-cta-chat-status[data-status="online"] .apmedia-main-hero-cta-chat-status-dot {
    background: var(--status-online);
    box-shadow: 0 0 clamp(0.1875rem, 0.3vw, 0.25rem) clamp(0.04rem, 0.08vw, 0.0625rem) var(--status-online-glow);
    animation: chat-status-pulse-online var(--dur-loop-status-on) ease-in-out infinite;
}
.apmedia-main-hero-cta-chat-status[data-status="offline"] .apmedia-main-hero-cta-chat-status-dot {
    background: var(--status-offline);
    box-shadow: 0 0 clamp(0.1875rem, 0.3vw, 0.25rem) clamp(0.04rem, 0.08vw, 0.0625rem) var(--status-offline-glow);
    animation: chat-status-pulse-offline var(--dur-loop-status-off) ease-in-out infinite;
}
@keyframes chat-status-pulse-online {
    0%, 100% { box-shadow: 0 0 0.25rem 0.0625rem var(--status-online-glow); }
    50% { box-shadow: 0 0 clamp(0.3125rem, 0.55vw, 0.4375rem) clamp(0.0625rem, 0.12vw, 0.09375rem) var(--status-online-glow-peak); }
}
@keyframes chat-status-pulse-offline {
    0%, 100% { box-shadow: 0 0 0.25rem 0.0625rem var(--status-offline-glow); }
    50% { box-shadow: 0 0 clamp(0.3125rem, 0.55vw, 0.4375rem) clamp(0.0625rem, 0.12vw, 0.09375rem) var(--status-offline-glow-peak); }
}
@media (prefers-reduced-motion: reduce) {
    .apmedia-main-hero-cta-chat-status-dot { animation: none; }
}
.apmedia-main-hero-cta-chat-close {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: var(--space-xs-sm);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base);
    width: clamp(2.5rem, 3.4vw, 3.25rem);
    height: clamp(2.5rem, 3.4vw, 3.25rem);
}
.apmedia-main-hero-cta-chat-close:hover {
    background: var(--color-black-06);
}
[data-theme="dark"] .apmedia-main-hero-cta-chat-close:hover {
    background: var(--color-white-08);
}

/* 메시지 영역 */
.apmedia-main-hero-cta-chat-body {
    padding: clamp(1.125rem, 1.8vw, 1.5rem) clamp(1.25rem, 1.8vw, 1.625rem);
    max-height: clamp(16rem, 24vw, 22rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(0.625rem, 1vw, 0.875rem);
}
.apmedia-main-hero-cta-chat-msg {
    display: flex;
    animation: chat-msg-in var(--dur-base) ease both;
}
@keyframes chat-msg-in {
    from { opacity: 0; transform: translateY(clamp(0.375rem, 0.6vw, 0.5rem)); }
    to { opacity: 1; transform: translateY(0); }
}
.apmedia-main-hero-cta-chat-msg span {
    padding: clamp(0.5rem, 0.8vw, 0.625rem) clamp(0.625rem, 1.1vw, 0.875rem);
    border-radius: var(--radius-md-sm);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
    word-break: keep-all;
}
.apmedia-main-hero-cta-chat-msg-bot {
    align-self: flex-start;
}
.apmedia-main-hero-cta-chat-msg-bot span {
    background: var(--color-black-05);
    color: var(--text-color);
    border-top-left-radius: var(--radius-xs);
}
.apmedia-main-hero-cta-chat-msg-user {
    align-self: flex-end;
}
.apmedia-main-hero-cta-chat-msg-user span {
    background: var(--signature-color);
    color: var(--color-white);
    border-top-right-radius: var(--radius-xs);
}
[data-theme="dark"] .apmedia-main-hero-cta-chat-msg-bot span {
    background: var(--color-white-08);
    color: var(--color-white);
}

/* 빠른 응답 버튼 */
.apmedia-main-hero-cta-chat-quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-top: var(--space-3xs);
}
.apmedia-main-hero-cta-chat-quick button {
    background: transparent;
    border: 1px solid var(--signature-color);
    color: var(--signature-color);
    font-size: var(--fs-caption-md);
    font-weight: var(--fw-semibold);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}
.apmedia-main-hero-cta-chat-quick button:hover {
    background: var(--signature-color);
    color: var(--color-white);
}

/* 입력창 */
.apmedia-main-hero-cta-chat-input {
    display: flex;
    align-items: center;
    gap: var(--space-sm-loose);
    padding: clamp(0.875rem, 1.4vw, 1.125rem) clamp(1.25rem, 1.8vw, 1.625rem) clamp(1rem, 1.6vw, 1.375rem);
    border-top: 1px solid var(--color-black-06);
}
[data-theme="dark"] .apmedia-main-hero-cta-chat-input {
    border-top-color: var(--color-white-10);
}
.apmedia-main-hero-cta-chat-input input {
    flex: 1;
    background: var(--color-black-04);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: var(--space-sm-loose) clamp(0.875rem, 1.4vw, 1.125rem);
    font-size: max(var(--fs-input-ios-safe), var(--fs-body-sm)); /* iOS 포커스 자동확대 방지: 렌더 하한 16px 보장 */
    color: var(--text-color);
    outline: none;
    transition: border-color var(--transition-base), background var(--transition-base);
    font-family: inherit;
}
[data-theme="dark"] .apmedia-main-hero-cta-chat-input input {
    background: var(--color-white-06);
    color: var(--color-white);
}
.apmedia-main-hero-cta-chat-input input:focus {
    border-color: var(--signature-color);
    background: var(--background-color);
}
.apmedia-main-hero-cta-chat-input button {
    width: clamp(2.25rem, 3vw, 2.875rem);
    height: clamp(2.25rem, 3vw, 2.875rem);
    border-radius: 50%;
    background: var(--signature-color);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-base), transform var(--transition-base);
    padding: 0;
}
.apmedia-main-hero-cta-chat-input button svg {
    width: var(--size-icon-md);
    height: var(--size-icon-md);
    display: block;
    /* 종이비행기 글리프 시각 중심 보정 */
    transform: translateX(clamp(-0.125rem, -0.15vw, -0.0625rem));
    opacity: 0.8;
}
.apmedia-main-hero-cta-chat-input button:hover {
    background: var(--signature-color);
    transform: scale(1.05);
}

/* 3-input 동시 폼 (이름/연락처/이메일) */
.apmedia-main-hero-cta-chat-fieldgroup {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}
.apmedia-main-hero-cta-chat-fieldgroup input {
    background: var(--color-black-04);
    border: 1px solid transparent;
    border-radius: var(--radius-sm-md);
    padding: var(--space-xs-sm) var(--space-md);
    font-size: max(var(--fs-input-ios-safe), var(--fs-caption-md)); /* iOS 포커스 자동확대 방지: 렌더 하한 16px 보장 */
    color: var(--text-color);
    outline: none;
    transition: border-color var(--transition-base), background var(--transition-base);
    font-family: inherit;
    width: 100%;
}
[data-theme="dark"] .apmedia-main-hero-cta-chat-fieldgroup input {
    background: var(--color-white-06);
    color: var(--color-white);
}
.apmedia-main-hero-cta-chat-fieldgroup input:focus {
    border-color: var(--signature-color);
    background: var(--background-color);
}
.apmedia-main-hero-cta-chat-fieldgroup input::placeholder {
    color: var(--signature-sub-color);
    opacity: 0.7;
}

/* 채팅 완료 알림 (입력 폼 자리 대체) */
.apmedia-main-hero-cta-chat-done {
    flex: 1;
    text-align: center;
    font-size: var(--fs-caption-md);
    color: var(--signature-sub-color);
    padding: var(--space-xs);
}

/* ── Hero CTA 로봇/말풍선 — 전 페이지 공통(서브 플래시 방지 위해 main.css에서 이관) ── */
/* Hero CTA — 큰 원 크기 고정 + transform: scale로 작은 원 표현 (중앙 기준 확대/축소) */
.apmedia-main-hero-cta,
.apmedia-main-hero-cta:link,
.apmedia-main-hero-cta:visited,
.apmedia-main-hero-cta:hover,
.apmedia-main-hero-cta:active {
    position: fixed;
    width: var(--hero-cta-size);
    height: var(--hero-cta-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--signature-color-75);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    color: var(--color-white);
    z-index: 100;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* 큰 원 좌상단 = 마우스 + 0.5rem + (size-sm - size)/2 — 시각 작은 원 좌상단이 마우스 +0.5rem이 되도록 */
    left: calc(var(--cta-x, 50vw) + 0.5rem + (var(--hero-cta-size-sm) - var(--hero-cta-size)) / 2);
    top: calc(var(--cta-y, 50vh) + 0.5rem + (var(--hero-cta-size-sm) - var(--hero-cta-size)) / 2);
    transform: scale(var(--cta-scale, 1));
    transform-origin: center center;
    transition: transform var(--dur-slow) var(--ease-cta), opacity var(--transition-base);
}
.apmedia-main-hero-cta.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
/* 추적 모드 — 큰 원 크기에 scale 적용해 시각적 작은 원 (중앙 고정) */
.apmedia-main-hero-cta.is-tracking {
    --cta-scale: calc(var(--hero-cta-size-sm) / var(--hero-cta-size));
}
/* 확대 모드 — scale 1 = 큰 원 그대로, 배경은 회색으로 전환 */
.apmedia-main-hero-cta.is-expanded,
.apmedia-main-hero-cta.is-expanded:link,
.apmedia-main-hero-cta.is-expanded:visited,
.apmedia-main-hero-cta.is-expanded:hover,
.apmedia-main-hero-cta.is-expanded:active {
    --cta-scale: 1;
    background: var(--cta-expanded-bg);
}

/* 로봇 마스크 — 추적 모드: 원형 클립으로 얼굴만 / 확대 모드: 클립 해제 */
.apmedia-main-hero-cta-bot-mask {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
}
/* 확대 시 bot이 62% 크기로 mask 안에 들어가므로 overflow hidden 유지해도 안 잘림 */

/* Lottie 로봇 — 추적 모드: 얼굴(상단)만 확대 노출 / 확대 모드: 전신 노출 */
.apmedia-main-hero-cta-bot {
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: scale(2.1) translateY(18%);
    transform-origin: 50% 50%;
    transition: transform var(--dur-slow) var(--ease-cta), width var(--dur-slow) var(--ease-cta), height var(--dur-slow) var(--ease-cta);
    /* dotlottie-player web component의 기본 배경 제거 — shadow DOM 오버라이드용으로 !important 불가피 */
    background: transparent !important;
    --color-background: transparent;
}
.apmedia-main-hero-cta-bot::part(canvas) {
    background: transparent !important;
}
.apmedia-main-hero-cta.is-expanded .apmedia-main-hero-cta-bot {
    width: 62%;
    height: 62%;
    transform: none;
}

/* 말풍선 공통 — cta 외부 fixed (stacking context 회피해서 backdrop-filter 정상 작동). 위치는 JS가 CSS variable 주입 */
.apmedia-main-hero-cta-bubble {
    position: fixed;
    left: var(--bubble-x, 0);
    top: var(--bubble-y, 0);
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--blur-sm)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(160%);
    color: var(--text-color);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-normal);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    box-shadow: 0 clamp(0.5rem, 0.9vw, 0.625rem) clamp(1rem, 2vw, 1.5rem) var(--color-black-08);
    pointer-events: none;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    /* visibility는 opacity transition 종료 후 hidden 적용 → fade out 끝까지 시각 유지 */
    transition: opacity var(--dur-tap) ease, visibility var(--delay-zero) linear var(--dur-tap);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}
[data-theme="dark"] .apmedia-main-hero-cta-bubble {
    background: var(--glass-bg-dark);
    color: var(--color-white);
}
.apmedia-main-hero-cta-bubble-text {
    display: inline-block;
    transition: opacity var(--dur-fast) ease;
}
/* 텍스트 변경 시 fade out (class 토글로 inline-style 회피) */
.apmedia-main-hero-cta-bubble-text.is-fading {
    opacity: 0;
}
/* GNB 메뉴 hover로 표시된 메시지는 좌클릭 메뉴이므로 우클릭 가이드 아이콘 숨김 */
.apmedia-main-hero-cta-bubble.is-gnb-hover .apmedia-main-hero-cta-mouse-icon {
    display: none;
}
/* 마우스 우클릭 가이드 아이콘 (텍스트 옆) — 우클릭 영역 깜빡임 */
.apmedia-main-hero-cta-mouse-icon {
    width: clamp(0.8125rem, 1vw, 1rem);
    height: clamp(1.0625rem, 1.3vw, 1.375rem);
    flex-shrink: 0;
    color: var(--signature-color);
}
.apmedia-main-hero-cta-mouse-icon .apmedia-mouse-rclick {
    transform-origin: 50% 50%;
    animation: hero-cta-mouse-rclick var(--dur-pulse-fast) ease-in-out infinite;
}
@keyframes hero-cta-mouse-rclick {
    0%, 35%, 100% { opacity: 0.15; }
    45%, 75% { opacity: 1; }
    85% { opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
    .apmedia-main-hero-cta-mouse-icon .apmedia-mouse-rclick { animation: none; opacity: 0.7; }
}

/* 말풍선 노출 — JS가 is-visible 부여 시 페이드 인 + 떠다님 */
.apmedia-main-hero-cta-bubble.is-visible {
    opacity: 1;
    visibility: visible;
    /* fade in 시 visibility 즉시 visible, opacity는 transition으로 부드럽게 */
    transition: opacity var(--dur-tap) ease, visibility var(--delay-zero) linear var(--delay-zero);
    animation: hero-cta-bubble-float var(--dur-loop-short) ease-in-out infinite;
}

@keyframes hero-cta-bubble-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 calc(-1 * var(--lift-md)); }
}
@media (prefers-reduced-motion: reduce) {
    .apmedia-main-hero-cta-bubble { animation: none; }
}
@media (hover: hover) {
    .apmedia-main-hero-cta.is-expanded:hover {
        background: var(--cta-expanded-bg);
    }
}

/* ── 터치 디바이스 — 로봇 CTA·말풍선만 숨김(마우스 추적 전용). 커서 숨김(layout.css)과 동일 조건 */
@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
    .apmedia-main-hero-cta,
    .apmedia-main-hero-cta-bubble {
        display: none;
    }
}
/* 채팅 전체화면 — 터치 여부가 아니라 해상도(폭) 기준. 작은 팝업이 답답한 좁은 화면(≤34rem=544px)에서만
   전체화면으로(우하단 팝업 대신 화면을 꽉 채우고 header 고정·body 세로 흡수·input 하단 = flex column). */
@media (max-width: 34rem) {
    .apmedia-main-hero-cta-chat {
        inset: 0;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 100%;
        max-width: none;
        border-radius: 0;
        /* 닫혀 있을 때는 레이아웃에서 완전히 빠져야 한다.
           display:flex 로 두면 opacity:0 이어도 전체화면(z:150)이 본문 위를 덮어 로봇·콘텐츠를 가린다. */
        display: none;
        flex-direction: column;
        /* 전체화면이므로 뒤 페이지·헤더(z:100)가 비치지 않게 불투명 배경 + 헤더 위 z-index */
        z-index: 150;
        background: var(--background-color);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transform: translateY(var(--space-lg));
    }
    .apmedia-main-hero-cta-chat.is-open {
        display: flex;
    }
    [data-theme="dark"] .apmedia-main-hero-cta-chat {
        background: var(--background-color);
    }
    .apmedia-main-hero-cta-chat.is-open {
        transform: translateY(0);
    }
    .apmedia-main-hero-cta-chat-body {
        flex: 1 1 auto;
        max-height: none;
    }
}

/* 터치 기기 — 누르는 요소 44px(손끝 접촉폭 ≈ 9mm) 확보. 글자·아이콘 크기는 그대로다 */
@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
    .apmedia-main-hero-cta-chat-close,
    .apmedia-main-hero-cta-chat-quick button,
    .apmedia-main-hero-cta-chat-input input,
    .apmedia-main-hero-cta-chat-input button {
        min-height: var(--size-touch-min);
    }
    .apmedia-main-hero-cta-chat-close { justify-content: center; width: var(--size-touch-min); }
}