/* ============================================================
   KWONMO — emu.css
   웹 에뮬레이터(목록·플레이) 전용. 수치·색은 val.css 토큰만 쓴다.
   플레이 화면은 작업개요서 8장 목업(모바일 390×844, 데스크탑 1280×1000)을 옮긴 것이다.
   게임기 색(--emu-*)은 판을 따르지 않고, 게임기 바깥(데스크탑 배경·상단 버튼)만 판을 따른다.
   ============================================================ */

.emu-stage { max-width: var(--page-max); margin-inline: auto; padding: var(--sp-lg); }

.emu-bar {
  display: flex; align-items: flex-end; gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-sm); border-bottom: var(--rule-w) solid var(--rule-ink);
}
.emu-h1 { font-family: var(--ed-display); font-size: 1.6rem; color: var(--text); }

.emu-status { padding: var(--sp-xl); text-align: center; color: var(--text-dim); }
.emu-empty { padding: var(--sp-xl); text-align: center; color: var(--text-dim); }

/* ================= 목록 ================= */
.emu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-md); }
.emu-card {
  display: block; padding: var(--sp-md);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); text-decoration: none;
}
.emu-card:hover { border-color: var(--accent); }
/* 기종 테두리는 hover 에도 유지한다 — 강조색으로 바뀌면 기종 구분이 사라진다. 대신 바탕을 바꾼다 */
.emu-card[data-system="sfc"] { border-color: var(--emu-sys-sfc); }
.emu-card[data-system="nes"] { border-color: var(--emu-sys-nes); }
.emu-card[data-system="dos"] { border-color: var(--emu-sys-dos); }
.emu-card[data-system]:hover { background: var(--surface-2); }
.emu-card h2 { margin: var(--sp-sm) 0; font-family: var(--ed-display); font-size: 1.15rem; }
.emu-tag {
  display: inline-block; padding: .1rem .4rem; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-mid); font-size: .72rem;
}
.emu-card-when { font-size: .78rem; color: var(--text-dim); }

/* ================= 플레이 — 공통(모바일 기준) ================= */
.emu-console {
  /* 게임 화면 높이를 정할 때 빼는 나머지(상단바·베젤·컨트롤러·여백) 높이. 브레이크포인트마다 다시 준다.
     실측값에 반올림 여유를 더했다(393×700 에서 실측 27rem) — 넉넉하게 잡으면 실제 폰(주소창·하단 바만큼 화면이 낮다)에서 화면이 과하게 준다.
     컨트롤러 크기·여백을 바꾸면 다시 잰다 */
  --emu-chrome: 27.75rem;
  min-height: 100dvh;
  padding: calc(var(--sp-sm) + var(--safe-t)) var(--sp-md) calc(var(--sp-sm) + var(--safe-b));
  background: var(--emu-body);
  color: var(--emu-ink);
  /* 연타·길게 누르기에 글자 선택·확대 돋보기·문맥 메뉴가 끼어들지 않게 */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.emu-console[hidden], .emu-screen[hidden], .emu-console [hidden] { display: none !important; }

.emu-top, .emu-body { max-width: 30rem; margin-inline: auto; }

.emu-top {
  display: grid; grid-template-columns: 2.75rem 1fr auto auto auto; align-items: center; gap: var(--sp-sm);
  margin-bottom: .5rem;
}
.emu-top-btn {
  display: flex; align-items: center; justify-content: center; gap: .3em; height: 2.75rem; padding: 0 .9rem; white-space: nowrap;
  border: 0; border-radius: var(--radius-md);
  background: var(--emu-face); color: var(--emu-ink);
  font: inherit; font-size: .82rem; text-decoration: none; cursor: pointer;
}
.emu-back, #emuMenu, .emu-full, .emu-mute { padding: 0; font-size: 1.1rem; }
#emuMenu, .emu-full, .emu-mute { width: 2.75rem; }
.emu-mute[aria-pressed="false"] .ico-muted,
.emu-mute[aria-pressed="true"]  .ico-sound { display: none; }
.emu-full[aria-pressed="false"] .ico-compress,
.emu-full[aria-pressed="true"]  .ico-expand { display: none; }
.emu-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center; font-size: .95rem; font-weight: 600;
}
.emu-desk, .emu-key { display: none; }

