/* 관리자 표준 부품 모양. 색은 --mg-* 이름만, 글자는 12px 이상. 부품 이름은 ui-로 시작한다.
   크기 규칙: 버튼 높이 sm 32 · md 36 · lg 44, 표 줄 최소 48, 글자 본문 14 · 보조 13 · 작은 12. */
.ui-btn{--h:36px;font:inherit;font-size:var(--mg-fs-sm);font-weight:var(--mg-weight-semibold);display:inline-flex;align-items:center;justify-content:center;gap:var(--mg-space-6);min-height:var(--h);padding:0 var(--mg-space-12);border:1px solid var(--mg-paper-3);border-radius:var(--mg-radius-md);background:var(--mg-white);color:var(--mg-black);cursor:pointer;white-space:nowrap;line-height:1.2;transition:background var(--mg-dur-fast),border-color var(--mg-dur-fast)}
.ui-btn.sm{--h:32px;font-size:var(--mg-fs-xs);padding:0 var(--mg-space-10)}
.ui-btn.lg{--h:44px;font-size:var(--mg-fs-md);padding:0 var(--mg-space-16)}
.ui-btn svg{width:16px;height:16px;flex:none}
.ui-btn:hover:not(:disabled){border-color:var(--mg-muted)}
.ui-btn.primary{background:var(--mg-black);border-color:var(--mg-black);color:var(--mg-white)}
.ui-btn.primary:hover:not(:disabled){background:var(--mg-black-4)}
.ui-btn.danger{background:var(--mg-red);border-color:var(--mg-red);color:var(--mg-white)}
.ui-btn.quiet{border-color:transparent;background:transparent;color:var(--mg-black-4);padding:0 var(--mg-space-8)}
.ui-btn.quiet:hover:not(:disabled){background:var(--mg-ink)}
.ui-btn.icon{width:var(--h);padding:0}
.ui-btn.done{color:var(--mg-black);border-color:var(--mg-black)}
.ui-btn:disabled{opacity:.45;cursor:default}
.ui-btn[aria-busy="true"]{opacity:1;cursor:progress}
.ui-btn:focus-visible,.ui-table tr:focus-visible,.ui-card:focus-visible{outline:2px solid var(--mg-focus-ring);outline-offset:2px}
.ui-spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-spin .7s linear infinite}
@keyframes ui-spin{to{transform:rotate(360deg)}}

/* 상태 배지: 5가지 뜻만 */
.ui-badge{display:inline-flex;align-items:center;gap:var(--mg-space-4);font-size:var(--mg-fs-2xs);font-weight:var(--mg-weight-bold);line-height:1.4;padding:var(--mg-space-2) var(--mg-space-8);border-radius:var(--mg-radius-pill);white-space:nowrap;border:1px solid transparent}
.ui-badge.attention{background:var(--mg-red-soft);color:var(--mg-red)}
.ui-badge.urgent{background:var(--mg-red);color:var(--mg-white)}
.ui-badge.done{background:var(--mg-black);color:var(--mg-white)}
.ui-badge.neutral{background:var(--mg-paper-2);color:var(--mg-black-4)}
.ui-badge.muted{border-color:var(--mg-paper-3);color:var(--mg-gray);background:var(--mg-white)}

