/* 몰입형 전용 페이지: 넵바/푸터 숨김 (mirror.css는 이 페이지에서만 로드됨) */
nav, .navbar, header.site-header, .site-header, footer, .footer, .site-footer, #footer {
  display: none !important;
}
body { background: #100c1c; }

/* ── 거울아 거울아: 한밤의 성 복도, 금테 거울 ─────────────────────── */
:root {
  --mm-night: #100c1c;      /* 깊은 자정 보라 */
  --mm-night2: #1c1430;
  --mm-gold: #d9a441;       /* 낡은 금테 */
  --mm-gold-hi: #f3d590;
  --mm-glass: #223047;      /* 거울 유리 청록 */
  --mm-ink: #efe8f5;
  --mm-dim: #a596bd;
}

.mm-stage {
  position: relative;
  background: radial-gradient(120% 90% at 50% 0%, var(--mm-night2), var(--mm-night) 70%);
  color: var(--mm-ink);
  border-radius: 18px;
  padding: 3rem 1.25rem 4rem;
  overflow: hidden;
  font-family: "Noto Serif KR", "Nanum Myeongjo", serif;
}
.mm-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(2px 2px at 18% 22%, rgba(243,213,144,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 14%, rgba(243,213,144,.6), transparent 60%),
    radial-gradient(2px 2px at 64% 78%, rgba(243,213,144,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 66%, rgba(243,213,144,.45), transparent 60%);
  animation: mmTwinkle 4s ease-in-out infinite alternate;
}
@keyframes mmTwinkle { from { opacity: .35; } to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .mm-vignette, .mm-idle-orb, .mm-fog { animation: none !important; }
}

.mm-head { text-align: center; max-width: 620px; margin: 0 auto 2.2rem; position: relative; }
.mm-eyebrow {
  font-size: .8rem; letter-spacing: .35em; color: var(--mm-gold);
  text-transform: uppercase; margin-bottom: .8rem;
}
.mm-title {
  font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 800;
  background: linear-gradient(180deg, var(--mm-gold-hi), var(--mm-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: .8rem;
}
.mm-sub { color: var(--mm-dim); font-size: 1.02rem; line-height: 1.7; }

/* ── 거울 = 뷰파인더 (시그니처) ── */
.mm-mirror-wrap { display: flex; justify-content: center; position: relative; }
.mm-mirror {
  position: relative;
  width: min(78vw, 340px); aspect-ratio: 3 / 4;
  border-radius: 50% 50% 46% 46% / 42% 42% 54% 54%;
  padding: 14px;
  background:
    linear-gradient(155deg, var(--mm-gold-hi), var(--mm-gold) 40%, #8a651f 75%, var(--mm-gold-hi));
  box-shadow:
    0 0 60px rgba(217,164,65,.25),
    inset 0 2px 6px rgba(255,255,255,.5),
    inset 0 -4px 10px rgba(0,0,0,.45);
}
.mm-glass {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(160deg, #2c3b56, var(--mm-glass) 55%, #141d2e);
}
.mm-glass video, .mm-glass img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scaleX(-1);
}
.mm-glass img { transform: none; }
.mm-frame-shine {
  position: absolute; inset: 4px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.35), transparent 30%);
  mix-blend-mode: screen;
}

.mm-idle {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.1rem;
  text-align: center; color: var(--mm-dim); font-size: 1.02rem; line-height: 1.8;
  padding: 1rem;
}
.mm-idle-orb {
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--mm-gold-hi), var(--mm-gold) 60%, transparent 75%);
  filter: blur(1px); animation: mmBreath 3s ease-in-out infinite;
}
@keyframes mmBreath { 0%,100% { transform: scale(1); opacity:.75; } 50% { transform: scale(1.18); opacity:1; } }

.mm-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .8rem;
  background: rgba(16,12,28,.55); text-align: center; padding: 1rem;
}
.mm-fog {
  width: 100%; height: 100%; position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 50% 50%, rgba(217,164,65,.18), transparent 70%);
  animation: mmBreath 1.6s ease-in-out infinite;
}
.mm-loading p { position: relative; color: var(--mm-gold-hi); font-size: .95rem; }

