/* 2026-04-19: Google Fonts @import 削除 (Chrome Block 環境対策、p3_test.html 内の @font-face で直接読込) */
    /* @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); */

    :root {
      --glow-cyan: rgba(0,255,255,0.8);
      --glow-cyan-mid: rgba(0,255,255,0.4);
      --glow-cyan-soft: rgba(0,255,255,0.15);
      --glow-white: rgba(255,255,255,0.7);
      --glow-white-mid: rgba(255,255,255,0.4);
      --glass-bg: rgba(255, 255, 255, 0.08);
      --glass-border: rgba(255, 255, 255, 0.12);
      --glass-blur: 12px;
      --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
      --brand-space-glow: rgba(110, 214, 255, 0.32);
      --brand-space-shadow: rgba(8, 18, 38, 0.88);
      --brand-letter-gap: 0.18em;
      --brand-letter-gap-mobile: 0.12em;
      --aurora-a: rgba(76, 214, 255, 0.11);
      --aurora-b: rgba(255, 92, 214, 0.09);
      --aurora-c: rgba(255, 226, 82, 0.07);
      --cosmic-ink: rgba(7, 8, 12, 0.92);
      /* 2026-04-30: typography unification — brand=pixel, UI/CTA=sans, philosophy/status=mono */
      --font-pixel: 'Press Start 2P', monospace;
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      --font-mono: ui-monospace, 'SF Mono', 'IBM Plex Mono', 'JetBrains Mono', monospace;
      /* 2026-05-05: レトロフューチャー display フォント（哲学コピー / システムラベル用） */
      --font-display: 'Orbitron', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Helvetica Neue', sans-serif;
      /* 2026-05-05: システムアクセント色（focus / active のみ。粒子は RGBCMY 維持） */
      --accent-cyan: #00E5FF;
      --accent-cyan-soft: rgba(0, 229, 255, 0.32);
      --accent-cyan-dim: rgba(0, 229, 255, 0.08);
    }

    html, body, .phase-3 {
      background: #000 !important;
      background-image: none !important;
    }

    .singularity-content {
      position: relative;
      z-index: 10;
      /* 2026-04-26 v2: 右上UIに被らないようさらに下げる */
      padding: 138px 22px 72px;
      overflow-y: auto;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: safe center;
      /* 2026-04-26: 司「服との余白多すぎ」100→40px */
      gap: 32px;
    }

    .hologram-logo {
      text-align: center;
      margin-top: 0;
      /* 2026-04-19: ブランド名と楕円が被らないよう余白調整 */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      padding-bottom: 8px;
      position: relative;
    }

    .brand-name {
      font-family: var(--font-pixel), 'IBM Plex Mono', 'SFMono-Regular', 'Courier New', monospace;
      /* 2026-04-29: pixel signal 感を強める */
      font-size: clamp(21px, 3.5vw, 31px);
      font-weight: normal;
      letter-spacing: calc(var(--brand-letter-gap) + 0.06em);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.12em;
      line-height: 1;
      white-space: nowrap;
      text-rendering: geometricPrecision;
      filter: drop-shadow(0 1px 0 rgba(255,255,255,0.04));
      transform: translateZ(0);
      animation: brandWordmarkDrift 12.8s ease-in-out infinite;
      position: relative;
      isolation: isolate;
      /* logoGlow削除: 各brand-charが独自にcharGlowするため、
         コンテナ側のtext-shadowは固定位置に残り文字とズレる */
    }

    .brand-name::before {
      content: '';
      position: absolute;
      inset: -4px -10px -2px;
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(255,255,255,0.038) 0 1px,
          transparent 1px 4px
        );
      mix-blend-mode: screen;
      opacity: 0.10;
      pointer-events: none;
      animation: brandScanDrift 11.5s linear infinite;
    }

    .brand-name::after {
      content: '';
      position: absolute;
      left: 10%;
      right: 10%;
      bottom: -2px;
      height: 14px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 38%, transparent 72%);
      filter: blur(7px);
      opacity: 0.18;
      pointer-events: none;
    }

    /* ── ホログラムラッパー ── */
    .logo-holo-wrap {
      display: block;
      /* 2026-04-17: ブランド名直下にピッタリ付ける */
      margin: 0 auto;
      /* 2026-04-20: ロゴが小さすぎ司さんに指摘 → 100→140px */
      width: clamp(90px, 12vw, 140px);
      aspect-ratio: 671 / 953;
      position: relative;
      --holo-tilt-x: 0deg;
      --holo-tilt-y: 0deg;
      --holo-shift-x: 0px;
      --holo-shift-y: 0px;
      isolation: isolate;
      /* 2026-04-20: カード拡大時もロゴが見えるよう最前面 */
      z-index: 30;
      transform:
        rotateX(var(--holo-tilt-x))
        rotateY(var(--holo-tilt-y))
        translate3d(var(--holo-shift-x), var(--holo-shift-y), 0);
      transform-style: preserve-3d;
      will-change: transform;
      contain: layout paint;
    }

    /* ── ラッパーに3Dパースペクティブ ── */
    .logo-holo-wrap {
      perspective: 520px;
    }

    /* ── シェル（卵+I）= 3Dホログラム投影 ── */
    .logo-shell {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: 0.78;
      object-fit: contain;
      mix-blend-mode: screen;
      filter:
        hue-rotate(158deg) saturate(2.55) brightness(1.18) contrast(1.08)
        drop-shadow(0 0 4px rgba(255,255,255,0.22))
        drop-shadow(0 0 11px rgba(0,255,255,0.22))
        drop-shadow(0 0 24px rgba(0,170,255,0.08));
      animation: shellHologramFloat 13.5s ease-in-out infinite;
      transform-style: preserve-3d;
      transform: translate3d(0, 0, 0);
      transform-origin: 50% 50%;
      will-change: transform, opacity;
    }

    /* ── 球体 = 実体（投影の源）— ホログラムじゃなく物理的に存在 ── */
    .logo-sphere {
      position: absolute;
      /* 2026-04-21: logo_sphere.png と logo_shell.png は同じ 671×953 canvas で
         ボール位置が shell の i-ドット位置にすでに配置済み → 100%/0/0 が正解 */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      z-index: 3;
      opacity: 1;
      pointer-events: none;
      /* 2026-04-21: glow を絞り「収縮の光」がコアから hami 出ないサイズに制約 */
      filter:
        drop-shadow(0 0 3px rgba(255,255,255,0.55))
        drop-shadow(0 0 7px rgba(255,255,255,0.24))
        drop-shadow(0 0 18px rgba(0,255,255,0.16))
        saturate(1.28) brightness(1.08) contrast(1.08);
      animation: sphereGlow 3s ease-in-out infinite;
      transform: translateZ(34px);
      will-change: transform, filter, opacity;
    }

    /* ── 3D球体（Three.js canvas版） ── */
    .logo-sphere-3d {
      filter:
        drop-shadow(0 0 10px rgba(255,255,255,0.42))
        drop-shadow(0 0 22px rgba(68,224,255,0.22))
        drop-shadow(0 0 34px rgba(68,136,255,0.10));
      transition: filter 360ms ease, opacity 360ms ease, transform 360ms ease;
      animation: none !important;
    }

    #p6-canvas,
    .singularity-content,
    .hologram-logo,
    .logo-shell,
    .logo-holo-wrap::after {
      transition:
        filter 420ms ease,
        opacity 420ms ease,
        transform 420ms ease;
    }

    #p6-canvas {
      filter: none;
      transition: filter 420ms ease, opacity 420ms ease;
    }

    body.inryoku-speaking #p6-canvas {
      filter: none;
      opacity: 1;
    }

    body.inryoku-speaking .singularity-content { filter: none; }

    body.inryoku-speaking .hologram-logo {
      transform: none;
    }

    body.inryoku-speaking .logo-shell {
      filter:
        hue-rotate(158deg) saturate(2.45) brightness(1.16) contrast(1.06)
        drop-shadow(0 0 4px rgba(255,255,255,0.20))
        drop-shadow(0 0 10px rgba(0,255,255,0.20));
    }

    body.inryoku-speaking .logo-sphere-3d {
      filter: none;
      transform: translateZ(0) scale(1);
    }

    body.inryoku-speaking .logo-holo-wrap::after {
      opacity: 0;
      filter: none;
    }

    /* ── 横スキャンライン（CRTホログラム感）── */
    .holo-scanlines {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          0deg,
          transparent 0px,
          transparent 2px,
          rgba(0,255,255,0.12) 2px,
          rgba(255,255,255,0.06) 3px,
          transparent 4px
        ),
        repeating-linear-gradient(
          0deg,
          rgba(255,0,120,0.08) 0px,
          transparent 1px,
          transparent 9px
        );
      background-size: 100% 7px, 100% 19px;
      mix-blend-mode: screen;
      /* 2026-04-30: 司「ロゴ静かに」 0.86 → 0.28 */
      opacity: 0.28;
      -webkit-mask-image: radial-gradient(ellipse at 50% 38%, #000 0%, #000 42%, rgba(0,0,0,0.72) 56%, transparent 76%);
      mask-image: radial-gradient(ellipse at 50% 38%, #000 0%, #000 42%, rgba(0,0,0,0.72) 56%, transparent 76%);
      /* 2026-04-30: scanline duration 1.5x (2.6s → 4.0s) */
      animation: scanlinePlane 6.4s ease-in-out infinite, scanlineDrift 1.77s linear infinite, scanlineBreath 4.0s steps(8) infinite;
      transform-style: preserve-3d;
      transform: translateZ(24px);
      will-change: transform, opacity, background-position;
    }

    .holo-scanlines::before,
    .holo-scanlines::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .holo-scanlines::before {
      background:
        linear-gradient(90deg, transparent 0%, rgba(255,0,110,0.22) 48%, transparent 53%),
        linear-gradient(90deg, transparent 0%, rgba(0,255,255,0.16) 51%, transparent 57%);
      opacity: 0;
      filter: blur(0.45px);
      animation: holoTear 6.8s steps(1) infinite;
    }

    .holo-scanlines::after {
      background-image:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,0.7) 0 0.7px, transparent 1.8px),
        radial-gradient(circle at 72% 42%, rgba(0,255,255,0.55) 0 0.7px, transparent 1.9px),
        radial-gradient(circle at 44% 76%, rgba(255,0,255,0.45) 0 0.6px, transparent 1.7px),
        radial-gradient(circle at 84% 18%, rgba(255,255,0,0.42) 0 0.55px, transparent 1.6px);
      background-size: 23px 31px, 29px 37px, 31px 41px, 37px 43px;
      opacity: 0.36;
      animation: holoSparkle 1.7s steps(6) infinite;
    }

    /* Stable hologram shell: keep PNG dimensions fixed; only drift opacity/position slightly. */
    @keyframes shellHologramFloat {
      0%, 100% {
        transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg);
        opacity: 0.76;
      }
      28% {
        transform: translate3d(0.35px, -0.25px, 0) rotateY(0.7deg) rotateX(-0.3deg);
        opacity: 0.82;
      }
      57% {
        transform: translate3d(-0.28px, 0.18px, 0) rotateY(-0.55deg) rotateX(0.24deg);
        opacity: 0.74;
      }
      78% {
        transform: translate3d(0.18px, -0.12px, 0) rotateY(0.35deg) rotateX(-0.18deg);
        opacity: 0.80;
      }
    }

    /* 3D回転 — legacy shell motion kept for old references; live shell uses shellHologramFloat. */
    @keyframes shell3D {
      0%   { transform: translate3d(0,0,16px) rotateY(0deg) rotateX(0deg) skewX(0deg);
             opacity:0.84; filter: hue-rotate(158deg) saturate(3.6) brightness(1.38) contrast(1.14) drop-shadow(-1.4px 0 rgba(255,0,90,0.26)) drop-shadow(1.2px 0 rgba(0,255,255,0.38)) drop-shadow(0 0 13px rgba(0,255,255,0.58)) drop-shadow(0 0 34px rgba(0,170,255,0.28)); }
      18%  { transform: translate3d(0.5px,-0.2px,21px) rotateY(4deg) rotateX(-1.8deg) skewX(0.25deg);
             opacity:0.88; filter: hue-rotate(166deg) saturate(4.1) brightness(1.52) contrast(1.22) drop-shadow(-2.2px 0 rgba(255,0,110,0.34)) drop-shadow(1.9px 0 rgba(0,255,255,0.48)) drop-shadow(0 0 16px rgba(0,255,255,0.7)) drop-shadow(0 0 44px rgba(0,120,255,0.34)); }
      28%  { transform: translate3d(-1.2px,0.4px,18px) rotateY(2deg) rotateX(-1deg) skewX(-0.9deg);
             opacity:0.72; filter: hue-rotate(137deg) saturate(4.4) brightness(1.62) contrast(1.32) drop-shadow(-3px 0 rgba(255,0,90,0.46)) drop-shadow(2.8px 0 rgba(0,255,255,0.58)) drop-shadow(0 0 20px rgba(255,255,255,0.32)) drop-shadow(0 0 50px rgba(0,255,255,0.36)); }
      50%  { transform: translate3d(-0.4px,0.1px,14px) rotateY(-3deg) rotateX(1.2deg) skewX(0deg);
             opacity:0.85; filter: hue-rotate(154deg) saturate(3.7) brightness(1.4) contrast(1.15) drop-shadow(-1.8px 0 rgba(255,0,110,0.28)) drop-shadow(1.6px 0 rgba(0,255,255,0.42)) drop-shadow(0 0 14px rgba(0,255,255,0.62)) drop-shadow(0 0 36px rgba(0,170,255,0.3)); }
      73%  { transform: translate3d(0.8px,-0.3px,20px) rotateY(3deg) rotateX(-1.3deg) skewX(0.35deg);
             opacity:0.82; filter: hue-rotate(171deg) saturate(4) brightness(1.48) contrast(1.2) drop-shadow(-1.2px 0 rgba(255,0,100,0.3)) drop-shadow(2.4px 0 rgba(0,255,255,0.5)) drop-shadow(0 0 15px rgba(0,255,255,0.66)) drop-shadow(0 0 42px rgba(0,120,255,0.32)); }
      100% { transform: translate3d(0,0,16px) rotateY(0deg) rotateX(0deg) skewX(0deg);
             opacity:0.84; filter: hue-rotate(158deg) saturate(3.6) brightness(1.38) contrast(1.14) drop-shadow(-1.4px 0 rgba(255,0,90,0.26)) drop-shadow(1.2px 0 rgba(0,255,255,0.38)) drop-shadow(0 0 13px rgba(0,255,255,0.58)) drop-shadow(0 0 34px rgba(0,170,255,0.28)); }
    }

    @keyframes scanlinePlane {
      0%   { transform: translate3d(0,0,24px) rotateY(0deg) rotateX(0deg); }
      18%  { transform: translate3d(0.4px,-0.15px,28px) rotateY(3deg) rotateX(-1.2deg); }
      28%  { transform: translate3d(-1px,0.3px,25px) rotateY(1.4deg) rotateX(-0.8deg); }
      50%  { transform: translate3d(-0.3px,0.08px,22px) rotateY(-2deg) rotateX(0.9deg); }
      73%  { transform: translate3d(0.6px,-0.2px,27px) rotateY(2deg) rotateX(-1deg); }
      100% { transform: translate3d(0,0,24px) rotateY(0deg) rotateX(0deg); }
    }

    /* シェルのちらつき（控えめ — リアルなホログラム） */
    @keyframes shellFlicker {
      0%   { opacity:0.84; }
      7%   { opacity:0.9; }
      7.4% { opacity:0.42; }
      7.8% { opacity:0.88; }
      24%  { opacity:0.86; }
      24.3%{ opacity:0.56; }
      25.0%{ opacity:0.88; }
      58%  { opacity:0.84; }
      58.2%{ opacity:0.48; }
      58.8%{ opacity:0.86; }
      86%  { opacity:0.86; }
      86.1%{ opacity:0.22; }
      86.35%{ opacity:0.9; }
      100% { opacity:0.84; }
    }

    /* 球体の脈動（実体 — 安定して光る） */
    /* 2026-04-19: コア=実体感、cyan/blueトーン除去、白のみの脈動に */
    @keyframes sphereGlow {
      0%   { filter: drop-shadow(0 0 4px rgba(255,255,255,0.44)) drop-shadow(0 0 9px rgba(255,255,255,0.18)) drop-shadow(0 0 18px rgba(0,255,255,0.12)) saturate(1.28) brightness(1.08) contrast(1.06); }
      50%  { filter: drop-shadow(0 0 7px rgba(255,255,255,0.68)) drop-shadow(0 0 16px rgba(255,255,255,0.34)) drop-shadow(0 0 32px rgba(0,255,255,0.2)) saturate(1.42) brightness(1.2) contrast(1.12); }
      100% { filter: drop-shadow(0 0 4px rgba(255,255,255,0.44)) drop-shadow(0 0 9px rgba(255,255,255,0.18)) drop-shadow(0 0 18px rgba(0,255,255,0.12)) saturate(1.28) brightness(1.08) contrast(1.06); }
    }

    /* コア球体の強い脈動（タップ誘導時） */
    @keyframes sphereBeacon {
      0%   { filter: drop-shadow(0 0 15px rgba(255,255,255,0.7)) drop-shadow(0 0 35px rgba(0,255,255,0.5)) saturate(1.6) brightness(1.2);
             transform: translateZ(34px) scale(1.0); }
      50%  { filter: drop-shadow(0 0 30px rgba(255,255,255,1.0)) drop-shadow(0 0 60px rgba(0,255,255,0.8)) drop-shadow(0 0 100px rgba(255,0,255,0.4)) saturate(2.0) brightness(1.6);
             transform: translateZ(34px) scale(1.08); }
      100% { filter: drop-shadow(0 0 15px rgba(255,255,255,0.7)) drop-shadow(0 0 35px rgba(0,255,255,0.5)) saturate(1.6) brightness(1.2);
             transform: translateZ(34px) scale(1.0); }
    }

    /* タップヒントテキスト */
    .tap-hint {
      position: absolute;
      bottom: -28px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      color: rgba(255,255,255,0);
      letter-spacing: 3px;
      white-space: nowrap;
      pointer-events: none;
      transition: color 1.5s ease;
    }
    .tap-hint.visible {
      color: rgba(255,255,255,0.5);
      animation: tapPulse 2s ease-in-out infinite;
    }
    @keyframes tapPulse {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 1.0; }
    }

    /* ホログラフィックオーバーレイ（虹色の光沢が流れる） */
    .holo-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      border-radius: 50% 50% 30% 30%;
      background:
        radial-gradient(ellipse at 48% 23%, rgba(255,255,255,0.28) 0%, rgba(0,255,255,0.16) 13%, transparent 31%),
        conic-gradient(from 218deg at 50% 32%,
          transparent 0deg,
          rgba(255,0,110,0.18) 46deg,
          rgba(0,255,255,0.22) 96deg,
          rgba(255,255,0,0.14) 142deg,
          rgba(0,255,120,0.18) 205deg,
          rgba(100,70,255,0.16) 266deg,
          transparent 330deg),
        linear-gradient(135deg,
          rgba(255,0,0,0) 0%,
          rgba(255,0,100,0.13) 15%,
          rgba(0,255,255,0.16) 30%,
          rgba(255,255,0,0.11) 45%,
          rgba(0,255,100,0.13) 60%,
          rgba(100,0,255,0.11) 75%,
          rgba(255,0,0,0) 100%);
      background-size: 120% 120%, 160% 160%, 220% 220%;
      animation: holoShimmer 3.4s ease-in-out infinite, holoHueSkip 8.5s steps(1) infinite;
      mix-blend-mode: screen;
      -webkit-mask-image: radial-gradient(ellipse at 50% 38%, #000 0%, #000 46%, rgba(0,0,0,0.68) 61%, transparent 79%);
      mask-image: radial-gradient(ellipse at 50% 38%, #000 0%, #000 46%, rgba(0,0,0,0.68) 61%, transparent 79%);
      transform: translateZ(28px);
      will-change: opacity, background-position, filter;
    }

    .holo-overlay::before,
    .holo-overlay::after {
      content: '';
      position: absolute;
      inset: -4% -8%;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .holo-overlay::before {
      background:
        linear-gradient(90deg, transparent 0%, rgba(255,0,80,0.18) 48%, transparent 52%),
        linear-gradient(90deg, transparent 0%, rgba(0,255,255,0.18) 51%, transparent 56%);
      filter: blur(1px);
      opacity: 0.24;
      transform: translateX(-1.8px);
      animation: rgbRebuild 2.9s ease-in-out infinite;
    }

    .holo-overlay::after {
      background:
        radial-gradient(ellipse at 50% 22%, rgba(255,255,255,0.22) 0%, transparent 18%),
        radial-gradient(ellipse at 50% 46%, rgba(0,255,255,0.18) 0%, transparent 37%),
        radial-gradient(ellipse at 50% 58%, rgba(255,0,255,0.12) 0%, transparent 45%);
      filter: blur(7px);
      opacity: 0.45;
      animation: bloomPulse 3.8s ease-in-out infinite;
    }

    @keyframes holoShimmer {
      0%   { background-position: 48% 28%, 0% 0%, 0% 0%; opacity: 0.52; }
      37%  { background-position: 50% 31%, 90% 42%, 78% 94%; opacity: 0.88; }
      52%  { background-position: 47% 26%, 105% 64%, 100% 100%; opacity: 0.62; }
      100% { background-position: 48% 28%, 0% 0%, 0% 0%; opacity: 0.52; }
    }

    /* スキャンライン（球体から投影されたように上から下へ走る） */
    .holo-scanline {
      position: absolute;
      left: 5%;
      width: 90%;
      height: 2px;
      z-index: 3;
      pointer-events: none;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,0,120,0.24) 10%,
        rgba(0,255,255,0.5) 22%,
        rgba(255,255,255,0.96) 46%,
        rgba(255,255,255,0.96) 54%,
        rgba(0,255,255,0.5) 78%,
        rgba(255,0,255,0.2) 90%,
        transparent 100%
      );
      box-shadow:
        -2px 0 5px rgba(255,0,100,0.32),
        2px 0 5px rgba(0,255,255,0.42),
        0 0 8px rgba(0,255,255,0.68),
        0 0 18px rgba(0,255,255,0.36),
        0 -3px 24px rgba(255,255,255,0.18);
      animation: scanProject 2.35s cubic-bezier(0.36,0,0.16,1) infinite;
      opacity: 0.6;
      transform: translateZ(42px);
      will-change: top, transform, opacity, filter;
    }

    /* 投影元の球体位置（35%付近）から下へスキャン */
    @keyframes scanProject {
      0%   { top: 26%; opacity: 0; transform: translate3d(-4px,0,42px) scaleX(0.58); filter: blur(0.4px); }
      7%   { opacity: 0.92; transform: translate3d(1px,0,42px) scaleX(1.04); filter: blur(0px); }
      37%  { opacity: 0.68; transform: translate3d(-1px,0,42px) scaleX(0.9); filter: blur(0.35px); }
      72%  { opacity: 0.82; transform: translate3d(3px,0,42px) scaleX(1.16); filter: blur(0.15px); }
      100% { top: 97%; opacity: 0; transform: translate3d(-2px,0,42px) scaleX(0.7); filter: blur(0.6px); }
    }

    /* 2026-05-06: コア(球体) からホログラム(殻) を投影する光円錐
       司要望「コアが見えないものを可視化、そこからロゴが見える」
       i-dot 位置 (top 21%, center) を起点にやさしく広がる cyan/magenta グロー */
    .logo-holo-wrap::before {
      content: '';
      position: absolute;
      top: 13%;
      left: 50%;
      transform: translateX(-50%) translateZ(-12px);
      width: 128%;
      height: 116%;
      background:
        radial-gradient(ellipse 52% 72% at 50% 5%,
          rgba(255, 255, 255, 0.18) 0%,
          rgba(0, 255, 255, 0.14) 16%,
          rgba(255, 0, 255, 0.075) 38%,
          rgba(255, 255, 0, 0.045) 56%,
          transparent 76%),
        conic-gradient(from 180deg at 50% 8%,
          transparent 0deg,
          rgba(255,0,0,0.055) 18deg,
          rgba(0,255,0,0.05) 34deg,
          rgba(0,0,255,0.055) 50deg,
          rgba(0,255,255,0.075) 66deg,
          rgba(255,0,255,0.055) 82deg,
          rgba(255,255,0,0.05) 98deg,
          transparent 116deg);
      clip-path: polygon(46% 0%, 54% 0%, 92% 100%, 8% 100%);
      filter: blur(1.8px);
      mix-blend-mode: screen;
      pointer-events: none;
      opacity: 0.52;
      z-index: 0;  /* shell の下、球体光源の役 */
      animation: holoProjectBeam 6.8s ease-in-out infinite;
    }
    @keyframes holoProjectBeam {
      0%, 100% {
        opacity: 0.34;
        transform: translateX(-50%) translateZ(-12px) scaleX(0.92) scaleY(0.97);
        filter: blur(2.4px);
      }
      50% {
        opacity: 0.58;
        transform: translateX(-50%) translateZ(-12px) scaleX(1.04) scaleY(1.02);
        filter: blur(1.6px);
      }
    }
    /* shell の opacity はリビール演出で制御するので変えない。投影感はビームのみで表現 */

    .logo-holo-wrap::after {
      content: '';
      position: absolute;
      inset: -18% -22% -12%;
      background:
        radial-gradient(ellipse at 50% 24%, rgba(255,255,255,0.18) 0%, rgba(0,255,255,0.09) 12%, transparent 31%),
        radial-gradient(ellipse at 50% 50%, rgba(0,160,255,0.10) 0%, transparent 58%),
        linear-gradient(to bottom,
          transparent 0%,
          rgba(0,255,255,0.035) 36%,
          rgba(255,0,255,0.028) 68%,
          transparent 100%);
      filter: blur(8px);
      mix-blend-mode: screen;
      z-index: 0;
      pointer-events: none;
      opacity: 0.46;
      animation: haloBreathe 6.2s ease-in-out infinite;
    }

    @keyframes projectionBeam {
      0%   { opacity: 0.34; filter: blur(3.2px); transform: translateX(-50%) translateZ(-18px) scaleX(0.86); }
      50%  { opacity: 0.62; filter: blur(2.3px); transform: translateX(-50%) translateZ(-18px) scaleX(1.06); }
      100% { opacity: 0.38; filter: blur(3px); transform: translateX(-50%) translateZ(-18px) scaleX(0.92); }
    }

    @keyframes scanlineDrift {
      0%   { background-position: 0 0, 0 0; }
      100% { background-position: 0 28px, 0 -38px; }
    }

    @keyframes scanlineBreath {
      0%, 100% { opacity: 0.78; filter: brightness(1); }
      37%      { opacity: 0.95; filter: brightness(1.35); }
      41%      { opacity: 0.48; filter: brightness(1.8); }
      44%      { opacity: 0.9; filter: brightness(1.1); }
    }

    @keyframes holoTear {
      0%, 70%, 100% { opacity: 0; transform: translateX(-18%); }
      71% { opacity: 0.5; transform: translateX(-8%) skewX(-8deg); }
      72% { opacity: 0.16; transform: translateX(18%) skewX(6deg); }
      73% { opacity: 0; transform: translateX(30%); }
    }

    @keyframes holoSparkle {
      0%   { opacity: 0.22; transform: translate3d(0,0,0); }
      20%  { opacity: 0.44; transform: translate3d(1px,-1px,0); }
      40%  { opacity: 0.18; transform: translate3d(-1px,1px,0); }
      60%  { opacity: 0.5; transform: translate3d(0,-2px,0); }
      100% { opacity: 0.24; transform: translate3d(0,0,0); }
    }

    @keyframes rgbRebuild {
      0%, 100% { opacity: 0.16; transform: translateX(-1.8px) scaleX(0.98); }
      34%      { opacity: 0.32; transform: translateX(1.2px) scaleX(1.02); }
      36%      { opacity: 0.58; transform: translateX(-3px) scaleX(1.08); }
      39%      { opacity: 0.22; transform: translateX(2px) scaleX(0.96); }
      68%      { opacity: 0.28; transform: translateX(0.8px) scaleX(1); }
    }

    @keyframes bloomPulse {
      0%, 100% { opacity: 0.32; transform: scale(0.98); }
      50%      { opacity: 0.58; transform: scale(1.04); }
    }

    @keyframes holoHueSkip {
      0%, 79%, 100% { filter: hue-rotate(0deg) saturate(1); }
      80%           { filter: hue-rotate(28deg) saturate(1.35); }
      81%           { filter: hue-rotate(-16deg) saturate(1.2); }
    }

    @keyframes haloBreathe {
      0%, 100% { opacity: 0.42; transform: scale(0.98); }
      50%      { opacity: 0.72; transform: scale(1.05); }
    }

    @media (prefers-reduced-motion: reduce) {
      .logo-shell,
      .logo-sphere,
      .holo-scanlines,
      .holo-scanlines::before,
      .holo-scanlines::after,
      .holo-overlay,
      .holo-overlay::before,
      .holo-overlay::after,
      .holo-scanline,
      .logo-holo-wrap::before,
      .logo-holo-wrap::after {
        animation-duration: 12s !important;
      }

      #p6-canvas,
      .singularity-content,
      .hologram-logo,
      .logo-shell,
      .logo-sphere-3d,
      .logo-holo-wrap::after {
        transition-duration: 120ms !important;
      }

      body.inryoku-speaking #p6-canvas {
        filter: brightness(0.82) saturate(0.92) !important;
        opacity: 0.97;
      }

      body.inryoku-speaking .hologram-logo,
      body.inryoku-speaking .logo-sphere-3d {
        transform: none !important;
      }

      body.inryoku-speaking .logo-shell {
        filter:
          hue-rotate(158deg) saturate(3.5) brightness(1.42) contrast(1.16)
          drop-shadow(-1.4px 0 rgba(255,0,90,0.24))
          drop-shadow(1.2px 0 rgba(0,255,255,0.38))
          drop-shadow(0 0 8px rgba(255,255,255,0.34))
          drop-shadow(0 0 14px rgba(0,255,255,0.56))
          drop-shadow(0 0 30px rgba(0,170,255,0.24)) !important;
      }
    }

    /* ── ホログラムフリッカーは .logo-shell 自体に統合済み ── */

    /* 2026-04-22: ホログラム感は最初だけ、reveal 完了後は calm mode */
    .logo-holo-wrap.holo-calmed .holo-scanlines,
    .logo-holo-wrap.holo-calmed .holo-scanlines::before,
    .logo-holo-wrap.holo-calmed .holo-scanlines::after,
    .logo-holo-wrap.holo-calmed .holo-overlay,
    .logo-holo-wrap.holo-calmed .holo-overlay::before,
    .logo-holo-wrap.holo-calmed .holo-overlay::after,
    .logo-holo-wrap.holo-calmed .holo-scanline {
      transition: opacity 1.6s ease;
      opacity: 0.16 !important;
    }
    .logo-holo-wrap.holo-calmed .logo-shell {
      transition: filter 1.6s ease, opacity 1.6s ease;
      animation: shellHologramFloat 18s ease-in-out infinite !important;
      filter:
        hue-rotate(160deg) saturate(2.0) brightness(1.10) contrast(1.04)
        drop-shadow(0 0 3px rgba(255,255,255,0.18))
        drop-shadow(0 0 9px rgba(0,255,255,0.22)) !important;
    }
    .logo-holo-wrap.holo-calmed .logo-sphere {
      transition: filter 1.6s ease;
    }

    /* Core-first rule:
       初期世界ではコアだけを見せる。ホログラム/殻/投影光はコアが起動してから出す。 */
    .logo-holo-wrap.core-only::before,
    .logo-holo-wrap.core-only::after,
    .logo-holo-wrap.core-only .logo-shell,
    .logo-holo-wrap.core-only .holo-scanlines,
    .logo-holo-wrap.core-only .holo-scanlines::before,
    .logo-holo-wrap.core-only .holo-scanlines::after,
    .logo-holo-wrap.core-only .holo-overlay,
    .logo-holo-wrap.core-only .holo-overlay::before,
    .logo-holo-wrap.core-only .holo-overlay::after,
    .logo-holo-wrap.core-only .holo-scanline {
      opacity: 0 !important;
      animation: none !important;
      transition: none !important;
    }

    @keyframes brandPulse {
      0%   { transform: scale(1);   opacity: 0.9; }
      50%  { transform: scale(1.5); opacity: 1; }
      100% { transform: scale(1);   opacity: 0.9; }
    }

    /* Glassmorphism共通 */
    .glass-card {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    @keyframes iconGlow {

      0%,
      100% {
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
        transform: scale(1.0);
      }

      50% {
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.2));
        transform: scale(1.03);
      }
    }

    .brand-char {
      display: inline-block;
      /* 箔押し感は残しつつ、pixel の輪郭を読みやすく固定 */
      /* 2026-05-09 司「微細な色収差」 — RGB/CMY を 0.5px だけずらして読みやすさを優先 */
      --ca-offset: 0.5px;
      --ca-alpha: 0.28;
      text-shadow:
        0 0 0 currentColor,
        0 0 5px color-mix(in srgb, currentColor 34%, transparent),
        0 0 12px color-mix(in srgb, currentColor 16%, transparent),
        0 1px 0 rgba(255,255,255,0.08),
        0 0 12px var(--brand-space-glow),
        var(--ca-offset) 0 0 rgba(255, 28, 28, var(--ca-alpha)),
        calc(var(--ca-offset) * -1) 0 0 rgba(0, 220, 255, var(--ca-alpha)),
        0 var(--ca-offset) 0 rgba(255, 0, 210, calc(var(--ca-alpha) * 0.78)),
        0 calc(var(--ca-offset) * -1) 0 rgba(255, 240, 0, calc(var(--ca-alpha) * 0.78));
      /* 2026-04-30: 司「ロゴ静かに」 jitter は idle 停止 → :hover / .is-active のみ発火 */
      animation: charFloat 8.2s ease-in-out infinite, charGlow 6.8s ease-in-out infinite;
      font-family: var(--font-pixel), 'IBM Plex Mono', monospace !important;
      -webkit-font-smoothing: none !important;
      -moz-osx-font-smoothing: unset !important;
      position: relative;
      line-height: 1;
      transform-origin: 50% 58%;
      backface-visibility: hidden;
    }

    .brand-char:nth-child(1) {
      color: #808080;
      /* 2026-04-30: 司「ロゴ静かに」 jitter は idle 停止 */
      animation: charFloatMirror 4.8s ease-in-out infinite, charGlow 3.8s ease-in-out infinite;
      animation-delay: 0s, 0s;
    }

    /* 2026-04-30: hover / active 時のみ jitter を再追加 */
    /* 2026-05-09: hover で色収差をわずかに強める (0.5px → 0.8px / α 0.28 → 0.42) */
    .brand-name:hover .brand-char,
    .brand-name.is-active .brand-char {
      animation: charFloat 8.2s ease-in-out infinite, charGlow 6.8s ease-in-out infinite, charSignalJitter 10.8s steps(1, end) infinite;
      --ca-offset: 0.8px;
      --ca-alpha: 0.42;
      transition: --ca-offset 0.35s ease, --ca-alpha 0.35s ease;
    }
    .brand-name:hover .brand-char:nth-child(1),
    .brand-name.is-active .brand-char:nth-child(1) {
      animation: charFloatMirror 4.8s ease-in-out infinite, charGlow 3.8s ease-in-out infinite, charSignalJitter 6.4s steps(1, end) infinite;
    }

    .brand-char:nth-child(2) {
      color: #FF0000;
      animation-delay: -0.57s, -0.4s;
    }

    .brand-char:nth-child(3) {
      color: #00FF00;
      animation-delay: -1.14s, -0.8s;
    }

    .brand-char:nth-child(4) {
      color: #0044FF;
      animation-delay: -1.71s, -1.2s;
    }

    .brand-char:nth-child(5) {
      color: #00FFFF;
      animation-delay: -2.28s, -1.6s;
    }

    .brand-char:nth-child(6) {
      color: #FF00FF;
      animation-delay: -2.85s, -2.0s;
    }

    .brand-char:nth-child(7) {
      color: #FFFF00;
      animation-delay: -3.42s, -2.4s;
    }

    .brand-char::after {
      content: attr(data-char);
      position: absolute;
      inset: 0;
      opacity: 0.10;
      text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
      transform: translate3d(0.7px, 0, -1px);
      pointer-events: none;
      mix-blend-mode: screen;
      animation: charGhost 8.8s ease-in-out infinite;
    }

    /* 各文字が独立して浮遊（波のようにうねる） */
    /* iだけ左右反転 + 浮遊 */
    @keyframes charFloatMirror {
      0% {
        transform: scaleX(-1) translateY(0px) scale(1) rotate(0deg);
      }
      25% {
        transform: scaleX(-1) translateY(-3px) scale(1.015) rotate(0.8deg);
      }
      50% {
        transform: scaleX(-1) translateY(0px) scale(1) rotate(0deg);
      }
      75% {
        transform: scaleX(-1) translateY(2px) scale(0.992) rotate(-0.7deg);
      }
      100% {
        transform: scaleX(-1) translateY(0px) scale(1) rotate(0deg);
      }
    }

    @keyframes charFloat {
      0% {
        transform: translateY(0px) scale(1) rotate(0deg);
      }
      25% {
        transform: translateY(-3px) scale(1.015) rotate(-0.8deg);
      }
      50% {
        transform: translateY(0px) scale(1) rotate(0deg);
      }
      75% {
        transform: translateY(2px) scale(0.992) rotate(0.7deg);
      }
      100% {
        transform: translateY(0px) scale(1) rotate(0deg);
      }
    }

    @keyframes brandWordmarkDrift {
      0%,
      100% {
        transform: translate3d(0, 0, 0);
        filter: drop-shadow(0 1px 0 rgba(255,255,255,0.06));
      }
      50% {
        transform: translate3d(0, -0.5px, 0);
        filter:
          drop-shadow(0 1px 0 rgba(255,255,255,0.07))
          drop-shadow(0 0 8px rgba(68, 224, 255, 0.08));
      }
    }

    @keyframes brandScanDrift {
      0%   { transform: translateY(-0.6px); opacity: 0.08; }
      50%  { transform: translateY(0.6px); opacity: 0.13; }
      100% { transform: translateY(-0.6px); opacity: 0.08; }
    }

    /* グロー脈動（各文字の色で発光が強まる→弱まる） */
    /* 2026-04-22: 発光抑制 150px → 18px 最大 (ゲーミング感 → 箔押し感) */
    /* 2026-04-30: 司「ロゴ静かに」 max 強度を 0.55 相当 → 0.30 相当に */
    @keyframes charGlow {
      0%, 100% {
        text-shadow:
          0 0 4px color-mix(in srgb, currentColor 30%, transparent),
          0 0 8px color-mix(in srgb, currentColor 18%, transparent);
        filter: brightness(1);
      }
      50% {
        text-shadow:
          0 0 5px color-mix(in srgb, currentColor 30%, transparent),
          0 0 10px color-mix(in srgb, currentColor 22%, transparent),
          0 0 14px color-mix(in srgb, currentColor 14%, transparent);
        filter: brightness(1.02);
      }
    }

    /* 2026-04-30: charGhost max opacity 0.12 → 0.07 */
    @keyframes charGhost {
      0%, 100% { opacity: 0.04; transform: translate3d(0.4px, 0, -1px); }
      35%      { opacity: 0.07; transform: translate3d(0.9px, -0.5px, -1px); }
      58%      { opacity: 0.05; transform: translate3d(-0.4px, 0.3px, -1px); }
    }

    @keyframes charSignalJitter {
      0%, 92%, 100% { filter: brightness(1); }
      93% { filter: brightness(1.04); transform: translateX(0.2px); }
      94% { filter: brightness(0.98); transform: translateX(-0.3px); }
      95% { filter: brightness(1.06); transform: translateX(0.4px); }
      96% { filter: brightness(1); transform: translateX(0); }
    }

    .brand-truth {
      color: #555;
      font-size: clamp(11px, 2vw, 15px);
      letter-spacing: 4px;
      text-align: center;
      margin-top: 8px;
      font-family: 'Courier New';
    }

    .prism-line {
      width: 240px;
      height: 1px;
      background: linear-gradient(90deg, #808080, #F00, #0F0, #00F, #0FF, #F0F, #FF0);
      margin: 8px auto 0;
    }

    .item-grid {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      isolation: isolate;
      /* 2026-04-19: 400px の空白削除 (真ん中寄せに調整) */
      margin-top: 0;
    }

    .item-grid::before,
    .item-grid::after {
      display: none;
    }

    .item-grid::before {
      top: -116px;
      width: min(56vw, 360px);
      height: 310px;
      background:
        conic-gradient(from 180deg at 50% 0%,
          transparent 0deg,
          rgba(0,255,255,0.16) 18deg,
          rgba(255,0,255,0.12) 31deg,
          rgba(255,255,0,0.10) 43deg,
          transparent 60deg),
        linear-gradient(180deg,
          rgba(255,255,255,0.18) 0%,
          rgba(0,255,255,0.09) 24%,
          rgba(255,0,255,0.055) 58%,
          transparent 100%);
      clip-path: polygon(47% 0%, 53% 0%, 100% 100%, 0% 100%);
      filter: blur(0.2px);
      mix-blend-mode: screen;
    }

    .item-grid::after {
      top: 4px;
      width: min(76vw, 500px);
      height: 1px;
      background: linear-gradient(90deg,
        transparent,
        rgba(255,0,0,0.0) 8%,
        rgba(255,0,0,0.38),
        rgba(0,255,0,0.38),
        rgba(0,0,255,0.38),
        rgba(0,255,255,0.42),
        rgba(255,0,255,0.42),
        rgba(255,255,0,0.42),
        transparent);
      box-shadow:
        0 0 10px rgba(0,255,255,0.20),
        0 0 18px rgba(255,0,255,0.12);
      mix-blend-mode: screen;
    }

    .phase-3::before,
    .phase-3::after {
      display: none;
    }

    /* 2026-04-29: 背景は完全に黒へ戻す */
    .phase-3::before {
      display: none;
    }

    .phase-3::after {
      display: none;
    }

    @keyframes nebulaDriftA {
      0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.00) rotate(0deg); }
      100% { transform: translate3d(1.5%, 1.2%, 0) scale(1.04) rotate(1.2deg); }
    }

    @keyframes nebulaDriftB {
      0%   { transform: translate3d(1.2%, -0.8%, 0) scale(1.00) rotate(0deg); }
      100% { transform: translate3d(-1.4%, 1.4%, 0) scale(1.03) rotate(-1deg); }
    }

    /* ═══ 3D Carousel — Merry-go-round ═══ */
    .carousel-wrap {
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      perspective: 1400px;
      /* 2026-04-17: 上下余白を詰めてロゴから下がりすぎないように */
      padding: 2px 0;
      cursor: grab;
    }
    .carousel-wrap:active {
      cursor: grabbing;
    }
    .carousel-scene {
      /* 2026-04-24: 司「カード大きく」 desktop 180→230 / 250→320 */
      width: 230px;
      height: 320px;
      /* 2026-04-26: 余白詰め 80→20 */
      margin: 4px auto 0;
      position: relative;
      perspective: 1400px;
      transform-style: preserve-3d;
    }
    .carousel-ring {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      transition: none;
    }
    .carousel-item {
      position: absolute;
      /* 2026-04-24: 司「カード大きく」 104→134px、scene 230 中央 */
      width: 134px;
      left: 48px;
      top: 0;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      cursor: pointer;
      transition: filter 0.55s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.55s ease;
      opacity: 0.42;
      filter: brightness(0.5) saturate(0.55) blur(0.3px);
    }
    /* 正面カード: RGBCMYグロー + スケールアップ + 完全な明るさ */
    .carousel-item.carousel-front {
      z-index: 10;
      opacity: 1;
      filter: brightness(1) saturate(1);
    }
    /* 2026-04-26 v2: 矩形 box-shadow が「四角い枠」に見えるため削除。
       色の発光は服の drop-shadow と showcase-glow に任せる */
    .carousel-item.carousel-front .product-card-img { box-shadow: none; }
    .carousel-item:hover .product-card-img { box-shadow: none; }
    .carousel-item:hover {
      opacity: 0.8;
      filter: brightness(0.8) saturate(0.8);
    }

    .product-showcase {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1.14;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
      padding: 14px 10px 24px;
      transform-style: preserve-3d;
    }

    .product-showcase::before,
    .product-showcase::after {
      content: '';
      position: absolute;
      pointer-events: none;
      display: none;
    }

    .product-showcase-frame,
    .product-showcase-glow,
    .product-showcase-aurora,
    .product-showcase-orbit,
    .product-showcase-pedestal {
      position: absolute;
      pointer-events: none;
    }

    /* 2026-04-26 v2: 司さん指摘「ショーケースもっとクリアに/服が浮遊」
       → ガラスケース完全透明化。枠/側壁/blur 全削除。服だけが宇宙に浮く */
    .product-showcase-frame {
      inset: 4% 4% 10%;
      border: none;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-radius: 48% 48% 40% 40% / 26% 26% 42% 42%;
    }
    .product-showcase-frame::before,
    .product-showcase-frame::after {
      display: none;
    }

    .product-showcase-glow {
      display: none;
    }

    .product-showcase-aurora {
      display: none;
    }

    @keyframes showcaseAuroraFlow {
      0% {
        opacity: 0.22;
        transform: translateY(-3%) scale(0.96) rotate(-1deg);
      }
      50% {
        opacity: 0.42;
        transform: translateY(0%) scale(1.01) rotate(0deg);
      }
      100% {
        opacity: 0.30;
        transform: translateY(2%) scale(0.99) rotate(1deg);
      }
    }

    /* orbit は控えめ (静謐) */
    .product-showcase-orbit {
      left: 50%;
      bottom: 12%;
      width: 76%;
      height: 14px;
      transform: translateX(-50%) rotateX(79deg) scaleY(0.72);
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.06);
      opacity: 0.5;
    }

    /* 2026-04-26 v2: 展示台廃止 → 服の真下にソフト影だけ残し浮遊感 */
    .product-showcase-pedestal {
      left: 12%;
      right: 12%;
      bottom: 8%;
      width: auto;
      height: 18px;
      transform: translateZ(-1px) rotateX(76deg);
      border-radius: 50%;
      border: none;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 40%, transparent 75%);
      box-shadow: none;
      filter: blur(8px);
      opacity: 0.78;
    }
    .product-showcase-pedestal::after { display: none; }

    .product-card-img {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 42% 42% 34% 34% / 24% 24% 40% 40%;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), filter 0.6s ease;
      transform: perspective(760px) rotateX(9deg);
    }

    .product-card-img::before {
      display: none;
    }

    /* ── 軌道リング（球面を示す赤道線 + 経線） ── */
    .carousel-scene::before { display: none; }
    @keyframes orbitPulse {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 0.8; }
    }
    .product-card-img img {
      /* 2026-06-19 司「サイズ大きすぎ、全体見えるように」:
         122%→92% に縮小、scale抑制でTシャツ全体がカード内に収まる。 */
      width: 92%;
      height: 92%;
      object-fit: contain;
      filter: drop-shadow(0 14px 10px rgba(0,0,0,0.30));
      transform: translateY(-2px) rotateX(8deg) scale(1.0);
      transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), filter 0.8s ease;
    }

    .product-card-info {
      padding: 16px 4px 0;
      text-align: center;
    }

    /* 2026-04-30: 商品情報階層 — name 13/sans/500, price 11/mono, status 9/mono/0.55 */
    .product-card-name {
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.92);
      letter-spacing: 0.02em;
      text-transform: uppercase;
      line-height: 1.55;
    }

    .product-card-price {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.56);
      margin-top: 6px;
      letter-spacing: 0.04em;
    }

    /* 2026-05-05: ステータス = 端末バッジ (細枠 + Orbitron uppercase) */
    .product-card-status {
      margin-top: 10px;
      display: inline-block;
      font-family: var(--font-display);
      font-weight: 400;
      font-size: 8px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: rgba(220, 248, 255, 0.7);
      padding: 4px 8px 3px;
      border: 1px solid rgba(0, 229, 255, 0.20);
      background: rgba(0, 229, 255, 0.04);
      opacity: 0.85;
    }

    .carousel-item.carousel-front .product-showcase-frame {
      /* 2026-04-26 v2: 透明維持。Front は浮遊影を強める方で表現 */
      border: none;
      box-shadow: none;
      transform: scale(1.05) rotateX(10deg);
    }
    .carousel-item.carousel-front .product-showcase::before,
    .carousel-item.carousel-front .product-showcase::after { display: none; }
    .carousel-item.carousel-front .product-showcase-pedestal {
      opacity: 0.95;
    }

    .carousel-item.carousel-front .product-showcase-glow { display: none; }

    .carousel-item.carousel-front .product-showcase-aurora { display: none; }

    .carousel-item.carousel-front .product-card-img {
      transform: perspective(980px) translateY(-10px) rotateX(16deg) rotateY(0.6deg) scale(1.07);
    }

    .carousel-item.carousel-front .product-card-img img {
      transform: translateY(-12px) scale(1.08) rotateX(15deg) scaleX(1.03);
      /* 2026-04-26 v2: 暗い drop-shadow が四角に見える → 真下の薄い影 + 微発光のみ */
      filter: drop-shadow(0 24px 16px rgba(0,0,0,0.28));
    }
    .carousel-item.carousel-front .product-card-img::before { display: none; }

    .carousel-item:hover .product-card-img img {
      transform: translateY(-8px) scale(1.03) rotateX(11deg);
    }

    /* 2026-04-26 v2: disabled でも frame は完全透明維持（浮遊感優先） */
    .product-card-disabled .product-showcase-frame {
      border-color: transparent;
      background: transparent;
    }

    .product-card-disabled .product-showcase-glow,
    .product-card-disabled .product-showcase-aurora,
    .product-card-disabled .product-showcase-orbit,
    .product-card-disabled .product-showcase-pedestal {
      opacity: 0.38;
    }

    .product-card-disabled .product-card-img img {
      filter:
        saturate(0.72)
        brightness(0.88)
        drop-shadow(0 18px 24px rgba(0,0,0,0.38));
    }

    /* ─── Product Modal ──────────────────────────────────── */
    .product-modal {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      padding: 20px;
    }

    .product-modal.modal-visible {
      opacity: 1;
    }

    .product-modal.modal-closing {
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .product-modal.modal-closing .product-detail {
      transform: translateY(20px) scale(0.97);
      transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease;
      opacity: 0;
    }

    .product-modal .modal-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.88);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .product-detail {
      position: relative;
      max-width: 780px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      background: rgba(18, 18, 22, 0.95);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      padding: 0;
      animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes modalSlideUp {
      from {
        transform: translateY(30px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .product-close-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 10;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: rgba(0, 0, 0, 0.6);
      color: #aaa;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .product-close-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    .product-detail-inner {
      display: flex;
      flex-direction: row;
      gap: 0;
    }

    .product-image-wrap {
      flex: 1;
      min-height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 20px 0 0 20px;
    }

    .product-detail-img {
      max-width: 100%;
      max-height: 400px;
      object-fit: contain;
      border-radius: 8px;
    }

    .product-info-wrap {
      flex: 1;
      padding: 36px 32px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .product-title {
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      font-size: 22px;
      font-weight: 600;
      color: #fff;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .product-price-tag {
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      font-size: 20px;
      font-weight: 300;
      color: rgba(255,255,255,0.72);
      letter-spacing: 0.20em;
    }

    .product-desc {
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      font-size: 14px;
      color: rgba(255,255,255,0.64);
      line-height: 1.8;
      margin: 0;
    }

    .product-specs {
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      font-size: 12px;
      /* a11y-2026-04-28 v1: contrast — was #666 (3.5:1) → #b0b0b0 (~7.4:1) */
      color: #b0b0b0;
      margin: 0;
    }

    .product-color {
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      font-size: 12px;
      color: #888;
      letter-spacing: 1px;
    }

    .size-selector {
      margin-top: 4px;
    }

    .size-label {
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      font-size: 11px;
      color: #666;
      letter-spacing: 2px;
      margin-bottom: 8px;
    }

    .size-options {
      display: flex;
      gap: 8px;
    }

    .size-btn {
      width: 44px;
      height: 44px;
      /* a11y-2026-04-28 v1: non-text contrast (1.4.11) — was 0.15 → 0.4 */
      border: 1px solid rgba(255, 255, 255, 0.4);
      background: transparent;
      color: #999;
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.2s;
    }

    .size-btn:hover {
      border-color: rgba(255, 255, 255, 0.4);
      color: #fff;
    }

    .size-btn.selected {
      border-color: #fff;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    .size-btn:disabled {
      cursor: not-allowed;
      opacity: 0.28;
      border-color: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.02);
    }

    .size-btn:disabled:hover {
      border-color: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.3);
    }

    .add-to-cart-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 16px 24px;
      background: transparent;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.2em;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 8px;
      text-transform: uppercase;
    }

    /* 2026-05-09: コア・テーマ — hover で RGBCMY 微弱アクセント */
    .add-to-cart-btn:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.78);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 16px rgba(  0, 220, 255, 0.10),
        0 0 22px rgba(255,   0, 210, 0.06);
    }

    .add-to-cart-btn:active {
      background: rgba(255, 255, 255, 0.15);
    }

    .add-to-cart-btn.disabled,
    .add-to-cart-btn:disabled {
      cursor: not-allowed;
      opacity: 0.45;
      border-color: rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.03);
    }
    /* 2026-05-09 EC launch: チェックアウト準備中の静かな pending 表現 */
    .add-to-cart-btn.is-pending {
      opacity: 0.62;
      border-style: dashed;
      border-color: rgba(255, 255, 255, 0.32);
      cursor: progress;
    }
    .add-to-cart-btn.is-pending .cart-btn-text {
      letter-spacing: 0.18em;
      color: rgba(255, 255, 255, 0.78);
    }

    .add-to-cart-btn.disabled:hover,
    .add-to-cart-btn:disabled:hover {
      background: rgba(255, 255, 255, 0.03);
      border-color: rgba(255, 255, 255, 0.18);
    }

    .cart-btn-text {
      text-transform: uppercase;
    }

    .cart-btn-price {
      opacity: 0.6;
    }

    .stripe-badge {
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      font-size: 11px;
      color: #555;
      text-align: center;
      margin-top: 4px;
    }

    /* ─── Mobile Product Modal ──────────────────────────── */
    @media (max-width: 640px) {
      .product-detail-inner {
        flex-direction: column;
      }

      .product-image-wrap {
        border-radius: 20px 20px 0 0;
        min-height: 200px;
        padding: 20px;
      }

      .product-info-wrap {
        padding: 24px 20px;
      }

      .product-detail {
        max-height: 95vh;
        border-radius: 16px;
      }
    }

    @media(max-width:768px) {
      .phase-1 {
        padding: 20px 10px;
      }

      .selection-choices {
        gap: 16px;
      }

      .choice-card {
        width: 155px;
        height: 155px;
      }
    }

    /* ═══════════════════════════════════════════════════════════
       CHAT UI — Win95 / DOS / Mac / Famicom / Glitch
       ═══════════════════════════════════════════════════════════ */

    /* ── 共通 ── */
    #inryoku-chat {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 340px;
      max-height: 420px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateY(20px) scale(0.95);
      transition: opacity 0.4s ease, transform 0.4s ease;
      pointer-events: auto;
    }
    #inryoku-chat.chat-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    #chat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 8px;
      cursor: default;
      user-select: none;
    }
    #chat-title {
      font-size: 12px;
      font-weight: bold;
      letter-spacing: 1px;
    }
    #chat-close {
      cursor: pointer;
      border: none;
      background: none;
      font-size: 14px;
      line-height: 1;
      padding: 2px 6px;
    }
    #chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
      min-height: 180px;
      max-height: 280px;
    }
    .chat-msg {
      margin-bottom: 6px;
      font-size: 13px;
      line-height: 1.5;
      word-break: break-word;
    }
    .user-msg {
      opacity: 0.7;
    }
    #chat-input-row {
      display: flex;
      align-items: center;
      padding: 6px 8px;
      gap: 6px;
    }
    #chat-input {
      flex: 1;
      border: none;
      /* a11y-2026-04-28 v1: outline:none は :focus-visible で復活 */
      outline: none;
      font-size: 13px;
      padding: 4px 8px;
      background: transparent;
    }
    /* a11y-2026-04-28 v1: チャット入力のキーボードフォーカス可視化 */
    #chat-input:focus-visible {
      outline: 2px solid #00ffff;
      outline-offset: 1px;
    }
    #chat-send {
      cursor: pointer;
      font-size: 12px;
      padding: 4px 12px;
    }

    /* ── Win95 テーマ ── */
    .chat-win95 {
      background: #c0c0c0;
      border: 2px solid;
      border-color: #ffffff #808080 #808080 #ffffff;
      box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #0a0a0a;
      font-family: 'MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
    }
    .chat-win95 #chat-header {
      background: linear-gradient(to right, #0a246a, #a6b8e8);
      color: #ffffff;
    }
    .chat-win95 #chat-close {
      background: #c0c0c0;
      border: 2px solid;
      border-color: #ffffff #808080 #808080 #ffffff;
      color: #000;
      font-size: 11px;
      font-weight: bold;
      width: 18px;
      height: 18px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .chat-win95 #chat-messages {
      background: #ffffff;
      border: 2px solid;
      border-color: #808080 #ffffff #ffffff #808080;
      margin: 4px;
      color: #000;
    }
    .chat-win95 #chat-input-row {
      margin: 0 4px 4px 4px;
    }
    .chat-win95 #chat-input {
      background: #ffffff;
      border: 2px solid;
      border-color: #808080 #ffffff #ffffff #808080;
      color: #000;
      font-family: 'MS Sans Serif', Tahoma, sans-serif;
    }
    .chat-win95 #chat-send {
      background: #c0c0c0;
      border: 2px solid;
      border-color: #ffffff #808080 #808080 #ffffff;
      color: #000;
      font-family: 'MS Sans Serif', Tahoma, sans-serif;
      font-weight: bold;
    }
    .chat-win95 #chat-send:active {
      border-color: #808080 #ffffff #ffffff #808080;
    }

    /* ── DOS テーマ ── */
    .chat-dos {
      background: #000000;
      border: 1px solid #00aa00;
      font-family: 'Courier New', monospace;
      color: #00ff00;
      box-shadow: 0 0 20px rgba(0, 255, 0, 0.15);
    }
    .chat-dos #chat-header {
      border-bottom: 1px solid #003300;
    }
    .chat-dos #chat-title {
      color: #00aa00;
    }
    .chat-dos #chat-close {
      color: #00aa00;
    }
    .chat-dos #chat-messages {
      color: #00ff00;
      background: transparent;
    }
    .chat-dos .user-msg { color: #aaaaaa; }
    .chat-dos #chat-input {
      color: #00ff00;
      caret-color: #00ff00;
    }
    .chat-dos #chat-prompt {
      color: #00aa00;
      font-size: 13px;
      white-space: nowrap;
    }
    .chat-dos #chat-cursor {
      color: #00ff00;
      animation: dosBlink 0.6s step-end infinite;
    }
    @keyframes dosBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    /* ── Mac テーマ（Classic Mac風） ── */
    .chat-mac {
      background: #f5f5dc;
      border: 2px solid #000;
      border-radius: 8px 8px 4px 4px;
      font-family: 'Chicago', 'Geneva', 'Lucida Grande', sans-serif;
      color: #000;
      box-shadow: 2px 2px 0 #000;
    }
    .chat-mac #chat-header {
      background: repeating-linear-gradient(
        0deg,
        #000 0px, #000 1px,
        #f5f5dc 1px, #f5f5dc 3px
      );
      border-bottom: 2px solid #000;
      padding: 3px 8px;
      height: 22px;
    }
    .chat-mac #chat-close {
      width: 14px; height: 14px;
      border: 2px solid #000;
      background: #f5f5dc;
      border-radius: 0;
      padding: 0;
      font-size: 0;
    }
    .chat-mac #chat-title-wrap {
      background: #f5f5dc;
      padding: 0 8px;
    }
    .chat-mac #chat-title {
      font-size: 11px;
      font-weight: bold;
    }
    .chat-mac #chat-messages {
      background: #fff;
      border: 1px solid #000;
      margin: 4px;
      color: #000;
    }
    .chat-mac #chat-input {
      background: #fff;
      border: 1px solid #000;
      color: #000;
    }
    .chat-mac #chat-send {
      background: #f5f5dc;
      border: 2px solid #000;
      border-radius: 6px;
      color: #000;
      font-weight: bold;
    }

    /* ── ファミコン テーマ（ドラクエ/FF風メッセージウィンドウ） ── */
    .chat-famicom {
      /* DQ風: 黒背景 + 白の二重枠 */
      background: #000010;
      border: 4px solid #f8f8f8;
      outline: 4px solid #6868a8;
      outline-offset: 0px;
      box-shadow:
        inset 0 0 0 2px #3838a0,
        0 0 24px rgba(56, 56, 160, 0.4);
      font-family: 'Courier New', 'MS Gothic', monospace;
      color: #f8f8f8;
      image-rendering: pixelated;
      width: 380px;
      max-height: 320px;
      border-radius: 0;
      padding: 0;
      position: fixed;
      bottom: 40px;
      right: 30px;
    }
    .chat-famicom #chat-header {
      background: transparent;
      border-bottom: none;
      padding: 0;
      height: 0;
      overflow: hidden;
    }
    .chat-famicom #chat-title {
      display: none;
    }
    .chat-famicom #chat-close {
      position: absolute;
      top: 6px;
      right: 8px;
      color: #6868a8;
      font-size: 14px;
      z-index: 5;
      background: none;
      border: none;
    }
    .chat-famicom #chat-close:hover {
      color: #f8f8f8;
    }
    .chat-famicom #chat-messages {
      background: transparent;
      min-height: 100px;
      max-height: 180px;
      padding: 16px 18px 8px 18px;
      overflow-y: auto;
    }
    .chat-famicom .chat-msg {
      font-size: 14px;
      line-height: 2.0;
      letter-spacing: 1px;
      margin-bottom: 4px;
    }
    .chat-famicom .chat-msg.ai-msg {
      color: #f8f8f8;
    }
    .chat-famicom .chat-msg.user-msg {
      color: #78f878;
      opacity: 1;
    }
    /* ネームボックス（DQ風: ウィンドウ上部にかぶる名前枠） */
    .nes-namebox {
      position: absolute;
      top: -14px;
      left: 16px;
      background: #000010;
      border: 3px solid #f8f8f8;
      outline: 3px solid #6868a8;
      padding: 3px 14px;
      font-size: 12px;
      color: #f8f8f8;
      font-family: 'Courier New', 'MS Gothic', monospace;
      letter-spacing: 2px;
      z-index: 5;
    }
    /* ▼カーソル（DQ風: ゆっくり点滅） */
    .nes-cursor {
      color: #f8f8f8;
      animation: nesBlink 0.7s step-end infinite;
    }
    @keyframes nesBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    /* 入力欄（DQ風: 画面下部のコマンド入力） */
    .chat-famicom #chat-input-row {
      border-top: 2px solid #3838a0;
      padding: 10px 14px;
      background: rgba(56, 56, 160, 0.15);
    }
    .chat-famicom #chat-input {
      background: transparent;
      border: none;
      border-bottom: 2px solid #6868a8;
      color: #f8f8f8;
      font-family: 'Courier New', 'MS Gothic', monospace;
      font-size: 14px;
      letter-spacing: 1px;
      padding: 4px 2px;
    }
    .chat-famicom #chat-input::placeholder {
      color: #4848a8;
    }
    .chat-famicom #chat-input:focus {
      border-bottom-color: #f8f8f8;
    }
    /* ▶ プロンプト */
    #nes-prompt {
      color: #f8d860;
      font-size: 14px;
      margin-right: 4px;
    }

    /* ── グリッチモード（Win95ベース + 一時切り替え） ── */
    .chat-glitch-mode {
      animation: glitchShake 0.1s infinite;
    }
    @keyframes glitchShake {
      0%   { transform: translateY(0) scale(1); }
      25%  { transform: translateY(-1px) scale(1); }
      50%  { transform: translateY(1px) scale(1); }
      75%  { transform: translateY(-0.5px) scale(1); }
      100% { transform: translateY(0) scale(1); }
    }
    /* グリッチ一時テーマ切り替え */
    .gmode-dos #chat-header { background: #000 !important; }
    .gmode-dos #chat-messages { background: #000 !important; color: #00ff00 !important; }
    .gmode-mac #chat-header {
      background: repeating-linear-gradient(0deg, #000 0px, #000 1px, #f5f5dc 1px, #f5f5dc 3px) !important;
    }

    /* ── Telepathy / Sculpt / Quantum オーバーレイ ── */
    #chat-tp-overlay {
      position: fixed;
      inset: 0;
      z-index: 9998;
      pointer-events: none;
    }
    #chat-tp-bar {
      position: fixed;
      bottom: 0;
      left: 0; right: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 20px;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(12px);
      pointer-events: auto;
      transition: opacity 0.5s ease;
    }
    #chat-tp-input {
      flex: 1;
      max-width: 500px;
      background: transparent;
      border: none;
      /* a11y-2026-04-28 v1: non-text contrast — 0.3 → 0.55 */
      border-bottom: 1px solid rgba(255,255,255,0.55);
      color: #fff;
      font-size: 16px;
      padding: 8px 4px;
      /* a11y-2026-04-28 v1: outline:none は :focus-visible で復活 */
      outline: none;
      font-family: 'Courier New', monospace;
    }
    /* a11y-2026-04-28 v1: テレパシーバーのフォーカス可視化 */
    #chat-tp-input:focus-visible {
      outline: 2px solid #00ffff;
      outline-offset: 4px;
      border-bottom-color: rgba(255,255,255,0.9);
    }
    #chat-tp-close {
      background: none;
      border: none;
      color: #666;
      font-size: 20px;
      cursor: pointer;
      margin-left: 16px;
      padding: 4px 8px;
    }

    /* ── 二進数メッセージ演出 ── */
    .binary-msg {
      font-family: 'Courier New', monospace !important;
      color: #00FF00 !important;
      text-shadow: 0 0 6px #00FF00 !important;
      letter-spacing: 1px;
    }

