@charset "UTF-8";

/* =========================================================
   base.css (초안)
   - 전제: tokens.css / themes.css 에서 CSS 변수 제공
   - 규칙: 색/폰트/여백 값은 var(--*)로만 사용
   - 구조: body > .background > ( .cover / .content / .footer )
========================================================= */

html {
    font-size: 10px;
}
body {
    min-height: 100vh;
    overflow-x: hidden;
    font-family: var(--font-main);
}
body.invitation-mo-page {
    background-color: var(--neutral-50);
    color: var(--dark-color);
    overflow-y: auto;
    overflow-x: hidden;
}
body.invitation-mo-page::-webkit-scrollbar {
    display: none;
}
body.invitation-mo-page * {
    user-select: none;
}
body.invitation-mo-page input,
body.invitation-mo-page textarea {
    user-select: auto;
}

html.no-zoom-page,
body.no-zoom-page,
body.invitation-mo-page.no-zoom-page {
    touch-action: manipulation;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* 이미지 저장 방지 */
body.no-zoom-page .cover-inner img,
body.no-zoom-page .gallery-item img,
body.no-zoom-page .modal-media img,
body.no-zoom-page .timeline-media img {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* 기본 스타일 리셋 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: var(--body-size);
    line-height: var(--body-line);
}

/* -------------------------
   1) App Shell
------------------------- */
.background {
    max-width: var(--page-max-width);
    margin: 0 auto;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    /* font-family: var(--font-main); */
    box-shadow: 0 0.4rem 2.4rem rgba(0, 0, 0, 0.12);

    /* 모바일 청첩장 중앙 정렬 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.background-inner {
    width: 100%;
}

.invitation-contact-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    line-height: 1.4;
    width: 100%;
    background-color: var(--btn-bg);
    color: var(--btn-text-color);
    border: var(--btn-border);
    border-radius: var(--btn-radius);
    padding: var(--btn-padding);
    font-size: var(--body-size);
    font-weight: var(--btn-weight);
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .invitation-contact-btn:hover {
        color: var(--btn-hover-color-text);
        background-color: var(--btn-hover-color-bg);
        border-color: var(--btn-hover-color-border);
    }
}

.invitation-contact-btn.invitation-contact-btn-icon::after {
    content: "";
    width: 2rem;
    height: 2rem;
    background: url(../images/icco20-arrow-down.svg) no-repeat center center / cover;
    transition: transform 0.2s ease-out;
}

.invitation-contact-btn.invitation-contact-btn-icon.open::after {
    transform: rotate(180deg);
}
/* 실제 콘텐츠 폭(모바일 카드 느낌) */
.cover,
.invitation-content,
.invitation-footer {
    width: 100%;
}

/* 청첩장 헤더 */

@keyframes headerFadeOutBg {
    to {
        opacity: 0;
    }
}

@keyframes headerFadeOutText {
    to {
        opacity: 0;
        transform: translateY(-0.3rem);
    }
}

.invitation-header {
    width: 100%;
    padding: 0.8rem 1.2rem 0.8rem 2rem;
    color: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    max-width: var(--page-max-width);
    margin: 0 auto;
}

@media (max-width: 768px) {
    .invitation-header {
        max-width: 100vw;
    }
}

.invitation-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(39, 42, 43, 0.7);
    backdrop-filter: blur(0.8rem);
    z-index: -1;
    animation: headerFadeOutBg 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    animation-delay: 2s;
}

.invitation-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invitation-header-text {
    font-size: 1.4rem;
    line-height: 2;
    animation: headerFadeOutText 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    animation-delay: 2s;
}

.invitation-header-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.invitation-header-btn .bgm {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.2rem;
    height: 3.2rem;
    background: rgba(39, 42, 43, 0.4);
    backdrop-filter: blur(0.8rem);
    border: none;
    cursor: pointer;
    border-radius: 100rem;
}

.invitation-header-btn .bgm.pause::before {
    content: "";
    width: 2rem;
    height: 2rem;
    background: url(../images/ico20-pause.svg) no-repeat center center / cover;
}

.invitation-header-btn .bgm.play::before {
    content: "";
    width: 2rem;
    height: 2rem;
    background: url(../images/ico20-play.svg) no-repeat center center / cover;
}

.invitation-content {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    background: var(--section-bg);
}

/* -------------------------
   2) Section (공통 규격)
------------------------- */
.invitation-block {
    padding: var(--section-padding-y) var(--section-padding-x);
    text-align: center;
    position: relative;
}

.invitation-block.has-bg {
    background: var(--surface-bg);
}
.invitation-block.has-bg::after {
    content: "";
    width: 100%;
    height: 4.8rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 1));
    -webkit-backdrop-filter: blur(2rem);
    backdrop-filter: blur(2rem);
}

