@charset "UTF-8";

/* =========================================================
   cover.css (뼈대) — tokens.css 기준 버전
   - 원칙:
     1) 커버 스타일은 반드시 .t-cover-xx 스코프 아래에서만 작성 
     2) 유저 커스텀 허용 포인트는 변수로만 연결
========================================================= */

/* =========================================================
   0) Common Hooks (최소 공통)
========================================================= */

/* 커버 wrapper: 배경/텍스트를 커버 변수로 통일 */
.cover {
    background: var(--cover-bg);
    color: var(--cover-text);
    height: min(100vh, 84.4rem);
    max-height: 84.4rem;
}

.cover-top {
    height: 100%;
}

.cover-top-img {
    height: 100%;
    overflow: hidden;
}

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

/* 모바일: 화면 꽉 차게 */
@media (max-width: 768px) {
    .cover {
        height: 100dvh;
        /* min-height 임시 해제 : 26.03.25 */
        /* min-height: 84.4rem; */
        max-height: none;
    }
}

/* 커버 내부에서 공통적으로 쓰기 좋은 유틸(선택) */
.cover-inner {
    height: 100%;
}

.cover-box {
    height: 100%;
}

.cover.is-dark-photo {
    --cover-fg: #fff;
    --cover-muted: rgba(255, 255, 255, 0.7);
}

/* 사진/미디어 유틸(선택) */
.cover-media {
    width: 100%;
    overflow: hidden;
    border-radius: var(--cover-frame-radius);
}

.cover-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 오버레이 유틸(선택) */
.cover-overlay {
    background: rgba(0, 0, 0, var(--cover-overlay-opacity));
}

/* 프레임 유틸(선택) */
.cover-frame {
    border: 1px solid var(--cover-frame-color);
    border-radius: var(--cover-frame-radius);
    background: var(--surface-bg);
}

/* =========================================================
   1) t-cover-01 (블랙 템플릿에 들어갈 커버)
========================================================= */
.t-cover-01 .cover-01 {
    background: var(--cover-bg);
    color: var(--cover-text);
    position: relative;
    padding: 0.8rem;
}

.t-cover-01 .cover-01 .cover-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    background: url(../images/cover01-bg.png) center/cover no-repeat;
    /* padding: 9.6rem 0; */
}

.t-cover-01 .cover-01 .cover-inner {
    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15);
}

.t-cover-01 .cover-01 .cover-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
    height: auto;
}

.t-cover-01 .cover-01 .cover-top .cover-top-img {
    overflow: unset;
}

.t-cover-01 .cover-01 .cover-top .cover01-wax {
    --wax-mask-dark: url("../images/cover01-seal-dark.png");
    --wax-mask-light: url("../images/cover01-seal-light.png");
    width: 9.6rem;
    height: 9.6rem;
    aspect-ratio: 1 / 1;
    position: relative;
}

.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform: translate(-0.8rem, 0.4rem);
    pointer-events: none;
    opacity: 0.4;
    background: var(--wax-mask-dark) center/contain no-repeat;
    filter: blur(0.2rem) grayscale(1) brightness(0) contrast(1);
}

.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-body {
    position: absolute;
    inset: 0;
    z-index: 1;
    isolation: isolate;
}

/* 컬러 실루엣 */
.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-body::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;

    -webkit-mask-image: var(--wax-mask-dark);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: var(--wax-mask-dark);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-seal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.t-cover-01 .cover-01 .cover-top .cover-top-text {
    font-family: "Nelphim", sans-serif;
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0.5rem;
    color: var(--neutral-800);
}

.t-cover-01 .cover-01 .cover-middle {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* flex: 1; */
    gap: 2.4rem;
}
.t-cover-01 .cover-01 .cover-middle .cover-name-bride,
.t-cover-01 .cover-01 .cover-middle .cover-name-groom {
    font-family: "Noto Serif KR", sans-serif; /* 테마 고정 폰트 */
    font-size: 4rem;
    line-height: 1.2;
    font-weight: 300;
    letter-spacing: 0.5rem;
    color: var(--neutral-950);
}

.t-cover-01 .cover-01 .cover-middle .cover-name-abstract {
    width: 3.6rem;
    height: 2.4rem;
    background: url(../images/cover01-abstract.svg) center/cover no-repeat;
}

