/* ============================================================================ HS-DOS — 풀스크린 터미널 모드 (v1 / 2026-06-27) -------------------------------------------------------------------------- localStorage['hansaeng-theme'] === 'terminal' 일 때 hsdos.js 가 #hsdos 오버레이를 부팅한다. 보드=디렉터리 / 채널=하위디렉터리 / 글=파일. 명령어로 탐색·작성·채팅. 이 CSS 는 그 오버레이만 스타일링 — 사이트 다른 테마엔 영향 없음. ============================================================================ */ :root { --hsdos-h: 100dvh; } /* FOUC 방지: theme_init 이 .hsdos-active 부여 → 흰 깜빡임 차단. body overflow 잠금/배경은 hsdos.js 가 부팅 성공 시에만 적용 → 혹시 hsdos.js 가 안 뜨면 일반 사이트로 자연 degrade(까만 void 갇힘 방지). */ html.hsdos-active { background: #05080c !important; } #hsdos { position: fixed; inset: 0; z-index: 2147483600; display: flex; flex-direction: column; background: #05080c; color: #cdd6cd; font-family: "Galmuri11", "Cascadia Mono", "D2Coding", "Consolas", "Courier New", monospace; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: none; overscroll-behavior: contain; } /* CRT 비네팅 + 아주 옅은 스캔라인 */ #hsdos::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0, 0, 0, .45) 100%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px); } #hsdos.noscan::before { background: radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0, 0, 0, .45) 100%); } /* 상단 타이틀바 (도스 윈도우 느낌) */ .hsdos-titlebar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: #0c1320; border-bottom: 1px solid #1c2740; color: #9fb0c8; font-size: 12px; user-select: none; } .hsdos-titlebar .tb-dot { width: 9px; height: 9px; border-radius: 0; display: inline-block; } .hsdos-titlebar .tb-dot.r { background: #ff6b6b; } .hsdos-titlebar .tb-dot.y { background: #ffcf6b; } .hsdos-titlebar .tb-dot.g { background: #5ef08a; } .hsdos-titlebar .tb-title { font-weight: 700; color: #cdd6cd; letter-spacing: .04em; } .hsdos-titlebar .tb-spacer { flex: 1; } .hsdos-titlebar .tb-exit { cursor: pointer; border: 1px solid #2a3a55; background: #14213a; color: #ffcf6b; padding: 2px 9px; font: inherit; font-size: 11px; font-weight: 700; } .hsdos-titlebar .tb-exit:hover { background: #ff6b6b; color: #05080c; border-color: #ff6b6b; } /* 출력 스크롤백 */ .hsdos-out { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 12px 14px 4px; white-space: pre-wrap; word-break: break-word; position: relative; z-index: 2; } .hsdos-out::-webkit-scrollbar { width: 12px; } .hsdos-out::-webkit-scrollbar-track { background: #05080c; } .hsdos-out::-webkit-scrollbar-thumb { background: #2a3a55; border: 3px solid #05080c; } .hsdos-line { white-space: pre-wrap; } .hsdos-cmd { color: #cdd6cd; } .hsdos-cmd .p { color: #5ef08a; font-weight: 700; } .hsdos-dim { color: #5d6b66; } .hsdos-err { color: #ff6b6b; } .hsdos-ok { color: #5ef08a; } .hsdos-warn { color: #ffcf6b; } .hsdos-dir { color: #5fd1ff; font-weight: 700; } .hsdos-file { color: #cdd6cd; } .hsdos-num { color: #ffcf6b; } .hsdos-meta { color: #5d6b66; } .hsdos-author { color: #7aa2ff; } .hsdos-title { color: #ffffff; } .hsdos-banner { color: #5ef08a; } .hsdos-link { color: #5fd1ff; text-decoration: underline; cursor: pointer; } /* 표 형태 나열 (ls) */ .hsdos-row { display: flex; gap: 10px; } .hsdos-row .ix { color: #5d6b66; min-width: 2.4em; text-align: right; flex: 0 0 auto; } .hsdos-row .nm { flex: 1 1 auto; min-width: 0; } .hsdos-row .mt { color: #5d6b66; flex: 0 0 auto; } .hsdos-row:hover { background: rgba(95, 209, 255, .08); } /* 입력 라인 */ .hsdos-inputline { flex: 0 0 auto; display: flex; align-items: baseline; gap: 7px; padding: 6px 14px; border-top: 1px solid #14213a; background: #070b11; position: relative; z-index: 4; } .hsdos-prompt { color: #5ef08a; font-weight: 700; white-space: nowrap; flex: 0 0 auto; } .hsdos-prompt .path { color: #5fd1ff; } .hsdos-input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; color: #d7ffd9; font: inherit; caret-color: #5ef08a; padding: 0; } .hsdos-input::placeholder { color: #3a463f; } /* 하단 힌트바 */ .hsdos-hint { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 3px 14px; background: #0c1320; border-top: 1px solid #14213a; color: #6a7a72; font-size: 11px; user-select: none; z-index: 4; } .hsdos-hint b { color: #ffcf6b; } .hsdos-hint .sp { flex: 1; } /* 채팅 모드 표시 */ #hsdos.chatmode .hsdos-prompt { color: #ffcf6b; } /* 모바일 */ @media (max-width: 640px) { #hsdos { font-size: 13px; } .hsdos-out { padding: 10px 11px 4px; } .hsdos-inputline, .hsdos-hint, .hsdos-titlebar { padding-left: 11px; padding-right: 11px; } .hsdos-hint .hide-sm { display: none; } } @media (prefers-reduced-motion: reduce) { #hsdos .blink { animation: none; } } .blink { animation: hsdos-blink 1.05s step-end infinite; } @keyframes hsdos-blink { 50% { opacity: 0; } }