/* 숨은 메모 — 평소엔 안 보이고 돋보기 유리(복제 화면) 속에서만 보인다. 들고 가까이 가면 「찾음」 (metic secret-ink) */
.has-sn{position:relative}
.sn{position:absolute;inset:0;pointer-events:none;visibility:hidden;user-select:none;-webkit-user-select:none}
.lp__pg .sn{visibility:visible}
.sn svg{position:absolute;overflow:visible}
.sn svg path{fill:none;stroke:var(--pt);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sn__n{position:absolute;white-space:nowrap;font:400 26px/.95 var(--hand);letter-spacing:0;color:var(--pt);transform:rotate(var(--tilt,-3deg));transform-origin:0}
.ct__go{display:inline-block}

/* 찾은 개수 — 오른쪽 아래. 하나라도 찾았거나 돋보기를 들면 보인다 */
.fd{position:fixed;right:calc(var(--shell) + 12px);bottom:18px;z-index:45;display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--pill);background:var(--paper);font:500 11px/1 var(--mono);color:var(--steel);font-variant-numeric:tabular-nums;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
.fd.is-on{opacity:1;transform:none}
.fd b{font-weight:500;color:var(--ink);transition:color .3s var(--ease)}
.fd i{width:6px;height:6px;border-radius:50%;background:var(--pt)}
.fd.is-pop b{color:var(--pt)}
.fd.is-pop i{animation:fd-pop .6s var(--ease)}
@keyframes fd-pop{40%{transform:scale(2.2)}}

/* 숨은 메모가 오른쪽으로 삐져나가 폰 화면 폭을 넓히지 않게 — clip 은 sticky 를 죽이지 않는다 */
#page{overflow-x:clip}

/* 히어로 숨은 메모 둘 (metic hero-invite · hero-scroll) — 돋보기를 들면 유리 속에서만 보인다
   ① 「집어 보세요.」 — 돋보기가 쉬는 자리에 그대로 남아, 렌즈를 다시 대면 커져 보인다(돋보기 위 글씨와 같은 자리·크기)
   ② 「스크롤을 내려 보세요.」 — 히어로 가운데 위, 빈 곳 */
.hero__slot{container-type:inline-size}
.sn-pick{position:absolute;left:37.5%;top:36.57cqw;translate:-50% -62%;rotate:-4deg;font:400 7cqw/.9 var(--hand);color:var(--pt);text-align:center;white-space:nowrap}
.sn-pick i{display:block;font-style:normal;font-size:.8em;margin:1.25em 0 0 1.6em}
.sn-scroll .sn__n{left:50%;top:44%;translate:-50% 0;--tilt:-3deg;line-height:1.05;text-align:center}
.sn-scroll svg{left:50%;top:calc(44% + 66px);width:16px;height:34px;translate:-50% 0}
@media (max-width:900px){
  .sn-scroll .sn__n{top:auto;bottom:118px;font-size:22px}
  .sn-scroll svg{top:auto;bottom:80px;height:28px}
}

/* 큰 제목 숨은 메모 — 첫 글자 위 「아홉 글자」, 빨간 점 아래 「로고의 점」. 감싼 칸은 글자 폭만큼만 */
.hero__hw{position:relative;justify-self:start;width:fit-content;max-width:100%}
.sn-head .sn__n{left:0;bottom:calc(152% + 4px);--tilt:-4deg;line-height:1.05}
.sn-head__a{left:14px;bottom:92%;width:40px;height:60%}
.sn-dot .sn__n{right:-40px;bottom:calc(126% + 4px);--tilt:-3deg;line-height:1.05;text-align:right}
.sn-dot__a{right:-26px;bottom:16%;width:56px;height:110%}
@media (max-width:900px){
  .sn-head .sn__n,.sn-dot .sn__n{font-size:20px}
  .sn-dot .sn__n{right:-14px}
  .sn-scroll .sn__n{left:auto;right:16px;translate:none;bottom:40px;width:150px;white-space:normal;text-align:right;font-size:18px}   /* 작업물 보기 버튼 오른쪽 빈자리 */
  .sn-scroll svg{display:none}
}

/* 폰 — 소개문 메모는 글 아래 오른쪽, 버튼 메모는 버튼 오른쪽 빈자리(제목·스크롤 메모와 안 겹치게). 인라인 위치를 덮어써야 해서 !important */
@media (max-width:900px){
  .hero__lead .sn__n{left:auto!important;right:0;bottom:auto!important;top:calc(100% + 2px);font-size:19px}
  .hero__lead .sn svg{display:none}
  .hero__btns .sn__n{left:calc(100% - 150px)!important;top:6px!important;width:140px;white-space:normal;font-size:19px;line-height:1.05}
  .hero__btns .sn svg{display:none}
}