/* 짭레터넷 사용 안내 페이지 스타일 — 다크 테마 + 탭 + 게시판 모달.
   index.html 의 <link rel="stylesheet"> 로 로드. readme-page.js 의 #__chap_letter_style 인라인 주입 대체. */

* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Pretendard", sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  color: #e9ecef;
  background: #1a1a1a;
  line-height: 1.6;
}

/* 탭 네비 — 모바일에서 탭이 화면 폭을 넘으면 영역만 가로 스크롤 (다른 콘텐츠는 안 따라감) */
#tabs {
  display: flex !important;
  gap: 4px;
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 1px solid #343a40;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;         /* 모바일 — 좌우(가로) 스크롤만, 상하 흔들림 방지 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge */
}
#tabs::-webkit-scrollbar { display: none; }  /* WebKit */
#tabs .tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #6c757d;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  flex-shrink: 0;
  white-space: nowrap;
}
/* 서열표 서브탭 영역 (.shelf-level-tabs) — 같은 처리 (ohsorry-shelf 기본 CSS override) */
.shelf-level-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge */
  max-width: 100%;
}
.shelf-level-tabs::-webkit-scrollbar { display: none; }  /* WebKit */
.shelf-lv-tab {
  flex-shrink: 0 !important;
  white-space: nowrap;
}

/* 서열표 상단 컨트롤 — PC 1줄 / 모바일 2줄 */
.shelf-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 12px;
  flex-wrap: wrap;
}
.shelf-controls-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  position: relative;
}
.shelf-controls-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .shelf-controls { flex-wrap: wrap; }
  .shelf-controls-left { width: 100%; }
  .shelf-controls-right {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}
/* 모바일 — 곡 셀이 EX스코어·DJ레벨을 둘 다 표시(gist 3열 격자, 768px 기준)하므로 "표시" 토글 불필요.
   #content 로 특정성을 올려 뒤에 오는 .shelf-control-group { display:flex } 에 안 덮이게. */
@media (max-width: 768px) {
  #content .shelf-control-rightfield { display: none; }
}
/* 캡처 버튼 — 카메라 아이콘(텍스트 없음): 아이콘 중앙 정렬 + 패딩 축소 */
#content .shelf-capture-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
}

.shelf-control-group {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-wrap: nowrap;
}
/* 서열표 범례 — 항목(FULL COMBO 등) 안은 줄바꿈 없음. 8개 항목은 4개씩 2덩어리로 묶여
   (shelf.js 가 .shelf-lamp-legend-group 생성), 덩어리 단위로만 줄바꿈. */
#content .shelf-lamp-legend-item { white-space: nowrap; }
.shelf-lamp-legend-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px 12px;
}
.shelf-control-label {
  color: #868e96;
  font-size: 12px;
}

/* 서열표 링크형 컨트롤(박스 없는 버튼) */
.shelf-dot-sep {
  color: #495057;
  font-size: 12px;
  user-select: none;
}
.shelf-link-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--link-color, #adb5bd);
  padding: 2px 2px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
}
.shelf-link-btn:hover {
  color: var(--link-color, #ced4da);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shelf-link-btn.active {
  color: var(--link-color, #f1f3f5);
  font-weight: 800;
}
/* lamp(vType) 필터 — 미선택은 회색 (선택 시 위 .active 가 램프색 + 볼드 적용).
   sort/rightField 버튼은 --link-color 가 없어 영향 없음. */
.shelf-link-btn[data-vtype]:not(.active) {
  color: #868e96;
}
/* 곡 셀 좌측 lamp 색박스 — hover 마퀴로 흐르는 곡명이 색박스 위가 아닌 아래로 가려지게.
   기본은 곡명(.shelf-song-text)이 뒤 형제라 위에 그려짐 → 색박스에 z-index 부여해 올림. */
.shelf-song-lampbox { position: relative; z-index: 2; }
#tabs .tab-btn:hover {
  color: #ced4da;
}
#tabs .tab-btn.active {
  color: #ff6b9d;
  border-bottom-color: #ff6b9d;
}

/* 마크다운 렌더 */
#content h1 { font-size: 28px; margin: 0 0 8px; color: #f8f9fa; }
#content h2 {
  font-size: 20px; margin: 32px 0 12px; padding-bottom: 6px;
  border-bottom: 2px solid #343a40; color: #f8f9fa;
}
#content h3 { font-size: 16px; margin: 20px 0 8px; color: #ced4da; }
#content p { margin: 8px 0; }
#content ul, #content ol { padding-left: 24px; margin: 8px 0; }
#content li { margin: 4px 0; }
#content table {
  border-collapse: collapse; margin: 12px 0; width: 100%;
  font-size: 14px;
}
#content th, #content td {
  border: 1px solid #343a40; padding: 8px 12px; text-align: left;
}
#content th { background: #2d2d2d; color: #f8f9fa; }
#content code {
  background: #2d2d2d; padding: 2px 6px; border-radius: 3px;
  font-size: 13px; font-family: "SF Mono", Menlo, Consolas, monospace;
  color: #ff9bce;
}
#content pre {
  background: #232323; border: none; border-radius: 0 0 6px 6px;
  padding: 14px; overflow-x: auto; font-size: 13px;
  margin: 0;
  scrollbar-width: thin; scrollbar-color: #4a4a4a transparent;
}
#content .code-block {
  margin: 12px 0;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
#content .code-block:hover { box-shadow: 0 0 0 1px #4a4a4a; }
#content .code-header {
  display: flex; justify-content: space-between; align-items: center;
  background: #1f1f1f; padding: 8px 14px;
  font-size: 11px; letter-spacing: 0.5px; font-weight: 600;
  border-bottom: 1px solid #343a40;
}
#content .code-lang { color: #6c757d; }
#content .code-copy { color: #ff6b9d; }
#content .code-block:hover .code-copy { color: #ff8eb1; }
#content pre::-webkit-scrollbar { height: 6px; }
#content pre::-webkit-scrollbar-track { background: transparent; }
#content pre::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 3px; }
#content pre::-webkit-scrollbar-thumb:hover { background: #5a5a5a; }
#content pre code {
  background: transparent; padding: 0; color: #e9ecef; font-size: 13px;
}

/* 토스트 */
#__chap_toast {
  position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%) translateY(20px);
  padding: 10px 20px; border-radius: 6px; border: 1px solid;
  font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Pretendard", sans-serif;
}
#__chap_toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
/* 서열표 곡명 클릭 시 뜨는 차트 row 토스트 (ohsorry-shelf renderChartRow) — 클릭 위치에 배치 */
#__shelf_row_toast {
  position: fixed; left: 0; top: 0;
  width: 320px; max-width: calc(100vw - 16px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
  z-index: 9999; cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
  border-radius: 4px;
}
#__shelf_row_toast.show {
  opacity: 1; pointer-events: auto;
}

