/* --- 기본 & 폰트 설정 --- */
:root {
    --primary-color: #2B81B9;
    --highlight-text-color: #5BBDFF; /* RhinoNet 텍스트를 위한 밝은 파란색 */
    --secondary-color: #555555;
    --light-gray-bg: #F4F7F6;
    --white-color: #FFFFFF;
    --dark-text-color: #333333;
    --light-text-color: #666666;
    --border-color: #E0E0E0;
    --header-height: 80px;
    --font-family: 'Noto Sans KR', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    line-height: 1.7;
    color: var(--dark-text-color);
    background-color: var(--white-color);
    /* Sticky footer를 위한 CSS (만약 index.php에 .page-container 래퍼가 있다면) */
    /* min-height: 100vh; display: flex; flex-direction: column; */
}

/* Sticky footer를 위한 래퍼 스타일 (index.php에 <div class="page-container"> 필요) */
/* .page-container { flex: 1 0 auto; } */


.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

h1, h2, h3, h4 {
    line-height: 1.3;
    font-weight: 500;
    color: var(--dark-text-color);
}

/* #hero h1 스타일은 개별적으로 지정됨 */
h2 { font-size: 2.2rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
p { margin-bottom: 1rem; color: var(--light-text-color); }
a { text-decoration: none; color: var(--primary-color); transition: color 0.3s ease; }
a:hover { color: #1a425f; }

img { max-width: 100%; height: auto; display: block;}

.section-padding { padding: 60px 0; }
.bg-light-gray { background-color: var(--light-gray-bg); }
.text-center { text-align: center; }

/* --- 소제목 포인트 장식 스타일 --- */
.title-decorated {
    display: flex;       /* 내부 ::before 요소와 텍스트를 정렬하기 위해 */
    align-items: center; /* 텍스트와 포인트의 수직 중앙 정렬 */
    /* 이 클래스가 적용된 요소의 기존 font-size, color, margin 등은 유지됩니다. */
    /* 필요하다면 이 클래스에 기본 마진 등을 추가할 수 있습니다. */
    /* 예: margin-bottom: 1rem; */
}

.title-decorated::before {
    content: "";                 /* 가상 요소 필수 속성 */
    display: inline-block;       /* 크기 및 마진 적용 가능하도록 */
    width: 6px;                  /* 포인트 너비 (조절 가능) */
    height: 0.8em;               /* 포인트 높이 (현재 요소 폰트 크기의 0.8배, 조절 가능) */
                                 /* 예: h3가 1.5rem이면, 0.8em은 1.2rem */
    background-color: var(--primary-color); /* 포인트 색상 */
    margin-right: 10px;          /* 포인트와 텍스트 사이 간격 */
    flex-shrink: 0;              /* 포인트 크기가 줄어들지 않도록 */

    /* --- 포인트 모양 선택 (아래 주석된 부분 중 선택 또는 커스텀) --- */
    /* 약간 둥근 사각형 포인트 */
    /* border-radius: 2px; */

    /* 원형 포인트 (width와 height를 동일하게 설정) */
    /* width: 8px; */
    /* height: 8px; */
    /* border-radius: 50%; */
}


.section-title {
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 700;
}
.section-subtitle {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem auto;
    color: var(--light-text-color);
    font-size: 1.1rem;
}
.highlight {
    color: var(--highlight-text-color);
    font-weight: 700;
}


/* --- 버튼 스타일 --- */
.btn {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    border: none;
}
.btn-primary {
    background-color: var(--highlight-text-color);
    color: var(--white-color);
}
.btn-primary:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
    color: var(--white-color);
}
.btn-lg {
    padding: 1rem 2.2rem;
    font-size: 1.1rem;
    background-color: #354551;;
}

.btn_result {
  border-radius: 40px;
  display: inline-block;
  padding: 5px 20px;
  text-align: center;
  color: #FFF;
  border: 1px solid transparent;
  font-size: 24px;
}
.blue1 {
  background-color: #3484c9;
  color: #FFF;
}

/* --- 헤더 --- */
#main-header {
    background-color: var(--white-color);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

#logo {
    height: 28px;
    width: auto;
    flex-shrink: 0;
}

