/* 내 자료함 — 알림·크레딧 화면과 같은 머리·목록 문법. 사용량 카드는 개인/작업 공간 두 장으로 나눠 서로 더하지 않는다. */
.storage-page{max-width:1100px;padding-top:48px;padding-bottom:88px;min-height:65vh}
.storage-heading{margin-bottom:28px}
.storage-heading h1{font-size:var(--ui-h1);line-height:1.22;letter-spacing:-.05em;font-weight:600;margin:8px 0 12px;color:var(--ui-ink)}
.storage-heading>p:last-child{color:var(--ui-ink-3);font-size:16px;line-height:1.7}
.storage-login{padding:40px 28px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-m);background:var(--ui-surface)}
.storage-login p{color:var(--ui-ink-2);line-height:1.7;margin-bottom:20px}

.storage-quota{display:grid;gap:10px;margin-bottom:16px;padding:24px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-m);background:var(--ui-surface)}
.storage-quota-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 16px}
.storage-quota-head p{color:var(--ui-ink-3);font-size:14px}
.storage-quota-head strong{font-size:30px;font-weight:600;letter-spacing:-.03em;color:var(--ui-ink);line-height:1.1}
.storage-meter{height:8px;border-radius:var(--ui-pill);overflow:hidden;background:var(--ui-surface-2)}
.storage-meter>span{display:block;height:100%;width:0;border-radius:inherit;background:var(--ui-accent)}
.storage-quota.is-over .storage-meter>span{background:#a03c2a}
.storage-quota-scope{font-size:12px;line-height:1.7;color:var(--ui-ink-3)}
.storage-quota-over{font-size:13px;line-height:1.6;color:#a03c2a}
.storage-usage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.storage-usage-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:24px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-m);background:var(--ui-surface)}
.storage-usage-label{font-size:13px;color:var(--ui-ink-3);overflow-wrap:anywhere}
.storage-usage-card>strong{font-size:30px;font-weight:600;letter-spacing:-.03em;color:var(--ui-ink);line-height:1.1}
.storage-bar{display:flex;gap:2px;height:8px;border-radius:var(--ui-pill);overflow:hidden;background:var(--ui-surface-2)}
.storage-bar>span{flex-basis:0;min-width:4px}
.storage-bar-posts,.storage-bar-projects{background:var(--ui-accent)}
.storage-bar-comments,.storage-bar-requests{background:var(--ui-link)}
.storage-bar-canvas{background:#8fb3c6}
.storage-legend{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:0;font-size:13px;color:var(--ui-ink-2)}
.storage-legend li{display:flex;align-items:center;gap:7px}
.storage-legend i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.storage-legend b{font-weight:600;color:var(--ui-ink)}
.storage-usage-missing{font-size:12px;color:var(--ui-ink-3)}
.storage-note{margin-top:12px;font-size:12px;line-height:1.7;color:var(--ui-ink-3)}

.storage-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin:36px 0 8px;padding:12px 0;border-block:1px solid var(--ui-line)}
.storage-tabs{display:flex;flex-wrap:wrap;gap:4px}
.storage-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:10px 14px;border-radius:var(--ui-radius-s);font-size:13px;color:var(--ui-ink-3)}
.storage-tabs button:hover{background:var(--ui-surface-2)}
.storage-tabs button[aria-pressed="true"]{background:var(--ui-accent);color:#fff}
.storage-tabs small{min-width:20px;padding:1px 6px;border-radius:var(--ui-pill);background:var(--ui-surface-2);color:var(--ui-ink-3);text-align:center;font-size:12px}
.storage-tabs button[aria-pressed="true"] small{background:var(--ui-accent-hover);color:#fff}
.storage-org{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ui-ink-3)}
.storage-org select{min-height:44px;max-width:260px;padding:8px 12px;border:1px solid var(--ui-line-strong);border-radius:var(--ui-radius-s);background:#fff;color:var(--ui-ink)}

.storage-sections.is-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.storage-section{min-width:0;padding:28px 0 12px}
.storage-section-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px}
.storage-section-head>div{display:flex;align-items:center;gap:10px}
.storage-section-head h2{font-size:20px;letter-spacing:-.03em;font-weight:600;color:var(--ui-ink)}
.storage-count{font-size:13px;color:var(--ui-ink-3)}
.storage-scope{display:flex;gap:4px;flex:1;min-width:0;font-size:12px;color:var(--ui-ink-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.storage-scope span:last-child{overflow:hidden;text-overflow:ellipsis}
.storage-list{border-top:1px solid var(--ui-line)}
.storage-row{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 10px;border-bottom:1px solid var(--ui-line);color:var(--ui-ink)}
a.storage-row:hover{background:var(--ui-surface)}
.storage-row-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;border-radius:var(--ui-radius-s);background:var(--ui-accent-soft);color:var(--ui-link)}
.storage-row-icon svg{width:18px;height:18px}
.storage-row-body{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.storage-row-body strong{font-size:15px;font-weight:600;line-height:1.4;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.storage-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12px;color:var(--ui-ink-3)}
.storage-badge{padding:1px 7px;border-radius:var(--ui-pill);background:var(--ui-surface-2);color:var(--ui-ink-2)}
.storage-row-size{flex-shrink:0;font-size:12px;color:var(--ui-ink-3);font-variant-numeric:tabular-nums}
.storage-row-arrow{flex-shrink:0;color:var(--ui-ink-3)}
.storage-state{padding:18px 0;font-size:14px;line-height:1.7;color:var(--ui-ink-3)}
.storage-state+.button{margin-bottom:12px}
.storage-more{min-height:44px;margin-top:4px;font-size:13px;color:var(--ui-link)}

@media(max-width:760px){
 .storage-page{padding-top:28px;padding-bottom:64px}
 .storage-usage,.storage-sections.is-overview{grid-template-columns:minmax(0,1fr)}
 .storage-usage-card,.storage-quota{padding:20px}
 .storage-quota-head strong{font-size:26px}
 .storage-usage-card>strong{font-size:26px}
 .storage-toolbar{margin-top:28px}
 .storage-tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none}
 .storage-tabs button{flex-shrink:0}
 .storage-org{width:100%}
 .storage-org select{flex:1;max-width:none}
 .storage-row{gap:12px;padding:12px 4px}
 .storage-row-arrow{display:none}
}

/* 내 자료 왼쪽 목록(2026-09-28): 내 자료함 · 내 프로젝트 · 저장한 자료가 상점 · 제작 작업과 같은 browse-layout을 쓴다.
   칸 고르기는 목록이 맡아 가로 탭은 없고, 세 화면의 제목 크기를 내 자료함에 맞춘다. */
.library-nav-count{margin-left:auto;min-width:22px;padding:1px 7px;border-radius:var(--ui-pill);background:var(--ui-surface-2);color:var(--ui-ink-3);font-size:11px;font-weight:600;line-height:1.6;text-align:center;font-variant-numeric:tabular-nums}
.library-sidebar a[aria-current="page"] .library-nav-count{background:var(--ui-accent);color:#fff}
.library-content>.storage-page,.library-content>.project-workspace,.library-content>.saved-page{max-width:none;margin:0;padding:0;min-height:0}
.library-content .storage-heading{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px 24px}
.library-content .storage-heading>div{min-width:0;flex:1 1 320px}
.library-content .storage-heading h1,.library-content .project-header h1,.library-content .saved-page .page-head h1{font-size:var(--ui-h1);line-height:1.22;letter-spacing:-.05em;font-weight:600;margin:8px 0 12px;color:var(--ui-ink)}
.library-content .project-header{padding-bottom:28px}.library-content .project-header>h1{margin:0}.library-content .project-header>p{max-width:none}.library-content .project-header .actions{margin-top:0}
.library-content .saved-page .page-head{max-width:none;margin-bottom:28px}.library-content .saved-page .page-head p{color:var(--ui-ink-3);font-size:16px;line-height:1.7}
.library-content .storage-sections:not(.is-overview) .storage-section{padding-top:0}
.library-content .saved-page .supplier-list{margin-top:0}.library-content .saved-page .supplier-list>p{padding:18px 0;font-size:14px;line-height:1.7;color:var(--ui-ink-3)}
.library-content .storage-sections.is-overview{margin-top:20px}
@media(max-width:760px){.library-content .storage-org{width:100%}}