/* MUE:DESK 2.0 페이지(소개 · Pro). 틀은 kit.css, 색은 깊은 남보라 + MUE 연보라(#C9B6F5) 하나. 화면은 실제 2.0 녹화. */
.kit--mue2 {
  --k-bg: #07061a;
  --k-bg-2: #120d36;
  --k-glow-1: #3a2a9e;
  --k-glow-2: #7a4fd0;
  --k-brand: #6e4fd8;
  --k-brand-hover: #7d5fe6;
  --k-frame: rgba(190, 170, 255, 0.1);
  --k-frame-line: rgba(220, 205, 255, 0.13);
  --k-panel-a: #120f33;
  --k-panel-b: #5b44b8;
  --k-band: #2a1f6e;
  --k-foot-a: #0b0920;
  --k-foot-b: #4a35a8;
  --k-word: #e4dbff;
  --m2-lilac: #c9b6f5;
}
.kit--mue2 .k-h1__ko, .kit--mue2 .k-h2__ko { color: var(--m2-lilac); }
.kit--mue2 .k-logo img { border-radius: 0; object-fit: contain; }
.kit--mue2 .k-band__mark { object-fit: contain; }


/* 문제와 답 (그림 없이 문장만) */
.m2-why { padding-block: clamp(48px, 7vw, 104px) clamp(16px, 3vw, 40px); }
.m2-why .k-cmp__a { margin-top: 20px; }

/* 기능 카드 속 실제 화면 */
.kit--mue2 .k-card__panel.is-contain .k-clip { max-height: 480px; object-fit: contain; }
.kit--mue2 .k-clip.m2-tall { width: auto; max-width: 100%; height: min(480px, 100%); }
.m2-shot { display: block; max-width: 100%; height: auto; border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6); }
.kit--mue2 .k-gl__shot { background: radial-gradient(120% 100% at 30% 120%, rgba(122, 79, 208, 0.55), transparent 70%), rgba(6, 5, 20, 0.6); }

/* 첫 화면 오른쪽: 16:9 모션 그래픽 자동 재생 + 소리 단추 */
.m2-film-hero { position: relative; margin: 0; }
.m2-film-hero video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: clamp(14px, 1.8vw, 24px); border: 1px solid rgba(220, 205, 255, 0.22); background: #05040f; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9), 0 0 0 8px rgba(255, 255, 255, 0.04); }
.m2-sound { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(10, 8, 30, 0.6); color: #fff; cursor: pointer; backdrop-filter: blur(8px); transition: background 0.2s, transform 0.2s var(--k-ease); }
.m2-sound:hover { background: rgba(110, 79, 216, 0.8); transform: scale(1.06); }
.m2-sound .ico { width: 18px; height: 18px; }
.m2-sound .ico:last-child, .m2-sound[aria-pressed="true"] .ico:first-child { display: none; }
.m2-sound[aria-pressed="true"] .ico:last-child { display: block; }
.m2-sound[aria-pressed="true"] { background: var(--k-brand); border-color: transparent; }
.m2-film-hero .m2-sound { right: 16px; bottom: 16px; width: 44px; height: 44px; }

/* 브랜드 필름 구역: 세로 모션 그래픽 2편 */
.m2-films { padding-block: clamp(40px, 6vw, 96px); scroll-margin-top: 90px; }
.m2-reels { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 18px); max-width: 640px; margin: 0 auto; }
.m2-reel { position: relative; margin: 0; min-width: 0; }
.m2-reel video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 20px; border: 1px solid rgba(220, 205, 255, 0.22); background: #05040f; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.9), 0 0 0 8px rgba(255, 255, 255, 0.04); }