/* ── 버튼 ── */
.mm-controls {
  display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.8rem; position: relative;
}
.mm-btn {
  display: inline-block; border: 0; cursor: pointer;
  padding: .78rem 1.5rem; border-radius: 999px;
  font-size: .96rem; font-weight: 700; font-family: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mm-btn:focus-visible { outline: 3px solid var(--mm-gold-hi); outline-offset: 2px; }
.mm-btn-gold {
  background: linear-gradient(180deg, var(--mm-gold-hi), var(--mm-gold));
  color: #241a05; box-shadow: 0 4px 18px rgba(217,164,65,.35);
}
.mm-btn-gold:hover { transform: translateY(-2px); }
.mm-btn-ghost {
  background: transparent; color: var(--mm-dim);
  border: 1px solid rgba(165,150,189,.4);
}
.mm-btn-ghost:hover { color: var(--mm-ink); border-color: var(--mm-dim); }

.mm-privacy {
  text-align: center; color: var(--mm-dim); font-size: .85rem;
  margin-top: 1.4rem; position: relative;
}

/* ── 리그 목록 ── */
.mm-leagues { margin-top: 3.5rem; position: relative; }
.mm-h2 { text-align: center; font-size: 1.25rem; color: var(--mm-gold-hi); margin-bottom: 1.4rem; }
.mm-league-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .7rem; max-width: 760px; margin: 0 auto;
}
.mm-league-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(217,164,65,.18);
  border-radius: 12px; padding: .9rem .8rem; text-align: center;
}
.mm-league-emoji { font-size: 1.5rem; display: block; margin-bottom: .3rem; }
.mm-league-card strong { display: block; font-size: .95rem; }
.mm-league-card small { color: var(--mm-dim); font-size: .74rem; line-height: 1.4; display: block; margin-top: .25rem; }

/* ── 결과 카드 ── */
.mm-result-card {
  position: relative; max-width: 560px; margin: 0 auto; text-align: center;
  border: 1px solid rgba(217,164,65,.45); border-radius: 18px;
  padding: 2.2rem 1.3rem 2.4rem;
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 0 0 4px rgba(16,12,28,1), inset 0 0 0 5px rgba(217,164,65,.3);
}

/* 금장 장식 구분선 */
.mm-orn {
  color: var(--mm-gold); font-size: .8rem; letter-spacing: .1em;
  margin: 1.6rem 0 .2rem; opacity: .8;
  text-shadow: 0 0 12px rgba(243,213,144,.5);
}
.mm-h2-sub {
  text-align: center; color: var(--mm-dim); font-size: .92rem; margin: -0.9rem 0 1.4rem;
}
.mm-result-emoji { font-size: 3rem; display: block; }
.mm-result-name {
  font-size: clamp(1.8rem, 6vw, 2.5rem); font-weight: 800; margin: .3rem 0;
  background: linear-gradient(180deg, var(--mm-gold-hi), var(--mm-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mm-result-source { color: var(--mm-dim); font-size: .9rem; }
.mm-result-emoji { filter: drop-shadow(0 0 14px rgba(243,213,144,.55)); }

.mm-rank { margin: 1.8rem 0; }
.mm-rank-big {
  font-size: clamp(3rem, 12vw, 4.5rem); font-weight: 900; line-height: 1;
  color: var(--mm-gold-hi); text-shadow: 0 0 40px rgba(217,164,65,.4);
}
.mm-rank-big small { font-size: .4em; }
.mm-rank-sub { color: var(--mm-ink); margin-top: .6rem; font-size: 1rem; }
.mm-rank-sub strong { color: var(--mm-gold-hi); }
.mm-rank-note { display: block; color: var(--mm-dim); font-size: .8rem; margin-top: .25rem; }

/* 금장 명판: 금판 위에 새긴 글씨 */
.mm-quote {
  position: relative;
  border-radius: 14px;
  padding: 2.1rem 1.4rem 1.5rem; margin: 1.6rem 0;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.4), transparent 40%),
    linear-gradient(160deg, #f3d590 0%, #e0b558 35%, #d9a441 55%, #b07f27 85%, #caa04a 100%);
  border: 1px solid #8a651f;
  box-shadow:
    0 6px 26px rgba(217,164,65,.35),
    inset 0 2px 3px rgba(255,255,255,.65),
    inset 0 -3px 8px rgba(90,60,10,.45);
}
.mm-quote::before {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid rgba(90,60,10,.4); border-radius: 9px;
  pointer-events: none;
}
.mm-quote-crest {
  position: absolute; top: -1.1rem; left: 50%; transform: translateX(-50%);
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 6px rgba(16,12,28,.6));
}
.mm-quote-label {
  font-size: .72rem; letter-spacing: .4em; color: #6d4c12;
  margin-bottom: .7rem; font-weight: 700;
}
.mm-quote-text {
  color: #3a2a08; font-size: 1.06rem; line-height: 1.9; font-weight: 600;
  text-shadow: 0 1px 0 rgba(255,255,255,.4); /* 음각 새김 효과 */
}
.mm-mix { margin: 1.6rem 0; }
.mm-mix-label { color: var(--mm-gold); letter-spacing: .2em; font-size: .78rem; margin-bottom: .5rem; }
.mm-mix-text { font-size: 1.02rem; line-height: 1.8; }
.mm-mix-chips { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: .9rem; }
.mm-chip {
  background: rgba(217,164,65,.16); border: 1px solid rgba(217,164,65,.45);
  color: var(--mm-gold-hi); border-radius: 999px; padding: .35rem .8rem; font-size: .8rem;
}
.mm-share { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.mm-cta-line { color: var(--mm-dim); font-size: .88rem; margin-top: 1.2rem; }

.mm-error {
  text-align: center; color: #f0b9b9; margin-top: 1rem; font-size: .92rem; position: relative;
}

/* ── 의식(ritual) 연출: 별가루 / 금테 발광 / 쫘라랑 플래시 ── */
.mm-spark {
  position: absolute; z-index: 5; pointer-events: none;
  color: var(--mm-gold-hi);
  text-shadow: 0 0 10px rgba(243,213,144,.9);
  animation: mmSpark 2.2s ease-out forwards;
}
@keyframes mmSpark {
  0%   { opacity: 0; transform: translateY(8px) scale(.4) rotate(0deg); }
  25%  { opacity: 1; transform: translateY(-4px) scale(1.15) rotate(40deg); }
  100% { opacity: 0; transform: translateY(-26px) scale(.6) rotate(120deg); }
}

.mm-mirror-active {
  animation: mmGlow 1.1s ease-in-out infinite alternate;
}
@keyframes mmGlow {
  from { box-shadow: 0 0 60px rgba(217,164,65,.25), inset 0 2px 6px rgba(255,255,255,.5), inset 0 -4px 10px rgba(0,0,0,.45); }
  to   { box-shadow: 0 0 110px rgba(243,213,144,.65), 0 0 40px rgba(243,213,144,.4), inset 0 2px 6px rgba(255,255,255,.6), inset 0 -4px 10px rgba(0,0,0,.45); }
}

.mm-flash {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, #fff8e6, rgba(243,213,144,.95) 35%, rgba(217,164,65,.75) 60%, rgba(16,12,28,.9) 100%);
  animation: mmFlash 1.6s ease-in-out forwards;
}
@keyframes mmFlash {
  0%   { opacity: 0; transform: scale(.6); }
  55%  { opacity: .85; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.06); }
}

/* 의식 문구 크로스페이드 */
#mmLoadingText { transition: opacity .5s ease; }
.mm-text-fade { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .mm-spark, .mm-mirror-active, .mm-flash { animation: none !important; }
  .mm-flash { opacity: .9; }
}


/* ── 결과 페이지: 스윽 등장 (섹션별 순차) ── */
.mm-rise {
  opacity: 0;
  animation: mmRise 1.2s ease-out forwards;
  animation-delay: var(--d, 0s);
}
@keyframes mmRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-rise { animation: none; opacity: 1; transform: none; }
}


