@charset "utf-8";

/* =================================================================
 * 1. 폰트 정의 (Font Definitions)
 * ================================================================= */

/* Kakao Big Font Weights */
@import url('https://fonts.googleapis.com/css2?family=Aboreto&family=Baloo+2:wght@400..800&family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+SC:wght@200..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');
@import url('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');

@font-face {
    font-family: 'Baloo 2';
    src: url('https://fonts.googleapis.com/css2?family=Aboreto&family=Baloo+2:wght@400..800&family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+SC:wght@200..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swa');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KakaoBigFont';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2503@1.0/KakaoBigSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* =================================================================
 * 2. 리셋 및 글로벌 스타일 (Reset and Global Styles)
 * ================================================================= */


:root {
    --purple: #8F4BD2;
    --purple-dark: #602D91;
    --yellow: #FFC50C;
    --text-main: #26304B;
    --muted: #757575;
    --card-bg: #ffffff;
    --bg-top: #cfefff;
    --bg-bottom: #e7f6ff;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'NanumSquareRound', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

body {
    line-height: 1.5;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #000;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

/* 햄버거 메뉴 활성화 시 스크롤 고정 */
html.is-active,
body.is-active {
    overflow-y: hidden;
}

html,
body {
    margin: 0;
    padding: 0;
}

.lang {
    display: flex;
    gap: 0;
    /* 간격은 li에 직접 줄 예정 */
}

.lang li {
    position: relative;
    padding: 0 20px;
    /* 구분선 양옆 여백 */
    height: 27px;
}

.lang li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    /* 구분선 두께 */
    height: 14px;
    /* 구분선 길이 */
    background: #757575;
    /* 원하는 색 */
}

.lang li a {
    font-family: KakaoBigFont;
    font-weight: 700;
    color: #757575;
    font-size: 18px;
    line-height: 27px;
    display: block;
}

.lang li a.active {
    color: #602D91;
}

.section1,
.section2 {
    padding-top: 100px;
    position: relative;
    overflow: hidden;
}

.section1 {
    background-color: #B7E5F5;
}

.contents {
    position: relative;
    width: 100%;
    text-align: center;
    max-width: 1920px;
    padding: 0 40px;
    margin: 0 auto;
    z-index: 1;
}

.icon-free {
    position: absolute;
    width: clamp(47px, 4.9vw, 94px);
    height: auto;
    pointer-events: none;

    /* 기본값: 1920px 기준 */
    top: -40px;
    right: -100px;
}

/* heading */
.logo-pill {
    display: inline-block;
    background: rgba(143, 75, 210, 0.3);
    border-radius: 100px;
    color: var(--purple-dark);
    font-weight: 600;
    font-family: 'Baloo 2';
    padding: 0 23px;
    margin-bottom: 12px;
    font-size: clamp(16px, 1.56vw, 30px);
    line-height: clamp(27px, 2.5vw, 48px);
}

.sub-title {
    font-size: clamp(22px, 2.2vw, 42px);
    line-height: clamp(50px, 4.4vw, 84px);
    font-family: 'Baloo 2';
    font-weight: 600;
    color: var(--purple);
    letter-spacing: -1px;
}

.section2 .sub-title,
.section2 .title-row {
    color: var(--yellow);
}

.section2 .lead {
    color: #ffffff;
}

.section2 .logo-pill {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.2);
}

.title-row {
    position: relative;
    /* ← 이게 핵심!!! */
    display: inline-block;
    /* width가 글자 길이만큼만 잡힘 */
    margin: 0;
    margin-top: -15px;
    font-family: 'Baloo 2';
    font-weight: 600;
    color: var(--purple);
    text-align: center;
    letter-spacing: -1px;
    font-size: clamp(60px, 5vw, 96px);
    line-height: clamp(54px, 4.4vw, 84px);
}

.badge-free {
    width: 60px;
    margin-top: 4px;
}

.lead {
    font-size: clamp(15px, 1.77vw, 34px);
    line-height: clamp(24px, 2.6vw, 50px);
    color: var(--text-main);
    font-weight: 700;
    margin-top: 38px;
}

.lead strong {
    color: var(--purple);
    font-weight: 800;
}

.lead.mobile {
    display: none;
}


/* main card */
.card-wrapper {
    position: relative;
    max-width: 1052px;
    margin: 40px auto 0;
    border-radius: 32px;
    border: 4px solid rgba(0, 0, 0, 0.1);
}

.character {
    position: absolute;
    left: 0;
    z-index: -99;
}


.character5 {
    position: absolute;
    width: 158px;
    top: -108px;
    right: -76px;
    z-index: 1;
}

.character2 {
    position: absolute;
    bottom: 0;

    /* Width: 375px일 때 56px에 정확히 맞춤 */
    width: clamp(56px, 23.96px + 8.54vw, 188px);

    /* Left: 375px일 때 16px에 정확히 맞춤 */
    /* 음수 값이 브라우저마다 다르게 계산될 수 있어 0에 가깝게 조정했습니다 */
    left: clamp(16px, -0.75px + 4.47vw, 85px);
}

.bird-wrap {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
}

.bird {    
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: clamp(230px, 133.3981px + 25.7605vw, 628px);
    right: clamp(33px, 18.1942px + 3.9482vw, 94px);
    display: block;
}


@media (min-width: 1280px) {
    .character {
        width: 139px;
        top: -164px;
    }
}

/* 반응형 */
@media (max-width: 1279px) and (min-width: 480px) {
    .character {
        /* WIDTH 보간 */
        width: calc(
            49px + (60px * ((100vw - 480px) / (1279px - 480px)))
        );

        /* TOP 보간 (−129px → −58px) */
        top: calc(
            -58px - (71px * ((100vw - 480px) / (1279px - 480px)))
        );
    }
}

/* 480px 이하: 최소 고정 */
@media (max-width: 479px) {
    .character {
        width: 49px;
        top: -58px;
    }
}

/* 800px 이상: 고정 */
@media (min-width: 1024px) {
    .deco-area {
        position: absolute;
        z-index: -99;

        top: -172px;   /* 기존 clamp의 최대값 */
        left: 30px;    /* 기존 clamp의 최대값 */
    }

    .character3-1 {
        width: 93px;
    }

    .character3-2 {
        width: 111px;
        margin-left: -34px;
    }

    .character4 {
        width: 156px;
        top: -62px;
        right: 31px;
    }
}

/* 799px 이하: 기존 클램프 반응 */
@media (max-width: 1024px) {
    .deco-area {
        position: absolute;
        z-index: -99;

        top: clamp(-172px, -8.96vw, -61px);
        left: clamp(16px, 1.56vw, 30px);
    }

    .character3-1 {
        width: clamp(33px, 4.84vw, 93px);
    }

    .character3-2 {
        width: clamp(39px, 5.78vw, 111px);
        margin-left: clamp(-34px, -1.77vw, -10px);
    }

    .character4 {
        width: clamp(55px, 8.125vw, 156px);
        top: clamp(-62px, -3.23vw, -20px);
        right: clamp(31px, 1.61vw, 16px);
    }
}

.character4 {
    position: absolute;
    z-index: -99;
}

.card {
    margin: 0 auto;
    border-radius: 28px 28px 0 0;
    display: flex;
    padding: 46px;
    position: relative;
    width: 100%;
    background: #fff;
    grid-row-gap: 24px;
    /* 행(세로) 간격 */
    /* grid-column-gap: 30px; 열(가로) 간격 */
}

.card-left,
.card-right {
    flex: 1;
    display: grid;
    gap: 24px;
    text-align: left;
}

.check-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    /* 아이콘 고정, 텍스트는 나머지 공간 */
    align-items: flex-start;
    gap: 20px;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: var(--muted);
    cursor: pointer;
}

