@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;
}

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

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

/* ===== 헤더 ===== */
.header{
    position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
    background: transparent;
    transition: background 0.4s ease;
}
.header.scroll{
    background: linear-gradient(90deg, #2b0708 0%, #520d0e 42%, #7a1214 68%, #4a0c0d 100%);
}
.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);}

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

/* ===== 섹션1 : 비주얼 ===== */
.p1{
    height: 100vh;
    background: url(../img/p1-bg.gif) no-repeat center center / cover;
    display: flex; align-items: center;
}
.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: 180px 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: 110px;}
.p2_desc{display: flex; flex-direction: column; gap: 22px; margin-top: 110px;}
.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: 160px 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: 70px auto 0;}
.p3_img img{width: 100%; border-radius: 20px;}
.p3 .box_wrap{display: flex; justify-content: center; gap: 3%; max-width: 1100px; margin: 70px auto 0;}
.p3 .box{width: 22%;}
.p3 .box img{width: 100%;}

/* ===== 섹션4 : 프리미엄 인텐시브 크림 ===== */
.p4{
    padding: 160px 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;
    background: linear-gradient(180deg, #f5e6b8 0%, #cba15f 50%, #a87d43 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.p4_img{max-width: 1100px; margin: 200px auto 0;}
.p4_img img{width: 100%;}

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

/* ===== 섹션5 : STEP01 흡수 설계 ===== */
.p5{padding: 160px 0; background: #f0eeee;}
.p5_head{text-align: center; margin-bottom: 230px; 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: 150px; max-width: 1500px; margin: 0 auto;}
.p5_box{position: relative; background: #fff; border: 2px solid #a32035; border-radius: 28px; padding: 140px 50px 50px; 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: 22px;}
.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 100px; 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: 90px;}
.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: 160px 0;}
.p7_head{text-align: center; margin-bottom: 90px; 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: 100px;}
.p7 .box .img img{width: 100%;}
.p7 .box .text{margin-top: 80px; 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: 160px 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: 80px; 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: 16px 0;}
.p8_list li .p5_chk{width: clamp(16px, 2.5vw, 40px); height: clamp(16px, 2.5vw, 40px); top: 0; margin-top: 8px; margin-right: 16px; flex-shrink: 0;}

/* ===== 섹션9 : 라벤더꽃추출물 ===== */
.p9{
    aspect-ratio: 1920 / 1100;
    background: url(../img/p9-bg.png) no-repeat center bottom / cover;
    display: flex; align-items: flex-end;
}
.p9_card{display: flex; align-items: center; gap: 34px 7%; width: 100%; background: rgba(255,255,255,0.8); padding: 30px 8.7%;}
.p9_img{width: 45%; max-width: 497px; flex-shrink: 0;}
.p9_img img{width: 100%;}
.p9_text{flex: 1; word-break: keep-all;}
.p9_text h3{font-size: calc(clamp(22px, 3.2vw, 56px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #000; line-height: 130%; margin-bottom: 16px;}
.p9_text p{font-size: calc(clamp(14px, 1.5vw, 26px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #000; line-height: 140%;}

/* ===== 섹션10 : 식물 추출물 지그재그 ===== */
.p10{padding: 160px 0;}
.p10 .box_wrap{display: flex; flex-direction: column; gap: 100px; 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{
    aspect-ratio: 1920 / 2831;
    background: url(../img/p12-bg.png) no-repeat center center / cover;
    display: flex; align-items: flex-start; justify-content: center;
}
.p12_head{text-align: center; margin-top: 330px; word-break: keep-all;}
.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: flex-start; justify-content: center;
}
.p13_box{
    width: 62%; max-width: 840px; box-sizing: border-box;
    margin-top: 13%;
    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.3vw, 40px) * 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.5vw, 26px) * var(--fs-scale)); font-weight: 400; letter-spacing: -0.025em; color: #fff; line-height: 150%;}

/* ===== 섹션14 : 프리미엄 5중 펩타이드 ===== */
.p14{padding: 160px 0; background: #f5f5f4;}
.p14_head{text-align: center; word-break: keep-all;}
.p14_title{font-size: calc(clamp(22px, 3.9vw, 62px) * 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: 32px; 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: 80px auto 0;}
.p14_img img{width: 100%;}

/* ===== 섹션15 : STEP04 브라이트닝 광채 ===== */
.p15{
    padding: 160px 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: 34px; 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: 90px auto 0;}
.p15_compare img{width: 100%;}
.p15_patent{margin: 120px auto 0; max-width: 1100px; border: 1px solid #cebe8f; padding: 70px 6%;}
.p15_patent_title{text-align: center; font-size: calc(clamp(20px, 3vw, 52px) * 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: 22px 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: 160px 0 0; background: #000;}
.p16_head{text-align: center; margin-bottom: 70px; word-break: keep-all;}
.p16_title{font-size: calc(clamp(22px, 3.6vw, 58px) * 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: 160px 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, 4vw, 66px) * var(--fs-scale)); font-weight: 700; letter-spacing: -0.025em; color: #111; line-height: 130%;}
.p17_sub{margin-top: 26px; 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: 100px 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 / 1433;
    background: url(../img/p18-bg.png) no-repeat center center / 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.5vw, 72px) * 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: 160px 0;}
.p19_head{text-align: center; margin-bottom: 90px; 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: 100px 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; 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){
    /* PC 헤더를 모바일에서도 사용 — 네비를 절대배치 해제해 로고와 겹치지 않게 */
    .header .width{padding: 12px 0;}
    .header_logo{width: 108px;}
    .header_nav{position: static; left: auto; top: auto; transform: none;}
    .header_nav ul{gap: 14px;}
    .header_nav a{font-size: 13px; letter-spacing: 0;}

    #step1, #step2, #step3, #step4, #p5, #p7, #p11, #p15{scroll-margin-top: 50px;}

    /* 16:9 gif가 좌우로 잘리지 않도록 섹션을 gif 비율에 맞춤 (전체 폭 노출) */
    .p1{height: 400px; aspect-ratio: auto; padding: 0;}
    .p1_wrap{flex-direction: column; gap: 50px;}

    .p2{padding: 90px 0;}
    .p2_lead{margin-top: 30px;}
    .p2_desc{margin-top: 30px; gap: 6px;}

    .p3{padding: 90px 0;}
    .p3_img{max-width: 100%; margin-top: 40px;}
    .p3 .box_wrap{flex-wrap: wrap; gap: 4%; max-width: 100%;}
    .p3 .box{width: 48%;}

    .p4{padding: 90px 0;}
    .p4_img{margin-top: 40px;}

    .p5{padding: 90px 0;}
    .p5_step{margin-bottom: 12px;}
    .p5_head{margin-bottom: 70px;}
    .p5_box_wrap{gap: 80px;}
    .p5_box{padding: 45px 22px 36px;}
    .p5_label{padding: 9px 28px;}
    .p5_list{margin-bottom: 40px;}
    .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: 90px 0;}
    .p7_step{margin-bottom: 14px;}
    .p7 .box_wrap{gap: 50px;}
    .p7 .box .text{margin-top: 24px;}
    .p7 .box .text h3{margin-bottom: 10px;}

    .p8{padding: 90px 0;}
    .p8_title{margin-bottom: 40px;}
    .p8_wrap{flex-direction: column; gap: 30px;}
    .p8_cert{width: 60%;}
    .p8_list{width: 100%;}
    .p8_list li{padding: 10px 0;}
    .p8_list li .p5_chk{margin-top: 3px; margin-right: 10px;}

    .p9{aspect-ratio: 1920 / 1120;}
    .p9_card{gap: 18px; padding: 18px;}
    .p9_img{width: 38%;}
    .p9_text h3{margin-bottom: 8px;}
    .p9_text p br{display: none;}

    .p10{padding: 90px 0;}
    .p10 .box_wrap{gap: 50px;}
    .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;}

    .p12_head{margin-top: 14%;}
    .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 .width{width: 100%; max-width: 100%;}
    .p16_head{margin-bottom: 40px;}

    .p14{padding: 90px 0;}
    .p14_desc{margin-top: 20px;}
    .p14_img{max-width: 100%; margin-top: 50px;}

    .p18_head{margin-top: 9%;}

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

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

    .p19{padding: 90px 0;}
    .p19_head{margin-bottom: 50px;}
    .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: 90px 0;}
    .p17_list{margin-top: 60px;}
    .p17 .box{padding: 0 14px 40px 0;}
    .p17 .box.reverse{padding: 0 0 40px 14px;}
    .p17 .box strong{margin-bottom: 10px;}

    .p15{padding: 90px 0;}
    .p15_desc{margin-top: 22px;}
    .p15_compare{max-width: 100%; margin-top: 50px;}
    .p15_patent{margin-top: 70px; 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{padding: 5px 0;}
}

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