.t-cover-01 .cover-01 .cover-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.t-cover-01 .cover-01 .cover-bottom .cover-schedule {
    display: flex;
    justify-content: center;
    align-items: center;
}

.t-cover-01 .cover-01 .cover-bottom .cover-schedule .cover-schedule-text {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--cover-text);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-cover-text01);
}

.t-cover-01 .cover-01 .cover-bottom .cover-schedule .cover-schedule-text:nth-child(n + 2)::before {
    content: "";
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 50%;
    background: var(--color-cover-text02);
    margin: 0 0.8rem;
}

.t-cover-01 .cover-01 .cover-bottom .cover-location {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
}

.t-cover-01 .cover-01 .cover-bottom .cover-location::before {
    content: "";
    width: 20rem;
    height: 0.1rem;
    background: var(--neutral-500);
    margin: 1.2rem 0;
}

.t-cover-01 .cover-01 .cover-bottom .cover-location p {
    font-family: var(--cover-text);
    font-size: 1.8rem;
    line-height: 1.4;
    color: var(--color-cover-text01);
}

.t-cover-01 .cover-01 .cover-bottom .cover-location address {
    font-family: var(--cover-text);
    font-size: 1.4rem;
    font-style: normal;
    line-height: 1.4;
    color: var(--color-cover-text02);
}

/* =========================================================
   2) t-cover-02 (핑크 템플릿에 들어갈 커버)
========================================================= */
.t-cover-02 .cover-02 {
    background: var(--cover-bg);
    color: var(--neutral-950);
    position: relative;
}

.t-cover-02 .cover-02 .cover-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.t-cover-02 .cover-02 .cover-top {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.t-cover-02 .cover-02 .cover-top .cover-top-img {
    width: 100%;
    height: 100%;
}

.t-cover-02 .cover-02 .cover-top .cover-top-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.t-cover-02 .cover-02 .cover-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
    padding-bottom: 4rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, rgba(39, 42, 43, 0), rgba(39, 42, 43, 0.7));
    text-align: center;
}

.t-cover-02 .cover-02 .cover-bottom .cover-abstract-shadow {
    filter: drop-shadow(0 0.1rem 0.2rem rgba(39, 42, 43, 0.4));
}

.t-cover-02 .cover-02 .cover-bottom .cover-abstract-shadow::after {
    content: "";
    width: 24rem;
    height: 12rem;
    border-radius: 100%;
    background: var(--cover-bg);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 0;
    filter: blur(6rem);
}

.t-cover-02 .cover-02 .cover-bottom .cover-abstract {
    position: relative;
    width: 31.8rem;
    aspect-ratio: 318 / 105;
    margin: 0 auto;
    background-color: var(--color-cover-text01);
    -webkit-mask: url("../../static/images/cover02-abstract-title.svg") no-repeat center / contain;
    mask: url("../../static/images/cover02-abstract-title.svg") no-repeat center / contain;
    position: relative;
    z-index: 1;
}

.t-cover-02 .cover-02 .cover-bottom .cover-bottom-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    position: relative;
    z-index: 1;
}

.t-cover-02 .cover-02 .cover-bottom .cover-couple {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
}

.t-cover-02 .cover-02 .cover-bottom .cover-couple .cover-name-bride,
.t-cover-02 .cover-02 .cover-bottom .cover-couple .cover-name-groom {
    /* font-family: var(--font-main); */
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-cover-text01);
    letter-spacing: 0.5rem;
    margin-right: -0.5rem;
    text-shadow: 0 0.1rem 0.1rem rgba(39, 42, 43, 0.4);
}

.t-cover-02 .cover-02 .cover-bottom .cover-couple .cover-name-abstract {
    width: 1.2rem;
    height: 1.2rem;
    background: var(--color-cover-text01);
    -webkit-mask: url("../images/cover02-abstract.svg") no-repeat center / contain;
    mask: url("../images/cover02-abstract.svg") no-repeat center / contain;
}

.t-cover-02 .cover-02 .cover-bottom .cover-bottom-text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.t-cover-02 .cover-02 .cover-bottom .cover-schedule-text,
.t-cover-02 .cover-02 .cover-bottom .cover-location-text {
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--color-cover-text01);
    text-shadow: 0 0.1rem 0.1rem rgba(39, 42, 43, 0.4);
}

