/* ============================================
   SUB/layout_lr - 왼우 레이아웃 위젯
   (왼쪽 타이틀 구간 + 오른쪽 콘텐츠 조합)
   설정값은 위젯별 인라인 CSS 변수로 주입됨
   --lr-left / --lr-gap / --lr-line-color /
   --lr-line-style / --lr-line-w / --lr-sticky-top
   ============================================ */

/* --- 그리드 레이아웃 --- */
.layout_lr .lrlay_grid {
    width: 100%;
    min-height: 40px;
    display: grid;
    grid-template-columns: var(--lr-left, clamp(240px, calc(12.5vw + 200px), 400px)) minmax(0, 1fr);
    gap: var(--lr-gap, 40px);
    align-items: stretch;
}
.layout_lr .lrlay_col {
    position: relative;
    min-width: 0;
    min-height: 40px;
}
.layout_lr .lrlay_left_in {
    width: 100%;
}
.layout_lr .lrlay_item {
    width: 100%;
}
.layout_lr .lrlay_empty {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 13px;
}

/* --- 왼쪽 스티키 (lr_sticky_on) --- */
.layout_lr .lrlay_grid.lr_sticky_on .lrlay_left_in {
    position: sticky;
    top: var(--lr-sticky-top, 100px);
}

/* --- 좌우 구분 라인 (lr_has_line) - 간격 중앙에 위치 --- */
.layout_lr .lrlay_grid.lr_has_line .lrlay_right::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc((var(--lr-gap, 40px) / 2 + var(--lr-line-w, 1px) / 2) * -1);
    border-left: var(--lr-line-w, 1px) var(--lr-line-style, solid) var(--lr-line-color, #e5e5e5);
    pointer-events: none;
}

/* --- 모바일(1열) 전환은 widget_body.php의 인라인 미디어쿼리에서 처리 ---
   (브레이크포인트가 위젯별 설정값이므로 여기서 고정하지 않음) */


/* ============================================
   관리자 전용 UI (프론트 페이지)
   ============================================ */

/* --- 칸별 뱃지 --- */
.lrlay_col_badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 99999;
    background: #0ea5e9;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
    line-height: 1.4;
}
.lrlay_col_badge small {
    font-weight: 400;
    opacity: 0.7;
    margin-left: 4px;
}
.layout_lr .lrlay_col:hover .lrlay_col_badge {
    opacity: 1;
}

/* --- 관리자 모드 그리드 아웃라인 --- */
.layout_lr .lrlay_admin_mode .lrlay_col,
.layout_lr .lrlay_grid.lrlay_admin_mode .lrlay_col {
    outline: 1px dashed #ddd;
    outline-offset: -1px;
    transition: outline-color 0.2s;
}
.layout_lr .lrlay_grid.lrlay_admin_mode .lrlay_col:hover {
    outline-color: #0ea5e9;
}