.menubox {
    position: absolute;
    z-index: 99;
    left: 10%;
    top: 22%;
}
.menubox .menu-button {
    background-color: #000;
    color: #fff;
    border-radius: 20px;
    width:23rem;
    padding: 10px 0;
    border: 1px solid #a5a5a5;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menubox .dot {
    margin: 0 2.2rem;
    font-size: 1.6rem;
}

.menubox .menu-label {
    font-size:1.6rem;
}

.menubox .arrow-icon {
    margin-left:3rem;
}
.menubox .menu-list {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: transform 0.3s ease-out,opacity 0.3s ease-out;
    z-index: 999
}
.menubox .menu-list li {
    padding-top:0.5rem;
}
.menubox .menu-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23rem;
    padding: 1rem 0;
    color: #fff;
    text-decoration: none;
    font-size: 1.6rem;
    background: rgba(0,0,0,0.4);
    border-radius: 20px;
    border: 1px solid #333;
    transition: 0.3s;
}
.menubox .menu-list li a:hover {
    background: rgba(0,0,0,1);
    border: 1px solid #a5a5a5;
}
.menubox.show .menu-list {
    transform: scaleY(1);
    opacity: 1;
}
@media screen and (max-width: 1024px) {
    .menubox {
        left:50%;
        top: 30%;
        margin-left: -80px
    }

    .menubox .menu-button {
        width:16rem;
        padding: 0.8rem 0;
    }

    .menubox .home-icon img {
        width: 1.6rem;
    }

    .menubox .dot {
        margin: 0 1.2rem;
        font-size: 1.4rem;
    }

    .menubox .menu-label {
        font-size: 1.4rem;
    }

    .menubox .arrow-icon {
        margin-left: 1.8rem;
    }

    .menubox .arrow-icon img {
        width: 1.6rem;
    }

    .menubox .menu-list li a {
        width: 16rem;
        padding: 0.8rem 0;
        font-size: 1.4rem;
        background: rgba(0,0,0,0.7);
    }
}



/* CSS 변수 */
:root {
    --c-dark:      #0e121a;
    --c-dark2:     #111526;
    --c-red:       #e41923;
    --c-blue:      #344d65;
    --c-white:     #ffffff;
    --c-off-white: #e3e3e3;
    --c-muted:     #aeaeae;
    --c-text:      #444;
    --f-en:        'Poppins', sans-serif;
    --f-kr:        'Pretendard GOV', 'Pretendard', sans-serif;
}

/* 타이포그래피 */
.ds-font-en { font-family: var(--f-en); }
.ds-font-kr { font-family: var(--f-kr); }

.ds-text-hero { font-size: 10rem;  line-height: 1.2;  }
.ds-text-h1   { font-size: 8rem;   line-height: 1.2;  }
.ds-text-h2   { font-size: 6.4rem; line-height: 1.3;  }
.ds-text-h3   { font-size: 4.8rem; line-height: 1.4;  }
.ds-text-h4   { font-size: 4rem;   line-height: 1.5;  }
.ds-text-xl   { font-size: 3.6rem; line-height: 1.6;  }
.ds-text-lg   { font-size: 2.8rem; line-height: 1.8;  }
.ds-text-base { font-size: 2.4rem; line-height: 1.8;  }
.ds-text-sm   { font-size: 2rem;   line-height: 1.6;  }
.ds-text-xs   { font-size: 1.6rem; line-height: 1.6;  }

.ds-fw-700 { font-weight: 700; }
.ds-fw-800 { font-weight: 800; }

