/* 기본 리셋 및 설정 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    overflow-x: hidden;
}

body {
    font-family: 'Pretendard', 'Noto Sans CJK KR', sans-serif;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
}

/* 메인 컨테이너: 반응형 (750px 기준) */
.container {
    width: 100%;
    max-width: 750px;
    background-color: white;
    position: relative;
    margin: 0 auto;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ==================== 팝업 공통 스타일 ==================== */

/* 팝업 오버레이 */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 750px;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.popup-overlay.active {
    display: flex;
    touch-action: none;
}

/* popup-3-1: 화면 전체가 스크롤 (스크롤바 없이) */
#popup-3-1-exclusive.popup-overlay,
#popup-3-1-intersection.popup-overlay {
    align-items: flex-start;
    padding: 20px 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    touch-action: pan-y; /* 세로 스크롤 허용 */
}

#popup-3-1-exclusive.popup-overlay::-webkit-scrollbar,
#popup-3-1-intersection.popup-overlay::-webkit-scrollbar {
    display: none;
}

#popup-3-1-exclusive.popup-overlay.active,
#popup-3-1-intersection.popup-overlay.active {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#popup-3-1-exclusive .popup-content,
#popup-3-1-intersection .popup-content {
    overflow: visible;
    max-height: none;
}

/* popup-3-1의 dim은 스크롤 가능한 전체 영역을 덮어야 함 */
#popup-3-1-exclusive .popup-dim,
#popup-3-1-intersection .popup-dim {
    position: absolute;
    min-height: 200vh; /* 스크롤 가능한 영역 전체를 덮도록 */
    height: auto;
}

/* Dim 배경 */
.popup-dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* 팝업 컨텐츠 */
.popup-content {
    position: relative;
    background: white;
    border-radius: 4vw; /* 30/750 */
    padding: 13.33vw 4.13vw; /* 100/750, 31/750 */
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 9.33vw; /* 70/750 */
    align-items: center;
}

/* 팝업 사이즈 */
.popup-small {
    width: 80.27%; /* 602/750 */
}

.popup-medium {
    width: 86.67%; /* 650/750 */
    padding: 13.33vw 4vw 10.67vw; /* 100/750, 30/750, 80/750 */
    gap: 8vw; /* 60/750 */
}

.popup-large {
    width: 86.67%; /* 650/750 */
    padding: 8vw 4vw 10.67vw; /* 60/750, 30/750, 80/750 */
    gap: 8vw; /* 60/750 */
    max-height: 90vh;
    overflow-y: auto;
}

/* 캘린더 팝업 - 상하좌우 패딩 4vw */
.popup-content.popup-calendar {
    padding: 4vw !important;
}

/* ==================== 팝업 헤더 ==================== */
.popup-header {
    width: 100%;
    display: flex;
    justify-content: center;
}

.popup-header-badge {
    background: #9b593a;
    border-radius: 13.33vw; /* 100/750 */
    padding: 4vw 10.67vw; /* 30/750, 80/750 */
}

.popup-header-badge p {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 6.13vw; /* 46/750 */
    color: white;
    text-align: center;
    letter-spacing: -0.0184px;
    line-height: 1;
    margin: 0;
}

/* ==================== 팝업 텍스트 그룹 ==================== */
.popup-text-group {
    display: flex;
    flex-direction: column;
    gap: 5.33vw; /* 40/750 */
    text-align: center;
    width: 100%;
}

.popup-title {
    font-family: 'Noto Sans CJK KR';
    font-weight: 700;
    font-size: 5.33vw; /* 40/750 */
    color: #111111;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0;
}

.popup-title.brown {
    color: #9b593a;
}

.popup-desc {
    font-family: 'Noto Sans CJK KR';
    font-weight: 500;
    font-size: 3.73vw; /* 28/750 */
    color: #111111;
    letter-spacing: -0.02em;
    line-height: 1.4;
    margin: 0;
}

.popup-desc.bold {
    font-weight: 700;
}

.popup-desc.gray {
    color: #888888;
}

.popup-desc strong.brown {
    font-weight: 700;
    color: #9b593a;
}

