/* ==========================================================================
노트 / 인덱스 카드 — Notebook & Index Card Aesthetic
Tokens: 종이 크림, 빨간 마진, 줄 노트, 펀치 홀, 마스킹 테이프, 스티커
========================================================================== */
/* 1. Tokens */
:root {
--paper: #faf7ee;
--paper-2: #f4efe1;
--card: #fffdf6;
--ink: #1f1c14;
--text-muted: #6b6453;
--red: #c63b3b;
--red-soft: rgba(198, 59, 59, 0.16);
--red-margin: rgba(198, 59, 59, 0.32);
--cyan: #2b8a93;
--gold: #b88a1a;
--bronze: #b3712a;
--tape: rgba(230, 200, 120, 0.55);
--tape-solid: #e6c878;
--line: rgba(31, 28, 20, 0.18);
--rule: rgba(31, 28, 20, 0.08);
--postit: #fff7a8;
--shadow-soft: 0 6px 18px rgba(31, 28, 20, 0.08);
--shadow-lift: 0 12px 28px rgba(31, 28, 20, 0.14);
--radius: 4px;
--font-main: "Noto Sans KR", sans-serif;
--font-mono: "Space Mono", monospace;
--font-hand: "Caveat", cursive;
/* Back-compat aliases for sub-page inline styles */
--text: var(--ink);
--accent: var(--red);
--accent2: var(--bronze);
--bg: var(--paper);
--bg-card: var(--card);
--border: var(--line);
}
/* 2. Reset + 좌클릭 드래그/선택 전역 차단 */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
}
img {
-webkit-user-drag: none;
pointer-events: none;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-main);
background: var(--paper);
color: var(--ink);
line-height: 1.7;
overflow-x: hidden;
background-image:
radial-gradient(circle at 18% 22%, rgba(184, 138, 26, 0.04), transparent 40%),
radial-gradient(circle at 82% 78%, rgba(198, 59, 59, 0.03), transparent 45%);
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
}
button {
font-family: inherit;
background: none;
border: none;
cursor: pointer;
color: inherit;
}
img,
svg {
max-width: 100%;
display: block;
}
/* 3. Typography */
h1,
h2,
h3,
h4 {
font-weight: 800;
color: var(--ink);
letter-spacing: -0.01em;
}
p {
color: var(--ink);
}
.container {
width: 100%;
max-width: 1160px;
margin: 0 auto;
padding: 0 24px;
}
/* 4. Progress bar */
.progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
z-index: 2000;
background: transparent;
}
.progress-bar {
height: 3px;
background: var(--red);
width: 0%;
transition: width 0.1s ease;
}
/* 5. Back to top */
#btn-back-to-top {
position: fixed;
bottom: 28px;
right: 28px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--card);
color: var(--red);
font-size: 1rem;
display: none;
align-items: center;
justify-content: center;
z-index: 1500;
box-shadow: var(--shadow-soft);
border: 1.5px dashed var(--red-margin);
transition: transform 0.2s, box-shadow 0.2s;
}
#btn-back-to-top:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
}
/* 7. Navbar */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--paper);
border-bottom: 1px solid var(--line);
z-index: 1000;
padding: 14px 0;
}
.nav-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-family: var(--font-mono);
font-size: 1rem;
font-weight: 700;
color: var(--red);
letter-spacing: 0.04em;
}
.logo-bracket {
color: var(--cyan);
}
.nav-links {
display: flex;
gap: 28px;
align-items: center;
}
.nav-links a {
font-size: 0.88rem;
color: var(--text-muted);
font-family: var(--font-mono);
transition: color 0.2s;
position: relative;
}
.nav-links a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 6px;
background: var(--red-soft);
opacity: 0;
transition: opacity 0.2s;
z-index: -1;
}
.nav-links a:hover {
color: var(--ink);
}
.nav-links a:hover::after {
opacity: 1;
}
.nav-github {
font-size: 1.15rem;
color: var(--ink);
}
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
padding: 6px;
}
.hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--ink);
border-radius: 2px;
transition: background 0.2s;
}
.hamburger:hover span {
background: var(--red);
}
/* 모바일 사이드바 (#66) — 오른쪽에서 슬라이드 인 */
.mobile-menu {
position: fixed;
top: 0;
right: 0;
width: 260px;
max-width: 75vw;
height: 100vh;
height: 100dvh;
background: var(--paper);
border-left: 1px solid var(--line);
padding: 72px 24px 32px;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 1001;
transform: translateX(100%);
visibility: hidden;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s, box-shadow 0.3s;
overflow-y: auto;
}
.mobile-menu.open {
transform: translateX(0);
visibility: visible;
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
}
.mobile-menu a {
font-family: var(--font-mono);
color: var(--ink);
font-size: 0.9rem;
padding: 12px 16px;
border-radius: 6px;
transition: background 0.2s, color 0.2s;
display: flex;
align-items: center;
gap: 10px;
}
.mobile-menu a:hover {
background: rgba(198, 59, 59, 0.06);
color: var(--red);
}
.mobile-menu a i {
width: 18px;
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
transition: color 0.2s;
}
.mobile-menu a:hover i {
color: var(--red);
}
.sidebar-close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
font-size: 1.2rem;
color: var(--text-muted);
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: color 0.2s, background 0.2s;
}
.sidebar-close:hover {
color: var(--red);
background: rgba(198, 59, 59, 0.06);
}
.sidebar-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.sidebar-overlay.active {
opacity: 1;
visibility: visible;
}
/* 8. Section base */
.section {
padding: 88px 0;
position: relative;
}
.section-alt {
background: var(--paper-2);
}
.section-header {
margin-bottom: 56px;
position: relative;
}
.section-tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text-muted);
letter-spacing: 0.12em;
margin-bottom: 12px;
}
.section-title {
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
font-weight: 800;
position: relative;
display: inline-block;
z-index: 1;
}
.section-title::before {
content: "";
position: absolute;
left: -6px;
right: -6px;
bottom: 4px;
height: 14px;
background: var(--red-soft);
z-index: -1;
transform: skewX(-2deg);
}
/* 섹션 헤더 우측 빈 원형 스티커 */
.section-header::after {
content: "";
position: absolute;
top: -8px;
right: 0;
width: 72px;
height: 72px;
border-radius: 50%;
border: 2px solid currentColor;
color: var(--red);
box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px currentColor;
opacity: 0.7;
transform: rotate(-4deg);
pointer-events: none;
}
#about .section-header::after {
color: var(--cyan);
transform: rotate(3deg);
}
#skills .section-header::after {
color: var(--gold);
transform: rotate(-5deg);
}
#awards .section-header::after {
color: var(--bronze);
transform: rotate(2deg);
}
#projects .section-header::after {
color: var(--red);
transform: rotate(-3deg);
}
/* 9. Notebook card primitive
적용: .about-card, .skill-card, .award-card, .project-card
*/
.about-card,
.skill-card,
.award-card,
.project-card {
position: relative;
background-color: var(--card);
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(var(--red-margin), var(--red-margin)),
radial-gradient(circle 5px at 22px 44px, var(--paper-2) 99%, transparent 100%),
radial-gradient(circle 5px at 22px 50%, var(--paper-2) 99%, transparent 100%),
radial-gradient(circle 5px at 22px calc(100% - 44px), var(--paper-2) 99%, transparent 100%),
repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px);
background-position:
18px -6px,
56px 0,
0 0,
0 0,
0 0,
0 0;
background-size:
90px 28px,
1px 100%,
auto, auto, auto,
100% auto;
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-y;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 38px 28px 28px 64px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
box-shadow: var(--shadow-soft);
}
.about-card:hover,
.skill-card:hover,
.award-card:hover,
.project-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
/* 카드 우측 상단 스티커 */
.skill-card::after,
.award-card::after {
content: "";
position: absolute;
top: 14px;
right: 14px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--card);
border: 2px solid currentColor;
box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3px currentColor;
color: var(--red);
opacity: 0.85;
pointer-events: none;
}
.skill-card:nth-child(5n + 1)::after,
.award-card:nth-child(5n + 1)::after {
color: var(--red);
transform: rotate(-4deg);
}
.skill-card:nth-child(5n + 2)::after,
.award-card:nth-child(5n + 2)::after {
color: var(--cyan);
transform: rotate(3deg);
}
.skill-card:nth-child(5n + 3)::after,
.award-card:nth-child(5n + 3)::after {
color: var(--gold);
transform: rotate(-2deg);
}
.skill-card:nth-child(5n + 4)::after,
.award-card:nth-child(5n + 4)::after {
color: var(--bronze);
transform: rotate(4deg);
}
.skill-card:nth-child(5n + 5)::after,
.award-card:nth-child(5n + 5)::after {
color: var(--ink);
transform: rotate(-3deg);
}
/* 10. Hero */
.hero {
min-height: 100vh;
padding: 96px 0 60px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background: var(--paper);
}
.hero-grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--red-margin), var(--red-margin)),
repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px);
background-position: 84px 0, 0 0;
background-size: 1px 100%, 100% auto;
background-repeat: no-repeat, repeat-y;
opacity: 0.7;
pointer-events: none;
}
.hero-glow {
position: absolute;
width: 480px;
height: 480px;
top: 18%;
right: -120px;
background: radial-gradient(circle, rgba(198, 59, 59, 0.06), transparent 65%);
pointer-events: none;
}
.floating-icons {
position: absolute;
inset: 0;
pointer-events: none;
}
.fi {
position: absolute;
width: 96px;
height: 96px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 3rem;
line-height: 1;
background: var(--card);
border: 2px solid currentColor;
outline: 1.5px dashed currentColor;
outline-offset: -8px;
box-shadow: 0 6px 14px rgba(31, 28, 20, 0.1);
opacity: 0.85;
animation: floatUp 8s ease-in-out infinite;
/* devicon ::before 글리프가 가운데 들어와 보이게 — color는 nth별로 cycle */
}
.fi-1 {
top: 15%;
left: 8%;
color: var(--red);
animation-delay: 0s;
}
.fi-2 {
top: 22%;
right: 12%;
color: var(--cyan);
animation-delay: 1.5s;
}
.fi-3 {
bottom: 26%;
left: 14%;
color: var(--gold);
animation-delay: 3s;
}
.fi-4 {
bottom: 16%;
right: 9%;
color: var(--bronze);
animation-delay: 4.5s;
}
.fi-5 {
top: 48%;
left: 4%;
color: var(--ink);
animation-delay: 6s;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 820px;
}
.hero-tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--red);
letter-spacing: 0.1em;
padding: 5px 14px;
border: 1.5px dashed var(--red-margin);
border-radius: 999px;
background: var(--card);
margin-bottom: 22px;
}
.hero-name {
font-size: clamp(2.6rem, 6vw, 4.4rem);
font-weight: 900;
line-height: 1.05;
margin-bottom: 14px;
}
.name-kr {
display: inline-block;
position: relative;
z-index: 1;
color: var(--ink);
}
.name-kr::before {
content: "";
position: absolute;
left: -6px;
right: -6px;
bottom: 6px;
height: 18px;
background: var(--red-soft);
z-index: -1;
transform: skewX(-3deg);
}
.name-en {
display: block;
font-family: var(--font-mono);
font-size: clamp(1rem, 1.6vw, 1.2rem);
color: var(--text-muted);
font-weight: 400;
letter-spacing: 0.08em;
margin-top: 6px;
}
.hero-role {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--ink);
margin-bottom: 18px;
font-weight: 500;
}
.typing-wrap {
color: var(--red);
font-weight: 700;
}
.typing-cursor {
display: inline-block;
width: 2px;
height: 1.1em;
background: var(--red);
margin-left: 2px;
vertical-align: middle;
animation: blink 1s infinite;
}
.hero-desc {
font-size: 1rem;
color: var(--text-muted);
line-height: 1.85;
max-width: 580px;
margin-bottom: 30px;
}
.hero-btns {
display: flex;
gap: 14px;
margin-bottom: 44px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
font-family: var(--font-mono);
font-size: 0.88rem;
font-weight: 700;
border-radius: var(--radius);
transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
letter-spacing: 0.02em;
}
.btn-primary {
background: var(--red);
color: var(--card);
box-shadow: 0 4px 0 #7a1f1f;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 5px 0 #7a1f1f;
}
.btn-ghost {
background: var(--card);
color: var(--red);
border: 1.5px dashed var(--red-margin);
}
.btn-ghost:hover {
background: var(--paper-2);
transform: translateY(-1px);
}
.hero-stats {
display: flex;
align-items: flex-start;
gap: 22px;
flex-wrap: wrap;
}
/* 포스트잇 stat */
.stat-item {
display: flex;
flex-direction: column;
background: var(--postit);
padding: 14px 20px;
min-width: 110px;
box-shadow: 2px 4px 8px rgba(31, 28, 20, 0.12);
transform: rotate(-2deg);
transition: transform 0.2s;
}
.stat-item:nth-child(3) {
transform: rotate(2deg);
background: #ffe5a8;
}
.stat-item:nth-child(5) {
transform: rotate(-1deg);
background: #c5e4e7;
}
.stat-item:hover {
transform: rotate(0) translateY(-3px);
}
.stat-num {
font-family: var(--font-hand);
font-size: 2rem;
font-weight: 700;
color: var(--red);
line-height: 1;
}
.stat-label {
font-size: 0.78rem;
color: var(--ink);
margin-top: 4px;
font-weight: 500;
}
.stat-divider {
display: none;
}
.scroll-hint {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
pointer-events: none;
}
.scroll-line {
width: 1px;
height: 36px;
background: var(--red);
animation: scrollPulse 1.6s ease-in-out infinite;
transform-origin: top;
}
/* 11. About */
.about-card {
margin-top: 8px;
}
.about-quote {
font-family: var(--font-hand);
font-size: clamp(1.5rem, 2.6vw, 1.95rem);
color: var(--red);
line-height: 1.4;
margin-bottom: 22px;
transform: rotate(-0.5deg);
font-weight: 600;
}
.about-body p {
font-size: 0.98rem;
color: var(--ink);
line-height: 2;
margin-bottom: 14px;
}
.about-body strong {
position: relative;
z-index: 1;
font-weight: 700;
}
.about-body strong::before {
content: "";
position: absolute;
left: -2px;
right: -2px;
bottom: 2px;
height: 10px;
background: var(--red-soft);
z-index: -1;
}
.about-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
margin-bottom: 22px;
}
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.78rem;
padding: 5px 12px;
background: var(--postit);
color: var(--ink);
border-radius: 2px;
box-shadow: 1px 2px 4px rgba(31, 28, 20, 0.08);
transform: rotate(-2deg);
}
.chip:nth-child(2n) {
background: #c5e4e7;
transform: rotate(2deg);
}
.chip:nth-child(3n) {
background: #ffe5a8;
transform: rotate(-1deg);
}
.about-github-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 0.88rem;
color: var(--red);
border-bottom: 1.5px dashed var(--red-margin);
padding-bottom: 2px;
transition: color 0.2s;
}
.about-github-link:hover {
color: var(--ink);
}
/* --- 학력 배지 (#41) — 비전 섹션 소속(한국기술교육대학교) 표시. 종이 카드 + KOREATECH 오렌지 포인트 --- */
.about-edu {
display: inline-flex;
align-items: center;
gap: 14px;
margin: 4px 0 22px;
padding: 10px 16px 10px 13px;
background: var(--card);
border: 1px solid var(--line);
border-left: 3px solid #f4871e;
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
}
.about-edu .edu-logo {
height: 40px;
width: auto;
display: block;
}
.about-edu .edu-fallback {
display: none; /* 로고 로드 실패 시에만 표시 */
font-size: 1.7rem;
color: #f4871e;
line-height: 1;
}
.about-edu.edu-no-logo .edu-fallback {
display: inline-flex;
}
.about-edu .edu-text {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.about-edu .edu-school {
font-weight: 700;
font-size: 0.98rem;
color: var(--ink);
}
.about-edu .edu-sub {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
color: var(--text-muted);
}
/* 12. Skills */
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.skill-icon {
font-size: 1.9rem;
color: var(--red);
margin-bottom: 12px;
line-height: 1;
}
.skill-card h3 {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 12px;
position: relative;
display: inline-block;
z-index: 1;
}
.skill-card h3::before {
content: "";
position: absolute;
left: -3px;
right: -3px;
bottom: 2px;
height: 9px;
background: var(--red-soft);
z-index: -1;
}
.skill-list {
display: flex;
flex-direction: column;
gap: 0;
}
.skill-list li {
font-size: 0.88rem;
color: var(--ink);
line-height: 32px;
position: relative;
padding-left: 16px;
}
.skill-list li::before {
content: "·";
position: absolute;
left: 4px;
color: var(--red);
font-weight: 700;
}
/* 13. Awards */
.awards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.award-card {
position: relative;
}
.award-rank {
position: absolute;
top: 14px;
right: 58px;
font-family: var(--font-hand);
font-size: 3.6rem;
font-weight: 700;
color: var(--red);
opacity: 0.16;
transform: rotate(-6deg);
line-height: 1;
pointer-events: none;
}
.award-icon {
font-size: 2.1rem;
margin-bottom: 12px;
line-height: 1;
}
.award-gold .award-icon {
color: var(--gold);
}
.award-cyan .award-icon {
color: var(--cyan);
}
.award-bronze .award-icon {
color: var(--bronze);
}
.award-info h3 {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 8px;
}
.award-prize {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--gold);
padding: 3px 10px;
background: rgba(184, 138, 26, 0.12);
border-radius: 2px;
margin-bottom: 10px;
}
.award-cyan .award-prize {
color: var(--cyan);
background: rgba(43, 138, 147, 0.12);
}
.award-bronze .award-prize {
color: var(--bronze);
background: rgba(179, 113, 42, 0.12);
}
.award-desc {
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.7;
}
/* 14. Projects */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.project-card {
padding-top: 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* 빨간 압정 (우상단) */
.project-card::before {
content: "";
position: absolute;
top: -7px;
right: 22px;
width: 14px;
height: 14px;
border-radius: 50%;
background: radial-gradient(circle at 35% 32%, #ff8a8a 0%, var(--red) 55%, #6e1a1a 100%);
box-shadow: 0 3px 5px rgba(31, 28, 20, 0.28);
z-index: 2;
}
.project-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.project-icon {
font-size: 1.8rem;
color: var(--red);
line-height: 1;
}
.project-links {
display: flex;
gap: 6px;
}
.plink {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 0.82rem;
transition: transform 0.2s, background 0.2s, color 0.2s;
background: var(--card);
border: 1.5px solid var(--line);
color: var(--ink);
}
.plink-detail {
border-color: var(--red-margin);
color: var(--red);
}
.plink-detail:hover {
background: var(--red);
color: var(--card);
transform: translateY(-1px);
}
.plink-github {
color: var(--text-muted);
}
.plink-github:hover {
background: var(--ink);
color: var(--card);
transform: translateY(-1px);
}
.project-card h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
position: relative;
display: inline-block;
z-index: 1;
}
.project-card h3::before {
content: "";
position: absolute;
left: -3px;
right: -3px;
bottom: 2px;
height: 9px;
background: var(--red-soft);
z-index: -1;
}
.project-card p {
font-size: 0.88rem;
color: var(--ink);
line-height: 1.75;
flex: 1;
}
.tech-stack {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-top: 10px;
border-top: 1px dashed var(--line);
margin-top: 6px;
}
.tech-stack span {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--ink);
background: var(--paper-2);
padding: 3px 10px;
border-radius: 2px;
border: 1px dashed var(--line);
}
/* WIP 카드 — 사선 줄무늬 + 금색 테이프 배지 */
.project-wip {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(var(--red-margin), var(--red-margin)),
radial-gradient(circle 5px at 22px 44px, var(--paper-2) 99%, transparent 100%),
radial-gradient(circle 5px at 22px 50%, var(--paper-2) 99%, transparent 100%),
radial-gradient(circle 5px at 22px calc(100% - 44px), var(--paper-2) 99%, transparent 100%),
repeating-linear-gradient(45deg, transparent 0 12px, rgba(184, 138, 26, 0.07) 12px 24px),
repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px);
background-position:
18px -6px,
56px 0,
0 0,
0 0,
0 0,
0 0,
0 0;
background-size:
90px 28px,
1px 100%,
auto, auto, auto,
auto, 100% auto;
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat,
repeat-y;
}
.wip-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.7rem;
padding: 4px 12px;
background: var(--tape-solid);
color: var(--ink);
letter-spacing: 0.04em;
transform: rotate(-2deg);
box-shadow: 1px 2px 4px rgba(31, 28, 20, 0.12);
align-self: flex-start;
border-radius: 1px;
}
/* 15. Footer */
.footer {
padding: 36px 0;
border-top: 1px dashed var(--red-margin);
background: var(--paper);
}
.footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.footer-logo {
font-family: var(--font-mono);
font-weight: 700;
color: var(--red);
}
.footer-copy {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-muted);
}
.social-links {
display: flex;
gap: 14px;
}
.social-links a {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink);
background: var(--card);
border: 1px dashed var(--line);
transition: color 0.2s, background 0.2s, transform 0.2s;
}
.social-links a:hover {
color: var(--red);
transform: translateY(-2px);
}
/* 16. Animations */
@keyframes floatUp {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-11px) rotate(3deg);
}
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes scrollPulse {
0%,
100% {
opacity: 0.5;
transform: scaleY(1);
}
50% {
opacity: 1;
transform: scaleY(1.1);
}
}
/* 사이드바 네비게이션 — 태블릿+모바일 (#66) */
@media (max-width: 1024px) {
.nav-links {
display: none;
}
.hamburger {
display: flex;
}
}
/* 17. Media queries — 모바일 레이아웃 */
@media (max-width: 768px) {
.scroll-hint {
display: none;
}
.section {
padding: 64px 0;
}
.about-card,
.skill-card,
.award-card,
.project-card {
padding: 32px 22px 22px 52px;
background-position:
14px -6px,
44px 0,
0 0,
0 0,
0 0,
0 0;
}
.project-wip {
background-position:
14px -6px,
44px 0,
0 0,
0 0,
0 0,
0 0,
0 0;
}
.hero {
padding: 88px 0 48px;
min-height: auto;
}
.hero-name {
font-size: clamp(2rem, 8vw, 3rem);
}
.section-header::after {
width: 56px;
height: 56px;
top: -4px;
}
.fi {
width: 64px;
height: 64px;
font-size: 2rem;
}
.fi::before {
inset: 6px;
}
.hero-stats {
gap: 14px;
}
.stat-item {
min-width: 90px;
padding: 10px 14px;
}
.award-rank {
right: 40px;
font-size: 2.6rem;
}
}
/* ==========================================================================
18. 서브페이지 호환 shim — 기존 15개 /projects/*.html 가독성·동작 보존
========================================================================== */
.detail-hero {
position: relative;
padding: 120px 0 60px;
background: var(--paper);
overflow: hidden;
border-bottom: 1px solid var(--line);
}
.detail-hero-glow {
position: absolute;
width: 400px;
height: 400px;
top: 10%;
right: -100px;
background: radial-gradient(circle, rgba(198, 59, 59, 0.06), transparent 65%);
pointer-events: none;
}
.detail-breadcrumb {
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--text-muted);
margin-bottom: 18px;
}
.detail-breadcrumb a {
color: var(--red);
transition: color 0.2s;
}
.detail-breadcrumb a:hover {
color: var(--ink);
}
.detail-hero-icon {
font-size: 2.4rem;
color: var(--red);
margin-bottom: 14px;
line-height: 1;
}
.detail-title {
font-size: clamp(2rem, 5vw, 3.4rem);
font-weight: 900;
color: var(--ink);
background: none;
-webkit-text-fill-color: initial;
-webkit-background-clip: initial;
background-clip: initial;
line-height: 1.1;
margin-bottom: 18px;
position: relative;
display: inline-block;
z-index: 1;
}
.detail-title::before {
content: "";
position: absolute;
left: -6px;
right: -6px;
bottom: 6px;
height: 16px;
background: var(--red-soft);
z-index: -1;
transform: skewX(-2deg);
}
.detail-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 22px;
}
.detail-badge {
font-family: var(--font-mono);
font-size: 0.74rem;
padding: 4px 12px;
background: var(--card);
color: var(--red);
border: 1px dashed var(--red-margin);
border-radius: 999px;
letter-spacing: 0.04em;
}
.detail-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.github-activity-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: var(--card);
color: var(--ink);
font-family: var(--font-mono);
font-size: 0.84rem;
border: 1px dashed var(--line);
border-radius: var(--radius);
transition: transform 0.2s;
}
.github-activity-btn:hover {
transform: translateY(-2px);
}
.detail-body {
padding: 60px 0 80px;
background: var(--paper);
}
.detail-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 36px;
}
.detail-main {
min-width: 0;
}
.detail-section {
margin-bottom: 36px;
background-color: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px 32px;
box-shadow: var(--shadow-soft);
background-image: repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px);
}
.detail-section h2 {
font-size: 1.4rem;
font-weight: 800;
color: var(--ink);
margin-bottom: 14px;
position: relative;
display: inline-block;
z-index: 1;
}
.detail-section h2::before {
content: "";
position: absolute;
left: -3px;
right: -3px;
bottom: 2px;
height: 12px;
background: var(--red-soft);
z-index: -1;
}
.detail-section h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
margin: 18px 0 10px;
}
.detail-section p {
color: var(--ink);
line-height: 2;
margin-bottom: 12px;
}
.detail-section ul {
margin: 10px 0 14px;
}
.detail-section ul li {
position: relative;
padding-left: 22px;
line-height: 2;
color: var(--ink);
}
.detail-section ul li::before {
content: "·";
position: absolute;
left: 8px;
color: var(--red);
font-weight: 700;
}
.detail-section strong {
color: var(--ink);
font-weight: 700;
}
.detail-section a {
color: var(--red);
border-bottom: 1px dashed var(--red-margin);
}
.detail-sidebar {
display: flex;
flex-direction: column;
gap: 18px;
}
.sidebar-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px;
box-shadow: var(--shadow-soft);
}
.sidebar-card h4 {
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--red);
margin-bottom: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.sidebar-card p {
color: var(--ink);
font-size: 0.9rem;
line-height: 1.7;
}
.sidebar-stack {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sidebar-stack span {
font-family: var(--font-mono);
font-size: 0.72rem;
padding: 3px 10px;
background: var(--paper-2);
color: var(--ink);
border: 1px dashed var(--line);
border-radius: 2px;
}
@media (max-width: 900px) {
.detail-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
19. 인터랙션 팩 — 잉크 트레일 / 도장 / 드래그 / 단축키 힌트
========================================================================== */
/* 도장 클릭 효과 */
.stamp-pop {
position: fixed;
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.95rem;
color: var(--red);
border: 2.5px solid var(--red);
padding: 6px 14px;
background: rgba(255, 253, 246, 0.85);
letter-spacing: 0.1em;
pointer-events: none;
z-index: 9995;
--stamp-rot: -12deg;
transform: translate(-50%, -50%) rotate(var(--stamp-rot)) scale(0);
opacity: 0;
animation: stamp-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
text-shadow: 0 0 1px var(--red);
}
.stamp-pop::before,
.stamp-pop::after {
content: "";
position: absolute;
inset: -3px;
border: 1.5px dashed rgba(198, 59, 59, 0.4);
pointer-events: none;
}
.stamp-pop::after {
inset: 3px;
border: none;
background:
radial-gradient(circle at 30% 40%, rgba(198, 59, 59, 0.06) 0 30%, transparent 31%),
radial-gradient(circle at 70% 70%, rgba(198, 59, 59, 0.04) 0 30%, transparent 31%);
}
@keyframes stamp-pop {
0% {
transform: translate(-50%, -50%) rotate(var(--stamp-rot)) scale(0.6);
opacity: 0;
}
30% {
transform: translate(-50%, -50%) rotate(var(--stamp-rot)) scale(1.1);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) rotate(var(--stamp-rot)) scale(0.9) translateY(-10px);
opacity: 0;
}
}
/* 단축키 힌트 토스트 */
.key-hint {
position: fixed;
bottom: 90px;
left: 50%;
transform: translateX(-50%) translateY(20px);
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.12em;
color: var(--card);
background: var(--ink);
padding: 8px 18px;
border-radius: 2px;
opacity: 0;
transition: transform 0.25s ease, opacity 0.25s ease;
z-index: 9994;
pointer-events: none;
box-shadow: 0 6px 14px rgba(31, 28, 20, 0.25);
}
.key-hint.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ==========================================================================
20. 스티커 (.fi) — 5색 floatUp 변형 + 드래그 상태
========================================================================== */
.fi {
transform: translate(var(--drag-x, 0px), calc(var(--drag-y, 0px) + var(--scroll-y, 0px)));
transition: box-shadow 0.2s ease;
z-index: 1;
user-select: none;
-webkit-user-select: none;
}
.fi:hover {
box-shadow: 0 10px 22px rgba(31, 28, 20, 0.16);
}
.fi.grabbing {
cursor: grabbing !important;
z-index: 50;
box-shadow: 0 18px 36px rgba(31, 28, 20, 0.28);
}
.fi.settled {
animation: none !important;
}
/* nth-child별 다른 floatUp 패턴 */
.fi-1 { animation-name: floatA; }
.fi-2 { animation-name: floatB; animation-duration: 9s; }
.fi-3 { animation-name: floatC; animation-duration: 10s; }
.fi-4 { animation-name: floatD; animation-duration: 8.5s; }
.fi-5 { animation-name: floatE; animation-duration: 11s; }
@keyframes floatA {
0%, 100% {
transform: translate(calc(var(--drag-x, 0px)), calc(var(--drag-y, 0px) + var(--scroll-y, 0px))) rotate(-3deg);
}
50% {
transform: translate(calc(var(--drag-x, 0px) + 6px), calc(var(--drag-y, 0px) + var(--scroll-y, 0px) - 11px)) rotate(1deg);
}
}
@keyframes floatB {
0%, 100% {
transform: translate(var(--drag-x, 0px), calc(var(--drag-y, 0px) + var(--scroll-y, 0px))) rotate(2deg);
}
50% {
transform: translate(calc(var(--drag-x, 0px) - 9px), calc(var(--drag-y, 0px) + var(--scroll-y, 0px) - 8px)) rotate(-1.5deg);
}
}
@keyframes floatC {
0%, 100% {
transform: translate(var(--drag-x, 0px), calc(var(--drag-y, 0px) + var(--scroll-y, 0px))) rotate(-1.5deg);
}
50% {
transform: translate(calc(var(--drag-x, 0px) + 4px), calc(var(--drag-y, 0px) + var(--scroll-y, 0px) - 13px)) rotate(2.5deg);
}
}
@keyframes floatD {
0%, 100% {
transform: translate(var(--drag-x, 0px), calc(var(--drag-y, 0px) + var(--scroll-y, 0px))) rotate(2.5deg);
}
50% {
transform: translate(calc(var(--drag-x, 0px) - 5px), calc(var(--drag-y, 0px) + var(--scroll-y, 0px) - 10px)) rotate(-2deg);
}
}
@keyframes floatE {
0%, 100% {
transform: translate(var(--drag-x, 0px), calc(var(--drag-y, 0px) + var(--scroll-y, 0px))) rotate(-2deg);
}
50% {
transform: translate(calc(var(--drag-x, 0px) + 7px), calc(var(--drag-y, 0px) + var(--scroll-y, 0px) - 9px)) rotate(1.5deg);
}
}
/* ==========================================================================
21. 형광펜 sweep — 호버 시 좌→우로 그어지는 효과
========================================================================== */
.nav-links a::after {
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.2s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.15s;
opacity: 1;
}
.nav-links a:hover::after {
opacity: 1;
transform: scaleX(1);
}
.detail-breadcrumb a {
position: relative;
display: inline-block;
}
.detail-breadcrumb a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 7px;
background: var(--red-soft);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
z-index: -1;
}
.detail-breadcrumb a:hover::after {
transform: scaleX(1);
}
.about-github-link {
position: relative;
overflow: hidden;
}
.about-github-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 10px;
background: var(--red-soft);
transform: translateY(-50%) scaleX(0);
transform-origin: left center;
transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
z-index: -1;
}
.about-github-link:hover::after {
transform: translateY(-50%) scaleX(1);
}
.social-links a {
position: relative;
overflow: hidden;
}
.social-links a::before {
content: "";
position: absolute;
inset: 0;
background: var(--red-soft);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.3s ease;
z-index: -1;
border-radius: 50%;
}
.social-links a:hover::before {
transform: scaleY(1);
}
/* ==========================================================================
22. 카드 그림자 follow — 마우스 위치에 따라 그림자 방향 (회전 없음)
========================================================================== */
.about-card,
.skill-card,
.award-card,
.project-card {
--shadow-x: 0px;
--shadow-y: 6px;
box-shadow:
var(--shadow-x) var(--shadow-y) 14px rgba(31, 28, 20, 0.08),
0 1px 0 rgba(31, 28, 20, 0.04);
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.about-card:hover,
.skill-card:hover,
.award-card:hover,
.project-card:hover {
transform: translateY(-2px);
box-shadow:
var(--shadow-x) calc(var(--shadow-y) + 6px) 20px rgba(31, 28, 20, 0.12),
0 1px 0 rgba(31, 28, 20, 0.04);
}
/* ==========================================================================
23. 카드 진입 — 마스킹 테이프 sweep (.taped 클래스 추가 시)
========================================================================== */
.project-card .project-icon,
.skill-card .skill-icon,
.award-card .award-icon {
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.project-card.taped .project-icon,
.skill-card.taped .skill-icon,
.award-card.taped .award-icon {
animation: icon-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes icon-pop {
0% { transform: scale(0.8) rotate(-6deg); opacity: 0; }
60% { transform: scale(1.08) rotate(3deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
/* 카드 호버 시 푸시핀 살짝 흔들 */
.project-card:hover::before {
animation: pin-wobble 0.3s ease-in-out;
}
@keyframes pin-wobble {
0%, 100% { transform: rotate(0); }
25% { transform: rotate(-4deg); }
75% { transform: rotate(4deg); }
}
/* WIP 배지 호버 시 살짝 떨림 */
.wip-badge {
transition: transform 0.2s ease;
}
.project-card:hover .wip-badge {
animation: badge-wiggle 0.25s ease-in-out;
}
@keyframes badge-wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(-4deg); }
}
/* ==========================================================================
24. 로고 wobble (클릭 시)
========================================================================== */
.logo,
.footer-logo {
display: inline-block;
}
.logo.wobble,
.footer-logo.wobble {
animation: logo-wobble 0.3s ease-in-out;
}
@keyframes logo-wobble {
0%, 100% { transform: rotate(0); }
20% { transform: rotate(-3deg) scale(1.02); }
50% { transform: rotate(2.5deg); }
80% { transform: rotate(-1deg); }
}
/* ==========================================================================
25. 페이지 진입 (한 번만)
========================================================================== */
body.page-entry {
animation: page-land 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes page-land {
0% { opacity: 0.4; transform: translateY(-6px); }
60% { opacity: 1; transform: translateY(1px); }
100% { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
26. Back-to-top 가시성 토글 (.visible 클래스 기반)
========================================================================== */
#btn-back-to-top {
display: flex;
opacity: 0;
transform: translateY(14px) scale(0.85);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
#btn-back-to-top.visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* ==========================================================================
27. 햄버거 변형 (open 상태)
========================================================================== */
.hamburger span {
transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
}
.hamburger.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
opacity: 0;
}
.hamburger.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ==========================================================================
28. 노트 질감 강화 — 종이 노이즈, 잉크 번짐, 손글씨 잔흔
========================================================================== */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.32;
mix-blend-mode: multiply;
background-image:
url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
}
/* 잉크 얼룩 (히어로 우상단) */
.hero::before {
content: "";
position: absolute;
top: 12%;
right: 14%;
width: 80px;
height: 80px;
background: radial-gradient(circle at 40% 40%,
rgba(198, 59, 59, 0.08) 0%,
rgba(198, 59, 59, 0.03) 40%,
transparent 70%);
pointer-events: none;
z-index: 0;
filter: blur(2px);
animation: ink-drift 20s ease-in-out infinite;
}
@keyframes ink-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-6px, 4px) scale(1.05); }
}
/* 손글씨 잔흔 (about-quote 옆) */
.about-quote::before {
content: "“";
position: absolute;
left: -34px;
top: -14px;
font-family: var(--font-hand);
font-size: 4rem;
color: var(--red);
opacity: 0.25;
line-height: 1;
pointer-events: none;
}
.about-quote {
position: relative;
padding-left: 16px;
}
/* ==========================================================================
29. 카드 마스킹 테이프 호버 시 살짝 떨어짐
========================================================================== */
.about-card,
.skill-card,
.award-card,
.project-card {
background-attachment: scroll;
}
/* 카드 호버 시 테이프 살짝 떨어짐 */
.skill-card:hover,
.award-card:hover,
.project-card:hover {
background-position:
24px -3px,
56px 0,
0 0,
0 0,
0 0,
0 0;
}
.project-card.project-wip:hover {
background-position:
24px -3px,
56px 0,
0 0,
0 0,
0 0,
0 0,
0 0;
}
/* ==========================================================================
30. 텍스트 강조 보강
========================================================================== */
/* 히어로 desc 안의 strong (월 100만 명 등) */
.hero-desc strong {
position: relative;
z-index: 1;
font-weight: 700;
color: var(--ink);
}
.hero-desc strong::before {
content: "";
position: absolute;
left: -2px;
right: -2px;
bottom: 1px;
height: 11px;
background: var(--red-soft);
z-index: -1;
transform: skewX(-3deg);
}
/* 섹션 헤더의 section-tag — 약간 손글씨 느낌 */
.section-tag::before {
content: "✎ ";
color: var(--red);
font-size: 0.85em;
margin-right: 4px;
}
/* ==========================================================================
31. 스크롤바 빨간 잉크
========================================================================== */
html {
scrollbar-width: thin;
scrollbar-color: var(--red) var(--paper-2);
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--paper-2);
border-left: 1px dashed var(--line);
}
::-webkit-scrollbar-thumb {
background: var(--red);
border-radius: 0;
border: 2px solid var(--paper-2);
}
::-webkit-scrollbar-thumb:hover {
background: #a82e2e;
}
/* ==========================================================================
32. 카드 진입 시 stagger 추가 — AOS 보조
========================================================================== */
.project-card:not(.taped),
.skill-card:not(.taped),
.award-card:not(.taped) {
/* AOS가 동작하지 않을 때를 대비한 fallback (이미 보이는 상태로) */
opacity: 1;
}
/* ==========================================================================
33. nav-links 활성 표시
========================================================================== */
.nav-links a.is-active::after {
opacity: 1;
transform: scaleX(1);
}
/* ==========================================================================
34. 호버 시 .stat-item 더 강조 (포스트잇 떠오름)
========================================================================== */
.stat-item {
transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}
.stat-item:hover {
box-shadow: 2px 5px 10px rgba(31, 28, 20, 0.14);
transform: rotate(0) translateY(-3px);
z-index: 2;
}
/* ==========================================================================
35. 모바일 보강
========================================================================== */
@media (max-width: 768px) {
body::before {
opacity: 0.2;
}
.stamp-pop {
font-size: 0.85rem;
padding: 5px 12px;
}
.key-hint {
bottom: 70px;
font-size: 0.72rem;
}
}
/* ==========================================================================
36. reduce-motion 사용자 배려
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.stamp-pop {
display: none !important;
}
.fi {
animation: none !important;
}
}
/* ==========================================================================
37. 태블릿 최적화 (769px ~ 1024px) — Issue #16
========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
.skills-grid {
grid-template-columns: repeat(2, 1fr);
}
.projects-grid {
grid-template-columns: repeat(2, 1fr);
}
.awards-grid {
grid-template-columns: repeat(2, 1fr);
}
.hero-name {
font-size: clamp(2.2rem, 5vw, 3.6rem);
}
.fi-1, .fi-5 {
left: 3%;
}
.fi-2, .fi-4 {
right: 6%;
}
.detail-grid {
grid-template-columns: 1fr 280px;
gap: 24px;
}
}
/* ==========================================================================
38. GPU 가속 힌트 — 주요 애니메이션 요소
========================================================================== */
.fi,
.progress-bar,
#btn-back-to-top {
will-change: transform;
}
.scroll-line {
will-change: transform, opacity;
}
/* ==========================================================================
39. 견출지 (Index Tab) 디자인 — Issue #17
세션 헤더 section-tag를 견출지 형태로 강화
========================================================================== */
.section-tag {
position: relative;
background: var(--card);
border: 1.5px solid var(--line);
border-radius: 3px 3px 0 0;
padding: 4px 16px 6px 10px;
display: inline-block;
box-shadow: 1px -2px 4px rgba(31, 28, 20, 0.07);
margin-bottom: 8px;
}
/* 아래 경계선과 자연스럽게 연결 */
.section-tag::after {
content: "";
position: absolute;
bottom: -2px;
left: -1px;
right: -1px;
height: 2px;
background: var(--paper);
}
/* 섹션마다 다른 견출지 색 */
#home .section-tag { border-color: var(--red); color: var(--red); }
#about .section-tag { border-color: var(--cyan); color: var(--cyan); }
#skills .section-tag { border-color: var(--gold); color: var(--gold); }
#awards .section-tag { border-color: var(--bronze); color: var(--bronze); }
#projects .section-tag { border-color: var(--red); color: var(--red); }
/* section-header 아래 가로 밑줄 (노트 페이지 구분선처럼) */
.section-header {
border-bottom: 1.5px solid var(--line);
padding-bottom: 20px;
}
/* ==========================================================================
40. 포스트잇 스티커 fold 모서리 효과 — stat-item
========================================================================== */
.stat-item {
position: relative;
overflow: hidden;
}
.stat-item::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 12px 12px;
border-color: transparent transparent rgba(31,28,20,0.12) transparent;
}
/* ==========================================================================
41. 메모지 스타일 card 변형 — about-card 헤더 라인 강화
========================================================================== */
.about-card {
border-top: 3px solid var(--cyan);
}
.skill-card:nth-child(4n+1) { border-top: 3px solid var(--red); }
.skill-card:nth-child(4n+2) { border-top: 3px solid var(--cyan); }
.skill-card:nth-child(4n+3) { border-top: 3px solid var(--gold); }
.skill-card:nth-child(4n+4) { border-top: 3px solid var(--bronze); }
/* ==========================================================================
42. 견출지 — 프로젝트 카드 상단 컬러 탭 (카드별 5색 순환)
========================================================================== */
.project-card::after {
content: "";
position: absolute;
top: 0;
left: 64px;
right: 0;
height: 3px;
border-radius: 0 var(--radius) 0 0;
}
.project-card:nth-child(5n+1)::after { background: var(--red); }
.project-card:nth-child(5n+2)::after { background: var(--cyan); }
.project-card:nth-child(5n+3)::after { background: var(--gold); }
.project-card:nth-child(5n+4)::after { background: var(--bronze); }
.project-card:nth-child(5n+5)::after { background: var(--ink); opacity: 0.4; }
/* ==========================================================================
43. 프로젝트 카드 넘버링 — 메모지 우측 하단 (Issue #20)
========================================================================== */
/* #projects 섹션 기준으로 카운터 1회 초기화 → 연도 그룹 구분 없이 전체 통합 번호 (#20) */
#projects { counter-reset: pcard; }
.project-card { counter-increment: pcard; }
.project-num {
position: absolute;
right: 16px;
bottom: 9px;
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--red);
opacity: 0.5;
z-index: 2;
pointer-events: none;
}
/* p.01, p.02 ... 형식 */
.project-num::before { content: "p." counter(pcard, decimal-leading-zero); }
/* ==========================================================================
44. 나의 역할 — 직책 배지 (Issue #22)
========================================================================== */
.role-position {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 0.9rem;
font-weight: 700;
color: var(--ink);
background: var(--red-soft);
border: 1px dashed var(--red-margin);
border-radius: 3px;
padding: 7px 14px;
margin: 4px 0 14px;
}
.role-position i { color: var(--red); }
/* ==========================================================================
45. 소형 모바일(~480px) 추가 보정 — Issue #16
========================================================================== */
@media (max-width: 480px) {
.container {
padding: 0 16px;
}
.hero-btns {
flex-direction: column;
gap: 10px;
}
.btn {
width: 100%;
justify-content: center;
}
.hero-stats {
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
.stat-item {
min-width: calc(50% - 5px);
flex: 1 1 calc(50% - 5px);
}
.section {
padding: 52px 0;
}
.about-card,
.skill-card,
.award-card,
.project-card {
padding: 28px 16px 18px 44px;
background-position:
10px -6px,
38px 0,
0 0, 0 0, 0 0, 0 0;
}
.project-wip {
background-position:
10px -6px,
38px 0,
0 0, 0 0, 0 0, 0 0, 0 0;
}
.project-card::after {
left: 44px;
}
.skills-grid,
.projects-grid {
grid-template-columns: 1fr;
}
.awards-grid {
grid-template-columns: 1fr;
}
.section-header::after {
display: none;
}
.fi {
width: 52px;
height: 52px;
font-size: 1.6rem;
}
}
/* ==========================================================================
46. 프로젝트 섹션 개편 — 대표작 / 필터 / 연도별 / 서브제목 (Issues #28~#32)
========================================================================== */
/* 서브 섹션 라벨 */
.subsection-label {
font-family: var(--font-mono);
font-size: 0.95rem;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.04em;
margin: 34px 0 16px;
display: flex;
align-items: center;
gap: 9px;
}
.subsection-label i { color: var(--red); }
/* --- 대표 프로젝트 (Featured) --- */
.featured-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 22px;
}
.featured-card {
position: relative;
display: flex;
flex-direction: column;
gap: 11px;
background: var(--card);
border: 1px solid var(--line);
border-top: 3px solid var(--red);
border-radius: var(--radius);
padding: 24px 22px 20px;
box-shadow: var(--shadow-lift);
}
.featured-card::before {
content: "★";
position: absolute;
top: -11px;
right: 16px;
font-size: 0.78rem;
color: var(--gold);
background: var(--card);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(31, 28, 20, 0.22);
transform: rotate(-12deg);
}
.featured-top { display: flex; align-items: center; gap: 12px; }
.featured-icon { font-size: 1.7rem; color: var(--red); line-height: 1; }
.featured-badge {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.04em;
color: var(--ink);
background: var(--tape);
padding: 3px 10px;
border-radius: 1px;
transform: rotate(-1.5deg);
}
.featured-title { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.featured-detail { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.featured-detail dt {
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 700;
color: var(--red);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 5px;
}
.featured-detail dd { font-size: 0.86rem; line-height: 1.65; color: var(--ink); }
.fd-role {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--text-muted);
margin-left: 6px;
}
.featured-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.flink {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.76rem;
padding: 6px 13px;
border-radius: 2px;
border: 1.5px solid var(--line);
background: var(--paper-2);
color: var(--ink);
transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
}
.flink:hover { transform: translateY(-2px); border-color: var(--ink); }
.flink-primary { border-color: var(--red-margin); color: var(--red); }
.flink-primary:hover { background: var(--red); color: var(--card); border-color: var(--red); }
/* --- 카테고리 필터 바 --- */
.project-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 4px 0 28px;
}
.pfilter {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text-muted);
background: var(--card);
border: 1.5px dashed var(--line);
border-radius: 2px;
padding: 7px 14px;
cursor: pointer;
transition: transform 0.15s, background 0.2s, color 0.2s, border-color 0.2s;
}
.pfilter:hover { transform: translateY(-1px); color: var(--ink); border-color: var(--red-margin); }
.pfilter.active {
background: var(--red);
color: var(--card);
border-style: solid;
border-color: var(--red);
box-shadow: 1px 2px 5px rgba(198, 59, 59, 0.25);
}
/* --- 연도별 그룹 --- */
.year-group { margin-bottom: 34px; }
.year-heading {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-size: 1.15rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 18px;
}
.year-heading::before {
content: "";
width: 13px;
height: 13px;
background: radial-gradient(circle at 35% 32%, #ff8a8a 0%, var(--red) 55%, #6e1a1a 100%);
border-radius: 50%;
box-shadow: 0 2px 4px rgba(31, 28, 20, 0.25);
flex-shrink: 0;
}
.year-heading::after {
content: "";
flex: 1;
border-top: 1px dashed var(--red-margin);
}
.year-group-wip .year-heading { color: var(--bronze); }
.year-group-wip .year-heading::before {
background: var(--tape-solid);
}
.year-group-wip .year-heading::after { border-top-color: var(--line); }
/* 실패한 프로젝트 — 기본 접힘(collapsible) 토글 헤더 (미니멀 지향) */
.year-group-failed .failed-toggle {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
margin-bottom: 18px;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: inherit;
text-align: left;
font: inherit;
}
.year-group-failed .failed-toggle .year-heading {
flex: 1;
margin-bottom: 0;
}
.failed-toggle-icon {
flex-shrink: 0;
color: var(--red);
font-size: 0.95rem;
transition: transform 0.25s ease;
}
.failed-toggle[aria-expanded="true"] .failed-toggle-icon {
transform: rotate(180deg);
}
.year-group-failed .failed-toggle:hover .failed-toggle-icon {
transform: translateY(2px);
}
.year-group-failed .failed-toggle[aria-expanded="true"]:hover .failed-toggle-icon {
transform: rotate(180deg) translateY(2px);
}
/* 접힘 상태 — 카드 그리드 숨김 */
.failed-grid.is-collapsed {
display: none;
}
/* --- 프로젝트 카드 서브제목 (#31) --- */
.project-subtitle {
font-family: var(--font-hand);
font-size: 1.05rem;
line-height: 1.3;
color: var(--red);
margin-top: -6px;
flex: none !important;
}
/* --- 푸터 이메일 텍스트 + 복사 (#30) --- */
.footer .social-links { align-items: center; }
.contact-email {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--ink);
background: var(--card);
border: 1px dashed var(--line);
border-radius: 2px;
padding: 8px 12px;
cursor: pointer;
transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.contact-email i { color: var(--red); }
.contact-email:hover { color: var(--red); border-color: var(--red-margin); }
.contact-email .copy-hint {
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--text-muted);
border-left: 1px dashed var(--line);
padding-left: 8px;
}
.contact-email.copied { border-color: var(--cyan); color: var(--cyan); }
.contact-email.copied i { color: var(--cyan); }
.contact-email.copied .copy-hint { color: var(--cyan); }
/* --- 총 프로젝트 수 배지 (#20) — subsection-label 안에 인라인으로 표시 --- */
.project-count-badge {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--red);
background: var(--red-soft);
border: 1px dashed var(--red-margin);
border-radius: 2px;
padding: 2px 10px;
margin-left: 10px;
vertical-align: middle;
}
/* --- 반응형 보정 --- */
@media (max-width: 600px) {
.featured-grid { gap: 18px; }
.featured-card { padding: 22px 16px 18px; }
.fd-role { display: block; margin-left: 0; margin-top: 2px; }
.project-filters { gap: 6px; }
.pfilter { font-size: 0.72rem; padding: 6px 10px; }
.year-heading { font-size: 1.02rem; }
.project-count-badge { font-size: 0.66rem; padding: 2px 8px; }
}
/* ==========================================================================
26. GitHub 활동 카드 (#5) — Stats(랭크)+Streak 양옆 / 상세 메트릭 하단
========================================================================== */
.github-activity {
margin-top: 40px;
text-align: center;
}
/* 카드 컨테이너: 상단 행(양옆) + 하단 메트릭을 세로로 쌓음 */
.github-cards {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
/* 상단 행: Stats(랭크) + Streak 양옆 배치, 좁은 화면에선 줄바꿈 */
.gh-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 20px;
width: 100%;
}
.gh-card {
max-width: 100%;
height: auto;
border: 1.5px solid var(--line);
border-radius: 8px;
background: var(--card);
box-shadow: var(--shadow-soft);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gh-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
/* Stats/Streak: 480px 고정, filter 없이 원본 SVG 그대로 표시 */
.gh-card-stats { width: 480px; border-radius: 8px; }
.gh-card-streak { width: 480px; }
.gh-card-metrics { width: 100%; max-width: 480px; }
/* ==========================================================================
27. 자격증 (#39) — 수상 섹션 하위 블록
========================================================================== */
.cert-block { margin-top: 44px; }
.cert-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}
.cert-card {
display: flex;
align-items: center;
gap: 16px;
background: var(--card);
border: 1.5px solid var(--line);
border-radius: var(--radius);
padding: 18px 20px;
box-shadow: var(--shadow-soft);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cert-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.cert-icon {
font-size: 26px;
color: var(--red);
flex-shrink: 0;
}
.cert-info h3 {
margin: 0 0 4px;
font-size: 1rem;
}
.cert-desc {
margin: 0;
color: var(--text-muted);
font-size: 0.85rem;
}
/* ==========================================================================
28. 🐔 치킨 모드 이스터에그 (#38) — 글리치 없는 닭 비 + 되돌리기 버튼
========================================================================== */
.chicken-drop {
position: fixed;
top: -8vh;
z-index: 9998;
pointer-events: none;
user-select: none;
will-change: transform, opacity;
animation-name: chicken-fall;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes chicken-fall {
0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { transform: translate(var(--sway, 0), 116vh) rotate(360deg); opacity: 0.9; }
}
.egg-toast {
position: fixed;
top: 84px;
left: 50%;
transform: translateX(-50%) translateY(-12px);
z-index: 9999;
background: var(--card);
color: var(--ink);
border: 2px solid var(--ink);
border-radius: 8px;
padding: 12px 20px;
font-family: var(--font-main);
font-weight: 700;
box-shadow: 4px 4px 0 var(--red);
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease,
transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.egg-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.egg-rollback {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--ink);
color: var(--paper);
border: 2px solid var(--ink);
border-radius: 8px;
padding: 11px 18px;
font-family: var(--font-main);
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
box-shadow: 3px 3px 0 var(--red);
opacity: 0;
transform: translateY(12px);
transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.12s ease;
}
.egg-rollback.show { opacity: 1; transform: translateY(0); }
.egg-rollback:hover {
transform: translateY(-1px);
box-shadow: 5px 5px 0 var(--red);
}
.egg-rollback:active {
transform: translateY(2px);
box-shadow: 1px 1px 0 var(--red);
}
@media (prefers-reduced-motion: reduce) {
.chicken-drop { animation-duration: 7s !important; }
}
/* ==========================================================================
50. MBTI 차트 (#62)
========================================================================== */
/* MBTI 섹션 — 컴팩트 (#62) */
.mbti-block {
margin-top: 20px;
}
.mbti-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 14px 18px;
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
max-width: 420px;
}
.mbti-card::before {
content: 'ENTJ';
position: absolute;
right: -2px;
bottom: -8px;
font-family: var(--font-mono);
font-size: 3rem;
font-weight: 900;
color: rgba(198, 59, 59, 0.05);
line-height: 1;
pointer-events: none;
}
.mbti-type {
font-family: var(--font-mono);
font-size: 1rem;
font-weight: 900;
color: var(--red);
text-align: center;
margin-bottom: 10px;
letter-spacing: 0.2em;
}
.mbti-bars {
display: flex;
flex-direction: column;
gap: 5px;
}
.mbti-row {
display: flex;
align-items: center;
gap: 8px;
}
.mbti-label {
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--ink);
min-width: 50px;
white-space: nowrap;
}
.mbti-left {
text-align: right;
}
.mbti-right {
text-align: left;
color: var(--text-muted);
}
.mbti-dim {
font-size: 0.82rem;
font-weight: 900;
font-style: normal;
}
.mbti-right .mbti-dim {
font-size: 0.68rem;
font-weight: 500;
}
.mbti-pct {
font-weight: 400;
color: var(--text-muted);
font-size: 0.58rem;
}
.mbti-left .mbti-pct {
color: var(--ink);
font-weight: 600;
}
.mbti-bar-track {
flex: 1;
height: 10px;
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: 3px;
position: relative;
overflow: hidden;
}
.mbti-bar-track::after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background: rgba(31, 28, 20, 0.18);
z-index: 1;
}
.mbti-bar-fill {
height: 100%;
border-radius: 3px 0 0 3px;
transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
width: 0%;
}
.mbti-row:nth-child(1) .mbti-bar-fill { background: linear-gradient(90deg, #2471a3, #5dade2); }
.mbti-row:nth-child(2) .mbti-bar-fill { background: linear-gradient(90deg, #6c3483, #a569bd); }
.mbti-row:nth-child(3) .mbti-bar-fill { background: linear-gradient(90deg, var(--bronze), #d4853a); }
.mbti-row:nth-child(4) .mbti-bar-fill { background: linear-gradient(90deg, var(--red), #e05050); }
.mbti-row:nth-child(5) .mbti-bar-fill { background: linear-gradient(90deg, #1a7a4a, #27ae60); }
.mbti-bar-fill.animated {
width: attr(data-pct %) !important;
}
/* ==========================================================================
51. 프로젝트 진행률 바 (#61)
========================================================================== */
.progress-bar-wrap {
width: 100%;
height: 18px;
background: var(--paper-2);
border: 1px dashed var(--line);
border-radius: 2px;
position: relative;
overflow: hidden;
margin-top: 4px;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold), #d4a825);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 6px;
transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
width: 0%;
min-width: fit-content;
}
.progress-text {
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 700;
color: var(--ink);
white-space: nowrap;
}
.progress-fill[data-progress="0"] {
background: var(--line);
min-width: 28px;
}
/* ==========================================================================
52. 실패한 프로젝트 (#60)
========================================================================== */
.project-failed {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(var(--red-margin), var(--red-margin)),
radial-gradient(circle 5px at 22px 44px, var(--paper-2) 99%, transparent 100%),
radial-gradient(circle 5px at 22px 50%, var(--paper-2) 99%, transparent 100%),
radial-gradient(circle 5px at 22px calc(100% - 44px), var(--paper-2) 99%, transparent 100%),
repeating-linear-gradient(135deg, transparent 0 12px, rgba(198, 59, 59, 0.05) 12px 24px),
repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px);
background-position:
18px -6px,
56px 0,
0 0,
0 0,
0 0,
0 0,
0 0;
background-size:
90px 28px,
1px 100%,
auto, auto, auto,
auto, 100% auto;
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat,
repeat-y;
opacity: 0.85;
}
.project-failed:hover {
opacity: 1;
}
.failed-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.7rem;
padding: 4px 12px;
background: var(--red);
color: var(--card);
letter-spacing: 0.04em;
transform: rotate(-2deg);
box-shadow: 1px 2px 4px rgba(31, 28, 20, 0.12);
align-self: flex-start;
border-radius: 1px;
}
.failed-reason {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--red);
padding: 6px 10px;
background: rgba(198, 59, 59, 0.08);
border-left: 3px solid var(--red);
border-radius: 0 2px 2px 0;
margin-top: 4px;
}
.failed-reason i {
margin-right: 6px;
}
/* ==========================================================================
53. 프로젝트 마인드맵 (#58) — 선 연결 트리 형태
========================================================================== */
.mindmap-block {
margin-bottom: 36px;
}
.mindmap-container {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 36px 20px 32px;
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
position: relative;
overflow: hidden;
background-image: repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px);
}
/* 중앙 노드 */
.mindmap-center {
font-family: var(--font-mono);
font-size: 1.1rem;
font-weight: 700;
color: var(--card);
background: var(--red);
padding: 12px 28px;
border-radius: 999px;
box-shadow: 0 4px 12px rgba(198, 59, 59, 0.3);
position: relative;
z-index: 2;
}
/* 모바일: 중앙→branches-wrap 수직 연결 */
.mindmap-center::after {
content: '';
position: absolute;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 16px;
background: var(--red);
}
/* 브랜치 래퍼 — 모바일: 세로 트리, 카테고리별 색상 선 */
.mindmap-branches-wrap {
display: flex;
flex-direction: column;
align-self: stretch;
border-left: none;
margin-top: 16px;
padding-left: 0;
gap: 12px;
}
/* 각 브랜치 — 모바일: 카테고리별 색상 왼쪽 선 */
.mindmap-branch {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
gap: 6px;
min-width: 0;
border-left: 2.5px solid;
padding-left: 14px;
}
.mindmap-ai { border-left-color: var(--cyan); }
.mindmap-hw { border-left-color: var(--bronze); }
.mindmap-web { border-left-color: var(--gold); }
.mindmap-discord { border-left-color: #5865F2; }
.mindmap-contest { border-left-color: var(--red); }
/* 카테고리 노드 뱃지 — 그림자와 둥근 모서리 (#58) */
.mindmap-cat {
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 700;
color: var(--card);
padding: 5px 14px;
border-radius: 6px;
white-space: nowrap;
position: relative;
z-index: 1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.mindmap-ai .mindmap-cat { background: var(--cyan); }
.mindmap-hw .mindmap-cat { background: var(--bronze); }
.mindmap-web .mindmap-cat { background: var(--gold); }
.mindmap-discord .mindmap-cat { background: #5865F2; }
.mindmap-contest .mindmap-cat { background: var(--red); }
/* 잎 목록 — 모바일: 가로 줄바꿈 */
.mindmap-leaves {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 5px;
border-top: 1px dashed var(--line);
padding-top: 6px;
}
/* 잎 노드 — 카테고리별 왼쪽 색상 보더 (#58) */
.mindmap-leaf {
font-family: var(--font-mono);
font-size: 0.68rem;
padding: 3px 10px;
background: var(--paper-2);
border: 1px dashed var(--line);
border-radius: 3px;
color: var(--ink);
transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.mindmap-ai .mindmap-leaf { border-left: 2px solid var(--cyan); }
.mindmap-hw .mindmap-leaf { border-left: 2px solid var(--bronze); }
.mindmap-web .mindmap-leaf { border-left: 2px solid var(--gold); }
.mindmap-discord .mindmap-leaf { border-left: 2px solid #5865F2; }
.mindmap-contest .mindmap-leaf { border-left: 2px solid var(--red); }
.mindmap-leaf:hover {
background: var(--card);
box-shadow: var(--shadow-soft);
}
/* ── 데스크톱: 가로 트리 + 선 연결 ─────────────────────────── */
@media (min-width: 769px) {
.mindmap-container {
padding: 44px 28px 36px;
}
/* 중앙 → 가로 크로스바로 이어지는 수직 줄기 */
.mindmap-center::after {
bottom: -28px;
height: 28px;
}
/* 브랜치 래퍼: 가로 배치, 카테고리별 색상 크로스바 (#58) */
.mindmap-branches-wrap {
flex-direction: row;
align-items: flex-start;
border-left: none;
border-top: 2.5px solid;
border-image: linear-gradient(to right, var(--cyan) 0% 20%, var(--bronze) 20% 40%, var(--gold) 40% 60%, #5865F2 60% 80%, var(--red) 80% 100%) 1;
margin-top: 28px;
padding-left: 0;
gap: 2px;
}
/* 각 브랜치: 세로 컬럼, 상단 수직 연결선 + 접합 원형 도트 (#58) */
.mindmap-branch {
flex: 1;
flex-direction: column;
align-items: center;
padding-top: 30px;
gap: 0;
border-left: none;
padding-left: 0;
}
.mindmap-branch::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2.5px;
height: 30px;
border-radius: 2px;
}
/* 접합 도트 — 크로스바 위 */
.mindmap-branch::after {
content: '';
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
z-index: 2;
}
.mindmap-ai::after { background: var(--cyan); }
.mindmap-hw::after { background: var(--bronze); }
.mindmap-web::after { background: var(--gold); }
.mindmap-discord::after { background: #5865F2; }
.mindmap-contest::after { background: var(--red); }
.mindmap-ai::before { background: var(--cyan); }
.mindmap-hw::before { background: var(--bronze); }
.mindmap-web::before { background: var(--gold); }
.mindmap-discord::before { background: #5865F2; }
.mindmap-contest::before { background: var(--red); }
/* 잎 목록: 세로 스택, 카테고리 색상 왼쪽 가지선 (#58) */
.mindmap-leaves {
flex-direction: column;
flex-wrap: nowrap;
border-top: none;
border-left: 1.5px dashed rgba(31, 28, 20, 0.2);
padding-top: 0;
padding-left: 12px;
margin-top: 10px;
align-self: stretch;
gap: 4px;
}
.mindmap-ai .mindmap-leaves { border-left-color: rgba(26, 188, 156, 0.4); }
.mindmap-hw .mindmap-leaves { border-left-color: rgba(205, 127, 50, 0.4); }
.mindmap-web .mindmap-leaves { border-left-color: rgba(218, 165, 32, 0.4); }
.mindmap-discord .mindmap-leaves { border-left-color: rgba(88, 101, 242, 0.4); }
.mindmap-contest .mindmap-leaves { border-left-color: rgba(198, 59, 59, 0.4); }
.mindmap-leaf {
width: 100%;
position: relative;
padding: 3px 8px 3px 10px;
}
.mindmap-leaf::before {
content: '';
position: absolute;
left: -12px;
top: 50%;
width: 8px;
height: 1.5px;
border-radius: 1px;
}
.mindmap-ai .mindmap-leaf::before { background: rgba(26, 188, 156, 0.5); }
.mindmap-hw .mindmap-leaf::before { background: rgba(205, 127, 50, 0.5); }
.mindmap-web .mindmap-leaf::before { background: rgba(218, 165, 32, 0.5); }
.mindmap-discord .mindmap-leaf::before { background: rgba(88, 101, 242, 0.5); }
.mindmap-contest .mindmap-leaf::before { background: rgba(198, 59, 59, 0.5); }
.mindmap-leaf:hover {
transform: translateX(3px);
}
}
/* ==========================================================================
54. 다크 모드 (#68) — data-theme="dark" 시 CSS 변수 오버라이드
========================================================================== */
[data-theme="dark"] {
--paper: #1a1a2e;
--paper-2: #16213e;
--card: #1f2937;
--ink: #e5e5e5;
--text-muted: #9ca3af;
--red: #e05050;
--red-soft: rgba(224, 80, 80, 0.18);
--red-margin: rgba(224, 80, 80, 0.35);
--cyan: #4dd0c8;
--gold: #d4a825;
--bronze: #d4853a;
--tape: rgba(212, 168, 37, 0.35);
--tape-solid: #b5922a;
--line: rgba(229, 229, 229, 0.15);
--rule: rgba(229, 229, 229, 0.06);
--postit: #2d2a1f;
--shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.25);
--shadow-lift: 0 12px 28px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] body {
background-image:
radial-gradient(circle at 18% 22%, rgba(224, 80, 80, 0.04), transparent 40%),
radial-gradient(circle at 82% 78%, rgba(77, 208, 200, 0.03), transparent 45%);
}
[data-theme="dark"] body::before {
opacity: 0.08;
}
[data-theme="dark"] .hero {
background: var(--paper);
}
[data-theme="dark"] .navbar {
background: var(--paper);
border-bottom-color: var(--line);
}
[data-theme="dark"] .stat-item:nth-child(3) {
background: #332d1a;
}
[data-theme="dark"] .stat-item:nth-child(5) {
background: #1a2e30;
}
[data-theme="dark"] .chip:nth-child(2n) {
background: #1a2e30;
}
[data-theme="dark"] .chip:nth-child(3n) {
background: #332d1a;
}
[data-theme="dark"] .btn-primary {
box-shadow: 0 4px 0 #6e1a1a;
}
[data-theme="dark"] .btn-primary:hover {
box-shadow: 0 5px 0 #6e1a1a;
}
[data-theme="dark"] .btn-ghost {
background: var(--card);
border-color: var(--red-margin);
}
[data-theme="dark"] .gh-card {
filter: brightness(0.85) contrast(1.1);
}
[data-theme="dark"] .about-edu {
border-left-color: #d4853a;
}
[data-theme="dark"] .section-tag::after {
background: var(--paper);
}
[data-theme="dark"] .mobile-menu {
background: var(--paper);
border-left-color: var(--line);
}
[data-theme="dark"] .sidebar-overlay {
background: rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .progress-fill[data-progress="0"] {
background: var(--line);
}
[data-theme="dark"] html {
scrollbar-color: var(--red) var(--paper-2);
}
/* ==========================================================================
55. 유틸리티 버튼 — 언어 전환(#67) + 다크 모드(#68) 토글
========================================================================== */
.nav-utils {
display: flex;
align-items: center;
gap: 6px;
margin-left: 8px;
}
.nav-util-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--card);
border: 1.5px solid var(--line);
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 700;
cursor: pointer;
transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}
.nav-util-btn:hover {
color: var(--red);
border-color: var(--red-margin);
transform: translateY(-1px);
}
.nav-util-btn .lang-label {
font-size: 0.68rem;
letter-spacing: 0.02em;
}
.nav-util-btn i {
font-size: 0.85rem;
}
/* 사이드바(모바일) 유틸리티 */
.sidebar-utils {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px dashed var(--line);
}
.sidebar-util-btn {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--ink);
padding: 12px 16px;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
background: none;
border: none;
}
.sidebar-util-btn:hover {
background: rgba(198, 59, 59, 0.06);
color: var(--red);
}
.sidebar-util-btn i {
width: 18px;
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
transition: color 0.2s;
}
.sidebar-util-btn:hover i {
color: var(--red);
}
/* ==========================================================================
56. 섹션 네비게이터 — 책갈피 스타일 (#72)
========================================================================== */
.section-nav {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 900;
display: flex;
flex-direction: column;
gap: 2px;
}
.section-nav-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px 6px 14px;
background: var(--card);
border: 1px solid var(--line);
border-right: none;
border-radius: 6px 0 0 6px;
box-shadow: -2px 2px 8px rgba(31, 28, 20, 0.08);
cursor: pointer;
text-decoration: none;
color: var(--ink);
white-space: nowrap;
transform: translateX(calc(100% - 16px));
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background 0.2s,
border-color 0.2s,
box-shadow 0.2s;
}
.nav-bookmark-label {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.02em;
opacity: 0;
transition: opacity 0.2s;
}
.nav-bookmark-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-muted);
flex-shrink: 0;
transition: background 0.2s, box-shadow 0.2s;
}
/* 호버 시 전체 네비게이터 펼침 */
.section-nav:hover .section-nav-item {
transform: translateX(0);
}
.section-nav:hover .nav-bookmark-label {
opacity: 1;
}
/* 활성 섹션 — 주황색(빨간) 포인트 */
.section-nav-item.active {
background: var(--red-soft);
border-color: var(--red);
box-shadow: -2px 2px 10px rgba(198, 59, 59, 0.15);
}
.section-nav-item.active .nav-bookmark-dot {
background: var(--red);
box-shadow: 0 0 6px rgba(198, 59, 59, 0.4);
}
.section-nav-item.active .nav-bookmark-label {
color: var(--red);
font-weight: 700;
}
/* 하위 섹션 항목 — 들여쓰기 */
.section-nav-item.nav-sub {
padding-left: 18px;
}
.section-nav-item.nav-sub .nav-bookmark-dot {
width: 6px;
height: 6px;
}
.section-nav-item.nav-sub .nav-bookmark-label {
font-size: 0.62rem;
}
/* 섹션별 dot 컬러 */
.section-nav-item[data-nav-section="home"] .nav-bookmark-dot { background: var(--red); }
.section-nav-item[data-nav-section="about"] .nav-bookmark-dot { background: var(--cyan); }
.section-nav-item[data-nav-section="mbti-section"] .nav-bookmark-dot { background: var(--cyan); }
.section-nav-item[data-nav-section="github-section"] .nav-bookmark-dot { background: var(--cyan); }
.section-nav-item[data-nav-section="skills"] .nav-bookmark-dot { background: var(--gold); }
.section-nav-item[data-nav-section="awards"] .nav-bookmark-dot { background: var(--bronze); }
.section-nav-item[data-nav-section="cert-section"] .nav-bookmark-dot { background: var(--bronze); }
.section-nav-item[data-nav-section="featured-section"] .nav-bookmark-dot { background: var(--red); }
.section-nav-item[data-nav-section="mindmap-section"] .nav-bookmark-dot { background: var(--red); }
.section-nav-item[data-nav-section="all-projects-section"] .nav-bookmark-dot { background: var(--red); }
.section-nav-item.active .nav-bookmark-dot { background: var(--red) !important; }
/* 모바일: 하단 도트 네비게이션 */
@media (max-width: 768px) {
.section-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: auto;
transform: none;
flex-direction: row;
justify-content: center;
gap: 0;
z-index: 900;
background: var(--card);
border-top: 1px solid var(--line);
box-shadow: 0 -2px 8px rgba(31, 28, 20, 0.08);
padding: 6px 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.section-nav-item {
transform: none;
border: none;
border-radius: 0;
box-shadow: none;
background: transparent;
padding: 4px 6px;
flex-direction: column;
gap: 3px;
min-width: 0;
flex-shrink: 0;
}
.section-nav-item.nav-sub {
padding-left: 6px;
}
.nav-bookmark-label {
font-size: 0.5rem;
opacity: 1;
max-width: 48px;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.section-nav-item.nav-sub .nav-bookmark-label {
font-size: 0.48rem;
}
.nav-bookmark-dot {
width: 6px;
height: 6px;
order: -1;
}
.section-nav:hover .section-nav-item {
transform: none;
}
.section-nav-item.active {
background: var(--red-soft);
border-radius: 6px;
}
body {
padding-bottom: 52px;
}
}
/* ==========================================================================
57. MBTI 2컬럼 레이아웃 + 성격 특성 카드 (#62)
========================================================================== */
.mbti-layout {
display: flex;
gap: 20px;
align-items: stretch;
justify-content: center;
}
.mbti-layout .mbti-card {
flex: 0 0 420px;
}
.mbti-traits {
flex: 1;
min-width: 0;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 20px;
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
position: relative;
overflow: hidden;
}
.mbti-traits::before {
content: 'ENTJ';
position: absolute;
right: -4px;
bottom: -10px;
font-family: var(--font-mono);
font-size: 4rem;
font-weight: 900;
color: rgba(198, 59, 59, 0.04);
line-height: 1;
pointer-events: none;
}
.mbti-traits-header {
font-family: var(--font-hand);
font-size: 1.4rem;
font-weight: 700;
color: var(--red);
line-height: 1.2;
}
.mbti-traits-sub {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mbti-traits-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.mbti-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 0.72rem;
padding: 5px 10px;
background: var(--paper-2);
border: 1px dashed var(--line);
border-radius: 3px;
color: var(--ink);
transition: transform 0.15s, background 0.15s;
}
.mbti-tag i {
font-size: 0.68rem;
color: var(--red);
}
.mbti-tag:hover {
transform: translateY(-1px);
background: var(--red-soft);
}
@media (max-width: 768px) {
.mbti-layout {
flex-direction: column;
}
.mbti-layout .mbti-card {
flex: none;
max-width: 100%;
}
}
/* ============================================================= */
/* 개발자도구 차단 오버레이 (#91) */
/* - 기본 숨김, .show 시 전체화면 표시 */
/* ============================================================= */
.devtools-block {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: var(--bg);
background: color-mix(in srgb, var(--bg) 96%, #000 4%);
}
.devtools-block.show {
display: flex;
}
.devtools-block-inner {
max-width: 480px;
width: 100%;
text-align: center;
background: var(--bg-card);
border: 2px solid var(--border);
border-radius: 16px;
padding: 40px 28px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}
.devtools-block-icon {
font-size: 2.6rem;
color: var(--accent);
margin-bottom: 14px;
}
.devtools-block-inner h2 {
margin: 0 0 10px;
font-size: 1.4rem;
color: var(--text);
}
.devtools-block-inner p {
margin: 0 0 22px;
color: var(--text-muted);
line-height: 1.6;
font-size: 0.96rem;
}
.devtools-block-reload {
display: inline-flex;
align-items: center;
gap: 8px;
}