@import url('/storefarm/card/v3/skin/css/font.css');

:root {
    --skin-font-size-base: 14px;
    --skin-accent: #e4b0b0;
    --skin-text: #333;
    --skin-text-sub: #727272;
    --skin-text-muted: #c1c1c1;
    --skin-text-light: #c8c8c8;
    --skin-main-color: #fff;
    --skin-main-font: 'MaruBuri';
    --skin-main-font-bold: 'MaruBuri-SemiBold';
    --skin-bg: #fff;
    --skin-bg-gray: #e4e4e4;
    --skin-bg-light: #e4b0b013;
    --skin-bg-cream: #faf9f5;
    --skin-kakao: #f9e000;
    --skin-groom: #8fb1fb;
    --skin-bride: #d57f7f;
    --skin-border: #e4e4e4;
    --skin-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
    --skin-shadow-sm: 0px 0px 12px rgba(0, 0, 0, 0.08);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* preview_nav.js가 hidden 속성으로 섹션/인트로/BGM을 on/off 처리하는데,
   각 섹션의 display: flex/grid가 브라우저 기본 [hidden] 규칙을 덮어써 감춰지지 않는 문제 방지.
   특정 셀렉터 + skin 전체 캐치올 (신규 섹션이 관례를 안 따라도 안전) */
.v3-skin-section[hidden],
.v3-skin-intro-holder[hidden],
.skin_bgm[hidden] {
    display: none !important;
}
.v3-skin-wrap [hidden] {
    display: none !important;
}

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar {
    display: none;
}

body.v3-skin {
    width: var(--skin-width);
    margin: 0 auto;
    background: var(--skin-bg);
    color: var(--skin-text);
    font-family: var(--skin-main-font), 'Pretendard-Regular', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body.v3-skin::-webkit-scrollbar {
    display: none;
}
body h1,h2,h3,h4,h5,h6 {
    margin: 0;
    font-weight: normal;
}
body p {
    margin: 0;
}

.v3-skin-wrap {
    position: relative;
    width: 100%;
    background: var(--skin-bg);
    overflow: hidden;
}

/* 워터마크와 메인 컨텐츠 분리 래퍼.
 * .skin_bgm 이 position:absolute 로 이 래퍼를 앵커로 삼음 → 워터마크가 있어도
 * bgm 버튼은 메인 컨텐츠 상단에 위치 (워터마크 영역 침범 X).
 * (섹션별 이너 래퍼 .v3-skin-inner 는 max-width 360 로 별개 존재 → 이름 충돌 방지 위해 .v3-skin-body 사용) */
.v3-skin-body {
    position: relative;
    width: 100%;
}

/* bgm on/off — 우측 상단 고정 */
.skin_bgm {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 100;
}

.skin_bgm__btn {
    display: block;
    width: 38px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

.skin_bgm__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.32);
}

.skin_bgm__dot {
    display: block;
    flex-shrink: 0;
    width: 2px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
}

.skin_bgm.is-on .skin_bgm__dot {
    animation: skin-bgm-dot 0.9s ease-in-out infinite;
}

.skin_bgm.is-on .skin_bgm__dot:nth-child(1),
.skin_bgm.is-on .skin_bgm__dot:nth-child(3) {
    animation-delay: 0.12s;
}

.skin_bgm.is-on .skin_bgm__dot:nth-child(4) {
    animation-delay: 0.24s;
}

.skin_bgm.is-on .skin_bgm__dot:nth-child(2) {
    animation-delay: 0s;
}

@keyframes skin-bgm-dot {
    0%,
    100% {
        height: 2px;
    }

    50% {
        height: 10px;
    }
}

/* intro */
.v3-skin-intro-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.6s ease;
}

.v3-skin-intro-wrap.is-fade-out {
    opacity: 0;
    pointer-events: none;
}

.v3-skin-intro-wrap.is-hidden {
    display: none;
}


/* main wrap
   isolation:isolate — video의 mix-blend-mode 범위를 이 wrap 내부로 한정
   (main 이외 하위 섹션까지 블렌드 대상이 되지 않도록) */
.v3-skin-main-wrap {
    position: relative;
    isolation: isolate;
}

