/* 기본 리셋 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Noto Sans KR", sans-serif;
  background-color: #ffffff;
  color: #333;
  line-height: 1.6;
  margin: 0;
}

/* 섹션 */
.section {
  width: 100%;
}

/* 이미지 */
/* ✅ 본문 섹션 이미지: 비율 제각각이어도 안정적으로 로드 */
.section > img{
  width: 100%;
  height: auto;        /* ✅ 원본 비율 유지 */
  display: block;
  background: #fff;    /* ✅ 로딩 중 배경 */
}

/* ✅ 로딩 중 하얀 공백이 크게 느껴질 때(선택) */
.section > img[data-stable]{
  min-height: 220px;   /* ✅ 레이아웃 확보(원하면 180~320 조절) */
}

html, body {
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  margin: 0; padding: 0; /* PC에서도 모바일용으로 보이기 위해서 해당 한줄 추가 */
}

/*-----------------------*/
/* ✅ 첫 번째 이미지 위에 버튼 얹기 */
/* ✅ HERO 영역: 버튼을 이미지 위에 올리기 위한 기준 */
.hero {
  position: relative;
  width: 100%;
}

/* 첫 이미지: 화면 가로 꽉 */
.hero-img {
  width: 100%;
  height: auto;
  display: block;
}


/* =========================================================
   ✅✅✅ PC에서 "모바일 화면 프리뷰"처럼 보이게 하기 (추가)
   - HTML 수정 없이 CSS만으로 적용
   - 모바일에서는 기존대로 풀폭
   - PC(큰 화면)에서만 가운데 고정폭 + 좌우 여백
========================================================= */
@media (min-width: 768px) {
  html, body {
    background: #f3f3f3;          /* PC에서 좌우 여백 배경 */
  }

  body {
    max-width: 430px;             /* 모바일 프리뷰 폭 (390~460 취향) */
    margin: 0 auto;               /* 가운데 정렬 */
    background: #fff;             /* 프리뷰 카드 배경 */
    box-shadow: 0 12px 40px rgba(0,0,0,0.12); /* 카드 느낌 */
    min-height: 100vh;
  }

  /* 섹션/이미지/히어로가 body 폭을 넘어가지 않게 안전장치 */
  .section,
  .section > img,
  .hero,
  .hero-img {
    max-width: 100%;
  }
}
/*=========== PC에서도 모바일 처럼 보이게 하기위해 신규 추가된 css 코딩 =========== */

/* 버튼: 이미지 위에 겹치기 */
.location-btn {
  position: absolute;
  z-index: 9999;
  left: 50%;
  top: 85%;                 /* ✅ 원하는 위치: 숫자만 바꾸면 됨 */
  transform: translate(-50%, -50%);
}

/* ✅ 버튼 이미지 크기 강제 (기존 width:100% 규칙 무력화) */
.location-btn .btn-img {
  width: 160px !important;  /* ✅ 여기로 버튼 크기 조절 */
  height: auto !important;
  display: block;
  max-width: none !important;
}


/*------------BGM 재생 및 버튼 넣기-----------*/
.bgm-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 99999;

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  -webkit-tap-highlight-color: transparent;
}

/* ✅ [수정] 버튼 안 PNG 아이콘 스타일 추가 (기능은 그대로, 표시만 교체) */
.bgm-btn .bgm-icon{
  width: 28px;          /* ✅ 아이콘 표시 크기 */
  height: 28px;         /* ✅ 아이콘 표시 크기 */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none; /* ✅ 아이콘이 클릭 이벤트를 가로채지 않게 */
}


/*------------- 갤러리 관련-----------*/
/* ===== 갤러리: 3x4 정사각 + 더보기 ===== */
/* ===== 갤러리: 여백 0, 라운딩 0, 완전 갤러리 형태 ===== */

/* 섹션 자체 여백 제거 (갤러리만) */
#gallery.section {
  padding: 0 !important;
}

/* 제목도 필요 없으면 숨김(원하면 주석 해제) */
/* #gallery .section-title { display: none; } */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;                 /* ✅ 사진 사이 여백 0 */
  width: 100%;
  max-width: none;        /* ✅ 중앙 정렬 제한 해제 */
  margin: 0;              /* ✅ 좌우 여백 제거 */
}

.g-item {
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;       /* ✅ 라운딩 제거 */
  overflow: hidden;
  aspect-ratio: 3 / 4; /* ✅ 가로 3 : 세로 4 */
}

.g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 더보기 영역도 여백 최소화 */
.gallery-actions {
  display: flex;
  justify-content: center;
  padding: 10px 0 14px;   /* 아래 버튼만 살짝 띄움 */
  margin: 0;
}

.more-btn {
  border: none;
  background: transparent;
  color: #443119;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 10px;
  opacity: 0.75;
}

