/* LAST ORBIT - UI */

/* ================= 대화창 ================= */
#textbox {
  position: absolute; left: 4%; right: 4%; bottom: 3.2%;
  min-height: 24%;
  padding: 2.6cqw 3cqw 2.2cqw;
  background: linear-gradient(180deg, rgba(10,19,33,.86), rgba(6,12,22,.94));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(9px) saturate(1.15);
  box-shadow: 0 12px 44px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  opacity: 0; pointer-events: none;
  transform: translateY(14px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
  cursor: pointer;
}
#textbox.is-on { opacity: 1; pointer-events: auto; transform: none; }

#tb-name {
  position: absolute; top: -1.5cqw; left: 2.2cqw;
  display: none; align-items: center; gap: .6em;
  padding: .5cqw 1.6cqw;
  font-size: 1.55cqw; letter-spacing: .12em; font-weight: 700;
  color: var(--tag, var(--acc));
  background: rgba(8,15,26,.96);
  border: 1px solid var(--tag, var(--line-strong));
  border-radius: 999px;
  box-shadow: 0 0 22px -6px var(--tag, var(--acc));
}
#tb-name.is-on { display: inline-flex; }

#tb-body {
  font-size: calc(1.72cqw * var(--font-scale, 1));
  line-height: 1.86;
  letter-spacing: .012em;
  color: var(--tx);
  white-space: pre-wrap;
  min-height: 5.6em;
  text-shadow: 0 1px 10px rgba(0,0,0,.65);
}
#textbox.is-narration #tb-body { color: #C6D6E6; font-style: italic; }

#tb-next {
  position: absolute; right: 2.2cqw; bottom: 1.4cqw;
  width: 1.5cqw; height: 1.5cqw;
  border-right: 2px solid var(--acc); border-bottom: 2px solid var(--acc);
  transform: rotate(45deg); opacity: 0;
  transition: opacity var(--t-fast);
}
#tb-next.is-on { opacity: .9; animation: nextBob 1.15s var(--ease) infinite; }
@keyframes nextBob {
  0%,100% { transform: rotate(45deg) translate(0,0); }
  50% { transform: rotate(45deg) translate(3px,3px); }
}

/* ================= 상단 HUD ================= */
#hud {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 1cqw;
  padding: 1.1cqw 2cqw;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-mid);
  background: linear-gradient(180deg, rgba(5,10,18,.7), transparent);
}
#hud.is-on { opacity: 1; pointer-events: auto; }

#hud-week {
  font-size: 1.35cqw; letter-spacing: .22em; color: var(--tx-dim);
  font-family: var(--ff-mono);
  padding-right: 1.4cqw; border-right: 1px solid var(--line);
}
#hud-week b { color: var(--acc); font-weight: 700; }

#hud-aff { display: flex; gap: 1.1cqw; }
.aff-chip {
  display: flex; align-items: center; gap: .5em;
  font-size: 1.2cqw; letter-spacing: .08em; color: var(--tx-dim);
}
.aff-chip .bar {
  width: 5.6cqw; height: .55cqw; border-radius: 999px;
  background: rgba(255,255,255,.13); overflow: hidden;
}
.aff-chip .bar i {
  display: block; height: 100%; width: 0%;
  background: var(--cc, var(--acc)); border-radius: 999px;
  transition: width var(--t-slow) var(--ease);
  box-shadow: 0 0 10px -1px var(--cc, var(--acc));
}
.aff-chip .nm { color: var(--cc, var(--acc)); font-weight: 600; }

