/* 쏙클립 UI 시스템 — 피카클립 구조 클론(표피=쏙클립) · 단일 원천(docs/redesign/DESIGN.md)
 * 모든 화면은 여기 정의된 fk- 컴포넌트만 사용한다. 화면별 개별 스타일 금지. */

:root {
  --fk-violet: #7C5CFF;
  --fk-violet-soft: #F1EDFF;
  --fk-bg: #ffffff;
  --fk-bg-soft: #fafafa;
  --fk-ink: #111114;
  --fk-ink-2: #555560;
  --fk-ink-3: #97979f;
  --fk-line: #e9e9ee;
  --fk-brand: #FF2E7E;
  --fk-brand-2: #FF6AA5;
  --fk-brand-soft: #FFEDF4;
  --fk-grad-hero: linear-gradient(115deg, #ffd9ec 0%, #ecd9ff 38%, #cdd6ff 75%, #dff0ff 100%);
  --fk-warn: #FFB020;
  --fk-ok: #16a34a;
  --fk-danger: #ef4444;
  --fk-r-card: 16px;
  --fk-r-ui: 10px;
  --fk-shadow: 0 1px 3px rgba(17,17,20,.05);
  --fk-shadow-pop: 0 12px 40px rgba(17,17,20,.14);
  --fk-side-w: 240px;
  --fk-top-h: 56px;
}

/* ---------- 앱 셸 ---------- */
body.fk { background: var(--fk-bg); color: var(--fk-ink); }
.fk-shell { display: flex; min-height: 100vh; }
.fk-side {
  width: var(--fk-side-w); flex: 0 0 var(--fk-side-w); border-right: 1px solid var(--fk-line);
  background: var(--fk-bg); display: flex; flex-direction: column; position: sticky; top: 0;
  height: 100vh; padding: 14px 12px; box-sizing: border-box; z-index: 30;
}
.fk-logo { font-family: inherit; font-weight: 900; font-size: 20px; letter-spacing: -.5px;
  padding: 4px 8px 14px; cursor: pointer; color: var(--fk-ink); }
.fk-logo b { color: var(--fk-brand); }
.fk-acct {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--fk-line);
  border-radius: var(--fk-r-ui); padding: 8px 10px; margin-bottom: 14px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--fk-ink-2);
}
.fk-acct .chip { background: var(--fk-brand-soft); color: var(--fk-brand); border-radius: 6px;
  font-size: 11px; font-weight: 800; padding: 2px 6px; }
