@charset "UTF-8";
/* ============================================================
   파일쿠키 리뉴얼 — 모바일 스타일
   디자인 출처: 핸드오프 3파일의 모바일 프레임 (372px 기준, hifi)
   수치는 핸드오프 인라인 스타일 그대로. 임의 변경 금지.
   로컬 전용 (wwwroot/renewal/)
   ============================================================ */

body.fkr-m{
  background:var(--bg);
  /* 하단 고정 GNB(약 62px) 만큼 여백 확보 */
  padding-bottom:66px;
}

/* ============================================================
   1. 상단바
   ============================================================ */
.fkrm-top{
  display:flex;align-items:center;gap:9px;padding:11px 13px;
  background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.fkr-logo-m{ font-size:15px;gap:5px;white-space:nowrap; }
.fkr-logo-m .k{ width:21px;height:21px;font-size:12px;border-radius:50% 50% 50% 4px; }

.fkrm-search{
  flex:1;background:var(--card2);border:1px solid var(--line);border-radius:20px;
  height:32px;display:flex;align-items:center;padding:0 12px;
  color:var(--sub);font-size:12px;gap:6px;cursor:pointer;
  overflow:hidden;white-space:nowrap;
}
.fkrm-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;font:inherit;font-size:12px;color:var(--ink)}
.fkrm-search input::placeholder{color:var(--sub)}
.fkr-dn-m{ width:44px;height:23px;background:#cfd6e0; }
[data-dark="true"] .fkr-dn-m{ background:#3c6ea8; }
.fkr-dn-m .knob{ width:17px;height:17px; }
[data-dark="true"] .fkr-dn-m .knob{ transform:translateX(21px); }

.fkrm-menu{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--sub);font-size:9.5px;font-weight:600;cursor:pointer;flex-shrink:0;
}
.fkrm-menu:hover{ color:var(--sub); }

/* ============================================================
   2. 하단 GNB (고정)
   ============================================================ */
.fkrm-gnb{
  display:flex;justify-content:space-around;
  background:var(--card);border-top:1px solid var(--line);
  padding:8px 0 11px;
  position:fixed;left:0;right:0;bottom:0;z-index:30;
}
.fkrm-gnb-i{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10px;font-weight:600;color:var(--nav-off);
  min-width:44px;min-height:44px;justify-content:center;
}
.fkrm-gnb-i:hover{ color:var(--nav-off); }
.fkrm-gnb-i.on,.fkrm-gnb-i.on:hover{ color:var(--blue); }

/* ============================================================
   3. 본문 공통
   ============================================================ */
.fkrm-scroll{ padding:10px; }
.fkrm-card{ background:var(--card);border-radius:12px;padding:13px 14px;margin-bottom:10px;overflow-x:hidden; } /* [2026-08-06] 페이지 전환 모션의 translateX 돌출이 화면 전체를 밀던 버그 — 카드에서 클리핑 (내부 가로 레일·칩은 자체 스크롤이라 무관) */
.fkrm-sec-title{
  font-size:15px;font-weight:800;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;
}
.fkrm-more{ font-size:12px;color:var(--blue);font-weight:700; }

/* 카테고리 그리드 (모바일 홈 상단) */
/* [2026-08-06] 상단 규격 압축 — 그리드 상하 패딩 16→10, 행 간격 16→12 (배너와의 3중 여백 정리) */
.fkrm-catgrid{
  background:var(--catbar);border-radius:12px;padding:10px 9px;margin-bottom:10px;
}
.fkrm-catgrid .g{
  display:grid;grid-template-columns:repeat(6,1fr);gap:12px 2px;
}
.fkrm-catgrid a{
  font-size:13px;font-weight:700;letter-spacing:-.03em;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:2px;
  white-space:nowrap;color:#fff;background:transparent;border-radius:8px;padding:8px 0;
}
.fkrm-catgrid a:hover{ color:#fff; }
.fkrm-catgrid a.on,.fkrm-catgrid a.on:hover{ background:rgba(255,255,255,.22);color:#fff; }
.fkrm-catgrid .fkr-b19,.fkrm-catgrid .fkr-bn{ font-size:8px;padding:1px 2.5px;line-height:1.1; }
/* 다크 — 그리드 가독성 보정: 배경에 블루 톤 + 항목 위계(비활성 은은/활성 파랑 알약) */
html[data-dark=true] .fkrm-catgrid{ background:#232a36; }
html[data-dark=true] .fkrm-catgrid a{ color:rgba(255,255,255,.78); }
html[data-dark=true] .fkrm-catgrid a:hover{ color:#fff; }
html[data-dark=true] .fkrm-catgrid a.on,html[data-dark=true] .fkrm-catgrid a.on:hover{ background:rgba(62,167,253,.32);color:#fff;font-weight:800; }
/* 다크 — 소분류 칩 톤 정리 (비활성 차분하게, 활성 대비 유지) */
html[data-dark=true] .fkrm-sub{ background:#343a43;color:#dfe4ea;border-color:transparent; }
html[data-dark=true] .fkrm-sub.on,html[data-dark=true] .fkrm-sub.on:hover{ background:#3d5a80;color:#eef4fb;border-color:#3d5a80; }

/* 칩 — 목록 소분류(fkrm-sub)와 동일 톤으로 통일 (2026-07-28 사용자 피드백: 통일성) */
.fkrm-chip{
  padding:6px 13px;border-radius:6px;font-size:12px;font-weight:700;
  white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:3px;
  background:var(--card2);color:var(--ink2);border:1px solid rgba(5,102,219,.4);
}
.fkrm-chip.on{ background:var(--btn);color:#fff;border-color:var(--btn); }
html[data-dark=true] .fkrm-chip{ background:#343a43;color:#dfe4ea;border-color:transparent; }
html[data-dark=true] .fkrm-chip.on{ background:#3d5a80;color:#eef4fb;border-color:#3d5a80; }

/* ============================================================
   4. 홈 — 가로 스크롤 레일 / 공통
   ============================================================ */
.fkrm-rail{ display:flex;gap:10px;overflow-x:auto;margin-top:11px; }
.fkrm-chiprow{ display:flex;gap:7px;overflow-x:auto;margin:11px 0 4px; }
.fkrm-chiprow .fkrm-chip{ flex-shrink:0; }
.fkrm-banner{ border-radius:12px;overflow:hidden;margin-bottom:10px;cursor:pointer;line-height:0; }
.fkrm-banner img{ width:100%;display:block; }
/* [2026-08-06] 페이지 전환 슬라이드 모션 — 스와이프·숫자 이동 방향에서 밀려 들어옴 */
@keyframes fkrmSlideL { from{ transform:translateX(26px);  opacity:.3; } to{ transform:none; opacity:1; } }
@keyframes fkrmSlideR { from{ transform:translateX(-26px); opacity:.3; } to{ transform:none; opacity:1; } }
.fkrm-anim-l{ animation:fkrmSlideL .28s ease; }
.fkrm-anim-r{ animation:fkrmSlideR .28s ease; }

/* [2026-08-06] 상단 롤링 배너 (어드민 08) — 기존 배너와 동일 높이, 4초 크로스페이드 */
.fkrm-banner-roll{ position:relative;height:140px;border-radius:11px;overflow:hidden;margin:0 0 2px;background:var(--thumb); } /* [2026-08-13] 좌우 마진 제거 — 부모(.fkrm-scroll) 패딩 10px 와 중복돼 배너만 20px 로 좁았다 (카테고리·카드 = 10px). 상단 마진 제거(2026-08-06)와 같은 유형 */
.fkrm-banner-roll .bn{ position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:block;pointer-events:none; }
.fkrm-banner-roll .bn.on{ opacity:1;pointer-events:auto; }
.fkrm-banner-roll .bn img{ width:100%;height:100%;object-fit:cover;display:block; }
.fkrm-banner-roll .dots{ position:absolute;left:0;right:0;bottom:7px;display:flex;justify-content:center;gap:5px;z-index:2; }
.fkrm-banner-roll .dots span{ width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.45);transition:width .3s,background .3s; }
.fkrm-banner-roll .dots span.on{ width:16px;background:#fff; }

/* 실시간 인기 / 판매순위 행 */
.fkrm-row{ display:flex;gap:10px;padding:7px 0;align-items:center;border-bottom:1px solid var(--line); }
.fkrm-row.hide{ display:none; }
.fkrm-row .rank{ width:16px;text-align:center;font-size:14px;font-weight:800;color:var(--blue);flex-shrink:0; }
.fkrm-row .th{ position:relative;width:96px;height:54px;border-radius:7px;background:var(--thumb);flex-shrink:0;overflow:hidden; }
.fkrm-row .th img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; }
.fkrm-row .b19{
  position:absolute;right:3px;bottom:3px;width:13px;height:13px;border-radius:50%;
  background:var(--adult);color:#fff;font-size:7.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:1px solid #fff;
}
.fkrm-row .t{ font-size:13.5px;color:var(--ink2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.fkrm-row .m{ font-size:10px;color:var(--sub);margin-top:2px; }

.fkrm-more-wrap{ margin-top:10px;display:flex;gap:7px;align-items:stretch; }
.fkrm-more-wrap .btn{
  flex:1;border:1px solid var(--line);border-radius:9px;padding:10px;text-align:center;
  font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer;background:var(--card2);user-select:none;
}
.fkrm-more-wrap .fold{
  flex-shrink:0;border:1px solid var(--line);border-radius:9px;padding:10px 15px;
  font-size:11.5px;font-weight:700;color:var(--sub);cursor:pointer;background:var(--card2);
  user-select:none;display:none;align-items:center;gap:3px;
}
.fkrm-more-wrap .fold.show{ display:flex; }

/* BJ LIVE 카드 */
.fkrm-bj{ flex-shrink:0;width:150px;cursor:pointer; }
.fkrm-bj .th{
  position:relative;width:150px;height:94px;border-radius:9px;overflow:hidden;
  background:#fff;display:flex;align-items:center;justify-content:center;
}
.fkrm-bj .th img{ position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block; }
.fkrm-bj .live{
  position:absolute;left:6px;top:6px;background:var(--adult);color:#fff;font-size:9px;font-weight:800;
  padding:2px 6px;border-radius:4px;display:flex;align-items:center;gap:4px;
}
.fkrm-bj .live i{ width:5px;height:5px;border-radius:50%;background:#fff;display:inline-block;animation:fkpulse 1.4s infinite; }
.fkrm-bj .play{
  width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.4);
  border:1.5px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;
}
.fkrm-bj .b19{
  position:absolute;left:6px;bottom:6px;width:15px;height:15px;border-radius:50%;
  background:var(--adult);color:#fff;font-size:8.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;
}
.fkrm-bj .view{
  position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.7);color:#fff;
  font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:4px;
}
.fkrm-bj .who{ display:flex;align-items:center;gap:6px;margin-top:6px; }
.fkrm-bj .who .av{
  width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#2f80ed,#8a4bff);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;
}
.fkrm-bj .who .nm{ font-size:11.5px;font-weight:700;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.fkrm-bj .tt{ font-size:10.5px;color:var(--sub);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* 팔로잉 카드 (가로 레일) */
.fkrm-fl{ flex-shrink:0;width:150px;cursor:pointer; }
.fkrm-fl.hide{ display:none; }
.fkrm-fl .th{ position:relative;width:150px;height:88px;border-radius:9px;background:var(--thumb);overflow:hidden; }
.fkrm-fl .th img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; }
.fkrm-fl .b19{
  position:absolute;left:5px;bottom:5px;width:15px;height:15px;border-radius:50%;
  background:var(--adult);color:#fff;font-size:8.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;
}
.fkrm-fl .dur{
  position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.72);color:#fff;
  font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;
}
.fkrm-fl .t{ font-size:11.5px;color:var(--ink2);font-weight:600;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.fkrm-fl .m{ font-size:10px;color:var(--sub);margin-top:2px; }
.fkrm-fl-manage{
  display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ink2);font-weight:700;
  border:1px solid var(--chip-line);background:var(--chip-bg);padding:4px 10px;border-radius:16px;
}
.fkrm-fl-manage:hover{ color:var(--ink2); }

/* 시즌 애니 */
.fkrm-ani-chip{
  flex-shrink:0;width:34px;text-align:center;padding:6px 0;border-radius:16px;
  font-size:12px;font-weight:700;cursor:pointer;
  background:var(--chip-bg);color:var(--chip-tx);border:1px solid var(--chip-line);
}
.fkrm-ani-chip.on{ background:var(--on-bg);color:var(--on-tx);border-color:var(--on-bg); }
.fkrm-ani-view{ overflow:hidden;margin-top:10px; }
.fkrm-ani-row{ display:flex;gap:10px;width:max-content;transition:transform .6s ease; }
.fkrm-ani{ flex-shrink:0;width:104px; }
.fkrm-ani.hide{ display:none; }
.fkrm-ani .p{ width:104px;height:148px;border-radius:9px;background:var(--poster);position:relative;overflow:hidden; }
.fkrm-ani .p img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; }
.fkrm-ani .day{
  position:absolute;top:6px;left:6px;background:rgba(0,0,0,.55);color:#fff;
  font-size:9px;font-weight:800;border-radius:5px;padding:1px 7px;
}
.fkrm-dots{ display:flex;justify-content:center;gap:5px;margin-top:12px; }
.fkrm-dots span{ width:6px;height:6px;border-radius:3px;background:var(--chip-line);cursor:pointer;transition:width .3s,background .3s; }
.fkrm-dots span.on{ width:18px;background:var(--ink); } /* [2026-08-05] 영화 배너·포스터 롤링 닷과 통일 — 다크=흰 알약, 라이트=잉크색 (파란 강조 제거) */

/* 무료·할인관 (가로 레일 카드) */
.fkrm-vcard{ flex-shrink:0;width:130px;cursor:pointer; }
.fkrm-vcard.hide{ display:none; }
.fkrm-vcard .th{ position:relative;width:130px;height:80px;border-radius:9px;background:var(--thumb);overflow:hidden; }
.fkrm-vcard .th img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; }
.fkrm-vcard .badge{ position:absolute;left:6px;top:6px;color:#fff;font-size:9px;font-weight:800;padding:1px 6px;border-radius:4px; }
.fkrm-vcard .badge.free{ background:var(--free); }
.fkrm-vcard .badge.blue{ background:var(--blue); }
/* [2026-08-06] 무료·할인관 = 최신 업로드형 2열 카드(gcard)로 통일 — 가격 배지 스타일 이관 */
.fkrm-gcard .badge{ position:absolute;left:6px;top:6px;color:#fff;font-size:9px;font-weight:800;padding:1px 6px;border-radius:4px; }
.fkrm-gcard .badge.free{ background:var(--free); }
.fkrm-gcard .badge.blue{ background:var(--blue); }
.fkr-body .fkrm-gcard .badge li{display:inline;list-style:none;margin:0;padding:0}
.fkr-body .fkrm-gcard .badge .cashvv_st1, .fkr-body .fkrm-gcard .badge .cashvv_st2{color:inherit;font-weight:inherit}
.fkrm-vcard .b19{
  position:absolute;left:6px;bottom:6px;width:15px;height:15px;border-radius:50%;
  background:var(--adult);color:#fff;font-size:8.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;
}
.fkrm-vcard .dur{
  position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.72);color:#fff;
  font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;
}
.fkrm-vcard .t{
  font-size:11.5px;color:var(--ink2);font-weight:600;margin-top:5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fkrm-vcard .m{ font-size:10px;color:var(--sub);margin-top:2px; }
.fkrm-vcard .m b.free{ color:var(--free);font-weight:800; }
.fkrm-vcard .m b.blue{ color:var(--blue-ink);font-weight:800; }

/* 최신 업로드 (2열 그리드) */
.fkrm-grid2{ display:grid;grid-template-columns:1fr 1fr;gap:11px 10px;margin-top:11px; }
.fkrm-gcard{ cursor:pointer; }
.fkrm-gcard.hide{ display:none; }
.fkrm-gcard .th{ position:relative;width:100%;aspect-ratio:16/9;border-radius:9px;background:var(--thumb);overflow:hidden; }
.fkrm-gcard .th img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; }
.fkrm-gcard .b19{
  position:absolute;left:5px;bottom:5px;width:15px;height:15px;border-radius:50%;
  background:var(--adult);color:#fff;font-size:8.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;z-index:2;
}
.fkrm-gcard .dur{
  position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.72);color:#fff;
  font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;z-index:2;
}
.fkrm-gcard .t{ font-size:11.5px;color:var(--ink2);font-weight:600;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.fkrm-gcard .m{ font-size:10px;color:var(--sub);margin-top:2px; }

/* 페이징 */
.fkrm-pg{ display:flex;justify-content:center;gap:6px;margin-top:12px; }
.fkrm-pg span{
  min-width:26px;height:26px;padding:0 7px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;cursor:pointer;
  background:transparent;color:var(--ink2);border:1px solid var(--line);
}
.fkrm-pg span.on{ background:var(--on-bg);color:var(--on-tx);border-color:var(--on-bg); }

/* ============================================================
   5. 홈 — 올린자료 관리 / 보관함
   ============================================================ */
.fkrm-seg{ display:inline-flex;background:var(--chip-bg);border:1px solid var(--chip-line);border-radius:8px;padding:2px;gap:2px; }
.fkrm-seg span{ padding:4px 10px;border-radius:6px;font-size:10.5px;font-weight:700;cursor:pointer;background:transparent;color:var(--sub); }
.fkrm-seg span.on{ background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12); }
.fkrm-stat3{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:11px 0 8px; }
.fkrm-stat{ background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:9px 8px;text-align:center;cursor:pointer; }
.fkrm-stat.on{ background:rgba(5,102,219,.07);border:1.5px solid var(--brand); }
.fkrm-stat .lb{ font-size:10px;color:var(--sub);font-weight:600; }
.fkrm-stat .vl{ font-size:15px;font-weight:800;color:var(--ink);margin-top:2px; }
.fkrm-stat .vl.red{ color:var(--adult); }

.fkrm-trow{ display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line); }
.fkrm-trow.hide{ display:none; }
.fkrm-trow .th{ width:64px;height:38px;flex-shrink:0;border-radius:6px;overflow:hidden;background:var(--thumb); }
.fkrm-trow .th img{ width:100%;height:100%;object-fit:cover;display:block; }
.fkrm-trow .t{ font-size:12.5px;color:var(--ink2);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.fkrm-trow .sub{ font-size:11px;color:var(--sub);margin-top:3px; }
.fkrm-pill{ font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:20px; }
.fkrm-pill.svc{ background:rgba(5,102,219,.12);color:var(--brand); }
.fkrm-pill.rev{ background:rgba(230,150,20,.15);color:#d98a12; }
[data-dark="true"] .fkrm-pill.rev{ color:#f0a93a; }
.fkrm-pill.del{ background:rgba(224,52,52,.13);color:var(--adult); }
.fkrm-pill.type{ background:var(--card2);color:var(--sub);border:1px solid var(--line); }
.fkrm-pill.type.pt{ background:rgba(120,80,220,.13);color:#7a4bd1; }
[data-dark="true"] .fkrm-pill.type.pt{ color:#b18bf0; }
.fkrm-abtn{
  flex-shrink:0;font-size:10px;font-weight:700;padding:5px 10px;border-radius:8px;
  background:var(--card2);color:var(--ink2);border:1px solid var(--line);cursor:pointer;
}
.fkrm-abtn.red{ color:var(--adult); }
.fkrm-abtn.solid{ font-size:11px;padding:6px 12px;background:var(--brand);color:#fff;border-color:var(--brand); }
.fkrm-heart{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
  background:var(--card2);color:var(--adult);cursor:pointer;
}
.fkrm-av38{
  width:38px;height:38px;flex-shrink:0;border-radius:50%;
  background:linear-gradient(145deg,#0566db,#5aa2ff);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:800;
}

/* 데이터 출처 표시 (로컬 전용) */
.fkrm-src{
  padding:9px 12px;border-radius:9px;margin-bottom:10px;
  background:var(--chip-bg);color:var(--chip-tx);font-size:11px;font-weight:700;line-height:1.5;
}

/* ============================================================
   6. 카테고리 목록 (모바일)
   디자인 출처: 핸드오프 "파일쿠키 카테고리.dc.html" 모바일 프레임 (L174~245)
   ============================================================ */
/* 카테고리 그리드 — 카테고리 화면용 축소 버전 */
.fkrm-catgrid.compact{ border-radius:0;margin-bottom:0;padding:12px 9px; }
.fkrm-catgrid.compact .g{ gap:12px 2px; }
.fkrm-catgrid.compact a{ font-size:12px;padding:7px 0; }

/* 소분류 바 */
.fkrm-subbar{
  /* 알약 칩이 자체 배경을 가져 바 배경은 제거 (2026-07-28 사용자 피드백) */
  background:transparent;border-bottom:0;
  display:flex;flex-wrap:wrap;gap:7px;padding:11px 12px;
}
.fkrm-sub{
  display:inline-flex;align-items:center;gap:3px;padding:6px 13px;border-radius:6px;
  font-size:12px;font-weight:700;cursor:pointer;
  background:var(--card2);color:var(--ink2);border:1px solid rgba(5,102,219,.4);
}
.fkrm-sub:hover{ color:var(--ink2); }
[data-dark="true"] .fkrm-sub{ background:#4c4d4f;color:#e7e9ec;border-color:transparent; }
.fkrm-sub.on,.fkrm-sub.on:hover{ background:var(--btn);color:#fff;border-color:var(--btn); }
[data-dark="true"] .fkrm-sub.on{ color:var(--btn-tx); }
.fkrm-subbar .fkr-b19,.fkrm-subbar .fkr-bn{ font-size:8px;padding:1px 3px; }

/* 본문 */
.fkrm-cat-body{ padding:12px 14px 18px; }
.fkrm-cat-tool{ display:flex;align-items:center;margin-bottom:12px; }
.fkrm-crumb{ font-size:12.5px;font-weight:800;color:var(--ink); }
.fkrm-crumb .cnt{ font-size:11px;font-weight:600;color:var(--sub); }
.fkrm-tggroup{ display:flex;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden; }
.fkrm-tggroup a{ padding:5px 10px;font-size:11px;font-weight:700;cursor:pointer;background:transparent;color:var(--ink2); }
.fkrm-tggroup a:hover{ color:var(--ink2); }
.fkrm-tggroup a.on,.fkrm-tggroup a.on:hover{ background:var(--btn);color:#fff; }
[data-dark="true"] .fkrm-tggroup a.on{ color:var(--btn-tx); }

/* 썸네일형 카드 */
.fkrm-lcard{
  display:flex;gap:11px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:9px 11px;margin-bottom:8px;cursor:pointer;
}
.fkrm-lcard .th{ width:92px;height:52px;flex-shrink:0;border-radius:7px;overflow:hidden;background:var(--thumb); }
.fkrm-lcard .th img{ width:100%;height:100%;object-fit:cover;display:block; }

/* 리스트형 행 */
.fkrm-lrow{
  display:flex;align-items:center;gap:10px;padding:11px 4px;
  border-bottom:1px solid var(--line);cursor:pointer;
}

/* 공통 텍스트 */
.fkrm-ltitle{
  font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fkrm-l19{
  display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  background:var(--adult);color:#fff;font-size:8px;font-weight:800;margin-right:4px;vertical-align:-2px;
}
.fkrm-lmeta{ display:flex;align-items:center;gap:5px;margin-top:4px; }
.fkrm-ltag{
  font-size:9px;font-weight:800;color:var(--acc);
  background:rgba(5,102,219,.1);padding:2px 6px;border-radius:20px;
}
.fkrm-lsub{ font-size:10.5px;color:var(--sub); }
.fkrm-lprice{ flex-shrink:0;font-size:12px;font-weight:800;color:var(--ink); }
.fkrm-lprice.free{ color:var(--free); }
.fkrm-play{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;background:var(--btn);color:var(--btn-tx);cursor:pointer;
}

/* 페이징 (카테고리) */
.fkrm-cpg{ display:flex;justify-content:center;gap:6px;margin-top:16px; }
.fkrm-cpg a{
  min-width:30px;height:30px;padding:0 8px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;cursor:pointer;
  background:transparent;color:var(--ink2);border:1px solid var(--line);
}
.fkrm-cpg a:hover{ color:var(--ink2); }
.fkrm-cpg a.on,.fkrm-cpg a.on:hover{ background:var(--on-bg);color:var(--on-tx);border-color:var(--on-bg); }

/* 법적 고지 */
.fkrm-legal{ margin-top:22px;padding-top:16px;border-top:1px solid var(--line);text-align:center; }
.fkrm-legal .l1{ font-size:10px;color:var(--sub);line-height:1.8; }
.fkrm-legal .l2{ font-size:9.5px;color:var(--sub);line-height:1.7;margin-top:8px; }
.fkrm-legal .l3{ font-size:9.5px;color:var(--sub);margin-top:8px; }

/* ============================================================
   7. 팔로잉 관리 (모바일)
   디자인 출처: 핸드오프 "파일쿠키 친구관리.dc.html" 모바일 프레임 (L175~250)
   ============================================================ */
.fkrm-fw-title{
  font-size:15px;font-weight:800;color:var(--ink);
  display:flex;align-items:center;gap:6px;padding:12px 14px 0;
}
.fkrm-ftabs{
  display:flex;gap:2px;margin:10px 0 0;padding:0 14px;
  border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--card);
}
.fkrm-ftab{ position:relative;padding:10px 12px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--sub); }
.fkrm-ftab:hover{ color:var(--sub); }
.fkrm-ftab .n{ font-size:11px;color:var(--sub); }
.fkrm-ftab .bar{ position:absolute;left:6px;right:6px;bottom:-1px;height:3px;border-radius:3px;background:transparent; }
.fkrm-ftab.on,.fkrm-ftab.on:hover{ color:var(--ink); }
.fkrm-ftab.on .n{ color:var(--brand); }
.fkrm-ftab.on .bar{ background:var(--brand); }

.fkrm-fbody{ padding:12px 14px 18px; }
.fkrm-fsearch{
  display:flex;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;margin-bottom:10px;
}
.fkrm-fsearch input{ border:none;background:transparent;outline:none;flex:1;font-size:13px;color:var(--ink); }
.fkrm-ftool{ display:flex;align-items:center;gap:7px;margin-bottom:11px; }
.fkrm-fbtn{
  flex:1;text-align:center;font-size:11.5px;font-weight:700;padding:8px 0;border-radius:8px;
  border:1px solid var(--line);background:var(--card);color:var(--ink2);cursor:pointer;
  min-height:44px;display:flex;align-items:center;justify-content:center;
}
.fkrm-fbtn.red{ color:var(--adult); }
.fkrm-fbtn.primary{ font-weight:800;background:var(--brand);color:#fff;border-color:var(--brand); }
.fkrm-fnote{
  font-size:11px;color:var(--sub);background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:8px 11px;margin-bottom:10px;
}

.fkrm-frow{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:11px 12px;margin-bottom:8px;
}
.fkrm-frow.gone{ display:none; }
.fkrm-fchk{
  width:20px;height:20px;flex-shrink:0;margin-top:8px;border-radius:6px;
  border:2px solid var(--line);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.fkrm-fchk svg{ display:none; }
.fkrm-fchk.on{ border-color:var(--brand);background:var(--brand); }
.fkrm-fchk.on svg{ display:block; }
.fkrm-fav{
  width:36px;height:36px;flex-shrink:0;border-radius:50%;
  background:linear-gradient(145deg,#0566db,#5aa2ff);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800;
}
.fkrm-fid{ font-size:13px;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.fkrm-freg{ font-size:10.5px;color:var(--sub);margin-top:2px; }
.fkrm-fmemo{
  width:100%;border:none;border-bottom:1px dashed var(--line);background:transparent;outline:none;
  font-size:10.5px;color:var(--ink2);padding:3px 0 1px;margin-top:3px;
}
.fkrm-facts{ display:flex;gap:5px;margin-top:8px;flex-wrap:wrap; }
.fkrm-fa{
  font-size:10.5px;font-weight:700;padding:6px 11px;border-radius:7px;
  border:1px solid var(--line);background:var(--card2);color:var(--ink2);cursor:pointer;
}
.fkrm-fa.brand{ background:var(--brand);color:#fff;border-color:var(--brand); }
.fkrm-fa.danger{ border-color:var(--adult);background:transparent;color:var(--adult); }
.fkrm-fempty{ text-align:center;padding:44px 16px;color:var(--sub);font-size:12.5px; }

/* 찜한 자료 (모바일) */
.fkrm-feed{
  display:flex;gap:11px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:10px 12px;margin-bottom:8px;
}
.fkrm-feed .th{
  width:104px;aspect-ratio:16/9;flex-shrink:0;border-radius:8px;overflow:hidden;
  background:var(--thumb);cursor:pointer;
}
.fkrm-feed .th img{ width:100%;height:100%;object-fit:cover;display:block; }
.fkrm-feed .t{ font-size:12.5px;color:var(--ink2);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.fkrm-feed .meta{ display:flex;align-items:center;gap:5px;margin-top:4px; }
.fkrm-feed .cat{
  font-size:9px;font-weight:800;color:var(--brand);
  background:rgba(5,102,219,.1);padding:2px 6px;border-radius:20px;
}
.fkrm-feed .who{ font-size:10.5px;color:var(--ink2);font-weight:600; }
.fkrm-feed .tm{ display:flex;align-items:center;gap:3px;font-size:10px;color:var(--sub);margin-top:2px; }
.fkrm-fheart{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--card2);border:1px solid var(--line);
}

/* ============================================================
   8. 랜딩 (index.jsp 모바일 폭 대응)
   ============================================================ */
.fkr-landing{ max-width:900px;margin:0 auto;padding:24px 16px 60px; }