@charset "EUC-KR";


@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

*{
	font-family: 'Paperozi';
}



/* ===== Base Reset ===== */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.rebirth {
  margin: 0;
  color: var(--rb-ink);
  font-family: 'Paperozi';
  background: #020617; /* fallback */
  overflow-x: hidden;
}

/* ===== Hero Background (À̹ÌÁö + ³×¿Â ±×·¡µð¾ðÆ® + ÆÄƼŬ) ===== */
body.rebirth::before,
body.rebirth::after {
  content: "";
  inset: 0;
  z-index: -2;
}

/* ===== Background ===== */
.bg {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
}
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%),
             linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0) 40%);
  z-index: -1;
}
.bg-img{
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  object-fit: cover;
  z-index:-1;
}
/* ÄÁÅÙÃ÷´Â ¹è°æ À§ */
.page-wrap {
  position: relative;
  z-index: 1;

  min-height: 100vh;        
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;      
  text-align: center;
  padding: 20px;
}

/* ===== Topbar ===== */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 2rem;
}

.game-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

/* ¸Þ´º ±×¸®µå Áß¾Ó */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
}

/* CTA ¹öÆ°µµ Áß¾Ó */
.cta-wrap {
  margin-top: clamp(22px, 6vw, 40px);
  display: flex;
  justify-content: center;
}

.auth { display: flex; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; user-select: none; }

/* »ó´Ü ¹öÆ° */
.btn.chip {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-radius: 9999px;
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  margin-left: 0.5rem;
  transition: all 0.3s;
}
.btn.chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(139,92,246,0.4);
}
.btn.chip:active { transform: translateY(1px); box-shadow: 0 1px 0 #e6a93a; }

.content { max-width: 1100px; margin: 28px auto 40px; padding: 0 20px 40px; }

.menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem;
  padding: 1.5rem 1rem;
  text-decoration: none;
  color: #fff;
  transition: all 0.3s ease;
}
.menu-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 0.8rem;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
}

.menu-card:hover {
  background: rgba(99,102,241,0.15);
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(99,102,241,0.25);
}

/* ÅؽºÆ®´Â ¿øÇü ¾ÆÀÌÄÜ ¾Æ·¡ */
.menu-text {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}



/* CTA ¹öÆ° */
.cta-wrap { margin-top: clamp(22px, 6vw, 40px); display: flex; justify-content: center; }

/* ±âº» CTA ¹öÆ° */
.btn.cta {
  min-width: 220px;
  max-width: 320px;   /* À¥¿¡¼­ ¹öÆ° ÃÖ´ëÆø °íÁ¤ */
  padding: 10px 24px;
  border-radius: 18px;
  background: #353461;
  border: 3px solid #26253f;
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .5px;
  box-shadow: 0 6px 0 #272741, 0 18px 36px rgba(0,0,0,.22);
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn.cta:hover { transform: translateY(-3px); }
.btn.cta:active { transform: translateY(2px); box-shadow: 0 2px 0 #272741; }

.login-modal-content .btn.cta {
  width: 100%;
  max-width: 100%;	
}

@media (max-width: 768px) {
  .btn.cta {
    min-width: 60%;
    max-width: 100%;
    font-size: 18px;
  }
}


/* ·Î±×ÀÎ ÆгΠ*/
.login-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(380px, 92vw);
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}
.login-title { margin: 0 0 8px; font-weight: 800; letter-spacing: .5px; text-align: left; }
.login-panel .inset p { margin: 8px 0; }
.login-panel input[type="text"], .login-panel input[type="password"] {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,.08);
  padding: 0 12px;
  font-size: 15px;
  outline: none;
  background: rgba(255,255,255,.9);
}
.p-container { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; }
#go {
  width: 120px;
  height: 42px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: #2f6fe0;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 3px 0 #1f50a8, 0 10px 20px rgba(0,0,0,.18);
}
#go.loading { opacity: .7; }
#go.denied { background: #d9534f; box-shadow: 0 3px 0 #9b2d29; }
.button-container { display: flex; gap: 8px; margin-top: 10px; }
.btn.ext {
  padding: 8px 12px;
  margin-top: 5px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  color: #17324a;
  font-weight: 700;
  cursor: pointer;
}

/* ¹ÝÀÀÇü */
@media (max-width: 980px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .topbar { margin-top: 16px; }
  .game-title { font-size: clamp(22px, 7vw, 36px); }
  .menu-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .menu-card { width: min(44vw, 180px); }
  .btn.chip { padding: 9px 14px; }
  .login-panel { position: static; width: calc(100% - 32px); margin: 12px auto; }
}


/* ===== Login Modal ===== */
/* ·Î±×ÀÎ ¸ð´Þ */
.login-modal{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
.login-modal.show{ display:flex; animation: fadeIn .25s ease-out; }

.login-modal-content{
  position:relative;
  width:min(420px, 92vw);
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 3px solid rgba(255,255,255,.7);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  transform: scale(.96);
  animation: popIn .2s ease-out forwards;

  display:flex;
  flex-direction: column;
  align-items: center; 
  gap: 18px;           /* ¿ä¼Ò °£°Ý */
}

/* ŸÀÌƲ */
#litheader{
  margin:0;
  font-weight: 900;
  font-size: clamp(22px, 5vw, 28px);
  text-align:center;
  letter-spacing: 1px;
  color:#ff9f40;
  text-shadow: 0 2px 4px rgba(0,0,0,.2);
}

/* ÀÔ·Ââ */
.login-modal-content .inset{
  width:100%;
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.login-modal-content input[type="text"],
.login-modal-content input[type="password"]{
  width:100%; height:44px;
  border-radius:12px;
  border:2px solid rgba(0,0,0,.1);
  padding:0 12px;
  font-size:15px;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.05);
}

/* CTA ¹öÆ° */
.cta-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top: 4px;
}

/* µð½ºÄÚµå / ³×À̹ö ¹öÆ° */
.button-container{
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap:wrap;
  width:100%;
}
.btn.ext{
  flex:1;
  min-width: 120px;
  padding:10px 12px;
  border-radius:12px;
  background:#fff;
  border:2px solid rgba(0,0,0,.1);
  font-weight:700;
  cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,.12);
  transition: transform .1s ease;
}
.btn.ext:hover{ transform:translateY(-2px); }
.btn.ext span{ font-size:14px; }

/* ´Ý±â ¹öÆ° */
.close-btn{
  position:absolute; top:10px; right:12px;
  width:32px; height:32px;
  border-radius:50%;
  border:0;
  background: rgba(255,255,255,.8);
  color:#17324a;
  font-size:22px;
  line-height:32px;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.close-btn:hover{ background:#fff; }

/* ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{ from{transform:scale(.92); opacity:.0} to{transform:scale(1); opacity:1} }

/* === ¾Û(¸ð¹ÙÀÏ) Áß¾Ó Á¤·Ä °­È­ ÆÐÄ¡ === */

/* 1) ¸ð¹ÙÀÏ ºê¶ó¿ìÀú ÁÖ¼Òâ ³ôÀÌ º¯µ¿ ´ëÀÀ: 100dvh »ç¿ë */
.page-wrap{
  min-height: 100dvh;                 /* ¸ð¹ÙÀÏ¿¡¼­µµ ½ÇÁ¦ ºäÆ÷Æ® ³ôÀÌ ±âÁØ */
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}


@media (max-width: 768px){
  .topbar{
    flex-direction: column;     
    align-items: center;
    text-align: center;
    margin-bottom: 28px;
  }
  .auth{
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 12px;
  }
  .content{
    padding: 0;
  }

}



@media (max-width: 768px){
  .menu-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-auto-rows: auto;
    gap: 24px 20px;                        
    justify-items: center;
    align-items: center;
    width: 100%;
    max-width: 480px;                      
    margin: 0 auto;
  }
  .menu-card{
    flex-direction: column;
    align-items: center;
  }
  .menu-icon{
    width: min(36vw, 140px);             
    aspect-ratio: 1/1;
  }
  .menu-text{
    margin-top: 8px;
    font-size: clamp(14px, 4vw, 18px);
    text-align: center;
  }
}


@media (max-width: 400px){
  .menu-grid{
    grid-template-columns: 1fr;
    max-width: 280px;
    gap: 18px;
  }
  .menu-icon{
    width: min(60vw, 160px);
  }
}


.cta-wrap{
  justify-content: center;
}



/* È£¹ö ½Ã »ì¦ µé¸®´Â ¾Ö´Ï¸ÞÀÌ¼Ç */
.menu-card:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.6),
    inset 0 -2px 8px rgba(0,0,0,.06),
    0 10px 24px rgba(0,0,0,.18);
}

.menu-card::after {
  content: none !important;        /* ¹Ý¦ ½ºÀ¬ ·¹À̾î Á¦°Å */
}
.menu-card:hover::after {
  opacity: 0 !important;
  animation: none !important;
}

.fx-button, .menu-card { animation: none !important; }

/* ¸ð¹ÙÀÏ¿¡¼­ ¹èÁö Å©±â/¿©¹é Æ©´× */
@media (max-width: 768px){
  .menu-text{
    padding: 8px 14px;
    border-radius: 9px;
  }
  .menu-text::before, .menu-text::after{
    width:14px; height:64%;
    left:-10px;
  }
  .menu-text::after{ right:-10px; }
}
/* ===== ¹è°æ ÁÜ ÀÎ/¾Æ¿ô ¾Ö´Ï¸ÞÀÌ¼Ç ===== */
.bg-img{
  transform: scale(1);
  transform-origin: center center;
  will-change: transform;               /* ¼º´É ÃÖÀûÈ­ */
  backface-visibility: hidden;
  animation: bgZoom 18s ease-in-out infinite alternate;
}

