/* 초기화 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    line-height: 1.5;
    background-color: #fff;
    overflow-x: hidden;
}

ul { list-style: none; }
a { text-decoration: none; color: inherit; }

/* ---------------- HEADER ---------------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff; /* 초기 회색 */
    z-index: 9999;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* 스크롤 시 변경될 스타일 (JS에서 클래스 토글) */
.header.scrolled {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-inner {
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-title a {
    font-size: 30px;
    font-weight: 700;
    color: #333; /* 초기 흰색 */
    transition: color 0.4s;
}

.header.scrolled .header-title a {
    color: #333; /* 스크롤 시 검정 */
}

.header-nav ul {
    display: flex;
    gap: clamp(20px, 8vw, 120px); 
}

.header-nav ul li a {
    font-size: 18px;
    font-weight: 400;
    color: #333;
    transition: color 0.4s;
}

.header.scrolled .header-nav ul li a {
    color: #333;
}

.header-nav ul li a:hover {
    font-weight: 700;
}

/* ---------------- HERO ---------------- */
.hero {
    position: relative;
    width: 100%;
    height: 600px;
    background-color: #999;
    display: flex;
    justify-content: left;
    align-items: center;
    text-align: left;
    margin-top: 70px;
    overflow: hidden; /* 이미지가 튀어나가는 것 방지 */
}

/* 배경 이미지 */
.hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    background-image: url('../images/main.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    z-index: 0; /* 배경의 층수 */
}

/* 텍스트 컨테이너 (수정된 부분) */
.hero-content {
    /* [중요] 배경 위에 올라오게 하기 위한 설정 */
    position: relative; 
    z-index: 1; /* 배경(0)보다 높은 숫자로 설정 */

    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding-left: clamp(40px, 18vw, 50%);
    padding-right: clamp(40px, 18vw, 50%);
    box-sizing: border-box;
}

/* 폰트 스타일 유지 */
.hero-inner h2 {
    font-size: 70px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 32px;
    min-width: 700px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* 가독성을 위한 그림자 추천 */
}

.hero-inner p {
    font-size: 22px;
    color: #f1f1f1;
    font-weight: 300;
    line-height: 1.8;
    min-width: 700px;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5); /* 가독성을 위한 그림자 추천 */
}


/* ---------------- COMPANY INTRO ---------------- */
.company-intro {
    width: 100%;
    height: 600px;
    padding: 100px 20px;
    background-color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro-content h2 {
    font-size: 30px;
    font-weight: "bold";
    color: #222;
    line-height: 1.6;
    margin-bottom: 32px;
}

.intro-content .highlight {
    color: #007BFF; /* 이미지의 파란색 */
    font-weight: "bold";
}

.intro-content .sub-desc {
    font-size: 20px;
    color: #666;
    line-height: 1.6;
}

/* ---------------- SLIDER SECTIONS ---------------- */
.slider-section {
    width: 100%;
    padding: 60px 0 80px 0;
    background-color: #fff;
}

.slider-section.bg-gray {
    /* 주요 생산품 등 구분을 위해 배경색 다르게 할 경우 */
    background-color: #fff; 
}

.slider-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

/* 섹션 헤더 (제목 + 자세히 버튼) */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
}

.section-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: #111;
}

.details-btn {
    background: #fff;
    border: 1px solid #3e3e3e;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    color: #3e3e3e;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s;
}

.details-btn:hover {
    border-color: #000000;
    color: #000;
}

/* 슬라이더 영역 래퍼 */
.slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.slider-container {
    overflow: hidden;
    width: 100%;
}

.slider-track {
    display: flex;
    gap: 20px; /* 아이템 사이 간격 */
    transition: transform 0.5s ease-in-out;
}

/* 슬라이드 아이템 (반응형: PC 기준 4개 노출) */
.slider-item {
    flex: 0 0 calc(25% - 15px); /* 4개 배치 (gap 고려) */
    min-width: 250px;
    text-align: center;
}