/* 표 ↔ 카드: 같은 정의에서. 801px 이상 표, 그 아래 카드 */
.ui-list{display:flex;flex-direction:column;min-height:0;flex:1;position:relative}
.ui-list[aria-busy="true"] .ui-table,.ui-list[aria-busy="true"] .ui-cards{opacity:.55;transition:opacity var(--mg-dur-fast)}
.ui-list-scroll{overflow:auto;min-height:0;flex:1;container-type:inline-size}
.ui-table col[style]{width:var(--w)}
/* 좁아지면: 덜 중요한 열(minor)과, 옆 창이 열렸을 때 처리 버튼 열을 접는다. 열 순서가 밀리지 않게 칸은 남기고 폭만 0. */
.ui-table :is(th,td).minor,.ui-table :is(th,td).ui-cell-act{transition:none}
@container (max-width:900px){.ui-list-scroll .ui-table{min-width:0}.ui-table col.minor{width:0}.ui-table :is(th,td).minor{padding:0;border-bottom-color:var(--mg-paper-2);visibility:hidden;font-size:0}}
:is(.db-detail-open,.qi-open,.ui-drawer-open) .ui-table col.ui-col-act{width:0}
:is(.db-detail-open,.qi-open,.ui-drawer-open) .ui-table :is(th,td).ui-cell-act{padding:0;visibility:hidden;font-size:0}
.ui-table{width:100%;min-width:var(--ui-table-min,900px);border-collapse:collapse;table-layout:fixed;font-size:var(--mg-fs-sm);color:var(--mg-black)}
.ui-table th{position:sticky;top:0;z-index:1;background:var(--mg-ink);color:var(--mg-gray);font-size:var(--mg-fs-xs);font-weight:var(--mg-weight-semibold);text-align:left;padding:var(--mg-space-10) var(--mg-space-12);border-bottom:1px solid var(--mg-paper-2);white-space:nowrap}
.ui-table td{padding:var(--mg-space-12);border-bottom:1px solid var(--mg-paper-2);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:48px}
.ui-table td.wrap{white-space:normal;overflow-wrap:anywhere}
.ui-table td.clamp span{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.ui-table td.strong{font-weight:var(--mg-weight-bold)}
.ui-table .end{text-align:right}
.ui-table td.thumb img{width:48px;height:48px;object-fit:cover;border-radius:var(--mg-radius-sm);display:block;background:var(--mg-paper-2)}
.ui-table tbody tr[tabindex]{cursor:pointer}
.ui-table tbody tr:hover{background:var(--mg-ink)}
.ui-table tbody tr.selected{background:var(--mg-paper-2);box-shadow:inset 3px 0 0 var(--mg-black)}
.ui-row-actions{display:inline-flex;gap:var(--mg-space-6);justify-content:flex-end;flex-wrap:wrap}
.ui-cards{display:none;padding:var(--mg-space-8) var(--mg-space-12);gap:var(--mg-space-8)}
.ui-card{display:flex;gap:var(--mg-space-12);padding:var(--mg-space-12) var(--mg-space-16);border:1px solid var(--mg-paper-2);border-radius:var(--mg-radius-lg);background:var(--mg-white);cursor:pointer}
.ui-card.selected{border-color:var(--mg-black)}
.ui-card-thumb img{width:64px;height:64px;object-fit:cover;border-radius:var(--mg-radius-md);display:block}
.ui-card-body{display:grid;gap:var(--mg-space-4);min-width:0;flex:1}
.ui-card-top{display:flex;justify-content:space-between;align-items:center;gap:var(--mg-space-8)}
.ui-card-top strong{font-size:var(--mg-fs-md);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-card p{margin:0;font-size:var(--mg-fs-sm);color:var(--mg-black-4);overflow-wrap:anywhere}
.ui-card .ui-card-meta{font-size:var(--mg-fs-xs);color:var(--mg-gray)}
.ui-card .ui-row-actions{justify-content:flex-end;margin-top:var(--mg-space-6)}
.ui-card .ui-row-actions .ui-btn{--h:40px}
@media(max-width:800px){.ui-table{display:none}.ui-cards:not([hidden]){display:grid}}
/* 목록 칸 자체가 좁으면(태블릿 세로, 옆 창이 열린 중간 폭) 화면 폭과 상관없이 카드로 */
@container (max-width:680px){.ui-list-scroll .ui-table:not(.ui-mini){display:none}.ui-list-scroll .ui-cards:not([hidden]){display:grid}}

/* 화면 상태 */
.ui-loading{display:grid;gap:var(--mg-space-10);padding:var(--mg-space-16) var(--mg-space-12)}
.ui-loading i{display:block;height:36px;border-radius:var(--mg-radius-sm);background:linear-gradient(90deg,var(--mg-paper-2),var(--mg-ink),var(--mg-paper-2));background-size:200% 100%;animation:ui-shimmer 1.1s linear infinite}
@keyframes ui-shimmer{to{background-position:-200% 0}}
.ui-empty,.ui-error{display:grid;justify-items:center;gap:var(--mg-space-8);text-align:center;padding:var(--mg-space-64) var(--mg-space-24)}
.ui-empty strong,.ui-error strong{font-size:var(--mg-fs-md);color:var(--mg-black)}
.ui-empty p,.ui-error p{margin:0;font-size:var(--mg-fs-sm);color:var(--mg-gray);max-width:44ch}
.ui-error strong{color:var(--mg-red)}
.ui-list-state:empty{display:none}

/* 쪽 넘김 */
.ui-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--mg-space-12);padding:var(--mg-space-8) var(--mg-space-16);border-top:1px solid var(--mg-paper-2);background:var(--mg-white);font-size:var(--mg-fs-xs);color:var(--mg-gray);min-height:52px}
.ui-pager>div{display:flex;align-items:center;gap:var(--mg-space-8)}
.ui-pager select{font:inherit;font-size:var(--mg-fs-xs);min-height:32px;border:1px solid var(--mg-paper-3);border-radius:var(--mg-radius-md);background:var(--mg-white);padding:0 var(--mg-space-8)}
.ui-pager-num{font-variant-numeric:tabular-nums;color:var(--mg-black)}