/* effect */
.v3-skin-effect {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

/* position:absolute이 hidden 속성의 UA display:none을 덮어써 안 사라지는 것 방지 */
.v3-skin-effect[hidden] {
    display: none;
}

.v3-skin-effect video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* section */
.v3-skin-section {
    width: 100%;
}

/* 스크롤 리빌 (section_reveal.js 가 로드되면 is-reveal-init 붙어 초기 hidden 상태,
 * 뷰포트 진입 시 is-in-view 로 슬라이드-업 페이드-인. JS 미로드 시 자연 렌더.) */
.v3-skin-section.is-reveal-init {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity   0.7s cubic-bezier(0.33, 1, 0.68, 1),
        transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    will-change: opacity, transform;
}
.v3-skin-section.is-reveal-init.is-in-view {
    opacity: 1;
    transform: translateY(0);
}
/* 접근성 — 사용자가 애니메이션 감소 선호하면 리빌 스킵 */
@media (prefers-reduced-motion: reduce) {
    .v3-skin-section.is-reveal-init {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.v3-skin-title {
    margin: 0;
    color: var(--skin-accent);
    font-size: 20px;
    font-family: var(--skin-main-font-bold);
    line-height: 1;
    text-align: center;
}

.v3-skin-desc {
    margin: 0;
    color: var(--skin-text-sub);
    font-size: var(--skin-font-size-base);
    line-height: 175%;
    text-align: center;
}

.v3-skin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--skin-font-size-base) * 0.5);
    width: 100%;
    padding: 17px;
    border: 0;
    border-radius: 8px;
    background: var(--skin-accent);
    color: #fff;
    font-family: inherit;
    font-size: var(--skin-font-size-base);
    font-family: var(--skin-main-font-bold);
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.v3-skin-btn img {
    width: calc((var(--skin-font-size-base)*1.5));
    height: calc((var(--skin-font-size-base)*1.5));
}

.v3-skin-btn--outline {
    background: #fff;
    border: 1px solid var(--skin-border);
    color: var(--skin-text);
    padding: var(--skin-font-size-base) 20px;
}

.v3-skin-btn--kakao {
    background: var(--skin-kakao);
    color: var(--skin-text);
    border-radius: 100px;
    padding: 16px 45px;
}

.v3-skin-btn--dark {
    background: var(--skin-text);
    color: #fff;
    border-radius: 100px;
    padding: 16px 45px;
}

.v3-skin-placeholder {
    background: var(--skin-bg-gray);
}

.v3-skin-inner {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

/* 연락하기 팝업 사용 토글 — is_call_popup='F'이면 section_call의 축하 연락하기 버튼 숨김 */
html[data-call-popup="F"] .section_call [data-pop="popup_call"] { display: none; }

/* 화환 표시 토글
 * data-display="F" — 배너(market) / decline(nothanks)
 * data-display="T" — 하단고정 플로팅 (배너·decline 페이드아웃)
 * gift 전환은 display:none, display 전환은 opacity/transform 애니메이션
 */
.section_flower[data-gift="nothanks"] .section_flower__banner {
    display: none;
}

.section_flower[data-gift="market"] .section_flower__decline,
.section_flower:not([data-gift]) .section_flower__decline {
    display: none;
}

/* floating 은 section_flower.js 가 <html> 직속으로 이동시켜 section 의 자손이 아님.
 * 따라서 gift/display attr 은 floating 요소 자체에 복사되어 있고, 셀렉터도 floating 기준. */
.section_flower__floating[data-gift="market"] .section_flower__floating-label,
.section_flower__floating:not([data-gift="nothanks"]) .section_flower__floating-label {
    display: none;
}

.section_flower__floating[data-gift="nothanks"] .section_flower__floating-btn {
    display: none;
}

.section_flower[data-display="T"] {
    padding-top: 0;
    padding-bottom: 0;
}

/* 언어 전환 — 고정 레이블(사용자 입력 아닌 텍스트)에만 사용.
 * 사용법:
 *   <span data-lang-only="ko">신랑</span><span data-lang-only="en">Groom</span>
 * 규약:
 *   html[data-lang="ko"] 이면 ko만 노출, en 감춤
 *   html[data-lang="en"] 이면 en만 노출, ko 감춤
 * 타이틀 영문 사용 옵션(한국어 모드에서 타이틀만 영문):
 *   <span data-lang-only="ko" data-lang-title>...</span>
 *   <span data-lang-only="en" data-lang-title>...</span>
 *   html[data-lang="ko"][data-title-lang-en="1"] 일 때 title 마킹 요소는 en 우선.
 */
html[data-lang="ko"] [data-lang-only="en"]:not([data-lang-title]) { display: none; }
html[data-lang="en"] [data-lang-only="ko"] { display: none; }
html[data-lang="ko"] [data-lang-only="ko"][data-lang-title] { display: none; }
html[data-lang="ko"] [data-lang-only="en"][data-lang-title] { display: inline; }
html[data-lang="ko"]:not([data-title-lang-en="T"]) [data-lang-only="ko"][data-lang-title] { display: inline; }
html[data-lang="ko"]:not([data-title-lang-en="T"]) [data-lang-only="en"][data-lang-title] { display: none; }

/* 메인 사진 필터 효과 (data-filter 속성이 6개 section_main* 래퍼에 붙음) */
[data-section^="main"][data-filter="1"]  img[class*="__photo"] { filter: grayscale(100%); }
[data-section^="main"][data-filter="2"]  img[class*="__photo"] { filter: saturate(130%); }
[data-section^="main"][data-filter="3"]  img[class*="__photo"] { filter: brightness(107.5%); }
[data-section^="main"][data-filter="4"]  img[class*="__photo"] { filter: brightness(110%); }
[data-section^="main"][data-filter="5"]  img[class*="__photo"] { filter: brightness(115%); }
[data-section^="main"][data-filter="6"]  img[class*="__photo"] { filter: sepia(15%) saturate(120%); }
[data-section^="main"][data-filter="7"]  img[class*="__photo"] { filter: sepia(22%) saturate(120%); }
[data-section^="main"][data-filter="8"]  img[class*="__photo"] { filter: sepia(30%) saturate(120%); }
[data-section^="main"][data-filter="9"]  img[class*="__photo"] { filter: contrast(107.5%) saturate(120%); }
[data-section^="main"][data-filter="10"] img[class*="__photo"] { filter: contrast(112%) saturate(120%); }
[data-section^="main"][data-filter="11"] img[class*="__photo"] { filter: contrast(120%) saturate(120%); }

/* 메인 섹션 스위치 — variant 중 data-main-type 매칭되는 것만 표시 */
.v3-skin-main-switch {
    position: relative;
}

.v3-skin-main-variant { display: none; }
.v3-skin-main-switch[data-main-type="main"]  > .v3-skin-main-variant[data-main-value="main"],
.v3-skin-main-switch[data-main-type="main2"] > .v3-skin-main-variant[data-main-value="main2"],
.v3-skin-main-switch[data-main-type="main3"] > .v3-skin-main-variant[data-main-value="main3"],
.v3-skin-main-switch[data-main-type="main4"] > .v3-skin-main-variant[data-main-value="main4"],
.v3-skin-main-switch[data-main-type="main5"] > .v3-skin-main-variant[data-main-value="main5"],
.v3-skin-main-switch[data-main-type="main6"] > .v3-skin-main-variant[data-main-value="main6"],
.v3-skin-main-switch[data-main-type="main7"] > .v3-skin-main-variant[data-main-value="main7"],
.v3-skin-main-switch[data-main-type="main8"] > .v3-skin-main-variant[data-main-value="main8"],
.v3-skin-main-switch[data-main-type="main9"] > .v3-skin-main-variant[data-main-value="main9"],
.v3-skin-main-switch[data-main-type="main10"] > .v3-skin-main-variant[data-main-value="main10"],
.v3-skin-main-switch[data-main-type="main11"] > .v3-skin-main-variant[data-main-value="main11"] {
    display: block;
}

/* intro holder — 단일 활성 variant만 렌더. preview_intro.js가 variant 변경 시 fetch + swap */
.v3-skin-intro-holder.is-dismissed .v3-skin-intro-wrap {
    display: none !important;
}

/* "인트로 고정" 토글(is-fixed) 이 켜져 있으면 애니메이션 완료 후 fade-out/hide 없이
   마지막 프레임(is-moving) 유지. intro.js 가 클래스만 add 하고 실제 시각 효과는 CSS 라서 여기서 무효화 가능.
   토글 OFF 시엔 이 override 가 없어 자연스럽게 한 번 재생 후 사라진다. */
.v3-skin-intro-holder.is-fixed .v3-skin-intro-wrap.is-fade-out {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
}
.v3-skin-intro-holder.is-fixed .v3-skin-intro-wrap.is-hidden {
    display: flex !important;
}

/* 드래그 모드 힌트 — 대상 요소에 점선 outline + move 커서 (ending 크레딧과 동일 UX).
   대상 셀렉터: .v3-skin-intro-content 아래 bg/overlay가 아닌 컨텐츠 컨테이너들. */
.v3-skin-intro-holder[data-use-drag="T"] .v3-skin-intro-content > [class*="-content"]:not([class*="-bg"]):not([class*="-overlay"]),
.v3-skin-intro-holder[data-use-drag="T"] .v3-skin-intro-content-inner {
    cursor: move;
    outline: 1px dashed rgba(255, 255, 255, 0.65);
    outline-offset: 6px;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
}

/* 드래그 오프셋 반영 — individual translate 프로퍼티라 기존 transform(translate(-50%,-50%) 등)과 합성됨.
   var 미설정 시 0 0 → 위치 변화 없음. */
.v3-skin-intro-holder .v3-skin-intro-content > [class*="-content"]:not([class*="-bg"]):not([class*="-overlay"]),
.v3-skin-intro-holder .v3-skin-intro-content-inner {
    translate: var(--intro-drag-x, 0) var(--intro-drag-y, 0);
}

/* lettering SVG의 원본 guide path(.cls-2) 는 항상 숨김.
   plugin이 <mask> 안에 clone을 만들어 애니메이션에 사용하므로 원본은 필요 없음.
   플러그인 실행 전(=DOM 삽입~JS 로드 사이)에 노출되는 시각적 잔상 제거.
   direct-child(>) 셀렉터라 <defs><mask> 안의 clone에는 영향 없음. */
.v3-skin-intro-holder svg[class*="intro-lettering"] > .cls-2 {
    display: none;
}

/* lettering SVG의 원본 letter path(.cls-1)도 동일 이슈로 강제 투명 유지.
   각 intro_lettering{N}.css의 색상 override 규칙(!important)이 clone과 원본 모두 매칭돼
   플러그인 실행 전 원본이 채워진 색으로 잠깐 노출되던 flash를 제거한다.
   플러그인이 원본을 곧 removeChild하지만 그 사이 반짝임 방지.
   구조: 원본 = <svg> > <g>(mask 없음) > .cls-1
        clone = <svg> > <g mask="..."> > .cls-1
   → :not([mask])로 원본 그룹만 매칭. clone 그룹은 배제되어 원래 색상 규칙 적용됨. */
.v3-skin-intro-holder svg[class*="intro-lettering"] > g:not([mask]) .cls-1 {
    fill: transparent !important;
    stroke: transparent !important;
}

/* 배경 모드 — motion(video) 선택 시 이미지 숨김, image 선택 시 video 숨김 */
.v3-skin-intro-holder[data-bg-mode="motion"] .v3-skin-intro-content [class*="-bg"] img { display: none; }
.v3-skin-intro-holder[data-bg-mode="image"]  .v3-skin-intro-content [class*="-bg"] video { display: none; }

/* section_main */
.section_main {
    position: relative;
    height: 700px;
    overflow: hidden;
}

.section_main__photo-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section_main__photo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
}

.section_main__title {
    position: absolute;
    top: 104px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'AlexBrush', 'Modern Romance', 'MaruBuri', serif;
    font-size: 100px;
    line-height: 100px;
    text-align: center;
    white-space: nowrap;
}

.section_main__badge {
    position: absolute;
    top: 536px;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 26px;
}

.section_main__date {
    position: absolute;
    top: 582px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Happy Time', 'RIDIBatang', 'MaruBuri', serif;
    font-size: 24px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.section_main__place {
    position: absolute;
    top: 622px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Pretendard-Regular', 'MaruBuri', sans-serif;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* section_main2 */
.section_main2 {
    position: relative;
    height: 700px;
    overflow: hidden;
    background: #f6f5f1;
}

.section_main2__bg {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
}

.section_main2__eyebrow {
    position: absolute;
    top: 104px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Hello Bridge Script', 'Hello Bride Script', serif;
    font-size: 42px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.section_main2__photo-wrap {
    position: absolute;
    top: 166px;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 274px;
    height: 362px;
    transform: translateX(-50%);
    border: 1px solid #c0bdb2;
    border-radius: 50%;
}

.section_main2__photo {
    width: 262px;
    height: 350px;
    object-fit: cover;
    border-radius: 50%;
}

.section_main2__desc {
    position: absolute;
    top: 554px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Pretendard-Regular', 'MaruBuri', sans-serif;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    text-transform: uppercase;
}

/* section_main3 */
.section_main3 {
    position: relative;
    height: 700px;
    overflow: hidden;
    background: #fbfbfb;
}

.section_main3__month,
.section_main3__day {
    position: absolute;
    top: 44px;
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Lora', Georgia, serif;
    font-size: 16px;
    line-height: 1;
    text-align: center;
}

.section_main3__month {
    left: 59px;
}

.section_main3__day {
    left: 313px;
}

.section_main3__date-line {
    position: absolute;
    top: 52px;
    left: 105px;
    width: 180px;
    height: 0;
    border-top: 1px solid #727272;
}

.section_main3__photo-wrap {
    position: absolute;
    top: 86px;
    left: 50%;
    width: 280px;
    height: 370px;
    transform: translateX(-50%);
    overflow: hidden;
    background: #fff;
}

.section_main3__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section_main3__title {
    position: absolute;
    top: 484px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Brother Signature', 'MaruBuri', serif;
    font-size: 40px;
    line-height: 1;
    text-align: center;
    text-transform: capitalize;
    white-space: nowrap;
}

.section_main3__names {
    position: absolute;
    top: 564px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Pretendard-Regular', 'MaruBuri', sans-serif;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.section_main3__desc {
    position: absolute;
    top: 602px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Pretendard-Regular', 'MaruBuri', sans-serif;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    text-transform: uppercase;
}

/* section_main4 */
.section_main4 {
    position: relative;
    height: 700px;
    overflow: hidden;
    background: #fff;
}

.section_main4__photo-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section_main4__photo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
}

.section_main4__eyebrow {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Happy Time', 'MaruBuri', serif;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.6em;
    text-align: center;
    white-space: nowrap;
}

.section_main4__title {
    position: absolute;
    top: 494px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Pinyon Script', 'Brother Signature', 'MaruBuri', serif;
    font-size: 52px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.section_main4__date {
    position: absolute;
    top: 584px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Happy Time', 'MaruBuri', serif;
    font-size: 22px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.section_main4__names {
    position: absolute;
    top: 624px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Pretendard-Regular', 'MaruBuri', sans-serif;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

/* section_main5 */
.section_main5 {
    position: relative;
    height: 700px;
    overflow: hidden;
}

.section_main5__photo-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section_main5__photo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
}

.section_main5__title {
    position: absolute;
    top: 308px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 323px;
    transform: translateX(-50%) rotate(-13.3deg);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'The Californication', 'Brother Signature', 'MaruBuri', serif;
    font-size: 96px;
    text-align: center;
    text-transform: capitalize;
}

.section_main5__title-line {
    display: block;
    line-height: 106px;
    white-space: nowrap;
}

.section_main5__title-line--wedding {
    line-height: 106px;
}

.section_main5__title-line--day {
    line-height: 92px;
}

.section_main5__meta {
    position: absolute;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section_main5__meta--top {
    top: 16px;
}

.section_main5__meta--bottom {
    top: 670px;
}

.section_main5__meta-item {
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Happy Time', 'MaruBuri', serif;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* section_main6 */
.section_main6 {
    position: relative;
    height: 700px;
    overflow: hidden;
}

.section_main6__photo-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section_main6__photo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
}

.section_main6__names {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--skin-main-color);
    font-family: 'Pretendard-Regular', 'MaruBuri', sans-serif;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.section_main6__title {
    position: absolute;
    top: 418px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 305px;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Finger Paint', 'Brother Signature', 'MaruBuri', serif;
    font-size: 70px;
    line-height: 82px;
    text-align: center;
    text-transform: capitalize;
}

.section_main6__title-line {
    display: block;
    white-space: nowrap;
}

/* section_main7 */
.section_main7 {
    position: relative;
    height: 700px;
    overflow: hidden;
    background: var(--theme-main-bg, #fff);
}

.section_main7__eyebrow {
    position: absolute;
    top: 47px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: #8d8d8d;
    font-family: var(--skin-main-font), 'MaruBuri', serif;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.section_main7__names {
    position: absolute;
    top: 82px;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: var(--skin-main-font-bold), 'MaruBuri-SemiBold', serif;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.section_main7__names [data-p-align-separator] {
    position: relative;
    top: 2px;
    font-family: var(--skin-main-font), 'MaruBuri', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
}

.section_main7__photo-wrap {
    position: absolute;
    top: 140px;
    left: 0;
    width: 100%;
    height: 560px;
    overflow: hidden;
}

.section_main7__photo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
}

/* section_main8 */
.section_main8 {
    position: relative;
    height: 700px;
    overflow: hidden;
    background: var(--theme-main-bg, #fbfbfb);
}

.section_main8__names {
    position: absolute;
    top: 58px;
    left: 37px;
    margin: 0;
    color: var(--skin-main-color);
    font-family: var(--skin-main-font), 'MaruBuri', serif;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.section_main8__photo-wrap {
    position: absolute;
    top: 110px;
    left: 0;
    width: 100%;
    height: 390px;
    overflow: hidden;
    background: #acacac;
}

.section_main8__photo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
}

.section_main8__meta {
    position: absolute;
    top: 536px;
    right: 30px;
    margin: 0;
    color: var(--skin-main-color);
    font-family: var(--skin-main-font), 'MaruBuri', serif;
    font-size: 16px;
    line-height: 1.8;
    text-align: right;
    text-transform: uppercase;
}

.section_main8__time,
.section_main8__place {
    margin: 0;
}

/* section_main9 */
.section_main9 {
    position: relative;
    height: 700px;
    overflow: hidden;
    background: var(--theme-main-bg, #fff);
}

.section_main9__date {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Lora', Georgia, serif;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.section_main9__dow {
    position: absolute;
    top: 74px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: #8d8d8d;
    font-family: 'Lora', Georgia, serif;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.section_main9__photo-wrap {
    position: absolute;
    top: 111px;
    left: 50%;
    width: 335px;
    height: 506px;
    transform: translateX(-50%);
    overflow: hidden;
    border-radius: 167.5px 167.5px 0 0;
    background: #fff;
}

.section_main9__photo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
}

.section_main9__names {
    position: absolute;
    top: 642px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Pretendard-Regular', 'MaruBuri', sans-serif;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

/* section_main10 */
.section_main10 {
    position: relative;
    height: 700px;
    overflow: hidden;
    background: var(--theme-main-bg, #fff);
}

.section_main10__names {
    position: absolute;
    top: 45px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 30px;
    transform: translateX(-50%);
}

.section_main10__name {
    color: var(--skin-main-color);
    font-family: var(--skin-main-font), 'MaruBuri', serif;
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: 0.35em;
    text-align: center;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
}

.section_main10__sep {
    color: #8d8d8d;
    font-family: 'Lora', Georgia, serif;
    font-size: 20px;
    line-height: 1;
}

.section_main10__photo-wrap {
    position: absolute;
    top: 162px;
    left: 50%;
    width: 350px;
    height: 351px;
    transform: translateX(-50%);
    overflow: hidden;
    background: #cfcfcf;
}

.section_main10__photo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
}

.section_main10__meta {
    position: absolute;
    top: 545px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translateX(-50%);
}

.section_main10__datetime,
.section_main10__place {
    margin: 0;
    color: var(--skin-main-color);
    font-family: var(--skin-main-font), 'MaruBuri', serif;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.section_main10__line {
    display: block;
    width: 207px;
    height: 1px;
    margin: 15px 0 11px;
    background: #c4c4c4;
}

/* section_main11 */
.section_main11 {
    position: relative;
    height: 700px;
    overflow: hidden;
}

.section_main11__photo-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section_main11__photo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
}

.section_main11__names {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--skin-main-color);
    font-family: 'Pretendard-Regular', 'MaruBuri', sans-serif;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.section_main11__title {
    position: absolute;
    top: 478px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 305px;
    transform: translateX(-50%);
    margin: 0;
    color: var(--skin-main-color);
    font-family: 'Thesignature';
    font-size: 100px;
    line-height: 79px;
    text-align: center;
}

.section_main11__title-line {
    display: block;
    white-space: nowrap;
}


/* ── main variant 모션포토 <video> ─────────────────────────
 * 각 section_mainN에 photo와 함께 video 렌더 (레거시 pro와 동일 UX)
 * [data-main-mode] 로 표시 전환 (image → photo, motion → video)
 * video 는 대응 photo의 크기/모양을 미러링.
 */
.section_main__video      { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; transform: translateX(-50%); object-fit: cover; }
.section_main2__video     { width: 262px; height: 350px; object-fit: cover; border-radius: 50%; }
.section_main3__video     { width: 100%; height: 100%; object-fit: cover; }
.section_main4__video     { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; transform: translateX(-50%); object-fit: cover; }
.section_main5__video     { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; transform: translateX(-50%); object-fit: cover; }
.section_main6__video     { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; transform: translateX(-50%); object-fit: cover; }
.section_main7__video     { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; transform: translateX(-50%); object-fit: cover; }
.section_main8__video     { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; transform: translateX(-50%); object-fit: cover; }
.section_main9__video     { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; transform: translateX(-50%); object-fit: cover; }
.section_main10__video    { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; transform: translateX(-50%); object-fit: cover; }
.section_main11__video    { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; transform: translateX(-50%); object-fit: cover; }

.section_main[data-main-mode="motion"]  .section_main__photo   { display: none; }
.section_main[data-main-mode="image"]   .section_main__video   { display: none; }
.section_main2[data-main-mode="motion"] .section_main2__photo  { display: none; }
.section_main2[data-main-mode="image"]  .section_main2__video  { display: none; }
.section_main3[data-main-mode="motion"] .section_main3__photo  { display: none; }
.section_main3[data-main-mode="image"]  .section_main3__video  { display: none; }
.section_main4[data-main-mode="motion"] .section_main4__photo  { display: none; }
.section_main4[data-main-mode="image"]  .section_main4__video  { display: none; }
.section_main5[data-main-mode="motion"] .section_main5__photo  { display: none; }
.section_main5[data-main-mode="image"]  .section_main5__video  { display: none; }
.section_main6[data-main-mode="motion"] .section_main6__photo  { display: none; }
.section_main6[data-main-mode="image"]  .section_main6__video  { display: none; }
.section_main7[data-main-mode="motion"] .section_main7__photo  { display: none; }
.section_main7[data-main-mode="image"]  .section_main7__video  { display: none; }
.section_main8[data-main-mode="motion"] .section_main8__photo  { display: none; }
.section_main8[data-main-mode="image"]  .section_main8__video  { display: none; }
.section_main9[data-main-mode="motion"] .section_main9__photo  { display: none; }
.section_main9[data-main-mode="image"]  .section_main9__video  { display: none; }
.section_main10[data-main-mode="motion"] .section_main10__photo { display: none; }
.section_main10[data-main-mode="image"]  .section_main10__video { display: none; }
.section_main11[data-main-mode="motion"] .section_main11__photo { display: none; }
.section_main11[data-main-mode="image"]  .section_main11__video { display: none; }

/* Clone (편지지 인트로 letter_invi) 안에서는 motion 모드여도 photo 를 숨기지 않음.
 * <video> 정상 재생 시 → absolute 로 photo 를 덮어 가림 (원본과 동일 UX).
 * <video> 재생 실패/디코더 부족 (iOS Safari, 저사양 등) → 아래 photo (서버가 카피한 원본 이미지) 폴백 노출. */
[data-clone-mirror="1"].section_main[data-main-mode="motion"]   .section_main__photo,
[data-clone-mirror="1"].section_main2[data-main-mode="motion"]  .section_main2__photo,
[data-clone-mirror="1"].section_main3[data-main-mode="motion"]  .section_main3__photo,
[data-clone-mirror="1"].section_main4[data-main-mode="motion"]  .section_main4__photo,
[data-clone-mirror="1"].section_main5[data-main-mode="motion"]  .section_main5__photo,
[data-clone-mirror="1"].section_main6[data-main-mode="motion"]  .section_main6__photo,
[data-clone-mirror="1"].section_main7[data-main-mode="motion"]  .section_main7__photo,
[data-clone-mirror="1"].section_main8[data-main-mode="motion"]  .section_main8__photo,
[data-clone-mirror="1"].section_main9[data-main-mode="motion"]  .section_main9__photo,
[data-clone-mirror="1"].section_main10[data-main-mode="motion"] .section_main10__photo,
[data-clone-mirror="1"].section_main11[data-main-mode="motion"] .section_main11__photo {
    display: block;
}

/* 메인 사진: 한 번 수정 후 삭제 시 기본 이미지 대신 회색 배경 */
.v3-main-photo-wrap.is-empty {
    background: #f7f7f7;
}
.v3-main-photo-wrap.is-empty [class*="__photo"] {
    display: none;
}

/* main7~10: 테마 배경색 적용 토글 (is_theme_bg_color=T → --skin-bg) */
.v3-skin-main-switch[data-theme-bg-color="T"] {
    --theme-main-bg: var(--skin-bg);
}

/* section_greeting */
.section_greeting {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10% 43px;
    /* body computed font 상속 대신 섹션 로컬 --skin-main-font 사용 (타이틀은 bold 변수) */
    font-family: var(--skin-main-font), 'Pretendard-Regular', sans-serif;
}

.section_greeting__leaf-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 31px;
    margin: 53px 0 38px;
    color: var(--skin-accent);
}

.section_greeting__icon {
    display: none;
    height: 100%;
}
.section_greeting__icon svg {
    display: block;
    height: 100%;
    width: auto;
}
.section_greeting[data-deco="heart_line"] .section_greeting__leaf-wrap,
.section_greeting[data-deco="heart_fill"] .section_greeting__leaf-wrap,
.section_greeting[data-deco="ring"]       .section_greeting__leaf-wrap {
    height: 52px;
    margin: 52px 0 30px;
}



.section_greeting[data-deco="heart_line"] .section_greeting__icon[data-deco-value="heart_line"],
.section_greeting[data-deco="heart_fill"] .section_greeting__icon[data-deco-value="heart_fill"],
.section_greeting[data-deco="line"]       .section_greeting__icon[data-deco-value="line"],
.section_greeting[data-deco="leaf"]       .section_greeting__icon[data-deco-value="leaf"],
.section_greeting[data-deco="ring"]       .section_greeting__icon[data-deco-value="ring"] {
    display: block;
}

.section_greeting__body {
    display: flex;
    flex-direction: column;
    gap: 56px;
    align-items: center;
    width: 100%;
    text-align: center;
}

.section_greeting[data-align="left"] .section_greeting__leaf-wrap,
.section_greeting[data-align="left"] .section_greeting__body,
.section_greeting[data-align="left"] .section_greeting__text-group,
.section_greeting[data-align="left"] .v3-skin-title,
.section_greeting[data-align="left"] .v3-skin-desc {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}

.section_greeting[data-align="center"] .section_greeting__leaf-wrap,
.section_greeting[data-align="center"] .section_greeting__body,
.section_greeting[data-align="center"] .section_greeting__text-group,
.section_greeting[data-align="center"] .v3-skin-title,
.section_greeting[data-align="center"] .v3-skin-desc {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.section_greeting[data-align="right"] .section_greeting__leaf-wrap,
.section_greeting[data-align="right"] .section_greeting__body,
.section_greeting[data-align="right"] .section_greeting__text-group,
.section_greeting[data-align="right"] .v3-skin-title,
.section_greeting[data-align="right"] .v3-skin-desc {
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
}

.section_greeting__text-group {
    display: flex;
    flex-direction: column;
    gap: 27px;
    width: 100%;
}

.section_greeting__text-group .v3-skin-desc {
    margin: 0;
    color: var(--skin-text);
    font-size: var(--skin-font-size-base);
    line-height: 1.7;
    letter-spacing: 0.2px;
}

.section_greeting__text-group .v3-skin-desc p {
    margin: 0;
}

.section_greeting__names {
    margin: 0;
    color: var(--skin-text);
    font-size: var(--skin-font-size-base);
    letter-spacing: 0.2px;
}

/* section_invitation */
.section_invitation {
    padding: 6% 10%;
    /* body computed font 상속 대신 섹션 로컬 --skin-main-font 사용 (타이틀은 bold 변수) */
    font-family: var(--skin-main-font), 'Pretendard-Regular', sans-serif;
}

.section_invitation__inner {
    display: flex;
    flex-direction: column;
    gap: 42px;
    align-items: center;
}

.section_invitation__photo-wrap {
    width: 100%;
    height: 450px;
    overflow: hidden;
}

.section_invitation__photo-wrap.is-empty {
    background: #f7f7f7;
}

.section_invitation__photo-wrap.is-empty .section_invitation__photo {
    display: none;
}

.section_invitation__photo-wrap.type-square,
.section_invitation__photo-wrap[data-type="rectangle"] {
    border-radius: 0;
}

.section_invitation__photo-wrap.type-ellipse,
.section_invitation__photo-wrap[data-type="ellipse"] {
    border-radius: 99999px;
}

.section_invitation__photo-wrap.type-arch,
.section_invitation__photo-wrap[data-type="arch"] {
    border-radius: 99999px 99999px 0 0;
}

.section_invitation__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.section_invitation__content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    width: 302px;
    text-align: center;
}

.section_invitation__en {
    margin: 0;
    color: var(--skin-accent);
    font-family: 'Francisco', sans-serif;
    font-size: 36px;
    line-height: 1;
    text-transform: lowercase;
    letter-spacing: -0.4px;
}

.section_invitation__text-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2);
}

.section_invitation__desc {
    line-height: 175%;
}

/* section_call */
.section_call {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    padding: 10px 10% 70px;
}

.section_call__divider {
    width: 1px;
    height: 140px;
    background: var(--skin-border);
}

.section_call__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 3);
    align-items: center;
    width: 100%;
}

.section_call__family {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 1.5);
}

.section_call__row {
    display: flex;
    gap: var(--skin-font-size-base);
    align-items: flex-start;
    justify-content: space-between;
}

.section_call__parents {
    display: flex;
    gap: calc(var(--skin-font-size-base) * 0.3);
    align-items: center;
    font-size: var(--skin-font-size-base);
    letter-spacing: 0.2px;
}

.section_call__parents-name {
    color: var(--skin-text);
    display: flex;
    align-items: center;
    gap: calc(var(--skin-font-size-base) * 0.125);
}

/* 부모: 이름 + 세례명 세로 스택. 고인 아이콘은 이름과 동일 라인. */
.section_call__parents-name {
    display: inline-flex;
    align-items: flex-start;
    gap: calc(var(--skin-font-size-base) * 0.25);
    flex-wrap: wrap;
}

.section_call__parent {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.section_call__parent-line {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--skin-font-size-base) * 0.25);
}

.section_call__parents-separator {
    align-self: center;
}

.section_call__church-name {
    color: #B4B4B4;
    font-size: calc(var(--skin-font-size-base) * 0.85);
    line-height: 1;
}

.section_call__church-name[hidden] {
    display: none;
}

/* role(신랑/신부) 세로 스택 */
.section_call__role-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.section_call__role-church {
    margin: 0;
    color: #B4B4B4;
    font-size: calc(var(--skin-font-size-base) * 0.85);
    line-height: 1;
}

.section_call__role-church[hidden] {
    display: none;
}

.section_call__deceased-icon {
    display: inline-block;
    width: calc(var(--skin-font-size-base) * 1);
    height: calc(var(--skin-font-size-base) * 1);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.section_call__deceased-icon[hidden] {
    display: none;
}

.section_call[data-deceased-type="T"] .section_call__deceased-icon {
    background-image: url('/storefarm/card/skin/img/go.svg');
}

.section_call[data-deceased-type="F"] .section_call__deceased-icon {
    background-image: url('/storefarm/card/skin/img/chrysanthemum.svg');
}

.section_call__parents-label {
    color: var(--skin-text-sub);
}

.section_call__role {
    margin: 0;
    color: var(--skin-text);
    font-size: calc(var(--skin-font-size-base) * 1.125);
    white-space: nowrap;
}

/* section_profile */
.section_profile {
    padding: 70px 3.5%;
    /* body computed font 상속 대신 섹션 로컬 --skin-main-font 사용 (타이틀은 bold 변수) */
    font-family: var(--skin-main-font), 'Pretendard-Regular', sans-serif;
}

.section_profile__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 3);
    align-items: center;
    margin: 0 auto;
}

.section_profile__cards {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3.5%;
    width: 100%;
}

.section_profile__card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 1.25);
    align-items: center;
    width: 203px;
}

.section_profile__photo-wrap {
    width: 100%;
    height: 218px;
    overflow: hidden;
    border-radius: 8px;
}

.section_profile__photo-wrap.is-empty {
    background: #f7f7f7;
}

.section_profile__photo-wrap.is-empty .section_profile__photo {
    display: none;
}

.section_profile__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.section_profile__info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 1.25);
    align-items: center;
    text-align: center;
}

