:root {
	/* 포인터 관련 변수 */
	--pointer-x: 50%;
	--pointer-y: 50%;
	--pointer-from-center: 0;
	--pointer-from-top: .5;
	--pointer-from-left: .5;
	
	/* 카드 스타일 변수 */
	--card-opacity: 0;
	--rotate-x: 0deg;
	--rotate-y: 0deg;
	--background-x: 50%;
	--background-y: 50%;
	--grain: none;
	--icon: none;
	--behind-gradient: none;
	--inner-gradient: none;
	--card-radius: 30px;

	/* Sunpillar 색상 변수 */
	--sunpillar-1: hsl(2, 100%, 73%);
	--sunpillar-2: hsl(53, 100%, 69%);
	--sunpillar-3: hsl(93, 100%, 69%);
	--sunpillar-4: hsl(176, 100%, 76%);
	--sunpillar-5: hsl(228, 100%, 74%);
	--sunpillar-6: hsl(283, 100%, 73%);
	--sunpillar-clr-1: var(--sunpillar-1);
	--sunpillar-clr-2: var(--sunpillar-2);
	--sunpillar-clr-3: var(--sunpillar-3);
	--sunpillar-clr-4: var(--sunpillar-4);
	--sunpillar-clr-5: var(--sunpillar-5);
	--sunpillar-clr-6: var(--sunpillar-6);
	
	/* 기본 글꼴 및 텍스트 렌더링 설정 */
	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	font-weight: 400;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff !important;
	min-width: 320px;
	min-height: 100vh;
}

/* --- 이하 카드 스타일 --- */
.pc-card-wrapper {
	perspective: 600px;
	transform: translateZ(.1px);
	position: relative;
	touch-action: none;
}

.pc-card-wrapper:before {
	content: "";
	position: absolute;
	inset: -10px;
	background-position: inherit;
	border-radius: inherit;
	transition: all .5s ease;
	filter: contrast(2) saturate(2) blur(36px);
	transform: scale(.8) translateZ(.1px);
	background-size: 100% 100%;
	background-image: var(--behind-gradient);
}

.pc-card-wrapper:hover, .pc-card-wrapper.active {
	--card-opacity: 1;
}

.pc-card-wrapper:hover:before, .pc-card-wrapper.active:before {
	filter: contrast(1) saturate(2) blur(40px) opacity(1);
	transform: scale(.9) translateZ(.1px);
}