/* 상세 칸 */
.ui-section{display:grid;gap:var(--mg-space-8);padding:var(--mg-space-16) 0;border-bottom:1px solid var(--mg-paper-2)}
.ui-section h3{margin:0;font-size:var(--mg-fs-sm);font-weight:var(--mg-weight-bold);color:var(--mg-black)}
.ui-dl{margin:0;display:grid;gap:var(--mg-space-2)}
.ui-dl>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--mg-space-12);align-items:start;padding:var(--mg-space-4) 0}
.ui-dl dt{font-size:var(--mg-fs-xs);color:var(--mg-gray);line-height:var(--mg-leading-snug);padding-top:var(--mg-space-6)}
.ui-dl dd{margin:0;display:flex;align-items:flex-start;gap:var(--mg-space-6);font-size:var(--mg-fs-sm);line-height:var(--mg-leading-snug);color:var(--mg-black);overflow-wrap:anywhere;min-width:0}
.ui-dl dd>span{flex:1;min-width:0;padding-top:var(--mg-space-6)}
.ui-dl .ui-btn.icon{--h:30px;border-color:transparent;color:var(--mg-gray)}
.ui-dl .ui-btn.icon:hover{color:var(--mg-black);border-color:var(--mg-paper-3)}
.ui-copy-buffer{position:fixed;left:-9999px;top:0}

/* 숫자 타일 */
.ui-stat{display:grid;gap:var(--mg-space-4);padding:var(--mg-space-16);border:1px solid var(--mg-paper-2);border-radius:var(--mg-radius-lg);background:var(--mg-white);min-width:0}
.ui-stat>span{font-size:var(--mg-fs-xs);color:var(--mg-gray)}
.ui-stat b{font-size:var(--mg-fs-3xl);font-weight:var(--mg-weight-heavy);font-variant-numeric:tabular-nums;line-height:1.1;color:var(--mg-black)}
.ui-stat b small{font-size:var(--mg-fs-sm);font-weight:var(--mg-weight-semibold);margin-left:var(--mg-space-2)}
.ui-stat em{font-style:normal;font-size:var(--mg-fs-xs);color:var(--mg-gray)}
.ui-stat.attention b{color:var(--mg-red)}

