/* Club Mystik Itaewon - Deep Indigo + Gold Theme */
/* Class prefix: mk- */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

.mk-realm{
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#0e0718;
  color:#c5b8d9;
  line-height:1.8;
  overflow-x:hidden;
}

/* The Veil Hero */
.mk-veil{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse at center bottom,#1a0a3e 0%,#0e0718 70%);
  overflow:hidden;
}
.mk-fog-layer{
  position:absolute;inset:0;
  opacity:0.15;
}
.mk-fog-1{
  background:radial-gradient(ellipse at 30% 80%,rgba(255,215,0,0.1),transparent 60%);
}
.mk-fog-2{
  background:radial-gradient(ellipse at 70% 20%,rgba(255,215,0,0.05),transparent 50%);
}
.mk-veil-content{
  position:relative;z-index:2;
  text-align:center;padding:2rem;
  max-width:700px;
}
.mk-sigil{
  font-size:0.8rem;
  letter-spacing:0.4em;
  color:#ffd700;
  opacity:0.6;
  margin-bottom:1.5rem;
}
.mk-veil-title{
  font-size:clamp(1.7rem,5vw,3.2rem);
  font-weight:800;
  color:#fff;
  line-height:1.35;
  margin-bottom:1.2rem;
}
.mk-veil-whisper{
  font-size:0.95rem;
  color:rgba(197,184,217,0.7);
  margin-bottom:2rem;
  line-height:1.9;
}
.mk-veil-enter{
  display:inline-block;
  border:1px solid #ffd700;
  color:#ffd700;
  padding:0.8rem 2rem;
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0.1em;
  transition:all 0.4s;
}
.mk-veil-enter:hover{
  background:rgba(255,215,0,0.1);
  box-shadow:0 0 30px rgba(255,215,0,0.15);
}

