#fnSurvey{position:fixed;inset:0;z-index:130;display:none}
#fnSurvey.on{display:block}
#fnSurvey .sdim{position:absolute;inset:0;background:rgba(2,8,11,.82)}
#fnSurvey .swin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(760px,calc((100vw - 20px) / var(--fs,1)));
  max-height:calc(min(92vh,940px) / var(--fs,1));display:flex;
  flex-direction:column;background:var(--panel);border:1px solid var(--grid);
  box-shadow:0 24px 60px rgba(2,8,11,.7);overflow:hidden}
#fnSurvey .shead{display:flex;align-items:flex-start;gap:10px;padding:11px 16px 8px;
  border-bottom:1px solid var(--grid);flex:0 0 auto}
#fnSurvey .shead h3{margin:0;font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.35}
#fnSurvey .shead .sub{display:block;margin-top:2px;font-family:var(--mono);font-size:11px;
  color:var(--dim)}
#fnSurvey .sx{margin-left:auto;flex:0 0 auto;width:44px;height:44px;border:0;border-radius:2px;
  background:none;color:var(--dim);font-size:19px;line-height:1;cursor:pointer}
#fnSurvey .sx:hover{color:var(--now)}
#fnSurvey .sbody{flex:1 1 auto;overflow-y:auto;padding:0 0 6px;background:var(--panel)}
#fnSurvey .sfoot{flex:0 0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px dashed var(--grid);
  background:var(--panel2)}
#fnSurvey .sfoot .msg{font-family:var(--mono);font-size:11.5px;color:var(--amber);
  margin-right:auto;min-width:0}
#fnSurvey .sfoot .msg.warn{color:var(--now)}

/*  절 — 전표의 칸. 제목은 원장 머리와 같은 결(모노·자간)이다. */
#fnSurvey .sec{padding:12px 16px 14px;border-bottom:1px dashed var(--grid)}
#fnSurvey .sec:last-child{border-bottom:0}
#fnSurvey .sec h4{margin:0 0 2px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--dim);font-weight:700}
#fnSurvey .sec h4::before{content:"■ ";color:var(--now);font-size:8px}
#fnSurvey .sec .lead{margin:0 0 10px;font-size:12.5px;color:var(--soft)}

/*  항목 한 줄 — 왼쪽에 물음, 오른쪽에 고르는 칸. 좁으면 아래로 접는다. */
/*  ★ 고르는 칸의 폭은 **다섯 칸 + 모름이 한 줄에 들어가게** 잡는다 (실측).
    좁게 잡았더니 「모름」만 아랫줄로 떨어져 다른 항목처럼 보였다 — 한 물음의
    선택지가 두 줄로 갈리면 어디까지가 한 물음인지 눈이 헷갈린다. */
#fnSurvey .q{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,368px);gap:4px 14px;
  padding:7px 0;border-bottom:1px solid #10242E;align-items:center}
#fnSurvey .q:last-child{border-bottom:0}
#fnSurvey .q .lab{font-size:13.5px;color:var(--ink);min-width:0}
#fnSurvey .q .lab i{display:block;font-style:normal;font-size:11px;color:var(--dim);
  margin-top:1px;line-height:1.45}
#fnSurvey .q .opts{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
@media (max-width:640px){
  #fnSurvey .q{grid-template-columns:minmax(0,1fr)}
  #fnSurvey .q .opts{justify-content:flex-start}
  #fnSurvey .sec{padding:12px 12px 14px}
  #fnSurvey .swin{width:calc((100vw - 10px) / var(--fs,1));max-height:calc(94vh / var(--fs,1))}
}
/*  고르는 칸 — 사람의 기입이라 **먹지 파랑**. 고른 것만 채운다. */
#fnSurvey .o{border:1px solid var(--amber);background:transparent;color:var(--amber);
  font-family:var(--gothic);font-size:11.5px;padding:5px 7px;border-radius:2px;cursor:pointer;
  line-height:1.2;min-height:30px;white-space:nowrap}
#fnSurvey .o:hover{background:rgba(242,180,65,.12)}
#fnSurvey .o.on{background:var(--amber);color:var(--panel);font-weight:700}
/*  「모름」은 한 단 물러나 있다 — 고르는 것이 아니라 '안 고른 상태'다. */
#fnSurvey .o.none{border-color:var(--grid);color:var(--dim)}
#fnSurvey .o.none.on{background:var(--dim);border-color:var(--dim);color:var(--panel)}
#fnSurvey .go{border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  font:inherit;font-family:var(--mono);font-size:12.5px;padding:8px 16px;border-radius:2px;
  cursor:pointer;min-height:40px}
