/* ── 평판 별 · 설문 (2026-08-09 지정) ──────────────────────────────── ▣ ★ 별은 **조황 등급 칸과 같은 말**을 쓴다 찬 별 = 도드라진다(양각) · 빈 별 = 파여 있다(음각). 한 화면에서 입체 언어가 두 벌이면 둘 다 장식으로 읽힌다. ▣ ★ 반 칸을 그린다 4.37개짜리 별은 사람이 못 읽지만 4.5는 읽는다. 서버가 반 칸으로 끊어 주고, 반 칸은 글리프를 겹쳐 왼쪽만 채운다(★을 ☆ 위에 clip 해서 얹는다). */ .rep{display:inline-flex;align-items:center;gap:6px;vertical-align:middle; margin-left:8px;white-space:nowrap} .rep .stars{position:relative;display:inline-block;line-height:1; font-size:15px;letter-spacing:1px;color:var(--line-strong,var(--line))} /* 빈 별 — 파인 쪽. 위에 그늘, 아래에 빛줄. */ .rep .stars .bg{color:color-mix(in srgb, var(--dim) 42%, transparent); text-shadow:0 -1px 0 rgba(var(--sh),.34), 0 1px 0 var(--eng-light,rgba(255,255,255,.55))} /* 찬 별 — 솟은 쪽. 위가 밝고 아래가 어둡고, 제 색 그늘이 아래로 진다. */ .rep .stars .fg{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap; color:var(--sonar-ink,#A9640A); text-shadow:0 -1px 0 var(--eng-light,rgba(255,255,255,.55)), 0 1px 0 color-mix(in srgb, currentColor 45%, transparent), 0 2px 2px color-mix(in srgb, currentColor 28%, transparent)} /* ══ 값이 없을 때 — 점선 빈 별 다섯 (2026-09-02 지시) ══════════════════════ ★ 조황지수 빈 그래프와 **같은 어휘**다: 바탕 없음 · 점선 · 그늘 없음 · 살짝 흐리게. 다른 것은 모양이 네모 칸이 아니라 **별**이라는 것뿐이다. ★ 파인 홈(★0)의 그늘(text-shadow)을 여기서는 **주지 않는다** — 그늘이 있으면 '재어 보니 0' 처럼 읽힌다. 없는 것은 파여 있지도 않다. */ .rep .stars.none{color:var(--dim);opacity:.85;line-height:1} .rep .stars.none .dash{display:inline-flex;align-items:center;gap:1px} .rep .stars.none svg{display:block;vertical-align:middle} .rep .n{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)} /* ★ 부르는 말(설문 보기·설문 참여)의 옷. ★ 전에는 `.rep .join` 이었는데, 단추를 제목 밖(.repacts)으로 옮기면서 **선택자가 안 맞아 옷을 통째로 벗었다** — 브라우저 기본 단추(회색 상자)로 돌아가 링크가 아니라 단추로 보였다(실측). 자리와 무관하게 걸리도록 푼다. */ .join{font-size:12px;font-weight:700; color:color-mix(in srgb, var(--water) 50%, var(--ink));cursor:pointer; background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px; font-family:var(--ui)} .join:hover{color:var(--sonar-ink,#A9640A)} .join:focus-visible{outline:2px solid var(--water);outline-offset:2px;border-radius:4px} /* 요약 — 항목마다 '가장 많이 고른 답'과 몇 명이 그랬는지 */ .repsum{margin:8px 0 0;display:grid;gap:5px} .repsum .row{display:flex;align-items:baseline;gap:8px;font-size:12.5px; padding:4px 0;border-bottom:1px dotted var(--line)} .repsum .row:last-child{border-bottom:0} .repsum .k{color:var(--ink-soft);flex:1 1 auto;min-width:0} .repsum .v{font-weight:700;color:var(--ink);white-space:nowrap} /* ★ 얼마나 갈렸는지 밝힌다. 절반이 다르게 답했는데 하나만 보여 주면 거짓이 된다. */ .repsum .a{font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap} .repsum .a.split{color:var(--sonar-hot,#CC4318)} /* ── 선택지별 표 수 (2026-08-11 지정) ──────────────────────────────── ▣ 한 줄에 항목 이름 → 선택지들. 좁아지면 선택지가 아랫줄로 접힌다. ▣ ★ 고른 칸만 진하게. 나머지는 있는 그대로 두되 **0표는 한 단 흐리게** — 아무도 안 고른 답이라는 것도 사실이다. ▣ 숫자는 고정폭으로 — 자릿수가 흔들리면 줄이 춤춘다. */ .repsum .rowq{display:block;padding:6px 0} .repsum .rowq .k{display:block;margin-bottom:4px} .repsum .rowq .k .a{margin-left:6px} .repsum .opts{display:flex;flex-wrap:wrap;gap:4px} .repsum .opt{display:inline-flex;align-items:center;gap:5px; padding:2px 8px;border-radius:99px;font-size:11.5px;line-height:1.6; border:1px solid var(--line);background:var(--hull,#FBFDFD);color:var(--ink-soft)} .repsum .opt b{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--dim)} .repsum .opt.zero{opacity:.5} .repsum .opt.on{background:var(--sonar,#F0A038);border-color:var(--sonar,#F0A038); color:var(--on-sonar,#141E26);font-weight:700} .repsum .opt.on b{color:var(--on-sonar,#141E26)} /* 맞음/틀림 — 좋아요와 몸짓은 닮았지만 **제 옷을 입는다.** .nkacts 를 빌렸더니 회원 스크립트가 그 표식을 보고 하트·별을 또 얹었다. */ .verdict{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px} .vbtn{display:inline-flex;align-items:center;gap:5px;cursor:pointer; padding:5px 11px;border-radius:99px;min-height:32px; border:1px solid var(--line);background:var(--hull,#FBFDFD);color:var(--ink-soft); font-family:var(--ui);font-size:12.5px;font-weight:700;white-space:nowrap} .vbtn:hover{background:var(--hull-2,#EDF3F4);color:var(--ink);border-color:var(--water)} .vbtn:disabled{opacity:.5;cursor:default} /* ★ 아이콘도 이 화면의 입체 언어를 따른다 — 안 누른 것은 파여 있다. */ .vbtn .ic{font-size:14px;line-height:1; text-shadow:0 -1px 0 rgba(var(--sh),.34), 0 1px 0 var(--eng-light,rgba(255,255,255,.55))} .vbtn.ok .ic{color:var(--water)} .vbtn.no .ic{color:var(--sonar-hot,#CC4318)} .vbtn .cnt{font-family:var(--mono);font-weight:400;color:var(--ink-soft)} .verdict .q{font-size:12px;color:var(--ink-soft)} .verdict .done{font-size:12px;color:var(--water);font-weight:700} /* ── 설문지 ───────────────────────────────────────────────────────── */ .svsec{margin:0 0 16px} .svsec > h3{margin:0 0 3px;font-size:14px;color:var(--lamp,#0A1D25)} .svsec > .lead{margin:0 0 10px;font-size:11.5px;color:var(--ink-soft)} .svq{padding:9px 0;border-top:1px solid var(--line)} .svq > .lb{display:block;font-size:12.5px;color:var(--ink);margin-bottom:6px} /* ★ `.note` 로 뒀더니 이 화면에 이미 있던 회색 블록 규칙과 겹쳐 곁말이 상자로 변했다(실측). 설문 것은 이름을 따로 쓴다. */ /* ★ --dim 으로 뒀더니 여명 4.36 · 해도 4.45 로 기준(4.5)에 못 미쳤다(실측). 이 화면에서 세 번째로 같은 곳에 걸렸다 — 작은 글씨에 --dim 은 아슬아슬하다. */ .svq > .svnote{display:block;font-size:11px;color:var(--ink-soft);margin:-3px 0 6px; line-height:1.5} /* ★ 라디오는 감추고 라벨을 알약으로 그린다. 자바스크립트 없이도 골라진다. ★ 폰에서 손가락이 닿아야 하므로 32px 아래로 내리지 않는다. */ .svopts{display:flex;gap:5px;flex-wrap:wrap} .svopts input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} /* ★ 고르는 단추를 한 단 줄였다 (2026-08-09 지정). 서른다섯 문항 × 대여섯 갈래라 알약이 조금만 커도 화면이 알약으로 뒤덮인다. 글자·여백·키를 함께 줄여야 모양이 안 무너진다 — 12 → 11.5px · 6/10 → 4/9px · 키 32 → 27px ★ 폰에서 누를 자리를 잃지 않도록 **줄 간격(gap)은 오히려 늘렸다**(4 → 5px). 단추가 작아질수록 서로 붙으면 옆 것을 누른다 — 작게 만드는 값과 헛손질을 막는 값은 다르다. */ .svopts label{padding:4px 9px;border-radius:99px;border:1px solid var(--line); background:var(--hull,#FBFDFD);color:var(--ink-soft);font-size:11.5px;cursor:pointer; min-height:27px;display:inline-flex;align-items:center;user-select:none} .svopts label:hover{border-color:var(--water);color:var(--ink)} .svopts input:checked + label{background:var(--sonar,#F0A038);color:var(--on-sonar,#141E26); border-color:var(--sonar,#F0A038);font-weight:700} .svopts input:focus-visible + label{outline:2px solid var(--water);outline-offset:2px} /* '모름'은 한 단 물러나 보여야 한다 — 고르라고 만든 것이 아니라 빠져나갈 문이다. */ .svopts label.skip{background:none;border-style:dashed;color:var(--dim)} /* ★ 고른 '모름' 이 위 규칙에서 주황 테를 **물려받아** 마치 고른 답처럼 도드라졌다(실측). 테 색까지 되돌린다 — 모름은 답이 아니라 빠져나갈 문이다. */ .svopts input:checked + label.skip{background:var(--hull-2,#EDF3F4);color:var(--ink-soft); border-color:var(--line);border-style:solid;font-weight:400} /* ★ 「설문 보기」·「설문 참여」는 제목 **다음 줄**에 나란히 선다. */ .repacts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0 8px} .repacts .join{font-size:12.5px} /* ★ 표한 뒤 줄은 **한 줄**이다 — 접히면 오른쪽 칸이 들쭉날쭉해진다. 좁아지면 개수 쪽이 먼저 줄어들고(min-width:0), 그래도 모자라면 …으로 끊는다. */ .verdict.done1{flex-wrap:nowrap;white-space:nowrap;gap:8px} .verdict.done1 .done{flex:0 0 auto} .verdict.done1 .done b{color:var(--water)} .verdict.done1 .svcount{flex:1 1 auto;min-width:0;text-align:right; overflow:hidden;text-overflow:ellipsis} /* ★ 「설문 보기」의 ✕ — 제목 줄 오른쪽 끝. 카드가 relative 라야 붙는다. */ #surveyBody{position:relative} .vwx{position:absolute;top:-2px;right:0;width:32px;height:32px; display:grid;place-items:center;cursor:pointer; border:1px solid var(--line);border-radius:9px;background:var(--hull,#FBFDFD); color:var(--ink-soft);font-size:14px;line-height:1;font-family:var(--ui)} .vwx:hover{background:var(--hull-2,#EDF3F4);color:var(--ink);border-color:var(--water)} .vwx:focus-visible{outline:2px solid var(--water);outline-offset:2px} /* ✕ 가 제목 위에 앉으므로 제목이 그 밑으로 들어가지 않게 자리를 비운다 */ #surveyBody > h2{padding-right:40px} .vwbar{margin-top:14px} .vwbar .go{flex:1 1 auto} /* ── 「설문 보기」·레이어 팝업·설문지 작성 (2026-08-09 지정) ───────── ▣ 자리를 셋으로 갈랐다 오른쪽 「설문 보기」 — 결과. **눌러야** 열린다. 한가운데 레이어 — 참여하시겠습니까(길이 갈리는 자리) 가운데 「설문지 작성」 — 서른다섯 문항. 넓은 자리가 필요하다. */ .rep .sep{color:var(--line);margin:0 1px} /* 설문 보기 — 칸마다 제목을 세워 어디까지가 선장 이야기인지 보이게 한다 */ .vwhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 8px} /* ★ .muted 를 함께 달았더니 색이 --dim 으로 되돌아갔다 — 두 규칙 다 클래스 하나짜리라 **나중에 적힌 .muted 가 이긴다**(실측: color 를 적어 뒀는데도 rgb(95,124,135) 이 나왔다). 특이도 싸움을 하는 대신 .muted 를 떼고 여기서 전부 적는다. ★ 대비: --dim 이면 여명 3.97 · 노을 4.38 · 해도 3.87 로 기준(4.5)에 못 미쳤다. 이 화면에서 네 번째로 같은 곳에 걸린다 — 작은 글씨 + --dim + 옅은 바탕. */ .vwnote{font-size:11.5px;line-height:1.65;margin:0 0 12px;color:var(--ink-soft); padding:8px 10px;border-radius:8px;background:var(--hull-2,#EDF3F4)} .vwsec{margin:0 0 14px} .vwsec > h3{margin:0 0 4px;font-size:13.5px;color:var(--lamp,#0A1D25); display:flex;align-items:baseline;gap:6px} .vwsec > h3 .cnt{font-family:var(--mono);font-size:11px;color:var(--ink-soft);font-weight:400} /* ── 레이어 팝업 ────────────────────────────────────────────────── ★ 를 쓴다 — 초점 가두기·Esc·바깥 어둡게를 브라우저가 해 준다. ★ ::backdrop 은 상속을 안 받으므로 색을 직접 준다. */ /* ★ 여기서 `var(--card)` 를 썼는데 **이 화면에는 그런 토큰이 없다**(해도 화면에만 있다). var() 하나가 못 풀리면 선언 전체가 무효라, 팝업 바탕이 통째로 **투명**이 되어 흐린 페이지 위에 글자만 떠 있었다(실측: backgroundColor 가 rgba(0,0,0,0)). ★ 눈으로는 "좀 허전하네" 로 보일 뿐 오류가 나지 않는다. 이 저장소에서 같은 함정을 세 번째 밟았다 — 새 토큰을 쓸 때는 **있는지부터 본다.** 이 화면의 카드 바탕은 --hull 이다. 되돌아갈 값도 함께 적는다. */ #svAsk{border:0;padding:0;border-radius:14px;max-width:min(94vw,460px);width:100%; background:var(--hull,#fff);color:var(--ink); box-shadow:0 18px 60px rgba(var(--sh),.38)} #svAsk::backdrop{background:rgba(6,18,26,.55);backdrop-filter:blur(2px)} .svask-in{padding:18px} .svask-in{position:relative} .svask-in > h2{margin:0 0 8px;font-size:17px;color:var(--lamp,#0A1D25);padding-right:34px} .svask-in .svx{position:absolute;top:8px;right:8px;width:38px;height:38px;border:0; border-radius:10px;background:none;color:var(--dim,#5f7c87);font-size:17px; line-height:1;cursor:pointer} .svask-in .svx:hover{background:rgba(var(--sh),.08)} .svask-in .svx:focus-visible{outline:2px solid var(--lamp,#0A1D25);outline-offset:2px} .svask-in .lead{font-size:14px;margin:0 0 6px} .svask-in .muted{font-size:12.5px;line-height:1.65;margin:0 0 4px;color:var(--ink-soft)} .svask-in .muted.small{font-size:11.5px} .svhow .tk.none{color:var(--ink-soft);font-weight:400} @media (prefers-reduced-motion:no-preference){ #svAsk[open]{animation:svpop .16s ease-out} } @keyframes svpop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1}} /* ── 설문지 작성(가운데 칸) ──────────────────────────────────────── ★ 오른쪽에 있던 시절의 '스스로 스크롤'(.surveywrap)을 걷어냈다. 가운데는 화면 전체가 따라 스크롤하므로 안쪽에 또 스크롤을 두면 휠이 어느 쪽을 움직이는지 알 수 없다. */ #svWrite h2 .meta{margin-left:8px;font-family:var(--mono);font-size:12px; color:var(--ink-soft);font-weight:400} #svWrite .svlead{font-size:12.5px;line-height:1.7;margin:0 0 12px;color:var(--ink-soft)} #svWrite .svsec > h3{display:flex;align-items:baseline;gap:6px} #svWrite .svsec > h3 .cnt{font-family:var(--mono);font-size:11px; color:var(--ink-soft);font-weight:400} /* ★ 넓은 자리에서는 문항을 두 단으로 — 서른다섯 개를 한 줄씩 세우면 스크롤이 끝없이 길어진다. 좁아지면 저절로 한 단이 된다. */ @media (min-width:900px){ #svWrite .svsec{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} #svWrite .svsec > h3,#svWrite .svsec > .lead{grid-column:1 / -1} } /* 참여 방법 고르기 — 로그인 / 비회원 */ .svhow{display:grid;gap:8px;margin:10px 0 14px} .svhow button{display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer; padding:12px 13px;border-radius:11px;border:1px solid var(--line); background:var(--hull,#FBFDFD);color:var(--ink);font-family:var(--ui);font-size:13.5px} .svhow button:hover{border-color:var(--water);background:var(--hull-2,#EDF3F4)} .svhow button b{display:block;font-size:14px;margin-bottom:2px} /* ★ --dim 이면 여명 4.36 · 해도 4.45 로 기준(4.5)에 아슬아슬하게 못 미친다. */ .svhow button .sub{font-size:11.5px;color:var(--ink-soft);font-weight:400} .svhow .tk{margin-left:auto;font-family:var(--mono);font-weight:800;color:var(--sonar-ink,#A9640A); white-space:nowrap} /* ★ 여기도 --card 였다 — 붙박이 막대가 투명이라 글이 단추 밑으로 비쳤다. */ .svbar{position:sticky;bottom:0;background:var(--hull,#fff);padding:10px 0 2px; border-top:1px solid var(--line);display:flex;gap:8px;align-items:center} .svbar .go{flex:1 1 auto;padding:12px;border:0;border-radius:11px;cursor:pointer; background:var(--sonar,#F0A038);color:var(--on-sonar,#141E26);font-size:14.5px;font-weight:800; font-family:var(--ui)} .svbar .go:disabled{opacity:.5;cursor:default} .svbar .cancel{padding:12px 14px;border:1px solid var(--line);border-radius:11px; background:var(--hull,#FBFDFD);color:var(--ink-soft);cursor:pointer;font-family:var(--ui); font-size:13px} .svcount{font-family:var(--mono);font-size:11.5px;color:var(--dim)} /* ── 자리가 없는 화면을 위한 **층** (2026-08-11) ───────────────────── 해도 화면처럼 오른쪽·가운데 칸이 없는 곳에서는 설문을 층으로 띄운다. ★ 폭은 720px — 설문지가 두 단으로 서기에 모자라지 않고, 화면을 다 가리지도 않는다. 안쪽에서만 구른다(바깥 페이지는 안 움직인다). */ /* ★ 구르는 곳은 **한 군데**여야 한다 (2026-08-11 지정). 는 브라우저 기본값이 overflow:auto 다. 그 위에 안쪽(#svWideBody)에도 스크롤을 두었더니 오른쪽에 **막대가 둘** 생겼다(실측: 층 2,176px · 내용 2,292px). 바깥은 잠그고(hidden) 세로로 늘어놓아, 내용만 그 안에서 구르게 한다. */ #svWide{border:0;padding:0;border-radius:14px;width:min(94vw,720px); max-width:min(94vw,720px);max-height:88vh;overflow:hidden; flex-direction:column; background:var(--hull,var(--card,#fff));color:var(--ink,#12303a); box-shadow:0 18px 60px rgba(var(--sh,21,47,56),.38)} /* ★ display 는 **열렸을 때만** 준다 (2026-08-11 실측). 그냥 flex 로 두면 닫힌 의 기본값(display:none)을 덮어써서, 안 보이는 빈 상자가 화면에 자리를 차지한다(폰에서 378×22px 를 차지하고 있었다). */ #svWide[open]{display:flex} #svWide::backdrop{background:rgba(6,18,26,.55);backdrop-filter:blur(2px)} /* ★ 스크롤은 **안쪽(#svWideBody)** 이 맡는다 (2026-08-11 지정). 바깥이 구르면 오른쪽 위의 ✕ 도 함께 밀려 올라가 사라졌다(폰에서 실측: 2,292px 를 굴리면 닫기가 화면 밖). 창은 자리를 지키고 내용만 구른다 — 조과 예측 층에서 이미 같은 판단을 했다. */ /* ★ overflow 를 **clip** 으로 둔다 (2026-08-11 실측으로 고침). hidden 은 '스크롤바만 감춘 스크롤 상자' 다 — 자바스크립트도, **브라우저의 자동 스크롤(초점 맞추기)** 도 이 칸을 굴릴 수 있다. 그래서 항목을 고르면 라디오에 초점이 가고, 브라우저가 이 칸을 1,380px 굴려 **바닥 막대가 화면 위로 사라졌다.** clip 은 아예 굴릴 수 없는 자리라 그 일이 안 생긴다. ★ clip 을 모르는 브라우저를 위해 hidden 을 먼저 적어 둔다(뒤엣것이 이긴다). */ .svwide-in{position:relative;padding:16px 16px 8px;min-height:0;flex:1 1 auto; overflow:hidden;overflow:clip;display:flex;flex-direction:column} #svWideBody{overflow:auto;min-height:0;flex:1 1 auto} #svWideFoot{flex:0 0 auto} #svWideFoot .svbar{position:static;margin-top:0} .svwide-in .svx{position:absolute;top:8px;right:8px;width:38px;height:38px;border:0; border-radius:10px;background:none;color:var(--dim,#5f7c87);font-size:17px; line-height:1;cursor:pointer;z-index:2} .svwide-in .svx:hover{background:rgba(var(--sh,21,47,56),.08)} .svwide-in .svx:focus-visible{outline:2px solid var(--water,#20758b);outline-offset:2px} /* 층 안에서는 제목이 ✕ 밑으로 들어가지 않게 자리를 비운다 */ .svwide-in > div > h2:first-child,.svwide-in h2{padding-right:34px} /* ★ 층 안의 「설문 보기」는 제 ✕ 를 감춘다 — 층에 이미 ✕ 가 있어 둘이 겹친다. */ .svwide-in .vwx{display:none} @media (max-width:520px){ #svWide{width:calc(100vw - 12px);max-width:calc(100vw - 12px);max-height:92vh} .svwide-in{padding:14px 12px 8px} } @media (prefers-reduced-motion:no-preference){ #svWide[open]{animation:svpop .16s ease-out} }