/* ===== Rosegold Aesthetic Wedding Invitation ===== */

/* Google font (선택) : 링크 추가하면 더 감성 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500&family=Parisienne&display=swap');

:root{
  --bg: #fbf7f6;
  --paper: rgba(255,255,255,.78);
  --paper-solid: #ffffff;
  --text: #2f2a28;
  --muted: #7b6f6c;

  /* rosegold palette */
  --rg-1: #b76e79;     /* 로즈골드 */
  --rg-2: #e6b7bf;     /* 연한 로즈 */
  --rg-3: #f3d5db;     /* 파우더 */
  --champ: #d6b89b;    /* 샴페인 골드 */
  --line: rgba(183,110,121,.18);

  --shadow: 0 18px 60px rgba(15,10,10,.10);
  --shadow-soft: 0 10px 30px rgba(15,10,10,.08);
  --radius: 22px;
}

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

html, body{
  height: 100%;
}

body{
  font-family: "Noto Serif KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(231,183,191,.35), transparent 60%),
    radial-gradient(900px 500px at 95% 10%, rgba(214,184,155,.25), transparent 55%),
    linear-gradient(180deg, #fff 0%, var(--bg) 35%, #fff 100%);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 레이아웃 */
.container{
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 18px;
}

section{
  margin: 18px 12px;
  border-radius: var(--radius);
  background: var(--paper);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* 섹션 내부 패딩 */
section .container{
  padding: 34px 22px;
}

/* 공통 타이틀 */
h2{
  text-align: center;
  font-size: 22px;
  letter-spacing: .02em;
  font-weight: 500;
  color: #3b3230;
  margin-bottom: 26px;
  position: relative;
}

h2::after{
  content:"";
  display:block;
  width: 84px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, rgba(183,110,121,.55), transparent);
}

/* ===== 메인 섹션 ===== */
.main-section{
  margin-top: 22px;
  padding: 0;
  background:
    radial-gradient(800px 420px at 50% -30%, rgba(183,110,121,.25), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.85), rgba(243,213,219,.35));
}

.main-section .container{
  padding: 56px 22px 52px;
  text-align: center;
}

.couple-names{
  font-family: "Parisienne", "Noto Serif KR", serif;
  font-size: 46px;
  font-weight: 400;
  color: var(--rg-1);
  letter-spacing: .02em;
  margin-bottom: 10px;
  text-shadow: 0 12px 30px rgba(183,110,121,.18);
}

.wedding-date{
  font-size: 16px;
  color: var(--muted);
  margin-top: 14px;
}

.wedding-location{
  font-size: 14px;
  color: rgba(123,111,108,.9);
  margin-top: 8px;
}

/* 메인 아래 리본 라인 */
.main-section .container::after{
  content:"";
  display:block;
  width: 140px;
  height: 1px;
  margin: 26px auto 0;
  background: linear-gradient(90deg, transparent, rgba(214,184,155,.65), transparent);
}

/* ===== 인사말 ===== */
.greeting-section{
  text-align: center;
}

.greeting-text{
  font-size: 15px;
  color: rgba(47,42,40,.86);
  line-height: 1.9;
}

/* ===== 가족 정보 ===== */
.family-section{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(243,213,219,.20));
}

.family-info{
  text-align:center;
}

.family-info p{
  margin: 14px 0;
  color: rgba(47,42,40,.86);
  font-size: 15px;
}

.family-info strong{
  color: var(--rg-1);
  font-weight: 600;
}

/* ===== 갤러리 ===== */
.gallery-section .container{
  padding-bottom: 26px;
}

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.gallery-item{
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow:hidden;
  background: #f3efee;
  box-shadow: 0 12px 28px rgba(0,0,0,.07);
  border: 1px solid rgba(183,110,121,.12);
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .35s ease;
}

.gallery-item:hover img{
  transform: scale(1.08);
}

.gallery-note{
  text-align:center;
  font-size: 13px;
  color: rgba(123,111,108,.85);
}

/* ===== 오시는 길 ===== */
#map{
  width:100%;
  height: 340px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(183,110,121,.14);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  margin-bottom: 18px;
}

.location-info{
  text-align:center;
  margin-bottom: 18px;
}

.location-info h3{
  font-size: 17px;
  color: #3b3230;
  margin-bottom: 6px;
}

.location-info p{
  color: rgba(123,111,108,.9);
  margin: 4px 0;
}

.transport-info{
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(243,213,219,.18));
  border: 1px solid rgba(214,184,155,.22);
}

.transport-info h4{
  margin-top: 14px;
  margin-bottom: 6px;
  font-size: 15px;
  color: rgba(47,42,40,.92);
}
.transport-info h4:first-child{ margin-top:0; }

.transport-info p{
  color: rgba(123,111,108,.9);
  font-size: 14px;
  margin-left: 8px;
}

/* ===== 방명록 ===== */
.guestbook-form{
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(243,213,219,.18));
  border: 1px solid rgba(183,110,121,.12);
  box-shadow: 0 12px 28px rgba(0,0,0,.05);
  margin-bottom: 22px;
}

