:root {
    --bg-a: #07090f;
    --bg-b: #0c1322;
    --fg: #e6f2ff;
    --muted: #9eb4cc;
    --bg-wt: #ffffff;
}

html {
    /* Prevent initial white flash before the image loads */
    background-color: var(--bg-a);
}

body {
    /* Add a solid color fallback to avoid white background while image loads */
    background: var(--bg-a) url('../images/back.jpg') center / cover no-repeat fixed;
}

/* Prevent background scroll when mobile drawer open */
.no-scroll {
    overflow: hidden;
}

.nova {
    --mx: 0;
    --my: 0;
    position: relative;
    min-height: 100svh;
    color: var(--fg);
    overflow: clip;
    isolation: isolate;
    /*background: url('../images/back.jpg') center / cover no-repeat fixed;*/
}
main#root.nova {
    /*margin-top: -80px;*/
}

.top {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px clamp(16px, 4vw, 48px);
    backdrop-filter: blur(6px) saturate(130%);
}



.hero {
    position: relative;
    z-index: 5;
    padding: clamp(28px, 6vw, 64px);
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
}


.heading {
    font-size: clamp(30px, 6vw, 56px);
    font-weight: 900;
    letter-spacing: -0.015em;
    color: white;
}
.sub {
    margin-top: 12px;
    color: white;
    font-size: clamp(14px, 1.6vw, 18px);
}

.cta {
    margin-top: 22px;
    display: inline-flex;
    gap: 12px;
}

.btn {
    padding: 10px 16px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .2px;
}

.btn.primary {
    background:
            linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 40%),
            linear-gradient(120deg, rgba(64, 190, 255, .10), transparent 60%),
            linear-gradient(300deg, rgba(87, 169, 255, .35), transparent 60%);
    color: var(--fg);
    /*box-shadow: 0 8px 24px rgba(87, 169, 255, .35);*/
    backdrop-filter: blur(4px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, .2);
}

.btn.ghost {
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--fg);
    backdrop-filter: blur(4px) saturate(120%);
}

.chips {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.chips a {
    text-decoration: none;
    color: inherit;
}

.chip {
    padding: 6px 10px;
    border-radius: 999px;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 40%),
            linear-gradient(120deg, rgba(64, 190, 255, .10), transparent 60%),
            linear-gradient(300deg, rgba(87, 169, 255, .35), transparent 60%);
    color: white;
    font-weight: 700;
    letter-spacing: .2px;
    border: 1px solid rgba(255, 255, 255, .32);
}


.card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    /*padding: 22px;*/
    text-decoration: none;
    color: var(--fg);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px) saturate(140%);
    isolation: isolate;
}

/* Swiper slide 자체를 둥글게 만들고, 내부를 클리핑 */
.swiper-showcase .swiper-slide {
    position: relative;           /* 그림자/자식 레이어 기준 */
    border-radius: 18px;          /* 원하는 반경 */
    overflow: hidden;             /* 내용 잘라내기 */
    backface-visibility: hidden;  /* 3D 변환시 경계 깨짐 완화 */
    transform: translateZ(0);     /* 별도 레이어 확보로 클리핑 안정화 */
    clip-path: inset(0 round 18px); /* 일부 브라우저에서 확실한 라운딩 유지 */

}

/* 카드는 슬라이드의 라운딩을 상속받고, 높이를 채움 */
.swiper-showcase .swiper-slide > .card {
    height: 100%;
    border-radius: inherit;
    overflow: hidden; /* 카드 내부도 안전하게 클리핑 */
}

.card .txt {
    margin-top: -5px;
    padding: 22px;
    background:
            linear-gradient(120deg, rgba(64, 190, 255, 1), transparent 60%),
            linear-gradient(180deg, rgba(255, 255, 255, 1), transparent 40%),
            linear-gradient(120deg, rgba(64, 190, 255, 1), transparent 60%),
            linear-gradient(300deg, rgba(87, 169, 255, 1), transparent 60%);
    color: white;
    font-weight: bolder;
}

