/* =====================================================================
   plate-field.css
   PLATE FIELD: 3 つの GT 準拠サークル を横に並べた構成。
   各ユニットは 5 つの SVG レイヤーを translateZ で z スタックし、
   真の奥行きと視差を持たせる:
     Layer bg     (z=-3px): 薄い radial gradient 地 (GT と同じトーン)
     Layer outer  (z=-1px): 細い外薄罫線 (r=92)
     Layer main   (z=0):    明るい 4 分割弧 (r=86) + LINEMOV
     Layer inner  (z=+1px): 細い内薄罫線 (r=80)
     Layer pattern(z=+4px): 中心の固有幾何 + センタードット
   GT (gravity-token) の DOM/JS には一切触らない、独立した実装。
   ===================================================================== */

/* =========================================
   PLATE FIELD
   ========================================= */

.plateField {
  position: relative;
  width: min(100%, 760px);
  margin: 32px auto 28px;
  padding: 0;
}

.plateField__stage {
  --pf-hover: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 760 / 280;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

/* ---- ユニット (GT 準拠サークル) ---- */

.plateField__circle {
  --pfc-rx: 0deg;
  --pfc-ry: 0deg;
  --pfc-rz: 0deg;
  --pfc-spin: 0deg;
  --pfc-scale: 1;
  --pfc-float-y: 0px;
  --pfc-reveal-y: 0px;
  --pfc-reveal-ry: 0deg;
  --pfc-opacity: 1;
  --pfc-core-pulse: 0.5;
  --pfc-surface-opacity: 1;
  position: absolute;
  width: 30%;
  aspect-ratio: 1;
  transform:
    translate(-50%, -50%)
    translate(0, var(--pfc-reveal-y))
    translate(0, var(--pfc-float-y))
    rotateX(var(--pfc-rx))
    rotateY(calc(var(--pfc-ry) + var(--pfc-reveal-ry)))
    rotateZ(calc(var(--pfc-rz) + var(--pfc-spin)))
    scale(var(--pfc-scale));
  opacity: var(--pfc-opacity);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.plateField__circle--0 { left: 18%; top: 50%; }
.plateField__circle--1 { left: 50%; top: 50%; }
.plateField__circle--2 { left: 82%; top: 50%; }

/* ---- z スタックされた 5 レイヤー ---- */

.plateField__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
  transform: translateZ(var(--layer-z, 0px));
}

.plateField__layer--bg      { --layer-z: -3px; }
.plateField__layer--outer   { --layer-z: -1px; }
.plateField__layer--main    { --layer-z: 0px;  }
.plateField__layer--inner   { --layer-z: 1px;  }
.plateField__layer--pattern { --layer-z: 4px;  }

/* bg (塗り) と中央パターンだけ「表面のみ表示」: JS が --pfc-surface-opacity を
   Y 軸角度に応じて 0..1 で更新する。3 線 (outer/main/inner) は両面表示のため対象外。 */
.plateField__layer--bg,
.plateField__layer--pattern {
  opacity: var(--pfc-surface-opacity, 1);
}

/* outer / main / inner の 3 線は背面でも輪郭として見せたいので両面描画を明示 */
.plateField__layer--outer,
.plateField__layer--main,
.plateField__layer--inner {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

/* ---- 裏面: ロゴ ---- */
/* backface-visibility は使わず、JS で Y 軸角度に応じて opacity を
   滑らかに制御する (hard switch によるぱっと出現を防ぐ)。
   plate 全体の spin (--pfc-spin) は逆回転で打ち消し、ロゴは中心固定で
   wobble (rx/ry/rz/float) のみに乗る挙動にする。 */
.plateField__back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
  transform:
    rotateZ(calc(-1 * var(--pfc-spin)))
    rotateY(180deg)
    translateZ(0.5px);
  opacity: 0;
}

.plateField__backLogo {
  color: rgba(214, 224, 234, calc(0.18 + 0.12 * var(--pf-hover)));
}

.plateField__logoSymbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* SVG 全体: 精度優先描画で sub-pixel antialiasing flicker を抑制
   wobble の transform 微変化で 1px 未満の細い stroke がフレーム毎に
   消えたり現れたりするのを防ぐ */
.plateField__circle svg {
  shape-rendering: geometricPrecision;
}

/* ---- 1. 薄い地 ---- */
.plateField__bg {
  stroke: none;
}

/* ---- 2. 外薄罫線 / 内薄罫線 ---- */
.plateField__ringFaint {
  fill: none;
  stroke: rgba(214, 224, 234, calc(0.16 + 0.10 * var(--pf-hover)));
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}

/* ---- 3. 明るい 4 分割弧 (主役の線) ---- */
.plateField__arcLine {
  fill: none;
  stroke: rgba(214, 224, 234, calc(0.42 + 0.20 * var(--pf-hover)));
  stroke-width: 0.7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ---- 4. 弧の上を走る光 (LINEMOV) ----
   GT (.gtSignal__trace / .gtAxis__trace) と完全に一致するスタイル。
   stroke / stroke-width / linecap / vector-effect すべて GT と同じ。
   dasharray / dashoffset / opacity は JS が rAF で直接書き込む。 */
.plateField__arcTrace {
  fill: none;
  stroke: rgba(220, 232, 244, 0.95);
  stroke-width: 1.1;
  stroke-linecap: round;
  opacity: 0;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

/* ---- 5. 中心の固有幾何 ---- */
.plateField__pattern {
  /* SVG transform attribute is set by JS */
}

.plateField__ringInner {
  fill: none;
  stroke: rgba(214, 224, 234, calc(0.34 + 0.16 * var(--pf-hover)));
  stroke-width: 0.55;
  vector-effect: non-scaling-stroke;
}

.plateField__spoke {
  fill: none;
  stroke: rgba(214, 224, 234, calc(0.28 + 0.14 * var(--pf-hover)));
  stroke-width: 0.55;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Unit 1 の 3 重円周りに付ける弱バージョン (3 重円から出る直線とノード用) */
.plateField__spoke--faint {
  stroke: rgba(214, 224, 234, calc(0.18 + 0.10 * var(--pf-hover)));
  stroke-width: 0.55;
}

.plateField__spokeDot {
  fill: rgba(214, 224, 234, calc(0.58 + 0.20 * var(--pf-hover)));
  stroke: none;
}

/* 中央パターン用の小さなノード (Unit 0 の途中ノード) */
.plateField__patternDot {
  fill: rgba(214, 224, 234, calc(0.50 + 0.20 * var(--pf-hover)));
  stroke: none;
}

.plateField__patternDot--faint {
  fill: rgba(214, 224, 234, calc(0.30 + 0.14 * var(--pf-hover)));
}

/* 中央パターン用の細い円 (Unit 1 の 3 重リング) */
.plateField__patternRing {
  fill: none;
  stroke: rgba(214, 224, 234, calc(0.22 + 0.14 * var(--pf-hover)));
  stroke-width: 0.55;
  vector-effect: non-scaling-stroke;
}

.plateField__centerDot {
  fill: rgba(238, 244, 252,
    calc(0.55 + 0.30 * var(--pfc-core-pulse) + 0.18 * var(--pf-hover)));
  stroke: none;
}

/* ---- SP ---- */

@media (max-width: 768px) {
  /* SP: 親(.plate-content__inner)の左右 24px padding を相殺し、さらに viewport より
     左右 60px ずつ食い込ませて stage を約 130vw まで広げる (393vw 端末で 513px)。
     circle 自体の比率(32% width / 17%・50%・83% 位置)は PC default を維持するため、
     stage が広がった分だけ circle も比率で拡大される。
     左右の plate は viewport 端で約 55px ずつ切れる (= "画面外に切れて構わない" 方針)。 */
  .plateField {
    width: calc(100% + 168px);
    margin: 20px -84px 22px;
  }
  .plateField__stage {
    aspect-ratio: 360 / 160;
  }
  .plateField__circle {
    width: 32%;
  }
  .plateField__circle--0 { left: 17%; top: 50%; }
  .plateField__circle--1 { left: 50%; top: 50%; }
  .plateField__circle--2 { left: 83%; top: 50%; }
}

/* =========================================
   PLATE OFFERING (price block)
   GT (.membershipPrice 系) の見せ方に合わせる:
     - 上の罫線は無し / 下の罫線のみ
     - 価格は明朝、weight 400、(税別) は sans serif で右に絶対配置
     - 注記は Helvetica Neue 10.5px / line-height 2.0、※ は ::before で hang
   ========================================= */

.plateOffering {
  position: relative;
  width: min(100%, 620px);
  margin: 0 auto 96px;
  padding: 0;
  text-align: center;
  color: rgba(208, 216, 226, 0.9);
}

.plateOffering__inner {
  padding: 24px 0;
  text-align: center;
}

/* 罫線: GT の .membershipPrice__notesRule と同じ。価格と注記の境界に 1 本だけ。 */
.plateOffering__line {
  display: block;
  border: 0;
  border-top: 1px solid rgba(142, 152, 163, 0.18);
  height: 0;
  margin: 32px auto 20px;
  width: min(480px, 100%);
  background: transparent;
}

.plateOffering__shoulder {
  margin: 0 0 22px;
  color: rgba(214, 224, 234, 0.36);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.plateOffering__title {
  margin: 0 0 28px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1;
  letter-spacing: 0.04em;
  font-weight: 400;
  color: rgba(240, 246, 252, 1);
}

/* GT の .membershipPrice__divider と同じ短い横線。
   タイトルと価格の間に静かな区切りとして置く。 */
.plateOffering__divider {
  display: block;
  width: 20px;
  height: 1px;
  margin: 0 auto 26px;
  background: rgba(214, 224, 234, 0.14);
}

/* 小さな価格ラベル "参考価格"
   GT の .membershipPrice__specialLead と完全に同じ仕様。
   ・font-size 12px / weight 400 / letter-spacing 0.06em / line-height 1.5
   ・color rgba(208, 216, 226, 0.60)
   ・価格との距離: margin 0 0 16px (= specialLead と同じ) */
.plateOffering__priceLead {
  margin: 0 0 16px;
  color: rgba(208, 216, 226, 0.60);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

/* 価格コンテナ: GT の .membershipPrice__specialAmount と同じ作り。
   "5,800円" を inline-block で中央軸に乗せ、(税別) は absolute で右に添える。 */
.plateOffering__price {
  position: relative;
  margin: 0;
  text-align: center;
}

.plateOffering__priceCore {
  position: relative;
  display: inline-block;
  margin: 0;
  color: rgba(244, 248, 254, 1);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.plateOffering__priceMain {
  font-size: clamp(28px, 3.4vw, 40px);
  vertical-align: baseline;
}

.plateOffering__priceUnit {
  margin-left: 3px;
  font-size: clamp(15px, 1.8vw, 20px);
  vertical-align: baseline;
}

/* （税別）: GT の .membershipPrice__specialAmountTax と同じ作り */
.plateOffering__priceTax {
  position: absolute;
  left: 100%;
  bottom: 0.18em;
  margin-left: 6px;
  color: rgba(208, 216, 226, 0.36);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 主役 (5,800円) と下部情報 (terms) の間の divider。
   GT の .membershipPrice__divider--sub と同じ。より薄く・短く。 */
.plateOffering__divider--sub {
  width: 16px;
  margin: 30px auto 24px;
  background: rgba(214, 224, 234, 0.10);
}

/* 下部: 補足情報 (通常参考価格 / ご提供時間 / 品数) を横 3 並びに。
   GT の .membershipPrice__terms と完全に同じ作り。
   dl の各 dt/dd を grid で 3カラム × 2行に配置。
   2列目・3列目の左側に border-left で縦罫線を引く。
   row-gap は 0 にして、dt の padding-bottom で間隔を確保。 */
.plateOffering__terms {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: 0;
  max-width: 520px;
}

.plateOffering__termLabel {
  margin: 0;
  padding: 0 14px 10px;
  text-align: center;
  color: rgba(214, 224, 234, 0.52);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.plateOffering__termValue {
  margin: 0;
  padding: 0 14px;
  text-align: center;
  color: rgba(224, 232, 242, 0.84);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
}

/* termValueAmount: 19,800円 を cell 内で中央に立てるためのラッパー。
   relative + inline-block で自身の幅 = 19,800円 の幅とし、
   (税別) は絶対配置で右横に添える。GT の __termValueAmount と同じ。 */
.plateOffering__termValueAmount {
  position: relative;
  display: inline-block;
}

/* 通常参考価格の (税別) 補足: GT の .membershipPrice__termTax と同じ作り */
.plateOffering__termTax {
  position: absolute;
  left: 100%;
  bottom: 0.06em;
  margin-left: 4px;
  color: rgba(208, 216, 226, 0.40);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 1番目 (通常参考価格): 左カラム */
.plateOffering__termLabel:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.plateOffering__termValue:nth-of-type(1) { grid-column: 1; grid-row: 2; }

/* 2番目 (ご提供時間): 中央カラム、左に border */
.plateOffering__termLabel:nth-of-type(2),
.plateOffering__termValue:nth-of-type(2) {
  grid-column: 2;
  border-left: 1px solid rgba(214, 224, 234, 0.14);
}
.plateOffering__termLabel:nth-of-type(2) { grid-row: 1; }
.plateOffering__termValue:nth-of-type(2) { grid-row: 2; }

/* 3番目 (品数): 右カラム、左に border */
.plateOffering__termLabel:nth-of-type(3),
.plateOffering__termValue:nth-of-type(3) {
  grid-column: 3;
  border-left: 1px solid rgba(214, 224, 234, 0.14);
}
.plateOffering__termLabel:nth-of-type(3) { grid-row: 1; }
.plateOffering__termValue:nth-of-type(3) { grid-row: 2; }

/* 注記ブロック: GT の .membershipPrice__notes と同じ。
   ブロックは中央配置、テキストは左揃え、※ は ::before で hang。
   幅は罫線と完全に揃え、罫線の右端を超える分は自然に折り返す。 */
.plateOffering__notes {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(100%, 480px);
  text-align: left;
}

.plateOffering__notes li {
  position: relative;
  margin: 0;
  padding: 0 0 0 1em;
  color: rgba(208, 216, 226, 0.42);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 2.0;
}

.plateOffering__notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(208, 216, 226, 0.38);
}

@media (max-width: 768px) {
  .plateOffering {
    width: 100%;
    margin: 0 auto 64px;
    padding: 0 24px;
    box-sizing: border-box;
  }
  .plateOffering__line,
  .plateOffering__notes {
    width: 100%;
  }
  /* SP: 注記直前の横ラインを非表示 (各行の下線で区切りとして十分なため、軽く見せる)。
     PC 表示には影響しない。 */
  .plateOffering__line--bottom {
    display: none;
  }
  /* SP: 横ラインを消した分、注記ブロックを下に少し離して詰まりすぎを回避。
     PC 側は __line の margin で間隔を確保しているため影響なし。 */
  .plateOffering__notes {
    margin-top: 28px;
  }
  /* SP: 3カラム横並びを解除し、ラベル左 / 値右の 2 カラム情報リストに切り替える。
     各項目を 1 行ずつ並べ、行間はごく薄い区切り線で整理する。
     ブロック自体は中央配置のまま、中身だけが左右に整列。
     GT の .membershipPrice__terms SP 指定と同じ。 */
  .plateOffering__terms {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    width: 100%;
    max-width: 480px;
    row-gap: 0;
    column-gap: 20px;
    text-align: initial;
  }
  /* 共通: PC で立てた border-left / 中央寄せ padding を解除し、
     行ごとの上下 padding と border-bottom で行間を作る。 */
  .plateOffering__termLabel,
  .plateOffering__termValue {
    border-left: none !important;
    border-bottom: 1px solid rgba(214, 224, 234, 0.08);
    padding: 13px 0;
    margin: 0;
    align-self: center;
    line-height: 1.2;
  }
  .plateOffering__termLabel {
    text-align: left;
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .plateOffering__termValue {
    text-align: left;
    font-size: 13px;
  }
  /* (税別) を SP では static にして inline flow に戻す。
     右寄せ cell 内で wrapper 全体が "19,800円(税別)" の幅となり、
     絶対配置による cell からのはみ出しが起きない。 */
  .plateOffering__termTax {
    position: static;
    margin-left: 4px;
  }
  /* 6 要素を 3 行 × 2 列に再配置 (PC の 3 カラム配置を SP 仕様で上書き) */
  .plateOffering__termLabel:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .plateOffering__termValue:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  .plateOffering__termLabel:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .plateOffering__termValue:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .plateOffering__termLabel:nth-of-type(3) { grid-column: 1; grid-row: 3; }
  .plateOffering__termValue:nth-of-type(3) { grid-column: 2; grid-row: 3; }
}