/* MT4/5 Lock System Pro LP ─ style-v4.css の上に重ねる差分 */

/* ---------- MT5 ⇄ MT4 切替 ---------- */
html.js body[data-ver="mt5"] [data-v="mt4"],
html.js body[data-ver="mt4"] [data-v="mt5"] { display: none !important; }

/* JSが動かない環境では両方を並べ、どちらの版の説明かをラベルで示す */
html:not(.js) [data-v]:not(span):not(b)::before {
  content: attr(data-vlabel);
  display: block;
  margin: 0 0 10px;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--gold);
}
html:not(.js) .ver-switch { display: none; }

.ver-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(7, 7, 10, .72);
  font-family: var(--sans);
}
.ver-switch button {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  transition: background .25s, color .25s;
}
.ver-switch button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  color: #0a0a0d;
}
.ver-switch button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

.site-header .ver-switch { margin-left: auto; margin-right: 12px; }
.ver-row { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin: 26px 0 0; }
.ver-row__label { font-size: .78rem; color: var(--text-dim); letter-spacing: .06em; }

/* ---------- PV（ヒーロー直下） ---------- */
.pv { padding-top: clamp(64px, 8vw, 110px); }
.pv__frame {
  position: relative;
  max-width: 980px;
  margin: 40px auto 0;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: #000;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(243, 223, 162, .06) inset;
}
.pv__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pv__play {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; cursor: pointer; background: #000;
}
.pv__play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s, filter .6s; }
.pv__play:hover img { transform: scale(1.02); filter: brightness(1.08); }
.pv__play::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: rgba(10, 10, 13, .72)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23f3dfa2'/%3E%3C/svg%3E") 56% 50% / 38px no-repeat;
  border: 1px solid rgba(243, 223, 162, .7);
  box-shadow: 0 0 40px rgba(200, 162, 74, .35);
}
.pv__note { max-width: 980px; margin: 14px auto 0; font-size: .8rem; color: var(--text-dim); text-align: center; line-height: 1.9; }

/* ---------- 🆕 ワンクリックで外せるガード（金で目立たせる） ---------- */
.oneclick {
  position: relative;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(200, 162, 74, .22), transparent 60%),
    linear-gradient(180deg, #17120a 0%, #0c0a07 100%);
  border-top: 1px solid rgba(243, 223, 162, .45);
  border-bottom: 1px solid rgba(243, 223, 162, .45);
}
.oneclick::before {
  content: "";
  position: absolute; inset: 14px;
  border: 1px solid rgba(200, 162, 74, .28);
  pointer-events: none;
}
.oneclick .eyebrow { color: var(--gold-hi); }
.oneclick .sec-title { color: var(--white); }
.oneclick__limits { display: grid; gap: 18px; margin: 44px 0 0; }
.oneclick__limit {
  padding: 24px 26px;
  border: 1px solid rgba(243, 223, 162, .35);
  background: rgba(0, 0, 0, .35);
}
.oneclick__limit .k { display: block; font-size: .74rem; letter-spacing: .16em; color: var(--gold); margin-bottom: 8px; }
.oneclick__limit .t { display: block; font-family: var(--serif); font-size: clamp(1.05rem, 3vw, 1.3rem); color: var(--white); line-height: 1.6; margin-bottom: 10px; }
.oneclick__limit p { margin: 0; line-height: 2; }

.toolbar-fig { margin: 40px 0 0; }
.toolbar-fig__full {
  display: block; width: 100%; height: auto;
  border: 1px solid rgba(243, 223, 162, .35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.toolbar-fig__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 0; }
.toolbar-fig__pair figure { margin: 0; text-align: center; }
.toolbar-fig__pair img {
  display: block; width: 100%; height: auto;
  border: 2px solid rgba(243, 223, 162, .55);
  image-rendering: auto;
}
.toolbar-fig__pair figcaption { margin-top: 10px; font-size: .84rem; line-height: 1.7; color: var(--text); }
.toolbar-fig__pair figcaption strong { color: var(--gold-hi); }
.toolbar-fig > figcaption { margin-top: 16px; font-size: .86rem; line-height: 1.9; color: var(--text-dim); text-align: center; }

.oneclick__verdict {
  margin: 48px auto 0;
  padding: 30px 28px;
  max-width: 720px;
  text-align: center;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, rgba(200, 162, 74, .16), rgba(200, 162, 74, .04));
}
.oneclick__verdict .big { font-family: var(--serif); font-size: clamp(1.2rem, 3.6vw, 1.7rem); line-height: 1.7; color: var(--white); margin: 0 0 14px; }
.oneclick__verdict p:last-child { margin-bottom: 0; }