#hud-tools { margin-left: auto; display: flex; gap: .6cqw; }
.hbtn {
  background: rgba(12,22,38,.72); border: 1px solid var(--line);
  color: var(--tx-dim); border-radius: 8px;
  padding: .55cqw 1.1cqw; font-size: 1.15cqw; letter-spacing: .1em;
  transition: all var(--t-fast);
}
.hbtn:hover { color: var(--tx); border-color: var(--line-strong); background: rgba(20,38,62,.9); }
.hbtn.is-on { color: #06121E; background: var(--acc); border-color: var(--acc); font-weight: 700; }

/* ================= 선택지 ================= */
#choices {
  position: absolute; inset: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.3cqw; padding: 0 14%;
  background: radial-gradient(ellipse at 50% 55%, rgba(4,9,16,.62), rgba(4,9,16,.86));
  backdrop-filter: blur(2px);
}
#choices.is-on { display: flex; }
.choice-btn {
  position: relative; width: 100%; max-width: 62cqw;
  padding: 1.5cqw 2.4cqw;
  font-size: 1.6cqw; line-height: 1.5; text-align: left;
  color: var(--tx);
  background: linear-gradient(100deg, rgba(16,30,50,.94), rgba(10,20,36,.94));
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: all var(--t-fast) var(--ease);
  animation: choiceIn .34s var(--ease) both;
}
/* 진입 연출은 transform 만 사용한다.
   opacity 를 쓰면 애니메이션이 실행되지 않는 환경(감속 모션 설정, 백그라운드
   탭 스로틀링 등)에서 fill-mode 가 from 상태를 붙들어 콘텐츠가 사라진다. */
@keyframes choiceIn {
  from { transform: translateY(16px) scale(.985); }
  to   { transform: none; }
}
.choice-btn::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px;
  background: var(--acc); border-radius: 2px; opacity: .55;
  transition: all var(--t-fast);
}
.choice-btn:hover {
  border-color: var(--line-strong);
  background: linear-gradient(100deg, rgba(24,48,78,.96), rgba(14,28,48,.96));
  transform: translateX(6px);
  box-shadow: 0 0 34px -12px var(--acc);
}
.choice-btn:hover::before { opacity: 1; box-shadow: 0 0 14px var(--acc); }

/* ================= 챕터 카드 ================= */
#chapter {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgba(3,7,13,.9); gap: 1.2cqw;
}
#chapter.is-on { display: flex; }
#chapter .ch-line { width: 22cqw; height: 1px; background: var(--line-strong); }
#chapter .ch-title {
  font-size: 3.2cqw; letter-spacing: .3em; color: var(--tx);
  text-shadow: 0 0 40px var(--acc);
}
#chapter .ch-sub { font-size: 1.4cqw; letter-spacing: .34em; color: var(--tx-faint); }
#chapter.is-on .ch-title, #chapter.is-on .ch-sub, #chapter.is-on .ch-line {
  animation: chIn .7s var(--ease) both;
}
@keyframes chIn {
  from { letter-spacing: .62em; transform: translateY(10px); filter: blur(2px); }
  to   { transform: none; filter: none; }
}

/* ================= 호감도 팝업 ================= */
#aff-pop {
  position: absolute; right: 3%; top: 12%;
  display: flex; flex-direction: column; gap: .5cqw; align-items: flex-end;
  pointer-events: none;
}
.aff-toast {
  display: flex; align-items: center; gap: .5em;
  font-size: 1.3cqw; letter-spacing: .08em; font-weight: 700;
  padding: .5cqw 1.1cqw; border-radius: 999px;
  color: var(--cc, var(--acc)); background: rgba(8,15,26,.9);
  border: 1px solid var(--cc, var(--acc));
  box-shadow: 0 0 26px -8px var(--cc, var(--acc));
  animation: affIn .34s var(--ease), affOut .4s var(--ease) 1.5s forwards;
}
@keyframes affIn { from { opacity: 0; transform: translateX(24px); } }
@keyframes affOut { to { opacity: 0; transform: translateX(24px); } }
.aff-toast.is-down { filter: grayscale(.5); }