.pc-card {
	height: 90vh; 
	max-height: 540px;
	display: grid;
	aspect-ratio: .718;
	border-radius: var(--card-radius);
	position: relative;
	background-blend-mode: color-dodge, normal, normal, normal;
	animation: glow-bg 12s linear infinite;
	box-shadow: #000c calc(( var(--pointer-from-left)* 10px)- 3px)
		calc(( var(--pointer-from-top)* 20px)- 6px) 20px -5px;
	transition: transform 1s ease;
	transform: translateZ(.1px) rotateX(0) rotateY(0);
	background-size: 100% 100%;
	background-position: 0 0, 0 0, 50% 50%, 0 0;
	background-image: radial-gradient(farthest-side circle at var(--pointer-x)
		var(--pointer-y), hsla(266, 100%, 90%, var(--card-opacity)) 4%,
		hsla(266, 50%, 80%, calc(var(--card-opacity)* .75)) 10%,
		hsla(266, 25%, 70%, calc(var(--card-opacity)* .5)) 50%,
		hsla(266, 0%, 60%, 0) 100%),
		radial-gradient(35% 52% at 55% 20%, #00ffaac4, #073aff00),
		radial-gradient(100% 100% at 50% 50%, #00c1ff 1%, #073aff00 76%),
		conic-gradient(from 124deg at 50% 50%, #c137ff, #07c6ff 40% 60%, #c137ff
		);
	overflow: hidden;
}

.pc-card:hover, .pc-card.active {
	transition: none;
	transform: translateZ(.1px) rotateX(var(--rotate-y))
		rotateY(var(--rotate-x));
}


.pc-card * {
	display: grid;
	grid-area: 1/-1;
	border-radius: var(--card-radius);
	transform: translateZ(.1px);
	pointer-events: none
}

.pc-inside {
	inset: 1px;
	position: absolute;
	background-image: var(--inner-gradient);
	background-color: #000000e6;
	transform: translateZ(.01px)
}

.pc-shine {
	-webkit-mask-image: var(--icon);
	mask-image: var(--icon);
	mask-mode: luminance;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	-webkit-mask-size: 150%;
	mask-size: 150%;
	-webkit-mask-position: top calc(200% - ( var(--background-y)* 5)) left
		calc(100% - var(--background-x));
	mask-position: top calc(200% - ( var(--background-y)* 5)) left
		calc(100% - var(--background-x));
	transition: filter .6s ease;
	filter: brightness(.66) contrast(1.33) saturate(.33) opacity(.5);
	animation: holo-bg 18s linear infinite;
	mix-blend-mode: color-dodge
}

.pc-shine, .pc-shine:after {
	--space: 5%;
	--angle: -45deg;
	transform: translateZ(1px);
	overflow: hidden;
	z-index: 3;
	background: transparent;
	background-size: cover;
	background-position: center;
	background-image: repeating-linear-gradient(0deg, var(--sunpillar-clr-1)
		calc(var(--space)* 1), var(--sunpillar-clr-2) calc(var(--space)* 2),
		var(--sunpillar-clr-3) calc(var(--space)* 3), var(--sunpillar-clr-4)
		calc(var(--space)* 4), var(--sunpillar-clr-5) calc(var(--space)* 5),
		var(--sunpillar-clr-6) calc(var(--space)* 6), var(--sunpillar-clr-1)
		calc(var(--space)* 7)), repeating-linear-gradient(var(--angle),
		#0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%,
		hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%),
		radial-gradient(farthest-corner circle at var(--pointer-x)
		var(--pointer-y), hsla(0, 0%, 0%, .1) 12%, hsla(0, 0%, 0%, .15) 20%,
		hsla(0, 0%, 0%, .25) 120%);
	background-position: 0 var(--background-y), var(--background-x)
		var(--background-y), center;
	background-blend-mode: color, hard-light;
	background-size: 500% 500%, 300% 300%, 200% 200%;
	background-repeat: repeat
}

.pc-shine:before, .pc-shine:after {
	content: "";
	background-position: center;
	background-size: cover;
	grid-area: 1/1;
	opacity: 0
}

.pc-card:hover .pc-shine, .pc-card.active .pc-shine {
	filter: brightness(.85) contrast(1.5) saturate(.5);
	animation: none
}

.pc-card:hover .pc-shine:before, .pc-card.active .pc-shine:before,
	.pc-card:hover .pc-shine:after, .pc-card.active .pc-shine:after {
	opacity: 1
}

.pc-shine:before {
	background-image: linear-gradient(45deg, var(--sunpillar-4),
		var(--sunpillar-5), var(--sunpillar-6), var(--sunpillar-1),
		var(--sunpillar-2), var(--sunpillar-3)),
		radial-gradient(circle at var(--pointer-x) var(--pointer-y),
		hsl(0, 0%, 70%) 0%, hsla(0, 0%, 30%, .2) 90%), var(--grain);
	background-size: 250% 250%, 100% 100%, 220px 220px;
	background-position: var(--pointer-x) var(--pointer-y), center,
		calc(var(--pointer-x)* .01) calc(var(--pointer-y)* .01);
	background-blend-mode: color-dodge;
	filter: brightness(calc(2 - var(--pointer-from-center)))
		contrast(calc(var(--pointer-from-center)+ 2))
		saturate(calc(.5 + var(--pointer-from-center)));
	mix-blend-mode: luminosity
}

.pc-shine:after {
	background-position: 0 var(--background-y), calc(var(--background-x)* .4)
		calc(var(--background-y)* .5), center;
	background-size: 200% 300%, 700% 700%, 100% 100%;
	mix-blend-mode: difference;
	filter: brightness(.8) contrast(1.5)
}

.pc-glare {
	transform: translateZ(1.1px);
	overflow: hidden;
	background-image: radial-gradient(farthest-corner circle at var(--pointer-x)
		var(--pointer-y), hsl(248, 25%, 80%) 12%, hsla(207, 40%, 30%, .8) 90%);
	mix-blend-mode: overlay;
	filter: brightness(.8) contrast(1.2);
	z-index: 4
}

.pc-avatar-content {
	mix-blend-mode: screen;
	overflow: hidden
}

.pc-avatar-content .avatar {
	width: 100%;
	position: absolute;
	left: 50%;
	transform: translate(-50%) scale(1);
	bottom: 30px;
	opacity: calc(1.75 - var(--pointer-from-center))
}

.pc-avatar-content:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0)
		60%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 1) 100%);
	pointer-events: none
}

.pc-user-info {
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #ffffff1a;
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 15px;
	padding: 12px 14px;
	pointer-events: auto
}

.pc-user-details {
	display: flex;
	align-items: center;
	gap: 12px
}

.pc-mini-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .1);
	flex-shrink: 0
}

.pc-mini-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%
}

