body { background: #fff; }
.video-intro-wrapper { color: #000; }
.standard { width: 900px; margin: 0 auto; }
video { box-sizing: border-box; }
.footer { background-color: #F2F2F7; }

/*
    1. 웨딩영상 이젠 쉽고 감각적으로 
*/
.ly01 { padding: 110px 0 180px 0; }
.ly01 .standard { display: flex; flex-direction: column; gap: 59px; }
.ly01 .text { display: flex; flex-direction: column; gap: 12px; font-weight: 600; }
.ly01 .text > * { display: flex; justify-content: center; }
.ly01 .text .t1 { font-size: var(--fs-40);line-height: var(--lh-40); letter-spacing: var(--ls-40); }
.ly01 .text .t2 { font-size: var(--fs-50);line-height: var(--lh-50); letter-spacing: var(--ls-50); }
.ly01 .text .t3 { padding-top: 12px; font-size: var(--fs-18);line-height: var(--lh-18); letter-spacing: var(--ls-18); color: rgba(60, 60, 67, 0.60); }
.ly01 .video { display: flex; max-width: 100%; overflow: hidden; }
.ly01 .video > video { width: 100%; aspect-ratio: 900 / 506; border-radius: 24px; }
.ly01 .video .mobile { display: none; }

@media only screen and (max-width: 1000px) {    

    .standard { width: auto; margin: 0 16px; }

    .ly01 { padding: 52px 0 140px 0; }
    .ly01 .standard { gap: 52px; }
    .ly01 .text { gap: 0; }
    .ly01 .text .t1 { font-size: var(--fs-32);line-height: var(--lh-32); letter-spacing: var(--ls-32); }
    .ly01 .text .t2 { font-size: var(--fs-32);line-height: var(--lh-32); letter-spacing: var(--ls-32); }
    .ly01 .text .t3 { padding-top: 20px; font-size: var(--fs-16);line-height: var(--lh-16); letter-spacing: var(--ls-16); font-weight: 400; }
    .ly01 .video,
    .ly01 .video > video {
        aspect-ratio: 328 / 328; border-radius: 16px;
    }
    .ly01 .video .pc { display: none; }
    .ly01 .video .mobile { display: block; }
}

/*
    2. 영상 먼저, 결제는 나중에
*/
.ly02 { display: flex; flex-direction: column; gap: 60px; padding-bottom: 180px; }
.ly02 .desc { text-align: center; display: grid; gap: 24px; }
.ly02 .desc .title { font-size: var(--fs-38);line-height: var(--lh-38); letter-spacing: var(--ls-38); font-weight: 600; }
.ly02 .desc .note { color: rgba(60, 60, 67, 0.60); font-size: var(--fs-18);line-height: var(--lh-18); letter-spacing: var(--ls-18); font-weight: 600; }
.ly02 .desc .note b {color: #000;}
.ly02 .contents { position: relative; overflow: hidden; width: 100%; }
.ly02 .start { display: flex; justify-content: center; align-items: center; }
.ly02 .start .sample-make { border-radius: 900px; border: 1px solid rgba(84, 84, 86, 0.16); backdrop-filter: blur(25px); padding: 12px 12px 12px 24px; justify-content: center; align-items: center; gap: 8px; display: flex; font-size: var(--fs-16);line-height: var(--lh-16); letter-spacing: var(--ls-16); font-weight: 600; }
.ly02 .swiper-container { position: relative; overflow: hidden; width: 100%; padding-bottom: 30px; }
.ly02 .swiper-wrapper { display: flex; list-style: none; padding: 0; margin: 0; transition: transform 0.3s ease; /* 스와이프 애니메이션 */ }
.ly02 .swiper-wrapper li.swiper-slide { width: 427.856px; aspect-ratio: 427.856 / 240.669; box-sizing: border-box; }
.ly02 .swiper-wrapper li.swiper-slide .area { background: #ccc; border-radius: 18.876px; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); width: 100%; height: 100%; background-image: url('/app/landing/video/images/sample2.png'); background-size: 108%; background-position: center; position: relative; }
/* 사용하지 않음 */
.ly02 .swiper-wrapper li.swiper-slide .area .btn { display: inline-flex; display: none; align-items: center; justify-content: space-between;padding: 6px 6px 6px 20px;  gap: 8px;background: #fff;border-radius: 900px;position: absolute; bottom: 20px; right: 20px; opacity: 0;  /* 처음에는 버튼이 보이지 않도록 */ visibility: hidden;  /* visibility를 hidden으로 처리하면, 공간을 차지하지 않음 */ transform: translateY(20px);  /* 아래에서 올라오는 효과 */ transition: opacity 0.3s ease, visibility 0s 0.3s, transform 0.3s ease; /* 트랜지션 효과 */ }
.ly02 .swiper-wrapper li.swiper-slide .area .btn span { font-size: var(--fs-15);line-height: var(--lh-15); letter-spacing: var(--ls-15);  font-weight: 600; }
.ly02 .swiper-wrapper li.swiper-slide .area .btn img { width: 30px; }
.ly02 .swiper-wrapper li.active-event .area .btn { opacity: 1;  /* 버튼을 보이도록 설정 */ visibility: visible; transform: translateY(0);  /* 버튼이 원래 위치로 올라오도록 설정 */ transition: opacity 0.3s ease, transform 0.3s ease; /* 트랜지션 효과 */ }

@media only screen and (max-width: 1000px) {  

    .ly02 {gap: 40px;}
    .ly02 .desc { gap: 20px; }
    .ly02 .desc .title { font-size: var(--fs-28);line-height: var(--lh-28); letter-spacing: var(--ls-28); }
    .ly02 .desc .note { font-size: var(--fs-16);line-height: var(--lh-16); letter-spacing: var(--ls-16); font-weight: 400; }
    .ly02 .desc .note b {font-weight: 400;}

    .ly02 .swiper-container {padding-bottom: 12px;}
    .ly02 .swiper-wrapper li.swiper-slide { width: 272px; aspect-ratio: 272 / 153; box-sizing: border-box; }
    .ly02 .swiper-wrapper li.swiper-slide .area {border-radius: 16px;}

    .ly02 .start .sample-make {
        font-size: var(--fs-15);line-height: var(--lh-15); letter-spacing: var(--ls-15);
    }

}

/*
    3. 사진만 업로드 하면 영상이 뚝딱!
*/
.ly03 { padding: 0 0 150px 0; }
.ly03 .standard { display: flex; flex-direction: column; gap: 60px; }
.ly03 .text { display: flex; flex-direction: column; gap: 24px; font-weight: 600;  justify-content: center; align-items: center; }
.ly03 .text > * { text-align: center; }
.ly03 .text .t1 { font-size: var(--fs-50);line-height: var(--lh-50); letter-spacing: var(--ls-50); }
.ly03 .text .t2 { font-size: var(--fs-18);line-height: var(--lh-18); letter-spacing: var(--ls-18); color: rgba(60, 60, 67, 0.60); }
.ly03 .text .t2 b {color: #000;}
.ly03 .video { display: flex; width: 100%; max-width: 100%; overflow: hidden; }
.ly03 .video > video { width: 100%; aspect-ratio: 900 / 506; border-radius: 24px; }
.ly03 .video .mobile { display: none; }

@media only screen and (max-width: 1000px) {  

    .ly03 { padding: 0 0 120px 0; }
    .ly03 .standard {gap: 40px;}
    .ly03 .text {gap: 20px; }
    .ly03 .text .t1 { font-size: var(--fs-32);line-height: var(--lh-32); letter-spacing: var(--ls-32); }
    .ly03 .text .t1 > span {display: block; }
    .ly03 .text .t2 { font-size: var(--fs-16);line-height: var(--lh-16); letter-spacing: var(--ls-16); font-weight: 400; }
    .ly03 .text .t2 b {font-weight: 400; }

    .ly03 .video,
    .ly03 .video > video {
        aspect-ratio: 329 / 455; border-radius: 16px; 
    }
    .ly03 .video .pc { display: none; }
    .ly03 .video .mobile { display: block; }
}

/*
    4. 완벽할 때까지 횟수 제한 없이 수정
*/
.gradibox { background: linear-gradient(180deg, rgba(242, 242, 247, 0.00) 0%, #F2F2F7 50%); padding-bottom: 156px;}
.tools-intro { overflow: hidden; max-width: 100%; }
.tools-intro .standard { display: flex; flex-direction: column;}
.tools-intro .text { display: flex; flex-direction: column; gap: 24px; font-weight: 600;  justify-content: left; align-items: left;}
.tools-intro .text .t1 { font-size: var(--fs-38);line-height: var(--lh-38); letter-spacing: var(--ls-38); }
.tools-intro .text .t2 { font-size: var(--fs-18);line-height: var(--lh-18); letter-spacing: var(--ls-18);  color: rgba(60, 60, 67, 0.60);}
.tools-intro .tools-list {overflow: hidden; margin-top: 60px;}
.tools-intro .tools-list .tools-container {  position: relative; overflow: hidden; width: 100%;}
.tools-intro .tools-list .tools-wrapper { display: flex; list-style: none;  padding: 0; margin: 0; transition: transform 0.3s ease; /* 스와이프 애니메이션 */}
.tools-intro .tools-list .tools-wrapper li.tools-slide { width: 340px; box-sizing: border-box;display: grid;}
.tools-intro .tools-list .tools-wrapper li.tools-slide .box { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); background: #333; width: 100%; background-size: cover; background-position: center; position: relative; overflow: hidden; border-radius: 16px; background: #1C1C1E; display: flex; flex-direction: column;}
.tools-intro .tools-list .tools-wrapper li.tools-slide .box .video,
.tools-intro .tools-list .tools-wrapper li.tools-slide .box video { width: 100%; height: 100%; object-fit: cover; /* 비율 유지하며 전체 화면 채우기 */border-radius: 32px; position: relative;}
/* 비디오 플로팅 재생버튼 */
.tools-intro .tools-list .tools-wrapper li.tools-slide .box .btn-wrap {  position: absolute; z-index: 1; bottom: 12px; right: 12px; width: 40px; height: 40px; background: #A6A6A6; border-radius: 100%; opacity: 0;  /* 처음에는 버튼이 보이지 않도록 */  visibility: hidden;  /* visibility를 hidden으로 처리하면, 공간을 차지하지 않음 */ transform: translateY(20px);  /* 아래에서 올라오는 효과 */ transition: opacity 0.3s ease, visibility 0s 0.3s, transform 0.3s ease; /* 트랜지션 효과 */}
.tools-intro .tools-list .tools-wrapper li.tools-slide .box .btn-wrap > a {background-size: 31%; background-position: center;  background-repeat: no-repeat; width: 100%; height: 100%; display: flex; position: absolute; top: 0; left: 0; z-index: 2; background-color: #A6A6A6; border-radius: 100%;}
.tools-intro .tools-list .tools-wrapper li.tools-slide .box .btn-wrap > .stop { background-image: url('/app/landing/video/images/stop.svg'); background-size: 30.769% auto;}
.tools-intro .tools-list .tools-wrapper li.tools-slide .box .btn-wrap > .play { background-image: url('/app/landing/video/images/play.svg'); background-size: 42.384% auto;}
.tools-intro .tools-list .tools-wrapper li.tools-slide .box .btn-wrap > .replay { background-image: url('/app/landing/video/images/replay.svg'); background-size: 48.5% auto;}
.tools-intro .tools-list .tools-wrapper li.active-event .box .btn-wrap { opacity: 1;  /* 버튼을 보이도록 설정 */ visibility: visible; transform: translateY(0);  /* 버튼이 원래 위치로 올라오도록 설정 */ transition: opacity 0.3s ease, transform 0.3s ease; /* 트랜지션 효과 */}
/* 메세지 안내박스 */
.tools-intro .tools-list .tools-wrapper li.tools-slide .desc { display: grid; gap: 12px;padding: 12px; grid-template-columns: 56px auto; background: #fff; margin: 0 12px 12px 12px; border-radius: 12px; align-items: center;}
.tools-intro .tools-list .tools-wrapper li.tools-slide .desc .block {border-radius: 8px; background: #1C1C1E; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;}
.tools-intro .tools-list .tools-wrapper li.tools-slide .desc .comment { font-size: var(--fs-15);line-height: var(--lh-15); letter-spacing: var(--ls-15);  color: rgba(60, 60, 67, 0.60); display: flex; flex-direction: column; gap: 4px;}
.tools-intro .tools-list .tools-wrapper li.tools-slide .desc .comment > div:first-child { font-size: var(--fs-13);line-height: var(--lh-13); letter-spacing: var(--ls-13); font-weight: 600; color: #000; }
/* 좌우 페이지네이션 */
.tools-intro .tools-list .tools-step { padding-top: 60px; width: 900px; margin: auto;} 
.tools-intro .tools-list .tools-step .inner { display: flex; justify-content: right; align-items: center; gap: 0px;}
.tools-intro .tools-list .tools-step .btn { width: 36px; height: 36px; border-radius: 100%; background-color: #E5E5EA;display: flex; margin-left: 24px; background-size: 27.777% auto; background-repeat: no-repeat; background-position: center; cursor: pointer;}
.tools-intro .tools-list .tools-step .btn.prev { background-image: url('/app/landing/video/images/prev.svg'); }
.tools-intro .tools-list .tools-step .btn.next { background-image: url('/app/landing/video/images/next.svg'); }
.tools-intro .swiper-pagination {
    display: none;
}

@media only screen and (max-width: 1000px) {  

    .tools-intro .text { gap: 20px; align-items: center; }
    .tools-intro .text .t1 { font-size: var(--fs-28);line-height: var(--lh-28); letter-spacing: var(--ls-28); text-align: center; }
    .tools-intro .text .t2 { font-size: var(--fs-16);line-height: var(--lh-16); letter-spacing: var(--ls-16); font-weight: 400; text-align: center; }

    .tools-intro .tools-list .tools-wrapper li.tools-slide {width: 296px;}
    .tools-intro .tools-list .tools-wrapper li.tools-slide .desc .comment {font-size: var(--fs-13);line-height: var(--lh-13); letter-spacing: var(--ls-13);}
    .tools-intro .tools-list .tools-step {display: none;}

    .tools-intro .swiper-pagination {
        display: block;
    }
    .tools-intro .tools-list .tools-container {
        padding-bottom: 48px;
    }
    .tools-intro .swiper-horizontal > .swiper-pagination-bullets, 
    .tools-intro .swiper-pagination-bullets.swiper-pagination-horizontal, 
    .tools-intro .swiper-pagination-custom, .swiper-pagination-fraction {
        top: unset;
        bottom: 0px;
    }
    .tools-intro .swiper-pagination-bullet {
        background: rgba(60, 60, 67, 0.18);
    }
    .tools-intro .swiper-pagination-bullet-active {
        background: rgba(60, 60, 67, 0.6); width: 40px; border-radius: 8px;
    }

}

/**
    5. 서비스 이용 안내
*/
.services { margin-top: 118px; }
.services .title { font-size: var(--fs-26);line-height: var(--lh-26); letter-spacing: var(--ls-26); font-weight: 600;justify-content: center; display: flex;}
.services .service-box { margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.services .service-box > li { background: #fff; padding: 32px;  border-radius: 20px; align-items: flex-start; display: flex; flex-direction: column; gap: 40px;}
.services .service-box > li .headline {font-size: var(--fs-18);line-height: var(--lh-18); letter-spacing: var(--ls-18); font-weight: 600;}
.services .service-box > li .comps { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; width: 100%;}
.services .service-box > li .comps .item { display: flex; flex-direction: column; position: relative; gap: 20px; width: 100%; }
.services .service-box > li .comps .item .mark {display: flex; padding: 8px 16px; justify-content: center; align-items: center;border-radius: 900px; background: #34C759; text-align: center; color: #fff; font-size: var(--fs-15);line-height: var(--lh-15); letter-spacing: var(--ls-15); font-weight: 600;}
.services .service-box > li .comps .item .mark.red { background-color: #FF3B30; }
.services .service-box > li .comps .item .i1 {width: 100%; display: flex; }
.services .service-box > li .comps .item .i1 img { width: 32px; }
.services .service-box > li .comps .item .i2 { width: 100%; font-size: var(--fs-16);line-height: var(--lh-16); letter-spacing: var(--ls-16); font-weight: 600; display: flex; justify-content: space-between; align-items: center;}
.services .service-box > li .comps .item .i3 { width: 100%; display: flex; color: rgba(60, 60, 67, 0.60); font-size: var(--fs-16);line-height: var(--lh-16); letter-spacing: var(--ls-16); }
.services .service-box > li .comps .i4-wrap { display: grid; gap: 24px; }
.services .service-box > li .comps .i4-wrap .i4 { display: flex; align-items: center; gap: 12px; color: rgba(60, 60, 67, 0.60); font-size: var(--fs-16);line-height: var(--lh-16); letter-spacing: var(--ls-16); }
.services .service-box > li .comps .i4-wrap .i4 b { color: #000; font-weight: 400; }

@media only screen and (max-width: 1000px) {  

    .services {
        margin-top: 140px;
    }
    .gradibox { padding-bottom: 80px; }
    .services .service-box {
        gap: 4px;
    }
    .services .standard {background: #fff; padding: 24px 0 50px 0; border-radius: 16px; }
    .services .title { font-size: var(--fs-22);line-height: var(--lh-22); letter-spacing: var(--ls-22); }
    .services .service-box > li .headline {font-size: var(--fs-15);line-height: var(--lh-15); letter-spacing: var(--ls-15); font-weight: 600;}
    .services .service-box {
        margin-top: 32px; 
    }
    .services .service-box > li {
        padding: 0; align-items: center; gap: 32px;
    }
    .services .service-box > li .comps {gap: 32px;}
    .services .service-box > li .comps .item {gap: 12px;}
    .services .service-box > li .comps .item .i1 {justify-content: center;}
    .services .service-box > li .comps .item .i2 { flex-direction: column; gap: 12px; justify-content: center; font-size: var(--fs-15);line-height: var(--lh-15); letter-spacing: var(--ls-15); }
    .services .service-box > li .comps .item .i3 { justify-content: center; font-size: var(--fs-12);line-height: var(--lh-12); letter-spacing: var(--ls-12); text-align: center; padding: 0 10px;}
    .services .service-box > li .comps .item .i2 .mark { padding: 12px 0 0 0; color:#34C759; background: transparent; font-size: var(--fs-13);line-height: var(--lh-13); letter-spacing: var(--ls-13); }

    .services .service-box > li .comps .item .i2 .mark {order: 1;}
    .services .service-box > li .comps .item .i2 span {order: 2;}

    .services .service-box > li .comps .i4-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%; gap: 16px;
    }
    .services .service-box > li .comps .i4-wrap .i4 {
        flex-direction: column;
        gap: 12px; font-size: var(--fs-12);line-height: var(--lh-12); letter-spacing: var(--ls-12);
        justify-content: center; font-weight: 600;
    }
    .services .service-box > li .comps .i4-wrap .i4 b {font-weight: 600;}
}

/**
    6. 영상 템플릿 소개
*/
.templates { padding-top: 120px; }
.templates .albums { display: grid; gap: 120px; }

.templates .albums .album { display: flex; flex-direction: column; }
.templates .albums .album .frame { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.templates .albums .album .info { display: flex; max-width: 428px; height: 309px; flex-direction: column; justify-content: space-between; padding: 12px 0; }
.templates .albums .album .info .name { font-size: var(--fs-26);line-height: var(--lh-26); letter-spacing: var(--ls-26); font-weight: 600; display: flex; justify-content: left; gap: 16px; align-items: center; }
.templates .albums .album .info .name .btn {display: none;}
.templates .albums .album .info .name .new { border-radius: 8px; border: 2px solid #FF4A87; display: flex; color: #FF4A87; font-size: var(--fs-13);line-height: var(--lh-13); letter-spacing: var(--ls-13); display: flex; padding: 6px 8px; align-items: center;}
.templates .albums .album .info .note {color: rgba(60, 60, 67, 0.60); font-size: var(--fs-16);line-height: var(--lh-16); letter-spacing: var(--ls-16); }
.templates .albums .album .info .etc { display: flex; justify-content: left; align-items: center; gap: 12px; margin: 24px 0;}
.templates .albums .album .info .etc > li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-14);line-height: var(--lh-14); letter-spacing: var(--ls-14); }
.templates .albums .album .info .btn { border-radius: 8px; background: #007AFF; display: inline-flex; padding: 12px 48px; color: #fff; font-weight: 600; font-size: var(--fs-14);line-height: var(--lh-14); letter-spacing: var(--ls-14); }
.templates .albums .album .preview { width: 440px; height: 309px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background-image: url('/app/landing/video/images/video1.png?v=1'); background-size: cover; background-position: center; position: relative; }
.templates .albums .album .preview .play { display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; justify-content: center; align-items: center; width: 40px; height: 40px; }
.templates .albums .album .preview .play .luminosity { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; border-radius: 10px; background-color: rgba(166, 166, 166, 0.7); mix-blend-mode: luminosity; border-radius: 50%; backdrop-filter: blur(5px); }
.templates .albums .album .preview .play .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; border-radius: 10px; background-color: rgba(51, 51, 51, 1); mix-blend-mode: color-dodge; border-radius: 50%; opacity: 1; }
.templates .albums .album .preview .play svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 4; }
.templates .albums .details-container { overflow: hidden; position: relative; width: 900px;  margin: 40px auto auto auto; }
.templates .albums .details { display: flex; position: relative; }
.templates .albums .details li { display: flex; flex-direction: column; width: 300px;  gap: 20px; }
.templates .albums .details .example-visual { border-radius: 12px; background: #ccc; aspect-ratio: 300 / 200; background-repeat: no-repeat; background-position: center; background-size: cover; display: grid; align-items: center; overflow: hidden; width: 300px; height: 200px; }
.templates .albums .details .example { display: grid; gap: 12px; }
.templates .albums .details .example .title { font-weight: 600; font-size: var(--fs-16);line-height: var(--lh-16); letter-spacing: var(--ls-16); }
.templates .albums .details .example .note { color: rgba(60, 60, 67, 0.60); font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16);  }

.templates .albums .album .frame .info > .m-1 .note .more {display: none}

/* 기본: PC에서는 항상 보여짐 */
.templates .albums .album .frame .info > .m-1 .note .more-text {
  display: block !important;
}

/* 모바일에서만 버튼 보이게 */
.templates .albums .album .frame .info > .m-1 .note .more {
  display: none;
  cursor: pointer;
}

@media only screen and (max-width: 1000px) {  


    .templates {
        padding-top: 80px;
    }
    .templates .standard {margin: 0;}
    .templates .albums {
        gap: 100px;
    }
    .templates .albums .album {
        overflow: hidden;
    }
    .templates .albums .album .frame {
        flex-direction: column;
        margin:0 16px;
    }
    .templates .albums .album .frame .info {order: 2; padding: 0; height: auto; max-width: 100%; width: 100%;}
    .templates .albums .album .frame .preview {order: 1;}

    .templates .albums .album .preview {
        width: 100%; height: auto;
        aspect-ratio: 440 / 309;
    }
    .templates .albums .album .frame .info > .m-1 {display: flex; flex-direction: column;}
    .templates .albums .album .frame .info > .m-1 .etc {order: 1; margin: 0;}
    .templates .albums .album .info .etc > li {font-size: var(--fs-13);line-height: var(--lh-13); letter-spacing: var(--ls-13);}
    .templates .albums .album .frame .info > .m-1 .name {order: 2;font-size: var(--fs-22);line-height: var(--lh-22); letter-spacing: var(--ls-22); justify-content: space-between; margin-top: 16px;}
    .templates .albums .album .frame .info > .m-1 .note {margin-top: 20px; order: 3; font-size: var(--fs-14);line-height: var(--lh-14); letter-spacing: var(--ls-14); display: flex; flex-direction: column; gap: 20px;}
    .templates .albums .album .frame .info > .m-2 {display: none;}

    .templates .albums .album .frame .info > .m-1 .note .more {
        display: flex; gap: 8px;
        font-size: var(--fs-13);line-height: var(--lh-13); letter-spacing: var(--ls-13); 
        font-weight: 600; color: #000; align-items: center;
    } 
    /* 모바일에서만 숨김 가능하게 설정 */
    .templates .albums .album .frame .info > .m-1 .note.mobile-hide .more-text {
        display: none !important;
    }
    
    .templates .albums .album .frame .info > .m-1 .note .more .circle {
        width: 20px;
        transition: transform 0.3s ease;
    }
    .templates .albums .album .frame .info > .m-1 .note.mobile-hide .more .circle {
        transform: rotate(180deg);
    }

    .templates .albums .album .info .name .btn {display: inline-flex; padding: 10px 28px;}
    .templates .albums .album .info .name .new {display: none;}


    .templates .albums .details-container {
        width: 100%; margin-top: 32px;
        overflow: hidden;
    }
    .templates .albums .details .example .title {font-size: var(--fs-14);line-height: var(--lh-14); letter-spacing: var(--ls-14);}
    .templates .albums .details .example .note {font-size: var(--fs-14);line-height: var(--lh-14); letter-spacing: var(--ls-14);}


}

/*
    7. 고객 후기
*/
.reviews { background: linear-gradient(180deg, rgba(242, 242, 247, 0.00) -3.79%, #F2F2F7 41.38%); padding-top: 180px; }
.reviews .headline { display: flex; flex-direction: column; gap: 24px; justify-content: center; align-items: center; }
.reviews .headline .note { display: grid; gap: 24px; justify-content: center; text-align: center;}
.reviews .headline .note img { height: 30px; align-items: center; justify-content: center; text-align: center;}
.reviews .headline .note > .title { font-size: var(--fs-28); line-height: var(--lh-28); letter-spacing: var(--ls-28); font-weight: 600; }
.reviews .headline .comps { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.reviews .headline .comps > li {width: 290px;display: inline-flex;justify-content: space-between; align-items: center;padding: 16px 24px; border-radius: 12px; background: #734CF6;color: #FFF; font-size: var(--fs-18); line-height: var(--lh-18); letter-spacing: var(--ls-18); font-weight: 600;}
.reviews .headline .comps > li.green { background: #03C569; }
.reviews .headline .comps > li div { display: flex; align-items: center; gap: 6px;}
.reviews-container { overflow: hidden; padding: 100px 0;}
.reviews .lists { padding: 0; }
.reviews .lists ul.review { display: flex; } 
.reviews .lists ul.review li { border-radius: 24px; background: #FFF; width: 320px; display: inline-flex; padding: 28px 20px; flex-direction: column; align-items: flex-start; gap: 16px; position: relative; }
.reviews .lists ul.review li .profile { border-radius: 100%; border: 1px solid rgba(84, 84, 86, 0.34); background-color: #000; background-color: lightgray; background-position: center;  background-size: cover; width: 64px; height: 64px; position: absolute; top: -32px; left: 0; right: 0; margin: auto; }
.reviews .lists ul.review li .writer { display: flex; flex-direction: column; position: relative;  gap: 12px; width: 100%; font-size: var(--fs-13); line-height: var(--lh-13);  letter-spacing: var(--ls-13); }
.reviews .lists ul.review li .writer .name { font-weight: 600; }
.reviews .lists ul.review li .writer .score img { width: 120px; }
.reviews .lists ul.review li .writer .date { position: absolute; top: 0; right: 0; color: rgba(60, 60, 67, 0.60); text-align: right; font-weight: 400; }
.reviews .lists ul.review li .content { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); height: 120px; display: -webkit-box; overflow: hidden; word-break: break-word; text-overflow: ellipsis; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }



@media only screen and (max-width: 1000px) {  

    .reviews .headline .note > .title {
        display: flex; flex-direction: column;
    }
    .reviews .headline .comps > li {
        font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15);
    }
    .reviews-container {
        padding: 80px 0;
    }
}