/* ---------- 🆕 三重の門 ---------- */
.gates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.gate {
  position: relative;
  padding: 30px 24px 26px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(22, 22, 31, .9), rgba(11, 11, 16, .9));
}
.gate__no { display: block; font-size: .72rem; letter-spacing: .18em; color: var(--gold); }
.gate__t { display: block; margin: 8px 0 14px; font-family: var(--serif); font-size: 1.2rem; color: var(--white); line-height: 1.5; }
.gate ul { margin: 0; padding: 0; list-style: none; }
.gate li { position: relative; padding-left: 1.1em; margin: 0 0 10px; line-height: 1.85; font-size: .92rem; }
.gate li::before { content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.gate li strong { color: var(--gold-hi); }
.gate__foot { margin: 14px 0 0; font-size: .8rem; color: var(--text-dim); line-height: 1.8; }
.gates-note { margin: 26px auto 0; max-width: 46em; font-size: .86rem; line-height: 1.95; color: var(--text-dim); text-align: center; }

/* ---------- MT5の画面写真 ---------- */
.mt5-shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 34px 0 0; }
.mt5-shots figure { margin: 0; text-align: center; }
.mt5-shots img { display: block; width: 100%; height: auto; border: 1px solid var(--line-soft); }
.mt5-shots figcaption { margin-top: 8px; font-size: .82rem; color: var(--text); line-height: 1.6; }
.mt5-shots figcaption small { display: block; color: var(--text-dim); font-size: .74rem; }
.mt5-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 620px; margin: 30px auto 0; }
.mt5-pair figure { margin: 0; text-align: center; }
.mt5-pair img { display: block; width: 100%; height: auto; border: 1px solid var(--line-soft); }
.mt5-pair figcaption { margin-top: 8px; font-size: .82rem; }

.ui-shot img[src*="/mt5/"] { width: auto; max-width: 100%; }

.video-ver-note {
  max-width: 46em; margin: 18px auto 0;
  padding: 14px 18px;
  border-left: 2px solid var(--gold);
  background: rgba(200, 162, 74, .06);
  font-size: .86rem; line-height: 1.9; color: var(--text);
}

