/* AI-GENERATED: Added CSS variables for color and spacing */
:root {
    --color-background-light: #F8FAFB;
    --color-text-dark: #222;
    --color-text-light: #fff; /* Used in hero, navbar transparent */
    --color-heading-dark: #181818;
    --color-subheading-gray: #757575;
    --color-divider-dark: #181818;
    --color-navbar-scrolled-bg: #F8FAFB; /* Same as background-light */
    --color-navbar-scrolled-text: #181818; /* Same as heading-dark */
    --color-cookie-popup-bg: #F5F3F0;
    --color-cookie-popup-close: #bbb;
    --color-cookie-popup-close-hover: #888;

    /* Basic Spacing/Padding/Margin Variables */
    --padding-section-mobile: 2.6rem 1rem;
    --margin-section-mobile-top: 2.7rem;
    --margin-section-mobile-bottom: 2.5rem;
    --padding-section-desktop: 3rem 32px; /* For >= 1025px */
    --margin-section-desktop: 3rem 0; /* For >= 1025px */
    --navbar-height-mobile: 56px;
    --navbar-height-desktop-mid: 64px; /* >= 768px */
    --navbar-height-desktop-large: 72px; /* >= 1025px */

    /* Specific Element Spacing Examples (can add more) */
    --spacing-title-body: 0.5rem; /* section-title margin-bottom */
    --spacing-en-body: 1.5rem; /* section-en margin-bottom */
    --spacing-paragraph-bottom: 1rem; /* section-body p margin-bottom */
    --spacing-divider-body: 0.5rem; /* section-divider margin-bottom */
    --spacing-more-top: 1.5rem; /* section-more margin-top */

    /* Footer Specific Spacing */
    --footer-padding: 2rem 1.5rem 2.5rem 1.5rem; /* Mobile base */
    --footer-padding-tablet: 1.5rem 1.5rem; /* >= 768px */
    --footer-padding-desktop: 2rem 2rem; /* >= 1025px */
    --footer-margin-top-mobile: 4rem;
    --footer-margin-top-desktop: 6rem; /* >= 1025px */
    --footer-insta-right-mobile: 1.1rem; /* <= 600px */
    --footer-insta-bottom-mobile: 1.1rem; /* <= 600px */
    --footer-insta-right-desktop: 2.2rem; /* > 600px */
    --footer-insta-bottom-desktop: 2.2rem; /* > 600px */

    /* SELECT 페이지 전용 변수 - 메인 브랜드 컬러 사용 */
    --color-select-highlight: #5d7e93;
    --color-select-available: #2E7D32;
    --color-select-coming: #F57C00;
    --color-select-card-bg: #FFFFFF;
    --color-select-shadow: rgba(0, 0, 0, 0.08);
    --color-select-banner-bg: #F0F7FF;
    --color-select-banner-border: #E3F2FD;
}
/* End AI-GENERATED: Added CSS variables for color and spacing */


/* AI-GENERATED: brand-process 스타일 추가 */
.brand-process {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #FAFAFA;
    border-radius: 8px;
    border: 1px solid #E5E5E5;
}

.brand-process__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-heading-dark);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.brand-process__steps {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.brand-process__step {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-dark);
}

.brand-process__step strong {
    color: var(--color-heading-dark);
    font-weight: 600;
}

.insights-preview {
    margin: 1rem 0;
}

.insights-preview p {
    margin-bottom: 0.8rem;
}

.insights-preview strong {
    color: var(--color-heading-dark);
    font-weight: 600;
}

@media (min-width: 768px) {
    .brand-process {
        padding: 2rem;
    }
    
    .brand-process__title {
        font-size: 1.2rem;
    }
    
    .brand-process__step {
        font-size: 1rem;
    }
}

/* AI-GENERATED: 푸터가 항상 최하단에 붙어있도록 기본 리셋 및 타이포그래피 수정 */
html {
    height: 100%; /* 페이지 전체 높이 사용 */
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', Arial, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', 'Noto Sans KR', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6; /* 기본 줄 간격 개선 */
    color: var(--color-text-dark); /* 기본 텍스트 색상 변수 사용 */
    word-break: keep-all; /* 한글 줄 바꿈 자연스럽게 */
    overflow-wrap: break-word;
    background-color: var(--color-background-light); /* 배경 색상 변수 사용 */
    overflow-x: hidden; /* 모든 브라우저에서 스크롤바 숨김 (스크롤은 가능) */
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;    /* Firefox */
    
    /* 푸터 최하단 고정을 위한 추가 속성 */
    min-height: 100%; /* 최소한 body는 화면 전체 높이를 차지하도록 설정 */
    display: flex;
    flex-direction: column;
}
body::-webkit-scrollbar, html::-webkit-scrollbar {
    display: none;            /* Chrome/Safari/Webkit */
}


/* 접근성을 위한 시각적으로 숨김 */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 링크 기본 스타일 제거 및 포커스 스타일 추가 */
a {
    text-decoration: none;
    color: inherit; /* 부모 요소 색상 상속 */
}

a:focus, button:focus {
    outline: 2px solid rgba(0, 123, 255, 0.5); /* 표준 포커스 링 */
    outline-offset: 2px;
}

/* AI-GENERATED: GNB 로고 포커스 스타일 */
.logo-link:focus {
    outline: 2.5px solid #007BFF;
    outline-offset: 3px;
    background: rgba(0, 123, 255, 0.07);
    border-radius: 6px;
}

/* Hero 섹션 서브텍스트(전문분야 키워드) 스타일 */
.hero__subtitle {
    font-size: 1.13em; /* hero-contact-link와 동일한 크기 */
    font-weight: 700; /* hero-contact-link와 동일한 두께 */
    color: var(--color-text-light);
    letter-spacing: 0.01em;
    text-align: left;
    line-height: 1.4;
    font-family: 'Pretendard', 'Noto Sans KR', Arial, sans-serif;
    margin-bottom: 0.6rem;
    display: block;
}
/* 모바일/태블릿/데스크탑에 따른 서브텍스트 표시/숨김 처리 */
.hero__subtitle--desktop {
    display: none; /* 기본적으로 숨김 */
}

.hero__subtitle--mobile {
    display: block; /* 기본적으로 표시 */
}

@media (min-width: 768px) {
    .hero__subtitle {
        font-size: 1.13em;
    }
    
    /* 태블릿/데스크탑에서는 왼쪽 표시, 오른쪽 숨김 */
    .hero__subtitle--desktop {
        display: block;
    }
    
    .hero__subtitle--mobile {
        display: none;
    }
}

@media (max-width: 767px) {
    .hero__subtitle {
        font-size: 1.05em;
    }
    
    /* 모바일에서는 오른쪽 표시, 왼쪽 숨김 */
    .hero__subtitle--desktop {
        display: none;
    }
    
    .hero__subtitle--mobile {
        display: block;
    }
}
/* 네비게이션 바 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--navbar-height-mobile); /* 높이 변수 사용 */
    padding: 0 1rem; /* 모바일 기본 패딩 */
    background: transparent;
    z-index: 1000;
    transition: background 0.3s ease, box-shadow 0.3s ease, height 0.4s cubic-bezier(.4,1.2,.6,1);
}

/* AI-GENERATED: 바다유림 로고 타이포그래피 스타일 */
.navbar-logo {
    margin: 0;
    padding: 0;
    line-height: 1;
    transition: transform 0.3s ease;
}

.logo-link {
    text-decoration: none;
    display: inline-block;
}

/* AI-GENERATED: GNB 로고 기본 폰트사이즈 (모바일 기준) */
.logo-text {
    display: inline-block;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--color-text-light);
    transition: color 0.3s ease;
}

/* AI-GENERATED: GNB 로고 폰트사이즈 태블릿 기준 오버라이드 */
@media (min-width: 768px) {
    .logo-text {
        font-size: 1.6rem;
    }
}

/* AI-GENERATED: GNB 로고 폰트사이즈 데스크탑 기준 오버라이드 */
@media (min-width: 1025px) {
    .logo-text {
        font-size: 1.8rem;
    }
}

.logo-bada {
    font-weight: 800;
}

.logo-yurim {
    font-weight: 700;
    position: relative;
    margin-left: 0.05em;
}

.logo-yurim::before {
    content: '';
    position: absolute;
    bottom: 0.15em;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-light);
    transform: scaleX(0.8);
    transform-origin: left;
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.navbar-logo:hover .logo-yurim::before {
    transform: scaleX(1);
    opacity: 1;
}

.navbar.scrolled .logo-text {
    color: var(--color-navbar-scrolled-text);
}

.navbar.scrolled .logo-yurim::before {
    background-color: var(--color-navbar-scrolled-text);
}

.navbar-toggle {
    display: flex; /* 모바일에서만 보이게 */
    align-items: center;
    justify-content: flex-end;
    height: var(--navbar-height-mobile); /* 클릭 영역 확장 변수 사용 */
    width: 48px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    z-index: 1100;
}

.navbar-icon {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    color: var(--color-text-light); /* 기본 투명 배경일 때 색상 변수 사용 */
    transition: color 0.3s ease;
}

.navbar-icon svg {
    display: block;
    margin: 0;
    padding: 0;
    width: 32px;
    height: 32px;
}

.navbar-icon .icon-x {
    display: none; /* 초기에는 X 아이콘 숨김 */
}

/* 모바일 네비게이션 메뉴 */
.navbar-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--navbar-height-mobile); /* 네비게이션 높이 변수 사용 */
    right: 1rem; /* 토글 버튼과 동일한 오른쪽 패딩 */
    padding: 0;
    margin: 0;
    list-style: none;
    background: var(--color-background-light); /* 모바일 메뉴 배경색 변수 사용 */
    border-radius: 4px;
    min-width: 160px; /* 최소 너비 */
    z-index: 100;
    text-align: right;
    opacity: 0;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.25s cubic-bezier(.4,0,.2,1), transform 0.25s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}

