feat(lecture-ppt): PPT/PDF 슬라이드 1·2·3단 그리드 보기 및 1단 시 너비 제한

Made-with: Cursor
This commit is contained in:
2026-04-18 08:34:52 +09:00
parent 72e8ff6ee5
commit aa60d275a3
3 changed files with 122 additions and 2 deletions

View File

@@ -1323,11 +1323,73 @@ button.ai-case-inline-link:hover {
color: #374151;
}
.ppt-tools-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
justify-content: space-between;
}
.slide-layout-toggle {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.slide-layout-toggle-label {
font-size: 13px;
color: #6b7280;
margin-right: 4px;
}
.slide-layout-btn {
padding: 6px 12px;
border-radius: 8px;
border: 1px solid #d1d5db;
background: #fff;
color: #374151;
font-size: 13px;
cursor: pointer;
line-height: 1.2;
}
.slide-layout-btn:hover {
background: #f9fafb;
border-color: #9ca3af;
}
.slide-layout-btn.is-active {
background: #1f2937;
color: #fff;
border-color: #1f2937;
}
.slide-list {
display: grid;
gap: 12px;
}
.slide-list.slide-list--cols-1 {
grid-template-columns: minmax(0, 1fr);
}
.slide-list.slide-list--cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.slide-list.slide-list--cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 960px) {
.slide-list.slide-list--cols-2,
.slide-list.slide-list--cols-3 {
grid-template-columns: minmax(0, 1fr);
}
}
.slide-card {
border: 1px solid #e5e7eb;
border-radius: 12px;
@@ -1340,6 +1402,15 @@ button.ai-case-inline-link:hover {
font-size: 18px;
}
.slide-list.slide-list--cols-2 .slide-card h2,
.slide-list.slide-list--cols-3 .slide-card h2 {
font-size: 14px;
}
.slide-list.slide-list--cols-3 .slide-card {
padding: 12px;
}
.slide-card header p {
margin: 4px 0 0;
color: #4b5563;
@@ -1351,6 +1422,13 @@ button.ai-case-inline-link:hover {
overflow: hidden;
background: #f3f4f6;
}
.slide-list.slide-list--cols-1 .slide-image-wrap {
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
.slide-image {
display: block;
max-width: 100%;