/* Meridian Atlas 소개 창 (PLAN 261005-3, PLAN 261008 §3.9 S6)
   마켓플레이스(로그아웃 상태 설치 → 로그인 안내)와 마이페이지 어셋(받은 플러그인 상세 「미리보기」)이 함께 쓴다.
   그리는 함수는 /assets/js/components/atlasIntro.js. 「Atlas」 필기체는 Allura(부르는 화면이 Google Fonts 를 불러온다).
   영상 칸은 아틀라스 다크 배경과 같은 색(영상이 늘 어둡다), 글 쪽은 --ui-* 토큰. */
.mkl-back {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0, 0, 0, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: mklFade .32s ease-out;
}
.mkl {
    width: min(92vw, 960px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--ui-surface); color: var(--ui-text);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    animation: mklIn .5s cubic-bezier(.16, 1, .3, 1);
}
.mkl-media { background: #0f1115; aspect-ratio: 4 / 5; position: relative; overflow: hidden; }
.mkl-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mkl-body { display: flex; flex-direction: column; justify-content: flex-start; padding: 32px 32px 24px; position: relative; }
.mkl-x {
    position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
    border: 0; border-radius: 8px; background: none; color: var(--ui-muted); font-size: 18px; cursor: pointer;
}
.mkl-x:hover { background: var(--ui-hover); }

/* 로고: 하트 70%·Meridian 글자 원래 크기의 정지 이미지, 오른쪽 아래에 필기체 「Atlas」를 겹친다.
   묶음(하트 왼쪽 끝~「Atlas」 끝)을 글 영역 가운데에 맞추려고 왼쪽으로 27px 옮긴다.
   transform 으로 옮기면 겹침 맥락이 새로 생겨 mix-blend-mode 가 먹지 않는다 — left 로. */
.mkl-brand { position: relative; left: -27px; display: inline-block; align-self: center; margin: auto auto 18px; }
.mkl-brand img { display: block; width: 209px; }
/* 로고 PNG 는 투명 바탕이다. 검정·흰 바탕을 mix-blend-mode 로 지우던 방식은 iOS 사파리에서 바탕이 드러났다(사용자 261010) */
.mkl-brand .is-dark { display: none; }
html[data-theme="dark"] .mkl-brand .is-dark { display: block; }
html[data-theme="dark"] .mkl-brand .is-light { display: none; }
.mkl-atlas {
    position: absolute; right: -64px; top: 33px; padding: 0 10px 6px;
    font: 54px/1 'Allura', cursive; color: var(--ui-text); pointer-events: none;
}
html[data-theme="dark"] .mkl-atlas { color: #fff; }

.mkl-lead { margin: 28px 0 24px; text-align: center; color: var(--ui-muted); font-size: 14px; }
.mkl ul { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mkl li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.mkl li i {
    width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
    background: var(--ui-info-bg); color: var(--ui-info); font-size: 13px;
}
.mkl-credit { font-size: 11px; color: var(--ui-muted); margin: 32px 0 0; text-align: center; }
.mkl-foot { margin-top: auto; padding-top: 32px; }
.mkl-btns { display: flex; gap: 8px; }
.mkl-btns button { flex: 1; min-height: 42px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.mkl-cancel { background: none; border: 0; color: var(--ui-muted); }
.mkl-cancel:hover { background: var(--ui-hover); }
.mkl-ok { border: 0; background: var(--color-primary); color: #fff; font-weight: 600; white-space: nowrap; }
/* 주 단추가 링크(앱 내려받기)이거나 진행 막대(받는 중)일 때 */
a.mkl-ok { flex: 1; min-height: 42px; border-radius: 8px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.mkl-foot .ui-progress { margin: 0; }
.mkl-foot .ui-progress-label { display: flex; justify-content: space-between; text-align: left; }

@keyframes mklFade { from { opacity: 0; } }
@keyframes mklIn { from { opacity: 0; transform: translateY(14px) scale(.94); } }

@media (max-width: 720px) {
    .mkl { grid-template-columns: 1fr; }
    .mkl-media { aspect-ratio: 16 / 10; }
    /* 「업데이트 v1.6.0 · 67 MB」가 390 폭에서 두 줄로 꺾이지 않게 닫기를 좁힌다 */
    .mkl-btns .mkl-cancel { flex: 0 0 88px; }
}
@media (prefers-reduced-motion: reduce) {
    .mkl-back, .mkl { animation: none; }
}