@charset "UTF-8";
/* CSS Document */

:root{
  --transition-fast:0.2s;
  --transition-medium:0.3s;

  --active-filter-border:#f37021;
  --active-filter-bg:rgba(243, 112, 33, 0.22);

  --panel:#0b0c10;
  --panel-2:#101218;
  --border:rgba(148,163,184,0.22);
}

/* 배경 */
#rgb-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  width:100%;
  height:100%;
  display:block;
}

/* dimmer */
.bg-dimmer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 700px at 50% 35%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, rgba(5,5,9,0.24), rgba(5,5,9,0.68));
}

/* navbar */
.navbar{
  transition:box-shadow var(--transition-medium), background var(--transition-medium);
}

/* tooltip 세부(overflow/z-index/강제 숨김) */
a[data-tip]{ overflow:visible; }
a[data-tip]::before{ display:none !important; }
a[data-tip]::after{
  border:none;
  z-index:99999;
}
.navbar.scrolled a[data-tip]::after,
.navbar.scrolled a[data-tip]:hover::after{
  opacity:0 !important;
  display:none;
}

/* sns 아이콘 */
.sns-btn{ text-decoration:none; }
.sns-btn img{
  width:20px;
  height:20px;
  display:block;
  transition:transform .2s;
  filter: brightness(0) invert(1);
  opacity:0.95;
}
.sns-btn:hover img{
  transform:scale(1.1);
  opacity:1;
}

/* hamburger bar */
.hamburger{ padding:0; }
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after{
  background:rgba(255,255,255,0.82);
  transition:transform .25s ease, top .25s ease, opacity .2s ease, background .2s ease;
}

/* mobile-panel overflow 변경 */
.mobile-panel{ overflow:hidden; }

/* mobile-links padding/hover transform + 라벨/아이콘 추가 정의 */
.mobile-links{ padding:0; }
.mobile-links a{ transition:transform .2s; }
.mobile-links a:hover{ transform:none; }
.mobile-links .nav-icon{
  width:20px;
  height:20px;
  filter: brightness(0) invert(1);
  opacity:0.95;
}
.mobile-links .nav-label{
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--text);
}

/* =========================
   Publication List 전용 추가 스타일 (공통에 없음)
========================= */
.filter-toggle{
  width:100%;
  box-sizing:border-box;
  margin:10px 0 10px;
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.10);
  color:var(--muted);
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  user-select:none;
  box-shadow:0 10px 22px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(255,255,255,0.06);
  text-shadow:none;
}
.filter-toggle span.label{ font-weight:600; }
.filter-toggle span.icon{ font-size:16px; }

#controls-wrap{
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-12px);
  transition:
    max-height 0.8s ease-in-out,
    opacity 0.7s ease-in-out,
    transform 0.8s ease-in-out;
}
#controls-wrap:not(.collapsed){
  max-height:2000px;
  opacity:1;
  transform:translateY(0);
}
#controls-wrap.collapsed{
  max-height:0;
  opacity:0;
  transform:translateY(-12px);
}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin:18px 0 20px;
}
.filter-group{
  position:relative;
  border-radius:6px;
  padding:14px 16px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 12px 28px rgba(0,0,0,0.38), 0 0 0 0.5px rgba(255,255,255,0.06);
  flex:1 0 100%;
  min-width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.filter-group h3{
  margin:0 0 10px;
  font-size:13px;
  font-weight:600;
  color:rgba(232,234,240,0.82);
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.buttons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

@media (min-width:1000px){
  .controls{ flex-wrap:nowrap; width:100%; }
  .filter-group{ flex:1 1 0; min-width:0; width:auto; }
}

.controls .buttons button{
  position:relative;
  border-radius:6px;
  padding:6px 14px;
  font-size:12px;
  cursor:pointer;
  background:rgba(255,255,255,0.03);
  color:#fff;
  border:1px solid rgba(255,255,255,0.10);
  transition: box-shadow 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
  white-space:nowrap;
  box-shadow:
    0 1px 1px rgba(255,255,255,0.10) inset,
    0 10px 20px rgba(0,0,0,0.35);
  overflow:hidden;
}
.controls .buttons button::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width:60%;
  height:220%;
  background:linear-gradient(120deg,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,0.45) 45%,
    rgba(255,255,255,0.0) 100%);
  transform:translate3d(-120%, 0, 0) skewX(-18deg);
  opacity:0;
  pointer-events:none;
}
.controls .buttons button:hover{
  transform:translateY(-1px);
  box-shadow:
    0 1px 1px rgba(255,255,255,0.14) inset,
    0 14px 28px rgba(0,0,0,0.42);
  border-color:rgba(255,255,255,0.22);
}
.controls .buttons button:hover::before{
  opacity:1;
  animation:buttonShine 0.7s ease-out forwards;
}
.controls .buttons button.active-filter{
  background-color:var(--active-filter-bg);
  color:var(--active-filter-border);
  border-color:var(--active-filter-border);
  box-shadow:
    0 1px 1px rgba(255,255,255,0.18) inset,
    0 16px 34px rgba(0,0,0,0.45),
    0 0 0 1px rgba(0,0,0,0.22);
}