.more-btn .arrow {
  margin-left: 4px;
  position: relative;
  top: -1px;   /* 숫자 줄수록 더 위로 올라감 */
}

/* 모달은 그대로 두되, 모달 안 라운딩도 빼고 싶으면 아래 적용 */
.modal-content {
  border-radius: 0;       /* ✅ (선택) 모달 라운딩 제거 */
}


/* ===== 모달(좌/우 넘기기) ===== */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal.open {
  display: flex;  /*기존 코딩*/
  position: fixed; /*3줄 수정 추가 삽입*/
  width: 100%;
  overflow: hidden;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  border: none;
}

.modal-content {
  position: relative; /* ✅ 화살표 기준 */
  z-index: 2;
  width: min(92vw, 560px);
  border-radius: 18px;
  overflow: hidden;
  background: #111;
}

.modal-content img {
  width: 100%;
  height: auto;
  display: block;
}

/* ✅ 모달 좌/우 네비게이션 버튼 */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none; 
  color: #fff;
  font-size: 34px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
}

.nav-btn.prev { left: 4px; }  /*원래 10px이었는데 수정됨. 좌/우 화살표가 사진 끝쪽에 더 가깝도록 */
.nav-btn.next { right: 4px; }

/* 모바일에서 버튼 조금 키우기 */
@media (max-width: 420px) {
  .nav-btn {
    width: 48px;
    height: 48px;
    font-size: 36px;
  }
}

/*깨짐 방지 신규 추가 코딩 */
.g-thumb{
  display:block;
  width:100%;
  aspect-ratio: 3 / 4;
  overflow:hidden;
  background:#f2f2f2;
}

.g-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* ===== 영상 섹션 ===== */
#video.section {
  padding: 0;              /* 갤러리처럼 풀폭이면 0 */
  margin: 0;
}

.video-wrap {
  width: 100%;
}

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;    /* 유튜브 기본 비율 */
  background: #000;
  overflow: hidden;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/*-------------지도 관련------------*/
/* ✅ 오시는 길 섹션 */
.map-section{
  /* padding: 50px 20px; (위아래) (좌우)*/
  padding: 30px 20px 50px; /*위 / 좌우 / 아래*/
  background: #ffffff;
} 

.map-title{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -0.2px;
}

.map-preview img{
  width: 100%;
  display: block;
  border-radius: 18px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.10);
}

.map-info{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.map-addr{
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
  font-weight: 700;
  flex: 1;
}

.copy-btn{
  border: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: #d97a86;
  color: #fff;
  font-size: 14px;   /* ← 이 줄 추가/수정 */
  font-weight: 700;
  white-space: nowrap;
}
.copy-btn:active{
  transform: scale(0.98);
}

/* 오시는 길 하단 교통안내 */
.route-divider{
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.12);
  margin: 18px 0 18px;
}

/* ✅ 여기만 추가됨 (종이 질감 배경) */
.route-guide{
  display: flex; 
  flex-direction: 
  column; 
  gap: 26px; 
}


.route-title{
  font-size: 16px;
  font-weight: 800;
  color: #111;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}

.route-text{
  font-size: 13px;
  line-height: 1.75;
  color: #222;
  word-break: keep-all;
}


/*------마음 전하실 곳 관련 --------*/
/* ===== 마음 전하실 곳 배경 레이어 고정 ===== */
#gift{
  position: relative;
  padding: 0 !important;      /* ✅ 상하좌우 여백 제거 */
  overflow: visible;          /* ✅ 드랍이 잘려서 숨는 원인 제거 */
  z-index: 10;                /* ✅ 아래 섹션 이미지보다 위 */
}

/* 이미지 자체가 섹션의 높이를 만듦 */
#gift .gift-bg{
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

#gift .gift-wrap{
  position: absolute;
  top: 42%;                 /* 🔥 px → 비율 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;                /* ✅ 드랍이 아래 섹션보다 위로 */
  max-width: 390px;  /*버튼 가로 넓이 수정*/
  width: min(390px, calc(100% - 70px)); /* ✅ 모바일에서 버튼 작아짐 방지 + 좌우 여백 (가로 넓이 수정)*/
  margin: 0 auto;
}

/*백그라운드 신규 코딩 */
#gift.section{ 
  padding: 0 !important;
}

/* ===== 기본 스타일 ===== */
.gift-pill{
  width: fit-content;
  margin: 0 auto 18px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #d97a86;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.gift-thanks{
  width: fit-content;
  margin: 20px auto 20px;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
}

.gift-block{
  margin-top: 18px;
}

.gift-title{
  font-size: 18px;
  font-weight: 800;
  color:#222;
  display:flex;
  align-items:center;
  gap: 6px;
}

