/* ─────────────────────────────────────────────────────────── 두 가지 화면 테마 — 레이아웃·서체·크기는 완전히 동일, '색'만 다르다. green (기본): 그린 터미널 — 어두운 배경 + 차분한 인광 초록. mono : 흑백 터미널 — 검정 배경 + 밝은 회색. 모든 글자: 같은 크기(14px)·같은 두께(400)·고정폭. 볼드·네온 없음. 전환: 로. 규칙은 var(--…)만 참조한다. ─────────────────────────────────────────────────────────── */ :root { /* green — 그린 터미널 (기본값). 초록은 눈이 편하게 살짝 낮춘 밝기 */ --bg: #0a0e0a; --fg: #2fd45c; --muted: #1e8c42; /* 보조 텍스트·AI 표식 — 같은 초록 계열, 어둡게 */ --accent: #2fd45c; --bright: #2fd45c; --err: #2fd45c; /* 오류도 같은 색 — ⚠ 기호로 구분 */ --ai: #1e8c42; --line: #16401f; --hover: rgba(47, 212, 92, 0.07); } html[data-theme="mono"] { /* mono — 흑백 터미널. 색만 회색조로 교체 */ --bg: #0a0a0a; --fg: #cfcfcf; --muted: #6f6f6f; --accent: #cfcfcf; --bright: #cfcfcf; --err: #cfcfcf; --ai: #6f6f6f; --line: #2e2e2e; --hover: rgba(207, 207, 207, 0.07); } * { box-sizing: border-box; } /* ── 앱 껍데기(App Shell) 구조 — 모바일 안정화 ────────────────── 페이지 전체가 아니라 #screen 만 안에서 스크롤된다. → 키보드가 올라와도 입력창이 가려지지 않고, 헤더는 항상 보인다. */ html, body { margin: 0; height: 100%; overflow: hidden; /* 바깥(페이지) 스크롤 금지 — 안쪽만 스크롤 */ background: var(--bg); color: var(--fg); font-family: "SFMono-Regular", "Menlo", "Consolas", "D2Coding", monospace; font-size: 14px; font-weight: 400; line-height: 1.5; text-shadow: none; -webkit-text-size-adjust: 100%; /* iOS 가로전환 시 글자 멋대로 커짐 방지 */ } #crt { max-width: 820px; margin: 0 auto; height: 100vh; height: 100dvh; /* 모바일 주소창이 늘고 줄어도 정확한 화면 높이 */ display: flex; flex-direction: column; padding: 14px 16px 0; } #banner { flex-shrink: 0; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; } #whoami { float: right; color: var(--muted); } #screen { flex: 1; min-height: 0; /* flex 자식이 넘칠 때 스크롤이 생기게 하는 핵심 */ overflow-y: auto; /* ★ 대화 영역만 스크롤 */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* 끝까지 스크롤해도 새로고침 제스처로 안 튐 */ white-space: pre-wrap; word-break: break-word; padding-bottom: 12px; } /* 좁은 화면(폰): 입력창 글자가 16px 미만이면 iOS가 화면을 강제 확대함 → 전체 16px 통일 */ @media (max-width: 600px) { html, body { font-size: 16px; } #crt { padding: 10px 12px 0; } } /* 출력 줄 — 모든 텍스트 같은 크기·두께. 색도 변수로만 */ .line { margin: 0; } .muted, .dim, .idx, .entry .meta, .sug-desc { color: var(--muted); } .amber, .sug-name, #prompt { color: var(--accent); } .glow { color: var(--bright); } .err { color: var(--err); } .head { color: var(--bright); margin: 6px 0; } .spacer { height: 10px; } /* 칩·배지 — 테두리로만 구분 */ .chip, .type-badge { display: inline-block; border: 1px solid var(--line); padding: 0 6px; } .type-badge { min-width: 2.2em; text-align: center; margin-right: 8px; color: var(--accent); } .chip { margin-left: 6px; color: var(--accent); } /* AI 표식 (R7) — 항상 표시되되 조용하게: 흐린 색 글자만 (크기는 동일) */ .ai-tag { color: var(--ai); margin-left: 5px; letter-spacing: 0.06em; } /* 목록 항목 (클릭 가능) */ .item { cursor: pointer; padding: 3px 6px; border-left: 2px solid transparent; } .item:hover { border-left-color: var(--accent); background: var(--hover); } .entry { margin: 5px 0; } .entry.cont { margin-top: 1px; } /* 같은 사람 연속 발화 — 위 여백 줄여 묶어 보이게 */ .entry .body { color: var(--fg); } .hide-link { color: var(--muted); cursor: pointer; margin-left: 8px; } .hide-link:hover { color: var(--accent); text-decoration: underline; } /* 인라인 폼 (로그인) — 박스 없이 터미널 줄처럼 보이게. 생김새만 터미널이고 부품은 진짜 이라 브라우저·OS 비밀번호 관리자와 연동된다. */ .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); } /* 크롬 자동완성이 입력칸을 노랗게 칠하는 것 방지 (터미널 미감 유지) */ .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; } .inline-form button { background: transparent; border: none; padding: 2px 0; color: var(--muted); font: inherit; cursor: pointer; } .inline-form button:hover { color: var(--accent); text-decoration: underline; } /* 입력 줄 + 자동완성 — flex 하단 고정 (sticky 대신 구조로 고정: 모바일에서 안정적) */ #inputbar { flex-shrink: 0; background: var(--bg); } /* 로그인 전에는 하단 명령 입력줄을 숨긴다 (첫 화면은 로그인 폼 중심) */ body.no-input #inputbar { display: none; } #suggest { display: none; border: 1px solid var(--line); border-bottom: none; max-height: 40vh; max-height: 40dvh; /* 키보드가 올라와 화면이 줄어도 목록이 넘치지 않게 */ overflow-y: auto; } .sug-row { padding: 5px 10px; cursor: pointer; white-space: nowrap; border-left: 2px solid transparent; } .sug-row:hover { background: var(--hover); } .sug-row.sel { border-left-color: var(--accent); background: var(--hover); } .sug-desc { margin-left: 8px; } #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); }