/* ¸¸¾à .bg (div ¹è°æ)µµ ¾²´Â ÆäÀÌÁö°¡ ÀÖ´Ù¸é °°ÀÌ Àû¿ë */
.bg{
  animation: bgZoom 18s ease-in-out infinite alternate;
}

@keyframes bgZoom{
  0%   { transform: scale(1); }
  100% { transform: scale(1.12); }      /* È®´ë Á¤µµ(1.08~1.15 »çÀÌ ÃëÇâ´ë·Î) */
}

/* »ç¿ëÀÚ°¡ ¸ð¼Ç ÃÖ¼ÒÈ­ ¼³Á¤ ½Ã ¾Ö´Ï¸ÞÀÌ¼Ç ºñÈ°¼ºÈ­ */
@media (prefers-reduced-motion: reduce){
  .bg-img, .bg { animation: none !important; }
}


/* ¸ð´Þ °¡ÀåÀÚ¸®¿¡ ¿©À¯ °ø°£(¾ÈÀü ¿©¹é) */
.login-modal{
  padding: 16px; /* È­¸é ³¡¿¡ µü ºÙ´Â °É ¹æÁö */
}

/* ¸ð´Þ Ä«µå Æø °è»êÀ» ¾ÈÀüÇÏ°Ô */
.login-modal-content{
  width: 100%;
  max-width: 420px;       /* Á¼Àº È­¸é¿¡¼­µµ ³ÑÄ¡Áö ¾ÊÀ½ */
  padding: 22px 18px;     /* Á¿ì Æеù Á¶±Ý ÁÙ¿©¼­ ¿©À¯ */
  overflow: hidden;       /* ³»ºÎ ¿ä¼Ò°¡ ³ÑÃĵµ ¼û±è */
  box-sizing: border-box; /* Æø °è»ê ¾ÈÁ¤È­ */
}

/* Æû°ú ³»ºÎ ·¡ÆÛ´Â Ä«µå Æø¿¡ ¸ÂÃç 100% */
#accesspanel{
  width: 100%;
  max-width: 100%;
}
.login-modal-content .inset{
  width: 100%;
  max-width: 100%;
}

/* ÀÎDz/üũ¹Ú½º ¶óÀÎ ¿À¹öÇÃ·Î¿ì ¹æÁö */
.login-modal-content .inset p{
  margin: 8px 0;
  width: 100%;
}
.login-modal-content input[type="text"],
.login-modal-content input[type="password"]{
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* CTA ¿µ¿ªµµ 100% Æø¿¡ ¸ÂÃã */
.login-modal-content .cta-wrap{
  width: 100%;
}
.login-modal-content .btn.cta{
  width: 100%;
  max-width: 100%;
}

/* µð½ºÄÚµå/³×À̹ö ¹öÆ°: ÁٹٲÞ/Æø ÃÊ°ú ¹æÁö */
.login-modal-content .button-container{
  width: 100%;
  flex-wrap: wrap;
}
.login-modal-content .btn.ext{
  flex: 1 1 0;      /* ³²´Â Æø ¾È¿¡¼­ ÀûÀýÈ÷ ÁÙ¾îµéµµ·Ï */
  min-width: 120px; /* ³Ê¹« ÀÛ¾ÆÁöÁö ¾Ê°Ô */
  max-width: 100%;
}

/* ¾ÆÁÖ Á¼Àº È­¸é¿¡¼­ ÁÂ¿ì °ø°£ È®º¸ */
@media (max-width: 360px){
  .login-modal{ padding: 12px; }
  .login-modal-content{ padding: 18px 14px; }
}




/* ===== Register Modal ===== */
.register-modal{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  z-index:1000;
  padding:16px;                 /* È­¸é °¡ÀåÀÚ¸® ¾ÈÀü ¿©¹é */
  justify-content:center;
  align-items:center;
}
.register-modal.show{ display:flex; animation: fadeIn .25s ease-out; }

.register-modal-content{
  position:relative;
  width:100%;
  max-width: 560px;             /* ·Î±×Àκ¸´Ù ¾à°£ ³Ð°Ô */
  background: rgb(77 83 97 / 35%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 3px solid rgba(255,255,255,.7);
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  transform: scale(.96);
  animation: popIn .2s ease-out forwards;

  display:flex; flex-direction:column; align-items:center; gap:14px;
  overflow:hidden;               /* ³»ºÎ¿ä¼Ò ³Ñħ ¹æÁö */
  box-sizing:border-box;
}

/* ŸÀÌƲ */
.reg-title{
  margin: 0 0 6px;
  font-weight:900;
  font-size: clamp(22px, 4vw, 28px);
  color:#ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,.2);
  text-align:center;
}

/* ¾È³» */
.register-modal-content .regInfo{
  width:100%;
  background: rgb(77 83 97 / 35%);
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.05);
}
.register-modal-content .regInfo ul{
  margin:0; padding-left:18px;
  font-size: 12px; color:#f3f3ff;
}

/* Çʵå */
#registerPanel{ width:100%; max-width:560px; }
.insert_info{ display:block; margin:10px 0 6px; font-weight:800; text-align:left; }
.req {
  color: #e60000;                /* ÁøÇÑ »¡°­ */
  font-weight: 900;
  text-shadow: 0 0 2px rgba(0,0,0,0.4), 0 0 6px rgba(255,255,255,0.6);
  border: 1px solid rgba(230,0,0,0.6);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 2px;
  background: rgba(255,230,230,0.25); /* »ì¦ ÇÎÅ© ¹è°æ */
}

.field-row{
  display:flex; gap:8px; align-items:center;
}
.sec-label {
  flex: 1 1 auto;
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,.1);
  padding: 0 12px;
  font-size: 15px;
  background: #fff;
  box-sizing: border-box;
}
.btn.mini{
  flex:0 0 auto;
  height:44px; padding:0 14px;
  border-radius:12px;
  background:#fff;
  border:2px solid rgba(0,0,0,.1);
  font-weight:800; cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,.12);
}

/* ÀÎÁõ¿µ¿ª */
#send-mail .field-row{ margin-top:8px; }

/* CTA */
.register-modal-content .cta-wrap{
  width:100%; display:flex; justify-content:center; margin-top: 8px;
}
.register-modal-content .btn.cta{
  width:100%; max-width: 320px;   /* µ¥½ºÅ©Åé¿¡¼­ ³Ê¹« ³ÐÁö ¾Ê°Ô */
}

/* ¸Å¿ì Á¼Àº È­¸é º¸Á¤ */
@media (max-width: 360px){
  .register-modal{ padding:12px; }
  .register-modal-content{ padding:18px 14px; }
}

/* °ø¿ë ¾Ö´Ï¸ÞÀÌ¼Ç Àç»ç¿ë */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{ from{transform:scale(.92); opacity:0} to{transform:scale(1); opacity:1} }

#password,
#confirm_password {
  width: 100%;          /* ¾ÆÀ̵ð input °ú µ¿ÀÏÇÑ Æø */
  display: block;
}


/* ===== ÀÔ·Â Çʵå ÅؽºÆ® Ä÷¯ °íÁ¤(·Î±×ÀÎ/ȸ¿ø°¡ÀÔ ¸ð´Þ °øÅë) ===== */
.login-modal-content input[type="text"],
.login-modal-content input[type="password"],
.register-modal-content input[type="text"],
.register-modal-content input[type="password"],
.register-modal-content input[type="email"]{
  color: #17324a !important;   /* ÁøÇÑ ³²»ö ÅؽºÆ® */
  caret-color: #17324a;        /* Ä¿¼­ »öµµ °¡½Ã¼º À¯Áö */
  background: #fff;            /* ÇÏ¾á ¹è°æ */
}

/* Ç÷¹À̽ºÈ¦´õ »öµµ »ì¦ ÁøÇÏ°Ô */
.login-modal-content input::placeholder,
.register-modal-content input::placeholder{
  color: rgba(23, 50, 74, 0.55);
}

/* WebKit ÀÚµ¿¿Ï¼º(Å©·Ò ³ë¶õ ¹è°æ) »ö»ó º¸Á¤ */
.login-modal-content input:-webkit-autofill,
.register-modal-content input:-webkit-autofill{
  -webkit-text-fill-color: #17324a !important;
  box-shadow: 0 0 0px 1000px #fff inset;   /* ¹è°æ ÇϾç À¯Áö */
  transition: background-color 9999s ease-out 0s; /* ±ôºýÀÓ ¹æÁö */
}

/* ·Î±×ÀÎ ÆгÎ(°íÁ¤Çü UI)À» ¾²´Â °æ¿ìµµ ´ëºñ */
.login-panel input[type="text"],
.login-panel input[type="password"]{
  color: #17324a !important;
  caret-color: #17324a;
  background: #fff;
}

/* ¹öÆ°(¾ÞÄ¿/¹öÆ° °øÅë) */
.fx-button {
  background-color: #404663;
  color: #fff;
  border: 0;
  font-size: clamp(16px, 2.4vw, 20px);
  padding: 0.75em 1.25em;
  border-radius: 0.75em;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .12s ease, filter .2s ease;
  /* µ¿È­Ç³ »ì¦ ¼û½¬±â */
  animation: fxFloat 6s ease-in-out infinite alternate;
}

/* ÆĽºÅÚ ÇÏÀ̶óÀÌÆ®(»ì¦ Áöºê¸® °¨¼º) */
.fx-button::before {
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  /* background:
    radial-gradient(120% 160% at -10% -10%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(120% 160% at 110% 110%, rgba(173, 216, 230, .18), transparent 60%); */
  mix-blend-mode: screen;
}

/* ¹Ý¦ ½ºÀ¬ */
.fx-button::after {
  content: none !important;  
  position:absolute; inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.6) 8%, transparent 16%);
  background-size: 220% 220%;
  background-position: -150% -150%;
  opacity: 0;
  transition: opacity .25s ease;
}

.fx-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 22px rgba(0,0,0,.15),
    0 60px 80px rgba(0,0,0,.08);
}
.fx-button:hover::after {
  opacity: 0 !important;
  animation: none !important;
}
.fx-button:active { transform: translateY(0) scale(0.995); }

@keyframes fxFloat { 0% { transform: translateY(0) } 100% { transform: translateY(-4px) } }
@keyframes fxShine {
  0% { background-position: -150% -150% }
  100% { background-position:  160%  160% }
}




.btn-3d {
  position: relative;
  display: inline-block;
  /* font-size: 22px; */
  /* padding: 20px 60px; */
  font-size: 16px;
  font-weight: bold;
  width: 150px;
  color: white;
  margin: 20px 10px 10px;
  border-radius: 6px;
  text-align: center;
  transition: top .01s linear;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

.btn-3d:active {
  top: 9px;
}
.btn-3d.red:hover    {background-color: #e74c3c;}
.btn-3d.blue:hover   {background-color: #699DD1;}
.btn-3d.green:hover  {background-color: #80C49D;}
.btn-3d.purple:hover {background-color: #D19ECB;}
.btn-3d.yellow:hover {background-color: #F0D264;}
.btn-3d.cyan:hover   {background-color: #82D1E3;}

.btn-3d:active {
  top: 9px;
}

/* 3D button colors */
.btn-3d.red {
  background-color: #e74c3c;
  box-shadow: 0 0 0 1px #c63702 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 #C24032,
        0 8px 0 1px rgba(0,0,0,0.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.red:active {
  box-shadow: 0 0 0 1px #c63702 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.blue {
  background-color: #6DA2D9;
  box-shadow: 0 0 0 1px #6698cb inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(110, 164, 219, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.blue:active {
  box-shadow: 0 0 0 1px #6191C2 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.green {
  background-color: #82c8a0;
  box-shadow: 0 0 0 1px #82c8a0 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(126, 194, 155, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.green:active {
  box-shadow: 0 0 0 1px #82c8a0 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.purple {
  background-color: #cb99c5;
  box-shadow: 0 0 0 1px #cb99c5 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(189, 142, 183, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.purple:active {
  box-shadow: 0 0 0 1px #cb99c5 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.cyan {
  background-color: #7fccde;
  box-shadow: 0 0 0 1px #7fccde inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(102, 164, 178, .6),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.cyan:active {
  box-shadow: 0 0 0 1px #7fccde inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.yellow {
  background-color: #F0D264;
  box-shadow: 0 0 0 1px #F0D264 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(196, 172, 83, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.yellow:active {
  box-shadow: 0 0 0 1px #F0D264 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}


:root {
  --rb-primary-1: #9bb0ff;   /* ±Û·Î¿ì ÇÏÀ̶óÀÌÆ® */
  --rb-primary-2: #6d8cff;   /* ¹öÆ°/¿§Áö */
  --rb-ink:       #eaf0ff;
}


/* ½ÇÁ¦ ¹è°æ À̹ÌÁö */
body.rebirth::before {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(99,102,241,0.25), transparent 60%),
    radial-gradient(45% 45% at 100% 100%, rgba(14,165,233,0.20), transparent 60%),
    radial-gradient(35% 35% at 0% 100%, rgba(236,72,153,0.18), transparent 60%);
  filter: saturate(1.05) contrast(1.02);
}

body.rebirth::after {
  background:
    linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,.55)),
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:
    auto,
    80px 80px, 80px 80px;
  pointer-events: none;
}

.topbar{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(14px, 2.5vw, 24px) clamp(16px, 3vw, 32px);
  display:flex; align-items:center; justify-content:space-between;
}

.brand-wrap{ position: relative; display:flex; align-items:center; }

.game-title{
  position: relative;
  margin: 0;
  line-height: 1;
  letter-spacing: .02em;
}
.game-title span{
  display:inline-block;
  font-weight: 800;
  font-size: clamp(36px, 7vw, 84px);
  background: linear-gradient(180deg, #ffffff 0%, #dfe8ff 55%, #bcd0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 20px rgba(120,140,255,.45));
}

.game-title::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  translate:-50% -50%;
  width: clamp(220px, 36vw, 560px);
  height: clamp(80px, 14vw, 240px);
  background:
    radial-gradient(closest-side, rgba(160,178,255,.55), transparent 70%);
  filter: blur(2px);
  z-index: -1;
  opacity: .9;
}

.btn.chip{
  background: linear-gradient(135deg, #6d8cff, #8b5cf6);
  color:#fff; border:none;
  padding: .6rem 1.2rem;
  border-radius: 9999px;
  font-weight:700; font-size:.9rem;
  transition:.25s ease;
  box-shadow: 0 6px 18px rgba(109,140,255,.25);
}
.btn.chip:hover{ transform: translateY(-2px); box-shadow:0 10px 26px rgba(109,140,255,.35); }
.btn.chip:active{ transform: translateY(0); }

.menu-grid{
  max-width: 1100px;
  margin: clamp(12px, 3vw, 28px) auto 48px;
  padding: 0 clamp(12px, 2.4vw, 24px);
  display:grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
}
.menu-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 22px 16px;
  border-radius: 20px;
  text-decoration:none; color:#fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  transition: .25s ease;
  position: relative; overflow:hidden;
}
.menu-card::after{
  /* »ó´Ü ¶óÀÌÆ® ½ºÀ¬ */
  content:""; position:absolute; inset:auto -40% 0 auto; top:-60%;
  width:140%; height: 120%;
  background: radial-gradient(60% 40% at 50% 0%, rgba(160,178,255,.18), transparent 70%);
  transform: translateY(40px);
  transition: .35s ease;
  opacity:.0;
}
.menu-card:hover{
  transform: translateY(-6px);
  border-color: rgba(160,178,255,.45);
  box-shadow: 0 14px 36px rgba(109,140,255,.24);
}
.menu-card:hover::after{ opacity:.7; transform: translateY(0); }

.menu-icon{
  width: 54px; height: 54px; object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(210,220,255,.35));
}
.menu-text{ font-weight:700; letter-spacing:.2px; }

/* ===== ·Î±×ÀÎ ¸ð´Þ(»ö°¨¸¸ ÅëÀÏ) ===== */
.login-modal.show .login-modal-content{
  background: rgba(8,11,22,.85);
  border:1px solid rgba(160,178,255,.28);
  backdrop-filter: blur(12px);
}
#litheader{
  color:#fff;
  text-shadow: 0 4px 32px rgba(109,140,255,.45);
}

/* ¹ÝÀÀÇü */
@media (max-width: 640px){
  .btn.chip{ padding:.5rem 1rem; font-size:.85rem; }
  .menu-icon{ width:48px; height:48px; }
}


/* ===== Áß¾Ó Á¤·Ä ÄÁÅ×ÀÌ³Ê ===== */
.center-container {
  min-height: 100vh;
  align-items: center;     /* ¼öÆò °¡¿îµ¥ */
  text-align: center;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

/* ===== Topbar °¡¿îµ¥ Á¤·Ä ===== */
.topbar {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

/* ŸÀÌƲ */
.game-title span {
  font-size: clamp(40px, 10vw, 88px);
}

/* ¹öÆ° ±×·ì */
.auth {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

/* ¹öÆ° Å©±â - ¾Û ¹ÝÀÀÇü */
.btn.chip {
  font-size: clamp(0.85rem, 3.5vw, 1rem);
  padding: 0.6rem 1.4rem;
}

/* ===== ¸Þ´º ±×¸®µå ===== */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  max-width: 800px;
  width: 100%;
  margin-top: 2rem;
}

.menu-card {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1rem;
}

.menu-icon {
  width: clamp(100px, 8vw, 60px);
  height: clamp(100px, 8vw, 60px);
  opacity: 90%;
}

/* ===== ¹ÝÀÀÇü (¸ð¹ÙÀÏ ±âÁØ) ===== */
@media (max-width: 640px) {
  .auth {
    flex-direction: column;
    gap: 0.6rem;
  }
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Brand Divider ===== */
.brand-divider{
  margin: 6px 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}
.brand-divider::before,
.brand-divider::after{
  content:"";
  height:1px;
  width:clamp(48px, 22vw, 140px);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  filter: drop-shadow(0 0 8px rgba(96,165,250,.45));
}
.brand-divider::before{ margin-right: 4px; }
.brand-divider::after{ margin-left: 4px; }

.brand-text{
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: clamp(16px, 3.2vw, 18px);
  line-height: 1;
  /* ¹Ý¦ÀÌ´Â ±×¶óµ¥ÀÌ¼Ç ÅؽºÆ® */
  background: linear-gradient(90deg, #e0f2fe, #a5b4fc, #60a5fa, #7dd3fc);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: .6px rgba(255,255,255,.20);
  animation: brand-sheen 6s linear infinite;
  text-shadow: 0 0 24px rgba(96,165,250,.20);
}
.sparkle{
  font-size: 20px;
  translate: 0 -1px;
  opacity: .9;
  filter: drop-shadow(0 0 6px rgba(125,211,252,.6));
  animation: sparkle-pulse 2.4s ease-in-out infinite;
}
.sparkle::before{
  content: "\2726";                
  display: inline-block;
  margin-left: .3rem;           
  opacity: .9;
  filter: drop-shadow(0 0 10px rgba(122,162,255,.6));
  animation: twinkle 2.2s ease-in-out infinite;
  line-height: 1;
  color: #7aa2ff;
  font-size: 0.95em;
}

/* ¹Ý¦ÀÌ ¾Ö´Ï¸ÞÀÌ¼Ç (p::before¿Í µ¿ÀÏÇÏ°Ô »ç¿ë °¡´É) */
@keyframes twinkle {
  0%, 100% { transform: scale(1);   opacity: .9; }
  50%      { transform: scale(1.2); opacity: 1;  }
}

@keyframes brand-sheen{
  to{ background-position: -200% 0; }
}
@keyframes sparkle-pulse{
  0%,100%{ transform: scale(1); opacity:.85; }
  50%{ transform: scale(1.2); opacity:1; }
}

/* Á¢±Ù¼º/¼º´É ¿É¼Ç */
@media (prefers-reduced-motion: reduce){
  .brand-text, .sparkle{ animation: none; }
}



/* ===== Register: Existing User (±âÁ¸ À¯Àú) ===== */

/* üũ¹Ú½º ¶óÀÎ */
.existing-user-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin: 6px 0 10px;
  padding: 10px 12px;
  background: rgb(77 83 97 / 28%);
  border: 2px solid rgba(255,255,255,.65);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.05);
  box-sizing: border-box;
}
.existing-user-row .insert_info{
  margin:0;
  font-weight:800;
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
}
.existing-user-row input[type="checkbox"]{
  appearance: none;
  width:18px; height:18px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 4px;
  background: rgba(255,255,255,.12);
  display:inline-block;
  position:relative;
  cursor:pointer;
  transition: all .15s ease;
}
.existing-user-row input[type="checkbox"]:checked{
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.75));
  border-color: rgba(255,255,255,1);
  box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}
.existing-user-row input[type="checkbox"]:checked::after{
  content:"";
  position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10.5l3.5 3.5L15 7.5' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

/* ÀΰÔÀÓ °èÁ¤ È®ÀÎ ¹Ú½º */
.existing-user-box{
  width:100%;
  margin-top: 6px;
  background: rgb(77 83 97 / 35%);
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 12px;
  padding: 12px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.existing-user-box .insert_info{
  margin: 0 0 8px;
  font-weight:800;
  color:#fff;
}

/* Çʵå ÁÙ (Register ½ºÅ¸ÀÏ°ú ÅëÀÏ) */
.field-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.sec-label{
  flex:1;
  min-width: 0; /* ÀÛÀº È­¸é¿¡¼­ ÁÙ¹Ù²Þ ¾ÈÁ¤¼º */
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.08);
  color:#fff;
  outline:none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.sec-label::placeholder{ color: rgba(255,255,255,.7); }
.sec-label:focus{
  border-color: #ffffff;
  background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}

/* ¹öÆ°: mini / cta / ext Åæ ¸ÂÃã */
.btn.mini{
  flex:0 0 auto;
  padding: 10px 12px;
  font-weight:800;
  font-size: 13px;
  letter-spacing:.2px;
  color:#1a1a1a;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.8));
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 10px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.btn.mini:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  filter: brightness(1.03);
}
.btn.mini:active{
  transform: translateY(0);
  box-shadow: 0 5px 16px rgba(0,0,0,.15);
}

.existing-user-box .cta-wrap{
  display:flex;
  justify-content:flex-end;
  margin-top: 2px;
}

/* ¾È³» ÈùÆ® ¹®±¸ */
.existing-user-box .hint{
  margin: 8px 2px 0;
  font-size: 12px;
  color:#f0f2ff;
  opacity:.9;
}

/* ¿¡·¯¸Þ½ÃÁö Åæ(ÀÌ¹Ì »ç¿ë ÁßÀÎ .error-message¿Í Á¶È­) */
.error-message{
  margin-top:6px;
  font-size:12px;
  color:#ffe3e3;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}

/* ¹ÝÀÀÇü ´Ùµë±â */
@media (max-width: 420px){
  .field-row{ flex-direction:column; align-items:stretch; gap:8px; }
  .btn.mini{ width:100%; text-align:center; }
}

/* ¹Ì¼¼ÇÑ µîÀå ¾Ö´Ï¸ÞÀÌ¼Ç (¸ð´Þ°ú ÀÚ¿¬½º·´°Ô) */
.existing-user-box{
  opacity:0; transform: translateY(4px);
  animation: exBoxIn .18s ease-out forwards;
}
@keyframes exBoxIn{
  to{ opacity:1; transform: translateY(0); }
}



.rb-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.rb-modal[aria-hidden="false"] { display: block; }

.rb-backdrop {
  position: absolute; inset: 0;
  background: rgba(5,10,20,.55);
  backdrop-filter: blur(4px);
}

.rb-dialog {
  position: relative;
  max-width: 540px; width: calc(100% - 32px);
  margin: 8vh auto 0; padding: 20px 20px 24px;
  background: rgba(20,24,36,.78);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; color:#e8eefc;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: rb-pop .14s ease-out;
}
@keyframes rb-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

.rb-title { margin: 0 0 14px; font-weight: 700; letter-spacing: .4px; }
.rb-close { position:absolute; top:10px; right:12px; width:34px; height:34px; border:0; border-radius:10px; background:rgba(255,255,255,.08); color:#fff; font-size:22px; cursor:pointer; }
.rb-close:hover { background: rgba(255,255,255,.16); }

.rb-actions { display:grid; gap:10px; grid-template-columns: 1fr; margin-top:8px; }
@media (min-width:520px){ .rb-actions{ grid-template-columns:1fr 1fr 1fr; } }

.searchBtn {
  display:inline-block; width:100%; padding:12px 10px;
  border:1px solid rgba(255,255,255,.14); border-radius:14px;
  background: rgba(255,255,255,.06); color:#eaf2ff; font-weight:700;
  cursor:pointer; letter-spacing:.2px; backdrop-filter: blur(2px);
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.searchBtn:hover { transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); }


/* Æ÷Ä¿½º °¡½Ã¼º */
.searchBtn:focus-visible {
  outline: 2px solid rgba(120,170,255,.9);
  outline-offset: 2px;
}

/* È°¼ºÈ­ »óÅ */
.searchBtn.is-active,
.searchBtn[aria-pressed="true"] {
  background: rgba(120,170,255,.18);
  border-color: rgba(120,170,255,.65);
  box-shadow:
    0 2px 10px rgba(120,170,255,.25),
    inset 0 0 0 1px rgba(255,255,255,.15);
  transform: translateY(-1px);
}

/* È°¼ºÈ­ »óÅ¿¡¼­ »ì¦ ´õ ´­¸®´Â ´À³¦ */
.searchBtn.is-active:active,
.searchBtn[aria-pressed="true"]:active {
  transform: translateY(0);
}


/* ±âº» ¹öÆ° */
.searchBtn{
  display:inline-block;width:100%;padding:12px 10px;
  border:1px solid rgba(255,255,255,.14);border-radius:14px;
  background:rgba(255,255,255,.06);color:#eaf2ff;font-weight:700;
  cursor:pointer;letter-spacing:.2px;backdrop-filter:blur(2px);
  transition:transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.searchBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);}

/* È°¼ºÈ­ »óÅÂ(Ŭ·¡½º/ARIA µÑ ´Ù ´ëÀÀ) */
.searchBtn.is-active,
.searchBtn[aria-pressed="true"]{
  background:rgba(120,170,255,.18) !important;
  border-color:rgba(120,170,255,.65) !important;
  box-shadow:0 2px 10px rgba(120,170,255,.25), inset 0 0 0 1px rgba(255,255,255,.15) !important;
  transform:translateY(-1px);
}

/* Æ÷Ä¿½º °¡½Ã¼º */
.searchBtn:focus-visible{outline:2px solid rgba(120,170,255,.9);outline-offset:2px;}




.fx-modal[aria-hidden="true"] { display:none; }
.fx-modal[aria-hidden="false"] { display:block; }
.fx-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
}
.fx-dialog{
  position:fixed; left:50%; top:50%;
  transform:translate(-50%, -50%);
  min-width:280px; max-width:90vw;
  background:#111827; color:#e5e7eb;
  border-radius:14px; padding:22px 20px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  text-align:center;
}
.fx-title{ margin:0 0 8px; font-size:18px; }
.fx-message{ margin:0 0 16px; font-size:15px; }
.fx-close{
  padding:8px 14px; border:0; border-radius:10px;
  background:#374151; color:#fff; cursor:pointer;
}
.fx-close:hover{ background:#4b5563; }


.rb-modal{position:fixed; inset:0; z-index:9999;}
.rb-modal__overlay{position:absolute; inset:0; background:rgba(0,0,0,.45);}
.rb-modal__panel{
  position:relative; max-width:520px; width:92%;
  margin:60px auto; background:#fff; border-radius:14px;
  border:1px solid #e7e9f2; box-shadow:0 20px 60px rgba(18,25,56,.18);
  padding:20px 18px;
}
.rb-modal__title{margin:0 0 6px; font-size:18px; font-weight:900; color: darkblue;}
.rb-modal__desc{margin:0 0 14px; color:#6c7591;}
.rb-modal__close{
  position:absolute; top:8px; right:10px;
  width:32px; height:32px; border-radius:50%;
  border:1px solid #e7e9f2; background:#fff; cursor:pointer; font-size:18px;
}
.rb-dl__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.rb-dl__item{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid #e7e9f2; border-radius:12px; padding:12px 12px; background:#fafbff;
}
.rb-dl__meta{display:flex; align-items:center; gap:10px;}
.rb-dl__icon{width:28px; height:28px; border-radius:6px; background:#eef2ff; width: 100px; display:inline-flex; align-items:center; justify-content:center; font-weight:900; color:#2e6bff;}
.rb-dl__name{font-weight:800; color: black;}
.rb-dl__btn{
  appearance:none; border:1px solid #2e6bff; background:#2e6bff; color:#fff;
  border-radius:999px; padding:8px 12px; font-weight:900; cursor:pointer;
}
.rb-dl__link {text-decoration: none; font-size: 14px; color: black;}
.rb-dl__btn:hover{filter:brightness(1.03);}
@media (max-width:560px){ .rb-modal__panel{margin:30px auto;} }

.rb-modal__panel {
  max-width: 640px;    /* ÇÊ¿ä½Ã 520~720px »çÀÌ·Î Á¶Àý */
  width: 92vw;
  max-height: 85vh;
  overflow: hidden;     /* ³»ºÎ ½ºÅ©·Ñ·Î ó¸® */
}

/* ¸®½ºÆ®¿¡ ¼¼·Î ½ºÅ©·Ñ Çã¿ë (Ç׸ñ ¸¹À» ¶§) */
#rb-download-list.rb-dl__list {
  max-height: 60vh;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ÇÑ ÁÙ ¾ÆÀÌÅÛ */
.rb-dl__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  margin-bottom: 8px;
}

/* ¿ÞÂÊ ¶óº§(¾ÆÀÌÄÜ ÅؽºÆ®) */
.rb-dl__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  height: 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  color: #111;
  background: #70f5ff;         /* ÇÊ¿äÇÏ¸é ¶óº§º° »ö»ó ºÐ±â */
  box-shadow: 0 0 8px rgba(112,245,255,.45);
}

/* ÅؽºÆ®/¸µÅ© ¹­À½: ¼öÃà °¡´ÉÇϵµ·Ï min-width:0 */
.rb-dl__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0; /* ¡Ú ¾ÆÁÖ Áß¿ä: ÁٹٲÞ/¼öÃà Çã¿ë */
}

/* ¸µÅ©: ±âº»Àº ÇÑ ÁÙ + ¸»ÁÙÀÓ */
.rb-dl__link {
  flex: 1 1 auto;
  min-width: 0;               /* ¡Ú Ç÷º½º ¾ÆÀÌÅÛÀÌ ÁÙ¾îµé ¼ö ÀÖ°Ô */
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;    /* ¡¦ À¸·Î À߶ó Ç¥½Ã */
  color: #bde6ff;
  text-decoration: none;
}
.rb-dl__link:hover,
.rb-dl__link:focus {
  text-decoration: underline;
  outline: none;
}


/* ¼­¹ö ÃÑ °ñµå ÇöȲ ¹îÁö */
.rb-server-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:8px auto 0;
  padding:8px 14px;
  width:fit-content;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.06);
}

.rb-stat-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:50%;
  font-weight:700;
  font-size:12px;
  color:#1a1a1a;
  background: radial-gradient(circle at 30% 30%, #ffe066, #f5b700 70%, #a87400 100%);
  box-shadow: 0 0 10px rgba(255,208,0,0.8), inset 0 2px 4px rgba(255,255,255,0.6);
}

.rb-stat-label{
  color:#e9e9ee;
  letter-spacing:.02em;
  font-weight:600;
  opacity:.9;
}

.rb-stat-sep{
  color:#aaa;
  opacity:.7;
}

.rb-stat-value{
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  text-shadow:
    0 0 6px rgba(255,235,59,.8),
    0 0 14px rgba(255,193,7,.7);
}

/* ¹ÝÀÀÇü */
@media (max-width: 640px){
  .rb-server-stats{ gap:8px; padding:7px 12px; }
  .rb-stat-label, .rb-stat-value{ font-size:13px; }
  .rb-stat-chip{ width:20px; height:20px; font-size:11px; }
}
/* ÄÁÅ×À̳Ê: °ñµå/»óÅ ÁÙÀ» ÇÑ ÁÙ ¶Ç´Â ÁٹٲÞÀ¸·Î ¹èÄ¡ */
.rb-server-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .75rem;
  align-items:center;
  margin-top:.5rem;          /* ŸÀÌƲ°ú °£°Ý */
}

/* °øÅë ¹Ú½º */
.rb-server-stats{
  display:flex; align-items:center; gap:.45rem;
  padding:.35rem .6rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  font-weight:600;
  line-height:1;
}

.rb-server-stats--net{ gap:.5rem; }

.rb-stat-label{ opacity:.9; }
.rb-stat-sep{ opacity:.5; }
.rb-stat-value{ letter-spacing:.2px; }
.rb-stat-divider{ opacity:.35; margin:0 .25rem; }

/* »óÅ Á¡/ÅؽºÆ® »ö */
.rb-state-dot{
  width:10px; height:10px; border-radius:50%;
  box-shadow:0 0 10px currentColor, 0 0 2px currentColor inset;
}
.rb-state-dot.on{ color:#28ff86; }   /* ÃÊ·Ï */
.rb-state-dot.off{ color:#ff5964; }  /* ºÓÀºÅæ */

.text-on{ color:#28ff86; }
.text-off{ color:#ff5964; }

/* ¹ÝÀÀÇü °£°Ý »ì¦ Á¶Á¤ */
@media (max-width: 640px){
  .rb-server-stats{ padding:.32rem .5rem; border-radius:10px; }
  .rb-stat-chip{ width:20px; height:20px; font-size:11px; }
}


/* ±×¸®µå ·¹À̾ƿô: µÎ ¹Ú½º ³ª¶õÈ÷ (ÀÛ¾ÆÁö¸é ÀÚµ¿ ÁٹٲÞ) */
.rb-server-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap:.75rem;
  margin-top:.6rem;
}

@media (max-width: 640px){
  .rb-server-grid{
    grid-template-columns: 1fr;
  }
}

/* Ä«µå °øÅë */
.rb-server-card{
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  overflow:hidden;
}

/* Ä«µå Çì´õ */
.rb-card-head{
  display:flex; align-items:center;
  padding:.55rem .75rem;
  background:linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-bottom:1px solid rgba(255,255,255,.12);
}
.rb-card-title{
  font-weight:700;
  letter-spacing:.2px;
}

/* Ä«µå ¹Ùµð */
.rb-card-body{
  display:flex; align-items:center; gap:.5rem;
  padding:.7rem .8rem .85rem;
}

/* »óÅ ǥ½Ã */
.rb-state-dot{
  width:10px; height:10px; border-radius:50%;
  box-shadow:0 0 10px currentColor, 0 0 2px currentColor inset;
}
.rb-state-dot.on{ color:#28ff86; }   /* ÃÊ·Ï(ON) */
.rb-state-dot.off{ color:#ff5964; }  /* ·¹µå(OFF) */

.rb-state-text{ font-weight:700; }
.text-on{ color:#28ff86; }
.text-off{ color:#ff5964; }

/* Á¢¼ÓÀÚ ¼ö Ĩ */
.rb-count-chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:28px; padding:0 .6rem;
  border-radius:10px;
  background:#00ffc6; color:#111;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 0 12px rgba(0,255,198,.35);
}


/* Ä«µå Çì´õ Áß¾Ó Á¤·Ä */
.rb-card-head{
  justify-content: center;     /* °¡¿îµ¥ Á¤·Ä */
  text-align: center;          /* ÅؽºÆ®µµ °¡¿îµ¥ */
}

/* Ä«µå ¹Ùµð Áß¾Ó Á¤·Ä */
.rb-card-body{
  justify-content: center;     /* °¡·Î °¡¿îµ¥ */
  align-items: center;         /* ¼¼·Î °¡¿îµ¥ */
  text-align: center;          /* ³»ºÎ ÅؽºÆ® Áß¾Ó */
  flex-direction: column;      /* ¾ÆÀÌÄÜ/ÅؽºÆ® ¼¼·Î·Î Á¤·Ä(¿øÇϸé À¯Áö) */
  gap: .5rem;                  /* ¿ä¼Ò °£°Ý */
}

/* »óÅÂĨ/ÅؽºÆ®°¡ ÇÑ ÁÙ·Î ³ª¶õÈ÷ ÇÊ¿äÇϸé À§ÀÇ flex-direction¸¸ ÁÖ¼®Ã³¸®Çϰųª ¾Æ·¡·Î ¹Ù²ãÁà */
/* .rb-card-body{ flex-direction: row; } */










/* ====== FOOD Modal (km-*) ====== */
.km-modal[aria-hidden="true"] { display:none; }
.km-modal[aria-hidden="false"] { display:block; }

.km-modal__dim{
  position:fixed; inset:0;
  background:rgba(2,4,10,.72);
  backdrop-filter: blur(2px);
  z-index:1000;
}
.km-modal__panel{
  position:fixed; inset:auto 0 0 0; 
  margin:auto; top:6vh; 
  width:min(96vw,1080px);
  border-radius:16px;
  background:
    radial-gradient(1200px 600px at 10% -20%, rgba(0,255,255,.05), transparent 60%),
    radial-gradient(1000px 800px at 110% 0%, rgba(255,0,200,.05), transparent 60%),
    linear-gradient(180deg, #090d19 0%, #0a1022 60%, #0a0f1e 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 40px 120px rgba(0,0,0,.65),
    0 0 0 1px rgba(103,250,255,.06) inset;
  color:#eaf6ff;
  z-index:1001;
  overflow:hidden;
}

/* Header */
.km-modal__header{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.km-modal__title{
  font-family: 'Pretendard', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight:800; letter-spacing:.3px; margin:0;
  color:#eaffff; text-shadow:0 0 6px rgba(103,250,255,.45);
}
.km-modal__header::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg, #67faff, transparent 40%, #ff67f3 60%, transparent);
  opacity:.8; filter:blur(.6px);
}
.km-modal__close{
  width:36px; height:36px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:#eaf6ff; font-size:22px; line-height:1;
  cursor:pointer;
}
.km-modal__close:hover{
  border-color:rgba(255,255,255,.24);
  box-shadow:0 0 14px rgba(103,250,255,.25);
}

/* Body */
.km-modal__body{ padding:16px 16px 12px; }

/* Searchbar */
.km-searchbar{
  display:flex; gap:10px; align-items:center; margin:4px 0 12px;
}
.km-input{
  flex:1; height:40px; padding:0 12px; border-radius:10px;
  background:rgba(255,255,255,.06); color:#eaf6ff;
  border:1px solid rgba(255,255,255,.12);
  outline:none;
}
.km-input::placeholder{ color:#9ec7ff; opacity:.65; }
.km-input:focus{
  border-color:rgba(103,250,255,.45);
  box-shadow:0 0 0 3px rgba(103,250,255,.15), 0 0 18px rgba(103,250,255,.2);
}
.km-btn{
  height:40px; padding:0 14px; border-radius:10px;
  background:rgba(255,255,255,.06); color:#eaf6ff;
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer; font-weight:700;
}
.km-btn:hover{
  border-color:rgba(255,255,255,.28);
  box-shadow:0 0 14px rgba(103,250,255,.25);
}
.km-btn--primary{
  background:linear-gradient(135deg, rgba(103,250,255,.18), rgba(255,103,243,.18));
  border-color:rgba(103,250,255,.5);
}

/* Layout */
.km-layout{
  display:grid; grid-template-columns: 380px 1fr; gap:12px; min-height:520px;
}
@media (max-width: 980px){
  .km-layout{ grid-template-columns:1fr; }
}

/* Cards */
.km-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:10px; overflow:auto;
  box-shadow:0 8px 30px rgba(0,0,0,.45) inset;
}
.km-card--map{ padding:0; overflow:hidden; }
.km-map{ width:100%; height:100%; min-height:520px; }

/* List */
.km-list{ list-style:none; padding:0; margin:0; }
.km-list__item{ margin-bottom:8px; }
.km-list__btn{
  width:100%; text-align:left;
  display:flex; flex-direction:column; gap:6px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  color:#f7fbff; border-radius:12px; padding:10px 12px; cursor:pointer;
}
.km-list__btn:hover{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 0 12px rgba(103,250,255,.25);
}
.km-list__title{
  font-weight:800; letter-spacing:.2px; color:#eaffff;
  text-shadow:0 0 6px rgba(103,250,255,.35);
}
.km-list__meta{
  font-size:12px; color:#b9d8ff; opacity:.9;
}
.km-hint{
  margin-top:4px; font-size:12px; color:#a8c7ff;
}

/* Footer */
.km-modal__footer{
  display:flex; justify-content:flex-end; gap:8px; padding:12px 16px 16px;
  border-top:1px solid rgba(255,255,255,.08);
}

/* ³×¿Â ±Û·Î¿ì À¯Æ¿ */
.km-glow-cyan{ text-shadow:0 0 10px rgba(103,250,255,.55); color:#eaffff; }
.km-glow-pink{ text-shadow:0 0 10px rgba(255,103,243,.55); color:#fff0ff; }



/* =========================
   Compact mode (smaller UI)
   ========================= */
.km-compact .km-modal__panel{
  top: 8vh;
  width: min(92vw, 880px);            /* 1080 ¡æ 880 */
  border-radius: 12px;
}

.km-compact .km-modal__header{ padding: 10px 14px; }
.km-compact .km-modal__title{
  font-size: 18px;                    /* Á¦¸ñ »ì¦ Ãà¼Ò */
  text-shadow: 0 0 5px rgba(103,250,255,.4);
}
.km-compact .km-modal__close{
  width: 32px; height: 32px; font-size: 18px; border-radius: 8px;
}

.km-compact .km-modal__body{ padding: 12px 14px; }

.km-compact .km-searchbar{ gap: 8px; margin: 2px 0 8px; }
.km-compact .km-input{
  height: 36px;                       /* 40 ¡æ 36 */
  border-radius: 8px;
  padding: 0 10px;
  font-size: 14px;
}
.km-compact .km-btn{
  height: 36px;                       /* 40 ¡æ 36 */
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.km-compact .km-layout{
  grid-template-columns: 320px 1fr;   /* 380 ¡æ 320 */
  gap: 10px;
  min-height: 420px;                  /* 520 ¡æ 420 */
}
@media (max-width: 980px){
  .km-compact .km-layout{ grid-template-columns: 1fr; }
}

.km-compact .km-card{ border-radius: 10px; padding: 8px; }
.km-compact .km-card--map{ padding: 0; }
.km-compact .km-map{
  min-height: 420px;                  /* 520 ¡æ 420 */
}

.km-compact .km-list__btn{
  padding: 8px 10px;                  /* 10 12 ¡æ 8 10 */
  border-radius: 10px;
}
.km-compact .km-list__title{ font-size: 14px; }
.km-compact .km-list__meta,
.km-compact .km-hint,
.km-compact .km-note{
  font-size: 12px;
}

.km-compact .km-modal__footer{ padding: 10px 14px 12px; }


/* =========================
   Vertical fit (km-fitvh)
   - ÆгΠ³ôÀ̸¦ ºäÆ÷Æ®¿¡ ¸ÂÃã
   - ³»ºÎ ÄÁÅÙÃ÷´Â ½ºÅ©·Ñ
   ========================= */
.km-fitvh .km-modal__panel{
  /* ¸ð¹ÙÀÏ Å°º¸µå/³ëÄ¡ ´ëÀÀ safe-area °í·Á */
  margin: 0 auto;
  top: max(10vh, env(safe-area-inset-top));
  bottom: auto;
  width: min(92vw, 880px);
  max-height: 86vh;             /* ÆгΠ³ôÀÌ »óÇÑ */
  display: flex;                 /* Çì´õ/¹Ùµð/ǪÅÍ ¼¼·Î ¹èÄ¡ */
  flex-direction: column;
}

.km-fitvh .km-modal__header{ flex: 0 0 auto; }
.km-fitvh .km-modal__footer{ flex: 0 0 auto; }

/* ¹Ùµð´Â ³²´Â ³ôÀ̸¦ Â÷ÁöÇÏ°í, ³»ºÎ ½ºÅ©·Ñ */
.km-fitvh .km-modal__body{
  flex: 1 1 auto;
  min-height: 0;                /* grid/overflow µ¿ÀÛ¿¡ Áß¿ä */
  overflow: auto;               /* ¼¼·Î ½ºÅ©·Ñ */
  padding: 12px 14px;
}

/* ·¹À̾ƿô ³ôÀÌ °­Á¦°ª Á¦°Å ¡æ ¹Ùµð ³ôÀÌ¿¡ ¸ÂÃç ÁÙ¾îµê */
.km-fitvh .km-layout{
  min-height: unset;
  gap: 10px;
}

/* Áöµµ ³ôÀ̸¦ ºäÆ÷Æ® ±â¹ÝÀ¸·Î À¯µ¿ Á¶Àý (©¸² ¹æÁö) */
.km-fitvh .km-map{
  height: clamp(260px, 46vh, 520px);
  min-height: 0;               /* ºÎ¸ð ½ºÅ©·Ñ°ú Ãæµ¹ ¹æÁö */
}

/* ÁÂÃø ¸®½ºÆ® Ä«µåµµ ¹Ùµð ³ôÀÌ ³»¿¡¼­ ½ºÅ©·Ñ °¡´É */
.km-fitvh .km-card{
  max-height: 460px;
  overflow: auto;
}

/* Á¼Àº È­¸é¿¡¼± ´ÜÀÏ Ä÷³ + Áöµµ/¸®½ºÆ® ³ôÀÌ Ãà¼Ò */
@media (max-width: 980px){
  .km-fitvh .km-layout{ grid-template-columns: 1fr; }
  .km-fitvh .km-map{ height: clamp(220px, 40vh, 420px); }
}



/* ===== Kakao InfoWindow content (km-iw *) ===== */
.km-iw{ font-family: 'Pretendard', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.km-iw__title{
  margin:0 0 4px; font-size:14px; font-weight:800;
  color:#1e293b;              /* ¾îµÎ¿î ³²È¸»ö */
  letter-spacing:.2px;
}
.km-iw__addr{
  margin:0 0 10px; font-size:12px; line-height:1.45;
  color:#475569;              /* ´õ ¾îµÎ¿î ÁÖ¼Ò */
}
.km-iw__actions{ display:flex; gap:6px; flex-wrap:wrap; }
.km-iw__btn{
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 12px; border-radius:999px;
  font-size:12px; font-weight:700; text-decoration:none;
  border:1px solid rgba(15,23,42,.12);
  background:#f8fafc;         /* ¾ÆÁÖ ¿¶Àº ±×·¹ÀÌ */
  color:#0f172a;              /* ´ÙÅ© ÅؽºÆ® */
  transition: box-shadow .18s ease, transform .06s ease, background .18s ease;
}
.km-iw__btn:hover{
  box-shadow:0 4px 14px rgba(2,6,23,.12);
  transform: translateY(-1px);
}
.km-iw__btn:active{ transform: translateY(0); }

/* Ä÷¯ ¶óº§¸¸ »ì¦ */
.km-iw__btn--tel{
  border-color: rgba(16,185,129,.35);
  background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 100%);
}
.km-iw__btn--tel:hover{ box-shadow:0 6px 16px rgba(16,185,129,.18); }

.km-iw__btn--detail{
  border-color: rgba(59,130,246,.35);
  background: linear-gradient(180deg, #eff6ff 0%, #eef2ff 100%);
}
.km-iw__btn--detail:hover{ box-shadow:0 6px 16px rgba(59,130,246,.18); }

.km-iw__btn--dir{
  border-color: rgba(147,51,234,.35);
  background: linear-gradient(180deg, #f5f3ff 0%, #faf5ff 100%);
}
.km-iw__btn--dir:hover{ box-shadow:0 6px 16px rgba(147,51,234,.18); }

/* ÀÛÀº ¾ÆÀÌÄÜ ´À³¦ ÅؽºÆ® */
.km-iw__ico{ font-size:14px; line-height:1; opacity:.9; }


/* ¸®½ºÆ® ¾ÆÀÌÅÛ ÇÏ´Ü Á¤º¸ */
.km-hint{
  margin-top:6px;
  display:flex; flex-direction:column; gap:4px;
}
.km-hint__row{
  display:flex; gap:8px; align-items:baseline;
  font-size:12px; line-height:1.45;
}
.km-hint__label{
  flex:0 0 auto;
  color:#8fb5ff;           /* ¶óº§: ÀºÀºÇÑ ºí·ç */
  font-weight:700;
}
.km-hint__value{
  font-size: 14px;
  flex:1 1 auto;
  color:#cfe0ff;           /* °ª: ¹àÀº ºí·ç */
  word-break:keep-all;
}
.km-hint__tel{
  color:#dbe8ff; text-decoration:none;
}
.km-hint__tel:hover{ text-decoration:underline; }


/* ºÎµå·¯¿î ÀüÈ­¹øÈ£ ¸µÅ© Ä÷¯ (´«ºÎ½É ¡é) */
.hint__tel,
.km-hint__tel {
  color: #8aa0c7;           /* Â÷ºÐÇÑ ºí·ç±×·¹ÀÌ */
  text-decoration: none;
}

.hint__tel:visited,
.km-hint__tel:visited {
  color: #7d93bb;           /* ¹æ¹® ÈÄ Åæ ¾à°£ ´õ ´Ù¿î */
}

.hint__tel:hover,
.km-hint__tel:hover {
  color: #9bb2d8;           /* »ì¦¸¸ ¹à°Ô */
  text-decoration: underline;
}

.hint__tel:active,
.km-hint__tel:active {
  color: #6f85ab;           /* Ŭ¸¯ ½Ã ´õ ¾îµÓ°Ô */
}

/* Æ÷Ä¿½º(Å°º¸µå Á¢±Ù¼º) ¸µµµ ºÎµå·´°Ô */
.hint__tel:focus-visible,
.km-hint__tel:focus-visible {
  outline: 2px solid rgba(103, 250, 255, .35);
  outline-offset: 2px;
  border-radius: 4px;
}









/* === RB Banner (topbar¿Í content »çÀÌ Àü¿ë) === */
.rb-banner {
  position: relative;
  width: 100%;
  /* »óÇÏ ¿©¹éÀº »óȲ¿¡ ¸Â°Ô Á¶Àý */
  margin: clamp(8px, 1.5vw, 16px) auto;
  /* Ä«µå/¹è°æ°ú ÀÚ¿¬½º·¯¿î ·¹À̾ */
  z-index: 0;
}

.rb-banner__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* µ¥½ºÅ©Å¾: ³Ð°í ¾ãÀº ºñÀ², ¸ð¹ÙÀÏ: 16:9 ºñÀ²¿¡ °¡±î¿öÁöµµ·Ï */
  aspect-ratio: 16 / 6;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  background: rgba(0,0,0,0.25);
}

@media (max-width: 768px) {
  .rb-banner__viewport { aspect-ratio: 16 / 9; }
}

.rb-banner__track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
  transition: transform 420ms ease;
}

.rb-banner__slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

.rb-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* ¹è³Ê ¿µ¿ª¿¡ "µü ¸Â°Ô" ²Ë Â÷µµ·Ï */
  object-position: center;
  display: block;
  transform: scale(1.001); /* ¼­ºêÇȼ¿ ¶ó¿îµù º¸Á¤ */
}

/* ĸ¼Ç(¼±ÅÃ) */
.rb-banner__caption {
  position: absolute;
  left: 16px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: clamp(12px, 1.3vw, 14px);
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.6));
  backdrop-filter: blur(2px);
  pointer-events: none;
}

/* Ç÷¹À̽ºÈ¦´õ */
.rb-banner__slide--placeholder {
  min-width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #cbd5e1;
  background: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.06) 0 12px,
    rgba(255,255,255,0.02) 12px 24px
  );
}
.rb-banner__placeholder {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.15);
}

/* ÁÂ/¿ì ¹öÆ° */
.rb-banner__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 42px;
  width: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(2px);
}
.rb-banner__nav:hover { background: rgba(0,0,0,0.55); }
.rb-banner__nav--prev { left: 10px; }
.rb-banner__nav--next { right: 10px; }

/* µµÆ® */
.rb-banner__dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(2px);
}
.rb-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
}
.rb-banner__dot.is-active {
  width: 18px;
  border-radius: 999px;
  background: #fff;
  transition: width 220ms ease;
}

/* Á¢±Ù¼º Æ÷Ä¿½º */
.rb-banner__nav:focus-visible,
.rb-banner__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}




:root{
    --rb-card:rgba(255,255,255,.06);
    --rb-border:rgba(255,255,255,.12);
    --rb-text:#e8eefc;
    --rb-muted:#a8b3cf;
    --rb-gold:#f6c85f;
    --rb-coin:#7be495;
    --rb-accent:#7aa2ff;
  }

  .rb-stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
    gap:12px; margin-top:8px;
  }
  .rb-stat-card{
    position:relative; display:flex; align-items:center; gap:12px;
    padding:14px 16px; color:var(--rb-text);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--rb-border); border-radius:16px;
    box-shadow:0 6px 24px rgba(0,0,0,.25); backdrop-filter:blur(6px);
    justify-content: space-around;
  }
  .rb-stat-chip{
    width:36px; height:36px; flex:0 0 36px; border-radius:50%;
    display:grid; place-items:center; font-weight:700; user-select:none;
    border:1px solid var(--rb-border);
  }
  .rb-kv{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .rb-label{ font-size:.875rem; color:var(--rb-muted); letter-spacing:.2px; }
  .rb-value{ font-size:1.05rem; font-weight:700; display:flex; align-items:baseline; gap:.35rem; white-space:nowrap; }
  .rb-unit{ font-size:.85rem; opacity:.9; }
  .rb-sub{ font-size:.8rem; color:var(--rb-muted); }
  .muted{ color:var(--rb-muted); }

  /* Åä±Û ¹öÆ° */
  .rb-drop-toggle{
    width:30%; margin-top:8px;
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; color:var(--rb-text);
    background:var(--rb-card); border:1px solid var(--rb-border);
    border-radius:12px; cursor:pointer; user-select:none;
  }
  .rb-drop-toggle:focus{ outline:2px solid var(--rb-accent); outline-offset:2px; }
  .rb-drop-title{ font-weight:700; }
  .rb-caret{ transition:transform .25s ease; }
  .rb-drop-toggle[aria-expanded="true"] .rb-caret{ transform:rotate(180deg); }

  /* µå¶ø ÄÁÅÙÃ÷(¾ÆÄÚµð¾ð) */
  .rb-drop-panel{
    overflow:hidden; max-height:0; transition:max-height .35s ease;
  }
  .rb-drop-panel.open{ max-height:800px; } /* ³»¿ë ³ôÀ̺¸´Ù ÃæºÐÈ÷ Å©°Ô */

  /* ³»ºÎ 2-Ä®·³ Ä«µå */
  .rb-two-cols{
    display:grid; gap:12px; margin-top:10px;
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  @media (max-width:720px){ .rb-two-cols{ grid-template-columns:1fr; } }

  /* ¸·´ë(ÁöºÐ % µî) */
  .rb-bar{
    position:relative; height:8px; width:100%; border-radius:999px;
    background:rgba(255,255,255,.06); border:1px solid var(--rb-border);
    overflow:hidden; margin-top:6px;
  }
  .rb-fill{
    height:100%; width:0%;
    background:linear-gradient(90deg, var(--rb-accent), color-mix(in oklab, var(--rb-accent) 60%, var(--rb-gold)));
    border-right:1px solid rgba(0,0,0,.2);
    transition:width .6s ease;
  }
  
  
  
  
  .rb-sv__title { font-size: 1.4rem; font-weight: 800; letter-spacing: .04em; margin-bottom: 10px; }

/* ½½¶óÀ̵å Àüü ÄÁÅ×À̳Ê: °¡¿îµ¥, Æø ÁÙÀ̱â */
.rb-sv {
  position: relative;
  z-index: 2;
  /* Àüü Æø ÁÙÀ̱â */
  max-width: 750px;      /* ±âÁ¸ 900~1000´ë¿´´Ù¸é ÀÌ·¸°Ô ÁÙÀ̱â */
  margin: 28px auto 20px;
  text-align: center;
}

.rb-sv--dual {
  position: relative;
  z-index: 2;
  /* Àüü Æø ÁÙÀ̱â */
  max-width: 375px;      /* ±âÁ¸ 900~1000´ë¿´´Ù¸é ÀÌ·¸°Ô ÁÙÀ̱â */
  margin: 28px auto 20px;
  text-align: center;
}

.rb-sv__title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: 10px;
}

.rb-sv__viewport {
  position: relative;
  overflow: hidden;
  padding: 6px 8px;     
}

.rb-sv__track {
  width: 100%;          
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;            
  transition: transform .4s ease;
  will-change: transform;
}

.rb-sv__slide {
  flex: 0 0 calc(50% - 8px); 
  display: flex;
  align-items: center;

  /* ³ôÀÌ ´Ã¸®±â */
  min-height: 200px;        

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  text-decoration: none;
  outline: none;
   justify-content: flex-start; 
}

.rb-sv__slide:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,153,255,.6);
}

.rb-sv__chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 35px;
  background: transparent;      
  border: none;
  padding: 40px;
  width: 100%;
  text-align: left;
}

.rb-sv__nav--prev { left: 8px; color:white;}
.rb-sv__nav--next { right: 8px; color:white;}

.rb-sv__nav:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,153,255,.6);
}
  @media (max-width:640px){
    .rb-sv__slide { flex-basis: calc(100% - 10px); }
  }
  .rb-sv__slide:focus-visible { box-shadow: 0 0 0 3px rgba(0,153,255,.6); }


  .rb-sv__nav{
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(0,0,0,.35); cursor: pointer;
    display: grid; place-items: center; font-size: 24px; line-height: 1;
    user-select: none;
  }
  .rb-sv__nav--prev{ left: 8px; }
  .rb-sv__nav--next{ right: 8px; }
  .rb-sv__nav:focus-visible { box-shadow: 0 0 0 3px rgba(0,153,255,.6); }

  

  
  @media (max-width: 640px) {
  .rb-sv {
    max-width: 420px;     
  }

  .rb-sv__slide {
    flex: 0 0 100%;          
    min-height: 100px;       
  }
}
  
  
  .rb-sv__chip-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .03em;
  color: white;
}

.rb-sv__chip-desc {
  font-size: 0.8rem;
  opacity: 0.8;
  color: wheat;
}


.rb-sv__slide--guide .rb-sv__thumb {
  background-image: url('/img/ruby.png');  
}
.rb-sv__slide--job .rb-sv__thumb {
  background-image: url('/img/ruby1.png');
}
.rb-sv__slide--skill .rb-sv__thumb {
  background-image: url('/img/ruby2.png'); 
}
.rb-sv__slide--pet .rb-sv__thumb {
  background-image: url('/img/ruby3.png'); 
}
.rb-sv__slide--item .rb-sv__thumb {
  background-image: url('/img/ruby4.png'); 
}
.rb-sv__slide--quest .rb-sv__thumb {
  background-image: url('/img/ruby5.png');
}

