/* ============================================================
 * 테마 14 (테스트) - 피그마 시안3 기반 (mo / node 238:3695)
 * - invitation_test.css 뒤에 로드되어 테마14 관련 규칙을 오버라이드한다
 * - 운영 전환 시 이 파일을 invitation_14.css 로 복사하여 사용
 * - 벡터 이미지는 자리만 잡아둠: 파일 업로드 후 자동 표시되는 url 주석 참고
 *
 * 디자인 토큰
 *  배경      : #EFEAE6
 *  본문      : #161618 (#111111 혼용)
 *  포인트    : #4F6AB3 (블루)
 *  포인트연함: #8E9CC2
 *  포인트진함: #364A7F
 *  캘린더 일/토 : #BF4340
 *  폰트      : Eulyoo1945 (400/600), Italianno(R.S.V.P), Mayonice(LOVE-기존 메인 유지)
 * ============================================================ */

/* LOVE 레터링 폰트 (피그마: Mayonice 87px) */
@font-face {
  font-family: "Mayonice";
  src: url("/assets/fonts/Mayonice/Mayonice.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

#themeNameBox.theme14 {
  --t14-bg: #efeae6;
  --t14-ink: #161618;
  --t14-blue: #4f6ab3;
  --t14-blue-soft: #8e9cc2;
  --t14-blue-deep: #364a7f;
}

/* ===== 기본: 라이트 배경 (기존 다크 테마 무력화) ===== */
#themeNameBox.theme14 {
  background: var(--t14-bg);
  color: var(--t14-ink);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
}

/* ===== 메인 커버: 테마13과 동일한 레이아웃 구조 =====
 * - wrap: 중앙 정렬 + 컨테이너 쿼리(cqw) 기준 + 테마14 비율(360x610)
 * - frame-cons-box: max-width 469.39px (테마13과 동일) → 좌우 여백은 #EFEAE6 으로 채워 검은 띠 제거 */
#themeNameBox.theme14 .theme-14-wrap {
  display: flex;
  justify-content: center;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 360 / 610;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--t14-bg);
}
#themeNameBox.theme14 .theme-14-wrap .theme-frame-cons-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 469.39px;
  aspect-ratio: 360 / 610;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
  background: var(--t14-bg);
}
#themeNameBox.theme14 .theme-14-wrap .preview-theme-main {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  background: var(--t14-bg);
}
/* 오버레이의 stacking context 해제 (기존 z-index:2)
 * → mix-blend-mode(soft-light)가 아래 사진과 같은 맥락에서 합성되도록.
 *   오버레이는 DOM 순서상 사진 뒤 형제라 z-index 없이도 사진 위에 그려짐 */
#themeNameBox.theme14 .theme-photo-overlay {
  z-index: auto;
}
/* LOVE 레터링: svg 이미지 → Mayonice 텍스트 (피그마: 87px / black / mix-blend soft-light)
 * 위치는 기존 svg 자리(top 63.939%) 유지, 폰트 크기는 컨테이너 비례(87/360 = 24.17cqw) */
#themeNameBox.theme14 .theme-love {
  position: absolute;
  left: 0;
  top: 63.939%;
  width: 100%;
  height: auto;
  margin: 0;
  display: block;
  color: #000000;
  font-family: "Mayonice", "Italianno", cursive;
  font-size: clamp(48px, 24.17cqw, 113px);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* 전역 .preview-theme-main .cropper-preview { aspect-ratio:3/4 } / img { max-height:580px } 해제
 * → 크롭한 사진(360x610)이 아래까지 모두 표시되도록 (테마12 방식) */
#themeNameBox.theme14 .theme-14-wrap .preview-theme-main .cropper-preview {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
#themeNameBox.theme14 .theme-14-wrap .preview-theme-main .card-img-top {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
}
/* 하단 30% 그라데이션 (피그마: Linear Gradient 50%, #000000 0% → #000000)
 * → 사진 위 흰 글자(이름/날짜/예식장명) 가독성 확보. 텍스트 오버레이는 형제(뒤 DOM)라 그라데이션 위에 그려짐 */
#themeNameBox.theme14 .theme-14-wrap .preview-theme-main {
  position: relative;
}
#themeNameBox.theme14 .theme-14-wrap .preview-theme-main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

/* 기존 다크 테마14 규칙(.preview-inner-wrap #161618 등) 무력화 */
#themeNameBox.theme14 .preview-wrap,
#themeNameBox.theme14 .preview-inner-wrap,
#themeNameBox.theme14 .preview-wrap .preview-inner-wrap {
  background-color: transparent !important;
  background-image: none;
}

/* 섹션 공통: 종이 배경 없이 #EFEAE6 평면, 상하 100px */
#themeNameBox.theme14 .preview-wrap.preview-invitation-wrap,
#themeNameBox.theme14 .preview-calendar-wrap,
#themeNameBox.theme14 .preview-attend-wrap,
#themeNameBox.theme14 .preview-gallery-wrap,
#themeNameBox.theme14 .preview-weddinginfo-wrap,
#themeNameBox.theme14 .preview-bank-wrap,
#themeNameBox.theme14 .preview-guestbook-wrap {
  min-height: 0;
  padding: 100px 32px 0;
  background-color: var(--t14-bg);
  background-image: none;
  color: var(--t14-ink);
}
#themeNameBox.theme14 .preview-calendar-wrap{
  padding: 100px 32px;
}
  /* ===== 섹션 타이틀 공통 패턴: 영문(18px 400) + 한글(20px 600), 모두 #161618 =====
   * 전역 .preview-title { padding-bottom:60px } 무력화 */
#themeNameBox.theme14 .preview-invitation-title,
#themeNameBox.theme14 .preview-calendar-title,
#themeNameBox.theme14 .preview-attend-title,
#themeNameBox.theme14 .preview-gallery-title,
#themeNameBox.theme14 .preview-weddinginfo-title,
#themeNameBox.theme14 .preview-guestbook-title {
  margin: 0 0 10px;
  padding-bottom: 0 !important;
  text-align: center;
}
#themeNameBox.theme14 .preview-bank-title{
  margin: 0 0 10px;
  padding-bottom: 45px !important;
  text-align: center;
}

#themeNameBox.theme14 .preview-title .font-tit {
  margin: 0;
  color: var(--t14-ink);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0;
}
#themeNameBox.theme14 .preview-title h2
{
  margin: 0;
  color: #ffffff;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0;
}
/* 영문 레터링 주입 (Eulyoo 18px 400 #161618) */
#themeNameBox.theme14 .preview-weddinginfo-title h2::before,
#themeNameBox.theme14 .preview-bank-title h2::before,
#themeNameBox.theme14 .preview-guestbook-title h2::before,
#themeNameBox.theme14 .preview-gallery-title h2::before {
  display: block;
  margin: 0 0 10px;
  color: var(--t14-ink);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0;
  text-transform: uppercase;
}
#themeNameBox.theme14 .preview-weddinginfo-title h2::before { content: "LOCATION"; }
#themeNameBox.theme14 .preview-bank-title h2::before { content: "ACCOUNT"; }
#themeNameBox.theme14 .preview-guestbook-title h2::before { content: "GUESTBOOK"; }
#themeNameBox.theme14 .preview-gallery-title h2::before {
  content: "GALLERY";
  font-size: 20px;            /* 갤러리만 20px (피그마) */
}

/* ============================================================
 * 1. INVITATION (인사글)
 * ============================================================ */
#themeNameBox.theme14 .preview-invitation-title h2,
#themeNameBox.theme14 .preview-invitation-title .font-tit {
  color: var(--t14-ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}
/* INVITATION 레터링 (14px 400) */
#themeNameBox.theme14 .preview-invitation-title h2::before {
  content: "";
  display: block;
  margin: 0 0 10px;
  color: var(--t14-ink);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0;
}
/* 인사글 본문 (15px 400 / lh 22.5) */
#themeNameBox.theme14 .preview-invi-wrap .preview-message-wrap,
#themeNameBox.theme14 .preview-invi-wrap .preview-message-wrap p {
  color: var(--t14-ink);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
}
/* ===== 인사글 레이아웃: 테마13과 동일 (타이틀 → 본문 → 사진 맨 아래) =====
 * 장식 벡터 4개를 인사글 영역 네 모서리에 배치
 *  - 좌상: theme14_invite_vector_1.svg / 우상: theme14_invite_vector_2.svg
 *  - 좌하: theme14_invite_vector_3.svg / 우하: theme14_invite_vector_4.svg (각 151x250) */
/* 상단 모서리 벡터의 절대배치 기준 */
#themeNameBox.theme14 .preview-wrap.preview-invitation-wrap {
  position: relative;
  overflow: hidden;
  padding: 0;                  /* 내부 invi-wrap 이 자체 패딩(152/34/72) 보유 */
}
#themeNameBox.theme14 .preview-wrap.preview-invitation-wrap::before {
  content: "";
  position: absolute;
  top: 100px;                 /* 위쪽 섹션과 100px 여백 */
  left: 10px;
  width: 151px;
  height: 250px;
  opacity: 1;
  background-image: url("/assets/tool/img/invitation/theme_2026/theme14_invite_vector_1.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left top;
  pointer-events: none;
  z-index: 0;
}
#themeNameBox.theme14 .preview-wrap.preview-invitation-wrap::after {
  content: "";
  position: absolute;
  top: 100px;                 /* 위쪽 섹션과 100px 여백 */

  right: 10px;
  width: 151px;
  height: 250px;
  opacity: 1;
  background-image: url("/assets/tool/img/invitation/theme_2026/theme14_invite_vector_2.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right top;
  pointer-events: none;
  z-index: 0;
}
/* invi-wrap 자체 장식은 사용 안 함 (하단 벡터는 본문 텍스트 블록 기준으로 배치) */
#themeNameBox.theme14 .preview-invi-wrap::before,
#themeNameBox.theme14 .preview-invi-wrap::after {
  display: none;
}
/* 좌하/우하 벡터: 본문 텍스트 영역 끝까지만 (사진은 프레임 밖, 피그마)
 * 본문 wrap 의 하단을 기준으로 좌우 패딩(-34px)을 상쇄해 섹션 가장자리에 밀착 */