/* ── Footer ── */
.site-footer {
    position: relative; z-index: 10;
    margin-top: 0; text-align: center;
}
/* ── 最小化状態 ── */
.site-footer--mini .footer-toggle {
    display: inline-block; cursor: pointer;
    /* a11y-2026-04-28 v1: contrast — was 0.15 (1.4:1) → 0.55 (~4.7:1) */
    font-size: 14px; color: rgba(255,255,255,0.55);
    padding: 12px 20px; transition: color 0.3s;
    user-select: none;
}
.site-footer--mini .footer-toggle:hover { color: rgba(255,255,255,0.5); text-shadow: 0 0 8px rgba(0,255,255,0.3), 0 0 20px rgba(0,255,255,0.1); }
.site-footer--mini .footer-expanded {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}
/* ── 展開状態 ── */
.site-footer--open .footer-expanded {
    max-height: 120px; opacity: 1; padding: 8px 20px 16px;
}
/* a11y-2026-04-28 v1: contrast — was 0.4 → 0.7 (open状態の可視性確保) */
.site-footer--open .footer-toggle { color: rgba(255,255,255,0.7); }
.footer-brand {
    /* a11y-2026-04-28 v1: 8px → 11px / opacity 0.2 → 0.65 (small-text legibility) */
    font-family: 'Press Start 2P', monospace; font-size: 11px;
    color: rgba(255,255,255,0.65); margin-bottom: 8px;
}
.footer-links {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px;
}
.footer-link {
    /* a11y-2026-04-28 v1: 9px → 12px / opacity 0.25 → 0.7 + underline (link affordance) */
    font-size: 12px; color: rgba(255,255,255,0.7); text-decoration: underline;
    transition: color 0.3s;
}
.footer-link:hover { color: rgba(255,255,255,0.9); }
.footer-stripe {
    /* a11y-2026-04-28 v1: 8px → 10px / opacity 0.15 → 0.55 */
    font-size: 10px; color: rgba(255,255,255,0.55);
}