/* 색상 유틸리티 */
.ds-c-white     { color: var(--c-white); }
.ds-c-off-white { color: var(--c-off-white); }
.ds-c-red       { color: var(--c-red); }
.ds-c-blue      { color: var(--c-blue); }
.ds-c-muted     { color: var(--c-muted); }
.ds-c-text      { color: var(--c-text); }
.ds-c-black     { color: #111; }

/* 간격 유틸리티 (4px 배수) */
.ds-mb-8   { margin-bottom: 0.8rem; }
.ds-mb-12  { margin-bottom: 1.2rem; }
.ds-mb-16  { margin-bottom: 1.6rem; }
.ds-mb-20  { margin-bottom: 2rem; }
.ds-mb-24  { margin-bottom: 2.4rem; }
.ds-mb-28  { margin-bottom: 2.8rem; }
.ds-mb-32  { margin-bottom: 3.2rem; }
.ds-mb-40  { margin-bottom: 4rem; }
.ds-mb-48  { margin-bottom: 4.8rem; }
.ds-mb-64  { margin-bottom: 6.4rem; }
.ds-mb-80  { margin-bottom: 8rem; }
.ds-mb-120 { margin-bottom: 12rem; }

/* 변환 원점 */
.ds-origin-left { transform-origin: left; }

/* Keyframe 애니메이션 */
@keyframes ds-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.2rem); }
}
@keyframes ds-glow-red {
    0%, 100% { box-shadow: 0 0 2rem rgba(228,25,35,0.3), 0 0 4rem rgba(228,25,35,0.1); }
    50%      { box-shadow: 0 0 3.6rem rgba(228,25,35,0.6), 0 0 7.2rem rgba(228,25,35,0.3); }
}
@keyframes ds-glow-blue {
    0%, 100% { box-shadow: 0 0 2rem rgba(52,77,101,0.4); }
    50%      { box-shadow: 0 0 4rem rgba(52,77,101,0.8); }
}
@keyframes ds-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes ds-spin-slow         { from { transform: rotate(0deg);   } to { transform: rotate(360deg);  } }
@keyframes ds-spin-slow-reverse { from { transform: rotate(0deg);   } to { transform: rotate(-360deg); } }
@keyframes ds-pulse-dot {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%      { transform: scale(1.8); opacity: 0.5; }
}
@keyframes ds-blink  { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ds-line-draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
@keyframes ds-bar-fill  { from { transform: scaleX(0); }  to { transform: scaleX(1); } }

/* 유틸리티 클래스 */
.ds-float     { animation: ds-float 4s ease-in-out infinite; }
.ds-glow-red  { animation: ds-glow-red 2.5s ease-in-out infinite; }
.ds-glow-blue { animation: ds-glow-blue 2.5s ease-in-out infinite; }
.ds-spin      { animation: ds-spin-slow 20s linear infinite; }
.ds-spin-rev  { animation: ds-spin-slow-reverse 18s linear infinite; }

/* 텍스트 효과 */
.ds-gradient-text {
    background: linear-gradient(135deg, #ffffff 0%, #e3e3e3 40%, #e41923 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ds-shimmer-text {
    background: linear-gradient(90deg, #ffffff 20%, #e41923 50%, #ffffff 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ds-shimmer 4s linear infinite;
}

/* 레드 바 */
.ds-red-bar {
    width: 7.2rem;
    height: 0.4rem;
    background: linear-gradient(90deg, #e41923, rgba(228,25,35,0.4));
    border-radius: 0.2rem;
}

/* 분리선 */
.ds-divider {
    height: 0.1rem;
    background: linear-gradient(90deg, transparent, rgba(52,77,101,0.5) 30%, rgba(52,77,101,0.5) 70%, transparent);
}

/* 섹션 공통 */
.ds-section-dark {
    background: linear-gradient(160deg, #0e121a 0%, #111526 50%, #0a0e18 100%);
    position: relative;
    overflow: hidden;
}
.ds-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(52,77,101,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(52,77,101,0.1) 1px, transparent 1px);
    background-size: 5rem 5rem;
    pointer-events: none;
}

/* 섹션 태그 */
.ds-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
}
.ds-section-dot {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--c-red);
    display: inline-block;
    flex-shrink: 0;
}
.ds-tag-label {
    font-size: 2rem;
    color: var(--c-red);
    font-family: var(--f-en);
    letter-spacing: 0.25em;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .ds-tag-label { font-size: 1.6rem; }
}

/* 히어로 태그 */
.ds-hero-tag-wrap {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 3.2rem;
}
@media (max-width: 768px) {
    .ds-hero-tag-wrap { margin-bottom: 2rem; }
}
.ds-tag-pill {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1.6rem;
    border-radius: 99rem;
    border: 1px solid rgba(228,25,35,0.4);
    background: rgba(228,25,35,0.08);
}
.ds-tag-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--c-red);
    display: inline-block;
}
.ds-tag-text {
    font-size: 2rem;
    color: var(--c-red);
    font-family: var(--f-en);
    letter-spacing: 0.25em;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .ds-tag-text { font-size: 1.6rem; }
}

