/* 1단계: 메인 히어로 영역 스타일 (style 속성으로 넣었던 것) */
.main-hero {
    text-align: center;
    padding: 80px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}
.main-hero h1 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 20px;
}
.main-hero p {
    font-size: 1.1rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto 30px auto;
}
.main-hero .cta-button {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.2s;
}
.main-hero .cta-button:hover {
    background-color: #0056b3;
}

/* 2단계: 대시보드 및 최신글 목록 스타일 */
.dashboard-container {
    padding: 60px 20px;
    text-align: center;
}

.dashboard-container h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.dashboard-container p {
    font-size: 1rem;
    color: #888;
    margin-bottom: 40px;
}

/* 최신글 위젯을 담을 그리드(Grid) 컨테이너 */
.latest-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2개의 열을 만듭니다. */
    gap: 20px; /* 위젯 사이의 간격을 줍니다. */
    max-width: 1100px;
    margin: 0 auto;
    text-align: left; /* 위젯 내부 글자는 왼쪽 정렬 */
}

/* 최신글 위젯(latest) 스타일 */
.latest-widget .lat_box { /* 그누보드 latest 함수가 생성하는 기본 클래스(.lat_box)를 사용합니다 */
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 20px;
    height: 100%; /* 그리드 각 칸의 높이를 동일하게 맞춥니다. */
}

.latest-widget .lat_title { /* 최신글 제목 스타일 */
    font-size: 1.3rem;
    font-weight: 500;
    padding-bottom: 10px;
    border-bottom: 2px solid #333; /* 제목 아래에 구분선을 넣습니다. */
    margin-bottom: 15px;
}

.latest-widget .lat_list li { /* 최신글 목록 각 항목 스타일 */
    padding: 5px 0;
}

/* 모바일 반응형 처리 */
@media (max-width: 768px) {
    .latest-grid {
        grid-template-columns: 1fr; /* 화면 너비가 768px 이하일 때 1열로 변경됩니다. */
    }
}

/* 3단계: 사이드바 및 콘텐츠 영역 레이아웃 */
#content-wrapper {
    display: flex;
    gap: 20px;
    padding: 20px 0;
}

/* 사이드바 위젯 공통 스타일 */
.sidebar-widget {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
}

.sidebar-widget h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* React 앱 이동 배너 스타일 */
.to-react-app {
    padding: 20px;
    background: #f0f7ff;
    border-color: #cce5ff;
}
.to-react-app h4 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: bold;
    color: #004085;
}
.to-react-app p {
    font-size: 13px;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.4;
}
.to-react-app .cta-button {
    display: block;
    padding: 10px;
    background: #007bff;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.3s;
}
.to-react-app .cta-button:hover {
    background: #0056b3;
}

/* 회원정보 위젯 스타일 */
.member-info ul { list-style: none; padding: 0; margin: 0 0 15px 0; }
.member-info ul li { padding: 4px 0; color: #333; }
.member-info ul li i { margin-right: 8px; color: #888; }
.member-info .memo { margin-right: 10px; }

/* 바로가기 메뉴 위젯 스타일 */
.quick-menu {
    padding: 20px;
}
.quick-menu h4 {
    margin: 0 0 15px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
}
.quick-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.quick-menu li {
    margin-bottom: 8px;
}
.quick-menu li a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    display: block;
    padding: 5px 0;
    border-bottom: 1px solid #f1f1f1;
}
.quick-menu li a:hover {
    color: #007bff;
    transform: translateX(5px);
    transition: 0.2s;
}

/* ============== [ 와이드 레이아웃 적용 ] ============== */
/* 그누보드 기본 레이아웃의 최대 너비를 제한하는 것을 해제합니다. */
#hd_wrapper, #wrapper, #ft {
    max-width: none; /* 최대 너비 제한 해제 */
    width: 100%;     /* 너비를 100%로 설정 */
}

/* 콘텐츠 영역의 좌우 여백을 보기 좋게 추가합니다. */
.inner, #hd_wrapper > div, #gnb .gnb_wrap, #container_wr {
    max-width: 1400px; /* 콘텐츠 최대 너비를 1400px 정도로 설정 (너무 넓어지지 않게) */
    width: auto;
    margin: 0 auto;
    padding-left: 20px;  /* 좌측 여백 */
    padding-right: 20px; /* 우측 여백 */
}