.section_profile__name-row {
    display: flex;
    gap: calc(var(--skin-font-size-base) * 0.5);
    align-items: center;
    font-size: var(--skin-font-size-base);
}

.section_profile__name-row--groom .section_profile__tag {
    color: var(--skin-groom);
}

.section_profile__name-row--bride .section_profile__tag {
    color: var(--skin-bride);
}

.section_profile__name {
    color: var(--skin-text);
    font-size: calc(var(--skin-font-size-base) * 1.125);
}

.section_profile__bio {
    margin: 0;
    color: var(--skin-text-sub);
    font-size: var(--skin-font-size-base);
    line-height: 170%;
}
.section_profile__bio p {
    margin: 0;
}

/* section_movie */
.section_movie {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 3);
    align-items: center;
    padding: 70px 0;
}

.section_movie__player {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: var(--skin-bg-gray);
}

.section_movie__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* section_timeline */
@property --timeline-progress {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.section_timeline {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 3);
    align-items: center;
    padding: 70px 10%;
}

.section_timeline__list {
    --timeline-progress: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    transition: --timeline-progress 0.45s ease;
}

.section_timeline__list::before {
    position: absolute;
    content: '';
    top: 61px;
    left: 50%;
    width: 1px;
    height: calc(100% - 122px);
    transform: translateX(-50%);
    background: linear-gradient(
        to bottom,
        var(--skin-accent) 0,
        var(--skin-accent) calc(var(--timeline-progress) * 100%),
        var(--skin-border) calc(var(--timeline-progress) * 100%),
        var(--skin-border) 100%
    );
}