/* ==================== 이벤트 정보 섹션 ==================== */
.event-info-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5.33vw; /* 40/750 */
}

.event-info-item {
    display: flex;
    gap: 4.13vw; /* 31/750 */
}

.event-info-num {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 4.8vw; /* 36/750 */
    color: #c5111a;
    line-height: 1.2;
    margin: 0;
    flex-shrink: 0;
}

.event-info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.73vw; /* 13/750 */
}

.event-info-label {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 4.8vw; /* 36/750 */
    color: #111111;
    letter-spacing: -0.004em;
    line-height: 1.2;
    margin: 0;
}

.event-info-value {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 4vw; /* 30/750 */
    color: #111111;
    letter-spacing: -0.004em;
    line-height: 1.2;
    margin: 0;
}

.event-info-note {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 3.47vw; /* 26/750 */
    color: #909090;
    letter-spacing: -0.004em;
    line-height: 1;
    margin: 0;
}

/* ==================== 혜택 섹션 ==================== */
.benefit-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4vw; /* 30/750 */
}

.benefit-header {
    display: flex;
    gap: 2.67vw; /* 20/750 */
    align-items: baseline;
}

.benefit-card {
    width: 100%;
    border-radius: 2.67vw; /* 20/750 */
    overflow: hidden;
    background: #ffeae9;
}

.benefit-card.coffee .benefit-card-body {
    padding-bottom: 5.33vw; /* 추가 여백 */
}

.benefit-card-header {
    background: #e8555b;
    padding: 3.73vw 0; /* 28/750 */
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 4.27vw; /* 32/750 */
    color: white;
    text-align: center;
    line-height: 1.4;
}

.benefit-card-body {
    padding: 4vw; /* 30/750 */
    display: flex;
    flex-direction: column;
    gap: 2.67vw; /* 20/750 */
}

.benefit-main {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 4.27vw; /* 32/750 */
    color: #111111;
    line-height: 1.4;
    margin: 0;
}

.benefit-main strong {
    font-weight: 700;
}

.benefit-note {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 3.47vw; /* 26/750 */
    color: #e8555b;
    letter-spacing: -0.004em;
    line-height: 1;
    margin: 0;
}

.benefit-divider {
    width: 100%;
    height: 0.13vw; /* 1/750 */
    background: #dadada;
}

.benefit-detail {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 3.73vw; /* 28/750 */
    color: #111111;
    line-height: 1.4;
    margin: 0;
}

/* ==================== 배송 섹션 ==================== */
.delivery-section {
    width: 100%;
    display: flex;
    gap: 2.67vw; /* 20/750 */
}

.delivery-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.73vw; /* 13/750 */
}

.delivery-info {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 4.27vw; /* 32/750 */
    color: #111111;
    line-height: 1.4;
    margin: 0;
}

.delivery-note {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 3.49vw; /* 26.164/750 */
    color: #909090;
    line-height: 1.4;
    margin: 0;
}

/* ==================== 입력정보 확인 팝업 ==================== */
.input-info-notice {
    width: 100%;
    text-align: center;
}

.input-info-notice p {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 4.8vw; /* 36/750 */
    color: #111111;
    letter-spacing: -0.004em;
    line-height: 1.3;
    margin: 0;
}

.input-info-notice strong {
    font-weight: 700;
}

.user-info-card {
    width: 100%;
    border-radius: 2.67vw; /* 20/750 */
    overflow: hidden;
    background: #ffeae9;
}

.user-info-header {
    background: #e8555b;
    padding: 3.73vw 0; /* 28/750 */
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 4.27vw; /* 32/750 */
    color: white;
    text-align: center;
    line-height: 1.4;
}

.user-info-body {
    padding: 4vw; /* 30/750 */
    text-align: center;
}

.user-info-body p {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 4.27vw; /* 32/750 */
    color: #111111;
    line-height: 1.4;
    margin: 0;
}

/* ==================== 전화번호 인증 섹션 ==================== */
.phone-auth-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3.47vw; /* 26/750 */
}

.phone-auth-title {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 4.8vw; /* 36/750 */
    color: #c5111a;
    text-align: center;
    line-height: 1;
    margin: 0;
}