.t-cover-02:has(.cover-02.is-dark-photo) .cover-02 .cover-top .cover-middle .cover-name-bride,
.t-cover-02:has(.cover-02.is-dark-photo) .cover-02 .cover-top .cover-middle .cover-name-groom {
    color: var(--white);
}

.t-cover-02:has(.cover-02.is-dark-photo) .cover-02 .cover-top .cover-middle .cover-name-abstract {
    background: var(--white);
}

/* =========================================================
   3) t-cover-03 (베이지 템플릿에 들어갈 커버)
========================================================= */
.t-cover-03 .cover-03 {
    background: var(--cover-bg);
    color: var(--cover-fg);
    position: relative;
}

.t-cover-03 .cover-03 .cover-box {
    padding-top: 6.4rem;
}

.t-cover-03 .cover-03 .cover-top {
    height: auto;
}

.t-cover-03 .cover-03 .cover-abstract {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 16.8rem;
    aspect-ratio: 168 / 78;
    margin: 0 auto;
    background-color: var(--cover-fg);
    -webkit-mask: url("../../static/images/cover03-abstract-title.svg") no-repeat center / contain;
    mask: url("../../static/images/cover03-abstract-title.svg") no-repeat center / contain;
    margin-bottom: 3.6rem;
}

.t-cover-03 .cover-03 .cover-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    margin: 0 1.6rem;
    position: relative;
}

.t-cover-03 .cover-03 .cover-middle::before {
    content: "";
    width: 0.1rem;
    height: 4rem;
    background: var(--cover-fg);
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -1.6rem;
}

.t-cover-03 .cover-03 .cover-middle .cover-name-bride,
.t-cover-03 .cover-03 .cover-middle .cover-name-groom {
    /* font-family: var(--font-main); */
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--cover-fg);
}

.t-cover-03 .cover-03 .cover-middle > *:nth-child(1) {
    writing-mode: sideways-lr;
}

.t-cover-03 .cover-03 .cover-middle > *:nth-last-child(1) {
    writing-mode: sideways-rl;
}

.t-cover-03 .cover-03 .cover-middle .cover-top-img {
    width: 100%;
    height: 54rem;
    border-top-left-radius: 100rem;
    border-top-right-radius: 100rem;
    overflow: hidden;
    flex: 0 0 auto;
    max-width: calc(100% - 1.6rem - 2.2rem - 2.2rem);
}

.t-cover-03 .cover-03 .cover-middle .cover-top-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.t-cover-03 .cover-03 .cover-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-top: 1.6rem;
    text-align: center;
}

.t-cover-03 .share {
    background: var(--white);
}

/* =========================================================
   4) t-cover-04
========================================================= */

.t-cover-04 .cover-04 {
    background: var(--cover-bg);
    color: var(--cover-text);
    position: relative;
}

.t-cover-04 .cover-04 .cover-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4rem 2rem;
    z-index: 0;
}

.t-cover-04 .cover-04 .cover-bottom::before {
    content: "";
    width: 100%;
    height: 32rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.t-cover-04 .cover-04 .cover-bottom-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.t-cover-04 .cover-04 .cover-abstract {
    width: 29.4rem;
    aspect-ratio: 294 / 104;
    margin: 0 auto;
    background-color: var(--cover-fg);
    -webkit-mask: url("../../static/images/cover04-abstract-title.svg") no-repeat center / contain;
    mask: url("../../static/images/cover04-abstract-title.svg") no-repeat center / contain;
}

.t-cover-04 .cover-04 .cover-couple {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}
.t-cover-04 .cover-04 .cover-couple .cover-name-abstract {
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--cover-fg);
    -webkit-mask: url("../images/ico12-heart-black.svg") no-repeat center / contain;
    mask: url("../images/ico12-heart-black.svg") no-repeat center / contain;
}
.t-cover-04 .cover-04 .cover-couple .cover-name-bride,
.t-cover-04 .cover-04 .cover-couple .cover-name-groom {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-cover-text01);
    letter-spacing: 0.5rem;
    margin-right: -0.5rem;
}

.t-cover-04 .cover-04 .cover-schedule-text,
.t-cover-04 .cover-04 .cover-location-text {
    font-size: 1.4rem;
    color: var(--color-cover-text02);
}

