@charset "UTF-8";

/* ===== 웹폰트 : 조선일보명조 ===== */
@font-face{
    font-family: 'Chosunilbo_myungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
}

/* ===== ROOT ===== */
:root{
    --color: #b8000a;   /* Primary Red */
    --gold: #cba15f;    /* 로고 골드 */
    --fs-scale: 0.85;   /* 전체 폰트 배율 — 이 값만 조절하면 모든 섹션 폰트가 함께 커지고 작아짐 */

    --fs42: 42px;   --fs38: 38px;   --fs32: 32px;
    --fs28: 28px;   --fs24: 24px;   --fs22: 22px;
    --fs20: 20px;   --fs18: 18px;   --fs14: 14px;

    --sec-gap: 90px;   /* 섹션 내부 블록 간 표준 세로 간격 (모바일에서 50px로 축소) */
    --txt-gap: 32px;   /* 타이틀 → 바로 아래 설명문 표준 간격 (모바일에서 20px로 축소) */
    --head-h: 72px;    /* 헤더 높이 (비주얼 시작 오프셋·앵커 보정 기준) */
    --bar-h: 60px;     /* 하단 고정바 높이 (히어로가 이만큼 위로 확보) */
}

/* ===== 공통 ===== */
.width{width: 92%; max-width: 1200px; margin: 0 auto;}

/* 앵커 스크롤 : 부드럽게 이동 + 고정 헤더 높이만큼 보정 */
html{scroll-behavior: smooth;}
#step1, #step2, #step3, #step4, #p5, #p7, #p11, #p15{scroll-margin-top: var(--head-h);}

