/* ============================================================================ chat.css — 모임 도우미(플로팅 챗봇) · 2026-09-15 4차 "당근형" 리뉴얼 3단계 시안: 당근형 리뉴얼 시안(new).dc.html scrollY 8722 (1c · 여덟 상태) 정본 스펙: scratchpad/spec-feature-tools.md §1c · 부품 사전: scratchpad/build-kit.md 동작: assets/js/chat.js (열기·닫기·상태·버튼 흐름·localStorage) 이 파일은 **모든 공개 화면에 실린다**(layout.php layout_foot · index.html). 그래서 여기 규칙은 전부 `.chat` 안쪽으로만 건다 — 밖으로 새면 21개 페이지가 같이 흔들린다. 색·글꼴·라운드·그림자는 styles.css §0 토큰만 쓴다(값을 새로 박지 않는다). ⚠️ 시안과 일부러 다른 곳 (보고서 p3-chat-ui.md 에 근거를 적어 뒀다) · 패널 right 24 → **16** : 닫힌 버튼(right:16)과 오른쪽 끝을 맞춘다 · 패널 bottom 196 → **80** : 시안 값은 아트보드가 푸터를 피한 값이다(스펙 판단필요 1) · 11px 글자 → **12px** : "12px 미만 글자 금지"(토큰 규칙). 배지·D배지가 해당 ========================================================================== */ /* ── 껍데기 ───────────────────────────────────────────────────────────────── */ .chat { /* 헤더(50)보다 위, 모달(90)보다 아래 — 모달이 열리면 챗봇이 덮이는 게 맞다 */ position: fixed; z-index: 80; right: 16px; bottom: 16px; font-family: var(--font); /* 껍데기는 자리를 차지하지 않는다(아래 페이지를 가리지 않게) */ width: 0; height: 0; } .chat[hidden] { display: none; } /* 모바일 메뉴 서랍이 열린 동안에는 비켜 준다 */ html.nav-lock .chat { display: none; } /* ── ① 닫힌 버튼 ─────────────────────────────────────────────────────────── */ .chat-fab { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 14px; border: 0; border-radius: var(--r-pill); background: var(--carrot-ink); color: #fff; box-shadow: var(--sh-fab); font: 800 var(--fs-sm) / 1 var(--font); white-space: nowrap; cursor: pointer; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } /* ⚠️ styles.css §1 의 `img, svg, video { max-width: 100% }` 때문에 폭 없는 칸에 들어간 SVG 는 0 으로 찌부러진다. 아이콘 자리는 크기를 직접 준다(실제로 당해서 넣은 규칙이다). */ .chat-fab__ico { flex: none; display: block; width: 22px; height: 22px; } .chat-fab__ico > svg { width: 22px; height: 22px; } .chat-fab__badge { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; /* 주황 버튼 위에 얹히는 안읽음 수 — 검은 점 대신 흰 알약에 주황 숫자(당근 방식) */ border-radius: var(--r-pill); background: #fff; color: var(--carrot-ink); font: 700 var(--fs-mini) / 1 var(--font); } .chat-fab__badge[hidden] { display: none; } .chat-fab:focus-visible { outline: 3px solid var(--carrot-ink); outline-offset: 3px; } /* ── 모바일: 아이콘만 (사장님 지시 2026-09-15) ──────────────────────────────── 좁은 화면에서 '도우미' 글자까지 달고 있으면 본문을 그만큼 더 가린다. 동그랗게 줄인다. · 누르는 칸은 52px 그대로다(44px 규칙을 지킨다). · 글자를 지워도 버튼 이름은 aria-label("도우미 열기")이 계속 알려 준다 — 화면낭독기는 그대로 읽는다. · 안읽음 수는 옆자리가 없어져 모서리에 얹는다. 주황 위에 얹히니 테두리로 떼어 놓는다. 폭 기준 720px 은 토스트·맨 위로 버튼과 같은 값이다(styles.css). */ @media (max-width: 720px) { .chat-fab { width: 52px; padding: 0; gap: 0; justify-content: center; } .chat-fab__lb { display: none; } .chat-fab__badge { position: absolute; top: -3px; right: -3px; border: 2px solid var(--carrot-ink); } } @media (hover: hover) { .chat-fab:hover { background: var(--carrot-ink-hover); } } /* 패널이 열려 있으면 버튼은 숨는다(시안 ①↔② 는 한 번에 하나만 보인다) */ .chat.is-open .chat-fab { display: none; } /* ── 패널 ─────────────────────────────────────────────────────────────────── */ .chat-panel { position: absolute; right: 0; bottom: 64px; /* 닫힌 버튼(52) 위 12px */ display: flex; flex-direction: column; width: 372px; max-height: min(560px, calc(100dvh - 120px)); border: 1px solid var(--line); border-radius: var(--r-modal); background: var(--card); box-shadow: var(--sh-panel); overflow: hidden; } .chat-panel[hidden] { display: none; } /* 패널 자체는 포커스를 받을 수 있지만(tabindex -1) 테두리를 그리지는 않는다 — 마우스로 열어도 주황 링이 뜨면 "여기 뭔가 잘못됐나" 로 읽힌다. */ .chat-panel:focus { outline: none; } /* 헤더 — 부제가 있는 판(②)과 없는 판(③~⑧) 두 가지 */ .chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--carrot-ink); color: #fff; } .chat-head--sub { padding: 14px 16px; } .chat-head__chip { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-xs); background: rgba(255, 255, 255, .22); } .chat-head--sub .chat-head__chip { width: 32px; height: 32px; border-radius: var(--r-sm); } .chat-head__txt { min-width: 0; flex: 1; } .chat-head__title { display: block; font: 800 var(--fs-sm) / 1.3 var(--font); } .chat-head__sub { display: block; margin-top: 2px; font: 500 var(--fs-mini) / 1.3 var(--font); } .chat-head__btn { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-xs); background: transparent; color: #fff; font: 700 18px / 1 var(--font); cursor: pointer; transition: background var(--dur) var(--ease); } /* 좁은 화면에서 이 버튼이 대화창을 치우는 **유일한 길**이다. 보이는 칩은 28 그대로 두고 손가락이 닿는 넓이만 44×44 로 넓힌다(헤더 안쪽이라 밖으로 삐져나오지 않는다). */ .chat-head__btn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .chat-head__btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } @media (hover: hover) { .chat-head__btn:hover { background: rgba(255, 255, 255, .18); } } /* 본문 — 여기만 스크롤한다. overscroll-behavior 는 쓰지 않는다(스크롤 체이닝 허용) */ .chat-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--pad-card); background: var(--surface); } /* 입력줄이 있는 꼬리 */ .chat-foot { flex: none; padding: 0 var(--pad-card) var(--pad-card); background: var(--surface); } /* ── 말풍선 ───────────────────────────────────────────────────────────────── */ .chat-row { display: flex; gap: 8px; } .chat-row + .chat-row, .chat-row + .chat-chips, .chat-row + .chat-note, .chat-row + .chat-card, .chat-row + .chat-box { margin-top: 10px; } .chat-ava { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-xs); background: var(--c-orange); color: var(--carrot-ink); } .chat-bubble { padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 4px 14px 14px 14px; background: var(--card); font: 400 var(--fs-xs) / 1.6 var(--font); color: var(--ink); word-break: break-word; /* chat.js 가 일부러 넣는 \n(모임 장소 · 운영진 답변)과 도움말 본문의 "1. … 2. …" 가 normal 이면 한 문단으로 뭉갰다. pre-line 이면 줄은 살고 들여쓰기 공백은 안 생긴다. */ white-space: pre-line; } .chat-bubble b { font-weight: 700; } .chat-row--me { justify-content: flex-end; } .chat-row--me .chat-bubble { max-width: 240px; margin-left: auto; border: 0; border-radius: 14px 4px 14px 14px; background: #FFEEDF; } /* ④ 찾는 중 */ .chat-load { padding: 12px 14px; } .chat-load__dots { display: flex; align-items: center; gap: 5px; } .chat-load__dots i { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--carrot); } .chat-load__txt { margin-top: 9px; font: 500 var(--fs-meta) / 1.5 var(--font); color: var(--ink-2); } .chat-load__more { margin-top: 8px; font: 400 var(--fs-mini) / 1.6 var(--font); color: var(--ink-3); } @media (prefers-reduced-motion: no-preference) { .chat-load__dots i { animation: chat-pulse .9s ease-in-out infinite; } .chat-load__dots i:nth-child(2) { animation-delay: .15s; } .chat-load__dots i:nth-child(3) { animation-delay: .3s; } } @keyframes chat-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } /* ── 빠른답변 · 선택지 칩 ─────────────────────────────────────────────────── */ .chat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-left: 36px; } /* 빠른답변 칩 — 34px 이라 옆 것이 눌리기 쉬웠다(2026-09-17 모바일 점검) */ .chat-chip { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; height: var(--h-chip); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font: 600 var(--fs-meta) / 1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .chat-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } @media (hover: hover) { .chat-chip:hover { background: var(--fill-hover); border-color: var(--line-hover); } } /* 고른 칩 — 시안 ③ 의 검정 칩 */ .chat-chip.is-on { border-color: transparent; background: var(--carrot-ink); color: #fff; } @media (hover: hover) { .chat-chip.is-on:hover { background: var(--carrot-ink); border-color: transparent; } } /* 다 고른 줄 —