/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

/* ===== Figma [260226]원마이스_홈페이지 구조 기준 =====
   - 캔버스: 1920×7563
   - 공통 좌우 패딩: 96px
   - 콘텐츠 영역 최대 너비: 1728px (1920 - 96*2)
   - 섹션 순서: slider(hero) → Welcome → History → Business → Portfolio → 복지/인재선발 → Contact → Footer
   - Header: 1920×100, 로고(96) | nav(550~1370) | Contact버튼(1624)
   - Contact: 배경 #0b1b3c, 좌측 라벨+CONTACT(120px), 우측 연락처블록(max 697px), 하단 맵 1920×486.25
   - Footer: 1920×96.75, 로고(96) | Copyright 가운데
*/

:root {
    /* Figma 구조 토큰 */
    --figma-page-padding: 96px;
    --figma-content-max: 1728px;
    --figma-header-height: 100px;
    --figma-footer-height: 90px;
    --figma-contact-map-height: 486.25px;
    --figma-hero-content-width: 1284px;

    --primary-blue: #33a1e0;
    --dark-blue: #0b1b3c;
    --light-blue: #024698;
    --gradient-start: #1a5387;
    --gradient-end: #33a1e0;
    --bg-light: #f0f2f5;
    --bg-welcome: #e9e8f0;
    --bg-welfare: #f4f3f8;
    --text-dark: #000000;
    --text-gray: #888888;
    --text-light-gray: #666666;
    --white: #ffffff;
    --border-radius: 20px;
    --border-radius-small: 8px;
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 48px;
    --spacing-xl: 96px;

    /* 반응형 브레이크포인트 (화면마다 적용) */
    --bp-desktop-lg: 1439px;   /* 1440px 미만: 데스크톱 */
    --bp-desktop: 1279px;     /* 1280px 미만: 소형 데스크톱 */
    --bp-tablet: 1023px;      /* 1024px 미만: 태블릿 가로 */
    --bp-tablet-sm: 767px;    /* 768px 미만: 태블릿 세로 */
    --bp-mobile: 479px;       /* 480px 미만: 모바일 */
    --bp-mobile-sm: 359px;    /* 360px 미만: 소형 모바일 */
}

body {
    font-family: 'NanumSquare Neo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Header (PC~모바일 반응형) */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    height: var(--figma-header-height);
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: height 0.2s ease;
}

.header-container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--figma-page-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
}

.logo {
    flex-shrink: 0;
}

.logo img {
    width: auto;
    display: block;
    transition: height 0.2s ease;
}

.nav {
    display: flex;
    gap: 0;
    align-items: right;
    flex: 1;
    justify-content: right;
    min-width: 0;
}

.nav-item {
    padding: 0 clamp(12px, 1.2vw, 20px);
    height: var(--figma-header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-dark);
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 800;
    font-size: clamp(16px, 1.05vw, 20px);
    white-space: nowrap;
    transition: color 0.3s;
    min-width: min(80px, 12vw);
    flex-shrink: 1;
}

.nav-item:hover {
    color: var(--primary-blue);
}

