/* 감군장 98: 윈도우 9x 셸 스타일 (창, 버튼, 메뉴, 작업 표시줄, 부팅) */

@font-face { font-family: 'Galmuri14'; src: url('/fonts/Galmuri14.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Galmuri11'; src: url('/fonts/Galmuri11.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Galmuri11'; font-weight: 700; src: url('/fonts/Galmuri11-Bold.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'GalmuriMono11'; src: url('/fonts/GalmuriMono11.woff2') format('woff2'); font-display: swap; }

:root {
  --face: #c0c0c0;
  --hi: #ffffff;
  --lite: #dfdfdf;
  --lo: #808080;
  --dk: #0a0a0a;
  --ink: #000000;
  --paper: #ffffff;
  --desktop: #008080;
  --gam: #ef3e4d;
  --title-a: #a8101f;
  --title-b: #ef3e4d;
  --select: #a8101f;
  --select-ink: #ffffff;
  --link: #0000c8;
  --bar-h: 34px;
  --font: 'Galmuri14', 'Malgun Gothic', sans-serif;
  --font-small: 'Galmuri11', 'Malgun Gothic', sans-serif;
  --out: inset -1px -1px var(--dk), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--lite);
  --in: inset -1px -1px var(--hi), inset 1px 1px var(--lo), inset -2px -2px var(--lite), inset 2px 2px var(--dk);
  --out-thin: inset -1px -1px var(--lo), inset 1px 1px var(--hi);
  --in-thin: inset -1px -1px var(--hi), inset 1px 1px var(--lo);
  --cur-arrow: url('/assets/cursors/arrow.png') 0 0, default;
  --cur-hand: url('/assets/cursors/hand.png') 10 0, pointer;
}
:root[data-scheme='std'] { --title-a: #000080; --title-b: #1084d0; --select: #000080; }
:root[data-scheme='night'] { --title-a: #1a1f4d; --title-b: #d9622b; --select: #1a1f4d; }
:root[data-scheme='gold'] { --title-a: #5c3420; --title-b: #c98a4b; --select: #5c3420; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
html { background: #000; cursor: var(--cur-arrow); -webkit-text-size-adjust: 100%; }
body {
  font: 15px/1.45 var(--font);
  color: var(--ink);
  background: var(--desktop);
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
img.px, canvas, .px { image-rendering: pixelated; }
img { display: block; }
p { margin: 0; }
h2, h3, h4 { margin: 0; font-size: inherit; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
button { cursor: var(--cur-arrow); }
a { color: var(--link); cursor: var(--cur-hand); }
b, strong { font-family: var(--font-small); font-weight: 700; }
[hidden] { display: none !important; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.grow { flex: 1; }
.center { text-align: center; }
.hint { color: #404040; font-family: var(--font-small); font-size: 12px; }
.noscript { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: #000; color: #fff; }

/* 공통 베벨 */
.raised-box { background: var(--face); box-shadow: var(--out); padding: 2px; }
.sunken { box-shadow: var(--in); background: var(--paper); padding: 2px; }

/* 스크롤바 */
* { scrollbar-color: var(--face) #e8e8e8; }
::-webkit-scrollbar { width: 17px; height: 17px; }
::-webkit-scrollbar-track { background: repeating-conic-gradient(#fff 0 25%, #c0c0c0 0 50%) 0 0 / 2px 2px; }
::-webkit-scrollbar-thumb { background: var(--face); box-shadow: var(--out); }
::-webkit-scrollbar-button:single-button { display: block; width: 17px; height: 17px; background-color: var(--face); background-repeat: no-repeat; background-position: center; box-shadow: var(--out); }
::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1h1v1h1v1h1v1H0V3h1V2h1V1h1z'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v7H3V6H2V5H1V4H0V3h1V2h1V1h1z'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1H3v1H2v1H1v1H0z'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-corner { background: var(--face); }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 27px; padding: 3px 14px;
  background: var(--face); color: var(--ink); border: 0;
  box-shadow: var(--out); text-decoration: none; white-space: nowrap;
}
.btn:active:not(:disabled), .btn.pressed {
  box-shadow: var(--in);
  padding: 4px 13px 2px 15px;
}
.btn.pressed:not(:active) { background: repeating-conic-gradient(#fff 0 25%, #c0c0c0 0 50%) 0 0 / 2px 2px; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn.default { box-shadow: 0 0 0 1px #000, var(--out); }
.btn:disabled { color: var(--lo); text-shadow: 1px 1px 0 var(--hi); }
.btn.small { min-height: 23px; padding: 1px 8px; font-family: var(--font-small); font-size: 12px; }
.btn.small:active:not(:disabled), .btn.small.pressed { padding: 2px 7px 0 9px; }
a.btn { cursor: var(--cur-hand); }

/* 입력 요소 */
.field {
  width: 100%; min-height: 27px; padding: 3px 6px;
  background: var(--paper); color: var(--ink); border: 0; box-shadow: var(--in);
  user-select: text; -webkit-user-select: text; cursor: text;
}
select.field {
  appearance: none; -webkit-appearance: none; padding-right: 24px; cursor: var(--cur-arrow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='21' shape-rendering='crispEdges'%3E%3Crect width='19' height='21' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h18v1H1v19H0z' fill='%23fff'/%3E%3Cpath d='M18 0h1v21H0v-1h18z' fill='%23000'/%3E%3Cpath d='M1 19h17v1H1zM17 1h1v19h-1z' fill='%23808080'/%3E%3Cpath d='M6 8h7v1h-1v1h-1v1h-1v1H9v-1H8v-1H7V9H6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 3px center;
}
textarea.field { resize: vertical; line-height: 1.5; }
.field:focus { outline: none; }
input[type='checkbox'] {
  appearance: none; -webkit-appearance: none; width: 15px; height: 15px; margin: 0; flex: none;
  background: var(--paper); box-shadow: var(--in);
}
input[type='checkbox']:checked {
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v3H6v1H5v1H4v1H3v1H2V6H1V5H0V2h1v1h1v1h1V3h1V2h1V1h1z'/%3E%3C/svg%3E") no-repeat center;
}
input[type='checkbox']:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }
.check { display: inline-flex; align-items: center; gap: 6px; }
.range {
  appearance: none; -webkit-appearance: none; width: 100%; height: 21px; margin: 0; background: transparent;
}
.range::-webkit-slider-runnable-track { height: 4px; background: var(--paper); box-shadow: var(--in-thin); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 21px; margin-top: -8.5px; background: var(--face); box-shadow: var(--out); }
.range::-moz-range-track { height: 4px; background: var(--paper); box-shadow: var(--in-thin); }
.range::-moz-range-thumb { width: 11px; height: 21px; border: 0; border-radius: 0; background: var(--face); box-shadow: var(--out); }

.form-grid { display: grid; grid-template-columns: max-content 1fr; gap: 8px 10px; align-items: center; }
.form-label { white-space: nowrap; }
.span-all { grid-column: 1 / -1; }

fieldset.group { border: 0; box-shadow: var(--in-thin), inset -2px -2px var(--lo), inset 2px 2px var(--hi); margin: 10px 0 0; padding: 12px; }
fieldset.group legend { padding: 0 4px; margin-left: 2px; background: var(--face); position: relative; top: 8px; }

/* 화면 구조 */
#screen { position: fixed; inset: 0; overflow: hidden; }
#wallpaper { position: absolute; inset: 0; background-color: var(--desktop); }
#wallpaper[data-wp='hi'] { background-image: url('/assets/img/wallpaper-hi.png'); background-repeat: no-repeat; background-position: center calc(50% - 16px); background-size: 384px 384px; image-rendering: pixelated; }
/* 그림은 잘리지 않게 작업 표시줄 위 영역에 맞추고, 남는 곳은 검은 레터박스 */
#wallpaper[data-wp='sea'], #wallpaper[data-wp='fireworks'] { bottom: var(--bar-h); background: #000 center / contain no-repeat; image-rendering: pixelated; }
#wallpaper[data-wp='sea'] { background-image: url('/assets/img/banner-px.png'); }
#wallpaper[data-wp='fireworks'] { background-image: url('/assets/video/fireworks-poster.webp'); }
#wallpaper[data-wp='tile'] { background-image: url('/assets/img/wallpaper-tile.png'); background-size: 96px 96px; image-rendering: pixelated; }
.wall-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
#watermark { position: absolute; right: 10px; bottom: calc(var(--bar-h) + 8px); color: #ffffff; opacity: .8; text-align: right; font: 12px/1.35 var(--font-small); }

#icons {
  position: absolute; left: 0; top: 0; bottom: var(--bar-h); right: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 96px; grid-template-rows: repeat(auto-fill, 94px);
  padding: 8px 4px; gap: 0; overflow: hidden;
}
.dicon {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 96px; height: 94px; padding: 4px 2px; background: none; border: 0;
  color: #fff; text-decoration: none; cursor: var(--cur-hand);
}
.dicon-img { position: relative; width: 48px; height: 48px; display: block; }
.dicon-img > img:first-child { width: 48px; height: 48px; }
.dicon-arrow { position: absolute; left: 0; bottom: 0; width: 22px; height: 22px; }
.dicon-label { padding: 0 3px; max-width: 92px; text-align: center; line-height: 1.2; font-size: 15px; word-break: keep-all; overflow-wrap: anywhere; }
#wallpaper:not([data-wp='hi']):not([data-wp='teal']) ~ #icons .dicon-label { text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }
#wallpaper:not([data-wp='hi']):not([data-wp='teal']) ~ #watermark { text-shadow: 1px 1px 0 #000; }
.dicon:hover .dicon-label { background: rgba(0, 0, 0, .35); }
.dicon:focus-visible { outline: none; }
.dicon:focus-visible .dicon-label, .dicon:active .dicon-label { background: var(--select); color: var(--select-ink); outline: 1px dotted #ffe; outline-offset: -1px; }
.dicon:active .dicon-img > img:first-child { filter: brightness(.65) sepia(1) hue-rotate(310deg) saturate(3); }

#windows { position: absolute; left: 0; top: 0; right: 0; bottom: var(--bar-h); pointer-events: none; overflow: hidden; }

/* 창 */
.win {
  position: absolute; display: flex; flex-direction: column;
  background: var(--face); box-shadow: var(--out); padding: 3px; pointer-events: auto;
}
.win.maximized { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.titlebar {
  flex: none; display: flex; align-items: center; gap: 4px; height: 24px; padding: 1px 2px 1px 3px;
  background: linear-gradient(90deg, #808080, #b5b5b5); color: #dcdcdc;
  font: 700 12px/1 var(--font-small); touch-action: none;
}
.win.active .titlebar { background: linear-gradient(90deg, var(--title-a), var(--title-b)); color: #fff; }
.title-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbtns { display: flex; gap: 0; flex: none; }
.tbtn {
  width: 19px; height: 17px; padding: 0; border: 0; background-color: var(--face); background-repeat: no-repeat; background-position: center;
  box-shadow: var(--out);
}
.tbtn:active:not(:disabled) { box-shadow: var(--in); background-position: calc(50% + 1px) calc(50% + 1px); }
.tbtn:disabled { opacity: .4; }
.t-close { margin-left: 2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0z'/%3E%3C/svg%3E"); }
.t-min { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath d='M1 7h6v2H1z'/%3E%3C/svg%3E"); }
.t-max { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M0 0h9v9H0zM1 2v6h7V2z'/%3E%3C/svg%3E"); }
.win.maximized .t-max { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M2 0h7v6H7v3H0V3h2zM3 1v2h4v2h1V1zM1 5v3h5V5z'/%3E%3C/svg%3E"); }

.win-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; padding: 8px; margin-top: 2px; user-select: text; -webkit-user-select: text; }
.win-body.no-pad { padding: 0; }
.statusbar { flex: none; display: flex; gap: 2px; margin-top: 2px; font: 12px/1.2 var(--font-small); padding-right: 15px; }
.status-cell { flex: 1; min-width: 0; padding: 3px 6px; box-shadow: var(--in-thin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-cell:empty { display: none; }
.grip {
  position: absolute; right: 3px; bottom: 3px; width: 15px; height: 15px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 0 50%, #808080 50% 56%, #fff 56% 62%, transparent 62% 70%, #808080 70% 76%, #fff 76% 82%, transparent 82% 88%, #808080 88% 94%, #fff 94%);
}
.win.maximized .grip { display: none; }
.zoom-ghost { position: fixed; z-index: 90000; border: 2px solid #fff; mix-blend-mode: difference; pointer-events: none; }

/* 대화상자 */
#modals { position: fixed; inset: 0; z-index: 50000; pointer-events: none; }
.modal-back { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; pointer-events: auto; background: rgba(0, 0, 0, .001); }
.win.dialog { position: relative; max-width: 100%; max-height: 100%; }
.dialog-body { padding: 12px; overflow: auto; user-select: text; -webkit-user-select: text; }
.dialog-buttons { display: flex; justify-content: center; gap: 8px; padding: 2px 8px 10px; }
.dialog-buttons .btn { min-width: 76px; }
.dialog-body .dialog-buttons { padding: 8px 0 0; }
.msgbox { display: flex; gap: 14px; align-items: flex-start; }
.msgbox > img { width: 48px; height: 48px; flex: none; }
.msgbox p { padding-top: 4px; }

/* 메뉴 */
.menubar { flex: none; display: flex; align-items: center; gap: 2px; padding: 2px 4px; min-height: 26px; flex-wrap: wrap; }
.menu-fake { padding: 1px 7px; font-size: 15px; color: #000; }
.menu-gap { flex: 1; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 10px 4px 6px;
  background: none; border: 0; text-align: left; color: #000; text-decoration: none; cursor: var(--cur-arrow);
}
.menu-item:hover, .menu-item:focus-visible { background: var(--select); color: var(--select-ink); outline: none; }
.menu-item.small { padding: 4px 22px 4px 8px; white-space: nowrap; }
.menu-item.small:hover { color: var(--select-ink); }
.menu-sep { height: 2px; margin: 3px 2px; box-shadow: inset 0 1px var(--lo), inset 0 -1px var(--hi); }
.arrow-r { margin-left: auto; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

#startmenu {
  position: absolute; left: 2px; bottom: calc(var(--bar-h) - 1px); z-index: 40000;
  display: flex; width: 252px; background: var(--face); box-shadow: var(--out); padding: 3px;
}
.start-banner { flex: none; width: 28px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; background: linear-gradient(0deg, var(--title-b), var(--title-a)); color: #fff; }
.start-banner span { writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); font-size: 15px; letter-spacing: 1px; white-space: nowrap; }
.start-items { flex: 1; min-width: 0; }
.menu-group { position: relative; }
.submenu { position: absolute; left: calc(100% - 3px); bottom: -3px; z-index: 2; min-width: 170px; }

/* 작업 표시줄 */
#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar-h); z-index: 30000;
  display: flex; align-items: center; gap: 4px; padding: 3px 2px 2px; background: var(--face);
  box-shadow: inset 0 1px var(--lite), inset 0 2px var(--hi);
}
#startbtn { flex: none; height: 27px; padding: 2px 8px 2px 5px; gap: 5px; }
#startbtn b { font-size: 12px; }
#tasks { flex: 1; min-width: 0; display: flex; gap: 3px; overflow: hidden; }
.task {
  flex: 0 1 160px; min-width: 40px; height: 27px; display: flex; align-items: center; gap: 4px; padding: 2px 6px;
  background: var(--face); border: 0; box-shadow: var(--out); overflow: hidden; font: 12px/1 var(--font-small); text-align: left;
}
.task span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task img { flex: none; }
.task.on { font-weight: 700; box-shadow: var(--in); background: repeating-conic-gradient(#fff 0 25%, #c0c0c0 0 50%) 0 0 / 2px 2px; }
#tray { flex: none; display: flex; align-items: center; gap: 3px; height: 27px; padding: 0 6px 0 4px; box-shadow: var(--in-thin); }
.tray-btn { padding: 2px; background: none; border: 0; display: grid; }
.tray-btn.muted { position: relative; }
.tray-btn.muted::after { content: ''; position: absolute; left: 3px; top: 9px; width: 14px; height: 2px; background: red; transform: rotate(-45deg); }
.tray-btn.playing img { animation: tray-bop 1s steps(2) infinite; }
@keyframes tray-bop { 50% { transform: translateY(-1px); } }
.tray-clock { padding: 0 2px; background: none; border: 0; font: 12px/1 var(--font-small); white-space: nowrap; }
.live-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 5px; background: #000; color: #00ffa3; font: 700 12px/16px var(--font-small); text-decoration: none; }
.live-dot { width: 7px; height: 7px; background: #ff3040; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.balloon {
  position: absolute; right: 8px; bottom: calc(var(--bar-h) + 10px); z-index: 29000; max-width: 280px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; color: #000; text-decoration: none;
  background: #ffffe1; box-shadow: 0 0 0 1px #000, 3px 3px 0 rgba(0, 0, 0, .4);
}
.vol-panel { position: absolute; right: 6px; bottom: calc(var(--bar-h) + 2px); z-index: 35000; width: 240px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.vol-now { font: 12px/1.35 var(--font-small); padding: 4px 6px; background: #000; color: #30e060; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vol-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ctx-menu { position: absolute; z-index: 45000; min-width: 170px; }

.row-start, .row-end { display: flex; flex-wrap: wrap; gap: 6px; }
.row-end { justify-content: flex-end; margin-top: 10px; }
.linklike { padding: 0; background: none; border: 0; color: var(--link); text-decoration: underline; text-align: left; cursor: var(--cur-hand); overflow-wrap: anywhere; }
.empty-note { padding: 18px 10px; text-align: center; color: var(--lo); }
.section-title { font: 700 12px/1.3 var(--font-small); color: var(--title-a); }

/* 탭 */
.tabs { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tabstrip { flex: none; display: flex; padding-left: 2px; position: relative; z-index: 1; }
.tab {
  padding: 3px 12px 4px; margin-top: 2px; background: var(--face); border: 0;
  box-shadow: inset 1px 1px var(--hi), inset -1px 0 var(--dk), inset -2px 0 var(--lo);
}
.tab.on { margin-top: 0; padding-bottom: 6px; margin-bottom: -2px; }
.tab:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.tabpanel { flex: 1; min-height: 0; overflow: auto; padding: 12px; box-shadow: var(--out); }

/* LED 숫자 */
.led { min-width: 44px; padding: 2px 4px; background: #000; color: #ff2020; font: 700 12px/18px var(--font-small); letter-spacing: 2px; text-align: center; }
.led.small-led { padding: 0 4px; min-width: 0; display: inline-block; }

/* CRT */
#crt { position: fixed; inset: 0; z-index: 95000; pointer-events: none; display: none; }
.crt-on #crt { display: block; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .13) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 120px rgba(0, 0, 0, .35); }

/* 종료 대화상자 뒤 화면을 체크 무늬로 어둡게 */
#screen.dimmed::after { content: ''; position: absolute; inset: 0; z-index: 49000; background: repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 2px 2px; pointer-events: none; }

/* 부팅 */
#boot { position: fixed; inset: 0; z-index: 80000; background: #000; color: #c8c8c8; overflow: hidden; cursor: var(--cur-arrow); }
.power-screen { position: absolute; inset: 0; display: grid; place-items: center; }
.power-btn { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; background: none; border: 0; color: #c8c8c8; cursor: var(--cur-hand); }
.power-btn span { animation: blink 1.4s steps(2) infinite; }
.power-btn:focus-visible { outline: 1px dotted #c8c8c8; }
.bios { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px 16px 44px; font: 12px/16px 'GalmuriMono11', monospace; }
.bios-lines { flex: 1; min-height: 0; overflow: hidden; white-space: pre; }
.bios p { min-height: 1lh; }
.bios-epa { position: absolute; right: 16px; top: 16px; width: 135px; height: auto; }
.bios-foot { position: absolute; left: 16px; bottom: 16px; }
/* 좁은 화면에서는 글자를 가리지 않게 아래로 내린다 */
@media (max-width: 639px) {
  .bios-epa { top: auto; bottom: 44px; }
}
/* 큰 화면에서는 80칸 25줄에 가까운 VGA 글자 크기 (도트가 깨지지 않게 정확히 2배) */
@media (min-width: 1000px) and (min-height: 640px) {
  .bios { padding: 24px 24px 64px; font-size: 24px; line-height: 32px; }
  .bios-epa { right: 24px; top: 24px; width: 270px; }
  .bios-foot { left: 24px; bottom: 24px; }
}
.splash { position: absolute; inset: 0; background: #000; }
.splash-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.splash-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: repeating-linear-gradient(90deg, #0a246a 0 24px, #3a6ea5 24px 48px, #a6caf0 48px 72px, #3a6ea5 72px 96px);
  background-size: 192px 100%; animation: splash-run 1.2s steps(16) infinite;
}
@keyframes splash-run { to { background-position: 192px 0; } }
.splash-skip { position: absolute; left: 16px; bottom: 24px; font: 12px/1 var(--font-small); color: #fff; text-shadow: 1px 1px 0 #000; }
.bgm-video { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

#off { position: fixed; inset: 0; z-index: 85000; background: #000; display: grid; place-items: center; color: #fff; }
.off-safe { display: flex; flex-direction: column; gap: 14px; align-items: center; background: none; border: 0; color: #ff8c00; font-size: clamp(16px, 4vw, 30px); padding: 20px; text-align: center; }
.off-safe small { color: #666; font: 12px/1 var(--font-small); }
#saver { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70000; background: #000; }

/* 휴대폰: 창은 항상 꽉 차고, 아이콘은 격자 */
@media (max-width: 639px) {
  :root { --bar-h: 42px; }
  #icons { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-auto-columns: auto; grid-template-rows: none; grid-auto-rows: 92px; overflow-y: auto; }
  .dicon { width: 100%; }
  #wallpaper[data-wp='hi'] { background-size: 192px 192px; background-position: center bottom 54px; }
  #watermark { display: none; }
  #taskbar { padding: 4px 2px 3px; }
  #startbtn { height: 34px; }
  .task { height: 34px; flex-basis: 44px; }
  .task span { display: none; }
  .task.on { flex: 0 1 150px; }
  .task.on span { display: block; }
  .t-max { display: none; }
  #tray { height: 34px; }
  .titlebar { height: 32px; }
  .tbtn { width: 28px; height: 25px; }
  .btn { min-height: 34px; }
  .btn.small { min-height: 30px; }
  .field { min-height: 34px; font-size: 16px; }
  #startmenu { width: min(280px, calc(100% - 4px)); max-height: calc(100% - var(--bar-h)); overflow-y: auto; }
  .submenu { position: static; box-shadow: none; padding-left: 12px; background: none; }
  .form-grid { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot, .splash-bar, .power-btn span, .tray-btn.playing img { animation: none; }
}