#themeNameBox.theme14 .preview-invi-wrap > .preview-message-wrap.preview-invitation-message,
#themeNameBox.theme14 .preview-invi-wrap > .preview-message-wrap.preview-insa-message {
  position: relative;
}
#themeNameBox.theme14 .preview-invi-wrap > .preview-message-wrap.preview-invitation-message::before,
#themeNameBox.theme14 .preview-invi-wrap > .preview-message-wrap.preview-insa-message::before {
  content: "";
  position: absolute;
  bottom: -56px;          /* 꽃 장식이 마지막 줄 아래로 내려가도록 (본문↔사진 사이 공간 활용, 피그마) */
  left: -24px;
  width: 151px;
  height: 250px;
  background-image: url("/assets/tool/img/invitation/theme_2026/theme14_invite_vector_3.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left bottom;
  pointer-events: none;
  z-index: -1;            /* 텍스트 뒤로 */
}
#themeNameBox.theme14 .preview-invi-wrap > .preview-message-wrap.preview-invitation-message::after,
#themeNameBox.theme14 .preview-invi-wrap > .preview-message-wrap.preview-insa-message::after {
  content: "";
  position: absolute;
  bottom: -56px;          /* 꽃 장식이 마지막 줄 아래로 내려가도록 (본문↔사진 사이 공간 활용, 피그마) */
  right: -24px;
  width: 151px;
  height: 250px;
  background-image: url("/assets/tool/img/invitation/theme_2026/theme14_invite_vector_4.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
  pointer-events: none;
  z-index: -1;            /* 텍스트 뒤로 */
}
/* 인사글 컨테이너: flex order 로 사진을 맨 아래로 (테마13/12 방식) */
#themeNameBox.theme14 .preview-invi-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 159px 34px 80px;   /* 섹션 상하 100px (피그마) */
}
#themeNameBox.theme14 .preview-invi-wrap > .preview-invitation-title {
  position: relative;
}
/* 구(절대배치) 중앙 벡터 제거: 절대배치는 제목과의 간격이 고정되지 않아
 * 일반 흐름(h2::before 배경)으로 전환 */
#themeNameBox.theme14 .preview-invitation-title::before {
  content: none !important;
}
/* 중앙 벡터(비둘기+리본, svg 182x90에 INVITATION 텍스트 포함)를 h2::before 로 일반 흐름 배치
 * → 제목("소중한 여러분을 초대합니다")과의 간격 26px 고정 */
#themeNameBox.theme14 .preview-invitation-title h2::before {
  display: block;
  width: 80%;
  aspect-ratio: 182 / 90;
  /* 위 -13px: 기존 절대배치(top:-13px) 시작 위치 보존 / 아래 26px: 요청 간격 */
  margin: -13px auto 26px;
  background: url(/assets/tool/img/invitation/theme_2026/theme14_invite_vector.svg) center / contain no-repeat;
  pointer-events: none;
}
/* 제목 ↔ 본문 간격 25px (피그마) */
#themeNameBox.theme14 .preview-invi-wrap .preview-message-wrap {
  margin-top: 25px;
}
/* 콘텐츠가 모서리 벡터 위로 오도록 */
#themeNameBox.theme14 .preview-invi-wrap > * {
  position: relative;
  z-index: 1;
}
#themeNameBox.theme14 .preview-invi-wrap > .preview-invitation-title { order: 1; }
#themeNameBox.theme14 .preview-invi-wrap > .preview-message-wrap { order: 2; }
#themeNameBox.theme14 .preview-invi-wrap > .preview-message-photo-wrap { order: 3; }
/* 본문: 타이틀 아래 24px, 중앙 정렬
 * 좌우 패딩 추가: 텍스트가 모서리 벡터 라인을 침범하지 않도록 (34 + 16 = 50px 여백) */
#themeNameBox.theme14 .preview-invi-wrap .preview-message-wrap {
  margin: 24px 0 0;
  padding: 0 16px;
  background: transparent;
  text-align: center;
}
#themeNameBox.theme14 .preview-invi-wrap > .preview-invitation-title {
  padding-left: 16px;
  padding-right: 16px;
}
/* 인사글 사진: 본문 아래 네모 풀폭 360x214 (테마12 방식) */
#themeNameBox.theme14 .preview-invi-wrap > .preview-message-photo-wrap {
  width: calc(100% + 68px);          /* invi-wrap 좌우 패딩(34px) 상쇄 → 풀폭 */
  max-width: none;
  margin: 60px -34px 0;
  padding-top: 100px;
}
#themeNameBox.theme14 .preview-message-photo {
  width: 100% !important;
  aspect-ratio: 360 / 214;
  height: auto !important;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #d9d9d9;
}
#themeNameBox.theme14 .preview-message-photo .cropper-preview,
#themeNameBox.theme14 .preview-message-photo > img,
#themeNameBox.theme14 .preview-message-photo .card-img-top {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  display: block;
}

/* ============================================================
 * 2. 혼주(가족) 섹션 - 사진 + 부모/이름 + 연락하기
 * ============================================================ */
#themeNameBox.theme14 .preview-invitation-cellphome {
  margin: 0;
  padding: 0 16px;
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#themeNameBox.theme14 .preview-invitation-cellphome p,
#themeNameBox.theme14 .preview-invitation-cellphome span {
  color: var(--t14-ink);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  letter-spacing: 0;
}
/* 한 줄(신랑/신부): 좌(부모, 우측정렬) / 우(관계+이름, 좌측정렬) 반반 구조
 * → 두 줄의 경계가 고정되어 "아들/딸"과 이름 시작 위치가 세로로 정렬됨 */
#themeNameBox.theme14 .preview-invitation-cellphome .groom,
#themeNameBox.theme14 .preview-invitation-cellphome .bride {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 14px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  padding-bottom: 0;
}
#themeNameBox.theme14 .preview-invitation-cellphome .groom > p,
#themeNameBox.theme14 .preview-invitation-cellphome .bride > p {
  margin: 0;
  display: inline-flex !important;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px;
}
/* 부모 묶음: 행의 좌측 절반에서 우측 정렬 (중앙 경계선에 붙음) */
#themeNameBox.theme14 .preview-invitation-cellphome .groom > p:not(.rel_box),
#themeNameBox.theme14 .preview-invitation-cellphome .bride > p:not(.rel_box) {
  flex: 1 1 0;
  min-width: 0;
  justify-content: flex-end;
}
/* 관계+이름 묶음: 행의 우측 절반에서 좌측 정렬, 관계↔이름 간격 좁게 */
#themeNameBox.theme14 .preview-invitation-cellphome .groom > p.rel_box,
#themeNameBox.theme14 .preview-invitation-cellphome .bride > p.rel_box {
  flex: 0.8 1 0;
  min-width: 0;
  justify-content: flex-start !important;
  gap: 6px;
}
/* 이름의 전역/JS 인라인 마진 무력화 (관계와 이름이 멀어지는 원인 제거) */
#themeNameBox.theme14 .preview-invitation-cellphome .rel_box .font-tit,
#themeNameBox.theme14 .preview-invitation-cellphome [data-name="groom_name"],
#themeNameBox.theme14 .preview-invitation-cellphome [data-name="bride_name"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* 관계(아들/딸): 고정폭 우측정렬 → 이름 시작 x 일치, #8E9CC2 14px */
#themeNameBox.theme14 .preview-invitation-cellphome .rel_text {
  display: inline-block !important;
  min-width: 28px;
  width: auto !important;
  flex-shrink: 0;
  text-align: right;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  color: var(--t14-blue-soft) !important;
  font-size: 14px !important;
  font-weight: 400;
}
/* 부모이름: #8E9CC2 14px */
#themeNameBox.theme14 .preview-invitation-cellphome .parentName {
  color: var(--t14-blue-soft) !important;
  font-size: 14px !important;
  font-weight: 400;
}
/* 신랑/신부 이름: #4F6AB3 18px 600 */
#themeNameBox.theme14 .preview-invitation-cellphome [data-name="groom_name"],
#themeNameBox.theme14 .preview-invitation-cellphome [data-name="bride_name"],
#themeNameBox.theme14 .preview-invitation-cellphome .rel_box .font-tit {
  display: inline-block !important;
  color: var(--t14-blue) !important;
  font-size: 18px !important;
  font-weight: 600;
  text-align: left;
}
/* 부모 사이 점(·) - JS 인라인 display:block 무력화 */
#themeNameBox.theme14 .preview-invitation-cellphome .cellphone-dot {
  display: inline-block !important;
}
#themeNameBox.theme14 .preview-invitation-cellphome .cellphone-dot::before {
  width: 2px !important;
  height: 2px !important;
  background-color: var(--t14-blue-soft) !important;
  border-radius: 50% !important;
  margin: 0 6px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  content: "" !important;
}
#themeNameBox.theme14 .preview-invitation-cellphome .cellphone-dot:has(+ [data-name*="goin_type"] + .parentName:empty),
#themeNameBox.theme14 .preview-invitation-cellphome .cellphone-dot:has(+ .parentName:empty) {
  display: none !important;
}
/* 부모 래퍼 block(테마13 패턴: 고인 이미지가 baseline 영향 X) */
#themeNameBox.theme14 .preview-invitation-cellphome .parent-wrapper,
#themeNameBox.theme14 .preview-invitation-cellphome .groom > p:not(.rel_box) > span:not(.cellphone-dot),
#themeNameBox.theme14 .preview-invitation-cellphome .bride > p:not(.rel_box) > span:not(.cellphone-dot) {
  display: block !important;
  white-space: nowrap;
}
/* 故(고인) 마커: 인라인 고정폭 + absolute 오버레이 (JS display:block 무력화) */
#themeNameBox.theme14 .preview-invitation-cellphome [data-name*="goin_type"] {
  position: relative;
  display: inline-block !important;
  width: 21px;
  height: 1em;
  vertical-align: middle;
}
#themeNameBox.theme14 .preview-invitation-cellphome [data-name*="goin_type"]:empty {
  display: none !important;
}
#themeNameBox.theme14 .preview-invitation-cellphome [data-name*="goin_type"] img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: auto;
  /* 검정 故/국화 → 테마 블루(#4F6AB3) 근사 틴트 */
  filter: brightness(0) saturate(100%) invert(44%) sepia(13%) saturate(1900%) hue-rotate(185deg) brightness(92%) contrast(88%);
}
/* 연락하기 버튼: 흰 배경 + 0.5px #4F6AB3 보더 + radius 4 (180x45) */
#themeNameBox.theme14 .btn-contactme,
#themeNameBox.theme14 .btn-contactme span {
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
}
#themeNameBox.theme14 .btn-contactme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px !important;
  min-height: 45px !important;
  padding: 0 24px;
  border: 0.5px solid var(--t14-blue) !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: var(--t14-blue) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
