:root {--bg-color: #fdfbfb;--text-color: #555;--accent-color: #343d46;--point-color: #e9edc9;--font-serif: 'Nanum Myeongjo', serif;--font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {font-family: var(--font-sans); background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; overflow-x: hidden; }
body.stop-scroll {overflow: hidden;height: 100%;position: fixed; /* iOS 기기에서 더 확실하게 차단하기 위함 */width: 100%;}
.container { max-width: 480px; margin: 0 auto; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.05); min-height: 100vh; padding-bottom: 50px; }
section { padding: 50px 20px; text-align: center; }

.reveal {opacity: 0;transform: translateY(30px);transition: all 0.8s ease-out; /* 0.8초 동안 부드럽게 */visibility: hidden;}/* --- 애니메이션 스타일 --- */
.fade-in {animation: fadeIn 1.5s forwards;}/* 본문이 나타나는 애니메이션 */
@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }}

/* 활성화 상태: 선명해지고 원래 위치로 복귀 */
.reveal.active {opacity: 1;transform: translateY(0);visibility: visible;}

/* --- 꽃가루 애니메이션 스타일 --- */
.confetti-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none; /* 클릭 방지 */z-index: 10;overflow: hidden;}
.confetti {position: absolute;top: -20px;user-select: none;pointer-events: none;animation: fall linear infinite;}

/* 하트의 모양과 색상을 정의하는 가상 요소 */
.confetti::before {content: '♥'; /* 하트 특수문자 삽입 */font-size: 20px; /* 하트 크기 */display: block;}
@keyframes fall { 0% {transform: translateY(0) rotate(0deg) translateX(0);opacity: 1;} 100% {transform: translateY(100vh) rotate(720deg) translateX(20px);opacity: 0;}}