.check-item.center {
    align-items: center;
}

.check-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    /* 혹시 flex가 걸려 있을 때 대비 */
    background-image: url(../images/check_default.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.check-item.active {
    color: var(--purple-dark);
}

.check-item.active .check-icon {
    background-image: url(../images/check_on.png);
}

.card-footer {
    /* inset-inline: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    transform: translateY(100%);
    margin-top: 12px; */
    display: flex;
    gap: 2px;
    background: #fff;
    border-radius: 0 0 28px 28px;
}

.card-footer.mobile {
    display: none;
}

.download-btn {
    flex: 1;
    height: 72px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A7A7A7;
    font-weight: 700;
    line-height: 1;
    background: #f0f0f0;

    font-size: 24px;

    /* 아이콘 배치용 추가 ↓ */
    position: relative;
}

/* 버튼 안의 아이콘 */
.download-btn .btn-icon {
    position: absolute;
    right: 20px;
    /* 버튼 오른쪽에서 20px */
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    object-fit: contain;
    pointer-events: none;
    /* 클릭 방지 */
}


.download-left {
    border-radius: 0 0 0 28px;
}

.download-right {
    border-radius: 0 0 28px 0;
}

.download-btn.active {
    background: var(--yellow);
    color: #000000;
}

.download-icon {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.hill img {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
}

.hill {
    margin-top: 45px;
}


/* section1-1 */

.section1-1 {
    background-color: #fff;

}

.info-box {
    max-width: 1052px;
    margin: 40px auto;
    background: #4D1F87;
    border-radius: 32px;
    text-align: center;

    /* padding-top/bottom: 20~36 */
    padding-top: clamp(20px, 3vw, 36px);
    padding-bottom: clamp(20px, 3vw, 36px);

    /* padding-left/right: 47~27 (작은 화면 → 큰 화면) */
    padding-left: clamp(27px, 8vw, 47px);
    padding-right: clamp(27px, 8vw, 47px);
}

.info-box p {
    font-size: clamp(14px, 2vw, 28px);
    line-height: clamp(22px, 3vw, 44px);
    font-weight: 700;
    color: #ffffff;
}

.info-box span {
    color: var(--yellow);
}

.info-box strong {
    font-weight: 700;
    color: #A7A7A7;
}

.info-box a {
    text-decoration: none;
    /* 기본 밑줄 제거 */
    position: relative;
}

.info-box a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    /* 원하는 만큼 조절 가능 */
    width: 100%;
    height: 1px;
    /* ← 여기! 얇은 underline */
    background-color: var(--yellow);
    /* 링크 색과 동일 */
}

.info-box.mobile {
    display: none;
}

/* ===============================
   워크시트 샘플 섹션
   =============================== */

.worksheet-section {
    background-color: #00a99d;
    /* 전체 배경 초록색 */
    overflow: hidden;
    position: relative;
}

.worksheet-bg {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 40px;
}

/* 상단 배너 */
.worksheet-header {
    display: flex;
    justify-content: center;

    /* Top: 375px일 때 100px ~ 1920px일 때 228px */
    margin-top: clamp(100px, 68.932px + 8.2848vw, 228px);

    /* Bottom: 375px일 때 82px ~ 1920px일 때 160px */
    margin-bottom: clamp(82px, 63.068px + 5.0485vw, 160px);
}

.worksheet-header-inner {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

/* 점선 라인 (위에 둥글게 그려진 선) */
.ws-header-line {
    position: absolute;
    top: -40px;
    right: 0;
    width: clamp(120px, 18vw, 220px);
    pointer-events: none;
}

/* 왼쪽 캐릭터 */
.ws-header-character {
    width: clamp(80px, 10vw, 110px);
    height: auto;
    margin-right: -18px;
    z-index: 2;
}

/* 가운데 라벨 */
.worksheet-header-inner {
    border: clamp(2px, 1vw, 8px) solid rgba(96, 45, 145, 0.5);
    border-radius: 100px;
}

.ws-header-label {
    width: 100%;
    background: #FFF3D3;
    border-radius: 100px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: clamp(40px, 15.7282px + 6.4725vw, 140px);
}

.ws-header-text {
    font-size: clamp(16px, 2.6vw, 40px);
    font-weight: 800;
    color: var(--purple-dark);
}

/* 오른쪽 종이학 */
.ws-header-origami {
    width: clamp(80px, 10vw, 110px);
    height: auto;
    margin-left: -18px;
    z-index: 2;
}

/* 워크시트 카드 그리드 */
.worksheet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 20px);
    margin-bottom: clamp(20px, 3vw, 32px);
}

