/* =========================
  Base
========================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

.promo-body{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Pretendard", "Noto Sans KR", sans-serif;
    background: #ffffff;
    color: #222;
}

.kims{ width: 100%; }
.section{ padding: 32px 0; }

.container{
    width: min(1400px, 92%);
    margin: 0 auto;
}

.stack-lg{ display: grid; gap: 18px; }

.section-head{ margin-bottom: 18px; }
.section-head.compact{ margin-bottom: 14px; }

.kicker{
    margin: 0 0 8px;
    font-size: 14px;
    color: #6b6b6b;
}

.title{
    margin: 0 0 8px;
    font-size: 24px;
    letter-spacing: -0.3px;
}

.desc{
    margin: 0;
    color: #666;
    font-size: 15px;
    line-height: 1.6;
}

.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* =========================
  Section1 - Logo
========================= */
.section1{ padding: 28px 0 18px; }

.promo-logo{
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.promo-logo img{
    height: clamp(72px, 18vw, 160px);
    width: auto;
    object-fit: contain;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* =========================
  Section2 - Hero Banner
========================= */
.section2{ padding-top: 10px; }

.hero-banner{
    display: block;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #fff;
}

.hero-img{ width: 100%; height: auto; }

/* =========================
  Common image-card
========================= */
.image-card{
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #fff;
}

/* =========================
  SECTION3
========================= */
.s3-promohead{
    display: none; /* 기본은 숨김(PC는 기존 스타일 유지) */
    width: min(1180px, 92%);
    margin: 0 auto 18px;
    padding: clamp(14px, 2.2vw, 22px) clamp(14px, 2.6vw, 28px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.s3-ph-logo{
    height: clamp(5rem, 11vw, 7rem);
    width: auto;
    object-fit: contain;
    flex: 0 0 auto;
}

.s3-ph-right{
    white-space: nowrap;
    font-weight: 1000;
    letter-spacing: -0.6px;
    color: #4b1f3f;
    font-size: clamp(1rem, 3vw, 2rem);
    text-align: center;
}

.s3-ph-ko{ margin-right: 10px; }
.s3-ph-en{
    display: inline-block;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 1000;
    letter-spacing: 0.18em;
}

.section3.is-lite-bg .s3-promohead{ display: flex; }

.section3.is-lite-bg .s3-title{ margin-top: 0; }

.section3.is-lite-bg .s3-body { background: #f0f1f6; }
.section3.is-lite-bg .s3-body > img.s3-img { display: none; }

.section3{
    padding: 0;
    background: #ffffff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.s3-wrap{
    max-width: 1400px;
    margin: 3rem auto 2rem;
}

.s3-top{
    overflow: hidden;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.s3-body{
    position: relative;
    overflow: hidden;
}

.s3-body > .s3-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.section3.is-lite-bg .s3-body { background: #f0f1f6; }
.section3.is-lite-bg .s3-body > img.s3-img { display: none; }

.s3-img{
    width: 100%;
    height: auto;
    display: block;
}

.s3-overlay{
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(26px, 3.2vw, 54px) 0;
}

.s3-link{ display: block; }

.s3-title{
    width: min(1100px, 92%);
    text-align: center;
    margin-top: clamp(50px, 11vw, 300px);
    margin-bottom: clamp(16px, 2vw, 26px);
}

.s3-title-package{
    width: min(1100px, 92%);
    text-align: center;
    margin-top: clamp(50px, 17vw, 380px);
    margin-bottom: clamp(16px, 2vw, 26px);
}

.s3-h{
    margin: 0 0 10px;
    font-size: clamp(17px, 3.0vw, 44px);
    font-weight: 900;
    letter-spacing: -0.8px;
    color: #4b1f3f;
}

.s3-plus{
    color: #b31319;
    font-weight: 1000;
    font-size: clamp(1.8rem, 5vw, 3rem);
}

.s3-period{
    margin: 0;
    color: #9aa0a6;
    font-weight: 900;
    font-size: clamp(12px, 1.4vw, 20px);
}

.s3-products{
    width: min(1180px, 92%);
    display: grid;
    gap: 1rem;
    margin-top: clamp(8px, 1vw, 14px);
}

.s3-row{
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 1.35fr 220px 0.9fr;
    align-items: center;
    gap: 12px;
}

.s3-badges{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.badge{
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.badge.red{
    background: #b31319;
    color: #fff;
}

.badge.dark{
    background: #2b1d25;
    color: #fff;
}

.s3-name{
    font-size: clamp(16px, 1.6vw, 24px);
    font-weight: 900;
    letter-spacing: -0.6px;
    color: #222;
}

.s3-qty{
    color: #b31319;
    font-weight: 1000;
    margin-left: 6px;
}

.s3-mid{
    display: flex;
    justify-content: center;
}

.s3-mid img{
    width: 200px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.s3-right{ text-align: right; }

.s3-rate{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #ebebeb;
    color: #b31319;
    font-weight: 1000;
    font-size: 12px;
    margin-bottom: 10px;
}

.s3-price{
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 10px;
}

.s3-origin{
    color: #a0a0a0;
    text-decoration: line-through;
    font-weight: 800;
    font-size: clamp(12px, 1.1vw, 18px);
}

.s3-final{
    color: #b31319;
    font-weight: 1000;
    font-size: clamp(16px, 1.8vw, 28px);
    letter-spacing: -0.6px;
}

.s3-note{
    margin: clamp(18px, 2.4vw, 32px) 0 0;
    font-weight: 900;
    color: #4b1f3f;
    text-align: center;
    width: min(1100px, 92%);
}

/* =========================
  SECTION3 - 카드형 상품(캡처 스타일)
  * 기존 s3-와 분리: s3c- 접두사 사용
========================= */
.s3c-wrap{
    padding: 26px 0 40px;
    background: #f1f2f6;
}

.s3c-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 4vw, 40px);
}

.s3c-card{
    position: relative;
    border-radius: 24px;
    background: #fff;
    padding: 26px 26px 22px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    min-height: auto;
}

.s3c-bubble{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 78px;
    height: 78px;
    border-radius: 999px;
    background: #b31319;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 8px 18px rgba(179,19,25,0.22);
    letter-spacing: -0.2px;
}

.s3c-bubble-top{
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    margin-top: 2px;
}

.s3c-bubble-bottom{
    font-size: 18px;
    font-weight: 1000;
    line-height: 1;
    margin-top: 6px;
}

.s3c-media{
    border-radius: 18px;
    padding: 16px;
    display: grid;
    place-items: center;
    min-height: 210px;
}

.s3c-media img{
    width: min(360px, 92%);
    height: auto;
    object-fit: contain;
}

.s3c-title{
    margin: 16px 0 10px;
    font-size: 28px;
    font-weight: 1000;
    letter-spacing: -0.6px;
    color: #1f1a1c;
    line-height: 1.2;
}

.s3c-qty{
    color: #b31319;
    font-weight: 1000;
}

.s3c-price{
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.s3c-origin{
    color: #b7b7b7;
    text-decoration: line-through;
    font-weight: 900;
    font-size: 20px;
}

.s3c-final{
    color: #b31319;
    font-weight: 1000;
    font-size: 28px;
    letter-spacing: -0.6px;
}

.s3c-rate{
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f3f3f3;
    color: #b31319;
    font-weight: 1000;
    font-size: 15px;
}

/* =========================
  Section5 - Profile layout
========================= */
.section5{
    background: #fff;
}

.profile-grid{
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 22px;
    align-items: start;
    margin-top: 18px;
}

.profile-media{
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #fafafa;
}

.profile-media img{ width: 100%; height: auto; }

.profile-content{ min-width: 0; }

.quote{
    margin: 0 0 14px;
    padding: 14px 16px;
    background: #531941;
    border: 1px solid #f1e6ec;
    border-radius: 16px;
}

.quote p{
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.quote span{
    color: #ffffff;
    font-size: 0.9rem;
}

.bullet{
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 3rem;
    color: #2b1d25;
    margin: 2rem 0 16px;
}

.bullet li{
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #f1e6ec;
    background: #fbf7f9;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
    font-size: 14px;
}

.bullet li::before{
    content: "•";
    font-weight: 900;
    color: #4b1f3f;
    flex: 0 0 auto;
    transform: translateY(-1px);
}

.bullet li strong{
    font-weight: 900;
    color: #4b1f3f;
}

.promise{
    margin-top: 50px;
    padding-top: 50px;
    border-top: 1px solid #eee;
}

.promise-title{
    margin: 0 0 30px;
    font-size: 18px;
    letter-spacing: -0.3px;
}

.promise-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.promise-card{
    border-radius: 16px;
    border: 1px solid #eee;
    background: #faf8f8;
    padding: 16px;
}

.promise-card .num{
    font-weight: 900;
    color: #531941;
    margin-bottom: 8px;
    font-size: 2.5rem;
}

.promise-card h4{
    margin: 0 0 8px;
    font-size: 16px;
}

.promise-card p{
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}

/* =========================
  Section6 - Footer banner (Capture Layout)
========================= */
.section6{
    padding: 46px 0;
    position: relative;
}

.section6::before{
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.9;
    z-index: 0;
}

.footer-banner{
    position: relative;
    z-index: 1;
}

.biz-box{
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 34px;
    border-radius: 24px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(238,238,238,0.9);
    backdrop-filter: blur(6px);
}

.biz-grid{
    display: grid;
    grid-template-columns: 360px 1fr 420px;
    gap: 26px;
    align-items: center;
}

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

.biz-logo{
    max-width: 320px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.biz-info{
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.biz-info li{
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 16px;
    align-items: baseline;
    font-size: 16px;
    line-height: 1.25;
}

.biz-info span{ color: #777; font-weight: 800; }
.biz-info b{ color: #222; font-weight: 900; }

.biz-right{
    display: flex;
    justify-content: flex-end;
}

.social{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 14px;
    align-content: start;
    align-items: start;
}

.social-btn{
    width: 200px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid #e9dde5;
    background: #fff;
    font-weight: 900;
    font-size: 14px;
    color: #4b1f3f;
    white-space: nowrap;
}

.social-btn:nth-child(1){ grid-column: 1; grid-row: 1; justify-self: start; }
.social-btn:nth-child(2){ grid-column: 1; grid-row: 2; justify-self: start; }

.social-btn:nth-child(3){ grid-column: 2; grid-row: 1; justify-self: start; }
.social-btn:nth-child(4){ grid-column: 2; grid-row: 2; justify-self: start; }
.social-btn:nth-child(5){ grid-column: 2; grid-row: 3; justify-self: start; }

.social-ico{
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* =========================
  Hover Animation (s3-row, s3c-card)
========================= */
.s3-row,
.s3c-card{
    transition: transform 220ms ease, box-shadow 220ms ease;
    will-change: transform;
}

.s3-row{ border-radius: 18px; }

.s3-row:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.10);
}

.s3-row .s3-mid img{
    transition: transform 260ms ease;
    transform-origin: center;
}

.s3-row:hover .s3-mid img{
    transform: scale(1.04);
}

.s3c-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.s3c-card .s3c-media img{
    transition: transform 260ms ease;
    transform-origin: center;
}

.s3c-card:hover .s3c-media img{
    transform: scale(1.05);
}

.s3c-card .s3c-bubble{
    transition: transform 220ms ease;
}

.s3c-card:hover .s3c-bubble{
    transform: translateY(-2px);
}

/* =========================
  Section5 - Entrance Animation (slow / noticeable)
========================= */
@keyframes s5FadeUpSlow{
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 기본 상태: 진입 전 */
.section5 .section-head,
.section5 .profile-media,
.section5 .profile-content,
.section5 .promise-title,
.section5 .promise-card{
    opacity: 0;
    transform: translateY(30px);
}

/* 진입 시 실행 */
.section5.is-inview .section-head,
.section5.is-inview .profile-media,
.section5.is-inview .profile-content,
.section5.is-inview .promise-title,
.section5.is-inview .promise-card{
    animation: s5FadeUpSlow 1100ms cubic-bezier(.16,1,.3,1) both;
}

/* 딜레이를 크게(확실히 보이게) */
.section5.is-inview .section-head{ animation-delay: 0ms; }
.section5.is-inview .profile-media{ animation-delay: 160ms; }
.section5.is-inview .profile-content{ animation-delay: 320ms; }
.section5.is-inview .promise-title{ animation-delay: 520ms; }
.section5.is-inview .promise-card:nth-child(1){ animation-delay: 700ms; }
.section5.is-inview .promise-card:nth-child(2){ animation-delay: 860ms; }
.section5.is-inview .promise-card:nth-child(3){ animation-delay: 1020ms; }

.section5-1 {
    padding-bottom: 0;
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce){
    .section5 .section-head,
    .section5 .profile-media,
    .section5 .profile-content,
    .section5 .promise-title,
    .section5 .promise-card{
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}
@media (max-width: 1400px){
    .s3-title-package {
        margin-top: 2rem;
    }
    .section3.is-lite-bg .s3-title {
        margin-top: 2rem;
    }
}


@media (max-width: 1024px){
    .biz-grid{
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .biz-left{ justify-content: center; }
    .biz-right{ justify-content: center; }

    .social{
        grid-template-columns: 1fr 1fr;
        justify-items: center;
    }

    .social-btn{
        width: min(320px, 100%);
        justify-self: center !important;
        grid-column: auto !important;
    }
}

@media (max-width: 980px){
    .deal-row{
        grid-template-columns: 1fr;
        text-align: left;
    }

    .deal-right{ justify-content: flex-start; }
    .price-box{ text-align: left; }
    .deal-mid{ justify-content: flex-start; }
    .deal-thumb{ width: 220px; }

    .profile-grid{ grid-template-columns: 1fr; }
    .promise-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
    .s3-row{
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 14px;
    }

    .s3-mid{ justify-content: flex-start; }
    .s3-right{ text-align: left; }
    .s3-price{ justify-content: flex-start; }

    .s3-mid img{
        width: min(260px, 100%);
    }

    .s3c-grid{ grid-template-columns: 1fr; }

    .s3-products{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .s3-row{
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px;
        text-align: center; /* 기본 텍스트 중앙 */
    }

    .s3-left{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .s3-badges{
        justify-content: center;
        margin-bottom: 8px;
    }

    .s3-name{
        text-align: center;
    }

    .s3-mid{
        justify-content: center;
    }

    .s3-mid img{
        width: min(260px, 100%);
    }

    .s3-right{
        text-align: center;
    }

    .s3-rate{
        margin: 0 auto 10px;
    }

    .s3-price{
        justify-content: center;
    }

    .s3c-grid{
        grid-template-columns: 1fr;
    }
}


@media (max-width: 520px){
    .title{ font-size: 20px; }
    .deal-title{ font-size: 16px; }
    .price-final{ font-size: 20px; }
    .biz-info li{ grid-template-columns: 74px 1fr; }
    .promise-card p {
        display: none;
    }
    .bullet {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .quote span {
        display: none;
    }

    .social{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .social-btn{
        width: min(320px, 100%);
    }
    .s3c-title{ font-size: clamp(18px, 5.2vw, 24px); }
    .s3c-origin{ font-size: 16px; }
    .s3c-final{ font-size: 22px; }
    .s3-products{
        grid-template-columns: 1fr;
    }
    .section5-1 {
        padding-bottom: 0;
        padding-top: 0;
    }
}

@media (max-width: 480px){
    .biz-box{
        border-radius: 18px;
        padding: 0 18px 22px;
    }

    .biz-info li{
        grid-template-columns: 64px 1fr;
        font-size: 14px;
        gap: 12px;
    }

    .social{ grid-template-columns: 1fr; }

    .social-btn{
        width: min(320px, 100%);
    }
}