/* ================= 모달 공통 ================= */
.modal {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(3,7,13,.86); backdrop-filter: blur(5px);
}
.modal.is-on { display: flex; }
.modal-box {
  width: 74%; max-height: 84%; overflow: auto;
  padding: 2.6cqw 3cqw;
  background: linear-gradient(180deg, rgba(14,26,44,.97), rgba(8,15,26,.98));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
.modal-title {
  font-size: 1.9cqw; letter-spacing: .26em; color: var(--acc);
  margin: 0 0 1.6cqw; padding-bottom: 1cqw;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-close {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--tx-dim); font-size: 1.2cqw; padding: .4cqw 1cqw; letter-spacing: .1em;
}
.modal-close:hover { color: var(--tx); border-color: var(--line-strong); }

/* ================= 타이틀 화면 ================= */
#title {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
#title.is-on { display: flex; }
#title .t-bg { position: absolute; inset: 0; }
#title .t-bg svg { width: 100%; height: 100%; }
#title .t-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* 키비주얼은 가운데(노아)와 오른쪽(린)에 인물이 있다. 로고·메뉴가 왼쪽 열로
 * 내려앉았으므로 베일도 왼쪽만 짙게 깔고 오른쪽은 그림이 보이게 둔다. */
#title .t-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(3,7,13,.88) 0%, rgba(4,9,16,.62) 26%,
                           rgba(5,12,22,.24) 54%, rgba(5,12,22,.32) 100%),
    radial-gradient(ellipse at 50% 46%, rgba(5,12,22,0), rgba(3,7,13,.46));
}
/* 로고 블록을 가운데보다 조금 위로. 세로 중앙에 두면 부제가 창가에 선 세이라의
 * 머리에 걸린다 (키비주얼의 인물 높이에 맞춘 값이다) */
#title .t-inner {
  position: relative; text-align: left; margin-right: auto;
  padding-left: 6cqw; transform: translateY(-4.5cqw);
}
#title .t-sup {
  font-size: 1.25cqw; letter-spacing: .7em; color: var(--acc);
  margin-bottom: 1.6cqw; opacity: .9;
}
#title h1 {
  margin: 0; font-size: 6.6cqw; letter-spacing: .16em; font-weight: 800;
  background: linear-gradient(180deg, #FFFFFF 20%, #7FD8FF 70%, #2E7FA8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 42px rgba(79,195,247,.45));
}
#title .t-sub {
  margin-top: .8cqw; font-size: 1.85cqw; letter-spacing: .34em; color: var(--tx-dim);
}
#title .t-menu {
  margin-top: 3.6cqw; display: flex; flex-direction: column; gap: .7cqw;
  align-items: flex-start;
}
.t-btn {
  min-width: 22cqw; padding: 1.05cqw 2cqw;
  font-size: 1.5cqw; letter-spacing: .24em;
  color: var(--tx); background: rgba(10,20,34,.72);
  border: 1px solid var(--line); border-radius: 10px;
  transition: all var(--t-fast) var(--ease);
}
.t-btn:hover {
  color: #06121E; background: var(--acc); border-color: var(--acc);
  letter-spacing: .3em; box-shadow: 0 0 40px -10px var(--acc);
}
.t-btn:disabled { opacity: .35; cursor: not-allowed; }
.t-btn:disabled:hover { color: var(--tx); background: rgba(10,20,34,.72);
  border-color: var(--line); letter-spacing: .24em; box-shadow: none; }
#title .t-foot {
  position: absolute; bottom: 2cqw; left: 0; right: 0; text-align: center;
  font-size: 1.05cqw; color: var(--tx-faint); letter-spacing: .16em;
}
#title .t-ver {
  position: absolute; right: 2.2cqw; bottom: 1.9cqw;
  font-family: var(--ff-mono); font-size: .95cqw;
  letter-spacing: .12em; color: var(--tx-faint); opacity: .85;
}


/* ---------- 후원 링크 (Ko-fi) ----------
 * 타이틀 좌하단 · 크레딧 · 엔딩 카드 세 곳에 같은 알약이 뜬다. 마크업은
 * ui-credits.js 의 initKofi() 가 [data-kofi] 에 채워 넣는다 — 주소를 한 곳에만
 * 두려는 것이다. 평소엔 버전 표기만큼 조용하고, 올려놨을 때만 퍼플로 살아난다. */
