/* 첫 화면의 구인·렌트 칸.
 *
 * 흐르는 띠는 머리띠의 BIZ EVENT 띠와 같은 짜임을 쓴다(ticker-news-box,
 * breaking-news, ul > li.news-item). 그래야 같은 자바스크립트가 둘 다를
 * 돌릴 수 있고, 모양도 저절로 같아진다. 여기서는 달라야 할 것만
 * 적는다 - 위아래 여백과 띠의 색.
 */

.mainboard-wrap {
    margin-top: 18px;
    margin-bottom: 18px;
}

/* ---------------------------------------------------------------- */
/* 흐르는 띠                                                        */
/* ---------------------------------------------------------------- */

.mainboard-ticker {
    margin-bottom: 18px;
}

/* 머리띠의 띠는 빨강이다. 이것을 같은 색으로 두면 한 화면에 같은
   띠가 둘 서게 되어 둔 쪽이 무엇인지 읽히지 않는다. */
/* 로고의 보라. 화면에서 집어 잎은 값이다 - 그 그림에서 가장 넓은
   자리를 차지하는 색이 #9a22da, 그 다음이 다홍 #ee0038 이다.

   빨강 대신 보라를 고른 까닭: 마크의 다홍(#ee0038)은 머리띄의
   BIZ EVENT 띄(#f44336)와 거의 같다. 둘을 같은 색으로 두면 한 화면에
   서는 두 띄가 한 띄처럼 읽힌다. */
.ticker-news-box.mainboard-ticker span.breaking-news,
.ticker-news-box.mainboard-ticker span.breaking-news:after {
    background: #9a22da;
}

/* ---------------------------------------------------------------- */
/* 띠의 짜임                                                        */
/*                                                                    */
/* 이 열 줄이 왜 필요한가: 띠를 돌리는 예전 플러그인은 제 자리를        */
/* 픽셀로 적어 둔다 - 틀을 왼쪽에서 180px 밀고, 띠 폭을 879px 로 박아   */
/* 둔다. 머리띠의 띠는 그것을 제 줄로 다시 적어 가려 쓴다               */
/* (.heading-news2 ... ). 여기는 그 안에 서지 않으므로 플러그인의       */
/* 기본값을 그대로 받았고, 그래서 글이 라벨에서 한참 떨어져 시작했다. */
/*                                                                    */
/* 픽셀로 다시 적는 대신 줄발로 두어 폭을 스스로 찾게 한다.          */
/* ---------------------------------------------------------------- */

/* 띄와 이름표 사이를 좀힌다. 이름표의 오른쪽 꼬리(:after)가 7px
   밖으로 나와 있어서, 그것을 지나고나면 남는 틈이 여기 적힌 값이다. */
.mainboard-ticker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    /* 재생 단추들이 설 자리를 비워 둔다. */
    padding-right: 80px;
}

/* 이름표와 띄 사이. 선택자가 길어야 하는 까닭은 색과 같다 - 원래
   규칙이 .ticker-news-box span.breaking-news 이라 요소 이름을 하나 더
   가지고 있고, 그것이 margin-right: 25px 를 들고 있다. 클래스 둘로
   적었더니 그쪽이 이겨 띄가 31px 떨어져 서 있었다 - 재어 보고 알았다.

   오른쪽 꼬리(:after)가 7px 밖으로 나와 있으므로 틈을 0 으로 하면
   글자가 꼬리 위로 올라온다. gap 으로 그만큼을 다시 둔다. */
.ticker-news-box.mainboard-ticker span.breaking-news {
    float: none;
    flex: 0 0 auto;
    margin-right: 0;
}