.reset-wrap{ width:100%; margin-bottom:12px; }
.reset-wrap button{
  width:100%;
  border-radius:6px;
  padding:14px 16px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.10);
  color:var(--muted);
  box-shadow:0 12px 28px rgba(0,0,0,0.38), 0 0 0 0.5px rgba(255,255,255,0.06);
  box-sizing:border-box;
  overflow:hidden;
}
.reset-wrap button:hover{
  box-shadow:
    0 1px 1px rgba(255,255,255,0.14) inset,
    0 14px 28px rgba(0,0,0,0.42);
}

.divider{
  width:100%;
  border-top:1px solid rgba(255,255,255,0.10);
  margin:22px 0 18px;
  box-shadow:none;
}

#papers{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  justify-content:center;
}

.paper{
  position:relative;
  max-width:400px;
  width:100%;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border-radius:6px;
  padding:22px 26px;
  border:1px solid rgba(255,255,255,0.12);
  line-height:1.5;
  font-size:13px;
  color:var(--text);
  overflow:visible;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.42),
    0 0 0 0.6px rgba(255,255,255,0.06);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.paper::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 10px 24px rgba(0,0,0,0.28);
  transform:translate(6px, 7px);
  z-index:-1;
  transition:transform 0.35s cubic-bezier(.25,.1,.25,1);
}
.paper::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 10px 24px rgba(0,0,0,0.22);
  transform:translate(12px, 13px);
  z-index:-2;
  transition:transform 0.45s cubic-bezier(.25,.1,.25,1);
}
.paper:hover{
  transform:translateY(2px) rotate(0.3deg);
  box-shadow:
    0 22px 48px rgba(0,0,0,0.52),
    0 0 0 0.6px rgba(255,255,255,0.08);
}
.paper:hover::before{ transform:translate(4px, 10px) rotate(-0.6deg); }
.paper:hover::after{  transform:translate(14px, 18px) rotate(0.9deg); }

.paper.highlight{
  transform:translateY(2px);
  background-color:var(--active-filter-bg);
  border-color:var(--active-filter-border);
  color:var(--text);
  box-shadow:
    0 26px 56px rgba(0,0,0,0.55),
    0 0 0 0.8px rgba(0,0,0,0.18);
}
.paper.highlight::before,
.paper.highlight::after{
  border-color:rgba(255,255,255,0.16);
}

.paper strong.num{
  font-weight:700;
  margin-right:6px;
  color:rgba(232,234,240,0.55);
}
.paper .meta{
  font-size:12px;
  color:rgba(232,234,240,0.68);
  margin-top:4px;
}
.author-name{
  font-weight:700;
  font-size:14px;
}

