@charset "utf-8";

/*
================================================================================
구인 글 보기 스킨 스타일 (view.skin.php) - 레이아웃 V3 / 밝은 테마
================================================================================
*/

/* --- 메인 콘텐츠 영역 --- */
.recruit-content-area {
    padding: 0px;
}

/* 제목 및 핵심 정보 섹션 */
.title-section {
    text-align: center;
    margin-bottom: 20px;
    padding: 20px; /* 패딩 값 조정 */
    background-color: var(--card-bg-color); /* 배경색 변경 */
    border-radius: 15px;
    border: 1px solid var(--border-color); /* 테두리 변경 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 은은한 그림자 */
}
.title-section .breadcrumb { font-size: 14px; color: var(--text-secondary-color); margin-bottom: 20px; }
.title-section .breadcrumb a { color: var(--text-secondary-color); text-decoration: none; }
.title-section .breadcrumb a:hover { color: var(--accent-blue-color); }
.title-section .breadcrumb span { color: var(--text-primary-color); font-weight: 500; }
.title-section h1 {
    font-size: 36px; /* 폰트 크기 조정 */
    font-weight: 900;
    color: #555; /* 글자색 변경 */
    margin: 0 0 10px 0;
}
.title-section .subtitle {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary-color); /* 글자색 변경 */
    margin: 0 0 5px 0;
}
.title-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    border-image: none; /* 그라데이션 테두리 제거 */
    border-bottom: 1px solid var(--border-color); /* 구분선 변경 */
    padding: 8px;
}