.guestbook-form input,
.guestbook-form textarea{
  width:100%;
  padding: 12px 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid rgba(183,110,121,.18);
  background: rgba(255,255,255,.85);
  color: rgba(47,42,40,.92);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.guestbook-form input:focus,
.guestbook-form textarea:focus{
  border-color: rgba(183,110,121,.45);
  box-shadow: 0 0 0 4px rgba(231,183,191,.24);
}

.guestbook-form button{
  width:100%;
  padding: 12px 14px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-size: 15px;
  color: white;
  background: linear-gradient(135deg, var(--rg-1), #d28b96);
  box-shadow: 0 14px 30px rgba(183,110,121,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.guestbook-form button:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(183,110,121,.26);
  filter: brightness(1.02);
}

.guestbook-list{
  max-height: 560px;
  overflow-y: auto;
  padding-right: 2px;
}

.guestbook-item{
  border-radius: 18px;
  padding: 14px 14px 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(183,110,121,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

.guestbook-header{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.guestbook-name{
  color: rgba(47,42,40,.92);
  font-weight: 600;
}

.guestbook-date{
  font-size: 12px;
  color: rgba(123,111,108,.82);
}

.guestbook-message{
  color: rgba(47,42,40,.80);
  font-size: 14px;
  white-space: pre-wrap;
  margin-bottom: 10px;
}

.guestbook-delete{
  border: none;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: rgba(47,42,40,.88);
  background: rgba(231,183,191,.22);
  border: 1px solid rgba(183,110,121,.18);
  transition: transform .15s ease, background .15s ease;
}

.guestbook-delete:hover{
  transform: translateY(-1px);
  background: rgba(231,183,191,.30);
}

.loading, .no-data{
  text-align:center;
  color: rgba(123,111,108,.88);
  padding: 26px 0;
}

/* ===== 계좌 ===== */
.account-info{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.account-box{
  border-radius: 18px;
  padding: 18px 14px;
  text-align:center;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(214,184,155,.22);
  box-shadow: 0 12px 28px rgba(0,0,0,.05);
}

.account-box h4{
  color: var(--rg-1);
  font-size: 15px;
  margin-bottom: 10px;
}

.account-box p{
  color: rgba(47,42,40,.82);
  font-size: 14px;
  margin: 4px 0;
}

/* ===== 푸터 ===== */
footer{
  margin: 18px 12px 26px;
  border-radius: var(--radius);
  background: rgba(47,42,40,.92);
  box-shadow: var(--shadow-soft);
}

footer .container{
  padding: 22px 18px;
  text-align:center;
}

footer p{
  color: rgba(255,255,255,.70);
  font-size: 13px;
}

/* ===== 배경음악 버튼 (CSS 아이콘) ===== */
.music-player{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
}

.music-toggle{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(214,184,155,.35);
  box-shadow: 0 12px 32px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.65);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.music-toggle:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.70);
}

.music-toggle:active{ transform: translateY(0) scale(.98); }

/* play triangle */
.music-icon{
  position: relative;
  width: 0;
  height: 0;
  border-left: 14px solid var(--rg-1);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  transform: translateX(2px);
  transition: all .18s ease;
}

/* playing => pause bars */
.music-toggle.is-playing{
  border-color: rgba(183,110,121,.35);
  box-shadow:
    0 12px 32px rgba(0,0,0,.12),
    0 0 0 6px rgba(231,183,191,.18),
    inset 0 1px 0 rgba(255,255,255,.65);
}

.music-toggle.is-playing .music-icon{
  width: 16px;
  height: 18px;
  border: none;
  transform: translateX(0);
}

.music-toggle.is-playing .music-icon::before,
.music-toggle.is-playing .music-icon::after{
  content:"";
  position:absolute;
  top:0;
  width:5px;
  height:18px;
  background: var(--rg-1);
  border-radius: 3px;
}
.music-toggle.is-playing .music-icon::before{ left:0; }
.music-toggle.is-playing .music-icon::after{ right:0; }

/* ===== 반응형 ===== */
@media (max-width: 768px){
  .couple-names{ font-size: 40px; }
  section{ margin: 14px 10px; }
  section .container{ padding: 30px 18px; }
  .account-info{ grid-template-columns: 1fr; }
  #map{ height: 320px; }
  .music-toggle{ width: 50px; height: 50px; }
}



/* ===== Sakura Falling Animation ===== */
.sakura{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999; /* 음악버튼(1000) 아래로 */
}

.petal{
  position: absolute;
  top: -10vh;
  width: var(--size);
  height: calc(var(--size) * 0.7);
  left: var(--left);
  opacity: var(--opacity);
  transform: translate3d(0,0,0) rotate(var(--rot));
  animation:
    fall var(--dur) linear var(--delay) infinite,
    sway var(--swaydur) ease-in-out var(--delay) infinite;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.08));
}

/* 꽃잎 모양(심플하지만 예쁨) */
.petal::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 999px 999px 999px 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.15), transparent 55%),
    linear-gradient(135deg, rgba(231,183,191,.95), rgba(183,110,121,.75));
  transform: rotate(18deg);
  clip-path: polygon(50% 0%, 88% 20%, 100% 55%, 78% 92%, 50% 100%, 22% 92%, 0% 55%, 12% 20%);
}

@keyframes fall{
  to { transform: translate3d(0, 120vh, 0) rotate(calc(var(--rot) + 540deg)); }
}

@keyframes sway{
  0%, 100% { margin-left: 0; }
  50% { margin-left: var(--sway); }
}

/* 모션 줄이기 설정 존중 */
@media (prefers-reduced-motion: reduce){
  .petal{ display:none; }
}