.phone-auth-desc {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 3.49vw; /* 26.164/750 */
    color: #111111;
    text-align: center;
    line-height: 1.4;
    margin: 0;
}

.input-field-group {
    width: 100%;
    padding: 0 7.33vw; /* 55/750 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.13vw solid #e8555b;
    padding-bottom: 2.67vw; /* 20/750 */
}

.input-field-single {
    width: 100%;
    padding: 0 7.33vw; /* 55/750 */
    border-bottom: 0.13vw solid #e8555b;
    padding-bottom: 2.67vw; /* 20/750 */
    margin-top: 1.6vw; /* 12/750 */
}

.input-field {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 3.49vw; /* 26.164/750 */
    color: #111111;
    line-height: 1.4;
    padding: 2.67vw 0; /* 20/750 */
    background: transparent;
}

.input-field::placeholder {
    color: #909090;
}

.auth-btn {
    background: #606060;
    border: none;
    border-radius: 13.33vw; /* 100/750 */
    padding: 2.13vw 4vw; /* 16/750, 30/750 */
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 3.2vw; /* 24/750 */
    color: white;
    letter-spacing: -0.02em;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

/* ==================== 팝업 버튼 ==================== */
.popup-btn {
    width: 65.87%; /* 494/750 */
    height: 13.07vw; /* 98/750 */
    background: #333333;
    border: none;
    border-radius: 1.07vw; /* 8/750 */
    font-family: 'Noto Sans CJK KR';
    font-weight: 500;
    font-size: 4.53vw; /* 34/750 */
    color: white;
    letter-spacing: -0.02em;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.3s;
}

.popup-btn:hover {
    background: #222222;
}

.popup-btn.outline {
    background: white;
    border: 0.13vw solid #333333;
    color: #333333;
}

.popup-btn.outline:hover {
    background: #f5f5f5;
}

/* 팝업 버튼 그룹 */
.popup-btn-group {
    width: 100%;
    display: flex;
    gap: 2.67vw; /* 20/750 */
    justify-content: center;
}

.popup-btn-group .popup-btn {
    width: 31.6%; /* 237/750 */
}

/* ==================== 반응형 조정 ==================== */
@media (max-width: 750px) {
    .popup-large {
        max-height: 85vh;
    }
}

/* ==================== 퀴즈 팝업 스타일 ==================== */
.popup-btn.wide {
    width: 66%; /* 495/750 */
}

.popup-content.simple {
    gap: 9.33vw; /* 70/750 */
}

.popup-content.quiz-coffee {
    gap: 9.33vw; /* 70/750 */
}

.coffee-image-wrapper {
    width: 29.87vw; /* 224/750 */
    height: 30.67vw; /* 230/750 */
    margin: 0 auto;
}

.coffee-prize-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==================== 반응형 조정 ==================== */
@media (max-width: 750px) {
    .popup-large {
        max-height: 85vh;
    }
}

@media (min-width: 751px) {
    /* 750px 이상에서는 고정 크기 사용 */
    .popup-content {
        padding: 100px 31px;
        gap: 70px;
    }

    .popup-medium {
        padding: 100px 30px 80px;
        gap: 60px;
    }

    .popup-large {
        padding: 60px 30px 80px;
        gap: 60px;
    }

    .coffee-image-wrapper {
        width: 224px;
        height: 230px;
    }
}

/* ==================== 이미지 기반 팝업 스타일 ==================== */

/* 이미지 기반 팝업 컨테이너 */
.popup-image-based {
    padding: 0;
    background: transparent;
    position: relative;
}

/* 팝업 전체 이미지 */
.popup-full-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4vw; /* 30/750 */
}

/* 투명 버튼 (이미지 위에 오버레이) */
.popup-btn-transparent {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 14%;
    background: transparent;
    border: none;
    color: transparent;
    cursor: pointer;
    border-radius: 8px;
    z-index: 10;
}

.popup-btn-transparent:hover {
    background: rgba(0, 0, 0, 0.05);
}

.popup-btn-transparent:active {
    background: rgba(0, 0, 0, 0.1);
}