/* 푸터 영역은 풀 너비로 유지 */
#ft_wr {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}


/* ============== [ 3단 레이아웃 너비 비율 조정 ] ============== */
/* 사이드바 너비를 약간 줄이고, 본문 너비를 늘립니다. */


/* ============== [ 헤더 디자인 개선 ] ============== */
/* 최상단 '커뮤니티' / 'Q&A' 등이 있는 바 */
#tnb {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

/* 로고와 검색창이 있는 영역 */
#hd_wrapper {
    padding: 20px 0;
}

/* 메인 메뉴바 */
#gnb {
    background: #fff;
    border-top: 1px solid #e9ecef;
    border-bottom: 2px solid #333; /* 메뉴바 하단에 강조선 추가 */
}

/* ==================================================
   AI.DOCTOR 사이드바 (Integrated Sidebar)
   ================================================== */
/* 1. [기존] React 앱 배너 스타일 보강 */
/* (.to-react-app 스타일은 위에서 이미 정의됨) */

/* 2. [신규] 내 정보 (기여도 포함) */
.my-info-box { padding: 20px; }
.my-profile { display: flex; align-items: center; margin-bottom: 15px; }
.my-profile .profile-img { width: 50px; height: 50px; border-radius: 50%; background: #eee; overflow: hidden; margin-right: 15px; flex-shrink: 0; }
.my-profile .profile-img img { width: 100%; height: 100%; object-fit: cover; }
.my-name { font-weight: bold; font-size: 16px; color: #333; }
.my-grade { font-size: 12px; color: #888; display: block; margin-top: 2px; }
.my-stats { background: #f8f9fa; border-radius: 6px; padding: 12px; margin-bottom: 15px; font-size: 13px; list-style: none; padding-left: 0; }
.my-stats li { display: flex; justify-content: space-between; margin-bottom: 5px; color: #555; }
.my-stats b { color: #3c4b64; }
.my-btn-group { display: flex; gap: 5px; }
/* 내 정보 위젯 버튼 정렬 수정 */
.my-btn-group .btn {
    display: flex !important;       /* Flexbox 모드로 변경 */
    align-items: center;            /* 수직(세로) 중앙 정렬 핵심 코드 */
    justify-content: center;        /* 수평(가로) 중앙 정렬 */
    
    height: 40px;                   /* 버튼 높이를 고정 (원하는 만큼 조절 가능) */
    padding: 0 !important;          /* 기존 패딩 초기화 (높이를 고정했으므로) */
    line-height: 1 !important;      /* 줄 간격 영향 제거 */
    
    /* 기존 스타일 유지 */
    flex: 1;
    font-size: 13px;
    border-radius: 4px;
    text-decoration: none;
    color: #fff !important;
    margin: 0 2px;                  /* 버튼 사이 간격 미세 조정 */
}
.btn-blue { background: #3c4b64; }
.btn-gray { background: #6c757d; }

/* 로그인 폼 (비로그인 시) */
.login-input { width: 100%; padding: 10px; margin-bottom: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
.btn-login { width: 100%; background: #3c4b64; color: #fff; padding: 10px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
.login-links { margin-top: 10px; text-align: center; font-size: 12px; }
.login-links a { color: #666; text-decoration: none; }

/* 3. [신규] 세미나 위젯 */
.seminar-header { background: #3c4b64; color: #fff; padding: 15px; text-align: center; }
.seminar-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.seminar-header span { display: block; font-size: 11px; color: #ffeb3b; margin-top: 5px; }
.seminar-info { padding: 12px; border-bottom: 1px solid #eee; background: #f9f9f9; font-size: 12px; color: #333; }
.seminar-info p { margin: 5px 0; }
.seminar-list-box { height: 300px; overflow-y: auto; padding: 15px; }
.seminar-list-box::-webkit-scrollbar { width: 5px; }
.seminar-list-box::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 3px; }
.program-item { margin-bottom: 15px; }
.program-item h4 { margin: 0 0 4px; font-size: 13px; color: #0056b3; font-weight: bold; }
.program-item p { margin: 0; font-size: 12px; color: #555; line-height: 1.4; letter-spacing: -0.5px; word-break: keep-all; }
.seminar-footer { padding: 12px; background: #fffdf2; border-top: 1px solid #eee; text-align: center; }
.btn-register { display: block; width: 100%; padding: 10px 0; background: #2979ff; color: #fff; font-weight: bold; border-radius: 5px; text-decoration: none; transition: 0.3s; }

/* 4. [신규] 인기글 위젯 */
.best-widget { padding: 20px; }
.best-widget h3 { margin: 0 0 15px; font-size: 16px; border-bottom: 2px solid #333; padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
.best-widget h3 a { font-size: 11px; color: #999; font-weight: normal; text-decoration: none; }
.best-widget ul { list-style: none; padding: 0; margin: 0; }
.best-widget li { margin-bottom: 10px; border-bottom: 1px solid #f1f1f1; padding-bottom: 8px; display: flex; align-items: center; }
.best-rank { background: #e9ecef; color: #495057; width: 20px; height: 20px; text-align: center; line-height: 20px; border-radius: 4px; font-size: 11px; font-weight: bold; margin-right: 10px; flex-shrink: 0; }
.best-widget li:nth-child(1) .best-rank { background: #ff6b6b; color: #fff; } 
.best-widget li:nth-child(2) .best-rank { background: #faa2c1; color: #fff; } 
.best-widget li:nth-child(3) .best-rank { background: #fcc419; color: #fff; }
.best-title { font-size: 13px; color: #333; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; max-width: 140px; }
.best-count { font-size: 11px; color: #adb5bd; margin-left: 5px; }

/* ==================================================
   레이아웃 설정 (REM 단위 적용 - 모바일/태블릿/PC)
   ================================================== */

/* [PC 화면] - 992px 이상일 때 */
@media (min-width: 992px) {
    /* 1. 사이드바 영역 */
    #sidebar {
        width: 17.5rem;
        float: right;
        margin-left: 1.5rem;
        display: block;
        box-sizing: border-box;
    }

    /* 2. 메인 콘텐츠 영역 */
    #container, .content_wrap { 
        width: calc(100% - 19rem) !important; 
        float: left;
        box-sizing: border-box;
    }

    /* 3. 메뉴를 본문 시작 위치로 이동 */
    #gnb {
        padding-left: 19rem;
        box-sizing: border-box;
    }
}

/* [모바일/태블릿 화면] - 991px 이하일 때 */
@media (max-width: 991px) {
    #sidebar {
        width: 100%;           
        float: none;
        margin: 2rem 0;
        display: block;
    }
    
    #container, .content_wrap {
        width: 100% !important;
        float: none;
    }
}

/* [노트북 화면] 992px ~ 1600px: 메뉴 한 줄 맞추기 */
@media (min-width: 992px) and (max-width: 1600px) {
    #gnb {
        padding-left: 18rem !important; 
    }

    #gnb .gnb_1da {
        padding: 0 0.7rem !important;
        font-size: 0.95rem !important;
        letter-spacing: -0.05rem;
    }
}

/* --------------------------------------------------
   위젯 내부 디자인 (유지)
   -------------------------------------------------- */
.sidebar-widget, .my-info-box, .seminar-widget, .best-widget { 
    background: #fff; 
    border: 1px solid #dee2e6; 
    border-radius: 0.5rem; /* 모서리 둥글기도 rem으로 */
    margin-bottom: 1.25rem; 
    overflow: hidden;
    width: 100%; 
    box-sizing: border-box;
}

/* ==================================================
   상단 메뉴(GNB) 디자인 강화
   ================================================== */

/* 1. 메뉴바 배경과 테두리 설정 */
#gnb {
    background-color: #3c4b64;      /* 배경: 무게감 있는 딥 네이비 (사이드바와 통일) */
    border-bottom: 3px solid #2979ff; /* 하단: 밝은 파란색 포인트 라인 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 은은한 그림자로 입체감 추가 */
}

/* 2. 메뉴 글자 스타일 (1단계 메뉴) */
#gnb .gnb_1da {
    color: #fff !important;         /* 글자색: 흰색으로 변경하여 가독성 확보 */
    font-weight: 700;               /* 글자 두께: 두껍게 */
    font-size: 1.05rem;             /* 글자 크기: 살짝 키움 */
    letter-spacing: -0.5px;         /* 자간 조절로 세련된 느낌 */
    padding: 0 1.5rem;              /* 메뉴 간 좌우 간격을 넉넉하게 */
    line-height: 3rem;              /* 세로 높이 확보 */
    display: block;
}

/* 3. 마우스 올렸을 때 (Hover) 효과 */
#gnb .gnb_1da:hover,
#gnb .gnb_1da:focus {
    background-color: #2979ff;      /* 배경: 마우스 올리면 밝은 파란색 */
    color: #fff !important;         /* 글자색: 유지 */
    text-decoration: none;          /* 밑줄 제거 */
    transition: all 0.3s ease;      /* 색상이 부드럽게 바뀌는 애니메이션 */
}

/* (선택사항) 모바일 메뉴 버튼 색상도 흰색으로 변경 */
#gnb .gnb_btn_op { color: #fff; }
#gnb .gnb_btn_cl { color: #fff; }

/* 5. 상단 이동 버튼 디자인 변경 */
#top_btn {
    background: #3c4b64; /* 네이비색 */
    color: #fff;
    width: 40px; height: 40px;
    border-radius: 50%; /* 둥근 버튼 */
    border: none;
    bottom: 30px; right: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: 0.3s;
}
#top_btn:hover { background: #2979ff; transform: translateY(-3px); }
#top_btn i { line-height: 40px; }

/* 모바일 반응형 */
@media (max-width: 768px) {
    .ft_links { gap: 15px; font-size: 12px; flex-wrap: wrap; }
    .ft_main { flex-direction: column; gap: 30px; }
    .ft_col { min-width: 100%; }
}

/* ==========================================================================
   [긴급 수정] default.css의 고정값 초기화 및 Flex 레이아웃 적용
   ========================================================================== */

/* 1. 전체 래퍼의 너비 제한 해제 - 푸터는 풀 너비 */
#hd, #wrapper, #ft {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none; /* 제약 없음 */
    margin: 0 auto;
    box-sizing: border-box;
}

#hd_wrapper, #container_wr {
    width: 100% !important;
    max-width: 1400px; /* 콘텐츠 최대 너비 설정 */
    margin: 0 auto;
    box-sizing: border-box;
}

#ft_wr {
    width: 100% !important;
    max-width: 100% !important; /* 푸터 풀 너비 */
    min-width: 0 !important;
    margin: 0 !important; /* 마진 제거 */
    padding: 0 20px;
    box-sizing: border-box;
}

/* 2. Flex 레이아웃 부모 설정 */
#content-wrapper {
    display: flex;
    gap: 30px; /* 사이드바와 본문 사이 간격 */
    align-items: flex-start; /* 상단 정렬 */
    padding: 20px;
}

/* 3. 사이드바 (좌측) */
#sidebar {
    width: 280px; /* 사이드바 고정 너비 */
    flex-shrink: 0; /* 화면 줄어들 때 찌그러짐 방지 */
    float: none !important; /* default.css의 float 해제 */
    margin: 0 !important;
}

/* 4. 본문 영역 (우측) - 가장 중요! */
#container {
    flex-grow: 1; /* 남은 공간 모두 차지 */
    width: auto !important; /* default.css의 930px 고정 해제 */
    min-width: 0; /* flex 자식 요소 넘침 방지 */
    float: none !important; /* default.css의 float 해제 */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important; /* 혹시 모를 테두리 제거 */
}

/* 5. 모바일 반응형 (768px 이하) */
@media (max-width: 991px) {
    #content-wrapper {
        flex-direction: column; /* 세로 배치 */
    }
    #sidebar {
        width: 100%;
        margin-bottom: 30px !important;
    }
    #container {
        width: 100% !important;
    }
}

/* ==================================================
   [헤더 높이 축소 및 정렬 개선] 
   ================================================== */

/* 1. 검은색 헤더 영역 높이 줄이기 */
#hd_wrapper {
    height: 70px !important;       /* 기존 140px -> 70px로 축소 */
    display: flex !important;      /* 요소 배치를 쉽게 하기 위해 Flexbox 사용 */
    align-items: center !important;/* 수직 중앙 정렬 (위아래 여백 자동 맞춤) */
    justify-content: space-between !important; /* 좌우 끝으로 배치 */
    padding: 0 20px !important;    /* 좌우 여백 */
}

/* 2. 로고 위치 및 크기 최적화 */
#logo {
    float: none !important;        /* 기존 float 해제 */
    padding: 0 !important;         /* 불필요한 여백 제거 */
    margin: 0 !important;
}

#logo img {
    max-height: 50px !important;   /* 로고 이미지가 헤더를 넘지 않게 제한 */
    width: auto !important;
}

/* 3. 검색창 위치 조정 */
.hd_sch_wr {
    float: none !important;        /* 기존 float 해제 */
    padding: 0 !important;         /* 불필요한 여백 제거 */
    margin: 0 0 0 30px !important; /* 로고와의 간격만 유지 */
    width: auto !important;        /* 고정 너비 해제 */
    flex-grow: 1;                  /* 남은 공간 활용 */
    max-width: 600px;              /* 너무 길어지지 않게 제한 */
}

/* 검색창 내부 fieldset 높이 맞춤 */
#hd_sch {
    border-radius: 5px !important; /* 둥근 모서리 약간 줄임 */
}

#hd_sch #sch_stx, 
#hd_sch #sch_submit {
    height: 40px !important;       /* 검색창 높이도 45px -> 40px로 살짝 축소 */
    line-height: 40px !important;
}

/* 4. 우측 로그인/회원가입 링크 위치 조정 */
.hd_login {
    position: static !important;   /* 절대 위치(top:60px) 해제 */
    top: auto !important;
    right: auto !important;
    margin-left: 20px !important;
}

.hd_login li {
    line-height: 70px !important;  /* 헤더 높이에 맞춰 세로 중앙 정렬 */
    border-left-color: #555 !important; /* 구분선 색상 흐리게 */
}

/* ==================================================
   [헤더 색상 테마 변경: 블랙 -> 라이트 그린] 
   ================================================== */

/* 1. 배경색 변경 (검정 -> 연한 그린) */
#hd, #tnb, #hd_wrapper {
    background-color: #e8f5e9 !important; /* [수정가능] 여기에 원하시는 연한 초록색 코드(예: #dff0d8)를 넣으세요 */
    border-bottom-color: #c8e6c9 !important; /* 하단 테두리는 배경보다 살짝 진한 색으로 */
}