.section_timeline__heart {
    position: absolute;
    top: calc(45px + (100% - 122px) * var(--timeline-progress));
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translateX(-50%);
    z-index: 1;
    /* 인라인 SVG로 렌더 → fill을 테마 색상(--skin-accent)에 연동 */
    fill: var(--skin-accent);
}

.section_timeline__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 122px;
}

.section_timeline__item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--skin-border);
    transition: background 0.2s ease;
}

.section_timeline__item.is-active::before {
    background: var(--skin-accent);
}

.section_timeline__item--reverse {
    flex-direction: row-reverse;
}

.section_timeline__thumb-wrap {
    width: 122px;
    height: 122px;
    overflow: hidden;
    border-radius: 8px;
}

.section_timeline__thumb-wrap.is-empty {
    background: #f7f7f7;
}

.section_timeline__thumb-wrap.is-empty .section_timeline__thumb {
    display: none;
}

.section_timeline__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section_timeline__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 0.875);
    width: 122px;
}

.section_timeline__item-title {
    margin: 0;
    color: var(--skin-accent);
    font-size: calc(var(--skin-font-size-base) * 1.125);
    font-family: var(--skin-main-font-bold);
}

.section_timeline__item-desc {
    margin: 0;
    color: var(--skin-text-sub);
    font-size: calc(var(--skin-font-size-base) * 0.875);
    line-height: 170%;
}

.section_timeline__item--reverse .section_timeline__content {
    text-align: right;
}

.section_timeline__item--reverse .section_timeline__item-title,
.section_timeline__item--reverse .section_timeline__item-desc {
    text-align: right;
}

/* section_interview */
.section_interview {
    padding: 70px 10%;
}

.section_interview__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2.25);
    align-items: center;
}

.section_interview__head {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2);
    align-items: center;
    text-align: center;
}

.section_interview__cover-wrap {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 12px;
}

.section_interview__cover-wrap.is-empty {
    background: #f7f7f7;
}

.section_interview__cover-wrap.is-empty .section_interview__cover {
    display: none;
}

.section_interview__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* section_calendar */
.section_calendar {
    padding: 70px 10%;
}
.section_calendar__box {
    width: 100%;
}
.section_calendar__grid-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--skin-font-size-base);
    margin-top: calc(var(--skin-font-size-base) * 3);
    padding: calc(var(--skin-font-size-base) * 1.25) 0;
    border-top: 1px solid var(--skin-border);
    border-bottom: 1px solid var(--skin-border);
}

.section_calendar__date-wrap {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 1.5);
    align-items: center;
}
.section_calendar__date {
    margin: 0;
    color: var(--skin-accent);
    line-height: 1;
}
.section_calendar__date-wrap.type-1 {
    text-align: center;
    margin: 0 auto;
}
.section_calendar__date-wrap.type-1 .section_calendar__date {
    font-size: calc(var(--skin-font-size-base) * 2);
    font-family: 'Pretendard-Medium';
}

.section_calendar__date-wrap.type-2 .section_calendar__date {
    font-size: 60px;
    font-family: 'DarumadropOne';
}

.section_calendar__date-wrap.type-3 .section_calendar__date {
    font-size: calc(var(--skin-font-size-base) * 2.5);
    font-family: 'Happy Time';
}

