/* 기본 리셋 및 설정 */
* {
    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;
    overflow-x: hidden;
}

/* ==================== 1. 키비주얼 섹션 ==================== */
.visual-section {
    position: relative;
    width: 100%;
    padding-bottom: 146.67%; /* 1100/750 * 100 */
    background: white;
    overflow: hidden;
}

/* 배경 */
.visual-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 1100/1100 * 100 */
    overflow: hidden;
    opacity: 0.8;
}

.bg-image {
    position: absolute;
    left: -99.41%;
    top: -75.88%;
    width: 263.14%;
    height: 305.34%;
    max-width: none;
}

.bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
}

/* LOGO - Figma 정확한 중앙 정렬 */
.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 1.23%; /* 13.5/1100 */
    width: 29.87%; /* 224/750 */
    height: auto;
    aspect-ratio: 224 / 48;
}

/* 메인 비주얼 이미지 */
.main-visual-image {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
    width: 80%;
    height: auto;
    z-index: 2;
}

/* 혜택 박스 공통 */
.benefit-box {
    position: absolute;
    width: 82.67%; /* 620/750 */
    padding-bottom: 24%; /* 180/750 */
    background: white;
    border-radius: 2.67vw; /* 20/750 */
    box-shadow: 0px 0.53vw 2.67vw 0px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* 컨테이너 밖으로 튀어나온 부분 잘림 */
}

/* 혜택 박스 01 (65, 655) */
.benefit-box-1 {
    left: 8.67%; /* 65/750 */
    top: 59.55%; /* 655/1100 */
}

.product-images {
    position: absolute;
    right: 0;
    top: 5%; /* 9/180 */
    width: 55.16%; /* 342/620 */
    height: 95%; /* 171/180 */
    overflow: hidden;
}

.product-img-1 {
    position: absolute;
    top: -5.26%; /* -9/171 */
    right: -2.92%; /* -10/342 */
    width: 102.05%; /* 349/342 */
    height: auto;
}

.product-img-2 {
    position: absolute;
    top: 34.5%; /* 59/171 */
    right: 37.72%; /* 129/342 */
    width: 28.36%; /* 97/342 */
    height: auto;
    box-shadow: 0px 0px 1.33vw 0px rgba(0, 0, 0, 0.2);
}

.product-img-3 {
    position: absolute;
    top: 40.94%; /* 70/171 */
    left: 3.51%; /* 12/342 */
    width: 31.29%; /* 107/342 */
    height: auto;
    box-shadow: 0px 0px 1.33vw 0px rgba(0, 0, 0, 0.2);
}

/* 혜택 박스 02 (65, 858) */
.benefit-box-2 {
    left: 8.67%; /* 65/750 */
    top: 78%; /* 858/1100 */
}

.coffee-image {
    position: absolute;
    left: 4.68%; /* 29/620 */
    top: 4.44%; /* 8/180 */
    width: 32.58%; /* 202/620 */
    height: 98.33%; /* 177/180 */
    overflow: visible; /* 이미지가 잘리지 않도록 */
}

.coffee-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

.benefit-text {
    position: absolute;
}

.benefit-box-1 .benefit-text {
    left: 7.74%; /* 48/620 */
    top: 24.44%; /* 44/180 */
}

.benefit-box-2 .benefit-text {
    right: 6.94%; /* 43/620 */
    top: 24.44%; /* 44/180 */
}

.benefit-label {
    font-family: 'Noto Sans CJK KR';
    font-weight: 700;
    font-size: 2.67vw; /* 20/750 */
    color: #c5111a;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 0.5em;
}

