/* ===========================================================
   MUOHAE v2.0
   STYLE.CSS
   PART 1
=========================================================== */

:root{

--bg:#dff6ff;
--bg2:#eefbff;
--glass:rgba(255,255,255,.35);
--glass-border:rgba(255,255,255,.55);

--main:#69bfff;
--main2:#91d6ff;
--main3:#d7f2ff;

--white:#ffffff;
--black:#202020;

--radius:28px;

--shadow:
0 10px 35px rgba(70,160,255,.18);

--transition:.35s;

--header:90px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Pretendard",sans-serif;

background:

linear-gradient(180deg,#dff8ff 0%,#e8f8ff 30%,#f6fdff 100%);

color:#222;

overflow-x:hidden;

min-height:100vh;

}

/* ======================== */

body::-webkit-scrollbar{

width:10px;

}

body::-webkit-scrollbar-thumb{

background:#9bd9ff;

border-radius:999px;

}

body::-webkit-scrollbar-track{

background:#f6fbff;

}

/* ======================== */

section{

width:min(1400px,92%);

margin:auto;

padding:70px 0;

position:relative;

}

/* ======================== */

.section-title{

font-size:54px;

font-weight:800;

margin-bottom:45px;

color:#59b8ff;

letter-spacing:-2px;

}

/* ======================== */

.section-sub{

font-size:19px;

margin-bottom:45px;

opacity:.65;

}

/* ======================== */

#header{

position:fixed;

top:15px;

left:50%;

transform:translateX(-50%);

width:min(1400px,94%);

height:64px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 35px;

background:rgba(255,255,255,.28);

backdrop-filter:blur(22px);

border:1px solid rgba(255,255,255,.5);

border-radius:999px;

z-index:999;

box-shadow:var(--shadow);

}

/* ======================== */

.logo{

font-size:32px;

font-weight:900;

color:#56b9ff;

letter-spacing:-1px;

}

/* ======================== */

nav{

display:flex;

gap:38px;

}

nav a{

text-decoration:none;

color:#3f4d59;

font-weight:700;

transition:.25s;

position:relative;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:#6ec7ff;

border-radius:999px;

transition:.3s;

}

nav a:hover{

color:#53bcff;

}

nav a:hover::after{

width:100%;

}

/* ======================== */

.hero{

min-height:760px;

display:grid;

grid-template-columns:1fr 480px;

align-items:center;

gap:35px;

padding-top:80px;

padding-bottom:40px;


}

/* ======================== */

.hero-left h1{

font-size:82px;

font-weight:900;

line-height:1;

color:#58baff;

margin-bottom:12px;

}

.hero-left h2{

font-size:34px;

margin-bottom:18px;

}

.small{

font-size:18px;

font-weight:700;

color:#7aa7c2;

letter-spacing:4px;

margin-bottom:20px;

}

/* ======================== */

.description{

font-size:18px;

line-height:1.7;

opacity:.75;

max-width:650px;

}

/* ======================== */

.hero-buttons{

display:flex;

gap:22px;

margin-top:25px;

margin-bottom:20px;

}

.hero-buttons a{

text-decoration:none;

padding:18px 42px;

border-radius:999px;

font-weight:800;

transition:.35s;

}

/* ======================== */

.primary{

background:#6ec8ff;

color:white;

box-shadow:

0 15px 35px rgba(110,200,255,.35);

}

.primary:hover{

transform:translateY(-6px);

}

/* ======================== */

.secondary{

background:white;

color:#58b9ff;

}

.secondary:hover{

background:#6ec8ff;

color:white;

}

/* ======================== */

