/* ---------------------------------------------------------------
[SECTION] 행복한 싱글 라이프 (/single-life/, 고객 홈 섹션)
--------------------------------------------------------------- */
.lr-sl-page {
    padding-bottom: var(--height-gap-large, 5rem);
}

.lr-sl-intro {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 2rem 0 1.6rem;
}

.lr-sl-intro-desc {
    margin: 0;
    color: var(--normal-grey, #767676);
    word-break: keep-all;
}

/* #region 카드 */
.lr-sl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 1.2rem;
}

@media screen and (min-width: 768px) {
    .lr-sl-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 세로 카드라 넓은 화면에서는 4열로 보여준다. (페이지당 12개 = 2/3/4열 모두 딱 맞음) */
@media screen and (min-width: 1024px) {
    .lr-sl-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.lr-sl-card {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.lr-sl-card:hover,
.lr-sl-card:focus {
    color: inherit;
    text-decoration: none;
}

.lr-sl-card-thumb {
    position: relative;
    aspect-ratio: 3 / 4; /* 쇼츠 위주 운영으로 세로 카드로 통일 */
    overflow: hidden;
    border-radius: 12px;
    background: var(--grey100, #efefef);
}

.lr-sl-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.lr-sl-card:hover .lr-sl-card-thumb img {
    transform: scale(1.03);
}

.lr-sl-card-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--customer600, #ba85ff);
    background: var(--customer50, #f8edfd);
    font-size: 2.4rem;
}

.lr-sl-card-play {
    position: absolute;
    right: 0.8rem;
    bottom: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.1rem;
}

.lr-sl-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.lr-sl-card-title {
    font-weight: 700;
    color: var(--black100, #222);
    line-height: 1.4;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lr-sl-card-summary {
    font-size: 0.9em;
    color: var(--normal-grey, #767676);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* #endregion */

/* #region 고객 홈 섹션 */
.lr-sl-more {
    font-size: 0.9em;
    color: var(--normal-grey, #767676);
    text-decoration: none;
    white-space: nowrap;
}

.lr-sl-home-scroller {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.2rem;
}

.lr-sl-home-scroller::-webkit-scrollbar {
    display: none;
}

.lr-sl-home-scroller .lr-sl-card-compact {
    flex: 0 0 40%;
    max-width: 18rem;
    scroll-snap-align: start;
}
/* #endregion */

/* #region 상세 */
.lr-sl-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    .lr-sl-video {
        max-width: 960px;
        margin: 1.6rem auto 0;
        border-radius: 12px;
    }
}

.lr-sl-video iframe,
.lr-sl-video > img,
.lr-sl-video-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lr-sl-video > img,
.lr-sl-video-facade img {
    object-fit: cover;
}

/* 유튜브 쇼츠(세로 영상): 9:16 세로 틀, 화면 높이의 70%(최대 640px) 안에서 가운데 정렬. 좁은 화면에서는 가로 폭에 맞춰 줄인다. */
.lr-sl-video.is-shorts {
    aspect-ratio: 9 / 16;
    width: auto;
    height: min(70vh, 640px, calc((100vw - 32px) * 16 / 9));
    max-width: none;
    margin: 1.6rem auto 0;
    border-radius: 12px;
}

.lr-sl-video-facade {
    padding: 0;
    margin: 0;
    background: #000;
    cursor: pointer;
}

.lr-sl-video-facade img {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.92;
}

.lr-sl-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.4rem;
    height: 4.4rem;
    border-radius: 12px;
    background: rgba(255, 0, 0, 0.9);
    color: #fff;
    font-size: 1.8rem;
    transition: transform 0.15s ease;
}

.lr-sl-video-facade:hover .lr-sl-video-play,
.lr-sl-video-facade:focus-visible .lr-sl-video-play {
    transform: translate(-50%, -50%) scale(1.06);
}

.lr-sl-detail-body {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding-top: 2rem;
}

@media screen and (min-width: 768px) {
    .lr-sl-detail-body,
    .lr-sl-related {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }
}

.lr-sl-detail-title {
    word-break: keep-all;
}

.lr-sl-detail-summary {
    color: var(--black400, #3d3d3d);
    line-height: 1.75;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.lr-sl-detail-summary p {
    margin: 0 0 1em;
}

/* 테마 공통 CSS가 ul/li 점을 초기화하므로 본문 영역 안에서만 목록 표시를 되살린다. */
.lr-sl-detail-summary ul,
.lr-sl-detail-summary ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.lr-sl-detail-summary ul {
    list-style: disc outside;
}

.lr-sl-detail-summary ol {
    list-style: decimal outside;
}

.lr-sl-detail-summary li {
    display: list-item;
    list-style: inherit;
    margin: 0.3em 0;
}

/* 본문 표: 테마 공통 CSS가 표 스타일을 초기화하므로 본문 영역에서만 다시 그린다. 좁은 화면에서는 가로 스크롤 */
.lr-sl-detail-summary table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 1.2em;
    font-size: 0.92em;
}

.lr-sl-detail-summary th,
.lr-sl-detail-summary td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--grey150, #e5e5e5);
    text-align: left;
    vertical-align: top;
    word-break: keep-all;
}

.lr-sl-detail-summary th {
    background: var(--customer50, #f8edfd);
    color: var(--black300, #333);
    font-weight: 700;
    white-space: nowrap;
}

/* [lr_request] 쇼트코드 링크: 누르면 해당 카테고리 심부름 요청 화면이 열린다. */
.lr-sl-request-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    background: var(--customer50, #f8edfd);
    color: var(--customer-color, #9747ff);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.lr-sl-request-link:hover,
.lr-sl-request-link:focus {
    background: var(--customer-color, #9747ff);
    color: #fff;
    text-decoration: none;
}

/* 본문 안 소제목은 페이지 제목보다 작게 보이도록 크기를 맞춘다. */
.lr-sl-detail-summary h2 {
    font-size: 1.25em;
    line-height: 1.4;
    margin: 1.6em 0 0.6em;
}

.lr-sl-detail-summary h3 {
    font-size: 1.1em;
    line-height: 1.4;
    margin: 1.4em 0 0.5em;
}

.lr-sl-detail-summary img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.lr-sl-actions {
    display: flex;
    padding: 0.8rem 0 0.4rem;
}

.lr-sl-request-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.2rem;
    text-decoration: none;
}

.lr-sl-related {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-top: var(--height-gap-large, 5rem);
    padding-top: var(--height-gap, 3.2rem);
    border-top: 1px solid var(--grey100, #efefef);
}
/* #endregion */

/* #region 목록 기타 */
.lr-sl-empty {
    padding: 6rem 0;
    text-align: center;
    color: var(--normal-grey, #767676);
}

.lr-sl-pagination {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: var(--height-gap, 3.2rem);
}

.lr-sl-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.2rem;
    height: 3.2rem;
    padding: 0 0.8rem;
    border-radius: 8px;
    color: var(--black600, #555);
    text-decoration: none;
}

.lr-sl-pagination .page-numbers.current {
    background: var(--customer-color, #9747ff);
    color: #fff;
}
/* #endregion */