.benefit-desc {
    font-family: 'Noto Sans CJK KR';
    font-size: 4vw; /* 30/750 */
    color: #515151;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

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

/* ==================== 2. 출석체크 섹션 ==================== */
.attendance-section {
    position: relative;
    width: 100%;
    padding-bottom: 103.33%; /* 775/750 */
    background: #9b593a;
}

.attendance-title {
    position: absolute;
    left: 50%;
    top: 10.32%; /* 80/775 */
    transform: translateX(-50%);
    font-size: 4.27vw; /* 32/750 */
    color: white;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.3;
    white-space: nowrap;
    width: 90%;
}

.attendance-title .regular {
    font-weight: 400;
}

.attendance-title .light {
    font-weight: 300;
}

.input-group {
    position: absolute;
    left: 50%;
    top: 26.45%; /* 205/775 */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 1.33vw; /* 10/750 */
    width: 82.67%; /* 620/750 */
}

.input-field {
    width: 100%;
    height: 10.67vw; /* 80/750 */
    background: white !important;
    background-color: white !important;
    border: none;
    text-align: center;
    font-size: 3.73vw; /* 28/750 */
    color: #777777;
    letter-spacing: -0.02em;
    line-height: 1.3;
    -webkit-appearance: none;
    appearance: none;
}

.input-field::placeholder {
    color: #777777;
    opacity: 1;
}

.input-field::-webkit-input-placeholder {
    color: #777777;
    opacity: 1;
}

.input-field::-moz-placeholder {
    color: #777777;
    opacity: 1;
}

.input-field:-ms-input-placeholder {
    color: #777777;
    opacity: 1;
}

.input-field:focus {
    outline: none;
}

.input-field:-webkit-autofill,
.input-field:-webkit-autofill:hover,
.input-field:-webkit-autofill:focus,
.input-field:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #777777 !important;
}

.notice-text {
    position: absolute;
    left: 50%;
    top: 51.48%; /* 399/775 */
    transform: translateX(-50%);
    font-size: 3.47vw; /* 26/750 */
    color: white;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.3;
    width: 90%;
}

.attendance-btn {
    position: absolute;
    left: 50%;
    top: 62.97%; /* 488/775 */
    transform: translateX(-50%);
    width: 82.67%; /* 620/750 */
    height: 16.53vw; /* 124/750 */
    background: #333333;
    border: none;
    color: white;
    font-size: 5.07vw; /* 38/750 */
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    cursor: pointer;
}

.time-notice {
    position: absolute;
    left: 50%;
    top: 82.06%; /* 636/775 */
    transform: translateX(-50%);
    font-size: 3.47vw; /* 26/750 */
    color: white;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.3;
    width: 90%;
}