.contact-btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--primary-blue) 50%, var(--primary-blue) 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    padding: clamp(12px, 1.2vw, 18px) clamp(24px, 2vw, 38px);
    color: var(--white);
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 1.05vw, 20px);
    cursor: pointer;
    transition: transform 0.3s;
}

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

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px;
    color: var(--text-dark);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    background: var(--white);
    z-index: 999;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.mobile-menu.active {
    display: block;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-nav-item {
    padding: 16px;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 700;
    font-size: 18px;
    border-bottom: 1px solid #eee;
}

/* Hero Section - 인터랙션 (opener 스타일 순차 등장) */
@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(36px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroRevealIcon {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* SINCERITY 붙어있다가 → 아이콘 좌측에서 등장하며 CERITY 우측으로 밀림 */
@keyframes heroIconWrapExpand {
    from {
        width: 0;
        min-width: 0;
        margin-left: -20px;
        margin-right: -20px;
        opacity: 1;
    }
    to {
        width: 160px;
        min-width: 160px;
        margin-left: 0;
        margin-right: 0;
        opacity: 1;
    }
}

@keyframes heroIconSlideIn {
    from {
        opacity: 0;
        transform: translateX(-32px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* 5초 간격: 아이콘 나왔다가 다시 들어가는 루프 (0% 숨김 → 10% 등장 → 50% 유지 → 60% 퇴장 → 100% 숨김) */
@keyframes heroIconWrapCycle {
    0% {
        width: 0;
        min-width: 0;
        margin-left: -20px;
        margin-right: -20px;
        opacity: 1;
    }
    10% {
        width: 160px;
        min-width: 160px;
        margin-left: 0;
        margin-right: 0;
        opacity: 1;
    }
    50% {
        width: 160px;
        min-width: 160px;
        margin-left: 0;
        margin-right: 0;
        opacity: 1;
    }
    60% {
        width: 0;
        min-width: 0;
        margin-left: -20px;
        margin-right: -20px;
        opacity: 1;
    }
    100% {
        width: 0;
        min-width: 0;
        margin-left: -20px;
        margin-right: -20px;
        opacity: 1;
    }
}

@keyframes heroIconSlideCycle {
    0% {
        opacity: 0;
        transform: translateX(-32px) scale(0.96);
    }
    10% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    60% {
        opacity: 0;
        transform: translateX(-32px) scale(0.96);
    }
    100% {
        opacity: 0;
        transform: translateX(-32px) scale(0.96);
    }
}

.hero-section {
    background: var(--bg-light);
    min-height: 980px;
    display: flex;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

/* PC: 타이틀/서브타이틀/설명 순차 등장 (opener 스타일) */
/* 1번째 줄: SIN, CERITY 먼저 → 그 다음 가운데 아이콘 등장 */
.hero-pc .hero-title:nth-of-type(1) .hero-word {
    animation: heroReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
/* 1번째 줄: SINCERITY 붙었다가 아이콘 좌→등장, CERITY 우로 밀림 → 5초마다 나왔다 들어가는 루프 */
.hero-pc .hero-title:nth-of-type(1) .hero-icon-wrap {
    animation: heroIconWrapCycle 5s linear 0.5s infinite;
}
.hero-pc .hero-title:nth-of-type(1) .hero-icon {
    animation: heroIconSlideCycle 5s linear 0.5s infinite;
}
.hero-pc .hero-subtitle:nth-of-type(1) {
    animation: heroReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
/* 2번째 줄: ONE, MICE'S 먼저 → 그 다음 가운데 아이콘 등장 */
.hero-pc .hero-title:nth-of-type(2) .hero-word {
    animation: heroReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
/* 2번째 줄: ONE MICE'S 붙었다가 아이콘 좌→등장, MICE'S 우로 밀림 → 5초마다 나왔다 들어가는 루프 */
.hero-pc .hero-title:nth-of-type(2) .hero-icon-wrap {
    animation: heroIconWrapCycle 5s linear 0.85s infinite;
}
.hero-pc .hero-title:nth-of-type(2) .hero-icon {
    animation: heroIconSlideCycle 5s linear 0.85s infinite;
}
.hero-pc .hero-subtitle:nth-of-type(2) {
    animation: heroReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
}
.hero-content .hero-description {
    animation: heroReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.95s both;
}

/* 태블릿/모바일: 블록 단위 순차 등장 */
.hero-tablet .hero-block:nth-child(1) {
    animation: heroReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.hero-tablet .hero-block:nth-child(2) {
    animation: heroReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.hero-container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--figma-page-padding);
    margin-top:30px;
}

.hero-content {
    max-width: 1284px;
}

.hero-text-wrapper {
    margin-bottom: 40px;
}

.hero-title {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 800;
    font-size: 100px;
    line-height: 120px;
    letter-spacing: -2.4px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 0;
}

.hero-word {
    display: inline-block;
}

/* 태블릿용 블록 구조는 PC에서 숨김 */
.hero-tablet {
    display: none;
}

/* PC(1025px 이상): SIN [아이콘] CERITY / ONE [아이콘] MICE'S 가로 배치 */
@media (min-width: 1025px) {
    .hero-pc {
        display: block;
    }

    .hero-tablet {
        display: none;
    }

    .hero-title-line {
        display: contents;
    }

    .hero-icon-wrap {
        display: contents;
    }

    /* 아이콘 래퍼를 박스로 (SINCERITY→SIN+아이콘+CERITY 밀어내기 인터랙션용) + 처음엔 들어간 상태 */
    .hero-pc .hero-title:nth-of-type(1) .hero-icon-wrap,
    .hero-pc .hero-title:nth-of-type(2) .hero-icon-wrap {
        display: block;
        overflow: hidden;
        height: 120px;
        flex-shrink: 0;
        width: 0;
        min-width: 0;
        margin-left: -20px;
        margin-right: -20px;
    }

    /* PC 히어로 아이콘: 처음엔 숨김 → 애니메이션으로 부드럽게 등장 */
    .hero-pc .hero-title .hero-icon {
        opacity: 0;
        transform: translateX(-32px) scale(0.96);
    }

    .hero-title .hero-icon {
        order: 1;
    }

    .hero-title .hero-word:nth-child(1) {
        order: 0;
    }

    .hero-title .hero-word:nth-child(3) {
        order: 2;
    }
}

/* 1024px 이하: 이미지 → SINCERITY → IS THE CORE OF / 이미지 → ONEMICE'S → CORPORATE ETHICS. */
@media (max-width: 1024px) {
    .hero-pc {
        display: none !important;
    }

    .hero-tablet {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-bottom: 40px;
    }

    .hero-tablet .hero-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .hero-tablet .hero-block .hero-icon {
        display: block;
    }

    .hero-tablet .hero-block .hero-title,
    .hero-tablet .hero-block .hero-subtitle {
        margin: 0;
    }
}

.hero-icon {
    width: 160px;
    height: 120px;
    border-radius: 20px;
    object-fit: cover;
    transition: all 0.3s ease;
    cursor: pointer;
}

.hero-icon:hover {
    transform: scale(1.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    filter: brightness(1.5);
}

.hero-subtitle {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 800;
    font-size: 100px;
    line-height: 120px;
    letter-spacing: -2.4px;
    color: var(--text-dark);
    margin: 0;
}

.hero-description {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: -0.64px;
    color: var(--dark-blue);
    max-width: 905px;
    margin-top: 40px;
}

/* PC(1025px~): 설명문 2줄로 표시 (모바일용 br 숨김) */
@media (min-width: 1025px) {
    .hero-description .hero-br-mobile {
        display: none;
    }
}

/* Welcome Section */
.welcome-section {
    background: var(--white);
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

.welcome-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../image/welcome-bg.webp') center/cover;
    z-index: 0;
}

.welcome-container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--figma-page-padding);
    position: relative;
    z-index: 1;
}

.section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.label-dot {
    width: 8px;
    height: 8px;
    background: var(--white);
    border-radius: 50%;
}

.label-text {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 900;
    font-size: 20px;
    color: var(--white);
    letter-spacing: 0;
}

.contact-section#contact .section-label{
    display: none;
}

.section-title-large {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 900;
    font-size: 15em;
    letter-spacing: -5.6px;
    color: var(--white);
    margin-bottom: 60px;
    text-align: center;
}

.welcome-content {
    background: var(--bg-light);
    border-radius: var(--border-radius);
    padding: 80px;
    display: grid;
    /* 프로필 카드는 필요한 만큼만, 인사말 텍스트 영역이 넓게 */
    grid-template-columns: minmax(280px, 365px) 1fr;
    gap: 80px;
    align-items: start;
}

.welcome-card {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.welcome-profile {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.profile-image {
    width: 172px;
    height: 172px;
    border-radius: var(--border-radius-small);
    object-fit: cover;
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-name {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: var(--text-dark);
    letter-spacing: -0.48px;
}

.profile-title {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--text-gray);
    letter-spacing: -0.4px;
}

.welcome-quote {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 800;
    font-size: 46px;
    line-height: 55.2px;
    letter-spacing: -0.92px;
    color: var(--light-blue);
}

.welcome-text {
    font-family: 'NanumSquare Neo', sans-serif;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.4px;
    color: var(--text-dark);
    /* 줄바꿈 시 반응형으로 잘 보이게 */
    min-width: 0;
    overflow-wrap: break-word;
    word-break: keep-all;
}

.welcome-text ul{
    padding-left:25px;
}

/* ===== History Section (Figma 기준) =====
   - 페이지 패딩 96px, 컨테이너 내 좌측 96px부터 콘텐츠
   - 카드 시작 x=326 → 타임라인 padding-left = 326-96 = 230px
   - 마커(Frame 6) x=572, 24×24 → 타임라인 기준 left = 572-96-230 = 246px
   - 연결선(Line) x=583, 1px, #d09c1f → 마커 중심 = 246+12 = 258px
   - 카드 width=1268px, 첫 카드 height=170px, 연도 카드 height=148px
   - 아이템 간 gap 20px
   반응형: 1024px(좌측 120px/마커 112/선 124) | 1000px(80/72/83) | 768px(마커·선 오른쪽) | 480px·360px(타이포·여백 축소)
*/
.history-section {
    background: var(--bg-welcome);
    padding: 100px 0;
    position: relative;
    overflow: visible;
}

.history-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../image/png-light-blue-ribbons-border-watercolor-backgrounds-white-background-creativity 1.webp') center/cover;
    opacity: 0.3;
    z-index: 0;
}

.history-container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--figma-page-padding);
    position: relative;
    z-index: 1;
}

.history-section .section-label .label-dot {
    background: var(--primary-blue);
}

.history-section .label-text {
    color: var(--dark-blue);
}

/* History Timeline - PC에서 뷰포트에 비례해 padding/연결선 부드럽게 조절 (230px~80px) */
.history-timeline {
    --timeline-padding-left: clamp(80px, calc(13vw - 20px), 230px);
    --timeline-line-left: calc(var(--timeline-padding-left) + 28px);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    padding-left: var(--timeline-padding-left);
    overflow: visible;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
    overflow: visible;
    z-index: 1;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* 연결선 - Figma Line x=583, #d09c1f, 마커 중심을 잇는 세로선 */
/*.history-timeline::before {
    content: '';
    position: absolute;
    left: var(--timeline-line-left);
    top: 0;
    bottom: 0;
    width: 1px;
    background: #d09c1f;
    z-index: 0;
    display:none;
}*/

/* Timeline Card - Figma width=1268px */
.timeline-card {
    width: 100%;
    max-width: 1268px;
    background: #f0f2f5;
    border-radius: 10px;
    padding: 40px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    box-sizing: border-box;
}

.timeline-card-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* 인트로 카드 - Figma 기준 height=170px */
.timeline-card-intro {
    min-height: 170px;
    padding: 40px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Highlight 카드 (두 번째) - Figma height=170px */
.timeline-card-highlight {
    min-height: 170px;
    position: relative;
}

.timeline-card-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../image/history-first-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    z-index: 0;
}

.timeline-card-highlight .timeline-card-inner {
    position: relative;
    z-index: 1;
}

/* 연도 카드 공통 - Figma height=148px */
.timeline-card-year {
    min-height: 148px;
    position: relative;
    overflow: hidden;
}

.timeline-card-year .timeline-card-inner {
    position: relative;
    z-index: 1;
}

/* 2025 카드 (세 번째) */
.timeline-card-2025::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background-image: url('../image/histroy-second-bg.webp');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* 2015 카드 (네 번째) */
.timeline-card-2015::after {
    content: '';
    position: absolute;
    top: 30px;
    right: 25px;
    bottom: 0;
    width: 25%;
    background-image: url('../image/history-third-bg.webp');
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* 2004 카드 (다섯 번째) - 배경 없음 */
.timeline-card-2004 {
    background: #f0f2f5;
}

.timeline-description {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 44.8px;
    color: #0b1b3c;
    max-width: 662.6px;
    margin: 0;
    flex-shrink: 0;
    white-space: normal;
    word-break: keep-all;
}

.timeline-underline {
    color: #024698;
    text-underline-offset: 5px;
}

.timeline-icons {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.timeline-icons img {
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* 첫 번째 아이콘 - Figma 기준 width=79.72px, height=76.98px */
.timeline-icons img:first-child {
    width: 79.72px;
    height: 76.98px;
}

/* 두 번째 아이콘 - 첫 번째와 동일 높이로 정렬 */
.timeline-icons img:last-child {
    height: 76.98px;
    width: auto;
}

.timeline-divider {
    width: 1px;
    height: 60px;
    background: #d9d9d9;
    flex-shrink: 0;
}

.timeline-header {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 230px;
}

.timeline-date {
    font-family: 'Bodoni MT', serif;
    font-weight: 700;
    font-size: 54px;
    line-height: 54px;
    color: #ffffff; /* highlight 카드에서만 사용 */
}

/* 날짜 중 월(07)만 2/3 크기 */
.timeline-date-month {
    font-size: 66.6667%; /* 2/3 */
    line-height: 1;
    vertical-align: baseline;
}

.timeline-year {
    font-family: 'Bodoni MT', serif;
    font-weight: 700;
    font-size: 54px;
    line-height: 54px;
}

.timeline-card-2025 .timeline-year {
    color: #666666;
    transition: color 0.25s ease;
}

.timeline-card-2025 .timeline-year:hover {
    color: #333333;
}

.timeline-card-2015 .timeline-year,
.timeline-card-2004 .timeline-year {
    color: #666666;
    transition: color 0.25s ease;
}

.timeline-card-2015 .timeline-year:hover,
.timeline-card-2004 .timeline-year:hover {
    color: #333333;
}

.timeline-content {
    flex: 1;
    margin-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.timeline-content-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.timeline-title-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.timeline-badge {
    display: inline-block;
    width: 74px; /* Figma 기준 정확한 너비 */
    height: auto; /* 이미지 비율 유지 */
    object-fit: contain;
}

.timeline-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-bottom: 8px;
}

.timeline-title {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 32px;
    margin: 0;
}

.timeline-card-highlight .timeline-title {
    color: #ffffff;
}

.timeline-card-2025 .timeline-title,
.timeline-card-2015 .timeline-title,
.timeline-card-2004 .timeline-title {
    color: #000000;
}

.timeline-subtitle {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: -0.4px;
    margin: 0;
    padding-top:10px;
}

.timeline-card-highlight .timeline-subtitle {
    color: #ffffff;
    opacity: 0.8;
}

.timeline-card-2025 .timeline-subtitle,
.timeline-card-2015 .timeline-subtitle,
.timeline-card-2004 .timeline-subtitle {
    color: #888888;
}

.timeline-btn {
    background: linear-gradient(90deg, #126dd9 0%, #134cba 48.58%, #126dd9 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 16.5px 24px;
    color: #ffffff;
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 30.8px;
    cursor: pointer;
    margin: 0;
    transition: transform 0.3s;
    flex-shrink: 0;
    white-space: nowrap;
    width: 274px;
    align-self: center; /* 동일한 높이로 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.timeline-image {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 174px;
    height: 130px;
    object-fit: cover;
    z-index: 2;
}

/* Business Section */
.business-section {
    background: var(--white);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.business-section::before {
    content: '';
    position: absolute;
    top: -500px;
    left: -500px;
    width: 3000px;
    height: 3000px;
    background: radial-gradient(circle, #000a1d 40%, #062053 50%, #2d53a3 60%, #4374d8 70%, #ffffff 100%);
    border-radius: 50%;
    z-index: 0;
}

.business-container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--figma-page-padding);
    position: relative;
    z-index: 1;
}

.business-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.business-section-header .section-label {
    margin-bottom: 0;
}

.business-section .section-label .label-dot {
    background: var(--primary-blue);
}

.business-section .label-text {
    color: var(--white);
}

.business-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 60px;
}

/* 1400px 이하: business 카드 2열, welcome 텍스트 아래로·넓게 */
@media (max-width: 1400px) {
    .business-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .welcome-content {
        grid-template-columns: 1fr;
        padding: 60px 48px;
        gap: 48px;
    }

    .welcome-text {
        max-width: 100%;
        width: 100%;
    }
}

.business-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.business-image {
    width: 100%;
    height: 234.56px;
    object-fit: cover;
}

.business-content {
    padding: 40px 20px;
}

.business-title {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 28.8px;
    color: var(--dark-blue);
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.business-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.business-list li {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: var(--text-dark);
    letter-spacing: -0.5px;
    padding-left: 24px;
    position: relative;
}

.business-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 16px;
    height: 16px;
    background: var(--primary-blue);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Portfolio Section */
.portfolio-section {
    background: var(--white);
    padding: 100px 0;
}

.portfolio-container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--figma-page-padding);
}

.portfolio-section .section-label .label-dot {
    background: var(--primary-blue);
}

.portfolio-section .label-text {
    color: var(--dark-blue);
}

.portfolio-head-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 20px;
}

.portfolio-head-row .section-label {
    margin-bottom: 0;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
    align-items: stretch;
}

.portfolio-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.portfolio-column:last-child .portfolio-card {
    height: 100%;
}

/* History 스타일 카드형 */
.portfolio-card {
    width: 100%;
    background: #f0f2f5;
    border-radius: 10px;
    padding: 40px 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

.portfolio-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    width: 100%;
}

.portfolio-image-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 이미지 원본 비율 그대로 표시(크롭 없음) */
.portfolio-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
}

.portfolio-info {
    flex: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.portfolio-title {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.48px;
    margin: 0;
    color: var(--dark-blue);
    text-align:center;
}

.portfolio-cert-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    height: 100%;
    align-items: stretch;
}

.portfolio-cert-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

@media (max-width: 1023px) {
    .portfolio-head-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.portfolio-subtitle {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.4px;
    margin: 0;
    color: #888888;
}

/* Welfare Section */
.welfare-section {
    background: var(--bg-welfare);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.welfare-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #531ece 0%, rgba(83, 30, 206, 0) 50%);
    opacity: 0.15;
    z-index: 0;
}

.welfare-container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--figma-page-padding);
    position: relative;
    z-index: 1;
}

.welfare-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.welfare-download-btn {
    display: inline-block;
    background: linear-gradient(90deg, #126dd9 0%, #134cba 48.58%, #126dd9 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 12px 20px;
    color: #ffffff;
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}

.welfare-download-btn:hover {
    transform: translateY(-2px);
    color: #ffffff;
}

.welfare-section .section-label {
    margin-bottom: 0;
}

.welfare-section .section-label .label-dot {
    background: var(--primary-blue);
}

.welfare-section .label-text {
    color: var(--dark-blue);
}

.welfare-section-label .label-text {
    font-size: 20px;
    font-weight: 900;
    line-height: 20px;
}

.welfare-grid {
    display: grid;
    /* 카드 6개는 동일 비율(1fr), 구분자 5개는 50px 고정 → 카드 구조 유지 */
    grid-template-columns: 1fr 50px 1fr 50px 1fr 50px 1fr 50px 1fr 50px 1fr;
    gap: 0;
    margin-top: 60px;
    position: relative;
    align-items: stretch; /* 카드 높이 동일 */
}

.welfare-card {
    min-width: 0;
    height: 100%; /* 그리드 셀 전체 높이 채움 → 모든 카드 높이 동일 */
    background: rgba(252, 251, 253, 0.2);
    border: 1px solid transparent;
    border-radius: 20px;
    /* Figma 스타일: 카드 그림자 */
    box-shadow:
        0 8px 24px rgba(11, 27, 60, 0.08),
        0 2px 8px rgba(51, 161, 224, 0.1);
    padding: 40px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Figma: stroke 그라데이션 #1e81ce → #33a1e0 (opacity 0.5), border-radius와 함께 적용 */
.welfare-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(30, 129, 206, 0.5) 0%, rgba(51, 161, 224, 0.5) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* circle_plus.png: 카드와 카드 사이에 얹혀지는(겹쳐 보이는) 구분자 */
.welfare-divider {
    width: 50px;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    justify-self: center;
    position: relative;
    z-index: 2; /* 카드 위에 겹쳐 보이게 */
}

.welfare-divider-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    flex-shrink: 0;
}

.welfare-divider img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.welfare-icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welfare-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.welfare-title {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 28.8px;
    color: var(--dark-blue);
}

/* 인재선발: 단일 그리드로 카드가 열 수에 따라 자연스럽게 배치 */
.welfare-values {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

.value-card {
    min-width: 0;
    background: rgba(51, 161, 224, 0.15);
    border: 1px solid transparent;
    border-radius: 20px;
    /* Figma 스타일: 인재선발 카드 그림자 */
    box-shadow:
        0 8px 24px rgba(11, 27, 60, 0.08),
        0 2px 8px rgba(51, 161, 224, 0.1);
    padding: 40px;
    display: flex;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

/* Figma: stroke 그라데이션 #1e81ce → #33a1e0 (opacity 0.5), welfare-card와 동일 */
.value-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(30, 129, 206, 0.5) 0%, rgba(51, 161, 224, 0.5) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.value-divider {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    grid-column: span 1;
    flex-shrink: 0;
}

.value-divider img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.value-icon {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.value-content {
    flex: 1;
}

.value-title {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 28.8px;
    color: var(--dark-blue);
    margin-bottom: 12px;
}

.value-description {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.4px;
    color: var(--text-dark);
    word-break: keep-all; /* 줄바꿈 시 단어 단위로 내려가게 */
}

/* Contact Section */
.contact-section {
    background: var(--dark-blue);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.contact-container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--figma-page-padding);
    position: relative;
    z-index: 1;
    /* Figma: 좌측 라벨+CONTACT(120px) | 우측 연락처(max 697px) */
    display: grid;
    grid-template-columns: 1fr minmax(0, 697px);
    gap: 40px;
    align-items: start;
}

.contact-header {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact-section .section-label .label-dot {
    background: var(--white);
}

.contact-section .label-text {
    color: var(--white);
}

.contact-section .section-title-large {
    font-size: 120px;
    line-height: 120px;
    color: var(--white);
    margin-bottom: 0;
}

.contact-content {
    display: flex;
    justify-content: flex-end;
}

.contact-info {
    width: 100%;
    max-width: 697px;
}

.contact-item {
    margin-bottom: 32px;
}

.contact-label {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.4px;
    color: var(--text-gray);
    display: block;
    margin-bottom: 8px;
}

.contact-value {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 28.8px;
    color: var(--white);
}

.contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.contact-image {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--figma-contact-map-height);
    overflow: hidden;
    z-index: 0;
}

.contact-map {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.contact-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Footer */
.footer {
    background: var(--dark-blue);
    padding: 40px 0;
    min-height: var(--figma-footer-height);
}

.footer-container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--figma-page-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-logo img {
    height: var(--figma-footer-height);
    width: auto;
}

.footer-copyright {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: var(--white);
}

/* ========== 반응형 (화면 크기별 적용) ==========
   1440px+ : 기본(PC) | 1440px~1280px | 1280px~1024px | 1024px~768px(태블릿) | 768px~480px(모바일) | 480px~360px | 360px~
*/

/* 1440px 미만: 데스크톱 */
@media (max-width: 1439px) {
    .header {
        height: 88px;
    }

    /*.logo img {
        height: 84px;
    }*/

    .nav-item {
        height: 88px;
        padding: 0 16px;
        font-size: 18px;
    }

    .contact-btn {
        padding: 14px 32px;
        font-size: 18px;
    }

    .welcome-section,
    .history-section,
    .business-section,
    .portfolio-section,
    .welfare-section,
    .contact-section {
        padding: 80px 0;
    }

    .header-container,
    .hero-container,
    .welcome-container,
    .history-container,
    .business-container,
    .portfolio-container,
    .welfare-container,
    .contact-container {
        padding: 0 60px;
    }

    .hero-title {
        font-size: 100px;
        line-height: 120px;
    }

    .hero-subtitle {
        font-size: 100px;
        line-height: 120px;
    }

    .section-title-large {
        font-size: 200px;
        line-height: 200px;
    }

    .contact-section .section-title-large {
        font-size: 100px;
        line-height: 100px;
    }

    .hero-section {
        min-height: 90vh;
        padding-top: 88px;
    }
}

/* 1280px 미만: 소형 데스크톱 */
@media (max-width: 1279px) {
    .header {
        height: 80px;
    }

    .logo img {
        height: 76px;
    }

    .nav-item {
        height: 80px;
        padding: 0 12px;
        font-size: 17px;
    }

    .contact-btn {
        padding: 12px 28px;
        font-size: 17px;
    }

    .header-container {
        gap: 16px;
    }

    .welcome-section,
    .history-section,
    .business-section,
    .portfolio-section,
    .welfare-section,
    .contact-section {
        padding: 72px 0;
    }

    .header-container,
    .hero-container,
    .welcome-container,
    .history-container,
    .business-container,
    .portfolio-container,
    .welfare-container,
    .contact-container {
        padding: 0 48px;
    }

    .hero-title {
        font-size: 80px;
        line-height: 96px;
    }

    .hero-subtitle {
        font-size: 80px;
        line-height: 96px;
    }

    /*.hero-icon {
        width: 110px;
        height: 83px;
    }*/

    .hero-description {
        font-size: 28px;
        line-height: 40px;
    }

    .section-title-large {
        font-size: 160px;
        line-height: 160px;
    }

    .contact-section .section-title-large {
        font-size: 90px;
        line-height: 90px;
    }

    .business-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .contact-container {
        grid-template-columns: 1fr minmax(0, 580px);
    }

    .hero-section {
        min-height: 85vh;
        padding-top: 80px;
    }

    /* welfare-grid: 1280px 이하에서 2행, 3번째 divider 숨김 (1500px과 동일) */
    .welfare-grid {
        grid-template-columns: 1fr 50px 1fr 50px 1fr;
    }

    .welfare-grid .welfare-divider:nth-child(6) {
        display: none;
    }
}

/* 1500px 이하: welfare-grid 2행, welfare-values 한 줄에 2개(2n) */
@media (max-width: 1500px) {
    .welfare-grid {
        grid-template-columns: 1fr 50px 1fr 50px 1fr;
        gap: 20px;
    }

    /* 3번째 welfare-divider(카드3·카드4 사이) 숨김 → 2행 × (카드3+구분자2) */
    .welfare-grid .welfare-divider:nth-child(6) {
        display: none;
    }

    /* welfare-values: 한 줄에 2개(2n) */
    .welfare-values {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* History: padding-left 제거 후 타임라인 화면 중앙 정렬 */
    .history-timeline {
        --timeline-padding-left: 0;
        padding-left: 0;
        max-width: 1268px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 1200px 이하: history-container 모바일 형태 (마커·연결선 오른쪽, 카드 세로 배치) */
@media (max-width: 1200px) {
    .history-section {
        padding: 60px 0;
    }

    .history-timeline {
        width: 100%;
        padding-left: 0;
        padding-right: 0px;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .history-timeline::before {
        display: block;
        left: auto;
        right: 0;
        width: 1px;
        background: #d09c1f;
        z-index: 0;
    }

    .timeline-card {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 20px;
        gap: 20px;
        min-height: auto;
    }

    .timeline-card-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
    }

    .timeline-card-intro {
        min-height: auto;
        padding: 24px 20px;
    }

    .timeline-card-highlight,
    .timeline-card-year {
        min-height: auto;
    }

    .timeline-header {
        min-width: 0;
        width: 100%;
        justify-content: space-between;
    }

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

    .timeline-content-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        width: 100%;
    }

    .timeline-title-section {
        width: 100%;
    }

    .timeline-btn {
        width: 100%;
        max-width: 274px;
        align-self: flex-start;
    }
}

/* 1024px 미만: 태블릿 가로 */
@media (max-width: 1023px) {
    .header {
        height: 76px;
    }

    .header-container {
        padding: 0 40px;
        gap: 12px;
    }

    .logo img {
        height: 72px;
    }

    .nav-item {
        height: 76px;
        padding: 0 10px;
        font-size: 16px;
    }

    .contact-btn {
        padding: 10px 24px;
        font-size: 16px;
    }

    .hero-section {
        padding-top: 76px;
    }

    .hero-container,
    .welcome-container,
    .history-container,
    .business-container,
    .portfolio-container,
    .welfare-container,
    .contact-container {
        padding: 0 40px;
    }

    .hero-title {
        font-size: 80px;
        line-height: 96px;
    }

    .hero-subtitle {
        font-size: 40px;
        line-height: 48px;
    }

    .hero-icon {
        width: 130px;
        height: 98px;
    }

    .hero-description {
        font-size: 24px;
        line-height: 36px;
    }

    /* 태블릿(1024px 미만)부터: 아이콘 위 → 문구 아래 (icon1 / SINCERITY / IS THE CORE OF / icon2 / ONEMICE'S / CORPORATE ETHICS.) */
    .hero-text-wrapper {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .hero-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .hero-title .hero-icon {
        order: -1;
    }

    .hero-title-line {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    .hero-title .hero-word:nth-child(2),
    .hero-title .hero-word:nth-child(3) {
        order: 0;
    }

    .section-title-large {
        font-size: 150px;
        line-height: 150px;
    }

    .welcome-content {
        grid-template-columns: 1fr;
        padding: 60px 40px;
        gap: 50px;
    }

    .business-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* 카드 3개 + 구분자 2개 패턴 유지 (2행: 5+5, 3행: 1) */
    .welfare-grid {
        grid-template-columns: 1fr 50px 1fr 50px 1fr;
        gap: 20px 0;
    }

    .welfare-values {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .welcome-section,
    .history-section,
    .business-section,
    .portfolio-section,
    .welfare-section,
    .contact-section {
        padding: 64px 0;
    }

    .contact-container {
        grid-template-columns: 1fr;
    }

    .contact-section .section-title-large {
        font-size: 80px;
        line-height: 80px;
    }

    .contact-row {
        grid-template-columns: 1fr 1fr;
    }

    /* History - PC 구간은 .history-timeline의 clamp()로 비율 유지, 카드만 최대폭 조절 */
    .timeline-card {
        width: 100%;
        max-width: 900px;
    }
}

/* 1000px 이하: 햄버거 메뉴 + History 타임라인 더 좁은 좌측 영역 */
@media (max-width: 1000px) {
    .nav {
        display: none;
    }

    .contact-btn {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .mobile-menu {
        top: 76px;
    }

    /* History - padding/마커/선은 상단 clamp()로 비율 유지 */
    .timeline-card {
        max-width: 100%;
    }
}

/* 768px 미만: 태블릿 세로 / 모바일 (전체 레이아웃) */
@media (max-width: 767px) {
    /* 가로 스크롤 방지 (모바일) */
    .hero-section,
    .history-section {
        overflow-x: hidden;
    }

    .history-timeline::before {
        right: 0;
    }

    /* Header Mobile */
    .header {
        height: 80px;
    }

    .header-container {
        padding: 0 20px;
    }

    .logo img {
        height: 60px;
    }

    .mobile-menu {
        top: 80px; /* 768px 이하 헤더 80px */
    }

    .nav-item {
        padding: 0 12px;
        font-size: 16px;
    }

    /* Container Padding */
    .hero-container,
    .welcome-container,
    .history-container,
    .business-container,
    .portfolio-container,
    .welfare-container,
    .contact-container {
        padding: 0 20px;
    }

    /* Hero Section Mobile - Figma: 이미지 위, 폰트(문구) 아래 */
    .hero-section {
        min-height: auto;
        padding-top: 80px;
        padding-bottom: 60px;
    }

    .hero-text-wrapper {
        display: flex;
        flex-direction: column;
        gap: clamp(12px, 3vw, 20px);
    }

    /* 모바일 Hero: 화면 너비에 비례해 폰트·아이콘 크기 유기적으로 조절 */
    .hero-title {
        font-size: clamp(44px, 13vw, 62px);
        line-height: 1.22;
        letter-spacing: -0.02em;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(8px, 2.5vw, 14px);
    }

    /* 모바일: 이미지 위, 폰트(문구) 아래 세로 배치 */
    .hero-title .hero-icon {
        order: -1;
    }

    .hero-title-line {
        display: flex;
        flex-wrap: wrap;
        gap: clamp(8px, 2vw, 12px);
        align-items: center;
    }

    .hero-title .hero-word:nth-child(2),
    .hero-title .hero-word:nth-child(3) {
        order: 0;
    }

    .hero-subtitle {
        font-size: clamp(32px, 8.5vw, 42px);
        line-height: 1.25;
        letter-spacing: -0.02em;
    }

    .hero-icon {
        width: clamp(88px, 26vw, 110px);
        height: auto;
        aspect-ratio: 160 / 120;
    }

    .hero-description {
        font-size: clamp(18px, 4.8vw, 22px);
        line-height: 1.5;
        text-align: left;
    }

    /* Welcome Section Mobile */
    .welcome-section {
        padding: 60px 0;
    }

    .section-title-large {
        font-size: 50px;
        line-height: 50px;
        margin-bottom: 40px;
    }

    /* Section Labels Mobile */
    .section-label {
        margin-bottom: 15px;
    }

    .label-text {
        font-size: 18px;
    }

    .welcome-content {
        grid-template-columns: 1fr;
        padding: 40px 20px;
        gap: 40px;
    }

    .welcome-card {
        padding: 30px 20px;
    }

    .profile-image {
        width: 80px;
        height: 80px;
    }

    .profile-name {
        font-size: 24px;
    }

    .profile-title {
        font-size: 16px;
    }

    .welcome-quote {
        font-size: 22px;
    }

    .welcome-text {
        font-size: 16px;
        line-height: 24px;
    }

    /* Business Section Mobile */
    .business-section {
        padding: 60px 0;
    }

    .business-cards {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .business-card {
        flex-direction: column;
    }

    .business-image {
        width: 100%;
        height: auto;
        max-height: 200px;
    }

    .business-content {
        padding: 20px;
    }

    .business-title {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .business-list {
        font-size: 16px;
        line-height: 24px;
    }

    /* Portfolio Section Mobile */
    .portfolio-section {
        padding: 60px 0;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .portfolio-head-row {
        gap: 12px;
    }

    .portfolio-cert-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .portfolio-card {
        padding: 30px 24px;
    }

    .portfolio-card-inner {
        flex-direction: column;
        gap: 24px;
    }

    .portfolio-image {
        max-height: 180px;
    }

    .portfolio-info {
        text-align: center;
    }

    .portfolio-title {
        font-size: 16px;
    }

    .portfolio-subtitle {
        font-size: 16px;
    }

    /* Welfare Section Mobile */
    .welfare-section {
        padding: 60px 0;
    }

    /* 모바일: 1열 세로 배치, 카드-구분자 순서 유지, 3번째 구분자(6번째 자식) 다시 표시 */
    .welfare-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .welfare-grid .welfare-divider:nth-child(6) {
        display: flex;
    }

    .welfare-card {
        padding: 30px 20px;
    }

    .welfare-title {
        font-size: 18px;
    }

    .welfare-values {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .value-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }

    .value-icon {
        margin-bottom: 20px;
    }

    .value-title {
        font-size: 22px;
        margin-bottom: 15px;
        text-align:left;
    }

    .value-description {
        font-size: 16px;
        line-height: 24px;
        text-align:left;
    }

    /* Contact Section Mobile */
    .contact-section {
        padding: 60px 0;
    }

    .contact-container {
        grid-template-columns: 1fr;
    }

    .contact-section .section-title-large {
        font-size: 60px;
        line-height: 60px;
    }

    .contact-content {
        padding: 40px 20px 0;
    }

    .contact-row {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .contact-item {
        margin-bottom: 20px;
    }

    .contact-label {
        font-size: 16px;
        margin-bottom: 8px;
    }

    #contact .section-title-large{
        text-align:left;
        letter-spacing: 0px;
    }

    .contact-value {
        font-size: 16px;
    }

    .contact-section {
        padding-bottom: 0;
    }

    .contact-image {
        position: relative;
        margin-top: 40px;
        min-height: 320px;
        height: 320px;
    }

    .contact-image img,
    .contact-map {
        width: 100%;
        height: 100%;
        min-height: 320px;
    }

    /* Footer Mobile */
    .footer {
        padding: 40px 20px;
    }

    .footer-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding:0 20px;
    }

    .footer-logo img {
        
    }

    .footer-copyright {
        font-size: 14px;
    }

    /* Section Labels Mobile */
    .section-label {
        margin-bottom: 15px;
    }

    .label-text {
        font-size: 18px;
    }

    /* History Section - 768px 모바일: 마커·연결선 오른쪽, 카드 왼쪽 풀폭 */

    .history-section::before{
        opacity:auto;
    }

    .history-section {
        padding: 60px 0;
    }

    .history-timeline {
        width: 100%;
        padding-left: 0;
        padding-right: 0px; /* 오른쪽 마커·연결선 영역 */
        max-width: 100%;
        /* 모바일은 right 기준 (선 -44px = 마커 중심) */
    }

    .timeline-item {
        position: relative;
    }

    .history-timeline::before {
        left: auto;
        right: 0;
        width: 1px;
        background: #d09c1f;
        z-index: 0;
    }

    /* 모바일: 카드 스타일 */
    .timeline-card {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 20px;
        min-height: auto;
    }

    .timeline-card-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
    }

    .timeline-card-intro {
        min-height: auto;
        padding: 20px;
    }

    .timeline-card-highlight,
    .timeline-card-year {
        min-height: auto;
    }

    .timeline-header {
        min-width: 0;
        width: 100%;
        justify-content: space-between;
        margin-bottom:80px;
    }

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

    .timeline-content-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        width: 100%;
    }

    .timeline-card-highlight::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('../image/history-first-bg_m.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 10px;
        z-index: 0;
    }

    .timeline-card-highlight .timeline-subtitle{
        margin-bottom:15px;
    }

    .timeline-card-2025::after{
        bottom: 210px;
        width:100%;
    }

    .timeline-card-2025 .timeline-content {
        margin-top:60px;
    }

    .timeline-card-2015::after {
        right: 45px;
        bottom: 160px;
        width: 42%;
    }

    .timeline-card-2015 .timeline-content {
        margin-top:60px;
    }

    

    .timeline-title-section {
        width: 100%;
    }

    .timeline-btn {
        width: 100%;
        max-width: 274px;
        align-self: flex-start;
    }

    .timeline-image {
        position: static;
        transform: none;
        width: 100%;
        max-width: 174px;
        height: auto;
        margin-top: 20px;
    }
}

/* 480px 미만: 모바일 소형 - hero는 clamp()로 이미 비율 유지 */
@media (max-width: 479px) {

    .section-title-large {
        font-size: 50px;
        line-height: 50px;
    }

    .welcome-content {
        padding: 30px 15px;
        gap: 30px;
    }

    .business-card {
        padding: 15px;
    }

    .portfolio-info {
        padding: 20px;
    }

    .welfare-card {
        padding: 20px 15px;
    }

    .value-card {
        padding: 20px 15px;
    }

    .header-container,
    .hero-container,
    .welcome-container,
    .history-container,
    .business-container,
    .portfolio-container,
    .welfare-container,
    .contact-container {
        padding: 0 16px;
    }

    .contact-section .section-title-large {
        font-size: 48px;
        line-height: 48px;
    }

    .contact-image {
        min-height: 280px;
    }

    /* History 480px: 좁은 화면에서 여백·타이포 조정 */
    .history-timeline {
        padding-right: 0px;
    }

    .timeline-card {
        padding: 16px 14px;
    }

    .timeline-description {
        font-size: 26px;
        line-height: 36px;
    }

    .timeline-title {
        font-size: 28px;
    }

    .timeline-date,
    .timeline-year {
        font-size: 44px;
        line-height: 44px;
    }

    .timeline-subtitle {
        font-size: 16px;
    }

    .timeline-btn {
        width: 100%;
        max-width: 240px;
        font-size: 18px;
        padding: 14px 20px;
    }
}

/* 360px 미만: 초소형 모바일 */
@media (max-width: 359px) {
    .header-container,
    .hero-container,
    .welcome-container,
    .history-container,
    .business-container,
    .portfolio-container,
    .welfare-container,
    .contact-container {
        padding: 0 12px;
    }

    .history-timeline {
        padding-right: 24px;
    }

    .timeline-description {
        font-size: 22px;
        line-height: 32px;
    }

    .timeline-title {
        font-size: 22px;
    }

    .timeline-date,
    .timeline-year {
        font-size: 38px;
        line-height: 38px;
    }

    /* 360px 이하: hero 최소 크기 유지해 가독성 확보 */
    .hero-title {
        font-size: clamp(36px, 12vw, 52px);
    }

    .hero-subtitle {
        font-size: clamp(28px, 7.5vw, 38px);
    }

    .hero-icon {
        width: clamp(72px, 22vw, 96px);
    }

    .hero-description {
        font-size: clamp(16px, 4.5vw, 20px);
    }

    .section-title-large {
        font-size: 36px;
        line-height: 40px;
    }

    .contact-section .section-title-large {
        font-size: 40px;
        line-height: 40px;
    }

    .label-text {
        font-size: 14px;
    }

    .footer-copyright {
        font-size: 12px;
    }

    .contact-image {
        min-height: 220px;
    }
}

/* ===== Popup (ATW 스타일) ===== */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 27, 60, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}

.popup-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.popup-modal {
    position: relative;
    border-radius: var(--border-radius);
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.popup-overlay.is-open .popup-modal {
    transform: scale(1);
}

.popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}

.popup-close:hover {
    background: var(--bg-light);
    color: var(--dark-blue);
}

.popup-modal--image .popup-body {
    padding: 56px 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.popup-image-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.popup-image-wrap .popup-close {
    position: absolute;
    top: -12px;
    right: -12px;
    background: var(--bg-light);
    color: var(--dark-blue);
}

.popup-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    vertical-align: top;
}

.popup-link--single {
    margin-top: 24px;
    min-width: 260px;
}

.popup-checkbox-wrap--block {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-body {
    padding: 48px 40px 24px;
}

.popup-title {
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: var(--dark-blue);
    margin-bottom: 12px;
}

.popup-desc {
    font-size: 15px;
    color: var(--text-light-gray);
    line-height: 1.6;
    margin-bottom: 24px;
}

.popup-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.popup-link {
    display: block;
    padding: 14px 20px;
    background: linear-gradient(90deg, #126dd9 0%, #134cba 48.58%, #126dd9 100%);
    color: var(--white);
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 800;
    font-size: 15px;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s, opacity 0.2s;
}

.popup-link:hover {
    transform: translateY(-1px);
    opacity: 0.95;
    color: var(--white);
}

.popup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 40px 32px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    gap: 16px;
    flex-wrap: wrap;
}

.popup-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-light-gray);
    cursor: pointer;
    user-select: none;
}

.popup-checkbox-wrap span{
    color:#fff;
}

.popup-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-blue);
    cursor: pointer;
}

.popup-btn-close {
    padding: 10px 24px;
    background: var(--dark-blue);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-family: 'NanumSquare Neo', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.popup-btn-close:hover {
    background: var(--light-blue);
    transform: translateY(-1px);
}

@media (max-width: 479px) {
    .popup-body {
        padding: 44px 24px 20px;
    }
    .popup-modal--image .popup-body {
        padding: 48px 20px 28px;
    }
    .popup-image-wrap .popup-close {
        top: 8px;
        right: 8px;
    }
    .popup-link--single {
        min-width: 0;
        width: 100%;
    }
    .popup-footer {
        padding: 14px 24px 24px;
    }
    .popup-close {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
    }
}