/* In-page sharing: centered on desktop, within thumb reach on phones. */
dialog.hunter-share {
  width: min(440px, calc(100% - 32px)); max-width: 440px;
  max-height: calc(100dvh - 32px); margin: auto; padding: 0;
  border: 1px solid #78939f; border-radius: 22px;
  background: #d3dee4; color: #142f42;
  box-shadow: 0 24px 90px #0008; overflow: auto; overscroll-behavior: contain;
}
.hunter-share::backdrop { background: #030b14b8; backdrop-filter: blur(5px); }
.hunter-share-body { padding: 36px 28px 24px; position: relative; }
.hunter-share .hunter-share-close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  display: grid; place-items: center; background: transparent; color: #385567;
  font-size: 30px; line-height: 1; border: 0; border-radius: 50%; box-shadow: none;
}
.hunter-share .hunter-share-close:hover { background: #bdcdd6; }
.hunter-share h2 { margin: 6px 18px 7px 0; font-size: 25px; line-height: 1.4; letter-spacing: -.9px; color: #142f42; }
.hunter-share h2:focus { outline: none; }
.hunter-share p:not(.eyebrow) { margin: 0; font-size: 16px; line-height: 1.65; color: #405b6b; }
.hunter-share-preview { display: flex; align-items: center; gap: 18px; margin: 25px 0 23px; padding: 14px; background: #c0d0da; border-radius: 14px; }
.hunter-share-preview img { display: block; flex: 0 0 96px; width: 96px; height: 96px; object-fit: cover; border-radius: 10px; }
.hunter-share[data-hunter="black"] .hunter-share-preview img { object-position: center 20%; }
.hunter-share-preview>div { min-width: 0; }
.hunter-share-preview span { font-size: 14px; font-weight: 600; color: #405b6b; }
.hunter-share-preview strong { display: block; margin: 1px 0 3px; font-size: 27px; font-weight: 900; line-height: 1.4; letter-spacing: -.7px; }
.hunter-share-preview p { font-weight: 600; }
.hunter-share-actions { display: grid; gap: 11px; }
.hunter-share-actions button {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  min-height: 58px; padding: 14px 12px; border: 1px solid transparent; border-radius: 11px;
  font: inherit; font-size: 18px; font-weight: 800; line-height: 1.5; letter-spacing: -.35px;
  box-shadow: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.hunter-share-actions svg { flex-shrink: 0; width: 23px; height: 23px; }
.hunter-share-kakao { background: #fee500; color: #191919; }
.hunter-share-kakao:not(:disabled):hover { background: #f2d900; }
.hunter-share-kakao:disabled { background: #e0dac1; color: #615d4b; cursor: default; opacity: 1; }
.hunter-share-kakao small { background: #f0ebda; padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.hunter-share-copy { background: #16394e; color: #f0f7fa; }
.hunter-share-copy:hover { background: #244e66; }
.hunter-share-actions .hunter-share-save { color: #25495e; background: transparent; border-color: #93aebb; }
.hunter-share-actions .hunter-share-save:hover { background: #c5d5df; }
.hunter-share-actions button:focus-visible, .hunter-share-close:focus-visible, .hunter-share-manual input:focus-visible { outline: 3px solid #197b9e; outline-offset: 3px; }
.hunter-share p.hunter-share-status { margin-top: 19px; min-height: 48px; text-align: center; font-size: 14px; line-height: 1.65; }
.hunter-share-manual { margin-top: 9px; }
.hunter-share-manual label { display: block; font-size: 14px; margin-bottom: 8px; }
.hunter-share-manual input { width: 100%; min-width: 0; padding: 13px 10px; color: #19364a; background: #e1e9ed; border: 1px solid #799aaa; border-radius: 8px; font-size: 16px; }
@media (max-width: 540px) {
  dialog.hunter-share { width: 100%; max-width: 100%; margin: auto 0 0; max-height: calc(100dvh - 16px); border-radius: 23px 23px 0 0; border-bottom: 0; }
  .hunter-share-body { padding: 30px 23px max(17px, env(safe-area-inset-bottom)); }
  .hunter-share h2 { font-size: 24px; }
  .hunter-share-preview { margin: 22px 0 20px; }
  .hunter-share-preview strong { font-size: 26px; }
}
@media (max-width: 360px) {
  .hunter-share-body { padding-left: 18px; padding-right: 18px; }
  .hunter-share-preview { gap: 13px; padding: 12px; }
  .hunter-share-preview img { width: 82px; height: 82px; flex-basis: 82px; }
  .hunter-share-preview strong { font-size: 23px; }
  .hunter-share h2 { font-size: 22px; }
}