/* ============================================================
   한인업소록 목록 카드
   ------------------------------------------------------------
   YPMain(유료업소)과 YPList(전체 목록)가 함께 쓴다. 두 화면의
   카드 마크업이 같으므로 규칙도 하나다.

   autor-list 라는 이름은 블로그·커뮤니티 등 일곱 군데가 함께
   쓰므로, 그 이름만으로 규칙을 걸면 손대지 않은 화면들까지
   바뀐다. 그래서 이 목록에만 붙는 yp-cards 를 함께 요구한다.

   한 줄에 한 칸을 유지한다. 옆 칸에 광고·카테고리·신규업체가
   그대로 있어 가운데가 750px 뿐이고, 그 폭을 둘로 쪼개면
   지금보다 좁아진다.
   ============================================================ */

/* ---------- 카드 ----------
   사진·설명·연락처 줄까지 한 업소가 하나의 카드로 묶인다. 테두리를 li 에
   두는 까닭은 그래야 아래 연락처 줄까지 함께 감싸이기 때문이다.

   이 규칙들은 원래 YPMain 안에 <style> 로 박혀 있었고 .yp-main-list 에만
   걸려 있었다. 그래서 유료업소 목록에는 카드가 있고, 카테고리별 목록
   (YPList)에는 없어 같은 자료가 두 가지 모습으로 나왔다. 두 목록이 이제
   yp-cards 를 함께 달고 있으므로 규칙도 한 군데에 둔다. */
.autor-list.yp-cards > li {
    margin-bottom: 8px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
}

.autor-list.yp-cards > li:hover {
    border-color: #999999;
}

/* 사진이 float 이라 상자가 그 높이를 품게 한다. 테두리는 li 로 옮겼으니
   여기서는 지운다 - 아니면 선이 두 겹 보인다. */
.autor-list.yp-cards > li .autor-box {
    overflow: hidden;
    border: none;
}

/* 업소마다 로고 비율이 제각각이라 너비만 정하면 세로로 길어져 아랫줄을
   침범한다. 상자를 고정하고 contain 으로 맞춰 로고가 잘리지 않게 한다. */
.autor-list.yp-cards > li .autor-box img {
    width: 150px;
    height: 100px;
    object-fit: contain;
}

.autor-list.yp-cards > li .autor-box .autor-content {
    margin-left: 170px;
}

/* 로고가 없는 업소에서는 글이 빈 자리를 비켜 갈 이유가 없다. */
.autor-list.yp-cards > li .autor-box.no-image .autor-content {
    margin-left: 0;
}

/* ---------- 글의 줄 수 ----------
   높이를 억지로 맞추지는 않는다. 한 줄에 한 칸이므로 옆 칸과
   맞출 상대가 없고, 억지로 맞추면 설명이 긴 업소 하나 때문에
   열일곱 칸이 모두 길어진다. 대신 글을 묶어 두면 칸들이 저절로
   비슷해진다. */
.autor-list.yp-cards .autor-content .autor-title h1 {
    float: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 제목 글자를 감싼 링크가 inline-block 이면 줄 수를 세는 쪽에서
   덩어리 하나로 보여 자를 줄이 없어진다. 글이 흐르게 둔다. */
.autor-list.yp-cards .autor-content .autor-title h1 a {
    display: inline;
}

.autor-list.yp-cards .autor-content > p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- 아래 줄의 세 칸 ----------
   전화 · 주소 · 수정요청. 셋의 크기가 같아야 한 줄로 읽힌다.

   원래 크기는 <a> 에 걸려 있었는데, 주소만 그 안에 다시 <span> 이
   있고 그 span 이 제 line-height(30px)와 글자 크기를 들고 있었다.
   주소를 지도 링크로 감싸자 그 span 이 안쪽에 남아 칸을 혼자
   부풀렸다. 그래서 크기는 여기서 한 번만 정하고, 안쪽 span 은
   바깥에서 정한 것을 물려받게 한다. */
.autor-list.yp-cards .autor-last-line ul.autor-tags li {
    vertical-align: middle;
    margin-right: 6px;
}

.autor-list.yp-cards .autor-last-line ul.autor-tags li a {
    font-size: 13px;
    line-height: 20px;
    padding: 7px 14px;
    border: 1px solid #dfe4e8;
    border-radius: 999px;
    white-space: nowrap;
}

.autor-list.yp-cards .autor-last-line ul.autor-tags li span {
    line-height: inherit;
    font-size: inherit;
    color: inherit;
    padding-right: 0;
}

.autor-list.yp-cards .autor-last-line ul.autor-tags li span i {
    font-size: 14px;
    margin-right: 6px;
}

/* ---------- 전화번호 ----------
   업소록에서 사람이 하는 일은 결국 전화를 거는 것이다. 그 번호가
   회색 글씨로 맨 아래 줄에 섞여 있었다.

   눈에 띄게 하되 크기로 하지는 않는다 - 크기를 키우면 세 칸의 줄이
   다시 어긋난다. 글자 굵기와 색으로만 앞세운다. */
.autor-list.yp-cards a.YPPhone {
    background: #fff;
    color: #1a1a1a;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.autor-list.yp-cards a.YPPhone i {
    color: #f44336;
}

.autor-list.yp-cards a.YPPhone:hover {
    background: #f44336;
    border-color: #f44336;
    color: #fff;
}

.autor-list.yp-cards a.YPPhone:hover i { color: #fff; }

/* ---------- 주소 ----------
   지도를 여는 링크가 되었으므로 누를 수 있어 보여야 한다. 다만
   전화만큼 눈에 띄면 안 된다 - 이 줄의 주인공은 전화번호다. */
.autor-list.yp-cards a.YPMapLink {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
}

.autor-list.yp-cards a.YPMapLink:hover {
    border-bottom-color: #9aa7b2;
}

/* ---------- 좁은 화면 ----------
   손가락으로 누르는 화면에서 전화 단추가 가장 커야 한다. */
@media (max-width: 768px) {
    .autor-list.yp-cards .autor-last-line ul.autor-tags li.YPPhoneCell {
        display: block;
        width: 100%;
        margin: 0 0 8px;
    }

    .autor-list.yp-cards a.YPPhone {
        display: block;
        text-align: center;
        padding: 11px 14px;
        font-size: 15px;
    }
}

/* ---------- 멤버카드 혜택 표시 ----------
   카드 프로그램에 든 업소의 제목 옆에 붙는다.

   두 목록이 서로 다른 표시를 쓰고 있었다. 유료업소 쪽은 여기 있는 이 조각,
   카테고리 쪽은 사진 위에 얹는 리본이었는데 그 리본의 스타일이 Yellowpage.css
   안에서 열린 채 닫히지 않은 주석에 통째로 삼켜져 있었다 - 그래서 흰 글자로
   맨몸으로 나왔다. 이제 둘 다 이것을 쓴다. */
.card-offer-line {
    display: inline-block;
    margin-left: 8px;
    background: #f58021;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 4px;
    vertical-align: middle;
}