@charset "utf-8";
/* ============================================================
   업로더 채널 (Uploader Channel) — PC
   핸드오프: design_handoff_uploader_channel/README.md
   · 색·타이포·간격은 핸드오프 수치를 그대로 사용
   · 토큰은 renewal/css/tokens_body.css 를 재사용하고, 핸드오프에만 있던
     이용권 밴드 토큰(--band-*) 4개만 여기서 보충한다
   ============================================================ */

:root{
  --band-bg:#0566db; --band-tx:#ffffff; --band-sub:rgba(255,255,255,.85);
  --band-btn:#ffffff; --band-btn-tx:#0566db;
}
html[data-dark=true]{
  --band-bg:#14263f; --band-tx:#ffffff; --band-sub:#b7c5d8;
  --band-btn:#1668d6; --band-btn-tx:#ffffff;
}

.fkc-wrap{ max-width:1132px; margin:0 auto; padding:18px 0 26px; display:flex; flex-direction:column; gap:18px; }

/* ── 배너 ── */
.fkc-banner{ position:relative; height:200px; border-radius:14px; overflow:hidden; background:var(--card2); }
.fkc-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.fkc-banner .ov{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,12,24,.55),rgba(6,12,24,.05)); }
/* 기본(브랜드) 배너 — 업로더가 배너를 올리기 전 상태. 로고는 늘리지 않고 가운데 정렬 */
.fkc-banner.default{ background:linear-gradient(110deg,#0a3f96 0%,#0566db 52%,#2f8ae8 100%); }
.fkc-banner.default .logo{
  width:auto; height:30px; object-fit:contain; position:absolute; left:28px; top:50%;
  transform:translateY(-50%); opacity:.96; filter:brightness(0) invert(1);
}
.fkc-banner.default .ov{ background:linear-gradient(90deg,rgba(6,12,24,.28),rgba(6,12,24,0)); }
html[data-dark=true] .fkc-banner.default{ background:linear-gradient(110deg,#0d1c33 0%,#14315c 52%,#1c4a86 100%); }
.fkc-bnedit{
  position:absolute; right:14px; top:14px; display:inline-flex; align-items:center; gap:5px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px); color:#fff; font-size:12px; font-weight:700;
  padding:7px 13px; border-radius:8px; cursor:pointer;
}

/* ── 프로필 카드 ── */
.fkc-prof{ background:var(--card); border-radius:12px; margin-top:-46px; position:relative; z-index:1; padding:0 22px 0; }
.fkc-prow{ display:flex; gap:18px; align-items:flex-start; padding-bottom:16px; }
.fkc-avt{
  width:104px; height:104px; border-radius:50%; margin-top:-46px; flex-shrink:0; position:relative;
  border:4px solid var(--card); background:linear-gradient(135deg,#2f80ed,#8a4bff);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:38px; font-weight:800;
}
.fkc-avt .cam{
  position:absolute; right:-2px; bottom:-2px; width:32px; height:32px; border-radius:50%;
  background:var(--card); border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center; color:var(--ink2); cursor:pointer;
}
.fkc-pmain{ flex:1; min-width:0; padding-top:14px; }
.fkc-pname{ display:flex; align-items:center; gap:8px; }
.fkc-pname b{ font-size:24px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.fkc-seller{ background:var(--blue-soft); color:var(--brand); font-size:11px; font-weight:800; padding:3px 9px; border-radius:6px; }
.fkc-handle{ font-size:13px; color:var(--sub); margin-top:3px; }
.fkc-chips{ display:flex; gap:7px; margin-top:11px; flex-wrap:wrap; }
.fkc-chip{
  background:var(--chip-bg); border:1px solid var(--chip-line); border-radius:16px; padding:4px 11px;
  display:inline-flex; align-items:center; gap:5px;
}
.fkc-chip .l{ font-size:11.5px; color:var(--sub); }
.fkc-chip .v{ font-size:12.5px; font-weight:800; color:var(--ink); }
.fkc-desc{ font-size:13.5px; color:var(--ink2); line-height:1.6; max-width:700px; margin-top:11px; }
.fkc-desc .edit{ font-size:11.5px; color:var(--sub); margin-left:8px; cursor:pointer; }
.fkc-desc.empty{ color:var(--sub); }

.fkc-pact{ display:flex; gap:8px; align-items:center; padding-top:16px; flex-shrink:0; }
.fkc-btn{
  font-size:14px; font-weight:800; padding:11px 20px; border-radius:9px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--line); background:var(--card2); color:var(--ink2); display:inline-flex; align-items:center; gap:6px;
}
.fkc-btn.primary{ background:var(--on-bg); color:var(--on-tx); border-color:var(--on-bg); }
.fkc-btn.following{ background:var(--card2); color:var(--ink2); border-color:var(--line); }
.fkc-ico{
  width:44px; height:44px; border-radius:9px; border:1px solid var(--line); background:var(--card2);
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink2); cursor:pointer; flex-shrink:0;
}

/* ── 탭 ── */
.fkc-tabs{ display:flex; gap:28px; border-top:1px solid var(--line); }
.fkc-tab{ font-size:15px; font-weight:800; color:var(--sub); padding:14px 2px; cursor:pointer; }
.fkc-tab.on{ color:var(--ink); box-shadow:inset 0 -2.5px 0 var(--brand); }

/* ── 공지 + 이용권 ── */
/* [2026-08-19] 공지 박스 제거로 1단 — 이용권 배너가 전폭을 쓴다.
   .fkc-notice 이하 규칙은 공지 저장 테이블이 생길 때 되살리려고 남겨둔다.
   복구 시 이 줄을 grid-template-columns:1fr 1fr 로 */
.fkc-duo{ display:grid; grid-template-columns:1fr; gap:14px; }
.fkc-notice{
  background:var(--card); border:1px solid var(--line); border-radius:11px; padding:13px 16px;
  display:flex; align-items:center; gap:9px; cursor:pointer; min-width:0;
}
.fkc-nbadge{ background:var(--blue-soft); color:var(--brand); font-size:10px; font-weight:800; padding:3px 7px; border-radius:5px; flex-shrink:0; }
.fkc-ntx{ flex:1; min-width:0; font-size:13px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fkc-ndate{ font-size:12px; color:var(--sub); flex-shrink:0; }
.fkc-band{
  background:var(--band-bg); border-radius:11px; padding:13px 16px; display:flex; align-items:center; gap:10px;
}
.fkc-band .t{ font-size:13px; color:var(--band-sub); flex:1; min-width:0; }
.fkc-band .t b{ color:var(--band-tx); font-weight:800; }
.fkc-band .go{
  background:var(--band-btn); color:var(--band-btn-tx); font-size:12.5px; font-weight:800;
  padding:7px 13px; border-radius:8px; cursor:pointer; white-space:nowrap;
}

/* ── 섹션 공통 ── */
.fkc-sec{ background:var(--card); border-radius:12px; padding:16px 18px; }
.fkc-sechead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; gap:10px; }
.fkc-sectitle{ font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.fkc-secsub{ font-size:12px; color:var(--sub); }
.fkc-more{ font-size:12.5px; font-weight:700; color:var(--blue); cursor:pointer; white-space:nowrap; }

/* ── 고정 콘텐츠 미설정 안내 ── */
.fkc-pinempty{
  border:1.5px dashed var(--chip-line); border-radius:12px; padding:26px 18px;
  display:flex; align-items:center; gap:16px; background:var(--card);
}
.fkc-pinicon{
  width:52px; height:52px; border-radius:12px; background:var(--card2); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--sub);
}
.fkc-pinicon svg{ transform:rotate(-40deg); }
.fkc-pinbody{ flex:1; min-width:0; }
.fkc-pinbody .t{ font-size:15px; font-weight:800; color:var(--ink); }
.fkc-pinbody .d{ font-size:13px; color:var(--sub); margin-top:5px; line-height:1.6; }
.fkc-pinbody .n{ font-size:12px; color:var(--sub); margin-top:9px; padding-top:9px; border-top:1px solid var(--line); }
.fkc-pinbody .n b{ color:var(--adult); font-weight:800; }

/* ── 콘텐츠 그리드 ── */
.fkc-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.fkc-vcard{ cursor:pointer; }
.fkc-vth{ position:relative; aspect-ratio:16/9; border-radius:9px; overflow:hidden; background:var(--card2); }
.fkc-vth img{ width:100%; height:100%; object-fit:cover; display:block; }
.fkc-v19{
  position:absolute; left:7px; bottom:7px; 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;
}
.fkc-vdur{
  position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.72); color:#fff;
  font-size:9.5px; font-weight:700; padding:2px 5px; border-radius:4px;
}
.fkc-vtitle{
  font-size:12.5px; font-weight:600; color:var(--ink2); line-height:1.35; margin-top:8px;
  height:34px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.fkc-vmeta{ font-size:11px; color:var(--sub); margin-top:5px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.fkc-vmeta .price{ color:var(--ink); font-weight:800; }
.fkc-vmeta .free{ color:var(--free); font-weight:700; }

/* ── 더보기 / 접기 ── */
.fkc-moreRow{ display:flex; gap:8px; align-items:center; margin-top:16px; }
.fkc-morebtn{
  flex:1; background:var(--card2); border:1px solid var(--line); border-radius:9px;
  padding:12px; font-size:13.5px; font-weight:800; color:var(--ink2); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.fkc-morebtn .cap{ font-size:11.5px; font-weight:600; color:var(--sub); }
.fkc-morebtn .car{ transition:transform .25s ease; }
.fkc-morebtn.open .car{ transform:rotate(180deg); }
.fkc-foldbtn{
  background:var(--card2); border:1px solid var(--line); border-radius:9px; padding:12px 16px;
  font-size:13px; font-weight:800; color:var(--ink2); cursor:pointer; white-space:nowrap;
}

/* ── 정렬 칩 ── */
.fkc-sorts{ display:flex; gap:6px; }
.fkc-sort{
  font-size:12.5px; font-weight:700; padding:6px 13px; border-radius:16px; cursor:pointer;
  background:var(--chip-bg); color:var(--chip-tx); border:1px solid var(--chip-line);
}
.fkc-sort.on{ background:var(--on-bg); color:var(--on-tx); border-color:var(--on-bg); }

/* ── 빈 상태 ── */
.fkc-empty{ padding:44px 18px; text-align:center; }
.fkc-empty .t{ font-size:14.5px; font-weight:800; color:var(--ink2); }
.fkc-empty .d{ font-size:12.5px; color:var(--sub); margin-top:7px; line-height:1.6; }

/* ── 커뮤니티 안내 ── */
.fkc-guide{
  background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:12px 15px;
  font-size:12.5px; color:var(--sub);
}

/* ── 관리 모드 ──
   본인 채널도 기본은 방문자와 같은 화면. '채널 관리' 를 누르면(.fkc-edit) 편집 요소가 나타난다.
   .fkc-own = 편집 전용 요소 / .blk = 블록 레벨(고정 콘텐츠 안내 카드 등) */
.fkc-own{ display:none !important; }
.fkc-edit .fkc-own{ display:inline-flex !important; }
.fkc-edit .fkc-own.blk{ display:flex !important; }
.fkc-editbar{
  background:var(--blue-soft); border:1px solid var(--brand); border-radius:10px;
  padding:11px 15px; font-size:12.5px; color:var(--brand); font-weight:700;
  display:none; align-items:center; gap:8px;
}
.fkc-edit .fkc-editbar{ display:flex; }

.fkc-hide{ display:none !important; }

/* ── 판매자 콘텐츠 조각(kukir_seller_frag.jsp) 재사용 ──
   조각은 상세 추천존용 마크업(.fkp-item)을 주는데, 그 스타일은 상세 페이지 안에
   인라인으로만 정의돼 있어 채널로는 전달되지 않는다. 여기서 채널 카드 그리드로 재정의한다.
   (상세 페이지는 자기 인라인 CSS 를 그대로 쓰므로 서로 영향 없음) */
.fkc-frag{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.fkc-frag .fkp-item{ display:block; cursor:pointer; }
.fkc-frag .fkp-th{ position:relative; aspect-ratio:16/9; border-radius:9px; overflow:hidden; background:var(--card2); }
.fkc-frag .fkp-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.fkc-frag .fkp-ittl{
  font-size:12.5px; font-weight:600; color:var(--ink2); line-height:1.35; margin-top:8px;
  height:34px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.fkc-frag .fkp-imeta{ font-size:11px; color:var(--sub); margin-top:5px; }
/* 조각이 돌려주는 빈 상태 문구 (.fkp-recempty) — 채널에서도 읽히게 */
.fkc-frag .fkp-recempty, .fkp-recempty{
  grid-column:1 / -1; padding:38px 10px; text-align:center;
  font-size:13px; color:var(--sub);
}

/* ── 소개글 인라인 편집 ── */
.fkc-introbox{ display:none; margin-top:10px; max-width:700px; }
.fkc-introbox textarea{
  width:100%; min-height:78px; resize:vertical; box-sizing:border-box;
  background:var(--card2); border:1px solid var(--line); border-radius:9px;
  padding:11px 13px; font-size:13.5px; color:var(--ink2); line-height:1.6;
  font-family:inherit; outline:none;
}
.fkc-introbox textarea:focus{ border-color:var(--brand); }
.fkc-introbox .row{ display:flex; align-items:center; gap:7px; margin-top:8px; }
.fkc-introbox .cnt{ flex:1; font-size:11.5px; color:var(--sub); }
.fkc-btn.sm{ font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:8px; }

/* ── 프로필·배너 이미지 (T_BOARD_IMG 연동) ── */
.fkc-banner img.bnr{ width:100%; height:100%; object-fit:cover; }
.fkc-bnedit.del{ right:126px; background:rgba(0,0,0,.42); font-weight:600; }
.fkc-avt img.pf{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.fkc-avt.hasimg{ background:var(--card2); }
.fkc-avt.hasimg .ini{ display:none; }

/* ══ 이미지 편집 모달 (channel_crop.js) ══════════════════════════════════ */
.fkcx-ov{
  position:fixed; inset:0; z-index:99999; display:none; padding:20px;
  align-items:center; justify-content:center;
  background:rgba(8,12,20,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
/* 모바일 브라우저는 주소창·하단 툴바가 드나들면서 보이는 높이가 변한다.
   inset:0 은 '레이아웃 뷰포트' 기준이라 툴바 뒤까지 뻗고, 그 안에 아래로
   붙인 [저장] 줄이 툴바에 가려졌다. dvh 는 지금 실제로 보이는 높이다.
   지원하지 않는 브라우저는 위의 inset:0 그대로 (동작은 종전과 동일) */
@supports (height:100dvh){
  .fkcx-ov{ height:100dvh; }
}
.fkcx-ov.on{ display:flex; }
.fkcx-card{
  background:var(--card,#fff); border-radius:16px; width:100%; max-width:640px;
  box-shadow:0 24px 64px rgba(0,0,0,.4); overflow:hidden;
  animation:fkcxIn .16s ease-out;
}
/* 등장 연출 — transform 을 쓰지 않는다.
   translateY(10px) scale(.985) 로 넣었더니 시작 프레임이 그대로 남는 경우가 있어
   (모달을 닫고 다시 열 때 실측) 카드가 10px 아래로 밀려 하단이 잘렸다.
   아래에서 올라오는 시트에서는 그 10px 이 [취소]·[저장] 줄을 화면 밖으로
   내보낸다. 위치에 손대지 않는 opacity 로만 낸다 (.fkc-ghost 와 같은 교훈) */
@keyframes fkcxIn{ from{ opacity:0; } to{ opacity:1; } }
.fkcx-card.busy{ pointer-events:none; }
.fkcx-hd{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line,#e7e9ed); }
.fkcx-hd b{ font-size:15.5px; font-weight:800; color:var(--ink,#101111); letter-spacing:-.01em; }
.fkcx-x{ cursor:pointer; color:var(--sub,#7c8698); width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.fkcx-x:hover{ background:var(--card2,#f5f7fb); color:var(--ink,#101111); }
.fkcx-bd{ padding:18px; }
.fkcx-ft{ display:flex; gap:7px; justify-content:flex-end; padding:13px 18px; border-top:1px solid var(--line,#e7e9ed); background:var(--card2,#f5f7fb); }
.fkc-btn.off{ opacity:.6; }

/* 드롭존 */
.fkcx-drop{
  border:2px dashed var(--line,#e7e9ed); border-radius:12px; padding:40px 20px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:7px; transition:border-color .14s, background .14s;
}
.fkcx-drop:hover,.fkcx-drop.hot{ border-color:var(--brand,#0566db); background:var(--blue-soft,#eaf1fd); }
.fkcx-drop .ic{ color:var(--brand,#0566db); opacity:.85; margin-bottom:2px; }
.fkcx-drop .t1{ font-size:14px; font-weight:700; color:var(--ink2,#33383f); }
.fkcx-drop .t2{ font-size:12px; color:var(--sub,#7c8698); }

/* 크롭 스테이지 */
.fkcx-stage-wrap{ display:none; }
.fkcx-stage{
  position:relative; margin:0 auto; overflow:hidden; cursor:grab;
  background:#0e1420; border-radius:10px; touch-action:none; user-select:none;
}
.fkcx-stage.grabbing{ cursor:grabbing; }
.fkcx-stage canvas{ display:block; }
/* 원형(프로필) 안내 — 실제 잘림 영역을 눈으로 알 수 있게 바깥을 어둡게 */
.fkcx-stage .mask{ display:none; position:absolute; inset:0; pointer-events:none; }
.fkcx-stage.round .mask{
  display:block; border-radius:50%;
  box-shadow:0 0 0 999px rgba(8,12,20,.55); border:2px solid rgba(255,255,255,.85);
}
.fkcx-hint{ text-align:center; font-size:12px; color:var(--sub,#7c8698); margin:11px 0 0; line-height:1.5; }
.fkcx-zoom{ display:flex; align-items:center; gap:10px; margin-top:11px; color:var(--sub,#7c8698); }
.fkcx-zoom input[type=range]{ flex:1; accent-color:var(--brand,#0566db); height:4px; cursor:pointer; }
.fkcx-zoom .pct{ font-size:11.5px; font-weight:700; color:var(--ink2,#33383f); min-width:38px; text-align:right; }

/* 프로필 기본복귀 버튼 */
.fkc-avt .pfdel{
  position:absolute; left:-2px; bottom:-2px; width:26px; height:26px; border-radius:50%;
  background:var(--card,#fff); border:1px solid var(--line,#e7e9ed); box-shadow:0 2px 8px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center; color:var(--sub,#7c8698); cursor:pointer;
}
.fkc-avt .pfdel:hover{ color:#e5484d; }

@media (max-width:700px){
  .fkcx-card{ max-width:none; }
  .fkcx-stage{ max-width:100%; }
}

/* ══ 고정 콘텐츠 (channel_pin.js) ═══════════════════════════════════════ */
/* 고정 카드 — 최신콘텐츠와 같은 카드 그리드를 쓰되 순번 배지를 얹는다 */
.fkcp-pinwrap .fkcp-pinitem{ position:relative; }
.fkcp-ord{
  position:absolute; left:8px; top:8px; z-index:3; min-width:19px; height:19px; padding:0 5px;
  border-radius:6px; background:var(--brand,#0566db); color:#fff;
  font-size:11px; font-weight:800; line-height:19px; text-align:center;
  box-shadow:0 1px 5px rgba(0,0,0,.3);
}

/* 설정 모달 */
.fkcp-card{ max-width:720px; }
.fkcp-bd{ max-height:min(68vh,620px); overflow-y:auto; }
.fkcp-guide{ margin:0 0 13px; font-size:12.5px; color:var(--sub,#7c8698); line-height:1.6; }
.fkcp-guide b{ color:var(--ink2,#33383f); font-weight:800; }

.fkcp-slots{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:18px; }
.fkcp-slot{
  display:flex; align-items:center; gap:8px; min-height:40px; padding:0 9px;
  border:1px solid var(--line,#e7e9ed); border-radius:9px; background:var(--card2,#f5f7fb);
  /* grid 아이템 기본값 min-width:auto 라 제목 길이만큼 늘어나 모달 밖으로 잘렸다 */
  min-width:0; overflow:hidden;
}
.fkcp-slot.on{ border-color:var(--brand,#0566db); background:var(--blue-soft,#eaf1fd); }
.fkcp-slot .ord{
  width:19px; height:19px; flex-shrink:0; border-radius:6px; text-align:center; line-height:19px;
  font-size:11px; font-weight:800; background:var(--line,#e7e9ed); color:var(--sub,#7c8698);
}
.fkcp-slot.on .ord{ background:var(--brand,#0566db); color:#fff; }
.fkcp-slot .ttl{
  flex:1; min-width:0; font-size:12.5px; font-weight:700; color:var(--ink2,#33383f);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fkcp-slot .ttl.empty{ font-weight:500; color:var(--sub,#7c8698); }
.fkcp-slot .del{
  width:22px; height:22px; flex-shrink:0; border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--sub,#7c8698);
}
.fkcp-slot .del:hover{ background:rgba(229,72,77,.12); color:#e5484d; }

.fkcp-listhd{ display:flex; align-items:baseline; gap:7px; margin-bottom:9px; }
.fkcp-listhd b{ font-size:13.5px; font-weight:800; color:var(--ink,#101111); }
.fkcp-listhd .cnt{ font-size:11.5px; color:var(--sub,#7c8698); }
.fkcp-list{ display:flex; flex-direction:column; gap:2px; }
.fkcp-loading{ padding:26px 0; text-align:center; font-size:12.5px; color:var(--sub,#7c8698); }
.fkcp-more{
  margin-top:11px; padding:9px 0; text-align:center; cursor:pointer; border-radius:9px;
  border:1px solid var(--line,#e7e9ed); font-size:12.5px; font-weight:700; color:var(--ink2,#33383f);
}
.fkcp-more:hover{ background:var(--card2,#f5f7fb); }
.fkcp-cntx{ flex:1; font-size:12px; font-weight:700; color:var(--sub,#7c8698); align-self:center; }

/* 선택 목록 아이템 */
.fkcp-pickitem{ position:relative; cursor:pointer; border-radius:9px; padding:6px; }
.fkcp-pickitem:hover{ background:var(--card2,#f5f7fb); }
.fkcp-pickitem.on{ background:var(--blue-soft,#eaf1fd); }
.fkcp-chk{
  position:absolute; right:9px; top:50%; transform:translateY(-50%); z-index:2;
  width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line,#e7e9ed);
  background:var(--card,#fff); color:transparent;
  display:flex; align-items:center; justify-content:center;
}
.fkcp-pickitem.on .fkcp-chk{ background:var(--brand,#0566db); border-color:var(--brand,#0566db); color:#fff; }
.fkcp-pickitem .fkp-ittl,.fkcp-pickitem .fkp-imeta{ padding-right:26px; }

@media (max-width:700px){
  .fkcp-slots{ grid-template-columns:1fr; }
}

/* ══ 재생목록 (channel_list.js) ═════════════════════════════════════════ */
.fkcl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.fkcl-card{
  position:relative; cursor:pointer; border-radius:11px; overflow:hidden;
  background:var(--card2,#f5f7fb); border:1px solid var(--line,#e7e9ed); transition:transform .12s, box-shadow .12s;
}
.fkcl-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.fkcl-th{ position:relative; aspect-ratio:16/10; background:#0e1420; display:flex; align-items:center; justify-content:center; }
.fkcl-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.fkcl-th .ph{ color:rgba(255,255,255,.5); }
.fkcl-th .cnt{
  position:absolute; right:7px; bottom:7px; background:rgba(0,0,0,.72); color:#fff;
  font-size:11px; font-weight:700; padding:2px 7px; border-radius:5px;
}
.fkcl-body{ padding:10px 11px 12px; }
.fkcl-name{
  font-size:13px; font-weight:800; color:var(--ink,#101111); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fkcl-desc{
  margin-top:4px; font-size:11.5px; color:var(--sub,#7c8698); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.fkcl-edit{
  position:absolute; right:7px; top:7px; z-index:3; background:rgba(0,0,0,.6); color:#fff;
  font-size:11px; font-weight:700; padding:4px 9px; border-radius:6px; cursor:pointer;
}
.fkcl-edit:hover{ background:rgba(0,0,0,.8); }

/* 편집 모달 */
.fkcl-field{ margin-bottom:13px; }
.fkcl-field label{ display:block; font-size:12px; font-weight:800; color:var(--ink2,#33383f); margin-bottom:5px; }
.fkcl-field label span{ font-weight:500; color:var(--sub,#7c8698); }
.fkcl-field input[type=text],.fkcl-field textarea{
  width:100%; box-sizing:border-box; background:var(--card2,#f5f7fb);
  border:1px solid var(--line,#e7e9ed); border-radius:9px; padding:10px 12px;
  font-size:13.5px; font-family:inherit; color:var(--ink2,#33383f); outline:none;
}
.fkcl-field textarea{ min-height:56px; resize:vertical; line-height:1.55; }
.fkcl-field input[type=text]:focus,.fkcl-field textarea:focus{ border-color:var(--brand,#0566db); }

.fkcl-picked{ display:flex; flex-direction:column; gap:5px; }
.fkcl-pempty{
  padding:16px; text-align:center; font-size:12.5px; color:var(--sub,#7c8698);
  border:1px dashed var(--line,#e7e9ed); border-radius:9px;
}
.fkcl-prow{
  display:flex; align-items:center; gap:8px; min-height:36px; padding:0 9px;
  border:1px solid var(--line,#e7e9ed); border-radius:8px; background:var(--blue-soft,#eaf1fd);
  min-width:0; overflow:hidden;
}
.fkcl-prow .ord{
  width:18px; height:18px; flex-shrink:0; border-radius:5px; text-align:center; line-height:18px;
  font-size:10.5px; font-weight:800; background:var(--brand,#0566db); color:#fff;
}
.fkcl-prow .ttl{
  flex:1; min-width:0; font-size:12.5px; font-weight:700; color:var(--ink2,#33383f);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fkcl-prow .del{
  width:21px; height:21px; flex-shrink:0; border-radius:5px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--sub,#7c8698);
}
.fkcl-prow .del:hover{ background:rgba(229,72,77,.14); color:#e5484d; }
.fkcl-vdesc{ margin:0 0 13px; font-size:12.5px; color:var(--sub,#7c8698); line-height:1.6; }
.fkc-btn.fkcl-del{ color:#e5484d; }

@media (max-width:700px){  .fkcl-grid{ grid-template-columns:repeat(2,1fr); } }

/* ══ 재생목록 레일 (홈 탭) — 핸드오프 "재생목록 레일" 규격 ═══════════════ */
.fkcr-rail{ display:flex; flex-direction:column; gap:26px; }
.fkcr-block{ }
.fkcr-hd{ display:flex; align-items:center; gap:9px; }
.fkcr-hd .nm{ font-size:16.5px; font-weight:800; color:var(--ink,#101111); letter-spacing:-.01em; }
.fkcr-hd .chip{
  display:inline-flex; align-items:center; gap:4px; flex-shrink:0;
  font-size:12.5px; font-weight:700; color:var(--ink2,#33383f);
  background:var(--card2,#f5f7fb); border:1px solid var(--line,#e7e9ed);
  padding:5px 12px; border-radius:16px; cursor:pointer;
}
.fkcr-hd .chip:hover{ border-color:var(--brand,#0566db); color:var(--brand,#0566db); }
.fkcr-hd .upd{ margin-left:auto; font-size:12px; color:var(--sub,#7c8698); flex-shrink:0; }
.fkcr-desc{ font-size:12.5px; color:var(--sub,#7c8698); margin-top:5px; line-height:1.5; }
.fkcr-wrap{ position:relative; margin-top:13px; }
.fkcr-scr{
  display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.fkcr-scr::-webkit-scrollbar{ display:none; }
.fkcr-card{ flex-shrink:0; width:212px; display:block; cursor:pointer; }
.fkcr-card .th{
  position:relative; display:block; width:212px; height:119px;
  border-radius:9px; background:var(--thumb,#dfe3ea); overflow:hidden;
}
.fkcr-card .th img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.fkcr-card .ad19{
  position:absolute; left:6px; bottom:6px; width:16px; height:16px; border-radius:50%;
  background:var(--adult,#e5484d); color:#fff; font-size:9px; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:1.5px solid #fff;
}
.fkcr-card .dur{
  position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.75); color:#fff;
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px;
}
.fkcr-card .tt{
  display:block; font-size:12.5px; font-weight:600; color:var(--ink2,#33383f);
  margin-top:7px; line-height:1.35; height:34px; overflow:hidden;
}
.fkcr-card .mt{ display:block; font-size:11px; color:var(--sub,#7c8698); margin-top:3px; }
.fkcr-card .mt .pr{ color:var(--ink,#101111); font-weight:800; }
.fkcr-card:hover .tt{ color:var(--brand,#0566db); }
.fkcr-next{
  position:absolute; right:-9px; top:43px; width:34px; height:34px; border-radius:50%;
  background:var(--card,#fff); border:1px solid var(--line,#e7e9ed);
  box-shadow:0 2px 10px rgba(0,0,0,.14); display:flex; align-items:center; justify-content:center;
  color:var(--ink2,#33383f); cursor:pointer; z-index:2;
}
.fkcr-next:hover{ color:var(--brand,#0566db); border-color:var(--brand,#0566db); }
.fkcr-empty{ font-size:12.5px; color:var(--sub,#7c8698); padding:22px 0; }
.fkcl-edit-chip{ color:var(--brand,#0566db) !important; }

/* 재생목록 탭 카드 — 썸네일 우측 편수 오버레이 (핸드오프 규격) */
.fkcl-th .ov{
  position:absolute; right:0; top:0; bottom:0; width:50px; background:rgba(0,0,0,.62);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:#fff; font-size:11px;
}
.fkcl-th .ov b{ font-size:12.5px; font-weight:800; }

@media (max-width:1000px){ .fkcl-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){
  .fkcr-card, .fkcr-card .th{ width:150px; }
  .fkcr-card .th{ height:85px; }
  .fkcr-next{ display:none; }
}

/* ══ 고정 콘텐츠 (kukir_channel_pin_frag.jsp) — 핸드오프 규격 ═════════════ */
.fkcpin-box{ }
.fkcpin-wrap{ display:grid; grid-template-columns:1fr 372px; gap:18px; align-items:stretch; }
/* 고정작이 1개뿐이면 우측 열이 비므로 한 단으로 */
.fkcpin-wrap.solo{ grid-template-columns:1fr; }

/* 좌 — 1번 고정작 대형 */
.fkcpin-main .stage{
  position:relative; aspect-ratio:16/9; border-radius:11px; overflow:hidden;
  background:#0e1420; cursor:default;
}
.fkcpin-main .poster,.fkcpin-main .mov{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
/* 미리보기 불가(19금 등) — 아주 느린 확대로 정지 화면 티를 줄인다 */
.fkcpin-main .poster.kb.on{ animation:fkcpinKB 6s ease-out forwards; }
@keyframes fkcpinKB{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
.fkcpin-main .grad{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(transparent 45%, rgba(0,0,0,.82));
}
.fkcpin-main .ord{
  position:absolute; left:10px; top:10px; z-index:3; min-width:22px; height:22px; padding:0 7px;
  border-radius:7px; background:var(--brand,#0566db); color:#fff;
  font-size:12px; font-weight:800; line-height:22px; text-align:center;
  box-shadow:0 1px 6px rgba(0,0,0,.35);
}
.fkcpin-main .ad19{
  position:absolute; right:10px; top:10px; z-index:3; width:20px; height:20px; border-radius:50%;
  background:var(--adult,#e5484d); color:#fff; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:1.5px solid #fff;
}
.fkcpin-main .pvlabel{
  position:absolute; left:10px; top:38px; z-index:3; background:rgba(0,0,0,.6); color:#fff;
  font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:6px;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.fkcpin-main .dur{
  position:absolute; right:10px; bottom:10px; z-index:3; background:rgba(0,0,0,.72); color:#fff;
  font-size:11px; font-weight:700; padding:2px 7px; border-radius:4px;
}
.fkcpin-main .info{ position:absolute; left:14px; right:100px; bottom:12px; z-index:3; }
.fkcpin-main .info .t{
  font-size:16px; font-weight:800; color:#fff; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.fkcpin-main .info .m{ font-size:12.5px; color:rgba(255,255,255,.82); margin-top:4px; }
/* 미리보기가 끝나면 화면 안에서 구매하기로 이어진다 */
.fkcpin-main .cta{
  position:absolute; inset:0; z-index:4; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:11px;
  background:rgba(6,10,18,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.fkcpin-main .cta.on{ display:flex; animation:fkcpinFade .22s ease-out; }
@keyframes fkcpinFade{ from{ opacity:0; } to{ opacity:1; } }
.fkcpin-main .cta .note{
  font-size:12px; color:rgba(255,255,255,.9); background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.22); padding:6px 13px; border-radius:22px;
}
.fkcpin-main .cta .buy{
  background:var(--brand,#0566db); color:#fff; font-size:14.5px; font-weight:800;
  padding:11px 30px; border-radius:9px; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.fkcpin-main .cta .buy:hover{ background:#0455b4; }

/* 우 — 2~4번 */
/* 좌측 대형 카드 높이를 우측 3행이 나눠 채운다 (아래가 비지 않게) */
.fkcpin-side{ display:flex; flex-direction:column; gap:12px; min-height:0; justify-content:space-between; }
/* 좁은 화면에서는 이 영역이 가로 레일이 된다. 손가락으로 밀어 넘기는 자리라
   스크롤바는 감춘다 (재생목록 레일 .fkcr-scr 과 같은 규칙) */
.fkcpin-side{ scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
.fkcpin-side::-webkit-scrollbar{ display:none; }
/* 고정작이 2~3개뿐이면 한 행이 지나치게 커져 썸네일이 크롭되므로 상한을 둔다 */
.fkcpin-row{ display:flex; gap:11px; cursor:pointer; align-items:center; flex:1 1 0; min-height:0; max-height:158px; }
.fkcpin-row .th{
  position:relative; flex-shrink:0; height:100%; aspect-ratio:16/9;
  min-height:72px; max-width:205px; border-radius:8px;
  overflow:hidden; background:#0e1420; display:block;
}
.fkcpin-row .th img{ width:100%; height:100%; object-fit:cover; display:block; }
.fkcpin-row .th .ord{
  position:absolute; left:5px; top:5px; min-width:17px; height:17px; padding:0 5px;
  border-radius:5px; background:rgba(0,0,0,.68); color:#fff;
  font-size:10.5px; font-weight:800; line-height:17px; text-align:center;
}
.fkcpin-row .th .ad19{
  position:absolute; left:5px; bottom:5px; width:15px; height:15px; border-radius:50%;
  background:var(--adult,#e5484d); color:#fff; font-size:8.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:1.5px solid #fff;
}
.fkcpin-row .th .dur{
  position:absolute; right:5px; bottom:5px; background:rgba(0,0,0,.75); color:#fff;
  font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:4px;
}
.fkcpin-row .tx{ flex:1; min-width:0; padding-top:1px; }
.fkcpin-row .tx .t{
  display:block; font-size:14px; font-weight:700; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fkcpin-row .tx .m{ display:block; font-size:12px; color:var(--sub,#7c8698); margin-top:4px; }
.fkcpin-row:hover .tx .t{ text-decoration:underline; }

@media (max-width:900px){
  .fkcpin-wrap{ grid-template-columns:1fr; }
  .fkcpin-side{ flex-direction:row; overflow-x:auto; }
  .fkcpin-row{ flex-direction:column; width:140px; flex:0 0 auto; align-items:stretch; }
  .fkcpin-row .th{ width:140px; height:79px; max-width:none; }
  .fkcpin-row .tx .t{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:12.5px; }
}

/* 미리보기 종료 오버레이 — 제목/메타는 가리지 않는다 (무슨 콘텐츠인지 보여야 함) */
.fkcpin-main .info{ z-index:5; }
.fkcpin-main .cta .btns{ display:flex; align-items:center; gap:10px; }
.fkcpin-main .cta .again{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.42); color:#fff;
  font-size:13.5px; font-weight:700; padding:10px 18px; border-radius:9px; cursor:pointer;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.fkcpin-main .cta .again:hover{ background:rgba(255,255,255,.24); }

/* ── 선택 목록 행 (고정 콘텐츠 설정 · 재생목록 편집 모달) ──
   .fkp-item 의 기본 행 스타일은 .fkc-frag 안에서만 잡혀 있어, 모달에서는
   썸네일이 원본 크기로 튀어나온다(실측 657x169). 모달용으로 따로 준다 */
.fkcp-list .fkp-item{ display:flex; gap:11px; align-items:center; }
.fkcp-list .fkp-th{
  position:relative; flex-shrink:0; width:124px; height:70px;
  border-radius:7px; overflow:hidden; background:#0e1420; display:block;
}
.fkcp-list .fkp-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.fkcp-list .fkp-ittl{
  font-size:13px; font-weight:700; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fkcp-list .fkp-imeta{ font-size:11.5px; color:var(--sub,#7c8698); margin-top:4px; }
.fkcp-list .fkp-recempty{ padding:22px 0; text-align:center; font-size:12.5px; color:var(--sub,#7c8698); }

/* ── 드래그로 순서 바꾸기 (고정 슬롯 · 재생목록 항목) ── */
.fkcp-slot.on,.fkcl-prow.on{ cursor:grab; }
.fkcp-slot.on:active,.fkcl-prow.on:active{ cursor:grabbing; }
.fkcp-slot .grip,.fkcl-prow .grip{
  flex-shrink:0; width:13px; display:flex; align-items:center; justify-content:center;
  color:var(--sub,#7c8698); opacity:.55;
  /* 손잡이 위에서 시작한 터치는 스크롤로 넘기지 않는다 — 이게 없으면
     브라우저가 첫 움직임을 스크롤로 확정해 드래그가 아예 안 잡힌다 */
  touch-action:none;
}
.fkcp-slot.on:hover .grip,.fkcl-prow.on:hover .grip{ opacity:1; color:var(--brand,#0566db); }
.fkcp-slot .grip.empty{ opacity:0; }
/* 터치 화면 — 13px 손잡이는 손가락으로 못 잡는다. 넓히고 항상 보이게 한다
   (hover 가 없으니 흐릿하면 잡는 자리인지 알 수 없다)
   align-self:stretch 가 없으면 부모의 align-items:center 때문에 아이콘 높이인
   14px 로 쪼그라든다 — 가로만 넓혀서는 여전히 못 잡는다 */
@media (pointer:coarse), (max-width:700px){
  .fkcp-slot .grip,.fkcl-prow .grip{ width:34px; margin-left:-8px; opacity:.9; align-self:stretch; }
  .fkcp-slot .grip.empty{ opacity:0; }
}
/* 원본 자리 — 집어 든 뒤 남는 빈 자국 */
.fkcp-slot.dragging,.fkcl-prow.dragging{
  background:transparent; border-style:dashed; border-color:var(--brand,#0566db);
  box-shadow:inset 0 0 0 999px rgba(5,102,219,.06);
}
.fkcp-slot.dragging > *,.fkcl-prow.dragging > *{ opacity:.25; }

/* 집어 든 카드 — 커서를 따라다닌다 */
.fkc-ghost{
  position:fixed !important; left:0; top:0; z-index:100000; margin:0 !important;
  pointer-events:none; cursor:grabbing;
  box-shadow:0 12px 28px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.16);
  border-color:var(--brand,#0566db) !important;
  background:var(--card,#fff) !important;
  animation:fkcGrab .12s ease-out;
}
/* 집는 순간 연출 — transform 은 절대 쓰지 않는다.
   CSS 애니메이션은 인라인 스타일을 이기므로, 여기서 transform 을 건드리면
   JS 가 매 프레임 넣는 translate(커서좌표) 가 애니메이션 시간(0.12s) 동안
   무시된다. left:0;top:0 이라 그동안 카드가 화면 좌상단에 떠 있다가
   손가락 위로 날아왔다 (실측 378px 어긋남). 그림자만 키운다.
   확대·기울기는 JS 의 transform 문자열에 함께 넣는다 (ghostMove) */
@keyframes fkcGrab{
  from{ box-shadow:0 2px 6px rgba(0,0,0,.10); }
  to  { box-shadow:0 12px 28px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.16); }
}
.fkc-ghost .grip{ opacity:1 !important; color:var(--brand,#0566db) !important; }

/* ── 19금 표기 — 썸네일 배지만으로는 고른 뒤에 안 보여서 제목·슬롯에도 넣는다 ── */
.fkr-19t{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:1px;
  width:16px; height:16px; margin-right:5px; border-radius:50%;
  background:var(--adult,#e5484d); color:#fff; font-size:9px; font-weight:800; flex-shrink:0;
}
.fkcp-slot .a19,.fkcl-prow .a19{
  flex-shrink:0; width:17px; height:17px; border-radius:50%;
  background:var(--adult,#e5484d); color:#fff; font-size:9px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* ══ 모바일 채널 (mobile/m_channel.jsp) ══════════════════════════════════
   모바일 페이지엔 리뉴얼 토큰이 없어 tokens_body.css 를 함께 싣고 .fkr-body 로
   감싼다. 여기서는 PC 규격만 화면 폭에 맞게 줄인다 (.fkc-mo 스코프)         */
.fkc-mo{ background:var(--bg,#f0f0f0); padding-bottom:70px; }   /* 하단 GNB 가림 방지 */
.fkc-mo .fkc-wrap{ max-width:none; padding:0 0 20px; gap:10px; }
.fkc-mo .fkc-banner{ height:118px; border-radius:0; }
.fkc-mo .fkc-bnedit{ right:10px; top:10px; font-size:11px; padding:5px 10px; }
.fkc-mo .fkc-bnedit.del{ right:66px; }

.fkc-mo .fkc-prof{ border-radius:0; margin-top:-26px; padding:0 4%; }
.fkc-mo .fkc-prow{ gap:12px; padding-bottom:10px; }
.fkc-mo .fkc-avt{ width:66px; height:66px; margin-top:-26px; border-width:3px; font-size:24px; }
.fkc-mo .fkc-avt .cam{ width:24px; height:24px; right:-1px; bottom:-1px; }
.fkc-mo .fkc-avt .pfdel{ width:21px; height:21px; left:-1px; bottom:-1px; }
.fkc-mo .fkc-pmain{ padding-top:8px; }
.fkc-mo .fkc-pname b{ font-size:18px; }
.fkc-mo .fkc-seller{ font-size:10px; padding:2px 7px; }
.fkc-mo .fkc-chips{ gap:5px; margin-top:8px; }
.fkc-mo .fkc-chip{ padding:3px 9px; }
.fkc-mo .fkc-chip .l{ font-size:10.5px; }
.fkc-mo .fkc-chip .v{ font-size:11.5px; }
.fkc-mo .fkc-desc{ font-size:13px; margin-top:10px; max-width:none; }

/* 버튼 줄 — 팔로우/관리가 가로를 채우고 공유는 아이콘만 */
.fkc-mo .fkc-pact{ padding:12px 0 0; gap:7px; }
.fkc-mo .fkc-pact .fkc-btn{ flex:1; justify-content:center; padding:11px 10px; font-size:13.5px; }
.fkc-mo .fkc-pact .fkc-ico{ flex-shrink:0; }

/* 탭 — 좁은 폭에서 넘치지 않게 균등 분할 */
.fkc-mo .fkc-tabs{ gap:0; margin-top:12px; }
.fkc-mo .fkc-tab{ flex:1; text-align:center; font-size:14px; padding:12px 2px; }

.fkc-mo .fkc-sec{ border-radius:0; padding:14px 4%; }
.fkc-mo .fkc-sectitle{ font-size:15.5px; }
.fkc-mo .fkc-editbar{ border-radius:0; }
.fkc-mo .fkc-pinempty{ border-radius:0; margin:0; padding:18px 4%; }

/* 최신 콘텐츠 카드 — 2열 */
.fkc-mo .fkc-frag{ grid-template-columns:1fr 1fr; gap:12px; }

/* 재생목록 레일 — 카드 축소, 화살표 없음(터치 스크롤) */
.fkc-mo .fkcr-rail{ gap:20px; }
.fkc-mo .fkcr-hd .nm{ font-size:15px; }
.fkc-mo .fkcr-hd .chip{ font-size:11.5px; padding:4px 10px; }
.fkc-mo .fkcr-hd .upd{ font-size:11px; }
.fkc-mo .fkcr-scr{ gap:10px; }
.fkc-mo .fkcr-card,.fkc-mo .fkcr-card .th{ width:150px; }
.fkc-mo .fkcr-card .th{ height:85px; }
.fkc-mo .fkcr-card .tt{ font-size:11.5px; height:30px; margin-top:5px; }
.fkc-mo .fkcr-next{ display:none !important; }
.fkc-mo .fkcl-grid{ grid-template-columns:1fr 1fr; gap:12px; }

/* 고정 콘텐츠 — 한 단, 아래에 가로 스크롤 */
.fkc-mo .fkcpin-wrap{ grid-template-columns:1fr; gap:12px; }
.fkc-mo .fkcpin-main .info .t{ font-size:14px; }
.fkc-mo .fkcpin-main .info{ right:14px; }
.fkc-mo .fkcpin-side{ flex-direction:row; overflow-x:auto; gap:10px; }
.fkc-mo .fkcpin-row{ flex-direction:column; width:150px; flex:0 0 auto; align-items:stretch; max-height:none; }
.fkc-mo .fkcpin-row .th{ width:150px; height:85px; max-width:none; }
.fkc-mo .fkcpin-row .tx .t{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:12.5px; }

/* 모달 — 화면을 거의 채우고 아래에서 올라오는 형태 */
.fkc-mo .fkcx-ov,.fkr-body.fkc-mo ~ .fkcx-ov{ padding:0; align-items:flex-end; }

@media (max-width:700px){
  .fkcx-ov{ padding:0; align-items:flex-end; }
  /* 높이 기준은 vh 가 아니라 % — 오버레이(position:fixed;inset:0) 기준이다.
     모바일에서 vh 는 주소창이 숨겨진 상태의 최대 높이라, 주소창·하단 툴바가
     보이는 실제 상태에서는 카드가 가시 영역보다 커진다. 그 차이만큼 카드
     아래가 화면 밖으로 밀리고 하필 그 자리가 [취소]·[저장] 푸터였다
     (저장 버튼이 아예 안 보인다는 제보 — 2026-08-12) */
  .fkcx-card{ max-width:none; width:100%; border-radius:16px 16px 0 0; max-height:92%; display:flex; flex-direction:column; }
  .fkcx-bd,.fkcp-bd{ max-height:none; flex:1; overflow-y:auto; min-height:0; }
  .fkcp-slots{ grid-template-columns:1fr; }
  /* 푸터는 절대 줄거나 밀리지 않는다 — 저장 버튼이 있는 줄.
     아래 여백에 safe-area 를 더한다: 홈 인디케이터·하단 툴바가 겹치는 만큼 띄운다 */
  .fkcx-ft{ flex-wrap:wrap; flex-shrink:0; padding-bottom:calc(13px + env(safe-area-inset-bottom, 0px)); }
}