/*.card img {*/
/*    border-bottom-left-radius: 18px;*/
/*    border-bottom-right-radius: 18px;*/
/*}*/

.card strong {
    font-size: 18px;
    letter-spacing: .2px;

}

.card .desc {
    display: block;
    margin-top: 6px;
    color: white;
    font-size: 14px;
    font-weight: bold;

}


.card:hover {
    transform: translateY(-2px);
}

/* Showcase styles */
.showcase {
    position: relative;
    z-index: 6;
    width: 100%;
    max-width: 1100px; /* Ensure full width on small screens, cap on large */
    margin: clamp(20px, 6vw, 64px) auto;
    margin-top: -3vh;
}

/* Swiper styles for 3D coverflow */
.swiper-showcase .swiper-wrapper {
    align-items: stretch;
    gap: 0;
}

.swiper-showcase .swiper-slide {
    width: clamp(220px, 28vw, 300px);
    margin-right: 0;
}


.swiper-showcase .swiper-pagination-bullet {
    background: rgba(255, 255, 255, .4);
    opacity: 1;
}

.swiper-showcase .swiper-pagination-bullet-active {
    background: rgba(87, 169, 255, .9);
}

.swiper-showcase .swiper-button-next,
.swiper-showcase .swiper-button-prev {
    color: #cfe3ff;
    width: 38px;
    height: 38px;
}

.swiper-showcase .swiper-button-next:hover,
.swiper-showcase .swiper-button-prev:hover {
    color: white;
}



.tile:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .22);
}

.tile:focus-visible {
    outline: 2px solid rgba(87, 169, 255, .6);
    outline-offset: 2px;
}

/* Image background layers */
.tile .bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    transition: transform .6s ease, filter .6s ease;
    filter: saturate(1) brightness(.9) contrast(1.05);
    z-index: 0;
}

.tile:hover .bg {
    transform: scale(1.1);
    filter: saturate(1.05) brightness(1) contrast(1.08);
}

.tile .light {
    content: "";
    position: absolute;
    inset: -30%;
    background: radial-gradient(600px 200px at calc((var(--mx, 0.2) + 0.5) * 100%) 0.2, rgba(87, 169, 255, .18), transparent 60%);
    mix-blend-mode: screen;
    filter: blur(24px);
    opacity: .8;
    z-index: 1;
    transition: opacity .25s ease;
}

.tile:hover .light {
    opacity: 1;
}

.tile .shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(5, 10, 18, .65), rgba(5, 10, 18, .35) 38%, rgba(5, 10, 18, 0) 68%);
}

/* Text overlays */
.tile .title {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 18px;
    z-index: 3;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.tile .arrow {
    position: absolute;
    right: 16px;
    bottom: 18px;
    z-index: 3;
    color: #cfe3ff;
    font-weight: 800;
    font-size: 13px;
    opacity: .95;
    transition: transform .2s ease;
}

.tile:hover .arrow {
    transform: translateX(2px);
}

.bottom {
    position: relative;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 28px 12px;
    color: #88a1bb;
}

.bottom a {
    color: #9bb5d0;
    text-decoration: none;
}

.dot {
    opacity: .6;
}


/*about.html*/
.about {
    max-width: 1200px;
    margin: clamp(24px, 6vw, 72px) auto;
    padding: clamp(24px, 4vw, 56px);
    background: #ffffff;
    color: #0b1728;
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(0,0,0,.25);
    position: relative;
    z-index: 2; /* ensure about is stacked above biz when overlapping */
}
.about-title {
    margin: 0 0 clamp(20px, 3vw, 32px);
    text-align: center;
    font-size: clamp(28px, 6vw, 56px);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: #2f6dff; /* 시안의 파란색 톤 */
}
.about-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(16px, 3vw, 40px);
    align-items: center;
}
.about-photo {
    width: 100%;
    height: auto;
    border-radius: 14px;
    object-fit: cover;
}
.ceo .role {
    display: inline-block;
    margin-left: 6px;
    color: #6b7280; /* gray-500 */
    font-weight: 700;
}
.badge-by {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 9999px;
    background: #10b981; /* green */
    color: #fff;
    font-weight: 800;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "맑은 고딕", sans-serif;
    font-style: italic;
    margin-right: 8px;
    vertical-align: middle;
}
.ceo-name {
    margin: 8px 0 16px;
    font-size: clamp(18px, 3vw, 28px);
    font-weight: 900;
    color: #0f172a; /* slate-900 */
}
.about-desc {
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.85;
    color: #111827; /* gray-900 */
    word-break: keep-all;
}
@media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; }
    .about-title { text-align: left; }
}

