:root {
  --navy: #1f3a5f; --accent: #e8553a; --accent-2: #f2a33a; --teal: #2e8b8b; --cream: #fbf3e4; --paper: #fffdf8;
  --ink: #26303d; --muted: #6b7684; --line: #1f3a5f;
  --font-head: "Zen Maru Gothic", "Noto Sans JP", sans-serif; --font-body: "Noto Sans JP", sans-serif;
  /* イラスト用セマンティック色（テイストで差し替え） */
  --c-bg: #eef1f4; --c-skin: #f4cfae; --c-hair: #3b3b45; --c-cloth: #2f6fb3; --c-cloth2: #e8553a; --c-white: #ffffff;
  --c-obj: #9aa7b8; --c-obj2: #c9d2dd; --c-acc: #f2a33a; --c-dark: #1f3a5f; --c-green: #7fb79c;
  --il-stroke: none; --il-sw: 0; --il-fill-op: 1; --il-shadow: none;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.8; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; }

/* 叩き版バー */
.proto-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .35rem .9rem; background: var(--navy); color: #fff; font-size: .78rem; }
.proto-bar__tag { background: var(--accent); padding: .1em .6em; border-radius: 999px; font-weight: 700; }
.proto-bar__taste button { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 999px; padding: .1em .7em; margin-left: .3em; font-size: .78rem; }
.proto-bar__taste button.is-on { background: #fff; color: var(--navy); border-color: #fff; }

/* レイアウト */
.story { min-height: 100vh; padding: 3.2rem 1rem 5.2rem; display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 1100px; margin-inline: auto; }
@media (min-width: 900px) { .story { grid-template-columns: 150px 1fr; align-items: start; } }

/* 専攻トレイ */
.tray { display: flex; flex-wrap: wrap; gap: .35rem; }
@media (min-width: 900px) { .tray { position: sticky; top: 3.6rem; flex-direction: column; gap: .45rem; padding-top: .6rem; } }
.tray__item { display: inline-flex; align-items: center; gap: .45em; font-size: .78rem; font-weight: 700; color: #b7bfc9; transition: .3s; }
.tray__dot { width: .9rem; height: .9rem; border-radius: 50%; background: #e1e6ec; flex-shrink: 0; transition: .3s; }
.tray__item.is-on { color: var(--navy); }
.tray__item.is-on .tray__dot { background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.tray__item.is-now { transform: translateX(3px); }
.tray__item.is-now .tray__name { text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 3px; }

/* 舞台 */
.stage { background: #fff; border-radius: 22px; box-shadow: 0 10px 30px rgba(31,58,95,.08); overflow: hidden; }
.scene { aspect-ratio: 16 / 9; background: var(--c-bg); cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.scene.is-in { opacity: 1; transform: none; }
.scene svg { width: 100%; height: 100%; display: block; }
.text { padding: 1.3rem 1.5rem 1.6rem; opacity: 0; transform: translateY(8px); transition: opacity .45s .1s, transform .45s .1s; }
.text.is-in { opacity: 1; transform: none; }
.kicker { font-family: var(--font-head); font-weight: 700; color: var(--accent); font-size: .85rem; letter-spacing: .08em; }
.title { font-family: var(--font-head); font-weight: 900; color: var(--navy); font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); line-height: 1.4; margin: .2rem 0 .7rem; }
.body { font-size: 1rem; max-width: 42em; }
.chips { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-block; background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 70%, #000); border-left: 4px solid var(--c); padding: .2em .7em; border-radius: 6px; font-size: .82rem; font-weight: 700; }
.roles { list-style: none; margin-top: .8rem; display: grid; gap: .4rem; }
.roles li { font-size: .88rem; color: var(--muted); padding-left: .8rem; border-left: 3px solid var(--c); }
.roles li b { color: var(--navy); margin-right: .5em; }

/* まとめ */
.text--summary .body { margin-bottom: 1rem; }
.sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
.sum__card { border: 1px solid #e6e9ee; border-top: 4px solid var(--c); border-radius: 14px; padding: .8rem .9rem .7rem; background: #fff; }
.sum__code { font-family: var(--font-head); font-weight: 900; color: var(--c); font-size: .8rem; letter-spacing: .08em; }
.sum__name { display: block; font-family: var(--font-head); color: var(--navy); font-size: .98rem; line-height: 1.4; margin: .1rem 0 .35rem; }
.sum__role { font-size: .85rem; color: var(--muted); line-height: 1.6; }
.sum__links { margin-top: .55rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; }
.sum__links a { white-space: nowrap; }
.sum__links a { color: var(--c); font-weight: 700; text-decoration: none; }
.sum__links a::after { content: " →"; }

/* 操作 */
.ctrl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .7rem 1rem; background: linear-gradient(0deg, var(--paper) 60%, transparent); }
.ctrl__btn { border: 2px solid var(--navy); background: #fff; color: var(--navy); border-radius: 999px; padding: .5em 1.2em; font-weight: 700; font-family: var(--font-head); }
.ctrl__btn:disabled { opacity: .3; cursor: default; }
.ctrl__btn--next { background: var(--navy); color: #fff; padding-inline: 1.6em; }
.ctrl__dots { display: flex; gap: .4rem; }
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: #d5dbe3; cursor: pointer; transition: .2s; }
.dot.is-on { background: var(--accent); transform: scale(1.3); }

/* ===== イラストの共通スタイル ===== */
.fl { stroke: var(--il-stroke); stroke-width: var(--il-sw); stroke-linejoin: round; stroke-linecap: round; fill-opacity: var(--il-fill-op); }
.c-bg { fill: var(--c-bg); } .c-skin { fill: var(--c-skin); } .c-hair { fill: var(--c-hair); } .c-cloth { fill: var(--c-cloth); } .c-cloth2 { fill: var(--c-cloth2); }
.c-white { fill: var(--c-white); } .c-obj { fill: var(--c-obj); } .c-obj2 { fill: var(--c-obj2); } .c-acc { fill: var(--c-acc); } .c-dark { fill: var(--c-dark); } .c-green { fill: var(--c-green); }
.ln { fill: none; stroke: var(--c-dark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ln--acc { stroke: var(--c-acc); }
.ln--thin { stroke-width: 2; }

/* テイストA：フラット（既定） */
/* テイストB：線画＋淡い面 */
body[data-taste="b"] { --il-stroke: var(--line); --il-sw: 2.5; --il-fill-op: .22; --c-bg: #fbf8f1; }
body[data-taste="b"] .c-bg { fill-opacity: 1; }
body[data-taste="b"] .c-white { fill-opacity: 1; }
/* テイストC：切り絵（紺・朱・ティールの3色＋紙の影） */
body[data-taste="c"] { --c-bg: #f6ecd9; --c-skin: #f1d9bd; --c-hair: #1f3a5f; --c-cloth: #1f3a5f; --c-cloth2: #e8553a; --c-obj: #2e8b8b; --c-obj2: #cfd9d6; --c-acc: #e8553a; --c-dark: #1f3a5f; --c-green: #2e8b8b; --c-white: #fffaf0; }
body[data-taste="c"] .fl { filter: drop-shadow(1px 2px 0 rgba(31,58,95,.18)); }
body[data-taste="c"] .c-bg { filter: none; }