/* ============================================================
   머리말의 찾기칸 (Controls/TorontoHeader)
   ------------------------------------------------------------
   왼쪽에 '찾을 곳' 을 고르는 칸이 붙었다. 둘과 돋보기가 따로 놀지
   않고 한 덩어리로 보이게 맞춘다.

   모양의 바탕은 style.css 의 .navbar-form 에서 오는데 그것은 사 온
   서식이라, 여기서 고칠 것만 다시 적는다.
   ============================================================ */

.HeaderSearch {
    display: flex;
    align-items: stretch;
    position: relative;
}

/* 찾을 곳. 좁게 잡는다 - 차림표가 긴 화면에서 이 칸까지 넓으면
   줄이 넘어간다. */
.HeaderSearch #search-scope {
    width: 96px;
    height: 38px;
    padding: 0 6px;
    margin: 0;
    font-size: 12px;
    color: #dddddd;
    background: #2b2b2b;
    border: 1px solid #333333;
    border-right: none;
    border-radius: 2px 0 0 2px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: menulist;
    appearance: menulist;
}

/* 고른 이름은 검은 바탕 위에 올라오지만, 펼쳐진 목록은 브라우저가
   제 색으로 그린다. 거기서도 글자가 보이도록 밝은 바탕을 준다. */
.HeaderSearch #search-scope option {
    color: #222222;
    background: #ffffff;
}

/* 서식에서 온 11px 과 uppercase 를 되돌린다. 한글에는 대문자가 없어
   uppercase 는 아무 일도 하지 않다가 영어를 치는 사람에게만 제 글자를
   바꿔 보여 준다. */
.HeaderSearch input[type="text"] {
    width: 186px;
    height: 38px;
    padding: 0 34px 0 10px;
    margin: 0 !important;
    font-size: 13px;
    font-family: 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', 'Lato', sans-serif;
    text-transform: none;
    color: #eeeeee;
    border-radius: 0 2px 2px 0;
}

.HeaderSearch input[type="text"]::-webkit-input-placeholder { color: #8d8d8d; }
.HeaderSearch input[type="text"]::-moz-placeholder { color: #8d8d8d; opacity: 1; }
.HeaderSearch input[type="text"]:-ms-input-placeholder { color: #8d8d8d; }
.HeaderSearch input[type="text"]::placeholder { color: #8d8d8d; }

/* 돋보기는 칸 안 오른쪽 끝에. 위에서부터 몇 픽셀 하고 세어 두면 칸
   높이가 바뀔 때마다 어긋나므로, 위아래를 다 붙여 가운데 오게 한다. */
.HeaderSearch #search-submit {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 34px;
    height: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 14px;
    color: #9a9a9a;
    cursor: pointer;
}

.HeaderSearch #search-submit:hover {
    color: #ffffff;
}

/* 좁은 화면에서는 차림표가 세로로 접힌다. 그때 이 셋이 한 줄에
   들어가지 않으므로 폭을 화면에 맡긴다. */
@media (max-width: 767px) {
    .HeaderSearch {
        padding: 0 15px 10px;
    }

    .HeaderSearch input[type="text"] {
        width: auto;
        flex: 1;
        min-width: 0;
    }

    .HeaderSearch #search-submit {
        right: 15px;
    }
}