*{box-sizing:border-box;}
body{background:#060a13; margin:0;}
a,a:visited,a:active,a:hover,a:link{text-decoration:none; color:inherit; line-height:0;}
.header-wrap{}
.header-wrap::before{content:''; position:absolute; top:0; left:0; right:0; height:2px; opacity:0.9; z-index:2; background:linear-gradient(90deg, rgb(0, 153, 204), rgb(0, 212, 255), rgb(255, 51, 102), rgb(0, 212, 255));}
header{display:flex; align-items:center; justify-content:space-between; width:100%; max-width:1320px; margin:0 auto; padding:10px 28px; background:#060a13;}
header > .nav-wrap{display:flex; gap:clamp(20px,2.5vw,36px);}
header > .nav-wrap > a > img{height:56px;}
header > .nav-wrap > nav{display:flex; gap:clamp(22px, 2.6vw, 40px);}
header > .nav-wrap > nav > a{position:relative; display:inline-flex; align-items:center; min-height:48px; padding:8px 4px 12px; color:#8899aa; font-size:18px; font-weight:800; transition:color .22s ease,text-shadow .22s ease;}
header > .nav-wrap > nav > a:hover{color:#c8d4e4;}
header > .nav-wrap > nav > a.active{text-shadow:0 0 20px rgba(94,234,255,.35); color:#fff;}
header > .nav-wrap > nav > a.active::after{content:''; position:absolute; left:0; bottom:0; right:0; height:3px; border-radius:999px; box-shadow:0 0 14px rgba(0,212,255,.55); background:linear-gradient(90deg, rgb(0, 153, 204), rgb(94, 234, 255), rgb(0, 212, 255));}

header > .btn{display:flex; align-items:center; gap:10px;}
header > .btn > button{height:46px; border-radius:999px; font-weight:700; font-size:15px; cursor:pointer;}

header > .btn > button.login{min-width:84px; color:#e8edf5; border:1px solid rgba(0,212,255,0.14); background:rgba(17,24,39,.8); transition:border-color .2s ease,background .2s ease;}
header > .btn > button.login:hover{border-color:rgba(0,212,255,.35); background:rgba(0,212,255,.08);}

header > .btn > button.join{min-width:96px; color:#041018; border:0; background:linear-gradient(135deg,#5eeaff,#00d4ff); transition:box-shadow .2s ease,transform .2s ease;}
header > .btn > button.join:hover{box-shadow:0 6px 28px rgba(0,212,255,.45); transform:translateY(-1px)}

header > .btn > button.lang{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:64px; padding:0 14px; border:1px solid hsla(0,0%,100%,0.07); background:rgba(17,24,39,.6); white-space:nowrap; transition:color .2s ease,border-color .2s ease; color:#8899aa;}
header > .btn > button.lang:hover{color:#5eeaff; border-color:rgba(0,212,255,0.14);}
header > .btn > button.lang > svg{color:#00d4ff;}


header > .btn > .user-info{display:inline-flex; align-items:center; gap:12px; min-height:46px; padding:8px 16px 8px 18px; border:1px solid rgba(0,212,255,0.14); border-radius:999px; background:rgba(17,24,39,.75); box-shadow:inset 0 1px 0 hsla(0, 0%, 100%, .04);}

header > .btn > .user-info > span.user-id{font-size:15px; white-space:nowrap; color:#e8edf5; overflow:hidden; text-overflow:ellipsis; max-width:140px; line-height:1;}
header > .btn > .user-info > span.sep{width:1px; height:18px; background:hsla(0,0%,100%,0.07); line-height:1;}
header > .btn > .user-info > span.user-money{font-size:15px; white-space:nowrap; color:#5eeaff; font-weight:800; line-height:1;}
header > .btn > .user-info > button.refresh{border-radius:999px; font-weight:700; font-size:15px; width:auto; display:inline-flex; align-items:center; justify-content:center; padding:4px; margin-left:2px; border:none; background:transparent; color:#a89f90; box-shadow:none; transition:color .18s ease; line-height:1;}
header > .btn > .user-info > button.refresh > svg{display:block; width:18px; height:18px; transform-origin:center;}
header > .btn > .user-info > button.logout{height:46px; border-radius:999px; font-weight:700; font-size:15px; min-width:88px; color:#8899aa; border:1px solid hsla(0,0%,100%,0.07); background:transparent; transition:color .2s ease,border-color .2s ease,background .2s ease; line-height:1;}
header > .btn > .user-info > button.logout:hover{border-color:rgba(255,68,102,.35); background:rgba(255,68,102,.08); color:#ff4466;}


.sub-nav{border-top:1px solid hsla(0,0%,100%,.05); border-bottom:1px solid rgba(0,212,255,0.14); background:rgba(6,10,18,.45);}
.sub-nav > .sub-nav-cont{display:flex; align-items:center; justify-content:flex-start; width:100%; margin:0 auto; max-width:1320px; padding:0 28px;}
.sub-nav > .sub-nav-cont ul{display:flex; align-items:center; justify-content:flex-start; flex:1 1 auto; gap:6px; margin:0; padding:8px 0 8px 4px; overflow-x:auto; scrollbar-width:none;}
.sub-nav > .sub-nav-cont ul li{list-style:none; display:inline-flex; align-items:center; gap:6px;}
.sub-nav > .sub-nav-cont ul li > a{position:relative; display:inline-flex; align-items:center; gap:5px; height:36px; padding:0 14px; border-radius:8px; border:1px solid hsla(0,0%,100%,.06); background:hsla(0,0%,100%,.02); color:#8899aa; font-size:14px; transition:color .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease; white-space:nowrap;}
.sub-nav > .sub-nav-cont ul li > a.active{color:#5eeaff; background:rgba(0,212,255,.06); border-color:rgba(0,212,255,.38); box-shadow:inset 0 0 0 1px rgba(0,212,255,.08),0 0 14px rgba(0,212,255,.1); font-weight:700;}
.sub-nav > .sub-nav-cont ul li > a.active:before{content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:14px; border-radius:0 2px 2px 0; background:#00d4ff; box-shadow:0 0 8px rgba(0,212,255,.5);}
.sub-nav > .sub-nav-cont ul li > span.divider{width:1px; height:20px; margin:0 6px; background:rgba(0,212,255,.2);}

.layout{width:100%; max-width:1320px; margin:0 auto; padding:14px 28px;}

section.main-slide{border-radius:20px; border:1px solid rgba(0,212,255,0.14); overflow:hidden;}
section.main-slide > ul{margin:0; padding:0;}
section.main-slide > ul li{list-style:none; margin:0;}
section.main-slide > ul li img{width:100%;}

section.game{margin-top:18px;}
section.game .sec-header{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px;}
section.game .sec-header > .title{display:flex; align-items:center; gap:14px;}
section.game .sec-header > .title > h2{position:relative; padding-left:14px; font-weight:900; font-size:26px; color:#e8edf5; margin:0;}
section.game .sec-header > .title > h2:before{content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:70%; min-height:20px; border-radius:999px; background:linear-gradient(135deg, rgb(94, 234, 255), rgb(0, 212, 255) 55%, rgb(0, 153, 204)); box-shadow:0 0 12px rgba(0,212,255,0.35);}

section.game .sec-header > .actions{display:flex; align-items:center; gap:10px;}
section.game .sec-header > .actions > a{color:#00d4ff; font-size:16px; font-weight:700; transition:color:0.2s ease;}
section.game .sec-header > .actions > .carousel-nav{display:inline-flex; align-items:center; gap:8px;}
section.game .sec-header > .actions > .carousel-nav > button{width:44px; height:44px; justify-content:center; padding:0; border:1px solid hsla(0,0%,100%,.12); color:#c8d4e4; font-size:26px; font-weight:700; cursor:pointer; transition:border-color .18s ease,background .18s ease,color .18s ease; border-radius:10px; border:1px solid rgba(0, 212, 255, 0.18); background:rgba(12,18,32,0.75);}
section.game .sec-header > .actions > .carousel-nav > button:hover{border-color:rgba(0,212,255,.4); background:rgba(0,212,255,0.08); color:#5eeaff;}
section.game .sec-header > .actions > .carousel-nav > button.slick-disabled{cursor:not-allowed; opacity:0.35;}

section.game .sub-title{margin:-2px 0 16px; color:hsla(0,0%,100%,.52); font-size:16px; line-height:1.5;}


section.game > .card-wrap{margin-left:-9px;}
section.game > .card-wrap.style1{}

section.game > .card-wrap .card{border:1px solid rgba(0,212,255,0.18); overflow:hidden; border-radius:14px; background:#0f1729; box-shadow:0 8px 32px rgba(0,0,0,0.35),0 0 0 1px hsla(0,0%,100%,0.04) inset; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;}
section.game > .card-wrap .card:hover{transform:translateY(-4px);}
section.game > .card-wrap.style1 .card:hover > .image-cont > img{transform:scale(1.02);}
section.game > .card-wrap .card > .image-cont{overflow:hidden; position:relative; diplay:flex; aspect-ratio:3/4; min-height:150px; background:linear-gradient(rgb(22, 32, 50), rgb(10, 16, 32));}
section.game > .card-wrap .card > .image-cont > img{width:100%; object-fit:contain; object-position:center; transition:transform .28s ease;}
section.game > .card-wrap .card > .txt{background:rgba(0,0,0,.25); padding:12px 0 14px; border-top:1px solid hsla(0,0%,100%,0.07);}
section.game > .card-wrap .card > .txt > strong{color:#c8d4e4; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

section.game > .card-wrap.style1 .card > .txt {text-align:center;}

section.game > .sec-header > .title > div > span{display:inline-flex; align-items:center; justify-content:center; min-width:48px; height:26px; padding:0 10px; border-radius:4px; font-size:12px; font-weight:900;}
section.game > .sec-header > .title > div > .hot{color:#ffea00; background:linear-gradient(180deg,#f01515,#9f0606); border:1px solid rgba(255,210,80,.35);}
section.game > .sec-header > .title > div > .new{color:#faf5ff; background:linear-gradient(180deg,#a855f7,#5b21b6); border:1px solid rgba(233,213,255,.45);}

section.game > .card-wrap.style2 .card > .image-cont{aspect-ratio:216/160; min-height:128px;}
section.game > .card-wrap.style2 .card > .image-cont > .hot{color:#ffea00; background:linear-gradient(180deg,#f01515,#c50808 55%,#9f0606); border:1px solid rgba(255,210,80,.35); text-shadow:0 1px 0 rgba(120,0,0,.55); position:absolute; top:10px; left:-14px; z-index:2; width:88px; height:24px; display:flex; align-items:center; justify-content:center; transform:rotate(-35deg); transform-origin:center; font-size:11px; font-weight:900; border-radius:3px; box-shadow:0 2px 10px rgba(0,0,0,.45);}
section.game > .card-wrap.style2 .card > .image-cont > .play{background:rgba(0,0,0,.55); color:#fff; box-shadow:none; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:40px; opacity:0; transition:opacity .18s ease,background .18s ease;}
section.game > .card-wrap.style2 .card > .txt{padding:12px 12px 14px;}
section.game > .card-wrap.style2 .card > .txt > span{margin-top:4px; color:#8899aa; font-size:13px;}

section.game > .card-wrap.style2 .card:hover > .image-cont > .play{opacity:1;}


.loginfrm{background:rgba(4,8,18,.78); backdrop-filter:blur(14px) saturate(1.2); position:fixed; inset:0; z-index:999; display:flex; align-items:center; justify-content:center; padding:24px 20px; overflow-y:auto;}

.joinfrm{background:rgba(4,8,18,.78); backdrop-filter:blur(14px) saturate(1.2); position:fixed; inset:0; z-index:999; display:flex; align-items:center; justify-content:center; padding:24px 20px; overflow-y:auto;}

.langfrm{background:rgba(4,8,18,.78); backdrop-filter:blur(14px) saturate(1.2); position:fixed; inset:0; z-index:999; display:flex; align-items:center; justify-content:center; padding:24px 20px; overflow-y:auto;}

article.modal{position:relative; display:flex; flex-direction:column; border:1px solid rgba(0,212,255,0.18); border-radius:24px; background:linear-gradient(rgb(20, 30, 48), rgb(10, 16, 32)); box-shadow:0 32px 80px rgba(0,0,0,.55),inset 0 0 0 1px hsla(0,0%,100%,.04),0 0 48px rgba(0,212,255,.08); overflow:hidden; width:min(100%, 420px); max-height: min(92vh, 820px);}
article.modal:before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, rgb(0, 153, 204), rgb(0, 212, 255), rgb(255, 51, 102), rgb(0, 212, 255)); z-index:2;}

article.modal > .modal-head{display:flex; align-items:center; justify-content:center; position:relative; padding:22px 56px 18px; border-bottom:1px solid hsla(0,0%,100%,.06);}
article.modal > .modal-head > .modal-logo{}
article.modal > .modal-head > .modal-logo img{height:80px; object-fit:contain; width:auto;}
article.modal > .modal-head > .modal-close{position:absolute; top:14px; right:14px; width:36px; height:36px; display:inline-flex; cursor:pointer; align-items:center; justify-content:center; border:1px solid hsla(0,0%,100%,.12); color:#8899aa; background:rgba(12, 18, 32, 0.75); border-radius:10px; transition:color .18s ease,border-color .18s ease,background .18s ease;}
article.modal > .modal-head > .modal-close:hover{color:#5eeaff; background:rgba(0, 212, 255, 0.08); border-color:rgba(0, 212, 255, .4);}

article.modal > .modal-head > .modal-title{display:flex; flex-direction:column;}
article.modal > .modal-head > .modal-title h2{margin:0; color:#5eeaff; font-size:18px; font-weight:800;}
article.modal > .modal-head > .modal-title h3{margin:0; color:#fff; font-size:22px; font-weight:1000;}
article.modal > .modal-head > .modal-title p{margin:6px 0 0; color:#8899aa; font-size:13px;}

article.modal > .modal-foot{display:grid; gap:10px; padding:8px 0 24px; text-align:center;}
article.modal > .modal-foot > p{margin:0; color:#8899aa; font-size:13px; line-height:1.5;}
article.modal > .modal-foot > button{border:0; background:transparent; cursor:pointer; color:#5eeaff; font-size:14px; font-weight:900; text-decoration:underline; text-underline-offset:3px;}
article.modal > .modal-foot > button:hover{color:#b8f0ff;}

article.modal > form{display:grid; gap:12px; padding:22px 24px 8px; flex:1 1 auto; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(0,212,255,.35) hsla(0,0%,100%,.06);}
article.modal > form > div{position:relative;}
article.modal > form > div input{width:100%; outline:none; height:50px; padding:0 16px; border:1px solid hsla(0,0%,100%,0.1); border-radius:10px; background:hsla(0,0%,100%,0.04); font-size:15px; font-weight:600; color:#c8d4e4; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
article.modal > form > div input:focus{box-shadow:0 0 0 3px rgba(0,212,255,0.12); border-color:rgba(0,212,255,0.45); background:hsla(0,0%,100%,.06);}
article.modal > form > div > .pass-visible{position:absolute; top:50%; right:10px; transform:translateY(-50%); width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; border:0; background:transparent; color:#8899aa; transition:color .18s ease,background .18s ease; cursor:pointer;}

article.modal > form > div > span{display:block; margin-bottom:6px; color:#8899aa; font-size:12px; font-weight:800;}
article.modal > form > div > span > span.red{color:#ff3366;}

article.modal > form > div > span > a{text-decoration:underline; color:#00d4ff; text-underline-offset:2px;}

article.modal > form > button{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; border:0; border-radius:10px; background:linear-gradient(135deg, rgb(94, 234, 255), rgb(0, 212, 255) 55%, rgb(0, 153, 204)); color:#041018; font-weight:800; box-shadow:0 8px 24px rgba(0,212,255,0.35); width:100%; height:52px; margin-top:4px; font-size:16px; cursor:pointer;}
article.modal > form > div > .pass-visible:hover{color:#5eeaff; background:rgba(0,212,255,.08);}

article.modal > form > div > .phone{display:grid; grid-template-columns:minmax(96px,108px) minmax(0,1fr); gap:10px; align-items:center;}
article.modal > form > div > .phone > div{}
article.modal > form > div > .phone > div > select{width:100%; outline:none; height:50px; padding:0 16px; border:1px solid hsla(0,0%,100%,0.1); border-radius:10px; background:hsla(0,0%,100%,0.04); font-size:15px; font-weight:600; color:#c8d4e4; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
article.modal > form > div > .phone > div > select option{background:rgb(20, 30, 48);}

article.modal > form > div > .phone+button{margin-top:8px; width:100%;height:44px; padding:0 10px; border:1px solid rgba(0,212,255,0.22); border-radius:8px; font-size:13px; font-weight:800; cursor:pointer; background:rgba(0, 212, 255, 0.08); color:#5eeaff; transition:border-color .18s ease,opacity .18s ease;}
article.modal > form > div > .phone+button:hover{border-color:rgba(0,212,255,.62);}

.joinfrm > article.modal > form > div > .pass-visible{bottom:8px; top:auto; transform:none;}

article.modal > .lang-list{margin:0; padding:14px 16px 18px; display:grid; gap:8px;}
article.modal > .lang-list li{}
article.modal > .lang-list li button{width:100%; min-height:52px; display:flex; align-items:center; gap:12px; padding:0 14px; border:1px solid hsla(0,0%,100%,.1); background:hsla(0,0%,100%,.03); color:#8899aa; font-size:15px; font-weight:700; text-align:left; border-radius:10px;}
article.modal > .lang-list li button > span:nth-of-type(1){display:inline-flex; align-items:center; justify-content:center; width:40px; height:28px; border-radius:6px; background:rgba(0,0,0,.28); color:#5eeaff; font-size:12px; font-weight:900;}
article.modal > .lang-list li button > span:nth-of-type(2){flex:1; color:#c8d4e4;}
article.modal > .lang-list li button > span:nth-of-type(3){display:none; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; background:rgba(0,212,255,.22); font-size:13px; font-weight:900; color:#5eeaff;}

article.modal > .lang-list li button.active{box-shadow:inset 0 0 0 1px rgba(0,212,255,.2); border-color:rgba(0,212,255,.45); background:rgba(0,212,255,0.08); color:#5eeaff;}
article.modal > .lang-list li button.active > span:nth-of-type(1){background:rgba(0,212,255,.18); color:#fff4cf;}
article.modal > .lang-list li button.active > span:nth-of-type(2){color:#5eeaff;}
article.modal > .lang-list li button.active > span:nth-of-type(3){display:inline-flex;}


.mobile-foot-nav{height:64px; position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); z-index:90; display:none; align-items:stretch; padding:6px 8px; border:1px solid rgba(0,212,255,0.14); border-radius:999px; background:rgba(12,18,32,.92); box-shadow:0 12px 40px rgba(0,0,0,.45),inset 0 0 0 1px hsla(0,0%,100%,.04); backdrop-filter:blur(16px) saturate(1.3);}

.mobile-foot-nav > a{position:relative; flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:4px 2px; border-radius:999px; color:#8899aa; font-size:11px; font-weight:700; text-aling:center; transition:color .2s ease,background .2s ease;}
.mobile-foot-nav > a > span:nth-of-type(1){display:flex; align-items:center; justify-content:center; width:24px; height:24px; color:inherit; transition:transform .2s ease;}
.mobile-foot-nav > a > span:nth-of-type(1) > svg{width:20px; height:20px; display:block;}
.mobile-foot-nav > a > span:nth-of-type(2){max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.1;}

.mobile-foot-nav > a.active{color:#041018; background:linear-gradient(135deg, rgb(94, 234, 255), rgb(0, 212, 255)); box-shadow:0 4px 16px rgba(0,212,255,.35);}


.sub-header{margin-bottom:20px;}
.sub-header.space{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}
.sub-header h2{margin:0; color:#fff; font-size:clamp(24px,2.6vw,30px); font-weight:900;}
.sub-header p{margin:8px 0 0; color:hsla(0,0%,100%,.52); font-size:14px;}

.sub-header .search{display:flex; align-items:center; gap:8px;}
.sub-header .search > .input-wrap{position:relative; display:block;}
.sub-header .search > .input-wrap input{width:min(280px,42vw); height:42px; padding:0 40px 0 14px; border:1px solid hsla(0,0%,100%,.12); border-radius:8px; background:hsla(0,0%,100%,.03); color:#c8d4e4; font-size:14px; transition:border-color .18s ease,background .18s ease; outline:none;}
.sub-header .search > .input-wrap input:focus{box-shadow:0 0 0 3px rgba(0,212,255,0.12); border-color:rgba(0,212,255,0.45); background:hsla(0,0%,100%,.06);}
.sub-header .search > .input-wrap svg{position:absolute; top:50%; right:12px; transform:translateY(-50%); color:hsla(0,0%,100%,.38); pointer-events:none;}
.sub-header .search > button{height:42px; padding:0 18px; border:1px solid rgba(0,212,255,.34); border-radius:8px; background:linear-gradient(180deg,rgba(0,212,255,.18),rgba(0,212,255,.08)); color:#5eeaff; font-size:14px; font-weight:800; white-space:nowrap; transition:border-color .18s ease,background .18s ease,color .18s ease;}
.sub-header .search > button:hover{border-color:rgba(0,212,255,.55); background:linear-gradient(180deg,rgba(0,212,255,.28),rgba(0,212,255,.12)); color:#fff;}

.sub-header.message{align-items:flex-start; display:flex; justify-content:space-between; gap:16px;}
.sub-header.message > button{display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px; border:1px solid rgba(0,212,255,.28); border-radius:8px; background:hsla(0,0%,100%,.04); color:#5eeaff; font-size:13px; font-weight:700; transition:border-color .18s ease,background .18s ease,color .18s ease;}

.sub-header .search.type2{align-items:flex-end; gap:8px;}
.sub-header .search.type2 > .input-wrap{display:flex; flex-direction:column; gap:4px;}
.sub-header .search.type2 > .input-wrap > span{color:hsla(0,0%,100%,.45); font-size:11px; font-weight:700;}
.sub-header .search.type2 > .input-wrap > input{padding:0 12px; width:100%;}
.sub-header .search.type2 > .input-wrap.text-field{flex:1 1 180px; min-width:140px;}
.sub-header .search.type2 > .input-wrap.text-field input{width:100%;}

.mypage{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:18px;}
.mypage > article{background:linear-gradient(160deg,rgba(22,32,50,0.95),rgba(10,16,32,0.98)); border:1px solid rgba(0,212,255,0.18); border-radius:20px; box-shadow:0 8px 32px rgba(0,0,0,0.35),0 0 0 1px hsla(0,0%,100%,0.04) inset; padding:22px 20px 20px;}
.mypage > article > h3{border-bottom:1px solid rgba(0,212,255,0.22); margin:0 0 16px; padding-bottom:12px; color:#5eeaff; font-size:18px;}

.mypage > .profile{}
.mypage > .profile > .user-name{margin:0 0 18px; color:#fff; font-size:clamp(28px,3vw,34px); font-weight:1000;}
.mypage > .profile > dl{}
.mypage > .profile > dl div{display:grid; grid-template-columns:108px 1fr; gap:12px; padding:11px 0; border-bottom:1px solid hsla(0,0%,100%,.05);}
.mypage > .profile > dl div dt{margin:0; color:#8899aa; font-size:13px; font-weight:700;}
.mypage > .profile > dl div dd{margin:0; color:#c8d4e4; font-size:14px; font-weight:800; word-break:break-all;}

.mypage > .wallet{}
.mypage > .wallet > .balance-wrap{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:16px;}
.mypage > .wallet > .balance-wrap > div{background:rgba(0,0,0,.25); padding:16px 14px; border:1px solid rgba(0,212,255,0.22); border-radius:10px;}
.mypage > .wallet > .balance-wrap > div > span:nth-of-type(1){display:block; margin-bottom:8px; color:#8899aa; font-size:12px;}
.mypage > .wallet > .balance-wrap > div > span:nth-of-type(2){display:block; font-weight:1000; color:#c8d4e4; font-size:clamp(18px,2vw,22px);}
.mypage > .wallet > .balance-wrap > div > span.blue{color:#5eeaff;}
.mypage > .wallet > ul{margin:0 0 18px; padding:0; border:1px solid hsla(0,0%,100%,.06); border-radius:10px; overflow:hidden;}
.mypage > .wallet > ul > li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid hsla(0,0%,100%,.05);}
.mypage > .wallet > ul > li > span:nth-of-type(1){color:#8899aa; font-size:13px; font-weight:700;}
.mypage > .wallet > ul > li > span:nth-of-type(2){color:#c8d4e4; font-size:14px; font-weight:800; text-align:right;}
.mypage > .wallet > .btn-wrap{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:18px;}
.mypage > .wallet > .btn-wrap > button{cursor:pointer; min-height:44px; border:1px solid rgba(0,212,255,0.22); border-radius:10px; color:#5eeaff; background:rgba(0,212,255,0.08); font-size:14px; font-weight:900; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;}
.mypage > .wallet > .btn-wrap > button:hover{border-color:rgba(0,212,255,.5); background:rgba(0,212,255,.16); transform:translateY(-1px);}
.mypage > .wallet > .link-wrap{display:grid; gap:10px;}
.mypage > .wallet > .link-wrap > div{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1px solid hsla(0,0%,100%,.06); border-radius:10px; background:rgba(0,0,0,.18);}
.mypage > .wallet > .link-wrap > div > div{}
.mypage > .wallet > .link-wrap > div > div > span:nth-of-type(1){display:block; color:#c8d4e4; font-size:14px; font-weight:900;}
.mypage > .wallet > .link-wrap > div > div > span:nth-of-type(2){display:block; color:#8899aa; font-size:12px; margin-top:4px;}
.mypage > .wallet > .link-wrap > div > button{cursor:pointer; min-height:38px; border:1px solid rgba(0,212,255,0.22); border-radius:10px; color:#5eeaff; background:rgba(0,212,255,0.08); font-size:14px; font-weight:900; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;}
.mypage > .wallet > .link-wrap > div > button:hover{border-color:rgba(0,212,255,.5); background:rgba(0,212,255,.16); transform:translateY(-1px);}


.charge-guide{margin-bottom:16px; padding:20px 18px; border:1px solid rgba(0,212,255,.2); border-radius:14px; background:linear-gradient(180deg,hsla(0,0%,100%,.03),transparent 16%),linear-gradient(180deg,var(--panel),var(--black));}
.charge-guide > h3{margin:0 0 12px; color:#5eeaff; font-size:17px; font-weight:900;}
.charge-guide > div{display:grid; gap:12px;}
.charge-guide > div > p{margin:0; color:#c8d4e4; font-size:14px; line-height:1.65;}
.charge-guide > div > p > button{display:inline; margin:0; padding:0 2px; border:0; font-size:14px; border-radius:10px; border-bottom:1px dashed rgba(120,190,255,.85); background:transparent; color:#8ec5ff; font-weight:900; text-decoration:underline; text-underline-offset:3px; cursor:pointer; transition:color .18s ease,border-color .18s ease;}
.charge-guide > div > p > button:hover{color:#b8dcff; border-bottom-color:#b8dcff;}

.charge-panel{border:1px solid rgba(0,212,255,0.18); border-radius:20px; background:linear-gradient(160deg,rgba(22,32,50,0.95),rgba(10,16,32,0.98)); box-shadow:0 8px 32px rgba(0,0,0,0.35),0 0 0 1px hsla(0,0%,100%,0.04) inset; padding:22px 20px 20px; overflow:hidden;}
.charge-panel.history{margin-top:16px;}
.charge-panel h3{border-bottom:1px solid rgba(0,212,255,0.22); margin:0 0 16px; padding-bottom:12px; color:#5eeaff; font-size:18px;}
.charge-panel > .title-wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(0,212,255,.16)}
.charge-panel > .title-wrap h3{margin:0; padding-bottom:0; border-bottom:0;}
.charge-panel > .title-wrap button{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid hsla(0,0%,100%,.18); border-radius:10px; background:hsla(0,0%,100%,.06); color:hsla(0,0%,100%,.88); cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease;}
.charge-panel > .title-wrap button svg{display:block; width:18px; height:18px;}
.charge-panel > .title-wrap button:hover{background:hsla(0,0%,100%,.12); border-color:rgba(0,212,255,.42); color:#fff;}
.charge-panel > .desc{margin:-8px 0 14px; color:hsla(0,0%,100%,.5); font-size:13px; font-weight:600; line-height:1.5;}

.charge-panel > .table-wrap{overflow-x:auto;}
.charge-panel > .table-wrap > table{width:100%;min-width:860px; border-collapse:collapse;}
.charge-panel > .table-wrap > table thead{background:hsla(0,0%,100%,.04);}
.charge-panel > .table-wrap > table thead tr th{color:hsla(0,0%,100%,.62); font-size:13px; font-weight:800; white-space:nowrap; padding:13px 12px; border-bottom:1px solid hsla(0,0%,100%,.06); text-align:left;}
.charge-panel > .table-wrap > table tbody{}
.charge-panel > .table-wrap > table tbody tr{}
.charge-panel > .table-wrap > table tbody tr:hover{background:hsla(0,0%,100%,.025);}
.charge-panel > .table-wrap > table tbody tr td{padding:13px 12px; border-bottom:1px solid hsla(0,0%,100%,.06); text-align:left; color:#c8d4e4; font-size:14px;}
.charge-panel > .table-wrap > table tbody tr td > span.type{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; border:1px solid transparent; font-size:12px; font-weight:800; white-space:nowrap;}
.charge-panel > .table-wrap > table tbody tr td > span.status{display:inline-flex; align-items:center; justify-content:center; min-width:52px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:800;}

.charge-panel > .table-wrap > table tbody tr td > span.type.color1{color:#ffd28a; background:rgba(0,212,255,.14); border-color:rgba(0,212,255,.32);}
.charge-panel > .table-wrap > table tbody tr td > span.status.color1{color:#c8d4e4; background:hsla(0,0%,100%,.1);}

.pagination{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; padding-top:4px;}
.pagination > button{min-width:72px; height:40px; padding:0 14px; border:1px solid hsla(0,0%,100%,.12); border-radius:8px; background:hsla(0,0%,100%,.04); color:#c8d4e4; font-size:14px; font-weight:800; cursor:pointer;}
.pagination > button:disabled{opacity:0.4; cursor:not-allowed;}
.pagination > span{color:hsla(0,0%,100%,.55); font-size:14px; font-weight:700;}

.charge-form{display:grid; gap:14px;}
.charge-form input{height:46px; padding:0 14px; border:1px solid hsla(0,0%,100%,0.1); border-radius:10px; background:hsla(0,0%,100%,0.04); outline:none; color:#c8d4e4; font-size:15px; font-weight:700;}
.charge-form input:focus{box-shadow:0 0 0 3px rgba(0,212,255,0.12); border-color:rgba(0,212,255,0.45); background:hsla(0,0%,100%,.06);}
.charge-form textarea{min-height:140px; padding:12px 14px; border:1px solid hsla(0,0%,100%,0.1); border-radius:10px; background:hsla(0,0%,100%,0.04); outline:none; color:#c8d4e4; font-size:15px; font-weight:700;}
.charge-form textarea:focus{box-shadow:0 0 0 3px rgba(0,212,255,0.12); border-color:rgba(0,212,255,0.45); background:hsla(0,0%,100%,.06);}
.charge-form > .rows{display:grid; gap:6px;}
.charge-form > .rows > span{color:hsla(0,0%,100%,.62); font-size:13px; font-weight:700;}
.charge-form > .rows > span > em{font-style:normal; color:#5eeaff;}
.charge-form > .money-btn{display:flex; flex-wrap:wrap; gap:8px;}
.charge-form > .money-btn > button{min-width:56px; height:38px; padding:0 12px; border:1px solid hsla(0,0%,100%,.1); border-radius:8px; background:hsla(0,0%,100%,.04); color:#c8d4e4; font-size:13px; font-weight:800; cursor:pointer;}
.charge-form > .money-btn > button:hover{border-color:rgba(0,212,255,.32); color:#5eeaff;}
.charge-form > .money-btn > button.reset{color:#f89 !important;}
.charge-form > .group{display:grid; gap:10px; padding:14px; border:1px solid rgba(0,212,255,.16); border-radius:10px; background:hsla(0,0%,100%,.02);}
.charge-form > .group > span{color:hsla(0,0%,100%,.62); font-size:13px; font-weight:700;}
.charge-form > .group > span > em{font-style:normal; color:#5eeaff;}
.charge-form > .group > div{display:grid; gap:6px;}
.charge-form > .group > div > span{color:hsla(0,0%,100%,.5); font-size:12px; font-weight:700;}

.charge-form > .form-btn{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px;}
.charge-form > .form-btn > button{cursor:pointer;}
.charge-form > .form-btn > .submit{background:linear-gradient(135deg, rgb(94, 234, 255), rgb(0, 212, 255) 55%, rgb(0, 153, 204)); color:#041018; box-shadow:0 6px 22px rgba(0,212,255,0.35); min-width:140px; height:48px; padding:0 22px; font-size:15px; font-weight:900; border:0; border-radius:10px; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.charge-form > .form-btn > .submit:hover{box-shadow:0 8px 28px rgba(0,212,255,.45); transform:translateY(-1px);}
.charge-form > .form-btn > .default{min-width:120px; height:48px; padding:0 18px; border:1px solid hsla(0,0%,100%,.14); border-radius:8px; background:hsla(0,0%,100%,.04); color:#c8d4e4; font-size:14px; font-weight:800;}

.charge-form.customer > .form-btn{justify-content:flex-end;}

ul.noti{margin:0; padding:12px 14px; border-radius:8px; background:hsla(0,0%,100%,.03); border:1px solid hsla(0,0%,100%,.08); display:grid; gap:6px;}
ul.noti > li{position:relative; padding-left:12px; color:hsla(0,0%,100%,.5); font-size:12px; font-weight:600; line-height:1.5; text-align:left; list-style:none;}
ul.noti > li:before{content:"\2022"; position:absolute; left:0; color:#00d4ff;}


.notice-panel{border:1px solid rgba(0,212,255,.18); border-radius:14px; background:linear-gradient(rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0) 16%), linear-gradient(rgb(15, 23, 41), rgb(10, 16, 32)); box-shadow:inset 0 1px 0 hsla(0,0%,100%,.04),0 18px 34px rgba(0,0,0,.28); overflow:hidden;}
.notice-panel > .table-wrap{overflow-x:auto;}
.notice-panel > .table-wrap > table{border:1px solid rgba(0,212,255,0.18); border-radius:20px; overflow:hidden; background:rgba(12,18,32,0.75); box-shadow:0 8px 32px rgba(0,0,0,0.35),0 0 0 1px hsla(0,0%,100%,0.04) inset; table-layout:auto; width:100%; border-collapse:collapse;}

.notice-panel > .table-wrap > table thead{background:rgba(0,212,255,.06);}
.notice-panel > .table-wrap > table thead tr th{text-align:left; white-space:nowrap; padding:12px; border-bottom:1px solid rgba(0,212,255,0.22); font-size:12px; font-weight:700; color:#5eeaff;}
.notice-panel > .table-wrap > table thead tr th:nth-of-type(1){width:1%;}
.notice-panel > .table-wrap > table thead tr th:nth-of-type(2){width:auto;}
.notice-panel > .table-wrap > table tbody tr{border-top:1px solid hsla(0,0%,100%,.06); transition:background .16s ease;}
.notice-panel > .table-wrap > table tbody tr:hover{background:rgba(0,212,255,.04);}
.notice-panel > .table-wrap > table tbody tr td{padding:16px; color:#c8d4e4; font-size:14px; vertical-align:middle;}
.notice-panel > .table-wrap > table tbody tr td:nth-of-type(1){width:1%; font-variant-numeric:tabular-nums; white-space:nowrap;}
.notice-panel > .table-wrap > table tbody tr td:nth-of-type(2){width:auto;}

.notice-panel > .table-wrap > table.message thead tr th:nth-of-type(1){width:72px;}
.notice-panel > .table-wrap > table.message thead tr th:nth-of-type(2){width:96px;}
.notice-panel > .table-wrap > table.message thead tr th:nth-of-type(3){}
.notice-panel > .table-wrap > table.message thead tr th:nth-of-type(4){width:150px;}

.notice-panel > .table-wrap > table.message tbody tr td{white-space:nowrap;}
.notice-panel > .table-wrap > table.message tbody tr td:nth-of-type(1){width:72px;}
.notice-panel > .table-wrap > table.message tbody tr td:nth-of-type(2){width:96px;}
.notice-panel > .table-wrap > table.message tbody tr td:nth-of-type(3){}
.notice-panel > .table-wrap > table.message tbody tr td:nth-of-type(4){width:150px;}

.notice-panel > .table-wrap > table.message tbody tr td span.status{display:inline-flex; align-items:center; justify-content:center; min-width:72px; padding:5px 12px; border-radius:6px; font-size:12px; font-weight:700;}
.notice-panel > .table-wrap > table.message tbody tr td span.status.color1{color:#9aa3ab; background:hsla(0,0%,100%,.04); border:1px solid hsla(0,0%,100%,.08);}


.notice-panel > .table-wrap > table.customer thead tr th:nth-of-type(1){width:72px;}
.notice-panel > .table-wrap > table.customer thead tr th:nth-of-type(2){width:96px;}
.notice-panel > .table-wrap > table.customer thead tr th:nth-of-type(3){}
.notice-panel > .table-wrap > table.customer thead tr th:nth-of-type(4){width:150px;}

.notice-panel > .table-wrap > table.customer tbody tr td{white-space:nowrap;}
.notice-panel > .table-wrap > table.customer tbody tr td:nth-of-type(1){width:72px;}
.notice-panel > .table-wrap > table.customer tbody tr td:nth-of-type(2){width:96px;}
.notice-panel > .table-wrap > table.customer tbody tr td:nth-of-type(3){}
.notice-panel > .table-wrap > table.customer tbody tr td:nth-of-type(4){width:150px;}

.notice-panel > .table-wrap > table.customer tbody tr td span.status{display:inline-flex; align-items:center; justify-content:center; min-width:68px; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:800;}
.notice-panel > .table-wrap > table.customer tbody tr td span.status.color1{color:#5eeaff; background:rgba(0,212,255,.14);}


.notice-panel > .table-wrap > table.betlist thead tr th:nth-of-type(1){width:auto;}
.notice-panel > .table-wrap > table.betlist thead tr th:nth-of-type(2){width:auto;}
.notice-panel > .table-wrap > table.betlist thead tr th:nth-of-type(3){width:auto;}
.notice-panel > .table-wrap > table.betlist thead tr th:nth-of-type(4){width:auto;}
.notice-panel > .table-wrap > table.betlist thead tr th:nth-of-type(5){width:auto;}
.notice-panel > .table-wrap > table.betlist thead tr th:nth-of-type(6){width:auto;}
.notice-panel > .table-wrap > table.betlist thead tr th:nth-of-type(7){width:auto;}
.notice-panel > .table-wrap > table.betlist thead tr th:nth-of-type(8){width:auto;}

.notice-panel > .table-wrap > table.betlist tbody tr td{white-space:nowrap;}
.notice-panel > .table-wrap > table.betlist tbody tr td:nth-of-type(1){width:auto;}
.notice-panel > .table-wrap > table.betlist tbody tr td:nth-of-type(2){width:auto;}
.notice-panel > .table-wrap > table.betlist tbody tr td:nth-of-type(3){width:auto;}
.notice-panel > .table-wrap > table.betlist tbody tr td:nth-of-type(4){width:auto;}
.notice-panel > .table-wrap > table.betlist tbody tr td:nth-of-type(5){width:auto;}
.notice-panel > .table-wrap > table.betlist tbody tr td:nth-of-type(6){width:auto;}
.notice-panel > .table-wrap > table.betlist tbody tr td:nth-of-type(7){width:auto;}
.notice-panel > .table-wrap > table.betlist tbody tr td:nth-of-type(8){width:auto;}




.panel-nav{display:flex; flex-wrap:wrap; gap:4px 18px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid hsla(0,0%,100%,.08);}
.panel-nav > button{position:relative; padding:8px 2px 10px; border:0; background:transparent; color:hsla(0,0%,100%,.48); font-size:14px; font-weight:700; transition:color .18s ease;}
.panel-nav > button:hover{color:hsla(0,0%,100%,.78);}
.panel-nav > button.active{color:#5eeaff;}
.panel-nav > button.active:after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:999px; background:linear-gradient(90deg, rgba(0, 212, 255, 0.2), rgb(94, 234, 255), rgba(0, 212, 255, 0.2));}

.ui-datepicker td span, .ui-datepicker td a{line-height:1.5;}

.bet-summary{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px;}
.bet-summary > div{display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px solid rgba(0,212,255,.16); border-radius:10px; background:hsla(0,0%,100%,.03);}
.bet-summary > div > span:nth-of-type(1){color:hsla(0,0%,100%,.5); font-size:12px; font-weight:700;}
.bet-summary > div > span:nth-of-type(2){color:#fff; font-size:18px; font-weight:900;}


.back-btn{width:48px; height:48px; border:1px solid hsla(0,0%,100%,.14); background:hsla(0,0%,100%,.04); font-size:28px; line-height:1; cursor:pointer; transition:border-color .18s ease,background .18s ease; border-radius:10px; color:#00d4ff;}
.back-btn:hover{border-color:rgba(0,212,255,.45); background:rgba(0,212,255,0.08);}

.slot-title-wrap{display:flex; gap:14px; align-items:center; margin-bottom:14px;}

section.game .slot-title-wrap .sec-header{margin-bottom:5px;}
section.game .slot-title-wrap .sub-title{margin:0;}

.slot-search{margin:0 0 18px;}
.slot-search input{width:100%; max-width:420px; height:52px; padding:0 16px; outline:none; border:1px solid hsla(0,0%,100%,0.1); border-radius:10px;  background:hsla(0,0%,100%,.04); font-size:16px; font-weight:600; color: #ffffff;}
.slot-search input:focus{box-shadow:0 0 0 3px rgba(0,212,255,0.12); border-color:rgba(0,212,255,0.45); background:hsla(0,0%,100%,.06);}

.card-wrap.style1.sub{display:grid; gap:5px; grid-template-columns:repeat(5, 1fr);}
.card-wrap.style2.sub{display:grid; gap:5px; grid-template-columns:repeat(5, 1fr);}

@media (max-width: 900px){
	header{padding:10px 14px;}
	header > .nav-wrap > nav{display:none;}
	header > .btn > button.join{display:none;}
	header > .btn > button.login{min-width:62px;}
	header > .btn > button{font-size:13px; padding:0 12px; height:36px;}

	header > .btn > .user-info{gap:6px;}
	header.loginok{justify-content:flex-end;}
	header.loginok > .nav-wrap{display:none;}

	header > .btn > .user-info > span.user-id{font-size:13px;}
	header > .btn > .user-info > span.user-money{font-size:13px;}
	header > .btn > .user-info > button.refresh > svg{width:15px; height:15px;}

	header > .btn > button.lang{min-width:50px; padding:0 5px;}

	.sub-nav > .sub-nav-cont{padding:0 14px;}
	.sub-nav > .sub-nav-cont ul li > a{height:32px; font-size:13px; padding:0 10px;}

	.layout{padding:14px 14px; padding-bottom:90px;}

	section.game > .sec-header > .actions > .carousel-nav{display:none;}
	.mobile-foot-nav{display:flex;}

	.mypage{grid-template-columns:1fr;}
	.mypage > .profile > dl div{grid-template-columns:92px 1fr;}
	.mypage > .wallet > .btn-wrap{grid-template-columns:1fr;}
	.mypage > .wallet > .link-wrap > div{flex-direction:column; align-items:stretch;}
	.mypage > .wallet > .link-wrap > div > button{width:100%;}

	.sub-header.space{flex-direction:column; align-items:stretch;}
	.sub-header .search > .input-wrap input{width:100%;}

	.sub-header.message{flex-direction:column; align-items:stretch;}

	.sub-header .search.type2{width:100%; flex-wrap:wrap;}
	.sub-header .search.type2 > .input-wrap.text-field{flex:1 1 100%;}
	.bet-summary{grid-template-columns:1fr;}
}








.ui-widget-header { border: 0px solid #dddddd; background: #fff; } 

.ui-datepicker-calendar>thead>tr>th { font-size: 14px !important; } 

.ui-datepicker .ui-datepicker-header { position: relative; padding: 10px 0; } 

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active { border: 0px solid #c5c5c5; background-color: transparent; font-weight: normal; color: #454545; text-align: center; } 

.ui-datepicker .ui-datepicker-title { margin: 0 0em; line-height: 16px; text-align: center; font-size: 14px; padding: 0px; font-weight: bold; } 

.ui-datepicker { display: none; background-color: #fff; border-radius: 4px; margin-top: 10px; margin-left: 0px; margin-right: 0px; padding: 20px; padding-bottom: 10px; width: 300px; box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1); } 

.ui-widget.ui-widget-content { border: 1px solid #eee; } 

#datepicker:focus>.ui-datepicker { display: block; } 

.ui-datepicker-prev,
.ui-datepicker-next { cursor: pointer; } 

.ui-datepicker-next { float: right; } 

.ui-state-disabled { cursor: auto; color: hsla(0, 0%, 80%, 1); } 

.ui-datepicker-title { text-align: center; padding: 10px; font-weight: 100; font-size: 20px; } 

.ui-datepicker-calendar { width: 100%; } 

.ui-datepicker-calendar>thead>tr>th { padding: 5px; font-size: 20px; font-weight: 400; } 

.ui-datepicker-calendar>tbody>tr>td>a { color: #000; font-size: 12px !important; font-weight: bold !important; text-decoration: none;}

.ui-datepicker-calendar>tbody>tr>.ui-state-disabled:hover { cursor: auto; background-color: #fff; } 

.ui-datepicker-calendar>tbody>tr>td { border-radius: 100%; width: 44px; height: 30px; cursor: pointer; padding: 5px; font-weight: 100; text-align: center; font-size: 12px; } 

.ui-datepicker-calendar>tbody>tr>td:hover { background-color: transparent; opacity: 0.6; } 

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus { border: 0px solid #cccccc; background-color: transparent; font-weight: normal; color: #2b2b2b; } 

.ui-widget-header .ui-icon { background-image: url('/images/btns.png'); } 

.ui-icon-circle-triangle-e { background-position: -20px 0px; background-size: 36px; } 

.ui-icon-circle-triangle-w { background-position: -0px -0px; background-size: 36px; } 

.ui-datepicker-calendar>tbody>tr>td:first-child a { color: red !important; } 

.ui-datepicker-calendar>tbody>tr>td:last-child a { color: #0099ff !important; } 

.ui-datepicker-calendar>thead>tr>th:first-child { color: red !important; } 

.ui-datepicker-calendar>thead>tr>th:last-child { color: #0099ff !important; } 

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight { border: 0px; background: #f1f1f1; border-radius: 50%; padding-top: 10px; padding-bottom: 10px; } 

.inp { padding: 10px 10px; background-color: #f1f1f1; border-radius: 4px; border: 0px; } 

.inp:focus { outline: none; background-color: #eee; } 

/* =========================================
   레이어 팝업 (공지사항, 쪽지 공통)
========================================= */
.layer-modal { 
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.6); 
}
.layer-modal-content { 
    background-color: #1a2233; 
    margin: 10% auto; 
    border: 1px solid #2a3449; 
    width: 90%; 
    max-width: 600px; 
    border-radius: 12px; 
    color: #fff; 
    display: flex; 
    flex-direction: column; 
}
.layer-modal-header { 
    padding: 20px; 
    text-align: center; 
    border-bottom: 1px solid #2a3449; 
    position: relative; 
}
.layer-modal-header h3 { 
    margin: 0; 
    font-size: 1.2rem; 
    font-weight: bold; 
}
.layer-modal-close { 
    position: absolute; 
    right: 20px; 
    top: 20px; 
    background: #2a3449; 
    border: none; 
    color: #fff; 
    width: 30px; 
    height: 30px; 
    border-radius: 4px; 
    cursor: pointer; 
}
.layer-modal-info { 
    display: flex; 
    justify-content: space-between; 
    padding: 15px 20px; 
    border-bottom: 1px solid #2a3449; 
    font-size: 0.9rem; 
}
.layer-modal-info .category { 
    color: #00d2ff; 
    font-weight: bold; 
}
.layer-modal-info .date { 
    color: #8892a3; 
}
.layer-modal-body { 
    padding: 20px; 
    min-height: 250px; 
    max-height: 50vh; 
    overflow-y: auto; 
    line-height: 1.6; 
    font-size: 0.95rem; 
}
.layer-modal-footer { 
    padding: 20px; 
    text-align: center; 
}
.layer-modal-btn { 
    background-color: #0b1c2c; 
    border: 1px solid #00d2ff; 
    color: #00d2ff; 
    padding: 10px 30px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: bold; 
}

/* =========================================
   테이블 목록 클릭 효과 및 상태 라벨 공통
========================================= */
.clickable-row { 
    cursor: pointer; 
    transition: background 0.2s; 
}
.clickable-row:hover { 
    background-color: rgba(255,255,255,0.05); 
}

.status.color1 { color: #8892a3; } /* 읽음 */
.status.color2 { color: #ff4a4a; font-weight: bold; } /* 안읽음 */

/* 팝업 레이아웃 및 디자인 (어두운 배경, 하얀색 폰트 적용) */
.popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85) !important;
    z-index: 99999 !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    overflow-y: auto; /* 모바일에서 세로 스크롤을 위해 추가 */
}

/* PC 환경 기본 스타일 (가로 정렬) */
.popup-container {
    display: flex;
    justify-content: space-evenly; /* 양쪽 간격을 균일하게 (팝업이 2개일 때도 자연스러움) */
    gap: 20px;
    width: 100%;
    max-width: 1200px; /* 메인 콘텐츠 영역 너비 */
    margin-bottom: 25px;
    padding: 0 20px;
}

.popup-item {
    background: transparent; 
    width: 310px; 
    border-radius: 8px; 
    overflow: hidden;
    flex-shrink: 0;
}

.popup-body {
    width: 100%; 
    color: #ffffff !important;
}
.popup-body img {
    width: 100%; display: block;
}

/* 하단 컨트롤 영역 */
.popup-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 15px; background: #ffffff; color: #111111; font-size: 13px;
}
.popup-footer button {
    border: none; background: none; cursor: pointer; color: #111111; font-size: 13px; font-weight: bold;
}

/* 전체 닫기 버튼 */
.btn-close-all {
    padding: 10px 30px; background: #1a1a1a; color: #ffffff !important;
    border: 1px solid #444; border-radius: 5px; cursor: pointer; font-size: 14px;
    margin-bottom: 30px; /* 모바일 하단 여백 추가 */
}

/* 모바일 환경 스타일 (세로 정렬 및 반응형 너비) */
@media (max-width: 768px) {
    .popup-overlay {
        justify-content: flex-start; /* 모바일은 내용이 많으면 위에서부터 스크롤되도록 */
        padding-top: 40px; 
    }
    .popup-container {
        flex-direction: column; /* 세로로 쌓기 */
        align-items: center;
        justify-content: flex-start;
        padding: 0 15px;
    }
    .popup-item {
        width: 100%; /* 모바일 화면에 꽉 차게 */
        max-width: 400px; /* 단, 태블릿 등에서 너무 커지지 않도록 제한 */
    }
}