.invitation-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--section-gap);
}

.invitation-title {
    font-family: var(--font-title);
    color: var(--color-section-title);
    font-size: var(--section-title-size);
    font-weight: 400;
    text-align: center;
    line-height: 1.4;
}

.invitation-body {
    width: 100%;
    font-size: var(--body-size);
    line-height: var(--body-line);
}

.invitation-body > p {
    color: var(--color-text);
}

/* 이름 소개 */
.invitation-family {
    width: fit-content;
    padding: 2.4rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0 auto;
}

.invitation-family .family-line {
    display: flex;
    align-items: center;
    justify-content: center;
}

.invitation-family .family-line .family-parents {
    display: flex;
    align-items: center;
    justify-content: center;
}

.invitation-family .family-line .family-parents .family-parents-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.invitation-family .family-line .family-parents .family-parents-inner:nth-child(n + 2)::before {
    content: "";
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 100rem;
    background-color: var(--color-text);
    margin: 0 0.6rem;
}

.invitation-family .family-line .family-parents .family-parents-inner .family-parents-name {
    font-size: var(--body-size);
    font-weight: 700;
}

.mum {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    background: url(../images/ico14-mum.svg) no-repeat center center / cover;
    margin-right: 0.2rem;
}

.invitation-family .family-line .family-role {
    margin: 0 0.8rem;
    flex: 1;
    text-align: center;
}

.invitation-family .family-line .family-couple {
    font-size: var(--body-size);
    font-weight: 700;
}

/* 연락하기 : 팝업 */
.family-contact {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.family-contact-type {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--neutral-700);
}

.family-contact-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.family-contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.family-contact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.6rem;
    background: var(--neutral-50);
    border-radius: 0.8rem;
}

.family-contact-info {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
}

.family-contact-info .family-contact-role {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--neutral-600);
    line-height: 1.4;
}

.family-contact-info .family-contact-name {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
}

.family-contact-btn {
    display: flex;
    gap: 0.8rem;
}

.family-contact-btn-call,
.family-contact-btn-message {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.8);
    border: 0.2rem solid var(--white);
    border-radius: 0.8rem;
    box-shadow: 0 0.2rem 1.6rem rgba(39, 42, 43, 0.08);
}

.family-contact-btn-call::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    background: url(../images/ico20-call.svg) no-repeat center center / cover;
}

.family-contact-btn-message::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    background: url(../images/ico20-message.svg) no-repeat center center / cover;
}

/* 달력 */
.invitation-block.calendar .calendar-wrap {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    margin: 0 auto;
}

.invitation-meta {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.invitation-meta-title {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
}

.invitation-meta-desc {
    font-size: var(--body-size);
}

.invitation-meta-call {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    color: var(--neutral-700);
    text-decoration: none;
    gap: 0.6rem;
    width: fit-content;
    margin: 0 auto;
}

.invitation-meta-call::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    background: url(../images/ico16-call.svg) no-repeat center center / cover;
}

.calendar-wrap {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: var(--color-text);
}

