/* ==========================================================================
   Codejaka Portfolio Layout - Custom Styles
   Unify v3.2.2 theme.min.css 기반, 인라인 CSS 사용 금지 원칙에 따라
   레이아웃 전용 스타일을 이 파일에서 관리
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global (사이트 본문만: 관리자 .x 폼 등에는 전역 규칙이 닿지 않도록 루트로 한정)
   -------------------------------------------------------------------------- */
.pf-layout-root {
    word-break: keep-all;
}

/* --------------------------------------------------------------------------
   모듈 본문: btnArea (DISABLE_XE_BTN_STYLES 로 코어 .btn 이 빠질 때 페이지·게시판 하단 액션 보정)
   .pf-layout-root = 빌더 내보내기 레이아웃 / #pf-main-content = codejaka_portfolio
   -------------------------------------------------------------------------- */
.pf-layout-root .btnArea,
#pf-main-content .btnArea,
#content .btnArea {
    margin: 1.5rem 0;
    padding: 0;
    text-align: right;
}

.pf-layout-root .btnArea .btn-group,
#pf-main-content .btnArea .btn-group,
#content .btnArea .btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
    align-items: center;
}

/* 미니 버튼 (페이지 정보 하단 · 위젯 편집 도구줄 공통, btn-sm 계열) */
.pf-layout-root .btnArea .btn,
#pf-main-content .btnArea .btn,
#content .btnArea .btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    font-family: inherit;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #d5dae2;
    border-radius: 0.25rem;
    background-color: #fff;
    color: #677788;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
}

.pf-layout-root .btnArea .btn:hover,
#pf-main-content .btnArea .btn:hover,
#content .btnArea .btn:hover {
    color: #377dff;
    border-color: #377dff;
    background-color: rgba(55, 125, 255, 0.04);
    text-decoration: none;
}

.pf-layout-root .btnArea .btn:focus-visible,
#pf-main-content .btnArea .btn:focus-visible,
#content .btnArea .btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(55, 125, 255, 0.25);
}

.pf-layout-root .btnArea .btn:active,
#pf-main-content .btnArea .btn:active,
#content .btnArea .btn:active {
    color: #1366ff;
    border-color: #1366ff;
    background-color: rgba(55, 125, 255, 0.08);
}

/* 위젯 편집: 위젯 목록 select 도 버튼줄과 높이 맞춤 */
#content .btnArea select,
#pf-main-content .btnArea select,
.pf-layout-root .btnArea select {
    min-height: 1.75rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.4;
    border-radius: 0.25rem;
    border: 1px solid #d5dae2;
    vertical-align: middle;
}

#content #pageBtnArea .etc,
#pf-main-content #pageBtnArea .etc {
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Rhymix 페이지 모듈: 위젯 편집 UI
   Bootstrap 5 [hidden]{display:none!important} 가 페이지 모듈 JS의 inline display:block 을 이김.
   pageBtnArea 등에 hidden 속성이 남아 있어도 JS가 style.display 를 설정했으면 보이도록 재정의.
   -------------------------------------------------------------------------- */
#pageBtnArea[hidden] {
    display: block !important;
}

#pageFo {
    display: block !important;
}

#zonePageContent {
    min-height: 1rem;
}

/* --------------------------------------------------------------------------
   Header / Navbar
   -------------------------------------------------------------------------- */
.pf-navbar-brand-logo {
    min-width: 3rem;
    max-height: 2.5rem;
}

/* Unify theme.min.css: .navbar-brand-logo { max-width: 6rem } — 브랜드 로고 확대 */
.navbar-brand-logo {
    min-width: 8rem;
    max-width: 8rem;
}

.pf-navbar-text-logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #1e2022;
    text-decoration: none;
}

.pf-navbar-text-logo:hover {
    color: #377dff;
    text-decoration: none;
}

.navbar-absolute-top .pf-navbar-text-logo {
    color: #fff;
}

.navbar-absolute-top.navbar-light.navbar-scrolled .pf-navbar-text-logo {
    color: #1e2022;
}

/*
 * HS Mega Menu — Rhymix 동적 헤더(data/rhymix_templates/un_default.html) 전용
 * .pf-rhymix-dynamic-nav 가 있는 nav 에만 적용. 빌더 정적 내보내기·기존 Unify 마크업은 클래스가 없으므로 테마 기본과 동일하게 유지.
 */
@media (min-width: 992px) {
    .pf-rhymix-dynamic-nav .hs-has-mega-menu {
        position: relative;
    }

    .pf-rhymix-dynamic-nav .hs-has-mega-menu .hs-mega-menu.dropdown-menu {
        margin-top: 0.5rem !important;
        padding-top: 0 !important;
    }

    .pf-rhymix-dynamic-nav .hs-has-mega-menu::after {
        content: '';
        position: absolute;
        bottom: -0.5rem;
        left: 0;
        right: 0;
        height: 0.5rem;
        background: transparent;
        z-index: 1001;
    }

    .pf-rhymix-dynamic-nav .pf-hs-mega-menu-item .hs-mega-menu.dropdown-menu {
        max-width: 28rem;
    }
}

