/* 챗 리디자인 (2026-08-19, 고객 디자인 캔버스 「챗화면 리디자인」 반영).
   app.css 가 아니라 따로 둔 파일이다 — 대화·채널·스레드에만 쓰는 규칙이고,
   본체와 섞으면 챗을 고칠 때마다 3천 줄을 뒤지게 된다. shell.html 이 싣는다. */

/* ── 날짜 구분선 — 「8월 10일 월요일」 ─────────────────────────────── */
.daydiv {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 10px; color: var(--ink-faint); font-size: 11.5px;
}
.daydiv::before, .daydiv::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.daydiv span { flex-shrink: 0; }

/* ── 안 읽음 구분선 — 「여기부터 안 읽음」 ─────────────────────────── */
.unreaddiv {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 8px; color: #C0392B; font-size: 11.5px; font-weight: 600;
}
.unreaddiv::before, .unreaddiv::after { content: ""; flex: 1; height: 1px; background: #E8B4AC; }

/* 헤더의 「안 읽은 메시지 N개」 — 누르면 구분선으로 내려간다. */
.unreadpill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #E8B4AC; background: #FDF6F5; color: #C0392B;
  border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer;
}
.unreadpill:hover { background: #FBEDEA; }

/* ── 읽음 표시 ─────────────────────────────────────────────────────── */
.bub__read {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; color: var(--ink-faint); padding: 1px 2px 0;
}
.bub--mine .bub__read { align-self: flex-end; }

/* ── 말풍선 호버 — 줄이 살짝 떠오르고 답글 단추가 나타난다 ─────────── */
.bub { position: relative; border-radius: 10px; padding: 2px 4px; }
.bub:hover { background: rgba(168, 132, 60, .05); }
.bub__acts {
  position: absolute; top: -12px; display: none; gap: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 2px; box-shadow: 0 2px 8px rgba(17,24,39,.08); z-index: 5;
}
.bub:hover .bub__acts { display: inline-flex; }
.bub:not(.bub--mine) .bub__acts { right: 8px; }
.bub--mine .bub__acts { left: 8px; }
.bub__acts button {
  border: none; background: transparent; cursor: pointer; color: var(--ink-soft);
  width: 26px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.bub__acts button:hover { background: #F4EFE6; color: var(--ink); }
.bub__acts button svg { width: 14px; height: 14px; }

/* ── 스레드(서브챗) ────────────────────────────────────────────────── */
/* 원글 밑에 붙는 「답글 N개」 칩. 누르면 오른쪽 스레드 패널이 열린다. */
.threadchip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 2px 10px; font-size: 11.5px; color: var(--gold, #A8843C); cursor: pointer;
}
.threadchip:hover { border-color: var(--gold, #A8843C); background: #FBF7EF; }
.bub--mine .threadchip { align-self: flex-end; }

.threadpane {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
  background: #fff; border-left: 1px solid var(--line);
  box-shadow: -6px 0 24px rgba(17,24,39,.08); z-index: 60;
  display: flex; flex-direction: column; animation: threadIn .16s ease-out;
}
@keyframes threadIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.threadpane__head {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.threadpane__title { font-weight: 650; font-size: 14px; }
.threadpane__sub { font-size: 11.5px; color: var(--ink-faint); }
.threadpane__body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.threadpane__root { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 4px; }
.threadpane__foot { border-top: 1px solid var(--line); padding: 10px 12px; flex-shrink: 0; }
.threadpane__foot textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; resize: none;
  padding: 8px 10px; font: inherit; font-size: 13px; min-height: 40px; max-height: 120px;
}
.threadpane__foot textarea:focus { outline: none; border-color: var(--gold, #A8843C); }
.threadpane .bub__col { max-width: 100%; }

/* ── 대화 사이드바 — 미리보기가 있는 두 줄짜리 목록 ────────────────── */
.chan--rich { align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }
.chan--rich .ava { margin-top: 1px; }
.chan__col { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.chan__toprow { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.chan__toprow .chan__name { flex: 1; }
.chan__when { font-size: 10.5px; color: var(--ink-faint); flex-shrink: 0; }
.chan__preview {
  font-size: 11.5px; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.chan__badge--right { margin-left: auto; align-self: center; }

/* 조슈아 카드 — 목록 맨 위, 「무엇이든 물어보세요」 한 줄. */
.chan--joshua .chan__sub { font-size: 11px; color: var(--ink-faint); }

/* 채널 탭의 개수 배지 — 「파일 4」 */
.tab__count {
  font-size: 10.5px; background: #EFEAE0; color: var(--ink-soft);
  border-radius: 999px; padding: 1px 7px; margin-left: 2px;
}
.tab.is-active .tab__count { background: #EAE0CC; color: var(--gold, #8C6B2C); }

/* ── 「새 글 N개」 알약 ────────────────────────────────────────────────
   위로 올라가 지난 대화를 읽는 동안 새 글이 오면, 화면을 끌어내리는 대신
   입력창 바로 위에 이것을 띄운다(static/js/stream.js). 누르면 내려간다.
   대화 통(.stream) **밖**에 붙는다 — 안에 넣으면 같이 스크롤돼 안 보인다.
   자리를 띄우는(absolute) 대신 한 줄을 차지하게 둔다: .main 은 세로 flex 라
   여기에 그냥 끼면 대화 통과 입력창 사이에 앉는다. 겹칠 일이 없다. */
.newpill {
  align-self: center; margin: 0 auto 4px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 600;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.newpill:hover { background: var(--paper-2, #F6F6F4); }

/* ── 말풍선 퐁 — 새로 붙는 것만 (stream.js 가 클래스를 단다) ───────────
   히스토리 첫 화면은 튀지 않는다: 클래스는 스왑으로 «새로 온» 말풍선에만
   붙는다. 곡선의 1.56 이 살짝 넘쳤다 돌아오는 스프링 맛이다(iMessage).
   조슈아 패널(app.css .cop-turn.is-pop)이 이 키프레임을 같이 쓴다 —
   두 파일 다 base.html 이 모든 화면에 싣는다. */
@keyframes bub-pop {
  from { opacity: 0; transform: translateY(12px) scale(.85); }
  to   { opacity: 1; transform: none; }
}
.bub--pop {
  animation: bub-pop .38s cubic-bezier(.34, 1.56, .64, 1) both;
  transform-origin: bottom left;
}
.bub--mine.bub--pop { transform-origin: bottom right; }

/* ── «쓰는 중» — 입력창 바로 위, 점 세 개 말풍선 ──────────────────────
   자리는 알약(newpill)과 같다: .main 세로 flex 에 한 줄로 낀다. */
.typing {
  display: flex; align-items: center; gap: 8px; padding: 2px 24px 6px;
  animation: bub-pop .38s cubic-bezier(.34, 1.56, .64, 1) both;
  transform-origin: bottom left;
}
.typing.is-out { opacity: 0; transition: opacity .18s; }
.typing__bub {
  display: inline-flex; align-items: center; gap: 4px;
  background: #e9ebee; border-radius: 16px; border-bottom-left-radius: 5px;
  padding: 10px 12px;
}
.typing__bub i {
  width: 6px; height: 6px; border-radius: 50%; background: #9aa2ad;
  animation: typing-dot 1.1s ease-in-out infinite;
}
.typing__bub i:nth-child(2) { animation-delay: .16s; }
.typing__bub i:nth-child(3) { animation-delay: .32s; }
@keyframes typing-dot {
  0%, 80%, 100% { opacity: .35; transform: scale(.85); }
  40%           { opacity: 1;   transform: scale(1.15); }
}
.typing__who { font-size: 11.5px; color: var(--ink-faint); }

/* 움직임을 줄이는 설정 — 퐁도 점도 조용히 */
@media (prefers-reduced-motion: reduce) {
  .bub--pop, .typing { animation: none; }
  .typing__bub i { animation: none; opacity: .6; transform: none; }
}

/* 「이전 대화 더 보기」 — 대화 통 맨 위. 첫 화면에 실린 50개보다 앞의 글은
   이것을 눌러야 온다. 자동으로 불러오지 않는 이유는 스크롤을 위로 올리는
   행위가 곧 「과거를 찾는다」는 뜻은 아니기 때문이다(오타 하나 고치러 올라간
   것일 수도 있다) — 부르는 것은 사람이 정한다. */
.olderbar { display: flex; justify-content: center; padding: 4px 0 10px; }
.olderbar .unreadpill { border-color: var(--line); background: transparent; color: var(--ink-faint); }
.olderbar .unreadpill:hover { background: var(--paper-2, #F6F6F4); color: var(--ink); }
.olderbar--done { color: var(--ink-faint); font-size: 11.5px; }

/* ── 말풍선 도구 모음 · 반응 · 인용 (채팅 2단계, 2026-09-29) ──────────
   팀즈처럼 올리면 뜨는 막대에 빠른 반응 여섯 개 + 답장 + (스레드) + ⋯.
   모양은 위 .bub__acts(흰 바탕·옅은 선·작은 그림자)를 그대로 잇는다. */
.bub.is-menu .bub__acts { display: inline-flex; }
.bub.is-editing .bub__acts { display: none !important; }
.bub__acts .bub__emo { font-size: 14px; width: 28px; line-height: 1; }
.bub__acts .bub__emo:hover { transform: scale(1.18); background: transparent; }
.bub__acts-sep { width: 1px; background: var(--line); margin: 3px 2px; }

/* 인용 상자 — 말풍선 안 맨 위. 왼쪽 금색 선 하나로 「남의 말」임을 가른다. */
.bub__quote {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; margin: 0 0 6px; padding: 5px 9px;
  border: 0; border-left: 3px solid var(--gold, #A8843C); border-radius: 6px;
  background: rgba(255,255,255,.62); cursor: pointer; font: inherit;
}
.bub__quote:hover { background: #fff; }
.bub__quote-who { font-size: 11.5px; font-weight: 650; color: var(--ink-soft); }
.bub__quote-text {
  font-size: 12px; color: var(--ink-soft); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bub__fwd {
  display: flex; align-items: center; gap: 4px; margin: 0 0 4px;
  font-size: 11px; color: var(--ink-faint); font-style: italic;
}
.bub__fwd svg { width: 12px; height: 12px; }

/* 반응 칩 — 말풍선 아래 한 줄. 내가 누른 것은 금색 테두리. */
.bub__reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.bub--mine .bub__reacts { justify-content: flex-end; }
.rchip {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 1px 8px; font-size: 12px; line-height: 20px; color: var(--ink-soft);
}
.rchip:hover { border-color: var(--gold, #A8843C); }
.rchip.is-mine { border-color: var(--gold, #A8843C); background: #FBF7EF; color: var(--ink); }
.rchip__emo { font-size: 13px; }
.rchip__n { font-size: 11.5px; font-weight: 600; }

.bub__edited { font-size: 10.5px; color: var(--ink-faint); margin-left: 2px; }
.bub__mark { width: 11px !important; height: 11px !important; color: var(--gold, #A8843C); vertical-align: -1px; margin-left: 2px; }

/* 글로 가기(검색·고정·인용에서) — 잠깐 금빛으로 짚는다. */
.bub.is-flash { background: rgba(168, 132, 60, .16); transition: background .6s; }

/* 그 자리 수정 */
.bub.is-editing .bub__body { outline: 2px solid var(--gold, #A8843C); outline-offset: 1px; }
.bub.is-editing .bub__text { outline: none; min-width: 120px; }
.bub__editbar {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 6px;
  font-size: 11px; color: var(--ink-faint);
}
.bub__editbar span { margin-right: auto; }

/* ⋯ 메뉴 */
.msgmenu {
  position: fixed; z-index: 80; min-width: 200px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(17,24,39,.14); display: flex; flex-direction: column;
}
.msgmenu__emos {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px;
  padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.msgmenu__emos button {
  border: 0; background: transparent; cursor: pointer; font-size: 16px;
  height: 28px; border-radius: 6px;
}
.msgmenu__emos button:hover { background: #F4EFE6; }
.msgmenu__item {
  display: flex; align-items: center; gap: 9px; border: 0; background: transparent;
  padding: 7px 10px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--ink); text-align: left;
}
.msgmenu__item:hover { background: #F4EFE6; }
.msgmenu__item svg { width: 15px; height: 15px; color: var(--ink-soft); }
.msgmenu__item.is-danger, .msgmenu__item.is-danger svg { color: #C0392B; }

/* 입력창 위 인용 막대 */
.chatbox__quote {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 6px 8px 6px 10px;
  border-left: 3px solid var(--gold, #A8843C); border-radius: 6px; background: #FBF7EF;
  font-size: 12px; color: var(--ink-soft);
}
.chatbox__quote[hidden] { display: none; }
.chatbox__quote > svg { width: 14px; height: 14px; flex-shrink: 0; }
.chatbox__quote-body { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 방 머리의 찾기 · 고정 · 저장 */
.roomtools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.main__head--tabs .roomtools { position: absolute; right: 16px; top: 10px; }
.main__head--tabs { position: relative; }
.roomtools__search {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.roomtools__search svg { width: 14px; height: 14px; color: var(--ink-faint); }
.roomtools__search input { border: 0; outline: none; font: inherit; font-size: 12.5px; width: 150px; background: transparent; }
.roomtools__search:focus-within { border-color: var(--gold, #A8843C); }

/* 옆 칸 목록 */
.msgpanel__row {
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
  border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 8px 10px;
  cursor: pointer; font: inherit;
}
.msgpanel__row:hover { border-color: var(--gold, #A8843C); background: #FBF7EF; }
.msgpanel__top { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.msgpanel__sub { font-size: 11px; }
.msgpanel__text { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.msgpanel__note { font-size: 11.5px; margin: 0; }

@media (max-width: 720px) {
  .roomtools__search input { width: 90px; }
  .main__head--tabs .roomtools { position: static; margin: 6px 0 0; }
}

/* 옆 칸(스레드·검색·고정·저장)은 맨 위 검색 막대(.topbar, 고정) 아래에서 시작한다 —
   top:0 이면 칸의 머리(제목·닫기)가 막대 밑에 깔려 안 보였다(스레드 칸도 같았다). */
.threadpane { top: var(--topbar-h, 0px); }

/* ── 채팅 3단계 (2026-09-29): 중요 · 링크 미리보기 · 예약 · 프레즌스 · 역할 ───────── */

/* 중요 표시 — 말풍선 왼쪽 붉은 선과 「중요」 한 줄. 팀즈의 「!」와 같은 뜻. */
.bub--important .bub__body { box-shadow: inset 3px 0 0 #C0392B; }
.bub__imp {
  display: flex; align-items: center; gap: 4px; margin: 0 0 4px;
  font-size: 11px; font-weight: 700; color: #C0392B; letter-spacing: .02em;
}
.bub__imp svg { width: 12px; height: 12px; }
.chan__imp {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 50%; margin-left: auto; margin-right: 2px;
  background: #C0392B; color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
}
.chan__imp + .chan__badge { margin-left: 0; }
.cb--imp { font-weight: 800; font-size: 15px; color: var(--ink-soft); }
.cb--imp.is-on { background: #FDECEA; color: #C0392B; border-radius: 6px; }
.chatbox.is-important { box-shadow: inset 3px 0 0 #C0392B; }

/* 링크 미리보기 카드 — 말풍선 안, 본문 아래. 그림은 우리 서버가 가져온 것만. */
.linkcard {
  position: relative; display: flex; gap: 10px; margin-top: 8px; max-width: 420px; text-decoration: none;
  border: 1px solid var(--line); border-left: 3px solid var(--gold, #A8843C);
  border-radius: 8px; background: #fff; padding: 8px 10px; color: var(--ink);
}
.linkcard:hover { border-color: var(--gold, #A8843C); }
.linkcard__img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #F4EFE6; }
.linkcard__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linkcard__site { font-size: 11px; color: var(--ink-faint); }
.linkcard__title { color: var(--ink); text-decoration: none; }
.linkcard__title::after { content: ""; position: absolute; inset: 0; }   /* 카드 전체를 누르게 */
.linkcard__title { font-size: 13px; font-weight: 650; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.linkcard__desc { font-size: 12px; color: var(--ink-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* 스레드 칸의 답글 — 본류 말풍선과 같은 도구 모음을 얹되 모양은 칸의 작은 줄 그대로. */
.bub--reply { display: flex; gap: 8px; align-items: flex-start; }
.bub--reply .bub__acts { right: 8px; left: auto; }
.bub--reply .bub__body { background: transparent; padding: 0; }

/* 예약 전송 — 입력창 위 작은 창. */
.schedpop {
  position: fixed; z-index: 85; width: 300px; padding: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(17,24,39,.16); display: flex; flex-direction: column; gap: 8px;
}
.schedpop__title { font-weight: 650; font-size: 13px; }
.schedpop__presets { display: flex; flex-wrap: wrap; gap: 6px; }
.schedpop__chip {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 10px;
  font: inherit; font-size: 12px; cursor: pointer;
}
.schedpop__chip:hover { border-color: var(--gold, #A8843C); background: #FBF7EF; }
.schedpop__lbl { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.schedpop__foot { display: flex; align-items: center; gap: 6px; }
.schedpop__hint { font-size: 11px; margin-right: auto; }
#schedBtn.has-sched { color: var(--gold, #A8843C); }

.schedrow { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; }
.schedrow--sent, .schedrow--canceled { opacity: .62; }
.schedrow--failed { border-color: #E8B4AC; }
.schedrow__state { font-size: 11px; color: var(--ink-faint); }
.schedrow__imp { font-size: 11px; font-weight: 700; color: #C0392B; }
.schedrow__err { font-size: 11.5px; color: #C0392B; }
.schedrow__acts { display: flex; gap: 6px; margin-top: 4px; }
.schedrow__edit { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.schedrow__edit[hidden], .schedrow__acts[hidden] { display: none; }
.schedrow__edit textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12.5px; resize: vertical; }
.schedrow__line { display: flex; align-items: center; gap: 8px; }
.schedrow__chk { font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }

/* 프레즌스 점 — 얼굴 오른쪽 아래. 초록(대화 가능)·노랑(자리 비움)·빨강 줄(방해 금지)·빈 회색(오프라인). */
.pwrap { position: relative; }
.pdot {
  position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid #fff; box-sizing: content-box; background: #B9BEC6; font-style: normal;
}
.pwrap--lg > .pdot { width: 12px; height: 12px; right: 0; bottom: 0; }
.pdot--online { background: #2E9E5B; }
.pdot--away { background: #E0A526; }
.pdot--dnd { background: #C0392B; }
.pdot--dnd::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; margin-top: -1px; background: #fff; border-radius: 1px; }
.pdot--offline { background: #fff; box-shadow: inset 0 0 0 2px #9AA2AD; }
.pdot-inline { display: inline-block; position: relative; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; right: auto; bottom: auto; border: 0; }
.who__presence { font-size: 12px; color: var(--ink-soft); }
.who__status { color: var(--ink); }
.rail__me.pwrap > .pdot { right: 0; bottom: 0; }

/* 채널 역할 표 */
.rolechip { font-size: 10.5px; border-radius: 999px; padding: 1px 7px; background: #EFEAE0; color: var(--ink-soft); white-space: nowrap; }
.rolechip--owner { background: #F3E7C9; color: #8C6B2C; font-weight: 650; }
.rolechip--guest { background: #E8EEF6; color: #3E5A7A; }
.rolechip--acct { background: #F4E9E7; color: #9B3A2E; margin-left: 4px; }
.memlist__manage { border-top: 1px solid var(--line); margin-top: 4px; color: var(--gold, #A8843C); }
.memlist__manage svg { width: 14px; height: 14px; }
.rolepick select { font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; background: #fff; }
.mecard__status label { margin-top: 2px; }