.img-box {
    width: 100%;
    height: 250px; /* 이미지 높이 고정 */
    background-color: #e0e0e0;
    overflow: hidden;
    margin-bottom: 15px;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.slider-item:hover .img-box img {
    transform: scale(1.05); /* 호버 시 약간 확대 효과 */
}

.slider-item p {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

/* 슬라이드 좌우 버튼 */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-80%); /* 이미지 중앙 정렬 보정 */
    width: 50px;
    height: 50px;
    background-color: rgba(241, 241, 241, 0.8);
    border: 1px solid #333;
    border-radius: 50%; /* 원형 버튼 */
    font-size: 18px;
    color: #333;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.3s;
}

.slider-btn:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

.prev-btn { left: -30px; }
.next-btn { right: -30px; }


/* ---------------- FOOTER ---------------- */
.footer {
    background-color: #2F3E59; /* 이미지의 짙은 남색 */
    color: #fff;
    padding: 30px 0;
    font-size: 14px;
}

.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-info {
    display: flex;
    gap: 10px;
    color: #ccc;
}

.divider {
    color: #555;
    font-size: 12px;
    margin: 0 2px;
}

.footer-copy {
    color: #888;
}

/* ---------------- MEDIA QUERIES ---------------- */
@media (max-width: 992px) {
    .slider-item {
        flex: 0 0 calc(33.33% - 14px); /* 태블릿 3개 */
    }
}

