/* ==========================================================================
   0. 디자인 시스템 변수 등록 (:root) & 전체 초기화 (Reset)
   ========================================================================== */
html {
    font-size: 16px; 
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-break: keep-all;
}

a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}

svg {
    display: block;
}
svg use {
    pointer-events: none;
}

:root {
    /* --- 색상 팔레트 토큰 --- */
    --CN-99: #F7F7F8FF;
    --CN-98: #F4F4F5FF;
    --CN-98-10: #F4F4F51A;
    --CN-97: #EAEBECFF;
    --CN-96: #E1E2E4FF;
    --CN-95: #DBDCDFFF;
    --CN-90: #C2C4C8FF;
    --CN-80: #AEB0B6FF;
    --CN-70: #989BA2FF;
    --CN-60: #878A93FF;
    --CN-50: #70737CFF;
    --CN-40: #5A5C63FF;
    --CN-30: #46474CFF;
    --CN-25: #37383CFF;
    --CN-23: #333438FF;
    --CN-22: #2E2F33FF;
    --CN-20: #292A2DFF;
    --CN-17: #212225FF;
    --CN-15: #1B1C1EFF;
    --CN-10: #171719FF;
    --CN-7: #141415FF;
    --CN-5: #0F0F10FF;

    --brand-white: #F8F9FAFF;
    --brand-black: #010203FF;
    --brand-primary: #FF4E0FFF;
    --brand-light-orange: #FEEDEBFF;
    --brand-light-blue: #D2EFFFFF;
    
    --status-success: #00FD54FF;
    --status-info: #1933FCFF;
    --status-warning: #FFD900FF;
    --status-critical: #FF0048FF;
    --status-offline: #4D4E4FFF;
    
    --bg-base: var(--CN-5);
    --bg-header: var(--CN-10);
    --bg-input: var(--CN-10);
    --bg-highlight-20: #FF004833;
    
    --text-primary: var(--CN-97);
    --text-normal: var(--CN-98);
    --text-sub: var(--CN-96);
    --text-disabled: var(--CN-60);
    
    --border-default: var(--CN-30);
    --border-subtle: var(--CN-60);
    --border-active: var(--brand-primary);
    
    --icon-primary: var(--text-primary);
    --icon-subtle: var(--text-disabled);
    --icon-active: var(--brand-primary);
    
    --bg-hover: var(--CN-98-10);
    
    --pure-white: #FFFFFFFF;
    --light-divider: var(--CN-98);
    --button-circle-bg: var(--CN-98);
    --card-border-color: var(--CN-90);

    /* --- 타이포그래피 토큰 --- */
    --font-size-52: 3.25rem;         
    --font-size-33: 2.0625rem;       
    --font-size-24: 1.5rem;          
    --font-size-18: 1.125rem;        
    --font-size-base: 1rem;          
    --font-size-28: 1.75rem; 
    
    --font-weight-bold: 700;
    --font-weight-semibold: 600;     
    --font-weight-medium: 500;
    --font-weight-regular: 400;
    --font-weight-light: 300;

    /* 💡 개선: 하드코딩되어 파편화되었던 Z-index 계층 체계화 */
    --z-base: 1;
    --z-hero-display: 2;
    --z-hero-text: 3;
    --z-wave-top: 10;
    --z-gnb: 990;
    --z-header: 1000;
    --z-hamburger: 1010;
}

/* 💡 개선: html과 body에 분산되어 있던 중복 가로스크롤 방지 속성 통합 */
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background-color: var(--pure-white);
    color: var(--CN-20);
    padding-top: 4rem; 
}

/* ==========================================================================
   1. 글로벌 컴포넌트 클래스 (Typography & Button Components)
   ========================================================================== */
.container {
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; 
    width: 100%;
    margin-bottom: 3.75rem; 
    text-align: center;
}

.section-title {
    align-self: stretch;
    color: var(--brand-primary);
    font-size: var(--font-size-52);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: normal;
    margin: 0; 
}

.section-subtitle {
    align-self: stretch;
    color: var(--brand-black);
    font-size: var(--font-size-24);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: normal;
    margin: 0;
}

.section-subtitle.type-dark {
    color: var(--brand-white);
}