/* popup-3-1 버튼 위치 조정 (이미지 크기: 1300x3622) */
#popup-3-1-exclusive .popup-btn-transparent,
#popup-3-1-intersection .popup-btn-transparent {
    bottom: 2%;
    left: 5%;
    width: 90%;
    height: 8%;
    transform: none;
}

/* ==================== Figma 전화번호 인증 팝업 ====================  */

/* 메인 컨테이너 */
.figma-phone-popup {
    background: #ffffff;
    width: 86.67%; /* 650/750 */
    max-width: 500px; /* 최대 너비 제한 추가 */
    padding: 8vw 4vw 10.67vw; /* 60/750, 30/750, 80/750 */
    border-radius: 2.67vw; /* 20/750 */
    display: flex;
    flex-direction: column;
    gap: 8vw; /* 60/750 */
    align-items: center; /* Safari 호환성: stretch -> center로 변경 */
    max-height: 90vh; /* 화면 높이의 90%로 제한 */
    overflow-y: auto; /* 스크롤 가능하게 */
}

/* 상단 배지 */
.figma-badge {
    background: #9b5839;
    border-radius: 13.33vw; /* 100/750 - 완전 둥글게 */
    padding: 4vw 10.67vw; /* 30/750, 80/750 */
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 6.13vw; /* 46/750 */
    color: #ffffff;
    text-align: center;
    letter-spacing: -0.018em;
    line-height: 6.13vw;
    align-self: center;
    width: fit-content;
}

/* 안내 메시지 */
.figma-notice {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 4.8vw; /* 36/750 */
    color: #111111;
    text-align: center;
    margin: 0;
    line-height: 6.24vw; /* 46.8/750 */
    letter-spacing: -0.144px;
}

.figma-notice strong {
    font-weight: 700;
}

/* 사원 정보 카드 */
.figma-employee-card {
    width: 100%;
    border-radius: 2.67vw; /* 20/750 */
    background: #ffeae9;
    overflow: visible; /* hidden → visible로 변경 */
}

.figma-card-header {
    background: #e7545a;
    padding: 0;
    height: 10.67vw; /* 80/750 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 4.27vw; /* 32/750 */
    color: #ffffff;
    line-height: 5.97vw; /* 44.8/750 */
    border-radius: 2.67vw 2.67vw 0 0; /* 상단 모서리만 둥글게 */
}

.figma-card-body {
    background: #ffeae9;
    padding: 4vw; /* 30/750 */
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 16px; /* vw 대신 고정 크기 */
    color: #111111;
    line-height: 1.6; /* 읽기 편한 line-height */
    border-radius: 0 0 2.67vw 2.67vw; /* 하단 모서리만 둥글게 */
}

.figma-card-body p {
    margin: 0;
    white-space: normal; /* 자연스러운 줄바꿈 */
}

.figma-card-body span {
    display: inline; /* inline으로 복원 */
    white-space: normal; /* 자연스러운 줄바꿈 */
}

/* 전화번호 인증 섹션 */
.figma-auth-section {
    width: 100%; /* Safari 호환성: 명시적으로 전체 너비 지정 */
    display: flex;
    flex-direction: column;
    gap: 3.47vw; /* 26/750 */
    align-items: center;
}

.figma-auth-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 4.8vw; /* 36/750 */
    color: #c5111a;
    text-align: center;
    margin: 0;
    line-height: 4.8vw;
}

.figma-auth-desc {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 3.49vw; /* 26.16/750 */
    color: #111111;
    text-align: center;
    margin: 0;
    line-height: 4.88vw; /* 36.63/750 */
}

/* 입력 필드 컨테이너 */
.figma-input-container {
    width: 100%; /* Safari 호환성: 부모 기준 100%로 변경 */
    max-width: none; /* 최대 너비 제한 제거 */
    display: flex;
    flex-direction: column;
    gap: 1.6vw; /* 12/750 */
    margin: 0;
    padding: 0 5%; /* Safari 호환성: margin 대신 padding으로 여백 추가 */
    box-sizing: border-box;
}

