/* --- 서브 비주얼 영역 공통 --- */
.sub-visual {
    position: relative; /* 비디오와 오버레이를 내부에 띄우기 위한 기준점 */
    height: 100vh;
    width: 100%;
    overflow: hidden; /* 비디오가 튀어나가지 않게 제한 */
    display: flex; 
    align-items: center;      /* 세로 중앙 정렬 */
    justify-content: center;  /* 가로 중앙 정렬 (기존 padding-left 제거) */
    text-align: center;
}

/* 배경 비디오 스타일 (화면에 꽉 채우기) */
.sub-visual .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비디오 비율을 유지하면서 영역을 꽉 채움 (핵심) */
    z-index: 1;
}

.sub-visual > div {
	position: relative;
    z-index:3;
}

.sub-visual_short {
    height: 400px;
}



/* --- 서브 페이지별 배경 이미지 정리 (그룹화) --- */
.comm {
    background: url('http://www.eurekanet.co.kr/wj/07_comm/img/header_bg.jpg') no-repeat center center / cover;
}
.wound_01 {
    background:url('../03_wound/img/header_bg_1.jpg') no-repeat center center / cover;
}
.wj {
    background: url('http://www.eurekanet.co.kr/wj/01_wj/img/header_bg.jpg') no-repeat center center / cover;
}
				
	
/* --- 텍스트 스타일 (첨부 이미지에 맞춰 흰색 계열로 변경) --- */
.sub-visual h2 { 
    font-size: 4rem; /* 디자인에 맞춰 조절 가능 (예: 70px) */
    color: #fff; /* var(--color-dark)에서 흰색으로 변경 */
    font-weight: 600; 
    line-height: 1.4;
    font-family: 'Noto Serif KR', serif; 
    margin-top:80px;    
}



/* 첨부 이미지에 있는 '타이틀 아래 세로선' 디자인을 추가했습니다. */
.sub-visual .vertical-line {
    width: 1px;
    height: 60px; /* 선 길이 */
    background-color: rgba(255, 255, 255, 0.7); /* 반투명한 흰색 선 */
    border: none;
    margin: 50px auto; /* 위아래 여백 20px, 가로 중앙 정렬 */
}

.sub-visual .main-desc {
    font-size: 20px;
    color: #fff; /* 흰색으로 변경 */
    font-weight: 400;
    line-height: 1; 
}
.sub-visual .main-desc b {
    font-weight: 600;
}

.sub-visual h2, 
.sub-visual .main-desc {
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* 오버레이가 없는 대신 그림자를 살짝 진하게 */
}
.sub-visual_short h2{
	font-family: 'Noto Snas KR'; 
	text-shadow:0 0 0 ;
	}
	
/* 공통 섹션 스타일 */
section { padding: 100px 5%; overflow: hidden; }

/* --- 공통 서브 섹션 설정 --- */
.sub-section { padding: 80px 0; }
.bg-light { background-color: var(--color-bg-light); }
.inner-wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }

/* 섹션 공통 타이틀 */
.sec-title {
    font-size: 50px; font-weight: 700; color: #222;
    margin-bottom: 50px; 
}
.sec-title .point-label {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 4px 15px;
    border-radius: 30px;
    margin-bottom: 15px;
    font-family: 'Pretendard', sans-serif; /* 라벨은 고딕 계열이 깔끔합니다 */
    vertical-align: middle;
}

/* 1. 소개 영역 */
.intro-image img { max-width: 100%; margin-bottom: 30px; }
.intro-text {
	width:1000px; 
	font-size:20px; 
	line-height: 1.8; 
	color: #222;
	margin:0 auto;
	word-break: keep-all;       /* 한글, 한자, 일어 등 CJK 문자를 단어 단위로 줄바꿈 */
    overflow-wrap: break-word;
	}

.intro-text_wj { 
	font-size:20px; 
	line-height: 1.8; 
	color: #222; 
	}
