@charset "utf-8";
/* ==========================================================================
   LINKALL — 히어로 · 시그니처 챕터 · 스트립 · CTA
   AIPM P9 명세 §05 기반. linkall.css 다음에 로드한다.
   ========================================================================== */

/* ==========================================================================
   히어로 (A안) — 100svh · 좌 7 초대형 헤드라인 / 우 5 정산표 카드
   ========================================================================== */
/* ⚠ display:flex 이면 .lk-w 의 width:min(...) 이 stretch 에 먹힌다.
   grid + place-items 로 두면 자식이 자기 폭을 지키고 margin-inline:auto 도 산다. */
.lk-hr{position:relative;min-height:100svh;display:grid;align-content:center;
  padding-block:clamp(60px,8vh,110px);overflow:hidden;
  background:var(--lk-paper)}
.lk-hr-in{position:relative;z-index:2}

/* 모눈 배경 + 상단 라임 광원 */
.lk-hr::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(17,24,39,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,24,39,.05) 1px, transparent 1px);
  background-size:var(--lk-grid) var(--lk-grid);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%)}
.lk-hr::after{content:'';position:absolute;z-index:0;pointer-events:none;
  top:-28%;right:-12%;width:min(760px,62vw);aspect-ratio:1;
  background:radial-gradient(circle, rgba(198,242,78,.42), rgba(198,242,78,0) 66%)}

.lk-hr .lk-d1{position:relative}
.lk-hr-sub{margin-top:clamp(22px,2.6vw,32px);max-width:44ch}

/* 우측 정산표 카드 — "성적표" 모티프의 제휴마케팅 번안 */
.lk-recpt{background:var(--lk-night);color:var(--lk-on-night);
  border-radius:var(--lk-r);padding:clamp(22px,2.4vw,30px);
  box-shadow:var(--lk-e3);position:relative;overflow:hidden}
.lk-recpt::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(247,248,250,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247,248,250,.05) 1px, transparent 1px);
  background-size:var(--lk-grid) var(--lk-grid)}
.lk-recpt > *{position:relative}
.lk-recpt-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--lk-night-line)}
.lk-recpt-hd .t{font:700 10.5px/1 var(--lk-mono);letter-spacing:.28em;
  text-transform:uppercase;color:var(--lk-accent)}
.lk-recpt-hd .d{font:500 11px/1 var(--lk-mono);color:var(--lk-on-night-faint)}
.lk-recpt-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:9px 0;font-family:var(--lk-mono);font-size:13px;
  font-variant-numeric:tabular-nums;color:var(--lk-on-night-soft)}
.lk-recpt-row b{color:var(--lk-on-night);font-weight:600}
.lk-recpt-total{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid var(--lk-night-line)}
.lk-recpt-total .k{font-size:13px;font-weight:700;color:var(--lk-on-night)}
.lk-recpt-total .v{font-family:var(--lk-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:var(--lk-accent)}
.lk-recpt-gauge{margin-top:20px}
.lk-recpt-gauge .lab{display:flex;justify-content:space-between;
  font:600 10.5px/1 var(--lk-mono);letter-spacing:.14em;
  color:var(--lk-on-night-faint);margin-bottom:9px}

@media(max-width:899px){
  .lk-hr{min-height:auto;padding-block:clamp(48px,9vw,80px)}
  .lk-recpt{margin-top:36px}
}

/* ==========================================================================
   키워드 마퀴 스트립 — 컴팩트 스트립 (리듬용)
   ========================================================================== */
.lk-mq{overflow:hidden;background:var(--lk-ink);
  padding-block:clamp(12px,1.4vw,16px)}
.lk-mq-t{display:flex;gap:34px;width:max-content;will-change:transform}
.lk-mq span{display:flex;align-items:center;gap:34px;white-space:nowrap;
  font:700 clamp(11.5px,1.1vw,13px)/1 var(--lk-mono);letter-spacing:.22em;
  text-transform:uppercase;color:rgba(247,248,250,.62)}
.lk-mq span::after{content:'';width:5px;height:5px;background:var(--lk-accent);
  border-radius:50%;flex:none}

/* ==========================================================================
   ★ 시그니처 챕터 — 광고주 ↔ 크루 연결 (pin + scrub)
   페이지당 정확히 1개. 100svh 풀스크린 + 다크.
   ========================================================================== */
.lk-sig{position:relative;background:var(--lk-night);color:var(--lk-on-night);
  min-height:100svh;display:grid;align-content:center;overflow:hidden}
.lk-sig::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(247,248,250,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247,248,250,.05) 1px, transparent 1px);
  background-size:var(--lk-grid) var(--lk-grid)}
.lk-sig-in{position:relative;z-index:2;padding-block:clamp(56px,8vh,96px)}

.lk-sig-hd{text-align:center;margin-bottom:clamp(24px,3vw,40px)}
.lk-sig-hd .lk-lbl{justify-content:center}

/* 무대 */
.lk-stage{position:relative;width:100%;max-width:1000px;margin-inline:auto;
  aspect-ratio:16/5.2}
@media(max-width:719px){.lk-stage{aspect-ratio:auto;min-height:340px}}
.lk-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* 연결선 */
.lk-stage .rail{fill:none;stroke:rgba(247,248,250,.14);stroke-width:1.5;
  stroke-dasharray:3 8;stroke-linecap:round}
.lk-stage .wire{fill:none;stroke:var(--lk-accent);stroke-width:2.6;
  stroke-linecap:round}

