@charset "utf-8";

/* ===========================
   메인 공통
=========================== */
.section {
    padding: 7.5rem 0; /* 120px */
}
.section-head {
    text-align: center;
    margin-bottom: 4.5rem;
}
.section-eyebrow {
    display: inline-block;
    font-size: 1.65rem;       /* 28px */
    font-weight: 300;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}
.section-title {
    font-size: 3.15rem;       /* 50.4px - +5% */
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin-bottom: 1rem;
}
.section-desc {
    font-size: 1.5rem;        /* 24px */
    font-weight: 200;
    color: #282828;
    line-height: 1.6;
}

.btn-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    height: 3.8rem;
    padding: 0 2.10rem;
    border: 1px solid var(--color-line);
    border-radius: 0.5rem;     /* 8px - 살짝 둥근 사각형 */
    background: transparent;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    isolation: isolate;
    transition: color .35s ease, border-color .35s ease;
}
.btn-more::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #1a1a1a;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.65,.05,.2,1);
    z-index: -1;
}
.btn-more:hover {
    color: #fff;
    border-color: #1a1a1a;
}
.btn-more:hover::before {
    transform: scaleX(1);
}
.btn-more .arrow {
    display: inline-flex;
    transition: transform .3s ease;
}
.btn-more .arrow::after { content: '→'; }
.btn-more:hover .arrow { transform: translateX(4px); }

/* ===========================
   HERO
=========================== */
.hero {
    position: relative;
    padding-top: var(--header-height);
    padding-bottom: 0;
    background: #050b2a;
    color: #fff;
    text-align: center;
    overflow: hidden;
    min-height: 53.75rem;     /* 860px */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 배경 이미지 컨테이너 - 비율 유지 + 좌우 페이드
   - position: absolute, hero 영역 안에서만 보임
   - JS로 스크롤 따라 천천히 이동 (parallax) → sticky 효과 */
.hero-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    max-width: 2200px;
    aspect-ratio: 3200 / 1534;
    z-index: 0;
    will-change: transform;
}
.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;           /* 컨테이너에 정확히 맞춤 (비율은 .hero-bg가 보장) */
    object-position: center center;
}
/* 머리 동심원 위 빛 도트 SVG - 이미지와 동일한 비율로 오버레이 */
.hero-orbit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}
/* 좌우 다크 그라데이션 페이드 (이미지 좌우 끝을 자연스럽게 배경에 녹임) */
.hero-bg::before,
.hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12%;
    z-index: 2;
    pointer-events: none;
}
.hero-bg::before {
    left: 0;
    background: linear-gradient(to right, #050b2a 0%, rgba(5, 11, 42, 0) 100%);
}
.hero-bg::after {
    right: 0;
    background: linear-gradient(to left, #050b2a 0%, rgba(5, 11, 42, 0) 100%);
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(3, 18, 56, 0.4);
    z-index: 1;
    pointer-events: none;
}
.hero .inner { position: relative; z-index: 2; }
.hero-title {
    font-size: clamp(2.5rem, 5vw, 5rem);   /* hero만 강조 (80px) */
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 2rem;
    letter-spacing: -0.04em;
    color: #fff;
}
.hero-title .accent {
    display: inline-block;
    font-weight: 700;
    color: #fff;
}
.hero-desc {
    font-size: 1.625rem;       /* 26px */
    line-height: 1.4;
    color: rgba(255,255,255,.85);
    margin-bottom: 3rem;
    font-weight:100;
}
.hero-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-bottom: 0;
    flex-wrap: nowrap;
}
.hero-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 11.0rem;        /* 220px - 두 버튼 동일 너비 */
    height: 3.5rem;             /* 56px */
    padding: 0 2rem;
    border-radius: 0.5rem;      /* 8px - 살짝 둥근 직사각형 */
    font-size: 1.0625rem;       /* 17px */
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    transition: color .35s ease, background .25s ease, border-color .25s ease;
}
.hero-chip .arrow {
    display: inline-flex;
    transition: transform .3s ease;
}
.hero-chip .arrow::after { content: '→'; }
.hero-chip:hover .arrow { transform: translateX(4px); }

