/* ============================================================
   GAJYUKU — スタジオ路線マップ
   ファイル名: css/studio-map.css（動きは js/studio-map.js）
   色・書体は css/gajyuku-nav.css の --gaj-* に従う。太字は600まで。
   ============================================================ */

.sm {
  --sm-ink: #111;
  --sm-ink-2: #444;
  --sm-sub: #6b6b6b;
  --sm-line: #e8e8e8;
  --sm-bg: #fafafa;
  --sm-accent: var(--gaj-orange, #ff6a00);
  --sm-ease: cubic-bezier(.22, .61, .36, 1);
  --sm-spring: cubic-bezier(.34, 1.56, .64, 1);
  font-family: var(--gaj-font, -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif);
  color: var(--sm-ink);
  text-align: left;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 1080px;
  container-type: inline-size;
}
.sm *, .sm *::before, .sm *::after { box-sizing: border-box; }
:where(.sm) button { font: inherit; color: inherit; cursor: pointer; }
.sm ul { list-style: none; margin: 0; padding: 0; }
.sm h3, .sm p { margin: 0; }

.sm-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }

/* ---------- 地図 ---------- */
.sm-stage {
  position: relative;
  border: 1px solid var(--sm-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.sm-svg { display: block; width: 100%; height: auto; aspect-ratio: 950 / 548; max-width: none; }

.sm-line {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 1.5s cubic-bezier(.65, 0, .35, 1) var(--d, 0ms), opacity .45s var(--sm-ease), stroke-width .45s var(--sm-ease);
}
.sm.is-dim .sm-line { opacity: .14; }
.sm.is-dim .sm-line.is-on { opacity: 1; stroke-width: 7; }

.sm-hub-dot { fill: #fff; stroke: var(--sm-ink); stroke-width: 2.5; }
.sm-hub-label { font-size: 13px; font-weight: 500; fill: var(--sm-sub); letter-spacing: .04em; }
.sm-hubs { opacity: 0; transition: opacity .6s var(--sm-ease) .9s; }
.sm.is-drawn .sm-hubs { opacity: 1; }
.sm.is-dim .sm-hubs { opacity: .45; transition-delay: 0s; }

/* 路線記号（地図の端） */
.sm-tag text { font-size: 10px; font-weight: 600; fill: var(--sm-ink); letter-spacing: 0; }
.sm-tag { opacity: 0; transition: opacity .5s var(--sm-ease) 1.2s; }
.sm.is-drawn .sm-tag { opacity: 1; }
.sm.is-dim .sm-tag { opacity: .25; transition-delay: 0s; }
.sm.is-dim .sm-tag.is-on { opacity: 1; }

/* スタジオ */
.sm-pin { cursor: pointer; outline: none; }
.sm-pin-inner { transform-box: fill-box; }
.sm-pin-hit { fill: transparent; }
.sm-pin-ring { fill: #fff; stroke: var(--sm-accent); stroke-width: 3; transition: stroke-width .3s var(--sm-ease); }
.sm-pin-core { fill: var(--sm-accent); }
.sm-pin-pulse { fill: none; stroke: var(--sm-accent); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sm-pin-label { font-size: 14px; font-weight: 600; fill: var(--sm-ink); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; transition: fill .3s var(--sm-ease); }

/* 登場：少し遅れて、順にふわっと置かれる */
.sm-pin-ring, .sm-pin-core, .sm-pin-label {
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  transform: scale(.4);
  transition: opacity .5s var(--sm-ease), transform .6s var(--sm-spring), stroke-width .3s var(--sm-ease), fill .3s var(--sm-ease);
  transition-delay: calc(900ms + var(--i) * 55ms);
}
.sm-pin-label { transform: translateY(4px); }
.sm.is-drawn .sm-pin-ring, .sm.is-drawn .sm-pin-core, .sm.is-drawn .sm-pin-label { opacity: 1; transform: none; }
.sm.is-drawn.is-interacted .sm-pin * { transition-delay: 0s; }

.sm-pin:hover .sm-pin-ring, .sm-pin:focus-visible .sm-pin-ring { stroke-width: 4.5; }
.sm-pin:focus-visible .sm-pin-ring { stroke: var(--sm-ink); }
.sm.is-dim .sm-pin:not(.is-on) .sm-pin-ring,
.sm.is-dim .sm-pin:not(.is-on) .sm-pin-core { opacity: .3; }
.sm.is-dim .sm-pin:not(.is-on) .sm-pin-label { opacity: .3; }
.sm-pin.is-selected .sm-pin-ring { fill: var(--sm-accent); stroke-width: 3; }
.sm-pin.is-selected .sm-pin-core { fill: #fff; }
.sm-pin.is-selected .sm-pin-pulse { animation: sm-pulse 2.2s var(--sm-ease) infinite; }
@keyframes sm-pulse {
  0%   { opacity: .7; transform: scale(.6); }
  100% { opacity: 0;  transform: scale(2.2); }
}

/* 列車 */
.sm-train { opacity: 0; transition: opacity .3s var(--sm-ease); pointer-events: none; }
.sm-train.is-on { opacity: 1; }
.sm-train-halo { opacity: .18; }
.sm-train-dot { fill: #fff; stroke-width: 3.5; }

/* ホバーの札 */
.sm-tip {
  position: absolute; z-index: 2; left: 0; top: 0;
  transform: translate(-50%, calc(-100% - 18px)) scale(.96);
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 20px rgba(0, 0, 0, .1);
  font-size: 12.5px; white-space: nowrap;
  pointer-events: none; opacity: 0;
  transition: opacity .2s var(--sm-ease), transform .25s var(--sm-ease);
}
.sm-tip.is-below { transform: translate(-50%, 18px) scale(.96); }
.sm-tip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 18px)); }
.sm-tip.is-below.is-on { transform: translate(-50%, 18px); }
.sm-tip strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.sm-tip-row { display: flex; align-items: center; gap: 4px; color: var(--sm-ink-2); }
.sm-tip .sm-badge { width: 22px; height: 22px; }

.sm-reset {
  position: absolute; right: 12px; top: 12px;
  padding: 6px 14px;
  border: 1px solid var(--sm-line); border-radius: 18px; background: rgba(255, 255, 255, .92);
  font-size: 12.5px; color: var(--sm-ink-2);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .3s var(--sm-ease), transform .3s var(--sm-ease), border-color .15s;
}
.sm.is-zoomed .sm-reset, .sm.is-dim .sm-reset { opacity: 1; transform: none; pointer-events: auto; }
.sm-reset:hover { border-color: var(--sm-accent); color: var(--sm-ink); }

/* ---------- 路線記号（HTML） ---------- */
.sm-badge { display: inline-block; flex: none; width: 28px; height: 28px; vertical-align: middle; }
.sm-badge-code { font-size: 10.5px; font-weight: 700; fill: var(--sm-ink); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
.sm-badge-code.is-solo { font-size: 13px; }
.sm-badge-num { font-size: 10px; font-weight: 600; fill: var(--sm-ink); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }

/* ---------- 案内 ---------- */
.sm-panel {
  display: grid;
  border: 1px solid var(--sm-line);
  border-radius: 14px;
  background: #fff;
  padding: 22px 20px;
  overflow: hidden;
}
.sm-panel-inner { grid-area: 1 / 1; transition: opacity .3s var(--sm-ease), transform .45s var(--sm-ease); }
.sm-panel-inner.is-entering { opacity: 0; transform: translateY(10px); }
.sm-panel-inner.is-leaving { opacity: 0; transform: translateY(-6px); transition-duration: .2s; }

.sm-kicker { font-size: 11.5px; color: var(--sm-sub); letter-spacing: .06em; }
.sm-name { font-size: 20px; font-weight: 600; line-height: 1.45; margin-top: 2px; letter-spacing: .02em; }
.sm-lead { font-size: 13px; color: var(--sm-ink-2); margin-top: 8px; }

.sm-access { margin-top: 16px; border-top: 1px solid var(--sm-line); }
.sm-access li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--sm-line); }
.sm-marks { display: flex; gap: 3px; }
.sm-access-text { display: flex; flex-direction: column; font-size: 14px; line-height: 1.5; padding-top: 1px; }
.sm-access-line { font-size: 11.5px; color: var(--sm-sub); }

.sm-go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; padding: 9px 18px;
  border-radius: 999px; background: var(--sm-ink); color: #fff !important;
  font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: background .15s;
}
.sm-go::after { content: "→"; transition: transform .25s var(--sm-ease); }
.sm-go:hover { background: var(--sm-accent); }
.sm-go:hover::after { transform: translateX(3px); }
.sm-here { margin-top: 16px; font-size: 12.5px; color: var(--sm-sub); }

.sm-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }
.sm-list-btn {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start;
  padding: 7px 10px; border: 1px solid var(--sm-line); border-radius: 10px; background: #fff;
  text-align: left; line-height: 1.35;
  transition: border-color .15s, background .15s;
}
.sm-list-btn:hover { border-color: var(--sm-accent); background: rgba(255, 106, 0, .04); }
.sm-list-name { font-size: 13.5px; font-weight: 600; }
.sm-list-ward { font-size: 11px; color: var(--sm-sub); }

/* ---------- 凡例 ---------- */
.sm-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px !important; }
.sm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 5px;
  border: 1px solid var(--sm-line); border-radius: 18px; background: #fff;
  font-size: 12.5px; color: var(--sm-ink-2); line-height: 1.4;
  transition: border-color .15s, background .15s, color .15s;
}
.sm-chip .sm-badge { width: 24px; height: 24px; }
.sm-chip:hover { border-color: var(--sm-accent); color: var(--sm-ink); }
.sm-chip[aria-pressed="true"] { background: rgba(255, 106, 0, .06); border-color: var(--sm-accent); color: var(--sm-ink); font-weight: 600; }
.sm button:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 2px; }

.sm-note { margin-top: 10px !important; font-size: 11.5px; color: var(--sm-sub); }

/* ---------- 狭い置き場所（置かれた枠の幅で切り替える） ---------- */
@container (max-width: 900px) {
  .sm-body { grid-template-columns: 1fr; gap: 12px; }
  .sm-panel { padding: 18px 18px 20px; }
  .sm-list { grid-template-columns: repeat(4, 1fr); }
}
@container (max-width: 560px) {
  .sm-pin-label { font-size: 22px; stroke-width: 7px; }
  .sm-hub-label { font-size: 19px; }
  .sm-tag { display: none; }
  .sm-line { stroke-width: 6; }
  .sm.is-dim .sm-line.is-on { stroke-width: 9; }
  .sm-list { grid-template-columns: repeat(3, 1fr); }
  .sm-pin-hit { r: 40px; }
  .sm-legend { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .sm-legend::-webkit-scrollbar { display: none; }
  .sm-chip { white-space: nowrap; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .sm *, .sm *::before, .sm *::after { transition: none !important; animation: none !important; }
}