/* 사전가입 한정 캐릭터 선택 — 디자인 결과물(character-select.html)의 비주얼을 그대로 옮겼다.
   앱의 다른 화면과 클래스가 부딪히지 않도록 전부 #charView 안에서 cs- 접두사로 쓴다.
   이 화면만은 앱 테마를 따르지 않고 어두운 보라 배경을 고정한다 — 카드의 3D 일러스트가
   주인공이고, 밝은 배경에서는 인물이 배경에 묻힌다. */
#charView {
  background: radial-gradient(120% 70% at 50% 0%, #241F3B 0%, #171425 58%, #100E1A 100%);
  color: #EDEAF7;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#charView .cs-app {
  width: 100%; max-width: 412px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px 12px 28px;
  font-family: 'Apple SD Gothic Neo', 'Pretendard', 'Noto Sans KR', sans-serif;
}

@keyframes csRingGlow { 0% { opacity: .55 } 50% { opacity: 1 } 100% { opacity: .55 } }

#charView .cs-hdr { display: flex; align-items: center; gap: 9px; padding: 0 4px; }
#charView .cs-logo {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(150deg, #54C2F9, #2F7FE0); box-shadow: 0 3px 10px rgba(47, 127, 224, .5);
}
#charView .cs-hdr h1 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
#charView .cs-hdr p { margin: 1px 0 0; font-size: 11.5px; font-weight: 600; color: rgba(201, 195, 222, .62); }

/* 99명 한정 고지 — 지시서상 반드시 보여야 하는 문구라 화면 맨 위에 고정한다 */
#charView .cs-limit {
  border-radius: 14px; padding: 12px 14px; font-size: 12.5px; line-height: 1.55;
  background: rgba(84, 194, 249, .1); border: 1px solid rgba(84, 194, 249, .28);
  color: rgba(233, 229, 246, .88);
}
#charView .cs-limit b { color: #7FD4FF; }
#charView .cs-limit .cs-left { font-size: 13.5px; font-weight: 800; color: #fff; }
#charView .cs-limit.cs-closed { background: rgba(237, 234, 247, .06); border-color: rgba(237, 234, 247, .14); }

#charView .cs-tabs {
  display: flex; gap: 4px; padding: 4px; border-radius: 14px;
  background: rgba(237, 234, 247, .06); border: 1px solid rgba(237, 234, 247, .1);
}
#charView .cs-tab {
  flex: 1; height: 38px; border: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 800; cursor: pointer; user-select: none; transition: all .2s;
  background: transparent; color: rgba(201, 195, 222, .72); font-family: inherit;
}
#charView .cs-tab.on {
  background: linear-gradient(150deg, #54C2F9, #2F7FE0); color: #fff;
  box-shadow: 0 4px 12px rgba(47, 127, 224, .4);
}

#charView .cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#charView .cs-card {
  position: relative; border-radius: 18px; overflow: hidden; cursor: pointer; user-select: none;
  aspect-ratio: 4/5; border: 0; padding: 0; background: transparent;
  transition: transform .22s cubic-bezier(.3, 1.3, .6, 1), box-shadow .22s;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .42);
}
#charView .cs-card.on { transform: scale(1.02); box-shadow: 0 14px 30px rgba(47, 127, 224, .35), 0 4px 12px rgba(0, 0, 0, .5); }
/* 인물 중심 — 배경은 채도·밝기를 눌러 뒤로 보낸다 */
#charView .cs-photo {
  position: absolute; inset: 0; background-size: cover; background-position: center 12%;
  filter: saturate(.82) brightness(.86); transition: filter .25s;
}
#charView .cs-card.on .cs-photo { filter: saturate(1.06) brightness(1.04); }
#charView .cs-vig {
  position: absolute; inset: 0;
  background: radial-gradient(82% 66% at 50% 32%, rgba(0, 0, 0, 0) 44%, rgba(16, 14, 26, .26) 80%, rgba(16, 14, 26, .5) 100%);
}
#charView .cs-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, rgba(16, 14, 26, 0) 0%, rgba(16, 14, 26, .34) 54%, rgba(16, 14, 26, .66) 100%);
}
#charView .cs-meta { position: absolute; left: 11px; right: 11px; bottom: 10px; text-align: left; }
#charView .cs-meta b {
  display: block; font-size: 15px; font-weight: 800; color: #F4F1FB; letter-spacing: -.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
