@charset "utf-8";
/* ============================================================
   웹퍼블리셔 포트폴리오 — 스타일
   프레임워크 없이 CSS 커스텀 프로퍼티 + Grid 로 구성
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

/* ---------- 1. 토큰 ---------- */
:root {
	--bg: #ffffff;
	--bg-sub: #f6f6f5;
	--bg-card: #ffffff;
	--fg: #17171a;
	--fg-sub: #5f6067;
	--fg-mute: #8e9098;
	--line: #e4e4e3;
	--line-strong: #cfcfce;
	--accent: #1a4bff;
	--accent-soft: #eaefff;
	--warn: #a8620a;
	--warn-soft: #fdf3e4;

	--maxw: 1240px;
	--gap: 24px;
	--radius: 14px;
	--radius-sm: 6px;

	--font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
		'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;

	--ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #111113;
		--bg-sub: #17171a;
		--bg-card: #1b1b1f;
		--fg: #f2f2f3;
		--fg-sub: #a9abb3;
		--fg-mute: #7c7e86;
		--line: #2a2a2f;
		--line-strong: #3a3a41;
		--accent: #7f9dff;
		--accent-soft: #1d2440;
		--warn: #e8b263;
		--warn-soft: #2e2415;
	}
}

/* ---------- 2. 리셋 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: -0.01em;
	word-break: keep-all;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 3px;
}

.inner {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: 20px;
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 10px 16px;
	background: var(--accent);
	color: #fff;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- 3. 헤더 ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--line);
}
.site-header .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 62px;
}
.logo {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.logo span {
	color: var(--fg-mute);
	font-weight: 500;
	margin-left: 2px;
}
.site-header nav {
	display: flex;
	gap: 20px;
	font-size: 14px;
	color: var(--fg-sub);
}
.site-header nav a:hover { color: var(--fg); }

/* ---------- 4. 히어로 ---------- */
.hero {
	padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 72px);
	border-bottom: 1px solid var(--line);
}
.hero__eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 18px;
}
.hero__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	font-size: clamp(34px, 5.6vw, 58px);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.035em;
	margin-bottom: 20px;
}
.hero__role {
	font-size: clamp(15px, 1.8vw, 19px);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--accent);
	padding-bottom: 4px;
}
.hero__lead {
	max-width: 46em;
	color: var(--fg-sub);
	font-size: clamp(15px, 1.5vw, 17px);
}


.tag-need {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--warn-soft);
	color: var(--warn);
	font-size: 12px;
	font-weight: 600;
	vertical-align: 1px;
}

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	margin-top: 44px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.stats > div {
	background: var(--bg);
	padding: 20px 22px;
}
.stats dt {
	font-size: 13px;
	color: var(--fg-mute);
	margin-bottom: 4px;
}
.stats dd {
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

/* ---------- 5. 작업물 ---------- */
.works { padding: clamp(48px, 7vw, 84px) 0; }
.works__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}
.works h2,
.about h2 {
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.filter {
	padding: 7px 15px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--fg-sub);
	font-size: 14px;
	cursor: pointer;
	transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.filter:hover { border-color: var(--fg-sub); color: var(--fg); }
.filter.is-on {
	background: var(--fg);
	border-color: var(--fg);
	color: var(--bg);
	font-weight: 600;
}

.works__count {
	font-size: 13px;
	color: var(--fg-mute);
	margin-bottom: 26px;
}
.works__empty {
	padding: 60px 0;
	text-align: center;
	color: var(--fg-mute);
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--gap);
}

/* ---------- 6. 카드 ---------- */
.card {
	display: flex;
	flex-direction: column;
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.card:hover,
.card:focus-within {
	transform: translateY(-3px);
	border-color: var(--line-strong);
	box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.5);
}

.card__thumb {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--bg-sub);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}
.card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.4s var(--ease);
}
.card:hover .card__thumb img { transform: scale(1.03); }

.card__no {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgb(0 0 0 / 0.62);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 18px 20px;
	flex: 1;
}
.card__title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.4;
}
.card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}
.card { position: relative; }

.card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--fg-sub);
}
.card__meta .dot { color: var(--line-strong); }

.badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: var(--bg-sub);
	color: var(--fg-sub);
	border: 1px solid var(--line);
}
.badge[data-type='PC'] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge[data-type='MO'] { background: #e9f6ed; color: #1d7a3f; border-color: transparent; }
.badge[data-type='ADMIN'] { background: #f3ecfb; color: #6b3fb0; border-color: transparent; }
.badge[data-type='반응형'] { background: #fdf0e9; color: #b0532a; border-color: transparent; }

@media (prefers-color-scheme: dark) {
	.badge[data-type='MO'] { background: #16301f; color: #7fd3a0; }
	.badge[data-type='ADMIN'] { background: #251b38; color: #bfa0f0; }
	.badge[data-type='반응형'] { background: #33211a; color: #eda57e; }
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: auto;
	padding-top: 4px;
}
.chip {
	padding: 2px 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font-size: 11px;
	color: var(--fg-mute);
	letter-spacing: 0.01em;
}

.card__note {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	background: var(--warn-soft);
	color: var(--warn);
	font-size: 12px;
	line-height: 1.55;
}

/* ---------- 7. 작업 방식 ---------- */
.about {
	padding: clamp(48px, 7vw, 84px) 0;
	background: var(--bg-sub);
	border-top: 1px solid var(--line);
}
.about__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--gap);
	margin-top: 28px;
}
.about article {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
}
.about h3 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 8px;
	letter-spacing: -0.02em;
}
.about p {
	font-size: 14px;
	color: var(--fg-sub);
	line-height: 1.75;
}

/* ---------- 8. 푸터 ---------- */
.site-footer {
	padding: 40px 0 56px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--fg-mute);
}
.site-footer__note { margin-top: 4px; }

/* ---------- 9. 반응형 ---------- */
@media (max-width: 640px) {
	.inner { padding-inline: 16px; }
	.grid { grid-template-columns: 1fr; }
	.works__head { align-items: flex-start; flex-direction: column; }
	.site-header nav { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	html { scroll-behavior: auto; }
}

/* 원본 미납품 자산 안내 */
.card__limit {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	font-size: 12px;
	line-height: 1.55;
	color: var(--fg-mute);
}
.card__limit span[aria-hidden] { flex: none; }

/* ============================================================
   10. 연락처 · 스킬 · 경력 · 학력 (이력서 기반 섹션)
   ============================================================ */

/* ---------- 연락처 ---------- */
.contact {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin-top: 22px;
	font-size: 15px;
}
.contact li {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.contact__k {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--fg-mute);
	text-transform: uppercase;
}
.contact a { border-bottom: 1px solid var(--line-strong); }
.contact a:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* ---------- 스킬 ---------- */
.skills {
	padding: clamp(44px, 6vw, 72px) 0;
	background: var(--bg-sub);
	border-bottom: 1px solid var(--line);
}
.skills h2 {
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 24px;
}
.skills__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: var(--gap);
}
.skill {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
}
.skill h3 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--fg-mute);
	margin-bottom: 12px;
}
.chip--lg {
	padding: 5px 11px;
	font-size: 13px;
	color: var(--fg);
	border-color: var(--line-strong);
	border-radius: 999px;
}
.skill .chips { gap: 7px; }

/* ---------- 경력 타임라인 ---------- */
.career { padding: clamp(48px, 7vw, 84px) 0; }
.career h2 {
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.career__note {
	font-size: 13px;
	color: var(--fg-mute);
}
.career__sub {
	margin: 52px 0 20px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.timeline {
	margin-top: 24px;
	border-top: 1px solid var(--line);
}
.tl {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 8px 28px;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
}
.timeline--compact .tl { padding: 16px 0; }

.tl__when {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tl__period {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
.tl__months {
	font-size: 12px;
	color: var(--fg-mute);
}

.tl__company {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
	margin-bottom: 4px;
}
.tl__tag {
	padding: 1px 7px;
	border-radius: var(--radius-sm);
	background: var(--bg-sub);
	border: 1px solid var(--line);
	font-size: 11px;
	font-weight: 500;
	color: var(--fg-mute);
}
.tl__project {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.45;
}
.tl__project--sm { font-size: 15px; }
.tl__detail {
	margin-top: 5px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--fg-sub);
}
.tl__contrib {
	margin-top: 5px;
	font-size: 13px;
	color: var(--fg-mute);
	font-variant-numeric: tabular-nums;
}
.tl__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.linked-badge {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s var(--ease);
}
a.linked-badge:hover { background: var(--accent); color: #fff; }

/* 경력에서 이동해 온 카드 강조 */
.card.is-target {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------- 학력 · 교육 · 자격증 ---------- */
.edu {
	padding: clamp(48px, 7vw, 84px) 0;
	background: var(--bg-sub);
	border-top: 1px solid var(--line);
}
.edu h2 {
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 28px;
}
.edu__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--gap);
}
.edu__grid > div {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
}
.edu h3 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--fg-mute);
	margin-bottom: 14px;
}
.listing li {
	display: grid;
	gap: 2px;
	padding: 12px 0;
	border-top: 1px solid var(--line);
}
.listing li:first-child { border-top: 0; padding-top: 0; }
.listing__when {
	font-size: 12px;
	color: var(--fg-mute);
	font-variant-numeric: tabular-nums;
}
.listing__name {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.listing__detail {
	font-size: 13px;
	color: var(--fg-sub);
	line-height: 1.6;
}

/* ---------- 반응형 ---------- */
@media (max-width: 720px) {
	.tl { grid-template-columns: 1fr; gap: 10px; }
	.tl__when { flex-direction: row; align-items: baseline; gap: 8px; }
	.contact { gap: 6px 18px; font-size: 14px; }
	.career__note { display: none; }
}