/* ============================================================ MR 40주년 — 공통 스타일시트 폰트: Pretendard (CDN), 다크-블루 테마 ============================================================ */ /* ---------- CSS 변수 ---------- */ :root { --bg: #0b1530; --bg2: #15275c; --accent: #5b8cff; --text: #ffffff; --muted: #aab7d6; --radius: 1rem; --nav-h: 60px; } /* data-era="retro"는 에 설정한다 (timeline.html 레트로 구간) */ [data-era="retro"] { --bg: #0a0e14; --bg2: #0a0e14; --accent: #2dd4a7; --text: #e0ffe8; --muted: #8fd0ae; font-family: 'Courier New', Courier, monospace; } /* ---------- 리셋 / 기본 ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif; background: linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%); background-attachment: fixed; min-height: 100vh; color: var(--text); padding-top: var(--nav-h); -webkit-font-smoothing: antialiased; /* 본문 단락의 외톨이 줄(orphan)을 줄인다 */ text-wrap: pretty; } /* 제목은 줄 길이를 고르게 분배해 어색한 줄바꿈을 막는다 */ h1, h2, h3 { text-wrap: balance; } a { color: inherit; text-decoration: none; /* 밑줄을 쓰는 곳(본문 링크)에서만 적용되는 형태 보정 */ text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } /* ---------- 상단 내비게이션 ---------- */ .topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); display: flex; align-items: center; padding: 0 1.25rem; gap: 1rem; background: rgba(11, 21, 48, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(91, 140, 255, 0.15); } .logo { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; flex-shrink: 0; } .nav-actions { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; } .nav-toggle { min-width: 44px; min-height: 44px; } .logo { display: inline-flex; align-items: center; gap: 0.45rem; } .logo-mark { height: 22px; width: auto; display: block; } .logo span { color: var(--accent); } .nav-toggle { display: none; margin-left: auto; background: none; border: none; color: var(--text); font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 0.25rem 0.6rem; align-items: center; gap: 0.35rem; font-size: 0.95rem; } .nav-links { display: flex; align-items: center; gap: 0.25rem; margin-left: 0; flex-wrap: wrap; } .nav-link { font-size: 0.875rem; font-weight: 500; color: var(--muted); padding: 0.7rem 0.65rem; border-radius: 0.5rem; transition: color 0.2s, background 0.2s; white-space: nowrap; } .nav-link:hover { color: var(--text); background: rgba(91, 140, 255, 0.12); } .nav-link.active { color: var(--accent); background: rgba(91, 140, 255, 0.18); font-weight: 700; } /* ---------- 축소 내비게이션 (< 1024px) ---------- */ @media (max-width: 1023px) { .nav-toggle { display: inline-flex; } .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; background: rgba(11, 21, 48, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(91, 140, 255, 0.2); padding: 0.5rem 0; } .topnav.open .nav-links { display: flex; } .nav-link { min-height: 48px; padding: 0.85rem 1.5rem; border-radius: 0; font-size: 0.95rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .nav-link:last-child { border-bottom: none; } } /* ---------- 카드 ---------- */ .card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); padding: 1.5rem; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; } button, [role="button"], input, select, textarea { font: inherit; } button { min-height: 44px; /* 누를 때만 작동하는 촉각 피드백 — transform만 명시(절대 all 금지) */ transition-property: transform; transition-duration: 0.12s; } button:active { transform: scale(0.96); } button:focus-visible, a:focus-visible, input:focus-visible, iframe:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; } .survey-fab, .wm-apply, .ev-apply-btn, .payment-btn, .gal-tab.active { color: #07142f !important; } .page-utilities { position: fixed; right: 1rem; bottom: 5.2rem; z-index: 1350; display: flex; flex-direction: column; gap: 0.5rem; } .page-utilities button { min-width: 48px; min-height: 44px; padding: 0.55rem 0.8rem; border: 1px solid rgba(91, 140, 255, 0.45); border-radius: 9999px; background: rgba(11, 21, 48, 0.92); color: var(--text); font-size: 0.82rem; font-weight: 700; cursor: pointer; } .back-to-top { display: none; } .back-to-top.visible { display: block; } .card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(91, 140, 255, 0.15); background: rgba(255, 255, 255, 0.08); } /* ---------- 토스트 ---------- */ #toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(1rem); background: rgba(91, 140, 255, 0.92); color: #fff; padding: 0.6rem 1.4rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; pointer-events: none; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.25s, transform 0.25s, visibility 0.25s; z-index: 9999; } #toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ---------- 주제가 플레이어 (전 페이지 공통, common.js가 주입) ---------- */ .music-fab { position: fixed; bottom: 1.4rem; left: 1.4rem; z-index: 1500; display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(11, 21, 48, 0.85); border: 1px solid rgba(91, 140, 255, 0.45); color: var(--text); border-radius: 9999px; min-height: 44px; padding: 0.6rem 1.05rem; font-size: 0.82rem; font-weight: 700; font-family: inherit; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 0.2s, transform 0.2s; } .music-fab:hover { border-color: var(--accent); transform: scale(1.04); } .music-fab .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .music-fab .eq span { width: 3px; background: var(--accent); height: 4px; border-radius: 1px; } .music-fab.playing .eq span { animation: eq-bounce 0.9s ease-in-out infinite; } .music-fab.playing .eq span:nth-child(2) { animation-delay: 0.2s; } .music-fab.playing .eq span:nth-child(3) { animation-delay: 0.45s; } @keyframes eq-bounce { 0%, 100% { height: 4px; } 50% { height: 12px; } } @media (max-width: 480px) { .music-fab .music-title { display: none; } .hidden-xs { display: none; } } /* ---------- 공통 유틸 ---------- */ .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; } .section { padding: 4rem 0; } .text-accent { color: var(--accent); } .text-muted { color: var(--muted); } .new-window-note { font-size: 0.82em; color: var(--muted); white-space: nowrap; } .site-footer .footer-name, .site-footer .footer-note, .card-desc, .hero-sub, .gal-subtitle, .tl-subtitle, .dir-subtitle, .ev-card p, .ev-card li, .video-meta p { font-size: 1rem !important; line-height: 1.65; } /* 시니어 접근성: 배지·날짜·보조 설명도 14px 아래로 내려가지 않는다. */ .section-card .card-title .lock, .logo-chip .logo-era, .dday-caption, .wm-survey .ws-desc, .wm-survey .ws-soon, .wm-later, .hero-survey-pill .hp-soon, .ev-cta .cta-note, .ev-dday .label, .program-row .time, .program-row .what small, .ev-tbd, .cohort-badge, .org-badge, .interest-tag, .copy-btn, .state-notice .hint, .privacy-note, .tl-date, .tl-vod-label, .tl-vod-label .ext, .book-cover .cover-placeholder small, .book-meta .book-year, .book-meta .book-note, .gb-cohort-badge, .gb-date, .ar-note, .ar-screen .ar-prompt, .ar-body p, .page-utilities button, .music-fab, .new-window-note { font-size: 0.875rem !important; line-height: 1.45; } .footer-home { margin-bottom: 0.75rem; } .footer-home a, .footer-contact a { color: var(--accent); font-weight: 700; text-decoration: underline; } .footer-contact { margin-bottom: 0.55rem; } .site-notice { position: relative; z-index: 900; padding: 0.75rem 1rem; text-align: center; background: #fff3bf; color: #17203a; line-height: 1.6; } .site-notice a { font-weight: 800; text-decoration: underline; } /* ---------- 진입 스태거 (공통) ---------- common.js의 initStaggerReveal()가 [data-stagger] 컨테이너에 .stagger를 부여하고, 뷰포트 진입 시 .in-view를 더해 직계 자식을 순차 등장시킨다. 숨김·애니메이션을 모두 이 미디어쿼리 안에만 둬 모션 비선호·JS 비활성 시엔 항상 보인다. 진입이 끝나면 JS가 .stagger를 떼어 카드의 hover transform을 원복한다. */ @media (prefers-reduced-motion: no-preference) { @keyframes mr-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* 기본(무제한): 직계 자식 전부를 페인트 전에 숨겨 깜빡임 없이 등장시킨다. */ [data-stagger]:not([data-stagger-max]).stagger > * { opacity: 0; } /* 제한(data-stagger-max="N"): JS가 앞쪽 N개에만 .mr-hide를 부여한다. 사진관·주소록처럼 카드가 수백 장인 그리드에서 첫 줄만 가볍게 연출하기 위함. */ [data-stagger][data-stagger-max].stagger > .mr-hide { opacity: 0; } [data-stagger]:not([data-stagger-max]).stagger.in-view > *, [data-stagger][data-stagger-max].stagger.in-view > .mr-hide { animation: mr-rise 0.5s cubic-bezier(0.2, 0, 0, 1) both; animation-delay: var(--mr-delay, 0s); } }