/* EQU-Glass 実装用CSS（デザイン参照ファイルのインラインスタイルを、クラスに整理したもの）
   数値はすべて reference/dc/*.dc.html の最終版と一致。迷ったら dc.html を正とする。 */

:root {
  --eg-navy: #0E2A47;
  --eg-navy-900: #081A2D;
  --eg-navy-050: #EAF0F8;
  --eg-paper: #FAFBFD;
  --eg-wash: #F4F6FA;
  --eg-ink: #111827;
  --eg-sky: #8FB9DE;
  --eg-iris: #3E4E95; /* 既定のアクセント */
  --eg-line: #D7DEE8;
}

/* 1. 共通のガラスの層。要素に .eg-glass を付けると、縁の線(::before)と面の質感(::after)が入る。
   子要素より前面に重なるので、pointer-events:none を外さないこと。 */
.eg-glass { position: relative; }
.eg-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 0.5px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(143,185,222,.34) 28%, rgba(143,185,222,.22) 68%, rgba(92,122,163,.34) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--rim, 1);
}
.eg-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,var(--veil,0)) 0%, rgba(255,255,255,calc(var(--veil,0)*.25)) 38%, transparent 62%),
    radial-gradient(60% 80% at 16% 10%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(55% 70% at 86% 82%, rgba(143,185,222,.07), transparent 70%),
    radial-gradient(38% 46% at 62% 34%, rgba(255,255,255,.035), transparent 70%),
    linear-gradient(to top, rgba(255,255,255,calc(.26*var(--bl,1))), transparent 5px);
  box-shadow:
    inset 2px 2px 4px -2px var(--sh, rgba(62,78,149,.10)),   /* 左上の内側の影 */
    inset 1.5px 1.5px 4px -2px rgba(255,255,255,.3),
    inset -1.5px -2px 2px -2px rgba(255,255,255,calc(.3*var(--bl,1))),
    inset 0 -1px 0 0 rgba(255,255,255,calc(.5*var(--bl,1)));  /* 下辺の細い光 */
}

/* 2. クリアなカード（白い面に載せる） */
.eg-card {
  border-radius: 14px; border: none;
  background: rgba(143,185,222,.045);
  box-shadow:
    inset 0 0 7px 3px rgba(255,255,255,.7), inset 0 0 14px rgba(143,185,222,.22),
    0 1px 0 rgba(143,185,222,.3), 0 2px 5px rgba(14,42,71,.06), 0 18px 30px -16px rgba(62,78,149,.22);
  backdrop-filter: blur(3px) saturate(115%); -webkit-backdrop-filter: blur(3px) saturate(115%);
}

/* 3. 画像・図の枠（中身を見せるので面は塗らない。縁と影だけ） */
.eg-figure { border-radius: 14px; overflow: hidden; border: none;
  box-shadow: 0 1px 0 rgba(143,185,222,.3), 0 2px 5px rgba(14,42,71,.06), 0 18px 30px -16px rgba(62,78,149,.22); }

/* 4. ヘッダー */
.eg-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250,251,253,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: .5px solid rgba(143,185,222,.32);
  box-shadow: inset 0 -4px 7px -2px rgba(255,255,255,.7);
}

/* 5. ボタン */
.eg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; }
/* 5a. 主ボタン（濃紺） */
.eg-btn--primary {
  color: #fff; --sh: rgba(3,10,22,.5); --bl: .6;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,0) 30%), var(--eg-navy);
  box-shadow: inset 0 0 4px rgba(143,185,222,.22), 0 1px 0 rgba(143,185,222,.19), 0 2px 4px rgba(14,42,71,.075), 0 10px 16px -10px rgba(14,42,71,.27);
}
/* 5b. 副ボタン（透明ガラス）。白い面の上で使う */
.eg-btn--secondary {
  color: var(--eg-navy); --bl: .5;
  background: rgba(143,185,222,.045);
  box-shadow: inset 0 0 4px 1.5px rgba(255,255,255,.35), inset 0 0 8px rgba(143,185,222,.11), 0 1px 0 rgba(143,185,222,.15), 0 2px 4px rgba(14,42,71,.03), 0 8px 12px -8px rgba(62,78,149,.11);
  backdrop-filter: blur(3px) saturate(115%); -webkit-backdrop-filter: blur(3px) saturate(115%);
}
/* 5c. 濃紺の帯の中のボタン（暗いガラス） */
.eg-btn--on-dark {
  color: #fff; --bl: .5;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 4px rgba(255,255,255,.09), 0 6px 10px -8px rgba(0,0,0,.2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* 6. 濃紺のタイル（学校LPの図の中の「日本人学習者に最適な音声認識」など） */
.eg-tile-navy {
  --sh: rgba(3,10,22,.5); --bl: .5;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 30%), var(--eg-navy);
  box-shadow: inset 0 0 6px rgba(143,185,222,.2), 0 1px 0 rgba(143,185,222,.15), 0 2px 4px rgba(14,42,71,.06), 0 10px 16px -10px rgba(14,42,71,.22);
}