.section_calendar__date-wrap.type-4 .section_calendar__date {
    font-size: calc(var(--skin-font-size-base) * 2);
    font-family: var(--skin-main-font-bold);
}

.section_calendar__time {
    margin: 0;
    color: var(--skin-text);
    font-size: calc(var(--skin-font-size-base) * 1.125);
}
/* time_type 라디오에 따라 오전/오후 vs AM/PM span 토글 */
.section_calendar__time[data-time-type="ko"] [data-time-type-only="en"],
.section_calendar__time[data-time-type="en"] [data-time-type-only="ko"] {
    display: none;
}

.section_calendar__weekdays,
.section_calendar__week {
    display: flex;
    justify-content: space-between;
}

.section_calendar__day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((var(--skin-font-size-base)*2.5));
    height: calc((var(--skin-font-size-base)*2.5));
    font-size: var(--skin-font-size-base);
}

.section_calendar__day--sun {
    color: var(--skin-accent);
}

.section_calendar__day--muted {
    color: var(--skin-text-sub);
}

.section_calendar__day--active {
    position: relative;
    color: #fff;
    font-family: var(--skin-main-font-bold);
}
/* 도형 마커: svg_icon()이 fill/stroke를 currentColor로 치환하므로 color로 테마 색상 제어 */
/* 서버 SVG는 viewBox 내부에 여백이 있어 100%로는 도형이 작게 보이므로 140% 로 확대해
   day-num(1em)이 도형 중심에 자연스럽게 얹히도록 한다. transform 중심 확대라 셀 중앙 유지. */
.section_calendar__day-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    transform: translate(-50%, -50%);
    color: var(--skin-accent);
    fill: var(--skin-accent);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.section_calendar__day-heart svg {
    width: 100%;
    height: 100%;
    display: block;
}
.section_calendar__day-num {
    position: relative; /* 절대 배치된 SVG 위에 숫자가 겹쳐 그려지도록 */
    z-index: 1;
    line-height: 1;
}

.section_calendar__dday {
    padding-top: calc(var(--skin-font-size-base) * 2);
    width: 100%;
}

.section_calendar__dday-inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2.5);
    align-items: center;
}

.section_calendar__countdown {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.section_calendar__count-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc((100% - 42px ) / 4);
    text-align: center;
}

.section_calendar__count-label {
    margin: 0;
    color: var(--skin-text-sub);
    font-size: 12px;
    text-transform: capitalize;
}

.section_calendar__count-num {
    margin: 0;
    color: var(--skin-accent);
    font-size: 26px;
    font-family: var(--skin-main-font-bold);
    line-height: 1;
}

.section_calendar__count-sep {
    margin: 0;
    color: var(--skin-accent);
    font-size: 20px;
    font-family: var(--skin-main-font-bold);
}

.section_calendar__dday.type-1 .section_calendar__count-box {
    gap: 8px;
    padding: 16px 18px 18px;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--skin-shadow-sm);
}
.section_calendar__dday.type-2 .section_calendar__count-box {
    gap: 8px;
}
.section_calendar__dday.type-2 .section_calendar__count-num {
    width: 63px;
    height: 63px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--skin-accent);
    color: #fff;
}
.section_calendar__dday.type-2 .section_calendar__count-label {
    font-size: 11px;
}
.section_calendar__dday.type-2 .section_calendar__count-sep {
    padding-top: 23px;
}
.section_calendar__dday.type-3 .section_calendar__count-box {
    gap: 13px;
    width: calc((100% - 120px ) / 4);
}
.section_calendar__dday.type-3 .section_calendar__count-num {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--skin-accent);
}
.section_calendar__dday.type-3 .section_calendar__count-label {
    font-size: 11px;
}
.section_calendar__dday.type-3 .section_calendar__count-sep {
    padding-top: 23px;
}


.section_calendar__dday-text {
    margin: 0;
    color: var(--skin-text);
    font-size: var(--skin-font-size-base);
    text-align: center;
}

.section_calendar__dday-text strong {
    color: var(--skin-accent);
    font-family: var(--skin-main-font-bold);
}



/* section_traffic */
.section_traffic {
    padding: 70px 0;
}

.section_traffic__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 3);
    align-items: center;
}

.section_traffic__head {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section_traffic__venue {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 1.125);
    margin-top: calc(var(--skin-font-size-base) * 2.25);
}

.section_traffic__venue-name {
    margin: 0;
    font-size: calc(var(--skin-font-size-base) * 1.125);
}

.section_traffic__venue-addr {
    margin: 0;
    color: var(--skin-text-sub);
    font-size: var(--skin-font-size-base);
}

.section_traffic__map-img-btn {
    /* fit-content 는 iOS Safari 에서 flex 컨텍스트일 때 min-content 로 계산되는 케이스가 있어
       "약도" 만한 최소폭으로 잡히고 나머지가 다음 줄로 밀리는 현상 발생 → auto + min-width max-content 로 회피. */
    width: auto;
    min-width: max-content;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: calc(var(--skin-font-size-base) * 0.25);
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--skin-accent);
    border-radius: 8px;
    background: #fff;
    color: var(--skin-accent);
    font-family: var(--skin-main-font-bold);
    font-size: calc(var(--skin-font-size-base) * 0.875);
    cursor: pointer;
    /* "약도 이미지 보기" 공백 지점 wrap 방지 — word-break:keep-all 만으로는 공백 wrap 이 허용됨. */
    white-space: nowrap;
    word-break: keep-all;
    margin-top: calc(var(--skin-font-size-base) * 1.5);
}

.section_traffic__map-img-btn[hidden] {
    display: none;
}

.section_traffic__map-img-btn svg {
    /* flex-basis 16px 과 width calc 값이 서로 상충 → flex 표기 통일, width/height 는 명시적 계산값 유지. */
    flex: 0 0 auto;
    width: calc(var(--skin-font-size-base) * 1.125);
    height: calc(var(--skin-font-size-base) * 1.125);
    color: var(--skin-accent);
}

.section_traffic__map-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.section_traffic__map {
    width: 100%;
    height: 210px;
    overflow: hidden;
    background: var(--skin-bg-gray);
}

.section_traffic__map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section_traffic__navi {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
    padding: 0 3.5%;
}

.section_traffic__navi-btn {
    display: flex;
    flex: 1;
    gap: 4px;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 10px 0;
    border: 1px solid var(--skin-border);
    border-radius: 8px;
    background: #fff;
    color: var(--skin-text);
    font-size: calc(var(--skin-font-size-base) * 0.875);
    text-decoration: none;
}

.section_traffic__navi-btn[hidden] {
    display: none;
}

.section_traffic__navi-btn img {
    width: 20px;
    height: 20px;
}

.section_traffic__routes {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2.125);
    width: 100%;
    padding: 0 10%;
}

.section_traffic__route[hidden] {
    display: none;
}

/* 아이콘/이모지 표시 로직
 * show_icon="F"                       → 둘 다 숨김 (텍스트만)
 * show_icon="T" + icon_type="icon"    → svg 아이콘만
 * show_icon="T" + icon_type="emoji"   → 이모지만
 */
.section_traffic__routes .section_traffic__route-title-icon,
.section_traffic__routes .section_traffic__route-title-emoji {
    display: none;
}
.section_traffic__routes[data-icons="T"][data-icon-type="icon"] .section_traffic__route-title-icon {
    display: block;
}
.section_traffic__routes[data-icons="T"][data-icon-type="emoji"] .section_traffic__route-title-emoji {
    display: inline-block;
}

.section_traffic__route {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 1.25);
    padding-bottom: calc(var(--skin-font-size-base) * 2.125);
    border-bottom: 1px solid var(--skin-border);
}

.section_traffic__route-title {
    margin: 0;
    font-size: calc(var(--skin-font-size-base) * 1.125);
    font-family: var(--skin-main-font-bold);
    display: flex;
    align-items: center;
    gap: 6px;
}

.section_traffic__route-title-emoji {
    display: none;
    padding-bottom: 4px;
}

.section_traffic__route-title-icon {
    display: block;
    width: calc(var(--skin-font-size-base) * 1.3);
    height: calc(var(--skin-font-size-base) * 1.3);
    color: inherit;
}
.section_traffic__route-title-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.section_traffic__route-title-text {
    font-size: calc(var(--skin-font-size-base) * 1.125);
    font-family: var(--skin-main-font-bold);
}

.section_traffic__route-desc {
    margin: 0;
    color: var(--skin-text-sub);
    font-size: var(--skin-font-size-base);
    line-height: 170%;
}