.intro-text_wj span{
	display:block;
	text-align:center;
	font-family:Noto Serif KR;
	font-size:40px;
	font-weight:700;
	line-height:1.5;
	margin-bottom:40px;
	color:var(--color-primary);
	}
	
.intro-text_wjmap{
	width:900px;
	height:auto;
	margin:0 auto 80px auto;
	overflow:hidden;
	}

.traffic-guide-box {
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 50px; /* 지하철 영역과 버스 영역 사이의 넉넉한 간격 */
}


.traffic-row {
    display: flex;
    align-items: flex-start; /* 아이템들이 많아져도 상단 기준으로 나열 */
    gap: 40px; /* 좌측 아이콘 묶음과 우측 텍스트 사이의 간격 */
}


.traffic-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 110px; /* 좌측 고정 영역 확보 */
    flex-shrink: 0;
}


.traffic-type .icon-circle {
    width: 76px;
    height: 76px;
    background-color: var(--color-primary, #bd846b); 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.traffic-type .icon-circle .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-size: 38px;
}

.traffic-type strong {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}

.traffic-info {
    display: flex;
    flex-direction: column;
    gap: 16px; 
    flex-grow: 1;
    padding-top: 10px; 
}

/* 노선 한 줄 구조 (배지 + 설명 텍스트) */
.info-item {
    display: flex;
    align-items: center;
    gap: 20px; /* 배지와 텍스트 사이의 여백 */
}

/* 공통 배지 기틀 */
.traffic-info .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 15px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    min-width: 85px; /* 배지들의 가로 시작점을 맞추기 위한 고정 최소너비 */
    box-sizing: border-box;
    white-space: nowrap;
}


