.dl-library{color:var(--text);padding:4px 0 40px;max-width:1180px;margin:auto}.dl-hero{margin-bottom:24px}.dl-hero h1{font-size:30px;letter-spacing:-.6px;margin:0 0 10px}.dl-intro{font-size:16px;color:var(--text-soft);margin:0 0 8px}.dl-guide{font-size:13px;line-height:1.8;color:var(--text-mute);margin:0;max-width:760px}.dl-count{font-size:12px;color:var(--text-mute);margin:14px 0 0}
.dl-tools{display:flex;justify-content:space-between;gap:16px;align-items:center;border-block:1px solid var(--border);padding:16px 0;margin-bottom:30px}.dl-modes{display:flex;gap:5px}.dl-modes button,.dl-action,.dl-close{font:inherit;font-size:12px;padding:10px 14px;border:1px solid var(--border-strong);background:var(--bg-elev);color:var(--text-soft);border-radius:var(--radius-xs);cursor:pointer;white-space:nowrap}.dl-modes button[aria-pressed=true]{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-soft)}.dl-toolhint{font-size:12px;color:var(--text-mute)}.dl-library button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dl-group{margin-bottom:38px;padding-bottom:30px;border-bottom:1px solid var(--border)}.dl-grouphead{margin-bottom:18px}.dl-grouphead h2{font-size:21px;margin:0 0 7px;letter-spacing:-.3px}.dl-uses{font-size:13px;line-height:1.9;color:var(--text-mute);margin:0;max-width:820px}.dl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}.dl-card{padding:0;width:100%;color:var(--text);border:1px solid var(--border);background:var(--bg-elev);border-radius:var(--radius-xs);overflow:hidden;cursor:pointer;text-align:left}.dl-card:hover{border-color:var(--accent)}.dl-thumb{aspect-ratio:3/4;padding:6px;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);overflow:hidden}.dl-thumb img{width:100%;height:100%;object-fit:contain;display:block}.dl-cardfoot{display:none;font-size:var(--fs-xs);color:var(--text-soft);padding:10px 12px}.dl-flat .dl-cardfoot{display:block}.dl-note{font-size:12px;line-height:1.8;color:var(--text-mute);margin-top:30px}.dl-image-error{font-size:12px;color:var(--text-soft);padding:16px;line-height:1.8;text-align:center}
.dl-preview{width:calc(100vw - 48px);max-width:1280px;height:calc(100dvh - 48px);max-height:100dvh;padding:0;overflow:hidden;color:var(--text);background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:var(--radius-sm)}.dl-preview[open]{display:flex;flex-direction:column}.dl-preview::backdrop{background:rgba(0,0,0,.8)}.dl-previewbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0}.dl-previewtools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px 0;flex-shrink:0}.dl-counter{font-size:12px;color:var(--text-mute)}.dl-previewactions{display:flex;gap:6px;flex-wrap:wrap}.dl-previewhint{padding:0 20px;margin:10px 0 14px;line-height:1.7;font-size:12px;color:var(--text-mute);flex-shrink:0}.dl-previewpane{overflow:visible;flex:1;min-height:0;background:var(--bg);padding:20px;overscroll-behavior:contain}.dl-frame{max-width:1050px;margin:0 auto}.dl-frame img{display:block;width:100%;height:auto}.dl-original .dl-frame{max-width:none;width:max-content}.dl-original .dl-frame img{width:auto;max-width:none}.dl-action:disabled{opacity:.4;cursor:default}.dl-library [hidden]{display:none!important}
@media(min-width:1500px){.dl-all{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:800px){.dl-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.dl-toolhint{display:none}}
@media(max-width:560px){.dl-hero h1{font-size:27px}.dl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.dl-uses{font-size:12px}.dl-grouphead h2{font-size:19px}.dl-thumb{padding:4px}.dl-cardfoot{padding:8px;font-size:var(--fs-xs)}.dl-preview{width:calc(100vw - 16px);height:calc(100dvh - 16px)}.dl-previewbar{padding:12px}.dl-previewtools{padding:10px 12px 0;align-items:flex-start;flex-wrap:wrap}.dl-previewactions{gap:5px}.dl-action{padding:9px 10px}.dl-previewhint{padding:0 12px}.dl-previewpane{padding:12px}}

.dl-grouphead{position:relative;padding-right:110px}.dl-compare-button{position:absolute;right:0;top:0;color:var(--accent-ink)}.dl-type-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dl-compare-dialog{max-width:1480px}.dl-comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}.dl-compare-frame{margin:0;min-width:0}.dl-compare-frame img{width:100%;height:auto;display:block}
@media(max-width:560px){.dl-grouphead{padding-right:0}.dl-compare-button{position:static;margin-top:12px}.dl-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dl-comparison{grid-template-columns:repeat(3,85vw);gap:12px;scroll-snap-type:x proximity}.dl-compare-frame{scroll-snap-align:start}}

