fix(cupang): 3열에서 ③ 카드 자체를 스크롤러로
카드 높이는 grid 행(1fr)으로 화면에 맞춰져 있으므로 카드에 overflow-y:auto 를 걸면 안쪽 구조와 무관하게 스크롤된다. 목록은 자연 높이로 두고 헤더는 sticky. JS 높이 계산 대상에서 ③ 제외(①② 만 유지). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1512,3 +1512,30 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 넓은 화면(3열): ③ 카드 자체가 스크롤러 ──
|
||||
카드 높이는 그리드 행(1fr)로 화면에 맞춰져 있으므로, 카드에 스크롤을 걸면
|
||||
안쪽 구조와 무관하게 항상 스크롤된다. 헤더는 위에 고정. */
|
||||
@media (min-width: 1501px) {
|
||||
.cpg-calc3 > .cpg-dist-card {
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
.cpg-dist-card .cpg-card-head {
|
||||
position: sticky; top: 0; z-index: 3;
|
||||
background: var(--color-canvas-white);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
/* 안쪽 목록은 자연 높이 — 스크롤은 카드가 담당 */
|
||||
.cpg-dist-card .cpg-dist-list {
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.cpg-calc3 > .cpg-dist-card::-webkit-scrollbar { width: 10px; }
|
||||
.cpg-calc3 > .cpg-dist-card::-webkit-scrollbar-thumb {
|
||||
background: var(--color-subtle-ash); border-radius: 999px;
|
||||
}
|
||||
.cpg-calc3 > .cpg-dist-card::-webkit-scrollbar-thumb:hover { background: var(--color-midtone-gray); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user