/* 2. 글자색 변경 (흰색 -> 짙은 회색) */
/* 상단 메뉴(FAQ, Q&A 등)와 로그인 링크 */
#hd_qnb li a, 
.hd_login li a,
.hd_login li {
    color: #333 !important;        /* 잘 보이도록 짙은 회색으로 변경 */
}
#hd_qnb li span { /* 접속자 수 텍스트 등 */
    color: #555 !important;
}

/* 3. 검색창 디자인 변경 (어두운 회색 -> 흰색/깔끔하게) */
#hd_sch #sch_stx {
    background-color: #fff !important; /* 입력창 배경을 흰색으로 */
    color: #333 !important;            /* 입력 글자색 검정 */
    border: 1px solid #b2dfdb !important; /* 테두리를 은은한 초록으로 */
}

#hd_sch #sch_submit {
    background-color: #00897b !important; /* 돋보기 버튼을 포인트 컬러(진한 녹색)로 */
    color: #fff !important;               /* 돋보기 아이콘은 흰색 유지 */
}

/* 4. 모바일 메뉴 버튼 색상 반전 */
.gnb_menu_btn i, 
.gnb_close_btn i {
    color: #333 !important; /* 햄버거 메뉴 아이콘도 검정으로 */
}


/* ==================================================
   [갤러리 게시판 타일 스타일 적용] 
   ================================================== */

