@layer u2 {

	:root {
		--u-space: 40px; /* 모든 마진, 패딩, 높이 연산의 기준 그리드 격자 기준*/

        /* 폰트 패밀리 변수화 */
        --u2-font: "Pretendard Variable", Pretendard, apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
		/* 본문 텍스트용: 부드럽고 세련된 검정 */
        --u2-text: #1a1a1a; 
        
        /* 제목용: 조금 더 강한 강조가 필요할 때 */
        --u2-text-strong: #111111; 
        
        /* 부연 설명용: 연한 회색 */
        --u2-text-muted: #666666;
		}

		/* [1] 서비스 모드별 포인트 컬러 설정 */
		.mode-community {
			--u2-primary: #0052db; /* 블루 테마 */
			--u2-primary-bg: #f0f7ff;
		}

		.mode-shop {
			--u2-primary: #e74c3c; /* 레드 테마 */
			--u2-primary-bg: #fff5f5;
		}

    /* [2] ID 뼈대와 Class 옷의 결합 */
 /* 1. 최상위 래퍼: 전체 모드와 테마를 통제 */
    #u_wrap {
		width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column; /* 푸터를 하단에 고정하기 위한 설정 */
        background-color: var(--u2-bg, #fff);
        color: var(--u2-text);
    }

   #header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--u-h-2); /* 정성 시스템 적용 */
        z-index: 1000;
        background-color: #000;
        color: #ffffff;
        transition: all 0.9s ease-in-out;
    }

    /* 스크롤 상태 제어 */
    #header.scrolled {
        background-color: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
    }

    /* 3. 메인: 그리드 시스템의 근본 (9:3 영토 분할) */
    #main {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--u-space); /* 40px 정성 여백 */
        width: 100%;
        max-width: 1440px; /* 유컴어스 최대 폭 */
        margin: calc(var(--u-space) * 2) auto 0; /* 헤더 높이만큼 띄움 */
        padding: var(--u-space);
        flex: 1; /* 푸터를 아래로 밀어내기 위함 */
    }

    /* 4. 섹션: 주인공 영역 (9컬럼) */
    #section {
        grid-column: span 9;
        display: flex;
        flex-direction: column;
    }

    /* 5. 아티클: 실제 데이터 재귀 영역 */
    #article {
        width: 100%;
        min-height: 500px;
        /* 페이지별 클래스(.is-list 등)에 의해 옷을 갈아입는 구역 */
    }

    /* 6. 어사이드: 조력자 영역 (3컬럼) */
    #aside {
        grid-column: span 3;
        /* 쇼핑몰 상세 등 특정 페이지에서 display: none 처리 가능 */
    }

    /* 7. 푸터: 하단 정보 영역 */
    #footer {
        width: 100%;
        padding: var(--u-space) 0;
        background-color: var(--u-fc_3); /* 연한 회색 배경 */
        border-top: 1px solid var(--u-border, #eee);
        margin-top: auto;
    }











    /* [3] 페이지 성격별 레이아웃 제어 예시 */
    /* 메인 페이지는 넓게 사용 */
    .is-index #main { width: 100%; max-width: none; }

    /* 상품 상세 페이지는 사이드바 제거 */
    .is-item #aside { display: none; }

    /* 목록 페이지 아티클 스타일 */
    .is-list #article { background: var(--u2-primary-bg); padding: 20px; }
}
html { font-size: 16px; }/* rem단위 변경시 */
body{
		font-family: var(--u2-font);
        font-display: swap;      /* 로딩 지연 시 기본 서체 먼저 노출 */
		font-size: 1.0rem;
		line-height: 1.6;
        font-weight: 450;        /* 가변 폰트의 장점: 400(보통)과 500(중간) 사이 정밀 조절 가능 */
        letter-spacing: -0.02em; /* 가독성을 위한 최적 자간 */
		word-spacing: 0.5px;      /* 단어 간격은 아주 미세하게만 (0.5px 추천) */
		color: var(--u2-text);
        -webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale; /* Firefox 대응 추가 */
}