@charset "utf-8";


@import url("default.css");
@import url("common.css");


#main-page> *{word-break: keep-all;}

/* Reveal Animation */
#main-page .reveal{transform:translateY(30px); opacity:0; transition:all .8s ease-out;}
#main-page .reveal.active{opacity:1; transform:translateY(0);}

/* Custom Scrollbar */
#main-page ::-webkit-scrollbar{width:8px;}
#main-page ::-webkit-scrollbar-track{background:#f1f1f1;}
#main-page ::-webkit-scrollbar-thumb{background:#cbd5e1; border-radius:4px;}
#main-page ::-webkit-scrollbar-thumb:hover{background:#0085CA;}
#main-page ::selection{background:rgba(0,133,202,.2); color:#0085CA;}

/* Typography & effects */
#main-page .display-heading{letter-spacing:-.02em; line-height:1.2;}
#main-page .marquee-container{mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);}

/* Hover card */
#main-page .hover-card{transition:all .4s cubic-bezier(.16,1,.3,1);}
#main-page .hover-card:hover{transform:translateY(-8px); box-shadow:0 20px 40px -5px rgba(0,133,202,.2); border-color:#0085CA;}

/* Navigation */
#main-page .nav-link.active{color:#0085CA;}
#main-page .nav-link.active::after{width:100%;}

/* Form */
#main-page .form-input,
#main-page .form-select{width:100%; padding:14px 16px; background:#fff; border:1px solid #E2E8F0; border-radius:8px; outline:none; transition:all .3s; color:#1E293B; font-size:.95rem;}
#main-page .form-input:focus,
#main-page .form-select:focus{border-color:#0085CA; background:#fff; box-shadow:0 0 0 3px rgba(0,133,202,.1);}

/* Tab */
#main-page .tab-content{display:none; opacity:0; transition:opacity .4s ease-in-out;}
#main-page .tab-content.active{display:block; opacity:1;}

/* Folder tab */
#main-page .folder-tab.active{background:#fff; color:#0085CA; border-top:1px solid #E2E8F0; border-left:1px solid #E2E8F0; border-right:1px solid #E2E8F0; border-bottom:1px solid transparent; position:relative; z-index:10;}
#main-page .folder-tab.inactive{background:#F1F5F9; color:#94A3B8; border-bottom:1px solid #E2E8F0;}
#main-page .folder-tab.inactive:hover{background:#E2E8F0; color:#64748B;}

/* Scroll snap */
#main-page .snap-x-mandatory{scroll-snap-type:x mandatory;}
#main-page .snap-center{scroll-snap-align:center;}

/* Mobile */
@media (max-width:1024px){
    #main-page ::-webkit-scrollbar{display:none;}
    #main-page .reveal{transition:all .6s ease-out;}
    #main-page .hover-card:hover{transform:none; box-shadow:none; border-color:#E5E7EB;}
}




/*global*/
#global .world-bg{width:660px; height:400px; background:url('../img/main/world_bg.png') no-repeat center center / 100% auto;}
#global .world-bg .pin-seoul{left:220px; top:140px;}
#global .world-bg .pin-viet{left:160px; top:250px;}
@media (max-width:1400px){
    #global .con_wrap .item.reveal{text-align:center;}
}
@media (max-width:768px){
    #global .item.world-map{display:none !important;}
}






/*공통속성*/
.scroll-progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 1000; background: transparent; }
.scroll-progress-bar { width: 0%; height: 100%; background: #0085CA; transition: width 0.1s; }
/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #0085CA; }

.reveal { transform: translateY(40px); opacity: 0; transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

.floating-banner { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0.05em; }




/*about*/
.sub_about .headline { font-size: clamp(2.8rem, 5.5vw, 5rem); line-height: 1.1; letter-spacing: -0.03em; }
.sub_about .sub-headline { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.75; }






/*insight_list*/
/* Insight Card Hover */
.insight-card { transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.insight-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1); }
.insight-card:hover .card-img { transform: scale(1.05); }
.card-img { transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }

/* Filter Button Active */
.filter-btn.active { background-color: #0F172A; color: #fff; border-color: #0F172A; }


/* Noise Texture */
.bg-noise { position: relative; }
.bg-noise::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); opacity: 0.4; pointer-events: none; z-index: 0; }