/* section_gallery — 공통 */
.section_gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* 타입 전환 시 fade + slide out — preview_gallery.js가 클래스 스왑 사이에 부여 */
.section_gallery.is-swapping {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

.section_gallery__grid-wrap {
    width: 100%;
    position: relative;
}

.section_gallery__grid-wrap.is-empty {
    background: transparent;
}

.section_gallery__item--placeholder {
    background: #f7f7f7;
}

.section_gallery:not(.type-slide) .section_gallery__item:not(.section_gallery__item--placeholder) {
    cursor: pointer;
}

.section_gallery__item {
    object-fit: cover;
}

.section_gallery__pager {
    display: none;
}

/* type-grid2 / type-grid3 — 그리드 + 더보기 (gallery_grid2 / gallery_grid3) */
.section_gallery.type-grid2,
.section_gallery.type-grid3 {
    gap: calc(var(--skin-font-size-base) * 3);
    padding: 70px 3.5%;
}

.section_gallery.type-grid2 .section_gallery__grid-wrap.is-animating,
.section_gallery.type-grid3 .section_gallery__grid-wrap.is-animating {
    overflow: hidden;
    transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.section_gallery.type-grid2 .section_gallery__grid,
.section_gallery.type-grid3 .section_gallery__grid {
    display: grid;
    gap: 7px;
    width: 100%;
}

.section_gallery.type-grid2 .section_gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section_gallery.type-grid3 .section_gallery__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section_gallery.type-grid2 .section_gallery__item,
.section_gallery.type-grid3 .section_gallery__item {
    width: 100%;
    height: 100%;
    border-radius: 7px;
}

.section_gallery.type-grid2 .section_gallery__item {
    aspect-ratio: 1 / 1;
}

.section_gallery.type-grid3 .section_gallery__item {
    aspect-ratio: 3 / 4;
}

.section_gallery.type-grid2 .section_gallery__fade,
.section_gallery.type-grid3 .section_gallery__fade {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(180deg, rgba(252, 253, 255, 0) 0%, #fcfdff 100%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.35s ease;
}

.section_gallery.type-grid2.is-collapsed .section_gallery__fade,
.section_gallery.type-grid2.is-expanding .section_gallery__fade,
.section_gallery.type-grid3.is-collapsed .section_gallery__fade,
.section_gallery.type-grid3.is-expanding .section_gallery__fade {
    display: block;
}

.section_gallery.type-grid2.is-expanding .section_gallery__fade,
.section_gallery.type-grid3.is-expanding .section_gallery__fade {
    opacity: 0;
}

/* grid2: 2열 × 3행 = 6장 / grid3: 3열 × 3행 = 9장 */
.section_gallery.type-grid2.is-collapsed .section_gallery__item:nth-child(n + 7),
.section_gallery.type-grid3.is-collapsed .section_gallery__item:nth-child(n + 10) {
    display: none;
}

.section_gallery.type-grid2.is-expanding .section_gallery__item:nth-child(n + 7),
.section_gallery.type-grid3.is-expanding .section_gallery__item:nth-child(n + 10) {
    opacity: 0;
    transform: translateY(12px);
    animation: section-gallery-item-reveal 0.45s ease forwards;
    animation-delay: var(--gallery-reveal-delay, 0s);
}

@keyframes section-gallery-item-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section_gallery.type-grid2 .section_gallery__button-wrap,
.section_gallery.type-grid3 .section_gallery__button-wrap {
    display: none;
    padding: 0 6.5%;
    width: 100%;
    transition: opacity 0.25s ease;
}

.section_gallery.type-grid2.is-collapsed .section_gallery__button-wrap,
.section_gallery.type-grid3.is-collapsed .section_gallery__button-wrap {
    display: block;
}

.section_gallery.type-grid2.is-expanding .section_gallery__button-wrap,
.section_gallery.type-grid3.is-expanding .section_gallery__button-wrap {
    display: block;
    opacity: 0;
    pointer-events: none;
}

.section_gallery.type-grid2 .section_gallery__pager,
.section_gallery.type-grid3 .section_gallery__pager {
    display: none;
}

/* type-slide — gallery_slidetype
 * center 313×444 / side 289×409 / gap 10 / radius 14
 */
.section_gallery.type-slide {
    /* cqw = 섹션 너비 기준 (트랙 max-content에서 % 폭이 깨지는 문제 회피) */
    container-type: inline-size;
    --gallery-slide-side-w: min(289px, 74.11cqw);
    --gallery-slide-gap: calc(10px + (var(--gallery-slide-side-w) * ((313 / 289) - 1) / 2));
    gap: 0;
    padding: 70px 0;
    overflow: hidden;
}

.section_gallery.type-slide .v3-skin-title {
    margin: 0 0 42px;
}

.section_gallery.type-slide .section_gallery__grid-wrap {
    /* 활성 scale(313/289) 후 높이가 잘리지 않도록 side 높이 × 비율만큼 확보 */
    width: 100%;
    margin-bottom: 28px;
    overflow: hidden;
    touch-action: pan-y;
    padding-block: calc(var(--gallery-slide-side-w) * (409 / 289) * ((313 / 289) - 1) / 2);
}

.section_gallery.type-slide .section_gallery__grid {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gallery-slide-gap);
    width: max-content;
    will-change: transform;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.section_gallery.type-slide .section_gallery__grid.is-dragging {
    transition: none;
}
/* 루프 normalizeLoop 스냅 시 item scale transition 도 함께 억제 →
   after-clone → 원본 교체 순간 첫 장이 scale(1)→scale(1.084) 로 재애니메이션되며 깜빡이는 문제 방지 */
.section_gallery.type-slide .section_gallery__grid.is-dragging .section_gallery__item {
    transition: none;
}

.section_gallery.type-slide .section_gallery__item {
    /* 레이아웃 폭은 side 기준, 활성만 scale로 center 크기(313/289 ≈ 1.084) */
    display: block;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--gallery-slide-side-w);
    max-width: var(--gallery-slide-side-w);
    aspect-ratio: 289 / 409;
    height: auto;
    border-radius: 14px;
    object-fit: cover;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-user-drag: none;
}

.section_gallery.type-slide .section_gallery__item.is-active {
    transform: scale(calc(313 / 289));
}

.section_gallery.type-slide .section_gallery__fade,
.section_gallery.type-slide .section_gallery__button-wrap {
    display: none !important;
}

.section_gallery.type-slide .section_gallery__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
}

.section_gallery.type-slide .section_gallery__pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.section_gallery.type-slide .section_gallery__pager-btn img {
    display: block;
    width: 100%;
    height: 100%;
}

.section_gallery.type-slide .section_gallery__pager-btn--prev img {
    transform: rotate(90deg);
}

.section_gallery.type-slide .section_gallery__pager-btn--next img {
    transform: rotate(-90deg);
}

.section_gallery.type-slide .section_gallery__pager-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.section_gallery.type-slide .section_gallery__pager-text {
    margin: 0;
    color: #c8c8c8;
    font-family: 'RIDIBatang', 'MaruBuri', serif;
    font-size: calc(var(--skin-font-size-base) * 1);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.section_gallery.type-slide .section_gallery__pager-current {
    color: var(--skin-text);
    font-weight: 600;
}

.section_gallery.type-slide .section_gallery__pager-sep,
.section_gallery.type-slide .section_gallery__pager-total {
    color: #c8c8c8;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .section_gallery.type-slide .section_gallery__grid,
    .section_gallery.type-slide .section_gallery__item {
        transition: none;
    }
}

/* type-variant — gallery_variant
 * 3열 dense 그리드. 가로(1행) / 세로(2행) = 세로 높이 = 가로×2 + gap
 * Figma: col 116.652 / row 100.982 / gap 6.964 / radius 6.964
 */
.section_gallery.type-variant {
    container-type: inline-size;
    gap: calc(var(--skin-font-size-base) * 3);
    padding: 70px 3.125%;
}

.section_gallery.type-variant .section_gallery__grid-wrap.is-animating {
    overflow: hidden;
    transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.section_gallery.type-variant .section_gallery__grid {
    /* cqi는 컨테이너(섹션) 자손이므로 그리드에서 계산 */
    --gallery-variant-gap: 7px;
    --gallery-variant-col: calc((100cqi - (var(--gallery-variant-gap) * 2)) / 3);
    --gallery-variant-row: calc(var(--gallery-variant-col) * (100.982 / 116.652));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: var(--gallery-variant-row);
    grid-auto-flow: dense;
    gap: var(--gallery-variant-gap);
    width: 100%;
}

.section_gallery.type-variant .section_gallery__item {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 7px;
    object-fit: cover;
}

.section_gallery.type-variant .section_gallery__item.is-horizontal {
    grid-row: span 1;
}

.section_gallery.type-variant .section_gallery__item.is-vertical {
    grid-row: span 2;
}

.section_gallery.type-variant .section_gallery__fade {
    display: none;
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 70px;
    background: linear-gradient(180deg, rgba(252, 253, 255, 0) 0%, #fcfdff 100%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.35s ease;
}

.section_gallery.type-variant.is-collapsed .section_gallery__fade,
.section_gallery.type-variant.is-expanding .section_gallery__fade {
    display: block;
}

.section_gallery.type-variant.is-expanding .section_gallery__fade {
    opacity: 0;
}

/* 접힘: 피그마 초기 노출 9장 */
.section_gallery.type-variant.is-collapsed .section_gallery__item:nth-child(n + 10) {
    display: none;
}

.section_gallery.type-variant.is-expanding .section_gallery__item:nth-child(n + 10) {
    opacity: 0;
    transform: translateY(12px);
    animation: section-gallery-item-reveal 0.45s ease forwards;
    animation-delay: var(--gallery-reveal-delay, 0s);
}

.section_gallery.type-variant .section_gallery__button-wrap {
    display: none;
    padding: 0 6.5%;
    width: 100%;
    transition: opacity 0.25s ease;
}

.section_gallery.type-variant.is-collapsed .section_gallery__button-wrap,
.section_gallery.type-variant.is-expanding .section_gallery__button-wrap {
    display: block;
}

.section_gallery.type-variant.is-expanding .section_gallery__button-wrap {
    opacity: 0;
    pointer-events: none;
}

.section_gallery.type-variant .section_gallery__pager {
    display: none;
}

/* section_attend */
.section_attend {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2.25);
    align-items: center;
    padding: 70px 10%;
}

.section_attend__head {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2);
    align-items: center;
    text-align: center;
}

/* section_notice */
.section_notice {
    padding: 70px 10%;
}

.section_notice__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2);
    align-items: center;
}

.section_notice__tab-nav {
    display: flex;
    width: 100%;
    border-bottom: 1px solid var(--skin-border);
}

.section_notice__tab-title[hidden],
.section_notice__panel[hidden],
.section_notice__dot[hidden],
.section_notice__photo-wrap[hidden],
.section_notice__item-title[hidden],
.section_notice__desc[hidden],
.section_notice__tab-nav[hidden],
.section_notice__dots[hidden] {
    display: none;
}

.section_notice__tab-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(var(--skin-font-size-base) * 3.5);
    margin: 0;
    padding: 0;
    color: var(--skin-text-light);
    font-family: var(--skin-main-font-bold);
    font-size: calc(var(--skin-font-size-base) * 1.125);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    cursor: default;
    transition: all 0.3s ease;
}

.section_notice__tab-nav .section_notice__tab-title {
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
}

.section_notice.type-tab.is-multi-tab .section_notice__tab-title.is-active {
    color: var(--skin-accent);
    border-bottom: 2px solid var(--skin-accent);
}

.section_notice__tab-title--single {
    cursor: default;
}

.section_notice__panels {
    width: 100%;
}

.section_notice__panel {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2);
    align-items: center;
    width: 100%;
}

.section_notice__tabs {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 1.5);
    align-items: center;
    width: 100%;
}

.section_notice__photo-wrap {
    width: 100%;
    height: 156px;
    overflow: hidden;
    border-radius: 9999px;
}