/*
 * codejaka_builder: 인스턴스 HTML에만 붙는 li.cj-builder-mega-anchor — 빌더로 추가한 드롭다운(id cj-dd-*) 2차 패널 위치.
 * 모든 .hs-has-mega-menu에 position:relative를 주면 안 됨(기존 넓은 메가메뉴 그리드 폭 깨짐).
 */
@media (min-width: 992px) {
    .cj-builder-mega-anchor.hs-has-mega-menu {
        position: relative;
    }
}

/* --------------------------------------------------------------------------
   Hero Section (blog-modern Swiper, 배경은 layout.html에서 data-bg-src 적용)
   원본 Unify dist/snippets/hero-blog-modern.html 에는 별도 min-height가 없고,
   슬라이드의 content-space-t-sm-3 / content-space-b-sm-4 패딩이 자연스러운
   히어로 높이(약 580~700px)를 만든다. 70vh를 강제하면 뷰포트 세로가 클 때
   히어로가 함께 커져서 하단 thumbs nav가 미리보기 가시 영역 아래로 밀린다.
   -------------------------------------------------------------------------- */

.pf-hero-blog-fallback.pf-hero-blog-slide {
    background: linear-gradient(135deg, #1e2022 0%, #377dff 100%);
}

.pf-hero-portfolio-placeholder {
    min-height: 12rem;
    background: linear-gradient(180deg, #e7eaf0 0%, #dce0e5 100%);
}

.pf-hero-blog-slide {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.pf-hero-blog-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
}

.pf-hero-blog-slide .container {
    position: relative;
    z-index: 2;
}

.js-swiper-blog-modern-hero-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.js-swiper-blog-modern-hero-pagination .swiper-pagination-bullet-active {
    background: #fff;
}

.pf-hero-corporate-cubics img {
    max-width: 30rem;
}

.pf-hero-corporate-pill {
    max-width: 12rem;
}

.pf-hero-services-rule {
    max-width: 5rem;
}

.pf-hero-consulting-visual {
    min-height: 28rem;
}

.pf-hero-consulting-bg {
    min-height: 36rem;
}

/* Unify hs-video-bg (랜딩 컨설팅 히어로 등): 본문·빌더에서 영상이 영역을 채우도록 */
.pf-layout-root .video-bg .hs-video-bg-video {
    position: absolute;
    inset: 0;
}
.pf-layout-root .video-bg .hs-video-bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-hero-careers-bg {
    min-height: 50vh;
}

.pf-hero-story-bg {
    min-height: 22rem;
}

.pf-hero-about-cover {
    min-height: 35vh;
}

@media (min-width: 768px) {
    .pf-hero-about-cover {
        min-height: 75vh;
    }
}

.pf-hero-about-card-wrap {
    max-width: 25rem;
}

.pf-hero-soon-shape {
    margin-bottom: -0.125rem;
}

@media (max-width: 767.98px) {
    .pf-hero-blog-slide .h1 {
        font-size: 2.25rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .pf-hero-blog-slide .h1 {
        font-size: 2.75rem;
    }
}

/* --------------------------------------------------------------------------
   Section Common
   -------------------------------------------------------------------------- */
.pf-section-heading {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.pf-section-subtitle {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #377dff;
}

/* --------------------------------------------------------------------------
   About Section
   -------------------------------------------------------------------------- */
.pf-about-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
    min-height: 300px;
}

/* --------------------------------------------------------------------------
   Services Section
   -------------------------------------------------------------------------- */
.pf-service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 0.75rem;
}

.pf-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

.pf-service-icon {
    font-size: 2.5rem;
    color: #377dff;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Gallery Preview Section
   -------------------------------------------------------------------------- */
.pf-gallery-card {
    overflow: hidden;
    border: none;
    border-radius: 0.5rem;
}

.pf-gallery-card-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pf-gallery-card:hover .pf-gallery-card-img {
    transform: scale(1.05);
}

.pf-gallery-card-overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pf-gallery-card:hover .pf-gallery-card-overlay {
    opacity: 1;
}

.pf-gallery-placeholder {
    width: 100%;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8fafd;
    color: #8c98a4;
    font-size: 3rem;
}

/* --------------------------------------------------------------------------
   Testimonials Section
   -------------------------------------------------------------------------- */
.pf-testimonial-card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
}

.pf-testimonial-quote {
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.7;
    color: #677788;
}

.pf-testimonial-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.pf-testimonial-avatar-placeholder {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e7eaf3;
    color: #677788;
    font-size: 1.25rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Pricing Section
   -------------------------------------------------------------------------- */
.pf-pricing-card {
    border: 1px solid #e7eaf3;
    border-radius: 0.75rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pf-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

.pf-pricing-featured {
    border-color: #377dff;
    box-shadow: 0 0.25rem 1rem rgba(55, 125, 255, 0.15);
}

.pf-pricing-price {
    font-size: 2rem;
    font-weight: 700;
    color: #1e2022;
}

.pf-pricing-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pf-pricing-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f5f5f5;
    color: #677788;
}

.pf-pricing-list li:last-child {
    border-bottom: none;
}

/* --------------------------------------------------------------------------
   Contact / CTA Section
   -------------------------------------------------------------------------- */
.pf-cta-section {
    background-color: #1e2022;
    color: #fff;
}

.pf-contact-icon {
    font-size: 1.5rem;
    color: #377dff;
    width: 3rem;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.pf-footer-logo {
    max-height: 2.5rem;
}

.pf-footer-sns-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    transition: background 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.pf-footer-sns-link:hover {
    background: #377dff;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Go To Top Button
   -------------------------------------------------------------------------- */
.pf-go-to {
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   Content Area (Sub pages)
   -------------------------------------------------------------------------- */
.pf-content-wrapper {
    padding-top: 7rem;
}

/* 서브페이지 {$content}에 페이지 위젯 편집 UI가 있을 때: 상위에 pf-scroll-reveal을 두면 본문 전체가 opacity:0으로 남을 수 있음(래퍼에서는 사용하지 않음). */
.pf-content-wrapper.pf-scroll-reveal:has(#zonePageContent),
.pf-content-wrapper.pf-scroll-reveal:has(#pageFo) {
    opacity: 1 !important;
    transform: none !important;
}

/* --------------------------------------------------------------------------
   Scroll reveal (스크롤 시 섹션 자연스럽게 표시)
   -------------------------------------------------------------------------- */
.pf-scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 2.25rem, 0);
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.pf-scroll-reveal.pf-scroll-reveal--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

/* 하위 블록 순차 등장 (선택) */
.pf-scroll-reveal.pf-scroll-reveal--visible .pf-reveal-stagger > .col,
.pf-scroll-reveal.pf-scroll-reveal--visible .pf-reveal-stagger > [class*="col-"] {
    animation: pf-reveal-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pf-scroll-reveal.pf-scroll-reveal--visible .pf-reveal-stagger > .col:nth-child(1),
.pf-scroll-reveal.pf-scroll-reveal--visible .pf-reveal-stagger > [class*="col-"]:nth-child(1) {
    animation-delay: 0.05s;
}

.pf-scroll-reveal.pf-scroll-reveal--visible .pf-reveal-stagger > .col:nth-child(2),
.pf-scroll-reveal.pf-scroll-reveal--visible .pf-reveal-stagger > [class*="col-"]:nth-child(2) {
    animation-delay: 0.12s;
}

.pf-scroll-reveal.pf-scroll-reveal--visible .pf-reveal-stagger > .col:nth-child(3),
.pf-scroll-reveal.pf-scroll-reveal--visible .pf-reveal-stagger > [class*="col-"]:nth-child(3) {
    animation-delay: 0.19s;
}

.pf-scroll-reveal.pf-scroll-reveal--visible .pf-reveal-stagger > .col:nth-child(4),
.pf-scroll-reveal.pf-scroll-reveal--visible .pf-reveal-stagger > [class*="col-"]:nth-child(4) {
    animation-delay: 0.26s;
}

.pf-scroll-reveal.pf-scroll-reveal--visible .pf-reveal-stagger > .col:nth-child(5),
.pf-scroll-reveal.pf-scroll-reveal--visible .pf-reveal-stagger > [class*="col-"]:nth-child(5) {
    animation-delay: 0.33s;
}

.pf-scroll-reveal.pf-scroll-reveal--visible .pf-reveal-stagger > .col:nth-child(6),
.pf-scroll-reveal.pf-scroll-reveal--visible .pf-reveal-stagger > [class*="col-"]:nth-child(6) {
    animation-delay: 0.4s;
}

@keyframes pf-reveal-fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 1.25rem, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.pf-reveal-stagger > .col,
.pf-reveal-stagger > [class*="col-"] {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pf-scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pf-reveal-stagger > .col,
    .pf-reveal-stagger > [class*="col-"] {
        opacity: 1;
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   Section variants (Unify)
   -------------------------------------------------------------------------- */
.pf-service-unify-icon-wrap {
    width: 4rem;
    height: 4rem;
}

.pf-section-testimonials-unify .blockquote-footer {
    color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .pf-gallery-card-img {
        height: 220px;
    }

    .pf-gallery-placeholder {
        height: 220px;
    }
}

/* --------------------------------------------------------------------------
   Page style: extpage / board (layout admin > page_style)
   -------------------------------------------------------------------------- */
.pf-extpage-full {
    width: 100%;
    max-width: 100%;
    padding: 0;
    /* overflow-x: hidden 은 조상에 스크롤/클립 컨텍스트를 만들어 HSStickyBlock·position:sticky 가 동작하지 않을 수 있음 */
    overflow-x: visible;
}

.pf-extpage-narrow {
    width: 100%;
    max-width: 960px;
    padding-left: 1rem;
    padding-right: 1rem;
}