/* --------------------------------------------
   🧹 Modern Reset (최소 + 안전 + 반응형 최적화)
--------------------------------------------- */

/* 박스 모델 통일 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 기본 margin 제거 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
blockquote,
dl,
dd {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}


a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

button {
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    scroll-behavior: smooth;
}


* {
    margin: 0;
    padding: 0;
}

:root {
    --glass: rgba(255, 255, 255, 0.1);
    --cle: 1rem;
    --dow: 0 18px 35px rgba(0, 0, 0, 0.18),
        0 2px 4px rgba(0, 0, 0, 0.12);
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    height: 100%;
}

body {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;

    background-color: #f6f5f4;
    color: #313131;
    letter-spacing: -0.02rem;
    height: 100%;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

body::-webkit-scrollbar {
    display: none;
}

/* Firefox */
body {
    scrollbar-width: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 헤더 */

header {
    display: grid;
    position: fixed;
    top: 0;
    height: 4.5rem;
    width: 100%;
    max-width: 100%;

    z-index: 1000;

    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    padding: 0 2%;

    background: var(--glass);
    backdrop-filter: blur(0.75rem) saturate(180%);
    -webkit-backdrop-filter: blur(0.75rem) saturate(180%);
    box-shadow:
        0 0.25rem 1rem rgba(0, 0, 0, 0.15),
        inset 0 0.03125rem 0 rgba(255, 255, 255, 0.2),
        inset 0 -0.03125rem 0 rgba(255, 255, 255, 0.1);
    border-top: 0.03125rem solid rgba(255, 255, 255, 0.15);
    border-bottom: 0.03125rem solid rgba(255, 255, 255, 0.1);
}


.top-bar .inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

.brand {
    justify-self: start;
    display: flex;
    align-items: center;
    column-gap: 0.4rem;
    text-decoration: none;
}

.brand-logo img {
    height: 3.7rem;
    width: auto;
    display: block;
}

.brand-logo:hover {
    animation: hover-bounce 0.5s ease-out infinite;
}

@keyframes hover-bounce {
    0% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-0.3rem);
    }

    /* 위로 살짝 이동 */
    100% {
        transform: translateY(0);
    }

    /* 다시 제자리 */
}

.brand-text {
    display: flex;
    color: #FF6EB3;
    font-size: 2.2em;
    width: auto;
    font-weight: 400;
    letter-spacing: -0.05rem;
    transform: translateY(-0.05rem);
}

/* ===== 내비게이션 (가운데~오른쪽: 글자만 - 1A) ===== */
.main-nav {
    justify-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-list {
    display: flex;
    gap: 0.3rem;
    list-style: none;
}

.nav-link {
    color: #313131;
    font-size: 1.2rem;
    width: 13rem;
    height: 3rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    text-decoration: none;
    transition: all 0.5s ease;
    z-index: 3;
}


/* 호버 + 활성화 색 */
.nav-link:hover,
.nav-link.is-active,
.nav-link[aria-current="page"],
.nav-link:active {
    /* ✨ 배경을 유리처럼 */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    border: none;


    /* ✨ 테두리 + 그림자 */
    /* border: 1px solid rgba(255, 255, 255, 0.35); */
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.1),
        inset 0 0.5px 1px rgba(255, 255, 255, 0.4);

    /* 텍스트 컬러는 브랜드 핑크로 강조 */
    color: #ff6eb3;

    transition: all 0.3s ease;
}

.language {
    justify-self: end;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.lang {
    text-decoration: none;
    opacity: 0.6;
    transition: 0.2s ease;
}

.lang.active {
    opacity: 1;
    text-decoration: underline;
    color: #ff6eb3;
}

.lang:hover {
    opacity: 1;
    text-decoration: underline;
}


/* 메인 콘텐츠 */
main {
    height: 100dvh;
}

section {
    height: 100%;
    position: relative;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 4.5rem 4.5rem;
}

/* ===== HERO SECTION ===== */

.hero {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


.heart {
    width: 30rem;
    opacity: 0;
    position: absolute;
    transition: opacity 0.4s ease;
    transform: translateY(0);
}

.show {
    opacity: 1;
}

.hidden {
    opacity: 0;
    display: none;
}

/* 진동(울림) */
@keyframes vibrate {
    0% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(6deg);
    }

    30% {
        transform: rotate(-6deg);
    }

    45% {
        transform: rotate(4deg);
    }

    60% {
        transform: rotate(-4deg);
    }

    75% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* 서서히 사라짐 */
@keyframes fadeDown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(4rem);
    }
}



