*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#000;--surface:#fff;--text:#25272b;--sub-text:#777c85;--border:#e8e9ed;--accent:#ff9d3b;--accent-dark:#ee861d;--highlight:#fff0a8}
body{font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
button,input{font:inherit}button{cursor:pointer}
.header{background:var(--surface);border-bottom:1px solid var(--border)}
.header-inner,.container{width:min(1100px,calc(100% - 40px));margin:0 auto}
.header-inner{padding:38px 0 32px}.logo{display:flex;align-items:center;gap:9px;margin-bottom:5px;font-size:26px;font-weight:800;letter-spacing:-.7px}
.logo-icon{font-size:27px}.description{color:var(--sub-text);font-size:14px}.container{padding:28px 0 70px}
.search-box{position:relative;margin-bottom:18px}.search-icon{position:absolute;left:19px;top:50%;transform:translateY(-50%);color:#92969e;pointer-events:none}
.search-input{width:100%;height:58px;padding:0 50px 0 51px;border:1px solid #dedfe4;border-radius:10px;outline:none;background:var(--surface);color:var(--text);font-size:16px}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,157,59,.12)}
.clear-button{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:50%;background:#f0f1f3;color:#8a8e95;display:none}.clear-button.show{display:block}
.category-wrap{overflow-x:auto;margin-bottom:29px;scrollbar-width:none}.category-wrap::-webkit-scrollbar{display:none}.categories{display:flex;gap:7px;width:max-content}
.category-button{height:38px;padding:0 17px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:#656a72;font-size:14px;font-weight:600;white-space:nowrap}
.category-button.active{border-color:var(--accent);background:var(--accent);color:#fff}
.result-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:13px;border-bottom:2px solid #35373c}
.result-title{font-size:19px;font-weight:750}.result-count{margin-left:5px;color:var(--accent-dark);font-size:14px;font-weight:700}.sort-select{border:0;outline:none;background:transparent;color:var(--sub-text);font-size:13px}
.term-list{background:var(--surface)}.term-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;padding:21px 18px;border-bottom:1px solid var(--border)}.term-row:hover{background:#fcfcfd}
.term-name{font-size:16px;font-weight:750;word-break:break-all}.chosung{display:inline-block;margin-left:7px;color:#a1a5ac;font-size:12px}
.category-label{display:block;width:max-content;margin-top:7px;padding:2px 7px;border-radius:4px;background:#f2f3f5;color:#848890;font-size:11px;font-weight:600}
.term-description{color:#555a62;font-size:14px;word-break:keep-all}.aliases{margin-top:7px;color:#777c85;font-size:14px;line-height:1.6}
mark{padding:0 1px;border-radius:2px;background:var(--highlight);color:inherit}
.empty{padding:80px 20px;background:var(--surface);text-align:center;color:var(--sub-text)}.empty-icon{margin-bottom:9px;font-size:31px}.empty strong{display:block;margin-bottom:4px;color:#555960;font-size:15px}.empty span{font-size:13px}
footer{padding:30px 20px 45px;color:#a0a4aa;text-align:center;font-size:12px}
@media(max-width:650px){.header-inner,.container{width:calc(100% - 28px)}.header-inner{padding:28px 0 24px}.logo{font-size:23px}.container{padding-top:20px}.search-input{height:54px;font-size:15px}.category-wrap{margin-right:-14px;margin-left:-14px;padding:0 14px}.term-row{display:block;padding:18px 6px}.term-description{margin-top:8px}.category-label{display:inline-block;margin-top:6px}.term-list{background:transparent}}

/* 설명 입력 시 Enter 줄바꿈 유지 */
.term-description{white-space:pre-wrap}

/* 검은 배경 위 결과 헤더 가독성 */
.result-title{color:#fff}
.result-count{color:#ff9d3b}
.sort-select{color:#fff;background:#000}
.sort-select option{color:#25272b;background:#fff}

/* 용어 목록 UI 개선 */
.term-list{
  border-radius:12px;
  overflow:hidden;
}

/* 용어 영역과 설명 영역 사이 세로 구분선 */
.term-row{
  grid-template-columns:190px minmax(0,1fr);
}

.term-row > div:first-child{
  padding-right:20px;
  border-right:1px solid #d9dce1;
}

.term-row > div:last-child{
  padding-left:2px;
}

/* 설명 가독성 강화 */
.term-description{
  color:#30343a;
  font-weight:500;
  line-height:1.75;
}

/* 모바일에서는 세로 배치이므로 칸막이를 가로선으로 전환 */
@media(max-width:650px){
  .term-list{
    border-radius:10px;
  }

  .term-row > div:first-child{
    padding-right:0;
    padding-bottom:10px;
    border-right:0;
    border-bottom:1px solid #e1e3e6;
  }

  .term-row > div:last-child{
    padding-left:0;
    padding-top:2px;
  }

  .term-description{
    margin-top:10px;
  }
}

/* 반응형 수정: 좁은 화면에서도 목록은 항상 흰 배경 유지 */
.term-list{
  background:#fff;
}

/* 카테고리 버튼: 화면 폭이 좁아지면 다음 줄로 자연스럽게 배치 */
.categories{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  gap:7px;
}

.category-wrap{
  overflow:visible;
}

/* 목록 내부 텍스트는 흰 배경 기준으로 명시 */
.term-name{
  color:#25272b;
}

.term-description{
  color:#30343a;
}

.aliases{
  color:#666c75;
}

@media(max-width:650px){
  .term-list{
    background:#fff !important;
  }

  .term-row{
    background:#fff;
    padding:18px 14px;
  }

  .term-row:hover{
    background:#fcfcfd;
  }

  .categories{
    flex-wrap:wrap;
    width:100%;
  }

  .category-wrap{
    margin-left:0;
    margin-right:0;
    padding:0;
    overflow:visible;
  }

  .category-button{
    flex:0 0 auto;
  }
}