@charset "UTF-8";

/* =========================================
   1. 가치 제안 섹션 (Value Section)
   ========================================= */
.value-section {
    background-color: #000;
    color: #fff;
}

.visual-section {
    width: 100%;
    background-color: #000; /* 전체 배경 검정 */
    position: relative;
    overflow: hidden; /* 롤링 이미지가 삐져나가지 않게 */
}


.mainVisualSub {
    background: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0.95)), 
                url(../../images/mainVisualBG.jpg) no-repeat center center;
    background-size: cover;
    padding: 110px 0;
    text-align: center;
}

.mainVisualSub h4 {
    font-size: 20px;
    font-weight: 500;
    color: #FF5F00;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.mainVisualSub h3 {
    font-size: 42px;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    word-break: keep-all;
    margin-bottom: 50px;
}

.mainVisualSub h3 strong {
    color: #FF5F00;
    font-weight: 800;
}

.value-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 auto;
    max-width: 900px;
    padding: 0;
    list-style: none;
}

.value-list li {
    font-size: 16px;
    font-weight: 500;
    color: #ddd;
    background: rgba(255, 255, 255, 0.08);
    padding: 12px 24px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    cursor: default;
    letter-spacing: -0.5px;
}

.value-list li:hover {
    background: #FF5F00;
    color: #fff;
    border-color: #FF5F00;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 95, 0, 0.3);
}

.mainVisualSub h5 {
    font-size: 16px;
    color: #6B7684;
    font-weight: 300;
    margin-top: 50px;
    font-style: italic;
    opacity: 0.7;
}

.mainVisualSub2 {
    background:url(../images/mainVisualBG2.jpg) no-repeat center center;
    background-size: cover;
    padding: 120px 0;
    border-top: 1px solid #222;
}

.mainVisualSub2 .flexcontainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.mainVisualSub2 h3 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 12px;
    color: #fff;
}

.btn-match {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #FF5F00;
    color: #fff;
    padding: 16px 40px;
    border-radius: 50px;
    font-size: 20px;
    font-weight: 600;
    transition: 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-match:hover {
    background-color: #fff;
    color: #FF5F00;
    transform: scale(1.05);
}

/* =========================================
   2. 페인 포인트 섹션 (Frustration Section)
   ========================================= */
.frustration-section {
    background-color: #191F28;
    padding: 100px 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h3 {
    color: #FFF;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 20px;
}

.section-header .point-color {
    color: #FF6600;
    font-weight: 800;
}

.section-header h4 {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    font-weight: 400;
}

.q-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 60px;
}

.q-card {
    background: #30363F;
    border-radius: 12px;
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    transition: transform 0.3s ease, border-color 0.3s ease;
    min-height: 140px;
    position: relative;
}

.q-card:hover {
    transform: translateY(-5px);
    border-color: #FF6600;
}

.q-card p {
    color: #eee;
    font-size: 16px;
    line-height: 1.5;
    word-break: keep-all;
    position: relative;
    z-index: 2;
}

.quote-mark {
    font-family: serif;
    font-size: 40px;
    color: rgba(255, 102, 0, 0.3);
    line-height: 1;
    position: absolute;
}

.quote-mark:not(.end) { top: 10px; left: 15px; }
.quote-mark.end { bottom: -10px; right: 15px; transform: rotate(180deg); }

.btn-container { text-align: center; margin-top: 40px; }

.btn-meeting {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 50px;
    background-color: transparent;
    border: 2px solid #FF6600;
    color: #FF6600;
    font-size: 20px;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-meeting:hover {
    background-color: #FF6600;
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.4);
    transform: scale(1.05);
}

/* =========================================
   3. AI 티저 섹션 (AI Teaser Section)
   ========================================= */
.ai-teaser-section {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    padding: 120px 0;
    color: #fff;
    overflow: hidden;
    position: relative;
}

.ai-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 1;
}

.ai-teaser-section .text-area { flex: 1; }

.badge-ai {
    display: inline-block;
    background: rgba(255, 95, 0, 0.2);
    color: #FF5F00;
    border: 1px solid #FF5F00;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
}

.synergy-text {
    font-size: 20px;
    color: #aaa;
    font-weight: 400;
    margin-bottom: 15px;
    line-height: 1.5;
    letter-spacing: -0.5px;
}
.synergy-text b { color: #FF5F00; font-weight: 700; }

.ai-teaser-section h3 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 25px;
    margin-top: 0;
}

