html,body{height:100%;}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  background:#f6f6f6;
  color:#111;
}
.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:16px;
}
.header{margin-bottom:10px;}
.titleblock{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
  justify-content:space-between;
}
h1{margin:0; font-size:20px;}
.pageTitle{margin:8px 0 0; font-size:16px; color:#333;}

.controls{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.controls button, .controls select{
  font-size:14px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #d0d0d0;
  background:#fff;
}
.controls button{cursor:pointer;}

.stageOuter{
  background:#fff;
  border-radius:14px;
  padding:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.stage{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:360px;
}
.imgWrap{
  position:relative;
  display:inline-block;
  max-width:100%;
}
#sceneImg{
  display:block;
  max-width:100%;
  max-height:70vh;
  height:auto;
  border-radius:12px;
  background:#111;
}
.overlay{
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  pointer-events:none;
}

.dot{
  position:absolute;
  width:18px; height:18px;
  border-radius:50%;
  background:#ff3b30;
  border:2px solid #fff;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.dotNum{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-size:10px;
  font-weight:700;
  pointer-events:none;
}

.tooltip{
  position:absolute;
  min-width:220px;
  max-width:min(340px, 86vw);
  background:#fff;
  border-radius:12px;
  padding:10px 12px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  display:none;
  z-index:20;
}
.tooltip.open{display:block;}
.tooltip::after{
  content:"";
  position:absolute;
  width:0; height:0;
  border:8px solid transparent;
  border-top-color:#fff;
  left:24px;
  bottom:-16px;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.12));
}
.tooltip.flip::after{
  border-top-color:transparent;
  border-bottom-color:#fff;
  top:-16px;
  bottom:auto;
}
.ttHead{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:6px;
}
.ttTitle{font-weight:700; font-size:14px; line-height:1.4;}
.ttClose{
  border:none;
  background:transparent;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:2px 4px;
}
.ttDesc{
  font-size:13px;
  line-height:1.7;
  color:#222;
  white-space:pre-wrap;
}

.hint{font-size:12px; color:#666; margin:10px 2px 0;}
.footer{margin-top:14px; color:#666;}
.customHeader, .customFooter{margin:6px 0;}

/* responsive */
@media (max-width: 720px){
  .wrap{padding:12px;}
  h1{font-size:18px;}
  .pageTitle{font-size:15px;}

  .titleblock{align-items:flex-start;}
  .controls{width:100%; gap:8px;}
  .controls button{padding:10px 12px; border-radius:12px;}
  .controls select{flex:1 1 auto; min-width:160px; padding:10px 12px; border-radius:12px;}

  .stageOuter{padding:10px; border-radius:12px;}
  .stage{min-height:240px;}
  #sceneImg{max-height:56vh; border-radius:10px;}

  .dot{width:24px; height:24px;}
  .dotNum{font-size:11px;}

  .tooltip{max-width:92vw; min-width:200px;}
  .ttTitle{font-size:14px;}
  .ttDesc{font-size:13px;}
}

@media (max-width: 420px){
  .wrap{padding:10px;}
  .controls button, .controls select{font-size:13px;}
  #sceneImg{max-height:52vh;}
}