#themeNameBox.theme14 .btn-contactme span {
  color: var(--t14-blue) !important;
  font-size: 15px;
  font-weight: 600;
}
#themeNameBox.theme14 .btn-contactme .call-icon {
  display: none;
}
/* 연락하기 버튼 영역: 이름과 30px / 다음 섹션과 100px 간격 (피그마) */
#themeNameBox.theme14 .preview-invitation-link {
  margin: 30px 0 100px;
  text-align: center;
}

/* ============================================================
 * 3. 캘린더 (WEDDING DAY)
 * ============================================================ */
/* 배경 벡터 자리: 캘린더 상단 (rgba 블루 일러스트) - theme14_date_bg_vector.svg */
#themeNameBox.theme14 .preview-calendar-wrap::before {
  top: -275px;
  left: 50%;
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: translateX(-50%);
  background-image: url("/assets/tool/img/invitation/theme_2026/theme14_date_bg_vector.svg");
}
#themeNameBox.theme14 .calendar-subtitle {
  display: none;
}
/* 날짜 제목 2줄: 모두 #4F6AB3 18px 600 (피그마) */
#themeNameBox.theme14 .preview-calendar-title h2,
#themeNameBox.theme14 .preview-calendar-title h2.font-tit {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 19px;
}
#themeNameBox.theme14 .preview-calendar-title .cal-date,
#themeNameBox.theme14 .preview-calendar-title .cal-daytime {
  display: block;
  color: var(--t14-blue);
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
}
/* 캘린더: 평면 배치(박스 없음) + "월" 라벨 숨김 */
#themeNameBox.theme14 .calendar-box {
  margin: 20px auto 0;
  padding: 8px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#themeNameBox.theme14 .calendar-month {
  display: none;
}
#themeNameBox.theme14 .calendar-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
#themeNameBox.theme14 .calendar-table th,
#themeNameBox.theme14 .calendar-table td {
  height: 40px;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
}
/* 요일 헤더: 기본 #111 / 일·토 #BF4340 (피그마) + 헤더 아래 구분선 제거 */
#themeNameBox.theme14 .calendar-table th {
  font-size: 14px;
  color: #111111;
  border-bottom: 0;
}
#themeNameBox.theme14 .calendar-table th.sun,
#themeNameBox.theme14 .calendar-table th.sat {
  color: #bf4340;
}
/* 날짜: 당월 #4D4C4C / 일·토 #BF4340 / 타월 #B3B3B3 (피그마 12px) */
#themeNameBox.theme14 .calendar-table td {
  font-size: 12px;
  color: #4d4c4c;
}
#themeNameBox.theme14 .calendar-table td.sun,
#themeNameBox.theme14 .calendar-table td.sat {
  color: #bf4340;
}
#themeNameBox.theme14 .calendar-table td.other-month {
  color: #b3b3b3;
}
/* 예식일: #4F6AB3 원 + 흰 글자 */
#themeNameBox.theme14 .wedding-day-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--t14-blue);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
}
/* D-day 벡터 일러스트 자리 (254x68, 캘린더와 문구 사이)
 * 업로드 예정 파일: theme14_dday_vector.svg */
#themeNameBox.theme14 .countdown-box {
  position: relative;
  display: grid;
  /* 테마13 참고: 박스 폭을 줄이고(0.2fr) 그룹을 가운데 정렬 → 박스 간격이 좁아짐 */
  grid-template-columns: repeat(4, 0.2fr);
  justify-content: center;
  gap: 8px;
  margin: 40px 0 0;
}
/* 타이머 박스: 배경 없이 보더만 - 옅은 회색 보더 (테마13 참고) */
#themeNameBox.theme14 .countdown-item {
  padding: 10px 4px 12px;
  border: 1px solid #cec7c4;
  border-radius: 10px;
  background: transparent;
  text-align: center;
}
#themeNameBox.theme14 .countdown-label,
#themeNameBox.theme14 .countdown-value,
#themeNameBox.theme14 .countdown-message {
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
}
#themeNameBox.theme14 .countdown-label {
  display: block;
  color: #b3b3b3;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 1;
}
#themeNameBox.theme14 .countdown-value {
  display: block;
  margin-top: 7px;
  color: #4d4c4c;
  font-size: 20px;
  line-height: 1;
}
/* D-day 문구: #4F6AB3 14px 600 (피그마) */
#themeNameBox.theme14 .countdown-message {
  margin: 20px 0 0;
  color: var(--t14-blue);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}
#themeNameBox.theme14 .countdown-message .countdown-heart,
#themeNameBox.theme14 .countdown-message .countdown-dday {
  color: var(--t14-blue);
  font-weight: 600;
}

/* ============================================================
 * 4. RSVP (참석 의사 전달) - 솔리드 #4F6AB3 배경
 * ============================================================ */
#themeNameBox.theme14 .preview-attend-wrap {
  background-color: var(--t14-blue) !important;   /* 다크 무력화 규칙(transparent !important)보다 우선 */
  background-image: none;
  padding: 50px 32px;
  min-height: 0;
}
/* 상단 벡터 자리 (#364A7F 라인 2개 + R.S.V.P) - theme14_rsvp_vector.svg */
#themeNameBox.theme14 .preview-attend-wrap::before {
  top: 50px;
  left: 50%;
  width: 210px;
  height: 15px;
  opacity: 1;
  transform: translateX(-50%);
  background-image: url("/assets/tool/img/invitation/theme_2026/theme14_rsvp_vector.svg");
}
#themeNameBox.theme14 .preview-attend-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 15px;
  text-align: center;
}
/* R.S.V.P 레터링 (Italianno 60px #364A7F)
 * 전역 .preview-title::before의 30x30 꽃 아이콘(theme2_icon.png)을 무력화하고 텍스트로 노출 */
#themeNameBox.theme14 .preview-attend-title::before {
  content: "R.S.V.P";
  order: -2;                /* 플러리시 벡터 바로 아래, 라벨/본문 위 */
  display: block;
  width: auto;
  height: auto;
  background: none !important;   /* 꽃 이미지 제거 */
  /* 플러리시(top 50 + 높이 15) 아래 30px → margin-top 45 */
  margin: 45px 0 0;
  color: var(--t14-blue-deep);
  font-family: "Italianno", "Eulyoo1945", cursive;
  font-size: 60px;
  font-weight: 400;
  line-height: 1.2;
}
/* "참석 의사 전달" 라벨: 흰색 14px 400 (기존 알약 kicker 무력화)
 * order: R.S.V.P(-2) → 라벨(-1) → 본문(0) 순서로 배치 */
#themeNameBox.theme14 .preview-attend-title .attend-kicker,
#themeNameBox.theme14 .preview-attend-title .bg-gray {
  order: -1;
  display: block;
  margin: 0 0 20px !important;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #ffffff !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 14px;
  font-weight: 400;
}
/* 안내 문구: 흰색 15px 600 */
#themeNameBox.theme14 .preview-attend-title .attend-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 22.5px;
}
#themeNameBox.theme14 .preview-attend-title .attend-body span {
  color: #ffffff;
}
/* 버튼 영역: 본문과 15px 간격 (타이틀 margin-bottom 15px로 처리, 추가 마진 제거) */
#themeNameBox.theme14 .preview-attend-link {
  margin-top: 0;
  text-align: center;
}
/* 전달하기 버튼: #EFEAE6 배경 + #4F6AB3 텍스트 (피그마 180x45, radius 4) */
#themeNameBox.theme14 .preview-attend-wrap .btn-attend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 180px;
  height: 45px;
  padding: 9px 0;
  border: 0 !important;
  border-radius: 4px !important;
  background: var(--t14-bg) !important;
  color: var(--t14-blue) !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  text-decoration: none;
}
#themeNameBox.theme14 .preview-attend-wrap .btn-attend > span:not(.check-icon) {
  color: var(--t14-blue);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 14px;
  font-weight: 600;
}
#themeNameBox.theme14 .preview-attend-wrap .btn-attend .check-icon {
  display: none;
}

/* ============================================================
 * 5. 갤러리 (GALLERY)
 * ============================================================ */
#themeNameBox.theme14 .preview-gallery-wrap {
  padding-left: 5px;
  padding-right: 5px;
}
/* 벡터 자리: 타이틀 위 중앙 - theme14_gallery_vector.svg */
#themeNameBox.theme14 .preview-gallery-wrap::before {
  top: 100px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 60px;
  height: 70px;
  opacity: 1;
  background-image: url("/assets/tool/img/invitation/theme_2026/theme14_gallery_vector.svg");
}
/* 타이틀: 벡터 아래 10px (100 + 70 + 10 - 100 = 80) */
#themeNameBox.theme14 .preview-gallery-title {
  margin-top: 80px;
}
/* h2 원문("갤러리") 숨기고 부제 문구 주입 (15px 600) */
#themeNameBox.theme14 .preview-gallery-title h2,
#themeNameBox.theme14 .preview-gallery-title h2.font-tit {
  font-size: 0;
  line-height: 0;
}
#themeNameBox.theme14 .preview-gallery-title h2::before {
  margin: 0 0 20px;
  line-height: 1.3;
}
#themeNameBox.theme14 .preview-gallery-title h2::after {
  content: "우리의 가장 빛나는 순간들을 담았어요.";
  display: block;
  color: var(--t14-ink);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
}
#themeNameBox.theme14 .preview-gallery-img {
  margin-top: 24px;
}
#themeNameBox.theme14 .preview-gallery-ul {
  gap: 10px;
}
#themeNameBox.theme14 .preview-gallery-li,
#themeNameBox.theme14 .preview-gallery-item {
  border-radius: 4px;
  overflow: hidden;
}