.kofi {
  display: inline-flex; align-items: center; gap: .55cqw;
  padding: .6cqw 1.15cqw;
  font-size: 1.02cqw; letter-spacing: .16em; text-decoration: none;
  color: var(--tx-faint); background: rgba(10,20,34,.55);
  border: 1px solid var(--line-soft); border-radius: 999px;
  transition: all var(--t-fast) var(--ease);
}
.kofi:hover {
  color: #FFFFFF; background: var(--kofi);
  border-color: var(--kofi); letter-spacing: .2em;
  box-shadow: 0 0 34px -10px var(--kofi);
}
.kofi svg { display: block; width: 1.6cqw; height: 1.6cqw; }
.kofi .cup {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 컵 안의 하트만 색을 고정한다. 평소엔 눌러 두고 호버에서 또렷해진다 */
.kofi .heart { fill: #FF5E5B; opacity: .7;
  transition: opacity var(--t-fast) var(--ease); }
.kofi:hover .heart { opacity: 1; }

/* 타이틀은 좌하단 구석. 저작권이 가운데, 버전이 우하단이라 이 자리가 비어 있다 */
#title .kofi { position: absolute; left: 2.2cqw; bottom: 1.6cqw; }

/* 크레딧·엔딩은 화면 한가운데라 조금 크게 — 구석의 것과 보이는 무게를 맞춘다 */
.kofi--lg { font-size: 1.2cqw; padding: .78cqw 1.6cqw; gap: .7cqw; }
.kofi--lg svg { width: 1.9cqw; height: 1.9cqw; }

/* ================= 이름 입력 ================= */
#nameask .modal-box { width: 46%; }
#nameask input {
  width: 100%; margin: 1.4cqw 0 1.8cqw;
  padding: 1.1cqw 1.4cqw; font-size: 1.9cqw; letter-spacing: .1em;
  color: var(--tx); background: rgba(4,10,18,.9);
  border: 1px solid var(--line-strong); border-radius: 10px;
  font-family: var(--ff-ui); text-align: center;
}
#nameask input:focus { outline: none; border-color: var(--acc);
  box-shadow: 0 0 30px -10px var(--acc); }