.ai-teaser-section h3 strong {
    color: #fff;
    background: linear-gradient(90deg, #FF5F00, #FF9068);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ai-teaser-section p {
    font-size: 18px;
    color: #ccc;
    line-height: 1.7;
    margin-bottom: 40px;
}
.ai-teaser-section p strong { color: #fff; font-weight: 600; }

.feature-list {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    padding: 0;
    list-style: none;
}
.feature-list li { display: flex; align-items: flex-start; gap: 12px; }
.feature-list i { font-size: 24px; color: #FF5F00; margin-top: 2px; }
.feature-list span { font-size: 15px; color: #aaa; line-height: 1.4; }
.feature-list span strong { display: block; color: #fff; font-size: 16px; margin-bottom: 4px; }

.btn-ai-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FF5F00;
    color: #fff;
    padding: 16px 36px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 5px 20px rgba(255, 95, 0, 0.3);
}
.btn-ai-more:hover { background: #fff; color: #FF5F00; transform: translateY(-3px); }

/* AI 비주얼 영역 */
.ai-teaser-section .visual-area { flex: 1; position: relative; max-width: 600px; }

.video-frame {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 9;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    background: #000;
}
.video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; 
    pointer-events: none; /* 마우스 이벤트(클릭, 호버) 비활성화 */
}

.floating-badge {
    position: absolute;
    bottom: -20px; right: -20px;
    background: #fff;
    color: #000;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    text-align: center;
    animation: float 3s ease-in-out infinite;
    z-index: 2;
}
.floating-badge span { display: block; font-size: 13px; color: #666; margin-bottom: 3px; }
.floating-badge strong { font-size: 20px; color: #FF5F00; font-weight: 800; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* AI 숏폼 프리뷰 영역 */
.ai-shorts-preview {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.shorts-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    color: #FF5F00;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.shorts-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 25px;
}

.short-item {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16; /* 세로 비율 고정 */
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.short-item:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: #FF5F00;
    box-shadow: 0 20px 40px rgba(255, 95, 0, 0.25);
    z-index: 10;
}

.short-item iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: none; object-fit: cover;
    pointer-events: none; /* 마우스 이벤트(클릭, 호버) 비활성화 */

}

/* =========================================
   4. 레퍼런스 섹션 (Reference Section)
   ========================================= */
.reference-section {
    background-color: #191F28;
    padding: 100px 0;
    overflow: hidden;
}

.ref-header { text-align: center; margin-bottom: 40px; }
.ref-header h3 { color: #FF5F00; font-size: 32px; font-weight: 700; margin-bottom: 10px; }
.ref-header p { color: #ccc; font-size: 16px; font-weight: 300; }

.filter-nav-wrapper { display: flex; justify-content: center; margin-bottom: 50px; }
.filter-nav {
    display: flex; gap: 15px; overflow-x: auto; padding: 10px 20px;
    -ms-overflow-style: none; scrollbar-width: none;
}
.filter-nav::-webkit-scrollbar { display: none; }

.filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: flex; align-items: center; gap: 8px;
}
.filter-btn:hover { background: rgba(255, 95, 0, 0.1); color: #fff; border-color: #FF5F00; }
.filter-btn.active {
    background: #FF5F00; color: #fff; border-color: #FF5F00;
    box-shadow: 0 5px 15px rgba(255, 95, 0, 0.3); font-weight: 700;
}

.ref-panel { display: none; width: 100%; animation: fadeIn 0.6s ease; }
.ref-panel.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 25px; padding: 0 5px;
}
.panel-top h4 { color: #fff; font-size: 24px; font-weight: 600; }
.view-more { color: #FF5F00; font-size: 15px; text-decoration: none; transition: 0.3s; display: flex; align-items: center; gap: 5px; }
.view-more:hover { color: #fff; }

.ref-card {
    background: #2b313a; border-radius: 16px; overflow: hidden;
    border: 1px solid #3a414b; transition: transform 0.3s ease, border-color 0.3s ease;
}
.ref-card:hover { transform: translateY(-8px); border-color: #FF5F00; }

.thumb-area { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.thumb-area img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.ref-card:hover .thumb-area img { transform: scale(1.05); }

.overlay-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 45px; color: rgba(255,255,255,0.9); pointer-events: none; opacity: 0.8; transition: 0.3s;
}
.ref-card:hover .overlay-icon { opacity: 1; color: #FF5F00; }

.info-area { padding: 18px; display: flex; gap: 12px; align-items: flex-start; }
.profile-img { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.1); }
.profile-img img { width: 100%; height: 100%; object-fit: cover; }
.text-info { flex: 1; overflow: hidden; }

.channel-title {
    color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stats { display: flex; gap: 12px; font-size: 13px; color: #999; }
.stats span { display: flex; align-items: center; gap: 4px; }
.stats i { color: #FF5F00; }

.insta-card .thumb-area { aspect-ratio: 1 / 1.1; }
.blog-card .blog-header {
    background: #333; padding: 12px 15px; display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.blog-card .blog-header img { width: 18px; height: auto; }
.blog-card .blog-header p {
    color: #fff; font-size: 14px; font-weight: 500; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.blog-card .thumb-area { aspect-ratio: 16 / 10; }

.reference-section .swiper-pagination-bullet { background: #fff; opacity: 0.3; }
.reference-section .swiper-pagination-bullet-active { background: #FF5F00; opacity: 1; width: 20px; border-radius: 10px; transition: width 0.3s; }
.reference-section .swiper { padding-bottom: 40px; }

/* =========================================
   5. 인플루언서 리스트 섹션 (ArYoutuber)
   ========================================= */
.arYoutuber {
    background: #191F28;
    padding: 120px 0;
    color: #fff;
}

.arYoutuber .section-title { text-align: center; margin-bottom: 60px; }
.arYoutuber h3 { font-size: 36px; font-weight: 700; margin-bottom: 15px; }
.arYoutuber h3 strong { color: #FF6600; }
.arYoutuber h4 { color: rgba(255, 255, 255, 0.6); font-size: 18px; font-weight: 400; }

.creator-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 80px;
}

.creator-card {
    background: #212832;
    border-radius: 16px;
    padding: 24px 15px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.05);
}

.creator-card:hover {
    transform: translateY(-10px);
    background: #2b3441;
    border-color: #FF6600;
}

.profile-circle {
    width: 90px; height: 90px; margin: 0 auto 15px; border-radius: 50%; overflow: hidden;
    border: 2px solid #303843; transition: 0.3s;
}
.creator-card:hover .profile-circle { border-color: #FF6600; }
.profile-circle img { width: 100%; height: 100%; object-fit: cover; }

.creator-card .name {
    font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sub-count {
    display: inline-block; font-size: 12px; color: #FF6600;
    background: rgba(255, 102, 0, 0.1); padding: 4px 10px; border-radius: 30px; font-weight: 500;
}

.regist-btn-wrap { text-align: center; border-top: 1px solid #2b3441; padding-top: 50px; }
.regist-btn-wrap p { color: rgba(255,255,255,0.5); margin-bottom: 25px; font-size: 16px; }
.main-regist-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(98deg, #FF4D00 1.85%, #FF9D00 109.3%);
    color: #fff; padding: 16px 40px; border-radius: 50px;
    font-size: 18px; font-weight: 600; transition: 0.3s;
}
.main-regist-btn:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(255, 77, 0, 0.3); }

/* =========================================
   6. 뉴스 섹션 (News Section)
   ========================================= */
.news {
    background: #0D0D0D;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.news-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 20px;
}
.news h3 { color: #FFF; font-size: 32px; font-weight: 700; }
.articleView { color: #aaa; font-size: 14px; font-weight: 500; text-decoration: none; transition: 0.3s; }
.articleView:hover { color: #FF6600; }

.news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }

.news-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px; padding: 25px;
    display: flex; flex-direction: column; height: 420px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative; overflow: hidden;
}
.news-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

.card-visual {
    width: 60px; height: 60px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px; font-size: 28px; color: #fff;
}
.grad-1 { background: linear-gradient(135deg, #FF5F00, #FF9068); box-shadow: 0 5px 15px rgba(255, 95, 0, 0.3); }
.grad-2 { background: linear-gradient(135deg, #8E2DE2, #4A00E0); box-shadow: 0 5px 15px rgba(138, 45, 226, 0.3); }
.grad-3 { background: linear-gradient(135deg, #00B4DB, #0083B0); box-shadow: 0 5px 15px rgba(0, 180, 219, 0.3); }
.grad-4 { background: linear-gradient(135deg, #11998e, #38ef7d); box-shadow: 0 5px 15px rgba(56, 239, 125, 0.3); }

.card-body { flex: 1; }
.card-title {
    color: #fff; font-size: 20px; font-weight: 700; line-height: 1.4; margin-bottom: 15px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-text {
    color: #aaa; font-size: 15px; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.card-footer {
    margin-top: 20px; display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid rgba(255,255,255,0.05); padding-top: 20px;
}
.date { font-size: 13px; color: #666; font-family: monospace; }
.btn-go {
    width: 40px; height: 40px; border-radius: 50%; background: #333;
    display: flex; align-items: center; justify-content: center; color: #fff; transition: 0.3s;
}
.news-card:hover .btn-go { background: #FF5F00; transform: rotate(-45deg); }


/* =========================================
   7. 롤링 애니메이션 (Common)
   ========================================= */
.roller, .roller2, .roller3 { display: flex; margin-bottom: 20px; width: 100%; }
.rolling_list, .rolling_list2, .rolling_list3 { display: flex; flex-wrap: nowrap; }

.item {
    width: 500px; height: 280px; margin-right: 20px;
    flex-shrink: 0; border-radius: 15px; overflow: hidden;
    background: #111; border: 1px solid #222; transition: all 0.4s ease;
}
.item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); transition: 0.4s; }
.item:hover { transform: scale(1.03); border-color: #FF5F00; z-index: 10; }
.item:hover img { filter: brightness(1.1); }

@keyframes rollingLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
@keyframes rollingRight {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

.roller .rolling_list { animation: rollingLeft 50s linear infinite; }
.roller3 .rolling_list3 { animation: rollingRight 20s linear infinite; }
.roller2 .rolling_list2 { animation: rollingLeft 40s linear infinite; }
.wrap:hover .rolling_list, .wrap:hover .rolling_list2, .wrap:hover .rolling_list3 { animation-play-state: paused; }


/* =========================================
   반응형 통합 (Media Queries)
   ========================================= */
@media screen and (max-width: 1200px) {
    .ai-shorts-preview { max-width: 900px; padding: 60px 20px 0; }
}

@media screen and (max-width: 1024px) {
    .mainVisualSub { padding: 80px 0; }
    .mainVisualSub h3 { font-size: 30px; }
    .value-list li { font-size: 14px; padding: 10px 18px; }
    .mainVisualSub2 .flexcontainer { flex-direction: column; gap: 30px; text-align: center; }
    
    .creator-grid { grid-template-columns: repeat(4, 1fr); }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .news .inner { padding: 0 20px; }
    
    .ai-content-wrapper { flex-direction: column; text-align: center; gap: 40px; }
    .feature-list { flex-direction: column; align-items: center; gap: 20px; }
    .floating-badge { right: 0; left: 0; margin: 0 auto; width: fit-content; bottom: -30px; }
    
    .shorts-grid { grid-template-columns: repeat(2, 1fr); max-width: 600px; margin: 0 auto; gap: 20px; }
    .item { width: 280px; height: 160px; margin-right: 10px; }
}

@media screen and (max-width: 768px) {
    .q-grid { grid-template-columns: 1fr; }
    .q-card { min-height: auto; padding: 20px; }
    .btn-meeting { width: 100%; padding: 16px 0; }
    
    .filter-nav { justify-content: flex-start; }
    .creator-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: 1fr; }
    .news-card { height: auto; }
    
    .ai-shorts-preview { margin-top: 40px; padding-top: 40px; }
    .shorts-grid { gap: 15px; padding: 0 10px; }
    .shorts-header { font-size: 16px; margin-bottom: 25px; }
    
    .synergy-text { font-size: 16px; }
    .mobile-br { display: block; }
}

@media screen and (min-width: 769px) {
    .mobile-br { display: none; }
}





/* 섹션 전체 배경 */
.help-section {
    background-color: #111; /* 다크 그레이/블랙 */
    padding: 100px 0;
    color: #fff;
}

.help-title {
    margin-bottom: 50px;
    padding-left: 20px;
    border-left: 5px solid #FF5F00;
}

.help-title h2 {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.help-title p {
    font-size: 16px;
    color: #888;
}

/* Flex 컨테이너 */
.help-container {
    display: flex;
    gap: 40px;
    align-items: stretch; /* 높이 맞춤 */
    min-height: 600px;
}

/* --- [LEFT] 네비게이션 스타일 --- */
.help-nav {
    flex: 0 0 350px; /* 왼쪽 너비 고정 */
}

.help-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #1a1a1a;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid #333;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    margin-bottom: 5px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #aaa;
}

.nav-item:last-child { margin-bottom: 0; }

.nav-item .icon-wrap {
    width: 36px;
    height: 36px;
    background: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 16px;
    transition: 0.2s;
}

.nav-item span {
    flex: 1;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
}

.nav-item .arrow {
    font-size: 14px;
    opacity: 0;
    transition: 0.2s;
}

/* Hover 및 Active 상태 */
.nav-item:hover, .nav-item.active {
    background: #FF5F00;
    color: #fff;
    box-shadow: 0 5px 15px rgba(255, 95, 0, 0.3);
}

.nav-item:hover .icon-wrap, .nav-item.active .icon-wrap {
    background: #fff;
    color: #FF5F00;
}

.nav-item:hover .arrow, .nav-item.active .arrow {
    opacity: 1;
    transform: translateX(5px);
}

/* --- [RIGHT] 콘텐츠 스타일 --- */
.help-content {
    flex: 1; /* 나머지 공간 채움 */
    position: relative;
    background: #1a1a1a; /* 콘텐츠 박스 배경 */
    border-radius: 20px;
    border: 1px solid #333;
    overflow: hidden;
}

.content-panel {
    display: none;
    height: 100%;
    padding: 60px;
    position: relative;
    z-index: 1;
}

.content-panel.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: fadeIn 0.4s ease-out;
}

/* 배경 워터마크 아이콘 효과 */
.bg-icon {
    position: absolute;
    bottom: -50px;
    right: -50px;
    font-size: 300px;
    color: #fff;
    opacity: 0.03; /* 아주 희미하게 */
    z-index: -1;
    pointer-events: none;
}

/* 상단 포인트 아이콘 */
.top-icon {
    font-size: 40px;
    color: #FF5F00;
    margin-bottom: 20px;
}

/* 제목 */
.content-panel h3 {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 25px;
    line-height: 1.4;
}

/* 태그 (뱃지 스타일) */
.tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}

.tags-wrap .badge {
    font-size: 14px;
    color: #ccc;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 설명 본문 */
.description {
    font-size: 18px;
    color: #ddd;
    line-height: 1.8;
    font-weight: 300;
    border-top: 1px solid #333;
    padding-top: 30px;
}

/* 애니메이션 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 반응형 (모바일) */
@media screen and (max-width: 1024px) {
    .help-container { flex-direction: column; }
    .help-nav { width: 100%; flex: none; }
    .content-panel { padding: 40px 20px; min-height: 400px; }
    .bg-icon { font-size: 200px; }
    .help-content { min-height: 400px; }
}




/* =========================================
   8. 전략 파트너 섹션 (Strategy Section)
   ========================================= */
   .strategy-section {
    background-color: #0D0D0D; /* news 섹션과 동일한 딥 블랙 */
    padding: 120px 0;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.strategy-section .inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0px;
}

/* 헤더 영역 */
.strategy-header {
    text-align: center;
    margin-bottom: 80px;
}

.strategy-header .label {
    display: inline-block;
    color: #FF5F00;
    background: rgba(255, 95, 0, 0.1);
    /* border: 1px solid rgba(255, 95, 0, 0.3); */
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.strategy-header h2 {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 30px;
}

.strategy-header h2 strong {
    color: #FF5F00;
    position: relative;
}

.strategy-header p {
    font-size: 19px;
    color: #999;
    line-height: 1.7;
    max-width: 850px;
    margin: 0 auto;
    word-break: keep-all;
}

.strategy-header p strong {
    color: #fff;
    font-weight: 600;
}

/* 그리드 레이아웃 */
.strategy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

/* 개별 카드 */
.strategy-card {
    background: #191F28; /* frustration 섹션 배경색과 통일 */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 50px 35px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.strategy-card:hover {
    transform: translateY(-12px);
    border-color: #FF5F00;
    background: #212832;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* 아이콘 박스 */
.strategy-card .icon-box {
    width: 70px;
    height: 70px;
    background: #30363F;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 35px;
    transition: 0.3s;
}

.strategy-card:hover .icon-box {
    background: #FF5F00;
    transform: scale(1.1) rotate(-5deg);
}

.strategy-card .icon-box i {
    font-size: 32px;
    color: #FF5F00;
    transition: 0.3s;
}

.strategy-card:hover .icon-box i {
    color: #fff;
}

/* 텍스트 정보 */
.strategy-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.strategy-card .sub-title {
    display: block;
    font-size: 15px;
    color: #FF5F00;
    font-weight: 600;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.strategy-card .desc {
    font-size: 16px;
    color: #aaa;
    line-height: 1.7;
    word-break: keep-all;
}

.strategy-card .desc strong {
    color: #fff;
}

/* CTA 박스 (하단 안내) */
.strategy-cta {
    background: linear-gradient(90deg, #1A1A1A 0%, #252525 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 45px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.cta-text .main-msg {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.cta-text .sub-msg {
    font-size: 17px;
    color: #888;
    margin: 0;
}

.strategy-cta .btn-proposal {
    background: #FF5F00;
    color: #fff;
    padding: 18px 45px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(255, 95, 0, 0.3);
}

.strategy-cta .btn-proposal:hover {
    background: #fff;
    color: #FF5F00;
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(255, 95, 0, 0.5);
}

/* --- 반응형 (Responsive) --- */
@media screen and (max-width: 1024px) {
    .strategy-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .strategy-header h2 { font-size: 32px; }
    .strategy-cta { flex-direction: column; text-align: center; gap: 30px; padding: 40px 30px; }
}

@media screen and (max-width: 768px) {
    .strategy-grid { grid-template-columns: 1fr; }
    .strategy-header h2 { font-size: 28px; }
    .strategy-header p { font-size: 16px; }
    .strategy-card { padding: 40px 25px; }
    .cta-text .main-msg { font-size: 20px; }
    .strategy-cta .btn-proposal { width: 100%; justify-content: center; }
}






/* =========================================
   [Section] Help Grid (4대 비즈니스 엔진)
   12개 서비스를 4개 그룹으로 통합 관리
   ========================================= */
.help-grid-section {
    padding: 160px 0;
    background-color: #000; /* 메인 톤앤매너 블랙 */
    color: #fff;
}

.help-grid-section .inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 헤더 영역 */
.help-title {
    text-align: center;
    margin-bottom: 80px;
}

.help-title small {
    color: #FF5F00; /* 기존 ai_main.css 오렌지 레드 */
    letter-spacing: 4px;
    font-weight: 800;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.help-title h2 {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -1.5px;
}

.help-title h2 strong {
    color: #FF5F00;
}

/* 그리드 레이아웃 */
.help-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4열 배치 */
    gap: 25px;
}

/* 서비스 카드 공통 스타일 */
.help-card {
    position: relative;
    height: 480px; /* 카드 높이 고정 */
    perspective: 1000px; /* 3D 효과를 위한 원근법 */
}

/* 카드 내부 컨테이너 (앞/뒤 전환용) */
.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 50px 35px;
    border-radius: 24px;
    backface-visibility: hidden; /* 뒷면 숨김 */
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

/* 카드 앞면 */
.card-front {
    background: #111; /* ai_main.css 카드 배경색 */
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 2;
}

.group-icon {
    width: 80px;
    height: 80px;
    background: rgba(247, 60, 19, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.group-icon i {
    font-size: 40px;
    color: #FF5F00;
}

.card-front .category {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #FF5F00;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.card-front h3 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    word-break: keep-all;
}

/* 카드 뒷면 (호버 시 나타남) */
.card-back {
    background: #FF5F00; /* 뒷면은 강조색으로 반전 */
    transform: rotateY(180deg);
    justify-content: space-between;
    z-index: 1;
}

.card-back p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 25px;
}

.sub-services {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.sub-services li {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

.sub-services li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #fff;
}

.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 15px;
    border-bottom: 1px solid #fff;
    width: fit-content;
    padding-bottom: 5px;
}

/* 호버 액션: 카드 뒤집기 */
.help-card:hover .card-front {
    transform: rotateY(-180deg);
}

.help-card:hover .card-back {
    transform: rotateY(0deg);
}

/* --- 반응형 대응 --- */

/* 태블릿 (1200px 이하) */
@media screen and (max-width: 1200px) {
    .help-grid {
        grid-template-columns: repeat(2, 1fr); /* 2행 2열 */
        gap: 20px;
    }
}

/* 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    .help-grid-section { padding: 100px 0; }
    
    .help-title h2 { font-size: 32px; }
    
    .help-grid {
        grid-template-columns: 1fr; /* 1열 배치 */
    }
    
    .help-card {
        height: 400px;
    }

    /* 모바일에서는 뒤집기 대신 앞면에 리스트가 살짝 보이는 방식도 좋지만, 
       가독성을 위해 뒤집기 유지 혹은 클릭 시 전환 권장 */
}