/* 地図のピン（ベクター地図の HTML ピン：Advanced Markers）。iPhone の地図と Mac 版の地図ページで共通
 * 墨・グレー・オレンジの 3 色＋形（CLAUDE.md R1-2）。色は tokens.css の変数なので、ライト・ダークに自動で追従する
 * Advanced Markers は中身の下端を地点に合わせるので、translateY(50%) で中心を地点に合わせる */
.mk { position: relative; display: grid; place-items: center; transform: translateY(50%); cursor: pointer; transition: transform .16s cubic-bezier(.2,.8,.2,1); }
.mk:hover, .mk.hover { transform: translateY(50%) scale(1.15); }
/* ピンの上の札（マウスを乗せた時。Mac 版と PC の Web） */
.mk-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) scale(.87); transform-origin: 50% 100%; display: none; flex-direction: column; gap: 2px; width: max-content; max-width: 240px; padding: 7px 11px 8px; border-radius: 10px; background: var(--ink); color: var(--on-ink); box-shadow: 0 6px 18px rgba(0,0,0,.28); pointer-events: none; text-align: left; font-family: -apple-system, "Helvetica Neue", sans-serif; }
.mk.hover .mk-tip { display: flex; }
.mk-tip b { font-size: 13px; font-weight: 700; line-height: 1.3; white-space: normal; }
.mk-tip small { font-size: 11.5px; opacity: .72; line-height: 1.3; }
.mk-fav .mk-tip, .mk-charity .mk-tip, .mk-rental .mk-tip { filter: none; }
.mk > i { display: grid; place-items: center; font-style: normal; box-sizing: border-box; }

/* 丸：通常の店（オレンジ）・今日の店（大きいオレンジ＋訪問順）・未訪問（グレー） */
.mk-shop > i { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2.5px solid var(--card); box-shadow: 0 1px 4px rgba(0,0,0,.32), 0 0 0 .5px rgba(0,0,0,.18); }
.mk-unv > i { width: 12px; height: 12px; border-radius: 50%; background: var(--t3); border: 2px solid var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.mk-next > i { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 2.5px solid var(--card); font: 700 12px/1 -apple-system, "Helvetica Neue", sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
/* 輪：配送業者（墨） */
.mk-carrier > i { width: 20px; height: 20px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 4.5px var(--ink), 0 1px 4px rgba(0,0,0,.32); }
/* 角：蚤の市（角丸四角）・ディーラー宅（ひし形） */
.mk-flea > i { width: 17px; height: 17px; border-radius: 5px; background: var(--ink); border: 2.5px solid var(--card); box-shadow: 0 1px 4px rgba(0,0,0,.32); }
.mk-dealer > i { width: 14px; height: 14px; border-radius: 3px; background: var(--ink); border: 2.5px solid var(--card); transform: rotate(45deg); box-shadow: 0 1px 4px rgba(0,0,0,.32); }
/* 三角：チャリティーショップ／六角形：棚貸し。白い縁は外側の形、墨は内側の形（::after）。影は外の要素の filter で */
.mk-charity, .mk-rental { filter: drop-shadow(0 1px 2.5px rgba(0,0,0,.38)); }
.mk-charity > i, .mk-rental > i { position: relative; background: var(--card); }
.mk-charity > i::after, .mk-rental > i::after { content: ""; position: absolute; background: var(--ink); }
.mk-charity > i { width: 22px; height: 20px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mk-charity > i::after { inset: 5px 4.5px 2.5px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mk-rental > i { width: 20px; height: 22px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.mk-rental > i::after { inset: 3px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
/* 星：お気に入り（オレンジ）。白い縁は外側の星、オレンジは内側の星 */
.mk-fav { filter: drop-shadow(0 1px 2.5px rgba(0,0,0,.38)); z-index: 1; }
.mk-fav > i { position: relative; width: 28px; height: 27px; background: var(--card); clip-path: polygon(50% 0%, 61.8% 34.5%, 98% 35.4%, 69.1% 57.6%, 79.4% 92.7%, 50% 72%, 20.6% 92.7%, 30.9% 57.6%, 2% 35.4%, 38.2% 34.5%); }
.mk-fav > i::after { content: ""; position: absolute; inset: 0; transform: scale(.7); transform-origin: 50% 56%; background: var(--accent); clip-path: polygon(50% 0%, 61.8% 34.5%, 98% 35.4%, 69.1% 57.6%, 79.4% 92.7%, 50% 72%, 20.6% 92.7%, 30.9% 57.6%, 2% 35.4%, 38.2% 34.5%); }