/* ---------- 화면 ---------- */
.emu-bezel { padding: .6rem .6rem .35rem; border-radius: 1.125rem; background: var(--emu-bezel); }
.emu-bezel .emu-status { padding: var(--sp-xl) var(--sp-md); color: var(--emu-bezel-ink); }
.emu-screen {
  width: min(100%, calc((100dvh - var(--emu-chrome)) * 8 / 7));
  aspect-ratio: 8 / 7;
  margin-inline: auto;
  border-radius: .375rem; overflow: hidden;
  background: var(--emu-screen);
}
#emuPlayer { width: 100%; height: 100%; }
/* EmulatorJS 가 터치로 시작하면 자기 가상패드를 띄운다. 이 화면은 아래 컨트롤러가 그 역할을 한다 */
#emuPlayer .ejs_virtualGamepad_parent { display: none !important; }
#emuPlayer canvas { image-rendering: pixelated; }
/* js-dos 는 iframe 안에 뜬다(스타일 격리 — emu-play.js loadDosFrame) */
.emu-dos-frame { display: block; width: 100%; height: 100%; border: 0; }

.emu-line {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .25rem 0;
  font-family: "JetBrains Mono", monospace; font-size: .7rem; font-weight: 500; color: var(--emu-bezel-ink);
}
.emu-led { width: .45rem; height: .45rem; border-radius: 50%; background: var(--emu-led); }

/* ---------- 컨트롤러 ---------- */
.emu-pad { margin-top: .75rem; touch-action: none; }

.emu-gamepad {
  display: grid; grid-template-columns: 1fr 1fr; row-gap: .9rem;
  grid-template-areas: "sh sh" "dpad abxy" "sys sys";
  align-items: center;
}

.emu-b {
  border: 0; padding: 0; font: inherit; cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-weight: 700;
  transition: transform .06s, filter .06s;
}
.emu-b.is-down { transform: scale(.94); filter: brightness(.82); }

.emu-shoulder { grid-area: sh; display: flex; justify-content: space-between; }
.emu-lr {
  width: 7.25rem; height: 2.75rem; border-radius: 1.375rem;
  background: var(--emu-lr); color: var(--emu-ink); font-size: .95rem;
}

.emu-dpad { grid-area: dpad; position: relative; width: 8.25rem; height: 8.25rem; cursor: pointer; }
.emu-arm { position: absolute; border-radius: .625rem; background: var(--emu-dpad); }
.emu-arm-v { left: 33.34%; width: 33.33%; top: 0; height: 100%; }
.emu-arm-h { top: 33.34%; height: 33.33%; left: 0; width: 100%; }
/* 삼각형은 테두리로 그린다. 눌린 방향만 밝힌다 */
.emu-tri { position: absolute; width: 0; height: 0; border: .48rem solid transparent; }
.emu-tri.up    { top: 1rem;    left: calc(50% - .48rem); border-bottom: .72rem solid var(--emu-dpad-ink); border-top: 0; }
.emu-tri.down  { bottom: 1rem; left: calc(50% - .48rem); border-top: .72rem solid var(--emu-dpad-ink); border-bottom: 0; }
.emu-tri.left  { left: 1rem;   top: calc(50% - .48rem);  border-right: .72rem solid var(--emu-dpad-ink); border-left: 0; }
.emu-tri.right { right: 1rem;  top: calc(50% - .48rem);  border-left: .72rem solid var(--emu-dpad-ink); border-right: 0; }
.emu-tri.is-down { filter: brightness(1.6); }
.emu-dpad.is-down .emu-arm { filter: brightness(.85); }

/* X 위 · Y 왼쪽 · A 오른쪽 · B 아래 */
.emu-abxy { grid-area: abxy; justify-self: end; position: relative; width: 9.5rem; height: 9.5rem; }
.emu-abxy .emu-b {
  position: absolute; width: 3.125rem; height: 3.125rem; border-radius: 50%;
  color: var(--emu-btn-ink); font-size: 1.05rem;
}
.emu-xy { background: var(--emu-xy); }
.emu-ab { background: var(--emu-ab); }
.emu-abxy .x { top: 0;    left: calc(50% - 1.5625rem); }
.emu-abxy .b { bottom: 0; left: calc(50% - 1.5625rem); }
.emu-abxy .y { left: 0;   top: calc(50% - 1.5625rem); }
.emu-abxy .a { right: 0;  top: calc(50% - 1.5625rem); }

.emu-sys { grid-area: sys; display: flex; justify-content: center; gap: 1.25rem; }
.emu-ss {
  width: 5.5rem; height: 2.75rem; border-radius: 1.375rem;
  background: var(--emu-ss); color: var(--emu-ss-ink); font-size: .75rem; letter-spacing: .06em;
}

.emu-quick {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: .5rem; border-top: var(--hairline) solid var(--emu-line);
}
.emu-quick button {
  height: 2.75rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 500; color: var(--emu-ink-sub);
}
.emu-quick button[aria-pressed="true"] { color: var(--emu-ab); font-weight: 700; }