#fnSurvey .go:hover{background:var(--ink);color:var(--panel)}
#fnSurvey .go[disabled]{opacity:.5;cursor:default}
#fnSurvey .ghost{border-color:var(--amber);color:var(--amber)}
#fnSurvey .ghost:hover{background:var(--amber);color:var(--panel)}

/*  ── 설문 보기(집계) ── */
/*  ★ 막대는 **선택지마다** 그린다. 1등만 적으면 '보통 4명 · 좁다 3명' 처럼
    갈린 항목에서 무엇이 얼마나 갈렸는지 말할 수 없다. */
#fnSurvey .rq{padding:7px 0;border-bottom:1px solid #10242E}
#fnSurvey .rq:last-child{border-bottom:0}
#fnSurvey .rq .lab{font-size:13px;color:var(--ink);margin-bottom:4px;
  display:flex;gap:8px;align-items:baseline}
#fnSurvey .rq .lab .of{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
#fnSurvey .bar{display:grid;grid-template-columns:minmax(74px,auto) minmax(0,1fr) 34px;
  gap:8px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--soft);
  padding:1px 0}
#fnSurvey .bar .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fnSurvey .bar .g{height:8px;background:var(--panel2);border:1px solid #10242E}
#fnSurvey .bar .g i{display:block;height:100%;background:var(--soft)}
#fnSurvey .bar .c{text-align:right;font-variant-numeric:tabular-nums}
/*  ★ 남들이 가장 많이 고른 칸 = 집계된 사실이라 **인주**. */
#fnSurvey .bar.top .t{color:var(--now);font-weight:700}
#fnSurvey .bar.top .g i{background:var(--now)}
/*  ★ 내가 고른 칸 = 사람의 기입이라 **먹지 파랑** 표를 왼쪽에 세운다. */
#fnSurvey .bar.mine .t::before{content:"▌";color:var(--amber);margin-right:3px}
#fnSurvey .bar.mine .t{color:var(--amber)}
#fnSurvey .empty{padding:18px 16px;font-size:13px;color:var(--soft)}
/*  ★ 선박지수 별 다섯 — 팝업 안(설문 보기)과 낱장의 「My 설문」 칸
    (#fnSurveySlot, **팝업 밖**)이 같은 모양이어야 해서 전역 이름으로 둔다.
    예전에는 `#fnSurvey .stars` 였고 칸 쪽은 같은 값을 인라인으로 또 적고
    있었다 — 한쪽만 고치면 딴 모양이 된다. */
.fn-stars{font-family:var(--mono);letter-spacing:.14em;color:var(--now);white-space:nowrap}
/*  ★ 반 칸은 **글자가 아니라 폭**으로 그린다 (2026-09-03) — m.naksigo.com 의
    `starsHtml()`(mobile/app.php `.sbar`)과 **같은 길**이다.
    ▣ 왜 — 반쪽 글리프(U+2BE8)는 글꼴에 없는 곳이 많다. 이 서버에도 없고
      (`fc-list :charset=2be8` 0건), **글꼴은 보는 사람의 기기가 고른다** —
      서버에 깔아도 방문자 브라우저가 그리는 글자는 안 바뀐다. 실제로 별
      한 칸이 **빈 자리**로 떨어져 「★3.5」가 `★★★ ☆` 로 보였다(실측 사진).
    ▣ 그래서 빈 별 다섯을 깔고 **채운 별 다섯을 그 위에 겹쳐 폭으로 자른다.**
      3.5 면 70% — 소수점이 그대로 보이고 글꼴을 타지 않는다.
    ▣ ★ 두 겹이 **정확히 겹쳐야** 한다 — 같은 글자·같은 자간이라 겹치는데,
      부모의 `letter-spacing:.14em` 이 그대로 걸리면 두 겹이 어긋난다.
      그래서 이 안에서만 자간을 0 으로 되돌린다(naksigo 도 같은 까닭). */
.fn-stars .sbar{position:relative;display:inline-block;white-space:nowrap;
  color:var(--grid);letter-spacing:0}
.fn-stars .sbar .on{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;
  color:var(--now)}
/*  ★ 선박지수가 **없을 때** (2026-09-02 지시: "선박지수가 없을 때 조황지수처럼
    점선 빈 그래프로 통일") — 별을 안 그리는 것이 아니라 **점선 윤곽의 별 SVG
    다섯**이 선다(아래 starLine). 값은 다섯 사이트가 똑같이 쓰기로 한 것이다:
    `color:var(--dim)` · `opacity:.85` · 그늘 없음(onfishing.net·naksigo.com 의
    `.rep .stars.none` 과 같은 선언). `mine.php` 의 My 설문 별과도 한 벌이다. */
.fn-stars.none{color:var(--dim);opacity:.85;line-height:1}
.fn-stars.none .dash{display:inline-flex;align-items:center;gap:1px}
.fn-stars.none svg{display:block;vertical-align:middle}