/* ==================== 3. 퀴즈 섹션 ==================== */
.quiz-section {
    position: relative;
    width: 100%;
    padding: 0;
    background-image: url('./images/Group 8178.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.quiz-bg {
    position: absolute;
    left: -18.4%; /* -138/750 */
    top: -2.95%; /* -43/1458 */
    width: 129.07%; /* 968/750 */
    height: 120.92%; /* 1763/1458 */
    overflow: hidden;
    opacity: 0.5;
    z-index: 1; /* 가장 뒤에 위치 */
}

.pattern-bg {
    width: 100%;
    height: 100%;
}


/* Rectangle 1510 - 큰 흰색 배경 (900px) */
.rectangle-1510 {
    position: absolute;
    left: 4%; /* 30/750 */
    top: 14.75%; /* 215/1458 (2090-1875=215) */
    width: 92%; /* 690/750 */
    height: 61.73%; /* 900/1458 */
    background-color: white;
    z-index: 5;
}

/* 퀴즈 타이틀 날짜 - Figma 정확한 위치 */
.quiz-title-date {
    position: absolute;
    left: 50%;
    top: 4.12%; /* 60/1458 */
    transform: translateX(-50%);
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 5.33vw; /* 40/750 */
    color: #333333;
    text-align: center;
    letter-spacing: -0.04em;
    line-height: 1.2;
    white-space: nowrap;
    margin: 0;
    z-index: 10;
}

/* 퀴즈 타이틀 - Figma 정확한 위치 */
.quiz-title {
    position: absolute;
    left: 50%;
    top: 7.41%; /* 108/1458 */
    transform: translateX(-50%);
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 6.4vw; /* 48/750 */
    color: #333333;
    text-align: center;
    letter-spacing: -0.04em;
    line-height: 1.2;
    white-space: nowrap;
    margin: 0;
    z-index: 10;
}

/* 힌트 박스 (30, 2490, 690x500) - Figma 정확한 위치 */
.hint-box {
    position: absolute;
    left: 4%; /* 30/750 */
    top: 42.18%; /* 615/1458 (2490-1875=615) */
    width: 92%; /* 690/750 */
    padding-bottom: 66.67%; /* 500/750 */
    background-color: rgba(246, 246, 246, 0.7); /* #F6F6F6 opacity 0.7 */
    z-index: 5;
}

.hint-content {
    position: absolute;
    left: 50%;
    top: 40%; /* 더 위로 조정 */
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.8vw; /* 36/750 */
    width: 90%;
}

.hint-badge {
    background: #333333;
    border-radius: 13.33vw; /* 100/750 */
    padding: 0.8vw 4.27vw 1.07vw;
    font-family: 'Noto Sans CJK KR';
    font-weight: 700;
    font-size: 3.47vw; /* 26/750 */
    color: white;
    letter-spacing: -0.05em;
    line-height: 1.54;
    text-align: center;
}

.hint-text {
    font-family: 'Noto Sans CJK KR';
    font-weight: 500;
    font-size: 3.73vw; /* 28/750 */
    color: black;
    text-align: center;
    letter-spacing: -0.05em;
    line-height: 1.43;
}

.hint-text p {
    margin-bottom: 0;
}

.hint-text .orange {
    font-weight: 700;
    color: #fd6b16;
}

/* 문제 박스 (30, 2090, 690x400) - Figma 정확한 위치 */
.question-box {
    position: absolute;
    left: 4%; /* 30/750 */
    top: 14.75%; /* 215/1458 (2090-1875=215) */
    width: 92%; /* 690/750 */
    padding-bottom: 53.33%; /* 400/750 */
    background-color: rgba(255, 255, 255, 0.7); /* white opacity 0.7 */
    z-index: 10;
}

/* 퀴즈 질문 - Figma 정확한 스타일 */
.quiz-question {
    position: absolute;
    left: 50%;
    top: 23.11%; /* 337/1458 (2212-1875=337) */
    transform: translateX(-50%);
    width: 88%; /* 더 넓게 조정 */
    padding: 0 2%; /* 좌우 패딩 추가 */
    font-family: 'Noto Sans', 'Noto Sans KR';
    font-weight: 400;
    font-size: 5.33vw; /* 40/750 */
    color: #222222;
    text-align: center;
    letter-spacing: -0.07em;
    line-height: 1.4;
    margin: 0;
}

/* OX 버튼 (65, 1041, 620x124) - 섹션 시작부터의 상대 위치 */
.ox-buttons {
    position: absolute;
    left: 8.67%; /* 65/750 */
    top: 71.41%; /* 1041/1458 */
    display: flex;
    gap: 1.33vw; /* 10/750 */
    z-index: 10;
    width: 82.67%; /* 620/750 */
}

.ox-btn {
    width: 49.35%; /* 305/620 */
    padding-bottom: 20%; /* 124/620 */
    background: white;
    border: 0.4vw solid #a6a4a1; /* 3px/750 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.2s ease;
}

.ox-btn.selected {
    border-color: #0095DA;
    border-width: 0.53vw; /* 4px/750 - 조금 더 굵게 */
}

.o-circle {
    width: 5.87vw; /* 44/750 */
    height: 5.87vw;
    border: 0.93vw solid #333333; /* 7/750 - X 버튼과 동일 */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: border-color 0.2s ease;
}

.o-btn.selected .o-circle {
    border-color: #0095DA;
}

.x-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.93vw; /* 52/750 */
    height: 6.93vw;
}