.vibrate {
    animation: vibrate 0.8s ease-in-out forwards;
    transform-origin: top center;
}

.fade-down {
    animation: fadeDown 0.5s ease forwards;
}

/* 메인 텍스트 컨테이너 */
.hero-text {
    z-index: 5;
    position: absolute;
    font-size: 10rem;
    font-weight: 500;
    text-align: center;
    flex-direction: column;
    align-items: center;
    display: flex;
    justify-content: center;
    line-height: 1.05;
    gap: 0em;

}

/* 각 단어 */
.hero-text .word {
    white-space: pre;
    opacity: 0;
}

.text-gradient {
    background: linear-gradient(90deg,
            #f2a6b8 0%,
            #e8b7d4 40%,
            #b7c7f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.hero-final {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lines {
    display: grid;
    gap: 1rem 1rem;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

.line {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(0);
    font-size: 6rem;
    font-weight: 700;
    letter-spacing: -0.05rem;
    gap: 1rem;
    background: linear-gradient(90deg,
            #f2a6b8 0%,
            /* 로고의 메인 핑크 */
            #e8b7d4 40%,
            /* 라벤더 느낌 */
            #b7c7f0 100%
            /* 연하늘빛 */
        );
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

.line:nth-child(odd) {
    justify-content: flex-start;
}

.line:nth-child(even) {
    justify-content: flex-end;
}

.season {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    height: 9rem;
    flex-shrink: 0;
}

.season img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;

    /* 이미지를 더 선명하게 렌더링하도록 유도 (브라우저마다 차이 있음) */
    image-rendering: -webkit-optimize-contrast;
    /* 크롬, 사파리 등 */
    image-rendering: crisp-edges;

    /* 부드럽게 줄이기보다 픽셀을 살리는 방식 */
    transform: translateZ(0);
    /* GPU 가속을 이용해 선명도 개선 */
}

.spring {
    width: 48rem;
}

.summer {
    width: 20rem;
}

.fall {
    width: 48rem;
}

.winter {
    width: 49rem;
}

/* 오른쪽에서 슬라이드 인 */
@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(5rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 왼쪽에서 슬라이드 인 */
@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-5rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 화면 전체 덮는 반투명 오버레이 */
.overlay {
    position: absolute;
    inset: 0;
    background: rgba(245, 243, 240, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    z-index: 100;
    transition: opacity 0.8s ease;
}

.overlay-img {
    width: 23rem;
    margin-top: 6rem;
    margin-bottom: -4rem;
    opacity: 0;
    transform: translateY(4rem);
    transition: opacity 0.3s ease, transform 1s ease;
}

.overlay.show .overlay-img {
    opacity: 1;
    transform: translateY(0);
}

.overlay.hide .overlay-img {
    opacity: 0;
    transform: translateY(0);
}

.overlay .center-text {
    color: #FF6EB3;
    font-size: 13rem;
    font-weight: 400;
    letter-spacing: -0.05rem;
    z-index: 2;
}

.overlay .scroll-down {
    margin-top: 3rem;
    margin-bottom: -0.5rem;
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    opacity: 0.8;
    font-weight: 300;
}

/* 화살표 애니메이션 */
.overlay .scroll-down .arrow {
    font-weight: 500;
    font-size: 1.2rem;
    margin-top: 0.5rem;
    animation: bounce 1.2s infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(0.4rem);
    }
}

.overlay.show {
    opacity: 1;
}

.overlay.hide {
    opacity: 0;
}


/*  ceo 섹션   */


.ceoint {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5rem;
    height: 100%;
}

/* 중앙 인물 섹션 */
.person {
    height: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;

}

.person-img {
    display: flex;
    height: 80%;
    object-fit: cover;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* 표준 속성 (Chrome, Firefox 등) */

    /* 파란색 선택 영역(하이라이트) 방지 */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    /* 우클릭 메뉴가 떠도 선택을 어렵게 함 */
    pointer-events: none;
    /*  */
}

.personm-img {
    display: none;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* 표준 속성 (Chrome, Firefox 등) */

    /* 파란색 선택 영역(하이라이트) 방지 */
    -webkit-tap-highlight-color: transparent;
}

.person-text h3 {
    font-size: 1.8rem;
    color: #313131;
}

.person-text p {
    color: #666;
    font-size: 1rem;
}

/* 오른쪽 설명부분 */
.ceo-right {
    height: 100%;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}

.introm-img {
    display: none;
}

.ceo-message {
    width: 100%;
    height: auto;
    font-size: 1.3rem;
    font-weight: 400;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    border-radius: var(--cle);
    padding: 2rem 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: left;
    margin-right: auto;
}

.ceo-message:hover {
    background: linear-gradient(135deg, #ffafd5, #b7c7f0);
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 150, 200, 0.5);
}

.intro-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: auto;
}

.intro-box {
    width: 100%;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(0.75rem) saturate(180%);
    -webkit-backdrop-filter: blur(0.75rem) saturate(180%);
    box-shadow:
        0 0.25rem 1rem rgba(0, 0, 0, 0.15),
        inset 0 0.03125rem 0 rgba(255, 255, 255, 0.2),
        inset 0 -0.03125rem 0 rgba(255, 255, 255, 0.1);
    border-top: 0.03125rem solid rgba(255, 255, 255, 0.15);
    border-bottom: 0.03125rem solid rgba(255, 255, 255, 0.1);
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    font-weight: 500;
    padding: 0.75rem 1rem;
    transition: all 0.4s ease;
}

.intro-box:hover {
    background: linear-gradient(135deg, #ffafd5, #b7c7f0);
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 150, 200, 0.5);
}

.img-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;

    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* 표준 속성 (Chrome, Firefox 등) */

    /* 파란색 선택 영역(하이라이트) 방지 */
    -webkit-tap-highlight-color: transparent;
}

.intro-img {
    height: auto;
    object-fit: contain;
    filter: blur(0px) saturate(120%);
    transform: scale(1);
    transition: transform 0.6s ease, filter 0.6s ease;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* 표준 속성 (Chrome, Firefox 등) */

    /* 파란색 선택 영역(하이라이트) 방지 */
    -webkit-tap-highlight-color: transparent;
}

#intro-1 .intro-img {
    width: 40%;
}

