/* Core Skills 섹션 메인 타이틀 색상 변경 (#0b0b0b) */
#html[data-theme="light"] .core-skills-fixed-title,
body.light-mode .core-skills-fixed-title,
body.light-mode .skill-section-header {
    color: #171717 !important;
}

/* Core Skills #ff2c2c 컬러 박스 내부 요소 색상 유지 (다크모드와 동일하게 화이트 톤 강제) */
body.light-mode .core-skills-card .skill-main-title { color: #fff !important; }
body.light-mode .core-skills-card .skill-main-subtitle { color: rgba(255, 255, 255, 0.7) !important; }
body.light-mode .core-skills-card .skill-action-btn { background: transparent !important; border: 2px solid rgba(255, 255, 255, 0.5) !important; color: #fff !important; }
body.light-mode .core-skills-card .skill-action-btn:hover { background: #fff !important; border-color: #fff !important; color: #0b0b0b !important; }
body.light-mode .core-skills-card .skill-action-btn .arrow { background-image: url('/img/arrow_w.png') !important; }
body.light-mode .core-skills-card .skill-action-btn:hover .arrow { background-image: url('/img/arrow.png') !important; }

body.light-mode .core-skills-card .skill-animated-icon { color: #fff !important; }
body.light-mode .core-skills-card .skill-animated-icon .anim-cursor-move { fill: white !important; stroke: black !important; }
body.light-mode .core-skills-card .skill-animated-icon .anim-pulse-fill,
body.light-mode .core-skills-card .skill-animated-icon .anim-pulse-fill-delay rect,
body.light-mode .core-skills-card .skill-animated-icon .anim-pulse-fill-delay { fill: white !important; }
body.light-mode .core-skills-card .skill-animated-icon polygon[class="anim-pulse-fill"] { fill: white !important; }

body.light-mode .core-skills-card .skill-description-list li,
body.light-mode .core-skills-card .skill-item-description { color: #fff !important; }

/* 텍스트 롤링 효과 부분 색상 고정 */
body.light-mode .core-skills-card .color-fill-title .title-base { color: #fff !important; }
body.light-mode .core-skills-card .color-fill-title .title-fill {
    color: #ff2c2c;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    z-index: 2;
    white-space: nowrap; /* 핵심: 텍스트가 줄바꿈되지 않게 고정 */
    overflow: hidden;
    transition: width 1.2s cubic-bezier(0.65, 0, 0.35, 1);
    background: #fff;
}

/* Light Mode - Identity */
body.light-mode .company-intro-box {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .role-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 카드 앞면(마우스 오버 전) 배경색 화이트 지정 */
body.light-mode .role-card::before {
    background: #ffffff !important; 
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}


/* Light Mode - History 전체 박스, 테두리, 그림자 영구 제거 (완전 투명화) */
body.light-mode #history-sec-timeline,
body.light-mode #history-sec-timeline .content-wrapper,
body.light-mode #history-sec-timeline .sub-content,
body.light-mode #history-sec-timeline .history-horizontal-wrapper,
body.light-mode #history-sec-timeline .history-cards-container,
body.light-mode #history-sec-timeline .history-card,
body.light-mode #history-sec-timeline .history-card:hover {
    background-color: transparent !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Core Business 섹션 배경 이미지 - bg2.png 50% 투명도 강제 적용 (다크/라이트 공통) */
#business-sec-main::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/img/bg2.png') center center / cover no-repeat !important;
    opacity: 0.5 !important; /* 투명도 50% 강제 고정 */
    pointer-events: none !important;
    z-index: 1;
}

body.light-mode #business-sec-main::after {
    opacity: 0.1 !important; /* 라이트모드에서는 보통 더 투명해야 글씨가 잘 보입니다 */
}


/* (주)더블트러블 텍스트 라이트 모드에서도 #ff2c2c 컬러 강제 유지 */
body.light-mode #about-sec-who .text-sky {
    color: #ff2c2c !important;
}

/* 움직이는 원형 테두리 컬러 라이트 모드에서도 유지 (투명한 화이트) */
body.light-mode .logo-circle {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 돌아가는 점: 다크모드와 동일하게 #ff2c2c 붉은색 강제 유지 */
body.light-mode #about-sec-who .logo-circle::before {
    background: #ff2c2c !important;
    box-shadow: 0 0 15px rgba(255, 44, 44, 0.8) !important;
}


/* ================================================================
   [Identity 페이지 스타일 - identity.css]
   회사 소개, 팀 소개, 주요 사업, 회사 연혁
   ================================================================ */

/* identity 페이지 활성 시에만 body overflow 제어 */
#page-about-intro.active {
    overflow: hidden;
    display: flex;
}

/* 가로 스크롤 페이지 - content-wrapper 오버라이드 */
#page-about-intro .content-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    box-sizing: border-box;
    flex-shrink: 0;
}
#page-about-intro {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 100vh;
    width: 100vw;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding: 0;
}

#page-about-intro::-webkit-scrollbar {
    display: none;
}

#page-about-intro .snap-section {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    margin: 0;
}

/* [HOME 페이지 한 화면 레이아웃] */
.snap-section.home-single-view {
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
    justify-content: space-between;
    padding-bottom: 0;
    overflow: hidden;
    position: relative;
    width: auto;
    flex: 1;
}

/* HOME 배경 비디오 */
.home-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: auto;
    object-fit: contain;
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 60% 60% at center, black 60%, transparent 95%);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at center, black 60%, transparent 95%);
}

.snap-section.home-single-view .hero-section {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 0;
}

/* Hero */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 5%;
    position: relative;
    z-index: 2;
    overflow: hidden;
    will-change: transform;
    contain: layout style paint;
    backface-visibility: hidden;
}

.hero-content-left {
    width: 100%;
    text-align: center;
    z-index: 10;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.hero-content-left h1 {
    font-size: clamp(58px, 8vw, 105px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 30px;
}

.text-fill {
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.text-outline {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.8);
    opacity: 0.9;
}

.hero-content-left p {
    font-size: clamp(16px, 1.3vw, 20px);
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 50px;
    letter-spacing: -0.5px;
}

.hero-content-left p .text-highlight {
    color: #fff;
    font-weight: 500;
}

/* About - Company Intro Box */
.company-intro-box {
    display: flex;
    gap: 50px;
    align-items: stretch;
    background: #141414;
    backdrop-filter: none;
    border: 1px solid transparent;
    border-radius: 0;
    padding: 60px;
    max-width: 1200px;
    margin: 0 auto;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Company Intro Box는 마우스 오버 시 기존 효과 유지 */
body.light-mode .company-intro-box:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #ff2c2c !important;
    box-shadow: 0 8px 30px rgba(255, 44, 44, 0.1) !important;
}

/* Our Team 카드는 마우스 오버(뒤집힘) 시 부모 컨테이너 배경 완전 투명화 (잔상 제거) */
body.light-mode .role-card:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.intro-text-area {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.intro-text-area p {
    white-space: pre-line;
}

/* 중앙 정렬 레이아웃 (로고 위, 텍스트 아래) */
.intro-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
    padding: 40px 20px;
}

.intro-centered .logo-graphic {
    margin-bottom: 20px;
}

.intro-text-area.centered {
    text-align: center;
    max-width: 800px;
}

.intro-text-area.centered h3,
.intro-text-area.centered p {
    text-align: center;
}

/* Who We Are 섹션 - 원형 중앙 배치 */
#about-sec-who .logo-graphic {
    position: absolute;
    top: 50%;
    left: calc(50% + 170px);
    transform: translate(-50%, -50%);
    width: 450px;
    height: 450px;
    pointer-events: none;
    z-index: 0;
}

#about-sec-who .logo-circle {
    width: 100%;
    padding-bottom: 100%;
}

