@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Pridi:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://use.typekit.net/tsq7czi.css");
*, *::before, *::after {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, input, select, textarea, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, header, footer, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; vertical-align: baseline; border: 0;}
article, aside, hgroup, header, footer, figure, figcaption, nav, section,time, mark, canvas, video, audio, details, summary {display: block;}

:root {
  /* Typography - Font Family */
  --prd: Pridi, sans-serif;
  --rbt: Roboto, sans-serif;
  --hel: helvetica-neue-lt-pro, helvetica-neue-world, sans-serif;

  /* Spacing (1.2rem grid) */
  --s-1: 1.2rem;
  --s-2: 2.4rem;
  --s-3: 3.6rem;
  --s-4: 4.8rem;
  --s-5: 6rem;
  --s-6: 7.2rem;
  --glow1:0 0 0.4rem rgba(0, 192, 255, 0.5), 0 0 0.8rem rgba(0, 192, 255, 0.5), 0 0 1.6rem rgba(0, 192, 255, 0.5);
  --glow2:0 0 0.1rem rgba(0, 233, 255, 0.3), 0 0 0.3rem rgba(0, 233, 255, 0.3), 0 0 0.6rem rgba(0, 233, 255, 0.3);
  /* Layout */
  --max-w: 173.2rem;
}

html {-webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none;}