/* ── 스탭 전용 대시보드 버튼 (오른쪽 위) ── */
.mm-dash-link {
  position: absolute; top: 1rem; right: 1.1rem; z-index: 10;
  font-size: 1.3rem; text-decoration: none;
  filter: drop-shadow(0 0 8px rgba(243,213,144,.5));
  opacity: .75; transition: opacity .2s, transform .2s;
}
.mm-dash-link:hover { opacity: 1; transform: scale(1.15); }


/* ── 오프닝: 거울이 안개 걷히듯 아주 천천히 떠오름 ── */
.mm-mirror-in .mm-mirror {
  opacity: 0;
  animation: mmMirrorIn 3s cubic-bezier(.25,.55,.3,1) forwards;
  animation-delay: .55s; /* 타이틀과 자연스럽게 겹치며 시작 */
}
@keyframes mmMirrorIn {
  0%   { opacity: 0; transform: translateY(16px) scale(.965); filter: blur(10px); }
  35%  { opacity: .55; filter: blur(5px); }
  70%  { opacity: .9; transform: translateY(4px) scale(.995); filter: blur(1.5px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.mm-idle-in > * {
  opacity: 0;
  animation: mmRise 1.6s ease-out forwards;
}
.mm-idle-in .mm-idle-orb { animation: mmRise 1.6s ease-out forwards, mmBreath 3s ease-in-out 3.6s infinite; animation-delay: 2.4s, 3.6s; }
.mm-idle-in p { animation-delay: 2.9s; }
@media (prefers-reduced-motion: reduce) {
  .mm-mirror-in .mm-mirror, .mm-idle-in > *, .mm-idle-in .mm-idle-orb { animation: none; opacity: 1; filter: none; transform: none; }
}


/* ── 카메라 영상 스으윽 페이드인 ── */
#mmVideo { opacity: 0; transition: opacity 1.4s ease; }
#mmVideo.mm-cam-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #mmVideo { transition: none; opacity: 1; } }

/* ── 간직 문구 ── */
.mm-keep-line {
  color: var(--mm-dim); font-size: .9rem; line-height: 1.8;
  margin-top: 1.8rem; font-style: italic;
}