/* 자체 문의 채팅 위젯 — 흰 배경 + 포인트 컬러 1개(사이트 레드). assets/js/mk-chat.js */
.mkc {
  --mkc-red: var(--mk-red, #D9374A);
  --mkc-ink: #111827;
  --mkc-sub: #6b7280;
  --mkc-line: #e5e7eb;
  --mkc-soft: #f3f4f6;
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 10000;
  width: 360px;
  height: min(560px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  color: var(--mkc-ink);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .16);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.mkc[hidden] { display: none; }
.mkc *, .mkc *::before, .mkc *::after { box-sizing: border-box; }
.mkc button { font: inherit; cursor: pointer; }

.mkc { --mkc-blue: #3797f0; }
.mkc-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid #efefef; }
.mkc-head-t { min-width: 0; }
.mkc-title { font-size: 15px; font-weight: 700; }
.mkc-sub { font-size: 12px; color: var(--mkc-sub); }
.mkc .mkc-x { margin-left: auto; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--mkc-ink); font-size: 24px; line-height: 1; border-radius: 50%; }
.mkc .mkc-x:hover { background: var(--mkc-soft); }

/* 프로필 — 사이트 아이콘(없으면 K) */
.mkc-av { flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid var(--mkc-line); color: var(--mkc-red); font-family: Georgia, serif; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.mkc-head .mkc-av { width: 32px; height: 32px; font-size: 16px; }
.mkc .mkc-av img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; margin: 0; border-radius: 0; }
.mkc-av.is-ghost { visibility: hidden; }

/* 인스타그램 DM 식 — 흰 바탕, 내 말 파랑 · 상대 옅은 회색, 아주 둥근 말풍선, 시각은 가운데 (운영자 선택 2026-09-21) */
.mkc-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; }
/* 세로 flex 안에서 overflow:hidden 인 사진 칸은 min-height 가 0 이 되어 납작하게 눌린다 — 줄어들지 않게 고정 */
.mkc-body > * { flex-shrink: 0; }
.mkc-empty { margin: auto; color: var(--mkc-sub); text-align: center; }
.mkc-empty[hidden] { display: none; }
.mkc-greet { display: flex; flex-direction: column; gap: 4px; }
/* 이전 상담 내역 — 맨 위의 글자 버튼. 누르면 그 자리에 지난 대화가 펼쳐지고, 인삿말부터가 지금 상담이다. */
.mkc .mkc-older { align-self: center; margin: 0 0 10px; padding: 6px 10px; border: 0; background: none; color: #8e8e8e; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.mkc .mkc-older[hidden] { display: none; }
.mkc .mkc-older:disabled { text-decoration: none; cursor: default; }
.mkc-hist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #efefef; }
.mkc-hist[hidden] { display: none; }
.mkc-hist > * { flex-shrink: 0; }
.mkc-day { align-self: center; font-size: 11px; color: #8e8e8e; margin: 10px 0 6px; }
.mkc-row { display: flex; align-items: flex-end; gap: 7px; }
.mkc-row.me { justify-content: flex-end; }
.mkc-row.me + .mkc-row.op, .mkc-row.op + .mkc-row.me { margin-top: 8px; }
.mkc-b { max-width: 76%; padding: 9px 14px; border-radius: 22px; white-space: pre-wrap; word-break: break-word; }
.mkc-row.me .mkc-b { background: var(--mkc-blue); color: #fff; }
.mkc-row.is-sending .mkc-b { opacity: .55; }   /* 보내는 중 — 서버가 받으면 진짜 말풍선으로 바뀐다 */
.mkc-row.op .mkc-b { background: #efefef; color: var(--mkc-ink); }
.mkc-img { display: block; max-width: 62%; border-radius: 20px; overflow: hidden; }
/* 사진은 자르지 않고 전체를 비율 그대로 — 세로로 긴 사진(폰 캡처)은 높이 기준으로 줄어든다 */
.mkc .mkc-img img { display: block; width: auto; height: auto; max-width: 100%; max-height: 340px; margin: 0; border-radius: 0; }
.mkc-ord { width: 76%; border: 1px solid #dbdbdb; border-radius: 18px; padding: 10px 14px; font-size: 12.5px; background: #fff; }
.mkc-ord-n { font-weight: 700; }
.mkc-ord-s { color: var(--mkc-sub); }
.mkc-typing { margin-top: 6px; }
.mkc-typing[hidden] { display: none; }
.mkc-row.op .mkc-dots { display: flex; align-items: center; gap: 4px; padding: 14px 15px; }
.mkc-dots span { width: 7px; height: 7px; border-radius: 50%; background: #8e8e8e; animation: mkcDot 1.2s infinite ease-in-out; }
.mkc-dots span:nth-child(2) { animation-delay: .15s; }
.mkc-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes mkcDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mkc-dots span { animation: none; opacity: .7; } }
.mkc-seen { align-self: flex-end; font-size: 11px; color: #8e8e8e; margin: 1px 6px 0 0; }
.mkc-seen[hidden] { display: none; }
/* 상담원이 읽은 뒤에 고친 답장 — 말풍선 바로 아래 (프로필 26 + 간격 7 + 말풍선 안쪽 여백만큼 들여쓴다) */
.mkc-edited { align-self: flex-start; font-size: 11px; color: #8e8e8e; margin: 0 0 2px 46px; }
.mkc-edited + .mkc-row.me { margin-top: 8px; }
.mkc-edited.me { align-self: flex-end; margin: 0 8px 2px 0; }
.mkc-edited.me + .mkc-row.op { margin-top: 8px; }
/* 보내기 취소한 메시지 — 「삭제된 메시지입니다」 */
.mkc-row .mkc-b.is-unsent { background: #fff; color: #8e8e8e; border: 1px solid #dbdbdb; }
/* 내 글 · 사진 옆의 ⋮ (세로 점 세 개) → 수정 / 보내기 취소 */
.mkc .mkc-more { flex: none; align-self: center; width: 22px; height: 28px; padding: 0; margin: 0 -3px 0 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; border-radius: 8px; }
.mkc .mkc-more span { width: 3px; height: 3px; border-radius: 50%; background: #b0b0b0; }
.mkc .mkc-more:hover span, .mkc .mkc-more:focus-visible span { background: #555; }
.mkc-mm { position: absolute; z-index: 5; min-width: 128px; padding: 4px; background: #fff; border: 1px solid #e6e6e6; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.14); }
.mkc-mm[hidden] { display: none; }
.mkc .mkc-mm-i { display: block; width: 100%; padding: 10px 12px; border: 0; background: none; text-align: left; font-size: 14px; color: var(--mkc-ink); border-radius: 10px; cursor: pointer; }
.mkc .mkc-mm-i[hidden] { display: none; }
.mkc .mkc-mm-i:hover { background: #f5f5f5; }
.mkc .mkc-mm-i.is-danger { color: #ed4956; }
/* 메시지 수정 중 — 입력줄 위 한 줄 */
.mkc-editbar { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 6px; padding-left: 6px; font-size: 12px; color: var(--mkc-sub); }
/* 글자 앞의 표시는 막대가 아니라 작은 점 (운영자 지시 2026-09-22) */
.mkc-editbar > span { display: inline-flex; align-items: center; gap: 7px; }
.mkc-editbar > span::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--mkc-blue); }
.mkc-editbar[hidden] { display: none; }
.mkc .mkc-editbar-x { width: 26px; height: 26px; padding: 0; border: 0; background: none; font-size: 18px; line-height: 1; color: #8e8e8e; cursor: pointer; }

.mkc-foot { padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.mkc-note { font-size: 12px; color: var(--mkc-red); margin-bottom: 8px; }
.mkc-note[hidden] { display: none; }
.mkc-pend { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.mkc-pend[hidden] { display: none; }
.mkc-pend-i { position: relative; width: 64px; height: 64px; border: 1px solid #dbdbdb; border-radius: 14px; overflow: hidden; background: var(--mkc-soft); }
/* 테마 전역 img{height:auto} 가 이기지 못하게 크기는 !important */
.mkc .mkc-pend-i img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; margin: 0; border-radius: 0; }
.mkc .mkc-pend-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(17, 24, 39, .72); color: #fff; font-size: 14px; line-height: 1; }
.mkc-pend-o { position: relative; flex: 1; min-width: 0; border: 1px solid #dbdbdb; border-radius: 14px; padding: 8px 30px 8px 11px; font-size: 12.5px; background: #fff; }
.mkc-pend-o .mkc-ord-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ＋ 메뉴 (주문 첨부 / 사진) */
.mkc-menu { display: flex; flex-direction: column; width: max-content; min-width: 150px; margin-bottom: 8px; border: 1px solid #dbdbdb; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .1); }
.mkc-menu[hidden] { display: none; }
.mkc .mkc-menu-i { text-align: left; padding: 11px 16px; border: 0; background: #fff; color: var(--mkc-ink); font-size: 13.5px; }
.mkc .mkc-menu-i + .mkc-menu-i { border-top: 1px solid #efefef; }
.mkc .mkc-menu-i[hidden] { display: none; }
.mkc .mkc-menu-i:hover { background: #fafafa; }

/* 여러 줄이 되어도 ＋ · 보내기는 입력줄의 세로 가운데에 둔다 (운영자 지시 2026-09-22) */
.mkc-inp { display: flex; align-items: center; gap: 8px; border: 1px solid #dbdbdb; border-radius: 22px; padding: 5px 8px 5px 5px; }
.mkc-inp:focus-within { border-color: #a8a8a8; }
.mkc-inp[hidden] { display: none; }
/* 운영자가 강제 종료한 대화 — 입력줄 대신 안내 한 줄. 내 말 ⋮ 메뉴 · 인삿말 아래 바로가기도 걷는다. */
.mkc-ended { padding: 10px 8px 4px; text-align: center; font-size: 13px; line-height: 1.5; color: #8e8e8e; }
.mkc-ended[hidden] { display: none; }
.mkc.is-ended .mkc-more, .mkc.is-ended .mkc-acts { display: none; }
.mkc .mkc-plus { flex: none; width: 32px; height: 32px; padding: 0 0 2px; border: 0; border-radius: 50%; background: var(--mkc-blue); color: #fff; font-size: 22px; font-weight: 300; line-height: 1; transition: transform .15s ease; }
.mkc .mkc-plus.is-on { transform: rotate(45deg); }
.mkc .mkc-plus:disabled { opacity: .4; }
/* 16px — iOS 가 입력칸 포커스 때 화면을 확대하지 않게 */
/* 테마 전역 textarea 규칙(테두리·그림자·최소높이)이 새어 들어오지 않게 !important 로 고정 */
.mkc .mkc-ta { flex: 1; min-width: 0; width: auto; min-height: 0 !important; height: auto; margin: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; resize: none; background: none !important; font: inherit; font-size: 16px; line-height: 1.4; padding: 5px 0 !important; max-height: 120px; color: var(--mkc-ink); }
.mkc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mkc .mkc-send { flex: none; height: 32px; padding: 0 6px; border: 0; background: none; color: var(--mkc-blue); font-size: 14px; font-weight: 700; line-height: 1; }
.mkc .mkc-send:disabled { opacity: .35; cursor: default; }

.mkc-sheet { position: absolute; inset: 0; background: rgba(17, 24, 39, .35); display: flex; align-items: flex-end; }
.mkc-sheet[hidden] { display: none; }
.mkc-sheet-card { width: 100%; max-height: 82%; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
.mkc-sheet-h { flex: none; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mkc-sheet-t { font-weight: 700; }
.mkc .mkc-sheet-c { margin-left: auto; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--mkc-soft); color: var(--mkc-ink); font-size: 22px; line-height: 1; }
.mkc-sheet-l { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; }
.mkc-sheet-l > * { flex-shrink: 0; }
/* 테마 전역 button 색(파랑)이 새어 들어오지 않게 글자색 고정 */
.mkc .mkc-sheet-o { text-align: left; border: 1px solid var(--mkc-line); border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--mkc-ink); font-size: 12.5px; }
.mkc .mkc-sheet-o:hover { border-color: #9ca3af; }
.mkc-sheet-e { color: var(--mkc-sub); padding: 12px 0; text-align: center; }
.mkc .mkc-sheet-x { flex: none; width: 100%; margin-top: 10px; color: var(--mkc-ink); border: 0; border-radius: 10px; padding: 11px; background: var(--mkc-soft); font-weight: 600; }

/* ── 오배송·파손 신고 폼 ── */
.mkc-rf { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px; }
.mkc-rf-l { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--mkc-ink); }
.mkc-rf-n { margin: 0; font-size: 12.5px; color: var(--mkc-sub); line-height: 1.55; }
.mkc-seg { display: flex; border: 1px solid #dbdbdb; border-radius: 12px; overflow: hidden; }
.mkc .mkc-seg-b { flex: 1; min-width: 0; padding: 11px 8px; border: 0; background: #fff; color: var(--mkc-sub); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.mkc .mkc-seg-b + .mkc-seg-b { border-left: 1px solid #dbdbdb; }
.mkc .mkc-seg-b.is-on { background: var(--mkc-blue); color: #fff; }
.mkc .mkc-rf-pick { height: 46px; border: 1px dashed #c7c7c7; border-radius: 12px; background: #fff; color: var(--mkc-ink); font-size: 13.5px; font-weight: 600; }
.mkc .mkc-rf-pick:hover { border-color: #9ca3af; }
.mkc-rf-o { flex: none; padding-right: 58px; }
.mkc .mkc-rf-ch { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); padding: 4px 6px; border: 0; background: none; color: var(--mkc-blue); font-size: 12.5px; font-weight: 700; }
.mkc-rf-pv { width: 88px; height: 88px; }
/* (.mkc-gf-i 의 한 줄 입력칸 규칙보다 뒤에 와야 하는 값들이라 특이도를 한 단계 올린다) */
.mkc textarea.mkc-rf-m { height: auto !important; padding: 11px 14px !important; resize: none; line-height: 1.45 !important; }

/* ── 비회원 주문조회 — 인삿말 아래 버튼 · 조회 폼 · 주문 카드 ── */
.mkc-acts { margin-top: 4px; align-items: flex-start; }
.mkc-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mkc .mkc-chip { padding: 8px 15px; border: 1px solid var(--mkc-blue); border-radius: 22px; background: #fff; color: var(--mkc-blue); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.mkc .mkc-chip:hover { background: #f2f8fe; }
.mkc-sheet-card.is-tall { max-height: 94%; }
.mkc-gf { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 2px 0 4px; }
.mkc-gf-d { margin: 0 0 4px; font-size: 13px; color: var(--mkc-sub); line-height: 1.55; }
/* 16px — iOS 확대 방지. 테마 전역 input 규칙이 새어 들어오지 않게 !important */
.mkc .mkc-gf-i { width: 100%; height: 46px !important; min-height: 0 !important; margin: 0 !important; padding: 0 14px !important; border: 1px solid #dbdbdb !important; border-radius: 12px !important; outline: 0 !important; box-shadow: none !important; background: #fff !important; color: var(--mkc-ink); font: inherit; font-size: 16px !important; line-height: 1.4; }
.mkc .mkc-gf-i:focus { border-color: #a8a8a8 !important; }
.mkc-gf-e { font-size: 12.5px; color: var(--mkc-red); line-height: 1.5; }
.mkc-gf-e[hidden] { display: none; }
.mkc .mkc-gf-b { margin-top: 2px; height: 46px; border: 0; border-radius: 12px; background: var(--mkc-blue); color: #fff; font-size: 14.5px; font-weight: 700; }
.mkc .mkc-gf-b:disabled { opacity: .55; cursor: default; }

.mkc-go { border: 1px solid var(--mkc-line); border-radius: 14px; padding: 0 12px 12px; background: #fff; }
.mkc-go-h { display: flex; align-items: center; gap: 7px; padding: 12px 0 10px; border-bottom: 1px solid #f2f2f2; margin-bottom: 4px; }
.mkc-go-h b { font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; }
.mkc-go-n { font-size: 12px; color: #999; font-variant-numeric: tabular-nums; }
.mkc-go-badge { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: -.02em; padding: 4px 9px; border-radius: 999px; white-space: nowrap; background: #eef3fd; color: #2b5fc4; }
.mkc-go-badge.is-done { background: #eaf7ee; color: #1b7f3b; }
.mkc-go-badge.is-shipping { background: #fff2e4; color: #c2650b; }
.mkc-go-badge.is-cancel { background: #fdecee; color: #c02a37; }
.mkc-go-i { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.mkc-go-th { flex: none; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: #fafafa; }
.mkc .mkc-go-th img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; margin: 0; border-radius: 0; }
.mkc-go-in { flex: 1; min-width: 0; }
.mkc-go-nm { font-size: 13px; line-height: 1.45; letter-spacing: -.01em; }
.mkc-go-q { font-size: 12px; color: #999; }
.mkc .mkc-go-again { border: 0; background: none; color: var(--mkc-sub); font-size: 13px; padding: 10px; text-decoration: underline; text-underline-offset: 3px; }

/* 배송 추적 카드 — 회원 주문상세와 같은 마크업(.mk-tracking-box, 스타일은 응답에 함께 온다). 카드 안에 들어앉도록 테두리·여백만 맞춘다.
   창 너비가 아니라 화면 너비를 보는 480px 규칙은 PC 에서 안 먹으므로 좁은 창 기준 배치를 여기서 고정한다. */
.mkc-go-track { border-top: 1px solid #f2f2f2; margin-top: 6px; padding-top: 12px; }
.mkc .mk-tracking-box { border: 0; padding: 0; margin: 0; }
.mkc .mk-tracking-title { margin: 0; padding: 0; border: 0; font-size: 14.5px; line-height: 1.4; }
.mkc .mk-tracking-icon { font-size: 22px; }
.mkc .mk-tracking-header { gap: 10px; margin-bottom: 12px; }
.mkc .mk-tracking-number-value { font-size: 14px; }
.mkc .mk-tracking-cta { display: block; text-align: center; padding: 11px 16px; border-radius: 10px; font-size: 13.5px; }
.mkc .mk-tracking-cta.is-open { background: #fff; color: #111 !important; border: 1.5px solid #e2e2e2; }
.mkc .mk-tracking-pending-box { padding: 20px 14px; }
.mkc .mk-tracking-bottles { margin: 0; padding: 0; }
.mkc .mk-tracking-bottle-name { font-size: 13px; }
.mkc .mk-tracking-note, .mkc .mk-tracking-pending-sub, .mkc .mk-tracking-pending-main { margin-left: 0; margin-right: 0; }

/* 배송 조회 패널 — 진행 단계 + 이력 (inc/tracking-inline.php 의 인라인 패널과 같은 모양) */
.mkc-ti { margin: 10px 0 2px; border: 1.5px solid #eee; border-radius: 10px; padding: 16px 10px 10px; background: #fff; }
.mkc-ti[hidden] { display: none; }
.mkc-ti-steps { display: flex; justify-content: space-between; margin: 0 0 16px; position: relative; }
.mkc-ti-steps::before { content: ''; position: absolute; top: 9px; left: 26px; right: 26px; height: 2px; background: #eee; }
.mkc-ti-step { position: relative; text-align: center; width: 52px; }
.mkc-ti-dot { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #ddd; margin: 0 auto 6px; position: relative; z-index: 1; }
.mkc-ti-step.is-done .mkc-ti-dot { background: var(--mkc-red); border-color: var(--mkc-red); }
.mkc-ti-step.is-done .mkc-ti-dot::after { content: '✓'; color: #fff; font-size: 11px; line-height: 16px; display: block; }
.mkc-ti-step.is-now .mkc-ti-dot { border-color: var(--mkc-red); }
.mkc-ti-step.is-now .mkc-ti-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mkc-red); display: block; margin: 4px auto; }
.mkc-ti-step span { display: block; font-size: 10.5px; color: #999; line-height: 1.3; letter-spacing: -.02em; }
.mkc-ti-step.is-done span { color: #111; font-weight: 600; }
.mkc-ti-step.is-now span { color: var(--mkc-red); font-weight: 600; }
.mkc-ti-state { font-size: 11.5px; font-weight: 600; letter-spacing: -.02em; padding: 0 2px 10px; margin-bottom: 2px; border-bottom: 1px dashed #eee; }
.mkc-ti-state em { font-style: normal; color: #888; font-weight: 400; }
.mkc-ti-state em.is-late { color: var(--mkc-red); font-weight: 600; }
.mkc-ti-state p { margin: 5px 0 0; font-weight: 400; color: #666; line-height: 1.6; }
.mkc-ti-tl { list-style: none; margin: 0; padding: 10px 2px 0; border-top: 1px dashed #eee; }
.mkc-ti-tl li { display: flex; gap: 10px; margin: 0; padding: 6px 0; font-size: 12.5px; }
.mkc-ti-tl li[hidden] { display: none; }
.mkc-ti-t { flex: none; min-width: 74px; padding-top: 1px; color: #aaa; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.mkc-ti-s { flex: 1; color: #555; }
.mkc-ti-s b { color: #111; font-weight: 600; }
.mkc-ti-tl li.is-hl .mkc-ti-s b { color: var(--mkc-red); }
.mkc-ti-loc { margin-left: 5px; color: #aaa; font-size: 11.5px; }
.mkc-ti-msg { padding: 4px 2px 6px; font-size: 12.5px; color: #888; text-align: center; }
.mkc .mkc-ti-more { display: block; width: 100%; margin-top: 4px; padding: 6px; border: 0; background: none; color: #999; font-size: 12px; }

/* 모바일 — 전체 화면. 뒤 페이지는 스크롤 잠금. */
@media (max-width: 768px) {
  .mkc { left: 0; right: 0; top: 0; bottom: auto; width: 100%; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
  html.mkc-open, html.mkc-open body { overflow: hidden; }
  html.mkc-open .mk-chat-launcher { display: none; }
  /* 로그인한 관리자에겐 WP 관리자 바(46px)가 위에 떠 있다 — 창 머리줄이 가려지지 않게 그 아래에서 시작 */
  body.admin-bar .mkc { top: 46px; height: calc(100vh - 46px); height: calc(100dvh - 46px); }
}

/* ── 런처 버튼 · 안 읽은 답장 배지 (예전 inc/channeltalk.php 인라인 스타일을 옮겨 옴) ── */
.mk-chat-launcher { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--mk-red, #D9374A); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); z-index: 9999; transition: transform .2s ease, box-shadow .2s ease; padding: 0; }
.mk-chat-launcher:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }
.mk-chat-launcher:focus { outline: none; }
.mk-chat-launcher:focus-visible { outline: 2px solid rgba(0, 0, 0, .3); outline-offset: 3px; }
.mk-chat-badge { display: none; position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; padding: 0 5px; box-sizing: border-box; border-radius: 11px; background: #fff; border: 2px solid var(--mk-red, #D9374A); color: var(--mk-red, #D9374A); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: -.02em; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.mk-chat-badge.is-on { display: flex; animation: mkChatBadgePop .34s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes mkChatBadgePop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* 안 읽은 답장이 있는 동안 6초마다 가볍게 두 번 튀어오름 */
.mk-chat-launcher.mk-has-alert { animation: mkChatBounce 6s ease-in-out infinite; }
@keyframes mkChatBounce { 0%, 6%, 12%, 100% { transform: translateY(0); } 3% { transform: translateY(-8px); } 9% { transform: translateY(-5px); } }
.mk-chat-launcher.mk-has-alert:hover { animation: none; transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .mk-chat-launcher.mk-has-alert, .mk-chat-badge.is-on { animation: none; } }
@media (max-width: 768px) {
  /* 메인: 하단 nav(68-72px) 위 / 그 외: 필터 알약 위 — 둘 다 덮는 위치로 통일 */
  .mk-chat-launcher { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); right: 16px; width: 50px; height: 50px; }
}

/* ── 사진 크게 보기 — 화면 전체. 관리자 바(z-index 99999)보다 위 ── */
.mkc-view { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: calc(56px + env(safe-area-inset-top, 0px)) 14px calc(24px + env(safe-area-inset-bottom, 0px)); background: rgba(0, 0, 0, .9); cursor: zoom-out; }
.mkc-view[hidden] { display: none; }
.mkc-view img { display: block; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; margin: 0; border-radius: 6px; cursor: default; }
.mkc-view .mkc-view-x { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; width: 40px; height: 40px; padding: 0 0 2px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }