/* ========================================================= 0. FONT IMPORT (웹폰트 불러오기) - 이 파일을 style.css로 쓰면, HTML 에는 만 넣으면 됨. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;600;700&family=Bebas+Neue&display=swap'); @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.3.9/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } /* ========================================================= 1. DESIGN TOKENS : COLOR / SPACE / RADIUS / SHADOW / FONT ========================================================= */ :root { /* ------------------------------ COLOR SYSTEM (Spectral 기준) ------------------------------ */ /* Blue Scale */ --blue-b1: #EAF0FF; --blue-b2: #BED2FF; --blue-b3: #9FBCFF; --blue-b4: #739DFF; --blue-b5: #588AFF; --blue-main:#2E6DFF; --blue-b6: #2A63E8; --blue-b7: #214DB5; --blue-b8: #193C8C; --blue-b9: #003074; /* Grey Scale */ --grey-white: #FFFFFF; --grey-1: #F1F1F1; --grey-2: #D2D2D2; --grey-3: #BCBCBC; --grey-4: #9E9E9E; --grey-5: #6E6E6E; --grey-6: #4E4E4E; --grey-7: #3D3D3D; --grey-8: #2B2B2B; --grey-black:#101010; /* ------------------------------ SPACE SYSTEM (4, 8, 16, 24, 32) ------------------------------ */ --space-4: 4px; --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px; /* ------------------------------ FONT FAMILY TOKENS ------------------------------ */ --font-display: "Bebas Neue", sans-serif; --font-heading: "Bebas Neue", sans-serif; --font-body: "Archivo Narrow", sans-serif; --font-body-alt: "Pretendard", sans-serif; } /* ========================================================= 2. TYPOGRAPHY STYLES (T01~T05 / B01~B02) ========================================================= */ /* DISPLAY / TITLE ---------------------- */ /* T01 – 120px / uppercase / -3% tracking */ .t01 { font-family: var(--font-display); font-size: 100px; line-height: 1; text-transform: uppercase; letter-spacing: -0.03em; font-weight: 500; } /* T02 – 64px / -3% tracking */ .t02 { font-family: var(--font-heading); font-size: 64px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; } /* T03 – 36px / -3% tracking */ .t03 { font-family: var(--font-heading); font-size: 36px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; } /* T04 – 24px / 150% line-height */ .t04 { font-family: var(--font-heading); font-size: 24px; letter-spacing: -0.03em; line-height: 1.5; font-weight: 300; line-height: 1; } /* T05 – 20px / uppercase / 150% line-height */ .t05 { font-family: var(--font-heading); font-size: 20px; line-height: 1.5; letter-spacing: 0; text-transform: uppercase; font-weight: 300; line-height: 1; } .t06 { font-family: var(--font-heading); font-size: 18px; line-height: 1.5; text-transform: uppercase; font-weight: 300; line-height: 1; } /* BODY ---------------------- */ /* B01_SB – Archivo Narrow SemiBold 18px / uppercase / -4% */ .b01-sb { font-family: var(--font-body); font-size: 18px; line-height: 1.5; font-weight: 400; letter-spacing: -0.04em; text-transform: uppercase; line-height: 1; } /* B01_R – Archivo Narrow Regular 18px / uppercase / -4% */ .b01-r { font-family: var(--font-body); font-size: 18px; line-height: 1.5; font-weight: 200; letter-spacing: -0.04em; text-transform: uppercase; line-height: 1; } /* B02_R – Pretendard Regular 18px */ .b02-R { font-family: var(--font-body-alt); font-size: 16px; line-height: 1.3; font-weight: 400; } .b03-sb { font-family: var(--font-body); font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: -0.04em; text-transform: uppercase; line-height: 1; } .b03-r { font-family: var(--font-body); font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: -0.04em; text-transform: uppercase; line-height: 1; } /* ============================= GNB WRAPPER ============================= */ .gnb-wrapper { position: fixed; z-index: 999; width: 100%; background-color: var(--grey-black); color: var(--grey-2); cursor: none; } /* ============================= INNER CONTAINER (Padding 적용) 좌우 40px / 상하 6px ============================= */ .gnb-inner { width: 100%; /* ✅ 화면 꽉 차게 */ max-width: none; /* ✅ 최대 너비 제한 해제 */ margin: 0; /* ✅ 가운데 정렬 불필요 */ padding: 16px 40px; /* ✅ 좌우 40px 고정 */ /* ... 나머지 기존 속성 유지 ... */ min-height: 60px; display: flex; align-items: center; justify-content: space-between; position: relative; } /* ============================= LEFT MENU - 폰트: 시스템 토큰 사용 (Bebas) ============================= */ .gnb-left { display: flex; gap: 40px; } .gnb-left a { color: inherit; text-decoration: none; } .gnb-left a:hover { color: var(--blue-main); } .gnb-left a:active { color: var(--blue-main); } .gnb-left a.active { color: var(--blue-main) !important; } /* ============================= RIGHT MENU - 폰트: 시스템 토큰 사용 (Archivo Narrow) ============================= */ .gnb-right { display: flex; align-items: center; gap: 4px; text-transform: uppercase; } .gnb-right a { color: inherit; text-decoration: none; } .gnb-right a:hover { color: var(--grey-1); text-decoration: underline; text-underline-offset: 1px; } .gnb-right a:active { color: var(--grey-1); text-decoration: underline; text-underline-offset: 1px; } .gnb-right a.active {color: var(--grey-1); text-decoration: underline; text-underline-offset: 1px; } /* ============================= CENTER LOGO (SVG 파일 교체만 하면 됨) ============================= */ .gnb-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .gnb-logo img { /* 🔥 로고가 GNB 높이에 자동 맞춰짐 */ height: 60px; /* gnb-inner 높이에 맞춰 자동 비율 조정 */ width: auto; object-fit: contain; display: block; } /* ========================================= SHOP MEGA MENU OVERLAY ========================================= */ .shop-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--grey-black); z-index: 2000; /* GNB 덮기 */ transform: translateY(-100%); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: center; justify-content: center; } .shop-overlay.open { transform: translateY(0); } /* 🔥 오버레이 내부 전용 로고 컨테이너 */ .overlay-logo-btn { position: absolute; top: 24px; left: 40px; width: auto; height: auto; cursor: pointer; z-index: 2001; } .overlay-logo-btn img { height: 60px; /* 상단 GNB 로고와 동일한 높이로 설정하거나 원하시는 크기로 조절 (예: 40px) */ width: auto; /* 비율 유지 */ display: block; } .shop-menu-container { width: 100%; height: 100%; display: flex; padding-left: 40px; padding-right: 40px; } /* Left Text Area */ .shop-menu-list { flex: 1; list-style: none; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 140px; /* 원하는 위치만큼 숫자를 조절하세요 (예: 150px ~ 250px) */ gap: 2px; /* 아까 수정한 간격 유지 */ } .menu-item { font-family: var(--font-heading); color: var(--grey-1); text-decoration: none; text-transform: uppercase; line-height: 1; cursor: pointer; display: inline-block; transition: color 0.3s ease; } .menu-item:hover{color: var(--blue-main);} .menu-item.active { color: var(--blue-main); } /* Right Image Area */ .shop-menu-image { flex: 1; display: flex; align-items: center; justify-content: flex-end; align-items: flex-start; padding-top: 140px; /* 왼쪽 메뉴와 똑같은 숫자를 입력해야 높이가 맞습니다 */ overflow: hidden; position: relative; } .shop-menu-image img { width: 80%; max-width: 400px; height: auto; object-fit: contain; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /*footer*/ ul { list-style: none; padding: 0; margin: 0; } .footer h3 { margin: 0 0 16px 0; } .footer p { margin: 0; } a { text-decoration: none; color: inherit; } /* 2. Footer 컨테이너 */ /* 전체 푸터 컨테이너 */ .footer { background-color: var(--grey-white); width: 100%; padding: 64px 40px 10px 40px; box-sizing: border-box; } .footer-inner { max-width: 1920px; /* 가운데 정렬 + 고정 폭 */ margin: 0 auto; } /* 3. 상단 링크 영역 레이아웃 */ .footer-column { display: flex; flex-direction: column; gap: 0px; /* 제목과 리스트 사이 간격 */ } .footer-top { display: flex; justify-content: space-between; align-items: flex-start; } /* 왼쪽 링크 그룹 (모바일) */ .links-group { display: grid; grid-auto-flow: column; /* 가로로 4칸 */ grid-auto-columns: max-content; /* 내용만큼 너비 */ column-gap: 80px; /* ← 4컬럼 간격 여기서 고정 */ } /* 오른쪽 CONTACT 영역 */ .contact-group { flex-shrink: 0; /* 왼쪽 때문에 눌리지 않게 */ } /* 데스크탑 (1024px 이상) 레이아웃 - 여기가 핵심 수정 부분 */ @media (max-width: 1023px) { .footer-top { flex-direction: column; gap: 32px; } .links-group { grid-auto-flow: row; grid-auto-columns: 1fr; row-gap: 24px; column-gap: 0; } } /* 4. 타이포그래피 및 컬럼 스타일 */ .column-title { color: var(--grey-4); } .link-list { display: flex; flex-direction: column; gap: 4px; /* 메뉴 항목 간 위아래 간격 */ } .footer-link { color: var(--grey-6); transition: opacity 0.2s; } .footer-link:hover { opacity: 0.6; } /* 5. Contact 세부 스타일 (rem -> px 변환 완료) */ .contact-handle { color: var(--grey-6); display: block; margin-bottom: 28px; } .contact-info { color: var(--grey-4); line-height: 1.5; } /* 6. 하단 로고 영역 */ .logo-container { width: 100%; padding-top: 0; } .footer-logo-img { width: 100%; height: auto; display: block; min-height: 50px; }