/* ───────────────────────────────────────────────────────── Hyunjun-Kim.me · Common Sticky Header · Footer · Buttons · Links · Reset 의존: design-tokens.css 선행 ───────────────────────────────────────────────────────── */ /* ─── Fonts (CDN import · 웰컴/이력서/포트폴리오 공통) ─── */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700&display=swap"); /* ─── Reset ─── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { margin: 0; padding: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-ko); font-size: var(--fs-body); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "tnum" 1, "kern" 1; word-break: keep-all; } body { min-height: 100vh; min-height: 100dvh; } h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; } img, svg, video { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--color-selection-bg); color: var(--color-ink); } :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } /* ─── Link · Default Inline ─── */ a { color: var(--color-ink); text-decoration-line: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-thickness var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std); } a:hover { text-decoration-thickness: 2px; } a.no-underline { text-decoration: none; } /* ─── Utility Containers ─── */ .container { max-width: var(--content-max); margin: 0 auto; padding-inline: 2rem; } .container-wide { max-width: var(--portfolio-max); margin: 0 auto; padding-inline: 2rem; } @media (max-width: 767px) { .container, .container-wide { padding-inline: 1.25rem; } } /* ─── Dual-Language Toggle (data-lang 기반 자동 스왑) 사용법:

한글

English

