/* global-fall-alarm.css - 전역 알람 팝업 (모니터링 상세 GIF 카드와 동일 디자인) */

.global-fall-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-fall-card {
    width: clamp(300px, 35vw, 420px);
    height: auto;
    max-width: 85vw;
    max-height: 75vh;
    border-radius: 5px;
    background: linear-gradient(to bottom, #f67b7b 0%, #ff2323 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(255, 0, 0, 0.4);
    animation: globalFallPulse 0.6s ease-out;
}

/* 주의 알람 (걸터앉음, 걸터누움 등) - 오렌지 */
.global-fall-card.alarm-caution {
    background: linear-gradient(to bottom, #ffb347 0%, #ff7300 100%);
    box-shadow: 0 4px 24px rgba(255, 115, 0, 0.4);
}

/* 일반 알람 (누움, 앉음, 일어섬 등) - 블루 */
.global-fall-card.alarm-normal {
    background: linear-gradient(to bottom, #5fb8ff 0%, #0084ff 100%);
    box-shadow: 0 4px 24px rgba(0, 132, 255, 0.4);
}

/* 돌봄 알람 - 그린 */
.global-fall-card.alarm-caregiving {
    background: linear-gradient(to bottom, #5ce0a0 0%, #04c869 100%);
    box-shadow: 0 4px 24px rgba(4, 200, 105, 0.4);
}

/* 낙상(danger) 카드: footer 버튼 + 전화 버튼 공간만큼 높이 확대 */
.global-fall-card:not(.alarm-normal):not(.alarm-caution):not(.alarm-caregiving) {
    height: auto;
}

@keyframes globalFallPulse {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.03); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── 헤더 ── */
.global-fall-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 전화 버튼이 없는 팝업(X만 있는 경우)도 낙상 팝업과 같은 헤더 높이 */
    min-height: clamp(36px, 8vw, 53px);
    padding: clamp(2px, 0.5vh, 4px) clamp(8px, 1vw, 16px) clamp(1px, 0.3vh, 2px);
    background: transparent;
    flex-shrink: 0;
}

.global-fall-settings {
    width: clamp(36px, 8vw, 53px);
    height: clamp(36px, 8vw, 53px);
    padding: clamp(8px, 1.5vw, 11.5px);
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.global-fall-settings img {
    width: clamp(20px, 4vw, 30px);
    height: clamp(20px, 4vw, 30px);
    object-fit: contain;
}

.global-fall-settings:hover {
    background: rgba(255, 255, 255, 0.28);
}

.global-fall-title-wrap {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.global-fall-senior-name {
    font-family: Inter, sans-serif;
    font-size: clamp(11px, 1.4vw, 18px);
    font-weight: bold;
    color: #fff;
    display: none;
}

.global-fall-title {
    font-family: Inter, sans-serif;
    font-size: clamp(14px, 1.8vw, 24px);
    font-weight: bold;
    color: #fff;
    text-align: center;
}

/* 전화 버튼 */
.global-fall-phone {
    width: clamp(36px, 8vw, 53px);
    height: clamp(36px, 8vw, 53px);
    border-radius: 50%;
    border: none;
    background: #ff0000;
    padding: clamp(8px, 1.5vw, 11.5px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.global-fall-phone img {
    width: clamp(20px, 4vw, 30px);
    height: clamp(20px, 4vw, 30px);
    object-fit: contain;
}

.global-fall-phone:hover {
    background: #cc0000;
}

/* X 닫기 버튼 (낙상에서는 숨김) */
.global-fall-close {
    width: clamp(24px, 3vh, 32px);
    height: clamp(24px, 3vh, 32px);
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.3);
    font-size: clamp(12px, 1.5vh, 16px);
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.global-fall-close:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* ── 본문 (GIF 이미지) ── */
.global-fall-body {
    flex: 0 0 clamp(190px, 32vh, 260px);
    height: clamp(190px, 32vh, 260px);
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: clamp(2px, 0.5vh, 4px) clamp(4px, 1vw, 8px);
}

.global-fall-body img {
    /* 잘림 없이 전체 표시 — 실시간 영상(.stream-video-wrap img)과 같은 방식 */
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.global-fall-placeholder {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(14px, 1.6vw, 20px);
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    flex-direction: column;
    gap: 10px;
}

.long-inactive-placeholder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f5c518;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.long-inactive-default-icon {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
}

/* ── 하단 버튼 (확인, 정상 상황, 조치 완료) ── */
.global-fall-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.2vw, 16px);
    padding: clamp(6px, 1vh, 16px) clamp(10px, 2vw, 24px);
    background: transparent;
    flex-shrink: 0;
}

.global-fall-btn {
    width: clamp(110px, 12vw, 140px);
    height: clamp(28px, 5vh, 33px);
    padding: 0;
    border: none;
    border-radius: 8px;
    font-family: Inter, sans-serif;
    font-size: clamp(12px, 1.4vw, 16px);
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    text-align: center;
    line-height: clamp(28px, 5vh, 33px);
    white-space: nowrap;
    transition: opacity 0.2s;
}

.global-fall-btn:hover {
    opacity: 0.85;
}

.global-fall-btn-confirm {
    background: #04c8b4;
}

.global-fall-btn-normal {
    background: #4caf50;
}

.global-fall-btn-resolve {
    background: #ffc107;
}

/* ── 전화 연결 카드 ── */
.global-phone-card {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 100000;
    width: clamp(300px, 44vw, 423px);
    height: clamp(240px, 48vh, 287px);
    max-width: 90vw;
    max-height: 85vh;
    padding: clamp(16px, 3vh, 24px);
    border-radius: 5px;
    background: linear-gradient(to bottom, #fff 0%, #e8e8e8);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    animation: globalFallPulse 0.4s ease-out;
}

.global-phone-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: clamp(10px, 2vh, 16px);
}

.global-phone-card-title {
    font-family: Inter, sans-serif;
    font-size: clamp(16px, 2vw, 22px);
    font-weight: bold;
    color: #343434;
    flex: 1;
    text-align: center;
}

.global-phone-card-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #e0e0e0;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-phone-card-close:hover {
    background: #ccc;
}

.global-phone-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.5vh, 14px);
    flex: 1;
    justify-content: center;
}

.global-phone-card-icon {
    width: clamp(48px, 10vw, 64px);
    height: clamp(48px, 10vw, 64px);
    border-radius: 50%;
    background: #FF6161;
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-phone-card-icon img {
    width: 50%;
    height: 50%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.global-phone-card-info {
    text-align: center;
}

.global-phone-card-name {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: bold;
    color: #343434;
    margin-bottom: 4px;
}

.global-phone-card-number {
    font-size: clamp(13px, 1.5vw, 16px);
    color: #666;
}

.global-phone-card-call-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: clamp(8px, 1.5vh, 10px) clamp(20px, 4vw, 32px);
    border-radius: 30px;
    background: #04c869;
    color: #fff;
    font-size: clamp(13px, 1.5vw, 16px);
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.global-phone-card-call-btn:hover {
    background: #03a857;
}

.global-phone-card-call-btn.disabled {
    background: #aaa;
    cursor: not-allowed;
    pointer-events: none;
}

.global-phone-card-call-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.global-phone-card-guardian {
    margin-top: clamp(8px, 1.5vh, 12px);
    font-size: clamp(12px, 1.3vw, 14px);
    color: #888;
}

/* Healthcare theme override */
.global-fall-overlay {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(3px);
}

.global-fall-card {
    border-radius: 14px;
    background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
    box-shadow: 0 24px 60px rgba(225, 29, 72, 0.28);
}

.global-fall-card.alarm-caution {
    background: linear-gradient(180deg, #fbbf24 0%, #f97316 100%);
    box-shadow: 0 24px 60px rgba(249, 115, 22, 0.24);
}

.global-fall-card.alarm-normal {
    background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%);
    box-shadow: 0 24px 60px rgba(37, 99, 235, 0.22);
}

.global-fall-card.alarm-caregiving {
    background: linear-gradient(180deg, #2dd4bf 0%, #14b8a6 100%);
    box-shadow: 0 24px 60px rgba(20, 184, 166, 0.24);
}

.global-fall-phone,
.global-phone-card-icon {
    background: #e11d48;
}

.global-fall-phone:hover {
    background: #be123c;
}

.global-fall-close {
    background: rgba(255, 255, 255, 0.22);
}

.global-fall-close:hover {
    background: rgba(255, 255, 255, 0.36);
}

.global-fall-btn-confirm,
.global-phone-card-call-btn {
    background: #14b8a6;
}

.global-fall-btn-normal {
    background: #16a34a;
}

.global-fall-btn-resolve {
    background: #f59e0b;
}

.global-phone-card {
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #d9e8e6;
    box-shadow: 0 24px 60px rgba(15, 118, 110, 0.16);
}

.global-phone-card-title,
.global-phone-card-name {
    color: #12312f;
}

.global-phone-card-number,
.global-phone-card-guardian {
    color: #64748b;
}

.global-phone-card-close {
    background: #e8f3f1;
    color: #64748b;
}

.global-phone-card-close:hover {
    background: #d7ebe8;
}

.global-phone-card-call-btn:hover {
    background: #0f766e;
}

.global-phone-card-call-btn.disabled {
    background: #94a3b8;
}

/* ══════════════════════════════════════════════════════════
   실시간 알림 팝업 크기 — 최근 알람 현황 클릭 팝업(.gif-modal-*)과 같은 규칙
   폭·헤더·이미지(3:2) 비율을 맞춰 어떤 알람이든 같은 크기로 보인다.
   낙상만 아래에 버튼 줄이 더해진다.
   ══════════════════════════════════════════════════════════ */
.global-fall-card {
    width: min(760px, 52vw, calc((90vh - 160px) * 1.5));
    min-width: min(340px, 92vw);
    max-width: 92vw;
    max-height: 90vh;
}

.global-fall-header {
    gap: 12px;
    min-height: clamp(48px, 4.4vw, 68px);
    padding: 8px clamp(12px, 1.2vw, 18px);
}

.global-fall-title {
    font-size: clamp(18px, 1.9vw, 28px);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.global-fall-senior-name {
    font-size: clamp(13px, 1.1vw, 17px);
}

.global-fall-phone {
    width: clamp(34px, 2.8vw, 44px);
    height: clamp(34px, 2.8vw, 44px);
    padding: 0;
}

.global-fall-phone img {
    width: 55%;
    height: 55%;
}

.global-fall-close {
    width: clamp(30px, 2.4vw, 38px);
    height: clamp(30px, 2.4vw, 38px);
    font-size: clamp(14px, 1.1vw, 18px);
}

.global-fall-body {
    flex: none;
    height: auto;
    aspect-ratio: 3 / 2;
    margin: 0 clamp(6px, 0.8vw, 10px) clamp(6px, 0.8vw, 10px);
    padding: 0;
    border-radius: 10px;
    background: #000;
}

/* ── 낙상 버튼: 같은 폭 3개, 조치 완료만 흰 바탕(주 동작) ── */
.global-fall-footer {
    gap: clamp(6px, 0.7vw, 10px);
    padding: 2px clamp(6px, 0.8vw, 10px) clamp(10px, 1vw, 14px);
}

.global-fall-footer .global-fall-btn {
    flex: 1 1 0;
    width: auto;
    height: clamp(40px, 3.2vw, 48px);
    padding: 0 0.6em;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    opacity: 1;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

.global-fall-footer .global-fall-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    opacity: 1;
}

.global-fall-footer .global-fall-btn:active {
    transform: scale(0.98);
}

.global-fall-footer .global-fall-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.global-fall-footer .global-fall-btn:disabled {
    cursor: default;
    opacity: 0.7;
}

.global-fall-footer .global-fall-btn-resolve {
    border-color: #ffffff;
    background: #ffffff;
    color: #e11d48;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.global-fall-footer .global-fall-btn-resolve:hover {
    background: #fff1f2;
}
/* 제목은 카드 정중앙, 전화·X 버튼은 오른쪽 끝에 겹쳐 둔다 (목록 팝업과 같은 제목 위치) */
.global-fall-header {
    position: relative;
}

.global-fall-title-wrap {
    padding: 0 clamp(40px, 3.4vw, 54px);
}

.global-fall-header .global-fall-phone,
.global-fall-header .global-fall-close {
    position: absolute;
    top: 50%;
    right: clamp(12px, 1.2vw, 18px);
    transform: translateY(-50%);
}
/* ── 낙상 버튼 단계 (JS 가 .global-fall-footer 에 data-stage 를 넣는다) ── */

/* 1단계: 처음 뜰 때 — '실시간 영상' 하나만 가운데에 크게 */
.global-fall-footer[data-stage="initial"] .global-fall-btn-normal,
.global-fall-footer[data-stage="initial"] .global-fall-btn-resolve {
    display: none;
}

.global-fall-footer[data-stage="initial"] {
    justify-content: center;
}

.global-fall-footer[data-stage="initial"] .global-fall-btn-confirm {
    flex: 0 1 auto;
    width: min(100%, 340px);
    height: clamp(46px, 3.8vw, 56px);
    border-color: #ffffff;
    border-radius: 999px;
    background: #ffffff;
    color: #e11d48;
    font-size: clamp(16px, 1.35vw, 20px);
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    animation: globalFallCtaPulse 1.8s ease-out infinite;
}

/* 재생 아이콘 */
.global-fall-footer[data-stage="initial"] .global-fall-btn-confirm::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 0.55em;
    border-top: 0.42em solid transparent;
    border-bottom: 0.42em solid transparent;
    border-left: 0.68em solid currentColor;
    vertical-align: -0.04em;
}

.global-fall-footer[data-stage="initial"] .global-fall-btn-confirm:hover {
    background: #fff1f2;
}

@keyframes globalFallCtaPulse {
    0%   { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70%  { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* 2단계: 실시간 영상을 연 뒤 — '정상 상황'·'조치 완료' 두 버튼만
   평소: 흰 바탕 + 조치 색 글씨·아이콘 / 마우스 오버: 조치 색으로 채움 + 살짝 떠오름 / 클릭: 눌림 */
.global-fall-footer[data-stage="live"] .global-fall-btn-confirm {
    display: none;
}

.global-fall-footer[data-stage="live"] .global-fall-btn-normal  { --btn-tone: #16a34a; --btn-tone-dark: #15803d; }
.global-fall-footer[data-stage="live"] .global-fall-btn-resolve { --btn-tone: #2563eb; --btn-tone-dark: #1d4ed8; }

.global-fall-footer[data-stage="live"] .global-fall-btn-normal,
.global-fall-footer[data-stage="live"] .global-fall-btn-resolve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    height: clamp(46px, 3.8vw, 56px);
    border: none;
    border-radius: 12px;
    background: #ffffff;
    color: var(--btn-tone);
    font-size: clamp(16px, 1.35vw, 20px);
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

/* 아이콘: 정상 상황 = 체크, 조치 완료 = 방패 체크 (글자색을 따라감) */
.global-fall-footer[data-stage="live"] .global-fall-btn-normal::before,
.global-fall-footer[data-stage="live"] .global-fall-btn-resolve::before {
    content: '';
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    background: currentColor;
    -webkit-mask: var(--btn-icon) center / contain no-repeat;
    mask: var(--btn-icon) center / contain no-repeat;
}

.global-fall-footer[data-stage="live"] .global-fall-btn-normal::before {
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5' stroke-width='2.4'/%3E%3Cpath d='M7.5 12.3l3 3 6-6.3'/%3E%3C/svg%3E");
}

.global-fall-footer[data-stage="live"] .global-fall-btn-resolve::before {
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l7.5 3v6c0 4.6-3.2 8.4-7.5 10-4.3-1.6-7.5-5.4-7.5-10v-6z'/%3E%3Cpath d='M8.7 12l2.4 2.4 4.3-4.6' stroke-width='2.8'/%3E%3C/svg%3E");
}

.global-fall-footer[data-stage="live"] .global-fall-btn-normal:hover,
.global-fall-footer[data-stage="live"] .global-fall-btn-resolve:hover {
    background: var(--btn-tone);
    color: #ffffff;
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}

.global-fall-footer[data-stage="live"] .global-fall-btn-normal:active,
.global-fall-footer[data-stage="live"] .global-fall-btn-resolve:active {
    background: var(--btn-tone-dark);
    color: #ffffff;
    transform: translateY(1px) scale(0.98);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

.global-fall-footer[data-stage="live"] .global-fall-btn-normal:focus-visible,
.global-fall-footer[data-stage="live"] .global-fall-btn-resolve:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}