/* ======================================
   1) 좋아요 / 북마크 위치 & 스타일 (썸네일 위)
   ====================================== */

/* later를 버튼 묶음 래퍼로 재정의 */
.thumbs-box {
  position: relative !important;
}

.thumbs-box .later {
  position: absolute !Important;
  top: auto !important;
  bottom: 8px !important;
  left: 8px !important;
  right: auto !important;

  display: flex !important;
  gap: 8px !important;
  justify-content: flex-start !important;

  width: auto !important;
  height: auto !important;

  background: none !important;
  font: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 50 !important;
  pointer-events: auto !important;
  transition: opacity .2s;
}

/* 이미지 아래, 정보영역 위에 가로로 배치 (cBox-list용) */
.cBox-list .later { 
  display:flex; 
  gap:8px; 
  align-items:center; 
  margin-top:8px; 
}
.later .like-button, 
.later .bookmark-button { 
  display:inline-flex; 
  gap:4px; 
  align-items:center; 
}


/* ======================================
   2) 공지 글쓰기 – 파일 찾기 버튼 / 확인 버튼
   ====================================== */

/* 1) 파일 찾아보기 버튼: label 자체를 버튼처럼 보이게 */
.form_area .t7 td .btn_file_find {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 39px !important;     /* .file_wrap 높이와 동일 */
  background: #bdbdbd !important;
  color: #fff !important;
  border-radius: 4px;
  cursor: pointer;
}

/* 파일 input은 숨김 유지 */
.form_area .t7 td .file_add {
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  position: absolute !important;
  left: -9999px !important; /* 접근성용 라벨로 클릭 */
}

/* 2) 확인 버튼 파란색 고정 */
.form_area + .btn_area .btn_ok {
  background: #4279ff !important;
  border: 1px solid #4279ff !important;
  color: #fff !important;
}


/* ===============================
   설정창: 재생목록 추가 / 알림
   =============================== */

/* 줄 전체 클릭 가능 + hover 배경 */
#serviceHeader .modeSetting .modeSet .settings-playlist-add,
#serviceHeader .modeSetting .modeSet .settings-notice {
  cursor: pointer;
}

#serviceHeader .modeSetting .modeSet .settings-playlist-add:hover,
#serviceHeader .modeSetting .modeSet .settings-notice:hover {
  background: rgba(145, 150, 161, 0.1);
}

/* 버튼 텍스트/정렬 – .my_mode 와 같은 구조 */
#serviceHeader .modeSetting .modeSet .settings-playlist-add .my_playlist_add_btn,
#serviceHeader .modeSetting .modeSet .settings-notice .my_notice_btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  margin: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: #17191c;
  text-align: left;
}

/* 아이콘 공통 스타일 */
#serviceHeader .modeSetting .modeSet .settings-playlist-add .setting-icon,
#serviceHeader .modeSetting .modeSet .settings-notice .setting-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ─ 재생목록 추가 아이콘 (라이트 모드: + 사각형) ─ */
#serviceHeader .modeSetting .modeSet .settings-playlist-add .setting-icon-playlist {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3crect x='3' y='3' width='18' height='18' rx='2' ry='2' fill='none' stroke='%23555' stroke-width='1.5'/%3e%3cpath d='M12 7v10M7 12h10' stroke='%23555' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e");
}

/* 재생목록 추가 – 다크 모드 */
html[dark=true] #serviceHeader .modeSetting .modeSet .settings-playlist-add .my_playlist_add_btn {
  color: #f5f5f5;
}
html[dark=true] #serviceHeader .modeSetting .modeSet .settings-playlist-add .setting-icon-playlist {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3crect x='3' y='3' width='18' height='18' rx='2' ry='2' fill='none' stroke='%23f5f5f5' stroke-width='1.5'/%3e%3cpath d='M12 7v10M7 12h10' stroke='%23f5f5f5' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e");
}

/* ─ 알림 아이콘 (라이트 모드: 종 모양) ─ */
#serviceHeader .modeSetting .modeSet .settings-notice .setting-icon-notice {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23555' d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2Zm6-6V11a6 6 0 1 0-12 0v5L4 18v1h16v-1l-2-2Z'/%3e%3c/svg%3e");
}

/* 알림 – 다크 모드 */
html[dark=true] #serviceHeader .modeSetting .modeSet .settings-notice .my_notice_btn {
  color: #f5f5f5;
}
html[dark=true] #serviceHeader .modeSetting .modeSet .settings-notice .setting-icon-notice {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23f5f5f5' d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2Zm6-6V11a6 6 0 1 0-12 0v5L4 18v1h16v-1l-2-2Z'/%3e%3c/svg%3e");
}

