/* .about-content {
    display: flex;
    flex-direction: row;
     gap: 1rem;
     justify-content: space-between;
}
.contact-info {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.contact-item {
    display: block;
} */

.container-full {
    width: 100%;
    /* max-width: 120rem;
    margin: 0 auto; */
    padding: 1rem 1rem;
}

section {
    margin-top: 2rem;
    margin-bottom: 6rem;
}
#photos-section {
    margin-top: 0;
}

h3 {
    font-weight: 900;
    font-size: 3.6rem;
    letter-spacing: -0.2rem;
}
h3 .en {
    font-weight: 700;
    font-size: 3.9rem;
}
.submenu-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
}
.submenu {
    display: flex;
    width: 100%;
    flex-direction: row;
    padding-left: var(--pad);
    padding-right: var(--pad);
}
.submenu-item {
display: block;
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
    height: 100%;
}
.submenu-btn {
    text-align: center;
    width: 100%;
    color: white;
    text-shadow: -1px 0px black, 0px 1px black, 1px 0px black, 0px -1px black;
}
.left {
   border-right: 1px solid black;
}
/* 데스크톱에서만 호버 효과 적용 */
@media (min-width: 769px) {
    .submenu-item :hover {
        text-align: center;
        width: 100%;
        color: navy;
        text-shadow: none;
        transition: .6s;
    }
}
.active {
    text-align: center;
    width: 100%;
    color: black;
    text-shadow: none;
}
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: white;
    z-index: 999;

}
.container-full{
    margin-top: 0;
    padding-top: 0;
}
main {
    margin-top: 0;
    padding-top: 0;
    padding-left: var(--pad);
    padding-right: var(--pad);
}

/* 프로젝트 레이아웃 스타일 */
.project-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.project-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 60rem; /* 모든 프로젝트 행의 높이를 동일하게 고정 */
    border-top: 1px solid black;
}

.project-info-col {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    overflow: hidden;
    scrollbar-width: none;
    z-index: 5;
    display: flex;
    flex-direction: column;
    height: 60rem;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.project-gallery-col {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    height: 100%;
    background-color: black;
    padding: 4rem;
}

.project-title {
    margin-bottom: 0.5rem;
    padding-top: 0.1rem;
    font-size: 2.4rem;
    display: inline-block;
    text-align: left;
}

.project-year {
    font-size: 1.8rem;
    display: inline-block;
    text-align: right;
    line-height: 2.0;
    margin-top: -0.3rem;
    padding-bottom: 0.5rem;
    /* margin-top: -0.3rem; */
    font-style: normal;
    font-weight: 400;
    position:relative;
    top:-0.6rem;
}

.project-description {
    font-size: 1rem;
    line-height: 1.5;
    overflow-y: scroll;
    height: calc(100% - 5rem); /* 제목과 연도를 제외한 나머지 공간 */
    padding-right: 1.3rem; /* 스크롤바 공간 확보 */
}

.project-description p {
    margin-bottom: 1rem;
}

/* 갤러리 슬라이더 스타일 */
.gallery-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 0.5s ease;
    cursor: grab;
    user-select: none; /* 텍스트 선택 방지 */
}

.slider-container img {
    /* 사진을 겹쳐 두고 투명도로 바꾼다. 예전처럼 display 를 껐다 켜면 전환이 걸리지 않는다. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 1rem;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.slider-container img.is-current {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .slider-container img { transition: none; }
}

.slider-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* 컨테이너는 클릭 이벤트 무시 */
}

.prev-btn, .next-btn {
    border: none;
    width: 3rem;
    height: 100%;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto; /* 버튼만 클릭 가능 */
    color: whitesmoke;
    background: transparent;
    transition: background-color 0.2s ease;
}

.prev-btn {
    justify-content: flex-start;
    padding-left: 1.5rem;
}

.next-btn {
    justify-content: flex-end;
    padding-right: 1.5rem;
}

/* 데스크톱에서만 호버 효과 적용 */
@media (min-width: 769px) {
    .prev-btn:hover, .next-btn:hover {
        background: rgba(0, 0, 0, 0.1);
    }
}

.more-text {
    display: inline-block;
    position: absolute;
    bottom: 0rem;
    left: 0;
    width: 100%;
    height: 10rem;
    z-index: 1001;
    background: linear-gradient(transparent, transparent, white);
    pointer-events: none;
}


