@charset "utf-8";

 :root {
	--primary-color: #ffd400;
	--text-dark: #303441;
	--text-gray: #72757c;
	--border-color: #e4e5ed;
}

.customer { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }

/* 헤더 */
.customer .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; }
.customer .header-text h1 { font-size: 28px; margin-bottom: 20px; line-height: 1.3; }
.customer .search-box { position: relative; max-width: 500px; }
.customer .search-box input { 
	width: 100%; padding: 15px 50px 15px 20px; 
	border: 1px solid var(--border-color); border-radius: 30px; font-size: 16px; outline: none;
}
.customer  .search-box i { position: absolute; right: 20px; top: 35%; transform: translateY(-50%); color: var(--text-gray); }

/* 카테고리 그리드 */
.customer  .category-grid { 
	display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
	gap: 15px; margin-bottom: 40px; 
}
.customer  .cat-item { 
	border: 1px solid var(--border-color); border-radius: 12px; padding: 30px 10px; 
	text-align: center; cursor: pointer; transition: 0.2s;
}
.customer  .cat-item:hover { background-color: #f9fafb; border-color: #ccc; }
.customer  .cat-item i { font-size: 32px; margin-bottom: 15px; display: block; }

/* 탭 스타일 */
.customer  .tabs { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 30px; }
.customer  .tab { 
	flex: 1; text-align: center; padding: 15px; cursor: pointer; 
	font-weight: bold; color: var(--text-gray); transition: 0.3s;
}
.customer  .tab.active {color:#fff; background: #17393c;}


/* 필터 버튼 컨테이너 (가로 스크롤 핵심) */
.customer .filter-tags {
    display: flex;             /* 가로 정렬 */
    flex-wrap: nowrap;         /* 줄바꿈 금지 (한 줄 유지) */
    overflow-x: auto;          /* 가로 내용이 넘치면 자동 스크롤 */
    -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 적용 */
    gap: 8px;
    padding-bottom: 10px;      /* 스크롤바와 버튼 사이 간격 */
    margin-bottom: 20px;
    
    /* 스크롤바 숨기기 (선택 사항 - 디자인에 따라 적용) */
    scrollbar-width: none;     /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}

/* Chrome, Safari용 스크롤바 숨기기 */
.customer .filter-tags::-webkit-scrollbar {
    display: none;
}

/* 필터 버튼 스타일 유지 */
.customer .filter-btn {
    flex: 0 0 auto;            /* 중요: 버튼이 너비에 맞춰 찌그러지지 않게 설정 */
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: white;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;       /* 버튼 안의 텍스트가 줄바꿈되지 않게 함 */
}

.customer  .filter-btn { 
	padding: 8px 18px; border-radius: 20px; border: 1px solid var(--border-color); 
	background: white; cursor: pointer; font-size: 14px; color: var(--text-gray);
}
.customer  .filter-btn.active { background: #303441; color: white; border-color: #303441; }

/* 리스트 */
.customer  .faq-list { list-style: none; border-top: 1px solid var(--border-color); }
.customer  .faq-item { 
	padding: 20px 0; border-bottom: 1px solid var(--border-color); 
	display: flex; align-items: center; cursor: pointer; transition: 0.2s;

	 /* 1. 줄바꿈 방지 */
    white-space: nowrap;    
    /* 2. 넘치는 영역 숨김 */
    overflow: hidden;    
    /* 3. 넘치는 부분에 말줄임표(...) 추가 */
    text-overflow: ellipsis;
    /* (중요) 블록 요소여야 너비가 인식됩니다 */
    display: block; 
    width: 100%;

}
.customer .faq-item:hover { padding-left: 5px; color: #0089ff; }
.customer .faq-item i { margin-right: 12px; color: #999; }


.customer .expert-center-section { margin-top: 40px; }
.customer .expert-center-section h2 { font-size: 27px; margin-bottom: 8px; }
.customer .expert-subtext { color: var(--text-gray); font-size: 18px; margin-bottom: 25px; }

.customer .expert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.customer .expert-card { 
	border-radius: 15px; overflow: hidden; 
	box-shadow: 0 4px 15px rgba(0,0,0,0.05); text-align: center;
	border: 1px solid var(--border-color); cursor: pointer; transition: 0.3s;
}
.customer .expert-card:hover { transform: translateY(-5px); }
.customer .expert-card-top { background-color: var(--expert-bg); padding: 20px 10px; display: flex; justify-content: center; align-items: center; }
.customer .expert-card-top i { font-size: 70px; color: #00acc1; }
.customer .expert-card-bottom { padding: 0 10px 20px 10px; background: #fff; font-weight: bold; font-size: 16px; }


/* [신규] 최하단 채용소식 & 공지사항 섹션 */
.customer .news-section { 
            display: grid; 
            grid-template-columns: 1fr 1fr; /* 1:1 비율로 변경 */
            gap: 40px; 
            border-top: 1px solid var(--border-color); 
            padding-top: 60px; 
        }
.customer .news-box h2 { font-size: 27px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.customer .more-text { font-size: 13px; color: #999; font-weight: normal; cursor: pointer; }
.customer .news-list { list-style: none; }
.customer .news-item { 
	padding: 12px 0; border-bottom: 1px solid #f4f4f4; display: flex; justify-content: space-between; font-size: 18px; color: var(--text-dark); cursor: pointer; 	
}
.customer .news-item:hover { color: #0089ff; }
.customer .status-badge { font-size: 12px; color: #999; margin-left: 10px; white-space: nowrap; }



@media (max-width: 768px) {
   .customer .header-img { display: none; }
   .customer .header-text h1 {font-size:24px;}
   .customer .category-grid { grid-template-columns: repeat(3, 1fr); }
   .customer .expert-grid { grid-template-columns: repeat(2, 1fr); }
  .customer .news-section { 
        grid-template-columns: 1fr; /* 한 줄 배치 */
    }
    
    .customer .news-box {
        min-width: 0; /* 자식이 부모 너비를 뚫고 나가지 못하게 방어 */
        width: 100%;
        overflow: hidden;
    }
  .customer .news-item {
        display: block; /* 중요: inline 요소는 말줄임이 안 됨 */
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 15px; /* 모바일 가독성 */
    }
}