.x-line {
    position: absolute;
    width: 6.93vw; /* 52/750 */
    height: 0.93vw; /* 7/750 */
    background: #333333;
    top: 50%;
    left: 50%;
    transition: background-color 0.2s ease;
}

.x-btn.selected .x-line {
    background: #0095DA;
}

.x-line-1 {
    transform: translate(-50%, -50%) rotate(45deg);
}

.x-line-2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 정답 확인 버튼 (65, 1244, 620x124) - 섹션 시작부터의 상대 위치 */
.submit-btn {
    position: absolute;
    left: 50%;
    top: 85.32%; /* 1244/1458 */
    transform: translateX(-50%);
    width: 82.67%; /* 620/750 */
    height: 16.53vw; /* 124/750 */
    background: #333333;
    border: 0.27vw solid #333333;
    color: white;
    font-family: 'Noto Sans', 'Noto Sans KR';
    font-weight: 700;
    font-size: 5.07vw; /* 38/750 */
    letter-spacing: -0.05em;
    line-height: 1.1;
    cursor: pointer;
    z-index: 10;
}

/* ==================== 4. 활동포인트 섹션 ==================== */
.points-section {
    position: relative;
    width: 100%;
    padding-bottom: 144.4%; /* 1083/750 */
    background-image: url('./images/Group 8179.png');
    background-size: cover;
    background-position: center 5%;
    background-repeat: no-repeat;
}

.points-title {
    position: absolute;
    left: 50%;
    top: 8.31%; /* 90/1083 */
    transform: translateX(-50%);
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 6.4vw; /* 48/750 */
    color: #333333;
    text-align: center;
    letter-spacing: -0.03em;
    line-height: 1.2;
    white-space: nowrap;
}

.points-title .orange {
    color: #fd6b16;
}

/* 월 탭 (60, 204, 630x58) - 섹션 시작부터의 상대 위치 */
.month-tabs {
    position: absolute;
    left: 8%; /* 60/750 */
    top: 18.84%; /* 204/1083 */
    width: 84%; /* 630/750 */
    display: flex;
}

.tab-btn {
    flex: 1;
    position: relative;
    padding-bottom: 9.21%; /* 58/630 */
    background: none;
    border: none;
    cursor: pointer;
}

.tab-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 4.27vw; /* 32/750 */
    text-align: center;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #a7a7a7;
}

.tab-btn.active .tab-text {
    color: #ff6a14;
}

.tab-line {
    position: absolute;
    bottom: 0.4vw;
    left: 0;
    right: 0;
    height: 0.27vw;
    background: #e4e4e4;
}

.tab-btn.active .tab-line {
    bottom: 0;
    height: 0.67vw;
    background: #ff6a14;
}

.fp-name {
    position: absolute;
    left: 50%;
    top: 29.73%; /* 322/1083 */
    transform: translateX(-50%);
    font-family: 'Noto Sans CJK KR';
    font-size: 4.27vw; /* 32/750 */
    color: #333333;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.3;
    white-space: nowrap;
    word-break: keep-all;
}

.fp-name strong {
    font-weight: 700;
}

.points-total {
    position: absolute;
    left: 50%;
    top: 35.55%; /* 385/1083 */
    transform: translateX(-50%);
    display: flex;
    align-items: baseline;
    color: #fd6b16;
    line-height: 1.3;
}

.total-label {
    font-family: 'Noto Sans CJK KR';
    font-size: 4.27vw; /* 32/750 */
    letter-spacing: -0.02em;
}

.total-number {
    font-family: 'Inter';
    font-weight: 700;
    font-size: 10.67vw; /* 80/750 */
    margin-left: 2vw;
}

.total-unit {
    font-family: 'Inter';
    font-weight: 700;
    font-size: 10.67vw; /* 80/750 */
}

