/* 튜브민트 앱 — 층 3b: 앱에서 더한 공용 부품.
   tokens.css·base.css·components.css·pages/{auth,dashboard,editor,gallery}.css 는 시안(docs/design/concepts)의 복사본이다
   (scripts/sync_design.php — 직접 고치지 않는다). 이 파일은 시안에 아직 없는 부품만 담는다:
   간단 틀(.shell), 관리자 교체 로고(.logo-img), 필수 표시·여러 줄 입력·선택 칸, 업로드 끌어놓기(.dropzone).
   → 시안 tools/section.html·components.css 로 옮기면 여기서 지운다(DESIGN.md §5 새 부품 절차).
   값은 토큰만. 기준점(min-width): 600 · 960 · 1280 */

/* ── 간단 틀(로그인류·안내 화면): 로고 머리말 + 가운데 본문 + 바닥글 ── */
.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.shell-head { width: min(1120px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.shell-main { flex: 1; width: min(1120px, 100%); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); }
.shell-foot { padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)); font-size: var(--text-sm); color: var(--sub); text-align: center; border-top: 1px solid var(--line); }
@media (min-width: 960px) {
  .shell-head { padding: var(--space-5) var(--space-7); }
  .shell-main { padding: var(--space-7); }
}

/* ── 로고 그림(관리자가 교체했을 때만). 화면 모드에 맞는 한 장만 보인다 ── */
.logo-img { display: block; height: 28px; width: auto; }
.logo-img-dark { display: none; }
:root[data-theme="dark"] .logo-img-light { display: none; }
:root[data-theme="dark"] .logo-img-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="c"]) .logo-img-light { display: none; }
  :root:not([data-theme="light"]):not([data-theme="c"]) .logo-img-dark { display: block; }
}

/* ── 입력 보강 ── */
.req { color: var(--danger); }
.input-area { height: auto; min-height: calc(var(--control-h-md) * 2.5); padding: var(--space-3) var(--space-4); line-height: var(--leading-normal); resize: vertical; }
select.input { appearance: none; padding-right: var(--space-8); background: var(--surface) no-repeat right var(--space-4) center / 12px 12px; background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%); background-size: 6px 6px, 6px 6px; background-position: right calc(var(--space-4) + 6px) center, right var(--space-4) center; }
.field-hint, .field-error { margin: 0; }
.alert > .ico { flex: none; margin-top: calc((1lh - 18px) / 2); }

/* ── 업로드 끌어놓기(동작: assets/js/dropzone.js) ── */
.dropzone { display: grid; gap: var(--space-3); }
.dz-area {
  display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4);
  border: 2px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); text-align: center;
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.dz-area:hover { border-color: var(--brand-text); }
.dropzone.is-over .dz-area { border-color: var(--focus); border-style: solid; background: var(--brand-soft); }
.dz-ico { width: 48px; height: 48px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); }
.dz-title { font-weight: 600; font-size: var(--text-base); }
.dz-help { font-size: var(--text-sm); color: var(--sub); max-width: 46ch; }
.dz-pick { margin-top: var(--space-1); }
.dz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.dz-list:empty { display: none; }
.dz-item {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.dz-thumb { width: 48px; height: 48px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; color: var(--sub); overflow: hidden; }
.dz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-body { min-width: 0; display: grid; gap: var(--space-1); }
.dz-name { font-size: var(--text-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-meta { display: flex; align-items: flex-start; gap: var(--space-1); font-size: var(--text-xs); color: var(--sub); }
.dz-item.is-error { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.dz-item.is-error .dz-meta { color: var(--danger); font-weight: 600; }
.dz-item.is-done .dz-meta { color: var(--brand-text); font-weight: 600; }
.dz-meta .ico-sm { margin-top: 1px; }
@media (min-width: 600px) {
  .dz-area { padding: var(--space-7) var(--space-6); }
}

/* ── 404·오류 화면 가운데 놓기 ── */
.notfound { display: grid; place-items: center; min-height: 50vh; min-height: 50dvh; }