/* =========================================
   공통 요소 (폰트, 헤더, 푸터)
========================================= */

/* 기본 초기화 및 폰트 설정 */
body {
    font-family: 'Noto Sans KR', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

h3, p {
    margin: 0;
}

/* 상단 헤더 고정 및 스타일 */
.main-header {
    border-bottom: none;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 30px 20px 30px; 
    display: flex;
    justify-content: space-between; /* 🚨 이 줄이 로고와 메뉴를 양 끝으로 쫙 밀어줍니다! */
    align-items: center;
}

/* 로고 디자인 */
.logo-container {
    display: flex;
    align-items: center;
    height: 100%; 
    padding: 0;
    margin-left: -23px; /* 로고를 왼쪽 박스 선에 맞추는 역할 */
}

.logo-container a {
    display: flex;
    align-items: center;
}

.logo-image {
    max-height: 115px; 
    width: auto;      
    display: block;   
}

/* 우측 네비게이션 메뉴 */


.main-nav ul {
    display: flex;
    gap: 40px;
}

.main-nav a {
    font-size: 16px;
    color: #333;
    transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active {
    font-weight: 700;
}


/* =========================================
   우측 헤더 영역 (메뉴 + 연락처 묶음)
========================================= */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 오른쪽으로 깔끔하게 정렬 */
    gap: 12px; /* 메뉴와 글자 사이의 위아래 간격 */
}

/* 상단 연락처 텍스트 디자인 */
.header-contact {
    font-size: 15px; /* 💡 13px에서 15px로 글자를 시원하게 키웠습니다! (원하시면 14px, 16px 등으로 자유롭게 조절하세요) */
    color: #666;
    margin: 0; 
    letter-spacing: -0.3px;
}

.header-contact strong {
    color: #111;
    font-weight: 700;
}


/* =========================================
   🛡️ 이미지 무단 저장 및 드래그 방지
========================================= */
img {
    -webkit-touch-callout: none; /* 모바일(iOS/안드로이드)에서 꾹 누를 때 뜨는 메뉴 막기 */
    user-select: none;           /* 이미지 선택(블록 지정) 막기 */
    -webkit-user-drag: none;     /* 맥(Mac)이나 사파리에서 드래그하는 것 막기 */
    pointer-events: none;        /* (선택사항) 이미지 클릭 자체를 완전 무효화 */
}

/* 💡 단, 로고 이미지나 상세페이지로 넘어가는 썸네일은 클릭이 되어야 하므로
   pointer-events를 풀어줍니다! */
a img {
    pointer-events: auto; 
}



/* =========================================
   메인 포트폴리오 화면 (index.html)
========================================= */

/* 메인 콘텐츠 영역 */
.content-container {
    max-width: 1200px;
    margin: 240px auto 60px;
    padding: 0 30px;
}


/* =========================================
   PC 화면: 배너와 포트폴리오 문구 사이 여백 조절
========================================= */
.main-slider + .content-container {
    margin-top: 85px !important; /* 💡 이 숫자를 줄이면(예: 60px) 간격이 좁아지고, 키우면(예: 120px) 넓어집니다! */
}


/* =========================================
   포트폴리오 인트로 타이틀 영역
========================================= */
.portfolio-intro {
    text-align: center;
    margin-bottom: 65px; 
}

.portfolio-intro .intro-category {
    color: #c32621; 
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px; /* 💡 아래 제목과의 간격 */
}

.portfolio-intro .intro-heading {
    font-size: 32px; 
    font-weight: 700;
    color: #111;
    margin-bottom: 20px; /* 💡 위 카테고리와 똑같은 간격 적용! */
    word-break: keep-all;
}

.portfolio-intro .intro-subtext {
    font-size: 16px;
    color: #666;
    word-break: keep-all;
    line-height: 1.6; /* 💡 글이 두 줄이 되었으므로, 읽기 편하게 줄간격 추가 */
}

.portfolio-intro .intro-subtext strong {
    color: #c32621; 
    font-weight: 700;
}


/* 💡 4단 그리드 레이아웃 (축소해도 깨지지 않게 꽉 채우기 복구!) */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 270px 고정을 지우고 무조건 1fr(비율)로 꽉 차게 원상복구! */
    justify-content: space-between; /* 박스들을 양끝으로 시원하게 펼쳐줍니다 */
    gap: 25px 20px;
}