/* biz section underlaps the about card */
.biz {
    max-width: 1200px;
    /* pull the biz section upward so it tucks under the about card */
    margin: -36px auto clamp(24px, 6vw, 72px);
    padding: clamp(24px, 4vw, 56px);
    background: #ffffff;
    color: #0b1728;
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(0,0,0,.18);
    position: relative;
    z-index: 1; /* lower than about */
}

/*text 색상코드*/
.text-green {
    color: #9AF3B9;
}

.text-green .fts{
    font-weight: 900;
}
.text-white {
    color: #ffffff;
}


/* about: stacked panels that bring the selected one to front */
.panel-demo {
    margin-top: clamp(20px, 4vw, 40px);
    display: flex;
    justify-content: center;
}

/* Scroll reveal base state */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    will-change: transform, opacity;
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}
.panel-stack {
    position: relative;
    width: min(980px, 92vw);
    height: clamp(300px, 55vw, 560px);
}
.panel-stack .panel {
    position: absolute;
    inset: 0;
    border-radius: 36px;
    background: #0a5670; /* deepest */
    box-shadow: 0 18px 40px rgba(0,0,0,.25);
    transform: translateX(calc(var(--i, 0) * 44px));
    transition: transform .25s ease, box-shadow .25s ease, z-index .15s linear;
    z-index: calc(1 + var(--i, 0));
    cursor: pointer;
    overflow: hidden;
}
.panel-stack .panel:nth-child(2) { background: #0e607c; }
.panel-stack .panel:nth-child(3) { background: #12708f; }
.panel-stack .panel.active {
    z-index: 999;
    transform: translateX(calc(var(--i, 0) * 44px)) scale(1.02);
    box-shadow: 0 26px 60px rgba(0,0,0,.35);
}
.panel-label {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #fff;
    font-weight: 800;
    letter-spacing: .15em;
    font-size: clamp(14px, 2vw, 18px);
    opacity: .96;
    user-select: none;
}


/* Side index (sticky navigation) */
.side-index {
    position: absolute;
    right: 170px;
    top: 300px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 50;
}
.side-index .side-link {
    display: block;
    padding: 10px 14px;
    border-radius: 999px;
    /*background: rgba(9, 83, 228, 0.75);*/
    background:
linear-gradient(90deg, rgba(9, 83, 228, 1), transparent 100%),
linear-gradient(90deg, rgba(9, 83, 228, .45), transparent 100%),
linear-gradient(90deg, rgba(9, 83, 228, .35), transparent 10%);

    color: var(--fg);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .2px;
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(6px) saturate(130%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
    text-align: center;
}
.side-index .side-link:hover,
.side-index .side-link:focus {
    background: rgba(30, 190, 120, 0.15);
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
    outline: none;
    transform: translateX(-2px);
}
/* Active state for current page */
.side-index .side-link.active,
.side-index .side-link[aria-current="page"] {
    background: rgba(30, 190, 120, 0.28);
    box-shadow: 0 8px 18px rgba(0,0,0,0.5);
    transform: translateX(-4px);
    border-color: rgba(255,255,255,0.35);
}

/* Make them look like small stickers on very large screens */
@media (min-width: 1280px) {
    .side-index .side-link {
        border-radius: 14px;
        padding: 10px 16px;
    }
}
/* Hide on small screens to avoid overlap */
@media (max-width: 900px) {
    .side-index { display: none; }
}

/* Mobile navbar (shows only on small screens) */
.mobile-nav {
    position: sticky;
    top: 0;
    z-index: 80;
    display: none; /* default hidden on desktop, enabled via media query */
}
.mobile-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    backdrop-filter: blur(6px) saturate(130%);
    background: linear-gradient(180deg, rgba(7,9,15,0.7), rgba(7,9,15,0.35));
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mobile-nav__brand {
    color: #fff;
    font-weight: 900;
    letter-spacing: .5px;
    text-decoration: none;
}
.mobile-nav__btn {
    width: 42px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

}
.mobile-nav__btn:focus { outline: 2px solid rgba(30,190,120,.6); outline-offset: 2px; }
.mobile-nav__line { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; }

.mobile-nav__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 90;
}
.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(78vw, 320px);
    background: rgba(12,19,34,0.96);
    border-left: 1px solid rgba(255,255,255,0.14);
    box-shadow: -20px 0 40px rgba(0,0,0,0.35);
    z-index: 95;
    display: flex;
    flex-direction: column;
    padding: 18px;
    gap: 6px;
    transform: translateX(0);
}
/* Ensure hidden attribute actually hides elements even if display is set above */
.mobile-drawer[hidden],
.mobile-nav__overlay[hidden] {
    display: none !important;
}
.mobile-drawer__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mobile-drawer__close:focus { outline: 2px solid rgba(30,190,120,.6); outline-offset: 2px; }
.mobile-link {
    display: block;
    padding: 12px 14px;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    font-weight: 800;
}
.mobile-link:hover, .mobile-link:focus { background: rgba(30,190,120,.16); outline: none; }
.mobile-link.active, .mobile-link[aria-current="page"] { background: rgba(30,190,120,.28); border-color: rgba(255,255,255,0.28); }
.mobile-link.contact { background: #0ac26f; color: #222; font-weight: 900; }

@media (max-width: 900px) {
    .mobile-nav { display: block; }
}


/* stacked card look: subtle layered sheets behind the main card */
.stacked {
    /* Tweak these to control the stack look */
    --stack-gap-1: 8px;   /* first sheet offset */
    --stack-gap-2: 16px;  /* second sheet offset */
    --stack-scale-1: 0.994;
    --stack-scale-2: 0.986;
    --stack-shadow-1: 0 14px 32px rgba(0,0,0,.12);
    --stack-shadow-2: 0 18px 46px rgba(0,0,0,.10);
    isolation: isolate; /* contain negative z-index layers */
}
.stacked::before,
.stacked::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #ffffff; /* same as card background */
    will-change: transform;
    z-index: -1; /* behind the main card but above the page */
}
.stacked::before {
    transform: translateY(var(--stack-gap-1)) scale(var(--stack-scale-1));
    box-shadow: var(--stack-shadow-1);
}
.stacked::after {
    transform: translateY(var(--stack-gap-2)) scale(var(--stack-scale-2));
    box-shadow: var(--stack-shadow-2);
}

/* Subtle interaction (respect reduced motion) */
@media (prefers-reduced-motion: no-preference) {
    .stacked,
    .stacked::before,
    .stacked::after { transition: transform .25s ease, box-shadow .25s ease; }
    .stacked:hover::before { transform: translateY(calc(var(--stack-gap-1) + 2px)) scale(calc(var(--stack-scale-1) - .002)); }
    .stacked:hover::after { transform: translateY(calc(var(--stack-gap-2) + 3px)) scale(calc(var(--stack-scale-2) - .003)); }
}

/* Smaller screens: reduce stack depth so it doesn’t look crowded */
@media (max-width: 720px) {
    .stacked { --stack-gap-1: 6px; --stack-gap-2: 10px; }
}
@media (max-width: 520px) {
    .stacked { --stack-gap-1: 4px; --stack-gap-2: 6px; --stack-scale-1: 0.996; --stack-scale-2: 0.992; }
}

@media (min-width: 1200px) and (max-height: 820px) {
    /* Optimize for 1280x800-ish displays: reduce vertical spacing and sizes */
    .hero { padding: 24px clamp(16px, 3vw, 36px); }
    .hero img { max-width: 160px; height: auto; }
    .hero .heading { font-size: 42px; }
    .hero .sub { font-size: 15px; }
    .cta { margin-top: 16px; }
    .chips { margin-top: 10px; }

    /* Tighten card content to fit within shorter view height */
    .card .txt { padding: 16px; }
    .swiper-showcase .card img { height: 180px; width: 100%; object-fit: cover; }

    /* Reduce outer vertical margin of carousel so it fits above the fold */
    .showcase { margin: 20px auto; }
    .about { width: 800px}
}

/* 회사연혁 섹션 */
.about-history {
    margin-top: clamp(24px, 4vw, 48px);
}

.history-title {
    margin: 0 0 clamp(12px, 2vw, 20px);
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 800;
    color: #0f172a; /* slate-900 */
}

.history-figure {
    margin: 0; /* 브라우저 기본 마진 제거 */
}

/* 핵심: 이미지가 부모 너비를 넘지 않게, 반응형으로 */
.history-img {
    display: block;            /* inline 간격 제거 */
    width: 100%;               /* 부모 너비에 맞춤 */
    max-width: 100%;           /* overflow 방지 */
    height: auto;              /* 비율 유지 */
    border-radius: 12px;       /* about 스타일과 톤 맞춤 */
    object-fit: contain;       /* 원본 비율 보존 */
}

/* 배경 혹은 카드처럼 보이게 하고 싶다면(선택) */
.about-history .history-figure {
    background: #f8fafc;       /* 아주 옅은 배경 */
    border: 1px solid #e5e7eb; /* very light border */
    border-radius: 14px;
    padding: clamp(8px, 2vw, 16px);
}

/* 작은 화면 최적화 */
@media (max-width: 900px) {
    .about-history {
        margin-top: clamp(20px, 5vw, 32px);
    }
    .history-title {
        font-size: clamp(18px, 5vw, 24px);
    }
}


/* Vision 전용 최소 보강 */
.section-title {
    margin: 8px 0 16px;
    font-size: clamp(20px, 3.5vw, 28px);
    font-weight: 900;
    color: #0f172a;
}

/* 오시는길(visit) 섹션 */
.visit {
    margin: clamp(24px, 6vw, 72px) auto 0;
    max-width: 1200px;
    background: #ffffff;
    color: #0b1728;
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(0,0,0,.18);
    padding: clamp(20px, 4vw, 40px);
}
.visit-title {
    margin: 0 0 clamp(16px, 3vw, 24px);
    font-size: clamp(22px, 4.5vw, 34px);
    font-weight: 900;
    letter-spacing: -0.01em;
    color: #2f6dff;
}
.visit-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(16px, 3vw, 32px);
    align-items: start;
}
.visit-company {
    margin: 0 0 6px;
    font-weight: 900;
    font-size: clamp(16px, 2.6vw, 20px);
}
.visit-address {
    margin: 0 0 14px;
    font-style: normal; /* address 기본 이탤릭 제거 */
    color: #111827;
    line-height: 1.7;
}
.visit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.visit-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;
}
.visit-label {
    font-weight: 800;
    color: #0b1728;
    white-space: nowrap;
}
.visit-link {
    color: #2563eb;
    text-decoration: none;
}
.visit-link:hover { text-decoration: underline; }

