/* project_thumb.css — 새 파일 (2.204.0 · 프로젝트 썸네일). 색은 토큰만(--bg·--fg·--line·--panel·--accent·--muted) — 다크·라이트 같이. */
.pt-icon { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--pt, 20px); height: var(--pt, 20px); border-radius: 22%; overflow: hidden; vertical-align: middle;
  background: color-mix(in srgb, var(--fg) 8%, transparent); }
.pt-icon.round { border-radius: 999px; }
.pt-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-icon.pt-letter { border-radius: 999px; background: color-mix(in srgb, var(--accent) 28%, var(--bg)); color: var(--fg);
  font-size: calc(var(--pt, 20px) * .52); font-weight: 600; line-height: 1; }

/* 머리 줄 고르기 — 안쪽 select 는 숨기고(값만 맞춤) 그림 있는 단추 + 목록 */
#project-switch.pt-native { display: none; }
.pt-switch { display: inline-flex; align-items: center; gap: .4rem; max-width: 13rem; padding: .22rem .5rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel); color: var(--fg); font: inherit; cursor: pointer; }
.pt-switch:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.pt-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pt-caret { color: var(--muted); font-size: .75em; }
.pt-menu { position: fixed; z-index: 60; min-width: 14rem; max-width: min(24rem, 94vw); max-height: 70vh; overflow: auto; padding: .25rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.pt-item { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .38rem .55rem; border: 0; border-radius: 6px;
  background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.pt-item:hover, .pt-item:focus-visible { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: none; }
.pt-item.on { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.pt-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-more { color: var(--muted); border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; margin-top: .2rem; }
@media (max-width: 900px) { .pt-switch { max-width: 9.5rem; } }

/* 카드 · 전체 일정 */
.card .name { display: flex; align-items: center; gap: .45rem; }
.ovl-name { min-width: 0; }
.ovl-title { color: var(--muted); }

/* 설정 칸 */
.pt-card { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .3rem .4rem; border-radius: 8px; border: 1px dashed transparent; }
.pt-card.drop-here { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pt-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pt-preview { display: inline-flex; align-items: center; gap: .5rem; }
.pt-hint { white-space: nowrap; }

/* 크롭 창 */
.pt-crop { width: min(26rem, 94vw); }
.pt-crop-body { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.pt-stage-wrap { line-height: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--line);
  background: repeating-conic-gradient(color-mix(in srgb, var(--fg) 10%, var(--bg)) 0 25%, var(--bg) 0 50%) 0 0 / 16px 16px; }
.pt-stage { width: 320px; max-width: 100%; height: auto; aspect-ratio: 1; cursor: grab; touch-action: none; }
.pt-stage.grab { cursor: grabbing; }
.pt-prevs { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.pt-prev { width: 96px; height: 96px; border: 1px solid var(--line); border-radius: 8px;
  background: repeating-conic-gradient(color-mix(in srgb, var(--fg) 10%, var(--bg)) 0 25%, var(--bg) 0 50%) 0 0 / 12px 12px; }
.pt-prev.round { border-radius: 999px; }
.pt-prev-row { display: flex; gap: .5rem; }
.pt-prev-row .pt-prev { width: 40px; height: 40px; }
.pt-zoom-row { display: flex; align-items: center; gap: .6rem; margin: .6rem 0 .3rem; }
.pt-zoom { flex: 1; }
.pt-ok { background: var(--accent); color: var(--bg); border: 0; border-radius: 6px; padding: .4rem 1.1rem; font: inherit; cursor: pointer; }
.pt-ok:disabled { opacity: .5; }

/* 10-10 · 목록에서 썸네일 바꾸기 — 줄 + 연필(동그라미 위 · 26px) */
.pt-item-wrap { position: relative; }
.pt-edit { position: absolute; left: calc(.55rem - 2px); top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--fg); opacity: 0; transition: opacity .12s; }
.pt-item-wrap:hover .pt-edit:hover, .pt-edit:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 0; }
.pt-item-wrap:hover .pt-edit { opacity: .9; }
.pt-pick { width: min(26rem, 94vw); }
.pt-pick-zone { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.2rem; margin: .6rem 0 .8rem;
  border: 2px dashed var(--line); border-radius: 10px; }
.pt-pick-zone.drop-here { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }