/* ============================================================
   커뮤니티 목록 - 한 줄에 두 칸
   ------------------------------------------------------------
   MainGroupDetailList 가 그리는 화면에서만 쓴다.

   autor-list 라는 이름은 블로그·업소록 등 일곱 군데가 함께 쓰므로
   그 이름만으로 규칙을 걸면 손대지 않은 화면들까지 두 칸이 된다.
   그래서 이 목록에만 붙는 autor-two 를 함께 요구한다.
   ============================================================ */

/* The rules that stretched the middle column and dropped the side one
   are no longer here - they moved to WideContent.css, which
   UseWideContent() loads for every screen that asks for the width.
   A second screen now asks for it (the YouTV more-view list of
   videos), and a rule two screens depend on should not sit in a file
   named after one of them. Nothing else changed: this file is still
   reached only through that same class name. */

/* ---------- 두 칸 ----------
   wide-content 안에서만 두 칸이 된다. 같은 컨트롤이 MainGroupDetail(34)
   에서도 쓰이는데 그 화면은 옆 칸의 광고를 그대로 달고 있어 폭이 750px
   뿐이다. 거기서 두 칸으로 나누면 한 칸 365px 이 되어 지금보다 나빠진다.
   그래서 폭을 넓힌 화면에서만 나뉜다.

   칸마다 소개 글의 길이가 달라 높이가 어긋나므로 위에서 맞춘다. 늘려
   채우면 짧은 칸의 회색 상자 안이 비어 보인다. */
/* grid-auto-rows: 1fr - 모든 줄의 높이를 그 줄에서 가장 높은 칸에 맞춘다.
   글의 줄 수는 아래에서 묶어 두므로 '가장 높은 칸'도 정해진 값이 된다. */
.wide-content .autor-list.autor-two {
    display: grid;
    /* minmax(0, 1fr) rather than 1fr. A plain 1fr will not shrink a column
       below the widest unbreakable thing inside it, and some of these
       summaries end in a pasted address seventy or ninety characters long
       with nowhere to break. One such card pushed its column to 742px, the
       pair to 1463px inside a container of 1140, and both columns ran off
       the right of the screen. It showed only on the pages that happened to
       hold one, which is why it looked like a paging fault. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 24px;
}

/* The other half of the same thing: with the column now held to its share,
   the long address has to be allowed to break or it would simply be clipped
   at the edge. The title is already cut to two lines, so a wrapped address
   costs nothing. */
.wide-content .autor-list.autor-two > li .autor-box .autor-content .autor-title h1,
.wide-content .autor-list.autor-two > li .autor-box .autor-content p {
    overflow-wrap: anywhere;
}

/* 한 줄짜리 목록에서는 칸을 나누던 선이었다. 두 칸이 되면 그 선이
   가운데에서 끊겨 어긋나 보이므로 뺀다 - 칸 사이는 이제 간격이 나눈다. */
.wide-content .autor-list.autor-two > li {
    border-bottom: none;
    display: flex;
    flex-direction: column;
}

/* 회색 상자가 남는 높이를 가져가고, 그 아래 이름·날짜 줄은 칸의 맨 밑에
   선다. 그래서 한 줄에 놓인 두 칸의 날짜가 같은 높이에서 만난다. */
.wide-content .autor-list.autor-two > li .autor-box {
    flex: 1 1 auto;
}

/* ---------- 글의 줄 수 ----------
   높이가 들쭉날쭉하던 진짜 원인은 제목이었다. 어떤 커뮤니티의 제목은 한
   줄, 어떤 것은 다섯 줄이었다. 요약 글은 이미 세 줄로 묶여 있었고 제목만
   자유였다.

   float 를 푸는 까닭은 뜬 요소가 글자 폭에 맞춰 줄어들어 줄 수 세기를
   어긋나게 하기 때문이다. 제목과 요약은 어차피 위아래로 놓이므로 뜰
   필요가 없다.

   선택자가 이렇게 긴 것은 멋이 아니라 무게 때문이다. style.css 의 같은
   자리를 겨누는 규칙이 클래스 넷에 요소 셋(0,4,3)이라, 그보다 무겁지
   않으면 float 가 풀리지 않고 줄 수도 묶이지 않는다. */
.wide-content .autor-list.autor-two > li .autor-box .autor-content .autor-title h1 {
    float: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 제목 글자를 감싼 링크가 inline-block 이었다. 줄 수를 세는 쪽에서 보면
   그것은 여러 줄이 아니라 덩어리 하나라서, 두 줄로 자르라고 해도 자를
   줄이 없었다. 글이 흐르도록 되돌린다. */
.wide-content .autor-list.autor-two > li .autor-box .autor-content .autor-title h1 a {
    display: inline;
}

/* ---------- 밑줄의 주소 ----------
   커뮤니티 이름이 제목으로 올라갔으므로 그 자리에는 이제 커뮤니티의 주소가
   선다. 눌러서 갈 수 있고, style.css 가 이 자리의 <a> 에 이미 테두리와
   빨간 hover 를 걸어 두었으므로 모양은 그대로 물려받는다.

   아이콘 크기만 여기서 정한다. 원래 규칙은 <span> 안의 아이콘을 겨누고
   있어(18px) <a> 안에서는 걸리지 않고, 그대로 두면 글자보다 커진다. */
.autor-list.autor-two .autor-last-line ul.autor-tags li a.ClubSiteLink i {
    margin-right: 7px;
    font-size: 14px;
}

/* ---------- 좁은 화면 ----------
   두 칸이 서기에 좁아지면 한 줄로 돌아간다. 폭 규칙은 그대로 둔다:
   이 페이지의 옆 칸은 어차피 비어 있으므로 되살릴 것이 없다. */
@media (max-width: 991px) {
    .wide-content .autor-list.autor-two {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}