.visit-map {
    margin: 0;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}
.visit-map img { display: block; width: 100%; height: auto; }

.visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

@media (max-width: 900px) {
    .visit-grid { grid-template-columns: 1fr; }
}

/* 3열 카드 (모바일 1열) */
.vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 2.5vw, 20px);
}
.vision-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: clamp(12px, 2.5vw, 18px);
    margin-top: 20px;
}
.vision-card-title {
    margin: 0 0 8px;
    font-size: clamp(16px, 2.8vw, 20px);
    font-weight: 800;
    color: #111827;
}
.vision-card-desc { color: #374151; line-height: 1.7; }

/* 핵심가치 4열 (모바일 2열) */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 2.5vw, 20px);
}
.pillar {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: clamp(12px, 2.5vw, 18px);
}
.pillar-title { margin: 0 0 6px; font-weight: 800; color: #0b1728; }
.pillar-desc { color: #425466; }

/* 전략리스트 */
.strategy-list { display: grid; gap: 12px; }
.strategy-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
}
.strategy-bullet {
    width: 36px; height: 36px; border-radius: 999px;
    display: grid; place-items: center;
    background: #2f6dff; color: white; font-weight: 900;
}
.strategy-title { margin: 2px 0 4px; font-weight: 800; }
.strategy-desc { color: #374151; }

/* KPI 카드 4열 (모바일 2열) */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 2.5vw, 20px);
}
.kpi { text-align: center; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; }
.kpi-value { font-size: clamp(20px, 4vw, 28px); font-weight: 900; color: #2f6dff; }
.kpi-label { color: #425466; margin-top: 4px; }

/* 로드맵 */
.roadmap { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.roadmap-step { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; }
.roadmap-title { margin: 0 0 6px; font-weight: 800; }
.roadmap-desc { color: #374151; }

/* 반응형 */
@media (max-width: 1100px) {
    .pillars-grid { grid-template-columns: repeat(2, 1fr); }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .vision-grid { grid-template-columns: 1fr; }
}


/* Business - 세부 서비스 구성 */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 2.5vw, 20px);
    margin-top: clamp(12px, 2vw, 16px);
}
.svc-card {
    background: linear-gradient(135deg, #f1f5f9 0%, #eef2ff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: clamp(14px, 2.5vw, 20px);
}
.svc-title {
    margin: 0 0 10px;
    font-size: clamp(18px, 3.2vw, 22px);
    font-weight: 900;
    color: #1d4ed8; /* 블루 톤 */
}
.svc-list {
    margin: 0;
    padding-left: 18px; /* 기본 불릿 들여쓰기 */
    display: grid;
    gap: 8px;
    color: #1f2937;
}
.svc-list li {
    list-style: disc; /* 점 불릿 */
    line-height: 1.7;
}

/* 반응형 브레이크포인트 */
@media (max-width: 1100px) {
    .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .svc-grid { grid-template-columns: 1fr; }
}

/* VAN page minimal styles */
.van-intro { margin: 8px 0 18px; color:#334155; }
.van-sections { display:grid; gap: clamp(12px, 2.5vw, 20px); grid-template-columns: 1fr; margin-top: 6px; }
.van-card { background:#f8fafc; border:1px solid #e5e7eb; border-radius:14px; padding: clamp(12px, 2.5vw, 18px); }
.van-card-title { margin:0 0 8px; font-size: clamp(18px, 3vw, 22px); font-weight: 900; color:#1d4ed8; }
.van-note { margin: 0 0 8px; color:#475569; }
.van-list { margin:0; padding:0; display:grid; gap:8px; }
.van-list li { list-style:none; position:relative; padding-left:18px; line-height:1.7; color:#1f2937; }
.van-list li::before { content:""; position:absolute; left:0; top:.7em; width:8px; height:8px; border-radius:999px; background:#60a5fa; }
@media (min-width: 980px) { .van-sections { grid-template-columns: repeat(3, 1fr); } }


/* 솔류션 css*/
/* Scoped styles for solution page only */
.sltn {
    max-width: 1200px;
    margin: clamp(24px, 6vw, 72px) auto;
    padding: clamp(24px, 4vw, 56px);
    /*box-sizing: border-box;*/
    background: #ffffff;
    color: #0b1728;
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(0,0,0,.25);
    position: relative;
    z-index: 2; /* ensure about is stacked above biz when overlapping */
}

.sltn-title {
    margin: 0 0 clamp(20px, 3vw, 32px);
    text-align: center;
    font-size: clamp(28px, 6vw, 56px);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: #2f6dff; /* 시안의 파란색 톤 */
}
.sltn-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 26px clamp(16px, 3vw, 28px);
    margin-top: 20px;
}

.sltn-card-in-icon {
    display: flex;
    justify-content: center;
    align-items: center; /* proper vertical centering */
}

.sltn-card-in-icon img{
    height: clamp(72px, 11vw, 150px);
    width: auto;
    max-width: 100%;
}
@media (min-width: 640px){
    .sltn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px){
    .sltn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) and (max-height: 820px) {
    .sltn {
        width: 800px;
    }
}
.sltn-item {
    background: #ffffff; /* white card */
    border: 1px solid #e5e7eb; /* light border like business svc-card */
    border-radius: 16px;
    padding: 22px 22px 20px;
    backdrop-filter: none; /* remove glass */
    min-height: 240px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    color: #1f2937; /* dark text in card */
}
.sltn-item:hover {
    transform: translateY(-2px);
    border-color: #d1d5db;
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.sltn-icon {
    width: 72px; height: 72px;
    color: #0ac26f; /* icon stroke/fill */
    margin: 8px 0 2px;
}
.sltn-title {
    font-size: 20px;
    font-weight: 800;
    color: #111827; /* dark title for white card */
    margin: 8px 0 8px;
}
.sltn-detail{
    margin-top: 20px;
}
.sltn-desc { color: #374151; opacity: .95; line-height: 1.7; font-size: 14px; }
.text-green { color: #0ac26f; }

/* ==========================
   CCTV section scoped styles
   페이지 내 다른 솔루션 카드에 영향 없이 #cctv 하위만 커스터마이징
   ========================== */
#did .sltn-grid {
    gap: clamp(18px, 3vw, 28px);
}

/* DID 카드 이미지: 고정 비율 유지 + 반응형 높이 */
#did .sltn-item img {
    width: 100%;
    aspect-ratio: 16 / 9; /* 스크린샷과 유사한 와이드 비율 */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    background: #f3f4f6; /* 로딩 시 깜박임 완화 */
}

/* DID 타이틀: 좌측 정렬, 그린 컬러 */
#did .sltn-title {
    text-align: left;
    color: #3bd18a; /* 브랜드 그린 */
    font-size: clamp(18px, 2.4vw, 22px);
    font-weight: 800;
    margin: 14px 0 8px;
}

/* DID 본문 설명: 가독성 향상 */
#did .sltn-desc {
    font-size: clamp(14px, 2vw, 15px);
    line-height: 1.75;
    color: #334155; /* 좀 더 진한 slate 톤 */
    margin: 0;
}

/* DID 카드 자체 여백/터치피드백 */
#did .sltn-item {
    padding: clamp(16px, 3vw, 22px);
    transition: transform .18s ease, box-shadow .18s ease;
}
#did .sltn-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0,0,0,.10);
}

/* DID: 대화면에서 4열 구성 */
@media (min-width: 1100px) {
    #did .sltn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 모바일 단일열에서 이미지와 텍스트 사이 간격 최적화 */
@media (max-width: 640px) {
    #did .sltn-item { grid-template-rows: auto auto 1fr; }
    #did .sltn-title { margin-top: 12px; }
}

#cctv .sltn-grid {
    gap: clamp(18px, 3vw, 28px);
}

/* 카드 이미지: 고정 비율 유지 + 반응형 높이 */
#cctv .sltn-item img {
    width: 100%;
    aspect-ratio: 16 / 9; /* 스크린샷과 유사한 와이드 비율 */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    background: #f3f4f6; /* 로딩 시 깜박임 완화 */
}

/* 타이틀: 좌측 정렬, 컬러/크기 보정 */
#cctv .sltn-title {
    text-align: left;
    color: #3bd18a; /* 브랜드 그린 */
    font-size: clamp(18px, 2.4vw, 22px);
    font-weight: 800;
    margin: 14px 0 8px;
}

/* 본문 설명: 가독성 향상 */
#cctv .sltn-desc {
    font-size: clamp(14px, 2vw, 15px);
    line-height: 1.75;
    color: #334155; /* 좀 더 진한 slate 톤 */
    margin: 0;
}

/* 카드 자체 여백/터치피드백 */
#cctv .sltn-item {
    padding: clamp(16px, 3vw, 22px);
    transition: transform .18s ease, box-shadow .18s ease;
}
#cctv .sltn-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0,0,0,.10);
}