#intro-2 .intro-img {
    width: 100%;
}

#intro-3 .intro-img {
    width: 20%;
}

.intro-box:hover .intro-img {
    opacity: 1;
    transform: scale(1.1);
}

.intro-text {
    position: relative;
    z-index: 2;
}

.intro-text h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ff6eb3;
    margin-bottom: 0.5rem;
}

.intro-text p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: inherit;
}

.intro-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.intro-text li {
    margin-bottom: 0.3rem;
    font-size: 0.95rem;
}

.intro-box:hover .img-wrap {
    transform: scale(1.05);
}

/* ✅ hover 시 전체 강조 */
.intro-box:hover {
    background: linear-gradient(135deg, #ffafd5, #b7c7f0);
    color: #fff;
    box-shadow: 0 0 25px rgba(255, 150, 200, 0.5);
}


/* 퍼스널컬러 ㄱㄱㄱㄱ */
.pcsec {
    position: relative;
    z-index: 0;
}


/* 컬러 이론에 대해서 */
.container.pc {
    display: flex;
}

/* 명언 레이어 전체 */
.quotes {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #f6f5f4;
    opacity: 1;
    z-index: 5;
}



/* 각 명언 블록 공통 스타일 */
.quotes>div {
    position: absolute;
    font-size: 2.5rem;
    line-height: 1.1;
    opacity: 0;
    background-color: rgba(245, 243, 240, 1);
    visibility: hidden;
}



.quotes>div.is-active {
    animation:
        quote-pop 3.5s linear forwards;
    display: flex;
    opacity: 1;
    visibility: visible;
    z-index: 10000;
}

.quotes.is-active {
    animation: bye 1s linear forwards 1.8s;
}

@keyframes bye {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes quote-pop {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }

    20% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 1;

    }
}

