/* ==========================================================================
   머리띠 아래 검은 띠의 한 줄 (QuickStrip)

   그 띠(section.heading-news2)는 BIZ EVENT 를 싣는다. 그런데 흐르는 글은
   991px 아래에서 감춰지고(style.css 의 미디어 규칙), 배경과 아래 여백
   35px 는 그대로 남는다. 그래서 휴대전화에서는 모든 화면 맨 위에 45px
   짜리 빈 검은 칸이 서 있었다.

   여기서는 그 자리를 채운다. 992px 위에서는 아무것도 하지 않는다 - 그
   자리는 흐르는 글의 것이다.
   ========================================================================== */

/* 넓은 화면에서는 한 줄을 내지 않는다. BIZ EVENT 가 그 자리에 있다. */
.quick-strip-wrap {
    display: none;
}

@media (max-width: 991px) {

    /* 낼 말이 있는 띠. 아래 여백 35px 은 흐르는 글을 위한 것이었으므로
       위아래를 같게 둔다. */
    .heading-news2.has-quick {
        padding: 8px 0;
    }

    /* 낼 말이 없는 띠는 접는다. 예전에는 여기가 빈 검은 칸이었다. */
    .heading-news2.no-quick {
        padding: 0;
        border: none;
    }

    .quick-strip-wrap {
        display: block;
    }

    .quick-strip {
        display: flex;
        align-items: center;
        min-height: 30px;
    }

    /* 왼쪽 이름표. BIZ EVENT 딱지와 같은 모양이다 - 모서리가 둥근 네모에
       오른쪽으로 꼬리가 하나 나온다. 색은 아하이디어 빨강이다. */
    .quick-strip .quick-label {
        flex: 0 0 auto;
        position: relative;
        margin-right: 13px;
        padding: 7px 13px;
        /* 오른쪽만 더 둔다. 꼬리(:after)는 글자 위에 그려지므로, 자리를
           비워 두지 않으면 마지막 글자를 덮는다 - BIZ EVENT 딱지도 같은
           까닭으로 오른쪽 여백만 더 크다. overflow:hidden 은 쓰지 않는다.
           그것을 쓰면 상자 밖으로 나온 꼬리가 잘린다. */
        /* 21px 짜리 네모를 45도 돌리면 가로로 21*1.414 = 29.7px 가 된다.
           그 왼쪽 끝은 상자 오른쪽에서 19.4px 안까지 들어온다. 그래서 16px
           으로는 모자랐다 - 마지막 글자가 덮였다. 21px 이면 1.6px 남는다. */
        padding-right: 21px;
        background: #ee0038;
        border-radius: 4px;
        color: #ffffff;
        font-size: 12px;
        line-height: 13px;
        font-weight: 700;
        white-space: nowrap;
        text-decoration: none;
    }

    .quick-strip a.quick-label:hover,
    .quick-strip a.quick-label:focus {
        background: #c6002f;
        color: #ffffff;
        text-decoration: none;
    }

    .quick-strip .quick-label:after {
        content: '';
        position: absolute;
        top: 3px;
        right: -6px;
        width: 21px;
        height: 21px;
        background: inherit;
        border-radius: 5px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
    }

    /* 이름표와 단추 사이. 단추를 오른쪽 끝으로 민다. */
    .quick-strip .quick-gap {
        flex: 1 1 auto;
        min-width: 8px;
    }

    /* 오른쪽 단추. 여러 개일 수 있다(게시판은 둘이다). */
    .quick-strip .quick-btn {
        flex: 0 0 auto;
        margin-left: 6px;
        padding: 6px 11px;
        border: 1px solid #6b6b6b;
        border-radius: 4px;
        color: #e8e8e8;
        font-size: 12px;
        line-height: 14px;
        white-space: nowrap;
        text-decoration: none;
    }

    .quick-strip .quick-btn:hover,
    .quick-strip .quick-btn:focus {
        border-color: #ffffff;
        color: #ffffff;
        text-decoration: none;
    }

    .quick-strip .quick-btn-accent {
        background: #ee0038;
        border-color: #ee0038;
        color: #ffffff;
        font-weight: 700;
    }

    .quick-strip .quick-btn-accent:hover,
    .quick-strip .quick-btn-accent:focus {
        background: #c6002f;
        border-color: #c6002f;
        color: #ffffff;
    }
}

/* 아주 좁은 화면. 글자를 줄이고 여백을 깎아 한 줄을 지킨다 - 줄을
   바꾸면 띠가 두 겹이 되어 화면 맨 위를 더 먹는다. */
@media (max-width: 400px) {

    .quick-strip .quick-label {
        margin-right: 11px;
        padding: 7px 10px;
        /* 꼬리 크기는 좁은 화면에서도 같다. 왼쪽만 줄이고 오른쪽은 지킨다. */
        padding-right: 21px;
        font-size: 11px;
    }

    .quick-strip .quick-btn {
        margin-left: 5px;
        padding: 6px 8px;
        font-size: 11px;
    }
}