body { background:#111; color:#eee; font-family:Arial; padding:20px; }
    #container {
        width:100%;
        max-width:99%;
        margin:auto;
        padding-top:25px;
    }

    .barWrap {
        position:relative;
        width:100%;
        height:80px;
        background:#222;
        border-radius:8px;
        overflow:hidden;
        border:1px solid #333;
    }

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

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

    #percentText {
        margin-top:12px;
        text-align:center;
        font-size:20px;
        color:#0af;
        font-weight:bold;
    }

    select {
        padding:6px 10px;
        font-size:15px;
        background:#222;
        color:#fff;
        border:1px solid #444;
        border-radius:5px;
        margin-bottom:15px;
    }