.kr {
    font-size: 1.2rem;
    font-weight: 500;
    font-family: "Poppins";
}

.author {
    font-size: 2rem;
}

.desc {
    font-size: 1.5rem;
}

.kr-name {
    font-size: 1rem
}

.p1,
.p2,
.p3,
.p4,
.p5,
.p6,
.p7 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.p1 {
    font-family: "Italianno", "Poppins";
    font-weight: 400;
    font-style: normal;
}

.p2 {
    font-family: "Caveat", "Poppins";
    font-weight: 400;
    font-style: normal;
}

.p3 {
    font-family: "Edu QLD Hand", "Poppins";
    font-weight: 400;
    font-style: normal;
}

.p4 {
    font-family: "Crimson Text", "Poppins";
    font-weight: 400;
    font-style: normal;
}

.p5 {
    font-family: "Poppins";
    font-weight: 400;
    font-style: normal;
}

.p6 {
    font-family: "Girassol", "Poppins";
    font-weight: 400;
    font-style: normal;
}

.p7 {
    font-family: "Poppins";
    font-weight: 400;
    font-style: normal;
}

.pcintro {
    text-align: center;
    font-size: 2rem;
}

.pcintro>p {
    font-weight: 600;
    font-size: 1.3rem;
    color: #FF6EB3;
    line-height: 1;
}

.color-theory {
    align-items: center;
    text-align: center;
    gap: 1rem;
    width: 100%;
    display: flex;
    height: 100%;
}


.desc {
    color: #FF6EB3;
}

.color-story {
    position: relative;
    background: #ffffff;
    padding: 2rem 4rem;
    text-align: left;
    overflow: hidden;
    width: 100%;
    height: 90%;
    flex-direction: column;
    justify-content: center;
    font-size: 1.3rem;
    line-height: 2;
    display: flex;
    align-items: center;
    text-align: center;
    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.18),
        0 2px 4px rgba(0, 0, 0, 0.12);


    border-radius: var(--cle);

}

/* 박스 전체 그리드 */
.box-grid {
    position: relative;
    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.18),
        0 2px 4px rgba(0, 0, 0, 0.12);
    display: flex;
    width: 100%;
    height: 90%;
    overflow: hidden;

    border-radius: var(--cle);
}

@keyframes imageFade {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    /* 1초 동안 페이드 인 */
    25% {
        opacity: 1;
    }

    /* 4초 동안 유지 (5s~25% 지점) */
    30% {
        opacity: 0;
    }

    /* 1초 동안 페이드 아웃 */
    100% {
        opacity: 0;
    }
}

.box-grid img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0;
    animation: imageFade 15s infinite;

    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* 표준 속성 (Chrome, Firefox 등) */

    /* 파란색 선택 영역(하이라이트) 방지 */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    /* 우클릭 메뉴가 떠도 선택을 어렵게 함 */
    pointer-events: none;
    /*  */

    /* 이미지를 더 선명하게 렌더링하도록 유도 (브라우저마다 차이 있음) */
    image-rendering: -webkit-optimize-contrast;
    /* 크롬, 사파리 등 */
    image-rendering: crisp-edges;

    /* 부드럽게 줄이기보다 픽셀을 살리는 방식 */
    transform: translateZ(0);
    /* GPU 가속을 이용해 선명도 개선 */
}

.linkline {
    gap: 1rem;
    display: flex;
    margin-top: 2rem;
    height: max-content;
}


.naverlink {
    font-size: 1.5rem;
    background-color: #15b300;
    color: #f6f5f4;
    border-radius: 1rem;
    padding: 0.5rem 2rem;
    box-shadow: var(--dow);
}

.kakaolink {
    font-size: 1.5rem;
    background-color: #f1b900;
    color: #f6f5f4;
    border-radius: 1rem;
    padding: 0.5rem 2rem;
    box-shadow: var(--dow);
}


.box-grid img:nth-child(1) {
    animation-delay: 0s;
}

.box-grid img:nth-child(2) {
    animation-delay: 3s;
}

.box-grid img:nth-child(3) {
    animation-delay: 6s;
}

.box-grid img:nth-child(4) {
    animation-delay: 9s;
}