.pc-user-text {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 6px
}

.pc-handle {
	font-size: 14px;
	font-weight: 500;
	color: #ffffffe6;
	line-height: 1
}

.pc-status {
	font-size: 14px;
	color: #ffffffb3;
	line-height: 1
}

.pc-contact-btn {
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #ffffffe6;
	cursor: pointer;
	transition: all .2s ease;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px)
}

.pc-contact-btn:hover {
	border-color: #fff6;
	transform: translateY(-1px);
	transition: all .2s ease
}

.pc-content {
	max-height: 100%;
	overflow: hidden;
	text-align: center;
	position: relative;
	transform: translate3d(calc(var(--pointer-from-left)* -6px+ 3px),
		calc(var(--pointer-from-top)* -6px+ 3px), .1px) !important;
	z-index: 5;
	mix-blend-mode: luminosity
}

.pc-details {
	width: 100%;
	position: absolute;
	top: 3em;
	display: flex;
	flex-direction: column
}

.pc-details h3 {
	font-weight: 600;
	font-size: min(5svh, 3em);
	margin: 0;
	background-image: linear-gradient(to bottom, #fff, #6f6fbe);
	background-size: 1em 1.5em;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	-webkit-background-clip: text
}

.pc-details p {
	font-weight: 600;
	position: relative;
	top: -8px;
	white-space: nowrap;
	font-size: 16px;
	margin: 0 auto;
	width: min-content;
	background-image: linear-gradient(to bottom, #fff, #4a4ac0);
	background-size: 1em 1.5em;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	-webkit-background-clip: text
}

/* 
@media ( max-width : 768px) {
	.pc-card {
		height: 70svh;
		max-height: 450px
	}
	.pc-details {
		top: 2em
	}
	.pc-details h3 {
		font-size: min(4svh, 2.5em)
	}
	.pc-details p {
		font-size: 14px
	}
	.pc-user-info {
		bottom: 15px;
		left: 15px;
		right: 15px;
		padding: 10px 12px
	}
	.pc-mini-avatar {
		width: 28px;
		height: 28px
	}
	.pc-user-details {
		gap: 10px
	}
	.pc-handle {
		font-size: 13px
	}
	.pc-status {
		font-size: 10px
	}
	.pc-contact-btn {
		padding: 6px 12px;
		font-size: 11px
	}
} */

@media ( max-width : 480px) {
	.pc-card {
		height: 60svh;
		max-height: 380px
	}
	.pc-details {
		top: 1.5em
	}
	.pc-details h3 {
		font-size: min(3.5svh, 2em)
	}
	.pc-details p {
		font-size: 12px;
		top: -8px
	}
	.pc-user-info {
		bottom: 12px;
		left: 12px;
		right: 12px;
		padding: 8px 10px;
		border-radius: 50px
	}
	.pc-mini-avatar {
		width: 24px;
		height: 24px
	}
	.pc-user-details {
		gap: 8px
	}
	.pc-handle {
		font-size: 12px
	}
	.pc-status {
		font-size: 9px
	}
	.pc-contact-btn {
		padding: 5px 10px;
		font-size: 10px;
		border-radius: 50px
	}
}

@media ( max-width : 320px) {
	.pc-card {
		height: 55svh;
		max-height: 320px
	}
	.pc-details h3 {
		font-size: min(3svh, 1.5em)
	}
	.pc-details p {
		font-size: 11px
	}
	.pc-user-info {
		padding: 6px 8px;
		border-radius: 50px
	}
	.pc-mini-avatar {
		width: 20px;
		height: 20px
	}
	.pc-user-details {
		gap: 6px
	}
	.pc-handle {
		font-size: 11px
	}
	.pc-status {
		font-size: 8px
	}
	.pc-contact-btn {
		padding: 4px 8px;
		font-size: 9px;
		border-radius: 50px
	}
}

:root {
	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	font-weight: 400;
	color-scheme: light dark;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

a {
	font-weight: 500;
	color: #646cff;
	text-decoration: inherit
}

a:hover {
	color: #535bf2
}

body {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
  background-color: #fff !important;
	min-width: 320px;
	min-height: 100vh
}

h1 {
	font-size: 3.2em;
	line-height: 1.1
}

button {
	border-radius: 8px;
	border: 1px solid transparent;
	padding: .6em 1.2em;
	font-size: 1em;
	font-weight: 500;
	font-family: inherit;
	background-color: #1a1a1a;
	cursor: pointer;
	transition: border-color .25s
}

button:hover {
	border-color: #646cff
}

button:focus, button:focus-visible {
	outline: 4px auto -webkit-focus-ring-color
}


}