#nameask .hint { font-size: 1.15cqw; color: var(--tx-faint); letter-spacing: .1em; }
.row-btns { display: flex; gap: .8cqw; justify-content: flex-end; margin-top: 1.2cqw; }
.pbtn {
  padding: .85cqw 1.8cqw; font-size: 1.3cqw; letter-spacing: .16em;
  border-radius: 8px; border: 1px solid var(--line);
  background: rgba(12,24,40,.8); color: var(--tx);
  transition: all var(--t-fast);
}
.pbtn:hover { border-color: var(--line-strong); background: rgba(22,44,72,.9); }
.pbtn.primary { background: var(--acc); border-color: var(--acc); color: #06121E; font-weight: 700; }
.pbtn.primary:hover { box-shadow: 0 0 30px -8px var(--acc); }
.pbtn.danger { border-color: rgba(255,122,92,.5); color: #FFB3A1; }
.pbtn.danger:hover { background: rgba(90,30,22,.7); border-color: var(--warn); }

/* ================= 백로그 ================= */
#backlog .modal-box { width: 78%; }
.log-list { display: flex; flex-direction: column; gap: 1.1cqw; }
.log-row { display: grid; grid-template-columns: 9cqw 1fr; gap: 1.4cqw; align-items: start; }
.log-who { font-size: 1.25cqw; letter-spacing: .1em; font-weight: 700; text-align: right;
  color: var(--tx-faint); padding-top: .2em; }
.log-tx { font-size: 1.35cqw; line-height: 1.75; color: var(--tx); }
.log-row.is-narr .log-tx { color: #A8BDD2; font-style: italic; }

/* ================= 세이브 / 로드 ================= */
#saveload .modal-box { width: 76%; }
.slot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1cqw; }
.slot {
  display: grid; grid-template-columns: 7cqw 1fr; gap: 1.2cqw; align-items: center;
  padding: 1.1cqw; text-align: left;
  background: rgba(10,20,34,.75); border: 1px solid var(--line);
  border-radius: 12px; transition: all var(--t-fast);
}
.slot:hover { border-color: var(--line-strong); background: rgba(18,36,60,.9); }
.slot .thumb {
  width: 7cqw; height: 7cqw; border-radius: 10px; overflow: hidden;
  background: #0A1220; border: 1px solid var(--line-soft);
  display: grid; place-items: center;
}
.slot .thumb svg { width: 100%; height: 100%; }
.slot .thumb .lo-char-face { display: block; width: 100%; height: 100%;
  background-repeat: no-repeat; }
.slot .thumb .empty { font-size: 2.2cqw; color: var(--tx-faint); }
.slot .meta { min-width: 0; }
.slot .s-title { font-size: 1.35cqw; letter-spacing: .1em; color: var(--tx); font-weight: 700; }
.slot .s-sub { font-size: 1.1cqw; color: var(--tx-dim); margin-top: .35em; }
.slot .s-time { font-size: 1cqw; color: var(--tx-faint); margin-top: .25em;
  font-family: var(--ff-mono); }
.slot.is-empty .s-title { color: var(--tx-faint); }

/* ================= 설정 ================= */
#settings .modal-box { width: 58%; }
.set-row {
  display: grid; grid-template-columns: 12cqw 1fr 6cqw; gap: 1.4cqw;
  align-items: center; padding: 1cqw 0;
  border-bottom: 1px solid var(--line-soft);
}
.set-row label { font-size: 1.3cqw; letter-spacing: .12em; color: var(--tx-dim); }
.set-row .val { font-size: 1.2cqw; color: var(--acc); text-align: right;
  font-family: var(--ff-mono); }
.set-row input[type=range] { width: 100%; accent-color: var(--acc); }
/* 체크박스는 늘리지 않는다. 슬라이더 열에 들어가면 폭을 다 먹는다 */
.set-row input[type=checkbox] {
  width: 1.6cqw; height: 1.6cqw; justify-self: start;
  accent-color: var(--acc); cursor: pointer;
}

/* ================= 갤러리 ================= */
#gallery .modal-box { width: 84%; }
.gal-sec { font-size: 1.3cqw; letter-spacing: .24em; color: var(--tx-faint);
  margin: 1.4cqw 0 1cqw; }
.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; }
.gal-card {
  padding: 1.1cqw; border-radius: 12px; text-align: left;
  background: rgba(10,20,34,.72); border: 1px solid var(--line);
  transition: all var(--t-fast);
}
.gal-card.is-locked { opacity: .42; filter: grayscale(1); }
.gal-card:not(.is-locked):hover { border-color: var(--line-strong);
  background: rgba(20,40,66,.9); transform: translateY(-3px); }
.gal-card .rank { font-size: .95cqw; letter-spacing: .22em; font-weight: 700; }
.gal-card .rank.TRUE { color: #FFD98A; }
.gal-card .rank.NORMAL { color: var(--tx-dim); }
.gal-card .rank.BAD { color: #FF9A85; }
.gal-card .gt { font-size: 1.25cqw; margin-top: .45em; color: var(--tx); letter-spacing: .06em; }
.gal-card .gw { font-size: 1cqw; margin-top: .3em; color: var(--cc, var(--tx-faint)); }

/* CG 가 3장이던 때는 3열이었다. 7장이 되면서 엔딩 그리드와 같은 4열로 맞춘다
 * — 3열이면 3행이 되어 모달을 한참 스크롤해야 한다 */
.cg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; }
.cg-card { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: #060C16; }
.cg-card .lo-cg { position: absolute; inset: 0; }
.cg-card .lo-cg-thumb { position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-card.is-locked { display: grid; place-items: center; color: var(--tx-faint);
  font-size: 2.4cqw; }
.cg-card .cgname {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .7cqw 1cqw;
  font-size: 1.1cqw; letter-spacing: .1em;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); color: var(--tx);
}

/* CG 확대 뷰어 */
#cgview .modal-box { width: 90%; padding: 1.2cqw; }
#cgview .frame { position: relative; aspect-ratio: 16/9; border-radius: 10px;
  overflow: hidden; background: #04070E; }
#cgview .frame .lo-cg { position: absolute; inset: 0; }

/* ================= 게임 메뉴 ================= */
#gamemenu .modal-box { width: 42%; }
.gm-list { display: flex; flex-direction: column; gap: .7cqw; }
.gm-btn {
  padding: 1cqw 1.6cqw; text-align: left;
  font-size: 1.4cqw; letter-spacing: .18em;
  color: var(--tx); background: rgba(10,20,34,.75);
  border: 1px solid var(--line); border-radius: 10px;
  transition: all var(--t-fast) var(--ease);
}
.gm-btn:hover { background: rgba(22,44,72,.92); border-color: var(--line-strong);
  transform: translateX(5px); }

/* ================= 상태(호감도) 화면 ================= */
#status .modal-box { width: 62%; }
.st-row {
  display: grid; grid-template-columns: 6cqw 1fr; gap: 1.4cqw;
  align-items: center; padding: 1.2cqw 0;
  border-bottom: 1px solid var(--line-soft);
}
.st-face { width: 6cqw; height: 6cqw; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--cc, var(--acc)); background: #0A1220; }
.st-face svg { width: 100%; height: 100%; }
.st-face .lo-char-face { display: block; width: 100%; height: 100%;
  background-repeat: no-repeat; }
.st-name { font-size: 1.45cqw; letter-spacing: .12em; color: var(--cc, var(--acc)); font-weight: 700; }
.st-role { font-size: 1.05cqw; color: var(--tx-faint); margin-left: .8em; letter-spacing: .1em; }
.st-bar { margin-top: .6cqw; height: .9cqw; border-radius: 999px;
  background: rgba(255,255,255,.1); overflow: hidden; }
.st-bar i { display: block; height: 100%; background: var(--cc, var(--acc)); border-radius: 999px;
  box-shadow: 0 0 16px -2px var(--cc, var(--acc)); transition: width var(--t-slow) var(--ease); }
.st-num { font-size: 1.1cqw; color: var(--tx-dim); margin-top: .45em;
  font-family: var(--ff-mono); letter-spacing: .1em; }
.st-desc { font-size: 1.1cqw; color: var(--tx-dim); margin-top: .5em; line-height: 1.6; }
.st-note { margin-top: 1.4cqw; font-size: 1.1cqw; color: var(--tx-faint);
  letter-spacing: .08em; line-height: 1.7; }

/* ================= 엔딩 화면 ================= */
#endcard {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgba(3,7,13,.9); gap: 1.4cqw; text-align: center;
}
#endcard.is-on { display: flex; }
#endcard .e-rank { font-size: 1.5cqw; letter-spacing: .6em; }
#endcard .e-rank.TRUE { color: #FFD98A; }
#endcard .e-rank.NORMAL { color: var(--tx-dim); }
#endcard .e-rank.BAD { color: #FF9A85; }
#endcard .e-title {
  font-size: 4.4cqw; letter-spacing: .18em; color: var(--tx);
  text-shadow: 0 0 60px rgba(79,195,247,.5);
}
#endcard .e-line { width: 26cqw; height: 1px; background: var(--line-strong); }
#endcard .e-meta { font-size: 1.2cqw; color: var(--tx-faint); letter-spacing: .2em; }
#endcard .e-btns { margin-top: 1.6cqw; display: flex; gap: 1cqw; }
#endcard.is-on > * { animation: chIn .8s var(--ease) both; }
#endcard.is-on .e-title { animation-delay: .12s; }
#endcard.is-on .e-meta { animation-delay: .24s; }
#endcard .e-kofi { margin-top: .2cqw; }
#endcard.is-on .e-btns { animation-delay: .38s; }
#endcard.is-on .e-kofi { animation-delay: .52s; }

/* ================= 토스트 ================= */
#toast {
  position: absolute; left: 50%; bottom: 32%; transform: translateX(-50%);
  z-index: 88;   /* 모달(86) 위 · 스캔라인(90) 아래 */
  padding: .9cqw 2cqw; border-radius: 999px;
  background: rgba(8,16,28,.95); border: 1px solid var(--line-strong);
  font-size: 1.25cqw; letter-spacing: .14em; color: var(--tx);
  opacity: 0; pointer-events: none; transition: opacity var(--t-mid);
}
#toast.is-on { opacity: 1; }

