/* ===================== wedding.css (정리본) ===================== */

/* ---------- 1) Hero(배경) ---------- */
.invitation{
  position:relative; width:100%; height:100vh;
  background:url('../assets/img/bg.jpg') center/cover no-repeat;
}
.invitation::before{ content:''; position:absolute; inset:0; background:var(--overlay-bg); }
.name{
  position:absolute; top:4vh; color:var(--primary-text);
  font-size:4vw; font-weight:500; letter-spacing:1px; z-index:2;
}
.name.left{left:5vw;} .name.right{right:5vw;}
.title{
  position:absolute; top:70%; left:50%; transform:translate(-50%,-50%) rotate(-8deg);
  font-family:'Great Vibes',cursive; font-size:11vw; line-height:1.05; color:var(--accent-text);
  text-align:center; white-space:pre-line; z-index:2;
}
.hero-date{
  position:absolute; bottom:5vh; width:100%; text-align:center; color:var(--primary-text);
  font-size:4vw; letter-spacing:2px; z-index:2;
}
@media(min-width:768px){
  .title{font-size:6rem;}
  .name,.date{font-size:1.25rem;}
}

/* ---------- 2) 초대 섹션 ---------- */
.content-section{
  padding:10vh 7vw; background:#fff; text-align:center; color:#333;
  line-height:1.7; font-size:4.3vw;
}
.content-section.narrow{ max-width:540px; margin:0 auto; }
.ornament{ width:200px; height:auto; margin:0 auto 3.5vh; opacity:.7; }
.invite-heading{ font-size:6vw; font-weight:600; margin-bottom:4vh; }
.invite-text{ font-size:4.3vw; margin-bottom:6vh; white-space:pre-line; }
.divider{ width:1px; height:52px; background:#d0d0d0; margin:0 auto 6vh; }
.parents{ font-size:4.1vw; color:#555; }
.parents .label{ color:#999; font-size:.9em; }
@media(min-width:768px){
  .content-section{font-size:1rem;}
  .invite-heading{font-size:1.75rem;}
  .invite-text{font-size:1rem;}
  .parents{font-size:.95rem;}
}

/* ---------- 3) 캘린더 & 카운트다운 ---------- */
.calendar-section{
  padding:10vh 7vw 12vh; background:#faf7f7; text-align:center; color:#333; font-size:4.3vw;
}
.cal-heading{ font-family:'Pretendard',sans-serif; font-size:7vw; font-weight:700; letter-spacing:.5px; margin:2vh 0 1vh; }
.cal-sub{ font-size:4.1vw; color:#777; margin-bottom:5vh; }
.calendar{
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:1.2vh 0; max-width:320px; margin:0 auto 6vh;
}
.calendar .day-name{ font-weight:600; font-size:3.8vw; color:#999; }
.calendar .date{
  width:7vw; height:7vw; display:flex; align-items:center; justify-content:center;
  color:#333; font-size:4vw; font-weight:600;
}
.calendar .today{ background:#333; color:#fff; border-radius:50%; display:inline-block; width:6.2vw; height:6.2vw; line-height:6.2vw; }
.countdown{ display:flex; align-items:center; justify-content:center; gap:2vw; margin-bottom:4vh; }
.cd-box{ background:#fff; border-radius:8px; padding:2vh 2.5vw; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.cd-box span{ display:block; font-size:6vw; font-weight:700; color:#000; }
.cd-box small{ font-size:3vw; color:#999; letter-spacing:.5px; }
.colon{ font-size:6vw; color:#999; }
.dmsg{ font-size:4.1vw; color:#444; }
@media(min-width:768px){
  .calendar-section{font-size:1rem;}
  .cal-heading{font-size:2.25rem;}
  .cal-sub{font-size:1rem;}
  .calendar .day-name{font-size:.9rem;}
  .calendar .date{font-size:1rem;}
  .calendar .today{width:34px;height:34px;line-height:34px;font-size:.9rem;}
  .cd-box span{font-size:2rem;}
  .cd-box small{font-size:.75rem;}
  .colon{font-size:2rem;}
  .dmsg{font-size:1rem;}
  .calendar{
    width:100%;
    grid-template-columns:repeat(7, minmax(auto, 1fr));
    justify-content:center; column-gap:38px;
  }
  .calendar .date, .calendar .day-name{ text-align:center; }
}

/* ---------- 4) 갤러리 ---------- */
.gallery-section{ padding:10vh 7vw 12vh; background:#fff; text-align:center; color:#333; }
.gallery-heading{ font-size:5vw; font-weight:600; margin-bottom:4vh; }
.gallery-grid{ column-count:2; column-gap:1.5vw; margin:0 auto; }
.gallery-grid img{
  width:100%; margin-bottom:1.5vw; border-radius:6px;
  break-inside:avoid; box-shadow:0 1px 4px rgba(0,0,0,.07);
}
/* PC에서 중앙정렬 + 고정 간격 */
@media (min-width:768px){
  .gallery-section .gallery-grid{
    width:min(900px, 100%); margin:0 auto;
    column-count:4; column-gap:24px;
  }
}
@media (min-width:1280px){
  .gallery-section .gallery-grid{ width:1040px; }
}
@media(min-width:768px){
  .gallery-heading{font-size:2rem;}
}

/* ---------- 5) 식장 위치 ---------- */
.venue-section{ padding:10vh 7vw 12vh; background:#fff; text-align:center; color:#333; }
.venue-heading{ font-size:5vw; font-weight:600; margin-bottom:2vh; }
.venue-name{ font-size:4.3vw; font-weight:500; margin-bottom:1vh; }
.venue-addr{ font-size:4.1vw; color:#777; margin-bottom:4vh; }
.map-box{ width:100%; height:55vw; max-height:550px; border:1px solid #ececec; border-radius:8px; overflow:hidden; margin-bottom:3vh; }
.map-links{ display:flex; justify-content:center; gap:3vw; }
.map-links a{
  flex:1; text-align:center; padding:2.2vh 0; background:#f9f9f9; border:1px solid #e0e0e0;
  border-radius:6px; font-size:4vw; color:#008000; font-weight:600;
}
@media(min-width:768px){
  .venue-heading{font-size:2rem;}
  .venue-name{font-size:1.2rem;}
  .venue-addr{font-size:1rem;}
  .map-box{height:340px;}
  .map-links a{font-size:.95rem;}
}

/* ---------- 6) 오시는 길 ---------- */
.directions-section{ padding:10vh 7vw 12vh; background:#fff; text-align:center; color:#333; line-height:1.7; }
.directions-heading{ text-align:center; font-size:5vw; font-weight:600; margin-bottom:5vh; }
.dir-block{ border:1px solid #ebebeb; border-radius:10px; text-align:left; padding:5vh 5vw; margin-bottom:4vh; }
.dir-title{ font-size:4.5vw; font-weight:600; margin-bottom:2vh; display:flex; align-items:center; gap:1vw; }
.dir-title .emoji{ font-size:5vw; }
.bullet{ margin-right:.6vw; }
@media(min-width:768px){
  .directions-heading{font-size:2rem;}
  .dir-title{font-size:1.3rem;}
  .dir-title .emoji{font-size:1.4rem;}
  .directions-section p{font-size:1rem;}
}

/* ---------- 7) 계좌 안내 ---------- */
.account-section{ padding:10vh 7vw 12vh; background:#fff; text-align:center; color:#333; }
.account-heading{ font-size:5vw; font-weight:600; margin-bottom:3vh; }
.acc-toggle{
  width:100%; text-align:left; padding:2.8vh 4vw; font-size:4.3vw; font-weight:500;
  background:#f4edee; border:1px solid #e0d6d8; border-radius:4px; margin-top:4vh;
}
.acc-toggle.open{ background:#fff0f3; }
.acc-list{
  list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; transition:max-height .35s ease;
}
.acc-list.open{ max-height:800px; }
.acc-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding:2.8vh 4vw; border-bottom:1px solid #f0f0f0;
}
.acc-info{ font-size:4.1vw; text-align:left; }
.copy-btn{
  font-size:3.8vw; padding:1.2vh 3.5vw; background:#f9f9f9;
  border:1px solid #d9d9d9; border-radius:16px; color:#333;
}
@media(min-width:768px){
  .account-heading{font-size:2rem;}
  .acc-toggle, .acc-info{font-size:1rem;}
  .copy-btn{font-size:.9rem;}
}

/* ---------- 8) 방명록(공통) ---------- */
.guestbook-section{ padding:10vh 7vw 12vh; background:#fafafa; text-align:center; }
.guest-heading{ font-size:5vw; font-weight:600; margin-bottom:4vh; }
#gb-form{ display:flex; flex-direction:column; gap:2vh; margin-bottom:5vh; }
#gb-form input,#gb-form textarea{ padding:2vh 3vw; font-size:4.2vw; border:1px solid #ccc; border-radius:6px; }
#gb-form button{ align-self:flex-end; padding:1.8vh 5vw; font-size:4.2vw; background:#333; color:#fff; border:none; border-radius:6px; }
#gb-list{ list-style:none; padding:0; text-align:left; }
#gb-list li{ background:#fff; border:1px solid #eee; border-radius:6px; padding:2vh 3vw; margin-bottom:2vh; }
#gb-list .date{ color:#999; font-size:3.4vw; margin-left:.6vw; }
@media(min-width:768px){
  .guest-heading{font-size:2rem;}
  #gb-form input,#gb-form textarea,#gb-form button{font-size:1rem;}
  #gb-list .date{font-size:.8rem;}
  .gb-tag{ font-size:1.25rem; padding:.6rem 2.2rem; border-radius:18px; }
  .gb-side{ gap:1.5rem; }
}
#gb-form input, #gb-form textarea,
#gb-form input::placeholder, #gb-form textarea::placeholder{ font-family:'Pretendard', sans-serif; }

/* 신랑/신부 토글 크기(데스크탑 보정) */
.gb-side{ display:flex; justify-content:center; gap:4vw; margin-bottom:2vh; font-size:4.2vw; }
.gb-side input{ display:none; }
.gb-tag{
  padding:1.2vh 4vw; border:1px solid #ccc; border-radius:22px; background:#fff; color:#666;
  cursor:pointer; transition:.25s; user-select:none; font-size:4.2vw;
}
.gb-side input:checked + .gb-tag{ background:#333; color:#fff; border-color:#333; }
@media (min-width:768px){
  .gb-side{ font-size:1rem; gap:12px; }
  .gb-side .gb-tag{ font-size:1rem; padding:.55rem 1.25rem; border-radius:16px; }
}

/* ---------- 8-1) 방명록 트리/헤더/배지 ---------- */
#gb-list .replies{ list-style:none; margin:8px 0 0 12px; padding-left:12px; border-left:2px solid #eee; }
#gb-list .gb-head{ display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; margin-bottom:.25rem; }
#gb-list .gb-badge{
  display:inline-block; padding:0 .45rem; border-radius:6px; font-size:.85rem; font-weight:700; line-height:1.3;
}
/* 배지 색상 */
#gb-list li[data-side="groom"] .gb-badge{ background:#e7f0ff; color:#1653b3; }
#gb-list li[data-side="bride"] .gb-badge{ background:#ffe8f1; color:#b83280; }
#gb-list .gb-head .gb-name{ font-weight:700; }
#gb-list .gb-head .date{ color:#999; font-size:.9em; }
#gb-list .edited{ color:#999; font-size:.8em; margin-left:.25rem; }

/* ---------- 8-2) 방명록 액션 줄(다음 줄 + 우측 정렬 + 동일 간격) ---------- */
#gb-list .gb-actions{
  display:flex; align-items:center; justify-content:flex-end;
  width:100%; margin:.25rem 0 .35rem; clear:both; white-space:nowrap;
}
#gb-list .gb-actions button{
  flex:0 0 auto; font-size:.8rem; line-height:1; padding:.35rem .55rem;
  border-radius:14px; cursor:pointer; border:1px solid transparent;
  background:#f4f6f8; color:#334155; margin-left:.45rem; /* 동일 간격 */
}
#gb-list .gb-actions button:first-child{ margin-left:0; }
#gb-list .gb-actions .reply{ background:#e7f0ff; border-color:#cfe3ff; color:#1653b3; }
#gb-list .gb-actions .edit { background:#fff6e5; border-color:#ffd9a8; color:#8a5300; }
#gb-list .gb-actions .del  { background:#ffe9e9; border-color:#ffcaca; color:#b42318; }
@media (max-width:360px){
  #gb-list .gb-actions{ flex-wrap:wrap; }
  #gb-list .gb-actions button{ margin-top:.35rem; }
}

/* ---------- 8-3) 답글/수정 폼 (모바일 넘침 방지) ---------- */
.reply-form, .edit-form{
  display:flex; flex-direction:column; gap:8px; padding:10px; margin-top:8px;
  background:#f8f8f8; border:1px solid #eee; border-radius:6px;
}
.reply-row, .edit-row{ display:flex; gap:8px; flex-wrap:wrap; }
.reply-row input, .edit-row input{
  flex:1 1 0; min-width:0; padding:.6rem .8rem; font-size:.95rem; border:1px solid #ccc; border-radius:6px;
}
.reply-form .r-msg, .edit-form .e-msg{
  width:100%; padding:.6rem .8rem; font-size:.95rem; border:1px solid #ccc; border-radius:6px;
}
.reply-form .btns, .edit-form .btns{ display:flex; gap:8px; justify-content:flex-end; }
.reply-form .r-submit, .edit-form .e-submit{ background:#333; color:#fff; border:none; border-radius:6px; padding:.6rem 1rem; }
.reply-form .r-cancel, .edit-form .e-cancel{ background:#eee; color:#333; border:1px solid #ccc; border-radius:6px; padding:.6rem 1rem; }
.reply-form[hidden], .edit-form[hidden]{ display:none !important; }
@media (max-width:420px){
  .reply-row input, .edit-row input{ flex-basis:100%; }
}

/* ---------- 9) BGM 버튼 ---------- */
.bgm-btn{
  position:fixed; right:16px; bottom:16px; width:48px; height:48px; border-radius:50%;
  background:#333; box-shadow:0 0 4px rgba(0,0,0,.35); cursor:pointer; outline:none;
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.bgm-btn::before{
  content:''; width:60%; height:60%; background:#fff; transition:opacity .3s;
  --icon:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90' fill='white'><polygon points='25,15 75,45 25,75'/></svg>");
  -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat;
}
.bgm-btn.playing::before{
  --icon:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90' fill='white'><rect x='20' y='15' width='18' height='60'/><rect x='52' y='15' width='18' height='60'/></svg>");
}

/* ---------- 10) 페이드-업 ---------- */
.fade-section{ opacity:0; transform:translateY(35px); transition:opacity .8s ease, transform .8s ease; will-change:opacity, transform; }
.fade-section.in{ opacity:1; transform:translateY(0); }

/* ---------- 11) 비눗방울 ---------- */
.bubble{
  position:fixed; bottom:-12vh; border-radius:50%; pointer-events:none; backdrop-filter:blur(3px); z-index:50;
  animation-name: rise , drift; animation-timing-function: linear , ease-in-out; animation-iteration-count: infinite;
}
@keyframes rise{ 0%{ bottom:-12vh; transform:scale(.8);} 100%{ bottom:110vh; transform:scale(1.2);} }
@keyframes drift{ 0%{ transform:translateX(-6vw);} 50%{ transform:translateX( 6vw);} 100%{ transform:translateX(-6vw);} }

/* ---------- 12) 유틸 ---------- */
.fullbleed{ position:relative; left:50%; right:50%; width:100vw; margin-left:-50vw; margin-right:-50vw; }
@media (prefers-reduced-motion: reduce){ .fade-section{ transition:none !important; } .bubble{ animation:none !important; } }

/* ---------- 13) Splash(초기 로딩) ---------- */
.splash{
  position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center;
  background:#f7f7f7 url('../assets/img/splash.jpg') center/cover no-repeat;
  transition:opacity .45s ease, visibility .45s ease;
}
/* splash.jpg가 없으면 hero 배경 대체 */
.splash{ background-image:url('../assets/img/splash.jpg'), url('../assets/img/bg.jpg'); }
@supports not (background: url('x') center/cover){ .splash{ background:#f7f7f7; } }
.splash-inner{ text-align:center; padding:24px 28px; backdrop-filter:saturate(1.2) blur(1px); }
.splash-logo{ font-family:'Great Vibes', cursive; font-size:clamp(28px, 6vw, 48px); color:#333; margin-bottom:12px; }
.splash-text{ color:#555; font-size:14px; letter-spacing:.2px; }
.splash-spinner{
  width:34px; height:34px; margin:10px auto 8px; border:3px solid rgba(0,0,0,.12);
  border-top-color:#333; border-radius:50%; animation: spin 1s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }
.splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }
body.loading { overflow: hidden; }
@media (prefers-reduced-motion: reduce){ .splash{ transition:none; } .splash-spinner{ animation:none; } }
/* ===== 포토 방명록 안내(갤러리 밑, 식장 위치 위) ===== */
.cta-section{
  padding: 6vh 7vw;
  background: #fff8fb;          /* 은은한 연분홍 배경 */
  border: 1px solid #fde4ee;    /* 아주 옅은 테두리 */
  border-radius: 10px;
  text-align: center;
  color: #8a1048;               /* 텍스트 톤 */
  margin-bottom: 10vh;
}
.cta-title{
  font-weight: 700;
  font-size: 5vw;
  margin-bottom: .6rem;
}
.cta-text{
  font-size: 4.2vw;
  white-space: pre-line;        /* 개행문구 그대로 표시 */
  line-height: 1.7;
}
@media (min-width: 768px){
  .cta-title{ font-size: 1.5rem; }
  .cta-text { font-size: 1rem;  }
}
.cta-section .cta-note{ font-size:3.6vw; color:#777; opacity:.95; margin-top:.35rem; }
@media (min-width:768px){ .cta-section .cta-note{ font-size:.95rem; } }
/* ===== Thanks to (맨 아래 감사 섹션) ===== */
.thanks-section{
  padding: 10vh 7vw 12vh;
  background: #fff;
  text-align: center;
  color: #333;
}
.thanks-heading{
  font-size: 5vw;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.thanks-lead{
  font-size: 4.1vw;
  color: #555;
  margin-bottom: .8rem;
}
.thanks-tags{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin: .6rem 0 1.2rem;
  padding: 0;
  list-style: none;
}
.thanks-tags li{
  background: #f6f7f9;
  border: 1px solid #e8eaee;
  border-radius: 999px;
  padding: .35rem .75rem;
  font-size: 3.8vw;
  color: #3a4757;
}
.thanks-note{
  font-size: 3.6vw;
  color: #888;
}

@media (min-width: 768px){
  .thanks-heading{ font-size: 2rem; }
  .thanks-lead{    font-size: 1rem; }
  .thanks-tags li{ font-size: .9rem; }
  .thanks-note{    font-size: .9rem; }
}