/* ============================================================
 * 6. 오시는길 (LOCATION)
 * ============================================================ */
/* 벡터: LOCATION 타이틀 위 중앙 (104x62) - theme14_location_vector.svg
 * 구버전 theme14 블록(top:54/136x82/opacity .24)을 덮어씀 */
#themeNameBox.theme14 .preview-weddinginfo-wrap::before {
  display: block;
  top: 100px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 104px;
  height: 62px;
  opacity: 1;
  background-image: url("/assets/tool/img/invitation/theme_2026/theme14_location_vector.svg");
}
/* 타이틀: 벡터 아래 10px (100 + 62 + 10 - 100 = 72) */
#themeNameBox.theme14 .preview-weddinginfo-title {
  margin-top: 72px;
}
#themeNameBox.theme14 .weddinginfo-content {
  margin-top: 10px;
  color: var(--t14-ink);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
}
/* 주소 블록: 박스 없이 평문 중앙 (테마13 패턴) */
#themeNameBox.theme14 .weddinginfo-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 0 !important;
  margin: 0;
  width: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center;
}
#themeNameBox.theme14 .weddinginfo-icon-box {
  display: block !important;
  gap: 0 !important;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: center;
}
#themeNameBox.theme14 .wedding-hallbox {
  padding: 0 !important;
  margin: 0;
  width: 100%;
  text-align: center;
}
#themeNameBox.theme14 .weddinginfo-namebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}
#themeNameBox.theme14 .weddinginfo-icon {
  display: none;
}
/* 예식장명 20px 600 / 주소 15px 600 / 전화 16px 600 ls0.5 - 모두 #161618 */
#themeNameBox.theme14 .weddinginfo-namebox .weddding-hall-name {
  /* 메인커버용 전역 규칙(.weddding-hall-name { position:absolute; top:90.409% })이
   * 섹션 안 예식장명까지 띄워 안내사항 행 위에 겹치던 버그 → 일반 흐름으로 복원 */
  position: static;
  top: auto;
  left: auto;
  margin: 0;
  width: 100%;
  color: var(--t14-ink) !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  word-break: keep-all;      /* 긴 상호명: 공백(어절) 단위로만 줄바꿈, 한글 음절 깨짐 방지 */
  overflow-wrap: break-word; /* 단어 하나가 한 줄보다 길 때만 강제 줄바꿈 (안전장치) */
  text-align: center;
}
#themeNameBox.theme14 .weddinginfo-namebox .weddding-hall {
  margin: 0;
  width: 100%;
  color: var(--t14-ink) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 22.5px;
  text-align: center;
}
#themeNameBox.theme14 .weddinginfo-tellbox {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
#themeNameBox.theme14 .weddinginfo-tellbox .weddding-tell {
  margin: 0;
  width: 100%;
  color: var(--t14-ink) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.5px;
  text-align: center;
}
/* 내비 버튼: 흰 배경 + 0.5px #4F6AB3 보더 + 텍스트 #111 12px 600 */
#themeNameBox.theme14 .weddinginfo-navi {
  display: flex !important;
  gap: 8px;
  justify-content: center;
  padding: 0 !important;
  margin: 20px -22px 0;
  width: calc(100% + 44px);
}
#themeNameBox.theme14 .weddinginfo-navi button {
  flex: 1;
  height: 40px;
  min-height: 40px;
  max-width: 105px;
  padding: 0 8px;
  border: 0.5px solid var(--t14-blue);
  border-radius: 4px;
  background: #ffffff;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
}
#themeNameBox.theme14 .weddinginfo-navi button::before {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}
#themeNameBox.theme14 .weddinginfo-navi button span {
  display: inline-block;
  color: #111111;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
/* "네이버내비" → "네이버지도" (피그마) */
#themeNameBox.theme14 .weddinginfo-navi button.navernavi span {
  font-size: 0 !important;
  line-height: 0;
}
#themeNameBox.theme14 .weddinginfo-navi button.navernavi span::after {
  content: "네이버지도";
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #111111;
  white-space: nowrap;
}
/* 지도/약도: 좌우 여백 없이 풀폭 (섹션 32 + inner-wrap 20 = 52 상쇄) */
#themeNameBox.theme14 .weddinghall-map-wrap {
  margin-top: 20px;
  margin-left: -52px;
  margin-right: -52px;
  width: calc(100% + 104px);
}
#themeNameBox.theme14 .map-wrap,
#themeNameBox.theme14 .preview-map-img,
#themeNameBox.theme14 .preview-map-img .cropper-preview {
  width: 100% !important;
  max-width: 100%;
  border-radius: 0;
  border: 0;
  margin: 0;
  overflow: hidden;
}
#themeNameBox.theme14 .map-wrap .map,
#themeNameBox.theme14 #kakao_map {
  width: 100% !important;
  min-height: 200px;
}
#themeNameBox.theme14 .preview-map-img .cropper-preview img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
}
/* 교통 안내: 행 디자인 (보더 0.5px #4F6AB3) */
#themeNameBox.theme14 .way-guide-box {
  margin-top: 30px;
  padding: 0;
  background: transparent;
}
#themeNameBox.theme14 .way-guide {
  position: relative;
  padding: 20px 30px;
  border-top: 0;
  border-bottom: 0;
  gap:0;
}
#themeNameBox.theme14 .way-guide::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--t14-blue);
  transform: scaleY(0.5);     /* 물리 0.5px 헤어라인 */
  transform-origin: bottom;
  pointer-events: none;
}
#themeNameBox.theme14 .way-guide .way-title {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 9px;
}
#themeNameBox.theme14 .way-guide .way-title p {
  margin: 0;
  color: #111111 !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 18px !important;
  font-weight: 600;
}
#themeNameBox.theme14 .way-guide .way-content p {
  margin: 0;
  color: #111111 !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 18px;
  white-space: pre-line;
}
/* "기타 안내" → "안내 사항" (피그마) */
#themeNameBox.theme14 .way-guide.etc .way-title p:last-child {
  font-size: 0 !important;
  line-height: 0;
}
#themeNameBox.theme14 .way-guide.etc .way-title p:last-child::before {
  content: "안내 사항";
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #111111;
}
/* 교통수단 아이콘: 테마12 SVG를 mask 로 #4F6AB3 틴트 */
#themeNameBox.theme14 .way-guide .way-title .weddinginfo-icon {
  display: inline-block !important;
  width: 23px;
  height: 23px;
  margin: 0;
  padding: 0;
  background-color: var(--t14-blue);
  background-image: none;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  flex-shrink: 0;
}
#themeNameBox.theme14 .way-guide.subway .way-title .weddinginfo-icon {
  -webkit-mask-image: url("/assets/tool/img/invitation/theme_2026/subway_12_icon.svg");
          mask-image: url("/assets/tool/img/invitation/theme_2026/subway_12_icon.svg");
}
#themeNameBox.theme14 .way-guide.bus .way-title .weddinginfo-icon {
  -webkit-mask-image: url("/assets/tool/img/invitation/theme_2026/bus_12_icon.svg");
          mask-image: url("/assets/tool/img/invitation/theme_2026/bus_12_icon.svg");
}
#themeNameBox.theme14 .way-guide.etc .way-title .weddinginfo-icon {
  -webkit-mask-image: url("/assets/tool/img/invitation/theme_2026/info_12_icon.svg");
          mask-image: url("/assets/tool/img/invitation/theme_2026/info_12_icon.svg");
}

/* ============================================================
 * 7. 마음 전하실 곳 (ACCOUNT)
 * ============================================================ */
/* 좌우 여백: 섹션 0 + inner-wrap 30px = 30px */
#themeNameBox.theme14 .preview-bank-wrap {
  padding-left: 0;
  padding-right: 0;
}
#themeNameBox.theme14 .preview-bank-wrap::before {
  display: none;
}
/* 안내 문구 (15px 600 #161618) */
#themeNameBox.theme14 .preview-bank-title h2::after {
  content: "신랑\00026신부에게 축복의 의미로\A축의금을 전달해보세요.";
  white-space: pre-line;
  display: block;
  margin-top: 10px;
  color: var(--t14-ink);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
}
/* 계좌 영역: 박스 제거 풀폭 (테마13 패턴) */
#themeNameBox.theme14 .preview-bank-wrap .accordion-box {
  margin: 20px 0 0;
  border: 0;
  background: transparent;
}
#themeNameBox.theme14 .preview-bank-wrap .accordion-inner {
  overflow: visible;
  margin-bottom: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* 계좌번호 토글: 풀폭 45px #4F6AB3 + 흰 16px 600 */
#themeNameBox.theme14 .preview-bank-wrap .accordion-box .btn-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  height: 45px;
  min-height: 45px;
  margin: 0 auto;
  padding: 0;
  background: var(--t14-blue) !important;
  border: 0;
  border-radius: 4px;
  color: #ffffff !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