.box-grid img:nth-child(5) {
    animation-delay: 12s;
}








/* 단체강의 */

.services {
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #e4f0ff;
}

.service-box {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    box-shadow: none;
    padding: 2rem;
    z-index: 2;
}

.servicedesc {
    text-align: center;
    font-size: 1.2rem;
}

.servicedesc>h3 {
    color: #FF6EB3;
    font-size: 2rem;
}

.servicedesc>p {
    font-size: 1rem;
}

.box1 {
    flex-direction: row;
    gap: 2rem;
    width: 70%;
}

.teambuild,
.teamedu {
    padding: 1rem;
    border-radius: var(--cle);
    text-align: center;
    height: 100%;
    background: #fff;
    box-shadow: var(--dow);
}

.teambuild p,
.teamedu p {
    margin-top: 1rem;
}

.teamedu {
    position: relative;
    -moz-user-select: none;

    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* 표준 방식 */
    cursor: default;
    pointer-events: none;

}

.noti {
    position: relative;
    color: #FF6EB3;
    opacity: 0.8;
}

.soon {
    position: absolute;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.7);
    color: #FF6EB3;
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    justify-content: center;
    align-items: center;
    margin-left: -1rem;
    margin-top: -1rem;
}



.box2 {
    height: 20%;
    width: 70%;
    background: #fff;
    border-radius: var(--cle);
}

.team {
    color: #ff6eb3;
    font-size: 1.5rem;
}

.btn-proposal {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin-top: 1rem;
    background-color: #ffffff;
    color: #313131;
    border: 1px solid #8d8d8d;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-proposal:hover {
    background-color: #f9f9f9;
    border-color: #ff6eb3;
    color: #ff6eb3;
    opacity: 0.9;
}





.comp {
    color: #292929;
    opacity: 0.7;
}

.photo-loop {
    display: flex;
    position: absolute;
    overflow: hidden;
    z-index: 0;
    inset: 0;
}

.loop-track {
    display: flex;
    width: max-content;
    animation: loop-scroll 30s linear infinite;
    gap: 5rem;
    flex-wrap: nowrap;
    align-items: center;

}

.loop-track img {
    width: 25%;
    object-fit: contain;
    max-width: 10rem;
    height: auto;
    max-height: 5rem;
    filter: brightness(0.8);
    border-right: 1px solid rgba(255, 255, 255, 0);
}

@keyframes loop-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}




/* 문의하기 */

.contact-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.map-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
}

.map-box {
    width: 100%;
    height: 25.25rem;
    border: 0.125rem solid #ff87b9;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

.map-box iframe {
    border-radius: 0.5rem;
    width: 100%;
    height: 25rem;
}

/* 아래 텍스트 */
.contact-text {
    font-size: 0.75rem;
    line-height: 1.8;
    color: #292929;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2rem;
    padding: 1.5rem 2rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    width: max-content;
    gap: 1.5rem;
}

.conimg {
    align-items: center;
    height: 5rem;
    opacity: 0.8;
}

.conimg:hover {
    animation: hover-bounce 0.5s ease-out infinite;

}

.copyright {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}

.subway {
    text-align: center;
    font-size: 1.25rem;
}

.exit {
    color: #FF6EB3;
    font-size: 1.5rem;
}

/* =========================
   푸터: 메신저 링크
   ========================= */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 4.5rem;
    padding: 1rem 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== 아이콘 컨테이너 ===== */
footer .links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    height: 100%;
}

/* ===== 아이콘 ===== */
footer .links .icon img {
    height: 3.3rem;
    object-fit: contain;
    transition: transform 0.25s ease, opacity 0.25s ease;
    opacity: 0.85;
}

footer .links .icon img:hover {
    transform: scale(1.5);
    opacity: 1;
}





/* =========================
   🍔 Hamburger button
   ========================= */
.hamburger {
    width: 28px;
    height: 20px;
    display: none;
    /* PC 기본 숨김 */
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
}

/* 햄버거 선 3개 */
.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #FF6EB3;
    /* 네 기본 텍스트 컬러 */
    border-radius: 1px;

    transition:
        transform 0.35s ease,
        opacity 0.25s ease;
    transform-origin: center;
}


