/* v1.0.8 — matching render scale, direct positioning, and theme-aware frames. */

.dy-smc-card {
    container-name: dy-smc-card;
    container-type: inline-size;
}

.dy-smc-card > small {
    max-width: 100%;
    overflow: hidden;
    flex: 0 0 auto;
    font-size: 11px;
    font-size: 2.75cqw;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dy-smc-card .dy-smc-for {
    flex: 0 0 auto;
    font-size: 12px;
    font-size: 3cqw;
    line-height: 1.25;
}

.dy-smc-card .dy-smc-card-media {
    height: auto;
    flex: 0 0 34%;
}

.dy-smc-card h2 {
    flex: 0 0 auto;
    font-size: 30px;
    font-size: 7.5cqw;
    line-height: 1.4;
}

.dy-smc-card .dy-smc-card-message {
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
    font-size: 14px;
    font-size: 3.5cqw;
    line-height: 1.75;
}

.dy-smc-card em {
    flex: 0 0 auto;
    font-size: 14px;
    font-size: 3.5cqw;
    line-height: 1.35;
}

.dy-smc-card.dy-smc-layout-c .dy-smc-card-media { flex-basis: 30%; }
.dy-smc-card.dy-smc-layout-e .dy-smc-card-media { flex-basis: 29%; }
.dy-smc-card.dy-smc-layout-f .dy-smc-card-media { flex-basis: 39%; }
.dy-smc-card.dy-smc-layout-h .dy-smc-card-media { flex-basis: 32%; }

.dy-smc-preview-wrap .dy-smc-card-media:focus-visible {
    outline: 3px solid #a72f34;
    outline-offset: 3px;
}

#dy-smc-preview-media.has-image {
    cursor: grab;
}

#dy-smc-preview-media.has-image.is-dragging {
    cursor: grabbing;
}

#dy-smc-preview-media.has-image img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
}

#dy-smc-preview-media.has-image::after {
    content: "ドラッグで写真を移動";
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 10px;
    padding: 6px 9px;
    border-radius: 2px;
    background: rgba(36, 31, 28, .78);
    color: #fff;
    font: 700 10px/1.2 -apple-system, BlinkMacSystemFont, "Yu Gothic", sans-serif;
    letter-spacing: .04em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s;
}

#dy-smc-preview-media.has-image:hover::after,
#dy-smc-preview-media.has-image:focus-visible::after,
#dy-smc-preview-media.has-image.is-dragging::after {
    opacity: 1;
}

#dy-smc-preview-media.has-image.is-dragging::after {
    content: "移動中";
}

.dy-smc-crop-controls {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #ddd2c8;
    background: #faf7f2;
}

.dy-smc-crop-guide {
    margin: 0 0 18px;
    color: #4d4540;
}

.dy-smc-crop-guide b,
.dy-smc-crop-guide span {
    display: block;
}

.dy-smc-crop-guide b {
    margin-bottom: 6px;
    color: #302a27;
    font-size: 15px;
}

.dy-smc-crop-guide span {
    font-size: 12px;
    line-height: 1.7;
}

.dy-smc-zoom-control {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 10px;
    align-items: center;
}

.dy-smc-crop-controls .dy-smc-zoom-control label {
    display: grid;
    grid-template-columns: auto minmax(90px, 1fr) 52px;
    gap: 10px;
    align-items: center;
    margin: 0;
    font-size: 12px;
}

.dy-smc-crop-controls .dy-smc-zoom-control input {
    width: 100%;
}

.dy-smc-crop-controls output {
    color: #a72f34;
    font-weight: 700;
    text-align: right;
}

.dy-smc-crop-controls .dy-smc-zoom-control button,
.dy-smc-crop-controls .dy-smc-nudge-control button {
    min-width: 44px;
    min-height: 42px;
    padding: 7px;
    border: 1px solid #cfc2b8;
    border-radius: 2px;
    background: #fff;
    color: #3b3430;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

.dy-smc-crop-controls .dy-smc-zoom-control button:hover,
.dy-smc-crop-controls .dy-smc-nudge-control button:hover,
.dy-smc-crop-controls .dy-smc-zoom-control button:focus-visible,
.dy-smc-crop-controls .dy-smc-nudge-control button:focus-visible {
    border-color: #a72f34;
    color: #a72f34;
}

.dy-smc-nudge-control {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    margin-top: 16px;
}

.dy-smc-nudge-control > span {
    font-size: 12px;
    font-weight: 700;
}

.dy-smc-nudge-control > div {
    display: grid;
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    gap: 7px;
}

.dy-smc-crop-controls .dy-smc-nudge-control button[data-crop-center] {
    font-size: 11px;
}

.dy-smc-crop-match {
    margin: 17px 0 13px;
    padding: 12px 14px;
    border-left: 3px solid #53694f;
    background: #eef3ec;
    color: #435142;
    font-size: 12px;
    line-height: 1.7;
}

.dy-smc-crop-controls #dy-smc-remove-media {
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: #8f2930;
    font-size: 12px;
    text-decoration: underline;
}

