/* ------------------------------
   강조/마커 & 카운트 배지
------------------------------ */
.marker{ padding:0 .15em }
.marker-yellow{ background:linear-gradient(transparent 30%,#FFE564 60%); border-radius:2px }
html.dark .marker-yellow{ background:linear-gradient(transparent 30%,rgba(234,179,8,.65) 60%) }

.em-nick{ font-weight:800 }
.em-count{ font-weight:900 }
.em-count-badge{
    display:inline-block; padding:.1rem .45rem; border-radius:9999px;
    background:#FFE564; color:#111827; font-weight:900; line-height:1; font-size:.85rem;
}
html.dark .em-count-badge{ background:#fde68a; color:#0b0f14 }

/* ------------------------------
   카테고리 색상 시스템
------------------------------ */
.cat-color{ border:1px solid transparent; transition:transform .05s, opacity .15s }
.cat-color:hover{ opacity:.9; transform:translateY(-1px) }

.badge-cat{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.38rem .6rem; border-radius:9999px; font-weight:600; font-size:.85rem; white-space:nowrap;
}

.cat-chip{
    display:inline-flex; align-items:center; padding:.15rem .45rem; border-radius:9999px;
    font-weight:700; font-size:.70rem; line-height:1;
}

/* ------------------------------
   카드 컴팩트 모드
------------------------------ */
.rude-card{ padding:.65rem !important }
.rude-card > .flex{ gap:.75rem !important }

.rude-card .thumb{ width:96px; height:72px; border-radius:.75rem; overflow:hidden }
@media (min-width:640px){ .rude-card .thumb{ width:112px; height:84px } }
@media (min-width:768px){ .rude-card .thumb{ width:120px; height:90px } }

.rude-card h3{ line-height:1.28; margin-top:2px; margin-bottom:0 }
.rude-card .meta{ font-size:11.5px; gap:.625rem .375rem }

/* ------------------------------
   루크 영역: 크기 고정 + 가운데
------------------------------ */
.ruku-aside{
    display:flex; justify-content:flex-start; align-items:center;
    padding:.5rem 0; box-sizing:border-box;
}
.ruku-hero{
    display:block; width:auto; height:auto; max-width:200px; max-height:200px;
    object-fit:contain; background:transparent;
}
@media (min-width:768px){
    .ruku-hero{ max-width:240px; max-height:240px }
}

/* ===============================
   검색창 (제목 우측) — 사각형 버전
   =============================== */

/* 폭 유틸 */
.w-8ch{ width:8ch } .w-10ch{ width:10ch } .w-12ch{ width:12ch } .w-14ch{ width:14ch } .w-16ch{ width:16ch }
.w-20ch{ width:20ch }
.w-24ch{ width:24ch }

/* 컨테이너: 사각형 + 고정 배경 */
.nick-search{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.35rem .45rem;
    border:1px solid rgba(148,163,184,.35);
    border-radius:8px;
    background:#ffffff;
    box-shadow:none;
}
html.dark .nick-search{
    border-color:#33383f;
    background:#1f1f1f;
}

/* 인풋 초기화 + 내부/오토필 그림자 제거 */
.nick-input{
    border:0; outline:none; background:transparent; color:#111827;
    font-size:.875rem; line-height:1.25rem; height:2rem;
    appearance:none; -webkit-appearance:none; box-shadow:none;
}
html.dark .nick-input{ color:#e5e7eb }
.nick-input::placeholder{ color:#9CA3AF }
html.dark .nick-input::placeholder{ color:#6b7280 }

/* 브라우저 장식/오토필 제거 */
.nick-input,
.nick-input[type="text"],
.nick-input[type="search"]{ background-color:transparent !important; box-shadow:none !important }
.nick-input::-webkit-search-decoration,
.nick-input::-webkit-search-cancel-button{ display:none }
.nick-input:-webkit-autofill,
.nick-input:-webkit-autofill:hover,
.nick-input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px transparent inset !important;
    box-shadow:0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color:inherit;
    transition: background-color 9999s;
}
/* Firefox/Edge 선택 배경 제거(옵션) */
.nick-input:-internal-autofill-selected{ background-color:transparent !important }

/* 검색 버튼 */
.nick-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:2.2rem; height:2.2rem;
    border-radius:6px;
    background:#3b82f6; color:#fff; border:0; box-shadow:none;
    transition:transform .06s ease, opacity .15s ease, background-color .15s ease;
}
.nick-btn:hover{ opacity:.95 }
.nick-btn:active{ transform:translateY(1px) scale(.99) }
.nick-btn:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px }

/* 포커스 링 */
.nick-search:focus-within{
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
    border-color:#3b82f6;
}

/* md 미만: 루크 숨김 */
@media (max-width: 767.98px){
    .ruku-aside{ display:none !important; }
}

/* 닉네임 강조 */
.em-nick{
    font-weight:900;
    color:#0ea5e9; /* sky-500 */
}
html.dark .em-nick{ color:#7dd3fc } /* sky-300 */

/* 카운트 배지(슬림) */
.em-count-badge{
    display:inline-flex; align-items:center;
    padding:.08rem .5rem;
    border-radius:9999px;
    font-weight:900; line-height:1; font-size:.92em;
}

/* 색상 변형들 */
.cnt-green  { background:rgba(16,185,129,.18); color:#047857 }
html.dark .cnt-green  { background:rgba(16,185,129,.24); color:#a7f3d0 }

.cnt-yellow { background:#FFE564; color:#111827 }
html.dark .cnt-yellow { background:#fde68a; color:#0b0f14 }

.cnt-orange { background:rgba(249,115,22,.18); color:#9a3412 }
html.dark .cnt-orange { background:rgba(249,115,22,.24); color:#fdba74 }

.cnt-red-strong{ background:rgba(220,38,38,.28); color:#7f1d1d }
html.dark .cnt-red-strong{ background:rgba(220,38,38,.36); color:#fecaca }

/* ===============================
   간격 튜닝
   =============================== */
.mb-tight{ margin-bottom:0.7rem }  /* 제목+검색 아래 30% 붙임 */
.summary-row{ margin-bottom:1.3rem }/* 요약↔현황 30% 벌림 */

/* ===============================
   선 구분선 유틸
   =============================== */

/* 가로 구분선 (solid 기본, dashed 변형 제공) */
.sep-line{
    border-top:1px solid rgba(148,163,184,.5);
    margin:.75rem 0;
}
html.dark .sep-line{ border-top-color:#33383f }

/* 간격 변형 */
.sep-xs{ margin:.4rem 0 }
.sep-sm{ margin:.6rem 0 }
.sep-md{ margin:.9rem 0 }
.sep-lg{ margin:1.2rem 0 }
.sep-xl{ margin:1.6rem 0 }

/* 점선 버전이 필요할 때 이 클래스를 추가로 붙이면 됨 */
.sep-dashed{ border-top-style:dashed }

/* ===== 선(보더) 제거 오버라이드 ===== */

/* 글 목록 사이 구분선 제거 */
.sep-list > a:not(:first-child){
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: .5rem; /* 간격만 살짝 유지하고 싶으면 남겨둠 */
}

/* 루크(우측) 옆 세로선 제거: 혹시 남아있는 곳도 무력화 */
.with-col-sep-md{
    border-left: 0 !important;
    padding-left: 0 !important;
}

html.dark .sep-list > a:not(:first-child){
    border-top-color:#33383f;
}

/* md 이상에서 좌/우 컬럼 사이 세로 구분선 */
@media (min-width:768px){
    .with-col-sep-md{
        border-left:1px solid rgba(148,163,184,.4);
        padding-left:.9rem;
    }
    html.dark .with-col-sep-md{ border-left-color:#33383f }
}