/* 버튼 */
.ds-btn-primary {
    background: linear-gradient(135deg, #e41923, #c01314);
    border: none;
    padding: 1.6rem 3.2rem;
    border-radius: 0.8rem;
    color: white;
    font-size: 2rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}
@media (max-width: 768px) {
    .ds-btn-primary { padding: 1.2rem 2.4rem; font-size: 1.6rem; }
}
.ds-btn-primary:hover {
    transform: translateY(-0.2rem);
    box-shadow: 0 0.8rem 2rem rgba(228,25,35,0.45);
}
.ds-btn-outline {
    background: transparent;
    border: 1px solid rgba(228,25,35,0.5);
    padding: 1.6rem 3.2rem;
    border-radius: 0.8rem;
    color: white;
    font-size: 2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}
@media (max-width: 768px) {
    .ds-btn-outline { padding: 1.2rem 2.4rem; font-size: 1.6rem; }
}
.ds-btn-outline:hover {
    background: rgba(228,25,35,0.1);
    border-color: #e41923;
}
.ds-btn-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

/* 앱 루트 */
.ds-app-root {
    background: var(--c-dark);
    min-height: 100vh;
    width: 100%;
}

/* 히어로 */
.ds-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 100vh;
}
@media (max-width: 768px) {
    .ds-hero { min-height: 80vh; }
}
.ds-hero-bg {
    position: absolute;
    inset: 0;
}
.ds-hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 768px) {
    .ds-hero-bg-img { object-position: center 35%; }
}
.ds-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(14,18,26,0.72), rgba(14,18,26,0.55), rgba(14,18,26,0.92));
}
.ds-hero-overlay-blue {
    position: absolute;
    inset: 0;
    background: rgba(52,77,101,0.18);
}
.ds-hero-decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.ds-hero-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.ds-hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding:20rem 8rem 8rem;
    max-width: 180rem;
    margin: 0 auto;
}
@media (max-width: 1024px) {
    .ds-hero-content { padding: 18rem 6.4rem 6.4rem; }
}
@media (max-width: 768px) {
    .ds-hero-content { 
        min-height: 80vh;
        padding: 14rem 2.4rem 4.8rem; 
    }
}
.ds-hero-title-wrap {
    margin-bottom: 2.4rem;
}
@media (max-width: 768px) {
    .ds-hero-title-wrap { margin-bottom: 1.6rem; }
}
.ds-hero-h1 {
    font-size:6rem;
    font-family: var(--f-kr);
    font-weight: 800;
    color: white;
}
@media (max-width: 1024px) {
    .ds-hero-h1 { font-size: 5.2rem; }
}
@media (max-width: 768px) {
    .ds-hero-h1 { font-size: 4rem; }
}
.ds-hero-subtitle {
    font-size:3.2rem;
    color: var(--c-off-white);
    font-family: var(--f-kr);
    max-width: 88rem;
    margin-bottom: 2rem;
    line-height: 1.7;
}
@media (max-width: 1024px) {
    .ds-hero-subtitle { font-size: 3.2rem; }
}
@media (max-width: 768px) {
    .ds-hero-subtitle { font-size: 2rem; max-width: 100%; }
}
.ds-hero-body {
    font-size: 2.4rem;
    color: rgba(255,255,255,0.55);
    font-family: var(--f-kr);
    max-width: 100%;
    margin-bottom: 4.8rem;
    line-height: 1.8;
}
@media (max-width: 1024px) {
    .ds-hero-body { font-size: 2.4rem; }
}
@media (max-width: 768px) {
    .ds-hero-body { 
        font-size:1.6rem; 
        max-width: 100%; 
        margin-bottom: 3.2rem; 
    }
}
.ds-hero-scroll {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}
.ds-hero-scroll-label {
    font-size: 2rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* 핵심 가치 섹션 */
.ds-core-section {
    position: relative;
    background: white;
    overflow: hidden;
}
.ds-core-inner {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.ds-core-img-col {
    width: 45%;
    position: relative;
    overflow: hidden;
    min-height: 90rem;
}
@media (max-width: 1024px) {
    .ds-core-img-col { 
        width: 100%; 
        min-height: 52rem; 
    }
}
@media (max-width: 768px) {
    .ds-core-img-col { 
        width: 100%; 
        min-height: 40rem; 
    }
}
.ds-abs-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ds-core-img-overlay-r {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, transparent, white);
}
@media (max-width: 1024px) {
    .ds-core-img-overlay-r {
        background: linear-gradient(to bottom, transparent, transparent, white);
    }
}
.ds-core-img-overlay-t {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, white, transparent, transparent);
}
@media (max-width: 1024px) {
    .ds-core-img-overlay-t { display: none; }
}
.ds-core-content-col {
    width: 55%;
    padding: 14rem 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 1024px) {
    .ds-core-content-col { width: 100%; padding: 6.4rem 6.4rem; }
}
@media (max-width: 768px) {
    .ds-core-content-col { width: 100%; padding: 5.6rem 2.4rem; }
}
.ds-core-h2 {
    font-size:6rem;
    color: black;
    font-family: var(--f-kr);
    font-weight: 700;
    margin-bottom: 1.2rem;
}
@media (max-width: 1024px) {
    .ds-core-h2 { font-size: 5.4rem; }
}
@media (max-width: 768px) {
    .ds-core-h2 { font-size:4rem; }
}
.ds-core-sub {
    font-size: 4rem;
    color: var(--c-blue);
    font-family: var(--f-kr);
    margin-bottom: 4.8rem;
    line-height: 1.4;
}
@media (max-width: 1024px) {
    .ds-core-sub { font-size: 3.6rem; }
}
@media (max-width: 768px) {
    .ds-core-sub { 
        font-size:2rem; 
        margin-bottom: 3.2rem; 
    }
}
.ds-core-h3 {
    font-size:5.4rem;
    color: black;
    font-family: var(--f-kr);
    font-weight: 700;
    margin-bottom: 2rem;
}
@media (max-width: 1024px) {
    .ds-core-h3 { font-size: 4.8rem; }
}
@media (max-width: 768px) {
    .ds-core-h3 { font-size: 3rem; }
}
.ds-core-r2x {
    font-size:4rem;
    color: var(--c-blue);
    font-family: var(--f-kr);
    margin-bottom: 3.2rem;
    line-height: 1.4;
}
@media (max-width: 1024px) {
    .ds-core-r2x { font-size: 3.6rem; }
}
@media (max-width: 768px) {
    .ds-core-r2x { font-size: 2rem; margin-bottom: 2.4rem; }
}
.ds-core-body {
    font-size: 2.4rem;
    color: var(--c-text);
    font-family: var(--f-kr);
}
@media (max-width: 1024px) {
    .ds-core-body { font-size: 2.4rem; }
}
@media (max-width: 768px) {
    .ds-core-body { font-size:1.6rem; line-height: 1.8; }
}

