/* ============================================================================= components.css — 공용 컴포넌트 (헤더·푸터·버튼·카드·배지·라이트박스·모달 등) 역할: 두 페이지 이상에서 재사용되는 UI의 유일한 정의처. 의존: tokens.css, base.css. 마크업은 assets/partials/ 와 components/ JS가 생성. 주의: 한 페이지에서만 쓰는 스타일은 여기 넣지 말 것 → pages/*.css 로. ========================================================================== */ /* ===== 헤더 ===== 기본은 투명(히어로 위에 얹힘) → 스크롤 시 .is-scrolled 로 아이보리 전환. 서브 페이지는 로 처음부터 아이보리 고정. */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background var(--dur-ui) ease, box-shadow var(--dur-ui) ease; } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 80px; /* 8px 그리드: 80 = 10칸 */ } .site-header.is-scrolled, [data-header="solid"] .site-header { background: rgba(255, 255, 255, 0.96); /* paper 반투명 — 살짝 비치는 정도만 */ box-shadow: 0 1px 0 var(--line); } .brand { display: flex; align-items: center; gap: var(--sp-2); } .brand img { width: 40px; height: 40px; } .brand-name { font-family: var(--font-serif); font-weight: 900; font-size: var(--fs-3); letter-spacing: -0.01em; } /* 히어로(투명 헤더) 위에서는 흰 글자, 스크롤·서브에서는 잉크색 */ .site-header:not(.is-scrolled) .brand-name { color: var(--paper); } [data-header="solid"] .site-header .brand-name, .site-header.is-scrolled .brand-name { color: var(--ink); } .gnb { display: flex; gap: var(--sp-4); } .gnb a { display: inline-flex; align-items: center; min-height: var(--touch-target); font-weight: 600; font-size: var(--fs-2); color: var(--paper); position: relative; transition: color var(--dur-ui) ease; } .site-header.is-scrolled .gnb a, [data-header="solid"] .gnb a { color: var(--ink); } /* 현재 페이지·호버 표시 — 틸→코럴 그라데이션 언더라인이 좌→우로 자란다 */ .gnb a::after { content: ''; position: absolute; left: 0; bottom: 8px; width: 100%; height: 2px; background: linear-gradient(90deg, var(--wine), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-ui) ease; } .gnb a:hover::after, .gnb a[aria-current="page"]::after { transform: scaleX(1); } /* 모바일 메뉴 버튼 — 1.5px 스트로크 햄버거 (SVG는 partial에 인라인) */ .menu-button { display: none; width: var(--touch-target); height: var(--touch-target); align-items: center; justify-content: center; } .menu-button svg { stroke: var(--paper); } .site-header.is-scrolled .menu-button svg, [data-header="solid"] .menu-button svg { stroke: var(--ink); } /* 모바일 드로어 */ .mobile-nav { display: none; position: fixed; inset: 80px 0 auto 0; z-index: 99; background: var(--paper); border-bottom: 1px solid var(--line); padding: var(--sp-2) var(--sp-3) var(--sp-4); } .mobile-nav.is-open { display: block; animation: drawerDown 0.3s var(--ease-reveal); } @keyframes drawerDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } .mobile-nav a { display: flex; align-items: center; min-height: var(--touch-target); font-weight: 600; border-bottom: 1px solid var(--line); } .mobile-nav a[aria-current="page"] { color: var(--wine); } /* ===== 서브 페이지 공통 히어로 (제목 밴드) ===== 틸·코럴 라디얼 워시 — 양 모서리에서 은은하게 번지는 브랜드 그라데이션 */ .page-hero { position: relative; overflow: hidden; padding: 176px 0 var(--sp-8); /* 헤더 80px + 여백 96px */ background: radial-gradient(640px 320px at 88% 12%, rgba(232, 93, 61, 0.10), transparent 70%), radial-gradient(720px 400px at 4% 96%, rgba(15, 110, 104, 0.12), transparent 70%), var(--wash); border-bottom: 1px solid var(--line); } .page-hero h1 { font-size: var(--fs-6); } .page-hero p { color: var(--ink-soft); margin-top: var(--sp-2); } /* 진입 모션 — 라벨→제목→설명 순 120ms 스태거 페이드업 */ .page-hero .label, .page-hero h1, .page-hero p { animation: pageHeroUp 0.7s var(--ease-reveal) both; } .page-hero h1 { animation-delay: 0.12s; } .page-hero p { animation-delay: 0.24s; } @keyframes pageHeroUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ===== 버튼 — pill은 버튼에만 허용 ===== */ .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-height: var(--touch-target); padding: 0 var(--sp-4); border-radius: 999px; font-weight: 600; font-size: var(--fs-2); transition: background var(--dur-ui) ease, color var(--dur-ui) ease, border-color var(--dur-ui) ease; } .button--primary { background: linear-gradient(135deg, var(--wine), var(--wine-deep)); color: var(--paper); transition: filter var(--dur-ui) ease, transform var(--dur-ui) ease; } .button--primary:hover { filter: brightness(1.12); transform: translateY(-1px); } .button--ghost { border: 1px solid var(--line-strong); color: var(--ink); } .button--ghost:hover { border-color: var(--wine); color: var(--wine); } /* 히어로 등 어두운 사진 위 전용 */ .button--light { border: 1px solid rgba(255, 255, 255, 0.6); color: var(--paper); } .button--light:hover { background: var(--paper); color: var(--ink); } /* 텍스트 링크 (더 보기 →) */ .text-link { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--touch-target); font-weight: 600; color: var(--wine); } .text-link svg { transition: transform var(--dur-ui) ease; } .text-link:hover svg { transform: translateX(4px); } /* ===== 카드 공통 — 호버 시 살짝 떠오르는 리프트 모션 ===== */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow var(--dur-ui) ease, border-color var(--dur-ui) ease, transform var(--dur-ui) ease; } .card:hover { box-shadow: var(--shadow-card); border-color: var(--line-strong); transform: translateY(-4px); } /* ===== 스크롤 프로그레스 바 — partial-loader.js가 생성·갱신 ===== */ .scroll-progress { position: fixed; top: 0; left: 0; z-index: 110; /* 헤더(100)보다 위 */ height: 3px; width: 0; background: linear-gradient(90deg, var(--wine), var(--gold)); /* 블루→앰버 브랜드 그라데이션 */ } /* 이미지 호버 scale 1.03 / 0.8s — 그 이상은 금지 */ .card .img-frame img { transition: transform var(--dur-hover) ease; } .card:hover .img-frame img { transform: scale(1.03); } /* ===== 상태 배지 (대회 일정) ===== */ .badge { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.04em; } .badge--open { background: linear-gradient(135deg, #FF9C7E, var(--gold)); color: #FFFFFF; } /* 접수중 — 코럴 그라데이션으로 주목 */ .badge--soon { border: 1px solid var(--line-strong); color: var(--ink-soft); } /* 예정 */ .badge--closed { background: var(--paper-warm); color: var(--ink-soft); } /* 종료 */ /* ===== 빈 상태 / 에러 상태 (API 실패 시 필수 노출) ===== */ .empty-state { padding: var(--sp-8) var(--sp-3); text-align: center; color: var(--ink-soft); border: 1px dashed var(--line-strong); border-radius: var(--radius); } .empty-state .button { margin-top: var(--sp-3); } /* ===== 라이트박스 (갤러리) ===== */ .lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: var(--overlay-dim); padding: var(--sp-3); } .lightbox.is-open { display: flex; animation: lightboxFade var(--dur-ui) ease; } @keyframes lightboxFade { from { opacity: 0; } to { opacity: 1; } } .lightbox img { max-width: min(1080px, 100%); max-height: 82vh; object-fit: contain; } /* 이미지 줌인 — 페이드와 함께 0.96→1로 정착하는 모션 */ .lightbox.is-open img { animation: lightboxZoom 0.3s var(--ease-reveal); } @keyframes lightboxZoom { from { transform: scale(0.96); } to { transform: scale(1); } } .lightbox-caption { position: absolute; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); color: var(--paper); font-size: var(--fs-1); text-align: center; } .lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; width: var(--touch-target); height: var(--touch-target); display: flex; align-items: center; justify-content: center; color: var(--paper); } .lightbox-close { top: var(--sp-3); right: var(--sp-3); } .lightbox-prev { left: var(--sp-2); top: 50%; transform: translateY(-50%); } .lightbox-next { right: var(--sp-2); top: 50%; transform: translateY(-50%); } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { color: var(--wine); } /* ===== 영상 모달 (YouTube) ===== */ .video-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: var(--overlay-dim); padding: var(--sp-3); } .video-modal.is-open { display: flex; animation: lightboxFade var(--dur-ui) ease; } .video-modal-body { width: min(960px, 100%); aspect-ratio: 16 / 9; background: var(--ink); } .video-modal-body iframe { width: 100%; height: 100%; border: 0; } .video-modal .lightbox-close { color: var(--paper); } /* ===== 페이지네이션 (공지 목록) ===== */ .pagination { display: flex; justify-content: center; gap: var(--sp-1); margin-top: var(--sp-8); } .pagination button { min-width: var(--touch-target); min-height: var(--touch-target); border-radius: var(--radius); font-weight: 600; color: var(--ink-soft); } .pagination button:hover { color: var(--wine); } .pagination button[aria-current="page"] { background: var(--wine); color: var(--paper); } /* ===== 필터 탭 (갤러리·일정·영상 카테고리) ===== */ .filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-6); } .filter-bar button { min-height: var(--touch-target); padding: 0 var(--sp-3); border-radius: 999px; border: 1px solid var(--line-strong); font-weight: 600; transition: all var(--dur-ui) ease; } .filter-bar button:hover { border-color: var(--wine); color: var(--wine); } .filter-bar button[aria-pressed="true"] { background: linear-gradient(135deg, var(--wine), var(--wine-deep)); border-color: transparent; color: var(--paper); } /* ===== 푸터 — 딥 페트롤→틸 대각 그라데이션 ===== */ .site-footer { background: linear-gradient(160deg, #12262B 0%, #0D4540 100%); color: rgba(255, 255, 255, 0.75); padding-block: var(--sp-8) var(--sp-5); font-size: var(--fs-1); } .site-footer .footer-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .site-footer .brand-name { color: var(--paper); } /* 가맹 표기 — 골드 라벨 톤의 훈장적 디테일 */ .site-footer .affiliation { color: var(--gold); font-size: var(--label-size); font-weight: 700; letter-spacing: 0.06em; margin-top: var(--sp-1); } .site-footer address { font-style: normal; margin-top: var(--sp-2); line-height: 2; } .site-footer .footer-nav { display: flex; gap: var(--sp-3); flex-wrap: wrap; } .site-footer .footer-nav a { min-height: var(--touch-target); display: inline-flex; align-items: center; } .site-footer .footer-nav a:hover { color: var(--paper); } .site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); } .site-footer .copyright { color: rgba(255, 255, 255, 0.62); } /* 가독 우선 */ .site-footer .legal-nav { display: flex; gap: var(--sp-3); } .site-footer .legal-nav a { color: rgba(255, 255, 255, 0.62); min-height: var(--touch-target); display: inline-flex; align-items: center; } .site-footer .legal-nav a:hover { color: var(--paper); } /* ===== 반응형 ===== */ @media (max-width: 1024px) { .gnb { display: none; } .menu-button { display: flex; } } @media (max-width: 768px) { .site-header .container { height: 64px; } .mobile-nav { inset: 64px 0 auto 0; } .page-hero { padding-top: 136px; } .site-footer .footer-grid { grid-template-columns: 1fr; } }