.worksheet-card img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.15);
}


.worksheet-strip img {
    width: 100%;
    display: block;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.15);
}

.worksheet-footer {
    max-width: 1920px;
    margin: 85px auto 0;
}

.worksheet-footer img {
    display: block;
    width: 100%;
}

.section2 {
    background-color: #6D34B5;
}


/* --- 공통 섹션 및 타이틀 스타일 --- */

.feature-content,
.grid-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
}

.feature-content h3,
.grid-header h3 {
    font-family: KakaoBigFont;
    font-weight: 700;
    font-size: clamp(48px, 4.17vw, 80px);
    color: #ffffff;
}

.feature-content p,
.feature-content p a,
.grid-header p {
    font-family: KakaoBigFont;
    font-weight: 400;
    font-size: clamp(18px, 1.56vw, 30px);
    color: #9B9B9B;
}

/* 스크롤 애니메이션 */
.section {
    position: relative;
}

/* .detail-feature > div {
    opacity: 0; 
    transform: translateY(40px); 
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
}

.detail-feature > div.fade-in {
    opacity: 1; 
    transform: translateY(0); 
} */


/* =================================================================
 * 3. 헤더/네비게이션 (Header/Navigation)
 * ================================================================= */

.header {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
    padding: 26px 40px;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 53px;
}

