/* 피드백 설문 팝업 — 전 페이지 우하단. 지시서: design_handoff/BUILD-SPEC-FEEDBACK.md + 피드백설문_디자인지시서(원본). 충돌하면 원본이 우선. 여기 수치는 전부 그 두 문서에서 나온 실측값이다. ⚠ 토큰을 페이지에서 물려받지 않는다. scalp/fire/unlock 이 각자 --am 을 정의하는데 이름이 같아도 값이 다를 수 있고, 앞으로 달라질 수도 있다. 전 페이지에 얹히는 조각이라 **자기 값을 자기가 들고 있어야** 어느 페이지에서나 같게 보인다. 값 자체는 원본 §3.1 표 그대로다(새 팔레트를 만들지 않는다). ⚠ border-radius 는 어디에도 없다(원본 §3.3 · §11-5, 예외 없음). ⚠ line-height:1 금지(원본 §3.2). 한글 상자가 라틴보다 커서 overflow:hidden 과 만나면 위아래 획이 잘린다 — 이 저장소에서 18군데 났다. 최소 1.4. */ #nfbRoot{ --fb-bg:#080705; --fb-pnl:#100e0b; --fb-hd:#0e0c08; --fb-edge:#3d2f10; --fb-ln:#2a2419; --fb-ln2:#1c1a15; --fb-t1:#f2e9d8; --fb-t2:#d8cfbc; --fb-t3:#8f8878; --fb-t4:#6e6858; --fb-t5:#4f4a3d; --fb-am:#ffb400; --fb-amHi:#ffd24d; --fb-amMid:#8a6100; --fb-amDim:#5a4410; --fb-amDeep:#241b06; --fb-sel:#171307; --fb-hov:#11100c; --fb-up:#22c55e; --fb-dn:#ff4747; --fb-warn:#f29300; --fb-in:#0a0908; /* ⚠ 지시서(원본 §4.1)는 400px · right18 · bottom18 이다. 지시로 두 번 키웠다 (400 → 480 → 560). 문항이 챕터 단위로 묶여 있어 400 에서는 8지선다가 스크롤 없이 안 들어갔고, 그다음엔 "좀 더 크게, 좀 더 위로, 좀 더 옆으로 뚱뚱하게". 42자 지갑주소도 그만큼 여유가 생긴다. */ --fb-w:560px; /* 카드 폭 — 노트북에서 500 으로 */ position:fixed; right:24px; bottom:56px; z-index:300; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums; color:var(--fb-t2); } #nfbRoot *{box-sizing:border-box;} #nfbRoot [hidden]{display:none!important;} /* ── 공통 껍질 ───────────────────────────────────────────────────────────── 배너와 카드가 같은 껍질을 쓴다. 상태 표식(좌측 3px 바)이 둘 다에 붙기 때문. */ .nfbBox{background:var(--fb-pnl);border:1px solid var(--fb-edge); box-shadow:0 14px 36px rgba(0,0,0,.72);display:flex;flex-direction:column; position:relative;} /* ⚠ 좌측 3px 바는 **상태를 색으로 알린다**(지시서 §2). 진행=앰버 · 확인=주황 · 완료=초록 · 이미제출=앰버중간 · 실패=빨강. 색만 바꾸는 장식이 아니라 표식이다. */ .nfbBox::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--fb-am);} .nfbBox.st-warn::before{background:var(--fb-warn);} .nfbBox.st-done::before{background:var(--fb-up);} .nfbBox.st-old::before{background:var(--fb-amMid);} .nfbBox.st-err::before{background:var(--fb-dn);} /* ── 초대 배너 ───────────────────────────────────────────────────────────── ⚠ 320×106 **고정을 버렸다.** 지시서 ⚠주의1 은 88 → 106 으로 올리면서도 고정으로 뒀는데, 문구가 길어지자 그대로 터졌다(실측: 제목 42px 이 28px 헤더 안에서 2줄로 넘치고, 본문은 63px 필요한데 36px 로 잘려 "…서비스 개선을" 에서 끊겼다). 원본 §11-2 가 금지한 "긴 한글 라벨에 고정 크기" 를 우리가 그대로 밟은 것이다. ⚠ 고칠 방향은 글자를 줄이는 게 아니라 **상자를 내용에 맞추는 것**이다 — 문구는 지시로 정해진 것이라 못 줄인다. 폭을 380 으로 넓히고 높이는 내용이 정한다. 106 은 이제 하한일 뿐이다. 게이트는 '106px 인가' 가 아니라 '안 잘리는가' 를 잰다. */ .nfbBn{width:380px;min-height:106px;padding:0;} .nfbBn .hd{min-height:28px;flex:0 0 auto;display:flex;align-items:center;gap:8px; padding:3px 8px 3px 11px;background:var(--fb-hd);border-bottom:1px solid var(--fb-ln);} .nfbBn .hd b{font:700 13.5px/1.45 inherit;color:var(--fb-t1);} .nfbBn .bd{flex:1 1 auto;min-height:0;padding:8px 10px 0 11px;display:flex; flex-direction:column;gap:6px;} /* ⚠ overflow:hidden + 고정 높이를 걷어냈다. 그 둘이 만나면 **잘린 걸 아무도 모른다** — 레이아웃은 안 깨지고 글자만 사라져서 스크린샷을 봐도 '원래 저런가 보다' 로 읽힌다. */ .nfbBn .bd p{margin:0;font:400 12.5px/1.6 inherit;color:var(--fb-t3);} .nfbBn .bd .row{display:flex;align-items:center;justify-content:flex-end; padding-bottom:8px;gap:8px;} /* ── 설문 카드 ───────────────────────────────────────────────────────────── 헤더·버튼줄 고정, 본문만 스크롤(지시서 §1). */ .nfbCd{width:var(--fb-w);max-height:min(820px,86vh);} .nfbCd .hd{height:40px;flex:0 0 40px;display:flex;align-items:center;gap:10px; padding:0 8px 0 13px;background:var(--fb-hd);border-bottom:1px solid var(--fb-ln);} .nfbCd .hd b{font:700 15px/1.4 inherit;color:var(--fb-t1);white-space:nowrap; overflow:hidden;text-overflow:ellipsis;} .nfbCd .hd .stp{margin-left:auto;font:400 12px/1.5 inherit;color:var(--fb-t3); white-space:nowrap;} /* 진행바 2px */ .nfbPb{height:2px;flex:0 0 2px;background:var(--fb-ln2);} .nfbPb i{display:block;height:100%;background:var(--fb-am);transition:width .18s linear;} @media (prefers-reduced-motion:reduce){ .nfbPb i{transition:none;} } .nfbCd .bd{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 14px; scrollbar-width:thin;scrollbar-color:var(--fb-amDim) var(--fb-ln2);} .nfbCd .bd::-webkit-scrollbar{width:8px;} .nfbCd .bd::-webkit-scrollbar-track{background:var(--fb-ln2);} .nfbCd .bd::-webkit-scrollbar-thumb{background:var(--fb-amDim);} .nfbCd .ft{height:52px;flex:0 0 52px;display:flex;align-items:center;gap:8px; padding:0 12px;border-top:1px solid var(--fb-ln);} .nfbCd .ft .sp{margin-left:auto;} /* ── 닫기 ✕ — hit area 32×32(모바일 44×44) ─────────────────────────────── */ .nfbX{width:32px;height:32px;margin-right:-6px;display:flex;align-items:center; justify-content:center;cursor:pointer;font:400 14px/1.4 inherit;color:var(--fb-t4); background:none;border:0;padding:0;flex:0 0 auto;} .nfbX:hover{color:var(--fb-t2);} /* ── 버튼 ───────────────────────────────────────────────────────────────── ⚠ 앰버 채움 버튼의 글자는 반드시 #000(원본 §10 — 앰버 위 흰 글자는 대비 미달). */ .nfbB{height:26px;padding:0 12px;border:1px solid var(--fb-ln);background:none; color:var(--fb-t2);font:700 13px/1.6 inherit;cursor:pointer;} .nfbB:hover{border-color:var(--fb-amDim);color:var(--fb-t1);background:var(--fb-hov);} .nfbB.pri{background:var(--fb-am);border-color:var(--fb-am);color:#000;} .nfbB.pri:hover{background:var(--fb-amHi);border-color:var(--fb-amHi);color:#000;} /* ⚠ 32px 은 13px/1.6 한글 상자에 모자란다(전수 검사 실측: 필요 36 > 가용 30). 레이아웃은 안 깨지고 위아래 획만 깎여서 눈으로는 '원래 저런 폰트' 로 보인다 — 이 저장소에서 18군데 났던 바로 그 사고다(원본 §11-1). */ .nfbCd .ft .nfbB{height:38px;} /* ⚠ 비활성 버튼만 두고 침묵하지 않는다(지시서 ⚠주의5) — 이유는 .nfbWhy 가 말한다. */ .nfbB[disabled]{color:var(--fb-t5);border-color:var(--fb-ln2);background:none; cursor:not-allowed;} .nfbB.pri[disabled]{background:var(--fb-amDim);border-color:var(--fb-amDim);color:var(--fb-t5);} .nfbB.pri[disabled]:hover{background:var(--fb-amDim);border-color:var(--fb-amDim);} /* ⚠ 이 두 줄은 **비어 있어도 자리를 지킨다.** 필요할 때만 넣으면 뜨고 사라질 때마다 버튼줄과 동의 상자가 위아래로 뛴다(제보: "중간에 새롭게 생기는거 없애라"). 글자만 채우고 높이는 여기서 고정한다. */ .nfbWhy{font:400 12px/1.5 inherit;color:var(--fb-warn);padding-bottom:6px; min-height:24px;} /* 포커스 링 — 잘 보여야 한다(원본 §8.3) */ #nfbRoot :focus-visible{outline:2px solid var(--fb-am);outline-offset:1px;} /* ── 문항 ─────────────────────────────────────────────────────────────────*/ .nfbQ{margin:0 0 14px;} .nfbQ h5{margin:0 0 3px;font:700 14px/1.5 inherit;color:var(--fb-t1);} /* 필수·선택 배지 — 제목 옆(지시서 §5.3). placeholder 로만 알리면 입력하는 순간 사라진다. */ .nfbQ h5 .rq{font-style:normal;font:700 10.5px/1.5 inherit;letter-spacing:.04em; margin-left:7px;padding:1px 5px;color:var(--fb-t4);border:1px solid var(--fb-ln); vertical-align:middle;white-space:nowrap;} .nfbQ h5 .rq.on{color:#000;background:var(--fb-am);border-color:var(--fb-am);} /* 용어 설명 — 선택지에서 뺀 괄호 설명이 여기로 온다 */ .nfbHelp{font:400 12px/1.7 inherit;color:var(--fb-t3);background:var(--fb-hd); border-left:2px solid var(--fb-amDim);padding:7px 10px;margin-bottom:9px;} .nfbQ .sub{font:400 12.5px/1.6 inherit;color:var(--fb-t3);margin-bottom:9px; display:flex;align-items:baseline;gap:8px;} .nfbQ .sub .skip{margin-left:auto;color:var(--fb-am);cursor:pointer; background:none;border:0;padding:0;font:inherit;font-size:12.5px;} .nfbOpts{display:flex;flex-direction:column;gap:6px;} /* ⚠ 선택은 **색 + 모양** 둘 다로 표시한다(원본 §6, 지시서 §3). 색만 바꾸면 색을 구분 못 하는 사람에게 아무 표시도 없는 것과 같다. 단일 ○/● · 복수 □/■. */ .nfbOpt{min-height:42px;display:flex;align-items:center;gap:10px;padding:7px 12px; background:var(--fb-pnl);border:1px solid var(--fb-ln);color:var(--fb-t2); font:400 13.5px/1.6 inherit;cursor:pointer;text-align:left;width:100%;} .nfbOpt:hover{background:var(--fb-hov);border-color:var(--fb-amDim);color:var(--fb-t1);} .nfbOpt .mk{flex:0 0 auto;width:13px;color:var(--fb-t4);font:400 13px/1.6 inherit;} .nfbOpt:hover .mk{color:var(--fb-t3);} .nfbOpt.on{background:var(--fb-sel);border-color:var(--fb-am);color:var(--fb-t1);} .nfbOpt.on .mk{color:var(--fb-am);} .nfbOpt[disabled]{background:var(--fb-pnl);border-color:var(--fb-ln2);color:var(--fb-t5); cursor:not-allowed;} .nfbOpt[disabled] .mk{color:var(--fb-t5);} /* 척도 1~5 — 양 끝 라벨을 반드시 같이 쓴다(숫자만으론 방향을 모른다) */ .nfbSc{display:flex;gap:5px;} .nfbSc button{flex:1;min-width:0;height:42px;background:var(--fb-pnl);border:1px solid var(--fb-ln); color:var(--fb-t2);font:700 14px/1.5 inherit;cursor:pointer;padding:0;} /* ⚠ NPS 는 11칸이다. 560px 카드에서 한 칸이 44px 이라 14px 글자는 들어가지만 gap 을 줄이지 않으면 마지막 칸이 밀린다. 칸 수가 늘면 줄이는 건 글자가 아니라 간격이다. */ .nfbSc.wide{gap:3px;} .nfbSc.wide button{height:38px;font-size:12.5px;} .nfbSc button:hover{background:var(--fb-hov);border-color:var(--fb-amDim);color:var(--fb-t1);} .nfbSc button.on{background:var(--fb-sel);border-color:var(--fb-am);color:var(--fb-am);} .nfbScL{display:flex;justify-content:space-between;padding-top:5px; font:400 12px/1.5 inherit;color:var(--fb-t3);} /* 자유서술 */ .nfbTa{width:100%;min-height:104px;resize:vertical;background:var(--fb-in); border:1px solid var(--fb-ln);color:var(--fb-t1);font:400 13.5px/1.7 inherit; padding:9px 10px;} .nfbTa::placeholder{color:var(--fb-t5);} .nfbTa:focus{border-color:var(--fb-am);outline:none;} .nfbTaF{display:flex;align-items:baseline;padding-top:5px; font:400 12px/1.5 inherit;color:var(--fb-t5);} .nfbTaF .n{margin-left:auto;color:var(--fb-t4);} .nfbTaF .n.w{color:var(--fb-warn);} .nfbTaF .n.x{color:var(--fb-dn);} /* ── S4 연락처 ────────────────────────────────────────────────────────────*/ .nfbSeg{display:flex;border:1px solid var(--fb-ln);margin-bottom:14px;} .nfbSeg button{flex:1;height:34px;background:none;border:0;color:var(--fb-t3); font:700 13px/1.6 inherit;cursor:pointer;} .nfbSeg button.on{background:var(--fb-am);color:#000;} .nfbLb{font:700 11px/1.4 inherit;color:var(--fb-t3);letter-spacing:.06em; text-transform:uppercase;margin-bottom:5px;} /* ⚠ 지갑주소 40자는 **한 줄에 전부** 보인다(원본 §9). 말줄임도 줄바꿈도 금지 — 가운데가 생략되면 오타를 잡을 수 없다. 폭이 모자라면 폰트만 줄인다. */ .nfbIn{width:100%;height:44px;background:var(--fb-in);border:1px solid var(--fb-ln); color:var(--fb-t1);font:600 14px/1.5 inherit;padding:0 10px; text-overflow:clip;overflow:hidden;white-space:nowrap;} .nfbIn:focus{border-color:var(--fb-am);outline:none;} .nfbIn.bad{border-color:var(--fb-dn);} .nfbIn.ok{border-color:var(--fb-up);} /* ⚠ 2줄치를 비워 둔다. 지시서 §5.4 의 안내문이 길어져 한 줄(24px)로는 모자라고, 모자란 만큼 뜰 때마다 위쪽 내용이 23px 씩 밀렸다(게이트 실측). */ .nfbMsg{font:400 12px/1.6 inherit;padding-top:5px;min-height:47px;} .nfbMsg.bad{color:var(--fb-dn);} .nfbMsg.ok{color:var(--fb-up);} .nfbWarn{font:400 12.5px/1.6 inherit;color:var(--fb-warn);padding-top:9px;} /* 동의 — 박스 전체가 클릭 영역 */ .nfbCk{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left; padding:10px 11px;margin-top:13px;background:var(--fb-hd);border:1px solid var(--fb-ln); color:var(--fb-t3);font:400 12.5px/1.6 inherit;cursor:pointer;} /* ⚠ 12→16px. 10px/1.4 = 14px 이라 12px 상자에서 ✓ 가 2px 깎였다(전수 검사). */ .nfbCk .bx{flex:0 0 auto;width:16px;height:16px;margin-top:1px;border:1px solid var(--fb-ln); display:flex;align-items:center;justify-content:center;font:700 10px/1.4 inherit;color:transparent;} .nfbCk.on{background:var(--fb-sel);border-color:var(--fb-am);color:var(--fb-t2);} .nfbCk.on .bx{background:var(--fb-am);border-color:var(--fb-am);color:#000;} /* ── S5 확인 ──────────────────────────────────────────────────────────────*/ .nfbAlert{background:rgba(242,147,0,.08);border:1px solid var(--fb-warn); padding:9px 11px;margin-bottom:14px;font:700 13.5px/1.5 inherit;color:var(--fb-t1);} /* 연락처가 이 화면의 주인공이다 — 가장 큰 글자(원본 §6 S5) */ .nfbWho{background:var(--fb-in);border:1px solid var(--fb-ln);padding:10px 11px; font:700 16px/1.5 inherit;color:var(--fb-t1);word-break:break-all;margin-bottom:14px;} .nfbSum{display:grid;grid-template-columns:132px minmax(0,1fr);gap:6px 10px; font:400 12.5px/1.6 inherit;} .nfbSum .k{color:var(--fb-t3);} .nfbSum .v{color:var(--fb-t2);word-break:break-word;} .nfbHr{height:1px;background:var(--fb-ln2);margin:12px 0;} /* ── S6 완료 · S8 실패 ────────────────────────────────────────────────────*/ .nfbOk{text-align:center;padding:6px 0 2px;} .nfbOk .ic{font:400 48px/1.2 inherit;color:var(--fb-up);} .nfbOk h5{margin:8px 0 8px;font:700 15px/1.5 inherit;color:var(--fb-t1);} .nfbOk p{margin:0;font:400 13px/1.7 inherit;color:var(--fb-t3);} .nfbErrL{margin:0 0 6px;font:400 13px/1.7 inherit;color:var(--fb-t2);} .nfbErrW{font:400 12.5px/1.6 inherit;color:var(--fb-warn);word-break:break-word;} /* ── 임시 데모 아이콘 ────────────────────────────────────────────────────── ⚠ 이건 데모용이다. 실제 노출 조건(로그인 · 다른 모달 없음 · 60초 · 안 닫음 · 안 냄)을 다 만족시키기 전에는 화면에서 볼 방법이 없어서, 눌러서 강제로 여는 단추를 둔다. 실서비스 전에 반드시 뗀다 — feedback.js 의 NFB_DEMO 를 0 으로. */ /* ⚠ 팝업이 열려 있는 동안 우하단 FAB 스택을 감춘다. 왜 CSS 클래스인가: #dpmChatRoot 는 **우리보다 늦게 만들어진다.** open() 에서 getElementById 로 한 번 감추면 그때 없어서 못 감추고, 카드 위로 그대로 덮인다 (게이트가 'dpmChatRoot 52×52 겹침' 으로 잡았다). 클래스는 생성 순서와 무관하다. ⚠ display 가 아니라 visibility 다 — display:none 은 위젯 내부 상태를 리셋한다. */ html.nfb-open #dpmChatRoot, html.nfb-open #bailFab, html.nfb-open #bailBub{visibility:hidden!important;} /* ⚠ 데모 아이콘 자리 — 우하단은 bottom22(채팅) · bottom84(물림진단) · bottom118~256 (말풍선 288×138)까지 남의 것이다. bottom148 에 뒀더니 말풍선에 40×44 가 가렸다 (게이트 실측). 스택 전체보다 위인 268 로 올린다. 팝업 본체는 위 클래스가 스택을 감추므로 지시서의 right18/bottom18 을 그대로 쓴다 — 비켜서는 건 이 아이콘뿐이다. */ /* 설문 진입 버튼. ⚠ 예전엔 right:22 **bottom:268** · z-index 299 · 44px 어두운 사각형이었다. 채팅(22)· 패턴매칭(84)이 화면 맨 아래에 붙어 있는데 이것만 **246px 위에 홀로** 떠 있었고, 생김새도 저 둘과 전혀 달랐다. 그래서 "설문조사 버튼이 계속 안 나온다" 는 제보를 받았다 — 안 나온 게 아니라 **아무도 그 자리를 안 본다.** 같은 줄에 같은 모양으로 서야 비로소 '버튼 묶음' 으로 읽힌다. ⚠ z-index 도 299 였다. 나머지 둘은 2147482999 라, 무엇이든 겹치면 이것만 뒤로 숨는다. 규격은 핸드오프(BUILD-SPEC-FAB.md)의 어법을 따른다 — 앰버 원 + 어두운 글리프, 호버는 채움·테두리로만(확대 금지), box-sizing:border-box(테두리로 크기가 안 뛰게). */ /* ⚠ 크기 52px — **나머지 둘(채팅·패턴매칭)과 같다.** 2026-08-15 에 78px(=52×1.5)로 키웠다가 2026-08-21 지시로 되돌렸다: "맨 위에 있는 버튼이 설문조사 버튼인데 왜 이렇게 크니? 다른 거 2개랑 똑같이 바꿔놔". 혼자만 크면 강조가 아니라 **어긋난 것**으로 보인다 — 셋이 한 벌로 서는 게 먼저다. ⚠ bottom 은 146 그대로. 아이콘은 bottom 기준으로 위로 자라므로 아래 두 개 (채팅 22 · 패턴 84)와의 간격은 크기와 무관하게 유지된다. ⚠ 크기를 다시 만지려면 tests/topbar/float.mjs 의 '셋이 같은 크기' 기준도 같이 본다. */ .nfbDemo{position:fixed;right:22px;bottom:146px;z-index:2147482999; box-sizing:border-box;width:52px;height:52px;border-radius:50%; display:flex;align-items:center;justify-content:center;cursor:pointer; background:#ff9d00;border:0; color:#000;font:700 16px/1.4 "IBM Plex Mono",ui-monospace,monospace; box-shadow:0 8px 24px rgba(255,157,0,.42); transition:background 130ms linear,border-color 130ms linear;} .nfbDemo:hover{background:#ffb02e;box-shadow:0 14px 34px rgba(255,157,0,.6);} .nfbDemo svg{width:30px;height:30px;} /* 원이 52 로 돌아왔으니 글리프도 원래대로 */ .nfbDemo b{position:absolute;top:-7px;right:-7px;background:var(--fb-warn,#f29300); color:#000;font:700 8.5px/1.5 inherit;padding:0 3px;letter-spacing:.04em;} /* 설문 말풍선 — 차트 패턴 매칭(#bailBub)과 **같은 물건**이다(지시 2026-08-15: "차트패턴 매칭 서비스에 사용했던 말풍선 그대로 설문조사쪽에 사용하자"). 그래서 색·글꼴·모서리·꼬리·닫기버튼·흔들림을 그대로 옮겨 왔다. 두 개가 나란히 떴을 때 하나만 달라 보이면 '같은 급의 안내' 로 안 읽힌다. ⚠ bottom 은 여기서 정하지 않는다 — 같은 열(right:86)에 #bailBub 이 이미 있을 수 있고, 그 높이는 글자·창폭에 따라 달라진다. feedback.js 의 bubLayout() 이 실측해서 얹는다. CSS 로 못 박으면 언어를 바꾸거나 창을 좁히는 순간 둘이 겹친다. ⚠ pointer-events:none — 말풍선이 아이콘 클릭을 가로채면 안 된다. ✕ 만 되살린다. */ /* ⚠ right 86 — 아이콘이 52px 로 돌아와 오른쪽 74px 까지만 차지한다(22+52). 112 는 78px 아이콘 시절의 값이라, 그대로 두면 말풍선만 26px 더 왼쪽에 떠서 꼬리가 아이콘을 못 가리킨다. 86 이면 아이콘 열 밖으로 12px 여유가 남는다(원래 값). */ .nfbBub{position:fixed;right:86px;z-index:2147482999; background:linear-gradient(135deg,#ffd766,#ffc23a);color:#171100; font:900 25px Pretendard,-apple-system,sans-serif;padding:18px 26px; border-radius:22px;border-bottom-right-radius:7px; box-shadow:0 16px 38px rgba(0,0,0,.55); animation:nfbBob 2.6s ease-in-out infinite;pointer-events:none; text-align:center;line-height:1.28;letter-spacing:-.01em;transform-origin:bottom right;} /* 꼬리 — 아이콘 쪽으로 살짝 돌린다(지시: "말풍선의 끄트머리 뾰족 나온거를 살짝 돌려서 설문조사 아이콘에 맞게"). 45° 는 정확히 '아래' 를 가리키는데, 아이콘은 말풍선의 오른쪽 아래에 있다 — 그대로 두면 꼬리가 아무것도 안 가리킨다. rotate(15deg) = 아래에서 오른쪽으로 30° 기운 방향(사각형 모서리는 회전각+45° 를 향한다). right 도 26 → 14 로 당겨 말풍선 오른쪽 끝에서 나오게 한다. ⚠ 말풍선 자체가 -8° 기울었으므로(nfbBob) 꼬리의 **국소각**은 23° 여야 세상에서 15° 다. 15 를 그대로 두면 실제로는 7° 가 되어 꼬리가 아이콘보다 더 오른쪽을 가리킨다. */ .nfbBub:after{content:"";position:absolute;right:6px;bottom:-9px;width:18px;height:18px; background:#ffc23a;transform:rotate(23deg);border-radius:4px;} .nfbBubX{position:absolute;top:-10px;right:-10px;width:23px;height:23px;border-radius:50%; background:#171100;color:#ffd766;border:2px solid #ffd766; font:900 12px/1 Pretendard,-apple-system,sans-serif; display:flex;align-items:center;justify-content:center;cursor:pointer; pointer-events:auto;box-shadow:0 3px 10px rgba(0,0,0,.5);z-index:1;} .nfbBubX:hover{background:#3a2a00;color:#fff;} /* ⚠ rotate(-8deg) 는 **패턴매칭 말풍선(bailBob)과 같은 값**이다. 두 말풍선이 나란히 뜨는데 하나만 반듯하면 같은 급의 안내로 안 읽힌다(지시 2026-08-21: "하단부에 있는 내 차트, 패턴 비교하세요랑 똑같이 해놔 — 살짝 옆으로 기울이라는 거야"). ⚠ 기울기는 **양 키프레임에 다 넣는다.** 한쪽만 넣으면 흔들릴 때마다 각도가 오간다. */ @keyframes nfbBob{0%,100%{transform:translateY(0) rotate(-8deg)} 50%{transform:translateY(-7px) rotate(-8deg)}} /* 폰: 아이콘이 right:14 로 붙으므로 말풍선도 같이 좁힌다. 25px 글자는 폰에서 두 줄이 세 줄이 되어 화면을 반쯤 덮는다 — 크기를 줄이고 폭을 묶는다. */ @media(max-width:520px){ .nfbBub{right:14px;left:14px;font-size:18px;padding:13px 16px;} .nfbBub:after{right:20px;} } /* ── 모션 ─────────────────────────────────────────────────────────────────*/ @keyframes nfbIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes nfbUp{from{opacity:0;transform:translateY(18px) scaleY(.96);transform-origin:bottom} to{opacity:1;transform:none}} @keyframes nfbStep{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}} @keyframes nfbOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px)}} @keyframes nfbFade{from{opacity:0}to{opacity:1}} .nfbBn.anim{animation:nfbIn .22s cubic-bezier(.2,.7,.3,1);} .nfbCd.anim{animation:nfbUp .26s cubic-bezier(.2,.7,.3,1);} /* ⚠ 스텝 전환에 fill-mode:both 를 쓰지 않는다(지시서 ⚠주의0). both 면 from 상태 (translateX(8px))가 고정돼 본문이 영구히 8px 밀린 채 카드 테두리를 넘어간다. */ .nfbStep{animation:nfbStep .16s cubic-bezier(.2,.7,.3,1);} .nfbGone{animation:nfbOut .18s cubic-bezier(.2,.7,.3,1) forwards;} @media (prefers-reduced-motion:reduce){ .nfbBn.anim,.nfbCd.anim,.nfbStep{animation:nfbFade .12s linear;} .nfbGone{animation:nfbFade .12s linear reverse forwards;} } /* ── 반응형 ─────────────────────────────────────────────────────────────── 계단은 셋뿐이다: 데스크톱 400 → 노트북 360 → 모바일 하단 시트. */ @media (max-width:1440px){ #nfbRoot{--fb-w:500px;} } /* ⚠ 360px 카드에서 지갑주소 42자가 14px 모노로 안 들어간다(42×8.4≈353 > 338). 줄이는 건 주소가 아니라 **폰트**다 — 원본 §9 가 허용한 유일한 축소다. */ @media (max-width:1440px){ .nfbIn.addr{font-size:12.5px;} } @media (max-width:759px){ #nfbRoot{right:0;bottom:0;left:0;--fb-w:100%;} .nfbBn{width:auto;margin:0 12px 12px;} .nfbCd{max-height:88vh;border-left:0;border-right:0;border-bottom:0; border-top:1px solid var(--fb-edge);} .nfbCd .ft .nfbB{height:44px;} .nfbX{width:44px;height:44px;} .nfbSeg button{height:40px;} .nfbIn{height:48px;} .nfbIn.addr{font-size:12px;} } /* ── SC 수집 안내 ───────────────────────────────────────────────────────── ⚠ 접거나 링크로 빼지 않는다(원본 §12). 수집 항목·목적·보관기간이 화면에 그대로. */ .nfbPreH{margin:0 0 12px;font:700 14px/1.6 var(--fbf,inherit);color:var(--fb-t1);} .nfbPreR{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px; padding:9px 0;border-top:1px solid var(--fb-ln2);} .nfbPreR:first-of-type{border-top:0;} .nfbPreR .k{font:700 11px/1.6 inherit;color:var(--fb-t3);letter-spacing:.06em;} .nfbPreR .v{font:400 13px/1.7 inherit;color:var(--fb-t2);} /* 파기 시점·'둘 중 하나' 처럼 오해하면 손해가 나는 말만 굵게 */ .nfbPreR .v b{color:var(--fb-am);font-weight:700;} /* S4 에서 무엇에 동의했는지 되짚는 한 줄 */ .nfbNote{font:400 12px/1.6 inherit;color:var(--fb-t3);padding-top:10px; border-top:1px solid var(--fb-ln2);margin-top:12px;} /* ── 필수 문항 강조 — 잠깐 켰다 끈다 ──────────────────────────────────── ⚠ border 굵기를 바꾸면 문항이 밀려서 '중간에 뭐가 생긴다' 가 되살아난다. outline 과 안쪽 그림자로만 그린다 — 둘 다 레이아웃을 차지하지 않는다. */ @keyframes nfbWarn{ 0%{outline-color:var(--fb-warn);box-shadow:inset 3px 0 0 var(--fb-warn);} 70%{outline-color:var(--fb-warn);box-shadow:inset 3px 0 0 var(--fb-warn);} 100%{outline-color:rgba(242,147,0,0);box-shadow:inset 3px 0 0 rgba(242,147,0,0);} } .nfbQ.warn{outline:1px solid var(--fb-warn);outline-offset:6px; box-shadow:inset 3px 0 0 var(--fb-warn);animation:nfbWarn 2.4s ease-out forwards;} @media (prefers-reduced-motion:reduce){ .nfbQ.warn{animation:none;} } /* ── '_' 로 내려둔 상태 ─────────────────────────────────────────────────── 닫은 것과 다르다 — 눌러서 하던 자리로 돌아간다. */ /* ⚠ 내려둔 알약은 우하단 FAB 스택(bottom 22~256)보다 위에 선다. 그 자리에 두면 채팅 FAB(z 2147483000)에 가려 눌리지도 않는다 — 데모 아이콘이 그렇게 죽었다. */ #nfbRoot.nfbMin{right:22px;bottom:268px;} .nfbPill{display:flex;align-items:center;gap:9px;height:40px;padding:0 14px; background:var(--fb-pnl);border:1px solid var(--fb-edge);color:var(--fb-t2); font:700 13px/1.6 inherit;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.6); position:relative;} .nfbPill::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--fb-am);} .nfbPill:hover{background:var(--fb-sel);color:var(--fb-t1);border-color:var(--fb-am);} .nfbPill .ic{color:var(--fb-am);font-weight:700;} /* ── 닫기 확인 ─────────────────────────────────────────────────────────── ⚠ 카드 위에 겹치는 오버레이가 아니라 **아래에 붙는 띠**다. 겹치면 뒤에 뭘 쓰다 말았는지 안 보여서 판단을 못 한다. */ .nfbAsk{flex:0 0 auto;padding:12px 14px;background:var(--fb-hd); border-top:1px solid var(--fb-warn);} .nfbAsk b{display:block;font:700 13.5px/1.6 inherit;color:var(--fb-t1);} .nfbAsk p{margin:4px 0 10px;font:400 12.5px/1.6 inherit;color:var(--fb-t3);} .nfbAsk .row{display:flex;gap:8px;justify-content:flex-end;} .nfbAsk .row .nfbB{height:38px;} @media (max-width:759px){ .nfbPill{width:auto;margin:0 12px 12px;} .nfbAsk .row .nfbB{height:44px;} } /* 배너의 예상 소요 시간 — 버튼 왼쪽(지시서 §7.1) */ .nfbBn .bd .row .tm{margin-right:auto;font-style:normal;font:400 11.5px/1.6 inherit; color:var(--fb-t4);align-self:center;} @media (max-width:759px){ .nfbSc.wide button{height:44px;font-size:12px;} } /* S2 의 물음 — 본문과 분리해 굵게. 무엇을 고르는 건지가 먼저 읽혀야 한다. */ .nfbBn .bd .ask{font:700 13px/1.6 inherit;color:var(--fb-t1);}