@charset "utf-8";
/* 포트폴리오 상세
   =========================================================================
   시안(610:10335)은 **색·글자·여백만 참고**했다. 사진 칸을 시안 좌표대로 박으면
   등록된 사진 수가 달라질 때마다 어긋나서, 인트라넷에 실제로 있는 칸들로 다시 짰다.
   그래서 이 화면만 자리를 박지 않고 **흘려 놓는다**(판 폭 1920, 안쪽 1480).

   위(히어로)는 어둡고 아래(본문)는 밝다 — 시안의 짜임새 그대로.              */

:root {
	--pv-purple: #6136d9;
	--pv-blue:   #0b0ff7;
	/* 구분 배지 색 — 아래 KEY FEATURES 아이콘에서 뽑은 보라(rgb 117,87,242).
	   파랑(#0b0ff7)이 히어로 사진과 부딪혀 바꿨다(사용자 요청). */
	--pv-cat:    #7557f2;
	--pv-ink:    #14141e;
	--pv-dim:    #6b6b7b;
	--pv-line:   #e7e7ef;
}

.pv {
	position: relative;
	width: 1920px;
	padding-bottom: 140px;
	background: #fff;
	color: var(--pv-ink);
}

/* ── 히어로 ────────────────────────────────────────────── */
.pv-hero {
	position: relative;
	width: 1920px;
	height: 560px;
	overflow: hidden;
	background: #1a2331;
	color: #fff;
}
/* 바탕 그림 — 목록 화면과 같은 것(1920×1200). 히어로가 560 이라 **위쪽만** 보인다. */
.pv-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}
/* 그림이 이미 어두워서 살짝만 덮는다 — 흰 제목이 읽히는 만큼만 */
.pv-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 10, 30, .34) 0%, rgba(12, 10, 30, .56) 100%);
}
.pv-hero__in {
	position: absolute;
	left: 220px;
	bottom: 78px;
	width: 940px;              /* 오른쪽 메인이미지(x1189~1700) 와 안 겹치게 */
}
/* 메인이미지 — 본사이트 상세와 같은 크기(511×481) 로 오른쪽에 세운다.
   그림은 다 621×584 짜리 목업이라 비율이 그대로 맞는다. */
.pv-hero__shot {
	position: absolute;
	right: 220px;
	/* 바닥에 딱 붙인다 — 밑 여백 없이.
	   메인이미지 목업(621×584)은 **아래 45px 이 빈칸**이라(83건 다 같은 틀에서 나왔다)
	   그만큼 내려야 실제로 바닥에 닿는다. 481 로 줄면 45 × 481/584 = 37px.
	   넘치는 부분은 .pv-hero 의 overflow:hidden 이 잘라 준다. */
	bottom: -37px;
	width: 511px;
	margin: 0;
	line-height: 0;            /* 그림 밑에 글줄 여백이 생기지 않게 */
}
.pv-hero__shot img { display: block; width: 100%; height: auto; }
/* 목록으로 — 히어로 왼쪽 위. 머리글(높이 90) 아래, 로고와 같은 x220 */
.pv-back {
	position: absolute;
	left: 220px;
	top: 140px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .8);
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	transition: color .18s;
}
.pv-back:hover { color: #fff; }
.pv-back svg { width: 22px; height: 22px; flex: none; }
/* 구분 뱃지 — 갈래마다 한 알씩 */
.pv-hero__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}
.pv-hero__cat {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 16px;
	border-radius: 300px;
	background: var(--pv-cat);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
}
.pv-title {
	margin: 0;
	font-size: 54px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
	text-wrap: balance;
}
.pv-sub {
	margin: 10px 0 0;
	color: rgba(255, 255, 255, .72);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
}
.pv-site { margin: 18px 0 0; }
.pv-site a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(255, 255, 255, .45);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}
.pv-site svg { width: 16px; height: 16px; flex: none; }

