@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

.contain,.yp-wide {width:100%; max-width:var(--frame-w); padding-left:var(--margin-x); padding-right:var(--margin-x); margin:0 auto;}
.contain:after {content:""; display:block; clear:both;}
.icon {display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; line-height:0;}
.icon img {display:block; width:100%; height:100%;}
.icon16 {width:16px; height:16px;}
.icon20 {width:20px; height:20px;}
.icon24 {width:24px; height:24px;}
.icon32 {width:32px; height:32px;}
#ws-wrapper {display:flex; min-height:100vh;}

#ws-header {width:200px; background:#fafafa; box-shadow:0 0 5px rgba(0,0,0,.2);}

.ws-menu .ui {display:block; padding:13px 0; background:#5e31a1; color:#fff; font-size:18px; font-weight:700; line-height:1.5em; letter-spacing:-.03em; text-align:center; border-bottom:2px solid #3c2065;}
.ws-menu h2 {font-family:"Roboto",sans-serif; font-size:15px; color:#fff; line-height:1.3em; padding:7px 0; text-align:center; background:#7952b3; }
.ws-menu ul {display:flex; flex-wrap:wrap;}
.ws-menu ul li {width:100%; border-bottom:1px solid #e5e5e5;}
.ws-menu ul li.w50 {width:50%; border-right:1px solid #e5e5e5;}
.ws-menu ul li.w50:nth-child(2n) {border-right:0;}
.ws-menu ul li a {display:block; color:#333; text-decoration:none; font-size:13px; font-weight:300; line-height:1.4em; letter-spacing:-.04em; padding:5px 5px 5px 11px;}
.ws-menu ul li a:hover,
.ws-menu ul li.active a {background:#eee; color:#653ba4; font-weight:500; padding-left:14px;}

#ws-content {flex:1 1 auto; min-width:0; width:1%; padding:30px;}

.ws-title {display:flex; align-items:center; padding-bottom:15px; margin-bottom:50px; border-bottom:1px solid #ddd;}
.ws-title h2 {flex:1 1 auto; min-width:0; width:1%; font-size:30px; line-height:1.3em; letter-spacing:-.04em;}

.btn-psd-download {display:inline-block; padding:8px 20px; font-family:"Roboto",sans-serif; color:#fff; font-size:16px; font-weight:500; line-height:1.3em; background:#7952b3; border-radius:4px;}
 
.ws-real-cont {max-width:1200px; margin:0 auto;}

.notice-bar {position:sticky; top:0; z-index:111; display:flex; align-items:center; justify-content:center; min-height:var(--notice-h); height:var(--notice-h); padding:0 var(--margin-x); box-sizing:border-box; text-align:center; background:#111113; border-bottom:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.88); font-size:13px; line-height:1.4em;}
.notice-bar a {color:var(--brand-green); font-weight:600;}
.notice-bar .sep {margin:0 8px; opacity:.4;}
/* header */
#header {position:sticky; top:0; left:0; width:100%; height:var(--header-height); z-index:101; background:#fff; border-bottom:1px solid #ddd; transition:background .35s var(--ease-out), border-color .35s var(--ease-out);}
#header .contain {position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:100%; z-index:10;}
#header .contain::after {content:none;}
.sitelogo {position:relative; z-index:2; justify-self:start; background:none;}
.sitelogo a {display:flex; align-items:center; position:relative;}
.sitelogo img {display:block; width:auto; height:48px; visibility:visible;}
.sitelogo .site-logo-off {display:none;}
.util {display:flex; align-items:center; justify-content:flex-end; gap:8px; justify-self:end; z-index:2;}
.header-auth {display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 16px; border-radius:var(--r-full); font-size:14px; font-weight:600; letter-spacing:-.02em; line-height:1.2em; white-space:nowrap;}
.header-auth--join {color:#fff; background:#121212; border:1px solid #121212;}
.header-auth--login {color:#121212; background:transparent; border:1px solid #121212;}
.mobile-auth {display:none; padding:20px; gap:8px;}
.mobile-auth .header-auth {flex:1;}
#gnb {text-align:center; flex:none; width:auto; min-width:0; justify-self:center;}
#gnb>ul {display:flex; justify-content:center;}
#gnb>ul>li {position:relative; padding:0 28px;}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; flex-direction:column; justify-content:center; height:var(--header-height); color:#121212; font-size:18px; font-weight:600; letter-spacing:-.03em; line-height:1.3em;}
#gnb>ul>li:hover>a,#gnb>ul>li.active>a {color:var(--color-primary);}

/* 단체형 gnb */
#gnb .submenu {position:absolute; left:0; width:100%; height:0; overflow:hidden; text-align:center;}
#gnb .submenu>ul {padding:20px 10px 60px;}
#gnb .submenu>ul>li>a {display:block; padding:10px 0; color:#454545; font-size:16px; line-height:1.33em; font-weight:400;}
#gnb>ul>li:hover .submenu {background:#fff;}
#gnb>ul>li:hover .submenu>ul>li>a {color:#505050;}
#gnb>ul>li:hover .submenu>ul>li>a:hover,#gnb .submenu>ul>li.active>a {color:var(--color-primary); font-weight:600;}
.submenu-bg {display:none; position:absolute; width:100%; left:0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #eee;}
.list-icon { width:22px; height:16px; text-align:center; text-indent:-9999em; z-index:50; transition:all 0.5s linear; display: none; position: relative;}
.list-icon span {position:absolute; right:0; top:50%; margin-top:0px; height:2px; background:#121212; left: 0; }
.list-icon span:before,
.list-icon span:after {content:" "; position:absolute; left:0; right:0; height:2px; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s; }
.list-icon span:before {top:-8px; transition-property:top, transform; background:#121212; content: "only"; }
.list-icon span:after {bottom:-8px; transition-property:bottom, transform; background:#121212; }

#header.hover,#header.move {background:#fff; border-bottom-color:#ddd;}
#header.hover #gnb>ul>li>a,#header.move #gnb>ul>li>a {color:#121212;}
#header.hover #gnb>ul>li>a:hover,#header.hover #gnb>ul>li.active>a,#header.move #gnb>ul>li>a:hover,#header.move #gnb>ul>li.active>a {color:var(--color-primary);}
#header.hover .list-icon span,#header.hover .list-icon span:before,#header.hover .list-icon span:after,#header.move .list-icon span,#header.move .list-icon span:before,#header.move .list-icon span:after {background:#121212;}
#header.hover .submenu-bg,#header.move .submenu-bg {background:#fff; border-color:#ddd;}
#header.hover .header-auth--join,#header.move .header-auth--join {color:#fff; background:#121212; border-color:#121212;}
#header.hover .header-auth--login,#header.move .header-auth--login {color:#121212; background:transparent; border-color:#121212;}

.mobile-navigation {display:block; position:fixed; top:0; right:0; width:300px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .home {display:flex; align-items:center; height:80px; padding:0 20px; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul {border-top:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:10px 48px 10px 20px; display:block; color:#242424; font-size:17px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:11px; height:11px; border-right:2px solid #505050; border-bottom:2px solid #505050;}
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff; background:var(--color-primary);}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff;}
.mobile-navigation .nav-menu .submenu {display:none; background:#f8f8f8; color:#454545; font-size:15px; font-weight:400; line-height:1.5em;}
.mobile-navigation .nav-menu .submenu ul li {border-top:1px solid #e5e5e5;}
.mobile-navigation .nav-menu .submenu ul li a {display:block; padding:12px 20px;}
.mobile-navigation .nav-menu .submenu ul li a br { display: none;}
.mobile-navigation .nav-menu .submenu ul li a:hover {color:var(--color-primary);}
.mobile-navigation .close {position:absolute; top:25px; right:15px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:3px; background:#242424; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;} 

/* 메인비주얼 (hero 영역) */
.main-visual {position:relative; height:calc(100vh - var(--notice-h)); overflow:hidden; color:#fff; --mv-ctrl-b:50px; --mv-ctrl-r:var(--margin-x); --mv-btn:56px; --mv-btn-gap:10px; --mv-pager-gap:40px; --mv-pager-w:54px;}
.main-visual .items,.main-visual .slick-list,.main-visual .slick-track,.main-visual .slick-slide,.main-visual .slick-slide>div {height:100%;}
.main-visual .slick-slide {position:relative; overflow:hidden;}
.main-visual .item {position:relative; width:100%; height:100%; overflow:hidden;}
.main-visual .item::after {content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.62) 100%),linear-gradient(90deg,rgba(0,0,0,.48) 0%,transparent 58%);}
.main-visual .item .video-js,
.main-visual .item video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main-visual .item iframe {position:absolute; top:50%; left:50%; width:100%; height:100%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.main-visual .item img {position:absolute; inset:0; width:100%; height:100% !important; max-width:none; object-fit:cover; object-position:center; transform:scale(1.06); transition:transform 8s linear;}
.main-visual .slick-active .item img {transform:scale(1);}

.main-visual .caption {position:absolute; left:0; right:0; bottom:100px; top:auto; z-index:2; text-align:left; transform:none;}
.main-visual .caption .txt {width:100%; box-sizing:border-box; transform:translateX(-50px); opacity:0; transition:opacity 0s 2s, transform 0s 2s; color:#fff;}
.main-visual .items .slick-active .caption .txt {transform:translateX(0); opacity:1; transition:opacity 2s, transform 1s; transition-delay:.6s;}
.main-visual .items .reset-animation .caption .txt {transform:translateX(-50px); opacity:0; transition:all 0s;}
.main-visual .caption h2 {margin:0; font-size:clamp(3rem,5.5vw,5.5rem); font-weight:700; line-height:1.2em; letter-spacing:-.03em;}
.main-visual .caption h2:after {content:""; display:block; width:100vw; height:1px; margin:40px 0 20px; position:relative; left:50%; margin-left:-50vw; background:rgba(255,255,255,.2);}
.main-visual .caption p {margin:0; padding-right:240px; font-size:clamp(1.125rem,1.5vw,1.5rem); font-weight:400; line-height:1.3em; letter-spacing:-.03em; color:#fff; white-space:nowrap;}
.main-visual .slick-prev,.main-visual .slick-next {position:absolute; top:auto; bottom:var(--mv-ctrl-b); left:auto; z-index:5; width:var(--mv-btn); height:var(--mv-btn); padding:0; border:0; overflow:hidden; background-color:transparent; background-position:center; background-repeat:no-repeat; background-size:100% 100%; font-size:0; line-height:0; color:transparent; cursor:pointer; transition:transform .3s var(--ease-out);}
.main-visual .slick-prev:hover,.main-visual .slick-next:hover {transform:scale(1.06);}
.main-visual .slick-prev {right:calc(var(--mv-ctrl-r) + var(--mv-pager-w) + var(--mv-pager-gap) + var(--mv-btn) + var(--mv-btn-gap)); background-image:url("/images/icon-hero-prev.svg");}
.main-visual .slick-next {right:calc(var(--mv-ctrl-r) + var(--mv-pager-w) + var(--mv-pager-gap)); background-image:url("/images/icon-hero-next.svg");}
.main-visual-pager {position:absolute; right:var(--mv-ctrl-r); bottom:var(--mv-ctrl-b); z-index:5; display:flex; align-items:flex-end; gap:6px; min-height:var(--mv-btn); color:#fff;}
.main-visual-current {font-size:24px; font-weight:700; letter-spacing:-.03em; line-height:1em;}
.main-visual-total {font-size:16px; font-weight:700; letter-spacing:-.03em; line-height:1em; color:rgba(255,255,255,.5);}

/* 메인 컨텐츠 영역 */

/* 서브메인 */
.sub-wrap {background:#fff; padding:100px 0 40px;}
.sub-wrap .contain {display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(32px,4vw,80px);}
.sub-wrap .contain:after {content:none; display:none;}
.sub-wrap .left {flex:1 1 auto; min-width:0;}
.sub-wrap .left h4 {margin:0 0 16px; font-size:13px; font-weight:700; letter-spacing:.14em; line-height:1.4em; text-transform:uppercase; color:var(--brand-green);}
.sub-wrap .left h2 {margin:0 0 24px; font-size:clamp(40px,5vw,72px); font-weight:800; line-height:1.1em; letter-spacing:-.03em; color:#121212;}
.sub-wrap .left p {margin:0; max-width:44rem; font-size:20px; font-weight:500; line-height:1.6em; color:#121212; word-break:keep-all;}
.sub-wrap .lnb-wrap {flex:0 0 auto; align-self:flex-end; border:0; background:none;}
.sub-wrap .lnb {width:auto; max-width:none; margin:0;}
.sub-wrap .lnb .swiper {overflow:visible;}
.sub-wrap .lnb ul,.sub-wrap .lnb .swiper-wrapper {display:flex; justify-content:flex-end; align-items:flex-end; gap:44px;}
.sub-wrap .lnb ul li,.sub-wrap .lnb .swiper-slide {flex:0 0 auto; width:auto !important; border:0; background:none; text-align:left;}
.sub-wrap .lnb a {display:block; width:auto; height:auto; padding:0; background:none; color:#ccc; font-size:24px; font-weight:700; line-height:1.6em; letter-spacing:-.03em; white-space:nowrap;}
.sub-wrap .lnb a:hover,.sub-wrap .lnb li.active a,.sub-wrap .lnb .swiper-slide.active a {background:none; color:#121212;}

.sub-visual {position:relative; display:block; height:310px; margin:0 0 100px; overflow:hidden; clip-path:inset(0); background-color:#1a1a1c;}
.sub-visual:before {content:""; position:fixed; top:0; left:0; width:100%; height:100vh; background-repeat:no-repeat; background-position:center center; background-size:cover; pointer-events:none;}
.sub-visual.bg1:before {background-image:url("/images/sub/guide-visual.jpg");}
.sub-visual.bg2:before {background-image:url("/images/sub/explore-visual.jpg");}
.sub-visual.bg3:before {background-image:url("/images/sub/guide-visual.jpg");}
.sub-visual.bg4:before {background-image:url("/images/sub/apply-visual.jpg");}
.sub-visual.bg5:before {background-image:url("/images/sub/sub-visual.jpg");}

.lnb-wrap {position:relative;}
.lnb {margin:0 auto;}
.lnb ul {display:flex;}
.lnb ul li {flex:0 0 auto;}
.lnb ul li a {display:block;}

#contArea {max-width:1770px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}
body.page-about #contArea,
body.page-explore #contArea,
body.page-gallery #contArea,
body.page-apply #contArea,
body.page-member #contArea {max-width:var(--frame-w); padding-left:var(--margin-x); padding-right:var(--margin-x);}

.sub-title { position: relative; display: none; } 

.real-cont {min-height:300px; padding-bottom: 180px;}
.real-cont2 { padding-bottom: 0; }

/* footer */
#footer {width:100%; z-index:1; position:relative; overflow:hidden; background:#121212; color:#fff; padding:0 0 60px; text-align:left; font-family:var(--font-display);}
.footer-bar {border-bottom:1px solid rgba(255,255,255,.2);}
#footer .contain,.footer-bar-inner,.footer-body {max-width:1600px; padding-left:30px; padding-right:30px;}
.footer-bar-inner:after,.footer-body:after {content:none; display:none;}
.footer-bar-inner {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; min-height:90px; min-width:0;}
.footer-menu,.footer-policy {display:flex; align-items:center; flex-wrap:wrap; min-width:0;}
.footer-menu {gap:50px;}
.footer-menu a {font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.03em; color:#fff; opacity:.5; white-space:nowrap;}
.footer-menu a:hover {opacity:1; text-decoration:underline; text-underline-offset:3px;}
.footer-policy {gap:30px;}
.footer-policy a {font-size:16px; font-weight:500; line-height:1.4em; letter-spacing:-.03em; color:#fff; white-space:nowrap;}
.footer-policy a.is-muted {font-weight:400; opacity:.5;}
.footer-policy a:not(.is-muted):hover {text-decoration:underline; text-underline-offset:3px;}
.footer-body {display:flex; align-items:flex-start; justify-content:space-between; gap:clamp(40px,6vw,80px); margin-top:60px; min-width:0;}
.footer-info {margin:0; display:flex; flex-direction:column; gap:20px; min-width:0;}
.footer-info-row {display:flex; align-items:center; gap:30px; margin:0; min-width:0;}
.footer-info-row dt {flex:0 0 94px; margin:0; font-size:16px; font-weight:700; line-height:1.4em; letter-spacing:-.03em; color:#fff;}
.footer-info-row dd {margin:0; min-width:0; font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.03em; color:rgba(255,255,255,.5);}
.footer-aside {display:flex; flex-direction:column; align-items:flex-end; gap:40px; min-width:0; max-width:100%;}
.footer-logo {display:block; line-height:0;}
.footer-logo img {display:block; width:110px; height:56px; object-fit:contain; object-position:right center; opacity:.2;}
.footer-actions {display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px;}
.footer-link-btn {display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border-radius:8px; background:rgba(255,255,255,.2); font-size:14px; font-weight:600; line-height:1.4em; letter-spacing:-.03em; color:rgba(255,255,255,.5); white-space:nowrap;}
.footer-link-btn:hover {background:#fff; color:#121212;}
.footer-link-icon {display:block; flex-shrink:0; width:16px; height:16px; color:rgba(255,255,255,.5);}
.footer-link-btn:hover .footer-link-icon {color:#121212;}
#footer .copyright {margin:0; max-width:100%; font-size:14px; font-weight:400; line-height:1.4em; letter-spacing:-.03em; text-align:right; color:rgba(255,255,255,.5);}
#footer .copyright .design-credit {color:inherit; font-size:inherit;}
#footer .copyright .design-credit:hover {text-decoration:underline;}
.scroll-top {display:none;}

/* 메인 히어로 헤더 — hover = #header.hover (gnb.js) */
body.hero-ready {background:var(--surface-dark);}
body.hero-ready .notice-bar {position:relative; top:auto; background:rgba(0,0,0,.55);}
body.hero-ready.is-scrolled .notice-bar,body:has(#header.hover) .notice-bar {background:#000;}
body.hero-ready #header {position:relative; top:auto; background:transparent; border-bottom-color:transparent;}
body.hero-ready #header .site-logo-on {display:none;}
body.hero-ready #header .site-logo-off {display:block;}
body.hero-ready #header #gnb>ul>li>a {color:rgba(255,255,255,.92);}
body.hero-ready #header #gnb>ul>li.active>a,body.hero-ready #header:not(.hover):not(.move) #gnb>ul>li>a:hover {color:var(--brand-green);}
body.hero-ready #header:not(.hover):not(.move) .header-auth--join {color:#121212; background:#fff; border-color:#fff;}
body.hero-ready #header:not(.hover):not(.move) .header-auth--login {color:#fff; background:transparent; border-color:rgba(255,255,255,.55);}
body.hero-ready #header .list-icon span,body.hero-ready #header .list-icon span:before,body.hero-ready #header .list-icon span:after {background:#fff;}
body.hero-ready .yp-hero,body.hero-ready .main-visual {margin-top:calc(-1 * var(--header-height));}
body.hero-ready #header.hover,body.hero-ready #header.move {background:#fff; border-bottom-color:#ddd;}
body.hero-ready #header.hover .site-logo-on,body.hero-ready #header.move .site-logo-on {display:block;}
body.hero-ready #header.hover .site-logo-off,body.hero-ready #header.move .site-logo-off {display:none;}
body.hero-ready #header.hover #gnb>ul>li>a,body.hero-ready #header.move #gnb>ul>li>a {color:#121212;}
body.hero-ready #header.hover #gnb>ul>li>a:hover,body.hero-ready #header.hover #gnb>ul>li.active>a,body.hero-ready #header.move #gnb>ul>li>a:hover,body.hero-ready #header.move #gnb>ul>li.active>a {color:var(--brand-green);}
body.hero-ready #header.hover #gnb .submenu>ul>li>a,body.hero-ready #header.move #gnb .submenu>ul>li>a {color:#454545;}
body.hero-ready #header.hover #gnb .submenu>ul>li>a:hover,body.hero-ready #header.move #gnb .submenu>ul>li>a:hover {color:var(--brand-green);}
body.hero-ready #header.hover .header-auth--join,body.hero-ready #header.move .header-auth--join {color:#fff; background:#121212; border-color:#121212;}
body.hero-ready #header.hover .header-auth--login,body.hero-ready #header.move .header-auth--login {color:#121212; background:transparent; border-color:#121212;}
body.hero-ready #header.hover .list-icon span,body.hero-ready #header.hover .list-icon span:before,body.hero-ready #header.hover .list-icon span:after,body.hero-ready #header.move .list-icon span,body.hero-ready #header.move .list-icon span:before,body.hero-ready #header.move .list-icon span:after {background:#121212;}
body.hero-ready #header.hover .submenu-bg,body.hero-ready #header.move .submenu-bg {background:#fff; border-color:#ddd;}
#gnb .submenu>ul {padding:var(--space-20,20px) var(--space-10,10px) calc(var(--space-20,20px) + 40px);}

/* 메인 공통 */
.yp-section-title {font-size:clamp(2rem,4.2vw,3.5rem); font-weight:700; line-height:1.08em; letter-spacing:-.04em; color:var(--ink-soft);}
.yp-section-lead {margin-top:20px; max-width:42rem; font-size:clamp(1rem,1.35vw,1.125rem); line-height:1.65em; color:var(--ink-muted);}
.yp-section-body {margin-top:16px; max-width:38rem; font-size:1rem; line-height:1.7em; color:var(--stone);}
.yp-link-arrow {display:inline-flex; align-items:center; gap:10px; margin-top:28px; font-size:15px; font-weight:600; color:var(--ink-soft); text-decoration:none;}
.yp-link-arrow__label {display:inline; color:inherit;}
.yp-link-arrow__line {display:inline-block; margin-left:10px; width:28px; overflow:hidden; vertical-align:middle; font-size:12px; font-weight:400; line-height:1em; white-space:nowrap; transition:width .25s var(--ease-out);}
.yp-btn {display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 28px; border-radius:var(--r-full); font-size:15px; font-weight:600; letter-spacing:-.02em; text-decoration:none; white-space:nowrap; cursor:pointer;}
.yp-link-arrow.is-unlinked,.yp-btn.is-unlinked,.yp-reels-card.is-unlinked {cursor:default;}

/* 히어로 */
.yp-hero {position:relative; min-height:100dvh; display:flex; align-items:stretch; overflow:hidden; color:#fff;}
.yp-hero-slider {position:absolute; inset:0; z-index:0;}
.yp-hero-slide {position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease-out);}
.yp-hero-slide.is-active {opacity:1; z-index:1;}
.yp-hero-slide img {width:100%; height:100%; object-fit:cover; object-position:center center; transform:scale(1.06); transition:transform 8s linear;}
.yp-hero-slide.is-active img {transform:scale(1);}
.yp-hero-scrim {position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.62) 100%),linear-gradient(90deg,rgba(0,0,0,.48) 0%,transparent 58%);}
.yp-hero-inner {position:relative; z-index:3; flex:1; width:100%; min-height:100dvh; box-sizing:border-box;}
.yp-hero-body {display:flex; flex-direction:column; justify-content:flex-end; min-height:100dvh; padding-top:calc(var(--notice-h) + var(--header-height)); padding-bottom:100px; box-sizing:border-box;}
body.hero-ready .yp-hero-body {padding-top:var(--header-height);}
.yp-hero-content-group {margin-top:20px;}
.yp-hero-head {display:flex; flex-direction:column; gap:40px; margin-bottom:20px;}
.yp-hero-copy {width:100%;}
.yp-hero-title {margin:0; font-size:clamp(3rem,5.5vw,5.5rem); font-weight:700; line-height:1.2em; letter-spacing:-.03em;}
.yp-hero-rule {width:calc(100% + var(--margin-x) * 2); max-width:none; margin-left:calc(var(--margin-x) * -1); height:1px; background:rgba(255,255,255,.2);}
.yp-hero-lead {margin:0; max-width:none; font-size:clamp(1.125rem,1.5vw,1.5rem); font-weight:400; line-height:1.3em; letter-spacing:-.03em; color:#fff; white-space:nowrap;}
.yp-hero-controls {display:flex; align-items:flex-end; justify-content:flex-end; gap:40px; margin-top:0;}
.yp-hero-nav {display:flex; gap:10px;}
.yp-hero-btn {display:block; width:56px; height:56px; padding:0; border:0; background:transparent; cursor:pointer; transition:transform .3s var(--ease-out), opacity .3s var(--ease-out);}
.yp-hero-btn:hover {transform:scale(1.06);}
.yp-hero-btn img {display:block; width:100%; height:100%;}
.yp-hero-pager {display:flex; align-items:flex-end; gap:6px; color:#fff;}
.yp-hero-current {font-size:24px; font-weight:700; letter-spacing:-.03em; line-height:1em;}
.yp-hero-total {font-size:16px; font-weight:700; letter-spacing:-.03em; line-height:1em; color:rgba(255,255,255,.5);}

/* 소개 */
.yp-about {padding:0; background:var(--canvas); overflow-x:clip;}
.yp-about-split {display:grid; grid-template-columns:50% 1fr; align-items:stretch; height:980px; max-height:980px;}
.yp-about-visual {margin:0; height:100%; overflow:hidden;}
.yp-about-visual img {display:block; width:100%; height:100%; object-fit:cover; object-position:center;}
.yp-about-text {display:flex; flex-direction:column; justify-content:center; padding:var(--sec-pd) var(--margin-x); padding-left:clamp(80px,calc(5vw + 40px),120px); max-width:720px; overflow:hidden;}
.yp-about-text [data-aos="fade-left"] {transform:translate3d(80px,0,0); opacity:0;}
.yp-about-text [data-aos="fade-left"].aos-animate {transform:translate3d(0,0,0); opacity:1;}
.yp-about-text .yp-section-title {font-size:64px; line-height:1.35em;}
.yp-about-text .yp-section-title .yp-about-title-line2 {display:block; white-space:nowrap;}
.yp-about-text .yp-section-lead {margin-top:40px; font-size:20px; line-height:1.65em; color:#121212;}
.yp-about-text .yp-section-body {font-size:16px; line-height:1.7em; color:#505050;}
.yp-about-text .yp-link-arrow {align-self:flex-start; width:fit-content; max-width:100%; margin-top:68px; font-size:18px;}
.yp-about-text .yp-link-arrow:hover .yp-link-arrow__label,.yp-gallery-panel .yp-link-arrow:hover .yp-link-arrow__label,.yp-reels-head .yp-link-arrow:hover .yp-link-arrow__label {background-image:linear-gradient(90deg,var(--brand-cyan) 0%,var(--brand-green) 100%); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;}
.yp-about-text .yp-link-arrow:hover .yp-link-arrow__line,.yp-gallery-panel .yp-link-arrow:hover .yp-link-arrow__line,.yp-reels-head .yp-link-arrow:hover .yp-link-arrow__line {width:40px;}

/* 갤러리 핀 */
.yp-gallery {--frame-h:min(68vh,760px); --frame-gap:24px; --peek:72px; padding:0; background:var(--surface-dark); color:#fff;}
.yp-gallery-pin {height:400vh;}
.yp-gallery-sticky {position:sticky; top:0; height:100dvh; overflow:hidden;}
.yp-gallery-stage {display:grid; grid-template-columns:minmax(280px,.38fr) minmax(0,1fr); align-items:center; gap:clamp(32px,4vw,72px); height:100%;}
.yp-gallery-copy[data-aos="fade-left"],.yp-gallery-visual[data-aos="fade-right"] {opacity:0;}
.yp-gallery-copy[data-aos="fade-left"] {transform:translate3d(-56px,0,0);}
.yp-gallery-visual[data-aos="fade-right"] {transform:translate3d(56px,0,0);}
.yp-gallery-copy[data-aos="fade-left"].aos-animate,.yp-gallery-visual[data-aos="fade-right"].aos-animate {transform:translate3d(0,0,0); opacity:1;}
.yp-gallery-copy {position:relative; display:flex; flex-direction:column; justify-content:center; align-self:center; width:100%; height:calc(var(--frame-h) + var(--peek)); min-height:0; overflow:hidden;}
.yp-gallery-copy-list {position:relative; width:100%; height:100%;}
.yp-gallery-pager {position:absolute; left:0; bottom:0; display:flex; align-items:baseline; gap:8px; color:#fff; user-select:none;}
.yp-gallery-panel {position:absolute; top:50%; left:0; width:100%; opacity:0; visibility:hidden; transform:translate(28px,-50%); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out), visibility .55s; pointer-events:none;}
.yp-gallery-panel.is-active {opacity:1; visibility:visible; transform:translate(0,-50%); pointer-events:auto;}
.yp-gallery-chip {display:inline-block; margin-bottom:8px; font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--brand-green);}
.yp-gallery-title {margin:0; font-size:clamp(3rem,5.5vw,5.5rem); font-weight:700; line-height:1.2em; letter-spacing:-.03em; color:#fff;}
.yp-gallery-lead {margin-top:28px; max-width:22rem; font-size:20px; line-height:1.7em; color:rgba(255,255,255,.78);}
.yp-gallery-panel .yp-link-arrow {width:fit-content; max-width:100%; margin-top:76px; font-size:18px; color:rgba(255,255,255,.92);}
.yp-gallery-mimg {display:none;}
.yp-gallery-current {font-size:clamp(2.5rem,4vw,3.5rem); font-weight:700; line-height:1em; letter-spacing:-.04em;}
.yp-gallery-slash {font-size:1.25rem; font-weight:500; opacity:.45;}
.yp-gallery-total {font-size:1.25rem; font-weight:500; opacity:.55;}
.yp-gallery-visual {position:relative; height:calc(var(--frame-h) + var(--peek)); max-height:100%; overflow:hidden;}
.yp-gallery-track {display:flex; flex-direction:column; gap:var(--frame-gap); will-change:transform; transition:transform .75s var(--ease-out);}
.yp-gallery-track[data-index="0"] {transform:translate3d(0,0,0);}
.yp-gallery-track[data-index="1"] {transform:translate3d(0,calc(-1 * (var(--frame-h) + var(--frame-gap))),0);}
.yp-gallery-track[data-index="2"] {transform:translate3d(0,calc(-2 * (var(--frame-h) + var(--frame-gap))),0);}
.yp-gallery-track[data-index="3"] {transform:translate3d(0,calc(-3 * (var(--frame-h) + var(--frame-gap))),0);}
.yp-gallery-frame {flex:0 0 var(--frame-h); height:var(--frame-h); margin:0; border-radius:32px; overflow:hidden; background:#1c1c1f;}
.yp-gallery-frame img {display:block; width:100%; height:100%; object-fit:cover; object-position:center;}

/* 릴스 */
.yp-reels {--reels-h:min(52vh,520px); --reels-gap:16px; --reels-fade-w:clamp(72px,12vw,160px); padding:var(--sec-pd) 0; overflow:hidden; border-top:1px solid rgba(255,255,255,.1); background:var(--surface-dark); color:#fff;}
.yp-reels-head {display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(24px,4vw,48px); margin-bottom:clamp(40px,5vw,72px);}
.yp-reels-head-copy {flex:1 1 auto; max-width:42rem; min-width:0;}
.yp-reels-head .yp-link-arrow {flex-shrink:0; align-self:flex-end; width:fit-content; max-width:100%; margin-top:0; font-size:18px; color:rgba(255,255,255,.92);}
.yp-reels-kicker {margin:0 0 8px; font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--brand-green);}
.yp-reels-title {margin:0; font-size:64px; font-weight:700; line-height:1.15em; letter-spacing:-.03em; color:#fff;}
.yp-reels-lead {margin:20px 0 0; font-size:20px; line-height:1.7em; color:rgba(255,255,255,.58);}
.yp-reels-head-copy [data-aos="fade-up"],.yp-reels-head .yp-link-arrow[data-aos="fade-up"],.yp-reels-viewport[data-aos="fade-up"] {transform:translate3d(0,48px,0); opacity:0;}
.yp-reels-head-copy [data-aos="fade-up"].aos-animate,.yp-reels-head .yp-link-arrow[data-aos="fade-up"].aos-animate,.yp-reels-viewport[data-aos="fade-up"].aos-animate {transform:translate3d(0,0,0); opacity:1;}
.yp-reels-viewport {position:relative; overflow:hidden; padding-left:var(--margin-x);}
.yp-reels-viewport::before,.yp-reels-viewport::after {content:""; position:absolute; top:0; z-index:2; width:var(--reels-fade-w); height:100%; pointer-events:none;}
.yp-reels-viewport::before {left:0; background:linear-gradient(90deg,var(--surface-dark) 0%,rgba(17,17,19,0) 100%);}
.yp-reels-viewport::after {right:0; background:linear-gradient(270deg,var(--surface-dark) 0%,rgba(17,17,19,0) 100%);}
.yp-reels-track {display:flex; width:max-content; will-change:transform; animation:yp-reels-marquee 42s linear infinite;}
.yp-reels-viewport:hover .yp-reels-track {animation-play-state:paused;}
.yp-reels-set {display:flex; flex-shrink:0; gap:var(--reels-gap); margin:0; padding:0 var(--reels-gap) 0 0; list-style:none;}
.yp-reels-set li {flex:0 0 auto; margin:0;}
.yp-reels-card {position:relative; display:block; width:calc(var(--reels-h) * 9 / 16); height:var(--reels-h); overflow:hidden; border-radius:16px; background:#1c1c1f; color:#fff;}
.yp-reels-card img {display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .6s var(--ease-out);}
.yp-reels-card::after {content:""; position:absolute; left:0; right:0; bottom:0; height:42%; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.62) 100%); pointer-events:none;}
.yp-reels-caption {position:absolute; left:16px; bottom:16px; z-index:1; font-size:14px; font-weight:600; letter-spacing:-.02em; line-height:1.3em; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.35);}
.yp-reels-card:hover img {transform:scale(1.04);}
@keyframes yp-reels-marquee {from {transform:translate3d(0,0,0);} to {transform:translate3d(-50%,0,0);}}

/* AI 영상 */
.yp-aivideo {padding:0; background:#000;}
.yp-aivideo-stage {position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:980px; overflow:hidden; background:url("/images/main/about-valley.png") center / cover no-repeat;}
.yp-aivideo-player {position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center;}
.yp-aivideo-dim {position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.48); pointer-events:none;}
.yp-aivideo-content {position:relative; z-index:2; width:100%; max-width:56rem; padding:0 var(--margin-x); text-align:center; color:#fff;}
.yp-aivideo-content [data-aos="fade-up"] {transform:translate3d(0,48px,0); opacity:0;}
.yp-aivideo-content [data-aos="fade-up"].aos-animate {transform:translate3d(0,0,0); opacity:1;}
.yp-aivideo-kicker {margin:0 0 8px; font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--brand-green);}
.yp-aivideo-title {margin:0; font-size:64px; font-weight:700; line-height:1.15em; letter-spacing:-.03em; color:#fff;}
.yp-aivideo-lead {margin:40px 0 0; font-size:20px; line-height:1.7em; color:rgba(255,255,255,.78);}
.yp-aivideo-lead-line {display:block;}
.yp-btn-aivideo {min-width:220px; min-height:56px; margin-top:80px; padding:0 40px; font-size:16px; color:#fff; background:rgba(255,255,255,.1); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2);}
.yp-btn-aivideo:hover {background:var(--brand-grad); border-color:transparent;}