/* ============
    전역 설정
   ============ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =========================================================
   히어로 섹션 -  타이틀/설명/다운로드 버튼/캐릭터 이미지
   ========================================================= */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    height: 727px;
    margin: 0 auto;
    padding: 100px 40px;
    background: var(--yellow-200);
}

/* 왼쪽 텍스트 영역 (타이틀 + 설명 + 버튼)  */
.hero-text {
    padding: 232px 214px 195px 200px;
}

/* 메인 타이틀 ("당신 근처의 지역 생활 커뮤니티") */
.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: #111111;
    margin-bottom: 24px;
    word-break: keep-all;
}

/* 타이틀 아래 보조 설명 문구 */
.hero-desc {
    font-size: 1rem;
    color: color-mix(in srgb, var(--gray-900) 50%, transparent);
    line-height: 1.6;
    margin-bottom: 36px;
}

/* Google Play / App Store  */
.hero-btn { display: flex; gap: 12px; }

/* 앱 다운로드 버튼 공통 스타일 (구글플레이 / 앱스토어) */
.btn-google, .btn-apps {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 10px;
    background: var(--orange-600);
    color: var(--gray-000);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;

}
.btn-google { padding: 18px 34px 18px 30px; }
.btn-apps { padding: 18px 40px 18px 39px; }


.btn-google img,
.btn-apps img {
    width: 18px;
    height: 21px;
}

/* 오른쪽 캐릭터 이미지 영역 */
.hero-image { padding: 46px 120px 47px 0px; }
.hero-image img { max-width: 510px; width: 100%; }

/* =========================================================
    동네 소개 섹션 공통 (우리 동네 중고 마켓 / 동네생활 / 동네가게)
    3개 섹션이 레이아웃 구조를 공유; 배경색/내용만 다름
   ========================================================= */

/* 마켓, 동네가게 섹션은 흰색 배경 (동네생활만 별도 초록색 배경) */
.town-market, .town-shop { background: var(--gray-000);}

/* 세 섹션 공통 레이아웃 */
.town-market,
.town-shop,
.town-life {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
    padding: 100px 40px;
}

/* 각 섹션의 제목(h2) 공통 스타일
   (.town-text = 마켓, .town-text2 = 동네생활, .town-text3 = 동네가게) */
.town-text h2, .town-text2 h2, .town-text3 h2 {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 24px;
    color: var(--gray-900);
}

/* "우리 동네 중고 직거래 마켓" 섹션의 본문 설명 */
.town-text p {
    font-size: 1rem;
    font-weight: 400;
    color: var(--gray-900);
    line-height: 1.6;
    margin-bottom: 39px;
}

/* 각 섹션 이미지 크기 및 위치(여백)
   (.town-img = 마켓, .town-img2 = 동네생활, .town-img3 = 동네가게) */
.town-img img { max-width: 533px; width: 100%; margin: 60px 84px 56px 199px; }
.town-img2 img { max-width: 557px; width: 100%; margin: 51px 234px 0px 0px;}
.town-img3 img { max-width: 526px; width: 100%; margin: 65px 156px 77px 261px;}


/* 인기매물 보기 버튼 */
.btn-primary {
    display: inline-block;
    border: none;
    border-radius: 8px;
    padding: 12px 26px;
    background: var(--gray-100);
    color: var(--gray-900);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

/* ---------- 동네생활 섹션 전용 ---------- */
.town-life { background: var(--green-200); }

.town-text2 { padding: 234px 0px 219px 217px; }

/* 아이콘 3개(동네질문/분실센터/모임) */
.town-icons {
    display: flex;
    gap: 49px;
    list-style: none;
    padding: 0;
    margin-top: 63px;
}

/* 아이콘 하나당 항목: 아이콘 위, 제목/설명 아래로 세로 배치  */
.town-icons li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 1rem;
    font-weight: 400;
    color: var(--gray-900);
}
.town-icons span { margin-top: 14px; }
.town-icons p {
    margin-top: 11px;
    line-height: 1.2;
    text-align: left;
    word-break: break-all;
    width: 111px; /* 설명 텍스트 줄바꿈 폭 고정 */
}

