/**
 * portal-share.css — 뉴스 디테일 nd-engage-share SSOT (관광·기타 포털 공유)
 * news/detail/_styles.php 와 동일 규격 유지
 */

.nd-engage-share { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:14px 20px; }
.nd-engage-share-label { display:block; font-size:18px; font-weight:800; color:#0f172a; margin-bottom:10px; }
.nd-engage-share-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
}
.nd-engage-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  background: #f8fafc;
  color: #475569;
  text-decoration: none;
  border: none;
  transition: transform .12s, box-shadow .12s, filter .12s;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.nd-engage-share-ico { width: 20px; height: 20px; display: block; }
.nd-engage-share-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.12); filter: brightness(.96); }
.nd-engage-sh-kakao    { background:#fee500; color:#3b1e1e; }
.nd-engage-sh-kakao:hover    { background:#f5dc00; color:#3b1e1e; filter:none; }
.nd-engage-sh-facebook { background:#1877f2; color:#fff; }
.nd-engage-sh-facebook:hover { background:#166fe5; color:#fff; filter:none; }
.nd-engage-sh-twitter  { background:#000; color:#fff; }
.nd-engage-sh-twitter:hover  { background:#111; color:#fff; filter:none; }
.nd-engage-sh-naver    { background:#03c75a; color:#fff; }
.nd-engage-sh-naver:hover    { background:#02b350; color:#fff; filter:none; }
.nd-engage-sh-band     { background:#06cf66; color:#fff; }
.nd-engage-sh-band:hover     { background:#05b85a; color:#fff; filter:none; }
.nd-engage-sh-more     { background:#64748b; color:#fff; cursor:pointer; font-family:inherit; }
.nd-engage-sh-more:hover     { background:#475569; color:#fff; filter:none; }

.nd-share-modal {
  position:fixed; inset:0; z-index:10060;
  display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(15,23,42,.55);
}
.nd-share-modal[hidden] { display:none !important; }
body.nd-share-modal-open { overflow:hidden; }
.nd-share-modal-panel {
  width:min(100%,420px); max-height:min(92vh,640px); background:#fff; border-radius:12px;
  box-shadow:0 16px 48px rgba(15,23,42,.22); overflow:hidden;
  display:flex; flex-direction:column;
}
.nd-share-modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #e2e8f0;
  font-size:17px; color:#0f172a; flex-shrink:0;
}
.nd-share-modal-close {
  width:32px; height:32px; border:none; border-radius:50%;
  background:#f1f5f9; color:#475569; font-size:24px; line-height:1;
  cursor:pointer;
}
.nd-share-modal-close:hover { background:#e2e8f0; }
.nd-share-modal-body {
  flex:1 1 auto; min-height:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.nd-share-modal-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px 8px;
  padding:16px;
}
.nd-share-modal-item {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 4px; border:none; background:transparent;
  text-decoration:none; color:#334155; cursor:pointer;
  font-family:inherit; border-radius:8px; transition:.12s;
}
.nd-share-modal-item:hover { background:#f8fafc; }
.nd-share-modal-ico {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  box-shadow:0 1px 4px rgba(15,23,42,.1);
}
.nd-share-modal-ico .nd-engage-share-ico { width:20px; height:20px; }
.nd-share-modal-label { font-size:14px; font-weight:700; color:#475569; text-align:center; line-height:1.25; word-break:keep-all; }
.nd-share-modal-kakao .nd-share-modal-ico { background:#fee500; color:#3b1e1e; }
.nd-share-modal-facebook .nd-share-modal-ico { background:#1877f2; color:#fff; }
.nd-share-modal-twitter .nd-share-modal-ico { background:#000; color:#fff; }
.nd-share-modal-naver .nd-share-modal-ico { background:#03c75a; color:#fff; }
.nd-share-modal-band .nd-share-modal-ico { background:#06cf66; color:#fff; }
.nd-share-modal-telegram .nd-share-modal-ico { background:#229ed9; color:#fff; }
.nd-share-modal-bluesky .nd-share-modal-ico { background:#0085ff; color:#fff; }
.nd-share-modal-tumblr .nd-share-modal-ico { background:#36465d; color:#fff; }
.nd-share-modal-reddit .nd-share-modal-ico { background:#ff4500; color:#fff; }
.nd-share-modal-sms .nd-share-modal-ico { background:#16a34a; color:#fff; }
.nd-share-modal-urlcopy {
  display:flex; gap:8px; align-items:stretch;
  padding:12px 16px 16px; border-top:1px solid #e2e8f0; flex-shrink:0;
  background:#f8fafc;
}
.nd-share-url-field {
  flex:1; min-width:0; padding:10px 12px; border:1px solid #cbd5e1;
  border-radius:8px; font-size:14px; color:#334155; background:#fff;
}
.nd-share-urlcopy-btn {
  flex-shrink:0; padding:0 16px; border:none; border-radius:8px;
  background:#0a4d8c; color:#fff; font-size:14px; font-weight:800;
  cursor:pointer; font-family:inherit;
}
.nd-share-urlcopy-btn:hover { filter:brightness(.94); }

/* 관광 디테일 — 본문 직후 풀폭 */
.td-detail-share.nd-engage-share { margin:16px 0; }
.portal-detail-share.nd-engage-share { margin:16px 0; }
.pub-detail-share.nd-engage-share { margin:16px 0 12px; }

@media (max-width: 768px) {
  .nd-engage-share { padding:10px 12px; border-radius:8px; }
  .nd-engage-share-label { display:block; font-size:16px; margin-bottom:8px; }
  .nd-engage-share-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .nd-engage-share-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 50%;
  }
  .nd-engage-share-ico { width: 16px; height: 16px; }

  /* 모바일 더보기 모달 — 세로 1열 금지, 5열×2줄(10개) 또는 4열×3줄 */
  #nd-share-modal.nd-share-modal {
    align-items: flex-end;
    justify-content: flex-start;
    padding:
      0
      calc(72px + env(safe-area-inset-right, 0px))
      calc(84px + env(safe-area-inset-bottom, 0px))
      12px;
  }
  #nd-share-modal .nd-share-modal-panel {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    border-radius: 12px;
  }
  #nd-share-modal .nd-share-modal-head {
    padding: 8px 12px;
    font-size: 16px;
  }
  #nd-share-modal .nd-share-modal-close {
    width: 28px;
    height: 28px;
    font-size: 20px;
  }
  #nd-share-modal .nd-share-modal-body {
    flex: 0 0 auto;
    overflow: visible;
  }
  #nd-share-modal .nd-share-modal-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, auto) !important;
    gap: 8px 6px;
    padding: 8px 10px 10px;
  }
  #nd-share-modal .nd-share-modal-item {
    gap: 3px;
    padding: 2px 1px;
    min-width: 0;
    width: auto;
  }
  #nd-share-modal .nd-share-modal-ico {
    width: 38px;
    height: 38px;
    margin: 0 auto;
  }
  #nd-share-modal .nd-share-modal-ico .nd-engage-share-ico { width: 17px; height: 17px; }
  #nd-share-modal .nd-share-modal-label {
    font-size: 14px;
    line-height: 1.15;
    width: 100%;
    text-align: center;
  }
  #nd-share-modal .nd-share-modal-urlcopy {
    padding: 6px 8px 8px;
    gap: 6px;
  }
  #nd-share-modal .nd-share-url-field { font-size: 14px; padding: 7px 8px; }
  #nd-share-modal .nd-share-urlcopy-btn { padding: 0 10px; font-size: 14px; min-height: 36px; }
}

/* 초소형 — 4열×3줄 폴백 */
@media (max-width: 380px) {
  #nd-share-modal .nd-share-modal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, auto) !important;
  }
}