@media (max-width: 560px) {
    #dy-smc-preview-media.has-image::after { display: none; }
    .dy-smc-crop-controls { padding: 17px 14px; }
    .dy-smc-crop-controls .dy-smc-zoom-control label {
        grid-template-columns: 1fr 48px;
    }
    .dy-smc-crop-controls .dy-smc-zoom-control label > span { display: none; }
    .dy-smc-nudge-control {
        grid-template-columns: 1fr;
        gap: 9px;
    }
    .dy-smc-nudge-control > div { gap: 5px; }
}

/* v1.0.8 — the uploaded photo follows the frame printed into each theme. */
.dy-smc-theme.dy-smc-theme-framed i {
    display: none;
}

.dy-smc-card.dy-smc-framed-card {
    --dy-recipient-left: 10%;
    --dy-recipient-top: 10.5%;
    --dy-recipient-width: 80%;
    --dy-recipient-align: center;
    --dy-photo-left: 13%;
    --dy-photo-top: 20%;
    --dy-photo-width: 74%;
    --dy-photo-border: 5px solid rgba(255, 255, 255, .92);
    --dy-photo-radius: 4px;
    --dy-photo-shadow: 0 10px 24px rgba(61, 47, 37, .17);
    --dy-photo-rotate: 0deg;
    --dy-photo-aspect: 16 / 9;
    --dy-photo-clip: none;
    --dy-title-left: 10%;
    --dy-title-top: 59%;
    --dy-title-width: 80%;
    --dy-title-align: center;
    --dy-message-left: 12%;
    --dy-message-top: 68%;
    --dy-message-width: 76%;
    --dy-message-align: center;
    --dy-sender-left: 68%;
    --dy-sender-top: 91%;
    --dy-sender-width: 24%;
    --dy-sender-align: right;
    --dy-sender-right: auto;
    --dy-sender-bottom: auto;
    display: block;
    padding: 0;
    color: var(--dy-body, #514943);
}

.dy-smc-card.dy-smc-framed-card::after {
    display: none;
}

.dy-smc-card.dy-smc-framed-card > small,
.dy-smc-card.dy-smc-framed-card > .dy-smc-for,
.dy-smc-card.dy-smc-framed-card > .dy-smc-card-media,
.dy-smc-card.dy-smc-framed-card > h2,
.dy-smc-card.dy-smc-framed-card > .dy-smc-card-message,
.dy-smc-card.dy-smc-framed-card > em {
    position: absolute;
    z-index: 3;
    margin: 0;
}

.dy-smc-card.dy-smc-framed-card > small {
    display: var(--dy-label-display, block);
    top: 4.1%;
    left: 6%;
    max-width: 68%;
    color: var(--dy-accent);
    font-size: clamp(5px, 1.5cqw, 7px);
}

.dy-smc-card.dy-smc-framed-card > .dy-smc-for {
    top: var(--dy-recipient-top);
    left: var(--dy-recipient-left);
    width: var(--dy-recipient-width);
    color: var(--dy-recipient-color, var(--dy-accent));
    font-size: var(--dy-recipient-fit-size, var(--dy-recipient-size, clamp(6px, 1.9cqw, 9px)));
    line-height: var(--dy-recipient-line-height, 1.3);
    text-align: var(--dy-recipient-align);
    white-space: nowrap;
    overflow: hidden;
}

.dy-smc-card.dy-smc-framed-card > .dy-smc-card-media {
    z-index: 2;
    top: var(--dy-photo-top);
    left: var(--dy-photo-left);
    width: var(--dy-photo-width);
    height: auto;
    overflow: hidden;
    flex: none;
    aspect-ratio: var(--dy-photo-aspect);
    border: var(--dy-photo-border);
    border-radius: var(--dy-photo-radius);
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--dy-photo-shadow);
    clip-path: var(--dy-photo-clip);
    transform: rotate(var(--dy-photo-rotate));
}

.dy-smc-card.dy-smc-framed-card > .dy-smc-card-media img,
.dy-smc-card.dy-smc-framed-card > .dy-smc-card-media video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block;
}

.dy-smc-card.dy-smc-framed-card > h2 {
    top: var(--dy-title-top);
    left: var(--dy-title-left);
    width: var(--dy-title-width);
    color: var(--dy-title-color, var(--dy-accent));
    font-size: var(--dy-title-fit-size, var(--dy-title-size, clamp(17px, 6.2cqw, 31px)));
    line-height: var(--dy-title-line-height, 1.35);
    text-align: var(--dy-title-align);
    overflow: hidden;
    overflow-wrap: anywhere;
}