.section_notice__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section_notice__item-title {
    display: none;
    margin: 0;
    color: var(--skin-text);
    font-family: var(--skin-main-font);
    font-size: calc(var(--skin-font-size-base) * 1.125);
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

.section_notice__desc {
    width: 100%;
}

.section_notice__dots {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.section_notice__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d9d9d9;
    cursor: pointer;
    transition: background 0.25s ease;
}

.section_notice__dot.is-active {
    background: var(--skin-text);
}

/* type-tab: 패널 안 제목·닷 숨김 (탭 네비 제목 사용) */
.section_notice.type-tab .section_notice__item-title,
.section_notice.type-tab .section_notice__dots {
    display: none;
}

/* type-tab multi — 슬라이드와 동일 가로 스크롤 (탭 네비만 유지) */
.section_notice.type-tab.is-multi-tab {
    padding: 70px 0;
    overflow: hidden;
}

.section_notice.type-tab.is-multi-tab .section_notice__inner {
    gap: 26px;
    width: 100%;
    max-width: none;
    padding: 0;
}

.section_notice.type-tab.is-multi-tab .section_notice__tab-nav {
    width: 80%;
    margin: 0 10%;
}

/* type-slide */
.section_notice.type-slide {
    padding: 70px 0;
    overflow: hidden;
}

.section_notice.type-slide .section_notice__inner {
    gap: 26px;
    width: 100%;
    max-width: none;
    padding: 0;
}

.section_notice.type-slide .section_notice__tab-nav,
.section_notice.type-slide .section_notice__tab-title--single {
    display: none;
}

.section_notice.type-slide .section_notice__item-title {
    display: block;
}

.section_notice.type-slide .section_notice__panels {
    width: 100%;
}

.section_notice.type-slide:not(.is-multi-tab) .section_notice__panel {
    gap: 12px;
    padding: 0 10%;
}

.section_notice.type-slide:not(.is-multi-tab) .section_notice__photo-wrap {
    width: min(290px, 100%);
    margin: 0 auto;
}

.section_notice.type-slide:not(.is-multi-tab) .section_notice__desc {
    margin-top: 0;
}

/* multi-tab 가로 스크롤 — tab / slide 공통 */
.section_notice.type-tab.is-multi-tab .section_notice__panels,
.section_notice.type-slide.is-multi-tab .section_notice__panels {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.section_notice.type-tab.is-multi-tab .section_notice__panels.is-dragging,
.section_notice.type-slide.is-multi-tab .section_notice__panels.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.section_notice.type-tab.is-multi-tab .section_notice__panels.is-dragging img,
.section_notice.type-slide.is-multi-tab .section_notice__panels.is-dragging img {
    pointer-events: none;
}

.section_notice.type-tab.is-multi-tab .section_notice__panels::-webkit-scrollbar,
.section_notice.type-slide.is-multi-tab .section_notice__panels::-webkit-scrollbar {
    display: none;
}

.section_notice.type-tab.is-multi-tab .section_notice__panel,
.section_notice.type-slide.is-multi-tab .section_notice__panel {
    flex: 0 0 min(290px, 74.36%);
    width: min(290px, 74.36%);
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

/* 탭 형식은 한 화면에 현재 패널만 노출 */
.section_notice.type-tab.is-multi-tab .section_notice__panels {
    gap: 0;
}

.section_notice.type-tab.is-multi-tab .section_notice__panel {
    flex-basis: 100%;
    width: 100%;
    padding: 0 10%;
}

.section_notice.type-tab.is-multi-tab .section_notice__panel .section_notice__desc,
.section_notice.type-slide.is-multi-tab .section_notice__panel .section_notice__item-title,
.section_notice.type-slide.is-multi-tab .section_notice__panel .section_notice__desc {
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.section_notice.type-tab.is-multi-tab .section_notice__panel:not(.is-active) .section_notice__desc,
.section_notice.type-slide.is-multi-tab .section_notice__panel:not(.is-active) .section_notice__item-title,
.section_notice.type-slide.is-multi-tab .section_notice__panel:not(.is-active) .section_notice__desc {
    height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.section_notice.type-tab.is-multi-tab .section_notice__panel.is-active .section_notice__desc,
.section_notice.type-slide.is-multi-tab .section_notice__panel.is-active .section_notice__item-title,
.section_notice.type-slide.is-multi-tab .section_notice__panel.is-active .section_notice__desc {
    height: auto;
    opacity: 1;
    visibility: visible;
}

.section_notice.type-slide .section_notice__tabs {
    width: 100%;
}

.section_notice.type-slide .section_notice__photo-wrap {
    width: 100%;
    height: 156px;
    border-radius: 9999px;
}

.section_notice.type-slide .section_notice__desc {
    margin: 0;
    color: #727272;
    line-height: 1.75;
    text-align: center;
}

.section_notice.type-slide.is-multi-tab .section_notice__dots {
    display: flex;
    margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .section_notice.type-tab.is-multi-tab .section_notice__panels,
    .section_notice.type-slide.is-multi-tab .section_notice__panels {
        scroll-behavior: auto;
    }

    .section_notice.type-tab.is-multi-tab .section_notice__panel .section_notice__desc,
    .section_notice.type-slide.is-multi-tab .section_notice__panel .section_notice__item-title,
    .section_notice.type-slide.is-multi-tab .section_notice__panel .section_notice__desc,
    .section_notice__dot {
        transition: none;
    }
}

/* section_flower */
.section_flower {
    padding: 34px 0;
    transition: padding 0.4s ease;
}

.section_flower__banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-height: 240px;
    min-height: calc(var(--skin-font-size-base) * 10);
    overflow: hidden;
    background: var(--skin-bg-cream);
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        max-height 0.4s ease,
        min-height 0.4s ease,
        visibility 0s linear 0s;
}

.section_flower[data-display="T"] .section_flower__banner {
    max-height: 0;
    min-height: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        max-height 0.4s ease,
        min-height 0.4s ease,
        visibility 0s linear 0.35s;
}

.section_flower__text {
    width: 100%;
    padding: 10% 0 10% 10%;
}

.section_flower__title {
    margin: 0 0 var(--skin-font-size-base);
    font-family: var(--skin-main-font), serif;
    font-size: calc(var(--skin-font-size-base) * 1.125);
}

.section_flower__desc {
    margin: 0;
    color: var(--skin-text-sub);
    font-size: calc(var(--skin-font-size-base) * 0.875);
    line-height: 170%;
}

.section_flower__image {
    width: 136px;
    height: calc(var(--skin-font-size-base) * 10 - 3px);
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 5%;
}

/* flower_decline — 화환 사양하기 */
.section_flower__decline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 240px;
    padding: 9% 10%;
    overflow: hidden;
    background: var(--skin-bg-cream);
    text-align: center;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        max-height 0.4s ease,
        padding 0.4s ease,
        visibility 0s linear 0s;
}

.section_flower[data-display="T"] .section_flower__decline {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        max-height 0.4s ease,
        padding 0.4s ease,
        visibility 0s linear 0.35s;
}

/* flower_floating / flower_floating_decline */
.section_flower__floating {
    position: fixed;
    right: 0;
    bottom: 24px;
    left: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    pointer-events: none;
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0s linear 0.35s;
}

.section_flower__floating[data-display="T"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 0.4s ease 0.08s,
        transform 0.4s ease 0.08s,
        visibility 0s linear 0s;
}

.section_flower__floating[data-display="T"].is-scroll-hidden {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0s linear 0s;
}

.section_flower__floating-btn,
.section_flower__floating-label {
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: calc(100% - 32px);
    padding: 6px 13px 6px 20px;
    border: 1px solid #e4e4e4;
    border-radius: 9999px;
    background: #fdf9f9;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    pointer-events: auto;
}

.section_flower__floating[data-display="T"]:not(.is-scroll-hidden) .section_flower__floating-btn {
    pointer-events: auto;
}

.section_flower__floating-btn {
    cursor: pointer;
}

.section_flower__floating-label {
    cursor: default;
    user-select: none;
    pointer-events: none;
}

.section_flower__floating-text {
    color: #79624e;
    font-family: var(--skin-main-font), serif;
    font-size: calc(var(--skin-font-size-base) * 1.125);
    line-height: 1;
    white-space: nowrap;
}

.section_flower__floating-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .section_flower,
    .section_flower__banner,
    .section_flower__decline,
    .section_flower__floating {
        transition: none;
    }
}

/* section_account */
.section_account {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 3.14);
    align-items: stretch;
    padding: 70px 10%;
}

.section_account__head {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2);
    align-items: center;
    width: 100%;
    max-width: 274px;
    margin: 0 auto;
    text-align: center;
}

.section_account__list {
    display: flex;
    flex-direction: column;
    gap: var(--skin-font-size-base);
    align-items: center;
    width: 100%;
}

.section_account__group {
    display: flex;
    flex-direction: column;
    gap: var(--skin-font-size-base);
    width: 100%;
    max-width: 314px;
}

.section_account__toggle {
    justify-content: space-between;
    padding: 13px 21px;
    font-size: var(--skin-font-size-base);
}

.section_account__toggle-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.35s ease;
}

.section_account__group.is-open .section_account__toggle-icon,
.section_account__group.is-opening .section_account__toggle-icon {
    transform: rotate(180deg);
}

.section_account__list-wrap {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 1.75);
    overflow: hidden;
    padding: var(--skin-font-size-base) 0;
}

.section_account__list-wrap.is-animating {
    transition:
        height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease;
}

.section_account__list-wrap[hidden] {
    display: none;
}

.section_account__account {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 1.75);
}

/* 다음 형제 중 표시되는(hidden 이 아닌) account 가 있을 때만 구분선 표시.
 * :last-child 는 hidden 형제도 카운트해 마지막 표시 아이템에도 선이 그려지는 버그가 있었음. */
.section_account__account:not([hidden]):has(~ .section_account__account:not([hidden]))::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--skin-border);
}

.section_account__account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.section_account__account-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--skin-font-size-base);
    min-width: 0;
}

.section_account__account-person {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.section_account__account-role {
    color: var(--skin-text-sub);
    font-size: var(--skin-font-size-base);
    line-height: 1;
}

.section_account__account-name {
    color: var(--skin-text);
    font-size: calc(var(--skin-font-size-base) * 1.14);
    font-family: var(--skin-main-font-bold);
    line-height: 1;
}

.section_account__account-bank {
    margin: 0;
    color: var(--skin-text);
    font-size: var(--skin-font-size-base);
    line-height: 1;
    word-break: break-all;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.section_account__account-bank-name,
.section_account__account-bank-number {
    display: inline-block;
}

.section_account__account-bank-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.section_account__account-bank-copy img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.section_account__account-bank-copy-text {
    color: var(--skin-text-sub);
    font-size: calc(var(--skin-font-size-base) * 0.9);
    font-family: var(--skin-main-font);
    line-height: 1;
    white-space: nowrap;
    text-decoration: underline;
}
.section_account__account-actions {
    display: flex;
    flex-shrink: 0;
    gap: 9px;
    align-items: center;
}

.section_account__account-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.section_account__account-action--kakao {
    overflow: hidden;
    background: var(--skin-kakao);
}

/* 카카오페이 링크 첨부 off (편집기 토글) 시 아이콘 숨김 */
.section_account[data-show-kakao="F"] .section_account__account-action--kakao {
    display: none;
}

/* 개별 카카오 링크가 비었을 때 (URL 미입력), 그룹 hidden, 계좌 hidden 오버라이드 */
.section_account__account-action--kakao[hidden],
.section_account__account[hidden],
.section_account__group[hidden] {
    display: none;
}

.section_account__account-action--kakao img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section_account__account-action--card,
.section_account__account-action--copy {
    background: #fff;
    border: 1px solid var(--skin-border);
}

.section_account__account-action--card img,
.section_account__account-action--copy img {
    width: 20px;
    height: 20px;
}

/* 은행번호 옆 복사버튼 숨김 — 복사는 actions 의 --copy 로 통일 (진수님 2026-08-21) */
.section_account__account-bank-copy { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .section_account__list-wrap.is-animating,
    .section_account__toggle-icon {
        transition: none;
    }
}


/* section_snap */
.section_snap {
    padding: 70px 10%;
}

.section_snap__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 3);
}