/* Stack Layers - Fog/Mist overlapping */
.mk-stack-layer{
  position:relative;
  padding:0 1.5rem;
}
.mk-layer-1{background:linear-gradient(180deg,#0e0718,#120b22)}
.mk-layer-2{background:linear-gradient(180deg,#120b22,#160e2a)}
.mk-layer-3{background:linear-gradient(180deg,#160e2a,#120b22)}
.mk-layer-4{background:linear-gradient(180deg,#120b22,#0e0718)}
.mk-layer-5{background:linear-gradient(180deg,#0e0718,#120b22)}
.mk-layer-6{background:linear-gradient(180deg,#120b22,#0e0718)}

.mk-stack-glass{
  max-width:850px;
  margin:0 auto;
  padding:4rem 2.5rem;
  background:rgba(26,10,62,0.3);
  border:1px solid rgba(255,215,0,0.06);
  border-radius:2px;
  backdrop-filter:blur(2px);
}
.mk-glass-deep{
  background:rgba(14,7,24,0.5);
  border-color:rgba(255,215,0,0.1);
}
.mk-stack-inner{
  max-width:750px;
  margin:0 auto;
}

/* Ritual Number */
.mk-ritual-num{
  display:block;
  font-size:1.5rem;
  color:#ffd700;
  opacity:0.3;
  font-weight:300;
  font-style:italic;
  margin-bottom:0.5rem;
}

/* Stack Titles */
.mk-stack-title{
  font-size:clamp(1.4rem,3.5vw,2rem);
  font-weight:700;
  color:#ffd700;
  margin-bottom:0.3rem;
}
.mk-stack-sub{
  font-size:0.88rem;
  color:rgba(197,184,217,0.5);
  margin-bottom:2rem;
}

/* Prose */
.mk-prose p{
  margin-bottom:1.2rem;
  color:#a89bc0;
  font-size:0.95rem;
  line-height:1.9;
}

/* Chamber */
.mk-chamber-block{
  position:relative;
  padding:2rem;
  background:rgba(26,10,62,0.4);
  border-left:3px solid #ffd700;
  margin-top:1rem;
}
.mk-chamber-aura{
  position:absolute;top:0;right:0;bottom:0;width:40%;
  background:linear-gradient(270deg,rgba(255,215,0,0.03),transparent);
  pointer-events:none;
}
.mk-aura-bass{
  background:linear-gradient(270deg,rgba(138,43,226,0.04),transparent);
}
.mk-chamber-content{position:relative;z-index:1}
.mk-chamber-content h3{
  font-size:1.15rem;
  font-weight:700;
  color:#e8ddf5;
  margin-bottom:0.8rem;
}
.mk-chamber-content p{
  color:#a89bc0;
  font-size:0.93rem;
  line-height:1.9;
  margin-bottom:0.8rem;
}

/* Ritual Steps */
.mk-ritual-steps{display:flex;flex-direction:column;gap:0}
.mk-step{
  display:flex;
  gap:1.5rem;
  padding:1.5rem 0;
  border-bottom:1px solid rgba(255,215,0,0.08);
}
.mk-step:last-child{border-bottom:none}
.mk-step-marker{
  font-size:0.9rem;
  font-weight:700;
  color:#ffd700;
  flex-shrink:0;
  width:50px;
  padding-top:0.2rem;
}
.mk-step-text h3{
  font-size:1.05rem;
  font-weight:700;
  color:#e8ddf5;
  margin-bottom:0.4rem;
}
.mk-step-text p{
  color:#a89bc0;
  font-size:0.9rem;
  line-height:1.8;
}

/* Whisper Grid */
.mk-whisper-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
}
.mk-whisper-card{
  padding:1.5rem;
  background:rgba(26,10,62,0.5);
  border:1px solid rgba(255,215,0,0.08);
}
.mk-whisper-card h3{
  font-size:0.95rem;
  font-weight:700;
  color:#ffd700;
  margin-bottom:0.5rem;
}
.mk-whisper-card p{
  color:#a89bc0;
  font-size:0.88rem;
  line-height:1.8;
}

/* FAQ */
.mk-faq-scroll{max-width:700px}
.mk-faq-entry{border-bottom:1px solid rgba(255,215,0,0.1)}
.mk-faq-ask{
  width:100%;background:none;border:none;
  text-align:left;
  padding:1.1rem 0;
  color:#e8ddf5;
  font-size:0.98rem;
  font-weight:600;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:inherit;
}
.mk-faq-ask::after{
  content:'+';
  font-size:1.2rem;
  color:#ffd700;
  flex-shrink:0;
  margin-left:1rem;
}
.mk-faq-ask[aria-expanded="true"]::after{content:'-'}
.mk-faq-tell{
  max-height:0;overflow:hidden;
  transition:max-height 0.4s ease;
}
.mk-faq-tell p{
  padding:0 0 1.2rem;
  color:#8a7ba5;
  font-size:0.9rem;
  line-height:1.8;
}

/* Final */
.mk-final-mist{
  text-align:center;
  padding:5rem 1.5rem;
  background:radial-gradient(ellipse at center,#1a0a3e,#0e0718);
}
.mk-final-phrase{
  font-size:1.15rem;
  color:rgba(197,184,217,0.7);
  line-height:2.1;
  margin-bottom:2rem;
}
.mk-final-portal{
  display:inline-block;
  background:#ffd700;
  color:#1a0a3e;
  padding:0.9rem 2.5rem;
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  transition:all 0.3s;
}
.mk-final-portal:hover{
  box-shadow:0 0 30px rgba(255,215,0,0.3);
  transform:translateY(-2px);
}

/* Footer */
.mk-ground{
  text-align:center;
  padding:2rem 1.5rem 6rem;
  color:rgba(197,184,217,0.3);
  font-size:0.8rem;
  background:#0e0718;
}

/* Bottom bar */
.mk-bottom-bar{
  position:fixed;bottom:0;left:0;right:0;
  z-index:999;
  padding:0.8rem 1rem;
  background:rgba(14,7,24,0.95);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,215,0,0.15);
}
.mk-bottom-link{
  display:block;
  text-align:center;
  background:#ffd700;
  color:#1a0a3e;
  padding:0.9rem;
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  max-width:500px;
  margin:0 auto;
}

@media(max-width:768px){
  .mk-stack-glass{padding:2.5rem 1.5rem}
  .mk-whisper-grid{grid-template-columns:1fr}
  .mk-step{flex-direction:column;gap:0.5rem}
  .mk-step-marker{width:auto}
}