.points-info {
    position: absolute;
    left: 5.33%; /* 40/750 */
    right: 5.33%;
    top: 46.91%; /* 508/1083 */
    font-family: 'Noto Sans CJK KR';
    font-size: 3.47vw; /* 26/750 */
    color: #111111;
    letter-spacing: -0.02em;
    line-height: 1.5;
}

.points-info strong {
    font-weight: 500;
}

.points-info .indent {
    margin-left: 2.67vw; /* 20/750 - 들여쓰기 */
    display: inline-block;
}

.points-info-title {
    position: relative;
    padding-left: 2vw; /* 15/750 - 점과 텍스트 간격 */
}

.points-info-title::before {
    content: "・";
    position: absolute;
    left: 0;
    font-size: 1.15em;
    font-weight: bold;
}

.points-info-image {
    width: 93vw;
    max-width: 700px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.detail-btn {
    position: absolute;
    left: 50%;
    top: 88%; /* 버튼 위치 하단으로 조정 (기존 81.53% - 글자 가림 방지) */
    transform: translateX(-50%);
    width: 41.33%; /* 310/750 */
    height: 10.67vw; /* 80/750 */
    background: white;
    border: 0.13vw solid rgba(51, 51, 51, 0.3);
    border-radius: 5.33vw; /* 40/750 */
    font-family: 'Noto Sans CJK KR';
    font-size: 4vw; /* 30/750 */
    color: #333333;
    letter-spacing: -0.03em;
    line-height: 1.3;
    cursor: pointer;
}

/* ==================== 5. 이벤트 내용 섹션 ==================== */
.event-info-section {
    position: relative;
    width: 100%;
    padding-bottom: 172%; /* 1290/750 - notice 공간 확보 */
    background: #ffeae9;
}

.section-title {
    position: absolute;
    left: 50%;
    top: 11.64%; /* 120/1031 */
    transform: translateX(-50%);
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 6.4vw; /* 48/750 */
    color: #333333;
    text-align: center;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0;
}

.divider {
    position: absolute;
    left: 50%;
    top: 19.4%; /* 200/1031 */
    transform: translateX(-50%);
    width: 88%; /* 660/750 */
    height: 0.27vw; /* 2/750 */
    background: #111111;
    opacity: 0.5;
}

.event-content {
    position: absolute;
    left: 4%; /* 30/750 */
    top: 24.44%; /* 252/1031 */
    width: 92%;
    font-family: 'Noto Sans CJK KR';
    font-size: 3.73vw; /* 28/750 */
    color: #111111;
    letter-spacing: -0.02em;
}

.event-row {
    display: grid;
    grid-template-columns: 24vw 1fr; /* 180/750 - 라벨 너비 조정, value에 더 많은 공간 */
    column-gap: 2.67vw; /* 20/750 */
    margin-bottom: 2.67vw; /* 20/750 */
}

.event-label {
    position: relative;
    font-weight: 500;
    line-height: 1.5;
    padding-left: 2.67vw; /* 20/750 - bullet 공간 */
    white-space: nowrap; /* 라벨 줄바꿈 방지 */
}

.event-label::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}

.event-value {
    font-weight: 400;
    line-height: 1.5;
    word-break: keep-all;
}

.event-value .badge {
    display: inline-block;
    background: #111111;
    color: white;
    font-size: 2.67vw; /* 20/750 */
    font-weight: 500;
    padding: 0.27vw 1.33vw 0vw 1.33vw; /* 상2px 우10px 하0px 좌10px */
    border-radius: 2.67vw; /* 20/750 */
    margin-right: 1.33vw; /* 10/750 */
    line-height: 1.9;
    letter-spacing: -0.04em;
}

.event-value p {
    margin: 0 0 1.33vw 0; /* 10/750 */
}

.event-value p:last-child {
    margin-bottom: 0;
}

