/* 마이컴 CD96 — HTML5 재현. 640×480 논리 스테이지 + Win3.1 룩 */
:root {
  --win-face: #c0c0c0; --win-light: #ffffff; --win-dark: #808080; --win-black: #000000;
  --win-title: #000080; --win-title-text: #ffffff; --win-text: #000000;
  --stage-w: 640px; --stage-h: 480px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #3a3a3a; color: #000; font-family: "Gulim","굴림체","굴림","Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
#viewport { position: absolute; left: 0; right: 0; top: 0; bottom: 28px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: var(--stage-w); height: var(--stage-h); background: #000; overflow: hidden; transform-origin: center center; box-shadow: 0 0 40px #000; }
#stage img { image-rendering: pixelated; image-rendering: crisp-edges; }
.layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hidden { display: none !important; }

/* bottom bar (modern conveniences only) */
#bar { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: #1e1e1e; color: #ddd; font: 12px/28px system-ui, sans-serif; padding: 0 10px; display: flex; gap: 14px; align-items: center; }
#bar-title { font-weight: bold; color: #fff; }
#bar-nav a { color: #9cf; text-decoration: none; margin-right: 10px; }
#bar-nav a:hover { text-decoration: underline; }
#bar-tools { margin-left: auto; display: flex; gap: 6px; }
#bar button { background: #333; color: #eee; border: 1px solid #555; height: 20px; font-size: 11px; cursor: pointer; }

/* full-screen SHG screen with hotspots */
#screen { background: #000; }
.shg { position: absolute; }
.shg > img { position: absolute; left: 0; top: 0; display: block; }
.hot { position: absolute; cursor: pointer; }
.hot.debug { outline: 1px dashed rgba(255,0,0,.6); background: rgba(255,255,0,.15); }
.hot:focus { outline: 1px dotted #000; }

/* generic Viewer window (main / list) */
.window { background: var(--win-face); }
.win-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid var(--win-black); display: flex; flex-direction: column; overflow: hidden; }
.win-title { height: 18px; background: var(--win-title); color: var(--win-title-text); font: bold 12px/18px "Gulim","굴림체",sans-serif; padding: 0 4px 0 22px; position: relative; flex: none; white-space: nowrap; overflow: hidden; }
.win-title .sysmenu { position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: var(--win-face); border: 1px solid #000; }
.win-title .sysmenu::after { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 3px; background: #fff; border: 1px solid #000; }
.win-title .caption { }
.win-toolbar { flex: none; position: relative; overflow: hidden; background: var(--win-face); }
.win-toolbar img { display: block; }
.win-body { flex: 1 1 auto; position: relative; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.topic-head { flex: none; overflow: hidden; border-bottom: 1px solid #000; }
.topic-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.topic-body, .topic-head { padding: 2px 6px 6px 4px; }
/* Win3.1-style scrollbar */
.topic-body::-webkit-scrollbar, .list-body::-webkit-scrollbar { width: 16px; }
.topic-body::-webkit-scrollbar-track, .list-body::-webkit-scrollbar-track { background: repeating-conic-gradient(#c0c0c0 0 25%, #fff 0 50%) 0 0/2px 2px; }
.topic-body::-webkit-scrollbar-thumb, .list-body::-webkit-scrollbar-thumb { background: #c0c0c0; border: 1px solid #000; box-shadow: inset 1px 1px #fff, inset -1px -1px #808080; }
.topic-body::-webkit-scrollbar-button, .list-body::-webkit-scrollbar-button { display: block; height: 16px; background: #c0c0c0; border: 1px solid #000; box-shadow: inset 1px 1px #fff, inset -1px -1px #808080; }
.topic-body::-webkit-scrollbar-button:vertical:decrement { background-image: linear-gradient(45deg, transparent 45%, #000 45%, #000 55%, transparent 55%); }

/* topic paragraphs */
.p { position: relative; min-height: 1em; word-break: break-all; white-space: pre-wrap; }
.p.al-c { text-align: center; }
.p.al-r { text-align: right; }
.p img { vertical-align: bottom; max-width: 100%; }
.p img.fl { float: left; margin: 0 6px 2px 0; }
.p img.fr { float: right; margin: 0 0 2px 6px; }
.p .tab { display: inline-block; width: 24px; }
.act { cursor: pointer; }
.act.vis { color: #008000; text-decoration: underline; }
.act.vis.act-popup { text-decoration: underline dotted; }
img.act:hover { filter: brightness(1.08); }
.p .snd { display: none; }
.clearfix::after { content: ""; display: block; clear: both; }
table.tbl { border-collapse: collapse; table-layout: fixed; }
table.tbl td { vertical-align: top; padding: 0 2px; }
.box { border: 1px solid #000; }

/* list window (year / sub) */
#win-list .win-body { background: #ffffe8; }
.list-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 2px 2px 4px 2px; }
.list-body .p { white-space: normal; }
.list-body .p .act { text-decoration: none; color: #000; }
.list-body .p .act:hover { background: #000080; color: #fff; }
.list-body .p.cur .act { background: #000080; color: #fff; }

/* popup */
#popup-layer { background: transparent; }
.popup { position: absolute; background: #fff; border: 1px solid #000; box-shadow: 3px 3px 0 #000; padding: 4px 6px; max-width: 420px; max-height: 300px; overflow: auto; font-size: 12px; }
.popup .p { white-space: pre-wrap; }
.popup.list-popup { background: #ffffe8; }
.popup .p .act { text-decoration: none; color: #000; }
.popup .p .act:hover { background: #000080; color: #fff; }

/* dialogs (Win3.1) */
#dialog-layer { background: rgba(0,0,0,.0); }
.dlg { position: absolute; background: var(--win-face); border: 1px solid #000; box-shadow: 1px 1px 0 #000, inset 1px 1px #fff, inset -1px -1px #808080; font: 12px "Gulim","굴림체",sans-serif; }
.dlg .win-title { margin: 1px; }
.dlg .dlg-body { padding: 8px; }
.dlg .close-x { position: absolute; right: 2px; top: 1px; width: 16px; height: 16px; background: var(--win-face); border: 1px solid #000; color: #000; font: bold 11px/14px sans-serif; text-align: center; cursor: pointer; }
.btn { display: inline-block; min-width: 64px; height: 23px; line-height: 21px; padding: 0 8px; background: var(--win-face); color: #000; text-align: center; border: 1px solid #000; box-shadow: inset 1px 1px #fff, inset -1px -1px #808080; cursor: pointer; font: 12px "Gulim","굴림체",sans-serif; }
.btn:active { box-shadow: inset 1px 1px #808080; }
.btn.default { box-shadow: 0 0 0 1px #000, inset 1px 1px #fff, inset -1px -1px #808080; }
.field { background: #fff; border: 1px solid #000; box-shadow: inset 1px 1px #808080; padding: 2px 3px; font: 12px "Gulim","굴림체",sans-serif; }
input.field, select.field { height: 21px; }
.group { border: 1px solid #808080; box-shadow: 1px 1px #fff, inset 1px 1px #fff; padding: 10px 8px 6px; margin: 4px 0; position: relative; }
.group > legend, .group > .legend { position: absolute; top: -8px; left: 8px; background: var(--win-face); padding: 0 3px; }
.listbox { background: #fff; border: 1px solid #000; box-shadow: inset 1px 1px #808080; overflow-y: auto; font: 12px "Gulim","굴림체",sans-serif; }
.listbox div { padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.listbox div.sel, .listbox div:hover { background: #000080; color: #fff; }

/* video screen */
.video-screen { background: #000; width: 100%; height: 100%; position: relative; }
.video-screen video { position: absolute; left: 160px; top: 90px; width: 320px; height: 240px; background: #000; }

/* toast / messages */
#toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); background: #ffffe1; border: 1px solid #000; padding: 4px 10px; font-size: 12px; z-index: 50; }
.exit-screen { position: absolute; inset: 0; background: #000; color: #ccc; font-size: 13px; line-height: 1.7; padding: 40px 60px; text-align: center; }
.exit-screen h1 { color: #fff; font-size: 20px; margin: 0 0 12px; }
.exit-screen a { color: #9cf; }

/* search highlight */
mark { background: #ffff00; color: #000; padding: 0; }
.dlg label { user-select: none; }
.dlg input[type=radio], .dlg input[type=checkbox] { vertical-align: -2px; margin: 0 3px 0 0; }

/* ---------- Delphi form look (부속 프로그램) ---------- */
#win-app { background: transparent; }
.dform { position: absolute; background: var(--win-face); border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0,0,0,.6), inset 1px 1px #fff, inset -1px -1px #808080; font: 12px "Gulim","굴림체",sans-serif; }
.dform .win-title { margin: 1px 1px 0; }
.dclient { position: relative; overflow: hidden; margin: 0 1px 1px; background: var(--win-face); }
.tpanel { background: var(--win-face); box-shadow: inset 1px 1px #fff, inset -1px -1px #808080; overflow: hidden; }
.tpanel.single { border: 1px solid #000; }
.tpanel-in { position: absolute; left: 1px; top: 1px; right: 1px; bottom: 1px; overflow: hidden; }
.dbtn { position: absolute; padding: 0; margin: 0; background: var(--win-face); border: 1px solid #000; box-shadow: inset 1px 1px #fff, inset -2px -2px #808080; cursor: pointer; font: 12px "Gulim","굴림체",sans-serif; color: #000; display: inline-flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; }
.dbtn:active { box-shadow: inset 1px 1px #808080; }
.dbtn .glyph { display: inline-block; overflow: hidden; position: relative; }
.dbtn .glyph img { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.dlabel { color: #000; }
.dbevel { border: 1px solid #808080; box-shadow: 1px 1px #fff, inset 1px 1px #fff; }
.dimage img { display: block; }
.dedit { background: #fff; border: 1px solid #000; box-shadow: inset 1px 1px #808080; padding: 1px 3px; font: 12px "Gulim","굴림체",sans-serif; outline: none; }
.dmemo { background: #fff; border: 1px solid #000; box-shadow: inset 1px 1px #808080; padding: 2px 4px; overflow: auto; white-space: pre-wrap; word-break: break-all; line-height: 1.45; }
.dgrid { background: #fff; border: 1px solid #000; overflow: auto; }
.dgrid-t { border-collapse: collapse; width: 100%; font: 12px "Gulim","굴림체",sans-serif; table-layout: fixed; }
.dgrid-t th { background: var(--win-face); border: 1px solid #808080; border-top-color: #fff; border-left-color: #fff; text-align: left; padding: 0 3px; font-weight: bold; position: sticky; top: 0; white-space: nowrap; }
.dgrid-t td { border-right: 1px solid #c0c0c0; border-bottom: 1px solid #c0c0c0; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.dgrid-t tr.sel td { background: #000080; color: #fff; }
.dlist { background: #fff; border: 1px solid #000; box-shadow: inset 1px 1px #808080; overflow: auto; }
.dlist > div { padding: 0 3px; white-space: nowrap; }
.dlist > div.sel { background: #000080; color: #fff; }
.tnode { white-space: nowrap; line-height: 16px; }
.tnode .ttog { display: inline-block; width: 12px; height: 12px; border: 1px solid #808080; text-align: center; line-height: 10px; font-size: 10px; margin-right: 3px; cursor: pointer; background: #fff; }
.tnode .tlab { cursor: default; padding: 0 2px; }
.tnode .tlab.sel { background: #000080; color: #fff; }
.tnode .tlab:hover { background: #d0d0ff; }
.dheader { background: var(--win-face); border: 1px solid #808080; display: flex; align-items: center; padding: 0 6px; }
.dstatus { padding: 0 4px; line-height: 18px; white-space: nowrap; overflow: hidden; }
.dstatus a { color: #000080; }
.dterminal { background: #000; color: #c0c0c0; font: 12px/15px "Courier New",monospace; padding: 4px 6px; white-space: pre-wrap; overflow: auto; }
.dlight { background: #400; border-radius: 50%; border: 1px solid #000; }
.dlight.on { background: #ff0; box-shadow: 0 0 4px #ff0; }
.dled { background: #000; color: #0f0; font: bold 12px/18px "Courier New",monospace; text-align: center; border: 1px solid #808080; }
.dmedia { display: flex; gap: 1px; }
.dmedia .dbtn { position: static; }
.dmenubar { height: 20px; background: var(--win-face); border-bottom: 1px solid #808080; display: flex; gap: 2px; padding: 0 4px; position: relative; font: 12px/20px "Gulim","굴림체",sans-serif; margin: 0 1px; }
.dmenu { padding: 0 6px; cursor: default; }
.dmenu:hover { background: #000080; color: #fff; }
.dmenudd { position: absolute; top: 20px; background: var(--win-face); border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0,0,0,.5); min-width: 150px; z-index: 20; }
.dmi { display: flex; justify-content: space-between; gap: 20px; padding: 0 8px; line-height: 18px; cursor: default; }
.dmi:hover { background: #000080; color: #fff; }
.dmi .sc { color: #808080; } .dmi:hover .sc { color: #fff; }
.dsep { border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 2px 0; }
.dpage { position: absolute; }

/* ---------- retro bitmap font option (Neo둥근모, SIL OFL) ---------- */
@font-face { font-family: "NeoDunggeunmo"; src: url("../fonts/neodgm.woff2") format("woff2"), url("../fonts/neodgm.ttf") format("truetype"); font-display: swap; }
body.retro-font #stage, body.retro-font #stage [class*="-f"], body.retro-font .dform, body.retro-font .dlg, body.retro-font .win-title, body.retro-font .dbtn, body.retro-font .dedit, body.retro-font .dmemo, body.retro-font .dgrid-t, body.retro-font .listbox, body.retro-font .btn, body.retro-font .field { font-family: "NeoDunggeunmo", "Gulim", "굴림체", sans-serif !important; }
body.retro-font #stage [class*="-f"] { -webkit-font-smoothing: none; }

/* ---------- print: main window content only ---------- */
@media print {
  body { background: #fff; }
  #bar, #screen, #win-list, #popup-layer, #dialog-layer, #win-app, .win-title, .win-toolbar { display: none !important; }
  #viewport { position: static; display: block; }
  #stage { transform: none !important; width: auto; height: auto; box-shadow: none; overflow: visible; background: #fff; }
  #win-main { position: static !important; width: auto !important; height: auto !important; }
  .win-frame { position: static; border: 0; display: block; }
  .win-body { display: block; overflow: visible; }
  .topic-body { overflow: visible; height: auto; }
  .topic-head { background: #fff !important; }
}