@charset "UTF-8";
@import url("_engine.css");
/* ============================================================
   配色 ── sky-blue（晴れた空の水色）
   ============================================================

   白地に水色を置いた、明るく風通しのよい配色です。
   チェレンコフ光の「暗い水の中」という性格からは意図的に離し、
   研究室を初めて訪れる方（受験生・共同研究先）に開いた印象を
   狙っています。

   cherenkov との違いは色だけではありません。
     ・光のにじみをやめ、影を薄い青灰色にする（白地では光が汚れに見える）
     ・角を大きめに丸め、線を細くする
     ・リンクは、ホバーで下線がすっと伸びる
   ============================================================ */

:root {
  color-scheme: light;

  /* --- 地の色（浅いほど白に近い） --- */
  --bg-deep:    #dcecf8;
  --bg:         #f3f9fd;
  --surface:    #ffffff;
  --surface-2:  #eaf4fb;

  /* --- 水色 ---
     白地の上で読める濃さにしています。淡い水色をそのまま文字に
     使うと、白地では消えてしまうためです。
       --glow      … 塗り・枠・ボタン
       --glow-soft … リンクや見出しの文字（いちばん濃い）
       --glow-deep … 薄い面や区切り
     ---------------------------------------------------------------- */
  --glow:       #1b87d2;
  --glow-soft:  #0f6198;
  --glow-deep:  #a7d5f0;
  --glow-dim:   rgba(var(--glow-rgb), .12);
  --violet:     #4f6bd0;

  --text:       #16303f;
  --text-muted: #5b7484;
  --border:     #cde2f1;

  --glow-rgb:       27, 135, 210;   /* --glow      #1b87d2 */
  --glow-soft-rgb:  15, 97, 152;    /* --glow-soft #0f6198 */
  --glow-deep-rgb:  167, 213, 240;  /* --glow-deep #a7d5f0 */
  --violet-rgb:     79, 107, 208;   /* --violet    #4f6bd0 */
  --award-rgb:      201, 138, 0;    /* --award     #c98a00 */
  --bg-rgb:         243, 249, 253;  /* --bg        #f3f9fd */
  --bg-deep-rgb:    220, 236, 248;  /* --bg-deep   #dcecf8 */
  --surface-rgb:    255, 255, 255;  /* --surface   #ffffff */
  --shadow-rgb:     32, 74, 105;    /* 影。白地では黒だと重いので青灰色に */

  /* --- 大きな写真の上に重ねるもの ----------------------------------
     hero の写真の上にかける幕（--scrim-rgb）と、その上に置く
     ボタンの地（--panel-on-photo-rgb）です。**どの配色でも濃いまま**に
     します。ここを地の色に合わせて明るくすると、写真が白く飛び、
     白い文字が見えなくなります。
     ---------------------------------------------------------------- */
  --scrim-rgb:            10, 34, 52;
  --panel-on-photo-rgb:   14, 44, 66;
  /* 大きな写真の上に重ねる文字。地が明るくても明るいままにします */
  --on-photo:       #ffffff;
  --on-photo-soft:  #eaf4fd;
  /* 水色の上に置く、濃い文字 */
  --on-bright:      #0c2433;

  --text-strong: #0c2433;
  --photo-accent: #cfeaff;
  --on-accent:   #ffffff;
  --header-bg:   rgba(var(--bg-rgb), .86);
  --panel-bg:    rgba(255, 255, 255, .98);
  --sticky-bg:   rgba(var(--bg-rgb), .92);
  --inset-bg:    rgba(234, 244, 251, .92);
  --veil:        rgba(18, 48, 70, .32);
  --footer-fade: rgba(var(--bg-deep-rgb), .95);
  --award:      #8a6100;
  --award-bg:   rgba(var(--award-rgb), .16);
}

/* 背景のにじみ。暗い地では光に見えますが、白地では汚れに見えるため、
   ごく薄い青みだけを残します。 */
body {
  background-image:
    radial-gradient(1200px 560px at 50% -10%, rgba(var(--glow-rgb), .13), transparent 64%),
    radial-gradient(900px 500px at 92% 30%, rgba(var(--glow-rgb), .07), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 82%);
}

/* 文字のまわりの光。白地では輪郭がぼやけて読みにくいので外します。 */
.header__logo-main,
.main > h1 { text-shadow: none; }

/* --- この配色だけの持ち味 ------------------------------------------ */

/* 角を大きめに丸め、線を細くして軽さを出します */
:root { --radius: 16px; --radius-sm: 10px; }

/* 文字を選んだところ */
::selection { background: rgba(var(--glow-rgb), .22); color: var(--text-strong); }

/* リンクは、指を乗せると下線がすっと伸びます */
.main a:not(.zoom):not(.guide__card):not(.hero__button) {
  text-decoration-color: rgba(var(--glow-soft-rgb), .35);
  text-underline-offset: .22em;
  transition: text-decoration-color .18s ease;
}
.main a:not(.zoom):not(.guide__card):not(.hero__button):hover {
  text-decoration-color: var(--glow-soft);
}

/* キーボードで選んでいる場所は、太めの水色の枠で示します */
:focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; }