/* ===== 헤더 ===== */
.header{
    position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
    background: linear-gradient(90deg, #2b0708 0%, #520d0e 42%, #7a1214 68%, #4a0c0d 100%);
    transition: background 0.4s ease;
}
.header.scroll{
    background: linear-gradient(90deg, rgba(43,7,8,0.6) 0%, rgba(82,13,14,0.6) 42%, rgba(122,18,20,0.6) 68%, rgba(74,12,13,0.6) 100%);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.header .width{display: flex; align-items: center; justify-content: space-between; padding: 18px 0; position: relative;}
.header_logo{width: 150px; margin: 0;}
.header_logo img{width: 100%;}
.header_nav{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.header_nav ul{display: flex; align-items: center; gap: 70px;}
.header_nav a{
    font-size: var(--fs18); font-weight: 500; letter-spacing: 0.5px; transition: filter 0.25s;
    background: linear-gradient(180deg, #f5e6b8 0%, #cba15f 50%, #a87d43 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.header_nav a:hover{filter: brightness(1.15);}
.header_tel{
    display: flex; align-items: center; gap: 8px; padding: 9px 22px; border-radius: 100px;
    background: linear-gradient(135deg, #ffe79c 0%, #e9b84f 100%);
    box-shadow: 0 4px 14px rgba(233, 184, 79, 0.35);
    animation: telPulse 2.2s ease-in-out infinite;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.header_tel i{font-size: 20px; color: #4a0c0d; line-height: 100%;}
.header_tel b{font-size: var(--fs20); font-weight: 800; letter-spacing: 0.5px; color: #3a0a0b;}
.header_tel:hover{transform: translateY(-2px); box-shadow: 0 7px 20px rgba(233, 184, 79, 0.6); animation: none;}
@keyframes telPulse{
    0%, 100%{box-shadow: 0 4px 14px rgba(233, 184, 79, 0.3);}
    50%{box-shadow: 0 4px 22px rgba(233, 184, 79, 0.7);}
}
/* ===== 하단 고정 무료상담 바 ===== */
.quick_bar{
    position: fixed; left: 0; bottom: 0; width: 100%; z-index: 90;
    background: linear-gradient(90deg, rgba(43,7,8,0.95) 0%, rgba(82,13,14,0.95) 50%, rgba(43,7,8,0.95) 100%);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255, 207, 77, 0.35);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.28);
}
.quick_bar_inner{width: 92%; max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 40px; padding: 7px 0;}
.quick_msg{font-size: 26px; font-weight: 500; letter-spacing: 0.3px; color: #fff; line-height: 100%;}
.quick_msg b{color: #ffcf4d; font-weight: 800;}
.quick_tel{
    display: flex; align-items: center; gap: 10px; padding: 9px 32px; border-radius: 100px;
    background: linear-gradient(135deg, #ffe79c 0%, #e9b84f 100%);
    box-shadow: 0 4px 14px rgba(233, 184, 79, 0.4);
    animation: telPulse 2.2s ease-in-out infinite;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.quick_tel i{font-size: 23px; color: #4a0c0d; line-height: 100%;}
.quick_tel b{font-size: 24px; font-weight: 800; letter-spacing: 0.5px; color: #3a0a0b;}
.quick_tel:hover{transform: translateY(-2px); box-shadow: 0 7px 20px rgba(233, 184, 79, 0.65); animation: none;}

/* 모바일 전용 헤더/드로어는 사용 안 함 — 전 화면 숨김 (PC 헤더를 모바일에서도 사용) */
.mobile_head, .mobile_menu, .mob_bg{display: none;}

/* ===== 섹션1 : 비주얼 ===== */
.p1{
    height: 100vh; margin-top: 0;
    background: #680800; overflow: hidden;
}
.p1_gif{width: 100%; height: 100%; object-fit: cover; display: block;}
.p1_wrap{display: flex; justify-content: space-between; align-items: center;}
.p1_text{display: none; text-align: center; opacity: 0; transform: translateY(30px); transition: opacity 1.4s ease, transform 1.4s ease;}
.p1_text.show{opacity: 1; transform: translateY(0);}
.p1_title{
    font-size: calc(clamp(34px, 4.5vw, 90px) * var(--fs-scale)); font-weight: 800; letter-spacing: 2px; line-height: 100%;
    background:
        linear-gradient(105deg, transparent 35%, rgba(255,248,224,0.85) 50%, transparent 65%) 200% 0 / 200% 100% no-repeat,
        linear-gradient(200deg, #f5e6b8 0%, #cba15f 50%, #a87d43 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: p1ShimmerGold 3.5s linear infinite;
}
@keyframes p1ShimmerGold{
    0%{background-position: 200% 0, 0 0;}
    100%{background-position: -100% 0, 0 0;}
}
.p1_desc{margin-top: 40px; color: #fff; word-break: keep-all;}
.p1_desc p{font-family: 'Chosunilbo_myungjo', serif;}
.p1_han{font-size: calc(clamp(20px, 2.3vw, 45px) * var(--fs-scale)); font-weight: 500; line-height: 115%;}
.p1_lead{font-size: calc(clamp(20px, 2.3vw, 45px) * var(--fs-scale)); font-weight: 500; line-height: 115%;}
.p1_line{display: block; width: 1px; height: 40px; margin: 18px auto; background: #fff;}
.p1_img{width: 11%; margin-right: 21%;}
.p1_img img{width: 100%;}

/* ===== 섹션2 : 브랜드 철학 ===== */
.p2{
    padding: 110px 0;
    background: url(../img/p2-bg.png) no-repeat center center / cover;
}
.p2_text{text-align: center; color: #222; word-break: keep-all;}
.p2 p{font-family: 'Chosunilbo_myungjo', serif;}
.p2_top{display: flex; flex-direction: column; gap: 20px;}
.p2_top p{font-size: calc(clamp(24px, 3.8vw, 75px) * var(--fs-scale)); font-weight: 700; line-height: 130%;}
.p2_top p span{font-weight: 300; margin-left: -0.6em;}
.p2_lead{font-size: calc(clamp(26px, 4vw, 80px) * var(--fs-scale)); font-weight: 500; line-height: 130%; margin-top: var(--sec-gap);}
.p2_desc{display: flex; flex-direction: column; gap: 22px; margin-top: var(--sec-gap);}
.p2_desc p{font-size: calc(clamp(16px, 2.3vw, 45px) * var(--fs-scale)); font-weight: 200; color: #000; line-height: 130%; letter-spacing: 0;}

/* ===== 섹션3 : 피부 밸런스 신호 ===== */
.p3{
    padding: 110px 0;
    background: url(../img/p3-bg.png) no-repeat center center / cover;
}
.p3_title{text-align: center; color: #222; font-size: calc(clamp(26px, 5.2vw, 92px) * var(--fs-scale)); font-weight: 600; line-height: 130%; word-break: keep-all;}
.p3_img{max-width: 620px; margin: var(--sec-gap) auto 0;}
.p3_img img{width: 100%; border-radius: 20px;}
.p3 .box_wrap{display: flex; justify-content: center; gap: 3%; max-width: 1100px; margin: var(--sec-gap) auto 0;}
.p3 .box{width: 22.75%; display: flex; flex-direction: column; align-items: center; text-align: center; box-sizing: border-box;}
.p3 .box .p3_ic{
    width: 100%; aspect-ratio: 1; border-radius: 50%; box-sizing: border-box;
    border: 1px solid #111;
    background: linear-gradient(#ffffff, #f6f0f5);
    display: flex; align-items: center; justify-content: center;
}
.p3 .box .p3_ic img{width: 60%; height: auto;}
.p3 .box p{margin-top: 20px; font-size: calc(clamp(14px, 1.8vw, 32px) * var(--fs-scale)); font-weight: 700; letter-spacing: -0.03em; color: #222; line-height: 130%; white-space: nowrap;}
.p3 .box p span{margin-left: 2px;}

/* ===== 섹션4 : 프리미엄 인텐시브 크림 ===== */
.p4{
    padding: 110px 0;
    background: url(../img/p4-bg.png) no-repeat center center / cover;
}
.p4_title{text-align: center; color: #e7d4a6; word-break: keep-all;}
.p4_title_sm{display: block; font-size: calc(clamp(22px, 4.8vw, 90px) * var(--fs-scale)); font-weight: 400; line-height: 100%; color: #fff;}
.p4_title_lg{
    display: block; font-size: calc(clamp(22px, 4.8vw, 90px) * var(--fs-scale)); font-weight: 600; line-height: 150%; letter-spacing: -0.025em;
    color: #c6a15c; /* 진한 샴페인 골드 */
}
.p4_img{max-width: 1100px; margin: var(--sec-gap) auto 0;}
.p4_img img{width: 100%;}

/* ===== 섹션 4.5 : 전환 영상 ===== */
.p45{font-size: 0;}
.p45 img{width: 100%;}

/* ===== 섹션5 : STEP01 흡수 설계 ===== */
.p5{padding: 110px 0; background: #f0eeee;}
.p5_head{text-align: center; margin-bottom: var(--sec-gap); word-break: keep-all;}
.p5_step{display: block; font-family: 'Poppins', sans-serif; font-size: calc(clamp(20px, 3vw, 60px) * var(--fs-scale)); font-weight: 700; color: #000; letter-spacing: -0.025em; margin-bottom: 40px;}
.p5_title{font-size: calc(clamp(24px, 4.8vw, 80px) * var(--fs-scale)); font-weight: 400; color: #222; line-height: 130%; letter-spacing: -0.025em;}

.p5_box_wrap{display: flex; flex-direction: column; gap: var(--sec-gap); max-width: 1500px; margin: 0 auto;}
.p5_box{position: relative; background: #fff; border: 2px solid #a32035; border-radius: 28px; padding: 140px 50px var(--sec-gap); text-align: center;}
.p5_label{position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 675px; max-width: 90%; box-sizing: border-box; text-align: center; background: #9e1b3d; color: #fff; font-family: 'Chosunilbo_myungjo', serif; font-size: calc(clamp(22px, 3.6vw, 69.99px) * var(--fs-scale)); font-weight: normal; letter-spacing: -0.025em; padding: 12px 42px; border-radius: 100px;}
.p5_name{display: flex; align-items: center; justify-content: center; font-size: calc(clamp(22px, 3.6vw, 69.99px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #222; margin-bottom: var(--sec-gap);}
.p5_desc{font-family: 'Chosunilbo_myungjo', serif; font-size: calc(clamp(15px, 1.8vw, 34px) * var(--fs-scale)); font-weight: normal; letter-spacing: -0.025em; color: #111; line-height: 130%;}

.p5_list{display: flex; flex-wrap: wrap; margin: 0 auto var(--sec-gap); text-align: left;}
.p5_list li{display: flex; align-items: center; width: 50%; font-size: calc(clamp(16px, 2.2vw, 42px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #333; line-height: 150%; padding: 9px 0;}
.p5_list li .p5_chk{width: clamp(20px, 2.9vw, 46px); height: clamp(20px, 2.9vw, 46px); top: 0; flex-shrink: 0;}

.p5_chk{display: inline-block; width: 18px; height: 18px; background: url('../img/p5-icon.png') no-repeat center / contain; margin-right: 10px; position: relative; top: 3px; vertical-align: top;}
.p5_name .p5_chk{width: clamp(20px, 2.9vw, 46px); height: clamp(20px, 2.9vw, 46px); margin-right: 0.22em; top: 0; flex-shrink: 0;}

/* ===== 섹션6 : 2중 흡수 시스템 ===== */
.p6{
    height: 100vh;
    background: url(../img/p6-bg.gif) no-repeat center center / cover;
    display: flex; align-items: flex-start; justify-content: center;
}
.p6_title{display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: var(--sec-gap);}
.p6_bracket{align-self: stretch; width: 40px; flex-shrink: 0;}
.p6_title .p6_bracket:first-child{border-left: 3px solid #222; border-top: 3px solid #222; border-bottom: 3px solid #222;}
.p6_title .p6_bracket:last-child{border-right: 3px solid #222; border-top: 3px solid #222; border-bottom: 3px solid #222;}
.p6_text{display: flex; flex-direction: column; gap: 12px; text-align: center; word-break: keep-all;}
.p6_sm{font-size: calc(clamp(24px, 4.5vw, 80px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #000; line-height: 110%;}
.p6_lg{font-size: calc(clamp(24px, 4.5vw, 80px) * var(--fs-scale)); font-weight: 300; letter-spacing: -0.025em; color: #000; line-height: 110%;}
.p6_lg strong{font-weight: 800;}

/* ===== 섹션7 : STEP02 농축된 영양과 보습 에너지 ===== */
.p7{padding: 110px 0;}
.p7_head{text-align: center; margin-bottom: var(--sec-gap); word-break: keep-all;}
.p7_step{display: block; font-family: 'Poppins', sans-serif; font-size: calc(clamp(20px, 3vw, 60px) * var(--fs-scale)); font-weight: 700; color: #000; letter-spacing: -0.025em; margin-bottom: 40px;}
.p7_title{font-size: calc(clamp(26px, 5.2vw, 92px) * var(--fs-scale)); font-weight: 400; color: #000; line-height: 130%; letter-spacing: -0.025em;}
.p7 .box_wrap{display: flex; flex-direction: column; gap: var(--sec-gap);}
.p7 .box .img img{width: 100%;}
.p7 .box .text{margin-top: var(--sec-gap); word-break: keep-all;}
.p7 .box.reverse .text{text-align: right;}
.p7 .box .text h3{font-size: calc(clamp(24px, 4vw, 72px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #000; line-height: 130%; margin-bottom: 20px;}
.p7 .box .text p{font-size: calc(clamp(15px, 1.9vw, 34px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #000; line-height: 130%;}

/* ===== 섹션8 : 허브 특허 케어 ===== */
.p8{
    padding: 110px 0;
    background: url(../img/p8-bg.png) no-repeat center center / cover;
}
.p8_title{text-align: center; font-size: calc(clamp(22px, 4.2vw, 62px) * var(--fs-scale)); font-weight: 400; color: #000; line-height: 130%; letter-spacing: -0.025em; margin-bottom: var(--sec-gap); word-break: keep-all;}
.p8_wrap{display: flex; justify-content: center; align-items: center; gap: 3%;}
.p8_cert{width: 32%;}
.p8_cert img{width: 100%;}
.p8_list{width: 58%; word-break: keep-all;}
.p8_list li{display: flex; align-items: flex-start; font-size: calc(clamp(14px, 1.7vw, 30px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #000; line-height: 150%; padding: 44px 0;}
.p8_list li .p5_chk{width: clamp(16px, 2.5vw, 40px); height: 1.5em; top: 0; margin-top: 0.15em; margin-right: 16px; flex-shrink: 0;}

/* ===== 섹션10 : 식물 추출물 지그재그 (라벤더 포함) ===== */
.p10{padding: 110px 0;}
.p10 .box_wrap{display: flex; flex-direction: column; gap: var(--sec-gap); max-width: 1250px; margin: 0 auto;}
.p10 .box{display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 6%;}
.p10 .box.reverse{flex-direction: row;}
.p10 .box.reverse .text{text-align: left;}
.p10 .box .img{width: 40%; max-width: 497px;}
.p10 .box .img img{width: 100%;}
.p10 .box .text{width: 48%; text-align: right; word-break: keep-all;}
.p10 .box .text h3{font-size: calc(clamp(22px, 3.4vw, 58px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #000; line-height: 130%; margin-bottom: 24px; word-break: keep-all;}
.p10 .box .text p{font-size: calc(clamp(14px, 1.6vw, 30px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #000; line-height: 140%;}

/* ===== 섹션11 : STEP03 탄력 볼륨 케어 ===== */
.p11{
    aspect-ratio: 1920 / 2400;
    background: url(../img/p11-bg.png) no-repeat center center / cover;
    display: flex; align-items: flex-start; justify-content: center;
}
.p11_head{text-align: center; margin-top: 7%; word-break: keep-all;}
.p11_step{display: block; font-family: 'Poppins', sans-serif; font-size: calc(clamp(20px, 3vw, 60px) * var(--fs-scale)); font-weight: 700; letter-spacing: -0.025em; color: #9e1b3d; margin-bottom: 40px;}
.p11_title{font-size: calc(clamp(24px, 4.8vw, 80px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #9e1b3d; line-height: 130%;}

/* ===== 섹션12 : 볼륨 탄력 케어 (얼굴 배경) ===== */
.p12{background: #f6f5f4; text-align: center; padding: 90px 0 0;}
.p12_head{text-align: center; word-break: keep-all; margin-bottom: 50px;}
.p12_model{display: block; width: 80%; max-width: 1000px; margin: 0 auto;}
.p12_desc{font-size: calc(clamp(20px, 3.5vw, 56px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #222; line-height: 120%;}
.p12_title{font-size: calc(clamp(22px, 3.9vw, 62px) * var(--fs-scale)); font-weight: 700; letter-spacing: -0.025em; color: #782930; line-height: 120%; margin-top: 8px;}

/* ===== 섹션13 : 캡슐 영상 배경 ===== */
.p13{
    aspect-ratio: 1920 / 1080;
    background: url(../img/p13.gif) no-repeat center center / cover;
    display: flex; align-items: center; justify-content: center;
}
.p13_box{
    width: 62%; max-width: 840px; box-sizing: border-box;
    background: #a32035;
    padding: clamp(24px, 3vw, 52px) clamp(28px, 3.6vw, 62px);
    text-align: center; word-break: keep-all;
}
.p13_title{font-size: calc(clamp(20px, 2.8vw, 50px) * var(--fs-scale)); font-weight: 700; letter-spacing: -0.025em; color: #cebe8f; line-height: 120%; margin-bottom: 18px;}
.p13_desc{font-size: calc(clamp(13px, 1.9vw, 32px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #fff; line-height: 150%;}

/* ===== 섹션14 : 프리미엄 5중 펩타이드 ===== */
.p14{padding: 110px 0; background: #f5f5f4;}
.p14_head{text-align: center; word-break: keep-all;}
.p14_title{font-size: calc(clamp(24px, 4.8vw, 80px) * var(--fs-scale)); letter-spacing: -0.025em; line-height: 125%;}
.p14_title .l1{display: block; color: #111; font-weight: 500;}
.p14_title .l2{display: block; color: #a32035; font-weight: 700;}
.p14_desc{margin-top: var(--txt-gap); font-size: calc(clamp(16px, 2.3vw, 36px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #333; line-height: 145%;}
.p14_img{max-width: 760px; margin: var(--sec-gap) auto 0;}
.p14_img img{width: 100%;}

/* ===== 섹션15 : STEP04 브라이트닝 광채 ===== */
.p15{
    padding: 110px 0;
    background: url(../img/p15-bg.png) no-repeat top center / cover;
}
.p15_head{text-align: center; word-break: keep-all;}
.p15_step{display: block; font-family: 'Poppins', sans-serif; font-size: calc(clamp(20px, 3vw, 60px) * var(--fs-scale)); font-weight: 700; letter-spacing: -0.025em; color: #888; margin-bottom: 40px;}
.p15_title{font-size: calc(clamp(24px, 4.8vw, 80px) * var(--fs-scale)); font-weight: 500; letter-spacing: -0.025em; color: #111; line-height: 130%;}
.p15_title strong{font-weight: 800;}
.p15_desc{margin-top: var(--txt-gap); font-size: calc(clamp(15px, 1.9vw, 34px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #333; line-height: 150%;}
.p15_compare{max-width: 640px; margin: var(--sec-gap) auto 0;}
.p15_compare img{width: 100%;}
.p15_patent{margin: var(--sec-gap) auto 0; max-width: 1100px; border: 1px solid #888; padding: 70px 6%;}
.p15_patent_title{text-align: center; font-size: calc(clamp(22px, 3.8vw, 60px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #111; line-height: 130%; margin-bottom: 50px; word-break: keep-all;}
.p15_patent_title .point{color: #a32035; font-weight: 700;}
.p15_patent_wrap{display: flex; align-items: center; justify-content: center; gap: 5%;}
.p15_cert{width: 34%; max-width: 400px;}
.p15_cert img{width: 100%;}
.p15_check{width: 52%; word-break: keep-all;}
.p15_check li{display: flex; align-items: flex-start; font-size: calc(clamp(14px, 1.7vw, 30px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #222; line-height: 150%; padding: 56px 0;}
.p15_check li::before{content: ''; width: clamp(16px, 1.9vw, 30px); height: clamp(16px, 1.9vw, 30px); background: url('../img/p5-icon.png') no-repeat center / contain; margin-right: 14px; margin-top: 0.15em; flex-shrink: 0;}

/* ===== 섹션16 : 수분 광채 (모델 영상) ===== */
.p16{padding: 110px 0 0; background: #000;}
.p16_head{text-align: center; margin-bottom: var(--sec-gap); word-break: keep-all;}
.p16_title{font-size: calc(clamp(24px, 4.8vw, 80px) * var(--fs-scale)); font-weight: 500; letter-spacing: -0.025em; color: #fff; line-height: 130%;}
.p16_title strong{font-weight: 800;}
.p16_gif{max-width: 1200px; margin: 0 auto;}
.p16_gif img{width: 100%; display: block;}

/* ===== 섹션17 : 4STEP 인텐시브 케어 타임라인 ===== */
.p17{padding: 110px 0; background: url(../img/p17-bg.png) no-repeat center center / cover;}
.p17_head{text-align: center; word-break: keep-all;}
.p17_title{font-size: calc(clamp(24px, 4.8vw, 80px) * var(--fs-scale)); font-weight: 700; letter-spacing: -0.025em; color: #111; line-height: 130%;}
.p17_sub{margin-top: var(--txt-gap); font-size: calc(clamp(17px, 2.4vw, 42px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #555; line-height: 150%;}
.p17_list{position: relative; max-width: 1000px; margin: var(--sec-gap) auto 0;}
.p17_list::before{content: ''; position: absolute; left: 50%; top: 8px; bottom: 50px; border-left: 2px dotted #fff; transform: translateX(-1px);}
.p17 .box{position: relative; width: 50%; box-sizing: border-box; padding: 0 52px 60px 0; text-align: right; word-break: keep-all;}
.p17 .box.reverse{margin-left: 50%; padding: 0 0 60px 52px; text-align: left;}
.p17 .box::after{content: ''; position: absolute; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #a32035;}
.p17 .box::after{right: -9px;}
.p17 .box.reverse::after{right: auto; left: -9px;}
.p17 .box span{display: block; font-family: 'Poppins', sans-serif; font-size: calc(clamp(16px, 2vw, 34px) * var(--fs-scale)); font-weight: 700; letter-spacing: 0.02em; color: #111;}
.p17 .box strong{display: block; font-size: calc(clamp(18px, 2.6vw, 46px) * var(--fs-scale)); font-weight: 700; letter-spacing: -0.025em; color: #111; line-height: 130%; margin-bottom: 20px;}
.p17 .box p{font-size: calc(clamp(14px, 1.6vw, 28px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #666; line-height: 150%;}

/* ===== 섹션18 : 프리미엄 인텐시브 크림 (제품 배경) ===== */
.p18{
    aspect-ratio: 1098 / 1000;
    background: url(../img/p18-bg.png) no-repeat center bottom / cover;
    display: flex; align-items: flex-start; justify-content: center;
}
.p18_head{text-align: center; margin-top: 13%; word-break: keep-all;}
.p18_title{font-size: calc(clamp(24px, 4.8vw, 80px) * var(--fs-scale)); letter-spacing: -0.025em; line-height: 130%;}
.p18_title .l1{display: block; color: #111; font-weight: 400;}
.p18_title .l2{display: block; color: #51000d; font-weight: 700;}

/* ===== 섹션19 : HOW TO USE ===== */
.p19{padding: 110px 0;}
.p19_head{text-align: center; margin-bottom: var(--sec-gap); word-break: keep-all;}
.p19_title{font-family: 'Poppins', sans-serif; font-size: calc(clamp(30px, 5vw, 92px) * var(--fs-scale)); font-weight: 700; letter-spacing: 0.01em; color: #111; line-height: 110%;}
.p19_sub{margin-top: 14px; font-size: calc(clamp(30px, 5vw, 92px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #111; line-height: 130%;}
.p19_list{display: flex; align-items: center; justify-content: center; gap: 2.5%;}
.p19 .box{width: 29%; aspect-ratio: 1 / 1; box-sizing: border-box; border: 1px solid #000; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; word-break: keep-all;}
.p19 .box strong{font-size: calc(clamp(16px, 2vw, 34px) * var(--fs-scale)); font-weight: 700; letter-spacing: -0.025em; color: #111; margin-bottom: 14px;}
.p19 .box p{font-size: calc(clamp(12px, 1.4vw, 24px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #666; line-height: 150%;}
.p19_arrow{flex-shrink: 0; width: clamp(18px, 2.4vw, 44px);}
.p19_arrow img{width: 100%; display: block;}

/* ===== 섹션20 : 제품 정보 (전성분/주의사항) ===== */
.p20{padding: 110px 0; background: linear-gradient(180deg, #500000, #200000);}
.p20_info{max-width: 1000px; margin: 0 auto; word-break: keep-all;}
.p20_info p{font-size: calc(clamp(12px, 1.2vw, 20px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.02em; color: #d8cccc; line-height: 150%;}
.p20_info strong{font-weight: 700; color: #fff;}
.p20_top p{margin-bottom: 10px;}
.p20_top strong{margin-right: 10px;}
.p20_caution{margin-top: 10px; color: #c2b2b2;}
.p20_maker{margin-top: 10px;}
.p20_maker p{font-weight: 700; color: #fff;}
.p20_notice{margin-top: 18px;}

/* ===== 푸터 ===== */
#ft{background: #fbf5ed; padding: 40px 0 140px; width: 100%;}
.footer{display: flex; align-items: center; justify-content: space-between;}
.foot_logo{display: block; width: 130px;}
.foot_logo img{width: 100%;}
.foot_info{text-align: left; word-break: keep-all;}
.foot_info p{font-size: 14px; font-weight: 400; letter-spacing: -0.02em; color: #555; line-height: 150%;}
.foot_info p span{margin: 0 10px; color: #c9b9a5;}

/* ===== 반응형 (폰트는 clamp가 담당, 여기선 레이아웃만) ===== */
@media (max-width: 768px){
    /* 모바일 표준 블록 간격 (var로 전 섹션 일괄 적용) */
    :root{--sec-gap: 50px; --txt-gap: 20px; --head-h: 79px;}

    /* PC 헤더를 모바일에서도 사용 — 로고(상단)·STEP(하단) 세로 가운데 정렬 */
    /* 모바일 헤더 : 1행(로고 좌 + 전화 우) / 2행(가로 메뉴바) */
    .header .width{flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 0 0;}
    .header_logo{order: 1; width: 104px;}
    .header_tel{
        order: 2; gap: 6px; padding: 0; border-radius: 0;
        background: none; box-shadow: none; animation: none;
    }
    .header_tel i{font-size: 19px; color: #e9b84f;}
    .header_tel b{font-size: 18px; color: #e9b84f;}
    .header_nav{
        order: 3; width: 100%; position: static; left: auto; top: auto; transform: none;
        margin-top: 9px; border-top: 1px solid rgba(203, 161, 95, 0.5);
    }
    .header_nav ul{justify-content: space-around; gap: 0; padding: 9px 0;}
    .header_nav a{font-size: 14px; letter-spacing: 0;}

    /* 하단 고정 무료상담 바 — 문구 + 번호를 가로 한 줄로 */
    .quick_bar_inner{flex-direction: row; width: 96%; gap: 8px; padding: 8px 0;}
    .quick_msg{font-size: 15px; line-height: 130%;}
    .quick_tel{gap: 6px; padding: 9px 16px; flex-shrink: 0;}
    .quick_tel i{font-size: 19px;}
    .quick_tel b{font-size: 17px;}
    #ft{padding: 40px 0 110px;}

    /* GIF를 헤더 아래에서 시작 (겹침 방지, --head-h 로 통일) */
    .p1{height: 400px; margin-top: calc(var(--head-h) - 2px); aspect-ratio: auto; padding: 0;}
    .p1_gif{height: 400px; object-fit: cover;}   /* 예전 배경 cover와 동일하게 박스를 꽉 채움 */
    .p1_wrap{flex-direction: column; gap: 50px;}

    .p2{padding: 60px 0;}
    .p2_desc{gap: 6px;}

    .p3{padding: 60px 0;}
    .p3_img{max-width: 100%; margin-top: 30px;}
    .p3 .box_wrap{flex-wrap: wrap; gap: 22px 8%; max-width: 100%; margin-top: 30px;}
    .p3 .box{width: 42%;}
    .p3 .box .p3_ic{width: 65%;}
    .p3 .box img{width: 60%; height: auto;}
    .p3 .box p{margin-top: 12px;}

    .p4{padding: 60px 0;}
    .p4 .width{width: 100%; max-width: 100%;}
    .p4_title{padding: 0 4%;}

    .p5{padding: 30px 0 60px;}
    .p5_step{margin-bottom: 12px;}
    .p5_box_wrap{gap: 90px;}
    .p5_box{padding: 70px 30px var(--sec-gap);}
    .p5_label{padding: 9px 28px;}
    .p5_list li{width: 100%; padding: 3px 0;}
    .p5_desc{font-size: 13px;}

    .p6{height: 65vh; padding: 0;}
    .p6_title{gap: 14px; margin-top: 60px;}
    .p6_bracket{width: 14px;}

    .p7{padding: 30px 0 60px;}
    .p7_step{margin-bottom: 12px;}
    .p7 .box .text{margin-top: 22px; text-align: left;}
    .p7 .box.reverse .text{text-align: right;}
    .p7 .box .text p br{display: none;}
    .p7 .box .text h3{margin-bottom: 10px;}

    .p8{padding: 60px 0;}
    .p8_wrap{flex-direction: column; gap: 30px;}
    .p8_cert{width: 60%;}
    .p8_list{width: 100%;}
    .p8_list li{display: flex; align-items: flex-start; text-align: left; padding: 18px 0; font-size: 18px;}
    .p8_list li .p5_chk{margin: 0.15em 12px 0 0;}


    .p10{padding: 60px 0;}
    .p10 .box, .p10 .box.reverse{flex-direction: column; align-items: center; gap: 24px;}
    .p10 .box .img{width: 70%;}
    .p10 .box .text, .p10 .box.reverse .text{width: 100%; text-align: center;}
    .p10 .box .text h3{margin-bottom: 12px;}

    .p11_step, .p15_step{margin-bottom: 12px;}
    .p11{aspect-ratio: 1920 / 1980;}

    .p12{padding: 60px 0 0;}
    .p12_model{width: 100%; max-width: 100%;}
    .p12_head{margin-bottom: 30px;}
    .p12_title{margin-top: 8px;}

    /* 16:9 밴드가 모바일에서 너무 낮아 박스가 넘치므로 세로 비율 확대 + 박스 확장 */
    .p13{aspect-ratio: 1 / 1; align-items: center;}
    .p13_box{width: 88%; margin-top: 0; padding: 34px 26px;}

    .p16{padding: 90px 0 0;}
    .p16_gif{width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); overflow: hidden;}
    .p16_gif img{width: 145%; margin-left: -22.5%; display: block;}

    .p14{padding: 60px 0;}
    .p14_img{max-width: 100%;}

    .p18_head{margin-top: 9%;}

    .p20{padding: 60px 0;}
    .p20_caution, .p20_maker{margin-top: 10px;}

    .footer{flex-direction: column; align-items: flex-start; gap: 20px;}
    .foot_logo{width: 110px;}
    .foot_info p{font-size: 13px;}

    .p19{padding: 60px 0;}
    .p19_list{flex-direction: column; gap: 24px;}
    .p19 .box{width: 68%;}
    .p19 .box strong{font-size: 24px;}
    .p19 .box p{font-size: 15px;}
    .p19_arrow{width: 28px; transform: rotate(90deg);}

    /* PC와 동일한 지그재그 타임라인 유지 (좌우 여백만 축소) */
    .p17{padding: 60px 0;}
    .p17 .box{padding: 0 14px 40px 0;}
    .p17 .box.reverse{padding: 0 0 40px 14px;}
    .p17 .box strong{margin-bottom: 10px;}

    .p15{padding: 30px 0 60px;}
    .p15_compare{max-width: 100%;}
    .p15_patent{padding: 45px 6%;}
    .p15_patent_title{margin-bottom: 30px;}
    .p15_patent_wrap{flex-direction: column; gap: 34px;}
    .p15_cert{width: 62%;}
    .p15_check{width: 100%;}
    .p15_check li{display: flex; align-items: flex-start; text-align: left; padding: 18px 0; font-size: 18px;}
    .p15_check li::before{margin: 0.15em 12px 0 0;}
}

/* 650px 이하 : 전체 폰트 배율 상향 (--fs-scale 하나로 모든 폰트 확대) */
@media (max-width: 650px){
    :root{--fs-scale: 1.18;}

    .p5_box{padding: 45px 24px 36px;}
    .p5_desc{font-size: 16px; letter-spacing: -0.04em;}

    /* 하단 무료상담 바 : 좁은 폰에서 문구가 2줄로 깨지지 않게 축소 */
    .quick_bar_inner{gap: 5px; width: 94%;}
    .quick_msg{font-size: 12px; letter-spacing: -0.03em; white-space: nowrap;}
    .quick_tel{padding: 8px 11px; gap: 5px;}
    .quick_tel i{font-size: 15px;}
    .quick_tel b{font-size: 14px; letter-spacing: 0;}
}