:root {
    --navH: 6vh;
    --text-main-yellow: rgb(247, 201, 72);
    --main-navy: rgba(15, 23, 42);
    --main-mo-font-size: 1.2rem;
    /* 페이지 최대 너비 */
    --page-max-width: 2560px;
}

/* 기본 레이아웃 -------------------------------------------------- */

html,
body {
    height: 100%;
    margin: 0;
}

body {
    padding-top: var(--navH);
    background-color: var(--main-navy);
}

/* 헤더 영역 */
header {
    min-height: var(--navH);
    max-height: var(--navH);
    background-color: var(--main-navy);
    opacity: 1;
}

/* 네비게이션 */
.navbar {
    background: var(--main-navy);
}

.navbar .container-fluid {
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
}

/* 공통 섹션 박스 (각 섹션의 기본 틀) */
.section {
    width: 100%;
    min-height: calc(100vh - var(--navH));
    max-width: var(--page-max-width);
    margin: 0 auto;
}

/* 공통 유틸리티 -------------------------------------------------- */

.text-brand-yellow {
    color: var(--text-main-yellow);
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.nav-link {
    color: white;
}

.text-white\/70 {
    color: rgb(255 255 255 / 0.7);
}

.text-dark\/70 {
    color: rgb(0 0 0 / 0.7);
}

.text-white\/80 {
    color: rgb(255 255 255 / 0.8);
}

/* HOME 섹션 ------------------------------------------------------- */

#home {
    display: flex;
    background-color: var(--main-navy);
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

/* ABOUT 섹션 ------------------------------------------------------ */
#about {
    display: flex;
    background-color: var(--main-navy);
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;

    /* 홈/프로젝트와 동일하게 화면 전체 폭을 채우도록 */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    max-width: 100%;
}

#about > .container-fluid {
    max-width: var(--page-max-width);
    margin: 10% auto;

    min-height: calc(100vh - var(--navH)); /* 한 화면 높이 채우기 */
    display: flex;
    flex-direction: column;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

#about > div {
    width: 100% !important;
}

#about > div:first-child {
    height: 80% !important;
}

@media (min-width: 1200px) {
    #about > div:first-child {
        height: 50% !important;
    }
}


/* PROJECTS/WORKS 섹션 --------------------------------------------- */

#project {
    /* 헤더(navbar) 아래 영역 전체를 흰색으로 */
    background-color: #ffffff;
    color: #111827;

    /* 뷰포트 전체 폭으로 확장해서 좌우 네이비가 보이지 않도록 */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    max-width: 100%;
}

/* PROJECT 섹션 안의 실제 내용 래퍼 */
#project > .container-fluid {
    max-width: var(--page-max-width);
    margin: 0 auto;

    min-height: calc(100vh - var(--navH)); /* 한 화면 높이 채우기 */
    display: flex;
    flex-direction: column;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}


/* 섹션 상단 제목 영역 여백 */
#project-header {
    margin-bottom: 1.5rem;
}

/* 슬라이더: 가운데(row 2)에서 수직 중앙 정렬 */
.project-slider {
    position: relative;
    padding: 0 3rem;      /* 좌우 버튼 여유 */
    margin-top: auto;     /* 위쪽 여유를 자동으로 */
    margin-bottom: auto;  /* 아래쪽 여유도 자동으로 → 위/아래 균등 배분 */
}

/* 프로젝트 리스트: 가로 스크롤 영역 */
#projectList {
    scroll-behavior: smooth;
    height: auto;
    margin-bottom: 3rem !important;
}

@media (min-width: 1200px) {
    #projectList {
        margin-top: 0 !important;
    }
}

/* 카드 공통 스타일 */
.card {
    width: 80% !important;
    min-height: 288px;
}

@media (min-width: 1200px) {
    .card {
        width: 28% !important;
    }
}