.event-value .sub-note {
    font-size: 3.2vw; /* 24/750 */
    color: #666666;
    margin: 0.67vw 0 1.33vw 0; /* 5/750 top, 10/750 bottom */
}

.event-notice {
    margin-top: 9.33vw; /* 70/750 - 간격 증가 */
    font-family: 'Noto Sans CJK KR';
    font-size: 3.2vw; /* 24/750 */
    color: #666666;
    letter-spacing: -0.02em;
    line-height: 1.5;
    text-align: left;
}

.event-notice p {
    margin: 0;
}

/* ==================== 6. 독소조항 섹션 ==================== */
.terms-section {
    position: relative;
    width: 100%;
    padding-bottom: 46.8%; /* 351/750 */
    background: #dad7d3;
}

.terms-header {
    position: absolute;
    left: 5.33%; /* 40/750 */
    top: 28.49%; /* 100/351 */
    width: 89.33%; /* 670/750 */
    height: 3.87vw; /* 29/750 */
}

.warning-icon {
    position: absolute;
    left: 0;
    top: 1.33vw; /* 아이콘 위치 조정 */
    width: 3.87vw; /* 29/750 */
    height: 3.87vw;
}

.terms-title {
    position: absolute;
    left: 5.33vw; /* 40/750 - 아이콘 너비 + 간격 */
    top: 0.67vw; /* 5/750 - 세로 중앙 정렬 */
    font-family: 'Noto Sans CJK KR';
    font-weight: 700;
    font-size: 3.73vw; /* 28/750 */
    color: #222222;
    letter-spacing: -0.075em; /* -0.56px/28px */
    line-height: 1.5;
    white-space: nowrap;
    margin: 0;
}

.terms-content {
    position: absolute;
    left: 5.07%; /* 38/750 */
    right: 5.07%;
    top: 48.15%; /* 169/351 */
    font-family: 'Noto Sans CJK KR';
    font-weight: 400;
    font-size: 3.2vw; /* 24/750 */
    color: #7e7c78;
    letter-spacing: -0.096em; /* -0.72px/24px */
    line-height: 1.84;
}

.terms-content p {
    margin: 0;
}