.t-cover-04 .invitation-content .invitation-block.greeting::before {
    content: "";
    width: 100%;
    height: 4.8rem;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 1));
    -webkit-backdrop-filter: blur(2rem);
    backdrop-filter: blur(2rem);
}

/* =========================================================
   5) t-cover-05
========================================================= */
.t-cover-05 .cover-05 .cover-box {
    position: relative;
}

.t-cover-05 .cover-05 .cover-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4.8rem 2rem;
    z-index: 0;
    background: linear-gradient(to bottom, rgba(39, 42, 43, 0), rgba(39, 42, 43, 0.8));
}

.t-cover-05 .cover-05 .cover-bottom .cover-bottom-text {
    text-align: center;
}

.t-cover-05 .cover-05 .cover-abstract {
    position: relative;
    width: 22.4rem;
    aspect-ratio: 224 / 113;
    margin: 0 auto;
    filter: drop-shadow(0 0.2rem 0.2rem rgba(0, 0, 0, 0.4));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.t-cover-05 .cover-05 .cover-abstract::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--cover-fg);
    -webkit-mask: url("../images/cover05-abstract-title.svg") no-repeat center / contain;
    mask: url("../images/cover05-abstract-title.svg") no-repeat center / contain;
}

.t-cover-05 .cover-05 .cover-abstract::after {
    content: "";
    display: block;
    width: 4rem;
    height: 0.1rem;
    background: var(--cover-fg);
    position: absolute;
    bottom: -1.2rem;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.t-cover-05 .cover-05 .cover-couple {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    margin-top: 3.6rem;
    margin-bottom: 1.2rem;
}

.t-cover-05 .cover-05 .cover-couple .cover-name-abstract {
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--cover-fg);
    -webkit-mask: url("../images/ico12-heart-black.svg") no-repeat center / contain;
    mask: url("../images/ico12-heart-black.svg") no-repeat center / contain;
}

.t-cover-05 .cover-05 .cover-couple .cover-name-bride,
.t-cover-05 .cover-05 .cover-couple .cover-name-groom {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-cover-text01);
    text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4);
}

.t-cover-05 .cover-05 .cover-schedule-text,
.t-cover-05 .cover-05 .cover-location-text {
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--color-cover-text01);
    text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4);
}

/* =========================================================
   6) t-cover-06
========================================================= */
.t-cover-06 .cover-06 {
    overflow: hidden;
}

.t-cover-06 .cover-06 .cover-box {
    display: flex;
    flex-direction: column;
}

.t-cover-06 .cover-06 .cover-top {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: 1.6rem 2rem 2rem 2rem;
    background: var(--white);
    flex: 1 1 0;
    min-height: 0;
    position: relative;
}

.t-cover-06 .cover-06 .cover-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.2rem;
    height: 0.4rem;
    background: radial-gradient(circle at 0.2rem 0.2rem, var(--color-cover-text01) 0.19rem, transparent 0.2rem);
    background-size: 1rem 0.4rem;
    background-repeat: repeat-x;
    pointer-events: none;
    z-index: 1;
}

.t-cover-06 .cover-06 .cover-top .cover-top-img {
    width: 100%;
    height: 100%;
    border-radius: 1.2rem;
    overflow: hidden;
}

.t-cover-06 .cover-06 .cover-top .cover-top-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.t-cover-06 .cover-06 .cover-top .cover-top-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
}

.t-cover-06 .cover-06 .cover-top .cover-top-text .cover-top-text-date {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
}

.t-cover-06 .cover-06 .cover-top .cover-top-text .cover-top-text-date .cover-top-text-date-month,
.t-cover-06 .cover-06 .cover-top .cover-top-text .cover-top-text-date .cover-top-text-date-day {
    font-family: "ClashDisplay";
    font-size: 4.8rem;
    font-weight: 400;
    line-height: 1;
    color: var(--neutral-950);
}

.t-cover-06 .cover-06 .cover-top .cover-top-text .cover-top-text-date .cover-top-text-date-line {
    width: 100%;
    height: 0.2rem;
    background-color: var(--neutral-950);
}

