@charset "utf-8";

/* ==========================================================================
   [1단계] 공용 라이브러리 및 나눔고딕 웹폰트 로드
   ========================================================================== */
@import url(https://googleapis.com);

html { font-family: "Nanum Gothic", sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 100%; }
body { margin: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
input, select, textarea, button { font-size: 100%; font-family: 'Malgun Gothic', dotum, sans-serif; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: 14px; }
a { color: #fff; text-decoration: none; background-color: transparent; }
a:hover, a:active, a:focus { text-decoration: underline; outline: none; }
input:focus, select:focus, textarea:focus, button:focus { outline: none; }

/* ==========================================================================
   [2단계] 사이트 전체 차콜 먹색 베이스 및 상단 네비바 반투명 효과
   ========================================================================== */
html, body, #wrapper, #container, #wrapper_main, #sub_content, .sub_content, #main_content, .main_content, .col-md-4 {
    background-color: #0b0f19 !important;
    background: #0b0f19 !important;
    color: #f1f5f9 !important;
}
#wrapper { padding-top: 75px !important; }
#container { padding-top: 0px !important; }

/* 상단 슬림 네비바 유리창 효과 */
.navbar, .navbar-fixed-top, #hd_wrapper, .navbar-default {
    background-color: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid #1e293b !important;
    padding: 12px 0 !important;
    min-height: auto !important;
    height: auto !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
	z-index: 9999999 !important; /* 카드 점수보다 더 높은 절대 서열 점수 부여 */
}
.navbar-brand {
    color: #ffffff !important;
    font-family: 'Malgun Gothic', sans-serif;
    font-size: 17px;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: transform 0.3s ease-in-out !important;
}
.navbar-brand:hover { transform: scale(1.04) !important; }

/* ==========================================================================
   [3단계] 게시판 목록 및 추천 카드 컴포넌트 럭셔리 다크화
   ========================================================================== */
.gallery_latest {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    background-color: #111317 !important;
}
.thumbnail {
    background-color: #171e2e !important;
    border: 1px solid #28354f !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative !important;
}
.thumbnail h3, .thumbnail h3 a {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.datq-data-card {
    background-color: #0f1422 !important;
    border: 1px dashed #2e3d5a !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin: 4px 0 !important;
}
.datq-data-card b { color: #38bdf8 !important; font-size: 14px !important; font-weight: 700 !important; }
.datq-data-card span, .datq-data-card p { color: #94a3b8 !important; }

/* 마우스를 올렸을 때 위로 6픽셀 부드럽게 들리는 모션 효과 */
.gallery_latest .thumbnail:hover {
    transform: translateY(-6px) !important;
    z-index: 10 !important;
}

/* 상하단 대통합 마우스 오버 네온 색상 통일 (사각 실선 차단형) */
.gallery_latest .thumbnail:hover,
.gallery_latest .card-rank-top:hover,
.gallery_latest .card-rank-normal:hover,
.gallery_latest li:hover {
    border: 1px solid transparent !important;
	/* 마우스 오버 시 하이라이트 네온 효과 보정 */
    box-shadow: 0 12px 25px rgba(56, 189, 248, 0.45) !important; 
    position: relative !important;
    z-index: 99 !important;
}

/* ==========================================================================
   [4단계] 글보기, 댓글, 풋터 통합 대응 및 인라인 스위칭
   ========================================================================== */
#bo_v, #bo_v_link, section#bo_v_link, #bo_v_con, #bo_v_top, .bo_v_link {
    background-color: #1e1e22 !important;
    border: 1px solid #2a2a30 !important;
    border-radius: 12px !important;
}
#bo_v_title { color: #ffffff !important; font-weight: 800 !important; }
#bo_v_con, #bo_v_con p, #bo_v_con span, #bo_v_con b, #bo_v_con strong { color: #ffffff !important; }
#bo_v_con a { color: #38bdf8 !important; font-weight: 800 !important; text-decoration: underline !important; }

/* 6번 파일 쌩하얀색 인라인 강제 반전 저격 */
#bo_v_atc + div[style*="background-color:#fff"] {
    background-color: #171e2e !important;
    border: 1px solid #28354f !important;
    color: #ffffff !important;
}

/* 댓글 영역 다크 테마 */
#bo_vc, #bo_vc_w, .bo_vc_w, form[name="fviewcomment"], #bo_vc_w textarea, form[name="fviewcomment"] textarea {
    background-color: #1e1e22 !important;
    background: #1e1e22 !important;
    border: 1px solid #3a3a42 !important;
    border-radius: 12px !important;
    color: #ffffff !important;
}

/* 풋터 및 방문자 수 원래 원본 네온 불빛 수호 */
#footer, footer { background-color: #0b0f19 !important; border: none !important; }
.footer_num_today { color: #10b981 !important; text-shadow: 0 0 8px rgba(16,185,129,0.4) !important; }
.footer_num_yesterday { color: #3b82f6 !important; text-shadow: 0 0 8px rgba(59,130,246,0.4) !important; }
.footer_num_total { color: #eab308 !important; text-shadow: 0 0 8px rgba(234,179,8,0.5) !important; }

/* ==========================================================================
   [5단계] 관리자 단추 복원 및 경고 버튼 형광 레드 스위칭 ⚙
   ========================================================================== */
.bo_fx a, #bo_list .btn_b01, #bo_list .btn_b02, #bo_list .btn_admin, #bo_list input[type="submit"], .btn_b01, .btn_b02 {
    color: #ffffff !important; background-color: #2a2a30 !important;
    border: 1px solid #4a4a55 !important; border-radius: 6px !important;
    padding: 7px 15px !important; font-weight: 800 !important; display: inline-block !important;
}
#bo_list .btn_admin[href*="delete"], #bo_list input[value*="삭제"], a[href*="delete"], .btn_admin[href*="delete"] {
    background-color: #ef4444 !important; background: #ef4444 !important; border: none !important;
}
#hd_login_msg { display: none !important; }

/* ==========================================================================
   [6단계] 모바일 및 PC 환경 반응형 레이아웃 배치 최적화 세트 📱
   ========================================================================== */
@media (max-width: 768px) {
    body, #wrapper, #container { padding-top: 50px !important; }
    .container-fluid, #content, .m_content, .thumbnail { max-width: 100% !important; width: 100% !important; }
    
    /* 모바일 알약 로고 우측 상단 강제 고정 */
    .thumbnail, div[style*="background-color: #171e2e"] { position: relative !important; padding-right: 135px !important; }
    .stog-logo-box, div[style*="width: 110px"][style*="height: 38px"] { position: absolute !important; right: 16px !important; top: 16px !important; margin: 0 !important; }
    
    /* 별점 및 평점 수직 정렬 공간 개조 */
    .thumbnail div[style*="margin-left: 2px"], div[style*="display: inline-flex; align-items: center"] {
        position: absolute !important; right: 16px !important; top: 55px !important;
        display: inline-flex !important; width: 110px !important; justify-content: center !important; margin: 0 !important;
    }
}

/* PC 화면 가로 간격 밀어내기 정돈 */
@media (min-width: 769px) {
    .gallery_latest ul { margin-bottom: 35px !important; }
    body, #wrapper, #container, #wrapper_main { padding-top: 55px !important; margin-top: 0 !important; }
}

/* ==========================================================================
   [7단계] 뼈대 수호형 우측/하단 도화지 먹색 최종 영구 봉인 가드 🚨
   ========================================================================== */
#stog-body {
    background-color: #0b0f19 !important;
    background: #0b0f19 !important;
}
#stog-body #wrap, #stog-body #wrapper {
    background-color: #0b0f19 !important;
    position: static !important;
    height: auto !important;
    overflow: visible !important;
}
#footer, footer, .at-footer, .at-copyright, #footer div {
    background-color: #0b0f19 !important;
    background: #0b0f19 !important;
}