#charView .cs-meta span {
  display: block; font-size: 11px; font-weight: 600; color: rgba(233, 229, 246, .78);
  margin-top: 2px; text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
#charView .cs-age {
  position: absolute; top: 9px; left: 9px; padding: 3px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; color: #EDEAF7;
  background: rgba(16, 14, 26, .55); backdrop-filter: blur(3px);
}
#charView .cs-ring {
  position: absolute; inset: 0; border-radius: 18px; border: 2.5px solid #54C2F9;
  box-shadow: 0 0 18px rgba(84, 194, 249, .55), inset 0 0 18px rgba(84, 194, 249, .22);
  opacity: 0; animation: csRingGlow 2s ease-in-out infinite; pointer-events: none; transition: opacity .2s;
}
#charView .cs-card.on .cs-ring { opacity: 1; }
#charView .cs-check {
  position: absolute; top: 9px; right: 9px; width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(150deg, #54C2F9, #2F7FE0); box-shadow: 0 3px 9px rgba(47, 127, 224, .6);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: #fff; opacity: 0; transform: scale(.6); transition: all .2s;
}
#charView .cs-card.on .cs-check { opacity: 1; transform: scale(1); }

#charView .cs-summary {
  border-radius: 18px; padding: 15px 17px;
  background: linear-gradient(168deg, #3A3459 0%, #282343 100%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1);
  display: flex; align-items: center; gap: 13px;
}
#charView .cs-thumb {
  width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0;
  background-size: cover; background-position: center 14%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(84, 194, 249, .5);
}
#charView .cs-summary b { display: block; font-size: 15.5px; font-weight: 800; color: #F4F1FB; letter-spacing: -.01em; }
#charView .cs-summary span {
  display: block; font-size: 11.5px; font-weight: 600; color: rgba(201, 195, 222, .72);
  margin-top: 2px; line-height: 1.4;
}

#charView .cs-start {
  height: 54px; border: 0; border-radius: 16px;
  background: linear-gradient(150deg, #54C2F9, #2F7FE0); box-shadow: 0 8px 20px rgba(47, 127, 224, .42);
  font-size: 15.5px; font-weight: 800; color: #fff; cursor: pointer; user-select: none;
  transition: transform .12s; font-family: inherit;
}
#charView .cs-start:active { transform: translateY(3px); }
#charView .cs-start[disabled] { background: rgba(237, 234, 247, .12); box-shadow: none; color: rgba(201, 195, 222, .5); cursor: default; }
#charView .cs-later {
  height: 44px; border: 0; border-radius: 14px; background: transparent;
  font-size: 13px; font-weight: 700; color: rgba(201, 195, 222, .66); cursor: pointer; font-family: inherit;
}
#charView .cs-foot { text-align: center; font-size: 11px; line-height: 1.7; color: rgba(201, 195, 222, .5); }

/* 확정한 뒤 — 카드는 남기되 고를 수는 없다 (변경 경로를 만들지 않는다) */
#charView .cs-done {
  border-radius: 18px; padding: 18px; text-align: center;
  background: linear-gradient(168deg, #3A3459 0%, #282343 100%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1);
}
#charView .cs-done .cs-thumb { width: 96px; height: 96px; border-radius: 24px; margin: 0 auto 12px; }
#charView .cs-done b { display: block; font-size: 17px; font-weight: 800; color: #F4F1FB; }
#charView .cs-done span { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(201, 195, 222, .78); line-height: 1.6; }
#charView .cs-badge {
  display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; color: #0E1622;
  background: linear-gradient(150deg, #7FD4FF, #54C2F9);
}