.hero-social{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.hero-social a{

text-decoration:none;

background:white;

padding:14px 28px;

border-radius:999px;

font-weight:700;

transition:.3s;

color:#4d5968;

box-shadow:

0 10px 30px rgba(0,0,0,.05);

}

.hero-social a:hover{

transform:translateY(-5px);

background:#6ec8ff;

color:white;

}

/* ======================== */

.hero-right{

display:flex;

justify-content:center;

align-items:center;

}

/* ======================== */

.profile-circle{

width:430px;

height:430px;

border-radius:50%;

background:

linear-gradient(145deg,#ffffff,#d7f3ff);

display:flex;

justify-content:center;

align-items:center;

box-shadow:

0 20px 60px rgba(100,180,255,.25);

animation:float 5s ease infinite;

overflow:hidden;

}

/* ======================== */

.profile-circle img{

width:88%;

height:auto;

display:block;

}

/* ======================== */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

/* ======================== */

#sky{

position:fixed;

inset:0;

background:

linear-gradient(#dff8ff,#ffffff);

z-index:-10;

}

/* ======================== */

#aurora{

position:fixed;

inset:-20%;

background:

radial-gradient(circle at 20% 30%,
rgba(120,230,255,.25),
transparent 40%),

radial-gradient(circle at 80% 20%,
rgba(150,200,255,.18),
transparent 35%),

radial-gradient(circle at 60% 70%,
rgba(170,255,240,.20),
transparent 40%);

filter:blur(70px);

animation:aurora 18s linear infinite;

z-index:-9;

}

@keyframes aurora{

0%{

transform:translateX(-4%) rotate(0deg);

}

50%{

transform:translateX(4%) rotate(2deg);

}

100%{

transform:translateX(-4%) rotate(0deg);

}

}
/* ===========================================================
   LIVE CARD
=========================================================== */

.live-card{

width:100%;

padding:30px;

border-radius:32px;

background:rgba(255,255,255,.38);

backdrop-filter:blur(25px);

border:1px solid rgba(255,255,255,.55);

box-shadow:0 25px 60px rgba(90,180,255,.15);

display:flex;

flex-direction:column;

gap:18px;

transition:.35s;

}

.live-card:hover{

transform:translateY(-10px);

box-shadow:0 35px 70px rgba(90,180,255,.25);

}

.live-status{

display:inline-flex;

align-items:center;

justify-content:center;

width:max-content;

padding:12px 26px;

border-radius:999px;

font-size:18px;

font-weight:800;

}

.live-status.online{

background:#cffff1;

color:#1aa84f;

}

.live-status.offline{

background:#ffe3e3;

color:#dd3f3f;

}

.live-time{

font-size:56px;

font-weight:900;

color:#58baff;

}

.live-card p{

font-size:22px;

opacity:.75;

}

.countdown{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:20px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.45);

}

.countdown span{

font-size:20px;

opacity:.65;

}

.countdown strong{

font-size:36px;

color:#53b9ff;

}

/* ===========================================================
   SCHEDULE
=========================================================== */

.schedule-grid{

display:grid;

grid-template-columns:repeat(7,1fr);

gap:22px;

margin-top:45px;

}

.day{

background:rgba(255,255,255,.38);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.5);

border-radius:24px;

padding:28px;

text-align:center;

transition:.35s;

cursor:pointer;

box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.day:hover{

transform:translateY(-12px);

background:white;

}

.day span{

display:block;

font-size:17px;

font-weight:700;

letter-spacing:2px;

color:#82b8d9;

margin-bottom:22px;

}

.day strong{

font-size:28px;

font-weight:900;

color:#57baff;

}

/* ===========================================================
   PROFILE
=========================================================== */

.profile-wrap{

display:grid;

grid-template-columns:360px 1fr;

gap:70px;

align-items:center;

margin-top:50px;

}

.profile-image{

background:rgba(255,255,255,.4);

padding:22px;

border-radius:35px;

backdrop-filter:blur(20px);

box-shadow:0 20px 60px rgba(0,0,0,.05);

}

.profile-image img{

width:100%;

display:block;

border-radius:24px;

}

.profile-info h3{

font-size:72px;

color:#59baff;

margin-bottom:30px;

}

