.logo-center {
    position: absolute;
    left: 50%;
    transform: translateX(-55%);
}

.custom-header {
    height: 100px; /* 원하는 고정 높이 설정 */
    position: fixed; /* 화면에 고정 */
    top: 0; /* 페이지 상단에 위치 */
    width: 100%; /* 전체 너비 설정 */
    z-index: 1000; /* 다른 요소 위에 표시되도록 z-index 설정 */
}

.custom-header.mobile {
    height: 70px; /* 원하는 고정 높이 설정 */
    position: fixed; /* 화면에 고정 */
    top: 0; /* 페이지 상단에 위치 */
    width: 100%; /* 전체 너비 설정 */
    z-index: 1000; /* 다른 요소 위에 표시되도록 z-index 설정 */
}

body {
    padding-top: 70px; /* 네비게이션 바의 높이만큼 패딩을 추가하여 컨텐츠가 가려지지 않도록 설정 */
}


.navbar {
    height: 100%; /* 헤더의 전체 높이를 채우도록 설정 */
}

/*text*/
.bg-yellow-custom {
    background-color: var(--brand-yellow); /* 원하는 배경색으로 설정 */
    padding: 0; /* 텍스트와 배경색 사이의 여백 설정 */
}


/*button*/
.black-button {
    display: inline-block;
    padding: 12px 24px 12px 24px !important; /* 버튼의 내부 여백 설정 */
    font-size: var(--font-16); /* 글자 크기 설정 */
    font-weight: 600; /* 글자 두께 설정 */
    color: var(--basic-white) !important; /* 글자 색상 (흰색) */
    background-color: var(--basic-black); /* 배경색 (파란색) */
    border-radius: 26px; /* 테두리 둥글기 설정 */
    text-decoration: none; /* 링크의 기본 밑줄 제거 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 호버 효과 전환 설정 */
}

.black-outline-button {
    display: inline-block;
    padding: 16px 24px 16px 24px !important; /* 버튼의 내부 여백 설정 */
    font-size: var(--font-14); /* 글자 크기 설정 */
    font-weight: 700; /* 글자 두께 설정 */
    color: var(--brand-purple) !important; /* 글자 색상 (흰색) */
    border: solid 1px var(--brand-purple);
    border-radius: 26px; /* 테두리 둥글기 설정 */
    text-decoration: none; /* 링크의 기본 밑줄 제거 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 호버 효과 전환 설정 */
}

.black-button-rectangle {
    width: 100%;
    padding: 16px 24px 16px 24px !important; /* 버튼의 내부 여백 설정 */
    font-size: var(--font-18); /* 글자 크기 설정 */
    font-weight: 600; /* 글자 두께 설정 */
    color: var(--basic-white) !important; /* 글자 색상 (흰색) */
    background-color: var(--basic-black); /* 배경색 (파란색) */
    border-radius: 8px; /* 테두리 둥글기 설정 */
    border: none;
    text-decoration: none; /* 링크의 기본 밑줄 제거 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 호버 효과 전환 설정 */
}

.yellow-button {
    display: inline-block;
    padding: 12px 16px 12px 16px !important; /* 버튼의 내부 여백 설정 */
    font-size: var(--font-14); /* 글자 크기 설정 */
    font-weight: 500; /* 글자 두께 설정 */
    color: var(--basic-black) !important; /* 글자 색상 (흰색) */
    background-color: var(--brand-yellow); /* 배경색 (파란색) */
    border-radius: 26px; /* 테두리 둥글기 설정 */
    text-decoration: none; /* 링크의 기본 밑줄 제거 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 호버 효과 전환 설정 */
}

/*image*/
.icon-wrapper-16{
    width: 16px;
    height: 16px;
}
.img-wrapper-magazine{
    border-top-left-radius: 16px; /* 왼쪽 상단 모서리 둥글게 */
    border-bottom-left-radius: 16px; /* 왼쪽 하단 모서리 둥글게 */
}

.img-wrapper-magazine {
    width: 150px; /* 고정 너비 */
    min-width: 150px;
    height: 100px; /* 자동 높이 */
    aspect-ratio: 4 / 3; /* 원하는 비율 (예: 4:3, 16:9 가능) */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-wrapper-magazine img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 부모 크기에 맞추고 초과 부분 자동 crop */
}

