/* 파일: 1_sdoctor_new.css */

/* 전체 페이지의 배경색과 폰트를 통일 */
.sdoctor-new-page {
    background-color: #111111; /* 배경색을 어두운 계열로 설정 */
    color: #f0f0f0;
    font-family: 'Noto Sans KR', sans-serif;
}

/* 섹션 공통 스타일: 가로 꽉 찬 레이아웃을 위한 기본 설정 */
.sdoctor-new-section {
    padding: 80px 0;
    position: relative;
    width: 100%; /* 가로 꽉 차도록 설정 */
    box-sizing: border-box;
	text-align: center !important; 
}

/* 폰트 하이라이트 색상 */
.text-accent {
    color: #ff9900; /* 로얄로더 포인트 색상 */
}

/* 1. 메인 히어로 섹션 (가장 상단의 헤드라인) */
.hero-section {
   /* background: url('/slides/2.jpg') no-repeat center center; */ /* 배경 이미지 경로 설정 필요 */
   /* background: url('/img/new_sdoctor_bg.jpg') no-repeat center center; *//* 배경 이미지 경로 설정 필요 */
    background-size: cover;
    padding: 100px 0 120px;
    text-align: center;
   /* border-bottom: 5px solid #ff9900; */ /* 하단에 주황색 라인 강조 */
}

.hero-separator  {
    background-color: #1e1e1e;
    text-align: center;
    border-bottom: 5px solid #ff9900; /* 하단에 주황색 라인 강조 */
}

/* 메인 타이틀 */
.hero-title {
    font-size: 3.5em; /* 매우 크게 */
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* 가독성을 위한 그림자 */
}

/* 서브 타이틀 */
.hero-subtitle {
    font-size: 1.5em;
    color: #cccccc;
    font-weight: 500;
    margin-bottom: 30px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* 핵심 CTA 버튼 (main_new_design.html에서 가져옴) */
.main-cta {
    display: inline-block;
    padding: 18px 50px;
    font-size: 1.3em;
    font-weight: 700;
    background: linear-gradient(90deg, #ff9900 0%, #ff5500 100%);
    color: #111111 !important; /* 버튼 텍스트는 어두운 배경 대비 검정색 */
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 153, 0, 0.4);
}

.main-cta:hover {
    background: linear-gradient(90deg, #ffb347 0%, #ff6600 100%);
    box-shadow: 0 6px 20px rgba(255, 153, 0, 0.6);
    transform: translateY(-2px);
}

/* [NEW] 핵심 가치(Feature) 박스 스타일 */
.feature-box {
    padding: 25px;
    border: 1px solid #2c3e50; /* 어두운 테두리 */
    border-radius: 8px;
    height: 100%;
    box-sizing: border-box;
    text-align: center; /* 내부 콘텐츠 중앙 정렬 */
    background-color: #1a1a1a; /* 배경색 통일 */
    transition: background-color 0.3s;
}

.feature-box:hover {
    background-color: #222222; /* 호버 시 색상 강조 */
    border-color: #ff9900; /* 호버 시 포인트 색상 테두리 */
}

/* 반응형 조정 */
@media (max-width: 992px) {
    .hero-title {
        font-size: 2.5em;
    }
    .hero-subtitle {
        font-size: 1.2em;
    }
    .main-cta {
        padding: 15px 40px;
        font-size: 1.1em;
    }
}

/* 1. 혜택 리스트 (UL) 자체를 중앙 정렬 및 너비 제한 */
.benefit-list {
    max-width: 750px; /* 리스트 전체 너비 제한 (너무 넓으면 쏠려 보일 수 있음) */
    margin: 0 auto !important; /* ⭐️ 핵심: 리스트 블록 중앙 정렬 강제 ⭐️ */
    list-style: none;
    padding: 0;
}

/* 2. 섹션 내부의 혜택 항목 (LI)의 좌측 정렬을 다시 한번 확인 */
.benefit-list .benefit-item {
    justify-content: flex-start; /* 내부 아이콘과 텍스트는 좌측 시작점에 정렬 */
    text-align: left; /* 텍스트 정렬 */
}

/* 리스트 항목 내부의 텍스트가 너무 길어지는 것을 방지하여 중앙 정렬이 잘 보이도록 합니다. */
.benefit-list .benefit-item p {
    max-width: 80%;
    /* text-align: center; */ /* 필요하다면 해제, HTML 인라인 스타일 사용 중 */
}
/* 3. 섹션 전체의 텍스트 정렬이 강력하게 중앙으로 적용되도록 보강 */
.sdoctor-new-section {
    text-align: center !important;
}

/* 4. 컨테이너 중앙 정렬 우선순위 강화 */
.container {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ⭐️ 혜택 카드 섹션 중앙 정렬 최종 핵(Hack) ⭐️ */

/* 카드를 감싸는 row와 col의 좌우 마진/패딩을 강제 제거 */
.benefit-cards-section .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center !important; /* 내부 요소 중앙 정렬 보장 */
}

/* 개별 카드 (col-lg-12)의 좌우 패딩을 강제 제거 */
.benefit-cards-section .col-lg-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 카드 전체 컨테이너를 중앙 정렬 및 너비 제한 */
.benefit-cards-section .container {
    padding: 0 15px !important; /* 컨테이너의 내부 패딩은 살려둠 */
    margin: 0 auto !important; /* 컨테이너 중앙 정렬 재강조 */
}

/* 개별 카드 블록 자체를 중앙 정렬합니다. */
.benefit-card-3 {
    margin: 0 auto !important;
    max-width: 750px; /* 카드의 최대 너비를 제한하여 중앙 정렬이 잘 보이도록 함 */
}

/* 섹션 내부 텍스트 전체 강제 중앙 정렬 */
.benefit-cards-section {
    text-align: center !important;
}

/* 1. 기본 카드에 부드러운 전환 효과 추가 */
.benefit-card-3 {
    /* 테두리, 그림자, 변형(transform)에 0.3초 동안 부드럽게 변화하도록 설정 */
    transition: border 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out, transform 0.2s ease-out;
    cursor: pointer;
}

/* 2. 마우스 오버 시 (hover) 금색 테두리 및 효과 적용 */
.benefit-card-3:hover {
    /* 인라인 스타일을 !important로 강제 덮어쓰기하여 금색 테두리 적용 */
    border: 2px solid #ff9900 !important; 
    box-shadow: 0 0 15px rgba(255, 153, 0, 0.7); 
    background-color: #333333 !important; 
    transform: translateY(-2px); 
}