/* editor-content.css | Bootstrap 5.2.3 + light neumorphism (single-style) */

:root{
    --ec-bg: #f6f7fb;
    --ec-card: #ffffff;
    --ec-border: rgba(0,0,0,.08);
    --ec-shadow: 10px 10px 24px rgba(0,0,0,.08), -10px -10px 24px rgba(255,255,255,.85);
    --ec-radius: 18px;
}

/* wrapper */
.ec-wrap{
    background: var(--ec-bg);
    border-radius: 20px;
    padding: 1.25rem;
}

/* one-card style */
.ec-card{
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow);
}

/* chips */
.ec-chip{
    display:inline-flex;
    align-items:center;
    padding:.35rem .65rem;
    border-radius:999px;
    font-size:.85rem;
    background:#fff;
    border:1px solid rgba(0,0,0,.12);
    box-shadow: 4px 4px 10px rgba(0,0,0,.06), -4px -4px 10px rgba(255,255,255,.9);
}

/* divider */
.ec-divider{
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.15), transparent);
    margin: 1.25rem 0;
}

/* section separator */
.ec-section{
    padding: 1rem 0;
}
.ec-section + .ec-section{
    border-top: 1px dashed rgba(0,0,0,.15);
}

/* body text */
.ec-kv{
    font-size:.95rem;
    color: rgba(0,0,0,.70);
}

/* bootstrap table alignment */
.ec-wrap .table > :not(caption) > * > *{
    vertical-align: middle;
}

/* 모바일에서 테이블은 스크롤 컨테이너로 고정 */
.ec-wrap .table-responsive{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 테이블이 너무 줄어들지 않게 최소 너비 부여 */
.ec-wrap .table-responsive > .table{
    min-width: 720px; /* 640~900 사이에서 취향대로 */
}

/* 스크롤 힌트 */
/* 기본: 안 보이게 */
.ec-wrap .table-responsive::after{
    content: none;
}

/* 모바일에서만 표시 */
@media (max-width: 768px){
    .ec-wrap .table-responsive::after{
        content: "↔ 좌우로 스크롤";
        position: sticky;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        padding: .35rem .6rem;
        font-size: .75rem;
        color: rgba(0,0,0,.55);

        background: linear-gradient(
                270deg,
                rgba(246,247,251,.95),
                rgba(246,247,251,.6),
                rgba(246,247,251,0)
        );

        pointer-events: none;
    }
}