/* 노드 */
.lk-node{position:absolute;top:50%;transform:translate(-50%,-50%);
  width:clamp(112px,13vw,150px);text-align:center;pointer-events:none}
.lk-node.is-a{left:12%}
.lk-node.is-b{left:88%}
.lk-node .box{width:100%;aspect-ratio:1;border-radius:var(--lk-r);
  border:1px solid var(--lk-night-line);background:var(--lk-night-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:12px}
.lk-node.is-b .box{border-color:rgba(198,242,78,.44)}
.lk-node .ic{font:700 10px/1 var(--lk-mono);letter-spacing:.2em;
  color:var(--lk-on-night-faint)}
.lk-node .t{font-size:15px;font-weight:800;letter-spacing:-.02em;
  color:var(--lk-on-night)}
.lk-node .s{margin-top:9px;font-size:11.5px;line-height:1.5;
  color:var(--lk-on-night-faint)}
.lk-node .amt{font-family:var(--lk-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(17px,2vw,22px);font-weight:800;letter-spacing:-.03em;
  color:var(--lk-accent)}

/* 선 위를 흐르는 커미션 토큰 */
.lk-token{position:absolute;top:0;left:0;padding:6px 12px;border-radius:99px;
  background:var(--lk-accent);color:var(--lk-accent-ink);
  font:800 12.5px/1 var(--lk-mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;white-space:nowrap;opacity:0;pointer-events:none}

/* 장면 캡션 */
.lk-scene{position:absolute;left:50%;bottom:-14%;transform:translateX(-50%);
  width:min(560px,90%);text-align:center;opacity:0;pointer-events:none}
.lk-scene .n{font:700 10.5px/1 var(--lk-mono);letter-spacing:.28em;
  color:var(--lk-accent);margin-bottom:9px}
.lk-scene p{font-size:clamp(14px,1.5vw,17px);line-height:1.62;
  color:var(--lk-on-night-soft)}
.lk-scene b{color:var(--lk-on-night)}

/* 진행 인디케이터 — 게이지(P9 모티프) */
.lk-prog{position:absolute;left:50%;bottom:clamp(20px,3vh,36px);
  transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:12px;
  width:min(320px,72vw)}
.lk-prog .idx{font:700 11px/1 var(--lk-mono);letter-spacing:.14em;
  color:var(--lk-on-night-faint);white-space:nowrap}
.lk-prog .bar{flex:1;height:3px;background:rgba(247,248,250,.16);
  border-radius:99px;overflow:hidden}
.lk-prog .bar > i{display:block;height:100%;width:0%;background:var(--lk-accent)}

/* 모바일 — 핀 해제. 장면을 세로로 나열한다 (⚠ 함정 6) */
.lk-sig-m{display:none}
@media(max-width:719px){
  .lk-sig{min-height:auto;display:block}
  .lk-sig-in{padding-block:clamp(56px,10vw,80px)}
  .lk-stage,.lk-prog{display:none}
  .lk-sig-m{display:grid;gap:14px;margin-top:28px}
  .lk-sig-m .cut{border:1px solid var(--lk-night-line);border-radius:var(--lk-r);
    padding:20px;background:var(--lk-night-2)}
  .lk-sig-m .n{font:700 10.5px/1 var(--lk-mono);letter-spacing:.26em;
    color:var(--lk-accent);margin-bottom:10px}
  .lk-sig-m p{font-size:14.5px;line-height:1.66;color:var(--lk-on-night-soft)}
  .lk-sig-m b{color:var(--lk-on-night)}
  .lk-sig-m .amt{display:block;margin-top:12px;font-family:var(--lk-mono);
    font-variant-numeric:tabular-nums;font-size:26px;font-weight:800;
    letter-spacing:-.03em;color:var(--lk-accent)}
}

/* ==========================================================================
   선언 섹션 — 페이지당 1곳만 초대형 (§00 스케일 규칙)
   ========================================================================== */
.lk-decl{background:var(--lk-accent);color:var(--lk-accent-ink);
  padding-block:clamp(90px,13vw,190px);position:relative;overflow:hidden}
.lk-decl::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(17,24,39,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,24,39,.07) 1px, transparent 1px);
  background-size:var(--lk-grid) var(--lk-grid)}
.lk-decl > *{position:relative}
.lk-decl .lk-d0{max-width:16ch}
.lk-decl p{margin-top:clamp(22px,2.6vw,34px);font-size:clamp(16px,1.5vw,19px);
  line-height:1.7;color:rgba(17,24,39,.82);max-width:52ch}

/* ==========================================================================
   최종 CTA
   ========================================================================== */
.lk-cta{background:var(--lk-night);color:var(--lk-on-night);
  padding-block:clamp(80px,10vw,140px);position:relative;overflow:hidden;
  --lk-ink:var(--lk-on-night);--lk-ink-soft:var(--lk-on-night-soft);
  --lk-ink-faint:var(--lk-on-night-faint);--lk-line:var(--lk-night-line)}
.lk-cta::after{content:'';position:absolute;z-index:0;pointer-events:none;
  bottom:-40%;left:50%;transform:translateX(-50%);width:min(900px,88vw);aspect-ratio:1;
  background:radial-gradient(circle, rgba(198,242,78,.20), rgba(198,242,78,0) 64%)}
.lk-cta > *{position:relative;z-index:1}
.lk-cta .lk-d2{color:var(--lk-on-night)}
.lk-cta .lk-fine{color:var(--lk-on-night-faint)}