@font-face{font-family:DungGeunMo;src:url('/static/DungGeunMo.woff2') format('woff2');font-display:swap}
*{box-sizing:border-box}
body{margin:0;background:#050505;color:#d9d9d9;font-family:DungGeunMo,monospace;font-size:17px;line-height:1.55}
.wrap{max-width:1120px;margin:0 auto;padding:18px}
.top{border:2px solid #1047ff;background:#06148c;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{color:#fff;text-decoration:none;font-size:22px;white-space:nowrap}
nav{display:flex;gap:8px;flex-wrap:wrap}
nav a,.menu a,button{font-family:inherit;text-decoration:none;color:#00e5ff;background:#050505;border:1px solid #8a8a8a;padding:6px 12px;cursor:pointer}
nav a.on,nav a:hover,.menu a:hover,button:hover{background:#072c35;color:#39ff14}
.loginbox,.panel{border:1px solid #aaa;margin-top:18px;padding:22px;background:#020202;box-shadow:0 0 0 2px #111 inset}
.loginbox{text-align:center;max-width:820px;margin:80px auto}
.loginbox h1{color:#39ff14;letter-spacing:2px;font-size:30px;white-space:nowrap}
.loginbox form{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.loginbox input,.form input,.form select,.yearbar select,.yearbar input{font-family:inherit;background:#020202;color:#fff;border:1px solid #8a8a8a;padding:7px 10px;font-size:17px}
h2{color:#00e5ff;margin:0 0 16px}
.summary{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #aaa;margin-bottom:22px}
.summary div{padding:16px;text-align:center;border-right:1px dashed #777}
.summary div:last-child{border-right:0}
.summary b{display:block;color:#fff}
.summary span{display:block;font-size:24px;color:#fff;margin-top:8px}
.summary small{display:block;color:#39ff14}
table{width:100%;border-collapse:collapse}
th,td{padding:7px 9px;border-bottom:1px dashed #777;text-align:left}
th{color:#fff}
td:nth-child(1),td:nth-child(2),td:nth-child(4){white-space:nowrap}
.yearbar{margin-top:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.form{display:grid;gap:14px;max-width:720px}
.form.inline{display:flex;flex-wrap:wrap;align-items:end}
.form label{display:grid;gap:5px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.danger{color:#ff6b6b}
.menu{display:grid;gap:10px;max-width:520px}
.menu a{display:block}
.msg{border:1px solid #39ff14;color:#39ff14;margin-top:16px;padding:10px}
.err{border:1px solid #ff6b6b;color:#ff6b6b;margin-top:16px;padding:10px}
.hint{color:#aaa}
.months{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:18px 0}
.months label{border:1px solid #777;padding:10px}
.pager{display:flex;gap:16px;align-items:center;justify-content:center;margin-top:18px;flex-wrap:wrap}
.pager a,.pager span{border:1px solid #777;padding:6px 14px;color:#00e5ff;text-decoration:none}
.pager span{color:#777}
footer{color:#00e5ff;border-top:1px solid #00e5ff;margin-top:24px;padding-top:10px}

/* 입금/출금 목록: 페이지가 바뀌어도 컬럼 위치가 고정되도록 전용 그리드 사용 */
.tx-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px dashed #777;border-bottom:1px dashed #777}
.tx-list{min-width:920px}
.tx-row{display:grid;grid-template-columns:4ch 10ch 20em 10ch minmax(18em,1fr);column-gap:2ch;align-items:start;padding:7px 0;border-bottom:1px dashed #555}
.tx-row:last-child{border-bottom:0}
.tx-head{color:#fff;border-bottom:1px dashed #aaa}
.tx-num,.tx-amount{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tx-date{white-space:nowrap;font-variant-numeric:tabular-nums}
.tx-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-remark{white-space:normal;word-break:break-word;overflow-wrap:anywhere}
.tx-empty{padding:14px 0;color:#aaa}

@media(max-width:760px){
  body{font-size:15px}
  .wrap{padding:10px}
  .loginbox,.panel{padding:16px;margin-top:12px}
  .loginbox{margin:48px auto;max-width:100%}
  .loginbox h1{font-size:23px;letter-spacing:0;white-space:nowrap}
  .top{align-items:flex-start;flex-direction:column}
  .brand{font-size:20px}
  nav a,.menu a,button{padding:6px 10px}
  .summary{grid-template-columns:1fr}
  .summary div{border-right:0;border-bottom:1px dashed #777}
  table{font-size:14px}
  .months{grid-template-columns:repeat(2,1fr)}
  .tx-list{min-width:780px}
  .tx-row{grid-template-columns:4ch 10ch 20em 10ch minmax(14em,1fr);column-gap:2ch}
}

@media(max-width:420px){
  .loginbox h1{font-size:20px}
  .loginbox form{display:grid;grid-template-columns:1fr;width:100%}
  .loginbox input,.loginbox button{width:100%}
}