@charset "utf-8";
/* =========================================================================
 * service.css — About us > 그날만의 서비스 (Figma 5312:595)
 *   S1 서비스 인트로+패럴랙스 / S2 약속 5가지(스티키) / S3 수상(스와이프) / S4 제휴업체
 * ========================================================================= */

/* ===== S1: 서비스 인트로 + 패럴랙스 카드 ===== */
/* .sv_service 하단-좌측 라운드(border-radius:0 0 0 100px) 코너에 흰색 대신 .sv1 배경이 비치도록:
   .sv1 을 코너 뒤(위로 100px)로 올리고, 서브비주얼을 위 레이어로 둔다 */
.sv_service { z-index: 2; }
.sv1 { position: relative; z-index: 1; margin-top: -100px; overflow: hidden; background-size: cover; background-position: center top; background-repeat: no-repeat; }
.sv1_stage { position: relative; width: 100%; height: min(1304px, 65.2vw); max-width: 2000px; margin: 0 auto; }
.sv1_intro { position: absolute; top: 51.6%; left: 50%; transform: translate(-50%, -50%); width: min(687px, 40vw); text-align: center; z-index: 3; }
.sv1_tit { font-size: 45px; font-weight: 700; letter-spacing: -0.9px; line-height: 1.4; color: #111; }
.sv1_desc { margin-top: 40px; }
.sv1_desc p.sv1_desc_lead { font-size: 24px; font-weight: 600; line-height: 1.5; letter-spacing: -0.48px; color: #111; margin-bottom: 24px; }
.sv1_desc p { font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: -0.36px; color: #111; }
.sv1_desc p + p { margin-top: 24px; }
.sv1_card { position: absolute; width: 15.2%; max-width: 304px; aspect-ratio: 304 / 358; background-size: cover; background-position: center; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; z-index: 2; will-change: transform; }
.sv1_card_dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .18); }
.sv1_card_dim::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(120, 131, 138, .2), rgba(39, 56, 69, .2)); mix-blend-mode: overlay; }
.sv1_card_tx { position: relative; z-index: 1; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.5; text-align: center; }
.sv1_wm { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); z-index: 1; margin: 0; font-family: 'SIMPLECANDY', 'Times New Roman', serif; font-size: 210px; line-height: 1.3; letter-spacing: -2px; color: rgba(70, 70, 70, .1); filter: blur(5px); white-space: nowrap; pointer-events: none; text-transform: uppercase; }

