/* ══════════════════════════════════════════════════════════
   🍉 청취담 친구모임 — 자세히 보기

   스토리와 달리 '읽는 화면' 이다. 어두운 판은 사진이 주인공일 때 좋지만
   글이 주인공인 곳에서는 답답하다. 그래서 흰 바탕에 산뜻하게 간다.

   ⚠️ 아래 플로팅 박스가 글을 가리면 안 된다.
      본문 아래에 박스 높이(--mv-dock)만큼 자리를 비워 둔다.
   ══════════════════════════════════════════════════════════ */
.mv-wrap {
    --mv-dock: 96px;                 /* 아래 플로팅 박스가 차지하는 높이 */
    --ink: #10221E;                  /* 글 */
    --ink-soft: #5B726C;             /* 거드는 글 */
    --line: #E3EDEA;
    --red: #C82433;
    --green: #123C36;

    /* ⚠️ 쪽지 서랍(2147483601) 위에 떠야 한다.
          쪽지의 자리 카드를 눌러 여는 길이 있는데, 아래에 깔리면 눌러도 아무 일이 없어 보인다. */
    position: fixed; inset: 0; z-index: 2147483606;
    background: #FFFFFF; display: none; flex-direction: column;
    font-family: 'Pretendard', -apple-system, sans-serif; letter-spacing: -0.02em;
    color: var(--ink); overscroll-behavior: contain;
}
.mv-wrap.on { display: flex; }
.mv-wrap * { -webkit-tap-highlight-color: transparent; }

