:root {
  --font-size-10: 10px;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-19: 19px;
  --font-size-20: 20px;
  --font-size-21: 21px;
  --font-size-22: 22px;
  --font-size-23: 23px;
  --font-size-24: 24px;
  --font-size-25: 25px;
  --font-size-26: 26px;
  --font-size-27: 27px;
  --font-size-28: 28px;
  --font-size-29: 29px;
  --font-size-30: 30px;
  --font-size-40: 40px;
  --card-bg: #fbfbfb;
  --card-theme-font-color: #4e4e4e;
  --card-theme-content-font-color: #666;
  --card-theme-button-color: #fcaf15;
  
}

@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@import url('//fonts.googleapis.com/earlyaccess/nanummyeongjo.css');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url('//fonts.googleapis.com/earlyaccess/nanumpenscript.css');
@font-face {
    font-family: 'Cafe24Dongdong';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Dongdong.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GowunBatang-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* iframe 내부 페이지 (예: child.html) */
html.preview, body.preview {
  overflow: auto; /* 스크롤 동작 유지 */
  scrollbar-width: none; /* Firefox용 */
}

/* Chrome, Edge, Safari용 */
html.preview::-webkit-scrollbar,
body.preview::-webkit-scrollbar {
  display: none;
}

body {
	background: #efefef;
  font-family: 'NotoSansKR', 'roboto', 'sans-serif';
  line-height: 1.3;
  -webkit-text-size-adjust: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  padding: 0!important;

}


body.theme-gray{
  background: #F5EFE6;
  --card-bg: #fafafa;
  --card-theme-font-color: #4e4e4e;
  --card-theme-subtitle-color: #ccc;
  --card-theme-title-color: #000;
  --card-theme-content-color: #666;
  --card-theme-content-font-color: #666;
  --card-theme-button-color: #000;
  --card-theme-border-color: #eaeaea;
  --card-theme-highlight-color: #000;
}
body.theme-honey{
  background: #F5EFE6;
  --card-bg: #fff;
  --card-theme-font-color: #4e4e4e;
  --card-theme-subtitle-color: #b5b5b6;
  --card-theme-title-color: #ffac48;
  --card-theme-content-color: #595757;
  --card-theme-content-font-color: #595757;
  --card-theme-button-color: #ffbe6f;
  --card-theme-border-color: #ffbe6f;
  --card-theme-highlight-color: #ffac48;
}

body.theme-peach{
  background: #F5EFE6;
  --card-bg: #fcfcfb;
  --card-theme-font-color: #4e4e4e;
  --card-theme-subtitle-color: #b5b5b6;
  --card-theme-title-color: #ff7f84;
  --card-theme-content-color: #595757;
  --card-theme-content-font-color: #595757;
  --card-theme-button-color: #ff9a9e;
  --card-theme-border-color: #ff9a9e;
  --card-theme-highlight-color: #ff7f84;
}

body.theme-blue{
  background: #F5EFE6;
  --card-bg: #fcfcfb;
  --card-theme-font-color: #595757;
  --card-theme-subtitle-color: #b5b5b6;
  --card-theme-title-color: #5aa5eb;
  --card-theme-content-color: #595757;
  --card-theme-content-font-color: #595757;
  --card-theme-button-color: #72bbff;
  --card-theme-border-color: #72bbff;
  --card-theme-highlight-color: #5b98cb;
}

img{
  max-width: 100%;
}

body.fs-small{
  font-size: 12px;
  --font-size-10: 8px;
  --font-size-11: 9px;
  --font-size-12: 10px;
  --font-size-13: 11px;
  --font-size-14: 12px;
  --font-size-15: 13px;
  --font-size-16: 14px;
  --font-size-17: 15px;
  --font-size-18: 16px;
  --font-size-19: 17px;
  --font-size-20: 18px;
  --font-size-21: 19px;
  --font-size-22: 20px;
  --font-size-23: 21px;
  --font-size-24: 22px;
  --font-size-25: 23px;
  --font-size-26: 24px;
  --font-size-27: 25px;
  --font-size-28: 26px;
  --font-size-29: 27px;
  --font-size-30: 28px;
  --font-size-40: 38px;
}

body.fs-medium{
  font-size: 14px;
  --font-size-10: 10px;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-19: 19px;
  --font-size-20: 20px;
  --font-size-21: 21px;
  --font-size-22: 22px;
  --font-size-23: 23px;
  --font-size-24: 24px;
  --font-size-25: 25px;
  --font-size-26: 26px;
  --font-size-27: 27px;
  --font-size-28: 28px;
  --font-size-29: 29px;
  --font-size-30: 30px;
  --font-size-40: 40px;
}

body.fs-large{
  font-size: 18px;
  --font-size-10: 14px;
  --font-size-11: 15px;
  --font-size-12: 16px;
  --font-size-13: 17px;
  --font-size-14: 18px;
  --font-size-15: 19px;
  --font-size-16: 20px;
  --font-size-17: 21px;
  --font-size-18: 22px;
  --font-size-19: 23px;
  --font-size-20: 24px;
  --font-size-21: 25px;
  --font-size-22: 26px;
  --font-size-23: 27px;
  --font-size-24: 28px;
  --font-size-25: 29px;
  --font-size-26: 30px;
  --font-size-27: 31px;
  --font-size-28: 32px;
  --font-size-29: 33px;
  --font-size-30: 34px;
  --font-size-40: 44px;
}

body.font-nmg{
  font-family: 'Nanum Gothic', sans-serif;
}

body.font-nsq{
  font-family: 'NanumSquare', sans-serif !important
}

body.font-nmmy{
  font-family: 'Nanum Myeongjo', serif;
}

body.font-cafe24{
  font-family: 'Cafe24Dongdong';
}

body.font-gwb{
  font-family: 'GowunBatang-Regular', cursive;
}

/* #13 상단 글꼴 분리 */
.card-header.header-font-nmg{ font-family: 'Nanum Gothic', sans-serif; }
.card-header.header-font-nsq{ font-family: 'NanumSquare', sans-serif !important; }
.card-header.header-font-nmmy{ font-family: 'Nanum Myeongjo', serif; }
.card-header.header-font-cafe24{ font-family: 'Cafe24Dongdong'; }
.card-header.header-font-gwb{ font-family: 'GowunBatang-Regular', cursive; }

/* watermark:s */
.card-watermark{
  background: rgba(0, 0, 0, 0.9);
  padding: 20px;
  font-family: 'NotoSansKR';
  letter-spacing: -1px;
}

.watermark-header{
  
  font-size: var(--font-size-14);
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  line-height: 22px;
}

.watermark-header a{
  color: #fcaf15;
  font-weight: 700;
  text-decoration: underline;
}
.watermark-body{
  margin-top: 20px;
}
.watermark-body p{
  color: rgba(255,255,255,0.5);
  font-size: var(--font-size-12);
  line-height: 23px;
  margin: 0;
  padding: 0 0 0 10px;
}

.watermark-body p:before{
  position: absolute;
  content: '·';
  color: rgba(255,255,255,0.5);
  margin-left: -10px;
}
/* watermark:e */

.card-wrapper{
  position: relative;
  width: 100%;
}

.card-container{
  position: relative;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  background: url('../images/bg-texture-3.jpg') ;
}

.card-container .card-bg{
  background: var(--card-bg);
  opacity: 0.9;
  position: relative;
}

#CARD{
  position: relative;
}

.card-section{
  padding: 20px 0 20px;
  margin-bottom: 120px;
  margin-left: 25px;
  margin-right: 25px;
}

.card-section.hidden{
  display: none;
}

.card-section:last-child{
  margin-bottom: 0;
}

.card-inner{
  padding-top: 45px;
}

/* 상단:s */
.card-header{
  /*background: var(--card-bg);*/
  position: relative;
  margin-left: 0;
  margin-right: 0;
  display: none;
}

.card-header.active{
  display: block;
}

.card-header .card-title{
  padding-top: 50px;
}

.section-visible{
  display: none !important;
}

.section-flex-visible{
  display: none !important;
}

.section-visible.active{
  display: block !important;
}

.section-flex-visible.active{
  display: flex !important;
}


/* 베이직:s */
.card-header.header-basic .card-date .HEADER-TOP-DATE{
  text-align: center;
  padding-top: 50px;
}
.card-header.header-basic .card-date .HEADER-TOP-DATE span{
  display: inline-block;
  font-size: 25px;
  padding-right: 20px;
  color: #4e4e4e;
}

.card-header.header-basic .card-date .HEADER-TOP-DATE span:after{
  content: '';
  width: 1px;
  height: 15px;
  background: #eaeaea;
  position: absolute;
  margin-left: 10px;
  margin-top: 10px;
}
.card-header.header-basic .card-date .HEADER-TOP-DATE span:last-child{
  padding-right: 0;
}
.card-header.header-basic .card-date .HEADER-TOP-DATE span:last-child:after{
  width: 0;
}

.card-header.header-basic .card-date .HEADER-EVNET-MONTH-EN{
  text-align: center;
  font-size: var(--font-size-14);
  color: #4e4e4e;
  font-weight: 300;
  letter-spacing: 5px;
  margin-top: 10px;
}

.card-header.header-basic .card-image{
  margin-top: 30px;
  position: relative;
}

.card-header.header-basic .header-talents{
  text-align: center;
  padding-top: 30px;
  padding-bottom: 40px;
  font-size: var(--font-size-18);
  font-weight: 500;
  color: #4e4e4e;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: center;
}

.card-header.header-basic .header-talents span{
  padding-right: 40px;
}

.baby .card-header.header-basic .header-talents{
  padding-bottom: 0;
}
.baby .card-header.header-basic .header-talents span{
  font-size: var(--font-size-20);
  line-height: var(--font-size-30);
  color: var(--card-theme-highlight-color);
  font-weight: 700;
}

.baby .card-header.header-basic .card-image{
  margin-bottom: 30px;
}

.card-header.header-basic .header-talents span:last-child{
  padding-right: 0;
}

.card-header.header-basic .header-talents .GROOM-NAME:after{
  position: absolute;
  content: '';
  width: 1px;
  height: 17px;
  background: #eaeaea;
  margin-left: 20px;
  margin-top: 4px;
}

.card-header.header-basic .event-place div{
  text-align: center;
  font-size: var(--font-size-14);
  font-weight: 300;
  line-height: var(--font-size-25);
  color: #444;
  letter-spacing: 0.3px;
}
/* 베이직:e */

/* 풀스크린:s */
.baby .card-header.header-fullscreen .header-talents{
  text-align: center;
  font-size: var(--font-size-18);
  font-weight: 500;
}

.card-header.header-fullscreen{
  height: 600px;
  padding-top: 0;
  position: relative;
  padding-bottom: 0;
}

