/* 💡 스무스 스크롤 (문의하기 클릭 시 부드럽게 이동) */

    html {

        scroll-behavior: smooth;

    }



    /* 엘리멘터 충돌 방지 및 기본 설정 */

    .jd-hero-wrap {

        position: relative;

        font-family: 'Pretendard', 'Noto Sans KR', sans-serif;

    }



    /* 상단 헤더 (네비게이션) */

    .jd-header {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        z-index: 100;

        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    }



    .jd-header-container {

        max-width: 1200px;

        margin: 0 auto;

        padding: 20px;

        display: flex;

        justify-content: space-between;

        align-items: center;

    }



    .jd-logo {

        font-size: 24px;

        font-weight: 900;

        color: #ffffff;

        text-decoration: none;

        letter-spacing: 1px;

    }



    .jd-nav-menu {

        display: flex;

        gap: 40px;

        align-items: center;

    }



    .jd-nav-menu a {

        color: #e2e8f0;

        text-decoration: none;

        font-size: 16px;

        font-weight: 600;

        transition: color 0.3s;

    }



    .jd-nav-menu a:hover {

        color: #3b82f6;

    }



    /* 메인 히어로 섹션 */

    .jd-hero-section {

        position: relative;

        width: 100%;

        height: 650px;

        display: flex;

        align-items: center;

        overflow: hidden;

        background-color: #111;

    }



    .jd-slide {

        position: absolute;

        top: 0; left: 0;

        width: 100%; height: 100%;

        background-size: cover;

        background-position: center;

        z-index: 1;

        opacity: 0;

        animation: jdFadeInOut 10s infinite ease-in-out;

    }



    .jd-slide-1 {

        background-image: url('/images/photo-5.webp');

        animation-delay: 0s;

    }



    .jd-slide-2 {

        background-image: url('/images/photo-1.webp');

        animation-delay: 5s;

    }



    @keyframes jdFadeInOut {

        0% { opacity: 0; transform: scale(1.05); }

        15% { opacity: 1; transform: scale(1); }

        45% { opacity: 1; transform: scale(1); }

        55% { opacity: 0; transform: scale(1.05); }

        100% { opacity: 0; }

    }



    .jd-overlay {

        position: absolute;

        top: 0; left: 0;

        width: 100%; height: 100%;

        background: rgba(0, 0, 0, 0.6);

        z-index: 2;

    }



    .jd-content-wrap {

        position: relative;

        z-index: 3;

        width: 100%;

        max-width: 1200px;

        margin: 0 auto;

        padding: 0 20px;

        text-align: left;

    }



    .jd-subtitle {

        position: relative;

        font-size: 22px;

        font-weight: 800;

        color: #ffffff;

        margin-bottom: 25px;

        display: inline-block;

        letter-spacing: 1px;

    }



    .jd-subtitle::after {

        content: '';

        position: absolute;

        bottom: -12px;

        left: 0;

        width: 140%;

        height: 2px;

        background-color: #ffffff;

        opacity: 0.8;

    }



    .jd-title {

        font-size: 42px;

        font-weight: 700;

        color: #ffffff;

        line-height: 1.4;

        margin: 0;

        word-break: keep-all;

        text-shadow: 0 4px 15px rgba(0,0,0,0.5);

    }



    /* 💡 연락처 버튼 그룹 (PC와 모바일 모두 노출) */

    .jd-btn-group {

        display: flex;

        gap: 12px;

        margin-top: 30px;

        flex-wrap: wrap;

    }



    .jd-action-btn {

        padding: 14px 28px;

        font-size: 16px;

        font-weight: 700;

        text-decoration: none;

        border-radius: 8px;

        transition: transform 0.2s ease, background-color 0.2s ease;

        text-align: center;

    }



    /* 전화 연결 버튼 */

    .jd-btn-phone {

        background-color: #10b981;

        color: #ffffff;

        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);

    }

    .jd-btn-phone:active {

        transform: scale(0.96);

        background-color: #059669;

    }



    /* 카카오톡 연결 버튼 */

    .jd-btn-kakao {

        background-color: #FEE500;

        color: #000000;

        box-shadow: 0 4px 12px rgba(254, 229, 0, 0.3);

    }

    .jd-btn-kakao:active {

        transform: scale(0.96);

        background-color: #e5cf00;

    }



    /* 💡 모바일 반응형 처리 */

    @media (max-width: 768px) {

        .jd-header-container { padding: 15px 20px; }

        .jd-logo { font-size: 20px; }

        .jd-nav-menu { gap: 15px; }

        .jd-nav-menu a { font-size: 14px; }

        

        .jd-hero-section { height: 450px; }

        .jd-subtitle { font-size: 16px; margin-bottom: 20px; }

        .jd-subtitle::after { bottom: -8px; height: 1px; }

        .jd-title { font-size: 26px; line-height: 1.45; }

        

        /* 모바일에서는 강제 줄바꿈을 숨겨 자연스럽게 단어 단위로 줄바꿈되도록 처리 */

        .jd-title .mo-hide { display: none; }

        

        /* 모바일에서 버튼들이 나란히 예쁘게 배치되도록 조정 */

        .jd-btn-group {

            margin-top: 25px;

            gap: 10px;

        }

        .jd-action-btn {

            padding: 12px 20px;

            font-size: 15px;

        }

    }




    /* 메인 페이지용 단가표 래퍼 */

    .jd-main-table-wrap {

        width: 100%;

        max-width: 1200px;

        margin: 0 auto;

        font-family: 'Pretendard', 'Noto Sans KR', sans-serif;

    }



    /* 💡 고급형 상단 타이틀 영역 */

    .jd-main-header {

        display: flex;

        justify-content: center;

        align-items: baseline;

        gap: 10px;

        margin-bottom: 30px;

        position: relative;

        padding-bottom: 15px;

    }

    

    .jd-main-header::after {

        content: '';

        position: absolute;

        bottom: 0;

        left: 50%;

        transform: translateX(-50%);

        width: 60px;

        height: 3px;

        background-color: #0056b3; /* 중앙 파란색 밑줄 포인트 */

    }



    .jd-main-title {

        font-size: 28px;

        font-weight: 800;

        color: #1a2b4c;

        margin: 0;

        letter-spacing: -1px;

    }



    .jd-main-unit {

        font-size: 14px;

        font-weight: 600;

        color: #94a3b8;

    }



    /* 💡 모바일 스크롤 안내 문구 (수정됨: 중앙 정렬) */

    .jd-scroll-hint {

        display: none;

        text-align: center; /* 우측 정렬에서 중앙 정렬로 변경 */

        font-size: 13px;

        color: #64748b;

        margin-bottom: 12px;

        font-weight: 600;

        animation: swipe-hint 1.5s infinite ease-in-out;

    }



    @keyframes swipe-hint {

        0% { transform: translateX(0); }

        50% { transform: translateX(-5px); }

        100% { transform: translateX(0); }

    }



    /* 반응형 테이블 컨테이너 */

    .jd-table-scroll {

        width: 100%;

        overflow-x: auto; /* 모바일 가로 스크롤 허용 */

        border-radius: 12px;

        border: 1px solid #e1e5ee;

        box-shadow: 0 10px 30px rgba(0,0,0,0.02);

    }



    /* 💡 모던 테이블 디자인 */

    .jd-main-table {

        width: 100%;

        min-width: 800px; /* 모바일 깨짐 방지 */

        border-collapse: collapse;

        text-align: center;

        background-color: #fff;

    }



    .jd-main-table th {

        background-color: #ffffff;

        color: #1a2b4c;

        font-weight: 700;

        padding: 18px 10px;

        font-size: 15px;

        border-bottom: 2px solid #e1e5ee; /* 헤더 구분선 굵게 */

    }



    .jd-main-table td {

        padding: 16px 10px;

        border-bottom: 1px solid #f1f3f8;

        font-size: 15px;

        vertical-align: middle;

        white-space: nowrap;

    }



    /* 로딩 중 표시 애니메이션 */

    .loading-text { text-align: center; padding: 30px; font-weight: bold; color: #666; }



    /* 💡 모바일 환경 세팅 */

    @media (max-width: 768px) {

        .jd-main-header {

            flex-direction: column;

            align-items: center;

        }

        .jd-main-title { font-size: 24px; }

        

        /* 모바일 화면일 때만 스크롤 안내 문구 표시 */

        .jd-scroll-hint {

            display: block;

        }

    }




    /* 엘리멘터 충돌 방지 및 섹션 배경 설정 */

    .jd-intro-section {

        padding: 100px 20px;

        background-color: #f8f9fa; /* 단가표와 구분되는 연한 회색 배경 */

        font-family: 'Pretendard', 'Noto Sans KR', sans-serif;

    }



    .jd-intro-container {

        max-width: 1200px;

        margin: 0 auto;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 60px;

    }



    /* 💡 좌측 텍스트 영역 */

    .jd-intro-text {

        flex: 1;

        max-width: 450px;

    }



    .jd-intro-sub {

        display: inline-block;

        font-size: 15px;

        font-weight: 700;

        color: #0056b3; /* 파란색 포인트 */

        letter-spacing: 2px;

        margin-bottom: 20px;

    }



    .jd-intro-title {

        font-size: 46px;

        font-weight: 800;

        color: #111;

        line-height: 1.35;

        margin: 0 0 30px 0;

        word-break: keep-all;

        letter-spacing: -1px;

    }



    .jd-intro-title span {

        color: #0056b3; /* 파란색 강조 */

    }



    .jd-intro-desc {

        font-size: 18px;

        color: #555;

        line-height: 1.7;

        word-break: keep-all;

        margin: 0;

    }



    /* 💡 우측 4컷 이미지 갤러리 영역 */

    .jd-intro-gallery {

        flex: 1.2;

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

    }



    .jd-gal-item {

        position: relative;

        width: 100%;

        padding-top: 100%; /* 1:1 정방형 비율 유지 */

        border-radius: 16px;

        overflow: hidden;

        box-shadow: 0 15px 35px rgba(0,0,0,0.1);

    }



    .jd-gal-item img {

        position: absolute;

        top: 0; left: 0;

        width: 100%; height: 100%;

        object-fit: cover;

        transition: transform 0.6s ease;

    }



    /* 마우스 오버 시 사진 확대 효과 */

    .jd-gal-item:hover img {

        transform: scale(1.1);

    }



    /* 트렌디한 언발란스 레이아웃 (오른쪽 열의 사진들을 살짝 아래로 내림) */

    .jd-intro-gallery .jd-gal-item:nth-child(2),

    .jd-intro-gallery .jd-gal-item:nth-child(4) {

        transform: translateY(40px);

    }



    /* 💡 모바일 반응형 처리 */

    @media (max-width: 900px) {

        .jd-intro-section {

            padding: 70px 20px;

        }

        .jd-intro-container {

            flex-direction: column;

            gap: 50px;

        }

        .jd-intro-text {

            max-width: 100%;

            text-align: center;

        }

        .jd-intro-title {

            font-size: 34px;

        }

        .jd-intro-desc {

            font-size: 16px;

        }

        .jd-intro-gallery {

            width: 100%;

            gap: 15px;

            padding-bottom: 40px; /* 모바일에서 겹침 방지 여백 */

        }

        /* 모바일에서는 사진 위치를 일자로 정렬 */

        .jd-intro-gallery .jd-gal-item:nth-child(2),

        .jd-intro-gallery .jd-gal-item:nth-child(4) {

            transform: translateY(0);

        }

    }




    /* 다크 테마 섹션 배경 */

    .jd-feature-section {

        padding: 100px 20px;

        background-color: #ffffff;

        font-family: 'Pretendard', 'Noto Sans KR', sans-serif;

    }



    .jd-feature-container {

        max-width: 1200px;

        margin: 0 auto;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 80px;

    }



    /* 💡 좌측: 오버랩 이미지 영역 (PC 전용) */

    .jd-feature-images {

        flex: 1.1;

        position: relative;

        height: 500px;

    }



    .jd-feat-img-1, .jd-feat-img-2 {

        position: absolute;

        border-radius: 16px;

        box-shadow: 0 20px 40px rgba(0,0,0,0.15);

        object-fit: cover;

        transition: transform 0.5s ease;

    }



    .jd-feat-img-1 { top: 0; left: 0; width: 70%; height: 350px; z-index: 1; }

    .jd-feat-img-2 { bottom: 0; right: 0; width: 60%; height: 300px; z-index: 2; border: 8px solid #ffffff; }



    .jd-feature-images:hover .jd-feat-img-1 { transform: translate(-10px, -10px); }

    .jd-feature-images:hover .jd-feat-img-2 { transform: translate(10px, 10px); }



    /* 우측: 텍스트 영역 */

    .jd-feature-text { flex: 1; max-width: 480px; }

    .jd-feat-sub { display: inline-block; font-size: 15px; font-weight: 700; color: #0056b3; letter-spacing: 2px; margin-bottom: 20px; }

    .jd-feat-title { font-size: 44px; font-weight: 800; color: #111; line-height: 1.3; margin: 0 0 30px 0; word-break: keep-all; letter-spacing: -1px; }

    .jd-feat-title span { color: #0056b3; }

    .jd-feat-desc { font-size: 18px; color: #555; line-height: 1.7; word-break: keep-all; margin: 0; }



    /* 💡 모바일 반응형 처리 (수정됨) */

    @media (max-width: 900px) {

        .jd-feature-section { padding: 60px 20px; }

        .jd-feature-container { flex-direction: column; gap: 40px; }

        

        /* 모바일에서는 오버랩 해제하고 이미지 1장만 깔끔하게 */

        .jd-feature-images { 

            width: 100%; 

            height: 250px; /* 높이 고정 */

            position: relative; 

            margin-bottom: 20px;

        }

        .jd-feat-img-1 { 

            width: 100%; 

            height: 250px; 

            position: relative; 

            box-shadow: none; 

        }

        .jd-feat-img-2 { display: none; } /* 모바일에서는 1장만 보여줌 */

        

        .jd-feature-text { max-width: 100%; text-align: center; }

        .jd-feat-title { font-size: 28px; margin-bottom: 20px; }

        .jd-feat-desc { font-size: 15px; }

    }




    /* 💡 다크 테마 섹션 배경 */

    .jd-service-section {

        padding: 120px 20px;

        background-color: #0b1120; /* 깊고 묵직한 네이비 블랙 */

        font-family: 'Pretendard', 'Noto Sans KR', sans-serif;

        color: #ffffff;

    }



    .jd-service-container {

        max-width: 1200px;

        margin: 0 auto;

    }



    /* 💡 타이틀 영역 */

    .jd-svc-header {

        text-align: center;

        margin-bottom: 60px;

    }



    .jd-svc-subtitle {

        display: inline-block;

        font-size: 14px;

        font-weight: 700;

        color: #3b82f6; /* 밝은 파란색 포인트 */

        letter-spacing: 3px;

        margin-bottom: 15px;

        text-transform: uppercase;

    }



    .jd-svc-title {

        font-size: 44px; /* 기존 40px -> 44px로 확대 */

        font-weight: 800;

        color: #ffffff;  /* 완전한 흰색으로 강제 지정 */

        margin: 0;

        letter-spacing: -1px;

        line-height: 1.3;

        white-space: nowrap; /* 텍스트 줄바꿈 방지 */

    }



    /* 💡 카드 레이아웃 (플렉스 박스로 고급스럽게 배치) */

    .jd-svc-grid {

        display: flex;

        flex-wrap: wrap;

        gap: 24px;

        justify-content: center;

    }



    /* 각 카드의 기본 스타일 */

    .jd-svc-card {

        background-color: #1e293b; /* 세련된 슬레이트 그레이 */

        border: 1px solid #334155;

        border-radius: 16px;

        padding: 40px 35px;

        width: calc(33.333% - 16px); /* 3열 배치 */

        position: relative;

        overflow: hidden;

        transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;

    }



    /* 마우스 오버 시 카드 공중 부양 및 빛나는 효과 */

    .jd-svc-card:hover {

        transform: translateY(-8px);

        border-color: #3b82f6;

        box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);

    }



    /* 배경에 옅게 깔리는 대형 숫자 */

    .jd-svc-num {

        position: absolute;

        top: -10px;

        right: -10px;

        font-size: 120px;

        font-weight: 900;

        color: rgba(255, 255, 255, 0.03);

        line-height: 1;

        transition: color 0.4s ease;

        pointer-events: none;

    }



    .jd-svc-card:hover .jd-svc-num {

        color: rgba(59, 130, 246, 0.08);

    }



    .jd-svc-card-title {

        font-size: 22px;

        font-weight: 700;

        margin-bottom: 15px;

        color: #f8fafc;

        position: relative;

        z-index: 2;

    }



    .jd-svc-card-desc {

        font-size: 16px;

        color: #94a3b8;

        line-height: 1.6;

        word-break: keep-all;

        margin: 0;

        position: relative;

        z-index: 2;

    }



    /* 💡 하단 운영시간 전광판 스타일 */

    .jd-hours-banner {

        margin-top: 60px;

        background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);

        border: 1px solid #334155;

        border-radius: 12px;

        padding: 25px 40px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 15px;

        font-size: 18px;

        white-space: nowrap; /* 텍스트 줄바꿈 방지 */

    }



    /* 실시간 영업중을 나타내는 깜빡이는 초록색 불빛 */

    .jd-live-dot {

        width: 12px;

        height: 12px;

        background-color: #10b981;

        border-radius: 50%;

        box-shadow: 0 0 10px #10b981;

        animation: pulse 2s infinite;

        flex-shrink: 0;

    }



    @keyframes pulse {

        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }

        70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }

        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }

    }



    .jd-hours-banner strong {

        color: #ffffff;

        font-weight: 800;

        margin-right: 10px;

    }

    

    .jd-hours-banner span {

        color: #cbd5e1;

        font-weight: 500;

    }



    /* 💡 모바일 반응형 처리 */

    @media (max-width: 900px) {

        .jd-svc-card { width: calc(50% - 12px); } /* 2열 배치 */

    }



    @media (max-width: 600px) {

        .jd-service-section { padding: 80px 20px; }

        .jd-svc-title { font-size: 28px; } /* 기존 26px -> 28px로 확대 */

        .jd-svc-card { width: 100%; padding: 30px 25px; } /* 1열 배치 */

        .jd-hours-banner { padding: 20px; gap: 12px; font-size: 14px; }

    }



    /* 375px 이하 초소형 스마트폰 대응 */

    @media (max-width: 375px) {

        .jd-svc-title { font-size: 24px; } /* 기존 22px -> 24px로 확대 */

        .jd-hours-banner { font-size: 12px; padding: 15px 10px; gap: 8px; }

    }




    /* 엘리멘터 충돌 방지 및 문의폼 전체 래퍼 */

    .jd-contact-section {

        padding: 80px 20px;

        background-color: #ffffff;

        font-family: 'Pretendard', 'Noto Sans KR', sans-serif;

    }



    .jd-contact-container {

        max-width: 800px; /* 폼이 너무 퍼지지 않게 중앙 정렬 */

        margin: 0 auto;

        background: #f8f9fa;

        padding: 50px 60px;

        border-radius: 20px;

        box-shadow: 0 10px 30px rgba(0,0,0,0.05);

        border: 1px solid #eee;

    }



    /* 💡 타이틀 및 설명 텍스트 */

    .jd-contact-header {

        text-align: center;

        margin-bottom: 40px;

    }



    .jd-contact-title {

        font-size: 36px;

        font-weight: 800;

        color: #111;

        margin: 0 0 15px 0;

        letter-spacing: -1px;

    }



    .jd-contact-desc {

        font-size: 17px;

        color: #555;

        margin: 0;

        word-break: keep-all;

        line-height: 1.6;

    }



    .jd-contact-desc span {

        color: #0056b3;

        font-weight: 700;

    }



    /* 💡 입력 폼 스타일 */

    .jd-form-group {

        margin-bottom: 25px;

        text-align: left;

    }



    .jd-form-label {

        display: block;

        font-size: 15px;

        font-weight: 700;

        color: #333;

        margin-bottom: 10px;

    }



    .jd-form-input, .jd-form-textarea {

        width: 100%;

        padding: 16px 20px;

        font-size: 16px;

        border: 1px solid #ddd;

        border-radius: 8px;

        background-color: #fff;

        color: #111;

        transition: border-color 0.3s, box-shadow 0.3s;

        font-family: inherit;

        box-sizing: border-box; /* 패딩 포함 크기 계산 보정 */

    }



    .jd-form-textarea {

        height: 150px;

        resize: none; /* 크기 조절 막기 */

    }



    /* 입력칸 클릭 시 강조 효과 */

    .jd-form-input:focus, .jd-form-textarea:focus {

        outline: none;

        border-color: #0056b3;

        box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);

    }



    /* 💡 전송 버튼 */

    .jd-submit-btn {

        width: 100%;

        padding: 20px;

        background-color: #111;

        color: #fff;

        font-size: 18px;

        font-weight: 800;

        border: none;

        border-radius: 8px;

        cursor: pointer;

        transition: background-color 0.3s;

        box-sizing: border-box;

    }



    .jd-submit-btn:hover {

        background-color: #0056b3; /* 파란색으로 변함 */

    }



    /* 💡 폼 하단 모바일 전화 연결 버튼 (PC에서는 기본적으로 숨김) */

    .jd-form-call-btn {

        display: none;

        width: 100%;

        margin-top: 15px;

        padding: 20px;

        background-color: #10b981; /* 통화 유도 색상 (초록) */

        color: #ffffff;

        font-size: 18px;

        font-weight: 800;

        text-align: center;

        text-decoration: none;

        border-radius: 8px;

        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);

        transition: transform 0.2s ease, background-color 0.2s ease;

        box-sizing: border-box;

    }



    .jd-form-call-btn:active {

        transform: scale(0.98);

        background-color: #059669;

    }



    /* 💡 모바일 반응형 처리 */

    @media (max-width: 768px) {

        .jd-contact-section {

            padding: 60px 20px;

        }

        .jd-contact-container {

            padding: 40px 25px;

        }

        .jd-contact-title {

            font-size: 28px;

        }

        .jd-contact-desc {

            font-size: 15px;

        }

        .jd-form-input, .jd-form-textarea {

            padding: 14px 15px;

            font-size: 15px;

        }

        .jd-submit-btn {

            padding: 16px;

            font-size: 16px;

        }

        /* 모바일 해상도에서만 전화 연결 버튼 노출 */

        .jd-form-call-btn {

            display: block;

            padding: 16px;

            font-size: 16px;

        }

    }




    /* 💡 고급스러운 다크 테마 푸터 */

    .jd-footer {

        background-color: #030712;

        color: #94a3b8;

        font-family: 'Pretendard', 'Noto Sans KR', sans-serif;

        padding: 60px 20px 40px 20px;

        border-top: 1px solid #1e293b;

    }



    .jd-footer-container {

        max-width: 1200px;

        margin: 0 auto;

    }



    /* 푸터 상단 (로고 & 약관 링크) */

    .jd-footer-top {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 30px;

        padding-bottom: 20px;

        border-bottom: 1px solid #1e293b;

    }



    .jd-footer-brand {

        font-size: 26px;

        font-weight: 800;

        color: #ffffff;

        letter-spacing: 1px;

    }



    .jd-footer-links {

        display: flex;

        gap: 20px;

    }



    .jd-footer-links a {

        color: #cbd5e1;

        font-size: 14px;

        font-weight: 600;

        text-decoration: none;

        transition: color 0.3s;

    }



    .jd-footer-links a:hover {

        color: #3b82f6;

    }



    /* 푸터 중앙 (회사 정보) */

    .jd-footer-details {

        margin-bottom: 30px;

        line-height: 1.8;

        font-size: 14px;

    }



    .jd-footer-details p {

        margin: 0 0 6px 0;

        word-break: keep-all;

    }



    /* 정보 단위를 묶어 줄바꿈 시 이산가족 방지 */

    .jd-info-unit {

        display: inline-block;

    }



    .jd-footer-details span.jd-label {

        font-weight: 600;

        color: #cbd5e1;

        margin-right: 5px;

    }



    .jd-footer-details i {

        font-style: normal;

        margin: 0 10px;

        color: #334155;

    }



    /* 푸터 하단 (카피라이트 & 어드민) */

    .jd-footer-bottom {

        display: flex;

        justify-content: space-between;

        align-items: center;

        font-size: 13px;

        color: #64748b;

    }



    .jd-copyright a {

        color: inherit;

        text-decoration: none;

    }



    .jd-copyright a:hover {

        text-decoration: underline;

    }



    .jd-creator::before {

        content: "|";

        margin: 0 8px;

        color: #334155;

    }



    .jd-admin-link {

        color: #334155;

        text-decoration: none;

        font-weight: 700;

        letter-spacing: 1px;

        transition: color 0.3s;

    }



    .jd-admin-link:hover {

        color: #10b981;

    }



    /* 💡 모달(팝업창) 디자인 */

    .jd-modal-overlay {

        display: none;

        position: fixed;

        top: 0; left: 0;

        width: 100%; height: 100%;

        background-color: rgba(0, 0, 0, 0.7);

        z-index: 9999;

        justify-content: center;

        align-items: center;

        padding: 20px;

        backdrop-filter: blur(5px);

        opacity: 0;

        transition: opacity 0.3s ease;

    }



    .jd-modal-overlay.active {

        display: flex;

        opacity: 1;

    }



    .jd-modal-content {

        background-color: #ffffff;

        width: 100%;

        max-width: 600px;

        max-height: 80vh;

        border-radius: 16px;

        display: flex;

        flex-direction: column;

        box-shadow: 0 25px 50px rgba(0,0,0,0.25);

        transform: translateY(20px);

        transition: transform 0.3s ease;

    }



    .jd-modal-overlay.active .jd-modal-content {

        transform: translateY(0);

    }



    .jd-modal-header {

        padding: 25px 30px;

        border-bottom: 1px solid #e2e8f0;

        display: flex;

        justify-content: space-between;

        align-items: center;

    }



    .jd-modal-title {

        font-size: 20px;

        font-weight: 800;

        color: #1e293b;

        margin: 0;

    }



    .jd-modal-close {

        background: none;

        border: none;

        font-size: 28px;

        color: #94a3b8;

        cursor: pointer;

        line-height: 1;

        transition: color 0.2s;

    }



    .jd-modal-close:hover {

        color: #ef4444;

    }



    .jd-modal-body {

        padding: 30px;

        overflow-y: auto;

        color: #475569;

        font-size: 14px;

        line-height: 1.7;

    }



    .jd-modal-body h4 {

        color: #1e293b;

        margin: 20px 0 10px 0;

        font-size: 15px;

    }

    .jd-modal-body h4:first-child { margin-top: 0; }



    /* 모바일 반응형 */

    @media (max-width: 768px) {

        .jd-footer-top { flex-direction: column; gap: 20px; text-align: center; }

        

        /* 기존에 p태그를 column으로 쪼개서 엉성했던 부분 수정 */

        .jd-footer-details { text-align: center; line-height: 1.7; }

        .jd-footer-details p { display: block; margin-bottom: 8px; }

        .jd-footer-details i { display: none; } /* 모바일에서는 | 기호 숨김 처리 */

        

        /* 모바일에서는 각 정보 단위에 여백 추가하여 깔끔하게 분리 */

        .jd-info-unit { margin: 0 6px; } 

        

        .jd-footer-bottom { flex-direction: column; gap: 15px; text-align: center; }

        

        /* Gamiweb 다음 줄로 내리기 */

        .jd-creator { display: block; margin-top: 6px; }

        .jd-creator::before { display: none; }

    }