/* [모듈] 글로벌 액션 버튼 컴포넌트 */
.btn-action {
    --btn-bg: var(--brand-black);
    --btn-border: 0.0625rem solid transparent; 
    --text-color: var(--brand-white);
    --circle-bg: #F5F5F5; 
    --arrow-color: var(--brand-black);
    --hover-bg: var(--CN-25);
    --hover-border: 0.0625rem solid transparent;

    display: flex;
    width: 100%;
    height: 4.375rem; 
    padding: 0.75rem 1.25rem 0.75rem 2.5rem; 
    justify-content: space-between;
    align-items: center;
    border-radius: 6.25rem; 
    text-decoration: none;
    background: var(--btn-bg);
    border: var(--btn-border);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 auto;
}

.btn-action:hover {
    background: var(--brand-primary);
    border: var(--hover-border);
}

.btn-action .btn-text {
    color: var(--text-color);
    text-align: center;
    font-size: var(--font-size-24); 
    font-weight: var(--font-weight-bold); 
    line-height: 100%; 
    letter-spacing: 0.0085rem; 
}

.btn-action .btn-circle {
    display: flex;
    width: 3.375rem; 
    padding: 0.0625rem 0; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem; 
    flex-shrink: 0;
    align-self: stretch; 
    border-radius: 3.125rem; 
    background: var(--circle-bg);
    color: var(--arrow-color); 
    transition: all 0.25s ease;
}

.btn-action .btn-circle svg {
    width: 2.375rem; 
    height: 1.098rem; 
    object-fit: contain;
}

/* --- 사이즈 제어 모디파이어 --- */
.btn-action.size-md { max-width: 16.875rem; } 
.btn-action.size-lg { max-width: 27.375rem; } 

.btn-action.mod-outline-orange {
    --btn-border: 0.0625rem solid var(--brand-white);
    --hover-bg: var(--CN-15);
    --hover-border: 0.0625rem solid var(--brand-primary);
    --circle-bg: var(--brand-white); 
    --arrow-color: var(--brand-black); 
}

/* ==========================================================================
   2. 상단 내비게이션 영역 (site-header)
   ========================================================================== */
.site-header {
    width: 100%;
    padding: 1rem 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-header); /* 💡 개선: 변수 적용 */
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); 
}

.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.logo img {
    display: block;
    height: 3rem;
}
.logo-split {
    display: flex;          
    align-items: center;    
    gap: 0.5rem;            
}

.gnb {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.gnb a {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    text-decoration: none;
    color: var(--CN-20);
    font-size: var(--font-size-24);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 100%;
    letter-spacing: 0.0086rem;
    transition: color 0.2s ease;
}

.gnb a:hover {
    color: var(--brand-primary);
}

.gnb a .icon-arrow {
    width: 1.875rem;
    height: 1.875rem;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* ==========================================================================
   3. 메인 히어로 영역 (section-hero)
   ========================================================================== */
.section-hero {
    width: 100%;
    min-height: 100vh; 
    padding: 10rem 0; 
    background-color: var(--pure-white);
    position: relative;
    overflow: hidden;
}

.hero-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.hero-title-part .btn-action {
    margin-top: 4rem; 
}

.deco-wave {
    position: absolute;
    z-index: var(--z-base); /* 💡 개선: 변수 적용 */
    pointer-events: none;
    max-width: 100%;
}

.wave-1 { width: 18.526rem; top: 26.75rem; left: -17.1875rem; z-index: var(--z-wave-top); } /* 💡 개선: 변수 적용 */
.wave-2 { width: 26.988rem; top: 6.5625rem; right: -14.925rem; }
.wave-3 { width: 18.526rem; top: 39.5625rem; right: -14.525rem; z-index: var(--z-wave-top); } /* 💡 개선: 변수 적용 */

.hero-title-part {
    display: flex;
    width: 100%;
    padding: 0 0 3.5rem 0;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    align-self: stretch;
    z-index: var(--z-hero-text); /* 💡 개선: 변수 적용 */
}

.hero-title {
    color: var(--brand-primary);
    font-size: var(--font-size-52);
    font-weight: var(--font-weight-bold);
    text-align: center;
    line-height: normal;
}

.hero-word-logo {
    width: 40.9375rem;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.hero-subtitle {
    color: var(--brand-black);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-medium);
    text-align: center;
    line-height: normal;
}

.hero-display-area {
    position: relative;
    width: 100%;
    z-index: var(--z-hero-display); /* 💡 개선: 변수 적용 */
}

.dashboard-window {
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 0.0625rem solid var(--brand-black); 
    background: var(--pure-white); 
    border-radius: 0.5rem; 
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); 
}

.dashboard-frame-header {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: stretch;
    border-bottom: 0.0625rem solid var(--brand-black); 
}

.frame-close-btn {
    display: flex;
    padding: 0.375rem 0.4375rem; 
    align-items: center;
    gap: 0.625rem;
    border-left: 0.0625rem solid var(--brand-black); 
    background: transparent;
    border-top: none;
    border-right: none;
    border-bottom: none;
    cursor: pointer;
}

.dashboard-gif {
    display: block;
    width: 100%;
    height: auto; 
    object-fit: contain;
    background: var(--brand-black); 
}

.char-meerkat-flag {
    position: absolute;
    width: 21.656rem;         
    left: 90%;        
    top: 60%;         
    z-index: var(--z-wave-top); /* 💡 개선: 변수 적용 */
}

/* ==========================================================================
   4. 브랜드 개념 스토리 영역 (section-brand-story)
   ========================================================================== */
.section-brand-story {
    width: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--pure-white);
    padding: 10rem 0;
}