/* 개별 포트폴리오 카드 */
.portfolio-item {
    display: flex;
    flex-direction: column;
}

/* 썸네일 이미지 박스 영역 */
.item-image-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1; /* 💡 1:1 정사각형 비율로 변경! */
    background-color: transparent; 
    border-radius: 9px; /* 둥근 모서리 유지 */
    margin-bottom: 24px; 
    overflow: hidden; 
}

/* 박스 안에 들어갈 실제 이미지 스타일 */
.portfolio-image {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    border-radius: inherit; /* 💡 겉 박스의 둥근 모서리를 똑같이 따라가게 만드는 마법의 코드 추가! */
    transition: transform 0.3s ease; 
}


.portfolio-item:hover .portfolio-image {
    transform: scale(1.10);
}

/* 제목 및 태그 텍스트 */
.item-title {
    font-weight: 700;
    font-size: 16px; 
    color: #111;
    line-height: 1.4;
    margin-bottom: 4px; 
    word-break: keep-all;
}

.item-tags {
    font-size: 12px; 
    color: #888;
    font-weight: 400; 
}

/* 우측 하단 스크롤 버튼 */
.floating-controls {
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 999;
}

.scroll-btn {
    width: 36px;
    height: 36px;
    background-color: #e0e0e0;
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
}

.scroll-btn:hover {
    background-color: #ccc;
}


/* =========================================
   추가된 하단 영역 (More 버튼 & Footer) 
========================================= */

/* ⬇️ More 버튼 완벽한 중앙 정렬 */
.more-btn-container {
    display: flex;            
    justify-content: center;  
    width: 100%;
    margin-top: 100px; 
    margin-bottom: 80px;
}

.more-btn {
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    font-family: inherit;
    padding: 10px 20px;
    transition: opacity 0.2s ease;
}

.more-btn:hover {
    opacity: 0.5; 
}

/* 푸터 (하단 회사 정보) 영역 */
.main-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 30px 100px 30px; 
    border-top: 1px solid #111; 
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* 왼쪽 회사 정보 텍스트 */
.footer-info p {
    font-size: 12px;
    color: #555;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
}

/* 💡 바로 여기! 여기에 방금 전 코드를 붙여넣어 주세요! */
.footer-info p strong {
    font-weight: 700;
    color: #333; 
}


.footer-info .company-name {
    font-weight: 700;
    color: #111;
    font-size: 13px;
    margin-bottom: 5px;
}

.footer-info .divider {
    margin: 0 6px;
    color: #ccc;
    font-size: 10px;
}

.footer-info .copyright {
    margin-top: 5px;
    color: #888;
}

/* 오른쪽 소셜 아이콘 및 로고 */
.footer-social {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-social a {
    color: #111;
    font-size: 20px;
    display: flex;
    align-items: center;
    transition: opacity 0.2s;
}

.footer-social a:hover {
    opacity: 0.5;
}

.footer-social .social-text {
    font-size: 15px !important;
    letter-spacing: -0.5px;
}

.yellow-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: #ffd700;
    border-radius: 50%;
    margin: 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    line-height: 1;
    padding-bottom: 2px;
}

/* =========================================
   상세 페이지 (detail.html) 전용 스타일
========================================= */

/* 헤더에 가려지지 않게 위쪽 여백 주기 */
.detail-container {
    width: 100%;
    margin-top: 200px; 
    padding-bottom: 0;
}

/* 제목과 세부내용 중앙 정렬 */
.detail-title-area {
    text-align: center;
    margin-bottom: 50px;
}

.detail-title-area h2 {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin-bottom: 12px;
}

.detail-title-area p {
    font-size: 15px;
    color: #666;
}