/* 열렸을 때 */
.hamburger.is-open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.is-open span:nth-child(2) {
    opacity: 0;
}

.hamburger.is-open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}





/* 기본: 모바일 메뉴 숨김 */
.m-menu {
    position: fixed;
    right: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(0.75rem) saturate(180%);
    -webkit-backdrop-filter: blur(0.75rem) saturate(180%);
    box-shadow:
        0 0.25rem 1rem rgba(0, 0, 0, 0.15),
        inset 0 0.03125rem 0 rgba(255, 255, 255, 0.2),
        inset 0 -0.03125rem 0 rgba(255, 255, 255, 0.1);
    border-top: 0.03125rem solid rgba(255, 255, 255, 0.15);
    border-bottom: 0.03125rem solid rgba(255, 255, 255, 0.1);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    height: 100%;
    width: 65%;
}

/* 열렸을 때 */
.m-menu.is-open {
    opacity: 0.95;
    pointer-events: auto;
}



.m-menu-inner {
    top: 0;
    height: 100%;
    padding: 6rem 1.5rem 6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 메뉴 */
.m-nav li {
    margin-bottom: 2.2rem;
}

.m-nav a {
    font-size: 1.375rem;
    font-weight: 500;
    color: #292929;
}

.m-nav a.is-active {
    color: #FF6EB3;
}

/* 언어 */
.lang-switch {
    display: flex;
    gap: 1.2rem;
    font-size: 1.2rem;
    opacity: 0.6;
    z-index: 999;
}

.lang-switch .active {
    color: #ff057e;
    opacity: 1;
    font-weight: 500;

}

/* 1. 아주 작은 스마트폰 (360px 이하) */
@media (max-width: 360px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 1281px) and (max-width: 1500px) {
    html {
        font-size: 14px;
    }
}

/* =========================
   📱 Mobile size fix only
   ========================= */
@media (max-width: 1280px) {

    /* 전체 패딩 축소 */
    .container {
        padding: 4rem 0.75rem;
        overflow: hidden;
        height: 100svh;
        max-width: 480px;
        margin: 0 auto;
    }


    /* 헤더 */
    header {
        height: 4rem;
    }

    /* 기존 PC 메뉴 숨김 */
    .main-nav,
    .language {
        display: none;
    }

    .hamburger {
        display: flex;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001;
    }

    /* 모바일 메뉴 활성 */
    .m-menu {
        display: flex;
    }






    /* 푸터 */
    footer {
        position: fixed;
        height: 4rem;
        padding: 1rem 0;
        z-index: 1000000;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    footer .links .icon img {
        height: 2.5rem;
    }





    .brand-logo img {
        height: 3.5rem;
    }

    .brand-text {
        font-size: 1.7rem;
    }

    .hero-text {
        font-size: 5rem;
        line-height: 1.1;
    }

    .line {
        font-size: 2.5rem;
        gap: 0.5rem;
    }

    .season {
        height: 4rem;
    }

    .season img {
        display: block;
        width: 100%;
        height: 4rem;
        object-fit: cover;
        object-position: left bottom;
    }


    .spring,
    .fall {
        width: 14rem;
    }

    .summer {
        width: 3.5rem;
    }

    .winter {
        width: 15rem;
    }

    /* 오버레이 */
    .overlay-img {
        width: 20rem;
        margin-bottom: 0;
    }

    .overlay .center-text {
        font-size: 3rem;

    }

    .overlay .scroll-down {
        margin: 0;
    }












    /* CEO 섹션 */
    .ceoint {
        flex-direction: column;
        display: flex;
        width: 100%;
        gap: 0.125rem;
    }

    .person-img {
        display: none;
    }

    .personm-img {
        display: flex;
        height: 80%;
        object-fit: cover;
        border-radius: 1rem;
    }

    .person-text h3 {
        font-size: 0.8rem;
        color: #313131;
    }

    .person-text p {
        color: #666;
        font-size: 0.6rem;
    }

    .ceo-right {
        height: 50%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        pointer-events: none;
    }


    .ceo-message {
        width: 100%;
        font-size: 0.7rem;
        padding: 0.5rem;
        border-radius: 0.75rem;
        text-align: center;
    }

    .intro-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .intro-box {
        width: 100%;
        height: 100%;
        padding: 0.25rem 1.25rem;
        border-radius: 0.75rem;
    }

    .intro-img {
        height: auto;
        object-fit: contain;
    }

    .introm-img {
        display: flex;
        height: auto;
        object-fit: contain;
    }

    #intro-1 .introm-img {
        width: 35%;
        max-height: 2rem;
    }

    #intro-2 .intro-img {
        width: 70%;
    }

    #intro-3 .intro-img {
        width: 10%;
    }

    .ewhapc {
        display: none;
    }

    .intro-text {
        padding: 0 0;
        align-items: center;
        gap: 2rem;
        display: flex;
    }

    .intro-text h3 {
        font-size: 1rem;
        font-weight: 500;
        color: #ff6eb3;
        margin-bottom: 0;
    }

    .intro-text p {
        font-size: 0.5rem;
        line-height: 1.6;
        color: inherit;
    }

    .intro-text ul {
        padding: 0;
        margin: 0;
    }

    .intro-text li {
        font-size: 0.625rem;
        margin-bottom: 0;
    }






    /* 퍼스널 컬러 */
    .quotes>div {
        font-size: 1.5rem;
        padding: 1rem;
    }

    .kr {
        font-size: 0.75rem;
    }

    .author {
        font-size: 2rem;
    }

    .desc {
        font-size: 0.75rem;
    }

    .kr-name {
        font-size: 1.25rem;
        font-weight: 500;
    }

    .color-theory {
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem;
    }

    .pcintro {
        text-align: center;
        font-size: 1rem;
    }

    .pcintro>p {
        font-size: 1rem;
        color: #FF6EB3;
    }

    .color-story {
        height: 45%;
        padding: 0.5rem;
        font-size: 0.625rem;
        justify-content: center;
    }

    .box-grid {
        height: 50%;
    }

    .linkline {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.25rem;
        align-items: center;
    }

    /* 버튼 */
    .naverlink,
    .kakaolink {
        border-radius: 0.5rem;
        font-size: 0.625rem;
        padding: 0.25rem 0.5rem;
    }






    /* 기업강의 */
    .box1,
    .box2 {
        width: 100%;
    }

    .servicedesc>h3 {
        font-size: 1rem;
        color: #FF6EB3;
    }

    .servicedesc>p {
        font-size: 0.6rem;
    }

    .service-box {
        padding: 0;
    }

    .box1 {
        margin-top: 0.25rem;
        flex-direction: column;
        height: auto;
        width: 100%;
        font-size: 0.8rem;
        gap: 0.25rem;
    }

    .team {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .teambuild,
    .teamedu {
        padding: 0.5rem;
        height: 100%;
        width: 100%;
    }

    .box2 {
        margin-top: 0.25rem;
        height: 10%;
        box-shadow: var(--dow);
        background: rgba(255, 255, 255, 0.7);

    }

    .loop-track img {
        width: 10%;
        object-fit: contain;
        max-width: 4rem;
        height: auto;
        max-height: 3rem;
        filter: brightness(0.8);
        border-right: 1px solid rgba(255, 255, 255, 0);

    }

    .loop-track {
        animation: loop-scroll 15s linear infinite;
        gap: 1rem;
    }

    .btn-proposal {
        font-size: 0.75rem;
    }

    .subway {
        font-size: 0.75rem;
    }

    .exit {
        font-size: 0.875rem;
    }

    .soon {
        position: absolute;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.7);
        color: #FF6EB3;
        display: flex;
        width: 100%;
        height: 100%;
        font-size: 1.5rem;
        justify-content: center;
        align-items: center;
        margin-left: -0.5rem;
        margin-top: -0.5rem;
    }

    .teambuild p,
    .teamedu p {
        margin-top: 0.5rem;
    }

    .btn-proposal {
        margin-top: 0.5rem;
    }

    /* 문의 m */

    .contact-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        width: 100%;
    }

    .contact-text {
        font-size: 0.475rem;
        line-height: 1.8;
        color: #292929;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 1rem;
        padding: 1rem 0.5rem;
        box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
        width: 100%;
    }

    .conimg {
        position: absolute;
        height: 4rem;
        opacity: 0.5;
    }

    .copyright {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
    }

}