#about-sec-who .intro-text-area {
    position: relative;
    z-index: 1;
}

/* Core Skills Container */
#core-skills-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Core Skills Sticky Header */
.core-skills-sticky-wrap {
    position: sticky;
    top: 240px;
    z-index: 100;
    background: rgba(10, 10, 10, 0.95);
    padding: 12px 0 6px 0;
    text-align: center;
    margin: 0;
    will-change: transform;
    contain: layout style;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.core-skills-sticky-header {
    font-size: clamp(36px, 5.5vw, 56px);
    font-weight: 700;
    margin: 0;
    color: #fff;
}

/* 섹션 타이틀 */
.sub-header .business-title-small {
    color: #fff;
}

.core-skills-scroll-hint {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 18px;
    margin-bottom: 18px;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.3px;
}

/* Core Skills Section Header (개별 섹션용 - 현재 사용 안 함) */
.skill-section-header {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin: 0 0 60px 0;
}

/* Core Skills - Split Layout */
.skill-detail-section {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 60px;
    overflow: visible;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    will-change: transform;
    backface-visibility: hidden;
}

/* Core Skills 섹션 상단 여백 */
#core-skills-sec,
#skill-sec-tech,
#skill-sec-design,
#skill-sec-video {
    padding-top: 0;
}

.skill-split-layout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 110px 60px 40px;
    overflow: visible;
}

.skill-left {
    flex: 0 0 auto;
    text-align: left;
    min-width: 300px;
}

.skill-main-title {
    font-size: 64px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px 0;
    line-height: 1.1;
}

.skill-main-subtitle {
    font-size: 24px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 24px 0;
}

.skill-action-btn {
    display: inline-block;
    padding: 12px 28px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.skill-action-btn:hover {
    background: #fff;
    border-color: #fff;
    color: #0b0b0b;
}

.skill-action-btn .arrow {
    display: inline-block;
    margin-left: 8px;
    width: 30px;
    height: 30px;
    background: url('/img/arrow_w.png') no-repeat center center;
    background-size: contain;
    vertical-align: middle;
    transition: background 0.3s ease;
}

.skill-action-btn:hover .arrow {
    background-image: url('/img/arrow.png');
}

.skill-action-btn .arrow::before {
    content: '';
}

/* Skill Animated Icon */
.skill-animated-icon {
    margin-top: 40px;
    width: 64px;
    height: 64px;
    color: #fff;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    will-change: transform;
    transform: translateZ(0);
}

.skill-animated-icon svg {
    width: 100%;
    height: 100%;
}

/* Animation: Dev - move left */
.anim-move-left {
    animation: skillMoveLeft 2s ease-in-out infinite;
}

/* Animation: Dev - slash fade */
.anim-fade-slash {
    animation: skillFadeSlash 2s ease-in-out infinite;
    transform-origin: center;
}

/* Animation: Dev - move right */
.anim-move-right {
    animation: skillMoveRight 2s ease-in-out infinite;
}

/* Animation: Tech - spin clockwise */
.anim-spin-cw {
    animation: skillSpinCW 4s linear infinite;
}

/* Animation: Tech - spin counter-clockwise */
.anim-spin-ccw {
    animation: skillSpinCCW 4s linear infinite;
}

/* Animation: Design - pulse UI */
.anim-pulse-ui {
    animation: skillPulseUI 2s ease-in-out infinite;
    transform-origin: center;
}

/* Animation: Design - cursor move */
.anim-cursor-move {
    animation: skillCursorMove 2s ease-in-out infinite;
}

/* Animation: Video - pulse fill */
.anim-pulse-fill {
    animation: skillPulseFill 2s ease-in-out infinite;
}

/* Animation: Video - pulse fill delayed */
.anim-pulse-fill-delay {
    animation: skillPulseFill 2s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes skillMoveLeft {
    0%, 100% { transform: translateX(0) translateZ(0); }
    50% { transform: translateX(-3px) translateZ(0); }
}

@keyframes skillMoveRight {
    0%, 100% { transform: translateX(0) translateZ(0); }
    50% { transform: translateX(3px) translateZ(0); }
}

@keyframes skillFadeSlash {
    0%, 100% { opacity: 0.3; transform: scaleY(0.8) translateZ(0); }
    50% { opacity: 1; transform: scaleY(1) translateZ(0); }
}

@keyframes skillSpinCW {
    from { transform: rotate(0deg) translateZ(0); }
    to { transform: rotate(360deg) translateZ(0); }
}

@keyframes skillSpinCCW {
    from { transform: rotate(0deg) translateZ(0); }
    to { transform: rotate(-360deg) translateZ(0); }
}

@keyframes skillPulseUI {
    0%, 40% { transform: scale(1) translateZ(0); opacity: 0.5; }
    50% { transform: scale(1.1) translateZ(0); opacity: 1; stroke-width: 1.2; }
    60%, 100% { transform: scale(1) translateZ(0); opacity: 0.5; }
}

@keyframes skillCursorMove {
    0% { transform: translate(4px, 4px) translateZ(0); opacity: 0; }
    20% { opacity: 1; }
    50% { transform: translate(-2px, -2px) translateZ(0); }
    100% { transform: translate(-2px, -2px) translateZ(0); opacity: 1; }
}

@keyframes skillPulseFill {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.skill-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.skill-description-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.skill-description-list li {
    font-size: 18px;
    line-height: 1.8;
    color: #fff;
    margin-bottom: 24px;
    padding-left: 0;
    position: relative;
    font-weight: 400;
}

.skill-description-list li:last-child {
    margin-bottom: 0;
}


.skill-item-title {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    display: inline-block;
    margin-bottom: 8px;
    padding: 0 6px;
    line-height: 1.3;
    position: relative;
}

/* 흰색 배경 박스 - 왼쪽에서 오른쪽 sweep */
.skill-item-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    clip-path: inset(0 100% 0 0);
    z-index: 0;
}

/* 빨간 텍스트 오버레이 - 왼쪽에서 오른쪽 sweep */
.skill-item-title::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 6px;
    color: #ff2c2c;
    clip-path: inset(0 100% 0 0);
    z-index: 1;
}

.fade-in-up.animate .skill-item-title::before {
    animation: sweepBoxIn 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.fade-in-up.animate .skill-item-title::after {
    animation: sweepTextIn 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.15s forwards;
}

@keyframes sweepBoxIn {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

@keyframes sweepTextIn {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

.skill-item-description {
    font-weight: 300;
}

/* History - Horizontal */
#history-sec-timeline .sub-header {
    margin-bottom: 10px;
}

#history-sec-timeline .sub-content {
    margin-top: 0;
    padding-top: 0;
}

.history-horizontal-wrapper {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 10px auto 0;
    padding: 20px 40px;
    display: flex;
    justify-content: center;
}

.history-cards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: fit-content;
}

.history-card {
    width: 100%;
    max-width: none;
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 30px 0;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 300px;
    overflow: hidden;
    min-height: auto;
}

.history-card:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
}

.history-card:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.history-year-left {
    flex-shrink: 0;
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -2px;
    position: relative;
    z-index: 1;
    width: fit-content;
    text-align: center;
    background-color: #ff2c2c;
    border-radius: 50px;
    padding: 10px 20px;
}

.history-content {
    flex: 1;
    position: relative;
    z-index: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.history-title {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.4;
    text-shadow: none;
}

.history-desc {
    font-size: 17px;
    color: #aaa;
    line-height: 1.6;
}

/* Marquee Section */
.marquee-wrapper {
    width: 80%;
    max-width: 1200px;
    margin: -80px auto 0;
    overflow: hidden;
    position: relative;
}

.marquee-container {
    display: flex;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    pointer-events: none;
}

.marquee-content {
    display: flex;
    white-space: nowrap;
    animation: marquee-scroll 25s linear infinite;
    will-change: transform;
    transform: translateZ(0);
    pointer-events: auto;
    backface-visibility: hidden;
    perspective: 1000px;
}

.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused !important;
}

.marquee-text {
    display: inline-block;
    padding: 0 15px;
    font-size: clamp(32px, 5vw, 50px);
    font-weight: 700;
    color: #fff;
    opacity: 0.4;
    letter-spacing: 1px;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0) translateZ(0);
    }
    100% {
        transform: translateX(-50%) translateZ(0);
    }
}


/* Responsive - History */
@media (max-width: 1024px) {
    .history-horizontal-wrapper {
        max-width: 90%;
    }
    
    .history-card {
        gap: 40px;
        padding: 30px 35px;
    }
    
    .history-year-left {
        font-size: 48px;
        width: 120px;
    }
    
    .marquee-wrapper {
        width: 95%;
    }
    
    .marquee-text {
        padding: 0 10px;
    }
}

@media (max-width: 768px) {
    .history-card {
        flex-direction: column;
        gap: 20px;
        padding: 25px 30px;
        align-items: flex-start;
    }
    
    .history-year-left {
        font-size: 40px;
        width: auto;
    }
    
    .history-title {
        font-size: 20px;
    }

    .history-desc {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .history-card {
        padding: 20px;
        gap: 15px;
    }

    .history-year-left {
        font-size: 36px;
    }

    .history-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .history-desc {
        font-size: 12px;
    }
}

#about-sec-who {
    position: relative;
}
#about-sec-who::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/img/bg.jpg') center center / cover no-repeat;
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}
#about-sec-who > * {
    position: relative;
    z-index: 1;
}

#about-sec-who .sub-header {
    padding-bottom: 100px;
}

/* Who We Are - 가로 배치 레이아웃 (왼쪽 정렬) */
#about-sec-who .intro-text-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 80px;
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

#about-sec-who .intro-text-col {
    width: 100%;
    max-width: 600px;
}

#about-sec-who .intro-text-col.intro-text-title {
    text-align: left;
}

#about-sec-who .intro-text-col.intro-text-title h3 {
    font-size: 36px;
    color: #fff;
    margin-bottom: 0;
    line-height: 1.4;
    text-align: left;
    font-weight: 700;
}

#about-sec-who .intro-text-col.intro-text-description p {
    color: #ddd;
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 0;
    word-break: keep-all;
    text-align: left;
    font-weight: 300;
}
/* =========================================================
   Who We Are 텍스트 밑줄 (다크/라이트 굵기 2px 통일 및 애니메이션 복구)
   ========================================================= */
#about-sec-who .intro-text-col.intro-text-description p strong {
    font-weight: 600;
    padding-bottom: 6px;
    display: inline;
    opacity: 1;
    color: #fff;
    word-break: keep-all;
    white-space: normal;
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px; /* 두께를 2px로 일정하게 고정 */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

#about-sec-who .intro-text-col.intro-text-description p strong::after {
    content: none;
}

/* [중요] 삭제되었던 밑줄 애니메이션 실행 트리거 복구 */
.intro-text-row.fade-in-up.animate .intro-text-col.intro-text-description p strong:nth-of-type(1) { animation: underlineSlide 0.8s ease-out forwards; animation-delay: 1.2s; }
.intro-text-row.fade-in-up.animate .intro-text-col.intro-text-description p strong:nth-of-type(2) { animation: underlineSlide 0.8s ease-out forwards; animation-delay: 1.5s; }
.intro-text-row.fade-in-up.animate .intro-text-col.intro-text-description p strong:nth-of-type(3) { animation: underlineSlide 0.8s ease-out forwards; animation-delay: 1.8s; }
.intro-text-row.fade-in-up.animate .intro-text-col.intro-text-description p strong:nth-of-type(4) { animation: underlineSlide 0.8s ease-out forwards; animation-delay: 2.1s; }
.intro-text-row.fade-in-up.animate .intro-text-col.intro-text-description p strong:nth-of-type(5) { animation: underlineSlide 0.8s ease-out forwards; animation-delay: 2.4s; }
.intro-text-row.fade-in-up.animate .intro-text-col.intro-text-description p strong:nth-of-type(6) { animation: underlineSlide 0.8s ease-out forwards; animation-delay: 2.7s; }

/* 애니메이션 동작 시에도 2px 굵기 강제 유지 */
@keyframes underlineSlide {
    from {
        background-size: 0 2px;
    }
    to {
        background-size: 100% 2px;
    }
}

/* 라이트 모드 텍스트 및 투명한 #0b0b0b 밑줄 적용 */
body.light-mode #about-sec-who .intro-text-col.intro-text-description p strong {
    color: #0b0b0b !important;
    background-image: linear-gradient(rgba(11, 11, 11, 0.4), rgba(11, 11, 11, 0.4)) !important;
}

#about-sec-who .intro-text-area h3 {
    font-size: 32px;
    color: #fff;
    margin-bottom: 45px;
    line-height: 1.4;
    text-align: center;
}

#about-sec-who .intro-text-area p {
    color: #ddd;
    font-size: 19px;
    line-height: 1.4;
    margin-bottom: 25px;
    word-break: keep-all;
    text-align: center;
    white-space: normal;
}

.nowrap {
    white-space: nowrap;
}

.single-line {
    white-space: nowrap;
    display: inline-block;
    font-size: clamp(14px, 1.5vw, 19px);
}

.intro-visual-area {
    flex: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    position: relative;
}

.logo-graphic {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(60px, 8vw, 100px);
    font-weight: 900;
    position: relative;
}

.logo-graphic span {
    background: linear-gradient(45deg, #fff, #aaa);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 2;
}

.logo-circle {
    position: absolute;
    width: 60%;
    padding-bottom: 60%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: spin 10s linear infinite;
}

.logo-circle::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: rgba(255, 44, 44, 0.7);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 44, 44, 0.7);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================================
   Core Business - 순차 등장 애니메이션 (텍스트 -> 카드 1~5)
   ========================================================= */
/* 1. 애니메이션 대상 요소 초기 상태 (투명하고 50px 아래에 위치) */
#business-sec-main .fade-in-up {
    opacity: 0;
    transform: translateY(50px);
}

/* 2. 스크롤 시 .animate 클래스가 붙으면 위로 올라오며 나타남 */
#business-sec-main .fade-in-up.animate {
    animation: businessFadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* --- 등장 순서 셋팅 --- */
/* ① Core Business 텍스트 (가장 먼저 등장) */
#business-sec-main .sub-header.fade-in-up.animate {
    animation-delay: 0.1s;
}

/* ② 카드 5개 (왼쪽부터 0.15초 간격으로 순차 등장) */
#business-sec-main .service-box.animate-delay-3.animate { animation-delay: 0.3s; }
#business-sec-main .service-box.animate-delay-4.animate { animation-delay: 0.45s; }
#business-sec-main .service-box.animate-delay-5.animate { animation-delay: 0.6s; }
#business-sec-main .service-box.animate-delay-6.animate { animation-delay: 0.75s; }
#business-sec-main .service-box.animate-delay-7.animate { animation-delay: 0.9s; }

/* 애니메이션 키프레임 */
@keyframes businessFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Business Need Section */
.business-need-section {
    max-width: 1400px;
    margin: 60px auto 0 auto;
    text-align: center;
    padding: 0;
}

.business-need-section h2 {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 35px;
    line-height: 1.5;
    letter-spacing: -0.3px;
}

.need-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.need-list li {
    font-size: 15px;
    color: #ccc;
    line-height: 1.6;
    text-align: center;
    padding: 25px 20px;
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.5), rgba(30, 30, 30, 0.4));
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.need-list li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #ff2c2c, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.need-list li:hover {
    background: linear-gradient(135deg, rgba(255, 44, 44, 0.1), rgba(30, 30, 30, 0.5));
    border-color: rgba(255, 44, 44, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 44, 44, 0.15);
}

.need-list li:hover::before {
    opacity: 1;
}

.need-list li .need-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #ff2c2c, #cc0000);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    margin: 0 auto 12px auto;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(255, 44, 44, 0.3);
}

/* Team */
.team-role-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 900px;
    margin: 24px auto 0 auto;
}

.role-card-wrap {
    perspective: 1000px;
    cursor: pointer;
}

.role-card {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    overflow: visible;
}

/* 카드 배경 - 앞면 (#171717) */
.role-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #171717;
    z-index: 0;
    backface-visibility: hidden;
    transition: transform 0.7s ease;
    transform-style: preserve-3d;
}

/* 카드 배경 - 뒷면 (#ff2c2c) */
.role-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #ff2c2c;
    z-index: 0;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    transition: transform 0.7s ease;
    transform-style: preserve-3d;
}

.role-card.flipping::before,
.role-card.flipped::before {
    transform: rotateY(180deg);
}

.role-card.flipping::after,
.role-card.flipped::after {
    transform: rotateY(360deg);
}

.role-card.flipping .role-name-en,
.role-card.flipped .role-name-en {
    color: #fff;
}

/* 콘텐츠가 배경 위에 표시되도록 */
.role-card-img-wrap,
.role-card-info,
.role-bubble {
    position: relative;
    z-index: 1;
}

.role-card-img-wrap {
    width: 140px;
    height: 140px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    margin: 24px auto 10px;
    flex-shrink: 0;
}

.role-memoji {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.role-card-info {
    width: 100%;
    padding: 14px 12px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.role-name-kr {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.role-name-en {
    font-size: 15px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-desc {
    font-size: 13px;
    color: #aaa;
    margin-top: 6px;
    line-height: 1.5;
}

.role-bubble {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #fff;
    color: #000;
    padding: 14px 22px;
    border-radius: 30px;
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.role-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.role-card:hover .role-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}


/* [수정] Core Business 섹션 세로 가운데 정렬 */
 #business-sec-main {
    position: relative;
    min-height: 100vh;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

#business-sec-main .sub-header {
    padding-bottom: 40px;
}

#business-sec-main .sub-content {
    padding-bottom: 0;
}

/* [수정] 상단 여백 추가가 필요한 페이지들 */
#page-business-main .snap-section {
    height: auto;
    min-height: 100vh;
    justify-content: flex-start;
    padding-top: 140px;
    padding-bottom: 100px;
}

#page-business-main .sub-header {
    margin-top: 40px;
}

/* [Responsive - Identity] */
@media (max-width: 1024px) {
    .home-bg-video {
        width: 90% !important;
        max-width: 500px;
        top: 35% !important;
        opacity: 0.25;
    }
    
    .hero-section {
        flex-direction: column;
        padding: 100px 5%;
        text-align: center;
        justify-content: center;
    }

    .hero-content-left {
        width: 100%;
        margin: 0 auto;
    }

    .company-intro-box {
        flex-direction: column;
    }

    .intro-visual-area {
        min-height: 200px;
    }


    .skill-split-layout {
        flex-direction: column;
        gap: 40px;
        padding: 0 40px;
    }

    .skill-left {
        min-width: auto;
        text-align: center;
    }

    .skill-action-btn {
        font-size: 14px;
        padding: 10px 24px;
    }

    .skill-main-title {
        font-size: 48px;
    }

    .skill-main-subtitle {
        font-size: 20px;
    }

    .skill-description-list li {
        font-size: 16px;
        padding-left: 0;
    }

    .skill-section-header {
        font-size: 36px;
        margin-bottom: 40px;
    }

    .core-skills-sticky-wrap {
        top: 200px;
        padding: 12px 0 6px 0;
    }

    .core-skills-sticky-header {
        font-size: 36px;
    }

    .service-card-row {
        width: 100%;
        max-width: 900px;
        height: auto;
        min-height: 90px;
        padding: 20px 24px;
        margin: 0 auto;
    }

    .service-card-content .service-icon {
        width: 60px;
        height: 60px;
    }

    .service-card-content {
        gap: 10px;
    }

    .service-desc-shared {
        display: none;
    }
    
    /* Core Business 섹션 모바일 여백 조정 */
    #business-sec-main {
        padding-top: 0;
        padding-bottom: 0;
        min-height: auto;
        height: auto;
    }
    
    #business-sec-main .sub-header {
        padding-top: 0;
        padding-bottom: 30px;
    }
    

    
    .business-need-section {
        margin: 50px auto 0 auto;
    }
    
    .business-need-section h2 {
        font-size: 20px;
        margin-bottom: 28px;
    }
    
    .need-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .need-list li {
        font-size: 14px;
        padding: 20px 15px;
    }
    
    .need-list li .need-number {
        width: 28px;
        height: 28px;
        font-size: 12px;
        margin-bottom: 10px;
    }
    
    .team-role-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .role-card {
        width: 100%;
    }
    
    /* Core Skills 모바일 레이아웃 */
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 20px;
    }
    
    .skill-card {
        padding: 25px 18px;
        min-height: 170px;
    }
    
    .skill-icon {
        font-size: 40px;
        margin-bottom: 12px;
    }
    
    .skill-title {
        font-size: 16px;
    }
    
    .skill-en {
        font-size: 12px;
    }

    .hero-content-left h1 {
        font-size: 40px;
    }
    
    /* Who We Are 섹션 모바일 레이아웃 - 세로 배치, 가운데 정렬 */
    #about-sec-who .intro-text-row {
        flex-direction: column;
        gap: 30px;
        padding: 0 20px;
        align-items: center;
    }
    
    #about-sec-who .intro-text-col {
        max-width: 100%;
    }
    
    #about-sec-who .intro-text-col.intro-text-title {
        text-align: center;
    }
    
    #about-sec-who .intro-text-col.intro-text-title h3 {
        font-size: 28px;
        text-align: center;
    }
    
    #about-sec-who .intro-text-col.intro-text-description p {
        text-align: center;
        font-size: 16px;
        line-height: 1.8;
    }
    
    /* 모바일에서도 원형 이미지 표시 - 투명도 낮추기 */
    #about-sec-who .logo-graphic {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 250px;
        height: 250px;
        opacity: 0.15;
        z-index: 0;
    }
}

@media (max-width: 768px) {
    .home-bg-video {
        width: 100% !important;
        max-width: 400px;
        top: 30% !important;
        opacity: 0.2;
    }
    
    .company-intro-box {
        padding: 30px;
    }

    .service-card-row {
        width: 100%;
        height: auto;
        min-height: 80px;
        padding: 18px 20px;
    }

    .service-desc-shared {
        display: none;
    }

    .service-card-row .service-icon {
        width: 45px;
        height: 45px;
        flex-shrink: 0;
    }
    
    .service-card-content .service-icon {
        width: 45px;
        height: 45px;
    }
    
    .service-card-content {
        gap: 6px;
    }
    
    /* Core Business 섹션 태블릿/모바일 여백 추가 조정 */
    #business-sec-main .sub-header {
        padding-bottom: 25px;
    }
    
    /* Core Skills 768px 반응형 */
    .skill-split-layout {
        padding: 0 30px;
        gap: 30px;
    }

    .skill-detail-section {
        height: auto;
    }

    .skill-main-title {
        font-size: 40px;
    }

    .skill-main-subtitle {
        font-size: 18px;
    }

    .skill-action-btn {
        font-size: 13px;
        padding: 9px 20px;
    }

    .skill-description-list li {
        font-size: 15px;
        margin-bottom: 20px;
        padding-left: 0;
    }

    .skill-section-header {
        font-size: 32px;
        margin-bottom: 35px;
    }

    .core-skills-sticky-wrap {
        top: 190px;
        padding: 10px 0 5px 0;
    }

    .core-skills-sticky-header {
        font-size: 32px;
    }
    
    .skill-en {
        font-size: 12px;
    }
    
    #about-sec-who .logo-graphic {
        width: 240px;
        height: 240px;
        opacity: 0.2;
    }


    .service-card-content .service-icon {
        width: 50px;
        height: 50px;
    }

    .service-card-content {
        gap: 8px;
    }
    
    .service-card-row h3 {
        font-size: 18px;
    }
    
    .business-need-section {
        margin: 40px auto 0 auto;
    }
    
    .business-need-section h2 {
        font-size: 18px;
        margin-bottom: 24px;
    }
    
    .need-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .need-list li {
        font-size: 13px;
        padding: 18px 15px;
    }
    
    .need-list li .need-number {
        width: 24px;
        height: 24px;
        font-size: 11px;
        margin-bottom: 8px;
    }
    
    .hero-content-left h1 {
        font-size: clamp(32px, 8vw, 50px) !important;
        margin-bottom: 20px !important;
    }
    
    .hero-content-left p {
        font-size: clamp(14px, 3.5vw, 18px) !important;
        margin-bottom: 30px !important;
    }
    
    .text-outline {
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8) !important;
    }
    
    /* Who We Are 섹션 태블릿 레이아웃 */
    #about-sec-who .intro-text-col.intro-text-title h3 {
        font-size: 24px;
    }
    
    #about-sec-who .intro-text-col.intro-text-description p {
        font-size: 15px;
        line-height: 1.7;
    }
    
    #about-sec-who .intro-text-col.intro-text-description p br {
        display: none;
    }
    
    /* 태블릿에서 원형 이미지 크기 조정 */
    #about-sec-who .logo-graphic {
        width: 250px;
        height: 250px;
        opacity: 0.25;
    }
}

@media (max-width: 480px) {
    .hero-content-left h1 {
        font-size: clamp(28px, 7vw, 40px) !important;
    }
    
    .hero-content-left p {
        font-size: clamp(13px, 3vw, 16px) !important;
    }
    
    /* Core Business 섹션 소형 모바일 여백 최소화 */
    #business-sec-main .sub-header {
        padding-bottom: 20px;
    }
    

    
    .service-card-row {
        padding: 15px 18px;
        min-height: 70px;
    }
    
    .service-card-row .service-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    
    .service-card-content .service-icon {
        width: 40px;
        height: 40px;
    }
    
    .service-card-content {
        gap: 5px;
    }
    
    .service-card-row h3 {
        font-size: 16px;
    }
    
    .service-desc-inline .service-desc-text {
        font-size: 13px;
    }
    
    /* Core Skills 소형 모바일 */
    .skill-split-layout {
        padding: 0 20px;
        gap: 25px;
    }

    .skill-detail-section {
        height: auto;
    }

    .skill-main-title {
        font-size: 32px;
    }

    .skill-main-subtitle {
        font-size: 16px;
    }

    .skill-action-btn {
        font-size: 12px;
        padding: 8px 18px;
    }

    .skill-description-list li {
        font-size: 14px;
        margin-bottom: 18px;
        padding-left: 0;
    }

    .skill-section-header {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .core-skills-sticky-wrap {
        top: 170px;
        padding: 10px 0 5px 0;
    }

    .core-skills-sticky-header {
        font-size: 28px;
    }
    
    /* Who We Are 섹션 모바일 소형 화면 */
    #about-sec-who .intro-text-row {
        gap: 25px;
        padding: 0 15px;
    }
    
    #about-sec-who .intro-text-col.intro-text-title h3 {
        font-size: 22px;
        line-height: 1.5;
    }
    
    #about-sec-who .intro-text-col.intro-text-description p {
        font-size: 14px;
        line-height: 1.7;
    }
    
    /* 소형 화면에서 원형 이미지 더 작게 */
    #about-sec-who .logo-graphic {
        width: 180px;
        height: 180px;
        opacity: 0.1;
    }
}


.footer-fixed-identity {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
background: transparent !important;
}

body #app-container.identity-footer-padding {
    padding-bottom: 70px !important; /* 푸터 높이만큼 (조정 가능) */
}


@media (max-width: 900px) {
  #page-about-intro .snap-section,
  #page-about-intro .content-wrapper,
  #page-about-intro .intro-centered,
  #page-about-intro .team-role-grid,
  #page-about-intro .history-horizontal-wrapper {
    transform: translateY(-20px);
  }
}

/* 라이트 모드 네비게이션 점 색상 변경 (#0b0b0b) */
body.light-mode .nav-dot {
    border: 2px solid #0b0b0b !important;
    background: transparent !important;
}
/* 선택된 점은 다크모드와 동일하게 유지 */
body.light-mode .nav-dot.active {
    border: 2px solid #ff2c2c !important;
    background: #ff2c2c !important;
}
/* 라이트 모드용 스크롤 이미지로 교체 (강제 적용) */
body.light-mode .nav-scroll-text img {
    content: url('/img/scroll.png') !important;
}

.core-skills-fixed-title {
    position: fixed;
    top: calc(50vh - 460px) !important;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 9999;
    font-size: clamp(36px, 5.5vw, 56px);
    font-weight: 700;
    color: #fff;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

#team-sec-roles .content-wrapper.sub-header {
    margin-top: -28px !important;
}
#team-sec-roles .content-wrapper.sub-header p {
    margin-top: -10px !important;
}
#team-sec-roles .team-role-grid {
    margin-top: 44px !important;
}
#team-sec-roles .role-card-wrap {
    margin-top: 28px !important;
}
#team-sec-roles .role-bubble {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: #fff;
    color: #222;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 28px;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    white-space: nowrap;
    pointer-events: none;
}
#team-sec-roles .role-card {
    position: relative;
    z-index: 1;
}
#team-sec-roles .role-card:hover .role-bubble,
#team-sec-roles .role-card:focus .role-bubble {
    z-index: 100;
}

/* ================================================================
   [모바일 레이아웃 강제 최적화 - Overflow 방지]
   ================================================================ */

@media (max-width: 768px) {
    /* 1. 코어 스킬 섹션: 고정 너비 해제 및 텍스트 삐져나옴 방지 */
    .core-skills-left,
    .core-skills-right {
        min-width: 0 !important;
        width: 100% !important;
    }
    
    .skill-item-title,
    .skill-item-description {
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        height: auto !important;
    }

    /* 2. 연혁(History) 섹션: 과도한 300px 간격 축소 및 세로 배치 강제 */
    .history-card {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 20px 15px !important;
    }

    /* 3. 말풍선(Role Bubble): 화면 밖으로 나가는 현상 방지 */
    .role-bubble {
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        width: 85vw; /* 화면 너비에 맞춤 */
        max-width: 280px;
        text-align: center;
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
}

/* =========================================================
   [1] Core Business - 데스크탑/전역 스타일 (가로 5열, 박스 확대)
   *반드시 미디어 쿼리(모바일 설정)보다 위에 있어야 합니다.*
   ========================================================= */
.service-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 30px auto 20px auto;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap !important; /* 모바일에서 grid로 덮어쓰기 위해 important 추가 */
}

/* 확대된 정사각형 박스 설정 */
.service-box {
    flex: 0 0 210px !important;
    height: 210px !important;
    background: #fff;
    border-radius: 20px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-radius 0.4s ease, background 0.4s ease, transform 0.4s ease;
}

/* 마우스 오버 시 완벽한 정원으로 변경 */
.service-box:hover {
    border-radius: 50% !important;
    background: #ff2c2c !important;
    transform: translateY(-5px);
}

/* 텍스트 크기 확대 */
.service-box-title {
    font-size: 20px !important;
    font-weight: 700;
    color: #ff2c2c;
    margin: 0 0 12px 0;
    transition: color 0.4s ease;
    line-height: 1.3;
    word-break: keep-all;
}

.service-box-desc {
    font-size: 15px !important;
    font-weight: 400;
    color: #0b0b0b;
    line-height: 1.4;
    margin: 0;
    transition: color 0.4s ease;
    word-break: keep-all;
}

.service-box:hover .service-box-title,
.service-box:hover .service-box-desc {
    color: #fff !important;
}

/* --- [추가됨] 라이트 모드 Core Business 텍스트 색상 강제 고정 --- */
body.light-mode .service-box .service-box-title {
    color: #ff2c2c !important; /* 마우스 오버 전: 타이틀은 붉은색 강제 */
}
body.light-mode .service-box .service-box-desc {
    color: #0b0b0b !important; /* 마우스 오버 전: 설명은 검은색 강제 */
}
body.light-mode .service-box:hover .service-box-title,
body.light-mode .service-box:hover .service-box-desc {
    color: #ffffff !important; /* 마우스 오버 시: 모두 하얀색 강제 */
}
/* -------------------------------------------------------- */

/* =========================================================
   [2] 모바일 768px 이하 - Core Business 2열 정렬 및 자동 크기 조절
   ========================================================= */
@media (max-width: 768px) {
    #business-sec-main {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        height: auto !important;
        min-height: auto !important;
    }

    #business-sec-main .sub-header {
        padding-bottom: 25px !important; 
    }

    /* 2열 그리드 정렬 */
    .service-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        width: 100% !important;
        margin: 0 auto !important; 
        padding: 0 20px !important;
    }

    /* 비율 기반 정사각형 유지 */
    .service-box {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        padding: 15px 10px !important; 
        min-height: auto !important;
        border-radius: 15px !important;
    }

    /* 모바일 터치 시 완벽한 정원 유지 */
    .service-box:hover,
    .service-box:active {
        border-radius: 50% !important;
    }

    /* 모바일 텍스트 크기 자동 축소 */
    .service-box-title {
        font-size: 16px !important; 
        margin: 0 0 8px 0 !important;
    }

    .service-box-desc {
        font-size: 13px !important; 
        line-height: 1.3 !important;
    }
}

/* =========================================================
   [3] 모바일 480px 이하 - 아주 작은 화면 추가 최적화
   ========================================================= */
@media (max-width: 480px) {
    .team-role-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 20px;
    }

    .skill-main-title {
        font-size: 32px !important;
    }
    
    .history-year-left {
        font-size: 28px !important;
    }

    .service-list {
        gap: 10px !important;
        padding: 0 15px !important;
    }
    
    .service-box {
        padding: 10px 5px !important;
    }

    .service-box-title {
        font-size: 14px !important;
        margin: 0 0 5px 0 !important;
    }

    .service-box-desc {
        font-size: 11px !important;
        line-height: 1.25 !important;
        word-break: keep-all;
    }
}
/* 최종 위치 미세 조정 */