.logo {
    display: flex;
    align-items: center;
}

/* 데스크탑 네비게이션 */
.nav-links {
    display: flex;
    gap: 60px;
}

.nav-links a {
    font-size: 18px;
    font-weight: 400;
    transition: color 0.3s ease;
    color: #ffffff;
    font-family: KakaoBigFont;
}

/* 모바일 햄버거 메뉴 토글 버튼 */
.menu-toggle {
    display: none;
    /* 데스크탑에서는 숨김 */
    flex-direction: column;
    justify-content: center;
    gap: 8px;

    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    z-index: 1000;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    margin: 0;
    transition: transform 0.3s ease;
    transform-origin: center;
}

/* 모바일 네비게이션 메뉴 */
.nav-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 999;
    padding-top: 80px;
    overflow-y: auto;

    transform: translateY(-100%);
    /* 위로 숨김 */
    transition: transform 0.4s ease-out;
}

.nav-mobile ul {
    padding-left: 16px;
}

.nav-mobile li a {
    font-family: KakaoBigFont;
    font-weight: 700;
    font-size: 30px;
    line-height: 64px;
    color: #ffffff;
}

/* 햄버거 메뉴 활성화 스타일 */
.header.is-active .nav-mobile {
    transform: translateX(0);
}

.header.is-active .menu-toggle span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.header.is-active .menu-toggle span:nth-child(2) {
    transform: translateY(-5px) rotate(-45deg);
}


/* =================================================================
 * 4. 메인 섹션 (Main Section)
 * ================================================================= */


.highlight-grid {
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
    height: 100%;
}

.highlight-item {
    padding: 0 clamp(20px, 3.8vw, 55px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.highlight-grid .highlight-item:nth-child(1) svg {
    width: clamp(95px, 15vw, 306px);
    height: auto;
}

.highlight-grid .highlight-item:nth-child(2) svg {
    width: clamp(112px, 18vw, 360px);
    height: auto;
}

.highlight-item h1 {
    font-size: clamp(26px, 7vw, 140px);
    line-height: clamp(42px, 10vw, 200px);
    color: #ffffff;
    font-weight: 800;
    font-family: KakaoBigFont;
}

.highlight-item p {
    color: #ffffff;
    font-family: KakaoBigFont;
    font-weight: 700;
    line-height: clamp(18px, 4vw, 60px);
    font-size: clamp(12px, 3vw, 40px);
}


/* =================================================================
 * 5. Feature Detail Sections (Architecture & Car)
 * ================================================================= */

.feature-content h2 {
    font-family: KakaoBigFont;
    font-weight: 700;
    font-size: clamp(20px, 2vw, 40px);
    color: #ffffff;
}

.detail-feature-wrapper {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 40px;
}

.detail-feature {
    display: flex;
    flex-direction: column;
    gap: 120px;
}

/* 이미지 및 비디오 영역 공통 스타일 */
.feature-image-area {
    height: 1036px;
    border-radius: 32px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;
}

.feature-image-area#car-img {
    cursor: pointer;
}

.feature-image-area video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 32px;
}

/* SVG 아이콘 오버레이 (비디오 재생 버튼 등) */
.feature-image-area svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    cursor: pointer;
    z-index: 10;
}


.meta-con-group {
    display: grid;
    gap: 16px;
}

/* =================================================================
 * 6. Works & Business Sections (Grid)
 * ================================================================= */

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 40px 0;
}