/* ==================== 달력 팝업 스타일 ==================== */
.popup-calendar {
    width: 92.27vw; /* 692/750 */
    max-width: 92.27vw;
    background: white;
    border-radius: 2.67vw; /* 20/750 */
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.popup-close {
    position: absolute;
    top: 2.67vw;
    right: 4vw;
    width: 3.33vw; /* 25/750 - 50% 축소 */
    height: 3.33vw;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.popup-close svg,
.popup-close img {
    width: 100%; /* 버튼 크기에 맞춤 */
    height: 100%;
}

.calendar-header {
    text-align: center;
    margin: 0 0 -1.33vw 0; /* 모든 마진 명시, 상단 0 */
    padding: 0; /* 패딩도 명시적으로 0 */
}

.calendar-event-year {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 3.2vw; /* 24/750 */
    font-weight: 700;
    color: #e8555b;
    margin: 0 0 0.67vw 0; /* 모든 마진 명시 */
    padding: 0; /* 모든 패딩 0 */
    letter-spacing: -0.1vw; /* -0.72/750 */
    line-height: 1; /* line-height를 1로 설정하여 상단 공간 제거 */
    display: block; /* block으로 명시 */
}

.calendar-event-title-wrapper {
    width: 38.4vw; /* 288/750 */
    height: 5.95vw; /* 44.603/750 */
    margin: 0 auto 1.33vw auto; /* 하단 간격 줄임 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-event-title-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.calendar-title {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 4.67vw; /* 35/750 */
    font-weight: 700;
    color: #333;
    margin: 0 0 1.33vw 0;
    letter-spacing: -0.14vw; /* -1.05/750 */
}

.calendar-month-info {
    background: transparent;
    padding: 0;
    margin-top: 1.33vw; /* 간격 줄임 */
}

.month-points {
    font-size: 3.2vw; /* 24/750 */
    color: #9b593a;
    margin: 0 0 0.67vw 0;
    line-height: 5.87vw; /* 44/750 */
    letter-spacing: -0.13vw; /* -0.96/750 */
}

.month-points strong {
    font-weight: 700;
}

.month-note {
    font-size: 2.67vw; /* 20/750 */
    color: #888;
    margin: 0;
    line-height: 5.87vw; /* 44/750 */
    letter-spacing: -0.11vw; /* -0.8/750 */
}

.month-note .red {
    color: #e8555b;
    font-weight: 400;
}

.calendar-container {
    display: flex;
    flex-direction: column;
    gap: 0; /* 간격 제거 - 월 전환이므로 불필요 */
}

.calendar-month {
    width: 100%;
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
    color: white;
    padding: 4.8vw 5.33vw; /* 36/750, 40/750 */
    height: 13.33vw; /* 100/750 */
    position: relative;
    font-family: 'Gotham Medium', -apple-system, sans-serif;
    font-size: 4.27vw; /* 32/750 */
    font-weight: 500;
    letter-spacing: -0.13vw; /* -0.96/750 */
}

.nav-arrow {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 3.73vw; /* 28/750 */
    height: 3.73vw;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.nav-arrow:first-child {
    left: 5.33vw; /* 40/750 */
}

.nav-arrow:last-child {
    right: 5.33vw; /* 40/750 */
}

/* 12월/1월 화살표 버튼 이미지 스타일 */
.next-month-btn,
.prev-month-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

.next-month-btn img,
.prev-month-btn img {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
}

.next-month-btn {
    right: 20px !important;
}

.prev-month-btn {
    left: 20px !important;
}

.nav-arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1); /* 흰색으로 변경 */
}

/* 1월 네비게이션 스타일 */
.calendar-nav-jan {
    justify-content: center;
}

.calendar-nav-jan .nav-arrow {
    width: 2.13vw; /* 16/750 */
    height: 3.73vw; /* 28/750 */
}

.calendar-nav-jan .nav-arrow img {
    transform: rotate(180deg) scaleY(-1);
}

.calendar-nav-jan .nav-arrow-prev {
    /* position과 transform은 .nav-arrow에서 상속 */
}

.calendar-nav-jan .nav-arrow-next {
    /* position과 transform은 .nav-arrow에서 상속 */
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 12vw); /* 90/750 */
    background: white;
}

.calendar-day-header {
    text-align: center;
    padding: 1.87vw 0; /* 14/750 */
    font-family: 'Noto Sans KR', -apple-system, sans-serif;
    font-size: 3.2vw; /* 24/750 */
    font-weight: 500;
    color: #959595;
    background: transparent;
    letter-spacing: -0.1vw; /* -0.72/750 */
}

.calendar-date {
    width: 12vw; /* 90/750 */
    height: 16.67vw; /* 125/750 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.33vw 0.67vw; /* 10/750, 5/750 */
    background: #f5f5f5;
    position: relative;
}

.date-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.67vw; /* 더 위로 */
    margin-bottom: 0.67vw;
}

.calendar-date.empty {
    background: #f5f5f5;
    border: none;
}

.calendar-date.weekend {
    background: rgba(191, 191, 191, 0.3);
}

.calendar-date.holiday {
    background: #ececec;
}

.calendar-date.active {
    background: #f5f5f5;
}

.date-num {
    font-family: 'Noto Sans KR', -apple-system, sans-serif;
    font-size: 3.2vw; /* 24/750 */
    font-weight: 300;
    color: #333;
    position: absolute;
    top: 2.53vw; /* 19/750 - center aligned */
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: -0.1vw; /* -0.72/750 */
    line-height: 4.53vw; /* 34/750 */
}

.calendar-date.weekend .date-num,
.calendar-date.holiday .date-num {
    color: #999;
}