.badge.bg-line1      { background-color: #395bae; } /* 1호선 파란색 */
.badge.bg-suin       { background-color: #ffca28; } /* 수인분당선 노란색 */
.badge.bg-bus-local  { background-color: #53b93a; } /* 지선버스 초록색 */
.badge.bg-bus-main   { background-color: #6f83ea; } /* 간선버스 연보라/퍼플블루 */
.badge.bg-bus-seat   { background-color: #2d9cdb; } /* 좌석버스 스카이블루 */

/* 안내 텍스트 */
.traffic-info .info-text {
    font-size: 16px;
    color: #000;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    word-break: keep-all;
}



/* 수술 정보 리스트  */
.info-flex-list {
    display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;
}
.info-flex-list li {
    flex: 1; /* li 개수에 맞춰 자동으로 너비가 조절 */
    min-width: 180px; /* 너무 좁아지지 않게 최소 너비 설정 */
    max-width:220px;
    height:170px;
    text-align: center; padding-top: 20px;
    border: 1px solid var(--color-primary); /* 상단 라인 */
    border-radius:8px;
}
.info-flex-list .icon {
    font-size: 55px; 
    color: var(--color-primary); 
    margin-bottom: 10px; 
    display: block;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.info-flex-list strong {
    font-size:16px; color:  var(--color-primary); display: block; margin-bottom: 10px;
}
.info-flex-list p { font-size: 16px;font-weight:500; color: #222; line-height: 1.4; }
.info-flex-list p span{
	font-size:14px;
	font-weight:300;
	}
.info-flex-comment{
	text-align:center;
	font-size:14px;
	font-style:italic;
	color:#888;
	line-height:1;
	margin-top:20px;
	
	}

/* 3. 유연한 KEY POINT 리스트 (Flex) */
.keypoint-flex-list {
    display: flex; justify-content: center; flex-wrap: wrap;
}
.keypoint-flex-list li {
    flex: 1; min-width: 200px; text-align: center;
    padding: 0 30px;
    border-right: 1px solid #bd846b; /* 세로선 */
}
/* 마지막 요소는 우측 세로선을 없앱니다 */
.keypoint-flex-list li:last-child { border-right: none; }

.keypoint-flex-list .icon {
    font-size:60px; color: var(--color-primary); margin-bottom: 15px; display: block;
}
.keypoint-flex-list .lifting_01 {
    font-size:60px; color: var(--color-primary); margin-bottom: 15px; display: block;
    background:url(../05_surgery/img/lifting_01_icon_1.png) center center no-repeat;
    height:60px;
}

.keypoint-flex-list strong {
    font-size: 25px; color: #222; display: block; margin-bottom: 15px;
}
.keypoint-flex-list p { font-size: 16px; color: #222; line-height: 1.6; word-break: keep-all; }

/* 4. 주요 종양 카드 리스트 */
.tumor-card {
    display: flex; 
    background: #f2f4f4; 
    border-radius: 15px; 
    overflow: hidden; 
    margin-bottom: 30px; 
    align-items: center;    
    scroll-margin-top: 120px;
}
.tumor-card .img-box { 
	width: 35%; 
	flex-shrink: 0;
	padding: 50px; 
	}
.tumor-card .img-box img { 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	display: block; 
  border-radius: 10px;
	}
.tumor-card .txt-box { 
	padding: 50px 50px 50px 0; 
  width: 65%;
	}
.tumor-card .txt-box h4 { font-size:30px; font-weight: 700; color: #222; margin-bottom: 15px; }
.tumor-card .txt-box h4 span{ font-weight: 400;}
.tumor-card .txt-box .sub-tit { font-size: 20px; color: var(--color-primary); margin: 20px 0 10px 0; font-weight: 600;}
.tumor-card .txt-box .desc { font-size: 18px; color: #222; line-height: 1.6; letter-spacing:-0.03em; }

/* 5. 차별점 (좌측 텍스트, 우측 Swiper) */
.diff-wrap { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.diff-title-area { width: 30%; }
.diff-title-area p { font-size: 18px; color: #555; margin-bottom: 10px; }
.diff-title-area h3 { font-size: 40px; font-weight: 700; color: #222; line-height: 1.3;}

.diff-swiper-area { width: 65%; position: relative; }
.diff-slide-item {
    height: 400px; border-radius: 15px; overflow: hidden;
    background-size: cover; background-position: center; position: relative;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
/* 이미지 위를 살짝 어둡게 (글자 가독성) */
.diff-slide-item::before {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.4);
}
.diff-slide-item .text-overlay { position: relative; z-index: 2; color: #fff; padding: 20px; }
.diff-slide-item .text-overlay h4 { font-size: 30px; font-weight: 600; margin-bottom: 15px; }
.diff-slide-item .text-overlay p { font-size: 18px; font-weight: 300; }

/* 차별점 Swiper 커스텀 네비게이션 버튼 */
.diff-prev, .diff-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px; border-radius: 50%; background: var(--color-primary);
    border: none; color: #fff; cursor: pointer; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.diff-prev { left: -25px; } /* 왼쪽 바깥으로 살짝 빼기 */
.diff-next { right: -25px; }



/* --- 1. 안면열상이란? (좌우 분할) --- */
.laceration-intro {
    display: flex;
    align-items: center; /* 세로 중앙 맞춤 */
    gap: 60px; /* 좌측 텍스트와 우측 이미지 사이 간격 */
}
.laceration-intro .text-area { width: 50%; }
.laceration-intro .img-area { width: 50%; }
.laceration-intro .img-area img { width: 100%; border-radius: 10px; display: block; }

.laceration-intro .point-text {
    font-size:30px;
    font-weight: 600;
    line-height: 1.4;
    color: #222;
    margin-bottom: 20px;
    font-family:Noto Serif KR;
}
.laceration-intro .point-text span{
	color: var(--color-primary);
	font-weight:700;
	}
.laceration-intro .desc {
    font-size:20px;
    color: #222;
    line-height: 1.7;
}

/* 좌측 하단 특징 박스 */
.feature-boxes {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}
.feature-boxes .box {
    flex: 1; /* 반반씩 나눠가짐 */
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
}
.feature-boxes .box h5 {
    font-size:20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-primary);
}
.feature-boxes .box p {
    font-size: 16px;
    color: #222;
    line-height: 1.6;
}

/* --- 2. 안면열상의 주요 원인 (2x2 그리드) --- */
.cause-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1:1 비율로 2열 배치 */
    gap: 30px; /* 아이템 사이 간격 */
}
.cause-item {
    display: flex;
    background-color: #f5f5f5; /* 연한 회색 배경 */
    border-radius: 10px;
    overflow: hidden;
}
.cause-item .img-box {
    width: 45%; /* 이미지 너비 */
    flex-shrink: 0;
}
.cause-item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cause-item .txt-box {
    width: 55%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 세로 중앙 정렬 */
}
.cause-item .txt-box h4 {
    font-size:30px;
    font-weight: 700;
    color: #222;
    margin-bottom: 15px;
}
.cause-item .txt-box p {
    font-size: 18px;
    color: #222;
    line-height: 1.5;
    word-break: keep-all; /* 단어 단위로 줄바꿈 */
}

/* --- 스텝 박스 --- */
.step-list-comment{
	text-align:center;
	font-size:18px;
	font-weight:400;
	line-height:1;
	}
.step-list {
    display: flex;
    gap: 20px;
    margin-top: 30px; 
}
.step-card {
	width:300px;
	height:350px;
    flex: 1;
    position: relative;
    border: 1px solid  var(--color-primary);
    border-radius: 10px;
    padding: 50px 20px 40px; /* 위쪽 패딩을 넉넉히 줘서 뱃지와 아이콘 안 겹치게 */
    text-align: center;
    background: #fff;
}
.step-card-sm{
	height:280px;
	}

/*  스텝 뱃지 */
.step-badge {
    position: absolute;
    top: -18px; 
    left: 50%;
    transform: translateX(-50%); /*  가운데 정렬 */
    background-color: var(--color-primary);
    color: #fff;
    font-family:Montserrat;
    font-size: 25px;
    font-weight: 200;
    padding: 6px 30px;
    border-radius: 30px; /* 캡슐 모양 */
    white-space: nowrap; /* 글자 줄바꿈 방지 */
}
.step-card .icon {
    font-size: 65px;
    color: var(--color-primary);
    margin-bottom: 20px;
    display: block;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.step-card h4 {
    font-size: 25px;
    font-weight: 700;
    color: #222;
    margin-bottom: 15px;
}
.step-card p {
    font-size: 16px;
    color: #222;
    line-height: 1.6;
    word-break: keep-all;
}

.step-card-img {
    flex: 1;
    position: relative;
    width: 300px;
    height: 410px; 
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    background: #fff;
    text-align: center;
    box-sizing: border-box;    
    padding: 55px 0 35px 0; 
    /*overflow: hidden;*/
}
.step-card-img2{
	height: 480px; 
	}
	
.step-card-img3{
	height:850px; 
	}
.step-card-img4{
	height:700px; 
	}	
	
.step-card-img .step-img-box {
    width: 95%;
    margin: 0 auto 20px auto; 
    border-radius: 6px;   
    overflow: hidden;
}

.step-card-img .step-img-box img {
    display: block;
    width: 100%;
    height: auto; 
    object-fit: cover;
}

.step-card-img h4 {
    font-size: 25px;
    font-weight: 700;
    color: #222;
    margin-bottom: 15px;
    padding: 0 20px; 
}

.step-card-img p {
    font-size: 16px;
    color: #222;
    line-height: 1.6;
    word-break: keep-all;
    padding: 0 20px; 
}


.zigzag-wrap {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    /* 만약 박스 전체에 그림자를 주고 싶다면 아래 코드를 활성화하세요 */
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.05); */
}


.zigzag-row {
    display: flex;
    align-items: stretch; /* 텍스트 높이와 이미지 높이를 동일하게 맞춤 (매우 중요) */
}


.zigzag-row:nth-child(even) {
    flex-direction: row-reverse;
}

/* 좌/우 영역 반반씩 나누기 */
.zigzag-row .img-box,
.zigzag-row .txt-box {
    width: 50%;
}

/* 이미지 영역 꽉 채우기 */
.zigzag-row .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율을 유지하면서 빈틈없이 채움 */
    display: block;
}

/* 텍스트 영역 스타일 */
.zigzag-row .txt-box {
    padding: 80px 5%; /* 상하 80px 패딩으로 전체 행의 높이를 넉넉하게 확보 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 텍스트를 세로 중앙에 배치 */
    box-sizing: border-box;
}

/* 타이틀 (갈색 포인트 컬러) */
.zigzag-row .txt-box h4 {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-primary); 
    margin-bottom: 15px;
}

/* 짧은 밑줄 선 */
.zigzag-row .txt-box .short-line {
    width: 40px;
    height: 3px;
    background-color: var(--color-primary);
    border: none;
    margin: 0 0 25px 0; /* 항상 왼쪽 정렬 */
}

/* 본문 설명 */
.zigzag-row .txt-box p {
    font-size: 18px;
    color: #222;
    line-height: 1.6;
    word-break: keep-all; /* 단어 단위로 줄바꿈되어 깔끔하게 떨어짐 */
}


.feature-card-wrap {
    display: flex;
    flex-wrap: wrap; /* 카드가 영역을 넘어가면 자동으로 다음 줄로 넘김 */
    justify-content: center; /* 가운데 정렬 (윗줄 3개, 아랫줄 2개 배치용) */
    gap: 30px; /* 카드 사이의 가로, 세로 간격 */
}

.f-card {
    background-color: #f7f7f7; /* 연한 회색 배경 */
    border-radius: 15px;
    padding: 50px 30px;
    text-align: center;
    /* 3개씩 배치하기 위해 너비를 약 33%로 설정 (여백 30px을 고려하여 calc 사용) */
    width: calc(33.333% - 20px); 
    min-width: 320px; /* 창이 좁아지면 너무 작아지지 않게 방어 */
    box-sizing: border-box;
    word-break: keep-all;
}
.f-card2 {
    width: calc(22.2% - 20px); 
    min-width: 220px; /* 창이 좁아지면 너무 작아지지 않게 방어 */
}
.f-card h4 {
    font-size: 30px;
    font-weight: 700;
    color: #222;
    margin-bottom: 25px;
}

.f-card p {
    font-size: 18px;
    color: #222;
    line-height: 1.6;
}


.split-section {
    display: flex;
    width: 100%; /* 브라우저 화면을 꽉 채움 */
    /* inner-wrap을 쓰지 않고 전체를 씁니다 */
    padding-left: 0 !important; 
    padding-right: 0 !important;
}

.split-section_filler {
    width: 100%;
		height:850px;
}

/* 좌/우 각각 50%씩 영역 차지 */
.split-img, 
.split-txt {
    width: 50%;
}

/* 좌측 이미지 꽉 채우기 */
.split-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 우측 배경색 및 정렬 */
.bg-beige {
    background-color: #f4f1eb; /* 첨부 이미지에 맞는 따뜻한 베이지색 */
}

.split-txt {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    padding: 80px 8%; /* 텍스트가 가장자리에 붙지 않도록 넉넉한 여백 부여 */
    box-sizing: border-box;
}

/* 체크 리스트 스타일 */
.check-list li {
    display: flex;
    align-items: flex-start; /* 아이콘과 텍스트의 윗줄을 맞춤 */
    margin-bottom: 25px;
}

.check-list li:last-child {
    margin-bottom: 0;
}

/* 구글 머티리얼 아이콘 체크 마크 설정 */
.check-list .icon {
    font-size: 25px;
    color: var(--color-primary); /* 포인트 컬러(갈색) 적용 */
    margin-right: 15px;
    margin-top: 2px; /* 텍스트와 시각적인 높이를 맞추기 위한 미세 조정 */
    /* 가변 폰트 속성으로 얇고 세련된 체크 모양 유지 */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.check-list p {
    font-size: 17px;
    color: #222;
    line-height: 1.5;
    word-break: keep-all; /* 단어 단위로 줄바꿈 */
}


/*오타모반*/
.nevus-direction-wrap {
    text-align: center;
    color: #222;
}

.nevus-direction-wrap .desc-text {
    font-size: 18px;
    line-height: 1.8; 
    margin-bottom: 0;
}

.nevus-direction-wrap .highlight {
    font-weight: 600;
    color: var(--color-primary);
}

.nevus-direction-wrap .schedule-text {
    margin-top: 40px; 
}

.nevus-direction-wrap .clinic-badge {
    display: inline-flex;  /* 텍스트 길이에 맞춰 유연하게 늘어나도록 설정 */
    align-items: center;    /* 세로 중앙 정렬 플렉스 마법 공식 */
    justify-content: center;/* 가로 중앙 정렬 */
    background-color: var(--color-primary);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;    
    padding: 15px 50px;  
    margin: 50px auto 0 auto;
    max-width: 90%;        
    box-sizing: border-box;
    word-break: keep-all;  
}


.degeneration-warning {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left; 
    background-color: #fdf8f6; 
    border: 1px solid #ebdbd3;
    border-radius: 15px;
    padding: 40px 50px;
    margin: 50px auto 0; 
    max-width: 900px;
    gap: 30px;
    box-sizing: border-box;
}

.degeneration-warning .icon {
    font-size: 60px;
    color: #d95a53;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; 
}

/* 강조 타이틀 */
.degeneration-warning .text-box h4 {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
}

/* 설명 본문 */
.degeneration-warning .text-box p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all; /* 단어 단위 줄바꿈 */
}

/* 가장 중요한 위험 경고 단어 강조 */
.degeneration-warning .text-box strong {
    color: #d95a53; 
    font-weight: 600;
}

.compare-table-wrap {
    max-width: 1000px; /* 표가 너무 길어지지 않게 제한 */
    margin: 40px auto 0;
    background: #fff;
    border-radius: 15px;
    overflow: hidden; /* 모서리 둥글기를 뚫고 나오지 못하게 함 */
    overflow-x: auto; 
}


.compare-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    text-align: center; 
}

.compare-table th {
    background-color: #fff;
    color: #222;
    font-size: 18px;
    font-weight: 700;
    padding: 20px;
    border-bottom: 2px solid #ddd;
}

.compare-table td {
    padding: 25px 20px;
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    word-break: keep-all;
}

.compare-table tbody tr:last-child td {
    border-bottom: none;
}

.compare-table .disease-name {
    font-weight: 700;
    color: #222;
    background-color: #fafafa;
}

.compare-table .text-left {
    text-align: left;
}

.compare-table .highlight-row td {
    background-color: #fdf8f6;
    color: #222;
}
.compare-table .highlight-row .disease-name {
    color: var(--color-primary); 
}


.text-card {
    display: flex; 
    align-items: center; /* 좌우 컨텐츠의 세로 중앙 정렬 */
    background: #f5f5f5; /* 시안에 맞춘 연한 회색 배경 */
    border-radius: 15px; 
    padding: 50px 60px;  /* 상하좌우 넉넉한 여백 부여 */
    margin-bottom: 20px; /* 카드 사이의 간격 */
    box-sizing: border-box;
}

.text-card .title-area {
    width: 30%; 
    flex-shrink: 0; 
}
.text-card .title-area h4 {
    font-size: 30px; 
    font-weight: 700; 
    color: #222; 
    margin: 0; 
}

.text-card .desc-area {
    width: 70%; 
    padding-left: 40px; 
}

.text-card .desc-area p {
    font-size: 18px; 
    color: #444; 
    line-height: 1.6; 
    margin: 0; 
    word-break: keep-all; 
}


.benefit-list {
    margin-top: 40px;
}

.benefit-list li {
    margin-bottom: 30px;
}

.benefit-list li:last-child {
    margin-bottom: 0; 
}

/* 장점 소제목 (포인트 컬러 적용) */
.benefit-list h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary); 
    margin-bottom: 10px;
}

/* 장점 설명 텍스트 */
.benefit-list p {
    font-size: 18px;
    color: #222;
    line-height: 1.5;
    word-break: keep-all;
}


.filler-section {
    background-color: #f2f4f4; /* 전체 배경은 깔끔한 흰색 */
    padding:0;
}

.filler-list {
    margin-top: 30px;
}
.filler-list li {
    display: flex;
    align-items: flex-start;
    background-color: #fff; 
    padding: 20px 25px;
    border-radius: 8px;
    margin-bottom: 12px;
}
.filler-list li:last-child {
    margin-bottom: 0;
}

/* 시술 부위 이름*/
.filler-list .part-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary); /* 타이틀 갈색 톤 */
    width: 120px;
    flex-shrink: 0;
    display: block;
    line-height: 1.4;
}
/* 다크서클 밑 소괄호 텍스트 크기 제어 */
.filler-list .part-title span {
    font-size: 13px;
    font-weight: 400;
    color: #777;
    display: block; /* 소괄호는 밑으로 떨어지게 처리 */
    margin-top: 2px;
}

/* 시술 부위 설명 */
.filler-list .part-desc {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    margin: 0;
    word-break: keep-all;
}



.nose-type-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}


.nose-type-item {
    margin-bottom: 80px;
}
.nose-type-item:last-child {
    margin-bottom: 0;
}

.nose-type-item .type-title {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    text-align: left;
    margin-bottom: 25px;
    letter-spacing: -0.03em;
}

.nose-type-item .type-method-box {
    background-color: var(--color-primary, #bd846b); 
    border-radius: 60px;
    padding: 30px 45px;
    text-align: left;
    color: #fff;
    margin-bottom: 35px;
    box-shadow: 0 4px 15px rgba(189, 132, 107, 0.1);
}

.nose-type-item .type-method-box h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.nose-type-item .type-method-box p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all; /* 단어 단위 자동 줄바꿈 시스템 작동 */
    overflow-wrap: break-word;
}

.type-compare-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px; 
    width: 100%;
}

.type-compare-visual .img-box {
    flex: 1;
    max-width: 440px; 
    border-radius: 8px;
    overflow: hidden;
}

.type-compare-visual .img-box img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 중앙 연보라/브라운 계열의 대형 화살표 래퍼 */
.type-compare-visual .arrow-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.type-compare-visual .arrow-box .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-size: 60px; 
    color: var(--color-primary, #bd846b);
    font-weight: 200;
}


.doctor-profile-wrap {
    width: 100%;
    max-width: 1000px;
    margin: 50px auto;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center; /* 사진과 텍스트의 세로 중앙을 맞춥니다 */
    gap: 60px; /* 사진과 우측 텍스트 사이의 넉넉한 여백 */
}

/* 좌측 인물 사진 박스 */
.doctor-photo {
    flex: 0 0 45%; 
}
.doctor-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* 우측 텍스트 정보 박스 */
.doctor-info {
    flex: 1; 
    text-align: left;
}

.doctor-info .position {
    font-size: 16px;
    color: #555;
    margin-bottom: 5px;
    font-weight: 500;
}

.doctor-info .name {
    font-size: 42px; 
    font-weight: 800;
    color: #111;
    margin-bottom: 30px;
    letter-spacing: -0.05em;
    display: flex;
    align-items: baseline; 
}

.doctor-info .name .specialty {
    font-size: 22px;
    font-weight: 400;
    color: #555;
    margin-left: 10px;
    letter-spacing: -0.03em;
}


.doctor-info .history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.doctor-info .history-list li {
    position: relative;
    font-size: 16px;
    color: #333;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 10px; 
    padding-left: 15px; 
    word-break: keep-all;
}


.doctor-info .history-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px; 
    width: 4px;
    height: 4px;
    background-color: #333;
    border-radius: 50%; 
}