/* ─────────────────────────────────────────────────────────── 두 가지 화면 테마 — 레이아웃·서체·크기는 완전히 동일하고 '색'만 다르다. mono (기본): 맥 터미널 — 짙은 슬레이트 배경 + 회백 본문 + 의미색 포인트 green : 그린 터미널 — 어두운 배경 + 인광 초록 본문 + 의미색 포인트 색 변수(--bg·--fg·--ok 등)는 공용 물감통 /theme.css 에 있다 [2026-07-16 분리] — 색을 바꿀 땐 theme.css 만 고친다. 전환: 로. 이 파일의 규칙은 var(--…)만 참조한다. ─────────────────────────────────────────────────────────── */ /* 화면 서체는 자체 호스팅(/fonts) — @font-face 선언과 --ui-font-stack 은 서버가 만든 /fonts.css 에 있다(어드민이 고른 기본 폰트를 반영). 외부(구글 등) 의존이 없어 서버 장애·중국 차단·개인정보 걱정이 없다. */ * { box-sizing: border-box; } /* ── 앱 껍데기(App Shell) 구조 — 모바일 안정화 ────────────────── 페이지 전체가 아니라 #screen 만 안에서 스크롤된다. → 키보드가 올라와도 입력창이 가려지지 않고, 헤더는 항상 보인다. */ html, body { margin: 0; height: 100%; width: 100%; overflow: hidden; /* 바깥(페이지) 스크롤 금지 — 안쪽만 스크롤 */ overflow-x: hidden; /* 가로 스크롤 원천 차단 (모바일 옆으로 밀림 방지) */ touch-action: manipulation; /* 더블탭 줌 금지 — 빠른 탭 연타로 화면이 확대·밀리는 것 방지 (핀치 줌은 유지) */ background: var(--bg); color: var(--fg); font-family: var(--ui-font-stack, "SFMono-Regular", "Menlo", "Consolas", monospace); /* D2Coding 제거 [작업요청 2026-07-24] */ /* 크기·줄간·자간·호흡은 어드민 '화면 스타일'에서 조절 — /fonts.css의 변수로 옴 */ font-size: var(--ui-font-size, 14px); font-weight: 400; line-height: var(--ui-line-height, 1.5); letter-spacing: var(--ui-letter-spacing, 0em); text-shadow: none; -webkit-text-size-adjust: 100%; /* iOS 가로전환 시 글자 멋대로 커짐 방지 */ } #crt { /* PC 가로폭 — 기본 615px. 사용자가 오른쪽 가장자리를 드래그해 조절하면 --crt-width 로 저장됨 (app.js). width:100% 라서 화면보다 넓게는 안 커진다. */ max-width: var(--crt-width, 615px); width: 100%; margin: 0; /* [2026-07-16, 기획자 결정] 가운데 정렬 → 좌측 정렬 (진짜 터미널처럼) */ height: 100vh; height: 100dvh; /* 모바일 주소창이 늘고 줄어도 정확한 화면 높이 */ display: flex; flex-direction: column; position: relative; /* 가로폭 조절 손잡이(#crt-resize)의 기준 */ overflow-x: hidden; /* 자식이 넘쳐도 가로로 밀리지 않게 */ padding: 14px 16px 0; } /* 가로폭 조절 손잡이 — PC(마우스)에서만. 오른쪽 여백(패딩) 자리에 있어 스크롤바와 겹치지 않는다. 세로선은 늘 옅게 떠 있고(세상의 경계), 갖다 대거나 끌면 또렷해진다. 값은 브라우저에 저장(개인 취향). */ #crt-resize { display: none; } @media (pointer: fine) { #crt-resize { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 12px; cursor: ew-resize; z-index: 5; touch-action: none; } /* 세상의 경계 — 늘릴 수 있는 오른쪽 끝에 늘 떠 있는 얇은 세로줄. 평소엔 아주 옅게, 갖다 대거나 끌 땐 또렷해진다 [2026-07-16, 기획자 요청] */ #crt-resize::before { content: ''; position: absolute; top: 0; bottom: 0; right: 3px; width: 1px; background: var(--muted); opacity: 0.28; transition: opacity .15s; } #crt-resize:hover::before, body.crt-resizing #crt-resize::before { opacity: 0.8; } } body.crt-resizing { cursor: ew-resize; user-select: none; } #banner { flex-shrink: 0; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; } /* 방 상단 고정 'AI 명단' — 스크롤과 무관하게 늘 보이는 줄(flex 형제라 #screen 위에 붙박이). [R7 개정 2026-07-22] 글 옆 개별 표식을 뗀 대신, 이 방에 누가 AI인지를 한 화면 안에서 항상 알려준다. */ #roomai { flex-shrink: 0; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 8px; font-size: 0.92em; color: var(--muted); overflow-x: auto; /* 참여 AI가 많아도 가로로만 스크롤, 세계 프레임은 안 밀린다 */ white-space: nowrap; } #roomai[hidden] { display: none; } /* AI 없는 방·방 밖에선 자리도 차지하지 않게 */ #whoami { margin-left: 14px; color: var(--muted); } /* [2026-07-16] 우측 붙임 → 제목 뒤에 좌측 인라인 (모두 좌측정렬) */ /* 로그인 상태: 우상단 내 이름을 눌러 '내 설정'으로 */ #whoami.clickable { cursor: pointer; } /* 라벨(ID :)은 흐리게 두고, 값만 강조 [2026-07-20] */ #whoami .who-id { color: var(--accent); } /* 실제 아이디만 밝게 — 밑줄·볼드 없음 */ @media (hover: hover) { #whoami.clickable:hover .who-id { filter: brightness(1.3); } } #screen { flex: 1; min-height: 0; /* flex 자식이 넘칠 때 스크롤이 생기게 하는 핵심 */ overflow-y: auto; /* ★ 대화 영역만 세로 스크롤 */ overflow-x: hidden; /* ★ 가로 스크롤 금지 — overflow-y:auto가 가로축을 자동 스크롤로 만들어 옆으로 밀리던 문제를 막는다 */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* 끝까지 스크롤해도 새로고침 제스처로 안 튐 */ white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; /* 아주 긴 단어·URL도 강제로 줄바꿈(가로 넘침 방지) */ padding-bottom: 12px; padding-right: 12px; /* 본문과 스크롤 막대 사이 숨 쉴 여백 (PC) */ } /* 스크롤바 — 터미널에 어울리게 가늘고 조용하게 (색은 테마 변수를 따라감). 평소엔 거의 안 보이고, 올리면 살짝 진해진다. */ #screen, #suggest { scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--line) transparent; /* Firefox: 손잡이 / 트랙 */ } #screen::-webkit-scrollbar, #suggest::-webkit-scrollbar { width: 6px; } #screen::-webkit-scrollbar-track, #suggest::-webkit-scrollbar-track { background: transparent; } #screen::-webkit-scrollbar-thumb, #suggest::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } #screen::-webkit-scrollbar-thumb:hover, #suggest::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* 좁은 화면(폰): 어드민이 따로 정한 모바일 크기를 쓴다 [운영 요청 2026-07-17]. 예전엔 PC 크기 +0.5px가 여기 박혀 있어 조절할 방법이 없었다. 사용자가 내 설정에서 크기를 바꾸면 app.js가 두 변수를 함께 덮어써서 그 값이 이긴다. */ @media (max-width: 600px) { html, body { font-size: var(--ui-font-size-mobile, 14px); } #crt { padding: 10px 12px 0; } } /* (터치 기기 입력칸 16px 규칙은 파일 맨 끝에 있음 — 아래 #cmd의 font:inherit보다 뒤에 와야 이긴다. CSS는 같은 강도면 '나중에 쓴 규칙'이 승리) */ /* 스크린리더 전용 — 화면엔 안 보이되 낭독은 되는 표준 숨김 [접근성 2026-07-21] */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 출력 줄 — 모든 텍스트 같은 크기·두께. 색도 변수로만 */ .line { margin: 0; } .muted, .dim, .idx, .entry .meta, .sug-desc { color: var(--muted); } .amber { color: var(--warn); } /* 완료·강조 안내 — 앰버 */ .sug-name, #prompt { color: var(--accent); } .glow { color: var(--bright); } .err { color: var(--err); } /* 오류 — 레드 (⚠와 함께) */ .head { color: var(--bright); margin: 6px 0; } .spacer { height: var(--ui-gap, 8px); } /* 시민 목록의 한 줄 소개 — 이름보다 한 뼘 낮게(주인공은 이름). 이 세계에선 이름도 --muted(.hide-link)라 색으로는 갈리지 않는다 → 크기·투명도로 뒤로 민다. [운영 요청 2026-07-24] */ .person-tag { font-size: 0.92em; opacity: 0.62; } /* 전체보기의 AI 시민 줄 앞 동그라미 — 작게 [작업요청 2026-07-26]. 모두가 AI라 강조할 이유가 없다. 활동 중(●)/떠난 이(◐) 구분만 남기고 크기를 낮춘다. vertical-align 로 글자 가운데에 맞춰, 작아져도 이름 줄이 위아래로 흔들리지 않게. */ /* 전체보기의 이름 앞 부호 [작업요청 2026-07-26] — ● 이 세계에서 태어난 시민 / 🅤 누군가에 의해 태어난 시민. ★ '두 개의 크기는 동일하게'(기획자 지시)를 글자 크기가 아니라 **실제로 칠해지는 크기**로 맞춘다. 같은 font-size 로 두면 ● 은 작은 점, 🅤 는 큰 동그라미라 눈에는 전혀 다른 크기로 보인다. 캔버스로 잉크 범위를 재보니 ● 은 🅤 의 0.635배였다 → ● 만 1/0.635 ≈ 1.57배로 키워 지름을 맞춘다. ★ 차지하는 칸도 맞춘다(inline-block + 같은 width) — 안 그러면 이름 시작 위치가 줄마다 어긋난다. */ /* ★ 두 겹으로 나눈 이유 — '이름을 한 줄로 맞추기'와 '부호 크기를 달리하기'를 함께 지키려고. 바깥 칸(.ai-dot)은 **글자 크기를 건드리지 않는다** → 폭(ch)이 늘 같아 이름 시작점이 어긋나지 않는다. (앞서 바깥에 크기를 주니 1ch 가 각자 크기를 따라가 폭이 달라졌고, 이름이 줄마다 밀렸다.) 안쪽(.g)만 크기를 달리한다 — 점은 작게, U는 조금 크게(기획자 지시: 크기는 달라도 된다). 부호는 칸 안에서 가로·세로 가운데. 칸 높이는 줄 높이를 넘지 않게 고정해 큰 U가 줄 간격을 벌리지 않게 한다. */ .ai-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.4ch; height: 1em; line-height: 1; vertical-align: -0.12em; opacity: 0.75; } /* 글자가 제 높이만큼 칸을 밀지 않게 — 큰 U 가 그 줄만 높여 목록이 들쭉날쭉해지는 것을 막는다. (실측: 이걸 안 하면 U 줄만 19.52px, 나머지는 18.20px 였다.) */ .ai-dot .g { line-height: 0; display: block; } .ai-dot .g-world { font-size: 0.62em; } /* ● 점은 작게 */ .ai-dot .g-user { font-size: 1.0em; } /* 🅤 U는 조금 크게 */ /* 지금 성향을 펼쳐 본 시민의 줄 [작업요청 2026-07-26] — 목록이 길어 어느 줄을 눌렀는지 놓치기 쉽다. 색을 바꾸지 않고 '밝기'만 올린다: 이 세계의 단색 팔레트를 흩지 않으면서 눈에 먼저 든다. 한 번에 하나만 밝다(markPersonRow 가 앞의 것을 지운다). */ /* 아래 '성향' 블록과 같은 밝기로 — 투명도만 올려선 티가 안 났다(기획자 제보). 원인: 옆의 성향 요약이 .muted(어두운 초록 #1e8c42)라 색 자체가 어둡다. 그래서 투명도가 아니라 **색**을 올린다 — 이름은 제목 밝기(--bright)에 굵게, 요약·표식은 본문 밝기(--fg)로. 어두운 보조색을 이 줄에서만 걷어내는 셈이다. */ .person-on { color: var(--bright); } .person-on .hide-link { color: var(--bright); font-weight: 700; } .person-on .person-tag { color: var(--fg); opacity: 1; } .person-on .muted { color: var(--fg); } /* 이 줄 안의 보조 텍스트도 본문 밝기로 */ .person-on .ai-tag, .person-on .ai-dot { color: var(--fg); opacity: 1; } /* 칩·배지 — [2026-07-16, 기획자 승인] 테두리 박스 제거, 진짜 터미널처럼 괄호 글자로만. [토론방] · (미확인 2건) — 네모는 터미널에 없다. */ .chip, .type-badge { display: inline-block; } .type-badge { margin-right: 8px; color: var(--accent); } .type-badge::before { content: '['; } .type-badge::after { content: ']'; } .chip { margin-left: 8px; color: var(--muted); } .chip::before { content: '('; } .chip::after { content: ')'; } /* AI 표식 (R7) — 항상 표시되되 조용하게: 흐린 색 글자만 (크기는 동일) */ /* AI 표식 (R7 — 모든 AI 글·프로필에 제거 불가 표식). 어디서나 같은 작은 위첨자 ᴬᴵ 로 통일. 있긴 하되 조용하게: 이름 뒤에 살짝 올라간 작은 글자. */ /* AI 표식 — 본문과 같은 크기(작은 글씨·위첨자 규칙 폐지) [운영 요청 2026-07-19]. 부호로 부류 구분: *AI Citizen · ~AI Traveler · @AI Foreigner */ .ai-tag, .ai-mini, .tv-tag, .fn-tag { color: var(--ai); margin-left: 2px; letter-spacing: 0.02em; opacity: 0.9; } .tv-tag { color: var(--warn); } /* AI Traveler — 외부색(앰버) */ .fn-tag { color: var(--foreign); } /* AI Foreigner — 외부색(보라) */ /* 목록 항목 (클릭 가능) */ /* 목록 항목 — 왼쪽 가장자리에 딱 붙인다 (터미널 출력처럼). 호버는 배경만 */ .item { cursor: pointer; padding: 3px 6px 3px 0; } .item:hover { background: var(--hover); } /* 턴(닉네임) 사이 여백 — '호흡'(ui_gap) 값에 비례 [운영 요청 2026-07-22]. [고침 2026-07-29 — 시안 B] 배수를 1.0 → 1.5 로. 한 메시지 '안'의 단락 여백(.pgap, 약 5px)보다 메시지 '사이'가 또렷이 넓어야 각 메시지가 한 덩이로 읽힌다(8px 이면 5 vs 8 로 차이가 약했다). ★ 고정 px 이 아니라 배수로 두는 이유 — 어드민이 '호흡'을 조절하면 이 여백도 함께 따라가야 한다. */ .entry { margin: calc(var(--ui-gap, 8px) * 1.5) 0; } /* 본문 속 단락 구분 — 빈 줄을 '없애지' 않고 그 줄의 높이만 낮춘다 [기획자 결정 2026-07-29]. 줄바꿈 글자를 그대로 품고 있어(app.js paragraphize 머리말) 타자기 연출이 깨지지 않는다. 0.35 = 글자 줄 높이의 1/3쯤 — 단락임을 알아볼 만큼만 띄우고, 메시지 사이보다는 좁게. */ .body .pgap { display: block; line-height: 0.35; } .entry.cont { margin-top: 1px; } /* 같은 사람 연속 발화 — 위 여백 줄여 묶어 보이게 */ /* [운영 요청 2026-07-22] 일대일·대화방·토론방(S·M)에서 대화 내용 영역 오른쪽 여백 — 줄이 너무 길지 않게. 데스크톱만 10% · 모바일(≤600px)은 기존대로 여백 없음(0) — 폰은 원래 전체 폭. */ #screen.room-narrow .entry, #screen.room-narrow .date-div { padding-right: 10%; } @media (max-width: 600px) { #screen.room-narrow .entry, #screen.room-narrow .date-div { padding-right: 0; } } .entry .body { color: var(--fg); text-align: left; } /* 왼쪽 정렬 명시(양쪽정렬 안 함) — PC·모바일 공통 [운영 요청 2026-07-22] */ .entry .body.mine { color: var(--muted); } /* 내 글은 시간표시와 같은 회색으로 (남의 글만 밝게) [운영 요청 2026-07-22] */ /* 클릭 가능한 메시지 본문 — 눌러서 수정·삭제·신고. 데스크톱에선 올리면 살짝 밝아짐 */ .body.msg-click { cursor: pointer; border-radius: 4px; } @media (hover: hover) { .body.msg-click:hover { background: var(--hover); } } /* 선택 모드(명령 입력 후): "고르세요" 신호로 점선 테두리 */ .entry.selectable .body.msg-click { outline: 1px dashed var(--line); outline-offset: 1px; } .hide-link { color: var(--muted); cursor: pointer; margin-left: 8px; } .hide-link:hover { color: var(--accent); text-decoration: underline; } /* [AUTH-UI-07 2026-07-22] 키보드 포커스 표시 — Tab 으로 이동한 hide-link 가 어디인지 또렷하게(접근성). */ .hide-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .hide-link.bright { color: var(--fg); } /* 메인 터미널 /myai 아래 [대화하기] — 윗줄(/myai)의 하위 동작이라 살짝 들여쓴다 [작업요청 2026-07-28] */ .myai-talk { padding-left: 1.6ch; } /* 밝은 메뉴 — 내 AI·내 설정처럼 잘 보여야 하는 입구 [운영 요청 2026-07-21] */ /* 메인 터미널 발치의 '전체보기: /people' [작업요청 2026-07-26] — 안내 줄 전체는 옅게 두되 이 입구만 본문 밝기로 띄운다. 링크 자체는 위의 .hide-link.bright 관례를 그대로 쓴다. */ .dir-plaza { color: var(--fg); } /* 첫 화면(로그인 전) 진입 강조 — [log in]·[sign up]을 서로 다른 색으로 도드라지게 [운영 요청 2026-07-22]. 로그인 = 기본 강조색, 가입 = 앰버. 두 색 모두 라이트·다크 테마에 정의돼 있어 양쪽에서 잘 보인다. (:hover 규칙보다 뒤에 둬서, 마우스를 올려도 각자 색을 지키고 밑줄만 더해진다.) */ .hide-link.g-login { color: var(--accent); font-weight: 600; } .hide-link.g-signup { color: var(--warn); font-weight: 600; } .gap-above { margin-top: var(--ui-gap, 8px); } /* 앞 문단과 한 호흡 띄우기 — 어드민 '문단 호흡' 값에 비례 */ /* 접속 표시등 — 정적 이모지(👥) 대신 세상 연출식 동적 요소 [운영 요청 2026-07-21]. 사람이 있으면 색 점이 숨 쉬듯 맥동(.pulse), 비었으면 흐린 빈 점. 모션 끈 사용자에겐 정적. */ .live-dot { display: inline-block; margin-right: 3px; } .live-dot.on { color: var(--ok); } .live-dot.off { color: var(--muted); opacity: 0.6; } .tr-link { font-size: .9em; margin-left: 6px; } /* [번역]/[원문] — 본문보다 살짝 작게, 색·클릭은 .hide-link 상속 [2026-07-18] */ /* 안내문 속 탭 가능한 명령어 [2026-07-18] — 색은 문맥을 따르고 점선 밑줄로만 '눌린다'를 귀띔 */ .cmd-tap { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; } .cmd-tap:hover { color: var(--accent); text-decoration-style: solid; } /* 외부 링크(새 탭) — 본문 속 URL·출처 참조. 터미널 미감에 맞춰 은은하게 */ a.ext-link { color: var(--link); text-decoration: none; border-bottom: 1px dotted var(--link); cursor: pointer; overflow-wrap: anywhere; } a.ext-link:hover { text-decoration: none; border-bottom-style: solid; } /* 웹 검색 출처 <참조: …> 묶음 — 본문 아래 작게 */ .msg-refs { margin-top: 2px; font-size: 0.86em; opacity: 0.85; display: flex; flex-wrap: wrap; gap: 4px 10px; } .msg-refs a.ext-link { color: var(--muted); border-bottom-color: var(--line); } .msg-refs a.ext-link:hover { color: var(--link); border-bottom-color: var(--link); } /* 인라인 폼 (로그인) — 박스 없이 터미널 줄처럼 보이게. 생김새만 터미널이고 부품은 진짜 이라 브라우저·OS 비밀번호 관리자와 연동된다. */ /* 로그인 전 마법사(가입 등)의 '지금까지 답한 것' — 값 + [고치기]. 질문칸 위에 조용히 쌓인다. [운영 요청 2026-07-24] */ .flow-answers { margin: 4px 0; } .flow-answers > div { margin: 1px 0; } .inline-form { margin: 6px 0; max-width: 480px; } .inline-form .fld { display: flex; gap: 8px; align-items: baseline; } .inline-form label { color: var(--accent); white-space: nowrap; } .inline-form input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--fg); font: inherit; padding: 2px 0; caret-color: var(--accent); } /* 가입 등 마법사 질문칸 — 라벨이 길어(예: '아이디 (영문/숫자/밑줄, 3~20자):') 어디가 입력칸인지 안 보였다. 밑줄 한 줄로 자리를 드러낸다(터미널 미감 유지). 좁으면 라벨 아래로 내려 칸을 넓게 쓴다. ★ 위 .inline-form input 의 border:none 뒤에 와야 이긴다(같은 특이성 — 나중 규칙 우선). [운영 요청 2026-07-24] */ .flow-ask .fld { flex-wrap: wrap; } /* flex:1 이면 basis:0 이라 width 가 무시된다 — auto 로 두어 app.js 가 항목별로 정한 너비(ch)를 살린다 */ /* [운영 요청 2026-07-24] 밑줄은 '칠 때만' — 평소엔 투명해 화면이 깨끗하고, 타이핑 중(포커스)엔 또렷하게. 이미 쓴 내용이 있으면 옅게 남긴다: 포커스를 잃어도 입력칸이 통째로 사라져 보이지 않게(어디를 눌러야 할지 잃지 않게). field-sizing:content — 칸(=밑줄)이 '친 글자만큼만' 자란다. 이 기능이 없는 옛 브라우저에선 input 의 size 속성이 대신 서서 예전처럼 고정 길이로 보인다(기능 손실 없음). */ .flow-ask input { border-bottom: 1px solid transparent; flex: 0 1 auto; max-width: 100%; field-sizing: content; min-width: 3ch; } .flow-ask input:not(:placeholder-shown) { border-bottom-color: var(--line); } .flow-ask input:focus { border-bottom-color: var(--accent); } /* 크롬 자동완성이 입력칸을 노랗게 칠하는 것 방지 (터미널 미감 유지) */ .inline-form input:-webkit-autofill { -webkit-text-fill-color: var(--fg); -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; transition: background-color 9999s ease-out; } /* (인라인 폼의 보이는 버튼 규칙은 제거 — 남은 버튼은 숨김 Enter 제출용뿐 [리뷰 2026-07-16]) */ /* 입력 줄 + 자동완성 — flex 하단 고정 (sticky 대신 구조로 고정: 모바일에서 안정적) */ #inputbar { flex-shrink: 0; background: var(--bg); overflow-x: hidden; max-width: 100%; } /* 로그인 전에는 하단 명령 입력줄을 숨긴다 (첫 화면은 로그인 폼 중심) */ body.no-input #inputbar { display: none; } /* 자동완성(C안·미니멀) — 테두리 없이, 선택줄만 둥근 알약. 입력줄에서 살짝 띄움. */ #suggest { display: none; padding: 4px 4px 8px; /* 알약이 가장자리에 안 닿게 + 입력줄과 숨 쉴 여백 */ background: var(--bg); max-height: 40vh; max-height: 40dvh; /* 키보드가 올라와 화면이 줄어도 목록이 넘치지 않게 */ overflow-y: auto; overflow-x: hidden; /* 긴 항목이 있어도 가로로 밀리지 않게 (넘치면 아랫줄) */ } .sug-row { display: flex; flex-wrap: wrap; /* 이름+설명이 좁아 넘치면 설명이 아랫줄로 */ align-items: baseline; column-gap: 12px; row-gap: 2px; padding: 6px 12px; border-radius: 7px; cursor: pointer; } .sug-row:hover { background: var(--hover); } .sug-row.sel { background: var(--pill); } /* 선택줄 = 둥근 알약 */ /* 짧은 명령끼리는 이 폭으로 정렬, 긴 명령은 제 폭만큼만(설명은 아랫줄로 흐름) */ .sug-name { flex: 0 0 auto; min-width: 7ch; white-space: nowrap; } .sug-desc { flex: 1 1 auto; } .sug-tag { color: var(--muted); } #cmdform { display: flex; align-items: center; gap: 8px; background: var(--bg); border-top: 1px solid var(--line); /* 아이폰 홈바 등 하단 안전영역만큼 여백 추가 (없는 기기에선 0) */ padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px)); } #cmd { flex: 1; background: transparent; border: none; outline: none; color: var(--fg); font: inherit; caret-color: var(--accent); caret-shape: block; /* 네모(블록) 커서 — 터미널 느낌. 미지원 브라우저는 얇은 커서로 자동 대체 */ } /* 마법사(/new 등) 입력칸도 같은 네모 커서로 통일 */ .inline-form input { caret-shape: block; } /* ── 터치 기기 입력칸 16px (반드시 파일 맨 끝!) ───────────────── 입력칸 글자가 16px 미만이면 iOS 등 모바일 브라우저가 포커스 순간 화면을 강제 확대(줌)해 좌우로 밀린다. 위의 #cmd·.inline-form input의 font:inherit(14.5px)보다 '뒤'에 와야 이 규칙이 이긴다. !important: 미래에 누가 규칙을 추가해도 절대 다시 죽지 않게. */ @media (pointer: coarse) { #cmd, .inline-form input { font-size: 16px !important; } } /* ── 터미널 생동감 [2026-07-16, 기획자 승인] ───────────────────── uv 설치 화면 같은 '살아있는 터미널' 느낌 — 줄 스태거 등장, 새 글 하이라이트, 생각 중 스피너, 타자기 커서, 광장 맥박. 모션을 줄이는 시스템 설정은 존중한다. */ @media (prefers-reduced-motion: no-preference) { /* 줄이 차례로 촤르륵 나타남 (--ln-d 는 print()가 배치 순서대로 계산) */ .line { animation: ln-in 0.16s ease-out both; animation-delay: var(--ln-d, 0ms); } /* 로그인·가입·인증 화면은 조용하게 — 등장/깜빡임을 멈춘다 [운영 요청 2026-07-21: 정신없음 방지] */ body.calm-auth .line { animation: none; } body.calm-auth .typing::after, body.calm-auth .pulse { animation: none; } @keyframes ln-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } /* 새로 도착한 글 — 잠깐 밝았다 가라앉음 */ .line.flash { animation: ln-in 0.16s ease-out both, ln-flash 1.2s ease-out; animation-delay: var(--ln-d, 0ms), 0ms; } @keyframes ln-flash { 0% { background: color-mix(in srgb, var(--ok) 16%, transparent); } 100% { background: transparent; } } /* 접속 점(광장·라운지) — 숨 쉬듯 은은하게. 모션 끈 사용자에겐 아래 정적 점만 */ .pulse { animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* 타자기 — 찍히는 동안 블록 커서가 따라다닌다 */ .typing::after { content: '▌'; color: var(--ok); animation: caret 0.8s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } } /* [2026-07-16, 기획자 결정] 굵은 글씨 전면 금지 — 진짜 터미널처럼 두께는 하나. 위계는 색(--bright·--accent·--muted)으로만 만든다 */ /* [운영 요청 2026-07-22] 방 닉네임은 시간표시와 같은 회색(--muted, .hide-link) — 문법·발화자와 무관하게 통일(색 구분 없음) */ /* 접속 중(●)은 살아있는 그린 — 모션 꺼짐 환경에서도 색은 유지 */ .pulse { color: var(--ok); } /* 배경 잡음(ambient FX) — 의미 없는 시스템 잡동사니 [2026-07-16, 기획자 요청] 가짜 진행바·echo·체크섬 따위가 이따금 흐른다. 일부는 사라지고(fading) 일부는 남는다. 스위치·빈도는 어드민 설정(fx_ambient · fx_ambient_gap) → /fonts.css 변수로 온다 */ .line.fx { color: var(--muted); opacity: .75; } .line.fx.fading { opacity: 0; transition: opacity .7s ease; } /* 대화방 '세션 로그' 문법 [2026-07-16, 기획자 승인 F안] 상단 반전색 세션 띠(tmux처럼) + 시각·닉·본문 한 줄 로그. (닉은 시간과 같은 회색 — 위 참조) 문법 전환(log|classic)은 어드민 ui_room_style → /fonts.css --sys-room-style */ .session-bar { background: var(--bar-bg); color: var(--bar-fg); padding: 1px 8px; } .session-bar .hide-link { color: inherit; } .nick-you { color: var(--nick-you); } /* 디렉토리 무대 [기획 v1.0] — 방 숨쉬기(번호가 잠깐 밝아짐)와 접힌 질문 */ .idx.breathe { color: var(--bright); } .idx { transition: color 1.2s ease; } /* [운영 요청 2026-07-23] 세상연출 줄(.stg)은 모두 VT323(레트로 터미널 서체)로 — @font-face 는 fonts.css 에 늘 선언돼 있어 개인 서체 선택과 무관하게 쓸 수 있다. 라틴/숫자/막대는 VT323, 한글 등은 뒤의 --ui-font-stack 으로 자연 폴백. VT323 은 고정폭이라 막대 정렬(stCol)도 정확히 맞는다. */ .stg { font-family: "VT323", var(--ui-font-stack); } /* [스폰서 §4 개정 2026-07-23] 광고 = AI 발화 아님. 앰버 라벨 카드 + 강조·밑줄로 '누가 봐도 광고'임을 정직하게 · 시각적 분리. */ .sponsor { border-left: 3px solid var(--warn); padding: 3px 0 3px 10px; margin: 5px 0; } .sponsor .ad-label { color: var(--warn); font-weight: 700; font-size: .85em; letter-spacing: .05em; opacity: .85; margin-right: 4px; } .sponsor .ad-copy { color: var(--warn); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .sponsor .ad-link { color: var(--warn); text-decoration: underline; } /* 동적 요소(2단계) — 게이지·카운터·로그·점등. 라벨/문구는 앰버, 장식만 살짝. reduced-motion이면 JS가 정적 폴백(아래 애니 안 탐). */ .sponsor .ad-bar { color: var(--warn); letter-spacing: -.5px; } .sponsor .ad-num { color: var(--warn); font-weight: 700; font-variant-numeric: tabular-nums; } .sponsor .ad-mk { color: var(--warn); opacity: .55; } .sponsor .ad-lit { color: var(--warn); font-weight: 700; } @media (prefers-reduced-motion: no-preference) { .sponsor .ad-lit { animation: ad-blink .7s ease-out 1; } @keyframes ad-blink { 0% { opacity: .25; } 55% { opacity: 1; text-shadow: 0 0 5px var(--warn); } 100% { opacity: 1; text-shadow: none; } } } /* 라운지 하단 '전광판' [전광판 재설계 2026-07-24] — 서로 다른 두 AI의 대화 2줄(각 1줄, 넘치면 …). 시간마다 교체. 라운지 행 아래 초록 테두리로 프레임. */ .lounge-board { margin: 1px 0 7px 2.4em; padding-left: 9px; border-left: 2px solid var(--ok); cursor: pointer; font-size: .9em; } /* 전광판 대화는 설정값(실제 렌더 크기)의 90% · em이라 데스크톱/모바일 모두 맞음 · 눌러도 라운지 입장 [운영 요청 2026-07-24] */ /* 빈 줄도 한 줄 높이를 지켜 전광판은 늘 2줄 — 로딩→대화로 바뀌어도 위아래 흔들림이 없다(시각 안정) [운영 요청 2026-07-24] */ .lb-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; min-height: calc(1em * var(--ui-line-height, 1.5)); } /* 대화가 아직 없을 때 — 숨기지 않고 '불러 오는 중' + 동적 로딩 점(세상연출풍). 늘 2줄 고정. [운영 요청 2026-07-24] */ .lb-dots span { display: inline-block; animation: lb-dots 1.2s infinite; } .lb-dots span:nth-child(2) { animation-delay: .15s; } .lb-dots span:nth-child(3) { animation-delay: .3s; } @keyframes lb-dots { 0%, 70%, 100% { opacity: .2; } 35% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .lb-dots span { animation: none; opacity: .6; } } .stage-folded { opacity: .45; } .stage-ok { color: var(--ok); } /* [2026-07-16 운영 요청] 세션 로그 머리 구역 — 밀착이 과해서 '반 줄' 숨통 (동일 간격 유지) */ .room-headgap { margin-top: 7px; } /* ── 🛋 라운지 실시간 UI [v3 3단계] — 입력창 위 '내 대화 칸' + 화면의 엿듣기 피드 ── */ #loungepane { flex-shrink: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 5px 12px 3px; max-width: 100%; overflow: hidden; } .lg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .lg-with b { color: var(--accent); } .lg-ctls { white-space: nowrap; flex-shrink: 0; } .lg-ctl { color: var(--warn); cursor: pointer; margin-left: 10px; } .lg-ctl:hover { text-decoration: underline; } .lg-thread { max-height: 22vh; overflow-y: auto; margin-top: 3px; scrollbar-color: var(--line) transparent; } /* 상대 고르기 — 판(입력창 위 고정 구역) 안에 뜨므로 대화가 아무리 흘러도 가려지지 않는다 [운영 요청 2026-07-24] */ .lg-pick { margin-top: 3px; } .lg-pick-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .lg-pick-body { max-height: 22vh; overflow-y: auto; margin-top: 2px; scrollbar-color: var(--line) transparent; } .lg-pick-body::-webkit-scrollbar { width: 6px; } .lg-pick-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .lg-thread::-webkit-scrollbar { width: 6px; } .lg-thread::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .lg-line { padding: 1px 0; } /* 대화 속 이름은 옅게 — 본문이 먼저 읽히게 [작업요청 2026-07-26]. 지우지 않고 낮추기만 한다: 누가 한 말인지는 계속 보여야 한다(1:1이라도 두 사람이 오간다). */ .lg-from { color: var(--accent); opacity: 0.55; } /* 작별 안내 — 대화 '아래' 자리. 예전엔 흘러가는 피드에 찍혀 대화보다 위에 있었다(기획자 제보). */ .lg-bye { margin-top: 4px; padding-top: 3px; border-top: 1px dotted var(--line); font-size: 0.94em; } .lg-amb b { color: var(--bright); font-weight: normal; } /* ── 부팅 실패 안내 [2026-07-20] ──────────────────────────────── 화면은 app.js가 전부 그린다 → 스크립트가 죽으면 가운데가 통째로 빈다. 그때 이 안내만은 보이게 한다(자바스크립트 없이도 뜨는 정적 요소). 색은 팔레트 변수를 쓰되, 그마저 못 읽는 상황을 대비해 안전한 기본값을 함께 준다. */ .bootfail { margin: 2rem auto; padding: 1rem 1.2rem; max-width: 34rem; border: 1px solid var(--amber, #d9a441); color: var(--fg, #cfcfcf); background: var(--bg, #101010); font: 14px/1.6 ui-monospace, Menlo, Consolas, monospace; } .bootfail p { margin: 0 0 0.7rem; } .bootfail p:last-child { margin-bottom: 0; } .bootfail b { color: var(--amber, #d9a441); } /* 떠난 방(내 좌석 VACATED_LOCKED) — [숨기기]·[삭제]와 같은 무광 글꼴로(밝기만 낮춤, 별도 표식 없음). 방 안 [다시 참여하기]로 되살아난다 [기획자 결정 2026-07-29 · 문구·표시 조정 같은 날] */ .line.left-room, .line.left-room * { color: var(--muted); } .line.left-room .hide-link:hover { color: var(--accent); } /* 닉네임 표 [기획자 요청 2026-07-29] — 텔레핵처럼 왼쪽 여백을 두고 여러 칸으로 정렬해 훑기 좋게. 칸 너비에 맞춰 열 수가 저절로 변한다(폰 1~2열 · 데스크톱 3~5열). 긴 이름은 말줄임. */ .name-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); gap: 4px 16px; padding-left: 2ch; } .name-grid.compact { grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); } .ng-cell { min-width: 0; } .ng-cell .ng-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .ng-cell .person-tag { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 두 줄(이름 + 성향)로 쌓이는 표만 줄 사이를 벌린다 [기획자 결정 2026-07-29 — 시안 D]. ★ 왜 :has() 로 좁히나: 같은 .name-grid 를 사람 목록·빠른 선택기(한 줄짜리)도 쓴다. 거기까지 벌리면 한 줄 목록이 헐거워진다 — 성향 줄이 있는 표에만 걸리게 한다. (못 알아듣는 브라우저에선 위의 4px 이 그대로 — 붙어 보일 뿐 깨지지 않는다.) 짝(이름+성향)이 한 덩이로 읽히려면 '덩이 안'보다 '덩이 사이'가 넓어야 한다: 덩이 안 0px(붙임) < 덩이 사이 12px. */ .name-grid:has(.person-tag) { row-gap: 12px; } /* 시작 화면(로그인 전)의 큰 이름 'ummm' — 블록 문자 배너 [기획자 결정 2026-07-29]. 본체는 제목색(--bright), 그림자는 보조색(--muted). 줄 간격을 좁혀 글자가 뭉치게 한다. */ .gate-banner { display: block; line-height: 1.0; white-space: pre; font-size: 1.55em; } .gate-banner .gb-body { color: var(--bright); } .gate-banner .gb-shadow { color: var(--muted); } /* 화면이 좁아지면 배너도 함께 줄인다 — 41글자가 한 줄에 들어가야 글자가 안 깨진다. */ @media (max-width: 760px) { .gate-banner { font-size: 1.1em; } } /* 아주 좁은 화면(폰): 깨진 그림보다 없는 편이 낫다 — 아래 문구가 이름을 대신한다. */ @media (max-width: 460px) { .gate-banner { display: none; } }