/* ===== S2: 그날이 약속하는 5가지 (스티키 스텝) ===== */
.p5 { padding: 140px 0; }
.p5_inner { display: flex; align-items: flex-start; gap: 200px; }
.p5_media { flex: 0 0 656px; max-width: 656px; align-self: stretch; }
.p5_img { position: sticky; top: calc(50vh - 250px); height: 500px; border-radius: 15px; overflow: hidden; background-size: cover; background-position: center bottom; display: flex; align-items: center; justify-content: center; }
.p5_img_dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .34); }
.p5_img_tx { position: relative; z-index: 1; color: #fff; font-size: 30px; font-weight: 700; letter-spacing: -0.3px; }
.p5_list { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; }
.p5_item { min-height: clamp(320px, 45vh, 560px); display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .35s ease; }
.p5_item.active { opacity: 1; }
.p5_label { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.36px; color: #111; }
.p5_dot { width: 7px; height: 7px; background: #78838a; flex: 0 0 auto; }
.p5_tit { margin-top: 8px; font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.4; color: #111; }
.p5_desc { margin-top: 19px; font-size: 20px; font-weight: 400; letter-spacing: -0.4px; line-height: 1.5; color: #111; }

/* ===== S3: 수상 내역 (다크 밴드 + 스와이프) ===== */
.awd { padding: 130px 0; overflow: hidden; background-color: #20262b; background-size: cover; background-position: center; background-repeat: no-repeat; }
/* 좌측 헤딩은 inner 왼쪽에 정렬, 스와이프는 화면 오른쪽 끝까지 풀블리드 */
.awd_inner { display: flex; align-items: stretch; gap: 40px; width: 100%; box-sizing: border-box; padding-left: max(20px, calc((100% - 1700px) / 2)); padding-right: 0; }
.awd_head { flex: 0 0 429px; max-width: 429px; display: flex; flex-direction: column; justify-content: space-between; min-height: 561px; }
.awd_head_tx { font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -0.48px; color: #fff; }
.awd_head_logo { width: 250px; max-width: 70%; height: auto; }
.awd_sw { flex: 1 1 auto; min-width: 0; overflow: hidden; cursor: grab; touch-action: pan-y; }
.awd_sw.is-drag { cursor: grabbing; }
.awd_track { display: inline-flex; gap: 20px; padding-right: 20px; will-change: transform; }
.awd_card { flex: 0 0 265.75px; width: 265.75px; height: 560px; box-sizing: border-box; border-radius: 15px; background: rgba(255, 255, 255, .2); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); padding: 50px 40px; display: flex; flex-direction: column; }
.awd_card_tx { color: #fff; }
.awd_card_sub { font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: -0.36px; }
.awd_card_main { margin-top: 12px; font-size: 35px; font-weight: 700; line-height: 1.3; letter-spacing: -0.7px; }
.awd_card_badge { margin-top: auto; width: 89px; height: auto; object-fit: contain; }

/* ===== S4: 제휴업체 ===== */
.ptn { padding: 130px 0 150px; }
.ptn_head { text-align: center; margin-bottom: 50px; }
.ptn_label { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.36px; color: #2f3a42; }
.ptn_dot { width: 7px; height: 7px; background: #78838a; flex: 0 0 auto; }
.ptn_tit { margin-top: 35px; font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.4; color: #111; }
.ptn_grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; list-style: none; margin: 0; padding: 0; }
.ptn_item { min-width: 0; }
.ptn_card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; height: 280px; box-sizing: border-box; padding: 24px 20px; background: #fff; border: 1px solid #c0ccd2; color: #111; text-align: center; transition: box-shadow .2s, border-color .2s; }
a.ptn_card:hover { border-color: #78838a; text-decoration: none; }
.ptn_logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 66px; }
.ptn_logo img { max-width: 80%; max-height: 100px; object-fit: contain; }
.ptn_name { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.4; color: #111; }
.ptn_phone { font-size: 18px; font-weight: 400; letter-spacing: -0.36px; color: #333; }

/* ===== 반응형 ===== */
@media (max-width: 1450px) {
    .sv1_wm { font-size: 15vw; }
    .p5_inner { gap: 100px; }
}
@media (max-width: 1200px) {
    /* .sv1_stage 높이는 시안 비율(min(1304px,65.2vw))로 고정 */
    .sv1_tit { font-size: 38px; }
    .p5_media { flex-basis: 46%; }
    .p5_tit { font-size: 30px; }
    .ptn_grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
    /* .sv1_stage 높이는 시안 비율로 고정 */
    .sv1_tit { font-size: 32px; }
    .sv1_desc p.sv1_desc_lead { font-size: 21px; }
    .p5 { padding: 100px 0; }
    .p5_img { height: 420px; top: calc(50vh - 210px); }
    .p5_item { min-height: 56vh; }
    .p5_tit { font-size: 26px; }
    .p5_desc { font-size: 18px; }
    .awd { padding: 100px 0; }
    .awd_inner { flex-direction: column; gap: 34px; padding-left: 20px; }
    .awd_head { flex: none; max-width: none; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; }
    .awd_head_logo { width: 200px; }
    .ptn { padding: 90px 0 100px; }
    .ptn_grid { grid-template-columns: repeat(3, 1fr); }
    .ptn_tit { font-size: 28px; }
    .p5_inner { gap: 50px; }
}

@media (max-width: 768px) {
    /* S1: 절대배치 해제 → 세로 스택 (모바일은 겹침 해제) */
    .sv1 { padding: 70px 0 90px; margin-top: 0; background-size: cover; }
    /* 모바일: 절대배치 해제 → 인트로/워터마크는 전체폭, 카드는 한 줄에 2개씩 */
    .sv1_stage { height: auto; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: flex-start; gap: 20px 16px; padding: 0 20px; box-sizing: border-box; }
    .sv1_intro { position: static; transform: none; flex: 0 0 100%; width: 100%; padding: 0; box-sizing: border-box; }
    .sv1_tit { font-size: 26px; }
    .sv1_desc p.sv1_desc_lead { font-size: 18px; }
    .sv1_desc p { font-size: 15px; }
    .sv1_card_tx { font-size: 18px; }
    .sv1_card { position: static !important; transform: none !important; flex: 0 0 calc(50% - 8px); width: auto; max-width: none; }
    .sv1_wm { position: static; transform: none; flex: 0 0 100%; width: 100%; font-size: 16vw; filter: blur(3px); order: 5; }
    .p5 { padding: 70px 0; }
    .p5_inner { flex-direction: column; gap: 24px; }
    .p5_media { flex: none; max-width: none; width: 100%; align-self: auto; }
    .p5_img { position: relative; top: 0; height: 300px; }
    .p5_img_tx { font-size: 24px; }
    .p5_list { width: 100%; }
    .p5_item { min-height: 0; opacity: 1; margin-bottom: 44px; }
    .p5_label { font-size: 17px; }
    .p5_tit { font-size: 22px; }
    .p5_desc { font-size: 16px; margin-top: 12px; }
    .awd { padding: 70px 0; }
    .awd_head { flex-direction: column; align-items: flex-start; gap: 24px; }
    .awd_head_tx { font-size: 20px; }
    .awd_card { width: 220px; height: 440px; padding: 34px 28px; }
    .awd_card_sub { font-size: 16px; }
    .awd_card_main { font-size: 28px; }
    .ptn { padding: 60px 0 80px; }
    .ptn_head { margin-bottom: 36px; }
    .ptn_label { font-size: 16px; }
    .ptn_tit { font-size: 22px; }
    .ptn_grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .ptn_card { height: 220px; gap: 16px; }
    .ptn_name { font-size: 17px; }
    .ptn_phone { font-size: 15px; }
}
@media (max-width: 486px) {
    .sv1_tit { font-size: 22px; }
    .sv1_desc p.sv1_desc_lead { font-size: 16px; }
    .sv1_desc p { font-size: 14px; }
    .sv1_card_tx { font-size: 16px; }
    .p5_img_tx { font-size: 20px; }
    .p5_tit { font-size: 20px; }
    .p5_desc { font-size: 15px; }
    .p5_label { font-size: 16px; }
    .awd_head_tx { font-size: 18px; }
    .awd_card { width: 200px; height: 400px; }
    .awd_card_sub { font-size: 14px; }
    .awd_card_main { font-size: 24px; }
    .ptn_label { font-size: 14px; }
    .ptn_tit { font-size: 20px; }
    .ptn_name { font-size: 16px; }
    .ptn_phone { font-size: 14px; }
}