.brand-story-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.story-formula-container {
    display: flex;
    width: 100%;
    min-height: 22.875rem; 
    padding: 2.5rem 0;          
    justify-content: center;
    align-items: center;        
    gap: 1.875rem;              
    align-self: stretch;
}

.formula-card {
    display: flex;
    width: 14.8125rem;          
    height: 100%;               
    flex-direction: column;
    justify-content: center;  
    align-items: center;
    gap: 1.875rem;              
}

.formula-card.card-result {
    width: auto;
    justify-content: center;
}

.text-mark {
    font-size: 8rem; 
    font-weight: 200; 
    color: var(--brand-primary); 
    line-height: 1;
}

.graphic-flow-wave {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.875rem;
    width: 100%;
    height: auto;
}

.graphic-flow-wave img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.icon-meerkat-face {
    width: 8rem;
    height: 7.6875rem;
    aspect-ratio: 128 / 123;
    object-fit: contain;
}

.graphic-combined-logo img {
    height: auto;
    width:  100%;
    object-fit: contain;
}

.formula-text {
    min-height: 3rem; 
    align-self: stretch;
    color: var(--brand-black);
    text-align: center;
    font-size: var(--font-size-33);
    font-weight: var(--font-weight-light);
    line-height: normal;
}

.highlight-text {
    font-weight: var(--font-weight-bold);
    color: var(--brand-black);
}

/* ==========================================================================
   5. 공공기관 및 조달청 포털 영역 (section-public-portal)
   ========================================================================== */
.section-public-portal {
    width: 100%;
    align-self: stretch;
    background-color: var(--brand-black);
    padding: 7.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.portal-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portal-search-trigger-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    align-self: stretch;
    margin-bottom: 2.5rem;
    cursor: pointer;            
}

.portal-search-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 2.5rem; 
}

.g2b-logo img {
    height: 4.3125rem; 
    object-fit: contain;
}

.portal-search-mockup {
    display: flex;
    width: 100%;
    max-width: 49.5625rem; 
    height: 4.3125rem;          
    padding: 0 2.5rem;          
    justify-content: space-between;
    align-items: center;
    border: 0.1875rem solid var(--CN-40); 
    background-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    
    /* 💡 평상시 테두리 깜빡임 애니메이션 (1.5초 주기 무한 반복) */
    animation: border-flash 1.5s infinite ease-in-out;
}

/* 💡 마우스를 올리거나 클릭해서 열렸을(active) 때는 깜빡임을 멈추고 주황색 고정 */
.portal-search-trigger-box:hover .portal-search-mockup,
.portal-search-trigger-box.active .portal-search-mockup {
    animation: none; 
    border-color: var(--brand-primary);
    background-color: var(--CN-5);
}

.mockup-label {
    color: var(--brand-white);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-medium);
}

.mockup-input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mockup-keyword {
    color: var(--brand-primary);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-bold);
}

.icon-search {
    width: 1.875rem;
    height: 1.875rem;
    object-fit: contain;
}

.portal-search-dropdown {
    width: 100%;
    max-height: 0;             
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                visibility 0.3s ease;
}

.portal-search-trigger-box.active .portal-search-dropdown {
    max-height: 60rem; 
    opacity: 1;
    visibility: visible;
}