/*insight_view*/
/* Article Styling */
.article-content p { margin-bottom: 1.5rem; line-height: 1.75; font-size: 1.05rem; color: #374151; }
.article-content h2 { margin-top: 3rem; margin-bottom: 1.25rem; font-size: 1.75rem; font-weight: 700; color: #0F172A; letter-spacing: -0.02em; scroll-margin-top: 100px; }
.article-content h3 { margin-top: 2rem; margin-bottom: 1rem; font-size: 1.35rem; font-weight: 600; color: #1E293B; }
.article-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; color: #4B5563; }
.article-content li { margin-bottom: 0.5rem; }
.article-content blockquote { margin: 2rem 0; padding: 1.5rem; padding-left: 1.5rem; border-left: 4px solid #0085CA; background: #F8FAFC; font-style: italic; color: #4B5563; border-radius: 0 8px 8px 0; }
.article-content img { width: 100%; margin: 2rem 0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); cursor: zoom-in; transition: transform 0.3s; }
.article-content img:hover { transform: scale(1.01); }

/* TOC Active State */
.toc-link.active { color: #0085CA; font-weight: 700; border-left: 2px solid #0085CA; padding-left: 10px; margin-left: -12px; }

/* Share Button Hover */
.share-btn:hover { transform: translateY(-2px); }

/* Lightbox */
.lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: rgba(0,0,0,0.95); align-items: center; justify-content: center; opacity: 0; backdrop-filter: blur(5px); transition: opacity 0.3s ease; }
.lightbox.open { display: flex; opacity: 1; }
.lightbox img { max-width: 90%; max-height: 90%; border-radius: 4px; box-shadow: 0 0 30px rgba(0,0,0,0.5); transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lightbox.open img { transform: scale(1); }
.lightbox-close { position: absolute; top: 30px; right: 30px; color: #fff; font-size: 40px; cursor: pointer; opacity: 0.8; transition: opacity 0.2s; }
.lightbox-close:hover { opacity: 1; }





/*portfolio_list*/

/* [UX] Portfolio Card Interaction */
.portfolio-card { transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.portfolio-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15); }
.portfolio-card:hover .card-img { transform: scale(1.05); }

/* Arrow Icon Animation */
.portfolio-card .arrow-icon { opacity: 0; transform: translate(-10px, 10px); transition: all 0.3s ease; }
.portfolio-card:hover .arrow-icon { opacity: 1; transform: translate(0, 0); }

.card-img { transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }

/* Filter Button Active */
.filter-btn.active { background-color: #0085CA; color: #fff; border-color: #0085CA; }

/* Noise Texture */
.bg-noise { position: relative; }
.bg-noise::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); opacity: 0.4; pointer-events: none; z-index: 0; }





/*portfolio_view*/

/* Noise Texture */
.bg-noise { position: relative; }
.bg-noise::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); opacity: 0.4; pointer-events: none; z-index: 0; }

/* Detail Page */
.mockup-shadow { box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.15); }
.stat-card { border-left: 4px solid #0085CA; padding-left: 1.5rem; }

/* Lightbox */
.lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: rgba(0,0,0,0.95); align-items: center; justify-content: center; opacity: 0; backdrop-filter: blur(5px); transition: opacity 0.3s ease; }
.lightbox.open { display: flex; opacity: 1; }
.lightbox img { max-width: 90%; max-height: 90%; border-radius: 4px; box-shadow: 0 0 30px rgba(0,0,0,0.5); transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lightbox.open img { transform: scale(1); }
.lightbox-close { position: absolute; top: 30px; right: 30px; color: #fff; font-size: 40px; cursor: pointer; opacity: 0.8; transition: opacity 0.2s; }
.lightbox-close:hover { opacity: 1; }

/* Zoomable Image */
.project-img-zoom { cursor: zoom-in; transition: transform 0.3s; }
.project-img-zoom:hover { transform: scale(1.01); }







/*service*/

/* Card Hover Effects */
.service-card { transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1); border-color: #0085CA; }

/* Sub Nav Active State */
.sub-nav-link.active { color: #0085CA; border-bottom-color: #0085CA; }

/* Noise Texture */
.bg-noise { position: relative; }
.bg-noise::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); opacity: 0.4; pointer-events: none; z-index: 0; }





/*solution*/
.animate-fade-up { opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s ease-out forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* Sub Nav Active */
.sub-nav-link.active { color: #0085CA; border-bottom-color: #0085CA; }

/* Noise Texture */
.bg-noise { position: relative; }
.bg-noise::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); opacity: 0.4; pointer-events: none; z-index: 0; }


/* Carousel */
.carousel-container { position: relative; overflow: hidden; width: 100%; height: 100%; }
.carousel-wrapper { display: flex; height: 100%; transition: transform 0.5s ease-in-out; }
.carousel-slide { position: relative; min-width: 100%; height: 100%; }
.carousel-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 20; }
.carousel-dot { width: 8px; height: 8px; background-color: rgba(255,255,255,0.5); border-radius: 50%; cursor: pointer; transition: all 0.3s; }
.carousel-dot.active { width: 20px; background-color: #fff; border-radius: 4px; }

/* Dark Theme Carousel Dots */
.dots-dark .carousel-dot { background-color: rgba(0,0,0,0.3); }
.dots-dark .carousel-dot.active { background-color: #0085CA; }