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

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

/* ---------- 화면 폭 ----------
   두 칸이 나란히 서려면 가운데 칸이 화면을 다 써야 한다. 옆 칸은
   데이터베이스에서 비웠고(광고를 이 페이지에서 떼어 냈다), 여기서는
   비워진 칸이 자리를 차지하지 않게 한다.

   wide-content 는 WebPage.UseWideContent() 가 붙인다. 요청하지 않은
   페이지에는 이 이름이 없으므로 예전과 똑같이 두 칸으로 나온다. */
.block-wrapper.wide-content .col-sm-8 {
    width: 100%;
}

.block-wrapper.wide-content .col-sm-4 {
    display: none;
}

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

   칸마다 소개 글의 길이가 달라 높이가 어긋나므로 위에서 맞춘다. 늘려
   채우면 짧은 칸의 회색 상자 안이 비어 보인다. */
/* grid-auto-rows: 1fr - 모든 줄의 높이를 그 줄에서 가장 높은 칸에 맞춘다.
   글의 줄 수는 아래에서 묶어 두므로 '가장 높은 칸'도 정해진 값이 된다. */
.wide-content .autor-list.autor-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 24px;
}

/* 한 줄짜리 목록에서는 칸을 나누던 선이었다. 두 칸이 되면 그 선이
   가운데에서 끊겨 어긋나 보이므로 뺀다 - 칸 사이는 이제 간격이 나눈다. */
.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;
}

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