/* ==========================================================================
   [긴급 색상 원상복구] 하단 큰 박스 오리지널 명품 먹색 통일 패치 🚨
   ========================================================================== */

/* 54번 라인의 잘못된 색상을 걷어내고, 사장님이 대만족하셨던 오리지널 시크 차콜 먹색으로 강제 고정합니다 */
.gallery_latest .thumbnail,
.thumbnail {
    background-color: #171e2e !important;
    background: #171e2e !important;
    border: 1px solid transparent !important; /* 사각형 쌩파란선 차단 가드 유지 */
}

/* ==========================================================================
   [진짜 최종 마감] 1~3위 크림슨 레드 부활 및 4위 이하 블루 안개 100% 전원 복구 🚨
   ========================================================================== */

/* 1. [4위 이하 일반 박스 전용] 눈이 가장 편안한 10% 세기의 은은한 블루 안개형 야광을 100% 복구합니다 */
.thumbnail:hover,
.gallery_latest .thumbnail:hover,
.gallery_latest .card-rank-normal:hover,
.gallery_latest li:hover {
    border: 1px solid transparent !important;
    border-color: transparent !important;
    box-shadow: 0 12px 25px rgba(56, 189, 248, 0.25) !important; 
    transform: translateY(-6px) !important; /* 위로 부드럽게 들리는 명품 모션 보존 */
    position: relative !important;
    z-index: 500 !important;
}

