/* 유본한의원 홈페이지 스타일시트 */
/* 이 파일은 웹페이지를 예쁘게 꾸미는 역할을 해요. 마치 집을 인테리어하는 것처럼요! */

/* 기본 설정 - 모든 요소에 적용되는 기본 스타일이에요 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 한글 단어 단위 줄바꿈 설정 */
body, p, h1, h2, h3, h4, h5, h6, span, div, li, a {
    word-break: keep-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 문진표 페이지 스타일 */
.questionnaire-hero {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    padding: 120px 0 80px;
}

.questionnaire-hero .hero-text h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.questionnaire-hero .hero-text h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    font-weight: 400;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.questionnaire-hero .hero-text p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* 문진표 안내 섹션 */
.questionnaire-intro {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.questionnaire-benefits {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-top: 2rem;
}

.questionnaire-benefits h4 {
    color: #4CAF50;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.questionnaire-benefits ul {
    list-style: none;
    padding: 0;
}

.questionnaire-benefits li {
    padding: 0.5rem 0;
    position: relative;
    padding-left: 1.5rem;
}

.questionnaire-benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: bold;
}

/* 문진표 폼 스타일 */
.questionnaire-form {
    padding: 80px 0;
    background: white;
}

.form-content {
    max-width: 800px;
    margin: 0 auto;
}

.form-section {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.form-section h3 {
    color: #4CAF50;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-section h3 i {
    font-size: 1.2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
    font-family: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* 작은 텍스트 영역을 위한 스타일 (월경 주기 등) */
.form-group textarea[rows="2"] {
    min-height: 60px;
}

/* 중간 크기 텍스트 영역을 위한 스타일 (음주량, 커피 섭취량 등) */
.form-group textarea[rows="3"] {
    min-height: 80px;
}

/* 큰 텍스트 영역을 위한 스타일 (식단 정보 등) */
.form-group textarea[rows="4"] {
    min-height: 120px;
}

/* 라디오 버튼 스타일 */
.radio-group {
    display: flex;
    gap: 2rem;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 400;
}

.radio-label input[type="radio"] {
    width: auto;
    margin: 0;
}

/* 체크박스 스타일 */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 400;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    margin-top: 0.2rem;
}

.agreement-text {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* 제출 버튼 */
.form-submit {
    text-align: center;
    margin-top: 3rem;
}

.form-submit .btn {
    padding: 1rem 3rem;
    font-size: 1.1rem;
    font-weight: 500;
}

/* 문진표 제출 후 안내 섹션 */
.questionnaire-info {
    padding: 80px 0;
    background: #f8f9fa;
}

.info-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.info-item {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
}

.info-icon {
    width: 60px;
    height: 60px;
    background: #4CAF50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.info-icon i {
    font-size: 1.5rem;
    color: white;
}

.info-text h3 {
    color: #4CAF50;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.info-text p {
    color: #666;
    line-height: 1.6;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .questionnaire-hero .hero-text h1 {
        font-size: 2.5rem;
    }
    
    .questionnaire-hero .hero-text h2 {
        font-size: 1.5rem;
    }
    
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .radio-group {
        flex-direction: column;
        gap: 1rem;
    }
    
    .info-content {
        grid-template-columns: 1fr;
    }
    
    .form-section {
        padding: 1.5rem;
    }
}

/* HTML과 BODY 기본 설정 */
html {
    scroll-behavior: smooth; /* 페이지 내 링크를 부드럽게 이동하게 해요 */
}

body {
    font-family: 'Noto Sans KR', sans-serif; /* 한글 폰트를 사용해요 */
    line-height: 1.6; /* 글자 줄 간격을 설정해요 */
    color: #333; /* 글자 색상을 어두운 회색으로 해요 */
    background-color: #fff; /* 배경색을 흰색으로 해요 */
}

/* 컨테이너 - 내용을 가운데 정렬하고 너무 넓지 않게 제한해요 */
.container {
    max-width: 1200px; /* 최대 너비를 1200픽셀로 제한해요 */
    margin: 0 auto; /* 가운데 정렬해요 */
    padding: 0 20px; /* 좌우 여백을 20픽셀씩 줘요 */
}

/* 섹션 헤더 - 각 섹션의 제목 부분을 꾸미는 스타일이에요 */
.section-header {
    text-align: center; /* 글자를 가운데 정렬해요 */
    margin-bottom: 60px; /* 아래쪽 여백을 60픽셀 줘요 */
}

.section-header h2 {
    font-size: 2.5rem; /* 제목 글자 크기를 크게 해요 */
    font-weight: 700; /* 글자를 굵게 해요 */
    color: #2c5530; /* 한의원에 어울리는 녹색으로 해요 */
    margin-bottom: 15px; /* 제목과 부제목 사이 여백 */
}

.section-header p {
    font-size: 1.1rem; /* 부제목 글자 크기 */
    color: #666; /* 부제목 색상을 회색으로 해요 */
}

/* 헤더 부분 - 웹페이지 상단의 메뉴와 로고 부분이에요 */
.header {
    background-color: #fff; /* 배경색을 흰색으로 해요 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 그림자 효과를 줘요 */
    position: fixed; /* 화면 상단에 고정해요 */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* 다른 요소들 위에 보이게 해요 */
}

.header-content {
    display: flex; /* 요소들을 가로로 배치해요 */
    justify-content: space-between; /* 요소들 사이에 공간을 균등하게 분배해요 */
    align-items: center; /* 세로 방향으로 가운데 정렬해요 */
    padding: 15px 0; /* 위아래 여백을 15픽셀씩 줘요 */
}

/* 로고 부분 */
.logo a {
    text-decoration: none; /* 링크 밑줄을 없애요 */
    display: block; /* 블록 요소로 만들어요 */
}

.logo-img {
    height: 50px; /* 로고 이미지 높이를 50픽셀로 설정해요 */
    width: auto; /* 너비는 자동으로 조정해요 (비율 유지) */
    object-fit: contain; /* 이미지가 잘리지 않도록 해요 */
    transition: transform 0.3s ease; /* 호버 효과를 부드럽게 해요 */
}

.logo-img:hover {
    transform: scale(1.05); /* 마우스를 올렸을 때 살짝 크게 만들어요 */
}

/* 네비게이션 메뉴 */
.nav-list {
    display: flex; /* 메뉴 항목들을 가로로 배치해요 */
    list-style: none; /* 목록 점을 없애요 */
    gap: 30px; /* 메뉴 항목들 사이 간격 */
}

.nav-link {
    text-decoration: none; /* 밑줄을 없애요 */
    color: #333; /* 글자 색상 */
    font-weight: 500; /* 글자를 약간 굵게 해요 */
    transition: color 0.3s ease; /* 색상 변화를 부드럽게 해요 */
    position: relative; /* 밑줄 효과를 위한 위치 설정 */
}

.nav-link:hover {
    color: #2c5530; /* 마우스를 올렸을 때 녹색으로 변해요 */
}

.nav-link::after {
    content: ''; /* 가상 요소를 만들어요 */
    position: absolute; /* 절대 위치로 설정해요 */
    bottom: -5px; /* 아래쪽으로 5픽셀 이동해요 */
    left: 0; /* 왼쪽 정렬 */
    width: 0; /* 처음에는 너비가 0이에요 */
    height: 2px; /* 높이를 2픽셀로 해요 */
    background-color: #2c5530; /* 녹색 밑줄 */
    transition: width 0.3s ease; /* 너비 변화를 부드럽게 해요 */
}

.nav-link:hover::after {
    width: 100%; /* 마우스를 올렸을 때 밑줄이 나타나요 */
}

/* 모바일 메뉴 토글 버튼 - 모바일에서만 보여요 */
.mobile-menu-toggle {
    display: none; /* 기본적으로는 숨겨요 */
    flex-direction: column; /* 세로로 배치해요 */
    cursor: pointer; /* 마우스 커서를 손가락 모양으로 해요 */
}

.mobile-menu-toggle span {
    width: 25px; /* 선의 길이 */
    height: 3px; /* 선의 두께 */
    background-color: #333; /* 선의 색상 */
    margin: 3px 0; /* 위아래 여백 */
    transition: 0.3s; /* 변화를 부드럽게 해요 */
}

/* 모바일 메뉴 토글 버튼 활성화 상태 */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* 모바일 네비게이션 메뉴 */
.nav.active {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 20px 0;
    z-index: 1000;
}

.nav.active .nav-list {
    flex-direction: column;
    gap: 15px;
    text-align: center;
}

.nav.active .nav-link {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.nav.active .nav-link:last-child {
    border-bottom: none;
}

/* 메인 콘텐츠 영역 */
main {
    margin-top: 80px; /* 헤더 높이만큼 여백을 줘요 */
}

/* 히어로 섹션 - 첫 화면에 보이는 환영 메시지 부분이에요 */
.hero {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* 그라데이션 배경 */
    padding: 100px 0; /* 위아래 여백을 100픽셀씩 줘요 */
    min-height: 80vh; /* 최소 높이를 화면 높이의 80%로 해요 */
    display: flex; /* Flexbox를 사용해요 */
    align-items: center; /* 세로 방향으로 가운데 정렬해요 */
}

.hero-content {
    display: grid; /* 그리드 레이아웃을 사용해요 */
    grid-template-columns: 1fr 1fr; /* 두 개의 열로 나누어요 */
    gap: 60px; /* 열 사이 간격 */
    align-items: center; /* 세로 방향으로 가운데 정렬해요 */
}

.hero-text h2 {
    font-size: 3rem; /* 큰 제목 글자 크기 */
    font-weight: 700; /* 글자를 굵게 해요 */
    color: #2c5530; /* 녹색 */
    margin-bottom: 20px; /* 제목과 설명 사이 여백 */
    line-height: 1.2; /* 줄 간격을 좁게 해요 */
    word-break: keep-all; /* 한글 단어가 중간에 끊어지지 않도록 해요 */
    word-wrap: break-word; /* 긴 단어는 적절히 줄바꿈해요 */
}

.hero-text p {
    font-size: 1.2rem; /* 설명 글자 크기 */
    color: #666; /* 회색 */
    margin-bottom: 30px; /* 설명과 버튼 사이 여백 */
    line-height: 1.8; /* 줄 간격을 넓게 해요 */
}

/* 버튼 스타일 */
.btn {
    display: inline-block; /* 인라인 블록으로 해요 */
    padding: 15px 30px; /* 안쪽 여백 */
    text-decoration: none; /* 밑줄 제거 */
    border-radius: 50px; /* 모서리를 둥글게 해요 */
    font-weight: 600; /* 글자를 굵게 해요 */
    transition: all 0.3s ease; /* 모든 변화를 부드럽게 해요 */
    margin-right: 15px; /* 버튼들 사이 간격 */
    margin-bottom: 10px; /* 모바일에서 줄바꿈 시 여백 */
}

.btn-primary {
    background-color: #2c5530; /* 녹색 배경 */
    color: #fff; /* 흰색 글자 */
}

.btn-primary:hover {
    background-color: #1e3a22; /* 마우스 올렸을 때 더 진한 녹색 */
    transform: translateY(-2px); /* 살짝 위로 올라가요 */
    box-shadow: 0 5px 15px rgba(44, 85, 48, 0.3); /* 그림자 효과 */
}

.btn-secondary {
    background-color: transparent; /* 투명 배경 */
    color: #2c5530; /* 녹색 글자 */
    border: 2px solid #2c5530; /* 녹색 테두리 */
}

.btn-secondary:hover {
    background-color: #2c5530; /* 마우스 올렸을 때 녹색 배경 */
    color: #fff; /* 흰색 글자 */
    transform: translateY(-2px); /* 살짝 위로 올라가요 */
}

/* 이미지 플레이스홀더 - 실제 이미지가 들어갈 자리예요 */
.image-placeholder {
    background-color: #f8f9fa; /* 연한 회색 배경 */
    border: 2px dashed #dee2e6; /* 점선 테두리 */
    border-radius: 10px; /* 모서리를 둥글게 해요 */
    padding: 60px 20px; /* 안쪽 여백 */
    text-align: center; /* 글자를 가운데 정렬해요 */
    color: #6c757d; /* 회색 글자 */
}

.image-placeholder i {
    font-size: 3rem; /* 아이콘 크기 */
    margin-bottom: 15px; /* 아이콘과 글자 사이 여백 */
    color: #2c5530; /* 녹색 아이콘 */
}

/* 실제 이미지 스타일 */
.hero-img {
    width: 100%; /* 전체 너비 */
    height: 400px; /* 높이 */
    object-fit: cover; /* 이미지 비율을 유지하면서 영역에 맞춰요 */
    border-radius: 15px; /* 모서리를 둥글게 해요 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
}

/* 히어로 프로필 이미지 스타일 - 원본 그대로 */
.hero-profile-img {
    width: 100%; /* 전체 너비 */
    height: 500px; /* 높이 */
    object-fit: cover; /* 이미지 비율을 유지하면서 영역에 맞춰요 */
    border-radius: 20px; /* 모서리를 둥글게 해요 */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); /* 그림자 효과 */
    image-rendering: -webkit-optimize-contrast; /* 웹킷 브라우저에서 이미지 선명도 개선 */
    image-rendering: crisp-edges; /* 이미지 선명도 개선 */
    image-rendering: pixelated; /* 픽셀화된 이미지의 선명도 개선 */
    -webkit-backface-visibility: hidden; /* 웹킷 브라우저에서 이미지 깜빡임 방지 */
    backface-visibility: hidden; /* 이미지 깜빡임 방지 */
}



.facility-img {
    width: 100%; /* 전체 너비 */
    height: 250px; /* 높이 */
    object-fit: cover; /* 이미지 비율을 유지하면서 영역에 맞춰요 */
    border-radius: 10px; /* 모서리를 둥글게 해요 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
    margin-bottom: 15px; /* 이미지와 글자 사이 여백 */
}

.facility-image {
    text-align: center; /* 글자를 가운데 정렬해요 */
}

.facility-image p {
    font-weight: 600; /* 글자를 굵게 해요 */
    color: #2c5530; /* 녹색 */
    margin: 0; /* 여백 제거 */
}

/* 원장소개 섹션 */
.about {
    padding: 100px 0; /* 위아래 여백 */
    background-color: #fff; /* 흰색 배경 */
}

.about-content {
    display: flex; /* Flexbox 레이아웃으로 변경해요 */
    flex-direction: column; /* 세로 방향으로 배치해요 */
    align-items: center; /* 가로 방향으로 가운데 정렬해요 */
    text-align: center; /* 텍스트를 가운데 정렬해요 */
    max-width: 800px; /* 최대 너비를 제한해요 */
    margin: 0 auto; /* 가운데 정렬해요 */
}

.about-text h3 {
    font-size: 2.2rem; /* 원장님 이름 글자 크기를 조금 더 크게 해요 */
    color: #2c5530; /* 녹색 */
    margin-bottom: 25px; /* 이름과 설명 사이 여백을 조금 더 줘요 */
}

.about-text p {
    font-size: 1.1rem; /* 설명 글자 크기 */
    color: #666; /* 회색 */
    margin-bottom: 30px; /* 설명과 학력 사이 여백 */
    line-height: 1.8; /* 줄 간격 */
}

.credentials, .philosophy {
    margin-bottom: 30px; /* 섹션들 사이 여백 */
}

.credentials h4, .philosophy h4 {
    font-size: 1.3rem; /* 소제목 글자 크기 */
    color: #2c5530; /* 녹색 */
    margin-bottom: 15px; /* 제목과 내용 사이 여백 */
}

.credentials ul {
    list-style: none; /* 목록 점 제거 */
}

.credentials li {
    padding: 8px 0; /* 위아래 여백 */
    color: #666; /* 회색 */
    position: relative; /* 가상 요소를 위한 위치 설정 */
    padding-left: 25px; /* 왼쪽 여백을 조금 더 줘요 */
    text-align: left; /* 텍스트는 왼쪽 정렬로 해요 */
}

.credentials li::before {
    content: '✓'; /* 체크 표시 */
    position: absolute; /* 절대 위치 */
    left: 0; /* 왼쪽 정렬 */
    color: #2c5530; /* 녹색 체크 표시 */
    font-weight: bold; /* 굵게 */
}

.philosophy p {
    font-style: italic; /* 기울임체 */
    color: #2c5530; /* 녹색 */
    font-size: 1.1rem; /* 글자 크기 */
    line-height: 1.6; /* 줄 간격 */
}

/* 진료과목 섹션 */
.treatments {
    padding: 100px 0; /* 위아래 여백 */
    background-color: #f8f9fa; /* 연한 회색 배경 */
}

.treatments-grid {
    display: grid; /* 그리드 레이아웃 */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 반응형 그리드 */
    gap: 30px; /* 카드들 사이 간격 */
}

.treatment-card {
    background-color: #fff; /* 흰색 배경 */
    padding: 40px 30px; /* 안쪽 여백 */
    border-radius: 15px; /* 모서리를 둥글게 해요 */
    text-align: center; /* 글자를 가운데 정렬해요 */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* 그림자 효과 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 변화를 부드럽게 해요 */
}

.treatment-card:hover {
    transform: translateY(-10px); /* 마우스 올렸을 때 위로 올라가요 */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* 그림자를 더 진하게 해요 */
}

.treatment-icon {
    width: 80px; /* 아이콘 컨테이너 너비 */
    height: 80px; /* 아이콘 컨테이너 높이 */
    background-color: #e8f5e8; /* 연한 녹색 배경 */
    border-radius: 50%; /* 원형으로 만들어요 */
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 세로 방향으로 가운데 정렬 */
    justify-content: center; /* 가로 방향으로 가운데 정렬 */
    margin: 0 auto 25px; /* 가운데 정렬하고 아래 여백 */
}

.treatment-icon i {
    font-size: 2rem; /* 아이콘 크기 */
    color: #2c5530; /* 녹색 아이콘 */
}

.treatment-card h3 {
    font-size: 1.4rem; /* 제목 글자 크기 */
    color: #2c5530; /* 녹색 */
    margin-bottom: 15px; /* 제목과 설명 사이 여백 */
}

.treatment-card p {
    color: #666; /* 회색 */
    line-height: 1.6; /* 줄 간격 */
}

/* 치료 방법 섹션 */
.treatment-methods {
    padding: 100px 0; /* 위아래 여백 */
    background-color: #f8f9fa; /* 연한 회색 배경 */
}

.methods-content {
    max-width: 1200px; /* 최대 너비 제한 */
    margin: 0 auto; /* 가운데 정렬 */
}

.method-intro {
    text-align: center; /* 가운데 정렬 */
    margin-bottom: 60px; /* 아래 여백 */
}

.method-intro h3 {
    font-size: 2.2rem; /* 제목 글자 크기 */
    color: #2c5530; /* 녹색 */
    margin-bottom: 20px; /* 제목과 설명 사이 여백 */
}

.method-intro p {
    font-size: 1.1rem; /* 설명 글자 크기 */
    color: #666; /* 회색 */
    line-height: 1.8; /* 줄 간격 */
    max-width: 800px; /* 최대 너비 제한 */
    margin: 0 auto; /* 가운데 정렬 */
}

.methods-grid {
    display: grid; /* 그리드 레이아웃 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 반응형 그리드 */
    gap: 30px; /* 카드들 사이 간격 */
}

.method-card {
    background-color: #fff; /* 흰색 배경 */
    padding: 40px 30px; /* 안쪽 여백 */
    border-radius: 15px; /* 모서리를 둥글게 해요 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
    text-align: center; /* 가운데 정렬 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 부드러운 애니메이션 */
}

.method-card:hover {
    transform: translateY(-5px); /* 마우스를 올렸을 때 위로 살짝 올라가요 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* 그림자 효과 강화 */
}

.method-icon {
    width: 80px; /* 아이콘 컨테이너 너비 */
    height: 80px; /* 아이콘 컨테이너 높이 */
    background: linear-gradient(135deg, #2c5530, #4a7c59); /* 그라데이션 배경 */
    border-radius: 50%; /* 원형으로 만들어요 */
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 세로 방향으로 가운데 정렬 */
    justify-content: center; /* 가로 방향으로 가운데 정렬 */
    margin: 0 auto 25px; /* 가운데 정렬하고 아래 여백 */
}

.method-icon i {
    color: #fff; /* 흰색 아이콘 */
    font-size: 2rem; /* 아이콘 크기 */
}

.method-card h4 {
    font-size: 1.4rem; /* 제목 글자 크기 */
    color: #2c5530; /* 녹색 */
    margin-bottom: 15px; /* 제목과 설명 사이 여백 */
    font-weight: 600; /* 글자 굵기 */
}

.method-card p {
    color: #666; /* 회색 */
    line-height: 1.7; /* 줄 간격 */
    font-size: 1rem; /* 글자 크기 */
}

/* 시설안내 섹션 */
.facility {
    padding: 100px 0; /* 위아래 여백 */
    background-color: #f8f9fa; /* 연한 회색 배경 */
}

.facility-content {
    max-width: 1200px; /* 최대 너비 제한 */
    margin: 0 auto; /* 가운데 정렬 */
}

.facility-text {
    text-align: center; /* 가운데 정렬 */
    margin-bottom: 60px; /* 아래 여백 */
}

.facility-text h3 {
    font-size: 2.2rem; /* 제목 글자 크기 */
    color: #2c5530; /* 녹색 */
    margin-bottom: 20px; /* 제목과 설명 사이 여백 */
}

.facility-text p {
    font-size: 1.1rem; /* 설명 글자 크기 */
    color: #666; /* 회색 */
    line-height: 1.8; /* 줄 간격 */
    margin-bottom: 30px; /* 설명과 특징 사이 여백 */
    max-width: 800px; /* 최대 너비 제한 */
    margin-left: auto; /* 가운데 정렬 */
    margin-right: auto; /* 가운데 정렬 */
}

.facility-features {
    display: grid; /* 그리드 레이아웃 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 반응형 그리드 */
    gap: 15px; /* 항목들 사이 간격 */
    max-width: 800px; /* 최대 너비 제한 */
    margin: 0 auto; /* 가운데 정렬 */
}

.feature {
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 세로 방향으로 가운데 정렬 */
    gap: 10px; /* 아이콘과 글자 사이 간격 */
    padding: 10px; /* 안쪽 여백 */
    background-color: #fff; /* 흰색 배경 */
    border-radius: 8px; /* 모서리를 둥글게 해요 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

.feature i {
    color: #2c5530; /* 녹색 아이콘 */
    font-size: 1.2rem; /* 아이콘 크기 */
}

.feature span {
    color: #666; /* 회색 글자 */
    font-size: 1rem; /* 글자 크기 */
}

.facility-grid {
    display: flex; /* Flexbox 사용 */
    flex-direction: column; /* 세로 방향으로 배치 */
    gap: 50px; /* 카테고리들 사이 간격 */
}

.facility-category {
    background-color: #fff; /* 흰색 배경 */
    padding: 40px; /* 안쪽 여백 */
    border-radius: 15px; /* 모서리를 둥글게 해요 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

.facility-category h4 {
    font-size: 1.8rem; /* 제목 글자 크기 */
    color: #2c5530; /* 녹색 */
    margin-bottom: 30px; /* 제목과 내용 사이 여백 */
    text-align: center; /* 가운데 정렬 */
    border-bottom: 2px solid #e9ecef; /* 하단 경계선 */
    padding-bottom: 15px; /* 하단 여백 */
}

.facility-items {
    display: grid; /* 그리드 레이아웃 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 반응형 그리드 */
    gap: 30px; /* 아이템들 사이 간격 */
}

.facility-item {
    text-align: center; /* 가운데 정렬 */
    padding: 20px; /* 안쪽 여백 */
    border-radius: 10px; /* 모서리를 둥글게 해요 */
    background-color: #f8f9fa; /* 연한 회색 배경 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 부드러운 애니메이션 */
}

.facility-item:hover {
    transform: translateY(-5px); /* 마우스를 올렸을 때 위로 살짝 올라가요 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* 그림자 효과 강화 */
}

.facility-item img {
    width: 100%; /* 전체 너비 */
    height: 200px; /* 높이 */
    object-fit: cover; /* 이미지가 잘리지 않도록 해요 */
    border-radius: 10px; /* 모서리를 둥글게 해요 */
    margin-bottom: 15px; /* 아래 여백 */
}

.facility-item h5 {
    font-size: 1.3rem; /* 제목 글자 크기 */
    color: #2c5530; /* 녹색 */
    margin-bottom: 10px; /* 제목과 설명 사이 여백 */
    font-weight: 600; /* 글자 굵기 */
}

.facility-item p {
    color: #666; /* 회색 */
    line-height: 1.6; /* 줄 간격 */
    font-size: 0.95rem; /* 글자 크기 */
}

/* 오시는길 섹션 */
.contact {
    padding: 120px 0 100px; /* 위쪽 여백을 더 크게 해서 구분감을 줘요 */
    background-color: #f8f9fa; /* 연한 회색 배경 */
    position: relative; /* 구분선을 위한 위치 설정 */
    margin-top: 50px; /* 위 섹션과의 추가 간격 */
}

/* 위치 및 주차안내 섹션 상단 구분선 */
.contact::before {
    content: ''; /* 가상 요소 생성 */
    position: absolute; /* 절대 위치 */
    top: 0; /* 섹션 맨 위에 위치 */
    left: 50%; /* 가로 중앙에 위치 */
    transform: translateX(-50%); /* 정확한 중앙 정렬 */
    width: 100px; /* 구분선 너비 */
    height: 4px; /* 구분선 두께 */
    background: linear-gradient(90deg, #2c5530, #4a7c59); /* 그라데이션 녹색 */
    border-radius: 2px; /* 둥근 모서리 */
}

.contact-content {
    display: block; /* 단순 블록 레이아웃으로 변경 */
}

.contact-info {
    display: grid; /* 그리드 레이아웃 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 반응형 그리드 (치료방법과 동일) */
    gap: 30px; /* 카드들 사이 간격 */
    margin-bottom: 60px; /* 지도와의 간격 */
}

.info-item {
    background-color: #fff; /* 흰색 배경 (치료방법과 동일) */
    padding: 30px; /* 안쪽 여백 (치료방법과 유사) */
    border-radius: 15px; /* 모서리를 둥글게 (치료방법과 동일) */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* 그림자 효과 (치료방법과 동일) */
    text-align: center; /* 가운데 정렬 (치료방법과 동일) */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 부드러운 애니메이션 */
    display: flex; /* Flexbox 사용 */
    flex-direction: column; /* 세로 방향 배치 */
    align-items: center; /* 가로 방향으로 가운데 정렬 */
    gap: 20px; /* 아이콘과 텍스트 사이 간격 */
}

.info-item:hover {
    transform: translateY(-5px); /* 마우스 올렸을 때 위로 살짝 올라가요 (치료방법과 동일) */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* 그림자 효과 강화 (치료방법과 동일) */
}

.info-icon {
    width: 70px; /* 아이콘 컨테이너 너비 (치료방법과 비슷하게 더 크게) */
    height: 70px; /* 아이콘 컨테이너 높이 (치료방법과 비슷하게 더 크게) */
    background: linear-gradient(135deg, #2c5530, #4a7c59); /* 그라데이션 배경 (치료방법과 동일) */
    border-radius: 50%; /* 원형으로 만들어요 */
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 세로 방향으로 가운데 정렬 */
    justify-content: center; /* 가로 방향으로 가운데 정렬 */
    flex-shrink: 0; /* 크기 고정 */
    margin: 0 auto; /* 가운데 정렬 (치료방법과 동일) */
}

.info-icon i {
    color: #fff; /* 흰색 아이콘 */
    font-size: 1.8rem; /* 아이콘 크기 (치료방법과 비슷하게 더 크게) */
}

.info-text h4 {
    font-size: 1.4rem; /* 제목 글자 크기 (치료방법과 동일) */
    color: #2c5530; /* 녹색 */
    margin-bottom: 15px; /* 제목과 내용 사이 여백 (치료방법과 동일) */
    font-weight: 600; /* 글자 굵기 (치료방법과 동일) */
}

.info-text p {
    color: #666; /* 회색 */
    line-height: 1.7; /* 줄 간격 (치료방법과 동일) */
    font-size: 1rem; /* 글자 크기 (치료방법과 동일) */
}

.contact-map {
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 세로 방향으로 가운데 정렬 */
    justify-content: center; /* 가로 방향으로 가운데 정렬 */
}

/* 지도 컨테이너 스타일 */
.map-container {
    width: 100%; /* 전체 너비 */
    height: 400px; /* 높이 */
    border-radius: 10px; /* 모서리를 둥글게 해요 */
    overflow: hidden; /* 넘치는 부분을 숨겨요 */
    position: relative; /* 위치 기준점 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

/* 지도 로딩 상태 스타일 */
.map-loading {
    position: absolute; /* 절대 위치 */
    top: 0; /* 위쪽 */
    left: 0; /* 왼쪽 */
    width: 100%; /* 전체 너비 */
    height: 100%; /* 전체 높이 */
    background-color: #f8f9fa; /* 연한 회색 배경 */
    display: flex; /* Flexbox 사용 */
    flex-direction: column; /* 세로로 배치해요 */
    align-items: center; /* 가로 방향으로 가운데 정렬 */
    justify-content: center; /* 세로 방향으로 가운데 정렬 */
    color: #6c757d; /* 회색 글자 */
    z-index: 10; /* 위에 표시 */
}

.map-loading i {
    font-size: 2rem; /* 아이콘 크기 */
    margin-bottom: 15px; /* 아이콘과 글자 사이 여백 */
    color: #2c5530; /* 녹색 아이콘 */
}

.map-loading p {
    font-size: 1rem; /* 글자 크기 */
    margin: 0; /* 여백 제거 */
}

/* 전화번호 링크 스타일 */
.phone-link {
    color: #2c5530; /* 녹색 */
    text-decoration: none; /* 밑줄 제거 */
    font-weight: 500; /* 글자 굵기 */
    transition: color 0.3s ease; /* 색상 변화 애니메이션 */
}

.phone-link:hover {
    color: #1e3a23; /* 진한 녹색 */
    text-decoration: underline; /* 밑줄 추가 */
}

/* 주차안내 개선 스타일 - 더 보기 좋고 이해하기 쉽게 만들어요 */
.parking-info {
    background: #f8f9fa; /* 연한 회색 배경으로 구분해요 */
    border-radius: 15px; /* 모서리를 둥글게 해요 */
    padding: 25px; /* 안쪽 여백을 충분히 줘요 */
    border: 2px solid #e9ecef; /* 연한 테두리를 추가해요 */
    transition: all 0.3s ease; /* 마우스 올렸을 때 부드럽게 변해요 */
}

.parking-info:hover {
    background: #ffffff; /* 마우스 올렸을 때 흰색 배경으로 변해요 */
    border-color: #2c5530; /* 테두리 색상을 녹색으로 변해요 */
    transform: translateY(-2px); /* 살짝 위로 올라가요 */
    box-shadow: 0 8px 25px rgba(44, 85, 48, 0.15); /* 그림자 효과를 추가해요 */
}

.parking-options {
    display: flex; /* 주차 옵션들을 가로로 배치해요 */
    flex-direction: column; /* 세로로 배치해요 */
    gap: 20px; /* 옵션들 사이 간격을 줘요 */
    margin: 20px 0; /* 위아래 여백을 줘요 */
}

.parking-option {
    display: flex; /* 아이콘과 설명을 가로로 배치해요 */
    align-items: flex-start; /* 위쪽 정렬해요 */
    gap: 15px; /* 아이콘과 설명 사이 간격 */
    background: #ffffff; /* 흰색 배경 */
    padding: 20px; /* 안쪽 여백 */
    border-radius: 12px; /* 모서리를 둥글게 해요 */
    border: 1px solid #e9ecef; /* 연한 테두리 */
    transition: all 0.3s ease; /* 부드러운 변화 효과 */
}

.parking-option:hover {
    border-color: #2c5530; /* 마우스 올렸을 때 녹색 테두리 */
    box-shadow: 0 4px 15px rgba(44, 85, 48, 0.1); /* 그림자 효과 */
    transform: translateX(5px); /* 살짝 오른쪽으로 이동 */
}

.parking-icon {
    width: 45px; /* 아이콘 컨테이너 너비 */
    height: 45px; /* 아이콘 컨테이너 높이 */
    background: linear-gradient(135deg, #2c5530, #4a7c59); /* 그라데이션 배경 */
    border-radius: 50%; /* 원형으로 만들어요 */
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 세로 방향으로 가운데 정렬 */
    justify-content: center; /* 가로 방향으로 가운데 정렬 */
    flex-shrink: 0; /* 크기 고정 */
}

.parking-icon i {
    color: #fff; /* 흰색 아이콘 */
    font-size: 1.1rem; /* 아이콘 크기 */
}

.parking-details h5 {
    font-size: 1.1rem; /* 제목 글자 크기 */
    color: #2c5530; /* 녹색 */
    margin-bottom: 8px; /* 제목과 설명 사이 여백 */
    font-weight: 600; /* 글자 굵기 */
}

.parking-details p {
    color: #666; /* 회색 */
    line-height: 1.5; /* 줄 간격 */
    margin: 0; /* 여백 제거 */
}

.parking-note {
    color: #4a7c59; /* 연한 녹색 */
    font-weight: 500; /* 글자 굵기 */
    font-size: 0.9rem; /* 글자 크기를 조금 작게 */
    background: rgba(74, 124, 89, 0.1); /* 연한 녹색 배경 */
    padding: 3px 8px; /* 안쪽 여백 */
    border-radius: 15px; /* 둥근 모서리 */
    display: inline-block; /* 인라인 블록으로 표시 */
    margin-top: 5px; /* 위쪽 여백 */
}

.parking-guide {
    margin-top: 25px; /* 위쪽 여백 */
    padding-top: 20px; /* 위쪽 안쪽 여백 */
    border-top: 2px solid #e9ecef; /* 위쪽 구분선 */
}

.guide-item {
    display: flex; /* 아이콘과 텍스트를 가로로 배치 */
    align-items: center; /* 세로 방향으로 가운데 정렬 */
    gap: 12px; /* 아이콘과 텍스트 사이 간격 */
    margin-bottom: 12px; /* 항목들 사이 여백 */
    padding: 10px 0; /* 위아래 여백 */
}

.guide-item:last-child {
    margin-bottom: 0; /* 마지막 항목은 아래 여백 없음 */
}

.guide-item i {
    color: #2c5530; /* 녹색 아이콘 */
    font-size: 1rem; /* 아이콘 크기 */
    width: 20px; /* 아이콘 너비 고정 */
    text-align: center; /* 아이콘 가운데 정렬 */
}

.guide-item span {
    color: #666; /* 회색 텍스트 */
    font-size: 0.95rem; /* 텍스트 크기 */
    line-height: 1.4; /* 줄 간격 */
}

/* 푸터 부분 */
.footer {
    background-color: #2c5530; /* 진한 녹색 배경 */
    color: #fff; /* 흰색 글자 */
    padding: 60px 0 20px; /* 위아래 여백 */
}

.footer-content {
    display: grid; /* 그리드 레이아웃 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 반응형 그리드 */
    gap: 40px; /* 열 사이 간격 */
    margin-bottom: 40px; /* 하단 여백 */
}

.footer-info h3 {
    font-size: 1.5rem; /* 병원 이름 글자 크기 */
    margin-bottom: 10px; /* 이름과 설명 사이 여백 */
}

.footer-info p {
    color: #b8c5ba; /* 연한 녹색 */
    margin-bottom: 5px; /* 줄 사이 여백 */
}

.footer-links h4, .footer-contact h4 {
    font-size: 1.2rem; /* 제목 글자 크기 */
    margin-bottom: 20px; /* 제목과 내용 사이 여백 */
}

.footer-links ul {
    list-style: none; /* 목록 점 제거 */
}

.footer-links li {
    margin-bottom: 10px; /* 항목들 사이 여백 */
}

.footer-links a {
    color: #b8c5ba; /* 연한 녹색 */
    text-decoration: none; /* 밑줄 제거 */
    transition: color 0.3s ease; /* 색상 변화를 부드럽게 해요 */
}

.footer-links a:hover {
    color: #fff; /* 마우스 올렸을 때 흰색 */
}

.footer-contact p {
    color: #b8c5ba; /* 연한 녹색 */
    margin-bottom: 8px; /* 줄 사이 여백 */
}

.footer-bottom {
    text-align: center; /* 글자를 가운데 정렬해요 */
    padding-top: 20px; /* 위쪽 여백 */
    border-top: 1px solid #3a6b3f; /* 위쪽 테두리 */
    color: #b8c5ba; /* 연한 녹색 */
}

/* 헤더 스크롤 효과 */
.header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

.header.header-hidden {
    transform: translateY(-100%);
}

/* 애니메이션 효과 */
.animate-in {
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 로딩 화면 */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.loading-content {
    text-align: center;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #2c5530;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 메시지 스타일 */
.message {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 5px;
    color: #fff;
    z-index: 10000;
    transition: opacity 0.3s ease;
}

.message-success {
    background-color: #28a745;
}

.message-error {
    background-color: #dc3545;
}

.message-info {
    background-color: #17a2b8;
}

/* 반응형 디자인 - 모바일 환경에서의 스타일이에요 */
@media (max-width: 768px) {
    /* 모바일 메뉴 토글 버튼을 보여요 */
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* 데스크톱 네비게이션을 숨겨요 */
    .nav {
        display: none;
    }
    
    /* 섹션 헤더 글자 크기를 줄여요 */
    .section-header h2 {
        font-size: 2rem;
    }
    
    /* 히어로 섹션을 세로로 배치해요 */
    .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .hero-text h2 {
        font-size: 2.2rem;
        word-break: keep-all; /* 한글 단어가 중간에 끊어지지 않도록 해요 */
        word-wrap: break-word; /* 긴 단어는 적절히 줄바꿈해요 */
    }
    
    /* 원장소개 섹션을 세로로 배치해요 */
    .about-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
        max-width: 100%;
    }
    
    /* 시설안내 섹션을 세로로 배치해요 */
    .facility-content {
        padding: 0 20px;
    }
    
    .facility-category {
        padding: 30px 20px;
    }
    
    .facility-items {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .facility-category h4 {
        font-size: 1.5rem;
    }
    
    /* 모바일에서 이미지 높이 조정 */
    .hero-img {
        height: 300px;
    }
    
    .hero-profile-img {
        height: 350px;
        border-radius: 15px;
        image-rendering: -webkit-optimize-contrast; /* 웹킷 브라우저에서 이미지 선명도 개선 */
        image-rendering: crisp-edges; /* 이미지 선명도 개선 */
        image-rendering: pixelated; /* 픽셀화된 이미지의 선명도 개선 */
        -webkit-backface-visibility: hidden; /* 웹킷 브라우저에서 이미지 깜빡임 방지 */
        backface-visibility: hidden; /* 이미지 깜빡임 방지 */
    }
    
    .facility-img {
        height: 200px;
    }
    
    /* 모바일에서 로고 크기 조정 */
    .logo-img {
        height: 40px;
    }
    
    /* 오시는길 섹션 모바일 스타일 */
    .contact-info {
        grid-template-columns: 1fr; /* 한 열로 배치 (치료방법과 동일) */
        gap: 20px; /* 카드들 사이 간격 줄이기 */
    }
    
    /* 진료과목 그리드를 한 열로 만들어요 */
    .treatments-grid {
        grid-template-columns: 1fr;
    }
    
    /* 치료 방법 그리드를 한 열로 만들어요 */
    .methods-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .method-intro h3 {
        font-size: 1.8rem;
    }
    
    .method-card {
        padding: 30px 20px;
    }
    
    /* 푸터를 세로로 배치해요 */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    /* 컨테이너 여백을 줄여요 */
    .container {
        padding: 0 15px;
    }
    
    /* 섹션 여백을 줄여요 */
    .hero, .about, .treatment-methods, .treatments, .facility, .contact {
        padding: 60px 0;
    }
    
    /* 버튼을 세로로 배치해요 */
    .hero-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .btn {
        margin-right: 0;
        width: 200px;
    }
}

/* 더 작은 모바일 화면을 위한 추가 스타일 */
@media (max-width: 480px) {
    .hero-text h2 {
        font-size: 1.8rem;
        word-break: keep-all; /* 한글 단어가 중간에 끊어지지 않도록 해요 */
        word-wrap: break-word; /* 긴 단어는 적절히 줄바꿈해요 */
    }
    
    .section-header h2 {
        font-size: 1.6rem;
    }
    
    /* 작은 모바일에서 로고 크기 조정 */
    .logo-img {
        height: 35px;
    }
    
    .treatment-card {
        padding: 30px 20px;
    }
    
    .method-card {
        padding: 25px 15px;
    }
    
    .method-intro h3 {
        font-size: 1.6rem;
    }
    
    .info-item {
        padding: 25px 20px; /* 모바일에서 여백 조정 (치료방법과 동일) */
    }
    
    /* 더 작은 모바일에서 이미지 높이 추가 조정 */
    .hero-img {
        height: 250px;
    }
    
    .hero-profile-img {
        height: 300px;
        border-radius: 12px;
        image-rendering: -webkit-optimize-contrast; /* 웹킷 브라우저에서 이미지 선명도 개선 */
        image-rendering: crisp-edges; /* 이미지 선명도 개선 */
        image-rendering: pixelated; /* 픽셀화된 이미지의 선명도 개선 */
        -webkit-backface-visibility: hidden; /* 웹킷 브라우저에서 이미지 깜빡임 방지 */
        backface-visibility: hidden; /* 이미지 깜빡임 방지 */
    }
    
    .facility-img {
        height: 180px;
    }
    
    .facility-item {
        padding: 15px;
    }
    
    .facility-item h5 {
        font-size: 1.1rem;
    }
    
    .facility-category h4 {
        font-size: 1.3rem;
    }
}

/* 질환안내 페이지 전용 스타일 */
.page-header {
    background: linear-gradient(135deg, #2c5530 0%, #4a7c59 100%);
    color: white;
    padding: 120px 0 60px;
    text-align: center;
}

/* 세부항목 리스트 스타일 - 점과 글자 간격 조정 */
.treatment-details ul {
    padding-left: 15px; /* 점과 글자 사이 간격을 줄여요 */
}

.treatment-details li {
    margin-bottom: 8px; /* 항목 간 간격도 적당히 조정해요 */
}

.page-header-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.page-header-content p {
    font-size: 1.2rem;
    margin-bottom: 20px;
    opacity: 0.9;
}

.breadcrumb {
    font-size: 0.9rem;
    opacity: 0.8;
}

.breadcrumb a {
    color: white;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* 치료 과정 스타일 */
.treatment-process {
    background-color: #f8f9fa;
    padding: 80px 0;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.process-step {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    position: relative;
}

.step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #2c5530 0%, #4a7c59 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 20px;
}

.process-step h3 {
    color: #2c5530;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.process-step p {
    color: #666;
    line-height: 1.6;
}

/* 치료 상세 정보 스타일 */
.treatment-details {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.treatment-details h4 {
    color: #2c5530;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.treatment-details ul {
    list-style: none;
    padding: 0;
}

.treatment-details li {
    padding: 5px 0;
    color: #666;
    font-size: 0.9rem;
    position: relative;
    padding-left: 15px;
}

.treatment-details li::before {
    content: '•';
    color: #2c5530;
    position: absolute;
    left: 0;
}

/* 예약 안내 섹션 */
.appointment-info {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 80px 0;
}

.appointment-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.appointment-text h2 {
    color: #2c5530;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.appointment-text p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 40px;
}

.appointment-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
}

.detail-item i {
    font-size: 2rem;
    color: #2c5530;
    width: 50px;
}

.detail-item h4 {
    color: #2c5530;
    margin-bottom: 5px;
}

.detail-item p {
    color: #666;
    margin: 0;
    font-size: 0.9rem;
}

/* 활성 네비게이션 링크 스타일 */
.nav-link.active {
    color: #2c5530;
    font-weight: 600;
}

.nav-link.active::after {
    width: 100%;
}

/* 모바일 반응형 스타일 */
@media (max-width: 768px) {
    .page-header-content h1 {
        font-size: 2rem;
    }
    
    .process-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .appointment-details {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .detail-item {
        flex-direction: column;
        text-align: center;
    }
    
    .treatment-details li {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .page-header-content h1 {
        font-size: 1.8rem;
    }
    
    .process-step {
        padding: 30px 20px;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .appointment-text h2 {
        font-size: 2rem;
    }
    
    /* 더 작은 모바일에서 연락처 정보 정렬 개선 */
    .info-item {
        padding: 20px 15px; /* 가장 작은 모바일에서 여백 줄이기 */
    }
    
    .info-icon {
        width: 45px; /* 아이콘 크기를 조금 줄여요 */
        height: 45px;
    }
    
    .info-text h4 {
        font-size: 1.1rem; /* 제목 크기 조정 */
    }
    
    .info-text p {
        font-size: 0.95rem; /* 텍스트 크기 조정 */
        line-height: 1.5; /* 줄 간격 조정 */
    }
    
    /* 모바일에서 주차안내 스타일 조정 */
    .parking-info {
        padding: 20px; /* 모바일에서 여백 줄이기 */
    }
    
    .parking-option {
        padding: 15px; /* 모바일에서 여백 줄이기 */
        flex-direction: row; /* 가로 배치 유지 */
    }
    
    .parking-details h5 {
        font-size: 1rem; /* 제목 크기 조정 */
    }
    
    .parking-details p {
        font-size: 0.9rem; /* 텍스트 크기 조정 */
    }
    
    .parking-note {
        font-size: 0.8rem; /* 노트 텍스트 크기 조정 */
        padding: 2px 6px; /* 여백 조정 */
    }
    
    .guide-item {
        gap: 10px; /* 간격 줄이기 */
        padding: 8px 0; /* 여백 줄이기 */
    }
    
    .guide-item span {
        font-size: 0.9rem; /* 텍스트 크기 조정 */
    }
}

/* 다이어트 페이지 스타일 */
/* 다이어트 페이지에 특화된 스타일들을 추가해요 */

/* 다이어트 히어로 섹션 */
.diet-hero {
    background: linear-gradient(135deg, #2c5530 0%, #4a7c59 100%);
    color: white;
    padding: 120px 0 80px;
}

.diet-hero .hero-text h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
    line-height: 1.2;
}

.diet-hero .hero-text h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 25px;
    color: #fff;
    line-height: 1.4;
}

.diet-hero .hero-text p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: #e8f5e8;
    line-height: 1.6;
}

/* 다이어트 히어로 섹션의 버튼 스타일 */
.diet-hero .btn-primary {
    background-color: #2c5530;
    color: #fff;
    border: 2px solid #fff;
}

.diet-hero .btn-primary:hover {
    background-color: #1e3a22;
    color: #fff;
    border: 2px solid #fff;
    transform: translateY(-2px);
}

.diet-hero .btn-secondary {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.diet-hero .btn-secondary:hover {
    background-color: #fff;
    color: #2c5530;
    transform: translateY(-2px);
}

/* 다이어트 소개 섹션 */
.diet-intro {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.intro-content {
    max-width: 1000px;
    margin: 0 auto;
}

.intro-text h3 {
    font-size: 1.6rem;
    color: #2c5530;
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.3;
}

.intro-text p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.6;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.benefit-item {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.benefit-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.benefit-icon i {
    font-size: 2rem;
    color: white;
}

.benefit-item h4 {
    font-size: 1.2rem;
    color: #2c5530;
    margin-bottom: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.benefit-item p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

/* 다이어트 방법 섹션 */
.diet-methods {
    padding: 80px 0;
}

.methods-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.method-card.large {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.method-card.large:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.method-header {
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    color: white;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.method-header .method-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.method-header .method-icon i {
    font-size: 1.5rem;
    color: white;
}

.method-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.method-content {
    padding: 30px;
}

.method-content p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 18px;
    line-height: 1.6;
}

.method-content ul {
    list-style: none;
    padding: 0;
}

.method-content li {
    padding: 10px 0;
    color: #555;
    position: relative;
    padding-left: 25px;
}

.method-content li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2c5530;
    font-weight: bold;
    font-size: 1.1rem;
}

/* 다이어트 효과 섹션 */
.diet-effects {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.effects-content {
    max-width: 1200px;
    margin: 0 auto;
}

.effects-intro {
    text-align: center;
    margin-bottom: 50px;
}

.effects-intro h3 {
    font-size: 1.8rem;
    color: #2c5530;
    margin-bottom: 20px;
}

.effects-intro p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

.effects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.effect-card {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.effect-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.effect-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #4a7c59, #6b9a7a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.effect-icon i {
    font-size: 2rem;
    color: white;
}

.effect-card h4 {
    font-size: 1.3rem;
    color: #2c5530;
    margin-bottom: 15px;
    font-weight: 600;
}

.effect-card p {
    color: #666;
    line-height: 1.6;
}

/* 다이어트 효과 타임라인 */
.effects-timeline {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.effects-timeline h3 {
    font-size: 1.8rem;
    color: #2c5530;
    text-align: center;
    margin-bottom: 40px;
}

.timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.timeline-item {
    text-align: center;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.timeline-item:hover {
    transform: translateY(-3px);
}

.timeline-period {
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 20px;
    display: inline-block;
}

.timeline-content h4 {
    font-size: 1.3rem;
    color: #2c5530;
    margin-bottom: 15px;
    font-weight: 600;
}

.timeline-content ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.timeline-content li {
    padding: 5px 0;
    color: #666;
    position: relative;
    padding-left: 20px;
    line-height: 1.6;
}

.timeline-content li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2c5530;
    font-weight: bold;
    font-size: 1rem;
}

/* 다이어트 팁 섹션 */
.diet-tips {
    padding: 80px 0;
}

.tips-content {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.tip-category {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

.tip-category h3 {
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    color: white;
    padding: 25px 30px;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 15px;
}

.tip-category h3 i {
    font-size: 1.2rem;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0;
}

.tip-item {
    padding: 30px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease;
}

.tip-item:last-child {
    border-bottom: none;
}

.tip-item:hover {
    background-color: #f8f9fa;
}

.tip-item h4 {
    font-size: 1.2rem;
    color: #2c5530;
    margin-bottom: 10px;
    font-weight: 600;
}

.tip-item p {
    color: #666;
    line-height: 1.6;
}

/* 상담 예약 섹션 */
.consultation {
    padding: 80px 0;
    background: linear-gradient(135deg, #2c5530 0%, #4a7c59 100%);
    color: white;
}

.consultation-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.consultation-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: white;
}

.consultation-text p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: #e8f5e8;
    line-height: 1.8;
}

.consultation-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.feature {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.feature i {
    font-size: 1.5rem;
    color: #fff;
}

.feature span {
    font-weight: 500;
    color: white;
}

.consultation-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.consultation-buttons .btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.consultation-buttons .btn-primary {
    background: #fff;
    color: #2c5530;
}

.consultation-buttons .btn-primary:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.consultation-buttons .btn-secondary {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
}

.consultation-buttons .btn-secondary:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

/* 다이어트 페이지 반응형 디자인 */
@media (max-width: 768px) {
    .diet-hero .hero-text h1 {
        font-size: 2rem;
    }
    
    .diet-hero .hero-text h2 {
        font-size: 1.5rem;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .effects-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .tips-grid {
        grid-template-columns: 1fr;
    }
    
    .method-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .consultation-features {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .consultation-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .consultation-buttons .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .diet-hero .hero-text h1 {
        font-size: 1.6rem;
    }
    
    .diet-hero .hero-text h2 {
        font-size: 1.3rem;
    }
    
    .consultation-text h2 {
        font-size: 2rem;
    }
    
    .method-content {
        padding: 20px;
    }
    
    .tip-item {
        padding: 20px;
    }
    
    .benefit-item,
    .effect-card {
        padding: 25px 20px;
    }
    
    .timeline-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .effects-timeline {
        padding: 30px 20px;
    }
    
    .timeline-item {
        padding: 25px 20px;
    }
}

/* 한약 다이어트 섹션 스타일 */
.herbal-diet {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.herbal-content {
    max-width: 1200px;
    margin: 0 auto;
}

.herbal-intro {
    text-align: center;
    margin-bottom: 50px;
}

.herbal-intro h3 {
    font-size: 1.8rem;
    color: #2c5530;
    margin-bottom: 20px;
}

.herbal-intro p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

.herbal-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.herbal-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.herbal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.herbal-header {
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    color: white;
    padding: 30px;
    text-align: center;
}

.herbal-icon {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.herbal-icon i {
    font-size: 2rem;
    color: white;
}

.herbal-header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.herbal-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0;
}

.herbal-body {
    padding: 30px;
}

.herbal-body h4 {
    font-size: 1.3rem;
    color: #2c5530;
    margin-bottom: 15px;
    font-weight: 600;
}

.herbal-body ul {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.herbal-body li {
    padding: 8px 0;
    color: #555;
    position: relative;
    padding-left: 20px;
    line-height: 1.6;
}

.herbal-body li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #2c5530;
    font-weight: bold;
    font-size: 1.2rem;
}

.herbal-body p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.herbal-usage {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.herbal-usage h3 {
    font-size: 1.8rem;
    color: #2c5530;
    text-align: center;
    margin-bottom: 40px;
}

.usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.usage-item {
    text-align: center;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.usage-item:hover {
    transform: translateY(-3px);
}

.usage-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #4a7c59, #6b9a7a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.usage-icon i {
    font-size: 1.5rem;
    color: white;
}

.usage-item h4 {
    font-size: 1.2rem;
    color: #2c5530;
    margin-bottom: 10px;
    font-weight: 600;
}

.usage-item p {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* 한약 다이어트 섹션 반응형 디자인 */
@media (max-width: 768px) {
    .herbal-cards {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .usage-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .herbal-header {
        padding: 25px 20px;
    }
    
    .herbal-body {
        padding: 25px 20px;
    }
    
    .herbal-usage {
        padding: 30px 20px;
    }
}

@media (max-width: 480px) {
    .herbal-header h3 {
        font-size: 1.5rem;
    }
    
    .herbal-body h4 {
        font-size: 1.1rem;
    }
    
    .herbal-body li {
        font-size: 0.9rem;
    }
    
    .usage-item {
        padding: 20px 15px;
    }
    
    .usage-item h4 {
        font-size: 1.1rem;
    }
    
    .usage-item p {
        font-size: 0.9rem;
    }
}

/* FAQ 섹션 스타일 */
.diet-faq {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.faq-content {
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.faq-question {
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    color: white;
    padding: 25px 30px;
}

.faq-question h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.faq-answer {
    padding: 30px;
}

.faq-answer p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* 추천 그리드 */
.recommendation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.recommendation-item {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
}

.recommendation-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #4a7c59, #6b9a7a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.recommendation-icon i {
    font-size: 1.5rem;
    color: white;
    margin: 0;
    padding: 0;
}

.recommendation-item h4 {
    font-size: 1.1rem;
    color: #2c5530;
    margin-bottom: 8px;
    font-weight: 600;
    line-height: 1.3;
}

.recommendation-item ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.recommendation-item li {
    padding: 5px 0;
    color: #666;
    position: relative;
    padding-left: 20px;
    line-height: 1.5;
}

.recommendation-item li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2c5530;
    font-weight: bold;
}

/* 복용 방법 */
.usage-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.usage-method {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 15px;
}

.usage-method h4 {
    font-size: 1.3rem;
    color: #2c5530;
    margin-bottom: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.usage-method h4 i {
    color: #4a7c59;
}

.usage-method ul {
    list-style: none;
    padding: 0;
}

.usage-method li {
    padding: 8px 0;
    color: #666;
    position: relative;
    padding-left: 20px;
    line-height: 1.6;
}

.usage-method li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #2c5530;
    font-weight: bold;
    font-size: 1.2rem;
}

/* 주의사항 */
.warning-content {
    margin-top: 20px;
}

.warning-alert {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.warning-alert i {
    font-size: 2rem;
}

.warning-alert h4 {
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.warning-alert p {
    margin: 0;
    opacity: 0.9;
}

.warning-list {
    background: white;
    padding: 25px;
    border-radius: 15px;
    border-left: 5px solid #dc3545;
}

.warning-list h4 {
    font-size: 1.2rem;
    color: #2c5530;
    margin-bottom: 15px;
    font-weight: 600;
}

.warning-list ul {
    list-style: none;
    padding: 0;
}

.warning-list li {
    padding: 8px 0;
    color: #666;
    position: relative;
    padding-left: 20px;
    line-height: 1.6;
}

.warning-list li::before {
    content: "⚠";
    position: absolute;
    left: 0;
    color: #dc3545;
    font-weight: bold;
}

/* 요요 현상 정보 */
.yoyo-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.yoyo-fact {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
}

.yoyo-fact h4 {
    font-size: 1.2rem;
    color: #2c5530;
    margin-bottom: 10px;
    font-weight: 600;
}

.yoyo-fact p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* 식욕 억제 정보 */
.appetite-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.appetite-theory,
.appetite-reality {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 15px;
}

.appetite-theory h4,
.appetite-reality h4 {
    font-size: 1.2rem;
    color: #2c5530;
    margin-bottom: 15px;
    font-weight: 600;
}

.appetite-theory ul,
.appetite-reality ul {
    list-style: none;
    padding: 0;
}

.appetite-theory li,
.appetite-reality li {
    padding: 8px 0;
    color: #666;
    position: relative;
    padding-left: 20px;
    line-height: 1.6;
}

.appetite-theory li::before,
.appetite-reality li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #2c5530;
    font-weight: bold;
    font-size: 1.2rem;
}

/* 식이 조절 중요성 */
.diet-importance {
    margin-top: 20px;
}

.diet-rule {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 20px;
}

.diet-rule h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.diet-rule p {
    margin: 0;
    line-height: 1.7;
    opacity: 0.95;
}

.diet-guidance {
    background: white;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 20px;
    border-left: 5px solid #28a745;
}

.diet-guidance h4 {
    font-size: 1.2rem;
    color: #2c5530;
    margin-bottom: 15px;
    font-weight: 600;
}

.diet-guidance ul {
    list-style: none;
    padding: 0;
}

.diet-guidance li {
    padding: 8px 0;
    color: #666;
    position: relative;
    padding-left: 20px;
    line-height: 1.6;
}

.diet-guidance li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

.diet-support {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
}

.diet-support h4 {
    font-size: 1.2rem;
    color: #2c5530;
    margin-bottom: 10px;
    font-weight: 600;
}

.diet-support p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* 처방 정보 */
.prescription-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.prescription-period,
.prescription-duration,
.prescription-break {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 15px;
}

.prescription-period h4,
.prescription-duration h4,
.prescription-break h4 {
    font-size: 1.2rem;
    color: #2c5530;
    margin-bottom: 15px;
    font-weight: 600;
}

.prescription-period ul,
.prescription-duration ul {
    list-style: none;
    padding: 0;
}

.prescription-period li,
.prescription-duration li {
    padding: 8px 0;
    color: #666;
    position: relative;
    padding-left: 20px;
    line-height: 1.6;
}

.prescription-period li::before,
.prescription-duration li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #2c5530;
    font-weight: bold;
    font-size: 1.2rem;
}

.prescription-break p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* FAQ 반응형 디자인 */
@media (max-width: 768px) {
    .recommendation-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .usage-methods {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .yoyo-info {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .appetite-info {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .prescription-info {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .faq-question {
        padding: 20px 25px;
    }
    
    .faq-answer {
        padding: 25px;
    }
    
    .warning-alert {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .faq-question h3 {
        font-size: 1.2rem;
    }
    
    .faq-answer p {
        font-size: 1rem;
    }
    
    .recommendation-item,
    .usage-method,
    .yoyo-fact,
    .appetite-theory,
    .appetite-reality,
    .prescription-period,
    .prescription-duration,
    .prescription-break {
        padding: 20px 15px;
    }
    
    .diet-rule,
    .diet-guidance,
    .diet-support {
        padding: 20px 15px;
    }
}

/* 감비환 단점 아이콘 스타일 */
.pro-icon i, .con-icon i {
    font-size: 1.2rem;
    color: white;
}

/* 감비탕 소개 섹션 */
.gambitang-intro {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.intro-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.intro-text h3 {
    font-size: 1.5rem;
    color: #2c5530;
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.intro-text p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.character-breakdown {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.character-item {
    text-align: center;
}

.character {
    display: inline-block;
    padding: 10px 15px;
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.gambitang-explanation {
    text-align: center;
    margin-top: 30px;
}

.gambitang-explanation h4 {
    font-size: 1.2rem;
    color: #2c5530;
    margin-bottom: 15px;
    font-weight: 600;
}

.gambitang-explanation p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

.gambihwan-highlight {
    text-align: center;
    margin-top: 30px;
}

.gambihwan-highlight h4 {
    font-size: 1.2rem;
    color: #2c5530;
    margin-bottom: 15px;
    font-weight: 600;
}

.gambihwan-highlight ul {
    list-style: none;
    padding: 0;
    display: inline-block;
    text-align: left;
    max-width: 400px;
}

.gambihwan-highlight li {
    padding: 5px 0;
    color: #666;
    position: relative;
    padding-left: 20px;
    line-height: 1.5;
    font-size: 0.95rem;
}

.gambihwan-highlight li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2c5530;
    font-weight: bold;
}

/* 감비탕 특징 섹션 */
.gambitang-features {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.features-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.feature-item {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.feature-icon i {
    font-size: 1.5rem;
    color: white;
}

.feature-text h3 {
    font-size: 1.2rem;
    color: #2c5530;
    margin-bottom: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.feature-text p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

/* 가격 정보 섹션 */
.pricing-info {
    padding: 80px 0;
}

.pricing-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.price-highlight {
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    color: white;
    padding: 40px;
    border-radius: 15px;
    margin-bottom: 40px;
}

.price-main h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

.price-main p {
    font-size: 1.1rem;
    color: #e8f5e8;
    margin: 0;
}

.pricing-benefits {
    text-align: center;
}

.pricing-benefits h3 {
    font-size: 1.4rem;
    color: #2c5530;
    margin-bottom: 25px;
    font-weight: 600;
}

.pricing-benefits .benefit-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
    background: white;
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.pricing-benefits .benefit-item i {
    color: #2c5530;
    font-size: 1.2rem;
}

.pricing-benefits .benefit-item p {
    font-size: 1rem;
    color: #666;
    margin: 0;
}

/* 감비환 특징 섹션 */
.gambihwan-features {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.gambihwan-features .features-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.gambihwan-features .feature-item {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gambihwan-features .feature-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* 감비환 장단점 섹션 */
.gambihwan-pros-cons {
    padding: 80px 0;
}

.pros-cons-content {
    max-width: 1000px;
    margin: 0 auto;
}

.pros-section, .cons-section {
    margin-bottom: 40px;
}

.pros-section h3, .cons-section h3 {
    font-size: 1.4rem;
    color: #2c5530;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 600;
}

.pros-list, .cons-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.pro-item, .con-item {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pro-item:hover, .con-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.pro-icon, .con-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pro-icon {
    background: linear-gradient(135deg, #4a7c59, #6b9a7a);
}

.con-icon {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.pro-text h4, .con-text h4 {
    font-size: 1.1rem;
    color: #2c5530;
    margin-bottom: 8px;
    font-weight: 600;
    line-height: 1.3;
}

.pro-text p, .con-text p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.price-calculation {
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 30px;
    border-radius: 15px;
    margin-top: 40px;
}

.price-calculation h3 {
    font-size: 1.3rem;
    color: #2c5530;
    margin-bottom: 10px;
    font-weight: 600;
}

.price-calculation p {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

/* 감비환 추천 섹션 */
.gambihwan-recommendation {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.recommendation-content {
    max-width: 1000px;
    margin: 0 auto;
}

.recommendation-item {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.recommendation-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.recommendation-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.recommendation-icon i {
    font-size: 1.5rem;
    color: white;
    margin: 0;
    padding: 0;
}

.recommendation-text h3 {
    font-size: 1.3rem;
    color: #2c5530;
    margin-bottom: 10px;
    font-weight: 600;
    margin-top: 0;
    line-height: 1.2;
}

.recommendation-text p {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.final-message {
    text-align: center;
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    color: white;
    padding: 40px;
    border-radius: 15px;
    margin-top: 30px;
}

.final-message h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.final-message p {
    font-size: 1.1rem;
    color: #e8f5e8;
    margin: 0;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    .features-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .pros-list, .cons-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .price-highlight {
        padding: 30px 20px;
    }
    
    .price-main h3 {
        font-size: 2rem;
    }
    
    .recommendation-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .recommendation-icon {
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .feature-item, .pro-item, .con-item {
        padding: 20px;
    }
    
    .price-main h3 {
        font-size: 1.8rem;
    }
    
    .pricing-benefits .benefit-item {
        padding: 12px 20px;
    }
}

/* 개인정보 동의서 페이지 스타일 */
.privacy-hero {
    background: linear-gradient(135deg, #2c5530 0%, #4a7c59 100%);
    color: white;
    padding: 120px 0 80px;
    text-align: center;
}

.privacy-hero .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.privacy-hero .hero-text {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.privacy-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: center;
}

.privacy-hero p {
    font-size: 1.2rem;
    opacity: 1;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
}

.privacy-content {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.privacy-document {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
}

.document-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 3px solid #2c5530;
}

.document-header h2 {
    color: #2c5530;
    font-size: 2rem;
    margin-bottom: 10px;
}

.document-date {
    color: #6c757d;
    font-size: 1rem;
}

.document-section {
    margin-bottom: 30px;
}

.document-section h3 {
    color: #2c5530;
    font-size: 1.3rem;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #e9ecef;
}

.document-section h4 {
    color: #495057;
    font-size: 1.1rem;
    margin: 20px 0 10px 0;
}

.document-section p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #495057;
}

.document-section ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

.document-section li {
    line-height: 1.6;
    margin-bottom: 8px;
    color: #495057;
}

.contact-info {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-top: 15px;
}

.contact-info p {
    margin-bottom: 8px;
}

.document-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #e9ecef;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.document-footer p {
    margin-bottom: 10px;
    font-weight: 500;
}

.back-section {
    padding: 40px 0;
    text-align: center;
    background-color: white;
}

.back-content {
    display: flex;
    justify-content: center;
}

.privacy-link {
    color: #2c5530;
    text-decoration: none;
    font-size: 0.9rem;
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.privacy-link:hover {
    text-decoration: underline;
}

.privacy-link i {
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .privacy-hero h1 {
        font-size: 2rem;
    }
    
    .privacy-document {
        padding: 30px 20px;
        margin: 0 15px;
    }
    
    .document-header h2 {
        font-size: 1.5rem;
    }
    
    .document-section h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .privacy-hero h1 {
        font-size: 1.8rem;
    }
    
    .privacy-document {
        padding: 20px 15px;
    }
    
    .document-header h2 {
        font-size: 1.3rem;
    }
    
    .document-section h3 {
        font-size: 1.1rem;
    }
    
    .contact-info {
        padding: 15px;
    }
}