.profile-info ul{

list-style:none;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-bottom:35px;

}

.profile-info li{

background:white;

padding:18px 24px;

border-radius:18px;

font-size:20px;

font-weight:700;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.profile-info p{

font-size:23px;

line-height:2;

opacity:.72;

}

/* ===========================================================
   CLOSET
=========================================================== */

.closet-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:28px;

margin-top:55px;

}

.closet-card{

background:rgba(255,255,255,.38);

backdrop-filter:blur(20px);

border-radius:28px;

overflow:hidden;

transition:.35s;

cursor:pointer;

box-shadow:0 15px 45px rgba(0,0,0,.05);

}

.closet-card:hover{

transform:translateY(-15px) scale(1.03);

}

.closet-card img{

width:100%;

height:320px;

object-fit:cover;

display:block;

}

.closet-card h3{

font-size:28px;

padding:22px 24px 10px;

color:#58baff;

}

.closet-card span{

display:block;

padding:0 24px 24px;

font-size:18px;

opacity:.6;

}

.closet-card.add{

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

min-height:430px;

font-size:42px;

font-weight:900;

color:#78c8ff;

border:3px dashed #9bdcff;

}

/* ===========================================================
   GALLERY
=========================================================== */

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:24px;

margin-top:55px;

}

.gallery-item{

overflow:hidden;

border-radius:28px;

background:white;

cursor:pointer;

box-shadow:0 15px 40px rgba(0,0,0,.05);

transition:.35s;

}

.gallery-item:hover{

transform:translateY(-12px);

}

.gallery-item img{

width:100%;

height:280px;

object-fit:cover;

display:block;

transition:.45s;

}

.gallery-item:hover img{

transform:scale(1.08);

}

.gallery-item.more{

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

font-weight:800;

color:#61bcff;

min-height:280px;

background:linear-gradient(135deg,#edfaff,#d8f4ff);

} 
/* ===========================================================
   NOTICE
=========================================================== */

.notice-wrap{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:55px;

}

.notice-card{

background:rgba(255,255,255,.40);

backdrop-filter:blur(22px);

border:1px solid rgba(255,255,255,.55);

border-radius:28px;

padding:35px;

transition:.35s;

box-shadow:0 15px 45px rgba(0,0,0,.05);

}

.notice-card:hover{

transform:translateY(-12px);

}

.notice-card .date{

display:inline-block;

padding:10px 20px;

border-radius:999px;

background:#dff5ff;

color:#55bbff;

font-weight:700;

margin-bottom:25px;

}

.notice-card h3{

font-size:34px;

margin-bottom:18px;

color:#58bbff;

}

.notice-card p{

font-size:20px;

line-height:1.9;

opacity:.72;

}

/* ===========================================================
   CHANNEL INFO
=========================================================== */

.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-top:50px;

}

.stats-card{

background:white;

border-radius:26px;

padding:45px 20px;

text-align:center;

box-shadow:0 18px 50px rgba(0,0,0,.05);

transition:.35s;

}

.stats-card:hover{

transform:translateY(-12px);

}

.stats-card h2{

font-size:20px;

font-weight:700;

color:#88bddc;

margin-bottom:18px;

letter-spacing:2px;

}

.stats-card strong{

font-size:36px;

color:#58baff;

font-weight:900;

}

/* ===========================================================
   SNS
=========================================================== */

.sns-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

margin-top:50px;

}

.sns-card{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

height:210px;

border-radius:30px;

text-decoration:none;

transition:.35s;

background:rgba(255,255,255,.4);

backdrop-filter:blur(20px);

box-shadow:0 18px 50px rgba(0,0,0,.05);

}

.sns-card:hover{

transform:translateY(-12px);

}

.sns-card h3{

font-size:34px;

margin-bottom:18px;

color:#59bbff;

}

.sns-card p{

font-size:19px;

color:#666;

}

