/* ==========================================================================
   머리띠 아래 검은 띠의 한 줄 (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;
    }

    /* ---------------------------------------------------------------- */
    /* 이름표 옆으로 흐르는 줄                                     */
    /*                                                                    */
    /* 띄를 돌리는 예전 플러그인은 제 자리를 픽셀로 적어 둔다 -    */
    /* 틀을 왼쪽에서 180px 밀고 폭을 879px 로 박는다. 그대로 두면    */
    /* 휴대전화에서 화면 밖으로 나간다. 그래서 두 단추 사이의         */
    /* 남는 자리를 차지하도록 다시 재는다.                              */
    /* ---------------------------------------------------------------- */

    .quick-strip .quick-news {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .quick-strip-ticker .ticker-wrapper.has-js {
        /* 이름표 바로 옆에서 시작한다. 플러그인이 넣는 180px 를
           지우지 않으면 글이 저 멀리서 단추 밑에서 나타난다. */
        margin: 0;
        width: auto;
        height: 30px;
        background: none;
        /* basis 0 - auto 로 두면 플러그인이 잡아 둔 너비가 기준이 되어
           남는 자리를 채우지 않는다. 재어 보고 알았다 - 121px 가
           비었는데 116px 만 차지했다. */
        flex: 1 1 0%;
        min-width: 0;
        /* 왼쪽 틈과 같은 값. 왼쪽 틈은 이름표의 margin-right 가
           만든다 - 둘을 같은 숫자로 두어야 줄이 가운데 서 보인다. */
        margin-right: 13px;
    }

    .quick-strip-ticker .ticker {
        float: none;
        width: 100%;
        height: 30px;
        background: none;
    }

    .quick-strip-ticker .ticker-title {
        display: none;
    }

    .quick-strip-ticker .ticker-content {
        margin: 0;
        padding: 0;
        background: none;
        line-height: 30px;
        height: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .quick-strip-ticker .ticker-content a {
        color: #e8e8e8;
        font-size: 12px;
        font-weight: normal;
        text-decoration: none;
    }

    .quick-strip-ticker .ticker-content a:hover {
        color: #ffffff;
    }

    /* 글자를 가리며 지나가는 띄. 기본 높이는 23px 인데 줄이
       30px 이라 글자 밑부분이 밖으로 빠져나온다. */
    .quick-strip-ticker .ticker-swipe {
        background: #222222;
        height: 30px;
        top: 0;
    }

    .quick-strip-ticker .ticker-swipe span {
        height: 30px;
        border-bottom: none;
        background: #222222;
    }

    /* 띄가 흐르는 줄을 실은 때 단추는 바로 그 옆이다 - 둘 사이의
       간격은 위의 margin-right 가 맡는다. */
    .quick-strip-ticker .quick-btn {
        margin-left: 0;
    }

    /* 단추가 없는 줄 - 핑퍽 화면이 그렇다. 그 화면에는 글쓰기
       단추가 이미 서 있어 띄에 또 두지 않았다. 그럴 때는 흐르는 글이
       오른쪽 끝까지 간다 - 비워 둘 마지막 틈은 무엇을 띄우지 않는다. */
    .quick-strip-ticker .ticker-wrapper.has-js:last-child {
        margin-right: 0;
    }

    /* 런던은 띄 자체가 초록이다. 가리는 띄도 같은 색이어야 글자가
       검은 네모 뒤로 사라지는 것처럼 보이지 않는다. */
    .heading-news2.site-london .quick-strip-ticker .ticker-swipe,
    .heading-news2.site-london .quick-strip-ticker .ticker-swipe span {
        background: #1b3d2c;
    }

    /* 오른쪽 단추. 여러 개일 수 있다(게시판은 둘이다). */
    .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;
    }

    /* 이름표의 틈이 11px 로 줄었으므로 이쪽도 같이 줄인다. */
    .quick-strip-ticker .ticker-wrapper.has-js {
        margin-right: 11px;
    }

    /* 위의 .quick-strip .quick-btn 규칙이 여기서 5px 를 다시 넣는다 -
       세기가 같고 뒤에 서 있어 그쪽이 이긴다. 다시 지운다.
       재어 보고 알았다 - 오른쪽 틈이 16px, 왼쪽이 11px 이었다. */
    .quick-strip-ticker .quick-btn {
        margin-left: 0;
    }
}