/* ==========================================================================
   블로그 목록 오른쪽 줄 맨 위의 권유 상자 (Controls/BlogInvite.ascx)

   옆에 선 상자들(About, Random Post, Hot Categories)과 같은 폭, 같은
   자리에 서되 그것들처럼 보이면 안 된다. 그쪽은 읽을거리이고 이쪽은
   누르라고 놓은 것이다. 그래서 테두리 대신 옅은 바탕을 깔고 왼쪽에
   굵은 띠를 세운다.

   빨강을 쓰지 않는다. 휴대전화 검은 띠의 단추가 빨강이고, 머리띠
   윗줄에는 카톡방의 노랑이 있다. 한 화면에서 세 가지가 서로 외치면
   셋 다 지고, 무엇보다 이 상자는 '지금 당장'을 재촉하는 것이 아니라
   권하는 것이다.
   ========================================================================== */

.blog-invite {
    margin-bottom: 30px;
}

.blog-invite-inner {
    background: #f3f6fa;
    border-left: 4px solid #2f6fa8;
    padding: 18px 18px 20px;
}

.blog-invite-title {
    font-size: 17px;
    font-weight: 700;
    color: #1d3f5e;
    line-height: 1.35;
    /* 한글은 낱말 가운데서 끊기면 읽기 나쁘다. */
    word-break: keep-all;
}

.blog-invite-text {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.65;
    color: #4a5a68;
    word-break: keep-all;
}

.blog-invite-button {
    display: inline-block;
    margin-top: 14px;
    background: #2f6fa8;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 10px 18px;
    border-radius: 3px;
    text-decoration: none;
}

.blog-invite-button:hover,
.blog-invite-button:focus {
    background: #255a89;
    color: #fff;
    text-decoration: none;
}

/* 좁은 화면에서는 오른쪽 줄이 본문 아래로 내려온다. 그때는 한 줄을
   가득 채우는 단추가 누르기 쉽다. */
@media (max-width: 767px) {
    .blog-invite-button {
        display: block;
        text-align: center;
        padding: 12px 18px;
    }
}