.figma-input-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 좌우 균등 배치 */
    gap: 2.67vw; /* 20/750 */
    border-bottom: 0.13vw solid #e8555b; /* 1/750 */
    padding: 2.67vw 0; /* 20/750 */
    box-sizing: border-box;
    margin: 0; /* Safari 호환성: 명시적으로 margin 제거 */
    -webkit-box-sizing: border-box; /* Safari 명시적 지원 */
}

.figma-input {
    flex: 1; /* 남은 공간 차지 */
    min-width: 0; /* flex 아이템이 축소될 수 있도록 */
    border: none;
    background: transparent;
    padding: 0;
    margin: 0; /* Safari 호환성: 명시적으로 margin 제거 */
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 16px; /* Safari 자동 줌인 방지: 16px 이상 필수 */
    color: #111111;
    line-height: 1.5;
    outline: none;
    -webkit-appearance: none; /* Safari 기본 스타일 제거 */
}

.figma-input::placeholder {
    color: #909090;
}

.figma-input.phone-display-readonly {
    color: #111111;
}

.figma-input.auth-code-input {
    text-align: left;
    letter-spacing: 0;
    font-weight: 400;
}

.figma-auth-btn {
    background: #606060;
    color: #ffffff;
    border: none;
    border-radius: 13.33vw; /* 100/750 - 완전 둥글게 */
    padding: 2.13vw 4vw; /* 16/750, 30/750 */
    margin-right: 0; /* margin 제거 - input max-width로 해결 */
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 3.2vw; /* 24/750 */
    line-height: 3.2vw;
    letter-spacing: -0.48px;
    text-align: center;
    white-space: nowrap;
    min-width: 19.6vw; /* 147/750 - 원래 크기로 복구 */
    height: 6.53vw; /* 49/750 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.figma-auth-btn:hover {
    background: #555;
}

.figma-auth-btn:active {
    background: #444;
}

.figma-auth-btn:disabled {
    opacity: 1;
    cursor: default;
    background: #606060;
}

/* 하단 버튼 그룹 */
.figma-button-group {
    width: 100%;
    display: flex;
    gap: 2.67vw; /* 20/750 */
    justify-content: center;
}

.figma-btn-white {
    flex: 0 0 31.6vw; /* 237/750 */
    height: 13.07vw; /* 98/750 */
    background: #ffffff;
    color: #333333;
    border: 0.13vw solid #333333; /* 1/750 */
    border-radius: 1.07vw; /* 8/750 */
    font-family: 'Noto Sans CJK KR', sans-serif;
    font-weight: 500;
    font-size: 4.53vw; /* 34/750 */
    line-height: 5.89vw; /* 44.2/750 */
    letter-spacing: -0.68px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.figma-btn-white:hover {
    background: #f5f5f5;
}

.figma-btn-white:active {
    background: #e8e8e8;
}

.figma-btn-black {
    flex: 0 0 31.6vw; /* 237/750 */
    height: 13.07vw; /* 98/750 */
    background: #333333;
    color: #ffffff;
    border: none;
    border-radius: 1.07vw; /* 8/750 */
    font-family: 'Noto Sans CJK KR', sans-serif;
    font-weight: 500;
    font-size: 4.53vw; /* 34/750 */
    line-height: 5.89vw; /* 44.2/750 */
    letter-spacing: -0.68px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.figma-btn-black:hover {
    background: #444;
}

.figma-btn-black:active {
    background: #222;
}

/* 기존 스타일 (호환성 유지) */
.phone-auth-header {
    background: #9b593a;
    padding: 20px;
    text-align: center;
    border-radius: 30px 30px 0 0;
}

.header-badge {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: white;
    letter-spacing: -0.02em;
}

.phone-auth-body {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.auth-title {
    font-family: 'Noto Sans CJK KR', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #9b593a;
    text-align: center;
    margin: 0;
    letter-spacing: -0.02em;
}

.auth-desc {
    font-family: 'Noto Sans CJK KR', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #666;
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

.user-info-card {
    background: #ffeae9;
    border-radius: 12px;
    overflow: hidden;
}

.info-card-header {
    background: #e8555b;
    padding: 12px;
    text-align: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: white;
}

.info-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
}

.info-label {
    font-weight: 500;
    color: #666;
}

.info-value {
    font-weight: 600;
    color: #111;
}

.auth-notice {
    font-family: 'Noto Sans CJK KR', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #e8555b;
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-label {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #c5111a;
}

/* Old phone/auth input styles removed - now using .figma-input */

/* popup-3-3: 전화번호 + 인증 요청 버튼 (Figma 4019:1209) */
.input-with-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    border-bottom: 0.13vw solid #e8555b; /* 1/750 */
    padding: 2.67vw 0; /* 20/750 */
}

.phone-display-readonly {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 3.49vw; /* 26.16/750 */
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    color: #111111;
    outline: none;
}

.phone-display-readonly::placeholder {
    color: #909090;
}

.auth-btn-disabled {
    background: #606060;
    color: #ffffff;
    border: none;
    border-radius: 13.33vw; /* 100/750 완전 둥글게 */
    padding: 2.13vw 4vw; /* 16/750, 30/750 */
    font-size: 3.2vw; /* 24/750 */
    font-weight: 700;
    font-family: 'Pretendard', sans-serif;
    white-space: nowrap;
    min-width: 19.6vw; /* 147/750 */
    height: 6.53vw; /* 49/750 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    opacity: 1;
}

.popup-btn-primary {
    width: 100%;
    height: 54px;
    background: #333;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Pretendard', sans-serif;
    cursor: pointer;
    transition: all 0.3s;
}

.popup-btn-primary:hover {
    background: #222;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.popup-btn-primary:active {
    background: #111;
    transform: translateY(0);
}

.popup-btn-secondary {
    width: 48%;
    height: 54px;
    background: white;
    color: #333;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Pretendard', sans-serif;
    cursor: pointer;
    transition: all 0.3s;
}

.popup-btn-secondary:hover {
    background: #f5f5f5;
    border-color: #999;
}

.popup-btn-secondary:active {
    background: #e5e5e5;
}

.button-group {
    display: flex;
    gap: 4%;
    width: 100%;
}

.button-group .popup-btn-primary {
    width: 48%;
}

/* ==================== 전화번호 인증 팝업 스타일 ==================== */

/* 전화번호 인증 팝업 오버레이 컨테이너 */
.phone-auth-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.phone-auth-overlay > * {
    pointer-events: auto;
}

/* 사원 정보 텍스트 (동적 업데이트용, 보이지 않음) */
.user-info-text {
    position: absolute;
    top: 27%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    opacity: 0;
    pointer-events: none;
}

/* Step 1: 전화번호 입력 필드 */
.phone-input-field {
    position: absolute;
    top: 47.5%;
    left: 8%;
    width: 50%;
    height: 5.2%;
    background: transparent;
    border: none;
    font-size: 16px;
    color: #333;
    padding: 0 15px;
    outline: none;
}

.phone-input-field::placeholder {
    color: #999;
}

.phone-input-field:focus {
    background: rgba(255, 255, 255, 0.1);
}

/* Step 1: 인증 요청 버튼 */
.auth-request-btn {
    position: absolute;
    top: 47.5%;
    right: 8%;
    width: 28%;
    height: 5.2%;
    background: transparent;
    border: none;
    color: transparent;
    cursor: pointer;
    border-radius: 8px;
}

.auth-request-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.auth-request-btn:active {
    background: rgba(0, 0, 0, 0.1);
}

/* Step 2: 전화번호 표시 필드 (readonly) */
.phone-display-field {
    position: absolute;
    top: 41.5%;
    left: 8%;
    width: 50%;
    height: 4.5%;
    background: transparent;
    border: none;
    font-size: 16px;
    color: #333;
    padding: 0 15px;
    outline: none;
    pointer-events: none;
}

/* Step 2: 인증 요청 버튼 (step2) */
.popup-phone-step2 .auth-request-btn {
    top: 41.5%;
    height: 4.5%;
}

/* Step 2: 인증코드 입력 필드 */
.auth-code-field {
    position: absolute;
    top: 47.5%;
    left: 8%;
    width: 84%;
    height: 4.5%;
    background: transparent;
    border: none;
    font-size: 16px;
    color: #333;
    padding: 0 15px;
    outline: none;
}

.auth-code-field::placeholder {
    color: #999;
}

.auth-code-field:focus {
    background: rgba(255, 255, 255, 0.1);
}

/* 하단 버튼 그룹 */
.bottom-btn-group {
    position: absolute;
    bottom: 5%;
    left: 8%;
    width: 84%;
    height: 8%;
    display: flex;
    gap: 3%;
}

/* Old btn-retry/btn-confirm styles removed - now using .figma-btn-white/.figma-btn-black */

/* Step 2 버튼 위치 조정 */
.popup-phone-step2 .bottom-btn-group {
    bottom: 4%;
}

/* ==================== 팝업 동적 사용자 이름 오버레이 ==================== */

/* 이미지 기반 팝업에 동적 텍스트 오버레이 */
.popup-with-overlay {
    position: relative;
}

.popup-user-overlay {
    position: absolute;
    top: 28%; /* 팝업 상단에서 28% 위치 (이미지 내 "김한화" 위치에 맞춰 조정) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0.5vw;
    align-items: center;
    font-family: 'Noto Sans CJK KR';
    font-weight: 700;
    font-size: 4.8vw; /* 36/750 */
    color: #7a4419; /* 갈색 */
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
}

.popup-user-overlay .user-name-display {
    color: #7a4419; /* 갈색 */
}

.popup-user-overlay .user-position-display {
    color: #7a4419; /* 갈색 */
}

/* 팝업별 오버레이 위치 미세 조정 */
#popup-5 .popup-user-overlay {
    top: 26%; /* 기참여 안내 */
}

#popup-6 .popup-user-overlay {
    top: 26%; /* 퀴즈 참여 안내 */
}

#popup-7 .popup-user-overlay {
    top: 26%; /* 환영인사 */
}

#popup-quiz-correct .popup-user-overlay {
    top: 24%; /* 정답 2P */
}

#popup-quiz-correct-1p .popup-user-overlay {
    top: 24%; /* 정답 1P */
}