/* 전략 섹션 */
.ds-strategy-header {
    position: relative;
    overflow: hidden;
    min-height: 44rem;
}
@media (max-width: 768px) {
    .ds-strategy-header { min-height: 32rem; }
}
.ds-strategy-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
}
.ds-strategy-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(14,18,26,0.45), rgba(14,18,26,0.6), #0e121a);
}
.ds-strategy-header-inner {
    position: relative;
    z-index: 10;
    padding: 10rem 8rem;
    max-width: 180rem;
    margin: 0 auto;
}
@media (max-width: 1024px) {
    .ds-strategy-header-inner { padding: 8rem 6.4rem; }
}
@media (max-width: 768px) {
    .ds-strategy-header-inner { padding: 6.4rem 2.4rem; }
}
.ds-strategy-h2 {
    font-size:6rem;
    color: white;
    font-family: var(--f-kr);
    font-weight: 700;
    margin-bottom: 2.4rem;
    line-height: 1.2;
}
@media (max-width: 1024px) {
    .ds-strategy-h2 { font-size: 5.4rem; }
}
@media (max-width: 768px) {
    .ds-strategy-h2 { font-size: 4rem; margin-bottom: 1.6rem; }
}
.ds-strategy-intro {
    font-size: 4rem;
    color: var(--c-off-white);
    font-family: var(--f-kr);
    line-height: 1.4;
}
@media (max-width: 1024px) {
    .ds-strategy-intro { font-size: 3.6rem; }
}
@media (max-width: 768px) {
    .ds-strategy-intro { font-size: 2rem; max-width: 100%; }
}
.ds-strategy-content {
    padding: 0 8rem 14rem;
    max-width: 180rem;
    margin: 0 auto;
}
@media (max-width: 1024px) {
    .ds-strategy-content { padding: 0 6.4rem 10rem; }
}
@media (max-width: 768px) {
    .ds-strategy-content { padding: 0 2.4rem 8rem; }
}
.ds-strategy-layout {
    display: flex;
    flex-direction: row;
    gap: 10rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
@media (max-width: 1024px) {
    .ds-strategy-layout { gap: 6.4rem; }
}
@media (max-width: 768px) {
    .ds-strategy-layout { flex-direction: column; gap: 4rem; }
}
.ds-strategy-sticky {
    width: 36%;
    position: sticky;
    top: 12rem;
}
@media (max-width: 1024px) {
    .ds-strategy-sticky { width: 100%; position: static; }
}
@media (max-width: 768px) {
    .ds-strategy-sticky { width: 100%; position: static; }
}
.ds-strategy-h3 {
    font-size: 6rem;
    color: white;
    font-family: var(--f-kr);
    font-weight: 700;
    margin-bottom: 3.2rem;
    line-height: 1.4;
}
@media (max-width: 1024px) {
    .ds-strategy-h3 { font-size: 4.8rem; }
}
@media (max-width: 768px) {
    .ds-strategy-h3 { font-size: 3.2rem; margin-bottom: 2rem; }
}
.ds-strategy-body {
    font-size: 2.8rem;
    color: var(--c-off-white);
    font-family: var(--f-kr);
    line-height: 1.9;
}
@media (max-width: 1024px) {
    .ds-strategy-body { font-size: 2.4rem; }
}
@media (max-width: 768px) {
    .ds-strategy-body { font-size:1.6rem; line-height: 1.8; }
}
.ds-strategy-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}
.ds-strategy-item {
    padding: 2.4rem 2.8rem;
    border-left: 0.4rem solid rgba(52,77,101,0.3);
    border-radius: 0 1.2rem 1.2rem 0;
    transition: border-color 0.3s ease, background 0.3s ease;
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .ds-strategy-item { padding: 2rem 1.6rem; }
}
.ds-strategy-item:hover {
    border-left-color: var(--c-red);
    background: rgba(228,25,35,0.04);
}
.ds-strategy-num {
    font-size: 7.2rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(228,25,35,0.15);
    font-family: var(--f-en);
    transition: color 0.3s ease;
    user-select: none;
}
@media (max-width: 768px) {
    .ds-strategy-num { font-size: 4.8rem; }
}
.ds-strategy-item:hover .ds-strategy-num {
    color: rgba(228,25,35,0.4);
}
.ds-strategy-item-row {
    display: flex;
    align-items: flex-start;
    gap: 2.8rem;
}
@media (max-width: 768px) {
    .ds-strategy-item-row { gap: 1.6rem; }
}
.ds-strategy-item-body {
    flex: 1;
    padding-top: 0.8rem;
}
.ds-strategy-item-title-row {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
    margin-bottom: 1.6rem;
}
.ds-strategy-icon-box {
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 1.2rem;
    background: rgba(228,25,35,0.1);
    border: 1px solid rgba(228,25,35,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.4rem;
}
@media (max-width: 768px) {
    .ds-strategy-icon-box { width: 4rem; height: 4rem; border-radius: 0.8rem; }
}
.ds-strategy-item-title {
    font-size: 3.2rem;
    color: white;
    font-family: var(--f-kr);
    font-weight: 700;
    line-height: 1.45;
}
@media (max-width: 1024px) {
    .ds-strategy-item-title { font-size: 2.4rem; }
}
@media (max-width: 768px) {
    .ds-strategy-item-title { font-size: 2rem; }
}
.ds-strategy-item-desc-row {
    display: flex;
    gap: 1.2rem;
    padding-left: 7.2rem;
}
@media (max-width: 768px) {
    .ds-strategy-item-desc-row { padding-left: 0; }
}
.ds-strategy-item-desc {
    font-size:1.8rem;
    color: var(--c-off-white);
    font-family: var(--f-kr);
}
@media (max-width: 768px) {
    .ds-strategy-item-desc { font-size:1.6rem; }
}

/* 기술 아키텍처 래퍼 */
.ds-arch-wrap {
    overflow: hidden;
    position: relative;
    margin-bottom: 12rem;
}
@media (max-width: 768px) {
    .ds-arch-wrap { margin-bottom: 6.4rem; border-radius: 1.6rem; }
}
.ds-arch-top-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.4rem;
    background: linear-gradient(to right, transparent, var(--c-red), transparent);
    opacity: 0.6;
}
.ds-arch-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.ds-arch-label-col {
    width: 22rem;
    flex-shrink: 0;
    background: var(--c-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5.2rem 4rem;
    gap: 1.2rem;
}
@media (max-width: 1024px) {
    .ds-arch-label-col { width: 16rem; padding: 4rem 2.4rem; }
}
@media (max-width: 768px) {
    .ds-arch-label-col { display: none; }
}
.ds-arch-label-title {
    font-size: 2rem;
    color: var(--c-red);
    font-family: var(--f-en);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    line-height: 1.6;
}
@media (max-width: 1024px) {
    .ds-arch-label-title { font-size: 1.6rem; letter-spacing: 0.1em; }
}
.ds-arch-label-line {
    width: 0.4rem;
    height: 6rem;
    background: linear-gradient(to bottom, var(--c-red), transparent);
    border-radius: 0.2rem;
}
.ds-arch-label-sub {
    font-size: 2rem;
    color: var(--c-muted);
    font-family: var(--f-en);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
}
@media (max-width: 1024px) {
    .ds-arch-label-sub { font-size: 1.6rem; letter-spacing: 0.08em; }
}
.ds-arch-diagram-area {
    flex: 1;
    overflow-x: auto;
}
@media (max-width: 1024px) {
    .ds-arch-diagram-area { padding: 4rem 3.2rem; }
}
@media (max-width: 768px) {
    .ds-arch-diagram-area { padding: 3.2rem 2.4rem; }
}

/* TechArchDiagram 스타일 */
.ds-arch-white-box {
    background:rgba(26, 39, 68, 0.45);
    border-radius: 2.4rem;
    padding: 5.2rem 6rem;
    border: 1px solid rgba(52,77,101,0.2);
    box-shadow: 0 2rem 5.2rem rgba(0,0,0,0.12);
    min-width: 72rem;
}
@media (max-width: 1024px) {
    .ds-arch-white-box { padding: 4rem 3.2rem; }
}
@media (max-width: 768px) {
    .ds-arch-white-box { padding: 3.2rem 2.4rem; min-width: 100%; }
}
.ds-arch-hw-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    margin-bottom: 3.2rem;
}
.ds-arch-hw-label {
    font-size: 3.6rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    color: #fff;
    font-family: var(--f-en);
}
@media (max-width: 768px) {
    .ds-arch-hw-label { font-size: 2.8rem; letter-spacing: 0.15em; }
}
.ds-arch-green-box {
    border: 1.5px solid #7ec97e;
    border-radius: 1.2rem;
    padding: 4.8rem 3.2rem 4rem;
    margin-bottom: 3.2rem;
}
@media (max-width: 768px) {
    .ds-arch-green-box { padding: 3.2rem 1.6rem 2.4rem; }
}
.ds-arch-items-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
@media (max-width: 768px) {
    .ds-arch-items-row {
        flex-direction: column;
        align-items: center;
        gap: 3.2rem;
    }
}
.ds-arch-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: 0 1.6rem;
}
@media (max-width: 768px) {
    .ds-arch-item { 
        padding: 0;
        width: 100%;
        max-width: 32rem;
    }
}
.ds-arch-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 0.8rem 4.8rem;
}
@media (max-width: 768px) {
    .ds-arch-arrow {
        padding: 0;
        transform: rotate(90deg);
    }
}
.ds-arch-item-label {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-top: 1.6rem;
    margin-bottom: 0.8rem;
    color: #ffffff;
    font-family: var(--f-en);
}
@media (max-width: 768px) {
    .ds-arch-item-label { font-size: 1.6rem; letter-spacing: 0.04em; }
}
.ds-arch-item-desc {
    font-size: 2rem;
    color: #c5d1e0;
    line-height: 1.6;
    font-family: var(--f-kr);
}
@media (max-width: 768px) {
    .ds-arch-item-desc { font-size: 1.6rem; }
}
.ds-arch-market-row {
    text-align: center;
}

