:root{

    --job-width:165px;
    --person-width:50px;
    --job-height:42px;
}
.main_display{
    width:98%;
    margin:3px auto;
}

table{
    width:auto;
    border-collapse:collapse;
    background:white;
    table-layout:fixed;
}

add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
th{
    height:50px;
    background:#222;
    color:white;
    font-size:22px;
}

.week_title{
    background:#444;
    color:white;
    font-size:16px;
    height:40px;
    text-align:center;
}

.bottom_menu{
    background:#efefef;
    font-weight:bold;
    height:35px;
    text-align:center;
}

.side_title{
    width:70px;
    font-weight:bold;
    text-align:center;
    background:#efefef;
}

.job{

    width:var(--job-width);
    min-width:var(--job-width);
    max-width:var(--job-width);

    height:var(--job-height);

    cursor:pointer;
    vertical-align:top;
    padding:5px;
    position:relative;
    transition:0.2s;

    overflow:hidden;

    word-break:break-all;
}

.job:hover{
    background:#f0f8ff;
}

.person{

    width:var(--person-width);
    min-width:var(--person-width);
    max-width:var(--person-width);

    text-align:center;
    font-size:13px;
}

.today{
    background:#fff4cc;
}

.saturday{
    background:#eef7ff;
}

.sunday{
    background:#ffecec;
}

.completed{
    background:#d4ffd4 !important;
}

.job_title{
    font-weight:bold;
    color:#0044cc;
    font-size:14px;
}

.job_content{
    font-size:12px;
    margin-top:4px;
}

.complete_badge{
    position:absolute;
    top:2px;
    right:2px;
    background:green;
    color:white;
    font-size:10px;
    padding:2px 5px;
    border-radius:4px;
}

#modal{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.5);

    z-index:999;
}

.modal-content{

    width:450px;

    background:white;

    margin:80px auto;

    padding:20px;

    border-radius:10px;
}

input,textarea,select{

    width:100%;
    box-sizing:border-box;
    padding:8px;
    margin-top:5px;
}

textarea{
    height:100px;
}

button{
    padding:10px 15px;
    cursor:pointer;
}

.top_menu{
    margin-bottom:10px;
}

/* 돌발 고장 시간 수기 입력 헤더 레이아웃 */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
}

.header-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.breakdown-dashboard {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #333;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: normal;
    border: 1px solid #555;
}

.breakdown-item {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #fff;
}

.breakdown-item input {
    width: 50px;
    padding: 2px 4px;
    margin-top: 0;
    text-align: right;
    font-size: 13px;
    border: 1px solid #777;
    border-radius: 3px;
    background: #fff;
    color: #000;
}

.fixed-box{
    display:none;
    position:fixed;
    top:5px;
    right:20px;

    width:595px;
    height:55px;
    background-color:red;
    font-weight:bold;
}

body{
    font-size:10px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}