/* 달력 박스 (윗줄/아랫줄 구분선) */
.calendar-box {
    width: 100%;
    padding: 1.2rem 0;
    border-top: 0.1rem solid var(--color-line);
    border-bottom: 0.1rem solid var(--color-line);
}

/* 요일 헤더 */
.calendar-head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    align-items: center;
}

.calendar-dow {
    font-size: 1.4rem;
    color: var(--color-text);
    padding: 0.2rem 0;
}

.calendar-dow.is-sun {
    color: var(--color-calendar-sun);
}

/* 날짜 그리드 */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    align-items: center;
}

/* 기본 셀 */
.calendar-cell {
    height: 5.4rem;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--color-text);
    position: relative;
    border-radius: 0.4rem;
}

/* 빈칸 */
.calendar-cell.is-empty {
    pointer-events: none;
}

/* 일요일/토요일 */
.calendar-day.is-sun {
    color: var(--color-calendar-sun);
}

/* 선택 날짜 (하트 + 숫자) */
.calendar-day.is-selected {
    width: 100%;
    height: 100%;
    justify-self: center;
    background: var(--dday-bg);
    color: #fff;
    font-weight: 500;
}

/* 선택 날짜 내부 배치: 하트는 위쪽, 숫자는 아래쪽 */
.calendar-day.is-selected .calendar-icon-heart {
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: url(../images/ico12-heart.svg) no-repeat center center / cover;
    width: 1.2rem;
    height: 1.2rem;
}

/* =========================
  D-day Counter
========================= */

.calendar-dday {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1.6rem;
}

.dday-cards {
    display: flex;
    align-items: center;
    gap: 0;
}

.dday-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 0.1rem solid var(--dday-card-border);
    border-radius: 0.4rem;
    padding: 1.2rem 1.6rem;
    background: var(--dday-card-bg);
}

.dday-colon {
    content: ":";
    margin: 0 0.8rem;
    color: var(--dday-card-colon);
}

.dday-label {
    display: block;
    font-size: 1.2rem;
    color: var(--dday-card-tag);
}

.dday-value {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--dday-card-value);
}

.dday-desc {
    font-size: 1.5rem;
    color: var(--color-text);
}

.dday-days {
    color: var(--color-accent);
}

/* 갤러리 */
.invitation-block.gallery .gallery-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
}

.invitation-block.gallery .gallery-list .gallery-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0.8rem;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.invitation-block.gallery .gallery-list .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.invitation-block.gallery .invitation-actions {
    margin-top: 1.6rem;
}

/* 지도 */
.location-wrap {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 1.6rem;
}

.location-map {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.location-map-box {
    width: 100%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.location-map-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.location-map-actions {
    width: 100%;
    display: flex;
    background: var(--white);
    border: 0.1rem solid var(--neutral-200);
    border-radius: 0.8rem;
}

.location-map-link {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    padding: 1.2rem 0;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--neutral-950);
    text-decoration: none;
}

.location-map-link::before {
    content: "";
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 auto;
}

.location-map-link.naver::before {
    background: url(../images/ico18-map-naver.png) no-repeat center center / cover;
}

.location-map-link.kakao::before {
    background: url(../images/ico18-map-kakao.png) no-repeat center center / cover;
}

.location-map-link.timap::before {
    background: url(../images/ico18-map-timap.png) no-repeat center center / cover;
}

.location-map-link::after {
    content: "";
    width: 0.1rem;
    height: 1.2rem;
    flex: 0 0 auto;
    background: var(--neutral-300);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.location-map-link:last-child::after {
    display: none;
}

/* 교통 안내 */
.location-guide {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.location-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding-bottom: 1.6rem;
    border-bottom: 0.1rem dashed var(--location-item-border);
}

.location-item:last-child {
    border-bottom: none;
}

.location-item-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.location-item-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.2rem;
    height: 3.2rem;
    flex: 0 0 auto;
    background: var(--neutral-50);
    border: 0.1rem solid var(--neutral-200);
    border-radius: 0.4rem;
}

.location-item-icon::before {
    content: "";
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
    background-size: 2rem 2rem;
}

.location-item-icon.bus::before {
    background: url(../images/ico20-bus-black.svg) no-repeat center center / cover;
    background-size: 2rem 2rem;
}

.location-item-icon.metro::before {
    background: url(../images/ico20-metro-black.svg) no-repeat center center / cover;
    background-size: 2rem 2rem;
}

.location-item-icon.car::before {
    background: url(../images/ico20-car-black.svg) no-repeat center center / cover;
    background-size: 2rem 2rem;
}

.location-item-icon.walk::before {
    background: url(../images/ico20-walk-black.svg) no-repeat center center / cover;
    background-size: 2rem 2rem;
}

.location-item-title {
    font-family: var(--font-main);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--neutral-950);
}