.rb-sv__thumb--dual{
  display:block;             
  width:100%;
  height:240px;           
  background-image:url('/img/rebirthDual.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-color:#000; 
  border-radius:16px;    
}

.rb-sv__viewport > a{
  display:block;
  width:100%;
}

.rb-sv__thumb {
  width: 130px;
  display: block;
  height: 140px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@font-face {
    font-family: 'Cafe24Anemone';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Cafe24Ohsquare.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}




.rb-donation-banner{
  position: relative;
  margin: 12px 0 16px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 0, .42);
  background:
    radial-gradient(1200px 220px at 50% 0%, rgba(255, 215, 0, .18), transparent 55%),
    radial-gradient(900px 220px at 50% 100%, rgba(255, 145, 0, .12), transparent 60%),
    linear-gradient(135deg, rgba(10,10,16,.92), rgba(18,10,6,.92));
  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    0 0 26px rgba(255, 215, 0, .18),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

.rb-donation-banner__bg{
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255,215,0,.09) 0px,
      rgba(255,215,0,.09) 1px,
      transparent 1px,
      transparent 10px
    );
  opacity: .45;
  transform: translateZ(0);
  animation: rbGoldScan 5.5s linear infinite;
  pointer-events: none;
}

@keyframes rbGoldScan{
  0%   { transform: translateX(-8%); opacity: .35; }
  50%  { transform: translateX(8%);  opacity: .55; }
  100% { transform: translateX(-8%); opacity: .35; }
}