.project-card {
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.project-image-placeholder {
    width: 100%;
    height: clamp(245px, 25vw, 430px);
    /* 아까 말한 높이 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    border-radius: 32px;
    position: relative;
    /* ★ 중요: 오버레이 기준 */
}

/* 여기가 진짜 그라디언트 레이어 */
.feature-image-area::before, .project-image-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0; 와 같음 */
    border-radius: inherit;
    /* 부모랑 모서리 맞추기 */

    background:
        radial-gradient(50% 50% at 50% 50%,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.2) 100%),
        linear-gradient(0deg,
            rgba(0, 0, 0, 0.3),
            rgba(0, 0, 0, 0.3));

    pointer-events: none;
    /* 오버레이 때문에 클릭 막히는 거 방지 */
}


/* 아이콘 오버레이 상태 전환 */
.project-grid svg {
    width: 82px;
    height: 82px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    transition: opacity 0.3s ease;
    cursor: pointer;
    z-index: 10;
}

.default-icon {
    opacity: 1;
}

.hover-icon {
    opacity: 0;
}

.project-card:hover .default-icon,
.feature-image-area:hover .default-icon {
    opacity: 0;
}

.project-card:hover .hover-icon,
.feature-image-area:hover .hover-icon {
    opacity: 1;
}

.project-info {
    text-align: left;
    font-size: clamp(28px, 3vw, 50px);
    line-height: clamp(32px, 3vw, 56px);
    font-weight: 800;
    color: #ffffff;
    opacity: 0.7;
    position: absolute;
    bottom: 20px;
    left: 30px;
}

/* norytory 이미지 URL */
#norytory1 {
    background-image: url(../images/norytory_01.png);
}

#norytory2 {
    background-image: url(../images/norytory_02.png);
}

#norytory3 {
    background-image: url(../images/norytory_03.png);
}

#norytory4 {
    background-image: url(../images/norytory_04.png);
}

#norytory5 {
    background-image: url(../images/norytory_05.png);
}

#norytory6 {
    background-image: url(../images/norytory_06.png);
}


/* daltonandterry */

#daltonandterry {
    background-image: url(../images/DaltonAndTerry.png);
}

#daltonandterry-1 {
    background-image: url(../images/DaltonAndTerry-1.png);
}

#daltonandterry-2 {
    background-image: url(../images/DaltonAndTerry-2.png);
}

#daltonandterry-3 {
    background-image: url(../images/DaltonAndTerry-3.png);
}

#daltonandterry-4 {
    background-image: url(../images/DaltonAndTerry-4.png);
}

.section2 .project-grid {
    grid-template-columns: repeat(4, 1fr);
    padding: 80px 0;
}

.section2-bottom {
    width: 100%;
}

.section2-bottom img {
    width: 100%;
    margin-bottom: clamp(120px, 3vw, 160px);
}

/* =================================================================
 * 7. 푸터/컨택트 섹션 (Footer/Contact Section)
 * ================================================================= */

.contact {
    padding: clamp(180px, 8vw, 320px) 0;
}

.footer {
    background: #000;
}

.footer * {
    color: #9B9B9B;
}