.navbar-menu.active {
    opacity: 1;
    pointer-events: auto;
    transform: scaleY(1);
}

.navbar-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* AI-GENERATED: 모바일 메뉴 항목 공통 스타일 */
.navbar-menu a,
.navbar-menu--dimmed {
    display: block; /* 링크 전체 클릭 영역 */
    padding: 0.8rem 1.2rem; /* 메뉴 아이템 내부 패딩 */
    font-weight: 700; /* 모든 해상도에서 700으로 통일 */
    /* font-size는 아래 .navbar-menu a에서만 관리 */
}

/* 모바일 메뉴 활성 링크 스타일 */
/* AI-GENERATED: GNB 메뉴 아이템 기본 폰트사이즈 (모바일 기준) */
.navbar-menu a {
    color: var(--color-text-dark);
    font-size: 1.5rem !important;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* AI-GENERATED: GNB 메뉴 아이템 폰트사이즈 태블릿 기준 오버라이드 */
/* AI-GENERATED: GNB 메뉴 아이템 폰트사이즈 태블릿 기준 오버라이드 */
@media (min-width: 768px) {
    .navbar-menu a {
        font-size: 1.6rem !important;
    }
}

/* AI-GENERATED: GNB 메뉴 아이템 폰트사이즈 데스크탑 기준 오버라이드 */
/* AI-GENERATED: GNB 메뉴 아이템 폰트사이즈 데스크탑 기준 오버라이드 */
@media (min-width: 1025px) {
    .navbar-menu a {
        font-size: 1.8rem !important;
    }
}

.navbar-menu a:hover {
    background-color: #f5f5f5; /* 호버 배경색 (변수 추가 고려 가능) */
}

/* AI-GENERATED: 온라인 상점 메뉴 딤처리 */
.navbar-menu--dimmed {
    /* display, padding, font-size, font-weight는 공통 스타일에서 상속 */
    color: #bdbdbd !important; /* 흐린 회색, WCAG 대비 준수 */
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
    background: none;
}
/* End AI-GENERATED: 온라인 상점 메뉴 딤처리 */

/* AI-GENERATED: 온라인 상점 메뉴 딤처리 - 모바일 버전 */
.navbar-menu--dimmed span {
    display: block;
    padding: 0.8rem 1.2rem; /* 모바일에서는 다른 메뉴 항목과 동일한 패딩 적용 */
    color: #bdbdbd !important;
    width: 100%;
    box-sizing: border-box;
    text-align: right; /* 모바일에서는 오른쪽 정렬 */
}

/* 데스크탑 해상도에서는 다른 스타일 적용 */
@media (min-width: 768px) {
    .navbar-menu--dimmed span {
        padding: 0; /* 데스크탑에서는 패딩 제거 */
        text-align: left; /* 데스크탑에서는 왼쪽 정렬 */
    }
}
/* End AI-GENERATED: 온라인 상점 메뉴 딤처리 */

/* 스크롤 시 네비게이션 바 스타일 */
.navbar.scrolled {
    background: var(--color-navbar-scrolled-bg); /* 스크롤 시 배경색 변수 사용 */
    /* AI-GENERATED: GNB 그림자 제거 */
    box-shadow: none; /* 그림자 제거 */
}

.navbar.scrolled .navbar-logo,
.navbar.scrolled .navbar-icon {
    color: var(--color-navbar-scrolled-text); /* 스크롤 시 색상 변수 사용 */
}

/* 데스크탑 스타일 (768px 이상) */
@media (min-width: 768px) {
    .navbar {
        height: var(--navbar-height-desktop-mid); /* 데스크탑 네비 높이 변수 사용 */
        padding: 0 1.5rem; /* 데스크탑 패딩 */
    }

    .navbar-logo {
        font-size: 1.6rem; /* 태블릿 크기 유지 */
        margin-right: 2.5rem; /* 로고와 메뉴 사이 간격 */
        color: var(--color-text-light); /* 기본 투명 배경 색상 유지 변수 사용 */
    }
    
    /* AI-GENERATED: 섹션 타이틀 사이즈를 GNB 로고 사이즈와 일치 */
    .section-title {
        font-size: 1.6rem; /* 태블릿 GNB 로고 사이즈와 일치 */
    }

    .navbar.scrolled .navbar-logo {
        color: var(--color-navbar-scrolled-text); /* 스크롤 시 색상 변경 변수 사용 */
    }

    .navbar-toggle {
        display: none; /* 데스크탑에서 토글 버튼 숨김 */
    }

    .navbar-menu {
        position: static; /* 위치 고정 해제 */
        flex-direction: row;
        align-items: center;
        background: none;
        /* AI-GENERATED: GNB 그림자 제거 */
box-shadow: none;
        opacity: 1;
        pointer-events: auto;
        transform: none; /* 애니메이션 해제 */
        min-width: 0;
        border-radius: 0;
        text-align: left;
        height: auto; /* 높이 자동 */
        gap: 2rem; /* 메뉴 아이템 간격 */
    }

    .navbar-menu li {
        height: auto; /* 높이 자동 */
    }

    .navbar-menu a {
        padding: 0; /* 패딩 제거, gap으로 간격 조절 */
        height: auto;
        font-size: 1.2rem; /* 데스크탑 크기로 통일 */
        font-weight: 700; /* 700 유지 */
        color: var(--color-text-light); /* 기본 투명 배경 색상 유지 변수 사용 */
    }

     .navbar-menu a:hover {
        background-color: transparent; /* 데스크탑 호버 배경 제거 */
        color: rgba(255, 255, 255, 0.8); /* 호버 색상 (변수 추가 고려 가능) */
    }

    .navbar.scrolled .navbar-menu a {
        color: var(--color-navbar-scrolled-text); /* 스크롤 시 색상 변경 변수 사용 */
    }

     .navbar.scrolled .navbar-menu a:hover {
        color: #444; /* 스크롤 시 호버 색상 (변수 추가 고려 가능) */
    }

    .navbar-icon {
        display: none; /* 데스크탑에서 아이콘 숨김 */
    }
}

/* 데스크탑 L 스타일 (1025px 이상) */
@media (min-width: 1025px) {
     .navbar {
        padding: 0 2rem;
        height: var(--navbar-height-desktop-large); /* 더 큰 데스크탑 네비 높이 변수 사용 */
    }
    .navbar-logo {
        font-size: 1.8rem; /* 데스크탑 L 크기 유지 */
        margin-right: 3rem;
    }
     .navbar-menu {
        gap: 2.5rem; /* 더 넓은 메뉴 간격 */
    }
    .navbar-menu a {
        font-size: 1.2rem; /* 1.2rem 유지 */
    }
}


/* AI-GENERATED: 메인 콘텐츠 공통 스타일 - 푸터 최하단 고정을 위해 수정 */
.main-content {
    width: 100%;
    box-sizing: border-box;
    flex: 1 0 auto; /* 콘텐츠가 적어도 화면을 차지하도록 설정, 푸터를 바닥에 고정하기 위함 */
}

/* AI-GENERATED: 서브페이지 모바일 좌우 패딩 미세 조정 (연락하기 페이지 우측 여백 완화) */
@media (max-width: 767px) {
    .subpage-content {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
    .subpage-content .section-inner {
        padding-left: 0;
        padding-right: 0;
    }
    .section-contact .contact-container {
        margin-left: -0.1rem;
        margin-right: -0.1rem;
    }
}

/* AI-GENERATED: 서브페이지 공통 스타일 */
.subpage-content {
    padding-top: calc(var(--navbar-height-mobile) + 2rem); /* 모바일 네비게이션 높이 + 여백 */
    padding-bottom: 2.5rem;
    padding-left: 1rem; /* GNB와 동일한 좌측 패딩 적용 */
    padding-right: 1rem;
}

/* 서브페이지 내부 콘텐츠 좌측 정렬 맞추기 */
.subpage-content .section-inner {
    padding-left: 0; /* 이미 .subpage-content에 padding-left가 있으므로 중복 패딩 제거 */
}

@media (min-width: 768px) {
    .subpage-content {
        padding-top: calc(var(--navbar-height-desktop-mid) + 2rem); /* 태블릿 네비게이션 높이 + 여백 */
        padding-left: 1.5rem; /* GNB와 동일한 좌측 패딩 적용 */
        padding-right: 1.5rem;
    }
}

/* AI-GENERATED: 데스크탑 해상도에서 서브페이지 콘텐츠를 홈페이지와 동일하게 통일 */
@media (min-width: 1025px) {
    .subpage-content {
        padding-top: calc(var(--navbar-height-desktop-large) + 2rem); /* 데스크탑 네비게이션 높이 + 여백 */
        padding-left: 32px; /* 홈페이지와 동일하게 --padding-section-desktop의 좌측 패딩 적용 */
        padding-right: 32px; /* 홈페이지와 동일하게 --padding-section-desktop의 우측 패딩 적용 */
    }
    
    /* 서브페이지 내부 콘텐츠 스타일 홈페이지와 통일 */
    .subpage-content .section-inner {
        width: 100%;
        max-width: 100%; /* 홈페이지와 동일하게 max-width를 100%로 설정 */
        margin: var(--margin-section-desktop); /* 홈페이지와 동일한 마진 적용 */
        padding: 3rem 0; /* 상하 패딩만 적용, 좌우 패딩은 이미 .subpage-content에 있음 */
    }
}

/* 섹션 공통 스타일 */
.section-inner {
    padding: var(--padding-section-mobile); /* 모바일 기본 내부 패딩 변수 사용 */
    max-width: 700px; /* 섹션 최대 너비 */
    /* margin: 2.7rem auto 2.5rem auto;  기존 중앙 정렬 마진 - 이 부분은 아래 미디어쿼리에서 좌측 정렬로 변경됨 */
    margin-top: var(--margin-section-mobile-top); /* 상단 여백 변수 사용 */
    margin-bottom: var(--margin-section-mobile-bottom); /* 하단 여백 변수 사용 */
    margin-left: auto; /* 기본 중앙 정렬 */
    margin-right: auto; /* 기본 중앙 정렬 */
    box-sizing: border-box;
}

/* AI-GENERATED: 모든 섹션의 타이틀 스타일을 슬로건 섹션과 통일 */
/* AI-GENERATED: 섹션 타이틀 폰트사이즈를 GNB 로고와 동일하게 통일 (모바일 기준) */
.section-title {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--color-heading-dark);
    margin: 0 0 var(--spacing-title-body) 0;
    letter-spacing: -1.2px;
    text-align: left;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', Arial, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', 'Noto Sans KR', sans-serif;
}

/* AI-GENERATED: 섹션 타이틀 폰트사이즈를 GNB 로고와 동일하게 통일 (태블릿 기준) */
@media (min-width: 768px) {
    .section-title {
        font-size: 1.6rem;
        letter-spacing: -1.2px;
    }
}

/* AI-GENERATED: 섹션 타이틀 폰트사이즈를 GNB 로고와 동일하게 통일 (데스크탑 기준) */
@media (min-width: 1025px) {
    .section-title {
        font-size: 1.8rem;
        letter-spacing: -1.2px;
    }
}

/* 슬로건 라인 스타일 */
.section-title .title-line {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.section-title .title-line:last-child {
    margin-bottom: 0;
}

.section-title br {
     display: block;
     margin-bottom: 0.2em; /* 줄바꿈 후 간격 */
     content: "";
}


.section-en {
    font-size: 1rem; /* 모바일 기본 영어 부제목 크기 */
    color: var(--color-subheading-gray); /* 색상 변수 사용 */
    font-weight: 500;
    margin-bottom: var(--spacing-en-body); /* 마진 변수 사용 */
    text-align: left;
}

.section-body p {
    font-size: 1rem; /* 모바일 기본 본문 텍스트 크기 */
    color: #232323; /* 색상 변수 추가 고려 가능 */
    margin: 0 0 var(--spacing-paragraph-bottom) 0; /* 단락 간격 변수 사용 */
    line-height: 1.7;
    font-weight: 400;
}

.section-divider {
    width: 100%; /* 내부 컨테이너 너비 기준 */
    height: 1px;
    background: var(--color-divider-dark); /* 색상 변수 사용 */
    margin: 0 0 var(--spacing-divider-body) 0; /* 구분선 상하 여백 변수 사용 */
}

/* AI-GENERATED: 바다유림 톤앤매너에 맞춘 미니멀·고급·절제된 CTA 버튼 */
.section-more {
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    color: #5d7e93; /* 브랜드 컬러 */
    background: transparent;
    border: 1.5px solid #5d7e93;
    border-radius: 18px;
    padding: 0.5em 1.5em;
    margin-top: var(--spacing-more-top);
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: none;
    text-align: center;
    line-height: 1.3;
    transition: color 0.22s, background 0.22s, border-color 0.22s, box-shadow 0.22s, transform 0.18s;
}
.section-more:hover,
.section-more:focus {
    color: #fff; /* hover/focus 시 흰색 */
    background: #5d7e93;
    border-color: #5d7e93;
    box-shadow: 0 2px 12px rgba(93,126,147,0.09);
    transform: translateY(-2px) scale(1.03);
    outline: none;
}
.section-more:active {
    background: #39596b;
    border-color: #39596b;
}
.section-more:focus-visible {
    outline: 2px solid #39596b;
    outline-offset: 2px;
}
.section-more:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: transparent;
    color: #b0b0b0;
    border-color: #c7d2da;
}

/* BEM: 섹션 내 CTA 구분 (필요시 확장) */
.section-layout-more {
    margin-left: 0;
    margin-top: 1.5rem;
    font-size: 1.01rem;
}

/* 반응형: 모바일에서 폰트/패딩 조정 */
@media (max-width: 767px) {
    .section-more {
        font-size: 0.95rem;
        padding: 0.45em 1.1em;
    }
}
/* End AI-GENERATED: 미니멀 CTA */

/* AI-GENERATED: section-more.section-layout-more 버튼 hover 시 글씨 흰색 오버라이드 */
.section-more.section-layout-more:hover,
.section-more.section-layout-more:focus {
    color: #fff !important;
}



/* Hero 섹션 */
.section-hero {
    position: relative;
    width: 100vw;
    height: 100vh; /* setRealVh로 조정됨 (JS에서 --real-vh CSS 변수 설정) */
    /* height: calc(var(--real-vh) * 100); /* JS에서 설정한 변수 사용 예시 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-text-light); /* 색상 변수 사용 */
    z-index: 1;
}

.hero-bg-layer {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: opacity, transform;
    z-index: 1;
    opacity: 0;
    transform: scale(1);
    transition: opacity 1.5s ease, transform 4s ease;
    pointer-events: none;
}

.hero-bg-layer.active {
    opacity: 1;
    transform: scale(1.08);
    z-index: 2;
}

.hero-bg-layer.prev {
    opacity: 0;
    transform: scale(1.12);
    z-index: 1;
}

/* Hero 섹션 하단 연락처 바 */
.hero-contact-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 1.3rem 2.2rem 1.6rem 2.2rem;
    background: transparent;
    color: var(--color-text-light); /* 색상 변수 사용 */
    font-size: 1.11rem;
    font-weight: 500;
    box-sizing: border-box;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
}
.hero-contact-left {
    text-align: left;
    font-weight: 700;
    font-size: 1.18em;
    color: var(--color-text-light); /* 색상 변수 사용 */
    letter-spacing: 0.01em;
}
/* AI-GENERATED: hero-contact-link 클래스로 통합 (인스타그램, 전화, 이메일 공통 스타일) */
.hero-contact-link {
    color: var(--color-text-light); /* 색상 변수 사용 */
    font-weight: 700;
    text-decoration: none;
    font-size: 1.13em;
    letter-spacing: 0.01em;
}
.hero-contact-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}
.hero-contact-right {
    text-align: left;
    font-size: 1em;
    color: var(--color-text-light); /* 색상 변수 사용 */
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18em;
}
.hero-contact-tel, .hero-contact-email {
    color: var(--color-text-light); /* 색상 변수 사용 */
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    display: block;
    line-height: 1.17;
    text-align: left;
}
.hero-contact-sep {
    display: none;
}

