/* ============================================================
   찾기칸 (Controls/MainGroupPageSearch)
   ------------------------------------------------------------
   블로그 소개, 커뮤니티, 게시판, 해결사, YouTV 가 이 한 칸을
   같이 쓴다. 그런데 모양은 지금까지 style.css 의 .search-form
   에서 왔다 - 사 온 서식에 딸려 있던 것이라 이 사이트의 것이
   아니었다. 여기서 그 부분만 다시 적는다.
   ============================================================ */

/* 회색 판을 걷어낸다. 칸 하나를 담자고 98px 짜리 덩어리를 두면
   그 아래 진짜 내용이 그만큼 밀린다. */
.forum-box .search-box {
    padding: 14px 0;
    background: none;
}

.forum-box .search-form {
    position: relative;
    margin: 0;
}

/* 서식에서 온 세 가지를 되돌린다.

   11px - 이 화면에서 가장 작은 글자였다. 치는 칸은 읽는 칸보다
   커야지 작으면 안 된다.

   #999 - 흐린 회색은 아직 아무것도 치지 않았다는 표시로 쓰는
   색인데, 그 색이 사람이 친 글자에까지 걸려 있었다.

   uppercase - 한글에는 대문자가 없어 아무 일도 하지 않다가,
   영어를 치는 사람에게만 제 글자를 바꿔 보여 준다. */
.forum-box .search-form input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 11px 46px 11px 14px;
    font-size: 15px;
    font-family: 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', 'Lato', sans-serif;
    text-transform: none;
    color: #222222;
    border: 1px solid #c8d0d8;
    border-radius: 4px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

/* 아직 치지 않은 칸에만 흐린 색을 쓴다. */
.forum-box .search-form input[type="text"]::-webkit-input-placeholder { color: #98a2ab; }
.forum-box .search-form input[type="text"]::-moz-placeholder { color: #98a2ab; opacity: 1; }
.forum-box .search-form input[type="text"]:-ms-input-placeholder { color: #98a2ab; }
.forum-box .search-form input[type="text"]::placeholder { color: #98a2ab; }

.forum-box .search-form input[type="text"]:focus {
    border-color: #1a84b9;
    box-shadow: 0 0 0 2px rgba(26,132,185,0.15);
}

/* 돋보기 하나만 떠 있던 것을 눌러지는 단추로 만든다. 예전에는
   12 x 19 픽셀이라 누를 자리를 찾다가 그냥 Enter 를 치거나
   포기했다. */
.forum-box .search-form a,
.forum-box .search-form button {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-left: 1px solid #dfe4e8;
    border-radius: 0 4px 4px 0;
    font-size: 15px;
    color: #1a84b9;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.forum-box .search-form a:hover,
.forum-box .search-form button:hover {
    background-color: #1a84b9;
    color: #ffffff;
}

/* ---------- 찾은 것이 없을 때 ---------- */
.SearchEmpty {
    margin-bottom: 20px;
}

.SearchEmptyText {
    margin: 0;
    padding: 26px 20px;
    text-align: center;
    font-size: 14px;
    color: #6b757d;
    background: #f7f9fa;
    border: 1px solid #e4e9ed;
    border-radius: 4px;
}

/* ============================================================
   찾은 결과
   ------------------------------------------------------------
   이 두 칸의 모양은 지금까지 VideoIntro.css 에 적혀 있었다.
   그런데 블로그 소개 화면은 그 파일을 읽지 않는다 - 그래서
   사진이 제 크기 그대로(750 x 536) 나오고 목록 줄은 두 줄로
   갈라졌다. 다른 화면의 파일을 통째로 불러오면 그 화면 것까지
   따라오므로, 여기 필요한 것만 다시 적는다.

   바깥 칸(BlogSearchResult / BlogPostSearchResult)으로 묶어
   두는 이유도 같다 - 같은 이름의 클래스를 쓰는 다른 화면이
   있어 이름만으로 적으면 그쪽 모양까지 건드린다.
   ============================================================ */

/* ---------- 블로그 검색 결과 ---------- */
.BlogSearchResult .ArticleContainer {
    margin-bottom: 14px;
}

.BlogSearchResult .Article {
    display: flex;
    align-items: flex-start;
    height: auto;
    padding-bottom: 14px;
    border-bottom: 1px dotted #dedcdc;
    overflow: hidden;
}

/* 사진은 한 변 110px 안에 가둔다. 블로거가 올린 그림은 크기도
   비율도 제각각이라 자리를 정해 두지 않으면 화면을 다 차지한다. */
.BlogSearchResult .BlogName {
    position: static;
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    padding: 0;
    top: 0;
    overflow: hidden;
    border: 1px solid #e4e9ed;
    border-radius: 4px;
    background: #f7f9fa;
}

/* cover - 비율을 지키면서 칸을 채운다. 늘어나거나 찌그러지지
   않고 넘치는 쪽만 잘린다. */
.BlogSearchResult .BlogName img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

.BlogSearchResult .BlogContentLong {
    flex: 1;
    min-width: 0;
    height: auto;
    margin: 0 0 0 14px;
    padding-top: 0;
}

.BlogSearchResult .BlogSubject {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: bold;
}

/* 소개글은 석 줄까지만. 길게 쓴 사람 하나가 목록 전체를
   밀어내지 않게 한다. */
.BlogSearchResult .BlogArticle {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5;
    color: #6b757d;
}

/* ---------- 블로그 글 검색 결과 ---------- */

/* 제목 / 날짜 / 아이디 를 한 줄에 세운다. 예전에는 제목만
   제 줄을 차지하고 날짜와 아이디가 아래로 떨어져, 한 건이
   두 줄로 보였다. */
.BlogPostSearchResult .ListTitleWrapper,
.BlogPostSearchResult .BoardListItemTitleWrapper {
    display: flex;
    align-items: center;
}

.BlogPostSearchResult .ListLeftTitle,
.BlogPostSearchResult .ClubBoardListItemName {
    flex: 1;
    min-width: 0;
    float: none;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.BlogPostSearchResult .AlternativeColumn {
    flex: 0 0 100px;
    float: none;
    width: 100px;
    text-align: right;
}

/* ---------- 사이 띄우기 ---------- */

/* 쪽 번호 줄.
   담는 칸은 20px 인데 그 안의 단추는 29px 이었다. 넘치는 9px 이
   위로는 마지막 줄에, 아래로는 다음 제목에 겹쳐 얹혔다. 줄 높이를
   단추보다 크게 잡아 단추가 제 칸 안에 들어오게 한다. */
.BlogPostSearchResult #BoardListPager,
.BlogSearchResult #BoardListPager {
    clear: both;
    margin: 18px 0 6px;
    line-height: 32px;
}

/* '블로그 검색 결과' 가 바로 위 쪽 번호에 붙어 있었다. 두 칸은
   서로 다른 결과이므로 눈에 띄게 떼어 놓는다. */
.BlogSearchResult {
    margin-top: 30px;
}

.BlogPostSearchResult .TitleContainer,
.BlogSearchResult .TitleContainer {
    margin-bottom: 10px;
}