.diff-list { margin: 20px 0 0; padding: 0; list-style: none; }
.diff-list li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); line-height: 1.85; }
.diff-list li strong { color: var(--gold-hi); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .gates { grid-template-columns: 1fr; }
  .mt5-shots { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-header .brand span { display: none; }
  .site-header .ver-switch { margin-right: 8px; }
  .ver-switch button { padding: 6px 10px; font-size: .72rem; }
  .header-cta { padding: 9px 12px; font-size: .72rem; letter-spacing: .04em; }
  .toolbar-fig__pair { grid-template-columns: 1fr; }
  .oneclick::before { inset: 8px; }
  .oneclick__limit { padding: 20px 18px; }
}

/* ---------- ヒーロー：MT5のエンブレム版＋明るさの調整（2026-09-30 本人指摘） ---------- */
.hero__bg{ background-image:url("assets/img/hero-fortress-mt5.webp"); }
@media (min-resolution:1.5dppx){
  .hero__bg{ background-image:url("assets/img/hero-fortress-mt5.webp"); }
}
/* MT4に切り替えたときは、4のままの元画像（同じ明るさ調整をかけたもの）に戻す */
body[data-ver="mt4"] .hero__bg{ background-image:url("assets/img/hero-fortress-mt4.webp"); }

/* 「共通点は一つ」の下のカード：背景ロゴを版ごとに。MT5は製品同梱の元ロゴ（mock5_logo.png）から */
.mls-plate-banner::before{ background-image:url("assets/img/mls-logo-mt5.webp"); }
body[data-ver="mt4"] .mls-plate-banner::before{ background-image:url("assets/img/mls-logo-v6.webp"); }

/* スマホは本文が画面いっぱいに乗るため暗幕が濃い（共有style.cssの .92/.54/.86 ＋ 横 .78→.36）。
   見出しの読みやすさを保てる範囲で薄くし、門と騎士が判別できるようにする。
   ⛔PCの暗幕（左端 .96/.90）は CLAUDE.md の規定どおり触らない。 */
@media (max-width: 720px){
  .hero__veil{
    background:
      linear-gradient(180deg, rgba(4,4,6,.86) 0%, rgba(4,4,6,.34) 34%, rgba(4,4,6,.74) 74%, var(--bg) 100%),
      linear-gradient(90deg, rgba(4,4,6,.62), rgba(4,4,6,.18));
  }
  .hero h1, .hero__sub { text-shadow: 0 2px 14px rgba(0,0,0,.85); }
}

/* MT5のロック中画面は原寸800px。引き伸ばすと注釈の文字がぼやけるので原寸で止める */
.shot img[src*="mt5-locked"]{ display:block; width:auto; max-width:100%; margin-inline:auto; }

/* 06 MLSが効く理由：設計図の門（ChatGPT生成・2026-09-30 本人OK）。
   実測（1600x900 webp）：平均 12.4 ／ 左40% 0.37 ＝ 既存の見出し背景と同じ帯なので brightness は掛けない。 */
.mech-head::before{
  background-image:url("assets/img/bg-mechanism-blueprint.webp");
  background-position:78% 50%;
}
@media (max-width: 720px){
  .mech-head::before{ background-position:66% 50%; }
}

/* 07 三重の門（本人作成：Canva＋ChatGPTで縁を修正・2026-09-30）。
   ⚠他の見出し背景と違い、絵が画面いっぱいにあり左に黒い余白がない（平均輝度 30.1＝他の約3倍）。
   左だけ濃くする共通の暗幕だと手前の門が消えるので、この見出しだけ全体に均一な暗幕をかける。 */
.gates-head::before{
  background-image:url("assets/img/bg-gates-triple.webp");
  background-position:50% 50%;
}
.gates-head::after{
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(7,7,10,.30), transparent 75%),
    linear-gradient(180deg, rgba(7,7,10,.62) 0%, rgba(7,7,10,.52) 50%, rgba(7,7,10,.66) 100%);
}
@media (max-width: 720px){
  .gates-head::before{ background-position:30% 50%; }
}

/* 06：看板「傭兵型門番ロック構造」の意味を一行で添える（2026-09-30 本人命名。旧「2層ロック構造」は三重の門と数字がぶつかるため廃止） */
.mech-sub{ margin:12px auto 0; max-width:34em; font-size:.9rem; line-height:1.9; color:var(--text); }
.mech-name small .nw{ white-space:nowrap; }

/* 06：PART 01／02 のカード右側に人物を置く（2026-09-30 本人指示）。
   PART 01（連携EA）＝伝令兵／PART 02（常駐アプリ）＝腕組みの守護騎士。MT4・MT5 共通。
   透過PNGを切り抜いたまま置く。暗くしない（判別できる明るさで、という指示）。
   PCは本文を右に回り込ませず padding で空け、スマホは本文の下に置く。 */
.layer--ea, .layer--app{ position:relative; isolation:isolate; overflow:hidden; padding-right:32%; }
.layer--ea::after, .layer--app::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:34%; z-index:-1;
  background-repeat:no-repeat; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 22%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 22%);
}
.layer--ea::after{ background-image:url("assets/img/part-messenger.webp"); background-size:auto 100%; background-position:right bottom; }
.layer--app::after{ background-image:url("assets/img/part-guardian-arms.webp"); background-size:auto 175%; background-position:right 14% top 12px; }
@media (max-width: 720px){
  .layer--ea, .layer--app{ padding-right:26px; padding-bottom:190px; }
  .layer--ea::after, .layer--app::after{
    top:auto; width:100%; height:200px;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%);
            mask-image:linear-gradient(180deg, transparent 0%, #000 22%);
  }
  .layer--ea::after{ background-position:right bottom; }
  .layer--app::after{ background-size:auto 150%; background-position:right 10% top 8%; }
}