.gift-line{
  height: 2px;
  background: rgba(0,0,0,0.55);
  margin: 10px 0 8px;
}

.gift-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}

.gift-left{
  min-width: 0;
}

.gift-bank{
  font-size: 14px;
  color:#333;
}

.gift-num{
 /* font-weight: 800; */
  font-size: 14px;
  letter-spacing: 0.2px;
}

.gift-name{
  font-size: 14px;
  font-weight: 800;
  color:#444;
  margin-top: 4px;
}

.gift-copy{
  border: 0;
  background:#d97a86;
  color:#fff;
  font-weight: 800;
  border-radius: 999px;
  padding: 10px 16px;
  white-space: nowrap;
}

.gift-copy:active{ transform: scale(0.98); }

.gift-bottom{
  margin-top: 26px;
  display:flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.gift-foot{
  margin-top: 18px;
  text-align:center;
  font-size: 12px;
  opacity: .7;
  color:#333;
}

/* ===== gift 드랍(아코디언) UI ===== */
.gift-accordion{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top: 18px;
  position: relative;
  z-index: 60; /* ✅ 아코디언 전체가 아래 섹션보다 위 */
}

.acc-item summary::-webkit-details-marker { display:none; }
.acc-item summary { list-style:none; }

/* ===== (수정) 드랍 모양 1번처럼: 헤더+바디가 한 카드처럼 이어지게 ===== */

/* acc-item 자체는 "테두리 카드" 역할을 하지 않게 비움 */
.acc-item{
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* ✅ 열렸을 때 최상단 */
.acc-item[open]{
  z-index: 999;
}

/* ✅ 닫혔을 때 버튼(헤더) 자체가 카드처럼 */
.acc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width: 100%;
  box-sizing: border-box;

  padding: 8px 16px; /*버튼 세로 넓이 수정*/
  min-height: 40px; /*버튼 세로 넓이 수정*/

  background:#fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;     /* 닫혔을 땐 전체 라운드 */
  cursor:pointer;
  user-select:none;
}

/* 열렸을 때 헤더 하단 구분선 */
.acc-item[open] .acc-head{
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
}

.acc-label{
  font-size:15px;
  font-weight:800;
  color:#222;
}

.acc-chevron{
  font-size:20px;
  opacity:.7;
  transition: transform .18s ease;
}
.acc-item[open] .acc-chevron{
  transform: rotate(180deg);
}

/* ✅ 핵심: 바디는 overlay 유지하되, "한 카드"처럼 보이게 테두리/라운드 이어붙임 */
.acc-body{
  position: absolute;
  left: 0;
  right: 0;

  top: calc(100% - 1px);   /* 헤더 테두리와 1px 겹쳐서 이음새 없게 */
  background:#fff;

  border: 1px solid rgba(0,0,0,0.08);
  border-top: 0;           /* 헤더와 이어지므로 위 테두리 제거 */
  border-radius: 0 0 16px 16px;

  padding: 10px 18px 10px;

  box-shadow: none;        /* ✅ 1번처럼 깔끔하게 (원하면 값 줄 수도 있음) */
}

/* 바디 안 구분선은 유지 */
.acc-body .gift-row{
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.acc-body .gift-row:first-child{
  border-top: 0;
}

/* ===== 토스트 ===== */
.gift-toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.gift-toast.show{ opacity: 1; }



/* ===== 하단 공유 영역 ===== */
/* 하단 공유 섹션 배경만 화이트 */
/* ===== 공유 버튼 섹션(배경 흰색 + 중앙정렬) ===== */
#share{
  background:#ffffff;
  padding:44px 0 40px;
  text-align:center;
}

/* 버튼 2개를 한 덩어리로 정렬 */
.share-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;              /* 버튼 사이 간격 (캡처 느낌) */
}

/* 공통 버튼 */
.share-btn{
  width: 64%;        /* 🔽 78% → 64% */
  max-width: 280px; /* 🔽 320px → 280px */
  height: 56px;           /* 버튼 높이 */
  border-radius: 14px;    /* 캡처처럼 둥근 사각형 */
  font-size: 16px;
  font-weight: 700;
  border: 1px solid #e5e5e5;
  background: #ffffff;
  color: #222;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* 카카오 버튼 */
.share-btn.kakao{
  background: #FEE500;
  color: #000;
  border: none;
}

/* 주소 복사 버튼 */
.share-btn.link{
  background: #000000;
  color: #ffffff;
  border: none;
}

/* 터치 피드백 */
.share-btn:active{
  transform: scale(0.98);
}

/* ===== 최하단 작은 글씨(©weddingpeach) ===== */
.share-footer{
  margin-top: 36px;       /* 버튼 아래 여백 (캡처 느낌) */
  font-size: 14px;
  color: #222;
  opacity: 0.9;
}