/* =============================================
     CSS 변수 — 모청2 컬러 그대로
     ============================================= */
  :root {
    --color-black:  #181818;
    --color-white:  #ffffff;
    --color-text:   #212121;
    --color-yellow: #ffea00;

    /* 모청2 섹션 배경색 */
    --color-pink:    #f7ccd9;  /* 섹션2·5 (연핑크) */
    --color-pink2:   #f4f4f4;  /* 섹션7 계좌 (연회색) */
    --color-cream:   #fbfbfb;  /* 섹션6·8 (크림) */
    --color-gallery: #e1c1c7;  /* 섹션3 갤러리 (핑크미드) */

    --font-main: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 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-pink2);
    color: var(--color-white);
    font-family: var(--font-main);
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
  }

  @media (min-width: 401px) { html, body { background-color: #000; } }

  ol, ul, li { list-style: none; padding-left: 0; }
  span { display: inline-block; }
  p { margin: 0 5px 0; }

  /* =============================================
     섹션 공통
     ============================================= */
  section { position: relative; width: 100%; overflow: hidden; }
  section img { display: block; width: 100%; height: auto; vertical-align: bottom; }

  /* =============================================
     섹션1: 헤더 (검정)
     ============================================= */
  #sec1 { background: var(--color-black); }

  #sec1 .date-text {
    text-align: center; color: var(--color-white);
    font-size: 15px; line-height: 1.8; padding: 0 15px; margin-top: 8px;
  }

  /* =============================================
     섹션2: 신랑신부 (연핑크)
     ============================================= */
  #sec2 { background: var(--color-pink); }

  #sec2 .couple-text {
    text-align: center; font-size: 15px; line-height: 1.15;
    color: var(--color-text); padding: 0 15px;
  }
  #sec2 .couple-text strong { font-weight: 700; }

  /* =============================================
     섹션3: 인사말 (흰색)
     ============================================= */
  #sec3 { background: var(--color-white); font-size: 0; line-height: 0; }

  /* =============================================
     섹션4: 갤러리
     ============================================= */
  #sec4 { background: var(--color-gallery); }
  .gallery-more-wrap {
    background: var(--color-pink2);
    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: 청첩 이미지 (핑크)
     ============================================= */
  #sec5 { background: var(--color-pink); }

  /* =============================================
     섹션6: 오시는 길 (크림)
     ============================================= */
  #sec6 { background: var(--color-cream); color: var(--color-text); padding-bottom: 36px; }

  /* addr-row: 주소가 두 줄이어도 버튼은 항상 오른쪽 상단 고정 */
  #sec6 .addr-row {
    padding: 0 20px;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  #sec6 .addr-row span { flex: 1; min-width: 0; }
  #sec6 .addr-row p { margin: 0; font-size: 15px; line-height: 1.6; word-break: keep-all; }
  #sec6 .addr-row p + p { margin-top: 2px; }
  #sec6 .addr-row p#map2 { font-size: 15px; }

  #map_btn {
    background: #f7ccd9; border: none; border-radius: 25px;
    font-size: 13px; padding: 8px 20px; cursor: pointer;
    white-space: nowrap; flex-shrink: 0;
    align-self: center;
    color: #181818;
    font-family: var(--font-main);
  }

  .divider { margin: 12px 20px; border: none; border-top: 1px solid rgba(0,0,0,.08); }

  #sec6 .transport {
    padding: 0 20px; margin: 0 0 20px;
    font-size: 15px; color: var(--color-text); line-height: 1.8;
  }

  /* =============================================
     섹션7: 계좌번호 (연핑크2)
     ============================================= */
  #sec7 { background: var(--color-pink2); color: var(--color-text); padding: 60px 0 20px; }

  #sec7 .acct-title { display: block; margin: 0 auto 11px; max-width: 90%; }

  #sec7 ul { list-style: none; padding: 0 20px; margin: 0 0 20px; }

  #sec7 ul h6 {
    font-weight: bold;
    border-bottom: 1px solid var(--color-text);
    padding-bottom: 4px; margin-bottom: 8px;
    font-size: 16px; line-height: 2;
  }
  #sec7 ul li {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 6px 0; font-size: 15px;
  }
  #sec7 ul li span { display: flex; flex-direction: column; gap: 4px; }
  #sec7 ul li p { margin: 0; line-height: 1.5; }
  #sec7 ul li button {
    background: var(--color-text); color: #fff;
    border: none; border-radius: 25px;
    font-size: 13px; padding: 8px 20px;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    font-family: var(--font-main);
  }

  /* =============================================
     섹션8: 공유하기 (크림)
     ============================================= */
  #sec-share { background: #fff; color: var(--color-text); padding: 30px 32px; text-align: center; }
.kakao-btn { display: inline-block; background: var(--color-yellow); color: var(--color-text); border: none; border-radius: 5px; font-size: 14px; padding: 12px 30px; cursor: pointer; margin: 0; }
#url_copy { display: inline-block; background: var(--color-text); color: #fff; border: none; border-radius: 5px; font-size: 14px; padding: 12px 22px; cursor: pointer; margin: 0; }
.copyright { margin-top: 30px; font-size: 11px; color: #888; }