/* chars.css — キャラ画像の表示（サイト設計図v3 ⑦-2 が正）
 *
 *   場面                              画像
 *   -----------------------------------------------------------------------
 *   結果ページ・スマホ幅（1カラム）     顔版 _face（600×600）
 *   結果ページ・PC幅（2カラム左sticky） 全身 _md（幅800）。Retina／大画面は _lg を srcset
 *   一覧・サムネイル・ボタン類          全身 _sm（幅400）
 *
 * どれを読むかは <picture> の media／srcset（js/chars.js が jobs.json から組む）。
 * 切替条件は theme.css 冒頭の1本：(min-width: 900px) and (min-height: 600px) and (orientation: landscape)
 *
 * glow：全42体。明度を持ち上げる方式は不採用。drop-shadow を3段重ね、強度は theme.css の変数2つで制御。
 *   光36（.is-light）… 温白。--glow-light（初期 0.35）
 *   闇6 （.is-dark） … 青灰（bg_result に合わせた白灰〜青灰）。--dark-glow（既定 0.7 に固定）
 *   光／闇の判定は jobs.json の dark に含まれるか（js/chars.js isDark）。
 * 顔版（スマホ幅）の丸い切り抜きは確定（2026-09-14）。
 */

/* ---- 結果ページの2カラム骨格 ---- */
.result-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.result-figure { position: relative; }
.result-body { min-width: 0; }

@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  .result-layout {
    grid-template-columns: minmax(300px, 38%) 1fr;
    gap: clamp(24px, 4vw, 64px);
  }
  .result-figure {
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100svh - 48px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
}

/* ---- キャラ本体 ---- */
.char-figure {
  margin: 0;
  display: grid;
  place-items: center;
  width: 100%;
}
.char-figure picture { display: contents; }
/* --char-scale：職業ごとの倍率。jobs.json images.scale[和名] を js/chars.js が figure に載せる（未指定＝1） */
.char-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* 結果ページ・スマホ幅（<picture> が顔版を選ぶ側）＝丸く切って中央に（確定）。PC 幅では全身なので解除 */
.char-figure[data-context="result"] .char-img {
  width: calc(min(62vw, 300px) * var(--char-scale, 1));
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: radial-gradient(circle at 50% 40%, rgba(212, 175, 55, 0.10), rgba(4, 7, 15, 0) 70%);
}
@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  /* PC・全身＝高さ基準で揃える。幅は auto、max-width で溢れ止め（contain なので潰れない） */
  .char-figure[data-context="result"] .char-img {
    height: calc(min(78vh, 900px) * var(--char-scale, 1));
    width: auto;
    max-width: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    border: 0;
    background: none;
  }
}

/* ---- glow ---- */
/* 光36：温白 */
.char-figure.is-light .char-img {
  filter:
    drop-shadow(0 0  6px rgb(255 244 222 / calc(0.55 * var(--glow-light))))
    drop-shadow(0 0 18px rgb(250 232 196 / calc(0.40 * var(--glow-light))))
    drop-shadow(0 0 44px rgb(235 210 160 / calc(0.32 * var(--glow-light))));
}
/* 闇6：青灰 */
.char-figure.is-dark .char-img {
  filter:
    drop-shadow(0 0  6px rgb(180 190 220 / calc(0.55 * var(--dark-glow))))
    drop-shadow(0 0 18px rgb(160 172 210 / calc(0.40 * var(--dark-glow))))
    drop-shadow(0 0 44px rgb(130 145 195 / calc(0.32 * var(--dark-glow))));
}

/* ---- 一覧・サムネ（_sm） ---- */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.char-grid a {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-decoration: none;
  color: var(--fg);
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.char-grid a:hover { border-color: var(--gold-dim); }
/* 一覧も高さ基準（全身 _sm）。--char-scale は <a> に載る。
 * 画像の枠は固定高（scale 1.2 まで収まる 180px）で足元を揃え、名前の位置がカード間でずれないようにする */
.char-grid a { grid-template-rows: 180px auto; align-items: end; }
.char-grid .thumb { height: calc(150px * var(--char-scale, 1)); width: auto; max-width: 100%; max-height: 180px; object-fit: contain; align-self: end; }
.char-grid .name { font-size: 0.9rem; letter-spacing: 0.06em; }
.char-grid .name small { display: block; color: var(--fg-muted); font-size: 0.7rem; letter-spacing: 0.12em; }
.char-grid .is-light .thumb { filter: drop-shadow(0 0 6px rgb(255 244 222 / calc(0.5 * var(--glow-light)))) drop-shadow(0 0 16px rgb(235 210 160 / calc(0.35 * var(--glow-light)))); }
.char-grid .is-dark  .thumb { filter: drop-shadow(0 0 6px rgb(180 190 220 / calc(0.5 * var(--dark-glow)))) drop-shadow(0 0 16px rgb(140 155 200 / calc(0.35 * var(--dark-glow)))); }