/* 서열표 곡별 랭킹 모달 */
.__shelf_rank_modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.__shelf_rank_dialog {
  position: relative;
  width: min(760px, 100%);
  max-height: 95vh;
  background: #15171b;
  border: 1px solid #343a40;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.__shelf_rank_close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 1;
  border: 0;
  background: transparent;
  color: #868e96;
  font-size: 22px;
  cursor: pointer;
}
.__shelf_rank_close:hover { color: #f1f3f5; }
.__shelf_rank_content {
  max-height: 95vh;
  overflow: auto;
  padding: 24px;
  scrollbar-width: thin;                   /* Firefox — 얇게 */
  scrollbar-color: #3a3f47 transparent;    /* thumb / track(투명) */
}
.__shelf_rank_content::-webkit-scrollbar { width: 6px; height: 6px; }
.__shelf_rank_content::-webkit-scrollbar-track { background: transparent; }
.__shelf_rank_content::-webkit-scrollbar-thumb { background: #3a3f47; border-radius: 3px; }
.__shelf_rank_content::-webkit-scrollbar-thumb:hover { background: #4a505a; }
.__shelf_rank_loading,
.__shelf_rank_error,
.__shelf_rank_empty {
  color: #adb5bd;
  text-align: center;
  padding: 34px 12px;
}
.__shelf_rank_error { color: #ffc9c9; }
.__shelf_rank_head { padding-right: 34px; }
.__shelf_rank_series {
  color: #868e96;
  font-size: 12px;
  margin-bottom: 4px;
}
.__shelf_rank_head h2 {
  color: #f8f9fa;
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 14px;
}
/* 난이도(N/H/A/L) 행 — 플레이데이터 row(__pd_tr) 룩 재사용. __pd_tbody grid 가 전역이라 그대로 적용됨.
   클릭 시 해당 난이도 랭킹으로 전환, 현재 난이도는 __shelf_rank_pdactive 로 강조. */
.__shelf_rank_pdtabs {
  margin: 0 0 14px;
  border-radius: 6px;
  overflow: hidden;
}
.__shelf_rank_pdtabs .__pd_tr { cursor: pointer; }
/* 현재 선택 난이도 강조 — 그 난이도 slot 색을 옅게(opacity) 깐 배경. (NORMAL/HYPER/ANOTHER/LEGGENDARIA) */
.__shelf_rank_pdtabs .__pd_tr.__shelf_rank_pdactive[data-diff="NORMAL"]      > .__pd_cell { background: rgba(25, 113, 194, 0.2); }
.__shelf_rank_pdtabs .__pd_tr.__shelf_rank_pdactive[data-diff="HYPER"]       > .__pd_cell { background: rgba(220, 175, 69, 0.2); }
.__shelf_rank_pdtabs .__pd_tr.__shelf_rank_pdactive[data-diff="ANOTHER"]     > .__pd_cell { background: rgba(220, 53, 69, 0.2); }
.__shelf_rank_pdtabs .__pd_tr.__shelf_rank_pdactive[data-diff="LEGGENDARIA"] > .__pd_cell { background: rgba(214, 120, 200, 0.2); }
/* 점수 히스토리 그래프 — 난이도 행과 랭킹 테이블 사이. played_version 별 색 라인(SVG). */
.__shelf_rank_history {
  margin: 0 0 14px;
  padding: 8px 8px 4px;
}
.__shelf_hist_svg { width: 100%; height: auto; display: block; }
.__shelf_hist_grid { stroke: #2d323c; stroke-width: 1; }
.__shelf_hist_axis { fill: #868e96; font-size: 8px; font-variant-numeric: tabular-nums; }
.__shelf_hist_toplabel { fill: #adb5bd; font-size: 6px; }
.__shelf_hist_topscore { fill: #f8f9fa; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.__shelf_hist_topdate { fill: #868e96; font-size: 6px; font-variant-numeric: tabular-nums; }
.__shelf_hist_legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; padding: 0 4px; }
.__shelf_hist_leg { display: inline-flex; align-items: center; gap: 4px; color: #adb5bd; font-size: 11px; }
.__shelf_hist_leg i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.__shelf_rank_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.__shelf_rank_table th,
.__shelf_rank_table td {
  border-bottom: 1px solid #2b3036;
  padding: 8px 6px;
  text-align: right;
  color: #dee2e6;
}
.__shelf_rank_table th {
  position: sticky;
  top: 0;
  background: #15171b;
  color: #868e96;
  font-weight: 600;
}
.__shelf_rank_table th:nth-child(2),
.__shelf_rank_table td:nth-child(2),
.__shelf_rank_table th:nth-child(3),
.__shelf_rank_table td:nth-child(3) {
  text-align: left;
}
.__shelf_rank_name {
  color: #f8f9fa;
  font-weight: 600;
}
.__shelf_rank_gap {
  color: #868e96;
  font-size: 11px;
  margin-left: 3px;
}
/* 본인 중심 압축 — ⋯ 생략줄 + 본인 row 강조 */
.__shelf_rank_gaprow td { text-align: center; color: #5e6168; padding: 2px 6px; letter-spacing: 3px; }
.__shelf_rank_ownrow td { background: rgba(255, 255, 255, 0.07); color: #fff; font-weight: 600; }
@media (max-width: 640px) {
  .__shelf_rank_modal { padding: 0; align-items: stretch; }
  .__shelf_rank_dialog { width: 100%; max-height: var(--vh, 100dvh); border-radius: 0; border-left: 0; border-right: 0; }
  .__shelf_rank_content { max-height: var(--vh, 100dvh); padding: 22px 12px; }
  .__shelf_rank_table { font-size: 12px; }
  /* 풀스크린 시엔 X 버튼 숨김 — 뒤로가기 버튼/Esc/배경 클릭 으로 닫음 (historyStack). */
  .__shelf_rank_close { display: none; }
}

/* blockquote / hr / link */
#content blockquote {
  border-left: 4px solid #fab005; background: #2d2818;
  margin: 12px 0; padding: 8px 14px; color: #ced4da;
}
#content blockquote p { margin: 4px 0; }
#content hr { border: none; border-top: 1px solid #343a40; margin: 24px 0; }
#content a { color: #74c0fc; text-decoration: none; }
#content a:hover { text-decoration: underline; }
#content strong { color: #f8f9fa; }
footer {
  margin-top: 48px; padding-top: 16px; border-top: 1px solid #343a40;
  font-size: 12px; color: #6c757d; text-align: center; line-height: 1.5;
}

/* 게시판 (난이도 추정 탭) — 박스 없이 가로줄만, hover 시 음영.
   selector 에 #content prefix — `#content li { margin: 4px 0 }` 의 specificity 를 이기기 위함. */
#content .__board_list {
  list-style: none; padding: 0; margin: 0;
}
#content .__board_item {
  margin: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #2d323c;
  cursor: pointer;
  transition: background 0.12s;
}
#content .__board_item:hover { background: #232830; }
#content .__board_item.__pinned {
  border-left: 3px solid #ff6b9d;
  /* 기본 음영 없음 — pinned 표시는 좌측 핑크 줄 + .__pin_badge 로만 */
}
.__board_title { font-weight: 600; color: #f1f3f5; flex: 1; margin-right: 12px; }
.__board_title .__pin_badge { color: #ff6b9d; margin-right: 6px; font-size: 12px; }
.__board_date { color: #adb5bd; font-size: 12px; white-space: nowrap; }
.__board_pagination {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  margin-top: 20px; color: #adb5bd; font-size: 14px;
}
.__board_pagination button {
  background: #343a40; color: #f1f3f5; border: 1px solid #495057; border-radius: 4px;
  padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.__board_pagination button:hover { background: #495057; }
.__board_modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.__board_modal_dialog {
  background: #1a1a1a; border: 1px solid #343a40; border-radius: 8px;
  max-width: 1100px; width: 100%; max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column; position: relative;
}
.__board_modal_close {
  position: absolute; top: 10px; right: 12px; background: transparent; border: none;
  color: #adb5bd; font-size: 22px; cursor: pointer; padding: 4px 8px;
}
.__board_modal_close:hover { color: #f1f3f5; }
.__board_modal_content {
  padding: 36px 28px 28px; overflow-y: auto; line-height: 1.6;
  /* Firefox 스크롤바 — 얇게 + 트랙 투명 */
  scrollbar-width: thin;
  scrollbar-color: #4a4a4a transparent;
}
/* WebKit 스크롤바 — 6px 얇게, 트랙 배경 없음, thumb 만 */
.__board_modal_content::-webkit-scrollbar { width: 6px; }
.__board_modal_content::-webkit-scrollbar-track { background: transparent; }
.__board_modal_content::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 3px; }
.__board_modal_content::-webkit-scrollbar-thumb:hover { background: #5a5a5a; }
.__board_modal_content h1 { margin-top: 0; }

/* 모달 — 모바일 (≤600px) 에서 전체 화면 차지 (여백 / 둥근 모서리 / border 제거) */
@media (max-width: 600px) {
  .__board_modal { padding: 0; }
  .__board_modal_dialog {
    max-width: 100%;
    max-height: var(--vh, 100dvh);
    width: 100vw;
    height: var(--vh, 100dvh);
    border-radius: 0;
    border: none;
  }
  .__board_modal_content { padding: 44px 12px 16px; }
  /* 풀스크린 시엔 X 버튼 숨김 — 뒤로가기 버튼/Esc/배경 클릭 으로 닫음 (historyStack). */
  .__board_modal_close { display: none; }
}

/* 난이도 추정 테이블 필터 — 모달 안 sticky (스크롤해도 상단 고정) */
.__rating_filters {
  position: sticky; top: 0;
  z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 0 12px;
  margin: 0 0 6px;
  background: #1a1a1a;
  border-bottom: 1px solid #2d323c;
  font-size: 13px;
  color: #ced4da;
}
.__rating_filters input[type="text"] {
  background: #2d2d2d; border: 1px solid #343a40; color: #e9ecef;
  padding: 5px 10px; border-radius: 4px; font-size: 13px; font-family: inherit;
  width: 160px;
}
.__rating_filters input[type="number"] {
  background: #2d2d2d; border: 1px solid #343a40; color: #e9ecef;
  padding: 5px 8px; border-radius: 4px; font-size: 13px; font-family: inherit;
  width: 60px;
}
.__rating_filters select {
  background: #2d2d2d; border: 1px solid #343a40; color: #e9ecef;
  padding: 5px 8px; border-radius: 4px; font-size: 13px; font-family: inherit;
}
.__rating_filters input:focus,
.__rating_filters select:focus {
  outline: none; border-color: #ff6b9d;
}
.__rating_filters label {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; user-select: none;
}
.__rating_filters .__f_group {
  display: inline-flex; align-items: center; gap: 4px;
  color: #adb5bd;
}
.__rating_filters .__f_count {
  margin-left: auto;
  color: #ff6b9d; font-weight: 600; font-size: 12px;
}

/* 난이도 추정 — 모바일 (≤600px): 통합 모드 시 한 곡을 2 line grid 로 표시 + count 컬럼 숨김 */
@media (max-width: 600px) {
  .__rating_table.__view_integrated { display: block; }
  .__rating_table.__view_integrated thead { display: none; }
  .__rating_table.__view_integrated tbody { display: block; }
  .__rating_table.__view_integrated tr {
    display: grid;
    grid-template-columns: 0.5fr 0.5fr 1fr 1fr 1fr;
    grid-template-areas:
      "lv    diff  title title title"
      "zasa  zasa  ec    hc      exh";
    column-gap: 6px;
    row-gap: 2px;
    padding: 8px 4px;
    border-bottom: 1px solid #2d323c;
  }
  .__rating_table.__view_integrated td {
    border: none !important;
    padding: 2px 4px !important;
    font-size: 12px;
  }
  /* 컬럼 순서 (HTML td 순): 1 곡명 / 2 채보 / 3 LV / 4 zasa / 5 EC / 6 HC / 7 EXH / 8~10 counts */
  .__rating_table.__view_integrated td:nth-child(1) { grid-area: title; text-align: left; }
  .__rating_table.__view_integrated td:nth-child(2) { grid-area: diff;  text-align: left; }
  .__rating_table.__view_integrated td:nth-child(3) { grid-area: lv;    text-align: right;}
  .__rating_table.__view_integrated td:nth-child(4) { grid-area: zasa; }
  .__rating_table.__view_integrated td:nth-child(5) { grid-area: ec; }
  .__rating_table.__view_integrated td:nth-child(6) { grid-area: hc; }
  .__rating_table.__view_integrated td:nth-child(7) { grid-area: exh; }
  .__rating_table.__view_integrated td:nth-child(n+8) { display: none; }

  /* 분리 모드 — 1행: 곡명 / 채보 / LV, 2행: zasa / lamp / rating / count */
  .__rating_table.__view_split { display: block; }
  .__rating_table.__view_split thead { display: none; }
  .__rating_table.__view_split tbody { display: block; }
  .__rating_table.__view_split tr {
    display: grid;
    grid-template-columns: 0.5fr 0.5fr 1fr 1fr;
    grid-template-areas:
      "lv   diff  title  title"
      "zasa zasa  lamp  rating";
    column-gap: 6px;
    row-gap: 2px;
    padding: 8px 4px;
    border-bottom: 1px solid #2d323c;
  }
  .__rating_table.__view_split td {
    border: none !important;
    padding: 2px 4px !important;
    font-size: 12px;
  }
  /* 컬럼 순서 (HTML td 순): 1 곡명 / 2 채보 / 3 LV / 4 zasa / 5 lamp / 6 rating / 7 count */
  .__rating_table.__view_split td:nth-child(1) { grid-area: title; text-align: left; }
  .__rating_table.__view_split td:nth-child(2) { grid-area: diff;  text-align: left; }
  .__rating_table.__view_split td:nth-child(3) { grid-area: lv;    text-align: right;}
  .__rating_table.__view_split td:nth-child(4) { grid-area: zasa; }
  .__rating_table.__view_split td:nth-child(5) { grid-area: lamp; }
  .__rating_table.__view_split td:nth-child(6) { grid-area: rating; }
  .__rating_table.__view_split td:nth-child(7) { display: none; }
}
/* 난이도 추정 테이블 필터 영역 — 모달 안 sticky (스크롤해도 상단 고정).
   .__board_modal_content 의 padding 상단 36px 위쪽으로 stick (top: -36px 로 상쇄). */
.__rating_filters {
  position: sticky;
  top: -36px;
  z-index: 2;
  margin: 0 -28px 12px;
  padding: 10px 28px;
  background: #1a1a1a;
  border-bottom: 1px solid #2d323c;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 13px;
  color: #adb5bd;
}
.__rating_filters input[type="text"] {
  background: #2d2d2d; border: 1px solid #343a40; color: #e9ecef;
  padding: 5px 10px; border-radius: 4px; font-size: 13px; font-family: inherit;
  min-width: 160px;
}
.__rating_filters input[type="number"] {
  background: #2d2d2d; border: 1px solid #343a40; color: #e9ecef;
  padding: 5px 8px; border-radius: 4px; font-size: 13px; font-family: inherit;
  width: 70px;
}
.__rating_filters select {
  background: #2d2d2d; border: 1px solid #343a40; color: #e9ecef;
  padding: 5px 8px; border-radius: 4px; font-size: 13px; font-family: inherit;
}
.__rating_filters label {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  user-select: none; color: #ced4da;
}
.__rating_filters input[type="checkbox"] {
  accent-color: #ff6b9d;
  cursor: pointer;
}
.__rating_filters .__f_group {
  display: inline-flex; align-items: center; gap: 4px;
}
.__rating_filters .__f_count {
  margin-left: auto;
  color: #ff6b9d;
  font-weight: 600;
  font-size: 12px;
}

/* 게시물 모달 안 마크다운 표 — 세로줄 없이 연한 가로줄만, hover 시 음영 */
.__board_modal_content table {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0;
  font-size: 13px;
}
.__board_modal_content th,
.__board_modal_content td {
  border: none;
  border-bottom: 1px solid #2d323c;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
}
.__board_modal_content thead th {
  border-bottom: 2px solid #495057;
  color: #f8f9fa;
  font-weight: 700;
  background: transparent;
}
.__board_modal_content tbody tr {
  transition: background 0.12s;
}
.__board_modal_content tbody tr:hover {
  background: #232830;
}

/* 유저 목록/랭킹 탭 — 세로줄 없이 가로줄만, 행 클릭 시 서열표 이동 + hover 음영.
   #content prefix — `#content th/td { border: 1px }` 의 specificity 를 이기기 위함. */
#content .__users_table {
  width: 400px;
  max-width: 100%;  /* 모바일 — 화면이 400px 미만이면 넘치지 않게 줄어듦 */
  /* sticky thead 호환성 — collapse 보단 separate 가 모든 브라우저에서 안정적 */
  border-collapse: separate;
  border-spacing: 0;
}
/* 컬럼 헤더(thead th) sticky — 검색바(.__rating_filters, sticky top:0) 바로 아래로.
   top 값은 users.js 가 측정해서 #content 의 CSS var(--users-filters-h)로 설정. z-index 4 — 검색바(5)보다 아래. */
#content .__users_table thead th {
  position: sticky;
  top: var(--users-filters-h, 52px);
  z-index: 4;
  background: #1a1a1a;
}
/* iOS Safari 는 table 의 max-width 를 제대로 적용하지 않는 경우가 있어,
   좁은 화면에서는 width 자체를 100% 로 둔다 (max-width 의존 X). */
@media (max-width: 480px) {
  #content .__users_table { width: 100%; }
}

/* 유저 탭 PC 레이아웃 — 표(좌, 400px) + 프로필 카드(우). 좁은 화면은 카드 숨김 → 행 클릭 시 모달. */
.__users_layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
/* 유저 리스트 컬럼 — 검색바 + 테이블 묶음 (좌측). 카드(우측) 와 flex 로 나란히.
   sticky 안 함 — 페이지 자체 스크롤 시 두 컬럼 같이 움직임. 컬럼 안 sticky 검색바 / thead 는 페이지 viewport top 에 stick. */
.__users_list_col {
  flex: 0 0 auto;
  min-width: 0;
}
/* 검색바 — users 탭 컨텍스트 에서만 sticky 동작 (.__rating_filters 의 두 번째 정의가 모달용 top:-36px;z-index:2 로
   덮여있어 그대로면 안 stick. .__users_list_col 셀렉터로 특정성 올려 override). */
.__users_list_col .__rating_filters {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 0 12px;
  padding: 10px 0;
}
/* .__users_table_wrap — .__users_list_col 의 자식이라 flex/overflow 속성 불필요해 규칙 자체 제거 (sticky thead 가 list_col scrollport 기준으로 동작) */
.__users_card {
  /* 카드 sticky — 유저 목록이 길어 페이지 스크롤이 진행돼도 카드는 viewport top 에 머무름.
     sticky 가 의미를 가지려면 자식이 부모 height 보다 짧아야 해서 max-height 100dvh + overflow-y auto 필수.
     (list_col 은 sticky 안 함 — 둘 다 sticky 면 큰 쪽이 부모 height 를 결정해 한쪽만 stick 되던 문제 있었음.) */
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  background: #1f1f1f;
  border-radius: 8px;
  /* padding-top 0 — 카드 안 sticky 프로필 헤더가 카드 top (= viewport top) 부터 시작해서 위 공백 없이 차도록. */
  padding: 0 16px 14px;
  max-height: var(--vh, 100dvh);
  overflow-y: auto;
  /* 스크롤바 숨김 — 카드 안 스크롤은 마우스 휠로 자연스럽게 동작, 시각적 스크롤바는 안 보임. */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE / Edge legacy */
}
.__users_card::-webkit-scrollbar { display: none; }  /* WebKit / Chromium */
.__users_card_close {
  display: none;  /* PC 인라인 카드에선 숨김 — 모바일 모달 모드(.is-modal)에서만 노출 */
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  border: none;
  background: none;
  width: 28px;
  height: 28px;
  color: #adb5bd;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.__users_card_close:hover { color: #fff; }
.__users_card_empty {
  color: #868e96;
  text-align: center;
  padding: 60px 12px;
  font-size: 13px;
}
/* 좁은 화면 — 표만 표시. 카드 영역은 행 클릭 시 .is-modal 로 풀스크린 모달이 됨. */
@media (max-width: 820px) {
  .__users_layout { display: block; }
  .__users_card { display: none; }
  /* 모바일 — 유저 클릭 시 목록을 숨기고 카드를 일반 흐름으로 표시. 페이지(window)가 자연스럽게 스크롤되므로
     고정 오버레이의 배경 스크롤 새는 버그가 원천적으로 없음. 헤더는 document 스크롤 기준 sticky. */
  .__users_layout.__card_open .__users_list_col { display: none; }
  /* 카드 전체화면 — 탭바 + "유저 정보" 제목/안내문 숨김 + body 여백 제거. (닫으면 __card_fs 해제되어 원복) */
  body.__card_fs { padding: 0; }
  body.__card_fs #tabs { display: none !important; }   /* #tabs 인라인 style="display:flex" 덮기 */
  body.__card_fs #content > h1,
  body.__card_fs #content > p { display: none; }
  .__users_card.is-modal {
    display: block;
    position: static;      /* 고정 오버레이 아님 — 일반 흐름 */
    max-height: none;      /* 내부 스크롤 캡 해제 → 페이지가 스크롤 */
    overflow: visible;
    border-radius: 0;
    padding: 0 12px 14px;
  }
  /* 모바일 모달 — 카드 좌우 padding 12px 만큼 negative margin 으로 헤더 배경을 화면 좌우 끝까지 확장.
     상단은 카드 padding-top 이 0 이라 negative margin 불필요. iOS safe-area 노치 영역까지 배경 확장. */
  .__users_card.is-modal .__uprofile_header {
    padding: calc(14px + env(safe-area-inset-top)) 12px 14px;
    margin: 0 -12px 14px;
    border-radius: 0;
  }
  /* 풀스크린(.is-modal) 시 X 버튼 안 보이게 — 뒤로가기 버튼으로 닫음 (historyStack).
     PC 인라인 카드도 base 가 display:none 이라 PC/모바일 모두 X 숨김. */
}
#content .__users_table th,
#content .__users_table td {
  border: none;
  border-bottom: 1px solid #343a40;
}
/* 컬럼 라벨(헤더)은 줄바꿈 없이 한 줄 */
#content .__users_table th { white-space: nowrap; }
.__users_table tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}
.__users_table tbody tr:hover {
  background: #232830;
}

/* 유저 탭 랭킹 표시레벨 토글 (12 | 11 | Other) — 선택 시 밝은색 볼드, 비선택 시 어두운색 */
.__u_lv_btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #6c757d;
  padding: 2px 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.__u_lv_btn:hover { color: #ced4da; }
.__u_lv_btn.active {
  color: #f1f3f5;
  font-weight: 800;
}
.__u_lv_sep {
  color: #495057;
  user-select: none;
}

/* 유저 프로필 카드 모달 — ohsorryRender 패널을 임베드. PC 중앙 다이얼로그 / 모바일 풀스크린 */
.__uprofile_modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.__uprofile_dialog {
  position: relative;
  width: min(440px, 100%);
  max-height: min(92vh, 900px);
  background: #fff;
  border-radius: 8px;
  overflow: auto;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.__uprofile_close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: #888;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.__uprofile_close:hover { color: #212529; }
.__uprofile_body { padding: 14px 16px; }
.__uprofile_loading,
.__uprofile_error,
.__uprofile_tabloading {
  color: #868e96;
  text-align: center;
  padding: 40px 12px;
}
.__uprofile_error { color: #c92a2a; }

/* 로딩 스피너 오버레이 — calcOhsorryCore.compute 진행 중 (lib 로드 / fetch / 추천 계산) 표시.
   floating 우측 상단. compute 완료 또는 에러 시 JS 가 제거. */
.__uprofile_loading_overlay {
  position: fixed;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 23, 28, 0.92);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.__uprofile_spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: __uprofile_spin 0.8s linear infinite;
}
@keyframes __uprofile_spin {
  to { transform: rotate(360deg); }
}

/* 프로필 카드 상단 헤더 — 좌측(이름·ID·단위) + 우측(rating·ereter) 묶음. 목록 데이터로 즉시 표시. */
.__uprofile_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #262626;  /* 카드 본문(#1f1f1f) 보다 한 단계 밝게 — 헤더 섹션 구분 */
  /* 카드 padding(0 16px 14px) — top 0 이라 top negative 불필요, 좌우 16px 만큼 negative 로 가장자리까지 채움.
     카드 sticky scrollport top 이 카드 최상단이라 헤더 위 공백 없이 viewport 끝까지 차도록. */
  margin: 0 -16px 14px;
  border-radius: 8px 8px 0 0;
  /* 스크롤해도 항상 보이게 — 모바일 모달은 .is-modal 의 overflow:auto 안에서 sticky,
     PC 는 window 스크롤 기준으로 sticky. radar/tabs 보다 위에 떠야 해서 z-index 5. */
  position: sticky;
  top: 0;
  z-index: 5;
}
.__uprofile_info { min-width: 0; }
.__uprofile_idline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}
.__uprofile_name {
  font-size: 18px;
  font-weight: 700;
  color: #f8f9fa;
  line-height: 1.2;
}
.__uprofile_id {
  font-size: 12px;
  color: #868e96;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.__uprofile_ranks {
  display: flex;
  gap: 12px;
  margin-top: 5px;
  font-size: 13px;
  color: #adb5bd;
}
.__uprofile_ranks b { font-weight: 700; }
/* 합본(append) UI — 입력바는 레이더↔탭 사이, 연결 칩은 헤더 단위(ranks) 오른쪽. */
.__uprofile_merge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* 미합본 입력바 — AC병합 탭 패널 안. */
.__uprofile_mergebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px 6px;
}
.__uprofile_mergehint {
  margin: 0;
  padding: 0 14px 12px;
  font-size: 12px;
  color: #868e96;
}
/* 합쳐진 칩 — 헤더 단위(ranks, 13px) 오른쪽에 인라인. 작게. */
.__uprofile_merge_chipwrap {
  gap: 4px;
}
.__uprofile_merge_input {
  width: 130px;
  height: 28px;
  box-sizing: border-box;
  padding: 0 7px;
  font-size: 16px;   /* iOS 포커스 시 자동 확대 방지 — 16px 미만이면 줌됨 */
  font-family: "SF Mono", Menlo, Consolas, monospace;
  color: #f1f3f5;
  background: #1f1f1f;
  border: 1px solid #444;
  border-radius: 5px;
}
.__uprofile_merge_input:focus { outline: none; border-color: #ff9bce; }
.__uprofile_merge_btn {
  height: 28px;
  box-sizing: border-box;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 600;
  color: #ff9bce;
  background: none;
  border: 1px solid #ff9bce;
  border-radius: 5px;
  cursor: pointer;
}
.__uprofile_merge_btn:hover { background: rgba(255, 155, 206, 0.12); }
.__uprofile_merge_unlink {
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 600;
  color: #ced4da;
  background: #495057;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.__uprofile_merge_unlink:hover { background: #5c636a; }
.__uprofile_merge_chip {
  font-size: 12px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  color: #dcaf45;
  padding: 2px 6px;
  background: rgba(220, 175, 69, 0.12);
  border-radius: 5px;
}
/* 라이벌 VS / 라이벌 AC 칩 — 파란 계열(본인 AC병합 칩은 금색). */
.__uprofile_merge_chip_rival,
.__uprofile_merge_chip_rivalac { color: #74a9e0; background: rgba(116, 169, 224, 0.12); }
/* 합본/라이벌 플레이데이터 — 출처 뱃지(AC/INF) + 라이벌 DJNAME. PC: 점수 셀 위 / 모바일: LAMP텍스트 왼쪽. */
.__pd_tr > .__pd_cell.__pd_num { position: relative; }   /* PC 뱃지 absolute 기준 */
.__pd_srcwrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;   /* 점수 row 클릭(랭킹 모달) 방해 안 하게 */
}
.__pd_srcwrap_pc {       /* PC — 점수 셀 안 absolute, 점수 위에. */
  position: absolute;
  top: -1px;
  left: 10px;
  z-index: 1;
}
.__pd_srcwrap_mo { display: none; }   /* 모바일판 — PC 에선 숨김. */
.__pd_srcbadge {
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 3px;
  letter-spacing: 0.3px;
}
.__pd_src-ac  { color: #ffd8a8; background: rgba(232, 130, 30, 0.35); }
.__pd_src-inf { color: #a5d8ff; background: rgba(34, 139, 230, 0.35); }
.__pd_rivalname {
  font-size: 9px;
  color: #ced4da;
  white-space: nowrap;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 모바일 — PC판 숨기고, 모바일판을 LAMP텍스트 셀(col4) 왼쪽 빈칸(col3/row2)에 띄움. */
@media (max-width: 820px) {
  .__pd_tr:not(.__pd_recrow) > .__pd_cell.__pd_num .__pd_srcwrap_pc { display: none; }
  .__pd_tr:not(.__pd_recrow) > .__pd_cell.__pd_lamptext { position: relative; overflow: visible; }
  .__pd_tr:not(.__pd_recrow) > .__pd_cell.__pd_lamptext .__pd_srcwrap_mo {
    display: inline-flex;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 4px;
    z-index: 2;
  }
}
/* 라이벌 승패 행 — .__pd_tr 은 display:contents 라 셀에 배경. 지면 붉은/이기면 푸른 미세 배경.
   tbody gap(행 사이 1px)과 RATE bar 트랙(.__pd_rate_bg, 불투명)에도 색이 먹도록:
   - 셀 배경을 (기존 셀색 + 틴트) 블렌딩한 solid 로, box-shadow 1px 로 위아래 gap 까지 칠함.
   - RATE bar 트랙도 같은 solid 로 덮어 빈 트랙 부분에 색이 보이게. */
.__pd_tr.__pd_rival_lose > .__pd_cell { background: #382224; box-shadow: 0 1px 0 #382224, 0 -1px 0 #382224; }
.__pd_tr.__pd_rival_win  > .__pd_cell { background: #1f2d39; box-shadow: 0 1px 0 #1f2d39, 0 -1px 0 #1f2d39; }
.__pd_tr.__pd_rival_lose:hover > .__pd_cell { background: #492427; box-shadow: 0 1px 0 #492427, 0 -1px 0 #492427; }
.__pd_tr.__pd_rival_win:hover  > .__pd_cell { background: #20374b; box-shadow: 0 1px 0 #20374b, 0 -1px 0 #20374b; }
.__pd_tr.__pd_rival_lose .__pd_rate_bg { background: #382224; }
.__pd_tr.__pd_rival_win  .__pd_rate_bg { background: #1f2d39; }
.__pd_tr.__pd_rival_lose:hover .__pd_rate_bg { background: #492427; }
.__pd_tr.__pd_rival_win:hover  .__pd_rate_bg { background: #20374b; }
/* 라이벌 칩 + 비교 토글 — 단위(ranks) 아래 별도 줄, 같은 줄에 인라인. (INF+AC 병합 칩은 단위 오른쪽) */
.__uprofile_rivalchipline {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* 행 색 비교 단일 토글 — 클릭 시 스코어비교⇄램프비교. */
.__rivalcmp_toggle {
  font-size: 11px;
  font-weight: 600;
  color: #ced4da;
  background: #2b2f36;
  border: 1px solid #3a3f47;
  border-radius: 5px;
  padding: 2px 8px;
  cursor: pointer;
}
.__rivalcmp_toggle:hover { background: #343a44; }
/* 라이벌 통계 탭 — 본인 vs 라이벌 승패(램프/스코어) 스택바, DP12/DP11/ALL 토글(앱 공통 세그먼트 재사용). */
.__rs_wrap { padding: 14px 16px; }
/* rivalstats 패널을 컨테이너로 — 통계탭과 동일하게 컨테이너 폭 600px 기준 2열 전환. */
.__uprofile_panel[data-panel="rivalstats"] { container-type: inline-size; }
/* 상단 합산(램프/스코어) — 혼자 가운데 정렬. 폭 290~400. */
.__rs_top { max-width: 400px; min-width: min(290px, 100%); margin: 0 auto; }
/* 하단 레벨별 — 기본 1열(각 최대 400 가운데), 컨테이너 ≥600px 면 2열(통계탭처럼). */
.__rs_levels {
  display: grid;
  grid-template-columns: minmax(0, 400px);
  justify-content: center;
  gap: 4px 16px;
  margin-top: 18px;
}
@container (min-width: 600px) {
  .__rs_levels { grid-template-columns: repeat(2, minmax(0, 400px)); }
}
.__rs_levelcol { min-width: 0; }
/* 난이도 선택 토글 — 통계탭 "난이도 선택 : DP12 | DP11 | ALL" 스타일(우측 정렬). 활성=흰색 볼드. */
.__rs_lvsel { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-bottom: 16px; font-size: 13px; }
.__rs_lvsel_label { color: #868e96; }
.__rs_lvsel_btn { color: #868e96; cursor: pointer; }
.__rs_lvsel_btn.active { color: #fff; font-weight: 700; }
.__rs_lvsel_sep { color: #495057; }
/* 본인 : 라이벌 이름 헤더 — 스택바 색과 맞춰 본인 노랑 / 라이벌 파랑. */
.__rs_namehdr {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 6px;
  padding-left: 66px;   /* 라벨 칸(56) + gap(10) 만큼 들여 스택바와 정렬 */
}
.__rs_name_own { color: #e7c14e; }
.__rs_name_rival { color: #74a9e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.__rs_brow {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.__rs_rowlabel { color: #ced4da; font-size: 13px; }
.__rs_bar {
  position: relative;
  display: flex;
  height: 26px;
  border-radius: 2px;       /* 통계탭 스택바처럼 약하게만 둥글게 */
  overflow: hidden;
  background: #2b2f36;
}
.__rs_seg { min-width: 0; height: 100%; }
.__rs_seg_own { background: #d9a92e; }    /* 본인 = 노란 */
.__rs_seg_rival { flex: 1; background: #2f6db3; }  /* 라이벌 = 파란 */
/* 카운트 — segment 폭과 무관하게 항상 오버레이. 콜론은 bar 정중앙 고정, 숫자는 좌우로 띄움.
   검은 글씨 + 8방향 text-shadow 로 상하좌우 균등 흰 테두리. */
.__rs_num {
  position: absolute;
  top: 50%;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #000;
  text-shadow:
    -1px -1px 0 #fff, 0 -1px 0 #fff, 1px -1px 0 #fff,
    -1px 0 0 #fff, 1px 0 0 #fff,
    -1px 1px 0 #fff, 0 1px 0 #fff, 1px 1px 0 #fff;
  z-index: 2;
  pointer-events: none;
}
.__rs_num_colon { left: 50%; transform: translate(-50%, -50%); }    /* bar 정중앙 */
.__rs_num_own   { left: 25%; transform: translate(-50%, -50%); }    /* 왼쪽 절반 가운데 */
.__rs_num_rival { left: 75%; transform: translate(-50%, -50%); }    /* 오른쪽 절반 가운데 */
.__rs_note { margin: 12px 0 0; font-size: 11px; color: #6c757d; }
/* 레벨별 승패 — 램프/스코어 열. bar 는 작게. */
.__rs_lvtitle {
  font-size: 12px;
  font-weight: 700;
  color: #adb5bd;
  margin: 0 0 6px;
}
.__rs_levels .__rs_brow { padding: 3px 0; grid-template-columns: 44px 1fr; }
.__rs_levels .__rs_rowlabel { font-size: 12px; font-variant-numeric: tabular-nums; color: #9aa0a6; }
.__rs_levels .__rs_bar { height: 20px; }
.__rs_levels .__rs_num { font-size: 11px; }
/* 랭킹 모달 — 라이벌 비교시 본인/라이벌 난이도행 구분 라벨. */
.__shelf_rank_cmplabel {
  font-size: 11px;
  font-weight: 700;
  color: #adb5bd;
  margin: 8px 0 3px;
  padding: 0 2px;
}
.__rank_label {
  font-size: 10px;
  color: #6c757d;
}
/* 단위 색 — 9급~1급 흰색 / 초단~8단 파랑 / 9~10단 빨강 / 中伝 은색반짝 / 皆伝 금색반짝 */
.__rank_white { color: #f8f9fa; }
.__rank_blue  { color: #4dabf7; }
.__rank_red   { color: #ff6b6b; }
.__rank_chuden,
.__rank_kaiden {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% 100%;
  animation: __uprofile_shimmer 6s linear infinite;
}
.__rank_chuden { background-image: linear-gradient(90deg, #8c95a0 0%, #8c95a0 40%, #c7ccd2 50%, #8c95a0 60%, #8c95a0 100%); }
.__rank_kaiden { background-image: linear-gradient(90deg, #c8a347 0%, #c8a347 40%, #ead78a 50%, #c8a347 60%, #c8a347 100%); }
@keyframes __uprofile_shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.__uprofile_star {
  flex-shrink: 0;
  text-align: right;
}
.__uprofile_rating {
  font-size: 22px;
  font-weight: 700;
  color: #f8f9fa;
  line-height: 1.15;
}
.__uprofile_ereter {
  font-size: 11px;
  color: #868e96;
  margin-top: 2px;
}
/* 라이벌 모드 — 본인 ★ 아래 VS + 라이벌 ★(실력값). */
.__uprofile_vs {
  font-size: 10px;
  font-weight: 700;
  color: #6c757d;
  line-height: 1;
  margin: 2px 0;
  text-align: center;
}
.__uprofile_rating_rival {
  font-size: 20px;
  color: #74a9e0;   /* 라이벌 = 파란 계열(라이벌 통계 색과 통일) */
}

/* ohsorryRender 패널(라이트 디자인)을 카드 안에서 다크로 — class+id 셀렉터로 패널 자체
   #__dp_score_panel 규칙을 이기고, HTML 에 박힌 인라인 색은 external !important 로 덮음. */
.__users_card #__dp_score_panel {
  background: #1f1f1f !important;
  color: #e9ecef !important;
}
/* 유저 카드에서는 패널의 div.meta (페이지/매칭 카운트 / ★ 추정 비교 등 부가 정보) 숨김 — 우리 헤더에 이미 있음 */
.__users_card div.meta { display: none !important; }
.__users_card #__dp_score_panel summary { color: #e9ecef !important; }
.__users_card #__dp_score_panel td {
  border-bottom-color: #343a40 !important;
  /* color 는 !important 없이 — 통계 표 라벨의 인라인 색(클리어타입/DJ레벨별)을 살림.
     class+id 셀렉터라 인라인 색 없는 td 는 그대로 이 색이 적용됨. */
  color: #e9ecef;
}
/* CLEAR 라벨 색(#212529)은 다크 배경에서 안 보여 밝게 (clear lamp 하늘색) */
.__users_card #__dp_score_panel td[style*="#212529"] { color: #7dd3da !important; }

/* 통계 — 표는 400px 고정 + 가운데, 난이도별 스택바는 폭 800 이상이면 좌우 2열 */
.__users_card #__dp_score_panel #__detail_stats { container-type: inline-size; }
.__users_card #__dp_score_panel #__dp_detail_filtered {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 16px;
}
.__users_card #__dp_score_panel #__dp_detail_filtered > table {
  width: 400px;
  max-width: 100%;
  justify-self: center;
}
/* 모바일 — iOS Safari 가 table 의 max-width 를 적용 안 하는 경우가 있어 width 100% */
@media (max-width: 480px) {
  .__users_card #__dp_score_panel #__dp_detail_filtered > table { width: 100%; }
}
/* 스택바 두 details — grid 1fr 1fr 을 엄수 (content min-size 가 열 너비를 밀지 않게) */
.__users_card #__dp_score_panel #__dp_detail_filtered > details { min-width: 0; }
/* 카드 영역 너비 기준 — body 1200px 에서 카드는 약 712px 이므로 600px 기준으로 2열 전환.
   (모바일 풀스크린 모달은 viewport 폭이라 600 미만 → 1열 유지) */
@container (min-width: 600px) {
  .__users_card #__dp_score_panel #__dp_detail_filtered { grid-template-columns: 1fr 1fr; }
  .__users_card #__dp_score_panel #__dp_detail_filtered > table { grid-column: 1 / -1; }
}
.__users_card #__dp_score_panel th {
  background: #2d2d2d !important;
  color: #f8f9fa !important;
}
.__users_card #__dp_score_panel .profile-img { background: #343a40 !important; }
.__users_card #__dp_score_panel .profile-id { color: #868e96 !important; }
.__users_card #__dp_score_panel .profile-star-value { color: #f8f9fa !important; }
.__users_card #__dp_score_panel .nr-stat .value,
.__users_card #__dp_score_panel .nr-total .value { color: #e9ecef !important; }
.__users_card #__dp_score_panel .nr-total,
.__users_card #__dp_score_panel .nr-detail { border-top-color: #343a40 !important; }
.__users_card #__dp_score_panel .rec-item { border-bottom-color: #343a40 !important; }
.__users_card #__dp_score_panel .info-popup {
  background: #2d2d2d !important;
  border-color: #343a40 !important;
}
/* 패널 자체 프로필 박스 — 우리 헤더와 정보가 중복이므로 숨김 */
.__users_card #__dp_score_panel .profile { display: none !important; }
/* 난이도별 스택바 — NO PLAY / NP 세그먼트를 배경에 가까운 어두운색으로 (라이트 #e9ecef 대신) */
.__users_card #__dp_score_panel [data-seg="np"],
.__users_card #__dp_score_panel [data-seg="none"] {
  background: #262626 !important;
}

/* 노트레이더 — SP/DP 를 각각 영역(박스)으로 나눔.
   좁은 화면: 레이더 위 · 통계 아래 (세로) / 넓은 화면(PC): 레이더 좌 · 통계 우 (가로). */
.__users_card #__dp_score_panel .notes-radar {
  gap: 10px !important;
  background: transparent !important;  /* 유저카드 배경이 비치게 */
}
.__users_card #__dp_score_panel .nr-box {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas: 'svg' 'header' 'detail' !important;
  justify-items: center !important;
  padding: 10px 8px !important;
}
.__users_card #__dp_score_panel .nr-svg { grid-area: svg; }
/* 레이더 배경 육각형 — 흰색 fill 을 회색으로 (다크 배경에 맞춤) */
.__users_card #__dp_score_panel .nr-svg polygon[fill="#fff"] { fill: #2d2d2d !important; }
.__users_card #__dp_score_panel .nr-header { grid-area: header; }
.__users_card #__dp_score_panel .nr-detail { grid-area: detail; }
/* 넓은 화면 — nr-box 안에서 레이더(좌) | 통계(우) 가로 배치 */
@media (min-width: 1000px) {
  .__users_card #__dp_score_panel .nr-box {
    grid-template-columns: auto 1fr !important;
    grid-template-areas: 'svg detail' 'header detail' !important;
    align-items: center !important;
    gap: 0 12px !important;
  }
  .__users_card #__dp_score_panel .nr-detail {
    align-self: center !important;
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* 프로필 카드 — 레이더 아래 탭 (rank1 / recent / 추천곡 / 통계) */
.__uprofile_tabwrap { margin-top: 14px; container-type: inline-size; }
.__uprofile_tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #343a40;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;   /* 모바일 — 탭은 좌우(가로)로만 스크롤. 세로 제스처로 상하 흔들리지 않게. */
  scrollbar-width: none;
  /* 헤더 바로 아래 sticky — top 값은 헤더 높이(CSS var, users.js 가 측정해서 설정).
     z-index: 4 — 헤더(5)보다 아래라 위로 안 올라옴. background 필수 (밑 컨텐츠 비치지 않게).
     -1px — 헤더 높이가 정수가 아닐 때(서브픽셀) offsetHeight 반올림 갭 방지 위해 1px 위로 끌어
     헤더 바닥과 겹치게. z-index 차이로 헤더가 위로 떠서 시각적으론 안 보임. (모바일 Android 갭 fix.) */
  position: sticky;
  top: calc(var(--uprofile-header-h, 70px) - 1px);
  z-index: 4;
  background: #1f1f1f;
}
.__uprofile_tabs::-webkit-scrollbar { display: none; }
.__uprofile_tab {
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #868e96;
  padding: 8px 12px;
  margin-bottom: -1px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.__uprofile_tab:hover { color: #ced4da; }
.__uprofile_tab.active {
  color: #ff6b9d;
  border-bottom-color: #ff6b9d;
}
.__uprofile_tabbody { padding-top: 12px; }
/* Recent 탭 — 가장 최근 업로드 날짜의 곡 목록.
   행: [램프색박스 | 12A/11H 등 diff | 곡명 | EX스코어 | A-123 다음등급 컷대비]. 클릭 시 곡별 랭킹 모달. */
/* 헤더: [빈 1fr | nav 묶음(중앙) | "12곡" (우측)] — grid 로 nav 묶음은 정확히 중앙, 곡수는 우측 끝. */
.__uprofile_rcheader {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 4px 0 8px;
  font-size: 12px;
  color: #adb5bd;
}
.__uprofile_rcheader_nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}
.__uprofile_rcheader_count {
  grid-column: 3;
  text-align: right;
  color: #868e96;
}
/* 헤더의 이전/다음 날짜 nav 버튼 (< / >) — 텍스트 양 옆에 인접. 데이터 없으면 해당 쪽 버튼 자체가 없음. */
.__uprofile_rcnav {
  background: transparent;
  border: none;
  color: #adb5bd;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 3px;
}
.__uprofile_rcnav:hover { background: #2d323c; color: #fff; }
.__uprofile_rclist {
  display: flex;
  flex-direction: column;
}
.__uprofile_rcitem {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 4px;
  border-bottom: 1px solid #2d323c;
  font-size: 13px;
  color: #e9ecef;
  cursor: pointer;
}
.__uprofile_rcitem:hover { background: #232830; }
.__uprofile_pat_row:hover { background: #232830; }

/* 분석탭 상세(강/약점 이유 등) — 텍스트 줄바꿈 강제. 프로덕션 gist 이유 박스 div 에 인라인 nowrap 이 박혀
   있어도 이기도록 div 에 !important. 막대(.__uprofile_pat_chart)는 형제라 영향 없고, 곡명/DJ명은 span 이라 유지. */
.__uprofile_pat_detail,
.__uprofile_pat_detail div { white-space: normal !important; overflow-wrap: anywhere; }
/* 분석탭 막대그래프 — 모바일에서 화면 밖 벗어나지 않게 */
.__uprofile_pat_chart {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.__uprofile_pat_chart > div {
  min-width: 0;  /* flex item 강제 줄이기 (text nowrap 무시) */
}
.__uprofile_pat_chart > div > div:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .__uprofile_pat_chart > div > div:last-child {
    font-size: 9px !important;  /* 라벨 작게 (NOTES / SOF-LAN 등 긴 글자) */
  }
}
.__uprofile_rclamp {
  flex-shrink: 0;
  width: 6px;
  align-self: stretch;            /* 행 전체 높이 — 부모 align-items:center 오버라이드 */
  /* 부모 padding 7px 4px 상쇄: 위·아래 -7, 좌 -4 (행 끝까지). 우측은 -4 로 다음 컬럼(diff) 과의 간격을 좁힘 (원래 gap 7px → 3px). */
  margin: -7px -4px -7px -4px;
}
.__uprofile_rcdiff {
  flex-shrink: 0;
  min-width: 26px;
  text-align: center;
  font-weight: 800;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
/* zasaLevel (☆11.8) — diff 우측에 작은 보조 정보. ohSorryRating 매칭 실패 시 빈칸. */
.__uprofile_rczasa {
  flex-shrink: 0;
  min-width: 36px;
  text-align: center;
  font-size: 11px;
  color: #868e96;
  font-variant-numeric: tabular-nums;
}
.__uprofile_rctitle {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 램프·DJ레벨 진행 컬럼 (prev → 현재) — 곡명과 EX 사이. 너비 고정으로 행간 정렬, 색은 내부 span 인라인. */
.__uprofile_rclamps {
  flex-shrink: 0;
  width: 60px;
  text-align: center;
  font-size: 11px;
  color: #adb5bd;  /* 화살표용 — 내부 약어 span 은 인라인 색 */
  font-variant-numeric: tabular-nums;
}
.__uprofile_rcdjs {
  flex-shrink: 0;
  width: 60px;
  text-align: center;
  font-size: 11px;
  color: #adb5bd;
  font-variant-numeric: tabular-nums;
}
.__uprofile_rcex {
  flex-shrink: 0;
  width: 100px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
/* 직전 점수 "1800 →" 부분 — 현재 점수(2229 bold)보다 작고 어둡게 (보조 정보) */
.__uprofile_rcprev {
  color: #6c757d;
  font-weight: 400;
  font-size: 11px;
}
.__uprofile_rcgrade {
  flex-shrink: 0;
  width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #adb5bd;
}

/* 모바일 — 한 행을 2줄로 분리. 1줄: diff + 곡명, 2줄: zasa + LAMP / DJ / EX / gradeDiff.
   램프 색박스(col 1) 만 grid-row 1/3 으로 두 줄 다 차지. diff / zasa 는 col 2 의 상/하 분리. */
@media (max-width: 820px) {
  .__uprofile_rcitem {
    display: grid;
    grid-template-columns: 0px 45px auto 54px 84px 52px;
    grid-template-rows: auto auto;
    column-gap: 7px;
    row-gap: 3px;
    padding: 7px 4px;
  }
  .__uprofile_rclamp { grid-row: 1 / 3; grid-column: 1; }
  .__uprofile_rcdiff {
    grid-row: 1; grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .__uprofile_rczasa {
    grid-row: 2; grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .__uprofile_rctitle { grid-row: 1; grid-column: 3 / -1; }
  .__uprofile_rclamps { grid-row: 2; grid-column: 3; width: auto; min-width: 0; }
  .__uprofile_rcdjs   { grid-row: 2; grid-column: 4; width: auto; min-width: 0; }
  .__uprofile_rcex    { grid-row: 2; grid-column: 5; width: auto; min-width: 0; }
  .__uprofile_rcgrade { grid-row: 2; grid-column: 6; width: auto; min-width: 0; }
}

.__uprofile_tabempty {
  color: #868e96;
  text-align: center;
  padding: 40px 12px;
  font-size: 13px;
}
/* rank1 탭 — 레벨 토글 필터 (12 | 11 | Other) */
.__uprofile_r1filter {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.__uprofile_r1btn {
  background: transparent;
  border: none;
  color: #6c757d;
  padding: 2px 5px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.__uprofile_r1btn:hover { color: #ced4da; }
.__uprofile_r1btn.active { color: #f1f3f5; font-weight: 800; }
.__uprofile_r1sep { color: #495057; user-select: none; }
/* rank1 곡 목록 — (게임레벨+diff) 색 + 곡명, 클릭 시 랭킹 모달.
   기본 2열 (모바일 풀스크린 폭에서도 2열 보장), 넓어지면 3열 (탭 영역 폭 기준 @container). */
.__uprofile_rank1list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
@container (min-width: 680px) {
  .__uprofile_rank1list { grid-template-columns: 1fr 1fr 1fr; }
}
.__uprofile_rank1item {
  display: flex;
  min-width: 0;  /* grid item — 긴 곡명에 칸 너비가 밀리지 않게 */
  align-items: center;
  gap: 7px;
  padding: 7px 4px;
  border-bottom: 1px solid #2d323c;
  font-size: 13px;
  color: #e9ecef;
  cursor: pointer;
}
.__uprofile_rank1item:hover { background: #232830; }
.__uprofile_r1diff {
  flex-shrink: 0;
  min-width: 24px;  /* "12A" / "11H" / "12L" 3자 prefix 수용 */
  text-align: center;
  font-weight: 800;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.__uprofile_r1title {
  flex: 1;
  min-width: 0;  /* flex item 이 긴 곡명에 밀려 칸을 넘기지 않게 — 넘치면 ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 모바일 — 풀스크린 모달 */
@media (max-width: 600px) {
  .__uprofile_modal { padding: 0; }
  .__uprofile_dialog {
    width: 100%;
    height: var(--vh, 100dvh);
    max-height: var(--vh, 100dvh);
    border-radius: 0;
  }
}

/* 플레이데이터 탭 — series_no 별 폴더(<details>) accordion + 곡 row 한 줄에 DP N/H/A/L EX 점수 */
/* 필터 줄 — 카드 안 sticky. 헤더(top:0) + 탭(top:header-h) 누적 아래에 붙음 (탭 바닥에 딱). */
.__uprofile_pdfilter {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 8px 0;
  font-size: 12px;
  position: sticky;
  /* -2px — 일부 브라우저(Firefox, 모바일 Safari 등) 의 서브픽셀 round 차이로 탭과 1px 갭이 생기는 케이스 보완. */
  top: calc(var(--uprofile-header-h, 70px) + var(--uprofile-tabs-h, 40px) - 2px);
  z-index: 6;                /* sticky summary(z:5) / RATE 자식(z:2) 보다 위 */
  background: rgb(31, 31, 31);
}
/* 검색창 wrap — drop 위치 기준 (position: relative). */
.__pd_search_wrap {
  position: relative;
  flex: 1 1 120px;
  min-width: 100px;
  max-width: 240px;
}
/* 곡명 검색창 — 기존 토글 버튼과 톤 통일. wrap 안 가득 채움. */
.__pd_searchbox {
  width: 100%;
  height: 27px;
  box-sizing: border-box;
  background: #1c2027;
  border: 1px solid #2d323c;
  color: #e9ecef;
  font-family: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  outline: none;
}
.__pd_searchbox:focus { border-color: #ff6b9d; }
/* 검색 결과 drop — input 바로 아래, 최대 5개 항목. JS 가 display 토글. */
.__pd_search_drop {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: #1c2027;
  border: 1px solid #2d323c;
  border-radius: 4px;
  z-index: 10;
  display: none;
  /* 5 항목 높이 (padding 6+6 + font 13*1.4 ≈ 31) × 5 = 155 — wheel/swipe 로 추가 스크롤. */
  max-height: 155px;
  overflow-y: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 11 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.__pd_search_drop::-webkit-scrollbar { display: none; }
.__pd_search_item {
  padding: 6px 10px;
  font-size: 13px;
  color: #e9ecef;
  cursor: pointer;
  border-bottom: 1px solid #2d323c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.__pd_search_item:last-child { border-bottom: none; }
.__pd_search_item:hover { background: #2a2f37; color: #ff6b9d; }
.__pd_search_empty {
  padding: 6px 10px;
  font-size: 12px;
  color: #6c757d;
  font-style: italic;
}
.__uprofile_pdtoggle {
  background: #1c2027;
  border: 1px solid #2d323c;
  color: #adb5bd;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
}
.__uprofile_pdtoggle:hover { background: #2d323c; color: #fff; }
.__uprofile_pdtoggle.active {
  background: transparent;
  border-color: rgb(255, 155, 206);
  color: rgb(255, 155, 206);
  font-weight: 700;
}
.__pd_difffilter {
  margin-left: auto;       /* 검색창은 왼쪽 고정, 토글 버튼 묶음은 오른쪽으로 밀림 */
  box-sizing: border-box;
  text-align: center;
}
/* 배치 토글 — OFF 일 때도 또렷하게 (다른 토글은 항상 active 라 무관) */
.__pd_layoutbtn {
  background: transparent;
  border-color: #495057;
  color: #e9ecef;
  font-weight: 600;
}
.__uprofile_pdfolders {
  display: flex;
  flex-direction: column;
  container-type: inline-size;  /* @container (max-width: 600px) query 활성화 */
}
/* 폴더끼리 붙도록 — 인접 border 중첩 방지 위해 border-top 만 두고 첫 폴더만 위 border 추가, border-radius 제거.
   margin !important — ohSorry 본체 panel CSS (<style> 안 details 룰, margin: 10px 0 등) 가 이 폴더에도
   상속 적용되는 걸 강제 차단. summary 도 동일 처리. */
.__uprofile_pdfolder {
  background: rgb(38, 38, 38);
  border: 1px solid #2d323c;
  border-top-width: 0;
  margin: 0 !important;
}
.__uprofile_pdsummary { margin: 0 !important; }
.__uprofile_pdfolder:first-child { border-top-width: 1px; }
.__uprofile_pdfolder[open] { background: #232830; }
/* 열린 폴더 summary — 필터 줄 (검색 + 토글) 아래에 sticky 로 붙음.
   z-index 3 — RATE cell 의 자식 (rate_text z:2) 보다 위. tabs(4)/header(5)/filter(6) 보다는
   아래라 scroll 중 자연 위치가 그 영역으로 침범해도 위로 안 뜸.
   -3px — 서브픽셀 갭 보완 (filter 와 색 다른 케이스 대비 안전망). */
.__uprofile_pdfolder[open] > .__uprofile_pdsummary {
  position: sticky;
  top: calc(var(--uprofile-header-h, 70px) + var(--uprofile-tabs-h, 40px) + var(--pd-filter-h, 43px) - 3px);
  z-index: 3;
  background: #232830;  /* open 폴더 배경과 통일 */
}
/* 폴더 summary 클릭 시 scrollIntoView 의 정렬 기준 — header + tabs + filter 만큼 위 마진. */
.__uprofile_pdsummary {
  scroll-margin-top: calc(var(--uprofile-header-h, 70px) + var(--uprofile-tabs-h, 40px) + var(--pd-filter-h, 43px));
}
.__uprofile_pdsummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 40px;
  /* ohSorry 본체 panel CSS (summary 에 padding 주입) 도 강제 차단 — 상하 0, 좌 0(lamp 가장자리), 우 10 */
  padding: 0 10px 0 0 !important;
  cursor: pointer;
  font-size: 13px;
  color: #e9ecef;
  user-select: none;
  list-style: none;
}
/* 기본 disclosure marker(▶ 화살표) 제거 — Safari/Firefox/Chrome 각각 다른 셀렉터 */
.__uprofile_pdsummary::-webkit-details-marker { display: none; }
.__uprofile_pdsummary::marker { content: ''; }
.__uprofile_pdsummary:hover { background: #232830; }
.__uprofile_pdlabel {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
}
.__uprofile_pdcount {
  flex-shrink: 0;
  font-size: 11px;
  color: #868e96;
  font-variant-numeric: tabular-nums;
}
.__uprofile_pdcount b { color: #ff9bce; font-weight: 700; }
/* ─── 채보별 row 테이블 — INFOhSorry ChartTable (.ct-tr / .ct-cell) 디자인 포팅 ─── */
/* 폴더 안 row 영역은 grid 7 컬럼: [lamp색박스 | LV | 곡명 | NOTES | LAMP텍스트 | RATE바 | SCORE+grade] */
.__pd_tbody {
  display: grid;
  grid-template-columns: 8px 32px 1fr 45px 100px 130px 95px;
  gap: 1px 0;                  /* 가로줄만 (row 사이 1px) */
  background: #14171c;          /* gap 색 = 어두운 줄 */
  border-top: 1px solid #2d323c;
}
.__pd_tr { display: contents; }
.__pd_tr > .__pd_cell {
  padding: 6px 8px;
  background: rgb(31, 31, 31);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #e9ecef;
}
.__pd_tr:hover > .__pd_cell,
.__pd_tr.__pd_highlight > .__pd_cell { background: #2d2d2d; }
.__pd_tr > .__pd_cell.__pd_num {
  justify-content: flex-start;
  padding-left: 12px;
}
.__pd_tr > .__pd_cell.__pd_notes {
  justify-content: flex-end;    /* 노트수 우측 정렬 — 뱃지 + 노트수 함께 표시 시 노트수 위치 일관 */
  padding-right: 6px;
  overflow: visible;            /* 토글 ON 일 때 뱃지가 좁은 NOTES cell 넘어가도 보이게 */
}
/* 노트수 값이 '-' (textage-meta 매칭 실패) 인 cell — 가운데 정렬 */
.__pd_tr > .__pd_cell.__pd_notes.__pd_notes_empty {
  justify-content: center;
  padding-right: 0;
}
/* NOTES cell — 노트수는 항상 보임. 배치 뱃지는 toggle ON 일 때만 노트수 앞에 같이. */
.__pd_layout_val { display: none; }
.__pd_layoutmode .__pd_layout_val { display: inline-block; }
/* 배치 라벨 뱃지 — ohsorryRender 의 .rec-flip 과 같은 스타일 (pink 보더 + 9px bold). */
.__pd_layoutmode .__pd_layout_badge {
  color: #ff6b9d;
  font-size: 9px;
  font-weight: 700;
  padding: 0 3px;
  margin-right: 4px;            /* 노트수와 간격 */
  border: 1px solid #ff6b9d;
  border-radius: 2px;
  line-height: 1.2;
  white-space: nowrap;          /* "F M/N" 같이 공백 있어도 한 줄 */
  position: relative;
  z-index: 1;                   /* 옆 cell 위에 떠서 잘 보이게 */
}
/* lamp 색박스 — 좁은 컬럼, gap(1px) 침범해서 색이 row 끊김 없이 이어짐.
   색 정의는 일반 .__pd_lamp-XX 로 분리 — 폴더 summary 의 색박스도 같은 클래스 재사용. */
.__pd_cell.__pd_lamp {
  margin: -1px 0;
  padding: 0 !important;
  cursor: help;
}
/* !important — `.__pd_tr > .__pd_cell { background:#21252c }` (specificity 0,2,0) 가
   단순 클래스 lamp 셀렉터 (0,1,0) 보다 강해서 색이 안 먹힘 → 강제 override. */
.__pd_lamp-NP  { background: #2a2e35 !important; }
.__pd_lamp-AC  { background: #9966cc !important; }
.__pd_lamp-EC  { background: #7bc16a !important; }
.__pd_lamp-NC  { background: #5cb8ea !important; }
.__pd_lamp-HC  {
  background: #ffffff !important;
  border-left: 1px solid #c8c8c8;
  border-right: 1px solid #c8c8c8;
}
.__pd_lamp-EX  { background: #dcaf45 !important; }
.__pd_lamp-F   { animation: __pd_lampBlinkF 0.9s linear infinite; }
.__pd_lamp-FC  { animation: __pd_lampBlinkFC 1.4s linear infinite; }
.__pd_lamp-PFC { animation: __pd_lampBlinkFC 0.9s linear infinite; }
/* 시리즈 폴더 summary 의 lamp 색박스 — 곡 row 의 lamp cell 처럼 왼쪽 가장자리에 붙고 상하 가득. */
.__pd_summarylamp {
  align-self: stretch;       /* summary height(40px) 가득 */
  width: 8px;                /* 곡 row lamp 컬럼 폭과 동일 */
  margin-right: 10px;
  flex-shrink: 0;
}
@keyframes __pd_lampBlinkF {
  0%, 100% { background: #5e2222; }
  50%      { background: #181b20; }
}
@keyframes __pd_lampBlinkFC {
  0%, 100% { background: #5cb8ea; }
  33%      { background: #ffffff; box-shadow: inset 0 0 0 1px #c8c8c8; }
  66%      { background: #dcaf45; }
}
/* LV — 큰 숫자, 가운데 정렬, slot 색 (inline style) */
.__pd_cell.__pd_level {
  padding: 2px 6px !important;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  justify-content: center;
}
/* 곡명 — 1fr, ellipsis. LEG 면 † 접두사 + slot 색 (inline style) */
.__pd_cell.__pd_title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;       /* ellipsis 가 동작하려면 flex 가 아닌 block */
  line-height: 28px;    /* row 높이 맞춤 (padding 6 + content 16 + padding 6 = 28) */
  font-size: 14px;
  padding-left: 0;
}
/* 곡명 앞 zasa 레벨 — 있을 때만 표시. 작고 회색. width 20px 고정 (마진 없음). */
.__pd_zasa {
  display: inline-block;
  width: 20px;
  margin-right: 3px;
  text-align: right;
  color: #868e96;
  font-size: 10.5px;
  font-weight: 400;
}
/* PC 한 줄 모드 — level cell 안의 zasa span 은 숨김 (zasa 는 곡명 앞 `.__pd_zasa` 가 담당).
   두 줄 모드 container query 안에서 다시 표시 + flex column 배치 (game 1줄 / zasa 1줄). */
.__pd_level_zasa { display: none; }
.__pd_cell.__pd_lamptext {
  font-size: 11.5px;
  letter-spacing: 0.3px;
  justify-content: center;
  font-weight: 700;
}
/* RATE 막대 — 진행률 + cut 라인 + letter + 백분율 */
.__pd_cell.__pd_ratebar {
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}
.__pd_rate_bg {
  position: absolute; inset: 0;
  background: rgb(31, 31, 31);
}
.__pd_rate_fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(to right, #c44444, #e58484);
}
.__pd_rate_cut {
  position: absolute; top: 0; bottom: 0;
  width: 1px; background: #4a4f58; z-index: 1;
}
.__pd_rate_text {
  position: relative; z-index: 2;
  padding-left: 6px;
  font-size: 11.5px;
  color: #e9ecef;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.__pd_rate_letter {
  font-weight: 700;
  color: #b0b5bd;
  text-shadow:
    -1px -1px 0 #1a1d23,
     1px -1px 0 #1a1d23,
    -1px  1px 0 #1a1d23,
     1px  1px 0 #1a1d23;
}
.__pd_rate_pct { font-size: 10.5px; color: #adb5bd; }
.__pd_empty { color: #5e6168; padding-left: 6px; }
.__pd_cell.__pd_empty { color: #5e6168; }

/* Recent 전용 — grid 6 컬럼 (lamp box / LV / 곡명 / lamp변동 / DJ변동 / SCORE변동). */
.__pd_rctbody {
  grid-template-columns: 8px 32px 1fr 70px 80px 130px;
}
/* LAMP / DJ 변동 cell — 가운데 정렬, 작은 글자, prev → now 한 줄. */
.__pd_cell.__pd_rclampchange,
.__pd_cell.__pd_rcdjchange {
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
/* SCORE 변동 cell — 현재값은 가운데, prev / grade 는 absolute 로 떠서 영향 X. */
.__pd_cell.__pd_rcexchange {
  position: relative;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
/* SCORE 의 prev → 표기 — 작은 회색. 기본 inline 흐름. */
.__pd_recprev {
  color: #6c757d;
  font-size: 10.5px;
  margin-right: 4px;
  font-weight: 400;
}
/* Recent SCORE cell 안에서만 prev / grade 가 absolute (가운데 정렬 영향 X). */
.__pd_cell.__pd_rcexchange > .__pd_recprev {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.__pd_cell.__pd_rcexchange > .__pd_grade {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
/* Recent row 클릭 가능 표시 */
.__pd_recrow { cursor: pointer; }

/* __uprofile_pdfolders 컨테이너 폭 ≤600px — 한 줄 grid 를 두 줄 grid 로 break.
   첫 줄: lamp / LV (각각 2 row span) + 곡명 (column 3 부터 끝까지)
   둘째 줄: NOTES / LAMP텍스트 / RATE 바 / SCORE */
@container (max-width: 600px) {
  /* 공통 — tbody 가 flex column, row 가 자체 grid 두 줄. */
  .__pd_tbody {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #14171c;
  }
  .__pd_tr {
    display: grid;
    grid-template-rows: auto auto;
    column-gap: 6px;
    background: rgb(31, 31, 31);
  }
  .__pd_tr:hover,
  .__pd_tr.__pd_highlight { background: #2d2d2d; }
  /* 라이벌 승패 — 두 줄 모드는 .__pd_tr 가 grid 박스라 셀 box-shadow 대신 .__pd_tr 배경으로 갭까지 칠함. */
  .__pd_tr.__pd_rival_lose { background: #382224; }
  .__pd_tr.__pd_rival_win  { background: #1f2d39; }
  .__pd_tr.__pd_rival_lose:hover { background: #492427; }
  .__pd_tr.__pd_rival_win:hover  { background: #20374b; }
  /* 두 줄 모드 — cell 의 위아래 padding 제거 (좌우 padding 은 유지). row 높이 압축. */
  .__pd_tr > .__pd_cell {
    padding-top: 0;
    padding-bottom: 0;
  }
  /* 두 줄 모드 — 폴더 summary 높이 47px (모바일 터치 영역 확보). */
  .__uprofile_pdsummary {
    height: 47px;
  }
  .__pd_tr > .__pd_cell.__pd_lamp     { grid-column: 1; grid-row: 1 / 3; margin: 0; }
  /* 두 줄 모드 — level cell 의 1번째 줄에 gameLevel, 2번째 줄에 zasaLevel.
     flex column + 가운데 정렬. game 큰 글자, zasa 작은 회색. */
  .__pd_tr > .__pd_cell.__pd_level    {
    grid-column: 2;
    grid-row: 1 / 3;
    padding: 0 !important;
    flex-direction: column;
    line-height: 1;
    justify-content: center;
    align-items: center;
    gap: 2px;
  }
  .__pd_tr > .__pd_cell.__pd_level .__pd_level_game { font-size: 18px; font-weight: 600; }
  .__pd_tr > .__pd_cell.__pd_level .__pd_level_zasa {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: #868e96;
  }
  /* 두 줄 모드 — 곡명 앞 zasa span 은 숨김 (level cell 2번째 줄로 이동). 곡명 앞 width 도 회수. */
  .__pd_tr > .__pd_cell.__pd_title .__pd_zasa { display: none; }
  .__pd_tr > .__pd_cell.__pd_title    { grid-column: 3 / -1; grid-row: 1; }

  /* PlayData row — 7 컬럼. 첫째 줄: lamp / level / title / NOTES (= col 7 우측). 둘째 줄: LAMP텍스트 / RATE / SCORE.
     모바일 viewport (320~412px) 안에 들어가도록 column 합 축소:
       8 + 36 + 1fr + 45 + 50 + 60 + 90 = 289 + gap. iPhone SE (375) / Galaxy (360) 안에 들어감.
     - col 4 (LAMP텍스트): users.js 가 lampAbbr (PFC/FC/EX/HC/NC/NP) 로 약자 표시 → 45px 충분.
     - col 7 (SCORE): 5자리 콤마 + grade → 90px.
     - minmax(0, 1fr): title 이 자식 컨텐츠 길이까지 안 양보해서 viewport 넘치는 케이스 보완. */
  .__pd_tr:not(.__pd_recrow) {
    grid-template-columns: 8px 36px minmax(0, 1fr) 45px 50px 60px 93px;
    column-gap: 4px;
  }
  /* 두 줄 모드 — title 길면 ellipsis (cell 폭 안 넘기게). */
  .__pd_tr:not(.__pd_recrow) > .__pd_cell.__pd_title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .__pd_tr:not(.__pd_recrow) > .__pd_cell.__pd_title    { grid-column: 3 / 7; }
  .__pd_tr:not(.__pd_recrow) > .__pd_cell.__pd_notes    { grid-column: 7; grid-row: 1; padding-left: 0 !important; justify-content: flex-start; padding-right: 0; position: relative; }
  /* 모바일 — 노트수 숫자를 둘째 줄 EX스코어와 같은 위치(43px 박스 우측정렬 + 우측마진 4px)에 정렬. */
  .__pd_tr:not(.__pd_recrow) > .__pd_cell.__pd_notes .__pd_notes_val { flex: 0 0 43px; text-align: right; margin-right: 4px; }
  /* 모바일 — 배치추천 뱃지는 absolute 로 flow 에서 빼 노트수를 안 밀리게. 노트수 왼쪽(곡명 위)에 떠서 z-index 로 안 가려지게. (곡명 침범 OK)
     z-index 2 — 같은 row 내용(곡명 cell) 위엔 뜨되, sticky 헤더/탭/필터/폴더헤더(z:3~6) 밑으로. (z:5 면 스크롤 시 헤더 위로 뚫고 보임) */
  .__pd_layoutmode .__pd_tr:not(.__pd_recrow) > .__pd_cell.__pd_notes .__pd_layout_badge {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
  }
  /* 첫째 줄 우측 노트수가 뭔지 인식이 어려워 "notes" 라벨을 grade 자리(46px 좌측정렬)에. 작고 어둡게. (빈 cell '-' 제외) */
  .__pd_tr:not(.__pd_recrow) > .__pd_cell.__pd_notes:not(.__pd_notes_empty)::after {
    content: 'notes';
    flex: 0 0 46px;
    text-align: left;
    font-size: 0.78em;
    color: #6c757d;
  }
  .__pd_tr:not(.__pd_recrow) > .__pd_cell.__pd_lamptext { grid-column: 4; grid-row: 2; }
  .__pd_tr:not(.__pd_recrow) > .__pd_cell.__pd_ratebar  { grid-column: 5 / 7; grid-row: 2; }
  .__pd_tr:not(.__pd_recrow) > .__pd_cell.__pd_num      { grid-column: 7; grid-row: 2; padding-left: 0 !important; justify-content: flex-start; padding-right: 0; }
  /* 모바일 — EX스코어 / next레벨 차이값(__pd_grade) 각각 46px 고정폭. EX 는 박스 안 우측정렬, grade 는 좌측정렬 → 둘이 가운데 경계에서 만나 행마다 각각 정렬. */
  .__pd_tr:not(.__pd_recrow) > .__pd_cell.__pd_num .__pd_num_val { flex: 0 0 43px; text-align: right; margin-right: 4px; }
  .__pd_tr:not(.__pd_recrow) > .__pd_cell.__pd_num .__pd_grade   { flex: 0 0 46px; text-align: left; margin-left: 0; }

  /* Recent row — 6 컬럼. 둘째 줄: LAMP변동 / DJ변동 / SCORE변동. col 3 (1fr) 빈공간 → 우측으로 밀림. */
  .__pd_tr.__pd_recrow {
    grid-template-columns: 8px 36px minmax(0, 1fr) 56px 64px 135px;
  }
  .__pd_tr.__pd_recrow > .__pd_cell.__pd_rclampchange { grid-column: 4; grid-row: 2; }
  .__pd_tr.__pd_recrow > .__pd_cell.__pd_rcdjchange   { grid-column: 5; grid-row: 2; }
  .__pd_tr.__pd_recrow > .__pd_cell.__pd_rcexchange   {
    grid-column: 6; grid-row: 2;
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0;
  }
}
/* SCORE cell 옆 — 다음 DJ Level 컷까지 부족분 (예: "AAA-13"). 작고 회색, 괄호 X. */
.__pd_grade {
  color: #6c757d;
  font-size: 10.5px;
  font-weight: 400;
  margin-left: 6px;
}

/* ===== DBR추천 탭 (recommendDBR.js) — 적성/연습 토글 + 패턴 매칭 추천 ===== */
.__dbr_ctrl { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.__dbr_modes { display: flex; }
.__dbr_mode { background: #2b2f36; color: #adb5bd; border: 1px solid #3a3f47; padding: 5px 13px; cursor: pointer; font-size: 13px; }
.__dbr_mode:first-child { border-radius: 6px 0 0 6px; }
.__dbr_mode:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.__dbr_mode.active { background: #4263eb; color: #fff; border-color: #4263eb; }
.__dbr_reconly { font-size: 12.5px; color: #adb5bd; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.__dbr_hint { font-size: 12px; color: #868e96; margin-bottom: 8px; }
.__dbr_hint b { color: #cdd3da; }
.__dbr_list { display: flex; flex-direction: column; gap: 2px; }
.__dbr_row { display: grid; grid-template-columns: 54px 22px 1fr auto 34px; align-items: center; gap: 8px; padding: 5px 8px; background: #23262c; border-radius: 5px; font-size: 13px; }
.__dbr_lv { color: #dcaf45; font-weight: 600; font-size: 12px; }
.__dbr_rec { text-align: center; font-weight: 700; }
.__dbr_rec[data-r="\2606"] { color: #ff6b6b; }
.__dbr_rec[data-r="\25ce"] { color: #ffa94d; }
.__dbr_rec[data-r="\25cb"] { color: #74c0fc; }
.__dbr_rec[data-r="\25b3"] { color: #868e96; }
.__dbr_title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e9ecef; }
.__dbr_title b { margin-right: 3px; }
.__dbr_tags { display: flex; gap: 3px; justify-content: flex-end; }
.__dbr_tag { font-style: normal; font-size: 10.5px; background: #2f343c; color: #adb5bd; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
.__dbr_match { text-align: right; color: #69db7c; font-weight: 600; font-size: 12px; }
.__dbr_headrow { background: transparent; padding: 2px 8px 4px; font-size: 10.5px; color: #6c757d; font-weight: 600; }
.__dbr_headrow span { white-space: nowrap; }
.__dbr_headrow .__dbr_tags { justify-content: flex-start; }
/* 플레이데이터 행(__pd_tr) 재사용 — 곡명 앞 추천도(☆◎○△) 뱃지 */
.__dbr_recbadge { font-weight: 700; margin-right: 3px; }
/* DBR난이도는 12.59 처럼 5글자라 곡명 앞 zasa 폭을 넓힘 (플레이데이터 4글자=20px 는 유지) */
.__dbr_folders .__pd_zasa { width: 30px; padding-right: 4px; }
/* Recent DBR 모드 — 곡명 앞 zasa 자리에 DBR 난이도(13.01) 표시라 폭 25px (일반 DP Recent 는 20px 유지) */
.__rc_dbr .__pd_zasa { width: 25px; }
.__dbr_folders .__pd_cell.__pd_title { padding-top: 6px; padding-bottom: 6px; }
/* 노트수 앞 추천도(☆◎○△) 뱃지 — 배치추천 뱃지 위치 방식 */
.__dbr_recnote { font-weight: 700; margin-right: 4px; font-size: 12px; }
/* 맨 위 추천곡 폴더 강조 */
.__dbr_recfolder > .__uprofile_pdsummary .__uprofile_pdlabel { color: #ffd43b; font-weight: 700; }
/* 추천곡 폴더 — 도전/적정/연습 버킷 구분 헤더 (데스크톱 grid 는 full-width, 모바일 flex 는 자동 full-width) */
.__dbr_recsection { grid-column: 1 / -1; padding: 6px 10px 3px; font-size: 11.5px; font-weight: 700; background: #181b20; border-top: 1px solid #2d323c; letter-spacing: .3px; }
.__dbr_recsection:first-child { border-top: none; }
.__dbr_recseccnt { opacity: .55; font-weight: 500; font-size: 10.5px; }
/* 노트수 자리에 패턴 해시태그 — 노트수 컬럼 폭을 넓혀 표시 (좌측정렬, 줄바꿈 없음) */
.__dbr_folders .__pd_tbody { grid-template-columns: 8px 34px 1fr 120px 44px 116px 84px; }
/* 추천곡 폴더(__os_recfolder) — 2줄 레이아웃. 1줄: level·곡명·해시태그(__os_rectags) / 2줄: ★난이도(__os_recdiff)·LAMP텍스트·rate·score.
   lamp·level 은 2줄 세로 span. (.__os_recfolder 안에서만 — 플레이데이터/DBR/통계 무관) */
/* 각 row 를 독립 2줄 grid 로 — __pd_tbody grid 에 cell 을 직접 두면 여러 row 가 같은 grid 행에 겹치므로(rate/DJ레벨 두 겹) __pd_tr 자체가 grid container. row 높이 ~40px(20+20).
   zasa★ 위치는 기본 동작 그대로: PC 는 곡명 앞(__pd_zasa), 모바일(@media 820px)은 game 레벨 밑(__pd_level_zasa). */
.__os_recfolder .__pd_tbody { display: flex; flex-direction: column; gap: 1px; }
.__os_recfolder .__pd_tr {
  display: grid;
  grid-template-columns: 8px 40px minmax(72px, 1fr) 56px 40px 130px 92px;
  grid-template-rows: 20px 20px;
  background: rgb(31, 31, 31);   /* cell 과 동일 색 — 트랙 사이로 다른 색이 비쳐 격자선처럼 보이는 것 방지 */
}
.__os_recfolder .__pd_tr > .__pd_cell { padding-top: 0; padding-bottom: 0; }
.__os_recfolder .__pd_tr:hover { background: #2d2d2d; }   /* hover 시 cell(#2d2d2d)과 배경 통일 — 트랙 사이 격자선 방지 */
.__os_recfolder .__pd_tr > .__pd_cell.__pd_lamp     { grid-column: 1; grid-row: 1 / 3; }
.__os_recfolder .__pd_tr > .__pd_cell.__pd_level    { grid-column: 2; grid-row: 1 / 3; flex-direction: column; justify-content: center; gap: 0; padding: 0 4px !important; font-size: 17px; }
.__os_recfolder .__pd_tr > .__pd_cell.__pd_title    { grid-column: 3; grid-row: 1 / 3; }
.__os_recfolder .__pd_tr > .__pd_cell.__os_rectags  { grid-column: 4 / 7; grid-row: 1; justify-content: flex-start; align-items: center; gap: 4px; font-size: 10px; color: #ff9bce; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.__os_recfolder .__pd_tr > .__pd_cell.__os_layoutcell { grid-column: 7; grid-row: 1; justify-content: flex-end; align-items: center; }
.__os_recfolder .__pd_tr > .__pd_cell.__pd_notes    { grid-column: 4; grid-row: 2; }
.__os_recfolder .__pd_tr > .__pd_cell.__pd_lamptext { grid-column: 5; grid-row: 2; }
.__os_recfolder .__pd_tr > .__pd_cell.__pd_ratebar  { grid-column: 6; grid-row: 2; }
.__os_recfolder .__pd_tr > .__pd_cell.__pd_num      { grid-column: 7; grid-row: 2; }
/* 해시태그 칸 — 해시태그(좌, 넘치면 …) + 배치추천 뱃지(우측 정렬, 핑크 테두리) */
.__os_recfolder .__os_rectags_list { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.__os_recfolder .__os_reclayout { flex-shrink: 0; color: #ff6b9d; font-size: 9px; font-weight: 700; padding: 0 3px; border: 1px solid #ff6b9d; border-radius: 2px; line-height: 1.2; white-space: nowrap; }
.__os_recfolder .__os_notes_layout { display: none; }   /* 데스크탑 — notes 안 배치추천은 숨김 (해시태그 우측 layoutcell 이 담당). 모바일에서만 노트수 자리에 표시. */
/* 연습곡 추천 폴더 — 난이도값(★) 숨기고 그 자리(notes)에 배치추천 표시. 해시태그 우측 layoutcell 은 중복이라 숨김. */
.__os_weakfolder .__os_recdiff { display: none !important; }
.__os_weakfolder .__os_layoutcell { display: none; }
.__os_weakfolder .__pd_cell.__pd_notes .__os_notes_layout { display: inline-flex !important; align-items: center; }
.__os_weakfolder .__os_recgoal { font-size: 10px; color: #74c0fc; white-space: nowrap; }   /* 연습곡 목표 rate */
/* PC — 목표 rate 는 해시태그 칸(__os_rectags) 우측 끝(margin-left:auto). notes 자리 사본은 PC 에서 숨김(모바일 @container 에서 다시 표시). */
.__os_recfolder .__os_recgoal_pc { margin-left: auto; flex-shrink: 0; }
.__os_recfolder .__pd_cell.__pd_notes .__os_recgoal { display: none; }
/* 연습곡 — layoutcell(col 7) 이 비어있으니 rectags 를 그 빈 컬럼까지 확장 → 해시태그/목표 rate 가 더 넓게, 목표(margin-left:auto)는 진짜 오른쪽 끝에 붙음.
   selector 는 base(.__os_recfolder .__pd_tr > .__pd_cell.__os_rectags, 0,4,0)와 같은 specificity + 뒤에 와서 우선. */
.__os_weakfolder .__pd_tr > .__pd_cell.__os_rectags { grid-column: 4 / -1; }
/* 배치추천 뱃지 — 우측 정렬 (추천곡 데스크탑 해시태그칸 layoutcell + 모바일 notes칸, 연습곡 공통) */
.__os_recfolder .__os_reclayout { margin-left: auto; }
.__os_recfolder .__os_seriesline, .__dbr_folders .__os_seriesline { display: flex; align-items: center; gap: 5px; min-width: 0; }
.__os_recfolder .__os_seriesfeat, .__dbr_folders .__os_seriesfeat { display: none; }   /* 데스크탑 — 강한 피쳐는 숨김. 모바일에서만 시리즈명 옆 표시. */
/* 모바일 — 해시태그를 곡명 밑으로 (3줄: 곡명 / 해시태그 / 통계). row 총 높이 46.75px. 데스크탑 규칙 뒤에 둬서 모바일에서 우선. */
@container (max-width: 600px) {
  /* 플레이데이터 모바일 grid 그대로 — 7컬럼 2줄. @container 600px = 플레이데이터/DBR 와 동일 기준(2줄 전환 시점 통일). */
  .__os_recfolder .__pd_tr {
    grid-template-columns: 8px 36px minmax(0, 1fr) 45px 50px 60px 93px;
    grid-template-rows: auto auto;
    height: auto;
    column-gap: 4px;
  }
  .__os_recfolder .__pd_tr > .__pd_cell.__pd_lamp       { grid-column: 1; grid-row: 1 / 3; margin: 0; }
  .__os_recfolder .__pd_tr > .__pd_cell.__pd_level      { grid-column: 2; grid-row: 1 / 3; }
  .__os_recfolder .__pd_tr > .__pd_cell.__pd_title      { grid-column: 3 / 7; grid-row: 1; }
  .__os_recfolder .__os_seriesfeat, .__dbr_folders .__os_seriesfeat { display: inline-block; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a8f98; font-size: 9px; }   /* 모바일 — 강한 피쳐를 시리즈명 옆에 (시리즈 태그와 같은 회색) */
  .__os_recfolder .__pd_tr > .__pd_cell.__pd_notes      { grid-column: 7; grid-row: 1; justify-content: flex-start !important; }
  /* 노트수 자리 → 배치추천 / 'notes' 라벨(after) 자리 → ★난이도 (플레이데이터 노트수·라벨 위치 방식 그대로) */
  .__os_recfolder .__pd_tr > .__pd_cell.__pd_notes .__os_notes_layout { display: inline-flex; align-items: center; flex: 0 0 auto; margin-right: 4px; }   /* 배지 — 내용폭(안 늘어남) */
  .__os_recfolder .__pd_tr > .__pd_cell.__pd_notes .__os_recdiff      { flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 난이도 — 남는 폭, 우측정렬, 안 튀어나감 */
  .__os_recfolder .__pd_tr > .__pd_cell.__pd_notes .__os_recgoal      { display: block; flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 연습곡 목표 rate — 모바일 notes 자리 (base display:none 복구) 우측정렬 */
  /* DBR — 'notes' 라벨(after) 숨기고 추천도(__dbr_recbadge)를 그 우측 자리에. (피쳐는 시리즈 옆으로 이동) */
  .__dbr_folders .__pd_tr > .__pd_cell.__pd_notes::after { display: none; }
  .__dbr_folders .__pd_tr > .__pd_cell.__pd_notes { justify-content: flex-end !important; }
  .__os_recfolder .__pd_tr > .__pd_cell.__pd_lamptext   { grid-column: 4; grid-row: 2; }
  .__os_recfolder .__pd_tr > .__pd_cell.__pd_ratebar    { grid-column: 5 / 7; grid-row: 2; }
  .__os_recfolder .__pd_tr > .__pd_cell.__pd_num        { grid-column: 7; grid-row: 2; }
  .__os_recfolder .__pd_tr > .__pd_cell.__os_rectags    { display: none; }   /* 모바일 — 해시태그 미표시 */
  .__os_recfolder .__pd_tr > .__pd_cell.__os_layoutcell { display: none; }   /* 모바일 — 배치뱃지 미표시 */
}
.__dbr_notestags { justify-content: flex-start !important; gap: 5px; font-size: 10px; color: #ff9bce; overflow: visible; white-space: nowrap; padding-right: 2px !important; }
/* 시리즈 해시태그 (#CastHour 등) — 곡명 위 작은 줄 (titlebox 로 곡명과 한 묶음, zasa 와는 같은 줄) */
.__dbr_titlebox { display: inline-flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.15; vertical-align: middle; }
.__dbr_series { font-size: 10px; color: #8a8f98; font-weight: 400; white-space: nowrap; line-height: 1.1; }
.__dbr_songname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 폴더 클릭 스크롤 시 sticky 헤더(검색창+summary) 높이만큼 띄워 첫 곡이 가려지지 않게 */
.__dbr_folders .__uprofile_pdfolder { scroll-margin-top: calc(var(--uprofile-header-h, 0px) + var(--uprofile-tabs-h, 0px) + var(--pd-filter-h, 0px) + 4px); }
/* 행 클릭 = 점수 입력 */
.__dbr_folders .__pd_tr { cursor: pointer; }
/* 필터바 — 검색창 왼쪽, 토글버튼들 오른쪽. 버튼/검색창 높이 고정(텍스트 길이 무관). */
[data-panel="recommendDBR"] .__uprofile_pdfilter { flex-wrap: wrap; align-items: center; }
[data-panel="recommendDBR"] .__pd_search_wrap { margin-right: auto; }
[data-panel="recommendDBR"] .__uprofile_pdtoggle { min-width: 62px; height: 30px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
[data-panel="recommendDBR"] .__pd_searchbox { height: 30px; box-sizing: border-box; }
/* 점수 입력 / 비밀번호 변경 모달 */
.__dbr_modalbg { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 10001; }   /* 모바일 유저카드 모달(.is-modal, z:10000) 위에 떠야 함 */
.__dbr_modal { background: #23262c; border: 1px solid #3a3f47; border-radius: 10px; padding: 18px; width: 290px; max-width: 90vw; display: flex; flex-direction: column; gap: 10px; }
.__dbr_mtitle { font-weight: 700; font-size: 14px; color: #e9ecef; margin-bottom: 2px; }
.__dbr_mrow { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #adb5bd; }
.__dbr_mrow > span { flex: 0 0 56px; }
.__dbr_mrow select, .__dbr_mrow input { flex: 1; min-width: 0; background: #1a1d22; border: 1px solid #3a3f47; color: #e9ecef; border-radius: 5px; padding: 6px 7px; font-size: 13px; }
.__dbr_mmsg { font-size: 12px; color: #ff8787; min-height: 14px; }
.__dbr_mbtns { display: flex; gap: 8px; }
.__dbr_mbtns button { flex: 1; padding: 8px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; }
.__dbr_msave { background: #4263eb; color: #fff; }
.__dbr_mcancel { background: #343a40; color: #ced4da; }
.__dbr_mpwbtn { background: transparent; border: none; color: #74c0fc; font-size: 12px; cursor: pointer; align-self: flex-start; padding: 0; }
@media (max-width: 600px) {
  .__dbr_row { grid-template-columns: 48px 20px 1fr 30px; }
  .__dbr_tags { display: none; }
}

/* iOS Safari — input/select/textarea 의 font-size 가 16px 미만이면 포커스 시 화면이 자동 확대(줌)됨.
   모바일에서 16px 로 올려 줌 방지 (서열표·유저·곡명·난이도 검색 등 모든 입력 공통). 핀치줌은 유지. */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}