@charset "utf-8";
/* 메인 — 시안 486:2159 (1920 × 2091 · 푸터는 y1412 부터)
   =========================================================================
   모든 자리값은 시안에 적힌 px 그대로. 판이 --k 로 줄어드니 그대로 써도 된다.

   카드 공통(526:3123 · 544:1190 · 544:1191)
     바탕 rgba(255,255,255,.75) · 테두리 1px 흰색 · 둥글기 8 · 뒤흐림 20
     그림자 5겹                                                              */

.mn {
	position: relative;
	width: 1920px;
	height: 1412px;            /* 푸터가 시작하는 자리 */
	color: #000;
}

.mn__bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 1920px;
	height: 1619px;
	pointer-events: none;
	z-index: -1;               /* 카드·글자 뒤로 */
}

/* ── 카드 공통 ─────────────────────────────────────────── */
.mn-card {
	position: absolute;
	border: 1px solid #fff;
	border-radius: 8px;
	background: rgba(255, 255, 255, .75);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 131px 37px rgba(0, 0, 0, 0), 0 84px 34px rgba(0, 0, 0, 0),
	            0 47px 28px rgba(0, 0, 0, .02), 0 21px 21px rgba(0, 0, 0, .03),
	            0 5px 12px rgba(0, 0, 0, .03);
}
/* 카드 안 제목 — 시안 552:3533 (Pretendard SemiBold 20 · 줄높이 1.6) */
.mn-card__title {
	position: absolute;
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

/* ── 머리말 ───────────────────────────────────────────── */
.mn-eyebrow {
	position: absolute;
	left: 220px;
	top: 158px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;          /* 시안 글상자 높이 24 */
	white-space: nowrap;
}
.mn-lead {
	position: absolute;
	left: 222.53px;
	top: 190px;
	width: 727.16px;
	height: 59px;
	margin: 0;
}
.mn-lead__mark {
	position: absolute;
	left: 0;
	top: 13.6px;               /* 시안 inset 23.06% */
	width: 254px;
	height: 35.38px;
}
.mn-lead__txt {
	position: absolute;
	left: 270.16px;
	top: 0;
	font-family: "Montserrat", var(--font-body);
	font-size: 48px;
	font-weight: 600;
	line-height: 59px;         /* 시안 글상자 높이 59 */
	white-space: nowrap;
}

/* ── 인증 배지 ─────────────────────────────────────────── */
.mn-badge__hands {
	position: absolute;
	left: 1340px;
	top: 144px;
	width: 76px;
	height: 76px;
	z-index: 2;
	display: block;
	pointer-events: none;
}
/* 손과 별 세 겹 — 모두 같은 76×76 판이라 겹쳐 놓기만 하면 제자리다 */
.mn-badge__hand,
.mn-badge__spark {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* 손 : 위아래로 짧게 두 번 흔들고 잠깐 쉰다.
   4.2초 한 바퀴 가운데 앞 3할만 움직이므로, 계속 덜그럭대지 않고
   「가끔 눈에 띄는」 정도가 된다. 살짝 기울여야 손목이 도는 느낌이 산다. */
.mn-badge__hand {
	transform-origin: 62% 88%;    /* 손목께를 축으로 */
	animation: mnThumb 4.2s ease-in-out infinite;
	will-change: transform;
}
@keyframes mnThumb {
	0%,  62%, 100% { transform: translateY(0)     rotate(0deg); }
	66%            { transform: translateY(-6px)  rotate(-7deg); }
	72%            { transform: translateY(1px)   rotate(3deg); }
	78%            { transform: translateY(-4px)  rotate(-4deg); }
	84%            { transform: translateY(1px)   rotate(2deg); }
	90%            { transform: translateY(-1px)  rotate(0deg); }
}

/* 별 : 커졌다 작아지며 반짝인다. 축을 제 별 한가운데로 두어야
   커질 때 옆으로 흐르지 않고 제자리에서 빛난다(판이 76 이라 백분율로 잡는다). */
.mn-badge__spark { animation: mnSpark 4.2s ease-in-out infinite; will-change: transform, opacity; }
.mn-badge__spark--1 { transform-origin: 47% 21%; }
.mn-badge__spark--2 { transform-origin: 39% 32%; animation-delay: .55s; }
@keyframes mnSpark {
	0%,  55%, 100% { opacity: .55; transform: scale(.72) rotate(0deg); }
	64%            { opacity:  1;  transform: scale(1.25) rotate(35deg); }
	74%            { opacity: .6;  transform: scale(.85) rotate(60deg); }
	82%            { opacity:  1;  transform: scale(1.1) rotate(80deg); }
	92%            { opacity: .55; transform: scale(.72) rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
	.mn-badge__hand, .mn-badge__spark { animation: none; }
	.mn-badge__spark { opacity: 1; transform: none; }
}
.mn-badge {
	position: absolute;
	left: 1340px;
	top: 195px;
	width: 360px;
	height: 60px;
	border: 0;
	border-radius: 300px;
	/* 시안 593:5329 — 분홍→보라, 둘 다 60% */
	background-image: linear-gradient(99.46deg, rgba(237, 53, 164, .6) 0%, rgba(117, 87, 242, .6) 100%);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 47px 28px rgba(0, 0, 0, .02), 0 21px 21px rgba(0, 0, 0, .03),
	            0 5px 12px rgba(0, 0, 0, .03);
}
/* 테두리 — 시안은 빨간 실선이 아니라 **분홍→파랑으로 흐르는 1px 띠**다.
   (예전 값 border: 1px solid #ea5252 는 크게 보면 알약 위에 빨간 금이 그어진 것처럼 보였다.
    시안 렌더 cap/figma/main.png 의 테두리 점을 그대로 재서 양 끝 색을 잡았다 —
    왼쪽 끝 #e15a77 · 오른쪽 끝 #3232f3.)

   속이 반투명(60%)이라 배경을 두 겹으로 깔 수는 없다.
   가면(mask-composite)으로도 만들어 봤지만, 화면 배율이 1.5 일 때 띠가 **두 점**으로
   번져 뭉개져 보였다(사용자 지적). SVG 로 그린 선은 배율이 얼마든 한 점으로 떨어진다.
   알약 크기가 360×60 으로 고정이라 viewBox 를 그 값에 맞춰 두었다 — 크기를 바꾸면 여기도 고칠 것.
   기울기는 칠과 같은 99.46deg 다. 360×60 상자에서 그 각도의 그러데이션 선은
   왼쪽 위 모서리(0,0)에서 오른쪽 아래 모서리(360,60)로 딱 떨어진다. */
.mn-badge::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60' preserveAspectRatio='none'><linearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='360' y2='60'><stop offset='0' stop-color='%23e15a77'/><stop offset='1' stop-color='%233232f3'/></linearGradient><rect x='.5' y='.5' width='359' height='59' rx='29.5' fill='none' stroke='url(%23g)' stroke-width='1'/></svg>") center / 100% 100% no-repeat;
	pointer-events: none;
}
.mn-badge__t {
	position: absolute;
	top: 216px;
	color: #fff;
	/* 시안 렌더의 글자 폭·높이·획 굵기를 재 보니 14px 이 아니라 16px 이다.
	   (14 로 두면 「여성기업」이 53px 이어야 할 것이 46px 로 줄고 획도 얇아,
	    크게 볼 때 글자가 눌린 것처럼 보였다. 글상자 19 = 16 × 1.2 로도 맞는다.) */
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 19px;         /* 시안 글상자 높이 19 */
	white-space: nowrap;
}

/* ── 숫자 카드 (526:3123 …) ────────────────────────────── */
.mn-stat { top: 286px; width: 360px; height: 120px; }
.mn-stat__ico { position: absolute; }
.mn-stat__label {
	position: absolute;
	top: 311px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}
.mn-stat__num {
	position: absolute;
	top: 333px;
	color: #6136d9;
	font-family: "Montserrat", var(--font-body);
	font-size: 42px;
	font-weight: 800;          /* Montserrat ExtraBold */
	line-height: 51px;         /* 시안 글상자 높이 51 */
	white-space: nowrap;
}
.mn-stat__num em { font-style: normal; font-weight: 100; }   /* + · % 는 Thin */

/* ── 행사유형 막대그래프 (544:1190) ────────────────────── */
/* 시안은 왼쪽 넓은 자리였으나 「유형별 주요 기능」과 맞바꿔 오른쪽 좁은 자리로 왔다 */
.mn-chart { left: 969px; top: 416px; width: 360px; height: 350px; }
.mn-chart__y {
	position: absolute;
	left: 978px;
	width: 40px;
	color: rgba(0, 0, 0, .45);
	font-family: "Montserrat", var(--font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 15.19px;
	text-align: right;
}
/* 눈금은 어두운 선이 아니라 바탕보다 밝은 선이다(시안 픽셀로 확인).
   맨 아래 바닥선 하나만 어둡다. */
.mn-chart__line {
	position: absolute;
	width: 281px;
	height: 1px;
	background: rgba(255, 255, 255, .35);
}
.mn-chart__line.is-axis { background: rgba(0, 0, 0, .55); }
/* 막대 — 세 갈래를 한눈에 가르려고 저마다 다른 그러데이션을 준다.
   세 색은 사이트 강조색(보라 #6136d9 → 분홍 #ed35a4) 사이를 나눠 가진 것이라
   따로 노는 색이 없다. 꼭대기가 밝고 밑동이 진해 위로 솟는 느낌이 산다.
   꼭대기 표시(.mn-chart__dot)도 제 막대 색을 따라간다 — 같은 파란 점을
   분홍 막대 위에 얹으면 남의 것처럼 보인다. */
.mn-chart__bar {
	position: absolute;
	width: 48px;
	border-radius: 8px 8px 0 0;
	background: linear-gradient(180deg, var(--bar-hi, #8f7bff) 0%, var(--bar-lo, #4b2fd0) 100%);
}
.mn-chart__bar[data-i="1"] { --bar-hi: #7b8bff; --bar-lo: #2f30d8; }   /* 전시회 — 파랑보라 */
.mn-chart__bar[data-i="2"] { --bar-hi: #a86cf2; --bar-lo: #6136d9; }   /* 포럼·세미나·컨퍼런스 — 보라 */
.mn-chart__bar[data-i="3"] { --bar-hi: #f07ac8; --bar-lo: #b03ad0; }   /* 이벤트·행사 — 분홍보라 */
/* 첫 막대에 붙는 이름표(.is-on)는 더 이상 색을 바꾸지 않는다 — 위 갈래 색이 맡는다 */
.mn-chart__bar.is-on { background: linear-gradient(180deg, var(--bar-hi) 0%, var(--bar-lo) 100%); }
.mn-chart__tip {
	position: absolute;
	width: 77px;
	height: 70px;
}
.mn-chart__tip b {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 77px;
	height: 48px;
	border-radius: 8px;
	/* 시안 픽셀을 읽은 색 — 회색이 아니라 살짝 보랏빛이다 */
	background: #555185;
	box-shadow: 0 2px 12px rgba(30, 26, 70, .28);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;   /* 숫자가 올라갈 때 폭이 안 흔들리게 */
}

/* ── 막대 꼭대기 표시 (시안 33px 흐린 원 + 10px 속알맹이) ── */
.mn-chart__dot {
	position: absolute;
	width: 33px;
	height: 33px;
}
.mn-chart__dot::before {          /* 바깥 흐린 원 — 이게 깜빡인다 */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	/* 제 막대 꼭대기 색을 옅게 깐다 */
	background: var(--dot-out, rgba(63, 73, 230, .5));
}
.mn-chart__dot[data-i="1"] { --dot-out: rgba(123, 139, 255, .5); --dot-in: rgba(110, 126, 240, .97); }
.mn-chart__dot[data-i="2"] { --dot-out: rgba(168, 108, 242, .5); --dot-in: rgba(150, 100, 225, .97); }
.mn-chart__dot[data-i="3"] { --dot-out: rgba(240, 122, 200, .5); --dot-in: rgba(222, 112, 190, .97); }
.mn-chart__dot i {                /* 가운데 점 — 가만히 있는다 */
	position: absolute;
	left: 11.5px;
	top: 11.5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	/* 바깥 원이 깜빡여도 흔들리지 않게 거의 불투명하게 둔다 */
	background: var(--dot-in, rgba(98, 109, 219, .97));
}
/* 막대 한가운데에 놓는다. 자리가 좁아져 이름이 길면 두 줄로 접힌다
   (「포럼·세미나·컨퍼런스」는 가운뎃점에서 접힌다) */
.mn-chart__x {
	position: absolute;
	top: 716px;
	width: 96px;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	line-height: 19px;
}

/* ── 유형별 주요 기능 (544:1191) ───────────────────────── */
/* 시안은 오른쪽 좁은 자리였으나 항목이 많아 그래프와 맞바꿔 왼쪽 넓은 자리로 왔다 */
.mn-feat { left: 220px; top: 416px; width: 730px; height: 350px; }
/* 이름 길이가 제각각이라 띠 안에서 저절로 늘어서게 한다.
   고른 탭도 안쪽여백이 같아 자리가 밀리지 않는다. */
.mn-feat__tabbar {
	position: absolute;
	left: 373px;
	top: 473px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;                 /* 탭끼리 띄우기 — 알약 안 여유(126px)를 둘로 나눠 썼다 */
	width: 424px;
	height: 39px;
	padding: 0 6px;
	border-radius: 300px;
	background: rgba(255, 255, 255, .6);
}
.mn-feat__tab {
	flex: 0 1 auto;
	min-width: 0;
	height: 26px;
	padding: 0 10px;
	border: 0;
	border-radius: 300px;
	background: none;
	font-size: 16px;
	font-weight: 500;
	line-height: 26px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mn-feat__tab.is-on {
	background: #0b0ff7;
	color: #fff;
	font-weight: 700;
}
.mn-feat__ico { position: absolute; }
.mn-feat__name {
	position: absolute;
	color: rgba(0, 0, 0, .8);
	font-size: 13px;
	font-weight: 500;
	line-height: 15px;
	text-align: center;
}
/* 넘기기 줄 — 카드 아래쪽 가운데.
   이름표가 두 줄까지 내려오면 y737 이고 카드 바닥은 y766 이라 그 사이에 앉힌다. */
.mn-feat__pager {
	position: absolute;
	left: 220px;
	top: 741px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 730px;
	height: 20px;
}
.mn-feat__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(11, 15, 247, .08);
	color: #0b0ff7;
	cursor: pointer;
}
.mn-feat__nav svg { width: 13px; height: 13px; }
.mn-feat__nav:disabled { background: rgba(0, 0, 0, .05); color: rgba(0, 0, 0, .25); cursor: default; }
.mn-feat__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .18);
	cursor: pointer;
}
.mn-feat__dot.is-on { width: 16px; border-radius: 3px; background: #0b0ff7; }
/* ── 오른쪽 안내 두 장 ─────────────────────────────────── */
.mn-cta {
	position: absolute;
	left: 1340px;
	width: 360px;
	height: 170px;
	border-radius: 8px;
	overflow: hidden;
	color: #fff;
}
.mn-cta img { position: absolute; inset: 0; width: 360px; height: 170px; }
.mn-cta__ico {
	/* 위의 .mn-cta img 가 inset:0 으로 네 귀를 0 에 붙여 놓아, 먼저 풀고 자리를 준다.
	   시안 x1374 y649 (배너 왼쪽 위 1340,596 기준 34,53) 60×60.
	   오려 온 그림이라 귀퉁이에 배경이 묻어 있어 둥글게 잘라 낸다. */
	inset: auto !important;
	left: 34px !important;
	top: 53px !important;
	width: 60px !important;
	height: 60px !important;
	border-radius: 16px;
}
.mn-cta b {
	position: absolute;
	left: 122px;               /* 시안 x1462 − 1340 */
	font-size: 20px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}
.mn-cta span {
	position: absolute;
	left: 122px;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	opacity: .9;
}

/* ── 포트폴리오 ────────────────────────────────────────── */
.mn-pf__title {
	position: absolute;
	left: 892px;
	top: 824px;
	width: 143px;
	margin: 0;
	font-family: "Montserrat", var(--font-body);
	font-size: 32px;
	font-weight: 700;
	line-height: 39px;
	text-align: center;
	white-space: nowrap;
}
.mn-pf__more {
	position: absolute;
	left: 1627px;
	top: 831px;
	display: flex;
	align-items: center;
	gap: 8px;                  /* 글자 끝 1664 → 동그라미 1672 */
	height: 30px;
}
.mn-pf__more span { font-size: 14px; font-weight: 500; line-height: 17px; }
.mn-pf__more i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #0b0ff7;
	color: #fff;
}
.mn-pf__more i svg { width: 16px; height: 16px; }

.mn-pf {
	position: absolute;
	top: 890px;
	width: 360px;
	height: 428px;
	display: block;
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 8px;
	background: rgba(255, 255, 255, .55);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 21px 21px rgba(0, 0, 0, .03), 0 5px 12px rgba(0, 0, 0, .03);
	color: #000;
	overflow: hidden;
}
.mn-pf__thumb {
	position: absolute;
	left: 25px;                /* 시안 x26 − 테두리 1 */
	top: 22px;
	width: 309px;
	height: 309px;
	display: block;
	border-radius: 8px;
	overflow: hidden;
}
.mn-pf__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 구분이 여럿이면 하나씩 따로 붙는다 — 한 덩이로 이으면 한 갈래처럼 보인다.
   자리잡기는 이 겉 상자가 맡고, 딱지는 그 안에서 줄 세운다. */
.mn-pf__cats {
	position: absolute;
	/* 시안은 x36 y32(사진 안쪽 10,10) 였는데 사진 모서리에 너무 붙어 보여
	   들여놓았다(사용자 요청). 다만 분류가 셋인 카드가 두 줄로 접히던 터라
	   포트폴리오 목록과 같은 크기로 줄이고 들여넣기도 40 으로 당겼다. */
	left: 40px;
	top: 38px;
	right: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.mn-pf__cat {
	display: flex;
	align-items: center;
	/* 포트폴리오 목록(.pf-card__cat)과 같은 크기 — 셋이 한 줄에 들어가야 한다 */
	height: 24px;
	padding: 3px 11px;
	border-radius: 300px;
	/* 파랑(#0b0ff7)이 사진 색과 부딪혀 검정으로 바꿨다 */
	background: #111;
	color: #fff;
	font-size: 12px;
	font-style: normal;
	font-weight: 800;
	line-height: 1.4;
	white-space: nowrap;
}
.mn-pf__name {
	position: absolute;
	left: 0;
	right: 0;
	top: 368.68px;             /* 시안 y369.68 − 1 */
	font-size: 20px;
	font-weight: 600;
	line-height: 1.45;         /* 시안 글상자 높이 29 */
	text-align: center;
	white-space: nowrap;
}


/* ---------- 포트폴리오 카드 갈아 끼우기 ----------
   pf-roll.js 가 카드 「속」만 바꾼다. 바뀌는 순간이 툭 튀지 않게
   잠깐 흐려졌다가 돌아온다. 흐려지는 시간은 스크립트의 FADE 와 같아야 한다. */
.mn-pf__thumb img,
.mn-pf__cats,
.mn-pf__name {
	transition: opacity .32s ease;
}
.mn-pf.is-rolling .mn-pf__thumb img,
.mn-pf.is-rolling .mn-pf__cats,
.mn-pf.is-rolling .mn-pf__name {
	opacity: 0;
}
/* 그림이 바뀔 때 살짝 밀려 들어오면 「넘어간다」는 느낌이 산다 */
.mn-pf__thumb img { transition: opacity .32s ease, transform .32s ease; }
.mn-pf.is-rolling .mn-pf__thumb img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.mn-pf__thumb img, .mn-pf__cats, .mn-pf__name { transition: none; }
}