#navbar .nav-menu-list {
    list-style: none;
    display: flex;
    align-items: center;
    padding-left: 0;
    font-size: 18px; /* 주 메뉴 리스트의 기본 폰트 크기 */
}

#navbar .nav-menu-list li {
    position: relative;
}

/* 주 메뉴 링크 스타일 */
#navbar .nav-menu-list li a {
    color: var(--dark-text-color);
    font-weight: 700;
    font-size: 17px;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    position: relative;
    white-space: nowrap;
}

#navbar .nav-menu-list li a::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}
#navbar .nav-menu-list li a:hover::after,
#navbar .nav-menu-list li a.active::after {
    width: 100%;
}

/* 문의하기 버튼 스타일 */
.nav-cta {
    background-color: var(--secondary-color);
    color: var(--white-color) !important;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem !important;
    border-radius: 5px;
    font-weight: 500;
}
.nav-cta:hover {
    background-color: var(--dark-text-color);
    color: var(--white-color) !important;
}
.nav-cta::after { display: none !important; }

#mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001; 
}
#mobile-menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--dark-text-color);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}
#mobile-menu-toggle .bar + .bar {
    margin-top: 5px;
}

#main-header.scrolled {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    background-color: rgba(255, 255, 255, 0.98);
}

/* --- 서브메뉴 스타일 (데스크톱) --- */
.nav-item .submenu {
    position: absolute;
    top: 100%; /* 부모 li(높이 40px) 바로 아래 */
    left: 0;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 5px 5px;
    padding: 0.5rem 0; 
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 999; 

    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s 0.3s ease-out;
    
    list-style-type: none;
    padding-left: 0;
}

.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu { 
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s; 
}

.submenu li {
    margin-left: 0 !important; 
}

/* 서브메뉴 링크 스타일 (데스크톱) */
#navbar .nav-menu-list li.has-submenu .submenu li a {
    font-size: 0.875rem; /* 예: 14px */
    font-weight: 400;
    height: auto;
    display: block;
    line-height: 1.5;
    padding: 0.75rem 1.5rem;
    color: var(--dark-text-color);
    white-space: nowrap;
}

#navbar .nav-menu-list li.has-submenu .submenu li a::after {
    display: none;
}

#navbar .nav-menu-list li.has-submenu .submenu li a:hover {
    background-color: var(--light-gray-bg);
    color: var(--primary-color);
}


/* --- 히어로 섹션 --- */
#hero {
    background: url('/static/image/bg01.jpg') no-repeat center center/cover;
    height: calc( (100vh - var(--header-height)) * 0.5 ); 
    min-height: 250px; 
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white-color); 
}
#hero h1 { 
    font-size: 3.5rem;
    font-weight: 700;
    color: white; 
    margin-bottom: 1rem; 
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.hero-content { position: relative; z-index: 1; padding: 0 1rem;}
#hero p { font-size: 1.3rem; max-width: 700px; margin: 1rem auto 2rem auto; color: rgba(255,255,255,0.9); }


/* --- 서비스 섹션 --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.service-item {
    /* background-color: var(--white-color); */ /* 배경이미지로 대체됨 */
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block; 
    text-decoration: none; 
}
.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
/* .service-icon 규칙은 HTML에서 img 태그가 삭제되었으므로 현재 사용되지 않음 */
/* .service-icon { max-width: 60px; margin: 0 auto 1.5rem auto; } */

.service-item h3 { 
    /* color: var(--primary-color); */ /* 각 서비스 아이템별로 덮어씌워짐 (흰색으로) */
    margin-bottom: 1rem; 
}