/* ── Cart Drawer ── */
#cart-drawer {
    position: fixed;
    /* mobile-ux-2026-04-28 v1: safe-area top + 高さも safe-area 分減らす */
    top: env(safe-area-inset-top, 0px);
    right: -360px;
    width: 340px;
    max-width: 90vw;
    height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    background: rgba(10, 10, 14, 0.97);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
#cart-drawer.cart-drawer-open {
    right: 0;
}

.cart-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px;
    /* 2026-05-09: 司「カート UI をコア・テーマに」 — cyan 単色 → 黒地 + RGBCMY 微弱グラデ rule */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}
.cart-drawer-header::after {
    content: '';
    position: absolute;
    left: 20px; right: 20px; bottom: -1px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255,  28,  28, 0) 0%,
        rgba(255,  28,  28, 0.32) 14%,
        rgba(  0, 220,   0, 0.28) 32%,
        rgba(  0, 140, 255, 0.30) 50%,
        rgba(  0, 220, 255, 0.28) 68%,
        rgba(255,   0, 210, 0.28) 84%,
        rgba(255, 240,   0, 0) 100%
    );
    opacity: 0.42;
    pointer-events: none;
}
/* 2026-05-05: カート見出しを Orbitron uppercase + cyan アクセント */
/* 2026-05-09: コア・テーマ — 純白寄りに / 色は drawer-header の rule に集約 */
.cart-drawer-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    color: rgba(240, 240, 244, 0.9);
    letter-spacing: 0.36em;
    text-transform: uppercase;
}
.cart-drawer-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}
.cart-drawer-close:hover { color: #fff; }

.cart-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* a11y-2026-04-28 v1: contrast — was 0.3 (2.5:1) → 0.7 (~6.6:1) */
    color: rgba(255, 255, 255, 0.7);
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 0.05em;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.cart-item-info { flex: 1; }
.cart-item-name {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 300;
}
.cart-item-meta {
    font-size: 10px;
    /* a11y-2026-04-28 v1: contrast — was 0.35 → 0.6 */
    color: rgba(255, 255, 255, 0.6);
    margin-top: 3px;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.cart-item-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cart-item-price {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}
.cart-item-remove {
    background: none;
    border: none;
    /* a11y-2026-04-28 v1: contrast — was 0.25 → 0.6 */
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.2s;
}
.cart-item-remove:hover { color: #ff4444; }

.cart-footer {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cart-total {
    display: flex;
    justify-content: space-between;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.15em;
    margin-bottom: 16px;
}
/* 2026-05-09: 司「コア・テーマ」 — 黒地 + 細線 + RGBCMY 微弱アクセント */
.cart-checkout-btn {
    width: 100%;
    padding: 14px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.3s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}
.cart-checkout-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(255,  28,  28, 0.10) 0%,
        rgba(  0, 220,   0, 0.08) 25%,
        rgba(  0, 140, 255, 0.10) 50%,
        rgba(255,   0, 210, 0.08) 75%,
        rgba(255, 240,   0, 0.10) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    mix-blend-mode: screen;
}
.cart-checkout-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.78);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 18px rgba(0, 220, 255, 0.10),
        0 0 26px rgba(255,   0, 210, 0.06);
}
.cart-checkout-btn:hover::before { opacity: 1; }
.cart-checkout-btn:disabled,
.cart-checkout-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.18);
}
.cart-checkout-btn:disabled::before,
.cart-checkout-btn[disabled]::before { opacity: 0; }
/* checkout 待ち (Shopify variant 未投入) も静かに美しく */
.cart-checkout-btn.is-pending {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.72);
    cursor: progress;
}
.cart-checkout-btn.is-pending::before {
    opacity: 0.45;
    animation: checkoutPendingShimmer 6.4s ease-in-out infinite;
}
@keyframes checkoutPendingShimmer {
    0%, 100% { transform: translateX(-3%); }
    50%      { transform: translateX(3%); }
}
.cart-stripe-note {
    font-size: 10px;
    /* a11y-2026-04-28 v1: contrast — was 0.25 (2.0:1) → 0.6 (~5.0:1) */
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-top: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

/* ── Cart Toast ── */
/* 2026-05-09: コア・テーマ — 黒地 + 細線 + RGBCMY 縁取り (微弱) */
.cart-toast {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: rgba(10, 10, 14, 0.96); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.10); border-radius: 12px;
    padding: 12px 24px; color: #fff; font-size: 13px; font-family: sans-serif;
    z-index: 10000; opacity: 0; transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0  0 14px rgba(  0, 220, 255, 0.06),
        0  0 22px rgba(255,   0, 210, 0.04);
}
.cart-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════════
   MOBILE — P3 完全対応
   ═══════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
    /* ── レイアウト: スクロール可能に ── */
    .singularity-content {
        justify-content: flex-start;
        /* 2026-04-26 v2: 司「下に下げて」+「服との余白詰めて」 */
        /* mobile-ux-2026-04-28 v1: safe-area-inset 注入 (iPhone X+ ホームバー対応) */
        padding:
            calc(96px + env(safe-area-inset-top, 0px))
            12px
            calc(80px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
    }

    /* ── ブランド名 ── */
    .brand-name {
        font-size: clamp(19px, 5.9vw, 29px);
        letter-spacing: calc(var(--brand-letter-gap-mobile) + 0.02em);
        gap: 0.05em;
    }

    /* ── ロゴ ── */
    .logo-holo-wrap {
        width: clamp(50px, 14vw, 80px);
        margin: 2px auto 0;
    }

    body.inryoku-speaking #p6-canvas { filter: none; }

    body.inryoku-speaking .hologram-logo {
        transform: none;
    }

    body.inryoku-speaking .logo-sphere-3d {
        transform: translateZ(0) scale(1);
    }

    /* ── タップヒント ── */
    .tap-hint {
        font-size: 7px;
        bottom: -22px;
    }

    /* ── プリズムライン ── */
    .prism-line {
        width: 160px;
    }

    /* ── カルーセル モバイル ── */
    .carousel-wrap {
      max-width: 100%;
      padding: 0;
      /* mobile-ux-2026-04-28 v1: 縦スクロールは OS、横ジェスチャーは JS 受け
         (passive:true touchmove と縦スクロールの競合を解消) */
      touch-action: pan-y;
    }
    .carousel-scene {
      /* 2026-04-24: mobile も大きく 108→140 / 170→220 */
      width: 140px;
      height: 220px;
      perspective: 1100px;
      /* 2026-04-26: 余白詰め 60→16 */
      margin-top: 0;
    }
    .carousel-item {
      /* 2026-05-06: 商品を主役に戻す。118→136px */
      width: 136px;
      left: 2px;
    }
    .item-grid {
      margin-top: 14px;
      /* mobile-ux-2026-04-28 v1: 横回転ジェスチャー優先・縦は OS 委譲 */
      touch-action: pan-y;
    }
    .product-card-img {
      border-radius: 12px;
    }
    .product-card-name {
      /* 2026-04-30: 階層 — 13/sans/500 */
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.02em;
      white-space: normal;    /* 長い名前の改行を許可 */
      word-break: normal;
      line-height: 1.3;
    }
    /* 2026-04-30: price 11/mono, status 9/mono/0.55 */
    .product-card-price {
      font-family: var(--font-mono);
      font-size: 11px;
      margin-top: 6px;
    }
    .product-card-status {
      font-family: var(--font-display);
      font-size: 8px;
      letter-spacing: 0.32em;
      opacity: 0.85;
    }
    /* モバイル: 問い合わせ・メール */
    .contact-input, .contact-textarea {
      font-size: 16px; /* iOS zoom防止 */
    }
    .email-signup-input {
      font-size: 16px;
    }

    /* ── カート・ミュート・BGM ボタン ──
       mobile-ux-2026-04-30 v1: 司 critical-2 — WCAG 2.5.5 / Apple HIG 44x44 必達。
       inline style (JS で padding:10px width:auto) を !important で上書きし、
       min-width/min-height を確保。box-sizing:border-box で padding を含めて 44px。 */
    #cart-icon, #mute-btn, #bgm-btn {
        padding: 10px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #cart-icon span, #mute-btn span, #bgm-btn span {
        font-size: 16px !important;
    }
    /* contact-toggle: 既に 78x44 確保済 / 司 critical-2 — 文字 11→13 */
    .contact-toggle {
        font-size: 13px !important;
    }
    /* 司 critical-1: カルーセル横はみ出し対策。
       375 viewport で RING_Z=200 (JS) のため side card が左右へ ~141px はみ出す。
       CSS-only fix: scene を scale(0.62) して全 translateZ を比例縮小 (radius ~124px)。
       front card は JS 側 scale(1.45)*0.62 = 0.9 で実用的サイズ維持。
       desktop は無変更 (mobile media query 内のみ)。 */
    @media (max-width: 480px) {
        .carousel-scene {
            transform: scale(0.76);
            transform-origin: 50% 40%;
        }
        /* scale で生じる視覚的余白を圧縮 (margin-top 16→4) */
        .carousel-wrap { padding: 0; }
    }
    /* 司 critical-3: 下部 UI 密集 (lang-toggle bottom:10 fixed と
       contact-toggle/email-signup の近接). singularity-content の bottom padding
       を 80→128 に増やして lang-toggle と干渉しない安全帯を確保。 */
    .singularity-content {
        padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
    }
    /* 司 critical-2: sample-switcher (dev-only / p3_test.html) tap target */
    #sample-switcher a {
        min-width: 44px;
        min-height: 36px;
        padding: 10px 8px !important;
        box-sizing: border-box;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* ── チャットUI: フル幅・下部固定 ── */
    #inryoku-chat {
        left: 8px;
        right: 8px;
        /* mobile-ux-2026-04-28 v1: safe-area-inset (iPhone X+ ホームインジケーター) */
        bottom: env(safe-area-inset-bottom, 0px);
        width: auto;
        max-height: 50vh;
        border-radius: 12px 12px 0 0 !important;
    }
    #chat-messages {
        min-height: 120px;
        max-height: 200px;
    }
    #chat-input {
        font-size: 16px; /* iOS: 16px未満でズームされる */
    }

    /* ── テレパシーバー ── */
    #chat-tp-input {
        font-size: 16px;
    }

    /* ── フッター ── */
    .site-footer {
        margin-top: 30px;
    }

    /* ── 商品モーダル ── */
    .product-detail {
        max-height: 90vh;
        border-radius: 12px 12px 0 0;
    }
    .product-detail-inner {
        flex-direction: column;
    }
    .product-image-wrap {
        min-height: 180px;
        padding: 16px;
        border-radius: 12px 12px 0 0;
    }
    .product-info-wrap {
        padding: 20px 16px;
    }
    .product-title {
        font-size: 16px;
    }
    .product-price-tag {
        font-size: 20px;
    }
    .size-btn {
        /* mobile-ux-2026-04-28 v1: tap target 40 → 44 (Apple HIG / WCAG 2.5.5)
           min-* で確実に確保 (子要素や font 効果で縮まないよう) */
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 12px;
    }
}

    /* ── 配送情報 & サイズガイドリンク ── */
    .product-shipping-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 12px;
      padding: 10px 0;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .product-shipping-info span {
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      font-size: 11px;
      font-weight: 300;
      color: rgba(255,255,255,0.45);
      letter-spacing: 0.03em;
    }
    .size-guide-toggle {
      display: inline-block;
      margin-top: 12px;
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      font-size: 11px;
      font-weight: 300;
      color: rgba(255,255,255,0.4);
      cursor: pointer;
      border-bottom: 1px solid rgba(255,255,255,0.12);
      transition: color 0.2s ease;
    }
    .size-guide-toggle:hover {
      color: rgba(255,255,255,0.8);
    }
    .size-guide-table {
      margin-top: 12px;
      animation: fadeSlideIn 0.3s ease;
    }
    .size-guide-table table {
      width: 100%;
      border-collapse: collapse;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 11px;
    }
    .size-guide-table th, .size-guide-table td {
      padding: 6px 8px;
      text-align: center;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.5);
    }
    .size-guide-table th {
      color: rgba(255,255,255,0.7);
      font-weight: 500;
      letter-spacing: 0.1em;
    }
    .size-guide-table td:first-child {
      text-align: left;
      color: rgba(255,255,255,0.35);
      font-size: 10px;
    }
    .size-guide-note {
      font-size: 9px;
      color: rgba(255,255,255,0.25);
      margin-top: 6px;
    }
    @keyframes fadeSlideIn {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }

/* ── Email Signup ── */
.email-signup {
    text-align: center;
    /* 2026-04-19: gap利用のため個別 margin-top 削除 */
    margin-top: 0;
    padding: 8px 20px 0;
    position: relative;
}
/* ── メール欄RGBCMY静かな星 ── */
.form-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--size);
    height: var(--size);
    background: var(--color);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 calc(var(--size) * 2) var(--color);
    transform: translate(var(--ox), var(--oy));
    animation: formTwinkle var(--dur) var(--delay) ease-in-out infinite;
    pointer-events: none;
}
/* 普段: ゆっくり明滅するだけ */
@keyframes formTwinkle {
    0%, 100% { opacity: 0.08; }
    50% { opacity: 0.35; }
}

/* ── アクション時ビッグバン粒子 ── */
/* 2026-04-22: VIEW ボタン (前面カードの下に浮かぶ) */
.card-view-btn {
    position: absolute;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%) translateY(4px);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    font-weight: 500;
    color: rgba(240, 240, 242, 0.92);
    background: rgba(14, 14, 18, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 7px 14px 6px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.16,1,0.3,1), border-color 0.25s ease, background 0.25s ease;
    pointer-events: auto;
    z-index: 30;
}
.card-view-btn.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.card-view-btn:hover {
    border-color: rgba(255, 255, 255, 0.48);
    background: rgba(24, 24, 28, 0.85);
}