.dropdown-inner-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: stretch;    
}

.product-visual-side {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
}

.img-product-box {
    height: 18rem;              
    width: auto;
    object-fit: contain;
}

.product-info-spec-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 49.5625rem; 
    padding: 1.25rem 2.5rem;    
    gap: 1rem;                
    background: var(--CN-15);   
    border-radius: 0 0 1.5625rem 1.5625rem; 
}

.spec-main-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap; 
    gap: 0.625rem;              
    align-self: stretch;
    border-bottom: 0.0625rem solid var(--CN-30); 
    padding-bottom: 0.75rem;
}

.spec-main-label {
    color: var(--brand-white);
    font-size: var(--font-size-28); 
    font-weight: var(--font-weight-bold); 
}

.spec-id-number {
    color: var(--brand-white);
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-light); 
    margin-left: 0.5rem;
}

.spec-table-rows {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;               
    align-self: stretch;
}

.spec-item-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
}

.spec-label {
    width: 6.25rem;             
    color: var(--CN-70);        
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-light); 
    flex-shrink: 0;
}

.spec-value {
    color: var(--brand-white);
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-light);
    line-height: 1.4;           
}

.portal-accordion-container {
    display: flex;
    width: 100%;
    margin-top: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
}

/* ==========================================================================
   조달청 검색창 타이핑 & 테두리 깜빡임 통합 모션
   ========================================================================== */
.typing-wrapper {
    display: flex;
    align-items: center;
}

.typing-cursor {
    display: inline-block;
    width: 0.15rem;           
    height: 1.4rem;           
    background-color: var(--brand-white); 
    margin-left: 0.3rem;      
    animation: cursor-blink 0.8s step-end infinite; 
}

/* [애니메이션] 커서 깜빡임 */
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* [애니메이션] 테두리 회색 <-> 주황색 은은한 플래시 */
@keyframes border-flash {
    0%, 100% {
        border-color: var(--CN-40);
        box-shadow: none;
    }
    50% {
        border-color: var(--brand-primary);
        box-shadow: 0 0 12px rgba(255, 78, 15, 0.2); /* 주황색일 때 은은한 불빛 효과 */
    }
}

/* ==========================================================================
   6. 파트너사 로고 및 고객 후기 영역 (section-partners)
   ========================================================================== */
.section-partners {
    width: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--pure-white);
    padding: 10rem 0; 
}

.partners-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.partners-content-box {
    display: flex;
    padding-top: 2.5rem;       
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;                
    align-self: stretch;
}

.partner-logos-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.25rem;               
    align-self: stretch;
    flex-wrap: wrap;            
}

.partner-logos-bar img {
    height: 2.5rem;             
    object-fit: contain;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 2.5rem;                
    width: 100%;
}

.review-card {
    display: flex;
    padding: 2.75rem;           
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    background-color: var(--pure-white);
    border: 0.0625rem solid var(--card-border-color); 
    border-radius: 0.5rem;      
}

.card-badge {
    color: var(--brand-primary);
    font-size: var(--font-size-18);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 100%;
    letter-spacing: 0.0064rem;  
    margin-bottom: 1.5rem;      
}

.card-body {
    color: var(--brand-black);
    font-size: var(--font-size-24);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;           
    letter-spacing: 0.0086rem;  
    flex: 1 0 0;
}

/* ==========================================================================
   7. 통합 기능 관리 마스터 영역
   ========================================================================== */
.section-features-management {
    width: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--brand-white);
    padding: 10rem 0; 
}

.features-management-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-features-container {
    display: flex;
    min-height: 47.8125rem; 
    justify-content: space-between;
    align-items: center; 
    align-self: stretch;
}

.sub-features-container {
    display: flex;
    min-height: 31.1875rem; 
    justify-content: space-between;
    align-items: center; 
    align-self: stretch;
    margin-top: 4rem; 
}

.features-sidebar-black,
.features-sidebar-gray {
    display: flex;
    flex-direction: column;
    justify-content: center;  
    align-items: stretch; 
    gap: 1.5rem; 
    width: 100%;
    max-width: 28.5rem; 
    flex-shrink: 0; 
    padding-right: 2.5rem; 
}

.features-display-box,
.architecture-cards-panel {
    display: flex;
    flex: 1; 
    min-width: 0; 
}

.features-display-box {
    min-height: 34.9rem; 
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    overflow: hidden;
    padding: 1.25rem;
}