/* 2. [1·2·3위 프리미엄 왕좌 전용] 1,2,3등 상자 주위로만 강렬하고 영롱한 크림슨 레드 네온과 명품 빨간색 실선 테두리를 확실하게 부활시킵니다 */
.gallery_latest .card-rank-top:hover,
.card-rank-top:hover {
    border: 1px solid #ff3344 !important; 
    border-color: #ff3344 !important;
    box-shadow: 0 12px 30px rgba(255, 51, 68, 0.35) !important; 
    transform: translateY(-6px) !important;
    position: relative !important;
    z-index: 501 !important;
}

/* 3. 마우스 오버 시에도 큰 박스 안쪽 배경색은 오리지널 명품 다크 룸 먹색으로 단단히 수호 */
.gallery_latest .thumbnail:hover, 
.gallery_latest .card-rank-top:hover, 
.gallery_latest .card-rank-normal:hover, 
.gallery_latest li:hover,
.thumbnail:hover {
    background-color: #171e2e !important;
    background: #171e2e !important;
}

/* 4. [업체명 제목 및 상자 중앙 정렬 가드] 큰 상자와 대형 업체명 제목만 정갈하게 센터 정렬을 사수합니다 */
.gallery_latest .thumbnail, .thumbnail {
    text-align: center !important;
}
.gallery_latest .thumbnail h3, .thumbnail h3, .gallery_latest .thumbnail h3 a, .thumbnail h3 a {
    text-align: center !important;
}

/* 5. [★핵심 해결책★ 설명 문구 왼쪽 정렬 원상복구] 
      가운데 정렬로 강제 왜곡되던 4줄짜리 안쪽 상세 리포트 설명글 문구들을 
      유저들이 평소 가장 읽기 편해하던 오리지널 정석 왼쪽 정렬 상태로 완벽하게 되돌려 놓습니다! */
.gallery_latest .datq-data-card,
.datq-data-card,
.datq-data-card *,
.gallery_latest .thumbnail .datq-data-card div,
.gallery_latest .thumbnail .datq-data-card p,
.gallery_latest .thumbnail .datq-data-card span {
    text-align: left !important; /* 지독한 오지랖 정렬 해제 및 원상태 컴백 복구 완료 */
}


/* ==========================================================================
   [긴급 추가 마감] 글쓰기 창(write.skin.php) 입력 필드 및 별점 다크 룸 완결 패치 🚨
   ========================================================================= */

