/* 내 스튜디오 · 공개 Studio — kit 0.4.0(dlab.css · patterns.css)과 styles.css 다음에 불러온다.
   컴포넌트 클래스(dlab-*)는 덮어쓰지 않고 감싸는 요소의 배치 · 간격만 정한다. 값은 --dlab-* 토큰만 쓴다. */

/* ── 프로필 머리 ─────────────────────────────────────────── */
.studio-identity { display: flex; align-items: flex-start; gap: var(--dlab-space-20); min-width: 0; }
.studio-eyebrow { color: var(--dlab-color-text-secondary); }
#profile-bio { color: var(--dlab-color-text-secondary); white-space: pre-wrap; }
#profile-bio:empty, .studio-featured:empty, .studio-eyebrow:empty { display: none; }
.studio-featured { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dlab-space-5); }
/* 대표 작품 링크 — 글자 링크(밑줄). 포커스는 styles.css의 오렌지 2px. */
.studio-featured-link {
  color: var(--dlab-color-text-default);
  font-size: var(--dlab-font-size-p2);
  font-weight: var(--dlab-font-weight-bold);
  line-height: var(--dlab-font-line-height-base);
  text-decoration: underline;
  text-underline-offset: var(--dlab-space-5);
}
.studio-featured-link:hover { color: var(--dlab-color-text-accent); }

/* 아바타 — 프로필 사진이라 원으로 둔다(가이드 7장 규칙 9의 허용 목록). 카드 안이라 1px 회색. */
.studio-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: var(--dlab-border-width-thin) solid var(--dlab-color-border-subtle);
  border-radius: var(--dlab-radius-full);
  color: var(--dlab-color-text-inverse);
  background: var(--dlab-color-bg-inverse);
}
.studio-avatar[data-avatar="orange"] { background: var(--dlab-color-bg-accent); }
.studio-avatar[data-avatar="paper"] { color: var(--dlab-color-text-default); background: var(--dlab-color-bg-subtle); }
.studio-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--dlab-color-bg-default); }
@media (min-width: 720px) {
  #studio-profile .studio-avatar { width: 100px; height: 100px; }
}

/* ── 작품 목록 ──────────────────────────────────────────── */
/* 상태 필터 Tag — 한 줄에 다 안 들어가면 Mobile은 가로 스크롤, Tablet 이상은 줄바꿈(가이드 8장 Tag). */
.studio-filter-tags {
  display: flex;
  gap: var(--dlab-space-10);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  /* 포커스 테두리(2px + 2px)가 잘리지 않게 안쪽 여백을 둔다 */
  padding: var(--dlab-space-5);
  margin: calc(-1 * var(--dlab-space-5));
}
@media (min-width: 720px) {
  .studio-filter-tags { flex-wrap: wrap; overflow: visible; }
}

.studio-search { max-width: 360px; }
.studio-result { flex: 1 1 auto; min-width: 0; }
@media (min-width: 720px) {
  .studio-result { text-align: right; }
}

/* 목록 항목의 상태 배지 · 분류 태그 묶음(GridList 태그 줄 안) */
.studio-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dlab-space-5); min-width: 0; }
/* Mobile 목록 보기는 한 줄(높이 80)이라 첫 배지만 남기고 나머지 묶음을 접는다. 나머지는 썸네일 보기 · 상태 상세에서 본다. */
.dlab-grid-list-list .studio-badges-more { display: none; }
@media (min-width: 720px) {
  .dlab-grid-list-list .studio-badges-more { display: flex; }
}

/* ── 대화상자 ────────────────────────────────────────────── */
/* 긴 폼 · 이력은 Modal 본문 안에서만 스크롤한다(버튼 줄은 늘 보인다). 포커스 테두리가 잘리지 않게 안쪽 여백. */
.studio-modal-scroll {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: var(--dlab-space-5);
  margin: calc(-1 * var(--dlab-space-5));
}

/* 사진 영역 맞추기 Modal이 위에 열린 동안 아래 프로필 편집 Modal을 가린다(Modal 두 장이 겹쳐 보이지 않게). */
.studio-modal-covered { visibility: hidden; }

/* 프로필 사진 고르기 — 미리보기 원 + 파일 고르기(.service-file) */
.studio-image-picker { display: flex; align-items: flex-start; gap: var(--dlab-space-20); min-width: 0; }
.studio-image-controls { flex: 1 1 auto; }
.studio-avatar-preview { width: 60px; height: 60px; }
.studio-image-actions { margin-left: calc(-1 * var(--dlab-space-15)); }

/* 기본 사진은 Radio로 고르고, 모달 본문 안에서 기존 폼과 함께 스크롤한다. */
.studio-default-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.studio-default-fieldset > legend { padding: 0 0 var(--dlab-space-15); }
.studio-default-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--dlab-space-50) + var(--dlab-space-30)), 1fr));
  gap: var(--dlab-space-15) var(--dlab-space-10);
}
.studio-default-avatar-image {
  display: block;
  width: var(--dlab-space-50);
  height: var(--dlab-space-50);
  border-radius: var(--dlab-radius-full);
  object-fit: cover;
}

/* 프로필 사진 영역 맞추기 — 실제 표시와 같은 원(프로필 사진 허용 목록) 안에서 끌어 옮긴다. */
.studio-crop-stage {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--dlab-border-width-thin) solid var(--dlab-color-border-subtle);
  border-radius: var(--dlab-radius-full);
  background: var(--dlab-color-bg-subtle);
  cursor: grab;
  touch-action: none;
}
.studio-crop-stage:focus-visible {
  outline: var(--dlab-border-width-regular) solid var(--dlab-color-border-accent);
  outline-offset: var(--dlab-border-width-regular);
}
.studio-crop-stage.is-dragging { cursor: grabbing; }
.studio-crop-stage img { position: absolute; top: 0; left: 0; max-width: none; user-select: none; pointer-events: none; }
.studio-crop-zoom { display: flex; align-items: center; gap: var(--dlab-space-15); }
.studio-crop-zoom > input { flex: 1 1 auto; min-width: 0; }
.studio-crop-zoom > output { flex: 0 0 50px; text-align: right; font-variant-numeric: tabular-nums; }

/* 상태 변경 이력 — 목록 줄은 1px 회색 구분선(가이드 7장 1단계) */
.studio-history { list-style: none; }
.studio-history > li {
  display: flex;
  flex-direction: column;
  gap: var(--dlab-space-5);
  padding: var(--dlab-space-10) 0;
  border-bottom: var(--dlab-border-width-thin) solid var(--dlab-color-border-subtle);
}
.studio-history > li:first-child { border-top: var(--dlab-border-width-thin) solid var(--dlab-color-border-subtle); }
.studio-history-note { white-space: pre-wrap; }