.dl-card{position:relative}.dl-comparebar{justify-content:flex-end;padding:10px 14px}

/* Gallery refinements use the existing brand palette. */
.dl-hero{margin-bottom:20px}.dl-hero h1{font-size:32px}.dl-intro{font-size:14px}.dl-guide{max-width:670px}.dl-tools{padding:14px 0;margin-bottom:26px}.dl-modes{padding:4px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-soft);gap:3px}.dl-modes button{border:1px solid transparent;background:transparent;padding:10px 18px;border-radius:var(--radius-xs)}.dl-modes button[aria-pressed=true]{border-color:var(--border-strong);background:var(--bg-elev);box-shadow:var(--shadow);color:var(--text)}
.dl-card{border-radius:var(--radius-sm);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}.dl-card:hover{box-shadow:var(--shadow)}.dl-thumb{padding:9px}.dl-cardfoot{padding:11px 14px;border-top:1px solid var(--border)}.dl-group{padding-bottom:34px;margin-bottom:34px}.dl-uses{max-width:720px;line-height:1.85}.dl-grid{gap:18px}
.dl-preview{border-radius:14px;box-shadow:var(--shadow-lg)}.dl-preview[open]{animation:dl-popup-in var(--dur-base) var(--ease)}.dl-preview::backdrop{background:rgba(0,0,0,.82)}.dl-previewbar{padding:16px 20px}.dl-close{min-height:40px;min-width:56px;background:var(--bg-soft)}.dl-close:hover,.dl-action:hover:not(:disabled){border-color:var(--accent);color:var(--accent-ink)}.dl-previewpane{scrollbar-width:thin;scrollbar-color:var(--border-strong) var(--bg)}.dl-frame{padding:4px}.dl-previewtools{padding-top:14px}.dl-previewactions{gap:8px}.dl-comparebar{padding:10px 14px;border:0}.dl-comparison{padding:8px 20px 20px;gap:20px}.dl-compare-enlarge{display:block;border:0;background:transparent;padding:0;width:100%;cursor:zoom-in}.dl-compare-frame img{max-height:calc(100dvh - 125px);object-fit:contain}.dl-compare-frame{border-radius:var(--radius-xs);overflow:hidden}
@keyframes dl-popup-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:560px){.dl-hero h1{font-size:27px}.dl-modes button{padding:10px 14px}.dl-grid{gap:10px}.dl-thumb{padding:5px}.dl-cardfoot{padding:9px}.dl-preview{border-radius:10px}.dl-previewbar{padding:12px}.dl-comparison{padding:4px 12px 12px;gap:12px}.dl-compare-frame img{max-height:none}.dl-previewactions{gap:5px}}
@media(prefers-reduced-motion:reduce){.dl-preview[open]{animation:none}.dl-card{transition:none}}

.dl-popupheading{display:flex;align-items:center;gap:12px;min-width:0}.dl-popupheading strong{font-size:16px}.dl-popupheading .dl-counter{white-space:nowrap}.dl-previewbar{flex-wrap:wrap}.dl-previewbar+.dl-previewhint{margin:0;padding:0 20px 16px;background:var(--bg-elev)}.dl-comparebar{display:flex;gap:8px}.dl-comparison{align-items:start}.dl-compare-frame{height:calc(100dvh - 130px)}.dl-compare-viewport{width:100%;height:100%;overflow:visible;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border-strong) var(--bg)}.dl-compare-enlarge{width:100%;height:100%;min-width:100%;min-height:100%;display:block}.dl-compare-enlarge img{width:100%;height:100%;max-height:none;object-fit:contain}.dl-compare-enlarge.dl-zoomed{cursor:zoom-out}.dl-compare-frame{overflow:visible}
@media(max-width:560px){.dl-previewbar{gap:10px}.dl-popupheading{width:100%}.dl-previewactions{width:100%;justify-content:flex-end;gap:4px}.dl-previewactions button{padding:8px;font-size:11px;min-width:0}.dl-previewbar+.dl-previewhint{padding:0 12px 12px}.dl-comparebar{flex-wrap:nowrap}.dl-compare-frame{height:calc(100dvh - 110px)}}