@media (max-width: 768px) {
    .header-nav { display: none; } /* 모바일 메뉴 생략(간소화) */
    .hero-inner h2 { font-size: 28px; }
    .company-intro h2 { font-size: 24px; }
    
    .slider-item {
        flex: 0 0 calc(50% - 10px); /* 모바일 가로 2개 */
    }
    
    .footer-inner {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .footer-info {
        flex-direction: column;
        gap: 5px;
    }
    .divider { display: none; }
}


/* =========================================
   [서브 페이지 전용 스타일] - intro.html
   ========================================= */

/* 헤더: 서브페이지는 항상 흰색 배경에 검은 글씨 */
.header.sub-header {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.header.sub-header .header-title a,
.header.sub-header .header-nav ul li a {
    color: #333;
}
.header-nav ul li a.active {
    font-weight: 700;
    color: #000;
}

/* 메인 컨텐츠 영역 (헤더 높이만큼 여백) */
.sub-page-content {
    margin-top: 70px;
    padding-bottom: 100px;
    background-color: #fff;
}

/* 공통 섹션 스타일 */
.intro-section {
    padding: 80px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.section-inner {
    padding: 0 20px;
}

.section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #111;
}
.mb-50 { margin-bottom: 50px; }

/* ----------------------------------
   1. 레이아웃 분할 (이미지 vs 텍스트)
   ---------------------------------- */
.split-layout {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: flex-start;
}

.left-content, .right-content {
    flex: 1;
}

/* 이미지 래퍼 */
.img-wrapper img {
    width: 90%;
    height: auto;
    border-radius: 4px; /* 살짝 둥글게 */
    object-fit: cover;
    display: block;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* ----------------------------------
   2. 회사 개요 테이블 스타일
   ---------------------------------- */
.info-table {
    display: flex;
    flex-direction: column;
    gap: 18px;
    /*border-top: 2px solid #333;*/
}

.info-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* 텍스트 상단 정렬 */
}
 
.info-row .label {
    font-size: 16px;
    font-weight: 700;
    width: 80px;
    color: #333;
}

.info-row .divider {
    color: #ccc;
    margin: 0 15px;
    font-weight: 300;
}

.info-row .value {
    color: #555;
    width: 200px; /* 기본 너비 */
    font-size: 16px;
}

/* 주생산품처럼 내용이 길 경우 */
.info-row .value.full-width {
    width: calc(100% - 130px); /* 전체 너비에서 라벨 제외 */
    line-height: 1.6;
}

/* 두 번째 줄부터는 라벨 간격 조정 (PC 화면 기준 2열 배치) */
@media (min-width: 768px) {
    .info-row {
        display: flex;
        align-items: baseline;
    }
    /* 설립일 등 오른쪽 열 */
    .info-row .label:nth-of-type(2) {
        margin-left: 30px; 
    }
}

/* ----------------------------------
   3. 오시는 길 텍스트
   ---------------------------------- */
.location-info {
    margin-bottom: 32px;
}

.location-info h4 {
    font-size : 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

.location-info p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

.gray-text {
    color: #888;
    font-size: 14px;
}

/* ----------------------------------
   4. 조직도 (Org Chart) - 핵심 디자인
   ---------------------------------- */
.org-section {
    text-align: center; /* 제목 중앙 정렬 */
}

.org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

/* 박스 공통 스타일 */
.org-box {
    background-color: #EBF2F6; /* 이미지의 연한 하늘색 */
    border: 1px solid #C0D0D8;
    color: #333;
    text-align: center;
    padding: 15px 10px;
    width: 160px;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* CEO 박스 */
.org-box.ceo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px 10px;
}
.org-box.ceo strong { font-size: 16px; }

/* 선 색상 */
.org-chart .line-vertical-1,
.org-chart .line-horizontal,
.org-chart .line-vertical-2 {
    background-color: #999;
}

/* 1단 세로선 */
.line-vertical-1 {
    width: 1px;
    height: 40px;
}

/* 가로선 (전체 팀 너비를 커버) */
.line-horizontal {
    width: 75%; /* 팀들의 전체 너비에 맞춰 조정 (대략 3/4) */
    height: 1px;
}

/* 레벨 2 컨테이너 */
.level-2 {
    display: flex;
    justify-content: center;
    gap: 40px; /* 박스 사이 간격 */
    width: 100%;
}

.team-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 2단 세로선 (가로선에서 박스로 내려오는 선) */
.line-vertical-2 {
    width: 1px;
    height: 20px;
    margin-bottom: 0;
}

.org-box.team {
    padding: 12px 0;
}

/* ----------------------------------
   반응형 처리 (Mobile)
   ---------------------------------- */
@media (max-width: 992px) {
    .split-layout {
        flex-direction: column;
        gap: 30px;
    }
    .info-row .value { width: auto; }
    .line-horizontal { width: 90%; }
    .level-2 { gap: 10px; }
    .org-box { width: 100px; font-size: 13px; }
}

@media (max-width: 576px) {
    .level-2 {
        flex-wrap: wrap; /* 모바일에서 두 줄로 */
        gap: 10px;
    }
    .line-horizontal { display: none; } /* 모바일에선 선 복잡해서 숨김 */
    .line-vertical-2 { display: none; }
    
    .team-wrapper {
        width: 45%;
        margin-top: 10px;
    }
    .org-box { width: 100%; }
}

/* =========================================
   [설비소개 페이지 전용 스타일] - facility.html
   ========================================= */

.facility-page-section {
    padding: 60px 0 100px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.page-title {
    font-size: 30px;
    font-weight: 700;
    color: #111;
    margin-bottom: 40px;
    padding-left: 20px; /* 좌측 여백 */
}

/* GRID 레이아웃: 무한 확장 대응
   - PC: 2열 (repeat(2, 1fr))
   - 간격: 가로 40px, 세로 80px 
*/
.facility-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 60px; /* 좌우 카드 사이 간격 넓게 */
    row-gap: 80px;    /* 위아래 줄바꿈 간격 */
    padding: 0 20px;
    margin-bottom: 80px;
}

/* 개별 설비 카드 */
.facility-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 1. 카드 헤더 (제목 부분) */
.card-header {
    background-color: #F1F1F1; /* 연한 회색 배경 */
    padding: 5px 20px;
    margin-bottom: 20px;
    border-left: 5px solid #555; /* 좌측 포인트 선 (선택사항, 이미지 느낌 살림) */
}

.card-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

/* 2. 카드 이미지 */
.card-image {
    width: 100%;
    height: 350px; /* 이미지 높이 고정 */
    background-color: #ccc;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.facility-card:hover .card-image img {
    transform: scale(1.03);
}

/* 3. 스펙 테이블 (핵심 디자인) */
.card-specs table {
    width: 100%;
    border-collapse: separate; /* 셀 간격 분리 가능하도록 */
    border-spacing: 0 2px;     /* 행 사이 흰색 간격 2px */
}

/* 왼쪽 라벨 (어두운 회색) */
.card-specs th {
    background-color: #5D5D5D;
    color: #fff;
    font-weight: 500;
    width: 30%; /* 라벨 너비 */
    padding: 10px 0;
    text-align: center;
    font-size: 16px;
}

/* 오른쪽 값 (밝은 회색) */
.card-specs td {
    background-color: #F5F5F5;
    color: #333;
    padding: 10px 20px;
    text-align: left;
    font-size: 16px;
}

/* ----------------------------------
   페이지네이션 (하단 < 1 / 10 >)
   ---------------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.page-btn {
    background: #fff;
    border: 1px solid #ddd;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    transition: all 0.3s;
}

.page-btn:hover {
    border-color: #333;
    color: #333;
}

.page-num {
    font-size: 14px;
    color: #666;
}
.page-num strong {
    color: #000;
    font-weight: 700;
}

/* ----------------------------------
   반응형 (Mobile)
   ---------------------------------- */
@media (max-width: 992px) {
    .facility-grid {
        column-gap: 30px;
    }
}

@media (max-width: 768px) {
    .facility-grid {
        grid-template-columns: 1fr; /* 모바일에서는 1열로 변경 */
        row-gap: 50px;
    }
    .card-image {
        height: 250px; /* 모바일 이미지 높이 줄임 */
    }
}

/* =========================================
   [주요생산품 페이지 전용 스타일] - product.html
   ========================================= */

.product-page-section {
    padding: 60px 0 100px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.product-list {
    display: flex;
    flex-direction: column;
    gap: 80px; /* 제품 간 간격 */
    padding: 0 20px;
}

/* 개별 제품 행 (Row) */
.product-row {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* 상단 정렬 */
}

/* 1. 좌측 메인 이미지 */
.product-main-img {
    flex: 0 0 45%; /* 좌측 너비 45% */
    height: 400px; /* 고정 높이 */
    background-color: #f0f0f0;
    overflow: hidden;
}

.product-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. 우측 상세 정보 영역 */
.product-details {
    flex: 1; /* 나머지 공간 차지 */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 텍스트는 위, 슬라이더는 아래 */
    height: 400px; /* 좌측 이미지와 높이 맞춤 */
}

.product-info-text h3 {
    font-size: 24px;
    font-weight: "bold";
    color: #333;
    margin-bottom: 10px;
    
    background-color: #F1F1F1; /* 연한 회색 배경 */
    padding: 6px 20px;
    border-left: 5px solid #555; /* 좌측 포인트 선 (선택사항, 이미지 느낌 살림) */
}

.product-info-text p {
    font-size: 18px;
    color: #555;
    font-weight: 500;
    /*margin-left: 26px;*/
}

/* 3. 미니 슬라이더 (우측 하단) */
.mini-slider-wrapper {
    position: relative;
    width: 100%;
    padding: 0 50px; /* 좌우 버튼 공간 확보 */
}

.mini-slider-container {
    overflow: hidden;
    width: 100%;
}

.mini-slider-track {
    display: flex;
    gap: 15px; /* 썸네일 간격 */
    transition: transform 0.4s ease;
}

/* 미니 아이템 (한 화면에 3개 보이도록 계산) */
.mini-item {
    flex: 0 0 calc(33.333% - 10px); /* 3등분에서 gap 보정 */
    text-align: center;
}

.mini-img {
    width: 100%;
    height: 220px;
    background-color: #f9f9f9;
    margin-bottom: 10px;
}
.mini-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-img img:hover {
  transform: scale(1.1);
  opacity: 0.85;
}

.mini-item span {
    font-size: 12px;
    color: #666;
    letter-spacing: -0.5px;
}

/* 미니 슬라이더 버튼 (회색 사각형) */
.mini-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-60%); /* 텍스트 고려해서 살짝 위로 */
    width: 35px;
    height: 35px;
    background-color: #888; /* 이미지의 회색 */
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s;
}

.mini-btn:hover {
    background-color: #555;
}
.mini-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.mini-prev { left: 0; }
.mini-next { right: 0; }

.bottom_margin {margin-top: 15px;}

.card-header-2 {
    background-color: #F1F1F1; /* 연한 회색 배경 */
    padding: 5px 20px;
    margin-bottom: 20px;
    border-left: 5px solid #555; /* 좌측 포인트 선 (선택사항, 이미지 느낌 살림) */
}

.card-header-2 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.facility-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 95px; /* 좌우 카드 사이 간격 넓게 */
    row-gap: 80px;    /* 위아래 줄바꿈 간격 */
}


/* ----------------------------------
   반응형 (Mobile)
   ---------------------------------- */
@media (max-width: 992px) {
    .product-row {
        flex-direction: column; /* 모바일: 세로 배치 */
        height: auto;
        gap: 20px;
    }
    .product-main-img {
        width: 100%;
        height: 250px;
        flex: none;
    }
    .product-details {
        width: 100%; 
        height: auto;
    }
    .mini-slider-wrapper {
        margin-top: 20px;
        padding: 0 40px;
    }
    .mini-item {
        flex: 0 0 calc(50% - 8px); /* 모바일: 썸네일 2개 노출 */
    }
}


/* ----------------------------------
   회사 개요 테이블 스타일 (세로형 수정)
   ---------------------------------- */
.info-table.vertical-type {
    display: flex;
    flex-direction: column; /* 무조건 세로로 쌓임 */
    gap: 14px; /* 항목 간 간격 */
    border-top: 1px solid #ddd;
    padding-top: 32px;
}

/* 각 행 스타일 */
.info-table.vertical-type .info-row {
    display: flex;
    align-items: flex-start; /* 내용이 길어져도 텍스트 상단 정렬 */
    width: 100%;
    font-size: 15px;
    border-bottom: 1px solid #eee; /* (선택사항) 항목마다 밑줄을 넣고 싶으면 유지, 아니면 삭제 */
    padding-bottom: 15px;          /* (선택사항) 밑줄과 텍스트 간격 */
}

/* 마지막 줄은 밑줄 제거 (선택사항) */
.info-table.vertical-type .info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 라벨 (기업명, 설립일 등) 너비 고정 */
.info-table.vertical-type .label {
    display: inline-block;
    width: 80px;  /* 너비를 고정해서 세로 라인을 맞춤 */
    font-weight: 700;
    color: #000;
    flex-shrink: 0; /* 줄어들지 않음 */
}

/* 구분선 (|) */
.info-table.vertical-type .divider {
    color: #ccc;
    margin: 0 20px; /* 좌우 여백 */
    font-weight: 300;
}

/* 값 (시티이엔지, 날짜 등) */
.info-table.vertical-type .value {
    color: #555;
    flex: 1; /* 남은 공간 모두 차지 */
    line-height: 1.6; /* 줄간격 확보 */
    word-break: keep-all; /* 단어 단위 줄바꿈 */
}

/* =========================================
   [추가] 하단 기타 설비 테이블 스타일
   ========================================= */

.facility-table-container {
    width: 100%;
    margin-top: 60px; /* 위쪽 그리드와 간격 */
    margin-bottom: 40px;
    padding: 0 20px;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 테이블 헤더 */
.custom-table thead th {
    background-color: #5D5D5D; /* 이미지의 진한 파란색 */
    color: #fff;
    padding: 15px;
    font-weight: 700;
    border: 1px solid #fff; /* 흰색 구분선 */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* 텍스트 그림자 */
    font-size : 16px;
}

/* 테이블 본문 행*/
.custom-table tbody td {
    background-color: #F5F5F5; /* 이미지의 연한 하늘색 */
    color: #333; /* 이미지의 진한 파란색 글씨 */
    padding: 12px;
    font-weight: 500;
    border: 1px solid #737373; /* 흰색 구분선 */
    font-size : 16px;
}

/* 호버 효과*/
.custom-table tbody tr:hover td {
    background-color: #dadada;
}

/* 반응형: 모바일에서는 글씨 크기 조정 */
@media (max-width: 768px) {
    .custom-table {
        font-size: 14px;
    }
    .custom-table th, .custom-table td {
        padding: 10px 5px;
    }
}