/* SNS 공유 모듈 (2026-10-07, telegram.pe.kr 공유 모듈을 옮김 — partials/share · share.js). 글 화면에서만 싣는다(pages/article @push).
   .share(글 끝 카드) · .share-c(머리 아이콘 2) · .share-s(PC 목차 칸 아래). 색은 사이트 토큰만 —
   회사 색은 .share-mark(브랜드 원) 안에만. 하단 고정·떠 있는 꼴 없음(자동 광고의 앵커 광고 자리) */
.share { margin:48px 0 0; padding:22px 24px; border-radius:18px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1); }
.doc .article .share-head h2 { margin:0 !important; padding:0 !important; border:0 !important; font-size:18px !important; line-height:1.4; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.share-head p { margin:4px 0 0; font-size:14.5px; color:var(--muted); }
.share-main { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.share-b { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px 0 9px; border-radius:12px;
  background:var(--bg-soft); border:1px solid var(--line); color:var(--ink); font:inherit; font-size:15px; font-weight:700; text-decoration:none; cursor:pointer;
  transition:background .12s, border-color .12s; }
.share-b:hover { background:var(--brand-soft); border-color:var(--brand-line); text-decoration:none; }
.share-b:focus-visible, .share-ib:focus-visible, .share-chip:focus-visible, .share-more summary:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.share-b[hidden], .share-ib[hidden] { display:none; }
.share-ic { display:inline-grid; place-items:center; width:24px; height:24px; color:var(--ink-2); }
/* 브랜드 원 */
.share-mark { display:inline-grid; place-items:center; flex:0 0 auto; width:24px; height:24px; border-radius:50%; color:#fff; }
.share-mark.is-kakaotalk { background:#FEE500; color:#191919; }
.share-mark.is-telegram { background:linear-gradient(180deg,#2AABEE,#229ED9); }
.share-mark.is-band { background:#00C73C; }
.share-mark.is-naver { background:#03C75A; }
.share-mark.is-naver svg { transform:scale(.72); }
.share-mark.is-x, .share-mark.is-threads { background:#000; }
/* 어두운 화면에서 검은 원이 바탕에 묻히지 않게 옅은 테두리 */
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) :is(.share-mark.is-x, .share-mark.is-threads) { box-shadow:0 0 0 1px rgba(255,255,255,.28); } }
:root[data-theme="dark"] :is(.share-mark.is-x, .share-mark.is-threads) { box-shadow:0 0 0 1px rgba(255,255,255,.28); }
.share-mark.is-facebook { background:#0866FF; }
.share-mark.is-line { background:#06C755; }
.share-mark.is-line svg, .share-mark.is-x svg, .share-mark.is-threads svg { transform:scale(.82); }
/* 더보기 */
.share-more { margin-top:14px; }
.share-more summary { display:inline-flex; align-items:center; gap:2px; list-style:none; cursor:pointer; font-size:14.5px; font-weight:700; color:var(--brand-ink); border-radius:6px; }
.share-more summary::-webkit-details-marker { display:none; }
.share-more summary svg { transition:transform .15s ease; }
.share-more[open] summary svg { transform:rotate(180deg); }
.share-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.share-chip { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 13px 0 6px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; }
.share-chip:hover { background:var(--bg-soft); border-color:var(--line-2); text-decoration:none; }
.share-chip .share-mark { width:22px; height:22px; }
/* PC '휴대폰으로 열기' QR — 마우스 기기만(서버에서 UA 로 가르지 않는다). QR 칸은 두 테마 모두 흰 바탕 */
.share-qr { display:none; align-items:center; gap:16px; margin-top:12px; }
@media (hover:hover) and (pointer:fine) { .share-qr { display:flex; } }
.share-qr-box { display:block; flex:0 0 auto; width:120px; height:120px; padding:6px; border-radius:12px; background:#fff; border:1px solid var(--line); }
.share-qr-box svg { display:block; width:100%; height:100%; }
.share-qr-box svg .dark, .share-qr-box svg path { fill:#0E1116; }
.share-qr p { margin:0; display:grid; gap:2px; }
.doc .article .share-qr b { font-size:15px; color:var(--ink); }
.share-qr span { font-size:14px; color:var(--muted); }
/* JS 없을 때 주소 칸 */
.share-url { display:grid; gap:4px; margin-top:12px; font-size:13px; color:var(--muted); }
.share-url input { width:100%; height:40px; padding:0 10px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; font-size:14px; }
/* 머리 아이콘(compact) · 목차 칸(side) — 36px 원 버튼 */
.share-c { display:flex; gap:8px; margin:-18px 0 32px; }
.share-ib { display:inline-grid; place-items:center; width:36px; height:36px; padding:0; border-radius:50%; background:transparent; border:1px solid var(--line);
  color:var(--ink-2); cursor:pointer; text-decoration:none; }
.share-ib:hover { background:var(--bg-soft); color:var(--ink); text-decoration:none; }
.share-ib.is-brand { border-color:transparent; }
.share-ib.is-brand .share-mark { width:36px; height:36px; }
/* 목차 칸 — .toc a(세로 줄 목록) 꼴이 새어 들지 않게 되돌린다 */
.share-s { margin-top:24px; padding:16px 0 8px; border-top:1px solid var(--line); }
.toc .share-s > b { display:block; margin-bottom:10px; font-size:12.5px; color:var(--muted); letter-spacing:.3px; }
.share-s > div { display:flex; flex-wrap:wrap; gap:8px; }
.toc .share-s a.share-ib { display:inline-grid; padding:0; border-left:0; line-height:0; }
.toc .share-s a.share-ib:not(.is-brand) { border:1px solid var(--line); color:var(--ink-2); }
/* 토스트 — 화면 위쪽(아래는 앵커 광고) */
.share-toast { position:fixed; z-index:1000; top:16px; left:50%; transform:translate(-50%,-8px); max-width:calc(100vw - 32px); padding:10px 18px; border-radius:999px;
  background:var(--ink); color:var(--bg); font-size:14.5px; font-weight:600; box-shadow:0 6px 24px rgba(0,0,0,.18); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.share-toast.on { opacity:1; transform:translate(-50%,0); }
@media (prefers-reduced-motion:reduce) { .share-toast, .share-more summary svg, .share-b { transition:none; } }
@media print { .share, .share-c, .share-s { display:none; } }
/* 휴대폰: 밖 버튼 2열 · 터치 높이 44 */
@media (max-width:640px) {
  .share { padding:18px 16px; }
  .share-main { display:grid; grid-template-columns:1fr 1fr; }
  .share-b { height:46px; justify-content:flex-start; }
  .share-ib { width:40px; height:40px; }
  .share-c { margin-top:-20px; }
}