.main-header {width: 100%;height: 100dvh;display: flex;flex-direction: column;justify-content: center;align-items: center;    /* 배경 설정 수정 */background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url("../img/main.jpg");background-repeat: no-repeat;background-position: center center;background-size: cover;background-color: var(--bg-color);position: relative;text-align: center;overflow: hidden;}
.main-header .names {display: flex;align-items: center;justify-content: center;gap: 15px;font-size: 2.5rem;font-weight: bold;color: #fff;margin-bottom: 25px;font-family: var(--font-serif);}
.name-heart {height: 1.2em;width: auto;vertical-align: middle;}

/* 모바일 대응: 화면이 작을 때 이미지 크기 미세 조정 */
@media (max-width: 380px) {  .names {font-size: 2rem;gap: 10px;}  .name-heart {height: 1.1em;}}
.wedding-date {font-size: 1rem;color: #fff;font-weight: bold;letter-spacing: 3px;margin-top: 100px;margin-bottom: 20px;animation: fadeInDown 1s ease-out;}
.wedding-place {font-size: 1.2rem;color: #fff;letter-spacing: 1px;animation: fadeInUp 1s ease-out;}

/* --- 기존 요소 카드 내부용으로 최적화 --- */
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); }}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }}
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); }}
.greeting-content {font-family: var(--font-serif); font-size: 0.95rem; color: #333; line-height: 1.7; word-break: keep-all; max-width: 100%; margin: 0 auto;}.relation-wrap {font-family: var(--font-serif);max-width: 320px;margin: 0 auto 40px auto;color: #444;}
.relation-wrap {margin-bottom: 0;width: 100%;}
.relation-row {display: flex;justify-content: center;align-items: center;margin-bottom: 20px;}
.relation-row:last-child { margin-bottom: 0; }
.parents-name {text-align: right; /* 부모님 성함 우측 정렬로 변경 시 더 깔끔함 */font-size: 0.95rem;line-height: 1.4;margin-right: 12px;}
.relation-text { font-size: 0.95rem; }
.relation-text .order {font-size: 0.95rem;color: #777;margin-right: 5px;}
.relation-text .couple-name { font-size: 1.05rem; font-weight: bold; }

/*갤러리 디자인*/
.gallery-slider-wrapper { position: relative; width: 100%; overflow: hidden; touch-action: pan-y; cursor: grab; }
.gallery-slider { display: flex; will-change: transform; transition: transform 0.4s ease-out; }
.gallery-intro {font-size: 0.9rem;color: #888;margin-top: -15px;margin-bottom: 20px;}
.slider-item { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; padding: 0 10px; }
.slider-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); cursor: zoom-in; }

/* 썸네일 스타일 */
.thumbnail-bar {display: flex;overflow-x: auto;padding: 15px 10px;gap: 10px;scrollbar-width: none;-webkit-overflow-scrolling: touch;min-height: 80px;justify-content: flex-start;}
.thumb-item {flex: 0 0 65px; /* 크기 소폭 확대 */height: 65px;border-radius: 6px;overflow: hidden;cursor: pointer;opacity: 0.5;transition: all 0.3s ease;border: 2px solid transparent;background-color: #eee;}
.thumb-item.active {opacity: 1;border-color: var(--accent-color);transform: scale(1.05);}
.thumb-item img {width: 100%;height: 100%;object-fit: cover;pointer-events: none;}

/* 모달 스타일 */
.modal { display: none; position: fixed; z-index: 10000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; }
.modal.show { display: flex; opacity: 1; }
.modal-content { max-width: 98%; max-height: 98%; object-fit: contain; transform: scale(1); transition: transform 0.3s ease, opacity 0.15s ease; }
.close-modal { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 35px; cursor: pointer;z-index: 100;}
.modal-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 36px; padding: 10px; cursor: pointer; z-index: 100; line-height: 1; opacity: 0.7; transition: opacity 0.2s; }
.modal-arrow:hover { opacity: 1; }
.modal-prev { left: 16px; }
.modal-next { right: 16px; }
.map-wrapper { width: 100%; height: 250px; background-color: #eee; position: relative; border-top: 1px solid #ddd; cursor: pointer; }
.map-btn-overlay { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background-color: #03C75A; color: #fff; padding: 10px 20px; border-radius: 20px; font-size: 0.9rem; font-weight: bold; }

/* --- 내비게이션 버튼 스타일 --- */
.map-buttons {display: flex;justify-content: center;gap: 10px;padding: 20px 15px;}
.map-btn {flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 0.75rem;color: #666;padding: 10px 0;border: 1px solid #eee;border-radius: 8px;transition: all 0.2s;background: none;cursor: pointer;font-family: inherit;}
.map-btn:active {background-color: #f5f5f5;transform: scale(0.98);}
.map-btn .icon {width: 24px;height: 24px;margin-bottom: 5px;background-size: contain;background-repeat: no-repeat;background-position: center;}

/* 각 아이콘 SVG 배경 처리 (가독성을 위해 간단한 원형 아이콘 예시) */
.map-btn.naver .icon {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2303C75A' d='M16.2 4H20v16h-3.8l-8.4-12V20H4V4h3.8l8.4 12V4z'/%3E%3C/svg%3E");}
.map-btn.kakao .icon {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FEE500' d='M12 3C6.48 3 2 6.48 2 10.75c0 2.85 2 5.3 5 6.35l-1.1 4.1 4.8-3.2c.4.1.85.2 1.3.2 5.52 0 10-3.48 10-7.75S17.52 3 12 3z'/%3E%3C/svg%3E");}

/* --- 대중교통 안내 스타일 --- */
.transport-container {padding: 0px 15px;text-align: left;max-width: 420px;margin: 0 auto;}
.transport-item {margin-bottom: 12px;border-bottom: 1px solid #f0f0f0;padding-bottom: 12px;}
.transport-item:last-child {border-bottom: none;padding-bottom: 0px;}
.transport-header {display: flex;align-items: center;margin-bottom: 10px;}
.transport-header .icon {font-size: 1.2rem;margin-right: 10px;}
.transport-header h3 {font-size: 1rem;font-family: var(--font-serif);color: var(--accent-color);letter-spacing: 1px;}
.transport-content p {font-size: 0.9rem;color: #666;line-height: 1.8;margin-bottom: 3px;word-break: keep-all;}
.transport-content strong {color: #333;font-weight: bold;}
.drop-off{font-size: 0.75rem;color: #aaa;margin-top: 10px;text-align: right;}

/* 안내사항 */
.notice-container { text-align: left; max-width: 380px; margin: 0 auto; }
.notice-item { margin-bottom: 25px; padding: 0 15px; }
.notice-label { font-weight: bold; color: var(--accent-color); font-size: 0.95rem; margin-bottom: 5px; }
.notice-text { font-size: 0.9rem; color: #666; line-height: 1.6; word-break: keep-all; }
.contact-title {font-family: var(--font-serif);font-size: 1.3rem;color: var(--accent-color);margin-bottom: 30px;letter-spacing: 1px;}
.contact-group { margin-bottom: 40px; padding: 0 10px; }
.contact-table {width: 100%;border-collapse: collapse;border: 1px solid #ccc;background: #fff;margin-bottom: 20px;}
.contact-row {border-bottom: 1px solid #eee;display: flex;align-items: center;padding: 12px 15px;}
.contact-row:last-child { border-bottom: none; }
.btn-icon {text-decoration: none;display: inline-block;width: 24px;height: 24px;background-size: contain;background-repeat: no-repeat;background-position: center;opacity: 0.5;transition: all 0.3s ease;}

/* --- 계좌 복사 버튼 스타일 --- */
.icon-copy {display: inline-block;width: 18px;height: 18px;background-size: contain;background-repeat: no-repeat;background-position: center;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E");}
.btn-copy {background-color: #f4f4f4;border: 1px solid #ddd;padding: 5px 10px;font-size: 0.75rem;border-radius: 4px;cursor: pointer;color: #666;}
.btn-copy:active { background-color: #eee; }

/* --- 계좌번호 아코디언 스타일 --- */
.bank-section {padding: 50px 20px; }
.bank-title {font-family: var(--font-serif); font-size: 1.3rem; color: var(--accent-color); margin-bottom: 10px; }.bank-subtitle { font-size: 0.85rem; color: #888; margin-bottom: 30px; line-height: 1.5; }
.bank-group {max-width: 348px; margin: 0 auto 30px auto; border: 1px solid #ccc; background: #fff;text-align: left;}
.bank-item { border-bottom: 1px solid #eee; }
.bank-item:last-child { border-bottom: none; }
.bank-item.active .arrow { transform: rotate(180deg); }
.bank-item.active .bank-content { max-height: 100px; }

/* 아코디언 헤더 */
.bank-header {padding: 15px;display: flex;justify-content: space-between;align-items: center;cursor: pointer;font-size: 1rem;color: #333;}
.bank-header span { font-size: 0.9rem; color: #888; margin-right: 5px; }
.bank-header .arrow {font-size: 0.8rem;transition: transform 0.3s;color: #bbb;}

/* 아코디언 내용 (계좌번호) */
.bank-content {max-height: 0;overflow: hidden;background-color: #fdfdfd;transition: max-height 0.3s ease-out;}
.bank-content-inner {padding: 15px;display: flex;justify-content: space-between;align-items: center;border-top: 1px dashed #eee;}
.account-info { font-size: 0.95rem; color: #555; }

/* --- 카드 플립 애니메이션 핵심 스타일 --- */
.flip-card {background-color: transparent;width: 100%;max-width: 350px;height: 370px; /* 내용이 충분히 들어갈 수 있는 높이 */perspective: 1000px;margin: 0 auto;cursor: pointer;}
.flip-card-inner {position: relative;width: 100%;height: 100%;text-align: center;transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);transform-style: preserve-3d;}
.flip-card.flipped .flip-card-inner {transform: rotateY(180deg);}
.flip-card-front, .flip-card-back {position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;display: flex;flex-direction: column;justify-content: center;align-items: center;background: #fff;border-radius: 12px;box-shadow: 0 4px 15px rgba(0,0,0,0.06);padding: 25px;border: 1px solid #eee;}
.flip-card-back {transform: rotateY(180deg);}

/* 힌트 텍스트 애니메이션 */
.flip-hint {margin-top: 5px;font-size: 0.8rem;color: #bbb;font-family: var(--font-sans);animation: flip-blink 2s infinite;}
@keyframes flip-blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; }}

/* 방명록 스타일 — 상세 스타일은 rsvp.css로 이동 */
.guest-item {background: #fff;padding: 15px;border-radius: 8px;margin-bottom: 15px;box-shadow: 0 2px 5px rgba(0,0,0,0.05);position: relative;}
.guest-list { margin-top: 30px; max-width: 400px; margin-left: auto; margin-right: auto; text-align: left;padding: 0 15px;}
.main-footer { padding: 30px 20px; font-size: 0.8rem; color: #bbb; text-align: center; }

/* --- 예식 안내 달력 --- */
.calendar-section {padding: 60px 20px;text-align: center;}
.calendar-header .sub-title {display: block;font-size: 0.75rem;letter-spacing: 2px;color: #999;margin-bottom: 5px;}
.calendar-info {font-family: var(--font-serif);}
.calendar-info .venue-name {font-size: 1.2rem;color: var(--accent-color);font-weight: bold;margin-bottom: 8px;}
.calendar-intro { font-size: 0.9rem; color: #888; margin-top: -15px;}
.calendar-container {max-width: 320px;margin: 0 auto;padding: 20px;}
.month-title {font-size: 1.1rem;font-weight: bold;letter-spacing: 3px;margin-bottom: 25px;color: var(--accent-color);}
.calendar-table {width: 100%;border-collapse: collapse;}
.calendar-table th {font-size: 0.85rem;font-weight: normal;padding-bottom: 15px;color: #888;}
.calendar-table td {padding: 10px 0;font-size: 0.95rem;color: #444;position: relative;}
.calendar-table .sun { color: #d9534f; }
.calendar-table .sat { color: #5bc0de; }

/* 예식일 하이라이트 (원형 포인트) */
.calendar-table td.wedding-day {color: #fff !important;font-weight: bold;z-index: 1;position: relative;}
.calendar-table td.wedding-day::after {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 34px; /* 크기를 살짝 키움 */height: 34px;background-color: var(--accent-color);border-radius: 50%;z-index: -1;animation: heartbeat 1.5s ease-in-out infinite;}
@keyframes heartbeat { 0% {transform: translate(-50%, -50%) scale(1);box-shadow: 0 0 0 0 rgba(52, 61, 70, 0.4);} 50% {transform: translate(-50%, -50%) scale(1.15); /* 살짝 커짐 */box-shadow: 0 0 0 10px rgba(52, 61, 70, 0);} 100% {transform: translate(-50%, -50%) scale(1);box-shadow: 0 0 0 0 rgba(52, 61, 70, 0);}}

/* --- 우리의 이야기 (Timeline) 스타일 --- */
.timeline-section { padding: 60px 20px; overflow: hidden; }
.timeline-intro { font-size: 0.9rem; color: #888; margin-top: -15px; margin-bottom: 40px; }
.timeline-container {position: relative;max-width: 100%;margin: 40px auto;padding: 0;}
.timeline-container::after {content: '';position: absolute;width: 1px;background-color: var(--accent-color);top: 0;bottom: 0;left: 50%;transform: translateX(-50%);z-index: 1;}
.timeline-item {position: relative;width: 100%;margin-bottom: 50px;display: flex;align-items: flex-start;}
.timeline-item::after {content: '';position: absolute;width: 10px;height: 10px;background-color: var(--accent-color);border: 2px solid #fff;border-radius: 50%;left: 50%;top: 20px;transform: translateX(-50%);z-index: 2;}
.timeline-img, .timeline-content {width: 50%;padding: 0 25px;box-sizing: border-box;}
.timeline-item.left {flex-direction: row;} /* 왼쪽 아이템: 이미지가 왼쪽, 텍스트가 오른쪽 */
.timeline-item.left .timeline-img { text-align: right; }
.timeline-item.left .timeline-content { text-align: left; }
.timeline-item.right {flex-direction: row-reverse;} /* 오른쪽 아이템: 이미지가 오른쪽, 텍스트가 왼쪽 */
.timeline-item.right .timeline-img { text-align: left; }
.timeline-item.right .timeline-content { text-align: right; }
.timeline-img img {width: 100%;max-width: 140px;aspect-ratio: 1 / 1;object-fit: cover;border-radius: 12px;} /* 이미지 크기 고정 */
.timeline-content {width: 55%;padding: 0 30px;text-align: left;}
.timeline-item.right .timeline-content { text-align: left; }
.timeline-date {display: inline-block;background-color: var(--accent-color);color: #fff;padding: 2px 12px;border-radius: 20px;font-size: 0.75rem;margin-bottom: 8px;}
.timeline-date.highlight { background-color: #f48fb1; }
.timeline-content h4 {font-size: 0.95rem;color: #333;margin-bottom: 5px;font-weight: bold;}
.timeline-content p {font-size: 0.85rem;color: #666;line-height: 1.5;word-break: keep-all;}

/* 카운트다운 컨테이너 */
.countdown-container {display: flex;justify-content: center;gap: 10px;margin-top: 220px;animation: fadeInUp 1.5s ease-out;}

/* 개별 카드 스타일 */
.countdown-card {background: #ffffff;width: 70px;height: 80px;border-radius: 8px;display: flex;flex-direction: column;justify-content: center;align-items: center;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 은은한 그림자 */}

/* 카드 상단 라벨 (DAYS, HOUR 등) */
.card-label {font-size: 0.65rem;color: #888;font-weight: bold;margin-bottom: 5px;letter-spacing: 1px;}

/* 카드 숫자 값 */
.card-value {font-size: 1.5rem;font-weight: 500;color: #333;font-family: var(--font-sans);}

/* 모바일 대응: 화면이 아주 작을 경우 간격 조절 */
@media (max-width: 360px) {  .countdown-card {width: 60px;height: 70px;}  .card-value {font-size: 1.3rem;}}

/* --- 공유하기 섹션 스타일 --- */
.share-section {padding: 30px 20px;background-color: #fff;border-top: 1px solid #f2f2f2;}
.share-wrap {display: flex;gap: 12px;max-width: 380px;margin: 0 auto;}
.btn-share {flex: 1;height: 50px;border: none;border-radius: 8px;font-size: 0.9rem;font-weight: 500;cursor: pointer;display: flex;align-items: center;justify-content: center;gap: 8px;transition: all 0.2s;}
.btn-share.link {background-color: var(--accent-color);color: #fff;} /* 링크 복사 버튼 */
.btn-share.link .icon {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");}

/* 카카오톡 공유 버튼 (카카오 브랜드 컬러) */
.btn-share.kakao {background-color: #FEE500;color: #3A1D1D;}
.btn-share:active {transform: scale(0.97);opacity: 0.9;}
.btn-share .icon {width: 18px;height: 18px;background-size: contain;background-repeat: no-repeat;background-position: center;}
.btn-share.kakao .icon {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233A1D1D'%3E%3Cpath d='M12 3C6.48 3 2 6.48 2 10.75c0 2.85 2 5.3 5 6.35l-1.1 4.1 4.8-3.2c.4.1.85.2 1.3.2 5.52 0 10-3.48 10-7.75S17.52 3 12 3z'/%3E%3C/svg%3E");}

/* 비밀번호 모달 전용 스타일 */
.password-modal-content {background: #fff;padding: 30px 20px;width: 85%;max-width: 320px;border-radius: 15px;text-align: center;box-shadow: 0 10px 30px rgba(0,0,0,0.2);}
.password-modal-content h3 {font-family: var(--font-serif);margin-bottom: 10px;color: var(--accent-color);}
.password-modal-content p {font-size: 0.9rem;color: #888;margin-bottom: 20px;}
#deletePasswordInput {width: 100%;padding: 12px;border: 1px solid #ddd;border-radius: 8px;margin-bottom: 20px;outline: none;text-align: center;font-size: 1rem;}
.password-modal-btns {display: flex;gap: 10px;}
.password-modal-btns button {flex: 1;padding: 12px;border: none;border-radius: 8px;cursor: pointer;font-weight: bold;}
.btn-cancel { background: #eee; color: #666; }
.btn-confirm { background: var(--accent-color); color: #fff; }

/* --- 인라인 스타일 정리 --- */
.intro-video-overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:9999;display:flex;align-items:center;justify-content:center;}
.intro-video {object-fit:cover;}
.intro-skip-btn {position:absolute;bottom:30px;right:20px;background:rgba(255,255,255,0.3);border:1px solid #fff;color:#fff;padding:5px 15px;border-radius:20px;font-size:12px;cursor:pointer;}
.main-container-hidden {display:none;}
.header-inner-dim {opacity:0.7;}
.bg-light {background-color:#f9f9f9;}
.bg-white {background-color:#fff;}
.location-title {font-family:var(--font-serif);color:var(--accent-color);margin-bottom:20px;}
.map-container {width:100%;height:350px;border-top:1px solid #ddd;pointer-events:none;}
.shuttle-link {display:inline-block;font-size:0.75rem;color:#888;text-decoration:none;padding:5px 12px;border:1px solid #ddd;border-radius:20px;transition:0.2s;}
.shuttle-link-wrap {text-align:center;margin-bottom:3px;margin-top:10px;}