/* 각 서비스 항목 배경 및 텍스트 스타일 */
.service-item-security, .service-item-idc, .service-item-cdn, 
.service-item-server, .service-item-mail, .service-item-vpn {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    min-height: 250px; /* 서비스 항목 최소 높이 (조정 가능) */
    display: flex; /* 내부 컨텐츠 정렬을 위해 */
    flex-direction: column;
    justify-content: center; /* 내부 컨텐츠 수직 중앙 정렬 */
}

.service-item-security::before, .service-item-idc::before, .service-item-cdn::before, 
.service-item-server::before, .service-item-mail::before, .service-item-vpn::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 8px; /* .service-item의 border-radius와 일치 */
    z-index: 2;
}

.service-item-security h3, .service-item-security p,
.service-item-idc h3, .service-item-idc p,
.service-item-cdn h3, .service-item-cdn p,
.service-item-server h3, .service-item-server p,
.service-item-mail h3, .service-item-mail p,
.service-item-vpn h3, .service-item-vpn p {
    color: var(--white-color);
    position: relative;
    z-index: 3;
}

.service-item-security { background-image: url('/static/image/secu4.png'); }
.service-item-idc { background-image: url('/static/image/datacenter1.jpg'); }
.service-item-cdn { background-image: url('/static/image/cdn02.png'); }
.service-item-server { background-image: url('/static/image/server01.png'); }
.service-item-mail { background-image: url('/static/image/mail02.png'); }
.service-item-vpn { background-image: url('/static/image/vpn02.jpg'); }


/* --- 특장점 섹션 (Features) --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-item {
    background-color: var(--white-color);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center; /* 아이콘과 텍스트를 중앙 정렬하기 위함 */
}
.feature-icon-wrapper { /* 아이콘을 감싸는 원형 배경 */
    width: 80px;  /* 원형 배경의 크기 (조절 가능) */
    height: 80px; /* 원형 배경의 크기 (조절 가능) */
    background-color: var(--primary-color); /* 스크린샷의 파란색 배경 */
    border-radius: 50%; /* 완벽한 원형 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto; /* 아이콘 아래 여백 및 중앙 정렬 */
    flex-shrink: 0;
}

.feature-icon-wrapper .feature-icon-img { /* 원형 배경 안의 실제 아이콘 이미지 */
    width: 80%;  /* 원형 배경 대비 아이콘 이미지 크기 (조절 가능) */
    height: 80%; /* 원형 배경 대비 아이콘 이미지 크기 (조절 가능) */
    object-fit: contain;
    /* 스크린샷의 아이콘이 흰색이므로, 필요시 filter: brightness(0) invert(1); 등으로 색상 반전 */
}




.feature-icon { /* 현재 HTML 구조상 이 클래스는 사용되지 않음 (배경이미지로 대체 안 한 경우) */
    max-width: 90px; /* 사용자 CSS 기준 */
    margin-bottom: 1rem;
}

.feature-item h4 {
    margin-bottom: 0.75rem; /* 제목과 설명 사이 간격 */
    font-size: 1.1rem; /* 제목 폰트 크기 (조절 가능) */
    color: var(--dark-text-color);
    font-weight: 700; /* 스크린샷처럼 약간 굵게 */
}

.feature-item p {
    font-size: 0.9rem; /* 설명 텍스트 폰트 크기 (조절 가능) */
    line-height: 1.6;
    color: var(--light-text-color);
}



/* --- CTA 섹션 --- */
.contact-cta-section {
    background-color: var(--primary-color);
    color: var(--white-color);
}
.contact-cta-section h2 { color: var(--white-color); font-size: 2rem; }
.contact-cta-section p { color: rgba(255,255,255,0.9); max-width: 600px; margin: 1rem auto 2rem auto; }
.contact-cta-section .btn-primary {
    background-color: var(--white-color);
    color: var(--primary-color);
    border: 2px solid var(--white-color);
}
.contact-cta-section .btn-primary:hover {
    background-color: transparent;
    color: var(--white-color);
}
.contact-cta-section .contact-info { margin-top: 1.5rem; font-size: 1.1rem; }
.contact-cta-section .contact-info a { color: var(--white-color); text-decoration: underline; }


