/* ==== KORVION 메인 — 토큰은 header.css :root (--kv-*) ==== */

#Home {
	font-family: var(--kv-font);
	color: var(--kv-ink);
	-webkit-font-smoothing: antialiased;
	word-break: keep-all;
	overflow-x: clip;
}
/* 기본 여백 지우기 — :where 로 0 특정도라 아래 규칙이 그대로 이긴다 */
:where(#Home) :where(h1, h2, h3, p) { margin: 0; }

/* ---- 공용: 섹션 머리 · 버튼 · 링크 ---- */
.kv-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 56px; }
.kv-sec-title {
	font-size: clamp(30px, 2.9vw, 60px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.035em;
}
.kv-sec-sub { font-size: 16px; line-height: 1.7; color: var(--kv-slate); }

.kv-btn {
	position: relative;
	box-sizing: border-box;   /* 모바일 width:100% 일 때 좌우 여백까지 폭 안에 — 없으면 화면 밖으로 밀려난다 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 28px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
	transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--kv-ease);
}
.kv-btn--primary { background: var(--kv-ink); color: #fff; }
.kv-btn--primary:hover { background: var(--kv-signal); }
.kv-btn--ghost { border: 1px solid var(--kv-line); color: var(--kv-ink); background: rgba(255, 255, 255, .6); }
.kv-btn--ghost:hover { border-color: var(--kv-ink); }
.kv-btn--signal { background: var(--kv-signal); color: #fff; height: 64px; padding: 0 36px; font-size: 17px; }
.kv-btn--signal:hover { background: #fff; color: var(--kv-ink); }

.kv-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 600;
	color: var(--kv-ink);
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .4s var(--kv-ease);
	padding-bottom: 2px;
}
.kv-link:hover { background-size: 100% 1px; }
.kv-link::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--kv-signal);
}

/* ---- 1. 첫 화면 ---- */
.kv-hero {
	position: relative;
	min-height: max(640px, 92vh);
	display: flex;
	align-items: center;
	padding: calc(var(--header-height) + 40px) 0 120px;
	background: var(--kv-paper);
	isolation: isolate;
}
.kv-hero__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.kv-hero__in { position: relative; }

.kv-hero__title {
	font-size: clamp(44px, 7.4vw, 152px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.055em;
	color: var(--kv-ink);
}
.kv-hero__title .kv-line { display: block; overflow: hidden; padding-bottom: .06em; }
.kv-hero__title .kv-line > span { display: inline-block; transform: translateY(110%); animation: kvRise 1s var(--kv-ease) forwards; }
.kv-hero__title .kv-line:nth-child(2) > span { animation-delay: .12s; }
@keyframes kvRise { to { transform: none; } }

/* 마침표 자리의 파란 점 — 글줄이 다 올라온 뒤 위에서 떨어져 자리에 앉는다 */
.kv-hero__dot {
	display: inline-block;
	width: .2em;
	height: .2em;
	margin-left: .06em;
	border-radius: 50%;
	background: var(--kv-signal);
	vertical-align: baseline;
	transform: translateY(-1.4em) scale(.2);
	opacity: 0;
	animation: kvDrop .9s cubic-bezier(.3, 1.6, .5, 1) .85s forwards;
}
@keyframes kvDrop {
	0%   { transform: translateY(-1.4em) scale(.2); opacity: 0; }
	40%  { opacity: 1; }
	100% { transform: none; opacity: 1; }
}

.kv-hero__lead {
	max-width: 34em;
	margin-top: 36px;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.75;
	color: var(--kv-slate);
	opacity: 0;
	animation: kvFade .8s ease 1.05s forwards;
}
.kv-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; opacity: 0; animation: kvFade .8s ease 1.2s forwards; }
@keyframes kvFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 아래로 — 점 하나가 선을 따라 내려간다 */
.kv-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 32px;
	width: 1px;
	height: 56px;
	background: var(--kv-line);
	overflow: hidden;
}
.kv-hero__scroll span {
	position: absolute;
	left: -2.5px;
	top: -6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--kv-signal);
	animation: kvScroll 2.2s var(--kv-ease) 1.6s infinite;
}
@keyframes kvScroll { 0% { top: -6px; } 70%, 100% { top: 56px; } }

