/* default.css */
:root{
  --w: 1280px;
  --graybar: #eeeeee;
  --line: #d7d7d7;
  --softline: #f1f1f1;
  --orange: #ff3900;
  --orange2: #e14a18;
  --acolor: #222;
  --muted: #9a9a9a;
  --panel: #fbfbfb;
}

*{ box-sizing:border-box; }

/* ✅ 수정: 푸터 하단 배치를 위한 flex 구조 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* 필수: 전체 높이 확보 */
}

body {
display: flex;          /* 추가: 자식 요소들을 flex로 제어 */
    flex-direction: column;
	font-family: "Noto Sans KR", sans-serif;
  font-size: 14px;          
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.8;

  /* 스무딩 최소화 (브라우저/OS마다 다르게 적용됨) */
  -webkit-font-smoothing: none;      /* Chrome/Safari(특히 mac에서 효과) */
  -moz-osx-font-smoothing: auto;     /* Firefox mac */
  text-rendering: optimizeSpeed;     /* 부드러움 줄이는 쪽 */
}
/* 모든 입력 요소의 글꼴을 부모 글꼴로 통일 */
input, textarea, select, button {
    font-family: inherit; /* 부모(body 등)에 설정된 글꼴을 그대로 사용 */
    font-size: inherit;   /* 글자 크기도 통일하고 싶을 때 */
}

/* ✅ 추가: 콘텐츠 영역 컨테이너 (이 영역이 푸터를 아래로 밉니다) */
/* offer.php나 job.php의 본문을 감싸는 최상위 클래스나 태그에 적용 */
.container, main, .board {
  flex: 1 0 auto; /* 남는 공간을 모두 채움 */
}

/* 링크 파란색/밑줄 제거 */
a, a:link, a:visited, a:hover, a:active{
  text-decoration:none !important;
}

img{ display:block; border:0; }

.topbar__logo{ 
font-size: 24px;
    line-height: 1;
    letter-spacing: 0.5px;
    margin: 0;
    font-weight: bold;
 }
.topbar__logo .red{ color:#ff3900; }
.topbar__logo .black{ color:#111; }

/* ===== 상단 회색바 ===== */
.topbar{
  flex-shrink: 0; /* 헤더 크기 유지 */
  background:var(--graybar);
  border-bottom:1.5px solid var(--line);
}
.topbar__inner{
  width:var(--w);
  margin:0 auto;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 20px;
}

/* 로고 위치/크기 */
.topbar__logo img{
  height:30px;
}

/* 오른쪽 메뉴 */
.topbar__right{
  display:flex;
  align-items:center;
  gap:25px;
}
.topbar__mylink{
  font-size:14px;
  color:#333 !important;
}

/* ✅ 정보등록: 주황 배경 + 흰 글씨 */
.topbar__btn{
  display:inline-block;
  padding:5px 20px;
  background:var(--orange);
  border:1px solid var(--orange2);
  color:#fff !important;
  font-weight:bold;
  line-height:1.2;
  color:#000;
}

footer, #footer, .footer, .site-footer {
  flex-shrink: 0; /* 푸터 높이 고정 */
  min-height: 45px; /* height 대신 min-height 추천 */
  background: var(--graybar);
  border-top: 1px solid var(--line);
  margin-top: auto; /* 내용이 적을 때 위쪽 마진을 최대로 하여 바닥으로 밀기 */
}

/* footer 내부 정렬 */
footer .inner, #footer .inner, .footer .inner, .site-footer__inner {
  width: var(--w);
  margin: 0 auto;
  height: 44px; /* 높이 소폭 조정(정렬용) */
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 10px;
}

/* footer 텍스트/링크 */
footer, #footer, .footer, .site-footer{
  font-size:14px;
  color:#111;
}
footer a, #footer a, .footer a, .site-footer a{
  color:#111 !important;
  text-decoration:none !important;
}
/* footer 링크 정렬 및 간격 */
.site-footer__links{
  display: flex;
  gap: 18px;
}
/* ===== 회사 정보 토글 영역 ===== */
.footer-company{
  display:none;
  background: var(--graybar);
  font-size:14px;
  color:#111;
}

