/* ==========================================================================
	파일명: tablet.css
	설명: 화면 너비가 768px 이하일 때 적용되는 반응형 스타일입니다.
	      주로 태블릿 및 작은 화면을 가진 디바이스에서 레이아웃과
	      폰트 크기 등을 조정하여 사용자 경험을 향상시키기 위한 목적입니다.
========================================================================== */

/* 태블릿 및 작은 화면 대응 스타일 */
@media (max-width: 768px) {
	
	button {
		-webkit-appearance: none; /* iOS 기본 스타일 제거 */
		background: none;
		border: none;
		color: #000;
	}
   

/* ==========================
   Carousel (배너 영역)
   ========================== */
	.carousel .carousel-inner {
		width: 100%;
		height: 900px;
		background-image: url("../img/home_banner_003.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/* Carousel 텍스트 - 작은 글씨 */
	.carousel .carousel-inner .carousel-text .small {
		font-size: 20px;
		word-break: keep-all;
	}
	
	/* Carousel 텍스트 - 큰 글씨 */
	.carousel .carousel-inner .carousel-text .large {
		font-family: 'SamyangNeo-Regular';
		font-size: 40px;
	}
	
	.carousel-text .btn-hover {
		gap: 8px;
		padding: 15px 20px 15px 30px;
	
		background: #1A286D;
		border-radius: 999px;
		color: #FFFFFF;
		font-size: 15px;
	}
	
	
/* ==========================
   Product Overview (제품 개요)
   ========================== */
	.product-overview {
		padding: 80px 20px;
	}
	
	/* 제목 스타일 */
	.product-overview h1 {
		font-size: 1.6rem;
	}
	
	/* 설명 문단 스타일 */
	.product-overview p {
		font-size: 1.05rem;
	}
	
	/* 제품 섹션 앞 장식 (before element) */
	.product-overview::before {
		width: 300px;
		height: 300px;
	}
	
	
	/* ==========================
	   Feature Info Box (기능 정보 영역)
	   ========================== */
	.feature-infoBox {
		height: auto;
		padding: 20px 30px;
		display: flex;
		flex-direction: column;
		margin-top: 150px;
	}
	
	/* 반응형 정렬 - .col-sm-8 아래로 */
	.feature-infoBox .col-sm-8 {
		order: 2;
	}
	
	/* 반응형 정렬 - .col-sm-4 위로 */
	.feature-infoBox .col-sm-4 {
		order: 1;
	}
	
	/* 텍스트 중앙 정렬 */
	.feature-infoBox .feature-txt {
		text-align: center;
	}
	.feature-infoBox .feature-txt .feature-title {
		font-family: "SamyangNeo-Regular";
		font-size: 28px;
	}
	.feature-infoBox .feature-txt .feature-title-sub {
		font-family: "SamyangNeo-Regular";
		font-size: 14px;
	}
	
	/* 폼 정렬 */
	.feature-infoBox form {
		display: flex;
		justify-content: center;
		align-items: center;
	}
  
	#feature-container-page {
		padding: 20px;
	}
	#feature-container-page .feature {
		width: 100%;
	}
	
	#feature-container-page .feature > .page-feature-title {
		font-family: "SamyangNeo-Regular";
		font-size: 28px;
		margin-bottom: 0;
	}
	
	#feature-container-page .feature > .page-feature-title-sub {
		font-family: "SamyangNeo-Regular";
		font-size: 14px;
	}
	
	#feature-container-page .feature .page-feature-img {
		margin-top: 0 !important;
	}
	
	.contact-container {
		flex-direction: column;
		align-items: stretch;
	}

	.contact-card {
		width: 100%;
	}
	
	.page-top-box .page-top-visual > img {
		width: 110px;
		height: 110px;
	}
	.page-top-box .page-top-title > span {
		font-size: 2.2rem;
	}
	.page-top-box .page-top-title-sub > span {
		text-align: center;
	}
	
	.page-top-box.blog-post .page-top-title > span {
		font-size: 1.5rem;
	}
	.page-top-box.blog-post .page-top-title-sub > span {
		text-align: center;
		font-size: 17px;
	}
	.page-top-box.blog-post > p {
		
		font-size: 13px;
	}
	
	
	.additional-content .info-list li {
		font-size: 13px;
	}
	
	.additional-content .info-list li::before {
		line-height: 1.2;
	}
	
	
	.card-list-vertical {
		justify-content: flex-start;
		overflow: auto;               /* 스크롤 기능은 활성화 */
		scrollbar-width: none;       /* Firefox */
		-ms-overflow-style: none;    /* IE 10+ */
	}
	
	.card-list-vertical li strong {
		font-size: 1rem;
	}
	
	.card-list-vertical li {
		font-size: 1rem;
		width: 100%;
		max-width: 100%;
	}
	
	.issue-pageBox {
		padding: 10px;
	}
	
	.nav-tabs {
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	
		/* 양쪽 여백 추가 */
		padding: 0 16px;
	
		/* 스크롤바 숨김 처리 */
		scrollbar-width: none;       /* Firefox */
		-ms-overflow-style: none;    /* IE 10+ */
		display: block;
	}
	
	.nav-tabs::-webkit-scrollbar {
		display: none;               /* Chrome, Safari */
	}
	
	/* 탭 버튼 스타일 */
	.nav-tabs .nav-link {
		display: inline-block;
		white-space: nowrap;
		min-width: 120px;            /* 터치 영역 확보 (선택) */
		text-align: center;
	}
	
	.vertical-checkbox-group .form-check {
		display: block;
		margin-bottom: 8px; /* 원하는 간격 조정 */
	}
	
	.tab-menu-container {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE 10+ */
		gap: 8px;
		padding: 10px 16px;
	}
	
	.tab-menu-container::-webkit-scrollbar {
		display: none; /* Chrome, Safari */
	}
	
	.tab-menu-container .tab-menu-box {
		display: inline-block;
		white-space: nowrap;
		text-align: center;
	}
	
	.faq-list-box .accordion-item .accordion-header .accordion-button {
		font-size: 0.9rem;
		padding: 20px;
	}
	
	.faq-list-box .accordion-item .accordion-collapse .accordion-body {
		font-size: 0.8rem;
		padding: 10px 10px 10px 45px;
	}
	
	.my-md-3 {
		margin-top: 1rem !important;
        margin-bottom: 1rem !important;
	}
}