#flSurvey{position:fixed;inset:0;z-index:130;display:none}
#flSurvey.on{display:block}
#flSurvey .sdim{position:absolute;inset:0;background:rgba(30,24,18,.74)}
#flSurvey .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(--ledger);border:1px solid var(--edge);
  box-shadow:0 24px 60px rgba(30,24,18,.55);overflow:hidden}
#flSurvey .shead{display:flex;align-items:flex-start;gap:10px;padding:11px 16px 8px;
  border-bottom:3px double var(--ink);flex:0 0 auto}
#flSurvey .shead h3{margin:0;font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.35}
#flSurvey .shead .sub{display:block;margin-top:2px;font-family:var(--mono);font-size:11px;
  color:var(--dim)}
#flSurvey .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}
#flSurvey .sx:hover{color:var(--stamp)}
#flSurvey .sbody{flex:1 1 auto;overflow-y:auto;padding:0 0 6px;background:var(--ledger)}
#flSurvey .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(--rule);
  background:var(--ledger-2)}
#flSurvey .sfoot .msg{font-family:var(--mono);font-size:11.5px;color:var(--carbon);
  margin-right:auto;min-width:0}
#flSurvey .sfoot .msg.warn{color:var(--stamp)}

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

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

/*  ── 설문 보기(집계) ── */
/*  ★ 막대는 **선택지마다** 그린다. 1등만 적으면 '보통 4명 · 좁다 3명' 처럼
    갈린 항목에서 무엇이 얼마나 갈렸는지 말할 수 없다. */
#flSurvey .rq{padding:7px 0;border-bottom:1px solid var(--rule-2)}
#flSurvey .rq:last-child{border-bottom:0}
#flSurvey .rq .lab{font-size:13px;color:var(--ink);margin-bottom:4px;
  display:flex;gap:8px;align-items:baseline}
#flSurvey .rq .lab .of{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
#flSurvey .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(--ink-soft);
  padding:1px 0}
#flSurvey .bar .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#flSurvey .bar .g{height:8px;background:var(--ledger-2);border:1px solid var(--rule-2)}
#flSurvey .bar .g i{display:block;height:100%;background:var(--ink-soft)}
#flSurvey .bar .c{text-align:right;font-variant-numeric:tabular-nums}
/*  ★ 남들이 가장 많이 고른 칸 = 집계된 사실이라 **인주**. */
#flSurvey .bar.top .t{color:var(--stamp);font-weight:700}
#flSurvey .bar.top .g i{background:var(--stamp)}
/*  ★ 내가 고른 칸 = 사람의 기입이라 **먹지 파랑** 표를 왼쪽에 세운다. */
#flSurvey .bar.mine .t::before{content:"▌";color:var(--carbon);margin-right:3px}
#flSurvey .bar.mine .t{color:var(--carbon)}
#flSurvey .empty{padding:18px 16px;font-size:13px;color:var(--ink-soft)}
/*  ★ 선박지수 별 다섯 — 팝업 안(설문 보기)과 낱장의 「My 설문」 칸
    (#flSurveySlot, **팝업 밖**)이 같은 모양이어야 해서 **전역 이름**으로 둔다.
    예전에는 `#flSurvey .stars` 였고 칸 쪽은 같은 값을 인라인으로 또 적고
    있었다 — 한쪽만 고치면 딴 모양이 된다(fishnow.kr 이 같은 까닭으로 그렇게 했다). */
.fl-stars{font-family:var(--mono);letter-spacing:.14em;color:var(--stamp);white-space:nowrap}
/*  ★ 반 칸은 **글자가 아니라 폭**으로 그린다 (2026-09-03) — m.naksigo.com 의
    `starsHtml()`(mobile/app.php `.sbar`)·fishnow.kr(같은 이름 파일)과 **같은 길**이다.
    ▣ 왜 — 반쪽 글리프(U+2BE8)는 글꼴에 없는 곳이 많다. 이 서버에도 없고
      (`fc-list :charset=2be8` 0건), **글꼴은 보는 사람의 기기가 고른다** —
      서버에 깔아도 방문자 브라우저가 그리는 글자는 안 바뀐다. 실제로 별
      한 칸이 **빈 자리**로 떨어져 「★3.5」가 `★★★ ☆` 로 보였다(실측 사진).
    ▣ 그래서 빈 별 다섯을 깔고 **채운 별 다섯을 그 위에 겹쳐 폭으로 자른다.**
      3.5 면 70% — 소수점이 그대로 보이고 글꼴을 타지 않는다.
    ▣ ★ 밑판은 **원장 줄의 빈 별과 같은 빛깔**(--edge)이고 채움은 인주(--stamp)다
      (shell.php 의 `.row .spec .v.gr .stars svg path` 와 한 벌) — 두 겹을 같은
      빛깔로 두면 반 칸이 다시 안 보인다.
    ▣ ★ 두 겹이 **정확히 겹쳐야** 한다 — 같은 글자·같은 자간이라 겹치는데,
      부모의 `letter-spacing:.14em` 이 그대로 걸리면 두 겹이 어긋난다.
      그래서 이 안에서만 자간을 0 으로 되돌린다(naksigo·fishnow 도 같은 까닭). */
.fl-stars .sbar{position:relative;display:inline-block;white-space:nowrap;
  color:var(--edge);letter-spacing:0}
.fl-stars .sbar .on{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;
  color:var(--stamp)}