@charset "utf-8";
/* 포트폴리오 리스트 — 시안 601:9231 (1920 × 3511)
   =========================================================================
   시안 좌표 (1920 판 기준)
     배경 그림   609:9747  0,0  1920×1200 (꽉 채움)
     바탕색      #1a2331   (그림 아래쪽은 이 색)
     2026. 200+  601:9625  x763 y134 · Montserrat SemiBold 72 · 흰색 · + 는 Thin
     갈래        y270 h51 · 둥글기 300
                 고른 것 : 바탕 #6136d9 / 나머지 : 흰 테두리 1px 투명도 .3
                 이름 Pretendard SemiBold 20 흰색 · 건수 Montserrat Medium 14 흰색
     카드        720×520 · 둥글기 8 · 테두리 1px #eabfff
                 x 220 / 984,  y 360 · 930 · 1499 · 2069
     more        610:10052 x901 y2642 114×40
                 검정 바탕 + 2px #0c60fb 테두리, 통째로 투명도 .3
                 글자 Pretendard SemiBold 16 · 파랑→분홍 그러데이션
     푸터        y2832                                                        */

.ex-stage { background: #1a2331; }

/* 카드 수가 달라질 수 있어 높이를 박지 않는다.
   위쪽(배경·숫자·갈래)은 시안 좌표 그대로 얹혀 있고, 카드는 y360 부터 흘러간다. */
.pf {
	position: relative;
	width: 1920px;
	padding: 360px 0 190px;
}

/* ── 위쪽 배경 그림 ────────────────────────────────────── */
.pf__bg {
	position: absolute;
	z-index: 0;
	left: 0;
	top: 0;
	width: 1920px;
	height: 1200px;
	object-fit: cover;
	pointer-events: none;
}

/* ── 2026. 200+ ────────────────────────────────────────── */
.pf__count {
	position: absolute;
	left: 763px;
	top: 134px;
	width: 395px;
	margin: 0;
	color: #fff;
	font-family: "Montserrat", var(--font-body);
	font-size: 72px;
	font-weight: 600;          /* Montserrat SemiBold */
	/* 시안 글상자 높이가 88 이다. normal 로 두면 크롬이 86 으로 잡아 2px 모자란다. */
	line-height: 88px;
	text-align: center;
	white-space: nowrap;
}
.pf__count i {
	font-style: normal;
	font-weight: 100;          /* Montserrat Thin */
}

/* ── 갈래 고르기 ───────────────────────────────────────── */
.pf-cats {
	position: absolute;
	left: 220px;               /* 시안 첫 칩 왼쪽 */
	top: 270px;
	display: flex;
	gap: 5px;                  /* 시안 칩 사이 */
	width: 1480px;
	height: 51px;
}
.pf-cats__item {
	height: 51px;
	border-radius: 300px;
	color: #fff;
	white-space: nowrap;
}
/* 안 고른 것 — 흰 테두리를 투명도 .3 으로 (시안 601:9639) */
.pf-cats__item::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid #fff;
	border-radius: 300px;
	opacity: .3;
}
/* 고른 것 — 보라 바탕 (시안 601:9632) */
.pf-cats__item.is-on { background: #6136d9; }
.pf-cats__item.is-on::before { display: none; }

/* 이름과 건수를 한 줄로 — 건수는 이름 바로 뒤에 붙는다.
   시안: 왼쪽 안쪽여백 26, 이름과 건수 사이 8 (예: All 246→270, 건수 278) */
.pf-cats__item {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 8px;
	/* 시안 All 칩: 너비 114, 왼쪽 안쪽여백 26 → 오른쪽은 17 이 남는다 */
	padding: 0 20px 0 26px;
}
.pf-cats__item b {
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;         /* 시안 글상자 높이 24 */
	/* 글자 윗선을 시안 y283 (칸 위에서 13) 에 맞춘다 */
	margin-top: 13px;
}
.pf-cats__item em {
	font-style: normal;
	font-family: "Montserrat", var(--font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;         /* 시안 글상자 높이 17 */
	margin-top: 13px;
	align-self: flex-start;
}

/* ── 카드 ──────────────────────────────────────────────── */
/* ── 카드 : 한 줄에 4칸 ────────────────────────────────
   시안은 720짜리 2칸이었다. 사용자 요청으로 4칸으로 바꾸면서, 시안이 쓰던
   가로 자리(x220 ~ 1704 · 칸 사이 44) 는 그대로 지켰다.
     (1484 − 44×3) ÷ 4 = 338 */
.pf-body {
	/* 위쪽 배경 그림(.pf__bg)이 자리를 잡은 요소라 그냥 두면 카드 글자를 덮는다.
	   여기도 자리를 잡은 요소로 만들어 그림 위에 오게 한다. */
	position: relative;
	z-index: 1;
	width: 1484px;
	margin: 0 auto;
}
.pf-grid {
	display: grid;
	grid-template-columns: repeat(4, 338px);
	gap: 44px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pf-card {
	width: 338px;
	height: 435px;             /* 14 + 사진310 + 14 + 이름26 + 2 + 업체18 + 10 + 태그25 + 16 */
	border: 1px solid #eabfff;
	border-radius: 8px;
	/* 유리판 느낌은 시안에서 뽑아 놓은 그림을 그대로 쓴다 */
	background: url("../img/pf/card-bg.png") center / cover no-repeat;
	color: #fff;
	overflow: hidden;
}
.pf-card__link {
	display: block;
	width: 100%;
	height: 100%;
	padding: 14px 14px 16px;
	color: inherit;
}

/* 사진 — 시안 비율(660:309) 그대로 줄였다 */
/* 사진 — 정사각형(사용자 요청). 넘치는 부분은 잘라 맞춘다. */
.pf-card__thumb {
	position: relative;
	display: block;
	width: 310px;
	height: 310px;
	border-radius: 8px;
	overflow: hidden;
}
.pf-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 갈래 표 */
/* 구분 뱃지 — 갈래마다 한 알씩. 칸이 좁아 줄이 넘어가면 아래로 쌓인다. */
.pf-card__cats {
	position: absolute;
	/* 사진 모서리에 붙지 않게 아래·오른쪽으로 들여놓는다(메인 카드와 같은 값) */
	left: 20px;
	top: 20px;
	right: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.pf-card__cat {
	display: flex;
	align-items: center;
	height: 24px;
	padding: 3px 12px;
	border-radius: 300px;
	/* 파랑(#0b0ff7)이 사진 색과 부딪혀 검정으로 바꿨다 */
	background: #111;
	color: #fff;
	font-size: 12px;
	font-style: normal;
	font-weight: 800;
	line-height: 1.4;
	white-space: nowrap;
}

/* 이름 */
.pf-card__title {
	display: block;
	margin-top: 14px;
	font-size: 18px;
	font-weight: 800;
	line-height: 26px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pf-card__com {
	display: block;
	margin-top: 2px;
	color: rgba(255, 255, 255, .55);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 기능 표 — 두 줄까지만 보이고 넘치는 것은 +N 으로 접힌다 */
.pf-card__tags {
	display: flex;
	gap: 6px;
	margin-top: 10px;
	height: 25px;              /* 한 줄만 — 넘치면 +N 으로 접는다 */
	overflow: hidden;
}
.pf-card__tags i {
	/* flex 상자 안에서는 말줄임(…)이 안 먹어 글자가 그냥 잘려 「밀린」 것처럼 보였다.
	   글 상자로 두어야 … 가 제대로 붙는다. */
	display: inline-block;
	line-height: 17px;          /* 25 − 위아래 여백 3 − 테두리 1 */
	/* 줄이지 않는다 — 몇 개가 들어가는지는 portfolio.js 가 재서 정한다.
	   줄어들게 두면 다 욱여넣느라 글자가 한두 자만 남는다. */
	flex: none;
	max-width: 100%;
	height: 25px;
	padding: 3px 11px;
	border: 1px solid rgba(195, 174, 255, .3);
	border-radius: 300px;
	color: #c3aeff;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pf-card__tags i.is-more { border-style: dashed; opacity: .8; }
/* portfolio.js 가 자리에 안 들어가는 이름표에 붙인다 */
.pf-card__tags i.is-off  { display: none; }

.pf-empty {
	margin: 80px 0 0;
	color: rgba(255, 255, 255, .6);
	font-size: 18px;
	text-align: center;
}

/* ── more ──────────────────────────────────────────────── */
.pf__more {
	display: flex;
	justify-content: center;
	margin: 80px 0 0;
}
.pf__more-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 114px;          /* 시안 610:10052 — 남은 건수가 붙으면 그만큼 늘어난다 */
	height: 40px;
	padding: 0 22px;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	cursor: pointer;
	/* 글자에 그러데이션 (시안 610:10053) */
	background-image: linear-gradient(112.89deg, #89b2ff 0%, #ff66c2 115.21%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* 테두리·바탕은 통째로 투명도 .3 (시안 610:10052) */
.pf__more-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid #0c60fb;
	border-radius: 300px;
	background: #000;
	opacity: .3;
	z-index: -1;
}
.pf__more-btn[disabled] { opacity: .5; cursor: default; }
.pf__more-lbl { white-space: nowrap; }
.pf__more-btn em {
	font-family: "Montserrat", var(--font-body);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
}

/* 다 본 뒤 — 단추 자리에 조용히 남는 한 줄 */
.pf-done {
	margin: 80px 0 0;
	color: rgba(255, 255, 255, .45);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
}
.pf-done b { color: rgba(255, 255, 255, .75); font-weight: 700; }

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