/* TravelBeot · Share button (Growth W4, 2026-09-27)
   A celadon ghost pill with a text label, never gold: the page's one gold stays its
   own CTA. Used on story pages (routes/storyPages.js) and the static place pages
   (scripts/generate-place-pages.js); tokens with fallbacks, because place pages do
   not load tb-baekja.css. */
.tb-share {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--color-celadon-deep, #44604F);
  background: transparent;
  border: 1px solid var(--color-celadon, #7B9E89);
  border-radius: 999px;
  padding: 9px 16px; min-height: 36px;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.tb-share:hover { background: var(--color-celadon-soft, #DCE4DB); }
.tb-share:focus-visible { outline: 2px solid var(--color-celadon, #7B9E89); outline-offset: 2px; }
.tb-share[data-state="copied"] {
  background: var(--color-celadon-soft, #DCE4DB);
  border-color: var(--color-celadon-soft, #DCE4DB);
}

/* Title row: the heading keeps the width, the button sits beside it. */
.tb-share-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.tb-share-row > h1 { flex: 1 1 auto; min-width: 0; }
.tb-share-row > .tb-share { flex: none; margin-top: 6px; }
@media (max-width: 420px) {
  .tb-share-row { flex-direction: column; gap: 2px; }
  .tb-share-row > .tb-share { margin: 0 0 12px; }
}

/* Story page footer: the letters line (link in celadon). */
.sp-foot__letters { font-size: 13.5px; line-height: 1.5; color: var(--color-ink-muted, #5A5E55); margin: 0 0 12px; }
.sp-foot__letters a { color: var(--color-celadon-deep, #44604F); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sp-foot__letters a:hover { color: var(--color-celadon, #7B9E89); }

/* Reach W2-DOORS (2026-09-27): the messenger sheet (TbShare.share). A small porcelain list
   beside the button on wide screens, a bottom sheet on phones. Celadon, never gold. */
.tb-sharesheet {
  position: absolute; z-index: 2000; min-width: 220px; box-sizing: border-box;
  background: var(--color-base, #F9FBFD);
  border: 1px solid var(--color-line, rgba(28, 27, 24, 0.08));
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-overlay, 0 12px 40px rgba(28, 27, 24, 0.12));
  padding: 6px;
  font-family: var(--font-sans, 'Pretendard', -apple-system, sans-serif);
}
.tb-sharesheet.is-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; min-width: 0;
  border-radius: var(--radius-lg, 20px) var(--radius-lg, 20px) 0 0;
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
}
.tb-sharesheet__list { list-style: none; margin: 0; padding: 0; }
.tb-sharesheet__opt {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: 11px 12px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--color-celadon-deep, #44604F);
}
.tb-sharesheet__opt:hover, .tb-sharesheet__opt:focus-visible { background: var(--color-celadon-soft, #DCE4DB); outline: none; }
.tb-sharesheet__note { margin: 6px 12px 4px; font-size: 13px; line-height: 1.45; color: var(--color-ink-muted, #5A5E55); }
.tb-sharesheet__note[hidden] { display: none; }