.features-display-box img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    transition: opacity 0.25s ease-in-out; 
}

.features-display-box img.fade-out {
    opacity: 0;
}

.btn-variant-card {
    display: flex;
    padding: 0.625rem 1.25rem;  
    width: 100%;
    max-width: 26rem; 
    flex-direction: column;
    align-items: flex-start;
    border-radius: 3.125rem;     
    cursor: pointer;
    overflow: hidden;
    transition: border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.25s ease;
}

.btn-variant-card .variant-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;              
    width: 100%;
}

.btn-variant-card .circle-icon-box {
    display: flex;
    width: 1.875rem;            
    height: 1.875rem;           
    justify-content: center;
    align-items: center;
    gap: 0.625rem;              
    border-radius: 3.125rem;     
    flex-shrink: 0;
    transition: border-color 0.2s, background-color 0.2s;
}

.btn-variant-card .icon-inner {
    width: 1rem;                
    height: 1rem;               
    flex-shrink: 0;
    object-fit: contain;
}

.btn-variant-card .icon-plus { display: inline-block; }
.btn-variant-card .icon-custom { display: none; }

.btn-variant-card .variant-title {
    font-size: var(--font-size-24); 
    font-weight: var(--font-weight-semibold); 
    letter-spacing: 0.0086rem;  
    line-height: normal;
    white-space: nowrap;
}

.btn-variant-card .variant-body {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s;
    width: 100%;
    padding-left: 2.45rem;
}

.btn-variant-card .variant-desc {
    font-size: var(--font-size-18); 
    font-weight: var(--font-weight-light); 
    letter-spacing: 0.0064rem;  
    line-height: 1.4;
}

.btn-variant-card.active {
    border-radius: 1.5625rem;    
    padding: 1.25rem;           
    cursor: default;
}
.btn-variant-card.active .icon-plus { display: none; }
.btn-variant-card.active .icon-custom { 
    display: inline-block; 
    width: auto;
    height: 1.5rem;
    max-width: 1.5rem;
}
.btn-variant-card.active .variant-body {
    max-height: 15rem;
    opacity: 1;
    visibility: visible;
    padding-top: 0.625rem;
}

.btn-variant-card .variant-footer { 
    display: flex; 
    gap: 0.75rem; 
    margin-top: 1rem; 
    align-items: center; 
}
.mode-sub-btn { 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 0.25rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 0.3;           
    transition: all 0.2s ease; 
    outline: none; 
}
.mode-sub-btn:hover { opacity: 0.7; }
.mode-sub-btn.active { 
    opacity: 1;             
    transform: scale(1.1);  
}
.mode-sub-btn img { 
    width: 1.5rem; 
    height: 1.5rem; 
    object-fit: contain; 
}

.btn-variant-card.mod-black {
    background: var(--brand-black);
    color: var(--brand-white); 
    border: 0.0625rem solid var(--brand-black);
}
.btn-variant-card.mod-black .circle-icon-box {
    border: 0.0625rem solid var(--brand-white);
    background-color: transparent; 
    color: var(--brand-white);     
}
.btn-variant-card.mod-black:hover:not(.active) .circle-icon-box {
    border-color: var(--brand-primary) !important;
    background-color: transparent !important;
    color: var(--brand-primary) !important; 
}
.btn-variant-card.mod-black.active .circle-icon-box {
    border-color: var(--brand-white) !important;
    background-color: var(--brand-white) !important;
}
.btn-variant-card.mod-black.active .circle-icon-box .icon-custom {
    filter: brightness(0); 
}

.btn-variant-card.mod-gray {
    background: var(--brand-white);
    color: var(--brand-black); 
    border: 0.0625rem solid var(--card-border-color);
}
.btn-variant-card.mod-gray .circle-icon-box {
    border: 0.0625rem solid var(--brand-black);
    background-color: transparent;
    color: var(--brand-black);
}
.btn-variant-card.mod-gray .variant-desc {
    color: var(--CN-40);
}
.btn-variant-card.mod-gray:hover:not(.active) .circle-icon-box {
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}

