/* ==========================================================================
   00. SUB INTRO (서브 인트로 공통 확장)
   - sub.css 공통 베이스와 중복되는 속성(color, font-family, font-size 등) 제외
   ========================================================================== */
.dy-symbol {display: inline-block; flex-shrink: 0; vertical-align: middle; background-color: currentColor; -webkit-mask: url('../img/logo_symbol.svg') no-repeat center / contain; mask: url('../img/logo_symbol.svg') no-repeat center / contain;}
.sub-page .sub-intro {background-color: #2f2a28; background-size: cover; background-position: center; background-repeat: no-repeat;}
.sub-page .sub-intro .intro-header .dy-symbol {width: 32px; height: 32px; background-color: #ffffff;}
.sub-page .sub-intro .intro-header h2 {margin-bottom: 24px;}
.sub-page .sub-intro .intro-header .intro-slogan {font-family: var(--ff-notoSerif); font-size: 24px; font-weight: 500; margin-bottom: 21px; word-break: keep-all;}
.sub-page .sub-intro .intro-header .intro-slogan strong {font-weight: 600; letter-spacing: -0.02em;}
.sub-page .sub-intro .intro-header .intro-desc {word-break: keep-all;}
.sub-page .sub-intro .intro-bg-watermark {position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%); font-family: var(--ff-cardo); font-size: 160px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.04); text-align: center; white-space: nowrap; pointer-events: none; user-select: none; z-index: 1;}

/* ==========================================================================
   00-1. COMMON SECTION HEADER (.sec-header)
   - 서브페이지 섹션 제목 영역 공통 모듈 (Cardo 30px / Noto Serif 30px / Pretendard 20px)
   ========================================================================== */
