/* ============================================================================
   SPEC-CAVE-08A — 내 케이브 목록
   목업 `design_mockup/css/mockup.css` 에서 **이 화면이 쓰는 규칙만** 옮긴 것이다.
   숫자를 여기서 고치지 말 것 — 목업이 원본이고, 목업은 Figma 실측값이다.

   🔴 좌우 여백은 하드코딩 금지. `.mx_n24`(풀블리드) + `.px_24`(안쪽)를 마크업에서 쓴다.
      PC 2.4rem / 모바일 2.0rem(경계 991.98px) 이라 `margin:0 -2rem` 을 박으면 PC 에서 4px 어긋난다.
   ========================================================================== */

/* ── B-2-1. 타입 칩 바 (Figma 38:38744 "tab bar") ──────────────────────────
   🔴 **커스텀 클래스 없음.** 알림 페이지(design/push.php 13~25)의 카테고리 칩을 그대로 쓴다 —
      `.touch_scroll.scroll_bar_none.mx_n24`
        > `.btn-group.btn-group-toggle.flex-nowrap.dark.gap_10.px_24`
          > `label.btn.btn-outline-border.btn-md.rounded-pill(.active)`
      Figma 수치가 이미 custom.css 에 그대로 있다 —
        268 `.btn-md` 높이 3.6rem · fs 1.5rem   294 `.btn-group-toggle .btn` 좌우 1.8rem
        314 `.btn-group-toggle.dark ....active` #38404B 배경 · 흰 글자 · SemiBold
   여기서는 **시안에만 있는 세로 구분선**(다운로드 내역 앞)만 추가한다. */
.mk_cv_tab_div {                            /* 세로 구분선 1x36 */
	flex-shrink: 0;
	align-self: center;
	width: 1px;
	height: 3.6rem;
	background: var(--gray-200);
}

/* ── B-2-2. 정렬 바 (Figma 38:38743) — 350 폭, 칩 바에서 24 아래 ────────── */
.mk_cv_sortbar {
	display: flex;
	align-items: center;                /* 좁은 폭에서 정렬 텍스트가 줄바꿈돼도 위 정렬 */
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.4rem;
}
.mk_cv_sort {                               /* 아이콘16 + gap6 + 14 SemiBold */
	display: inline-flex;
	align-items: flex-start;
	gap: .6rem;
	flex: 1 1 auto; min-width: 0;           /* 남는 폭 채우고 필요 시 줄바꿈 */
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.6rem;
	color: var(--gray-500);
	text-align: left;                       /* 320px 줄바꿈 시 왼쪽 정렬 */
}
.mk_cv_sort img { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }
.mk_cv_follower { flex-shrink: 0; }         /* 팔로워 전용 버튼은 안 줄어들게 */
.mk_cv_follower {                           /* 팔로워 전용 토글 — px12 py8 r8 border, 아이콘18 + gap8 + 14 Medium */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	height: 3.6rem;
	padding: .8rem 1.2rem;
	border: 1px solid var(--gray-200);
	border-radius: .8rem;
	background: #fff;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 2rem;
	color: var(--gray-600);
	white-space: nowrap;
}
.mk_cv_follower img { width: 1.8rem; height: 1.8rem; }
.mk_cv_follower.on {                        /* [ASSUME] 시안에 ON 상태가 없어 선택 상태는 primary 계열로 표현 → 03 Q16 */
	border-color: var(--primary);
	background: var(--primary-100);
	color: var(--primary);
}
/* ON 일 때 아이콘도 같이 파랗게 — SVG 를 <img> 로 넣어 CSS 로 색을 못 바꾸므로
   기존 프로젝트의 `*_on` 짝 컨벤션(profile_icon02 / profile_icon02_on 등)대로
   `mk_ic_follower_on.svg` 를 PHP 에서 갈아끼운다. */

/* ── B-2-3. 자료 카드 리스트 (Figma 38:38644 / 다운로드내역 53:4863) ───────
   카드 = 화면 폭 전체(390) p20 + 하단선 #F6F6F8. 내용은 350.
   썸네일 56 r8 / gap14 / 본문 280 (세로 gap12) */
/* 좌우는 마크업의 `.mx_n24`(PC -2.4rem / 모바일 -2.0rem)가 담당. 여기선 위 간격만. */
.mk_cv_list {
	margin-top: 1.4rem;                     /* 정렬바에서 14 아래 */
	padding: 0;
	list-style: none;
}
.mk_cv_list_dl { margin-top: 2.4rem; }      /* 다운로드 내역 탭엔 정렬바가 없어 칩 바에서 24 아래 */
.mk_cv_list > li { position: relative; }    /* 더보기 팝오버의 기준 */
/* 좌우 padding 은 마크업의 `.px_24`(PC 2.4rem / 모바일 2.0rem)가 담당 — 위아래만 여기서 */
.mk_cv_item {
	position: relative;
	display: flex;
	gap: 1.4rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--gray-100);
	background: #fff;
	text-align: left;
	width: 100%;
	border-left: 0; border-right: 0; border-top: 0;
}
.mk_cv_thumb {
	flex-shrink: 0;
	width: 5.6rem;
	height: 5.6rem;
	border-radius: .8rem;
	object-fit: cover;
	background: var(--gray-100);
}
/* 썸네일 미등록(문서) — 사진 대신 문서 아이콘. 등록 화면 파일 행(.mk_cv_file_ic)을 그대로 넣는다.
   그 컴포넌트 배경이 이미 gray-100 원형이라 같은 색 박스 안에서는 테두리가 보이지 않는다.
   ⚠ 시안에 이 상태 화면이 없다 — 안내문(209:41097)만 근거 → 03 Q52 */
.mk_cv_thumb_doc { display: inline-flex; align-items: center; justify-content: center; }
.mk_cv_body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.2rem;
	flex: 1 1 auto;
	min-width: 0;
}
/* 제목행 (Figma 38:38408) — [제목 + 팔로워전용 배지](flex-1, gap4) / [⋮ 18] 양끝 정렬 */
.mk_cv_head { display: flex; align-items: flex-start; justify-content: space-between; }
.mk_cv_titwrap {
	display: flex;
	align-items: flex-start;
	gap: .4rem;
	flex: 1 1 auto;
	min-width: 0;
}
/* 팔로워 전용 자료 표시 배지 (Figma 38:38536) — 18 원형 #3A86FF + 흰 사람 아이콘 12 박스 */
.mk_cv_fo {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--primary);
}
.mk_cv_fo img { width: .912rem; height: 1.015rem; }   /* 12 박스 안의 실제 아이콘 크기 그대로 */
.mk_cv_tit {                                /* 16 SemiBold lh1.3, 2줄 말줄임 */
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--gray-600);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mk_cv_more {                               /* ⋮ 18 */
	flex-shrink: 0;
	width: 1.8rem;
	height: 1.8rem;
	padding: 0;
	border: 0;
	background: transparent;
	line-height: 0;
}
.mk_cv_more img { width: 1.8rem; height: 1.8rem; }
.mk_cv_gold {                               /* 골드 아이콘24 + gap8 + 16 SemiBold */
	display: flex;
	align-items: center;
	gap: .9rem;
}
.mk_cv_gold_v { display: flex; align-items: center; gap: .8rem; flex: 1 1 auto; min-width: 0; }
.mk_cv_gold_v img { width: 2.4rem; height: 2.4rem; flex-shrink: 0; }
.mk_cv_gold_v span {
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--gray-600);
	white-space: nowrap;
}
.mk_cv_date {                               /* 이용기간 13 Regular */
	flex-shrink: 0;
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--gray-500);
	white-space: nowrap;
}
.mk_cv_expired {                            /* 이용기간 만료 12 Regular */
	flex-shrink: 0;
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--gray-400);
	white-space: nowrap;
}
.mk_cv_badge {                              /* 타입 배지 px6 py5 r20 fs12 Medium (Figma 55:5150) */
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: .5rem .6rem;
	border-radius: 2rem;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1;
}
.mk_cv_badge_img { background: var(--primary-100); color: var(--primary); }        /* #ECF3FF / #3A86FF */
.mk_cv_badge_mov { background: #F3EDFF; color: #7749C0; }                          /* [ASSUME] CSS 변수에 없는 색 — Figma 원시값 유지 → 03 Q17 */
.mk_cv_badge_doc { background: #E3FBF7; color: #2C9A88; }                          /* [ASSUME] 동상 */

/* ── B-2-4. 카드 더보기 팝오버 (Figma 53:4243) ─────────────────────────────
   카드 상단 20(padding) + ⋮ 18 + 9 = 47 아래. 204 폭 / 행 40 (px12 py10) / r12 /
   shadow 0 2 4 rgba(0,0,0,.05).

   백드롭은 기존 채팅 컨텍스트 메뉴 장치를 그대로 쓴다(R2) —
   `.context_dropdown` + `.context_backdrop` + `.active` (design.css 853, group_talk.php 61~68).
   그래서 z-index 는 기존 `.context_menu` 와 같은 1001 (백드롭 1000 위). */
.mk_cv_pop {
	display: none;
	position: absolute;
	right: 2.4rem;                          /* 기본 = PC. 모바일은 아래 미디어쿼리에서 2rem */
	top: 4.7rem;
	z-index: 1001;
	width: 20.4rem;
	border-radius: 1.2rem;
	overflow: hidden;
	background: #fff;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .05));
}
.context_dropdown.active .mk_cv_pop { display: block; }
/* 팝오버 우측 여백은 카드의 .px_24 와 같이 맞춘다 (custom.css 와 동일한 991.98px 경계) */
@media (max-width: 991.98px) { .mk_cv_pop { right: 2rem; } }
.mk_cv_pop_btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 4rem;
	padding: 1rem 1.2rem;
	border: 0;
	border-bottom: 1px solid var(--gray-100);
	background: #fff;
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--gray-600);
}
.mk_cv_pop_btn img { width: 2rem; height: 2rem; }
.mk_cv_pop_btn.mk_del { color: var(--danger); }

/* ── B-2-5. 화면 고정 버튼 컨테이너 ────────────────────────────────────────
   🔴 PC 에서 고정 버튼은 **뷰포트 중앙이 아니라 모바일 영역(.mobile_wr) 기준**이어야 한다.
      .body_center 는 `body_left(QR 패널) + mobile_wr` 를 묶어 가운데 정렬하므로
      뷰포트 50% 는 mobile_wr 의 중앙이 아니다. (그래서 PC 에서 버튼이 왼쪽으로 밀렸다)

      기존 .bt_menu(design.css 318) 가 쓰는 방식을 그대로 따른다 —
      position:fixed + **left 미지정**(= static 위치 유지 → mobile_wr 좌측에 붙음)
      + width:100% + max-width:var(--body_width).
      이러면 모바일에서는 화면 전체, PC 에서는 모바일 영역에 정확히 맞는다. */
.mk_float {
	position: fixed;
	bottom: 0;
	z-index: 30;
	width: 100%;
	max-width: var(--body_width);
	height: 0;                              /* 목록 클릭을 가리지 않게 높이 0 */
	pointer-events: none;                   /* 컨테이너는 클릭 통과, 버튼만 받는다 */
}
.mk_float > * { pointer-events: auto; }