/* Slogan 섹션 데스크탑 레이아웃 (1025px 이상) */
@media (min-width: 1025px) {
    /* AI-GENERATED: 공통 섹션 레이아웃 스타일 */
    /* AI-GENERATED: 섹션 레이아웃 좌우 비율 개선 (35:65) */
    .section-layout-inner {
        width: 100%;
        padding: var(--padding-section-desktop); /* 패딩 변수 사용 */
        margin: var(--margin-section-desktop); /* 마진 변수 사용 */
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 3rem; /* 간격 축소 */
        box-sizing: border-box;
        max-width: 100%; /* 1025px 이상에서는 max-width가 100%로 변경되어 .section-inner의 700px를 오버라이드 */
    }

    /* 좌측 슬로건 영역 */
    /* AI-GENERATED: 좌측 영역 비율 및 최대 너비 조정 */
    .section-layout-flex {
        flex-basis: 35%; /* 전체 너비의 35%로 축소 */
        flex-shrink: 0; /* 공간이 부족해도 축소되지 않음 */
        max-width: 400px; /* 최대 너비 축소 */
        width: auto; /* flex-basis에 의해 너비 결정 */
        display: flex; /* 내부 요소 세로 정렬 */
        flex-direction: column;
        justify-content: flex-start;
    }

     .section-layout-left {
        width: 100%; /* 부모 .section-layout-flex 너비에 맞춤 */
        max-width: none;
        display: block;
    }

    /* 슬로건 섹션 타이틀 스타일은 공통 .section-title로 통합되었습니다 */

    /* 섹션별 영문 타이틀 스타일 */
    .section-en.section-slogan-en, .section-en.section-brands-en, .section-en.section-portfolio-en {
        font-size: 1.2rem;
        color: var(--color-subheading-gray); /* 색상 변수 사용 */
        font-weight: 500;
        margin: 1rem 0 0 0; /* 슬로건 제목 아래 간격 */
        text-align: left;
    }

    /* 우측 설명 영역 */
    .section-layout-desc-wrap {
        flex-basis: 0; /* 기본 크기는 0 */
        flex-grow: 1; /* 남은 공간 모두 차지하며 확장 */
        min-width: 0; /* 내용물보다 작아질 수 있도록 설정 */
        position: relative; /* 구분선 absolute 위치 기준 */
        padding-top: 0;
        /* 내부 요소들은 기본 블록 흐름으로 세로 정렬 */
    }


    .section-divider.section-layout-divider--desktop {
        margin: 0 !important;
        position: relative;
        left: 0; /* 부모(.section-layout-desc-wrap)의 좌측에 정렬 */
        width: 100%; /* 부모(.section-layout-desc-wrap) 너비 전체 */
        height: 2px;
        background: var(--color-divider-dark); /* 색상 변수 사용 */
        margin: 0;
        z-index: 1;
    }

    /* 우측 본문 설명 텍스트 블록 */
    .section-layout-body {
        text-align: left;
        margin-top: 2.5rem; /* 구분선 아래 본문 시작 여백 */
        position: relative;
        z-index: 2;
        max-width: 600px; /* 텍스트 블록 폭 제한 */
        /* 기본적으로 부모(.section-layout-desc-wrap)의 좌측에 정렬됨 */
    }
    .section-layout-body p {
        font-size: 1.1rem;
        color: #232323; /* 색상 변수 추가 고려 가능 */
        margin: 0 0 1.2rem 0; /* 마진 변수 추가 고려 가능 */
        line-height: 1.7;
        font-weight: 400;
    }
    .section-layout-body p:last-child {
        margin-bottom: 0;
    }

    /* 더보기 링크 */
    /* AI-GENERATED: .section-more + .section-layout-more 버튼 브랜드 컬러 일관성 오버라이드 */
    .section-layout-more {
        display: inline-block;
        font-size: 1.1rem;
        /* color 속성 제거: .section-more의 브랜드 컬러(#5d7e93)만 적용 */
        font-weight: 600;
        margin-top: 2rem; /* 마진 (변수 추가 고려 가능) */
        letter-spacing: 0.01em;
        cursor: pointer;
    }
    /* 브랜드 컬러 강제 적용: 두 클래스가 모두 있을 때도 항상 브랜드 컬러 */
    .section-more.section-layout-more {
        color: #5d7e93 !important;
    }
    /* End AI-GENERATED: .section-more + .section-layout-more 버튼 브랜드 컬러 오버라이드 */
}