/* 목업이 들어가는 뼈대 영역 (배경색 제거) */
.detail-content-area {
    width: 100%;
    display: flex;
    flex-direction: column; /* 이미지를 세로로 쌓음 */
    align-items: center;    /* 이미지를 한가운데 정렬 */
    gap: 15px; /* 💡 목업 이미지와 이미지 사이의 흰색 간격입니다. 붙이고 싶으면 0으로 하세요! */
    margin-bottom: 100px; /* 맨 아래 푸터(회사정보)와 겹치지 않게 여백 추가 */
}

/* 개별 목업 이미지가 들어갈 투명한 칸 */
.detail-image {
    width: 100%;
    max-width: 1200px; /* 메인 화면의 그리드 넓이(1200px)와 똑같이 맞춰서 안정감 부여 */
    display: flex;
    justify-content: center;
}

/* 실제 목업 이미지가 칸에 꽉 차게 설정 */
.detail-image img {
    width: 100%;
    height: auto;
    display: block;
}







/* =========================================
   ABOUT 페이지 전용 스타일 (여백 축소 완료)
========================================= */

/* 전체 컨테이너 여백 - 상단 여백을 200px에서 130px로 줄여 헤더와 바짝 붙입니다 */
.about-container {
    max-width: 1200px;
    margin: 220px auto 60px !important; /* 🚨 위쪽 여백 조정 */
    padding: 0 30px;
}

/* 1. 인트로 텍스트 영역 */
.about-intro-section {
    margin-bottom: 150px; /* 첫번째 소개글과 사업분야 사이 간격 */
}

.about-label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 20px; /* 💡 SERVICES와 제목 사이 간격 축소 (20px -> 10px) */
}

.about-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.4;
    color: #111;
    margin-top: 0;
    margin-bottom: 30px; /* 💡 메인 제목과 설명글 사이 간격 축소 (30px -> 15px) */
    letter-spacing: -1px;
}

.about-title .highlight-red {
    color: #c32621;
}

.about-desc {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    word-break: keep-all;
    margin: 0;
}


/* ========================================================
   ABOUT 서비스 영역. !! 사업분야 !!(3단 이미지 갤러리형 레이아웃)
=========================================================== */
.service-gallery-wrap {
    max-width: 1200px; /* 메인 화면과 폭을 똑같이 맞춤 */
    margin: 0 auto 120px;
}

.service-gallery-header {
   text-align: left; 
    margin-bottom: 25px; /* 💡 트랙 레코드 영역과 여백을 완벽하게 동일하게 맞춤 */
}

.gallery-title {
    font-size: 38px; /* 🚨 크기 38px로 완전 통일 */
    font-weight: 800; /* 🚨 굵기 완전 통일 */
    color: #111;
    margin: 0;
    letter-spacing: -1px;
}


.gallery-desc {
    font-size: 20px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* 3단 그리드 정렬 */
.service-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    border-top: 2px solid #111; /* 🚨 마법의 핵심! 트랙 레코드와 똑같은 두꺼운 구분선 추가 */
    padding-top: 50px; /* 💡 선과 아래 사진 사이의 간격도 똑같이 50px로 맞춤 */
}

/* 개별 카드 디자인 */
.gallery-card {
    position: relative;
    display: block;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 1.6 / 1.4; /* 시안처럼 살짝 세로로 긴 직사각형 비율 */
}

/* 배경 이미지 세팅 */
.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* 마우스 호버(올렸을 때) 줌인 효과 */
.gallery-card:hover .gallery-img {
    transform: scale(1.06); 
}

/* 하단 검은색 그라데이션 */
.gallery-overlay {
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 60%; /* 아래쪽에서 절반 정도까지만 어둡게 */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    display: flex;
    align-items: flex-end; /* 텍스트를 바닥으로 내림 */
    padding: 35px 25px;
    box-sizing: border-box;
    z-index: 1;
}

/* 텍스트 및 뱃지 스타일 */
.gallery-text {
    width: 100%;
}

.gallery-text h3 {
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
    display: flex;
    align-items: baseline; 
    gap: 8px;
    flex-wrap: wrap;
    line-height: 1.3;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); /* 글자에 진한 그림자 마법 부여 */
}

.gallery-text h3 span {
    font-size: 12px;
    font-weight: 400;
    color: #ccc;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* =========================================
   해시태그 뱃지 (한 줄 강제 고정 및 말줄임 처리)
========================================= */
.gallery-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%; /* 💡 뱃지 영역이 카드 폭을 꽉 채우도록 설정 */
}

