/*  ══ 안내 층 — 이 사이트(시안 A안)의 결. 다른 사이트에서 색을 가져오지 않는다 ══
    ▣ 폰 아래쪽에서 올라오는 **낱장 한 장**이다 — 엄지가 닿는 자리에 단추를
      둔다. 화면 한가운데 띄우면 단추가 손가락에서 가장 먼 자리에 선다.
    ▣ ★ vh 는 `--fs`(글자 크기 zoom)로 나눈다 — zoom 은 vh 를 안 따라온다
      (layout/shell.php 의 오래된 규율. body.m{zoom:var(--fs,1)}).
    ▣ ★ 곁말에 `--dim`(#5F7C87)을 안 쓴다 — 이 판(#FBFDFD) 위에서 4.36:1 이라
      4.5:1 에 못 미친다(실측). 대신 `--soft`(#3E5C68, 7.0:1)를 쓴다. */
#ftA2{position:fixed;inset:0;z-index:150;display:none}
#ftA2.on{display:block}
#ftA2 .a2dim{position:absolute;inset:0;background:rgba(10,29,37,.62)}
#ftA2 .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(--hull);border:1px solid var(--line);border-bottom:0;
  border-radius:var(--r,13px) var(--r,13px) 0 0;
  box-shadow:0 -18px 50px rgba(21,44,91,.34);overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  #ftA2.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).
    무엇이 놓이는지 미리 보여 주는 것이 설명 한 줄보다 낫다. */
#ftA2 .a2head{display:flex;align-items:center;gap:11px;padding:13px 14px 11px;
  border-bottom:1px solid var(--line);flex:0 0 auto;background:var(--hull2)}
#ftA2 .a2head img{flex:0 0 auto;width:44px;height:44px;border:1px solid var(--line);
  border-radius:10px;background:var(--hull)}
#ftA2 .a2head h2{margin:0;font-size:16px;font-weight:800;color:var(--ink);line-height:1.3}
#ftA2 .a2head .sub{display:block;margin-top:2px;font-family:var(--mono);font-size:10.5px;
  color:var(--soft);letter-spacing:.04em}
#ftA2 .a2x{margin-left:auto;flex:0 0 auto;width:40px;height:40px;border:0;border-radius:8px;
  background:none;color:var(--soft);font-size:20px;line-height:1;cursor:pointer}
#ftA2 .a2x:hover{color:var(--ink)}

#ftA2 .a2body{flex:1 1 auto;overflow-y:auto;padding:12px 14px 4px}
#ftA2 .a2body .lead{margin:0;font-size:13.5px;color:var(--soft);line-height:1.65}
#ftA2 .a2body .lead b{color:var(--ink)}
/*  ── 손으로 넣는 갈래(아이폰·그 밖) — 차례를 **번호와 그림**으로 ──
    글로만 적으면 아무도 못 찾는다. 사파리의 공유 아이콘을 그대로 그린다. */
#ftA2 ol.a2steps{margin:11px 0 2px;padding:0;list-style:none;counter-reset:a2s}
#ftA2 ol.a2steps li{counter-increment:a2s;display:flex;align-items:center;gap:9px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink);
  line-height:1.45}
#ftA2 ol.a2steps li:last-child{border-bottom:0}
#ftA2 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(--sonar-ink);
  border-radius:50%;font-family:var(--mono);font-size:10.5px;font-weight:700;
  color:var(--sonar-ink)}
/*  ★ 이름은 `.g` 가 아니라 **`.a2g`** 다 (2026-09-04 실측). fishnow 껍데기에는
    이미 `.g`(계기 한 칸, `padding:10px 12px`)가 있어, 그 이름을 쓰면 26px
    네모의 속이 패딩으로 다 차 **그림이 0px 로 찌그러진다**(화면에는 빈
    네모만 남는다 — 사진으로 잡았다). 다섯 사이트에 같은 조각을 옮겨
    붙이는 일이라 **이름은 이 층의 이름칸(a2)** 을 달고 다닌다.
    두 앱을 한 벌로 두려고 여기(fishtoday)도 같이 바꾼다. */
#ftA2 ol.a2steps .a2g{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(--hull2)}
#ftA2 ol.a2steps .a2g svg{width:17px;height:17px;fill:none;stroke:var(--soft);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#ftA2 ol.a2steps .t{min-width:0}

/*  바닥 — 단추. 360px 에서 잘리지 않게 **세로로 쌓는다**(가로 두 칸은 글자가
    줄바꿈되어 단추 높이가 들쭉날쭉해진다 — fishlog 에서 실측). */
#ftA2 .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(--hull2)}
#ftA2 .a2foot button{width:100%;font:inherit;font-size:14px;font-weight:700;padding:12px 10px;
  border:1px solid var(--strip1);border-radius:var(--r-sm,8px);background:var(--hull);
  color:var(--strip1);cursor:pointer;min-height:44px}
#ftA2 .a2foot .a2go{background:var(--strip1);color:var(--on-strip)}
#ftA2 .a2foot .a2never{border-color:transparent;background:none;color:var(--soft);
  font-weight:400;font-size:12.5px;padding:6px 10px;min-height:34px;text-decoration:underline}
#ftA2 .a2foot .a2never:hover{color:var(--ink)}
#ftA2 .a2foot button:focus-visible{outline:2px solid var(--sonar-ink);outline-offset:2px}
/*  화면이 아주 좁아도(360) 글자가 안 잘린다 — 단추 글자는 줄바꿈을 허락한다. */
@media (max-width:380px){
  #ftA2 .a2head h2{font-size:15px}
  #ftA2 .a2foot button{font-size:13.5px}
}
/*  안내 층이 떠 있는 동안 뒤 화면은 안 밀린다. */
body.a2lock{overflow:hidden}