/* =============================================
   ✏️ 테마 색상 변수
   ============================================= */
:root {
  --color-black:   #232323;
  --color-beige:   #e9e2d8;
  --color-beige2:  #f5f2f2;
  --color-beige3:  #e8e3dd;
  --color-beige4:  #e5ded2;
  --color-text:    #181818;
  --color-pink:    #e27d9a;
  --color-yellow:  #ffea06;
  --font-main:     'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

/* =============================================
   기본 리셋
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background-color: var(--color-black);
  color: #fff;
  overflow-x: hidden;
  font-family: var(--font-main);
  font-size: 15px;
  line-height: 1.6;
}
.section { position: relative; width: 100%; overflow: hidden; }
img { max-width: 100%; display: block; }
p { margin: 0; }
button { font-family: var(--font-main); }

/* =============================================
   섹션1: 메인
   ============================================= */
#sec-header { background: var(--color-black); font-size: 0; line-height: 0; }
#sec-header img { width: 100%; display: block; }

/* =============================================
   섹션2: 부모님 말씀
   ============================================= */
#sec-couple { background: var(--color-beige2); font-size: 0; line-height: 0; }
#sec-couple img { width: 100%; display: block; }

/* =============================================
   섹션3: 러브레터
   ============================================= */
#sec-greeting { background: var(--color-beige3); font-size: 0; line-height: 0; }
#sec-greeting img { width: 100%; display: block; }

/* =============================================
   섹션4: 갤러리 
   ============================================= */
#sec-gallery { background: var(--color-beige4); }
.gallery-more-wrap { background: var(--color-beige4); text-align: center; padding: 16px 0 70px; }
.gallery-more-btn {
  background: var(--color-text); color: #fff;
  border: none; border-radius: 5px;
  font-family: var(--font-main); font-size: 14px;
  padding: 10px 46px; cursor: pointer;
}

/* =============================================
   섹션5: 캘린더
   ============================================= */
#sec-calendar { font-size: 0; line-height: 0; }
#sec-calendar img { width: 100%; display: block; }

/* =============================================
   섹션6: 오시는 길 
   ============================================= */
#sec-map { background: var(--color-black); color: #fff; padding-bottom: 50px; }
#sec-map .map-title-wrap { padding: 41px 0 30px 25px; }
#sec-map .map-title-wrap p { font-size: 20px; font-weight: 500; color: #fff; }
#sec-map .map-title-wrap .addr-main { font-size: 16px; color: #fff; margin-top: 6px; line-height: 1.6; }

#map-copy-btn {
  background: var(--color-pink); color: var(--color-black);
  border: none; border-radius: 4px;
  font-family: var(--font-main); font-size: 15px;
  padding: 10px 15px; cursor: pointer; margin-top: 15px;
}

.transport-wrap { padding: 30px 25px 0; }
.transport-wrap p { font-size: 15px; color: rgba(251, 250, 246, 0.9); line-height: 1.8; }
.transport-wrap .transport-title { font-size: 16px; font-weight: bold; color: #fbfaf6; margin-bottom: 2px; }

/* =============================================
   섹션6: 마음전하실곳
   ============================================= */
#sec-account { background: var(--color-black); padding: 0px 16px 30px; }
#sec-account .acct-section-title { font-size: 20px; font-weight: 500; color: #fff; margin-bottom: 28px; }

.acct-grid { display: flex; gap: 16px; margin-bottom: 16px; }
.acct-card { flex: 1; position: relative; cursor: pointer; }
.acct-card svg { display: block; width: 100%; height: auto; }
.acct-card-info {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none; line-height: 1.2;
}
/* 봉투형 — SVG viewBox(448.4×364.1)에서 삼각형 꼭짓점 y=144.5 → 39.7%
   텍스트가 사각형 몸통 안에만 오도록 padding-top을 42%로 설정 */
.acct-card.type-envelope .acct-card-info { padding: 25% 8% 4%; }
/* 사각형 변형 SVG들 */
.acct-card.type-rect .acct-card-info  { padding: 16% 6% 8%; }
.acct-card.type-rect2 .acct-card-info { padding: 25% 8% 12%; }

.acct-card-info .acct-bank {
  font-family: var(--font-main); font-size: 13px;
  color: #1a1a1a; margin: 0; text-align: center; line-height: 1.6;
}
.acct-card-info .acct-name {
  font-family: var(--font-main); font-size: 13px;
  color: #1a1a1a; margin: 0; text-align: center;
}
.acct-card-info .acct-copy-label {
  margin-top: 6px; font-family: var(--font-main);
  font-size: 13px; color: #1a1a1a; text-decoration: underline;
}

/* 계좌 복사 토스트 */
/* =============================================
   섹션7: 공유하기
   ============================================= */
#sec-share { background: #fff; padding: 30px 10px 20px; }
.share-btn-wrap { max-width: 200px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.share-btn-wrap button {
  border: none; padding: 12px 10px;
  font-family: var(--font-main); font-size: 14px; font-weight: 500;
  letter-spacing: 0.05em; cursor: pointer; border-radius: 6px;
}
.btn-copy-link { background: #232323; color: #fff; }
.btn-kakao     { background: var(--color-yellow); color: #000; }

/* 공유 토스트 */
/* =============================================
   저작권
   ============================================= */
#sec-footer {
  background: #fff;
  text-align: center; padding: 0 0 30px;
}
#sec-footer p {
  font-size: 11px; font-weight: bold;
  color: rgba(0,0,0,0.3);
}