.point-badge {
    background: none;
    color: #333;
    font-family: 'Noto Sans KR', -apple-system, sans-serif;
    font-size: 2.67vw; /* 20/750 */
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: -0.08vw; /* -0.6/750 */
    z-index: 2;
}

.date-label {
    font-family: 'Noto Sans KR', -apple-system, sans-serif;
    font-size: 1.87vw; /* 14/750 */
    font-weight: 400;
    color: #333;
    text-align: center;
    line-height: 4.8vw; /* 36/750 */
    position: absolute;
    bottom: 0.67vw; /* 아래로 조정 */
    left: 50%;
    transform: translateX(-50%);
    letter-spacing: -0.06vw; /* -0.42/750 */
    width: 9.07vw; /* 68/750 */
}

.date-icon-foot {
    width: 9.07vw; /* 68/750 - Figma spec */
    height: 8vw; /* 60/750 - Figma spec */
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.date-icon-coffee {
    width: 2.93vw; /* 22/750 */
    height: 2.93vw;
    object-fit: contain;
    position: absolute;
    top: 0.67vw; /* 더 위로 */
    right: 1.33vw; /* 10/750 */
}

.calendar-date.weekend .date-label,
.calendar-date.holiday .date-label {
    color: #999;
    font-size: 2.67vw; /* 20/750 - Figma spec */
    font-weight: 500;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    white-space: nowrap;
    line-height: 4.53vw; /* 34/750 */
    letter-spacing: -0.08vw; /* -0.6/750 */
}

.calendar-date.active .date-label {
    color: #333;
    font-weight: 500;
}

/* 스크롤바 스타일링 */
.popup-calendar::-webkit-scrollbar {
    width: 1.33vw; /* 10/750 */
}

.popup-calendar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 1.33vw;
}

.popup-calendar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 1.33vw;
}

.popup-calendar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ==================== 이미지 기반 키비주얼 섹션 ==================== */

.visual-section-image {
    position: relative;
    width: 100%;
    padding-bottom: 0;
    background: transparent;
}

.visual-full-image {
    width: 100%;
    height: auto;
    display: block;
}


/* ==================== 이미지 기반 출석체크 섹션 ==================== */

.attendance-section-image {
    position: relative;
    width: 100%;
    padding: 0;
}

.attendance-bg-image {
    width: 100%;
    height: auto;
    display: block;
}

.attendance-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

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

/* 투명 입력 필드 */
.input-transparent {
    position: absolute;
    width: 82%; /* 이미지의 입력 필드 너비에 맞춤 */
    height: 9.5%; /* 입력 필드 높이 */
    background: transparent;
    border: none;
    font-size: 16px;
    color: #333;
    padding: 0 20px;
    box-sizing: border-box;
}

.input-transparent::placeholder {
    color: #999;
    font-size: 14px;
}

.input-transparent:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.9);
}

.input-transparent:focus::placeholder {
    color: #ccc;
}

/* 첫 번째 입력 필드 (사번) */
.input-transparent:nth-child(1) {
    top: 27%;
}

/* 두 번째 입력 필드 (이름) */
.input-transparent:nth-child(2) {
    top: 39%;
}

/* 투명 버튼 */
.btn-transparent {
    position: absolute;
    top: 64%;
    width: 85%;
    height: 13%;
    background: transparent;
    border: none;
    color: transparent;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
}

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

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


/* ==================== 이미지 기반 이벤트 내용 섹션 ==================== */

.event-info-section-image {
    position: relative;
    width: 100%;
    padding: 0;
    background: transparent;
}

/* ==================== 이미지 기반 독소조항 섹션 ==================== */

.terms-section-image {
    position: relative;
    width: 100%;
    padding: 0;
    background: transparent;
}

/* 공통 섹션 이미지 스타일 */
.section-full-image {
    width: 100%;
    height: auto;
    display: block;
}