/* 데모 다운로드 안내 */
.m2-dl-hero { text-align: center; padding-bottom: clamp(40px, 6vw, 80px); }
.m2-dl-sign { margin: 18px 0 0; font-size: 15px; color: var(--m2-lilac); }
.m2-dl-sign span { color: var(--k-ink-2); }
.m2-dl { max-width: 560px; margin: clamp(32px, 4vw, 48px) auto 0; padding: clamp(22px, 3vw, 32px); border-radius: 32px; border: 1px solid color-mix(in srgb, var(--m2-lilac) 45%, transparent); background: linear-gradient(160deg, rgba(201, 182, 245, 0.14), rgba(110, 79, 216, 0.06)); scroll-margin-top: 100px; }
.m2-dl__btn { width: 100%; font-size: 18px; }
.m2-dl__btn.is-off { pointer-events: none; opacity: 0.55; }
.m2-dl__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 16px 0 0; font-size: 14px; color: var(--k-ink-2); }
.m2-dl__meta span { display: inline-flex; align-items: center; gap: 6px; }
.m2-dl__meta .ico { width: 14px; height: 14px; }
.m2-dl__note { margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; background: rgba(243, 205, 122, 0.12); color: #f3cd7a; font-size: 14px; line-height: 1.6; }
.m2-dl__note a, .m2-after a, .m2-dl__fine a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.m2-dl__fine { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--k-ink-2); }
.m2-dl__fine b { color: #fff; }
@media (min-width: 760px) { .m2-steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .m2-steps--4 { grid-template-columns: repeat(4, 1fr); } }
.m2-after { display: grid; gap: 14px; max-width: 920px; margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 760px) { .m2-after { grid-template-columns: repeat(3, 1fr); } }
.m2-after li { display: grid; gap: 8px; padding: 22px; border-radius: 24px; border: 1px solid var(--k-frame-line); background: rgba(255, 255, 255, 0.04); }
.m2-after strong { font-size: 17px; }
.m2-after span { font-size: 15px; line-height: 1.65; color: var(--k-ink-2); }

/* 무료판 / Pro 표 */
.m2-plans { padding-block: clamp(40px, 6vw, 96px); scroll-margin-top: 90px; }
.m2-plans__table { max-width: 920px; margin: 0 auto; overflow-x: auto; border-radius: 28px; border: 1px solid var(--k-frame-line); background: linear-gradient(135deg, color-mix(in srgb, var(--k-frame) 130%, transparent), var(--k-frame)); }
.m2-plans__table table { width: 100%; min-width: 520px; table-layout: fixed; border-collapse: collapse; font-size: 15px; }
.m2-plans__c1 { width: 38%; } .m2-plans__c2 { width: 31%; } .m2-plans__c3 { width: 31%; }
.m2-plans__table th, .m2-plans__table td { padding: 14px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--k-frame-line); overflow-wrap: anywhere; }
.m2-plans__table thead th { border-top: 0; font-size: 13px; font-weight: 700; color: var(--k-ink-2); }
.m2-plans__table thead th:last-child { color: var(--m2-lilac); }
.m2-plans__table tbody th { font-weight: 700; }
.m2-plans__table td { color: var(--k-ink-2); }
.m2-plans__table td:last-child { color: #fff; }
.m2-plans__table td.is-off { color: rgba(255, 255, 255, 0.4); }
.m2-plans__more { margin: 24px 0 0; text-align: center; }
.m2-old { color: var(--k-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.m2-old:hover { color: #fff; }

/* ── Pro 판매 상세 ── */
.m2-pro-hero { text-align: center; padding-bottom: clamp(48px, 7vw, 96px); }
.m2-kicker { margin: 0 0 18px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m2-lilac); }
.m2-pro-hero__t { margin-inline: auto; }
.m2-pro-hero__lede { margin: 0 auto; max-width: 34em; }
.m2-prices { display: grid; gap: 16px; max-width: 820px; margin: clamp(36px, 5vw, 56px) auto 0; text-align: left; scroll-margin-top: 100px; }
@media (min-width: 760px) { .m2-prices { grid-template-columns: 1fr 1fr; } }
.m2-price { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 3vw, 32px); border-radius: 32px; border: 1px solid var(--k-frame-line); background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)); }
.m2-price.is-main { border-color: color-mix(in srgb, var(--m2-lilac) 55%, transparent); background: linear-gradient(160deg, rgba(201, 182, 245, 0.16), rgba(110, 79, 216, 0.08)); }
.m2-price__name { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.m2-price__amount { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.m2-price__amount b { font-family: var(--k-display); font-size: clamp(36px, 4vw, 48px); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.m2-price__amount span { color: var(--k-ink-2); font-size: 15px; }
.m2-price__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; color: var(--k-ink-2); }
.m2-price__list li { display: flex; gap: 8px; align-items: flex-start; }
.m2-price__list .ico { margin-top: 3px; color: var(--m2-lilac); }
.m2-price .k-btn { margin-top: auto; width: 100%; }
.m2-price .buy-price, .k-final .buy-price { display: none; }
.m2-prices__soon { margin: 20px 0 0; }
.m2-prices__soon .k-btn { min-width: min(100%, 320px); }
.m2-pro-hero__free { margin: 24px 0 0; font-size: 15px; color: var(--k-ink-2); }
.m2-pro-hero__free a, .k-final__info a, .m2-faq a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.m2-unlocks { padding-block: clamp(40px, 6vw, 96px); scroll-margin-top: 90px; }
.m2-unlocks__grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .m2-unlocks__grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.m2-unlock { padding: 14px 14px 22px; border-radius: 28px; border: 1px solid var(--k-frame-line); background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); }
.m2-unlock__shot { display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 18px; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 100% at 30% 120%, rgba(122, 79, 208, 0.5), transparent 70%), rgba(6, 5, 20, 0.7); }
.m2-unlock__shot img { max-width: 88%; max-height: 84%; width: auto; height: auto; border-radius: 10px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7); }
.m2-unlock__shot video { width: 100%; height: 100%; object-fit: cover; }
.m2-unlock h3 { margin: 0 8px 6px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.m2-unlock p { margin: 0 8px; font-size: 15px; line-height: 1.65; color: var(--k-ink-2); }

.m2-key { padding-block: clamp(40px, 6vw, 96px); scroll-margin-top: 90px; }
.m2-steps { display: grid; gap: 14px; max-width: 920px; margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 760px) { .m2-steps { grid-template-columns: repeat(3, 1fr); } }
.m2-steps li { display: grid; gap: 6px; padding: 22px; border-radius: 24px; border: 1px solid var(--k-frame-line); background: rgba(255, 255, 255, 0.04); }
.m2-steps b { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 50%; background: var(--m2-lilac); color: #1a1240; font-weight: 800; }
.m2-steps strong { font-size: 17px; }
.m2-steps span { font-size: 15px; line-height: 1.6; color: var(--k-ink-2); }
.m2-founders { display: flex; gap: 10px; align-items: flex-start; max-width: 920px; margin: 20px auto 0; padding: 16px 20px; border-radius: 18px; background: rgba(201, 182, 245, 0.1); font-size: 15px; color: var(--k-ink-2); }
.m2-founders b { color: #fff; }
.m2-founders .ico { margin-top: 3px; color: var(--m2-lilac); }

.m2-faq { padding-block: clamp(40px, 6vw, 96px) clamp(56px, 8vw, 120px); scroll-margin-top: 90px; }
.m2-faq__list { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.m2-faq__item { border-radius: 20px; border: 1px solid var(--k-frame-line); background: rgba(255, 255, 255, 0.04); }
.m2-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 20px; font-weight: 700; cursor: pointer; list-style: none; }
.m2-faq__item summary::-webkit-details-marker { display: none; }
.m2-faq__item summary::after { content: '+'; flex: none; width: 24px; height: 24px; display: grid; place-items: center; line-height: 1; font-size: 22px; font-weight: 400; color: var(--m2-lilac); transition: transform 0.25s var(--k-ease); }
.m2-faq__item[open] summary::after { transform: rotate(45deg); }
.m2-faq__item p { margin: 0; padding: 0 20px 18px; font-size: 15px; line-height: 1.7; color: var(--k-ink-2); }
.m2-faq__mail { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--k-ink-2); }

@media (max-width: 540px) {
  .m2-plans__table th, .m2-plans__table td { padding: 12px 14px; }
}
/* 좁은 화면에서는 가운데 글과 별 장식이 겹치므로 별을 숨긴다 */
@media (max-width: 760px) { .kit--mue2 .k-hero .k-spark { display: none; } }
.m2-gl-face .k-gl__shot img { width: 46%; max-width: 120px; height: auto; }
@media (max-width: 899px) { .kit--mue2 .k-card__panel.is-clip { min-height: 0; } }
@media (max-width: 600px) {
  .m2-plans__table table { min-width: 0; font-size: 13px; }
  .m2-plans__table th, .m2-plans__table td { padding: 11px 10px; }
  .m2-plans__c1 { width: 34%; } .m2-plans__c2, .m2-plans__c3 { width: 33%; }
}

/* 첫 화면: 소식 띠가 있으면 왼쪽 맨 위(오른쪽 영상 윗선과 같은 높이)에 두고, 글 덩어리는 영상 높이 안에서 가운데 */
@media (min-width: 1000px) {
  .m2-hero .k-hero__grid { align-items: stretch; }
  .m2-hero__copy { display: flex; flex-direction: column; }
  .m2-hero__copy .k-news-slot { margin-bottom: 28px; }
  /* 왼쪽 칸 폭에 한 줄로: 링크 글은 화살표만, 긴 제목은 말줄임 */
  .m2-hero__copy .k-news { flex-wrap: nowrap; max-width: 100%; }
  .m2-hero__copy .k-news__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m2-hero__copy .k-news__go { font-size: 0; gap: 0; padding: 0 8px 0 0; }
  .m2-hero__copy .k-h1 { margin-top: auto; }
  .m2-hero__copy > :last-child { margin-bottom: auto; }
  .m2-hero .k-hero__visual { align-self: center; }
}