/* 반응형 스타일 */
@media (max-width: 768px) {
    .project-row {
        flex-direction: column;
        gap: 1.5rem;
        height: auto;
    }
    .more-text {
        bottom: 0rem;
    }

    .project-info-col,
    .project-gallery-col {
        max-width: 100%;
    }

    .project-info-col {
        padding-left: 0;
        height: 20rem;
    }
    .project-description {
        height: 20rem;
        overflow-y: scroll;
    }
    .project-gallery-col {
        height: auto;
    }

    .gallery-slider {
        height: auto;
    }

    /* 모바일에서 버튼 크기 조정 */
    .prev-btn, .next-btn {
        width: 1.5rem;
        height: 100%;
        font-size: 1.5rem;
    }

    .prev-btn {
        padding-left: 1rem;
    }

    .next-btn {
        padding-right: 1rem;
    }

    /* 모바일에서 화살표 아이콘 크기 조정 */
    .prev-btn::before,
    .next-btn::before {
        font-size: 3rem;
    }

    .project-title {
        font-size: 2rem;
    }
    .project-year {
        padding-right: 0.3rem;
    }
    h3 {
        font-size: 2.0rem;
    }
    h3 span.ml-en {
        font-weight: 700;
        font-size: 2.1rem;
    }

    p {
        font-size: 1.2rem
    }
    section {
        margin-bottom: 3rem;
    }
    h3 span.ml-en {
        font-family: "neue-haas-grotesk-display", -apple-system, sans-serif;
        font-weight: 600;
        letter-spacing: -0.1rem;
        font-size: 2.1rem;
        position: relative;
        top: 0.04rem;
    }
    h3 span.ml-ko {
        font-size: 2.0rem;

    }
    h4 span.ml-en {
        font-family: "neue-haas-grotesk-display", -apple-system, sans-serif;
        font-weight: 600;
        letter-spacing: -0.1rem;
        font-size: 2.1rem;
        position: relative;
        top: 0.04rem;
    }
    h4 span.ml-ko {
        font-size: 2.0rem;

    }
    .project-year{
        font-size: 1.2rem;
    }
    .submenu-item2 {
        display: block;
        width: 100%;
        margin-bottom: 0;
        padding-bottom: 0;
        height: 100%;
    }
    .leftalign {
        text-align: left;
    }
    .rightalign {
        text-align: left;
    }
    .centeralign {
        text-align: left;
    }
}
/* ── 캐러셀 조작 ────────────────────────────────────────────
   좌우 절반을 눌러 넘긴다. 현재 번호는 얇은 흰 테두리의 원으로 표시하며,
   마우스 환경에서는 배지가 커서를 대신하고(화면에 고정된 배지 없음),
   터치 환경에서는 사진을 가리지 않도록 검은 여백 쪽에 잠깐 떴다 사라진다. */
/* 조작 영역 = 검은 영역 전체(사진 둘레 여백 포함).
   빠르게 연달아 누르면 더블클릭으로 번호 글자가 선택되므로 선택을 막는다. */
.project-gallery-col {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.slider-container {
    cursor: inherit;
}

/* 마우스가 배지로 대체되는 동안에는 기본 커서를 숨긴다 */
.project-gallery-col.cursor-badge,
.project-gallery-col.cursor-badge * {
    cursor: none;
}

.slider-counter {
    position: absolute;
    -webkit-user-select: none;
    user-select: none;
    top: 1rem;
    right: 1rem;
    z-index: 12;
    box-sizing: border-box;
    /* 도형(원 + 뾰족한 끝)은 배경 SVG. viewBox 를 원 중심 기준 대칭으로 잡아
       요소의 한가운데 = 원의 한가운데가 되고, 숫자가 꼭짓점 쪽으로 밀리지 않는다. */
    width: 4.4rem;
    height: 3.2rem;
    padding: 0;
    border: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* 사진의 밝기와 무관하게 읽히도록 뒤 배경과 반전 합성 */
    mix-blend-mode: difference;
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* 오른쪽 절반(다음) — 끝이 오른쪽을 가리킨다 */
.slider-counter.point-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-18 -13 36 26'%3E%3Cpath d='M8.49 -8.49A12 12 0 1 0 8.49 8.49L16.97 0Z' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 왼쪽 절반(이전) */
.slider-counter.point-left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-18 -13 36 26'%3E%3Cpath d='M-8.49 -8.49A12 12 0 1 1 -8.49 8.49L-16.97 0Z' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 방향이 없는 상황(터치 기기의 구석 표시)에서는 그냥 원 */
.slider-counter.point-none {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-13 -13 26 26'%3E%3Ccircle cx='0' cy='0' r='12' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* 커서를 따라다니는 상태(데스크톱): 위치는 JS 가 정하므로 top/right 를 풀어준다 */
.slider-counter.as-cursor {
    top: 0;
    right: auto;
    left: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease;
}

.slider-counter.show {
    opacity: 1;
}

/* 자릿수가 늘어도 도형 크기는 고정 (도형은 배경 SVG 라 비율이 유지된다) */
.slider-counter {
    width: 4.4rem;
    min-width: 0;
    height: 3.2rem;
    padding: 0;
    font-size: 1.4rem;
}

/* 모바일 캐러셀: 검은 여백을 줄이고, 사진 방향과 관계없이 검은 칸 크기를 고정한다.
   (가로 사진 기준 3:2 칸을 유지하고 세로 사진은 그 안에 맞춰 들어간다) */
@media (max-width: 768px) {
    /* 사진 둘레 검은 여백은 상하좌우를 같게 둔다.
       번호가 앉을 자리를 만들기 위해 여백을 조금 넉넉히 잡고 사진을 그만큼 줄인다. */
    .project-gallery-col {
        padding: 2.6rem;
    }

    /* 번호는 더 작게, 위쪽 여백과 오른쪽 여백을 같은 값으로 */
    /* 모바일은 원형 테두리 없이 숫자만 둔다.
       상자가 아니라 숫자 획을 기준으로 위·오른쪽 여백이 같아 보이도록 값을 다르게 준다
       (글자 위쪽 여유 때문에 위 여백은 그만큼 덜 준다). */
    .slider-counter,
    .slider-counter.point-none,
    .slider-counter.point-left,
    .slider-counter.point-right {
        width: auto;
        height: auto;
        background-image: none;
        line-height: 1;
        font-size: 1rem;
        top: 0.6rem;
        right: 0.72rem;
    }

    .gallery-slider {
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .slider-container img {
        padding: 0;
    }
}