/* --- 정보 카드 섹션 --- */
.info-cards-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.info-card {
    background-color: #fff; /* 배경색 변경 */
    border: 1px solid var(--border-color); /* 테두리 변경 */
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 은은한 그림자 */
}
.info-card .card-title {
    font-size: 20px;
    font-weight: 700;
    color: #555; /* 글자색 변경 */
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    border-image: none; /* 그라데이션 테두리 제거 */
    border-bottom: 1px solid var(--border-color); /* 구분선 변경 */
}
.info-card .card-title i {color: #8666f8;margin-right: 12px;font-size: 24px;}
.info-card ul { list-style: none; padding: 0; margin: 0; }
.info-card ul li {display: flex;justify-content: space-between;padding: 10px 0;border-bottom: 1px solid #f1f3f5;font-size: 15px;} /* 내부 구분선 색상 변경 */
.info-card ul li:last-child { border-bottom: none; }
.info-card ul li strong { color: var(--text-secondary-color); font-weight: 500; margin-right: 20px; }
.info-card ul li span {color: #555;font-weight: 500;text-align: right;}
.info-card ul li a {color: #8666f8;text-decoration: none;}
.info-card ul li a:hover {color: #8666f8;}

.view-tag-v2 {background: #8666f8;color: #fff;padding: 6px 14px;border-radius: 25px;font-size: 14px;font-weight: 600;}

.contact-cta { background: var(--notice-bg-color); border-color: var(--border-color); text-align: center; } /* 연락처 배경 변경 */
.contact-cta .card-title { border-bottom: none; justify-content: center; }
.cta-message { font-size: 16px; color: var(--text-secondary-color); margin-bottom: 20px; font-weight: 500; }
.cta-message b {color: #8666f8;font-weight: 700;}

/* ▼▼▼ [수정] 이 부분에 margin: 0 auto; 를 추가하여 중앙 정렬합니다 ▼▼▼ */
.contact-buttons-v2 {display: grid;grid-template-columns: 1fr;gap: 12px;width: 95%; margin: 0 auto;}
.btn-cta { display: flex; align-items: center; justify-content: center; padding: 14px 20px; border-radius: 10px; font-size: 16px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
.btn-cta i { margin-right: 10px; font-size: 18px; }
.call-btn {background: #8666f8;color: #fff;}
.call-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(76, 81, 191, 0.3); } /* 그림자 색상 변경 */
.sms-btn, .recommend-btn { background-color: #e9ecef; color: var(--text-primary-color); } /* 버튼 배경/글자색 변경 */
.sms-btn:hover, .recommend-btn:hover { background-color: #dee2e6; color: var(--text-primary-color); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }

/* --- 상세 내용 및 지도 섹션 (전체 너비) --- */
.fullwidth-detail-section, .fullwidth-map-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.content-box .box-title {font-size: 20px;font-weight: 700;color: #555;margin: 0;padding: 12px 16px;display: flex;align-items: center;border-image: none;border-bottom: 1px solid var(--border-color);}
.content-box .box-title i {color: #8666f8;margin-right: 12px;font-size: 24px;}
.box-text-content {padding: 10px;font-size: 14px;line-height: 1.8;color: var(--text-secondary-color);}
.box-text-content p { margin-bottom: 1em; }

.map-box #map { width: 100%; height: 400px; border-radius: 5px 5px 0 0; }
.map-box .map-address-info { padding: 20px 30px; }
.map-error-message {display: flex;align-items: center;justify-content: center;height: 100%;text-align: center;color: var(--text-secondary-color);border-image: none;border-bottom: 1px solid var(--border-color);}
.map-address {
    font-size: 16px;
    color: #555;
    font-weight: 600;
    padding: 22px 0px 0px 12px;
}
.map-directions-inline {
    font-size: 14px;
    color: var(--text-secondary-color);
    margin-left: 15px; /* 주소와 간격 띄우기 */
    font-weight: 600; /* 폰트 굵기 살짝 가늘게 */
}

/* --- 나리야 빌더 & 하단 버튼 (기존 스타일 재활용) --- */
.nariya-default-section { /* 이전과 동일 */ }
/* (이전 답변의 나리야 관련 CSS 코드를 여기에 붙여넣으세요) */


/* --- 반응형 --- */
@media (max-width: 992px) {
    .recruit-content-area { padding: 30px; }
    .title-section h1 { font-size: 36px; }
}

@media (max-width: 768px) {
    .recruit-content-area { padding: 20px; }
    .title-section { padding: 20px; }
    .title-section h1 { font-size: 30px; }
    .info-cards-section, .fullwidth-detail-section, .fullwidth-map-section { gap: 20px; margin-bottom: 40px; }
    .info-card, .content-box .box-title, .box-text-content, .map-box .map-address-info { padding: 20px; }
}

/* 게시물 보기 버튼 스타일 */
.view-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.view-actions .btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
    margin-left: 5px;
    border: 1px solid var(--border-color);
}

.view-actions .btn-primary {
    background-color: var(--accent-blue-color);
    color: #fff;
    border-color: var(--accent-blue-color);
}

.view-actions .btn-primary:hover {
    background-color: var(--accent-hover-color);
}

.view-actions .btn-secondary {
    background-color: var(--card-bg-color);
    color: var(--text-primary-color);
    border-color: var(--border-color);
}

.view-actions .btn-secondary:hover {
    background-color: #f8f9fa;
}

.view-actions .left-buttons,
.view-actions .right-buttons {
    display: flex;
    gap: 5px;
}

/* 실제 이미지 스타일 */
.main-content-image {
    width: 100%;    /* 틀의 너비에 100% 맞춤 */
    height: 100%;   /* 틀의 높이에 100% 맞춤 */

    /* --- 핵심 속성 --- */
    /* 이미지 비율은 유지하되, 틀을 가득 채우도록 확대/축소 (필요시 잘림) */
    object-fit: cover;
}

/* --- 이미지 갤러리 스타일 --- */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px; /* 이미지 사이의 간격 */
}

.gallery-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid var(--border-color);
}

.gallery-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(76, 81, 191, 0.2);
}

.no-gallery-item {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 0;
    color: var(--text-secondary-color);
}

/* --- [추가] 제목 섹션 안으로 들어간 정보 카드 섹션 스타일 --- */
.title-section .info-cards-section {
    width: 100%; /* 너비를 꽉 채우도록 설정 */
    margin-top: 30px; /* 태그와의 간격 */
    text-align: left; /* 내부 컨텐츠는 왼쪽 정렬로 되돌림 */
}

/* --- 분리된 컨텐츠 박스 사이의 간격 --- */
.content-box {
    margin-bottom: 20px; /* 각 컨텐츠 박스 아래에 여백을 줍니다. */
	background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* --- 박스 내부 스타일 조정 (이전과 동일) --- */
.content-box .box-title:not(:first-child) {
    margin-top: 30px;
}
#map_wrapper {
    padding: 20px;
}
#map {
    width: 100%;
    height: 400px;
    border-radius: 10px;
}
.map-address-info {
    padding: 0 0 20px 0;
	margin-top: -15px;
}

/* --- 이용안내: 아이콘 리스트 스타일 --- */
.info-icon-list {
    list-style: none;
    padding: 10px 0px 0px 12px;
    margin: 0;
}
.info-icon-list li {
    display: flex;
    align-items: center;
    font-size: 15px;
    margin-bottom: 15px;
    color: var(--text-secondary-color);
	padding-bottom: 15px; /* 선과 글자 사이의 여백 */
    border-bottom: 1px solid #f1f3f5;
}
.info-icon-list .icon-wrapper {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #8666f8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}
.info-icon-list .icon-wrapper i {
    color: #fff;
    font-size: 16px;
}

/* --- [수정] 하나의 박스 안 2단 레이아웃 스타일 --- */
.inner-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px; /* 좌우 콘텐츠 사이 간격 */
    /* padding: 20px; */
}
.inner-title {
    font-size: 20px;
    font-weight: 700;
    color: #555;
    margin: 0 0 20px -4px;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    border-image: none;
    border-bottom: 1px solid var(--border-color);
}
.inner-title i {
    color: #8666f8;
    margin-right: 12px;
    font-size: 25px;
}

/* 모바일 화면에서는 세로로 쌓이도록 변경 */
@media (max-width: 992px) {
    .inner-two-column {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
/* ===============================================================
    정보 카드 내부 폰트 및 굵기 문제 해결 (추가)
================================================================*/
.info-card ul li {
    font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif;
}

.info-card ul li strong {
    font-weight: 600; /* '지역', '주소' 등 라벨 텍스트 굵기 */
}

.info-card ul li span {
    font-weight: 600; /* '서울', '강원...' 등 내용 텍스트 굵기 */
}

/* ===============================================================
    Lightbox 모달 최종 커스텀 디자인 (v11 - 정보 오버레이 스타일)
    - 모달은 집중도를 위해 어둡게 유지하는 것이 좋습니다.
================================================================*/

/* --- 1. 뒷 배경 --- */
.lightboxOverlay { background-color: rgba(0, 0, 0, 0.85); }

/* --- 2. 모달창 전체 --- */
.lightbox {
    box-shadow: none !important;
    background: none !important;
}

/* --- 3. 모달 컨테이너 --- */
.lightbox .lb-outerContainer {
    position: relative;
    background-color: #2c2c3e;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #4a4a5e;
}

/* --- 4. 이미지 (모든 모서리 둥글게) --- */
.lightbox .lb-image {
    border-radius: 15px !important; /* 컨테이너와 동일하게 모든 모서리 둥글게 */
    display: block; /* 아래쪽 여백 제거 */
}

/* --- [핵심 수정] 5. 하단 정보 영역 (이미지 위로 오버레이) --- */
.lightbox .lb-dataContainer {
    width: 100% !important;
    position: absolute; /* 이미지 위로 띄우기 */
    bottom: 0; /* 아래쪽에 고정 */
    left: 0;
    z-index: 10;
    padding: 60px 25px 25px 25px; /* 위쪽 여백을 많이 주어 그라데이션 공간 확보 */
    
    /* 반투명 그라데이션 배경 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, #00000078 100%);
    border-radius: 0 0 15px 15px; /* 아래쪽 모서리만 둥글게 */
}
.lightbox .lb-data .lb-details { text-align: center; width: 100%; }
.lightbox .lb-data .lb-caption {
    font-size: 24px; font-weight: 700; color: #ffffff;
    line-height: 1.5; display: block;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5); /* 텍스트가 잘 보이도록 그림자 추가 */
}
.lightbox .lb-data .lb-number { display: none !important; }

/* --- 6. 닫기 버튼: 'X 닫기' 중앙 배치 --- */
.lightbox .lb-closeContainer {
    text-align: center;
    width: 100%;
}
.lightbox .lb-close {
    float: none !important;
    background: rgba(0,0,0,0.3) !important;
    position: static !important;
    display: inline-block !important;
    width: auto !important; height: auto !important;
    margin: 20px auto 0 auto;
    padding: 10px 25px;
    border-radius: 50px;
    opacity: 0.9;
    transition: all 0.2s ease;
    border: 1px solid #555;
    cursor: pointer;
    line-height: 1;
}
.lightbox .lb-close:hover {
    opacity: 1;
    background: var(--accent-blue-color) !important; /* 호버 색상 변경 */
    border-color: var(--accent-blue-color);
}
.lightbox .lb-close::before {
    content: '\f00d'; font-family: "Font Awesome 5 Free"; font-weight: 900;
    color: #fff; font-size: 14px; margin-right: 8px; vertical-align: middle;
}
.lightbox .lb-close::after {
    content: '닫기'; font-size: 14px; color: #fff; vertical-align: middle;
}

/* --- 7. 좌/우 화살표 버튼 --- */
.lightbox .lb-prev, .lightbox .lb-next {
    opacity: 0.7 !important;
    transition: opacity 0.2s ease;
}
.lightbox .lb-prev:hover, .lightbox .lb-next:hover {
    opacity: 1 !important;
}

/* 모든 제목(타이틀) 영역에 적용될 스타일 */
.box-title,
.card-title,
.inner-title {
  background-color: #f8f9fa; /* 원하시는 배경색으로 변경하세요 */
  padding: 12px 15px;     /* 제목 영역의 안쪽 여백 */
  margin: 0;              /* 제목 위아래 불필요한 공간 제거 */
  border-bottom: 1px solid #e9e9e9; /* 제목과 내용 사이의 구분선 */
  border-radius: 5px 5px 0 0;  /* 둥근 모서리 추가 (핵심!) */
}

/* '샵 정보', '모집요강' 카드의 스타일 수정 */
.info-card {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/* '샵 정보' 카드 안의 내용(목록)에 다시 적절한 여백 추가 */
.info-card ul {
  padding: 15px;
  margin: 0;
  list-style: none;
}

/* 온라인 지원 */
.btn-cta.apply-btn {
    background: #ff5722; /* 눈에 띄는 주황색 계열 */
    color: #fff;
}
.btn-cta.apply-btn:hover {
    background: #e64a19;
}

/* ====== 이력서 선택 팝업(모달) 스타일 ====== */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 1000; display: none; align-items: center; justify-content: center; }
.modal-overlay.is-visible { display: flex; }
.modal-window { background: #fff; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); max-width: 500px; width: 90%; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #e9ecef; }
.modal-header h2 { margin: 0; font-size: 18px; }
.modal-close { background: none; border: none; font-size: 24px; cursor: pointer; }
.modal-content { padding: 20px; max-height: 300px; overflow-y: auto; }
.resume-option { padding: 10px; border-bottom: 1px solid #f5f5f5; }
.resume-option:last-child { border-bottom: none; }
.resume-option label { display: block; cursor: pointer; }
.no-resumes { padding: 30px; text-align: center; color: #888; }
.modal-footer { text-align: right; padding: 15px 20px; border-top: 1px solid #e9ecef; }
.btn-modal { padding: 8px 20px; border-radius: 5px; border: 1px solid #ccc; cursor: pointer; }
.btn-submit { background-color: #333; color: #fff; border-color: #333; }