.bang-particle {
    position: fixed;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 1;
    animation: bangExplode 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes bangExplode {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    60% { opacity: 0.6; }
    100% { transform: translate(var(--bx), var(--by)) scale(0); opacity: 0; }
}
.email-signup-label {
    font-family: 'Press Start 2P', monospace;
    /* a11y-2026-04-28 v1: 9px → 11px / opacity 0.4 → 0.75 (Press Start 2P legibility) */
    font-size: 10px;
    color: rgba(255,255,255,0.78);
    letter-spacing: 0.28em;
    margin-bottom: 10px;
    text-shadow: 0 0 18px rgba(0,255,255,0.10);
    animation: labelPulse 4s ease-in-out infinite;
}
@keyframes labelPulse {
    /* a11y-2026-04-28 v1: pulse range 0.35-0.55 → 0.7-0.9 (常時 4.5:1 以上維持) */
    0%, 100% { color: rgba(255,255,255,0.7); }
    50% { color: rgba(255,255,255,0.9); text-shadow: 0 0 25px rgba(0,255,255,0.2); }
}
.email-signup-sub {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    /* a11y-2026-04-28 v1: contrast — was 0.25 → 0.6 */
    color: rgba(255,255,255,0.6);
    margin-bottom: 20px;
}
.email-signup-row {
    display: flex;
    gap: 8px;
    max-width: 356px;
    margin: 0 auto;
}
.email-signup-input {
    flex: 1;
    background: transparent;
    /* a11y-2026-04-28 v1: non-text contrast — border 0.15 → 0.4 */
    border: 1px solid rgba(255,255,255,0.4);
    border-right: 1px solid rgba(255,255,255,0.24);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    /* mobile-ux-2026-04-28 v1: iOS auto-zoom 防止 — base 13 → 16 (iPad横でも維持) */
    font-size: 16px;
    padding: 13px 18px;
    border-radius: 999px;
    /* a11y-2026-04-28 v1: outline:none は :focus-visible で復活させる */
    outline: none;
    transition: border-color 0.3s;
}
/* a11y-2026-04-28 v1: focus-visible でシアンリング復活 (キーボード可視性) */
.email-signup-input:focus-visible {
    outline: 2px solid #00ffff;
    outline-offset: 2px;
    border-color: rgba(255,255,255,0.7);
}
.email-signup-input:focus:not(:focus-visible) {
    border-color: rgba(255,255,255,0.7);
}
.email-signup-input::placeholder {
    /* a11y-2026-04-28 v1: placeholder contrast — was 0.2 → 0.55 */
    color: rgba(255,255,255,0.55);
}
.email-signup-btn {
    background: transparent;
    /* a11y-2026-04-28 v1: non-text contrast — border 0.15 → 0.4 / text 0.5 → 0.75 */
    border: 1px solid rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    letter-spacing: 0.16em;
    padding: 13px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s;
}
.email-signup-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.7);
}
.email-signup-status {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    /* a11y-2026-04-28 v1: contrast — was 0.4 → 0.75 (status は確実に読めるべき) */
    color: rgba(255,255,255,0.75);
    margin-top: 8px;
    min-height: 16px;
}