/* 갤러리 목록을 감싸는 UL 태그 (스킨에 따라 클래스명이 다를 수 있으나 보통 #bo_gall_ul 사용) */
#bo_gall_ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; /* 최소 250px 크기로 자동 채움 */
    gap: 20px !important; /* 타일 간격 */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* 개별 타일 (LI 태그) */
#bo_gall_ul > li {
    width: auto !important; /* 고정 너비 해제 */
    margin: 0 !important;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

#bo_gall_ul > li:hover {
    transform: translateY(-5px); /* 마우스 올리면 살짝 뜸 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 썸네일 이미지 영역 */
#bo_gall_ul .gall_img {
    width: 100%;
    height: 180px; /* 이미지 높이 통일 */
    overflow: hidden;
}

#bo_gall_ul .gall_img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율 유지하며 꽉 채우기 */
}

/* 제목 및 텍스트 영역 */
#bo_gall_ul .gall_text_href {
    padding: 15px;
    display: block;
}
#bo_gall_ul .gall_text_href a {
    font-weight: bold;
    font-size: 16px;
    color: #333;
}

/* ==================================================
   [최종 수정] 푸터 좌우 배치형 (충돌 해결 버전)
   ================================================== */

/* 1. 푸터 배경 및 기본 설정 (기존 스타일 덮어쓰기) */
#ft {
    background: #fff !important;  /* 하얀색 배경 */
    border-top: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    min-width: 0 !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* 2. 내부 박스 좌우 배치 (핵심) */
