/* emulog 홈 — "터미널 블루 + 1bpp 타일".
 * 제목과 라벨은 Neo둥근모(16px 비트맵 설계)를 16의 배수 크기로만 쓴다. 본문은 기기 기본 한글 글꼴.
 * 색 규칙: 터미널 블루(부팅 화면)·인광 흰색(켜진 픽셀)·시안(래스터 빔·포커스)·밤색(바탕)
 * 서비스 네 가지 색은 2bpp 팔레트처럼 그 서비스를 가리킬 때만 쓴다. */
@font-face{font-family:"NeoDunggeunmo";src:url("/assets/fonts/neodgm.woff2") format("woff2");font-display:swap}

:root{
  --night:#0a0d1c;--night2:#10152b;--line2:#232b4d;--line3:#2f3a66;
  --term:#1635c8;--term-deep:#0f269a;--term-ink:#0b1d7a;
  --phos:#eef1ff;--phos2:#c8d1f5;--dimt:#9aa6c8;--faint:#59628a;
  --cyan:#62edff;
  --c-ready:#e05aa8;--c-db:#e0b94a;--c-font:#5b8cff;--c-ez:#8bd14f;
  --appbar-h:58px;
  --px:"NeoDunggeunmo","Neo둥근모",ui-monospace,monospace;
}
.t-ready{--tc:var(--c-ready)}.t-db{--tc:var(--c-db)}.t-font{--tc:var(--c-font)}.t-ez{--tc:var(--c-ez)}

body.hub{background:var(--night);color:var(--phos)}
.px{font-family:var(--px);font-weight:400;letter-spacing:0;-webkit-font-smoothing:none;font-smooth:never;word-break:keep-all}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hub a{color:#9ec0ff}
.hub :focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:30;background:var(--cyan);color:var(--night);padding:10px 12px;font-size:16px;text-decoration:none}
.skip:focus{top:10px}
.hub .wrap{max-width:1200px}
.hub [id]{scroll-margin-top:calc(var(--appbar-h) + 16px)}

/* ── 앱 바 ── */
.appbar{position:sticky;top:0;z-index:20;background:rgba(10,13,28,.94);backdrop-filter:blur(6px);border-bottom:2px solid #1a2146}
.appbar-in{display:flex;align-items:center;gap:20px;height:var(--appbar-h)}
.appbar .brand{font-size:32px;line-height:1;color:var(--phos);text-decoration:none;margin:0}
.appbar .brand span{color:var(--c-font)}
.apptabs{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:none}
.apptabs::-webkit-scrollbar{display:none}
.apptabs a{color:var(--dimt);text-decoration:none;font-size:14.5px;padding:8px 12px;white-space:nowrap;border-radius:0}
.apptabs a:hover{color:var(--phos);background:#161c3a}
.apptabs a[aria-current=page]{color:var(--phos);box-shadow:inset 0 -2px 0 var(--cyan)}

/* ── 부팅 화면(히어로) ── */
.boot{position:relative;isolation:isolate;overflow:hidden;background:var(--term);color:var(--phos)}
.boot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(238,241,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(238,241,255,.075) 1px,transparent 1px);
  background-size:var(--tile,112px) var(--tile,112px);background-position:var(--tile-x,0) var(--tile-y,0)}
.boot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;z-index:-1;
  background:repeating-linear-gradient(90deg,var(--c-ready) 0 25%,var(--c-db) 25% 50%,var(--c-font) 50% 75%,var(--c-ez) 75% 100%)}
.boot-in{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:48px;padding-block:52px 72px}
.boot-eyebrow{font-size:16px;line-height:1;color:var(--phos2);margin:0 0 30px}
.boot-h{position:relative;margin:0;font-size:112px;line-height:1;color:var(--phos)}
.boot-h-text{display:block}
.js:not(.no-motion) .boot-h-text,.motion .boot-h-text{color:transparent}
.boot-canvas{position:absolute;left:0;top:0;display:none;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:pan-y}
.motion .boot-canvas{display:block}
.boot-sub{font-size:17px;line-height:1.85;color:var(--phos2);max-width:35em;margin:34px 0 26px;word-break:keep-all}