.t-cover-06 .cover-06 .cover-top .cover-top-text .cover-top-text-title {
    font-family: "ClashDisplay";
    font-size: clamp(1.6rem, 8vw, 3.2rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--neutral-950);
    display: block;
    width: 100%;
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0.1rem;
}

.t-cover-06 .cover-06 .cover-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 4rem;
    flex: 0 0 auto;
    padding: 3.2rem 2rem 4.8rem 2rem;
    min-height: 0;
    background: var(--cover-fg);
    position: relative;
}

.t-cover-06 .cover-06 .cover-bottom::after {
    content: "";
    position: absolute;
    left: -1.9rem;
    right: 0;
    bottom: -2rem;
    height: 3.2rem;
    background: radial-gradient(circle at 1.6rem 1.6rem, #fff 1.6rem, transparent 1.65rem);
    background-size: 4.4rem 3.2rem;
    background-repeat: repeat-x;
    pointer-events: none;
}

.t-cover-06 .cover-06 .cover-bottom .cover-bottom-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex: 0 0 auto;
    min-width: 0;
}

.t-cover-06 .cover-06 .cover-bottom .cover-couple {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.t-cover-06 .cover-06 .cover-bottom .cover-couple .cover-name-bride,
.t-cover-06 .cover-06 .cover-bottom .cover-couple .cover-name-groom {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-cover-text01);
}

.t-cover-06 .cover-06 .cover-bottom .cover-couple .cover-name-abstract {
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 100rem;
    background-color: var(--color-cover-text01);
}

.t-cover-06 .cover-06 .cover-bottom .cover-schedule-text,
.t-cover-06 .cover-06 .cover-bottom .cover-location-text {
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--color-cover-text01);
}

.t-cover-06 .cover-06 .cover-bottom .cover-abstract {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 9.2rem;
    height: 4.2rem;

    background:
        repeating-linear-gradient(90deg, var(--color-cover-text01) 0 2px, transparent 2px 7px),
        repeating-linear-gradient(90deg, transparent 0 13px, var(--color-cover-text01) 13px 18px, transparent 18px 26px),
        repeating-linear-gradient(90deg, transparent 0 34px, var(--color-cover-text01) 34px 36px, transparent 36px 48px);

    background-blend-mode: multiply;
}

.t-cover-06 .invitation-title {
    font-weight: 300;
}

.t-cover-06 .greeting.has-bg {
    background: var(--white);
}

/* =========================================================
   100) 커버 오버라이딩 : 유저가 테마 색상을 변경하는 경우

   색상 테마 종류 : 
   - 커버 01(블랙) : t-skin-black
   - 커버 02(핑크) : t-skin-pink
   - 커버 03(베이지) : t-skin-beige
   - 커버 04(핑크그레이) : t-skin-pink-gray
   - 커버 05(베이지핑크) : t-skin-beige-pink
   - 커버 06(네이비) : t-skin-navy
========================================================= */
.t-cover-01 .cover-01,
.t-cover-02 .cover-02,
.t-cover-03 .cover-03,
.t-cover-04 .cover-04,
.t-cover-05 .cover-05,
.t-cover-06 .cover-06 {
    /* 이미 각각 선언했지만, 방어적으로 공통 선언을 둬도 무방 */
    background: var(--cover-bg);
    color: var(--cover-text);
}

/* =========================================================
   커버 01) 블랙
========================================================= */

/* 핑크 */
.t-skin-pink.t-cover-01 {
    --color-cover-text01: #f8607a;
    --color-cover-text02: #fe9aa9;
    --cover-bg: #fea6b1;
    --wax-color: #ffd2d8;
}

.t-skin-pink.t-cover-01 .cover-01 .cover-top .cover-top-text {
    color: #fea6b1;
}
.t-skin-pink.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-shadow {
    filter: blur(0.2rem) grayscale(1) brightness(0) contrast(0.1);
}
.t-skin-pink.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-body img {
    content: var(--wax-mask-light);
}
.t-skin-pink.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-body::before {
    background: var(--wax-color);
    mask-image: var(--wax-mask-light);
}
.t-skin-pink.t-cover-01 .cover-01 .cover-bottom .cover-location::before {
    background: #ffd2d8;
}

