/* ============================================================
   vintagecarpet — map.css : 産地マップ（シルクロード圏）
   ============================================================ */
@layer page {
  .omap { position: relative; inline-size: 100%; border: var(--rule); background: #dbe5e5; overflow-x: auto; overflow-y: hidden; }
  .omap__inner { position: relative; inline-size: 100%; aspect-ratio: 466.65 / 163.1; }
  .omap__bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; object-fit: fill; }

  /* 都市ピン（lon/latを%で配置） */
  .omap__pin { position: absolute; transform: translate(-50%, -100%); z-index: 2;
    display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
    color: var(--ink); text-align: center; }
  .omap__pin .dot { inline-size: 11px; block-size: 11px; border-radius: 50%;
    background: var(--red); box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 30%, transparent);
    transition: transform var(--d1) var(--ease); }
  .omap__pin .lbl { font-family: var(--serif); font-size: clamp(.62rem, .5rem + .5vw, .92rem);
    line-height: 1.1; white-space: nowrap; background: color-mix(in oklab, #fff 82%, transparent);
    padding: .05em .35em; border-radius: 2px; color: var(--ink); }
  .omap__pin .en { font-family: var(--grotesk); font-size: .6em; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-3); }
  .omap__pin:hover { z-index: 5; }
  .omap__pin:hover .dot { transform: scale(1.5); }
  .omap__pin:hover .lbl { color: var(--red); background: #fff; box-shadow: var(--shadow); }
  /* ラベルを下に出す（密集回避の交互配置用） */
  .omap__pin.is-below { flex-direction: column-reverse; transform: translate(-50%, 0); }
  .omap__pin.is-region { transform: translate(-50%, -50%); pointer-events: none; }
  .omap__pin.is-region .lbl { font-family: var(--grotesk); letter-spacing: .3em; text-transform: uppercase;
    font-size: clamp(.7rem, .5rem + .7vw, 1.1rem); color: color-mix(in oklab, var(--ink-3) 80%, transparent);
    background: none; padding: 0; }
  /* 文化圏ピン（在庫非依存の遺産マーカー：東トルキスタン=和田/カシュガル）。中空の赤リング＋赤縁ラベルで区別しつつ存在感を保つ */
  .omap__pin.is-culture .dot { background: var(--paper);
    box-shadow: 0 0 0 3px var(--red), 0 0 0 6px color-mix(in oklab, var(--red) 22%, transparent); }
  .omap__pin.is-culture .lbl { border: 1px solid var(--red); color: var(--red-deep); }
  .omap__pin.is-culture:hover .dot { transform: scale(1.5); }

  .omap__cap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-sm);
    margin-block-start: var(--s-sm); font-family: var(--grotesk); font-size: var(--t-2xs);
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

  /* スマホ: 横長地図は潰れるので、内側を広げて横スワイプ（パン）で閲覧 */
  @media (max-width: 760px) {
    .omap__inner { inline-size: 760px; }
    .omap__pin .en { display: none; }
    .omap__cap { font-size: 10px; }
  }
}