/*
 * 기사 상세(board/read.jsp) 모바일 레이아웃
 * 참고: 중앙일보 모바일 기사 화면 - 섹션명 > 큰 제목 > 기자/입력일 > 굵은 구분선 > 꽉 찬 사진 > 넉넉한 본문
 * head.jsp 에서 가장 마지막에 로드되어 sub.css / hs-usr.css 의 같은 선택자를 덮어쓴다.
 * 글자 크기 버튼(.left-wrap, .ct-tit .cbox.n-1 에 em 지정)이 계속 동작하도록 본문/제목 크기는 em 단위로 둔다.
 */

.contents.view .article-section {
    display: none;
}

@media screen and (max-width: 640px) {

    /* ── 제목 영역 ───────────────────────────── */
    .contents.view .ct-tit {
        width: 100%;
        margin: 0;
        padding: 24px 20px 16px;
        border: 0;
        border-radius: 0;
        border-bottom: 3px solid #da3e36;
    }

    .contents.view .article-section {
        display: block;
        margin-bottom: 8px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: -0.02em;
        color: #da3e36;
    }

    .contents.view .ct-tit h3 {
        margin: 0 0 16px;
        font-size: 1.5em;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: -0.04em;
        color: #111;
        overflow-wrap: break-word;
    }

    /* 작성자 한 줄, 작성일 · 조회수 한 줄 */
    .contents.view .ct-tit .cbox.n-1 ul {
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 0;
        font-size: 13px;
        line-height: 1.6;
        color: #767676;
    }

    .contents.view .ct-tit .cbox.n-1 li {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0 4px;
    }

    .contents.view .ct-tit .cbox.n-1 li b {
        font-weight: 400;
    }

    .contents.view .ct-tit .cbox.n-1 li.writer {
        width: 100%;
        margin-bottom: 4px;
        font-size: 15px;
        font-weight: 700;
        color: #111;
    }

    .contents.view .ct-tit .cbox.n-1 li p {
        font-size: inherit;
        font-weight: 400;
        color: inherit;
    }

    .contents.view .ct-tit .cbox.n-1 li.writer p {
        font-weight: 700;
    }

    .contents.view .ct-tit .cbox.n-1 li.writer b {
        display: none;
    }

    .contents.view .ct-tit .cbox.n-1 li.date::after {
        content: "";
        display: inline-block;
        width: 1px;
        height: 10px;
        margin: 0 10px;
        background: #ccc;
    }

    /* 글자크기·공유 버튼: 메타 아래 왼쪽 정렬 */
    .contents.view .ct-tit .cbox.n-2 {
        margin-top: 14px;
        justify-content: flex-start;
        gap: 8px;
    }

    .contents.view .ct-tit .cbox.n-2 .btn {
        width: 32px;
        height: 32px;
        border-radius: 32px;
    }

    /* ── 본문 영역 ───────────────────────────── */
    .contents.view .contents-wrap {
        padding-top: 24px;
    }

    /* 부제(리드) */
    .contents.view .left-wrap > .top {
        margin-bottom: 24px;
        padding-left: 14px;
        border-left: 3px solid #111;
        font-size: 1.0625em;
        font-weight: 600;
        line-height: 1.65;
        letter-spacing: -0.03em;
        color: #111;
    }

    /* 대표 사진: 화면 좌우 끝까지 */
    .contents.view .left-wrap > div > .img {
        width: calc(100% + 40px);
        height: auto;
        margin: 0 -20px 24px;
        border-radius: 0;
        background: none;
    }

    .contents.view .left-wrap > div > .img img {
        height: auto;
        border-radius: 0;
    }

    .contents.view .news-content {
        font-size: 1.125em;
        line-height: 1.85;
        letter-spacing: -0.02em;
        color: #222;
        overflow-wrap: break-word;
    }

    /* reset.css 의 p { font-weight: 300 } 때문에 본문이 가늘어 보이던 것을 보통 굵기로 */
    .contents.view .news-content p {
        margin: 0 0 1.4em;
        font-size: 1em;
        font-weight: 400;
    }

    /* 에디터가 문단 간격용으로 넣은 빈 문단( )은 숨기고 문단 여백으로 통일 (read.jsp 스크립트가 표시) */
    .contents.view .news-content p.is-empty {
        display: none;
    }

    .contents.view .news-content img {
        max-width: 100%;
        height: auto;
    }

    .contents.view .news-content figure {
        margin: 0 0 1.4em;
    }

    .contents.view .news-content figcaption {
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.6;
        color: #767676;
    }

    .contents.view .news-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* ── 추천 평론: 썸네일 왼쪽 + 제목 오른쪽 목록형 ── */
    .contents.view .left-wrap .all-list {
        margin-top: 40px;
        padding-top: 20px;
        border-top: 2px solid #111;
    }

    .contents.view .left-wrap .all-list .list {
        margin-top: 4px;
    }

    .contents.view .left-wrap .all-list .list.type-2 .item,
    .contents.view .left-wrap .all-list .list.type-2 .item:not(:last-child) {
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 0 14px;
        margin: 0;
        padding: 16px 0;
        border: 0;
        border-bottom: 1px solid #eee;
        border-radius: 0;
    }

    .contents.view .left-wrap .all-list .list.type-2 .item .img {
        flex: none;
        width: 112px;
        height: 75px;
        margin: 0;
        border-radius: 4px;
    }

    .contents.view .left-wrap .all-list .list.type-2 .item .tbox {
        flex: 1;
        width: auto;
        min-width: 0;
        margin: 0;
    }

    .contents.view .left-wrap .all-list .list.type-2 .item .tbox h4 {
        display: -webkit-box;
        height: auto;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.45;
        white-space: normal;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .contents.view .left-wrap .all-list .list.type-2 .item .tbox .txt,
    .contents.view .left-wrap .all-list .list.type-2 .item .tbox li:not(:first-child) {
        display: none;
    }

    .contents.view .left-wrap .all-list .list.type-2 .item .tbox ul {
        margin-top: 6px;
    }

    .contents.view .left-wrap .all-list .list.type-2 .item .tbox li {
        font-size: 12px;
        line-height: 1.5;
        color: #767676;
    }

    .contents.view .left-wrap .all-list .list.type-2 .item .tbox li::after {
        display: none;
    }
}