/* ---- 2. 하는 일 ---- */
.kv-svc { padding: 160px 0; background: var(--kv-haze); }
.kv-svc__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: start; }

.kv-svc__list { position: relative; display: flex; flex-direction: column; border-top: 1px solid var(--kv-line); }
.kv-svc__tab {
	position: relative;
	display: block;
	width: 100%;
	padding: 30px 0 30px 36px;
	border-bottom: 1px solid var(--kv-line);
	background: none;
	font-family: var(--kv-font);
	font-size: clamp(24px, 2.2vw, 46px);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.2;
	text-align: left;
	color: #A3AABA;
	transition: color .35s, padding-left .45s var(--kv-ease);
}
.kv-svc__tab:hover { color: var(--kv-slate); }
.kv-svc__tab[aria-selected="true"] { color: var(--kv-ink); padding-left: 44px; }
/* 고른 줄 왼쪽의 파란 점 — js 가 top 을 옮긴다 */
.kv-svc__dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-radius: 50%;
	background: var(--kv-signal);
	transition: top .55s var(--kv-ease);
	pointer-events: none;
}

.kv-svc__panels { position: sticky; top: calc(var(--header-height) + 40px); }
.kv-svc__panel {
	min-height: 360px;
	padding: 52px 48px;
	background: var(--kv-paper);
	border-radius: 24px;
	box-sizing: border-box;
}
.kv-svc__panel.is-on { animation: kvPanel .5s var(--kv-ease); }
@keyframes kvPanel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.kv-svc__icon {
	width: 64px;
	height: 64px;
	fill: none;
	stroke: var(--kv-ink);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* 아이콘은 고를 때마다 선으로 다시 그려진다 */
.kv-svc__panel.is-on .kv-svc__icon * { stroke-dasharray: 260; stroke-dashoffset: 260; animation: kvDraw 1.1s var(--kv-ease) .1s forwards; }
@keyframes kvDraw { to { stroke-dashoffset: 0; } }
.kv-svc__name { margin-top: 32px; font-size: clamp(24px, 1.8vw, 32px); font-weight: 700; letter-spacing: -.03em; }
.kv-svc__desc { margin-top: 16px; font-size: 17px; line-height: 1.8; color: var(--kv-slate); }
.kv-svc__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.kv-svc__tags li {
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--kv-haze);
	font-size: 14px;
	font-weight: 500;
	color: var(--kv-ink);
}