/* 7. 紺の入口帯（#entry-bottom）の暗いカード */
.eg-dark-card {
  border-radius: 14px; border: none; --rim: .5; --bl: .5; --sh: rgba(3,10,22,.35);
  background: rgba(255,255,255,.015);
  box-shadow: inset 0 0 6px 2px rgba(255,255,255,.04), inset 0 0 14px rgba(143,185,222,.05), 0 1px 0 rgba(143,185,222,.14), 0 2px 5px rgba(0,0,0,.12), 0 14px 24px -14px rgba(0,0,0,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.eg-band-dark { background: linear-gradient(8deg, #081A2D 0%, #0E2A47 100%); }

/* 8. 下部固定フロート（TOP PCのみ）。ピル形。[data-dark="1"] で暗いガラスに切り替わる */
.eg-float {
  position: fixed; z-index: 30; left: 50%; bottom: 20px; display: flex; align-items: center;
  box-sizing: border-box; max-width: calc(100% - 32px); padding: 4px; border-radius: 999px; border: none;
  background: rgba(250,251,253,.4);
  box-shadow: inset 3px 3px 6px -1px rgba(255,255,255,.55), inset -3px -3px 6px -1px rgba(255,255,255,.4), inset 0 0 3px .5px rgba(255,255,255,.25), inset 0 0 10px rgba(143,185,222,.16), 0 1px 0 rgba(143,185,222,.3), 0 2px 5px rgba(14,42,71,.06), 0 18px 30px -16px rgba(62,78,149,.22);
  backdrop-filter: blur(8px) saturate(115%); -webkit-backdrop-filter: blur(8px) saturate(115%);
  transition: opacity 320ms cubic-bezier(.22,.61,.36,1), transform 320ms cubic-bezier(.22,.61,.36,1), visibility 320ms, background-color 240ms, box-shadow 240ms;
}
.eg-float[data-dark="1"] {
  background: rgba(255,255,255,.05); --rim: .5; --bl: .5; --sh: rgba(3,10,22,.35);
  box-shadow: inset 3px 3px 6px -1px rgba(255,255,255,.14), inset -3px -3px 6px -1px rgba(255,255,255,.1), inset 0 0 3px .5px rgba(255,255,255,.08), inset 0 0 10px rgba(143,185,222,.08), 0 1px 0 rgba(143,185,222,.14), 0 2px 5px rgba(0,0,0,.12), 0 14px 24px -14px rgba(0,0,0,.45);
}
.eg-float[data-dark="1"] a { color: #EEF2F8; }
.eg-float[data-dark="1"] .eg-float__soon { color: rgba(238,242,248,.55); border-color: rgba(255,255,255,.22); }
.eg-float[data-dark="1"] .eg-float__sep { background: rgba(255,255,255,.18); }

/* 9. 非対応ブラウザ向けの退避（backdrop-filter / mask-composite が使えない場合は面を少し不透明に） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .eg-card, .eg-btn--secondary { background: rgba(244,246,250,.85); }
  .eg-header { background: rgba(250,251,253,.94); }
  .eg-float { background: rgba(250,251,253,.9); }
}
@media (prefers-reduced-motion: reduce) { .eg-float { transition: none; } }