/* 1. [입력 필드 대통합] 쌩하얀색으로 눈을 찌르던 모든 글쓰기 입력 상자, 셀렉트 박스를 럭셔리 다크 룸으로 반전 */
#fwrite input[type="text"],
#fwrite select,
#fwrite textarea,
#fwrite .frm_input {
    background-color: #1e1e22 !important; /* 칩 단추와 통일된 모던 차콜 블랙 */
    background: #1e1e22 !important;
    color: #ffffff !important; /* 사장님이 입력하시는 한글/영문 텍스트 무조건 선명하게 화이트 노출 */
    border: 1px solid #3a3a42 !important; /* 은은한 전용 테두리 선 가드 */
    border-radius: 6px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

/* 2. [별점 및 아이콘 영역 보호] 라디오 단추와 체크박스 주변 쌩하얀 바탕판 강제 파괴 투명화 */
#fwrite label,
#fwrite td,
#fwrite th,
.write_div label {
    color: #f1f5f9 !important; /* 안내 문구 글씨 부드러운 화이트 그레이 고정 */
    font-weight: 700 !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* 3. [파일 첨부 구역 튜닝] 파일 선택 버튼 주변의 보기 흉한 흰색 테두리와 배경 100% 투명화 소거 */
#fwrite input[type="file"] {
    color: #ffffff !important;
    background-color: #121214 !important; /* 메인 도화지 먹색과 완벽 일치 */
    border: 1px dashed #3a3a42 !important;
    border-radius: 6px !important;
    padding: 6px !important;
}

/* 4. 클릭수(조회수) 보정 상자 및 숨기기 버튼 영역 주변의 흰색 박스 가드 차단 깔맞춤 */
#fwrite div[style*="background"],
#fwrite div[style*="padding"] {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

/* ==========================================================================
   [진짜 최종 완결] 글쓰기 창(write.skin.php) 왼쪽 쏠림 타격 정중앙 대안착 패치 🚨
   ========================================================================== */

/* 왼쪽 구석탱이에 쳐박혀 있던 글쓰기 뼈대 테이블과 내부 폼 전체를 강제로 압수하여 
   게시판 목록과 똑같은 가로 최대 1200px 폭으로 화면 정중앙에 정갈하게 안착시킵니다. */
#fwrite,
.write_div,
#bo_w,
form[name="fwrite"],
form[name="fwrite"] table,
#fwrite table.table {
    width: 100% !important;
    max-width: 1200px !important; /* 메인 게시판과 단 1픽셀의 오차도 없는 와이드 폭 통일 */
    margin: 30px auto !important; /* 좌우 마진을 auto로 주어 강제로 화면 정중앙 배치 완료 */
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* 글쓰기 내부의 테이블 칸들이 찌그러지지 않도록 튼튼하게 골조 고정 */
#fwrite td, 
#fwrite th {
    box-sizing: border-box !important;
}

/* ==========================================================================
   [진짜 최종 마감] 글쓰기 창 작성완료 및 임시저장 버튼 시각 복원 패치 🚨
   ========================================================================== */

/* 1. [작성완료 & 취소 버튼 복원] 하얗게 날아가서 안 보이던 하단 버튼들을 
      게시판 관리자 버튼과 똑같은 묵직하고 모던한 차콜 블루 칩 단추로 전면 스위칭합니다. */
#fwrite .btn_submit,
#fwrite .btn_cancel,
.btn_confirm .btn_submit,
.btn_confirm .btn_cancel,
input[type="submit"].btn_submit {
    color: #ffffff !important; /* 글자색 무조건 쌩하얀색 선명하게 노출 */
    background-color: #2a2a30 !important; /* 묵직한 차콜 블루 배경 */
    background: #2a2a30 !important;
    border: 1px solid #4a4a55 !important; /* 은은한 전용 테두리 선 */
    border-radius: 6px !important;
    padding: 10px 25px !important;
    font-weight: 800 !important;
    display: inline-block !important;
    cursor: pointer !important;
}