.gallery-badges span {
    display: inline-block;
    font-size: 11px; /* 💡 글자 크기도 아주 살짝만 줄여서 공간을 벌어줍니다 */
    color: #eee;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5px 10px; /* 💡 좌우 여백을 12px에서 8px로 확 줄여서 글자가 들어갈 자리 확보 */
    border-radius: 20px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    
    white-space: nowrap; /* 한 줄로 나오게 유지 */
    letter-spacing: -0.2px; /* 🚨 말씀하신 대로 자간을 확 좁혀서 텍스트 길이를 압축! */
    /* 🚨 뒤를 잘라버리던 overflow: hidden; 과 text-overflow: ellipsis; 는 완전히 삭제했습니다! */
}

/* =========================================
   ABOUT 주요 실적 영역 (MAJOR TRACK RECORD) - 레이아웃 변경
========================================= */
.track-record-wrap {
    max-width: 1200px;
    /* 💡 위쪽 여백을 160px로 넓혀 BUSINESS AREA와의 간격을 시원하게 띄웠습니다! */
    margin: 160px auto 120px; 
}

.track-record-header {
    text-align: left;
    margin-bottom: 25px;
}

.track-record-title {
    font-size: 38px; /* 🚨 기존 36px에서 38px로 올려서 위쪽 제목과 1픽셀도 안 틀리게 동기화! */
    font-weight: 800;
    color: #111;
    margin: 0;
    letter-spacing: -1px;
}

/* 💡 세로 1단 정렬 리스트 형태로 변경 */
.track-record-list {
    display: flex;
    flex-direction: column;
    gap: 80px; /* 각 카테고리 덩어리 사이의 넓은 간격 */
    border-top: 2px solid #111;
    padding-top: 50px;
}

/* 좌측 텍스트, 우측 이미지 박스 가로 배치 */
.track-record-item {
    display: flex;
    align-items: flex-start; /* 🚨 기존 center에서 flex-start로 변경! 위쪽 선을 완벽하게 맞춥니다 */
    justify-content: space-between;
    gap: 60px; 
}

/* 왼쪽 텍스트 덩어리 */
.track-text {
    width: 55%; 
}

/* 오른쪽 사진 박스 덩어리 */
.track-image-box {
    width: 40%; 
    aspect-ratio: 1.5 / 1; /* 💡 사진 비율 (가로가 살짝 긴 직사각형) */
    background-color: #f1f1f1; /* 이미지가 없을 때 보이는 임시 회색 배경 */
    border-radius: 16px; /* 둥근 모서리 */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); /* 부드러운 그림자 효과 */
}

/* 우측 실제 이미지 꽉 채우기 */
.track-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 소제목 디자인 */
.track-text h4 {
    font-size: 26px;
    font-weight: 700;
    color: #111;
    margin-top: 0;
    margin-bottom: 23px;
    word-break: keep-all;
}

.track-text h4 span {
    font-size: 18px;
    font-weight: 400;
    color: #666;
}

/* 리스트(-) 디자인 */
.track-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.track-text li {
    position: relative;
    padding-left: 15px;
    font-size: 17px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 10px;
    word-break: keep-all;
}

.track-text li::before {
    content: '-';
    position: absolute;
    left: 0;
    top: -1px;
    color: #999;
}



/* =========================================
   Contact 페이지 전용 스타일 (새로운 디자인 적용)
========================================= */
.contact-intro-new {
    margin-bottom: 80px; 
    padding-top: 0; /* 🚨 About과 1픽셀도 안 틀어지게 기존 20px 패딩을 삭제하여 0으로 만듭니다 */
}

/* 메인 굵은 제목 */
.contact-title {
    font-size: 42px;
    font-weight: 800; /* 시안처럼 아주 굵고 강렬하게 */
    color: #111;
    line-height: 1.4;
    margin-bottom: 30px;
    letter-spacing: -1px;
    margin-top: 0;
}

/* 빨간색 강조 포인트 */
.contact-title .highlight-red {
    color: #c32621; 
}

