@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

*{box-sizing:border-box;}
html,body{margin:0; padding:0; height:100%; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
body{font-family:'Pretendard','Nanum Gothic',sans-serif; background:#000; overflow:hidden;}
img{border:0; display:block; -webkit-user-drag:none;}
a{text-decoration:none;}

#loading{position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center; background:#000;}
#loading .loading-logo{max-width:220px; margin:0 auto 16px;}
#loading .loading-text{color:#8b90a0; font-size:13px; letter-spacing:3px; text-align:center;}

#container{height:100vh; overflow-y:auto; scroll-snap-type:y mandatory; scrollbar-width:none; -ms-overflow-style:none;}
#container::-webkit-scrollbar{display:none; width:0; height:0;}
.section{position:relative; width:100%; height:100vh; overflow:hidden; scroll-snap-align:start; scroll-snap-stop:always;}
.section-bg-video{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none;}

.pre2-input{padding:0 16px; border:1px solid #c9a35f; background:linear-gradient(#f2e4bb,#cbaa63); color:#081732; outline:none; box-shadow:inset 0 2px 5px rgba(110,80,30,.28); transition:border-color .2s, box-shadow .2s; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;}
.pre2-input:focus{border-color:#f0cf88; box-shadow:inset 0 2px 5px rgba(110,80,30,.28), 0 0 22px 4px rgba(240,205,120,.75);}
.pre2-input::placeholder{color:#4a5470; font-size:16px; opacity:1;}
.pre2-chk{width:22px; height:22px; accent-color:#c0392b; cursor:pointer; margin:0;}

.guide-overlay{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:200; opacity:.5; pointer-events:none; display:none;}
#guide-ctrl{position:fixed; top:0; left:0; z-index:10005; display:flex; align-items:center; gap:12px; padding:8px 14px; background:rgba(0,0,0,.78); color:#fff; font-size:13px; font-family:'Pretendard','Nanum Gothic',sans-serif;}
#guide-ctrl label{display:flex; align-items:center; gap:4px; cursor:pointer;}
#guide-ctrl input[type=range]{width:110px;}

.stage{position:absolute; top:50%; left:50%; width:1920px; height:1080px; transform:translate(-50%,-50%) scale(var(--stage-scale,1)); transform-origin:center center; z-index:1;}
.stage--fixed{position:fixed; pointer-events:none;}
.stage__item{position:absolute; display:block; height:auto;}

.side-nav__item{position:absolute; display:block; cursor:pointer; pointer-events:auto;}
.side-nav__item .nav-img{display:block;}
.side-nav__item .nav-img--on{display:none;}
.side-nav__item.is-on .nav-img--off{display:none;}
.side-nav__item.is-on .nav-img--on{display:block;}

#fixed-arrow-visual{position:fixed; right:28px; bottom:24px; z-index:5; cursor:pointer; transition:transform .3s ease; animation:arrowBounce 1.8s ease-in-out infinite;}
#fixed-arrow-visual img{display:block; height:auto;}
#fixed-arrow-visual.rotate-up{transform:rotate(180deg);}
@keyframes arrowBounce{0%,100%{bottom:24px;} 50%{bottom:34px;}}

.modal-overlay{position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6);}
.modal-content{width:min(92%,380px); padding:32px 28px 24px; background:#fff; text-align:center;}
.modal-message{margin-bottom:22px; font-size:15px; color:#222; line-height:1.6;}
.modal-button{height:46px; line-height:46px; background:#3186ff; color:#fff; font-size:15px; font-weight:700; cursor:pointer;}
.modal-button:hover{background:#1f6fe6;}

.agree-modal{position:fixed; inset:0; z-index:10002; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.6);}
.agree-modal__box{position:relative; width:min(96%,640px); max-height:86vh; overflow-y:auto; padding:40px 34px; background:#f4f4f4; color:#333;}
.agree-modal__close{position:absolute; top:10px; right:14px; border:0; background:none; font-size:26px; line-height:1; color:#999; cursor:pointer;}
.agree-modal__close:hover{color:#555;}
.agree-doc__title{margin:0 0 26px; text-align:center; font-size:20px; font-weight:800; color:#222;}
.agree-doc__desc{margin:0 0 32px; font-size:13px; line-height:1.75; color:#555; text-align:center;}
.agree-doc__lead{margin:0 0 22px; font-size:14px; line-height:1.6; color:#555;}
.agree-doc__note{margin:16px 0 0; font-size:13px; color:#666;}
.agree-doc__box{margin-top:22px; padding:18px 22px 20px; border:1px solid #d2d2d2; background:#fafafa;}
.agree-doc__box .agree-doc__sub{margin-top:0;}
.agree-doc__notes{margin:14px 0 0; padding:0; list-style:none; font-size:13px; line-height:1.8; color:#555;}
.agree-doc__notes li{position:relative; padding-left:13px;}
.agree-doc__notes li::before{content:"–"; position:absolute; left:0;}
.agree-doc__sub{margin:0 0 16px; text-align:center; font-size:18px; font-weight:700; color:#222;}
.agree-doc__table{width:100%; border-collapse:collapse; font-size:13px;}
.agree-doc__table th,.agree-doc__table td{border:1px solid #d2d2d2; padding:12px 10px; text-align:center; vertical-align:middle; line-height:1.5;}
.agree-doc__table th{background:#e9e9e9; font-weight:700; color:#333;}
.agree-doc__table td{color:#555;}

.section4 .footer{position:absolute; left:0; bottom:0; width:100%; z-index:1;}
#tail{width:100%; background:rgba(0,0,0,.6); border-top:1px solid rgba(255,255,255,.12);}
#tail .ft{width:1200px; max-width:92%; margin:0 auto; padding:16px 0;}
#tail .ft-head{display:flex; justify-content:space-between; align-items:center; gap:16px;}
#tail .ft-logo{display:flex; gap:20px; align-items:center;}
#tail .ft-logo img{max-height:26px; width:auto;}
#tail .ft-grade img{width:447px; max-width:100%; height:auto;}
#tail .ft-nav{margin-top:12px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.12);}
#tail .ft-nav a{color:#c7cbd4; font-weight:600; font-size:13px;}
#tail .ft-nav a:not(:last-child)::after{content:"|"; color:rgba(255,255,255,.2); font-weight:normal; margin:0 12px;}
#tail .ft-nav a.strong{color:#9db9ff;}
#tail .ft-info{margin-top:12px; overflow:hidden; color:#8b90a0; font-size:12px; line-height:20px;}
#tail .ft-info .ft-grade{float:right; margin:0 0 8px 24px;}
#tail .ft-info p{margin:0;}
#tail .ft-info a{color:#aab4c8; text-decoration:underline;}
#tail .ft-info span{color:rgba(255,255,255,.18); margin:0 8px;}
#tail .ft-info .copy{margin-top:10px; color:#6b7180;}

/* 온게이트·게임매니아: 기존 마크업 그대로 2행 2열로 배치해 높이 축소 */
#tail.tail--flask .ft{display:grid; grid-template-columns:390px minmax(0,1fr); column-gap:24px; row-gap:8px; padding:12px 0;}
#tail.tail--flask .ft-head{grid-column:1; grid-row:1;}
#tail.tail--flask .ft-nav{grid-column:2; grid-row:1; margin-top:0; padding-bottom:8px;}
#tail.tail--flask .ft-info{display:contents; line-height:18px;}
#tail.tail--flask .ft-info .ft-grade{grid-column:1; grid-row:2; float:none; margin:8px 0 0;}
#tail.tail--flask .ft-info .ft-grade img{width:390px;}
#tail.tail--flask .ft-info__text{grid-column:2; grid-row:2; min-width:0; color:#8b90a0; font-size:12px; line-height:18px;}
#tail.tail--flask .ft-info .copy{margin-top:6px;}

@media (max-width:768px){
	#tail .ft-head{flex-direction:column; gap:12px; align-items:flex-start;}
	#tail .ft-nav a{font-size:12px;}
	#tail.tail--flask .ft{display:block;}
	#tail.tail--flask .ft-nav{margin-top:8px;}
	#tail.tail--flask .ft-info{display:block; margin-top:8px;}
	#tail.tail--flask .ft-info .ft-grade{width:390px; max-width:100%; margin:0 0 10px auto;}
}

/* 섹션3 직업 전환 */
@font-face{font-family:'HeiroFlight'; src:url('https://imgcdn.topgame.kr/www/font/HEIROFLIGHTREGULAR.TTF') format('truetype'); font-display:swap;}
.s3char{transition:opacity .55s ease;}
.s3text{opacity:0; transform:translateX(110px); transition:opacity .22s ease, transform .34s cubic-bezier(.16,1,.3,1); pointer-events:none;}
.s3text.on{opacity:1; transform:translateX(0);}
.s3lab{position:absolute; font-family:'HeiroFlight', sans-serif; font-size:20px; line-height:1; white-space:nowrap; background:linear-gradient(#ffffff,#9298a1); -webkit-background-clip:text; background-clip:text; color:transparent; pointer-events:none;}