#ft_wr {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 1400px !important; /* 콘텐츠 최대 너비 */
    margin: 0 auto !important;
    padding: 10px 20px !important; /* 높이 감소: 40px → 10px */
    box-sizing: border-box;
    text-align: left !important;
    gap: 20px;
}

/* 3. [좌측] 링크와 카피라이트 영역 */
.ft_left {
    text-align: left;
    flex: 1; /* 공간 차지 */
}

#ft_link {
    margin-bottom: 0px; /* 마진 제거 */
    display: block !important;
}

#ft_link a {
    color: #444 !important;
    margin-right: 15px;
    font-size: 13px; /* 글자 크기 축소 */
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
}

/* 개인정보처리방침 강조 */
#ft_link a[href*="privacy"] {
    color: #00897b !important;
    font-weight: bold !important;
}

#ft_copy {
    color: #888 !important;
    font-size: 12px;
    margin-top: 0;
    display: block;
    width: 100% !important;
    text-align: center !important;
    padding: 8px 0 !important; /* 높이 감소: 20px → 8px */
    border-top: 1px solid #e9ecef !important;
}

/* 4. [우측] 회사 정보 영역 */
.ft_right {
    text-align: right; /* 우측 정렬 */
    flex: 1; /* 좌측과 균등하게 공간 분배 */
    max-width: 50%; /* 최대 50% 너비로 제한 */
    overflow: hidden; /* 오버플로우 방지 */
}

#ft_company {
    color: #777 !important;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
    text-align: right; /* 우측 정렬 유지 */
    word-break: break-word; /* 긴 단어도 자동 줄바꿈 */
    overflow-wrap: break-word; /* 호환성 */
}

#ft_company p {
    margin: 0;
    padding: 0;
    display: block; /* 각 항목을 줄 단위로 표시 */
    line-height: 1.3; /* 줄 간격 축소 */
    font-size: 11px; /* 글자 크기 축소 */
}

#ft_company strong {
    color: #333;
    font-size: 13px;
    display: inline; /* 회사명은 텍스트와 같이 */
}

/* 5. 모바일 반응형 (화면이 좁을 땐 위아래로) */
@media (max-width: 991px) {
    #ft_wr {
        flex-direction: column !important; /* 모바일은 세로 배치 */
        text-align: center !important;
        gap: 20px;
        padding: 40px 20px;
    }
    
    .ft_left, .ft_right {
        text-align: center;
        width: 100%;
    }
    
    .ft_right {
        margin-top: 10px;
        padding-top: 20px;
        border-top: 1px solid #eee; /* 모바일에서 구분선 추가 */
    }
}

/* 불필요한 기존 요소 숨김 */
#visit, .ft_catch { display: none !important; }