/* 白黒の three.js 地球(ND プロポーザル linkedin-p79kb 1枚目の移植)。見た目はプロポーザルのまま */
.nd-globe{position:relative;overflow:hidden;opacity:0;transition:opacity 2s ease}   /* スクロールで現れた時にゆっくりフェードイン */
.nd-globe.is-in{opacity:1}
.nd-globe[data-layer]:not(.is-in){pointer-events:none}   /* 消えかけの間もモデルの操作を奪わない(hidden が付くまでの 0.7 秒) */
.nd-globe[data-layer]:not(.is-in){transition-duration:.6s}   /* 畳む時は速め */
.nd-globe.is-in[data-layer]{transition-duration:2s}
.nd-globe .globeCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.nd-globe .globeLines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.nd-globe .globeLines line{stroke:#c2c2c2;stroke-width:1}
.nd-globe .globeLines line.case{stroke:#8a8a8a;stroke-width:1.2}
.nd-globe .globeLabels{position:absolute;inset:0;pointer-events:none}
.globe-label{position:absolute;transform:translate(-50%,-140%);white-space:nowrap;pointer-events:auto;cursor:pointer;
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#111;
  background:#fff;padding:2px 7px;border:1px solid rgba(0,0,0,.22);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.12);
  text-decoration:none;line-height:1.45;opacity:0;transition:opacity .15s}
.globe-label:hover{transform:translate(-50%,-150%) scale(1.04);border-color:#111}
.globe-label .cnt{display:inline-block;margin-left:3px;min-width:14px;text-align:center;color:#fff;background:#111;
  border-radius:8px;padding:0 4px;font-size:9px;line-height:14px;font-weight:700}
.globe-label.reach{font-size:10px;font-weight:600;letter-spacing:.06em;color:#6a6a6a;background:#fff;
  border-color:rgba(0,0,0,.14);box-shadow:0 1px 2px rgba(0,0,0,.10);cursor:default}
.globe-label.reach:hover{transform:translate(-50%,-140%);border-color:rgba(0,0,0,.14)}
.globe-ui{position:absolute;inset:0;pointer-events:none}
.globe-zoom{position:absolute;bottom:36px;right:18px;display:flex;gap:5px;pointer-events:auto}
.globe-zoom button{width:24px;height:24px;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(0,0,0,.14);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.10);
  font:700 15px/1 system-ui,sans-serif;color:#6a6a6a}
.globe-zoom button:hover:not([disabled]){color:#111;border-color:#111}
.globe-zoom button[disabled]{opacity:.28;cursor:default}
.globe-hint{position:absolute;bottom:14px;right:18px;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#9a9a9a;text-shadow:0 0 4px #fff,0 0 4px #fff,0 0 8px #fff}

/* ---- 置き場ごとの寸法 ---- */
/* /global/ の pillar-visual(50% 幅 / スマホ 400px 高)の中で全面に */
.pillar-visual .nd-globe{position:absolute;inset:0;z-index:1}
/* /ninja-deterrent/ の固定ビューア内レイヤー: model-viewer と同じ領域。地球ステップの間だけ表示し、model-viewer は透明に */
.viewer-container .nd-globe[data-layer]{position:absolute;inset:80px 0 0 0;z-index:2}   /* 80px = sticky ヘッダーの高さ。ラベルが頭に潜らないように */
.viewer-container .nd-globe[data-layer][hidden]{display:none}
.viewer-container.globe-on model-viewer{opacity:0;pointer-events:none}
.viewer-container.globe-on .model-shield{display:none}
@media (max-width:991px){
  .viewer-container .nd-globe[data-layer]{inset:80px 0 auto 0;height:calc(55vh - 80px)}   /* about.css の model-viewer{height:55vh} と揃える */
  .globe-label{font-size:10px;padding:2px 5px}
  .globe-hint{font-size:10px;letter-spacing:.14em}
}