/* 모바일 단일열에서 이미지와 텍스트 사이 간격 최적화 */
@media (max-width: 640px) {
    #cctv .sltn-item { grid-template-rows: auto auto 1fr; }
    #cctv .sltn-title { margin-top: 12px; }
}

/* =========================
   Contact Us (contantus) styles
   Moved from contantus.html inline <style>
   ========================= */
.container { max-width: 720px; margin: 40px auto; padding: 20px; background: #ffffffaa; border-radius: 12px; }
.field { margin-bottom: 16px; }
label { display: block; font-weight: 600; margin-bottom: 8px; }
input[type="text"], textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #d0d7de; font-size: 15px; box-sizing: border-box; }
textarea { height: 220px; resize: vertical; }
.actions { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.btn { padding: 10px 18px; font-weight: 700; border-radius: 8px; border: none; cursor: pointer; }
.btn-cancel { background: #e53935; color: #fff; }
.btn-submit { margin-left: auto; background: #1976d2; color: #fff; }
.msg { margin-bottom: 12px; padding: 10px 12px; border-radius: 8px; }
.msg.ok { background: #e3f2fd; color: #0d47a1; }
.msg.err { background: #ffebee; color: #b71c1c; }

/* Loading overlay - prettier glass look */
.loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    /* darker, brand-friendly dim with glass blur */
    background: rgba(7, 9, 15, 0.55);
    backdrop-filter: blur(6px) saturate(125%);
    -webkit-backdrop-filter: blur(6px) saturate(125%);
    z-index: 9999;
    /* center + vertical stack */
    display: none; /* JS toggles to flex */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    /* a11y */
    text-align: center;
}

/* Modern gradient ring spinner */
.spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* conic gradient ring */
    background:
        conic-gradient(from 0deg,
            rgba(59, 209, 138, 1) 0deg,
            rgba(64, 190, 255, 1) 120deg,
            rgba(147, 112, 219, 1) 240deg,
            rgba(59, 209, 138, 1) 360deg);
    -webkit-mask:
        radial-gradient(farthest-side, #0000 60%, #000 61%);
    mask:
        radial-gradient(farthest-side, #0000 60%, #000 61%);
    animation: spin 0.9s linear infinite;
    box-shadow: 0 0 24px rgba(64, 190, 255, .25);
}

/* fallback for very old browsers (border spinner) */
@supports not (background: conic-gradient(red, blue)) {
    .spinner {
        background: none;
        width: 42px;
        height: 42px;
        border: 4px solid #cfd8dc;
        border-top-color: #3bd18a;
        border-radius: 50%;
    }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Loading text styling */
.loading-overlay h5 {
    margin: 0;
    color: #f5f9ff;
    font-size: clamp(14px, 2.4vw, 16px);
    font-weight: 800;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    animation: blink-soft 1.6s ease-in-out infinite;
}

@keyframes blink-soft {
    0%, 100% { opacity: .85 }
    50% { opacity: 1 }
}

/* File input enhancements */
input[type="file"] {
    display: block;
    width: 100%;
    padding: 10px 12px; /* space around the filename */
    border: 1px solid #d0d7de;
    border-radius: 10px;
    background: #fff;
    color: #263238;
    font-size: 14px;
    box-sizing: border-box;
}

/* Modern browsers */
input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: #1976d2;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease, transform .06s ease;
}
input[type="file"]:hover::file-selector-button { background: #125aa0; }
input[type="file"]:active::file-selector-button { transform: translateY(1px); }

/* Safari/legacy webkit */
input[type="file"]::-webkit-file-upload-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: #1976d2;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease, transform .06s ease;
}
input[type="file"]:hover::-webkit-file-upload-button { background: #125aa0; }
input[type="file"]:active::-webkit-file-upload-button { transform: translateY(1px); }

input[type="file"]:focus-visible {
    outline: 3px solid rgba(25, 118, 210, 0.35);
    outline-offset: 2px;
}

.file-hint { margin-top: 6px; font-size: 13px; color: #546e7a; }
/* 파일 합계 표시 */
.file-total {
    margin-top: 8px;
    font-size: 13px;
    color: #0d47a1; /* ok 메시지 톤과 조화 */
}