.rb-donation-banner__side{
  position: absolute;
  top: 50%;
  width: 170px;
  height: 110px;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(255, 215, 0, .25));
  opacity: .95;
  pointer-events: none;
}

.rb-donation-banner__side--left{
  left: 10px;
  background-image: url('/imgs/ui/money_left.png');
  animation: rbFloat 2.2s ease-in-out infinite;
}

.rb-donation-banner__side--right{
  right: 10px;
  background-image: url('/imgs/ui/money_right.png');
  animation: rbFloat 2.2s ease-in-out infinite reverse;
}

/*
.rb-donation-banner__side--right{
  background-image: url('/imgs/ui/money_left.png');
  transform: translateY(-50%) scaleX(-1);
}
*/

@keyframes rbFloat{
  0%,100% { transform: translateY(-50%) translateY(0); }
  50%     { transform: translateY(-50%) translateY(-4px); }
}

.rb-donation-banner__content{
  position: relative;
  padding: 18px 200px;
  text-align: center;
}

.rb-donation-banner__tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .6px;
  color: rgba(255, 240, 190, .95);
  background: rgba(255, 215, 0, .10);
  border: 1px solid rgba(255, 215, 0, .22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  transform: translateZ(0);
}

.rb-donation-banner__msg{
  margin-top: 10px;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.35;
  color: #ffe9b8;
  text-shadow:
    0 0 10px rgba(255, 215, 0, .45),
    0 0 22px rgba(255, 150, 0, .20),
    0 2px 0 rgba(0,0,0,.45);
  animation: rbPulseGlow 1.25s ease-in-out infinite;
}

