/* ════════════════════════════════════════════════════════════════
   단톡방 — '단톡방에 공유' 버튼(data-share) · 우리 단톡방 조각(data-chat)
   원칙: "대화는 단톡방에서, 남는 건 maru에". 흑백 잉크 한 색 · 브랜드 색(카카오 노랑 등) 없음 · 터치 44px · keep-all
   layout()이 data-share·data-chat이 있는 페이지에만 싣는다. 마크업은 src/share.js · src/chatlink.js, 동작은 public/share.js
   ════════════════════════════════════════════════════════════════ */
:root {
  /* v5 별칭(SPEC §2.12) */
  --sh-ink: var(--ink);
  --sh-muted: var(--ink-2);
  --sh-subtle: var(--ink-3);
  --sh-dim: var(--ink-3);
  --sh-line: var(--line);
  --sh-line-2: var(--line-2);
  --sh-wash: var(--wash-2);
  --sh-wash-2: var(--wash-3);
  --sh-ease: var(--ease-out);
}

/* ── 단톡방에 공유 — 아이콘 + 한 마디, 흰 알약. 보이는 높이 34px, 누르는 자리는 44px(::after) ── */
.share-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none;
  height: 34px; padding: 0 14px 0 12px; border: 1px solid var(--sh-line-2); border-radius: 999px;
  background: #fff; color: var(--sh-ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: -0.01em;
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s var(--sh-ease), border-color .15s var(--sh-ease), transform .15s var(--sh-ease);
}
.share-btn::after { content: ''; position: absolute; inset: -5px -2px; }
.share-btn svg { width: 16px; height: 16px; flex: none; }
.share-btn:hover { background: var(--sh-wash); border-color: var(--sh-line-2); }
.share-btn:active { transform: scale(.97); }
.share-btn:focus-visible { outline: 2px solid var(--sh-ink); outline-offset: 2px; }
.share-btn[data-busy] { opacity: .6; }

/* 자리별 — 기사 윗줄(오른쪽 끝, 관리 버튼 앞) · 스레드 행동 줄(오른쪽 끝) · 모임 참가 줄(오른쪽 끝) · 모집 머리 */
.art-top .share-btn { margin-left: auto; }
.art-top .share-btn + .article-actions { margin-left: 4px; }
.thread-top .share-btn { margin-left: auto; }
.thread-top .share-btn + .article-actions { margin-left: 4px; }
.tweet-actions .share-btn { margin-left: auto; }
.mu-join .share-btn { margin-left: auto; }
.mu-hero-share { margin-top: 14px; } /* 지난 모임 — 참가 줄 대신 제목·메타 아래 */
.share-mob { display: none; } /* 기사 — 관리 버튼이 있는 휴대폰 화면에서만 하트 줄에(아래 @media) */
.rc-share { margin-top: 18px; animation: rcRise .6s .16s cubic-bezier(.16, 1, .3, 1) both; } /* 모집 머리(recruit.css rcRise)와 함께 떠오른다 */
.rc-share .share-btn { height: 38px; padding: 0 16px 0 14px; font-size: 14px; }

/* 토스트 — 기존 .toast 모양을 그대로 쓰고, 한 줄로(셸의 left:50% 때문에 폭이 화면 절반으로 줄어들지 않게) */
.share-toast { pointer-events: none; width: max-content; max-width: calc(100vw - 32px); white-space: nowrap; }