/* PoC 문의 - 흰 배경 솔리드 + 좌→우 빠지는 호버 */
.hero-chip.is-white {
    color: var(--color-text);
    background: transparent;
    border: 1px solid #fff;
}
.hero-chip.is-white::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: #fff;
    border-radius: inherit;
    transform: scaleX(1);
    transform-origin: right center;
    transition: transform .45s cubic-bezier(.65,.05,.2,1);
    z-index: -1;
}
.hero-chip.is-white:hover { color: #fff; }
.hero-chip.is-white:hover::before { transform: scaleX(0); }

/* 솔루션 살펴보기 - 다크 반투명 (연하게) */
.hero-chip.is-dark {
    color: #fff;
    background: rgba(10,18,55,.18);
    border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(6px);
}
.hero-chip.is-dark:hover {
    background: rgba(20,32,80,.3);
    border-color: #fff;
}

/* 히어로 가상 키워드 - hero_bg 이미지에 이미 포함되어 있어 숨김 */
.hero-keywords { display: none; }

/* ===========================
   HERO 알약 4개 - 폴리곤 머리 주변에 떠있음
   - .hero-bg 컨테이너(이미지) 안에 배치 → 이미지가 cover로 잘려도 알약은 머리 기준 상대 위치 유지
   - floating + 옅은 호흡 글로우
=========================== */
.hero-pill {
    position: absolute;
    transform: translate(-50%, -50%);   /* 알약 중심이 좌표점에 오도록 */
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: rgba(8, 22, 60, 0.5);
    border: 1px solid rgba(93, 187, 255, 0.35);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
    box-shadow:
        0 0 0 4px rgba(15, 173, 255, 0.04),
        0 0.5rem 1.5rem rgba(0, 30, 80, 0.3);
    animation: heroPillFloat 5s ease-in-out infinite, heroPillGlow 3.5s ease-in-out infinite;
}
@keyframes heroPillFloat {
    0%, 100% { transform: translate(-50%, calc(-50% + 0px)); }
    50%      { transform: translate(-50%, calc(-50% - 0.5rem)); }
}
@keyframes heroPillGlow {
    0%, 100% {
        border-color: rgba(93, 187, 255, 0.35);
        box-shadow:
            0 0 0 4px rgba(15, 173, 255, 0.06),
            0 0.5rem 1.5rem rgba(0, 30, 80, 0.4);
    }
    50% {
        border-color: rgba(93, 187, 255, 0.7);
        box-shadow:
            0 0 0 6px rgba(15, 173, 255, 0.12),
            0 0.5rem 2rem rgba(15, 173, 255, 0.2);
    }
}
.hero-pill-tl { top: 63.8%; left: 34.3%; animation-delay: 0s, 0s; }
.hero-pill-bl { top: 83.6%; left: 36.3%; animation-delay: 1.2s, 0.8s; }
.hero-pill-tr { top: 63.8%; left: 68.4%; animation-delay: 0.6s, 1.6s; }
.hero-pill-br { top: 80.9%; left: 64.4%; animation-delay: 2s, 2.4s; }


/* ===========================
   SOLUTION
=========================== */
.solution {
    background: #fff;
}
.solution-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 4.5rem;
}
.solution-card {
    display: flex;
    flex-direction: column;
    aspect-ratio: 5.4 / 4.6;
    padding: 2.5rem 2.25rem;
    border-radius: 1.25rem;     /* 20px */
    background: #F9FAFD;
    border: 1px solid #F3F3F3;
}
.solution-step {
    display: inline-block;
    align-self: flex-start;
    padding: 0.35rem 0.7rem;
    border-radius: 7px;
    background: rgba(0,139,254,.14);
    color: #008BFE;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-decoration: none;
    margin-bottom: 1.25rem;
}
.solution-card h3 {
    font-size: 1.8rem;        /* 26px */
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.solution-card p {
    font-size: 1.2rem;
    color: #282828;
    font-weight: 200;
    line-height: 1.6;
}
.solution-card .icon {
    align-self: flex-end;
    margin-top: auto;           /* 카드 하단으로 밀어내기 */
    width: 5.0rem;
    height: 5.0rem;
    border-radius: 0.6rem;
    background: #fff url('../images/ico_solution.png') no-repeat center / 1.5rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.06);
}
.solution-more {
    text-align: center;
    margin-top: 4rem;
}

/* ===========================
   SOLUTION DIAGRAM (씽키 중심 방사형)
=========================== */
.solution-diagram { background: #fff; overflow: hidden; position: relative; }
.solution-diagram .section-head { margin-bottom: 1rem; }
.sd-head-cta { margin-top: 3.25rem; }
.solution-diagram .inner { position: relative; z-index: 1; }
/* 하단 거대 워드마크 - 다음 섹션 배경색과 동일, 콘텐츠 뒤로 */
.sd-wordmark {
    position: absolute;
    left: 50%;
    bottom: -1.5vw;
    transform: translateX(-50%);
    font-size: clamp(6.4rem, 19.2vw, 20.8rem);   /* 20% 축소 */
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--color-bg-soft);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}

/* 다이어그램 무대 */
.sd-stage {
    position: relative;
    width: 100%;
    max-width: 70rem;
    margin: 1rem auto 0;
    aspect-ratio: 12 / 7;
}

/* SVG 라인 */
.sd-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.sd-line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 1.5;
    stroke-dasharray: 6 6;
    opacity: 0.3;
    animation: sdDash 30s linear infinite;
}
@keyframes sdDash {
    to { stroke-dashoffset: -480; }
}
.sd-dot { fill: var(--color-primary); }