/* ---------- 컨트롤러 탭(DOS 만) ---------- */
.emu-tabs:not([hidden]) {
  display: grid; grid-template-columns: repeat(3, 1fr) auto auto; gap: .25rem;
  margin-bottom: .75rem; padding: .25rem; border-radius: var(--radius-md); background: var(--emu-face);
}
.emu-tabs button {
  height: 2rem; border: 0; border-radius: .5625rem; background: none; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 500; color: var(--emu-ink-sub);
}
.emu-tabs button[aria-pressed="true"] { background: var(--emu-bezel); color: var(--emu-body); font-weight: 600; }
.emu-tabs .emu-tab-act { padding: 0 .55rem; font-size: .72rem; color: var(--emu-ink); background: var(--emu-body); }

/* ---------- 화면 키보드(DOS) — 모든 줄 11칸 ---------- */
.emu-kbd { display: grid; row-gap: .3rem; }
.emu-kbd-row { display: grid; grid-template-columns: repeat(11, 1fr); gap: .3rem; }
.emu-kbd-row button, .emu-simple button {
  height: 2.6rem; padding: 0; min-width: 0;
  border: var(--hairline) solid var(--emu-key-line); border-radius: .375rem;
  background: var(--emu-key); color: var(--emu-ink); cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: .82rem; font-weight: 600;
  touch-action: none;
}
.emu-kbd-f button { height: 2.1rem; font-size: .66rem; }
.emu-kbd-row .fn { background: var(--emu-face); font-size: .66rem; }
.emu-kbd-row .arr, .emu-simple .arr { background: var(--emu-dpad); border-color: var(--emu-dpad); color: var(--emu-dpad-ink); }
.emu-kbd-row .w2 { grid-column: span 2; }
.emu-kbd-row .w6 { grid-column: span 6; }
.emu-kbd-row button.is-down, .emu-simple button.is-down { filter: brightness(.82); }

/* ---------- 간편 키(DOS) — 왼쪽 Esc·Space·Enter(대각선), 오른쪽 커서 이동키(조이패드처럼 마름모). 모두 동그란 키 ---------- */
.emu-simple:not([hidden]) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center;
  padding-top: .5rem;
}
/* 세 키를 대각선(왼쪽 위 → 가운데 → 오른쪽 아래)으로 — 붙어 있으면 엄지로 옆 키를 같이 누르기 쉽다 */
.emu-simple-l {
  display: flex; flex-direction: column; row-gap: .35rem; min-width: 0;
  /* 넓은 화면에서 끝·끝으로 벌어지면 대각선이 가로줄처럼 보여 폭을 묶고 칸 가운데에 둔다 */
  width: 100%; max-width: 10rem; justify-self: center;
}
.emu-simple-l button { width: 3.25rem; height: 3.25rem; border-radius: 50%; font-size: .7rem; }
.emu-simple-l .fn { background: var(--emu-face); }
/* 칸을 나누지 않고 왼쪽 영역 폭 안에서 끝·가운데·끝으로 — 좁은 폰에서는 대각선 간격이 저절로 좁아진다 */
.emu-simple-l .esc   { align-self: flex-start; }
.emu-simple-l .space { align-self: center; }
.emu-simple-l .enter { align-self: flex-end; }
.emu-simple-r {
  display: grid; gap: .15rem;
  grid-template-columns: repeat(3, 3.25rem); grid-template-rows: repeat(3, 3.25rem);
}
.emu-simple-r button { height: auto; border-radius: 50%; font-size: 1.1rem; }
.emu-simple-r .up    { grid-column: 2; grid-row: 1; }
.emu-simple-r .left  { grid-column: 1; grid-row: 2; }
.emu-simple-r .right { grid-column: 3; grid-row: 2; }
.emu-simple-r .down  { grid-column: 2; grid-row: 3; }
.emu-kbd-note { margin-top: .4rem; text-align: center; font-size: .72rem; color: var(--emu-ink-sub); }

.emu-note { margin-left: auto; }
.emu-note.is-error { color: var(--emu-ab); }

/* ---------- DOS: 4:3 화면. 퀵세이브·퀵로드는 모바일은 탭 줄, 데스크톱은 상단바(DOSBox-X 스테이트 저장). 빨리감기는 없다 ---------- */
.emu-console[data-system="dos"] {
  /* 탭·키보드가 게임패드보다 높아 나머지 높이가 다르다(393×700 실측에 반올림 여유) */
  --emu-chrome: 29rem;
}
.emu-console[data-system="dos"] .emu-screen {
  aspect-ratio: 4 / 3;
  width: min(100%, calc((100dvh - var(--emu-chrome)) * 4 / 3));
}
.emu-console[data-system="dos"] [data-act="ff"],
.emu-console[data-system="dos"] .emu-quick,
.emu-console[data-system="dos"] .emu-key { display: none !important; }

