/* popup.css */
:root {
    --text-black: #0F172B;
    --dimmed-bg: rgba(0, 0, 0, 0.38);
    --primary-blue: #0A41ED;
    --white: #ffffff;
    --border-gray: #EEEEEE;
}

.dimmed {
    position: fixed; /* absolute → fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dimmed-bg);
    z-index: 1000;

    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.dimmed.active {
    opacity: 1;
    visibility: visible;
}

.bottom-sheet {
    position: fixed; /* absolute → fixed 변경 */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--white);
    border-radius: 24px 24px 0 0;
    z-index: 1010;

    transform: translateY(100%); /* 👈 처음 숨김 */
    transition: transform 0.3s ease;
}
.bottom-sheet.active {
    transform: translateY(0); /* 👈 올라오기 */
}

.bottom-sheet__content { padding: 40px 24px 24px; }
.device-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }

/* 라벨(버튼 역할) 기본 스타일 */
.device-item__btn {
    display: flex; align-items: center; padding: 20px; border: 1px solid var(--border-gray);
    border-radius: 16px; background-color: var(--white); cursor: pointer; transition: all 0.2s;
}

.device-item__icon { width: 44px; height: 44px; margin-right: 16px; flex-shrink: 0; }
.device-item__title { display: block; font-size: 16px; font-weight: 600; color: var(--text-black); margin-bottom: 4px; }
.device-item__desc { font-size: 13px; color: #666; }

/* 클릭(체크) 시 스타일 변경 (Enabled 상태) */
input[type="radio"]:checked + .device-item__btn {
    background-color: #031445;
    border-color: #031445;
}
input[type="radio"]:checked + .device-item__btn .device-item__title,
input[type="radio"]:checked + .device-item__btn .device-item__desc {
    color: var(--white);
}

/* 버튼 상태 전환 */
.btn-submit { width: 100%; height: 56px; border-radius: 12px; font-size: 16px; font-weight: 600; border: none; }

/* 초기 회색 버튼 */
.btn-disabled { background-color: #DDE0E5; color: #949BA7; display: block; }
/* 진행하기 파란 버튼 (기본 숨김) */
.btn-enabled { background-color: var(--primary-blue); color: var(--white); display: none; cursor: pointer; }

/* 하나라도 체크되면 버튼 교체 */
.device-list:has(input[type="radio"]:checked) ~ .bottom-sheet__footer .btn-disabled { display: none; }
.device-list:has(input[type="radio"]:checked) ~ .bottom-sheet__footer .btn-enabled { display: block; }