.portfolio-landing-image-wrapper {
    width: 100%; /* 부모 너비 100% */
    aspect-ratio: 4 / 3; /* 원하는 비율 (예: 4:3) */
    overflow: hidden; /* 넘치는 부분 자르기 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.portfolio-landing-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율 유지하면서 crop */
}

.img-wrapper-logo{
    height: 28px;
}

/*Linear*/
.bg-linear {
    background: linear-gradient(to bottom, var(--gray-high-light), #ffffff) !important; /* 세로 방향 그라데이션 설정 */
}

/*slide*/
.slider-container {
    width: 100%; /* 슬라이더의 너비 */
    overflow: hidden; /* 슬라이더 컨테이너 바깥의 내용 숨기기 */
    position: relative;
}

.slider {
    display: flex; /* 이미지들을 가로로 정렬 */
}

.slider img {
    width: 100%; /* 이미지가 컨테이너의 전체 너비를 채우도록 설정 */
    flex-shrink: 0; /* 이미지 크기가 줄어들지 않도록 설정 */
}

/* 좌에서 우로 슬라이드 애니메이션 */
.slide-left-to-right {
    animation: slide-left-to-right 40s linear infinite; /* 애니메이션 설정 */
}

/* 우에서 좌로 슬라이드 애니메이션 */
.slide-right-to-left {
    animation: slide-right-to-left 40s linear infinite; /* 애니메이션 설정 */
}

/* 좌에서 우로 애니메이션 정의 */
@keyframes slide-left-to-right {
    0% { transform: translateX(-100%); } /* 시작 위치 (왼쪽) */
    50% { transform: translateX(0); } /* 중간 위치 */
    100% { transform: translateX(-100%); } /* 끝 위치 (왼쪽) */
}

/* 우에서 좌로 애니메이션 정의 */
@keyframes slide-right-to-left {
    0% { transform: translateX(0); } /* 시작 위치 (오른쪽) */
    50% { transform: translateX(-100%); } /* 중간 위치 */
    100% { transform: translateX(0); } /* 끝 위치 (오른쪽) */
}

/* 히어로 슬라이드 */
.hero-slider-container {
    width: 100%;
    height: 100%; /* 원하는 높이로 설정 */
    overflow: hidden; /* 이미지가 컨테이너를 넘치지 않도록 설정 */
    position: relative;
}

/* 히어로 슬라이더 내부 이미지 스타일 */
.hero-slider img {
    height: 100%; /* 컨테이너의 높이에 맞게 이미지 높이 조정 */
    width: auto; /* 비율을 유지하면서 이미지 크기 조정 */
    display: block; /* 이미지 사이의 여백 제거 */
    margin: 0 auto; /* 이미지가 가운데 정렬되도록 설정 */
}

/* 히어로 슬라이더 이동 스타일 - 왼쪽에서 오른쪽 */
.hero-slide-left-to-right {
    animation: hero-slide-animation 30s linear infinite; /* 왼쪽에서 오른쪽으로 애니메이션 설정 */
}

/* 히어로 슬라이더 이동 스타일 - 오른쪽에서 왼쪽 */
.hero-slide-right-to-left {
    animation: hero-slide-reverse-animation 30s linear infinite; /* 오른쪽에서 왼쪽으로 애니메이션 설정 */
}

/* 히어로 슬라이드 애니메이션 키프레임 - 왼쪽에서 오른쪽 */
@keyframes hero-slide-animation {
    0% { transform: translateX(-100%); } /* 시작 위치 (왼쪽) */
    50% { transform: translateX(0); } /* 중간 위치 */
    100% { transform: translateX(-100%); } /* 끝 위치 (왼쪽) */
}

/* 히어로 슬라이드 애니메이션 키프레임 - 오른쪽에서 왼쪽 */
@keyframes hero-slide-reverse-animation {
    0% { transform: translateX(100%); } /* 시작 위치 (오른쪽) */
    50% { transform: translateX(0); } /* 중간 위치 */
    100% { transform: translateX(100%); } /* 끝 위치 (오른쪽) */
}





/*Wrapper*/
.magazine-wrapper{
    border: solid 2px var(--gray-light);
    border-radius: 16px;
}

/*input*/
.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* 요소 간의 간격 */
    max-width: 600px;
    margin: 0 auto; /* 가운데 정렬 */
}

.custom-input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 32px;
    transition: border-color 0.3s, box-shadow 0.3s; /* 마우스 호버 시의 애니메이션 */
    outline: none; /* 클릭 시 기본 외곽선 제거 */
    box-sizing: border-box; /* 인풋 크기 조절 */
    padding-right: 90px; /* 오른쪽 패딩 추가 (버튼 위치 고려) */
    border: none;
}

