/* 이벤트 한 건을 보여 주는 자리.

   게시글 상세(BoardDetail)와 같은 결로 맞춘다. 두 화면이 나란히 쓰이므로
   글자 크기와 여백이 서로 달라 보이면 안 된다. */

.event-detail {
    padding: 10px 0 40px;
}

/* 그림. 폭에 맞추고 높이는 그림이 정한다 - 이벤트 포스터는 세로로 긴
   것도 있고 가로로 넓은 것도 있어서, 높이를 정해 두면 어느 한쪽이 잘린다. */
.event-detail-image {
    margin: 0 0 24px;
    text-align: center;
}

.event-detail-img {
    max-width: 100%;
    height: auto;
    border: 1px solid #e5e5e5;
}

.event-detail-title {
    font-size: 22px;
    line-height: 1.45;
    font-weight: bold;
    color: #222;
    margin: 0 0 14px;
    word-break: keep-all;   /* 한글 제목이 낱말 가운데서 끊기지 않게 */
}

.event-detail-rule {
    border-top: 2px solid #333;
    margin: 0 0 22px;
}

.event-detail-body {
    font-size: 15px;
    line-height: 1.85;
    color: #333;
}

/* 에디터에서 온 글 안의 것들. 백오피스에서 넣은 그림과 표가 칸을
   넘지 않게 묶어 둔다 - 넘으면 오른쪽 광고 띠를 밀어낸다. */
.event-detail-body img,
.event-detail-body iframe,
.event-detail-body table {
    max-width: 100%;
}

.event-detail-body img {
    height: auto;
}

.event-detail-body p {
    margin: 0 0 14px;
}

/* 원래 주소가 적혀 있으면 그리로 가는 단추. 글이 있어서 이 화면으로
   왔더라도, 업소 제 사이트를 보고 싶은 사람은 있다. */
.event-detail-link {
    margin: 30px 0 0;
}

.event-detail-link a {
    display: inline-block;
    padding: 10px 22px;
    background: #2c7be5;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    text-decoration: none;
}

.event-detail-link a:hover {
    background: #1b64c4;
}

.event-detail-missing {
    padding: 60px 0;
    text-align: center;
    color: #777;
    font-size: 15px;
    line-height: 2;
}

.event-detail-missing a {
    color: #2c7be5;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .event-detail-title { font-size: 19px; }
    .event-detail-body  { font-size: 14.5px; }
}