.dl-compare-title{margin-right:auto;font-size:16px}.dl-comparebar{justify-content:space-between}
@media(max-width:560px){.dl-comparebar{flex-wrap:wrap}.dl-compare-title{width:100%;font-size:14px}.dl-compare-frame{height:calc(100dvh - 160px)}}

.dl-collections{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px;padding:0 0 8px}.dl-collection{font:600 var(--fs-sm)/1.5 var(--font);color:var(--text-soft);background:transparent;border:1px solid transparent;border-radius:var(--radius-xs);padding:10px 14px;white-space:nowrap;cursor:pointer}.dl-collection[aria-selected=true]{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--border-strong)}.dl-cardfoot{justify-content:space-between;gap:6px}.dl-flat .dl-cardfoot{display:flex}.dl-cardfoot small{white-space:nowrap;color:var(--text-mute)}.dl-library[data-collection=infographics] .dl-thumb{aspect-ratio:4/3}.dl-library[data-collection=brand] .dl-thumb{aspect-ratio:8/5}.dl-library[data-collection=motion] .dl-thumb,.dl-library[data-collection=ppt] .dl-thumb{aspect-ratio:16/9}
.dl-paneltools,.dl-downloads{display:flex;align-items:center;gap:10px;padding:0 20px 12px;flex-shrink:0}.dl-paneltools span{font-size:12px;color:var(--text-mute)}.dl-downloads a{text-decoration:none}.dl-description-details{padding:0 20px 12px;font-size:12px;flex-shrink:0}.dl-description-details summary{cursor:pointer;color:var(--text-soft);padding:4px 0}.dl-description-details p{color:var(--text-mute);line-height:1.8;margin:6px 0 14px}.dl-description-details>div{padding-top:12px;max-width:860px}.dl-frame video{display:block;width:100%;max-height:70vh}.dl-compare-video{width:100%;height:100%;object-fit:contain}.dl-compare-panel-tools{display:flex;justify-content:center;align-items:center;gap:8px;height:38px;font-size:12px;color:var(--text-soft)}.dl-compare-panel-tools button{padding:4px 12px}.dl-panel-frame .dl-compare-viewport{height:calc(100% - 38px)}
@media(max-width:560px){.dl-collection{padding:9px 12px}.dl-paneltools,.dl-downloads,.dl-description-details{padding-left:12px;padding-right:12px}}

/* Whole examples expand into the page, including three-way comparisons. */
.dl-previewpane{flex:none}
.dl-original .dl-frame{width:100%;max-width:100%}
.dl-original .dl-frame img{width:100%;max-width:100%}
.dl-compare-frame,.dl-compare-viewport,.dl-panel-frame .dl-compare-viewport{height:auto}
.dl-compare-frame.is-expanded{grid-column:1/-1}
.dl-compare-enlarge,.dl-compare-enlarge img{width:100%;height:auto;min-height:0;max-height:none}
.dl-downloads{flex-wrap:wrap}
@media(max-width:560px){.dl-comparison{grid-template-columns:minmax(0,1fr)}}
.dl-previewactions{min-width:0;max-width:100%}
@media(max-width:700px){.dl-preview:not(.dl-compare-dialog) .dl-previewbar{grid-template-columns:minmax(0,1fr)}}

.dl-thumb img:not([src]){visibility:hidden}

/* Title, count and description stay together in every individual viewer. */
.dl-preview:not(.dl-compare-dialog) .dl-previewbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;padding:12px 20px}.dl-popupcopy{min-width:0}.dl-popupcopy .dl-popupheading{align-items:baseline;gap:10px;width:auto}.dl-popupcopy .dl-previewhint{margin:4px 0 0;padding:0;line-height:1.65;font-size:var(--fs-xs);color:var(--text-soft);overflow-wrap:anywhere}.dl-popupcopy .dl-popupheading strong{font-size:var(--fs-base);line-height:1.5}.dl-preview:not(.dl-compare-dialog) .dl-previewactions{align-items:flex-start;flex-wrap:nowrap}.dl-frame img:not([src]){visibility:hidden;min-height:200px}
@media(max-width:700px){.dl-preview:not(.dl-compare-dialog) .dl-previewbar{grid-template-columns:1fr;gap:10px;padding:12px}.dl-preview:not(.dl-compare-dialog) .dl-previewactions{justify-content:flex-end;width:100%}}
/* 팝업(모달)로 열린 미리보기·도안 비교는 팝업 안에서 내용을 스크롤한다. */
dialog.dl-preview[open]:not(.site-inline-panel) .dl-previewpane{overflow:auto}
.dl-preview:not(.site-inline-panel) .dl-previewpane{flex:1 1 auto;min-height:0}