/* 눈 편한 하늘색 팔레트(톤다운) */
:root {
    --soft-sky-50:  #f5fafe;
    --soft-sky-100: #ecf6ff;
    --soft-sky-200: #d7edfb;
    --soft-sky-300: #c6e6f9;
    --soft-sky-400: #9fd5f1;
    --soft-sky-500: #7cc4ed; /* 메인 */
    --soft-sky-600: #58b2e4;
    --ink-900: #0f172a;
    --ink-600: #475569;
    --ink-500: #64748b;
}

/* Bootstrap info 계열을 부드럽게 오버라이드 */
:root {
    --bs-info: var(--soft-sky-500);
    --bs-info-rgb: 124,196,237;
    --bs-info-bg-subtle: var(--soft-sky-50);
    --bs-info-border-subtle: var(--soft-sky-200);
}

/* 카드/버튼 부드러운 인터랙션 */
.soft-card {
    border: 1px solid var(--bs-info-border-subtle) !important;
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.06);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.soft-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 10px 28px rgba(2, 132, 199, 0.12);
    border-color: var(--soft-sky-300);
}

.soft-btn {
    border-radius: .9rem;
    transition: background-color .2s, box-shadow .2s, transform .2s;
}
.soft-btn.btn-info {
    background-color: var(--soft-sky-500);
    border-color: var(--soft-sky-500);
    color: #fff;
}
.soft-btn.btn-info:hover {
    background-color: var(--soft-sky-600);
    border-color: var(--soft-sky-600);
    box-shadow: 0 6px 16px rgba(124,196,237,.35);
    transform: translateY(-1px);
}
.soft-btn.btn-outline-info {
    border-color: var(--soft-sky-300);
    color: var(--soft-sky-600);
    background: #fff;
}
.soft-btn.btn-outline-info:hover {
    background: var(--soft-sky-50);
    border-color: var(--soft-sky-500);
    color: var(--soft-sky-600);
}