.location-item-desc {
    font-size: var(--body-size);
    text-align: left;
}

/* 안내사항 */
.invitation-info-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.invitation-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 2.4rem 2rem;
    background: var(--info-item-bg);
    border: 0.1rem dashed var(--info-item-border);
    border-radius: 1.2rem;
    box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.08);
}

.invitation-info-title {
    font-family: var(--font-main);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
}

.invitation-info-text {
    font-size: 1.5rem;
    color: var(--info-item-text-color);
    text-align: center;
}

/* 타임라인 */
.timeline-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
    position: relative;
}

.timeline-list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(4.8rem + (3.2rem / 2));
    width: 1px;
    background: var(--timeline-line);
}

.timeline-item {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

.timeline-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    min-width: 4.8rem;
    position: relative;
}

.timeline-year {
    font-size: 1.4rem;
    color: var(--color-text);
    line-height: 1.4;
}

.timeline-md {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.4;
}

.timeline-marker {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    position: relative;
    display: flex;
    background: var(--timeline-dot-border);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
}

.timeline-dot {
    display: block;
    width: 0.4rem;
    height: 0.4rem;
    background: var(--timeline-dot);
    border-radius: 50%;
}

.timeline-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    margin-left: 3.2rem;
}

.timeline-media {
    width: 100%;
    border: 0.1rem solid var(--color-line);
    border-radius: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.timeline-media.is-square {
    aspect-ratio: 1 / 1;
    width: 14rem;
    height: 14rem;
    min-width: 14rem;
    min-height: 14rem;
}

.timeline-media.is-landscape {
    width: 100%;
    max-width: 100%;
    height: 14rem;
    max-height: 14rem;
}

.timeline-media.is-portrait {
    width: 14rem;
    max-width: 14rem;
    height: 20rem;
    max-height: 20rem;
}

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

.timeline-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.timeline-title {
    font-family: var(--font-main);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--timeline-title-color);
}

.timeline-desc {
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--timeline-desc-color);
    text-align: left;
}

/* 방명록 */
.guestbook-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.guestbook-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.guestbook-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.6rem 2rem;
    background: var(--guestbook-item-bg);
    border: 0.1rem solid var(--guestbook-item-border);
    border-radius: 1.2rem;
}

.guestbook-item.empty {
    background: unset;
    border: unset;
}

.guestbook-item.empty .guestbook-header {
    justify-content: center;
}

.guestbook-item.empty .guestbook-content .guestbook-text {
    text-align: center;
}

.guestbook-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.guestbook-name {
    /* font-family: var(--font-main); */
    font-size: var(--body-size);
    font-weight: 700;
    color: var(--guestbook-item-name-color);
}

.guestbook-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
}

.guestbook-btn-edit,
.guestbook-btn-delete {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    cursor: pointer;
    border: none;
}
.guestbook-btn-edit {
    background: url(../images/ico18-edit.svg) no-repeat center center / cover;
    background-size: 1.8rem;
}
.guestbook-btn-delete {
    background: url(../images/ico18-x-black.svg) no-repeat center center / cover;
    background-size: 1.8rem;
}