/* 중앙 캐릭터 영역 */
.sd-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 22rem;
    height: 22rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 텍스트만 + 위 작은 카테고리 라벨 (미니멀, 위계형) */
.sd-center-label {
    position: absolute;
    top: -3.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    z-index: 2;
}
/* 위 작은 카테고리 - CORE + 짧은 양옆 가로선 */
.sd-center-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #8C95A4;
    letter-spacing: 0.18em;
}
.sd-center-cat::before,
.sd-center-cat::after {
    content: '';
    width: 1.25rem;
    height: 1px;
    background: #C5CDD9;
}
/* 메인 이름 - 굵게 */
.sd-center-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
/* 글로우 - 캐릭터 뒤 옅게 */
.sd-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(15, 173, 255, .18) 0%, rgba(15, 173, 255, 0) 60%);
    filter: blur(20px);
    z-index: 0;
    animation: sdBreath 4s ease-in-out infinite;
}
@keyframes sdBreath {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.1); opacity: .8; }
}
/* 원형 궤도 */
.sd-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(15, 173, 255, .18);
    pointer-events: none;
}
.sd-orbit-1 { inset: 0; animation: sdSpin 40s linear infinite; }
.sd-orbit-2 { inset: -2rem; border-color: rgba(15, 173, 255, .1); animation: sdSpin 60s linear infinite reverse; }
@keyframes sdSpin {
    to { transform: rotate(360deg); }
}
/* 캐릭터 본체 */
.sd-thinky {
    position: relative;
    z-index: 1;
    width: 75%;
    height: auto;
    animation: sdFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 1rem 1.5rem rgba(15, 43, 77, .12));
}
@keyframes sdFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1rem); }
}

/* 3개 노드 카드 - 글래스모피즘 (반투명 + blur, 보더는 원래대로) */
.sd-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #EEEEEE;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1rem;
    z-index: 3;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), border-color .3s ease, background .3s ease;
}
.sd-node:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.55);
}
.sd-node-bid { left: 4%;  top: 18%; }
.sd-node-mes { left: 50%; bottom: -3%; transform: translateX(-50%); }
.sd-node-mes:hover { transform: translate(-50%, -4px); }
.sd-node-erp { right: 4%; top: 18%; }

.sd-node-head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
.sd-node-ico {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: rgba(15, 173, 255, .1);
    color: var(--color-primary);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sd-node-ico svg { width: 1.25rem; height: 1.25rem; }

.sd-node-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    line-height: 1.2;
}
.sd-node-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
}
.sd-node-product {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #8C95A4;
    letter-spacing: 0.01em;
}
/* 키워드 칩 */
.sd-node-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding-top: 1rem;
    border-top: 1px solid #F0F2F6;
}
.sd-node-chips li {
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    background: #F4F7FB;
    color: #4A4F5B;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ===========================
   PRODUCT
=========================== */
.product {
    background: var(--color-bg-soft);
}
.product-body {
    display: grid;
    grid-template-columns: 25% 1fr;
    gap: 1.5rem;
    align-items: stretch;
    min-height: 32.2rem;        /* 28rem + 15% */
    margin-bottom: 4.5rem;
}
.product-tabs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}
.product-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding: 1.75rem 1.75rem;
    border-radius: 1.0rem;
    background: transparent;
    border: 1px solid #D4D4D4;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease,
                transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.product-tab:hover {
    border-color: #C5E4FA;
    transform: translateY(-2px);
}
.product-tab.active {
    background: #E9F4FE;
    border-color: #B6DCFA;
}
.product-tab.active h4 { color: #0072CC; }
.product-tab h4 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.7rem;             /* 24px */
    font-weight: 700;
    margin-bottom: 0.625rem;
    color: var(--color-text);
}
.product-tab h4 .badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    background: transparent;
    border: 1px solid #008BFE;
    color: #008BFE;
    font-size: 0.83rem;
    font-weight: 200;
    letter-spacing: .02em;
}
.product-tab p {
    font-size: 1rem;
    font-weight: 300;
    color: #282828;
    line-height: 1.55;
}