/* 베이지 */
.t-skin-beige.t-cover-01 {
    --color-cover-text01: #b2886a;
    --color-cover-text02: #c6a88d;
    --cover-bg: #c6a88d;
    --wax-color: #e3d8c3;
}

.t-skin-beige.t-cover-01 .cover-01 .cover-top .cover-top-text {
    color: #c6a88d;
}
.t-skin-beige.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-shadow {
    filter: blur(0.2rem) grayscale(1) brightness(0) contrast(0.1);
}
.t-skin-beige.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-body img {
    content: var(--wax-mask-light);
}
.t-skin-beige.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-body::before {
    background: var(--wax-color);
    mask-image: var(--wax-mask-light);
}
.t-skin-beige.t-cover-01 .cover-01 .cover-bottom .cover-location::before {
    background: #d3bda3;
}

.t-skin-beige.t-cover-01 .cover-01 .cover-middle .cover-name-bride,
.t-skin-beige.t-cover-01 .cover-01 .cover-middle .cover-name-groom {
    color: #997054;
}

/* 핑크 그레이 */
.t-skin-pink-gray.t-cover-01 {
    --color-cover-text01: #777f82;
    --color-cover-text02: #979fa1;
    --cover-bg: #db9196;
    --wax-color: #f3d8da;
}

.t-skin-pink-gray.t-cover-01 .cover-01 .cover-top .cover-top-text {
    color: #db9196;
}
.t-skin-pink-gray.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-shadow {
    filter: blur(0.2rem) grayscale(1) brightness(0) contrast(0.1);
}
.t-skin-pink-gray.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-body img {
    content: var(--wax-mask-light);
}
.t-skin-pink-gray.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-body::before {
    background: var(--wax-color);
    mask-image: var(--wax-mask-light);
}
.t-skin-pink-gray.t-cover-01 .cover-01 .cover-bottom .cover-location::before {
    background: #d1d5d6;
}

/* 베이지 핑크 */
.t-skin-beige-pink.t-cover-01 {
    --color-cover-text01: #ca6973;
    --color-cover-text02: #db9196;
    --cover-bg: #e5d9c8;
    --wax-color: #f3d8da;
}

.t-skin-beige-pink.t-cover-01 .cover-01 .cover-top .cover-top-text {
    color: #db9196;
}
.t-skin-beige-pink.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-shadow {
    filter: blur(0.2rem) grayscale(1) brightness(0) contrast(0.1);
}
.t-skin-beige-pink.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-body img {
    content: var(--wax-mask-light);
}
.t-skin-beige-pink.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-body::before {
    background: var(--wax-color);
    mask-image: var(--wax-mask-light);
}
.t-skin-beige-pink.t-cover-01 .cover-01 .cover-bottom .cover-location::before {
    background: #f3d8da;
}

/* 네이비 */
.t-skin-navy.t-cover-01 {
    --color-cover-text01: #5770a0;
    --color-cover-text02: #788eb8;
    --cover-bg: #a7b5d2;
    --wax-color: #d0d7e7;
}

.t-skin-navy.t-cover-01 .cover-01 .cover-top .cover-top-text {
    color: #788eb8;
}
.t-skin-navy.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-shadow {
    filter: blur(0.2rem) grayscale(1) brightness(0) contrast(0.1);
}
.t-skin-navy.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-body img {
    content: var(--wax-mask-light);
}
.t-skin-navy.t-cover-01 .cover-01 .cover-top .cover01-wax .wax-body::before {
    background: var(--wax-color);
    mask-image: var(--wax-mask-light);
}
.t-skin-navy.t-cover-01 .cover-01 .cover-bottom .cover-location::before {
    background: #d0d7e7;
}

.t-skin-navy.t-cover-01 .cover-01 .cover-middle .cover-name-bride,
.t-skin-navy.t-cover-01 .cover-01 .cover-middle .cover-name-groom {
    color: var(--color-cover-text01);
}

/* =========================================================
   커버 02) 핑크
========================================================= */

.t-skin-pink .invitation-contact-btn-icon::after {
    background: url(../images/icco20-arrow-down-white.svg) no-repeat center center / cover;
}

