/* --- 0. Font Definition --- */
        @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2'); font-weight: 100; font-display: swap; }
        @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2'); font-weight: 200; font-display: swap; }
        @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
        @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
        @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
        @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
        @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
        @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
        @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

        /* --- 1. Reset & Common --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; }
        body {
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
            color: #333;
            line-height: 1.6;
            overflow-x: hidden;
            background-color: #fff;
        }
        ul, li { list-style: none; }
        a { text-decoration: none; color: inherit; }
        img { max-width: 100%; display: block; }

        :root {
            --primary-blue: #0055ff;
            --dark-bg: #111;
            --text-gray: #666;
            --section-padding: 100px 0;
        }

        .container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* --- 2. Header & Nav --- */
        header {
            position: fixed;
            top: 0; left: 0; width: 100%;
            background: #fff;
            z-index: 1000;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            transition: all 0.3s;
        }
        .header-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 64px;
        }
        body.header-scrolled header {
        }
        .logo {
            font-size: 28px;
            font-weight: 800;
            color: #111;
            display: flex;
            align-items: center;
            gap: 5px;
            font-family: 'Aggravo';
        }
        .logo span {
            color: var(--primary-blue);
            width: 10px; height: 10px;
            background: var(--primary-blue);
            border-radius: 50%;
            display: inline-block;
            margin-top: 6px;
        }

        .gnb { display: flex; gap: 32px; height: 100%; align-items: center; }
        .gnb > li { position: relative; height: 100%; display: flex; align-items: center; }
        .gnb > li > a {
            font-weight: 600; font-size: 15px; color: #111;
            transition: color 0.3s;
        }
        .gnb > li:hover > a { color: var(--primary-blue); }

        .sub-menu {
            position: absolute;
            top: 64px;
            left: 50%;
            transform: translateX(-50%);
            background: #fff;
            min-width: 180px;
            padding: 16px 0;
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            opacity: 0;
            visibility: hidden;
            transition: all 0.25s ease;
            border-radius: 0 0 8px 8px;
            text-align: center;
            z-index: 1001;
        }
        .gnb > li:hover .sub-menu { opacity: 1; visibility: visible; top: 64px; }
        .sub-menu li a { display: block; padding: 8px 20px; font-size: 14px; color: #666; }
        .sub-menu li a:hover { color: var(--primary-blue); background: #f9f9f9; }

        .mobile-btn { display: none; font-size: 24px; cursor: pointer; }

        /* 모바일 메뉴 전체 오버레이 */
        .mobile-nav {
            position: fixed;
            top: 64px;
            left: 0;
            width: 100%;
            height: calc(100% - 64px);
            background: rgba(255,255,255,0.98);
            z-index: 999;
            transform: translateY(-100%);
            transition: transform 0.25s ease;
            padding: 24px 20px 40px;
            overflow-y: auto;
        }
        .mobile-nav.open {
            transform: translateY(0);
        }
        .mobile-nav ul {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .mobile-nav li a {
            font-size: 16px;
            font-weight: 600;
        }

        /* --- 3. HERO --- */
        .hero {
            position: relative;
            min-height: 100vh;
            padding-top: 64px; /* 헤더 높이만큼 보정 */
            overflow: hidden;
            color: #fff;
        }
        .hero-bg {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-position: center;
            background-size: cover;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            z-index: 0;
        }
        .hero-bg.active { opacity: 1; }

        .hero-overlay {
            position:absolute;
            top:0;left:0;width:100%;height:100%;
    background: rgba(0, 0, 0, 0.35);  /* 완전 블랙 + 옅은 투명도 */
            z-index:1;
        }

        .hero-inner {
            position:relative;
            z-index:2;
            min-height: calc(100vh - 64px);
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
        }

        .hero-text {
            text-align:center;
            margin-bottom:40px;
            padding: 0 20px;
        }
        .hero-text h1 {
            font-size:46px;
            font-weight:800;
            line-height:1.25;
            margin-bottom:10px;
        }
        .hero-text h2 {
            font-size:30px;
            font-weight:700;
            margin-bottom:16px;
        }
        .hero-text p {
            font-size:15px;
            color:rgba(255,255,255,0.85);
            margin-bottom:20px;
        }
        .btn-primary {
            display:inline-block;
            padding:11px 30px;
            background:var(--primary-blue);
            color:#fff;
            font-weight:600;
            border-radius:999px;
            font-size:14px;
        }
        .btn-primary i{margin-left:6px;}

        /* 성과 박스 */
        .hero-stats-wrap {
            width:min(960px, 100%);
            margin:0 auto;
        }
        .stats-container {
            background:#fff;
            border-radius:20px;
            padding:26px 32px;
            display:flex;
            justify-content:space-between;
            align-items:center;
            color:#111;
            box-shadow:0 16px 32px rgba(0,0,0,0.35);
        }
        .stat-item {
            text-align:center;
            padding:0 18px;
            flex:1;
        }
        .stat-item + .stat-item {
            border-left:1px solid #eee;
        }
        .stat-icon {
            color:var(--primary-blue);
            font-size:22px;
            margin-bottom:8px;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:6px;
        }
        .stat-icon span { font-size:13px; font-weight:600; color:#666; }
        .stat-number { font-size:40px; font-weight:800; color:#111; line-height:1; margin-top:6px; display:inline-block; }
        .stat-unit { font-size:18px; font-weight:500; color:#888; margin-left:4px; }

        .hero-arrow {
            position:absolute;
            left:50%;
            bottom:18px;
            transform:translateX(-50%);
            animation:bounce 2s infinite;
            z-index:3;
        }
        .hero-arrow i { font-size:26px; color:#fff; }

        /* --- 5. Contents Section (Refresh: Square & Border Hover) --- */
.contents-section { 
    padding: var(--section-padding); 
    background: #f8f9fa; 
}

/* 헤더: 양쪽 정렬 */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
}
.section-title { 
    font-size: 32px; 
    font-weight: 800; 
    color: #111; 
    text-transform: uppercase; 
}
.section-header .nav-arrows { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}
.section-header .nav-arrows i { 
    font-size: 20px; 
    color: #ccc; 
    cursor: pointer; 
    transition: 0.3s; 
}
.section-header .nav-arrows i:hover { 
    color: #111; 
}

.swiper {
    width: 100%;
}

/* 컨텐츠 카드: 각진 사각형 + 테두리 호버 */
.content-card {
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    box-shadow: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.content-card:hover {
    border-color: var(--primary-blue);
    background-color: #fff;
    transform: none;
}

.card-img { 
    height: 220px; 
    background: #ddd; 
    overflow: hidden; 
}
.card-img img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.5s ease;
}
.content-card:hover .card-img img { 
    transform: scale(1.03); 
}

.card-body { 
    padding: 24px 20px; 
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 태그: 흰 배경 + 테두리 */
.tag { 
    background: #fff; 
    color: var(--primary-blue); 
    padding: 5px 10px; 
    font-size: 11px; 
    font-weight: 700; 
    border-radius: 999px; 
    display: inline-block; 
    margin-bottom: 12px; 
    border: 1px solid rgba(0,85,255,0.2);
}

.card-title { 
    font-size: 17px; 
    font-weight: 700; 
    margin-bottom: 8px; 
    line-height: 1.4; 
    color: #111;
}
.card-desc { 
    font-size: 14px; 
    color: #888; 
    line-height: 1.6; 
}


/* --- 6. Portfolio Section (Swiper) --- */
.portfolio-section { 
    padding: var(--section-padding); 
    background: #fff; 
}

/* 상단 전체보기 + 네비 */
.section-header.pf-header {
    align-items: center;
}
.pf-header-right {
    display: flex;
    align-items: center;
    gap: 18px;
}
.view-all-link {
    font-size: 14px;
    color: var(--primary-blue);
    font-weight: 600;
}

/* Swiper 슬라이드 높이 통일 */
#portfolioSwiper .swiper-wrapper {
    align-items: stretch;
}
#portfolioSwiper .swiper-slide {
    height: auto;
    display: flex;
}

/* 포트폴리오 카드 (두 번째 스샷 스타일) */
.pf-card {
    width: 100%;
    border: 1px solid #e3e6ff;
    background: #fff;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pf-card:hover {
    border-color: var(--primary-blue);
    background-color: #fff;
}

/* 상단 라벨 + 로고 영역 */
.pf-card-head {
    padding: 16px 20px 40px;
    border-bottom: 1px solid #f0f0ff;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.pf-card-label {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,85,255,0.25);
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-blue);
    background: #f7f9ff;
}

/* 로고 영역 */
.pf-card-logo {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pf-card-logo img {
    max-width: 70%;
    max-height: 100%;
    object-fit: contain;
}

/* 하단 텍스트 영역 */
.pf-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pf-card-name {
    font-size: 16px;
    font-weight: 800;
    color: #222;
}
.pf-card-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #f5f5ff;
    color: #5559ff;
}
.pf-card-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* 포트폴리오 슬라이더 네비 버튼 */
.pf-nav-box {
    display: flex;
    gap: 10px;
}
.pf-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #eee;
    background: #fff;
    color: #666;
    cursor: pointer;
    transition: 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.pf-nav-btn:hover {
    background: var(--primary-blue);
    color: #fff;
    border-color: var(--primary-blue);
}

/* --- 7. Newsletter & Footer --- */
.newsletter { 
    background: #f9f9f9; 
    padding: 80px 0; 
    border-top: 1px solid #eee; 
}
.nl-inner { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 24px; 
}
.nl-text h3 { 
    font-size: 28px; 
    font-weight: 800; 
    margin-bottom: 8px; 
}
.nl-text p { 
    color: #666; 
    font-size:14px; 
}
.nl-form { 
    display: flex; 
    gap: 10px; 
}
.nl-input {
    padding: 13px 16px;
    border: 1px solid #ddd;
    width: 260px;
    font-family: inherit;
    font-size:14px;
    border-radius: 0;
}
.nl-btn {
    background: var(--primary-blue);
    border: none;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    padding: 0 20px;
    border-radius: 0;
    height: 50px;
}

/* Footer */
footer { 
    background: #1a1a1a; 
    color: #fff; 
    padding: 60px 0; 
    font-size: 13px; 
}
.footer-inner { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    gap: 40px; 
    flex-wrap: wrap;
}
.footer-left h4 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    opacity: 0.9;
}
.footer-left p {
    font-size: 13px;
    color: #999;
    margin-bottom: 6px;
}
.footer-left .copyright {
    margin-top: 20px;
    font-size: 12px;
    color: #666;
}
.footer-right {
    text-align: right;
}
.contact-info {
    margin-bottom: 20px;
}
.contact-info h4 {
    font-size: 12px;
    color: #666;
    font-weight: 700;
    margin-bottom: 8px;
}
.contact-info p {
    font-size: 13px;
    color: #aaa;
    margin-bottom: 4px;
}
.social-links a { 
    width: 36px; 
    height: 36px; 
    background: rgba(255,255,255,0.1); 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    margin-left: 8px; 
    transition: 0.3s; 
    color:#fff;
}
.social-links a:hover { 
    background: var(--primary-blue); 
    transform: translateY(-3px);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .section-title { font-size: 28px; }
    .pf-header-right { gap: 12px; }
}

@media (max-width: 768px) {
    .section-title { font-size: 24px; }

    .pf-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .pf-header-right {
        width: 100%;
        justify-content: space-between;
    }

    .pf-card-head { padding: 14px 16px 32px; }
    .pf-card-body { padding: 18px 16px; }

    .nl-inner, .nl-form { flex-direction: column; text-align: center; width: 100%; }
    .nl-input { width: 100%; }

    .footer-inner { flex-direction: column; align-items: flex-start; }
    .footer-right { text-align: left; width: 100%; border-top: 1px solid #333; padding-top: 30px; }
    .social-links a { margin-left: 0; margin-right: 8px; }
}

@media (max-width: 480px) {
    .pf-card-logo img { max-width: 80%; }
    .pf-card-name { font-size: 15px; }
    .pf-card-desc { font-size: 12px; }
}
/* =================================================================
           1. PC 헤더 및 서브메뉴 (기존 기능 100% 유지)
           ================================================================= */
        .gnb { 
            display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; 
            height: 100%; align-items: center;
        }
        .gnb > li { 
            position: relative; height: 100%; display: flex; align-items: center; 
        }
        .gnb > li > a {
            text-decoration: none; color: #333; font-weight: 600; font-size: 16px;
            padding: 0 10px; transition: color 0.3s; display: block; line-height: 70px;
        }
        .gnb > li:hover > a { color: #0066ff; }

        /* PC 서브메뉴 (호버 시 등장) */
        .gnb .sub-menu {
            position: absolute;
            top: 70px;
            left: 50%;
            transform: translateX(-50%);
            background: #fff;
            min-width: 160px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border-radius: 0;
            padding: 10px 0;
            display: none;
            z-index: 1000;
            list-style: none;
            border: 1px solid #eee;
        }
        .gnb > li:hover .sub-menu { display: block; animation: fadeIn 0.3s ease; }
        .gnb .sub-menu li { width: 100%; margin: 0; }
        .gnb .sub-menu li a {
            display: block; padding: 10px 20px; font-size: 14px; color: #555;
            text-decoration: none; white-space: nowrap; transition: all 0.2s; line-height: 1.5;
        }
        .gnb .sub-menu li a:hover { background: #f8f9fa; color: #0066ff; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateX(-50%) translateY(10px); }
            to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }

        /* =================================================================
           2. 모바일 메뉴 & 반응형 처리 (수정됨: 강제 숨김 처리)
           ================================================================= */
        .mobile-btn { display: none; font-size: 24px; cursor: pointer; color: #333; }
        
        .mobile-nav {
            position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
            background: #fff; z-index: 2000; transition: right 0.3s ease-in-out;
            display: flex; flex-direction: column;
        }
        .mobile-nav.open { right: 0; }

        /* 모바일 메뉴 내부 헤더 */
        .mobile-nav-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 20px; border-bottom: 1px solid #f1f1f1;
        }
        .mobile-logo { font-size: 20px; font-weight: 900; color: #333; text-decoration: none; }
        .mobile-close-btn { font-size: 24px; cursor: pointer; color: #333; padding: 5px; }

        /* 모바일 메뉴 리스트 영역 */
        .mobile-nav-content { flex: 1; overflow-y: auto; padding: 20px; }
        .mobile-nav-content > ul { list-style: none; padding: 0; margin: 0; }
        .mobile-nav-content > ul > li { border-bottom: 1px solid #f9f9f9; }

        /* 메인 메뉴 링크 스타일 */
        .mobile-main-link { 
            font-size: 18px; font-weight: 600; color: #333; text-decoration: none;
            display: flex; justify-content: space-between; align-items: center;
            padding: 20px 0; cursor: pointer;
        }
        .mobile-main-link.active { color: #0066ff; }
        /* 화살표 회전 애니메이션 */
        .mobile-main-link i { transition: transform 0.3s ease; font-size: 14px; color: #999; }
        .mobile-main-link.active i { transform: rotate(180deg); color: #0066ff; }

        /* [핵심 수정] 모바일 서브메뉴 강제 숨김 및 아코디언 */
        .mobile-sub-menu {
            display: none !important; /* [중요] 초기 상태 강제 숨김 */
            background-color: #fcfcfc; 
            list-style: none;
            padding: 0; 
            margin: 0;
            border-top: 1px solid #f1f1f1;
        }
        /* JS로 .open 클래스가 붙었을 때만 보임 */
        .mobile-sub-menu.open { 
            display: block !important; /* [중요] 열림 상태 강제 표시 */
            padding-bottom: 20px; 
            animation: slideDown 0.3s ease;
        }
        
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .mobile-sub-menu li a {
            display: block; padding: 12px 0 12px 10px; font-size: 15px; 
            color: #666; text-decoration: none; border-left: 2px solid transparent;
        }
        .mobile-sub-menu li a:hover { color: #333; border-left-color: #0066ff; }

        /* 태블릿/모바일 (768px 이하) 강제 적용 */
        @media (max-width: 768px) {
            .gnb { display: none !important; }
            .mobile-btn { display: block !important; }
        }

        /* =================================================================
           3. 기타 필수 스타일 (화살표, 포트폴리오 등 유지)
           ================================================================= */
        .hero-arrow {
            position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
            z-index: 10; color: #fff; font-size: 28px; cursor: pointer;
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateX(-50%) translateY(0);}
            40% {transform: translateX(-50%) translateY(-10px);}
            60% {transform: translateX(-50%) translateY(-5px);}
        }

        .portfolio-section .swiper { padding: 20px 10px 60px 10px; overflow: hidden; }
        .portfolio-section .swiper-wrapper { align-items: stretch; margin-bottom: 20px; }
        .portfolio-section .swiper-slide {
            flex-shrink: 0 !important; width: 85%; height: auto !important; display: flex;
        }
        @media (min-width: 768px) { .portfolio-section .swiper-slide { width: auto; } }

        .pf-card {
            width: 100%; background: #fff; border: 1px solid #eaecf0; border-radius: 0px;
            overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            transition: transform 0.3s ease; display: flex; flex-direction: column;
        }
        .pf-card:hover { transform: translateY(-5px); }
        .pf-card-head {
            background-color: #ffffff;
            padding: 30px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            min-height: 180px;
            border-bottom: 1px solid #eee;
        }
        .pf-card-label {
            position: absolute; top: 16px; left: 16px; font-size: 11px;
            color: #0066ff; background: #e6f0ff; padding: 4px 10px;
            border-radius: 20px; font-weight: 700;
        }
        .pf-card-logo img {max-width: 100%;max-height: 300px;object-fit: cover;width: 100%;}
        .pf-card-body { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; }
        .pf-card-name { font-size: 18px; font-weight: 800; color: #111; margin-bottom: 8px; }
        .pf-card-tag { 
            font-size: 13px; color: #666; background: #f5f5f5; 
            padding: 4px 8px; border-radius: 4px; display: inline-block; 
            margin-bottom: 16px; align-self: flex-start; 
        }
        .pf-card-desc { 
            font-size: 14px; color: #444; line-height: 1.6; margin-top: auto; 
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        
        .pf-nav-box { display: flex; gap: 8px; }
        .pf-nav-btn {
            width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e1e1e1;
            background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
        }


		/* =========================================
       Portfolio Sub Page CSS
       ========================================= */
    
    /* [추가됨] 상단 서브 비주얼 영역 */
    .sub-visual {
        width: 100%;
        height: 250px; /* 높이 설정 (모바일 고려해 약간 넉넉하게) */
        background-color: #002f75; /* 배경색 */
        /* background: url('/assets/images/sub_visual_bg.jpg') no-repeat center center/cover; */
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 60px;
		margin-top:50px;
    }
    
    .sub-visual-text {
        text-align: center;
        color: #fff;
    }
    .sub-visual-text h2 {
        font-size: 36px;
        font-weight: 800;
        letter-spacing: 2px;
        margin-bottom: 10px;
    }
    .sub-visual-text p {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 400;
    }

    /* 메인 컨테이너 */
    .sub-container { max-width: 1400px; margin: 0 auto; padding: 0 20px 120px; font-family: 'Pretendard', sans-serif; }
    
    /* 2. Search & Filter */
    .filter-wrap { margin-bottom: 60px; }
    
    /* 검색창 */
    .search-box { position: relative; max-width: 400px; margin-bottom: 40px; border-bottom: 2px solid #333; }
    .search-input { width: 100%; border: none; padding: 15px 40px 15px 0; font-size: 16px; outline: none; background: transparent; }
    .search-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 20px; cursor: pointer; color: #333; }

    /* 필터 그룹 */
    .filter-group { display: flex; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 20px; }
    .filter-label { font-size: 14px; font-weight: 800; color: #111; width: 80px; padding-top: 8px; text-transform: uppercase; }
    .filter-buttons { flex: 1; display: flex; flex-wrap: wrap; gap: 10px; }
    
    /* 필터 버튼 스타일 */
    .filter-btn { 
        padding: 8px 16px; font-size: 14px; font-weight: 600; border: 1px solid #e1e1e1; 
        background: #fff; color: #555; cursor: pointer; transition: all 0.2s; border-radius: 0;
    }
    .filter-btn:hover { border-color: #0066ff; color: #0066ff; }
    .filter-btn.active { background: #0066ff; border-color: #0066ff; color: #fff; }

    /* 3. Portfolio Grid List */
    .portfolio-grid { 
        display: grid; 
        grid-template-columns: repeat(4, 1fr); /* PC: 4열 */
        gap: 24px; 
    }

    /* 카드 스타일 (블루포인트 스타일) */
    .pf-item { 
        background: #fff; border: 1px solid #eaecf0; transition: transform 0.3s, box-shadow 0.3s; 
        display: flex; flex-direction: column; height: 100%; position: relative;
    }
    .pf-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
    
    /* 뱃지 (왼쪽 상단) */
    .pf-badge { 
        position: absolute; top: 20px; left: 20px; font-size: 11px; font-weight: 600; 
        padding: 4px 8px; border: 1px solid #333; color: #333; background: #fff; z-index: 2;
    }

    /* 로고 영역 (중앙 정렬) */
    .pf-thumb { 
        height: 200px; display: flex; align-items: center; justify-content: center; 
        border-bottom: 1px solid #f1f1f1; padding: 40px; background: #fff;
    }
    .pf-thumb img {max-width: 80%;max-height: 80px;object-fit: contain;/* filter: grayscale(100%); */transition: filter 0.3s;}
    .pf-item:hover .pf-thumb img { filter: grayscale(0%); } /* 호버시 컬러 */

    /* 텍스트 영역 */
    .pf-info { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; }
    .pf-name { font-size: 18px; font-weight: 700; color: #111; margin-bottom: 12px; }
    
    /* 태그들 */
    .pf-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 15px; }
    .pf-tag { font-size: 12px; color: #666; background: #f5f5f7; padding: 4px 8px; border-radius: 4px; }
    
    .pf-desc { 
        font-size: 14px; color: #555; line-height: 1.6; margin-top: auto;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }

    /* 4. Pagination */
    .pagination { display: flex; justify-content: center; margin-top: 60px; gap: 8px; }
    .page-link { 
        width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
        border: 1px solid #eee; color: #666; text-decoration: none; font-size: 14px; transition: all 0.2s;
    }
    .page-link:hover, .page-link.active { background: #333; color: #fff; border-color: #333; }

    /* 반응형 처리 */
    @media (max-width: 1024px) {
        .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 768px) {
        .sub-visual { height: 180px; }
        .sub-visual-text h2 { font-size: 28px; }
        .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
        .portfolio-grid { grid-template-columns: 1fr; }
        .filter-group { flex-direction: column; gap: 10px; }
        .filter-label { width: 100%; }
		.hero-text h1 {
    font-size: 35px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 10px;
    padding-top: 50px;
}
    }


	/* 기존 CSS 유지 */
    body { font-family: 'Pretendard', sans-serif; margin: 0; padding: 0; }
    .sub-visual { width: 100%; height: 250px; background-color:#002f75; display: flex; align-items: center; justify-content: center; margin-bottom: 60px; }
    .sub-visual-text { text-align: center; color: #fff; }
    .sub-visual-text h2 { font-size: 36px; font-weight: 800; letter-spacing: 2px; margin-bottom: 10px; }
    .sub-visual-text p { font-size: 16px; color: rgba(255, 255, 255, 0.7); font-weight: 400; }
    .sub-container { max-width: 1400px; margin: 0 auto; padding: 0 20px 120px; }
    .filter-wrap { margin-bottom: 60px; }
    .search-box { position: relative; max-width: 400px; margin-bottom: 40px; border-bottom: 2px solid #333; }
    .search-input { width: 100%; border: none; padding: 15px 40px 15px 0; font-size: 16px; outline: none; background: transparent; }
    .search-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 20px; cursor: pointer; color: #333; }
    .filter-group { display: flex; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 20px; }
    .filter-label { font-size: 14px; font-weight: 800; color: #111; width: 80px; padding-top: 8px; text-transform: uppercase; }
    .filter-buttons { flex: 1; display: flex; flex-wrap: wrap; gap: 10px; }
    .filter-btn { padding: 8px 16px; font-size: 14px; font-weight: 600; border: 1px solid #e1e1e1; background: #fff; color: #555; cursor: pointer; transition: all 0.2s; border-radius: 0; text-decoration: none; }
    .filter-btn:hover { border-color: #0066ff; color: #0066ff; }
    .filter-btn.active { background: #0066ff; border-color: #0066ff; color: #fff; }
    .portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
    .pf-item { background: #fff; border: 1px solid #eaecf0; transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; height: 100%; position: relative; cursor: pointer; }
    .pf-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
    .pf-badge { position: absolute; top: 20px; left: 20px; font-size: 11px; font-weight: 600; padding: 4px 8px; border: 1px solid #333; color: #333; background: #fff; z-index: 2; }
    .pf-thumb { height: 200px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #f1f1f1; padding: 40px; background: #fff; }
    .pf-thumb img {max-width: 100%;max-height: 100%;object-fit: contain;/* filter: grayscale(100%); */transition: filter 0.3s;}
    .pf-item:hover .pf-thumb img { filter: grayscale(0%); }
    .pf-info { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; }
    .pf-name { font-size: 18px; font-weight: 700; color: #111; margin-bottom: 12px; }
    .pf-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 15px; }
    .pf-tag { font-size: 12px; color: #666; background: #f5f5f7; padding: 4px 8px; border-radius: 4px; }
    .pf-desc { font-size: 14px; color: #555; line-height: 1.6; margin-top: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .pagination { display: flex; justify-content: center; margin-top: 60px; gap: 8px; }
    .page-link { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid #eee; color: #666; text-decoration: none; font-size: 14px; transition: all 0.2s; }
    .page-link:hover, .page-link.active { background: #333; color: #fff; border-color: #333; }

    /* 모달 CSS */
    .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 9999; overflow-y: auto; padding: 40px 20px; align-items: flex-start; justify-content: center; }
    .modal-overlay.open { display: flex; }
    .modal-wrap { background: #fff; width: 100%; max-width: 900px; position: relative; margin: 40px auto; box-shadow: 0 10px 40px rgba(0,0,0,0.2); animation: fadeInUp 0.3s ease-out; }
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    .modal-close { position: absolute; top: 20px; right: 20px; font-size: 28px; color: #333; cursor: pointer; z-index: 10; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
    .modal-close:hover { transform: rotate(90deg); }
    .modal-header { display: flex; padding: 60px 50px; border-bottom: 1px solid #eee; gap: 50px; align-items: center; }
    .modal-logo-box { width: 240px; height: 240px; border: 1px solid #eee; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; padding: 30px; }
    .modal-logo-box img { max-width: 100%; max-height: 100px; object-fit: contain; }
    .modal-title-box { flex: 1; }
    .modal-comp-name { font-size: 42px; font-weight: 700; color: #111; margin-bottom: 10px; line-height: 1.2; }
    .modal-comp-item { font-size: 20px; color: #666; font-weight: 400; margin-bottom: 24px; }
    .modal-tags { display: flex; gap: 10px; }
    .modal-tag { padding: 6px 12px; font-size: 13px; font-weight: 700; border: 1px solid #ddd; color: #555; }
    .modal-tag.type-1 { background: #45bfa3; color: #fff; border-color: #45bfa3; } 
    .modal-tag.type-2 { background: #fff; color: #333; border-color: #333; }
    .modal-body { padding: 50px; }
    .modal-desc { font-size: 16px; line-height: 1.7; color: #333; margin-bottom: 50px; white-space: pre-line; }
    .modal-info-table { width: 100%; border-top: 2px solid #333; margin-bottom: 50px; border-collapse: collapse; }
    .modal-info-table tr { border-bottom: 1px solid #eee; }
    .modal-info-table th { width: 120px; padding: 20px 0; text-align: left; font-weight: 700; color: #999; font-size: 15px; }
    .modal-info-table td { padding: 20px 0; font-size: 15px; color: #111; font-weight: 500; }
    .modal-link { color: #0066ff; text-decoration: underline; font-weight: 600; }
    @media (max-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 768px) {
        .sub-visual { height: 180px; }
        .sub-visual-text h2 { font-size: 28px; }
        .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
        .modal-header { flex-direction: column; align-items: flex-start; gap: 30px; padding: 40px 20px; }
        .modal-logo-box { width: 100px; height: 100px; padding: 10px; }
        .modal-comp-name { font-size: 28px; }
        .modal-body { padding: 30px 20px; }
    }
    @media (max-width: 480px) { .portfolio-grid { grid-template-columns: 1fr; } .filter-group { flex-direction: column; gap: 10px; } }


	:root{
        --jb-blue:#2563eb;
        --jb-blue-soft:#eff4ff;
        --jb-dark:#0f172a;
        --jb-gray:#6b7280;
        --jb-border:#e5e7eb;
        --jb-bg:#f9fafb;
        --content-max:1300px;
    }

    /* HERO */
    .about-hero{
        position:relative;
        width:100%;
        min-height:260px;
        background:url('https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:120px 16px 72px;
        box-sizing:border-box;
    }
    .about-hero::before{
        content:'';
        position:absolute;
        inset:0;
        background: rgba(15,23,42,0.5); /* 더 진한 30% 오버레이 */
    }
    .about-hero-inner{
        position:relative;
        width:100%;
        max-width:var(--content-max);
        color:#fff;
        padding-top: 50px;
    }
    .about-hero-eyebrow{
        font-size:12px;
        letter-spacing:0.16em;
        text-transform:uppercase;
        margin-bottom:12px;
        opacity:.9;
    }
    .about-hero-title{
        font-size:40px;
        font-weight:800;
        line-height:1.25;
        margin:0 0 8px;
        font-family: 'Paperozi';
    }
    .about-hero-title span{
        color:var(--jb-blue);
        font-family: 'Paperozi';
    }
    .about-hero-sub{
        font-size:14px;
        max-width:560px;
        line-height:1.7;
        color:rgba(241,245,249,0.96);
    }

    /* LAYOUT */
    .about-wrapper{
        max-width:var(--content-max);
        margin:0 auto;
        padding:64px 16px 96px;
        box-sizing:border-box;
    }
    .about-section{margin-bottom:72px;}
    .about-section:last-of-type{margin-bottom:0;}

    .about-kicker{
        font-size:12px;
        font-weight:700;
        color:var(--jb-blue);
        letter-spacing:0.18em;
        text-transform:uppercase;
        margin-bottom:10px;
    }
    .about-section-title{
        font-size: 28px;
        font-weight: 600;
        margin:0 0 18px;
        letter-spacing: -1px;
        color:var(--jb-dark);
        font-family: 'Paperozi';
    }

    .about-grid-2{
        display:grid;
        grid-template-columns:minmax(0,1.5fr) minmax(0,2.1fr);
        gap:56px;
        align-items:flex-start;
    }

    .about-lead{
        font-size:18px;
        line-height:1.8;
        font-weight:600;
        margin:0 0 12px;
        color:#111827;
    }
    .about-body{
        font-size:14px;
        line-height:1.9;
        color:var(--jb-gray);
        margin:0;
    }

    /* HIGHLIGHT BOX */
    .about-highlight{
        background:var(--jb-blue-soft);
        border:1px solid rgba(37,99,235,0.18);
        border-radius:0;
        padding:28px 24px;
        display:grid;
        grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr);
        gap:32px;
        box-sizing:border-box;
    }
    .about-highlight-title{
        font-size:20px;
        font-weight:800;
        margin:0 0 8px;
        color:var(--jb-dark);
    }
    .about-highlight-eng{
        font-size:12px;
        letter-spacing:0.14em;
        text-transform:uppercase;
        color:#1d4ed8;
        margin-bottom:10px;
    }
    .about-highlight-desc{
        font-size:14px;
        line-height:1.9;
        color:#1f2937;
        margin:0;
    }
    .about-highlight-pill{
        display:inline-flex;
        align-items:center;
        gap:6px;
        margin-top:14px;
        padding:5px 11px;
        font-size:11px;
        letter-spacing:0.06em;
        text-transform:uppercase;
        background:var(--jb-blue);
        color:#fff;
        border-radius:0;
    }
    .about-highlight-pill i{font-size:10px;}

    .about-highlight-list{
        margin:0;
        padding:0;
        list-style:none;
        font-size:13px;
        color:#374151;
    }
    .about-highlight-list li{
        margin-bottom:6px;
        display:flex;
        align-items:flex-start;
        gap:6px;
    }
    .about-highlight-list i{
        color:var(--jb-blue);
        margin-top:3px;
        font-size:11px;
    }

    /* 3 COL CARDS */
    .about-cards{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:24px;
    }
    .about-card{
        border:1px solid var(--jb-border);
        border-radius:0;
        padding:22px 20px;
        background:#fff;
        box-sizing:border-box;
        display:flex;
        flex-direction:column;
        gap:8px;
    }
    .about-card-icon{
        width:32px;
        height:32px;
        display:flex;
        align-items:center;
        justify-content:center;
        color:var(--jb-blue);
        border-radius:0;
        border:1px solid rgba(37,99,235,0.3);
        margin-bottom:4px;
        font-size:15px;
    }
    .about-card-tag{
        font-size:11px;
        letter-spacing:0.16em;
        text-transform:uppercase;
        color:#9ca3af;
    }
    .about-card-title{
        font-size:16px;
        font-weight:700;
        margin:0;
        color:#111827;
    }
    .about-card-text{
        font-size:13px;
        line-height:1.9;
        color:#4b5563;
        margin:0;
    }

    /* META */
    .about-meta{
        display:flex;
        flex-wrap:wrap;
        gap:20px 40px;
        border-top:1px solid var(--jb-border);
        padding-top:24px;
        margin-top:8px;
        font-size:13px;
        color:#4b5563;
    }
    .about-meta-block{
        display:flex;
        flex-wrap:wrap;
        align-items:flex-start;
        gap:6px;
        min-width:230px;
    }
    .about-meta-label{
        font-weight:600;
        color:#111827;
    }

    @media (max-width:1024px){
        .about-grid-2{grid-template-columns:1fr;gap:32px;}
        .about-highlight{grid-template-columns:1fr;}
        .about-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
    }
    @media (max-width:768px){
        .about-hero{padding:64px 16px 56px;min-height:230px;}
        .about-hero-title{font-size:28px;}
        .about-wrapper{padding:40px 16px 72px;}
        .about-section-title{font-size:20px;}
        .about-lead{font-size:16px;}
        .about-cards{grid-template-columns:1fr;}
    }

	 body { background: #f9f9f9; font-family: 'Pretendard', sans-serif; margin: 0; padding: 0; }
    
    /* [추가됨] 상단 비주얼 영역 (높이 200px) */
    .sub-visual {
        width: 100%;
        height: 200px;
        background-color: #002f75;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sub-visual-text { text-align: center; color: #fff; }
    .sub-visual-text h2 { font-size: 36px; font-weight: 800; letter-spacing: 2px; margin-bottom: 10px; }
    .sub-visual-text p { font-size: 16px; color: rgba(255, 255, 255, 0.7); font-weight: 400; }

    /* 폼 컨테이너 (border-radius: 0 적용) */
    .write-wrap { 
        max-width: 800px; margin: 80px auto; background: #fff; 
        padding: 60px; 
        border-radius: 0; /* 둥근 모서리 제거 */
        box-shadow: 0 20px 60px rgba(0,0,0,0.03); border: 1px solid #eee;
    }
    
    .form-header { text-align: center; margin-bottom: 50px; }
    .form-title { font-size: 32px; font-weight: 800; color: #111; margin-bottom: 10px; }
    .form-desc { font-size: 16px; color: #666; }

    /* 입력 필드 스타일 */
    .form-group { margin-bottom: 30px; }
    .form-row { display: flex; gap: 20px; margin-bottom: 30px; }
    .form-col { flex: 1; }
    
    .form-label { display: block; font-size: 15px; font-weight: 700; color: #333; margin-bottom: 10px; }
    .form-input { 
        width: 100%; height: 56px; border: 1px solid #e1e1e1; 
        border-radius: 0; /* 둥근 모서리 제거 */
        padding: 0 20px; font-size: 16px; background: #fcfcfc; transition: all 0.2s; 
        box-sizing: border-box; 
    }
    .form-input:focus { border-color: #0066ff; background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(0,102,255,0.1); }
    
    .form-textarea { 
        width: 100%; height: 200px; border: 1px solid #e1e1e1; 
        border-radius: 0; /* 둥근 모서리 제거 */
        padding: 20px; font-size: 16px; background: #fcfcfc; resize: none; 
        box-sizing: border-box; font-family: 'Pretendard', sans-serif;
    }
    .form-textarea:focus { border-color: #0066ff; background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(0,102,255,0.1); }
    
    /* 버튼 스타일 */
    .btn-submit { 
        display: block; width: 100%; height: 64px; background: #0066ff; color: #fff; 
        border: none; 
        border-radius: 0; /* 둥근 모서리 제거 */
        font-size: 18px; font-weight: 700; 
        cursor: pointer; margin-top: 50px; transition: background 0.2s;
    }
    .btn-submit:hover { background: #0052cc; }

    /* 반응형 */
    @media (max-width: 768px) {
        .write-wrap { margin: 40px 20px; padding: 30px; }
        .form-row { flex-direction: column; gap: 30px; margin-bottom: 30px; }
		.stats-container {
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 26px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #111;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}
.stat-item {
    text-align: center;
    padding: 0 18px;
    flex: 1;
    width: 33.3333%;
}
.stat-icon {
    color: var(--primary-blue);
    font-size: 22px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-direction: column;
}
.stat-icon {
    color: var(--primary-blue);
    font-size: 22px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-direction: column;
}
    }