.town-icons img {width: 56px; height: 56px;}


/* ---------- 동네가게 섹션 전용 ---------- */
.town-text3 p {
    font-size: 1rem;
    font-weight: 400;
    color: var(--gray-900);
    line-height: 1.2;
    margin-top: 26px;
}

/* =========================================================
    중고거래 인기매물 섹션 (상품 카드 그리드)
   ========================================================= */
.pop-items {
    background: var(--gray-050);
    padding: 100px 40px;
    text-align: center;
}

/* "중고거래 인기매물" 섹션 제목 */
.pop-title {
    font-size: 2.6rem;
    font-weight: 800;
    padding: 112px 560px 64px 560px;
}

/* 인기매물 카드. JS에서 상위 8개 채움 */
.pop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
    text-align: left;
}

/* 상품 썸네일. 정사각형 + 위아래 radius, 사진은 박스에 꽉 채움 */
.card-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: var(--gray-200);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 상품명/가격/위치/메타정보를 세로로 쌓는 텍스트 영역 */
.card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.card-name { font-size: 1rem; color: var(--gray-900); }

.card-price {font-size: 0.8rem; font-weight: 700; color: var(--gray-900);}

.card-location,
.card-meta { font-size: 12px; color: var(--gray-600); }

/* 더 보기 → trade.html */
.pop-items-more {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    display: inline-block;
    margin-top: 100px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--gray-900);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    cursor: pointer;
}

/* =================================
    푸터 (하단 링크 + 앱 다운로드 영역)
   ================================= */
.footer {
    padding: 80px 120px;
    height: 275px;
    background: var(--orange-600);
    color: var(--gray-000);
}

/* 좌(링크)/우(다운로드) 컨테이너 */
.footer-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 100%;
}
/* 왼쪽 텍스트 링크 목록 (이용약관, 개인정보처리방침 등) */
.links {
    display: flex;
    gap: 20px;
    font-size: 1rem;
    font-weight: bold;
}

.links a { color: var(--gray-000); text-decoration: none; }

/* 오른쪽 "당근 앱 다운로드" 영역 */
.download {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    font-size: 1rem;
    font-weight: bold;
}

/* App Store / Google Play 버튼  */
.download-btns {display: flex; gap: 11px; }

/* 다운로드 버튼 */
.btn-Apps,
.btn-GP {
    border-radius: 10px;
    padding: 12px 26px;
    border: 1px solid var(--gray-100);
    background: var(--gray-100);
    color: var(--gray-900);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}



/* =========================================================
    반응형 (데스크톱 퍼스트 방식)
    화면이 좁아질수록 1200px → 768px → 480px 순서로 겹쳐서 적용됨
   ========================================================= */

/* ---------- 1200px 이하 (큰 태블릿/작은 데스크톱) ---------- */
@media (max-width: 1200px) {
    /* 히어로: 높이 고정 해제, 텍스트+이미지를 가운데로 모아서 배치 */
    .hero {
        height: auto;
        padding: 80px 40px;
        justify-content: center;
        gap: 60px;
    }
    .hero-text {
        padding: 0;
    }
    .hero-image {
        padding: 40px 24px 0 40px;
    }
    .hero-image img {
        max-width: 400px;
    }

    /*  히어로 버튼: 두 개가 항상 한 줄 유지되도록 하고
        화면 폭에 따라 clamp()로 크기가 자연스럽게 줄어들게 함
        (텍스트가 두 줄로 줄바꿈되는 것 방지) */
    .hero-btn {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 10px;
    }
    .hero-btn > * {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
        padding: clamp(10px, 1.6vw, 18px) clamp(14px, 2.6vw, 34px);
        font-size: clamp(0.85rem, 1.4vw, 1.1rem);
    }

    /* 동네소개 섹션들 */
    .town-img img,
    .town-img2 img,
    .town-img3 img { margin: 0 auto;}
    .town-text2 { padding: 0;}

    /* 인기매물 섹션; 그리드 4열 -> 3열 */
    .pop-title { padding: 60px 24px 40px; }
    .pop-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 100%;
        gap: 24px;
    }
    /* 푸터 높이 고정 해제, 여백 축소 */
    .footer { padding: 60px 40px; height: auto; }
}