.sec-header {display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 80px;}
.sec-header.text-left {align-items: flex-start; text-align: left; margin-bottom: 0;}
.sec-header .header-badge {display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 4px;}
.sec-header .header-badge.flex-col {flex-direction: column; gap: 12px; margin-bottom: 0;}
.sec-header .header-badge .dy-symbol {width: 52px; height: 52px; background-color: #2f2a28;}
.sec-header .header-badge .sub-title {margin-bottom: 0;}
.sec-header .sub-title {display: block; font-family: var(--ff-cardo); margin-bottom: 4px; font-size: 30px; font-weight: 400; line-height: 1.46; color: #2a2a2a; letter-spacing: -0.02em;}
.sec-header.text-left .sub-title {margin-bottom: 16px;}
.sec-header .main-title {font-family: var(--ff-notoSerif); font-size: 30px; font-weight: 600; line-height: 1.5; letter-spacing: -0.02em; color: #2a2a2a; word-break: keep-all;}
.sec-header .desc {font-family: var(--ff-pretendard); font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; color: #3c3c3c; margin-top: 32px; word-break: keep-all;}
.sec-header.theme-dark .sub-title, .sec-header.theme-dark .main-title, .sec-header.theme-dark .desc {color: #ffffff;}
.sec-header.theme-dark .header-badge .dy-symbol {background-color: #ffffff;}

/* ==========================================================================
   01 & 03. PRECISION 2-COLUMN (.sec-precision-col - 좌우 컬럼 공통 모듈)
   - .reverse 부여 시 좌우 반전 (Desktop: 이미지 좌측 / 텍스트 우측)
   ========================================================================== */
.sec-precision-col {width: 100%; background-color: #f4f3f1; padding: 140px 0 0; box-sizing: border-box; overflow-x: hidden;}
.sec-precision-col .inner {max-width: 1440px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 60px; box-sizing: border-box;}
.sec-precision-col .col-text {flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px;}
.sec-precision-col .sec-header {margin-bottom: 48px;}
.sec-precision-col .desc-box {display: flex; flex-direction: column; gap: 16px;}
.sec-precision-col .desc {font-family: var(--ff-pretendard); font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; color: #3c3c3c; word-break: keep-all;}
.sec-precision-col .desc strong {font-weight: 600; color: #3c3c3c;}
.sec-precision-col .desc.strong strong {font-weight: 600; color: #3c3c3c;}
.sec-precision-col .col-text-inner {display: flex; flex-direction: column; width: fit-content; max-width: 100%;}
.sec-precision-col .col-img-box {width: 632px; flex-shrink: 0;}
.sec-precision-col .col-img {width: 100%; height: auto; display: block;}
.sec-precision-col.reverse {padding: 120px 0 140px;}
.sec-precision-col.reverse .inner {flex-direction: row-reverse;}
/* .sec-precision-col.reverse .col-text {padding-left: 0; padding-right: 80px;} */



/* ==========================================================================
   04. PRECISION ANALYSIS (.sec-precision-analysis-header & .sec-precision-analysis)
   ========================================================================== */
.sec-precision-analysis-header {width: 100%; background-color: #826955; background-image: url('../sub/img/sub_common_analysis_bg.webp'); background-size: cover; background-position: 70% center; background-repeat: no-repeat; padding: 80px 20px; box-sizing: border-box;}
.sec-precision-analysis-header .sec-header {margin-bottom: 0;}
.sec-precision-analysis {padding: 120px 20px 180px; box-sizing: border-box;}
.sec-precision-analysis .inner {max-width: 1440px; margin: 0 auto; width: 100%; box-sizing: border-box;}
.sec-precision-analysis .analysis-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
.sec-precision-analysis .analysis-card {position: relative; height: 530px; overflow: hidden; cursor: pointer;}
.sec-precision-analysis .card-bg {position: absolute; inset: 0; width: 100%; height: 100%;}
.sec-precision-analysis .card-bg .bg-img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease;}
.sec-precision-analysis .card-bg .card-dim {position: absolute; inset: 0; background-color: rgba(47, 42, 40, 0); transition: background-color 0.4s ease;}
.sec-precision-analysis .card-content {position: relative; z-index: 2; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; box-sizing: border-box;}
.sec-precision-analysis .card-title-wrap {transform: translateY(42px); transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);}
.sec-precision-analysis .card-en {display: block; font-family: var(--ff-cardo); font-size: 30px; font-weight: 700; line-height: 1.53; letter-spacing: -0.02em; color: #ffffff;}
.sec-precision-analysis .card-ko {font-family: var(--ff-notoSerif); font-size: 24px; font-weight: 600; line-height: 1.5; letter-spacing: -0.02em; color: #ffffff;}
.sec-precision-analysis .card-hover-info {opacity: 0; transform: translateY(50px); pointer-events: none; margin-top: 8px; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);}
.sec-precision-analysis .hover-desc {font-family: var(--ff-pretendard); font-size: 22px; font-weight: 400; line-height: 1.45; color: #ffffff; word-break: keep-all;}
.sec-precision-analysis .analysis-card:hover .card-bg .card-dim {background-color: rgba(47, 42, 40, 0.6);}
.sec-precision-analysis .analysis-card:hover .card-bg .bg-img {transform: scale(1.05);}
.sec-precision-analysis .analysis-card:hover .card-title-wrap {transform: translateY(0);}
.sec-precision-analysis .analysis-card:hover .card-hover-info {opacity: 1; transform: translateY(0); pointer-events: auto;}

/* ==========================================================================
   05. DY PRECISION PROCESS (.sec-precision-process)
   ========================================================================== */
.sec-precision-process {padding: 160px 20px; box-sizing: border-box;}
.sec-precision-process .inner {max-width: 1440px; margin: 0 auto; width: 100%; box-sizing: border-box;}
.sec-precision-process .process-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px;}
.sec-precision-process .process-item {display: flex; flex-direction: column; gap: 32px;}
.sec-precision-process .item-img-box {width: 100%; height: 340px; overflow: hidden; border-radius: 20px;}
.sec-precision-process .item-img-box .item-img {width: 100%; height: 100%; object-fit: cover;}
.sec-precision-process .item-text {display: flex; flex-direction: column; gap: 12px;}
.sec-precision-process .step-title {font-family: var(--ff-pretendard); font-size: 20px; font-weight: 600; line-height: 1.6; color: #76614a; word-break: keep-all;}
.sec-precision-process .step-desc {font-family: var(--ff-pretendard); font-size: 22px; font-weight: 400; line-height: 1.45; color: #666666; word-break: keep-all;}
#sub21 .sec-precision-process {padding-top: 80px;}
#sub24 .sec-precision-process {padding-top: 80px;}

/* ==========================================================================
   06. TREATMENT (.sec-precision-treatment)
   - 공통 레이아웃 배치, 고유 배경 이미지는 하단 #sub21에서 분리 지정
   ========================================================================== */
.sec-precision-treatment {width: 100%; min-height: 680px; background-color: #2f2a28; display: flex; align-items: center; box-sizing: border-box; padding: 120px 20px; background-size: cover; background-position: center right; background-repeat: no-repeat;
 background-size: cover; background-position: center right; background-repeat: no-repeat;}
.sec-precision-treatment .inner {max-width: 1440px; margin: 0 auto; width: 100%; box-sizing: border-box;}
.sec-precision-treatment .treatment-box {display: flex; flex-direction: column; gap: 48px;}
.sec-precision-treatment .sec-header {align-items: flex-start; text-align: left; margin-bottom: 0; gap: 20px;}
.sec-precision-treatment .sec-header .sub-title {margin-bottom: 0;}
.sec-precision-treatment .treatment-content {display: flex; align-items: stretch; gap: 80px;}
.sec-precision-treatment .treatment-line {width: 1px; background-color: #f4f3f1; flex-shrink: 0;}
.sec-precision-treatment .treatment-desc-wrap {display: flex; flex-direction: column; gap: 20px;}
.sec-precision-treatment .desc {font-family: var(--ff-pretendard); font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; color: #f4f3f1; word-break: keep-all;}
.sec-precision-treatment .desc strong {font-weight: 600;}

/* ==========================================================================
   07. THE DY DIFFERENCE (.sub-page .sub-difference - 서브 공통)
   ========================================================================== */
.sub-page .sub-difference {width: 100%; background-color: #f4f3f1; padding: 140px 20px 180px; box-sizing: border-box; overflow-x: hidden;}
.sub-page .sub-difference .inner {max-width: 1440px; margin: 0 auto; width: 100%; box-sizing: border-box;}
.sub-page .sub-difference .difference-content {display: flex; align-items: stretch; justify-content: space-between; gap: clamp(24px, 3.5vw, 56px);}
.sub-page .sub-difference .diff-img-box {flex: 1.15; min-width: 0; border-radius: 20px; overflow: hidden; background-color: #d5d3ce;}
.sub-page .sub-difference .diff-img-box .diff-img {width: 100%; height: 100%; object-fit: cover;}
.sub-page .sub-difference .diff-list {flex: 1; max-width: 640px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(12px, 1.4vw, 20px);}
.sub-page .sub-difference .diff-item {background-color: #ffffff; border-top: 2px solid #76614a; padding: clamp(20px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 8px; box-sizing: border-box;}
.sub-page .sub-difference .item-title {font-family: var(--ff-pretendard); font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: -0.01em; color: #3c3c3c; word-break: keep-all;}
.sub-page .sub-difference .item-desc {font-family: var(--ff-pretendard); font-size: 18px; font-weight: 400; line-height: 1.61; color: #666666; word-break: keep-all;}

/* ==========================================================================
   08. PRECISION SKIN DESIGN CTA (.sub-page .sub-contact-banner - 서브 공통)
   ========================================================================== */
.sub-page .sub-contact-banner {position: relative; width: 100%; padding: 96px 0 104px 0; background-color: #2b2b2b; background-image: url('../sub/img/sub_common_cta_bg.webp'); background-size: cover; background-position: 10% center; background-repeat: no-repeat; text-align: center; box-sizing: border-box;}
.sub-page .sub-contact-banner .inner {max-width: 1440px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; box-sizing: border-box;}
.sub-page .sub-contact-banner .sec-header {margin-bottom: 40px;}
.sub-page .sub-contact-banner .banner-btn-wrap {display: flex; align-items: center; justify-content: center; gap: 8px;}
.sub-page .sub-contact-banner .cta-btn {display: inline-flex; align-items: center; justify-content: center; width: 180px; height: 40px; border-radius: 999px; background-color: #76614a; border: 1px solid #76614a; color: #ffffff; font-family: var(--ff-pretendard); line-height: 1.6; font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color 0.3s ease, border-color 0.3s ease;}

/* ==========================================================================
   09. DEPTH STRUCTURE (.sec-depth-structure - 서브 공통 재사용 심층/구조 분석)
   ========================================================================== */
.sec-depth-structure {position: relative; width: 100%; background-color: #f6f5f0; background-image: url('../sub/img/sub_common_structure_bg.webp'); background-size: cover; background-position: center; padding: 120px 0; box-sizing: border-box; overflow: hidden;}
.sec-depth-structure .inner {max-width: 1600px; margin: 0 auto; width: 100%; display: flex; align-items: stretch; justify-content: space-between; gap: clamp(20px, 3.5vw, 60px); box-sizing: border-box; padding: 0 clamp(20px, 2.5vw, 40px);}
.sec-depth-structure .structure-left {flex: 0 1 clamp(280px, 24vw, 460px); padding-top: 40px; display: flex; flex-direction: column;}
.sec-depth-structure .structure-left .sec-header {margin-bottom: 0;}
.sec-depth-structure .structure-left .sec-header .header-badge {margin-bottom: 12px;}
.sec-depth-structure .structure-left .sec-header.text-left .sub-title {margin-bottom: 0;}
.sec-depth-structure .structure-divider {position: relative; width: 1px; flex-shrink: 0;}
.sec-depth-structure .structure-divider::before {content: ''; position: absolute; top: -120px; bottom: -120px; left: 0; width: 1px; background-color: #c9c9c9;}
.sec-depth-structure .structure-list {flex: 1; max-width: 860px; min-width: 0; display: flex; flex-direction: column; justify-content: center;}
.sec-depth-structure .structure-item {display: flex; align-items: center; gap: clamp(16px, 2.2vw, 40px); padding: clamp(20px, 2.5vw, 40px) clamp(16px, 2vw, 40px); box-sizing: border-box;}
.sec-depth-structure .item-level {width: 160px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px;}
.sec-depth-structure .level-en {display: block; font-family: var(--ff-cardo); font-size: 18px; font-weight: 400; line-height: 1.44; color: #4b3730;}
.sec-depth-structure .level-ko {font-family: var(--ff-pretendard); font-size: 16px; font-weight: 400; line-height: 1.5; color: #2a2a2a; word-break: keep-all;}
.sec-depth-structure .item-visual {width: 172px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;}
.sec-depth-structure .item-visual .visual-img {object-fit: contain;}
.sec-depth-structure .item-desc-wrap {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px;}
.sec-depth-structure .item-point {font-family: var(--ff-pretendard); font-size: 16px; font-weight: 600; line-height: 1.5; color: #525252; word-break: keep-all;}
.sec-depth-structure .item-desc {font-family: var(--ff-pretendard); font-size: 16px; font-weight: 400; line-height: 1.5; color: #525252; word-break: keep-all;}

/* ==========================================================================
   10. ANESTHESIA METHOD (.sec-anesthesia-method - 서브 공통 재사용)
   ========================================================================== */
.sec-anesthesia-method {width: 100%; padding: 160px 0 160px; box-sizing: border-box; background: linear-gradient(180deg, #F4F3F1 0%, #FFF 100%);}
.sec-anesthesia-method .inner {max-width: 1600px; margin: 0 auto; width: 100%; box-sizing: border-box;}
.sec-anesthesia-method .sec-header {margin-bottom: 64px;}
.sec-anesthesia-method .anesthesia-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch;}
.sec-anesthesia-method .anesthesia-card {display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;}
.sec-anesthesia-method .card-thumb {width: 100%; height: 180px; overflow: hidden; border-radius: 4px;}
.sec-anesthesia-method .card-thumb .thumb-img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}
.sec-anesthesia-method .anesthesia-card:hover .card-thumb .thumb-img {transform: scale(1.05);}
.sec-anesthesia-method .card-info {display: flex; flex-direction: column; align-items: center; gap: 4px;}
.sec-anesthesia-method .card-name {font-family: var(--ff-pretendard); font-size: 22px; font-weight: 600; line-height: 1.45; color: #2a2a2a; word-break: keep-all;}
.sec-anesthesia-method .card-desc {font-family: var(--ff-pretendard); font-size: 18px; font-weight: 400; line-height: 1.61; color: #525252; word-break: keep-all; letter-spacing: -0.02em;}

/* ==========================================================================
   11. EQUIPMENT LINEUP (.sec-equipment-lineup - 서브 공통 재사용 Swiper)
   ========================================================================== */
.sec-equipment-lineup {padding: 160px 0; overflow: hidden; box-sizing: border-box;}
.sec-equipment-lineup .lineup-wrap {width: 100%; display: flex; align-items: flex-start; gap: 80px; box-sizing: border-box; padding-left: max(20px, calc((100% - 1600px) / 2)); padding-right: 0;}
.sec-equipment-lineup .lineup-header-wrap {flex: 0 0 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; position: relative; z-index: 10; background-color: #ffffff;}
.sec-equipment-lineup .lineup-header-wrap .sec-header {margin-bottom: 0;}
.sec-equipment-lineup .lineup-nav-btns {display: flex; align-items: center; gap: 12px;}
.sec-equipment-lineup .lineup-btn {width: 44px; height: 44px; border-radius: 50%; border: 1px solid #c9c9c9; background-color: #ffffff; color: #2a2a2a; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;}
.sec-equipment-lineup .lineup-btn:hover {background-color: #76614a; border-color: #76614a; color: #ffffff;}
.sec-equipment-lineup .lineup-btn.swiper-button-disabled {opacity: 0.3; cursor: default; pointer-events: none;}
.sec-equipment-lineup .lineup-slider-wrap {flex: 1; min-width: 0; overflow: hidden; position: relative; z-index: 1;}
.sec-equipment-lineup .equipment-swiper {width: 100%; overflow: hidden;}
.sec-equipment-lineup .equipment-swiper.swiper-disabled .swiper-wrapper {display: flex; gap: 32px; transform: none !important;}
.sec-equipment-lineup .equipment-slide {width: 385px; flex-shrink: 0; display: flex; flex-direction: column;}
.sec-equipment-lineup .equip-thumb-box {width: 100%; height: 420px; background-color: #f4f3f1; display: flex; align-items: center; justify-content: center; border-radius: 4px; overflow: hidden;}
.sec-equipment-lineup .equip-thumb-box .equip-img {transition: transform 0.5s ease;}
.sec-equipment-lineup .equipment-slide:hover .equip-thumb-box .equip-img {transform: scale(1.05);}
.sec-equipment-lineup .equip-info-box {display: flex; flex-direction: column; gap: 12px; margin-top: 20px; text-align: center;}
.sec-equipment-lineup .equip-title-wrap {display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%;}
.sec-equipment-lineup .equip-title {font-family: var(--ff-pretendard); font-size: 22px; font-weight: 600; line-height: 1.45; color: #2a2a2a; word-break: keep-all;}
.sec-equipment-lineup .equip-line {width: 100%; height: 1px; background-color: #c9c9c9;}
.sec-equipment-lineup .equip-desc {font-family: var(--ff-pretendard); font-size: 18px; font-weight: 400; line-height: 1.61; color: #525252; word-break: keep-all;}
#sub22 .sec-equipment-lineup {padding-top: 80px;}

/* ==========================================================================
   12. ENERGY DESIGN (.sec-energy-design)
   ========================================================================== */
.sec-energy-design {position: relative; width: 100%; height: 815px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background-size: cover; background-position: 70% center; background-repeat: no-repeat; padding: 120px 20px;}
.sec-energy-design .inner {max-width: 1600px; width: 100%; margin: 0 auto; display: flex; justify-content: flex-end; box-sizing: border-box;}
.sec-energy-design .energy-content {width: 100%; max-width: 700px; display: flex; flex-direction: column; gap: 48px;}
.sec-energy-design .desc-wrap {display: flex; flex-direction: column;}
.sec-energy-design .desc {font-family: var(--ff-pretendard); font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; color: #3c3c3c; word-break: keep-all;}
.sec-energy-design .desc strong {font-weight: 600;}

/* ==========================================================================
   13. EQUIPMENT DETAIL (.sec-equip-detail)
   ========================================================================== */
.sec-equip-detail {width: 100%; background-color: #f4f3f1; padding: 140px 0; overflow: hidden; box-sizing: border-box;}
.sec-equip-detail .inner {max-width: 1440px; margin: 0 auto; width: 100%; padding: 0 clamp(20px, 2.5vw, 40px); display: flex; flex-direction: column; gap: 120px; box-sizing: border-box;}
.sec-equip-detail .equip-detail-item {display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 3.5vw, 60px); box-sizing: border-box;}
.sec-equip-detail .equip-detail-item.reverse {flex-direction: row-reverse;}
.sec-equip-detail .equip-visual-box {flex: 1; max-width: 632px; min-width: 0; display: flex; align-items: center; justify-content: center; position: relative;}
.sec-equip-detail .equip-visual-box .equip-img {width: 100%; max-width: 100%; height: auto; object-fit: contain; transition: transform 0.5s ease;}
.sec-equip-detail .equip-detail-item:hover .equip-visual-box .equip-img {transform: scale(1.03);}
.sec-equip-detail .equip-info-wrap {flex: 1.2; max-width: 800px; width: 100%; min-width: 0; padding: 0 clamp(16px, 2vw, 40px); display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 3.5vw, 56px); box-sizing: border-box;}
.sec-equip-detail .item-header {width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: clamp(20px, 2vw, 32px);}
.sec-equip-detail .title-group {display: flex; flex-direction: column; gap: 12px;}
.sec-equip-detail .equip-en-title {font-family: var(--ff-cardo); font-size: 40px; font-weight: 400; line-height: 1.3; color: #76614a;}
.sec-equip-detail .equip-ko-title {font-family: var(--ff-notoSerif); font-size: 32px; font-weight: 600; line-height: 1.45; color: #2a2a2a; letter-spacing: -0.02em; word-break: keep-all;}
.sec-equip-detail .equip-intro-desc {font-family: var(--ff-pretendard); font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; color: #3c3c3c; word-break: keep-all;}
.sec-equip-detail .item-recommend {width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: clamp(20px, 2vw, 32px);}
.sec-equip-detail .rec-title {font-family: var(--ff-cardo); font-size: 30px; font-weight: 400; line-height: 1.46; color: #76614a;}
.sec-equip-detail .rec-list {width: 100%; max-width: 560px; border-top: 1px solid #c9c9c9; display: flex; flex-direction: column;}
.sec-equip-detail .rec-item {display: flex; align-items: center; gap: clamp(12px, 1.2vw, 20px); padding: clamp(10px, 1vw, 12px) clamp(12px, 1.2vw, 20px); border-bottom: 1px solid #c9c9c9; box-sizing: border-box;}
.sec-equip-detail .rec-icon {width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #76614a;}
.sec-equip-detail .rec-text {font-family: var(--ff-pretendard); font-size: 20px; font-weight: 400; line-height: 1.5; color: #3c3c3c; letter-spacing: -0.01em; word-break: keep-all;}

/* ==========================================================================
   14. PRECAUTIONS (.sec-precautions - 서브 공통 주의사항 모듈)
   ========================================================================== */
.sec-precautions {position: relative; width: 100%; background-color: #f4f3f1; background-image: url('../sub/img/sub_common_precautions_bg.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 150px 0 160px; box-sizing: border-box;}
.sec-precautions .inner {max-width: 1280px; margin: 0 auto; padding: 0 40px; width: 100%; box-sizing: border-box;}
/* .sec-precautions .sec-header .sub-title {color: #2f2a28;} */
.sec-precautions .precautions-list {display: flex; flex-direction: column; gap: 16px; width: 100%;}
.sec-precautions .precautions-item {background-color: #ffffff; padding: 18px 40px; display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box;}
.sec-precautions .precautions-text {font-family: var(--ff-pretendard); font-size: 18px; font-weight: 500; line-height: 1.6; color: #444444; word-break: keep-all;}

/* ==========================================================================
   15. FAQ (.sec-faq - 서브 공통 아코디언 모듈)
   ========================================================================== */
.sec-faq {padding: 140px 0 180px; box-sizing: border-box;}
.sec-faq .inner {max-width: 1280px; margin: 0 auto; padding: 0 40px; width: 100%; box-sizing: border-box;}
.sec-faq .sec-header .sub-title {font-weight: 700; color: #76614a;}
.sec-faq .faq-accordion {width: 100%; border-top: 1px solid #c9c9c9;}
.sec-faq .faq-item {border-bottom: 1px solid #c9c9c9;}
.sec-faq .faq-question {width: 100%; height: 80px; padding: 0 46px; background-color: #ffffff; display: flex; align-items: center; justify-content: center; position: relative; border: none; cursor: pointer; transition: background-color 0.3s ease;}
.sec-faq .faq-item.active .faq-question {background-color: #f4f3f1;}
.sec-faq .q-text {font-family: var(--ff-pretendard); font-size: 20px; font-weight: 600; line-height: 1.6; color: #3c3c3c; text-align: center; word-break: keep-all; transition: color 0.3s ease;}
.sec-faq .q-text::before {content: 'Q. '; font-family: inherit; font-weight: inherit; color: inherit;}
.sec-faq .faq-item.active .q-text {color: #76614a;}
.sec-faq .faq-icon {position: absolute; right: 46px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 9px; color: #2a2a2a; transition: transform 0.3s ease, color 0.3s ease;}
.sec-faq .faq-icon svg {width: 28px; height: 9px; display: block; overflow: visible;}
.sec-faq .faq-item.active .faq-icon {transform: translateY(-50%) rotate(180deg); color: #76614a;}
.sec-faq .faq-answer {overflow: hidden;}
.sec-faq .answer-inner {padding: 40px 46px; background-color: #ffffff; text-align: center; box-sizing: border-box;}
.sec-faq .a-text {font-family: var(--ff-pretendard); font-size: 18px; font-weight: 400; line-height: 1.61; color: #444444; text-align: center; word-break: keep-all;}

/* ==========================================================================
   16. STICKY STEP DESIGN (.sec-sticky-step - 서브 공통 좌측 스티키 / 우측 순차 카드 모듈)
   ========================================================================== */
.sec-sticky-step {width: 100%; background-color: #ffffff; padding: 160px 0; box-sizing: border-box;}
.sec-sticky-step .inner {max-width: 1600px; margin: 0 auto; width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(40px, 4vw, 80px); box-sizing: border-box;}
.sec-sticky-step .step-sticky-col {flex: 0 0 460px; max-width: 460px; position: sticky; top: 140px; align-self: flex-start; z-index: 5;}
.sec-sticky-step .header-badge {display: inline-flex; align-items: center; gap: 12px; margin-bottom: 12px; color: #5b4b3d;}
.sec-sticky-step .header-badge .dy-symbol {width: 52px; height: 52px; background-color: currentColor;}
.sec-sticky-step .header-badge .sub-title {font-family: var(--ff-cardo); font-size: 30px; font-weight: 400; line-height: 1.3; color: inherit; margin-bottom: 0;}
.sec-sticky-step .main-title {font-family: var(--ff-notoSerif); font-size: 32px; font-weight: 600; line-height: 1.5; color: #2a2a2a; letter-spacing: -0.02em; word-break: keep-all; margin-bottom: 24px;}
.sec-sticky-step .desc {font-family: var(--ff-pretendard); font-size: 20px; font-weight: 400; line-height: 1.5; color: #3c3c3c; letter-spacing: -0.01em; word-break: keep-all; margin-top: 0;}
.sec-sticky-step .step-card-col {flex: 1; max-width: 960px; min-width: 0; display: flex; flex-direction: column; gap: 32px;}
.sec-sticky-step .step-card {width: 100%; display: flex; flex-direction: column; background-color: #5b4b3d; overflow: hidden;}
.sec-sticky-step .card-img-wrap {width: 100%; height: 410px; overflow: hidden; background-color: #eae8e4; position: relative;}
.sec-sticky-step .card-img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);}
.sec-sticky-step .step-card:hover .card-img {transform: scale(1.04);}
.sec-sticky-step .card-bar {width: 100%; height: 96px; background-color: #5b4b3d; padding: 0px 80px; display: flex; align-items: center; gap: 40px; box-sizing: border-box;}
.sec-sticky-step .step-num {font-family: var(--ff-cardo); font-size: 30px; font-weight: 700; line-height: 1.46; color: #ffffff; flex-shrink: 0;}
.sec-sticky-step .step-text {font-family: var(--ff-notoSerif); font-size: 24px; font-weight: 600; line-height: 1.53; color: #ffffff; letter-spacing: -0.02em; word-break: keep-all;}

/* ==========================================================================
   17. TREATMENT PARTS (.sec-treatment-parts - 시술 부위 3열 이미지 카드)
   ========================================================================== */
.sec-treatment-parts {padding: 120px 20px 180px; box-sizing: border-box;}
.sec-treatment-parts .inner {max-width: 1440px; margin: 0 auto; width: 100%; box-sizing: border-box;}
.sec-treatment-parts .parts-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; width: 100%;}
.sec-treatment-parts .parts-item {display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;}
.sec-treatment-parts .parts-thumb {width: 100%; overflow: hidden; background-color: #f7f6f4; position: relative;}
.sec-treatment-parts .parts-title {font-family: var(--ff-pretendard); font-size: 20px; font-weight: 600; line-height: 1.5; color: #3c3c3c; letter-spacing: -0.01em; word-break: keep-all; margin: 0;}

/* ==========================================================================
   18. VOLUME 2-COLUMN (.sec-volume-col - 콜라겐부스터 와이드 2단 컬럼 모듈)
   ========================================================================== */
.sec-volume-col {width: 100%; background-color: #f4f3f1; padding: 140px 0; box-sizing: border-box;}
.sec-volume-col .inner {max-width: 1600px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;}
.sec-volume-col.reverse .inner {flex-direction: row-reverse;}
.sec-volume-col .col-text {flex: 1; max-width: 775px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px; box-sizing: border-box;}
.sec-volume-col.reverse .col-text {padding: 0 20px;}
.sec-volume-col .col-text-inner {display: flex; flex-direction: column; width: fit-content; max-width: 100%;}
.sec-volume-col .sec-header {margin-bottom: 38px;}
.sec-volume-col .desc-box {display: flex; flex-direction: column; gap: 20px;}
.sec-volume-col .desc {font-family: var(--ff-pretendard); font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; color: #3c3c3c; word-break: keep-all;}
.sec-volume-col .desc strong {font-weight: 600; color: #3c3c3c;}
.sec-volume-col .desc.strong strong {font-weight: 600; color: #3c3c3c;}
.sec-volume-col .col-img-box {width: clamp(520px, 51.5vw, 825px); flex-shrink: 0;}
.sec-volume-col .col-img {width: 100%; height: auto; display: block;}
.sec-volume-col.sec-skin-condition {padding: 80px 0; background-color: transparent; background-image: url('../sub/img/sub42_sec02_bg.webp'); background-size: cover; background-position: center; background-repeat: no-repeat;}
.condition-diagram {position: relative; width: 100%; max-width: 825px; aspect-ratio: 825 / 655; margin: 0 auto; display: flex; align-items: center; justify-content: center;}
.condition-diagram .diagram-circle {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 31.76%; aspect-ratio: 262 / 261; pointer-events: none;}
.condition-diagram .diagram-circle svg {width: 100%; height: 100%; display: block;}
.condition-diagram .diagram-arc {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 57.21%; aspect-ratio: 472 / 371; pointer-events: none;}
.condition-diagram .diagram-arc svg {width: 100%; height: 100%; display: block;}
.condition-diagram .diagram-point {position: absolute; text-align: center; white-space: nowrap; z-index: 2;}
.condition-diagram .point-text {font-family: var(--ff-notoSerif); font-size: 20px; font-weight: 500; line-height: 1.5; color: #76614a; letter-spacing: -0.01em; margin: 0; word-break: keep-all;}
.condition-diagram .point-top {left: 50%; top: 7.8%; transform: translateX(-50%);}
.condition-diagram .point-bottom {left: 50%; bottom: 8.8%; transform: translateX(-50%);}
.condition-diagram .point-left {left: calc(50% - 28.6%); top: 47%; transform: translate(-50%, -50%);}
.condition-diagram .point-right {left: calc(50% + 28.6%); top: 47%; transform: translate(-50%, -50%);}

/* ==========================================================================
   19. PIGMENT INSIGHT (.sec-pigment-insight - 맞춤형 색소 치료 전용 2단 라운드/라인 비주얼 모듈)
   ========================================================================== */
.sec-pigment-insight {width: 100%; background-color: #f4f3f1; padding: 140px 0; overflow: hidden; box-sizing: border-box;}
.sec-pigment-insight .inner {max-width: 1600px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 40px; box-sizing: border-box; padding: 0 40px 0 80px;}
.sec-pigment-insight .insight-text-col {flex: 0 0 514px; max-width: 514px; display: flex; flex-direction: column; gap: 48px; box-sizing: border-box;}
.sec-pigment-insight .sec-header {margin-bottom: 0; align-items: flex-start; text-align: left;}
.sec-pigment-insight .sec-header .sub-title {display: block; font-family: var(--ff-cardo); font-size: 30px; font-weight: 400; line-height: 1.46; color: #2a2a2a; letter-spacing: -0.02em; margin-bottom: 20px;}
.sec-pigment-insight .sec-header .main-title {font-family: var(--ff-notoSerif); font-size: 30px; font-weight: 600; line-height: 1.53; color: #2a2a2a; letter-spacing: -0.02em; word-break: keep-all;}
.sec-pigment-insight .insight-divider {width: 100%; height: 1px; background-color: #e8dfcf; flex-shrink: 0;}
.sec-pigment-insight .desc-box {display: flex; flex-direction: column; gap: 20px;}
.sec-pigment-insight .desc {font-family: var(--ff-pretendard); font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; color: #3c3c3c; word-break: keep-all;}
.sec-pigment-insight .desc.strong strong {font-weight: 600; color: #3c3c3c;}
.sec-pigment-insight .insight-visual-col {flex: 1; max-width: 865px; min-width: 0; position: relative;}
.sec-pigment-insight .visual-wrap {position: relative; width: 100%; max-width: 865px; height: 655px; margin-left: auto;}
.sec-pigment-insight .visual-ellipse-line {position: absolute; left: -70px; top: 50%; transform: translateY(-50%) rotate(66deg); width: 592px; height: 833px; border: 1px solid #e8dfcf; border-radius: 50%; pointer-events: none; z-index: 1; background-color: #F4F3F1;}
.sec-pigment-insight .visual-img-frame {position: absolute; right: 0; top: 0; width: 100%; max-width: 865px; height: 100%; z-index: 2; display: flex; align-items: center; justify-content: flex-end;}
.sec-pigment-insight .visual-img {max-width: 100%; height: auto; display: block; object-fit: contain;}
.sec-pigment-insight .visual-watermark {position: absolute; right: -110px; bottom: -90px; font-family: var(--ff-cardo); font-size: 120px; font-weight: 400; line-height: 1.1; color: #76614a; opacity: 0.1; text-align: right; pointer-events: none; user-select: none; z-index: 2; white-space: nowrap;}

/* ==========================================================================
   PAGE SPECIFIC OVERRIDES (#sub21 - DY 정밀 피부설계 고유 배경 이미지)
   ========================================================================== */
#sub21 .sub-intro {background-image: url('../sub/img/sub21_intro_bg.webp');}
#sub21 .sec-precision-treatment {background-image: url('../sub/img/sub21_sec06_bg.webp');}

#sub22 .sub-intro {background-image: url('../sub/img/sub22_intro_bg.webp');}
#sub23 .sub-intro {background-image: url('../sub/img/sub23_intro_bg.webp');}
#sub24 .sub-intro {background-image: url('../sub/img/sub24_intro_bg.webp');}
#sub31 .sub-intro {background-image: url('../sub/img/sub31_intro_bg.webp');}
#sub31 .sec-energy-design {background-image: url('../sub/img/sub31_sec01_bg.webp');}
#sub31 .sec-precision-treatment {background-image: url('../sub/img/sub31_sec05_bg.webp');}
#sub32 .sub-intro {background-image: url('../sub/img/sub32_intro_bg.webp');}
#sub32 .sec-energy-design {background-image: url('../sub/img/sub32_sec01_bg.webp');}
#sub32 .sec-precision-treatment {background-image: url('../sub/img/sub32_sec05_bg.webp');}
#sub41 .sub-intro {background-image: url('../sub/img/sub41_intro_bg.webp');}
#sub41 .sec-energy-design {background-image: url('../sub/img/sub41_sec01_bg.webp');}
#sub41 .sec-precision-analysis-header .header-badge {margin-bottom: 12px;}
#sub42 .sub-intro {background-image: url('../sub/img/sub42_intro_bg.webp'); background-position: 90% center;}
#sub42 .sec-precision-treatment {background-image: url('../sub/img/sub42_sec04_bg.webp');}
#sub43 .sub-intro {background-image: url('../sub/img/sub43_intro_bg.webp');}
#sub43 .sec-precision-analysis-header .header-badge {margin-bottom: 12px;}
#sub43 .sec-precision-treatment {background-image: url('../sub/img/sub43_sec04_bg.webp');}
#sub51 .sub-intro {background-image: url('../sub/img/sub51_intro_bg.webp');}
#sub51 .sec-anesthesia-method {background: #ffffff; padding-bottom: 80px;}
#sub51 .sec-precision-treatment {background-image: url('../sub/img/sub51_sec05_bg.webp');}
#sub52 .sub-intro {background-image: url('../sub/img/sub52_intro_bg.webp');}
#sub52 .sec-anesthesia-method {background: #ffffff; padding-bottom: 80px;}
#sub52 .sec-precision-treatment {background-image: url('../sub/img/sub52_sec05_bg.webp');}

/* ==========================================================================
   반응형 단일 미디어 쿼리 (@media (max-width: 1024px))
   - PC 기본 스타일 복제 없이 순수 변경 속성만 최소한으로 작성
   - sub.css 공통 모바일과 중복되는 속성 배제
   ========================================================================== */
@media (max-width: 1024px) {
  /* 공통 컨테이너 패딩 */
  .sub-page .inner {padding: 0 20px;}

  /* 공통 섹션 헤더 모바일 */
  .sec-header {margin-bottom: 40px;}
  .sec-header.text-left {margin-bottom: 0;}
  .sec-header .header-badge.flex-col {gap: 20px;}
  .sec-header .header-badge .dy-symbol {width: 38px; height: 38px;}
  .sec-header .sub-title {font-size: 20px;}
  .sec-header.text-left .sub-title {margin-bottom: 8px;}
  .sec-header .main-title {font-size: 24px;}
  .sec-header .desc {font-size: 16px; margin-top: 10px;}

  /* 00. SUB INTRO */
  .sub-page .sub-intro .intro-header h2 {margin-bottom: 14px;}
  .sub-page .sub-intro .intro-header .intro-slogan {font-size: 20px; margin-bottom: 9px;}
  .sub-page .sub-intro .intro-bg-watermark {display: none;}

  /* 01 & 03. PRECISION 2-COLUMN (BEYOND VISIBLE & SPECIALIST) */
  .sec-precision-col {padding: 80px 0 0; }
  .sec-precision-col.reverse {padding: 80px 0;}
  .sec-precision-col .inner, .sec-precision-col.reverse .inner {flex-direction: column; gap: 40px;}
  /* .sec-precision-col .col-text, .sec-precision-col.reverse .col-text {padding: 0; width: 100%;} */
  .sec-precision-col .col-text{padding: 0; width: 100%; align-items: flex-start;}
  .sec-precision-col .col-text-inner {width: 100%;}
  .sec-precision-col .sec-header {margin-bottom: 24px;}
  .sec-precision-col .desc {font-size: 16px;}
  .sec-precision-col .col-img-box {width: 100%;}



  /* 04. PRECISION ANALYSIS */
  .sec-precision-analysis-header {padding: 80px 0;}
  .sec-precision-analysis-header .sec-header {margin-bottom: 0; gap: 10px;}
  .sec-precision-analysis-header .desc {margin-top: 16px;}
  .sec-precision-analysis {padding: 80px 0;}
  .sec-precision-analysis .analysis-list {grid-template-columns: 1fr; gap: 20px;}
  .sec-precision-analysis .analysis-card {height: 380px;}
  .sec-precision-analysis .card-bg .card-dim {background-color: rgba(47, 42, 40, 0.6);}
  .sec-precision-analysis .card-title-wrap {transform: translateY(0);}
  .sec-precision-analysis .card-en {font-size: 22px;}
  .sec-precision-analysis .card-ko {font-size: 18px;}
  .sec-precision-analysis .card-hover-info {margin-top: 12px; opacity: 1; transform: translateY(0); pointer-events: auto;}
  .sec-precision-analysis .hover-desc {font-size: 16px;}

  /* 05. DY PRECISION PROCESS */
  .sec-precision-process {padding: 80px 0;}
  .sec-precision-process .process-grid {grid-template-columns: 1fr; gap: 40px;}
  .sec-precision-process .process-item {gap: 20px;}
  .sec-precision-process .item-img-box {height: 240px; border-radius: 14px;}
  .sec-precision-process .step-title {font-size: 18px;}
  .sec-precision-process .step-desc {font-size: 16px;}

  /* 06. TREATMENT */
  .sec-precision-treatment {min-height: auto; padding: 80px 0;}
  .sec-precision-treatment .treatment-box {gap: 40px;}
  .sec-precision-treatment .sec-header {gap: 12px; margin-bottom: 0;}
  .sec-precision-treatment .treatment-content {flex-direction: column; gap: 40px;}
  .sec-precision-treatment .treatment-line {width: 100%; height: 1px;}
  .sec-precision-treatment .treatment-desc-wrap {gap: 12px;}
  .sec-precision-treatment .desc {font-size: 16px;}

  /* 07. THE DY DIFFERENCE (서브 공통) */
  .sub-page .sub-difference {padding: 80px 0;}
  .sub-page .sub-difference .difference-content {flex-direction: column; gap: 24px;}
  .sub-page .sub-difference .diff-img-box {height: 280px; flex: auto;}
  .sub-page .sub-difference .diff-list {width: 100%; gap: 12px;}
  .sub-page .sub-difference .diff-item {padding: 22px 20px;}
  .sub-page .sub-difference .item-title {font-size: 18px;}
  .sub-page .sub-difference .item-desc {font-size: 16px;}

  /* 08. PRECISION SKIN DESIGN CTA (서브 공통) */
  .sub-page .sub-contact-banner {padding: 80px 0;}
  .sub-page .sub-contact-banner .sec-header {gap: 10px;}
  .sub-page .sub-contact-banner .banner-btn-wrap {width: 100%; gap: 10px;}
  .sub-page .sub-contact-banner .cta-btn {flex: 1; max-width: 160px; font-size: 14px;}

  /* 09. DEPTH STRUCTURE 모바일 */
  .sec-depth-structure {padding: 80px 0;}
  .sec-depth-structure .inner {flex-direction: column; gap: 40px;}
  .sec-depth-structure .structure-list {gap: 20px;}
  .sec-depth-structure .structure-left {flex: auto; padding-top: 0; align-items: center; text-align: center;}
  .sec-depth-structure .structure-left .sec-header {align-items: center; text-align: center;}
  .sec-depth-structure .structure-divider {display: none;}
  .sec-depth-structure .structure-item {flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; gap: 16px; background-color: rgba(255, 255, 255, 0.4); border-radius: 20px;}
  .sec-depth-structure .item-level {width: 100%; align-items: center;}
  .sec-depth-structure .level-en {font-size: 16px;}
  .sec-depth-structure .level-ko {font-size: 20px;}
  .sec-depth-structure .item-visual {width: 140px; height: 100px;}
  .sec-depth-structure .item-desc-wrap {align-items: center;}
  .sec-depth-structure .item-point {font-size: 18px;}
  .sec-depth-structure .item-desc {font-size: 16px; line-height: 1.6;}

  /* 10. ANESTHESIA METHOD 모바일 */
  .sec-anesthesia-method {padding: 80px 0;}
  .sec-anesthesia-method .inner {padding: 0 20px;}
  .sec-anesthesia-method .sec-header {margin-bottom: 40px;}
  .sec-anesthesia-method .anesthesia-card {gap: 12px;}
  .sec-anesthesia-method .anesthesia-grid {grid-template-columns: 1fr; gap: 40px;}
  .sec-anesthesia-method .card-name {font-size: 20px;}
  .sec-anesthesia-method .card-desc {font-size: 16px; line-height: 1.55;}

  /* 11. EQUIPMENT LINEUP 모바일 */
  .sec-equipment-lineup {padding: 80px 0;}
  .sec-equipment-lineup .lineup-wrap {flex-direction: column; gap: 36px; padding: 0 0 0 20px;}
  .sec-equipment-lineup .lineup-header-wrap {flex: auto; padding-top: 0; padding-right: 20px; width: 100%; align-items: center; text-align: center; gap: 20px;}
  .sec-equipment-lineup .lineup-header-wrap .sec-header {align-items: center; text-align: center;}
  .sec-equipment-lineup .lineup-slider-wrap {width: 100%; overflow: hidden;}
  .sec-equipment-lineup .equipment-slide {width: 260px;}
  .sec-equipment-lineup .equip-thumb-box {height: 300px;}
  .sec-equipment-lineup .equip-thumb-box .equip-img {max-height: 240px;}
  .sec-equipment-lineup .equip-title {font-size: 18px;}
  .sec-equipment-lineup .equip-desc {font-size: 15px;}

  /* 12. ENERGY DESIGN 모바일 */
  .sec-energy-design {height: 100svh; padding: 80px 0; align-items: flex-start;}
  .sec-energy-design .inner {padding: 0 20px; justify-content: flex-start;}
  .sec-energy-design .sec-header {gap: 0}
  .sec-energy-design .energy-content {max-width: 100%; gap: 32px;}
  .sec-energy-design .desc {font-size: 16px;}

  /* 13. EQUIPMENT DETAIL 모바일 */
  .sec-equip-detail {padding: 80px 0;}
  .sec-equip-detail .inner {padding: 0 20px; gap: 80px;}
  .sec-equip-detail .equip-detail-item, .sec-equip-detail .equip-detail-item.reverse {flex-direction: column; gap: 20px;}
  .sec-equip-detail .equip-visual-box {width: 80%; min-height: auto;}
  .sec-equip-detail .equip-visual-box .equip-img {max-height: 380px;}
  .sec-equip-detail .equip-info-wrap {padding: 0; width: 100%; gap: 40px;}
  .sec-equip-detail .item-header, .sec-equip-detail .item-recommend {max-width: 100%;}
  .sec-equip-detail .item-header {gap: 20px;}
  .sec-equip-detail .equip-en-title {font-size: 22px; text-align: center;}
  .sec-equip-detail .equip-ko-title {font-size: 24px; text-align: center;}
  .sec-equip-detail .equip-intro-desc {font-size: 16px;}
  .sec-equip-detail .item-recommend {gap: 20px;}
  .sec-equip-detail .rec-title {font-size: 22px; text-align: center;}
  .sec-equip-detail .rec-list {max-width: 100%;}
  .sec-equip-detail .rec-item {padding: 10px 12px; gap: 12px;}
  .sec-equip-detail .rec-text {font-size: 16px;}

  /* 14. PRECAUTIONS 모바일 */
  .sec-precautions {padding: 80px 0;}
  .sec-precautions .inner {padding: 0 20px;}
  .sec-precautions .sec-header {margin-bottom: 40px;}
  .sec-precautions .precautions-list {gap: 12px;}
  .sec-precautions .precautions-item {padding: 16px 20px;}
  .sec-precautions .precautions-text {font-size: 15px;}

  /* 15. FAQ 모바일 */
  .sec-faq {padding: 80px 0;}
  .sec-faq .inner {padding: 0 20px;}
  .sec-faq .faq-question {height: auto; min-height: 64px; padding: 20px 50px 20px 10px; justify-content: flex-start;}
  .sec-faq .q-text {font-size: 16px; text-align: left; position: relative; padding-left: 20px;line-height: 1.4;}
  .sec-faq .q-text::before {position: absolute;top: 0;left: 0;}
  .sec-faq .faq-icon {right: 20px; width: 22px; height: 7px;}
  .sec-faq .faq-icon svg {width: 22px; height: 7px;}
  .sec-faq .answer-inner {padding: 24px 10px; text-align: center;}
  .sec-faq .a-text {font-size: 16px; text-align: left;}
  .sec-faq .a-text br {display: none;}

  /* 16. STICKY STEP DESIGN 모바일 (sec-precision-analysis-header 스타일 모듈) */
  .sec-sticky-step {padding: 0 0 80px 0;}
  .sec-sticky-step .inner {flex-direction: column; gap: 40px; padding: 0 20px;}
  .sec-sticky-step .step-sticky-col {position: static; flex: auto; max-width: none; width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; padding: 60px 20px 50px; background-color: #826955; background-image: url('../sub/img/sub_common_analysis_bg.webp'); background-size: cover; background-position: 70% center; background-repeat: no-repeat; box-sizing: border-box;}
  .sec-sticky-step .step-sticky-col .sec-header {align-items: center; text-align: center; margin-bottom: 0; gap: 10px;}
  .sec-sticky-step .step-sticky-col .header-badge {display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-bottom: 0;}
  .sec-sticky-step .step-sticky-col .header-badge .dy-symbol {width: 36px; height: 36px; background-color: #ffffff;}
  .sec-sticky-step .step-sticky-col .header-badge .sub-title {font-family: var(--ff-cardo); font-size: 20px; color: #ffffff; margin-bottom: 0; line-height: 1.2;}
  .sec-sticky-step .step-sticky-col .main-title {font-family: var(--ff-notoSerif); font-size: 24px; font-weight: 600; line-height: 1.4; color: #ffffff; letter-spacing: -0.02em; margin-bottom: 0; word-break: keep-all;}
  .sec-sticky-step .step-sticky-col .desc {font-family: var(--ff-pretendard); font-size: 16px; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.9); letter-spacing: -0.01em; margin-top: 12px; margin-bottom: 0; word-break: keep-all;}
  .sec-sticky-step .step-card-col {max-width: 100%; width: 100%; gap: 20px;}
  .sec-sticky-step .card-img-wrap {height: clamp(200px, 50vw, 260px);}
  .sec-sticky-step .card-bar {height: auto; padding: 12px 20px; gap: 16px;}
  .sec-sticky-step .step-num {font-size: 22px;}
  .sec-sticky-step .step-text {font-size: 16px; line-height: 1.4;}

  /* 17. TREATMENT PARTS 모바일 */
  .sec-treatment-parts {padding: 60px 0 100px 0;}
  .sec-treatment-parts .parts-grid {grid-template-columns: 1fr; gap: 40px;}
  .sec-treatment-parts .parts-item {max-width: 440px; margin: 0 auto; width: 100%;}
  .sec-treatment-parts .parts-title {font-size: 18px;}

  /* 18. VOLUME 2-COLUMN 모바일 */
  .sec-volume-col {padding: 70px 0;}
  .sec-volume-col .inner, .sec-volume-col.reverse .inner {flex-direction: column; gap: 40px;}
  .sec-volume-col .col-text, .sec-volume-col.reverse .col-text {max-width: 100%; padding: 0; width: 100%; align-items: flex-start;}
  .sec-volume-col .col-text-inner {width: 100%;}
  .sec-volume-col .sec-header {margin-bottom: 24px;}
  .sec-volume-col .desc {font-size: 16px;}
  .sec-volume-col .col-img-box {width: 100%;}
  .condition-diagram-wrap {width: 100%; display: flex; justify-content: center; align-items: center;}
  .condition-diagram {width: 100%; max-width: 400px; margin: 0 auto;}
  .condition-diagram .point-text {font-size: 14px; line-height: 1.35; letter-spacing: -0.02em;}
  .condition-diagram .point-top {top: 6%;}
  .condition-diagram .point-bottom {bottom: 6%;}
  .condition-diagram .point-left {left: calc(50% - 29%); top: 47%;}
  .condition-diagram .point-right {left: calc(50% + 29%); top: 47%;}

  /* 19. PIGMENT INSIGHT 모바일 */
  .sec-pigment-insight {padding: 80px 0;}
  .sec-pigment-insight .inner {flex-direction: column; gap: 40px; padding: 0 20px;}
  .sec-pigment-insight .insight-text-col {flex: auto; max-width: 100%; width: 100%; gap: 24px;}
  .sec-pigment-insight .sec-header .sub-title {font-size: 20px; margin-bottom: 8px;}
  .sec-pigment-insight .sec-header .main-title {font-size: 24px;}
  .sec-pigment-insight .desc {font-size: 16px;}
  .sec-pigment-insight .insight-visual-col {width: 100%; max-width: 100%;}
  .sec-pigment-insight .visual-wrap {width: 100%; max-width: 100%; height: auto; margin: 0 auto; display: block;}
  .sec-pigment-insight .visual-img-frame {position: relative; right: auto; top: auto; width: 100%; max-width: 100%; height: auto; display: block;}
  .sec-pigment-insight .visual-img {width: 100%; height: auto; display: block;}
  .sec-pigment-insight .visual-ellipse-line {width: 68.5%; height: auto; aspect-ratio: 592 / 833; left: 28.6%; transform: translate(-50%, -50%) rotate(66deg); background-color: transparent;}
  .sec-pigment-insight .visual-watermark {font-size: clamp(38px, 13vw, 120px); top: 72.5%; bottom: auto; right: 2%; z-index: 3;}

   /* ==========================================================================
      PAGE SPECIFIC OVERRIDES (#sub21 - DY 정밀 피부설계 고유 배경 이미지)
      ========================================================================== */
   #sub21 .sec-precision-process {padding-top: 0;}
   #sub22 .sec-equipment-lineup {padding-top: 0;}
   #sub24 .sec-precision-process {padding-block: 0;}
   #sub31 .sec-energy-design {background-image: url('../sub/img/sub31_sec01_bg_m.webp');}
   #sub32 .sec-energy-design {background-image: url('../sub/img/sub32_sec01_bg_m.webp');}
   #sub41 .sec-energy-design {background-image: url('../sub/img/sub41_sec01_bg_m.webp');}
   #sub51 .sec-sticky-step {padding-top: 0;}
   #sub52 .sec-sticky-step {padding: 0;}
   
}