:root{
  --bg:#120f1f;
  --bg2:#1b1630;
  --ink:#f4eef8;
  --muted:#ad9fc1;
  --card:#1c1730;
  --card2:#241d3d;
  --line:rgba(255,255,255,.10);
  --gold:#f2c66d;
  --pink:#ff6fae;
  --vio:#a884ff;
  --blue:#86baff;
  --mint:#8fe3c5;
  --shadow:0 22px 64px rgba(0,0,0,.35);
  --shadow2:0 12px 26px rgba(0,0,0,.24);
  --serif:"Cormorant Garamond",serif;
  --sans:"IBM Plex Sans KR",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:var(--sans);
  background:
    radial-gradient(circle at 10% 8%, rgba(255,111,174,.16), transparent 24rem),
    radial-gradient(circle at 92% 10%, rgba(134,186,255,.16), transparent 26rem),
    radial-gradient(circle at 40% 108%, rgba(168,132,255,.12), transparent 28rem),
    linear-gradient(180deg, var(--bg), var(--bg2) 48%, #100c1a);
  overflow-x:hidden;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%;-webkit-user-drag:none}
.bg{position:fixed;inset:0;pointer-events:none}
.bg1{
  z-index:-3;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:.20;
}
.bg2{
  z-index:-2;
  opacity:.10;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.shell{width:min(1180px,calc(100% - 36px));margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px clamp(16px,4vw,42px);
  background:rgba(16,12,26,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
}
.brand{
  display:flex; align-items:center; gap:12px;
  border:0; background:transparent; padding:0; color:#fff;
  text-align:left;
}
.brand-mark{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:14px; color:#20172f;
  background:linear-gradient(135deg,var(--gold),var(--pink));
  box-shadow:0 10px 24px rgba(242,198,109,.18);
  font-family:var(--serif); font-size:1.2rem; font-weight:700;
}
.brand-copy strong{
  display:block; font-family:var(--serif); font-size:1.15rem; letter-spacing:.04em;
}
.brand-copy em{
  display:block; margin-top:2px; color:rgba(255,255,255,.54);
  font-style:normal; font-family:var(--mono); font-size:.64rem; letter-spacing:.04em;
}
.nav{display:flex;gap:7px}
.nav button,.filters button,.profile-nav button,.emotion-tabs button{
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#f9f2ff;
  padding:8px 12px;
  font-family:var(--mono);
  font-size:.70rem; font-weight:700;
}
.nav button:hover,.filters button:hover,.filters button.active,.profile-nav button:hover,.emotion-tabs button.active{
  background:linear-gradient(135deg,var(--pink),var(--vio));
  border-color:transparent;
}
.hero{
  padding:34px 0 20px;
}
.eyebrow{
  margin:0 0 8px;
  font-family:var(--mono);
  color:var(--gold);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
}
.hero h1{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(3rem,8vw,6.8rem);
  line-height:.88;
  letter-spacing:-.04em;
}
.hero-sub{
  max-width:720px;
  margin:14px 0 0;
  color:#c0b5d0;
  line-height:1.72;
  font-weight:500;
}
.panel{
  border:1px solid rgba(255,255,255,.10);
  border-radius:30px;
  background:linear-gradient(180deg,rgba(33,26,54,.78),rgba(24,19,39,.86));
  box-shadow:var(--shadow);
}
.browse{
  padding:20px;
}
.panel-head,.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px;
}
.panel-head h2,.section-head h2{
  margin:0;
  font-size:1.6rem;
  line-height:1.08;
  letter-spacing:-.04em;
}
.count{
  margin:0;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.76rem;
}
.search{
  margin-top:16px;
  display:flex; align-items:center; gap:10px;
  height:54px; padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
}
.search span{color:var(--gold);font-weight:900}
.search input{
  width:100%; border:0; outline:0; background:transparent;
  color:#fff; font-weight:700;
}
.search input::placeholder{color:#9489a4}
.filters{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.roster{padding:24px 0 34px}
.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.char-card{
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(34,27,56,.92),rgba(25,20,42,.96));
  box-shadow:var(--shadow2);
  text-align:left; padding:0;
  transition:.18s ease;
  content-visibility:auto;
  contain-intrinsic-size:380px;
}
.char-card:hover{transform:translateY(-4px)}
.char-card:after{
  content:""; position:absolute; left:18px; right:18px; bottom:0; height:4px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,var(--gold),var(--pink),var(--blue));
}
.card-img{
  aspect-ratio:1216/832;
  overflow:hidden;
  background:#0f0c17;
}
.card-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.card-body{padding:15px 16px 18px}
.group-tag{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:999px; padding:5px 8px;
  background:rgba(255,255,255,.06); color:var(--gold);
  font-size:.62rem; font-family:var(--mono); font-weight:700;
}
.card-name{
  margin:10px 0 0; font-size:1.18rem; line-height:1.16; font-weight:900; letter-spacing:-.04em;
}
.card-meta{
  margin:8px 0 0; color:#b8abc9; font-size:.78rem; font-weight:700;
}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.chips span{
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:4px 8px;
  color:#d5cde0;
  background:rgba(255,255,255,.04);
  font-size:.63rem; font-weight:700;
}
.overlay{
  position:fixed; inset:0; z-index:60;
  display:none; place-items:center; padding:18px;
  background:rgba(7,5,12,.70); backdrop-filter:blur(8px);
}
.overlay.show{display:grid}
.modal-card{
  position:relative;
  width:min(1120px,100%);
  max-height:min(860px,calc(100dvh - 36px));
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.78fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:34px;
  background:linear-gradient(180deg,#221b38,#181329);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.close-x{
  position:absolute; top:12px; right:12px; z-index:4;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.08);
}
.visual-col{
  padding:18px;
  background:
    radial-gradient(circle at 10% 8%, rgba(255,111,174,.12), transparent 18rem),
    radial-gradient(circle at 92% 10%, rgba(134,186,255,.12), transparent 18rem);
}
.image-wrap{
  position:relative; overflow:hidden;
  border-radius:26px; background:#0f0c17;
  aspect-ratio:1216/832;
}
.image-wrap img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.image-wrap span{
  position:absolute; left:12px; bottom:12px;
  border-radius:999px; padding:7px 10px;
  background:rgba(15,12,23,.68); color:#fff;
  font-family:var(--mono); font-size:.7rem; font-weight:700;
}
.emotion-tabs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px;
}
.emotion-tabs button{
  border-radius:16px; padding:10px 8px; background:rgba(255,255,255,.06);
}
.info-col{
  overflow:auto; padding:28px 28px 32px;
}
.info-col h3{
  margin:0; font-size:clamp(2rem,4vw,3.2rem); line-height:1.02; letter-spacing:-.05em;
}
.meta{
  margin:10px 0 0; color:#b8abc9; font-weight:700;
}
.keyword-line{
  display:flex; flex-wrap:wrap; gap:7px; margin-top:14px;
}
.keyword-line span{
  border-radius:999px; padding:6px 9px;
  background:rgba(255,255,255,.06); color:#efe6f8; font-size:.72rem; font-weight:700;
}
.info-boxes{
  display:grid; gap:10px; margin-top:18px;
}
.info-boxes section{
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:rgba(255,255,255,.04);
  padding:14px 15px;
}
.info-boxes section.wide{
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
}
.info-boxes b{
  display:block; margin-bottom:6px;
  color:var(--gold); font-size:.74rem; font-family:var(--mono);
}
.info-boxes p{
  margin:0; color:#d3cadf; line-height:1.68;
}
.profile-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;
}
.profile-nav button{
  padding:10px 8px;
}
.footer{
  display:flex; justify-content:space-between; gap:12px;
  padding:14px 0 28px; color:#9e92b0; font-family:var(--mono); font-size:.72rem;
}
@media (max-width:1060px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .bg1,.bg2{display:none}
  .topbar{padding:10px 12px; backdrop-filter:none}
  .brand-mark{width:36px;height:36px}
  .brand-copy strong{font-size:.95rem}
  .brand-copy em{display:none}
  .nav{gap:5px}
  .nav button{padding:7px 8px; font-size:.62rem}
  .shell{width:min(100% - 22px,1180px)}
  .hero{padding:22px 0 14px}
  .hero h1{font-size:clamp(2.3rem,15vw,4.2rem)}
  .hero-sub{font-size:.84rem}
  .browse{padding:16px 14px; border-radius:24px}
  .panel-head h2,.section-head h2{font-size:1.28rem}
  .search{height:46px}
  .filters button{padding:7px 8px; font-size:.62rem}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .char-card{border-radius:20px}
  .card-body{padding:10px 10px 14px}
  .card-name{font-size:.96rem}
  .card-meta{font-size:.64rem}
  .chips{margin-top:8px; gap:5px}
  .chips span{font-size:.54rem; padding:3px 6px}
  .chips span:nth-child(n+3){display:none}
  .overlay{padding:0; backdrop-filter:none}
  .modal-card{
    width:100%; min-height:100dvh; max-height:none; grid-template-columns:1fr; border-radius:0; border:0;
  }
  .visual-col{padding:10px}
  .image-wrap{border-radius:18px; max-height:42svh}
  .image-wrap img{object-fit:contain}
  .emotion-tabs{grid-template-columns:repeat(2,1fr); gap:6px; margin-top:9px}
  .emotion-tabs button{padding:8px 4px; border-radius:13px; font-size:.64rem}
  .info-col{padding:16px 16px 22px}
  .info-col h3{font-size:1.72rem}
  .meta{font-size:.78rem}
  .keyword-line{gap:5px; margin-top:10px}
  .keyword-line span{font-size:.62rem; padding:5px 7px}
  .info-boxes{gap:8px; margin-top:12px}
  .info-boxes section{padding:11px 12px; border-radius:16px}
  .info-boxes b{font-size:.68rem; margin-bottom:4px}
  .info-boxes p{font-size:.78rem; line-height:1.58}
  .profile-nav{margin-top:12px}
  .profile-nav button{padding:8px 6px; font-size:.74rem}
  .footer{display:block; line-height:1.8; padding-top:8px}
}
@media (max-width:380px){
  .grid{gap:8px}
  .card-name{font-size:.88rem}
  .card-meta{font-size:.58rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}


/* v3: remove large title area + compact profile info */
.hero{
  display:none !important;
}

.browse{
  margin-top:22px !important;
}

.info-boxes{
  grid-template-columns:1fr 1fr !important;
}

.info-boxes section{
  min-height:0 !important;
}

@media (max-width:760px){
  .browse{
    margin-top:12px !important;
  }

  .info-boxes{
    grid-template-columns:1fr !important;
  }
}


/* v4: PC roster cards smaller / four columns */
@media (min-width:1061px){
  .grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
  }

  .char-card{
    border-radius:24px !important;
  }

  .card-body{
    padding:12px 13px 16px !important;
  }

  .card-name{
    margin-top:8px !important;
    font-size:1.02rem !important;
    line-height:1.14 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .card-meta{
    margin-top:7px !important;
    font-size:.68rem !important;
    line-height:1.38 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  .group-tag{
    font-size:.56rem !important;
    padding:4px 7px !important;
  }

  .chips{
    gap:5px !important;
    margin-top:8px !important;
  }

  .chips span{
    font-size:.55rem !important;
    padding:3px 7px !important;
  }
}

@media (min-width:1400px){
  .shell{
    width:min(1320px,calc(100% - 48px)) !important;
  }

  .grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
}

@media (min-width:761px) and (max-width:1060px){
  .grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:13px !important;
  }
}