body.v3-skin {
    --v3-skin-width: 400px;
    --v3-wrap-offset-top: 46px;
    --v3-wrap-radius: 24px 24px 0 0;
    width: var(--v3-skin-width);
    overflow-x: hidden;
    background-color: #f4f4f4;
}
.v3-skin-wrap {
    margin-top: var(--v3-wrap-offset-top);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
    border-radius: var(--v3-wrap-radius);
}
body.v3-skin #watermark {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* position:fixed 는 viewport 기준이라 wrap이 아니라 화면 전체를 덮음.
   wrap이 화면에 보이는 박스(상단 여백 ~ 하단, 400px)에 맞춤 */
body.v3-skin .v3-skin-intro-wrap,
body.v3-skin .v3-skin-popup,
body.v3-skin .section_flower__floating {
    left: 50%;
    right: auto;
    width: var(--v3-skin-width);
    max-width: 100%;
    margin-left: calc(var(--v3-skin-width) * -0.5);
}
body.v3-skin .v3-skin-intro-wrap,
body.v3-skin .v3-skin-popup {
    top: var(--v3-wrap-offset-top);
    bottom: auto;
    height: calc(100dvh - var(--v3-wrap-offset-top));
    overflow: hidden;
    border-radius: var(--v3-wrap-radius);
}

@media (max-width: 768px) {
    body.v3-skin {
        --v3-skin-width: 100%;
        width: 100%;
    }
    .v3-skin-wrap {
        margin-top: 0;
        box-shadow: none;
        border-radius: 0;
    }
    body.v3-skin .v3-skin-intro-wrap,
    body.v3-skin .v3-skin-popup,
    body.v3-skin .section_flower__floating {
        top: 0;
        left: 0;
        margin-left: 0;
        width: 100%;
        height: 100vh;
        overflow: visible;
        border-radius: 0;
    }
}