/* 랜딩 애니메이션 — 표지 글자 뒤의 작은 글씨 판.
   site.css 의 세 색(주황빨강·먹·본화이트)만 쓴다. 글자 색은 캔버스가 칠하므로 여기서 정하지 않는다
   (config.yaml 의 landing.color_emphasis / color_dim).

   쌓임 순서 — .red 섹션 안에서
     배경 망점(background-image) → .red::before 그러데이션 → **.landing(이 판)** → .wrap(제목·버튼)
   .red > * 가 position:relative 를 주므로 여기서 absolute 로 되돌린다.
   .landing 은 섹션의 첫 자식이라 뒤따르는 .wrap 들이 위에 그려진다. */

.landing{
  position:absolute; inset:0;
  overflow:hidden; pointer-events:none;
  opacity:var(--landing-opacity,.55);
  /* 위아래로 흐려진다 — 판이 잘린 게 아니라 번져 나온 것처럼.
     아래쪽은 특히 많이 빼 둔다: 그 자리에 소개 문구·버튼·숫자가 있어서 글자가 꽉 차면 읽히지 않는다 */
  --landing-mask:linear-gradient(to bottom,
      transparent 0, #000 5%, #000 62%,
      rgba(0,0,0,.45) 80%, rgba(0,0,0,.18) 90%, transparent 100%);
  -webkit-mask-image:var(--landing-mask);
          mask-image:var(--landing-mask);
}
.landing-cv{display:block;width:100%;height:100%}

/* 모서리 눈금 — 인쇄 재단 표시. 판이 '한 장의 종이'로 보이게 한다 */
.landing::before,.landing::after{
  content:"";position:absolute;width:12px;height:12px;pointer-events:none;
  border:1px solid var(--ink);opacity:.5;
}
.landing::before{top:var(--gut);left:var(--gut);border-right:0;border-bottom:0}
.landing::after{bottom:var(--gut);right:var(--gut);border-left:0;border-top:0}

/* 표지 위의 버튼·숫자 — 테두리만 있는 버튼은 속이 비어 뒤의 글자판이 비쳐 읽히지 않는다.
   표지와 같은 빨강으로 속을 채워 글자판 위에 '구멍'을 낸다. 무늬는 그대로 두고 글자만 또렷해진다
   (2026-09-23 사용자 지적) */
#cover .btn:not(.solid){background:var(--red)}
#cover .btn:not(.solid):hover{background:var(--ink);color:var(--red)}
#cover #counts{display:inline-block;background:var(--red);padding:3px 8px;margin-left:-8px}

/* 판독기 — 지금 흐르는 선언문. 참고 디자인의 HUD 라벨을 우리 말로 */
.landing-readout{
  position:absolute; right:var(--gut); bottom:calc(var(--gut) + 18px);
  margin:0; max-width:min(52ch,60vw); text-align:right;
  font-family:var(--f-mono); font-size:10px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); opacity:.62;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.landing-readout:not(:empty)::before{content:"// "}

@media(max-width:700px){
  .landing{opacity:calc(var(--landing-opacity,.55) * .8)}   /* 좁은 화면에선 제목을 더 확실히 */
  .landing-readout{display:none}
  .landing::before,.landing::after{display:none}
}

/* 움직임을 원치 않으면 캔버스는 채워진 채로 멈춘다(landing.js 가 처리).
   여기서는 CSS 로 움직이는 것이 없으므로 따로 끌 것이 없다. */