/* 기본 레이아웃 (디자인은 나중에 다듬습니다) */
* { margin: 0; padding: 0; box-sizing: border-box;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none; }
html, body { width: 100%; overflow-x: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", sans-serif;
  background: #f4f1ec; color: #2b2b2b; line-height: 1.7;
}
img { pointer-events: none; -webkit-user-drag: none; user-drag: none; }

/* 모바일 폭으로 고정된 가운데 컬럼 */
.wrap { max-width: 440px; margin: 0 auto; background: #fff; min-height: 100vh; }

section { padding: 56px 28px; border-bottom: 1px solid #eee; }
.label { font-size: 13px; letter-spacing: .25em; color: #b3a99a; text-align: center; margin-bottom: 14px; }
.ph-note { font-size: 12px; color: #c0392b; text-align: center; margin-top: 8px; }

/* 1. 첫 화면 */
.hero { position: relative; height: 100vh; min-height: 560px; padding: 0;
        display: flex; flex-direction: column; justify-content: flex-end;
        align-items: center; color: #fff; text-align: center; overflow: hidden; }
.hero video, .hero .hero-fallback, .hero .hero-fallback-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; }
.hero .hero-fallback { background: #9a8f7d; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 14px; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.45)); }
.hero-inner { position: relative; z-index: 2; padding-bottom: 64px; }
.hero .names { font-size: 30px; letter-spacing: .1em; margin-bottom: 14px; }
.hero .date { font-size: 15px; opacity: .95; }
.hero .place { font-size: 14px; opacity: .9; margin-top: 4px; }

/* 2. 인사말 */
.greeting { text-align: center; }
.greeting .msg { white-space: pre-line; font-size: 16px; color: #4a4a4a; }
.countdown { display: flex; justify-content: center; gap: 14px; margin-top: 30px; }
.countdown .box { background: #f4f1ec; border-radius: 10px; padding: 12px 10px; min-width: 60px; }
.countdown .num { font-size: 22px; font-weight: 600; }
.countdown .unit { font-size: 11px; color: #9a8f7d; margin-top: 2px; }
.countdown .dday { margin-top: 16px; font-size: 14px; color: #9a8f7d; }

/* 3. 갤러리 */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gallery-grid .cell { position: relative; padding-top: 100%; background: #e6e0d7;
  border-radius: 6px; overflow: hidden; }
.gallery-grid .cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery-grid .cell .ph { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #b3a99a; font-size: 12px; }

/* 전체화면 뷰어 */
.viewer { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 100;
  display: none; align-items: center; justify-content: center; }
.viewer.open { display: flex; }
.viewer img { max-width: 92%; max-height: 86%; object-fit: contain; }
.viewer .close { position: absolute; top: 18px; right: 22px; color: #fff; font-size: 30px; }

/* 4. 오시는 길 */
.map-box { width: 100%; height: 220px; background: #e6e0d7; border-radius: 10px;
  overflow: hidden; display: flex; align-items: center; justify-content: center; color: #b3a99a; font-size: 13px; }
.map-box iframe { width: 100%; height: 100%; border: 0; }
.addr { text-align: center; margin: 16px 0 20px; }
.addr .name { font-size: 17px; font-weight: 600; }
.addr .line { font-size: 14px; color: #6b6b6b; margin-top: 4px; }
.map-btns { display: flex; gap: 8px; }
.map-btns a { flex: 1; text-align: center; padding: 13px 0; border-radius: 8px;
  font-size: 14px; text-decoration: none; color: #fff; }
.btn-tmap { background: #1f7fff; }
.btn-kakao { background: #f7c600; color: #3a2e00; }
.btn-naver { background: #03c75a; }

/* 5. 계좌 (드롭다운) */
.acc-group { margin-bottom: 12px; border: 1px solid #eee; border-radius: 10px; overflow: hidden; }
.acc-head { width: 100%; background: #faf8f4; border: 0; padding: 16px 18px;
  font-size: 15px; text-align: left; display: flex; justify-content: space-between;
  align-items: center; cursor: pointer; }
.acc-head .arrow { transition: transform .2s; color: #b3a99a; }
.acc-group.open .acc-head .arrow { transform: rotate(180deg); }
.acc-body { display: none; padding: 4px 18px 16px; }
.acc-group.open .acc-body { display: block; }
.acc-row { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-top: 1px solid #f0ece5; }
.acc-row .who { font-size: 14px; }
.acc-row .who b { font-weight: 600; }
.acc-row .who span { display: block; color: #8c8c8c; font-size: 13px; margin-top: 2px; }
.acc-row .copy { background: #efe9df; border: 0; border-radius: 6px; padding: 7px 12px;
  font-size: 12px; cursor: pointer; }

/* 6. 이스터에그 */
.egg { text-align: center; border-bottom: none; padding-bottom: 80px; }
.egg-btn { background: none; border: none; font-size: 34px; cursor: pointer; opacity: .5; }
.egg-pop { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 120;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; }
.egg-pop.open { display: flex; }
.egg-pop img, .egg-pop video { max-width: 92%; max-height: 74%; border-radius: 12px; }
.egg-pop .cap { color: #fff; font-size: 16px; text-align: center; }
.egg-pop .ph { color:#fff; background:#555; padding:60px 30px; border-radius:12px; font-size:14px; }
.egg-pop .close { position: absolute; top: 18px; right: 22px; color: #fff; font-size: 30px; }

.foot { text-align: center; font-size: 12px; color: #c3bbb0; padding: 24px; }