/* ---------- 모바일·태블릿: 사이트 헤더와 FAB 를 숨기고 이 화면 상단바가 대신한다 ---------- */
@media (max-width: 80em) {
  [data-layout="console"] .masthead,
  [data-layout="console"] .fab { display: none; }
}

/* ================= 플레이 — 데스크톱 ================= */
@media (min-width: 80.0625em) {
  .emu-console {
    --emu-chrome: 24rem;
    min-height: 0; padding: var(--sp-lg);
    background: none; color: var(--text);
  }
  .emu-console.is-padless { --emu-chrome: 12rem; }

  .emu-top, .emu-body { max-width: 47.5rem; }
  .emu-top { display: flex; gap: var(--sp-sm); margin-bottom: var(--sp-md); }
  .emu-title { flex: 1; text-align: left; font-size: 1rem; }
  .emu-top-btn {
    border: var(--hairline) solid var(--line);
    background: var(--surface); color: var(--text);
  }
  .emu-top-btn:hover { border-color: var(--accent); color: var(--accent); }
  .emu-top-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
  .emu-back { padding: 0 .9rem; font-size: .88rem; }
  .emu-desk { display: inline; }
  .emu-top-btn.emu-desk { display: flex; }
  .emu-mob { display: none; }

  .emu-body { padding: 1.25rem 4.875rem 1.5rem; border-radius: 1.75rem; background: var(--emu-body); color: var(--emu-ink); }
  .emu-screen { width: min(100%, calc((100dvh - var(--header-total) - var(--emu-chrome)) * 8 / 7)); }
  .emu-console[data-system="dos"] { --emu-chrome: 33.75rem; }   /* 1300×880 실측 33.4rem + 여유 */
  .emu-console[data-system="dos"].is-padless { --emu-chrome: 12rem; }
  .emu-console[data-system="dos"] .emu-screen { width: min(100%, calc((100dvh - var(--header-total) - var(--emu-chrome)) * 4 / 3)); }
  .emu-kbd-note.emu-desk { display: block; }
  .emu-kbd-row button { height: 2.4rem; }
  .emu-kbd-f button { height: 2rem; }

  /* 간편 키 — 넓은 본체에서는 왼쪽 대각선을 왼쪽 끝에서 시작하고(오른쪽 방향키와 좌우 대칭),
     키와 간격을 키워 작아 보이지 않게 한다 */
  .emu-simple-l { justify-self: start; max-width: 12rem; row-gap: .5rem; }
  .emu-simple-l button { width: 3.75rem; height: 3.75rem; font-size: .78rem; }
  .emu-simple-r { gap: .35rem; grid-template-columns: repeat(3, 3.75rem); grid-template-rows: repeat(3, 3.75rem); }
  .emu-simple-r button { font-size: 1.25rem; }

  .emu-pad { margin-top: 1.5rem; }
  .emu-console.is-padless .emu-pad { display: none; }

  .emu-gamepad {
    grid-template-columns: 1fr auto 1fr; column-gap: var(--sp-lg); row-gap: 1rem;
    grid-template-areas: "dpad sh abxy" "dpad sys abxy";
  }
  .emu-shoulder { justify-content: center; gap: 1rem; align-self: end; }
  .emu-sys { gap: 1rem; align-self: start; }
  .emu-lr { width: 6.25rem; height: 2.5rem; font-size: .88rem; }
  .emu-ss { width: 6.25rem; height: 2.25rem; font-size: .7rem; }
  .emu-key { display: inline; margin-left: .6em; font-weight: 500; opacity: .7; }

  .emu-dpad { width: 7.5rem; height: 7.5rem; }
  .emu-tri.up { top: .8rem; } .emu-tri.down { bottom: .8rem; } .emu-tri.left { left: .8rem; } .emu-tri.right { right: .8rem; }

  .emu-abxy { width: 8.25rem; height: 8.25rem; }
  .emu-abxy .emu-b { width: 2.75rem; height: 2.75rem; font-size: .95rem; }
  .emu-abxy .x, .emu-abxy .b { left: calc(50% - 1.375rem); }
  .emu-abxy .y, .emu-abxy .a { top: calc(50% - 1.375rem); }
  .emu-abxy-keys {
    display: block; position: absolute; top: calc(100% + .4rem); left: 50%; transform: translateX(-50%);
    white-space: nowrap; margin: 0; font-size: .68rem; color: var(--emu-ink-sub);
  }
}