/* 블랙 */
.t-skin-black.t-cover-02 {
    --cover-bg: #272a2b;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}

/* 베이지 */
.t-skin-beige.t-cover-02 {
    --cover-bg: #c6a88d;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}

/* 핑크 그레이 */
.t-skin-pink-gray.t-cover-02 {
    --cover-bg: #db9196;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}

/* 베이지 핑크 */
.t-skin-beige-pink.t-cover-02 {
    --cover-bg: #d3bda3;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}

/* 네이비 */
.t-skin-navy.t-cover-02 {
    --cover-bg: #788eb8;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}

/* =========================================================
   커버 03) 베이지
========================================================= */

/* 블랙 */
.t-skin-black.t-cover-03 {
    --cover-bg: #272a2b;
    --cover-fg: #fff;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}
.t-skin-black.t-cover-03 .cover-bottom {
    color: var(--cover-fg);
}

/* 핑크 */
.t-skin-pink.t-cover-03 {
    --cover-bg: #fea6b1;
    --cover-fg: #fff;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}
.t-skin-pink.t-cover-03 .cover-bottom {
    color: var(--cover-fg);
}

/* 핑크그레이 */
.t-skin-pink-gray.t-cover-03 {
    --cover-bg: #db9196;
    --cover-fg: #fff;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}
.t-skin-pink-gray.t-cover-03 .cover-bottom {
    color: var(--cover-fg);
}

/* 베이지핑크 */
.t-skin-beige-pink.t-cover-03 {
    --cover-bg: #e3d8c3;
    --cover-fg: #ca6973;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}
.t-skin-beige-pink.t-cover-03 .cover-bottom {
    color: var(--cover-fg);
}

/* 네이비 */
.t-skin-navy.t-cover-03 {
    --cover-bg: #788eb8;
    --cover-fg: #fff;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}
.t-skin-navy.t-cover-03 .cover-bottom {
    color: var(--cover-fg);
}

/* =========================================================
   커버 04) 핑크그레이
========================================================= */

/* 블랙 */
.t-skin-black.t-cover-04 {
    --cover-fg: #272a2b;
    --color-cover-text01: #272a2b;
    --color-cover-text02: #61686a;
}

/* 핑크 */
.t-skin-pink.t-cover-04 {
    --cover-fg: #fe9aa9;
    --color-cover-text01: #272a2b;
    --color-cover-text02: #61686a;
}

/* 베이지 */
.t-skin-beige.t-cover-04 {
    --cover-fg: #c6a88d;
    --color-cover-text01: #272a2b;
    --color-cover-text02: #61686a;
}

/* 베이지 핑크 */
.t-skin-beige-pink.t-cover-04 {
    --cover-fg: #db9196;
    --color-cover-text01: #272a2b;
    --color-cover-text02: #61686a;
}

/* 네이비 */
.t-skin-navy.t-cover-04 {
    --cover-fg: #788eb8;
    --color-cover-text01: #788eb8;
    --color-cover-text02: #a7b5d2;
}

/* =========================================================
   커버 05) 베이지핑크
========================================================= */

/* 블랙 */
.t-skin-black.t-cover-05 {
    --cover-fg: #fff;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}

/* 핑크 */
.t-skin-pink.t-cover-05 {
    --cover-fg: #fff;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}

/* 베이지 */
.t-skin-beige.t-cover-05 {
    --cover-fg: #fff;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}

/* 핑크그레이 */
.t-skin-pink-gray.t-cover-05 {
    --cover-fg: #fff;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}

/* 네이비 */
.t-skin-navy.t-cover-05 {
    --cover-fg: #fff;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}

/* =========================================================
   커버 06) 네이비
========================================================= */

/* 블랙 */
.t-skin-black.t-cover-06 {
    --cover-fg: #272a2b;
    --color-cover-text01: #fff;
    --color-cover-text02: #fff;
}

/* 핑크 */
.t-skin-pink.t-cover-06 {
    --cover-fg: #ffd2d8;
    --color-cover-text01: #272a2b;
    --color-cover-text02: #272a2b;
}

/* 베이지 */
.t-skin-beige.t-cover-06 {
    --cover-fg: #efe9dd;
    --color-cover-text01: #272a2b;
    --color-cover-text02: #272a2b;
}

/* 핑크그레이 */
.t-skin-pink-gray.t-cover-06 {
    --cover-fg: #f3d8da;
    --color-cover-text01: #272a2b;
    --color-cover-text02: #272a2b;
}