/* 기타 섹션 (Recent Clients, Work Assigned, Inspiration) 데스크탑 스타일 (1025px 이상) */
@media (min-width: 1025px) {
    .section-recent-clients-inner,
    .section-work-assigned-inner,
    .section-inspiration-inner {
        width: 100%;
        padding: var(--padding-section-desktop); /* 패딩 변수 사용 */
        margin: var(--margin-section-desktop); /* 마진 변수 사용 */
        max-width: 100%; /* 1025px 이상에서는 max-width가 100%로 변경되어 .section-inner의 700px를 오버라이드 */
    }
     .section-title {
        font-size: 1.8rem; /* 데스크탑 GNB 로고 사이즈와 일치 */
        letter-spacing: -1.2px;
     }
     .section-en {
        font-size: 1.1rem; /* 데스크탑 영어 부제목 크기 */
     }
     .section-body p {
        font-size: 1.05rem; /* 데스크탑 본문 텍스트 크기 */
     }
     .section-divider {
        margin: 2.5rem 0; /* 데스크탑 구분선 여백 (변수 추가 고려 가능) */
     }
     .section-more {
        font-size: 1.05rem; /* 데스크탑 더보기 링크 크기 */
        margin-top: 2rem; /* 마진 (변수 추가 고려 가능) */
     }
     /* section-inner 자체는 max-width: 100%가 되므로, 콘텐츠는 32px 패딩 안에 좌측 정렬됨 */
}

/* AI-GENERATED: Left-align .section-inner below 1025px */
@media (max-width: 1024px) {
    .section-inner {
        /* max-width: 700px; 는 유지하지만, margin: auto 가 중앙 정렬하는 것을 방지 */
        /* 좌측 정렬을 위해 margin-left를 0으로, margin-right를 auto로 설정 */
        /* 상하 마진은 기존 변수 값을 유지 */
        margin: var(--margin-section-mobile-top) auto var(--margin-section-mobile-bottom) 0; /* 상, 우(auto), 하, 좌(0) 마진 설정 */
    }
    
    /* 푸터 레이아웃도 섹션과 동일하게 좌측 정렬 */
    .footer-container {
        margin-left: 0;
        margin-right: auto;
    }
}

/* AI-GENERATED: 768px-1024px 해상도에서 섹션 타이틀과 GNB 로고 좌측 정렬 맞추기 */
@media (min-width: 768px) and (max-width: 1024px) {
    .section-inner {
        padding-left: 1.5rem; /* GNB와 동일한 좌측 패딩 적용 */
    }
    
    /* 푸터도 섹션과 동일한 패딩 적용 */
    .footer {
        padding-left: 1.5rem;
    }
    
    /* 1024px 해상도에서 푸터 레이아웃 개선 */
    .footer-container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 3rem;
    }
    
    .footer-left {
        flex-basis: 35%;
        flex-shrink: 0;
        max-width: 400px;
    }
    
    .footer-right {
        flex-basis: 0;
        flex-grow: 1;
        min-width: 0;
    }
}
/* End AI-GENERATED: Left-align .section-inner below 1025px */


/* 히어로 하단 콘텍트 & 푸터 텍스트/버튼 반응형 폰트 */
.hero-contact, .hero-contact-tel, .hero-contact-email, .hero-contact-right, .hero-contact-sep,
.footer, .footer-main, .footer-desc, .footer-desc-mobile, .footer-desc-desktop, .footer-contact, .footer-license, .footer-inquiry, .footer-instagram, .hero-contact-instagram {
    font-size: 1.08rem; /* 변수 추가 고려 가능 */
}
@media (min-width: 600px) {
    .hero-contact, .hero-contact-tel, .hero-contact-email, .hero-contact-right, .hero-contact-sep,
    .footer, .footer-main, .footer-desc, .footer-desc-mobile, .footer-desc-desktop, .footer-contact, .footer-license, .footer-inquiry, .footer-instagram, .hero-contact-instagram {
        font-size: 1.18rem; /* 변수 추가 고려 가능 */
    }
}
@media (min-width: 1024px) {
    .hero-contact, .hero-contact-tel, .hero-contact-email, .hero-contact-right, .hero-contact-sep,
    .footer, .footer-main, .footer-desc, .footer-desc-mobile, .footer-desc-desktop, .footer-contact, .footer-license, .footer-inquiry, .footer-instagram, .hero-contact-instagram {
        font-size: 1.35rem; /* 변수 추가 고려 가능 */
    }
}
@media (min-width: 1440px) {
    .hero-contact, .hero-contact-tel, .hero-contact-email, .hero-contact-right, .hero-contact-sep,
    .footer, .footer-main, .footer-desc, .footer-desc-mobile, .footer-desc-desktop, .footer-contact, .footer-license, .footer-inquiry, .footer-instagram, .hero-contact-instagram {
        font-size: 1.5rem; /* 변수 추가 고려 가능 */
    }
}

/* 리스트 스타일 (Client, Work, Inspiration) */
.client-list, .work-list, .inspiration-list {
    list-style: disc; /* 기본 원형 불릿 */
    padding-left: 1.5rem; /* 들여쓰기 */
    margin: 0;
}

.client-list li, .work-list li, .inspiration-list li {
    margin-bottom: 0.5rem; /* 리스트 아이템 간 간격 (변수 추가 고려 가능) */
    font-size: 1rem; /* 모바일 기본 리스트 텍스트 크기 */
    color: #232323; /* 색상 변수 추가 고려 가능 */
    line-height: 1.6;
}

@media (min-width: 1025px) {
    .client-list li, .work-list li, .inspiration-list li {
         font-size: 1.05rem; /* 데스크탑 리스트 텍스트 크기 */
    }
}

/* AI-GENERATED: 쿠키 팝업 스타일 개선 - 글씨 크기 축소, 굵기 감소, 모바일 최적화 */
.cookie-popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    /* AI-GENERATED: 팝업 바깥쪽 배경 완전 투명 처리 (내부만 블러/불투명) */
    background: transparent;
    /* AI-GENERATED: 데스크탑에서 아래 전체를 덮는 그림자/라인 제거 */
    box-shadow: none;
    width: 100%;
    padding: 0;
    margin: 0;
    display: none; /* JS에서 'flex'로 변경 */
    justify-content: center;
    align-items: flex-end;
    border-radius: 0; /* 전체 라운드 제거, 내부 팝업만 라운드 */
    font-family: 'Pretendard', sans-serif;
}

/* AI-GENERATED: 쿠키 팝업 내부를 반투명+블러 처리하여 홈페이지 콘텐츠가 흐릿하게 보이도록 개선 */
.cookie-popup-inner {
    width: 100%;
    max-width: 700px;
    padding: 1.2rem 1rem 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background: rgba(245, 243, 240, 0.25); /* 투명도 더 높여 자연스럽게 */
    border-radius: 12px;
    /* 가우시안 블러 효과로 배경 흐림 */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px); /* 사파리 호환 */
    box-shadow: 0 4px 32px rgba(0,0,0,0.07);
    border: 1px solid rgba(180,180,180,0.13);
    /* 시각적 구분을 위한 약간의 테두리 */
}


.cookie-popup-text {
    color: var(--color-text-dark); /* 색상 변수 사용 */
    font-size: 0.95rem; /* 글씨 크기 축소 */
    margin-bottom: 1rem; /* 마진 축소 */
    text-align: center;
    line-height: 1.5;
    font-weight: 400; /* 기본 굵기 */
    letter-spacing: -0.01em;
}

.cookie-popup-actions {
    display: flex;
    gap: 1.8rem; /* 간격 축소 */
    margin-bottom: 0.1rem;
    justify-content: center;
    width: 100%;
}

.section-cookie-more {
    display: inline-block;
    color: var(--color-text-dark); /* 색상 변수 사용 */
    font-size: 0.9rem; /* 글씨 크기 축소 */
    font-weight: 500; /* 굵기 감소 */
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0.3rem;
    cursor: pointer;
    transition: color 0.18s;
    letter-spacing: -0.01em;
}