.card-header.header-fullscreen .card-header-inner{
  height: 100%;
}
.card-header.header-fullscreen .header-background{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.card-header.header-fullscreen .header-talents{
  display: flex;
  margin-bottom: 50px;
  align-items: center;
}

.card-header.header-fullscreen .header-talents span{
  color: #fff;
  font-size: var(--font-size-20);
}

.card-header.header-fullscreen .header-talents span.GROOM-NAME{
  margin-right: 40px;
}

.card-header.header-fullscreen .header-talents span.BRIDE-NAME{
  margin-left: 40px;
}

.card-header.header-fullscreen .header-date{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-header.header-fullscreen .header-date > div{
  color: #fff;
  font-size: var(--font-size-25);
  text-align: center;
}

.card-header.header-fullscreen .header-date > div:first-child{
  border-bottom: 1px solid #fff;
}

.card-header.header-fullscreen .event-place{
  margin-bottom: 60px;
  font-size: var(--font-size-16);
  text-align: center;
  color: rgba(255,255,255,0.9);
  line-height: var(--font-size-25);
}
/* 풀스크린:e */

/* type1 — SVG 데코(wedding_type_01.svg) + 하단 텍스트 :s
   기준: 360×800 viewBox, 단위 cqw (= 1% of 카드 너비)
   - 100px in 360 base = 100/360*100cqw = 27.78cqw
   - 24px font-size in 360 base = 24/360*100cqw = 6.67cqw */
.card-header.header-type1{
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 800;
  padding: 0;
  overflow: hidden;
  background: #fff;
  container-type: inline-size;
}
.card-header.header-type1 .card-header-inner{
  position: relative;
  width: 100%;
  height: 100%;
}
/* 사용자 사진 (배경) */
.card-header.header-type1 .header-photo{
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card-header.header-type1 .header-photo .MAIN-IMAGE{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--main-image-position, center);
  display: block;
}
/* SVG 데코 (전체 영역에 비율 유지하며 오버레이) */
.card-header.header-type1 .header-svg-bg{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url('../images/header/wedding_type_01.svg') no-repeat center / 100% 100%;
  pointer-events: none;
}
/* 날짜: 2026.12.18 — top 671px, Pretendard 24px bold, 중앙정렬, #fff */
.card-header.header-type1 .type1-date{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(671 / 360 * 100cqw);
  z-index: 3;
  text-align: center;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  font-size: calc(24 / 360 * 100cqw);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
/* 장소+시간: 신도림 라마다 호텔 세인트그레이스 11:00 AM — top 710px, Pretendard 16px regular */
.card-header.header-type1 .type1-place{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(710 / 360 * 100cqw);
  z-index: 3;
  text-align: center;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  font-size: calc(16 / 360 * 100cqw);
  font-weight: 400;
  color: #fff;
  padding: 0 calc(20 / 360 * 100cqw);
}
/* type1:e */

/* type2 — 프레임 없음 + Abril Fatface 날짜 :s */
.card-header.header-type2{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:#000; container-type:inline-size;
}
.card-header.header-type2 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-type2 .header-photo{ position:absolute; inset:0; z-index:1; }
.card-header.header-type2 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-type2 .type2-top{
  position:absolute; left:0; right:0; top:calc(62 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Pretendard","Noto Sans KR",sans-serif;
  font-size:calc(16 / 360 * 100cqw); color:#fff;
}
.card-header.header-type2 .type2-names{
  position:absolute; left:0; right:0; top:calc(87 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(24 / 360 * 100cqw); color:#fff;
}
.card-header.header-type2 .type2-line{
  position:absolute; left:50%; transform:translateX(-50%); z-index:3;
  width:1px; height:calc(69 / 360 * 100cqw); background:#fff;
}
.card-header.header-type2 .type2-line-top{ top:calc(188 / 360 * 100cqw); }
.card-header.header-type2 .type2-line-bottom{ top:calc(499 / 360 * 100cqw); }
.card-header.header-type2 .type2-date{
  position:absolute; left:0; right:0; top:calc(282 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Abril Fatface",serif;
  font-size:calc(64 / 360 * 100cqw); color:#fff; line-height:1.05;
}
.card-header.header-type2 .type2-place{
  position:absolute; left:0; right:0; top:calc(621 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(16 / 360 * 100cqw); color:#fff; padding:0 calc(20 / 360 * 100cqw);
}
/* type2:e */

/* type3 — wedding_type_03.svg + 이름/날짜/장소 (하단) :s */
.card-header.header-type3{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:#000; container-type:inline-size;
}
.card-header.header-type3 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-type3 .header-photo{ position:absolute; inset:0; z-index:1; }
.card-header.header-type3 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-type3 .header-svg-bg{
  position:absolute; inset:0; z-index:2;
  background:url('../images/header/wedding_type_03.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-type3 .type3-names{
  position:absolute; left:0; right:0; bottom:calc(124 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Pretendard","Noto Sans KR",sans-serif;
  font-size:calc(24 / 360 * 100cqw); font-weight:700; color:#fff;
}
.card-header.header-type3 .type3-date{
  position:absolute; left:0; right:0; bottom:calc(90 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Pretendard","Noto Sans KR",sans-serif;
  font-size:calc(16 / 360 * 100cqw); color:#fff;
}
.card-header.header-type3 .type3-place{
  position:absolute; left:0; right:0; bottom:calc(60 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Pretendard","Noto Sans KR",sans-serif;
  font-size:calc(16 / 360 * 100cqw); color:#fff;
  padding:0 calc(40 / 360 * 100cqw); line-height:1.3;
}
/* type3:e */

/* type4 — wedding_type_04.svg + Akaya Telivigala + rotate -20deg :s */
.card-header.header-type4{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:#fff; container-type:inline-size;
}
.card-header.header-type4 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-type4 .header-photo.type4-photo{
  position:absolute; top:calc(120 / 360 * 100cqw); left:50%; transform:translateX(-50%);
  width:calc(326 / 360 * 100cqw); height:calc(385 / 360 * 100cqw); z-index:1; overflow:hidden;
}
.card-header.header-type4 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-type4 .header-svg-bg{
  position:absolute; inset:0; z-index:2;
  background:url('../images/header/wedding_type_04.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-type4 .type4-date{
  position:absolute;  right:calc(9 / 360 * 100cqw); bottom:calc(200 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Akaya Telivigala",cursive;
  font-size:calc(35 / 360 * 100cqw); color:#C51A1C; transform:rotate(-20deg);
}
.card-header.header-type4 .type4-place{
  position:absolute; right:calc(10 / 360 * 100cqw); bottom:calc(163 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Akaya Telivigala",cursive;
  font-size:calc(16 / 360 * 100cqw); color:#C51A1C; transform:rotate(-20deg);
  padding:0 calc(30 / 360 * 100cqw);
}
/* type4:e */

/* type5 — wedding_type_05.svg + heart icon, Noto Serif KR :s */
.card-header.header-type5{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:#fff; container-type:inline-size;
}
.card-header.header-type5 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-type5 .header-photo.type5-photo{
  position:absolute; top:calc(182 / 360 * 100cqw); left:50%; transform:translateX(-50%);
  width:calc(258 / 360 * 100cqw); height:calc(383 / 360 * 100cqw); z-index:1; overflow:hidden;
}
.card-header.header-type5 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-type5 .header-svg-bg{
  position:absolute; inset:0; z-index:2;
  background:url('../images/header/wedding_type_05.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-type5 .type5-names{
  position:absolute; left:0; right:0; top:calc(589 / 360 * 100cqw); z-index:3;
  display:flex; align-items:center; justify-content:center; gap:calc(10 / 360 * 100cqw);
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(24 / 360 * 100cqw); font-weight:700; color:#E8A299;
}
.card-header.header-type5 .type5-heart{
  width:calc(24 / 360 * 100cqw); height:calc(24 / 360 * 100cqw);
}
.card-header.header-type5 .type5-date{
  position:absolute; left:0; right:0; top:calc(643 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(21 / 360 * 100cqw); color:#E8A299;
}
.card-header.header-type5 .type5-place{
  position:absolute; left:0; right:0; top:calc(679 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(16 / 360 * 100cqw); color:#E8A299;
}
/* type5:e */

/* type6 — wedding_type_06.svg, 상단 이미지 + 흰 배경 :s */
.card-header.header-type6{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:#fff; container-type:inline-size;
}
.card-header.header-type6 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-type6 .header-photo{
  position:absolute; left:0; right:0; top:0;
  height:calc(424 / 360 * 100cqw); z-index:1;
}
.card-header.header-type6 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-type6 .header-svg-bg{
  position:absolute; inset:0; z-index:2;
  background:url('../images/header/wedding_type_06.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-type6 .type6-date{
  position:absolute; left:0; right:0; top:calc(584 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(20 / 360 * 100cqw); font-weight:300; color:#999278;
}
.card-header.header-type6 .type6-names{
  position:absolute; left:0; right:0; top:calc(630 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(20 / 360 * 100cqw); font-weight:700; color:#999278;
}
.card-header.header-type6 .type6-place{
  position:absolute; left:0; right:0; top:calc(668 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(14 / 360 * 100cqw); font-weight:300; color:#999278;
}
/* type6:e */

/* type7 — wedding_type_07.svg, Montserrat + Pretendard :s */
.card-header.header-type7{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:#000; container-type:inline-size;
}
.card-header.header-type7 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-type7 .header-photo{ position:absolute; inset:0; z-index:1; }
.card-header.header-type7 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-type7 .header-svg-bg{
  position:absolute; inset:0; z-index:2;
  background:url('../images/header/wedding_type_07.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-type7 .type7-date{
  position:absolute; left:0; right:0; top:calc(628 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Montserrat",sans-serif;
  font-size:calc(20 / 360 * 100cqw); font-weight:300; color:#ff875c;
}
.card-header.header-type7 .type7-names{
  position:absolute; left:0; right:0; top:calc(673 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Pretendard","Noto Sans KR",sans-serif;
  font-size:calc(20 / 360 * 100cqw); font-weight:700; color:#ff875c;
}
.card-header.header-type7 .type7-place{
  position:absolute; left:0; right:0; top:calc(713 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Pretendard","Noto Sans KR",sans-serif;
  font-size:calc(14 / 360 * 100cqw); font-weight:300; color:#ff875c;
}
/* type7:e */

/* type8 — wedding_type_08.svg :s */
.card-header.header-type8{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:#000; container-type:inline-size;
}
.card-header.header-type8 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-type8 .header-photo{ position:absolute; inset:0; z-index:1; }
.card-header.header-type8 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-type8 .header-svg-bg{
  position:absolute; inset:0; z-index:2;
  background:url('../images/header/wedding_type_08.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-type8 .type8-date{
  position:absolute; left:0; right:0; top:calc(609 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(20 / 360 * 100cqw); font-weight:300; color:#ffd448;
}
.card-header.header-type8 .type8-names{
  position:absolute; left:0; right:0; top:calc(671 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(20 / 360 * 100cqw); font-weight:700; color:#ffd448;
}
.card-header.header-type8 .type8-place{
  position:absolute; left:0; right:0; top:calc(708 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(14 / 360 * 100cqw); font-weight:300; color:#ffd448;
}
/* type8:e */

/* type9 — wedding_type_09.svg, Pretendard :s */
.card-header.header-type9{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:#000; container-type:inline-size;
}
.card-header.header-type9 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-type9 .header-photo{ position:absolute; inset:0; z-index:1; }
.card-header.header-type9 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-type9 .header-svg-bg{
  position:absolute; inset:0; z-index:2;
  background:url('../images/header/wedding_type_09.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-type9 .type9-date{
  position:absolute; left:0; right:0; top:calc(684 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Pretendard","Noto Sans KR",sans-serif;
  font-size:calc(11 / 360 * 100cqw); color:#000;
}
.card-header.header-type9 .type9-names{
  position:absolute; left:0; right:0; top:calc(703 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Pretendard","Noto Sans KR",sans-serif;
  font-size:calc(14 / 360 * 100cqw); color:#000;
}
.card-header.header-type9 .type9-place{
  position:absolute; left:0; right:0; top:calc(735 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Pretendard","Noto Sans KR",sans-serif;
  font-size:calc(10 / 360 * 100cqw); color:#000;
}
/* type9:e */

/* type10 — wedding_type_10.svg, 좌측 정렬 :s */
.card-header.header-type10{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:#000; container-type:inline-size;
}
.card-header.header-type10 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-type10 .header-photo{ position:absolute; inset:0; z-index:1; }
.card-header.header-type10 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-type10 .header-svg-bg{
  position:absolute; inset:0; z-index:2;
  background:url('../images/header/wedding_type_10.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-type10 .type10-date{
  position:absolute; left:calc(30 / 360 * 100cqw); top:calc(213 / 360 * 100cqw); z-index:3;
  text-align:left; font-family:"Noto Serif KR",serif;
  font-size:calc(20 / 360 * 100cqw); font-weight:300; color:#413E34;
}
.card-header.header-type10 .type10-names{
  position:absolute; left:calc(30 / 360 * 100cqw); top:calc(259 / 360 * 100cqw); z-index:3;
  text-align:left; font-family:"Noto Serif KR",serif;
  font-size:calc(20 / 360 * 100cqw); font-weight:700; color:#413E34;
}
.card-header.header-type10 .type10-place{
  position:absolute; left:calc(30 / 360 * 100cqw); top:calc(297 / 360 * 100cqw); z-index:3;
  text-align:left; font-family:"Noto Serif KR",serif;
  font-size:calc(14 / 360 * 100cqw); font-weight:300; color:#413E34;
}
/* type10:e */

/* baby-type1 — baby_type_01.svg + circle/stick icons :s */
.card-header.header-baby-type1{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:transparent; container-type:inline-size;
}
.card-header.header-baby-type1 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-baby-type1 .header-photo.baby-type1-photo{
  position:absolute; top:calc(162 / 360 * 100cqw); left:50%; transform:translateX(-50%);
  width:calc(296 / 360 * 100cqw); height:calc(422 / 360 * 100cqw); z-index:1; overflow:hidden;
}
.card-header.header-baby-type1 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-baby-type1 .header-svg-bg{
  position:absolute; inset:0; z-index:2;
  background:url('../images/header/baby_type_01.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-baby-type1 .baby-type1-name{
  position:absolute; left:0; right:0; top:calc(582 / 360 * 100cqw); z-index:3;
  display:flex; align-items:center; justify-content:center; gap:calc(20 / 360 * 100cqw);
  font-family:"Pretendard","Noto Sans KR",sans-serif;
  font-size:calc(20 / 360 * 100cqw); font-weight:700; color:#6b3e1a;
}
.card-header.header-baby-type1 .baby-type1-circle{ width:calc(8 / 360 * 100cqw); height:auto; }
.card-header.header-baby-type1 .baby-type1-date{
  position:absolute; left:0; right:0; top:calc(623 / 360 * 100cqw); z-index:3;
  display:flex; align-items:center; justify-content:center; gap:calc(12 / 360 * 100cqw);
  font-family:"Shrikhand",cursive;
  font-size:calc(20 / 360 * 100cqw); color:#6b3e1a;
}
.card-header.header-baby-type1 .baby-type1-stick{ width:calc(2 / 360 * 100cqw); height:calc(18 / 360 * 100cqw); }
.card-header.header-baby-type1 .baby-type1-place{
  position:absolute; left:0; right:0; top:calc(657 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Pretendard","Noto Sans KR",sans-serif;
  font-size:calc(16 / 360 * 100cqw); color:#6b3e1a;
}
/* baby-type1:e */

/* baby-type2 — baby_type_02.svg + circle/stick icons :s */
.card-header.header-baby-type2{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:transparent; container-type:inline-size;
}
.card-header.header-baby-type2 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-baby-type2 .header-photo.baby-type2-photo{
  position:absolute; top:calc(200 / 360 * 100cqw); left:50%; transform:translateX(-50%);
  width:calc(338 / 360 * 100cqw); height:calc(350 / 360 * 100cqw); z-index:1; overflow:hidden;
}
.card-header.header-baby-type2 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-baby-type2 .header-svg-bg{
  position:absolute; inset:0; z-index:2;
  background:url('../images/header/baby_type_02.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-baby-type2 .baby-type2-name{
  position:absolute; left:0; right:0; top:calc(582 / 360 * 100cqw); z-index:3;
  display:flex; align-items:center; justify-content:center; gap:calc(20 / 360 * 100cqw);
  font-family:"Pretendard","Noto Sans KR",sans-serif;
  font-size:calc(20 / 360 * 100cqw); font-weight:700; color:#001a38;
}
.card-header.header-baby-type2 .baby-type2-circle{ width:calc(8 / 360 * 100cqw); height:auto; }
.card-header.header-baby-type2 .baby-type2-date{
  position:absolute; left:0; right:0; top:calc(623 / 360 * 100cqw); z-index:3;
  display:flex; align-items:center; justify-content:center; gap:calc(12 / 360 * 100cqw);
  font-family:"Shrikhand",cursive;
  font-size:calc(20 / 360 * 100cqw); color:#001a38;
}
.card-header.header-baby-type2 .baby-type2-stick{ width:calc(2 / 360 * 100cqw); height:calc(18 / 360 * 100cqw); }
/* baby-type2:e */

/* baby-type3 — baby_type_03.svg, Italianno + Noto Serif KR :s */
.card-header.header-baby-type3{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:transparent; container-type:inline-size;
}
.card-header.header-baby-type3 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-baby-type3 .header-photo.baby-type3-photo{
  position:absolute; top:calc(115 / 360 * 100cqw); left:50%; transform:translateX(-50%);
  width:calc(330 / 360 * 100cqw); height:calc(330 / 360 * 100cqw); z-index:1; overflow:hidden;
}
.card-header.header-baby-type3 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-baby-type3 .header-svg-bg{
  position:absolute; inset:0; z-index:2;
  background:url('../images/header/baby_type_03.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-baby-type3 .baby-type3-date{
  position:absolute; left:0; right:0; top:calc(478 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Italianno",cursive;
  font-size:calc(20 / 360 * 100cqw); color:#000; letter-spacing:0.19em;
}
.card-header.header-baby-type3 .baby-type3-name{
  position:absolute; left:0; right:0; top:calc(587 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(32 / 360 * 100cqw); font-weight:700; color:#000; letter-spacing:0.19em;
}
/* baby-type3:e */

/* baby-type4 — baby_type_04.svg, Noto Serif KR :s */
.card-header.header-baby-type4{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:transparent; container-type:inline-size;
}
.card-header.header-baby-type4 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-baby-type4 .header-photo.baby-type4-photo{
  position:absolute; top:calc(190 / 360 * 100cqw); left:50%; transform:translateX(-50%);
  width:calc(348 / 360 * 100cqw); height:calc(286 / 360 * 100cqw); z-index:1; overflow:hidden;
}
.card-header.header-baby-type4 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-baby-type4 .header-svg-bg{
  position:absolute; inset:0; z-index:2;
  background:url('../images/header/baby_type_04.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-baby-type4 .baby-type4-name{
  position:absolute; left:0; right:0; top:calc(484 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(15 / 360 * 100cqw); font-weight:700; color:#000; letter-spacing:0.2em;
}
.card-header.header-baby-type4 .baby-type4-date{
  position:absolute; left:0; right:0; top:calc(604 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(15 / 360 * 100cqw); color:#000; letter-spacing:0.2em;
}
.card-header.header-baby-type4 .baby-type4-place{
  position:absolute; left:0; right:0; top:calc(635 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(15 / 360 * 100cqw); color:#000; letter-spacing:0.2em;
}
/* baby-type4:e */

/* baby-type5 — baby_type_05.svg, bg #fffcf0 :s */
.card-header.header-baby-type5{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:#fffcf0; container-type:inline-size;
}
.card-header.header-baby-type5 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-baby-type5 .baby-type5-name{
  position:absolute; left:calc(187 / 360 * 100cqw); top:calc(79 / 360 * 100cqw); z-index:3;
  writing-mode:vertical-rl; width:fit-content;
  font-family:"Noto Serif KR",serif;
  font-size:calc(16 / 360 * 100cqw); color:#000; letter-spacing:0.2em;
}
.card-header.header-baby-type5 .header-svg-bg{
  position:absolute; inset:0; z-index:1;
  background:url('../images/header/baby_type_05.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-baby-type5 .header-photo.baby-type5-photo{
  position:absolute; top:calc(261 / 360 * 100cqw); left:50%; transform:translateX(-50%);
  width:calc(278 / 360 * 100cqw); height:calc(278 / 360 * 100cqw); z-index:2; overflow:hidden;
  border-radius:calc(15 / 360 * 100cqw);
}
.card-header.header-baby-type5 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-baby-type5 .baby-type5-date{
  position:absolute; left:0; right:0; top:calc(667 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(15 / 360 * 100cqw); color:#000; letter-spacing:0.2em;
}
.card-header.header-baby-type5 .baby-type5-place{
  position:absolute; left:0; right:0; top:calc(698 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(15 / 360 * 100cqw); color:#000; letter-spacing:0.2em;
}
/* baby-type5:e */

/* baby-type6 — baby_type_06.svg, 원형 이미지 + border :s */
.card-header.header-baby-type6{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:transparent; container-type:inline-size;
}
.card-header.header-baby-type6 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-baby-type6 .header-svg-bg{
  position:absolute; inset:0; z-index:1;
  background:url('../images/header/baby_type_06.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-baby-type6 .header-photo.baby-type6-photo{
  position:absolute; top:calc(214 / 360 * 100cqw); left:50%; transform:translateX(-50%);
  width:calc(260 / 360 * 100cqw); height:calc(260 / 360 * 100cqw); z-index:2; overflow:hidden;
  border-radius:999px; border:calc(9 / 360 * 100cqw) solid #9dc7f9;
  box-sizing:border-box;
}
.card-header.header-baby-type6 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block; border-radius:999px;
}
.card-header.header-baby-type6 .baby-type6-date{
  position:absolute; left:0; right:0; top:calc(632 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(15 / 360 * 100cqw); font-weight:600; color:#225a9a; letter-spacing:0.2em;
}
.card-header.header-baby-type6 .baby-type6-time{
  position:absolute; left:0; right:0; top:calc(657 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(15 / 360 * 100cqw); font-weight:600; color:#225a9a; letter-spacing:0.2em;
}
.card-header.header-baby-type6 .baby-type6-place{
  position:absolute; left:0; right:0; top:calc(694 / 360 * 100cqw); z-index:3;
  text-align:center; font-family:"Noto Serif KR",serif;
  font-size:calc(15 / 360 * 100cqw); font-weight:600; color:#225a9a; letter-spacing:0.2em;
}
/* baby-type6:e */

/* baby-type7 — baby_type_07.svg, 이미지가 프레임 위에 :s */
.card-header.header-baby-type7{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:transparent; container-type:inline-size;
}
.card-header.header-baby-type7 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-baby-type7 .header-svg-bg{
  position:absolute; inset:0; z-index:1;
  background:url('../images/header/baby_type_07_20260811.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-baby-type7 .header-photo.baby-type7-photo{
  /* Keep the photo locked to the 360x800 SVG frame on iOS Safari.
     Some iPhone versions resolve nested cqw coordinates differently,
     while percentages are derived from the same rendered frame box. */
  position:absolute; top:18.25%; left:50%; transform:translateX(-50%);
  width:87.222222%; height:37.5%; z-index:2; overflow:hidden;
  box-sizing:border-box; border:4px solid #000;
}
.card-header.header-baby-type7 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
/* baby-type7:e */

/* baby-type8 — baby_type_08.svg, 텍스트 없음 :s */
.card-header.header-baby-type8{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:transparent; container-type:inline-size;
}
.card-header.header-baby-type8 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-baby-type8 .header-photo.baby-type8-photo{
  position:absolute; top:calc(169 / 360 * 100cqw); left:50%; transform:translateX(-50%);
  width:calc(303 / 360 * 100cqw); height:calc(437 / 360 * 100cqw); z-index:1; overflow:hidden;
}
.card-header.header-baby-type8 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-baby-type8 .header-svg-bg{
  position:absolute; inset:0; z-index:2;
  background:url('../images/header/baby_type_08.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
/* baby-type8:e */

/* baby-type9 — baby_type_09.svg, Knewave + rotate -15deg :s */
.card-header.header-baby-type9{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:transparent; container-type:inline-size;
}
.card-header.header-baby-type9 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-baby-type9 .header-photo.baby-type9-photo{
  position:absolute; top:calc(205 / 360 * 100cqw); left:50%; transform:translateX(-50%);
  width:calc(265 / 360 * 100cqw); height:calc(389 / 360 * 100cqw); z-index:1; overflow:hidden;
}
.card-header.header-baby-type9 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-baby-type9 .header-svg-bg{
  position:absolute; inset:0; z-index:2;
  background:url('../images/header/baby_type_09.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-baby-type9 .baby-type9-date{
  position:absolute; left:calc(18 / 360 * 100cqw); top:calc(695 / 360 * 100cqw); z-index:3;
  font-family:"Knewave",cursive; font-size:calc(40 / 360 * 100cqw);
  color:#720A01; transform:rotate(-15deg); transform-origin:left top;
}
.card-header.header-baby-type9 .baby-type9-time{
  position:absolute; left:calc(122 / 360 * 100cqw); top:calc(720 / 360 * 100cqw); z-index:3;
  font-family:"Knewave",cursive; font-size:calc(40 / 360 * 100cqw);
  color:#720A01; transform:rotate(-15deg); transform-origin:left top;
}
/* baby-type9:e */

/* baby-type10 — baby_type_10.svg, Bitcount Grid Double, 우측 정렬 :s */
.card-header.header-baby-type10{
  position:relative; width:100%; aspect-ratio:360/800; padding:0; overflow:hidden;
  background:transparent; container-type:inline-size;
}
.card-header.header-baby-type10 .card-header-inner{ position:relative; width:100%; height:100%; }
.card-header.header-baby-type10 .header-svg-bg{
  position:absolute; inset:0; z-index:1;
  background:url('../images/header/baby_type_10.svg') no-repeat center / 100% 100%;
  pointer-events:none;
}
.card-header.header-baby-type10 .header-photo.baby-type10-photo{
  position:absolute; top:calc(306 / 360 * 100cqw); left:50%; transform:translateX(-50%);
  width:calc(289 / 360 * 100cqw); height:calc(289 / 360 * 100cqw); z-index:2; overflow:hidden;
}
.card-header.header-baby-type10 .header-photo .MAIN-IMAGE{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--main-image-position,center); display:block;
}
.card-header.header-baby-type10 .baby-type10-date{
  position:absolute; right:calc(35 / 360 * 100cqw); top:calc(641 / 360 * 100cqw); z-index:3;
  text-align:right; font-family:"Bitcount Grid Double","Pretendard",sans-serif;
  font-size:calc(15 / 360 * 100cqw); color:#000; letter-spacing:0.2em;
}
.card-header.header-baby-type10 .baby-type10-place{
  position:absolute; right:calc(35 / 360 * 100cqw); top:calc(661 / 360 * 100cqw); z-index:3;
  text-align:right; font-family:"Bitcount Grid Double","Pretendard",sans-serif;
  font-size:calc(15 / 360 * 100cqw); color:#000; letter-spacing:0.2em;
}
/* baby-type10:e */

/* 포스터:s */
.card-header.header-poster{
  
}

.card-header.header-poster{
  height: 600px;
  padding-top: 0;
  position: relative;
  padding-bottom: 0;
}

.card-header.header-poster .card-header-inner{
  height: 100%;
}
.card-header.header-poster .header-background{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.card-header.header-poster .header-copy{
  margin-bottom: 30px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 2px 0 rgba(0,0,0,0.02), 0 3px 0 rgba(0,0,0,0.02), 0 4px 0 rgba(0,0,0,0.02), 0 5px 0 rgba(0,0,0,0.02), 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, .02);
}

.card-header.header-poster .header-copy h3{
  color: var(--card-theme-highlight-color);
  text-align: center;
  font-size: var(--font-size-40);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
}
.card-header.header-poster .header-talents{
  display: flex;
  margin-bottom: 50px;
  align-items: center;
}

.card-header.header-poster .header-talents span{
  color: #fff;
  font-size: var(--font-size-20);
}

.card-header.header-poster .header-talents span.GROOM-NAME{
  margin-right: 40px;
}

.card-header.header-poster .header-talents span.BRIDE-NAME{
  margin-left: 40px;
}

.card-header.header-poster .header-date{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-header.header-poster .header-date > div{
  color: #fff;
  font-size: var(--font-size-25);
}

.card-header.header-poster .header-date > div:first-child{
  border-bottom: 1px solid #fff;
}

.card-header.header-poster .event-place{
  margin-bottom: 60px;
  font-size: var(--font-size-20);
  text-align: center;
  color: rgba(255,255,255,0.6);
  line-height: var(--font-size-25);
}

.card-header.header-poster .header-copy-bottom{
  padding: 20px;
  color: rgba(255,255,255,0.3);
  font-size: 9px;
  text-align: center;
}
/* 포스터:e */

/* 아치:s */
.card-header.header-arch .card-header-inner{
  margin: 20px;
  position: relative;
}

.card-header.header-arch .header-image{
  margin-left: -20px;
  margin-right: -20px;
  position: relative;

}

.card-header.header-arch .arch{
  border: 1px solid #eaeaea;
  border-radius: 10px;
}

.card-header.header-arch .event-place{
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  font-size: var(--font-size-15);
  line-height: var(--font-size-30);
  color: #666;
  font-weight: 300;
}

.card-header.header-arch .header-subtitle{
  font-size: 14px;
  text-align: center;
  color: #4e4e4e;
  margin-top: 30px;
  margin-bottom: 20px;
  font-weight: 300;
  letter-spacing: 3px;
}

.card-header.header-arch .header-talents{
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-header.header-arch .header-talents span{
  font-size: var(--font-size-20);
  color: #4e4e4e;
  
}

.card-header.header-arch .header-talents .space-line{
  height: 15px;
  margin: 10px 0 0px;
  position: relative;
}

.card-header.header-arch .header-talents .space-line:after{
  content: '';
  width: 1px;
  height: 15px;
  background: #bebebe;
  position: absolute;
  margin-top: -5px;
}
/* 아치:e */

/* 둥근:s */
.card-header.header-round{
  padding: 0;
}

.card-header.header-round .card-header-inner{
  padding: 20px;
}

.card-header.header-round .header-info{
  margin-top: 70px;
  margin-bottom: 35px;
}

.card-header.header-round .header-info .header-subtitle{
  text-align: center;
  font-size: var(--font-size-15);
  color: #707070;
  letter-spacing: 5px;
}
.card-header.header-round .header-image{
  position: relative;
}
.card-header.header-round .header-image img{
  border-top-left-radius: 50% 25%;
}

.card-header.header-round .header-image img{
  border-top-right-radius: 50% 25%;
}

.card-header.header-round .header-talents{
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.card-header.header-round .header-talents div{
  text-align: center;
}


.card-header.header-round .header-talents div p{
  font-size: var(--font-size-10);
  color: #4e4e4e;
  font-weight: 300;
  letter-spacing: 0.5px;
}

.card-header.header-round .header-talents div span{
  font-size: var(--font-size-18);
  color: #4e4e4e;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.card-header.header-round .header-talents div:first-child{
  margin-right: 30px;
}

.card-header.header-round .header-talents div:last-child{
  margin-left: 30px;
}

.card-header.header-round .event-place{
  text-align: center;
  font-size: var(--font-size-14);
  line-height: var(--font-size-25);
  color: #555;
  border-top: 1px solid #eaeaea;
  padding-top: 35px;
  margin-top: 35px;
}
.baby .card-header.header-round .header-info{
  margin-bottom: 30px;
}
.baby .card-header.header-round .header-title{
  font-size: var(--font-size-20);
  line-height: var(--font-size-30);
  color: var(--card-theme-title-color);
  text-align: center;
  margin-top: 30px;
}
.baby .card-header.header-round .header-image img{
  border-radius: 50px;
}

.baby .card-header.header-round .event-place{
  border-top: 0;
  margin-top: 0;
}

.baby .card-header.header-round .header-subtitle{
  color: #888888;
  font-size: var(--font-size-12);
}
/* 둥근:e */

.card-header .card-title h2{
  padding: 5px 40px 6px 40px;
  font-size: var(--font-size-25);
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #4e4e4e;
}

.card-header .card-title h4{
  font-size: var(--font-size-14);
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 5px;
  text-align: center;
  color: #4e4e4e;
  margin-bottom: 30px;
}



.card-header .card-title h2 > span{
  display: inline-block;
  padding-right: 15px;
}

.card-header .card-title h2 > span:after{
  position: absolute;
  content: '';
  width: 1px;
  height: 15px;
  background: #bebebe;
  margin-top: 13px;
  margin-left: 10px;
}

.card-header .card-title h2 > span:last-child{
  padding-right: 0;
}
.card-header .card-title h2 > span:last-child:after{
  width: 0;
}

.card-header .header-main-character{
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: var(--font-size-20);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #4e4e4e;
}

.header-blur-bottom{
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  background: linear-gradient(to bottom, 
    rgba(255,255,255, 0.05) 10%,
    rgba(255,255,255, 0.1) 20%,
    rgba(255,255,255, 0.15) 30%,
    rgba(255,255,255, 0.5) 60%,
    rgba(255,255,255, 0.5) 80%,
    rgba(255,255,255, 1) 100%
  );
  z-index: 10;
}
/* 상단:e */

div.SECTION-HEADER{
  display: none;
}

div.SECTION-HEADER.active{
  display: block;
}

.card-section .card-title{
  font-size: var(--font-size-16);
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: var(--card-theme-title-color);
  
}
.card-section .card-subtitle{
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-size: var(--font-size-14);
  font-weight: 300;
  letter-spacing: 3px;
  text-align: center;
  color: var(--card-theme-subtitle-color);
  padding-bottom: 10px;
}

.card-section .card-description{
  font-size: var(--font-size-14);
  line-height: var(--font-size-23);
  text-align: center;
  color: var(--card-theme-content-color);
  margin-top: 20px;
  margin-bottom: 25px;
}

/* 모시는글:s */
.card-introduction .introduction-content{
  margin-top: 50px;
  margin-bottom: 65px;
  font-size: var(--font-size-14);
  line-height: var(--font-size-26);
  text-align: center;
  color: var(--card-theme-content-color);
}

.card-introduction .introduction-talent{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

.card-introduction .introduction-talent .talent-tit{
  font-size: var(--font-size-14);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #4e4e4e;
  margin-right: 15px;
}

.card-introduction .introduction-talent .dot{
  width: 4px;
  height: 4px;
  background: #4e4e4e;
  border-radius: 50%;
  margin-left: 20px;
  margin-right: 20px;
}

.card-introduction .GROOM-NAME,
.card-introduction .BRIDE-NAME{
  font-size: var(--font-size-16);
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 2px;
  text-align: center;
  color: #4e4e4e;
}

.introduction-about{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}
.introduction-about > div{
  display: flex;
  align-items: center;
  padding: 10px 0;
  justify-content: center;
}
.introduction-about span.t-live.flower img{
  width: 25px;
  height: 25px;
}
.introduction-about span.t-live.text{
  color: #ccc;
  font-family:'Nanum Gothic', sans-serif;
}
.introduction-about > div span{
  font-size: var(--font-size-16);
}
.introduction-about span.with{
  padding-left: 5px;
  padding-right: 5px;
  color: var(--card-theme-highlight-color);
}
.introduction-about span.dot{
  padding: 0 10px;
}
.introduction-about span.dot:after{
  position: absolute;
  content: '';
  width: 3px;
  height: 3px;
  background: #888;
  border-radius: 50%;
  margin-top: -1px;
  margin-left: -2px;
}

.introduction-about span.t-name{
  color: #222;
  font-weight: 500;
}

.baby .card-introduction .GROOM-NAME,
.baby .card-introduction .BRIDE-NAME{
  color: var(--card-theme-highlight-color);
}
/* 모시는글:e */


/* 글귀:s */
.quote{
  font-size: var(--font-size-15);
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 2;
  letter-spacing: normal;
  text-align: center;
  color: var(--card-theme-content-font-color);
}
/* 글귀:e */

/* 인사말:s */
.greeting .greeting-content{
  display: flex;
  justify-content: center;
}
.greeting .greeting-content{
  font-size: var(--font-size-14);
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.5;
  text-align: center;
  color: var(--card-theme-content-font-color);
  margin-bottom: 55px;
  //text-decoration-line: grammar-error;
}

.greeting-author{
  margin-bottom: 30px;
}

.greeting-author{
  display: flex;
  width: 100%;
  justify-content: center;
}

.greeting-header .card-subtitle{
  padding-bottom: 40px;
}

.greeting-author ul{
  display: flex;
}

.greeting-author ul li{
  font-size: var(--font-size-18);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #4e4e4e;
  margin-right: 40px;
}

.greeting-author ul li:first-child:after{
  position: absolute;
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4e4e4e;
  margin-top: 14px;
  margin-left: 17px;
}

.greeting-author ul li span{
  font-size: var(--font-size-14);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #4e4e4e;
  padding-right: 10px;
}
/* 인사말:e */

/* about:s */
.card-about .about-header{
  border-bottom: 1px dashed #eaeaea;
  padding-bottom: 40px;
}
.card-about .about-content{
  margin-top: 40px;
  padding-left: 20px;
  padding-right: 20px;
}

.card-about .person-image img{
  border-radius: 10px;
}

.card-about .person{
  padding-top: 20px;
  text-align: center;
  font-size: var(--font-size-16);
  font-weight: 500;
  letter-spacing: 1px;
}

.card-about .person .person-position{
  color: var(--card-theme-highlight-color);
  margin-right: 5px;
}

.card-about .person .person-name{
  color: var(--card-theme-font-color);
}

.card-about .person-description{
  font-size: var(--font-size-14);
  line-height: var(--font-size-27);
  color: var(--card-theme-content-font-color);
  padding: 20px 0;
}

.card-about .about-item{
  margin-bottom: 30px;
}

.card-about .about-item:last-child{
  margin-bottom: 0;
}
/* about:e */

/* 부모님:s */
.card-parents .parents-header{
  border-bottom: 1px dashed #eaeaea;
  padding-bottom: 40px;
}

.card-parents .parents-content{
  padding-left: 20px;
  padding-right: 20px;
}

.card-parents .parents-info{
  display: flex;
  width: 100%;
  gap: 20px;
}

.card-parents .card-description{
  padding-bottom: 30px;
  padding-top: 30px;
}

.card-parents .parents-info > div{
  display: flex;
  width: 100%;
  flex-direction: column;
}

.card-parents .parents-image img{
  border-radius: 10px;
}

.card-parents .parents-person{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}



.card-parents .parents-person .parents-heart{
  color: #ff0000;
  padding-left: 5px;
  padding-right: 5px;
}

.card-parents .parents-talent{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}

.card-parents .parents-name{
  font-size: var(--font-size-14);
  font-weight: 500;
}

.card-parents .parents-related{
  color: var(--card-theme-highlight-color);
  padding-right: 5px;
}

.card-parents .parents-related.groom{
  color: var(--card-theme-highlight-color);
}

.card-parents .parents-related.bride{
  color: var(--card-theme-highlight-color);
}

.card-parents .parents-text{
  font-weight: 300;
}
/* 부모님:e */

/* 오시는길:s */
.card-location{
  margin-left: 0;
  margin-right: 0;
}


#naver-map{
  width:100%;
  height: 350px;
}

.map-menu-wrapper{
  display: flex;
  justify-content: center;
  background: #F5F5F5;
}
.map-menu{
  padding: 0 10px;
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.map-menu div{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.map-menu a img{
  width: 20px;
  height: 20px;
}
.map-menu a{
  display: block;
  font-size: var(--font-size-14);
  color: #555;
  padding-top: 17px;
  padding-bottom: 15px;
  font-weight: 400;
  letter-spacing: -1px;
  text-decoration: none;
}

.map-menu a span{
  padding-left: 10px;
}

.location .destination{
  padding-top: 40px;
  padding-bottom: 40px;
}
.location .destination-name,
.location .destination-address{
  font-size: var(--font-size-14);
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 27px;
  letter-spacing: normal;
  text-align: center;
  color: #666;
}

.location .location-content{
  padding-top: 30px;
  padding-left: 50px;
  padding-right: 50px;
}
.location .location-content:after{
  clear: both;
}

.location .location-content h4{
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--card-theme-highlight-color);
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.location .location-row:first-child{
  padding-top: 20px;
}

.location .location-content p{
  font-size: var(--font-size-14);
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 2;
  letter-spacing: normal;
  color: #4e4e4e;
  margin: 0;
}

.location .location-row{
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.location .location-row:last-child{
  border-bottom: 0;
}
/* 오시는길:e */

/* 안내사항:s */
.information{
  margin-bottom: 55px;
}

.information-content{
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 40px;
}

.information-tab-content{
  padding: 40px 20px 20px;
  font-size: var(--font-size-14);
  color: var(--card-theme-content-color);
  line-height: var(--font-size-25);
  font-weight: 400;
  text-align: center;
}

.information-content .nav.nav-tabs{
  --bs-nav-link-color: var(--card-theme-subtitle-color);
  --bs-nav-link-hover-color: var(--card-theme-subtitle-color);
  --bs-nav-tabs-link-active-color: var(--card-theme-highlight-color);
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-bg: transparent;
}

.information-item{
  border: 1px solid #eaeaea;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 20px;
}
.information-item h4{
  font-size: var(--font-size-16);
  color: var(--card-theme-highlight-color);
  font-weight: 500;
  margin-bottom: 10px;
}

.information-item p{
  font-size: var(--font-size-14);
  color: var(--card-theme-content-color);
  line-height: var(--font-size-25);
  font-weight: 400;
  margin-bottom: 0;
}

.INFORMATION-CONST{
  display: none;
}

.INFORMATION-CONST.active{
  display: block;
}

/* [I번 2026-05-18] 돌잔치 행사안내 — 식전영상처럼 와이드 비율 + 모서리 둥근 스타일 */
body.baby .information-content .info-visual{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  max-width: none !important;
}
body.baby .information-content .info-visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none !important;
  border-radius: 12px;
}

/* 안내사항:e */

/* 참석의사:s */

.attendance p{
  font-size: var(--font-size-14);
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: normal;
  text-align: center;
  color: #666;
  margin-bottom: 20px;
}

#modal-notice .modal-header{
  text-align: center;
}

#modal-notice .attend-title{
  font-size: var(--font-size-16);
  color: var(--card-theme-highlight-color);
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
}

#modal-notice .attend-description{
  text-align: center;
  font-size: var(--font-size-14);
  line-height: var(--font-size-25);
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eaeaea;
}

#modal-notice .attend-info{
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

#modal-notice .attend-info > div{
  margin-bottom: 15px;
  line-height: var(--font-size-23);
  text-align: center;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

#modal-notice .attend-info > div:last-child{
  margin-bottom: 0;
}

#modal-notice .modal-bottom{
  display: flex;
  width: 100%;
}

#modal-notice .modal-bottom .btn{
  width: 100%;
  --bs-btn-font-size: var(--font-size-14);
  letter-spacing: -1px;
  --bs-btn-font-weight: 700;
}

#modal-notice .modal-bottom .btn.btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-border-color: #333;
  --bs-btn-bg: #333;
  --bs-btn-active-bg: #111;
  --bs-btn-active-border-color: #111;
  --bs-btn-hover-bg: #111;
  --bs-btn-hover-border-color: #111;
}

#modal-notice .modal-bottom-check{
  font-size: var(--font-size-12);
  text-align: center;
  margin-bottom: 15px;
}

.form-check-input:checked{
  background-color: var(--card-theme-highlight-color);
  border-color: var(--card-theme-highlight-color);
}
/* 참석의사:e */

/* 계좌안내:s */
.bank h3{
  font-size: var(--font-size-20);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: var(--card-theme-font-color);
  margin-bottom: 40px;
}

.bank i{
  font-style: normal;
}
.bank .bank-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}

.bank .accordion-item{
  margin-bottom: 16px;
}

.bank .bank-no-text,
.bank .bank-no-text a{
  color: #000;
  font-weight: 300;
}

.bank .accordion{
  width: 300px;
  --bs-accordion-border-color: var(--card-theme-border-color);
  --bs-accordion-border-radius: 15px;
  --bs-accordion-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--card-theme-font-color);
  --bs-accordion-btn-color: var(--card-theme-font-color);
  --bs-accordion-btn-padding-y: 12px;
  --bs-accordion-btn-icon-width: 10px;
  --bs-accordion-btn-icon-height: 10px;
}

.bank .accordion-button:not(.collapsed){
  box-shadow: none;
}

.bank .accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0,0,0,.125);
}

.bank .accordion-item{
  border-radius: 15px !important;
}
.bank .accordion-item .accordion-header .accordion-button{
  border-radius: 15px !important;
}

.bank .accordion-header button{
  font-size: var(--font-size-14);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.3px;
  text-align: center;
  color: var(--card-theme-font-color);
}

.bank .accordion-body > div{
  display: flex;
  width: 100%;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
  line-height: 1.8;
  align-items: center;
}

.baby .bank .accordion-body > div.active{
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.bank .accordion-body > div.active:last-child{
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.bank .accordion-body > div .btn{
  border-radius: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: var(--font-size-12);
}

.bank .accordion-body > div > div{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.bank .accordion-body > div > div span{
  color: #b9b9b9;
  padding-right: 5px;
}

.bank .accordion-body > div > div:first-child{
  font-size: var(--font-size-14);
  color: #4e4e4e;
}

.bank .accordion-body > div > div:last-child{
  justify-content: center;
  align-items: end;
  width: 100px;
}
.bank .btn{
  min-width: 80px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-bottom: 5px;
}
.bank .btn.btn-kakao{
  background: #ffeb00;
  border: 0;
  color: #000;
}

.bank .btn.btn-kakao.hidden{
  display: none;
}

.bank .bank-btn .btn:last-child{
  margin-bottom: 0;
}
/* 계좌안내:e */

/* 방명록:s */
.guestbook-wrap{
  margin-bottom: 40px;
  padding-left: 20px;
  padding-right: 20px;
}

.guestbook-modal{
  background: #f9f9f9;
}

.guestbook-modal .guestbook-wrap{
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.card-guestbook-layout.hidden{
  display: none;
}

.comment-item{
  padding: 25px 20px;
  border-radius: 15px;
  box-shadow: 2px 2px 5px 0 rgb(0 0 0 / 5%);
  -webkit-box-shadow: 2px 2px 5px 0 rgb(0 0 0 / 5%);
  -moz-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .05);
  background: #fff;
  margin-bottom: 20px;
}

.guestbook-wrap .comment-item:last-child{
  margin-bottom: 0;
}

.comment-header{
  display: flex;
  justify-content: space-between;
}

.comment-header .name{
  color: var(--card-theme-highlight-color);
  font-weight: 500;
}

.comment-header .date{
  display: flex;
  color: var(--card-theme-content-color);
  align-items: center;
}

.comment-header .date a{
  text-decoration: none;
  margin-left: 10px;
  color: var(--card-theme-content-color);
}

.comment-body{
  color: var(--card-theme-content-color);
  margin: 0;
  margin-top: 20px;
  line-height: var(--font-size-23);
}

.empty-comment{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-comment .comment-icon img{
  width: 30px;
  height: 30px;
}
.empty-comment .comment-icon{
  margin-bottom: 20px;
}

.empty-comment .comment-text{
  font-size: var(--font-size-12);
  color: #b9b9b9;
}
/* 방명록:e */

/* 생중계:s */
.card-broadcast .broadcast-content{
  margin-top: 40px;
}
.card-broadcast .broadcast-description{
  font-size: var(--font-size-14);
  font-weight: 300;
  text-align: center;
  margin-bottom: 40px;
  line-height: var(--font-size-25);
  color: var(--card-theme-content-color);
}
/* 생중계:e */

/* 하단:s */
.card-footer{
  background: #f8f8f8;
  padding-top: 20px !important;
  padding-bottom: 10px !important;
  margin-left: 0;
  margin-right: 0;
}

.card-footer p{
  font-size: var(--font-size-10);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #c7c7c7;
  margin-top: 15px;
}

.card-footer .footer-menu{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-footer .footer-menu > div:first-child{
  display: flex;
}

.card-footer .footer-menu .menu-item button{
  font-size: var(--font-size-14);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -1px;
  text-align: center;
  color: #4e4e4e;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-footer .footer-menu .menu-item{
  padding: 0 10px;
}

.card-footer .footer-menu .menu-item:nth-child(2) button img{
  height: 18px;
}

.card-footer .footer-menu .menu-item:last-child button img{
  height: auto;
}
.card-footer .footer-menu .menu-item button span{
  margin-top: 10px;
  font-weight: 300;
}
/* 하단:e */

/* 버튼:s */
.btn.btn-light{
  display: inline-block;
  width: max-content;
  border: 1.5px solid var(--card-theme-border-color);
  min-width: 150px;
  background: #fff;
  border-radius: 20px;
  font-weight: 500;
  font-size: var(--font-size-14);
  color: var(--card-theme-button-color);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.btn.btn-auto{
  min-width: auto;
}

.btn.btn-danger{
  border-radius: 20px;
  font-weight: 500;
  font-size: var(--font-size-14);
  background: var(--card-theme-button-color);
  color: #fff;
  border-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
}

.btn.btn-block{
  width: 100%;
}

.btn.btn-sm{
  font-size: 12px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.button-wrap{
  padding-left: 35px;
  padding-right: 35px;
  display: flex;
  justify-content: center;
}

.button-wrap .btn{
  margin-right: 5px;
}

.button-wrap .btn:last-child{
  margin-right: 0;
}
/* 버튼:e */

/* 달력:s */
.card-calendar{
  margin-left: 0;
  margin-right: 0;
  background: #f9f9f9;  
}

.card-calendar .card-title-calendar{
  color: var(--card-theme-highlight-color);
  letter-spacing: 2px;
  font-size: var(--font-size-18);
}

.card-calendar .card-title-calendar-detail{
  font-size: var(--font-size-16);
  color: #888;
  font-weight: 300;
  letter-spacing: 0;
  padding-top: 5px;
}

.calendar{
  padding-top: 45px;
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
}
.calendar .calendar-card{
  width: 100%;
  border-top: 1px solid #eaeaea;
  padding-top: 20px;
  margin-top: 30px;
}
.calendar .row-calendar{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
}

.calendar .row-calendar:first-child .p-calendar{
  color: var(--card-theme-highlight-color);
}

.calendar .row-calendar:last-child{
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 20px;
}

.calendar .p-day{
  font-size: var(--font-size-14);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #666666;
  padding-top: 5px;
  padding-bottom: 5px;
}

.calendar .p-calendar{
  display: flex;
  justify-content: center;
  width: 100%;
  font-size: var(--font-size-13);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #666666;
  z-index: 1;
  padding-top: 10px;
  padding-bottom: 10px;
}

.calendar .p-calendar.d-day{
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.calendar .p-calendar.d-day:before{
  position: absolute;
  content: '';
  width: 25px;
  height: 25px;
  background: var(--card-theme-highlight-color);
  border-radius: 50%;
  z-index: -1;
  margin-top: -5px;
  margin-left: 1px;
}

.calendar .dday-text{
  text-align: center !important;
  font-size: var(--font-size-14);
  padding-top: 25px;
  font-weight: 300;
  letter-spacing: 0.3px;
}

.calendar .dday-text span{
  font-weight: 700;
  color: var(--card-theme-highlight-color);
}
/* 달력:e */

/* 갤러리:s */
.gallery-content{
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 40px;
  padding-bottom: 15px;
}

#gallery-slide li{
  text-align: center;
}

.gallery-container{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 120px;
  grid-auto-flow: dense;
}

.gallery-container > div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.gallery-container > div a{
  display: block;
  width: 100%;
  height: 100%;
}
.gallery-container > div img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.gallery-more{
  margin-top: 20px;
  text-align: center;
  display: none;
}

.gallery.more .gallery-more{
  display: block;
}

.gallery.more .gallery-container{
  width: 100%;
  height: 390px;
  overflow: hidden;
}

.gallery.more .gallery-container.active{
  height: auto;
}

.gallery-inner{
  position: relative;
}
.gallery-gradient{
  position: absolute;
  top: calc( 390px - 60px );
  width: 100%;
  height: 50px;
  display: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0.25) 25%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.75) 75%,
    rgba(255, 255, 255, 1) 100%
  );
  z-index: 10;
}

.gallery-gradient.active{
  display: block;
}

.grid-container {
  display: -webkit-box;      
  display: -moz-box;         
  display: -ms-flexbox;     
  display: -webkit-flex;     
  display: flex;    
  flex-flow:row;
  height: 400px;
  width:100% !important;
  overflow-x: auto;
}


.gallery{
  display: block;
}

.gallery.hidden{
  display: none;
}
.grid {
  position: relative;
  height: 420px;
  overflow-x: auto;
}
.item {
  position: absolute;
  width: 200px;
  height: 200px;
  line-height: 200px;
  margin: 5px;
  z-index: 1;
}
.item.muuri-item-hidden {
  z-index: 0;
}
.item.muuri-item-releasing {
  z-index: 2;
}
.item.muuri-item-dragging {
  z-index: 3;
}
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  background: red;
  font-size: 50px;
  color: white;
  cursor: pointer;
}
.item.muuri-item-dragging .item-content {
}
.item.muuri-item-releasing .item-content {
}

.masonry-wrapper {
  display: flex;
  flex-direction: column; /* 세로 줄로 구성 */
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.masonry-wrapper::-webkit-scrollbar {
  display: none;
}

.masonry-row {
  display: flex;
  flex-direction: row; /* 이미지들을 옆으로 나열 */
  gap: 10px;
  min-height: 200px;
}

.masonry-row img {
  height: 100%;
  border-radius: 8px;
  display: block;
  object-fit: cover;
}

.gallery-masonry{
  overflow: hidden;
}

.masonry a{
  display: block;
}
.swiper .swiper-pagination-bullet-active{
  background: var(--card-theme-highlight-color);
}
.swiper .swiper-pagination-bullet{
  background: rgba(0,0,0,0,0.5);
}

.swiper.guestbookSwiper{
  height: auto;
}

.swiper.guestbookSwiper .comment-item{
  margin-left: 5px;
  margin-right: 5px;
}
/* 갤러리:e */

/* 인터뷰:s */
.card-interview .interview-content{
  padding-top: 40px;
  padding-left: 20px;
  padding-right: 20px;
}

.card-interview .interview-content .question{
  font-size: var(--font-size-14);
  padding-bottom: 15px;
  padding-top: 15px;
  color: var(--card-theme-highlight-color);
  font-weight: 600;
  border-bottom: 1px solid #eaeaea;
  text-align: center;
  margin-bottom: 20px;
}

.card-interview .interview-image{
  margin-bottom: 20px;
}

.card-interview .interview-image img{
  border-radius: 10px;
}
.card-interview .interview-content .answer{
  font-size: var(--font-size-14);
  color: var(--card-theme-content-color);
  font-weight: 400;
  margin-bottom: 20px;
  line-height: var(--font-size-25);
  text-align: center;
}

.card-interview .interview-content .answer span{
  color: var(--card-theme-highlight-color);
  font-weight: 500;
}
/* 인터뷰:s */

/* 동영상:s */
.card-video{
  margin-left: 0;
  margin-right: 0;
}
/* 동영상:e */

/* 타임라인:s */
.timeline-content{
  margin-top: 60px;
  padding-left: 20px;
  padding-right: 20px;
}

.timeline-inner{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.timeline-inner .timeline-item{
  display: flex;
  padding-bottom: 20px;
  position: relative;
}

.timeline-inner .timeline-item > div{
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.timeline-inner .timeline-item .timeline-data h4{
  font-size: var(--font-size-12);
  font-weight: 300;
  color: var(--card-theme-content-color);
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.timeline-inner .timeline-item .timeline-data h3{
  font-size: var(--font-size-14);
  color: #333;
  font-weight: 600;
}

.timeline-inner .timeline-item .timeline-data p{
  margin-top: 5px;
  font-size: var(--font-size-12);
  color: var(--card-theme-content-color);
  line-height: var(--font-size-20);
  text-align: center;
  font-weight: 300;
}

.timeline-inner .timeline-space{
  max-width: 70px;
  min-height: 100%;
}

.timeline-inner .timeline-space:after{
  position: absolute;
  content: '';
  width: 1px;
  height: 100%;
  background: #eaeaea;
  top: 0;
}

.timeline-inner .timeline-space span{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--card-theme-highlight-color);
  z-index: 1;
}

.timeline-inner .timeline-image img{
  border-radius: 10px;
}
/* 타임라인:e */

/* 스토리:s */
.story-content{
  margin-top: 40px;
  padding-left: 20px;
  padding-right: 20px;
}
.story-item{
  margin-bottom: 30px;
}
.story-item .story-image img{
  border-radius: 10px;
}
.story-item .story-description{
  margin-top: 20px;
}
.story-item .story-description h3{
  font-size: var(--font-size-16);
  color: #333;
  text-align: center;
  margin-top: 15px;
  font-weight: 600;
}

.story-item .story-description > div{
  font-size: var(--font-size-14);
  color: var(--card-theme-content-color);
  line-height: var(--font-size-27);
  margin-top: 20px;
  letter-spacing: -0.5px;
  font-weight: 400;
}
/* 스토리:e */

/* 하단인사말:s */
.card-bottom{
  min-height: 400px;
  height: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  justify-items: center;
}

.card-section.card-bottom .bottom-inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.6);
  padding: 30px;
}

.card-section.card-bottom .bottom-inner div{
  text-align: center;
  width: 100%;
  color: rgba(255,255,255,0.8);
  font-size: var(--font-size-14);
  line-height: var(--font-size-27);
  letter-spacing: 0.2px;
}

.card-bottom .bottom-talent{
  padding-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-bottom .bottom-talent span{
  color: #fff;
  font-size: var(--font-size-16);
}

.card-bottom .bottom-talent span.dots{
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  margin-left: 10px;
  margin-right: 10px;
}
/* 하단인사말:e */


.modal-header.bg-white {
  background: #fff;
  border-bottom: 0;
}
.modal-header {
  background: var(--card-theme-button-color);
}

.modal-header .modal-title{
  font-size: var(--font-size-16);
  font-weight: 700;
  color: #fff;
}

.modal-header.bg-white .modal-title{
  color: #333;
}

.modal .alert{
  font-size: var(--font-size-12);
}

.modal .modal-body .modal-bottom{
  display: flex;
  justify-content: center;
}

.modal .modal-body .modal-bottom .btn{
  margin-right: 10px;
}

.modal .modal-body .modal-bottom .btn:last-child{
  margin-right: 0;
}

.btn.btn-outline-primary{
  --bs-btn-color: #434343;
  --bs-btn-border-color: #e0e0e0;
  --bs-btn-bg: #fff;
  --bs-btn-hover: #fff;
  --bs-btn-hover-border-color: #555;
  --bs-btn-active-color: #333;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: var(--card-theme-button-color);
  --bs-btn-font-size: 12px;
  --bs-btn-line-height: 27px;
  padding-top: 0;
  padding-bottom: 0;
  background-color: #fff;
  color: #333;
}

.modal .aggrement h3{
  font-size: var(--font-size-14);
  margin-top: 20px;
}
.modal .aggrement p{
  font-size: var(--font-size-12);
  border: 1px solid #ececec;
  padding: 10px;
  line-height: 23px;
}

.modal .frm input[type=text],
.modal .frm input[type=password],
.modal .frm textarea,
.modal .frm select,
.modal .frm .form-check-label{
  font-size: var(--font-size-12);
}



/* 배경음악:s */
.card-music{
  position: fixed;
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  z-index: 3333;
  max-width: 460px;
  width: 100%;
}

.bap-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  vertical-align: middle;
  outline: 0;
  border: 0;
  transition: 235ms ease
}


.bap-btn-default {
  color: #000;
  text-align: center;
  background: transparent;
}

.bap-btn-default:hover {
  opacity: .8
}

.bap-btn-default .bap-icon {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.bap-btn-default .bap-icon svg {
  display: block;
  width: auto;
  height: 25px;
  margin: 0 auto;
  fill: currentColor
}

@media (min-width:768px) {
  .bap-btn-default .bap-icon svg {
    height: 15px
  }
}

.bap-btn-default .bap-icon-off,
.bap-btn-default .bap-icon-on {
  display: block
}

.bap-btn-bar-animation {
  color: #000;
  background-color: #000
}
/* 배경음악:e */

/* 연락하기:s */
.contact-group{
  padding-left: 20px;
  padding-right: 20px;
}

.contact-group .contact-header{
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 20px;
  text-align: center;
  color: var(--card-theme-highlight-color);
  font-weight: 700;
}

.contact-group .contact-header.contact-header-last{
  margin-top: 20px;
}
.contact-group .contact-item{
  display: flex;
  width: 100%;
  padding: 10px 0;
  align-items: center;
  background: #fafafa;
}

.contact-group .contact-item > div{
  width: 100%;
}

.contact-group .contact-item .person-position{
  max-width: 100px;
  font-size: var(--font-size-12);
  padding-left: 10px;
}

.contact-group .contact-item .person-name{
  font-size: var(--font-size-12);
  font-weight: 700;
}

.contact-group .contact-item .person-btn{
  max-width: 100px;
  text-align: right;
  padding-right: 10px;
}

.contact-group .contact-item .person-btn .btn{
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
/* 연락하기:e */

/* 갤러리:s */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.swiper {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.swiper-gallery-thumb {
  height: 400px;
  width: 100%;
}

.swiper-gallery {
  margin-top: 20px;
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
  overflow-x: auto;
}

.swiper-gallery .swiper-slide {
  min-width: 80px;
  width: 80px;
  height: 100%;
  opacity: 0.4;
}

.swiper-gallery .swiper-slide img{
  min-width: 80px;
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.swiper-gallery .swiper-slide-thumb-active{
  opacity: 1;
}

.swiper .swiper-button-next,
.swiper .swiper-button-prev{
  --swiper-navigation-size: 20px;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 갤러리:e */


.card-share{
  margin-bottom: 0;
}


/* 하객 사진첩(구글 드라이브):s */
.card-guest-snap{
  text-align: center;
  padding: 40px 24px;
}
.card-guest-snap .guest-snap-inner{
  max-width: 420px;
  margin: 0 auto;
}
.card-guest-snap .card-description{
  margin: 12px 0 20px;
  line-height: 1.6;
  color: #666;
}
.card-guest-snap .guest-snap-info{
  background: #f7f6f2;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 22px;
  text-align: left;
}
.card-guest-snap .guest-snap-info ul{
  margin: 0;
  padding-left: 18px;
}
.card-guest-snap .guest-snap-info li{
  font-size: 13px;
  color: #666;
  line-height: 1.7;
}
.card-guest-snap .button-wrap{
  margin-top: 8px;
}
.card-guest-snap .btn-guest-snap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 220px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 500;
}
.card-guest-snap .btn-guest-snap .bi{
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>") no-repeat center / contain;
}
/* 하객 사진첩:e */


/* 애니메이션:s */
.animation-wave{
  position: absolute;
  z-index: 100;
  width: 100%;
  display: none;
}

.animation-wave.active{
  display: block;
}

.animation-wave.top{
  top: 0;
  transform: rotate(180deg);
}

.animation-wave.bottom{
  bottom: 0;
}
.waves {
  position:relative;
  width: 100%;
  margin-bottom:-7px; /*Fix for safari gap*/
  height:70px;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/* 애니메이션:e */

/* 상하흐림:s */
.card-header-gradient{
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0.25) 25%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.75) 75%,
    rgba(255, 255, 255, 1) 100%
  );
  display: none;
}

.card-header-gradient.gradient-dark{
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0.25) 25%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.75) 75%,
    rgba(0, 0, 0, 1) 100%
  );
  display: none;
}

.card-header-gradient.active{
  display: block;
}

.card-header-gradient.bottom{
  bottom: 0;
}

.header-fullscreen .card-header-gradient.bottom{
  bottom: 0;
}

.card-header-gradient.top{
  top: 0;
  transform: rotate(180deg);)
}

.card-header-gradient.active{
  display: block;
}

/* 상하흐림:e */

/* 메인 애니메이션:s */
.card-animation-canvas{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 101;
  display: none;
}

.card-animation-canvas canvas{
  width: 100%;
  height: 100%;
}

.card-animation-canvas.active{
  display: block;
}
/* 메인 애니메이션:e */

/* 배경음악:s */
.mbMiniPlayer{
  position: fixed;
  z-index: 1000;
  width: 100%;
  max-width: 460px;
  top: 0;
  display: none;
}

.mbMiniPlayer.active{
  display: block;
}

.mbMiniPlayer .playerTable{
  display: flex;
  justify-content: end;
  padding: 20px;
}

.mbMiniPlayer .playerTable span{
  z-index: 1;
}
.mbMiniPlayer .playerTable span.map_volume{
  display: block;
  width: 25px;
  height: 25px;
  background: url('../images/audio-volume.svg');
  background-size: 100%;
  margin-right: 5px;
}

.mbMiniPlayer .playerTable span.map_volume.mute{
  display: block;
  width: 25px;
  height: 25px;
  background: url('../images/audio-mute.svg');
  background-size: 100%;
}

.mbMiniPlayer .playerTable span.map_play{
  display: block;
  width: 25px;
  height: 25px;
  background: url('../images/audio-play.svg');
  background-size: 100%;
}

.mbMiniPlayer.jp-state-playing .playerTable span.map_play{
  background: url('../images/audio-stop.svg');
  width: 25px;
  height: 25px;
  background-size: 100%;
}

/* 배경음악:e */

/* 인트로:s */
.loading{
  position: fixed;
  width: 100%;
  max-width: 460px;
  height: 100%;
  top: 0;
  background: #fff;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
  left: 50%;
  transform: translate(-50%, 0);
}

.loading.active{
  display: flex;
  opacity: 1;
  transition: opacity 0.8s ease-out;
}

.loading.active.fadeout{
  opacity: 0;
}


.loading div{
  text-align: center;
}

.loading .loading-content{
  flex-direction: column;
  display: flex;
}

.loading-subtitle{
  font-size: var(--font-size-20);
  color: var(--card-theme-subtitle-color);
  letter-spacing: -1px;
  margin-bottom: 25px;
}

.loading-title{
  font-size: var(--font-size-30);
  font-weight: 900;
  line-height: var(--font-size-25);
  margin: 0;
  margin-bottom: 25px;
  display: inline-block;
  white-space: pre-line;
  color: #000;
  letter-spacing: -0.5px;
}

.loading-title span{
  color: var(--card-theme-highlight-color);
}

.loading-date{
  font-size: var(--font-size-16);
  color: var(--card-theme-content-color);
  font-weight: 300;
}

.typer-target > span {
  font-weight: 300;
}


.loading.intro4{
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}
.loading.intro4 .loading-subtitle{
  color: rgba(0,0,0,0.7);
}
.loading.intro4 .loading-title{
  color: #000;
}
.loading.intro4 .loading-date{
  color: rgba(0,0,0,0.7);
}

.loading.intro3{
  background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
.loading.intro3 .loading-subtitle{
  color: rgba(0,0,0,0.7);
}
.loading.intro3 .loading-title{
  color: #000;
}
.loading.intro3 .loading-date{
  color: rgba(0,0,0,0.7);
}

.loading.intro2{
  background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
}
.loading.intro2 .loading-subtitle{
  color: rgba(0,0,0,0.5);
}
.loading.intro2 .loading-title{
  color: #222;
}
.loading.intro2 .loading-date{
  color: rgba(0,0,0,0.6);
}

.loading.intro1{
  background-image: linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%);
}

.loading.intro1 .loading-subtitle{
  color: rgba(255,255,255,0.7);
}
.loading.intro1 .loading-title{
  color: #000;
}
.loading.intro1 .loading-date{
  color: rgba(0,0,0,0.6);
}

/* ───── 청첩장 신규 인트로 (intro5/6/7) — 원본 레퍼런스 기반 ───── */

/* intro5 — Haunted Text (jquery.blast + velocity 애니메이션) */
.loading.intro5{
  background-color:#11172f;
  background-image:radial-gradient(50% 50%, circle cover, #11172f 50%, rgba(0,0,0,0.5));
  color:#fff;
  font-family:"Playfair Display","Noto Serif KR",serif;
  line-height:1.6;
}
.loading.intro5 .haunted-text{
  position:relative;
  width:90%;
  max-width:1060px;
  margin:0;
  font-size:1.6rem;
  line-height:1.4;
  text-align:center;
  visibility:hidden;
  padding:0 1em;
}
.loading.intro5 .haunted-text .blast{ will-change:opacity, filter; }
@media screen and (max-width:1024px){
  .loading.intro5 .haunted-text{ font-size:1.4em; max-width:680px; }
}
@media screen and (max-width:680px){
  .loading.intro5 .haunted-text{ font-size:1.2em; max-width:500px; }
}
@media screen and (max-width:500px){
  .loading.intro5 .haunted-text{ font-size:1em; max-width:500px; }
}

/* intro6 — Handwriting (opentype.js 로 SVG 획 그리기) */
.loading.intro6{
  background:#000;
  color:#fff;
  overflow:hidden;
}
.loading.intro6 .handwriting-container{
  width:80%;
  height:100%;
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
}
.loading.intro6 .handwriting-container svg{
  display:block;
  margin:0 auto;
  max-width:100%;
}

/* intro7 — Pattern Mosaic (Type1.png 배경 + 41 조각 컬러 패턴) */
.loading.intro7{
  background:#190a0f0a;
  background-image:url('../images/intro/Type1.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  position:fixed;
}
.loading.intro7 .intro7-dim{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:#000000cf;
  z-index:0;
  backdrop-filter:blur(4px);
}
.loading.intro7 .intro7-ui{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  transform:rotateZ(-4deg);
  z-index:1;
}
.loading.intro7 .intro7-ui .text{
  position:absolute;
  top:50%;
  left:50%;
  font-size:3rem;
  color:#fff;
  line-height:1.05;
  font-family:"Anton","Impact",sans-serif;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  letter-spacing:0.5rem;
  overflow:hidden;
  white-space:normal;
  text-align:center;
}
@media (min-width:600px){
  .loading.intro7 .intro7-ui .text{
    font-size:5rem;
    letter-spacing:1rem;
  }
}
.loading.intro7 .intro7-ui .text:nth-child(1)  { color:#692869; clip-path:polygon(-1% -1%, 9% -12%, 10% 52%, -1% 62%); filter:blur(3px); }
.loading.intro7 .intro7-ui .text:nth-child(1) .text_inner1 { animation:intro7-vertical 1175ms 53ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(1) .text_inner2 { animation:intro7-horizontal 1343ms 71ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(2)  { color:#5428f4; clip-path:polygon(4% -2%, 13% -3%, 12% 55%, 3% 76%); filter:blur(2px); }
.loading.intro7 .intro7-ui .text:nth-child(2) .text_inner1 { animation:intro7-vertical 1062ms 71ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(2) .text_inner2 { animation:intro7-horizontal 1262ms 5ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(3)  { color:#782860; clip-path:polygon(8% -3%, 20% -18%, 19% 52%, 8% 67%); }
.loading.intro7 .intro7-ui .text:nth-child(3) .text_inner1 { animation:intro7-vertical 1540ms 30ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(3) .text_inner2 { animation:intro7-horizontal 1144ms 39ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(4)  { color:#8e28a5; clip-path:polygon(14% -3%, 23% -17%, 22% 52%, 14% 52%); }
.loading.intro7 .intro7-ui .text:nth-child(4) .text_inner1 { animation:intro7-vertical 843ms 79ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(4) .text_inner2 { animation:intro7-horizontal 793ms 40ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(5)  { color:#6d28ec; clip-path:polygon(19% -3%, 28% -3%, 27% 55%, 19% 66%); filter:blur(1px); }
.loading.intro7 .intro7-ui .text:nth-child(5) .text_inner1 { animation:intro7-vertical 1510ms 51ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(5) .text_inner2 { animation:intro7-horizontal 1412ms 98ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(6)  { color:#942890; clip-path:polygon(23% -5%, 35% -30%, 32% 51%, 24% 80%); }
.loading.intro7 .intro7-ui .text:nth-child(6) .text_inner1 { animation:intro7-vertical 1228ms 72ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(6) .text_inner2 { animation:intro7-horizontal 1595ms 4ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(7)  { color:#fd287f; clip-path:polygon(29% -2%, 38% -18%, 40% 53%, 28% 65%); }
.loading.intro7 .intro7-ui .text:nth-child(7) .text_inner1 { animation:intro7-vertical 1699ms 76ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(7) .text_inner2 { animation:intro7-horizontal 927ms 33ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(8)  { color:#dd28f3; clip-path:polygon(34% -3%, 41% -10%, 42% 52%, 34% 52%); filter:blur(9px); }
.loading.intro7 .intro7-ui .text:nth-child(8) .text_inner1 { animation:intro7-vertical 1297ms 59ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(8) .text_inner2 { animation:intro7-horizontal 1288ms 53ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(9)  { color:#c8286e; clip-path:polygon(39% -3%, 46% -4%, 50% 51%, 38% 75%); }
.loading.intro7 .intro7-ui .text:nth-child(9) .text_inner1 { animation:intro7-vertical 793ms 47ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(9) .text_inner2 { animation:intro7-horizontal 822ms 90ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(10) { color:#8a28e6; clip-path:polygon(43% -1%, 52% -14%, 54% 54%, 44% 65%); }
.loading.intro7 .intro7-ui .text:nth-child(10) .text_inner1 { animation:intro7-vertical 1422ms 67ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(10) .text_inner2 { animation:intro7-horizontal 1184ms 96ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(11) { color:#732863; clip-path:polygon(48% -2%, 59% -20%, 58% 51%, 49% 59%); }
.loading.intro7 .intro7-ui .text:nth-child(11) .text_inner1 { animation:intro7-vertical 1125ms 99ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(11) .text_inner2 { animation:intro7-horizontal 1136ms 87ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(12) { color:#4228dd; clip-path:polygon(54% -3%, 61% -13%, 65% 54%, 54% 54%); filter:blur(8px); }
.loading.intro7 .intro7-ui .text:nth-child(12) .text_inner1 { animation:intro7-vertical 857ms 85ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(12) .text_inner2 { animation:intro7-horizontal 1104ms 28ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(13) { color:#71285b; clip-path:polygon(59% -1%, 68% -18%, 69% 53%, 58% 71%); filter:blur(2px); }
.loading.intro7 .intro7-ui .text:nth-child(13) .text_inner1 { animation:intro7-vertical 1369ms 3ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(13) .text_inner2 { animation:intro7-horizontal 1276ms 62ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(14) { color:#a528e5; clip-path:polygon(63% -2%, 73% -17%, 73% 55%, 64% 78%); filter:blur(5px); }
.loading.intro7 .intro7-ui .text:nth-child(14) .text_inner1 { animation:intro7-vertical 1084ms 68ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(14) .text_inner2 { animation:intro7-horizontal 812ms 32ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(15) { color:#4e2889; clip-path:polygon(68% -3%, 80% -2%, 79% 51%, 68% 64%); filter:blur(1px); }
.loading.intro7 .intro7-ui .text:nth-child(15) .text_inner1 { animation:intro7-vertical 1308ms 63ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(15) .text_inner2 { animation:intro7-horizontal 952ms 52ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(16) { color:#ff28b4; clip-path:polygon(73% -5%, 81% -2%, 81% 53%, 74% 52%); filter:blur(4px); }
.loading.intro7 .intro7-ui .text:nth-child(16) .text_inner1 { animation:intro7-vertical 1272ms 91ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(16) .text_inner2 { animation:intro7-horizontal 985ms 93ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(17) { color:#8828f4; clip-path:polygon(79% -2%, 89% -1%, 87% 51%, 78% 60%); }
.loading.intro7 .intro7-ui .text:nth-child(17) .text_inner1 { animation:intro7-vertical 1126ms 39ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(17) .text_inner2 { animation:intro7-horizontal 853ms 72ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(18) { color:#d8287c; clip-path:polygon(84% -2%, 94% -23%, 91% 55%, 83% 63%); }
.loading.intro7 .intro7-ui .text:nth-child(18) .text_inner1 { animation:intro7-vertical 1426ms 79ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(18) .text_inner2 { animation:intro7-horizontal 1624ms 1ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(19) { color:#5b2893; clip-path:polygon(88% -4%, 97% -18%, 97% 54%, 89% 63%); }
.loading.intro7 .intro7-ui .text:nth-child(19) .text_inner1 { animation:intro7-vertical 712ms 47ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(19) .text_inner2 { animation:intro7-horizontal 1103ms 58ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(20) { color:#a328b5; clip-path:polygon(94% -5%, 103% -19%, 104% 52%, 94% 52%); filter:blur(9px); }
.loading.intro7 .intro7-ui .text:nth-child(20) .text_inner1 { animation:intro7-vertical 879ms 20ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(20) .text_inner2 { animation:intro7-horizontal 1700ms 95ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(21) { color:#a22846; clip-path:polygon(-1% 45%, 8% 49%, 8% 102%, -2% 130%); filter:blur(8px); }
.loading.intro7 .intro7-ui .text:nth-child(21) .text_inner1 { animation:intro7-vertical 1700ms 35ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(21) .text_inner2 { animation:intro7-horizontal 1112ms 1ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(22) { color:#59288c; clip-path:polygon(4% 47%, 14% 31%, 15% 101%, 4% 108%); }
.loading.intro7 .intro7-ui .text:nth-child(22) .text_inner1 { animation:intro7-vertical 1303ms 77ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(22) .text_inner2 { animation:intro7-horizontal 1042ms 84ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(23) { color:#e628c1; clip-path:polygon(8% 49%, 16% 24%, 17% 101%, 8% 106%); }
.loading.intro7 .intro7-ui .text:nth-child(23) .text_inner1 { animation:intro7-vertical 1372ms 97ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(23) .text_inner2 { animation:intro7-horizontal 965ms 22ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(24) { color:#732860; clip-path:polygon(14% 45%, 25% 31%, 21% 105%, 14% 101%); filter:blur(6px); }
.loading.intro7 .intro7-ui .text:nth-child(24) .text_inner1 { animation:intro7-vertical 725ms 91ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(24) .text_inner2 { animation:intro7-horizontal 1307ms 74ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(25) { color:#7e284e; clip-path:polygon(19% 49%, 30% 42%, 29% 102%, 18% 113%); filter:blur(2px); }
.loading.intro7 .intro7-ui .text:nth-child(25) .text_inner1 { animation:intro7-vertical 1374ms 92ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(25) .text_inner2 { animation:intro7-horizontal 1498ms 51ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(26) { color:#4b284d; clip-path:polygon(23% 46%, 34% 42%, 35% 105%, 23% 105%); }
.loading.intro7 .intro7-ui .text:nth-child(26) .text_inner1 { animation:intro7-vertical 998ms 81ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(26) .text_inner2 { animation:intro7-horizontal 1558ms 15ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(27) { color:#fe289a; clip-path:polygon(29% 45%, 38% 42%, 37% 101%, 29% 101%); }
.loading.intro7 .intro7-ui .text:nth-child(27) .text_inner1 { animation:intro7-vertical 1373ms 37ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(27) .text_inner2 { animation:intro7-horizontal 899ms 17ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(28) { color:#9e2885; clip-path:polygon(34% 45%, 41% 22%, 44% 103%, 34% 104%); filter:blur(10px); }
.loading.intro7 .intro7-ui .text:nth-child(28) .text_inner1 { animation:intro7-vertical 907ms 73ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(28) .text_inner2 { animation:intro7-horizontal 1335ms 87ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(29) { color:#d728f4; clip-path:polygon(38% 47%, 48% 49%, 48% 103%, 38% 121%); }
.loading.intro7 .intro7-ui .text:nth-child(29) .text_inner1 { animation:intro7-vertical 1215ms 66ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(29) .text_inner2 { animation:intro7-horizontal 1534ms 65ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(30) { color:#e728fa; clip-path:polygon(44% 45%, 51% 27%, 53% 103%, 44% 107%); filter:blur(9px); }
.loading.intro7 .intro7-ui .text:nth-child(30) .text_inner1 { animation:intro7-vertical 1413ms 52ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(30) .text_inner2 { animation:intro7-horizontal 1551ms 90ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(31) { color:#7d2871; clip-path:polygon(49% 46%, 57% 31%, 57% 105%, 48% 110%); filter:blur(8px); }
.loading.intro7 .intro7-ui .text:nth-child(31) .text_inner1 { animation:intro7-vertical 1129ms 96ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(31) .text_inner2 { animation:intro7-horizontal 1265ms 63ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(32) { color:#86287c; clip-path:polygon(53% 45%, 63% 47%, 64% 101%, 54% 120%); filter:blur(6px); }
.loading.intro7 .intro7-ui .text:nth-child(32) .text_inner1 { animation:intro7-vertical 1587ms 29ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(32) .text_inner2 { animation:intro7-horizontal 1126ms 82ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(33) { color:#6a285f; clip-path:polygon(58% 46%, 66% 29%, 68% 103%, 58% 118%); filter:blur(4px); }
.loading.intro7 .intro7-ui .text:nth-child(33) .text_inner1 { animation:intro7-vertical 911ms 18ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(33) .text_inner2 { animation:intro7-horizontal 1626ms 21ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(34) { color:#b428e5; clip-path:polygon(63% 47%, 71% 34%, 73% 101%, 64% 116%); filter:blur(2px); }
.loading.intro7 .intro7-ui .text:nth-child(34) .text_inner1 { animation:intro7-vertical 1286ms 63ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(34) .text_inner2 { animation:intro7-horizontal 1123ms 64ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(35) { color:#f128fb; clip-path:polygon(69% 47%, 77% 24%, 80% 101%, 69% 125%); }
.loading.intro7 .intro7-ui .text:nth-child(35) .text_inner1 { animation:intro7-vertical 1196ms 86ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(35) .text_inner2 { animation:intro7-horizontal 1351ms 52ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(36) { color:#cc283e; clip-path:polygon(74% 49%, 84% 33%, 81% 104%, 73% 103%); }
.loading.intro7 .intro7-ui .text:nth-child(36) .text_inner1 { animation:intro7-vertical 926ms 20ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(36) .text_inner2 { animation:intro7-horizontal 1272ms 100ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(37) { color:#fe2885; clip-path:polygon(78% 47%, 90% 41%, 89% 103%, 79% 122%); filter:blur(1px); }
.loading.intro7 .intro7-ui .text:nth-child(37) .text_inner1 { animation:intro7-vertical 1195ms 44ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(37) .text_inner2 { animation:intro7-horizontal 1105ms 70ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(38) { color:#612846; clip-path:polygon(84% 49%, 95% 21%, 93% 101%, 83% 104%); filter:blur(3px); }
.loading.intro7 .intro7-ui .text:nth-child(38) .text_inner1 { animation:intro7-vertical 1119ms 87ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(38) .text_inner2 { animation:intro7-horizontal 1447ms 38ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(39) { color:#c02892; clip-path:polygon(88% 46%, 96% 34%, 97% 105%, 89% 117%); filter:blur(10px); }
.loading.intro7 .intro7-ui .text:nth-child(39) .text_inner1 { animation:intro7-vertical 1500ms 82ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(39) .text_inner2 { animation:intro7-horizontal 1600ms 94ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(40) { color:#bf28c3; clip-path:polygon(94% 48%, 104% 25%, 103% 101%, 93% 111%); filter:blur(8px); }
.loading.intro7 .intro7-ui .text:nth-child(40) .text_inner1 { animation:intro7-vertical 1678ms 24ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(40) .text_inner2 { animation:intro7-horizontal 1021ms 9ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(41) { color:#c628d5; clip-path:polygon(-2% 98%, 8% 82%, 6% 153%, -2% 170%); }
.loading.intro7 .intro7-ui .text:nth-child(41) .text_inner1 { animation:intro7-vertical 1140ms 82ms ease-in-out infinite alternate; }
.loading.intro7 .intro7-ui .text:nth-child(41) .text_inner2 { animation:intro7-horizontal 1362ms 21ms ease-in-out infinite alternate; }

@keyframes intro7-horizontal{
  0%   { transform:translateX(6px); }
  100% { transform:translateX(-6px); }
}
@keyframes intro7-vertical{
  0%   { transform:translateY(3px); }
  100% { transform:translateY(-3px); }
}

/* intro11 — Stroke Drawing (베이지 배경 + 검은 손글씨, paths.json 기반 SVG 획 그리기) */
.loading.intro11{
  background:#fdf9f5;
  color:#1a1a1a;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.loading.intro11 .stroke-svg-wrap{
  width:90%;
  max-width:600px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.loading.intro11 .stroke-svg-wrap svg{
  width:100%;
  height:auto;
  display:block;
}
.loading.intro11 .letter-path{
  fill:none;
  stroke:#1a1a1a;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1;
}
@keyframes intro11-draw{
  to { stroke-dashoffset:0; }
}

/* ───── 돌잔치 신규 인트로 (intro8/9/10) — 원본 레퍼런스 기반 ───── */

/* intro8 — Staggered Slice (mast 구조, Spanizer + slide animations)
   [0724-7] 글자 크기 vw → cqw: .loading은 카드 폭(max 460px)으로 제한되는데
   vw는 브라우저 전체 폭 기준이라 넓은 화면에서 완성본 글자가 폭발(한 글자씩 세로 줄바꿈)하던 문제 */
.loading.intro8{
  background:transparent;
  overflow:hidden;
  container-type:inline-size;
}
.loading.intro8 .mast{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fe6513;
  background-color:#facdcc;
  transition:opacity 1s ease;
}
.loading.intro8 .mast.mast-fadeout{
  opacity:0;
  pointer-events:none;
}
.loading.intro8 .mast__header{ padding:1em; }
.loading.intro8 .mast__title{
  margin:0.15em auto;
  padding:0 0.5em;
  font-family:"Shrikhand","Georgia",serif;
  font-size:calc(100% + 5.5cqw);
  white-space:nowrap;
  color:#fe6513;
  text-shadow:1px 1px 0px rgba(255,255,255,0.5);
}
.loading.intro8 .mast__text{
  font-size:1em;
  font-family:"Fredoka","Fredoka One","Arial",sans-serif;
  text-shadow:1px 1px 0px rgba(255,255,255,0.4);
}
.loading.intro8 .mast__icon{
  display:block;
  font-size:2.5em;
  filter:hue-rotate(414deg) brightness(1.15) saturate(1.4);
  text-shadow:1px 1px 0px rgba(255,255,255,0.6);
}
.loading.intro8 .animate .mast__title{ overflow-y:hidden; }
.loading.intro8 .animate .mast__title > *{
  display:inline-block;
  min-width:0.1em;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  animation:intro8-slide-up 0.6s cubic-bezier(0.19,0.9,0.9,1) both;
}
.loading.intro8 .animate .mast__title > *:nth-child(1)  { animation-delay:0.1s; }
.loading.intro8 .animate .mast__title > *:nth-child(2)  { animation-delay:0.2s; }
.loading.intro8 .animate .mast__title > *:nth-child(3)  { animation-delay:0.3s; }
.loading.intro8 .animate .mast__title > *:nth-child(4)  { animation-delay:0.4s; }
.loading.intro8 .animate .mast__title > *:nth-child(5)  { animation-delay:0.5s; }
.loading.intro8 .animate .mast__title > *:nth-child(6)  { animation-delay:0.6s; }
.loading.intro8 .animate .mast__title > *:nth-child(7)  { animation-delay:0.7s; }
.loading.intro8 .animate .mast__title > *:nth-child(8)  { animation-delay:0.8s; }
.loading.intro8 .animate .mast__title > *:nth-child(9)  { animation-delay:0.9s; }
.loading.intro8 .animate .mast__title > *:nth-child(10) { animation-delay:1s; }
.loading.intro8 .animate .mast__title > *:nth-child(11) { animation-delay:1.1s; }
.loading.intro8 .animate .mast__title > *:nth-child(12) { animation-delay:1.2s; }
.loading.intro8 .animate .mast__title > *:nth-child(13) { animation-delay:1.3s; }
.loading.intro8 .animate .mast__title > *:nth-child(14) { animation-delay:1.4s; }
.loading.intro8 .animate .mast__title > *:nth-child(15) { animation-delay:1.5s; }
.loading.intro8 .animate .mast__text > *{
  display:inline-block;
  min-width:0.25em;
  animation:intro8-slide-right 0.6s cubic-bezier(0.19,0.9,0.9,1) both;
}
.loading.intro8 .animate .mast__text > *:nth-child(n)  { animation-delay:calc((var(--n,1)) * 0.025s); }
.loading.intro8 .animate .mast__text > *:nth-child(1)  { animation-delay:0.025s; }
.loading.intro8 .animate .mast__text > *:nth-child(2)  { animation-delay:0.05s; }
.loading.intro8 .animate .mast__text > *:nth-child(3)  { animation-delay:0.075s; }
.loading.intro8 .animate .mast__text > *:nth-child(4)  { animation-delay:0.1s; }
.loading.intro8 .animate .mast__text > *:nth-child(5)  { animation-delay:0.125s; }
.loading.intro8 .animate .mast__text > *:nth-child(6)  { animation-delay:0.15s; }
.loading.intro8 .animate .mast__text > *:nth-child(7)  { animation-delay:0.175s; }
.loading.intro8 .animate .mast__text > *:nth-child(8)  { animation-delay:0.2s; }
.loading.intro8 .animate .mast__text > *:nth-child(9)  { animation-delay:0.225s; }
.loading.intro8 .animate .mast__text > *:nth-child(10) { animation-delay:0.25s; }
.loading.intro8 .animate .mast__text > *:nth-child(11) { animation-delay:0.275s; }
.loading.intro8 .animate .mast__text > *:nth-child(12) { animation-delay:0.3s; }
.loading.intro8 .animate .mast__text > *:nth-child(13) { animation-delay:0.325s; }
.loading.intro8 .animate .mast__text > *:nth-child(14) { animation-delay:0.35s; }
.loading.intro8 .animate .mast__text > *:nth-child(15) { animation-delay:0.375s; }
.loading.intro8 .animate .mast__text > *:nth-child(16) { animation-delay:0.4s; }
.loading.intro8 .animate .mast__text > *:nth-child(17) { animation-delay:0.425s; }
.loading.intro8 .animate .mast__text > *:nth-child(18) { animation-delay:0.45s; }
.loading.intro8 .animate .mast__text > *:nth-child(19) { animation-delay:0.475s; }
.loading.intro8 .animate .mast__text > *:nth-child(20) { animation-delay:0.5s; }
.loading.intro8 .animate .mast__text > *:nth-child(21) { animation-delay:0.525s; }
.loading.intro8 .animate .mast__text > *:nth-child(22) { animation-delay:0.55s; }
.loading.intro8 .animate .mast__text > *:nth-child(23) { animation-delay:0.575s; }
.loading.intro8 .animate .mast__text > *:nth-child(24) { animation-delay:0.6s; }
.loading.intro8 .animate .mast__text > *:nth-child(25) { animation-delay:0.625s; }
.loading.intro8 .animate .mast__text > *:nth-child(26) { animation-delay:0.65s; }
.loading.intro8 .animate .mast__text > *:nth-child(27) { animation-delay:0.675s; }
.loading.intro8 .animate .mast__text > *:nth-child(28) { animation-delay:0.7s; }
.loading.intro8 .animate .mast__text > *:nth-child(29) { animation-delay:0.725s; }
.loading.intro8 .animate .mast__text > *:nth-child(30) { animation-delay:0.75s; }
.loading.intro8 .animate .mast__text > *:nth-child(31) { animation-delay:0.775s; }
.loading.intro8 .animate .mast__text > *:nth-child(32) { animation-delay:0.8s; }
.loading.intro8 .animate .mast__text > *:nth-child(33) { animation-delay:0.825s; }
.loading.intro8 .animate .mast__text > *:nth-child(34) { animation-delay:0.85s; }
.loading.intro8 .animate .mast__text > *:nth-child(35) { animation-delay:0.875s; }
.loading.intro8 .animate .mast__text > *:nth-child(36) { animation-delay:0.9s; }
.loading.intro8 .animate .mast__text > *:nth-child(37) { animation-delay:0.925s; }
.loading.intro8 .animate .mast__text > *:nth-child(38) { animation-delay:0.95s; }
.loading.intro8 .animate .mast__text > *:nth-child(39) { animation-delay:0.975s; }
.loading.intro8 .animate .mast__text > *:nth-child(40) { animation-delay:1s; }
.loading.intro8 .animate .mast__text > *:nth-child(41) { animation-delay:1.025s; }
.loading.intro8 .animate .mast__text > *:nth-child(42) { animation-delay:1.05s; }
.loading.intro8 .animate .mast__text > *:nth-child(43) { animation-delay:1.075s; }
.loading.intro8 .animate .mast__text > *:nth-child(44) { animation-delay:1.1s; }
.loading.intro8 .animate .mast__text > *:nth-child(45) { animation-delay:1.125s; }
.loading.intro8 .animate .mast__text > *:nth-child(46) { animation-delay:1.15s; }
.loading.intro8 .animate .mast__text > *:nth-child(47) { animation-delay:1.175s; }
.loading.intro8 .animate .mast__text > *:nth-child(48) { animation-delay:1.2s; }
.loading.intro8 .animate .mast__text > *:nth-child(49) { animation-delay:1.225s; }
.loading.intro8 .animate .mast__text > *:nth-child(50) { animation-delay:1.25s; }
.loading.intro8 .animate .mast__icon{
  animation:intro8-shake-it 1.5s cubic-bezier(0.19,0.9,0.9,1) both;
}
@keyframes intro8-slide-up{
  0%   { opacity:0; transform:translate3d(0,100%,0); }
  80%  { opacity:1; }
  100% { transform:translate3d(0,0,0); }
}
@keyframes intro8-slide-right{
  0%   { opacity:0; transform:translate3d(-2em,0,0); }
  100% { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes intro8-shake-it{
  0%, 100% { transform:rotate(0deg); }
  10%, 20%, 30%, 40%, 50% { transform:rotate(-6deg); }
  15%, 25%, 35%, 45%, 55% { transform:rotate(6deg); }
  60%, 70%, 80%, 90% { transform:rotate(-3deg); }
  65%, 75%, 85%, 95% { transform:rotate(3deg); }
}

/* intro9 — Milky (베이지 그라데이션 + 우유빛 글자) — 원본 그대로 */
.loading.intro9{
  background:linear-gradient(to bottom, #ece4d9 0%, #e9dfd1 100%);
}
.loading.intro9 .milky{
  font-family:"Arial Rounded MT Bold","Helvetica Rounded","Arial",sans-serif;
  text-transform:uppercase;
  display:block;
  font-size:3em;
  color:#f1ebe5;
  text-shadow:0 8px 9px #c4b59d, 0 -2px 1px #fff;
  font-weight:bold;
  letter-spacing:-4px;
  text-align:center;
  line-height:1.05;
}
.loading.intro9 .milky .char{
  display:inline-block;
  opacity:0;
  animation:milky-reveal 0.5s ease forwards;
}
@keyframes milky-reveal{
  0%   { opacity:0; transform:translateY(0); }
  40%  { opacity:0.4; transform:translateY(-5px); }
  100% { opacity:1; transform:translateY(0); }
}

/* intro10 — Elegant 한글 (다크/골드, 세로선 + 슬라이드업) — 원본 그대로 */
.loading.intro10{
  background:#1E1610;
  color:#F5EDD8;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-family:"Noto Serif KR",serif;
}
.loading.intro10 .intro-ornament{
  width:1px;
  background:#B8924A;
  height:0;
  animation:intro10-grow 0.9s cubic-bezier(0.4,0,0.2,1) 0.3s forwards;
  margin-bottom:36px;
  opacity:0.7;
}
.loading.intro10 .intro-ornament.bottom{
  margin-bottom:0;
  margin-top:36px;
  animation-delay:2.8s;
}
@keyframes intro10-grow{
  from { height:0; opacity:0; }
  to   { height:60px; opacity:0.7; }
}
.loading.intro10 .intro-line{
  overflow:hidden;
  text-align:center;
}
.loading.intro10 .intro-line span{
  display:block;
  transform:translateY(100%);
  opacity:0;
}
.loading.intro10 .intro-sub{
  font-family:"Cormorant Garamond","Noto Serif KR",serif;
  font-style:italic;
  font-size:clamp(13px,2vw,16px);
  color:#D4AC6A;
  letter-spacing:0.25em;
  margin-bottom:20px;
  opacity:0;
  animation:intro10-fade 0.9s ease 0.6s forwards;
}
.loading.intro10 .intro-name{
  font-size:clamp(30px,6vw,54px);
  font-weight:500;
  color:#FFFFFF;
  letter-spacing:0.22em;
  animation:intro10-slide 0.85s cubic-bezier(0.4,0,0.2,1) 1.1s forwards;
}
.loading.intro10 .intro-main{
  font-size:clamp(22px,4vw,36px);
  font-weight:400;
  color:#F5EDD8;
  letter-spacing:0.18em;
  line-height:2;
  animation:intro10-slide 0.85s cubic-bezier(0.4,0,0.2,1) 1.55s forwards;
  margin-bottom:4px;
}
.loading.intro10 .intro-desc{
  font-size:clamp(14px,2.2vw,18px);
  font-weight:300;
  color:#C8B89A;
  letter-spacing:0.2em;
  animation:intro10-slide 0.85s cubic-bezier(0.4,0,0.2,1) 1.95s forwards;
  margin-top:4px;
}
@keyframes intro10-fade{
  to { opacity:1; }
}
@keyframes intro10-slide{
  from { transform:translateY(100%); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
/* 인트로:e */

/* 사용기한:s */
.empty-wrapper{
  position: relative;
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-align: center;
  color: #555;
}

.empty-wrapper .logo{
  margin-bottom: 20px;
}

.empty-wrapper .logo img{
  border-radius: 10px;
  width: 100px;
  height: 100px;
}
/* 사용기한:e */

/* 서브타이틀:s */
.divider-icon img{
  width: 200px;
}

.baby .divider-icon img{
  width: 150px;
}
.divider-icon{
  display: none;
  justify-content: center;
  margin-bottom: 20px;
}

.divider-icon.active{
  display: flex;
}

.card-subtitle.hidden{
  display: none;
}
/* 서브타이틀:e */

.baby .BABY-NAME{
  font-style: normal;
}

.dday-text.hidden{
  display: none;
}

.qrcode-const .qrcode-info{
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eaeaea;
}
.qrcode-const .qrcode-info ul{
  list-style: none;
  font-size: var(--font-size-14);
  line-height: var(--font-size-25);
  letter-spacing: -1px;
  margin: 0;
  padding: 0;
}
.qrcode-const .qrcode-info ul li{
  padding-left: 20px;
  position: relative;
}
.qrcode-const .qrcode-info ul li:before{
  position: absolute;
  width: 4px;
  height: 4px;
  content:'';
  background: #bbb;
  margin-left: -20px;
  top: 50%;
  border-radius: 50%;
  margin-top: -2px;
}

.qrcode-image{
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eaeaea;
}

.qrcode-const .modal-bottom{
  display: flex;
}

.qrcode-const .modal-bottom button{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.qrcode-const .modal-bottom button:last-child{
  background: #000;
  color: #fff;
}

/* #9 추가: 필수 미입력 필드 하이라이트 */
.frm-card .is-invalid,
.frm-card .is-invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.25) !important;
}

/* #20 추가: 위로가기 버튼이 등록하기 버튼 위에 보이도록 */
@media (max-width: 767px) {
  .scroll-top-btn,
  .btn-scroll-top,
  [class*="scroll-top"],
  [class*="go-top"],
  .btn-top {
    bottom: 80px !important;
  }
}

/* ============================================================
   하객 사진첩 — Drive API 업로드 UI (B-3 방식)
   ============================================================ */
.guest-snap-upload-area {
  width: 100%;
  max-width: 320px;
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: inherit;
}
.guest-snap-upload-area .guest-snap-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.guest-snap-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 16px;
  border: 2px dashed #c7c7c7;
  border-radius: 12px;
  background: #fafafa;
  color: #666;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  text-align: center;
}
.guest-snap-dropzone:hover,
.guest-snap-dropzone.is-dragover {
  border-color: #7c7c7c;
  background: #f0f0f0;
  color: #333;
}
.guest-snap-dropzone .bi-camera {
  font-size: 28px;
  line-height: 1;
}
.guest-snap-dropzone-text {
  font-size: 14px;
  font-weight: 500;
}
.guest-snap-dropzone-sub {
  font-size: 11px;
  color: #999;
}
.guest-snap-selected {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 10px 12px;
}
.guest-snap-count {
  margin: 0 0 8px;
  font-size: 12px;
  color: #555;
}
.guest-snap-count-num { color: #222; }
.guest-snap-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.guest-snap-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f3f3f3;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guest-snap-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.guest-snap-thumb.no-preview {
  font-size: 9px;
  text-align: center;
  padding: 4px;
  word-break: break-all;
  color: #666;
}
.guest-snap-thumb.no-preview img { display: none; }
.guest-snap-thumb-name {
  font-size: 9px;
  line-height: 1.2;
  color: #666;
}
.guest-snap-upload-area .button-wrap {
  margin: 4px 0 0;
}
.guest-snap-upload-area .btn.guest-snap-submit {
  width: 100%;
}
.guest-snap-upload-area .btn.guest-snap-submit:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.guest-snap-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}
.guest-snap-progress-bar {
  position: relative;
  height: 8px;
  background: #eee;
  border-radius: 999px;
  overflow: hidden;
}
.guest-snap-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #9ec5ff, #4a90e2);
  border-radius: 999px;
  transition: width .15s ease-out;
}
.guest-snap-progress-text {
  font-size: 11px;
  color: #666;
  text-align: center;
}
.guest-snap-message {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-line;
}
.guest-snap-message--ok {
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #c8e6c9;
}
.guest-snap-message--err {
  background: #ffebee;
  color: #b71c1c;
  border: 1px solid #ffcdd2;
}
.guest-snap-message--warn {
  background: #fff8e1;
  color: #8d6e00;
  border: 1px solid #ffe082;
}