/* ==========================================================
   style.css — 윈도우98 스타일 (공개 사이트 + 관리자 공용)
   ========================================================== */
@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');

:root {
  --face: #c0c0c0; --hi: #fff; --lo: #808080; --dk: #000; --navy: #000080; --blue: #1084d0;
  --desk: #008080;
  --font: 'Galmuri11', 'Galmuri9', 'Dotum', '돋움', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 12px/1.55 var(--font); color: #000; background: var(--desk);
  overflow: hidden; -webkit-text-size-adjust: 100%;
}
a { color: #0000ee; }
a:visited { color: #551a8b; }
hr { border: 0; border-top: 1px solid var(--lo); border-bottom: 1px solid #fff; margin: 12px 0; }
h1, h2, h3, h4 { margin: 0; }
[hidden] { display: none !important; }

/* ---------- 베벨 ---------- */
.raised {
  background: var(--face); border: 2px solid; border-color: #fff #404040 #404040 #fff;
  box-shadow: inset -1px -1px var(--lo), inset 1px 1px #dfdfdf;
}
.sunken {
  background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px #404040, inset -1px -1px #dfdfdf;
}
.btn {
  font: inherit; color: #000; background: var(--face); cursor: pointer; padding: 4px 12px; min-height: 26px;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
  box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;
  display: inline-flex; align-items: center; gap: 4px; justify-content: center; text-decoration: none;
}
.btn:active, .btn.on {
  border-color: #404040 #fff #fff #404040; box-shadow: inset 1px 1px #808080, inset -1px -1px #dfdfdf;
  padding: 5px 11px 3px 13px;
}
.btn.primary { font-weight: bold; outline: 1px solid #000; outline-offset: -4px; }
.btn.danger { color: #a00000; }
.btn.sm { min-height: 22px; padding: 1px 8px; }
.btn:disabled { color: #808080; text-shadow: 1px 1px #fff; cursor: default; }
.btn:focus-visible, .input:focus-visible, a:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

/* ---------- 창 ---------- */
.window { padding: 2px; }
.titlebar {
  display: flex; align-items: center; gap: 6px; user-select: none; touch-action: none;
  background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: bold; padding: 3px 4px; min-height: 24px;
}
.titlebar .ttxt { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tbtns { display: flex; gap: 2px; }
.tbtn {
  width: 20px; height: 18px; padding: 0; font: bold 11px/1 var(--font); color: #000; cursor: pointer; background: var(--face);
  border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: inset -1px -1px #808080;
}
.tbtn:active { border-color: #404040 #fff #fff #404040; }

/* ---------- 메인 창 ---------- */
#win { position: fixed; left: 100px; top: 14px; right: 14px; bottom: 50px; display: flex; flex-direction: column; z-index: 2; }
#win.max { left: 0; top: 0; right: 0; bottom: 36px; }
#win.min { display: none; }
.menubar { display: flex; flex-wrap: wrap; padding: 2px 2px; gap: 0; }
.menubar a { color: #000; text-decoration: none; padding: 2px 9px; cursor: pointer; }
.menubar a:hover { background: var(--navy); color: #fff; }
.toolbar { display: flex; align-items: center; gap: 4px; padding: 3px 2px; border-top: 1px solid #fff; border-bottom: 1px solid var(--lo); flex-wrap: wrap; }
.toolbar .addr { flex: 1; min-width: 120px; padding: 2px 6px; min-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.toolbar form { display: flex; gap: 3px; }
.toolbar .input { width: 130px; }
.wbody { flex: 1; min-height: 0; display: flex; gap: 3px; margin: 3px 0; }
#tree { width: 190px; flex: none; overflow: auto; padding: 6px; }
#content { flex: 1; min-width: 0; overflow: auto; padding: 14px; word-break: break-word; }
.statusbar { display: flex; gap: 4px; }
.statusbar span {
  flex: 1; padding: 1px 6px; border: 1px solid; border-color: #808080 #fff #fff #808080; min-height: 20px;
}
.statusbar span + span { flex: none; }
.ti { display: block; padding: 3px 6px; color: #000; text-decoration: none; white-space: nowrap; }
.ti:hover { text-decoration: underline; }
.ti.on { background: var(--navy); color: #fff; }

/* ---------- 바탕화면 아이콘/작업표시줄/시작메뉴 ---------- */
#icons { position: fixed; left: 8px; top: 12px; width: 84px; display: flex; flex-direction: column; gap: 10px; z-index: 1; }
.dicon { display: block; width: 84px; text-align: center; color: #fff; cursor: pointer; background: none; border: 0; font: inherit; padding: 2px; user-select: none; }
.dicon .ic { font-size: 30px; line-height: 1.2; display: block; }
.dicon span.lb { display: inline-block; padding: 0 2px; }
.dicon:focus-visible span.lb, .dicon.sel span.lb { background: var(--navy); outline: 1px dotted #ff0; }

#taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: 36px; display: flex; align-items: center; gap: 4px; padding: 2px 3px; z-index: 50;
  background: var(--face); border-top: 2px solid #fff; box-shadow: 0 -1px #dfdfdf; }
#taskbar .start { font-weight: bold; min-height: 28px; }
#taskbar .task { flex: 0 1 190px; min-width: 0; justify-content: flex-start; overflow: hidden; white-space: nowrap; min-height: 28px; }
.tsep { width: 2px; height: 26px; border-left: 1px solid var(--lo); border-right: 1px solid #fff; }
.tray { margin-left: auto; display: flex; gap: 10px; align-items: center; padding: 3px 8px; min-height: 28px; background: var(--face); border-color: #808080 #fff #fff #808080; box-shadow: none; white-space: nowrap; }
#startmenu { position: fixed; left: 2px; bottom: 36px; width: 230px; z-index: 60; display: flex; padding: 2px; }
.sm-side { width: 26px; background: linear-gradient(0deg, #000080, #1084d0); color: #fff; font-weight: bold; writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 0; font-size: 15px; text-align: left; letter-spacing: 1px; }
.sm-items { flex: 1; max-height: 70vh; overflow: auto; }
.smi { display: block; width: 100%; text-align: left; padding: 7px 10px; color: #000; text-decoration: none; cursor: pointer; background: none; border: 0; font: inherit; }
.smi:hover { background: var(--navy); color: #fff; }
.smi-sep { border-top: 1px solid var(--lo); border-bottom: 1px solid #fff; margin: 2px 2px; }

/* ---------- 대화상자 ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .25); padding: 10px; }
.dlg { max-width: 94vw; max-height: 94vh; overflow: auto; }
.dlg-body { padding: 14px 14px 8px; display: flex; gap: 12px; align-items: flex-start; }
.dlg-body .big { font-size: 28px; line-height: 1; }
.dlg-body .grow { flex: 1; min-width: 0; word-break: break-word; }
.dlg-btns { display: flex; justify-content: center; gap: 8px; padding: 8px 12px 12px; flex-wrap: wrap; }
.dlg-btns .btn { min-width: 76px; }
.tabs { display: flex; gap: 2px; padding: 0 12px; margin-top: 8px; }
.tab { padding: 4px 14px; cursor: pointer; background: var(--face); border: 2px solid; border-bottom: 0; border-color: #fff #404040 #404040 #fff; font: inherit; }
.tab.on { font-weight: bold; position: relative; top: 1px; }
.shutdown { position: fixed; inset: 0; z-index: 200; background: #000; color: #ffa500; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20px; cursor: pointer; padding: 20px; line-height: 1.8; }
.shutdown small { display: block; color: #aa7000; font-size: 12px; margin-top: 18px; }

/* ---------- 폼 ---------- */
.input, select.input, textarea.input {
  font: inherit; color: #000; padding: 3px 5px; min-height: 26px; width: 100%;
  background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px #404040;
  border-radius: 0;
}
textarea.input { resize: vertical; min-height: 80px; line-height: 1.5; }
.field { margin-bottom: 10px; }
.field > label { display: block; margin-bottom: 3px; font-weight: bold; }
.field .hint { color: #555; font-size: 11px; margin-top: 2px; }
.err-line { color: #b00000; min-height: 18px; margin: 4px 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.check { display: flex; gap: 6px; align-items: center; cursor: pointer; }
fieldset { border: 2px groove #fff; margin: 0 0 12px; padding: 8px 10px 4px; }
legend { padding: 0 4px; font-weight: bold; }

/* ---------- 콘텐츠 공통 ---------- */
.page-title { font-size: 16px; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 2px solid var(--navy); color: var(--navy); }
.sub-title { background: var(--navy); color: #fff; padding: 2px 8px; margin: 14px 0 6px; font-weight: bold; display: flex; justify-content: space-between; gap: 8px; }
.sub-title a { color: #fff; font-weight: normal; }
.panel { padding: 10px; margin-bottom: 12px; }
.loading, .empty { padding: 30px 10px; text-align: center; color: #555; }
.msg { padding: 10px; border: 2px solid; margin: 8px 0; }
.msg.err { background: #ffe0e0; border-color: #b00000; }
.msg.info { background: #ffffe1; border-color: #808000; }
.cols { display: grid; grid-template-columns: 1fr 260px; gap: 14px; }
.led { background: #000; color: #ffb000; border: 2px solid; border-color: #808080 #fff #fff #808080; overflow: hidden; white-space: nowrap; padding: 3px 0; letter-spacing: 1px; margin-bottom: 12px; }
.led span { display: inline-block; padding-left: 100%; animation: led 32s linear infinite; text-shadow: 0 0 4px #ff8000; }
@keyframes led { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .led span { animation: none; padding-left: 8px; } }
.odo { display: inline-flex; gap: 1px; }
.odo i { font-style: normal; background: #000; color: #3f3; font: bold 16px/1 monospace; padding: 3px 4px; border: 1px solid #555; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bcard { display: block; padding: 8px; color: #000; text-decoration: none; }
.bcard b { display: block; }
.bcard small { color: #444; }
.bcard:hover { background: #dcdcf8; }
.tag { display: inline-block; background: #ffffe1; border: 1px solid #808000; padding: 0 6px; margin: 0 4px 4px 0; color: #000; text-decoration: none; font-size: 11px; }
.tag:hover { background: #ffff90; }

/* 목록 표 */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { background: var(--face); border: 2px solid; border-color: #fff #404040 #404040 #fff; padding: 3px 6px; text-align: center; font-weight: normal; white-space: nowrap; }
.tbl td { padding: 5px 6px; border-bottom: 1px dotted #999; vertical-align: top; }
.tbl td.c { text-align: center; white-space: nowrap; }
.tbl td.t a { color: inherit; text-decoration: none; }
.tbl td.t a:hover { text-decoration: underline; }
.tbl tbody tr:hover td { background: #000080; color: #fff; }
.tbl tbody tr:hover td a, .tbl tbody tr:hover td .cnt { color: #fff; }
.cnt { color: #c00; font-weight: bold; }
.pin { color: #c00; }
.pager { display: flex; gap: 4px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.pager a, .pager b { padding: 2px 8px; border: 2px solid; border-color: #fff #404040 #404040 #fff; background: var(--face); color: #000; text-decoration: none; }
.pager b { border-color: #404040 #fff #fff #404040; }

/* 글 보기 */
.post-head { border-bottom: 2px solid var(--navy); padding-bottom: 8px; margin-bottom: 12px; }
.post-title { font-size: 18px; margin: 4px 0 6px; }
.post-meta { color: #444; font-size: 11px; display: flex; gap: 12px; flex-wrap: wrap; }
.post-body { line-height: 1.8; font-size: 13px; padding: 4px 2px; }
.post-body img { max-width: 100%; height: auto; display: block; margin: 8px 0; border: 1px solid #999; }
.post-body h3 { font-size: 15px; margin: 18px 0 4px; color: var(--navy); border-left: 5px solid var(--navy); padding-left: 6px; }
.post-body h4 { font-size: 13px; margin: 12px 0 2px; }
.post-body .ln { min-height: 1.8em; }
.post-body .yt { position: relative; padding-top: 56.25%; margin: 10px 0; background: #000; }
.post-body .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.share-banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 14px; background: #b7d7a8; border: 2px solid #5b8f4a; }
.share-banner .em { font-size: 34px; }
.share-banner b.g { color: #0a8a3a; }
.share-banner b.b { color: #0a8cd0; }
.share-banner small { display: block; color: #333; }
.like-wrap { text-align: center; margin: 18px 0; }
.navrows { margin: 14px 0; }
.navrows div { padding: 3px 0; border-bottom: 1px dotted #aaa; }

/* 댓글 */
.cmt-head { background: var(--navy); color: #fff; padding: 2px 8px; font-weight: bold; margin-top: 14px; }
.cmt { padding: 8px 6px; border-bottom: 1px dotted #999; }
.cmt.reply { margin-left: 22px; background: #f4f4f4; border-left: 3px solid #bbb; }
.cmt-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.cmt .nick { color: #000080; }
.cmt .nick.admin { color: #c00000; }
.cmt .date { color: #777; font-size: 11px; }
.cmt .acts { margin-left: auto; display: flex; gap: 8px; }
.cmt .acts a { cursor: pointer; font-size: 11px; }
.cmt-b { white-space: pre-wrap; margin-top: 3px; line-height: 1.6; }
.pending-tag { background: #ffffe1; border: 1px solid #808000; padding: 0 5px; font-size: 11px; }
.cmt-form { margin-top: 10px; padding: 8px; }
.cmt-form .row { justify-content: space-between; margin-top: 6px; }
.cmt-form.inline { margin: 6px 0 0 22px; }

/* ---------- 관리자 ---------- */
.adm { flex: 1; min-height: 0; display: flex; gap: 3px; margin: 3px 0; }
.adm-nav { width: 170px; flex: none; overflow: auto; padding: 6px; background: var(--face); border-color: #808080 #fff #fff #808080; }
.adm-nav .ti { padding: 7px 8px; display: flex; justify-content: space-between; gap: 6px; }
.adm-nav .badge { background: #c00; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; }
.adm-main { flex: 1; min-width: 0; overflow: auto; padding: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
.card { padding: 8px 10px; }
.card .n { font-size: 24px; font-weight: bold; color: var(--navy); line-height: 1.2; }
.card .l { color: #444; font-size: 11px; }
.card.warn .n { color: #c00; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding: 6px 6px 0; background: #fff; }
.bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; font-size: 10px; }
.bar i { display: block; width: 100%; background: linear-gradient(180deg, #1084d0, #000080); min-height: 2px; }
.bar span { color: #444; margin-top: 2px; }
.mode-badge { font-weight: normal; font-size: 11px; background: #ffffe1; color: #000; padding: 0 6px; border: 1px solid #808000; }
.ed-tools { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 4px; }
.ed-area textarea { min-height: 340px; font-family: var(--font); }
.preview-box { min-height: 200px; padding: 10px; background: #fff; }
.ellipsis { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

/* ---------- 모바일 ---------- */
@media (max-width: 760px) {
  body { font-size: 13px; }
  #icons { display: none; }
  #win, #win.max { left: 0; top: 0; right: 0; bottom: 36px; border-width: 0; padding: 0; }
  .titlebar #bMax { display: none; }
  .menubar a { padding: 5px 9px; }
  .toolbar .addr { display: none; }
  .toolbar form { flex: 1; }
  .toolbar .input { flex: 1; width: auto; min-width: 0; }
  .btn { min-height: 34px; }
  .btn.sm { min-height: 30px; }
  .wbody, .adm { flex-direction: column; gap: 2px; margin: 2px 0; }
  #tree, .adm-nav { width: auto; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 4px; flex: none; }
  .adm-nav { padding: 4px; }
  .ti { white-space: nowrap; padding: 6px 10px; background: var(--face); border: 2px solid; border-color: #fff #404040 #404040 #fff; flex: none; }
  .ti.on { border-color: #404040 #fff #fff #404040; }
  #content, .adm-main { padding: 10px; }
  .cols { grid-template-columns: 1fr; }
  .hide-m { display: none; }
  .statusbar span:last-child { display: none; }
  .tray .hide-m { display: none; }
  #taskbar .task { flex: 1; }
  #startmenu { width: min(260px, 96vw); }
  .post-title { font-size: 16px; }
  .cmt.reply { margin-left: 12px; }
  .cmt-form.inline { margin-left: 12px; }
  .ellipsis { max-width: 180px; }
  .bars { gap: 4px; }
  .tbl td, .tbl th { padding: 6px 4px; }
}