.guestbook-text {
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--guestbook-item-text-color);
    text-align: left;
}

.invitation-block.guestbook .pagination {
    margin-top: 0.8rem;
}

/* .guestbook-item.empty {
    gap: 0;
    min-height: 32rem;
    justify-content: center;
}
.guestbook-item.empty .guestbook-header {
    justify-content: center;
    opacity: 0.7;
}
.guestbook-item.empty .guestbook-content .guestbook-text {
    text-align: center;
    opacity: 0.6;
} */

/* rsvp */
.invitation-block.rsvp .invitation-actions {
    margin-top: 1.6rem;
}

/* 계좌 정보 드롭다운 */
.account-accordion-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1.6rem;
}

.account-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--account-accordion-btn-bg);
    border: 0.1rem solid var(--account-accordion-border);
    border-radius: 1.2rem;
    overflow: hidden;
}

.account-accordion.is-open {
    border: 0.1rem solid var(--account-accordion-active-border);
    box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.08);
}

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.6rem 2rem;
    background: var(--account-accordion-btn-bg);
    border: unset;
    cursor: pointer;
}

.account-header-title {
    /* font-family: var(--font-main); */
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--account-accordion-header-color);
}

.account-header-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: none;
}

.account-header-icon::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    background: url(../images/icco20-arrow-down.svg) no-repeat center center / cover;
    background-size: 2rem;
    transition: transform 0.3s ease;
}

.account-accordion.is-open .account-header-icon::before {
    transform: rotate(-180deg);
}

.account-panel {
    background: var(--account-accordion-body-bg);
    text-align: left;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.account-panel-inner {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    flex-direction: column;
    gap: 1.6rem;

    opacity: 0;
    transform: translateY(-0.3rem);
    transition:
        opacity 240ms ease,
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        padding 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.account-accordion.is-open .account-panel {
    grid-template-rows: 1fr;
    border-top: 0.1rem solid var(--account-accordion-border);
    transition: grid-template-rows 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.account-accordion.is-open .account-panel-inner {
    opacity: 1;
    transform: translateY(0);
    padding: 1.6rem 2rem;
    transition:
        opacity 180ms ease,
        transform 260ms cubic-bezier(0.4, 0, 0.2, 1),
        padding 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.account-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2.4rem;
}

.account-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.account-info-owner p {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.6rem;
    /* font-family: var(--font-main); */
    font-size: 1.5rem;
}

.account-info-owner-name {
    font-size: 1.6rem;
    font-weight: 700;
}

.account-info-bank {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.account-info-bank-name {
    /* font-family: var(--font-main); */
    font-size: 1.5rem;
}

.account-info-bank-number {
    /* font-family: var(--font-main); */
    font-size: 1.5rem;
    display: flex;
    align-items: center;
}

.account-info-bank-number::before {
    content: "";
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    background: var(--color-text);
    border-radius: 50%;
    margin: 0 0.6rem;
}

.account-copy-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    flex: 0 0 auto;
    cursor: pointer;
    border: none;
    background: rgba(255, 255, 255, 0.4);
    border: 0.2rem solid var(--white);
    border-radius: 0.8rem;
    box-shadow: 0 0.2rem 1.2rem rgba(39, 42, 43, 0.12);
    backdrop-filter: blur(2rem);
}

.account-copy-btn::before {
    content: "";
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    background: url(../images/ico16-copy.svg) no-repeat center center / cover;
    background-size: 1.6rem;
}

/* 공유하기 */
.share-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 4rem;
}

.share-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
}

.share-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.8rem;
    height: 4.8rem;
    flex: 0 0 auto;
    cursor: pointer;
    border: none;
    background: var(--white);
    border: 0.1rem solid var(--neutral-300);
    border-radius: 0.4rem;
}

.share-btn::before {
    content: "";
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    background-size: 2.4rem;
}
.share-btn.kakao {
    background: #ffe812;
    border: 0.1rem solid #ffe812;
}
.share-btn.kakao::before {
    background: url(../images/ico24-share-kakao.svg) no-repeat center center / cover;
}