/* 입력칸 */
.ui-field{display:grid;gap:var(--mg-space-6);min-width:0}
.ui-label{font-size:var(--mg-fs-xs);font-weight:var(--mg-weight-semibold);color:var(--mg-black-4)}
.ui-field :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font:inherit;font-size:var(--mg-fs-sm);min-height:40px;width:100%;min-width:0;padding:var(--mg-space-8) var(--mg-space-10);border:1px solid var(--mg-paper-3);border-radius:var(--mg-radius-md);background:var(--mg-white);color:var(--mg-black)}
.ui-field textarea{min-height:96px;resize:vertical;line-height:var(--mg-leading-snug)}
.ui-field :is(input,select,textarea):focus-visible{outline:2px solid var(--mg-focus-ring);outline-offset:1px;border-color:var(--mg-black)}
.ui-help{font-size:var(--mg-fs-2xs);color:var(--mg-gray)}
.ui-field-error{font-size:var(--mg-fs-2xs);color:var(--mg-red)}
.ui-field-error:empty{display:none}

/* 확인 창 */
.ui-dialog{word-break:keep-all;overflow-wrap:anywhere;border:0;border-radius:var(--mg-radius-xl);padding:var(--mg-space-24);width:min(420px,calc(100vw - 32px));background:var(--mg-white);color:var(--mg-black);box-shadow:var(--mg-shadow-3);font-family:var(--mg-font)}
.ui-dialog::backdrop{background:color-mix(in srgb,var(--mg-black) 45%,transparent)}
.ui-dialog h2{margin:0 0 var(--mg-space-8);font-size:var(--mg-fs-lg);line-height:var(--mg-leading-tight)}
.ui-dialog p{margin:0 0 var(--mg-space-16);font-size:var(--mg-fs-sm);color:var(--mg-black-4);line-height:var(--mg-leading-snug)}
.ui-dialog-actions{display:flex;justify-content:flex-end;gap:var(--mg-space-8);margin-top:var(--mg-space-16)}
.ui-dialog-actions .ui-btn{--h:44px;min-width:96px}

