@charset "utf-8";

/******************************
	데이터허브 상품관 전용 css
	2026.02.05
******************************/

/* api-products api상품관 */
* { margin: 0; padding: 0; box-sizing: border-box; word-break: keep-all;}
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
body{
    font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
    line-height: 1.6;
}

/* --------- 1. 기본 레이아웃 ------------ */
.api-products-wrap img, 
.api-products-wrap svg {max-width: 100%; display: block; }

.api-section-container {padding: 0 0 100px 0;}
.inner-wrap {width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px;}
.api-bg-gray { background-color: #f8f9fa; } /* 사용안함 */


/* ---섹션 타이틀 ver1 (기본) --- */
.section-title {font-size: 32px; font-weight: 800; margin-bottom: 30px; color: #1a2b4b; text-align: center;}

/* ---섹션 타이틀 ver2 (타이틀 + 버튼 영역)--- */
.section-title-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-title-wrap .section-title {font-size: 32px; font-weight: 800; color: #1a2b4b; margin-bottom: 0;}

/* 개발가이드 버튼*/
.btn-guide {display: inline-flex; align-items: center; justify-content: center; background: #4b5563; color: #ffffff; font-size: 14px;font-weight: 600; padding: 12px 20px;border-radius: 5px; transition: background 0.3s;}
.btn-guide:hover {background-color: #1a2b4b;}
.btn-guide::after {content: "\e93f"; margin-left: 5px; font-size: 14px; font-family: xeicon;}


/* --------- 2. 헤더 영역 ------------ */
.api-section-header {background:#F7F7F7; /*background: linear-gradient(135deg, #f4f6f9 0%, #eef2f7 100%);*/ padding: 50px 0; margin-bottom:80px; border-bottom: 1px solid #e1e1e1;}
.api-header-wrap {display: flex;justify-content: space-between; align-items: center; gap: 40px;}
.header-text { flex: 1; }
.header-text h1 {font-size: 38px;font-weight: 800; color: #1a2b4b; margin-bottom: 20px; letter-spacing: -1px;}
.header-text p {margin-top:20px; font-size: 18px; color: #555555; font-weight: 400;}
.header-icon-area {flex: 0 0 300px; max-height: 220px; display: flex; align-items: center; justify-content: center;}
.header-icon-area img{max-width: 100%;}

/* --------- 3. 제공 정보 테이블 ------------ */
.info-table-wrap {width: 100%; border-top: 2px solid #FF8C00; box-shadow: 0 5px 15px rgba(0,0,0,0.03);}
.info-table {width: 100%; border-collapse: collapse; table-layout: fixed;}
.info-table th { text-align: center; background-color: #FFF4E6; color: #1a2b4b; font-weight: 700; padding: 16px 22px; font-size: 16px; border-bottom: 1px solid #dce4ec;}
.info-table td {padding: 16px 22px; font-size: 15px; color: #555555;  background: #fff; border-bottom: 1px solid #eef2f6; text-align: center; vertical-align: middle; word-break: keep-all;}
.info-table td.text-left { text-align: left;}
.info-table td.text-point {color: #1a2b4b; font-weight: 600;}


/* --------- 4. 서비스 특장점 ------------ */
/* 기본은 2열 (2개 또는 4개 아이템에 최적 - 2x2 배열) */
.features-grid { display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr);}

/* 3개 아이템 클래스 */
.features-grid.cols-3 {grid-template-columns: repeat(3, 1fr);}

/* 4개 아이템을 한 줄에 다 넣고 싶을 때  */
.features-grid.cols-4 {grid-template-columns: repeat(4, 1fr);}

.feature-card {position: relative; height: 100%; background: #ffffff; border: 1px solid #ccc; border-radius: 12px; padding: 40px 35px; display: flex; flex-direction: column; align-items: flex-start; gap: 25px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.03); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
.feature-card:hover { border-color: #ff8c00; box-shadow: 0 15px 30px rgba(255, 140, 0, 0.15); transform: translateY(-5px);}
.feature-icon-wrap {position: relative; padding: 0 26px; display: flex; align-items: center; justify-content: center;
    background: #FF8C00;
    border-radius: 30px;
    color: #fff;
    z-index: 1;
    flex-shrink: 0; 
}
.feature-number {font-size: 22px; font-weight: 700; color:#fff; z-index: 0;}
.feature-text h3 {font-size: 24px; font-weight: 700; margin-bottom: 12px; color: #1a2b4b;}
.feature-text p { font-size: 17px; color: #444; line-height: 1.5;}


/* --------- 5. 지원 플랫폼 ------------ */
.platform-list {display: flex;justify-content: center; gap: 15px; flex-wrap: wrap; padding: 40px; background: #ffffff; border-radius: 20px; border: 1px solid #ccc; box-shadow: 0 5px 15px rgba(0,0,0,0.03);}
.platform-item {display: flex; align-items: center; gap: 10px; padding: 12px 24px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 50px; font-size: 16px; font-weight: 600; color: #495057; }
.platform-icon {display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;}

.icon-platform01 {background: url(../api/api01_icon_platform01.svg) 0 0 no-repeat;}
.icon-platform02 {background: url(../api/api01_icon_platform02.svg) 0 0 no-repeat;}
.icon-platform03 {background: url(../api/api01_icon_platform03.svg) 0 0 no-repeat;}
.icon-platform04 {background: url(../api/api01_icon_platform04.svg) 0 0 no-repeat;}
.icon-platform05 {background: url(../api/api01_icon_platform05.svg) 0 0 no-repeat;}


/* --------- 6. 연관 API (FlexBox 적용 - 개수 유동적) ------------ */
.card-container {display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;}
.api-card-wrapper{flex: 1; }
.api-card {display: flex; flex-direction: column; align-items: center; height: 100%; background: #fff; border: 1px solid #ccc; border-radius: 12px; padding: 30px 30px; text-align: center; transition: all 0.3s ease; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.03);}
.api-card:hover { border-color: #ff8c00; box-shadow: 0 15px 35px rgba(255, 140, 0, 0.15); transform: translateY(-7px);}
.api-icon-circle {width: 80px; height: 80px; margin-bottom: 20px; background: #fff4e6;color: #ff8c00;border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s;}
.api-card:hover .api-icon-circle { background-color: #ff8c00; color: #ffffff;}
.api-icon-circle svg.api-icon {width: 36px; height: 36px; fill: currentColor;}
.api-icon-circle svg.api-icon path { fill: currentColor;}
.api-card h3 {font-size: 20px; font-weight: 700; margin-bottom: 12px; color: #1a2b4b;}
.api-card p {font-size: 16px; color: #555; line-height: 1.4; padding: 0 10px;}


/*--------- 7. 하단 문의하기 ---------*/
.api-banner-section {position: relative; background-color: #FFECCF; padding: 75px 0; overflow: hidden; }
.banner-inner-wrap {position: relative; display: inline-block; text-align: center; left: 50%; transform: translateX(-50%);}
.banner-img {position: absolute; top: -30%; right: 100%; transform: translateY(-50%); margin-right: 40px; width: 206px; height: 187px;
    background-image: url('../api/api_footer_visual_img.png'); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.banner-title {font-size: 26px; font-weight: 700; color: #1A2B4B; line-height: 1.4; white-space: nowrap;}
.banner-btn {display: inline-block; margin-top:25px; padding: 18px 60px; background-color: #ff8c00; color: #ffffff; font-size: 18px; font-weight: 700; border-radius: 8px; text-decoration: none;transition: all 0.3s; box-shadow: 0 10px 20px rgba(255, 140, 0, 0.2);}
.banner-btn:hover {background-color: #e07b00; transform: translateY(-3px); box-shadow: 0 15px 25px rgba(255, 140, 0, 0.3);}


/* 줄바꿈 처리 */
.pc-br{display:block;}
.m-br{display:none;}


/* ----------------------------------------------------
    반응형
---------------------------------------------------- */
@media (max-width: 992px) {
    .features-grid { gap: 20px; }

    .features-grid.cols-3,
    .features-grid.cols-4 {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 800px) {
    .api-section-container { padding: 0 0 60px 0; }
    .section-title {font-size: 24px; margin-bottom:20px;}
    .section-title-wrap .section-title {font-size: 24px;}
            
    .api-header-wrap { flex-direction: column-reverse; text-align: center; gap: 30px; }
    .header-text h1 { font-size: 32px; }
    .header-text p { font-size: 16px; }
    .header-icon-area { width: 100%; height: 200px; flex: auto; }
    .header-icon-area img{max-height: 200px;}

    .btn-guide{padding:10px 14px;}
            
    /* 테이블 */
    .info-table-wrap {border-top:0;}
    .info-table thead { display: none; }
    .info-table, .info-table tbody, .info-table tr, .info-table td { display: block; width: 100%; }
    .info-table tr { margin-bottom: 20px; border-top: 2px solid #FF8C00 !important; border: 1px solid #e9ecef; /*border-radius: 16px;*/ overflow: hidden; box-shadow: 0 5px 10px rgba(0,0,0,0.03); }
    .info-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid #f1f3f5; }
    .info-table td:last-child { border-bottom: none; }
    .info-table td::before {content: attr(data-label); display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: #ff8c00; }

    /*--- 4. 서비스 특장점 --- */
    .features-grid,
    .features-grid.cols-3,
    .features-grid.cols-4 {grid-template-columns: 1fr;}
    .feature-card { padding: 26px 24px; align-items: center; text-align: center; }

    .feature-number {font-size: 20px; }
    .feature-text h3 {font-size: 20px; margin-bottom: 8px; }
    .feature-text p { font-size: 15px;}

    /* --- 5. 지원플랫폼 ---*/   
    .platform-list { padding: 25px; }

    /*--- 6. 연관 API ---*/
    .card-container{flex-direction: column;}
    .api-card { max-width: 100%;}
    .api-card h3 {margin-bottom: 8px;}
    .api-card p {font-size: 15px;}        

    /*---7. 하단 문의하기---*/
    .api-banner-section {padding: 25px 0 70px;}
    .banner-inner-wrap {display: flex; flex-direction: column; align-items: center; width: 100%; left: auto; transform: none;}
    .banner-img {position: static; transform: none; margin:0 0 5px 0; width: 160px; height: 145px; }
    .banner-sub { font-size: 16px; white-space: normal; }
    .banner-title { font-size: 22px; white-space: normal; word-break: keep-all; }           
    .banner-btn {width: 100%; max-width: 300px; padding: 16px 0;}
}

@media (max-width: 640px) {
    .pc-br{display:none;}
    .m-br{display:block;}
}