/* 마이티 네트워크 3.2 웹 포팅 - 스타일 (원작 Windows 9x MFC 외관 재현) */
html, body { margin: 0; padding: 0; height: 100%; background: #000; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body { font-family: "Gulim", "굴림", "Dotum", "돋움", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; font-size: 12px; color: #000; touch-action: manipulation; }
#frame { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; background: #f0f0f0; }
#menubar { height: 20px; background: #f0f0f0; border-bottom: 1px solid #d0d0d0; display: flex; align-items: center; font-size: 12px; flex: none; position: relative; z-index: 900; }
#menubar .mi { padding: 0 7px; height: 20px; line-height: 20px; cursor: default; position: relative; }
#menubar .mi:hover, #menubar .mi.open { background: #cce8ff; }
#menubar .mi u { text-decoration: underline; }
#menubar .dropdown { position: absolute; left: 0; top: 20px; background: #f0f0f0; border: 1px solid #a0a0a0; box-shadow: 2px 2px 3px rgba(0,0,0,.3); min-width: 150px; display: none; padding: 2px 0; }
#menubar .mi.open .dropdown { display: block; }
#menubar .dropdown div { padding: 3px 24px 3px 20px; white-space: nowrap; }
#menubar .dropdown div:hover { background: #91c9f7; }
#menubar .dropdown div.disabled { color: #808080; }
#menubar .dropdown div.disabled:hover { background: none; }
#menubar .dropdown hr { border: 0; border-top: 1px solid #a0a0a0; margin: 2px 1px; }
#menubar .dropdown span.key { float: right; margin-left: 20px; }
#main { flex: 1; display: flex; flex-direction: row; min-height: 0; position: relative; }
#viewwrap { flex: 1; position: relative; overflow: hidden; background: #008000; min-width: 0; min-height: 0; }
/* ---- 정보 패널 (넓은 화면에서 자동 도킹) ---- */
#sidepanel { display: none; flex: none; background: #f0f0f0; overflow: auto; font-size: 12px; box-sizing: border-box; }
body.dock-right #main { flex-direction: row; }
body.dock-right #sidepanel { display: block; border-left: 1px solid #a0a0a0; width: 300px; }
body.dock-bottom #main { flex-direction: column; }
body.dock-bottom #sidepanel { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; border-top: 1px solid #a0a0a0; height: 250px; width: 100%; }
body.dock-bottom #pnBody { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; flex: 1; }
body.dock-bottom #pnBody .pn-sec { width: 230px; }
@media (max-width: 600px) { body.dock-bottom #pnBody { flex-direction: column; flex-wrap: nowrap; align-items: stretch; } body.dock-bottom #pnBody .pn-sec { width: auto; } }
.pn-inner { overflow-x: auto; }
/* 압축 패널 (휴대폰) */
#sidepanel.compact { overflow: hidden; }
#sidepanel.compact #pnBody { display: block; padding: 4px 8px; }
.pn-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.pn-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #a0a0a0; background: #fff; padding: 1px 7px; font-size: 12px; white-space: nowrap; line-height: 18px; }
.pn-chip-l { color: #606060; }
.pn-chip.dim { color: #606060; }
.pn-chip.gov { border-color: #008080; }
.pn-trick-compact { margin-top: 4px; gap: 3px; align-items: center; }
.pn-trick-compact .pn-trick-card { width: auto; padding: 1px; }
body.dock-bottom #pnChat { width: 260px; }
.pn-sec { margin: 6px; border: 1px solid #fff; box-shadow: 1px 1px 0 #a0a0a0 inset, -1px -1px 0 #fff inset; background: #f0f0f0; }
.pn-title { background: #000080; color: #fff; font-weight: bold; padding: 2px 6px; font-size: 12px; }
.pn-inner { padding: 4px 6px; }
.pn-kv { border-collapse: collapse; width: 100%; }
.pn-kv th { text-align: left; font-weight: normal; color: #404040; padding: 1px 6px 1px 0; white-space: nowrap; width: 60px; vertical-align: top; }
.pn-kv td { padding: 1px 0; }
.pn-dim { color: #808080; }
.pn-trick { display: flex; gap: 4px; flex-wrap: wrap; }
.pn-trick-card { width: 42px; padding: 2px; border: 2px solid transparent; }
.pn-trick-card.won { border-color: #ff0000; background: #fff; }
.pn-row { white-space: nowrap; margin: 2px 0; }
.pn-name { display: inline-block; width: 56px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
#pnChatLog { height: 90px; overflow: auto; background: #fff; border: 1px inset #a0a0a0; padding: 2px 4px; line-height: 1.3; margin-bottom: 4px; }
#pnChatInput { width: 100%; box-sizing: border-box; font-size: 12px; border: 1px solid #7a7a7a; padding: 2px 4px; }
#sidepanel table.grid th { font-weight: normal; text-align: left; border-bottom: 1px solid #a0a0a0; padding: 1px 3px; white-space: nowrap; }
#sidepanel table.grid td { padding: 1px 3px; white-space: nowrap; }
#sidepanel table.grid tr.me td { font-weight: bold; }
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#table { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
#overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
#overlay > * { pointer-events: auto; }
#statusbar { height: 23px; flex: none; background: #f0f0f0; border-top: 1px solid #c8c8c8; display: flex; align-items: center; font-size: 12px; position: relative; z-index: 5; }
#statusbar .pane { height: 19px; line-height: 19px; border: 1px solid; border-color: #a0a0a0 #fff #fff #a0a0a0; margin-left: 2px; padding: 0 3px; box-sizing: border-box; white-space: nowrap; overflow: hidden; }
#statusbar .pane.icon { width: 24px; padding: 0; display: flex; align-items: center; justify-content: center; }
#statusbar .pane.goal { width: 30px; text-align: center; }
#statusbar .pane.friend { width: 64px; }
#statusbar .pane.msg { flex: 1; border: 0; }
#statusbar .pane.msg b { font-weight: bold; }
#statusbar .progress { position: relative; width: 64px; }
#statusbar .progress .bar { position: absolute; left: 0; top: 0; bottom: 0; background: #000080; }
#statusbar .progress .txt { position: relative; text-align: center; mix-blend-mode: difference; color: #fff; }
#statusbar .pane.icon img { image-rendering: pixelated; }

/* ---- 음영 상자 (shade box) ---- */
.sbox { position: absolute; color: #fff; font-size: 12px; font-weight: bold; box-sizing: border-box; overflow: hidden; }
.sbox.dark { background-color: rgba(0,0,0,0.485); }
.sbox.opaque { background-color: #004200; }
.sbox.dither { background-image: url("../assets/img/dither.png"); background-size: 2px 2px; image-rendering: pixelated; }
.sbox .wm { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-image: url("../assets/img/watermark.png"); background-size: 96px 96px; image-rendering: pixelated; opacity: 1; pointer-events: none; }
body[data-shade="dither"] .sbox .wm { display: none; }
.sbox .close { position: absolute; right: 2px; top: 1px; width: 14px; height: 14px; cursor: pointer; z-index: 2; }
.sbox .close:before, .sbox .close:after { content: ""; position: absolute; left: 1px; top: 6px; width: 13px; height: 2px; background: #fff; transform: rotate(45deg); }
.sbox .close:after { transform: rotate(-45deg); }
.sbox .title { position: relative; text-align: center; color: #ffff00; text-shadow: 1px 1px 0 #999900; margin: 6px 20px 4px 20px; white-space: nowrap; }
.sbox .body { position: relative; }
.sbox .t { text-shadow: 1px 1px 0 #7b7b7b; }
.sbox .ty { color: #ffff00; text-shadow: 1px 1px 0 #999900; }
.sbox .tc { color: #00ffff; text-shadow: 1px 1px 0 #009999; }
.sbox .tr { color: #ff0000; text-shadow: 1px 1px 0 #990000; }
.sbox .tg { color: #7b7b7b; text-shadow: none; }
.sbox .btn { display: inline-block; color: #fff; text-shadow: 1px 1px 0 #7b7b7b; cursor: pointer; padding: 1px 4px; }
.sbox .btn:hover { color: #00ffff; text-shadow: 1px 1px 0 #009999; }
.sbox .btn.disabled, .sbox .btn.disabled:hover { color: #7b7b7b; text-shadow: none; cursor: default; }
.sbox .link { color: #fff; text-shadow: 1px 1px 0 #7b7b7b; cursor: pointer; white-space: nowrap; }
.sbox .link:hover, .sbox .link.sel { color: #00ffff; text-shadow: 1px 1px 0 #009999; }
.sbox .link.disabled, .sbox .link.disabled:hover { color: #7b7b7b; text-shadow: none; cursor: default; }
.sbox .big { font-size: 20px; font-weight: normal; line-height: 1.1; text-shadow: 1px 1px 0 #404040; }
.sbox .num { font-size: 26px; color: #ffff00; text-shadow: 1px 1px 0 #999900; font-family: "Gulim", "굴림", monospace; letter-spacing: -1px; }
.sbox .arrow { color: #00ffff; text-shadow: 1px 1px 0 #009999; font-size: 14px; cursor: pointer; line-height: 14px; }
.sbox .arrow.disabled { color: #7b7b7b; text-shadow: none; cursor: default; }
.sbox .suit { display: inline-block; width: 20px; height: 20px; background: #fff; border: 1px solid #fff; box-sizing: content-box; cursor: pointer; vertical-align: middle; }
.sbox .suit img { display: block; width: 20px; height: 20px; image-rendering: pixelated; }
.sbox .suit.sel { outline: 2px solid #fff; outline-offset: 1px; }
.sbox .suit.disabled { opacity: .35; cursor: default; }
.sbox img.icon { width: 20px; height: 20px; vertical-align: middle; image-rendering: pixelated; background: #fff; }
.sbox .cardimg { image-rendering: pixelated; }
.sbox.menu .item { font-size: 20px; font-weight: normal; margin: 14px 0 0 40px; cursor: pointer; text-shadow: 1px 1px 0 #404040; white-space: nowrap; }
.sbox.menu .item:hover { color: #00ffff; text-shadow: 1px 1px 0 #009999; }
.sbox.menu .copy { color: #00ffff; text-shadow: 1px 1px 0 #009999; margin: 16px 0 0 40px; font-size: 12px; }
.sbox .row { white-space: nowrap; }
.sbox .center { text-align: center; }
.sbox .pcard { display: inline-block; vertical-align: top; cursor: pointer; }

/* ---- 이름표 ---- */
/* (캔버스에 직접 그림) */

/* ---- Win9x 대화상자 ---- */
.win { position: absolute; background: #f0f0f0; border: 1px solid #000; box-shadow: 2px 2px 6px rgba(0,0,0,.4); font-size: 12px; color: #000; z-index: 50; }
.win .cap { height: 22px; line-height: 22px; padding: 0 6px; background: #fff; border-bottom: 1px solid #d9d9d9; display: flex; align-items: center; cursor: default; }
.win .cap .ttl { flex: 1; white-space: nowrap; overflow: hidden; }
.win .cap .x { width: 22px; text-align: center; cursor: pointer; font-family: Arial, sans-serif; font-size: 14px; }
.win .cap .x:hover { background: #e81123; color: #fff; }
.win .cap .q { width: 22px; text-align: center; cursor: pointer; font-family: Arial, sans-serif; font-size: 13px; }
.win .cap .q:hover { background: #e5e5e5; }
.win .cap .mn { width: 22px; text-align: center; cursor: pointer; font-family: Arial, sans-serif; }
.win .cap .mn:hover { background: #e5e5e5; }
.win .content { padding: 8px; }
.win button, .btn9x { font-family: inherit; font-size: 12px; background: #e1e1e1; border: 1px solid #adadad; padding: 2px 10px; min-width: 70px; height: 23px; cursor: pointer; color: #000; }
.win button:hover, .btn9x:hover { background: #e5f1fb; border-color: #0078d7; }
.win button:disabled { color: #a0a0a0; background: #ccc; border-color: #bfbfbf; cursor: default; }
.win button.def { border: 1px solid #0078d7; box-shadow: inset 0 0 0 1px #0078d7; }
.win input[type=text], .win input[type=number], .win select { font-family: inherit; font-size: 12px; border: 1px solid #7a7a7a; background: #fff; padding: 1px 3px; height: 21px; box-sizing: border-box; }
.win input[type=text]:read-only { background: #f0f0f0; }
.win label { display: inline-flex; align-items: center; gap: 4px; margin: 0; white-space: normal; max-width: 100%; cursor: default; }
.win label input { flex: none; }
.win label input { margin: 0 2px 0 0; }
.win label.ind { margin-left: 14px; }
.win fieldset { border: 1px solid #dcdcdc; margin: 0; padding: 6px 8px; }
.win legend { padding: 0 3px; }
.win .tabs { display: flex; flex-wrap: wrap; margin: 0; padding: 0 0 0 2px; }
.win .tab { padding: 3px 7px; border: 1px solid #d9d9d9; border-bottom: 0; background: #f0f0f0; margin-right: -1px; cursor: default; margin-top: 2px; }
.win .tab.on { background: #fff; position: relative; top: 1px; margin-top: 0; padding-top: 4px; }
.win .page { border: 1px solid #d9d9d9; background: #fff; padding: 10px; min-height: 230px; box-sizing: border-box; position: relative; }
.win .page .lbl { white-space: nowrap; }
.win .page .col { display: inline-block; vertical-align: top; }
.win .btnrow { text-align: right; padding: 8px 0 0 0; }
.win .btnrow button { margin-left: 6px; }
.win .hint { color: #000; font-size: 12px; line-height: 1.35; }
.win .slider { width: 130px; }
.win table.grid { border-collapse: collapse; width: 100%; }
.win table.grid th { font-weight: normal; text-align: left; border-bottom: 1px solid #a0a0a0; padding: 2px 4px; background: #f0f0f0; white-space: nowrap; }
.win table.grid td { padding: 2px 4px; white-space: nowrap; }
.win table.grid tr.me td { font-weight: bold; }
.win .cback { display: inline-block; margin: 4px; border: 2px solid transparent; cursor: pointer; }
.win .cback.sel { border-color: #000; }
.win .cback img { display: block; width: 71px; height: 96px; image-rendering: pixelated; }
.win .cback.small img { width: 41px; height: 64px; }
.win .preview { border: 1px inset #a0a0a0; background: #008000; position: relative; overflow: hidden; }
.win .rules-str { font-family: "Courier New", monospace; }
.win .mb { padding: 14px 18px; font-size: 12px; display: flex; gap: 14px; align-items: center; }
.win .mb .ico { font-size: 28px; width: 32px; text-align: center; }
.winhelp .content { padding: 0; }
.winhelp .toc { width: 160px; border-right: 1px solid #d0d0d0; background: #f7f7f7; overflow: auto; }
.winhelp .toc div { padding: 4px 8px; cursor: pointer; }
.winhelp .toc div:hover, .winhelp .toc div.on { background: #cce8ff; }
.winhelp .text { flex: 1; overflow: auto; padding: 10px 16px; font-size: 13px; line-height: 1.55; background: #fff; }
.winhelp .text h2 { font-size: 15px; margin: 14px 0 6px 0; color: #000080; }
.winhelp .text h3 { font-size: 13px; margin: 12px 0 4px 0; }
.winhelp .text p { margin: 0 0 8px 0; }
.winhelp .body { display: flex; height: 100%; }

/* ---- 보스키 ---- */
#boss { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #ffffff; z-index: 1000; display: none; font-family: "Gulim", "굴림", "Malgun Gothic", sans-serif; }
#boss.on { display: block; }
#boss .fake { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); background: #f0f0f0; border: 1px solid #000; width: 360px; box-shadow: 3px 3px 8px rgba(0,0,0,.4); }
#boss .fake .cap { background: #fff; padding: 4px 8px; border-bottom: 1px solid #d9d9d9; }
#boss .fake .mb { padding: 16px; font-size: 12px; }
#boss .fake .btnrow { text-align: center; padding: 0 0 12px 0; }

/* ---- 카드 툴팁 ---- */
#tooltip { position: absolute; background: #ffffe1; border: 1px solid #000; padding: 2px 5px; font-size: 12px; color: #000; white-space: nowrap; display: none; z-index: 40; pointer-events: none; }

/* ---- 모바일 ---- */
@media (max-width: 600px) {
  #menubar .dropdown div { padding: 7px 24px 7px 20px; }
  .win { max-width: 100vw; }
}

/* 옵션 페이지 반응형 배치: 넓으면 두 단, 좁으면 세로로 쌓임 */
.win .opt-row { display: flex; gap: 14px; flex-wrap: wrap; }
.win .opt-row > .col, .win .opt-row > fieldset { flex: 1 1 180px; min-width: 0; }
.win .opt-row > fieldset { margin: 0; }
.win .preview { max-width: 100%; box-sizing: border-box; }
.win button { white-space: nowrap; }
.win .ai-grid { display: grid; grid-template-columns: auto minmax(56px, 1fr) minmax(104px, 1.6fr) auto; gap: 6px; align-items: center; }
.win .ai-grid input, .win .ai-grid select { width: 100%; box-sizing: border-box; min-width: 0; }
.win input[type=text], .win input[type=number], .win select { max-width: 100%; box-sizing: border-box; }