#themeNameBox.theme14 .preview-bank-wrap .accordion-box .btn-toggle::after {
  content: none;
}
/* 계좌 행: 투명 + 하단 0.5px #4F6AB3 */
#themeNameBox.theme14 .preview-bank-wrap .accordion-box .bank {
  margin-bottom: 0;
  padding: 20px 0;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--t14-blue);
  border-radius: 0;
}
#themeNameBox.theme14 .preview-bank-wrap .bank-info,
#themeNameBox.theme14 .preview-bank-wrap .bank-btn-box{
  padding: 0;
}
#themeNameBox.theme14 .preview-bank-wrap .bank-info p {
  margin: 0;
  line-height: 1.6;
}
#themeNameBox.theme14 .preview-bank-wrap .bank-info p:first-child {
  display: flex;
  align-items: center;
  gap: 5px;
}
#themeNameBox.theme14 .preview-bank-wrap .bank-info .name {
  color: var(--t14-blue) !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 14px;
  font-weight: 600;
}
#themeNameBox.theme14 .preview-bank-wrap .bank-info .name::before {
  font-weight: 400;
  font-size: 12px;
  margin-right: 5px;
}
/* 이름 앞 관계 표기: 행 클래스(00=본인/01=부/02=모) 기준 (피그마) */
#themeNameBox.theme14 .bank_groom00 .bank-info .name::before { content: "신랑"; }
#themeNameBox.theme14 .bank_bride00 .bank-info .name::before { content: "신부"; }
#themeNameBox.theme14 .bank_groom01 .bank-info .name::before,
#themeNameBox.theme14 .bank_bride01 .bank-info .name::before { content: "부"; }
#themeNameBox.theme14 .bank_groom02 .bank-info .name::before,
#themeNameBox.theme14 .bank_bride02 .bank-info .name::before { content: "모"; }
#themeNameBox.theme14 .preview-bank-wrap .bank-info .bank_type,
#themeNameBox.theme14 .preview-bank-wrap .bank-info .bank_no {
  color: var(--t14-blue) !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 14px;
  font-weight: 600;
}
/* 버튼 행: 가로 한 줄 */
#themeNameBox.theme14 .preview-bank-wrap .bank-btn-box {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin-top: 15px;
}
/* 계좌복사/카카오페이: 흰 배경 + 0.5px #4F6AB3 + radius 5 + 12px 600 */
#themeNameBox.theme14 .preview-bank-wrap .copy-bank,
#themeNameBox.theme14 .preview-bank-wrap .kakaopay {
  flex: 1;
  width: auto;
  height: 40px;
  min-height: 40px;
  padding: 0 10px;
  background: #ffffff !important;
  border: 0.5px solid var(--t14-blue) !important;
  border-radius: 5px !important;
  color: var(--t14-blue) !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
#themeNameBox.theme14 .preview-bank-wrap .kakaopay span {
  white-space: nowrap;
}
/* 계좌복사 아이콘: svg mask 로 #4F6AB3 틴트 */
#themeNameBox.theme14 .preview-bank-wrap .copy-bank::before {
  content: "";
  display: inline-block;
  width: 23px;
  height: 23px;
  margin-right: 2px;
  flex-shrink: 0;
  background-image: none;
  background-color: var(--t14-blue);
  -webkit-mask: url("/assets/tool/img/theme_new/theme_icon_copy.svg") center / 23px no-repeat;
          mask: url("/assets/tool/img/theme_new/theme_icon_copy.svg") center / 23px no-repeat;
}

/* ============================================================
 * 8. 방명록 (GUESTBOOK)
 * ============================================================ */
/* 마지막 섹션: 하단 실루엣 벡터(108px)가 콘텐츠와 겹치지 않게 하단 패딩 확보
 * (공통 규칙은 padding-bottom 0 - 섹션 간격을 다음 섹션 상단 패딩으로 처리하기 때문) */
#themeNameBox.theme14 .preview-guestbook-wrap {
  padding-bottom: 188px;     /* 위 간격 30 + 벡터 108 + 아래 여백 50 */
}
/* base 아치형 inner-wrap 제거 */
#themeNameBox.theme14 .preview-guestbook-wrap .preview-inner-wrap {
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}
/* 배경 벡터 자리: 타이틀 뒤 rgba(79,106,179,.10) 일러스트 - theme14_guestbook_bg_vector01.svg */
#themeNameBox.theme14 .preview-guestbook-wrap::before {
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 123px;
  opacity: 1;
  background-image: url("/assets/tool/img/invitation/theme_2026/theme14_guestbook_bg_vector01.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* 하단 도시 실루엣 벡터 자리 - theme14_guestbook_bg_vector03.svg
 * 공통 베이스 규칙(invitation_test.css)에 theme14 guestbook ::after 가 없어
 * content/position 을 여기서 직접 지정해야 렌더링됨 */
#themeNameBox.theme14 .preview-guestbook-wrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  display: block;
  left: 50%;
  right: auto;
  bottom: 50px;              /* 벡터 아래 50px 여백 */
  transform: translateX(-50%);
  width: 360px;
  max-width: 100%;
  height: 108px;
  opacity: 1;
  background-image: url("/assets/tool/img/invitation/theme_2026/theme14_guestbook_bg_vector03.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
/* 안내 문구 (#161618 15px 600) */
#themeNameBox.theme14 .preview-guestbook-wrap .guestbook-subtitle {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 0;
  color: var(--t14-ink);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
}
/* 방명록 작성하기: 흰 배경 + 0.5px #4F6AB3 + 텍스트 #4F6AB3 15px 600 (180x45) */
#themeNameBox.theme14 .book_btn_top {
  margin: 20px 0 30px;
  text-align: center;
}
#themeNameBox.theme14 .preview-guestbook-wrap .book_btn_top a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  min-height: 45px !important;
  padding: 0 24px;
  border: 0.5px solid var(--t14-blue) !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: var(--t14-blue) !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
/* 항목: 평면 + 하단 0.5px #4F6AB3, padding 30px 20px */
#themeNameBox.theme14 .guestbook-list {
  margin-bottom: 0;
  padding: 0;                 /* 전역 .guestbook-list { padding: 0 1rem } 제거 */
}
#themeNameBox.theme14 .guestbook-list-txt {
  display: flex;
  flex-direction: column;
  /* 섹션 좌우 패딩(32px) 상쇄 → 항목/하단 구분선이 화면 끝까지, 내용 여백은 피그마대로 20px */
  margin-left: -32px;
  margin-right: -32px;
  padding: 30px 20px;
  border: 0;
  border-bottom: 0.5px solid var(--t14-blue);
  border-radius: 0;
  background: transparent;
}
/* 수정/삭제 아이콘 (테마12 svg 재사용, 우상단) */
#themeNameBox.theme14 .guest-btn-box {
  order: -2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
#themeNameBox.theme14 .guest-btn-box .btn,
#themeNameBox.theme14 .guest-btn-box .btn-edit,
#themeNameBox.theme14 .guest-btn-box .btn-delete {
  width: 25px;
  height: 24px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 0;
  border-radius: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
}
#themeNameBox.theme14 .guest-btn-box .btn-edit {
  background-image: url("/assets/tool/img/invitation/theme_2026/theme12_btn_edit.svg");
}
#themeNameBox.theme14 .guest-btn-box .btn-delete {
  background-image: url("/assets/tool/img/invitation/theme_2026/theme12_btn_delete.svg");
}
/* 이름(#4F6AB3 16px) + 날짜(#999 14px) 한 줄 - 본문 위 */
#themeNameBox.theme14 .guest-name-date {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  order: -1;
  margin-top: 0;
  margin-bottom: 10px;
}
#themeNameBox.theme14 .guest-name-date p {
  margin: 0;
}
#themeNameBox.theme14 .guest-name-date .name {
  color: var(--t14-blue) !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 16px;
  font-weight: 400;
}
#themeNameBox.theme14 .guest-name-date .date {
  color: #999999 !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 14px;
  font-weight: 400;
}
/* 본문 (#161618 16px / lh 24px) */
#themeNameBox.theme14 .guest-contents .content {
  margin: 0;
  color: var(--t14-ink) !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
#themeNameBox.theme14 .guestbook-no-data {
  padding: 42px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  color: var(--t14-ink);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
}

/* ============================================================
 * 모달 공통 (테마14) - JS가 body로 appendTo 하므로 body:has() 스코프
 * ============================================================ */