#popup-quiz-wrong .popup-user-overlay {
    top: 32%; /* 오답 */
    font-size: 4.27vw; /* 32/750 - 약간 작게 */
}

/* 팝업 6: 인사말 오버레이 (여러 줄 텍스트) */
.popup-greeting-overlay {
    position: absolute;
    top: 28%; /* 팝업 상단에서 위치 조정 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    font-family: 'Noto Sans CJK KR';
    font-weight: 400;
    font-size: 4.27vw; /* 32/750 */
    color: #333;
    letter-spacing: -0.02em;
    line-height: 1.6;
    white-space: normal;
    width: 80%;
}

.popup-greeting-overlay strong {
    font-weight: 700;
    color: #333;
}

.popup-greeting-overlay .brown {
    color: #7a4419;
}

.popup-greeting-overlay .user-name-display {
    font-weight: 700;
    color: #333;
}

.popup-greeting-overlay .user-position-display {
    font-weight: 700;
    color: #333;
}


/* ==================== 배경 이미지 팝업 스타일 ==================== */
.popup-with-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.popup-text-overlay {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5.33vw; /* 40/750 */
    text-align: center;
}

.popup-dynamic-text {
    font-family: 'Noto Sans CJK KR';
    font-weight: 500;
    font-size: 3.73vw; /* 28/750 */
    color: #888888;
    letter-spacing: -0.02em;
    line-height: 1.4;
    margin: 0;
}

.popup-dynamic-text .user-name {
    font-weight: 700;
    color: #9b593a;
}

.popup-sub-text {
    font-family: 'Noto Sans CJK KR';
    font-weight: 500;
    font-size: 3.73vw; /* 28/750 */
    color: #888888;
    letter-spacing: -0.02em;
    line-height: 1.4;
    margin: 0;
}

/* 데스크톱용 고정 크기 */
@media (min-width: 751px) {
    .popup-dynamic-text {
        font-size: 28px;
    }

    .popup-sub-text {
        font-size: 28px;
    }

    .popup-text-overlay {
        gap: 40px;
    }
}

/* 동적 사용자명 스타일 */
.user-name.brown {
    color: #9b593a;
}

strong.brown {
    color: #9b593a;
}