.share-btn.url::before {
    background: url(../images/ico24-share-url.svg) no-repeat center center / cover;
}

.share-btn.qrcode::before {
    background: url(../images/ico24-share-qrcode.svg) no-repeat center center / cover;
}

.share-btn-text {
    /* font-family: var(--font-main); */
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--neutral-950);
}

/* -------------------------
   3) Invitation Footer
------------------------- */
.invitation-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1.6rem;
}

.invitation-footer-logo {
    width: 9.2rem;
    height: 3.2rem;
}

.invitation-footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.invitation-footer-inner {
    font-family: "Wanted Sans Variable", sans-serif;
    font-size: 1.4rem;
    line-height: 1.4;
    text-align: center;
    color: var(--neutral-600);
}

/* =========================================================
   4) Modal
========================================================= */
.modal {
    font-family: "Wanted Sans Variable", sans-serif;
    position: fixed;
    inset: 0;
    z-index: 1002;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 닫힘 상태 */
    visibility: hidden;
    pointer-events: none;
}

.modal.is-open {
    visibility: visible;
    pointer-events: auto;
}
.modal-dim {
    position: fixed;
    inset: 0;
    background: rgba(39, 42, 43, 0.4);
    backdrop-filter: blur(0.4rem);
    -webkit-backdrop-filter: blur(0.4rem);
    transform: translateZ(0);
}

/* 일반 팝업 */
.modal-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--page-max-width);
    max-height: calc(100vh - 4rem);
    margin: 0 2rem;

    background: var(--white);
    color: var(--neutral-950);
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: 0 0.4rem 1.6rem rgba(39, 42, 43, 0.12);

    /* 기본(닫힘/열림 공통 base) */
    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity 260ms cubic-bezier(0.33, 1, 0.68, 1),
        transform 260ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* panel일 때만 패널 페이드 인 */
.modal.is-open[data-variant="panel"] .modal-panel {
    opacity: 1;
    transform: translateY(0);
}

/* image일 땐 패널 애니메이션/표시 자체 제외(안전) */
.modal[data-variant="image"] .modal-panel {
    opacity: 0;
    transition: opacity 200ms ease;
}
.modal.is-open[data-variant="image"] .modal-lightbox {
    opacity: 1;
}

.modal-header {
    padding: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 2;
    margin-left: 0.8rem;
}

/* 이미지형 팝업 */
.modal-lightbox {
    position: fixed;
    inset: 0;
    z-index: 101; /* 딤보다 위 */
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none; /* 기본은 클릭 통과 */
}

.modal-media {
    pointer-events: auto; /* 이미지 영역은 클릭 가능 */
    max-width: var(--page-max-width);
    box-shadow: 0 0.4rem 1.6rem rgba(39, 42, 43, 0.12);
}

.modal-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.8rem;
}

/* X 버튼(우측 상단) */
.modal[data-variant="image"] .modal-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 102;
    pointer-events: auto;
}

.modal[data-variant="image"] .modal-close::before {
    background: url(../images/ico20-x-white.svg) no-repeat center center / cover;
}

/* 이미지 모드: 패널 숨기고 라이트박스만 표시 */
.modal[data-variant="image"] .modal-panel {
    display: none;
}
.modal[data-variant="image"] .modal-lightbox {
    display: flex;
    opacity: 1;
    transform: none;
}

/* 패널 모드: 라이트박스 숨김 */
.modal[data-variant="panel"] .modal-lightbox {
    display: none;
}

.modal-close {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0.8rem;
    background: transparent;
    transition: unset;
}

.modal-close::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    background: url(../images/ico20-x.svg) no-repeat center center / cover;
}

.modal-body {
    padding: 1.6rem;
    overflow-y: auto;
    border-top: 0.1rem solid var(--neutral-200);
    min-height: 0;
    flex: 1;
}