/* ---- 3. 최근 작업 ---- */
/* 섹션 높이(작업 수만큼 길어짐)와 고정 위치(top)는 js 가 정한다. js 가 없으면 그냥 한 화면 */
.kv-work { position: relative; background: var(--kv-paper); }
.kv-work__pin {
	position: sticky;
	top: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: calc(var(--header-height) + 24px) 0 48px;
	box-sizing: border-box;
}
.kv-work__pin > .kv-wrap { width: 100%; }
.kv-work__head { margin-bottom: 40px; }
.kv-work__filter { display: flex; flex-wrap: wrap; gap: 8px; }
.kv-work__filter button {
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--kv-line);
	border-radius: 999px;
	background: transparent;
	font-family: var(--kv-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--kv-slate);
	transition: background-color .25s, color .25s, border-color .25s;
}
.kv-work__filter button span { font-family: var(--kv-font-num); font-weight: 500; margin-left: 4px; opacity: .6; }
.kv-work__filter button:hover { border-color: var(--kv-ink); color: var(--kv-ink); }
.kv-work__filter button.is-on { background: var(--kv-ink); border-color: var(--kv-ink); color: #fff; }

/* 무대 — 왼쪽 노트북, 오른쪽 설명 */
.kv-work__stage { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(40px, 5vw, 96px); align-items: center; }

/* ---- 노트북 ----
 * --open 0(닫힘) → 1(열림)은 js 가 스크롤에 맞춰 준다. 위에서 살짝 내려다보는 시점(perspective-origin 위쪽)이라
 * 본체 윗면(deck)이 사다리꼴로 보이고, 덮개는 경첩을 축으로 그 위에 누워 있다가(-90deg) 일어선다.
 * perspective 는 덮개 폭에 비례하도록 js 가 다시 잡는다(화면 크기와 상관없이 같은 각도로 보이게) */
.kv-laptop {
	--open: 1;
	position: relative;
	width: 100%;
	max-width: calc((100vh - 300px) * 1.75);
	margin: 0 auto;
	padding: 0 6% 11%;
	box-sizing: border-box;
	perspective: 2600px;
	perspective-origin: 50% 0%;
}
.kv-laptop__lid {
	position: relative;
	aspect-ratio: 16 / 10.2;
	transform-origin: 50% 100%;
	transform-style: preserve-3d;
	transform: rotateX(calc((1 - var(--open)) * -90deg));
	will-change: transform;
}
.kv-laptop__face, .kv-laptop__back {
	position: absolute;
	inset: 0;
	border-radius: 20px 20px 6px 6px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
/* 앞면 — 검은 테두리 안에 화면 */
.kv-laptop__face {
	padding: 2.4% 2.4% 3.4%;
	background: #14171F;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.kv-laptop__face::before {
	content: "";
	position: absolute;
	top: 1.1%;
	left: 50%;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: #2A2F3B;
}
/* 뒷면 — 닫혀 있을 때 보이는 알루미늄 덮개, 가운데 파란 점 */
.kv-laptop__back {
	transform: rotateX(180deg);
	background: linear-gradient(180deg, #E4E7EE 0%, #CDD2DC 100%);
	box-shadow: inset 0 0 0 1px rgba(14, 26, 61, .08);
	display: flex;
	align-items: center;
	justify-content: center;
}
.kv-laptop__back i { width: 16px; height: 16px; border-radius: 50%; background: var(--kv-signal); opacity: .9; }

/* 본체 윗면 — 덮개와 같은 크기의 판을 경첩에서 앞으로 눕힌다. 덮개보다 먼저 그려 덮개가 그 위에 얹힌다 */
.kv-laptop__deck {
	position: absolute;
	top: 0;
	left: 6%;
	right: 6%;
	aspect-ratio: 16 / 10.2;
	transform-origin: 50% 0;
	transform: translateY(calc(100% + 1px)) rotateX(90deg);
	transform-style: preserve-3d;
	border-radius: 6px 6px 18px 18px;
	background: linear-gradient(180deg, #CFD4DD 0%, #E3E6EC 100%);
}
/* 자판 자리와 터치패드 */
.kv-laptop__deck::before, .kv-laptop__deck::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 8px;
	background: rgba(14, 26, 61, .07);
}
.kv-laptop__deck::before { top: 8%; width: 84%; height: 46%; }
.kv-laptop__deck::after { top: 62%; width: 36%; height: 30%; }
/* 앞 모서리 — 윗면 끝에서 아래로 접어 정면을 보게 한다 */
.kv-laptop__deck i {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: clamp(10px, 1.3vw, 20px);
	transform-origin: 50% 0;
	transform: rotateX(-90deg);
	border-radius: 0 0 14px 14px;
	background: linear-gradient(180deg, #D5DAE2 0%, #AEB5C3 100%);
	box-shadow: 0 26px 40px -20px rgba(14, 26, 61, .5);
}

.kv-laptop__screen {
	position: relative;
	height: 100%;
	border-radius: 6px;
	overflow: hidden;
	background: #0B0E15;
	outline: none;
}
.kv-laptop__screen:focus-visible { box-shadow: 0 0 0 3px var(--kv-signal); }
/* 화면에 비친 빛 — 열리는 동안만 살짝 */
.kv-laptop__screen::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 38%);
	opacity: calc(1 - var(--open) * .7);
	pointer-events: none;
}
.kv-laptop__track { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; transition: transform .7s var(--kv-ease); will-change: transform; }
.kv-laptop__slide { flex: 0 0 100%; height: 100%; }
.kv-laptop__slide.is-out { display: none; }
.kv-laptop__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}
/* 화면은 열린 만큼 켜진다 */
.kv-laptop__track { opacity: calc(var(--open) * 1.4 - .4); }

/* ---- 오른쪽 설명 ---- */
.kv-work__info { display: flex; flex-direction: column; gap: 32px; }
.kv-work__count { font-family: var(--kv-font-num); font-size: 15px; color: var(--kv-slate); letter-spacing: .02em; }
.kv-work__count b { color: var(--kv-ink); font-weight: 600; }
.kv-work__text { position: relative; min-height: 220px; }
.kv-work__item.is-on { animation: kvInfo .6s var(--kv-ease); }
@keyframes kvInfo { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.kv-work__meta { font-size: 14px; font-weight: 500; color: var(--kv-signal); }
.kv-work__title { margin-top: 12px; font-size: clamp(26px, 2.2vw, 40px); font-weight: 800; line-height: 1.25; letter-spacing: -.035em; }
.kv-work__about { margin-top: 18px; font-size: 17px; line-height: 1.75; color: var(--kv-slate); }
.kv-work__item .kv-link { margin-top: 28px; }
.kv-work__empty { color: var(--kv-slate); }

.kv-work__nav { display: flex; align-items: center; gap: 10px; }
.kv-work__nav button {
	flex: none;
	width: 52px;
	height: 52px;
	border: 1px solid var(--kv-line);
	border-radius: 50%;
	background: transparent;
	color: var(--kv-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .25s, border-color .25s, color .25s;
}
.kv-work__nav button:hover:not(:disabled) { background: var(--kv-ink); border-color: var(--kv-ink); color: #fff; }
.kv-work__nav button:disabled { opacity: .35; cursor: default; }
.kv-work__nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* 진행 막대 — 몇 번째 작업인지 */
.kv-work__bar { flex: 1; height: 2px; margin-left: 14px; background: var(--kv-line); border-radius: 2px; overflow: hidden; }
.kv-work__bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--kv-signal); }

.kv-work__foot { margin-top: 40px; }

/* ---- 4. 진행 방식 — PC 는 화면에 고정한 채 스크롤로 진행 ---- */
.kv-proc { position: relative; height: 240vh; background: var(--kv-haze); color: var(--kv-ink); }
.kv-proc__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.kv-proc .kv-sec-title { margin-bottom: 96px; }
.kv-proc__track { position: relative; }
.kv-proc__steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.kv-proc__line { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--kv-line); }
.kv-proc__line i { position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--p, 0) * 100%); background: var(--kv-signal); }
.kv-proc__line b {
	position: absolute;
	top: -7px;
	left: calc(var(--p, 0) * 100%);
	width: 15px;
	height: 15px;
	margin-left: -7px;
	border-radius: 50%;
	background: var(--kv-signal);
	box-shadow: 0 0 0 6px rgba(46, 107, 255, .16);
}
.kv-proc__step { position: relative; padding-top: 48px; opacity: .35; transition: opacity .5s; }
.kv-proc__step.is-on { opacity: 1; }
.kv-proc__num { display: block; font-family: var(--kv-font-num); font-size: 15px; font-weight: 500; color: var(--kv-signal); }
.kv-proc__step h3 { margin-top: 16px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -.03em; }
.kv-proc__step p { margin-top: 14px; font-size: 16px; line-height: 1.8; color: var(--kv-slate); max-width: 20em; }