.fk-acct svg { width: 14px; height: 14px; margin-left: auto; color: var(--fk-ink-3); }
.fk-nav { display: flex; flex-direction: column; gap: 2px; }
.fk-nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--fk-ink-2); cursor: pointer; text-decoration: none;
}
.fk-nav a svg { width: 17px; height: 17px; }
.fk-nav a:hover { background: var(--fk-bg-soft); color: var(--fk-ink); }
.fk-nav a.on { background: #f2f2f6; color: var(--fk-ink); }
.fk-nav .fk-new { margin-left: auto; background: var(--fk-brand); color: #fff; font-size: 10px;
  font-weight: 800; border-radius: 999px; padding: 2px 7px; letter-spacing: .03em; }
.fk-side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.fk-plan {
  background: var(--fk-bg-soft); border: 1px solid var(--fk-line); border-radius: 12px;
  padding: 12px; font-size: 12px; color: var(--fk-ink-2);
}
.fk-plan .t { font-weight: 800; color: var(--fk-ink); margin-bottom: 6px; font-size: 12.5px; }
.fk-plan .row { display: flex; justify-content: space-between; margin-bottom: 6px; }
.fk-plan .row b { color: var(--fk-ink); }
.fk-meter { height: 6px; border-radius: 999px; background: #ececf2; overflow: hidden; }
.fk-meter i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--fk-violet), #a78bfa); }
.fk-side-link { display: flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 600;
  color: var(--fk-ink-2); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.fk-side-link:hover { background: var(--fk-bg-soft); }

.fk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fk-top {
  height: var(--fk-top-h); display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 0 20px; border-bottom: 1px solid var(--fk-line); position: sticky; top: 0;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px); z-index: 25;
}
.fk-credit-pill {
  display: flex; align-items: center; gap: 6px; border: 1px solid var(--fk-line);
  border-radius: 9px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.fk-credit-pill b { color: var(--fk-violet); }
.fk-credit-pill span { color: var(--fk-ink-3); font-weight: 600; }
/* 현재 플랜 표시 칩 — 업그레이드 버튼 왼쪽(모바일·PC 공통, 2026-08-06 사장님 지시) */
.fk-plan-chip { display: flex; align-items: center; border: 1px solid var(--fk-line);
  background: var(--fk-bg-soft, #f6f6f9); border-radius: 9px; padding: 6px 10px;
  font-size: 12.5px; font-weight: 800; color: var(--fk-ink-2); cursor: pointer;
  white-space: nowrap; }
.fk-plan-chip:empty { display: none; }
.fk-plan-chip b { color: var(--fk-brand); }
/* 업그레이드 여지가 있는 티어(프리미엄 미만): 칩 자체가 업그레이드 CTA 역할 */
.fk-plan-chip.up { background: var(--fk-grad-hero, linear-gradient(90deg,#FF2E7E,#7C5CFF));
  border: 0; color: var(--fk-ink-3); }   /* 글씨색=잔여 칩 '베이직' 라벨과 동일(2026-08-07 사장님 지시) */
.fk-plan-chip.up b, .fk-plan-chip.up span { color: var(--fk-ink-3); }
.fk-plan-chip.up:hover { filter: brightness(1.05); }
/* 좁은 화면: '플랜'·'이용권' 라벨을 접어 상단바 넘침 방지(칩 5개 공존) */
@media (max-width: 480px) {
  .fk-plan-chip span, .fk-credit-pill span { display: none; }
  .fk-plan-chip, .fk-credit-pill { padding: 6px 8px; }
}
.fk-top-btn {
  display: flex; align-items: center; gap: 6px; border: 1px solid var(--fk-line);
  border-radius: 9px; padding: 6px 10px; font-size: 12.5px; font-weight: 700;
  background: #fff; cursor: pointer; color: var(--fk-ink-2);
}
/* 상단바(구분선 위) 왼쪽 페이지 제목 — 데스크탑에서 왼쪽 정렬, 버튼은 오른쪽 유지(2026-08-05) */
.fk-top-title { margin-right: auto; font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: var(--fk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-top-title:empty { display: none; }
@media (max-width: 820px) { .fk-top-title { display: none; } }
.fk-top-btn.brand { background: var(--fk-violet-soft); color: var(--fk-violet); border-color: transparent; }
.fk-top-btn svg { width: 15px; height: 15px; }
.fk-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--fk-brand);
  color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  cursor: pointer; }
.fk-content { padding: 26px 28px 60px; max-width: 1720px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.fk-content.wide { max-width: none; padding: 0; }
.fk-content.wide .fk-res { border: 0 !important; border-radius: 0 !important;
  height: calc(100vh - var(--fk-top-h) - 50px); min-height: 0; overflow: hidden; }
.fk-content.wide .fk-res .fk-res-list, .fk-content.wide .fk-res .fk-res-center,
.fk-content.wide .fk-res .fk-res-side { height: 100%; overflow-y: auto; box-sizing: border-box; }
.fk-res-head { padding: 22px 28px 0; }
.fk-content.wide { max-width: none; margin: 0; }

/* ---------- 텍스트 ---------- */
.fk-h1 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 6px; }
.fk-sub { font-size: 13px; color: var(--fk-ink-2); margin: 0 0 18px; line-height: 1.6; }
.fk-sec-t { font-size: 15px; font-weight: 800; margin: 30px 0 12px; display: flex; align-items: center; gap: 8px; }
.fk-sec-t .more { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--fk-ink-2); cursor: pointer; }
.fk-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--fk-brand); text-transform: uppercase; }
.fk-label { font-size: 12.5px; font-weight: 700; color: var(--fk-ink); margin: 0 0 8px; display: block; }
.fk-hint { font-size: 12px; color: var(--fk-ink-3); }

/* ---------- 버튼 ---------- */
.fk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--fk-r-ui); font-size: 13.5px; font-weight: 700; cursor: pointer;
  padding: 10px 18px; border: 1px solid transparent; transition: filter .15s; box-sizing: border-box;
}
.fk-btn svg { width: 15px; height: 15px; }
.fk-btn:hover { filter: brightness(.96); }
.fk-btn:disabled { opacity: .45; cursor: default; }
.fk-btn.cta { background: var(--fk-ink); color: #fff; }
.fk-btn.brand { background: var(--fk-brand); color: #fff; }
.fk-btn.line { background: #fff; color: var(--fk-ink); border-color: var(--fk-line); }
.fk-btn.ghost { background: transparent; color: var(--fk-ink-2); }
.fk-btn.big { padding: 13px 26px; font-size: 14.5px; border-radius: 12px; }
.fk-btn.full { width: 100%; }

/* ---------- 카드 ---------- */
.fk-card { background: #fff; border: 1px solid var(--fk-line); border-radius: var(--fk-r-card);
  box-shadow: var(--fk-shadow); padding: 20px; box-sizing: border-box; }
.fk-card.pad-lg { padding: 26px; }

/* ---------- 히어로(파스텔 그라데이션 + 중앙 입력) ---------- */
.fk-hero {
  border-radius: 18px; background: var(--fk-grad-hero); padding: 44px 24px 40px;
  text-align: center; position: relative; overflow: hidden;
}
.fk-hero h2 { margin: 0 0 20px; font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.fk-hero-box {
  max-width: 460px; margin: 0 auto; background: rgba(255,255,255,.72); backdrop-filter: blur(4px);
  border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.fk-input {
  display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--fk-line);
  border-radius: var(--fk-r-ui); padding: 0 12px; height: 42px; box-sizing: border-box;
}
.fk-input svg { width: 16px; height: 16px; color: var(--fk-ink-3); flex: 0 0 auto; }
.fk-input input { border: 0; outline: 0; background: transparent; flex: 1; font-size: 13.5px;
  color: var(--fk-ink); min-width: 0; }
.fk-input input::placeholder { color: var(--fk-ink-3); }
.fk-input .act { font-size: 12.5px; font-weight: 700; color: var(--fk-ink-2); cursor: pointer; flex: 0 0 auto; }
.fk-hero .fk-hint { display: inline-flex; gap: 5px; align-items: center; margin-top: 2px; cursor: pointer; }

/* ---------- 세그먼트 탭 / 언더라인 탭 ---------- */
.fk-tabs { display: inline-flex; background: #f2f2f6; border-radius: 10px; padding: 3px; gap: 2px; }
.fk-tabs .tb { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 700;
  color: var(--fk-ink-3); cursor: pointer; white-space: nowrap; }
.fk-tabs .tb.on { background: #fff; color: var(--fk-ink); box-shadow: var(--fk-shadow); }
.fk-tabs-line { display: flex; gap: 16px; border-bottom: 1px solid var(--fk-line); margin-bottom: 14px; }
.fk-tabs-line .tb { padding: 8px 2px 9px; font-size: 13px; font-weight: 700; color: var(--fk-ink-3);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fk-tabs-line .tb.on { color: var(--fk-brand); border-color: var(--fk-brand); }

/* ---------- 썸네일 카드(홈 캐러셀·결과 리스트·전체보기) ---------- */
.fk-thumb { position: relative; border-radius: 12px; overflow: hidden; background: #101223;
  aspect-ratio: 16/9; cursor: pointer; }
.fk-thumb.v { aspect-ratio: 9/16; }
.fk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fk-thumb .tag { position: absolute; top: 8px; left: 8px; background: rgba(255,255,255,.92);
  color: var(--fk-ink); font-size: 11px; font-weight: 700; border-radius: 6px; padding: 3px 7px; }
.fk-thumb .dur { position: absolute; right: 8px; bottom: 8px; background: rgba(10,10,16,.78);
  color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 6px; }
.fk-thumb-card { width: 180px; flex: 0 0 auto; }
.fk-thumb-card .cap { font-size: 12.5px; font-weight: 600; color: var(--fk-ink); margin-top: 8px;
  line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fk-thumb-card .sub { font-size: 11.5px; color: var(--fk-ink-3); margin-top: 3px; }
.fk-row-scroll { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }

/* ---------- 점수 배지 ---------- */
.fk-score { color: var(--fk-violet); font-weight: 900; font-size: 13.5px; }
.fk-score.badge { position: absolute; top: 8px; right: 8px; color: #fff;
  background: rgba(10,10,16,.78); border-radius: 6px; padding: 2px 7px; font-size: 11.5px; }

/* ---------- 결과 화면 3열 ---------- */
.fk-res { display: grid; gap: 0; min-height: calc(100vh - var(--fk-top-h));
  grid-template-columns: clamp(260px, 19vw, 360px) minmax(0, 1fr) clamp(320px, 24vw, 440px); }
.fk-res-list { border-right: 1px solid var(--fk-line); padding: 16px; overflow-y: auto; }
.fk-res-list .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 14px; font-weight: 800; }
.fk-res-item { display: flex; flex-direction: column; gap: 6px; border: 1px solid transparent;
  border-radius: 12px; padding: 10px; cursor: pointer; }
.fk-res-item:hover { background: var(--fk-bg-soft); }
.fk-res-item.on { background: var(--fk-violet-soft); border-color: #ddd4ff; }
.fk-res-item .t { font-size: 12.5px; font-weight: 700; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fk-res-item .meta { display: flex; gap: 8px; font-size: 11.5px; color: var(--fk-ink-3); align-items: center; }
.fk-res-center { padding: 18px 22px; display: flex; flex-direction: column; align-items: center; }
.fk-res-toolbar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.fk-player { width: min(380px, 100%); border-radius: 14px; overflow: hidden; background: #000;
  aspect-ratio: 9/16; position: relative; }
.fk-player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.fk-res-side { border-left: 1px solid var(--fk-line); padding: 22px 24px; overflow-y: auto; }
.fk-panel-t { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.fk-panel-t .fk-score { margin-left: auto; }
.fk-guide-p { font-size: 12.5px; color: var(--fk-ink-2); line-height: 1.75; }
.fk-grade { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 5px; padding: 1px 6px;
  background: #e8f7ee; color: var(--fk-ok); vertical-align: 1px; }

/* ---------- 프리셋 그리드(검정 썸네일) ---------- */
.fk-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.fk-preset { cursor: pointer; text-align: center; }
.fk-preset .box { border-radius: 10px; border: 2px solid transparent; overflow: hidden;
  background: #16161c; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; }
.fk-preset.v .box { aspect-ratio: 9/16; }
.fk-preset.on .box { border-color: var(--fk-brand); }
.fk-preset .nm { font-size: 11.5px; color: var(--fk-ink-2); margin-top: 6px; font-weight: 600; text-align: center; white-space: normal; word-break: break-word; line-height: 1.35; }
.fk-preset .box img { width: 100%; height: 100%; object-fit: cover; }

/* 비디오 템플릿 스튜디오 — 밝은 화이트 카드 프레임에 미리보기를 담아 전체를 밝게(2026-08-06 사장님 디자인 지시) */
.tpl-studio .fk-preset { background: #fff; border: 1px solid var(--fk-line); border-radius: 18px;
  padding: 12px 12px 14px; box-shadow: 0 1px 2px rgba(16,18,40,.04), 0 8px 20px rgba(16,18,40,.05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.tpl-studio .fk-preset:hover { transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(16,18,40,.08), 0 16px 34px rgba(99,91,255,.12); border-color: #d9d6f7; }
.tpl-studio .fk-preset .box { border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.tpl-studio .fk-preset .nm { margin-top: 11px; font-size: 13px; font-weight: 700; color: var(--fk-ink); }
/* 새 템플릿 만들기 카드 — 브랜드 톤의 밝고 초대감 있는 빈 카드 */
.tpl-studio .tpl-new .box { flex-direction: column; gap: 7px; color: var(--fk-brand);
  background: linear-gradient(165deg, #f7f6ff, #eef0ff); box-shadow: inset 0 0 0 1.5px #ddd9fb; }
.tpl-studio .tpl-new:hover .box { background: linear-gradient(165deg, #f2f0ff, #e6e9ff); box-shadow: inset 0 0 0 1.5px #c9c3f7; }
.tpl-new-ic { font-size: 30px; font-weight: 400; line-height: 1; color: var(--fk-brand); }
.tpl-new-t { font-size: 13px; font-weight: 800; color: var(--fk-ink); }
.tpl-new-s { font-size: 11px; color: var(--fk-ink-3); font-weight: 600; }

/* ---------- 모달 ---------- */
.fk-modal-bg { position: fixed; inset: 0; background: rgba(12,12,18,.5); display: flex;
  align-items: center; justify-content: center; z-index: 100; padding: 18px; }
.fk-modal { background: #fff; border-radius: 18px; box-shadow: var(--fk-shadow-pop);
  width: min(520px, 100%); max-height: 90vh; overflow-y: auto; padding: 26px; position: relative;
  box-sizing: border-box; }
.fk-modal .x { position: absolute; top: 14px; right: 16px; border: 0; background: none;
  font-size: 22px; color: var(--fk-ink-3); cursor: pointer; line-height: 1; }
.fk-modal h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.fk-modal .desc { font-size: 13px; color: var(--fk-ink-2); margin: 0 0 16px; line-height: 1.6; }
.fk-check-list { display: flex; flex-direction: column; gap: 9px; margin: 14px 0; }
.fk-check-list .it { display: flex; gap: 9px; font-size: 13px; color: var(--fk-ink-2); align-items: baseline; }
.fk-check-list .it b { color: var(--fk-ink); }
.fk-check-list .it::before { content: "✓"; color: var(--fk-brand); font-weight: 900; }

/* ---------- 드롭다운 ---------- */
.fk-menu { position: absolute; background: #fff; border: 1px solid var(--fk-line); border-radius: 12px;
  box-shadow: var(--fk-shadow-pop); padding: 6px; z-index: 90; min-width: 150px; }
.fk-menu .it svg { width: 15px; height: 15px; flex: none; }
.fk-menu .it { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--fk-ink-2); cursor: pointer; white-space: nowrap; }
.fk-menu .it:hover { background: var(--fk-bg-soft); color: var(--fk-ink); }
.fk-menu .it.on { color: var(--fk-ink); font-weight: 800; }

/* ---------- 빈 상태 / 배지 / 기타 ---------- */
.fk-empty { text-align: center; padding: 46px 16px; color: var(--fk-ink-3); font-size: 13px; }
.fk-empty svg { width: 34px; height: 34px; margin-bottom: 10px; color: #d6d6de; }
.fk-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 11px;
  font-size: 11.5px; font-weight: 800; background: var(--fk-brand-soft); color: var(--fk-brand); }
.fk-crumb { font-size: 12.5px; color: var(--fk-ink-3); margin-bottom: 10px; }
.fk-crumb a { color: var(--fk-ink-3); cursor: pointer; }
.fk-crumb b { color: var(--fk-ink); font-weight: 700; }
.fk-toggle { position: relative; width: 40px; height: 22px; border-radius: 999px; background: #dcdce4;
  cursor: pointer; transition: background .15s; flex: 0 0 auto; }
.fk-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.fk-toggle.on { background: var(--fk-brand); }
.fk-toggle.on::after { left: 20px; }
.fk-banner { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px;
  color: var(--fk-ink-2); background: var(--fk-bg-soft); border: 1px solid var(--fk-line);
  border-radius: 999px; padding: 8px 16px; }
.fk-banner b { color: var(--fk-brand); }

/* ---------- 기능 소개 카드(홈 하단·랜딩) ---------- */
.fk-promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.fk-promo { border: 1px solid var(--fk-line); border-radius: var(--fk-r-card); padding: 18px;
  background: #fff; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.fk-promo h4 { margin: 0; font-size: 14.5px; font-weight: 800; }
.fk-promo p { margin: 0 0 10px; font-size: 12.5px; color: var(--fk-ink-2); line-height: 1.6; }
.fk-promo .go { margin-top: auto; align-self: flex-start; }
.fk-promo .art { position: absolute; right: 10px; bottom: 8px; font-size: 34px; opacity: .9; }
.fk-promo.shot { padding: 0; }
.fk-promo.shot .shot-img { background: var(--fk-brand-soft); padding: 18px 18px 0; }
.fk-promo.shot .shot-img img { width: 100%; border-radius: 10px 10px 0 0; border: 1px solid var(--fk-line);
  border-bottom: 0; display: block; }
.fk-promo.shot .body { padding: 16px 18px 18px; }

/* ---------- 랜딩 ---------- */
.fk-land { background: #fff; }
.fk-land-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1200px;
  margin: 0 auto; padding: 16px 24px; }
.fk-land-sec { max-width: 1200px; margin: 0 auto; padding: 64px 24px; text-align: center; }
.fk-land-sec.tight { padding-top: 24px; }
.fk-land h1 { font-size: clamp(26px, 4.6vw, 44px); font-weight: 900; letter-spacing: -1px;
  line-height: 1.25; margin: 0 0 18px; }
.fk-land h1 .hl { background: linear-gradient(90deg, var(--fk-brand), #b86bff);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.fk-land-hero { background: var(--fk-grad-hero); border-radius: 0 0 28px 28px; padding-bottom: 70px; }
.fk-land-hero .fk-hero-box { max-width: 520px; background: rgba(255,255,255,.8); }
.fk-land-sub { font-size: 15px; color: var(--fk-ink-2); margin: 0 0 26px; line-height: 1.7; }
.fk-land-demo { max-width: 860px; margin: 34px auto 0; border-radius: 18px; overflow: hidden;
  box-shadow: var(--fk-shadow-pop); border: 1px solid var(--fk-line); background: #101223; }
.fk-land-demo img { width: 100%; display: block; }
.fk-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fk-stat { min-width: 170px; background: var(--fk-bg-soft); border: 1px solid var(--fk-line);
  border-radius: var(--fk-r-card); padding: 20px; }
.fk-stat b { display: block; font-size: 26px; font-weight: 900; letter-spacing: -.5px; }
.fk-stat span { font-size: 12.5px; color: var(--fk-ink-2); }
.fk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.fk-step { background: #fff; border: 1px solid var(--fk-line); border-radius: var(--fk-r-card);
  padding: 24px; text-align: left; }
.fk-step .no { width: 30px; height: 30px; border-radius: 9px; background: var(--fk-ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
  margin-bottom: 12px; }
.fk-step h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.fk-step p { margin: 0; font-size: 13px; color: var(--fk-ink-2); line-height: 1.65; }
.fk-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.fk-feat { border-radius: 20px; padding: 26px; text-align: left; border: 1px solid var(--fk-line);
  background: linear-gradient(160deg, #faf7ff, #f2f6ff); }
.fk-feat .fk-eyebrow { display: block; margin-bottom: 8px; }
.fk-feat h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.fk-feat p { margin: 0 0 14px; font-size: 13px; color: var(--fk-ink-2); line-height: 1.7; }
.fk-feat .mock { border-radius: 12px; overflow: hidden; border: 1px solid var(--fk-line); background: #fff; }
.fk-feat .mock img { width: 100%; display: block; }
.fk-land-foot { border-top: 1px solid var(--fk-line); padding: 26px 24px 40px; text-align: center;
  font-size: 12px; color: var(--fk-ink-3); }
.fk-land-foot a { color: var(--fk-ink-3); margin: 0 8px; }

/* ---------- 로그인 ---------- */
.fk-auth-wrap { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }
.fk-auth-top { border-bottom: 1px solid var(--fk-line); padding: 14px 0; text-align: center; }
.fk-auth-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px 16px; }
.fk-auth-card { width: min(380px, 100%); }
.fk-auth-card .tabbar { display: flex; }
.fk-auth-card .tabbar .tb { flex: 1; text-align: center; padding: 11px; font-size: 13px; font-weight: 800;
  border-radius: 12px 12px 0 0; background: #ececf1; color: var(--fk-ink-3); cursor: pointer; }
.fk-auth-card .tabbar .tb.on { background: var(--fk-brand); color: #fff; }
.fk-auth-card .bd { background: var(--fk-bg-soft); border: 1px solid var(--fk-line); border-top: 0;
  border-radius: 0 0 14px 14px; padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 11px; }
.fk-auth-card .logo { text-align: center; font-size: 19px; font-weight: 900; margin-bottom: 4px; }
.fk-auth-card .logo b { color: var(--fk-brand); }
.fk-auth-card input { background: #fff; }
.fk-auth-card .split { display: flex; align-items: center; gap: 10px; color: var(--fk-ink-3);
  font-size: 11.5px; margin: 4px 0; }
.fk-auth-card .split::before, .fk-auth-card .split::after { content: ""; height: 1px; flex: 1;
  background: var(--fk-line); }
.fk-auth-card .foot { text-align: center; font-size: 12.5px; color: var(--fk-ink-2); }
.fk-auth-card .foot a { color: var(--fk-ink); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  /* minmax(0,1fr): 자식 min-content가 트랙을 뷰포트보다 넓히는 것 차단 */
  .fk-res { grid-template-columns: minmax(0, 1fr); }
  .fk-res-list, .fk-res-center, .fk-res-side { min-width: 0; }
  /* 데스크톱의 뷰포트 고정+내부 스크롤을 해제 — 모바일은 페이지 스크롤 하나로 */
  .fk-content.wide .fk-res { height: auto; overflow: visible; }
  .fk-content.wide .fk-res .fk-res-list, .fk-content.wide .fk-res .fk-res-center,
  .fk-content.wide .fk-res .fk-res-side { height: auto; overflow: visible; }
  /* 리스트: 라벨 한 줄 + 카드 가로 스와이프(스크롤은 .fk-res-items 전담 —
     상위 overflow:visible/hidden 오버라이드에 안 죽는다) */
  .fk-res-list { border-right: 0; border-bottom: 1px solid var(--fk-line); padding: 10px 0 10px 14px; }
  .fk-res-list .hd { margin: 0 0 8px; font-size: 13px; }
  .fk-res-items { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; padding: 2px 14px 4px 0; }
  .fk-res-item { flex: 0 0 200px; }
  .fk-res-side { border-left: 0; border-top: 1px solid var(--fk-line); }
  .fk-res-head { padding: 14px 14px 0; }
  .fk-content { padding: 18px 14px 80px; }
  /* wide 모드(콘텐츠 상세·스튜디오)는 데스크톱 기준 padding:0 이라 모바일에서 마지막
     내용(Auto BGM 등)이 하단 고정 네비(58px) 뒤에 가려 스크롤로도 안 보였다(2026-08-06
     사장님 제보). 네비 높이 + 안전영역만큼 하단 여백을 준다. */
  .fk-content.wide { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 구 style.css 잔재 무력화(전환기 오버라이드) ---------- */
#topbar.fk-top { display: flex; position: sticky; top: 0; height: var(--fk-top-h);
  background: rgba(255,255,255,.92); padding: 0 20px; box-shadow: none;
  border-bottom: 1px solid var(--fk-line); }
#sidenav.fk-side { display: flex; position: sticky; top: 0; transform: none;
  width: var(--fk-side-w); background: var(--fk-bg); box-shadow: none; border-right: 1px solid var(--fk-line); }
#sidenav .fk-nav a { color: var(--fk-ink-2); background: none; border: 0; font-size: 13.5px; }
#sidenav .fk-nav a:hover { background: var(--fk-bg-soft); color: var(--fk-ink); }
#sidenav .fk-nav a.on { background: #f2f2f6; color: var(--fk-ink); }
#hamburger { display: none; }
@media (max-width: 900px) {
  #hamburger { display: flex; }
  /* 모바일 오프캔버스 — 기본 닫힘. 위 #sidenav.fk-side(transform:none)보다 뒤에 와야 이긴다 */
  #sidenav.fk-side { position: fixed; top: 0; left: 0; height: 100dvh; width: 272px; max-width: 82vw;
    z-index: 60; transform: translateX(-100%); transition: transform .24s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.16); }
  .fk-shell.nav-open #sidenav.fk-side, #shell.nav-open #sidenav.fk-side { transform: translateX(0); }
  #nav-scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(10,12,24,.42);
    opacity: 0; pointer-events: none; transition: opacity .24s; }
  #shell.nav-open #nav-scrim { opacity: 1; pointer-events: auto; }
  .fk-content.wide .clips-grid, .fk-content.wide .empty, .fk-content.wide > .card { margin-left: 0; margin-right: 0; }
}
.fk-land h1, .fk-content h1 { border: 0; }
.fk-land h1::before, .fk-hero h2::before { display: none; content: none; }
.fk-land h1 { padding-left: 0; border-left: 0; border-image: none; }
@media (min-width: 821px) { #topbar.fk-top { display: flex !important; } }
.fk-content.wide .clips-grid, .fk-content.wide .empty, .fk-content.wide > .card { margin-left: 28px; margin-right: 28px; }

/* ---------- 템플릿 스킨 미리보기(프리셋 카드 내부) ---------- */
.tpl-mock { width: 100%; height: 100%; display: flex; flex-direction: column;
  justify-content: space-between; padding: 10px 8px; box-sizing: border-box; text-align: center; }
.tpl-mock video { width: 88%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px;
  margin: 0 auto; display: block; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.tpl-mock .tm-t { font-size: 10px; font-weight: 800; line-height: 1.35; }
.tpl-mock .tm-t span { display: inline-block; padding: 1px 5px; border-radius: 3px; }
.tpl-mock .tm-body { flex: 1; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.28); font-size: 9px; }
.tpl-mock .tm-sub { font-size: 11px; font-weight: 800; line-height: 1.4; }
.tpl-mock .tm-sub .hl { border-radius: 3px; }

/* ---------- 변환 대기 화면(피카 스타일) ---------- */
.fk-wait { text-align: center; padding: 90px 20px 60px; }
.fk-wait .mark { display: inline-flex; gap: 10px; margin-bottom: 30px; }
.fk-wait .mark i { width: 26px; height: 64px; border-radius: 8px; display: block;
  background: linear-gradient(160deg, #FF2E7E, #8E7CFF);
  animation: fkPulse 1.1s ease-in-out infinite; }
.fk-wait .mark i:nth-child(2) { animation-delay: .18s; background: linear-gradient(200deg, #FFB020, #FF2E7E); }
.fk-wait .mark i:nth-child(3) { animation-delay: .36s; background: linear-gradient(160deg, #8E7CFF, #33B5FF); }
@keyframes fkPulse { 0%, 100% { transform: scaleY(.55); opacity: .65; } 50% { transform: scaleY(1); opacity: 1; } }
.fk-wait .msg { font-size: 14px; color: var(--fk-ink-2); margin-bottom: 14px; }
.fk-wait .eta { font-size: 15px; color: var(--fk-ink); margin-bottom: 6px; }
.fk-wait .eta b { color: var(--fk-brand); font-size: 22px; letter-spacing: -.3px; }
.fk-wait .stage { font-size: 12.5px; color: var(--fk-ink-3); margin-bottom: 30px; }

/* ---------- 색상 피커 (공통) ---------- */
.fk-cpick { position: absolute; z-index: 300; background: #fff; border: 1px solid var(--fk-line);
  border-radius: 14px; padding: 12px; width: 252px; box-shadow: 0 14px 40px rgba(20,10,40,.18); box-sizing: border-box; }
.fk-cpick .sv { width: 100%; border-radius: 9px; cursor: crosshair; display: block; touch-action: none; }
.fk-cpick .huerow { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.fk-cpick .eye { border: 0; background: none; cursor: pointer; color: var(--fk-ink-2); padding: 2px; }
.fk-cpick .eye svg { width: 16px; height: 16px; }
.fk-cpick .hue { flex: 1; -webkit-appearance: none; height: 10px; border-radius: 6px; outline: 0;
  background: linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.fk-cpick .hue::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid #333; cursor: pointer; }
.fk-cpick .pal { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fk-cpick .pw { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 1.5px solid rgba(0,0,0,.12); }
.fk-cpick .pw.none { background: repeating-linear-gradient(45deg,#eee 0 5px,#fff 5px 10px); position: relative; }
.fk-cpick .pw.none::after { content: ""; position: absolute; inset: 45% 2px auto; height: 2px; background: #C6493A; transform: rotate(-45deg); }
.fk-cpick .hexrow { display: flex; gap: 6px; margin-top: 10px; }
.fk-cpick .hexrow .hex { flex: 1; border: 1px solid var(--fk-line); border-radius: 8px; padding: 7px 10px;
  font-size: 13px; font-family: inherit; outline: 0; }
.fk-cpick .hexrow .star { border: 1px solid var(--fk-line); background: none; border-radius: 8px;
  width: 34px; cursor: pointer; font-size: 15px; color: var(--fk-ink-2); }
/* 색상 동그라미(행 안에서 피커 여는 트리거) */
.cdot { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(0,0,0,.14);
  flex: none; display: inline-block; box-sizing: border-box; }
.cdot.none { background: repeating-linear-gradient(45deg,#eee 0 5px,#fff 5px 10px); }
/* 스텝퍼/미니 토글 버튼 */
.fk-mini { display: flex; gap: 6px; align-items: center; }
.fk-mini .mbtn { min-width: 34px; height: 32px; border: 1px solid var(--fk-line); border-radius: 8px; background: #fff;
  font-size: 13px; font-weight: 800; cursor: pointer; color: var(--fk-ink-2); }
.fk-mini .mbtn.on { background: #17151d; color: #fff; border-color: #17151d; }
.fk-mini .num { width: 64px; height: 32px; border: 1px solid var(--fk-line); border-radius: 8px; text-align: center;
  font-size: 13px; font-family: inherit; outline: 0; box-sizing: border-box; }
.fk-mini .num::-webkit-outer-spin-button, .fk-mini .num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ts-row .fk-mini { flex-wrap: wrap; min-width: 0; }
.ts-row .fk-mini .num:nth-child(n+2) { width: 52px; }
.fk-mini .num:only-child { width: 64px; }

/* 제목 스타일 프리셋 칩 */
.tpre-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.tpre-chip { aspect-ratio: 13/8; border-radius: 10px; background: #f4f3f7; border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .12s; }
.tpre-chip:hover { border-color: var(--fk-line-2, #d8d5e2); }
.tpre-chip.on { border-color: #17151d; }
.tpre-chip:nth-child(3n) { background: #eceaf2; }

/* 상단 페이지 헤더 — 콘텐츠/템플릿 스튜디오 공통, 높이 고정으로 동일감 강제 */
.fk-res-head { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px;
  border-bottom: 1px solid var(--fk-line); box-sizing: border-box; flex: none; }
.fk-res-head .fk-btn, .fk-res-head .fk-top-btn { height: 34px; padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; }

/* ---------- 자막 애니메이션 프리셋 카드 ---------- */
.sfx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.sfx-card { cursor: pointer; text-align: center; }
.sfx-card .bx { aspect-ratio: 16/9; border-radius: 10px; background: #17171f; display: flex; align-items: center;
  justify-content: center; border: 2px solid transparent; overflow: hidden; padding: 0 6px; box-sizing: border-box; }
.sfx-card:hover .bx { border-color: #3a3a48; }
.sfx-card.on .bx { border-color: var(--fk-brand); }
.sfx-card .nm { font-size: 11.5px; color: var(--fk-ink-2); margin-top: 5px; }
.sfx-demo { font-size: 11.5px; font-weight: 800; color: #fff; line-height: 1.4; }
.sfx-demo b { color: #FFD60A; font-weight: 800; }
/* 데모/미리보기 공용 애니메이션 — 단어 효과는 b(강조 단어), 그룹 효과는 전체 */
@keyframes sfxPop { 0%, 50% { transform: scale(1); } 58% { transform: scale(.4); } 70% { transform: scale(1.1); } 78%, 100% { transform: scale(1); } }
@keyframes sfxBounce { 0%, 50% { transform: translateY(0) scale(1); } 58% { transform: translateY(-6px) scale(1.15); } 70% { transform: translateY(1px) scale(.96); } 80%, 100% { transform: translateY(0) scale(1); } }
@keyframes sfxFade { 0% { opacity: 0; } 35%, 100% { opacity: 1; } }
@keyframes sfxSlide { 0% { transform: translateY(9px); opacity: 0; } 35%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes sfxElev { 0% { transform: translateY(5px); opacity: .1; } 45%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes sfxKara { 0% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
@keyframes sfxNeon { 0%, 100% { text-shadow: 0 0 5px #FF2E7E, 0 0 12px #FF2E7E; } 50% { text-shadow: 0 0 1px #FF2E7E; } }
@keyframes sfxBoxHL { 0%, 45% { background: #3B6CFF; } 55%, 100% { background: #FF2E7E; } }
.sfx-pop b, .sfx-bounce b, .sfx-fadein b, .sfx-slideup b, .sfx-elevate b { display: inline-block; }
.sfx-pop b { animation: sfxPop 1.7s infinite; }
.sfx-bounce b { animation: sfxBounce 1.7s infinite; }
.sfx-fadein b { animation: sfxFade 1.9s infinite; }
.sfx-slideup b { animation: sfxSlide 1.9s infinite; }
.sfx-elevate b { animation: sfxElev 2s infinite; }
.sfx-boxhl b { color: #fff; padding: 0 4px; border-radius: 3px; animation: sfxBoxHL 1.8s infinite; }
.sfx-card .sfx-karaoke b, .sfx-card .sfx-stream b { background: linear-gradient(90deg, #FFD60A 50%, #ffffff 50%); background-size: 201% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: sfxKara 1.9s infinite; }
.sfx-card .sfx-stream b { animation-timing-function: steps(4, jump-none); }
.sfx-neon { animation: sfxNeon 1.7s infinite; }
.sfx-fadein_g { display: inline-block; animation: sfxFade 1.9s infinite; }
.sfx-pop_g { display: inline-block; animation: sfxPop 1.7s infinite; }
.sfx-slideup_g { display: inline-block; animation: sfxSlide 1.9s infinite; }
.sfx-elevate_g { display: inline-block; animation: sfxElev 2s infinite; }
.sfx-boxline { background: rgba(0,0,0,.78); padding: 2px 7px; border-radius: 4px; }


/* 템플릿 스튜디오 3열 — 화면 고정, 각 열 내부 스크롤(피카 동일) */
.ts-wrap { display: grid; grid-template-columns: 250px 330px 1fr; gap: 16px; align-items: start;
  padding: 18px 20px; height: calc(100vh - var(--fk-top-h, 60px) - 52px); box-sizing: border-box; overflow: hidden; }
.ts-wrap > aside, .ts-wrap > section { max-height: 100%; overflow-y: auto; box-sizing: border-box; }
/* 프리셋 그리드는 패널 안에서만 스크롤 */
.ts-wrap > section { display: flex; flex-direction: column; }
.ts-wrap > section > #ts-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ts-wrap #ts-panel > *:not(.sfx-grid) { flex: none; }
.ts-wrap .sfx-grid { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.ts-wrap .tpre-grid { max-height: 46vh; overflow-y: auto; padding-right: 4px; }

/* ---------- 내 정보 관리(세팅 레이아웃, 피카 동일) ---------- */
.st-wrap { display: grid; grid-template-columns: 200px 1fr; min-height: calc(100vh - var(--fk-top-h, 60px)); }
.st-side { border-right: 1px solid var(--fk-line); padding: 12px 10px; }
.st-back { display: block; font-size: 12.5px; color: var(--fk-ink-2); cursor: pointer; padding: 8px 10px 14px; }
.st-back:hover { color: var(--fk-ink); }
.st-body { padding: 34px 24px 80px; width: min(800px, 100%); margin: 0 auto; box-sizing: border-box; }
.st-h1 { font-size: 20px; font-weight: 800; margin: 0 0 14px; border: 0; }
.st-h3 { font-size: 14.5px; font-weight: 800; margin: 0; }
.st-row-head { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 10px; }
.st-link { font-size: 12.5px; color: var(--fk-ink-2); text-decoration: underline; cursor: pointer; }
.st-plancard { display: flex; justify-content: space-between; align-items: center; padding: 20px; }
.st-plan-ico { width: 20px; height: 20px; border-radius: 50%; display: inline-block; vertical-align: -4px;
  margin-right: 8px; background: linear-gradient(135deg, var(--fk-brand), var(--fk-violet)); }
.st-price { font-size: 24px; font-weight: 800; margin-top: 10px; }
.st-price small { font-size: 12px; color: var(--fk-ink-2); font-weight: 600; margin-left: 2px; }
.st-paycard { padding: 22px; }
.st-paycard b { font-size: 14.5px; }
.st-paycard p { color: var(--fk-ink-2); font-size: 13px; margin: 6px 0 14px; }
.st-uhead { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 10px; }
.st-tiles { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--fk-line); border-radius: 12px; overflow: hidden; background: #fff; }
.st-tile { padding: 16px 18px; border-right: 1px solid var(--fk-line); }
.st-tile:last-child { border-right: 0; }
.st-tile span { font-size: 12px; color: var(--fk-ink-2); display: block; margin-bottom: 6px; }
.st-tile b { font-size: 19px; }
.st-ledger .grp { font-size: 12px; color: var(--fk-ink-2); padding: 12px 4px 8px; border-bottom: 1px solid var(--fk-line); }
.st-lrow { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid #f1eff6; font-size: 13.5px; }
.st-lrow .tm { color: var(--fk-ink-3); font-size: 11.5px; margin-top: 2px; }
.st-lrow .src { font-size: 11px; background: #f4f3f8; border-radius: 6px; padding: 3px 8px; color: var(--fk-ink-2); }
.st-lrow .amt { margin-left: auto; font-weight: 800; }
.st-lrow .amt.plus { color: #0FA562; }
.st-promo { background: linear-gradient(120deg, #fdf0f4, #eef2fd); border-radius: 14px; padding: 60px 24px; text-align: center; }
.st-promo input { background: none; border: 0; border-bottom: 1.5px solid #cfc9dd; font-size: 20px; text-align: center;
  padding: 8px 6px; outline: 0; width: min(360px, 80%); color: var(--fk-ink); font-family: inherit; }
.st-promo input::placeholder { color: #b6b0c6; }
.st-promo button { display: block; margin: 18px auto 0; border: 0; border-radius: 8px; padding: 9px 18px; font-size: 13px;
  background: #e9e6f2; color: #9a95ab; cursor: not-allowed; font-weight: 700; font-family: inherit; }
.st-promo button.ok { background: #17151d; color: #fff; cursor: pointer; }

/* 세팅 모드 — 메인 사이드바 숨김(피카 동일: 세팅 전용 슬림 사이드바만) */
.st-mode .fk-side, .st-mode #sidenav.fk-side { display: none; }

/* ---------- 에디터 (피카 구조) ---------- */
.ed-mode .fk-side, .ed-mode #sidenav.fk-side, .ed-mode .fk-top, .ed-mode #topbar.fk-top { display: none !important; }
.ed-top { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px;
  border-bottom: 1px solid var(--fk-line); background: #fff; }
.ed-back { cursor: pointer; font-size: 17px; color: var(--fk-ink-2); }
.ed-title { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-top-r { margin-left: auto; display: flex; gap: 8px; }
.ed-top-r .fk-btn, .ed-top-r .fk-top-btn { height: 34px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
.ed-main { display: grid; grid-template-columns: 300px 1fr 300px 76px;
  height: calc(100vh - 52px - 172px); min-height: 340px; overflow: hidden; }
.ed-main > * { min-height: 0; }
.ed-script { border-right: 1px solid var(--fk-line); background: #fff; overflow-y: auto; padding-top: 12px; }
.ed-script-head { display: flex; align-items: center; padding: 2px 14px 10px; }
.ed-script-head b { font-size: 14px; }
.ed-lines { padding: 0 10px 20px; }
.ed-line { display: flex; gap: 8px; padding: 7px 6px; border-radius: 9px; }
.ed-line.on { background: #f3effc; }
.ed-line .tm { flex: none; font-size: 10.5px; color: var(--fk-ink-3); padding-top: 4px; cursor: pointer; width: 44px; }
.ed-line .tx { flex: 1; font-size: 13.5px; line-height: 1.55; outline: 0; border-radius: 6px; padding: 2px 4px; }
.ed-line .tx:focus { background: #fff; box-shadow: 0 0 0 1.5px var(--fk-violet); }
.ed-stage { display: flex; flex-direction: column; background: #8b8b93; min-width: 0; }
.ed-stagebar { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px;
  background: rgba(255,255,255,.92); border-bottom: 1px solid var(--fk-line); }
.ed-canvas { flex: 1; position: relative; overflow: auto; min-height: 0; }
.ed-canvas video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  max-height: 94%; max-width: 92%; border-radius: 6px; background: #000; }
.ed-canvas video.free { position: static; transform: none; margin: 10px auto; display: block; max-height: none; max-width: none; }
.ed-panel { border-left: 1px solid var(--fk-line); background: #fff; overflow-y: auto; padding: 14px; box-sizing: border-box; }
.ed-p-t { font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.ed-tplgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ed-rail { border-left: 1px solid var(--fk-line); background: #fff; display: flex; flex-direction: column;
  gap: 4px; padding: 10px 6px; overflow-y: auto; }
.ed-rail .rb { border: 0; background: none; border-radius: 10px; padding: 9px 2px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--fk-ink-2); font-size: 10.5px; font-weight: 700; }
.ed-rail .rb svg { width: 17px; height: 17px; }
.ed-rail .rb:hover { background: var(--fk-bg-soft); }
.ed-rail .rb.on { background: #f3effc; color: var(--fk-ink); box-shadow: inset 0 0 0 1px #e2d9f8; }
.ed-bottom { height: 172px; border-top: 1px solid var(--fk-line); background: #fff; display: flex; flex-direction: column;
  position: relative; z-index: 5; }
.ed-transport { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--fk-line); }
.ed-transport button[data-tp] { border: 0; background: none; cursor: pointer; font-size: 12px; color: var(--fk-ink-2);
  padding: 6px 8px; border-radius: 8px; }
.ed-transport button[data-tp]:hover { background: var(--fk-bg-soft); color: var(--fk-ink); }
.ed-transport #ed-play { font-size: 15px; color: var(--fk-ink); }
.ed-time { font-size: 12px; color: var(--fk-ink-2); margin-left: 8px; }
.ed-time b { color: var(--fk-ink); font-weight: 800; }
.ed-tl-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; }
.ed-tl { position: relative; height: 100%; min-width: 100%; padding: 4px 0 8px; box-sizing: border-box; }
.ed-ruler { position: relative; height: 20px; border-bottom: 1px solid var(--fk-line); margin: 0 14px; }
.ed-ruler span { position: absolute; top: 2px; font-size: 10px; color: var(--fk-ink-3); transform: translateX(-50%); }
.ed-track { position: relative; height: 46px; margin: 10px 14px 0; }
.ed-track .blk { position: absolute; top: 0; height: 40px; background: #efe9fb; border: 1.5px solid #d9cdf5;
  border-radius: 8px; font-size: 10.5px; color: #4a3f6b; padding: 3px 6px; box-sizing: border-box;
  overflow: hidden; cursor: pointer; display: flex; align-items: center; white-space: nowrap; }
.ed-track .blk:hover { border-color: var(--fk-violet); }
.ed-track .blk.on { background: #e2d6fb; border-color: var(--fk-violet); }
.ed-playhead { position: absolute; top: 4px; bottom: 8px; width: 2px; background: var(--fk-brand);
  margin-left: 14px; pointer-events: none; }
.ed-playhead::before { content: ""; position: absolute; top: -1px; left: -4px; border: 5px solid transparent;
  border-top-color: var(--fk-brand); }

/* 재렌더 중 표시 — 리스트 배지 + 플레이어 오버레이 */
.fk-rerender { color: var(--fk-violet); font-weight: 800; animation: rrPulse 1.4s infinite; }
@keyframes rrPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.fk-rerender-ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; background: rgba(14,12,20,.62); color: #fff; font-size: 13.5px;
  font-weight: 800; text-align: center; line-height: 1.7; border-radius: inherit; z-index: 3; }
.fk-rerender-ov small { font-weight: 600; color: #cfc9dd; }

/* 상단 '자동 업로드' 버튼 — 레거시 로고용 .brand(#topbar .brand 20px/800)와 클래스명 충돌 방어 */
#topbar .fk-top-btn.brand { font-size: 12.5px; font-weight: 700; letter-spacing: 0; }

/* ---------- 모바일 마감(파일 끝 배치 필수 — 위 기본 규칙들과 동순위라 뒤가 이긴다) ---------- */
@media (max-width: 900px) {
  /* 세팅(내 정보 관리): 좌 메뉴를 상단 가로 칩으로 접기 */
  .st-mode #hamburger { display: none; }   /* 세팅에선 메인 사이드바가 없어 햄버거 무의미 */
  .st-wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .st-side { border-right: 0; border-bottom: 1px solid var(--fk-line); padding: 10px 14px; }
  .st-side .fk-nav { flex-direction: row; overflow-x: auto; gap: 4px; }
  .st-side .fk-nav a { flex: 0 0 auto; white-space: nowrap; }
  .st-back { padding: 6px 2px 10px; }
  .st-body { padding: 20px 14px 80px; }
  .st-tiles { grid-template-columns: 1fr; }
  .st-tile { border-right: 0; border-bottom: 1px solid var(--fk-line); }
  .st-tile:last-child { border-bottom: 0; }

  /* 구간 확인 화면 생성 바 — 하단 고정 네비(58px) 위로 올려 버튼 가림 방지 */
  .plan-bar { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 20; }

  /* 템플릿 스튜디오: 데스크톱 3열 화면고정 → 세로 스택(미리보기 → 설정 → 서브패널) */
  .ts-wrap { display: flex; flex-direction: column; height: auto; overflow: visible;
    padding: 14px; gap: 14px; }
  .ts-wrap > aside, .ts-wrap > section { max-height: none; overflow: visible; width: 100%; }
  .ts-wrap > aside:last-child { order: -1; }   /* 폰 목업 미리보기를 맨 위로 */
  .ts-wrap .sfx-grid, .ts-wrap .tpre-grid { max-height: 44vh; overflow-y: auto; }
  /* 스튜디오·콘텐츠 공통 앱바: 버튼이 세로로 찌그러지지 않게 가로 스크롤 */
  .fk-res-head { overflow-x: auto; padding: 0 14px; }
  .fk-res-head .fk-btn, .fk-res-head .fk-top-btn { flex: none; white-space: nowrap; }
  .fk-res-head #te-name { flex: 0 1 140px; min-width: 60px; }
}

/* ===== 요금제(pricing) — 2026-08-05 ===== */
.fk-price-head{text-align:center;max-width:720px;margin:0 auto}
.fk-price-toggle{display:inline-flex;align-items:center;gap:2px;background:var(--fk-bg-soft);border:1px solid var(--fk-line);border-radius:999px;padding:4px;margin-top:22px}
.fk-price-toggle button{border:0;background:transparent;color:var(--fk-ink-2);padding:9px 20px;border-radius:999px;cursor:pointer;font-weight:700;font-size:13px;white-space:nowrap}
.fk-price-toggle button.on{background:var(--fk-brand);color:#fff}
.fk-price-toggle .save{font-size:12px;opacity:.95}
.fk-price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;max-width:1180px;margin:30px auto 0;align-items:stretch;justify-content:center}
.fk-price-card{background:var(--fk-bg-soft);border:1px solid var(--fk-line);border-radius:var(--fk-r-card);padding:24px 20px;display:flex;flex-direction:column;position:relative}
.fk-price-card.rec{border-color:var(--fk-brand);box-shadow:var(--fk-shadow-pop)}
.fk-price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--fk-grad-hero);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.02em;padding:5px 15px;border-radius:999px;white-space:nowrap}
.fk-price-card h3{font-size:18px;font-weight:800;margin:0;color:var(--fk-ink)}
.fk-price-desc{color:var(--fk-ink-2);font-size:12.5px;margin:6px 0 0;min-height:34px;line-height:1.4}
.fk-price-amt{margin:16px 0 0;font-size:27px;font-weight:800;color:var(--fk-ink);line-height:1.1}
.fk-price-amt small{font-size:13px;font-weight:600;color:var(--fk-ink-2);margin-left:2px}
.fk-price-was{margin-top:6px;font-size:12px;color:var(--fk-ink-3);min-height:16px}
.fk-price-was s{color:var(--fk-ink-3)}
.fk-price-was b{color:var(--fk-brand)}
.fk-price-min{background:var(--fk-brand-soft);color:var(--fk-ink);border-radius:12px;padding:10px 12px;font-weight:800;text-align:center;margin:14px 0 2px;font-size:14px}
.fk-price-min small{display:block;font-size:11px;font-weight:600;color:var(--fk-ink-2);margin-top:1px}
.fk-price-feats{list-style:none;padding:0;margin:14px 0 18px;flex:1;display:flex;flex-direction:column;gap:10px}
.fk-price-feats li{display:flex;gap:8px;align-items:flex-start;font-size:12.8px;color:var(--fk-ink);line-height:1.45}
.fk-price-feats li svg{flex:0 0 15px;width:15px;height:15px;color:var(--fk-brand);margin-top:1px}
.fk-price-feats li.up{font-weight:700}
.fk-price-feats li.up svg{color:var(--fk-brand-2)}
.fk-price-card .fk-btn.full{margin-top:auto}
/* 로그인 요금제(fk-price-fit) — 스크롤 없는 한 화면, 5차 전면 재설계(2026-08-07).
   위아래 같은 밀도의 수직 리듬: 헤더(여유 간격) → 토글 → 카드(자연높이와 풀스트레치의
   중간, 기능목록은 카드 안에서 세로 중앙) → 힌트 → 푸터(맨 아래). 남는 공간은 카드
   위/아래에 반씩. 비로그인 랜딩 요금제는 기존 그대로. */
.fk-content:has(.fk-price-fit){padding:20px 28px 0;display:flex;flex-direction:column}
.fk-price-fit{flex:1;display:flex;flex-direction:column;min-height:0}
.fk-price-fit .fk-land-sec{flex:1;display:flex;flex-direction:column;padding-top:12px;padding-bottom:16px}
.fk-price-fit .fk-eyebrow{font-size:11.5px;letter-spacing:.1em}
.fk-price-fit .fk-land h1, .fk-price-fit h1{margin:10px 0 0;line-height:1.32}
.fk-price-fit .fk-land-sub{margin:12px 0 0;font-size:14px;line-height:1.65}
.fk-price-fit .fk-price-toggle{margin-top:20px;margin-bottom:14px}
.fk-price-fit .fk-price-grid{margin-top:auto;flex:0 1 468px;min-height:400px;max-height:480px;gap:16px}
.fk-price-fit .fk-price-card{padding:24px 22px}
.fk-price-fit .fk-price-desc{min-height:0}
.fk-price-fit .fk-price-amt{margin-top:14px;font-size:26px}
.fk-price-fit .fk-price-min{margin-top:14px;padding:10px 12px;font-size:14px}
.fk-price-fit .fk-price-feats{flex:1;justify-content:center;gap:12px;margin:10px 0 14px}
.fk-price-fit .fk-land-foot{margin-top:auto;padding:16px 24px 18px}
/* 낮은 화면(노트북 등)에서만 컴팩트 — 큰 화면의 여유는 유지 */
@media (max-height:840px){
  .fk-price-fit h1{font-size:clamp(20px,2.2vw,24px) !important;margin-top:6px}
  .fk-price-fit .fk-land-sub{margin-top:6px;font-size:13px}
  .fk-price-fit .fk-price-toggle{margin-top:10px;margin-bottom:4px;padding:3px}
  .fk-price-fit .fk-price-toggle button{padding:7px 18px}
  .fk-price-fit .fk-price-grid{margin-top:10px;gap:12px;flex:0 1 auto;min-height:0;max-height:none}
  .fk-price-fit .fk-price-card{padding:14px 18px}
  .fk-price-fit .fk-price-amt{margin-top:7px;font-size:23px}
  .fk-price-fit .fk-price-min{margin-top:7px;padding:7px 10px;font-size:13px}
  .fk-price-fit .fk-price-feats{margin:8px 0 10px;gap:7px;justify-content:flex-start}
  .fk-price-fit .fk-land-sec{padding-top:2px;padding-bottom:8px}
  .fk-price-fit .fk-land-foot{padding:8px 24px 10px}
}

/* 결과 플레이어 중앙 재생버튼 오버레이 (2026-08-05) — 자동재생 대신 클릭 재생 */
.fk-player{position:relative}
.fk-play-ov{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border:0;border-radius:50%;cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(10,10,16,.55);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .15s, transform .12s;pointer-events:none}
.fk-play-ov svg{width:34px;height:34px;margin-left:3px}
.fk-player:hover .fk-play-ov{opacity:1;pointer-events:auto}   /* 데스크탑: 마우스 올리면 */
.fk-play-ov:hover{transform:translate(-50%,-50%) scale(1.06);background:rgba(10,10,16,.7)}
.fk-play-ov.playing{display:none}                              /* 재생 중엔 숨김 */
@media (hover:none){                    /* 모바일(호버 없음): 네이티브 <video controls> 가 자체 중앙
                                           재생버튼을 띄우므로 커스텀 오버레이는 숨긴다(버튼 2개 겹침 방지,
                                           2026-08-05). 재생은 video 의 onpointerdown 지연로딩으로 정상 동작. */
  .fk-play-ov{display:none}
}

/* 1080p 생성 진행 모달 (2026-08-05) */
.hd-modal-bg{position:fixed;inset:0;z-index:200;background:rgba(6,7,12,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.hd-modal{background:var(--fk-bg-soft,#fff);border:1px solid var(--fk-line,#e3e3ea);border-radius:16px;padding:26px 28px;min-width:280px;max-width:88vw;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.hd-modal-title{font-weight:800;font-size:15.5px;color:var(--fk-ink,#14141b)}
.hd-bar{margin:16px 0 6px;height:10px;border-radius:999px;background:var(--fk-line,#ececf2);overflow:hidden}
.hd-bar-fill{height:100%;width:0;border-radius:999px;background:var(--fk-grad-hero,linear-gradient(90deg,#FF2E7E,#7C5CFF));transition:width .25s ease}
.hd-pct{font-weight:800;font-size:13px;color:var(--fk-brand,#e0348a)}
.hd-modal-sub{margin-top:8px;font-size:12.5px;color:var(--fk-ink-2,#7a7a86)}

/* 전체보기 카드 — 삭제 만료 배지 + hover ⋮ 메뉴 (2026-08-05) */
.fk-thumb-card .fk-thumb{position:relative}
.fk-expire{position:absolute;top:8px;left:8px;z-index:2;background:rgba(18,18,26,.74);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;letter-spacing:-.2px}
.fk-card-menu{position:absolute;top:6px;right:6px;z-index:3;width:28px;height:28px;border:0;border-radius:8px;background:rgba(18,18,26,.6);color:#fff;font-size:17px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s}
.fk-thumb-card:hover .fk-card-menu{opacity:1}
.fk-card-menu:hover{background:rgba(18,18,26,.85)}
@media (hover:none){.fk-card-menu{opacity:1}}

/* 상단 업그레이드 버튼 (2026-08-05) */
.fk-top-btn.upgrade{background:var(--fk-grad-hero,linear-gradient(90deg,#FF2E7E,#7C5CFF));color:#fff;border:0;font-weight:800}
.fk-top-btn.upgrade svg{stroke:#fff}
.fk-top-btn.upgrade:hover{filter:brightness(1.05)}

/* 내 영상 그리드 — 카드가 컬럼을 채우게(좌우 빈공간 제거) (2026-08-05) */
#proj-list .fk-thumb-card{width:auto}