/* 작성완료 버튼에 마우스를 올렸을 때 살짝 더 밝아지는 고급 인터랙션 */
#fwrite .btn_submit:hover,
.btn_confirm .btn_submit:hover {
    background-color: #3b82f6 !important; /* 마우스 오버 시 신뢰감 주는 블루 스위칭 */
    border-color: #60a5fa !important;
}

/* 2. [임시저장 버튼 및 팝업 복원] 우측 상단에 파묻혀 안 보이던 임시저장 상자들을 다크 모드로 완벽 깔맞춤 */
#btn_autosave,
.btn_autosave,
#autosave_pop,
.autosave_pop,
#fwrite input[type="button"] {
    color: #ffffff !important;
    background-color: #2a2a30 !important;
    background: #2a2a30 !important;
    border: 1px solid #4a4a55 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* ==========================================================================
   [진짜 최종 마감] 안쪽 게시판 목록 위아래 폭 수호 및 100% 정중앙 대안착 패치 🚨
   ========================================================================== */

/* 1. [정중앙 절대 권력 가드 찰칵] 
      사이드바가 파괴되면서 중심을 잃고 왼쪽 벽에 쳐박혀 있던 게시판 메인 뼈대 구조를 
      가로 최대 1200px 대시보드 폭으로 가두고, 화면 정확히 정중앙(center) 한가운데에 수평 안착시킵니다! */
#bo_list,
form[name="fboardlist"],
#wrapper_main,
#sub_content,
.sub_content,
#main_content,
.main_content {
    width: 100% !important;
    max-width: 1200px !important; /* 상단 배너 및 메인 로고 라인과 칼같이 일직선 매칭 */
    
    /* [정중앙 이동 치트키] 좌우 마진을 auto로 분배하여 왼쪽 구석의 가두리 사슬을 완전히 깨부수고
       화면 한가운데 정중앙 수평 균형을 완벽하게 맞춥니다! */
    margin: 30px auto !important; 
    
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* 2. 게시판 목록판 자체도 바깥 큰 방의 정중앙 수식에 맞추어 연동되도록 리셋합니다. */
.tbl_head01,
.tbl_head01 table,
#bo_list table,
form[name="fboardlist"] table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    margin: 15px auto !important;
    float: none !important;
    clear: both !important;
}

/* 3. 번호, 제목, 최고관리자 줄이 아래로 구겨지거나 세로로 무너지지 않도록 수평 행 서열을 완벽하게 고정 수호합니다. */
.tbl_head01 thead,
.tbl_head01 tbody,
.tbl_head01 tr {
    display: table-row !important;
    width: 100% !important;
}

/* 4. [사장님 맞춤형 7px 슬림 폭 영구 박제] 
      순정만큼 얇고 단정하게 다이어트 성공한 7px 높이 여백 가이드를 철통같이 그대로 고정 수호합니다! */
.tbl_head01 th,
.tbl_head01 td {
    display: table-cell !important;
    padding: 7px 10px !important; /* 위아래 패딩 7px의 슬림한 촘촘함 영구 고정 */
    vertical-align: middle !important;
    border-bottom: 1px solid #2a2a30 !important; /* 은은한 다크 룸 전용 바닥 실선 가드 */
    text-align: center !important; /* 번호, 날짜, 조회수는 댓큐 원본처럼 정갈하게 가운데 정렬 */
    white-space: nowrap !important; /* 글자 아래로 꺾임 현상 100% 원천 차단 */
}

/* 5. [제목 및 등수 왼쪽 정렬 사수] 
      가운데 정렬되면 흉해지는 [업체명 제목] 칸만 가장 가독성이 높은 정석 왼쪽 정렬로 격리 보호합니다. */
.tbl_head01 td.td_subject,
.tbl_head01 .td_subject a,
.tbl_head01 td:nth-child(3),
.tbl_head01 td:nth-child(3) a {
    text-align: left !important;
    padding-left: 25px !important; /* 왼쪽 간격을 넉넉히 벌려 정갈하게 가독성 사수 */
    white-space: normal !important;
}