.section_snap__cover-wrap {
    width: 100%;
    height: 226px;
    overflow: hidden;
    border-radius: 12px;
}

.section_snap__cover-wrap.is-empty {
    background: #f7f7f7;
}

.section_snap__cover-wrap.is-empty .section_snap__cover {
    display: none;
}

.section_snap__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.section_snap__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 1.75);
    align-items: center;
}

.section_snap__text-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2.25);
    align-items: center;
    width: 100%;
    text-align: center;
}

.section_snap__note {
    margin: 0;
    color: var(--skin-text-muted);
    font-size: var(--skin-font-size-base);
    text-align: center;
}

/* section_guestbook */
.section_guestbook {
    padding: 70px 10%;
}

.section_guestbook__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2.75);
}

.section_guestbook__head {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2.5);
    align-items: center;
    text-align: center;
    width: 100%;
}

.section_guestbook__title-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2);
    width: 100%;
}

.section_guestbook__list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 0.875);
    width: 100%;
}


.section_guestbook__empty,
.section_guestbook__private {
    width: 100%;
    margin: 0;
    padding: calc(var(--skin-font-size-base) * 2.25) 0;
    color: #c4c0bc;
    font-size: calc(var(--skin-font-size-base) * 1.125);
    line-height: 180%;
    text-align: center;
}

/* 전체공개 ON(T): 리스트/페이저 노출 + private 안내 숨김
   전체공개 OFF(F): 리스트/페이저 숨김 + private 안내 노출 */
.section_guestbook__private {
    display: none;
}
.section_guestbook[data-show-message="F"] .section_guestbook__private {
    display: block;
    padding: 0;
}

/* desc 문구 스왑 (public/private) — data-show-message 기반 */
.section_guestbook__desc--private,
.section_guestbook[data-show-message="F"] .section_guestbook__desc--public {
    display: none;
}
.section_guestbook[data-show-message="F"] .section_guestbook__desc--private {
    display: inline;
}

.section_guestbook__private img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
    margin: 0 auto 20px;
}

.section_guestbook__item {
    position: relative;
    min-height: calc(var(--skin-font-size-base) * 10);
    padding: 29px 20px;
    border-radius: 8px;
    text-align: left;
    background: #FFFFFF;
    box-shadow: var(--skin-shadow-sm);
}

.section_guestbook__meta {
    display: flex;
    gap: calc(var(--skin-font-size-base) * 0.75);
    align-items: center;
    margin-bottom: calc(var(--skin-font-size-base) * 1.25);
    font-size: var(--skin-font-size-base);
}

.section_guestbook__author {
    color: var(--skin-text);
    font-family: var(--skin-main-font-bold);
}

.section_guestbook__date {
    color: #C8C8C8;
    font-size: calc(var(--skin-font-size-base) * 0.875);
}

.section_guestbook__message {
    margin: 0;
    color: var(--skin-text-sub);
    font-size: var(--skin-font-size-base);
    line-height: 175%;
}

/* 편집기 토글 off 시:
 *  - "방명록 내용 전체공개" F → 리스트 전체 숨김 (페이저까지)
 *  - "작성일시 공개" F → 각 항목의 작성일자만 숨김
 */
.section_guestbook[data-show-message="F"] .section_guestbook__list,
.section_guestbook[data-show-message="F"] .section_guestbook__pager,
.section_guestbook[data-show-date="F"] .section_guestbook__date {
    display: none;
}

.section_guestbook__delete {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.section_guestbook__pager {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.section_guestbook__pager-text {
    color: var(--skin-text-sub);
    font-size: var(--skin-font-size-base);
}

.section_guestbook__pager-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: var(--skin-bg);
    cursor: pointer;
}

.section_guestbook__pager-btn img {
    width: 100%;
    height: 100%;
}

.section_guestbook__pager-btn--prev {
    transform: rotate(90deg);
}

.section_guestbook__pager-btn--next {
    transform: rotate(-90deg);
}



.section_guestbook.type-vertical .section_guestbook__list {
    flex-direction: column;
}

.section_guestbook.type-vertical .section_guestbook__list .section_guestbook__item {
    min-height: auto;
}

.section_guestbook.type-horizontal .section_guestbook__list {
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    /* overflow-y: clip + overflow-clip-margin으로 위/아래 그림자 clip 방지.
       x축은 overflow: auto라 padding-box에서 잘리므로 padding-left/right에 그림자 여유공간 필요 */
    overflow-y: clip;
    overflow-clip-margin: 20px;
    padding: 2px 10px 12px 7px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* 마우스/펜 드래그 슬라이드 (section_guestbook.js) */
    cursor: grab;
    scroll-snap-type: x mandatory;
}
.section_guestbook.type-horizontal .section_guestbook__list.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;   /* 드래그 중 snap 해제 → 자유 이동 */
}
.section_guestbook.type-horizontal .section_guestbook__list.is-dragging .section_guestbook__item {
    /* 드래그 중 아이템 내부 클릭 잡히지 않도록 (버튼/텍스트 선택 방지) */
    pointer-events: none;
    user-select: none;
}

.section_guestbook.type-horizontal .section_guestbook__list::-webkit-scrollbar {
    display: none;
}

.section_guestbook.type-horizontal .section_guestbook__list .section_guestbook__item {
    flex: 0 0 192px;
    width: 192px;
    min-height: 230px;
    padding: 24px 20px 22px;
    border-radius: 10px;
    scroll-snap-align: start;
    transform-origin: top center;
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}

.section_guestbook.type-horizontal .section_guestbook__list .section_guestbook__item-body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-top: 22px;
}

.section_guestbook.type-horizontal .section_guestbook__list .section_guestbook__message {
    color: var(--skin-text);
    line-height: 180%;
    word-break: keep-all;
}

.section_guestbook.type-horizontal .section_guestbook__list .section_guestbook__meta {
    position: absolute;
    right: 20px;
    bottom: 22px;
    left: 20px;
    margin-bottom: 0;
}

.section_guestbook.type-horizontal .section_guestbook__list .section_guestbook__item.is-removing {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    pointer-events: none;
}

.section_guestbook.type-horizontal .section_guestbook__pager {
    display: none;
}

/* section_weddingnotice */
.section_weddingnotice {
    padding: 70px 10%;
}

.section_weddingnotice__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2.25);
    align-items: center;
}

.section_weddingnotice__head {
    display: flex;
    flex-direction: column;
    gap: calc(var(--skin-font-size-base) * 2);
    align-items: center;
    width: 100%;
    text-align: center;
}


/* section_ending */
.section_ending {
    height: 556px;
    overflow: hidden;
    position: relative;
    margin-top: 70px;
}

.section_ending__bg-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.section_ending__bg-wrap.is-empty {
    background: #f7f7f7;
}

.section_ending__bg-wrap.is-empty .section_ending__bg--back {
    display: none;
}

.section_ending__bg {
    width: 100%;
    height: 100%;
}

.section_ending__bg--back {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* use_bg_img='F' 이면 배경 이미지 숨김 */
.section_ending[data-use-bg-img="F"] .section_ending__bg--back {
    display: none;
}

.section_ending__bg--front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 알파는 --ending-bg-color 값 자체에 포함 (기본 rgba 값이 defaults에 있음) */
    background: var(--ending-bg-color, rgba(0,0,0,0.5));
}

.section_ending__message {
    /* 기본 위치: 중앙 (C/M). drag-x, drag-y는 데이터에서 주입되는 오프셋 */
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    color: var(--ending-text-color, #fff);
    font-family: var(--skin-main-font), serif;
    font-size: 22px;
    letter-spacing: 0.4px;
    white-space: nowrap;
    /* --drag-x/y는 인라인 style로 주입, --anchor-x/y는 hor/ver 규칙으로 세팅 */
    transform: translate(
        calc(var(--anchor-x, -50%) + var(--drag-x, 0px)),
        calc(var(--anchor-y, -50%) + var(--drag-y, 0px))
    );
}

/* 가로 정렬 (L/C/R) — anchor-x 값 지정. left도 조정 */
.section_ending[data-hor="L"] .section_ending__message { left: 20px; --anchor-x: 0; }
.section_ending[data-hor="C"] .section_ending__message { left: 50%; --anchor-x: -50%; }
.section_ending[data-hor="R"] .section_ending__message { left: auto; right: 20px; --anchor-x: 0; }

/* 세로 정렬 (T/M/B) — anchor-y 값 지정 */
.section_ending[data-ver="T"] .section_ending__message { top: 20px; --anchor-y: 0; }
.section_ending[data-ver="M"] .section_ending__message { top: 50%; --anchor-y: -50%; }
.section_ending[data-ver="B"] .section_ending__message { top: auto; bottom: 20px; --anchor-y: 0; }

/* 드래그 모드 시각 힌트 — 텍스트에 점선 outline + move 커서 */
.section_ending[data-use-drag="T"] .section_ending__message {
    cursor: move;
    outline: 1px dashed rgba(255,255,255,0.6);
    outline-offset: 6px;
    user-select: none;
    -webkit-user-select: none;
}

.section_ending__names {
    position: absolute;
    bottom: 13%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--ending-text-color, #fff);
    font-family: var(--skin-main-font), serif;
    font-size: 20px;
    white-space: nowrap;
}

/* section_share */
.section_share {
    padding: 52px 96px;
}

.section_share__inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 180px;
    margin: 0 auto;
}

.section_share__btn {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 100px;
    font-family: inherit;
    font-size: 14px;
    font-family: var(--skin-main-font-bold);
    cursor: pointer;
}

.section_share__btn img {
    width: 20px;
    height: 20px;
}

.section_share__btn--kakao {
    background: var(--skin-kakao);
    color: var(--skin-text);
}

.section_share__btn--link {
    background: #000;
    color: #fff;
}

/* section_logo */
.section_logo {
    padding: 40px 20px;
}

.section_logo__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* v3-editor-header .brand 와 동일한 룩 — Noto_B "FEEL" + Noto_L "card." */
.section_logo__brand {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--gray-950, #111);
}

.section_logo__brand-feel {
    font-family: 'Noto_B';
}

.section_logo__brand-card {
    font-family: 'Noto_L';
}

.section_logo__copy {
    margin: 0;
    color: var(--skin-text-sub);
    font-family: 'Pretendard-Regular', sans-serif;
    font-size: 10px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}


@media (max-width: 768px) {
    .section_main8__photo-wrap {
        height: 100vw;
    }
}