.section-cookie-more:hover {
    color: #888;
    background: none;
    text-decoration: underline;
}

/* AI-GENERATED: 쿠키 팝업 닫기 버튼 스타일 개선 */
.cookie-popup-close {
    position: absolute;
    top: 0.7rem;
    right: 0.9rem;
    background: none;
    border: none;
    font-size: 1.2rem; /* 크기 축소 */
    line-height: 1;
    color: var(--color-cookie-popup-close); /* 색상 변수 사용 */
    cursor: pointer;
    padding: 0;
    opacity: 0.7; /* 투명도 감소 */
    transition: opacity 0.2s, color 0.2s;
    font-weight: 300; /* 굵기 감소 */
}

.cookie-popup-close:hover {
    opacity: 1;
    color: var(--color-cookie-popup-close-hover); /* 호버 색상 변수 사용 */
}

/* Consolidate all @media (max-width: 600px) rules into one block */
@media (max-width: 600px) {
    .cookie-popup-inner {
        max-width: 98vw; /* Adjusted to 98vw from 99vw to potentially fix minor overflow issues */
        padding: 1rem 0.5rem 1rem 0.5rem; /* Adjusted padding from different original blocks (변수 추가 고려 가능) */
    }
    .cookie-popup-text {
        font-size: 0.97rem; /* Adjusted font-size from different original blocks */
    }
    .cookie-popup-actions {
        gap: 1.2rem; /* 간격 (변수 추가 고려 가능) */
    }
    /* AI-GENERATED: 모바일에서 쿠키 팝업 닫기 버튼 세로 중앙 정렬 */
    .cookie-popup-close {
        position: absolute;
        top: 50%;
        right: 0.5rem;
        left: auto;
        transform: translateY(-50%);
        font-size: 1.6rem;
        /* 기존 스타일 유지 (색상, 투명도 등) */
    }

    .hero-contact-right {
        text-align: left !important;
        align-items: flex-start !important;
        font-weight: 600 !important;
    }
    .hero-contact-bar {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        width: 100%;
        background: transparent;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        padding: 0.7rem 0.9rem 1.1rem 0.9rem; /* 기본 패딩 */
        font-size: 0.98rem;
        gap: 0;
        z-index: 20;
    }
    /* AI-GENERATED: hero-contact-bar 영역이 아이폰에서 잘 보이도록 여백 추가 */
@media (max-width: 767px) {
        .hero-contact-bar {
            position: absolute; /* fixed에서 absolute로 변경 - 따라다니지 않음 */
            padding: 0.7rem 0.9rem calc(1.2rem + env(safe-area-inset-bottom)) 0.9rem;
            z-index: 20;
        }
        
        .hero-contact-right {
            flex-direction: column;
            align-items: flex-end;
            gap: 0.3rem;
        }
        
        .hero-contact-link {
            font-size: 0.9em;
            white-space: nowrap;
        }
    }
    .hero-contact-left {
        text-align: left;
        font-weight: 700;
        font-size: 1.12em;
        color: var(--color-text-light); /* 색상 변수 사용 */
        letter-spacing: 0.01em;
    }
    .hero-contact-instagram {
        color: var(--color-text-light); /* 색상 변수 사용 */
        font-weight: 700;
        text-decoration: none;
        font-size: 1.08em;
        letter-spacing: 0.01em;
    }
    .hero-contact-instagram:hover {
        text-decoration: underline;
        opacity: 0.85;
    }
    .hero-contact-right {
        text-align: right;
        font-size: 0.95em;
        color: var(--color-text-light); /* 색상 변수 사용 */
        font-weight: 400;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.13em; /* 간격 (변수 추가 고려 가능) */
    }
    .hero-contact-tel, .hero-contact-email {
        color: var(--color-text-light); /* 색상 변수 사용 */
        font-size: 0.97em;
        text-decoration: none;
        display: block;
        line-height: 1.17;
    }
    .hero-contact-sep {
        display: none;
    }

    .footer-instagram {
        right: var(--footer-insta-right-mobile); /* 위치 변수 사용 */
        bottom: var(--footer-insta-bottom-mobile); /* 위치 변수 사용 */
    }

}


/* AI-GENERATED: 연락하기 페이지 스타일 */
/* 연락하기 페이지 헤더 */
.contact-header {
    margin-bottom: 3rem;
}

/* AI-GENERATED: 타이핑 효과를 위한 스타일 */
.welcome-typing-area {
    min-height: 2.3em;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.contact-subtitle {
    font-size: 1.1rem;
    color: var(--color-subheading-gray);
    font-weight: 400;
    line-height: 1.6;
}

#typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background-color: var(--color-heading-dark);
    margin-left: 2px;
    vertical-align: middle;
    animation: cursor-blink 0.8s infinite;
}

@keyframes cursor-blink {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

/* 하이라이트 효과 스타일 */
.highlight {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0 2px;
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

/* 연락하기 컨테이너 레이아웃 */
.contact-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* 연락처 정보 영역 */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-info-group {
    margin-bottom: 1rem;
}

.contact-info-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-heading-dark);
    margin-bottom: 0.8rem;
}

.contact-info-text {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    color: var(--color-text-dark);
}

.contact-email-link,
.contact-social-link {
    color: var(--color-text-dark);
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.contact-email-link:hover,
.contact-social-link:hover {
    color: #555;
}

.contact-email-link::after,
.contact-social-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #555;
    transition: width 0.3s ease;
}

.contact-email-link:hover::after,
.contact-social-link:hover::after {
    width: 100%;
}

/* AI-GENERATED: 문의 폼 영역 - 데스크탑 좌측 정렬, 모바일 중앙정렬 */
.contact-form {
    margin-top: 0.8rem;
    width: 100%;
    max-width: 420px;
    margin-left: 0; /* 데스크탑에서 좌측 정렬 */
    margin-right: auto;
    background: none;
    box-shadow: none;
    padding: 0;
    text-align: left;
}
/* 모바일에서는 중앙정렬 유지 */
@media (max-width: 767px) {
    .contact-form {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        padding: 0;
    }
}
/* End AI-GENERATED: 문의 폼 좌측 정렬 */


.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}

.form-group label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.8rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 1rem;
    font-family: 'Pretendard', sans-serif;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #f9f9f9;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #aaa;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #aaa;
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

/* 개인정보 동의 체크박스 */
.form-privacy {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
}

.form-privacy input[type="checkbox"] {
    margin-top: 0.3rem;
    width: 16px;
    height: 16px;
}

.form-privacy label {
    font-size: 0.9rem;
    line-height: 1.5;
}

.privacy-link {
    color: var(--color-subheading-gray);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.privacy-link:hover {
    color: var(--color-heading-dark);
}

/* AI-GENERATED: 문의하기 버튼 미니멀·고급·절제 스타일 */
/* AI-GENERATED: 문의 버튼 기본 폰트 컬러 브랜드 컬러 적용 */
.contact-submit-btn {
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    color: #5d7e93; /* 브랜드 컬러 */
    background: transparent;
    border: 1.5px solid #5d7e93;
    border-radius: 18px;
    padding: 0.5em 1.5em;
    margin-top: 1rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: none;
    text-align: center;
    line-height: 1.3;
    transition: color 0.22s, background 0.22s, border-color 0.22s, box-shadow 0.22s, transform 0.18s;
    position: relative;
}
/* End AI-GENERATED: 문의 버튼 폰트 컬러 */

.contact-submit-btn:hover,
.contact-submit-btn:focus {
    color: #fff; /* hover/focus 시 흰색 */
    background: #5d7e93;
    border-color: #5d7e93;
    box-shadow: 0 2px 12px rgba(93,126,147,0.09);
    transform: translateY(-2px) scale(1.03);
    outline: none;
}
.contact-submit-btn:active {
    background: #39596b;
    border-color: #39596b;
}
.contact-submit-btn:focus-visible {
    outline: 2px solid #39596b;
    outline-offset: 2px;
}
.contact-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: transparent;
    color: #b0b0b0;
    border-color: #c7d2da;
}
.contact-submit-btn.sending {
    background: #eaf0f4;
    color: #b0b0b0;
    border-color: #c7d2da;
}
/* End AI-GENERATED: 문의하기 버튼 미니멀 CTA */


/* 폼 상태 메시지 */
.form-status {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
    transition: all 0.3s ease;
}

.form-status.success {
    background-color: rgba(76, 175, 80, 0.1);
    color: #2e7d32;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.form-status.error {
    background-color: rgba(244, 67, 54, 0.1);
    color: #c62828;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

/* 반응형 스타일 */
@media (min-width: 768px) {
    .contact-container {
        flex-direction: row;
        gap: 4rem;
    }
    
    .contact-info {
        flex-basis: 35%;
    }
    
    .contact-info-group:last-child {
        flex-basis: 65%;
    }
}

@media (min-width: 1025px) {
    .contact-header {
        margin-bottom: 4rem;
    }
    
    .contact-subtitle {
        font-size: 1.2rem;
    }
    
    .contact-container {
        gap: 6rem;
    }
    
    .contact-info {
        flex-basis: 30%;
    }
    
    .contact-info-group:last-child {
        flex-basis: 70%;
    }
}

/* Footer */
/* AI-GENERATED: 푸터 스타일 개선 - 반응형 레이아웃 및 폰트 속성 향상 */
.footer {
    width: 100%;
    box-sizing: border-box;
    padding: var(--footer-padding); /* 패딩 변수 사용 */
    color: var(--color-text-dark); /* 색상 변수 사용 */
    margin-top: var(--footer-margin-top-mobile); /* 마진 변수 사용 */
    background: none;
    position: relative;
    flex-shrink: 0; /* 푸터는 줄어들지 않도록 설정 */
    line-height: 1.5;
    font-size: 0.95rem; /* 기본 폰트 크기 조정 */
}

/* 푸터 컨테이너 - 반응형 레이아웃을 위한 플렉스 컨테이너 */
.footer-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

/* 푸터 좌측 영역 - 저작권 및 개인정보처리방침 */
.footer-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 푸터 우측 영역 - 연락처 정보 */
.footer-right {
    display: flex;
    flex-direction: column;
}

/* 푸터 메인 텍스트 (저작권) */
.footer-main {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--color-text-dark);
}