/* 생태계 섹션 */
.ds-eco-inner {
    position: relative;
    z-index: 10;
    padding: 14rem 8rem;
    max-width: 180rem;
    margin: 0 auto;
}
@media (max-width: 1024px) {
    .ds-eco-inner { padding: 10rem 6.4rem; }
}
@media (max-width: 768px) {
    .ds-eco-inner { padding: 8rem 2.4rem; }
}
.ds-eco-header {
    margin-bottom: 12rem;
}
@media (max-width: 1024px) {
    .ds-eco-header { margin-bottom: 8rem; }
}
@media (max-width: 768px) {
    .ds-eco-header { margin-bottom: 6.4rem; }
}
.ds-eco-h2 {
    font-size:6rem;
    color: white;
    font-family: var(--f-kr);
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.3;
}
@media (max-width: 1024px) {
    .ds-eco-h2 { font-size: 5.4rem; }
}
@media (max-width: 768px) {
    .ds-eco-h2 { font-size: 4rem; margin-bottom: 1.2rem; }
}
.ds-eco-h2-gradient {
    font-size: 6rem;
    font-family: var(--f-kr);
    font-weight: 700;
    margin-bottom: 4.8rem;
    line-height: 1.3;
    background: linear-gradient(135deg, #ffffff 0%, #e3e3e3 35%, #e41923 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
@media (max-width: 1024px) {
    .ds-eco-h2-gradient { font-size: 5cqb; }
}
@media (max-width: 768px) {
    .ds-eco-h2-gradient { font-size: 4rem; margin-bottom: 3.2rem; }
}
.ds-eco-body {
    font-size: 2.4rem;
    color: white;
    font-family: var(--f-kr);
    line-height: 2;
    opacity: 0.9;
}
@media (max-width: 1024px) {
    .ds-eco-body { font-size: 2.4rem; }
}
@media (max-width: 768px) {
    .ds-eco-body { font-size: 2rem; max-width: 100%; line-height: 1.9; }
}

/* 타임라인 */
.ds-timeline-wrap {
    position: relative;
    display: flex;
    gap: 3.2rem;
    padding-top: 2.8rem;
}
@media (max-width: 1024px) {
    .ds-timeline-wrap { gap: 2rem; }
}
@media (max-width: 768px) {
    .ds-timeline-wrap { flex-direction: column; gap: 2.4rem; padding-top: 0; }
}
.ds-timeline-wrap::before {
    content: '';
    position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
    height: 0.2rem;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(52,77,101,0.6) 10%,
        rgba(228,25,35,0.7) 50%,
        rgba(52,77,101,0.6) 90%,
        transparent 100%);
}
@media (max-width: 768px) {
    .ds-timeline-wrap::before {
        display: none;
    }
}
.ds-timeline-item {
    flex: 1;
}
@media (max-width: 768px) {
    .ds-timeline-item { flex: none; width: 100%; }
}
.ds-timeline-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--c-red);
    margin: 0 auto 2rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 1.6rem rgba(228,25,35,0.6);
}
@media (max-width: 768px) {
    .ds-timeline-dot { display: none; }
}
.ds-timeline-dot::before {
    content: '';
    position: absolute;
    inset: -0.8rem;
    border-radius: 50%;
    background: rgba(228,25,35,0.2);
    animation: ds-pulse-dot 2.5s ease-in-out infinite;
}
.ds-timeline-dot-inactive {
    background: rgba(52,77,101,0.7);
    box-shadow: none;
}
.ds-timeline-dot-inactive::before {
    display: none;
}
.ds-phase-card {
    border-radius: 2rem;
    padding: 4rem;
    border: 1px solid rgba(52,77,101,0.35);
    background: rgba(26,39,68,0.45);
    min-height:31rem;
}
@media (max-width: 1024px) {
    .ds-phase-card { padding: 3.2rem 2.4rem; }
}
@media (max-width: 768px) {
    .ds-phase-card { padding: 2.4rem 2rem; border-radius: 1.6rem; }
}
.ds-phase-card--active {
    border-color: rgba(228,25,35,0.35);
    background: rgba(228,25,35,0.08);
}
.ds-phase-icon-row {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-bottom: 2.4rem;
}
@media (max-width: 768px) {
    .ds-phase-icon-row { gap: 1.2rem; margin-bottom: 1.6rem; }
}
.ds-phase-icon {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(52,77,101,0.35);
    border: 1px solid rgba(52,77,101,0.45);
}
@media (max-width: 768px) {
    .ds-phase-icon { width: 4.8rem; height: 4.8rem; }
}
.ds-phase-icon--active {
    background: rgba(228,25,35,0.2);
    border-color: rgba(228,25,35,0.45);
}
.ds-phase-label {
    text-align: left;
}
.ds-phase-name {
    font-size: 4rem;
    font-family: var(--f-kr);
    font-weight: 700;
    line-height: 1.2;
    color: white;
}
@media (max-width: 1024px) {
    .ds-phase-name { font-size: 3.6rem; }
}
@media (max-width: 768px) {
    .ds-phase-name { font-size: 2.4rem; }
}
.ds-phase-name--active {
    color: var(--c-red);
}
.ds-phase-period {
    font-size:1.8rem;
    color: rgba(255,255,255,0.4);
    font-family: var(--f-en);
    margin-top: 0.4rem;
}
@media (max-width: 768px) {
    .ds-phase-period { font-size: 1.6rem; }
}
.ds-phase-title {
    font-size: 2rem;
    color: white;
    font-family: var(--f-kr);
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: left;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .ds-phase-title { font-size: 2rem; margin-bottom: 1.6rem; }
}
.ds-phase-items {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.ds-phase-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    text-align: left;
}
.ds-phase-bullet {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    margin-top:0.8rem;
    flex-shrink: 0;
    background: rgba(52,77,101,0.9);
    display: inline-block;
}
.ds-phase-bullet--active {
    background: var(--c-red);
}
.ds-phase-item-text {
    font-size:1.6rem;
    color: var(--c-off-white);
    font-family: var(--f-kr);
}