.dy-smc-card.dy-smc-framed-card > .dy-smc-card-message {
    top: var(--dy-message-effective-top, var(--dy-message-top));
    left: var(--dy-message-left);
    width: var(--dy-message-width);
    max-height: var(--dy-message-effective-max-height, var(--dy-message-max-height, 22%));
    color: var(--dy-message-color, var(--dy-body, #514943));
    font-size: var(--dy-message-fit-size, var(--dy-message-size, clamp(8px, 2.5cqw, 12px)));
    line-height: var(--dy-message-line-height, 1.72);
    text-align: var(--dy-message-align);
    overflow: hidden;
    overflow-wrap: anywhere;
}

.dy-smc-card.dy-smc-framed-card > em {
    left: var(--dy-sender-left, auto);
    top: var(--dy-sender-top, auto);
    right: var(--dy-sender-right);
    bottom: var(--dy-sender-bottom);
    width: var(--dy-sender-width, auto);
    color: var(--dy-sender-color, var(--dy-accent));
    font-size: var(--dy-sender-fit-size, var(--dy-sender-size, clamp(7px, 2.1cqw, 10px)));
    line-height: var(--dy-sender-line-height, 1.2);
    text-align: var(--dy-sender-align, right);
    white-space: nowrap;
    overflow: hidden;
}

.dy-smc-card.dy-smc-framed-card.dy-smc-title-long > h2 {
    font-size: var(--dy-title-fit-size, var(--dy-title-long-size, clamp(14px, 5cqw, 25px)));
    line-height: 1.4;
}

.dy-smc-card.dy-smc-framed-card.dy-smc-title-very-long > h2 {
    font-size: var(--dy-title-fit-size, var(--dy-title-very-long-size, clamp(10px, 3.2cqw, 16px)));
    line-height: 1.35;
}

.dy-smc-card.dy-smc-framed-card.dy-smc-message-long > .dy-smc-card-message {
    font-size: var(--dy-message-fit-size, var(--dy-message-long-size, clamp(7px, 2.2cqw, 10.5px)));
    line-height: 1.58;
}

.dy-smc-card.dy-smc-framed-card.dy-smc-message-very-long > .dy-smc-card-message {
    font-size: var(--dy-message-fit-size, var(--dy-message-very-long-size, clamp(6px, 1.9cqw, 9px)));
    line-height: 1.45;
}

.dy-smc-card.dy-smc-framed-card.dy-smc-layout-b {
    --dy-recipient-left: 10%; --dy-recipient-top: 12%; --dy-recipient-width: 65%; --dy-recipient-align: left;
    --dy-photo-left: 10%; --dy-photo-top: 19%; --dy-photo-width: 65%;
    --dy-title-left: 10%; --dy-title-top: 55%; --dy-title-width: 65%; --dy-title-align: left;
    --dy-message-left: 10%; --dy-message-top: 64%; --dy-message-width: 65%; --dy-message-align: left;
    --dy-sender-right: 22%;
}

.dy-smc-card.dy-smc-framed-card.dy-smc-layout-c {
    --dy-recipient-left: 20%; --dy-recipient-top: 10%; --dy-recipient-width: 70%; --dy-recipient-align: right;
    --dy-photo-left: 20%; --dy-photo-top: 17%; --dy-photo-width: 68%;
    --dy-title-left: 20%; --dy-title-top: 54%; --dy-title-width: 68%; --dy-title-align: right;
    --dy-message-left: 20%; --dy-message-top: 63%; --dy-message-width: 68%; --dy-message-align: right;
}

.dy-smc-card.dy-smc-framed-card.dy-smc-layout-d {
    --dy-recipient-left: 9%; --dy-recipient-top: 7%; --dy-recipient-width: 82%; --dy-recipient-align: left;
    --dy-photo-left: 9%; --dy-photo-top: 12%; --dy-photo-width: 82%;
    --dy-title-left: 10%; --dy-title-top: 55%; --dy-title-width: 78%; --dy-title-align: left;
    --dy-message-left: 10%; --dy-message-top: 64%; --dy-message-width: 78%; --dy-message-align: left;
}

.dy-smc-card.dy-smc-framed-card.dy-smc-layout-e {
    --dy-recipient-left: 15%; --dy-recipient-top: 14%; --dy-recipient-width: 70%;
    --dy-photo-left: 15%; --dy-photo-top: 21%; --dy-photo-width: 70%;
    --dy-photo-border: 2px solid rgba(218, 185, 103, .88);
    --dy-photo-shadow: 0 12px 30px rgba(0, 0, 0, .32);
    --dy-title-left: 10%; --dy-title-top: 60%; --dy-title-width: 80%;
    --dy-message-left: 12%; --dy-message-top: 69%; --dy-message-width: 76%;
}

.dy-smc-card.dy-smc-framed-card.dy-smc-layout-f {
    --dy-recipient-left: 10%; --dy-recipient-top: 12%; --dy-recipient-width: 62%; --dy-recipient-align: left;
    --dy-photo-left: 10%; --dy-photo-top: 20%; --dy-photo-width: 62%;
    --dy-title-left: 10%; --dy-title-top: 53%; --dy-title-width: 63%; --dy-title-align: left;
    --dy-message-left: 10%; --dy-message-top: 62%; --dy-message-width: 62%; --dy-message-align: left;
    --dy-sender-right: 25%;
}

.dy-smc-card.dy-smc-framed-card.dy-smc-layout-g {
    --dy-recipient-left: 10%; --dy-recipient-top: 6%; --dy-recipient-width: 80%; --dy-recipient-align: right;
    --dy-photo-left: 8%; --dy-photo-top: 10%; --dy-photo-width: 84%;
    --dy-photo-border: 0;
    --dy-photo-shadow: none;
    --dy-title-left: 10%; --dy-title-top: 55%; --dy-title-width: 80%; --dy-title-align: left;
    --dy-message-left: 10%; --dy-message-top: 64%; --dy-message-width: 80%; --dy-message-align: left;
}

.dy-smc-card.dy-smc-framed-card.dy-smc-layout-h {
    --dy-recipient-left: 24%; --dy-recipient-top: 10%; --dy-recipient-width: 66%; --dy-recipient-align: right;
    --dy-photo-left: 18%; --dy-photo-top: 17%; --dy-photo-width: 70%;
    --dy-title-left: 24%; --dy-title-top: 55%; --dy-title-width: 66%; --dy-title-align: right;
    --dy-message-left: 24%; --dy-message-top: 64%; --dy-message-width: 66%; --dy-message-align: right;
}

/* 特別コレクションは汎用a〜hを一度外し、専用座標を基準にする。 */
.dy-smc-card.dy-smc-framed-card[class*="dy-smc-theme-birth-"] {
    --dy-recipient-left: 10%; --dy-recipient-top: 14.5%; --dy-recipient-width: 80%; --dy-recipient-align: center;
    --dy-photo-left: 12%; --dy-photo-top: 24%; --dy-photo-width: 76%;
    --dy-photo-border: 6px solid rgba(255, 255, 255, .94); --dy-photo-radius: 2px; --dy-photo-shadow: 0 10px 24px rgba(61, 47, 37, .18); --dy-photo-rotate: 0deg;
    --dy-title-left: 9%; --dy-title-top: 61%; --dy-title-width: 82%; --dy-title-align: center;
    --dy-message-left: 9%; --dy-message-top: 70%; --dy-message-width: 82%; --dy-message-align: center;
    --dy-sender-right: 8%; --dy-sender-bottom: 4.5%;
}

.dy-smc-card.dy-smc-framed-card[class*="dy-smc-theme-birthday-"] {
    --dy-recipient-left: 10%; --dy-recipient-top: 11%; --dy-recipient-width: 80%; --dy-recipient-align: center;
    --dy-photo-left: 13%; --dy-photo-top: 20%; --dy-photo-width: 74%;
    --dy-photo-border: 6px solid rgba(255, 255, 255, .94); --dy-photo-radius: 2px; --dy-photo-shadow: 0 10px 24px rgba(61, 47, 37, .18); --dy-photo-rotate: 0deg;
    --dy-title-left: 10%; --dy-title-top: 59%; --dy-title-width: 80%; --dy-title-align: center;
    --dy-message-left: 10%; --dy-message-top: 68%; --dy-message-width: 80%; --dy-message-align: center;
    --dy-sender-right: 8%; --dy-sender-bottom: 4.5%;
}

/* 出産内祝い：背景に描かれた写真窓へ個別に合わせる。 */
.dy-smc-card.dy-smc-theme-birth-botanical {
    --dy-recipient-top: 10.5%; --dy-photo-left: 13%; --dy-photo-top: 20%; --dy-photo-width: 74%;
    --dy-title-left: 10%; --dy-title-top: 62%; --dy-title-width: 80%;
    --dy-message-left: 12%; --dy-message-top: 71%; --dy-message-width: 76%;
}

.dy-smc-card.dy-smc-theme-birth-first-hello {
    --dy-recipient-left: 49%; --dy-recipient-top: 10%; --dy-recipient-width: 41%; --dy-recipient-align: right;
    --dy-photo-left: 16%; --dy-photo-top: 31%; --dy-photo-width: 68%; --dy-photo-radius: 18px;
    --dy-photo-border: 5px solid rgba(255, 255, 255, .6); --dy-photo-shadow: 0 12px 28px rgba(113, 77, 51, .17);
    --dy-title-left: 48%; --dy-title-top: 17%; --dy-title-width: 42%; --dy-title-align: right;
    --dy-message-left: 11%; --dy-message-top: 66%; --dy-message-width: 78%;
    --dy-title-color: #b96046; --dy-message-color: #6a5749;
}

.dy-smc-card.dy-smc-theme-birth-bluebird {
    --dy-recipient-left: 10%; --dy-recipient-top: 16.8%; --dy-recipient-width: 43%; --dy-recipient-align: left;
    --dy-photo-left: 8%; --dy-photo-top: 25%; --dy-photo-width: 84%;
    --dy-title-left: 10%; --dy-title-top: 63%; --dy-title-width: 80%; --dy-title-align: left;
    --dy-message-left: 10%; --dy-message-top: 72%; --dy-message-width: 80%; --dy-message-align: left;
    --dy-title-color: #477b9f; --dy-message-color: #4e6875;
}

.dy-smc-card.dy-smc-theme-birth-moon-mobile {
    --dy-recipient-left: 22%; --dy-recipient-top: 29%; --dy-recipient-width: 56%;
    --dy-photo-left: 17%; --dy-photo-top: 33%; --dy-photo-width: 66%; --dy-photo-radius: 999px;
    --dy-title-left: 12%; --dy-title-top: 64.5%; --dy-title-width: 76%;
    --dy-message-left: 12%; --dy-message-top: 73%; --dy-message-width: 76%;
    --dy-title-color: #8c754d; --dy-message-color: #625d6e;
}

.dy-smc-card.dy-smc-theme-birth-linen {
    --dy-recipient-left: 11%; --dy-recipient-top: 15%; --dy-recipient-width: 78%; --dy-recipient-align: left;
    --dy-photo-left: 11%; --dy-photo-top: 22.5%; --dy-photo-width: 78%;
    --dy-photo-border: 1px solid rgba(105, 112, 91, .48); --dy-photo-shadow: 0 8px 18px rgba(57, 58, 44, .13);
    --dy-title-left: 11%; --dy-title-top: 61.5%; --dy-title-width: 78%; --dy-title-align: left;
    --dy-message-left: 11%; --dy-message-top: 70.5%; --dy-message-width: 78%; --dy-message-align: left;
    --dy-title-color: #66715f; --dy-message-color: #55574f;
}

.dy-smc-card.dy-smc-theme-birth-mizuhiki {
    --dy-recipient-left: 12%; --dy-recipient-top: 21%; --dy-recipient-width: 76%; --dy-recipient-align: left;
    --dy-photo-left: 14%; --dy-photo-top: 30%; --dy-photo-width: 72%; --dy-photo-border: 7px solid rgba(255, 255, 255, .9);
    --dy-title-left: 11%; --dy-title-top: 65%; --dy-title-width: 78%;
    --dy-message-left: 11%; --dy-message-top: 73.5%; --dy-message-width: 78%;
    --dy-title-color: #a95f52;
}

.dy-smc-card.dy-smc-theme-birth-tiny-steps {
    --dy-recipient-left: 61%; --dy-recipient-top: 11%; --dy-recipient-width: 29%; --dy-recipient-align: right;
    --dy-photo-left: 15%; --dy-photo-top: 22%; --dy-photo-width: 70%; --dy-photo-radius: 12px; --dy-photo-rotate: -1deg;
    --dy-title-left: 11%; --dy-title-top: 58%; --dy-title-width: 78%;
    --dy-message-left: 11%; --dy-message-top: 67%; --dy-message-width: 78%;
    --dy-title-color: #5f8b93; --dy-message-color: #5c5a50;
}

.dy-smc-card.dy-smc-theme-birth-family-album {
    --dy-recipient-left: 13%; --dy-recipient-top: 49%; --dy-recipient-width: 74%; --dy-recipient-align: left;
    --dy-photo-left: 12%; --dy-photo-top: 10.5%; --dy-photo-width: 76%; --dy-photo-border: 0; --dy-photo-shadow: none;
    --dy-title-left: 13%; --dy-title-top: 55%; --dy-title-width: 74%; --dy-title-align: left;
    --dy-message-left: 13%; --dy-message-top: 64.5%; --dy-message-width: 74%; --dy-message-align: left;
    --dy-sender-right: 11%; --dy-sender-bottom: 7%; --dy-title-color: #765b40; --dy-message-color: #5b4d41;
}

/* 誕生日：写真窓の形状・余白を各デザインに合わせる。 */
.dy-smc-card.dy-smc-theme-birthday-confetti {
    --dy-recipient-top: 10.5%; --dy-photo-left: 13%; --dy-photo-top: 20%; --dy-photo-width: 74%;
    --dy-title-top: 59%; --dy-message-left: 12%; --dy-message-top: 68%; --dy-message-width: 76%;
}

.dy-smc-card.dy-smc-theme-birthday-bouquet {
    --dy-recipient-left: 22%; --dy-recipient-top: 13%; --dy-recipient-width: 68%;
    --dy-photo-left: 21%; --dy-photo-top: 20%; --dy-photo-width: 68%; --dy-photo-border: 3px solid rgba(255, 255, 255, .88);
    --dy-title-left: 12%; --dy-title-top: 58%; --dy-title-width: 70%; --dy-title-align: left;
    --dy-message-left: 12%; --dy-message-top: 67%; --dy-message-width: 67%; --dy-message-align: left;
    --dy-title-color: #925d70; --dy-message-color: #645455;
}

.dy-smc-card.dy-smc-theme-birthday-midnight {
    --dy-recipient-top: 14%; --dy-photo-left: 15%; --dy-photo-top: 22%; --dy-photo-width: 70%;
    --dy-photo-border: 2px solid rgba(211, 167, 84, .9); --dy-photo-shadow: 0 12px 30px rgba(0, 0, 0, .34);
    --dy-title-left: 10%; --dy-title-top: 62%; --dy-title-width: 80%;
    --dy-message-left: 12%; --dy-message-top: 71%; --dy-message-width: 76%;
    --dy-title-color: #f2dfb4; --dy-message-color: #f2ead9; --dy-sender-color: #d3a754;
}

.dy-smc-card.dy-smc-theme-birthday-balloons {
    --dy-recipient-left: 20%; --dy-recipient-top: 12%; --dy-recipient-width: 60%;
    --dy-photo-left: 19%; --dy-photo-top: 23%; --dy-photo-width: 62%; --dy-photo-radius: 18px;
    --dy-title-left: 16%; --dy-title-top: 56%; --dy-title-width: 68%;
    --dy-message-left: 17%; --dy-message-top: 65%; --dy-message-width: 66%;
    --dy-title-color: #7a8fad; --dy-message-color: #665e59;
}

.dy-smc-card.dy-smc-theme-birthday-retro {
    --dy-recipient-left: 13%; --dy-recipient-top: 15%; --dy-recipient-width: 74%; --dy-recipient-align: left;
    --dy-photo-left: 13%; --dy-photo-top: 21%; --dy-photo-width: 74%; --dy-photo-border: 0; --dy-photo-shadow: none;
    --dy-title-left: 13%; --dy-title-top: 61%; --dy-title-width: 74%; --dy-title-align: left;
    --dy-message-left: 13%; --dy-message-top: 70%; --dy-message-width: 74%; --dy-message-align: left;
    --dy-title-color: #cf552a; --dy-message-color: #274f40; --dy-sender-color: #274f40;
}

.dy-smc-card.dy-smc-theme-birthday-cake {
    --dy-recipient-left: 10%; --dy-recipient-top: 11%; --dy-recipient-width: 70%; --dy-recipient-align: left;
    --dy-photo-left: 10%; --dy-photo-top: 19%; --dy-photo-width: 72%; --dy-photo-radius: 12px;
    --dy-title-left: 10%; --dy-title-top: 56%; --dy-title-width: 66%; --dy-title-align: left;
    --dy-message-left: 10%; --dy-message-top: 65%; --dy-message-width: 59%; --dy-message-align: left;
    --dy-sender-right: 44%; --dy-title-color: #bd5f58; --dy-message-color: #65544b;
}

.dy-smc-card.dy-smc-theme-birthday-blue-star {
    --dy-recipient-left: 11%; --dy-recipient-top: 17%; --dy-recipient-width: 78%;
    --dy-photo-left: 11%; --dy-photo-top: 23%; --dy-photo-width: 78%; --dy-photo-border: 3px solid rgba(255, 255, 255, .96);
    --dy-title-left: 12%; --dy-title-top: 73.5%; --dy-title-width: 76%;
    --dy-message-left: 12%; --dy-message-top: 82%; --dy-message-width: 76%;
    --dy-sender-bottom: 3.5%; --dy-title-color: #315d9a; --dy-message-color: #40566f;
}

.dy-smc-card.dy-smc-theme-birthday-blue-star > .dy-smc-card-message {
    max-height: var(--dy-message-max-height, 13%);
}

.dy-smc-card.dy-smc-theme-birthday-photo-booth {
    --dy-recipient-left: 10%; --dy-recipient-top: 6%; --dy-recipient-width: 80%; --dy-recipient-align: right;
    --dy-photo-left: 10%; --dy-photo-top: 11%; --dy-photo-width: 80%; --dy-photo-border: 0; --dy-photo-shadow: none;
    --dy-title-left: 11%; --dy-title-top: 61%; --dy-title-width: 78%; --dy-title-align: left;
    --dy-message-left: 11%; --dy-message-top: 70%; --dy-message-width: 78%; --dy-message-align: left;
    --dy-title-color: #4e4b48; --dy-message-color: #5f5a55; --dy-sender-color: #d66f58;
}

/* v1.1.8 — birthday copy is clipped to each artwork's verified text window.
 * The manifest supplies theme-specific proportional font sizes, so this is a
 * safety boundary rather than a visual truncation in the supported limits. */
.dy-smc-card.dy-smc-framed-card[class*="dy-smc-theme-birthday-"] > .dy-smc-card-message {
    overflow: hidden;
}

/* v1.1.3 — artwork-specific three-layer photo frames.
 * Each selected design is rendered as background -> uploaded photo ->
 * transparent foreground artwork.  This keeps tape, leaves, ribbons, film
 * edges and torn paper above the photo without cutting the photo itself into
 * an unnatural polygon. */
.dy-smc-card.dy-smc-theme-birth-family-album {
    --dy-photo-left: 16%; --dy-photo-top: 13%; --dy-photo-width: 68.8%;
    --dy-photo-aspect: 16 / 9; --dy-photo-border: 0; --dy-photo-radius: 0; --dy-photo-shadow: none;
    --dy-photo-clip: none; --dy-photo-foreground: url("../images/frames/birth-family-album-foreground.webp?ver=1.2.1");
}

.dy-smc-card.dy-smc-theme-birthday-photo-booth {
    --dy-photo-left: 10%; --dy-photo-top: 11%; --dy-photo-width: 80%;
    --dy-photo-aspect: 16 / 9; --dy-photo-border: 0; --dy-photo-radius: 1px; --dy-photo-shadow: none;
    --dy-photo-clip: none; --dy-photo-foreground: url("../images/frames/birthday-photo-booth-foreground.webp");
}

.dy-smc-card.dy-smc-theme-thank-botanical {
    --dy-photo-left: 9.2%; --dy-photo-top: 19.4%; --dy-photo-width: 62.5%;
    --dy-photo-aspect: 16 / 9; --dy-photo-border: 0; --dy-photo-radius: 1px; --dy-photo-shadow: none;
    --dy-photo-clip: none; --dy-photo-foreground: url("../images/frames/thank-botanical-foreground.webp");
}

.dy-smc-card.dy-smc-theme-thank-ribbon {
    --dy-photo-left: 18%; --dy-photo-top: 17%; --dy-photo-width: 70%;
    --dy-photo-aspect: 16 / 9; --dy-photo-border: 0; --dy-photo-radius: 1px; --dy-photo-shadow: none;
    --dy-photo-clip: none; --dy-photo-foreground: url("../images/frames/thank-ribbon-foreground.webp");
}

.dy-smc-card.dy-smc-theme-wedding-minimal {
    --dy-photo-left: 18.5%; --dy-photo-top: 9.5%; --dy-photo-width: 72.1%;
    --dy-photo-aspect: 1.565 / 1; --dy-photo-border: 0; --dy-photo-radius: 1px; --dy-photo-shadow: none;
    --dy-photo-clip: none; --dy-photo-foreground: url("../images/frames/wedding-minimal-foreground.webp");
}

.dy-smc-card.dy-smc-theme-farewell-photo {
    --dy-photo-left: 8%; --dy-photo-top: 10%; --dy-photo-width: 84%;
    --dy-photo-aspect: 16 / 9; --dy-photo-border: 0; --dy-photo-radius: 0; --dy-photo-shadow: none;
    --dy-photo-clip: none; --dy-photo-foreground: url("../images/frames/farewell-photo-foreground.webp");
}

.dy-smc-card.dy-smc-theme-milestone-sunrise {
    --dy-photo-left: 16%; --dy-photo-top: 9.5%; --dy-photo-width: 76%;
    --dy-photo-aspect: 1.65 / 1; --dy-photo-border: 0; --dy-photo-radius: 0; --dy-photo-shadow: none;
    --dy-photo-clip: none; --dy-photo-foreground: url("../images/frames/milestone-sunrise-foreground.webp");
}

.dy-smc-card.dy-smc-theme-cheer-blue {
    --dy-photo-left: 8%; --dy-photo-top: 20%; --dy-photo-width: 84%;
    --dy-photo-aspect: 16 / 9; --dy-photo-border: 0; --dy-photo-radius: 0; --dy-photo-shadow: none;
    --dy-photo-clip: none; --dy-photo-foreground: url("../images/frames/cheer-blue-foreground.webp");
    --dy-title-left: 10%; --dy-title-top: 61%; --dy-title-width: 80%; --dy-title-align: center;
    --dy-message-left: 11%; --dy-message-top: 70%; --dy-message-width: 78%; --dy-message-align: center;
}

.dy-smc-card.dy-smc-theme-anniversary-letter {
    --dy-photo-left: 10%; --dy-photo-top: 15.8%; --dy-photo-width: 80%;
    --dy-photo-aspect: 16 / 9; --dy-photo-border: 0; --dy-photo-radius: 0; --dy-photo-shadow: none;
    --dy-photo-clip: none; --dy-photo-foreground: url("../images/frames/anniversary-letter-foreground.webp");
}

.dy-smc-card.dy-smc-theme-sorry-kraft {
    --dy-photo-left: 2%; --dy-photo-top: 10%; --dy-photo-width: 54%;
    --dy-photo-aspect: 1.141 / 1; --dy-photo-border: 0; --dy-photo-radius: 0; --dy-photo-shadow: none;
    --dy-photo-clip: none; --dy-photo-foreground: url("../images/frames/sorry-kraft-foreground.webp");
}

.dy-smc-card.dy-smc-theme-seasonal-halloween {
    --dy-photo-left: 18%; --dy-photo-top: 16%; --dy-photo-width: 62%;
    --dy-photo-aspect: 1.6 / 1; --dy-photo-border: 0; --dy-photo-radius: 0; --dy-photo-shadow: none;
    --dy-photo-clip: none; --dy-photo-foreground: url("../images/frames/seasonal-halloween-foreground.webp");
}

.dy-smc-card.dy-smc-theme-pet-kraft {
    --dy-photo-left: 10.8%; --dy-photo-top: 13.8%; --dy-photo-width: 80.2%;
    --dy-photo-aspect: 1.88 / 1; --dy-photo-border: 0; --dy-photo-radius: 0; --dy-photo-shadow: none;
    --dy-photo-clip: none; --dy-photo-foreground: url("../images/frames/pet-kraft-foreground.webp");
}

.dy-smc-card.dy-smc-framed-card.dy-smc-has-photo-foreground::after {
    content: "";
    position: absolute;
    z-index: 2;
    display: block;
    inset: 0;
    border: 0;
    background: var(--dy-photo-foreground) center / cover no-repeat;
    pointer-events: none;
}

.dy-smc-card.dy-smc-framed-card.dy-smc-has-photo-foreground > .dy-smc-card-media {
    z-index: 1;
}

/* v1.1.4 — the selectable photo area follows the rectangle printed in the
 * supplied theme artwork.  Layout b/f were inherited from an early generic
 * mock-up and were visibly narrower than the finished 1200 x 1500 artwork. */
.dy-smc-card.dy-smc-framed-card.dy-smc-layout-b:not([class*="dy-smc-theme-birth-"]):not([class*="dy-smc-theme-birthday-"]) {
    --dy-photo-left: 10%;
    --dy-photo-top: 19%;
    --dy-photo-width: 80%;
}

.dy-smc-card.dy-smc-framed-card.dy-smc-layout-f:not([class*="dy-smc-theme-birth-"]):not([class*="dy-smc-theme-birthday-"]) {
    --dy-photo-left: 10%;
    --dy-photo-top: 20%;
    --dy-photo-width: 80%;
}

/* シンプルサンクス：背景のグレー写真窓（約148,246–1122,794）に一致。 */
.dy-smc-card.dy-smc-theme-thank-minimal {
    --dy-photo-left: 12.35%;
    --dy-photo-top: 16.4%;
    --dy-photo-width: 81.15%;
    --dy-photo-aspect: 16 / 9;
    --dy-photo-border: 0;
    --dy-photo-radius: 0;
    --dy-photo-shadow: none;
}

/* 家族のアルバム：前面装飾の透明窓と同じ、印刷済みの紙面全体。 */
.dy-smc-card.dy-smc-theme-birth-family-album {
    --dy-photo-left: 12%;
    --dy-photo-top: 10.5333%;
    --dy-photo-width: 76%;
    --dy-photo-aspect: 16 / 9;
}

/* v1.1.5 — WordPress themes frequently apply `img { height:auto; }` after
 * plugin styles.  On the receive page that collapsed a 16:9 photo window into
 * the source image's very shallow natural ratio.  Keep preview and receive
 * rendering full-bleed inside the same crop box, even under host-theme CSS. */
.dy-smc-app .dy-smc-card.dy-smc-framed-card > .dy-smc-card-media,
.dy-smc-theme-shell .dy-smc-card.dy-smc-framed-card > .dy-smc-card-media {
    height: auto !important;
    aspect-ratio: var(--dy-photo-aspect) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.dy-smc-app .dy-smc-card > .dy-smc-card-media > :is(img, video),
.dy-smc-theme-shell .dy-smc-card > .dy-smc-card-media > :is(img, video) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
    display: block !important;
}