/* emulog 서비스 앱 공용 레이어 — 구동 보고(/ready)·레트로 DB(/db)·한글화 폰트(/font)·ES-EZ(/ez).
 * nginx(snippets/emulog-apps.conf)가 각 앱 HTML 의 </head> 앞에 이 파일과 --emu-svc(그 서비스 색)를 넣는다.
 * 앱 코드는 바꾸지 않는다. 앱들이 이미 쓰는 CSS 변수를 emulog 팔레트로 다시 잇고, 머리띠·워드마크·첫 제목·후원 버튼·포커스만 홈과 맞춘다.
 * 서비스 색은 "이 서비스"를 가리키는 표지(띠·워드마크·강조·후원 버튼)에만 쓰고, 링크·포커스·선택 상태는 파랑/시안으로 둔다.
 * 제목 글꼴 Neo둥근모는 16px 비트맵 설계라 16의 배수 크기로만 쓴다. */
@font-face{font-family:"NeoDunggeunmo";src:url("/assets/fonts/neodgm.woff2") format("woff2");font-display:swap}
:root{
  --emu-night:#0a0d1c;--emu-cyan:#62edff;--emu-px:"NeoDunggeunmo","Neo둥근모",ui-monospace,monospace;
  --emu-svc-ink:#0a0d1c;
  /* 구동 보고·한글화 폰트·레트로 DB 공통 변수 */
  --bg:#0a0d1c;--bg2:#0d1124;--panel:#10152b;--panel2:#161c38;--panel3:#1c2447;
  --line:#232b4d;--line2:#2f3a66;--txt:#eef1ff;--muted:#9aa6c8;--faint:#6b7499;
  --accent:#5b8cff;--accent-d:#3f63d0;--blue:#5b8cff;--cyan:#62edff;--magenta:var(--emu-svc,#5b8cff);
  --grad:linear-gradient(96deg,var(--emu-svc,#5b8cff),var(--emu-svc,#5b8cff));
  --ring:0 0 0 2px #62edff;--radius:4px;--radius-sm:2px;--radius-lg:6px;
  /* ES-EZ 변수 */
  --text:#eef1ff;--card:#10152b;--card-hover:#161c38;--border:#232b4d;--accent2:var(--emu-svc,#8bd14f);
}
body{background-color:var(--emu-night)}
body::before{display:none}            /* 네온 방사 광원 대신 밤색 바탕 */
:focus-visible{outline:2px solid var(--emu-cyan)!important;outline-offset:2px}

/* 머리띠: 위쪽 4px 서비스 색 + 밤색 바 */
.topbar,body>nav{background:rgba(10,13,28,.94)!important;border-top:4px solid var(--emu-svc,#5b8cff);border-bottom:2px solid #1a2146!important}
.topbar .brand,body>nav .logo{font-family:var(--emu-px);font-weight:400;font-size:16px;line-height:1;letter-spacing:0;color:#eef1ff;-webkit-font-smoothing:none}
.topbar .brand span,body>nav .logo span{background:none!important;-webkit-text-fill-color:currentColor;color:var(--emu-svc,#5b8cff)!important;font-weight:400}
body>nav .logo{color:var(--emu-svc,#8bd14f)}
body>nav .logo span{color:#eef1ff!important}
.topbar .brand small{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;-webkit-font-smoothing:auto}
@media (min-width:1100px){.topbar .brand,body>nav .logo{font-size:32px}.topbar .brand small{font-size:12px}}
/* 좁은 화면: 버튼 묶음을 워드마크 아래 한 줄로 내리고 가로로 밀어 본다(레트로 DB 는 원래 버튼이 한 칸씩 쌓여 화면 밖으로 밀려났다) */
@media (max-width:700px){
  .topbar{flex-wrap:wrap}
  .topbar-right{flex-wrap:nowrap!important;justify-content:flex-start!important;max-width:100%;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .topbar-right::-webkit-scrollbar{display:none}
  .topbar-right>*{flex:none}
  .topbar .brand small{display:none}
}

/* 앱 첫 화면 제목: 픽셀 글꼴(16의 배수), 강조어는 서비스 색 */
.hero h1{font-family:var(--emu-px)!important;font-weight:400!important;letter-spacing:0!important;line-height:1.25!important;font-size:32px!important;-webkit-font-smoothing:none}
@media (min-width:900px){.hero h1{font-size:48px!important}}
.hero h1 em,.hero h1 .accent{font-style:normal;color:var(--emu-svc,#5b8cff)!important;-webkit-text-fill-color:var(--emu-svc,#5b8cff)!important;background:none!important}
.hero .eyebrow{color:var(--emu-cyan)}

/* 버튼: 네모 + 딱딱한 그림자(홈과 같은 누름 반응). 서비스 색 바탕에는 밤색 글자로 대비를 지킨다 */
.btn-coffee,body:has(>nav>.logo) .btn{background:var(--emu-svc,#5b8cff)!important;color:var(--emu-svc-ink)!important;border:0!important;border-radius:0!important;
  box-shadow:3px 3px 0 #000!important;font-weight:700;filter:none!important;transform:none}
.btn-coffee:hover,body:has(>nav>.logo) .btn:hover{background:#eef1ff!important;color:var(--emu-svc-ink)!important}
.btn-coffee:active,body:has(>nav>.logo) .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000!important}
.btn-ghost{border-radius:0!important}
.btn-ghost:hover{border-color:var(--emu-cyan)!important}
body>nav a[href="https://emulog.app/"]{color:#c8d1f5!important;border-radius:0!important;border-color:#2f3a66!important}

@media (prefers-reduced-motion:reduce){.btn-coffee:active,body:has(>nav>.logo) .btn:active{transform:none}}