@charset "utf-8";
    
    #container { width:100%; }

    .barWrap {
        position:relative;
        width:100%;
        height:18px;
        background:#222;
        overflow:hidden;
        border-bottom:1px solid #101010;
    }

    /* 왼쪽 롱 */
    .barLong {
        position:absolute;
        left:0;
        top:0;
        height:100%;
        background:#00e100;  /* 메로나 */
        transition:width 0.25s ease;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:12px;
        font-weight:bold;
        color:#000;
    }

    /* 오른쪽 숏 */
    .barShort {
        position:absolute;
        right:0;
        top:0;
        height:100%;
        background:#ec0000; /* 빨강 */
        transition:width 0.25s ease;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:12px;
        font-weight:bold;
        color:#fff;
    }