.modal-body::-webkit-scrollbar {
    display: none;
}

.modal-open {
    overflow: hidden;
    height: 100%;
}

.modal-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.modal-form .edit-form-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.modal-form .edit-form-section .edit-form-label {
    color: var(--neutral-700);
    font-size: 1.4rem;
    line-height: 1.4;
}

.modal-form .edit-form-section .edit-form-label span {
    line-height: 1.4;
}

.modal-form .edit-form-section .edit-form-input {
    line-height: 1.4;
}

.modal-form .edit-form-section .edit-form-textarea {
    line-height: 1.4;
}

.modal-form-footer {
    width: 100%;
}

.modal-form-submit-btn {
    width: 100%;
    padding: 1.2rem 2rem;
    background: var(--neutral-950);
    border: 0.1rem solid var(--neutral-950);
    border-radius: 0.8rem;
    color: var(--white);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.2s ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .modal-form-submit-btn:hover {
        background: var(--neutral-900);
        border-color: var(--neutral-900);
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal,
    .modal-panel {
        transition: none !important;
    }
}

/* 참석 여부 알려주기 팝업 */
.segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.segmented-item {
    display: block;
}

.segmented-item input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.segmented-btn {
    padding: 1.2rem 1.6rem;
    border-radius: 0.8rem;
    background: var(--neutral-50);
    border: 0.1rem solid var(--neutral-200);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--neutral-700);
    cursor: pointer;
    user-select: none;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}

.segmented-check {
    opacity: 0;
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    background: url(../images/ico16-check-black.svg) no-repeat center center / cover;
    position: absolute;
}

.segmented-item input[type="radio"]:checked + .segmented-btn {
    background: var(--white);
    border-color: var(--neutral-950);
    color: var(--neutral-950);
}

.segmented-item input[type="radio"]:checked + .segmented-btn .segmented-check {
    opacity: 1;
    position: relative;
}

.segmented-item input[type="radio"]:focus-visible + .segmented-btn {
    box-shadow: 0 0 0 0.3rem rgba(43, 46, 47, 0.12);
}

.segmented-item input[type="radio"]:disabled + .segmented-btn {
    background: var(--neutral-200);
    border-color: var(--neutral-200);
    color: var(--neutral-600);
    cursor: not-allowed;
}

.segmented-item input[type="radio"]:disabled + .segmented-btn .segmented-check {
    display: none;
}

/* 동행여부 */
.stepper {
    padding: 0.8rem 1.6rem;
    background: var(--neutral-50);
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stepper-text {
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--neutral-800);
}

.stepper-value {
    font-weight: 700;
    line-height: 1.4;
}

/* 우측 버튼 영역 */
.stepper-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.stepper-btn {
    width: 4rem;
    height: 4rem;
    border-radius: 100rem;
    border: 0.2rem solid var(--white);
    background: rgba(255, 255, 255, 0.8);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0.2rem 1.2rem rgba(43, 46, 47, 0.12);
    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 120ms ease;
}

.stepper-btn.plus {
    background: rgba(39, 42, 43, 0.8);
    border-color: var(--neutral-950);
}

.stepper-btn.minus::before {
    content: "";
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    background: url(../images/ico16-minus-black.svg) no-repeat center center / cover;
}

.stepper-btn.plus::before {
    content: "";
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    background: url(../images/ico16-plus-white.svg) no-repeat center center / cover;
}

.stepper-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.3rem rgba(43, 46, 47, 0.12);
}

.stepper:has(.stepper-btn:disabled) {
    background: var(--neutral-200);
}

.stepper:has(.stepper-btn:disabled) .stepper-text {
    color: var(--neutral-600);
}

.stepper .stepper-btn:disabled {
    background: var(--neutral-400);
    border-color: var(--neutral-500);
    cursor: not-allowed;
}

