/**
 * custom.css
 * 모든 HTML inline style을 CSS로 이동
 * 구조: 기능별 섹션 분리
 */

/* =====================================================================
   1. 레이아웃 유틸리티 - 동적 width 처리
===================================================================== */

/* list.skin.php, view.skin.php - 메인 래퍼 동적 너비 */
.rb_bbs_wrap {
  width: var(--wrapper-width, 100%);
}

.rb_bbs_wrap .sub {
  width: var(--sub-width, auto);
}

/* write.skin.php - 폼 동적 너비 */
form#fwrite {
  width: var(--wrapper-width, 100%);
}

/* =====================================================================
   2. 버튼 & 액션 - 배경색 동적 처리
===================================================================== */



/* view.skin.php - 네비게이션 버튼 */
.fl_btns[aria-label] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* =====================================================================
   3. 타이포그래피 - 텍스트 스타일
===================================================================== */

/* view.skin.php - 이전/다음 버튼 텍스트 */
.nav-btn-text {
  font-size: 13px;
  color: #fff;
  font-weight: 700;
}

/* list.skin.php - 업데이트 정보 텍스트 */
.update-info {
  color: #777;
  padding: 0;
  margin: 0;
  font-size: 13px;
}

/* =====================================================================
   4. 여백 조정
===================================================================== */

/* view.skin.php - 페이지네이션 */
.pg_wrap {
  margin-top: 12px;
}

/* view.skin.php - 파일/링크 카드 섹션 */
.rbv-kv {
  margin: 6px 0;
}

/* view.skin.php - 파일 내용 들여쓰기 */
.file-content-desc {
  margin-left: 24px;
}

/* =====================================================================
   5. 이미지 크기 지정
===================================================================== */

/* view.skin.php - 아이콘 이미지 */
.icon-inline {
  width: 16px;
  height: auto;
}

/* =====================================================================
   6. 폼 요소 & 입력필드
===================================================================== */

/* write.skin.php - 파일 업로드 input 숨김 */
input[type="file"].hidden-input {
  display: none;
}

/* write.skin.php - 파일 위치 기준점 */
.file-wrapper-relative {
  position: relative;
}

/* write.skin.php - 파일 리스트 컨테이너 */
.swiper-container.swiper-wfile {
  overflow: inherit;
  padding-bottom: 15px;
  font-size: 11px;
}

/* write.skin.php - 자동저장 래퍼 */
.autosave_wrapper_ul1 {
  padding-right: 0;
}




/* 안전한 '거의 안 보임' 스타일 */
.badge-mini {
    /* 1. 완전히 숨기지 않고 30%만 보이게 설정 (패널티 회피) */
    opacity: 0.3; 
    
    /* 2. 흑백 처리 (눈에 덜 띔) */
    filter: grayscale(100%);
    
    /* 기존 설정 유지 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    color: #999 !important; /* 연한 회색 */
    font-size: 11px;
    font-weight: normal;
    text-decoration: none !important;
    padding: 5px; 
    margin-left: 0;
    transition: all 0.3s ease;
}

.badge-mini:hover {
    color: #333 !important; /* 진한 회색 (거의 검정) */
    opacity: 1 !important;  /* 투명도 제거 (선명하게) */
    transform: scale(1.1);  /* 살짝 커지는 효과는 유지 (클릭감 제공) */
    cursor: pointer;        /* 손가락 모양 커서 확실하게 */
}


.list-top-info {background:#f9f9f9;padding:10px 15px;border:1px solid #eee;font-size:14px;color:#777;margin-bottom:10px;letter-spacing:-.5px;line-height:1.3;}

.ps-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ps-list li {
  display: grid;
  grid-template-columns: 1fr auto; /* 항목명 왼쪽, 가격 오른쪽 */
  align-items: center;
}
.ps-list .label { white-space: nowrap; }
.ps-list .price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: .2px;
}
/* highlight 항목 은은 강조 */
.ps-list li.is-hot .label { font-weight: 700;font-size:16px;}
.ps-list li.is-hot .price { font-weight: 700;font-size:16px;}

	.cs {font-size:2em;font-weight:bold;}
	.cs_time {margin-top:15px;}
	.cs_bold {font-weight:700;}

	.d_open {font-size:2em;font-weight:700;}
	.rbv-kv {margin-top:15px;}
  .rbv-count{ font-weight:800; }

@media (max-width: 640px) {
  .rb_bbs_wrap {
    padding: 0;
  }

  .rbv-card,
  .ranked-wrap .card {
    padding: 10px;
    box-shadow: 1px 1px 1px 1px #eee;
  }

  .list-top-info {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }

  .ps-list { gap: 4px; }
}