/* ══════════════════════════════════════════════
   CONTACT FORM
   ══════════════════════════════════════════════ */
.contact-form {
    text-align: center;
    margin-top: 0;
    padding: 0 20px;
}
.contact-toggle {
    font-family: 'Press Start 2P', monospace;
    /* mobile-ux-2026-04-28 v1: 9px → 11px (small-text legibility) */
    /* a11y-2026-04-28 v1: opacity 0.3 → 0.7 (contrast) + cursor:pointer */
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: color 0.3s;
    /* a11y-2026-04-28 v1: tap target — div でも CSS 側で 44px 確保 */
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 12px;
}
.contact-toggle:hover {
    color: rgba(255,255,255,0.95);
    text-shadow: 0 0 12px rgba(0,255,255,0.2);
}
/* a11y-2026-04-28 v1: div ベースの toggle にも focus-visible を効かせる */
.contact-toggle:focus-visible {
    outline: 2px solid #00ffff;
    outline-offset: 2px;
}
.contact-body {
    max-width: 320px;
    margin: 12px auto 0;
    animation: fadeSlideIn 0.3s ease;
}
.contact-input, .contact-textarea {
    width: 100%;
    background: transparent;
    /* a11y-2026-04-28 v1: non-text contrast — border 0.12 → 0.4 */
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    /* mobile-ux-2026-04-28 v1: iOS auto-zoom 防止 — base 13 → 16 (iPad横でも維持) */
    font-size: 16px;
    padding: 10px 14px;
    /* a11y-2026-04-28 v1: outline:none は :focus-visible で復活させる */
    outline: none;
    transition: border-color 0.3s;
    margin-bottom: 8px;
    box-sizing: border-box;
}
/* a11y-2026-04-28 v1: focus-visible でシアンリング復活 */
.contact-input:focus-visible, .contact-textarea:focus-visible {
    outline: 2px solid #00ffff;
    outline-offset: 2px;
    border-color: rgba(255,255,255,0.7);
}
.contact-input:focus:not(:focus-visible),
.contact-textarea:focus:not(:focus-visible) {
    border-color: rgba(255,255,255,0.7);
}
.contact-input::placeholder, .contact-textarea::placeholder {
    /* a11y-2026-04-28 v1: placeholder contrast — was 0.2 → 0.55 */
    color: rgba(255,255,255,0.55);
}
.contact-textarea {
    resize: none;
    min-height: 60px;
}
.contact-submit-btn {
    width: 100%;
    background: transparent;
    /* a11y-2026-04-28 v1: non-text contrast — border 0.15 → 0.4 / text 0.5 → 0.75 */
    border: 1px solid rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.75);
    font-family: 'Press Start 2P', monospace;
    /* a11y-2026-04-28 v1: 9px → 11px (Press Start 2P legibility) */
    font-size: 11px;
    letter-spacing: 0.15em;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s;
}
.contact-submit-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.7);
}
.contact-status {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    /* a11y-2026-04-28 v1: contrast — was 0.4 → 0.75 (status は確実に読めるべき) */
    color: rgba(255,255,255,0.75);
    margin-top: 8px;
    min-height: 16px;
}

/* ══════════════════════════════════════════════
   THEME SWITCHER
   ══════════════════════════════════════════════ */
.theme-switcher {
    text-align: center;
    margin-top: 0;
    padding: 0 20px;
}
.theme-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.3em;
    margin-bottom: 10px;
}
.theme-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.theme-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-btn:hover {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.3);
}
.theme-btn--active {
    background: rgba(255,255,255,0.12);
    border-color: rgba(0,255,255,0.3);
    color: #fff;
    box-shadow: 0 0 12px rgba(0,255,255,0.15);
}

/* ══════════════════════════════════════════════
   MAC CARD STYLES — 4種ミックス（常時適用）
   ══════════════════════════════════════════════ */

/* ── STYLE 1: SYSTEM 1 — 初代Macダイアログ ── */
.mac-system1 .product-card-img {
    border-radius: 6px;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 2px solid #000;
    box-shadow: 3px 3px 0 #000;
    position: relative;
    padding-top: 12px;
}
.mac-system1 .product-card-img::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 12px;
    background: repeating-linear-gradient(0deg, #fff 0px, #fff 1px, #000 1px, #000 2px);
    border-radius: 4px 4px 0 0;
    border-bottom: 2px solid #000;
}
.mac-system1 .product-card-img img {
    mix-blend-mode: multiply;
}
.mac-system1 .product-card-name {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 8px;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.9);
}
.mac-system1 .product-card-price {
    font-family: 'Geneva', monospace;
    font-size: 8px;
    color: rgba(255,255,255,0.7);
}
.mac-system1.carousel-front .product-card-img {
    box-shadow: 4px 4px 0 #000;
}

/* ── STYLE 2: MAC OS 9 — Platinumウィンドウ ── */
.mac-os9 .product-card-img {
    border-radius: 5px;
    background: linear-gradient(180deg, #e8e8e8, #c8c8c8);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #888;
    box-shadow: 0 1px 0 #fff inset, 0 2px 6px rgba(0,0,0,0.5);
    position: relative;
    padding-top: 14px;
}
.mac-os9 .product-card-img::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 14px;
    background: linear-gradient(180deg, #ddd, #bbb);
    border-bottom: 1px solid #999;
    border-radius: 5px 5px 0 0;
}
.mac-os9 .product-card-img::after {
    content: '';
    position: absolute;
    top: 5px; left: 5px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #aaa;
    border: 0.5px solid #888;
    box-shadow: 7px 0 0 #aaa, 14px 0 0 #aaa;
}
.mac-os9 .product-card-name {
    font-family: 'Charcoal', 'Geneva', 'Lucida Grande', sans-serif;
    font-size: 8px;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
}
.mac-os9 .product-card-price {
    font-family: 'Geneva', sans-serif;
    font-size: 8px;
    color: rgba(255,255,255,0.6);
}
.mac-os9.carousel-front .product-card-img {
    box-shadow: 0 1px 0 #fff inset, 0 4px 12px rgba(0,0,0,0.6);
}

/* ── STYLE 3: iMAC G3 — ボンダイブルー半透明 ── */
.mac-imacg3 .product-card-img {
    border-radius: 14px;
    background: rgba(0, 160, 200, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 2px solid rgba(0, 180, 220, 0.35);
    box-shadow: 0 4px 16px rgba(0, 160, 200, 0.12), inset 0 0 20px rgba(0, 180, 220, 0.06);
    position: relative;
}
.mac-imacg3 .product-card-img::before {
    content: '';
    position: absolute;
    top: 5px; left: 50%; transform: translateX(-50%);
    width: 8px; height: 3px;
    border-radius: 2px;
    background: rgba(0, 200, 240, 0.4);
}
.mac-imacg3 .product-card-img img {
    filter: drop-shadow(0 2px 6px rgba(0, 160, 200, 0.3));
}
.mac-imacg3 .product-card-name {
    font-family: 'Charcoal', 'Geneva', -apple-system, sans-serif;
    font-size: 8px;
    color: rgba(0, 220, 255, 0.9);
    text-shadow: 0 0 6px rgba(0, 200, 240, 0.3);
}
.mac-imacg3 .product-card-price {
    font-family: 'Geneva', sans-serif;
    font-size: 8px;
    color: rgba(0, 200, 240, 0.5);
}
.mac-imacg3.carousel-front .product-card-img {
    border-color: rgba(0, 200, 240, 0.5);
    box-shadow: 0 6px 24px rgba(0, 160, 200, 0.2), inset 0 0 20px rgba(0, 180, 220, 0.08),
                0 0 30px rgba(0, 200, 240, 0.08);
}

/* ── STYLE 4: APPLE II — グリーンモニタ ── */
.mac-apple2 .product-card-img {
    border-radius: 8px;
    background: #001a00;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 2px solid #2a2a2a;
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.06), inset 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
}
.mac-apple2 .product-card-img::before {
    content: ']LIST';
    position: absolute;
    top: 4px; left: 6px;
    font-family: monospace;
    font-size: 5px;
    color: #0f0;
    opacity: 0.5;
}
.mac-apple2 .product-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 40, 0, 0.12) 2px, rgba(0, 40, 0, 0.12) 3px);
    pointer-events: none;
}
.mac-apple2 .product-card-img img {
    filter: none;
}
.mac-apple2 .product-card-name {
    font-family: monospace;
    font-size: 8px;
    color: #0f0;
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.3);
}
.mac-apple2 .product-card-price {
    font-family: monospace;
    font-size: 8px;
    color: rgba(0, 255, 0, 0.5);
}
.mac-apple2.carousel-front .product-card-img {
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.5);
}
.mac-apple2.carousel-front .product-card-img img {
    filter: none;
}

/* ══════════════════════════════════════════════
   Windows 95 THEME
   ══════════════════════════════════════════════ */
body[data-theme="win95"] .product-card-img {
    border-radius: 0;
    background: #c0c0c0;
    backdrop-filter: none;
    border: 2px outset #fff;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff;
}
body[data-theme="win95"] .product-card-img img {
    mix-blend-mode: multiply;
}
body[data-theme="win95"] .carousel-item.carousel-front .product-card-img {
    border: 2px inset #fff;
    box-shadow:
        inset 1px 1px 0 #808080,
        inset -1px -1px 0 #dfdfdf,
        2px 2px 0 #000;
}
body[data-theme="win95"] .product-card-name {
    font-family: 'MS Sans Serif', 'Arial', sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #c0c0c0;
    letter-spacing: 0;
    text-transform: none;
}
body[data-theme="win95"] .product-card-price {
    font-family: 'MS Sans Serif', 'Arial', sans-serif;
    font-size: 10px;
    color: #00ff00;
}
body[data-theme="win95"] .product-modal .product-detail {
    border-radius: 0;
    background: #c0c0c0;
    backdrop-filter: none;
    border: 2px outset #fff;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff;
}
body[data-theme="win95"] .product-modal .product-detail * {
    color: #000;
}
body[data-theme="win95"] .product-modal .product-close-btn {
    border-radius: 0;
    background: #c0c0c0;
    border: 2px outset #fff;
    color: #000;
}
body[data-theme="win95"] .email-signup-input {
    border-radius: 0;
    background: #fff;
    border: 2px inset #808080;
    color: #000;
    font-family: 'MS Sans Serif', Arial, sans-serif;
}
body[data-theme="win95"] .email-signup-input::placeholder {
    color: #808080;
}
body[data-theme="win95"] .email-signup-btn {
    border-radius: 0;
    background: #c0c0c0;
    border: 2px outset #fff;
    color: #000;
    font-family: 'MS Sans Serif', Arial, sans-serif;
}
body[data-theme="win95"] .email-signup-btn:hover {
    background: #d4d4d4;
}
body[data-theme="win95"] .email-signup-label {
    font-family: 'MS Sans Serif', Arial, sans-serif;
    color: #00ffff;
    text-shadow: 1px 1px 0 #008080;
}
body[data-theme="win95"] .email-signup-sub {
    color: rgba(255,255,255,0.5);
}
body[data-theme="win95"] #cart-icon,
body[data-theme="win95"] #mute-btn,
body[data-theme="win95"] #bgm-btn {
    border-radius: 0 !important;
    background: #c0c0c0 !important;
    backdrop-filter: none !important;
    border: 2px outset #fff !important;
    box-shadow: none !important;
}
body[data-theme="win95"] #cart-icon span,
body[data-theme="win95"] #mute-btn span,
body[data-theme="win95"] #bgm-btn span {
    filter: grayscale(1) contrast(2);
}
body[data-theme="win95"] .theme-btn {
    border-radius: 0;
    border: 2px outset #fff;
    background: #c0c0c0;
    color: #000;
}
body[data-theme="win95"] .theme-btn--active {
    border: 2px inset #808080;
    background: #a0a0a0;
    box-shadow: none;
}
body[data-theme="win95"] .theme-label {
    font-family: 'MS Sans Serif', Arial, sans-serif;
    color: #00ff00;
}
body[data-theme="win95"] .carousel-scene::before {
    border: 1px dashed rgba(0,255,0,0.15);
    box-shadow: none;
    animation: none;
    opacity: 0.5;
}

/* 2026-04-22: Press Start 2P 濫用を撤廃 — 本文は Inter Tight / IBM Plex Mono
   Press Start 2P は brand-name / brand-char / 小さなシステムラベル (tap-hint 等) に限定 */
.item-name,
.product-name,
.product-title,
.cart-drawer-title,
.cart-item-name,
.cart-empty,
.contact-toggle,
.drop-notification {
  font-family: 'Inter Tight', 'Helvetica Neue', 'Noto Sans JP', Arial, sans-serif !important;
  letter-spacing: 0.03em;
  font-weight: 500;
}
.item-price,
.product-price,
.product-price-tag,
.cart-item-price,
.cart-total,
.cart-btn-price,
.binary-footer,
#cart-badge,
.email-signup-input,
.email-signup-status,
.size-label,
.size-btn,
.size-guide-toggle,
.product-shipping-info,
.stripe-badge,
.cart-stripe-note,
.cart-item-meta {
  font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace !important;
  letter-spacing: 0.04em;
}
.product-desc,
.product-specs,
.product-color,
.email-signup-label,
.email-signup-sub,
.contact-form label,
.contact-form input,
.contact-form textarea,
.contact-submit,
.cart-checkout-btn,
.add-to-cart-btn,
.cart-btn-text,
.tr-ctrl-btn,
.cart-toast,
.email-signup-btn,
.brand-truth {
  font-family: 'Inter Tight', 'Helvetica Neue', 'Noto Sans JP', Arial, sans-serif !important;
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* サイズは読みやすさキープ: 説明文はやや小さく調整 */
.product-desc,
.product-specs,
.email-signup-sub,
.cart-item-meta,
.size-guide-note {
  font-size: 9px !important;
  line-height: 1.7;
}
.item-price,
.cart-item-price,
.cart-stripe-note,
.binary-footer {
  font-size: 10px !important;
}
.product-price-tag,
.cart-total {
  font-size: 12px !important;
}

/* ═══════════════════════════════════════════════════════════
   a11y-2026-04-28 v1: グローバル focus-visible (C-4 / C-7)
   inryokü 美学 — シアン (#00ffff, CMY) でフォーカスリング統一
   :focus-visible だけに限定し、マウスクリック時には出さない
   ═══════════════════════════════════════════════════════════ */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
#cart-icon:focus-visible,
#mute-btn:focus-visible,
.footer-toggle:focus-visible,
.size-guide-toggle:focus-visible,
.carousel-item:focus-visible {
    outline: 2px solid #00ffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0,255,255,0.25);
}

/* a11y-2026-04-28 v1: div ベースの UI に cursor:pointer (C-4 CSS 側補完)
   HTML を <button> 化するのは別エージェント担当だが、CSS でクリック可能感は出す */
#cart-icon,
#mute-btn,
.contact-toggle,
.size-guide-toggle,
.footer-toggle,
.carousel-item {
    cursor: pointer;
}

/* a11y-2026-04-28 v1: skip-link (HTML 側で <a class="skip-link"> が追加されたら効く)
   先行で CSS 側を用意しておく — 副作用なし (該当要素なければ no-op) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #fff;
    color: #000;
    padding: 8px 16px;
    z-index: 10001;
    text-decoration: none;
    font-size: 14px;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #00ffff;
}

/* 2026-04-30: Canvas2D 星空が #root の不透明黒に隠されないよう透過化（body bg は #000 維持） */
#root.phase-3 { background: transparent !important; background-image: none !important; }

/* ═══════════════════════════════════════════════════════════
   2026-04-30: design refresh — philosophy copy + dual CTA
   ═══════════════════════════════════════════════════════════ */
/* 2026-05-05: 哲学コピー — レトロフューチャー (Orbitron + Yu Gothic / SF映画タイトル) */
.philosophy-copy {
  /* EN: Orbitron (幾何学SF) / JP: Yu Gothic (洗練ミニマル) */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.34em;
  color: rgba(220, 248, 255, 0.96);
  text-align: center;
  margin-top: 18px;
  position: relative;
  display: inline-block;
  align-self: center;
  text-shadow:
    -1px 0 rgba(255, 0, 240, 0.42),
    1px 0 rgba(0, 230, 255, 0.42),
    0 0 6px rgba(0, 230, 255, 0.32),
    0 0 14px rgba(0, 110, 220, 0.18),
    0 0 18px rgba(0, 0, 0, 0.85);
  animation: philoCRT 5.4s ease-in-out infinite;
}
.philosophy-copy::before {
  content: '> ';
  color: rgba(0, 255, 200, 0.62);
  letter-spacing: 0;
  margin-right: 6px;
  text-shadow:
    0 0 6px rgba(0, 255, 200, 0.55),
    0 0 14px rgba(0, 200, 180, 0.25);
}
.philosophy-copy::after {
  content: '▌';
  color: rgba(0, 255, 200, 0.85);
  margin-left: 8px;
  letter-spacing: 0;
  animation: philoCursor 1.06s steps(2, end) infinite;
  text-shadow: 0 0 8px rgba(0, 255, 200, 0.6);
}
@keyframes philoCursor {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes philoCRT {
  0%, 100% { transform: translateZ(0); filter: none; }
  46%      { transform: translate3d(0.6px, 0, 0); filter: brightness(1.06); }
  48%      { transform: translate3d(-0.4px, 0, 0); filter: brightness(0.95); }
  50%      { transform: translateZ(0); }
  82%      { transform: translate3d(-0.3px, 0, 0); }
  84%      { transform: translateZ(0); }
}

.philosophy-sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
  color: rgba(180, 240, 255, 0.58);
  text-align: center;
  margin-top: 10px;
  line-height: 1.6;
  letter-spacing: 0.42em;
  text-shadow:
    0 0 6px rgba(0, 230, 255, 0.20),
    0 0 12px rgba(0, 0, 0, 0.7);
}
.philosophy-sub::before {
  content: '// ';
  opacity: 0.55;
  letter-spacing: 0;
}
@media (prefers-reduced-motion: reduce) {
  .philosophy-copy { animation: none; }
  .philosophy-copy::after { animation: none; opacity: 0.7; }
}

.cta-pair {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 22px auto 28px;
  padding: 0 16px;
  flex-wrap: wrap;
}
.cta-btn {
  flex: 1;
  max-width: 180px;
  min-height: 48px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.32);
  color: rgba(255,255,255,0.92);
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: border-color 220ms ease, background 220ms ease;
}
.cta-btn:hover,
.cta-btn:focus-visible {
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.04);
  outline: none;
}
.cta-main {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
}
.cta-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
}