.playlist-image-field {
  /* 필요하면 여기에 margin/padding 조정 */
}

.playlist-image-preview-wrapper {
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
}

.playlist-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.playlist-image-input-wrapper {
  min-width: 0;
}

@media (max-width: 576px) {
  .playlist-image-preview-wrapper {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
  }
}

/* ===============================
   반응형 표시 규칙 (기존 동작 유지)
   =============================== */

/* 1456px 이상(데스크탑)에서는:
   - 상단 재생목록 추가 / 알림 버튼 그대로 사용
   - 설정창 안 재생목록/알림 줄은 숨김 */
@media (min-width: 1456px) {
  #serviceHeader .modeSetting .modeSet .settings-playlist-add,
  #serviceHeader .modeSetting .modeSet .settings-notice {
    display: none;
  }
}

/* 1455px 이하 – 모바일/태블릿 */
@media (max-width: 1455px) {
  /* 1) 상단 헤더의 재생목록 추가 버튼 숨김 */
  #serviceHeader .serviceUtil [class^=btn-].btn-broadcast {
    display: none !important;
  }

  /* 2) 상단 헤더의 알림 버튼 숨김 */
  #serviceHeader .noticeArea .btn-notice {
    display: none !important;
  }

  /* 3) 설정창이 열렸을 때만 '재생목록 추가' / '알림' 줄 보이게 */
  #serviceHeader .serviceUtil .settingWrap.on + .modeSetting .modeSet .settings-playlist-add,
  #serviceHeader .serviceUtil .settingWrap.on + .modeSetting .modeSet .settings-notice {
    display: flex !important;
  }
}

#serviceHeader .modeSetting .modeSet .settings .my_mode {
  padding-left: 16px;  /* 우선 dark모드 조절하는 부분 설정창 아래 목록에서 우측으로 더 밀어서 통일 */
}


/* ===== 플레이 순위 comment 툴팁 (side_info strong override) ===== */

/* 기존 .side_info strong 에 overflow:hidden 이 있어서 말풍선이 잘려서 안 보임
   → playlist-comment-tooltip 전용으로 overflow: visible 로 덮어쓰기 */
#top_playlist_sidebar .side_info .playlist-comment-tooltip {
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;     /* 한 줄만 보여주고 */
  overflow: visible;          /* 🔥 말풍선 안 잘리게 */
  white-space: normal;
  text-overflow: ellipsis;
  word-break: break-all;
  line-height: 1.4;
}

/* 말풍선 박스 */
#top_playlist_sidebar .side_info .playlist-comment-tooltip::after {
  content: attr(data-full-comment);
  position: absolute;
  left: 0;
  bottom: 100%;
  transform: translateY(-4px);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.4;
  white-space: normal;
  max-width: 260px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
}

/* hover 되는 즉시 바로 보이게 */
#top_playlist_sidebar .side_info .playlist-comment-tooltip:hover::after {
  opacity: 1;
}

/* ✅ cBox 썸네일 업데이트 날짜 배지 */
.thumbs-box { position: relative; }

.thumbs-box .update-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  background: rgba(0,0,0,.6);
  z-index: 30;
  pointer-events: none;
}

/* =========================
   Mobile Search Toggle
   ========================= */
@media (max-width: 768px) {
  /* ✅ 기본: 모바일에서는 검색영역 숨김 */
  #serviceHeader .innerHeader .top_searcharea_wrap {
    display: none !important;
  }

  /* ✅ 모바일에서 검색 버튼은 보이게(현재 styles.css에서 display:none이라서) */
  #listWrap #serviceHeader .serviceUtil .btn-search {
    display: inline-flex !important;
  }

  /* ✅ search-open 상태: 검색영역만 풀스크린으로 표시 */
  body.search-open #serviceHeader .innerHeader .top_searcharea_wrap {
    display: block !important;
  }

  /* ✅ search-open 상태: 기존 헤더(로고/메뉴/유틸 등) 숨김 → 검색영역만 보이게 */
  body.search-open #serviceHeader .innerHeader > :not(.top_searcharea_wrap) {
    display: none !important;
  }

  .settingWrap {
  display: flex;
}
}
@media (max-width: 768px) {
  body.search-open .subBanner_fullBanner__SNZqb.subBanner_brand___dOk0,
  body.search-open [data-testid="section-header real_time_hot_issues"],
  body.search-open .cBox_slide {
    display: none !important;
  }
}