/* 버튼 색 매핑(그룹별 nth-child 매핑) */
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(1){background-color:rgba(255,78,0,0.22);border-color:rgba(255,78,0,0.85);color:rgb(255,78,0);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(2){background-color:rgba(255,94,10,0.22);border-color:rgba(255,94,10,0.85);color:rgb(255,94,10);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(3){background-color:rgba(255,110,20,0.22);border-color:rgba(255,110,20,0.85);color:rgb(255,110,20);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(4){background-color:rgba(255,126,30,0.22);border-color:rgba(255,126,30,0.85);color:rgb(255,126,30);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(5){background-color:rgba(255,142,40,0.22);border-color:rgba(255,142,40,0.85);color:rgb(255,142,40);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(6){background-color:rgba(255,158,50,0.22);border-color:rgba(255,158,50,0.85);color:rgb(255,158,50);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(7){background-color:rgba(255,174,60,0.22);border-color:rgba(255,174,60,0.85);color:rgb(255,174,60);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(8){background-color:rgba(255,190,70,0.22);border-color:rgba(255,190,70,0.85);color:rgb(255,190,70);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(9){background-color:rgba(255,206,80,0.22);border-color:rgba(255,206,80,0.85);color:rgb(255,206,80);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(10){background-color:rgba(255,222,90,0.22);border-color:rgba(255,222,90,0.85);color:rgb(255,222,90);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(11){background-color:rgba(255,226,104,0.22);border-color:rgba(255,226,104,0.85);color:rgb(255,226,104);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(12){background-color:rgba(255,230,118,0.22);border-color:rgba(255,230,118,0.85);color:rgb(255,230,118);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(13){background-color:rgba(255,234,132,0.22);border-color:rgba(255,234,132,0.85);color:rgb(255,234,132);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(14){background-color:rgba(255,238,146,0.22);border-color:rgba(255,238,146,0.85);color:rgb(255,238,146);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(15){background-color:rgba(255,242,160,0.22);border-color:rgba(255,242,160,0.85);color:rgb(255,242,160);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(16){background-color:rgba(255,245,174,0.22);border-color:rgba(255,245,174,0.85);color:rgb(255,245,174);}
.controls .filter-group:nth-of-type(1) .buttons button:nth-child(17){background-color:rgba(255,249,188,0.22);border-color:rgba(255,249,188,0.85);color:rgb(255,249,188);}

.controls .filter-group:nth-of-type(2) .buttons button:nth-child(1){background-color:rgba(84,255,0,0.20);border-color:rgba(84,255,0,0.85);color:rgb(84,255,0);}
.controls .filter-group:nth-of-type(2) .buttons button:nth-child(2){background-color:rgba(70,255,38,0.20);border-color:rgba(70,255,38,0.85);color:rgb(70,255,38);}
.controls .filter-group:nth-of-type(2) .buttons button:nth-child(3){background-color:rgba(55,255,77,0.20);border-color:rgba(55,255,77,0.85);color:rgb(55,255,77);}
.controls .filter-group:nth-of-type(2) .buttons button:nth-child(4){background-color:rgba(40,255,115,0.20);border-color:rgba(40,255,115,0.85);color:rgb(40,255,115);}
.controls .filter-group:nth-of-type(2) .buttons button:nth-child(5){background-color:rgba(26,255,153,0.20);border-color:rgba(26,255,153,0.85);color:rgb(26,255,153);}
.controls .filter-group:nth-of-type(2) .buttons button:nth-child(6){background-color:rgba(11,255,191,0.20);border-color:rgba(11,255,191,0.85);color:rgb(11,255,191);}
.controls .filter-group:nth-of-type(2) .buttons button:nth-child(7){background-color:rgba(0,255,214,0.20);border-color:rgba(0,255,214,0.85);color:rgb(0,255,214);}
.controls .filter-group:nth-of-type(2) .buttons button:nth-child(8){background-color:rgba(0,240,255,0.20);border-color:rgba(0,240,255,0.85);color:rgb(0,240,255);}

.controls .filter-group:nth-of-type(3) .buttons button:nth-child(1){background-color:rgba(51,153,255,0.20);border-color:rgba(51,153,255,0.85);color:rgb(51,153,255);}
.controls .filter-group:nth-of-type(3) .buttons button:nth-child(2){background-color:rgba(68,147,255,0.20);border-color:rgba(68,147,255,0.85);color:rgb(68,147,255);}
.controls .filter-group:nth-of-type(3) .buttons button:nth-child(3){background-color:rgba(85,141,255,0.20);border-color:rgba(85,141,255,0.85);color:rgb(85,141,255);}
.controls .filter-group:nth-of-type(3) .buttons button:nth-child(4){background-color:rgba(102,135,255,0.20);border-color:rgba(102,135,255,0.85);color:rgb(102,135,255);}
.controls .filter-group:nth-of-type(3) .buttons button:nth-child(5){background-color:rgba(119,129,255,0.20);border-color:rgba(119,129,255,0.85);color:rgb(119,129,255);}
.controls .filter-group:nth-of-type(3) .buttons button:nth-child(6){background-color:rgba(136,123,255,0.20);border-color:rgba(136,123,255,0.85);color:rgb(136,123,255);}
.controls .filter-group:nth-of-type(3) .buttons button:nth-child(7){background-color:rgba(153,117,255,0.20);border-color:rgba(153,117,255,0.85);color:rgb(153,117,255);}
.controls .filter-group:nth-of-type(3) .buttons button:nth-child(8){background-color:rgba(170,111,255,0.20);border-color:rgba(170,111,255,0.85);color:rgb(170,111,255);}
.controls .filter-group:nth-of-type(3) .buttons button:nth-child(9){background-color:rgba(187,105,255,0.20);border-color:rgba(187,105,255,0.85);color:rgb(187,105,255);}
.controls .filter-group:nth-of-type(3) .buttons button:nth-child(10){background-color:rgba(204,99,255,0.20);border-color:rgba(204,99,255,0.85);color:rgb(204,99,255);}

.controls .filter-group:nth-of-type(4) .buttons button:nth-child(1){background-color:rgba(255,0,132,0.22);border-color:rgba(255,0,132,0.85);color:rgb(255,0,132);}
.controls .filter-group:nth-of-type(4) .buttons button:nth-child(2){background-color:rgba(255,216,0,0.22);border-color:rgba(255,216,0,0.85);color:rgb(255,216,0);}

/* publication 전용 애니메이션 */
.paper.flow-in{ animation:flowIn 0.55s cubic-bezier(0.22,0.61,0.36,1) forwards; }
.paper.flow-reset{ animation:flowReset 0.4s ease-out forwards; }

@keyframes flowIn{
  0%{ transform:translateY(24px); opacity:0; }
  50%{ transform:translateY(-5px); opacity:1; }
  100%{ transform:translateY(0); opacity:1; }
}
@keyframes flowReset{
  0%{ transform:translateY(10px); opacity:.7; }
  100%{ transform:translateY(0); opacity:1; }
}
@keyframes buttonShine{
  0%{ transform:translate3d(-120%,0,0) skewX(-18deg); opacity:0; }
  40%{ opacity:1; }
  100%{ transform:translate3d(160%,0,0) skewX(-18deg); opacity:0; }
}