/* 통합 검색: 터미널 입력 줄 */
.omni-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.omni-tabs button{font:16px/1 var(--px);color:var(--phos2);background:transparent;border:2px solid rgba(238,241,255,.32);padding:7px 11px;cursor:pointer}
.omni-tabs button:hover{color:var(--phos);border-color:var(--phos2)}
.omni-tabs button[aria-selected=true]{background:var(--phos);color:var(--term);border-color:var(--phos)}
.omni-box{position:relative;display:flex;gap:8px}
.omni-prompt{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--cyan);pointer-events:none}
.omni-box input{flex:1;min-width:0;font:16px/1.4 var(--px);color:var(--phos);background:var(--term-ink);border:2px solid rgba(238,241,255,.36);border-radius:0;padding:14px 14px 14px 34px}
.omni-box input::placeholder{color:rgba(200,209,245,.62)}
.omni-box input:focus{outline:none;border-color:var(--cyan)}
.omni-box button{font-size:16px;color:var(--term);background:var(--phos);border:2px solid var(--phos);padding:0 22px;cursor:pointer;box-shadow:4px 4px 0 var(--term-ink)}
.omni-box button:hover{background:var(--cyan);border-color:var(--cyan)}
.omni-box button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--term-ink)}
.omni-results{display:grid;gap:10px;margin-top:14px}
.omni-results.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.omni-col{background:var(--term-ink);border:2px solid rgba(238,241,255,.2);padding:12px 14px;min-width:0}
.omni-col h3{font:16px/1.2 var(--px);margin:0 0 8px;color:var(--phos)}
.omni-col h3 small{color:var(--phos2);font-size:16px}
.omni-list a{display:block;padding:7px 0;border-top:1px solid rgba(238,241,255,.14);text-decoration:none}
.omni-list a b{display:block;color:var(--phos);font-size:14.5px;font-weight:600}
.omni-list a small{color:var(--phos2);font-size:13px}
.omni-list a:hover b{color:var(--cyan)}
.omni-more{display:inline-block;margin-top:8px;font-size:14px;color:var(--cyan)!important}
.omni-results .empty,.omni-results .loading{color:var(--phos2);font-size:14px;margin:4px 0}
.boot-cite{margin:22px 0 0;font-size:13.5px;line-height:1.7;color:var(--phos2)}
.boot-cite a{color:var(--phos)!important;text-decoration-color:var(--cyan);text-underline-offset:3px}

/* 오른쪽: 헥스 덤프 + 바로 가기 메뉴 */
.boot-side{display:flex;flex-direction:column;gap:18px;padding-top:46px}
.hexdump{background:rgba(9,22,112,.55);border:2px solid rgba(238,241,255,.2);padding:14px 16px;font-size:16px;line-height:20px;color:var(--phos2);min-height:170px}
.hexdump p{margin:0;white-space:pre;overflow:hidden}
.hx-head{color:var(--phos);margin-bottom:8px!important}
.hx-head b{color:var(--cyan);font-weight:400}
.hx-b.on{color:var(--cyan)}
.hx-b.off{color:rgba(200,209,245,.3)}
.hx-foot{margin-top:10px!important;color:var(--cyan)}
.launcher{border:2px solid rgba(238,241,255,.2);background:rgba(9,22,112,.35)}
.launcher-h{margin:0;padding:10px 14px;font-size:16px;line-height:1;color:var(--phos2);border-bottom:2px solid rgba(238,241,255,.14)}
.app-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline;padding:12px 14px 12px 16px;border-left:6px solid var(--tc);color:var(--phos);text-decoration:none}
.app-tile+.app-tile{border-top:1px solid rgba(238,241,255,.12)}
.tile-name{font-size:15.5px;font-weight:700}
.tile-path{font-size:16px;line-height:1;color:var(--phos2)}
.tile-num{grid-column:1/-1;font-size:16px;line-height:1;color:var(--phos2)}
.app-tile:hover,.app-tile:focus-visible{background:var(--tc);color:var(--night);outline:none}
.app-tile:hover .tile-path,.app-tile:hover .tile-num,.app-tile:focus-visible .tile-path,.app-tile:focus-visible .tile-num{color:var(--night)}
.app-tile:focus-visible{box-shadow:inset 0 0 0 2px var(--cyan)}

