/* =====================================================
   Fantasy of Lilis – Cyber-Lobby Skin  (rev-2025-05-25d)
   ===================================================== */
:root{
  --bg-grad-1:#0f0c29;
  --bg-grad-2:#302b63;
  --bg-grad-3:#24243e;
  --surf:rgba(255,255,255,.05);
  --surf-hi:rgba(255,255,255,.09);
  --txt:#e4e5f1;
  --txt-muted:#9193b1;
  --primary:#00e6ff;
  --secondary:#ff214f;
  --neon:#8efd34;
  --glass:rgba(255,255,255,.1);
  --blur:12px;
}

/* RESET ------------------------------------------------*/
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Rajdhani',sans-serif;color:var(--txt);overflow-x:hidden}

/* BACKGROUND -------------------------------------------*/
body{
  background:linear-gradient(-45deg,var(--bg-grad-1),var(--bg-grad-2),var(--bg-grad-3));
  background-size:600% 600%;animation:bgShift 15s ease infinite;
}
@keyframes bgShift{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.scanlines{pointer-events:none;position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='2' fill='%23000000'/%3E%3C/svg%3E");opacity:.1;mix-blend-mode:overlay}

/* TYPO --------------------------------------------------*/
.logo{font-family:'Orbitron',sans-serif;font-size:2.25rem;letter-spacing:.04em;color:var(--primary);text-shadow:0 0 8px rgba(0,230,255,.75);margin-bottom:.5rem}
h1,h2,h3{user-select:none}
h2.panel-title,.section-title{font-family:'Orbitron';letter-spacing:.03em;color:var(--neon)}
.status{font-size:.85rem;color:var(--secondary);text-align:center;margin-top:.5rem}
.status svg{vertical-align:-0.15em;margin-right:.25em}

/* ICON --------------------------------------------------*/
.icon{width:1em;height:1em;fill:currentColor}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* GLASS PANEL ------------------------------------------*/
.glass{width:100%;max-width:1080px;margin:2rem auto 1rem;padding:2rem;background:var(--glass);backdrop-filter:blur(var(--blur));border:1px solid var(--surf-hi);border-radius:1rem;position:relative;overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 25%,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 60%);pointer-events:none}
.ribbon{border-top:4px solid var(--primary);border-bottom:4px solid var(--secondary)}

/* METRICS ----------------------------------------------*/
.metrics{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin:1rem 0 2rem}
.metric{display:flex;flex-direction:column;align-items:center;font-size:.9rem}
.metric .label{color:var(--txt-muted);font-size:.75rem}

/* PORTAL PANELS ----------------------------------------*/
.portal{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}
.panel{min-width:240px;flex:1 1 240px;padding:1.5rem;background:var(--surf);border-radius:.75rem;border:1px solid var(--surf-hi);box-shadow:0 0 6px rgba(0,0,0,.4),0 0 12px rgba(0,230,255,.15) inset;position:relative;overflow:hidden}
.panel:hover::after{content:"";position:absolute;inset:0;background:linear-gradient(60deg,transparent 0%,rgba(0,230,255,.08) 50%,transparent 100%);animation:sheen 1s forwards}
@keyframes sheen{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.sub{font-size:.8rem;color:var(--txt-muted);margin-bottom:.75rem}

/* BUTTONS ----------------------------------------------*/
.btn{font-family:'Orbitron';font-size:.85rem;letter-spacing:.04em;border:none;border-radius:.5rem;cursor:pointer;user-select:none;padding:.65rem 1.1rem;transition:transform .2s,box-shadow .2s,background .2s}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:hover:not(:disabled){transform:translateY(-3px)}
.primary{background:var(--primary);color:#000;box-shadow:0 0 8px rgba(0,230,255,.6)}
.secondary{background:var(--secondary);color:#fff;box-shadow:0 0 8px rgba(255,33,79,.6)}
.neon{background:var(--neon);color:#000;font-weight:700;box-shadow:0 0 8px rgba(142,253,52,.8)}
.btn-mini{background:var(--surf-hi);color:var(--txt);width:2.4rem;height:2.4rem;font-size:1.25rem;display:flex;align-items:center;justify-content:center}
.btn:not(.btn-mini):hover:not(:disabled){animation:wave .4s ease}
@keyframes wave{0%{box-shadow:0 0 8px rgba(255,255,255,.5)}30%{box-shadow:0 0 16px rgba(255,255,255,.7)}100%{box-shadow:0 0 8px rgba(255,255,255,.5)}}

/* INPUT -------------------------------------------------*/
input[type=number]{width:72px;padding:.55rem;border-radius:.45rem;background:var(--bg-grad-3);border:1px solid var(--surf-hi);color:var(--txt);font-family:'Orbitron';text-align:center}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}

/* GALLERY  ⭐ 여기서 카드 겹침 문제 해결 -----------------*/
.gallery-wrap{max-width:1080px;margin:0 auto 4rem;padding:0 1rem}
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); /* 더 작게 */
  gap:.8rem;
  grid-auto-rows:1fr;              /* 모든 행 높이를 동일하게 */
}

.card{
  position:relative;
  aspect-ratio:1/1;                /* ★ 정사각형 고정 */
  overflow:hidden;cursor:pointer;
  border-radius:.75rem;border:1px solid var(--surf-hi);
  background:var(--surf);
  display:flex;flex-direction:column;
}
.card img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.card-id{
  position:absolute;left:0;bottom:0;width:100%;
  background:rgba(0,0,0,.55);color:#fff;
  font-size:.6rem;text-align:center;padding:2px 0;
}

/* 선택 & 새 카드 테두리 효과 */
.card.selected{box-shadow:0 0 10px var(--primary)}
.card.new     {box-shadow:0 0 10px var(--neon)}

/* OVERLAY ----------------------------------------------*/
.overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:200}
.overlay.hidden{display:none}
.cube-loader{width:56px;height:56px;display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin-bottom:1rem}
.cube{width:100%;height:100%;background:var(--primary);animation:cube 1.2s infinite ease-in-out}
.cube:nth-child(2){animation-delay:.15s}.cube:nth-child(3){animation-delay:.3s}.cube:nth-child(4){animation-delay:.45s}
@keyframes cube{0%,70%,100%{transform:scale3d(1,1,1)}35%{transform:scale3d(0,0,1)}}

/* RESPONSIVE -------------------------------------------*/
@media(max-width:600px){
  .portal{flex-direction:column}
  .metric{flex:1 1 45%}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(65px,1fr))}
}