/* 💡 개선: max-width: 768px 모바일 대응과 완벽 매칭을 위해 사각지대 차단 최적화 (768.02px로 소수점 가드 적용) */
@media screen and (min-width: 768.02px) {
    .architecture-cards-panel {
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        grid-template-rows: auto auto;          
        gap: 1.25rem;
        width: 100%;
        max-width: 35rem;                      
        margin-left: auto;                     
    }

    .arch-infographic-card {
        grid-row: 2;         
        grid-column: auto;   
        aspect-ratio: 1 / 1;  
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: var(--pure-white);
        border: 0.1rem solid var(--card-border-color);
        border-radius: 1.5rem;
        padding: 1.25rem;
        cursor: pointer;
        transition: border-color 0.25s, transform 0.25s;
    }

    .arch-infographic-card:hover:not(.active) {
        border-color: var(--CN-40);
        transform: translateY(-3px);
    }

    /* 활성화된 메인 대시보드 카드 */
    .arch-infographic-card.active {
        grid-row: 1;          
        grid-column: 1 / 5;   
        aspect-ratio: 4 / 2.1; 
        border-color: var(--card-border-color); 
        transform: none;      
        cursor: default;                 
        animation: fadeUp 0.3s ease-out forwards;
    }

    .arch-infographic-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;  
    }
}

/* 부드러운 페이드업 애니메이션 */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   하단 CTA (미어캣) 영역
   ========================================================================== */
.section-footer-cta {
    width: 100%;
    align-self: stretch;
    background-color: var(--pure-white);
    padding-top: 10rem;
    background: linear-gradient(to bottom, var(--pure-white) calc(100% - 2.5rem), var(--brand-black) calc(100% - 2.5rem));
}

.footer-cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem; 
}

.cta-text-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem; 
    align-self: stretch;
}

.cta-title {
    width: 30rem; 
    max-width: 100%;
    color: var(--brand-primary);
    font-size: var(--font-size-52); 
    font-weight: var(--font-weight-bold); 
    line-height: normal;
    text-align: left;
}

.cta-subtitle {
    flex: 1 0 0;
    color: var(--brand-black);
    font-size: var(--font-size-24); 
    font-weight: var(--font-weight-medium); 
    line-height: 1.4;
    text-align: left;
    align-items: flex-end; 
}

.cta-image-row {
    display: flex;
    width: 100%;
    height: auto;
    padding: 0 0.6rem 0 0.6rem;    
    justify-content: center;
    align-items: flex-end; 
    gap: 0.625rem; 
    align-self: stretch;
    padding-top: 6rem;
}

.cta-image-row img {
    width: 20%;
    height: auto;
}

/* ==========================================================================
   최하단 공식 푸터 영역 (site-footer)
   ========================================================================== */
.site-footer {
    width: 100%;
    background-color: var(--brand-black); 
    padding: 5rem 0; 
    align-self: stretch;
    margin-top: 0;
}

.footer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.75rem; 
}

.footer-top-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start; 
    align-self: stretch;
    padding-bottom: 8rem; 
}

.footer-logo img {
    height: 4rem;
    width: auto;
    object-fit: contain;
}

.footer-nav-links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end; 
    list-style: none;
    gap: 1.5rem; 
}

.footer-nav-links a {
    color: var(--brand-white);
    text-decoration: none;
    font-size: 1.875rem; 
    font-weight: var(--font-weight-bold); 
    line-height: 100%;
    letter-spacing: 0.0107rem; 
    transition: color 0.2s ease;
}

.footer-nav-links a:hover {
    color: var(--brand-primary); 
}

.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
    align-self: stretch;
}

.footer-company-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem; 
}

.company-name {
    height: 1rem; 
    color: var(--brand-white);
    font-size: var(--font-size-base); 
    font-weight: var(--font-weight-bold); 
    line-height: 100%;
    letter-spacing: 0.0057rem; 
    margin-bottom: 0.25rem;
}

.company-details {
    width: 16.3125rem; 
    color: var(--CN-80);
    font-size: 0.875rem; 
    font-weight: var(--font-weight-light); 
    line-height: 150%; 
    letter-spacing: 0.005rem; 
}

.footer-sns-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end; 
    gap: 0.5rem;
}

.sns-icons-group {
    display: flex;
    align-items: center;
    gap: 0.5rem; 
}

.sns-icon-link img {
    width: 2.25rem; 
    height: 2.25rem; 
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transition: opacity 0.2s;
}

.sns-icon-link img:hover {
    opacity: 0.7; 
}