.footer-company__inner{
  width:var(--w);
  margin:0 auto;
  padding:0 10px 10px 10px;
  line-height:1;
}

.footer-company__copy{
  margin-top:6px;
}

/* ⓒ 클릭 가능하게 */
.site-footer__copy{
  cursor:pointer;
}
/* 검색엔진 최적화를 위한 텍스트 숨김 처리 */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* 페이징 컨테이너 - 왼쪽 정렬 */
.paging-container {
    display: flex;
    justify-content: flex-start; /* 왼쪽 정렬로 변경 */
    padding: 0 10px;
}

.pages {
    display: flex;
    gap: 2px; /* 버튼 사이의 미세한 간격 */
    align-items: center;
}

/* 기본 버튼 스타일 */
.pages a {
    width: 27px;
    line-height: 27px;
    text-align: center;
    background: #8f8f8f;
    color: #fff !important;
    font-size: 15px;
    border: 1px solid #888;
    margin-left: 2px;
}

/* 현재 페이지 강조 (더 진한 색상 또는 다른 포인트가 필요할 시 조절) */
.pages a.current {
	background-color: var(--orange);
    border: 1px solid var(--orange);
    font-weight: bold;
}

/* 마우스 호버 시 효과 */
.pages a:hover:not(.current) {
    background-color: #777777; /* 호버 시 약간 어두워짐 */
}