@media(prefers-reduced-motion:reduce){.ui-spin,.ui-loading i{animation:none}}
/* 여러 배지 묶음 · 누르는 배지 · 빈 사진 칸 */
.ui-badges{display:inline-flex;flex-wrap:wrap;gap:var(--mg-space-4)}
.ui-badge-button{font:inherit;font-size:var(--mg-fs-2xs);font-weight:var(--mg-weight-bold);cursor:pointer}
.ui-badge-button:hover{border-color:var(--mg-red)}
.ui-thumb-empty{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--mg-radius-sm);background:var(--mg-paper-2);color:var(--mg-gray);font-size:var(--mg-fs-xs);font-weight:var(--mg-weight-bold)}
.ui-card-thumb .ui-thumb-empty{width:64px;height:64px}
/* 누르는 숫자 타일 */
button.ui-stat{font:inherit;text-align:left;cursor:pointer;color:inherit}
button.ui-stat:hover{border-color:var(--mg-muted)}
.ui-stat>span{display:flex;align-items:center;gap:var(--mg-space-6)}
.ui-stat>span svg{width:16px;height:16px}
.ui-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--mg-space-12)}
/* 패널 */
.ui-panel{border:1px solid var(--mg-paper-2);border-radius:var(--mg-radius-lg);background:var(--mg-white);min-width:0}
.ui-panel>header{display:flex;align-items:center;justify-content:space-between;gap:var(--mg-space-12);padding:var(--mg-space-16) var(--mg-space-20) 0}
.ui-panel h2{margin:0;font-size:var(--mg-fs-lg);font-weight:var(--mg-weight-bold)}
.ui-panel-aside{display:flex;align-items:center;gap:var(--mg-space-8)}
.ui-panel-body{padding:var(--mg-space-12) var(--mg-space-20) var(--mg-space-20);min-width:0}
/* 간단 목록 줄 */
.ui-lines{list-style:none;margin:0;padding:0;display:grid}
.ui-lines li>:is(a,div){display:flex;align-items:center;gap:var(--mg-space-12);padding:var(--mg-space-12) 0;border-bottom:1px solid var(--mg-paper-2);color:var(--mg-black);text-decoration:none}
.ui-lines li:last-child>:is(a,div){border-bottom:0}
.ui-lines li>a:hover strong{text-decoration:underline}
.ui-lines span{display:grid;gap:var(--mg-space-2);flex:1;min-width:0}
.ui-lines strong{font-size:var(--mg-fs-sm)}
.ui-lines small{font-size:var(--mg-fs-xs);color:var(--mg-gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-lines b{font-variant-numeric:tabular-nums}
.ui-lines svg{width:16px;height:16px;color:var(--mg-gray);flex:none}
.ui-lines-empty{margin:0;padding:var(--mg-space-24) 0;text-align:center;font-size:var(--mg-fs-sm);color:var(--mg-gray)}
/* 화면 본문 틀: 패널·타일을 쌓는 기본 간격 */
.ui-page{display:grid;gap:var(--mg-space-16);padding:var(--mg-space-20) var(--mg-space-24) var(--mg-space-32);align-content:start;min-width:0}
.ui-cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--mg-space-16)}
.ui-kicker{margin:0;font-size:var(--mg-fs-xs);color:var(--mg-gray)}
@media(max-width:800px){.ui-page{padding:var(--mg-space-12)}.ui-cols{grid-template-columns:minmax(0,1fr)}.ui-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-panel>header,.ui-panel-body{padding-inline:var(--mg-space-16)}}
.ui-panel-number{font-size:var(--mg-fs-xl);font-weight:var(--mg-weight-heavy);font-variant-numeric:tabular-nums}
.ui-panel-number small{font-size:var(--mg-fs-xs);margin-left:var(--mg-space-2)}
.ui-seg{display:inline-flex;gap:var(--mg-space-4)}
.ui-seg .ui-btn[aria-pressed="true"]{background:var(--mg-black);border-color:var(--mg-black);color:var(--mg-white)}
.db-layout #db-content:has(>.ui-page){overflow:auto;display:block}
/* 목록 화면 틀: 위 필터 줄 + 아래 목록(목록만 스크롤) */
.ui-list-page{display:flex;flex-direction:column;height:100%;min-height:0;width:100%}
.db-layout #db-content:has(>.ui-list-page){display:flex;overflow:hidden}
.ui-list-page>.ad-list-host,#db-content>.ad-list-host,.qi-list>.ad-list-host{display:flex;flex-direction:column;flex:1;min-height:0}
.ui-badges{align-items:center}
.db-layout button.ui-badge-button{min-height:0;height:auto;padding:var(--mg-space-2) var(--mg-space-8);line-height:1.4;border-radius:var(--mg-radius-pill);font-size:var(--mg-fs-2xs);border:1px solid transparent;background:var(--mg-red-soft);color:var(--mg-red)}
.db-layout button.ui-badge-button:hover{border-color:var(--mg-red)}