/* ---- 5. 문의 ---- */
.kv-contact { padding: 160px 0; background: var(--kv-ink); color: #fff; }
.kv-contact__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 80px; align-items: end; }
.kv-contact__title { font-size: clamp(40px, 5.2vw, 112px); font-weight: 800; line-height: 1.08; letter-spacing: -.05em; }
.kv-contact__lead { max-width: 30em; margin: 32px 0 48px; font-size: 17px; line-height: 1.8; color: rgba(255, 255, 255, .66); }
.kv-magnet { will-change: transform; }
.kv-magnet span { display: inline-block; transition: transform .35s var(--kv-ease); }

.kv-contact__info { margin: 0; display: grid; gap: 32px; }
.kv-contact__info > div { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); }
.kv-contact__info dt { font-size: 14px; color: rgba(255, 255, 255, .5); }
.kv-contact__info dd { margin: 10px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.kv-contact__info dd a { font-family: var(--kv-font-num); font-size: 22px; font-weight: 500; color: #fff; }
.kv-contact__info dd a:hover { color: #9DB8FF; }
.kv-copy {
	height: 30px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 999px;
	background: transparent;
	font-family: var(--kv-font);
	font-size: 12px;
	color: rgba(255, 255, 255, .8);
	transition: border-color .2s, color .2s, background-color .2s;
}
.kv-copy:hover { border-color: #fff; color: #fff; }
.kv-copy.is-done { background: var(--kv-signal); border-color: var(--kv-signal); color: #fff; }

/* ---- 반응형 ---- */
@media (max-width: 1024px) {
	.kv-svc__grid { grid-template-columns: 1fr; gap: 0; }
	.kv-svc__panels { display: none; }
	.kv-svc__dot { display: none; }
	.kv-svc__tab { padding-left: 0; }
	.kv-svc__tab[aria-selected="true"] { padding-left: 0; }
	/* 좁은 화면 — 패널이 고른 줄 바로 아래로 들어간다(js 가 옮김) */
	.kv-svc__list .kv-svc__panel { min-height: 0; padding: 8px 0 32px; background: none; border-radius: 0; }
	.kv-svc__list .kv-svc__icon { width: 48px; height: 48px; }
	.kv-svc__list .kv-svc__name { display: none; }
	.kv-svc__list .kv-svc__tags li { background: var(--kv-paper); }

	.kv-proc { height: auto; }
	.kv-proc__pin { position: static; height: auto; padding: 120px 0; }
	.kv-proc .kv-sec-title { margin-bottom: 56px; }
	.kv-proc__steps { grid-template-columns: 1fr; gap: 0; }
	.kv-proc__line { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
	.kv-proc__line i { width: 1px; height: calc(var(--p, 0) * 100%); }
	.kv-proc__line b { left: -7px; margin-left: 0; top: calc(var(--p, 0) * 100%); margin-top: -7px; }
	.kv-proc__step { padding: 0 0 48px 44px; }

	.kv-contact__in { grid-template-columns: 1fr; gap: 64px; }

	.kv-work__stage { grid-template-columns: 1fr; gap: 24px; }
	.kv-work__text { min-height: 0; }
}
@media (max-width: 768px) {
	.kv-hero { min-height: auto; padding: calc(var(--header-height) + 72px) 0 120px; }
	.kv-hero__cta .kv-btn { flex: 1 1 auto; }
	.kv-svc, .kv-contact { padding: 100px 0; }
	.kv-work__pin { padding: calc(var(--header-height) + 16px) 0 32px; }
	.kv-work__head { margin-bottom: 24px; }
	.kv-work__foot { margin-top: 24px; }
	.kv-sec-head { margin-bottom: 36px; }
	.kv-btn--signal { width: 100%; }
	.kv-laptop { padding: 0 4% 11%; max-width: none; }
	.kv-laptop__deck { left: 4%; right: 4%; }
	.kv-laptop__face { padding: 3% 3% 4%; border-radius: 12px 12px 4px 4px; }
	.kv-work__nav button { width: 46px; height: 46px; }
}

/* 움직임 줄이기 — 바로 최종 상태로 */
@media (prefers-reduced-motion: reduce) {
	.kv-hero__title .kv-line > span, .kv-hero__dot, .kv-hero__lead, .kv-hero__cta { animation: none; transform: none; opacity: 1; }
	.kv-hero__scroll span { animation: none; top: 25px; }
	.kv-svc__panel.is-on, .kv-svc__panel.is-on .kv-svc__icon *, 	.kv-svc__dot, .kv-svc__tab, .kv-proc__step, .kv-laptop__track { transition: none; }
	.kv-work__item.is-on { animation: none; }
}