/*body {
    font-family: 'Noto Sans KR', 'sans-serif';
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #545454;
}*/
#LogoFrame {
    /*min-width:1200px;
    max-width:1600px;*/
    width:100%;
    margin:0 auto;
}

#LogoFrame {
    padding:0;
    position: relative;
    text-align: center;
    min-height: 60px;
    display:inline-block;
}

#LogoFrame .HeaderColumn{
    text-align: center;
    width: 7%;
    display: inline-block;
}

.TopLoginContainer {
    float: right;
}
.fontIcon i, #UserIDContainer i {
    font-size: 40px;
    display: block;
    margin-top: 10px;
}
.fontIcon {
    color: #c0c0c0;
}
.fontIcon:hover{
    background-color:#66acdb;
}

/* 설정 서랍. 예전에는 숨어 있을 때 right:-50% 로 오른쪽 바깥에 세워 두었는데,
   숨었어도 자리는 그대로 차지해 화면이 그만큼 넓어졌다 - 아래에 가로 미닫이줄이
   생기고, 서랍이 열려 제자리(right:0)로 돌아오면 그 줄이 사라졌다.
   이제 옆이 아니라 아래로(top:100%) 열린다. 숨은 자리도 오른쪽 끝에 맞춰 두어
   화면 밖으로 나가지 않고, 왼쪽으로 퍼지며 옆의 블로그 단추를 덮지도 않는다. */
.HeaderColumn .InnerContainer{
    background-color:#ebeaea;
    color:#666666;
    position:absolute;
    border:2px solid Silver;
    padding:10px;
    opacity:0;
    text-decoration:none;
    z-index:-1;
    top:100%;
    right:0;
    -webkit-transform:translateY(-6px);
    transform:translateY(-6px);
    text-align:left;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /*width:100%;*/
    width:150px;
}

.HeaderColumn:hover .InnerContainer{
    opacity:1;
    z-index:20;
    -webkit-transform:translateY(0);
    transform:translateY(0);
}
.InnerContainer a{
    display:block;
}

.InnerContainer a:hover{
    text-decoration:underline;
}
.BlogBackground #LogoFrame{
    margin:0 !important;
}
.BlogBackground .fontIcon:hover{
    background-color:#1A85B9;
}

.BlogBackground #LogoFrame .HeaderColumn {
    position:relative;
}
/* 블로그 이름. 예전에는 .BlogBackground h1 이었는데 그 이름이 머리말뿐 아니라
   글이 실리는 상자에도 붙어 있어(BlogBoard.ascx), 글 안에 h1 이 하나라도 들어가면
   그 글까지 이 모양을 뒤집어썼다 - 가운데 정렬에 흰 글자라 흰 바탕에서 사라졌다.
   유튜브에서 제목을 복사해 붙이면 h1 이 따라오므로 드문 일도 아니다.

   블로그 이름에 붙은 class 로 건다. id 로 걸었다가 한 번 어긋났다 - 그 h1 은
   runat="server" 라 ASP.NET 이 id 를 제 것으로 바꿔 내보낸다(blogTitle 이 아니라
   ContentPlaceHolder1_ctl00_blogTitle 로 나온다). class 는 그대로 나간다.

   글 상자 쪽 markup 에는 h1 이 없다 - 거기 나타나는 h1 은 모두 사람이 쓴 글이다. */
.BlogBackground h1.TopTitle {
    color:white;
    text-align:center;
    margin-top:15px;
}
#LoginButton {
    display: inline-block;
    color: white;
    cursor: pointer;
}
.SmallLoginContainer input {
    border: 1px solid silver;
    padding: 5px;
    width: 120px;
}
#ErrorContainer {
    display: block;
    visibility: hidden;
    color: white;
    background-color: #6b29ad;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
    padding: 5px;
    width: 100%;
}
.BlogBackground .AutoLogin label {
    color: #fff;
}
#LoggedInContainer {
    background-color: #f1efef;
    color: #666666;
    position: absolute;
    border: 1px solid Silver;
    padding: 10px;
    opacity: 0;
    text-decoration: none;
    z-index: -1;
    top: 100%;
    right: 0;
    text-align: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* width: 150%; */
    width: 350px;
}
/* ============================================================
   머리말 줄 나누기
   ------------------------------------------------------------
   첫째 줄 : 왼쪽 메뉴 - 오른쪽 끝 블로그/설정 (작게, 나란히)
   둘째 줄 : 가운데 블로그 이름 - 오른쪽 끝 찾기칸
   셋째 줄 : 띠 배너
   ============================================================ */
.BlogHeaderTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-right: 20px;
}

/* 띄우기(float)를 쓰던 자리다. 줄을 flex 로 잡았으니 띄우기는 오히려 방해가 된다. */
.BlogHeaderTop #BlogTopMenuContainer {
    float: none;
}

.BlogBackground #LogoFrame {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: auto;
    min-height: 0;
    padding: 6px 0;
}

.BlogBackground #LogoFrame .HeaderColumn {
    width: auto;
    margin-left: 18px;
}

/* 로그인 칸(로그아웃 상태). 여기 세 덩이가 위아래로 쌓여 있어서 머리말 첫 줄이
   혼자 세 줄 높이가 됐다 - 아이디/패스워드 줄, 숨어 있으면서도 자리는 차지하던
   오류 알림, 그리고 '자동 로그인'. 그만큼 왼쪽 메뉴가 가운데로 내려앉고 아래
   블로그 이름까지 밀려 보였다. 로그인한 뒤에는 이 셋이 모두 사라지므로 그때는
   줄이 멀쩡했던 것이다.

   셋을 한 줄에 나란히 세운다. '자동 로그인'은 아이디 칸 왼쪽에 둔다. */
.BlogBackground .TopLoginContainer {
    float: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 오류 알림이 이 칸을 기준으로 아래에 뜨도록. */
.BlogBackground .SmallLoginContainer {
    position: relative;
}

/* 오류 알림은 줄 바깥(바로 아래)에 띄운다 - 숨어 있을 때 자리를 차지하지 않는다.
   보일 때 나타나게 하는 짝 규칙도 함께 넣는다. BlogLogin.js 는 예전부터
   ErrorContainerShow 를 붙이고 있었지만 그 이름의 모양이 어디에도 없어서
   비밀번호가 틀려도 알림이 뜬 적이 없다. */
.BlogBackground #ErrorContainer {
    position: absolute;
    top: 100%;
    right: 0;
    width: auto;
    white-space: nowrap;
    z-index: 30;
}

.BlogBackground #ErrorContainer.ErrorContainerShow {
    visibility: visible;
}

/* '자동 로그인' 을 아이디 칸 왼쪽으로. */
.BlogBackground .TopLoginContainer .AutoLogin {
    order: -1;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.BlogBackground .TopLoginContainer .AutoLogin input {
    margin: 0 4px 0 0;
}

/* 아이콘을 글자 위에 얹어 크게 세워 두던 것을 글자 옆에 작게 붙인다. */
.BlogBackground .fontIcon {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    line-height: 1;
    white-space: nowrap;
}

.BlogBackground .fontIcon i,
.BlogBackground #UserIDContainer i {
    display: inline-block;
    font-size: 16px;
    margin: 0 6px 0 0;
}

/* 이름이 없는 블로그도 있다 - 그럴 때 빈 파란 띠가 남지 않도록 높이를 정해 두지 않는다. */
.BlogTitleRow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

.BlogBackground .BlogTitleRow h1.TopTitle {
    margin: 8px 0;
}

/* 찾기칸은 띠 배너 아래, 오른쪽 끝. */
.BlogBackground #SearchContainer {
    padding: 10px 20px;
}