/* ── 2단계 표준 부품 ─────────────────────────────────── */
/* 고르기 버튼 묶음: 눌린 것만 검정. 옛 버튼 규칙이 덮지 않게 .db-layout을 앞에 붙인다. */
.ui-seg{flex-wrap:wrap}
.db-layout .ui-seg .ui-btn[aria-pressed="true"]{background:var(--mg-black);border-color:var(--mg-black);color:var(--mg-white)}
.ui-seg-count{font-variant-numeric:tabular-nums;font-weight:var(--mg-weight-bold);margin-left:var(--mg-space-2)}
/* 알림 띠 */
.ui-notice{display:flex;align-items:center;justify-content:space-between;gap:var(--mg-space-12);padding:var(--mg-space-12) var(--mg-space-16);border-radius:var(--mg-radius-md);border:1px solid var(--mg-paper-3);background:var(--mg-ink);font-size:var(--mg-fs-sm);color:var(--mg-black-4);line-height:var(--mg-leading-snug)}
.ui-notice>div:first-child{display:grid;gap:var(--mg-space-2);min-width:0}
.ui-notice strong{color:var(--mg-black);font-size:var(--mg-fs-sm)}
.ui-notice.attention{background:var(--mg-red-soft);border-color:transparent}
.ui-notice.attention strong{color:var(--mg-red)}
.ui-notice.urgent{background:var(--mg-white);border-color:var(--mg-red)}
.ui-notice.urgent strong{color:var(--mg-red)}
.ui-notice-action{display:flex;gap:var(--mg-space-8);flex:none}
@media(max-width:800px){.ui-notice{flex-direction:column;align-items:stretch}.ui-notice-action{justify-content:flex-end}}
/* 도구 줄 */
.ui-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--mg-space-12);flex-wrap:wrap;min-width:0}
.ui-toolbar-left,.ui-toolbar-right{display:flex;align-items:center;gap:var(--mg-space-8);flex-wrap:wrap;min-width:0}
.ui-toolbar-left:empty,.ui-toolbar-right:empty{display:none}
.ui-toolbar-right{margin-left:auto}
/* 접는 칸 */
.ui-fold{border:1px solid var(--mg-paper-2);border-radius:var(--mg-radius-lg);background:var(--mg-white);min-width:0;margin:0}
.ui-fold>summary{display:flex;align-items:center;gap:var(--mg-space-8);min-height:48px;padding:0 var(--mg-space-16);cursor:pointer;list-style:none;font-size:var(--mg-fs-sm);font-weight:var(--mg-weight-bold);color:var(--mg-black)}
.ui-fold>summary::-webkit-details-marker{display:none}
.ui-fold>summary>span{flex:1;min-width:0}
.ui-fold>summary em{font-style:normal;font-weight:var(--mg-weight-regular);font-size:var(--mg-fs-xs);color:var(--mg-gray)}
.ui-fold>summary svg{width:16px;height:16px;flex:none;color:var(--mg-gray);transition:transform var(--mg-dur-fast)}
.ui-fold[open]>summary svg{transform:rotate(180deg)}
.ui-fold>summary:focus-visible{outline:2px solid var(--mg-focus-ring);outline-offset:2px}
.ui-fold-body{padding:0 var(--mg-space-16) var(--mg-space-16);display:grid;gap:var(--mg-space-12);min-width:0}
/* 체크 칸 */
.ui-check{display:inline-flex;align-items:flex-start;gap:var(--mg-space-8);min-height:32px;padding-top:var(--mg-space-6);font-size:var(--mg-fs-sm);color:var(--mg-black);cursor:pointer}
.ui-check input{width:18px;height:18px;margin:0;accent-color:var(--mg-black);flex:none}
.ui-check span{display:grid;gap:var(--mg-space-2)}
.ui-check small{font-size:var(--mg-fs-2xs);color:var(--mg-gray)}
/* 막대 줄 */
.ui-meter{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--mg-space-6) var(--mg-space-12);padding:var(--mg-space-10) 0;color:var(--mg-black);text-decoration:none;border-bottom:1px solid var(--mg-paper-2)}
.ui-meter:last-child{border-bottom:0}
.ui-meter-label{display:grid;gap:var(--mg-space-2);min-width:0}
.ui-meter-label strong{font-size:var(--mg-fs-sm);font-weight:var(--mg-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-meter-label small{font-size:var(--mg-fs-xs);color:var(--mg-gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-meter b{font-size:var(--mg-fs-sm);font-variant-numeric:tabular-nums}
.ui-meter i{grid-column:1/-1;display:block;height:6px;border-radius:var(--mg-radius-pill);background:linear-gradient(90deg,var(--mg-black) var(--ui-meter),var(--mg-paper-2) var(--ui-meter))}
a.ui-meter:hover strong{text-decoration:underline}
/* 사진 칸 묶음 */
.ui-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--ui-tile-min,168px),1fr));gap:var(--mg-space-12)}
.ui-tile{position:relative;display:grid;align-content:start;gap:var(--mg-space-8);padding:0;border:1px solid var(--mg-paper-2);border-radius:var(--mg-radius-lg);background:var(--mg-white);color:var(--mg-black);text-align:left;font:inherit;overflow:hidden;min-width:0}
.db-layout button.ui-tile{cursor:pointer;min-height:0;height:auto;padding:0}
button.ui-tile:hover{border-color:var(--mg-muted)}
.ui-tile.selected{border-color:var(--mg-black);box-shadow:inset 0 0 0 1px var(--mg-black)}
.ui-tile:focus-visible{outline:2px solid var(--mg-focus-ring);outline-offset:2px}
.ui-tile-media{position:relative;display:block;aspect-ratio:4/3;background:var(--mg-paper-2)}
.ui-tile-media img,.ui-tile-media video{width:100%;height:100%;object-fit:cover;display:block}
.ui-tile-media .ui-thumb-empty{width:100%;height:100%;border-radius:0}
.ui-tile-media .ui-thumb-empty svg{width:24px;height:24px}
.ui-tile-badge{position:absolute;top:var(--mg-space-8);left:var(--mg-space-8);display:inline-flex;gap:var(--mg-space-4);flex-wrap:wrap}
.ui-tile-text{display:grid;gap:var(--mg-space-2);padding:0 var(--mg-space-12) var(--mg-space-12);min-width:0}
.ui-tile-text strong{font-size:var(--mg-fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-tile-text small{font-size:var(--mg-fs-xs);color:var(--mg-gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:800px){.ui-grid{--ui-tile-min:140px;gap:var(--mg-space-8)}}
/* 작은 표 */
.ui-mini-scroll{overflow-x:auto;min-width:0}
.ui-table.ui-mini{min-width:0}
.ui-table.ui-mini th{position:static}
.ui-table.ui-mini td{height:44px;padding:var(--mg-space-8) var(--mg-space-12)}
@media(max-width:800px){.ui-table.ui-mini{display:table}}
/* 옆 창(서랍) */
.ui-drawer{position:fixed;z-index:80;right:0;top:0;bottom:0;width:var(--ui-drawer-w,440px);max-width:100vw;display:flex;flex-direction:column;background:var(--mg-white);border-left:1px solid var(--mg-paper-2);box-shadow:var(--mg-shadow-3);color:var(--mg-black)}
.ui-drawer[hidden]{display:none}
.ui-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--mg-space-12);padding:var(--mg-space-16) var(--mg-space-20);border-bottom:1px solid var(--mg-paper-2)}
.ui-drawer-head>div{display:grid;gap:var(--mg-space-6);min-width:0}
.ui-drawer-head h2{margin:0;font-size:var(--mg-fs-lg);line-height:var(--mg-leading-tight);overflow-wrap:anywhere}
.ui-drawer-head h2:focus{outline:0}
.ui-drawer-actions{display:flex;gap:var(--mg-space-8);flex-wrap:wrap;padding:var(--mg-space-12) var(--mg-space-20);border-bottom:1px solid var(--mg-paper-2)}
.ui-drawer-body{flex:1;overflow:auto;padding:0 var(--mg-space-20) var(--mg-space-24);overscroll-behavior:contain}
.ui-drawer-open .db-workspace{margin-right:var(--ui-drawer-w,440px)}
@media(max-width:1199px){.ui-drawer-open .db-workspace{margin-right:0}}
@media(max-width:800px){.ui-drawer{width:100vw;border-left:0}.ui-drawer-head,.ui-drawer-actions,.ui-drawer-body{padding-inline:var(--mg-space-16)}.ui-drawer-actions .ui-btn{--h:44px;flex:1}}
@media(prefers-reduced-motion:reduce){.ui-fold>summary svg{transition:none}}
/* 파일 고르기 버튼: 안쪽 input은 숨기되 키보드로 닿게 */
.ui-file{position:relative;overflow:hidden}
.ui-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ui-file:focus-within{outline:2px solid var(--mg-focus-ring);outline-offset:2px}
.ui-file:has(input:disabled){opacity:.45;pointer-events:none}
/* 달력 */
.ui-cal{display:grid;gap:var(--mg-space-8);min-width:0}
.ui-cal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--mg-space-8)}
.ui-cal-head strong{font-size:var(--mg-fs-md)}
.ui-cal-week,.ui-cal-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--mg-space-4)}
.ui-cal-week span{text-align:center;font-size:var(--mg-fs-xs);color:var(--mg-gray);padding:var(--mg-space-4) 0}
.ui-cal-week span:first-child{color:var(--mg-red)}
.db-layout .ui-cal-day{display:grid;align-content:start;justify-items:start;gap:var(--mg-space-2);min-height:64px;height:auto;padding:var(--mg-space-6) var(--mg-space-8);border:1px solid var(--mg-paper-2);border-radius:var(--mg-radius-md);background:var(--mg-white);color:var(--mg-black);font:inherit;text-align:left;cursor:pointer;min-width:0}
.ui-cal-day b{font-size:var(--mg-fs-sm);font-variant-numeric:tabular-nums}
.ui-cal-day small{font-size:var(--mg-fs-2xs);color:var(--mg-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ui-cal-day.rest b,.ui-cal-day.rest small{color:var(--mg-red)}
.ui-cal-day.closed small{color:var(--mg-black);font-weight:var(--mg-weight-bold)}
.db-layout .ui-cal-day:hover:not(:disabled){border-color:var(--mg-muted)}
.db-layout .ui-cal-day[aria-pressed="true"]{background:var(--mg-black);border-color:var(--mg-black);color:var(--mg-white)}
.ui-cal-day[aria-pressed="true"] :is(b,small){color:var(--mg-white)}
.db-layout .ui-cal-day:disabled{background:var(--mg-ink);border-color:transparent;cursor:default;opacity:.55}
.ui-cal-day:focus-visible{outline:2px solid var(--mg-focus-ring);outline-offset:2px}
.ui-cal-short{display:none}
@media(max-width:800px){.db-layout .ui-cal-day{min-height:52px;padding:var(--mg-space-4)}.ui-cal-days{gap:var(--mg-space-2)}.ui-cal-long{display:none}.ui-cal-short{display:inline}}

/* 링크 버튼 */
.ui-link-btn{text-decoration:none}
.ui-link-btn:hover{text-decoration:none}
/* 패널 안의 빈 화면·오류는 작게 */
.ui-panel-body :is(.ui-empty,.ui-error),.ui-fold-body :is(.ui-empty,.ui-error){padding:var(--mg-space-24) var(--mg-space-16)}
/* 간단 목록 줄: 보조 글 줄바꿈 */
.ui-lines.wrap small{white-space:normal;overflow:visible;line-height:var(--mg-leading-snug)}
.ui-lines b{white-space:nowrap}
/* 사진 위 배지는 바탕을 불투명하게(사진 색에 묻히지 않게) */
.ui-tile-badge .ui-badge.attention{background:color-mix(in srgb,var(--mg-red) 10%,var(--mg-white))}
.ui-tile-badge .ui-badge.neutral,.ui-tile-badge .ui-badge.muted{background:var(--mg-white)}
.ui-tile-badge .ui-badge{box-shadow:var(--mg-shadow-1)}
/* 표 줄 안의 짧은 입력칸(입력칸 이름은 줄 머리나 aria-label로) */
.ui-input{font:inherit;font-size:var(--mg-fs-sm);min-height:36px;width:100%;min-width:0;padding:var(--mg-space-6) var(--mg-space-10);border:1px solid var(--mg-paper-3);border-radius:var(--mg-radius-md);background:var(--mg-white);color:var(--mg-black)}
.ui-input:focus-visible{outline:2px solid var(--mg-focus-ring);outline-offset:1px;border-color:var(--mg-black)}