.sns-handle-text {
    color: var(--CN-80);
    font-size: 0.875rem; 
    font-weight: var(--font-weight-light); 
    line-height: 100%;
    letter-spacing: 0.005rem; 
}

/* ==========================================
   햄버거 버튼 기본 설정 (데스크톱 숨김)
   ========================================== */
.btn-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 2rem;
    height: 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: var(--z-hamburger); /* 💡 개선: 변수 적용 */
}

.btn-hamburger span {
    width: 100%;
    height: 0.2rem;
    background-color: var(--brand-black); 
    border-radius: 0.125rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   8. 반응형 미디어 쿼리 (1024px 태블릿/노트북 구간 최적화)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .main-features-container, .sub-features-container {
        flex-direction: column;
        gap: 2.5rem;
    }
    
    .features-sidebar-black, .features-sidebar-gray {
        max-width: 100%;
        padding-right: 0;
        align-items: center;
    }
    
    .features-display-box {
        width: 100%;
    }

    .dropdown-inner-content {
        flex-direction: column;
        gap: 2rem;
    }

    .cta-text-row {
        flex-direction: column;
    }
    
    .cta-title {
        width: 100%;
    }

    .char-meerkat-flag {
        left: auto;
        right: 0;            
        width: 16rem;        
        top: 65%;            
    }

    .story-formula-container {
        flex-direction: column;
        align-items: center; 
        height: auto;
        gap: 2rem;
    }
    
    .formula-card.card-result {
        margin: 0 auto;     
        width: 100%;
        max-width: 20rem;   
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .graphic-combined-logo {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .graphic-combined-logo img {
        width: 100%;
        max-width: 100%;   
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .partner-logos-bar {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 2.5rem 2rem;                       
        justify-items: left;                  
        width: 100%;
    }
    .partner-logos-bar img {
        height: 2.5rem;
        object-fit: contain;
    }

    .architecture-cards-panel {
        width: 100%;
        margin: 0 auto;      
    }
    .product-info-spec-side {
        max-width: 100%; 
        border-radius: 1.5rem; 
    }
}

/* ==========================================================================
   8. 반응형 미디어 쿼리 - 모바일 전용 모듈 (768px 이하)
   ========================================================================== */
@media screen and (max-width: 768px) {
    html { font-size: 14px; }
    :root {
        --font-size-52: 2.25rem; 
        --font-size-33: 1.75rem; 
        --font-size-28: 1.375rem; 
        --font-size-24: 1.15rem; 
        --font-size-18: 1rem;    
    }

    body.menu-open { overflow: hidden; touch-action: none; }
    body.menu-open .site-header { background-color: var(--brand-black); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .logo { z-index: var(--z-hamburger); } /* 💡 개선: 변수 적용 */
    
    .logo-split { display: flex !important; }
    body.menu-open .logo-default { display: none; }
    body.menu-open .logo-split .logo-text { filter: brightness(0) invert(1); }

    .btn-hamburger { display: flex; }
    .btn-hamburger.active span { background-color: var(--brand-white); }
    .btn-hamburger.active span:nth-child(1) { transform: translateY(0.65rem) rotate(45deg); }
    .btn-hamburger.active span:nth-child(2) { opacity: 0; }
    .btn-hamburger.active span:nth-child(3) { transform: translateY(-0.65rem) rotate(-45deg); }

    .gnb {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; 
        background-color: var(--brand-black); flex-direction: column; justify-content: center; 
        align-items: center; gap: 3rem; transform: translateY(-100%);
        opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: var(--z-gnb); /* 💡 개선: 변수 적용 */
    }
    .gnb.active { transform: translateY(0); opacity: 1; visibility: visible; }
    .gnb a { color: var(--brand-white); font-size: 1.5rem; font-weight: var(--font-weight-bold); }
    .gnb a .icon-arrow { width: 1.5rem; height: 1.5rem; }
    .gnb a:hover { color: var(--brand-primary); }

    .deco-wave { display: none; }
    .char-meerkat-flag {
        display: block;
        position: absolute; 
        width: 40%;             
        left: 40%;  
        transform: none; 
        bottom: -12rem;          
        top: auto; 
        z-index: 10;
    }

    .section-hero {

    padding: 6rem 0;

}
    .hero-word-logo {
        width: 80%;       /* 화면 꽉 차지 않게 80%로 축소 */
        margin-top: 1rem; /* 헤더에 가려지지 않게 여백 추가 */
    }

    /* 2. 대시보드 화면 좌우 여백 무시하고 꽉 차게 키우기 */
    .hero-display-area { 
        width: calc(100% + 3rem);  /* 부모의 좌우 여백(1.5rem * 2)만큼 강제로 넓힘 */
        margin-left: -1.5rem;      /* 왼쪽 끝으로 밀착 */
        margin-right: -1.5rem;     /* 오른쪽 끝으로 밀착 */
        margin-bottom: 8rem; 
    }

    /* 모바일에서 화면이 꽉 차므로 테두리 모서리 둥글기를 없애주면 더 자연스럽습니다 */
    .dashboard-window {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .btn-action {
        height: 3.5rem; 
        padding: 0.5rem 0.75rem 0.5rem 1.5rem; 
    }

    /* 💡 우선순위를 이기기 위해 .size-md와 .size-lg를 직접 지목해서 덮어씌웁니다 */
   .btn-action.size-md {
        max-width: 14rem; 
    }

    /* 💡 조달청 버튼(긴 글자)은 글씨가 안 깨지게 너비 충분히 확보 */
    .btn-action.size-lg {
        max-width: 20rem; 
    }

    .btn-action .btn-text {
        font-size: 1.1rem; 
    }

    .btn-action .btn-circle {
        width: 2.5rem; 
        height: 2.5rem;
    }

    .btn-action .btn-circle svg {
        width: 1.5rem; 
    }
    .hero-title-part .btn-action{
        margin-top: 2rem;
    }

    .story-formula-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        height: auto;
    }
    .formula-card {
        width: 100%;
        max-width: 15rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
    .graphic-flow-wave, .graphic-meerkat-face {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 9rem;
        height: 9rem;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }
    .graphic-flow-wave img, .graphic-meerkat-face img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .formula-operator { display: flex; justify-content: center; align-items: center; width: 100%; }
    .text-mark { font-size: 3.5rem; line-height: 1; margin: 0 auto; }

    .story-formula-container .formula-card.card-result {
        width: 100%;
        max-width: 20rem; 
        margin: 0 auto;   
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .graphic-combined-logo { width: 100%; display: flex; justify-content: center; align-items: center; }
    .graphic-combined-logo img { width: 100%; max-width: 100%; height: auto; display: block; margin: 0 auto; }
    .formula-text { font-size: 1.5rem; min-height: auto; }

    .partner-logos-bar {
        display: grid; 
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1.5rem; 
        justify-items: start; 
        width: 100%;
    }
    .partner-logos-bar img { width: 100%; max-height: 2.5rem; object-fit: contain; object-position: left;}

    .features-display-box { display: none; }
    .mobile-feature-img-box {
        display: none; 
        width: 100%;
        margin: 0.5rem 0 1.5rem 0; 
        border-radius: 0.5rem;
        overflow: hidden;
    }
    .mobile-feature-img-box.active { display: block; }
    .mobile-feature-img-box img { width: 100%; display: block; }

    .architecture-cards-panel {
        width: 100%;
        max-width: 26rem; 
        margin: 0 auto;   
        flex-direction: column;
        gap: 0;
    }
    .arch-infographic-card { display: none; }
    .arch-infographic-card.active {
        display: flex;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1; 
        flex: none;           
        background: var(--pure-white);
        border: 0.0625rem solid var(--brand-black); 
        border-radius: 1.5rem;
        padding: 1.25rem;     
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
    }
    .arch-infographic-card.active img { width: 80%; height: auto; object-fit: contain; }

    .cta-image-row { height: auto; width: 100%; padding-top: 3rem; }
    .cta-image-row img { width: 31%; height: auto; }
    .portal-search-header { flex-direction: column; align-items: center; }
    .spec-table-rows { flex-direction: column; }
    .spec-item-row { flex-direction: column; gap: 0.25rem; padding-bottom: 1rem; }
    .spec-label { width: 100%;}
    .footer-top-row, .footer-bottom-row { flex-direction: column; align-items: start; text-align: left; gap: 2rem; padding-bottom: 3rem; }
    .footer-nav-links, .footer-sns-box { align-items: start; }
}

/* ==========================================================================
   9. 데스크톱 보정 전용 미디어 쿼리 (768.02px 이상 독립 배치)
   ========================================================================== */
@media screen and (min-width: 768.02px) {
    .mobile-feature-img-box { display: none; }
}