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

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

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