/* 푸터 링크 컨테이너 */
.footer-links {
    margin-top: 0.2rem;
}

/* 푸터 내 모든 링크 공통 스타일 */
.footer-link {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-dark);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
    position: relative;
    margin-bottom: 0.5rem;
}

.footer-link:hover {
    opacity: 0.8;
}

.footer-link:focus {
    outline: 2px solid rgba(0, 123, 255, 0.5);
    outline-offset: 2px;
}

/* 푸터 연락처 영역 */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}

/* 푸터 아이콘 (t., e., i., BRN.) 스타일 */
.footer-icon {
    font-weight: 600;
    display: inline-block;
    min-width: 1.5rem;
}

/* 사업자등록번호 스타일 */
.footer-brn {
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 0.5rem;
    color: var(--color-text-dark);
}

/* AI-GENERATED: 태블릿 화면 대응 개선 - 섹션과 일관성 유지 */
@media (min-width: 768px) {
    .footer {
        padding: var(--footer-padding-tablet);
        font-size: 0.9rem;
    }
    
    /* AI-GENERATED: 태블릿에서도 gap 제거 */
    .footer-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .footer-left {
        flex: 1;
        margin-right: 0; /* 마진 제거 */
    }
    
    .footer-right {
        flex: 1;
    }
    
    .footer-link {
        font-size: 0.9rem;
    }
    
    .footer-contact {
        font-size: 0.9rem;
    }
    
    .footer-brn {
        font-size: 0.9rem;
    }
}

/* AI-GENERATED: 레이아웃 일관성을 위한 추가 미디어 쿼리 - 1024px 해상도 대응 */
@media (min-width: 1024px) and (max-width: 1024px) {
    .footer {
        padding: 0 1.5rem; /* 섹션과 동일한 패딩 */
    }
    
    /* AI-GENERATED: 1024px 해상도에서도 gap 제거 */
    .footer-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding-left: 1.5rem; /* 섹션과 동일한 좌측 패딩 */
    }
    
    .footer-left {
        flex-basis: 35%;
        flex-shrink: 0;
        max-width: 400px;
    }
    
    .footer-right {
        flex-basis: 0;
        flex-grow: 1;
        min-width: 0;
    }
}

/* 데스크탑 화면 대응 */
/* AI-GENERATED: 푸터 레이아웃을 섹션 레이아웃과 일관되게 조정 */
@media (min-width: 1025px) {
    .footer {
        padding: var(--padding-section-desktop); /* 섹션과 동일한 패딩 변수 사용 */
        margin-top: var(--footer-margin-top-desktop);
        width: 100%;
        box-sizing: border-box;
    }
    
    /* AI-GENERATED: 푸터 컨테이너 정렬 문제 해결 - gap 제거 */
    .footer-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        /* space-between 제거하고 좌측 정렬로 변경 */
        justify-content: flex-start; /* 768px에서 적용된 space-between 덮어쓰기 */
        max-width: 100%; /* 섹션 레이아웃과 동일하게 설정 */
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    .footer-left {
        flex-basis: 35%; /* 섹션 레이아웃과 동일한 방식으로 flex-basis 사용 */
        flex-shrink: 0;
        max-width: 400px; /* 섹션 레이아웃과 동일한 최대 너비 */
        width: auto;
        margin-right: 0; /* 마진 제거 */
    }
    
    .footer-right {
        flex-basis: 0; /* 섹션 레이아웃과 동일한 방식으로 flex-basis와 flex-grow 사용 */
        flex-grow: 1;
        min-width: 0;
        display: flex;
        justify-content: flex-end;
    }
    
    .footer-contact {
        max-width: 400px;
    }
}