.footer-content {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 40px 40px;
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.footer-l-wrap {
    display: flex;
    height: 100%;
    align-items: end;
    gap: 40px;
}

.footer-logo {
    height: 105px;
}

.contact-info p {
    line-height: 32px;
    font-size: 16px;
    font-family: KakaoBigFont;
    font-weight: 700;
}

.copyright p {
    font-size: 16px;
    font-family: KakaoBigFont;
    font-weight: 700;
}

/* =================================================================
 * 8. 반응형 디자인 (Media Queries)
 * ================================================================= */

/* --- 1920px 이하 (Large Desktop/Tablet Landscape) --- */
@media (max-width: 1920px) {

    /* Feature Detail: 1열로 전환 */
    .detail-feature {
        grid-template-columns: 1fr;
    }

    .feature-image-area {
        height: 675px;
    }

    /* .project-image-placeholder { height: 442px; } */

    .project-grid svg {
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 1920px) and (min-width: 801px) {

    .icon-free {
        /*
        top 변화량 계산:
        1920px → -40px
        800px  → -16px
        차이: 24px 증가
        */
        top: calc(
            -16px - (24px * ((100vw - 800px) / (1920px - 800px)))
        );

        /*
        right 변화량 계산:
        1920px → -100px
        800px  → -50px
        차이: 50px 증가
        */
        right: calc(
            -50px - (50px * ((100vw - 800px) / (1920px - 800px)))
        );
    }
}

/* --- 1280px 이하 (Tablet Portrait/Small Desktop) --- */
@media (max-width: 1280px) {

    .project-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section2 .project-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 64px 0;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .footer-l-wrap {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .footer-logo {
        height: 66px;
    }

    .footer-logo svg {
        width: 184px;
        height: 66px;
    }

    /* SVG 크기는 폰트 높이로 조절되므로 삭제 */

    .contact-info p {
        text-align: center;
        font-size: 14px;
        line-height: 20px;
    }

    .copyright p {
        text-align: center;
        font-size: 10px;
    }

    
    .character5 {
        display: none;
    }
}


/* --- 1024px 이하 (Mobile/Tablet Landscape) --- */
@media (max-width: 1024px) {

    /* 공통 레이아웃 */
    .detail-feature {
        gap: 60px;
    }

    .contents,
    .detail-feature-wrapper,
    .worksheet-bg {
        padding: 0 16px;
    }

    /* 헤더/네비게이션 */
    .header {
        padding: 22px 16px;
    }

    .navbar {
        height: auto;
    }

    .logo svg {
        width: 78px;
        height: 28px;
    }

    .nav-desktop {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    /* 햄버거 버튼 활성화 */

    /* 메인 섹션 */

    .highlight-item {
        width: auto;
    }


    .project-info {
        left: 10px;
        bottom: 16px;
    }

    .worksheet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* Feature Detail */
    .feature-image-area {
        height: 560px;
    }

    .feature-image-area,
    .feature-image-area video {
        border-radius: 16px;
    }

    .feature-image-area svg {
        width: 82px;
        height: 82px;
    }


    .card-wrapper, .info-box, .project-image-placeholder {
        border-radius: 16px;
    }

    .project-grid svg {
        width: 36px;
        height: 36px;
        bottom: 10px;
        right: 10px;
    }

    .lang li a {
        font-size: 14px;
        /* 요구값 */
        line-height: 21px;
        /* 요구값 */
    }

    .lang li {
        padding: 0 10px;
        /* 줄어든 텍스트 폭에 비례한 여백 재조정 */
        height: 21px;
    }

    .lang li:not(:last-child)::after {
        height: 12px;
        /* line-height 21px 비율에 맞는 바 높이 */
        width: 1px;
    }

    .card {
        border-radius: 14px 14px 0 0;
    }

    .download-left {
        border-radius: 0 0 0 14px;
    }

    .download-right {
        border-radius: 0 0 14px 0;
    }

    .worksheet-footer {
        margin: 80px auto 0;
    }

    .info-box {
        margin: 20px auto 40px;
    }

    .section2 .card-wrapper {
        margin: 80px auto 0;
    }

    .card {
        flex-direction: column;
        padding: 20px 30px;
    }

    .hill {
        margin-top: 60px;
    }

    .check-item {
        grid-template-columns: 20px 1fr;
        font-size: 11px !important;
        line-height: 16px !important;
        gap: 12px;
    }

    .check-icon {
        width: 20px;
        height: 20px;
    }

    .download-btn {
        height: 36px !important;
        font-size: 12px;
        padding-right: 15px;
    }

    .download-btn .btn-icon {
        width: 24px;
        height: 24px;
        right: 10px;
    }

    .icon-free {
        top: -48px;
        right: -10px;
    }

    .card-footer.mobile {
        display: flex;
    }

    .card-footer.desk {
        display: none;
    }

    .info-box.mobile {
        display: block;
    }

    .info-box.desk {
        display: none;
    }
    
    .lead.desk {
        display: none;
    }

    .lead.mobile {
        display: block;
    }

    .worksheet-grid {
        grid-template-columns: 1fr;
    }

    .worksheet-header-inner {
        flex-direction: column;
        gap: 8px;
    }

    .ws-header-character,
    .ws-header-origami {
        margin: 0;
    }

    .project-grid,
    .section2 .project-grid {
        grid-template-columns: 1fr;
    }

    .section2 .project-grid {
        padding: 0;
    }

}