/* ═══════════════════════════════════════════════════════════
   2026-04-30: typography unification — UI/cart/form/CTA → sans
   レトロテーマ (mac-*, win95) は !important で別途上書きされるので干渉しない
   ═══════════════════════════════════════════════════════════ */
.cart-item-name,
.cart-item-meta,
.cart-item-price,
.cart-item-remove,
.contact-input,
.contact-textarea,
.contact-submit-btn,
#email-signup input,
#email-signup button {
  font-family: var(--font-sans);
}

/* ═══════════════════════════════════════════════════════════════
   2026-05-05: レトロフューチャー全体仕上げ
   - テキスト選択 / スクロールバー / フォーム / focus リングを cyan 統一
   ═══════════════════════════════════════════════════════════════ */

/* テキスト選択 */
::selection {
  background: rgba(0, 229, 255, 0.30);
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.7);
}

/* WebKit スクロールバー（cyan 細） */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.18);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.40); }

/* Firefox スクロールバー */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 229, 255, 0.18) rgba(255,255,255,0.02);
}

/* フォーム入力 — 端末風 */
.contact-input,
.contact-textarea,
#email-signup input[type="email"] {
  background: rgba(0, 229, 255, 0.03) !important;
  border: 1px solid rgba(0, 229, 255, 0.18) !important;
  border-radius: 0 !important;
  color: rgba(220, 248, 255, 0.95) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.06em;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.contact-input:focus,
.contact-textarea:focus,
#email-signup input[type="email"]:focus {
  outline: none !important;
  border-color: rgba(0, 229, 255, 0.62) !important;
  background: rgba(0, 229, 255, 0.06) !important;
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.32), 0 0 18px rgba(0, 229, 255, 0.20) !important;
}

/* インタラクティブ要素の focus リング統一 */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 1px solid rgba(0, 229, 255, 0.62);
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.30);
}

/* CONTACT トグル ボタン仕上げ */
.contact-toggle {
  font-family: var(--font-display) !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase;
}

/* SEND ボタン仕上げ */
.contact-submit-btn {
  font-family: var(--font-display) !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   2026-05-05: #2 十字カーソル — 視点の照準 (旧: 観測者の照準) [2026-05-09 改名]
   - 通常: 半透明 cyan の細十字 + 中心リング
   - インタラクティブ: 明るい cyan で同じ形（ホバー可能を伝える）
   - テキスト入力欄: text 既定維持
   ═══════════════════════════════════════════════════════════════ */
body {
  cursor:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cline x1='12' y1='4' x2='12' y2='9' stroke='%2300E5FF' stroke-width='1' opacity='0.55'/%3E%3Cline x1='12' y1='15' x2='12' y2='20' stroke='%2300E5FF' stroke-width='1' opacity='0.55'/%3E%3Cline x1='4' y1='12' x2='9' y2='12' stroke='%2300E5FF' stroke-width='1' opacity='0.55'/%3E%3Cline x1='15' y1='12' x2='20' y2='12' stroke='%2300E5FF' stroke-width='1' opacity='0.55'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='none' stroke='%2300E5FF' stroke-width='1' opacity='0.7'/%3E%3C/svg%3E") 12 12,
    crosshair;
}
a, button, [role="button"], [role="link"],
.cta-btn, .contact-toggle, .contact-submit-btn,
.product-card-img, .carousel-item,
#cart-icon, #mute-btn, #bgm-btn,
#inryoku-lang-toggle, #inryoku-lang-toggle button {
  cursor:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cline x1='14' y1='2' x2='14' y2='10' stroke='%2300E5FF' stroke-width='1.2' opacity='0.92'/%3E%3Cline x1='14' y1='18' x2='14' y2='26' stroke='%2300E5FF' stroke-width='1.2' opacity='0.92'/%3E%3Cline x1='2' y1='14' x2='10' y2='14' stroke='%2300E5FF' stroke-width='1.2' opacity='0.92'/%3E%3Cline x1='18' y1='14' x2='26' y2='14' stroke='%2300E5FF' stroke-width='1.2' opacity='0.92'/%3E%3Ccircle cx='14' cy='14' r='2.6' fill='none' stroke='%2300E5FF' stroke-width='1' opacity='0.9'/%3E%3Ccircle cx='14' cy='14' r='0.9' fill='%2300E5FF' opacity='0.85'/%3E%3C/svg%3E") 14 14,
    pointer;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], input[type="number"], textarea,
.contact-input, .contact-textarea, #email-input {
  cursor: text;
}

/* ═══════════════════════════════════════════════════════════════
   2026-05-05: #3 コーナー登録マーク (⌐ ¬ ⌐ ¬)
   - 重要な「枠」の四隅に細い L 字を描く（カメラビューファインダー風）
   - cart drawer / email signup / contact form の 3 箇所に適用
   ═══════════════════════════════════════════════════════════════ */
.reg-marks {
  position: relative;
}
.reg-marks::before {
  content: '';
  position: absolute;
  inset: -8px;
  pointer-events: none;
  --rmc: rgba(0, 229, 255, 0.45);
  --rms: 12px;
  --rmw: 1px;
  background:
    linear-gradient(var(--rmc), var(--rmc)) 0 0 / var(--rms) var(--rmw) no-repeat,
    linear-gradient(var(--rmc), var(--rmc)) 0 0 / var(--rmw) var(--rms) no-repeat,
    linear-gradient(var(--rmc), var(--rmc)) 100% 0 / var(--rms) var(--rmw) no-repeat,
    linear-gradient(var(--rmc), var(--rmc)) 100% 0 / var(--rmw) var(--rms) no-repeat,
    linear-gradient(var(--rmc), var(--rmc)) 0 100% / var(--rms) var(--rmw) no-repeat,
    linear-gradient(var(--rmc), var(--rmc)) 0 100% / var(--rmw) var(--rms) no-repeat,
    linear-gradient(var(--rmc), var(--rmc)) 100% 100% / var(--rms) var(--rmw) no-repeat,
    linear-gradient(var(--rmc), var(--rmc)) 100% 100% / var(--rmw) var(--rms) no-repeat;
}

/* 既存パーツに自動付与（CSS のみで完結） */
#cart-drawer,
#email-signup,
.contact-form {
  position: relative;
}
#cart-drawer::after,
#email-signup::after,
.contact-form::after {
  content: '';
  position: absolute;
  inset: -6px;
  pointer-events: none;
  --rmc: rgba(0, 229, 255, 0.36);
  --rms: 14px;
  --rmw: 1px;
  background:
    linear-gradient(var(--rmc), var(--rmc)) 0 0 / var(--rms) var(--rmw) no-repeat,
    linear-gradient(var(--rmc), var(--rmc)) 0 0 / var(--rmw) var(--rms) no-repeat,
    linear-gradient(var(--rmc), var(--rmc)) 100% 0 / var(--rms) var(--rmw) no-repeat,
    linear-gradient(var(--rmc), var(--rmc)) 100% 0 / var(--rmw) var(--rms) no-repeat,
    linear-gradient(var(--rmc), var(--rmc)) 0 100% / var(--rms) var(--rmw) no-repeat,
    linear-gradient(var(--rmc), var(--rmc)) 0 100% / var(--rmw) var(--rms) no-repeat,
    linear-gradient(var(--rmc), var(--rmc)) 100% 100% / var(--rms) var(--rmw) no-repeat,
    linear-gradient(var(--rmc), var(--rmc)) 100% 100% / var(--rmw) var(--rms) no-repeat;
  z-index: 1;
}
/* email-signup は元々 inset 影など複雑なので focus 中だけ強調 */
#email-signup:focus-within::after { --rmc: rgba(0, 229, 255, 0.78); }

/* 2026-05-05: 司「メール/コンタクトが服UIに被ってる」→ EC グリッドから離す */
#email-signup {
  margin-top: 120px !important;
}
.contact-form {
  margin-top: 56px !important;
  padding-bottom: 64px !important;
}
@media (max-width: 480px) {
  #email-signup { margin-top: 80px !important; }
  .contact-form { margin-top: 40px !important; padding-bottom: 48px !important; }
}

/* 2026-05-06: チャット内 質問候補チップ（粒子言語の世界観の中で） */
.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 4px 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 229, 255, 0.18);
}
.chat-suggestion {
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.30);
  color: rgba(220, 248, 255, 0.92);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 10px 5px;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
  border-radius: 0;
  white-space: nowrap;
}
.chat-suggestion:hover,
.chat-suggestion:focus-visible {
  border-color: rgba(0, 229, 255, 0.85);
  background: rgba(0, 229, 255, 0.12);
  color: #fff;
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   2026-05-06: ブランド名 idle アニメ パターン切替
   - 0 (default): 現状の charFloat + charGlow
   - 1 wave: 文字が波のように上下
   - 2 pulse: 全体が呼吸的に scale
   - 3 ripple: 文字を1つずつ glow 強める波
   - 4 still: 完全静止
   ═══════════════════════════════════════════════════════════════ */
@keyframes charWave {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-9px); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(7px); }
}
body[data-brandanim="1"] .brand-char {
  animation: charWave 3.2s ease-in-out infinite, charGlow 6.8s ease-in-out infinite !important;
}
body[data-brandanim="1"] .brand-char:nth-child(2) { animation-delay: 0.10s, 0s !important; }
body[data-brandanim="1"] .brand-char:nth-child(3) { animation-delay: 0.20s, 0s !important; }
body[data-brandanim="1"] .brand-char:nth-child(4) { animation-delay: 0.30s, 0s !important; }
body[data-brandanim="1"] .brand-char:nth-child(5) { animation-delay: 0.40s, 0s !important; }
body[data-brandanim="1"] .brand-char:nth-child(6) { animation-delay: 0.50s, 0s !important; }
body[data-brandanim="1"] .brand-char:nth-child(7) { animation-delay: 0.60s, 0s !important; }

@keyframes brandPulseScale {
  0%, 100% { transform: scale(1); filter: brightness(1.0); }
  50%      { transform: scale(1.10); filter: brightness(1.18); }
}
body[data-brandanim="2"] .brand-name {
  animation: brandPulseScale 3.0s ease-in-out infinite !important;
}
body[data-brandanim="2"] .brand-char {
  animation: charGlow 5.2s ease-in-out infinite !important;
}

@keyframes charRippleGlow {
  0%, 100% { filter: brightness(1.0) saturate(1.0); transform: translateY(0) scale(1); }
  20%      { filter: brightness(2.2) saturate(1.6); transform: translateY(-6px) scale(1.18); }
  40%      { filter: brightness(1.0) saturate(1.0); transform: translateY(0) scale(1); }
}
body[data-brandanim="3"] .brand-char {
  animation: charRippleGlow 3.5s ease-in-out infinite !important;
}
body[data-brandanim="3"] .brand-char:nth-child(2) { animation-delay: 0.55s !important; }
body[data-brandanim="3"] .brand-char:nth-child(3) { animation-delay: 1.10s !important; }
body[data-brandanim="3"] .brand-char:nth-child(4) { animation-delay: 1.65s !important; }
body[data-brandanim="3"] .brand-char:nth-child(5) { animation-delay: 2.20s !important; }
body[data-brandanim="3"] .brand-char:nth-child(6) { animation-delay: 2.75s !important; }
body[data-brandanim="3"] .brand-char:nth-child(7) { animation-delay: 3.30s !important; }

body[data-brandanim="4"] .brand-name,
body[data-brandanim="4"] .brand-char {
  animation: none !important;
}

/* 2026-05-06: brandanim=5 量子重ね合わせ
   - chars が複数位置に同時存在（text-shadow ゴースト）
   - 微小ランダム jitter（不確定性）
   - hover で焦点 → ゴーストが収束（純粋な文字に） [2026-05-09 観測 → 焦点]
*/
@keyframes brandQuantumGhost {
  0%   { text-shadow: -2.5px  1.5px 0 rgba(0,229,255,0.55), 2.5px -1.5px 0 rgba(255,0,255,0.55), 0 0 0 currentColor, 0 0 6px color-mix(in srgb, currentColor 30%, transparent); }
  20%  { text-shadow:  2px   -2.5px 0 rgba(0,229,255,0.55), -2.5px 1.5px 0 rgba(255,0,255,0.55), 0 0 0 currentColor, 0 0 6px color-mix(in srgb, currentColor 30%, transparent); }
  40%  { text-shadow: -1.5px  2.5px 0 rgba(0,229,255,0.55), 2.5px  0px 0 rgba(255,0,255,0.55), 0 0 0 currentColor, 0 0 6px color-mix(in srgb, currentColor 30%, transparent); }
  60%  { text-shadow:  2.5px  1px   0 rgba(0,229,255,0.55), -2px  -2.5px 0 rgba(255,0,255,0.55), 0 0 0 currentColor, 0 0 6px color-mix(in srgb, currentColor 30%, transparent); }
  80%  { text-shadow: -2px   -1.5px 0 rgba(0,229,255,0.55), 1.5px  2.5px 0 rgba(255,0,255,0.55), 0 0 0 currentColor, 0 0 6px color-mix(in srgb, currentColor 30%, transparent); }
  100% { text-shadow: -2.5px  1.5px 0 rgba(0,229,255,0.55), 2.5px -1.5px 0 rgba(255,0,255,0.55), 0 0 0 currentColor, 0 0 6px color-mix(in srgb, currentColor 30%, transparent); }
}
@keyframes brandQuantumJitter {
  0%,100% { transform: translate(0,0); }
  17%     { transform: translate(0.6px,-0.4px); }
  34%     { transform: translate(-0.4px,0.5px); }
  51%     { transform: translate(0.4px,0.4px); }
  68%     { transform: translate(-0.5px,-0.3px); }
  85%     { transform: translate(0.3px,-0.5px); }
}
body[data-brandanim="5"] .brand-char {
  animation:
    brandQuantumGhost 1.6s steps(5, end) infinite,
    brandQuantumJitter 0.32s steps(5, end) infinite,
    charGlow 6.8s ease-in-out infinite
    !important;
}
body[data-brandanim="5"] .brand-char:nth-child(2) { animation-delay: 0.07s, 0.05s, 0s !important; }
body[data-brandanim="5"] .brand-char:nth-child(3) { animation-delay: 0.14s, 0.10s, 0s !important; }
body[data-brandanim="5"] .brand-char:nth-child(4) { animation-delay: 0.21s, 0.15s, 0s !important; }
body[data-brandanim="5"] .brand-char:nth-child(5) { animation-delay: 0.28s, 0.20s, 0s !important; }
body[data-brandanim="5"] .brand-char:nth-child(6) { animation-delay: 0.35s, 0.25s, 0s !important; }
body[data-brandanim="5"] .brand-char:nth-child(7) { animation-delay: 0.42s, 0.30s, 0s !important; }

