/* ── 공통 섹션 구조 ─────────────────────────────── */
.nos-sec-heading {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
}

.nos-en-label {
font-family: 'Libre Caslon Text';
font-size: 22px;
color: var(--point-color, #00a8c6);
letter-spacing: 4.4px;
line-height: 1;
}

.nos-why-title-sub {
color: var(--Point-Color, #00A8C6);
text-align: center;
font-family: Pretendard;
font-size: 30px;
font-style: normal;
font-weight: 500;
line-height: 36px; /* 120% */
letter-spacing: -0.3px;
}

.nos-sec-title {
font-family: 'Pretendard', sans-serif;
font-weight: 600;
font-size: 56px;
color: #111;
letter-spacing: -1.68px;
line-height: 72.8px;
text-align: center;
word-break: keep-all;
margin-top: 20px;
}

.nos-sec-title em {
color: var(--Point-Color);
font-style: normal;
}

.nos-vline {
display: block;
width: 1px;
height: 30px;
background: #ddd;
margin: 30px auto 0;
}


/* ══════════════════════════════════════════════════
#1 인트로
══════════════════════════════════════════════════ */
.nos-intro {
padding: 100px 200px;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}

.nos-intro-heading {
font-family: 'Noto Serif KR', serif;
font-weight: 400;
font-size: 50px;
color: #222;
text-align: center;
line-height: 70px;
letter-spacing: -2.5px;
word-break: keep-all;
margin: 0;
}

.nos-intro-sub {
font-family: 'Pretendard', sans-serif;
font-weight: 300;
font-size: 26px;
color: var(--font-1, #282828);
text-align: center;
line-height: 41.6px;
letter-spacing: 0.52px;
word-break: keep-all;
margin: 0;
}


/* ══════════════════════════════════════════════════
#2 히어로 이미지
══════════════════════════════════════════════════ */
.nos-hero {
padding: 0 200px 100px;
display: flex;
flex-direction: column;
align-items: center;
}

.nos-hero figure {
width: 100%;
margin: 0;
}

.nos-hero-img {
width: 100%;
aspect-ratio: 1520 / 480;
object-fit: cover;
border-radius: 30px;
display: block;
}


/* ══════════════════════════════════════════════════
#3 코막힘 수술이란? (#f1f1f1 bg + 비교 이미지)
pt: 160px (피그마 기준)
══════════════════════════════════════════════════ */
.nos-what {
background: #f1f1f1;
padding: 160px 200px 100px;
display: flex;
flex-direction: column;
align-items: center;
}

.nos-what-heading {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
text-align: center;
width: 100%;
}

.nos-what-title {
font-family: 'Pretendard', sans-serif;
font-weight: 600;
font-size: 56px;
color: #111;
letter-spacing: -1.68px;
line-height: 72.8px;
margin: 0;
word-break: keep-all;
}

.nos-what-desc {
font-family: 'Pretendard', sans-serif;
font-weight: 400;
font-size: 20px;
color: var(--font-1, #282828);
text-align: center;
line-height: 36px;
margin: 0;
word-break: keep-all;
}

.nos-what-desc strong {
font-weight: 700;
}

/* 비교 이미지 레이아웃 */
.nos-what-compare {
display: flex;
gap: 40px;
justify-content: center;
width: 100%;
margin-top: 50px;
}

.nos-what-col {
display: flex;
flex-direction: column;
width: 580px;
flex-shrink: 0;
}

.nos-what-col-label {
display: block;
padding: 20px;
font-family: 'Pretendard', sans-serif;
font-weight: 700;
font-size: 26px;
color: #fff;
text-align: center;
letter-spacing: -1px;
line-height: 41.6px;
border-radius: 20px 20px 0 0;
}

.nos-what-col--normal .nos-what-col-label {
background: var(--point-color, #00a8c6);
}

.nos-what-col--deviated .nos-what-col-label {
background: var(--sub-color, #0f4c81);
}

.nos-what-col-img-wrap {
height: 300px;
background: #f8f8f8;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

.nos-what-col-img {
width: 100%;
height: 100%;
object-fit: contain;
mix-blend-mode: darken;
display: block;
}


/* ══════════════════════════════════════════════════
#5 왜 코로 숨쉬기가 힘들까요?
══════════════════════════════════════════════════ */
.nos-why {
padding: 100px 200px;
display: flex;
flex-direction: column;
align-items: center;
}

/* 제목 내 "코로 숨쉬기" 색상 강조 */
.nos-why-title em {
font-style: normal;
color: var(--point-color, #00a8c6);
}

.nos-why-body {
display: flex;
gap: 40px;
align-items: stretch;
margin-top: 50px;
width: 100%;
}

.nos-why-body figure {
flex-shrink: 0;
width: calc(50% - 20px);
align-self: stretch;
margin: 0;
border-radius: 20px;
overflow: hidden;
}

.nos-why-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
display: block;
}

.nos-why-cards {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1;
justify-content: center;
}

.nos-why-card {
border: 1px solid #dadada;
border-radius: 20px;
padding: 20px 40px;
}

.nos-why-card-title {
font-family: 'Pretendard', sans-serif;
font-weight: 700;
font-size: 26px;
color: var(--sub-color, #0f4c81);
letter-spacing: -0.78px;
line-height: 36px;
display: block;
margin-bottom: 10px;
}

.nos-why-card-desc {
font-family: 'Pretendard', sans-serif;
font-weight: 400;
font-size: 18px;
color: var(--font-1, #282828);
line-height: 32px;
margin: 0;
word-break: keep-all;
}


/* ══════════════════════════════════════════════════
#6 일상을 방해하는 코막힘의 신호들 (#eaf3f8)
══════════════════════════════════════════════════ */
.nos-recommend {
background: var(--background, #eaf3f8);
padding: 100px 200px;
display: flex;
flex-direction: column;
align-items: center;
}

.nos-recommend-grid {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 50px;
}

.nos-recommend-card {
display: flex;
flex-direction: column;
width: 355px;
flex-shrink: 0;
border-radius: 20px;
overflow: hidden;
}

.nos-recommend-card-img {
width: 355px;
height: 340px;
object-fit: cover;
display: block;
}

.nos-recommend-card-footer {
background: linear-gradient(to right, var(--sub-color, #0f4c81), var(--main-color, #0a2a43));
padding: 20px;
text-align: center;
}

.nos-recommend-card-name {
font-family: 'Pretendard', sans-serif;
font-weight: 700;
font-size: 26px;
color: #fff;
letter-spacing: -0.78px;
line-height: 36px;
display: block;
}

.nos-recommend-card-desc {
font-family: 'Pretendard', sans-serif;
font-weight: 400;
font-size: 18px;
color: #fff;
letter-spacing: -0.54px;
line-height: 26px;
margin: 0;
word-break: keep-all;
}


/* ══════════════════════════════════════════════════
#7 방치된 코막힘은 전신 질환의 시작입니다 (#f1f1f1)
══════════════════════════════════════════════════ */
.nos-danger {
background: #f1f1f1;
padding: 100px 200px;
display: flex;
flex-direction: column;
align-items: center;
}

.nos-danger-img {
width: 100%;
aspect-ratio: 1520 / 480;
object-fit: cover;
border-radius: 30px;
display: block;
margin-top: 50px;
}

.nos-danger-quote {
font-family: 'Noto Serif KR', serif;
font-weight: 400;
font-size: 34px;
color: #6a96af;
text-align: center;
line-height: 57.8px;
letter-spacing: -1.02px;
margin: 40px 0 0;
border: none;
padding: 0;
word-break: keep-all;
}

.nos-danger-desc {
font-family: 'Pretendard', sans-serif;
font-weight: 400;
font-size: 20px;
color: var(--font-1, #282828);
text-align: center;
line-height: 1.8;
letter-spacing: -0.6px;
margin: 0;
word-break: keep-all;
}


/* ══════════════════════════════════════════════════
#9-1 숨길의 지도를 그리는 이음의 정밀 진단
══════════════════════════════════════════════════ */
.nos-diag {
padding: 100px 200px;
display: flex;
flex-direction: column;
align-items: center;
}

.nos-diag-body {
display: flex;
gap: 40px;
align-items: stretch;
width: 100%;
margin-top: 50px;
}

.nos-diag-body figure {
flex-shrink: 0;
width: calc(50% - 20px);
align-self: stretch;
margin: 0;
border-radius: 20px;
overflow: hidden;
}

.nos-diag-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
display: block;
}

.nos-diag-list {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}

.nos-diag-item {
display: flex;
align-items: center;
gap: 40px;
padding: 20px 60px;
border-radius: 500px;
border: 1px solid #dadada;
background: #f5f5f5;
}

.nos-diag-item--active {
background: var(--sub-color, #0f4c81);
border-color: var(--sub-color, #0f4c81);
}

.nos-diag-icon {
width: 40px;
height: 39px;
flex-shrink: 0;
display: flex;
align-items: center;
}

.nos-diag-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

.nos-diag-item-txt {
display: flex;
flex-direction: column;
gap: 4px;
}

.nos-diag-item-title {
font-family: 'Pretendard', sans-serif;
font-weight: 700;
font-size: 26px;
color: var(--main-color, #0a2a43);
letter-spacing: -0.78px;
line-height: 36px;
display: block;
}

.nos-diag-item--active .nos-diag-item-title {
color: #fff;
}

.nos-diag-item-desc {
font-family: 'Pretendard', sans-serif;
font-weight: 400;
font-size: 18px;
color: var(--font-1, #282828);
line-height: 32px;
display: block;
word-break: keep-all;
}

.nos-diag-item--active .nos-diag-item-desc {
color: var(--background, #eaf3f8);
}


/* ══════════════════════════════════════════════════
#8 이음만의 최소 침습·최대 효과 솔루션 (4 cards)
padding: 100px 전방향 (피그마 기준)
══════════════════════════════════════════════════ */
.nos-feature {
background: var(--sub-color, #0f4c81);
padding: 100px;
display: flex;
flex-direction: column;
align-items: center;
}

.nos-feature .nos-sec-title {
color: #fff;
}

.nos-feature .nos-en-label {
color: var(--point-color, #00a8c6);
}

.nos-feature .nos-vline {
background: rgba(255, 255, 255, 0.3);
}

.nos-feature-grid {
display: flex;
gap: 10px;
width: 100%;
margin-top: 50px;
}

.nos-feature-card {
background: #fff;
border-radius: 20px;
padding: 40px;
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}

.nos-feature-num {
font-family: 'Pretendard', sans-serif;
font-weight: 400;
font-size: 26px;
color: var(--main-color, #0a2a43);
letter-spacing: -0.78px;
line-height: 36px;
display: block;
}

.nos-feature-card-title {
font-family: 'Pretendard', sans-serif;
font-weight: 700;
font-size: 36px;
color: var(--main-color, #0a2a43);
letter-spacing: -1.08px;
line-height: 36px;
display: block;
word-break: keep-all;
}

.nos-feature-card-desc {
font-family: 'Pretendard', sans-serif;
font-weight: 300;
font-size: 20px;
color: var(--font-1, #282828);
line-height: 32px;
margin: 0;
word-break: keep-all;
}

.nos-feature-card-desc strong {
    color: var(--Point-Color, #00A8C6);
font-family: Pretendard;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 160% */
}


/* ══════════════════════════════════════════════════
이음 안심케어 프로세스
bg: #eaf3f8 → white 그라데이션
══════════════════════════════════════════════════ */
.nos-care {
background: linear-gradient(to bottom, var(--background, #eaf3f8) 50%, #fff 50%);
padding: 100px 200px;
display: flex;
flex-direction: column;
align-items: center;
}

.nos-care-steps {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 50px;
}

.nos-care-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
width: 355px;
}

.nos-care-step-label {
font-family: 'Pretendard', sans-serif;
font-weight: 600;
font-size: 36px;
color: var(--main-color, #0a2a43);
letter-spacing: -1.8px;
line-height: 72.8px;
display: block;
text-align: center;
margin: 0;
}

.nos-care-step-img-wrap {
position: relative;
width: 355px;
height: 300px;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
}

.nos-care-step-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.nos-care-step-overlay {
position: absolute;
inset: 0;
background: rgba(10, 42, 67, 0.5);
pointer-events: none;
}

.nos-care-step-name {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Pretendard', sans-serif;
font-weight: 600;
font-size: 40px;
color: #fff;
letter-spacing: -2px;
line-height: 1;
text-align: center;
white-space: nowrap;
}

.nos-care-step-desc {
font-family: 'Pretendard', sans-serif;
font-weight: 400;
font-size: 18px;
color: var(--font-1, #282828);
text-align: center;
letter-spacing: -0.9px;
line-height: 26px;
margin: 0;
word-break: keep-all;
}


/* ══════════════════════════════════════════════════
#9-1 FAQ (common-faq 래퍼 패딩)
══════════════════════════════════════════════════ */
.nos-faq {
padding: 100px 200px;
display: flex;
flex-direction: column;
align-items: center;
}

@media (max-width: 1500px) {
    .nos-feature-card {background: #fff;border-radius: 20px;padding: 30px;flex: 1;display: flex;flex-direction: column;gap: 11px;min-width: 0;}

.nos-feature-num {
font-family: 'Pretendard', sans-serif;
font-weight: 400;
font-size: 26px;
color: var(--main-color, #0a2a43);
letter-spacing: -0.78px;
line-height: 36px;
display: block;
}

.nos-feature-card-title {font-family: 'Pretendard', sans-serif;font-weight: 700;font-size: 30px;color: var(--main-color, #0a2a43);letter-spacing: -1.08px;line-height: 36px;display: block;word-break: keep-all;}

.nos-feature-card-desc {font-family: 'Pretendard', sans-serif;font-weight: 300;font-size: 18px;color: var(--font-1, #282828);line-height: 32px;margin: 0;word-break: keep-all;}

}
@media (max-width: 1400px) {
.nos-what, .nos-intro, .nos-why, .nos-recommend, .nos-danger {
padding: 60px; 
}

.nos-what-col {
    display: flex;
    flex-direction: column;
    width: calc(50% - 40px);
    flex-shrink: 0;
}
}

@media (max-width: 1300px) {
    .nos-feature-grid {
        display: flex;
        gap: 10px;
        width: 100%;
        margin-top: 50px;
        flex-wrap: wrap;
    }

    .nos-feature-card {
        flex: 0 0 calc(50% - 8px);
        min-width: calc(50% - 8px);
        padding: 30px;
    }
}


/* ══════════════════════════════════════════════════
반응형 — 태블릿 (max-width: 1024px)
══════════════════════════════════════════════════ */
@media (max-width: 1024px) {

.nos-sec-title {
font-size: 38px;
line-height: 52px;
letter-spacing: -1px;
}

/* 인트로 */
.nos-intro {
padding: 80px 60px;
gap: 28px;
}

.nos-intro-heading {
font-size: 34px;
line-height: 50px;
letter-spacing: -1.5px;
}

.nos-intro-sub {
font-size: 20px;
line-height: 34px;
}

/* 히어로 */
.nos-hero {
padding: 0 60px 80px;
}

.nos-hero-img {
border-radius: 20px;
}

/* 수술이란 */
.nos-what {
padding: 80px 60px;
}

.nos-what-title {
font-size: 38px;
line-height: 52px;
}

.nos-what-desc {
font-size: 17px;
line-height: 30px;
}

.nos-what-compare {
gap: 16px;
margin-top: 40px;
}

.nos-what-col {
width: calc(50% - 8px);
}

.nos-what-col-label {
font-size: 20px;
padding: 16px 12px;
line-height: 32px;
}

.nos-what-col-img-wrap {
height: 240px;
}

/* 왜 힘들까요 */
.nos-why {
padding: 80px 60px;
}

.nos-why-body {
flex-direction: column;
margin-top: 40px;
}

.nos-why-body figure {
width: 100%;
height: 300px;
align-self: auto;
}

.nos-why-img {
height: 300px;
}

/* 코막힘 신호 */
.nos-recommend {
padding: 80px 60px;
}

.nos-recommend-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
justify-content: unset;
margin-top: 40px;
}

.nos-recommend-card {
width: 100%;
}

.nos-recommend-card-img {
width: 100%;
height: 280px;
}

.nos-recommend-card-name {
font-size: 20px;
line-height: 28px;
}

.nos-recommend-card-desc {
font-size: 15px;
line-height: 22px;
}

/* 방치된 위험 */
.nos-danger {
padding: 80px 60px;
}

.nos-danger-img {
border-radius: 20px;
}

.nos-danger-quote {
font-size: 24px;
line-height: 42px;
}

.nos-danger-desc {
font-size: 17px;
line-height: 30px;
}

/* 수술 설계 */
.nos-diag {
padding: 80px 60px;
}

.nos-diag-body {
flex-direction: column;
margin-top: 40px;
}

.nos-diag-body figure {
width: 100%;
height: 300px;
align-self: auto;
}

.nos-diag-img {
height: 300px;
}

.nos-diag-item {
padding: 18px 30px;
gap: 24px;
}

/* Full-Care 솔루션 — 2×2 그리드 */
.nos-feature {
padding: 80px 60px;
}

.nos-feature-grid {
flex-wrap: wrap;
gap: 16px;
margin-top: 40px;
}

.nos-feature-card {
flex: 0 0 calc(50% - 8px);
min-width: calc(50% - 8px);
padding: 30px;
}

.nos-feature-card-title {
font-size: 26px;
line-height: 32px;
}

.nos-feature-card-desc {
font-size: 16px;
line-height: 26px;
}

/* 안심케어 프로세스 */
.nos-care {
padding: 80px 60px;
}

.nos-care-steps {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px 20px;
margin-top: 40px;
}

.nos-care-step {
width: 100%;
}

.nos-care-step-img-wrap {
width: 100%;
height: 240px;
}

.nos-care-step-name {
font-size: 32px;
}

/* FAQ */
.nos-faq {
padding: 80px 60px;
}
}

/* ══════════════════════════════════════════════════
반응형 — 모바일 (max-width: 767px)
══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    

.nos-sec-title {
font-size: 26px;
line-height: 36px;
letter-spacing: -0.72px;
}

.nos-en-label {
font-size: 16px;
letter-spacing: 2px;
}

.nos-vline {
margin-top: 20px;
height: 24px;
}

/* 인트로 */
.nos-intro {
padding: 60px 20px;
gap: 20px;
}

.nos-intro-heading {
font-size: 30px;
line-height: 38px;
letter-spacing: -0.72px;
}

.nos-intro-sub {
font-size: 24px;
line-height: 36px;
letter-spacing: 0;
}

/* 히어로 */
.nos-hero {
padding: 0 20px 60px;
}

.nos-hero-img {
aspect-ratio: 4 / 3;
border-radius: 14px;
}

/* 수술이란 */
.nos-what {
padding: 60px 20px;
}

.nos-what-title {
font-size: 26px;
line-height: 36px;
}

.nos-what-desc {
font-size: 20px;
line-height: 32px;
}

.nos-what-compare {
flex-direction: column;
gap: 16px;
margin-top: 30px;
}

.nos-what-col {
width: 100%;
}

.nos-what-col-label {
font-size: 18px;
padding: 14px 12px;
line-height: 28px;
}

.nos-what-col-img-wrap {
height: 220px;
}

/* 왜 힘들까요 */
.nos-why {
padding: 60px 20px;
}

.nos-why-body {
margin-top: 30px;
}

.nos-why-body figure {
height: 220px;
}

.nos-why-img {
height: 220px;
}

.nos-why-card {
padding: 16px 20px;
}

.nos-why-card-title {
font-size: 18px;
line-height: 28px;
margin-bottom: 6px;
}

.nos-why-card-desc {
font-size: 16px;
line-height: 24px;
}

/* 코막힘 신호 */
.nos-recommend {
padding: 60px 20px;
}

.nos-recommend-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 30px;
}

.nos-recommend-card-img {
height: 200px;
}

.nos-recommend-card-footer {
padding: 14px 10px;
}

.nos-recommend-card-name {
font-size: 16px;
line-height: 24px;
}

.nos-recommend-card-desc {
font-size: 12px;
line-height: 18px;
}

/* 방치된 위험 */
.nos-danger {
padding: 60px 20px;
}

.nos-danger-img {
aspect-ratio: 4 / 3;
border-radius: 14px;
margin-top: 30px;
}

.nos-danger-quote {
font-size: 26px;
line-height: 38px;
margin-top: 40px;
}

.nos-danger-desc {
font-size: 18px;
    line-height: 30px;
    margin-top: 20px;
}

/* 수술 설계 */
.nos-diag {
padding: 60px 20px;
}

.nos-diag-body {
margin-top: 30px;
}

.nos-diag-body figure {
height: 200px;
}

.nos-diag-img {
height: 200px;
}

.nos-diag-item {
padding: 16px 20px;
border-radius: 16px;
gap: 16px;
}

.nos-diag-item-title {
font-size: 18px;
line-height: 28px;
}

.nos-diag-item-desc {
font-size: 14px;
line-height: 22px;
}

.nos-diag-icon {
width: 32px;
height: 32px;
}

/* Full-Care 솔루션 — 세로 스택 */
.nos-feature {
padding: 60px 20px;
}

.nos-feature-grid {
flex-direction: column;
gap: 12px;
margin-top: 30px;
}

.nos-feature-card {
flex: none;
min-width: 0;
padding: 26px 22px;
}

.nos-feature-num {
font-size: 20px;
}

.nos-feature-card-title {
font-size: 22px;
line-height: 28px;
}

.nos-feature-card-desc {
font-size: 16px;
line-height: 24px;
}

/* 안심케어 프로세스 */
.nos-care {
padding: 60px 20px;
background: linear-gradient(to bottom, var(--background, #eaf3f8) 60%, #fff 60%);
}

.nos-care-steps {
grid-template-columns: 1fr 1fr;
gap: 24px 12px;
margin-top: 30px;
}

.nos-care-step-label {
font-size: 26px;
line-height: 40px;
}

.nos-care-step-img-wrap {
height: 160px;
}

.nos-care-step-name {
font-size: 22px;
}

.nos-care-step-desc {
font-size: 14px;
line-height: 22px;
}

/* FAQ */
.nos-faq {
padding: 60px 20px;
}
}

/* =================================================================
   이음이비인후과 — 축농증수술 콘텐츠 스타일 (최적화 버전)
   파일: sub3-1.css
================================================================= */

/* ── 공통 섹션 구조 ─────────────────────────────── */
.sns-sec-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  
  .sns-en-label {
    font-family: 'Libre Caslon Text';
    font-size: 22px;
    color: var(--point-color, #00a8c6);
    letter-spacing: 4.4px;
    line-height: 1;
    margin-bottom: 20px;
  }
  
  .sns-sec-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 56px;
    color: #111;
    letter-spacing: -1.68px;
    line-height: 72.8px;
    text-align: center;
    word-break: keep-all;
  }
  
  .sns-sec-title em {
    font-style: normal;
    color: var(--point-color, #00a8c6);
  }
  
  .sns-vline {
    display: block;
    width: 1px;
    height: 30px;
    background: #ddd;
    margin: 30px auto;
  }
  
  /* ── #1 인트로 ── */
  .sns-intro {
    padding: 100px 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  
  .sns-intro-heading {
    font-family: 'Noto Serif KR', serif;
    font-weight: 400;
    font-size: 50px;
    color: #222;
    text-align: center;
    line-height: 70px;
    letter-spacing: -2.5px;
    word-break: keep-all;
  }
  
  .sns-intro-sub {
    font-family: 'Pretendard', sans-serif;
    font-weight: 300;
    font-size: 26px;
    color: var(--font-1, #282828);
    text-align: center;
    line-height: 41.6px;
    letter-spacing: 0.52px;
    word-break: keep-all;
  }
  
  /* ── #2 히어로 ── */
  .sns-hero {
    padding: 0 200px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .sns-hero figure { width: 100%; margin: 0; }
  
  .sns-hero-img {
    width: 100%;
    aspect-ratio: 1520 / 480;
    object-fit: cover;
    border-radius: 30px;
    display: block;
  }
  
  /* ── #3 축농증 수술이란? ── */
  .sns-what {
    background: var(--main-color, #0a2a43);
    padding: 100px 200px;
  }
  
  .sns-what-body {
    display: flex;
    gap: 40px;
    align-items: center;
    width: 100%;
  }
  
  .sns-what-left { flex: 1; }
  
  .sns-what-eyebrow {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 30px;
    color: var(--point-color, #00a8c6);
    margin-bottom: 20px;
    display: block;
  }
  
  .sns-vline-left {
    display: block;
    width: 1px;
    height: 30px;
    background-color: #ddd;
    margin-bottom: 30px;
  }
  
  .sns-what-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 56px;
    color: #fff;
    line-height: 72.8px;
    margin-bottom: 30px;
  }
  
  .sns-what-desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    color: #fff;
    line-height: 32px;
  }
  
  .sns-what-desc em { color: var(--point-color, #00a8c6); font-style: normal; }
  
  .sns-what-cards {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    list-style: none;
    padding: 0;
  }
  
  .sns-what-card {
    background: var(--point-color, #00a8c6);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    gap: 40px;
  }
  
  .sns-what-card-icon { width: 50px; height: 50px; flex-shrink: 0; }
  
  .sns-what-card-info { display: flex; flex-direction: column; gap: 10px; }
  
  .sns-what-card-label { font-weight: 700; font-size: 26px; color: #fff; }
  
  .sns-what-card-value { font-size: 20px; color: #fff; margin: 0; }
  
  /* ── #4 왜 수술적 치료가 필요한가요? ── */
  .sns-why { padding: 100px 200px; }
  
  .sns-why-body { display: flex; gap: 40px; width: 100%; }
  
  .sns-why-body figure { width: calc(50% - 20px); margin: 0; }
  
  .sns-why-img { width: 100%; border-radius: 20px; object-fit: cover; height: 100%; }
  
  .sns-why-cards { display: flex; flex-direction: column; gap: 20px; flex: 1; justify-content: center; }
  
  .sns-why-card { border: 1px solid #dadada; border-radius: 20px; padding: 20px 40px; }
  
  .sns-why-card-title { font-weight: 700; font-size: 26px; color: var(--sub-color, #0f4c81); margin-bottom: 6px; display: block; }
  
  .sns-why-card-desc { font-size: 18px; line-height: 32px; color: #282828; margin: 0; }
  
  /* ── #5 축농증 수술 권장 신호 ── */
  .sns-recommend { background: #eaf3f8; padding: 100px 200px; }
  
  .sns-recommend-grid { display: flex; gap: 25px; width: 100%; list-style: none; padding: 0; }
  
  .sns-recommend-card { flex: 1; border-radius: 20px; overflow: hidden; }
  
  .sns-recommend-card-img { width: 100%; aspect-ratio: 355 / 340; object-fit: cover; }
  
  .sns-recommend-card-footer {
    background: linear-gradient(to right, #0f4c81, #0a2a43);
    padding: 20px 0;
    text-align: center;
    min-height: 110px;
  }
  
  .sns-recommend-card-name { font-size: 26px; color: #fff; font-weight: 700; display: block; }
  
  .sns-recommend-card-desc { font-size: 18px; color: #fff; line-height: 1.4; margin-top: 5px; }
  
  /* ── #6 방치된 염증 위험성 ── */
  .sns-danger { background: #f1f1f1; padding: 100px 200px; text-align: center; }
  
  .sns-danger-img { width: 100%; border-radius: 30px; }
  
  .sns-danger-quote {
    font-family: 'Noto Serif KR', serif;
    font-size: 34px;
    color: #6a96af;
    margin: 40px 0 20px;
    line-height: 1.7;
  }
  
  .sns-danger-desc { font-size: 20px; line-height: 36px; color: #282828; }
  
  /* ── #7 수술 설계 (기존 sns-diag를 cmn-treat로 통합) ── */
  .cmn-treat { padding: 100px 200px; }
  
  .cmn-sec-heading .cmn-en-label {
    font-size: 22px;
    color: var(--point-color, #00a8c6);
    text-align: center;
    display: block;
    margin-bottom: 10px;
  }
  
  .cmn-vline { display: block; width: 1px; height: 30px; background: #ddd; margin: 30px auto; }
  
  .cmn-treat-body { display: flex; gap: 40px; margin-top: 50px; }
  
  .cmn-treat-img { flex: 1; border-radius: 20px; width: 100%; }
  
  .cmn-treat-list { flex: 1; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 20px; }
  
  .cmn-treat-item {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px 40px;
    border-radius: 500px;
    border: 1px solid #dadada;
    background: #f5f5f5;
  }
  
  .cmn-treat-item.treat-item--active { background: #0f4c81; border-color: #0f4c81; color: #fff; }
  
  .cmn-treat-item.treat-item--active .treat-item-desc { color: #eaf3f8; }
  
  .cmn-treat-icon { width: 40px; flex-shrink: 0; }
  
  .cmn-treat-item-txt { display: flex; flex-direction: column; }
  
  .treat-item-name { font-size: 24px; font-weight: 700; }
  
  .treat-item-desc { font-size: 18px; }
  
  /* ── #8 Full-Care 수술 ── */
  .sns-feature { background: #0f4c81; padding: 100px; }
  
  .sns-feature .sns-sec-title { color: #fff; }
  
  .sns-feature-grid { display: flex; gap: 10px; width: 100%; }
  
  .sns-feature-card { background: #fff; border-radius: 20px; padding: 40px; flex: 1; }
  
  .sns-feature-num { font-size: 26px; color: #0a2a43; display: block; margin-bottom: 10px; }
  
  .sns-feature-card-title { font-size: 36px; font-weight: 700; color: #0a2a43; line-height: 1.2; margin-bottom: 15px; display: block; }
  
  .sns-feature-card-desc { font-size: 20px; color: #282828; line-height: 1.6; }
  
  .sns-feature-sub-list { list-style: none; padding: 0; margin-top: 20px; }
  
  .sns-feature-sub-item { display: flex; gap: 16px; margin-bottom: 10px; }
  
  .sns-feature-sub-item-label { font-weight: 700; font-size: 20px; width: 160px; flex-shrink: 0; }
  
  .sns-feature-sub-item-desc { font-size: 18px; }
  
  /* ── 반응형 최적화 (주요 포인트) ── */
  @media (max-width: 1400px) {
    .sns-intro, .sns-what, .sns-why, .sns-recommend, .sns-danger, .cmn-treat { padding: 80px 100px; }
    .sns-feature-card-title { font-size: 28px; }
  }
  
  @media (max-width: 1024px) {
    .sns-what-body, .sns-why-body, .cmn-treat-body, .sns-feature-grid { flex-direction: column; }
    .sns-why-body figure, .cmn-treat-img { width: 100%; }
    .sns-recommend-grid { display: grid; grid-template-columns: 1fr 1fr; }
    .sns-intro, .sns-what, .sns-why, .sns-recommend, .sns-danger, .cmn-treat { padding: 60px 40px; }
  }
  
  @media (max-width: 767px) {
    .sns-intro-heading { font-size: 30px; line-height: 1.4; }
    .sns-sec-title { font-size: 26px; line-height: 1.2;}
    .sns-what-cards, .sns-recommend-grid { grid-template-columns: 1fr; }
    .cmn-treat-item { border-radius: 20px; padding: 20px; }
    .sns-feature-card { padding: 30px 20px; }
    .sns-feature-sub-item { flex-direction: column; gap: 5px; }

    .sns-intro, .sns-what, .sns-why, .sns-recommend, .sns-danger, .cmn-treat {
        padding: 60px 20px;
    }

    .cmn-treat-body {
        display: flex;
        gap: 40px;
        margin-top: 0;
    }

    .sns-what-eyebrow {
        font-family: 'Pretendard', sans-serif;
        font-weight: 500;
        font-size: 24px;
        color: var(--point-color, #00a8c6);
        margin-bottom: 20px;
        display: block;
      }
      
      .sns-vline-left {
        display: block;
        width: 1px;
        height: 30px;
        background-color: #ddd;
        margin-bottom: 30px;
      }
      
      .sns-what-title {
        font-family: 'Pretendard', sans-serif;
        font-weight: 600;
        font-size: 37px;
        color: #fff;
        line-height: 1.3;
        margin-bottom: 30px;
      }

      .sns-intro-sub {
        font-family: 'Pretendard', sans-serif;
        font-weight: 300;
        font-size: 24px;
        line-height: 1.5;
    }

    .sns-hero {
        display: block !important;
        width: 100% !important;
        padding: 0 20px 60px !important;
        box-sizing: border-box;
    }
    .sns-hero figure {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        flex: none !important;
    }
    .sns-hero-img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }
    .sns-hero .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        width: 100% !important;
        display: block !important;
    }

    .sns-danger-quote {
        font-family: 'Noto Serif KR', serif;
        font-size: 26px;
        color: #6a96af;
        margin: 40px 0 20px;
        line-height: 1.4;
    }
    
    .sns-en-label {
        font-family: 'Libre Caslon Text';
        font-size: 14px; 
    }

    .cmn-sec-heading .cmn-en-label {
        font-size: 14px; 
    }
  }