/* ── 위쪽 : 몇 번째인지 · 누구의 모임인지 ── */
.mv-top {
    flex: 0 0 auto; background: #FFFFFF; border-bottom: 1px solid var(--line);
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px;
}
.mv-bars { display: flex; gap: 4px; }
.mv-bars span { flex: 1; height: 3px; border-radius: 3px; background: #E3EDEA; }
.mv-bars span.at { background: var(--red); }
.mv-who { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.mv-who .face {
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
    background: #EDF4F2; display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; color: #9CB2AC;
}
.mv-who .face img { width: 100%; height: 100%; object-fit: cover; }
.mv-who .nm { font-size: 0.9rem; font-weight: 800; flex: 0 1 auto; min-width: 0;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-who .sub { font-size: 0.74rem; font-weight: 600; color: var(--ink-soft);
               flex: 1 1 auto; min-width: 0;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-who .x {
    flex: 0 0 auto; border: 0; background: #F0F5F3; color: var(--ink-soft);
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 0.9rem;
}
.mv-who .x:hover { background: #E3EDEA; }

/* ── 읽는 자리 ── */
.mv-page {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    /* pan-y 라야 세로로 구르면서 옆으로 미는 손짓을 우리가 받을 수 있다 */
    touch-action: pan-y; background: #FFFFFF;
}
.mv-page::-webkit-scrollbar { width: 0; }
.mv-slide { will-change: transform; }
/* ⚠️ 갈래 판이 흰색이라, 바탕까지 흰색이면 어디까지가 한 묶음인지 안 보인다.
      적는 화면에서만 바탕을 살짝 눕혀 판이 떠 보이게 한다. */
.mv-slide.editing { background: #F2F7F5; min-height: 100%; }
.mv-slide.snap { transition: transform 0.22s ease; }

/* 표지 사진 — 없으면 배지 빛깔의 산뜻한 판 */
.mv-hero { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 46vh;
           background: #EDF4F2; overflow: hidden; }
.mv-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-hero.blank {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #E9F5F0, #DCEDE7);
}
.mv-hero.blank {
    flex-direction: column; gap: 16px; padding: 24px;
}
.mv-hero.blank i { font-size: 2.4rem; color: #A8C4BC; }
.mv-hero.blank .say { margin: 0; text-align: center; word-break: keep-all; }
.mv-hero.blank .say b {
    display: block; font-size: 1.02rem; font-weight: 800; line-height: 1.6; color: #2C5C51;
}
.mv-hero.blank .say span {
    display: block; margin-top: 6px; font-size: 0.84rem; font-weight: 600;
    line-height: 1.6; color: #7FA095;
}

.mv-body { padding: 18px 18px 0; }

/* ══════════════════════════════════════════════════════════
   📏 맨 아래에 비워 두는 자리 — 아래 줄에 글이 가리지 않게

   ⚠️ 예전에는 .mv-body 의 아래 여백으로 두었다. 그런데 열 가지 스타일 서식이
      저마다 .mv-body 의 padding 을 다시 적어(예: .mv-look .mv-body { padding: 20px 18px 26px })
      그때마다 이 여백이 지워졌다. 그래서 스타일을 입은 모임은 맨 아래 글
      (댓글 칸 · 올린 때 · 모집 마감)이 아래 줄 뒤로 깔려 안 보였다.
   ⚠️ 진짜 칸을 하나 두면 어떤 서식도 이걸 지울 수 없다. 높이는 아래 줄을 재서 넣는다.
   ══════════════════════════════════════════════════════════ */
.mv-tail { height: var(--mv-dock, 96px); flex: 0 0 auto; }

/* 제목 자리 — 배지 · 이름.
   ⚠️ 배지를 제목에 바짝 붙이면 둘이 서로를 밀어 답답해 보인다. 한 줄 띄우고 크기를 맞춘다. */
/* 배지는 그린(무슨 자리인지), 재촉하는 표는 레드(언제까지인지) — 색으로 역할을 가른다 */
.mv-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: #E8F3EE; color: var(--green);
    border-radius: 999px; padding: 6px 13px 6px 11px;
    font-size: 0.76rem; font-weight: 800; margin-bottom: 11px;
}
.mv-badge i { font-size: 0.8rem; }
.mv-title {
    margin: 0 0 15px; font-size: 1.45rem; font-weight: 900; line-height: 1.35;
    word-break: keep-all; color: var(--green);
}
.mv-title::after {
    content: ''; display: block; width: 34px; height: 3px; border-radius: 3px;
    background: var(--red); margin-top: 12px;
}

/* 🚶 '이미 가기로 한 자리' 임을 못박는 한 줄.
   ⚠️ 이 기능의 뿌리다 — 올린 사람은 사람을 모으는 게 아니라, 이미 갈 곳이 있다.
      이 말이 없으면 합류가 없을 때 '실패한 모집' 처럼 보인다. */
/* 두 줄 표어 — 이 자리가 무엇인지 한눈에.
   ⚠️ 앞줄은 또렷하게(초대), 뒷줄은 옅게(그래도 나는 간다).
      둘의 무게가 같으면 '올 사람 없으면 안 간다' 로 읽힌다. */
.mv-solo {
    position: relative; background: #F2F7F5; border-radius: 16px;
    padding: 16px 18px 15px 20px; margin: 0 0 16px;
    border-left: 4px solid var(--green); word-break: keep-all;
}
.mv-solo .a {
    margin: 0; font-size: 0.94rem; font-weight: 800; line-height: 1.6; color: var(--green);
}
.mv-solo .b {
    margin: 6px 0 0; font-size: 0.82rem; font-weight: 600; line-height: 1.6; color: #7C948D;
}
/* 적으러 들어왔을 때는 조금 더 크게 — 무엇을 올리는 자리인지 먼저 알린다 */
.mv-ed .mv-solo { margin-bottom: 20px; padding: 18px 20px 17px 22px; }
.mv-ed .mv-solo .a { font-size: 1rem; }
/* 함께 기획은 레드 결 — '각 잡고 사람을 구한다' 는 뜻이 색으로도 갈린다 */
.mv-solo.plan { background: #FDEBED; border-left-color: var(--red); }
.mv-solo.plan .a { color: var(--red); }
.mv-solo.plan .b { color: #B0757C; }

/* 이름표 옆에 붙는 잔글씨 */
.mv-lb-x { font-weight: 600; color: var(--ink-soft); }

/* 🏷 어떤 자리인지 — 일상으로의 초대인지, 각 잡은 자리인지 한눈에 */
.mv-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mv-kind {
    display: inline-flex; align-items: center; gap: 5px;
    background: #E8F3EE; color: var(--green); border-radius: 8px; padding: 5px 9px;
    font-size: 0.71rem; font-weight: 800;
}
.mv-kind i { font-size: 0.68rem; opacity: 0.75; }
/* 각 잡고 함께 정하는 자리만 레드로 — 기본(일상으로의 초대)이 눈에 덜 띄어야 부담이 없다 */
.mv-kind.plan { background: #FDEBED; color: var(--red); }

/* ⚠️ 합류한 뒤에 약속이 바뀌었을 때 — 다른 무엇보다 먼저 눈에 들어와야 한다 */
.mv-ask-again {
    background: #FFF7E6; border: 1px solid #F0DCA8; border-radius: 16px;
    padding: 16px 17px 15px; margin: 0 0 16px; word-break: keep-all;
}
.mv-ask-again b {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.92rem; font-weight: 900; color: #9A6B08;
}
.mv-ask-again p {
    margin: 8px 0 13px; font-size: 0.83rem; font-weight: 600;
    line-height: 1.7; color: #7C6323;
}
.mv-ask-again .two { display: flex; gap: 8px; }
.mv-ask-again .two button {
    flex: 1; border: 0; border-radius: 12px; padding: 12px 8px; cursor: pointer;
    font-family: inherit; font-size: 0.83rem; font-weight: 800;
}
.mv-ask-again .two .yes { background: var(--green); color: #FFFFFF; }
.mv-ask-again .two .no { background: #FFFFFF; color: #8A6A1F; border: 1px solid #EBD9A8; }

/* 📜 바뀐 자국 — 몰래 바뀌지 않았다는 증거다 */
.mv-chg { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.mv-chg .row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px;
    background: #F7FAF9; border: 1px solid var(--line); border-radius: 12px;
    padding: 10px 12px; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft);
}
/* 날짜 · 장소처럼 약속을 바꾸는 것은 눈에 띄게 */
.mv-chg .row.big { background: #FFF7E6; border-color: #F0DCA8; }
.mv-chg .f { font-weight: 800; color: var(--green); flex: 0 0 auto; }
.mv-chg .row.big .f { color: #9A6B08; }
.mv-chg .v { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto; }
.mv-chg .v s { color: #A8BAB5; }
.mv-chg .v i { font-size: 0.66rem; color: #B4C7C1; flex: 0 0 auto; }
.mv-chg .v b { font-weight: 800; color: var(--ink); }
.mv-chg .t { font-size: 0.71rem; color: #A8BAB5; flex: 0 0 auto; margin-left: auto; }

/* 다시 확인 중 · 빠진 사람 */
.mv-chip.recheck { background: #FFF7E6; border-color: #F0DCA8; color: #8A6A1F; }
.mv-chip.out { background: #F4F4F4; border-color: #E6E6E6; color: #8C8C8C; }
.mv-chip.out em { font-style: normal; font-weight: 600; color: #A5A5A5; }

/* 🔒 합류해야 볼 수 있는 자리 */
.mv-lock {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: #F7FAF9; border: 1px dashed var(--line); border-radius: 18px;
    padding: 28px 20px; margin-bottom: 24px; text-align: center;
}
.mv-lock i { font-size: 1.5rem; color: #A8C4BC; }
.mv-lock b { font-size: 0.92rem; font-weight: 900; color: var(--green); }
.mv-lock span { font-size: 0.8rem; font-weight: 600; line-height: 1.7;
                color: var(--ink-soft); word-break: keep-all; }

/* 🔎 눌러서 여는 칸 (배지 고르기) — 겉모습은 입력칸과 같게 두어 줄이 흐트러지지 않는다 */
.mv-in.pickbtn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    text-align: left; cursor: pointer;
}
.mv-in.pickbtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-in.pickbtn i { color: #9CB2AC; flex: 0 0 auto; }
.mv-in.pickbtn.empty span { color: #9CB2AC; font-weight: 500; }

/* 배지 찾아 고르는 판 */
.mv-badges {
    display: flex; flex-wrap: wrap; gap: 7px;
    max-height: 46vh; overflow-y: auto; margin: 12px 0;
}
.mv-badges .one {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line); background: #F7FAF9; border-radius: 999px;
    padding: 9px 13px; cursor: pointer; font-family: inherit;
    font-size: 0.8rem; font-weight: 700; color: var(--ink);
}
.mv-badges .one:hover { background: #E8F3EE; border-color: #BFDCD2; }
.mv-badges .one i { font-size: 0.75rem; color: var(--red); }

/* 두 갈래 중 하나 고르기 */
.mv-pickrow { display: flex; gap: 8px; }
.mv-pickrow button {
    flex: 1; min-width: 0; border: 1px solid var(--line); background: #F7FAF9;
    border-radius: 14px; padding: 14px 10px; cursor: pointer; font-family: inherit;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mv-pickrow button b { font-size: 0.82rem; font-weight: 800; color: var(--ink); }
.mv-pickrow button span { font-size: 0.68rem; font-weight: 600; color: var(--ink-soft);
                          word-break: keep-all; text-align: center; }
.mv-pickrow button.on { border-color: var(--red); background: #FDEBED; }
.mv-pickrow button.on b { color: var(--red); }
.mv-pickrow button.on span { color: #B0525C; }

/* 적으러 들어왔을 때의 첫 물음 */
.mv-ask { margin: 4px 0 7px; font-size: 1.3rem; font-weight: 900; color: var(--green); }
.mv-ask-sub { margin: 0 0 20px; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }

.mv-dock .say.off { opacity: 0.55; }

.mv-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.mv-meta span {
    display: inline-flex; align-items: center; gap: 5px;
    background: #F2F7F5; border: 1px solid var(--line); color: #33514A;
    border-radius: 999px; padding: 7px 12px;
    font-size: 0.76rem; font-weight: 700;
}
.mv-meta span b { font-weight: 900; color: var(--ink); }
.mv-meta span i { color: #7E968F; font-size: 0.72rem; }
.mv-meta span.hot { background: #FDEBED; border-color: #F8D4D8; color: var(--red); }
.mv-meta span.hot b { color: var(--red); }
.mv-meta span.full { background: #EFEFEF; border-color: #E4E4E4; color: #7A7A7A; }
.mv-meta span.full b { color: #7A7A7A; }

/* 📝 본문 — 글과 사진이 번갈아 쌓인다 (블로그처럼) */
.mv-blocks { margin-bottom: 26px; }
.mv-blocks p {
    margin: 0 0 16px; font-size: 0.95rem; line-height: 1.9; font-weight: 500;
    white-space: pre-wrap; word-break: keep-all; color: #24403A;
}
.mv-blocks figure { margin: 0 0 16px; }
.mv-blocks img { width: 100%; border-radius: 16px; display: block; background: #EDF4F2; }
.mv-blocks .none { color: #9CB2AC; font-weight: 600; }

/* 작은 제목 — 앞에 청취담 레드 막대를 세워 눈이 걸리게 한다 */
.mv-h {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.84rem; font-weight: 900; color: var(--green); margin: 0 0 12px;
}
.mv-h::before {
    content: ''; width: 3px; height: 13px; border-radius: 3px;
    background: var(--red); flex: 0 0 auto;
}

/* 올린 때 · 모집 마감 — 끝에 조용히 적어 둔다 */
.mv-stamp {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--line);
}
.mv-stamp span {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.75rem; font-weight: 600; color: #8CA39D;
}
.mv-stamp i { width: 13px; text-align: center; color: #B4C7C1; }
.mv-people { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.mv-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 5px;
    background: #F2F7F5; border: 1px solid var(--line); border-radius: 999px;
    font-size: 0.78rem; font-weight: 700; color: #23413B;
}
.mv-chip img, .mv-chip i {
    width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
    background: #E1EBE8; color: #9CB2AC;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.62rem; flex: 0 0 auto;
}
.mv-chip.wait { background: #FFF7E6; border-color: #F5E3BB; }
.mv-chip .yn { display: inline-flex; gap: 4px; margin-left: 3px; }
.mv-chip .yn button {
    border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer;
    font-family: inherit; font-size: 0.72rem; font-weight: 800;
}
.mv-chip .yn .y { background: #1F9D63; color: #FFFFFF; }
.mv-chip .yn .n { background: #E7EDEB; color: #5B726C; }
.mv-chip .yn button:disabled { opacity: 0.5; cursor: default; }

/* 호스트가 할 일 */
.mv-host { display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }
.mv-hbtn {
    border: 0; border-radius: 14px; padding: 14px 12px; cursor: pointer;
    background: var(--red); color: #FFFFFF;
    font-family: inherit; font-size: 0.86rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.mv-hbtn.line { background: #F2F7F5; color: #33514A; border: 1px solid var(--line); }
.mv-hbtn:hover { filter: brightness(0.96); }

/* ══════════════════════════════════════════════════════════
   ✏️ 이 자리에서 고치기 — 보던 화면이 그대로 고치는 화면이 된다
   ══════════════════════════════════════════════════════════ */
/* 📷 표지 — 친구들 화면에 제일 먼저 뜨는 얼굴이라, 적는 화면에서도 맨 위에 크게 둔다 */
/* ⚠️ 표지는 친구들 화면에 제일 먼저 뜨는 얼굴이다.
      적을 때도 화면 위쪽을 넉넉히(1/3쯤) 써야 무엇을 넣는지 보인다. */
.mv-cover {
    position: relative; width: 100%; height: 34vh; min-height: 200px; max-height: 44vh;
    background: linear-gradient(150deg, #E9F5F0, #DCEDE7); overflow: hidden;
}
.mv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 빈 표지 자체가 단추 — 눌러서 앨범에서 불러온다 */
.mv-cover .empty {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px; padding: 24px 22px 76px;
    text-align: center; word-break: keep-all;
    border: 0; background: transparent; cursor: pointer; font-family: inherit; width: 100%;
}
.mv-cover .empty em {
    font-style: normal; font-size: 0.74rem; font-weight: 800; color: var(--green);
    background: rgba(255, 255, 255, 0.86); border-radius: 999px; padding: 7px 14px; margin-top: 4px;
}
/* 사진이 있으면 위아래로 끌어 보일 자리를 맞춘다 */
.mv-cover img { cursor: grab; touch-action: none; }
.mv-cover.dragging img { cursor: grabbing; }
.mv-cover.has::after {
    content: '위아래로 끌어 보일 자리를 맞춰요';
    position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
    background: rgba(9, 32, 27, 0.62); color: #FFFFFF; border-radius: 999px;
    padding: 6px 12px; font-size: 0.71rem; font-weight: 700; pointer-events: none;
}
/* 🖼 적는 화면의 표지 = 간단화면(.mb-hero)과 같은 크기 · 같은 비율.
   ⚠️ 예전에는 34vh 라 화면 삼분의 일을 먹었다. 올라간 모습은 오분의 일인데
      적을 때만 커서, 「이만큼 크게 나오나」 하고 사진을 다시 고르게 됐다.
   ⚠️ 두 줄 표어는 바로 아래 「오늘 뭐 할 예정인가요」 칸에 또 나온다 —
      좁아진 표지에서는 접는다. 같은 말이 두 번 보이면 어느 쪽이 진짜인지 모른다. */
.mv-cover.brief {
    height: auto; min-height: 0; max-height: 20vh; aspect-ratio: 4 / 3;
}
.mv-cover.brief .empty { padding: 10px 14px 58px; gap: 6px; }
.mv-cover.brief .empty b,
.mv-cover.brief .empty span { display: none; }
.mv-cover.brief .empty i { font-size: 1.7rem; }
.mv-cover.brief .empty em { margin-top: 0; font-size: 0.72rem; padding: 6px 12px; }
.mv-cover.brief .tools { padding: 9px; gap: 6px; }
.mv-cover.brief.has::after { font-size: 0.66rem; padding: 5px 10px; top: 8px; }

.mv-cover .empty i { font-size: 2.1rem; color: #A8C4BC; }
.mv-cover .empty b { font-size: 0.95rem; font-weight: 800; line-height: 1.6; color: #2C5C51; }
.mv-cover .empty span { font-size: 0.8rem; font-weight: 600; line-height: 1.6; color: #7FA095; }
/* 단추는 아래에 얹는다 — 사진이 있을 때도 가리지 않게 어두운 자락을 깐다 */
.mv-cover .tools {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; gap: 7px; padding: 12px;
}
.mv-cover.has .tools {
    background: linear-gradient(0deg, rgba(9, 32, 27, 0.62), transparent);
}
.mv-cover .tools button {
    flex: 1 1 auto; min-width: 0; border: 0; border-radius: 12px; cursor: pointer;
    background: rgba(255, 255, 255, 0.94); color: var(--green);
    padding: 11px 8px; font-family: inherit; font-size: 0.79rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    box-shadow: 0 2px 10px -4px rgba(16, 34, 30, 0.4);
}
.mv-cover .tools button:hover { background: #FFFFFF; }
.mv-cover .tools button.rm { flex: 0 0 auto; width: 44px; color: var(--red); }

.mv-ed { padding: 22px 20px calc(var(--mv-dock) + 36px); }

/* 갈래마다 흰 판으로 떼어 놓는다 — 한 덩어리로 붙어 있으면 어디까지가 한 묶음인지 알 수 없다 */
.mv-sec {
    background: #FFFFFF; border: 1px solid var(--line); border-radius: 20px;
    padding: 20px 18px 22px; margin-bottom: 14px;
}
.mv-sec-h {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 4px; font-size: 0.86rem; font-weight: 900; color: var(--green);
}
.mv-sec-h::before {
    content: ''; width: 3px; height: 14px; border-radius: 3px;
    background: var(--red); flex: 0 0 auto;
}
.mv-lb {
    display: block; font-size: 0.79rem; font-weight: 800; color: #45635B;
    margin: 22px 0 9px;
}
.mv-lb:first-child { margin-top: 0; }
.mv-sec-h + .mv-lb { margin-top: 16px; }
.mv-in {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--line); background: #F7FAF9; border-radius: 14px;
    padding: 14px 15px; outline: none;
    font-family: inherit; font-size: 0.88rem; font-weight: 600; color: var(--ink);
}
/* 예시 문구는 연하게 — 적어 둔 글과 헷갈리면 안 된다 */
.mv-in::placeholder { color: #ABBFB9; font-weight: 500; }
.mv-in:focus { border-color: var(--red); background: #FFFFFF; }
.mv-sec .mv-in { background: #F7FAF9; }
.mv-sec .mv-in:focus { background: #FFFFFF; }
.mv-two { display: flex; gap: 9px; }
.mv-two > div { flex: 1; min-width: 0; }
.mv-tip {
    display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0;
    font-size: 0.73rem; font-weight: 600; line-height: 1.6; color: var(--ink-soft);
    word-break: keep-all;
}
.mv-tip i { color: var(--red); margin-top: 2px; flex: 0 0 auto; }

/* 글 덩이 · 사진 덩이 */
.mv-stack { display: flex; flex-direction: column; gap: 9px; margin-bottom: 10px; }
.mv-blk {
    position: relative; border: 1px solid var(--line); border-radius: 14px;
    background: #F7FAF9; padding: 8px; overflow: hidden;
}
.mv-blk textarea {
    width: 100%; box-sizing: border-box; border: 0; background: transparent;
    outline: none; resize: vertical; font-family: inherit;
    font-size: 0.88rem; font-weight: 500; line-height: 1.8; color: var(--ink);
    padding: 4px 52px 4px 4px; min-height: 84px;
}
.mv-blk.pic { padding: 0; line-height: 0; }
.mv-blk.pic img { width: 100%; display: block; max-height: 280px; object-fit: cover; }
/* 사진을 눌러 바로 바꾸는 자리 — 사진 아래에 붙여 둔다 */
.mv-blk .swap {
    width: 100%; border: 0; border-top: 1px solid var(--line); background: #FFFFFF;
    padding: 11px 8px; cursor: pointer; font-family: inherit;
    font-size: 0.78rem; font-weight: 800; color: var(--green);
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mv-blk .swap:hover { background: #F2F7F5; }
.mv-blk .tl { position: absolute; top: 7px; right: 7px; display: flex; gap: 4px; z-index: 2; }
.mv-blk .tl button {
    width: 25px; height: 25px; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
    background: rgba(18, 60, 54, 0.72); color: #FFFFFF; font-size: 0.68rem; line-height: 1;
}
.mv-blk .tl button:hover { background: rgba(18, 60, 54, 0.94); }
.mv-more { display: flex; gap: 9px; }
.mv-more button {
    flex: 1; border: 1px dashed rgba(18, 60, 54, 0.3); background: #FFFFFF;
    border-radius: 13px; padding: 12px 8px; cursor: pointer; font-family: inherit;
    font-size: 0.8rem; font-weight: 800; color: var(--green);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.mv-more button:hover { background: #F2F7F5; }
/* 고칠 때의 아래 박스 — 단추 둘이 나란히 넓게 */
.mv-act.wide { flex: 1 1 auto; height: 44px; font-size: 0.86rem; }

/* ♻️ 지난 모임에서 가져오기 */
.mv-pick .in .mv-in { margin-bottom: 4px; }
.mv-more-btn {
    width: 100%; border: 1px solid var(--line); background: #F7FAF9; border-radius: 13px;
    padding: 13px 10px; cursor: pointer; font-family: inherit;
    font-size: 0.83rem; font-weight: 800; color: var(--green);
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-bottom: 16px;
}
.mv-more-btn:hover { background: #EFF6F3; }

/* 지난 모임 고르는 판 — 적던 내용 위에 겹쳐 뜬다 */
.mv-pick {
    position: absolute; inset: 0; z-index: 20; background: rgba(12, 38, 34, 0.55);
    display: flex; align-items: center; justify-content: center; padding: 20px 16px;
}
.mv-pick .in {
    width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto;
    background: #FFFFFF; border-radius: 20px; padding: 18px;
}
.mv-pick h4 { margin: 0 0 12px; font-size: 0.96rem; font-weight: 900; color: var(--green); }
.mv-pick .one {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    background: #F7FAF9; border: 1px solid var(--line); border-radius: 14px;
    padding: 9px; margin-bottom: 8px; cursor: pointer; font-family: inherit;
}
.mv-pick .one:hover { background: #EFF6F3; }
.mv-pick .one img, .mv-pick .one .no {
    width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: 0 0 auto;
    background: #E3EDEA; display: flex; align-items: center; justify-content: center;
    color: #9CB2AC; font-size: 0.9rem;
}
.mv-pick .one .tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mv-pick .one .tx b { font-size: 0.88rem; font-weight: 800; color: var(--ink);
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-pick .one .tx span { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); }

/* 댓글 */
.mv-cm { display: flex; gap: 10px; margin-bottom: 15px; }
.mv-cm .face {
    width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
    background: #EDF4F2; display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; color: #9CB2AC;
}
.mv-cm .face img { width: 100%; height: 100%; object-fit: cover; }
.mv-cm .in { min-width: 0; flex: 1; }
.mv-cm .nm { font-size: 0.76rem; font-weight: 800; color: var(--ink-soft); }
.mv-cm .tx { font-size: 0.88rem; font-weight: 500; line-height: 1.65;
             word-break: break-word; margin-top: 3px; color: #24403A; }
.mv-cm .nm em { font-style: normal; font-weight: 600; color: #A8BAB5; margin-left: 6px; }
/* ↩️ 답글은 한 칸 들여쓰고 왼쪽에 세로선을 둬 '누구에게 한 말' 인지 눈으로 잇는다.
      ⚠️ 두 겹까지만이다 — 세 겹부터는 좁은 화면에서 글자가 두어 자씩만 남는다. */
.mv-cm.kid { margin-left: 42px; padding-left: 12px; border-left: 2px solid var(--line); }
.mv-cm.kid .face { width: 26px; height: 26px; font-size: 0.6rem; }
.mv-cm .act { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.mv-cm .act button {
    border: 0; background: transparent; color: #8AA29C; cursor: pointer;
    font-family: inherit; font-size: 0.74rem; font-weight: 700;
    padding: 3px 6px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 4px;
}
.mv-cm .act button:hover { background: #F2F7F5; color: #33514A; }
.mv-cm .lk.on { color: var(--red); }
.mv-cm .lk b { font-weight: 800; }
.mv-cm .rm {
    border: 0; background: transparent; color: #A8BAB5;
    cursor: pointer; font-size: 0.74rem; padding: 0 2px; flex: 0 0 auto;
}
.mv-none { font-size: 0.84rem; color: #9CB2AC; font-weight: 600; padding: 2px 0 10px; }

/* ══════════════════════════════════════════════════════════
   🧭 모임 전용 플로팅 박스
      ◀ 앞 · 한마디 남기기 · 지원하기 · 다음 ▶ 을 한자리에 모았다.
      화살표가 글 위에 얹혀 있으면 누를 수가 없어 여기로 내렸다.

   ⚠️ 키보드가 뜨면 브라우저가 화면을 줄이기도 한다 — 이 줄만 --kb 만큼 올린다.
   ══════════════════════════════════════════════════════════ */
/* ⚠️ 일상스토리의 아래 줄과 같은 짜임 — 둥근 섬이 아니라 폭을 가득 채운 띠다.
      답장 칸이 왼쪽에서 늘어나고, 둥근 단추들이 오른쪽에 붙는다.
      빛깔만 이 화면의 흰 바탕을 따른다(검정 띠는 읽는 화면에서 글보다 먼저 보인다). */
.mv-dock {
    position: absolute; left: 0; right: 0;
    bottom: var(--kb, 0px);
    z-index: 9;
    background: #FFFFFF; border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -14px rgba(16, 34, 30, 0.35);
    padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
    display: flex; align-items: center; gap: 8px;
}
/* 일상스토리의 .fbtn 과 같은 둥근 단추 */
.mv-fb {
    flex: 0 0 auto; border: 0; background: #F2F7F5; color: #33514A; cursor: pointer;
    border-radius: 999px; min-height: 40px; min-width: 40px; padding: 0 11px;
    font-family: inherit; font-size: 0.8rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    transition: background 0.15s ease;
}
.mv-fb:hover { background: #E3EDEA; }
.mv-fb span:empty { display: none; }
/* ❤️ 눌러 둔 좋아요 — 일상스토리와 같은 청취담 레드 */
.mv-fb.on { background: var(--red); color: #FFFFFF; }
.mv-fb.on i { color: #FFFFFF; }
.mv-fb:disabled { opacity: 0.6; cursor: default; }
/* 내가 연 모임이라 답장할 곳이 없을 때 — 빈 자리를 그냥 두면 단추들이 한쪽에 몰린다 */
.mv-note {
    flex: 1 1 auto; min-width: 0; font-size: 0.78rem; font-weight: 700;
    color: var(--ink-soft); padding-left: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ✍️ 댓글 남기는 칸 — 본문 안, 댓글 목록 바로 아래 */
.mv-cmsay {
    display: flex; align-items: center; gap: 7px; margin-top: 12px;
    background: #F2F7F5; border: 1px solid var(--line); border-radius: 999px;
    padding: 4px 4px 4px 14px;
}
.mv-cmsay.replying { border-color: var(--red); background: #FFF5F6; }
.mv-cmsay input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink);
    font-family: inherit; font-size: 0.85rem; font-weight: 500; padding: 9px 0;
}
.mv-cmsay input::placeholder { color: #9CB2AC; }
.mv-cmsay button {
    flex: 0 0 auto; border: 0; border-radius: 999px; height: 32px; padding: 0 14px;
    background: var(--green); color: #FFFFFF; cursor: pointer;
    font-family: inherit; font-size: 0.76rem; font-weight: 800; white-space: nowrap;
}
.mv-nav {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
    background: #F2F7F5; color: #33514A; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.mv-nav:hover { background: #E3EDEA; }
.mv-nav.off { opacity: 0.3; pointer-events: none; }
/* ⚠️ min-width: 0 이 없으면 입력칸이 제 글자 길이만큼 자리를 우겨,
      오른쪽 단추들이 화면 밖으로 밀려 잘린다. */
.mv-dock .say {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
    background: #F2F7F5; border: 1px solid var(--line);
    border-radius: 999px; padding: 0 4px 0 14px;
}
/* ↩️ 답글을 다는 중이면 칸을 청취담 레드로 둘러 '지금 답글이다' 를 알린다 */
.mv-dock.replying .say { border-color: var(--red); background: #FFF5F6; }
.mv-dock .say input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink);
    font-family: inherit; font-size: 0.85rem; font-weight: 500; padding: 10px 0;
}
.mv-dock .say input::placeholder { color: #9CB2AC; }
.mv-dock .say button {
    flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: var(--red); color: #FFFFFF; cursor: pointer; font-size: 0.78rem;
}
.mv-act {
    flex: 0 0 auto; border: 0; border-radius: 999px; height: 40px; padding: 0 15px;
    font-family: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer;
    background: var(--red); color: #FFFFFF; white-space: nowrap;
}
.mv-act.line { background: #F2F7F5; color: #33514A; }
/* 내가 연 모임 — 답장 칸이 있던 넓은 자리를 「모임 수정하기」 가 이어받는다 */
.mv-act.grow {
    flex: 1 1 auto; min-width: 0; gap: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mv-act:disabled { background: #EFEFEF; color: #A5A5A5; cursor: default; }
/* 좁은 화면에서는 글자를 줄여 네 가지가 다 들어가게 한다 */
@media (max-width: 400px) {
    .mv-dock { gap: 6px; padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 10px); }
    .mv-nav { width: 36px; height: 36px; }
    .mv-fb { min-height: 36px; min-width: 36px; padding: 0 9px; font-size: 0.74rem; }
    .mv-act { height: 36px; padding: 0 11px; font-size: 0.74rem; }
    .mv-dock .say { padding-left: 11px; }
}

.mv-toast {
    position: fixed; left: 50%; bottom: calc(var(--kb, 0px) + 108px);
    transform: translateX(-50%) translateY(12px);
    background: #10221E; color: #FFFFFF;
    padding: 11px 18px; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
    z-index: 2147483647; opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease; white-space: nowrap;
    font-family: 'Pretendard', -apple-system, sans-serif;
}
.mv-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════════════════════
   📱 좁은 화면 — 열 가지 스타일 모두에 걸리는 한 벌

   ⚠️ 표지가 화면의 절반(46vh)을 차지해, 정작 '언제 · 어디서 · 몇 명' 은
      스크롤해야 보였다. 모임은 사진 자랑이 아니라 약속이라, 표지를 줄이고
      글을 올린다.
   ⚠️ 스타일마다 .mv-body · .mv-title 을 다시 적으므로, 여기 규칙은
      그 뒤에 와야 이긴다(파일 맨 아래 · 같은 무게). 아래 '스타일 위에 덧쓰기'
      묶음이 그 몫이다.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* 표지 — 46vh 는 손안에서 화면의 절반이다. 키만 조인다(비율은 스타일 몫) */
    .mv-hero { max-height: 32vh; }
    .mv-hero.blank { gap: 10px; padding: 16px; }
    .mv-hero.blank i { font-size: 1.7rem; }
    .mv-hero.blank .say b { font-size: 0.88rem; }
    .mv-hero.blank .say span { font-size: 0.75rem; margin-top: 4px; }

    /* 표지 위 날짜 도장 — 작게, 그러나 또렷하게 */
    .mv-stamp {
        left: 10px; bottom: 10px; gap: 7px; padding: 6px 11px;
        max-width: calc(100% - 20px);
    }
    .mv-stamp .dd { font-size: 0.72rem; }
    .mv-stamp .wh { font-size: 0.68rem; }

    .mv-body { padding: 14px 15px 0; }

    /* 제목 · 배지 — 한 화면에 더 담기도록 */
    .mv-badge { padding: 5px 11px 5px 9px; font-size: 0.7rem; margin-bottom: 8px; }
    .mv-badge i { font-size: 0.72rem; }
    .mv-title { font-size: 1.16rem; margin-bottom: 11px; line-height: 1.4; }
    .mv-title::after { width: 28px; height: 2px; margin-top: 9px; }

    /* 두 줄 표어 */
    .mv-solo { padding: 12px 14px 11px 15px; margin-bottom: 12px; border-radius: 13px; }
    .mv-solo .a { font-size: 0.84rem; }
    .mv-solo .b { font-size: 0.76rem; }

    /* 언제 — 이 화면에서 가장 중요한 줄이라 크기는 지키고 여백만 줄인다 */
    .mv-when { gap: 10px; margin: 11px 0 4px; padding: 11px 13px; border-radius: 13px; }
    .mv-when .dd { font-size: 0.88rem; }
    .mv-when .wh b { font-size: 0.83rem; }
    .mv-when .wh em { font-size: 0.68rem; }

    /* 어디서 · 몇 명 — 알갱이가 여럿이라 가장 많이 줄인다 */
    .mv-meta { gap: 6px; margin-bottom: 14px; }
    .mv-meta span { padding: 5px 10px; font-size: 0.72rem; }
    .mv-meta span i { font-size: 0.68rem; }

    .mv-stamp + .mv-stamp { display: none; }   /* 도장이 겹쳐 붙는 스타일 방지 */
}

/* 아주 좁은 폰 — 한 번 더 조인다 */
@media (max-width: 380px) {
    .mv-hero { max-height: 27vh; }
    .mv-title { font-size: 1.08rem; }
    .mv-meta span { padding: 4px 9px; font-size: 0.69rem; }
    .mv-when .wh b { font-size: 0.79rem; }
}

/* 넓은 화면 — 배경과 표지는 꽉 채우고, 글줄만 가운데로 모은다 */
@media (min-width: 720px) {
    .mv-body { padding-left: max(24px, calc((100% - 680px) / 2));
               padding-right: max(24px, calc((100% - 680px) / 2)); }
    .mv-title { font-size: 1.7rem; }
    .mv-top { padding-left: max(20px, calc((100% - 720px) / 2));
              padding-right: max(20px, calc((100% - 720px) / 2)); }
    /* 띠는 폭을 가득 채우되, 안의 것들만 글줄과 같은 너비로 모은다 */
    .mv-dock { padding-left: max(24px, calc((100% - 680px) / 2));
               padding-right: max(24px, calc((100% - 680px) / 2)); }
}

/* ══════════════════════════════════════════════════════════
   🚪 적던 것을 두고 나갈지 묻는 판 — 일상 스토리와 같은 결

   ⚠️ 브라우저 confirm() 은 기기마다 생김새가 제각각이고
      「다시 촬영하기」 같은 세 번째 길을 담을 수가 없다.
   ══════════════════════════════════════════════════════════ */
.mv-leave {
    position: absolute; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(6, 17, 15, 0.72); backdrop-filter: blur(5px);
}
.mv-leave .in {
    width: 100%; max-width: 320px; text-align: center;
    background: #10221E; color: #FFFFFF; border-radius: 22px; padding: 24px 20px 18px;
    box-shadow: 0 26px 60px -18px rgba(0,0,0,0.7);
}
.mv-leave h4 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 900; }
.mv-leave p {
    margin: 0 0 18px; font-size: 0.83rem; font-weight: 600; line-height: 1.7;
    color: rgba(255,255,255,0.62); word-break: keep-all;
}
.mv-leave button {
    width: 100%; border: 0; border-radius: 14px; cursor: pointer;
    padding: 14px 12px; font-family: inherit; font-size: 0.88rem; font-weight: 800;
    margin-bottom: 9px;
}
/* 나가기는 되돌릴 수 없다 — 레드로 두되 아래 '계속 적기' 를 더 크게 눈에 띄게 */
.mv-leave .kill { background: rgba(200, 36, 51, 0.18); color: #FF8A94; }
.mv-leave .again { background: rgba(255,255,255,0.14); color: #FFFFFF; }
.mv-leave .ln { background: #FFFFFF; color: #10221E; margin-bottom: 0; }

/* 📜 긴 목록을 담는 판 — 제목과 단추는 붙박이, 가운데만 굴러간다.
   ⚠️ 판 전체를 굴리게 두었더니 목록이 길 때 맨 아래 「그만두기」 가
      화면 밖으로 밀려 나가 닫을 길이 없었다.
   ⚠️ 키보드가 올라와도 판이 그 위에 서도록 위아래 여백을 같게 둔다. */
.mv-pick .in.tall {
    display: flex; flex-direction: column;
    max-height: 100%; overflow: hidden; padding-bottom: 14px;
}
.mv-pick .in.tall h4 { flex: 0 0 auto; }
.mv-pick .in.tall .scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    margin: 0 -4px 10px; padding: 0 4px;
    overscroll-behavior: contain;
}
.mv-pick .in.tall > .mv-hbtn { flex: 0 0 auto; margin: 0; }

/* ══════════════════════════════════════════════════════════
   🎨 모임 스타일 — 표지의 빛깔 · 글씨 · 말투를 한 벌로

   ⚠️ 값(--cv-*)은 자바스크립트가 넣는다. 여기서는 '어떻게 쓸지' 만 정한다.
      기본값을 함께 적어 두어, 값이 안 들어와도 화면이 깨지지 않는다.
   ══════════════════════════════════════════════════════════ */
.mv-cover:not(.has) {
    background: linear-gradient(135deg, var(--cv-a, #123C36), var(--cv-b, #2FA36B));
}
.mv-cover:not(.has) .empty {
    color: var(--cv-ink, #FFFFFF);
    font-family: var(--cv-font, inherit);
    background: transparent;
}
.mv-cover:not(.has) .empty i {
    font-size: 2rem; opacity: 0.9; margin-bottom: 10px;
}
.mv-cover:not(.has) .empty b {
    font-family: var(--cv-font, inherit);
    font-size: 1.02rem; line-height: 1.45; word-break: keep-all;
}
.mv-cover:not(.has) .empty span { opacity: 0.8; }
.mv-cover:not(.has) .empty em { opacity: 0.6; }

/* 스타일 단추 — 자기 빛깔을 입고 있어, 누르기 전에 무엇이 될지 보인다 */
.mv-dock .mv-act.style {
    flex: 0 0 auto; width: 50px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; border: 0;
}

/* ══════════════════════════════════════════════════════════
   🎨 스타일 한 벌이 화면 전체에 걸린다

   값(--s-*)은 자바스크립트가 .mv-slide 에 얹는다(applyStyle).
   짜임새는 이름표 data-mvstyle 로 갈린다 — center(가운데로 모음) · left(왼쪽으로 세움).

   ⚠️ 값이 없을 때를 위해 기본값을 함께 적는다. 스타일을 못 받아도 화면은 멀쩡해야 한다.
   ⚠️ 여기서 정하는 것은 '꾸밈' 뿐이다. 무엇을 하는 자리인지 말하는 두 줄(.mv-solo)의
      글은 절대 건드리지 않는다 — 빛깔과 글씨만 갈아입힌다.
   ══════════════════════════════════════════════════════════ */
.mv-slide[data-mvstyle], .mv-look[data-mvstyle] { --s-t: 1; }

/* ── 표지 ── */
.mv-slide[data-mvstyle] .mv-hero.blank,
.mv-look[data-mvstyle] .mv-hero.blank {
    background: linear-gradient(135deg, var(--s-a, #123C36), var(--s-b, #2FA36B));
}
.mv-slide[data-mvstyle] .mv-hero.blank i,
.mv-look[data-mvstyle] .mv-hero.blank i {
    color: var(--s-icon, rgba(255,255,255,0.9));
}
.mv-slide[data-mvstyle] .mv-hero.blank .say b,
.mv-look[data-mvstyle] .mv-hero.blank .say b {
    color: var(--s-ink, #FFFFFF);
    font-family: var(--s-font, inherit);
    font-size: calc(1rem * var(--s-t));
}
.mv-slide[data-mvstyle] .mv-hero.blank .say span,
.mv-look[data-mvstyle] .mv-hero.blank .say span {
    color: var(--s-ink, #FFFFFF); opacity: 0.72;
    font-family: var(--s-font, inherit);
}


/* ── 제목 · 배지 · 두 줄 ── */
.mv-slide[data-mvstyle] .mv-title,
.mv-look[data-mvstyle] .mv-title {
    font-family: var(--s-font, inherit);
    font-size: calc(1.28rem * var(--s-t));
}
.mv-slide[data-mvstyle] .mv-badge,
.mv-look[data-mvstyle] .mv-badge {
    background: var(--s-soft, #EFF6F3); color: var(--s-acc, #123C36);
}
.mv-slide[data-mvstyle] .mv-solo,
.mv-look[data-mvstyle] .mv-solo {
    border-left-color: var(--s-acc, #123C36);
    background: var(--s-soft, #EFF6F3);
}
.mv-slide[data-mvstyle] .mv-solo .a,
.mv-look[data-mvstyle] .mv-solo .a {
    font-family: var(--s-font, inherit);
    font-size: calc(0.95rem * var(--s-t));
}


/* ══════════════════════════════════════════════════════════
   🎨 열 가지 결 — 서식만 다르고 뼈대(HTML)는 하나다

   ⚠️ 뼈대가 하나라서, 어떤 결을 골라도 적어 둔 글과 배지는 한 글자도 안 바뀐다.
      바뀌는 것은 오직 어떻게 보이나 뿐이다.
   ⚠️ 스토리는 세로로 긴 한 장이다. 그 판 위에서 각자 다르게 보여야 고르는 뜻이 있다.
      표지 모양 · 제목 크기 · 강조하는 곳 · 나누는 선을 결마다 아주 다르게 잡았다.
   ⚠️ 무엇을 하는 자리인지 말하는 두 줄(.mv-solo)의 글은 어느 결에서도 안 바뀐다.
      빛깔과 글씨만 갈아입힌다.
   ══════════════════════════════════════════════════════════ */
.mv-look {
    position: relative; background: #FFFFFF; overflow: hidden;
    font-family: var(--s-font, inherit);
}
.mv-look .mv-hero { border-radius: 0; margin: 0; }
.mv-look .mv-body { padding: 20px 18px 26px; }
.mv-look .mv-title {
    font-family: var(--s-font, inherit); letter-spacing: -0.035em;
    font-size: calc(1.42rem * var(--s-t)); line-height: 1.28; margin: 0 0 14px;
}
.mv-look .mv-meta { margin-top: 16px; }
.mv-look .mv-note { margin-top: 14px; }
.mv-look .mv-blocks p {
    margin: 0 0 9px; font-size: 0.86rem; line-height: 1.78; word-break: keep-all;
}

/* ── ① classic — 청취담 기본. 왼쪽에 굵은 기둥 하나로 중심을 잡는다. ── */
.mv-look[data-mvstyle="classic"] .mv-hero { aspect-ratio: 4 / 3; }
.mv-look[data-mvstyle="classic"] .mv-body { border-top: 4px solid var(--s-a, #123C36); }
.mv-look[data-mvstyle="classic"] .mv-title {
    padding-left: 13px; border-left: 4px solid var(--s-b, #2FA36B);
}

/* ── ② poster — 표지가 화면을 통째로. 제목이 그 위에 크게 얹힌다. ── */
.mv-look[data-mvstyle="poster"] .mv-hero { aspect-ratio: 3 / 4; max-height: none; }
.mv-look[data-mvstyle="poster"] .mv-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.88) 4%, rgba(0,0,0,0.25) 42%, transparent 68%);
}
.mv-look[data-mvstyle="poster"] .mv-body {
    margin-top: -190px; position: relative; z-index: 2; padding: 0 20px 26px;
}
.mv-look[data-mvstyle="poster"] .mv-title {
    color: #FFFFFF; font-size: calc(2.1rem * var(--s-t)); line-height: 1.14;
    text-shadow: 0 3px 20px rgba(0,0,0,0.55); margin-bottom: 14px;
}
.mv-look[data-mvstyle="poster"] .mv-badge {
    background: var(--s-b, #F2596B); color: #FFFFFF; margin-bottom: 12px;
    letter-spacing: 0.06em;
}
.mv-look[data-mvstyle="poster"] .mv-solo {
    background: rgba(255,255,255,0.94); border-left: 0; border-radius: 16px;
    padding: 14px 16px; backdrop-filter: blur(8px);
}
.mv-look[data-mvstyle="poster"] .mv-meta,
.mv-look[data-mvstyle="poster"] .mv-note,
.mv-look[data-mvstyle="poster"] .mv-blocks p { color: rgba(255,255,255,0.9); }

/* ── ③ card — 아치형 표지. 단정하고 정돈된, 청첩장 같은 결. ── */
.mv-look[data-mvstyle="card"] { background: var(--s-soft, #FDF1E4); padding: 20px 18px 22px; }
.mv-look[data-mvstyle="card"] .mv-hero {
    aspect-ratio: 3 / 4; border-radius: 999px 999px 18px 18px; overflow: hidden;
    box-shadow: 0 18px 40px -18px rgba(0,0,0,0.42);
}
.mv-look[data-mvstyle="card"] .mv-body {
    background: #FFFFFF; border-radius: 18px; margin-top: -34px; position: relative; z-index: 2;
    padding: 24px 20px; text-align: center;
    box-shadow: 0 14px 34px -20px rgba(0,0,0,0.3);
}
.mv-look[data-mvstyle="card"] .mv-badge { margin: 0 auto 12px; }
.mv-look[data-mvstyle="card"] .mv-title {
    text-align: center; position: relative; padding-bottom: 16px; margin-bottom: 16px;
}
.mv-look[data-mvstyle="card"] .mv-title::after {
    content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 44px; height: 2px; background: var(--s-acc, #C2611F);
}
.mv-look[data-mvstyle="card"] .mv-meta { justify-content: center; }
.mv-look[data-mvstyle="card"] .mv-solo { text-align: left; }

/* ── ④ magazine — 표지가 위 절반, 제목이 그 아래로 크게 흐른다. 편집물 같은 결. ── */
.mv-look[data-mvstyle="magazine"] .mv-hero { aspect-ratio: 5 / 4; }
.mv-look[data-mvstyle="magazine"] .mv-body { padding-top: 22px; }
.mv-look[data-mvstyle="magazine"] .mv-badge {
    background: transparent; color: var(--s-acc, #3B4C86); padding: 0 0 8px;
    letter-spacing: 0.24em; font-size: 0.64rem; border-radius: 0;
    border-bottom: 1px solid currentColor; display: inline-block; margin-bottom: 14px;
}
.mv-look[data-mvstyle="magazine"] .mv-title {
    font-size: calc(1.8rem * var(--s-t)); line-height: 1.34; letter-spacing: -0.02em;
}
.mv-look[data-mvstyle="magazine"] .mv-solo {
    border-left: 0; background: transparent; padding: 16px 0;
    border-top: 3px double var(--s-acc, #3B4C86);
    border-bottom: 3px double var(--s-acc, #3B4C86);
}
.mv-look[data-mvstyle="magazine"] .mv-meta { padding-top: 4px; }

/* ── ⑤ ticket — 표를 한 장 끊은 결. 뜯는 선과 반원. ── */
.mv-look[data-mvstyle="ticket"] { background: var(--s-a, #0F5C52); padding: 18px 14px 20px; }
.mv-look[data-mvstyle="ticket"] .mv-hero {
    border-radius: 18px 18px 0 0; overflow: hidden; aspect-ratio: 16 / 11;
}
.mv-look[data-mvstyle="ticket"] .mv-body {
    background: #FFFFFF; border-radius: 0 0 18px 18px; padding: 26px 20px 22px;
    position: relative;
}
.mv-look[data-mvstyle="ticket"] .mv-body::before,
.mv-look[data-mvstyle="ticket"] .mv-body::after {
    content: ''; position: absolute; top: -12px; width: 24px; height: 24px;
    border-radius: 50%; background: var(--s-a, #0F5C52);
}
.mv-look[data-mvstyle="ticket"] .mv-body::before { left: -12px; }
.mv-look[data-mvstyle="ticket"] .mv-body::after { right: -12px; }
.mv-look[data-mvstyle="ticket"] .mv-badge {
    background: var(--s-acc, #0F7A6B); color: #FFFFFF;
    letter-spacing: 0.14em; border-radius: 3px; font-size: 0.66rem;
}
.mv-look[data-mvstyle="ticket"] .mv-title {
    padding-bottom: 20px; margin-bottom: 18px;
    border-bottom: 2px dashed rgba(0,0,0,0.16);
}
.mv-look[data-mvstyle="ticket"] .mv-meta {
    flex-direction: column; gap: 9px; align-items: flex-start;
    font-variant-numeric: tabular-nums; font-weight: 800;
}

/* ── ⑥ minimal — 동그란 표지 하나. 여백이 주인공이다. ── */
.mv-look[data-mvstyle="minimal"] { background: #FFFFFF; }
.mv-look[data-mvstyle="minimal"] .mv-hero {
    aspect-ratio: 1 / 1; width: 128px; margin: 46px auto 0;
    border-radius: 50%; overflow: hidden;
}
.mv-look[data-mvstyle="minimal"] .mv-hero.blank .say { display: none; }
.mv-look[data-mvstyle="minimal"] .mv-hero.blank i { font-size: 2.2rem; }
.mv-look[data-mvstyle="minimal"] .mv-body { padding: 30px 30px 44px; text-align: center; }
.mv-look[data-mvstyle="minimal"] .mv-title {
    font-size: calc(2rem * var(--s-t)); line-height: 1.28; letter-spacing: -0.05em;
    margin: 18px 0 22px;
}
.mv-look[data-mvstyle="minimal"] .mv-badge {
    background: transparent; color: var(--s-acc, #8A6A42); padding: 0;
    font-size: 0.68rem; letter-spacing: 0.3em; border-radius: 0;
}
.mv-look[data-mvstyle="minimal"] .mv-solo {
    border: 0; background: transparent; padding: 20px 0;
    border-top: 1px solid rgba(0,0,0,0.12); border-bottom: 1px solid rgba(0,0,0,0.12);
}
.mv-look[data-mvstyle="minimal"] .mv-meta { justify-content: center; margin-top: 20px; }

/* ── ⑦ film — 위아래 검은 띠. 한 장면을 잘라 낸 결. ── */
.mv-look[data-mvstyle="film"] { background: #0C0C0C; }
.mv-look[data-mvstyle="film"] .mv-hero {
    aspect-ratio: 21 / 9; margin: 26px 0; position: relative;
}
/* 필름 구멍 — 양옆에 점점이 */
.mv-look[data-mvstyle="film"] .mv-hero::before {
    content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 12px;
    background: repeating-linear-gradient(90deg,
        rgba(255,255,255,0.34) 0 8px, transparent 8px 22px);
}
.mv-look[data-mvstyle="film"] .mv-hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -20px; height: 12px;
    background: repeating-linear-gradient(90deg,
        rgba(255,255,255,0.34) 0 8px, transparent 8px 22px);
}
.mv-look[data-mvstyle="film"] .mv-body { background: #0C0C0C; color: #F2F2F2; padding-top: 26px; }
.mv-look[data-mvstyle="film"] .mv-title {
    color: #FFFFFF; font-size: calc(1.6rem * var(--s-t));
}
.mv-look[data-mvstyle="film"] .mv-badge {
    background: transparent; color: #FFFFFF; padding: 5px 0;
    letter-spacing: 0.3em; font-size: 0.62rem; border-radius: 0;
    border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.3);
    display: inline-block;
}
.mv-look[data-mvstyle="film"] .mv-solo {
    background: rgba(255,255,255,0.06); border-left-color: var(--s-b, #5A5A5A);
}
.mv-look[data-mvstyle="film"] .mv-solo .a { color: #FFFFFF; }
.mv-look[data-mvstyle="film"] .mv-solo .b,
.mv-look[data-mvstyle="film"] .mv-meta,
.mv-look[data-mvstyle="film"] .mv-note,
.mv-look[data-mvstyle="film"] .mv-blocks p { color: rgba(255,255,255,0.62); }

/* ── ⑧ note — 공책에 적어 둔 결. 표지가 기울어 붙어 있다. ── */
.mv-look[data-mvstyle="note"] {
    background:
        linear-gradient(90deg, transparent 30px, rgba(200,36,51,0.16) 30px,
                        rgba(200,36,51,0.16) 31px, transparent 31px),
        repeating-linear-gradient(0deg, transparent, transparent 28px,
                                  rgba(0,0,0,0.07) 28px, rgba(0,0,0,0.07) 29px),
        #FFFDF6;
    padding: 26px 18px 24px 40px;
}
.mv-look[data-mvstyle="note"] .mv-hero {
    aspect-ratio: 4 / 3; overflow: hidden;
    transform: rotate(-2deg);
    box-shadow: 0 12px 28px -14px rgba(0,0,0,0.45);
    border: 10px solid #FFFFFF; border-bottom-width: 34px;
}
.mv-look[data-mvstyle="note"] .mv-body { background: transparent; padding: 26px 0 0; }
.mv-look[data-mvstyle="note"] .mv-title {
    font-size: calc(1.9rem * var(--s-t)); line-height: 1.22;
}
.mv-look[data-mvstyle="note"] .mv-badge {
    background: var(--s-b, #B79CE8); color: #FFFFFF;
    transform: rotate(-2.5deg); border-radius: 2px; letter-spacing: 0.06em;
}
.mv-look[data-mvstyle="note"] .mv-solo {
    background: rgba(255,255,255,0.82); border-radius: 4px;
}

/* ── ⑨ neon — 어두운 바탕에 빛나는 테두리. 밤에 노는 자리. ── */
.mv-look[data-mvstyle="neon"] { background: #090913; }
.mv-look[data-mvstyle="neon"] .mv-hero {
    aspect-ratio: 4 / 5; margin: 16px; border-radius: 20px; overflow: hidden;
    box-shadow: 0 0 0 1.5px var(--s-b, #5BB4D8), 0 0 34px -2px var(--s-b, #5BB4D8);
}
.mv-look[data-mvstyle="neon"] .mv-body { background: #090913; color: #E7EEF5; padding-top: 10px; }
.mv-look[data-mvstyle="neon"] .mv-title {
    color: #FFFFFF; font-size: calc(1.62rem * var(--s-t));
    text-shadow: 0 0 22px var(--s-b, #5BB4D8), 0 0 44px rgba(91,180,216,0.4);
}
.mv-look[data-mvstyle="neon"] .mv-badge {
    background: transparent; color: var(--s-b, #5BB4D8);
    box-shadow: inset 0 0 0 1.5px var(--s-b, #5BB4D8), 0 0 14px -4px var(--s-b, #5BB4D8);
    letter-spacing: 0.12em;
}
.mv-look[data-mvstyle="neon"] .mv-solo {
    background: rgba(255,255,255,0.05); border-left-color: var(--s-b, #5BB4D8);
    border-radius: 0 12px 12px 0;
}
.mv-look[data-mvstyle="neon"] .mv-solo .a { color: #FFFFFF; }
.mv-look[data-mvstyle="neon"] .mv-solo .b,
.mv-look[data-mvstyle="neon"] .mv-meta,
.mv-look[data-mvstyle="neon"] .mv-note,
.mv-look[data-mvstyle="neon"] .mv-blocks p { color: rgba(255,255,255,0.58); }

/* ── ⑩ block — 색 덩이로 나눈다. 제목이 통째로 한 덩이. ── */
.mv-look[data-mvstyle="block"] { background: var(--s-soft, #FCF6E2); }
.mv-look[data-mvstyle="block"] .mv-hero { aspect-ratio: 1 / 1; }
.mv-look[data-mvstyle="block"] .mv-body { padding: 0 0 24px; }
.mv-look[data-mvstyle="block"] .mv-badge {
    display: block; margin: 0; border-radius: 0; padding: 13px 20px;
    background: var(--s-b, #F4D35E); color: var(--s-a, #7A5B08);
    font-size: 0.8rem; letter-spacing: 0.14em; font-weight: 900;
}
.mv-look[data-mvstyle="block"] .mv-title {
    background: var(--s-a, #7A5B08); color: #FFFFFF;
    margin: 0; padding: 26px 20px; font-size: calc(1.78rem * var(--s-t)); line-height: 1.2;
}
.mv-look[data-mvstyle="block"] .mv-solo {
    margin: 0; border-left: 0; border-radius: 0; padding: 20px;
    background: #FFFFFF;
}
.mv-look[data-mvstyle="block"] .mv-meta,
.mv-look[data-mvstyle="block"] .mv-note,
.mv-look[data-mvstyle="block"] .mv-blocks { padding: 0 20px; }
.mv-look[data-mvstyle="block"] .mv-meta { margin-top: 18px; }

/* ══════════════════════════════════════════════════════════
   🎨 결 고르는 화면 — 올리기를 누르면 여기로 온다
   ══════════════════════════════════════════════════════════ */
.mv-styler {
    position: absolute; inset: 0; z-index: 34; background: #EEF2F1;
    display: flex; flex-direction: column;
}
.sy-top {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 12px;
    background: #FFFFFF; border-bottom: 1px solid var(--line, #E3EDEA);
}
.sy-x {
    flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: #EEF3F1; color: var(--ink, #142421); cursor: pointer; font-size: 0.9rem;
}
.sy-ttl { flex: 1; font-size: 0.94rem; font-weight: 900; color: var(--ink, #142421); }
.sy-name { flex: 0 0 auto; font-size: 0.78rem; font-weight: 800; color: var(--green, #123C36); }

/* 굴러 가며 아래까지 다 볼 수 있다 — 올라간 뒤 모습 그대로 */
.sy-stage {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 12px 18px;
    overscroll-behavior: contain;
}
.sy-paper {
    max-width: 420px; margin: 0 auto; border-radius: 18px; overflow: hidden;
    box-shadow: 0 18px 44px -20px rgba(0,0,0,0.4);
}

.sy-bar {
    flex: 0 0 auto; background: #FFFFFF; border-top: 1px solid var(--line, #E3EDEA);
    padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
}
.sy-chips {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 11px;
    scrollbar-width: none;
}
.sy-chips::-webkit-scrollbar { display: none; }
.sy-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
    border: 1.5px solid var(--line, #E3EDEA); background: #FFFFFF;
    border-radius: 999px; padding: 7px 13px 7px 7px; cursor: pointer;
    font-family: inherit; font-size: 0.78rem; font-weight: 800; color: var(--ink, #142421);
    white-space: nowrap;
}
.sy-chip .sw {
    width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
    background: linear-gradient(135deg, var(--c-a), var(--c-b));
}
.sy-chip.on { border-color: var(--red, #C82433); background: #FDEEF0; color: var(--red, #C82433); }
.sy-go {
    width: 100%; border: 0; border-radius: 14px; padding: 15px; cursor: pointer;
    background: var(--red, #C82433); color: #FFFFFF;
    font-family: inherit; font-size: 0.92rem; font-weight: 900;
}
.sy-go:disabled { background: #D5DEDB; cursor: default; }

/* ══════════════════════════════════════════════════════════
   🎨 사진 없는 표지 — 흰 바탕에 청취담 레드·그린으로

   ⚠️ 바탕과 글자색은 반드시 짝으로 정한다.
      바탕만 아무 색이나 뽑으면 초록 위에 진초록 글씨 같은 짝이 나와
      정작 무슨 자리인지 말하는 두 줄이 안 읽힌다 — 실제로 그랬다.
   ⚠️ 다섯 벌 모두 흰색을 크게 쓴다. 사진이 없는 표지는 비어 보이기 쉬운데,
      색을 꽉 채우면 답답하고 흰 여백이 있어야 글이 산다.
   ══════════════════════════════════════════════════════════ */
.mv-cover:not(.has) {
    position: relative;
    background: #FFFFFF;
}
.mv-cover:not(.has) .empty {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 9px; width: 100%; height: 100%; border: 0; cursor: pointer;
    background: transparent; font-family: inherit; padding: 22px;
    text-align: center; word-break: keep-all;
}
.mv-cover:not(.has) .empty > i {
    font-size: 1.9rem; margin-bottom: 2px;
}
.mv-cover:not(.has) .empty b {
    font-size: 1.02rem; font-weight: 900; line-height: 1.45; letter-spacing: -0.03em;
}
.mv-cover:not(.has) .empty > span {
    font-size: 0.82rem; font-weight: 600; line-height: 1.5;
}
.mv-cover:not(.has) .empty em {
    font-style: normal; font-size: 0.72rem; font-weight: 800;
    padding: 7px 15px; border-radius: 999px; margin-top: 5px;
}

/* 굵은 띠 하나로 청취담다운 결을 낸다 — 다섯 벌이 저마다 다른 자리에 둔다 */
.mv-cover:not(.has)::before {
    content: ''; position: absolute; z-index: 1; pointer-events: none;
}

/* ① 흰 바탕 · 그린 글씨 — 왼쪽에 굵은 그린 기둥 */
.mv-cover.cv0 { background: #FFFFFF; }
.mv-cover.cv0::before { left: 0; top: 0; bottom: 0; width: 10px; background: #123C36; }
.mv-cover.cv0 .empty { color: #123C36; }
.mv-cover.cv0 .empty > i { color: #2FA36B; }
.mv-cover.cv0 .empty > span { color: #55716A; }
.mv-cover.cv0 .empty em { background: #123C36; color: #FFFFFF; }

/* ② 흰 바탕 · 레드 글씨 — 위쪽에 굵은 레드 띠 */
.mv-cover.cv1 { background: #FFFFFF; }
.mv-cover.cv1::before { left: 0; right: 0; top: 0; height: 10px; background: #C82433; }
.mv-cover.cv1 .empty { color: #8E1420; }
.mv-cover.cv1 .empty > i { color: #C82433; }
.mv-cover.cv1 .empty > span { color: #8A6A6E; }
.mv-cover.cv1 .empty em { background: #C82433; color: #FFFFFF; }

/* ③ 아주 연한 그린 바탕 · 진한 그린 글씨 — 오른쪽 아래 큰 동그라미 */
.mv-cover.cv2 { background: #EFF7F3; }
.mv-cover.cv2::before {
    right: -60px; bottom: -60px; width: 200px; height: 200px;
    border-radius: 50%; background: rgba(47, 163, 107, 0.16);
}
.mv-cover.cv2 .empty { color: #0E3A31; }
.mv-cover.cv2 .empty > i { color: #2FA36B; }
.mv-cover.cv2 .empty > span { color: #4E6E66; }
.mv-cover.cv2 .empty em { background: #123C36; color: #FFFFFF; }

/* ④ 아주 연한 레드 바탕 · 진한 레드 글씨 — 왼쪽 위 큰 동그라미 */
.mv-cover.cv3 { background: #FDF0F1; }
.mv-cover.cv3::before {
    left: -50px; top: -50px; width: 180px; height: 180px;
    border-radius: 50%; background: rgba(200, 36, 51, 0.14);
}
.mv-cover.cv3 .empty { color: #7E1420; }
.mv-cover.cv3 .empty > i { color: #C82433; }
.mv-cover.cv3 .empty > span { color: #8B6166; }
.mv-cover.cv3 .empty em { background: #C82433; color: #FFFFFF; }

/* ⑤ 흰 바탕 · 두 빛깔을 함께 — 아래쪽에 레드·그린 두 줄 */
.mv-cover.cv4 { background: #FFFFFF; }
.mv-cover.cv4::before {
    left: 0; right: 0; bottom: 0; height: 12px;
    background: linear-gradient(90deg, #123C36 0 50%, #C82433 50% 100%);
}
.mv-cover.cv4 .empty { color: #142421; }
.mv-cover.cv4 .empty > i { color: #C82433; }
.mv-cover.cv4 .empty > span { color: #66746F; }
.mv-cover.cv4 .empty em { background: #142421; color: #FFFFFF; }

/* ══════════════════════════════════════════════════════════
   🗓 표지 위의 날짜 도장 — 며칠 남았나 · 언제 만나나

   ⚠️ 표지는 친구들이 제일 먼저 보는 얼굴이다.
      여기서 '갈 수 있는 날인가' 가 바로 안 보이면 안을 열어 보고서야 알게 되는데,
      대개는 안 열어 본다.
   ⚠️ 사진 표지 위에도 얹히므로, 어두운 판을 깔아 어떤 사진 위에서든 읽히게 한다.
   ══════════════════════════════════════════════════════════ */
.mv-stamp {
    position: absolute; left: 12px; bottom: 12px; z-index: 3;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 13px; border-radius: 999px;
    background: rgba(12, 22, 20, 0.74); backdrop-filter: blur(8px);
    max-width: calc(100% - 24px);
}
.mv-stamp .dd {
    flex: 0 0 auto; font-size: 0.78rem; font-weight: 900; color: #FF8A94;
    letter-spacing: 0.02em;
}
.mv-stamp .wh {
    font-size: 0.73rem; font-weight: 700; color: rgba(255,255,255,0.92);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 🗓 본문에서 한 번 더 — 약속에서 가장 중요한 것은 '언제' 다 */
.mv-when {
    display: flex; align-items: center; gap: 12px;
    margin: 14px 0 4px; padding: 13px 15px; border-radius: 15px;
    background: var(--s-soft, #EFF6F3);
    border-left: 4px solid var(--s-acc, #123C36);
}
.mv-when .dd {
    flex: 0 0 auto; font-size: 0.95rem; font-weight: 900; color: var(--red, #C82433);
    letter-spacing: 0.01em;
}
.mv-when .wh { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mv-when .wh b {
    font-size: 0.9rem; font-weight: 900; color: var(--ink, #142421);
    word-break: keep-all; line-height: 1.4;
}
.mv-when .wh em {
    font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--ink-soft, #66746F);
}

/* ── ① 기본 결의 빈 표지 — 흰 바탕에 청취담 레드·그린.
      빛깔로 덮지 않으니 적어 둔 말이 가장 또렷하게 읽힌다. ── */
.mv-look[data-mvstyle="classic"] .mv-hero.blank {
    background: #FFFFFF; position: relative;
}
.mv-look[data-mvstyle="classic"] .mv-hero.blank::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
    background: linear-gradient(90deg, #123C36 0 50%, #C82433 50% 100%);
}
.mv-look[data-mvstyle="classic"] .mv-hero.blank i { color: #C82433; font-size: 2.1rem; }
.mv-look[data-mvstyle="classic"] .mv-hero.blank .say b { color: #123C36; }
.mv-look[data-mvstyle="classic"] .mv-hero.blank .say span { color: #66746F; opacity: 1; }
.mv-look[data-mvstyle="classic"] .mv-hero.blank .mv-stamp { bottom: 24px; }

/* 📤 알려 주기 단추 — 앞뒤 넘김 단추와 같은 크기로 줄에 나란히 */
.mv-dock .mv-nav.share { color: var(--green, #123C36); }
.mv-dock .mv-nav.share:hover { background: #EEF3F1; }

/* 알려 줄 곳 고르기 — 고른 것은 레드로 */
.mv-pick .one.on { border-color: var(--red, #C82433); background: #FDEBED; }
.mv-pick .one.on .tx b { color: var(--red, #C82433); }

/* ══════════════════════════════════════════════════════════
   📱 좁은 화면 — 열 가지 스타일 위에 덧쓰기

   ⚠️ 반드시 파일 맨 끝이어야 한다.
      스타일마다 .mv-title · .mv-body 를 다시 적는데(poster 2.1rem · minimal 2rem …),
      앞쪽에 적어 두면 그 규칙들이 뒤에 와서 이겨 버린다.
      무게가 같을 땐 뒤에 적힌 쪽이 이기므로, 여기가 마지막 말이 된다.
   ⚠️ 스타일이 정한 '느낌'(글꼴 · 빛깔 · 짜임새)은 건드리지 않는다.
      손안에서 글이 화면을 넘지 않게 크기만 낮춘다.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* 제목 — 스타일이 정한 배율(--s-t)은 그대로 두고 기준값만 낮춘다.
       그래야 '손글씨는 조금 크게' 같은 스타일의 뜻이 살아 있는다. */
    .mv-look[data-mvstyle] .mv-title,
    .mv-slide[data-mvstyle] .mv-title { font-size: calc(1.22rem * var(--s-t, 1)); }
    .mv-look[data-mvstyle="poster"]   .mv-title { font-size: calc(1.34rem * var(--s-t, 1)); }
    .mv-look[data-mvstyle="minimal"]  .mv-title { font-size: calc(1.3rem * var(--s-t, 1)); }
    .mv-look[data-mvstyle="note"]     .mv-title { font-size: calc(1.28rem * var(--s-t, 1)); }
    .mv-look[data-mvstyle="magazine"] .mv-title { font-size: calc(1.24rem * var(--s-t, 1)); }
    .mv-look[data-mvstyle="block"]    .mv-title { font-size: calc(1.2rem * var(--s-t, 1)); padding: 16px 15px; }
    .mv-look[data-mvstyle="film"]     .mv-title,
    .mv-look[data-mvstyle="neon"]     .mv-title { font-size: calc(1.14rem * var(--s-t, 1)); }

    /* 안여백 — 스타일마다 다시 적으므로 여기서 한 번에 맞춘다 */
    .mv-look .mv-body,
    .mv-look[data-mvstyle="poster"] .mv-body,
    .mv-look[data-mvstyle="card"] .mv-body,
    .mv-look[data-mvstyle="magazine"] .mv-body { padding: 14px 15px 20px; }

    /* 표지 — 키만 조인다.
       ⚠️ 비율(aspect-ratio)은 건드리지 않는다. 포스터는 3/4 세로, 필름은 21/9 가로,
          손글씨는 1/1 동그라미… 저마다 그 모양이 곧 스타일의 정체다.
          한때 여기서 전부 3/2 로 맞췄더니 동그란 표지가 타원이 되어 버렸다. */
    .mv-look .mv-hero,
    .mv-look[data-mvstyle] .mv-hero { max-height: 32vh; }
    /* 세로로 긴 표지(3/4)는 손안에서 화면을 통째로 먹는다 — 조금 더 조인다 */
    .mv-look[data-mvstyle="poster"] .mv-hero,
    .mv-look[data-mvstyle="card"] .mv-hero { max-height: 34vh; }
    /* 동그란 표지는 잘라 낼 수 없으니 지름을 줄인다 */
    .mv-look[data-mvstyle="minimal"] .mv-hero { width: 104px; margin-top: 28px; }
    /* 띠처럼 넓은 표지는 위아래 여백만 줄인다 */
    .mv-look[data-mvstyle="film"] .mv-hero { margin: 16px 0; }
}

@media (max-width: 380px) {
    .mv-look[data-mvstyle] .mv-title,
    .mv-slide[data-mvstyle] .mv-title { font-size: calc(1.12rem * var(--s-t, 1)); }
    .mv-look[data-mvstyle="poster"]  .mv-title { font-size: calc(1.22rem * var(--s-t, 1)); }
    .mv-look[data-mvstyle="film"]    .mv-title,
    .mv-look[data-mvstyle="neon"]    .mv-title { font-size: calc(1.06rem * var(--s-t, 1)); }
    .mv-look .mv-hero,
    .mv-look[data-mvstyle] .mv-hero { max-height: 27vh; }
    .mv-look[data-mvstyle="poster"] .mv-hero,
    .mv-look[data-mvstyle="card"] .mv-hero { max-height: 30vh; }
    .mv-look[data-mvstyle="minimal"] .mv-hero { width: 94px; margin-top: 22px; }
}

/* ══════════════════════════════════════════════════════════
   📱 손안에서 한눈에 — 도장 · 배지 · 여백 다듬기

   ⚠️ 세 가지를 고친다.
     ① 표지 위 날짜 도장이 늘 검은 판이라, 레몬 · 민트 같은 밝은 스타일 위에서
        혼자 튀었다. 스타일이 정한 강조색(--s-acc)을 입혀 한 벌로 보이게 한다.
     ② 정보 배지 넷이 한 줄에 몰려 답답했다. 날짜는 바로 위 「언제」 줄과
        같은 말이므로 접고, 남은 것을 두 칸으로 나눈다.
     ③ 첫 화면에서 '언제 · 어디서 · 몇 명' 까지 보이도록 사이 여백을 조인다.
   ⚠️ 파일 맨 끝이어야 스타일별 규칙(880~1110줄)을 이긴다.
   ══════════════════════════════════════════════════════════ */

/* ① 날짜 도장 — 스타일 빛깔을 입는다 (넓은 화면에서도 같이 적용) */
.mv-slide[data-mvstyle] .mv-stamp,
.mv-look[data-mvstyle] .mv-stamp {
    background: var(--s-acc, #123C36);
    box-shadow: 0 3px 12px rgba(10, 20, 18, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* 강조색 위에서는 흰 글씨가 가장 또렷하다 — 스타일마다 색을 따로 고르지 않는다 */
.mv-slide[data-mvstyle] .mv-stamp .dd,
.mv-look[data-mvstyle] .mv-stamp .dd { color: #FFFFFF; }
.mv-slide[data-mvstyle] .mv-stamp .wh,
.mv-look[data-mvstyle] .mv-stamp .wh { color: rgba(255, 255, 255, 0.86); }
/* 밝은 바탕을 쓰는 스타일(레몬 · 민트)은 강조색이 옅어 글이 묻힐 수 있다 —
   한 겹 더 눌러 준다 */
.mv-look[data-mvstyle="block"] .mv-stamp,
.mv-look[data-mvstyle="ticket"] .mv-stamp {
    box-shadow: 0 3px 12px rgba(10, 20, 18, 0.4),
                inset 0 0 0 999px rgba(0, 0, 0, 0.12);
}

@media (max-width: 640px) {
    /* ② 배지 — 날짜는 접고, 남은 것을 두 칸으로 */
    .mv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
    .mv-meta .dup-when { display: none; }
    /* ⚠️ 알약 안에서 글이 줄바꿈되게 둔다.
          한 줄로 못 박아 두면 긴 글(「모집 마감까지 3일 남았어요」 · 긴 장소 이름)이
          알약을 옆으로 늘려 한 칸을 통째로 먹었다. 낱말 단위로 넘긴다. */
    .mv-meta span {
        justify-content: flex-start; min-width: 0;
        white-space: normal; word-break: keep-all; line-height: 1.4;
    }
    .mv-meta span i { flex: 0 0 auto; }
    /* ⚠️ 마지막 알약을 한 줄 통째로 쓰게 하던 규칙은 걷어 냈다.
          글이 안에서 접히므로 이제 반 칸으로 충분하고, 넷이 반듯한 두 줄로 선다.
          (하나만 혼자 넓어 판이 어그러져 보이던 까닭이 이것이었다) */

    /* ③ 여백 — 표지와 글, 글과 글 사이를 고르게 */
    .mv-look .mv-body,
    .mv-look[data-mvstyle="poster"] .mv-body,
    .mv-look[data-mvstyle="card"] .mv-body,
    .mv-look[data-mvstyle="magazine"] .mv-body { padding: 15px 16px 20px; }
    .mv-badge { margin-bottom: 9px; }
    .mv-title { margin-bottom: 10px; }
    .mv-title::after { margin-top: 8px; }
    .mv-solo { margin-bottom: 11px; }
    .mv-when { margin: 10px 0 11px; }
    .mv-kinds { margin-bottom: 10px; gap: 5px; }

    /* 손글씨는 가운데 정렬이라 배지도 가운데로 — 왼쪽에 붙으면 짝이 안 맞는다 */
    .mv-look[data-mvstyle="minimal"] .mv-meta span { justify-content: center; }
    .mv-look[data-mvstyle="minimal"] .mv-body { padding: 18px 20px 24px; }
}

/* ══════════════════════════════════════════════════════════
   📋 간략 화면 — 갈지 말지 정하는 데 꼭 필요한 것만

   ⚠️ 열 가지 스타일은 「읽는 자리」이지 「고르는 자리」가 아니다.
      스타일마다 짜임새가 달라 언제·어디서·몇 자리를 찾는 데 시간이 걸린다.
      그래서 고르는 데 필요한 것만 늘 같은 자리에 놓은 판을 따로 둔다.
   ══════════════════════════════════════════════════════════ */
.mv-slide.mv-brief { background: #FFFFFF; }

/* 표지 — 화면 위쪽 오분의 일.
   ⚠️ 「화면의 1/5」 과 「4:3」 은 폭을 가득 쓰는 한 함께 이룰 수 없다.
      375px 폭에서 4:3 이면 키가 281px(약 35vh)라 1/5(약 162px)의 두 배가 넘는다.
      그래서 자리는 1/5 로 두고, 사진은 4:3 틀에서 가운데를 잘라 채운다.
      (사진은 4:3 으로 올려도 위아래만 조금 깎여 담긴다) */
.mv-brief .mb-hero {
    position: relative; width: 100%; aspect-ratio: 4 / 3;
    max-height: 20vh;
    background: #EDF4F2; overflow: hidden;
}
.mv-brief .mb-hero img {
    width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: center 45%;   /* 위쪽(하늘)보다 가운데를 살린다 */
}
.mv-brief .mb-hero.blank {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #E9F5F0, #DCEDE7);
}
.mv-brief .mb-hero.blank i { font-size: 2rem; color: #A8C4BC; }

.mv-brief .mb-body { padding: 14px 16px 0; }

.mv-brief .mb-head { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.mv-brief .mb-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: #E8F3EE; color: var(--green);
    border-radius: 999px; padding: 5px 11px 5px 9px;
    font-size: 0.72rem; font-weight: 800;
}
.mv-brief .mb-badge i { font-size: 0.74rem; }
.mv-brief .mb-kind {
    display: inline-flex; align-items: center;
    background: #F2F7F5; color: var(--dim, #6B7C77);
    border-radius: 999px; padding: 5px 11px; font-size: 0.72rem; font-weight: 800;
}
.mv-brief .mb-kind.plan { background: #FDEBED; color: var(--red); }
/* ⚧ 동성 알림표 — 스토리 쪽 .mv-kind.sex 와 같은 색을 쓴다.
      두 화면에서 색이 다르면 같은 말인 줄 모른다. */
.mv-brief .mb-kind.sex { gap: 5px; }
.mv-brief .mb-kind.sex.m { background: #EAF1FB; color: #1E5FA8; }
.mv-brief .mb-kind.sex.f { background: #FDEEF1; color: #C0335A; }

.mv-brief .mb-title {
    margin: 0 0 12px; font-size: 1.2rem; font-weight: 900; line-height: 1.4;
    color: var(--green); word-break: keep-all; text-wrap: balance;
}

/* 한 줄씩 — 라벨과 값이 늘 같은 자리에 온다 */
.mv-brief .mb-rows { display: flex; flex-direction: column; }
.mv-brief .mb-row {
    display: grid; grid-template-columns: 18px 68px 1fr; gap: 9px;
    align-items: start; padding: 9px 0;
    border-bottom: 1px solid #F1F5F4;
    font-size: 0.82rem; line-height: 1.55;
}
.mv-brief .mb-row:last-child { border-bottom: 0; }
.mv-brief .mb-row > i { color: var(--green); font-size: 0.78rem; margin-top: 3px; }
.mv-brief .mb-row .k {
    color: var(--dim, #6B7C77); font-weight: 700; font-size: 0.76rem; margin-top: 1px;
}
.mv-brief .mb-row .v { color: var(--ink, #142421); font-weight: 600; word-break: keep-all; }
.mv-brief .mb-row .v b { font-weight: 900; color: var(--green); }
.mv-brief .mb-row .v em { font-style: normal; font-weight: 900; color: var(--red); }
.mv-brief .mb-row .v .off { color: #94A6A1; }
.mv-brief .mb-row.off .v { color: #94A6A1; }

/* ══════════════════════════════════════════════════════════
   🎈 플로팅 띠 — 채팅 칸 바로 위에 늘 떠 있다
   ⚠️ 굴려 내려도 따라온다. 언제까지인지와 더 볼 수 있다는 것은
      글의 어느 대목에서든 손이 닿아야 한다.
   ══════════════════════════════════════════════════════════ */
.mv-float {
    position: fixed; left: 0; right: 0; z-index: 12;
    bottom: calc(var(--mv-dockh, 64px) + var(--kb, 0px));
    display: none; align-items: center; gap: 7px;
    padding: 8px 12px;
    pointer-events: none;
}
.mv-float.on { display: flex; }
.mv-float > * { pointer-events: auto; }

.mv-float .mf-dd {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    border: 0; border-radius: 13px; padding: 7px 12px; cursor: pointer;
    font-family: inherit; background: var(--green); color: #FFFFFF;
    box-shadow: 0 6px 16px -8px rgba(18, 60, 54, 0.7);
}
.mv-float .mf-dd b { font-size: 0.82rem; font-weight: 900; letter-spacing: -0.01em; }
.mv-float .mf-dd span { font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,0.78); }

.mv-float .mf-more {
    flex: 1; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 13px; padding: 11px 12px; cursor: pointer;
    font-family: inherit; font-size: 0.8rem; font-weight: 900; letter-spacing: -0.02em;
    background: #FFFFFF; color: var(--green);
    border: 1px solid rgba(18,60,54,0.14);
    box-shadow: 0 6px 16px -10px rgba(18,60,54,0.5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv-float .mf-more i { font-size: 0.76rem; }
.mv-float .mf-more:hover { background: #F7FAF9; }
/* 상세를 읽는 중임을 색으로 알린다 — 흰 단추(상세정보로 들어가기) ↔ 진한 단추(간단정보로 나가기).
   글자만 바뀌면 지금 어느 쪽을 보고 있는지 헷갈린다. */
.mv-float .mf-more.on {
    background: var(--green); color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 8px 18px -9px rgba(18,60,54,0.75);
}
.mv-float .mf-more.on:hover { background: var(--green2, #1A544B); }

.mv-float .mf-ic {
    position: relative; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 13px; cursor: pointer;
    border: 1px solid rgba(18,60,54,0.14); background: #FFFFFF; color: var(--dim, #6B7C77);
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem;
    box-shadow: 0 6px 16px -10px rgba(18,60,54,0.5);
}
.mv-float .mf-ic.on { background: #E8F3EE; color: var(--green); border-color: #BFE0D4; }
.mv-float .mf-ic.comp { color: var(--red); }
.mv-float .mf-ic .n {
    position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px;
    padding: 0 4px; border-radius: 999px; background: var(--red); color: #FFFFFF;
    font-size: 0.6rem; font-weight: 900; display: none;
    align-items: center; justify-content: center;
}
.mv-float .mf-ic .n:not(:empty) { display: flex; }

/* ══════════════════════════════════════════════════════════
   🗂 아래에서 올라오는 판 — 관심 배지 · 동행 지원
   ══════════════════════════════════════════════════════════ */
.mv-sheet {
    position: absolute; inset: 0; z-index: 40;
    background: rgba(10, 24, 21, 0.5); backdrop-filter: blur(3px);
    display: flex; align-items: flex-end; justify-content: center;
}
.ms-box {
    width: 100%; max-width: 560px; max-height: 78%;
    background: #FFFFFF; border-radius: 20px 20px 0 0;
    padding: 16px 16px 20px;
    overflow-y: auto;
    animation: msUp 0.24s cubic-bezier(0.34, 1.3, 0.64, 1);
}
@keyframes msUp {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.ms-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ms-head b { font-size: 0.98rem; font-weight: 900; color: var(--ink, #142421); }
.ms-head span { font-size: 0.72rem; font-weight: 800; color: var(--dim2, #86958F); }
.ms-x {
    margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 0;
    background: #F2F7F5; color: var(--dim, #6B7C77); cursor: pointer;
}
.ms-say {
    margin: 0 0 12px; font-size: 0.79rem; line-height: 1.65; font-weight: 600;
    color: var(--dim, #6B7C77); word-break: keep-all;
}
.ms-say b { color: var(--ink, #142421); font-weight: 900; }
.ms-load { padding: 26px 0; text-align: center; color: var(--dim2, #86958F); font-size: 0.82rem; }

.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.ms-one {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    border: 1px solid var(--line); border-radius: 14px; padding: 11px 6px;
    background: #FFFFFF; cursor: pointer; font-family: inherit;
    font-size: 0.72rem; font-weight: 800; color: var(--ink, #142421);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.ms-one i { font-size: 1.05rem; color: var(--green2, #1A544B); }
.ms-one span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ms-one.on { border-color: var(--green2); background: #EDF5F2; transform: translateY(-2px); }
.ms-one.fr .f {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #E8EEEC;
    display: flex; align-items: center; justify-content: center; color: #9AACA7;
}
.ms-one.fr .f img { width: 100%; height: 100%; object-fit: cover; }

/* ── 동행 지원: 친구 고르는 화면 ───────────────────────────────
   친구가 많으면 목록이 길어져 신청 버튼이 저 아래로 밀린다.
   창을 위(머리말·찾는 칸) / 가운데(구르는 목록) / 아래(버튼) 로 나눠 둔다.
   ⚠️ min-height:0 이 없으면 가운데가 안 줄어들어 버튼이 또 밀려난다. */
.ms-box.pick {
    display: flex; flex-direction: column;
    max-height: 82%; overflow: hidden; padding-bottom: 0;
}
.ms-box.pick .ms-head,
.ms-box.pick .ms-say,
.ms-box.pick .ms-find,
.ms-box.pick .ms-foot { flex: 0 0 auto; }
.ms-box.pick .ms-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 6px; margin: 0 -2px;
}
.ms-box.pick .ms-foot {
    position: sticky; bottom: 0; background: #FFFFFF;
    padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 14px -10px rgba(20, 36, 33, 0.18);
}
.ms-box.pick .ms-foot .ms-save { margin-top: 0; }
.ms-box.pick .ms-say[data-none] { margin: 18px 0 6px; text-align: center; }

.ms-find {
    position: relative; display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--line); border-radius: 13px;
    background: #F7FAF9; padding: 0 12px; height: 42px; margin-bottom: 10px;
}
.ms-find > i { font-size: 0.82rem; color: var(--dim2, #86958F); }
.ms-find input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font-family: inherit; font-size: 0.84rem; font-weight: 700;
    color: var(--ink, #142421);
}
.ms-find input::placeholder { color: #A7B5B1; font-weight: 600; }
.ms-find:focus-within { border-color: var(--green2, #1A544B); background: #FFFFFF; }
.ms-find-x {
    border: 0; background: transparent; padding: 0; cursor: pointer;
    color: #B3C0BC; font-size: 0.92rem; line-height: 1;
}
/* ⚠️ display:flex 가 브라우저의 [hidden] 을 이겨 버린다 — 못 박아 둔다 */
.ms-find[hidden], .ms-find [hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   🪜 올리기 세 걸음 — 간단모임정보 · 상세모임정보 · 올리기
   보는 화면(간단 ↔ 상세)과 같은 차례라 적으면서 결과가 그려진다.
   ══════════════════════════════════════════════════════════════ */
.mv-steps {
    display: flex; align-items: center; gap: 4px;
    padding: 12px 14px 10px; background: #FFFFFF;
    position: sticky; top: 0; z-index: 6;
    border-bottom: 1px solid var(--line);
}
.mv-stp {
    flex: 0 1 auto; min-width: 0;
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; background: transparent; padding: 4px 2px; cursor: pointer;
    font-family: inherit; font-size: 0.72rem; font-weight: 800;
    color: #A7B5B1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv-stp .n {
    flex: 0 0 auto;
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #EDF1F0; color: #A7B5B1; font-size: 0.68rem; font-weight: 900;
}
.mv-stp.done { color: var(--green2, #1A544B); }
.mv-stp.done .n { background: #DCEBE5; color: var(--green2, #1A544B); }
.mv-stp.on { color: var(--ink, #142421); }
.mv-stp.on .n { background: var(--green); color: #FFFFFF; }
/* 아직 안 지난 걸음은 눌러도 소용없다 — 손가락이 헛돌지 않게 알려 준다 */
.mv-stp:not(.on):not(.done) { cursor: default; }
.mv-stp-line { flex: 1 1 auto; height: 1px; background: var(--line); min-width: 8px; }
@media (max-width: 380px) {
    .mv-stp b { display: none; }         /* 좁으면 번호만 — 글자가 겹치는 것보다 낫다 */
    .mv-stp.on b { display: inline; }
}

/* 📋 마지막 걸음의 요약 — 누르면 그 걸음으로 돌아간다 */
.mv-sum {
    display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
    margin-bottom: 12px; background: #FFFFFF;
}
.mv-sum-row {
    display: grid; grid-template-columns: 18px 84px 1fr 12px;
    align-items: center; gap: 9px;
    border: 0; border-bottom: 1px solid var(--line); background: transparent;
    padding: 12px 13px; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 0.79rem;
}
.mv-sum-row:last-child { border-bottom: 0; }
.mv-sum-row > i { color: var(--green2, #1A544B); font-size: 0.82rem; }
.mv-sum-row .k { font-weight: 800; color: var(--dim, #6B7C77); }
.mv-sum-row .v {
    font-weight: 800; color: var(--ink, #142421); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mv-sum-row .go { color: #C3CFCB; font-size: 0.72rem; }
.mv-sum-row.empty .v { color: #B3C0BC; font-weight: 600; }
.mv-sum-row.empty > i { color: #C3CFCB; }
.mv-sum-row:hover { background: #F7FAF9; }
.mv-sum-row:active { background: #EDF5F2; }
/* 어디까지가 간단이고 어디부터가 상세인지 — 보는 화면과 같은 갈래로 나눠 둔다 */
.mv-sum-cap {
    display: flex; align-items: center; gap: 6px;
    padding: 11px 13px 9px; background: #F7FAF9;
    border-bottom: 1px solid var(--line);
    font-size: 0.71rem; font-weight: 900; color: var(--dim, #6B7C77); letter-spacing: -0.01em;
}
.mv-sum-cap i { font-size: 0.72rem; color: var(--green2, #1A544B); }

/* ✏️ 한 가지만 고치는 작은 창 */
.ms-box.fld { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.ms-box.fld .fld-body > .mv-in { margin-bottom: 0; }
.ms-box.fld .fld-body .mv-sec { border: 0; padding: 0; margin: 0; background: transparent; }
.ms-box.fld .fld-body .mv-sec-h { display: none; }   /* 창 머리말이 이미 이름을 말한다 */

.ms-mates { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.ms-mate {
    display: flex; align-items: center; gap: 9px;
    border: 1px solid var(--line); border-radius: 13px; padding: 9px 11px;
}
.ms-mate .f {
    width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #E8EEEC;
    display: flex; align-items: center; justify-content: center; color: #9AACA7; font-size: 0.8rem;
}
.ms-mate .f img { width: 100%; height: 100%; object-fit: cover; }
.ms-mate b { flex: 1; font-size: 0.84rem; font-weight: 800; }
.ms-mate .t { font-size: 0.72rem; font-weight: 800; color: var(--dim2, #86958F); }
.ms-mate.accepted { background: #F3F9F6; border-color: #CFE4DC; }
.ms-mate.accepted .t { color: var(--green2, #1A544B); }
.ms-mate.declined { background: #FAFAFA; }
.ms-mate.declined b { color: #9AA5A2; }
.ms-mate.declined .t { color: #9AA5A2; }

.ms-save, .ms-cancel, .ms-yes, .ms-no {
    width: 100%; margin-top: 12px; border: 0; border-radius: 14px; padding: 13px;
    font-family: inherit; font-size: 0.85rem; font-weight: 900; cursor: pointer;
}
.ms-save { background: var(--green); color: #FFFFFF; }
.ms-save:disabled { background: #C3CFCB; cursor: default; }
.ms-cancel { background: #F2F7F5; color: var(--dim, #6B7C77); margin-top: 8px; }
.ms-two { display: flex; gap: 8px; }
.ms-two .ms-no { flex: 0 0 38%; background: #F2F7F5; color: var(--dim, #6B7C77); }
.ms-two .ms-yes { flex: 1; background: var(--red); color: #FFFFFF; }

@media (max-width: 380px) {
    .mv-brief .mb-row { grid-template-columns: 16px 60px 1fr; gap: 7px; font-size: 0.78rem; }
    .mv-brief .mb-title { font-size: 1.1rem; }
    .mv-float .mf-more { font-size: 0.74rem; padding: 10px 8px; }
    .mv-float .mf-ic { width: 36px; height: 36px; }
}

/* ══════════════════════════════════════════════════════════
   🎁 함께 오시는 분께 — 적는 화면에 더한 칸들
   ⚠️ 짝을 이루는 두 칸(주스 · 사탕)은 나란히 둔다. 세로로 쌓으면
      「둘 중 하나만 적어도 되는 것」 처럼 읽힌다.
   ══════════════════════════════════════════════════════════ */
.mv-two-in { display: flex; gap: 8px; }
.mv-two-in > span { flex: 1; min-width: 0; display: block; }

/* 동행 인원 — 다섯 칸이라 알약처럼 작게 */
.mv-pick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-pick-one {
    flex: 1 1 auto; min-width: 62px;
    border: 1px solid var(--line); background: #F7FAF9;
    border-radius: 12px; padding: 10px 8px; cursor: pointer; font-family: inherit;
    font-size: 0.78rem; font-weight: 800; color: var(--ink);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mv-pick-one.on { border-color: var(--red); background: #FDEBED; color: var(--red); }

.mv-hint {
    margin: 7px 2px 0; font-size: 0.7rem; line-height: 1.6;
    color: var(--ink-soft, #66746F); font-weight: 500; word-break: keep-all;
}

/* ══════════════════════════════════════════════════════════
   🔧 상세화면 다듬기
   ══════════════════════════════════════════════════════════ */

/* ── 아래 떠 있는 막대 ──
   ⚠️ 초록 D-day 덩어리(2줄)와 40px 네모 아이콘이 높이가 서로 달라 들쑥날쑥했다.
      키를 44px 하나로 맞추고 사이를 조금 벌린다. 같은 키로 늘어서면 그것만으로 정돈돼 보인다. */
.mv-float { gap: 9px; padding: 10px 14px; }
.mv-float .mf-dd,
.mv-float .mf-more,
.mv-float .mf-ic { height: 44px; box-sizing: border-box; }
.mv-float .mf-dd {
    justify-content: center; padding: 0 14px; border-radius: 14px;
}
.mv-float .mf-more { padding: 0 14px; border-radius: 14px; }
.mv-float .mf-ic { width: 44px; border-radius: 14px; font-size: 0.95rem; }

/* 🤝 동행 단추 — 아이콘만 두었더니 「친구 추가」 로 오해받았다. 글을 붙인다. */
.mv-float .mf-comp {
    position: relative; flex: 0 0 auto; height: 44px; box-sizing: border-box;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 14px; border-radius: 14px; cursor: pointer;
    border: 1px solid rgba(200, 36, 51, 0.24); background: #FFF6F7; color: var(--red);
    font-family: inherit; font-size: 0.8rem; font-weight: 900; white-space: nowrap;
    box-shadow: 0 6px 16px -10px rgba(200, 36, 51, 0.5);
}
.mv-float .mf-comp i { font-size: 0.82rem; }
.mv-float .mf-comp:hover { background: var(--red); color: #FFFFFF; border-color: var(--red); }
.mv-float .mf-comp .n:not(:empty) {
    min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
    background: var(--red); color: #FFFFFF; font-size: 0.6rem; font-weight: 900;
    display: inline-flex; align-items: center; justify-content: center;
}
.mv-float .mf-comp:hover .n:not(:empty) { background: #FFFFFF; color: var(--red); }

/* 간략화면의 동행 알약 — 다른 알약과 같은 결이되 붉은 기를 살짝 */
.mv-meta span.comp { background: #FFF6F7; border-color: rgba(200, 36, 51, 0.2); color: #9B3140; }
.mv-meta span.comp b { color: var(--red); }
.mv-meta span.comp i { color: var(--red); }

/* 📏 좁은 폰 — 떠 있는 막대에 넉 자리가 서면 「상세정보」 글자가 잘렸다.
   ⚠️ D-day 옆의 날짜는 바로 위 알약과 표지 아래 「언제」 줄에 이미 두 번 나온다.
      셋 중 여기 것을 접는다 — 남은 D-12 만으로도 뜻이 통한다. */
@media (max-width: 420px) {
    .mv-float .mf-dd span { display: none; }
    .mv-float .mf-dd { padding: 0 12px; }
    .mv-float .mf-more { padding: 0 10px; }
    .mv-float .mf-comp { padding: 0 11px; }
    .mv-float { gap: 7px; padding: 10px 12px; }
}

/* ⚠️ 빈 표지의 「눌러서 표지 사진 넣기」 알약이 아래 「사진 고르기 · 찍기」 단추를
      덮고 있었다. 안쪽 여백(아래 76px)이 단추 높이(약 58px)에 딱 붙어 있어서,
      알약 한 줄이 더해지자 그만큼 넘쳐 내려온 것이다.
      단추가 설 자리를 넉넉히 비우고, 알약은 한 뼘 위로 올려 둔다. */
.mv-cover .empty { padding-bottom: 76px; gap: 7px; }
.mv-cover .empty em { margin-top: 2px; }
.mv-cover:not(.has) .empty em { margin-top: 2px; }
/* 표지가 낮은 화면(간단모임정보 고치기)에서는 더 조인다 —
   높이가 20vh 뿐이라 글이 서너 줄만 되어도 단추를 침범한다. */
/* ⚠️ 아래에 비워 둔 자리(단추 몫)가 너무 커서 글이 위로 쏠렸다.
      단추는 58px 남짓이다 — 딱 그만큼만 비우면 남은 자리 한가운데에 온다.
      「가운데 정렬」 은 이미 걸려 있다. 어긋난 것은 정렬이 아니라 비워 둔 자리였다. */
/* ⚠️ 위쪽(374줄)에 이미 brief 규칙이 있다. 여기서 또 크기를 정하면 두 곳이 다투어
      「어디를 고쳐야 바뀌나」 를 알 수 없게 된다. 자리 잡기만 여기서 맡는다.
   ⚠️ 글이 위로 쏠렸던 까닭은 정렬이 아니라 아래에 비워 둔 자리였다 —
      단추는 58px 남짓인데 84px 을 비워 두어 그만큼 위로 밀렸다. */
.mv-cover.brief .empty { padding: 10px 16px 60px; }

/* ⚧ 동성 모임 배지 — 남자만은 파랑, 여자만은 빨강.
   ⚠️ 「자유」 에는 안 붙인다. 대부분이 자유라 다 붙이면 아무것도 안 알려 준다. */
.mv-kind.sex { font-weight: 800; }
.mv-kind.sex.m { background: #EAF1FB; border-color: #C6DAF4; color: #1E5FA8; }
.mv-kind.sex.m i { color: #1E5FA8; }
.mv-kind.sex.f { background: #FDEEF1; border-color: #F6CBD5; color: #C0335A; }
.mv-kind.sex.f i { color: #C0335A; }

/* ⚧ 참여 대상 — 평소엔 한 줄, 바꾸고 싶을 때만 펼친다
   ⚠️ 「자유」 와 「동성」 을 같은 크기로 나란히 두지 않는다.
      고를 일이 드문 쪽이 늘 눈앞에 있으면 그것만으로 권유처럼 읽힌다. */
/* ⚠️ 이 칸은 가만히 두어도 「자유」 가 골라져 있는 자리다.
      그런데 회색 상자로 두면 「아직 아무것도 안 골랐다」 로 읽힌다 —
      옆의 다른 고르기 칸들은 골라진 것이 붉게 차 있으니 더 그렇다.
      처음부터 골라진 모양(붉은 테두리 · 옅은 분홍)으로 둔다. */
.mv-sex {
    background: #FDEBED; border: 1px solid var(--red);
    border-radius: 14px; padding: 12px 13px; margin-bottom: 4px;
}
.mv-sex .now { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* ⚠️ 이 줄은 「지금 고른 것」 이다. 다른 고르기 칸의 골라진 단추가 모두 레드인데
      여기만 그린이면 「이건 안 골라진 건가」 로 읽힌다. 같은 레드로 맞춘다. */
.mv-sex .now b {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0;
    font-size: 0.86rem; font-weight: 800; color: var(--red);
}
.mv-sex .now b i { font-size: 0.74rem; }
.mv-sex .now button {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    border: 0; background: transparent; cursor: pointer; padding: 4px 2px;
    font-family: inherit; font-size: 0.75rem; font-weight: 700; color: #B0525C;
}
.mv-sex .now button i { font-size: 0.66rem; }
.mv-sex .now button:active { color: var(--red); }
.mv-sex .mv-pickrow { margin-top: 10px; }
.mv-sex .say {
    margin: 9px 2px 0; font-size: 0.75rem; font-weight: 500;
    color: #B0525C; line-height: 1.55; word-break: keep-all;
}

/* 🗑 아직 아무도 안 온 모임만 뜨는 삭제 단추 — 되돌릴 수 없는 일이라 레드로 둔다.
   ⚠️ 다만 「모임 마감하기」 옆에 서므로 너무 크게 두지 않는다. 실수로 먼저 눌리면 안 된다. */
.mv-act.wipe {
    flex: 0 0 auto; background: #FDECEE; color: var(--red, #C82433);
    border: 1px solid #F5C9CF;
}
.mv-act.wipe:active { background: #FBDDE1; }