@keyframes rbPulseGlow{
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.18); }
}

.rb-donation-banner__sub{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .9px;
  color: rgba(255, 230, 170, .78);
}

.rb-donation-banner__spark{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,215,0,.55), transparent 70%);
  filter: blur(.2px) drop-shadow(0 0 14px rgba(255,215,0,.55));
  opacity: .0;
  pointer-events: none;
  animation: rbSpark 1.8s ease-in-out infinite;
}

.rb-donation-banner__spark--1{ left: 26%; top: 26%; animation-delay: .1s; }
.rb-donation-banner__spark--2{ left: 52%; top: 68%; animation-delay: .6s; }
.rb-donation-banner__spark--3{ left: 78%; top: 36%; animation-delay: 1.0s; }

@keyframes rbSpark{
  0%   { transform: scale(.2); opacity: 0; }
  35%  { transform: scale(1.3); opacity: .9; }
  70%  { transform: scale(.6); opacity: .35; }
  100% { transform: scale(.2); opacity: 0; }
}

@media (max-width: 720px){
  .rb-donation-banner__content{ padding: 16px 120px; }
  .rb-donation-banner__side{ width: 110px; height: 78px; }
  .rb-donation-banner__msg{ font-size: 15px; }
}

@media (max-width: 480px){
  .rb-donation-banner__content{ padding: 14px 18px; }
  .rb-donation-banner__side{ display: none; } 
  .rb-donation-banner__msg{ font-size: 14px; }
}


