/* =========================================================
   page.css
   index.html 안에 있던 <style> 코드를 분리한 파일입니다.

   수정 위치 빠른 안내
   1) THEME / ROOT VARIABLES : 전체 색상, 배경, 폰트
   2) AOS ANIMATION          : 스크롤 등장 위치
   3) COUPLE / POEM          : 신랑·신부 소개와 축시
   4) ONE-WEEK CALENDAR      : 한 주 달력
   5) INVITATION MESSAGE     : 초대 문구
   ========================================================= */

/* =========================================================
   1. THEME / ROOT VARIABLES
   청첩장 전체의 공통 색상, 폰트, 배경 이미지, 실링왁스 색상을 수정합니다.

   자주 수정하는 값
   --point-color1 / --point-color2 : 포인트 색상
   --font-family                   : 기본 글꼴
   --font-size                     : 기본 글자 크기
   --main-section-background       : 첫 초대장 배경
   --wax-stamp                     : 실링왁스 이미지
   --wax-stamp-color               : 실링왁스 기준 색상
   ========================================================= */
:root {
            --common-font-color: #383737;
            --btn-font-color: #ffffff;
            /* --point-color1: #43573a; */
            --point-color1: #612b32;
            --point-color2: #516349;
            --font-family: GowunDodum-Regular, serif;
            --font-size: 15px;
            --background : url(https://salondeletter.com/img/bg/bg_img_white.jpg);
            --main-section-background : url(https://salondeletter.com/img/bg/bg_img_ivory.jpg);
            --main-section-background-color : #f5f3ed;
            --animation-bg: ;
            --wax-paper: url(https://salondeletter.com/img/_f/wax/paper_white.jpg);

            --wax-stamp: url('../assets/burgundyButton.png');
            --wax-stamp-color: #832b33;

            --svg-stroke-color: ;
            --main-svg-color: ;
            --main-svg-length: 2960;
            --main-svg-polaroid-length: 4111.115234375;

            --loading-bg-color: #ffffff;
            --loading-ft-color: #516349;
            --svg-length: 3219;
            --ending-dimmed-color: #00000000;
            --snap-bg: #f8f4f1;
            --loading-draw-speed: 3000;
            --main-draw-speed: 3700;
            --groom-color: #5f8b9b;
            --bride-color: #BB7273;
        }


/* =========================================================
   2. AOS SCROLL ANIMATION
   스크롤할 때 콘텐츠가 아래에서 위로 나타나는 시작 위치입니다.
   50px 값을 크게 하면 더 아래에서 시작합니다.
   ========================================================= */
[data-aos=fade-up] {
            transform: translate3d(0,50px,0);
        }


/* =========================================================
   3. COUPLE INTRO / POEM / ENDING
   신랑·신부 사진 아래 가족 소개, 축시 제목/본문, 마지막 문구 간격을 수정합니다.

   .family-intro                    : 부모님/신랑·신부 소개 영역
   .poem-title                      : '축시' 제목
   .poem-placeholder                : 축시 본문
   .section11 [var="endingText"]   : 마지막 글귀
   ========================================================= */
/* Custom wedding content */
.section3 .family-intro{margin-top:28px;line-height:1.8;}
.section3 .family-intro .relation_list{font-size:14px;}
.section2 .poem-title{margin-bottom:20px;font-size:20px;font-weight:400;color:var(--point-color1);}
.section2 .poem-placeholder{line-height:2;}
.section11 [var="endingText"] p + p{margin-top:10px;}


/* =========================================================
   4. ONE-WEEK WEDDING CALENDAR
   한 주만 보이는 달력의 크기와 간격을 수정합니다.

   .week-calendar-month             : '12월' 같은 월 표시
   .week-calendar-days              : 월~일 7칸 배치
   .week-calendar-day .date         : 날짜 숫자 원 크기
   .week-calendar-day.active .date  : 예식일 표시 테두리
   ========================================================= */
/* One-week wedding calendar */
.week-calendar-wrap{padding:18px 0 22px!important}
.week-calendar{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:12px;width:100%}
.week-calendar-month{font-family:"Old Standard TT",serif;font-size:20px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.week-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.week-calendar-day{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.week-calendar-day .weekday{font-size:14px;line-height:1}
.week-calendar-day .date{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-family:"Old Standard TT",serif;font-size:18px;line-height:1;border-radius:50%;box-sizing:border-box}
.week-calendar-day.active .date{border:1px dashed #777}
@media(max-width:420px){
  .week-calendar{grid-template-columns:48px 1fr;gap:8px}
  .week-calendar-month{font-size:18px}
  .week-calendar-day{gap:8px}
  .week-calendar-day .weekday{font-size:12px}
  .week-calendar-day .date{width:30px;height:30px;font-size:16px}
}


/* =========================================================
   5. INVITATION MESSAGE
   '저희의 사랑을 곁에서...' 초대 문구의 정렬과 줄 간격을 수정합니다.
   ========================================================= */
/* Invitation message */
.section12 [var="greetingContent"]{
  text-align:center;
  line-height:2;
}
.section12 .invitation-message-line + .invitation-message-line{
  margin-top:4px;
}

/* =========================================================
   6. MAIN COUPLE KOREAN NAME
   메인 초대장의 신랑·신부 한글 전체 이름을 표시합니다.

   [var="groomName"] : 신랑 전체 이름 (예: 박종현)
   [var="brideName"] : 신부 전체 이름 (예: 최한솔)
   ========================================================= */
.section1 .main_name.kor .row_groom_name,
.section1 .main_name.kor .row_bride_name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.section1 .main_name.kor [var="groomName"],
.section1 .main_name.kor [var="brideName"] {
  display: inline-block;
  white-space: nowrap;
  letter-spacing: 0.08em;
}