/*  ══ 안내 층 — **이 사이트의 색**이다. 다른 앱에서 색을 가져오지 않는다 ═══
    ▣ 폰 아래쪽에서 올라오는 **낱장 한 장**이다 — 엄지가 닿는 자리에 단추를
      둔다. 화면 한가운데 띄우면 단추가 손가락에서 가장 먼 자리에 선다.
    ▣ ★ vw·vh 는 `--fs`(글자 크기)로 나눈다 — 이 화면은 `body{zoom:var(--fs)}`
      로 크기를 키우는데 **뷰포트 단위는 zoom 을 안 따라온다**(app.php 의
      오래된 규율: 시트의 `max-height:calc(88vh / var(--fs,1))` 와 같은 셈). */
#nkA2{position:fixed;inset:0;z-index:150;display:none}
#nkA2.on{display:block}
#nkA2 .a2dim{position:absolute;inset:0;background:rgba(6,20,28,.62)}
#nkA2 .a2win{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(460px,calc(100vw / var(--fs,1)));
  max-height:calc(92vh / var(--fs,1));display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-bottom:0;
  border-radius:16px 16px 0 0;
  box-shadow:0 -18px 50px rgba(var(--sh,21,47,56),.42);overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  #nkA2.on .a2win{animation:a2up .22s ease-out}
  @keyframes a2up{from{transform:translate(-50%,14px);opacity:.4}
                  to{transform:translate(-50%,0);opacity:1}}
}
/*  머리 — 아이콘은 **실제로 홈 화면에 놓일 그림**이다(icon-192.png).
    무엇이 놓이는지 미리 보여 주는 것이 설명 한 줄보다 낫다. */
#nkA2 .a2head{display:flex;align-items:center;gap:11px;padding:13px 14px 10px;
  border-bottom:1px solid var(--line);flex:0 0 auto}
#nkA2 .a2head img{flex:0 0 auto;width:44px;height:44px;border:1px solid var(--line);
  border-radius:11px;background:var(--card-2)}
#nkA2 .a2head h2{margin:0;font-size:16px;font-weight:800;color:var(--ink);line-height:1.3}
#nkA2 .a2head .sub{display:block;margin-top:2px;font-family:var(--mono);font-size:10.5px;
  color:var(--dim);letter-spacing:.02em}
#nkA2 .a2x{margin-left:auto;flex:0 0 auto;width:44px;height:44px;border:0;border-radius:99px;
  background:none;color:var(--dim);font-size:19px;line-height:1;cursor:pointer}
#nkA2 .a2x:hover{background:var(--card-2);color:var(--ink)}

#nkA2 .a2body{flex:1 1 auto;overflow-y:auto;padding:12px 14px 4px}
#nkA2 .a2body .lead{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.65}
#nkA2 .a2body .lead b{color:var(--ink)}
/*  ── 손으로 넣는 갈래(아이폰·그 밖) — 차례를 **번호와 그림**으로 ──
    글로만 적으면 아무도 못 찾는다. 사파리의 공유 아이콘을 그대로 그린다. */
#nkA2 ol.a2steps{margin:11px 0 2px;padding:0;list-style:none;counter-reset:a2s}
#nkA2 ol.a2steps li{counter-increment:a2s;display:flex;align-items:center;gap:9px;
  padding:8px 0;border-bottom:1px dashed var(--line);font-size:13.5px;color:var(--ink);
  line-height:1.45}
#nkA2 ol.a2steps li:last-child{border-bottom:0}
#nkA2 ol.a2steps li::before{content:counter(a2s);flex:0 0 auto;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--water);
  border-radius:50%;font-family:var(--mono);font-size:10.5px;font-weight:700;
  color:var(--water)}
#nkA2 ol.a2steps .g{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:7px;
  background:var(--card-2)}
#nkA2 ol.a2steps .g svg{width:17px;height:17px;fill:none;stroke:var(--ink);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#nkA2 ol.a2steps .t{min-width:0}

/*  바닥 — 단추. 360px 에서 잘리지 않게 **세로로 쌓는다**(가로 두 칸은 글자가
    줄바꿈되어 단추 높이가 들쭉날쭉해진다 — fishlog 에서 실측). */
#nkA2 .a2foot{flex:0 0 auto;display:grid;gap:7px;
  padding:11px 14px calc(13px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--card-2)}
#nkA2 .a2foot button{width:100%;font:inherit;font-size:14px;font-weight:700;padding:12px 10px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);
  cursor:pointer;min-height:44px}
#nkA2 .a2foot .a2go{border-color:var(--water);background:var(--water);color:#FFFFFF}
#nkA2 .a2foot .a2never{border-color:transparent;background:none;color:var(--dim);
  font-weight:400;font-size:12.5px;padding:6px 10px;min-height:34px;text-decoration:underline}
#nkA2 .a2foot .a2never:hover{color:var(--ink)}
#nkA2 .a2foot button:focus-visible{outline:2px solid var(--water);outline-offset:2px}
/*  화면이 아주 좁아도(360) 글자가 안 잘린다 — 글자만 한 단 줄인다. */
@media (max-width:380px){
  #nkA2 .a2head h2{font-size:15px}
  #nkA2 .a2foot button{font-size:13.5px}
}
/*  안내 층이 떠 있는 동안 뒤 화면은 안 밀린다. */
body.a2lock{overflow:hidden}