/* Language Controller by SG Group — シェアポップアップ（3.1.0 §14 / 3.1.1 P1-A 修正）。
   TCD の #js-modal-content / #js-modal-overlay / .c-footer-bar__share を流用しつつ、LC 自前の
   不透明サーフェス・ブランド色タイル・高コントラスト・モーダル排他・スクロールロックを付与する。
   TCD 親テーマは編集しない（本ファイルは LC 所有 CSS のみ）。 */

:root {
  --sglc-share-backdrop: rgba(15, 18, 22, 0.66);
  --sglc-share-surface: #ffffff;
  --sglc-share-text: #1c1e21;
  --sglc-share-muted: #606770;
  --sglc-share-border: rgba(0, 0, 0, 0.12);
  --sglc-share-icon-surface: #f1f5f9;
  --sglc-share-icon-foreground: #1c1e21;
  --sglc-share-focus: #2563eb;
  --sglc-share-toast-surface: rgba(20, 20, 22, 0.94);
  --sglc-share-toast-text: #ffffff;
}

/* 背面（TCD overlay を LC が濃色化・前面化。単一背面のまま二重化しない）。 */
#js-modal-overlay.sglc-share-backdrop {
  background: var(--sglc-share-backdrop) !important;
  z-index: 2147482500 !important;
}

/* TCD の重複 close（.c-footer-bar__modal-close の ::before が画面右下に出す大きな ×）を Share 表示中は非表示。
   JS でも display:none / pointer-events:none を設定するが、::before 擬似要素を確実に消すため CSS 側でもガードし、
   閉じたら（クラス除去で）TCD 元状態へ自動復元する。TCD 要素は削除しない。 */
.c-footer-bar__modal-close.sglc-tcd-close-suppressed,
#js-modal-overlay.sglc-share-backdrop .c-footer-bar__modal-close {
  display: none !important;
  pointer-events: none !important;
}

/* ---- モーダル面（不透明・高コントラスト・中央・内部スクロール）---- */
#js-modal-content.sglc-share-modal {
  box-sizing: border-box;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 24px)) !important;
  max-width: min(560px, calc(100vw - 24px)) !important;
  max-height: min(85vh, 640px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 40px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--sglc-share-surface) !important;
  color: var(--sglc-share-text);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 2147482600 !important;
}
#js-modal-content.sglc-share-modal.u-hidden { display: none !important; }

.sglc-share-heading {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  color: var(--sglc-share-text);
}

.sglc-share-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: var(--sglc-share-text);
  border-radius: 8px;
}
.sglc-share-close:focus-visible { outline: 2px solid var(--sglc-share-focus); outline-offset: 2px; }

/* 共有先グリッド（PC 4–6 列・モバイル 3–4 列）。TCD の float を無効化。 */
.sglc-share-list.c-footer-bar__share {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 12px 6px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  float: none !important;
  text-align: center;
}
@media (min-width: 600px) {
  .sglc-share-list.c-footer-bar__share {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  }
}

.sglc-share-btn.c-footer-bar__share-btn {
  float: none !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  list-style: none;
}

.sglc-share-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-height: 74px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  color: var(--sglc-share-text);
  -webkit-tap-highlight-color: transparent;
}
.sglc-share-target:hover { background: rgba(0, 0, 0, 0.05); }
.sglc-share-target:focus-visible { outline: 2px solid var(--sglc-share-focus); outline-offset: 2px; }

/* ブランド色タイル（既定アイコン）／独自アイコンの明色タイル。 */
.sglc-share-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sglc-share-icon-surface);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.sglc-share-icon-wrap--custom {
  background: var(--sglc-share-icon-surface);
  box-shadow: inset 0 0 0 1px var(--sglc-share-border);
}
.sglc-share-icon-wrap img {
  display: block;
  width: 26px;
  height: 26px;
  max-width: 60%;
  max-height: 60%;
  object-fit: contain;
  aspect-ratio: 1 / 1;
}
/* 既定アイコンのシンボル色（黒 currentColor を白へ反転／黒のまま）。 */
.sglc-share-icon-wrap--fg-light img { filter: brightness(0) invert(1); }
.sglc-share-icon-wrap--fg-dark img { filter: none; }

.sglc-share-label {
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
  max-width: 84px;
  color: var(--sglc-share-text);
}

/* toast（コピー結果通知）。全レイヤーより前面。 */
.sglc-share-toast {
  position: fixed;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(8px);
  max-width: 88vw;
  padding: 10px 16px;
  background: var(--sglc-share-toast-surface);
  color: var(--sglc-share-toast-text);
  font-size: 13px;
  line-height: 1.4;
  border-radius: 8px;
  z-index: 2147483000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  text-align: center;
}
.sglc-share-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* body スクロールロック（共有オープン中）。 */
html.sglc-share-lock, body.sglc-share-lock {
  overflow: hidden !important;
  touch-action: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sglc-share-surface: #242526;
    --sglc-share-text: #e4e6eb;
    --sglc-share-muted: #b0b3b8;
    --sglc-share-border: rgba(255, 255, 255, 0.16);
    --sglc-share-icon-surface: #3a3b3c;
  }
  .sglc-share-target:hover { background: rgba(255, 255, 255, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .sglc-share-toast { transition: none; }
}
/* 320px 最小幅でも横スクロールを出さない。 */
@media (max-width: 360px) {
  #js-modal-content.sglc-share-modal { padding-left: 12px; padding-right: 12px; }
  .sglc-share-list.c-footer-bar__share { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
}