/**
 * [갤러리 상세 디자인]
 * - 역할: 공개 갤러리 프로필의 레일·탭·개요·콘텐츠·반응형 스타일 전담
 * - 작성/수정일: 2026-09-24
 */

.an-gl-profile {
  color: var(--title-color, #171717);
}

/* [상세 프로필 공통 폭] 역할: 갤러리 레일을 아티스트 상세와 동일한 260~300px 규격으로 구성 · 작성/수정일: 2026-09-24 */
.an-gl-profile__layout {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: clamp(32px, 3.8vw, 56px);
  align-items: start;
}

/* [갤러리 프로필 카드] 역할: 정체성·통계·액션을 하나의 안정적인 sticky 레일로 구성 · 작성/수정일: 2026-09-24 */
.an-gl-profile__rail {
  position: sticky;
  top: 80px;
  padding: 42px 22px;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface-color, #fff);
}

.an-gl-profile__identity {
  text-align: left;
}

.an-gl-profile__logo {
  width: 112px;
  height: 112px;
  margin: 0 0 20px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  background: var(--section-bg-color, #f7f7f7);
}

.an-gl-profile__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.an-gl-profile__name {
  overflow-wrap: anywhere;
}

.an-gl-profile__tagline {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.an-gl-profile__stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 16px 0;
}

.an-gl-profile__stats > div {
  min-width: 0;
  padding: 0 5px;
  border-right: 1px solid var(--border-color, #e5e5e5);
}

.an-gl-profile__stats > div:last-child {
  border-right: 0;
}

.an-gl-profile__stats dd {
  font-size: var(--fs-body, 15px);
}

.an-gl-profile__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.an-gl-profile__actions .an-gl-action {
  width: 100%;
  min-width: 0;
}

.an-gl-profile__actions .an-gl-action--follow {
  grid-column: 1 / -1;
  min-height: 44px;
}

.an-gl-profile__manage {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
}

.an-gl-profile__back:focus-visible,
.an-gl-profile__tab:focus-visible,
.an-gl-profile__summary-link:focus-visible,
.an-gl-profile__visit-links a:focus-visible,
.an-gl-ex-card:focus-visible,
.an-gl-artist-row a:focus-visible,
.an-gl-work:focus-visible {
  outline: 2px solid var(--title-color, #171717);
  outline-offset: 4px;
}

/* [갤러리 상세 탭] 역할: 전역 메뉴 아래 빈틈 없는 sticky 탐색 제공 · 작성/수정일: 2026-09-24 */
.an-gl-profile__tabs {
  position: sticky;
  top: 57px;
  z-index: 4;
  flex-wrap: nowrap;
  gap: 4px 20px;
  overflow-x: auto;
  margin-bottom: 28px;
  padding-top: 4px;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
  background: var(--surface-color, #fff);
  scrollbar-width: none;
}

.an-gl-profile__tabs::-webkit-scrollbar {
  display: none;
}

.an-gl-profile__tab {
  flex: none;
  white-space: nowrap;
}

/* [갤러리 공간 히어로] 역할: 대표 공간 이미지를 안정적인 16:9 무대로 표시 · 작성/수정일: 2026-09-24 */
.an-gl-profile__hero {
  aspect-ratio: 16 / 9;
  margin: 0 0 24px;
  overflow: hidden;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  background: var(--section-bg-color, #f7f7f7);
}

.an-gl-profile__hero img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* [갤러리 개요 카드] 역할: 소개와 방문 정보를 첫 화면에서 병렬 요약 · 작성/수정일: 2026-09-24 */
.an-gl-profile__overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.an-gl-profile__summary-card,
.an-gl-profile__visit-card {
  min-width: 0;
  padding: clamp(20px, 2.5vw, 30px);
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface-color, #fff);
}

.an-gl-profile__overview > :only-child {
  grid-column: 1 / -1;
}

.an-gl-profile__eyebrow {
  margin: 0 0 8px;
  color: var(--muted-color, #7c7c7c);
  font-size: var(--fs-xs, 11px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.an-gl-profile__summary-card .an-gl-profile__block-title,
.an-gl-profile__visit-card .an-gl-profile__block-title {
  margin-bottom: 14px;
}

.an-gl-profile__summary {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text-color, #444);
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.an-gl-profile__summary-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--title-color, #171717);
  font-size: var(--fs-caption, 12px);
  font-weight: 700;
  text-decoration: none;
}

.an-gl-profile__summary-link::after {
  content: " →";
}

.an-gl-profile__visit-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.an-gl-profile__visit-list > div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
}

.an-gl-profile__visit-list dt {
  color: var(--muted-color, #7c7c7c);
  font-size: var(--fs-caption, 12px);
}

.an-gl-profile__visit-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-color, #444);
  font-size: var(--fs-sm, 13px);
  line-height: 1.55;
}

.an-gl-profile__visit-list a {
  color: inherit;
}

.an-gl-profile__visit-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 18px;
}

.an-gl-profile__visit-links a {
  color: var(--title-color, #171717);
  font-size: var(--fs-caption, 12px);
  font-weight: 700;
  text-decoration: none;
}

/* [갤러리 콘텐츠 섹션] 역할: 소개·전시·아티스트·위치를 일관된 카드 간격으로 정돈 · 작성/수정일: 2026-09-24 */
.an-gl-profile__block {
  margin-bottom: 44px;
}

.an-gl-profile__panel--about .an-gl-profile__prose,
.an-gl-profile__panel[data-panel="about"] .an-gl-profile__prose {
  max-width: 820px;
}

.an-gl-ex-card {
  padding: 12px;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-color, #fff);
}

.an-gl-ex-card__media {
  border-radius: var(--radius-sm, 6px);
}

.an-gl-artist-row {
  padding: 20px;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface-color, #fff);
}

.an-gl-artist-row + .an-gl-artist-row {
  margin-top: 12px;
}

.an-gl-artist-row:first-child,
.an-gl-artist-row:last-child {
  padding: 20px;
  border: 1px solid var(--border-color, #e5e5e5);
}

.an-gl-artist-row__thumbs a {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm, 6px);
}

/* [갤러리 작품 카드] 역할: 4:5 비크롭 무대와 작가·작품 제원을 분리해 표시 · 작성/수정일: 2026-09-24 */
.an-gl-works-grid,
.an-gl-works-grid.is-full {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 16px;
}

.an-gl-work {
  gap: 0;
}

.an-gl-work__thumb {
  aspect-ratio: 4 / 5;
  margin-bottom: 12px;
  border: 1px solid var(--border-color, #e8e8e8);
  border-radius: var(--radius-sm, 6px);
  background: var(--section-bg-color, #f7f7f7);
}

.an-gl-work__thumb img {
  object-fit: contain;
}

.an-gl-work__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--title-color, #171717);
  font-size: var(--fs-sm, 13px);
  font-weight: 700;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.an-gl-work__artist {
  margin-top: 4px;
  color: var(--text-color, #444);
  font-size: var(--fs-caption, 12px);
}

.an-gl-work__meta {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.an-gl-map {
  overflow: hidden;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
}

.an-gl-info {
  padding: 20px;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface-color, #fff);
}

/* [갤러리 상세 다크모드] 역할: 프로필·요약·콘텐츠 카드와 탭의 표면 대비 유지 · 작성/수정일: 2026-09-24 */
html.dark .an-gl-profile__rail,
body.dark .an-gl-profile__rail,
html.dark .an-gl-profile__tabs,
body.dark .an-gl-profile__tabs,
html.dark .an-gl-profile__summary-card,
body.dark .an-gl-profile__summary-card,
html.dark .an-gl-profile__visit-card,
body.dark .an-gl-profile__visit-card,
html.dark .an-gl-ex-card,
body.dark .an-gl-ex-card,
html.dark .an-gl-artist-row,
body.dark .an-gl-artist-row,
html.dark .an-gl-info,
body.dark .an-gl-info {
  border-color: var(--border-color, #333);
  background: var(--surface-color, #171717);
}

html.dark .an-gl-work__thumb,
body.dark .an-gl-work__thumb,
html.dark .an-gl-profile__hero,
body.dark .an-gl-profile__hero {
  border-color: var(--border-color, #333);
  background: var(--section-bg-color, #1e1e1e);
}

@media (max-width: 1199.98px) {
  .an-gl-profile__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 0;
  }

  .an-gl-profile__stats > div:nth-child(2) {
    border-right: 0;
  }
}

/* [갤러리 상세 태블릿] 역할: 991.98px 이하에서 프로필과 콘텐츠를 단일 열로 전환 · 작성/수정일: 2026-09-24 */
@media (max-width: 991.98px) {
  .an-gl-profile__layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .an-gl-profile__rail {
    position: relative;
    top: auto;
  }

  .an-gl-profile__identity {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
  }

  .an-gl-profile__logo {
    grid-row: 1 / span 4;
    width: 88px;
    height: 88px;
    margin: 0;
  }

  .an-gl-profile__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .an-gl-profile__stats > div:nth-child(2) {
    border-right: 1px solid var(--border-color, #e5e5e5);
  }

  .an-gl-profile__works-grid,
  .an-gl-works-grid,
  .an-gl-works-grid.is-full {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* [갤러리 상세 모바일] 역할: 압축 프로필·2열 액션·가로 탭으로 초기 세로 길이 축소 · 작성/수정일: 2026-09-24 */
@media (max-width: 767.98px) {
  .an-gl-profile__rail {
    padding: 16px;
  }

  .an-gl-profile__tagline {
    -webkit-line-clamp: 2;
  }

  .an-gl-profile__stats {
    gap: 0;
  }

  .an-gl-profile__tabs {
    /* [갤러리 상세 모바일 탭] 역할: 모바일에서 sticky를 해제해 화면 상단 점유를 줄임 — 작성/수정일: 2026-09-24 */
    position: static;
    top: auto;
    z-index: auto;
    gap: 4px 16px;
    margin-inline: -2px;
  }

  .an-gl-profile__overview {
    grid-template-columns: 1fr;
  }

  .an-gl-profile__summary-card,
  .an-gl-profile__visit-card {
    padding: 20px;
  }

  .an-gl-ex-grid {
    grid-template-columns: 1fr;
  }

  .an-gl-ex-card {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .an-gl-artist-row,
  .an-gl-artist-row:first-child,
  .an-gl-artist-row:last-child {
    padding: 16px;
  }
}

@media (max-width: 575.98px) {
  .an-gl-profile__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 0;
  }

  .an-gl-profile__stats > div:nth-child(2) {
    border-right: 0;
  }

  .an-gl-works-grid,
  .an-gl-works-grid.is-full {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
  }

  .an-gl-artist-row__thumbs a {
    width: 48px;
    height: 48px;
  }
}