/* ── 본문 ──────────────────────────────────────────────── */
.pv-body {
	width: 1480px;
	margin: 0 auto;
	padding-top: 72px;
}

/* 기본 정보 — 이름표와 값을 두 줄짜리 표처럼 */
.pv-info {
	margin: 0 0 8px;
	padding: 0 0 8px;
	border-top: 1px solid var(--pv-ink);
}
.pv-info__row {
	display: flex;
	align-items: baseline;
	gap: 24px;
	padding: 17px 4px;
	border-bottom: 1px solid var(--pv-line);
}
.pv-info dt {
	flex: none;
	width: 150px;
	color: var(--pv-dim);
	font-family: "Montserrat", var(--font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.6;
}
.pv-info dd {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.6;
}
/* 아직 안 적은 칸 — 감추지 않고 「-」 로 남긴다(무엇이 비었는지 보이게) */
.pv-info dd.is-empty { color: #b7b7c2; font-weight: 500; }
.pv-empty {
	margin: 0;
	color: #a8a8b4;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.7;
}

/* 마디 */
.pv-sec { margin-top: 64px; }
.pv-h2 {
	margin: 0 0 22px;
	font-family: "Montserrat", var(--font-body);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .02em;
}

/* KEY Features — 아이콘이 있으면 같이 */
.pv-keys {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pv-keys li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 220px;
	padding: 14px 22px 14px 16px;
	border: 1px solid rgba(97, 54, 217, .25);
	border-radius: 10px;
	background: rgba(97, 54, 217, .04);
	color: var(--pv-purple);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
.pv-keys img { flex: none; width: 40px; height: 40px; }

/* Overview — KEY FEATURES 칸과 같은 네모 안에 담는다 */
.pv-over {
	margin: 0;
	padding: 26px 30px;
	border: 1px solid rgba(97, 54, 217, .25);
	border-radius: 10px;
	background: rgba(97, 54, 217, .04);
	color: #33333f;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.85;
}

/* Development Features — 보라 네모 안에 글자 알약을 담는다 */
.pv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 22px 26px;
	border: 1px solid rgba(97, 54, 217, .25);
	border-radius: 10px;
	background: rgba(97, 54, 217, .04);
	list-style: none;
}
.pv-chips li {
	display: flex;
	align-items: center;
	height: 34px;
	padding: 0 18px;
	border: 1px solid rgba(97, 54, 217, .3);
	border-radius: 300px;
	background: #fff;          /* 보라 바탕 위라 알약은 흰색으로 띄운다 */
	color: var(--pv-purple);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

/* Tech Stack — 로고 + 이름 */
.pv-tech {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pv-tech li {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 16px;
	border: 1px solid var(--pv-line);
	border-radius: 8px;
	background: #fafaff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}
.pv-tech img { flex: none; width: 24px; height: 24px; }

/* Main Screens — 올라온 만큼만. 폭에 맞춰 쌓고 높이는 사진이 정한다. */
/* 본사이트 상세와 같이 **한 줄에 세 칸**. 칸 사이 28 */
.pv-shots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pv-shots > li { min-width: 0; }
.pv-shot {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	font: inherit;
	color: inherit;
	text-align: center;
}
/* 그림틀 — 흰 테두리 + 연한 파란 바탕 (본사이트와 같은 모양) */
.pv-shot figure {
	display: block;
	margin: 0;
	padding: 13px;
	border: 10px solid #fff;
	border-radius: 16px;
	background: #dde8f7;
	overflow: hidden;
}
/* 캡처가 세로로 아주 길어서 윗부분만 보여 주고, 누르면 레이어로 통째로 본다 */
.pv-shot img {
	display: block;
	width: 100%;
	aspect-ratio: 420 / 250;
	object-fit: cover;
	object-position: top center;   /* 화면 캡처라 머리부터 보여 준다 */
	transition: transform .5s cubic-bezier(.2, .8, .25, 1);
}
.pv-shot:hover img { transform: scale(1.1); }
.pv-shot figcaption {
	margin: 0;
	/* 아래 20 — 손을 올리면 fx.css 가 칸 전체에 그림자를 둘러서,
	   여백이 없으면 글자가 그림자 테두리에 딱 붙어 보인다. */
	padding: 14px 13px 20px;
	color: #241a3a;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	word-break: keep-all;
}
.pv-shot:focus-visible { outline: 2px solid var(--pv-blue, #3f49e6); outline-offset: 4px; }

/* ── 눌렀을 때 뜨는 레이어 ─────────────────────────────
   화면 캡처는 높이가 제각각이라, 크기를 줄이지 않고 레이어를 스크롤해서 본다. */
.pv-lb {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 40px;
	background: rgba(10, 10, 14, .9);
	cursor: zoom-out;
	overflow: auto;
	overscroll-behavior: contain;
	animation: pvLbIn .18s ease both;
}
@keyframes pvLbIn { from { opacity: 0; } }
.pv-lb__fig {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	margin: auto 0;
}
.pv-lb__fig img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
	cursor: default;
}
.pv-lb__cap { margin: 16px 0 0; color: #fff; font-size: 16px; font-weight: 700; text-align: center; }
.pv-lb__count { margin: 6px 0 0; color: rgba(255, 255, 255, .6); font-family: "Montserrat", var(--font-body);
	font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.pv-lb__close, .pv-lb__nav {
	position: fixed;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease;
}
.pv-lb__close:hover, .pv-lb__nav:hover { background: rgba(255, 255, 255, .28); }
.pv-lb__close { right: 24px; top: 20px; width: 44px; height: 44px; font-size: 24px; line-height: 1; }
.pv-lb__nav { top: 50%; width: 56px; height: 56px; margin-top: -28px; }
.pv-lb__nav svg { width: 26px; height: 26px; display: block; margin: 0 auto; }
.pv-lb__nav--prev { left: 28px; }
.pv-lb__nav--next { right: 28px; }
.pv-lb__nav[hidden] { display: none; }
html.pv-lb-open, html.pv-lb-open body { overflow: hidden; }

/* 년도별 행사 */
/* Main Screens 와 같이 한 줄에 세 칸 */
.pv-rel {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pv-rel > li { min-width: 0; }
/* 칸 모양·오버 효과는 Main Screens 와 같다 */
.pv-rel a {
	display: block;
	color: inherit;
	border-radius: 16px;
	text-align: center;
}
.pv-rel__thumb {
	display: block;
	padding: 13px;
	border: 10px solid #fff;
	border-radius: 16px;
	background: #dde8f7;
	overflow: hidden;
	/* 그림이 없는 글도 칸 높이가 같게 — 판이 1920 고정이라 px 로 박아도 안 어긋난다
	   (틀 안쪽 475−20−26 = 429, 429 × 250/420 = 255) */
	min-height: 255px;
}
.pv-rel__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 420 / 250;     /* Main Screens 와 같이 **그림**에 건다 */
	object-fit: cover;
	object-position: top center;
	transition: transform .5s cubic-bezier(.2, .8, .25, 1);
}
.pv-rel a:hover .pv-rel__thumb img { transform: scale(1.1); }
.pv-rel strong {
	display: block;
	padding: 14px 13px 0;
	color: #241a3a;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pv-rel em {
	display: block;
	padding: 2px 13px 20px;
	color: var(--pv-dim);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
}
/* 업체명이 없는 글도 밑 여백은 같게 */
.pv-rel strong:last-child { padding-bottom: 20px; }
.pv-rel a:focus-visible { outline: 2px solid var(--pv-blue); outline-offset: 4px; }

/* 목록보기 */
.pv-list { margin: 72px 0 0; text-align: center; }
.pv-list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 52px;
	border-radius: 300px;
	background: var(--pv-ink);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}

/* 앞뒤 글 */
.pv-nav {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 56px;
	padding-top: 26px;
	border-top: 1px solid var(--pv-line);
}
.pv-nav a { display: flex; align-items: baseline; gap: 14px; max-width: 46%; color: inherit; }
.pv-nav__next { margin-left: auto; text-align: right; }
.pv-nav b {
	flex: none;
	color: var(--pv-dim);
	font-family: "Montserrat", var(--font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
}
.pv-nav span {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── 위쪽 메뉴 띠 ───────────────────────────────────────
   이 화면은 머리글이 **어두운 배경 그림** 위에 얹힌다.
   띠 바탕이 반투명 흰색(.8)이라 그 위에서는 잿빛으로 보인다 —
   메인 화면처럼 하얗게 채운다. (이 파일은 이 화면에서만 읽히므로 여기만 바뀐다) */
.ex-gnb {
	border-color: #fff;
	background: #fff;
}

/* 죽은 주소 — 글자는 남기되 눌러도 나가지 않는다(가는 곳이 '#').
   링크처럼 보이면 헛걸음하게 되므로 밑줄과 손가락 표시를 뺀다. */
.pv-site.is-dead a {
	border-bottom-color: transparent;
	color: rgba(255, 255, 255, .55);
	cursor: default;
}


/* ============================================================
   스크롤에 따라 올라오기
   ------------------------------------------------------------
   site.js 가 화면에 들어온 것에 .is-in 을 붙인다.
   자바스크립트가 없으면 html 에 .js 가 없어 처음부터 그냥 보인다.
   ============================================================ */
html.js .pv-body .js-reveal,
html.js .pv-hero .js-reveal {
	opacity: 0;
	transform: translateY(22px);
}
html.js .pv-body .js-reveal.is-in,
html.js .pv-hero .js-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .55s ease var(--delay, 0ms),
	            transform .6s cubic-bezier(.22, 1, .36, 1) var(--delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
	html.js .pv-body .js-reveal,
	html.js .pv-hero .js-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   그림에 손을 올리면 테두리가 한 바퀴 그려진다
   ------------------------------------------------------------
   대표 사이트 메인의 Web Guide 카드(main-fx.css)와 같은 방식이다.
   원뿔 그러데이션을 깔고 마스크로 **가운데를 파내** 테두리만 남긴다.
   그래서 아래 padding 값이 곧 테두리 두께다 — 본사이트가 20 이므로
   여기는 5 작은 15 로 둔다(요청).
   각도(--pv-sweep)를 0 → 360 으로 밀어 「그려지는」 것처럼 보이게 하는데,
   보통 CSS 변수는 전환이 안 걸린다. @property 로 각도라고 알려 줘야 한다.
   ============================================================ */
@property --pv-sweep {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.pv-shot figure,
.pv-rel__thumb { position: relative; }

.pv-shot figure::after,
.pv-rel__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 6px;        /* 틀 안쪽(16 − 테두리 10)에 맞춘 둥글기 */
	padding: 15px;             /* = 테두리 두께 */
	--pv-sweep: 0deg;
	/* 왼쪽 위 모서리에서 출발해 시계 방향으로 한 바퀴 */
	background: conic-gradient(from -135deg,
		#ffd76a 0deg,
		#ff7ac4 calc(var(--pv-sweep) * .35),
		#58e0ff calc(var(--pv-sweep) * .7),
		#ffffff var(--pv-sweep),
		rgba(255, 255, 255, 0) var(--pv-sweep));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	transition: --pv-sweep .75s cubic-bezier(.3, .8, .3, 1);
	pointer-events: none;
}
.pv-shot:hover figure::after,
.pv-shot:focus-visible figure::after,
.pv-rel a:hover .pv-rel__thumb::after,
.pv-rel a:focus-visible .pv-rel__thumb::after { --pv-sweep: 360deg; }

@media (prefers-reduced-motion: reduce) {
	.pv-shot figure::after,
	.pv-rel__thumb::after { transition: none; }
}