/* 카드 */
.ds-card {
    background: linear-gradient(135deg, rgba(26,39,68,0.7) 0%, rgba(14,18,26,0.9) 100%);
    border: 1px solid rgba(52,77,101,0.35);
    border-radius: 1.6rem;
    padding: 3.2rem 2.8rem;
    backdrop-filter: blur(0.8rem);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}
.ds-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.2rem;
    background: linear-gradient(90deg, transparent, rgba(228,25,35,0.6), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ds-card:hover {
    transform: translateY(-0.6rem);
    box-shadow: 0 2rem 4rem rgba(0,0,0,0.4);
    border-color: rgba(228,25,35,0.4);
}
.ds-card:hover::before { opacity: 1; }
.ds-icon-box {
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(228,25,35,0.15), rgba(52,77,101,0.25));
    border: 1px solid rgba(228,25,35,0.25);
    margin-bottom: 2rem;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ds-card:hover .ds-icon-box {
    background: linear-gradient(135deg, rgba(228,25,35,0.3), rgba(52,77,101,0.4));
    border-color: rgba(228,25,35,0.5);
    box-shadow: 0 0 1.6rem rgba(228,25,35,0.2);
}

/* 다이어그램 박스 */
.ds-diagram-box {
    background: linear-gradient(160deg, #070b12 0%, #0c1220 100%);
    border: 1px solid rgba(52,77,101,0.3);
    border-radius: 1.6rem;
    overflow: hidden;
    position: relative;
}
.ds-diagram-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(228,25,35,0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* 스크롤바 */
::-webkit-scrollbar          { width: 0.6rem; }
::-webkit-scrollbar-track    { background: #0e121a; }
::-webkit-scrollbar-thumb    { background: #344d65; border-radius: 0.3rem; }
::-webkit-scrollbar-thumb:hover { background: #e41923; }