@charset "utf-8";
/* MAIN SCREENS — 눌러서 크게 보기 (포트폴리오 상세에서만 읽는다)
   ============================================================================
   ※ 다른 분이 손대는 파일(style.css · renewal-fix.css)과 섞이지 않게 따로 두었다.
     나중에 합칠 때 이 파일만 들어내면 된다.

   레이어(.wv-lightbox) 의 기본 모양은 renewal-fix.css 에 이미 있다.
   여기서는 **거기 없는 것만** 더한다 — 앞뒤로 넘기는 단추, 사진 순번,
   그리고 목록 사진이 가운데가 아니라 **위쪽**부터 보이게 하는 것.            */

/* ── 목록 사진은 위쪽부터 보여 준다 ──────────────────────
   화면 캡처라 가운데를 잘라 보여 주면 정작 중요한 머리 부분이 안 보인다. */
.wv-screens img { object-position: top center; }

/* ── 레이어 — 사진과 설명을 한 덩어리로 ───────────────────
   화면 캡처는 세로로 아주 길 때가 많다(621×2714 같은 것).
   높이에 억지로 맞추면 손톱만 해져서 「확대」가 안 되므로,
   **원래 너비 그대로 두고 레이어를 스크롤해서** 본다.              */
.wv-lightbox {
	justify-content: flex-start;   /* 길면 위가 안 잘리게 */
	overflow: auto;
	overscroll-behavior: contain;
}
.wv-lightbox__fig {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	margin: auto 0;                /* 짧으면 가운데, 길면 위에서부터 */
}
.wv-lightbox__fig img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: none;              /* 높이로 줄이지 않는다 */
	object-fit: contain;
	cursor: default;
}
/* 스크롤해도 닫기 단추는 제자리에 (화살표는 아래 규칙에서 함께 정한다) */
.wv-lightbox__close { position: fixed; }

/* 앞·뒤로 넘기기 */
.wv-lightbox__nav {
	position: fixed;           /* 레이어가 스크롤돼도 제자리에 */
	top: 50%;
	width: 56px;
	height: 56px;
	margin-top: -28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.wv-lightbox__nav:hover { background: rgba(255, 255, 255, .28); }
.wv-lightbox__nav:active { transform: scale(.94); }
.wv-lightbox__nav svg { width: 26px; height: 26px; display: block; margin: 0 auto; }
.wv-lightbox__nav--prev { left: 28px; }
.wv-lightbox__nav--next { right: 28px; }
.wv-lightbox__nav[hidden] { display: none; }

/* 몇 번째 사진인지 */
.wv-lightbox__count {
	margin: 6px 0 0;
	color: rgba(255, 255, 255, .6);
	font-family: var(--font-num, inherit);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
}

/* 레이어가 열려 있는 동안 뒤쪽이 따라 움직이지 않게 */
html.wv-lb-open, html.wv-lb-open body { overflow: hidden; }

@media (max-width: 900px) {
	.wv-lightbox__nav { width: 44px; height: 44px; margin-top: -22px; }
	.wv-lightbox__nav svg { width: 20px; height: 20px; }
	.wv-lightbox__nav--prev { left: 10px; }
	.wv-lightbox__nav--next { right: 10px; }
}

/* 「움직임 줄이기」를 켠 분 */
@media (prefers-reduced-motion: reduce) {
	.wv-lightbox { animation: none; }
	.wv-lightbox__nav { transition: none; }
}


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

.wv-screens figure { position: relative; }
.wv-screens figure::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 6px;        /* 틀 안쪽(16 − 흰 테두리 10) */
	padding: 15px;             /* = 테두리 두께 */
	--wv-sweep: 0deg;
	background: conic-gradient(from -135deg,
		#ffd76a 0deg,
		#ff7ac4 calc(var(--wv-sweep) * .35),
		#58e0ff calc(var(--wv-sweep) * .7),
		#ffffff var(--wv-sweep),
		rgba(255, 255, 255, 0) var(--wv-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: --wv-sweep .75s cubic-bezier(.3, .8, .3, 1);
	pointer-events: none;
}
.wv-screens button:hover figure::after,
.wv-screens button:focus-visible figure::after { --wv-sweep: 360deg; }

@media (prefers-reduced-motion: reduce) {
	.wv-screens figure::after { transition: none; }
}