.soop{

background:linear-gradient(135deg,#eefcff,#dff7ff);

}

.youtube{

background:linear-gradient(135deg,#ffffff,#ffe7e7);

}

.discord{

background:linear-gradient(135deg,#f4f4ff,#ececff);

}

.x{

background:linear-gradient(135deg,#ffffff,#f3f3f3);

}

/* ===========================================================
   ENDING
=========================================================== */

.ending-card{

padding:90px;

border-radius:40px;

background:

linear-gradient(145deg,#dff7ff,#ffffff);

text-align:center;

box-shadow:0 30px 70px rgba(100,180,255,.15);

}

.ending-card h2{

font-size:72px;

color:#5abaff;

margin-bottom:25px;

}

.ending-card p{

font-size:23px;

opacity:.75;

margin-bottom:45px;

}

.ending-card a{

display:inline-block;

padding:18px 40px;

background:#65c3ff;

color:white;

border-radius:999px;

text-decoration:none;

font-weight:800;

transition:.35s;

}

.ending-card a:hover{

transform:translateY(-6px);

}

/* ===========================================================
   FOOTER
=========================================================== */

footer{

margin-top:120px;

padding:45px 8%;

display:flex;

justify-content:space-between;

align-items:center;

background:#effbff;

border-top:1px solid rgba(0,0,0,.05);

}

.footer-left{

font-size:32px;

font-weight:900;

color:#57baff;

}

.footer-center{

font-size:18px;

opacity:.65;

}

.footer-right{

font-size:16px;

opacity:.55;

}

/* ===========================================================
   STARS
=========================================================== */

#stars{

position:fixed;

inset:0;

pointer-events:none;

overflow:hidden;

z-index:-8;

}

.star{

position:absolute;

width:3px;

height:3px;

background:white;

border-radius:50%;

box-shadow:

0 0 12px white,

0 0 25px white;

animation:twinkle 3s infinite ease-in-out;

}

@keyframes twinkle{

0%{

opacity:.2;

transform:scale(.8);

}

50%{

opacity:1;

transform:scale(1.8);

}

100%{

opacity:.2;

transform:scale(.8);

}

}

/* ===========================================================
   CLOUD
=========================================================== */

#clouds{

position:fixed;

inset:0;

pointer-events:none;

z-index:-7;

overflow:hidden;

}

.cloud{

position:absolute;

width:320px;

height:120px;

background:rgba(255,255,255,.35);

filter:blur(12px);

border-radius:999px;

animation:cloudMove linear infinite;

}

@keyframes cloudMove{

from{

transform:translateX(-400px);

}

to{

transform:translateX(calc(100vw + 400px));

}

}

/* ===========================================================
   REVEAL
=========================================================== */

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:none;

}

/* ===========================================================
   HOVER EFFECT
=========================================================== */

.glow{

position:absolute;

width:380px;

height:380px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(130,220,255,.28),
transparent 70%);

pointer-events:none;

mix-blend-mode:screen;

filter:blur(18px);

}

/* ===========================================================
   SELECTION
=========================================================== */

::selection{

background:#69c6ff;

color:white;

}

/* ===========================================================
   END OF STYLE PART 3
=========================================================== */

/* ===========================================================
   STYLE.CSS
   PART 4 (FINAL)
=========================================================== */

/* ===========================
   ACTIVE NAV
=========================== */

nav a.active{

color:#58bbff;

}

nav a.active::after{

width:100%;

}

/* ===========================
   MOBILE MENU
=========================== */

#mobileMenu{

display:none;

width:52px;

height:52px;

border-radius:18px;

background:white;

justify-content:center;

align-items:center;

cursor:pointer;

font-size:28px;

font-weight:900;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

/* ===========================
   MODAL
=========================== */

#galleryModal{

position:fixed;

inset:0;

background:rgba(15,25,40,.75);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

pointer-events:none;

transition:.35s;

z-index:99999;

backdrop-filter:blur(10px);

}

#galleryModal.open{

opacity:1;

pointer-events:auto;

}

#galleryModal img{

max-width:88%;

max-height:88%;

border-radius:24px;

box-shadow:

0 30px 80px rgba(0,0,0,.45);

animation:popup .35s;

}

@keyframes popup{

0%{

opacity:0;

transform:scale(.75);

}

100%{

opacity:1;

transform:scale(1);

}

}

/* ===========================
   RIPPLE
=========================== */

.ripple{

position:absolute;

border-radius:50%;

background:rgba(255,255,255,.6);

transform:scale(0);

animation:ripple .7s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

a,
.closet-card{

position:relative;

overflow:hidden;

}

/* ===========================
   SELECTED
=========================== */

.closet-card.selected{

outline:4px solid #67c4ff;

transform:translateY(-10px) scale(1.05);

}

/* ===========================
   LOADED
=========================== */

body{

opacity:0;

transition:opacity .8s;

}

body.loaded{

opacity:1;

}

/* ===========================
   GLASS
=========================== */

.glass{

background:rgba(255,255,255,.38);

backdrop-filter:blur(25px);

border:1px solid rgba(255,255,255,.5);

}

/* ===========================
   FLOAT ICON
=========================== */

.float{

animation:float2 4s ease infinite;

}

@keyframes float2{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

/* ===========================
   SHINE
=========================== */

.shine{

position:relative;

overflow:hidden;

}

.shine::before{

content:"";

position:absolute;

left:-150%;

top:0;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.5),

transparent

);

transform:skewX(-25deg);

}

.shine:hover::before{

left:180%;

transition:1.1s;

}

/* ===========================
   IMAGE
=========================== */

img{

user-select:none;

-webkit-user-drag:none;

}

/* ===========================
   HOVER SCALE
=========================== */

.gallery-item,

.notice-card,

.stats-card,

.sns-card,

.day,

.profile-image{

transition:

transform .35s,

box-shadow .35s;

}

.gallery-item:hover,

.notice-card:hover,

.stats-card:hover,

.sns-card:hover,

.day:hover,

.profile-image:hover{

box-shadow:

0 30px 70px rgba(70,170,255,.18);

}

/* ===========================
   TEXT
=========================== */

h1,h2,h3{

letter-spacing:-1px;

}

p{

word-break:keep-all;

}

/* ===========================
   MOBILE
=========================== */

@media (max-width:1200px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.hero-right{

order:-1;

}

.profile-circle{

width:360px;

height:360px;

}

.profile-wrap{

grid-template-columns:1fr;

text-align:center;

}

.profile-info ul{

grid-template-columns:1fr;

}

.notice-wrap{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.sns-grid{

grid-template-columns:repeat(2,1fr);

}

.schedule-grid{

grid-template-columns:repeat(2,1fr);

}

}

/* ===========================
   MOBILE SMALL
=========================== */

@media (max-width:768px){

#header{

padding:0 20px;

height:72px;

}

nav{

display:none;

position:absolute;

top:90px;

left:0;

width:100%;

padding:25px;

background:white;

border-radius:24px;

flex-direction:column;

gap:20px;

box-shadow:

0 25px 60px rgba(0,0,0,.08);

}

nav.show{

display:flex;

}

#mobileMenu{

display:flex;

}

.hero-left h1{

font-size:82px;

}

.hero-left h2{

font-size:28px;

}

.description{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

}

.profile-circle{

width:280px;

height:280px;

}

.section-title{

font-size:42px;

}

.stats-grid{

grid-template-columns:1fr;

}

.sns-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.closet-grid{

grid-template-columns:1fr;

}

.schedule-grid{

grid-template-columns:1fr;

}

footer{

flex-direction:column;

gap:15px;

text-align:center;

}

}

/* ===========================
   END
=========================== */