/* product-soksoktalk.css - SoksokTalk AI 챗봇 서비스 페이지 스타일 */

/* General product page styles (reuse from product-adra) */
.container section h3 span{color:#007af9}
.container section {padding: 100px 0 100px;}
.product-detail-section {padding:0 0 100px;}
.product-detail-section h1{font-size:2.5em;color:var(--primary-color);margin-bottom:20px;text-align:center;}
.product-detail-section h3{text-align: center;/*border-bottom:2px solid var(--primary-color);*/padding-bottom:1rem;margin-bottom:5rem;font-size:2.4rem;}
.product-detail-section p,.product-detail-section ul,.product-detail-section li{/*font-size:1.1em;line-height:1.8;*/color:var(--text-color);margin-bottom:1rem;}
.product-detail-section ul{list-style-type:none;padding-left:0;}
.product-detail-section li{margin-bottom:10px;}
.product-details-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:50px;}
@media (max-width:768px){.product-details-grid{grid-template-columns:1fr;}}
.feature-section .features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px;margin-bottom:50px;}
@media (max-width:1024px){.features-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:767px){.features-grid{grid-template-columns:1fr;}}
.application-grid{display:grid;grid-template-columns:repeat(2,1fr);}
@media (max-width: 768px) {.application-grid {grid-template-columns: 1fr;}}

