/* ══ 칸 줄(SN) ═══════════════════════════════════════════════════════════════════════════════════
   ▣ 앱바는 창과 함께 구르므로(붙박이가 아니다) 줄은 화면 맨 위부터 탭띠 위까지 덮는다 — 칸 머리(‹ · 제목)가 그 자리의 머리띠다.
   ▣ 깊이 0 이면 줄을 감춘다. 칸이 열려 있는 동안 창 스크롤을 잠근다(html.snlock). 탭띠(z30)는 늘 위. */
.snov{position:fixed;left:0;right:0;top:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:39;display:none}   /* 탭띠 z40 아래 */
.snov.on{display:block}
html.snlock,html.snlock body{overflow:hidden}
.snov .stk{height:100%;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.snov .stk::-webkit-scrollbar{display:none}
.snov .pnl{flex:0 0 100%;min-width:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;
  scroll-snap-align:start;scroll-snap-stop:always;position:relative;background:var(--desk,#D8CFBC)}
.snov .pnl.ghost{background:transparent;pointer-events:none}
.snov .pnl.sub{box-shadow:-8px 0 18px rgba(43,36,32,.18)}
.snov .pnl > .pin{max-width:760px;margin:0 auto;padding:10px 12px calc(28px + env(safe-area-inset-bottom))}
.pnlh{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:4px;height:48px;padding:0 4px 0 0;
  background:var(--ledger,#F6EEDD);color:var(--ink,#2B2420);border-bottom:1px solid var(--rule,#D3C2A0)}
.pnlh .bk{flex:0 0 auto;min-width:44px;height:44px;border:0;background:none;color:var(--stamp,#B7282E);font-size:26px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pnlh .bk:focus-visible{outline:2px solid var(--carbon,#3E5E86);outline-offset:-4px}
.pnlh .t{flex:1 1 auto;min-width:0;font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnlh .dots{flex:0 0 auto;display:flex;gap:4px;padding-right:10px}
.pnlh .dots i{width:6px;height:6px;border-radius:50%;background:var(--rule,#D3C2A0)}
.pnlh .dots i.on{background:var(--stamp,#B7282E)}
.snov .pnl .snload{padding:30px 4px;color:var(--dim,#8A7B68);font-size:13.5px}
.snov .pnl .snerr{padding:24px 4px;color:var(--stamp,#B7282E);font-size:13.5px}
/* 칸으로 가져온 쪽의 겉 — 쪽 뷰의 첫 덩이(.stack 등)가 넓은 화면 기준 폭을 가져와도 칸 폭에 맞춘다 */
.snov .pnl .snpage{min-width:0}
.snov .pnl .snpage > *{max-width:100%!important}
.snov .pnl nav.note[aria-label="길"]{display:none}           /* 길 표시(항구정보 › 비응항)는 칸 머리가 맡는다 */
.snov .pnl .tw,.snov .pnl table{max-width:100%}
/* 공용 층을 칸 안에 눕힌다 — 공용 파일은 그대로, 여기서만 모양을 바꾼다(dev.onfishing·dev.naksigo 와 같은 규칙) */
.snov .pnl .inpnl{position:static!important;inset:auto!important;display:block!important;z-index:auto!important}
.snov .pnl .inpnl > .ptdim,.snov .pnl .inpnl > .btdim,.snov .pnl .inpnl > .vcdim,.snov .pnl .inpnl > .pdim,
.snov .pnl .inpnl > .sdim{display:none!important}
.snov .pnl .inpnl .ptwin,.snov .pnl .inpnl .btwin,.snov .pnl .inpnl .vcwin,.snov .pnl .inpnl .pwin,
.snov .pnl .inpnl .swin{position:static!important;transform:none!important;
  left:auto!important;top:auto!important;width:auto!important;max-width:none!important;max-height:none!important;
  height:auto!important;overflow:visible!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  margin:0!important;padding:6px 0 0!important;background:transparent!important}
.snov .pnl .inpnl #ptBox,.snov .pnl .inpnl #btBox,.snov .pnl .inpnl #vcBox{max-height:none!important;overflow:visible!important}
.snov .pnl .inpnl .ptx,.snov .pnl .inpnl .btx,.snov .pnl .inpnl .vcx,.snov .pnl .inpnl .px,
.snov .pnl .inpnl .sx{display:none!important}
/* 설문 — 창 안 몸통의 높이 제한을 걷어 칸이 구른다 */
.snov .pnl .inpnl .sbody{max-height:none!important;overflow:visible!important}
.snov .pnl .inpnl .pbody{height:clamp(220px,calc(62dvh / var(--fs,1)),640px)!important;touch-action:auto!important;cursor:auto!important}
/* 조황사진 목록 칸 — 사진은 칸 폭 그대로, 아래에 출처. 두 손가락 확대는 브라우저 몫. */
.snov .pnl .phli{margin:0 0 14px}
.snov .pnl .phli img{display:block;width:100%;height:auto;min-height:120px;border-radius:10px;border:1px solid var(--rule,#D3C2A0);background:var(--ledger-2,#EFE4CD)}
.snov .pnl .phli figcaption{margin-top:5px;font-size:11.5px;color:var(--dim,#8A7B68);line-height:1.5;word-break:break-all}
.snov .pnl .phli figcaption .n{font-family:var(--mono);color:var(--ink-soft,#5A4C40)}
.snov .pnl .phli figcaption b{color:var(--ink,#2B2420)}
.snov .pnl .phli figcaption a{color:var(--carbon,#3E5E86)}
@media (prefers-reduced-motion:reduce){ .snov .stk{scroll-behavior:auto} }
/* 개체 단추 줄 — 작게(dev.onfishing 지시 1·2 「크기 축소」). 누름판(44px)은 공용 _porttrend 의 .ptbtn::before 가 지킨다 —
   ★ 여기서 ::before 를 또 손대지 않는다(2026-10-02: inset 을 덧붙였더니 공용 규칙의 translateY(-50%) 와 겹쳐 누름판이 26px 위로 떠
     바로 위 어종 칩을 덮었다 — 운영 m.fishtoday 항구 화면의 첫 칩이 안 눌렸다). */
body.mo .ptcall{gap:6px;margin:10px 0 6px}
body.mo .ptcall .ptbtn{padding:5px 11px;min-height:32px;font-size:12.5px;border-radius:8px}