/* 아래쪽 설명글 */
.contact-desc {
    font-size: 16px;
    color: #111;
    line-height: 1.8;
    word-break: keep-all;
    margin: 0;
}


/* 하단 지도 영역 스타일 */
.contact-map {
    width: 100%;
    border-top: 1px solid #111; /* 상단 검은색 구분선 */
    padding-top: 40px;          /* 선과 지도 사이 여백 */
    margin-bottom: 80px;        /* 푸터와의 여백 */
}

/* 카카오맵 자체 박스 디자인 */
.root_daum_roughmap {
    border: 1px solid #ddd;     /* 지도 테두리를 연한 회색으로 깔끔하게 */
    margin-bottom: 0;
}

.map-placeholder {
    width: 100%;
    height: 450px;
    background-color: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-size: 16px;
    border-bottom: 1px solid #eee; /* 아래쪽 연한 선 */
    margin-bottom: 15px;
}

.map-caption {
    font-size: 12px;
    color: #333;
    font-weight: 700;
    margin-bottom: 100px;
}


/* =========================================
   지도 2개 레이아웃 디자인
========================================= */

/* 각 지도 덩어리(섹션) 사이의 간격 띄우기 */
.map-section {
    margin-bottom: 70px; /* 위 지도와 아래 지도를 시원하게 띄움 */
}

/* 지도 제목 디자인 ([사무실], [인쇄소]) */
.map-title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin-bottom: 15px; /* 제목과 지도 사이의 간격 */
}

/* 임시 이미지용 가로 꽉 채우기 */
.full-width-map {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ddd;
margin-bottom: 15px; /* 💡 지도 아래쪽에 15px 여백을 주어 글자와 시원하게 띄웁니다 */
}

/* =========================================
   More 버튼 작동을 위한 숨김 클래스
========================================= */
.hidden-item {
    display: none !important; /* 처음에는 화면에서 완전히 숨깁니다 */
}



/* =========================================
   메인 화면 배너 (텍스트 오버레이형)
========================================= */
.main-slider {
    width: 100%;
    max-width: 1200px;
    height: 520px; 
    margin-top: 176px; 
    margin-left: auto;
    margin-right: auto; 
    position: relative;
    overflow: hidden;
    border-radius: 24px; 
    background-color: #222; 
    
    /* 🚨 새롭게 추가된 테두리 코드 🚨 */
    border: 2px solid #e0e0e0; /* 흰색 배경과 깔끔하게 구분되는 연한 회색 선 */
    box-sizing: border-box; /* 테두리 1px 때문에 전체 레이아웃이 밀리지 않도록 꽉 잡아줌 */
}

/* 💡 슬라이드 스르륵 나타나는 페이드 효과 적용 */
.slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* 평소엔 투명하게 숨김 */
    transition: opacity 1.2s ease-in-out; /* 1.2초 동안 부드럽게 등장 */
    z-index: 1;
}

.slide.active {
    opacity: 1; /* active 클래스가 붙은 슬라이드만 화면에 보임 */
    z-index: 2;
}

/* 글자가 잘 보이도록 왼쪽에서부터 어두워지는 그라데이션 적용 */
.slide-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0) 100%);
    z-index: 2;
}

/* 배너 텍스트 전체 그룹 */
.banner-content {
    position: absolute;
    top: 50%;
    left: 70px; /* 왼쪽 여백 */
    transform: translateY(-50%);
    z-index: 3;
    color: #fff;
}

