/* winsonic board skin */

.wb-wrap{max-width:1100px;margin:90px auto;padding:0 20px;}
.wb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;}
.wb-title{line-height:1.1;}
.wb-title h2{font-size:34px;font-weight:900;letter-spacing:-1px;margin:0;}
.wb-title p{margin-top:8px;color:#777;font-size:14px;letter-spacing:1px;}

.wb-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.wb-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;padding:0 14px;border-radius:10px;
  border:1px solid #d9d9d9;background:#fff;color:#222;
  font-size:14px;font-weight:800;cursor:pointer;
}
.wb-btn.primary{border-color:#1b3f8b;background:#1b3f8b;color:#fff;}
.wb-btn.ghost{background:transparent;}
.wb-btn:disabled{opacity:.5;cursor:not-allowed;}

.wb-board{border-top:2px solid #111;border-bottom:1px solid #e6e6e6;background:#fff;border-radius:14px;overflow:hidden;}
.wb-row{
  display:grid;
  grid-template-columns: 84px 1fr 120px 110px;
  gap:10px;
  padding:16px 18px;
  border-top:1px solid #eee;
  align-items:center;
}
.wb-row:first-child{border-top:none;}
.wb-row.head{background:#f7f8fb;font-weight:900;color:#111;}
.wb-row.head .wb-td{font-size:13px;color:#333;}

.wb-td{font-size:14px;color:#222;min-width:0;}
.wb-no{font-weight:900;color:#2c6ed5;}
.wb-date,.wb-hit{color:#666;font-size:13px;text-align:right;}
.wb-writer{color:#555;font-size:13px;text-align:right;}

.wb-subject{display:flex;align-items:center;gap:10px;min-width:0;}
.wb-subject a{display:inline-block;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wb-badges{display:inline-flex;gap:6px;flex-wrap:wrap;}
.wb-badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:20px;padding:0 8px;border-radius:999px;
  font-size:11px;font-weight:900;letter-spacing:-.2px;
  background:#eef2ff;color:#2c6ed5;border:1px solid #dbe4ff;
}
.wb-badge.notice{background:#fff2f2;color:#d53333;border-color:#ffd1d1;}
.wb-badge.deadline{background:#f2fff8;color:#1b7b4c;border-color:#c8f2dc;}

.wb-empty{padding:50px 18px;text-align:center;color:#777;font-weight:700;}

.wb-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;}
.wb-pages{flex:1;}
.wb-search{
  display:flex;gap:8px;align-items:center;justify-content:flex-end;flex:1;flex-wrap:wrap;
}
.wb-search select,.wb-search input{
  height:38px;border:1px solid #d9d9d9;border-radius:10px;padding:0 12px;font-size:14px;
}
.wb-search input{min-width:220px;max-width:340px;width:100%;}

.wb-view{border-top:2px solid #111;border-bottom:1px solid #e6e6e6;border-radius:14px;overflow:hidden;background:#fff;}
.wb-view-head{padding:18px;border-bottom:1px solid #eee;}
.wb-view-head h1{margin:0;font-size:22px;font-weight:900;letter-spacing:-.5px;line-height:1.3;}
.wb-meta{margin-top:10px;display:flex;gap:12px;flex-wrap:wrap;color:#666;font-size:13px;}
.wb-view-body{padding:22px;line-height:1.9;color:#222;}
.wb-attach{padding:16px 18px;border-top:1px solid #eee;background:#fbfbfd;}
.wb-attach h3{font-size:14px;margin:0 0 10px;font-weight:900;}
.wb-attach a{display:block;padding:6px 0;color:#1b3f8b;font-weight:800;}

.wb-form{border-top:2px solid #111;border-bottom:1px solid #e6e6e6;border-radius:14px;overflow:hidden;background:#fff;}
.wb-form .row{padding:16px 18px;border-top:1px solid #eee;display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:start;}
.wb-form .row:first-child{border-top:none;}
.wb-form label{font-weight:900;color:#111;}
.wb-form input[type="text"], .wb-form input[type="file"], .wb-form select, .wb-form textarea{
  width:100%;border:1px solid #d9d9d9;border-radius:10px;padding:10px 12px;font-size:14px;
}
.wb-form textarea{min-height:240px;resize:vertical;}
.wb-help{margin-top:8px;color:#777;font-size:12px;line-height:1.4;}

.wb-mobile-only{display:none;}

@media (max-width: 768px){
  .wb-wrap{margin:70px auto;}
  .wb-title h2{font-size:26px;}
  .wb-row{grid-template-columns: 1fr;gap:8px;}
  .wb-row.head{display:none;}
  .wb-no,.wb-date,.wb-hit,.wb-writer{text-align:left;}
  .wb-mobile-only{display:inline-flex;}
  .wb-date,.wb-hit,.wb-writer{font-size:12px;}
  .wb-search{justify-content:flex-start;}
  .wb-search input{min-width:0;max-width:100%;}
  .wb-form .row{grid-template-columns:1fr;gap:8px;}
}