/* 6. 오직 사장님이 대만족하셨던 눈이 가장 편안한 럭셔리 다크 룸 먹색 테마 일괄 도색 */
.tbl_head01 th { background-color: #1e1e22 !important; color: #ffffff !important; font-weight: 800 !important; }
.tbl_head01 td, .tbl_head01 td a { color: #e3e3e6 !important; }
.tbl_head01 tr:hover td { background-color: #1c1c20 !important; }




/* ==========================================================================
   [진짜 최종 마감] 상세보기 과거 유전자 결합 및 하단 카운터 대형 복원 패치 🚨
   ========================================================================== */

/* 1. [상세보기 방 전체 정중앙 1200px 프레임 안착] */
#bo_v, .bo_v_table, #bo_v_table {
    width: 100% !important; max-width: 1200px !important; margin: 30px auto !important; float: none !important; clear: both !important; box-sizing: border-box !important;
}

/* 2. [사장님 view.skin.php 내부 <style> 뼈대 소스 이사 대통합] */
#bo_v_con div[style*="background-color:#fff"], #bo_v_con div[style*="background-color: #fff"], #bo_v_con div[style*="background:#fff"], #bo_v_con div[style*="background: #fff"], #bo_v_con div[style*="background-color:#ffffff"], #bo_v_con div[style*="background-color: #ffffff"], div[style*="background-color:#fff"], div[style*="background-color: #fff"], #bo_v_link, .well, .alert {
    background-color: #1e1e22 !important; background: #1e1e22 !important; border: 1px solid #2a2a30 !important; border-radius: 12px !important;
}

/* 3. [오직 글보기 안쪽 본문의 폰트만 선명한 화이트로 고정 (풋터 번짐 차단)] */
#bo_v_con, #bo_v_con p, #bo_v_con span, #bo_v_con b, #bo_v_con strong, #bo_v_con td, #bo_v_top b, #bo_v_top strong, #bo_v_top span, .bo_v_link span, .bo_v_link_cnt, #bo_v_con div[style*="background"] p, #bo_v_con div[style*="background"] span {
    color: #ffffff !important; opacity: 1 !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important; text-decoration: none !important;
}

/* 4. 하이퍼링크 가시성 개선 및 복사/이동 칩 단추 포인트 블루 부활 */
#bo_v_top a, #bo_v_top a span, #bo_v_link a, #bo_v_link a span, .bo_v_link a, .bo_v_link a span, #bo_v_con a, #bo_v_con a span, table[style*="background"] a, div[style*="background"] a, .bo_v_com a, a[href*="move_copy.php"] {
    color: #38bdf8 !important; opacity: 1 !important; font-weight: 800 !important; text-decoration: underline !important;
}
#bo_v_con b, #bo_v_con strong { color: #38bdf8 !important; }

/* 5. [★간섭 분리 완결★ 하단 카피라이트 안내 글씨만 미니멀 소형화] 
      카운터 숫자는 철저하게 제외하고, 오직 길게 늘어진 하단 경고글과 카피라이트 설명글 텍스트만 
      사장님이 원하셨던 얇고 단정한 눈 안 아픈 11픽셀의 오리지널 슬레이트 회색으로 격리 제어합니다. */
.at-copyright,
#footer .at-copyright,
footer .at-copyright,
div[style*="text-align: center"][style*="color: #666"],
#footer div[style*="color"]:not([class*="num"]),
.at-copyright p,
.at-copyright span {
    color: #64748b !important; /* 눈시림 전혀 없는 정갈한 오리지널 슬레이트 회색 */
    font-size: 11px !important; /* 설명 문구만 단정하게 11px 소형 고정 */
    font-weight: 500 !important; /* 굵게 번졌던 뼈대를 얇게 안정화 */
    text-shadow: none !important;
    line-height: 1.6 !important;
}

/* 6. [★대형 카운터 부활 절대 수호 가드★] 
      위의 11px 축소 명령에 억울하게 휘말려 쪼그라들었던 대형 카운터 네온 숫자 상자들을 
      가장 강력한 마스터 우선 서열 이름표로  특유의 우람한 대형 크기와 쫀득한 폰트 두께로 100% 원상복원 */