/* 섹션 배경 톤 */
.soft-section {
    background: var(--soft-sky-50);
}
.soft-section-alt {
    background: linear-gradient(180deg, var(--soft-sky-50), #fff);
}

/* Modal 둥글게 + 은은한 그림자 */
.modal.soft-modal .modal-content {
    border-radius: 1.25rem;
    border: 1px solid var(--bs-info-border-subtle);
    box-shadow: 0 24px 64px rgba(15,23,42,.2);
}

/* 보조 텍스트 컬러 톤다운 */
.text-ink-600 { color: var(--ink-600) !important; }
.text-ink-500 { color: var(--ink-500) !important; }
/* ===== Split Hero – Polaris (Gallery L / Copy R) ===== */
.hero-polaris{
    position:relative;
    isolation:isolate;
    display:grid;
    grid-template-columns: minmax(520px, 1fr) minmax(480px, 560px);
    grid-template-areas: "gallery copy";
    align-items:center;
    gap: clamp(24px, 5vw, 56px);
    min-height: 86vh;
    padding: 110px clamp(20px, 6vw, 64px);
    --speed: 36s; /* Vue의 speedVars로 오버라이드 */
    background:
            radial-gradient(1200px 600px at 15% -5%, rgba(124,196,237,.22), rgba(124,196,237,0) 60%),
            linear-gradient(180deg, #f7fbff 0%, #ffffff 50%, #eef6ff 100%);
}

.hero-polaris .polaris-bg{ position:absolute; inset:0; z-index:-1; }
.hero-polaris .polaris-bg::before{
    content:""; position:absolute; inset:-2px;
    background-image:
            linear-gradient(transparent 95%, rgba(124,196,237,.08) 95%),
            linear-gradient(90deg, transparent 95%, rgba(124,196,237,.08) 95%);
    background-size: 48px 48px;
    opacity:.7;
}

/* Layout areas */
.hero-polaris .hero-gallery{ grid-area: gallery; position:relative; }
.hero-polaris .hero-copy{ grid-area: copy; }

/* Gallery rails */
.hero-polaris .rail{ width:100%; overflow:hidden; mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); }
.hero-polaris .track{
    display:flex; gap: 18px; width:200%;
    animation-timing-function: linear; animation-iteration-count: infinite;
    height: clamp(160px, 22vw, 240px);
}
.hero-polaris .track.left{  animation-name: polarisL; animation-duration: var(--speed); }
.hero-polaris .track.right{ animation-name: polarisR; animation-duration: var(--speed); }

@keyframes polarisL { from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
@keyframes polarisR { from{ transform: translateX(-50%) } to{ transform: translateX(0) } }

.hero-polaris .card{
    flex:0 0 auto; width: clamp(260px, 28vw, 360px); aspect-ratio: 16 / 9;
    border-radius: 18px; overflow:hidden;
    border:1px solid rgba(124,196,237,.45);
    background:#fff;
    box-shadow: 0 24px 70px -30px rgba(79,176,226,.35);
    transition: transform .25s ease;
}
.hero-polaris .card:hover{ transform: translateY(-2px); }
.hero-polaris .card img{ width:100%; height:100%; object-fit:cover; display:block; }

.hero-polaris .fade{ position:absolute; top:0; bottom:0; width:8%; pointer-events:none; }
.hero-polaris .fade-left{ left:0;  background:linear-gradient(to right, #fff, rgba(255,255,255,.6), transparent); }
.hero-polaris .fade-right{ right:0; background:linear-gradient(to left,  #fff, rgba(255,255,255,.6), transparent); }

/* Copy */
.hero-polaris .eyebrow{
    display:inline-block; font-size:.85rem; font-weight:700; letter-spacing:.06em;
    color:#0369a1; background:rgba(124,196,237,.22);
    border:1px solid rgba(124,196,237,.45); padding:.35rem .6rem; border-radius:999px; margin-bottom:.75rem;
}
.hero-polaris .title{ margin:0 0 .65rem 0; line-height:1.05; }
.hero-polaris .title-line{
    display:block; font-weight:900; letter-spacing:-.02em;
    font-size: clamp(32px, 5.2vw, 64px);
    color:#0b233f;
}
.hero-polaris .title-line.accent{
    background: linear-gradient(90deg, #0ea5e9, #0369a1);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-polaris .subtitle{
    color:#334155; font-size: clamp(14px, 1.8vw, 18px); line-height:1.55; margin: .5rem 0 1.25rem;
}

.hero-polaris .cta-group{ display:flex; gap:.75rem; margin-bottom:.9rem; flex-wrap:wrap; }
.hero-polaris .btn-main{
    background: linear-gradient(90deg, #0ea5e9, #0284c7); color:#fff;
    padding:.8rem 1.6rem;  border-radius:12px; font-weight:700;
    box-shadow: 0 12px 28px rgba(14,165,233,.28); border:1px solid rgba(14,165,233,.45);
}
.hero-polaris .btn-main:hover{ filter: brightness(1.04); }
.hero-polaris .btn-ghost{
    background:#fff; color:#0369a1; border:1px solid rgba(14,165,233,.35);
    padding:.8rem 1.6rem;  border-radius:12px; font-weight:700;
}


/* 버튼 누른 티 내기 */
.btn-main,
.btn-ghost {
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn-main:active,
.btn-ghost:active {
    transform: scale(0.96);
}

/* Highlights */
.hero-polaris .hero-highlights{ display:flex; gap:.5rem; flex-wrap:wrap; padding:0; margin:.5rem 0 0; list-style:none; }
.hero-polaris .hero-highlights li{
    display:flex; align-items:center; gap:.35rem;
    font-size:.9rem; color:#0b3a55;
    background: rgba(124,196,237,.18); border:1px solid rgba(124,196,237,.35);
    padding:.45rem .6rem; border-radius:999px;
}

/* 모바일은 위/아래 재정렬: 갤러리 ↑, 카피 ↓) */
/* 모바일 레이아웃 재정의 */
@media (max-width: 768px){
    .hero-polaris{
        display: flex;                  /* grid 대신 flex로 전환 */
        flex-direction: column;
        align-items: stretch;
        grid-template-columns: none;    /* grid 설정 무효화 */
        grid-template-areas: none;

        min-height: auto;              /* 86vh 때문에 눌리는 것 방지 */
        height: auto;
        padding: 104px 16px 32px;
    }

    /* 모바일 갤러리 하나 숨기기 */
    .hero-polaris .hero-gallery .rail:nth-of-type(2) {
        display: none;
    }

    .hero-polaris .hero-gallery{
        order: 2;                      /* 갤러리 아래로 내릴 거면 2 / 위로 올릴 거면 1 */
        width: 100%;
        margin-top: 20px;
    }

    .hero-polaris .hero-copy{
        order: 1;
        width: 100%;
        max-width: 100%;
        overflow: visible;             /* 혹시 상위에서 hidden 먹는 경우 대비 */
    }

    /* 제목/부제/하이라이트 글자 조금 줄여서 말림 방지 */
    .hero-polaris .title-line{
        font-size: clamp(24px, 7vw, 32px);
    }

    .hero-polaris .subtitle{
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .hero-polaris .hero-highlights{
        margin-top: 0.5rem;
    }

    .hero-polaris .hero-highlights li{
        font-size: 0.8rem;
    }

    .hero-polaris .cta-group{
        flex-wrap: wrap;
        gap: 8px;
    }

    .cert-card {
        padding: 3rem 2rem !important;
    }
}

@media (max-width: 380px){
    body {
        font-size: 0.9rem !important;
    }

}


@media (max-width: 1200px){
    .cert-card {
        padding: 3rem 2rem !important;
    }

}

/* 저전력/저가속 모드 배려: 애니메이션 정지 */
@media (prefers-reduced-motion: reduce){
    .hero-polaris .track{ animation-duration: .001s; }
}

@media (max-width: 1255px){

    .hero-polaris .title-line {
        font-size: clamp(32px, 5.2vw, 40px) !important;
    }
}

@media (max-width: 1055px){

    .hero-polaris {
        grid-template-columns: minmax(350px, 1fr) minmax(380px, 460px);
        gap: clamp(24px, 5vw, 56px);
        padding: 110px clamp(20px, 6vw, 64px);
    }
}

/* 포트폴리오 ============*/
/* === Portfolio / Logo Slider === */
.logo-slider {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 1.5rem;
}

.logo-slider .track {
    display: flex;
    gap: clamp(2rem, 4vw, 4rem);
    width: max-content;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.logo-slider .track.left {
    animation-name: slideLeft;
    animation-duration: 42s;
}

.logo-slider .track.right {
    animation-name: slideRight;
    animation-duration: 42s;
}

.logo-slider img {
    max-width: clamp(120px, 12vw, 180px); /* 너무 커지지 않도록 제한 */
    max-height: clamp(60px, 8vw, 100px);  /* 높이만 상한선 */
    height: auto;
    width: auto;
    object-fit: contain;
    padding: clamp(4px, 0.5vw, 8px);
    filter: brightness(0.95) saturate(0) opacity(0.9);
    transition: transform 0.3s ease, filter 0.3s ease;
}


.logo-slider img:hover {
    transform: scale(1.05);
    filter: brightness(1) saturate(1.2);
}

@keyframes slideLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes slideRight {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

@media (max-width: 768px) {
    .logo-slider .track.left,
    .logo-slider .track.right {
        animation-duration: 28s;
        gap: 2rem;
    }
}

#header.header-transparent {
    background: linear-gradient(
            to bottom,
            rgb(2, 132, 199, 0.8) 0%,
            rgba(255, 255, 255, 0.1) 100%
    );
    transition: background 0.3s ease-in-out, backdrop-filter 0.3s;
}
#header.header-scrolled {
    background: var(--maincolor3);
    height: 70px;
    transition: all 0.5s;
}
/* === PC 전용 헤더 그라데이션 === */
@media (min-width: 880px) {
    #header.header-transparent {
        backdrop-filter: blur(6px); /* 살짝 유리 느낌 */
    }
}








.capability-btn {
    width: 100%;
    border-radius: 999px;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    color: #fff;
    transition: all 0.25s ease; /* 스무스한 색 전환 */
}

.capability-btn:hover {
    background-color: #fff !important;
    color: var(--cap-icon-color) !important;
    border-color: var(--cap-icon-color) !important;
}

.capability-card {
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    padding: 30px;
}

.capability-bg-icon {
    position: absolute;
    right: -10px;
    bottom: -10px;
    opacity: 0.18;          /* 약간 투명하게 */
    font-size: 160px;       /* 크게 */
    pointer-events: none;
    z-index: 1;
}

.capability-card .card-body {
    position: relative;
    z-index: 5;
}

.capability-btn {
    width: 100%;
    border-radius: 999px;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    color: #fff;
}

.capability-btn:hover {
    opacity: 0.85;
}


/* 제목/본문 약간 키워주기 */
.cert-title {
    font-size: 2.2rem;
}

.cert-desc {
    font-size: 1.4rem;
    line-height: 1.7;
}

/* 카드 스타일 튜닝 */
.cert-card {
    padding: 3rem 6rem;
    min-height: 350px;
    border-radius: 28px;
}

/* 아이콘 박스 (이미지 쓰려면 background-image로 교체 가능) */
.cert-icon {
    width: 110px;
    height: 110px;
    margin: 0 auto;
    border-radius: 25px;
    /*background: linear-gradient(145deg, #e5f0ff, #f5f1ff);*/
}

/* 반응형에서 살짝 줄이기 */
@media (max-width: 768px) {
    .cert-title {
        font-size: 1.8rem;
    }

    .cert-desc {
        font-size: 0.95rem;
    }
}



/* 이미지 표시 영역 고정 */
.cap-slide-container {
    height: 520px;                  /* 원하는 고정 높이 */
    background: #fff;                /* 이미지 없는 경우 배경 */
    position: relative;
    overflow: hidden;
}

/* 이미지 자체 강제 맞춤 */
.cap-slide-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;               /* 항상 꽉 채움 */
    object-position: center;         /* 중앙 정렬 */
}


.custom-nav {
    position: absolute;              /* 혹시 몰라서 명시 */
    top: 50%;                        /* 세로 가운데 기준 */
    bottom: auto;                    /* Bootstrap 기본값 덮어쓰기 */
    transform: translateY(-50%);     /* 정확히 가운데 정렬 */

    margin: 12px;
    background: rgba(0,0,0,0.35);    /* 반투명 검정 */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;

    transition: background 0.2s ease;
    z-index: 5;                      /* 혹시 이미지/텍스트에 가려질 경우 대비 */
}

.custom-nav:hover {
    background: rgba(0,0,0,0.5);
}

.custom-nav i {
    font-size: 1.8rem;
    color: white;
}