/* 복사도 막힌 브라우저 — 문구를 직접 고르게 */
.share-fallback-back { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(23, 21, 15, .32); }
.share-fallback {
  width: 100%; max-width: 440px; padding: 18px; border-radius: 20px; background: #fff; color: var(--sh-ink);
  box-shadow: 0 24px 64px -16px rgba(23, 21, 15, .3); font-size: 14px; word-break: keep-all;
}
.share-fallback strong { display: block; font-size: 15px; font-weight: 700; }
.share-fallback p { margin: 4px 0 12px; font-size: 13px; color: var(--sh-subtle); }
.share-fallback textarea {
  width: 100%; min-height: 112px; padding: 12px; border: 1px solid var(--sh-line-2); border-radius: 12px; resize: vertical;
  font: inherit; font-size: 14px; line-height: 1.55; color: var(--sh-ink); background: #fff;
}
.share-fallback textarea:focus { outline: none; box-shadow: none; }
.share-fallback button { display: block; width: 100%; height: 44px; margin-top: 10px; border: 0; border-radius: 999px; background: var(--sh-ink); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* ── 사이드바 '단톡방' — 홈·알림 바로 아래, 오른쪽 끝에 ↗ ── */
.sb-link.sb-chat .sb-chat-ext { margin-left: auto; display: inline-flex; color: var(--sh-dim); }
.sb-link.sb-chat .sb-chat-ext svg { width: 13px; height: 13px; color: inherit; }
.sb-link.sb-chat:hover .sb-chat-ext { color: var(--sh-ink); }

/* ── 팀 홈 첫 화면 — 작은 알약 ── */
.chat-strip { display: flex; padding: 14px 0 8px; }
.cx-top { margin-bottom: 24px; } /* 소모임 홈 — 본문 열(.cx-home) 맨 위, 로고·제목과 같은 왼쪽 선 */
.cx-top .chat-strip { padding: 0; }
.cx-top .chat-welcome { margin: 0; }
.chat-pill {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; padding: 0 14px 0 12px;
  border-radius: 999px; background: var(--sh-wash); color: var(--sh-ink); font-size: 13.5px; line-height: 1.3; text-decoration: none;
  transition: background .15s var(--sh-ease);
}
.chat-pill:hover { background: var(--sh-wash-2); color: var(--sh-ink); }
.chat-pill-ic { display: inline-flex; flex: none; }
.chat-pill-ic svg { width: 17px; height: 17px; }
.chat-pill-k { flex: none; font-weight: 600; }
.chat-pill-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sh-muted); }
.chat-pill-k + .chat-pill-n::before { content: '·'; margin-right: 6px; color: var(--sh-dim); }
.chat-pill-go { display: inline-flex; flex: none; color: var(--sh-subtle); }
.chat-pill-go svg { width: 14px; height: 14px; }
.chat-pill-setup { background: transparent; box-shadow: inset 0 0 0 1px var(--sh-line-2); }
.chat-pill-setup:hover { background: var(--sh-wash); }
.chat-pill-setup .chat-pill-n { color: var(--sh-ink); font-weight: 600; }
:is(.chat-pill, .chat-notif-act, .chat-welcome-go):focus-visible { outline: 2px solid var(--sh-ink); outline-offset: 2px; }

/* ── 가입 직후 — 멤버가 되었어요 · 단톡방 들어가기 ── */
.chat-welcome {
  display: flex; align-items: center; gap: 14px; margin: 14px 0 10px; padding: 16px 18px;
  border: 1px solid var(--sh-line); border-radius: 18px; background: #fff; word-break: keep-all;
  animation: chatIn .4s var(--sh-ease) both;
}
@keyframes chatIn { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .chat-welcome { animation: none; } }
.chat-welcome-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--sh-wash); color: var(--sh-ink); }
.chat-welcome-ic svg { width: 20px; height: 20px; }
.chat-welcome-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-welcome-t strong { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; color: var(--sh-ink); }
.chat-welcome-t span { font-size: 13px; line-height: 1.5; color: var(--sh-subtle); }
.chat-welcome .chat-welcome-go { flex: none; gap: 6px; min-height: 40px; }
.chat-welcome .chat-welcome-go svg { width: 14px; height: 14px; }