/* --- 푸터 --- */
#main-footer {
    background-color: #2C2C2C;
    color: #A0A0A0;
    padding-top: 1rem; 
    padding-bottom: 1rem; 
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem; 
    margin-bottom: 2rem;
}
.footer-about {
    display: flex;
    align-items: center; 
    justify-content: center; 
    gap: 1.5rem; 
}
.footer-logo {
    max-height: 42px;
    flex-shrink: 0;
}
.footer-about p {
    font-size: 0.9rem;
    margin-bottom: 0; 
    color: #A0A0A0;
    line-height: 1.6;
}
.footer-about p a { 
    color: #CCCCCC;
}
.footer-about p a:hover {
    color: var(--white-color);
}

.footer-links-section h4 { /* 현재 footer.php에 해당 구조 없음 */
    color: var(--white-color);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}
.footer-links-section ul { list-style: none; padding-left: 0;}
.footer-links-section ul li { margin-bottom: 0.6rem; }
.footer-links-section ul li a { color: #A0A0A0; font-size: 0.9rem; }
.footer-links-section ul li a:hover { color: var(--white-color); }

.footer-bottom {
    border-top: 1px solid #444444;
    padding-top: 1rem;
    margin-top: 1rem;
    font-size: 0.9rem;
}


/* --- 반응형 스타일 --- */

/* 데스크톱 헤더 레이아웃 조정 (769px 이상) */
@media (min-width: 769px) {
    .header-container {
        justify-content: center;
        gap: 50px;
    }

    #navbar {
        display: flex; 
    }

    #navbar .nav-menu-list {
        gap: 1.8rem; 
    }
    #navbar .nav-menu-list li {
        margin-left: 0; 
    }
}


/* 태블릿 및 더 작은 데스크톱 (992px 이하) */
@media (max-width: 992px) {
    h1:not(#hero h1) { font-size: 2.2rem; } 
    #hero h1 { font-size: 2.8rem; } 
    #hero p { font-size: 1.1rem; }
    .section-title { font-size: 1.8rem; }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    .container { padding: 0 1rem; }

    #navbar { /* 전체 모바일 메뉴 컨테이너 */
        display: none; /* JS로 .active 시 block */
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: var(--white-color);
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 5px 10px rgba(0,0,0,0.05);
        padding-bottom: 1rem;
        z-index: 1002; 
    }
    #navbar.active { display: block; }

    #navbar .nav-menu-list { /* 모바일에서 주 메뉴 리스트 */
        flex-direction: column;
        width: 100%;
        align-items: stretch;
        gap: 0;
    }
    #navbar .nav-menu-list li { /* 모바일에서 주 메뉴 각 항목 */
        margin-left: 0;
        width: 100%;
        position: relative; /* 화살표 아이콘 등 위치 기준 */
    }
   
    /* 모바일에서 서브메뉴를 가진 부모 링크 스타일 */
    #navbar .nav-menu-list li.has-submenu > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        /* padding, border 등은 아래 #navbar .nav-menu-list li a 에서 상속/지정 */
    }
    /* 모바일에서 서브메뉴 펼침/닫힘 표시용 화살표 */
    #navbar .nav-menu-list li.has-submenu > a::after {
            display: none; /* 화살표 아이콘을 완전히 숨김 */

    }
    
    /* 모바일에서 모든 주 메뉴 링크 공통 스타일 (서브메뉴 부모 링크 포함) */
    #navbar .nav-menu-list li a {
        /* font-size, height, display:flex, align-items:center는 데스크톱 스타일에서 상속 */
        /* padding: 0 1rem; 도 데스크톱 스타일에서 상속되어 좌우 여백 제공 */
        justify-content: flex-start; /* 수정: 텍스트를 왼쪽으로 정렬 */
        width: 100%; /* 링크가 전체 너비를 차지하도록 */
        border-bottom: 1px solid var(--border-color); /* 항목 간 구분선 */
        /* 필요하다면 모바일용 패딩을 여기서 직접 지정할 수 있습니다. 예: padding: 0 1.5rem; */
    }

    #navbar .nav-menu-list li:last-child a { border-bottom: none; }
    /* #navbar .nav-menu-list li a::after 는 데스크톱 스타일이 적용되나, has-submenu > a::after 로 덮어쓰기 */


    /* 모바일에서 서브메뉴 스타일 */
    .nav-item .submenu { /* .nav-item은 li.has-submenu 와 같음 */
        display: none; /* JS로 토글하기 위해 기본적으로 숨김 */
        width: 100%;
        position: static; 
        background-color: #f0f0f0; 
        box-shadow: none; 
        border: none;
        border-top: 1px solid var(--border-color); 
        border-radius: 0;
        padding: 0; 
        list-style-type: none; 
        padding-left: 0; 
    }
    
    /* 모바일 서브메뉴 항목 링크 스타일 */
    #navbar .nav-menu-list li.has-submenu .submenu li a {
        font-size: 0.9rem; 
        font-weight: 400;
        color: var(--dark-text-color);
        padding: 0.8rem 1.5rem 0.8rem 2.5rem; /* 안쪽으로 좀 더 들여쓰기 */
        border-bottom: 1px solid #e0e0e0; 
        height: auto; 
        display: block; /* flex 해제 */
        line-height: 1.5;
        text-align: left; 
        width: 100%; /* 확실하게 */
    }
    #navbar .nav-menu-list li.has-submenu .submenu li:last-child a {
        border-bottom: none; 
    }
    #navbar .nav-menu-list li.has-submenu .submenu li a::after { 
        display: none; /* 서브메뉴 항목에는 주메뉴 밑줄 효과 없음 */
    }


        /* 모바일에서 문의하기 버튼 스타일 수정 */
    .nav-cta {
        display: inline-block; /* 버튼처럼 내용만큼의 너비를 가지도록 변경 */
        /* width: auto; /* display:inline-block 이므로 auto가 기본값 */
        margin: 0.1rem 1rem; /* 상하좌우 여백을 주어 다른 항목과 구분 및 터치 영역 확보 */
        /* text-align: left; /* display:inline-block에서는 text-align은 내부 텍스트에만 영향 */
        text-align: center; /* 버튼 내부 텍스트 중앙 정렬 */
        background-color: var(--secondary-color) !important; /* 원래 배경색 유지 또는 원하는 색으로 */
        color: var(--white-color) !important; /* 원래 텍스트 색 유지 또는 원하는 색으로 */
        font-weight: 500; /* 폰트 두께 유지 */
        padding: 0.6rem 1.2rem; /* 패딩을 줄여서 버튼 크기 조정 */
        height: auto; /* 높이 자동 */
        line-height: 1.5; /* 줄 간격 */
        border-radius: 5px; /* 데스크톱과 동일한 둥근 모서리 유지 */
        border-bottom: none; /* 일반 메뉴 항목과 달리 하단 선 제거 */
    }

    /* 문의하기 버튼을 담고 있는 li 요소에 대한 스타일 (선택적) */
    /* 이렇게 하면 버튼이 li 안에서 중앙 정렬되거나, li의 패딩을 조절할 수 있습니다. */
    #navbar .nav-menu-list li:has(>a.nav-cta) {
        display: flex; /* 내부 버튼을 정렬하기 위함 */
        justify-content: center; /* 버튼을 li 안에서 중앙 정렬 (선택 사항) */
        padding: 0.5rem 0; /* li 자체의 상하 패딩, 버튼의 마진과 조절 */
        border-bottom: 1px solid var(--border-color); /* 다른 li 항목들과 동일하게 하단 선 추가 */
    }
     /* 만약 문의하기가 항상 마지막 항목이라면, 하단 테두리 제거 */
    #navbar .nav-menu-list li:last-child:has(>a.nav-cta) {
        border-bottom: none;
    }


