/* Meta creative library. All rules are scoped; legacy campaign/copy styles stay intact. */
.main.clib-main-active { background:#f6f7f9; padding-top:32px; }
#clib-page { max-width:1824px; margin:0 auto; color:#333d4d; font-size:14px; }
#clib-page[hidden],#clib-layer[hidden],.clib-dialog [hidden],.clib-field [hidden] { display:none!important; }
#clib-page h1 { font-size:24px; line-height:32px; font-weight:600; margin:0 0 16px; }
.clib-meta { display:inline-flex; align-items:center; gap:6px; background:#366ad9; color:white; border-radius:100px; padding:8px 10px 8px 8px; height:40px; font-size:13px; font-weight:700; margin-bottom:16px; }
.clib-meta-avatar { display:grid; place-items:center; width:24px; height:24px; background:white; border-radius:50%; }
.clib-search { height:50px; border:1px solid #dfe1e5; border-radius:8px; display:flex; align-items:center; background:white; padding:8px 12px; gap:12px; margin-bottom:8px; }
.clib-search input { border:0; outline:none; min-width:0; width:100%; color:inherit; background:none; font-size:16px; }
.clib-search input::placeholder { color:#818896; }
.clib-search button { display:flex; align-items:center; gap:8px; border:0; color:#7e8794; background:none; white-space:nowrap; }
.clib-panel { border:1px solid #dfe1e5; border-radius:12px; background:white; overflow:hidden; }
.clib-panel-tabs { height:52px; margin:12px 16px 0; border-bottom:1px solid #dfe1e5; display:flex; align-items:stretch; gap:0; }
.clib-panel-tabs button { border:0; background:none; display:flex; align-items:center; gap:8px; color:#7d8591; font-size:20px; padding:4px 12px 16px; position:relative; }
.clib-panel-tabs button[aria-selected=true] { color:#333d4d; }
.clib-panel-tabs button[aria-selected=true]::after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:#366ad9; }
.clib-toolbar { margin:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:32px; }
.clib-actions { display:flex; align-items:center; gap:8px; }
.clib-button { font:inherit; border:1px solid #dfe1e5; color:#374151; background:white; border-radius:8px; padding:8px 18px; line-height:26px; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }
.clib-button:hover:not(:disabled) { background:#f2f5fc; }
.clib-button.clib-primary { border-color:#366ad9; background:#366ad9; color:white; }
.clib-button.clib-primary:hover:not(:disabled) { background:#2d5fc8; }
.clib-button:disabled { opacity:.3; cursor:not-allowed; }
.clib-button.clib-small { padding:3px 10px; font-size:13px; line-height:24px; }
.clib-button.clib-neutral { background:#eee; border-color:#eee; }
.clib-button.clib-danger { background:#e34c51; color:white; border-color:#e34c51; }
.clib-segments { display:flex; align-items:center; gap:4px; padding:4px; background:#eee; border-radius:8px; }
.clib-segments button { border:0; border-radius:4px; color:#737b88; background:none; padding:2px 10px; min-height:24px; font:inherit; white-space:nowrap; }
.clib-segments button[aria-pressed=true] { background:white; color:#374151; box-shadow:0 1px 4px #0002; }
.clib-table-scroll { margin:0 16px; overflow:auto; max-height:calc(100vh - 450px); min-height:270px; scrollbar-color:#c2c7d0 #f7f7f8; }
.clib-table { border-collapse:separate; border-spacing:0; table-layout:fixed; min-width:1792px; width:100%; font-size:14px; }
.clib-table th { position:sticky; top:0; z-index:2; height:36px; padding:6px 16px; background:#f6f7f9; text-align:left; font-weight:500; border-bottom:1px solid #dfe1e5; white-space:nowrap; }
.clib-table th button { display:inline-flex; gap:4px; align-items:center; background:none; color:inherit; border:0; padding:0; font:inherit; }
.clib-table td { height:76px; padding:8px 16px; border-bottom:1px solid #dfe1e5; vertical-align:middle; background:white; }
.clib-table .clib-check-col { position:sticky; left:0; z-index:1; width:50px; text-align:center; padding:8px; }
.clib-table .clib-name-col { position:sticky; left:50px; z-index:1; width:506px; box-shadow:6px 0 8px -8px #475569; }
.clib-table th.clib-check-col,.clib-table th.clib-name-col { z-index:3; background:#f6f7f9; }
.clib-table tr.clib-row-picked td { background:#f2f6ff; }
.clib-table tbody tr:hover td { background:#f8faff; }
.clib-table input[type=checkbox] { width:18px; height:18px; margin:0; accent-color:#366ad9; cursor:pointer; }
.clib-name-cell { display:flex; align-items:center; gap:16px; }
.clib-table-image { width:60px; height:60px; flex:0 0 60px; border-radius:4px; background:#eee; overflow:hidden; position:relative; }
.clib-table-image img { width:100%; height:100%; object-fit:cover; }
.clib-table-name { line-height:20px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow-wrap:anywhere; flex:1; }
.clib-row-preview { opacity:0; flex-shrink:0; background:white; border:1px solid #dce2eb; border-radius:6px; padding:4px; display:grid; place-items:center; }
.clib-table tr:hover .clib-row-preview,.clib-row-preview:focus { opacity:1; }
.clib-version { display:inline-flex; border-radius:16px; font-size:13px; padding:2px 8px; color:#00a6db; background:#e1f4ff; }
.clib-version.clib-pso { background:#eceef2; color:#70768d; }
.clib-page-footer { display:flex; align-items:center; justify-content:flex-end; gap:20px; padding:12px 18px; min-height:52px; font-size:12px; color:#667080; }
.clib-page-footer select { border:0; background:none; color:inherit; font:inherit; }
.clib-icon-button { background:none; border:0; padding:4px; display:inline-grid; place-items:center; color:#737b88; border-radius:50%; }
.clib-icon-button:disabled { opacity:.3; cursor:not-allowed; }
.clib-empty { min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#8b939f; line-height:1.7; text-align:center; padding:24px; }
.clib-empty p { margin:0; }
.clib-overlay { position:fixed; inset:0; background:rgba(18,26,42,.38); z-index:1200; display:flex; align-items:center; justify-content:center; padding:24px; }
.clib-dialog { background:white; border-radius:12px; width:944px; height:868px; max-width:calc(100vw - 48px); max-height:calc(100dvh - 48px); display:flex; flex-direction:column; box-shadow:0 16px 38px #0003,0 6px 15px #0002; color:#374151; font-size:14px; overflow:hidden; }
.clib-dialog:focus { outline:none; }
.clib-dialog button,.clib-dialog input,.clib-dialog select { font-family:inherit; }
.clib-dialog-head { min-height:64px; padding:20px 24px 12px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-shrink:0; }
.clib-dialog-head h2 { margin:0; font-size:20px; line-height:32px; font-weight:500; }
.clib-modal-tabs { padding:0 24px; border-bottom:1px solid #dfe1e5; display:flex; height:44px; flex-shrink:0; }
.clib-modal-tabs button { border:0; background:none; color:#7e8795; font-size:16px; font-weight:600; padding:8px 16px 12px; position:relative; }
.clib-modal-tabs button[aria-selected=true] { color:#366ad9; }
.clib-modal-tabs button[aria-selected=true]::after { content:""; height:2px; background:#366ad9; position:absolute; left:0; right:0; bottom:-1px; }
.clib-modal-search-wrap { padding:16px 24px; background:#fafafa; flex-shrink:0; }
.clib-modal-search { border:1px solid #dfe1e5; background:white; border-radius:8px; height:40px; padding:8px 12px; display:flex; align-items:center; gap:10px; }
.clib-modal-search input { min-width:0; width:100%; border:0; outline:none; font-size:16px; color:inherit; }
.clib-modal-content { flex:1; min-height:0; overflow:auto; padding:0 24px; scrollbar-gutter:stable; }
.clib-guidance { font-size:12px; color:#8a919d; line-height:20px; margin:10px 0; }
.clib-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:16px; }
.clib-media-card { min-width:0; text-align:center; position:relative; color:#344054; }
.clib-card-thumb { display:block; width:100%; aspect-ratio:1; overflow:hidden; border-radius:6px; background:#eee; border:1px solid #e2e3e7; position:relative; }
.clib-card-thumb .clib-media-img { width:100%; height:100%; object-fit:cover; }
.clib-media-img { opacity:0; transition:opacity .2s ease; }
.clib-media-img.clib-loaded { opacity:1; }
.clib-media-img.clib-broken { display:none; }
.clib-card-thumb.clib-image-error::after,.clib-table-image.clib-image-error::after { content:"미리보기 없음"; font-size:11px; color:#929aaa; position:absolute; inset:0; display:grid; place-items:center; }
.clib-card-pick { border:0; background:none; position:absolute; inset:0; width:100%; }
.clib-card-pick:disabled { cursor:not-allowed; background:rgba(255,255,255,.55); }
.clib-radio { position:absolute; width:20px; height:20px; border:1px solid white; box-shadow:0 0 0 1px #0001; border-radius:50%; right:5px; top:5px; }
.clib-radio.clib-checked { background:#366ad9; border-color:#366ad9; }
.clib-radio.clib-checked::after { content:"✓"; color:white; font-size:13px; position:absolute; left:4px; top:0; }
.clib-media-card.clib-selected .clib-card-thumb { outline:2px solid #366ad9; outline-offset:-2px; }
.clib-card-eye { position:absolute; bottom:4px; left:4px; background:white; border:1px solid #dfe1e5; border-radius:4px; padding:2px 4px; line-height:0; z-index:1; }
.clib-card-name { display:flex; justify-content:center; font-size:12px; line-height:20px; margin-top:4px; white-space:nowrap; }
.clib-card-name span:first-child { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.clib-card-name span:last-child { flex-shrink:0; }
.clib-card-meta { color:#89909b; font-size:12px; line-height:20px; }
.clib-pagination { display:flex; justify-content:center; align-items:center; gap:6px; padding:14px 0; }
.clib-pagination button { min-width:32px; height:32px; border:0; border-radius:50%; color:#4b5563; background:none; font:inherit; }
.clib-pagination button[aria-current=page] { background:#eef0f4; }
.clib-pagination button:disabled { opacity:.3; cursor:not-allowed; }
.clib-dialog-foot { padding:24px; display:flex; align-items:center; justify-content:flex-end; gap:8px; border-top:1px solid #e2e4e8; flex-shrink:0; }
.clib-selection-count { margin-right:auto; display:flex; align-items:center; gap:8px; font-size:16px; color:#366ad9; }
.clib-selection-count button { border:0; background:none; display:grid; place-items:center; padding:4px; }
.clib-file-alert { background:#fff4df; padding:16px 24px; color:#66543d; display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:20px; flex-shrink:0; }
.clib-upload-area { padding-top:24px; }
.clib-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%; height:116px; border:1px dashed #d9dde5; background:white; border-radius:8px; color:#374151; font:inherit; }
.clib-drop:hover,.clib-drop.clib-dragging { border-color:#366ad9; background:#f5f8ff; }
.clib-drop:disabled { opacity:.6; cursor:wait; }
.clib-drop small { color:#8590a0; font-size:12px; line-height:20px; }
.clib-specs-link { display:flex; align-items:center; gap:4px; justify-content:flex-end; color:#00a6d9; border:0; background:none; padding:8px 0 12px; margin-left:auto; font:inherit; }
.clib-upload-title { font-size:14px; font-weight:500; margin:0 0 6px; }
.clib-upload-note { background:#f6f7f9; padding:8px 12px; border-radius:8px; color:#8b929f; font-size:12px; line-height:20px; margin-bottom:16px; }
.clib-error { color:#d54248; background:#fff1f1; padding:12px; border-radius:8px; font-size:13px; line-height:1.65; margin:10px 0; overflow-wrap:anywhere; }
.clib-upload-status { color:#366ad9; font-size:13px; line-height:20px; margin:8px 0; }
.clib-spinner { display:inline-block; width:22px; height:22px; border:2px solid #dfe6f6; border-top-color:#366ad9; border-radius:50%; animation:clib-spin .8s linear infinite; }
@keyframes clib-spin { to { transform:rotate(360deg); } }
.clib-spec-list { font-size:13px; line-height:1.8; margin:0; padding-left:20px; }
.clib-mini-dialog { width:560px; height:auto; min-height:180px; }
.clib-mini-body { padding:4px 24px 24px; line-height:1.8; overflow:auto; }
.clib-preview-body { flex:1; min-height:0; overflow:auto; padding:12px 24px 24px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.clib-preview-body img,.clib-preview-body video { max-width:100%; max-height:calc(100dvh - 260px); object-fit:contain; border-radius:4px; }
.clib-preview-body .clib-preview-info { color:#7d8796; font-size:13px; text-align:center; }
.clib-crop-dialog { width:940px; height:auto; }
.clib-crop-body { display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:16px; padding:0 24px 24px; min-height:0; overflow:auto; }
.clib-crop-canvas { width:100%; height:400px; display:block; background:#e5e7eb; touch-action:none; cursor:move; border-radius:4px; }
.clib-crop-settings { display:flex; flex-direction:column; gap:12px; font-size:14px; }
.clib-crop-settings .clib-segments { gap:0; }
.clib-crop-settings .clib-segments button { padding:2px 6px; font-size:13px; }
.clib-crop-preview { width:200px; height:200px; background:#eee; object-fit:contain; border:1px solid #dfe1e5; }
.clib-crop-settings input[type=range] { width:100%; accent-color:#366ad9; }
.clib-crop-hint { color:#8892a2; font-size:12px; line-height:1.7; margin:0; }
.clib-field { display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:16px; min-height:92px; height:auto; cursor:default; }
.clib-field-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.clib-field-selected { display:flex; align-items:center; gap:12px; min-width:0; }
.clib-field-selected>img { width:64px; height:64px; object-fit:cover; border-radius:6px; background:#eee; }
.clib-field-file { min-width:0; flex:1; overflow-wrap:anywhere; font-size:13px; }
.clib-field-file small { display:block; color:#8290a2; margin-top:4px; }
.clib-field .clib-button { font-size:13px; line-height:22px; padding:6px 10px; }
.clib-field-empty { color:#8794a7; font-size:13px; }
.clib-toast { position:fixed; left:50%; bottom:32px; transform:translateX(-50%); background:#263345; color:white; padding:12px 20px; border-radius:8px; z-index:1500; box-shadow:0 4px 18px #0002; font-size:14px; max-width:90vw; }
.clib-prototype-note { color:#8a929f; font-size:12px; margin:10px 0; }
.clib-notice-dialog .clib-mini-body { font-size:16px; line-height:1.8; }
.clib-notice-dialog p { margin:8px 0 0; }
.clib-hover-preview,.clib-spec-tooltip { position:fixed; z-index:1450; pointer-events:none; box-shadow:0 6px 18px #0003; }
.clib-hover-preview { width:182px; height:182px; padding:8px; border-radius:4px; background:rgba(97,97,97,.9); }
.clib-hover-preview img { width:166px; height:166px; object-fit:contain; border-radius:8px; background:#eee; }
.clib-spec-tooltip { width:196px; padding:8px; border-radius:8px; color:#475467; background:#fff; font-size:12px; line-height:20px; }
.clib-nav { position:relative; }
.clib-nav:hover::after { content:"광고 소재 라이브러리"; position:absolute; left:46px; top:7px; white-space:nowrap; background:#263345; color:white; padding:6px 10px; border-radius:6px; font-size:12px; z-index:10; }
.clib-focus:focus-visible,.clib-dialog button:focus-visible,#clib-page button:focus-visible,.clib-field button:focus-visible { outline:2px solid #366ad9; outline-offset:2px; }
@media(max-width:1100px) { .clib-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media(max-width:720px) { .clib-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.clib-crop-body { grid-template-columns:1fr; }.clib-crop-settings { flex-direction:row; flex-wrap:wrap; }.clib-crop-preview { width:120px; height:120px; }.clib-dialog-foot { padding:16px; }.clib-crop-canvas { height:300px; } }
@media(prefers-reduced-motion:reduce) { .clib-media-img { transition:none; }.clib-spinner { animation:none; } }