/* 버튼 하나 — 가입 페이지·모집 합격 화면 */
.chat-join { gap: 7px; }
.chat-join svg { width: 16px; height: 16px; flex: none; }
.chat-join svg:last-child { width: 13px; height: 13px; opacity: .6; }
.chat-join-gap { margin-top: 10px; }
/* 모집 합격 카드 — 'OO 들어가기'와 '단톡방 들어가기'를 한 줄에(좁으면 다음 줄, 같은 왼쪽 선) */
.rc-result-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.rc-result.is-pass .rc-result-acts .rc-btn { margin-top: 0; }
.rc-result.is-pass .rc-result-acts .chat-join { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.rc-result.is-pass .rc-result-acts .chat-join:hover { background: rgba(255, 255, 255, .1); }
.rc-result.is-pass .rc-result-acts .rc-btn:focus-visible { outline-color: #fff; }

/* 알림함 — 가입 승인 행 아래 */
.chat-notif-act {
  display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; gap: 6px; min-height: 36px; margin: -2px 0 10px 54px; padding: 0 14px 0 12px;
  border-radius: 999px; background: var(--sh-wash); color: var(--sh-ink); font-size: 13px; font-weight: 600; text-decoration: none;
}
.chat-notif-act:hover { background: var(--sh-wash-2); color: var(--sh-ink); }
.chat-notif-act svg { width: 15px; height: 15px; flex: none; }
.chat-notif-act svg:last-child { width: 12px; height: 12px; opacity: .6; }

/* ── 관리 '링크 & 초대' — 우리 단톡방 카드 ── */
.chat-h { scroll-margin-top: 80px; }
.chat-h + .chat-card { margin-top: 18px; }
.chat-card { max-width: 640px; }
.chat-private { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--sh-muted); word-break: keep-all; }
.chat-private svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--sh-subtle); }
.chat-now { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 12px 12px 14px; border: 1px solid var(--sh-line); border-radius: 14px; background: #fff; }
.chat-now-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--sh-wash); color: var(--sh-ink); }
.chat-now-ic svg { width: 18px; height: 18px; }
.chat-now-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-now-t strong { font-size: 14.5px; font-weight: 600; color: var(--sh-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-now-t span { font-size: 12.5px; color: var(--sh-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono, ui-monospace, monospace); }
.chat-now .btn { flex: none; gap: 5px; }
.chat-now .btn svg { width: 13px; height: 13px; }
.chat-url-row { position: relative; }
.chat-url-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--sh-muted); pointer-events: none; }
.chat-url-ic svg { width: 18px; height: 18px; }
.chat-url-row .input, #chat-url { padding-left: 42px; } /* id — 셸의 .input 규칙(:not(:is(…) *))보다 세게 */
.chat-opt { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--sh-subtle); }
.chat-form .hint.is-err { color: var(--x-danger, #b91c1c); }
/* 저장 결과 — 카드 안 한 줄(토스트 대신) */
.chat-notice { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--sh-wash); color: var(--sh-ink); font-size: 13.5px; line-height: 1.5; word-break: keep-all; }
.chat-notice.is-err { background: #fef2f2; color: var(--x-danger, #b91c1c); }
.chat-acts { flex-wrap: wrap; }

/* ── 라운지 — 단톡방이 없을 때만 ── */
.lounge-off-hint { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--sh-subtle); word-break: keep-all; }
.lounge-off-hint a { color: var(--sh-ink); text-decoration: underline; text-underline-offset: 3px; }
.wiz-lounge-note { grid-column: 2; margin: 2px 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--sh-subtle); word-break: keep-all; }
@media (max-width: 700px) { .wiz-lounge-note { grid-column: 1; margin: 2px 0 12px; } }

/* ── 휴대폰 ── */
@media (max-width: 640px) {
  .chat-strip { padding: 10px 0 6px; }
  .chat-welcome { flex-wrap: wrap; margin: 10px 0 12px; padding: 14px; }
  .chat-welcome .chat-welcome-go { width: 100%; justify-content: center; min-height: 44px; }
  .chat-pill { min-height: 44px; }
  .chat-notif-act { min-height: 44px; }
  .share-btn { height: 36px; }
  /* 모임 참가 줄 — '로그인하고 참가하기'처럼 긴 버튼 옆에서는 공유 버튼이 다음 줄(오른쪽)로 내려간다 */
  .mu-join { flex-wrap: wrap; row-gap: 12px; }
  .mu-join .mu-count { white-space: nowrap; }
  .tweet-actions .share-btn span, .art-top .share-btn span, .art-foot .share-btn span { font-size: 12.5px; }
  /* 기사 윗줄에 관리 버튼(고정·수정·삭제)까지 있으면 390에서 넘친다 — 공유 버튼은 본문 아래 하트·조회 줄로 옮긴다(서버가 두 자리에 그린다).
     그래도 넘치면(칼럼의 '포트폴리오 비공개' 알약 등) 관리 버튼이 다음 줄 오른쪽으로 — 뒤로 링크는 한 줄 그대로 */
  .art-top .share-desk { display: none; }
  .art-top .share-desk + .article-actions { margin-left: auto; }
  .art-top .art-back { flex: none; white-space: nowrap; }
  .art-top:has(> .article-actions) { flex-wrap: wrap; row-gap: 10px; }
  .share-mob { display: inline-flex; }
  /* 카드뉴스 윗줄(관리 버튼 있음) — 아이콘만(이름은 aria-label). 보이는 36px, 누르는 자리 44px */
  .thread-top:has(.article-actions) .share-btn { width: 36px; padding: 0; gap: 0; }
  .thread-top:has(.article-actions) .share-btn::after { inset: -5px; } /* 테두리 안쪽 기준 — 34 + 10 = 44 */
  .thread-top:has(.article-actions) .share-btn + .article-actions { margin-left: 8px; }
  .thread-top:has(.article-actions) .share-btn span { display: none; }
}