.rb-burst-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 1;
}

.rb-donation-banner.rb-pop{
  animation: rbBannerPop .62s cubic-bezier(.2,.95,.2,1.25) 1;
}
@keyframes rbBannerPop{
  0%   { transform: scale(.90); filter: brightness(1); }
  45%  { transform: scale(1.05); filter: brightness(1.30); }
  100% { transform: scale(1);    filter: brightness(1); }
}


.rb-donation-banner__endat{
  margin-left: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .3px;
  color: rgba(255,230,170,.92);
  background: rgba(255,215,0,.10);
  border: 1px solid rgba(255,215,0,.18);
}


.rb-donation-banner__msg{
  white-space: pre-line; 
}




.rb-donation-banner__donors{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.rb-donation-banner__donors-title{
  font-weight: 700;
  opacity: .9;
  margin-bottom: 6px;
}
.rb-donation-banner__donors-list{
  margin: 0;
  padding-left: 18px; 
}
.rb-donation-banner__donors-list li{
  line-height: 1.5;
}






/* ===== Town NPC Menu ===== */
.rb-town{
  width: 100%;
  max-width: 1100px;
  margin: 18px auto 0;
  padding: 0 14px;
}

.rb-town__stage{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  background: #0b1020;
}

.rb-town__bg{
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.rb-npc{
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -100%); 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  z-index: 3;
  outline: none;
}

.rb-npc__img{
  height: 100%;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.35));
  transition: transform .18s ease, filter .18s ease;
}

.rb-npc:hover .rb-npc__img{
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.45));
}

.rb-bubble{
  position: absolute;
  left: 48%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  white-space: normal !important;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  background: rgba(20, 24, 40, .85);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  pointer-events: none; 
  
  word-break: keep-all;     
  line-height: 1.15;
  
  max-width: 140px;
  text-align: center;
}

.rb-bubble::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid rgba(20, 24, 40, .85);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
}

@media (max-width: 640px){
  .rb-npc__img{ height: 40px; }
  .rb-bubble{ font-size: 11px; padding: 5px 9px; }
}

body.rb-lock{
  position: fixed;
  width: 100%;
  overflow: hidden;
}





.rb-new {
  display: inline-block;
  margin-left: 2px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 800;
  color: #5b3a00;
  background: linear-gradient(135deg, #ffe066, #ffb703);
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(255, 200, 0, 0.8);
  animation: rb-new-bounce 1.1s infinite ease-in-out;
}

@keyframes rb-new-bounce {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-3px) scale(1.05); }
  60%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); }
}



.rb-bubble .rb-new{
  display: inline-block;
  white-space: nowrap;
  margin-left: 2px;
}

@media (max-width: 640px){
  .rb-bubble{
    max-width: 110px;
    font-size: 12px;  
    padding: 5px 8px;
  }
  .rb-bubble .rb-new{
    font-size: 11px;
    margin-left: 4px;
  }
}

@media (max-width: 380px){
  .rb-bubble{ max-width: 96px; font-size: 11px; }
}
















#snow-container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; 
  overflow: hidden;
  z-index: 9999; 
}

.snowflake{
  position: absolute;
  top: -10px;
  color: #fff;
  font-size: 12px;
  opacity: 0.8;
  user-select: none;
  animation-name: fall;
  animation-timing-function: linear;
}

@keyframes fall{
  0%{
    transform: translateY(0) translateX(0);
  }
  100%{
    transform: translateY(110vh) translateX(40px);
  }
}