/*  ══ 안내 층 — 시안 S 「조타실 계기판」의 결 ═══════════════════════════════
    ▣ ★ **밝은 사이트의 색을 그대로 가져오면 안 보인다.** fishlog(전표 종이
      #F6EEDD)·fishtoday(흰 판 #FBFDFD)의 값을 이 어두운 판에 얹으면 흰 위에
      흰 글씨가 된다. 그래서 이 층은 `--panel`(#0B1A22) 위에 서고 글자는
      `--ink`(#DCEEF2)·`--soft`(#9FBDC7)만 쓴다.
    ▣ ★ 재 본 대비(실측, WCAG 상대휘도)
        --ink  #DCEEF2 on --panel  #0B1A22 = 14.8:1   (머리·차례 글)
        --soft #9FBDC7 on --panel  #0B1A22 =  8.9:1   (안내 글)
        --soft #9FBDC7 on --panel2 #102630 =  7.9:1   (바닥의 곁말·「다시 보지 않기」)
        --ink  #DCEEF2 on --panel2 #102630 = 13.1:1   (둘째 단추 글)
        --deep #050D12 on --now    #3BE08A = 11.4:1   (첫 단추 글)
      **모두 4.5:1 위**다. `--dim`(#6D95A2)은 이 판에서 4.8:1 로 아슬아슬해
      본문에는 안 쓴다 — 글자 크기를 키우는 화면이라 여유를 둔다.
    ▣ 폰 아래쪽에서 올라오는 **낱장 한 장**이다 — 엄지가 닿는 자리에 단추를
      둔다. 화면 한가운데 띄우면 단추가 손가락에서 가장 먼 자리에 선다.
    ▣ ★ vh 는 `--fs`(글자 크기 zoom)로 나눈다 — zoom 은 vh 를 안 따라온다
      (layout/shell.php 의 오래된 규율. 이 파일도 그 '여덟 곳' 에 든다). */
#fnA2{position:fixed;inset:0;z-index:150;display:none}
#fnA2.on{display:block}
#fnA2 .a2dim{position:absolute;inset:0;background:rgba(2,7,10,.76)}
#fnA2 .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(--panel);border:1px solid var(--grid);border-bottom:0;
  box-shadow:0 -18px 50px rgba(0,0,0,.6);overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  #fnA2.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).
    무엇이 놓이는지 미리 보여 주는 것이 설명 한 줄보다 낫다. */
#fnA2 .a2head{display:flex;align-items:center;gap:11px;padding:13px 14px 11px;
  border-bottom:1px solid var(--grid);flex:0 0 auto;background:var(--panel2)}
#fnA2 .a2head img{flex:0 0 auto;width:44px;height:44px;border:1px solid var(--grid);
  border-radius:8px;background:var(--deep)}
#fnA2 .a2head h2{margin:0;font-size:16px;font-weight:800;color:var(--ink);line-height:1.3}
#fnA2 .a2head .sub{display:block;margin-top:2px;font-family:var(--mono);font-size:10.5px;
  color:var(--soft);letter-spacing:.04em}
#fnA2 .a2x{margin-left:auto;flex:0 0 auto;width:40px;height:40px;border:0;border-radius:3px;
  background:none;color:var(--soft);font-size:20px;line-height:1;cursor:pointer}
#fnA2 .a2x:hover{color:var(--now)}

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

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