@charset "UTF-8";
/* ============================================================
   파일쿠키 리뉴얼 — PC 스타일
   디자인 출처: 핸드오프 "파일쿠키 홈.dc.html" / "파일쿠키 카테고리.dc.html"
                / "파일쿠키 친구관리.dc.html" (2026-07-24 hifi)
   수치는 핸드오프 인라인 스타일 그대로. 임의 변경 금지.
   로컬 전용 (wwwroot/renewal/)
   ============================================================ */

/* 핸드오프 PC 프레임 1180px, 좌우 padding 24px → 콘텐츠 1132px */
:root{ --fkr-w:1132px; }

body.fkr-pc{ background:var(--bg); }

/* ============================================================
   1. 유틸바 (로고 · 검색 · 다크토글 · 무료혜택 · 충전샵 · 마이)
   ============================================================ */
.fkr-utilbar{
  background:var(--card);
  border-bottom:1px solid var(--line);
}
.fkr-utilbar-in{
  max-width:var(--fkr-w);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:15px;
  height:58px;
}
.fkr-logo-pc{ font-size:19px; }
.fkr-logo-pc .k{ width:25px;height:25px;font-size:14px; }
.fkr-logo:hover{ color:var(--ink); }

.fkr-search{
  flex:1;margin:0 30px;  /* max-width 제거 — 로고~우측 유틸 사이를 검색창이 가득 채움 */
  background:var(--card2);border:1px solid var(--line);border-radius:22px;
  height:42px;display:flex;align-items:center;padding:0 5px 0 17px;
  color:var(--sub);font-size:13.5px;gap:9px;cursor:pointer;
}
.fkr-search .ph{ flex:1; }
input.fkr-search-q, .fkr-search input.ph{
  flex:1;min-width:0;background:transparent;border:none;outline:none;
  font:inherit;font-size:13.5px;color:var(--ink);
}
.fkr-search input.ph::placeholder{ color:var(--sub); }
.fkr-search button.go{ border:none;cursor:pointer;padding:0; }
.fkr-search .go{
  width:36px;height:34px;border-radius:18px;background:var(--on-bg);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

.fkr-dn-pc{ width:46px;height:24px;background:#cfd6e0;margin-left:auto; } /* 우측 유틸 그룹(다크토글~마이)을 컨테이너 우측 끝에 밀착 */
[data-dark="true"] .fkr-dn-pc{ background:#3c6ea8; }
.fkr-dn-pc .knob{ width:18px;height:18px; }
[data-dark="true"] .fkr-dn-pc .knob{ transform:translateX(22px); }

.fkr-util-txt{
  flex-shrink:0;font-size:13.5px;font-weight:700;color:var(--ink2);cursor:pointer;
}
.fkr-util-txt:hover{ color:var(--ink2); }
.fkr-util-pill{
  flex-shrink:0;background:var(--on-bg);color:var(--on-tx);
  font-size:13.5px;font-weight:800;padding:8px 16px;border-radius:8px;cursor:pointer;
}
.fkr-util-pill:hover{ color:var(--on-tx); }
.fkr-util-my{
  flex-shrink:0;display:flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:var(--ink2);cursor:pointer;
}
.fkr-util-my:hover{ color:var(--ink2); }
.fkr-util-my .av{
  width:25px;height:25px;border-radius:50%;
  background:linear-gradient(135deg,#2f80ed,#8a4bff);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;flex-shrink:0;
}

/* ============================================================
   2. 카테고리 GNB 바
   ============================================================ */
.fkr-catbar{ background:var(--catbar); }
.fkr-catbar-in{
  /* 폭 = 유틸바(1132) + 양끝 알약 패딩 15px 안전 여백 — 끝 항목 음수마진이 잘리지 않게 */
  max-width:calc(var(--fkr-w) + 30px);margin:0 auto;padding:0 15px;
  display:flex;align-items:center;gap:4px;height:50px;
  overflow-x:auto;justify-content:space-between;
}
/* 첫/끝 항목의 알약 패딩만큼 당겨서 위 유틸바(로고~마이)와 좌우 라인 일치 */
.fkr-catbar-in .fkr-catitem:first-child{margin-left:-15px}
.fkr-catbar-in .fkr-catitem:last-child{margin-right:-15px}
.fkr-catitem{
  display:flex;align-items:center;gap:3px;
  font-size:15px;font-weight:700;
  color:rgba(255,255,255,.95);
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  padding:7px 15px;border-radius:18px;background:transparent;
  transition:background .2s;letter-spacing:.01em;
}
.fkr-catitem:hover{ color:rgba(255,255,255,.95);background:rgba(255,255,255,.12); }
.fkr-catitem.on{ color:#0566db;background:#fff; }
.fkr-catitem.on:hover{ color:#0566db;background:#fff; }
[data-dark="true"] .fkr-catitem.on{ color:var(--on-tx);background:var(--on-bg); }
[data-dark="true"] .fkr-catitem.on:hover{ color:var(--on-tx);background:var(--on-bg); }

/* ============================================================
   3. 공통 레이아웃
   ============================================================ */
.fkr-wrap{ max-width:var(--fkr-w);margin:0 auto;padding:18px 0 8px; }
.fkr-card{ background:var(--card);border-radius:12px;padding:16px 18px; }
.fkr-sec-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-bottom:8px;flex-wrap:wrap;
}
.fkr-sec-title{ font-size:18px;font-weight:800;color:var(--ink);white-space:nowrap; }
.fkr-more{ font-size:12.5px;color:var(--blue);font-weight:700;cursor:pointer;white-space:nowrap; }

.fkr-chip{
  padding:6px 13px;border-radius:16px;font-size:12.5px;font-weight:700;
  white-space:nowrap;cursor:pointer;
  background:var(--chip-bg);color:var(--chip-tx);border:1px solid var(--chip-line);
}
.fkr-chip.on{ background:var(--on-bg);color:var(--on-tx);border-color:var(--on-bg); }
.fkr-chip.on.adult{ background:var(--adult);color:#fff;border-color:var(--adult); }

/* ============================================================
   4. 홈 — 상단 배너 (3장 크로스페이드)
   ============================================================ */
.fkr-banner{
  max-width:var(--fkr-w);margin:20px auto 0;height:118px;  /* 섹션 폭(1132)과 일치 */
  border-radius:14px;overflow:hidden;position:relative;cursor:pointer;
}
.fkr-banner .grad{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.fkr-banner .grad.on{opacity:1}
.fkr-banner .inner{position:relative;z-index:1;height:100%;display:flex;align-items:center}
.fkr-banner .imgwrap{
  position:relative;height:100%;width:337px;flex-shrink:0;
  -webkit-mask-image:linear-gradient(to right,#000 76%,transparent);
  mask-image:linear-gradient(to right,#000 76%,transparent);
}
.fkr-banner .imgwrap img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .8s ease;
}
.fkr-banner .imgwrap img.on{opacity:1}
.fkr-banner .txtwrap{flex:1;position:relative;align-self:stretch}
.fkr-banner .txt{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 32px 0 6px;color:#fff;opacity:0;transition:opacity .7s ease;pointer-events:none;
}
.fkr-banner .txt.on{opacity:1;pointer-events:auto}
.fkr-banner .eyebrow{font-size:13px;font-weight:700;opacity:.9}
.fkr-banner .title{font-size:22px;font-weight:800;margin-top:5px;letter-spacing:-.01em;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.fkr-banner .cta{
  background:#fff;color:#12233a;font-size:14px;font-weight:800;padding:11px 24px;border-radius:10px;
  white-space:nowrap;flex-shrink:0;box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.fkr-banner .cta:hover{color:#12233a}
.fkr-banner .dots{
  position:absolute;z-index:2;left:50%;bottom:9px;transform:translateX(-50%);
  display:flex;gap:6px;align-items:center;
}
.fkr-banner .dots span{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);
  cursor:pointer;transition:all .3s;display:block;
}
.fkr-banner .dots span.on{width:18px;height:6px;border-radius:6px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}

/* ============================================================
   5. 홈 — 실시간 인기 + 롤링 포스터
   ============================================================ */
.fkr-toprow{display:flex;align-items:stretch}
.fkr-pop{background:var(--card);border-radius:12px;padding:16px 18px;flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.fkr-pop .chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
#fkrPopList{flex:1;display:flex;flex-direction:column}
.fkr-pop-row{display:flex;gap:14px;padding:4px 0;align-items:center;border-bottom:1px solid var(--line);flex:1;min-height:48px;transition:height .45s ease;overflow:hidden}
.fkr-pop-row.fkr-in{animation:fkrRowIn .4s ease}
@keyframes fkrRowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fkr-pop-row.hide{display:none}
.fkr-pop-row .rank{width:24px;text-align:center;font-size:16.5px;font-weight:800;color:var(--blue);flex-shrink:0}
.fkr-pop-row .th{position:relative;width:88px;height:50px;border-radius:6px;background:var(--thumb);flex-shrink:0;overflow:hidden}
.fkr-pop-row .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fkr-pop-row .b19{
  position:absolute;right:2px;bottom:2px;width:14px;height:14px;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;
}
.fkr-pop-row .meta{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.fkr-pop-row .t{flex:1;min-width:0;font-size:15px;color:var(--ink2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fkr-pop-row .m{font-size:12.5px;color:var(--sub);margin-top:0;flex-shrink:0;white-space:nowrap}
.fkr-pop-more{margin-top:14px;display:flex;gap:8px;align-items:stretch}
.fkr-pop-more .btn{
  flex:1;border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;
  font-size:13.5px;font-weight:700;color:var(--ink2);cursor:pointer;background:var(--card2);user-select:none;
}
.fkr-pop-more .fold{
  flex-shrink:0;border:1px solid var(--line);border-radius:10px;padding:12px 18px;
  font-size:12.5px;font-weight:700;color:var(--sub);cursor:pointer;background:var(--card2);
  user-select:none;display:none;align-items:center;gap:3px;
}
.fkr-pop-more .fold.show{display:flex}

.fkr-hero{
  border-radius:12px;overflow:hidden;position:relative;
  background:linear-gradient(158deg,#15294c,#3a1e6e);
  /* 우측 배너 = 266:375 비율 기준 자연 크기 폭 300px (2026-07-27) — 높이는 좌측 5행 리스트에 자동 맞춤(stretch) */
  /* 사이드 컬럼 안 고정 크기 — 266:375 비율, 리스트가 길어져도 불변 */
  width:300px;height:423px;flex-shrink:0;
  transition:width .5s ease,margin-left .5s ease,opacity .45s ease,transform .5s ease;
  display:flex;flex-direction:column;
}
.fkr-hero.out{width:0;margin-left:0;opacity:0;transform:translateX(24px)}
.fkr-hero .stage{position:relative;flex:1;overflow:hidden}
.fkr-hero .stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .7s ease;
}
.fkr-hero .stage img.on{opacity:1}
.fkr-hero .cap{
  position:absolute;left:0;right:0;bottom:0;padding:64px 18px 16px;
  background:linear-gradient(transparent,rgba(0,0,0,.9));
  pointer-events:none; /* [2026-08-05] 캡션이 포스터 클릭(상세 이동)을 막지 않게 — 닷만 클릭 유지 */
}
.fkr-hero .cap .dots{pointer-events:auto}
.fkr-hero .cap .lb{color:rgba(255,255,255,.85);font-size:11.5px;font-weight:700;margin-bottom:4px}
.fkr-hero .cap .tt{color:#fff;font-size:22px;font-weight:800;text-shadow:0 1px 6px rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fkr-hero .cap .dots{display:flex;gap:6px;margin-top:13px}
.fkr-hero .cap .dots span{width:7px;height:6px;border-radius:3px;background:rgba(255,255,255,.45);cursor:pointer;display:inline-block;transition:all .3s}
.fkr-hero .cap .dots span.on{width:20px;background:#fff}

/* ============================================================
   6. 홈 — 공통 섹션 카드
   ============================================================ */
.fkr-sec{margin-top:18px}
.fkr-sec2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch;margin-top:18px}
.fkr-sec2>.fkr-box{min-width:0}
.fkr-box{background:var(--card);border-radius:12px;padding:16px 18px}
.fkr-box.col{display:flex;flex-direction:column}
.fkr-box-title{
  font-size:17px;font-weight:800;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;
}
.fkr-chiprow{display:flex;gap:7px;margin:12px 0 6px;flex-wrap:wrap}
.fkr-chip.sm{font-size:12px}

/* BJ LIVE 마퀴 */
.fkr-bj-track{overflow:hidden;margin-top:12px;flex:1;display:flex;align-items:flex-start}
.fkr-bj-roll{display:flex;gap:14px;width:max-content;animation:fkroll 45s linear infinite}
.fkr-bj{flex-shrink:0;width:236px;cursor:pointer}
.fkr-bj .th{
  position:relative;width:236px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:#fff;display:flex;align-items:center;justify-content:center;
}
.fkr-bj .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.fkr-bj .live{
  position:absolute;left:7px;top:7px;background:var(--adult);color:#fff;font-size:9px;font-weight:800;
  padding:2px 7px;border-radius:4px;display:flex;align-items:center;gap:4px;
}
.fkr-bj .live i{width:5px;height:5px;border-radius:50%;background:#fff;display:inline-block;animation:fkpulse 1.4s infinite}
.fkr-bj .play{
  width:38px;height:38px;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;
}
.fkr-bj .b19{
  position:absolute;left:7px;bottom:7px;width:16px;height:16px;border-radius:50%;
  background:var(--adult);color:#fff;font-size:9px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;
}
.fkr-bj .view{
  position:absolute;right:7px;bottom:7px;background:rgba(0,0,0,.7);color:#fff;
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;
}
.fkr-bj .who{display:flex;align-items:center;gap:7px;margin-top:8px}
.fkr-bj .who .av{
  width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#2f80ed,#8a4bff);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;
}
.fkr-bj .who .nm{font-size:12.5px;font-weight:700;color:var(--ink2)}
.fkr-bj .tt{font-size:11px;color:var(--sub);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:236px}

/* 판매순위 행 */
.fkr-sale-row{display:flex;gap:11px;padding:8px 0;align-items:center;border-bottom:1px solid var(--line)}
.fkr-sale-row.hide{display:none}
.fkr-sale-row .rank{width:18px;text-align:center;font-size:15px;font-weight:800;color:var(--blue);flex-shrink:0}
.fkr-sale-row .th{position:relative;width:140px;height:79px;border-radius:8px;background:var(--thumb);flex-shrink:0;overflow:hidden}
.fkr-sale-row .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fkr-sale-row .b19{
  position:absolute;right:3px;bottom:3px;width:14px;height:14px;border-radius:50%;
  background:var(--adult);color:#fff;font-size:8px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:1px solid #fff;
}
.fkr-sale-row .t{font-size:15.5px;color:var(--ink2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fkr-sale-row .m{font-size:12.5px;color:var(--sub);margin-top:2px}

/* 팔로잉 행 */
/* [2026-08-05] 팔로잉 행 = 주간 판매순위 행과 크기 통일 (썸네일 140×79·패딩 8px) */
.fkr-fl-row{cursor:pointer;display:flex;gap:11px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.fkr-fl-row.hide{display:none}
.fkr-fl-row .th{position:relative;width:140px;height:79px;flex-shrink:0;border-radius:8px;background:var(--thumb);overflow:hidden}
.fkr-fl-row .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fkr-fl-row .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;
}
.fkr-fl-row .dur{
  position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.72);color:#fff;
  font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:4px;
}
.fkr-fl-row .t{font-size:15.5px;color:var(--ink2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* [2026-08-05] 판매순위 행과 통일 */
.fkr-fl-row .m{font-size:12.5px;color:var(--sub);margin-top:2px}
.fkr-fl-manage{
  display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ink2);font-weight:700;
  border:1px solid var(--chip-line);background:var(--chip-bg);padding:5px 11px;border-radius:16px;
}
.fkr-fl-manage:hover{color:var(--ink2)}

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

/* 무료·할인관 / 최신 업로드 카드 그리드 */
.fkr-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:12px}
.fkr-vcard{cursor:pointer;min-width:0}
.fkr-vcard.hide{display:none}
.fkr-vcard .th{position:relative;width:100%;aspect-ratio:16/9;border-radius:9px;background:var(--thumb);overflow:hidden}
.fkr-vcard .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fkr-vcard .badge{position:absolute;left:6px;top:6px;color:#fff;font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:4px}
.fkr-vcard .badge.free{background:var(--free)}
.fkr-vcard .badge.blue{background:var(--blue)}
.fkr-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;z-index:2;
}
.fkr-vcard .dur{
  position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.72);color:#fff;
  font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:4px;z-index:2;
}
.fkr-vcard .t{font-size:12.5px;color:var(--ink2);font-weight:600;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fkr-vcard .m{font-size:11px;color:var(--sub);margin-top:2px}
.fkr-vcard .m b.free{color:var(--free);font-weight:800}
.fkr-vcard .m b.blue{color:var(--blue-ink);font-weight:800}

/* 페이징 */
.fkr-pg{display:flex;justify-content:center;gap:6px;margin-top:14px}
.fkr-pg span{
  min-width:28px;height:28px;padding:0 8px;border-radius:7px;
  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);
}
.fkr-pg span.on{background:var(--on-bg);color:var(--on-tx);border-color:var(--on-bg)}

/* ============================================================
   7. 홈 — 올린자료 관리 / 보관함 / 매거진
   ============================================================ */
.fkr-sec-my{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:stretch;margin-top:18px}
.fkr-sec-my.one{grid-template-columns:1fr}
/* 우측 사이드 컬럼 (배너 + 매거진) */
.fkr-side{width:300px;flex-shrink:0;margin-left:18px;display:flex;flex-direction:column;gap:18px;transition:width .5s ease,margin-left .5s ease,opacity .45s ease,transform .5s ease;overflow:hidden}
.fkr-side.out{width:0;margin-left:0;opacity:0;transform:translateX(24px)}
/* 사이드 매거진 = 제 크기 (3:4 표지, 폭 230 중앙 정렬) — 리스트 행이 이 높이에 맞춰 늘어남 */
.fkr-side .fkr-box{flex:0 0 auto;display:flex;flex-direction:column}
.fkr-side .fkr-mag-stage{display:flex;flex-direction:column;margin-top:8px}
.fkr-side .fkr-mag-frame{aspect-ratio:3/4;width:230px;margin:0 auto}
.fkr-side .fkr-chiprow{margin:8px 0 2px !important}
.fkr-side .fkr-dots{margin-top:10px !important}
.fkr-side .fkr-mag-cap{font-size:11.5px}
.fkr-seg{display:inline-flex;background:var(--chip-bg);border:1px solid var(--chip-line);border-radius:9px;padding:2px;gap:2px}
.fkr-seg span{padding:5px 12px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;background:transparent;color:var(--sub)}
.fkr-seg span.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.fkr-btn-primary{
  display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;
  color:var(--on-tx);background:var(--on-bg);padding:6px 13px;border-radius:8px;cursor:pointer;
}
.fkr-btn-primary:hover{color:var(--on-tx)}
.fkr-stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 6px}
.fkr-stat{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:13px 16px;cursor:pointer}
.fkr-stat.on{background:rgba(5,102,219,.07);border:1.5px solid var(--brand)}
.fkr-stat .lb{font-size:11.5px;color:var(--sub);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.fkr-stat .vl{font-size:21px;font-weight:800;color:var(--ink);margin-top:3px}
.fkr-stat .vl.red{color:var(--adult)}
.fkr-stat .vl small{font-size:12px;font-weight:600;color:var(--sub)}
.fkr-thead,.fkr-trow{gap:10px;padding:10px 4px;border-bottom:1px solid var(--line)}
.fkr-thead{display:grid;font-size:11.5px;color:var(--sub);font-weight:700}
.fkr-trow{display:grid;align-items:center;padding:11px 4px}
.fkr-trow.hide{display:none}
/* [2026-08-10] 쪽지 행 — 인라인 style 대신 클래스로. .hide 가 확실히 이기도록 뒤에 선언 */
.fkr-msgrow{display:flex;justify-content:space-between;gap:12px;cursor:pointer}
.fkr-msgrow.hide{display:none}
.fkr-cols-up{grid-template-columns:1fr 160px 168px}
.fkr-cols-buy{grid-template-columns:1fr 150px 110px}
.fkr-cols-fl{grid-template-columns:1fr 110px}
.fkr-tfile{display:flex;gap:11px;align-items:center;min-width:0}
.fkr-tfile .th{width:74px;height:44px;flex-shrink:0;border-radius:7px;overflow:hidden;background:var(--thumb)}
.fkr-tfile .th img{width:100%;height:100%;object-fit:cover;display:block}
.fkr-tfile .t{font-size:13px;color:var(--ink2);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fkr-tfile .d{font-size:11px;color:var(--sub);margin-top:3px}
.fkr-pill{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px}
.fkr-pill.svc{background:rgba(5,102,219,.12);color:var(--brand)}
.fkr-pill.rev{background:rgba(230,150,20,.15);color:#d98a12}
[data-dark="true"] .fkr-pill.rev{color:#f0a93a}
.fkr-pill.del{background:rgba(224,52,52,.13);color:var(--adult)}
.fkr-pill.type{font-size:10.5px;padding:4px 9px;background:var(--card2);color:var(--sub);border:1px solid var(--line)}
.fkr-pill.type.pt{background:rgba(120,80,220,.13);color:#7a4bd1}
[data-dark="true"] .fkr-pill.type.pt{color:#b18bf0}
.fkr-tact{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.fkr-abtn{font-size:11.5px;font-weight:700;padding:6px 13px;border-radius:8px;background:var(--card2);color:var(--ink2);border:1px solid var(--line);cursor:pointer}
.fkr-abtn.red{color:var(--adult)}
.fkr-abtn.solid{font-size:12px;padding:7px 15px;background:var(--brand);color:#fff;border-color:var(--brand)}
.fkr-heart{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  background:var(--card2);color:var(--adult);cursor:pointer;
}
.fkr-av40{
  width:40px;height:40px;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;
}

/* 매거진 */
.fkr-mag-stage{position:relative;flex:1;margin-top:8px}
.fkr-mag-frame{position:relative;width:100%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.fkr-mag{
  position:absolute;inset:0;opacity:0;transition:opacity .6s ease;
  display:flex;flex-direction:column;justify-content:space-between;padding:22px 20px;
}
.fkr-mag.on{opacity:1}
.fkr-mag .wm{color:#fff;font-size:34px;font-weight:800;letter-spacing:.04em;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.fkr-mag .no{color:#fff;font-size:26px;font-weight:800}
.fkr-mag .sub{color:rgba(255,255,255,.9);font-size:13px;font-weight:700;letter-spacing:.16em;margin-top:4px}
.fkr-mag .b19{
  position:absolute;right:14px;top:14px;width:24px;height:24px;border-radius:50%;
  background:var(--adult);color:#fff;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.9);
}
.fkr-mag-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:18px;
}
.fkr-mag-nav.prev{left:10px}
.fkr-mag-nav.next{right:10px}
.fkr-mag-cap{font-size:13px;color:var(--ink2);font-weight:700;margin-top:12px;text-align:center}

/* 푸터 */
.fkr-foot{
  padding:26px 24px;background:var(--card2);border-top:1px solid var(--line);
  color:var(--sub);font-size:12px;text-align:center;line-height:1.9;margin-top:20px;
}
.fkr-foot b{color:var(--ink2)}

/* 데이터 출처 표시 (로컬 전용) */
.fkr-src{
  max-width:var(--fkr-w);margin:12px auto 0;padding:8px 14px;border-radius:8px;
  background:var(--chip-bg);color:var(--chip-tx);font-size:11.5px;font-weight:700;
}

/* ============================================================
   8. 카테고리 목록
   디자인 출처: 핸드오프 "파일쿠키 카테고리.dc.html" PC 프레임 (L50~172)
   ============================================================ */
.fkr-cat-wrap{ max-width:var(--fkr-w);margin:0 auto;padding:18px 0; }

/* 소분류 알약 바 */
.fkr-subbar{ display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px; }
.fkr-sub{
  display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border-radius:6px;
  font-size:12.5px;font-weight:700;cursor:pointer;
  background:var(--card2);color:var(--ink2);border:1px solid rgba(5,102,219,.4);
}
.fkr-sub:hover{ color:var(--ink2); }
[data-dark="true"] .fkr-sub{ background:#4c4d4f;color:#e7e9ec;border-color:transparent; }
.fkr-sub.on,.fkr-sub.on:hover{ background:var(--btn);color:#fff;border-color:var(--btn); }
[data-dark="true"] .fkr-sub.on{ color:var(--btn-tx); }

/* 툴바 */
.fkr-toolbar{
  display:flex;align-items:center;gap:12px;
  padding-bottom:13px;border-bottom:2px solid var(--line);
}
.fkr-crumb{ font-size:15px;font-weight:800;color:var(--ink); }
.fkr-crumb .cnt{ font-size:13px;font-weight:600;color:var(--sub); }
.fkr-check{
  display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink2);font-weight:600;cursor:pointer;
  user-select:none;
}
.fkr-check .box{
  width:16px;height:16px;border-radius:4px;border:2px solid var(--line);background:transparent;
  display:flex;align-items:center;justify-content:center;
}
.fkr-check .box svg{ display:none; }
.fkr-check.on .box{ border-color:var(--btn);background:var(--btn); }
.fkr-check.on .box svg{ display:block; }
.fkr-tggroup{ display:flex;background:var(--card2);border:1px solid var(--line);border-radius:8px;overflow:hidden; }
.fkr-tggroup span,.fkr-tggroup a{
  padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer;
  background:transparent;color:var(--ink2);
}
.fkr-tggroup a:hover{ color:var(--ink2); }
.fkr-tggroup span.on,.fkr-tggroup a.on,.fkr-tggroup a.on:hover{ background:var(--btn);color:#fff; }
[data-dark="true"] .fkr-tggroup span.on,[data-dark="true"] .fkr-tggroup a.on{ color:var(--btn-tx); }
.fkr-tggroup.rc span,.fkr-tggroup.rc a{ padding:7px 11px; }

/* 갤러리형 */
.fkr-gal{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px 16px;margin-top:18px; }
.fkr-gal .it{ cursor:pointer; }
.fkr-gal .th{ position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--thumb); }
.fkr-gal .th img{ width:100%;height:100%;object-fit:cover;display:block; }
.fkr-gal .b19{
  position:absolute;bottom:7px;right:7px;width:21px;height:21px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1.5px solid #ff4d6d;color:#ff5573;
  font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.fkr-gal .t{
  font-size:13px;font-weight:700;color:var(--ink);margin-top:8px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fkr-gal .meta{ display:flex;align-items:center;gap:8px;margin-top:5px;font-size:11.5px; }
.fkr-gal .meta .pr{ color:var(--acc);font-weight:800; }
.fkr-gal .meta .sz,.fkr-gal .meta .du{ color:var(--sub); }

/* 표 공통 (썸네일형 / 리스트형) */
.fkr-lhead,.fkr-lrow{ display:flex;align-items:center;border-bottom:1px solid var(--line); }
.fkr-lhead{ padding:10px 6px;font-size:11.5px;color:var(--sub);font-weight:700; }
.fkr-lhead.thick{ border-bottom:2px solid var(--line); }
.fkr-lrow{ cursor:pointer; }
.fkr-lrow.thumb{ padding:11px 6px; }
.fkr-lrow.list{ padding:12px 6px; }
.fkr-lc-sub{ width:90px;text-align:center;flex-shrink:0;font-size:11.5px;color:var(--acc);font-weight:700; }
.fkr-lc-size{ width:90px;text-align:center;flex-shrink:0;font-size:12px;color:var(--sub); }
.fkr-lc-price{ width:110px;text-align:center;flex-shrink:0;font-size:12.5px;font-weight:800;color:var(--ink); }
.fkr-lc-price.free{ color:var(--free); }
.fkr-lc-user{ width:110px;text-align:center;flex-shrink:0;font-size:12px;color:var(--ink2); }
.fkr-lc-dn{ width:74px;display:flex;justify-content:center;flex-shrink:0; }
.fkr-dnbtn{
  display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:8px;
  background:var(--btn);color:var(--btn-tx);cursor:pointer;
}
.fkr-ltitle{
  font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fkr-l19{
  display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  background:var(--adult);color:#fff;font-size:8.5px;font-weight:800;margin-right:4px;vertical-align:-2px;
}
.fkr-lthumb{ flex:1;display:flex;align-items:center;gap:12px;min-width:0; }
.fkr-lthumb .th{ width:76px;height:43px;flex-shrink:0;border-radius:6px;overflow:hidden;background:var(--thumb); }
.fkr-lthumb .th img{ width:100%;height:100%;object-fit:cover;display:block; }
.fkr-lthumb .dt{ font-size:11px;color:var(--sub);margin-top:3px; }

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

/* 법적 고지 푸터 */
.fkr-legal{ margin-top:26px;padding-top:18px;border-top:1px solid var(--line);text-align:center; }
.fkr-legal .l1{ font-size:11.5px;color:var(--sub);line-height:1.9; }
.fkr-legal .l2{ font-size:10.5px;color:var(--sub);line-height:1.7;margin-top:8px; }
.fkr-legal .l3{ font-size:10.5px;color:var(--sub);margin-top:10px; }

/* ============================================================
   9. 팔로잉 관리
   디자인 출처: 핸드오프 "파일쿠키 친구관리.dc.html" PC 프레임 (L96~172)
   ============================================================ */
.fkr-fw-outer{ background:var(--bg);padding:22px 24px; }
.fkr-fw{ max-width:var(--fkr-w);margin:0 auto;background:var(--card);border-radius:14px;padding:22px 24px; }
.fkr-fw-title{ font-size:19px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px; }

/* 탭 */
.fkr-ftabs{ display:flex;gap:2px;margin:16px 0 0;border-bottom:1px solid var(--line);flex-wrap:wrap; }
.fkr-ftab{
  position:relative;padding:11px 15px;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--sub);
}
.fkr-ftab:hover{ color:var(--sub); }
.fkr-ftab .n{ font-size:12px;color:var(--sub); }
.fkr-ftab .bar{ position:absolute;left:8px;right:8px;bottom:-1px;height:3px;border-radius:3px;background:transparent; }
.fkr-ftab.on,.fkr-ftab.on:hover{ color:var(--ink); }
.fkr-ftab.on .n{ color:var(--brand); }
.fkr-ftab.on .bar{ background:var(--brand); }

/* 툴바 */
.fkr-ftool{ display:flex;align-items:center;gap:8px;margin:16px 0 4px; }
.fkr-fsearch{
  flex:1;display:flex;align-items:center;gap:8px;
  background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:9px 13px;
}
.fkr-fsearch input{
  border:none;background:transparent;outline:none;flex:1;font-size:13px;color:var(--ink);
}
.fkr-fbtn{
  font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:9px;
  border:1px solid var(--line);background:var(--card2);color:var(--ink2);cursor:pointer;
}
.fkr-fbtn.red{ color:var(--adult); }
.fkr-fbtn.primary{
  display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;padding:9px 15px;
  border-radius:9px;background:var(--brand);color:#fff;border-color:var(--brand);
}
.fkr-fnote{ font-size:11.5px;color:var(--sub);margin:6px 0 2px; }

/* 표 */
.fkr-fhead{
  display:flex;align-items:center;padding:11px 6px;border-bottom:2px solid var(--line);
  font-size:11.5px;color:var(--sub);font-weight:700;margin-top:8px;
}
.fkr-frow{ display:flex;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line); }
.fkr-frow.gone{ display:none; }
.fkr-fchk{
  width:20px;height:20px;flex-shrink:0;border-radius:6px;border:2px solid var(--line);
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.fkr-fchk svg{ display:none; }
.fkr-fchk.on{ border-color:var(--brand);background:var(--brand); }
.fkr-fchk.on svg{ display:block; }
.fkr-fid{ flex:1;display:flex;align-items:center;gap:11px;min-width:0;padding-left:12px; }
.fkr-fav{
  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:12.5px;font-weight:800;
}
.fkr-fid .nm{ font-size:14px;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.fkr-fmemo{ display:flex;align-items:center;gap:6px;margin-top:4px; }
.fkr-fmemo input{
  border:none;border-bottom:1px dashed var(--line);background:transparent;outline:none;flex:1;
  font-size:11.5px;color:var(--ink2);padding:1px 0;
}
.fkr-freg{ width:130px;text-align:center;flex-shrink:0;font-size:12px;color:var(--sub); }
.fkr-fact{ width:290px;display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-shrink:0; }
.fkr-fa{
  font-size:11.5px;font-weight:700;padding:7px 12px;border-radius:8px;
  border:1px solid var(--line);background:var(--card2);color:var(--ink2);cursor:pointer;
}
.fkr-fa.brand{ border-color:var(--brand);background:var(--brand);color:#fff; }
.fkr-fa.danger{ border-color:var(--adult);background:transparent;color:var(--adult); }
.fkr-fa.wide{ padding:7px 15px; }
.fkr-fempty{ text-align:center;padding:52px 16px;color:var(--sub);font-size:13px; }

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

/* 페이징 (팔로잉) */
.fkr-fpg{ display:flex;justify-content:center;gap:6px;margin-top:20px; }
.fkr-fpg span{
  min-width:32px;height:32px;padding:0 9px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;cursor:pointer;
  background:transparent;color:var(--ink2);border:1px solid var(--line);
}
.fkr-fpg span.on{ background:var(--on-bg);color:var(--on-tx);border-color:var(--on-bg); }

/* ============================================================
   10. 랜딩 (index.jsp)
   ============================================================ */
.fkr-landing{ max-width:900px;margin:0 auto;padding:40px 24px 80px; }
.fkr-landing h1{ font-size:26px;font-weight:800;color:var(--ink);margin-bottom:6px; }
.fkr-landing .lead{ font-size:14px;color:var(--sub);font-weight:600;margin-bottom:28px;line-height:1.6; }
.fkr-landing h2{ font-size:16px;font-weight:800;color:var(--ink);margin:26px 0 12px; }
.fkr-ltable{ width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden; }
.fkr-ltable th,.fkr-ltable td{
  padding:13px 16px;font-size:13.5px;text-align:left;
  border-bottom:1px solid var(--line);color:var(--ink2);
}
.fkr-ltable th{ background:var(--card2);font-weight:800;color:var(--ink);font-size:12.5px; }
.fkr-ltable tr:last-child td{ border-bottom:0; }
.fkr-ltable a{ font-weight:700; }
.fkr-note{
  background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;font-size:12.5px;color:var(--sub);line-height:1.7;margin-top:18px;
}
.fkr-tag{
  display:inline-block;font-size:11px;font-weight:800;padding:2px 7px;border-radius:5px;
  background:var(--chip-bg);color:var(--chip-tx);
}
.fkr-tag.ok{ background:var(--free);color:#fff; }
.fkr-tag.wait{ background:var(--chip-bg);color:var(--chip-tx); }