/* 성화경찰서 홈페이지 공통 스타일 */
@font-face {
font-family: 'DungGeunMo';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/DungGeunMo.woff') format('woff');
font-weight: normal; font-style: normal; font-display: swap;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: #008080;
font-family: 'Gulim', '굴림', 'Dotum', '돋움', 'DungGeunMo', sans-serif;
font-size: 12px; color: #000; line-height: 1.5;
-webkit-font-smoothing: none;
}
a { color: #0000FF; text-decoration: underline; }
a:visited { color: #800080; }
a:hover { color: #FF0000; }
img { border: 0; }
table { border-collapse: collapse; }
td, th { font-size: 12px; }
/* ===== 창 틀 ===== */
#ie {
width: 960px; margin: 14px auto 0; background: #C0C0C0;
border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF;
box-shadow: 1px 1px 0 #000;
}
#ie .title {
background: #000080; background: linear-gradient(90deg, #000080, #1084D0);
color: #fff; font-weight: bold; padding: 3px 6px; display: flex; align-items: center;
font-size: 12px;
}
#ie .title .ico { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #3060C0; margin-right: 6px; }
#ie .title .btns { margin-left: auto; display: flex; gap: 2px; }
#ie .title .btns b { display: inline-block; width: 16px; height: 14px; background: #C0C0C0; color: #000; font-size: 10px; line-height: 12px; text-align: center; border: 1px solid; border-color: #fff #404040 #404040 #fff; }
#ie .menubar { padding: 2px 6px; display: flex; gap: 16px; }
#ie .toolbar { display: flex; gap: 8px; padding: 4px 8px; border-top: 1px solid #fff; border-bottom: 1px solid #808080; }
#ie .toolbar span { display: inline-block; text-align: center; font-size: 11px; color: #000; width: 56px; white-space: nowrap; }
#ie .toolbar span i { display: block; width: 18px; height: 16px; margin: 0 auto 2px; border: 1px solid #404040; }
#ie .toolbar span.dim { color: #808080; }
#ie .addr { display: flex; align-items: center; padding: 3px 6px; gap: 6px; border-bottom: 1px solid #808080; }
#ie .addr .field { flex: 1; background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; padding: 1px 4px; font-size: 12px; white-space: nowrap; overflow: hidden; }
#ie .addr .go { padding: 0 8px; }
/* 창 높이 고정 */
#ie .viewport { background: #808080; height: 720px; border: 2px solid; border-color: #808080 #fff #fff #808080; display: flex; }
#ie .viewport .inner { flex: 1; min-width: 0; height: 100%; overflow-y: scroll; overflow-x: hidden; padding: 12px 0; scrollbar-width: auto; }
/* 스크롤바 */
#ie .inner::-webkit-scrollbar { width: 16px; }
#ie .inner::-webkit-scrollbar-track { background: #DFDFDF; background-image: linear-gradient(45deg, #C0C0C0 25%, transparent 25%, transparent 75%, #C0C0C0 75%), linear-gradient(45deg, #C0C0C0 25%, transparent 25%, transparent 75%, #C0C0C0 75%); background-size: 2px 2px; background-position: 0 0, 1px 1px; }
#ie .inner::-webkit-scrollbar-thumb { background: #C0C0C0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: inset 1px 1px 0 #DFDFDF; }
#ie .inner::-webkit-scrollbar-button:single-button { display: block; height: 16px; background-color: #C0C0C0; border: 2px solid; border-color: #fff #404040 #404040 #fff; background-repeat: no-repeat; background-position: center; }
#ie .inner::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml;utf8,"); }
#ie .inner::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml;utf8,"); }
#ie .status { display: flex; padding: 2px 4px; border-top: 1px solid #fff; }
#ie .status span { border: 1px solid; border-color: #808080 #fff #fff #808080; padding: 0 6px; }
#ie .status span:first-child { flex: 1; }
#ie .status span:last-child { width: 130px; }
/* 작업표시줄 */
#taskbar { width: 960px; margin: 6px auto 0; background: #C0C0C0; border-top: 2px solid #fff; display: flex; align-items: center; padding: 3px 4px; gap: 6px; font-size: 12px; }
#taskbar .start { font-weight: bold; padding: 1px 6px; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
#taskbar .start i { display: inline-block; width: 12px; height: 10px; background: linear-gradient(90deg,#F00 50%,#0A0 50%); margin-right: 4px; vertical-align: -1px; }
#taskbar .task { padding: 1px 8px; border: 2px solid; border-color: #808080 #fff #fff #808080; background: #E0E0E0; width: 260px; overflow: hidden; white-space: nowrap; }
#taskbar .clock { margin-left: auto; padding: 1px 8px; border: 1px solid; border-color: #808080 #fff #fff #808080; }
#disclaimer { width: 960px; margin: 6px auto 20px; text-align: center; color: #fff; font-size: 11px; }
/* ===== 780px 본 페이지 ===== */
#page { width: 780px; margin: 0 auto; background: #fff; border: 1px solid #000080; }
/* 헤더 */
#hd { background: #000080; color: #fff; height: 78px; position: relative; }
#hd .emblem { position: absolute; left: 16px; top: 11px; width: 60px; height: 56px; display: flex; align-items: center; justify-content: center; }
#hd .emblem img { width: auto; height: 56px; image-rendering: pixelated; display: block; }
#hd .name { position: absolute; left: 84px; top: 10px; }
#hd .name img { display: block; image-rendering: pixelated; }
#hd .name span { font-size: 11px; color: #C0D0FF; display: block; margin-top: 2px; letter-spacing: 1px; }
#hd .quick { position: absolute; right: 12px; top: 26px; display: flex; gap: 5px; }
#marq { background: #FFFFCC; border-top: 1px solid #C8A020; border-bottom: 1px solid #A0A0A0; padding: 3px 0; height: 24px; overflow: hidden; }
#marq marquee { color: #000080; }
#marq b { color: #FF0000; }
/* 본문 2단 */
#body { display: flex; }
#lnb { width: 152px; background: #E8ECF4; border-right: 1px solid #A0A8C0; min-height: 560px; display: flex; flex-direction: column; }
#lnb .mt { background: #3060A0; color: #fff; font-weight: bold; padding: 5px 8px; letter-spacing: 2px; font-family: Verdana, sans-serif; font-size: 12px; }
#lnb ul { list-style: none; margin: 0; padding: 0; }
#lnb li { border-bottom: 1px dotted #7080A0; }
#lnb li a { display: block; padding: 6px 8px 6px 22px; color: #000080; text-decoration: none; position: relative; }
#lnb li a:before { content: ''; position: absolute; left: 8px; top: 10px; width: 8px; height: 8px; background: #3060A0; }
#lnb li a:hover { background: #D0D8EC; color: #FF0000; }
#lnb li.on > a { background: #fff; font-weight: bold; }
#lnb li.on > a:before { background: #FF0000; }
#lnb li .hot { position: absolute; right: 6px; top: 8px; }
#lnb ul.sub { background: #F4F6FA; border-top: 1px dotted #7080A0; }
#lnb ul.sub li { border: 0; }
#lnb ul.sub li a { padding: 2px 6px 2px 30px; font-size: 11px; color: #204080; }
#lnb ul.sub li a:before { width: 4px; height: 4px; top: 9px; left: 20px; background: #7080A0; }
#lnb ul.sub li.on a { color: #FF0000; font-weight: bold; background: none; }
#ct { flex: 1; padding: 12px 14px 20px; min-width: 0; }
#ct .path { font-size: 11px; color: #606060; margin-bottom: 8px; }
#ct .path a { color: #606060; }
#ct h2.pt { margin: 0 0 12px; font-size: 15px; color: #000080; padding: 6px 8px 5px 26px; border-bottom: 2px solid #000080; background: #E8ECF4; position: relative; }
#ct h2.pt:before { content: ''; position: absolute; left: 8px; top: 10px; width: 10px; height: 10px; background: #000080; border: 2px solid #fff; outline: 1px solid #000080; }
#ct h3 { font-size: 12px; margin: 16px 0 6px; padding-left: 10px; border-left: 4px solid #3060A0; color: #000080; }
#ct p { margin: 0 0 8px; }
/* 푸터 */
#ft { border-top: 3px solid #000080; text-align: center; color: #606060; font-size: 11px; padding: 10px; line-height: 1.7; }
#ft a { color: #0000FF; }
/* ===== 공통 부품 ===== */
.btn98 { display: inline-block; background: #C0C0C0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; padding: 1px 8px; font-size: 12px; text-decoration: none; cursor: pointer; font-family: inherit; line-height: 16px; }
.btn98:active { border-color: #404040 #fff #fff #404040; }
.btn98:visited, .btn98:hover { color: #000; }
.tag { display: inline-block; font-family: Verdana, Arial, sans-serif; font-weight: bold; font-size: 9px; padding: 0 3px; line-height: 12px; vertical-align: 2px; }
.tag.new { color: #FF0000; animation: blink 1s steps(2) infinite; }
.tag.hot { background: #FF0000; color: #FFFF00; animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tbl { width: 100%; border: 1px solid #808080; }
.tbl th { background: #E8ECF4; color: #000080; border: 1px solid #808080; padding: 4px; font-weight: bold; }
.tbl td { border: 1px solid #C0C0C0; padding: 4px 6px; }
.tbl tr:hover td { background: #FFFFEE; }
.tbl .c { text-align: center; }
.tbl .num { text-align: center; color: #606060; width: 40px; }
.tbl .date { text-align: center; color: #606060; width: 78px; font-family: Verdana, sans-serif; font-size: 11px; }
.tbl .who { text-align: center; width: 64px; }
.view { border-top: 2px solid #000080; }
.view .vt { padding: 8px; background: #F4F6FA; border-bottom: 1px solid #808080; font-weight: bold; }
.view .vm { padding: 4px 8px; border-bottom: 1px dotted #808080; color: #606060; font-size: 11px; display: flex; gap: 20px; }
.view .vb { padding: 16px 10px 24px; border-bottom: 1px solid #808080; min-height: 160px; white-space: pre-line; }
.view .vb .sign { text-align: right; margin-top: 20px; }
.acts { margin-top: 10px; text-align: right; }
/* 메모 영역 */
.memo { background: #FFFFCC; border: 1px solid #C8A020; padding: 6px 8px; font-size: 11px; color: #404040; margin-top: 8px; }
.memo b { color: #806000; }
.admin { color: #606060; font-size: 11px; }
.reply { background: #F0F0F0; border-left: 3px solid #808080; padding: 6px 8px; font-size: 11px; margin: 8px 0 0 20px; }
/* 준비중 */
.wip { text-align: center; padding: 40px 0; }
.wip .sign { display: inline-block; background: repeating-linear-gradient(45deg, #FFCC00 0 12px, #000 12px 24px); padding: 6px; }
.wip .sign span { display: block; background: #fff; padding: 14px 40px; font-weight: bold; font-size: 18px; color: #000; }
.wip .worker { margin: 12px 0; animation: dig 1s steps(2) infinite; display: inline-block; }
@keyframes dig { 50% { transform: rotate(-12deg); } }
/* 팀원 소개 */
.member { border: 1px solid #A0A0A0; border-top-width: 3px; background: #fff; margin-bottom: 14px; display: flex; }
.member .photo { width: 112px; flex: none; padding: 8px; border-right: 1px dotted #A0A0A0; text-align: center; }
.member .photo .ph { width: 74px; height: 96px; border: 1px solid #808080; background: #D0D0D0; display: block; margin: 0 auto 4px; }
.member .photo img { width: 90px; height: 112px; border: 3px solid #808080; display: block; margin: 0 auto 4px; image-rendering: pixelated; image-rendering: crisp-edges; box-shadow: 1px 1px 0 #404040; }
.member .photo small { color: #606060; font-size: 10px; }
.member .info { flex: 1; padding: 8px 10px; min-width: 0; }
.member .info h4 { margin: 0 0 4px; font-size: 14px; }
.member .info h4 small { font-size: 11px; color: #606060; font-weight: normal; margin-left: 8px; }
.member .info dl { margin: 0; display: grid; grid-template-columns: 70px 1fr; gap: 2px 6px; }
.member .info dt { color: #000080; font-weight: bold; }
.member .info dd { margin: 0; }
.member .intv { margin-top: 8px; border: 1px dashed #808080; padding: 6px 8px; background: #FAFAFA; }
.member .intv b { color: #000080; }
/* 조직도 */
.org { width: 100%; }
.org .row { display: flex; gap: 8px; margin-bottom: 8px; align-items: stretch; }
.org .row > div { min-width: 0; }
.org .dept { width: 100%; height: 100%; }
.org .dept table { table-layout: fixed; }
.org .dept { border: 1px solid #808080; background: #fff; }
.org .dept h5 { margin: 0; background: #000080; color: #fff; text-align: center; padding: 3px; font-size: 12px; }
.org .dept table { width: 100%; }
.org .dept th { background: #E8ECF4; font-size: 11px; padding: 2px; border: 1px solid #C0C0C0; }
.org .dept td { text-align: center; padding: 2px; border: 1px solid #C0C0C0; font-size: 11px; white-space: nowrap; }
.org .dept td.me { background: #FFFFCC; font-weight: bold; }
.org .chief { text-align: center; margin-bottom: 8px; }
.org .chief span { display: inline-block; border: 2px solid #000080; padding: 4px 24px; font-weight: bold; background: #E8ECF4; }
/* 사건 기록 */
.case { display: flex; border-bottom: 1px dotted #808080; padding: 8px 4px; }
.case .thumb { width: 96px; height: 54px; flex: none; background: #404040; border: 1px solid #808080; margin-right: 10px; display: flex; align-items: center; justify-content: center; color: #C0C0C0; font-size: 10px; overflow: hidden; }
.case .thumb img { display: block; image-rendering: pixelated; }
.case { align-items: center; }
.case .info b { display: block; }
.case .info span { color: #606060; font-size: 11px; font-family: Verdana, sans-serif; }
.case .info .st { display: inline-block; background: #E8ECF4; border: 1px solid #A0A8C0; color: #000080; font-size: 10px; padding: 0 4px; margin-left: 6px; }
/* 메인 */
.main { display: flex; gap: 10px; }
.main .col1 { flex: 1; min-width: 0; }
.main .col2 { width: 172px; flex: none; }
.banner { background: #002855; border: 3px solid #C8A020; color: #fff; padding: 20px 18px 18px; height: 150px; position: relative; overflow: hidden; }
.banner .lb { display: inline-block; background: #C8A020; color: #000; font-weight: bold; padding: 1px 8px; font-size: 11px; }
.banner .pg { position: absolute; right: 12px; top: 8px; color: #8090A0; font-family: Verdana, sans-serif; font-size: 11px; }
#ct .banner h3 { margin: 8px 0 6px; font-size: 21px; color: #66CCFF; line-height: 1.3; border: 0; padding: 0; }
.banner p { color: #C0D0FF; margin: 0; }
.banner .slide { display: none; }
.banner .slide.on { display: block; }
.bd { border: 1px solid #A0A8C0; margin-top: 10px; }
.bd .h { background: #E8ECF4; padding: 4px 8px; font-weight: bold; color: #000080; display: flex; border-bottom: 1px solid #A0A8C0; }
.bd .h:before { content: '■'; margin-right: 4px; }
.bd .h a { margin-left: auto; font-weight: normal; font-size: 11px; font-family: Verdana, sans-serif; }
.bd ul { list-style: none; margin: 0; padding: 4px 8px; }
.bd li { display: flex; align-items: center; padding: 2px 0; border-bottom: 1px dotted #C0C0C0; line-height: 18px; }
.bd li:last-child { border: 0; }
.bd li a { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd li a:before { content: '· '; color: #3060A0; }
.bd li span { color: #606060; font-family: Verdana, sans-serif; font-size: 11px; margin-left: 8px; }
.wanted { border: 2px solid #CC0000; }
.wanted .h { background: #CC0000; color: #fff; text-align: center; font-weight: bold; letter-spacing: 6px; padding: 3px; }
.wanted .b { display: flex; padding: 8px 6px; gap: 8px; }
.wanted .b .ph { width: 56px; height: 68px; background: #D0D0D0; border: 1px solid #808080; flex: none; }
.wanted .b div { font-size: 11px; line-height: 1.6; }
.wanted .b .rw { color: #CC0000; }
.wanted .f { background: #FFECEC; text-align: center; color: #CC0000; font-weight: bold; padding: 3px; border-top: 1px solid #CC0000; font-size: 13px; }
.y2k { border: 1px solid #808080; text-align: center; padding: 10px 6px; margin-top: 10px; background: #F8F8F8; }
.y2k .hg { display: inline-block; animation: flip 2s linear infinite; margin-bottom: 4px; }
@keyframes flip { 0%,40% { transform: rotate(0); } 50%,90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
.y2k b { display: block; font-size: 13px; }
.y2k .dd { color: #CC0000; font-family: Verdana, sans-serif; font-weight: bold; font-size: 14px; }
.mys { background: #001030; border: 2px solid #3399CC; color: #fff; padding: 10px; margin-top: 10px; position: relative; }
.mys .tag { position: absolute; right: 8px; top: 8px; }
.mys .flame { text-align: center; }
.mys .flame img { image-rendering: pixelated; }
.mys h4 { margin: 4px 0; color: #66CCFF; font-size: 15px; letter-spacing: 2px; text-align: center; }
.mys p { color: #A0C0D8; font-size: 11px; margin: 0 0 6px; text-align: center; }
.mys a { color: #99DDFF; }
.flamehero { background: #001030; border: 2px solid #3399CC; color: #fff; text-align: center; padding: 14px 10px; margin-bottom: 14px; }
.flamehero img { image-rendering: pixelated; }
.flamehero b { display: block; color: #66CCFF; font-size: 18px; letter-spacing: 3px; margin: 6px 0; }
.flamehero span { color: #A0C0D8; }
/* 팝업 */
#popup { position: fixed; left: 50%; top: 120px; margin-left: -160px; width: 320px; background: #C0C0C0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 2px 2px 0 #000; z-index: 50; display: none; }
#popup .t { background: #000080; color: #fff; font-weight: bold; padding: 2px 6px; display: flex; }
#popup .t b { margin-left: auto; background: #C0C0C0; color: #000; width: 16px; text-align: center; cursor: pointer; border: 1px solid; border-color: #fff #404040 #404040 #fff; font-size: 10px; line-height: 12px; }
#popup .b { background: #fff; margin: 6px; padding: 12px; border: 1px solid #808080; }
#popup .b p { margin: 0 0 10px; }
#popup label { font-size: 11px; color: #404040; }
/* 인물 컬러 */
.c-sleepground { border-top-color: #3399FF !important; }
.c-heptagram { border-top-color: #CC9900 !important; }
.c-suhyen { border-top-color: #9933CC !important; }
.c-rather { border-top-color: #CC0000 !important; }
.c-ehdgh { border-top-color: #009933 !important; }
.c-duckgae { border-top-color: #FF6600 !important; }
/* 접속 화면 */
#dial { width: 420px; margin: 120px auto; background: #C0C0C0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 2px 2px 0 #000; }
#dial .t { background: #000080; color: #fff; font-weight: bold; padding: 3px 6px; }
#dial .b { padding: 16px; }
#dial .bar { height: 18px; border: 2px solid; border-color: #808080 #fff #fff #808080; background: #fff; margin: 10px 0; }
#dial .bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #000080 0 8px, #fff 8px 10px); }
#dial .log { font-family: 'Courier New', monospace; font-size: 11px; height: 60px; overflow: hidden; color: #404040; white-space: pre-line; }
/* 조직도 대원 소개 팝업 */
.org .dept td.me a { color: #000080; font-weight: bold; }
.org .dept td.me a:hover { color: #FF0000; }
.mpop-bg { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.25); z-index: 40; display: none; }
.mpop { position: fixed; left: 50%; top: 140px; margin-left: -190px; width: 380px; background: #C0C0C0; border: 2px solid; border-color: #fff #404040 #404040 #fff; border-top-width: 4px; box-shadow: 2px 2px 0 #000; z-index: 50; display: none; }
.mpop .t { background: #000080; background: linear-gradient(90deg, #000080, #1084D0); color: #fff; font-weight: bold; padding: 3px 6px; display: flex; align-items: center; font-size: 12px; }
.mpop .t b { margin-left: auto; background: #C0C0C0; color: #000; width: 16px; height: 14px; text-align: center; cursor: pointer; border: 1px solid; border-color: #fff #404040 #404040 #fff; font-size: 10px; line-height: 12px; }
.mpop .b { background: #fff; margin: 6px; padding: 10px; border: 1px solid #808080; }
.mp-body { display: flex; gap: 10px; }
.mp-photo { width: 96px; flex: none; text-align: center; }
.mp-photo img { width: 90px; height: 112px; border: 3px solid #808080; box-shadow: 1px 1px 0 #404040; image-rendering: pixelated; display: block; }
.mp-photo small { display: block; color: #606060; font-size: 10px; margin-top: 4px; }
.mp-info { flex: 1; min-width: 0; }
.mp-info h4 { margin: 0 0 6px; font-size: 14px; }
.mp-info h4 small { font-size: 11px; color: #606060; font-weight: normal; margin-left: 6px; }
.mp-info dl { margin: 0 0 8px; display: grid; grid-template-columns: 34px 1fr; gap: 2px 6px; font-size: 11px; }
.mp-info dt { color: #000080; font-weight: bold; }
.mp-info dd { margin: 0; }
.mp-foot { margin-top: 10px; text-align: right; border-top: 1px dotted #808080; padding-top: 8px; }
.mp-foot .btn98 { margin-left: 4px; }
/* 조직도 - 손상 레코드 표식 & 복구 패널 */
.glitch { position: absolute; right: -22px; bottom: -14px; background: #000; color: #00FFAA; font-family: 'Courier New', monospace; font-size: 11px; line-height: 12px; padding: 1px 3px; cursor: pointer; letter-spacing: -1px; user-select: none; display: none; animation: glitchjit 1.9s steps(1) infinite; }
.glitch span { display: block; }
.glitch span + span { color: #FF00AA; margin-top: -2px; }
.glitch:hover { color: #fff; }
@keyframes glitchjit {
0% { transform: translate(0,0); opacity: 1; }
7% { transform: translate(-2px,1px); opacity: .6; }
9% { transform: translate(1px,-1px); opacity: 1; clip-path: inset(0 0 45% 0); }
12% { clip-path: none; }
31% { opacity: .2; }
33% { opacity: 1; transform: translate(2px,0); }
35% { transform: translate(0,0); }
58% { opacity: 1; }
60% { opacity: 0; }
63% { opacity: 1; clip-path: inset(50% 0 0 0); }
66% { clip-path: none; }
84% { transform: translate(-1px,-1px); }
86% { transform: translate(0,0); }
}
.rec { margin: 0 6px 6px; background: #000; color: #C0C0C0; border: 1px solid #808080; padding: 6px 8px 8px; font-family: 'Courier New', monospace; display: none; }
.rec .rec-h { display: flex; font-size: 11px; color: #00FFAA; }
.rec .rec-h span + span { margin-left: auto; }
.rec .bar98 { height: 12px; border: 2px solid; border-color: #808080 #fff #fff #808080; background: #202020; margin: 4px 0 6px; }
.rec .bar98 i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #0080FF 0 8px, #202020 8px 10px); }
.rec pre { margin: 0; white-space: pre-wrap; word-break: break-all; font-family: inherit; font-size: 12px; line-height: 1.6; color: #E8E8E8; min-height: 58px; }
/* 팀원 소개 - 전문 역량 */
.member .skills { margin-top: 8px; border-top: 1px dotted #A0A0A0; padding-top: 6px; }
.member .skills .sk-h { font-weight: bold; color: #404040; font-size: 11px; margin-bottom: 3px; }
.member .skills .sk { font-size: 11px; line-height: 1.6; padding-left: 10px; text-indent: -10px; margin-bottom: 2px; }
.member .skills .sk b { margin-right: 4px; }
.member .skills .sk b:before { content: '· '; color: #3060A0; }
.member .skills .sk-note { margin-top: 6px; padding-top: 4px; border-top: 1px dotted #C0C0C0; font-size: 10px; color: #806000; }
/* 팀원 소개 - 고화질 사진 보기 */
.member .photo img[onclick]:hover { box-shadow: 0 0 0 2px #FFCC00, 1px 1px 0 #404040; }
.mpop.dlbox { width: 360px; margin-left: -180px; top: 200px; border-top-width: 2px; }
.mpop.dlbox .b { padding: 10px 12px; }
.dl-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 12px; }
.dl-ico { font-size: 22px; color: #000080; }
.dlbox .bar98 { height: 14px; border: 2px solid; border-color: #808080 #fff #fff #808080; background: #fff; margin: 4px 0 6px; }
.dlbox .bar98 i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #000080 0 8px, #fff 8px 10px); }
.mpop.fullwin { width: auto; margin-left: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); border-top-width: 4px; }
.mpop.fullwin .b { padding: 6px; text-align: center; }
.mpop.fullwin img { display: block; max-height: 78vh; max-width: 80vw; width: auto; height: auto; border: 1px solid #808080; background: #fff url('data:image/svg+xml;utf8,'); }
.fullcap { font-size: 11px; color: #404040; padding: 6px 2px 2px; }
/* 조직도 - 일반 직원 링크 & 未完 사진 자리 */
.org .dept td.st a { color: #000080; text-decoration: none; }
.org .dept td.st a:hover { color: #FF0000; text-decoration: underline; }
.mp-ph { width: 90px; height: 112px; border: 3px solid #808080; box-shadow: 1px 1px 0 #404040; background: #E0E0E0; display: none; align-items: center; justify-content: center; color: #808080; font-size: 16px; font-family: serif; letter-spacing: 2px; }
.org .chief a { text-decoration: none; }
.org .chief a:hover span { color: #FF0000; }
.mp-photo img { object-fit: cover; }
/* ===== 배경음악 ===== */
#bgm { position: fixed; right: 14px; bottom: 14px; width: 214px; background: #C0C0C0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 2px 2px 0 #000; z-index: 60; font-size: 11px; user-select: none; }
#bgm .t { background: linear-gradient(90deg, #000080, #1084D0); color: #fff; font-weight: bold; padding: 2px 5px; display: flex; align-items: center; font-size: 11px; cursor: default; }
#bgm .t b { margin-left: auto; background: #C0C0C0; color: #000; width: 14px; height: 12px; text-align: center; cursor: pointer; border: 1px solid; border-color: #fff #404040 #404040 #fff; font-size: 9px; line-height: 10px; }
#bgm .lcd { margin: 5px 5px 3px; background: #000; color: #00FF66; font-family: 'Courier New', monospace; font-size: 11px; line-height: 14px; padding: 3px 5px; border: 2px solid; border-color: #808080 #fff #fff #808080; overflow: hidden; white-space: nowrap; text-shadow: 0 0 2px #00FF66; }
#bgm .lcd .st { color: #FFCC00; float: right; }
#bgm .lcd .st.on { animation: blink 1s steps(2) infinite; }
#bgm .lcd marquee { display: block; width: 100%; }
#bgm .row { display: flex; align-items: center; gap: 3px; padding: 0 5px 5px; }
#bgm .row .btn98 { padding: 0 6px; font-size: 11px; line-height: 15px; font-family: Verdana, sans-serif; min-width: 24px; text-align: center; }
#bgm .row .btn98.dn { border-color: #404040 #fff #fff #404040; background: #B0B0B0; }
#bgm .row input[type=range] { flex: 1; height: 12px; margin: 0 2px; accent-color: #000080; }
#bgm .row .vol { font-family: 'Courier New', monospace; font-size: 10px; width: 26px; text-align: right; color: #000; }
#bgm.min .lcd, #bgm.min .row { display: none; }
#bgm.min { width: auto; }
#bgm .hint { position: absolute; left: -2px; right: -2px; top: -18px; text-align: center; font-size: 10px; color: #FFFF00; background: #000080; padding: 1px 4px; border: 1px solid #fff; animation: blink 1.2s steps(2) infinite; }
/* 사건 기록 - 영상 링크 */
.case .info b a { color: #0000FF; }
.case .info b a:visited { color: #800080; }
.case .thumb a { display: block; line-height: 0; }
.case.link:hover .thumb { border-color: #FF0000; box-shadow: 0 0 0 1px #FF0000; }
.case .info .vid { display: inline-block; background: #CC0000; color: #fff; font-size: 10px; padding: 0 4px; margin-left: 4px; font-family: Verdana, sans-serif; }
/* 자료실 - 행사 사진첩 */
.gal { display: flex; border-bottom: 1px dotted #808080; padding: 8px 4px; align-items: center; }
.gal .th { flex: none; margin-right: 12px; }
.gal .th img { display: block; border: 1px solid #808080; image-rendering: pixelated; }
.gal .in b { display: block; }
.gal .in span { color: #606060; font-size: 11px; font-family: Verdana, sans-serif; }
.galview { text-align: center; padding: 10px 0 6px; }
.galview img { max-width: 100%; border: 1px solid #808080; image-rendering: pixelated; box-shadow: 2px 2px 0 #C0C0C0; }
.galview .cap { color: #606060; font-size: 11px; margin-top: 6px; }
/* 또니 경장의 한마디 (접힘) */
.note { margin-top: 8px; }
.note .note-t { font-size: 11px; color: #806000; text-decoration: none; }
.note .note-t:hover { color: #FF0000; }
.note .note-b { margin-top: 4px; background: #FFFFCC; border: 1px solid #C8A020; padding: 6px 8px; font-size: 11px; color: #404040; }
.note .note-s { display: block; text-align: right; color: #806000; font-size: 10px; margin-top: 3px; }
.mp-info .note { margin-top: 4px; }
/* 조직도 - 안내 */
.org .dept tr.ex td { color: #808080; font-size: 10px; background: #F4F4F4; border-top: 1px dotted #C0C0C0; }
.org .dept.st { border-style: dashed; }
.org .dept.st h5 { background: #3060A0; }
.org .stlist { text-align: center; padding: 6px 4px 2px; font-size: 11px; color: #000080; }
.org .stnote { text-align: center; padding: 2px 6px 6px; font-size: 10px; color: #606060; }