body:has(#themeNameBox.theme14) #contactModalContent .modal-dialog,
body:has(#themeNameBox.theme14) #attendModalContent .modal-dialog,
body:has(#themeNameBox.theme14) #guestbookModalContent .modal-dialog,
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-dialog,
body:has(#themeNameBox.theme14) #guestPasswordModal .modal-dialog,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-dialog {
  width: calc(100% - 48px);
  max-width: 340px;
  margin-right: auto;
  margin-left: auto;
}
body:has(#themeNameBox.theme14) #contactModalContent .modal-content,
body:has(#themeNameBox.theme14) #attendModalContent .modal-content,
body:has(#themeNameBox.theme14) #guestbookModalContent .modal-content,
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-content,
body:has(#themeNameBox.theme14) #guestPasswordModal .modal-content,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-content {
  overflow: hidden;
  border: 0 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
}
body:has(#themeNameBox.theme14) #contactModalContent .modal-header,
body:has(#themeNameBox.theme14) #attendModalContent .modal-header,
body:has(#themeNameBox.theme14) #guestbookModalContent .modal-header,
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-header,
body:has(#themeNameBox.theme14) #guestPasswordModal .modal-header,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-header {
  position: relative;
  align-items: center;
  min-height: 46px;
  padding: 16px 44px 12px 20px;
  border-bottom: 1px solid #e8e4df;
  background: #ffffff;
}
body:has(#themeNameBox.theme14) #contactModalContent .modal-title,
body:has(#themeNameBox.theme14) #attendModalContent .modal-title,
body:has(#themeNameBox.theme14) #guestbookModalContent .modal-title,
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-title,
body:has(#themeNameBox.theme14) #guestPasswordModal .modal-title,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-title {
  width: 100%;
  margin: 0;
  color: #111111 !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
}
body:has(#themeNameBox.theme14) #contactModalContent .modal-header .close,
body:has(#themeNameBox.theme14) #attendModalContent .modal-header .close,
body:has(#themeNameBox.theme14) #guestbookModalContent .modal-header .close,
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-header .close,
body:has(#themeNameBox.theme14) #guestPasswordModal .modal-header .close,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-header .close {
  position: absolute;
  top: 50%;
  right: 16px;
  margin: 0;
  padding: 0;
  color: #111111;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  opacity: 1;
  transform: translateY(-50%);
}
body:has(#themeNameBox.theme14) #contactModalContent .modal-body,
body:has(#themeNameBox.theme14) #attendModalContent .modal-body,
body:has(#themeNameBox.theme14) #guestbookModalContent .modal-body,
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-body,
body:has(#themeNameBox.theme14) #guestPasswordModal .modal-body,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-body {
  padding: 18px 20px 20px;
  color: #111111;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
}
/* 공통 입력/버튼 */
body:has(#themeNameBox.theme14) #guestPasswordModal .modal-body input.form-control,
body:has(#themeNameBox.theme14) #guestbookModalContent .modal-body input.form-control {
  min-height: 45px;
  padding: 10px;
  border: 0.5px solid var(--t14-blue, #4f6ab3);
  border-radius: 4px;
  background: #ffffff;
  color: #111111;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  font-size: 12px;
}
body:has(#themeNameBox.theme14) .modal-body .btn-dark,
body:has(#themeNameBox.theme14) .modal-body .btn.btn-primary {
  border: 0 !important;
  border-radius: 4px !important;
  background: #4f6ab3 !important;
  color: #ffffff !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-weight: 600;
  box-shadow: none !important;
}

/* ============================================================
 * 모달 1. 연락하기 (#contactModalContent) - 피그마
 * ============================================================ */
body:has(#themeNameBox.theme14) #contactModalContent .modal-header {
  padding: 16px 44px 12px;
  justify-content: center;
  border-bottom: 0;
}
body:has(#themeNameBox.theme14) #contactModalContent .modal-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}
body:has(#themeNameBox.theme14) #contactModalContent .modal-body {
  padding: 0 0 40px !important;
}
/* 행 grid: 라벨60 / 이름 유연 / 아이콘 (좌30/우25, 상하10) */
body:has(#themeNameBox.theme14) #contactModalContent .contactItem {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  justify-content: stretch;
  align-items: center;
  column-gap: 20px;
  width: 100%;
  margin: 0;
  padding: 10px 25px 10px 30px;
  box-sizing: border-box;
  border-bottom: 0.5px solid rgba(17, 17, 17, 0.3);
  background: transparent;
  min-height: 0;
}
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:last-child {
  border-bottom: 0.5px solid rgba(17, 17, 17, 0.3);
}
body:has(#themeNameBox.theme14) #contactModalContent .contactItem > div {
  min-height: 0;
  line-height: 1.5;
}
/* 신랑/신부 첫 행 - ::before 그룹 헤더 */
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.groom),
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.bride) {
  grid-template-areas:
    "header header header"
    "tit    name   icon";
  padding: 0 25px 10px 30px;
}
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.bride) {
  margin-top: 30px;
}
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.groom)::before,
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.bride)::before {
  grid-area: header;
  display: block;
  min-height: 76px;
  margin: 0 -25px 10px -30px;
  padding: 29px 30px;
  box-sizing: border-box;
  border-bottom: 0.5px solid rgba(17, 17, 17, 0.3);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 18px;
  font-weight: 600;
  color: #111111;
  letter-spacing: 0;
  text-align: left;
}
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.groom)::before { content: "신랑측"; }
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.bride)::before { content: "신부측"; }
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.groom) .call_tit,
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.bride) .call_tit { grid-area: tit; }
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.groom) .call_name,
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.bride) .call_name { grid-area: name; }
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.groom) .call_icon,
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.bride) .call_icon { grid-area: icon; }
/* 라벨 16px 400 / 이름 16px 600 - 모두 #111 */
body:has(#themeNameBox.theme14) #contactModalContent .contactItem .call_tit,
body:has(#themeNameBox.theme14) #contactModalContent .contactItem .call_name {
  width: auto !important;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #111111 !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
  word-break: keep-all;
}
body:has(#themeNameBox.theme14) #contactModalContent .contactItem .call_tit { font-weight: 400; }
body:has(#themeNameBox.theme14) #contactModalContent .contactItem .call_name { font-weight: 600; }
body:has(#themeNameBox.theme14) #contactModalContent .contactItem .call_name span {
  display: inline-block;
  white-space: nowrap;
}
body:has(#themeNameBox.theme14) #contactModalContent .contactItem .call_tit .xeicon {
  display: none;
}
/* 부모 라벨 교체 */
body:has(#themeNameBox.theme14) #contactModalContent .contactItem.groom-dad-info .call_tit,
body:has(#themeNameBox.theme14) #contactModalContent .contactItem.groom-mom-info .call_tit,
body:has(#themeNameBox.theme14) #contactModalContent .contactItem.bride-dad-info .call_tit,
body:has(#themeNameBox.theme14) #contactModalContent .contactItem.bride-mom-info .call_tit {
  font-size: 0;
  line-height: 0;
}
body:has(#themeNameBox.theme14) #contactModalContent .contactItem.groom-dad-info .call_tit::before,
body:has(#themeNameBox.theme14) #contactModalContent .contactItem.bride-dad-info .call_tit::before {
  content: "아버지";
  font-size: 16px;
  font-weight: 400;
  color: #111111;
  line-height: 1.5;
  display: inline-block;
}
body:has(#themeNameBox.theme14) #contactModalContent .contactItem.groom-mom-info .call_tit::before,
body:has(#themeNameBox.theme14) #contactModalContent .contactItem.bride-mom-info .call_tit::before {
  content: "어머니";
  font-size: 16px;
  font-weight: 400;
  color: #111111;
  line-height: 1.5;
  display: inline-block;
}
/* 통화/메시지 아이콘 - #4F6AB3 원형 28px + 흰 svg (테마12 아이콘 재사용) */
body:has(#themeNameBox.theme14) #contactModalContent .contactItem .call_icon {
  width: auto;
  padding: 0;
  display: flex;
  gap: 15px;
  align-items: center;
  justify-self: end;
}
body:has(#themeNameBox.theme14) #contactModalContent .contactItem .call_icon > a {
  margin: 0;
  width: 28px;
  height: 28px;
  border: 0 !important;
  border-radius: 50%;
  background-color: #4f6ab3 !important;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  text-decoration: none;
  font-size: 0 !important;
  line-height: 0;
}
body:has(#themeNameBox.theme14) #contactModalContent .contactItem .call_icon > a.mobile {
  background-image: url('/assets/tool/img/invitation/theme_2026/theme12_icon_call.svg') !important;
  background-size: 14px 14px;
}
body:has(#themeNameBox.theme14) #contactModalContent .contactItem .call_icon > a.sms {
  background-image: url('/assets/tool/img/invitation/theme_2026/theme12_icon_message.svg') !important;
  background-size: 17px 12px;
}
body:has(#themeNameBox.theme14) #contactModalContent .contactItem .call_icon > a .xeicon {
  display: none !important;
}

/* ============================================================
 * 모달 2. 참석 의사 전달 (#attendModalContent) - 피그마
 * ============================================================ */
body:has(#themeNameBox.theme14) #attendModalContent .modal-header {
  padding: 32px 30px 14px !important;
  text-align: center;
  display: block !important;
  position: relative;
  border-bottom: 0;
}
body:has(#themeNameBox.theme14) #attendModalContent .modal-title {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: #111111 !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
}
body:has(#themeNameBox.theme14) #attendModalContent .modal-title::after {
  content: "원활한 예식 진행을 위해 참석 정보를\A미리 알려주시면 감사하겠습니다";
  display: block;
  margin-top: 12px;
  white-space: pre-line;
  color: rgba(17, 17, 17, 0.5);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
body:has(#themeNameBox.theme14) #attendModalContent .modal-header .close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 22px;
  transform: none;
}
body:has(#themeNameBox.theme14) #attendModalContent .modal-body {
  padding: 12px 0 30px !important;
  background: #ffffff;
}
body:has(#themeNameBox.theme14) #attendModalContent .preview-attend-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: #111111;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
}
/* 좌측 라벨 숨김 */
body:has(#themeNameBox.theme14) #attendModalContent .col-form-label {
  display: none !important;
}
body:has(#themeNameBox.theme14) #attendModalContent .form-group.row {
  display: block;
  margin: 0;
  padding: 10px 13px;
}
body:has(#themeNameBox.theme14) #attendModalContent .form-group.row > .col-sm-9,
body:has(#themeNameBox.theme14) #attendModalContent .form-group.row > .col-12 {
  flex: none;
  max-width: 100%;
  width: 100%;
  padding: 0;
}
/* 토글: 풀폭 2등분, 45px, radius 4 */
body:has(#themeNameBox.theme14) #attendModalContent .btn-group-toggle {
  display: flex !important;
  gap: 8px;
  width: 100% !important;
  grid-template-columns: none;
}
body:has(#themeNameBox.theme14) #attendModalContent .btn-group-toggle > label.btn {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 45px;
  padding: 10px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  border: 0.5px solid rgba(17, 17, 17, 0.5) !important;
  border-radius: 4px !important;
  color: #111111 !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
  letter-spacing: 0;
  white-space: nowrap;
}
/* 신랑측/신부측(1행) active - #364A7F */
body:has(#themeNameBox.theme14) #attendModalContent .form-group:nth-of-type(1) .btn-group-toggle > label.btn.active {
  background: #364a7f !important;
  color: #ffffff !important;
  border-color: #364a7f !important;
}
/* 참석가능/불가(2행) active - #4F6AB3 */
body:has(#themeNameBox.theme14) #attendModalContent .form-group:nth-of-type(2) .btn-group-toggle > label.btn.active {
  background: #4f6ab3 !important;
  color: #ffffff !important;
  border-color: #4f6ab3 !important;
}
body:has(#themeNameBox.theme14) #attendModalContent .btn-group-toggle > label.btn input[type="radio"] {
  display: none;
}
/* 성명 행 */
body:has(#themeNameBox.theme14) #attendModalContent .form-group:nth-of-type(3) {
  padding: 30px 0 0;
}
body:has(#themeNameBox.theme14) #attendModalContent .form-group:nth-of-type(3) > .col-sm-9::before,
body:has(#themeNameBox.theme14) #attendModalContent .form-group:nth-of-type(3) > .col-12::before {
  content: "성함";
  display: block;
  padding: 0 13px 10px;
  color: #111111;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 13px;
  font-weight: 600;
}
body:has(#themeNameBox.theme14) #attendModalContent .form-group:nth-of-type(3) .input-group,
body:has(#themeNameBox.theme14) #attendModalContent .input-group.split {
  display: flex !important;
  gap: 8px;
  padding: 0 13px;
  margin: 0;
  flex-wrap: nowrap;
  grid-template-columns: none;
}
body:has(#themeNameBox.theme14) #attendModalContent .input-group.split {
  margin-bottom: 10px !important;
}
body:has(#themeNameBox.theme14) #attendModalContent .form-group:nth-of-type(3) .input-group input.form-control {
  flex: 1 1 189px;
  width: auto !important;
  max-width: 189px;
  min-width: 0;
  height: 45px;
  padding: 10px;
  background: #ffffff;
  border: 0.5px solid #30312e;
  border-radius: 4px !important;
  color: #111111;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  font-size: 12px;
  font-weight: 400;
}
body:has(#themeNameBox.theme14) #attendModalContent .form-group:nth-of-type(3) .input-group input.form-control::placeholder {
  color: rgba(17, 17, 17, 0.3);
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  font-size: 10px;
  font-weight: 400;
}
body:has(#themeNameBox.theme14) #attendModalContent .input-group-append {
  margin: 0;
  flex: 0 0 137px;
}
/* 동행추가/삭제: #4F6AB3 + 흰 13px 600, +/- 표기 */
body:has(#themeNameBox.theme14) #attendModalContent .input-group-append .btn,
body:has(#themeNameBox.theme14) #attendModalContent .btn-add-companion {
  width: 137px;
  min-height: 45px;
  height: 45px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #4f6ab3 !important;
  border: 0.5px solid rgba(17, 17, 17, 0.5);
  border-radius: 4px !important;
  color: #ffffff !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 13px;
  font-weight: 600 !important;
  box-shadow: none;
  white-space: nowrap;
}
body:has(#themeNameBox.theme14) #attendModalContent .input-group-append .btn i.xeicon {
  display: none;
}
body:has(#themeNameBox.theme14) #attendModalContent .btn-add-companion::before {
  content: "+";
}
body:has(#themeNameBox.theme14) #attendModalContent .btn-del-companion::before {
  content: "-";
}
/* 제출 버튼 */
body:has(#themeNameBox.theme14) #attendModalContent .btn-dark.btn-block {
  margin: 20px 13px 0;
  width: calc(100% - 26px);
  height: 45px;
  background: #4f6ab3 !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 13px;
  font-weight: 600;
}

/* ============================================================
 * 모달 3. 방명록 작성하기 (#gueseditModalContent / 수정 #guestUpdateModalContent) - 피그마
 * ============================================================ */
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-title,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-title {
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 18px;
  font-weight: 600;
}
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-body,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-body {
  padding: 25px 30px 30px;
}
body:has(#themeNameBox.theme14) #gueseditModalContent.guestbook-write-modal .form-group,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .form-group {
  margin-bottom: 25px;
}
/* 라벨 13px 600 + 라벨↔인풋 7px */
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-body label,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-body label {
  display: block;
  margin-bottom: 7px;
  padding: 0;
  color: #111111 !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
/* 인풋 45px / 0.5px #4F6AB3 / radius 4 */
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-body input.form-control,
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-body textarea.form-control,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-body input.form-control,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-body textarea.form-control {
  min-height: 45px;
  padding: 10px;
  border: 0.5px solid #4f6ab3;
  border-radius: 4px;
  background: #ffffff;
  color: #111111;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  font-size: 12px;
}
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-body textarea.form-control,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-body textarea.form-control {
  min-height: 80px;
}
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-body input.form-control::placeholder,
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-body textarea.form-control::placeholder,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-body input.form-control::placeholder,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-body textarea.form-control::placeholder {
  color: rgba(17, 17, 17, 0.3);
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  font-size: 10px;
  font-weight: 400;
}
/* 등록하기: 풀폭 45px #4F6AB3 흰 13px 600 */
body:has(#themeNameBox.theme14) #gueseditModalContent .modal-body .btn-dark.btn-block,
body:has(#themeNameBox.theme14) #guestUpdateModalContent .modal-body .btn-dark.btn-block {
  min-height: 45px;
  height: 45px;
  border: 0 !important;
  border-radius: 4px !important;
  background: #4f6ab3 !important;
  color: #ffffff !important;
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 13px;
  font-weight: 600;
}

/* ============================================================
 * 0.5px 보더 -> 물리 헤어라인 처리
 * 보더는 DPR 1 화면에서 1px로 반올림되므로,
 * - 4면 보더 박스: 가상요소를 200% 크기로 만들어 scale(0.5) (라운드는 2배 지정)
 * - 하단 보더 행: 1px 가상요소를 scaleY(0.5) (way-guide와 동일 기법)
 * 인풋(input/textarea)은 가상요소가 불가능해 0.5px 보더 유지 (실기기 DPR 2+에선 동일하게 얇게 보임)
 * ============================================================ */

/* ---------- A. 4면 보더 박스: 원본 보더 제거 + relative ---------- */
#themeNameBox.theme14 .btn-contactme,
#themeNameBox.theme14 .weddinginfo-navi button,
#themeNameBox.theme14 .preview-bank-wrap .copy-bank,
#themeNameBox.theme14 .preview-bank-wrap .kakaopay,
#themeNameBox.theme14 .preview-guestbook-wrap .book_btn_top a,
body:has(#themeNameBox.theme14) #attendModalContent .btn-group-toggle > label.btn,
body:has(#themeNameBox.theme14) #attendModalContent .input-group-append .btn,
body:has(#themeNameBox.theme14) #attendModalContent .btn-add-companion {
  position: relative;
  border: 0 !important;
}
/* 헤어라인 가상요소: 2배 크기 + scale(0.5) -> 시각 0.5px 보더 */
#themeNameBox.theme14 .btn-contactme::after,
#themeNameBox.theme14 .weddinginfo-navi button::after,
#themeNameBox.theme14 .preview-bank-wrap .copy-bank::after,
#themeNameBox.theme14 .preview-bank-wrap .kakaopay::after,
#themeNameBox.theme14 .preview-guestbook-wrap .book_btn_top a::after,
body:has(#themeNameBox.theme14) #attendModalContent .btn-group-toggle > label.btn::after,
body:has(#themeNameBox.theme14) #attendModalContent .input-group-append .btn::after,
body:has(#themeNameBox.theme14) #attendModalContent .btn-add-companion::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  box-sizing: border-box;
  /* 모달은 body 직속이라 #themeNameBox 의 변수가 안 닿음 → 폴백 필수
   * (변수 무효 시 border 선언 전체가 무효화되어 선이 사라짐) */
  border: 1px solid var(--t14-blue, #4f6ab3);
  border-radius: 8px;          /* 시각 4px */
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
}
/* 계좌복사/카카오페이: 시각 radius 5 */
#themeNameBox.theme14 .preview-bank-wrap .copy-bank::after,
#themeNameBox.theme14 .preview-bank-wrap .kakaopay::after {
  border-radius: 10px;
}
/* 모달 토글/동행 버튼: 보더색 rgba(17,17,17,.5) */
body:has(#themeNameBox.theme14) #attendModalContent .btn-group-toggle > label.btn::after,
body:has(#themeNameBox.theme14) #attendModalContent .input-group-append .btn::after,
body:has(#themeNameBox.theme14) #attendModalContent .btn-add-companion::after {
  border-color: rgba(17, 17, 17, 0.5);
}
/* 토글 active: 배경색과 동일한 보더색 (기존 디자인 유지) */
body:has(#themeNameBox.theme14) #attendModalContent .form-group:nth-of-type(1) .btn-group-toggle > label.btn.active::after {
  border-color: #364a7f;
}
body:has(#themeNameBox.theme14) #attendModalContent .form-group:nth-of-type(2) .btn-group-toggle > label.btn.active::after {
  border-color: #4f6ab3;
}

/* ---------- B. 하단 보더 행: scaleY(0.5) 헤어라인 ---------- */
#themeNameBox.theme14 .preview-bank-wrap .accordion-box .bank,
#themeNameBox.theme14 .guestbook-list-txt,
body:has(#themeNameBox.theme14) #contactModalContent .contactItem,
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:last-child {
  position: relative;
  border-bottom: 0;
}
#themeNameBox.theme14 .preview-bank-wrap .accordion-box .bank::after,
#themeNameBox.theme14 .guestbook-list-txt::after,
body:has(#themeNameBox.theme14) #contactModalContent .contactItem::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--t14-blue, #4f6ab3);   /* 모달(body 직속)에서도 동작하도록 폴백 */
  transform: scaleY(0.5);
  transform-origin: bottom;
  pointer-events: none;
}
/* 연락하기 모달 행: 보더색 rgba(17,17,17,.3) */
body:has(#themeNameBox.theme14) #contactModalContent .contactItem::after {
  background: rgba(17, 17, 17, 0.3);
}
/* 연락하기 모달 그룹 헤더(가상요소라 추가 가상요소 불가):
 * border-bottom 대신 배경 그라디언트 0.5px 밑줄 (배경은 픽셀 스냅 없이 AA 렌더링됨) */
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.groom)::before,
body:has(#themeNameBox.theme14) #contactModalContent .contactItem:has(.call_tit.bride)::before {
  border-bottom: 0;
  background-image: linear-gradient(rgba(17, 17, 17, 0.3), rgba(17, 17, 17, 0.3));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.5px;
}

/* ============================================================
 * (예식종료) 감사글 - 테마14
 *  - 감사글(preview-testimonial-wrap)은 초대글(preview-invi-wrap)과 형제 블록이라
 *    기존 테마14 CSS의 장식/레이아웃 규칙이 적용되지 않았다.
 *  - 그 결과 _end(예식종료) 뷰에서 ① 본문이 섹션 상단 모서리 벡터(z-index:0)에
 *    가려 보이지 않고 ② 하단 꽃 벡터(vector_3,4)가 표시되지 않았다.
 *  - 초대글과 동일한 체계로: 상단 패딩으로 본문을 모서리 벡터 아래로 내리고,
 *    콘텐츠를 z-index:1 로 올리고, 본문 하단에 좌하/우하 꽃 벡터를 배치한다.
 * ============================================================ */
/* 감사글 컨테이너: 상단 모서리 벡터 공간 확보(초대글과 동일한 159px 상단 패딩) */
#themeNameBox.theme14 .preview-testimonial-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 159px 34px 30px;
}
/* 콘텐츠를 상단 모서리 벡터(invitation-wrap ::before/::after, z-index:0) 위로 */
#themeNameBox.theme14 .preview-testimonial-wrap > * {
  position: relative;
  z-index: 1;
}
#themeNameBox.theme14 .preview-testimonial-wrap > .preview-inner-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  align-self: stretch;
  padding: 0;
}
/* 본문(감사글) 영역: 중앙 정렬 + 하단 벡터 배치 기준
 * width:100% 고정 → 콘텐츠가 짧아도 본문 블록이 섹션 전체 폭을 유지해
 * 하단 좌/우 꽃 벡터(::before/::after)가 가운데로 모이지 않고 양 끝에 고정됨 */
#themeNameBox.theme14 .preview-testimonial-wrap .preview-message-wrap.preview-testimonial-message {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  align-self: stretch;
  margin: 0;
  padding: 0 16px;
  background: transparent;
  text-align: center;
}
#themeNameBox.theme14 .preview-testimonial-wrap .preview-testimonial-message p {
  color: var(--t14-ink);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: 0;
}
/* 하단 좌하/우하 꽃 벡터: 초대글 본문과 동일 (vector_3 좌하, vector_4 우하) */
#themeNameBox.theme14 .preview-testimonial-wrap .preview-testimonial-message::before {
  content: "";
  position: absolute;
  bottom: -56px;
  left: -24px;
  width: 151px;
  height: 250px;
  background-image: url("/assets/tool/img/invitation/theme_2026/theme14_invite_vector_3.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left bottom;
  pointer-events: none;
  z-index: -1;
}
#themeNameBox.theme14 .preview-testimonial-wrap .preview-testimonial-message::after {
  content: "";
  position: absolute;
  bottom: -56px;
  right: -24px;
  width: 151px;
  height: 250px;
  background-image: url("/assets/tool/img/invitation/theme_2026/theme14_invite_vector_4.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
  pointer-events: none;
  z-index: -1;
}
/* 감사글 이미지: 본문 아래 풀폭 박스 (초대글 사진과 동일 규격 360x214) */
#themeNameBox.theme14 .preview-testimonial-wrap .preview-testimonial-img {
  width: calc(100% + 68px);
  max-width: none;
  margin: 60px -34px 0;
  padding-top: 100px;
}
#themeNameBox.theme14 .preview-testimonial-wrap .preview-testimonial-img .cropper-preview {
  width: 100%;
  aspect-ratio: 360 / 214;
  height: auto;
  overflow: hidden;
  background: #d9d9d9;
}
#themeNameBox.theme14 .preview-testimonial-wrap .preview-testimonial-img .cropper-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  display: block;
}

/* ============================================================
 * [공통 수정] 본문 하단 꽃 벡터가 콘텐츠 길이에 따라 가운데로 모이는 문제
 *  - 원인: 본문 블록(preview-*-message)이 콘텐츠 폭만큼 줄어들면서
 *    하단 좌/우 벡터(::before/::after)의 기준 폭도 함께 좁아져 가운데로 모임
 *  - 해결: 본문 블록을 항상 섹션 전체 폭으로 고정 → 상단 모서리 벡터와 동일하게
 *    좌/우 끝에 고정 (초대글/인사글/감사글 공통)
 * ============================================================ */
/* 초대글(초대자) 본문 전체 폭 고정 */
#themeNameBox.theme14 .preview-invi-wrap > .preview-message-wrap.preview-invitation-message,
#themeNameBox.theme14 .preview-invi-wrap > .preview-message-wrap.preview-insa-message {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  align-self: stretch;
  margin-left: 0;
  margin-right: 0;
}

/* ============================================================
 * 인사글(비초대자) 하단 꽃 벡터 - 테마14
 *  - 기존 셀렉터가 잘못된 부모(.preview-invi-wrap)를 가리켜 인사글에는
 *    하단 벡터가 적용되지 않았다. 실제 위치(.preview-insa-wrap)로 보정하고
 *    본문 폭을 전체로 고정해 초대글/감사글과 동일하게 표시되도록 한다.
 * ============================================================ */
/* 인사글 컨테이너: 초대글과 동일하게 상단 패딩으로 본문을 상단 모서리 벡터 아래로 내리고
 * 콘텐츠를 상단 벡터(z-index:0) 위로 올린다 (비초대자 뷰 상단 겹침 방지) */
#themeNameBox.theme14 .preview-insa-wrap {
  position: relative;
  padding: 159px 34px 30px;
}
#themeNameBox.theme14 .preview-insa-wrap > * {
  position: relative;
  z-index: 1;
}
#themeNameBox.theme14 .preview-insa-wrap > .preview-inner-wrap {
  width: 100%;
  padding: 0;
}
#themeNameBox.theme14 .preview-insa-wrap .preview-message-wrap.preview-insa-message {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  align-self: stretch;
  margin-left: 0;
  margin-right: 0;
}
#themeNameBox.theme14 .preview-insa-wrap .preview-message-wrap.preview-insa-message::before {
  content: "";
  position: absolute;
  bottom: -56px;
  left: -24px;
  width: 151px;
  height: 250px;
  background-image: url("/assets/tool/img/invitation/theme_2026/theme14_invite_vector_3.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left bottom;
  pointer-events: none;
  z-index: -1;
}
#themeNameBox.theme14 .preview-insa-wrap .preview-message-wrap.preview-insa-message::after {
  content: "";
  position: absolute;
  bottom: -56px;
  right: -24px;
  width: 151px;
  height: 250px;
  background-image: url("/assets/tool/img/invitation/theme_2026/theme14_invite_vector_4.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
  pointer-events: none;
  z-index: -1;
}
/* 인사글(비초대자) 본문 글자색/서체: 라이트 배경(#efeae6)에서 글자가 보이도록 잉크색 강제.
 * (기존 #themeNameBox.theme14 .preview-message-wrap { color: rgba(239,234,230,.68) } 의
 *  라이트 컬러가 인사글에 그대로 적용되어 배경과 같은 톤 → '내용이 안 보이던' 문제 수정.
 *  초대글/감사글은 잉크색 오버라이드가 있었으나 인사글만 누락되어 있었음) */
#themeNameBox.theme14 .preview-insa-wrap .preview-message-wrap.preview-insa-message,
#themeNameBox.theme14 .preview-insa-wrap .preview-message-wrap.preview-insa-message p {
  color: var(--t14-ink);
  font-family: "Eulyoo1945", "JejuMyeongjo", serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: 0;
}
#themeNameBox.theme14 .preview-insa-wrap .preview-message-wrap.preview-insa-message {
  padding: 0 16px;
  text-align: center;
}

/* ============================================================
 * [공통] 본문 최소 높이 - 콘텐츠가 짧거나 비어 있어도 상/하단 꽃 벡터가
 *  세로로 겹치지 않도록 최소 세로 공간을 확보한다.
 *  - 벡터 이미지가 250px 로 크기 때문에, 본문이 짧으면 하단 꽃이 상단 꽃까지
 *    올라와 겹친다 → 본문에 충분한 최소 높이를 주고, 짧은 글은 세로 가운데 정렬해
 *    상단 벡터와 떨어지게 한다. (하단 꽃은 본문 하단 기준이라 함께 아래로 내려감)
 *  - 가로는 width:100% 로 고정(상단 그룹에서 처리), 세로는 min-height 로 고정.
 *  (사용자 요청: 최소 높이/가로 사이즈 고정)
 * ============================================================ */
#themeNameBox.theme14 .preview-invi-wrap > .preview-message-wrap.preview-invitation-message,
#themeNameBox.theme14 .preview-insa-wrap .preview-message-wrap.preview-insa-message,
#themeNameBox.theme14 .preview-testimonial-wrap .preview-message-wrap.preview-testimonial-message {
  min-height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 표지 이름: 우측 쏠림/가로 넘침 방지
 *  - flex 정렬이 가운데로 안 맞는 문제 → 날짜(.main-date-txt)처럼 블록+text-align:center 로 전환
 *    (같은 컨테이너에서 블록 가운데정렬은 정상 동작함)
 *  - 길면 어절(이름/접속사) 단위로 줄바꿈(word-break:keep-all), 음절 깨짐 방지 */
#themeNameBox.theme14 .theme-name-stack {
  display: block !important;
  height: auto;
  width: 100%;
  max-width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;       /* 줄바꿈 허용 */
  word-break: normal;        /* 한글: 꽉 차면 어절/음절 단위로 다음 줄 */
  overflow-wrap: break-word; /* 긴 단어도 가장자리에서 다음 줄로 */
  line-height: 1.15;
}
#themeNameBox.theme14 .theme-name-stack > span {
  display: inline;
  white-space: normal;       /* span 내부도 줄바꿈 허용 (꽉 차면 밑으로) */
  vertical-align: baseline;
}

/* 초대자(초대글) 본문 최소 높이: 250px (요청) */
#themeNameBox.theme14 .preview-invi-wrap > .preview-message-wrap.preview-invitation-message {
  min-height: 250px;
}