/* 1. Who We Are */
#about-sec-who .content-wrapper {
    transform: translateY(15px) !important;
}

/* 2. Core Skills 위치 미세 조정 */
.core-skills-fixed-title {
    top: calc(50vh - 370px) !important; 
}
.core-skills-slide-wrapper {
    margin-top: 210px !important; 
}

/* 3. Our Team */
#team-sec-roles {
    padding-top: 40px !important; /* 100px -> 60px */
}
#team-sec-roles .content-wrapper.sub-header {
    margin-top: 10px !important; /* 50px -> 10px */
    transform: translateY(10px) !important; /* 30px -> 10px */
}

/* 4. History */
#history-sec-timeline {
    padding-top: 80px !important; /* 130px -> 100px */
}
#history-sec-timeline .content-wrapper.sub-header {
    transform: translateY(20px) !important; /* 50px -> 20px */
}

/* 모바일 전용 최적화 */
@media (max-width: 768px) {
    /* [공통 설정] */
    #page-about-intro .snap-section {
        justify-content: flex-start !important;
        padding-top: calc(var(--identity-header-h, 90px) + 8px) !important;
        padding-bottom: calc(var(--identity-footer-h, 70px) + var(--identity-nav-zone-h, 92px) + 8px) !important;
        height: 100dvh !important;
        box-sizing: border-box !important;
    }
    body:has(#page-about-intro.active) #scroll-hint-overlay { display: none !important; }
    
    /* 하단 내비게이션 위치 */
    #horizontal-nav { 
        bottom: calc(var(--identity-footer-h, 70px) + 8px) !important;
        transform: translateX(-50%) scale(0.75) !important; 
        transform-origin: bottom center; 
    }

    /* R&D Center 모바일 최적화 */
    /* 1. 타이틀 상하 여백 추가 (헤더 겹침 방지 및 이미지와 간격 벌림) */
    #rnd-sec-cert .sub-header {
        margin-top: 35px !important;
        padding-bottom: 35px !important;
        margin-bottom: 15px !important;
        transform: none !important;
    }

    /* 2. 콘텐츠 세로 스크롤 허용 및 하단 잘림 방지 */
    #rnd-sec-cert .content-wrapper:not(.sub-header) {
        margin-top: 0 !important;
        max-height: calc(100dvh - 180px) !important;
        overflow-y: auto !important;
        padding: 0 15px 40px 15px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        /* 스크롤바 숨기기 (선택사항) */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    #rnd-sec-cert .content-wrapper:not(.sub-header)::-webkit-scrollbar {
        display: none;
    }

    /* 내부 flex 요소 간격 축소 */
    #rnd-sec-cert .content-wrapper > div {
        gap: 20px !important;
    }

    /* 3. 이미지 크기 대폭 축소 (모바일 화면 비율에 맞춤) */
    #rnd-sec-cert .rnd-img-mobile-top {
        flex: 0 0 auto !important;
        margin-bottom: 5px !important;
        gap: 8px !important;
    }
    #rnd-sec-cert .rnd-img-wrapper img {
        max-width: 150px !important;
    }
    #rnd-sec-cert span[onclick="openRndModal()"] {
        font-size: 11px !important;
    }

    /* 4. 텍스트 폰트 사이즈 및 자동 줄바꿈(잘림 방지) 최적화 */
    #rnd-sec-cert .rnd-text-wrapper {
        flex: 0 0 auto !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 텍스트가 화면 밖으로 나가지 않도록 강제 줄바꿈 속성 추가 */
    #rnd-sec-cert .rnd-text-wrapper h2,
    #rnd-sec-cert .rnd-text-wrapper p {
        white-space: normal !important; 
        word-break: break-word !important; 
        overflow-wrap: break-word !important;
    }

    #rnd-sec-cert .rnd-text-wrapper h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    #rnd-sec-cert .rnd-text-wrapper p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
    /* 모바일 줄바꿈 유지 */
    #rnd-sec-cert .rnd-text-wrapper p br {
        display: block !important; 
        content: ""; 
        margin-top: 5px;
    }
    #rnd-sec-cert .rnd-text-wrapper p strong {
        font-size: 13px !important;
    }

    /* Who We Are */
    #about-sec-who { justify-content: flex-start !important; }
    
    #about-sec-who::before {
        height: 100% !important;
        top: 0 !important;
        background-size: cover !important;
    }

    #about-sec-who .sub-header {
        margin-top: 45px !important;
        padding-bottom: 5px !important;
        margin-bottom: 0 !important;
    }

    #about-sec-who .content-wrapper {
        transform: translateY(0) !important;
        padding: 0 5px !important; 
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    #about-sec-who .intro-text-row {
        padding: 0 !important; width: 100% !important; gap: 15px !important; margin-top: 5px !important;
    }
    #about-sec-who .intro-text-col.intro-text-title h3 { font-size: 22px !important; margin-bottom: 5px !important; padding: 0 5px !important; }
    #about-sec-who .intro-text-col.intro-text-description p { font-size: 14px !important; line-height: 1.6 !important; padding: 0 5px !important; }
    #about-sec-who .intro-text-col.intro-text-description p strong { padding-bottom: 1px !important; background-position: 0 88% !important; }

    /* Core Business */
    #business-sec-main { justify-content: flex-start !important; }
    #business-sec-main .sub-header { transform: translateY(0) !important; padding-bottom: 10px !important; margin-bottom: 5px !important; }
    #business-sec-main .business-title-small { font-size: 28px !important; } 
    
    .service-list { 
        margin-top: 40px !important;
        gap: 8px !important; 
        padding: 0 10px !important; 
    }
    .service-box { padding: 10px 5px !important; border-radius: 12px !important; }
    .service-box-title { font-size: 13px !important; margin-bottom: 4px !important; }
    .service-box-desc { font-size: 11px !important; line-height: 1.25 !important; }

    /* Core Skills */
    .core-skills-fixed-title { top: 90px !important; font-size: 24px !important; margin-top: 0 !important; }
    
    .core-skills-slide-wrapper {
        margin-top: 105px !important; 
        margin-bottom: 0 !important; padding: 0 10px !important; width: 100% !important; max-width: 100% !important;
        flex: 1 !important; max-height: calc(100dvh - 190px) !important; align-items: flex-start !important;
    }
    .core-skills-card { padding: 15px 12px !important; min-height: auto !important; height: auto !important; justify-content: flex-start !important; border-radius: 16px !important; gap: 5px !important; overflow-y: auto !important; }
    .core-skills-left { margin-bottom: 0 !important; gap: 5px !important; flex: 0 0 auto !important; min-width: 0 !important; }
    .skill-animated-icon { display: none !important; }
    .skill-main-title { font-size: 20px !important; margin: 0 !important; line-height: 1.2 !important; }
    .skill-main-subtitle { font-size: 13px !important; margin: 0 0 8px 0 !important; }
    .skill-action-btn { font-size: 11px !important; padding: 6px 12px !important; margin: 0 !important; align-self: flex-start;}
    .skill-right { min-width: 0 !important; }
    
    /* 텍스트 줄바꿈 안정화 */
    .color-fill-title { 
        white-space: nowrap !important; 
        width: max-content !important; 
        display: inline-block !important;
    }
    .color-fill-title .title-base, .color-fill-title .title-fill { white-space: nowrap !important; }

    .skill-description-list { margin-top: 5px !important; }
    .skill-description-list li { margin-bottom: 8px !important; line-height: 1.3 !important; font-size: 11px !important; }
    .skill-item-title { font-size: 12px !important; padding: 2px 4px !important; margin-bottom: 2px !important; }

    /* Our Team */
    #team-sec-roles .sub-header { margin-top: 0 !important; padding-bottom: 10px !important; margin-bottom: 0 !important; transform: none !important; }
    #team-sec-roles .business-title-small { font-size: 24px !important; margin-bottom: 5px !important; }
    #team-sec-roles .sub-header p { font-size: 12px !important; margin: 0 !important; }
    .team-role-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px 10px !important; margin-top: 5px !important; padding: 0 10px !important; width: 100% !important; flex: 1 !important; align-content: flex-start !important; }
    .role-card-wrap { margin-top: 0 !important; -webkit-tap-highlight-color: transparent; }
    .role-card { padding: 8px 5px !important; aspect-ratio: auto !important; height: auto !important; justify-content: flex-start !important; }
    .role-card-img-wrap { width: 45px !important; height: 45px !important; margin: 5px auto 5px !important; }
    .role-card-info { padding: 0 !important; gap: 1px !important; }
    .role-name-kr { font-size: 13px !important; line-height: 1.2 !important; }
    .role-name-en { font-size: 10px !important; }
    .role-bubble { display: block !important; width: 140px !important; font-size: 11px !important; padding: 8px 10px !important; top: -45px !important; white-space: normal !important; word-break: keep-all !important; line-height: 1.3 !important; pointer-events: none !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease, transform 0.3s ease !important; }
    .role-card:active .role-bubble, .role-card:focus .role-bubble, .role-card:hover .role-bubble { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; z-index: 100 !important; }

    /* History */
    #history-sec-timeline .sub-header {
        margin-top: 35px !important; 
        padding-bottom: 35px !important;
        transform: none !important; margin-bottom: 0 !important;
    }
    #history-sec-timeline .business-title-small { font-size: 24px !important; }
    .history-horizontal-wrapper { padding: 0 5px !important; margin-top: 0 !important; width: 100% !important; max-width: 100% !important; }
    .history-cards-container { width: 100% !important; gap: 15px !important; }
    .history-card { padding: 15px 5px !important; gap: 8px !important; width: 100% !important; align-items: center !important; flex-direction: row !important; }
    .history-year-left { font-size: 18px !important; padding: 6px 10px !important; white-space: nowrap !important; flex-shrink: 0 !important; width: auto !important; }
    .history-content { width: auto !important; flex: 1 !important; min-width: 0 !important; }
    .history-title { font-size: 14px !important; margin-bottom: 4px !important; white-space: nowrap !important; overflow: visible !important; }
    .history-desc { font-size: 12px !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
    .marquee-wrapper { margin-top: 20px !important; }
    .marquee-text { font-size: 20px !important; padding: 0 10px !important;}
}

    /* ================================================================
       Small Viewport Tuning (Desktop/Laptop Reduced View)
       ================================================================ */
    @media (min-width: 769px) and (max-width: 1366px),
           (min-width: 769px) and (max-height: 900px) {
        /* 공통: 하단 내비 영역과 콘텐츠 분리 */
        #page-about-intro .snap-section {
            padding-bottom: calc(var(--identity-footer-h, 70px) + var(--identity-nav-zone-h, 92px) + 18px) !important;
        }

        #horizontal-nav {
            bottom: calc(var(--identity-footer-h, 70px) + 10px) !important;
            transform: translateX(-50%) scale(0.9) !important;
            transform-origin: bottom center;
        }

        /* 1) Who We Are */
        #about-sec-who .sub-header {
            margin-top: 8px !important;
            padding-bottom: 78px !important;
        }

        #about-sec-who .sub-header h1 {
            font-size: clamp(56px, 4.8vw, 66px) !important;
            transform: translateY(10px) !important;
        }

        #about-sec-who .intro-text-row {
            transform: translateY(-16px) !important;
            gap: 56px !important;
            max-width: 1220px !important;
        }

        #about-sec-who .intro-text-col.intro-text-title h3 {
            font-size: 32px !important;
            line-height: 1.35 !important;
        }

        #about-sec-who .intro-text-col.intro-text-description p {
            font-size: 16px !important;
            line-height: 1.75 !important;
        }

        /* 2) Core Skills */
        .core-skills-fixed-title {
            font-size: clamp(46px, 4.4vw, 58px) !important;
            top: calc(50vh - 348px) !important;
        }

        .core-skills-slide-wrapper {
            margin-top: 188px !important;
            margin-bottom: 56px !important;
            max-width: 1100px !important;
        }

        .core-skills-card {
            max-width: 1040px !important;
            padding: 38px 32px !important;
            min-height: 280px !important;
        }

        .core-skills-content {
            gap: 34px !important;
        }

        .core-skills-left {
            flex: 0 0 280px !important;
            min-width: 200px !important;
        }

        .skill-main-title {
            font-size: 54px !important;
        }

        .skill-main-subtitle {
            font-size: 21px !important;
        }

        .skill-action-btn {
            font-size: 14px !important;
            padding: 10px 22px !important;
        }

        .skill-description-list li {
            font-size: 16px !important;
            margin-bottom: 16px !important;
            line-height: 1.65 !important;
        }

        .skill-item-title {
            font-size: 19px !important;
        }

        /* 3) Our Team */
        #team-sec-roles .sub-header {
            margin-top: 12px !important;
            padding-bottom: 14px !important;
            transform: translateY(10px) !important;
        }

        #team-sec-roles .business-title-small {
            font-size: clamp(44px, 4.2vw, 54px) !important;
        }

        #team-sec-roles .team-role-grid {
            max-width: 830px !important;
            gap: 16px !important;
            margin-top: 14px !important;
        }

        #team-sec-roles .role-card-img-wrap {
            width: 120px !important;
            height: 120px !important;
            margin: 18px auto 8px !important;
        }

        #team-sec-roles .role-card-info {
            padding: 10px 10px 22px !important;
            gap: 3px !important;
        }

        #team-sec-roles .role-name-kr {
            font-size: 20px !important;
        }

        #team-sec-roles .role-name-en {
            font-size: 13px !important;
        }

        #team-sec-roles .role-bubble {
            font-size: 14px !important;
            padding: 12px 18px !important;
        }
    }