html {width: 100%; height: 100%; font-size: 62.5%; scroll-behavior: smooth;}
body {width: 100%; height: 100%; font-size: 1.4rem; color: #FFFFFF; font-weight: 400; line-height: 1; text-align: center; font-family: var(--prd); background: #000000;}
menu, ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {table-layout: fixed; word-break: break-all; white-space: pre-wrap ; border-collapse: collapse; border-spacing: 0;}
table caption {display: none;}
ul {font-size: 0;}
li {font-size: 1.6rem; letter-spacing: 0;}
img {line-height: inherit; vertical-align: top; -ms-interpolation-mode: bicubic !important; max-width:100%;}
h1, h2, h3, h4, h5, h6 {color: #FFFFFF; font-weight: 400; font-family: var(--prd);}
a {color: #FFFFFF; font-weight: 400; text-decoration: none; font-family: var(--prd); display: inline-block; outline: none; cursor: pointer; transition: all 250ms ease-out;}
a:focus {outline: none;}

.mobile {display:none;}
.s_link {position:absolute; left:0; bottom:0; right:0; top:0; text-indent:-99999px; z-index:10; background:#ffffff; opacity: 0; filter: alpha(opacity=0); font-size:0;}
.obj {position:absolute;}

.inner {max-width: var(--max-w); padding-left: 3rem; padding-right: 3rem; margin-left: auto; margin-right: auto;}
.dst {display:table; width:100%; height:100%;}
.dstc {display:table-cell; vertical-align: middle;}

/* ── Utility ── */
.visually-hidden {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

/* ── Button ── */
.btn {transition:all ease-in-out 0.2s; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; background:rgba(0, 0, 0, 0); position:relative; z-index:1; font-family: var(--prd);}
.btn:before, .btn:after {content:''; display:block; position:absolute;}
.btn:before {top:2px; bottom:2px; left:2px; right:2px; border:1px solid #6fdbff; box-shadow:0 0 5px rgba(0, 192, 255, 0.7); z-index:1;}
.btn:after {top:-1px; bottom:-1px; right:-1px; left:-1px; background:linear-gradient(to right, #ff0000, #ff9292, #ff0000); z-index:2; clip-path: polygon(1.5rem 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 calc(100% - 1.5rem), 0 1.5rem);}
.btn span {position:relative; z-index:3; transition:background , color ease-in-out 0.2s; box-shadow:inset 0 0 1.5rem rgba(255, 0, 0, 0.7); padding:0 1.2rem; height:48px; display:flex; align-items:center; justify-content:center; background:linear-gradient(45deg, rgba(0, 0, 0 ,0), rgba(255, 0, 0, 0.2)) , #000; font-size:18px; color:#ffb3b3; letter-spacing:0.04em; text-transform:uppercase; clip-path: polygon(1.5rem 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 calc(100% - 1.5rem), 0 1.5rem);}
.btn:hover span {color:#fff; background:linear-gradient(45deg, rgba(0, 0, 0 ,0), rgba(255, 0, 0, 0.2)) , #640000; clip-path: polygon(1.3rem 0, calc(100% - 1.3rem) 0, 100% 1.3rem, 100% calc(100% - 1.3rem), calc(100% - 1.3rem) 100%, 1.3rem 100%, 0 calc(100% - 1.3rem), 0 1.3rem);}
.btn:hover:after {clip-path: polygon(1.3rem 0, calc(100% - 1.3rem) 0, 100% 1.3rem, 100% calc(100% - 1.3rem), calc(100% - 1.3rem) 100%, 1.3rem 100%, 0 calc(100% - 1.3rem), 0 1.3rem);}

.btn02:before {border:1px solid #ff1a1a; box-shadow:0 0 5px rgba(255, 26, 26, 0.7);}
.btn02:after {background:linear-gradient(to right, #00e7fd, #92f5fe, #00e7fd)}
.btn02 span {box-shadow:inset 0 0 1.5rem rgba(0, 192, 255, 0.5); background:linear-gradient(45deg, rgba(0, 0, 0 ,0), rgba(0, 231, 253, 0.2)) , #000; color:#0eeaff;}
.btn02:hover span {color:#fff; background:linear-gradient(45deg, rgba(0, 0, 0 ,0), rgba(0, 231, 253, 0.2)) , #006a74;}

.btn03 span {box-shadow:inset 0 0 1.5rem rgba(204, 0, 0, 0.7); background:linear-gradient(45deg, rgba(0, 0, 0 ,0), rgba(255, 0, 0, 0.2)) , #630000;}
.btn03:hover span {box-shadow:inset 0 0 1.5rem rgba(255, 0, 0, 0.5); background:linear-gradient(45deg, rgba(0, 0, 0 ,0), rgba(255, 0, 0, 0.2)) , #af0000;}

.btn.off {cursor:default;}
.btn.off:after {background:#717171;}
.btn.off:before {border-color:#ff1a1a;}
.btn.off span {background:#2c2c2c; color:#717171; box-shadow:none;}
.btn.off:hover span {background:#2c2c2c; color:#717171; clip-path: polygon(1.5rem 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 calc(100% - 1.5rem), 0 1.5rem);}
.btn.off:hover:after {clip-path: polygon(1.5rem 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 calc(100% - 1.5rem), 0 1.5rem);}

.btn.end {cursor:default;}
.btn.end:after {background:#00e7fd;}
.btn.end:before {border-color:#ff1a1a; box-shadow: 0 0 5px rgba(255, 26, 26, 0.7);}
.btn.end span {background:#000000; color:#ff1a1a; box-shadow:none;}
.btn.end:hover span {background:#000000; color:#ff1a1a; clip-path: polygon(1.5rem 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 calc(100% - 1.5rem), 0 1.5rem);}
.btn.end:hover:after {clip-path: polygon(1.5rem 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 calc(100% - 1.5rem), 0 1.5rem);}

/* ── Page Layout ── */
.wrapper {position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden;}
.page {flex: 1; position: relative; z-index: 1;}

/* ── Site Header ── */
header {text-align: left; position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding: 3.6rem 6rem 0;}
header .bi img {max-width: 160px;}

/* ── Card Scatter ── */
.card {position:absolute; opacity:0; animation-name:scatter, floatSway; animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1), linear; animation-fill-mode:forwards, none; animation-iteration-count:1, infinite;}
.card01 {width:11.92%; max-width:306px; left:3.15%; top:2%; --ox:47vw; --oy:30vh; animation-duration:0.4s, 4s; animation-delay:0.2s, 0.5s;}
.card02 {width:13.63%; max-width:350px; left:37%; top:-10%; --ox:13vw; --oy:40vh; animation-duration:0.4s, 4s; animation-delay:0.1s, 0.6s;}
.card03 {width:13.36%; max-width:343px; left:82.48%; top:-10.5%; --ox:-33vw; --oy:38vh; animation-duration:0.4s, 4s; animation-delay:0.3s, 1.7s;}
.card04 {width:14.76%; max-width:379px; left:5.88%; top:40%; --ox:44vw; --oy:8vh; animation-duration:0.4s, 4s; animation-delay:0.1s, 0.7s;}
.card05 {width:10.59%; max-width:272px; left:46%; top:36%; --ox:3vw; --oy:10vh; animation-duration:0.4s, 4s; animation-delay:0.2s, 0.8s;}
.card06 {width:16.86%; max-width:433px; left:78%; top:53%; --ox:-27vw; --oy:-2vh; animation-duration:0.4s, 4s; animation-delay:0.3s, 0.9s; z-index:1;}

/* ── View Top ── */
.view--top {padding:24.4rem 0 12rem; background:url('/images/common/event/2026/invite/bg01.jpg') center 0 no-repeat; background-size:cover; position:relative;}
.view--top .obj {top:0;}
.view--top .obj01 {left:0; animation: slow-zoom 7s ease-in-out infinite alternate;}
.view--top .obj02 {right:0; animation: slow-zoom 7s 1s ease-in-out infinite alternate;}
.view--top .cha {top:21px; right:35px; position:absolute; animation-duration:0.5s;}
.view--top .cha02 {animation-delay:0.2s;}

/* ── Hero ── */
.kv {text-align:left;}
.kv__con .kv__tit {margin-left:-2rem; margin-bottom:1.8rem;}
.kv__con .kv__tit span {display:inline-block; position:relative;}
.kv__con .kv__tit span:before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/images/common/event/2026/invite/title_light.png') 0 0 no-repeat; background-size:100% auto; animation:flicker 3s ease-in-out infinite;}
.kv__con .kv__act {display: inline-flex; gap: 4rem;}
.kv__con .kv__act .btn span {min-width:200px; height:66px;}
.kv .date {position:absolute; top:4.5rem; left:50%; transform:translate(-50% , 0); font-size:24px; text-transform:uppercase; color:#fff; letter-spacing:0.1em; text-shadow: var(--glow1);}
.notice {margin-top:4.4rem; position:relative; font-size:18px; padding:10px 1rem 10px 4.8rem; color:#00e9ff; text-transform:uppercase; letter-spacing:0.02em; width:max-content; max-width:100%; background:url('/images/common/event/2026/invite/bg_notice.png') 0 0 repeat-x; background-size:auto 100%; }
.notice:before {content:''; display:block; position:absolute; width:29px; height:24px; left:1rem; top:50%; margin-top:-12px; background:url('/images/common/event/2026/invite/icon_notice.png') 0 0 no-repeat; background-size:100% auto;}

/* ── Section Header ── */
.sec-head--center {text-align: center;}

/* ── Participate ── */
.participate {z-index:1; background:rgba(0, 0, 0, 0.7); border:1px solid #00e9ff; border-top:0; position:relative; padding:3rem 6.4rem 6.4rem; margin-top:10.4rem;}
.participate:before, .participate:after {content:''; display:block; position:absolute;}
.participate:before {width:12.5rem; height:1.7rem; background:url('/images/common/event/2026/invite/bg_part_b.jpg') 0 0 no-repeat; left:-1px; bottom:-1px; background-size:100% auto;}
.participate:after {width:8.8rem; height:1px; background:#00e9ff; right:0; top:0;}
.participate__deco {display:inline-block; width:calc(100% - 8.8rem); border:1px solid #00e9ff; border-bottom:0; border-top-width:0.9rem; position:absolute; height:2.5rem; left:0; top:-2.5rem; background:rgba(0, 0, 0, 0.7); clip-path: polygon(2.5rem 0%, calc(100% - 2.5rem) 0%, 100% 100%, 0% 100%);}
.participate__deco:before {content:''; display:block; position:absolute; top:-0.9rem; bottom:0; left:0; right:0; background:url('/images/common/event/2026/invite/obj_tg_l.png') 0 0 no-repeat , url('/images/common/event/2026/invite/obj_tg_r.png') right 0 no-repeat;}
.participate__deco2 {position:absolute; top:-1.6rem; bottom:-1px; left:-1px; right:-1px; background:url('/images/common/event/2026/invite/bg_obj.png') right 0 no-repeat; clip-path: polygon(0 100%, 0 0, calc(100% - 10.4rem) 0, calc(100% - 8.9rem) 1.6rem, 100% 1.6rem, 100% 100%);}
.participate .sec-head {margin-bottom:5.4rem; text-align:left;}
.participate .sec-head a {font-size:29px; color:#00e9ff; letter-spacing:0.02em; text-transform:uppercase; position:relative;}
.participate .sec-head .more {vertical-align:middle; margin-left:1.2rem; font-size:16px; color:#fff; display:inline-flex; align-items:center; justify-content:center; width:128px; height:32px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/2026/invite/btn_more.png');}
.participate .sec-head .more:before {content:''; display:inline-block; vertical-align:middle; width:12px; height:16px; background:url('/images/common/event/2026/invite/ojb_arr.png') 0 0 no-repeat; background-size:100% auto; margin-right:0.4rem;}
.participate .sec-head a:hover .more {background-position:0 100%;}
.participate__panel {position:relative;}
.participate__panel:after, .participate__panel:before {content:''; display:block; position:absolute;}
.participate__panel:after {top:-2.6rem; bottom:-2.6rem; left:-0.6rem; right:-1.0rem; background:url('/images/common/event/2026/invite/obj_pt_lt.png') 0 0 no-repeat , url('/images/common/event/2026/invite/obj_pt_rt.png') right 0 no-repeat, url('/images/common/event/2026/invite/obj_pt_lb.png') 0 bottom no-repeat, url('/images/common/event/2026/invite/obj_pt_rb.png') right bottom no-repeat;}
.participate__panel:before {top:0; bottom:0; left:2rem; right:1.5rem; background:rgba(0, 0, 0, 0.8); box-shadow:inset 0 0 0 1px #970000 , 0 0 1rem rgba(200, 0, 0, 0.3); clip-path: polygon(9.6rem 0, calc(100% - 9.6rem) 0, 100% 9.6rem, 100% calc(100% - 9.6rem), calc(100% - 9.6rem) 100%, 9.6rem 100%, 0 calc(100% - 9.6rem), 0 9.6rem);}
.participate__wrap {padding:3rem 1.7rem 3rem 2.4rem; min-height:314px; position:relative; z-index:1; display: flex; align-items: stretch; justify-content: space-between;}
.participate__board {padding-top:7.2rem; position:relative; width:100%; min-height:314px; display: flex; align-items: center; justify-content: space-between;}
.participate__side {width: calc((100% - 454px) / 2); min-width: 0; display:flex; align-items:center; justify-content:flex-start; flex-direction: column;}
.participate--existing .participate__wrap {flex-direction: column;}
.participate--existing .sec-head {margin-left:-1.4rem;}

/* ── Invite Code ── */
.inv-code {text-align: center; }
.profile {position:absolute; top:0; left:0; right:0; height:7.2rem; padding:0 3.2rem; display:flex; align-items:center; justify-content:flex-start; text-align:left; font-weight:700; font-family:var(--hel); color:#fff; font-size:16px; letter-spacing:0.04em;}
.profile:before {content:''; display:block; position:absolute; left:0.5rem; right:0rem; height:1px; background:#970000; bottom:0;}
.rank img {vertical-align: middle; width: 30px; height: 30px;}
.profile__nick {display:inline-block; max-width:calc((100% - 454px) / 2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.profile__nick .rank {margin-right:1rem;}
.inv-code__body {width:100%; height:calc(100% - 8rem); display:flex; align-items:center; justify-content:center; flex-direction: column;}
.inv-code__desc {text-transform:uppercase; text-shadow:0 0 1rem rgba(0, 192, 255, 0.4); font-size:24px; color:#fff; line-height:1.3;}
.inv-code__desc span {color:#00e9ff;}
.inv-code__bottom {margin-top:1.6rem; width:400px; max-width:100%;}
.inv-code__bottom .inv-code__field {margin-top:0; max-width:none;}
.inv-code__field {border-radius:1rem; max-width:400px; position:relative; margin:1.6rem auto 2.4rem; width:100%; background:url('/images/common/event/2026/invite/ptn_dot.png') 0 0 repeat, rgba(0, 0, 0, 0.1); border:0.2rem solid #00e9ff; box-shadow:inset 0 0 1rem rgba(0, 0, 0, 0.7);}
.inv-code__field:before, .inv-code__field:after {content:''; display:block; position:absolute; width:0.4rem; top:1.2rem; bottom:1.2rem; background:#00e9ff; box-shadow:var(--glow1);}
.inv-code__field:before {left:-0.3rem;}
.inv-code__field:after {right:-0.3rem;}
.inv-code__field .inv-code__input {position:relative; padding:0 2.4rem; width:100%; text-align:center; height:6.2rem; display:flex; align-items:center; justify-content:center; word-break: break-all; line-height: 1; font-size:24px; font-family: var(--hel); color:#ff0000;}
.inv-code__field input.inv-code__input {background:none; position:relative; text-align:left; color:#e4ff00;}
.inv-code__field input.inv-code__input::placeholder {color:#fff;}
.inv-code__field input.inv-code__input:focus {outline:none;}
.inv-code__field input.inv-code__input:-webkit-autofill, .inv-code__field input.inv-code__input:-webkit-autofill:hover, .inv-code__field input.inv-code__input:-webkit-autofill:focus, .inv-code__field input.inv-code__input:-webkit-autofill:active {-webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px transparent inset; transition: background-color 5000s ease-in-out 0s;}
.inv-code__act {display: inline-flex; gap: 1.6rem;}
.inv-code__act .btn span {width:160px; height:60px; font-size:18px;}

.btn--reward--info {position:absolute; top:1.8rem; right:1.7rem;}
.btn--reward--info span {height:33px; min-width:14.8rem; padding:0 2.4rem; font-size:14px; clip-path: polygon(1rem 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 1rem 100%, 0 calc(100% - 1rem), 0 1rem);}
.btn--reward--info span:before {margin-right:5px; content:''; display:block; width:14px; height:9px; background-image:url('/images/common/event/2026/invite/icon_more.png'); background-repeat:no-repeat; background-size:100% auto; background-position:0 0;}
.btn--reward--info:before {top:1px; bottom:1px; left:1px; right:1px;}
.btn--reward--info:after {clip-path: polygon(1rem 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 1rem 100%, 0 calc(100% - 1rem), 0 1rem);}
.btn--reward--info:hover span {clip-path: polygon(1rem 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 1rem 100%, 0 calc(100% - 1rem), 0 1rem);}
.btn--reward--info:hover:after {clip-path: polygon(1rem 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 1rem 100%, 0 calc(100% - 1rem), 0 1rem);}
.btn--reward--info:hover span:before {background-position:0 100%;}

/* ── Progress Gauge ── */
.gauge {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items:center; justify-content:center; width: 454px; height: 454px; background:url('/images/common/event/2026/invite/bg_gage.png') center center no-repeat; background-size:454px auto;}
.gauge:before {content:''; display:block; position:absolute; width:100%; height:100%; background:url('/images/common/event/2026/invite/bg_gage_rotate.png') 0 0 no-repeat; background-size:100% auto; transform: scale(0.9); animation:gauge-pulse 10s ease-in-out infinite; }
.gauge__ring {display: block; width: 46%; height: 46%; transform: scaleX(-1) rotate(-90deg);}
.gauge__bg {fill: none; stroke: #000; stroke-width: 7;}
.gauge__fill {fill: none; stroke: #00e9ff; stroke-width: 8;}
.gauge__label {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color:#fff; font-size:50px; font-weight:700; font-family:var(--hel); text-shadow:0 0.5rem 0.3rem rgba(0, 0, 0, 0.5);}
.gauge__cur {color:#00e9ff;}
.gauge__sep {margin: 0 0.4rem; font-weight:100;}
.animated .gauge__fill {transition: stroke-dashoffset 0.6s ease;}

/* ── Friends ── */
.friends {padding-left:0.4rem; overflow: hidden; justify-content: space-between;}
.friends__head {margin-bottom:1.7rem; text-align:left; width:100%; font-size:21px; color:#00e9ff; letter-spacing:0.04em; text-transform:uppercase; position:relative; padding-left:16px;}
.friends__head:before {content:''; display:block; position:absolute; top:0.3rem; left:0; width:8px; height:14px; background:url('/images/common/event/2026/invite/ojb_arr02.png') 0 0 no-repeat; background-size:100% auto;}
.friends__list {display: flex; gap: 1.4rem; overflow-x: auto; width: 100%; padding-bottom:1.7rem;}
.friends__list::-webkit-scrollbar {height: 8px;}
.friends__list::-webkit-scrollbar-track {background: linear-gradient(transparent 2px, #00536e 2px, #00536e 3px, #003648 3px, #003648 5px, #00536e 5px, #00536e 6px, transparent 6px); border-radius: 2px;}
.friends__list::-webkit-scrollbar-thumb {border-radius: 4px; background: #fff; box-shadow:0 0 0.4rem rgba(255, 0, 0, 0.5), 0 0 0.8rem rgba(255, 0, 0, 0.5), 0 0 1.6rem rgba(255, 0, 0, 0.5);}
.friend {display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; position:relative; width:160px;}
.friend:after {content:''; display:block; padding-bottom:100.63%;}
.friend .friend__inner {display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding:18% 15% 12%; position:absolute; top:0; left:0; width:100%; height:100%; background-image:url('/images/common/event/2026/invite/bg_user.png'); background-position:0 0; background-repeat:no-repeat; background-size:100% auto;}
.friend .friend__inner .num {position:absolute; display:flex; align-items:center; justify-content:center; font-size:14px; letter-spacing:0.04em; font-weight:600; top:0; right:0; width: 25%; height: 11%; color:#00444a;}
.friend .friend__inner .rank {display:block; margin:0 auto;}
.friend .friend__inner .info {font-size:14px; color:#828282; text-transform:uppercase; margin:0 -1%; display:flex; align-items: center; justify-content: center; flex: 1; padding-bottom: 6%;}
.friend .friend__inner .btn {width:100%;}
.friend .friend__inner .btn span {width:100%; height:40px; font-size:13px; clip-path: polygon(1rem 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 1rem 100%, 0 calc(100% - 1rem), 0 1rem);}
.friend .friend__inner .btn:before {top:1px; bottom:1px; left:1px; right:1px;}
.friend .friend__inner .btn:after {clip-path: polygon(1rem 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 1rem 100%, 0 calc(100% - 1rem), 0 1rem);}
.friend__name {max-width: 100%; display:block; padding:2px 0; word-break: break-all; font-family:var(--hel); color:#d4d4d4; font-size:16px; letter-spacing:0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.friend.dis .friend__inner {background-image:url('/images/common/event/2026/invite/bg_user_dis.png');}
.friend.dis .friend__inner .num {color:#000;}
.no .friend__name {text-transform:uppercase; font-size:14px;}

/* ── Invite Bonus ── */
.invite-bonus {margin-top:5.8rem; position:relative; background:#000 url('/images/common/event/2026/invite/bg_bonus.png') center 0 no-repeat;}
.invite-bonus:before {content:''; display:block; position:absolute; z-index:1; top:-0.7rem; bottom:-0.7rem; left:0; right:0; background:url('/images/common/event/2026/invite/obj_bonus_lt.png') -0.1rem 0.7rem no-repeat, url('/images/common/event/2026/invite/obj_bonus_t.png') right 0 no-repeat, url('/images/common/event/2026/invite/obj_bonus_b.png') 0 bottom no-repeat, url('/images/common/event/2026/invite/obj_bonus_rb.png') right -0.1rem bottom 0.7rem no-repeat;}
.invite-bonus__inner {position:relative; z-index:2; padding:2rem 3.6rem 1rem; border:1px solid #00e9ff; clip-path: polygon(1.2rem 0, calc(100% - 1.2rem) 0, 100% 1.2rem, 100% calc(100% - 1.2rem), calc(100% - 1.2rem) 100%, 1.2rem 100%, 0 calc(100% - 1.2rem), 0 1.2rem);}
.invite-bonus__body {display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2.4rem; width:100%; margin:0 auto; max-width:1200px;}
.invite-bonus__reward {order:-1; justify-self:start; margin-bottom:-10px;}
.invite-bonus__reward > img {max-width:none;}
.invite-bonus__txt {justify-self:center; line-height:1.3; text-transform:uppercase; text-align:center; font-size:24px; color:#fff; letter-spacing:0.04em; text-shadow:var(--glow1);}
.invite-bonus__body .btn--receive {justify-self:end;}
.invite-bonus__txt span {color:#00e9ff;}
.invite-bonus .btn--receive span {width:220px; height:68px;}
.participate--new .invite-bonus {margin-top:3.8rem;}

/* ── Participate New ── */
.participate--new {padding:2.4rem 7.7rem 6rem;}
.participate--new .sec-head {margin-bottom:3rem;}
.participate--new .profile {color:#000000; justify-content: center; position:absolute; top:-1.8rem; left:50%; transform:translate(-50% , 0); width:38rem; height:43px; margin:0; background:#00e9ff; clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 3rem 100%); padding:0 4.8rem;}
.participate--new .profile:before {display:none;}
.participate--new .profile__nick {max-width:100%;}
.inv-code--new .inv-code__body {height:auto;}
.inv-code--new .inv-code__desc {padding:0.8rem 2.4rem; border-bottom:1px solid #ad000b; background:url('/images/common/event/2026/invite/ptn_dot.png') 0 0 repeat; background-color:rgba(93, 0, 6, 0.5);}
.inv-code__group {max-width:572px; margin:0 auto; width:100%; position:relative;}
.inv-code__group .inv-code__field {max-width:none; padding-right:155px; position:relative; box-shadow: 0 0 1rem rgba(255, 0, 0, 0.8); margin:0 auto;}
.inv-code__group .btn--confirm {position:absolute; top:50%; right:5px; transform:translate(0 , -50%);}
.inv-code__group .btn--confirm span {width:144px; height:52px; font-size:14px;}

.inv-code--new {position:relative; padding:4rem; margin-bottom:2.6rem; border:1px solid #00e9ff; clip-path: polygon(1.2rem 0, calc(100% - 1.2rem) 0, 100% 1.2rem, 100% calc(100% - 1.2rem), calc(100% - 1.2rem) 100%, 1.2rem 100%, 0 calc(100% - 1.2rem), 0 1.2rem);}
.inv-code--new:before {z-index:-1; content:''; display:block; position:absolute; top:-1px; bottom:-1px; right:-1px; left:-1px; background:url('/images/common/event/2026/invite/obj_bonus_lt.png') 0 0 no-repeat, url('/images/common/event/2026/invite/obj_bonus_rt.png') right 0 no-repeat, url('/images/common/event/2026/invite/obj_bonus_lb.png') 0 bottom no-repeat, url('/images/common/event/2026/invite/obj_bonus_rb.png') right bottom no-repeat;}
.inv-code--new .inv-code__body {max-width:1145px; margin:0 auto;}
.inv-code__title {margin-bottom:3.6rem; color:#fff; font-size:21px; letter-spacing:0.04em; text-transform:uppercase;}
.inv-code__title:before {position:relative; top:-1px; margin-right:0.8rem; content:''; display:inline-block; vertical-align:middle; width:8px; height:14px; background:url('/images/common/event/2026/invite/ojb_arr02.png') 0 0 no-repeat; background-size:100% auto;}
.inv-code__title span {color:#00e9ff;}
.inv-code__inner {width:100%; display:flex; gap:1.5rem;}
.inv-code__inner > div {border:1px solid #ad000b; border-radius:1rem; display: flex; flex-direction: column; background:#000000;}
.inv-code__content {flex:1;}
.inv-code__content > div {padding:3.6rem 2.4rem; min-height:19.6rem; display:flex; align-items:center; justify-content:center; flex-direction:column; flex:1;}
.inv-code__bound {width:100%; max-width:572px; margin:0 auto; background:#000f14; border-radius:1rem; border:1px solid #00e9ff; padding:2rem 3.6rem;}
.inv-code__bound .inv-code__status {font-size:16px; color:#e4ff00; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:2rem;}
.inv-code__bound .inv-code__status:before {content:''; display:inline-block; vertical-align:middle; position:relative; top:-1px; margin-right:4px; width:13px; height:13px; background:url('/images/common/event/2026/invite/icon_success.png') 0 0 no-repeat; background-size:100% auto;}
.inv-code__bound .inv-code__user {font-size:16px; color:#fff; font-family:var(--hel); letter-spacing:0.04em;}
.inv-code__bound .inv-code__user span {display:inline-block; vertical-align:middle; max-width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* ── Friend Reward ── */
.friend-reward {width:400px; padding:1.5rem 2rem;}
.friend-reward .btn--receive span {width:152px; height:40px; font-size:14px;}
.friend-reward__thumb {display:flex; align-items:center; justify-content:center; height:11.2rem; flex-shrink:0;}
.friend-reward__thumb img {max-height:100%;}
.friend-reward__body {display:flex; align-items:center; justify-content:space-between; flex-direction:column; flex:1; gap: 10px;}
.friend-reward__title {font-size:18px; color:#00e9ff; letter-spacing:0.04em; text-transform:uppercase;}
.friend-reward__name {font-size:12px; font-family:var(--hel); letter-spacing:0.04em; color:#00e9ff;}
.friend-reward__name .day {color:#ff9898;}

/* ── Mission List ── */
.mission-list {display:flex; gap:4.8rem;}

/* ── Task Card ── */
.task-card {flex-shrink: 0; display:inline-block; vertical-align:top; width:calc((100% - 9.6rem) / 3); position:relative;}
.task-card:after {content:''; display:block; padding-bottom: 55.721%;}
.task-card .task-card__inner {position:absolute; top:0; left:0; width:100%; height:100%; background-image:url('/images/common/event/2026/invite/bg_new_ms01.png'); background-position:0 0; background-repeat:no-repeat; background-size:100% auto; padding: 2% 2% 7.2%;}
.task-card__header {display: flex; align-items: center; justify-content: center; flex-direction: column; height: 34%;}
.task-card__title {padding:8px 0 4px; font-size:18px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; color:#00e9ff; text-shadow:var(--glow2);}
.task-card__title .task-card__count {font-weight:400;}
.task-card__title .task-card__count span {color:#efd600;}
.task-card__thumb {display:flex; align-items:center; justify-content:center; height:64%;}
.task-card__thumb img {max-height:100%;}
.task-card__mission {flex: 1; font-size:16px; color:#ffffff; letter-spacing:0.04em; text-transform:uppercase; line-height:1.25;}

/* ── Status Badge ── */
.status-badge {color:#3e3e3e; font-size:16px; letter-spacing:0.04em; text-transform:uppercase; position:absolute; bottom: 4%; padding: 0 16% 0.4%; left: 0; right: 0; height:9.2%; display:flex; align-items:center; justify-content:center;}
.status-badge .status-badge__label:before {margin-right:4px; vertical-align:middle; content:''; display:inline-block; position:relative; top:-1px; width:13px; height:13px; background-position:center center; background-repeat:no-repeat; background-size:100% auto;}

.task-card--progress .task-card__inner {background-image:url('/images/common/event/2026/invite/bg_new_ms02.png');}
.task-card--progress .status-badge {color:#0036ff;}
.task-card--progress .status-badge .status-badge__label:before {background-image:url('/images/common/event/2026/invite/icon_progress.png');}

.task-card--cleared .task-card__inner {background-image:url('/images/common/event/2026/invite/bg_new_ms03.png');}
.task-card--cleared .status-badge {color:#fff;}
.task-card--cleared .status-badge .status-badge__label:before {background-image:url('/images/common/event/2026/invite/icon_clear.png');}

/* ── Progress Bar ── */
.progress-bar {max-width:188px; width: 100%; border-radius:7px; background:#000; border:1px solid rgba(0, 192, 255, 0.8); height:14px; padding:3px; margin:5px auto 0;}
.progress-bar__fill {background: linear-gradient(to bottom, #fff, #00e9ff); border-radius:4px; height:100%; width:var(--fill, 0);}
.animated .progress-bar__fill {animation:fillBar 0.8s ease forwards;}
.task-card:nth-child(1) .progress-bar__fill {animation-delay:0.1s;}
.task-card:nth-child(2) .progress-bar__fill {animation-delay:0.3s;}
.task-card:nth-child(3) .progress-bar__fill {animation-delay:0.5s;}

/* ── View Bottom ── */
.view--bottom {overflow: hidden; background:#001117 url('/images/common/event/2026/invite/bg02_light.png') center 0 no-repeat; padding-top:6rem; position:relative;}
.view--bottom .sec-head__tit {margin-bottom:6rem; font-weight:500; font-size:40px; text-transform:uppercase; color:#fff; letter-spacing:0.05em; text-shadow:0 0 5px rgba(0, 192, 255, 0.5);}
.view--bottom .inner {position:relative;}
.view--bottom .obj {top:0; filter: brightness(1.4) saturate(1.6) drop-shadow(0 0 8px #4fd1ff);}
.view--bottom .obj_light01 {left:0; animation: gentle-float 10s ease-in-out infinite;}
.view--bottom .obj_light02 {right:0; animation: gentle-float 10s 1s ease-in-out infinite;}

/* ── Missions Grid ── */
.missions-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap:8rem;}
.missions-grid > .mission {display:contents;}
.missions-grid .btn span {min-width:200px; height:54px; font-size:18px;}

/* ── Mission Card ── */
.mission__card {min-height:25rem; z-index:1; position:relative; display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; padding:47px 5.2rem 4rem; text-align: center; border:1px solid #00e9ff; background:url('/images/common/event/2026/invite/ptn2.png') 0 0 repeat, #000; height: 100%;}
.mission__card:before, .mission__card:after {content:''; display:block; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px;}
.mission__card:before {z-index:-1; background:url('/images/common/event/2026/invite/obj_ms_bar_l.jpg') 0 center no-repeat, url('/images/common/event/2026/invite/obj_ms_bar_r.jpg') right center no-repeat, url('/images/common/event/2026/invite/obj_ms_bar_b.jpg') center bottom no-repeat;}
.mission__card:after {z-index:-2; background:url('/images/common/event/2026/invite/ms_line_lt.png') 0 0 no-repeat, url('/images/common/event/2026/invite/ms_line_rt.png') right 0 no-repeat, url('/images/common/event/2026/invite/ms_line_lb.png') 0 bottom no-repeat, url('/images/common/event/2026/invite/ms_line_rb.png') right bottom no-repeat;}
.mission__head {font-size:20px; font-weight:500; color:#000000; letter-spacing:0.05em; text-transform:uppercase; position:absolute; left:50%; top:-2.1rem; transform:translate(-50% , 0);}
.mission__head:before {content:''; display:block; position:absolute; left:50%; top: 24%; clip-path: polygon(0 0, 100% 0, 90% 100%, 9% 100%); background: #00455d; width: 99%; height: 41%; transform: translate(-50%, 0); z-index:-1;}
.mission__head span {width:24.3rem; height:7.7rem; padding-bottom:1rem; background:url('/images/common/event/2026/invite/bg_ms_tit.png') 0 0 no-repeat; background-size:100% auto; display:flex; align-items:center; justify-content:center;}
.mission__detail {position:relative; flex:1; display:flex;}
.mission__detail:before {position:absolute; content:''; display:block; top:0; bottom:0; left:-1.1rem; right:-1.1rem; background:url('/images/common/event/2026/invite/obj_ims_lt.png') 0 0 no-repeat, url('/images/common/event/2026/invite/obj_ims_rt.png') right 0 no-repeat, url('/images/common/event/2026/invite/obj_ims_lb.png') 0 bottom no-repeat, url('/images/common/event/2026/invite/obj_ims_rb.png') right bottom no-repeat;}
.mission__detail-inner {text-transform:uppercase; flex:1; flex-direction: column; border:1px solid #00e1ff; border-top-width:0.5rem; border-bottom-width:0.5rem; display:flex; min-height:13.6rem; padding:1rem 2rem; align-items:center; justify-content:center; font-size:18px; color:#ffffff; line-height:1.4; word-break:break-word; background:#000000 url('/images/common/event/2026/invite/bg_ms_desc.png') center center no-repeat;}
.mission__reward-info {display:flex; flex-direction:column; justify-content:center; align-items:Center;  margin:6px auto;}
.mission__reward {width:100%; display:flex; align-items:center; justify-content:center;}
.mission__reward img {max-height:100%;}
.mission__name {font-family:var(--hel); color:#00e9ff; font-size:14px; letter-spacing:0.04em; display:flex; flex:1; align-items: flex-start; justify-content: center; margin: 0 0 1.5rem; line-height: 1.2;}
.mission__name .day {color:#ff9898;}
.mission__card .btn {justify-self:center;}
.mission__card .btn.off:before {border-color:#7c7c7c;}
.mission__count {font-size:24px; color:#fff; font-weight:500; letter-spacing:0.1em; font-family:var(--hel); margin-top:2px;}
.mission__count span {color:#ff1a1a; font-weight:600;}
.mission__count font {color:#00e1ff; font-weight:600;}
.mission__card .complete {display:none; position:absolute; top:3rem; bottom:3rem; left:3rem; right:3rem; background:rgba(0, 0, 0, 0.7); align-items:center; justify-content:center; flex-direction:column; z-index:2;}
.mission__card .complete img {width:53%; max-width:230px;}
.mission__card .complete span {font-weight:500; color:#fff; font-size:36px; letter-spacing:0.06em; text-transform:uppercase; text-shadow:0 0 0.4rem rgba(53, 151, 92, 0.5), 0 0 0.8rem rgba(53, 151, 92, 0.5), 0 0 1.6rem rgba(53, 151, 92, 0.5);}
.complete .mission__card .complete {display:flex;}
.view--bottom .new li:last-child .mission__reward-info {margin: 6px -1rem;}

/* ── Mission Bonus ── */
.mission--bonus {margin-top:5.2rem; position:relative; background: #000 url(/images/common/event/2026/invite/bg_bonus.png) center 0 no-repeat;}
.mission--bonus:before {z-index:1; content:''; display:block; position:absolute; top:-0.7rem; bottom:-0.7rem; left:0; right:0; background:url('/images/common/event/2026/invite/obj_bonus_lt.png') -0.1rem 0.7rem no-repeat, url('/images/common/event/2026/invite/obj_bonus_t.png') right 0 no-repeat, url('/images/common/event/2026/invite/obj_bonus_b.png') 0 bottom no-repeat, url('/images/common/event/2026/invite/obj_bonus_rb.png') right -0.1rem bottom 0.7rem no-repeat;}
.mission--bonus .mission__inner {position: relative; z-index: 2; padding:5.3rem 3.6rem 0; display: flex; align-items: center; justify-content: center; border:1px solid #00e9ff; clip-path: polygon(1.2rem 0, calc(100% - 1.2rem) 0, 100% 1.2rem, 100% calc(100% - 1.2rem), calc(100% - 1.2rem) 100%, 1.2rem 100%, 0 calc(100% - 1.2rem), 0 1.2rem);}
.mission-bonus__head {z-index:2; font-size:20px; font-weight:500; color:#000000; letter-spacing:0.05em; text-transform:uppercase; width:49.2rem; height:5.6rem; padding-bottom:0.5rem; background:url('/images/common/event/2026/invite/bg_ms_tit02.png') 0 0 no-repeat; background-size:100% auto; display:flex; align-items:center; justify-content:center; position:absolute; left:50%; top:-1rem; transform:translate(-50% , 0);}
.mission-bonus__thumb {display:flex; align-items:center; justify-content:center; height:164px;}
.mission-bonus__thumb img {max-height:100%;}
.mission-bonus__name { display:flex; align-items:flex-start; justify-content:center; font-family:var(--hel); font-weight:500; color:#00e9ff; font-size:14px; letter-spacing:0.05em; height:7.2rem; margin-top:5px; line-height:1.2;}
.mission-bonus__name .day {color:#ff9898;}
.mission-bonus__body {position:relative; display:flex; align-items:center; justify-content:center; width:100%; max-width:1152px; margin:0 auto;}
.mission-bonus__body .btn--receive {position:absolute; right:0; top:50%; transform:translate(0 , -50%); margin-top:-34px;}
.mission-bonus__body .btn--receive span {width:220px; height:68px; font-size:18px;}

.mission__inner02 .mission-bonus__thumb {height:110px;}

.mission--all {background:url('/images/common/event/2026/invite/bg_all_ms.jpg') center center no-repeat; background-size:cover; padding:5.2rem 0 8rem; margin-top:8rem; position:relative;}
.mission--all:before {content: ""; position: absolute; inset: 0; padding: 1px; background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 233, 255, 0.4), rgba(0, 0, 0, 0)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.mission--all h3 {font-size:40px; font-weight:500; text-transform:uppercase; color:#fff; letter-spacing:0.05em; text-shadow: 0 0 1px rgba(255,255,255,.9), 0 0 4px rgba(0,192,255,.8), 0 0 10px rgba(0,192,255,.55), 0 0 20px rgba(0,192,255,.35);}
.mission--all .mission-bonus__head {transform:none; left:3rem; right:3rem; width:auto; background:none; height:auto; top:3.6rem; font-size:20px; color:#00e9ff; letter-spacing:0.05em; text-transform:uppercase; line-height:1.15;}
.mission--all .mission--bonus .mission__inner {padding-top:9rem; border-color:#ff1a1a;}
.mission--all .mission-bonus__name {margin-top:10px; height:5.6rem;}
.mission--all .mission--bonus:before {    background: url(/images/common/event/2026/invite/obj_bonus_lt02.png) -0.1rem 0.7rem no-repeat, url(/images/common/event/2026/invite/obj_bonus_t02.png) right 0 no-repeat, url(/images/common/event/2026/invite/obj_bonus_b02.png) 0 bottom no-repeat, url(/images/common/event/2026/invite/obj_bonus_rb02.png) right -0.1rem bottom 0.7rem no-repeat;}
.mission--all .mission--bonus {background: rgba(0, 0, 0, 0.7) url(/images/common/event/2026/invite/bg_bonus.png) center 0 no-repeat;}

/* ── Site Footer ── */
footer {width: 100%; padding: 9rem 2.4rem; font-family: var(--hel); z-index: 2;}
footer > img {margin-bottom: 2.4rem;}
footer .footer {font-size: 14px; color: #b5ada3; position: relative; letter-spacing: 0;}
footer .footer .cs > a {color: #00e9ff; font-family: var(--hel); text-decoration: underline;}
footer .footer .cs > a:hover {text-decoration: none;}
footer .footer .copy {margin-top: 7px; font-size: 14px; color: #b5ada3;}
footer .footer .age {margin-bottom: 2rem;}
footer .footer .age img {max-width: 6rem;}

.btn_top {position:fixed; z-index:11; right:7rem; bottom:7rem; }
.btn_top span {width:6.6rem; height:6.6rem; font-size:14px; flex-direction:column;}
.btn_top span:before {content:''; display:block; width:1.4rem; height:1.9rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2026/invite/icon_top.png'); margin:0 auto 0.5rem; background-size:100% auto;}
.btn_top:hover span:before {background-position:0 100%;}

/* popup */
.dimmed {width: 100%; height: 100%; text-indent: -99999px; background:rgba(0, 0, 0, 0.7); position: fixed; left: 0; top: 0; z-index: 90; display:none;}

.pop_up {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99; display: none;}
.pop_up .pop_layout {width:620px; left:50%; top:50%; transform:translate(-50% , -50%); z-index: 99; position: relative; background:rgba(0, 0, 0, 0.7); border:1px solid #00c0ff; border-top:0; position:relative; padding:4rem 7.5rem 7.5rem; }
.pop_up .pop_layout:before, .pop_up .pop_layout:after {content:''; display:block; position:absolute;}
.pop_up .pop_layout:after {width:8.8rem; height:1px; background:#00c0ff; right:0; top:0;}
.pop_up .pop_layout .participate__deco {display:inline-block; width:calc(100% - 8.8rem); border:1px solid #00c0ff; border-bottom:0; border-top-width:0.9rem; position:absolute; height:2.5rem; left:0; top:-2.5rem; background:rgba(0, 0, 0, 0.7); clip-path: polygon(2.5rem 0%, calc(100% - 2.5rem) 0%, 100% 100%, 0% 100%);}
.pop_up .pop_layout .participate__deco:before {content:''; display:block; position:absolute; top:-0.9rem; bottom:0; left:0; right:0; background:url('/images/common/event/2026/invite/obj_tg_l.png') 0 0 no-repeat , url('/images/common/event/2026/invite/obj_tg_r.png') right 0 no-repeat;}
.pop_up .pop_layout .participate__deco2 {position:absolute; top:-1.6rem; bottom:-1px; left:-1px; right:-1px; background:url('/images/common/event/2026/invite/bg_obj.png') right 0 no-repeat; clip-path: polygon(0 100%, 0 0, calc(100% - 10.4rem) 0, calc(100% - 8.9rem) 1.6rem, 100% 1.6rem, 100% 100%); background-size: 50.8rem auto;}
.pop_up .pop_con {position:relative;}
.pop_up .txt_wrap {z-index:1; position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:22rem; padding:2rem 0;}
.pop_up .txt_wrap .tit {letter-spacing:0.04em; font-size:30px; color:#00c0ff; font-weight:500; text-transform:uppercase;}
.pop_up .txt_wrap .txt {font-family:var(--hel); font-size:16px; color:#cbcbcb; line-height:1.25; margin-top:1.2rem;}
.pop_up .txt_wrap .info {word-break: break-word; line-height: 1.28; font-family:var(--hel); margin-top:2rem; font-size:14px; color:#00c0ff; width:100%; max-width:356px; min-height:6.4rem; display:flex; align-items:center; justify-content:center; border-radius:5px; background:#00212c; border:1px solid #0078a0; padding:1.2rem 2.4rem;}
.pop_up .txt_wrap .info_box {text-transform:uppercase; word-break: break-all; line-height: 1.2; font-family:var(--hel); margin-top:2rem; font-size:14px; color:#b8b8b8; width:100%; max-width:356px; border-radius:5px; background:#0b1f00; border:1px solid #1c4605;}
.pop_up .txt_wrap .info_box .info01 {min-height:4.6rem; display:flex; align-items:center; justify-content:center; padding:1.2rem 2.4rem; color:#95dc6f; background:#1c4605;}
.pop_up .txt_wrap .info_box .info02 {min-height:7.8rem; display:flex; align-items:center; justify-content:center; padding:1.2rem 2.4rem; flex-direction:column;}
.pop_up .txt_wrap .info_box .info02 span {display: block; color:#95dc6f;}

.pop_up .icon {margin-bottom:5.6rem;}
.pop_up .panel {position:relative; min-height:24rem;}
.pop_up .panel:after, .pop_up .panel:before {content:''; display:block; position:absolute;}
.pop_up .panel:after {top:-2.6rem; bottom:-2.6rem; left:-2.6rem; right:-2.6rem; background:url('/images/common/event/2026/invite/pop_pt_lt.png') 0 0 no-repeat , url('/images/common/event/2026/invite/pop_pt_rt.png') right 0 no-repeat, url('/images/common/event/2026/invite/pop_pt_lb.png') 0 bottom no-repeat, url('/images/common/event/2026/invite/pop_pt_rb.png') right bottom no-repeat;}
.pop_up .panel:before {top:0; bottom:0; left:0; right:0; background:rgba(0, 0, 0, 0.8); box-shadow:inset 0 0 0 1px #970000 , 0 0 1rem rgba(200, 0, 0, 0.3); clip-path: polygon(9.6rem 0, calc(100% - 9.6rem) 0, 100% 9.6rem, 100% calc(100% - 9.6rem), calc(100% - 9.6rem) 100%, 9.6rem 100%, 0 calc(100% - 9.6rem), 0 9.6rem);}
.pop_up .panel .desc {padding:0 2rem 2rem;}
.pop_up .panel .desc:before {z-index:1; content:''; display:block; position:absolute; top:-1.6rem; bottom:-1.6rem; left:-1.6rem; right:-1.6rem; background: url('/images/common/event/2026/invite/ms_line_lt.png') 0 0 no-repeat, url('/images/common/event/2026/invite/ms_line_rt.png') right 0 no-repeat, url('/images/common/event/2026/invite/ms_line_lb.png') 0 bottom no-repeat, url('/images/common/event/2026/invite/ms_line_rb.png') right bottom no-repeat;}
 .pop_up .pop_close {z-index:1; right:1rem; top:0; transform:translate(0 , -50%); position:absolute; cursor:pointer; width:56px; height: 56px; font-size: 0; text-indent: -99999px; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/2026/invite/pop_close.png'); background-size:100% auto;}
.pop_up .pop_close:hover {background-position:0 100%;}

.pop_up .btns {font-size:0;}
.pop_up .btns > button {display:inline-flex; vertical-align:top;}
.pop_up .btns > button span {width:156px; height:60px; color:#00c0ff;}
.pop_up .btns > button:hover span {color:#fff;}

.pop_reward .txt_wrap .txt {color:#fff; font-size:20px; line-height:1.2; margin-top:1rem;}
.pop_reward .txt_wrap .info { margin-top:1rem;}

.pop_invaild .txt_wrap .tit {color:#f4a3a3;}
.pop_invaild .txt_wrap .info {color:#ffabab; background:#240707; border-color:#790000;}

.pop_reward02 .txt_wrap .tit {color:#a1ed78;}

.pop_login .icon {margin-bottom:2.4rem;}
.pop_login .login_form {position:relative; z-index:1;}
.pop_login .panel .desc {padding:4rem;}
.pop_login .btns {margin-top:3rem;}
.pop_login .btns > .btn_login {width:100%;}
.pop_login .btns > .btn_login span {width:100%;}
.pop_login .input_list .inp {border-radius:5px; background:#00212c; border:1px solid #0078a0; height:64px; margin-bottom:2rem; position:relative;}
.pop_login .input_list .inp input {height:100%; outline:none; background:none; padding:0 50px 0 2rem; width:100%; font-size:14px; font-family:var(--hel); color:#fff;}
.pop_login .input_list .inp input::placeholder {color:#00c0ff;}
.pop_login .input_list .inp .pw_show {position:absolute; top:50%; right:1.4rem; width:24px; margin-top:-9px; cursor:pointer; height:18px; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/2026/invite/pwd_eye.png');}
.pop_login .input_list .inp .pw_show:hover {background-position:0 100%;}
.pop_login .input_list .inp .pw_show.off {background-position:0 100%;}
.pop_login .input_list .inp .pw_show.off:hover {background-position:0 0;}
.pop_login .input_list .inp input:focus {outline:none;}
.pop_login .input_list .inp input:autofill, .pop_login .input_list .inp input:-webkit-autofill, .pop_login .input_list .inp input:-webkit-autofill:hover, .pop_login .input_list .inp input:-webkit-autofill:focus, .pop_login .input_list .inp input:-webkit-autofill:active {-webkit-text-fill-color: #fff !important; -webkit-background-clip: text; -webkit-box-shadow: 0 0 0 1000px #00212c inset; caret-color: #fff; transition: background-color 5000s ease-in-out 0s;}
.pop_login .captcha {position:relative; text-align:left;}
.pop_login .captcha > div > div { position: relative; left: 50%; transform: translate(-50% , 0); display: inline-block;}

.pop_list .pop_layout {width:980px; padding:0 2.4rem 2.7rem;}
.pop_list h2 {font-size:28px; color:#00c0ff; text-align:left; text-transform:uppercase; padding:1rem 0 2rem; font-weight:500;}
.pop_list .list ul {display:grid; grid-template-columns:repeat(5, 1fr); grid-auto-rows:1fr; gap:8px;}
.pop_list .list li {border:1px solid #4f4f4f; background:#000; text-align:center; padding:1.2rem; display:flex; flex-direction:column;}
.pop_list .list .num {text-transform:uppercase; display:flex; height:28px; align-items:center; justify-content:center; font-size:16px; background:#4f4f4f; margin:-1.2rem -1.2rem 0;}
.pop_list .list .reward {flex:1; display:flex; flex-direction:column;}
.pop_list .list .name {flex:1; min-height:40px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#00e9ff; letter-spacing:0.04em; font-family:var(--hel); line-height:1.2; padding:5px 0;}
.pop_list .list .name .day {color:#ff9898;}

.toast_msg {width: calc(100% - 5rem); position:fixed; bottom:6rem; left:50%; transform:translate(-50% , 0); z-index:99; max-width: 100%; display:none; text-align:center;}
.toast_msg span {line-height:1.2; display:inline-block; max-width:100%; word-break: break-word; overflow:hidden; position:relative; margin:1rem auto 0; padding:1.8rem 3.6rem 1.8rem 7.6rem; font-family:'Roboto'; font-size:16px; color:#33ffdd; background:#001515; border-radius:1.2rem; box-shadow:0 2rem 4rem rgba(0, 0, 0, 0.5); border:0.2rem solid #00ddbb; width:max-content; text-align:left;}
.toast_msg span:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; width:5.8rem; background:url('/images/common/sub/icon_toast_check.png') center center no-repeat; background-color:rgba(0, 221, 187, 0.7); max-width: 100%; }
.toast_msg span font {color:#fff;}

/* ── Responsive ── */
@media (max-width: 2000px) {
.card02 {top:-2%;}
.card03 {left:86%; top:-5.5%;}
.card04 {left:-2%; top:32%;}
.card06 {left:84%; top:29%;}

.view--top .obj01 {width:19.3%;}
.view--top .obj02 {width:44.6%;}
.view--top .cha {right:-10rem; max-width:1060px;}

.view--bottom .obj_light01 {width:43.9%;}
.view--bottom .obj_light02 {width:52.2%;}

.btn_top {right:3rem; bottom:3rem;}
}

@media (max-width: 1800px) {
.view--top .cha {top:12rem; max-width:740px;}

.participate--new {padding-left:4rem; padding-right:4rem;}

.missions-grid {gap:4.8rem;}
.mission__card {padding-left:4rem; padding-right:4rem;}

.task-card {width: calc((100% - 7.2rem) / 3);}
.mission-list {gap:3.6rem;}
}

@media (max-width: 1500px) {
.view--top .cha {top:14rem; max-width:650px;}

.inv-code__act {gap:2rem;}

.missions-grid {gap: 3.6rem;}
.mission__card {padding-top:40px;}

.task-card {width: calc((100% - 4.8rem) / 3);}
.mission-list {gap:2.4rem;}
.task-card__mission {line-height:1; font-size:14px;}
.task-card__title {font-size:16px; padding:4px 0;}
.status-badge {font-size:14px;}

.participate--new .profile {height:36px; padding-bottom:0.5rem;}
}

@media (max-width: 1360px) {
.participate {padding: 3rem 6.4rem 6.4rem;}
.participate__wrap {min-height:320px;}
.participate__side {width: calc((100% - 360px) / 2);}

.gauge {width:360px; height:360px; background-size:360px auto;}
}

@media (max-width: 1280px) {
header {text-align:center;}

.view--top {padding-top:20%;}
.view--top .cha {width: 45%; right: -5%; top: calc(7% - 76px);}
.kv .date {position:relative; transform:none; top:auto; left:auto; margin-bottom:3rem;}

.kv {position:relative;}
.kv__con .kv__tit {width:68%; margin-left: -2%;}
.kv__con .kv__tit span:before {background-size:100% auto;}

.participate {margin-top:12%;}
.participate__wrap {display:block; padding-right:2rem;}
.participate__board {display:block; min-height:0;}
.participate__side {width:auto; padding:0 2.4rem;}

.profile {margin-bottom:2rem; width:100%; padding-right:20rem;}
.profile__nick {max-width:100%;}
.inv-code__desc br {display:none;}

.gauge {position:relative; top:auto; left:auto; transform:none; margin:3.6rem auto;}

.friends {width: max-content; margin: 0 auto; max-width:100%;}

.participate--new {padding: 3rem 4.4rem 4.4rem;}
.participate--new .inv-code__title {line-height:1.2;}
.friends__head {width:max-content;}

.missions-grid {gap:3rem;}

.inv-code__bottom {max-width:none; width:100%; display:flex; gap:2rem;}
.inv-code__bottom .inv-code__field {margin-bottom:0;}
.inv-code__bottom .inv-code__field .inv-code__input {height:5.4rem;}

.invite-bonus__body {display:block;}
.invite-bonus__inner {padding:3.6rem;}
.invite-bonus__reward {margin:2.4rem auto;}
.invite-bonus__reward > img {max-width:100%;}
.invite-bonus__txt br {display:none;}

.friend-reward {width:270px;}

.mission-list {display:block;}
.task-card {max-width:472px; margin:1.2rem; width: calc((100% - 4.8rem) / 2);}
.participate--new .invite-bonus {margin-top:1.2rem;}
.task-card__mission {flex:0;}

}

@media (max-width: 1023px) {
.missions-grid {grid-template-columns: repeat(2, 1fr);}

.mission--bonus .mission__inner {padding-bottom:3.6rem;}
.mission-bonus__name {display:block; padding:2rem 0; height:auto;}
.mission-bonus__body {display:block;}
.mission-bonus__body .btn--receive {position:relative; transform:none; top:auto; right:auto; margin:0 auto;}
.friend-reward__body {gap:2.4rem;}
.mission--all .mission-bonus__name {height:auto;}

.pop_list .pop_layout {width:calc(100% - 6rem); left:3rem; right:3rem; transform:translate(0 , -50%);}
.pop_list .list ul {grid-template-columns: repeat(4, 1fr);}

.inv-code__bottom {display:block;}
.inv-code__bottom .inv-code__field {margin-bottom:2.4rem;}
.inv-code__bottom .inv-code__field .inv-code__input {height:6.2rem;}

.inv-code__inner {display:block;}
.friend-reward {width:100%; margin-top:1.5rem;}
.inv-code__content > div {padding-left:3rem; padding-right:3rem;}
.inv-code__group .inv-code__field {padding-right:0;}

.inv-code--new .inv-code__body {align-items: flex-start;}
.participate--new .inv-code__title {text-align:left; padding-left: 1.7rem; text-indent: -1.7rem;}
.task-card__title {padding:0;}
}

@media (max-width: 768px) {
html {font-size: 32%;}
body {font-size:2.3rem;}
.mobile {display:block;}
.btn:before {top:0; bottom:0; left:0; right:0;}
.btn span {font-size:2.5rem;}

.view--top .cha {top: calc(7% - 30px);}

.kv__con .kv__act {display:flex; width:100%;}
.kv__con .kv__act .btn {width:calc((100% - 4rem) / 2); max-width:200px;}
.kv__con .kv__act .btn span {width:100%; font-size:2.7rem; height:40px; min-width:0;}
.kv .date {font-size:3.3rem;}
.notice {font-size:2.7rem; line-height:1.2; padding-left:8.6rem;}

.participate {padding-left:4.4rem; padding-right:4.4rem;}
.participate__deco:before {top:-16px;}
.participate__deco2 {background-size: 69.2rem auto;}
.participate .sec-head a{font-size:3.8rem;}
.participate .sec-head a:before {top:-0.4rem;}
.participate__panel:after {background-size:12.5rem auto;}
.participate__side {padding:0 1.2rem;}

.participate .sec-head .more {font-size:2.5rem;}

.profile {background-size:auto 100%; font-size:2.5rem; padding: 1rem 26rem 1.2rem 2rem; height:8.2rem;}
.btn--reward--info {top:4px; right:0;}
.rank img {width:20px; height:20px;}
.inv-code__desc {font-size:3.3rem;}
.inv-code__field .inv-code__input {font-size:3.3rem; height:40px;}
.inv-code__act {width:100%; justify-content: center;}
.inv-code__act .btn {max-width:calc((100% - 2rem) / 2);}
.inv-code__act .btn span {font-size:2.5rem; height:40px; max-width:100%;}

.friends__head {font-size:3rem;}

.invite-bonus {background-size:83.6rem auto;}
.invite-bonus__txt {text-align:center; font-size:3.3rem; line-height:1;}
.invite-bonus__body .btn--receive span {height:40px; font-size:2.7rem;}
.invite-bonus__txt br {display:block;}
.invite-bonus:before {background-size:1.2rem auto, 13rem auto, 13rem auto, 1.2rem auto;}

.participate--new {padding-left:2.4rem; padding-right:2.4rem; padding-top:5rem;}
.participate--new .profile {background-size:auto 100%; height:24px; top: -1.8rem; padding-bottom: 0;}

.inv-code__group .inv-code__act {width:auto;}
.inv-code__group .inv-code__act .btn {max-width:none;}
.inv-code__group .inv-code__act .btn span {width:120px;}

.friend-reward__body .btn--receive {max-width:224px; width:100%; margin-left:auto; margin-right:auto;}
.friend-reward__body .btn--receive span {width:100%; height:40px; font-size:2.7rem;}
.friend-reward .btn--receive span br {display:none;}
.friend-reward .status-badge {font-size:2.7rem; width: max-content;}

.view--bottom .sec-head__tit {font-size:4.9rem;}

.missions-grid .btn span {font-size:2.7rem; height:40px; min-width:160px;}

.mission__card:before {background-size:1.7rem auto, 1.7rem auto, 22.5rem auto;}
.mission__head {font-size:2.9rem;}
.mission__detail-inner:before {background-size:7.2rem auto, 7.2rem auto, 1.2rem auto, 1.2rem auto; top:1px;}
.mission__detail-inner {font-size:2.7rem;}
.mission__reward .mission__name {font-size:2.3rem;}
.mission__card .complete span {font-size:4.5rem;}

.mission--bonus {background-size:88.6rem auto !important; flex-direction: column;}
.mission--bonus:before {background-size:1.2rem auto, 13rem auto, 13rem auto, 1.2rem auto !important;}
.mission__reward--bonus {flex-direction: column; align-items: center;}
.mission-bonus__head {font-size:2.5rem; width:65rem; height:7.4rem; top:-7px;}
.mission-bonus__body .btn--receive span {font-size:2.7rem; height:40px; min-width:160px; width:auto;}

.inv-code__bound .inv-code__user {font-size:2.5rem;}
.inv-code__bound .inv-code__status {font-size:2.5rem;}

.mission--all h3 {font-size:4.9rem;}
.mission--all .mission-bonus__head {font-size:2.9rem; line-height:1.1;}
.mission--all .mission--bonus .mission__inner {padding-top:12rem;}
.new.mission--all .mission--bonus .mission__inner {padding-top:16rem;}

.inv-code__group .btn--confirm {position:relative; top:auto; right:auto; transform:none; margin-top:1.5rem; width:100%;}
.inv-code__group .btn--confirm span {height:40px; width:100%;}

.mission__detail:before {background-size:1.2rem auto; left:-5px; right:-5px;}
.mission__name {font-size:2.3rem;}
.mission__reward {height:112px;}
.mission-bonus__thumb {height:120px;}
.mission-bonus__name {font-size:2.3rem;}
.mission__count {font-size:3.3rem;}
.inv-code__title {font-size:3rem;}
.inv-code--new:before {background-size:1.2rem auto;}
.friend-reward__name {font-size:2.3rem;}
.participate--new .inv-code__title {padding-left: 2rem; text-indent: -2rem;}
.friend-reward__title {font-size:2.7rem;}

.task-card {width:100%; max-width:472px; margin:0 auto 1.2rem;}

.participate--new .invite-bonus {margin-top:0;}

.task-card__title {font-size:2.7rem;}
.task-card__mission {font-size:2.3rem; line-height:1.2;}
.progress-bar {margin-top:3px;}
.status-badge {font-size:2.5rem;}

footer > img {width: 100px;}
footer .footer {position: relative; z-index: 2; font-size: 2.3rem;}
footer .footer .copy {font-size: 2.3rem;}

.btn_top span {font-size:2.3rem;}

.pop_up .pop_layout {width:calc(100% - 6rem); left:3rem; right:3rem; transform:translate(0 , -50%);}
.pop_list h2 {font-size:3.7rem;}
.pop_list .list {max-height:315px; overflow-y:scroll; padding-right:1.7rem;}
.pop_list .list::-webkit-scrollbar {width:8px;}
.pop_list .list::-webkit-scrollbar-track {background: linear-gradient(transparent 2px, #00536e 2px, #00536e 3px, #003648 3px, #003648 5px, #00536e 5px, #00536e 6px, transparent 6px); border-radius: 2px;}
.pop_list .list::-webkit-scrollbar-thumb {border-radius: 4px; background: #fff; box-shadow:0 0 0.4rem rgba(255, 0, 0, 0.5), 0 0 0.8rem rgba(255, 0, 0, 0.5), 0 0 1.6rem rgba(255, 0, 0, 0.5);}
.pop_list .list .num {font-size:2.5rem; height:24px;}
.pop_list .list .name {font-size:2.1rem;}
.pop_up .pop_close {width:40px; height:40px;}
.pop_up .btns > button span {height:40px; font-size:2.7rem;}
.pop_up .panel .desc:before {background-size:7rem auto; top:-1.7rem; bottom:-1.7rem; left:-1.7rem; right:-1.7rem;}
.pop_up .panel:after {background-size:12.6rem auto;}
.pop_up .pop_layout .participate__deco:before {top:-16px;}

.pop_up .icon img {max-height:12rem;}

.pop_login .input_list .inp {height:40px;}
.pop_login .input_list .inp input {font-size:2.3rem;}

.pop_up .txt_wrap .tit {font-size:4.3rem;}
.pop_up .txt_wrap .txt {font-size:2.5rem;}
.pop_up .txt_wrap .info_box {font-size:2.5rem;}

.pop_list .list ul {grid-template-columns: repeat(3, 1fr);}

/* toast message */
.toast_msg {bottom:12rem;}
.toast_msg span {font-size:2.5rem;}
.toast_msg span:before {background-size:3rem auto !important;}
}

@media (max-width: 500px) {
.gauge {width:240px; height:240px; background-size:240px auto;}
.gauge__label {font-size:5.9rem;}

.inv-code__group .inv-code__act .btn span {width:90px;}

.missions-grid {grid-template-columns: 1fr;}

.participate .sec-head .more {display:flex; margin-left:0; margin-top:1.2rem;}

.pop_list .list ul {grid-template-columns: repeat(2, 1fr);}

.pop_login .captcha > div > div {transform: translate(-50%, 0) scale(0.7);}

.mission--bonus .reward_list {display:block;}
.mission--bonus .reward_list .box {margin-bottom:2.4rem;}
.mission--all .mission-bonus__head br {display:none;}
}

@media (max-width: 380px) {
.gauge {width:190px; height:190px; background-size:190px auto;}
.gauge__label {font-size:4.9rem;}

.mission-bonus__head {width:59rem; height:6.7rem; font-size:2.6rem;}

}

/* ── Keyframes ── */
@keyframes scatter {
0% {opacity:0; transform:translate(var(--ox), var(--oy)) rotate(0deg) scale(0.2);}
60% {opacity:1;}
100% {opacity:1; transform:translate(0, 0) rotate(0deg) scale(1);}
}

@keyframes flicker {
0%, 100% {opacity:0.4; filter:brightness(0.8);}
4% {opacity:1; filter:brightness(1.2);}
8% {opacity:0.5; filter:brightness(0.9);}
12% {opacity:0.9; filter:brightness(1.1);}
16% {opacity:0.6; filter:brightness(0.8);}
20% {opacity:1; filter:brightness(1.3);}
50% {opacity:1; filter:brightness(1);}
55% {opacity:0.7; filter:brightness(0.9);}
58% {opacity:1; filter:brightness(1.2);}
80% {opacity:1; filter:brightness(1);}
85% {opacity:0.5; filter:brightness(0.8);}
90% {opacity:1; filter:brightness(1.1);}
}

@keyframes fillBar {from {width:0;} to {width:var(--fill);}}

@keyframes floatSway {
50% {transform: translate(0, -2rem); opacity: 1;}
}

@keyframes slow-zoom {
from {transform: scale(1);}
to {transform: scale(1.1);}
}

@keyframes gentle-float {
0%, 100% {transform: scale(1.05) translate(0, 0); filter: brightness(1.3) saturate(1.5) drop-shadow(0 0 6px #4fd1ff);}
50% {transform: scale(1.08) translate(-1%, -1%); filter: brightness(1.5) saturate(1.8) drop-shadow(0 0 12px #4fd1ff);}
}

@keyframes gauge-pulse {
50% {transform: scale(1);}
}