/* AI-GENERATED: 브랜드 소개 섹션 스타일 */
.section-brands {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

/* AI-GENERATED: 브랜드 전문영역 3중 벤다이어그램 스타일 */

/* AI-GENERATED: 브랜드 이원화 + End-to-End Total Solution 라인형 도식 스타일 (의미 명확/여백 넉넉/직관적/고급/미니멀) */
.brand-diagram--split .brand-diagram__split-svg-wrap {
  width: 100%;
  max-width: 580px;
  margin: 0 auto 1.2rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.brand-diagram__split-svg {
  width: 100%;
  height: auto;
  max-width: 520px;
  min-width: 280px;
  display: block;
  background: none;
}
.brand-diagram__split-brand {
  font-family: 'Pretendard', 'Noto Sans KR', Arial, sans-serif;
  font-size: 1.17rem;
  font-weight: 700;
  fill: #18222b;
  letter-spacing: 0.02em;
  dominant-baseline: middle;
}
.brand-diagram__split-brand--badayurim {
  fill: #28495e;
}
.brand-diagram__split-brand--spatial {
  fill: #6d553a;
}
.brand-diagram__split-desc {
  font-family: 'Pretendard', 'Noto Sans KR', Arial, sans-serif;
  font-size: 0.99rem;
  font-weight: 400;
  fill: #5d6470;
  letter-spacing: 0.01em;
  dominant-baseline: middle;
  opacity: 0.92;
}
.brand-diagram__split-center-label {
  font-family: 'Pretendard', 'Noto Sans KR', Arial, sans-serif;
  font-size: 1.09rem;
  font-weight: 600;
  fill: #28495e;
  letter-spacing: 0.01em;
  dominant-baseline: middle;
}
.brand-diagram__split-svg line {
  stroke: #bfc5c9;
  stroke-width: 2.2;
  stroke-dasharray: 4 6;
}
.brand-diagram__split-svg rect {
  fill: #fff;
  stroke: #5d7e93;
  stroke-width: 1.2;
  rx: 0;
  /* 각진 박스, 미니멀 */
}
.brand-diagram__split-svg text {
  user-select: none;
}
@media (max-width: 767px) {
  .brand-diagram--split .brand-diagram__split-svg {
    max-width: 99vw;
    min-width: 160px;
  }
  .brand-diagram__split-brand {
    font-size: 0.97rem;
  }
  .brand-diagram__split-desc {
    font-size: 0.83rem;
  }
  .brand-diagram__split-center-label {
    font-size: 0.94rem;
  }
}
/* End AI-GENERATED: 브랜드 이원화 + End-to-End Total Solution 라인형 도식 스타일 (의미 명확/여백 넉넉/직관적/고급/미니멀) */
.brand-diagram {
  margin: 2.5rem 0 2.8rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.brand-diagram__svg-wrap {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.brand-diagram__svg {
  width: 100%;
  height: auto;
  max-width: 370px;
  min-width: 240px;
  display: block;
}
.brand-diagram__circle--space {
  stroke: #5d7e93;
  fill: #5d7e93;
  fill-opacity: 0.18;
}
.brand-diagram__circle--uxui {
  stroke: #93755d;
  fill: #93755d;
  fill-opacity: 0.18;
}
.brand-diagram__circle--branding {
  stroke: #222;
  fill: #222;
  fill-opacity: 0.13;
}
.brand-diagram__label {
  font-family: 'Pretendard', 'Noto Sans KR', Arial, sans-serif;
  font-size: 1.13rem;
  font-weight: 700;
  fill: #181818;
  letter-spacing: 0.02em;
  dominant-baseline: middle;
  paint-order: stroke fill;
  stroke: #fff;
  stroke-width: 0.8px;
}
.brand-diagram__label--space {
  fill: #5d7e93;
  stroke: #fff;
}
.brand-diagram__label--uxui {
  fill: #93755d;
  stroke: #fff;
}
.brand-diagram__label--branding {
  fill: #222;
  stroke: #fff;
}
.brand-diagram__center-group rect {
  filter: drop-shadow(0 1.5px 7px rgba(0,0,0,0.07));
}
.brand-diagram__center-label {
  font-family: 'Pretendard', 'Noto Sans KR', Arial, sans-serif;
  font-size: 1.09rem;
  font-weight: 800;
  fill: #5d7e93;
  letter-spacing: 0.02em;
  dominant-baseline: middle;
}
.brand-diagram__center-desc {
  font-family: 'Pretendard', 'Noto Sans KR', Arial, sans-serif;
  font-size: 0.93rem;
  font-weight: 600;
  fill: #93755d;
  letter-spacing: 0.01em;
  dominant-baseline: middle;
}
.brand-diagram__desc {
  margin-top: 1.1rem;
  font-size: 1.03rem;
  color: #444;
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .brand-diagram__svg {
    max-width: 99vw;
    min-width: 160px;
  }
  .brand-diagram__label {
    font-size: 0.92rem;
    stroke-width: 0.5px;
  }
  .brand-diagram__center-label {
    font-size: 0.96rem;
  }
  .brand-diagram__center-desc {
    font-size: 0.85rem;
  }
  .brand-diagram__desc {
    font-size: 0.97rem;
  }
}
/* End AI-GENERATED: 브랜드 전문영역 3중 벤다이어그램 스타일 */

.brand-diagram__label--uxui/* AI-GENERATED: 고객 여정(Flow)형 SVG 도식 - 감각적/트렌디/컬러포인트/아이콘/그라데이션/그림자 */
.brand-diagram--flow {
  margin: 2.8rem 0 2.4rem 0;
}
.brand-diagram__flow-svg-wrap {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 1.6rem auto;
  box-sizing: border-box;
  padding: 0 1.2rem;
}
.brand-diagram__flow-svg {
  width: 100%;
  height: auto;
  display: block;
  min-width: 320px;
}
.brand-diagram__desc {
  text-align: center;
  font-size: 1.13rem;
  color: #2a3b47;
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .brand-diagram__flow-svg-wrap {
    max-width: 100vw;
    padding: 0 0.3rem;
  }
  .brand-diagram__flow-svg {
    min-width: 240px;
    max-width: 100vw;
  }
}
/* End AI-GENERATED: 고객 여정(Flow)형 SVG 도식 - 감각적/트렌디/컬러포인트/아이콘/그라데이션/그림자 */

.section-title-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

.brand-cards {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

.brand-card {
    border-radius: 8px;
    background-color: #f5f5f5;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.brand-card--badayurim {
    background-color: #f8f4f1;
    border-left: 4px solid #5d7e93;
}

.brand-card--spatial-rights {
    background-color: #f1f8f4;
    border-left: 4px solid #93755d;
}

.brand-card__title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: #333;
}

.brand-card__desc {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.brand-card__link {
    margin-top: auto;
    align-self: flex-start;
    font-size: 1rem;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #333;
    padding-bottom: 3px;
    transition: all 0.3s ease;
}

.brand-card__link:hover {
    color: #5d7e93;
    border-color: #5d7e93;
}

/* AI-GENERATED: 서비스 영역 섹션 스타일 */
.section-service-areas {
    margin-top: 5rem;
    margin-bottom: 5rem;
    background-color: #fafafa;
    padding: 4rem 0;
}

.service-areas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.service-area-item {
    background-color: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-area-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.service-area-item__icon {
    color: #5d7e93;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #f5f8fa;
}

.service-area-item__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: #333;
}

.service-area-item__desc {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
}

/* AI-GENERATED: 최근 프로젝트 섹션 스타일 */
.section-recent-projects {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.projects-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 2rem;
}

.project-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.project-card__image {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.project-card__content {
    padding: 1.5rem;
}

.project-card__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #333;
}

.project-card__category {
    font-size: 0.9rem;
    color: #5d7e93;
    font-weight: 600;
    margin-bottom: 1rem;
}

.project-card__desc {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.project-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-tag {
    font-size: 0.8rem;
    background-color: #f5f5f5;
    color: #666;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
}

/* AI-GENERATED: 인사이트 섹션 스타일 */
.section-insights {
    margin-top: 5rem;
    margin-bottom: 5rem;
    background-color: #f8f8f8;
    padding: 4rem 0;
}

.insights-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

.insight-card {
    background-color: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.insight-card:hover {
    transform: translateY(-5px);
}

.insight-card__date {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 1rem;
}

.insight-card__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: #333;
    line-height: 1.4;
}

.insight-card__excerpt {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.insight-card__link {
    font-size: 1rem;
    color: #5d7e93;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 3px;
    transition: all 0.3s ease;
}

.insight-card__link:hover {
    border-color: #5d7e93;
}

/* AI-GENERATED: 미디어 쿼리 (반응형 스타일) */
@media (min-width: 768px) {
    .brand-cards {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .brand-card {
        flex: 1 1 calc(50% - 1rem);
        min-width: 280px;
    }
    
    .service-areas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .projects-grid {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .project-card {
        flex: 1 1 calc(50% - 1.25rem);
        min-width: 300px;
    }
    
    .insights-grid {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .insight-card {
        flex: 1 1 calc(50% - 1rem);
        min-width: 280px;
    }
}

@media (min-width: 1025px) {
    .service-areas-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .project-card {
        flex: 1 1 calc(33.33% - 1.67rem);
    }
    
    .insight-card {
        flex: 1 1 calc(33.33% - 1.33rem);
    }
    
    .brand-card {
        flex: 1;
    }
}
/* AI-GENERATED: 브랜드 소개 섹션 스타일 - 슬로건 섹션과 동일한 구조로 통일 */
.section-brands {
    background-color: var(--color-background-light);
}
.section-brands-inner {
    padding: var(--padding-section-mobile);
    max-width: 700px;
    margin: var(--margin-section-mobile-top) auto var(--margin-section-mobile-bottom) auto;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .section-brands-inner {
        padding: var(--padding-section-tablet);
        max-width: 900px;
        margin: var(--margin-section-tablet-top) auto var(--margin-section-tablet-bottom) auto;
    }
}
@media (min-width: 1025px) {
    .section-brands-inner {
        padding: var(--padding-section-desktop);
        max-width: 1200px;
        margin: var(--margin-section-desktop) auto;
    }
}

.brands-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.brands-item {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.brands-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.brands-item--badayurim {
    border-left: 4px solid #5d7e93;
}

.brands-item--spatial {
    border-left: 4px solid #93755d;
}

.brands-item-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.7rem 0;
    color: var(--color-heading-dark);
}

.brands-item-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-dark);
    margin: 0 0 1.5rem 0;
}

.section-brands-more {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-top: 0.8rem;
}

.brands-item-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: var(--color-heading-dark);
}

.brands-item-desc {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-dark);
    margin-bottom: 1.5rem;
}

/* AI-GENERATED: 전문 영역 섹션 스타일 - 슬로건/브랜드/인사이트와 동일한 구조로 통일 */
.section-expertise {
    background-color: #f8f8f8;
}
.section-expertise-inner {
    padding: var(--padding-section-mobile);
    max-width: 700px;
    margin: var(--margin-section-mobile-top) auto var(--margin-section-mobile-bottom) auto;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .section-expertise-inner {
        padding: var(--padding-section-tablet);
        max-width: 900px;
        margin: var(--margin-section-tablet-top) auto var(--margin-section-tablet-bottom) auto;
    }
}
@media (min-width: 1025px) {
    .section-expertise-inner {
        padding: var(--padding-section-desktop);
        max-width: 1200px;
        margin: var(--margin-section-desktop) auto;
    }
}

.expertise-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.expertise-item {
    background-color: white;
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.expertise-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.expertise-item-icon {
    color: #5d7e93;
    margin-bottom: 1rem;
}

.expertise-item-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-heading-dark);
}

.expertise-item-desc {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-dark);
}

/* AI-GENERATED: 포트폴리오 섹션 스타일 - 슬로건/브랜드/전문영역/인사이트와 동일한 구조로 통일 */
.section-portfolio {
    background-color: var(--color-background-light);
}
.section-portfolio-inner {
    padding: var(--padding-section-mobile);
    max-width: 700px;
    margin: var(--margin-section-mobile-top) auto var(--margin-section-mobile-bottom) auto;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .section-portfolio-inner {
        padding: var(--padding-section-tablet);
        max-width: 900px;
        margin: var(--margin-section-tablet-top) auto var(--margin-section-tablet-bottom) auto;
    }
}
@media (min-width: 1025px) {
    .section-portfolio-inner {
        padding: var(--padding-section-desktop);
        max-width: 1200px;
        margin: var(--margin-section-desktop) auto;
    }
}

.portfolio-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.portfolio-item {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.portfolio-item-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.portfolio-item-content {
    padding: 1.5rem;
}

.portfolio-item-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-heading-dark);
}

.portfolio-item-category {
    font-size: 0.9rem;
    color: #5d7e93;
    font-weight: 600;
    margin-bottom: 1rem;
}

.portfolio-item-desc {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-dark);
    margin-bottom: 1.2rem;
}

/* AI-GENERATED: 인사이트 섹션 스타일 - 슬로건/브랜드/전문영역과 동일한 구조로 통일 */
.section-insights {
    background-color: var(--color-background-light);
}
.section-insights-inner {
    padding: var(--padding-section-mobile);
    max-width: 700px;
    margin: var(--margin-section-mobile-top) auto var(--margin-section-mobile-bottom) auto;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .section-insights-inner {
        padding: var(--padding-section-tablet);
        max-width: 900px;
        margin: var(--margin-section-tablet-top) auto var(--margin-section-tablet-bottom) auto;
    }
}
@media (min-width: 1025px) {
    .section-insights-inner {
        padding: var(--padding-section-desktop);
        max-width: 1200px;
        margin: var(--margin-section-desktop) auto;
    }
}

.insights-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.insights-item {
    background-color: white;
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.insights-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.insights-item-date {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 0.8rem;
}

.insights-item-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: var(--color-heading-dark);
    line-height: 1.4;
}

.insights-item-excerpt {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-dark);
    margin-bottom: 1.2rem;
}

/* AI-GENERATED: 모바일 & 테블릿 해상도에서 섹션 구조 통일성 유지 */
/* 모바일에서 슬로건 섹션과 동일한 구조 적용 */
.section-brands-title-wrap,
.section-expertise-title-wrap,
.section-portfolio-title-wrap,
.section-insights-title-wrap {
    width: 100%;
    margin-bottom: 1.5rem;
}

.section-brands .section-body,
.section-expertise .section-body,
.section-portfolio .section-body,
.section-insights .section-body {
    width: 100%;
    position: relative;
}

/* 슬로건 섹션과 동일하게 구분선 스타일 설정 */
.section-brands .section-divider,
.section-expertise .section-divider,
.section-portfolio .section-divider,
.section-insights .section-divider {
    margin: 0 0 1.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .brands-list,
    .expertise-list,
    .portfolio-list,
    .insights-list {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    
    /* 슬로건 섹션과 동일한 테블릿 레이아웃 적용 */
    .section-brands-inner,
    .section-expertise-inner,
    .section-portfolio-inner,
    .section-insights-inner {
        width: 100%;
        max-width: 90%;
        padding: var(--padding-section-tablet, 2rem 3rem);
        margin: var(--margin-section-tablet, 0 auto);
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 5rem; /* 슬로건 섹션과 동일한 간격 */
        box-sizing: border-box;
    }
    
    /* 슬로건 섹션처럼 타이틀 영역 설정 */
    .section-brands-title-wrap,
    .section-expertise-title-wrap,
    .section-portfolio-title-wrap,
    .section-insights-title-wrap {
        flex-basis: 40%; /* 슬로건 섹션과 동일한 비율 */
        flex-shrink: 0;
        max-width: 500px; /* 슬로건 섹션과 동일 */
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-bottom: 0;
    }
    
    /* 좌측 타이틀 영역 조정 */
    .section-brands .section-title,
    .section-expertise .section-title,
    .section-portfolio .section-title,
    .section-insights .section-title {
        width: 100%;
        max-width: none;
        display: block;
    }
    
    /* 우측 콘텐츠 영역 - 슬로건 섹션과 동일하게 설정 */
    .section-brands .section-body,
    .section-expertise .section-body,
    .section-portfolio .section-body,
    .section-insights .section-body {
        flex-basis: 0;
        flex-grow: 1;
        min-width: 0;
        position: relative;
        padding-top: 0;
    }
    
    /* 구분선 스타일 슬로건 섹션과 동일하게 설정 */
    .section-brands .section-divider,
    .section-expertise .section-divider,
    .section-portfolio .section-divider,
    .section-insights .section-divider {
        margin: 1.5rem 0 2rem;
        width: 100%;
    }
}

@media (min-width: 1025px) {
    /* 섹션 내부 콘텐츠 그리드 설정 */
    .brands-list,
    .expertise-list,
    .portfolio-list,
    .insights-list {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2.5rem;
    }
    
    /* AI-GENERATED: 데스크탑에서 섹션들의 레이아웃을 슬로건 섹션과 통일 */
    .section-brands-inner,
    .section-expertise-inner,
    .section-portfolio-inner,
    .section-insights-inner {
        width: 100%;
        padding: var(--padding-section-desktop);
        margin: var(--margin-section-desktop);
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 5rem;
        box-sizing: border-box;
        max-width: 100%;
    }
    
    /* 좌측 섹션 제목 영역 */
    /* AI-GENERATED: 공통 섹션 타이틀 스타일로 통합 */
    .section-brands .section-title,
    .section-expertise .section-title,
    .section-portfolio .section-title,
    .section-insights .section-title {
        flex-basis: 30%;
        flex-shrink: 0;
        /* 폰트 크기, 굵기, 줄 간격, 색상, 자간 등은 공통 .section-title에서 상속받음 */
        margin: 0;
    }
    
    /* 우측 콘텐츠 영역 */
    .section-brands .section-body,
    .section-expertise .section-body,
    .section-portfolio .section-body,
    .section-insights .section-body {
        flex-basis: 0;
        flex-grow: 1;
        min-width: 0;
        position: relative;
    }
    
    /* 구분선 위치 조정 */
    .section-brands .section-divider,
    .section-expertise .section-divider,
    .section-portfolio .section-divider,
    .section-insights .section-divider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--color-divider-dark);
        margin: 0;
    }
    
    /* 콘텐츠 리스트 위치 조정 */
    .brands-list,
    .expertise-list,
    .portfolio-list,
    .insights-list {
        margin-top: 2.5rem;
    }
}