.custom-button, .custom-button-inside {
    font-size: var(--font-16);
    background-color: var(--brand-purple); /* 버튼 배경색 */
    color: var(--basic-white);
    border-radius: 32px;
    cursor: pointer;
    transition: background-color 0.3s; /* 마우스 호버 시의 애니메이션 */
    border: none;
}

.custom-button {
    padding: 10px 20px;
}

.custom-button-inside {
    position: absolute;
    right: 5px; /* 버튼 위치 */
    top: 50%;
    transform: translateY(-50%);
    padding: 7px 15px;
    font-size: 14px; /* 작은 버튼의 글꼴 크기 */
    border: none;
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* 그레이톤 input 스타일 */
.custom-input-gray {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 8px;
    transition: border-color 0.3s, box-shadow 0.3s; /* 마우스 호버 시의 애니메이션 */
    outline: none; /* 클릭 시 기본 외곽선 제거 */
    box-sizing: border-box; /* 인풋 크기 조절 */
    background-color: #f0f0f0; /* 그레이톤 배경색 */
    border: none; /* 그레이톤 테두리 */
    color: #333; /* 텍스트 색상 */
}

/* 포커스 시 그레이톤 input 스타일 */
.custom-input-gray:focus {
    border-color: #b0b0b0; /* 포커스 시 테두리 색상 */
    box-shadow: 0 0 8px rgba(176, 176, 176, 0.3); /* 포커스 시 그림자 효과 추가 */
}

/* 문의 내용 입력 textarea 스타일 */
.textarea-input {
    height: 300px; /* 텍스트 에어리어 높이 */
    resize: none; /* 사용자가 크기 조절 못하게 설정 */
}

.hero-bg-img{
    max-height: 800px;
}

/* Text*/
.text-ellipsis {
    white-space: nowrap;          /* 텍스트를 한 줄로 유지 */
    overflow: hidden;             /* 넘치는 텍스트를 숨김 */
    text-overflow: ellipsis;      /* 말줄임표(...) 추가 */
    max-width: 100%;              /* 텍스트 영역의 최대 너비 설정 */
    display: block;               /* 블록 레벨 요소로 설정 */
}

.cursor-pointer {
    cursor: pointer;
}

.scroll-author-item{
    width: 300px; /* 원하는 너비 */
    height: 200px; /* 원하는 높이 */
    object-fit: cover; /* 이미지 비율 유지하면서 크롭 */
    flex: 0 0 auto; /* 항목이 줄바꿈되지 않도록 설정 */
    display: inline-block; /* 항목을 한 줄로 유지 */
    margin-right: 16px; /* 오른쪽 여백 추가 */
}

.post-wrapper {
    position: relative;
    overflow: hidden;
    max-height: 300px;
    padding-bottom: 40px; /* 버튼이 텍스트를 가리지 않도록 여백 추가 */
    line-height: 1.6; /* 줄 간격 조정 */
}

.content-wrapper {
    position: relative;
    overflow: hidden;
    line-height: 1.6;
}

.post-toggle-btn {
    position: absolute;
    bottom: -4px; /* 버튼 위치 조정 */
    width: 100%;
    background: white;
    text-align: center;
    z-index: 10;
    padding: 12px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 4px;
    color:	#6495ED;
}

/* 체크박스 클릭 방지 */
.term-fixed-checkbox {
    pointer-events: none; /* ✅ 클릭 불가능하도록 설정 */
}

/*수치*/
.icon-count-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.icon-count-text {
    font-size: 12px;
    font-weight: 400;
    margin-top: 6px; /* 아이콘 아래 간격 */
    margin-bottom: 12px;
    color: var(--gray-medium);
}

.icon-count-container .icon-count-text {
    pointer-events: none;
}

.share-button:hover, .comment-button:hover, .like-button:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/*뉴스레터 버튼*/
.newsletter-button-inside {
    right: 5px; /* 버튼 위치 */
    color: var(--basic-black);
    background-color: var(--basic-white);
    top: 50%;
    font-weight: 500;
    padding: 16px 24px;
    border-radius: 32px;
    font-size: 16px; /* 작은 버튼의 글꼴 크기 */
    border: none;
}

.header-sticky-custom{
    height: 64px; position: sticky; top: 0; left: 0; right: 0; z-index: 1050;
}