/* ── SPEC-CAVE-17 · 검색 화면 「맨 위로」 래퍼 (mockup.css 1332~1347 블록 그대로) ──
   내 케이브 FAB(`.mk_float`)는 우측이지만 **검색 화면은 시안이 가운데**다(Figma 57:10633).
   PC 에서도 모바일 영역 중앙에 오도록 `.bt_menu` 방식(left/right 0 + margin auto + max-width).
   ★ CAVE-07 이 이 블록을 통째로 안 옮겨서 검색 허브·결과에 맨 위로가 **아예 없었다**(0809 전수대조에서 잡음). */
.mk_sr_float {
	position: fixed;
	left: 0; right: 0;
	bottom: 2rem;
	margin: 0 auto;
	width: 100%;
	max-width: var(--body_width);
	display: flex;
	justify-content: center;
	pointer-events: none;
	z-index: 20;
}
/* ★ `.mk_gotop` 의 position 을 건드리지 않는다 — 목업은 `absolute + left:50% + translateX(-50%)` 그대로다.
     `static` 으로 바꿨더니 래퍼 높이가 0 → 42px 로 변해 목업과 어긋났다(0809 실측). */
.mk_sr_float .mk_gotop { pointer-events: auto; }

/* 상단 이동 버튼 (Figma 38:38805) — 42 원형, 하단 45, 가로 중앙
   원형 배경/테두리/그림자는 여기서 그리고, SVG 는 chevron 만 담는다.
   Figma export 그대로 쓰면 drop-shadow 필터 영역(66x66) 때문에 아이콘이 쪼그라든다.
   그림자 값은 export SVG 의 필터에서 읽었다:
     feOffset dy=4 / feGaussianBlur stdDeviation=6(→blur 12)
     feColorMatrix rgb(0.121569, 0.164706, 0.235294) a=0.06 → rgba(31,42,60,.06) */
.mk_gotop {
	position: absolute;
	left: 50%;
	bottom: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.2rem;
	height: 4.2rem;
	padding: 0;
	border: 1px solid var(--gray-100);      /* #F6F6F8 */
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 12px rgba(31, 42, 60, .06);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transform: translateX(-50%);
	line-height: 0;
	opacity: 0; visibility: hidden;                 /* 평소 숨김 — 스크롤 300px 이상에서만 노출(공통) */
	transition: opacity .2s ease, visibility .2s ease;
}
.mk_gotop.on { opacity: 1; visibility: visible; }
.mk_gotop img { width: 1.22rem; height: auto; }   /* chevron 11.1 + stroke 여유 */

/* ── B-2-6. FAB 자료 등록 (Figma 38:37618) — 56, 우 16 / 하단 38 ───────────
   아이콘은 친구탭 케이브 칩과 같은 구성: 로티(그라데이션 육각형) + 흰 선 오버레이.
   육각형을 SVG 로 내보내면 Figma 의 conic-gradient 가 foreignObject 로 나와
   환경에 따라 깨지므로, 친구탭과 동일하게 로티를 쓴다. */
.mk_fab {
	position: absolute;
	right: 1.6rem;
	bottom: 1.6rem;
	width: 5.6rem;
	height: 5.6rem;
	padding: 0;
	border: 0;
	background: transparent;
	line-height: 0;
}
/* ★ 0922 — 아래 E-2 의 `.mk_cave_ico`(36) · `.mk_cave_ico_line`(40%)이 **뒤에 선언돼** 같은 구체성으로 이 값을 덮어,
   육각형 36 · 플러스 14 로 작게 나왔다(곽 대표·사용자 「+ 가 앱과 다르다」). 클래스를 두 개 붙여 구체성을 올린다. 앱 CaveScreen fab 56 과 같다. */
.mk_cave_ico.mk_cave_ico_fab { width: 5.6rem; height: 5.6rem; }
/* 플러스 SVG 는 육각형과 같은 56 viewBox 라 100% 로 겹치면 좌표가 그대로 맞는다.
   (.mk_cave_ico_line 기본값 40% 를 덮어씀) */
.mk_cave_ico_line.mk_fab_plus { width: 100%; }

/* ── B-2-7. 정렬 바텀시트 (Figma 38:39337) ────────────────────────────────
   🔴 **커스텀 클래스 없음.** 기존 바텀시트 기본메뉴를 그대로 쓴다 —
      `.bottom-sheet > .content > .header(.drag-icon) + .body`
        > `.tit_h3.text-center.pb-5` (18px SemiBold = Figma 타이틀과 동일)
        > `.bs_menu > ul > li` (design.css 1447~1449, 원본 design/my_info.php 94~101)
      항목의 라디오는 기존 `.radios .ic_box`(custom.css 561~580)를 그대로 넣는다.
      `.bs_menu li .bs_btn` 는 텍스트 전용 버튼이라, 라디오 행에 같은 룩(높이·구분선)만 준다. */
.bs_menu li .bs_radio {
	display: block;
	border-top: 1px solid var(--gray-100);   /* .bs_btn 과 동일한 구분선 */
}
.bs_menu li .bs_radio .radios { margin: 0; }
.bs_menu li .bs_radio label {
	height: 5.5rem;                          /* .bs_btn 과 동일한 행 높이 */
	margin: 0;
	padding: 0 1.6rem;                       /* .bs_menu ul 의 -1.6rem 상쇄 */
}
.bs_menu li .bs_radio .ic_box { margin-right: 1.2rem; }

/* ── 썸네일 미등록(문서) 아이콘 — 등록 화면 파일 행과 같은 컴포넌트 (03 Q52) ── */
.mk_cv_file_ic {                            /* 46 원형 안에 32 아이콘 박스가 들어간다 */
	position: relative;
	width: 4.6rem;
	height: 4.6rem;
	border-radius: 50%;
	background: var(--gray-100);
	flex-shrink: 0;
}
.mk_cv_file_ic > img {                      /* 32 박스 기준 left 5.33 / top 1.67 (테두리 여백 포함 24x29.33) */
	position: absolute;
	left: 1.233rem;
	top: .867rem;
	width: 2.4rem;
	height: 2.933rem;
}
.mk_cv_file_ic > em {                       /* 확장자 배지 — Figma 는 텍스트 노드라 마크업으로 그린다 */
	position: absolute;
	left: .9rem;
	top: 2.067rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 1.067rem;
	padding: 0 .267rem;
	border-radius: .267rem;
	font-size: .7rem;
	font-weight: 700;
	font-style: normal;
	color: #fff;
}
/* 확장자 배지 색 — CSS 변수에 없는 신규색이라 원시값을 쓴다 (R6 예외) → 03 Q32
   시안에 **확장자 아이콘 10종이 모여 있는 프레임**이 따로 있다(이름 `Frame 427319620`,
   docx·doc·hwp·hwpx·xlsx·xls·pptx·ppt·txt·pdf). 색은 확장자마다 다르고,
   같은 계열 안에서도 **신형(x 붙은 쪽)이 더 진하다**.
   · `pdf` `hwp` 는 `57:8428` 에서 뽑은 **Figma 확정값**
   · 나머지 8종은 위 프레임의 nodeId 를 아직 못 받아 **이미지에서 읽은 계열값**이다.
     → node 링크를 받으면 hex 만 갈아끼우면 된다. 03 Q32 에 기록. */
