@charset "utf-8";

/*
 * 컬럼 (폰 목업 셸 전용)
 *
 * 실제 마크업(page/js/column_list.js 생성):
 *   .item > .imgbox > img
 *         > .bottom > .txtbox > .tit + .desc
 *                   > .infobox > .infoitem > .icon + .txt
 * 세로 카드형이다. 기존 규칙은 style.css 의 .list_wrap 계열에 스코프되어
 * 있어 폰 목업 셸에서는 적용되지 않으므로 필요한 것만 여기로 옮긴다.
 * 공통 셸은 page/css/mypage_shell.css 가 담당한다.
 */

.column-content {
    min-height: calc(var(--phone-visible-height, 740px) - 50px);
    padding: 16px 0 30px;
    background: #fff;
}

.listbox.column_ver {
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
}

.listbox.column_ver .item {
    width: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

/* 이미지가 프레임을 넘치던 원인 — 폭 제한과 object-fit 이 없었다. */
.listbox.column_ver .item .imgbox {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--light);
}

.listbox.column_ver .item .imgbox img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listbox.column_ver .item .bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

.listbox.column_ver .item .txtbox {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.listbox.column_ver .item .txtbox .tit {
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    word-break: keep-all;
}

.listbox.column_ver .item .txtbox .desc {
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    word-break: keep-all;
}

.listbox.column_ver .item .infobox {
    display: flex;
    align-items: center;
    gap: 12px;
}

.listbox.column_ver .item .infoitem {
    display: flex;
    align-items: center;
    gap: 4px;
}

.listbox.column_ver .item .infoitem .icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.listbox.column_ver .item .infoitem .txt {
    margin: 0;
    color: #999;
    font-size: 11px;
}

.column-content .empty-message {
    width: 100%;
    padding: 40px 0;
    color: #999;
    font-size: 13px;
    text-align: center;
}