/* =========================================================
  LUX MAP - Final Common CSS (Projection / LED / Client)
  - PC: MAP + pins -> modal
  - SP: MAP also visible + LIST under map -> same modal
========================================================= */

/* ---- tokens fallback ---- */
:root{
  --shadow: 0 16px 60px rgba(2,6,23,.10);
  --panel: rgba(255,255,255,.78);
  --line: rgba(15,23,42,.10);
  --text: #0b0f18;
  --muted: rgba(11,15,24,.78);
}

/* ---- drop animation ---- */
@keyframes luxDrop{
  0%   { transform: translate(-50%, -300%); opacity: 0; }
  70%  { transform: translate(-50%, -90%);  opacity: 1; }
  100% { transform: translate(-50%, -100%); opacity: 1; }
}

/* ---- base ---- */
.lux-map{
  width:100%;
  padding: 10px 0 24px;
}

.lux-map .map-title{
  width: min(1100px, 95%);
  margin: 0 auto 10px;
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  color: var(--text);
  letter-spacing: .04em;
}

/* ---- map container ---- */
.lux-map .map-container{
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 16px;
  border-radius: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: visible;
}

.lux-map .map-image{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
}

/* ---- pins ---- */
.lux-map .pin{
  position:absolute;
  /*width: 80px;*/
  height:auto;
  transform: translate(-50%, -100%);
  cursor:pointer;
  z-index:5;
  opacity:0;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.25));
  transition: transform .15s ease, filter .15s ease;
  user-select:none;
}

#proj-map .pin{ width:90px; }
#led-map .pin{ width:60px; }
#client-map .pin{ width:60px; }
@media (max-width:768px){
  #proj-map .pin{ width:64px; }
  #led-map  .pin{ width:70px; }
  #client-map .pin{ width:58px; }
}

.lux-map .pin:hover{
  transform: translate(-50%, -100%) scale(1.06);
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.28));
}
.lux-map .pin.is-drop{
  animation: luxDrop 1s ease-out forwards;
  opacity: 1;
}

/* tooltipは “データ置き場” */
.lux-map .tooltip{ display:none !important; }

/* ---- SP LIST (always visible; you can hide on PC if you want) ---- */
.lux-map .lux-map-sp{
  width: min(980px, 95%);
  margin: 16px auto 0;
  display:grid;
  gap: 12px;
}
.lux-map .lux-map-sp .map-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding: 14px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.lux-map .lux-map-sp .map-item img{
  width: 56px;
  height:auto;
  flex: 0 0 auto;
}
.lux-map .lux-map-sp .map-text{ min-width:0; }
.lux-map .lux-map-sp .map-name{ margin:0; font-weight:900; color:var(--text); }
.lux-map .lux-map-sp .map-address,
.lux-map .lux-map-sp .map-tel{
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

/* ---- modal ---- */
.lux-map .map-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease;
}
.lux-map .map-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.lux-map .map-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.38);
}
.lux-map .map-modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(720px, 92vw);
  max-height: min(86vh, 820px);
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(2,6,23,.22);
  padding: 12px 12px 14px;
  overflow: hidden; /* 外側は隠す */
  display:flex;
  flex-direction: column;
}

.lux-map .map-modal__close{
  flex: 0 0 auto;
  margin-left: auto;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.92);
  cursor:pointer;
  font-size:22px;
  line-height:1;
}

.lux-map .map-modal__body{
  flex: 1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  display:grid;
  gap: 10px;
  padding: 10px 6px 6px;
}

.lux-map .map-modal__body img,
.lux-map .map-modal__body video{
  width:100%;
  height:auto;
  border-radius: 14px;
  display:block;
  object-fit: contain;
  max-height: 46vh;
}
.lux-map .map-modal__body p{
  margin:0;
  text-align:center;
  line-height:1.7;
  color: rgba(11,15,24,.86);
  word-break: break-word;
  font-size: 15px;
}

/* ---- responsive ---- */
@media (max-width: 768px){
  .lux-map .map-title{ font-size: 1.4rem; }
  .lux-map .map-container{ width: 92vw; padding: 14px; }
  .lux-map .pin{ width: 70px; }
}

/* =========================================================
  PIN POSITIONS
========================================================= */

/* ----- Projection ----- */
#proj-map .pin01{ top:58.5%; left:98%; }   /* 西条 */
#proj-map .pin02{ top:53%; left:31%; }   /* 祇園 */
#proj-map .pin03{ top:92.5%; left:5.4%; }  /* 五日市 */
#proj-map .pin04{ top:58%; left:93%; }   /* 佐伯 */
#proj-map .pin05{ top:75%; left:64.5%; }   /* 紫苑 */

/* ----- LED ----- */
#led-map .pin01{ top:27%; left:73%; }  /* 可部 */
#led-map .pin02{ top:40%; left:5.5%; }   /* 石内山田 */
#led-map .pin03{ top:72%; left:73.5%; }/* おりづる */
#led-map .pin04{ top:76%; left:78%; }    /* 広島銀行 */
#led-map .pin05{ top:66%; left:95%; }    /* テラス */
#led-map .pin06{ top:30%; left:31%; }    /* バルコム */

/* ----- Client ----- */
#client-map .pin01{ top:64%; left:15%; width:60px; } /* 石内山田 */
#client-map .pin02{ top:13%; left:41.5%; width:60px; } /* 可部 */
#client-map .pin03{ top:59%; left:98%; width:90px;} /* 西条 */
#client-map .pin04{ top:92%; left:5%; width:90px;} /* 五日市 */
#client-map .pin05{ top:54.5%; left:31.5%; width:90px;} /* 祇園 */

/* PCではリスト非表示 / SPだけ表示 */
@media (min-width: 769px){
  .lux-map .lux-map-sp{ display:none; }
}
@media (max-width: 768px){
  .lux-map .lux-map-sp{ display:grid; }
}