/* hover で焦点 → ゴーストが収束（純粋な文字に） [2026-05-09 観測 → 焦点] */
body[data-brandanim="5"] .brand-name:hover .brand-char,
body[data-brandanim="5"] .brand-name.is-active .brand-char {
  animation: charGlow 4s ease-in-out infinite !important;
  text-shadow: 0 0 0 currentColor, 0 0 6px color-mix(in srgb, currentColor 50%, transparent), 0 0 14px color-mix(in srgb, currentColor 25%, transparent) !important;
  transition: text-shadow 0.32s ease, transform 0.32s ease;
}

/* 2026-05-06: brandanim=6 Stellar Lock
   登場後は文字位置をほぼ固定し、星図の座標のように微光だけが巡る。 */
@keyframes brandStellarLock {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1) saturate(1);
  }
  38% {
    transform: translate3d(0, -1.4px, 0) scale(1.012);
    filter: brightness(1.16) saturate(1.16);
  }
  62% {
    transform: translate3d(0, 0.6px, 0) scale(0.996);
    filter: brightness(0.96) saturate(1.04);
  }
}

@keyframes brandStellarGlow {
  0%, 100% {
    text-shadow:
      0 0 0 currentColor,
      0 0 4px color-mix(in srgb, currentColor 34%, transparent),
      0 0 10px color-mix(in srgb, currentColor 16%, transparent);
  }
  42% {
    text-shadow:
      0 0 0 currentColor,
      0 0 7px color-mix(in srgb, currentColor 54%, transparent),
      0 0 16px color-mix(in srgb, currentColor 28%, transparent),
      0 0 24px rgba(255,255,255,0.08);
  }
}

@keyframes brandStellarScan {
  0%   { transform: translateX(-120%); opacity: 0; }
  14%  { opacity: 0.0; }
  28%  { opacity: 0.42; }
  46%  { opacity: 0.0; }
  100% { transform: translateX(120%); opacity: 0; }
}

body[data-brandanim="6"] .brand-name {
  animation: brandWordmarkDrift 16s ease-in-out infinite !important;
  overflow: visible;
}

body[data-brandanim="6"] .brand-name::before {
  opacity: 0.055;
  animation: brandScanDrift 18s linear infinite !important;
}

body[data-brandanim="6"] .brand-name::after {
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(0,255,255,0.0), rgba(255,255,255,0.42), rgba(255,0,255,0.0), transparent);
  filter: blur(0.5px);
  opacity: 0;
  animation: brandStellarScan 7.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

body[data-brandanim="6"] .brand-char {
  animation:
    brandStellarLock 9.8s ease-in-out infinite,
    brandStellarGlow 6.6s ease-in-out infinite
    !important;
}
body[data-brandanim="6"] .brand-char:nth-child(2) { animation-delay: -0.9s, -0.22s !important; }
body[data-brandanim="6"] .brand-char:nth-child(3) { animation-delay: -1.8s, -0.44s !important; }
body[data-brandanim="6"] .brand-char:nth-child(4) { animation-delay: -2.7s, -0.66s !important; }
body[data-brandanim="6"] .brand-char:nth-child(5) { animation-delay: -3.6s, -0.88s !important; }
body[data-brandanim="6"] .brand-char:nth-child(6) { animation-delay: -4.5s, -1.10s !important; }
body[data-brandanim="6"] .brand-char:nth-child(7) { animation-delay: -5.4s, -1.32s !important; }

/* ═══════════════════════════════════════════════════════════════
   2026-05-06: Point Link Language
   0=点が先に灯り、生成の順に 1=線へ変わる小さな発話。 [2026-05-09 観測 → 生成]
   星座ではなく「点と点を繋いだら線になる」の視覚化。
   ═══════════════════════════════════════════════════════════════ */
.point-link-language {
  position: absolute;
  left: 50%;
  top: calc(100% - 22px);
  width: min(330px, 82vw);
  height: 84px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 34;
  opacity: 0.68;
  mix-blend-mode: screen;
  filter: blur(0.05px);
  animation: pointLinkAntiGravity 13s ease-in-out infinite;
}

.pl-dot,
.pl-line {
  position: absolute;
  display: block;
  pointer-events: none;
}

.pl-dot {
  left: var(--x);
  top: var(--y);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c);
  box-shadow:
    0 0 3px color-mix(in srgb, var(--c) 64%, transparent),
    0 0 9px color-mix(in srgb, var(--c) 32%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  animation:
    pointLinkDotBirth 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    pointLinkDotBreathe 5.8s ease-in-out infinite,
    pointLinkFloat 9.5s ease-in-out infinite;
  animation-delay: calc(7.6s + var(--d)), calc(8.5s + var(--d));
}

.pl-line {
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: 0;
  transform-origin: 0 50%;
  transform: rotate(var(--r)) scaleX(0);
  border-top: 0.5px solid rgba(110, 245, 255, 0.26);
  background: none;
  box-shadow:
    0 0 3px rgba(0,255,255,0.11),
    0 0 8px rgba(0,255,255,0.08);
  opacity: 0;
  filter: blur(0.18px);
  animation:
    pointLinkLineBirth 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    pointLinkLineBreathe 6.8s ease-in-out infinite,
    pointLinkFloat 10.5s ease-in-out infinite;
  animation-delay: calc(7.6s + var(--d)), calc(9.0s + var(--d));
}

.pl-line::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: -1px;
  height: 2px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.22), transparent 70%);
  opacity: 0.18;
}

@keyframes pointLinkDotBirth {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.15);
    filter: blur(4px);
  }
  62% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1.18);
    filter: blur(0);
  }
  100% {
    opacity: 0.68;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}

@keyframes pointLinkDotBreathe {
  0%, 100% { filter: brightness(0.92); }
  50% { filter: brightness(1.28); }
}

@keyframes pointLinkLineBirth {
  0% {
    opacity: 0;
    transform: rotate(var(--r)) scaleX(0);
    filter: blur(1.4px);
  }
  30% {
    opacity: 0.12;
  }
  100% {
    opacity: 0.22;
    transform: rotate(var(--r)) scaleX(1);
    filter: blur(0.18px);
  }
}

@keyframes pointLinkLineBreathe {
  0%, 100% { opacity: 0.16; }
  50% { opacity: 0.32; }
}

@keyframes pointLinkFloat {
  0%, 100% {
    translate: 0 0;
  }
  33% {
    translate: calc(sin(var(--float)) * 2px) -2px;
  }
  66% {
    translate: calc(cos(var(--float)) * -2px) 1.5px;
  }
}

@keyframes pointLinkAntiGravity {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-4px);
  }
}

@media (max-width: 768px) {
  .point-link-language {
    top: calc(100% - 16px);
    width: min(286px, 78vw);
    height: 70px;
  }
  .pl-dot {
    width: 4px;
    height: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   2026-05-06: Product Birth Sequence
   商品カード本体の transform は JS carousel が毎フレーム制御するため、
   内側だけを静かに生成させる。
   ═══════════════════════════════════════════════════════════════ */
.item-grid:not(.store-materialized) .product-showcase,
.item-grid:not(.store-materialized) .product-card-info {
  opacity: 0;
}

@keyframes storeSceneAwaken {
  0% {
    filter: blur(10px) brightness(0.55) saturate(0.2);
  }
  44% {
    filter: blur(2px) brightness(1.35) saturate(1.25);
  }
  100% {
    filter: blur(0) brightness(1) saturate(1);
  }
}

@keyframes productMatterForm {
  0% {
    opacity: 0;
    clip-path: inset(50% 42% 50% 42% round 999px);
    transform: translateY(-26px) scale(0.38) rotateX(48deg);
    filter: blur(8px) brightness(1.65) saturate(0.55);
  }
  18% {
    opacity: 0.62;
    clip-path: inset(48% 8% 48% 8% round 999px);
    transform: translateY(-16px) scale(0.68) rotateX(34deg);
    filter: blur(4px) brightness(1.55) saturate(1.25);
  }
  45% {
    opacity: 0.94;
    clip-path: inset(18% 2% 18% 2% round 48% 48% 38% 38%);
    transform: translateY(2px) scale(0.94) rotateX(18deg);
    filter: blur(2px) brightness(1.28) saturate(1.15);
  }
  76% {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 42% 42% 34% 34%);
    transform: translateY(-7px) scale(1.035) rotateX(8deg);
    filter: blur(0.4px) brightness(1.14) saturate(1.08);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 42% 42% 34% 34%);
    transform: translateY(0) scale(1) rotateX(0deg);
    filter: blur(0) brightness(1) saturate(1);
  }
}

@keyframes productImageBirth {
  0% {
    opacity: 0;
    transform: translateY(-18px) scale(0.56) rotateX(32deg);
    filter: blur(8px) brightness(1.7) saturate(0.55);
  }
  24% {
    opacity: 0.52;
    transform: translateY(-6px) scale(0.78) rotateX(20deg);
    filter: blur(4px) brightness(1.45) saturate(1.2);
  }
  46% {
    opacity: 0.82;
    transform: translateY(3px) scale(0.98) rotateX(12deg);
    filter: blur(2px) brightness(1.24) saturate(1.12);
  }
  76% {
    opacity: 1;
    transform: translateY(-9px) scale(1.08) rotateX(7deg);
    filter: blur(0) brightness(1.14) saturate(1.08);
  }
  100% {
    opacity: 1;
    transform: translateY(-6px) scale(1.02) rotateX(10deg);
    filter: drop-shadow(0 18px 12px rgba(0,0,0,0.28));
  }
}

@keyframes productInfoDecode {
  0% {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
    letter-spacing: 0.34em;
  }
  72% {
    opacity: 0.88;
    transform: translateY(2px);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes productObservationBeam {
  0% {
    opacity: 0;
    transform: translateX(-132%) skewX(-14deg);
  }
  22% {
    opacity: 0.0;
  }
  43% {
    opacity: 0.42;
  }
  72% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(132%) skewX(-14deg);
  }
}

@keyframes storeProjectionCone {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.12) scaleY(0.25);
    filter: blur(10px);
  }
  18% {
    opacity: 0.30;
    transform: translateX(-50%) scaleX(0.58) scaleY(0.78);
    filter: blur(4px);
  }
  58% {
    opacity: 0.18;
    transform: translateX(-50%) scaleX(1) scaleY(1);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(1.08) scaleY(1.02);
    filter: blur(8px);
  }
}

@keyframes storeProjectionScan {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-24px) scaleX(0.15);
  }
  24% {
    opacity: 0.86;
    transform: translateX(-50%) translateY(42px) scaleX(0.7);
  }
  62% {
    opacity: 0.5;
    transform: translateX(-50%) translateY(182px) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(270px) scaleX(0.72);
  }
}

@keyframes hologramMembraneForm {
  0% {
    opacity: 0;
    transform: translate(-50%, 4px) rotateX(78deg) scaleX(0.18) scaleY(0.42);
    filter: blur(8px);
  }
  28% {
    opacity: 0.62;
    transform: translate(-50%, 1px) rotateX(78deg) scaleX(0.86) scaleY(0.72);
    filter: blur(2px);
  }
  72% {
    opacity: 0.30;
    transform: translate(-50%, 0) rotateX(78deg) scaleX(1.08) scaleY(0.84);
    filter: blur(0.4px);
  }
  100% {
    opacity: 0.18;
    transform: translate(-50%, 0) rotateX(78deg) scaleX(1) scaleY(0.78);
    filter: blur(0.2px);
  }
}

@keyframes hologramRasterRise {
  0% {
    opacity: 0;
    transform: translateY(38%) scaleY(0.25);
    background-position: 0 0, 0 0;
  }
  28% {
    opacity: 0.54;
  }
  68% {
    opacity: 0.22;
    transform: translateY(-6%) scaleY(1);
  }
  100% {
    opacity: 0.075;
    transform: translateY(0) scaleY(1);
    background-position: 0 -32px, 24px 0;
  }
}

@keyframes chromaticEdgeResolve {
  0% {
    opacity: 0;
    transform: translate3d(-1.5px, -12px, 0) scale(0.96);
    filter: blur(8px) saturate(2.1);
  }
  34% {
    opacity: 0.42;
    transform: translate3d(1.6px, -2px, 0) scale(1.02);
    filter: blur(2px) saturate(1.8);
  }
  72% {
    opacity: 0.18;
    transform: translate3d(-0.6px, 0, 0) scale(1.01);
    filter: blur(0.6px) saturate(1.2);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes productOrbitTrace {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotateX(79deg) scaleX(0.12) scaleY(0.72);
    border-color: rgba(255,255,255,0.0);
  }
  55% {
    opacity: 0.72;
    border-color: rgba(0,255,255,0.26);
  }
  100% {
    opacity: 0.5;
    transform: translateX(-50%) rotateX(79deg) scaleX(1) scaleY(0.72);
    border-color: rgba(255,255,255,0.06);
  }
}

.item-grid.store-materialized .carousel-scene {
  animation: storeSceneAwaken 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.item-grid.store-materialized::before {
  animation: none;
}

.item-grid.store-materialized::after {
  animation: none;
}

.item-grid.store-materialized .product-showcase {
  --entry-delay: calc(var(--entry-index, 0) * 64ms);
  animation: productMatterForm 1.85s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: var(--entry-delay);
}

.item-grid.store-materialized .product-showcase::before {
  display: none;
  left: 50%;
  bottom: 9%;
  width: 122%;
  height: 28%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center,
      rgba(0,255,255,0.22) 0%,
      rgba(255,0,255,0.12) 28%,
      rgba(255,255,0,0.08) 47%,
      transparent 72%),
    conic-gradient(from 30deg,
      rgba(255,0,0,0.12),
      rgba(0,255,0,0.10),
      rgba(0,0,255,0.12),
      rgba(0,255,255,0.16),
      rgba(255,0,255,0.14),
      rgba(255,255,0,0.12),
      rgba(255,0,0,0.12));
  mix-blend-mode: screen;
  animation: hologramMembraneForm 2.05s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--entry-delay) + 70ms);
}

.item-grid.store-materialized .product-showcase::after {
  display: none;
  inset: 0 2% 8%;
  z-index: 3;
  border-radius: 42% 42% 34% 34% / 24% 24% 40% 40%;
  background:
    repeating-linear-gradient(180deg,
      rgba(0,255,255,0.00) 0px,
      rgba(0,255,255,0.00) 5px,
      rgba(0,255,255,0.13) 6px,
      rgba(255,0,255,0.08) 7px,
      rgba(0,255,255,0.00) 9px),
    linear-gradient(110deg,
      transparent 0%,
      rgba(255,255,0,0.10) 24%,
      transparent 46%,
      rgba(0,255,255,0.12) 68%,
      transparent 100%);
  mix-blend-mode: screen;
  animation: hologramRasterRise 2.15s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--entry-delay) + 40ms);
}

.item-grid.store-materialized .product-card-img {
  overflow: hidden;
}

.item-grid.store-materialized .product-card-img::before {
  content: '';
  display: none;
  position: absolute;
  inset: -5%;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,0,0.10), transparent 34%),
    linear-gradient(90deg,
      rgba(255,0,0,0.10),
      transparent 28%,
      rgba(0,255,255,0.10) 52%,
      transparent 72%,
      rgba(255,0,255,0.10));
  mix-blend-mode: screen;
  animation: chromaticEdgeResolve 1.95s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--entry-delay) + 110ms);
}

.item-grid.store-materialized .product-card-img::after {
  display: none;
}

.item-grid.store-materialized .product-card-img img {
  animation: productImageBirth 1.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--entry-delay) + 90ms);
}

.item-grid.store-materialized .product-showcase-orbit {
  animation: productOrbitTrace 1.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--entry-delay) + 180ms);
}

.item-grid.store-materialized .product-card-info {
  animation: productInfoDecode 1.1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--entry-index, 0) * 64ms + 520ms);
}

.item-grid.store-materialized .carousel-front .product-card-img::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .item-grid.store-materialized .carousel-scene,
  .item-grid.store-materialized .product-showcase,
  .item-grid.store-materialized .product-showcase::before,
  .item-grid.store-materialized .product-showcase::after,
  .item-grid.store-materialized .product-card-img::before,
  .item-grid.store-materialized .product-card-img::after,
  .item-grid.store-materialized .product-card-img img,
  .item-grid.store-materialized .product-showcase-orbit,
  .item-grid.store-materialized .product-card-info {
    animation: none !important;
    opacity: 1;
    filter: none;
    clip-path: none;
  }
}