.mainboard-ticker .ticker-wrapper.has-js {
    margin-left: 0;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.mainboard-ticker .ticker {
    float: none;
    width: 100%;
    height: 30px;
}

/* 글을 가리는 흰 막. 플러그인 기본값은 23px 인데 띠는 30px 라서,
   글자의 아랫부분이 막 밖으로 빠져나왔다 - 지나가는 글자의 밑줄이
   동안다. 한글은 받침이 있어 더 잘 보인다. 띠 높이만큼 덮는다. */
.mainboard-ticker .ticker-swipe {
    height: 100%;
}

.mainboard-ticker .ticker-content {
    color: #555;
}

.mainboard-ticker .ticker-content a {
    color: #333;
}

/* 마크의 다홍. 로고에서 집어 잎은 값이다(#ee0038). 띄의 이름표는
   같은 로고의 보라를 쓴다 - 둘 다 마크의 색이라 한자리에 서도
   서로 어긋나지 않는다. */
.mainboard-ticker .ticker-content a:hover {
    color: #ee0038;
}

/* 재생·앞·뒤 단추. 띠의 오른쪽 끝에 붙여 두고, 세 개를 서로
   당기어 한 덩어리로 보이게 한다. */
.mainboard-ticker .ticker-controls {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    float: none;
    margin: 0;
}

.mainboard-ticker .ticker-controls li {
    margin-left: 2px;
}

/* 가입 권유. 단추들 바로 앞이다 - 위의 padding-right 가 그 자리를
   비워 두었기 때문에 겁치지 않는다. */
a.mainboard-signup {
    flex: 0 0 auto;
    display: inline-block;
    padding: 5px 13px;
    border-radius: 14px;
    background: #ee0038;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

a.mainboard-signup:hover {
    background: #c6002f;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 767px) {

    /* 재생·앞·뒤 단추만 내린다. 휴대전화에서 지나가는 글을 멈춰
       세우려는 사람은 드물고, 그 자리가 72px 되기 때문이다.

       가입 권유는 남긴다. 한번 내렸었는데, 새 사람을 받으려는 자리에서
       그것을 휴대전화에만 보이지 않게 하는 것은 거꾸로 된다 - 새 사람은
       대개 휴대전화로 온다. 대신 작게 만들어 자리를 덜 먹게 한다. */
    .mainboard-ticker .ticker-controls {
        display: none;
    }

    /* 휴대전화에서는 이것을 내린다. 같은 권유가 머리띄의 세 줄 단추
       바로 아래에 서 있기 때문이다(TorontoHeader.ascx 의 .mobile-signup).
       한 화면에 같은 말이 두 번 서 있을 까닭은 없고, 그쪽이 더 놓은
       자리라 모든 화면에서 보인다 - 이쪽은 첫 화면에만 있다. */
    a.mainboard-signup {
        display: none;
    }

    .mainboard-ticker {
        padding-right: 0;
        gap: 10px;
    }
}


/* ---------------------------------------------------------------- */
/* 두 칸                                                            */
/* ---------------------------------------------------------------- */

.mainboard-col .title-section {
    margin-bottom: 10px;
}

ul.mainboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #eee;
}

ul.mainboard-list > li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 11px 2px;
    border-bottom: 1px solid #eee;
    margin: 0;
}

ul.mainboard-list > li:hover {
    background: #fafcfe;
}

/* 제목은 한 줄에서 끝난다. 두 줄로 넘어가면 왼쪽과 오른쪽의 세 줄이
   서로 다른 높이가 되어 두 칸이 어긋난다. */
ul.mainboard-list > li > a {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: #333;
    text-decoration: none;
}

ul.mainboard-list > li > a:hover {
    color: #33a3f1;
    text-decoration: underline;
}

ul.mainboard-list > li .mb-when {
    flex: 0 0 auto;
    font-size: 12px;
    color: #aaa;
}

.mainboard-empty {
    padding: 26px 4px;
    text-align: center;
    color: #999;
    font-size: 13px;
    border-bottom: 1px solid #eee;
}

/* ---------------------------------------------------------------- */
/* 휴대전화                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 767px) {

    /* 두 칸이 위아래로 쌓힌다. 사이가 붙어 있으면 구인 마지막 줄과
       렌트 첫 줄이 한 목록처럼 보인다. */
    .mainboard-cols > div + div {
        margin-top: 22px;
    }

    ul.mainboard-list > li {
        padding: 10px 2px;
    }

    ul.mainboard-list > li > a {
        font-size: 13.5px;
    }
}