.mk_cv_file_ic.pdf  > em { background: #D42022; }   /* Figma 확정 */
.mk_cv_file_ic.hwp  > em { background: #4EA3F7; }   /* Figma 확정 — 한글 */
.mk_cv_file_ic.hwpx > em { background: #4EA3F7; }
.mk_cv_file_ic.docx > em { background: #1B3F94; }   /* 진남색 */
.mk_cv_file_ic.doc  > em { background: #2B579A; }
.mk_cv_file_ic.xlsx > em { background: #2E9E45; }   /* 초록 */
.mk_cv_file_ic.xls  > em { background: #37A94E; }
.mk_cv_file_ic.pptx > em { background: #FF7A45; }   /* 주황 */
.mk_cv_file_ic.ppt  > em { background: #F1683A; }
.mk_cv_file_ic.txt  > em { background: #C58BC8; }   /* 연보라 */
.mk_cv_file_ic.mov  > em { background: #7749C0; }   /* [ASSUME] 영상 — 시안에 없음. 목록 영상 배지 글자색 재사용 */
.mk_cv_file_ic.etc  > em { background: var(--gray-400); }


/* ============================================================================
   SPEC-CAVE-04B — 자료 등록 폼
   목업 mockup.css 발췌. 숫자를 여기서 고치지 말 것(Figma 실측값이다).
   ★ 목업이 새로 만든 CSS 는 파일 행 · 태그 칩 · 동의 박스 3개뿐이고,
     4열 그리드·업로드 박스·분할 버튼·체크박스·인풋·카운터는 전부 기존 것이 수치까지 맞았다.
   ========================================================================== */
/* 기존 custom.css 에 없는 간격 유틸 — 시안 수치(26/30)를 맞추기 위해 추가.
   custom.css 는 수정하지 않는다(R4). 작명은 기존 .mt_24 컨벤션 그대로. */
.mt_26 { margin-top: 2.6rem; }
.mt_30 { margin-top: 3.0rem; }

/* ── B-2-9. 자료 수정 폼 (Figma 53:4615) ──────────────────────────────────
   안내문 12 #989FAA / 라벨 14 Medium + 필수점 4 / 인풋 350x50 r8 / 하단 고정 CTA */
.mk_cv_form_desc {
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--gray-400);
}
.mk_cv_label {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.mk_cv_label > span:first-child {
	display: inline-flex;
	align-items: flex-start;
	gap: .2rem;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--gray-500);
}
.mk_cv_label .mk_req {                      /* 필수 표시 점 4px */
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--primary);
	margin-top: .2rem;
}
.mk_cv_label .mk_cv_label_sub {
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--gray-400);
}
/* 🔴 이미지 첨부 그리드는 **실서비스 컴포넌트**를 쓴다 — 새로 만들지 않는다 (R2)
   원본 마크업 : `src/qna_form.php` 102~115 (`.upload_img_wrap > .image_upload > .upload_box > .rect`)
   원본 CSS    : `css/default.css` 105 + `css/default_user.css` 457~459 (4열 고정)
                 `.upload_box` `.upload_del` `.rect` 는 이미 `custom.css` 599·610·695 에 있다.
   `mockup/css` 에는 `design/` 자산만 복사돼 있어 **wrapper 규칙만 빠져 있다.**
   값은 손대지 않고 그대로 옮겨 적는다.

   ※ 4열이 고정인 이유 — `.image_upload` 가 `flex: 0 0 25%`.
     컨테이너 350 기준 (350+10)/4 − 10 = **정확히 80px**, 세로 간격 `row-gap: 1rem` = Figma 10.
     이전에 `gap` + `width:8rem` 로 새로 짰더니 화면이 넓어지면 5·6열로 흘러 시안과 어긋났다. */
.upload_img_wrap { display: flex; flex-wrap: wrap; margin-left: -.5rem; margin-right: -.5rem; row-gap: 1rem; }
.upload_img_wrap .image_upload {
	width: auto;
	margin: 0;
	padding-left: .5rem;
	padding-right: .5rem;
	display: flex;
	flex: 0 0 25%;
	max-width: 25%;
}
.upload_img_wrap .upload_box { display: inline-block; position: relative; width: 100%; height: auto; }

.mk_cv_gold_box .form_box { justify-content: space-between; }
/* 폭은 custom.js 가 값 길이에 맞춰 **인라인 style 로** 잡아준다(+ min-width:18px 도 인라인).
   인라인이 항상 이기므로 여기서 min-width 를 줘도 무시된다 — 폭 문제는 CSS 가 아니라
   'input' 이벤트를 발생시켜서 푼다. (cave_edit.php 의 sync() 참고) */
.mk_cv_gold_box .item_opt_counter .quantity { font-size: 1.7rem; }

/* 하단 고정 CTA 는 기존 `.bottom_btn` 패턴을 그대로 쓴다(R2) — 별도 CSS 없음.
   원본: design.css 8~19 (+ 모바일 1486~1487), 마크업 design/find_id.php 31~38.
   Figma 53:4660 의 버튼(350 x 52, r10, 17 SemiBold)에 맞춰 색/모양만 여기서 미세 조정. */
.bottom_btn .btn-lg { border-radius: 1rem; font-size: 1.7rem; font-weight: 600; }
/* 0922 저장 버튼이 가운데에 오지 않음 —
   ① 자료 등록: `.bottom_btn`(design.css 8)은 `.container` 안에 두는 전제로 좌우 -2.4rem 을 건다. 등록 화면은 `.container` 밖이라
      상쇄할 여백 없이 음수 여백만 걸려 버튼이 왼쪽으로 20(PC 24) 밀렸다 → 이 화면만 여백 0(`.bottom_btn.mk_dt_bottom` 과 같은 이유).
   ② 자료 수정: `.btn_wrap.mk_dt_bottom` 에 좌우 안쪽 여백이 없어 버튼이 화면 끝까지 넓었다 → 입력칸과 같은 24(모바일 20). */
.bottom_btn.mk_cv_regist_bottom { margin-left: 0; margin-right: 0; }
.btn_wrap.mk_dt_bottom { padding-left: 2.4rem; padding-right: 2.4rem; }
@media (max-width: 991.98px) { .btn_wrap.mk_dt_bottom { padding-left: 2rem; padding-right: 2rem; } }

/* ── B-2-10. 자료 등록 폼 (B-4 그룹) ──────────────────────────────────────
   Figma  55:5258 이미지(390x1683) / 55:5603 영상(1851) / 57:5848 문서(2009)
          57:9165 등록 확인 모달 / 53:4329 골드 부족 팝업
   구현    cave_regist.php  (?type=img|mov|doc — 한 파일 3상태)

   🔴 새로 만든 건 **업로드 박스 · 파일 행 · 태그 칩 · 동의 박스 4개뿐**이다.
      나머지는 전부 기존 컴포넌트가 Figma 수치와 그대로 맞는다 (R2 / E-0):
      · 라벨 14 Medium + 필수점 4      → `.mk_cv_label` `.mk_req` `.mk_cv_label_sub` (위 B-2-9)
      · 12px 보조 안내                 → `.mk_cv_form_desc` (위 B-2-9)
      · 인풋 350x50 r8 #D0D4DA         → `.form_box` (design.css 217)
      · 설명 textarea padding 15       → `.form_box.form_textarea` (design.css 245)
      · 이미지 첨부 4열 80 + 삭제 18   → `.upload_img_wrap`+`.image_upload`+`.upload_box`+`.rect` (실서비스)
      · 350x200 업로드 박스            → `.image_upload_lg`+`.upload_box_lg` (design.css 625)
      · 숫자 증감 22 원형              → `.item_opt_counter` (design.css 253)
      · 2·3분할 선택 h48 r8            → `.btn-group-toggle`+`.btn-outline-border`+`.form-row`
                                         (custom.css 309·310 = #ECF3FF/#81B1FF/#3A86FF 정확 일치,
                                          .form-row gutter 5px = Figma gap 10 정확 일치)
      · 체크박스 24 r6                 → `.checks .ic_box` (custom.css 520·536 정확 일치)
      · 하단 고정 저장                 → `.bottom_btn` (위)
      · 확인/골드부족 팝업             → `modal-sm` 그대로 (위 B-2-8) --------------- */

/* 숫자 증감의 값 표시 — 여기선 `<input class="quantity">` 를 쓰지 않는다.
   custom.js 335~349 의 폭 자동조절이 `document.querySelector('.quantity')` 라
   **페이지의 첫 번째 하나만** 잡는다. 이 화면은 카운터가 3개(기간·골드·이용기간)라
   2·3번째가 초기폭에 고정돼 값이 잘린다. → 폭 계산이 필요 없는 `<span>` 으로 두고
   값 변경은 이 페이지 JS 가 textContent 로 처리한다. (cave_edit.php 는 1개뿐이라 input 유지) */
.mk_cv_cnt_v {
	font-size: 1.7rem;
	font-weight: 500;
	color: var(--gray-600);
	line-height: 2.2rem;
}

/* 설명 textarea 350x130 (Figma 55:5437).
   `textarea.form-control` 은 custom.css 439 에서 `height: fit-content !important` 라
   height 로는 못 잡는다. min-height 는 height 보다 우선이라 이걸로 고정한다. */
.mk_cv_ta .form-control { min-height: 10rem; }

/* 파일 선택 트리거는 `<button>` 이 아니라 `<label>` + 숨은 `<input type="file">` 이다
   (실제로 파일을 골라 화면에 붙이기 위함 — js/mockup.js 2번 항목).
   부트스트랩 reboot 의 `label{margin-bottom:.5rem}` 을 반드시 지워야 간격이 안 어긋난다. */
label.upload_box,
label.upload_box_lg { margin-bottom: 0; cursor: pointer; }

/* 🔴 영상·문서 업로드 박스도 **기존 컴포넌트**다 — 새로 만들지 않는다 (R2)
   `.image_upload_lg` + `.upload_box_lg` (design.css 625~667, 원본 마크업 `design/lookatme_upload.php` 26~31).
   Figma 와 사실상 그대로 일치한다:
     · 비율 `padding-bottom: calc(200/350*100%)`  → 350 폭에서 **정확히 200**
     · `border-radius: 1.2rem` / `1px var(--gray-300)`  → Figma r12 / #D0D4DA
     · 배경 아이콘 `upload_lookatme.png` **4.6rem** @ `top 32%` → Figma 46 원 @ top 50 (=(200−46)×.32)
     · `.info` 14 / gray-400 / line-height 140%
   원본 안내문까지 "클릭하여 동영상 선택 / MP4, MOV, AVI 동영상 파일" 로 **Figma 와 동일**하다.
   → 내가 만들었던 `.mk_cv_upload*` 와 `mk_ic_upload.svg` 는 폐기했다.

   유일한 보정: `.info` 가 `bottom:50% + translateY(4.7rem)` 라 **줄 수에 따라 위치가 밀린다.**
   Figma 는 영상(2줄)·문서(3줄) 모두 박스 상단 기준 **112**에서 시작한다 → top 기준으로 고정. */
.mk_cv_up .upload_box_lg .info {
	bottom: auto;
	top: 56%;                               /* 200 × .56 = 112 */
	transform: none;
}

/* 용량·개수 안내 — 12px 두 문구를 세로 구분선으로 나눈다 (Figma 57:5832) */
.mk_cv_upload_meta { display: flex; align-items: center; gap: .8rem; }
.mk_cv_upload_meta .bar_v {
	width: 1px;
	height: .8rem;
	background: var(--gray-300);
}

/* 첨부된 문서 행 (Figma 57:8428) — 350 r12, 확장자 아이콘 46 + 파일명/용량 + 삭제 26 */
.mk_cv_files { display: flex; flex-direction: column; gap: 1rem; }
.mk_cv_file {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1.2rem 1.6rem;
	border: 1px solid var(--gray-300);
	border-radius: 1.2rem;
	background: #fff;
}
.mk_cv_file_body { flex: 1 1 auto; min-width: 0; }
.mk_cv_file_tit {
	display: block;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--gray-500);
	word-break: break-all;
}
.mk_cv_file_size {
	display: block;
	margin-top: 1rem;
	font-size: 1.2rem;
	color: var(--gray-400);
}
.mk_cv_file_del { width: 2.6rem; height: 2.6rem; padding: 0; border: 0; background: transparent; flex-shrink: 0; }

/* 태그 칩 (Figma 55:5561) — 인풋에 치고 엔터로 추가된 태그.
   ⚠ 시안에는 삭제 UI 가 없지만 목업에서 **직접 추가**되게 만든 이상 지울 방법이 있어야 해서
     최근 검색어 칩(.mk_sh_kw)과 같은 8px X 버튼을 붙였다 (고객요청 2026-07-29) → 03 Q50 */
.mk_cv_tags { display: flex; flex-wrap: wrap; gap: .8rem; }
.mk_cv_tag_del { gap: .8rem; }                  /* 텍스트와 X 사이 8 — .mk_cv_tag 에는 gap 이 없다 */
.mk_cv_tag_del .btn-icon { padding: 0; border: 0; background: transparent; line-height: 0; }
.mk_cv_tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.4rem;
	border-radius: 5rem;
	background: var(--gray-100);
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--gray-500);
}

/* 권리 침해 없음 동의 (Figma 55:5596) — 350x87 gray-100 r10, 체크 24 + 3줄 안내 */
.mk_cv_agree {
	display: flex;
	align-items: center;
	padding: 1.6rem;
	border-radius: 1rem;
	background: var(--gray-100);
}
.mk_cv_agree .checks label { align-items: center; }
.mk_cv_agree .chk_p p {
	font-size: 1.6rem;
	line-height: 1.4;
	color: var(--gray-500);
}
/* 약관·운영정책 (Figma 55:5598) — 밑줄 + Medium + gray-600.
   본문 한가운데 들어가는 인라인 링크라 `.btn`(flex) 을 못 쓴다. 버튼 기본 스타일만 지우고
   글자 스타일은 주변 텍스트를 그대로 따라가게 한다. (R11 대로 href 없는 `<button>`) */
.mk_cv_agree_link {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	line-height: inherit;
	font-weight: 500;
	color: var(--gray-600);
	text-decoration: underline;
	cursor: pointer;
}

/* 안내 문구는 **단어 단위로** 끊는다 — 기본값이면 "수정할 수 있습니 / 다." 처럼 어절 중간에서 잘린다.
   프로젝트 기존 컨벤션과 같은 값(custom.css 135·136 `.num_list`/`.dot_list`, 266 `.btn`, 439 textarea).

   🔴 **부모에만 주면 안 먹는다.** `custom.css` 48~54 의 전역 규칙
      `*, :after, :before { word-break: normal }` 가 **모든 요소에 직접** 값을 박기 때문에
      `word-break` 의 상속이 통하지 않는다. 실제로 `ul` 에만 줬더니 `li` 는 `normal` 이었다.
      → 텍스트가 실제로 놓이는 **자손 요소까지** 셀렉터에 포함시킨다.
      (기존 `.dot_list` 도 같은 이유로 `li` 와 `li *` 를 따로 잡아 뒀다 — custom.css 136·137) */
.mk_cv_agree .chk_p p,
.mk_cv_notes, .mk_cv_notes li, .mk_cv_notes li *,
.mk_cv_form_desc,
.modal-sm .modal-body .fs_14 { word-break: keep-all; }

/* 등록 확인 모달의 주의사항 목록 (Figma 57:9168) — 12px 불릿, 좌측 정렬 */
.mk_cv_notes {
	margin-bottom: 0;                       /* margin 단축형을 쓰면 마크업의 .mt_30 을 덮어써 간격이 죽는다 */
	padding-left: 1.8rem;
	list-style: disc;
	text-align: left;
	font-size: 1.2rem;
	line-height: 1.4;
	color: var(--gray-400);
}
.mk_cv_notes li + li { margin-top: .2rem; }

/* ── B-2-11. 자료 검색 허브 (C 그룹) ───────────────────────────────────────

/* ── SPEC-CAVE-04D 업로드 진행률 ─────────────────────────────────────────── */
.mk_cv_prog {
	display: block;
	margin-top: .6rem;
	height: .4rem;
	border-radius: .2rem;
	background: var(--gray-200);
	overflow: hidden;
}
.mk_cv_prog > i {
	display: block;
	height: 100%;
	border-radius: .2rem;
	background: var(--primary);
	transition: width .2s linear;
}


/* ══════════════════════════════════════════════════════════════════════════
   SPEC-CAVE-07 — 자료 검색 화면 (허브 + 결과)
   목업 design_mockup/css/mockup.css 발췌. **숫자를 여기서 고치지 말 것** —
   목업이 정본이고, 여기서 바꾸면 다음 화면과 어긋난다(08A 와 같은 규칙).
   ⚠ 법적 고지 footer 배경 #F8FAFC 는 기존 토큰에 없는 원시값이다(목업 docs Q44 경고).
   ══════════════════════════════════════════════════════════════════════════ */
/* 태그 칩 (Figma 55:5561) — 인풋에 치고 엔터로 추가된 태그.
   ⚠ 시안에는 삭제 UI 가 없지만 목업에서 **직접 추가**되게 만든 이상 지울 방법이 있어야 해서
     최근 검색어 칩(.mk_sh_kw)과 같은 8px X 버튼을 붙였다 (고객요청 2026-07-29) → 03 Q50 */
.mk_cv_tags { display: flex; flex-wrap: wrap; gap: .8rem; }
/* 내 검색어 블록 (Figma 209:40472) — 아래 섹션까지 20 */
.mk_sh_kwbox { margin-bottom: 2rem; }
/* 내 검색어 행 (Figma 57:9905) — [라벨 + gap13 + 토글] ／ [전체 삭제] 양끝 */
.mk_sh_saverow { display: flex; align-items: center; gap: 1.3rem; }
.mk_sh_saverow .mk_sh_clear { margin-left: auto; padding: 0; }
/* .custom-switch 의 바깥 박스는 2.7rem 인데 실제 트랙(::before)은 2.4rem 이라
   행 높이가 시안(24)보다 3 커진다. 트랙 크기는 그대로 두고 박스만 24 로 맞춘다. */
.mk_sh_saverow .custom-switch { height: 2.4rem; }
/* 최근 검색어 칩 줄 (Figma 57:9910) — 위 행에서 12 아래, 칩 간격 8 */
/* SPEC-QAP-CUS-0922-KWSCROLL — 곽 대표 명세 「최근 검색어 최대 10개까지 좌우 스크롤」.
   줄바꿈해서 아래로 늘어나지 않고 **한 줄 가로 스크롤**이다. 좌우는 마크업의 .mx_n24(풀블리드)를 쓰고
   안쪽 여백은 .mx_n24 와 같은 값(PC 24 / 모바일 20)으로 줘서 첫 칩이 위 라벨과 같은 선에서 시작한다. */
.mk_sh_kws { display: flex; flex-wrap: nowrap; gap: .8rem; margin-top: 1.2rem; padding: 0 2.4rem; }
@media (max-width: 991.98px) { .mk_sh_kws { padding: 0 2rem; } }
.mk_sh_kw { gap: .8rem; flex: 0 0 auto; white-space: nowrap; }
/* .mk_cv_tag 에는 gap 이 없다 — 텍스트와 X 사이 8 */
.mk_sh_kw .btn-icon { padding: 0; border: 0; background: transparent; line-height: 0; }
/* 섹션 (Figma 209:40472) ─────────────────────────────────────────────────────
   🔴 2026-07-29 시안 갱신 — **타이틀 행(지금 뜨는 자료·멘토의 신규 업로드·이달의 인기 자료)이
      전부 숨김**으로 바뀌었다. 구분 띠(8px)도 사라지고 섹션은 캐러셀만 남는다.
      타이틀 레이어 자체는 시안에 남아 있어(hidden) 되살아날 수 있다 → 03 Q44
   🔴 2026-07-29 2차 — 섹션 간격 28 → **8**. 시안(183:24790)의 행 pitch 176 에서
      카드 높이 168 을 뺀 값이다(183:24813 y0 / 183:24826 y176 / 183:24836 y352). */
.mk_sh_sec + .mk_sh_sec { margin-top: .8rem; }
/* 캐러셀 — 첫/끝 여백은 padding 이 아니라 Swiper offset 으로 준다(02 F 참고).
   컨테이너 padding 을 주면 Swiper 가 그 영역을 잘라 카드가 안쪽으로 밀린다. */
.mk_sh_swiper { overflow: hidden; }
.mk_sh_swiper .swiper-wrapper { margin: 0; padding: 0; list-style: none; }
.mk_sh_swiper li { width: 10rem; }
/* ── 자료 카드 100 (Figma 57:9339 "마이케이프 리스트" — 119 에서 축소) ──────────
   썸네일 100 r15 → gap8 → 제목 14 Regular lh1.3 **2줄 말줄임**(h36) → gap4 → 골드행 20
   = 카드 총높이 168 (시안 183:24823 실측: 텍스트블록 y108 / 제목 h36 / 골드행 y40)
   ⚠ 썸네일 radius 는 시안이 12/15 로 혼용돼 있다. 같은 시안의 룩앳미 카드(r15)와
     인스턴스 2·3 을 따라 15 로 통일했다 → 03 Q28 */
/* SPEC-QAP-CUS-0923-HUBTAP — 0923 01:06 곽 대표 지적으로 <span> → <a>(상세 이동).
   링크가 되면서 붙는 기본 색·밑줄을 지운다 — 종전 모양 그대로여야 한다. */
.mk_sh_card {
	display: flex;
	flex-direction: column;
	width: 10rem;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	color: inherit;
	text-decoration: none;
}
.mk_sh_card:hover, .mk_sh_card:focus { color: inherit; text-decoration: none; }
.mk_sh_thumb {
	position: relative;
	display: block;
	width: 10rem;
	height: 10rem;
	border-radius: 1.5rem;
	overflow: hidden;
	background: var(--gray-100);
}
.mk_sh_thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 썸네일 미등록(문서) — 목록 카드(.mk_cv_thumb_doc)와 같은 규칙 → 03 Q52 */
.mk_sh_thumb_doc { display: flex; align-items: center; justify-content: center; }
/* SPEC-QAP-CUS-0923-DOCICON — 0923 09:43 곽 대표 「문서 아이콘 크기를 더 크게 · 빨간 네모 영역 정도」.
   빨간 네모 = 카드 100 안에서 약 70x60 → 46 아이콘을 2배(글리프 48x59 · 확장자 배지 40x21).
   ★ 크기를 바꾸지 않고 확대만 한다 — 아이콘 안 배치(글리프·배지 좌표)가 같은 비율로 따라온다.
     원형 배경은 카드와 같은 gray-100 이라 커져도 보이지 않는다. */
.mk_sh_thumb_doc .mk_cv_file_ic { transform: scale(2); }
/* 썸네일 배지 (Figma 57:9563) — 좌 4 / 상 4, **세로 스택** gap 2 (가로 나열에서 바뀜) */
.mk_sh_tags { position: absolute; left: .4rem; top: .4rem; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.mk_sh_tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.3rem;
	height: 1.2rem;                         /* 배지 높이 12px */
	padding: 0 .4rem;
	border-radius: 2.8rem;
	background: rgba(0, 0, 0, .5);          /* 시안 원시값 — 반투명 오버레이라 토큰 대상 아님 */
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	font-size: .8rem;                       /* 8px */
	font-weight: 500;
	line-height: 1.2rem;
	letter-spacing: -.02em;                 /* Figma -0.2px / 10px */
	color: #fff;
	white-space: nowrap;
}
.mk_sh_tit {                                /* 14 Regular lh1.3, **2줄 말줄임**(h36 고정) */
	margin-top: .8rem;
	height: 3.6rem;                         /* 1.4 × 1.3 × 2줄 = 36.4 → 시안 36 */
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--gray-600);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.mk_sh_gold { display: flex; align-items: center; gap: .2rem; margin-top: .4rem; }
.mk_sh_gold img { width: 2rem; height: 2rem; flex-shrink: 0; }
.mk_sh_gold span { font-size: 1.4rem; font-weight: 600; color: var(--gray-600); }
/* 법적 고지 footer (Figma 242:75644) — 하단 고정 앱테크 배너를 **대체**한다.
   fixed 가 아니라 컨텐츠 맨 끝에 붙는 블록이라 `.container` 밖(=폭 390)에 둔다.
   bg #F8FAFC 는 기존 토큰에 없는 시안 원시값이다 → 03 Q44 */
.mk_sh_footer { margin-top: 2rem; padding: 2rem 2rem 6rem; background: #F8FAFC; }
/* 화면이 남을 때 흰 여백이 보이지 않게 **footer 가 남은 높이를 먹는다** (고객요청 2026-07-29).
   `.wrap` 은 이미 min-height:100dvh(custom.css 1399) 라 여기서는 그걸 flex 로 흘려보내기만 하면 된다.
   ⚠ fixed 가 아니라 flex-grow 다 — fixed 로 하면 키보드가 뜰 때 그 위로 따라 올라온다.
   ⚠ `.sub_pg` 기본 padding-bottom 5rem(custom.css 74)은 footer 아래에 흰 띠로 남으므로 0 으로. */
.wrap.mk_sh_page { display: flex; flex-direction: column; }
.wrap.mk_sh_page > .sub_pg { flex: 1 1 auto; display: flex; flex-direction: column; padding-bottom: 0; }
.wrap.mk_sh_page .mk_sh_footer { flex: 1 1 auto; }
.mk_sh_legal { display: flex; flex-direction: column; gap: .4rem; color: var(--gray-400); font-size: 1.3rem; }
.mk_sh_legal .tit { margin: 0; font-weight: 800; line-height: normal; }
.mk_sh_legal .txt { margin: 0; font-weight: 400; line-height: 1.4; }
/* ── C-1-2. 자료 검색 결과 카드 (Figma 57:10422 / 96:25655) ──────────────────
   내 케이브 카드(.mk_cv_item)와 동일하되 **작성자 행(Lv 배지 + 이름)** 하나가 더 붙는다.
   그래서 카드 골격(.mk_cv_item/thumb/body/head/titwrap/tit/fo/more/gold)은 그대로 재사용하고
   여기서는 **추가되는 것**만 만든다 — R2. 값은 전부 boot_custom.css 토큰이라 Figma 와 1:1.
   · 본문 세로 gap 은 head↔meta 12(=.mk_cv_body), 골드행↔작성자행 9(=.mk_sr_meta). */
.mk_sr_item { align-items: flex-start; }
/* 본문이 3줄이라 썸네일을 위로 정렬 (Figma items-start) */
.mk_sr_meta { display: flex; flex-direction: column; gap: .9rem; }
.mk_sr_author { display: flex; align-items: center; gap: .6rem; min-width: 0; }
/* Lv 배지 pill — SPEC-QAP-CUS-0923-CAVELV(0923 01:10·01:37 곽 대표)로 **프로필 `.level_badge` 와 같은 색**이 됐다.
   프로필 실측: bg #ECF3FF · 1px solid var(--primary) · pill · 글씨 var(--primary) 500 · ⚡ level_badge.png.
   ★크기(padding·글씨 1.2rem·아이콘 1.4rem)는 종전 시안값을 유지한다 — 상세 작성자 줄이 그 높이로 짜여 있다. */
.mk_sr_lv {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	padding: .5rem .6rem;
	border: 1px solid var(--primary);
	border-radius: 3rem;
	background: #ECF3FF;
}
.mk_sr_lv img { width: 1.4rem; height: 1.4rem; }
.mk_sr_lv span {
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1;
	color: var(--primary);
	white-space: nowrap;
}
.mk_sr_name {                                     /* 작성자·닉네임 13 Regular #38404B */
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--gray-500);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.mk_sr_report img { width: 1.44rem; height: 1.52rem; }
/* 신고 아이콘 = Figma 14 (20 박스 안 실제 크기) */

/* 결과 화면 상단이동 (Figma 57:10633 Group 8800) — 화면 하단 **중앙**.
   내 케이브 FAB(.mk_float)는 우측이지만 결과 화면은 시안이 가운데다.
   PC 에서도 모바일 영역 중앙에 오도록 .bt_menu 방식(left/right 0 + margin auto + max-width). */
.mk_sr_float {
	position: fixed;
	left: 0; right: 0;
	bottom: 2rem;
	margin: 0 auto;
	width: 100%;
	max-width: var(--body_width);
	display: flex;
	justify-content: center;
	pointer-events: none;
	z-index: 20;
}
.mk_sr_float .mk_gotop { pointer-events: auto; }
/* Lv 배지 — 검색 결과 카드의 `.mk_sr_lv` 를 그대로 쓰되(R2) 상세 시안은 **83.3% 축소본**이라
   크기만 덮어쓴다 (px5 py4.167 / r25 / ⚡11.667 + 10 Medium). 색·굵기는 그대로. */
.mk_dt_lv { padding: .4167rem .5rem; border-radius: 2.5rem; }
/* 🔴 파일정보 + CTA 를 **하단 고정**으로 묶은 블록 (고객요청 2026-07-29)
   `.bottom_btn`(design.css 8)을 그대로 쓰되, `.container` 밖에 두므로
   `.container` padding 상쇄용 좌우 -2.4rem(모바일 -2.0rem)을 되돌린다.
   → `.mk_sh_banner_wrap` 과 같은 방식(fixed + left 미지정 + max-width:body_width). */
.bottom_btn.mk_dt_bottom { margin-left: 0; margin-right: 0; }
/* 최근 검색어 칩 = 링크 (클릭 시 그 검색어 결과로) */
.mk_sh_kw_link { color: inherit; text-decoration: none; }
.mk_sh_kw_link:hover { color: inherit; text-decoration: none; }
/* ============================================================================
   SPEC-CAVE-ENTRY-01 — 친구탭 케이브 진입점 2곳
     헤더 칩 `18:10148` · 본문 검색 인풋 `18:5059`(2026-07-29 시안 변경분)
     원본은 목업 `css/mockup.css` B-1-0 / B-1-A / B-1-B / C 진입 블록이다. 숫자는 그대로 옮겼다.

   ★ 이 블록은 **친구탭이 게이트를 통과했을 때만** 마크업이 나오므로,
     클래스가 없는 화면에는 아무 영향이 없다. `.wrap`·`.hd_m` 같은 공용 선택자를
     맨몸으로 덮어쓰지 않고 전부 `.cave_entry_on` 아래에 둔 이유다 —
     게이트가 닫힌 사용자의 친구탭이 같이 흰색이 되면 안 된다(F1).
   ========================================================================== */

/* ── E-1. 케이브 아이콘 (로티 + 흰 선 오버레이) — 목업 B-1-A ────────────────
   main.json 은 그라데이션 육각형만 담고 있어 흰 선(mk_icon_cave_lines.svg)을 위에 얹는다.
   헤더 칩 20 / 본문 인풋 30. (FAB 56 은 위 B-2-6 이 이미 쓰고 있다) */
.mk_cave_ico {
	position: relative;
	display: block;
	flex-shrink: 0;
	width: 3.6rem;
	height: 3.6rem;
}
.mk_cave_ico_sm { width: 2rem; height: 2rem; }
.mk_cave_ico_md { width: 3rem; height: 3rem; }   /* [시안 변경 2026-07-29] 24 → 30 */
.mk_cave_ico lottie-player {
	display: block;
	width: 100%;
	height: 100%;
}
/* SPEC-CAVE-ENTRY-04 — 로티 대신 **그 로티의 첫 프레임 PNG**를 쓰는 자리(대화방 헤더).
   대화방은 가장 자주 여는 화면이라 lottie-player(367KB)를 얹지 않는다. 그림은 같은 원본이다.
   ★ `.mk_cave_ico_line`(흰 선 오버레이)은 제외한다 — 그건 40% 크기로 위에 얹히는 것이다. */
.mk_cave_ico > img:not(.mk_cave_ico_line) {
	display: block;
	width: 100%;
	height: 100%;
}
.mk_cave_ico_line {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 40%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* ── E-2. 헤더 「마이케이브」 칩 (Figma 18:10148 "상단 자료검색") ────────────
   구체성 주의: design.css 의 `.hd_m button{background:transparent}`(0,1,1) 가
   `.mk_chip_cave`(0,1,0) 를 이기므로 `.hd_m .mk_chip_cave`(0,2,1) 로 올린다. */
.hd_m .mk_chip_cave {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1rem .6rem .7rem;
	border: 0;
	border-radius: 999px;
	background: #F6F6F8;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.hd_m .mk_chip_cave span {
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1;
	color: var(--gray-500);
	white-space: nowrap;
}

/* ── E-3. 헤더 흰 반투명 (Figma 18:5077) — 사용자 결정 2026-08-08 (D2) ───────
   실서비스 친구탭 헤더는 `bg-gray-100`(#F6F6F8)이고 칩 배경도 #F6F6F8 이라
   **칩이 헤더에 그대로 묻힌다**(실측). 시안대로 헤더를 흰 반투명으로 바꿔 칩을 띄운다.
   ⚠ 로고 교체·룩앗미(hot) 아이콘은 이 SPEC 범위가 아니다 — 배경만 시안에 맞춘다. */
/* SPEC-QAP-CUS-0922-FRIENDTOP — 곽 대표 0922 시안(S1 을 고친 것): 헤더부터 검색창까지 한 덩어리 파랑 #3A86FF.
   흰 반투명(0808 D2)은 이 시안으로 대체된다. */
.hd_m.cave_entry_hd {
	background: #3A86FF;
	border-bottom: 0;
}
.hd_m.cave_entry_hd .hd_btn { gap: 2rem; }

/* ── E-4. 상단 흰 블록 (Figma 18:4257) — 목업 B-1-B ──────────────────────────
   헤더가 반투명이라 뒤가 비친다. `.wrap` 은 `padding-top: var(--hd_height_m)` 로
   헤더 자리를 비워 두는데 그 자리가 회색이라 헤더 아래에 회색 띠가 남는다.
   흰 블록을 헤더 뒤까지 끌어올려야 시안처럼 헤더~컨텐츠가 하나의 흰 영역이 된다. */
.cave_entry_on.wrap { background: #fff; }
/* html{background-color:#f5f5f5}(페이지 전환 깜빡임 방지)가 .wrap 뒤로 비쳐 나오므로
   이 화면에서만 덮는다 — 목업 `.idx_pg{background:#fff}` 와 같은 처리다. */
.cave_entry_on .idx_pg { background: #fff; }
.cave_entry_top {
	margin-top: calc(var(--hd_height_m) * -1);              /* 헤더 자리까지 끌어올림 */
	/* SPEC-QAP-CUS-0922-FRIENDTOP — 헤더 아래 10 → 카드, 검색창 아래 12 에서 파랑이 끝나고 아래 모서리가 둥글다(S1 r≈15) */
	/* 0922 시안 재실측: 헤더 아래 → 카드 10, 검색창 아래 → 파랑 끝 15. .idx_pg pt_6(6px)만큼 덜 준다 */
	padding-top: calc(var(--hd_height_m) + .4rem);
	padding-bottom: 1.5rem;
	background: #3A86FF;
	border-radius: 0 0 1.5rem 1.5rem;
}

/* ── E-5. 본문 「케이브 자료 검색」 인풋 (Figma 18:5059) ─────────────────────
   [시안 변경 2026-07-29] 2행 배너(제목+설명+chevron) → **검색 인풋 1행**으로 교체.
   [ASSUME 목업] 갱신 메인 시안(209:45222)을 MCP 로 못 읽어 첨부 캡처 실측값이다 —
                 높이 48 / 아이콘 30 / 좌우 padding 12 / placeholder 15. → 고객 검수 대상 */
.mk_cave_sch {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	width: 100%;
	height: 4.8rem;
	margin-top: 1.6rem;
	padding: 0 1.2rem;
	border-radius: 999px;                   /* [시안 변경 2026-07-29] 12 → 999 (알약) */
	background: var(--primary-100);
}
/* 인풋은 배경·테두리 없이 칩 안에 얹는다. readonly 라도 커서는 text 가 아니라
   pointer 여야 "누르면 넘어간다"가 읽힌다. */
.mk_cave_sch_ip {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--gray-600);
	cursor: pointer;
}
.mk_cave_sch_ip::placeholder { color: var(--gray-400); opacity: 1; }
.mk_cave_sch_ip:focus { outline: 0; box-shadow: none; }
/* type=search 의 크롬 기본 X 버튼 제거 — readonly 라 뜰 일은 없지만 방어적으로 */
.mk_cave_sch_ip::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ── E-6. 자료 검색 헤더 (Figma 138:71717) — SPEC-CAVE-ENTRY-02 ──────────────
   ← 24 / 검색 인풋 / (홈 아이콘 없음 — 목업 docs Q48 확정)
   기존 .hd_m 은 padding 0 2.4rem 인데 시안은 20px 이라 여기서만 덮어쓴다. */
.hd_m.mk_hd_cave {
	padding: 0 2rem;
	background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	border-bottom: 1px solid var(--gray-100);
}
.hd_m.mk_hd_cave_sch { gap: .8rem; }
.mk_sch_cave.sch_ip {
	height: 4.2rem;
	padding: 0 1.6rem;
	border-radius: .8rem;                   /* [ASSUME 목업] Figma 에 radius 값이 없어 프로젝트 기본 .8rem → 03 Q15 */
	background: var(--gray-100);
}
.mk_sch_cave .form-control {
	height: 4.0rem;
	padding: 0;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--gray-600);
}
/* 18 원형 #989FAA + 흰 X 6px
   ⚠ 구체성 주의 — design.css 의 `.hd_m .sch_ip button{width:3.0rem}`(0,2,1) 이
     `.mk_sch_cave .mk_sch_del`(0,2,0) 을 이겨 **X 가 가로로 늘어나 찌그러진다.**
     `.hd_m` 를 앞에 붙여 (0,3,0) 으로 올린다. */
.hd_m .mk_sch_cave .mk_sch_del {
	flex-shrink: 0;
	width: 1.8rem;
	height: 1.8rem;
	min-width: 1.8rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gray-400);
	position: relative;
}
.mk_sch_cave .mk_sch_del::before,
.mk_sch_cave .mk_sch_del::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: .8rem;
	height: .12rem;
	background: #fff;
	border-radius: .1rem;
}
.mk_sch_cave .mk_sch_del::before { transform: translate(-50%, -50%) rotate(45deg); }
.mk_sch_cave .mk_sch_del::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ============================================================================
   SPEC-CAVE-08C — 자료 상세 (1차)
   목업 css/mockup.css D-1-1 발췌. 숫자는 그대로 옮겼다.
   ★ 워터마크 배경 이미지는 **화면에서 인라인으로 덮어쓴다** —
     G5 가 "닉네임·펀코드 동적 삽입"이라 사람마다 문구가 다르다. 정적 파일로는 안 된다.
   ========================================================================== */
.mk_dt_page { padding-top: 0; padding-bottom: 10rem; }   /* 하단 고정 버튼 자리 */

.mk_dt_media { background: var(--gray-100); padding: 2rem 0; display: flex; flex-direction: column; gap: 1.6rem; }
/* 썸네일 가로 스크롤 (Figma 79:9581 — 160x240 r8, gap10, 좌우 20) */
.mk_dt_thumbs { display: flex; gap: 1rem; padding: 0 2rem; overflow-x: auto; }
.mk_dt_thumb { position: relative; flex: 0 0 auto; width: 16rem; height: 24rem; border-radius: .8rem; overflow: hidden; background: var(--gray-200); }
.mk_dt_thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 워터마크 (Figma 96:26713 — 닉네임·PW…, 45°, #D0D4DA 40%)
   ⚡ DOM 수백 개(span) 대신 **CSS 배경 패턴** — 성능 + 전체 덮힘.
      220% 오버사이즈 + 45° 회전이라 모서리에 빈틈이 없다.
   ★ `background-image` 는 cave_detail.php 가 인라인으로 넣는다(사람마다 다른 문구). */
.mk_dt_wm { position: absolute; inset: 0; overflow: hidden; opacity: .4; pointer-events: none; }
.mk_dt_wm::before {
	content: ''; position: absolute; top: -60%; left: -60%;
	width: 220%; height: 220%; background-repeat: repeat; transform: rotate(45deg);
}

/* 안내 박스 (Figma 79:10465 — bg gray200 r10 p12) */
.mk_dt_notice_wrap { padding: 0 2rem; }
.mk_dt_notice { display: flex; align-items: center; gap: .6rem; padding: 1.2rem; border-radius: 1rem; background: var(--gray-200); }
.mk_dt_notice img { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }
.mk_dt_notice p { margin: 0; font-size: 1.3rem; line-height: 1.2; color: var(--gray-500); }
/* 파일정보 블록 **안**의 안내는 배경이 gray-100 이라 구분한다 (Figma 209:39867).
   ★ SPEC-CAVE-16 — `.mk_dt_file_rows` 가 gap 1.2rem 을 이미 갖고 있어 margin-top 을 빼야 두 배가 안 된다. */
.mk_dt_notice.in_file { background: var(--gray-100); align-items: flex-start; }

/* ── SPEC-CAVE-16 · 정보 블록을 목업대로 (mockup.css 1383~1412 블록 그대로) ──
   ★ 08C 가 옮길 때 작성자행이 **1줄**이었고 통계행·아바타·등록일시가 통째로 빠져 있었다.
     숫자·구조를 여기서 다시 만들지 말 것 — 목업이 정본이다. */
/* 정보 블록 (Figma 87:12269 — px20 gap16). 좌우 패딩은 .container 가 담당 */
.mk_dt_info { display: flex; flex-direction: column; gap: 1.6rem; padding: 2rem 0; }
/* 팔로워 전용 표시는 **제목 위**다(Figma). 자료 속성이라 구매·팔로우 여부와 무관하게 유지한다(03 Q55) */
.mk_dt_fomark { margin: 0 0 .8rem; font-size: 1.2rem; font-weight: 700; color: var(--primary); text-align: left; }
.mk_dt_tit { margin: 0; font-size: 1.6rem; font-weight: 600; line-height: 1.3; color: var(--gray-600); }
.mk_dt_meta { display: flex; flex-direction: column; gap: 1rem; }
.mk_dt_author { display: flex; align-items: center; justify-content: space-between; min-height: 3.6rem; }
.mk_dt_author_l { display: flex; align-items: flex-start; gap: .8rem; min-width: 0; }   /* 2줄이 되면서 아바타는 위 정렬 (Figma items-start) */
.mk_dt_avatar { width: 3rem; height: 3rem; border-radius: 2.3rem; object-fit: cover; flex-shrink: 0; }
a.mk_dt_author_l, a.mk_dt_author_l:hover { text-decoration: none; }
/* 작성자 정보 2줄 (Figma 209:39529 / I209:39534;79:9714 — column gap4)
   1줄 이름+일시(gap6) / 2줄 Lv 배지+아이디(gap4). 고객요청 2026-07-29 */
.mk_dt_author_t { display: flex; flex-direction: column; justify-content: center; gap: .4rem; min-width: 0; }
.mk_dt_author_r { display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.mk_dt_author_r2 { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.mk_dt_author_name { font-size: 1.4rem; font-weight: 600; color: var(--gray-600); line-height: 1.2; }
.mk_dt_author_date { font-size: 1.2rem; color: var(--gray-400); line-height: 1.2; }
/* Lv 배지 — 검색 결과 카드의 `.mk_sr_lv` 를 그대로 쓰되(R2) 상세 시안은 **83.3% 축소본**이라
   크기만 덮어쓴다 (px5 py4.167 / r25 / ⚡11.667 + 10 Medium). 색·굵기는 그대로. */
.mk_dt_lv { padding: .4167rem .5rem; border-radius: 2.5rem; }
.mk_dt_lv img { width: 1.1667rem; height: 1.1667rem; }
.mk_dt_lv span { font-size: 1rem; }
/* 통계 행 (목업 :210) — 다운로드수 · 조회수 */
.mk_dt_stat { display: flex; gap: 1.2rem; font-size: 1.2rem; color: var(--gray-400); }

.mk_dt_tags { display: flex; flex-wrap: wrap; gap: .8rem; }
.mk_dt_tag { display: inline-flex; align-items: center; padding: 1rem 1.4rem; border-radius: 5rem; background: var(--gray-100); font-size: 1.3rem; font-weight: 500; color: var(--gray-500); text-decoration: none; }
.mk_dt_tag:hover { color: var(--gray-500); text-decoration: none; }
.mk_dt_desc { margin: 0; font-size: 1.5rem; line-height: 1.6; color: var(--gray-600); word-break: keep-all; }

/* ── SPEC-CAVE-07B · 검색어 자동완성 ──
   ★ 시안 없음 — 실서비스 검색(`search.php`)의 자동완성 마크업을 그대로 옮겼다.
     행 자체는 부트스트랩 유틸(`border-bottom`·`py-3`·`d-flex`)로 서고, 강조는 `.text-primary` 다.
     여기서 새로 꾸미지 않는다 — 꾸미면 실서비스 검색과 모양이 갈린다. */
.mk_sh_suggest { padding-bottom: 5rem; }
.mk_sh_sg .btn2 { background: transparent; border: 0; }
.mk_sh_sg p { margin: 0; font-size: 1.4rem; color: var(--gray-600); }

/* ── SPEC-CAVE-08G · 문서 상세 (Figma 109:18133) — 대표이미지 + 파일목록 ──
   목업 mockup.css 1571~1584 블록 그대로. **숫자를 여기서 고치지 말 것.**
   ★ width 를 주면 mx_n24(음수마진)로 오른쪽이 안 펴진다 → width 없이 둔다(목업 주석).
   ★ 파일 아이콘은 `.mk_cv_file_ic`(등록 화면·목록 썸네일과 **같은 컴포넌트**)를 쓴다.
     이 파일 335~384 에 이미 있고 확장자 10종 색도 거기 정의돼 있다 — 여기서 새로 만들지 않는다
     (예전 `mk_ic_file_pdf/hwp.svg` 는 글리프 크기가 어긋나 폐기됐다 · 고객지적 2026-07-29). */
.mk_dt_rep { height: 21rem; background: var(--gray-100); }
.mk_dt_rep img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk_dt_bar8 { height: .8rem; background: var(--gray-100); }
.mk_dt_files { display: flex; flex-direction: column; gap: 1.6rem; padding: 2rem 0; }
.mk_dt_files_tit { font-size: 1.8rem; font-weight: 600; color: var(--gray-600); letter-spacing: -.036rem; }
.mk_dt_file_row { display: flex; align-items: center; gap: 1.6rem; }
.mk_dt_file_nm { flex: 1; min-width: 0; font-size: 1.4rem; font-weight: 500; color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk_dt_file_sz { flex-shrink: 0; font-size: 1.2rem; color: var(--gray-400); }

/* ── SPEC-CAVE-16 · 파일정보 + CTA 하단 고정 (mockup.css 1414~1428 블록 그대로) ──
   목업은 둘을 `.bottom_btn` **한 블록**에 넣는다(03 Q49 확정 · 고객요청 2026-07-29).
   08C 는 파일정보를 본문 안 회색 라운드 박스(`.mk_dt_file_box`)로 두고 CTA 만 띄워 구조가 달랐다.
   ★ `.bottom_btn`(design.css 8)이 이미 좌우 -2.4rem 이므로 여기서 되돌린다.
   ⚠ 블록 높이가 상태마다 달라 본문 아래 여백은 JS(`dt_fitBottom`)가 실측해 채운다. */
/* 파일정보 (Figma 93:13381 — bg white, 상단선, px20 py16) */
.mk_dt_file { display: flex; flex-direction: column; gap: 1.2rem; padding: 1.6rem 2rem; background: #fff; border-top: 1px solid var(--gray-200); }
.bottom_btn.mk_dt_bottom { margin-left: 0; margin-right: 0; }
.mk_dt_bottom .mk_dt_file { padding-bottom: 0; }                    /* 아래 간격은 .btn_wrap 이 갖는다 */
.mk_dt_bottom .btn_wrap { padding: 1.2rem 2rem 1.6rem; }            /* 파일정보↔버튼 12 · 바닥 16 */
.mk_dt_bottom .mk_dt_file:last-child { padding-bottom: 1.6rem; }    /* 버튼이 없는 상태(내 자료) */
.mk_dt_file_tit { font-size: 1.8rem; font-weight: 600; color: var(--gray-600); letter-spacing: -.036rem; }
.mk_dt_file_rows { display: flex; flex-direction: column; gap: 1.2rem; }
.mk_dt_row { display: flex; align-items: center; justify-content: space-between; font-size: 1.5rem; }
.mk_dt_row_k { font-weight: 400; color: var(--gray-500); }
.mk_dt_row_v { font-weight: 600; color: var(--gray-600); text-align: right; }
/* 다운로드 버튼 안 골드 배지 */
.mk_dt_dl { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
.mk_dt_dl_gold { display: inline-flex; align-items: center; gap: .3rem; }
.mk_dt_dl_gold img { width: 1.6rem; height: 1.6rem; }
.mk_dt_dl:disabled { opacity: 1; background: var(--gray-300); border-color: var(--gray-300); }

/* ============================================================================
   SPEC-CAVE-08F — 자료 상세 다운로드 확인(S4) · 골드 부족(S5) 모달
   목업 css/mockup.css 발췌 **전체**. 처음에 클래스명이 든 줄만 골라 넣었더니
   여러 줄에 걸친 규칙과 자식 선택자가 빠져 안내 박스·법적고지·기간·충전 버튼이 밋밋했다(0808 실측).
   ========================================================================== */
.mk_dt_gold_have { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1.6rem; padding: 1.2rem 1.6rem; border-radius: 1rem; background: var(--gray-100); }
.mk_dt_gold_have .k { font-size: 1.4rem; color: var(--gray-500); }
.mk_dt_gold_have .rgt { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
.mk_dt_gold_have .v { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.5rem; font-weight: 600; color: var(--gray-600); }
.mk_dt_gold_have .v img { width: 1.6rem; height: 1.6rem; }

.mk_dt_m_head { display: block; padding: 3.2rem 1.6rem 0; border-bottom: 0; }
.mk_dt_m_head .modal-title { font-size: 2rem; font-weight: 600; line-height: normal; color: var(--gray-600); text-align: center; }
.mk_dt_modal .modal-body { padding: 3rem 1.6rem 0; }              /* 제목 아래 30 */
.mk_dt_modal .modal-footer { padding: 3.2rem 1.6rem 3.2rem; border-top: 0; }   /* 본문↔버튼 32 · 바닥 32 */

.mk_dt_m_subject { font-size: 1.4rem; font-weight: 700; line-height: 1.4; color: var(--gray-500); text-align: center;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk_dt_m_buy { margin-top: 0; font-size: 1.4rem; line-height: 1.4; color: var(--gray-500); text-align: center; }
.mk_dt_m_notice { display: flex; align-items: center; gap: .6rem; margin-top: 1.2rem; padding: 1.2rem; border-radius: 1rem; background: var(--gray-100); }
.mk_dt_m_notice img { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }
.mk_dt_m_notice p { margin: 0; font-size: 1.3rem; line-height: 1.2; color: var(--gray-500); text-align: left; }
.mk_dt_m_disc { margin: 1.2rem 0 0; font-size: 1.2rem; line-height: 1.4; color: var(--gray-400); text-align: left; }
.mk_dt_m_period { margin-top: 1.2rem; padding: 1.2rem 1.6rem; border-radius: .8rem; background: var(--primary-100); text-align: center; }
.mk_dt_m_period .k { font-size: 1.4rem; line-height: 1.4; color: var(--gray-500); }
.mk_dt_m_period .v { margin-top: .2rem; font-size: 1.4rem; font-weight: 600; line-height: 1.4; color: var(--gray-600); }

/* 충전하기 — 시안은 **배경 없이 테두리만**(고객지적 2026-07-29). r20 px12 py6 / 12 Regular */
.mk_dt_charge { flex-shrink: 0; padding: .6rem 1.2rem; border: 1px solid var(--gray-200); border-radius: 2rem; background: transparent; font-size: 1.2rem; font-weight: 400; line-height: 2rem; color: var(--gray-500); }
/* 다운로드 모달의 보유 골드 행만 시안(209:40030) 값으로 — r8 px16 py12 / 라벨·수량 16 */
.mk_dt_modal .mk_dt_gold_have { margin-top: 1.2rem; padding: 1.2rem 1.6rem; border-radius: .8rem; }
.mk_dt_modal .mk_dt_gold_have .k { font-size: 1.6rem; line-height: 1.4; }
.mk_dt_modal .mk_dt_gold_have .v { font-size: 1.6rem; line-height: 1.4; }

/* ============================================================================
   SPEC-CAVE-13 — 자료 상세 팔로우 버튼 (목업 css/mockup.css 1404~1407 그대로)
   ★ 블록 전체를 옮긴다 — 클래스명 든 줄만 뽑으면 `.on` 변형과 아이콘 반전이 빠진다(08F 교훈).
   ========================================================================== */
/* SPEC-QAP-CUS-0923-FOLLOWSWAP — 0923 01:08 곽 대표 「[팔로우] [팔로잉] 버튼도 색상 서로 바꿔주세요」.
   **아직 팔로우 안 한 상태(=버튼 「팔로우」)가 진한 블루**, 팔로우 중(`.on`, 「팔로잉」)이 흰 배경이다.
   ★`.on` 이 붙는 조건(= 팔로잉)은 그대로 두고 색만 맞바꿨다 — 클래스 의미를 뒤집으면 JS 토글·서버 판정까지 얽힌다. */
.mk_dt_follow { display: inline-flex; align-items: center; gap: .8rem; padding: .8rem 1.2rem; border: 1px solid var(--primary); border-radius: .8rem; background: var(--primary); font-size: 1.4rem; font-weight: 500; color: #fff; flex-shrink: 0; }
.mk_dt_follow img { width: 1.8rem; height: 1.8rem; filter: brightness(0) invert(1); }                 /* 팔로우 = 아이콘 흰색 */
.mk_dt_follow.on { background: #fff; border-color: var(--gray-200); color: var(--gray-600); }         /* 팔로잉 = 흰 배경 */
.mk_dt_follow.on img { filter: none; }

/* ── SPEC-CAVE-08C2-WEBPLAY — 웹 480P 워터마크 재생 (2026-08-20 확정: "Figma대로") ──
   183:23623(인라인) · 183:25547(크게 보기). 컨트롤은 Figma 커스텀 — 하단 진행바·시간·480P 배지.
   워터마크(.mk_dt_wm)는 영상 위 상시(pointer-events:none — G5, 조작 방해 없음). */
.mk_dt_player { position: relative; background: #000; }
.mk_dt_player video { display: block; width: 100%; max-height: 42rem; margin: 0 auto; background: #000; }
/* 우상단 확대(⤢) — Figma 우상단 24px 아이콘 */
.cvp_expand { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 3; width: 3.2rem; height: 3.2rem;
    border: 0; border-radius: .6rem; background: rgba(0,0,0,.45) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3l-7 7"/><path d="M3 21l7-7"/></svg>') center no-repeat; }
/* 하단 컨트롤 줄 — 재생(▶/⏸) · 시간 · 480P · 진행바 */
.cvp_ctrl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center;
    gap: .8rem; padding: .8rem 1.2rem 1rem; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.cvp_play { flex-shrink: 0; width: 2.4rem; height: 2.4rem; border: 0; background: transparent center no-repeat;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>'); }
.cvp_play.on { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>'); }
.cvp_time { flex-shrink: 0; font-size: 1.2rem; line-height: 1; color: #fff; }
.cvp_time em { font-style: normal; color: rgba(255,255,255,.7); }
.cvp_q { flex-shrink: 0; margin-left: auto; padding: .3rem .8rem; border-radius: 2rem; background: rgba(0,0,0,.55);
    font-size: 1.1rem; font-weight: 600; line-height: 1; color: #fff; }
.cvp_bar { position: absolute; left: 1.2rem; right: 1.2rem; bottom: .4rem; height: .3rem; border-radius: .3rem;
    background: rgba(255,255,255,.3); cursor: pointer; }
.cvp_bar_in { width: 0; height: 100%; border-radius: .3rem; background: #fff; }
/* SPEC-GODOHWA-1010-CAVEWEBSEEK — 룩앳미 재생바(design.css .video_control .play_bar)와 같은 값: 빨간 진행 #FF2D2D · 손잡이 1.2rem · 끄는 동안 .6rem · 위로 넓힌 누름 영역 */
.cvp_bar.mk_seek { touch-action: none; }
.cvp_bar.mk_seek::before { content: ''; position: absolute; left: 0; right: 0; top: -1.4rem; bottom: -.4rem; }
.cvp_bar.mk_seek .cvp_bar_in { position: relative; border-radius: 0; background: #FF2D2D; }
.cvp_bar.mk_seek .cvp_bar_in::after { content: ''; position: absolute; right: -.6rem; top: 50%; transform: translateY(-50%);
    width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #FF2D2D; box-shadow: 0 0 3px rgba(0,0,0,.5); }
.cvp_bar.mk_seek.seeking { height: .6rem; }
/* 크게 보기 — 전체화면 검정(183:25547): 좌상단 × · 세로 중앙 영상 · 하단 제목/태그 */
.cvp_full { position: fixed; inset: 0; z-index: 1050; display: none; background: #000; }
.cvp_full.on { display: flex; flex-direction: column; }
.cvp_full_x { position: absolute; top: max(1.6rem, env(safe-area-inset-top)); left: 1.6rem; z-index: 4; width: 3.2rem; height: 3.2rem;
    border: 0; background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>') center no-repeat; }
.cvp_full_stage { position: relative; flex: 1; display: flex; align-items: center; min-height: 0; }
.cvp_full_stage video { max-height: 100%; }
.cvp_full_stage .cvp_ctrl { bottom: 0; }
.cvp_full_meta { flex-shrink: 0; padding: 1.2rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom)); }
.cvp_full_tit { font-size: 1.5rem; font-weight: 600; line-height: 1.4; color: #fff; }
.cvp_full_tags { margin-top: .4rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.cvp_full_tags span { font-size: 1.3rem; color: rgba(255,255,255,.8); }

/* ── SPEC-CAVE-08H-IMGZOOM — 이미지 확대 뷰어 (목업 mockup.css:1505~ 그대로) ──
   채팅 뷰어(.modal_full.full_photo) 재사용 + 변형: X 좌측 / n / N 카운터 중앙 / 좌우 화살표. */
.mk_dt_thumb.mk_dt_clickable { cursor: pointer; }
.mk_dt_zoom .modal-header { display: flex; align-items: center; background: transparent; }
.mk_dt_zoom_count { flex: 1; text-align: center; color: #fff; font-size: 1.8rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mk_dt_zoom .modal-body { height: 100dvh; padding: 0; overflow: hidden; }
.mk_dt_zoom_swiper { width: 100%; height: 100%; }
.mk_dt_zoom_swiper .swiper-slide { position: relative; display: flex; align-items: center; justify-content: center; }
.mk_dt_zoom_swiper .swiper-slide img { max-width: 100%; max-height: 100%; }
.mk_dt_zoom .modal-header .hd_btn button { width: 4.4rem !important; height: 4.4rem; padding: 0; border-radius: 50%;
    background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.mk_dt_zoom .modal-header .hd_btn button img { width: 2rem !important; height: 2rem; }
.mk_dt_zoom_nav { position: fixed; top: 50%; transform: translateY(-50%); width: 4.4rem; height: 4.4rem; border: 0;
    border-radius: 50%; background: rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; z-index: 3; }
.mk_dt_zoom_nav img { width: 2.8rem; height: 2.8rem; }
.mk_dt_zoom_nav.prev { left: 1.2rem; }
.mk_dt_zoom_nav.next { right: 1.2rem; }

/* ============================================================================
   SPEC-CAVE-ENTRY-0909-HOTSHORTS — 친구탭 「인기 상승 룩앳미」 (게이트 ON 전용)
     시안 183:48565 실측: 헤더 hot 아이콘 · 카드 95×139.7(≈2:3) · 카드 간격 10 · 좌하단 「▶ m:ss」
     ★게이트 OFF 면 이 마크업이 아예 안 나온다(index.php PHP 분기) — 기존 화면은 이 파일과 무관하다.
   ========================================================================== */

/* 헤더 hot 룩앳미 — 자산에 hot 배지가 28 프레임 밖으로 나와 실제 37.33×31.5 다.
   2.8rem 으로 눌러 담으면 배지가 잘린다. 다른 헤더 버튼(.icon28)과 세로 가운데를 맞춘다. */
.hd_m .mk_ico_hot_look { padding: 0; border: 0; background: none; display: flex; align-items: center;
    justify-content: center; width: 3.733rem; height: 3.15rem; }
.hd_m .mk_ico_hot_look img { width: 3.733rem; height: 3.15rem; object-fit: contain; }

/* 카드 좌여백 — 기존 .popular_swiper 는 px_8(8px)이라 제목(24)과 어긋나고 앱(24)과도 달랐다.
   새 영역은 제목·앱과 같은 24 로 맞춘다. 시안은 20 인데, 24 는 웹·앱 공통 컨테이너 값이라
   이 영역만 20 으로 바꾸면 화면 전체에서 이 줄만 튄다. 차이는 SPEC 카드에 적어 둔다. */
/* SPEC-QAP-CUS-0922-FRIENDTOP — 곽 대표 0922 「좌측 여백 최소화 · 따닥따닥」: S1 실측 좌 7 · 카드 100×144 · 간격 3(JS spaceBetween)
   모서리: S1 은 0 이었으나 0922 사용자 지시 「둥근 모서리로」 → 종전(0909 HOTSHORTS) 값 .8rem */
.hot_look_swiper { padding-left: .7rem; padding-right: .7rem; }
.hot_look_swiper .swiper-slide { width: 10rem; }
.hot_look_card { position: relative; display: block; width: 10rem; height: 14.4rem;
    border-radius: .8rem; overflow: hidden; background: rgba(255, 255, 255, .2); }
.hot_look_nick { position: absolute; left: .4rem; right: .4rem; bottom: .7rem; text-align: center;
    font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 0 .3rem rgba(0, 0, 0, .55); }
.hot_look_thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 시안 207:37877 Frame 16(20.1) 안의 Polygon 2(15) — 원 배경 없는 흰 삼각형 */
.hot_look_play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 1.5rem; height: 1.5rem; object-fit: contain; }
/* 시안 207:37874 Frame 3289 — 좌하단 「▶ 2:11」 */
.hot_look_dur { position: absolute; left: .7rem; bottom: .8rem; display: flex; align-items: center; gap: .3rem; }
.hot_look_dur img { width: .8rem; height: .8rem; object-fit: contain; }
.hot_look_dur em { font-style: normal; font-size: .9rem; font-weight: 500; color: #fff; }

/* ── SPEC-QAP-CUS-0922-FRIENDTOP — 친구탭 상단 곽 대표 0922 시안 ─────────────────
   원 시안 = 고객 명세 S1(docs/고도화/고도화_2026-06/참고이미지/05_CAVE자료검색_친구탭.png)을 0922 에 고친 것.
   ★ 전부 `.cave_entry_hd` / `.cave_entry_on` 아래 — 게이트가 닫힌 친구탭은 종전 그대로다(F1). */

/* 왼쪽: 로고 이모지 49×32 + 흰 「+」 20. 로고는 logo.svg(134×140)의 이모지 부분(1.7~132.2 × 0~84.3)만 창에 보인다. */
.hd_m.cave_entry_hd .mk_hd_logo_add { display: flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; }
.mk_hd_logo { position: relative; display: block; width: 4.9rem; height: 3.2rem; overflow: hidden; flex-shrink: 0; }
.mk_hd_logo img { position: absolute; left: -.064rem; top: 0; width: 5.03rem; height: auto; max-width: none; }
.mk_hd_plus { display: block; width: 2rem; height: 2rem; }

/* 오른쪽: my 케이브 26 · 돋보기 24 · 종 24 (0922 실측 간격 ≈20) */
.hd_m.cave_entry_hd .mk_hd_mycave { padding: 0; border: 0; background: none; display: flex; align-items: center; }
.mk_cave_ico_hd { width: 2.6rem; height: 2.6rem; }
.mk_cave_ico_hd em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-style: normal; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #fff; pointer-events: none; }
.hd_m.cave_entry_hd .mk_hd_ico { padding: 0; border: 0; background: none; width: 2.4rem; height: 2.4rem; }
.hd_m.cave_entry_hd .mk_hd_ico svg,
.hd_m.cave_entry_hd .mk_hd_bell svg { display: block; width: 2.4rem; height: 2.4rem; }
/* design.css `.top_push{background:url(top_push.png) !important}` 를 이 화면에서만 끈다 — 배지(span)는 그대로 쓴다 */
.hd_m.cave_entry_hd .top_push.mk_hd_bell { background: none !important; width: 2.4rem; height: 2.4rem; border: 0; padding: 0; }

/* 자료 검색창: 파랑 위 흰 반투명 + 흰 글씨.
   0922 시안 390 환산 실측: 창 x 26~366(좌우 약 24) · 아이콘 36(창 왼쪽 24 안쪽) · 아이콘→글자 25 · 글자 18 */
.cave_entry_top .mk_cave_sch { background: rgba(255, 255, 255, .5); width: auto; margin-left: .4rem; margin-right: .4rem;
    padding: 0 2rem 0 2.4rem; gap: 2.4rem; }
.cave_entry_top .mk_cave_sch .mk_cave_ico_md { width: 3.6rem; height: 3.6rem; }
.cave_entry_top .mk_cave_sch_ip { color: #fff; font-size: 1.8rem; }
.cave_entry_top .mk_cave_sch_ip::placeholder { color: #fff; opacity: 1; }

/* 친구 행: S1 실측 행 69 · 아바타 48 — 곽 대표 「한 화면에 5명」 */
.cave_entry_on #selfchat_box .thum .icon56,
.cave_entry_on #friend_list_box .thum .icon56 { width: 4.8rem; height: 4.8rem; }
/* 배지(99+)가 24 종을 덮지 않게 오른쪽 위로 뺀다 — 종전 28 아이콘 기준 top:0/right:0 은 이 크기에서 종 머리를 가린다 */
.hd_m.cave_entry_hd .top_push.mk_hd_bell span { top: -.6rem; right: -.9rem; transform: none; }

/* 「친구 N」 줄 = 0922 시안의 회색 띠(#F6F6F8, 높이 41, 글자 x 24). 내 행 → 띠 → 목록이 틈 없이 붙는다 */
.cave_entry_on #selfchat_box { margin-bottom: 0 !important; }
.cave_entry_on .friend_cnt_hd { display: flex; align-items: center; height: 4.1rem; margin: 0 -2rem !important; padding: 0 2.4rem; background: #F6F6F8; }

/* ── SPEC-QAP-CUS-0922-CAVESRLIST — 자료 검색 결과 행 = 곽 대표 명세 S2(06_CAVE검색결과 · 0922 07:20) ──
   390 환산 실측: 썸네일 139×139(왼쪽 6, r≈10) · 행 간격 167.5(구분선 없음) · 썸네일→제목 14 ·
   제목 16/줄 22.3/3줄 #202020 · 골드 18 굵게 검정(동전 없음) · 닉네임 13 + Lv 알약(테두리 #E0E0E0, 글자 #9D9B9B) + 팔로워 아이콘 18 ·
   펀코드 13 · ⋮ 오른쪽 16 안쪽, 펀코드 줄 높이. 골드~펀코드 묶음은 썸네일 아래 끝에 맞춘다. */
.mk_sr_item.mk_cv_item { gap: 1.4rem; padding: 1.4rem 1.6rem 1.4rem .6rem !important; border-bottom: 0; align-items: stretch; }
.mk_sr_item .mk_cv_thumb { width: 13.9rem; height: 13.9rem; border-radius: 1rem; }
.mk_sr2_body { justify-content: space-between; gap: 0; min-height: 13.9rem; }
.mk_sr2_tit { font-size: 1.6rem; font-weight: 500; line-height: 2.23rem; color: #202020;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.mk_sr2_meta { display: flex; flex-direction: column; padding-right: 2.2rem; min-width: 0; }
/* SPEC-QAP-CUS-0923-CAVELV — 0923 00:57 「1골드 앞에 작게 골드 아이콘」. 글씨 1.8rem 보다 작은 1.6rem. */
.mk_sr2_gold { display: flex; align-items: center; gap: .4rem; font-size: 1.8rem; font-weight: 700; line-height: 2.4rem; color: #000; margin-bottom: .2rem; }
.mk_sr2_gold img { flex-shrink: 0; width: 1.6rem; height: 1.6rem; }
.mk_sr2_author { display: flex; align-items: center; gap: .5rem; height: 2rem; min-width: 0; }
.mk_sr2_nick { font-size: 1.3rem; line-height: 2rem; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* SPEC-QAP-CUS-0923-CAVELV — 0923 01:37 「프로필에 있는 레벨표시처럼 동일하게」.
   프로필 `.level_badge`(custom.css) 실측: bg #ECF3FF · 1px solid var(--primary) · pill · 글씨 var(--primary) 500.
   ★크기만 이 행에 맞춰 축소한다 — 프로필은 높이 28/글씨 14 라 작성자 줄(닉네임 13)에 그대로 넣으면 배치가 무너진다. */
.mk_sr2_lv { flex-shrink: 0; display: inline-flex; align-items: center; gap: .2rem; height: 1.8rem; padding: 0 .6rem;
    border: 1px solid var(--primary); border-radius: 500px; background: #ECF3FF;
    font-size: 1.1rem; font-weight: 500; line-height: 1; color: var(--primary); white-space: nowrap; }
.mk_sr2_lv img { flex-shrink: 0; width: 1.1rem; height: 1.1rem; }
.mk_sr2_fo { flex-shrink: 0; width: 1.8rem; height: 1.8rem; }
/* 팔로워 전용 배지는 마이/타인 케이브와 **같은 것**(`.mk_cv_fo`)을 쓴다 — 검색 행에서만 크기를 맞춘다 */
.mk_sr2_author .mk_cv_fo { flex-shrink: 0; }
.mk_sr2_code { font-size: 1.3rem; line-height: 2rem; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk_sr_item > .mk_cv_more { position: absolute; right: 1rem; bottom: 1.4rem; width: 1.8rem; height: 2rem; display: flex; align-items: center; justify-content: center; }
.mk_sr_item > .mk_cv_more img { width: 1.8rem; height: 1.8rem; }
/* 신고 팝오버는 ⋮ 아래로 연다(⋮ 가 제목 줄 → 행 아래 끝으로 내려왔다) */
.mk_sr_li .mk_cv_pop { top: calc(100% - 1rem); right: 1.6rem; }