@charset "UTF-8";
/* ============================================================
   파일쿠키 리뉴얼 — 디자인 토큰 (실서비스 페이지 본문 주입용 스코프판)
   tokens.css 와 동일 값 — 전역 리셋(*,body,a,ul...) 을 .fkr-body 스코프로
   변환해 기존 페이지의 헤더(topr)·푸터(botr)·기타 마크업에 영향 0.
   값 임의 변경 금지 (핸드오프 README 2026-07-24)
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

.fkr-body{
  --page:#e7e9ee;--bg:#f0f0f0;--card:#ffffff;--card2:#f5f7fb;--ink:#101111;--ink2:#33383f;--sub:#7c8698;--line:#e7e9ed;
  --blue:#0566db;--blue-ink:#0566db;--blue-soft:#eaf1fd;--adult:#f83a5a;--free:#2ea36a;--gold:#f5a623;--catbar:#0566db;--on-bg:#0566db;--on-tx:#fff;--brand:#0566db;
  --chip-bg:#eef0f4;--chip-tx:#5a6472;--chip-line:#e2e5ea;--nav-off:#9aa2ad;
  --thumb:linear-gradient(135deg,#dbe3f0,#c2d0e6);--poster:linear-gradient(160deg,#d7ddf0,#bfc7e2);
  --chrome:#e9ebef;--shadow:0 18px 50px rgba(20,30,50,.16);
  --acc:#0566db;--btn:#0566db;--btn-tx:#fff;--cat-tx:rgba(255,255,255,.9);
  --fkr-w:1132px;
}
html[data-dark=true] .fkr-body{
  --page:#0f1012;--bg:#1a1b1c;--card:#2d2d2d;--card2:#272829;--ink:#ffffff;--ink2:#e7e9ec;--sub:#9aa2ad;--line:#3a3b3d;
  --blue:#aab4c4;--blue-ink:#c4ccd8;--blue-soft:#1e2b3f;--adult:#e63f5b;--free:#37c07d;--gold:#f5c542;--catbar:#20242c;--on-bg:#e8eaed;--on-tx:#16171a;--brand:#3ea7fd;
  --chip-bg:#3a3b3d;--chip-tx:#cfd4da;--chip-line:#454648;--nav-off:#7d828a;
  --thumb:linear-gradient(135deg,#243447,#161d29);--poster:linear-gradient(160deg,#2a3040,#12161f);
  --chrome:#232427;--shadow:0 18px 55px rgba(0,0,0,.5);
  --acc:#8fa6c6;--btn:#38506e;--btn-tx:#e7edf5;--cat-tx:#cfd4da;
}

/* 전역 리셋의 스코프판 — 리뉴얼 본문 내부에만 적용.
   :where() = 명시도 0 — 이 파일이 pc.css 뒤에 (재)로드돼도 컴포넌트 규칙을 절대 덮지 않음 (2026-07-28 셸 압축 사고 원인) */
:where(.fkr-body), :where(.fkr-body *){margin:0;padding:0;box-sizing:border-box}
.fkr-body{
  font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;line-height:1.45;
}
.fkr-body a{color:var(--blue);text-decoration:none}
.fkr-body a:hover{color:var(--blue-ink)}
.fkr-body img{border:0}
.fkr-body ul, .fkr-body ol{list-style:none}
.fkr-body button{font-family:inherit;border:0;background:none;cursor:pointer}
.fkr-body input{font-family:inherit}

@keyframes fkpulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes fkroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.fkr-noscroll::-webkit-scrollbar{width:0;height:0;display:none}
.fkr-noscroll{scrollbar-width:none;-ms-overflow-style:none}