.feature-card {
    background-size: cover;
    background-position: center;
    background-color:#e3f5ff;
    position:relative;
    overflow:hidden;
    color:#fff;
    /* text-shadow:0 0 5px rgba(0,0,0,0.8); */
    border-radius:8px;
    padding:25px;
    line-height: 1.3;
    text-align:left;
    box-shadow:0 4px 8px rgba(0,0,0,0.1);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.feature-card::before {
    content:'';
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    /* background-color:rgba(0,0,0,0.3); */
    z-index:1;
    transition:background-color 0.3s ease;
}
.dark-mode .feature-card::before {background-color:rgba(0,0,0,0.3);}

.feature-card h4 {text-align: center;margin-top: 2rem;color:#09090b;font-size: 1.8rem;}



.gradient-border-box {
    /* 박스 기본 스타일 */
    display: inline-block;
    font-weight: bold;
    margin: 2rem auto;
    width: 100%;
  
    /* 테두리를 위한 배경 설정 */
    border: 3px solid transparent;
    border-radius: 25px; /* 둥근 정도 조절 */
    /* 테두리 그라데이션 구현 */
    background-image: linear-gradient(#fff, #fff), 
                      linear-gradient(to right, #19b4e3, #ff7872);
    background-origin: border-box;
    background-clip: content-box, border-box;
    padding:0 !important;
    
    line-height: 2em; /* padding으로 박스 여백을 줄수 없어서 line-height로 여백을 설정 */
    
    /* 배경색 (이미지처럼 살짝 푸른빛이 도는 흰색 배경일 경우) */
    background-color: #f8fbff;

    /* 그림자 효과 (이미지의 입체감을 위해 추가) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}


/* dark mode */
body.dark-mode .feature-card h3, 
body.dark-mode .feature-card h4 
{color:#000;}
body.dark-mode .feature-card li, 
body.dark-mode .feature-card p 
{color:#000;}



/* Hero Section */
.soksoklive-hero-content {
    background-image: url('../images/bg/soksoktalk-live_1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 80px;
    margin-bottom: 0;
    border-radius: 0;
    color: #fff;
    /* text-shadow: 1px 1px 3px rgba(0,0,0,0.7); */
    position: relative;
    overflow: hidden;
}
@media (max-width: 768px) {
    .soksoklive-hero-content {
        padding: 100px 20px 60px;
    }
    .soksoklive-hero-content .container {
        grid-template-columns: repeat(1, 1fr);
        padding: 0;
    }
}

.soksoklive-hero-content::before {
    content: '';
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    /* background-color: rgba(0,0,0,0.6); */
    z-index:1;
    transition: background-color 0.3s ease;
}

.dark-mode .soksoklive-hero-content::before {
    background-color: rgba(0,0,0,0.35);
}

.soksoklive-hero-content .container {display: grid;grid-template-columns: repeat(2, 1fr);}
.soksoklive-hero-content h1,
.soksoklive-hero-content h2,
.soksoklive-hero-content p {
    position: relative;
    z-index:2;
    color:#fff;
    text-align:left;
    max-width:800px;
    margin:0 auto;
}

.soksoklive-hero-content h1 {font-size:3.2em;margin-bottom:0px;color:#007af9;line-height: 1.1;margin-bottom: .5em;margin-left: 2rem;}
.soksoklive-hero-content h2 {font-size:2.8em;margin-bottom:0px;color:#000002;line-height: 1.2;margin-left: 2rem;}
.soksoklive-hero-content p {font-size:1.4em;margin-bottom:0px;color:#555658;line-height: 1.2;margin-top: 1rem;margin-left: 2rem;}

@media (max-width: 768px) {
    .soksoklive-hero-content .container {margin-top: -9em;grid-template-columns: repeat(1, 1fr);}
    .soksoklive-hero-content h1 {margin-left: 0;}
    .soksoklive-hero-content h2 {margin-left: 0;}
    .soksoklive-hero-content p {margin-left: 0;}
}

@media (max-width: 344px) {
    .soksoklive-hero-content .container {margin-top: -9em;grid-template-columns: repeat(1, 1fr);}
    .soksoklive-hero-content h1 {font-size: 2.6em;text-align: center;margin-bottom: 1em;}
    .soksoklive-hero-content h2 {font-size: 2em;text-align: center;margin-bottom: 1em;}
    .soksoklive-hero-content p {font-size: 1.6em;text-align: center;}
}




/* Feature Cards */
.feature-section h3 {margin-top:50px;}
.feature-section .features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px;margin-bottom:50px;}
@media (max-width:768px){.feature-section .features-grid{grid-template-columns:1fr;}}

.feature-section .feature-card-1 {background: url("../images/soksoktalk-live/icon-24hr.webp");}
.feature-section .feature-card-2 {background: url("../images/soksoktalk-live/icon-cs.webp");}
.feature-section .feature-card-3 {background: url("../images/soksoktalk-live/icon-naver.webp");}
.feature-section .feature-card-4 {background: url("../images/soksoktalk-live/icon-sns.webp");}
.feature-section .feature-card {background-color: #e3f5ff;background-repeat: no-repeat;background-position: 9% center;padding-left: 41%;}
@media (max-width: 768px) {
    /* .feature-section .feature-card-1 {background: url(../images/soksoktalk-live/icon-24hr.webp) no-repeat center 25px;} */
    .feature-section .feature-card {padding: 170px 25px 25px;background-color: #e3f5ff;background-position: center 25px;}
}
.feature-section .feature-card h4,
.feature-section .feature-card p {
    position:relative;
    z-index:2;
    text-align: left;
}
.feature-section .feature-card h4 {color:#007af9 !important;font-size:1.6rem;margin-top:0}
.feature-section .feature-card p {color:#000;font-size:1.6rem}
@media (max-width: 768px) {
    .feature-section .feature-card h4,
    .feature-section .feature-card p {
        text-align:center;margin-bottom: .5em;
    }
}


/* Problem Section */
.problem-section .features-grid {display: grid; grid-template-columns: repeat(2, 1fr);gap: 20px;}
.problem-section .feature-card {justify-content: center; align-items: center;}
.problem-section .feature-card h4 {color:#11315d;}
.problem-section .feature-card img {max-width: 80%;width:100%;}
.problem-section .feature-card ul {margin-top: 1rem;margin-bottom: 0}
.problem-section .feature-card li {font-size:1.6rem;list-style-type: disc;}
/* body.dark-mode .problem-section .feature-card li {color:#000;} */
@media (max-width: 768px) {
    .problem-section .features-grid {grid-template-columns: repeat(1, 1fr);}
    .problem-section .feature-card h4 {font-size: 2rem;}
    .problem-section .feature-card img {max-width: 100%;}
    .problem-section .feature-card li {font-size: 1.2rem;}
}

/* evolution-section */
.evolution-section .features-grid {display: grid; grid-template-columns: repeat(3, 1fr);gap: 20px;}
.evolution-section .feature-card {justify-content: center; align-items: center;}
.evolution-section .feature-card:first-child { background-color: #e5e9ec; }
.evolution-section .feature-card:nth-child(3) { 
    background: linear-gradient(90deg, #19b4e3 0%, #ff7872 100%);
}
.evolution-section .feature-card img {max-width: 80%;width:133px;margin: 1rem;}
.evolution-section .feature-card ul {margin-top: 1rem;margin-bottom: 0}
.evolution-section .feature-card p {font-size:1.6rem;text-align:center;}
.evolution-section .gradient-border-box {margin: 4rem auto;}
body.dark-mode .evolution-section .gradient-border-box {background-image:linear-gradient(#333, #333), linear-gradient(to right, #19b4e3, #ff7872);}
@media (max-width: 768px) {
    .evolution-section .features-grid {grid-template-columns: repeat(1, 1fr);}
    .evolution-section .feature-card h4 {font-size: 2rem;}
    .evolution-section .feature-card img {max-width: 100%;}
    .evolution-section .feature-card li {font-size: 1.2rem;}
    .evolution-section .gradient-border-box {font-size: 1.2rem;}
}


/* value-section */
.value-section .features-grid {display: grid; grid-template-columns: repeat(3, 1fr);gap: 20px;}
.value-section .feature-card {justify-content: center; align-items: center;}
.value-section .feature-card img {max-width: 80%;width:133px;margin: 2rem;}
.value-section .feature-card ul {margin-top: 1rem;margin-bottom: 0}
.value-section .feature-card p {font-size:1.6rem;text-align:center;}
.value-section .gradient-border-box {
    margin: 4rem auto;
}
@media (max-width: 768px) {
    .value-section .features-grid {grid-template-columns: repeat(1, 1fr);}
    .value-section .feature-card h4 {font-size: 2rem;}
    .value-section .feature-card img {max-width: 100%;margin: 2.5rem 2rem;}
    .value-section .feature-card li {font-size: 1.2rem;}
    .value-section .feature-card p {font-size:2rem;}
}


/* realtime-ai-chatbot-section */
.realtime-ai-chatbot-section {background-color: #f5f8fd;padding: 1rem 0}
.realtime-ai-chatbot-section .container {
    background: url(../images/soksoktalk-live/diagram-ai-chat-screenshot.png) no-repeat 90% center;
    background-size: 32%;
    padding-bottom: 8rem;
}
@media (max-width:768px){.realtime-ai-chatbot-section .container{background: none;}}
.realtime-ai-chatbot-section h3 {margin-top:50px;color:#000;}
.realtime-ai-chatbot-section .features-2col{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media (max-width:768px){.realtime-ai-chatbot-section .features-2col{grid-template-columns:1fr;}}

.realtime-ai-chatbot-section .features-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:30px;margin-left:30px;margin-bottom:50px;}

.realtime-ai-chatbot-section .feature-card-1 {background: url("../images/soksoktalk-live/icon-ContextualUnderstanding.webp");}
.realtime-ai-chatbot-section .feature-card-2 {background: url("../images/soksoktalk-live/icon-Benefit.webp");}
.realtime-ai-chatbot-section .feature-card {
    /* padding-left: 41%; */
    background-color: #e3f5ff;background-repeat: no-repeat;background-position: 9% center;padding-left: 44%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 10rem;
}
@media (max-width: 420px) {
    .realtime-ai-chatbot-section .features-grid {margin-left:0;margin-top:0}
    .realtime-ai-chatbot-section .feature-card {padding: 170px 25px 25px;background-color: #e3f5ff;background-position: center 25px;height: auto;}
}
.realtime-ai-chatbot-section .feature-card h4,
.realtime-ai-chatbot-section .feature-card p {
    position:relative;
    z-index:2;
    text-align: left;
}
.realtime-ai-chatbot-section .feature-card h4 {color:#007af9;font-size:1.6rem;margin-top:0}
.realtime-ai-chatbot-section .feature-card p {color:#000;font-size:1.6rem}
.realtime-ai-chatbot-section .feature-card ul, 
.realtime-ai-chatbot-section .feature-card li {
    margin:0
} 
@media (max-width: 420px) {
    .realtime-ai-chatbot-section .feature-card h4,
    .realtime-ai-chatbot-section .feature-card li {
        text-align:center;margin-bottom: .5em;
    }
}

/* current-process-section */
.current-process-section h3 {
    margin-bottom: 0;
}
.current-process-section h4 {
    margin-bottom: 4rem;
    text-align: center;
    font-size: 1.6rem;
}
.current-process-section .feature-card {
    background: linear-gradient(90deg, #fafbfd 0%, #f0f2f7 100%);
    padding: 3rem;
} 
@media (max-width: 768px) {
    .current-process-section .feature-card {
        padding: 1rem;
    } 
}


/* Feature Cards */
.application-feature-section h3 {margin-top:50px;}
.application-feature-section .features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px;margin-bottom:50px;}
@media (max-width:768px){.application-feature-section .features-grid{grid-template-columns:1fr;}}

.application-feature-section .feature-card-1 {background: url("../images/soksoktalk-live/icon-naver.webp");}
.application-feature-section .feature-card-2 {background: url("../images/soksoktalk-live/icon-youtube.webp");}
.application-feature-section .feature-card-3 {background: url("../images/soksoktalk-live/icon-kakaoshoppinglive.webp");}
.application-feature-section .feature-card-4 {background: url("../images/soksoktalk-live/icon-TikTokSHop.webp");}
.application-feature-section .feature-card {background-color: #e3f5ff;background-repeat: no-repeat;background-position: 9% center;padding: 3em;padding-left: 41%;background-size: 100px;}

.application-feature-section .feature-card h4,
.application-feature-section .feature-card p {
    position:relative;
    z-index:2;
    text-align: center;
}
.application-feature-section .feature-card h4 {color:#007af9;font-size:1.6rem}
.application-feature-section .feature-card p {color:#000;font-size:1.6rem;margin-bottom: 0;}

@media (max-width: 420px) {
    .application-feature-section .features-grid {margin-left:0;margin-top:0}
    .application-feature-section .feature-card {padding: 140px 25px 25px;background-color: #e3f5ff;background-position: center 25px;height: auto;}
    .application-feature-section .feature-card h4{margin-top: 0;}
}




/* Video Section */
.video-section {padding:50px 0;margin-top:50px;}
.video-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.video-item {text-align:center;}
.video-item h4 {font-size:1.2em;color:var(--primary-color);margin-bottom:10px;}
.video-item iframe {width:100%;height:315px;}
@media (max-width:768px){.video-grid{grid-template-columns:1fr;}}

/* Brochure Section */
.brochure-section {padding:50px 0;margin-top:50px;}
.brochure-grid {display:grid;grid-template-columns:repeat(1,1fr);gap:20px;}
.brochure-item {text-align:center;background-color:var(--header-bg);border-radius:8px;padding:20px;box-shadow:0 4px 8px rgba(0,0,0,0.1);}
.brochure-item img {width:100%;height:auto;margin-bottom:10px;border-radius:4px;}
.brochure-item h4 {font-size:1.2em;color:var(--primary-color);margin-bottom:10px;}
.download-btn {display:inline-block;background-color:var(--primary-color);color:#fff;padding:10px 20px;border-radius:4px;text-decoration:none;transition:background-color 0.3s;}
.download-btn:hover{background-color:#003b8e;}
@media (max-width:1024px){.brochure-grid{grid-template-columns:repeat(1,1fr);}}
@media (max-width:768px){.brochure-grid{grid-template-columns:1fr;}}

/* Image Gallery */
.image-gallery-section {padding:50px 0;}
.gallery-container {position:relative;}
.gallery-wrapper {display:flex;overflow-x:auto;scroll-behavior:smooth;}
.gallery-item {flex:0 0 auto;margin-right:10px;}
.gallery-item img {max-width:100%;height:auto;border-radius:8px;}
.nav-arrow {position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:#fff;border:none;padding:10px;cursor:pointer;z-index:2;}
.nav-arrow.left{left:10px;}
.nav-arrow.right{right:10px;}
.category-filter {margin-bottom:20px;}
.category-button {background:var(--primary-color);color:#fff;padding:8px 12px;margin-right:5px;border:none;border-radius:4px;cursor:pointer;}
.category-button.active{background:#003b8e;}