/* ========================================================= RIFT — style.css ========================================================= */ /* ---------- 폰트 (눈누) ---------- Pretendard 는 각 페이지의 에서 직접 불러옵니다. 여기서 @import 로 부르면 style.css 를 다 받은 뒤에야 요청이 시작돼 본문 글꼴이 한 박자 늦게 뜹니다. */ @font-face{font-family:'Paperlogy';src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Paperlogy';src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Paperlogy';src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Paperlogy';src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Paperlogy';src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap} /* ---------- 토큰 ---------- */ :root{ --bg:#17171c; --surface:#212129; --surface-2:#2a2a34; --surface-3:#353542; --txt:#f1f1f4; --txt-2:#adadba; --txt-3:#82828f; --pri:#7c47ff; --pri-hover:#8f61ff; --pri-soft:rgba(124,71,255,.18); --accent:#bd90ff; --gold:#f0b429; --silver:#b6b6c2; --bronze:#c98b52; --ok:#34c759; --sh-1:0 1px 2px rgba(0,0,0,.3); --sh-2:0 14px 40px rgba(0,0,0,.4); --logo:url('../img/rift-logo.svg'); --icon:url('../img/rift-icon.svg'); --r-sm:10px; --r:16px; --r-lg:22px; --header-h:74px; --header-h-sm:60px; --ease:cubic-bezier(.22,1,.36,1); } /* ---------- 리셋 ---------- */ *{margin:0;padding:0;box-sizing:border-box;border:0} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)} body{ background:var(--bg);color:var(--txt); font-family:'Pretendard Variable',Pretendard,'Paperlogy',-apple-system,system-ui,sans-serif; font-size:16px;line-height:1.7;word-break:keep-all; -webkit-font-smoothing:antialiased;overflow-x:clip; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;background:none;color:inherit} ul,ol{list-style:none} h1,h2,h3,h4,h5{font-family:'Paperlogy','Pretendard Variable',sans-serif;line-height:1.32;font-weight:700} ::selection{background:var(--pri);color:#fff} code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.87em; background:var(--surface-2);padding:.14em .5em;border-radius:7px;color:var(--accent)} /* display 를 지정한 요소에서도 hidden 이 이기게 합니다. 안 그러면 숨겼다고 생각한 것이 그대로 남아 있습니다. */ [hidden]{display:none!important} .wrap{width:min(1160px,100% - 40px);margin-inline:auto} .hidden{display:none !important} /* ---------- 커스텀 스크롤바 ---------- */ html{scrollbar-width:thin;scrollbar-color:#3d3d4a transparent} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:#383843;border-radius:99px;background-clip:padding-box;box-shadow:inset 0 0 0 2px var(--bg)} ::-webkit-scrollbar-thumb:hover{background:#4a4a58;background-clip:padding-box} ::-webkit-scrollbar-corner{background:var(--bg)} .toc,.tbl-scroll,.seg{scrollbar-width:thin;scrollbar-color:#3d3d4a transparent} .toc::-webkit-scrollbar,.tbl-scroll::-webkit-scrollbar,.seg::-webkit-scrollbar{width:6px;height:6px} .toc::-webkit-scrollbar-track,.tbl-scroll::-webkit-scrollbar-track,.seg::-webkit-scrollbar-track{background:transparent} .toc::-webkit-scrollbar-thumb,.tbl-scroll::-webkit-scrollbar-thumb,.seg::-webkit-scrollbar-thumb{background:#3d3d4a;border-radius:99px;box-shadow:none} /* ========================================================= 헤더 ========================================================= */ .header{ position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h); background:rgba(23,23,28,.66); -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%); transition:height .35s var(--ease),background .35s ease; } .header.scrolled{height:var(--header-h-sm);background:rgba(23,23,28,.86)} .header-inner{width:min(1160px,100% - 40px);margin-inline:auto;height:100%;display:flex;align-items:center;gap:24px} .brand{display:flex;align-items:center;flex-shrink:0} .brand-stage{position:relative;display:block;height:28px;width:96px;transition:width .5s var(--ease)} .brand-stage i{position:absolute;top:50%;left:0;display:block;background-repeat:no-repeat; background-position:left center;background-size:contain;transition:opacity .35s ease,transform .5s var(--ease)} .brand-full{width:96px;height:27px;background-image:var(--logo);opacity:1;transform:translateY(-50%)} .brand-icon{width:34px;height:28px;background-image:var(--icon);opacity:0;transform:translateY(-50%) scale(.6)} .header.scrolled .brand-stage{width:34px} .header.scrolled .brand-full{opacity:0;transform:translateY(-50%) scale(.8) translateX(-10px)} .header.scrolled .brand-icon{opacity:1;transform:translateY(-50%) scale(1)} .nav{display:flex;gap:2px;margin-right:auto;position:relative} .nav a{padding:9px 14px;border-radius:11px;font-size:15px;font-weight:500;color:var(--txt-2); position:relative;z-index:1;transition:color .2s} .nav a:hover{color:var(--txt)} .nav a.current{color:var(--txt);font-weight:600} .nav a.admin-link{color:var(--gold)} /* 움직이는 배경 */ .pill{ position:absolute;left:0;top:0;z-index:0;pointer-events:none;opacity:0;border-radius:11px; background:var(--surface-2); transition:transform .34s var(--ease),width .34s var(--ease),height .34s var(--ease),opacity .2s ease; } .seg .pill{background:var(--surface-3)} .toc .pill{border-radius:9px} .header-actions{display:flex;align-items:center;gap:8px} .icon-btn{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:15px;color:var(--txt-2);background:var(--surface-2);transition:background .2s,color .2s} .icon-btn:hover{color:var(--txt);background:var(--surface-3)} .nav-toggle{display:none} /* authSlot 은 span 이라 그대로 두면 안의 칩들이 세로로 쌓입니다. */ #authSlot{display:flex;align-items:center;gap:8px} /* 로그인 상태 — 프로필 칩과 로그아웃 버튼을 같은 크기로 나란히 둡니다. */ .me{display:flex;align-items:center;gap:9px;padding:5px 14px 5px 5px;border-radius:999px; background:var(--surface-2);transition:background .2s} .me:hover{background:var(--surface-3)} .me img{width:28px;height:28px;border-radius:50%} .me span{font-size:14px;font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 로그아웃 — 프로필 칩 바로 옆에 같은 크기로. 아이콘을 28px 원으로 두면 아바타와 상자 크기가 정확히 같아집니다. */ .acct{display:flex;align-items:center;background:var(--surface-2);border-radius:999px; transition:background .2s} .acct:hover{background:var(--surface-3)} .acct .me{background:none} .acct .me:hover{background:none} /* 평소에는 폭 0 으로 접혀 있다가 올려놓으면 옆으로 늘어납니다. grid 0fr 은 안쪽 아이콘의 최소 폭에 막혀 끝까지 안 접히므로 폭을 직접 다룹니다. */ .acct-out{display:flex;align-items:center;width:0;overflow:hidden;cursor:pointer; padding:0;background:none;flex:none; transition:width .28s var(--ease)} .acct:hover .acct-out, .acct:focus-within .acct-out{width:34px} .acct-out > i{flex:none;width:28px;height:28px;margin:5px 6px 5px 0;border-radius:50%; display:grid;place-items:center;font-size:12px;color:var(--txt-2);background:var(--surface); opacity:0;transform:scale(.6); transition:opacity .2s,transform .28s var(--ease),color .2s,background .2s} .acct:hover .acct-out > i, .acct:focus-within .acct-out > i{opacity:1;transform:none} .acct-out:hover > i{color:#ff6b6b;background:rgba(255,107,107,.16)} /* 사이드바 계정 영역 */ .nav-account{display:none} .na-me{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px; background:var(--surface-2);transition:background .2s} .na-me:hover{background:var(--surface-3)} .na-me img{width:40px;height:40px;border-radius:50%;flex-shrink:0} .na-me div{flex:1;min-width:0} .na-me b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .na-me small{font-size:12.5px;color:var(--txt-3)} .na-me i{color:var(--txt-3);font-size:12px} /* ========================================================= 버튼 / 폼 ========================================================= */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:13px 26px;border-radius:999px;font-size:15px;font-weight:600; font-family:'Paperlogy',sans-serif;transition:background .2s,color .2s,transform .15s var(--ease)} .btn:active{transform:scale(.97)} .btn-sm{padding:9px 16px;font-size:14px} .btn-lg{padding:17px 44px;font-size:17px} .btn-primary{background:var(--pri);color:#fff} .btn-primary:hover{background:var(--pri-hover)} .btn-soft{background:var(--surface-2);color:var(--txt)} .btn-soft:hover{background:var(--surface-3)} .btn-discord{background:#5865f2;color:#fff} .btn-discord:hover{background:#6b76f5} .btn-aiden{background:#fff;color:#17171c} .btn-aiden:hover{background:#e6e6ea} .btn-aiden img{width:22px;height:22px;border-radius:6px} .full{width:100%} .field{display:flex;flex-direction:column;gap:7px} .field label{font-size:13.5px;color:var(--txt-2);font-weight:600} .field input,.field textarea,.field select{ background:var(--surface-2);color:var(--txt);border-radius:12px;padding:12px 15px; font-family:inherit;font-size:15px;outline:none;width:100%; } .field input:focus,.field textarea:focus,.field select:focus{background:var(--surface-3)} .field textarea{min-height:96px;resize:vertical;line-height:1.6} .field-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} /* ========================================================= 공통 레이아웃 ========================================================= */ .page-head{padding:calc(var(--header-h) + 60px) 0 40px} .page-head h1{font-size:42px;font-weight:800;letter-spacing:-1px} .page-head p{margin-top:10px;color:var(--txt-2);font-size:17px;max-width:640px} .section{padding:56px 0} .s-head{margin-bottom:22px} .s-head.split{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap} .s-head h2{font-size:26px;font-weight:800;letter-spacing:-.4px} .s-head p{margin-top:7px;color:var(--txt-2);font-size:15.5px;max-width:660px} .grid{display:grid;gap:14px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .card{background:var(--surface);border-radius:var(--r);padding:24px;box-shadow:var(--sh-1); transition:transform .25s var(--ease),background .2s} .card h3{font-size:17.5px;margin-bottom:6px} .card p{color:var(--txt-2);font-size:15px} /* 카드마다 색 채운 아이콘 타일을 두면 화면이 금방 단조로워집니다. 작은 아이콘 하나만 남겨 제목이 먼저 읽히게 합니다. */ .c-ic{display:block;width:fit-content;margin-bottom:11px;color:var(--txt-3);font-size:15px;line-height:1} .card-link{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600; color:var(--accent);transition:color .18s} /* gap 을 바꾸면 글자까지 밀려서 덜컹거립니다. 화살표만 밀어냅니다. */ .card-link i{transition:transform .22s var(--ease)} .card-link:hover i{transform:translateX(4px)} .notice{display:flex;gap:14px;padding:19px 22px;border-radius:var(--r);background:var(--surface)} .notice > i{color:var(--accent);font-size:16px;margin-top:5px} .notice b{font-family:'Paperlogy',sans-serif;font-size:15.5px} .notice p{color:var(--txt-2);font-size:14.5px;margin-top:3px} .list{display:flex;flex-direction:column;gap:9px;margin-top:14px} .list li{display:flex;gap:11px;font-size:15px;color:var(--txt-2)} .list li i{color:var(--accent);font-size:12px;margin-top:7px;width:14px;flex-shrink:0} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .stat{background:var(--surface);border-radius:var(--r);padding:24px} .stat-n{font-family:'Paperlogy',sans-serif;font-size:36px;font-weight:800;line-height:1.05} .stat-l{margin-top:5px;font-size:14px;color:var(--txt-2)} .shot{width:100%;height:100%;object-fit:cover;background:var(--surface-2);display:block} /* ========================================================= 히어로 / 인트로 로고 ========================================================= */ .hero{min-height:min(94vh,820px);display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:calc(var(--header-h) + 40px) 20px 64px; position:relative;overflow:hidden;isolation:isolate} /* 배경 영상. 한 번 재생 후 마지막 프레임에서 멈춥니다. */ .hero-video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; z-index:-2;pointer-events:none;filter:brightness(.5) saturate(.9); } /* 글씨가 묻히지 않게 위아래를 더 어둡게 */ .hero-veil{ position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(23,23,28,.72) 0%,rgba(23,23,28,.45) 38%, rgba(23,23,28,.6) 72%,var(--bg) 100%); } .intro{position:relative;width:min(500px,86vw);aspect-ratio:2565/753;margin-bottom:30px;overflow:hidden} .intro span{position:absolute;inset:0;display:block} /* 글리치 인트로. 기본값은 애니메이션이 끝난 모습(원본 로고만 보이는 상태)이라 애니메이션이 실행되지 않는 환경에서도 로고가 정상적으로 보입니다. steps(1,end) 로 보간 없이 프레임이 툭툭 끊기게 만듭니다. */ .intro .il-full{ background:var(--logo) center/100% 100% no-repeat; animation:glitchMain 1.2s steps(1,end) both; } .intro .gl{ opacity:0; -webkit-mask:var(--logo) center/100% 100% no-repeat; mask:var(--logo) center/100% 100% no-repeat; } .intro .gl-a{background:#ff2e6b;animation:glitchA 1.2s steps(1,end) both} .intro .gl-b{background:#25d9ff;animation:glitchB 1.2s steps(1,end) both} @keyframes glitchMain{ 0% {opacity:0; clip-path:inset(46% 0 46% 0); transform:translateX(-13px)} 6% {opacity:1; clip-path:inset(46% 0 46% 0); transform:translateX(-13px)} 12% {opacity:1; clip-path:inset(9% 0 71% 0); transform:translateX(15px)} 18% {opacity:1; clip-path:inset(62% 0 13% 0); transform:translateX(-17px)} 24% {opacity:1; clip-path:inset(0 0 0 0); transform:translateX(6px)} 30% {opacity:1; clip-path:inset(27% 0 41% 0); transform:translateX(-9px)} 36% {opacity:.3; clip-path:inset(0 0 0 0); transform:none} 42% {opacity:1; clip-path:inset(73% 0 7% 0); transform:translateX(11px)} 50% {opacity:1; clip-path:inset(0 0 0 0); transform:translateX(-5px)} 58% {opacity:1; clip-path:inset(37% 0 51% 0); transform:translateX(8px)} 64% {opacity:.55;clip-path:inset(0 0 0 0); transform:none} 70% {opacity:1; clip-path:inset(0 0 0 0); transform:translateX(-3px)} 78% {opacity:1; clip-path:inset(55% 0 31% 0); transform:translateX(4px)} 84% {opacity:1; clip-path:inset(0 0 0 0); transform:none} 90% {opacity:.75;clip-path:inset(0 0 0 0); transform:none} 100% {opacity:1; clip-path:inset(0 0 0 0); transform:none} } @keyframes glitchA{ 0% {opacity:0} 6% {opacity:.85; transform:translate(-15px,-3px); clip-path:inset(7% 0 61% 0)} 14% {opacity:.7; transform:translate(12px,3px); clip-path:inset(54% 0 17% 0)} 22% {opacity:0} 34% {opacity:.75; transform:translate(-10px,4px); clip-path:inset(29% 0 43% 0)} 44% {opacity:0} 56% {opacity:.6; transform:translate(9px,-2px); clip-path:inset(65% 0 11% 0)} 64% {opacity:0} 78% {opacity:.45; transform:translate(-6px,0); clip-path:inset(19% 0 59% 0)} 86% {opacity:0} 100% {opacity:0; transform:none} } @keyframes glitchB{ 0% {opacity:0} 8% {opacity:.8; transform:translate(13px,3px); clip-path:inset(35% 0 40% 0)} 16% {opacity:.65; transform:translate(-11px,-2px); clip-path:inset(12% 0 70% 0)} 26% {opacity:0} 38% {opacity:.7; transform:translate(8px,-4px); clip-path:inset(58% 0 20% 0)} 48% {opacity:0} 60% {opacity:.55; transform:translate(-7px,2px); clip-path:inset(24% 0 55% 0)} 68% {opacity:0} 80% {opacity:.4; transform:translate(5px,0); clip-path:inset(48% 0 36% 0)} 88% {opacity:0} 100% {opacity:0; transform:none} } /* 히어로 아래 요소는 페이드인만 */ .hero-desc{color:var(--txt-2);font-size:17px;line-height:1.8;max-width:600px;animation:fadeIn .6s ease 1.3s both} .hero-ip{margin-top:30px;display:flex;align-items:center;gap:6px;padding:7px 7px 7px 22px;border-radius:999px; background:var(--surface);animation:fadeIn .6s ease 1.42s both} .hero-ip code{background:none;color:var(--txt);font-size:17px;font-weight:700; font-family:'Paperlogy',sans-serif;letter-spacing:.2px;padding:0} .hero-meta{display:flex;gap:20px;margin-top:16px;font-size:14px;color:var(--txt-3);animation:fadeIn .6s ease 1.52s both} .hero-meta b{color:var(--txt-2);font-weight:600} .hero-start{margin-top:28px;animation:fadeIn .6s ease 1.62s both} .live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;margin-right:7px} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* ========================================================= 소식 / 이벤트 ========================================================= */ /* 첫 소식은 크게, 나머지는 작게 — 같은 크기 카드만 늘어놓지 않습니다. */ .news{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .news-item{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--surface); transition:transform .25s var(--ease)} .news-item:hover{transform:translateY(-3px)} .news-item:first-child{grid-column:span 2;flex-direction:row} .news-item:first-child .news-media{aspect-ratio:auto;width:50%;flex-shrink:0} .news-item:first-child .news-body{justify-content:center;padding:24px 26px} .news-item:first-child h3{font-size:21px;margin-top:12px} .news-item:first-child p{font-size:15px;flex:0} .news-media{aspect-ratio:16/9;overflow:hidden} .news-body{padding:17px 19px 20px;display:flex;flex-direction:column;flex:1} .news-tag{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--txt-3)} .news-tag b{font-family:'Paperlogy',sans-serif;font-size:12px;font-weight:700;padding:3px 9px; border-radius:7px;background:var(--surface-3);color:var(--txt-2)} .news-item h3{margin-top:10px;font-size:16.5px;line-height:1.4} .news-item p{margin-top:7px;font-size:14.5px;color:var(--txt-2);flex:1} /* ========================================================= 대형 소개 블록 ========================================================= */ .feature{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-lg);overflow:hidden; background:var(--surface);margin-bottom:14px} .feature.rev .f-media{order:2} .f-media{min-height:300px;overflow:hidden} .f-body{padding:46px 42px;display:flex;flex-direction:column;justify-content:center} .f-kicker{font-family:'Paperlogy',sans-serif;font-size:13px;font-weight:700;color:var(--accent)} .f-body h2{margin-top:9px;font-size:29px;font-weight:800;letter-spacing:-.6px} .f-body p{margin-top:12px;color:var(--txt-2);font-size:15.5px;max-width:440px} .f-body .btn{align-self:flex-start;margin-top:26px} /* 직업 */ .jobs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .job{border-radius:var(--r);overflow:hidden;background:var(--surface);transition:transform .25s var(--ease)} .job:hover{transform:translateY(-3px)} .job-media{aspect-ratio:4/3;overflow:hidden} .job-body{padding:17px 19px 20px} .job-body h3{font-size:16.5px} .job-body p{margin-top:5px;font-size:14.5px;color:var(--txt-2)} /* ========================================================= 시상대 ========================================================= */ .podium{display:grid;grid-template-columns:1fr 1.16fr 1fr;align-items:end;gap:12px;max-width:700px;margin:0 auto} .pod{display:flex;flex-direction:column;align-items:center;cursor:default} .pod-av{width:58px;height:58px;border-radius:17px;object-fit:cover;background:var(--surface-2);image-rendering:pixelated} .pod.p1 .pod-av{width:76px;height:76px;border-radius:21px} .pod-emblem{display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:21px;background:var(--pri-soft)} .pod.p1 .pod-emblem{font-size:27px} .pod-name{margin-top:10px;font-family:'Paperlogy',sans-serif;font-weight:700;font-size:16px} .pod.p1 .pod-name{font-size:18px} .pod-sub{font-size:13px;color:var(--txt-3)} .pod-val{margin-top:2px;font-size:15px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums} .pod-block{width:100%;margin-top:13px;border-radius:var(--r) var(--r) 0 0;background:var(--surface); display:flex;align-items:center;justify-content:center} .pod.p1 .pod-block{height:126px;background:var(--pri)} .pod.p2 .pod-block{height:92px} .pod.p3 .pod-block{height:70px} .pod-rank{font-family:'Paperlogy',sans-serif;font-weight:800;font-size:38px;line-height:1;color:var(--txt-3)} .pod.p1 .pod-rank{font-size:50px;color:#fff} .pod-crown{font-size:19px;color:var(--gold);margin-bottom:6px;height:22px} .pod.p2 .pod-crown,.pod.p3 .pod-crown{opacity:0} /* 세그먼트 */ .seg{display:inline-flex;gap:2px;padding:4px;border-radius:14px;background:var(--surface); max-width:100%;overflow-x:auto;position:relative} .seg button,.seg a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:9px 16px; border-radius:11px;font-size:14.5px;font-weight:600;font-family:'Paperlogy',sans-serif;color:var(--txt-2); position:relative;z-index:1;transition:color .25s} .seg button i,.seg a i{font-size:13px} .seg button:hover,.seg a:hover{color:var(--txt)} .seg button.active,.seg a.active{color:var(--txt)} /* ========================================================= 표 ========================================================= */ .tbl-card{background:var(--surface);border-radius:var(--r-lg);padding:8px;overflow:hidden} .tbl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 8px} .tbl-head h3{font-size:16.5px} .tbl-scroll{overflow-x:auto} .tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:560px} .tbl th{text-align:left;padding:11px 16px;font-size:12.5px;font-weight:600;color:var(--txt-3); font-family:'Paperlogy',sans-serif;white-space:nowrap} .tbl th.sortable{cursor:pointer;user-select:none;border-radius:9px;transition:color .2s,background .2s} .tbl th.sortable:hover{color:var(--txt);background:var(--surface-2)} .tbl th.sortable i{margin-left:6px;font-size:10px;opacity:.3} .tbl th.sorted{color:var(--txt)} .tbl th.sorted i{opacity:1;color:var(--accent)} .tbl td{padding:12px 16px;font-size:15px;white-space:nowrap} .tbl tbody tr:nth-child(odd) td{background:var(--surface-2)} .tbl tbody tr:nth-child(odd) td:first-child{border-radius:12px 0 0 12px} .tbl tbody tr:nth-child(odd) td:last-child{border-radius:0 12px 12px 0} .tbl .c,.tbl td.c{text-align:center} .tbl tbody tr[data-player],.tbl tbody tr[data-club]{cursor:default} .medal{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:9px; font-size:13px;font-weight:700;font-family:'Paperlogy',sans-serif;background:var(--surface-3);color:var(--txt-2)} .medal.m1{background:var(--gold);color:#3a2600} .medal.m2{background:var(--silver);color:#26262c} .medal.m3{background:var(--bronze);color:#33190a} .who{display:flex;align-items:center;gap:11px} .who img{width:28px;height:28px;border-radius:9px;image-rendering:pixelated;background:var(--surface-3)} .name{font-weight:600} .chip{display:inline-block;padding:3px 10px;border-radius:8px;font-size:12.5px;font-weight:500; background:var(--surface-3);color:var(--txt-2)} .val{font-weight:700;font-variant-numeric:tabular-nums} .muted{color:var(--txt-3)} .bar-cell{display:flex;align-items:center;gap:10px;min-width:130px} .bar{flex:1;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden} .bar i{display:block;height:100%;border-radius:99px;background:var(--pri);animation:growBar .9s var(--ease) both} @keyframes growBar{from{width:0}} .empty{padding:34px 20px;text-align:center;color:var(--txt-3);font-size:14.5px} /* ========================================================= 호버 프로필 (마우스를 따라다님) ========================================================= */ .profile{position:fixed;z-index:300;width:280px;padding:18px;border-radius:18px;background:var(--surface-2); box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:opacity .15s ease;left:0;top:0} .profile.show{opacity:1} .profile-top{display:flex;gap:15px;align-items:center} .profile-skin{width:60px;height:124px;flex-shrink:0;object-fit:contain;image-rendering:pixelated} .profile-emblem{width:60px;height:60px;flex-shrink:0;border-radius:16px;background:var(--pri-soft); color:var(--accent);display:grid;place-items:center;font-size:24px} .profile-name{font-family:'Paperlogy',sans-serif;font-size:18px;font-weight:800;line-height:1.2} .profile-sub{margin-top:5px;display:flex;gap:6px;flex-wrap:wrap} .profile-rows{margin-top:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .profile-rows div{background:var(--surface);border-radius:11px;padding:9px 11px} .profile-rows span{display:block;font-size:11.5px;color:var(--txt-3)} .profile-rows b{font-family:'Paperlogy',sans-serif;font-size:14.5px;font-variant-numeric:tabular-nums} /* ========================================================= 경기 카드 ========================================================= */ .matches{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .match{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface); transition:transform .25s var(--ease)} .match:hover{transform:translateY(-3px)} .match-media{aspect-ratio:16/12;overflow:hidden} /* 아래로 갈수록 진해지는 색 */ .match-fade{position:absolute;left:0;right:0;bottom:0;padding:70px 22px 22px; background:linear-gradient(to bottom,rgba(23,23,28,0) 0%,rgba(23,23,28,.4) 28%, rgba(23,23,28,.78) 56%,rgba(23,23,28,.95) 80%,var(--bg) 100%)} .match-when{display:flex;align-items:baseline;gap:9px} .match-time{font-family:'Paperlogy',sans-serif;font-size:29px;font-weight:800;line-height:1} .match-day{font-size:13.5px;color:var(--txt-2)} .match-teams{display:flex;align-items:center;gap:12px;margin-top:12px} .match-teams b{font-family:'Paperlogy',sans-serif;font-size:17px;font-weight:700;flex:1} .match-teams b:last-child{text-align:right} .match-vs{font-size:12px;font-weight:700;color:var(--txt-3);font-family:'Paperlogy',sans-serif} .match-map{margin-top:9px;font-size:12.5px;color:var(--txt-3)} /* ========================================================= 도움말 ========================================================= */ .guide{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;padding-bottom:90px} .toc{position:sticky;top:calc(var(--header-h) + 20px);align-self:start; max-height:calc(100vh - var(--header-h) - 60px);overflow-y:auto;padding-right:6px} .toc-title{font-size:12px;font-weight:700;color:var(--txt-3);letter-spacing:.6px;padding:0 12px 10px;font-family:'Paperlogy',sans-serif} .toc a{display:block;padding:7px 12px;border-radius:9px;font-size:14px;color:var(--txt-3); position:relative;z-index:1;transition:color .2s} .toc a.sub{padding-left:26px;font-size:13.5px} .toc a:hover{color:var(--txt-2)} .toc a.active{color:var(--txt);font-weight:600} .toc a.has-sub{display:flex;align-items:center;justify-content:space-between;gap:8px} .toc-cap{ width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex-shrink:0; font-size:9px;color:var(--txt-3);transition:transform .28s var(--ease),color .2s,background .2s; } .toc-cap:hover{color:var(--txt);background:var(--surface-2)} .toc a.has-sub:not(.open) .toc-cap{transform:rotate(-90deg)} .toc-group{overflow:hidden;max-height:420px;transition:max-height .28s var(--ease)} .toc-group.closed{max-height:0} /* 탭을 옮길 때 본문만 부드럽게 교체됩니다 (헤더는 그대로 유지) */ main{animation:pageIn .28s var(--ease) both} @keyframes pageIn{from{opacity:0}to{opacity:1}} /* 도움말 — 접고 펼치기 */ .doc-bar{display:flex;justify-content:flex-end;margin-bottom:8px} .doc .doc-sec + .doc-sec{margin-top:8px} .doc .doc-sec h2{margin:0} .doc-toggle{ display:flex;align-items:center;gap:12px;width:100%;text-align:left; padding:16px 4px;font-family:'Paperlogy',sans-serif;font-size:26px;font-weight:800; letter-spacing:-.4px;color:var(--txt); } .doc-toggle i{ font-size:13px;color:var(--txt-3);flex-shrink:0;width:26px;height:26px;border-radius:9px; display:grid;place-items:center;background:var(--surface); transition:transform .3s var(--ease),color .2s,background .2s; } .doc-toggle:hover i{color:var(--txt);background:var(--surface-2)} .doc-sec:not(.open) .doc-toggle i{transform:rotate(-90deg)} .doc-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .32s var(--ease)} .doc-body > div{overflow:hidden;min-height:0;padding-left:38px} .doc-sec:not(.open) .doc-body{grid-template-rows:0fr} .doc-sec .doc-body > div > :first-child{margin-top:0} .doc-sec .doc-body > div > :last-child{margin-bottom:18px} .doc h2{font-size:26px;font-weight:800;margin-top:52px;letter-spacing:-.4px;scroll-margin-top:calc(var(--header-h) + 30px)} .doc h2:first-child{margin-top:0} .doc h3{font-size:18.5px;font-weight:700;margin-top:30px;scroll-margin-top:calc(var(--header-h) + 30px)} .doc p{margin-top:11px;color:var(--txt-2);font-size:15.5px;line-height:1.85} .doc ul{margin-top:13px;display:flex;flex-direction:column;gap:8px} .doc ul li{display:flex;gap:11px;font-size:15px;color:var(--txt-2)} .doc ul li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--txt-3);margin-top:11px;flex-shrink:0} .doc .callout{display:flex;gap:14px;margin-top:18px;padding:17px 19px;border-radius:var(--r);background:var(--surface)} .doc .callout i{color:var(--accent);font-size:15px;margin-top:5px} .doc .callout b{font-family:'Paperlogy',sans-serif} .doc .callout p{margin-top:2px;font-size:14.5px} .doc .kv{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .doc .kv div{background:var(--surface);border-radius:var(--r-sm);padding:14px 16px} .doc .kv b{display:block;font-family:'Paperlogy',sans-serif;font-size:15px} .doc .kv span{font-size:13.5px;color:var(--txt-3)} .doc .flow{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap} .doc .flow em{display:inline-flex;align-items:center;gap:8px;font-style:normal;font-size:14.5px; padding:10px 15px;border-radius:11px;background:var(--surface)} .doc .flow em i{color:var(--accent)} .doc .flow > i{color:var(--txt-3);font-size:11px} .toc-mobile{display:none} /* ========================================================= 서버 접속 ========================================================= */ .play-ip{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding:26px 30px;border-radius:var(--r-lg);background:var(--surface)} .play-ip .lbl{font-size:13px;color:var(--txt-3)} .play-ip code{background:none;padding:0;color:var(--txt);font-family:'Paperlogy',sans-serif; font-size:29px;font-weight:800;display:block;margin-top:3px} /* ========================================================= 로그인 ========================================================= */ .auth-wrap{min-height:100vh;display:grid;place-items:center;padding:calc(var(--header-h) + 40px) 20px 60px} .auth-card{width:min(420px,100%);background:var(--surface);border-radius:var(--r-lg);padding:36px 32px;text-align:center} .auth-logo{width:120px;height:35px;background:var(--logo) center/contain no-repeat;margin:0 auto 22px} .auth-card h1{font-size:23px;font-weight:800} .auth-card > p{margin-top:8px;color:var(--txt-2);font-size:14.5px} .auth-btns{display:flex;flex-direction:column;gap:10px;margin-top:26px} .auth-note{margin-top:20px;font-size:13px;color:var(--txt-3);line-height:1.7} /* ========================================================= 관리자 ========================================================= */ .admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start} .panel{background:var(--surface);border-radius:var(--r-lg);padding:26px} .panel h2{font-size:19px;margin-bottom:4px} .panel > p{color:var(--txt-2);font-size:14px;margin-bottom:18px} .panel form{display:flex;flex-direction:column;gap:13px} .panel .btn{align-self:flex-start;margin-top:4px} .rows{display:flex;flex-direction:column;gap:8px;margin-top:16px} .row-item{display:flex;align-items:center;gap:12px;padding:12px 15px;border-radius:12px;background:var(--surface-2)} .row-item .grow{flex:1;min-width:0} .row-item b{font-size:14.5px;font-family:'Paperlogy',sans-serif;display:block} .row-item small{font-size:12.5px;color:var(--txt-3)} .row-del{color:var(--txt-3);font-size:14px;padding:6px 9px;border-radius:8px} .row-del:hover{color:#ff6b6b;background:var(--surface-3)} .diag-raw{ margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--surface-2); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6; color:var(--txt-2);white-space:pre-wrap;word-break:break-all;max-height:280px;overflow:auto; } .ok-dot,.no-dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px; border-radius:7px;font-size:11px;flex-shrink:0} .ok-dot{background:rgba(52,199,89,.18);color:var(--ok)} .no-dot{background:rgba(255,107,107,.18);color:#ff6b6b} .diag-fix{margin-top:16px;padding:18px 20px;border-radius:var(--r);background:var(--pri-soft)} .diag-fix b{font-family:'Paperlogy',sans-serif;font-size:15px} .diag-fix p{margin-top:4px;font-size:14px;color:var(--txt-2)} .diag-fix pre{ margin:12px 0;padding:14px 16px;border-radius:12px;background:var(--bg);color:var(--txt); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.7; white-space:pre-wrap;word-break:break-all;user-select:all; } /* 이미지 교체 */ .img-slots{display:flex;flex-direction:column;gap:10px;margin-top:16px} .img-slot{display:flex;gap:14px;padding:12px;border-radius:14px;background:var(--surface-2)} .img-slot img{width:104px;height:62px;object-fit:cover;border-radius:10px;background:var(--surface-3);flex-shrink:0} .img-info{flex:1;min-width:0} .img-info b{display:block;font-family:'Paperlogy',sans-serif;font-size:14.5px} .img-info small{font-size:12.5px;color:var(--txt-3)} /* 주소 입력 + 파일 올리기 */ .upload-row{display:flex;gap:8px;margin-top:8px;position:relative} .upload-row input[type="url"],.upload-row input[type="text"],.upload-row input:not([type]){ flex:1;min-width:0;background:var(--surface-2);color:var(--txt);border-radius:10px; padding:10px 13px;font-family:inherit;font-size:13.5px;outline:none; } .img-slot .upload-row input{background:var(--surface)} .upload-row input:focus{background:var(--surface-3)} .upload-btn{cursor:pointer;flex-shrink:0;padding-inline:14px} .upload-row.uploading{pointer-events:none;opacity:.55} .upload-row.uploading::after{ content:'올리는 중…';position:absolute;right:12px;top:50%;transform:translateY(-50%); font-size:12px;color:var(--txt-2); } .img-slot{transition:background .2s,outline-color .2s} .img-slot.dragging{background:var(--pri-soft)} .img-slot.dragging img{opacity:.5} /* 탭 잠금 */ .lock-item{padding:14px 16px;border-radius:14px;background:var(--surface-2)} .lock-item.on{background:rgba(255,107,107,.1)} .lock-head{display:flex;align-items:center;gap:12px} .lock-head b{font-family:'Paperlogy',sans-serif;font-size:15px} .lock-item input{width:100%;margin-top:10px;background:var(--surface);color:var(--txt);border-radius:10px; padding:9px 12px;font-family:inherit;font-size:13.5px;outline:none} .lock-item input:focus{background:var(--surface-3)} /* ========================================================= 내 정보 ========================================================= */ .me-card{display:flex;gap:26px;padding:28px;border-radius:var(--r-lg);background:var(--surface);flex-wrap:wrap} /* 스킨은 배경이 투명해서 네모 판을 깔면 어색합니다. */ .me-skin{width:80px;height:165px;object-fit:contain;image-rendering:pixelated;flex-shrink:0} .me-body{flex:1;min-width:240px} .me-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .me-name h2{font-size:26px;font-weight:800} .me-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px} .me-bio{margin-top:12px;color:var(--txt-2);font-size:15px} .xp{margin-top:22px} .xp-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .xp-head b{font-family:'Paperlogy',sans-serif;font-size:17px} .xp-head span{font-size:13.5px;font-variant-numeric:tabular-nums} .xp-bar{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin:8px 0 7px} .xp-bar i{display:block;height:100%;border-radius:99px;background:var(--pri);width:0; transition:width .8s var(--ease)} .xp small{font-size:12.5px} /* 구단 섹션 안의 소제목. 앞 내용과 확실히 떨어뜨립니다. */ .club-h3{ font-size:16px;font-weight:700;margin-top:24px;padding-top:20px; box-shadow:inset 0 1px 0 var(--surface-3); } .club-h3:first-child{margin-top:0;padding-top:0;box-shadow:none} #clubMount > form{margin-top:14px} #clubMount > .btn{margin-top:16px} /* 마인크래프트 계정 인증 */ .verify{margin-bottom:18px} .verify-done{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:var(--r); background:var(--surface-2)} .verify-done b{display:block;font-family:'Paperlogy',sans-serif;font-size:16px} .verify-done small{display:block;font-size:12.5px;color:var(--txt-3);margin-top:2px} .verify-need{padding:17px 19px;border-radius:var(--r);background:var(--pri-soft)} .verify-need b{font-family:'Paperlogy',sans-serif;font-size:15.5px} .verify-need p{margin-top:4px;font-size:14px;color:var(--txt-2)} .verify-need .btn{margin-top:13px} .verify-code{padding:17px 19px;border-radius:var(--r);background:var(--surface-2)} .vc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap} .vc-head b{font-family:'Paperlogy',sans-serif;font-size:15px} .vc-timer{font-size:13px;color:var(--txt-3);font-variant-numeric:tabular-nums} .vc-cmd{ display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; margin-top:12px;padding:14px 16px;border-radius:12px;background:var(--bg);cursor:pointer; transition:background .2s; } .vc-cmd:hover{background:var(--surface-3)} .vc-cmd code{background:none;padding:0;color:var(--txt);font-size:19px;font-weight:700;letter-spacing:.5px} .vc-cmd i{color:var(--txt-3);font-size:14px} .verify-code p{margin-top:11px;font-size:13px;color:var(--txt-3)} .ready-list{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:var(--r); background:var(--surface-2)} .ready-item{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--txt-2)} .ready-item .grow{flex:1;min-width:0} .ready-item small{font-size:12.5px;flex-shrink:0} .wait-dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px; border-radius:7px;font-size:11px;flex-shrink:0;background:rgba(240,180,41,.18);color:var(--gold)} .club-card{display:flex;align-items:center;gap:16px;margin-top:14px;padding:16px 18px; border-radius:var(--r);background:var(--surface-2)} .club-card img{width:56px;height:56px;object-fit:cover;border-radius:14px;background:var(--surface-3);flex-shrink:0} .club-logo-none{width:56px;height:56px;border-radius:14px;background:var(--pri-soft);color:var(--accent); display:grid;place-items:center;font-size:22px;flex-shrink:0} .club-card b{display:block;font-family:'Paperlogy',sans-serif;font-size:17px} .club-card small{display:block;font-size:13px;color:var(--txt-3);margin-top:2px} /* 막힌 탭 화면 */ .locked-page{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:calc(var(--header-h) + 60px) 20px 80px} .lock-ic{width:64px;height:64px;border-radius:22px;background:var(--surface);color:var(--txt-3); display:grid;place-items:center;font-size:24px;margin-bottom:22px} .locked-page h1{font-size:30px;font-weight:800} .lock-reason{margin-top:12px;max-width:520px;color:var(--txt-2);font-size:16px;line-height:1.8} .locked-page .btn{margin-top:28px} .nav a.locked{color:var(--txt-3)} .nav a .lock-mark{font-size:10px;opacity:.7} .banner{display:flex;gap:13px;padding:18px 22px;border-radius:var(--r);background:var(--pri-soft);margin-bottom:22px} .banner i{color:var(--accent);font-size:16px;margin-top:4px} .banner b{font-family:'Paperlogy',sans-serif} .banner p{color:var(--txt-2);font-size:14.5px;margin-top:3px} /* ========================================================= 후원 / 기록 ========================================================= */ /* align-items 를 두지 않아야 카드 높이가 서로 맞습니다 */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .plan{background:var(--surface);border-radius:var(--r-lg);padding:28px 25px;display:flex;flex-direction:column; transition:transform .25s var(--ease)} .plan:hover{transform:translateY(-3px)} .plan.best{background:linear-gradient(170deg,#33235e,var(--surface) 60%)} .plan-tag{align-self:flex-start;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:700; background:var(--pri);color:#fff;font-family:'Paperlogy',sans-serif;margin-bottom:13px} .plan-name{font-family:'Paperlogy',sans-serif;font-size:16.5px;font-weight:600;color:var(--txt-2)} .plan-price{font-family:'Paperlogy',sans-serif;font-size:36px;font-weight:800;margin-top:2px;line-height:1.15} .plan-price span{font-size:16px;font-weight:600;color:var(--txt-2);margin-left:3px} .plan .list{flex:1;margin-top:20px} .plan .btn{margin-top:24px} .items{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .item{background:var(--surface);border-radius:var(--r);padding:22px 18px;text-align:center;transition:transform .25s var(--ease)} .item:hover{transform:translateY(-3px)} .item .c-ic{margin:0 auto 12px} .item h4{font-size:15px;font-weight:600} .item-price{margin-top:4px;font-family:'Paperlogy',sans-serif;font-weight:700;color:var(--accent)} .crowns{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px} .crown{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:12px;padding:13px 15px} .crown i{color:var(--gold);font-size:14px;width:16px} .crown span{font-size:14px;color:var(--txt-2);flex:1} .crown b{font-family:'Paperlogy',sans-serif;color:var(--txt-3)} .cta{background:var(--surface);border-radius:var(--r-lg);padding:52px 40px;text-align:center} .cta h2{font-size:28px;font-weight:800} .cta p{margin-top:9px;color:var(--txt-2)} .cta .btn{margin-top:24px} /* ========================================================= 푸터 / 토스트 ========================================================= */ .footer{margin-top:36px;padding:56px 0 32px;background:var(--surface)} .footer-inner{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap} .footer-logo{width:106px;height:31px;background:var(--logo) no-repeat left center/contain;margin-bottom:13px} .footer-brand p{color:var(--txt-3);font-size:14px;max-width:300px} .footer-nav{display:flex;gap:54px;flex-wrap:wrap} .footer-nav h5{font-size:14px;font-weight:600;margin-bottom:10px} .footer-nav a{display:block;font-size:14px;color:var(--txt-3);padding:4px 0} .footer-nav a:hover{color:var(--txt)} .footer-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:42px; font-size:13px;color:var(--txt-3)} .toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(24px) scale(.96); padding:13px 24px;border-radius:999px;background:var(--surface-3);box-shadow:var(--sh-2); font-size:14.5px;font-weight:500;opacity:0;pointer-events:none;z-index:400; transition:opacity .3s var(--ease),transform .3s var(--ease)} .toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} /* ========================================================= 로딩 자리표시 데이터를 기다리는 동안 회색 덩어리가 옅게 깜빡입니다. 빈 화면보다 지금 뭔가 오고 있다는 게 분명히 보입니다. ========================================================= */ .skel{ position:relative;overflow:hidden;border-radius:10px; background:var(--surface-2);animation:skelPulse 1.4s ease-in-out infinite; } .skel::after{ content:'';position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent); animation:skelSweep 1.4s ease-in-out infinite; } @keyframes skelPulse{0%,100%{opacity:.75}50%{opacity:1}} @keyframes skelSweep{100%{transform:translateX(100%)}} .skel-line{height:13px;margin:7px 0} .skel-row{display:flex;align-items:center;gap:12px;padding:12px 16px} .skel-dot{width:26px;height:26px;border-radius:9px;flex-shrink:0} .skel-av{width:28px;height:28px;border-radius:9px;flex-shrink:0} .skel-card{border-radius:var(--r);background:var(--surface);padding:24px} .skel-media{aspect-ratio:16/9;border-radius:0} /* 이미지는 다 받을 때까지 회색 자리를 지킵니다. */ img.shot{background:var(--surface-2)} /* ========================================================= 등장 애니메이션 ========================================================= */ /* 한 줄에 나란히 놓인 요소는 가운데를 기준으로 좌우 대칭으로 들어오고, 폭을 다 쓰는 요소는 블러가 걷히며 나타납니다. */ .rv{opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)} .rv-left{transform:translateX(-36px);filter:blur(6px)} .rv-right{transform:translateX(36px);filter:blur(6px)} .rv-blur{filter:blur(12px);transform:scale(1.02)} .rv-up{transform:translateY(30px);filter:blur(5px)} .rv.in{opacity:1;transform:none;filter:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important} .rv{opacity:1;transform:none;filter:none} .intro .gl{display:none} /* 모션을 줄이기로 한 사용자에게는 영상을 재생하지 않습니다 (JS 에서 첫 프레임에 정지) */ } /* ========================================================= 반응형 ========================================================= */ @media (max-width:1000px){ .g3,.g4,.items,.jobs,.news{grid-template-columns:repeat(2,1fr)} .news-item:first-child{flex-direction:column} .news-item:first-child .news-media{width:100%;aspect-ratio:16/9} .news-item:first-child .news-body{padding:17px 19px 20px} .news-item:first-child h3{font-size:18px} .plans,.matches,.admin-grid{grid-template-columns:1fr} .stats{grid-template-columns:1fr} .feature{grid-template-columns:1fr} .feature.rev .f-media{order:0} .f-body{padding:32px 26px} .f-body h2{font-size:25px} .guide{grid-template-columns:1fr;gap:0} .toc{display:none} .toc-mobile{display:block;position:sticky;top:var(--header-h);z-index:50;margin-bottom:24px;padding:12px 0; background:rgba(23,23,28,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .toc-mobile .seg{width:100%} .page-head h1{font-size:33px} } @media (max-width:860px){ /* 모바일에서는 헤더 메뉴가 오른쪽에서 밀려 나오는 사이드바가 됩니다. */ /* 헤더의 backdrop-filter 가 fixed 자식의 기준 상자를 헤더로 만들어 버립니다. 그래서 bottom:0 대신 높이를 직접 지정합니다. */ .nav{ position:fixed;top:0;right:0;left:auto;z-index:110; height:100vh;height:100dvh; width:min(300px,82vw); display:flex;flex-direction:column;align-items:stretch;gap:4px; padding:calc(var(--header-h) + 14px) 16px 24px; background:var(--surface);box-shadow:-26px 0 60px rgba(0,0,0,.5); overflow-y:auto;overscroll-behavior:contain; transform:translateX(100%);visibility:hidden; transition:transform .34s var(--ease),visibility .34s; } .nav.open{transform:none;visibility:visible} .nav a{padding:13px 15px;font-size:16px;border-radius:11px} .nav .pill{border-radius:11px} /* 헤더(z-index 100)보다 아래에 깔아야 사이드바가 가려지지 않습니다. */ .nav-backdrop{ position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); opacity:0;pointer-events:none;transition:opacity .3s ease; } .nav-backdrop.show{opacity:1;pointer-events:auto} body.nav-open{overflow:hidden} .nav-toggle{display:inline-flex;position:relative;z-index:115} .header-actions .btn{display:none} /* 로그인은 메뉴를 열지 않아도 바로 보여야 합니다. */ .header-actions .login-btn{display:inline-flex} .me{padding:4px} .me span{display:none} .nav-account{display:block;margin-bottom:10px} } @media (max-width:620px){ .g2,.g3,.g4,.items,.jobs,.news,.crowns,.field-row{grid-template-columns:1fr} .hero-meta{gap:14px;font-size:13px} .page-head{padding-top:calc(var(--header-h) + 40px)} .page-head h1{font-size:28px} .s-head h2{font-size:22px} .podium{gap:7px} .pod-av{width:44px;height:44px;border-radius:14px} .pod.p1 .pod-av{width:56px;height:56px;border-radius:17px} .pod-name{font-size:14px} .pod.p1 .pod-name{font-size:15.5px} .pod-rank{font-size:29px} .pod.p1 .pod-rank{font-size:37px} .cta{padding:38px 24px} .cta h2{font-size:23px} .footer-nav{gap:32px} .play-ip code{font-size:23px} .profile{width:min(280px,calc(100vw - 24px))} } /* ---------- 내 정보 · 게임 기록 ---------- 직업과 코인은 게임 안의 값이라 읽기 전용입니다. */ .me-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .me-stat{background:var(--surface-2);border-radius:var(--r);padding:11px 16px;min-width:132px} .me-stat-k{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txt-3)} .me-stat-k i{font-size:11px} .me-stat-v{display:block;margin-top:3px;font-family:'Paperlogy',sans-serif;font-size:19px;font-weight:700} .me-stats-none{margin-top:14px;font-size:13.5px;color:var(--txt-3)} /* ---------- 디스코드 문법 ---------- */ .md{font-size:14.5px;line-height:1.72;color:var(--txt-2)} .md > :first-child{margin-top:0} .md p{margin:0 0 9px} .md p:last-child{margin-bottom:0} .md .md-h{font-family:'Paperlogy',sans-serif;color:var(--txt);margin:16px 0 7px;line-height:1.35} .md h3.md-h{font-size:19px} .md h4.md-h{font-size:16.5px} .md h5.md-h{font-size:15px} .md .md-sub{display:block;font-size:12.5px;color:var(--txt-3);margin:2px 0 8px} .md b,.md strong{color:var(--txt);font-weight:700} .md a{color:var(--accent);text-decoration:none} .md a:hover{text-decoration:underline} .md .md-list{margin:0 0 9px;padding-left:20px} .md .md-list li{margin:2px 0} .md .md-quote{margin:0 0 9px;padding:2px 0 2px 13px;position:relative;color:var(--txt-2)} .md .md-quote::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:2px;background:var(--surface-3)} .md .md-code{background:var(--surface-3);border-radius:5px;padding:1.5px 5px;font-size:.88em;font-family:ui-monospace,'Cascadia Code',Consolas,monospace} .md .md-pre{background:var(--surface-3);border-radius:var(--r-sm);padding:12px 14px;margin:0 0 9px;overflow-x:auto} .md .md-pre code{font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:13px;white-space:pre} .md .md-spoiler{background:var(--surface-3);color:transparent;border-radius:4px;padding:0 3px;cursor:pointer;transition:color .12s} .md .md-spoiler:hover,.md .md-spoiler:focus{color:var(--txt-2)} /* ---------- 진입 안내 모달 ---------- */ .modal-back{ position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center; padding:20px;background:rgba(9,9,13,.72);backdrop-filter:blur(6px); opacity:0;transition:opacity .2s ease; } .modal-back.show{opacity:1} .modal{ position:relative;width:min(520px,100%);max-height:calc(100dvh - 40px);overflow:auto; background:var(--surface);border-radius:var(--r-lg); transform:translateY(14px) scale(.985);transition:transform .22s cubic-bezier(.2,.8,.25,1); } .modal-back.show .modal{transform:none} .modal-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover; border-radius:var(--r-lg) var(--r-lg) 0 0} .modal-body{padding:24px 24px 4px} .modal-body h2{font-family:'Paperlogy',sans-serif;font-size:21px;margin:0 0 10px} .modal-foot{display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap;padding:18px 24px 22px} .modal-again{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--txt-3);cursor:pointer} .modal-btns{display:flex;gap:8px;margin-left:auto} .modal-x{ position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%; background:rgba(9,9,13,.5);color:#fff;font-size:14px;cursor:pointer; display:grid;place-items:center;transition:background .12s; } .modal-x:hover{background:rgba(9,9,13,.78)} /* ---------- 관리자 · 모달 편집 ---------- */ .switch-row{display:flex;align-items:center;gap:11px;background:var(--surface-2); border-radius:var(--r);padding:13px 16px;margin-bottom:16px;cursor:pointer} .switch-row b{display:block;font-size:14px} .switch-row small{display:block;font-size:12.5px;color:var(--txt-3);margin-top:1px} .md-edit{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} .md-tools{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 7px} .md-tool{width:31px;height:29px;border-radius:7px;background:var(--surface-2);color:var(--txt-3); font-size:12.5px;cursor:pointer;display:grid;place-items:center;transition:background .12s,color .12s} .md-tool:hover{background:var(--surface-3);color:var(--txt)} .md-edit textarea{font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:13px;line-height:1.6;resize:vertical} .md-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px} .md-edit-prev > small{display:block;margin-bottom:7px} .md-prev-card{background:var(--surface-2);border-radius:var(--r);overflow:hidden} .md-prev-card .modal-img{border-radius:0} .md-prev-card .modal-body{padding:18px 18px 4px} .md-prev-card .modal-body h2{font-size:18px} .md-prev-card .modal-foot{padding:14px 18px 18px} .md-prev-card:empty::after{content:'내용을 적으면 여기에 보입니다.';display:block;padding:22px; font-size:13.5px;color:var(--txt-3)} @media (max-width:820px){ .md-edit{grid-template-columns:1fr} } /* ---------- 후원 상점 ---------- 폭·간격·글자 크기는 다른 페이지와 같은 값을 씁니다. (.wrap 1160px · .section 56px · gap 14px · h2 26px) */ .page-head-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .coin-chip{display:inline-flex;align-items:center;gap:7px;margin-left:auto; background:var(--surface-2);border-radius:999px;padding:8px 15px; font-family:'Paperlogy',sans-serif;font-weight:600;font-size:14.5px} .coin-chip i{color:var(--gold);font-size:13px} /* 배너는 그림이 있을 때만 보입니다 */ .shop-hero{position:relative;margin-bottom:56px;border-radius:var(--r-lg);overflow:hidden; background:var(--surface) center/cover no-repeat;aspect-ratio:16/5;min-height:200px; display:flex;align-items:flex-end} .shop-hero[hidden]{display:none} .shop-hero::after{content:'';position:absolute;inset:0; background:linear-gradient(to top,rgba(9,9,13,.86),rgba(9,9,13,.1) 68%)} .shop-hero-in{position:relative;z-index:1;display:flex;align-items:flex-end; justify-content:space-between;gap:20px;flex-wrap:wrap;width:100%;padding:28px} .shop-hero-in h2{font-size:26px;font-weight:800;letter-spacing:-.4px} .shop-hero-in p{margin-top:7px;color:var(--txt-2);font-size:15.5px} /* 상품 */ .shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .shop-card{display:flex;flex-direction:column;text-align:left;background:var(--surface); border-radius:var(--r);overflow:hidden;cursor:pointer;box-shadow:var(--sh-1); transition:transform .25s var(--ease),background .18s} .shop-card:hover{transform:translateY(-3px);background:var(--surface-2)} .shop-art{display:block;width:100%;aspect-ratio:4/3;object-fit:cover} .shop-card-txt{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px} .shop-card .c-ic{margin-bottom:13px} .shop-card b{font-size:15px;font-weight:600} .shop-card small{display:block;margin-top:5px;color:var(--txt-3);font-size:13px;line-height:1.55} .shop-price{margin-top:auto;padding-top:14px;font-family:'Paperlogy',sans-serif; font-weight:700;font-size:16px;color:var(--accent)} /* 큰 카드 두 장 */ .shop-promos{display:grid;grid-template-columns:1fr 1fr;gap:14px} .shop-promo{position:relative;display:flex;flex-direction:column;justify-content:flex-end; min-height:214px;padding:26px;border-radius:var(--r-lg);overflow:hidden; background:var(--surface) center/cover no-repeat;box-shadow:var(--sh-1); transition:transform .25s var(--ease)} .shop-promo:hover{transform:translateY(-3px)} .shop-promo.has-art::after{content:'';position:absolute;inset:0; background:linear-gradient(to top,rgba(9,9,13,.84),rgba(9,9,13,.08) 68%)} .shop-promo-art{position:absolute;right:26px;top:26px;color:var(--surface-2); font-size:76px;line-height:1;pointer-events:none} .shop-promo.has-art .shop-promo-art{display:none} .shop-promo-txt{position:relative;z-index:1} .shop-promo-txt h3{font-size:20px;font-weight:800;letter-spacing:-.3px} .shop-promo-txt p{margin-top:6px;color:var(--txt-2);font-size:14.5px} .shop-promo-txt .card-link{margin-top:13px} /* 상품 상세 모달 */ .modal.modal-item .modal-body{padding-top:22px} .item-head{display:flex;align-items:center;gap:14px;margin-bottom:16px} .item-head .c-ic{flex:none} .item-head h2{margin:0} .item-head .shop-price{margin:3px 0 0;padding:0;font-size:19px} .item-lines{margin-top:16px} @media (max-width:960px){ .shop-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .shop-hero{aspect-ratio:16/9;margin-bottom:40px} .shop-hero-in{padding:20px} .shop-hero-in h2{font-size:21px} .shop-promos{grid-template-columns:1fr} .shop-promo{min-height:180px;padding:22px} .shop-promo-art{font-size:60px;right:22px;top:22px} } @media (max-width:420px){ .shop-grid{grid-template-columns:1fr} } /* ---------- 시작하기 모달 ---------- */ .start-steps{list-style:none;counter-reset:s;margin:0;padding:0} .start-steps li{counter-increment:s;position:relative;padding:0 0 18px 40px} .start-steps li:last-child{padding-bottom:0} .start-steps li::before{content:counter(s);position:absolute;left:0;top:-1px; width:26px;height:26px;border-radius:50%;background:var(--surface-3); display:grid;place-items:center;font-family:'Paperlogy',sans-serif; font-size:13px;font-weight:700;color:var(--txt-2)} .start-steps b{display:block;font-size:15px;font-weight:600} .start-steps small{display:block;margin-top:3px;color:var(--txt-3);font-size:13px} .start-steps code{background:var(--surface-3);border-radius:5px;padding:1px 6px;font-size:.9em} .start-ip{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:9px} .start-ip code{font-family:'Paperlogy',sans-serif;font-size:17px;font-weight:700; color:var(--txt);background:var(--surface-2);border-radius:var(--r-sm);padding:9px 14px} /* ---------- 공지 모달 ---------- */ .news-item{cursor:pointer} .news-item:focus-visible{outline:2px solid var(--pri);outline-offset:3px} .notice-date{margin:-4px 0 14px;color:var(--txt-3);font-size:13.5px} .modal-notice .modal-body{padding-top:22px} /* ---------- 법적 고지 ---------- */ .foot-legal{color:var(--txt-3);transition:color .18s} .foot-legal:hover{color:var(--txt-2)} .doc.legal h3.lg-jo{margin:30px 0 0;font-size:17.5px;font-weight:700} .doc.legal h3.lg-jo:first-child{margin-top:4px} .doc.legal h4.lg-hang{margin:18px 0 0;font-size:15px;font-weight:600;color:var(--txt-2)} .doc.legal h4.lg-hang + p{margin-top:5px} .doc.legal p{margin-top:7px;font-size:14.8px;line-height:1.78;color:var(--txt-2)} .doc.legal .lg-ul{margin:9px 0 0;padding:0;list-style:none} .doc.legal .lg-ul li{position:relative;padding-left:15px;margin-top:4px; font-size:14.5px;line-height:1.7;color:var(--txt-2)} .doc.legal .lg-ul li::before{content:'';position:absolute;left:2px;top:11px; width:4px;height:4px;border-radius:50%;background:var(--txt-3)} .doc.legal .lg-foot{margin-top:26px;padding-top:16px;background:none} .doc.legal .lg-foot p{font-size:13px;color:var(--txt-3);line-height:1.7} /* ---------- 내 순위 ---------- */ .me-ranks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px} .me-ranks[hidden]{display:none} .me-rank{display:block;background:var(--surface-2);border-radius:12px;padding:12px 14px; transition:background .18s} .me-rank:hover{background:var(--surface-3)} .me-rank small{display:block;font-size:12.5px;color:var(--txt-3)} .me-rank b{display:block;margin:2px 0 1px;font-family:'Paperlogy',sans-serif; font-size:22px;font-weight:800;line-height:1.1} .me-rank b span{font-size:13px;font-weight:600;color:var(--txt-2);margin-left:2px} @media (max-width:760px){ .me-ranks{grid-template-columns:repeat(2,1fr)} } /* ---------- 나란히 놓인 표의 높이 맞추기 ---------- 두 카드에 담기는 줄 수가 달라도 상자 크기는 같게 둡니다. 한쪽만 짧으면 아래가 비어 보여서 어긋난 것처럼 읽힙니다. */ .grid.g2 > .tbl-card{display:flex;flex-direction:column} .grid.g2 > .tbl-card > .tbl-scroll{flex:1} .grid.g2 > .tbl-card .tbl{height:100%} /* ---------- 드롭다운 ---------- 브라우저 기본 화살표를 지우고 같은 모양으로 다시 그립니다. */ .field select, select.inp{ appearance:none;-webkit-appearance:none;-moz-appearance:none; padding-right:40px;cursor:pointer; background-image: linear-gradient(45deg,transparent 50%,var(--txt-3) 50%), linear-gradient(135deg,var(--txt-3) 50%,transparent 50%); background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px); background-size:6px 6px,6px 6px; background-repeat:no-repeat; } .field select:hover{background-color:var(--surface-3)} /* 펼쳐진 목록은 OS 가 그리므로 색만 맞춰 둡니다. */ .field select option{background:var(--surface-2);color:var(--txt)} /* ---------- 체크박스 · 라디오 ---------- */ input[type="checkbox"].rk, input[type="radio"].rk, .check input[type="checkbox"], .check input[type="radio"], .modal-again input[type="checkbox"]{ appearance:none;-webkit-appearance:none; width:19px;height:19px;flex:none;margin:0;cursor:pointer; background:var(--surface-3);border-radius:6px; display:grid;place-items:center; transition:background .18s,transform .12s var(--ease); } input[type="radio"].rk, .check input[type="radio"]{border-radius:50%} input[type="checkbox"].rk::after, .check input[type="checkbox"]::after, .modal-again input[type="checkbox"]::after{ content:'';width:10px;height:6px;margin-top:-2px; border-left:2px solid #fff;border-bottom:2px solid #fff; transform:rotate(-45deg) scale(.4);opacity:0; transition:opacity .15s,transform .18s var(--ease); } input[type="radio"].rk::after, .check input[type="radio"]::after{ content:'';width:7px;height:7px;border-radius:50%;background:#fff; transform:scale(.4);opacity:0;transition:opacity .15s,transform .18s var(--ease); } input[type="checkbox"].rk:checked, input[type="radio"].rk:checked, .check input:checked, .modal-again input[type="checkbox"]:checked{background:var(--pri)} input[type="checkbox"].rk:checked::after, input[type="radio"].rk:checked::after, .check input:checked::after, .modal-again input[type="checkbox"]:checked::after{opacity:1} input[type="checkbox"].rk:checked::after, .check input[type="checkbox"]:checked::after, .modal-again input[type="checkbox"]:checked::after{transform:rotate(-45deg) scale(1)} input[type="radio"].rk:checked::after, .check input[type="radio"]:checked::after{transform:scale(1)} input[type="checkbox"].rk:active, input[type="radio"].rk:active, .check input:active, .modal-again input[type="checkbox"]:active{transform:scale(.9)} input[type="checkbox"].rk:focus-visible, input[type="radio"].rk:focus-visible, .check input:focus-visible, .modal-again input:focus-visible{outline:2px solid var(--pri);outline-offset:2px} /* 글자와 함께 쓰는 줄 */ .check{display:inline-flex;align-items:center;gap:9px;cursor:pointer; font-size:14.5px;color:var(--txt-2);user-select:none} .check:hover{color:var(--txt)} /* ========================================================= 커스텀 드롭다운 · 자동완성 진짜