/* ── 네 질문: 고정 화면 + 단계 글 ── */
.story{background:var(--night);padding-block:40px 32px;border-bottom:2px solid #141a38}
.story-in{display:block}
.motion .story-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,660px);gap:56px;align-items:start}
.screen-col{display:none}
.motion .screen-col{display:block;order:2;position:sticky;top:calc(var(--appbar-h) + 28px);padding-block:40px}
.steps{order:1}
.screen{margin:0;width:fit-content;max-width:100%}
.screen-bar{display:flex;align-items:center;gap:12px;padding:8px 10px;background:var(--night2);border:2px solid var(--line2);border-bottom:0}
.screen-path{flex:1;font-size:16px;line-height:1;color:var(--phos2);white-space:nowrap;overflow:hidden}
.screen-pal{display:flex;gap:6px}
.pal{width:16px;height:16px;padding:0;border:0;background:var(--tc);cursor:pointer;opacity:.55}
.pal:hover{opacity:1}
.pal[aria-current=true]{opacity:1;box-shadow:0 0 0 2px var(--night2),0 0 0 4px var(--cyan)}
.screen-pause{font-size:16px;line-height:1;color:var(--phos2);background:transparent;border:2px solid var(--line3);padding:5px 8px;cursor:pointer}
.screen-pause:hover{color:var(--phos);border-color:var(--phos2)}
.screen-pause[aria-pressed=true]{color:var(--night);background:var(--cyan);border-color:var(--cyan)}
.screen-canvas{display:block;background:#05071a;border:2px solid var(--line2);image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%}
.screen-note{margin:12px 2px 0;font-size:13px;line-height:1.6;color:var(--dimt);max-width:640px}

.step{padding-block:56px}
.motion .step{min-height:84vh;display:flex;flex-direction:column;justify-content:center;padding-block:48px}
.step-path{display:flex;align-items:center;gap:10px;margin:0;font-size:16px;line-height:1;color:var(--tc)}
.chip{display:inline-block;width:16px;height:16px;background:var(--tc)}
.step h2{margin:18px 0 22px;font-size:32px;line-height:1.25;color:var(--phos)}
.step p{margin:0 0 14px;font-size:16.5px;line-height:1.85;color:#c9d0e6;max-width:34em;word-break:keep-all}
.step code{font:16px var(--px);background:transparent;color:var(--phos);padding:0}
.step-stat{margin:10px 0 22px!important;font-size:16px!important;line-height:1.4!important;color:var(--tc)!important}
.step-go{align-self:flex-start;display:inline-block;font-size:16px;line-height:1;padding:13px 16px;background:var(--tc);color:var(--night)!important;text-decoration:none;box-shadow:4px 4px 0 #000}
.step-go:hover{background:var(--phos)}
.step-go:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
.glyph-try{display:none}
.motion .glyph-try{display:flex;align-items:center;gap:12px;margin:6px 0 4px;font-size:16px;color:var(--phos2)}
.glyph-try input{width:64px;height:64px;text-align:center;font:32px/1 var(--px);color:var(--phos);background:var(--night2);border:2px solid var(--line3);border-radius:0;padding:0}
.glyph-try input:focus{outline:none;border-color:var(--cyan)}
.motion .step{opacity:.34;transition:opacity .24s steps(4,end)}
.motion .step.is-active,.motion .step:focus-within{opacity:1}

/* ── 운영 원칙 ── */
.rules{padding-block:72px 24px}
.rules h2,.now h2{margin:0 0 26px;font-size:32px;line-height:1.2;color:var(--phos)}
.rules-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0}
.rules-list div{padding:20px 0;border-top:2px solid #1a2146}
.rules-list dt{font-size:16px;line-height:1.4;color:var(--phos);margin-bottom:10px}
.rules-list dd{margin:0;font-size:15px;line-height:1.8;color:var(--dimt);word-break:keep-all}

/* ── 지금 emulog ── */
.now{padding-block:48px 16px}
.now-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.now-head p{margin:0;font-size:16px;color:var(--faint)}
.widgets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.widget{background:var(--night2);border:2px solid var(--line2);border-top:6px solid var(--tc);padding:16px 18px}
.widget h3{margin:0 0 10px;font-size:15px;color:var(--phos)}
.rank{margin:0;padding-left:22px;color:var(--faint)}
.rank li{padding:7px 0;border-bottom:1px solid #1a2146;font-size:14.5px}
.rank li:last-child{border-bottom:0}
.rank li a{color:var(--phos);text-decoration:none}
.rank li a:hover{color:var(--cyan)}
.rank li b{float:right;font-size:16px;color:var(--tc);font-weight:400}
.rank li small{display:block;color:var(--dimt);font-size:13px}

/* ── 운영자 노트 ── */
.opnote{padding-block:40px 8px}
.opnote>*{max-width:780px}
.opnote h2{margin:0 0 6px;font-size:16px;color:var(--c-font)}
.opnote h3{margin:0 0 14px;font-size:19px;line-height:1.5;color:var(--phos)}
.opnote p{margin:0 0 12px;font-size:15px;line-height:1.85;color:var(--dimt);word-break:keep-all}
.opnote-font{font-size:13.5px!important}
.ad-slot{margin-block:8px}

/* ── 푸터 ── */
.hub footer.site{border-top:2px solid #1a2146;color:var(--faint);background:var(--night)}
.hub footer.site a{color:var(--dimt)}

/* ── 앱 셸: 서비스 화면을 앱 바 아래에 채운다 ── */
body.in-app{overflow:hidden}
.app-view{position:fixed;left:0;right:0;top:var(--appbar-h);bottom:0}
.app-view iframe{width:100%;height:100%;border:0;display:block;background:#0d0f14}

/* ── 등장 연출(모션 허용일 때만 motion.js 가 .anim 을 붙인다) ── */
@keyframes scan-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes blink-in{0%,24%{opacity:0}25%,49%{opacity:1}50%,74%{opacity:.25}75%,100%{opacity:1}}
/* 부팅 화면은 첫 페인트 전에 붙는 .js 로 건다(깜박임 방지). 스크립트가 없으면 애니메이션 끝 상태 = 보임 */
@media (prefers-reduced-motion:no-preference){
  .js .boot-eyebrow{animation:blink-in .3s steps(1,end) both}
  .js .boot-sub{animation:scan-in .34s steps(8,end) .42s both}
  .js .omni{animation:scan-in .3s steps(6,end) .56s both}
  .js .boot-cite{animation:scan-in .24s steps(4,end) .78s both}
  .js .hexdump{animation:scan-in .3s steps(7,end) .14s both}
  .js .launcher{animation:scan-in .42s steps(10,end) .7s both}
}
/* 숨김은 opacity 로 — clip-path 로 숨기면 IntersectionObserver 가 잘린 영역(0px)을 재서 영영 안 보일 수 있다 */
.anim [data-reveal]:not(.in){opacity:0}
.anim [data-reveal].in{animation:scan-in .42s steps(10,end) both}

/* ── 반응형 ── */
@media (max-width:1239px){.boot-h{font-size:80px}.boot-in{grid-template-columns:minmax(0,1fr) 340px;gap:36px}}
@media (max-width:1023px){
  .boot-in{grid-template-columns:1fr;gap:28px;padding-block:40px 56px}
  .boot-side{padding-top:0}
  .hexdump{display:none}
  .motion .story-in{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:32px}
}
@media (max-width:860px){
  .motion .story-in{display:block}
  .motion .screen-col{position:sticky;top:var(--appbar-h);z-index:5;padding:10px 0 12px;margin-inline:-20px;padding-inline:20px;
    background:linear-gradient(var(--night) 88%,rgba(10,13,28,0))}
  .screen{margin-inline:auto}
  .screen-note{display:none}
  .motion .step{min-height:72vh;justify-content:flex-start;padding-block:28px 40px}
  .rules-list,.widgets,.omni-results.cols-3{grid-template-columns:1fr}
}
@media (max-width:759px){.boot-h{font-size:64px}.step h2{font-size:32px}}
@media (max-width:560px){
  :root{--appbar-h:96px}
  .appbar-in{height:auto;flex-wrap:wrap;gap:6px 16px;padding-top:10px;padding-bottom:6px}
  .apptabs{order:3;width:100%;flex:none}
  .apptabs a{padding:8px 10px}
  .boot-in{padding-block:32px 48px}
  .boot-h{font-size:48px}
  .boot-eyebrow{margin-bottom:22px}
  .boot-sub{font-size:16px;margin-top:26px}
  .omni-box button{padding:0 14px}
  .step h2{font-size:32px}
  .rules h2,.now h2{font-size:32px}
}
@media (max-width:339px){.boot-h{font-size:32px}}
@media (max-height:560px) and (max-width:860px){.motion .screen-col{position:static}}
@media (prefers-reduced-motion:reduce){.motion .step{transition:none}}