.footer_num_today,
.footer_num_yesterday,
.footer_num_total,
span[class*="footer_num"],
div[class*="footer_num"] {
    font-size: 18px !important; /* 11px 난쟁이 장벽을 폭파하고 원래의 큼직한 18px 대형 규격 복원! */
    font-weight: 900 !important; /* 울트라 볼드 두께로 단단하게 고정 */
    letter-spacing: 4px !important; /* 숫자 간격을 쫀득하게 벌려 가독성 사수 */
    display: inline-block !important;
}


/* ==========================================================================
   ✨ 10위 가상 박스 전용 PC·모바일 통합 폰트 동기화 & 실시간 네온 애니메이션
   ========================================================================== */
@keyframes stog_pulse {
    0% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); opacity: 0.5; }
    50% { transform: scale(1.05); box-shadow: 0 0 6px 2px rgba(34, 197, 94, 0.9); opacity: 1; }
    100% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); opacity: 0.5; }
}

/* 🟢 실시간 숨 쉬는 초록 불빛 기본 규격 수식 */
.live-dot-box {
    display: inline-block !important;
    width: 6.5px;
    height: 6px;
    background-color: #22c55e;
    border-radius: 50%;
    flex-shrink: 0 !important;
    vertical-align: middle;
    margin-right: 5px;
    animation: stog_pulse 2s infinite ease-in-out;
}

/* 💻 PC 화면용: 1~9번 실제 웹하드 업체들과 폰트 스타일 100% 완벽 일치 동기화 장부 */
.pc-text-hide { 
    font-size: 12.5px !important; 
    font-weight: 700 !important; 
    letter-spacing: -0.5px !important; 
    white-space: nowrap !important; 
    display: inline-block; 
    vertical-align: middle; 
}

/* 🟢 [LIVE] 마크 크기를 실제 STOG 글씨와 1:1 동사이즈로 동기화 */
.pc-live-size {
    color: #22c55e !important;
    font-size: 12.5px !important; 
    font-weight: 700 !important; 
    letter-spacing: -0.5px !important;
    margin-left: 4px; 
    flex-shrink: 0; 
    vertical-align: middle;
    display: inline-block;
}

/* 📱 스마트폰 모바일 화면 진입 시 글자만 */
@media (max-width: 768px) {
    .pc-text-hide { 
        display: none !important;                /* 모바일에선 영문 'STOG'  */
    }  
    .pc-live-size { 
        font-size: 12.5px !important;            /* 모바일에서도 축소 없이 12.5px 대형 정사이즈*/
        font-weight: 700 !important; 
        margin-left: 3px !important; 
    } 
    .live-dot-box { 
        margin-right: 3px !important; 
    }
}


/* 1. 네비바(헤더) 전체를 감싸는 부모 요소 */
.header {
    display: flex;
    justify-content: space-between; /* 로고는 왼쪽 끝, 메뉴는 오른쪽 끝 정렬 */
    align-items: center;            /* 상하 정렬을 가운데로 맞춤 */
    width: 100%;
    padding: 0 20px;                /* 양쪽 끝 여백 (필요에 따라 조절) */
    box-sizing: border-box;
}

/* 2. 왼쪽 로고 + 동의어 문구 영역 */
.header .logo-area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;                /* 화면이 작아지면 문구들이 아래로 자연스럽게 내려가도록 설정 */
    max-width: calc(100% - 150px);  /* 오른쪽 메뉴 영역(예: 150px)을 침범하지 못하도록 최대 너비 제한 */
}

/* 3. 오른쪽 인프라 분석실 메뉴 버튼 영역 */
.header .menu-area {
    flex-shrink: 0;                 /* 화면이 좁아져도 메뉴 버튼 크기가 줄어들거나 찌그러지지 않게 고정 */
    margin-left: 20px;              /* 로고 문구와 메뉴 사이의 최소 안전거리 확보 */
}