/* 프로젝트 좌우 네비 버튼: 항상 리스트 양옆에 */
.proj-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.proj-nav:hover {
    background-color: #f3f4f6;
    transform: translateY(-50%) scale(1.05);
}

.proj-nav--left {
    left: 0.5rem;
}

.proj-nav--right {
    right: 0.5rem;
}

/* 로고: 우측 하단, 챗봇 위로 살짝 띄우기 */
.logoWrap {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end;
    align-items: flex-end;

    margin-top: 1.5rem;
    margin-bottom: 4.5rem;   /* 챗봇 아이콘과 겹치지 않게 아래 여유 */
}


@media (min-width: 1200px) {
    .logoWrap {
        padding-top: 3rem;
    }
}

#projectLogo {
    width: 50% !important;
}

@media (min-width: 1200px) {
    #projectLogo {
        width: 15% !important;
    }
}

/* CONTACT 섹션 ---------------------------------------------------- */

#contact {
    display: flex;
    background-color: var(--main-navy);
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

/* Contact 섹션의 지도 + 정보 블록 중앙정렬 */
.contact-row {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}

/* 타이포, 텍스트 관련 -------------------------------------------- */

.main-header-text {
    font-size: calc(2rem + 1.8vw);
}

@media (min-width: 420px) {
    .main-header-text {
        font-size: calc(2.5rem + 1.8vw);
    }
}

@media (min-width: 1200px) {
    .main-header-text {
        font-size: 6rem;
        letter-spacing: 0.5rem;
    }
}

.sub-header-text {
    letter-spacing: 0.2em;
    font-size: calc(1rem + 0.3vw);
}

@media (min-width: 1200px) {
    .sub-header-text {
        letter-spacing: 0.55em;
    }
}

.subTitle-header-text {
    font-size: calc(1.3rem + 0.3vw);
    word-break: break-word;
    line-height: 2rem;
}

@media (min-width: 1200px) {
    .subTitle-header-text {
        font-size: calc(1.8rem + 0.3vw);
    }
}

.tracking-\[\.35em\] {
    letter-spacing: 0.35em;
}

/* 공통 색/배경 유틸리티 ------------------------------------------- */

.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1) !important;
}

.bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05);
}

.bg-gray-100 {
    background-color: rgb(243 244 246 / 1);
}

.bg-brand-yellow\/60 {
    background-color: rgb(247 201 72 / 0.6);
}

.rounded-sm {
    border-radius: 0.125rem;
}

.-z-10 {
    z-index: -10;
}

/* 가로 스크롤 바 감추기 ------------------------------------------- */

.overflow-x-auto {
    -ms-overflow-style: none;  /* IE, Edge */
    scrollbar-width: none;     /* Firefox */
}

.overflow-x-auto::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Opera */
}

/* ABOUT 섹션 내부 -------------------------------------------------- */

.about-text {
    font-weight: 700;
    font-size: 2rem;
    color: #fff;
    line-height: 1.5;
}

.multi-highlight {
    background: linear-gradient(
            to top,
            rgb(247 201 72 / 0.6) 0 35%,
            transparent 35% 100%
    );
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0 4px;
}



.leading-relaxed {
    font-size: 1rem !important;
}

@media (min-width: 1200px) {
    .leading-relaxed {
        font-size: 1.25rem !important;
    }
}



/* 지도/텍스트 레이아웃 -------------------------------------------- */

.mapWrap {
    min-height: 300px;
}

@media (min-width: 1200px) {
    .mapWrap {
        min-height: 400px;
    }
}

.text-gray-300 {
    color: rgb(209 213 219 / 1);
}

.map-tab.active {
    background-color: var(--text-main-yellow);
    color: black;
}

.map-tab {
    padding: 0.375rem 0.75rem;
    background-color: rgb(75 85 99 / 1);
    color: white;
}

/* 푸터 ------------------------------------------------------------ */

footer {
    background-color: #f3f4f6;
}

footer > .footer-inner {
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
}