/* SELECT 페이지 스타일 */
.select-highlight {
    color: var(--color-select-highlight);
    font-weight: 600;
}

/* Featured Brand Card - 명함 스타일 */
.section-select-featured {
    background: var(--color-background-light);
    padding-top: calc(var(--navbar-height-mobile) + 24px);
    padding-bottom: 24px;
}

.featured-brand-card {
    background: var(--color-select-card-bg);
    border: 1px solid #DDDDDD;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0 auto;
    max-width: 480px;
}

.featured-brand-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.brand-card-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.brand-card-logo {
    text-align: center;
    border-bottom: 1px solid #DDDDDD;
    padding-bottom: 16px;
}

.brand-name {
    font-size: 24px;
    font-weight: 600;
    color: #222222;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.brand-tagline {
    font-size: 14px;
    color: #555555;
    margin: 0;
    line-height: 1.4;
}

.brand-card-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.brand-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-select-available);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.brand-product {
    font-size: 14px;
    color: #222222;
    font-weight: 500;
}

.brand-card-cta {
    width: 100%;
    height: 48px;
    background: transparent;
    color: var(--color-select-highlight);
    border: 2px solid var(--color-select-highlight);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1;
}

.brand-card-cta:hover {
    background: var(--color-select-highlight);
    color: #FFFFFF;
    transform: scale(1.02);
}

.brand-card-cta:focus {
    outline: 2px solid var(--color-select-highlight);
    outline-offset: 2px;
}

/* 태블릿 이상 */
@media (min-width: 768px) {
    .section-select-featured {
        padding-top: calc(var(--navbar-height-desktop-mid) + 48px);
        padding-bottom: 48px;
    }
    
    .featured-brand-card {
        padding: 32px;
        max-width: 600px;
    }
    
    .brand-card-inner {
        gap: 24px;
    }
    
    .brand-card-logo {
        padding-bottom: 24px;
    }
    
    .brand-name {
        font-size: 28px;
    }
    
    .brand-tagline {
        font-size: 16px;
    }
    
    .brand-card-info {
        padding: 16px 0;
    }
    
    .brand-status {
        font-size: 14px;
    }
    
    .brand-product {
        font-size: 16px;
    }
}

/* 데스크탑 */
@media (min-width: 1025px) {
    .section-select-featured {
        padding-top: calc(var(--navbar-height-desktop-large) + 48px);
    }
    
    .featured-brand-card {
        max-width: 720px;
        padding: 48px;
    }
    
    .brand-name {
        font-size: 32px;
    }
}

.section-select-hero {
    background: var(--color-background-light);
    padding-top: 2rem;
}

.select-brands-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.select-brand-card {
    background: var(--color-select-card-bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px var(--color-select-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.select-brand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px var(--color-select-shadow);
}

.select-brand-status {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.select-brand-card--available .select-brand-status {
    background: var(--color-select-available);
    color: white;
}

.select-brand-card--coming .select-brand-status {
    background: var(--color-select-coming);
    color: white;
}

.select-brand-image {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: #f5f5f5;
    position: relative;
}

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

.brand-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    color: #999;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
}

.select-brand-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-heading-dark);
    margin-bottom: 0.5rem;
}

.select-brand-subtitle {
    color: var(--color-subheading-gray);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.select-brand-description {
    color: var(--color-text-dark);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.select-brand-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.brand-highlight {
    background: #f5f5f5;
    color: var(--color-text-dark);
    padding: 0.3rem 0.8rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
}

.select-brand-price {
    color: var(--color-select-highlight);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.select-brand-cta {
    width: 100%;
    height: 48px;
    background: var(--color-select-highlight);
    color: white;
    border: none;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.select-brand-cta:hover {
    background: #39596b;
}

.select-brand-cta--disabled {
    background: #ccc;
    cursor: not-allowed;
}

.select-brand-cta--disabled:hover {
    background: #ccc;
}

.section-select-about {
    background: var(--color-background-light);
}

.select-principles {
    margin: 2rem 0;
}

.principle-item {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.principle-title {
    color: var(--color-select-highlight);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.principle-item p {
    color: var(--color-text-dark);
    line-height: 1.6;
    margin: 0;
}

/* 태블릿 이상 */
@media (min-width: 768px) {    
    .select-principles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    .principle-item {
        margin-bottom: 0;
    }
}

/* SELECT 배너 섹션 스타일 - 배경색 제거하여 일관된 톤앤매너 적용 */
.section-select-banner {
    margin: 2rem 0;
    position: relative;
}

.section-select-banner .section-inner {
    padding: 2rem 1.5rem;
}

.select-cta-wrapper {
    margin-top: 2rem;
}

.select-cta-button {
    display: inline-block;
    background: transparent;
    color: #5d7e93; /* 바다유림 브랜드 컬러 */
    border: 1px solid #5d7e93;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.22s, background 0.22s, border-color 0.22s, box-shadow 0.22s, transform 0.18s;
}

.select-cta-button:hover {
    background: #5d7e93;
    color: white;
    border-color: #5d7e93;
    box-shadow: 0 2px 12px rgba(93,126,147,0.09);
    transform: translateY(-2px) scale(1.03);
    text-decoration: none;
}

/* SELECT CTA 버튼 추가 상태 및 접근성 개선 */
.select-cta-button:active {
    background: #39596b;
    border-color: #39596b;
    transform: translateY(-1px) scale(1.01);
}

.select-cta-button:focus {
    background: #5d7e93;
    color: white;
    border-color: #5d7e93;
    box-shadow: 0 2px 12px rgba(93,126,147,0.09);
    transform: translateY(-2px) scale(1.03);
    outline: none;
}

.select-cta-button:focus-visible {
    outline: 2px solid #39596b;
    outline-offset: 2px;
}

/* 태블릿 이상에서 SELECT 배너 스타일 개선 */
@media (min-width: 768px) {
    .section-select-banner .section-inner {
        padding: 3rem 2rem;
    }
    
    .select-cta-button {
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }
}

/* 데스크톱에서 SELECT 배너 스타일 */
@media (min-width: 1025px) {
    .section-select-banner {
        margin: 3rem 0;
    }
    
    .section-select-banner .section-inner {
        padding: 3.5rem 2.5rem;
    }
}