.banner-title {
    font-size: 38px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

/* 붉은색 강조 글씨 */
.banner-title .highlight {
    font-weight: 700;
    color: #c32621; 
}

.banner-subtitle {
    font-size: 22px; /* 💡 기존 18px에서 24px로 시원하게 확대! */
    font-weight: 700;
    color: #FFD700; /* 🚨 텍스트 색상을 눈에 띄는 쨍한 노란색으로 변경 */
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.banner-desc {
    font-size: 15px;
    color: #ddd;
    line-height: 1.6;
    margin-bottom: 35px;
    word-break: keep-all;
}

/* 버튼 영역 */
.banner-buttons {
    display: flex;
    gap: 12px;
}

.banner-buttons a {
    display: inline-block;
    padding: 15px 30px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 30px; /* 버튼을 알약 모양으로 둥글게 */
    transition: all 0.2s ease;
}

/* 첫 번째 빨간 버튼 */
.btn-primary {
    background-color: #c32621;
    color: #fff !important;
    border: 1px solid #c32621;
}

.btn-primary:hover {
    background-color: #a01d19; /* 마우스 올리면 살짝 어두워짐 */
}

/* 두 번째 투명 버튼 */
.btn-secondary {
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}












/* =========================================
   두 번째 슬라이드 전용 텍스트 스타일
========================================= */
.sub-banner-badge {
    display: inline-block;
    background-color: #c32621; 
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 25px; /* 💡 좌우 여백을 늘려서 뱃지 길이를 길게 뻗게 만듭니다 */
    border-radius: 30px; 
    margin-bottom: 25px; /* 💡 기존 25px에서 12px로 줄여 글자와 바짝 붙였습니다 */
}

.sub-banner-title {
    font-size: 38px; 
    font-weight: 800; /* 💡 400이었던 굵기를 800으로 올려 전체를 아주 두꺼운 볼드체로 변경! */
    color: #111; 
    line-height: 1.4;
	margin-top: 0;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

/* 💡 빨간색 포인트 글자 스타일 추가 */
.sub-banner-title .highlight-blue {
    color: #c32621; /* 뱃지와 동일한 빨간색 적용 */
}

.sub-banner-desc {
    font-size: 15px; 
    color: #555;
    line-height: 1.6;
    margin-bottom: 45px; 
    word-break: keep-all;
}




/* =========================================
   슬라이더 좌우 이동 화살표 버튼
========================================= */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background-color: rgba(0, 0, 0, 0.2); /* 평소엔 반투명한 검정색 배경 */
    color: #fff;
    border: none;
    border-radius: 50%; /* 동그란 버튼 모양 */
    font-size: 18px;
    cursor: pointer;
    z-index: 10; /* 슬라이드 위로 올라오도록 설정 */
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.6); /* 마우스 올리면 진해짐 */
}

/* 왼쪽 화살표 위치 */
.prev-btn {
    left: 20px;
}

/* 오른쪽 화살표 위치 */
.next-btn {
    right: 20px;
}






/* =========================================
   🚨 PC 화면 썸네일 찌그러짐/크기 변화 완벽 차단
========================================= */

/* 기존 min-width:769px 블록 전체를 이걸로 교체 */
@media screen and (min-width: 769px) {
    .content-container,
    .about-container {
        width: 100%;
        max-width: 1200px;
        padding: 0 30px;
        box-sizing: border-box;
    }
}


/* =========================================
   📱 모바일 버전을 위한 마법의 코드 (반응형 웹 통합본)
   화면 가로폭이 768px(스마트폰/태블릿) 이하일 때만 작동합니다!
   (기존에 흩어져 있던 4개의 모바일 코드를 하나로 깔끔하게 모았습니다)
========================================= */
@media screen and (max-width: 768px) {
    
 	.logo-container { margin-left: 0 !important; }

    /* 1. 상단 로고와 메뉴바 (메뉴 가로 한 줄 강제 고정) */
    .header-inner { flex-direction: column; padding: 20px; gap: 15px; }
    .main-nav ul { display: flex; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center; gap: 20px; }
    .main-nav a { font-size: 14.5px; }

    /* 2. 모바일 메인 배너 및 텍스트 반응형 */
    .main-slider { margin-top: 200px !important; height: 560px !important; height: auto !important; border-radius: 0 !important; }
    .slide-overlay { background: rgba(0, 0, 0, 0.7) !important; }
    .banner-content { left: 20px !important; right: 20px !important; text-align: left; }
    .banner-title { font-size: 25px !important; margin-bottom: 15px !important; }
    .banner-subtitle { font-size: 18px !important; color: #FFD700 !important; margin-bottom: 12px !important; }
    .banner-desc { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 30px !important; }
    .banner-buttons { flex-direction: column; gap: 10px; }
    .banner-buttons a { text-align: center; width: 100%; padding: 13px 20px !important; box-sizing: border-box; }

    /* 3. 모바일 두 번째 슬라이드 텍스트 */
    .sub-banner-badge { font-size: 12px !important; padding: 8px 20px !important; margin-bottom: 10px !important; }
    .sub-banner-title { font-size: 25px !important; margin-bottom: 15px !important; }
    .sub-banner-desc { font-size: 13px !important; margin-bottom: 30px !important; }

    /* 4. 모바일 하위 카테고리(서브메뉴) 아예 안 보이게 숨김 */
    .has-dropdown { width: 100%; }
    .sub-nav { display: none !important; }
    .has-dropdown:hover .sub-nav, .has-dropdown:active .sub-nav { display: none !important; }

    /* 5. 서브 페이지(어바웃, 컨택트) 상단 여백 확보 */
    .content-container { margin-top: 260px; padding: 0 15px; }
    .main-slider + .content-container { margin-top: 80px !important; }

    /* 6. 메인 포트폴리오 인트로 영역 */
    .portfolio-intro { margin-bottom: 35px !important; }
    .portfolio-intro .intro-heading { font-size: 22px !important; margin-bottom: 10px !important; }
    .portfolio-intro .intro-subtext { font-size: 13px !important; }

    /* 7. 메인 화면 2칸으로 줄이기 & 썸네일 고정 */
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 15px 10px; }
    .portfolio-item { text-align: center; display: flex; flex-direction: column; justify-content: flex-start; }
    .item-image-placeholder { width: 100% !important; aspect-ratio: auto !important; height: auto !important; margin-bottom: 8px !important; background-color: transparent !important; }
    .portfolio-image { width: 100%; height: auto !important; object-fit: contain !important; display: block; transition: transform 0.3s ease; }
    .item-title { font-size: 13.5px; word-break: keep-all; margin-top: 8px !important; margin-bottom: 4px !important; height: 38px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.4 !important; }
    .item-tags { font-size: 11px; margin-top: 0 !important; color: #888; }

    /* 8. 포트폴리오 상세페이지 */
    .detail-container { margin-top: 260px; }
    .detail-title-area h2 { font-size: 18px; word-break: keep-all; padding: 0 15px; line-height: 1.4; }
    .detail-title-area p { font-size: 12px; word-break: keep-all; padding: 0 15px; }

    /* 9. About 페이지: 전체 컨테이너 및 인트로 */
    .about-container { margin-top: 260px !important; padding: 0 15px !important; }
    .about-intro-section { margin-bottom: 80px !important; }
    .about-title { font-size: 28px !important; margin-bottom: 20px !important; }
    .about-desc { font-size: 14px !important; line-height: 1.6 !important; }
    .about-intro { grid-template-columns: 1fr; gap: 30px; }

    /* 10. About 페이지: BUSINESS AREA (세로 1단 정렬) */
    .gallery-title { font-size: 28px !important; margin-bottom: 15px !important; }
    .service-gallery-header { margin-bottom: 20px !important; }
    .service-gallery-grid { grid-template-columns: 1fr !important; gap: 30px !important; padding-top: 30px !important; }
    .gallery-card { aspect-ratio: 1 / 0.8 !important; }
    .gallery-text h3 { font-size: 22px !important; }

    /* 11. About 페이지: MAJOR TRACK RECORD (텍스트 위 / 이미지 아래) */
    .track-record-wrap { margin-top: 100px !important; margin-bottom: 80px !important; }
    .track-record-title { font-size: 28px !important; }
    .track-record-list { gap: 60px !important; padding-top: 30px !important; }
    .track-record-item { flex-direction: column !important; gap: 25px !important; }
    .track-text, .track-image-box { width: 100% !important; }
    .track-text h4 { font-size: 20px !important; margin-bottom: 15px !important; }
    .track-text li { font-size: 15px !important; }

    /* 12. Contact 페이지 */
    .contact-info { grid-template-columns: 1fr; gap: 30px; }
    .partner-grid { grid-template-columns: repeat(2, 1fr); }

    /* 13. 푸터 가운데 정렬 */
    .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
}