/*
    .nav-cta { 
        display: block;
        margin: 1rem;
        text-align: center;
    }
    */

    #mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 25px;
        height: 20px;
    }

    #mobile-menu-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    #mobile-menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    #mobile-menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    #hero { height: auto; min-height: 400px; padding: 4rem 0; }
    #hero h1 { font-size: 2.2rem; } 
    #hero p { font-size: 1rem; }

    .services-grid, .features-grid {
        grid-template-columns: 1fr;
    }
    .footer-about { 
        flex-direction: column;
        align-items: center; 
        gap: 1rem;
        text-align: center;
    }
    .footer-logo {
        margin-bottom: 0.5rem; 
    }

    .service-item, .feature-item { padding: 1.5rem; }
    .service-item { min-height: 200px; /* 모바일에서 서비스 아이템 최소 높이 */ }
    .section-padding { padding: 40px 0; }

    .contact-cta-section h2 { font-size: 1.8rem; }
    .contact-cta-section p { font-size: 1rem; }
}


#page-title-banner {
    background-image: url('/static/image/bg.jpg'); /* 사용자 이미지 경로로 변경 필요 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    padding: 50px 0; /* 사용자 CSS 기준 */
    text-align: center;
}   

#page-title-banner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

#page-title-banner .section-title,
#page-title-banner .section-subtitle {
    color: var(--white-color);
    position: relative;
    z-index: 3;
}   

#page-title-banner .section-title {
    font-size: 2.8rem;
    margin-bottom: 0.75rem;
}
    
#page-title-banner .section-subtitle {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
}


.common-features { /* HTML에서 .features-grid에 추가한 클래스 */
    /* display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    /* 위는 일반적인 반응형 그리드이고, 스크린샷처럼 특정 개수를 맞추려면 아래와 같이 할 수 있습니다. */
    display: flex;
    flex-wrap: wrap; /* 넘어가면 다음 줄로 */
    justify-content: center; /* 아이템들을 중앙 정렬 (특히 마지막 줄 아이템이 적을 때) */
    gap: 2rem; /* 아이템 사이 간격 */
}

.common-features .feature-item {
    flex-basis: calc(33.333% - 2rem); /* 3개씩 배치될 때의 기본 너비 (gap 고려) */
    min-width: 250px; /* 최소 너비 */
    /* 좀 더 복잡한 레이아웃 (예: 5개일 때 3-2 배치)은 JS 또는 더 많은 CSS 규칙이 필요할 수 있습니다. */
    /* 간단하게는 flex-basis로 기본 너비를 주고, justify-content로 정렬합니다. */
}

/* 태블릿 화면 등에서 2열로 보이게 하려면 */
@media (max-width: 992px) and (min-width: 769px) {
    .common-features .feature-item {
        flex-basis: calc(50% - 1rem); /* 2개씩 배치 (gap 고려하여 계산) */
    }
}

/* 모바일 화면에서는 1열로 (기존 .features-grid의 auto-fit, minmax 설정이 이를 처리할 수 있음) */
/* 또는 명시적으로 */
@media (max-width: 768px) {
    .common-features .feature-item {
        flex-basis: 100%; /* 1개씩 전체 너비 */
    }
    .feature-icon-wrapper { /* 모바일에서 아이콘 크기 약간 줄임 (선택 사항) */
        width: 70px;
        height: 70px;
        margin-bottom: 1rem;
    }
    .feature-item h4 {
        font-size: 1rem;
    }
    .feature-item p {
        font-size: 0.85rem;
    }
}