/* 이전/다음 버튼 스타일 (동일하게 유지) */
.pages a.next, .pages a.prev {
    font-weight: bold;
    background-color: #9a9a9a;
}
.about-container {
	width: var(--w);
	margin: 40px auto;
	padding: 20px;
	line-height: 1.6;
	color: #333;
}
.about-container h1 { font-size: 2.2rem; margin-bottom: 10px; color: #000; }
.about-container .lead { font-size: 1.2rem; color: #666; margin-bottom: 40px; }
.vision-box { 
	background: #f8f9fa; 
	padding: 25px; 
	border-radius: 8px; 
	margin-bottom: 30px; 
	border-left: 5px solid #007bff;
}
.vision-box h3 { margin-top: 0; color: #007bff; }
.service-info ul { padding-left: 20px; }
.service-info li { margin-bottom: 15px; }

.cmodal{display:none;position:fixed;inset:0;z-index:99999}
.cmodal.is-open{display:block}
.cmodal__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
}
.cmodal__panel{
  position:relative;
  width:min(450px,calc(100% - 24px));
  height:min(650vh,650px);
  margin:6vh auto 0;
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.cmodal__close{
  position:absolute;top:10px;right:12px;z-index:3;
  width:40px;height:40px;border:0;
  border-radius:10px;font-size:24px;line-height:40px;cursor:pointer;
}
.cmodal__head{
  position:absolute;left:0;right:0;top:0;z-index:2;
  padding:14px 56px 10px 16px;
  background:var(--graybar);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.cmodal__title{font-weight:800;font-size:14px;color:#111}
.cmodal__url{font-size:12px;color:#666;margin-top:2px;word-break:break-all}
#commonModalFrame{
  width:100%;
  height:100%;
  padding-top:56px; /* 헤더 높이만큼 */
  box-sizing:border-box;
}
@media (max-width:640px){
  .cmodal__panel{width:calc(100% - 14px);height:90vh;margin:5vh auto 0;border-radius:14px;}
}

/* 모바일 대응 (선택사항) */
@media (max-width: 960px) {
	.about-container { width: 100%; padding: 20px; box-sizing: border-box; }
}
/* 햄버거 버튼 (기본 숨김) */
.menu-trigger { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1100; }
.menu-trigger span { display: block; width: 25px; height: 3px; background: #333; margin: 5px 0; transition: 0.3s; }

/* 모바일 슬라이드 메뉴 사이드바 */
.mobile-nav { position: fixed; top: 0; right: -220px; width: 220px; height: 100%; background: var(--graybar); z-index: 1200; 
box-shadow: -5px 0 15px rgba(0,0,0,0.1); transition: 0.3s ease; box-sizing: border-box; display: flex; flex-direction: column;}
.mobile-nav.is-active { right: 0; }
.mobile-nav__list { list-style: none; padding: 0; margin: 0; }
.mobile-nav__item { border-bottom: 1px solid #f5f5f5; background: #fff;}
.mobile-nav__link { padding: 10px 30px; display: block; color: #333; text-decoration: none; font-size: 16px; font-weight: 500; }
.mobile-nav__close { position: absolute; top: 20px; right: 20px; font-size: 30px; color: #999; cursor: pointer; line-height: 1; }

/* 배경 어둡게 (오버레이) */
.nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1150; display: none; }
.nav-overlay.is-active { display: block; }

@media (max-width: 768px) {
    .topbar__right { display: none; } /* PC 메뉴 숨김 */
    .menu-trigger { display: block; } /* 햄버거 활성화 */
	.topbar__logo img{
		height: 28px;
	}
	.topbar__inner{
		padding: 7px;
		width:100%;
	}
    .site-footer { border-top: none; }
    
    .site-footer__inner { 
        flex-direction: column; 
        padding: 0; /* 모바일 전폭 사용 */
        height: auto;
		gap:0;
    }

    /* 1. 상단 링크 영역 (회색 바탕) */
    .site-footer__links { 
        order: 1; 
        background-color: var(--graybar); /* 회색 바탕 */
        width: 100%;
        padding: 15px 0 5px 0;
        display: flex;
        justify-content: center;
        gap: 20px;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    .site-footer__links a { margin-left: 0; font-size: 13px; color: #666; }

    /* 2. 회사명 클릭 영역 (위아래 여백 및 회색 바탕) */
    .site-footer__copy { 
        order: 2; 
        width: 100%;
        padding: 0 0 10px 0; /* 위아래 간격 확보 */
        background-color: var(--graybar); /* 회색 바탕 */
        font-size: 14px;
        color: #444;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* 화살표 아이콘 추가 */
    .site-footer__copy::after { 
        content: ''; 
        display: inline-block;
        margin-left: 8px;
        width: 0; height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #999; /* 역삼각형 */
        transition: transform 0.3s;
    }
    /* ★ 화살표 가상 요소 추가 */
    .site-footer__copy::after { 
        content: ''; 
        display: inline-block;
        margin-left: 8px;
        width: 0; height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #666; /* 역삼각형 */
        transition: transform 0.3s ease; /* 회전 애니메이션 */
    }

    /* ★ 토글 활성화 시 화살표 회전 (is-active가 부모나 형제에 있을 때 제어) */
    .footer-toggle-active.site-footer__copy::after {
        transform: rotate(180deg);
    }

    /* 3. 펼쳐지는 회사 정보 영역 */
    .footer-company { 
        order: 3; 
        background: var(--graybar); /* 정보 내용은 다시 흰색으로 구분 */
        padding: 0 20px;
        border-top: none;
    }
    .footer-company__inner { 
        text-align: center; /* 모바일은 가운데 정렬 */
        font-size: 12px; 
    }
}

/* 메뉴 리스트는 스크롤 */
.mobile-nav__list{
  flex: 1;
  overflow-y: auto;
}

/* 🔥 하단 고정 영역 */
.mobile-nav__footer{
    padding: 7px;
    border-top: 1px solid #eee;
    background: #fafafa;
}

/* 회원탈퇴 버튼 */
.mobile-nav__withdraw{
    display: block;
    width: 100%;
    padding: 7px 0;
    text-align: center;
    color: #333;
    font-weight: 600;
    border: 1px solid #333;
    border-radius: 8px;
    text-decoration: none;
    background: #fff;
}

.mobile-nav__withdraw:active{
  background: rgba(255,57,0,0.08);
}