@layer u2 {

	:root {
		 --u2-space: 40px; 
		 --u2-min-width: 1360px; /* 텍스트 기준선 최소폭 */
		 --u2-max-width: 1920px; /* 초대형 모니터 한계폭 */
        
        /* 80%를 유지하되 1360과 1920 사이에서만 작동하는 지능형 폭 */
        --u2-container-width: clamp(var(--u-min-width), 80%, var(--u-max-width));
		/* [확장 계열: 하이픈(-)] 기준값 40px의 배수 연산 */
		--u2-h-3_2: calc(var(--u2-space) * 3.5);  /* 140px: 특수 높이 (헤더 등) */
		--u2-h-3:   calc(var(--u2-space) * 3);    /* 120px: 대성 (배너 미니멈, 섹션 구분) */
		--u2-h-2:   calc(var(--u2-space) * 2);    /* 80px:  중성 (표준 헤더, 타이틀 영역) */
		--u2-h-1-5: calc(var(--u2-space) * 1.5);  /* 60px:  소성 (큰 버튼, 입력창) */
		--u2-h-1:   var(--u2-space);              /* 40px:  정성 (기준 블록, 1로우) */

		/* [응축 계열: 언더바(_)] 기준값 40px의 약수 연산 */
		--u2-h_2: calc(var(--u2-space) / 2);      /* 20px:  약성 (물리적 갭, 요소 사이) */
		--u2-h_4: calc(var(--u2-space) / 4);      /* 10px:  미성 (세밀한 여백) */
		--u2-h_8: calc(var(--u2-space) / 8);      /* 5px:   극미 (미세 조정) */

        /* 폰트 패밀리 변수화 */
        --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. 최상위 래퍼: 전체 모드와 테마를 통제 */
    #u2_wrap {
		width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column; /* 푸터를 하단에 고정하기 위한 설정 */
        background-color: var(--u2-bg, #fff);
        color: var(--u2-text);
    }

	 .u2-container {
        width: 80%;               /* 기본은 80% */
		min-width: 1360px;        /* 1360px 밑으로는 절대 안 내려감 (기준선 보호) */
		max-width: 1920px;        /* 1920px 위로는 절대 안 올라감 (가독성 보호) */
		margin: 0 auto;           /* 중앙 정렬 */
		padding: 0 var(--u-space); /* 좌우 40px 여백 */
		box-sizing: border-box;
    }

	 @media (max-width: 1360px) {
        .u-container {
            width: 100%;
        }
    }

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

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

	#u2_banner {
        width: 100%;
        min-height: var(--u2-h-3);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

	#u2-breadcrumb {
        /* [1] 높이: 정성 시스템의 중성(80px) 위계 적용 */
        height: var(--u2-h-2); 
        
        /* [2] 정렬: Flexbox를 활용한 수직 중앙 정렬 */
        display: flex;
        align-items: center;
        width:80%;
		margin:0 auto;
        /* [3] 컬러: 리 블랙 (#595959) 보조 정보 위계 */
        color: var(--u2-fc_2); 
        
        /* [4] 타이포그래피: 12px 대신 h-7(14px) 또는 rem 단위 권장 */
        font-size: 0.875rem;         
        
    }

   #main {
    width: 100%;
    margin-top: calc(var(--u-space) * 2);
	}

	/* [수정] 실제 자식(#section, #aside)을 품고 있는 컨테이너에 그리드 부여 */
	#main .u2-container {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: var(--u2-space);
		width: 80%; /* 컨테이너 속성 */
		min-width: 1360px;
		max-width: 1920px;
		margin: 0 auto;
	}



    /* 4. 섹션: 주인공 영역 (9컬럼) */
    #section {
        grid-column: span 9;
        display: flex;
        flex-direction: column;
		min-width: 0; /* 내부 컨텐츠가 넓어도 그리드 붕괴 방지 */
    }

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

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

    /* 7. 푸터: 하단 정보 영역 */
    #footer {
        width: 100%;
        padding: var(--u2-space) 0;
        background-color: var(--u2-fc_3); /* 연한 회색 배경 */
        border-top: 1px solid var(--u2-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 대응 추가 */
}