/* 스크린 리더 전용 */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 레이어 순서 보정 : 타이틀은 UI 레이어 위 */
#title { z-index: 60; pointer-events: none; }
#title.is-on { pointer-events: auto; }

/* ---------- 인라인 span 을 블록으로 (레이아웃 무너짐 방지) ---------- */
.st-name, .st-bar, .st-num, .st-desc { display: block; }
.slot .s-title, .slot .s-sub, .slot .s-time { display: block; }
.gal-card .rank, .gal-card .gt, .gal-card .gw { display: block; }
.aff-chip .bar { display: inline-block; }

/* 갤러리 썸네일에서는 CG 내부 대사 캡션을 숨긴다 (제목과 겹침 방지) */
.cg-card .lo-cg__caption { display: none; }

/* ================= 크레딧 ================= */
#credits .modal-box { width: 52%; }
.cr-head { text-align: center; margin-bottom: 1.6cqw; }
.cr-logo {
  font-size: 2.8cqw; letter-spacing: .2em; font-weight: 800;
  background: linear-gradient(180deg, #FFFFFF 25%, #7FD8FF 75%, #2E7FA8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cr-tag { margin-top: .5cqw; font-size: 1.15cqw; letter-spacing: .32em; color: var(--tx-faint); }
.cr-row {
  display: grid; grid-template-columns: 15cqw 1fr; gap: 1.6cqw;
  align-items: baseline; padding: 1.1cqw 0;
  border-bottom: 1px solid var(--line-soft);
}
.cr-role { font-size: 1.2cqw; letter-spacing: .2em; color: var(--tx-faint); text-align: right; }
.cr-name { display: block; font-size: 1.5cqw; letter-spacing: .1em; color: var(--tx); }
.cr-name + .cr-name { margin-top: .5cqw; }
/* 명단 아래 후원 한 줄. 버전 표기보다 위에 둔다 */
.cr-kofi { margin-top: 1.8cqw; text-align: center; }
.cr-kofi .hint {
  margin: 0 0 .9cqw; font-size: 1.1cqw;
  letter-spacing: .14em; color: var(--tx-faint);
}
.cr-ver {
  margin: 1.6cqw 0 0; text-align: center;
  font-family: var(--ff-mono); font-size: 1cqw;
  letter-spacing: .14em; color: var(--tx-faint);
}

/* ================= 커스텀 커서 ================= */
/* OS 커서 위에 얹는 장식. 점은 거의 즉시, 링은 그보다 느리게 따라온다
 * (지연 값은 tokens.css 의 --t-cur-dot / --t-cur-ring).
 * 스캔라인(90)·토스트(88)보다 위여야 하고, 클릭을 가로채면 안 된다. */
#cursor-dot, #cursor-ring {
  position: fixed; left: 0; top: 0;
  border-radius: 50%; pointer-events: none; z-index: 9999;
  opacity: 0; transition: opacity var(--t-fast) linear;
}
#cursor-dot.is-on, #cursor-ring.is-on { opacity: 1; }
/* 설정에서 끈 상태 */
#cursor-dot.is-off, #cursor-ring.is-off { display: none; }

#cursor-dot {
  width: 7px; height: 7px; background: var(--acc);
  box-shadow: 0 0 12px -2px var(--acc);
  /* 점에도 아주 짧은 지연을 준다. 0 이면 손끝에 붙어 딱딱하게 읽힌다 */
  transition: opacity var(--t-fast) linear, transform var(--t-cur-dot) var(--ease),
              width var(--t-fast) var(--ease), height var(--t-fast) var(--ease);
}
#cursor-ring {
  width: 30px; height: 30px;
  border: 1px solid var(--line-strong);
  /* 점보다 느리게 따라오는 차이가 트레일이 된다 */
  transition: opacity var(--t-fast) linear, transform var(--t-cur-ring) var(--ease),
              width var(--t-fast) var(--ease), height var(--t-fast) var(--ease),
              border-color var(--t-fast) linear;
}

#cursor-dot.is-hot {
  width: 20px; height: 20px;
  mix-blend-mode: difference; background: #fff; box-shadow: none;
}
#cursor-ring.is-hot { width: 46px; height: 46px; border-color: var(--acc); }

/* 마우스가 없는 환경에서는 아예 그리지 않는다 */
@media (hover: none), (pointer: coarse) {
  #cursor-dot, #cursor-ring { display: none; }
}
/* 감속 모션 설정에서는 트레일만 뺀다 (커서는 그대로 보인다) */
@media (prefers-reduced-motion: reduce) {
  #cursor-ring { transition: opacity var(--t-fast) linear; }
}