/* === MINT 수량 컨트롤 =================================*/
.mint-controls{
  display:flex;           /* 가로 정렬 */
  align-items:center;     /* 세로 가운데 */
  justify-content:center; /* 가운데 정렬 */
  gap:.5rem;              /* 버튼·입력창 간격 */
}

.mint-controls .btn-mini{ width:2.2rem;height:2.2rem; } /* 살짝 줄임 */

/* 선택 & 새 카드 테두리 효과 */
card.selected{box-shadow:0 0 10px var(--primary)}
@keyframes selectPulse{
  0%  {transform:scale(1)}
  50% {transform:scale(1.07)}
  100%{transform:scale(1)}
}

.card.selected{
  box-shadow:0 0 10px var(--primary);
  animation:selectPulse .25s ease-out; /* 클릭 순간만 살짝 확대 */
  z-index:2;                           /* 겹쳐 보여도 클릭 가능 */
}
.card.new     {box-shadow:0 0 10px var(--neon)}

/* ▶ 섹션 간 구분선 + 간격 */
.gallery-wrap section + section{
  margin-top:3rem;               /* 위아래 간격 */
  padding-top:2rem;
  border-top:1px solid var(--surf-hi);
}

/* 3) 푸터 가운데 정렬 + 고정 */
footer{
  flex:0 0 auto;            /* 아래에 붙도록 */
  text-align:center;        /* 가운데 정렬 */
  padding:1rem 0;
  font-size:.75rem;
  color:var(--txt-muted);
}

.empty            { text-align:center; padding:2rem; opacity:.8; }
.empty .cta       { margin-top:.5rem; font-weight:600; }