.stepper .stepper-btn.minus:disabled::before {
    background: var(--neutral-600);

    -webkit-mask-image: url(../images/ico16-minus-black.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;

    mask-image: url(../images/ico16-minus-black.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
}

.stepper .stepper-btn.plus:disabled::before {
    background: var(--neutral-600);

    -webkit-mask-image: url(../images/ico16-plus-white.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;

    mask-image: url(../images/ico16-plus-white.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
}

/* =========================================================
   5) Pagination
========================================================= */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 1.2rem;
}

.pagination-left,
.pagination-right {
    display: flex;
    align-items: center;
}

.pagination-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination-btn {
    font-family: "Wanted Sans Variable", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    background: var(--pagination-bg);
    border: 0.1rem solid var(--pagination-border);
    border-radius: 0.4rem;
    color: var(--pagination-text);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--pagination-hover-bg);
    border-color: var(--pagination-hover-border);
}

.pagination-btn.prev {
    background: url(../images/ico16-arrow-left.svg) no-repeat center;
    background-size: 1.6rem 1.6rem;
}

.pagination-btn.next {
    background: url(../images/ico16-arrow-right.svg) no-repeat center;
    background-size: 1.6rem 1.6rem;
}

@media (hover: hover) and (pointer: fine) {
    .pagination-btn.prev:hover {
        background: url(../images/ico16-arrow-left.svg) no-repeat center var(--pagination-hover-bg);
        background-size: 1.6rem 1.6rem;
    }
    .pagination-btn.next:hover {
        background: url(../images/ico16-arrow-right.svg) no-repeat center var(--pagination-hover-bg);
        background-size: 1.6rem 1.6rem;
    }
}

.pagination-btn.prev,
.pagination-btn.next {
    font-size: 0;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn.active {
    background: var(--pagination-active-bg);
    border-color: var(--pagination-active-border);
    color: var(--pagination-active-text);
    font-weight: 700 !;
}

.pagination-btn.active:hover {
    background: var(--pagination-active-bg);
    border-color: var(--pagination-active-border);
    color: var(--pagination-active-text);
}

.pagination-numbers {
    display: flex;
    gap: 0.4rem;
}

/* =========================================================
   6) 워터마크
========================================================= */

.watermark {
    font-family: "Wanted Sans Variable", sans-serif;
    width: 100%;
    max-width: calc(var(--page-max-width) - 4rem);
    margin: 0 auto;
    padding: 1.6rem;
    position: fixed;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 2000;
    transform: translateY(-50%);
    background: rgba(39, 42, 43, 0.7);
    border: 0.1rem solid rgba(255, 255, 255, 0.15);
    border-radius: 0.8rem;
    backdrop-filter: blur(1.2rem);
}

.watermark-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
}

.watermark-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--white);
}

.watermark-title::before {
    content: "";
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    background: url(../images/ico24-info-white.svg) no-repeat center center / cover;
}

.watermark-text {
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--neutral-200);
    text-align: center;
}

.watermark-date-reset {
    font-weight: 700;
    color: var(--white);
    line-height: 1.4;
}

.watermark-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.4rem;
}

.watermark-bottom-btn {
    font-family: "Wanted Sans Variable", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    padding: 1rem 1.4rem;
    background: rgba(255, 255, 255, 0.8);
    border: 0.2rem solid var(--white);
    border-radius: 100rem;
    color: var(--neutral-950);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0.2rem 1.2rem rgba(39, 42, 43, 0.12);
    backdrop-filter: blur(2rem);
    transition: all 0.2s ease;
}

.watermark-bottom-btn::before {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    background: url(../images/ico18-lock.svg) no-repeat center center / cover;
}

.watermark-bottom-btn:hover:not(:disabled) {
    background: var(--white);
    border-color: var(--white);
}

.watermark-bottom-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.watermark-bottom-btn.active {
    background: var(--white);
    border-color: var(--white);
    color: var(--neutral-950);
    font-weight: 700 !;
}

.watermark-bottom-btn.active:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--neutral-950);
}