/*
 * Image Map Pro（nettoge fork）— 読者側の UI をサイトの意匠に合わせる。
 *
 * IMP の client は自分の CSS を JS で <style> に差し込む（角丸 5px、白 or 半透明の黒、sans-serif）。
 * このファイルはそれより後に効かせるので、インラインの値を上書きする所は !important。
 * 色は全部サイトのトークン（--ntg-*）。ライトとダーク（html[data-nettoge-theme="dark"]）で
 * トークン側が切り替わるので、ここでは分岐しない。
 *
 * 触る所:
 *   1. 印の色 … SWELL の `svg:not([fill]){fill:currentcolor}` が IMP の fill 継承を潰す
 *   2. ボタン（拡大・縮小・全画面・メニュー） … 40px の四角、指で押せる大きさ
 *   3. ツールチップ … サイトのカード（四角、1px の枠、本文と同じフォント）。中のボタンは CTA の帯
 *   4. スマホの全画面ツールチップ … 画面の端まで使う。閉じるボタンはカードの上
 *   5. Ctrl+ホイールの案内 … 四角、本文フォント
 */

/* ---- 0. 入れ物 ---- */
.imp-container {
  max-width: 100%;
  margin: 0 0 1.5em;
  font-family: inherit;
  color: var(--ntg-ink, #1a1c1e);
}
.imp-container,
.imp-tooltips-container {
  font-family: inherit;
}

/* ---- 1. 印の色 ---- */
.imp-container .imp-object svg:not([fill]),
.imp-container .imp-object svg:not([fill]) path {
  fill: inherit;
}

/* ---- 2. ボタン ---- */
.imp-container .imp-ui-element {
  border-radius: 0 !important;
  font-family: inherit;
}
.imp-container .imp-ui-zoom-button,
.imp-container .imp-fullscreen-button,
.imp-container .imp-menu-button {
  width: 40px;
  height: 40px;
  border-radius: 0 !important;
  background: var(--ntg-surface-1, #fff) !important;
  border: 1px solid var(--ntg-steel, #6b6f76) !important;
  fill: var(--ntg-ink, #1a1c1e) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.imp-container .imp-ui-zoom-button .imp-icon,
.imp-container .imp-fullscreen-button .imp-icon,
.imp-container .imp-menu-button .imp-icon {
  width: 18px;
  height: 18px;
}
.imp-container .imp-ui-zoom-button-zoom-out {
  border-top: none !important;
}
.imp-container .imp-fullscreen-button {
  margin-top: 8px;
}
.imp-container .imp-ui-top-right,
.imp-container .imp-ui-bottom-right {
  right: 12px;
}
.imp-container .imp-ui-top-right {
  top: 12px;
}
.imp-container .imp-ui-bottom-right {
  bottom: 12px;
}
.imp-container .imp-ui-top-left,
.imp-container .imp-ui-bottom-left {
  left: 12px;
}
@media (hover: hover) {
  .imp-container .imp-ui-zoom-button:hover,
  .imp-container .imp-fullscreen-button:hover,
  .imp-container .imp-menu-button:hover {
    background: var(--ntg-surface-3, #e8e8e9) !important;
  }
}
.imp-container .imp-ui-element:active {
  filter: none;
  background: var(--ntg-surface-3, #e8e8e9) !important;
}
.imp-container .imp-ui-element:focus-visible {
  outline: 2px solid var(--ntg-focus, #2a7f8f);
  outline-offset: 1px;
}

/* ナビゲーター（小さい全図）: 四角、枠だけ */
.imp-container .imp-ui-navigator-root {
  border-radius: 0 !important;
  border: 1px solid var(--ntg-steel, #6b6f76) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

/* ---- 3. ツールチップ ---- */
.imp-tooltips-container .imp-tooltip {
  border-radius: 0 !important;
  background: var(--ntg-surface-1, #fff) !important;
  border: 1px solid var(--ntg-steel, #6b6f76);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  color: var(--ntg-ink, #1a1c1e);
}
/* 吹き出しの矢印もカードの色に */
.imp-tooltips-container .imp-tooltip .hs-arrow-bottom {
  border-top-color: var(--ntg-surface-1, #fff) !important;
}
.imp-tooltips-container .imp-tooltip .hs-arrow-top {
  border-bottom-color: var(--ntg-surface-1, #fff) !important;
}
.imp-tooltips-container .imp-tooltip .hs-arrow-left {
  border-right-color: var(--ntg-surface-1, #fff) !important;
}
.imp-tooltips-container .imp-tooltip .hs-arrow-right {
  border-left-color: var(--ntg-surface-1, #fff) !important;
}
/* 中身: エディタで決めたフォントと色より、本文のフォントとサイトの文字色を優先する */
.imp-tooltips-container .imp-tooltip-content,
.imp-tooltips-container .imp-tooltip-content * {
  font-family: inherit !important;
}
.imp-tooltips-container .imp-tooltip-content h1,
.imp-tooltips-container .imp-tooltip-content h2,
.imp-tooltips-container .imp-tooltip-content h3,
.imp-tooltips-container .imp-tooltip-content h4,
.imp-tooltips-container .imp-tooltip-content h5,
.imp-tooltips-container .imp-tooltip-content h6,
.imp-tooltips-container .imp-tooltip-content p,
.imp-tooltips-container .imp-tooltip-content div {
  color: var(--ntg-ink, #1a1c1e) !important;
}
.imp-tooltips-container .imp-tooltip-content h1,
.imp-tooltips-container .imp-tooltip-content h2,
.imp-tooltips-container .imp-tooltip-content h3,
.imp-tooltips-container .imp-tooltip-content h4 {
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}
.imp-tooltips-container .imp-tooltip-content img {
  display: block;
  border: 1px solid var(--nettoge-border-muted, #f0f0f0);
}
/* ボタン: サイトの CTA（帯）。エディタの色・角丸は使わない */
.imp-tooltips-container .imp-tooltip-content a[href] {
  border-radius: var(--radius-control, 0) !important;
  background: var(--ntg-crimson, #b84335) !important;
  color: var(--ntg-on-band, #fff) !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.26), inset 0 -2px rgba(0, 0, 0, 0.22);
  font-weight: 700 !important;
}
@media (hover: hover) {
  .imp-tooltips-container .imp-tooltip-content a[href]:hover {
    filter: brightness(1.08);
  }
}

/* ---- 4. スマホの全画面ツールチップ ---- */
.imp-tooltips-container.is-fullscreen {
  background: color-mix(in srgb, var(--ntg-base, #fff) 82%, transparent) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.imp-tooltips-container.is-fullscreen .imp-fullscreen-tooltip {
  padding: 64px 16px 24px;
  align-items: flex-start;
}
.imp-tooltips-container.is-fullscreen .imp-fullscreen-tooltip .imp-tooltip-content {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px !important;
  border-radius: 0 !important;
  background: var(--ntg-surface-1, #fff) !important;
  border: 1px solid var(--ntg-steel, #6b6f76);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.imp-tooltips-container.is-fullscreen .imp-fullscreen-tooltip .imp-tooltip-close-button {
  right: 0;
  top: -46px;
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: var(--ntg-surface-1, #fff);
  color: var(--ntg-ink, #1a1c1e);
  border: 1px solid var(--ntg-steel, #6b6f76);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.imp-tooltips-container.is-fullscreen .imp-fullscreen-tooltip .imp-tooltip-close-button .imp-icon {
  width: 18px;
  height: 18px;
  padding: 12px;
  fill: currentColor;
}

/* ---- 5. Ctrl+ホイールの案内 ---- */
.imp-container .imp-ui-scroll-message {
  border-radius: 0;
  padding: 8px 20px;
  line-height: 1.8;
  font-size: 15px;
  font-family: inherit;
  background: rgba(0, 0, 0, 0.74);
  color: #fff;
}
.imp-container .imp-ui-scroll-message-button {
  border-radius: 0;
  line-height: 24px;
  font-size: 12px;
  font-weight: 700;
  margin: 0 4px 0 0;
}

/* ---- 6. スマホ: ボタンを角に寄せ、地図の縁の余白を詰める ---- */
@media (max-width: 599px) {
  .imp-container .imp-ui-top-right,
  .imp-container .imp-ui-bottom-right {
    right: 8px;
  }
  .imp-container .imp-ui-top-right {
    top: 8px;
  }
  .imp-container .imp-ui-bottom-right {
    bottom: 8px;
  }
  .imp-container .imp-ui-zoom-button,
  .imp-container .imp-fullscreen-button,
  .imp-container .imp-menu-button {
    width: 44px;
    height: 44px;
  }
}