@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* --- 1. 기본 설정 및 리셋 --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body { 
    font-family: 'Pretendard', -apple-system, sans-serif; 
    line-height: 1.6; 
    color: #333; 
    background-color: #fff; 
    overflow-x: hidden; 
    width: 100%; 
    padding-top: 80px; /* 헤더 여백 */
}

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

/* --- 2. 헤더 및 네비게이션 --- */
.main-header { 
    background-color: #272727; width: 100%; height: 80px; display: flex; align-items: center; 
    position: fixed; top: 0; left: 0; z-index: 2000; 
}

/* 추천: 헤더 밑에 약간의 여백을 두어 답답하지 않게 멈추게 하기 */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

.header-container { width: 90%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 40px; display: block; }
.nav-menu ul { display: flex; gap: 40px; }
.nav-menu ul li a { color: #ffffff; font-size: 16px; font-weight: 500; transition: color 0.3s; }
.nav-menu ul li a:hover { color: #072cf5; }

.mobile-menu-toggle { display: none; }
.hamburger-btn { display: none; cursor: pointer; flex-direction: column; gap: 6px; z-index: 1001; }
.hamburger-btn .line { width: 30px; height: 3px; background-color: #fff; border-radius: 3px; transition: all 0.3s ease-in-out; }
.mobile-only-btn { display: none; }

/* --- 3. 인트로 섹션 --- */
#hero-intro { 
    position: relative; width: 100%; height: 20vh; max-width: none; padding: 0;      
    display: flex; align-items: center; justify-content: center; overflow: hidden; 
}
.bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2; }
.hero-content { position: relative; z-index: 3; color: #ffffff; text-align: center; }
.hero-content h2 { font-size: 40px; margin-bottom: 15px; }
.hero-content p { font-size: 18px; }

.hero-kakao-btn {
    display: inline-block; margin-top: 35px; padding: 16px 40px; background-color: #fae100; color: #371d1e;
    font-size: 18px; font-weight: bold; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(250, 225, 0, 0.3);
}
.hero-kakao-btn:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(250, 225, 0, 0.5); background-color: #ffeb3b; }

/* --- 4. 섹션 공통 스타일 --- */
section { padding: 100px 20px; max-width: 1200px; margin: 0 auto; min-height: 600px; }
.section-title { text-align: center; margin-bottom: 40px; }
.section-title h2 { font-size: 32px; color: #272727; margin-bottom: 15px; }
.section-title p { color: #888; }

/* --- 5. 제안 & 절차 섹션 --- */
#suggest { background-color: #f4f6fc; max-width: 100%; }
.four-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; }
.info-card { background: #fff; padding: 40px 25px; border-radius: 12px; border: none; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-align: center; transition: all 0.3s ease; }
.card-icon { font-size: 36px; margin-bottom: 20px; transition: transform 0.3s ease; }
.info-card h3 { font-size: 20px; color: #333; margin-bottom: 15px; transition: color 0.3s ease; }
.info-card p { 
    font-size: 15px; 
    color: #666; 
    line-height: 1.6; 
    transition: color 0.3s ease; 
    
    /* ★ 글씨가 단어 단위로만 예쁘게 끊어지도록 추가! */
    word-break: keep-all; 
}
.step-badge { display: inline-block; font-size: 13px; font-weight: 800; color: #072cf5; background: #eef1ff; padding: 6px 16px; border-radius: 30px; margin-bottom: 20px; transition: all 0.3s ease; }

.info-card:hover { background-color: #072cf5; transform: translateY(-8px); box-shadow: 0 15px 30px rgba(7, 44, 245, 0.2); }
.info-card:hover h3, .info-card:hover p { color: #fff; }
.info-card:hover .step-badge { background: #fff; color: #072cf5; }
.info-card:hover .card-icon { transform: scale(1.1); }

/* --- 6. 렌탈제품 --- */
#products { background-color: #f9f9f9; max-width: 100%; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; }
.product-card { background: #fff; padding: 25px; border-radius: 12px; border: 1px solid #eee; text-align: left; transition: 0.3s; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.img-placeholder { background: #f4f4f4; margin-bottom: 20px; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 3 / 2; }
.img-placeholder img { width: 100%; height: 100%; object-fit: cover; }

/* 제품 카드 하단 텍스트 & 버튼 정렬 영역 */
.card-details-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; /* 버튼과 텍스트의 수직 중앙 정렬 */
    width: 100%; 
    margin-top: 20px; /* ★ 이미지와 텍스트 사이의 숨통(여백)을 틔워줍니다 */
}

/* 텍스트 묶음 (상품명 + 가격) */
.card-left-group { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; /* ★ 제목과 가격 사이의 적절한 간격 */
}

/* --- 제품 카드 한 줄 설명 --- */
.card-left-group .product-desc {
    font-size: 12px;         /* 작고 앙증맞은 크기 */
    color: #888;             /* 너무 튀지 않는 세련된 회색 (파란색을 원하시면 #072cf5 로 변경) */
    font-weight: 500;        /* 너무 얇지 않게 폰트 굵기 조절 */
    margin-bottom: 0px;      /* 바로 아래 제품명(h3)과의 간격 */
    word-break: keep-all;    /* 단어 끊김 방지 */
    letter-spacing: -0.3px;  /* 자간을 살짝 좁혀서 깔끔하게 */
}

/* 상품명 (h3) */
.card-left-group h3 { 
    margin: 0; 
    font-size: 19px; 
    font-weight: 700;
    color: #222;            /* 완전 검은색보다 고급스러운 진회색 */
    letter-spacing: -0.5px; /* 자간을 살짝 좁혀서 세련되게 */
    word-break: keep-all;   /* 이름이 중간에 이상하게 끊기지 않도록 */
    line-height: 1.3;
}

/* 가격 (p) */
.card-left-group p { 
    margin: 0; 
    font-size: 17px; 
    color: #072cf5;         /* 브랜드 메인 블루 컬러 */
    font-weight: 800;       /* 가격은 상품명보다 더 굵게 뽝! 강조 */
}
/* 상세보기 버튼 디자인 */
.view-more { display: inline-block; padding: 10px 20px; font-size: 13px; border-radius: 4px; cursor: pointer; transition: 0.3s; margin-top: 0; white-space: nowrap; background: #072cf5; color: #fff; }
.view-more:hover { background: #051fa6; color: #fff; }

.more-product-action { text-align: center; margin-top: 100px; }
.find-more-btn { display: inline-block; padding: 16px 40px; font-size: 16px; font-weight: bold; color: #072cf5; background-color: #fff; border: 2px solid #072cf5; border-radius: 50px; transition: all 0.3s ease; }
.find-more-btn:hover { background-color: #072cf5; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(7, 44, 245, 0.2); }

/* --- 7. 모달(상세보기 창) 및 아코디언 --- */
.modal-state { display: none; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 2000; }
.modal-content { background: #fff; padding: 40px; width: 90%; max-width: 900px; max-height: 80vh; overflow-y: auto; border-radius: 12px; position: relative; color: #333; transform: scale(0.9); transition: 0.3s; box-shadow: 0 20px 40px rgba(0,0,0,0.4); text-align: left; }
/* 모달창 메인 제목 (h2) */
.modal-content h2 { 
    font-size: 26px;             /* 크기를 조금 더 키워 시원하게 */
    font-weight: 800;            /* 폰트를 아주 굵게 설정 */
    color: #072cf5; 
    margin-bottom: 8px;          /* 소제목과의 간격 */
    letter-spacing: -0.5px;      /* 자간을 살짝 좁혀서 더 단단해 보이게 */
}

/* 모달창 소제목/설명 (p) */
/* '>' 기호를 써서 모달 바로 밑에 있는 설명글에만 적용되도록 안전하게 제한합니다 */
.modal-content > p { 
    font-size: 15px; 
    font-weight: 400; 
    color: #666;                 /* 본문보다 살짝 연한 회색으로 차이 두기 */
    margin-bottom: 25px;         /* ★ 아래 렌탈 표와의 여백을 충분히 확보 */
    word-break: keep-all;        /* 단어 단위로 끊어지게 해서 가독성 향상 */
    line-height: 1.5;
}.modal-close { position: sticky; top: -20px; float: right; margin-left: auto; font-size: 35px; cursor: pointer; line-height: 1; color: #333; z-index: 100; background-color: rgba(255, 255, 255, 0.95); width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

/* ★ 모달 열기 안전장치: HTML 구조가 약간 틀어져도 작동하도록 + 대신 ~ 사용 ★ */
.modal-state:checked + .modal-overlay { opacity: 1; visibility: visible; }
.modal-state:checked + .modal-overlay .modal-content { transform: scale(1); }

/* --- 상단 렌탈 조건 표 전체 컨테이너 (파란 테두리 복구) --- */
.rental-condition-container { 
    margin: 15px 0 25px 0; 
    border-radius: 12px; 
    overflow: hidden; 
    border: 2px solid #072cf5; /* ★ 요청하신 파란색 굵은 테두리로 원복 ★ */
    box-shadow: 0 4px 10px rgba(7, 44, 245, 0.05); /* 테두리에 어울리는 은은한 파란색 그림자 */
}

/* --- 테이블 내부 스타일 (가독성 개선 속성은 유지) --- */
.rental-table { 
    width: 100%; 
    border-collapse: collapse; 
    text-align: left; 
    font-size: 14px; 
}

.rental-table th { 
    background-color: #f4f6fc; /* 파란 테두리와 어울리는 아주 연한 파란색 바탕 */
    color: #333; 
    padding: 16px 14px; 
    width: 38%;                /* 모바일에서 글씨 공간 확보 */
    border-bottom: 1px solid #eee; 
    border-right: 1px solid #eee; 
    font-weight: 600; 
    word-break: keep-all;      /* 단어 끊김 방지 */
    line-height: 1.4;
}

.rental-table td { 
    padding: 16px 14px; 
    color: #222; 
    border-bottom: 1px solid #eee; 
    word-break: keep-all; 
    line-height: 1.5;
}

/* 마지막 줄 밑줄 제거 */
.rental-table tr:last-child th, 
.rental-table tr:last-child td { 
    border-bottom: none; 
}

/* 가격 및 부가 설명 스타일 */
.rental-table .price { 
    font-size: 20px; 
    font-weight: 800; 
    color: #072cf5; 
    letter-spacing: -0.5px;
}
.rental-table .price span { 
    font-size: 13px; 
    font-weight: 500; 
    color: #888; 
}

/* 아코디언 공통 */
.accordion-group { margin-bottom: 10px; }
.spec-toggle-checkbox { display: none; }
.spec-toggle-label { display: block; width: 100%; background-color: #f0f0f0; color: #333; text-align: center; padding: 15px; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s; }
.spec-toggle-label:hover { background-color: #e4e4e4; }
.spec-toggle-label .arrow { display: inline-block; margin-left: 8px; font-size: 12px; transition: transform 0.3s; }
.spec-toggle-checkbox:checked + .spec-toggle-label { background-color: #333; color: #fff; }
.spec-toggle-checkbox:checked + .spec-toggle-label .arrow { transform: rotate(180deg); }
.spec-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.6s ease-in-out, opacity 0.6s; opacity: 0; display: none;}
.spec-toggle-checkbox:checked ~ .spec-accordion-content { max-height: 5000px; opacity: 1; padding-top: 10px; display: block;}

/* --- 1. 표를 감싸는 컨테이너 (스크롤 복구) --- */
.spec-table-container { 
    width: 100%; 
    
    /* ★ 가로 스크롤을 살려주는 핵심 속성 */
    overflow-x: auto; 
    
    /* 모바일에서 스크롤을 부드럽게 만들어주는 터치 속성 추가 */
    -webkit-overflow-scrolling: touch; 
       
    border-radius: 12px; 
    border: 1px solid #eee; 
    margin-bottom: 20px;
}
/* --- 상세 스펙 테이블 --- */
.spec-table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0; 
    font-size: 14px; 
    text-align: left; 
    min-width: 500px; 
}

/* 공통 셀 여백 및 하단 선 */
.spec-table th, .spec-table td { 
    padding: 14px 15px; 
    border-bottom: 1px solid #eee; 
}

/* ★ 누락되었던 좌측 제목 칸(th) 스타일 복구 ★ */
.spec-table th { 
    background-color: #f4f6fc; /* 제목 칸 연한 파란색 배경 */
    color: #333; 
    font-weight: 600;          /* 글씨 살짝 굵게 */
    width: 28%;                /* 제목 칸 가로폭 고정 */
    word-break: keep-all;      /* 단어 중간에 끊김 방지 */
}

/* 우측 내용 칸(td) 폰트 디테일 */
.spec-table td { 
    color: #555; 
    font-weight: 400; 
    line-height: 1.5;          /* 긴 설명글을 위한 줄간격 확보 */
}

/* 파란색 대분류 헤더 스타일 (기본 기능, 프린트 기능 등) */
.spec-table .section-header th { 
    background-color: #072cf5; 
    color: #fff; 
    font-size: 16px; 
    font-weight: 700;          /* 대분류는 더 굵고 확실하게 */
    letter-spacing: -0.5px;    /* 자간을 좁혀 단단한 느낌 주기 */
    padding: 12px 15px; 
    border: none;              /* 파란 배경일 땐 밑줄 제거 */
}

/* 첫 번째 줄 양쪽 모서리 깎기 (라운드 유지) */
.spec-table tr:first-child th:first-child, 
.spec-table tr:first-child td:first-child { 
    border-top-left-radius: 12px; 
}
.spec-table tr:first-child th:last-child, 
.spec-table tr:first-child td:last-child { 
    border-top-right-radius: 12px; 
}

/* --- 요금제 전용 테이블 --- */
.plan-table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0; 
    table-layout: fixed; 
    background-color: #fff; 
    
    /* ★ 이 속성을 추가해야 모바일에서 글씨가 찌그러지지 않고 스크롤이 생깁니다! */
    min-width: 500px; 
}

/* 공통 셀 속성 */
.plan-table th, .plan-table td { 
    padding: 15px 10px; 
    text-align: center; 
    border-bottom: 1px solid #eee; 
    font-size: 14px; 
    word-break: keep-all; 
}

/* ★ 추가: 마지막 줄의 밑줄을 제거하여 테두리 마감을 깔끔하게 */
.plan-table tr:last-child td {
    border-bottom: none;
}

/* 테이블 헤더 (파란색 바탕) */
.plan-table thead th { 
    background-color: #072cf5; 
    color: #ffffff; 
    font-weight: 700;       /* 굵고 명확하게 */
    letter-spacing: -0.5px; /* 자간 조절로 단단한 느낌 */
    border: none; 
}

/* ★ 추가: 본문 데이터(숫자) 폰트 굵기 */
.plan-table tbody td {
    font-weight: 500; /* 숫자가 얇아 보이지 않고 또렷하게 보이도록 */
    color: #333;
}

/* 첫 번째 줄(헤더) 양쪽 모서리 깎기 (라운드 유지) */
.plan-table tr:first-child th:first-child, 
.plan-table tr:first-child td:first-child { 
    border-top-left-radius: 12px; 
}
.plan-table tr:first-child th:last-child, 
.plan-table tr:first-child td:last-child { 
    border-top-right-radius: 12px; 
}

/* '무제한 무료' 셀 (우측 병합 칸) */
.plan-table td.free-cell { 
    vertical-align: middle; 
    border-left: 1px solid #eee; 
    background-color: #ffffff; 
    color: #555; 
    line-height: 1.5; 
    font-weight: 600; /* 혜택 부분이니 살짝 굵게 강조 */
}

/* 엔터프라이즈 (별도 협의) 줄 */
.plan-table .enterprise-row td { 
    background-color: #f9f9f9; /* 배경색으로 다른 요금제와 구분감 부여 */
    font-weight: 800;          /* 별도 협의 부분 강력하게 강조 */
    color: #111; 
}

/* --- 8. 다운로드 센터 (서브 페이지 전용) --- */
.download-hero { position: relative; width: 100%; height: 350px; max-width: none; padding: 0; min-height: auto; background-image: url('/image/download.jpg'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.download-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; }
.download-card { background: #fff; padding: 30px; border-radius: 12px; border: 1px solid #eee; text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.download-card:hover { transform: translateY(-5px); border-color: #072cf5; box-shadow: 0 10px 25px rgba(7, 44, 245, 0.1); }
.download-card h3 { font-size: 20px; color: #333; margin-bottom: 5px; }
.download-card p { font-size: 14px; color: #888; margin-bottom: 25px; }
label.download-btn { display: inline-block; text-align: center; line-height: normal; cursor: pointer; }
.download-card.highlight-card { background-color: #f4f6fc; border: 2px solid #072cf5; box-shadow: 0 5px 15px rgba(7, 44, 245, 0.1); }
.download-card.highlight-card h3 { color: #072cf5; }
.download-card.highlight-card .remote-btn { background-color: #072cf5; color: #fff; border: none; width: 100%; }
.download-card.highlight-card .remote-btn:hover { background-color: #051fa6; box-shadow: 0 4px 10px rgba(7, 44, 245, 0.3); }

.download-btn-group { display: flex; gap: 10px; justify-content: center; }
.download-btn { flex: 1; padding: 12px 0; font-size: 14px; font-weight: bold; border-radius: 6px; transition: all 0.3s; text-align: center; white-space: nowrap; }
.download-btn.windows { background-color: #f4f6fc; color: #072cf5; border: 1px solid #d0d7ff; }
.download-btn.windows:hover { background-color: #072cf5; color: #fff; border-color: #072cf5;}
.download-btn.mac { background-color: #f9f9f9; color: #555; border: 1px solid #ddd; }
.download-btn.mac:hover { background-color: #333; color: #fff; border-color: #333;}

/* --- 8-1. 원격지원 센터 (서브 페이지 전용) --- */
.remote-hero { position: relative; width: 100%; height: 350px; max-width: none; padding: 0; min-height: auto; background-image: url('/image/remote.jpg'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }

/* --- 9. 자주묻는질문 (FAQ) --- */
#faq { background-color: #f9f9f9; max-width: 100%; }
.faq-container { max-width: 850px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #eee; margin-bottom: 10px; }
.faq-item input { display: none; }
.faq-question { padding: 20px; cursor: pointer; background: #fff; display: block; font-weight: 600; transition: color 0.3s, background 0.3s; border-radius: 8px; }
.faq-question:hover { color: #072cf5; }
.faq-answer { max-height: 0; overflow: hidden; transition: 0.3s ease-in-out; background: #fcfcfc; padding: 0 20px; color: #666; }
.faq-item input:checked + .faq-question { color: #072cf5; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.faq-item input:checked + .faq-question + .faq-answer { max-height: 200px; padding: 20px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }

/* --- 10. 견적문의 --- */
.contact-wrapper-vertical { max-width: 650px; margin: 0 auto; }
.contact-box { background: #fff; border-radius: 12px; display: flex; flex-direction: column; }
.kakao-primary-box { padding: 50px 40px; border: 2px solid #fae100; box-shadow: 0 10px 30px rgba(250, 225, 0, 0.1); text-align: center; align-items: center; }
.kakao-form-btn { display: inline-block; width: 100%; max-width: 400px; padding: 18px; background-color: #fae100; color: #371d1e; border-radius: 50px; font-size: 18px; font-weight: bold; text-align: center; transition: all 0.3s; }
.kakao-form-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(250, 225, 0, 0.4); }

.email-accordion-container { margin-top: 30px; text-align: center; }
.email-toggle-checkbox { display: none; }
.email-toggle-label { display: inline-block; cursor: pointer; color: #888; font-size: 15px; text-decoration: underline; transition: color 0.3s; padding: 10px; }
.email-toggle-label:hover { color: #072cf5; }
.email-toggle-label .arrow-icon { display: inline-block; transition: transform 0.3s; font-size: 12px; margin-left: 5px; }
.email-toggle-checkbox:checked + .email-toggle-label .arrow-icon { transform: rotate(180deg); }
.email-box-hidden { max-height: 0; overflow: hidden; opacity: 0; padding: 0 40px; border: 1px solid transparent; transition: all 0.5s ease-in-out; }
.email-toggle-checkbox:checked ~ .email-box-hidden { max-height: 800px; opacity: 1; padding: 40px; border-color: #eee; margin-top: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; }
.form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; transition: border-color 0.3s; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #072cf5; } 
.submit-btn { width: 100%; padding: 18px; border: none; border-radius: 6px; cursor: pointer; font-size: 17px; font-weight: bold; transition: all 0.3s; background: #072cf5; color: #fff; margin-top: 10px; }
.submit-btn:hover { background: #051fa6; }

/* --- 11. 플로팅 원격지원 버튼 --- */
.floating-btn { position: fixed; bottom: 30px; right: 30px; width: 100px; height: 100px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 15px; font-weight: bold; text-align: center; line-height: 1.3; z-index: 999; transition: all 0.3s; background: #e63946; color: #fff; border: 2px solid #ffb3b8; box-shadow: 0 8px 20px rgba(230, 57, 70, 0.4); }
.floating-btn:hover { transform: translateY(-5px); background: #d62828; border-color: #d62828; }

/* --- 12. 푸터 --- */
footer { background-color: #272727; color: #a0a0a0; padding: 60px 20px 40px; font-size: 14px; }
.footer-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; }
.footer-info { flex: 1; min-width: 250px; }
.footer-info h3 { color: #fff; font-size: 18px; margin-bottom: 20px; }
.highlight-text { font-size: 26px !important; color: #fff !important; font-weight: 800; margin: 10px 0; display: block; }
.copyright { max-width: 1200px; margin: 40px auto 0; padding-top: 25px; border-top: 1px solid #3d3d3d; text-align: center; font-size: 12px; }

/* --- 13. 미디어 쿼리 --- */
@media (max-width: 900px) {
    .product-grid, .four-card-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-wrapper-vertical { max-width: 650px; }
    .footer-container { flex-wrap: wrap; }
}
@media (max-width: 768px) {
    .pc-only-btn { display: none; }
    .hamburger-btn { display: flex; }
    .mobile-only-btn { display: block; margin-top: 20px; text-align: center; }
    .nav-menu { position: absolute; top: 80px; left: 0; width: 100%; background-color: #272727; flex-direction: column; padding: 0; box-shadow: 0 10px 15px rgba(0,0,0,0.3); max-height: 0; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out; }
    .nav-menu ul { flex-direction: column; align-items: center; gap: 25px; padding: 30px 0; }
    .mobile-menu-toggle:checked ~ .nav-menu { max-height: 400px; opacity: 1; }
    .mobile-menu-toggle:checked + .hamburger-btn .line:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .mobile-menu-toggle:checked + .hamburger-btn .line:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle:checked + .hamburger-btn .line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
    .header-container { width: 95%; }
    .footer-container { flex-direction: column; gap: 40px; }
    .footer-info { width: 100%; }
    .floating-btn { width: 65px; height: 65px; bottom: 20px; right: 20px; font-size: 10px; } 
    .hero-content h2 { font-size: 28px; } 
    section { padding: 60px 20px; } 
    .download-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ========================================================= */
/* --- 모바일 공통 기능 (미디어 쿼리 외부) --- */
/* ========================================================= */

/* 표 스크롤 안내 문구 (PC 화면에서는 보이지 않게 숨김) */
.mobile-scroll-hint {
    display: none; 
}

/* 스크롤 애니메이션 정의 */
@keyframes swipe-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5px); } /* 왼쪽으로 5px 살짝 이동했다가 복귀 */
}


/* ========================================================= */
/* --- 모바일 환경 전용 스타일 (화면 너비 768px 이하 통합) --- */
/* ========================================================= */
@media screen and (max-width: 768px) {
    
    /* 1. 로고 크기 조절 */
    .logo img {
        height: 35px; 
        width: auto;  
    }

    /* 2. 레이아웃 변경 (★ 핵심: 4단 카드는 2단으로 분리!) */
    .product-grid, .download-grid { 
        grid-template-columns: 1fr; /* 상품과 다운로드는 1단 유지 */
    }
    
    .four-card-grid { 
        grid-template-columns: repeat(2, 1fr); /* 렌탈 추천/절차 카드는 2단으로! */
        gap: 12px; 
    }

    /* 2-1. 2단 배열에 맞춘 카드 내부 사이즈 다이어트 */
    .info-card { padding: 25px 15px; }
    .card-icon { font-size: 28px; margin-bottom: 12px; }
    .info-card h3 { font-size: 16px; margin-bottom: 10px; word-break: keep-all; }
    .info-card p { font-size: 13px; line-height: 1.4; }
    .step-badge { font-size: 11px; padding: 4px 10px; margin-bottom: 15px; }

    /* 3. 모달 및 폼 여백 축소 */
    .modal-content, .contact-box { 
        padding: 30px 20px; 
    }
    
    /* 4. 요금제 표와 스펙 표 폰트/여백 통일 */
    .plan-table th, .plan-table td,
    .spec-table th, .spec-table td { 
        font-size: 12px; 
        padding: 10px 8px; /* 글씨가 찌그러지지 않게 여백 조정 */
    }
    
    /* 5. 스펙 표 대분류 제목 폰트 조절 */
    .spec-table .section-header th {
        font-size: 14px;
        padding: 10px;
    }

    /* 6. 추가된 표 컨테이너 모바일 최적화 */
    .spec-table-container {
        margin-bottom: 10px;  /* 스크롤 피로감 감소 */
    }

    /* 7. 모바일 표 스크롤 안내 문구 표시 */
    .mobile-scroll-hint {
        display: block;          /* 모바일에서만 나타남 */
        text-align: right;       
        font-size: 12px; 
        color: #888;             
        margin-bottom: 8px;      
        padding-right: 4px;
        animation: swipe-bounce 1.5s infinite; /* 애니메이션 실행 */
    }
}

    /* ★ 모바일에서 불필요한 강제 줄바꿈 무시하기 */
    .pc-br { display: none; }


    /* --- 개인정보 수집 동의란 스타일 --- */
.privacy-terms {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 12px 15px;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
    height: 90px;
    overflow-y: auto; /* 내용이 길면 스크롤 생성 */
    word-break: keep-all;
}

/* 체크박스와 글씨를 나란히 예쁘게 정렬 */
.privacy-checkbox-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500 !important; /* 기존 form-group label의 굵기 덮어쓰기 */
    color: #333;
    cursor: pointer;
    margin-bottom: 0 !important;
}

/* 기존 input 가로 100% 속성이 체크박스를 망가뜨리지 않도록 방어 */
.privacy-checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    cursor: pointer;
}