@charset "utf-8";

/* GmarketSans */
@font-face {
	font-family:'GmarketSansMedium';
	src:url('/site/common/fonts/GmarketSansMedium.woff') format('woff'),
		url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
	font-weight:normal; font-style:normal; font-display:swap;
}
@font-face {
	font-family:'GmarketSansBold';
	src:url('/site/common/fonts/GmarketSansBold.woff') format('woff'),
		url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
	font-weight:normal; font-style:normal; font-display:swap;
}

/* reset */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, ul, li, img, button, svg {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent}
* {box-sizing:border-box}
body {background:#fff; font-family:'Noto Sans KR', sans-serif; letter-spacing:-0.02em; word-break:keep-all; -webkit-font-smoothing:antialiased}
ul, li {list-style:none}
a {text-decoration:none; color:#1B60AC}
a:hover {color:#003e85; text-decoration:none}
img {max-width:100%}
button {font-family:'Noto Sans KR', sans-serif; cursor:pointer}

.show425 {display:none !important}

/* layout */
#wrap {max-width:1200px; margin:0 auto; padding:28px 20px 90px}

/* header */
header > .inner {position:relative; overflow:hidden; border-radius:28px; background:linear-gradient(105deg,#eaf2fb 0%,#f6f9fd 55%,#fdf1ee 100%); display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:44px 44px 0}
.headerTextWrap {padding-bottom:40px; flex:1 1 340px; min-width:280px}
.headerTextWrap > .badge {display:inline-block; margin-bottom:18px; font-size:13px; font-weight:700; letter-spacing:0.02em; color:#fff; background:#E8614E; padding:7px 14px 8px; border-radius:99px}
.headerTextWrap > h1 {font-family:'GmarketSansBold','Noto Sans KR',sans-serif; font-size:clamp(26px,3.2vw,40px); line-height:1.25; letter-spacing:-0.03em; color:#1B60AC; font-weight:400}
.headerTextWrap > h1 > span {font-family:'GmarketSansBold','Noto Sans KR',sans-serif; color:#E8614E}
.headerTextWrap > h2 {margin-top:25px; font-family:'GmarketSansMedium','Noto Sans KR',sans-serif; font-size:clamp(18px,1.6vw,22px); font-weight:400; color:#5a6472; line-height:1.5}
.headerTextWrap > h2 > span {display:inline-block; margin-top:6px; font-family:'GmarketSansBold','Noto Sans KR',sans-serif; font-size:clamp(30px,3.6vw,46px); color:#111c2b; letter-spacing:-0.035em}
.headerTextWrap > .lead {margin-top:22px; font-size:15px; line-height:1.7; color:#6b7787}
.headerImg {flex:0 0 auto; align-self:flex-end; max-width:46%; min-width:200px}
.headerImg img {display:block; width:100%; height:auto; vertical-align:bottom}

/* list head */
.listHead {display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap}
.listHead > h3 {font-family:'GmarketSansBold','Noto Sans KR',sans-serif; font-size:22px; font-weight:400; color:#111c2b; letter-spacing:-0.03em}
.listHead > p {font-size:14px; color:#8b95a3}

/* videoList */
.videoListWrap {margin:54px 0 20px}
.videoList {display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:22px}
.videoList > li {border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 2px 10px rgba(17,28,43,.08); transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease}
.videoList > li:hover, .videoList > li:focus-within {transform:translateY(-6px); box-shadow:0 18px 38px rgba(17,28,43,.16)}
.videoList > li > button {display:block; width:100%; padding:0; border:0; background:#fff; text-align:left}
.videoItem .video {display:none} /* 영상 정보 보관용 (화면에 표시 안 함) */
.thum {position:relative; aspect-ratio:16/10; background:#e7ecf2}
.thum > img {width:100%; height:100%; object-fit:cover; display:block}
.thum:after {content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,20,35,0) 45%, rgba(10,20,35,.55) 100%)}
.thum > .badge {position:absolute; z-index:1; top:12px; left:12px; font-size:11px; font-weight:700; letter-spacing:.04em; color:#fff; background:rgba(10,20,35,.62); padding:5px 10px; border-radius:99px}
.playIcon {position:absolute; z-index:1; right:14px; bottom:-22px; width:52px; height:52px; border-radius:50%; background:#fff; box-shadow:0 6px 16px rgba(17,28,43,.18); display:flex; align-items:center; justify-content:center}
.textWrap {padding:18px 18px 20px; min-height:104px}
.textWrap > h3 {font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-0.03em; color:#111c2b}
.textWrap > h4 {margin-top:8px; font-size:12.5px; line-height:1.45; color:#9aa4b2; font-weight:400}

/* player */
.playerOverlay {position:fixed; inset:0; z-index:80; background:rgba(8,14,24,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; overscroll-behavior:contain; padding:24px; animation:wsiFade .22s ease}
.playerOverlay[hidden] {display:none}
.playerStage {width:min(940px, 94vw); flex:0 0 auto; margin:auto; display:flex; flex-direction:column; gap:16px; animation:wsiRise .3s cubic-bezier(.2,.7,.3,1)}
.playerStage.isShorts {width:min(420px, 92vw)}
.playerHead {display:flex; align-items:flex-start; justify-content:space-between; gap:16px; color:#fff}
.playerHead h4 {font-family:'GmarketSansBold','Noto Sans KR',sans-serif; font-size:22px; font-weight:400; letter-spacing:-0.03em; line-height:1.3}
.playerHead p {margin-top:6px; font-size:12.5px; color:rgba(255,255,255,.55); line-height:1.4}
.btnClose {flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:20px; line-height:1; transition:background .2s}
.btnClose:hover {background:rgba(255,255,255,.26)}
.playerTabs {display:flex; gap:8px}
.playerTabs[hidden] {display:none}
.playerTabs > button {font-size:13px; font-weight:600; padding:9px 16px; border-radius:99px; background:rgba(255,255,255,.12); color:rgba(255,255,255,.7); transition:background .2s}
.playerTabs > button:hover {background:rgba(255,255,255,.22)}
.playerTabs > button.on {background:#E8614E; color:#fff}
.playerFrame {position:relative; width:min(100%, calc((100vh - 250px) * 16 / 9)); aspect-ratio:16/9; margin:0 auto; border-radius:18px; overflow:hidden; background:#000; box-shadow:0 30px 70px rgba(0,0,0,.55)}
.playerStage.isShorts .playerFrame {aspect-ratio:9/16; width:min(100%, calc((100vh - 250px) * 9 / 16))}
.playerStage.hasTabs .playerFrame {width:min(100%, calc((100vh - 300px) * 16 / 9))}
.playerStage.hasTabs.isShorts .playerFrame {width:min(100%, calc((100vh - 300px) * 9 / 16))}
.playerFrame iframe {position:absolute; inset:0; width:100%; height:100%; border:0}
.playerFoot {display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.btnSound {display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; font-size:13px; font-weight:500; padding:10px 16px; border-radius:99px; transition:background .2s}
.btnSound:hover {background:rgba(255,255,255,.2)}
.playerNav {display:flex; align-items:center; gap:10px}
.btnNav {width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .2s}
.btnNav:hover {background:#E8614E}
.playerPos {font-size:12.5px; color:rgba(255,255,255,.5); min-width:56px; text-align:center}

@keyframes wsiFade {from {opacity:0} to {opacity:1}}
@keyframes wsiRise {from {opacity:0; transform:translateY(18px) scale(.98)} to {opacity:1; transform:none}}

@media screen and (max-width:1024px) {
	header > .inner {padding:36px 28px 0}
	.headerTextWrap {padding-bottom:36px}
}
@media screen and (max-width:768px) {
	#wrap {padding:20px 16px 70px}
	header > .inner {padding:32px 24px 0; justify-content:center}
	.headerTextWrap {text-align:center; padding-bottom:0}
	.headerImg {max-width:100%; position:relative; right:30px}
	.listHead {margin:40px 0 16px}
	.videoListWrap {margin:40px 0 16px}
	.videoList {grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px}
	.playerOverlay {padding:16px}
}
@media screen and (max-width:500px) {
	.videoList {grid-template-columns:1fr}
}
@media screen and (max-width:425px) {
	.show425 {display:block !important}
	.hide425 {display:none !important}
}