/* ---------- 768px 이하 (태블릿 → 모바일 전환) ---------- */
@media (max-width: 768px) {
    /* 히어로 + 동네소개 3섹션: 가로 배치 -> 세로 배치로 전환, 가운데 정렬 */
    .hero,
    .town-market,
    .town-life,
    .town-shop {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 40px 20px;
        height: auto;
    }

    .hero-title { font-size: 1.8rem; }

    .hero-image { padding: 0; }
    .hero-image img {
        max-width: 220px;
        width: 100%;
        height: auto;
    }

    /* 히어로 버튼 크기를 모바일 폭에 맞게 한 단계 더 축소 */
    .hero-btn > * {
        padding: clamp(8px, 2vw, 14px) clamp(10px, 3vw, 20px);
        font-size: clamp(0.72rem, 2.6vw, 0.95rem);
    }

    /* "우리 동네 마켓" 섹션만 이미지-텍스트 순서를 바꿔서
       텍스트가 위, 이미지가 아래로 보이게 함 (HTML 순서는 그대로, CSS order만 변경) */
    .town-market .town-img { order: 2; }
    .town-market .town-text { order: 1;}

    .town-text h2, .town-text2 h2,
    .town-text3 h2 { font-size: 1.8rem; }

    /* 동네생활 아이콘 리스트: 가로 나열 -> 세로 나열로 전환 */
    .town-icons {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    /* 아이콘 한 줄(li) 내부를 그리드로 재구성:
       왼쪽 열 = 아이콘(위아래 두 줄 높이만큼 걸침), 오른쪽 열 = 제목+설명 */
    .town-icons li {
        display: grid;
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
        column-gap: 16px;
        row-gap: 4px;
        align-items: center;
        text-align: left;
    }

    .town-icons img { grid-row: 1 / 3; grid-column: 1; }

    .town-icons span { grid-row: 1; grid-column: 2; margin-top: 0; }

    .town-icons p {
        grid-row: 2;
        grid-column: 2;
        margin-top: 0;
        text-align: left;
        width: auto;
    }

    /* 인기매물: 제목/여백 축소, 그리드 3열 -> 2열 */
    .pop-title {
        padding: 40px 16px 32px;
        font-size: 1.8rem;
    }
    .pop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* 푸터: 좌우 여백 축소 (박스 자체는 가로 배치 유지 - 링크/다운로드 양쪽 정렬) */
    .footer { padding: 40px 24px; height: auto; }
    .footer-box { align-items: flex-start; gap: 16px; }
    .links { flex-direction: column; gap: 10px; font-size: 0.9rem; }
    .download { font-size: 0.85rem; }

}

/* ---------- 480px 이하 (작은 모바일) ---------- */
@media (max-width: 480px) {
    .hero,
    .town-market,
    .town-life,
    .town-shop { padding: 32px 16px; }

    .hero-title { font-size: 1.5rem; }
    .hero-desc { font-size: 0.9rem; }
    .hero-image img { max-width: 160px; }

    .town-text h2,
    .town-text2 h2,
    .town-text3 h2 { font-size: 1.5rem; }

    /* 인기매물 제목/그리드 추가 축소 */
    .pop-title { font-size: 1.5rem; padding: 32px 16px 24px; }
    .pop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* 푸터 다운로드 버튼: 세로로 쌓고 폭을 꽉 채움 */
    .download-btns { flex-direction: column;  width: 100%; }
    .btn-Apps,
    .btn-GP { width: 100%; text-align: center; }
}