.fkr-body .fkr-b19{background:var(--adult);color:#fff;font-size:8.5px;font-weight:800;border-radius:3px;padding:1px 3px;line-height:1}
.fkr-body .fkr-bn{background:var(--free);color:#fff;font-size:8.5px;font-weight:800;border-radius:3px;padding:1px 3px;line-height:1}

/* ── 실서비스 목록(in-place) 보정 ── */
.fkr-body .pc_free_txtlistbox{display:block}
.fkr-body .pc_free_txtlistbox_02{display:none}   /* 구 광고자리(placeholder) — 리뉴얼 목록에선 숨김 */
.fkr-body .kkr_itembox{display:block;width:auto;max-width:none;margin:0;background:var(--card);border-radius:12px;padding:6px 16px;box-sizing:border-box}
.fkr-body .fkr-lc-price{list-style:none;width:110px;text-align:center;flex-shrink:0}
.fkr-body .fkr-lc-price li{list-style:none}
.fkr-body .fkr-lc-price .cashvv_st1{color:var(--ink2);font-size:13px;font-weight:800}
.fkr-body .fkr-lc-price .cashvv_st2{color:var(--free);font-size:13px;font-weight:800}
/* 제목의 판매자 색 span(실서비스 유지) — 다크에서 기본색 보정 */
html[data-dark=true] .fkr-body .fkr-ltitle span[style*="color:;"]{color:var(--ink) !important}

/* 갤러리형 (in-place) */
.fkr-body .pc_free_txtlistbox_gbox{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;list-style:none;padding:10px 0}
.fkr-body .fkr-galit{min-width:0}
.fkr-body .fkr-galit .th{position:relative;width:100%;aspect-ratio:16/9;border-radius:9px;background:var(--thumb);overflow:hidden}
.fkr-body .fkr-galit .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fkr-body .fkr-galit .th .b19{position:absolute;right:5px;top:5px;background:var(--adult);color:#fff;font-size:9px;font-weight:900;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.fkr-body .fkr-galit .t{font-size:12.5px;color:var(--ink2);font-weight:600;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fkr-body .fkr-galit .meta{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--sub);margin-top:2px}
.fkr-body .fkr-galit .meta .pr{list-style:none;display:inline-flex}
.fkr-body .fkr-galit .meta .pr li{list-style:none}

/* ── 구 사이트 CSS 의 a:link/:visited(파란 글자) 가 리뉴얼 본문 앵커색을 덮는 것 방지 ──
   의사클래스 명시도(0,0,1,1) > 클래스(0,0,1,0) 라 각 클래스별 :link/:visited 를 명시 */
.fkr-body a:link, .fkr-body a:visited{color:var(--blue)}
.fkr-body a.fkr-btn-primary:link, .fkr-body a.fkr-btn-primary:visited{color:var(--on-tx)}
.fkr-body .fkr-banner a.cta:link, .fkr-body .fkr-banner a.cta:visited{color:#12233a}
.fkr-body a.fkr-more:link, .fkr-body a.fkr-more:visited{color:var(--blue)}
.fkr-body a.fkr-check:link, .fkr-body a.fkr-check:visited{color:var(--ink2)}
.fkr-body a.fkr-sub:link, .fkr-body a.fkr-sub:visited{color:var(--chip-tx)}
.fkr-body a.fkr-sub.on:link, .fkr-body a.fkr-sub.on:visited{color:var(--btn-tx)} /* 배경이 --btn 이라 짝인 --btn-tx (다크에서 --on-tx 는 어두운 글자) */
.fkr-body a.fkr-fl-manage:link, .fkr-body a.fkr-fl-manage:visited{color:var(--sub)}
.fkr-body .fkr-cpg a:link, .fkr-body .fkr-cpg a:visited{color:var(--chip-tx)}
.fkr-body .fkr-cpg a.on:link, .fkr-body .fkr-cpg a.on:visited{color:var(--on-tx)}

/* ── 라이트/다크 배치 동일 잠금 — 구 CSS 다크 규칙이 컨테이너 레이아웃을 바꾸지 못하게 ── */
html[data-dark=true] .fkr-body .kkr_itembox{display:block;width:auto;max-width:none;margin:0;background:var(--card);border-radius:12px;padding:6px 16px;box-sizing:border-box}
html[data-dark=true] .fkr-body .pc_free_txtlistbox{display:block;background:transparent;width:auto;margin:0}
html[data-dark=true] .fkr-body .pc_free_txtlistbox_gbox{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;background:transparent;width:auto;margin:0;text-align:left;height:auto}
html[data-dark=true] .fkr-body .fkr-lrow{background:transparent}

/* 팔로잉 관리 탭 — 구 CSS a:link 침범 방지 (기본 회색, 활성 잉크색 + 하단 브랜드 바) */
.fkr-body a.fkr-ftab:link, .fkr-body a.fkr-ftab:visited{color:var(--sub)}
.fkr-body a.fkr-ftab.on:link, .fkr-body a.fkr-ftab.on:visited{color:var(--ink)}
/* 인라인 앵커에선 절대배치 bar 기준 박스가 어긋나 밑줄이 잘려 보임 → 블록 컨텍스트 고정 */
.fkr-body a.fkr-ftab{display:inline-flex;align-items:center;gap:5px;position:relative;text-decoration:none}
.fkr-body a.fkr-ftab .bar{left:8px;right:8px;width:auto}

/* 찜한 자료 (kukir_my_basket in-place) — 시안 행: 썸네일·제목·칩·@판매자·찜한 시각 + 하트 */
.fkr-body .fkr-bkrow{display:flex;align-items:center;gap:16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;cursor:pointer;background:var(--card)}
.fkr-body .fkr-bkrow:hover{border-color:var(--brand)}
.fkr-body .fkr-bkrow .th{width:118px;height:66px;border-radius:8px;background:var(--thumb);overflow:hidden;flex-shrink:0}
.fkr-body .fkr-bkrow .th img{width:100%;height:100%;object-fit:cover;display:block}
.fkr-body .fkr-bkrow .bd{min-width:0;flex:1}
.fkr-body .fkr-bkrow .t{font-size:14.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fkr-body .fkr-bkrow .m{display:flex;align-items:center;gap:9px;margin-top:7px;font-size:12px;color:var(--sub)}
.fkr-body .fkr-bkrow .m .chip{background:var(--blue-soft);color:var(--blue-ink);font-size:11px;font-weight:700;border-radius:5px;padding:2px 7px}
.fkr-body .fkr-bkrow .m .seller{color:var(--sub);font-weight:600}
.fkr-body .fkr-bkrow .m .ago{font-size:11.5px;color:var(--sub)}
.fkr-body .fkr-bkrow .m .ago .hh{color:var(--adult)}
.fkr-body .fkr-bkheart{width:44px;height:44px;border-radius:50%;background:#fdeef2;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
.fkr-body .fkr-bkheart svg{width:20px;height:20px;fill:var(--adult)}
.fkr-body .fkr-bkheart:hover{background:#fbdce5}
html[data-dark=true] .fkr-body .fkr-bkheart{background:#3a2430}
html[data-dark=true] .fkr-body .fkr-bkheart:hover{background:#4a2c3c}
/* 하트 꺼짐(찜 해제 상태) — 윤곽선만, 새로고침 시 목록에서 제거됨 */
.fkr-body .fkr-bkheart.off{background:var(--chip-bg)}
.fkr-body .fkr-bkheart.off:hover{background:var(--chip-bg)}
.fkr-body .fkr-bkheart.off svg{fill:none;stroke:var(--nav-off);stroke-width:2}
.fkr-body .fkr-bkrow:has(.fkr-bkheart.off){opacity:.55}

/* ── 모바일 홈 in-place — 배너 = 구 모바일 홈 규격 그대로 ──
   구 이벤트 배너 .slick-slide_ebn: width 100% / height 140px / object-fit contain (mobile_main.css:81) */
.fkr-body .fkrm-banner{display:block;width:100%;height:140px;border-radius:5px}
.fkr-body .fkrm-banner img{width:100%;height:140px;object-fit:contain;display:block;border-radius:5px}

/* 최신 업로드 그리드 — 목업은 폰 2열 고정이라 넓은 화면에서 카드가 거대해짐 → 폭 따라 열 자동 증가 (폰 ~2열 유지, PC 다열) */
.fkr-body .fkrm-grid2{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}

/* 모바일 목록 행 — 판매자 표시 (톱100·팔로잉 피드 .sel 과 동일 톤) */
.fkr-body .fkrm-lsel{color:var(--brand);font-weight:700;font-size:11px;flex-shrink:0}

/* 다크 — 목록 행 가독성: 구 강조색(제목 인라인 style)이 어두운 배경에 묻힘 → 제목은 항상 밝게, 메타는 한 단계 밝게 */
html[data-dark=true] .fkr-body .fkrm-ltitle, html[data-dark=true] .fkr-body .fkrm-ltitle *{color:var(--ink) !important}
html[data-dark=true] .fkr-body .fkrm-lsub, html[data-dark=true] .fkr-body .fkrm-lsub *{color:#aab3bf}
html[data-dark=true] .fkr-body .fkrm-lmeta .fkrm-ltag{color:#cfd6df}
/* 판매자 아이디 — 다크에서 항상 밝은 파랑 (목록·톱100·피드·찜 공통) */
html[data-dark=true] .fkr-body .fkrm-lsel,
html[data-dark=true] .fkr-body .fkrm-fd-row .m .sel,
html[data-dark=true] .fkr-body .fkrm-bkrow .m .seller,
html[data-dark=true] .fkr-body .fkr-bkrow .m .seller{color:#5db4ff !important}

/* ── 모바일 목록 — 상단(그리드 좌우 10px 기준)과 리스트 좌우 정렬 통일 ── */
.fkr-body .fkrm-subbar{padding-left:10px;padding-right:10px}
.fkr-body .fkrm-cat-tool{margin-left:10px;margin-right:10px}
.fkr-body.fkrm-lcard, .fkr-body.fkrm-lrow{margin-left:10px;margin-right:10px}
.fkr-body.fkrm-lcard{margin-bottom:9px}

/* ── 모바일 in-place — 구 CSS a:link/:visited(파란 글자) 침범 가드 (PC 목록과 동일 함정) ── */
.fkr-body .fkrm-catgrid a:link, .fkr-body .fkrm-catgrid a:visited{color:#fff}
.fkr-body .fkrm-catgrid a.on:link, .fkr-body .fkrm-catgrid a.on:visited{color:#fff}
html[data-dark=true] .fkr-body .fkrm-catgrid a:link, html[data-dark=true] .fkr-body .fkrm-catgrid a:visited{color:rgba(255,255,255,.78)}
html[data-dark=true] .fkr-body .fkrm-catgrid a.on:link, html[data-dark=true] .fkr-body .fkrm-catgrid a.on:visited{color:#fff}
.fkr-body a.fkrm-more:link, .fkr-body a.fkrm-more:visited{color:var(--blue)}
.fkr-body a.fkrm-chip:link, .fkr-body a.fkrm-chip:visited{color:var(--ink2)}
html[data-dark=true] .fkr-body a.fkrm-chip:link, html[data-dark=true] .fkr-body a.fkrm-chip:visited{color:#dfe4ea}
.fkr-body a.fkrm-chip.on:link, .fkr-body a.fkrm-chip.on:visited{color:#fff}
html[data-dark=true] .fkr-body a.fkrm-chip.on:link, html[data-dark=true] .fkr-body a.fkrm-chip.on:visited{color:#eef4fb}
.fkr-body a.fkrm-sub:link, .fkr-body a.fkrm-sub:visited{color:var(--ink2)}
html[data-dark=true] .fkr-body a.fkrm-sub:link, html[data-dark=true] .fkr-body a.fkrm-sub:visited{color:#dfe4ea}
.fkr-body a.fkrm-sub.on:link, .fkr-body a.fkrm-sub.on:visited{color:#fff}
html[data-dark=true] .fkr-body a.fkrm-sub.on:link, html[data-dark=true] .fkr-body a.fkrm-sub.on:visited{color:#eef4fb}
.fkr-body a.fkrm-fl-manage:link, .fkr-body a.fkrm-fl-manage:visited{color:var(--ink2)}
.fkr-body .fkrm-cpg a:link, .fkr-body .fkrm-cpg a:visited{color:var(--chip-tx)}
.fkr-body .fkrm-cpg a.on:link, .fkr-body .fkrm-cpg a.on:visited{color:var(--on-tx)}
.fkr-body a.fkrm-banner:link, .fkr-body a.fkrm-banner:visited{color:inherit}

/* 팔로잉 관리 — 다크에서 검색창이 페이지 배경과 겹쳐 구멍처럼 보임 → 살짝 밝은 박스 + 또렷한 테두리 */
html[data-dark=true] .fkr-body .fkr-fsearch{background:#34363a;border-color:#4a4c50}
.fkr-body .fkr-fsearch input::placeholder{color:var(--sub)}
/* 구 모바일 CSS 가 input 자체에 어두운 배경·테두리를 입혀 알약 안에 검은 박스가 중첩됨 → 강제 투명화 */
.fkr-body .fkr-fsearch input, .fkr-body .fkr-fsearch input[type=text]{background:transparent !important;border:0 !important;box-shadow:none !important;-webkit-appearance:none;appearance:none;height:auto !important;padding:0 !important;margin:0 !important;border-radius:0}

/* 팔로잉 관리 — 모바일 폭 보정 (mobile_friend_* in-place) */
@media (max-width:640px){
  .fkr-body .fkr-frow{flex-wrap:wrap;gap:8px;padding:10px 6px}
  .fkr-body .fkr-fact{width:100%;justify-content:flex-end;gap:6px}
  .fkr-body .fkr-freg{display:none}
  .fkr-body .fkr-ftabs{gap:12px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}
  .fkr-body .fkr-ftabs::-webkit-scrollbar{width:0;height:0;display:none}
  .fkr-body .fkr-ftab{font-size:13px}
}

/* 찜한 자료 — 모바일 행 (my_list01 in-place, PC fkr-bkrow 컴팩트판) */
.fkr-body .fkrm-bkrow{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer;background:var(--card)}
.fkr-body .fkrm-bkrow .th{width:92px;height:52px;border-radius:7px;background:var(--thumb);overflow:hidden;flex-shrink:0}
.fkr-body .fkrm-bkrow .th img{width:100%;height:100%;object-fit:cover;display:block}
.fkr-body .fkrm-bkrow .bd{min-width:0;flex:1}
.fkr-body .fkrm-bkrow .t{font-size:13px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fkr-body .fkrm-bkrow .m{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11px;color:var(--sub);flex-wrap:wrap}
.fkr-body .fkrm-bkrow .m .chip{background:var(--blue-soft);color:var(--blue-ink);font-size:10px;font-weight:700;border-radius:4px;padding:1px 6px}
.fkr-body .fkrm-bkrow .m .seller{color:var(--sub);font-weight:600}
.fkr-body .fkrm-bkrow .m .ago{font-size:10.5px;color:var(--sub)}
.fkr-body .fkrm-bkrow .m .ago .hh{color:var(--adult)}
.fkr-body .fkrm-bkrow .fkr-bkheart{width:36px;height:36px}
.fkr-body .fkrm-bkrow .fkr-bkheart svg{width:16px;height:16px}
.fkr-body .fkrm-bkrow:has(.fkr-bkheart.off){opacity:.55}

/* 찜한 자료 — 보기형태 3종 (카테고리 쿠키 TOP_cont_list_view_type 공유) */
.fkr-body .fkr-bklist.list .fkr-bkrow{padding:9px 14px;margin-bottom:8px}
.fkr-body .fkr-bklist.list .fkr-bkrow .th{display:none}
.fkr-body .fkr-bklist.list .fkr-bkheart{width:36px;height:36px}
.fkr-body .fkr-bklist.list .fkr-bkheart svg{width:17px;height:17px}
.fkr-body .fkr-bklist.gall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fkr-body .fkr-bklist.gall .fkr-bkrow{flex-direction:column;align-items:stretch;gap:9px;padding:10px;margin-bottom:0;position:relative}
.fkr-body .fkr-bklist.gall .fkr-bkrow .th{width:100%;height:auto;aspect-ratio:16/9}
.fkr-body .fkr-bklist.gall .fkr-bkrow .m{margin-top:5px;flex-wrap:wrap;gap:7px}
.fkr-body .fkr-bklist.gall .fkr-bkheart{position:absolute;top:16px;right:16px;width:34px;height:34px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.fkr-body .fkr-bklist.gall .fkr-bkheart svg{width:16px;height:16px}

/* 팔로잉 관리 — 메모 입력·버튼 변형 (시안) */
.fkr-body .fkr-fmemo2{display:flex;align-items:center;gap:5px;margin-top:4px}
.fkr-body .fkr-fmemo2 input{border:none;border-bottom:1px dashed var(--line);background:transparent;outline:none;font:inherit;font-size:11.5px;color:var(--sub);padding:1px 2px;width:220px}
.fkr-body .fkr-fmemo2 input:focus{border-bottom-color:var(--brand);color:var(--ink)}
.fkr-body .fkr-fa.solid{background:var(--brand);color:#fff;border-color:var(--brand)}
.fkr-body .fkr-fa.solid:hover{color:#fff}

/* 판매자 지정 제목색 — 라이트/다크 라이브 토글 (kukir_main_top_list 2026-07-21 방식) */
.fkr-body .fkr-tc{ --tc: var(--lc); color: var(--tc) !important; }
html[data-dark=true] .fkr-body .fkr-tc{ --tc: var(--dc); }

/* 성인 콘텐츠 썸네일 — 본문 첫 이미지를 쓰므로 상단 기준 크롭 (구 목록 동일 처리) */
.fkr-body .fkr-ad-th img, .fkr-body .fkrm-ad-th img{ object-fit:cover; object-position:0% 0%; }

/* 홈 카드 가격 — contents_price_chk 응답(<li><span class=cashvv_*>)을 인라인으로 표시 */
.fkr-body .fkr-price-i{display:inline;list-style:none;margin:0;padding:0}
.fkr-body .fkr-price-i li{display:inline;list-style:none}
.fkr-body .fkr-price-i .cashvv_st1{color:inherit;font-weight:700}
.fkr-body .fkr-price-i .cashvv_st2{color:var(--free);font-weight:800}

/* 무료·할인관 배지도 같은 응답으로 채워진다 — li/span 을 배지 안에 인라인으로 눕히고 색은 배지 색 상속 */
.fkr-body .fkr-vcard .badge li, .fkr-body .fkrm-vcard .badge li{display:inline;list-style:none;margin:0;padding:0}
.fkr-body .fkr-vcard .badge .cashvv_st1, .fkr-body .fkr-vcard .badge .cashvv_st2,
.fkr-body .fkrm-vcard .badge .cashvv_st1, .fkr-body .fkrm-vcard .badge .cashvv_st2{color:inherit;font-weight:inherit}
/* 응답 도착 전(빈 배지)에는 배경만 남지 않도록 숨김 */
.fkr-body .badge:empty{display:none}