.product-visual {
    border-radius: 1.5rem;          /* 24px */
    background-color: #1085EE;       /* 기본(ERP) */
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;
    transition: background-color .4s ease;
}
.product-visual[data-product="erp"] {
    background-color: #1085EE;
    background-image: url('../images/product_visual_erp.png');
    background-position: center;
}
.product-visual[data-product="mes"] {
    background-color: #0FA4E6;
    background-image: url('../images/product_visual_mes.png');
    background-position: center calc(100% + 6.4rem);
    background-size: 88%;
}
.product-visual[data-product="bid"] {
    background-color: #2C72D8;
    background-image: url('../images/product_visual_bid.png');
    background-position: center calc(100% + 5.3rem);
}
.product-more { text-align: center; }

/* ===========================
   FAQ
=========================== */
.faq { background: #fff; }
.faq-list {
    width: 100%;
}
.faq-item {
    border-bottom: 1px solid #EEEEEE;
}
/* 최상단 검은색 2px 라인 - 좌→우로 그려지는 애니메이션 */
.faq-list {
    position: relative;
}
.faq-list::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--color-text);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s cubic-bezier(.22,.61,.36,1);
}
.faq-list.is-in::before { transform: scaleX(1); }
.faq-question {
    width: 100%;
    text-align: left;
    padding: 2.25rem 3rem 2.25rem 0;
    font-size: 1.3125rem;
    font-weight: 500;
    color: var(--color-text);
    position: relative;
    display: block;
    transition: color .25s ease, padding-left .35s ease;
}
.faq-question:hover { color: #0072CC; padding-left: 0.5rem; }
.faq-question::after {
    content: '';
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid var(--color-text);
    border-bottom: 1.5px solid var(--color-text);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .25s;
}
.faq-item.is-open .faq-question::after {
    transform: translateY(-30%) rotate(-135deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .25s ease;
    color: var(--color-text-sub);
    font-size: 1.1875rem;      /* 19px (15 + 4) */
    line-height: 1.7;
}
.faq-item.is-open .faq-answer {
    max-height: 25rem;
    padding: 0 0 2rem;
}

/* ===========================
   CTA
=========================== */
.cta {
    background: linear-gradient(135deg, #020C28 0%, #072B8E 100%);
    color: #fff;
    text-align: center;
    padding: 6.25rem 0;
}
.cta-title {
    font-size: 3.15rem;       /* 50.4px - +5% */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}
.cta-desc {
    font-size: 1.5rem;        /* 24px */
    font-weight: 200;
    color: rgba(255,255,255,.75);
    margin-bottom: 2.25rem;
    line-height: 1.6;
}
/* CTA의 POC 버튼 - hero의 흰 버튼과 동일한 스타일 */
.cta .btn-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 13.75rem;       /* 220px */
    height: 3.5rem;            /* 56px */
    padding: 0 2rem;
    border-radius: 0.5rem;     /* 8px */
    border: 1px solid #fff;
    background: transparent;
    color: var(--color-text);
    font-size: 1.0625rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    transition: color .35s ease;
}
.cta .btn-cta::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: #fff;
    border-radius: inherit;
    transform: scaleX(1);
    transform-origin: right center;
    transition: transform .45s cubic-bezier(.65,.05,.2,1);
    z-index: -1;
}
.cta .btn-cta:hover { color: #fff; }
.cta .btn-cta:hover::before { transform: scaleX(0); }
.cta .btn-cta .arrow {
    display: inline-flex;
    transition: transform .3s ease;
}
.cta .btn-cta .arrow::after { content: '→'; }
.cta .btn-cta:hover .arrow { transform: translateX(4px); }

/* ===========================
   반응형 (5단계: 1400 / 1200 / 1024 / 768 / 480)
=========================== */

/* 와이드 (1400 이하) */
@media (max-width: 1400px) {
    .section { padding: 6.5rem 0; }
    .hero { min-height: 48rem; }
    .solution-card { padding: 2.25rem 2rem; }
}

/* 데스크탑 (1200 이하) */
@media (max-width: 1200px) {
    .section { padding: 6rem 0; }
    .section-head { margin-bottom: 3.5rem; }
    .section-eyebrow { font-size: 1.375rem; }
    .section-title { font-size: 2.75rem; }
    .section-desc { font-size: 1.375rem; }

    .hero { min-height: 44rem; }
    .hero-desc { font-size: 1.5rem; }
    /* 알약 폰트만 살짝 축소 - 위치는 동일 */
    .hero-pill { font-size: 0.875rem; padding: 0.45rem 0.95rem; }

    .solution-list { gap: 1rem; margin-bottom: 3rem; }
    .solution-card { padding: 2rem 1.75rem; aspect-ratio: 5.4 / 5; }
    .solution-card h3 { font-size: 1.625rem; }
    .solution-card p { font-size: 1.0625rem; }

    .product-body { grid-template-columns: 30% 1fr; min-height: 28rem; }
    .product-tab { padding: 1.5rem 1.5rem; }
    .product-tab h4 { font-size: 1.4rem; }

    .faq-question { font-size: 1.1875rem; padding: 2rem 2.5rem 2rem 0; }
    .faq-answer { font-size: 1.0625rem; }

    .cta-title { font-size: 2.75rem; }
    .cta-desc { font-size: 1.375rem; }
}

/* 태블릿 (1024 이하) */
@media (max-width: 1024px) {
    .section { padding: 5rem 0; }
    .section-head { margin-bottom: 3rem; }
    .section-eyebrow { font-size: 1.25rem; }
    .section-title { font-size: 2.375rem; }
    .section-desc { font-size: 1.25rem; }

    .hero { min-height: 38rem; }
    .hero-desc { font-size: 1.25rem; margin-bottom: 2.5rem; }
    .hero-chip { height: 3rem; padding: 0 1.5rem; min-width: 10rem; font-size: 1rem; }

    /* 솔루션: 3컬럼 → 위 1 + 아래 2 (또는 그냥 1열) */
    .solution-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-bottom: 3rem;
    }
    .solution-card { aspect-ratio: 5.4 / 4; padding: 1.75rem 1.5rem; }
    .solution-card:last-child { grid-column: 1 / -1; aspect-ratio: 12 / 4; }
    .solution-card h3 { font-size: 1.5rem; }

    /* 제품: 좌 탭 / 우 비주얼 → 세로 스택 */
    .product-body {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        min-height: auto;
    }
    .product-tabs { height: auto; }
    .product-tab { padding: 1.5rem; flex: 0 1 auto; }
    .product-tab h4 { font-size: 1.25rem; }
    .product-tab p { font-size: 0.9375rem; }
    .product-visual { aspect-ratio: 16/9; }

    .faq-question { font-size: 1.125rem; padding: 1.75rem 2.5rem 1.75rem 0; }

    .cta { padding: 5rem 0; }
    .cta-title { font-size: 2.25rem; }
    .cta-desc { font-size: 1.125rem; }
    .cta .btn-cta { min-width: 11rem; height: 3rem; font-size: 1rem; }

    /* SOLUTION DIAGRAM - 태블릿 비율 조정 */
    .sd-stage { aspect-ratio: 10 / 8; }
    .sd-center { width: 17rem; height: 17rem; }
    .sd-node { padding: 1rem 1.25rem; gap: 0.75rem; }
    .sd-node-bid { left: 0; top: 10%; }
    .sd-node-erp { right: 0; top: 10%; }
    .sd-node-title { font-size: 1.125rem; }
    .sd-node-chips { padding-top: 0.75rem; }
    .sd-node-chips li { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
}

/* 모바일 (768 이하) */
@media (max-width: 768px) {
    .section { padding: 4rem 0; }
    .section-head { margin-bottom: 2.25rem; }
    .section-eyebrow { font-size: 1.375rem; }   /* 1.125 → +22% */
    .section-title { font-size: 2.125rem; }     /* 1.875 → +13% */
    .section-desc { font-size: 1.25rem; }       /* 1.0625 → +18% */

    .hero {
        padding-top: calc(var(--header-height) + 4rem);
        padding-bottom: 4rem;
        min-height: 32rem;
        background-position: center center;
        align-items: flex-end;          /* 콘텐츠 하단 정렬 */
        text-align: center;             /* 가운데 정렬로 복귀 */
    }
    /* 모바일에선 알약 숨김 (카피 우선) */
    .hero-pill { display: none; }
    .hero::before {
        background: rgba(3, 18, 56, 0.7); /* 모바일에선 dim 강화 - 텍스트 가독성 확보 */
    }
    .hero .inner {
        width: 100%;
    }
    .hero-title { font-size: 2.625rem; line-height: 1.3; margin-bottom: 1.5rem; }
    .hero-title br { display: none; }
    .hero-desc { font-size: 1.25rem; margin-bottom: 2.5rem; }
    .hero-desc br { display: none; }
    .hero-actions {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;         /* 버튼 가운데 정렬 */
    }
    .hero-chip {
        height: auto;
        padding: 1.15rem 1.25rem;        /* 상하 키우고 좌우 줄임 */
        min-width: 0;
        font-size: 1rem;
        flex: 1 1 auto;
    }
    /* 솔루션 살펴보기 숨김 - PoC 문의만 노출 */
    .hero-chip.is-dark { display: none; }
    .hero-chip.is-white { flex: 0 1 auto; max-width: 12rem; }

    .solution-list {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-bottom: 2.25rem;
    }
    .solution-card,
    .solution-card:last-child {
        aspect-ratio: auto;
        grid-column: auto;
        padding: 1.75rem 1.5rem;
    }
    .solution-card h3 { font-size: 1.375rem; }
    .solution-card p { font-size: 1rem; min-height: auto; }
    .solution-card .icon { width: 4rem; height: 4rem; margin-top: 1.5rem; }

    /* SOLUTION DIAGRAM - 모바일 세로 스택 */
    .sd-stage {
        aspect-ratio: auto;
        max-width: 100%;
        margin-top: 3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .sd-lines { display: none; }
    .sd-center {
        position: relative;
        left: auto; top: auto;
        transform: none;
        width: 16rem;
        height: 16rem;
        margin-bottom: 1.5rem;
    }
    .sd-center-label { top: -1.75rem; }
    .sd-orbit-2 { inset: -1rem; }
    .sd-node {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100%;
        max-width: 24rem;
        transform: none !important;
    }
    .sd-node-mes:hover { transform: translateY(-4px) !important; }
    .solution-diagram .section-title .sd-em::after {
        width: 0.4rem; height: 0.4rem;
        box-shadow: 0 0 0 3px rgba(15, 173, 255, .15);
    }

    .product-body { gap: 1rem; margin-bottom: 3rem; }
    .product-tabs { gap: 0.625rem; }
    .product-tab { padding: 1.25rem; border-radius: 0.875rem; }
    .product-tab h4 { font-size: 1.125rem; }
    .product-tab h4 .badge { font-size: 0.75rem; padding: 0.1875rem 0.5rem; }
    .product-tab p { font-size: 0.9375rem; }
    .product-visual { border-radius: 1.125rem; }

    .faq-question { font-size: 1rem; padding: 1.5rem 2rem 1.5rem 0; }
    .faq-answer { font-size: 0.9375rem; }
    .faq-item.is-open .faq-answer { padding: 0 0 1.5rem; }

    .btn-more { height: 3.25rem; padding: 0 1.5rem; }

    .cta { padding: 4rem 0; }
    .cta-title { font-size: 1.625rem; }
    .cta-desc { font-size: 1rem; margin-bottom: 1.75rem; }
    .cta .btn-cta { min-width: 10rem; height: 2.875rem; font-size: 0.9375rem; }
}

/* 소형 모바일 (480 이하) */
@media (max-width: 480px) {
    .section { padding: 3.5rem 0; }
    .section-eyebrow { font-size: 1.25rem; }    /* +13% */
    .section-title { font-size: 1.875rem; }     /* +15% */
    .section-desc { font-size: 1.125rem; }      /* +20% */

    .hero-title { font-size: 2.25rem; }
    .hero-desc { font-size: 1.125rem; }
    .hero-actions { flex-direction: column; width: 100%; }
    .hero-chip.is-white { width: 100%; max-width: 18rem; min-width: 0; flex: none; }

    .solution-card { padding: 1.5rem 1.25rem; }
    .solution-card h3 { font-size: 1.25rem; }
    .solution-card .icon { width: 3.25rem; height: 3.25rem; background-size: 1.25rem; }

    .product-tab { padding: 1rem 1.125rem; }

    .cta-title { font-size: 1.375rem; }
    .cta-title br { display: none; }
}