/* ===== Android 앱 설치 유도 배너 (하단 고정) =====
   설계 문서: docs/googleplay/app-install-banner-prd.md
   다크모드: theme.css 시맨틱 토큰(--color-*) 사용 — data-theme 자동 분기
   모바일 전용 컴포넌트 — 모바일 우선 2행 레이아웃 */

.app-install-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040; /* Bootstrap modal(1055)/backdrop(1050) 아래, sticky 헤더 위 */
    background: var(--color-bg-elevated, #f8f9fa);
    border-top: 1px solid var(--color-border, #dee2e6);
    box-shadow: 0 -2px 12px var(--color-shadow, rgba(0, 0, 0, 0.08));
    padding: 0.625rem 0.875rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
    /* 슬라이드업 진입 — JS가 .is-visible 부여 시 올라옴 */
    transform: translateY(100%);
    transition: transform 0.28s ease;
}

.app-install-banner.is-visible {
    transform: translateY(0);
}

/* hidden 속성이 제거된 후에만 노출 — 기본은 [hidden]으로 display:none */
.app-install-banner[hidden] {
    display: none;
}

/* 2행 그리드: [아이콘 | 텍스트 | 닫기] / [버튼 버튼] */
.app-install-banner-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "icon text  close"
        "cta  cta   cta";
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
    max-width: 600px;
    margin: 0 auto;
}

/* 실제 Play 스토어 앱 아이콘(512×512 정사각) — 라운드 처리. */
.app-install-banner-icon {
    grid-area: icon;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

.app-install-banner-text {
    grid-area: text;
    min-width: 0;
}

.app-install-banner-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary, #212529);
    line-height: 1.3;
}

.app-install-banner-desc {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #6c757d);
    line-height: 1.3;
    /* 좁은 화면에서 두 줄 넘어가면 말줄임 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.app-install-banner-close {
    grid-area: close;
    align-self: start;
    width: 40px;
    height: 40px;
    padding: 9px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #6c757d);
    cursor: pointer;
    border-radius: 8px;
}

.app-install-banner-close svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    .app-install-banner-close:hover {
        background: var(--color-bg-elevated-strong, #eef1f5);
        color: var(--color-text-primary, #212529);
    }
}

/* 행2: 버튼 2개 가로 균등 — 어떤 모바일 폭에서도 짓눌리지 않음 */
.app-install-banner-actions {
    grid-area: cta;
    display: flex;
    gap: 0.5rem;
}

.app-install-banner-install,
.app-install-banner-continue {
    flex: 1 1 0;
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    /* 터치 타깃 ≥44px (§16) */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 모션 민감 사용자 — 슬라이드 비활성 */
@media (prefers-reduced-motion: reduce) {
    .app-install-banner {
        transition: none;
    }
}