웹사 Step 5가 속성만 토글하면 자동 전환 JS 문자열 교체 없이 CSS만으로 해결 · SEO/번역툴 친화적 ─── */ [data-lang-ko], [data-lang-en] { display: revert; } html[data-lang="ko"] [data-lang-en], html[data-lang="en"] [data-lang-ko] { display: none !important; } /* ─── Visually Hidden (a11y) ─── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ─── Skip link (a11y) ─── */ .skip-link { position: absolute; top: -100px; left: 1rem; padding: 0.5rem 1rem; background: var(--color-ink); color: var(--color-paper); font-size: var(--fs-meta); font-weight: var(--fw-medium); text-decoration: none; z-index: calc(var(--z-sticky-header) + 1); transition: top var(--dur-base) var(--ease-std); } .skip-link:focus { top: 0.75rem; } /* ═════════════════════════════════════════════════════════ STICKY HEADER (모든 페이지 공통) ═════════════════════════════════════════════════════════ */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky-header); height: var(--header-h-desktop); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: var(--border-hair) solid var(--color-stone); } .site-header__inner { height: 100%; max-width: var(--portfolio-max); margin: 0 auto; padding-inline: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-header__logo { font-family: var(--font-en); font-size: var(--fs-meta); font-weight: var(--fw-medium); letter-spacing: var(--ls-meta); color: var(--color-ink); text-decoration: none; text-transform: uppercase; white-space: nowrap; } .site-header__logo .dot { color: var(--color-accent); margin-inline: 0.125em; } .site-header__logo:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; } /* ─── Header · Language Toggle (상단 우측) ─── */ .lang-toggle[data-lang-toggle="header"] { display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--font-en); font-size: var(--fs-meta); font-weight: var(--fw-medium); letter-spacing: var(--ls-meta); } .lang-toggle[data-lang-toggle="header"] .lang-btn { background: transparent; border: 0; padding: 0.25rem 0.25rem; color: var(--color-graphite); font: inherit; letter-spacing: inherit; cursor: pointer; transition: color var(--dur-base) var(--ease-std); text-decoration: none; display: inline-block; } .lang-toggle[data-lang-toggle="header"] .lang-btn:hover { color: var(--color-ink); } .lang-toggle[data-lang-toggle="header"] .lang-btn[aria-current="true"] { color: var(--color-accent); font-weight: var(--fw-bold); } .lang-toggle[data-lang-toggle="header"] .sep { color: var(--color-stone); user-select: none; } /* ─── Header Right Group (CTA + Lang Toggle) ─── */ .site-header__right { display: inline-flex; align-items: center; gap: 1rem; } /* ─── Header CTA · Compact Download Pill ─── */ .header-cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; background: var(--color-accent); color: var(--color-paper); font-family: var(--font-en); font-size: var(--fs-meta); font-weight: var(--fw-medium); letter-spacing: var(--ls-meta); text-decoration: none; border-radius: var(--radius-1); transition: background var(--dur-base) var(--ease-std); white-space: nowrap; text-transform: uppercase; } .header-cta:hover { background: var(--color-accent-hover); color: var(--color-paper); text-decoration: none; } .header-cta .arrow { font-size: 0.95em; display: inline-block; line-height: 1; } /* ─── Mobile 조정 ─── */ @media (max-width: 767px) { .site-header { height: var(--header-h-mobile); } .site-header__inner { padding-inline: 1.25rem; } .site-header__right { gap: 0.625rem; } .header-cta { padding: 0.35rem 0.625rem; font-size: 0.625rem; } } /* ═════════════════════════════════════════════════════════ BUTTONS ═════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 48px; padding: 0 2rem; font-family: var(--font-en); font-size: 0.9375rem; /* 15 */ font-weight: var(--fw-medium); letter-spacing: var(--ls-meta); text-decoration: none; border-radius: var(--radius-0); border: 0; cursor: pointer; transition: background-color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std), transform var(--dur-quick) var(--ease-std); user-select: none; white-space: nowrap; } .btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } .btn:active { transform: scale(0.98); } .btn .arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-std); } .btn:hover .arrow { transform: translateX(4px); } /* Primary */ .btn--primary { background: var(--color-accent); color: var(--color-paper); } .btn--primary:hover { background: var(--color-accent-hover); } /* Secondary */ .btn--secondary { background: transparent; color: var(--color-ink); border: var(--border-hair) solid var(--color-stone); } .btn--secondary:hover { background: var(--color-whisper); border-color: var(--color-graphite); } /* Tertiary (인라인 텍스트 링크 느낌) */ .btn--tertiary { height: auto; padding: 0; background: transparent; color: var(--color-ink); text-decoration-line: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; text-decoration-thickness: 1px; font-size: var(--fs-body); letter-spacing: 0; } .btn--tertiary:hover { text-decoration-thickness: 2px; transform: none; } .btn--tertiary:active { transform: none; } /* ═════════════════════════════════════════════════════════ GLOBAL FOOTER (선택적 · 포트폴리오 / 이력서 하단) ═════════════════════════════════════════════════════════ */ .site-footer { border-top: var(--border-hair) solid var(--color-stone); padding: 2rem 0; text-align: center; font-family: var(--font-en); font-size: var(--fs-caption); letter-spacing: var(--ls-meta); color: var(--color-graphite); } .site-footer .sep { color: var(--color-hairline); margin-inline: 0.5em; } .site-footer a { color: inherit; text-decoration-color: var(--color-hairline); } .site-footer a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); } /* ═════════════════════════════════════════════════════════ MOTION UTILITIES (진입 애니메이션 · 공통) ═════════════════════════════════════════════════════════ */ .m-fade-up { opacity: 0; transform: translateY(8px); animation: mFadeUp 0.5s var(--ease-out) forwards; } .m-fade-up[data-delay="1"] { animation-delay: 0.1s; } .m-fade-up[data-delay="2"] { animation-delay: 0.2s; } .m-fade-up[data-delay="3"] { animation-delay: 0.3s; } .m-fade-up[data-delay="4"] { animation-delay: 0.4s; } .m-fade-up[data-delay="5"] { animation-delay: 0.5s; } .m-fade-up[data-delay="6"] { animation-delay: 0.6s; } .m-fade-up[data-delay="7"] { animation-delay: 0.7s; } @keyframes mFadeUp { to { opacity: 1; transform: translateY(0); } } .m-line { transform: scaleX(0); transform-origin: left; animation: mLine 0.45s var(--ease-out) 0.3s forwards; } @keyframes mLine { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .m-fade-up, .m-line { opacity: 1 !important; transform: none !important; animation: none !important; } }