/* FSN 사이트 플러스 — 화면 효과 (킥오프 저널·골라인 타임즈 공용, 테마 색 변수 사용) */
:root{
  --fsnp-acc:var(--fsn-accent,#1f6b3f);
  --fsnp-soft:var(--fsn-accent-soft,#e6efe8);
  --fsnp-ink:var(--fsn-ink,#141414);
  --fsnp-muted:var(--fsn-muted,#5b5a55);
  --fsnp-paper:var(--fsn-paper2,#f6f4ee);
  --fsnp-hair:var(--fsn-hair,#c9c3b4);
  --fsnp-live:#e0352b;
  --fsnp-ease:cubic-bezier(.2,.7,.2,1);
  --fsnp-h:38px;
}

/* ---------- 실시간 띠: 메뉴 아래 (자리 미리 확보 → 화면 밀림 없음) ---------- */
.fsnp-bar .kj > .wrap > .cats,
.fsnp-bar .gt > .wrap > .cats{position:relative;margin-bottom:calc(12px + var(--fsnp-h) + 12px)}
.fsnp-live{position:absolute;left:0;right:0;top:calc(100% + 13px);height:var(--fsnp-h);display:flex;align-items:stretch;
  border:1px solid var(--fsnp-ink);background:var(--fsnp-paper);color:var(--fsnp-ink);
  font:600 13px/1 var(--fsn-sans,"Noto Sans KR",sans-serif);overflow:hidden;text-align:left}
.fsnp-clock{flex:none;display:flex;align-items:center;gap:7px;padding:0 12px;background:var(--fsnp-ink);color:#fff;white-space:nowrap;letter-spacing:.02em}
.fsnp-clock b{font-weight:800;color:#fff}
.fsnp-clock time{font-variant-numeric:tabular-nums;font-weight:700}
.fsnp-clock small{font-size:10px;opacity:.75;font-weight:600}
.fsnp-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--fsnp-live);animation:fsnp-pulse 1.6s ease-out infinite}
@keyframes fsnp-pulse{0%{box-shadow:0 0 0 0 rgba(224,53,43,.6)}70%{box-shadow:0 0 0 7px rgba(224,53,43,0)}100%{box-shadow:0 0 0 0 rgba(224,53,43,0)}}

.fsnp-tk{flex:1 1 auto;min-width:0;display:flex;align-items:center}
.fsnp-tk-lab{flex:none;padding:0 10px 0 12px;color:var(--fsnp-acc);font-weight:800;white-space:nowrap;border-right:1px solid var(--fsnp-hair);height:100%;display:flex;align-items:center}
.fsnp-tk-vp{flex:1 1 auto;min-width:0;overflow:hidden;height:100%;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
.fsnp-tk-run{display:inline-flex;white-space:nowrap;animation:fsnp-marq var(--fsnp-dur,45s) linear infinite;will-change:transform}
.fsnp-tk-g{display:inline-flex;align-items:center;gap:26px;padding:0 26px 0 14px}
.fsnp-tk a{color:var(--fsnp-ink);text-decoration:none;font-weight:600}
.fsnp-tk a:hover{color:var(--fsnp-acc);text-decoration:underline}
.fsnp-tk a em{font-style:normal;color:var(--fsnp-muted);font-weight:700;margin-right:6px;font-size:11px}
.fsnp-tk-vp:hover .fsnp-tk-run,.fsnp-tk-vp:focus-within .fsnp-tk-run{animation-play-state:paused}
@keyframes fsnp-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.fsnp-match{flex:none;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--fsnp-acc);color:#fff !important;text-decoration:none !important;white-space:nowrap;font-weight:700;min-width:0}
.fsnp-match .fsnp-m-lab{font-size:11px;font-weight:800;letter-spacing:.04em;padding:2px 6px;border:1px solid rgba(255,255,255,.55);border-radius:3px}
.fsnp-match .fsnp-m-name{opacity:.95;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fsnp-match .fsnp-m-t{flex:none}
.fsnp-tk a em.is-an{color:#fff;background:var(--fsnp-live);padding:2px 5px;border-radius:3px;font-size:10px}
.fsnp-match .fsnp-m-t{font-variant-numeric:tabular-nums;font-weight:800}
.fsnp-match.is-live{background:var(--fsnp-live)}
.fsnp-match.is-done{background:var(--fsnp-ink)}

@media (max-width:900px){
  :root{--fsnp-h:68px}
  .fsnp-live{flex-wrap:wrap;align-content:stretch}
  .fsnp-clock,.fsnp-match{height:34px}
  .fsnp-clock{order:1}
  .fsnp-match{order:2;flex:1 1 0;justify-content:flex-end;padding:0 10px;font-size:12px;gap:6px}
  .fsnp-match .fsnp-m-lab{display:none}
  .fsnp-tk{order:3;flex:1 0 100%;height:32px;border-top:1px solid var(--fsnp-hair)}
  .fsnp-tk-lab{padding:0 8px 0 10px;font-size:12px}
}

/* ---------- 분석 데스크 (며칠 앞 경기 · 자동 상태) ---------- */
.fsnp-desk{margin:6px 0 30px;font-family:var(--fsn-sans,"Noto Sans KR",sans-serif);color:var(--fsnp-ink)}
.fsnp-desk-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;border-top:3px solid var(--fsnp-ink);border-bottom:1px solid var(--fsnp-ink);padding:10px 0 9px;margin-bottom:12px}
.fsnp-desk-head h2{margin:0;display:flex;align-items:center;gap:8px;font:800 18px/1.2 var(--fsn-sans,sans-serif);letter-spacing:-.01em}
.fsnp-desk-head h2 small{font-size:10px;letter-spacing:.16em;color:var(--fsnp-muted);font-weight:700}
.fsnp-desk-sum{margin:0;font-size:13px;color:var(--fsnp-ink);flex:1 1 auto}
.fsnp-desk-sum b{color:var(--fsnp-acc);font-variant-numeric:tabular-nums}
.fsnp-desk-upd{font-size:11px;color:var(--fsnp-muted);white-space:nowrap}
.gt .fsnp-desk-head{background:var(--fsnp-ink);color:#fff;border:0;padding:9px 12px}
.gt .fsnp-desk-head h2{font-family:var(--fsn-cond,var(--fsn-sans,sans-serif));letter-spacing:.01em}
.gt .fsnp-desk-head h2 small,.gt .fsnp-desk-upd{color:rgba(255,255,255,.7)}
.gt .fsnp-desk-sum{color:rgba(255,255,255,.9)}
.gt .fsnp-desk-sum b{color:#fff}
.fsnp-desk-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.fsnp-desk-day{padding:0 14px;border-left:1px solid var(--fsnp-hair);min-width:0}
.fsnp-desk-day:first-child{padding-left:0;border-left:0}
.fsnp-desk-day h3{margin:0 0 6px;font:800 13px/1.3 var(--fsn-sans,sans-serif);letter-spacing:.02em;color:var(--fsnp-muted);border-bottom:1px solid var(--fsnp-hair);padding-bottom:5px}
.fsnp-desk-day ul{list-style:none;margin:0;padding:0}
.fsnp-fx-row{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-areas:"t lg" "t tm" "t meta";column-gap:8px;padding:8px 6px;margin:0 -6px;border-bottom:1px dotted var(--fsnp-hair);border-radius:3px;transition:background-color .2s ease}
.fsnp-fx-row:last-child{border-bottom:0}
.fsnp-fx-row time{grid-area:t;font:800 13px/1.5 var(--fsn-sans,sans-serif);font-variant-numeric:tabular-nums}
.fsnp-lg{grid-area:lg;font-size:10px;font-weight:700;color:var(--fsnp-muted);letter-spacing:.02em}
.fsnp-tm{grid-area:tm;font-size:14px;font-weight:700;line-height:1.35;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsnp-tm i{font-style:normal;font-size:11px;color:var(--fsnp-muted);font-weight:600;margin:0 2px}
.fsnp-meta{grid-area:meta;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:4px}
.fsnp-cd{font-size:11px;color:var(--fsnp-muted);font-variant-numeric:tabular-nums}
.fsnp-st{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap;border:1px solid var(--fsnp-hair);color:var(--fsnp-muted);background:transparent;text-decoration:none !important}
a.fsnp-st:hover{filter:brightness(1.08)}
.fsnp-fx-row.is-star .fsnp-tm::before{content:"★ ";color:var(--fsnp-acc);font-size:11px}
.fsnp-fx-row.is-analyzing .fsnp-st{background:#fff3df;border-color:#e2a33a;color:#8a5200}
.fsnp-fx-row.is-analyzing .fsnp-st::before{content:"";width:6px;height:6px;border-radius:50%;background:#e2a33a;animation:fsnp-blink 1.2s ease-in-out infinite}
.fsnp-fx-row.is-preview .fsnp-st,.fsnp-fx-row.is-review .fsnp-st{background:var(--fsnp-acc);border-color:var(--fsnp-acc);color:#fff}
.fsnp-fx-row.is-preview .fsnp-st::after,.fsnp-fx-row.is-review .fsnp-st::after{content:"→"}
.fsnp-fx-row.is-live .fsnp-st{background:var(--fsnp-live);border-color:var(--fsnp-live);color:#fff}
.fsnp-fx-row.is-live .fsnp-st::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:fsnp-blink 1s ease-in-out infinite}
.fsnp-fx-row.is-done{opacity:.6}
.fsnp-fx-more{padding:7px 0 0;font-size:11px;color:var(--fsnp-muted)}
@keyframes fsnp-blink{50%{opacity:.25}}
@media (hover:hover){.fsnp-fx .fsnp-fx-row:hover{background-color:var(--fsnp-soft)}}
@media (max-width:900px){
  .fsnp-desk-days{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .fsnp-desk-day{scroll-snap-align:start}
  .fsnp-desk-upd{display:none}
}

/* ---------- 마우스 올림 효과 (마우스 쓰는 기기만) ---------- */
.fsnp-fx .kj .thumb,.fsnp-fx .gt .thumb,.fsnp-fx .kj .lead .fig a,.fsnp-fx .gt .lead .fig a{display:block;overflow:hidden}
.fsnp-fx .thumb img,.fsnp-fx .lead .fig img,.fsnp-fx .proofgrid img,.fsnp-fx .scout img{transition:transform .55s var(--fsnp-ease),filter .3s ease}
.fsnp-fx .band article,.fsnp-fx .scout .card,.fsnp-fx .proofgrid figure{transition:transform .28s var(--fsnp-ease),box-shadow .28s var(--fsnp-ease)}
.fsnp-fx .cta,.fsnp-fx .stickycta,.fsnp-fx .btn,.fsnp-fx a.more,.fsnp-fx .pg,.fsnp-match{transition:transform .2s var(--fsnp-ease),box-shadow .2s var(--fsnp-ease),background-color .2s,color .2s}
.fsnp-fx table tbody tr,.fsnp-fx .report li,.fsnp-fx .briefs li,.fsnp-fx .today li,.fsnp-fx .posts li{transition:background-color .2s ease}

/* 제목 밑줄이 왼쪽에서 그어지는 효과 */
.fsnp-fx .h-lead a,.fsnp-fx .band h3 a,.fsnp-fx .scout h3 a,.fsnp-fx .posts li a,.fsnp-fx .briefs li a,.fsnp-fx .today li a,
.fsnp-fx .fsn-related a,.fsnp-fx .entry-content .related a{
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .32s var(--fsnp-ease),color .2s;text-decoration:none}

/* 메뉴 밑줄 */
.fsnp-fx .kj .cats a,.fsnp-fx .gt .cats a{position:relative}
.fsnp-fx .kj .cats a::after,.fsnp-fx .gt .cats a::after{content:"";position:absolute;left:50%;right:50%;bottom:3px;height:2px;background:var(--fsnp-acc);transition:left .25s var(--fsnp-ease),right .25s var(--fsnp-ease)}

@media (hover:hover){
  .fsnp-fx .band article:hover,.fsnp-fx .scout .card:hover{transform:translateY(-4px);box-shadow:0 14px 26px -18px rgba(0,0,0,.55)}
  .fsnp-fx .band article:hover .thumb img,.fsnp-fx .lead .fig a:hover img,.fsnp-fx .scout .card:hover img{transform:scale(1.05)}
  .fsnp-fx .proofgrid figure:hover{transform:translateY(-3px);box-shadow:0 10px 20px -14px rgba(0,0,0,.5)}
  .fsnp-fx .proofgrid figure:hover img{transform:scale(1.04)}
  .fsnp-fx .h-lead a:hover,.fsnp-fx .band h3 a:hover,.fsnp-fx .scout h3 a:hover,.fsnp-fx .posts li a:hover,.fsnp-fx .briefs li a:hover,.fsnp-fx .today li a:hover,
  .fsnp-fx .fsn-related a:hover,.fsnp-fx .entry-content .related a:hover{background-size:100% 1px}
  .fsnp-fx .h-lead a:hover{background-size:100% 2px}
  .fsnp-fx .kj .cats a:hover::after,.fsnp-fx .gt .cats a:hover::after{left:12%;right:12%}
  .fsnp-fx .cta:hover,.fsnp-fx .btn:hover,.fsnp-match:hover{transform:translateY(-2px);box-shadow:0 8px 18px -12px rgba(0,0,0,.6)}
  .fsnp-fx a.more:hover{transform:translateX(4px)}
  .fsnp-fx table tbody tr:hover,.fsnp-fx table tbody tr:hover td{background-color:var(--fsnp-soft)}
  .fsnp-fx .report li:hover,.fsnp-fx .briefs li:hover,.fsnp-fx .today li:hover,.fsnp-fx .posts li:hover{background-color:var(--fsnp-soft)}
}
/* 누를 때 눌림 */
.fsnp-fx .band article:active,.fsnp-fx .scout .card:active{transform:translateY(-1px) scale(.985)}
.fsnp-fx .cta:active,.fsnp-fx .stickycta:active,.fsnp-fx .btn:active,.fsnp-fx a.more:active,.fsnp-fx .pg:active,.fsnp-match:active{transform:scale(.96)}
/* 키보드 이동 표시 */
.fsnp-fx a:focus-visible,.fsnp-fx button:focus-visible,.fsnp-zoomable:focus-visible{outline:2px solid var(--fsnp-acc);outline-offset:2px}

/* 누른 자리 물결 */
.fsnp-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.28;transform:scale(0);animation:fsnp-rip .6s var(--fsnp-ease) forwards;z-index:0}
@keyframes fsnp-rip{to{transform:scale(1);opacity:0}}

/* ---------- 스크롤 등장 ---------- */
.fsnp-js .fsnp-rv{opacity:0;transform:translateY(18px);transition:opacity .65s var(--fsnp-ease),transform .65s var(--fsnp-ease);transition-delay:var(--fsnp-d,0s)}
.fsnp-js .fsnp-rv.is-in{opacity:1;transform:none}

/* ---------- 숫자 ---------- */
.fsnp-num{display:inline-block;font-variant-numeric:tabular-nums;text-align:inherit}

/* ---------- 사진 크게 보기 ---------- */
.fsnp-zoomable{cursor:zoom-in}
.fsnp-lb{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;background:rgba(12,14,18,0);transition:background-color .3s ease;-webkit-tap-highlight-color:transparent}
.fsnp-lb.is-open{background:rgba(12,14,18,.9)}
.fsnp-lb-stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}
.fsnp-lb-stage img{max-width:min(94vw,1600px);max-height:calc(100vh - 110px);width:auto;height:auto;cursor:zoom-in;box-shadow:0 20px 60px rgba(0,0,0,.5);border-radius:2px;background:#fff}
.fsnp-lb-stage.is-zoom{overflow:auto;display:block;padding:0}
.fsnp-lb-stage.is-zoom img{max-width:none;max-height:none;cursor:zoom-out;margin:24px auto;display:block}
.fsnp-lb-bar{flex:none;display:flex;align-items:center;gap:14px;padding:12px 18px;color:#f1f1f1;font:500 13px/1.4 var(--fsn-sans,"Noto Sans KR",sans-serif);opacity:0;transition:opacity .3s ease .1s}
.fsnp-lb.is-open .fsnp-lb-bar{opacity:1}
.fsnp-lb-cap{flex:1 1 auto;min-width:0}
.fsnp-lb-hint{color:#a9adb5;font-size:12px;white-space:nowrap}
.fsnp-lb-x{flex:none;appearance:none;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;padding:7px 14px;border-radius:999px;font:700 13px/1 var(--fsn-sans,sans-serif);cursor:pointer}
.fsnp-lb-x:hover{background:#fff;color:#111}
html.fsnp-lb-open{overflow:hidden}
@media (max-width:600px){.fsnp-lb-hint{display:none}.fsnp-lb-stage{padding:10px}}

/* ---------- 읽기 진행 막대 ---------- */
.fsnp-prog{position:fixed;left:0;top:0;width:100%;height:3px;background:var(--fsnp-acc);transform-origin:0 50%;transform:scaleX(0);z-index:99999;pointer-events:none}
.admin-bar .fsnp-prog{top:32px}
@media (max-width:782px){.admin-bar .fsnp-prog{top:46px}}

/* ---------- 데이터 출처 ---------- */
.fsnp-src{margin:28px 0 22px;color:var(--fsnp-ink);font-family:var(--fsn-sans,"Noto Sans KR",sans-serif)}
.site-footer + .fsnp-src,.fsnp-src:last-child{margin-bottom:0}
.fsnp-src-in{border-top:3px double var(--fsnp-ink);border-bottom:1px solid var(--fsnp-ink);padding:14px 2px 12px;max-width:1180px;margin:0 auto}
body:not(.fsn-front) .fsnp-src-in{padding-left:20px;padding-right:20px}
.fsnp-src-h{margin:0 0 10px;font:800 14px/1.3 var(--fsn-sans,sans-serif);letter-spacing:.02em;text-transform:none}
.fsnp-src-h small{margin-left:8px;font-size:10px;letter-spacing:.14em;color:var(--fsnp-muted);font-weight:700}
.fsnp-src dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 22px}
.fsnp-src dl > div{border-left:3px solid var(--fsnp-acc);padding:2px 0 2px 10px}
.fsnp-src dt{font-size:11px;font-weight:800;color:var(--fsnp-muted);margin:0 0 3px;letter-spacing:.02em}
.fsnp-src dd{margin:0;font-size:13px;line-height:1.5;font-weight:600}
.fsnp-src-note{margin:10px 0 0;font-size:12px;color:var(--fsnp-muted)}
@media (max-width:900px){.fsnp-src dl{grid-template-columns:1fr}}
/* 순위표 아래 출처 한 줄 (내용은 설정값에서 들어옴) */
.fsn-front .side .box:has(table)::after{display:block;margin-top:6px;font-size:11px;line-height:1.4;color:var(--fsnp-muted)}

/* ---------- 움직임 줄이기 설정 기기 ----------
   흐르는 띠는 멈추고 제목이 한 줄씩 바뀜, 등장 효과는 위치 이동 없이 흐림→선명만.
   마우스 올림·누름 반응, 숫자, 사진 확대는 그대로 (방문자가 직접 일으키는 짧은 반응) */
.fsnp-tk.is-fade .fsnp-tk-vp{-webkit-mask-image:none;mask-image:none;position:relative}
.fsnp-tk.is-fade .fsnp-tk-run{animation:none;display:block;width:100%}
.fsnp-tk.is-fade .fsnp-tk-g[aria-hidden]{display:none}
.fsnp-tk.is-fade .fsnp-tk-g{display:block;position:relative;height:100%;padding:0}
.fsnp-tk.is-fade .fsnp-tk-g a{position:absolute;left:14px;right:10px;top:50%;transform:translateY(-50%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.fsnp-tk.is-fade .fsnp-tk-g a.on{opacity:1;visibility:visible;transition:opacity .4s ease .35s,visibility 0s linear .35s}
@media (prefers-reduced-motion:reduce){
  .fsnp-js .fsnp-rv{transform:none}
}