/*
 * Archive Pro — Discover (Milestone C)
 * Independently-scoped stylesheet. Every rule is prefixed .ap-discover-*
 * (or targets #discoverRoot) so nothing here can ever collide with
 * style.css / viewer.css / artist-cms.css from the Artist Archive area.
 * This file is self-contained — it does not assume style.css loaded.
 */

/* 2026-09-17 수정 (ARCHIVE PRO — DISCOVER COLOR + TYPOGRAPHY + DESCRIPTION
   FINAL PINPOINT SPEC) — §2 색상 토큰(이 파일에 기존 토큰이 전혀 없어 새로
   선언), §3 배경을 미세한 Blue/Emerald 그라디언트로, §10 기본 텍스트 색을
   Charcoal로 변경. 라우팅/데이터/DOM 구조는 전혀 건드리지 않는다 — 오직
   color/background 선언만 바꾼다. */
/* 2026-09-18 수정 (COLOR + LANGUAGE + PRIMARY TABS FINAL PINPOINT SPEC §1) —
   --archive-gold을 더 밝고 맑은 ARCHIVE PRO 전용 Champagne Gold(#C6A85F)로
   교체한다. 이 토큰을 그대로 쓰는 DISCOVER 제목·활성 언어 토글·활성 탭
   underline이 자동으로 함께 갱신된다(값만 바꿈 — 참조하는 셀렉터들은
   손대지 않는다). --archive-gold-dark/-light는 이번 스펙에서 요구하지
   않아 그대로 둔다. */
/* 2026-09-21 추가 (IMAGE_VIEWER 외부 핀치 — 실기기 재검증 후 수정) —
   discover-image-zoom.js의 document 레벨 touchstart/touchmove/gesturestart
   preventDefault만으로는 실기기(iPhone Safari)에서 박스 외부 핀치를 막지
   못한다는 게 실제 재현으로 확인됐다. 원인: 이 프로젝트의 Archive 쪽
   index.html은 viewport meta에 이미 maximum-scale=1/user-scalable=no가
   있어(app.js의 gesturestart 차단은 그 위의 "일부 구형 버전" 보강일 뿐,
   실제로 페이지 확대를 막는 주된 장치는 viewport meta다) 자체적으로 이미
   막혀 있었던 반면, DISCOVER는 그 viewport 제한을 추가하지 않기로
   했으므로(금지 항목) JS만으로는 WebKit의 네이티브 핀치 제스처 인식을
   확실히 취소시키지 못한다. 반대로 이미 실기기에서 정상 작동이 확인된
   건 바로 아래 .ap-discover-zoom-stage 자신의 touch-action(평상시 pan-y,
   확대 중 none) — 즉 "JS preventDefault"가 아니라 "CSS touch-action"이
   이 코드베이스에서 실제로 검증된 유일한 방법이다. 그래서 같은 원리를
   박스 "바깥"에도 적용한다: #discoverRoot 전체에 touch-action: pan-x
   pan-y를 스코프해 네이티브 핀치줌·더블탭줌만 끄고(pinch-zoom을 값에
   포함하지 않음) 가로/세로 스크롤(pan-x, pan-y)은 그대로 허용한다 —
   "touch-action: none"이 아니고, html/body나 Archive/CMS 전역이 아니라
   DISCOVER 루트 하나에만 스코프했다(§ 금지 항목 "html, body 및 앱 전체에
   무분별하게 touch-action: none 적용 금지"에 해당하지 않음). 조상-교차
   규칙상 .ap-discover-zoom-stage의 기존 pan-y/none 값은 원래도 더
   제한적이라 이 변경으로 전혀 달라지지 않는다(교집합 결과 동일) — 즉
   "정상 작동하는 이미지 뷰어를 다시 수정"한 게 아니다. discover-image-
   zoom.js의 document 레벨 JS 가드는 남겨둔다(무해한 이중 방어, app.js와
   동일한 설계). */
.ap-discover-root {
  touch-action: pan-x pan-y;
  --archive-bg: #F8FCFC;
  --archive-blue-soft: #EEF6FB;
  --archive-emerald-soft: #EDF8F4;
  --archive-text: #1E2527;
  /* 2026-10-13 가독성(typo1) — 밝은 DISCOVER 배경 위 보조 글자 WCAG AA(4.5:1 이상)로 진하게.
     기존 #737D7D(3.8~4.2:1) / #949C9C(2.6:1) → #5A6466(5.4~6.1:1). 배경·카드·브랜드 금색 토큰은 그대로. */
  --archive-text-secondary: #5A6466;
  --archive-text-light: #5A6466;
  --archive-gold: #C6A85F;
  /* 금색 '글자' 전용(활성 탭·언어·링크·공유) — 밝은 배경에서 #C6A85F는 2.1~2.3:1로 읽히지 않아
     같은 금색 계열의 깊은 톤(5.0~5.5:1)을 쓴다. DISCOVER 워드마크·밑줄·테두리는 기존 금색 유지. */
  --archive-gold-text: #806434;
  --archive-gold-dark: #8F713E;
  --archive-gold-light: #C2A36B;

  /* 2026-09-19 추가 (ARCHIVE PRO — DISCOVER EN DESCRIPTION READABILITY
     FINAL PINPOINT FIX §2/§4) — EN Artists/Works 빈 상태 문구 전용
     "보조/상태 설명" 색상. 기존 --archive-text-secondary(#737D7D)는
     스펙 §4 위계상 요구하는 Medium-Dark Gray보다 연해 새로 추가한다.
     KR 렌더는 이 토큰을 전혀 참조하지 않는다(§3 KR 절대 변경 금지). */
  --archive-text-medium: #4C5456;

  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif;
  color: var(--archive-text);
  background: var(--archive-bg);
  background: linear-gradient(180deg, var(--archive-bg) 0%, var(--archive-blue-soft) 45%, var(--archive-emerald-soft) 100%);
  min-height: 100vh;
  padding: 0 16px 48px;
}

.ap-discover-root *,
.ap-discover-root *::before,
.ap-discover-root *::after {
  box-sizing: border-box;
}

.ap-discover-header {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 0 12px;
}

/* 2026-09-17 추가 (DISCOVER KR / EN LANGUAGE TOGGLE PINPOINT §1-§2) —
   타이틀과 언어 토글을 한 줄에 배치("DISCOVER . . . . . . KR EN" 형태).
   모바일에서도 오른쪽 정렬 유지. 박스/배경 없는 순수 텍스트 토글. */
.ap-discover-header-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* §4 — DISCOVER 제목은 Gold 유지, 크기/굵기/자간/위치는 그대로. */
.ap-discover-title {
  font-size: 22px;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin: 0;
  color: var(--archive-gold);
}

/* 2026-09-21 추가 (DISCOVER HOME NAVIGATION FINAL PINPOINT SPEC §2) —
   DISCOVER 제목을 감싼 홈 링크. 색/글자크기/굵기/자간/위치는 위
   .ap-discover-title(h1)에서 그대로 상속만 받고 새로 선언하지 않는다 —
   시각적으로 기존과 완전히 동일하게 유지된다. ::after는 기존
   .ap-discover-lang-btn과 동일한 패턴(투명 44px 탭 영역, 레이아웃에
   영향 없는 position:absolute)으로 별도 HOME 버튼을 추가하지 않고도
   모바일/태블릿에서 제목 전체가 충분히 눌리도록 한다. */
.ap-discover-title-link {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.ap-discover-title-link:hover {
  text-decoration: none;
}
.ap-discover-title-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  min-height: 44px;
  height: 100%;
  transform: translateY(-50%);
}

/* 2026-09-18 수정 (§3 — KR/EN 간격 16~18px) — 8px는 너무 붙어 보였다.
   중간값 17px로 벌린다. */
.ap-discover-lang-toggle {
  display: flex;
  align-items: baseline;
  gap: 17px;
  flex-shrink: 0;
}

/* §2 — 활성 언어: Gold + font-weight 600-700 / 비활성: Secondary Gray +
   font-weight 400-500. 배경/테두리 없는 최소 텍스트 토글. */
/* 2026-09-18 수정 (§3 — 글자 크기 +1~2px, 실제 tap target 44×44px) —
   font-size만 13px→14.5px로 키우고(active/inactive font-weight는 이미
   600-700/400-500 범위 안이라 값을 그대로 둔다), position:relative +
   ::after 의사요소로 시각적 크기는 그대로 유지한 채 탭 히트 영역만
   44×44px로 확장한다(박스/배경/보더 추가 없음 — 스펙이 금지한 pill/box
   없이 히트 영역만 넓힌다). */
.ap-discover-lang-btn {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--archive-text-secondary);
  cursor: pointer;
}

.ap-discover-lang-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.ap-discover-lang-btn.is-active {
  color: var(--archive-gold-text);
  font-weight: 700;
}

/* §5 — 설명은 이제 현재 선택된 언어 한 줄만 렌더링되므로(2026-09-17 수정),
   margin-bottom을 8px→16px로 통일해 탭과의 간격을 유지한다. KR=Charcoal,
   EN=Secondary Gray, 제목보다 작다. */
/* 2026-09-18 수정 (§9 — 설명과 탭 사이 여백) — 탭 글자가 커진 만큼
   설명문과의 간격도 16px→20px로 조금 더 확보해 답답해 보이지 않게 한다.
   제목-설명 간격(위 margin-top:8px)은 스펙 §9가 "현재 수준 유지"를
   요구해 그대로 둔다. */
.ap-discover-desc-kr {
  margin: 8px 0 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--archive-text);
}

/* 2026-09-19 수정 (ARCHIVE PRO — DISCOVER EN DESCRIPTION READABILITY
   FINAL PINPOINT FIX §1) — EN 상단 설명 타이포그래피만 국소 수정.
   font-size 13.5px→15px(+1.5px), font-weight 400→500, color를 흐린
   Secondary Gray에서 KR 설명과 동일한 Dark Charcoal 토큰(--archive-text)
   으로 변경해 §4 위계의 "3. 주요 설명 — Dark Charcoal"을 언어와 무관하게
   적용한다(새 색상 토큰을 만들지 않고 기존 것을 재사용). DISCOVER
   제목·선택 탭의 Gold보다는 한 단계 아래 위계를 유지한다. margin/
   line-height/문구 자체는 그대로 둔다. */
.ap-discover-desc-en {
  margin: 8px 0 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--archive-text);
}

/* 2026-10-22 (slogan1, 등작 확정 지시) — COSMOS 상단 슬로건 "우리는 우주입니다 / We Are the Cosmos".
   설명문(15px)의 정확히 1.5배(22.5px), KR·EN 같은 크기, 가운데 정렬, 좁은 화면은 자연 줄바꿈.
   지원하지 않는 브라우저는 금빛 단색(--archive-gold-text). 금빛·광채는 아래 slogan2 블록.
   설명문·탭·카드 스타일은 건드리지 않는다 — 이 블록만 추가. */
.ap-discover-slogan {
  margin: 0 0 20px;
  text-align: center;
}
.ap-discover-slogan-line {
  margin: 0;
  font-size: 22.5px; /* = .ap-discover-desc-kr/-en 15px × 1.5 */
  font-weight: 800; /* slogan5: 700 → 800 (더 단단한 획) */
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #0A7C8E; /* slogan9: 에메랄드 블루 단색(미지원 브라우저·움직임 줄이기도 같은 색) */
  overflow-wrap: break-word;
  word-break: keep-all;
}
/* 2026-10-22 (slogan2, 등작 지시) — 금빛 강화 + 다이아몬드 광채.
   바탕: 위→아래 짙은 골드·샴페인·밝은 황금빛 금속 명암(채도·대비 강화, 가운데 짙은 띠로 윤곽 또렷).
   광채: 2.5초마다 1번, 약 1.5초 동안 글자 위를 지나간다(색은 아래 slogan5 주석).
   글자 영역(fit-content)에서만 움직이고, 정지 구간에는 화면이 바뀌지 않는다(깜빡임·색 급변 없음).
   필터·그림자·이미지 없음. 움직임 줄이기 설정에서는 광채 없이 금빛만. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ap-discover-slogan-line {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* slogan8 (2026-10-23 등작 지시 "글자를 블루로, 반짝임을 금빛으로") — 2겹.
       ① 흐르는 금빛 반짝임: 깊은 골드 #A97A1E → #C99A3A → #E8C05C → 샴페인 골드 심 #F7DC8C → 다시 깊은 골드(모두 불투명 — 블루와 섞여 탁해지지 않게).
       ② 글자: slogan9("블루를 에메랄드 블루로") 에메랄드 블루 단색 #0A7C8E (Windows 실측 3안 #0A7C8E·#0B6B84·#08827A 비교로 선택).
       굵기 800·크기·위치·2.5초 주기는 그대로. 그림자·외곽선 없음. */
    background-image:
      linear-gradient(105deg, rgba(169, 122, 30, 0) 0%, rgba(169, 122, 30, 0) 41%, rgba(169, 122, 30, 1) 42.6%, rgba(201, 154, 58, 1) 44.4%, rgba(232, 192, 92, 1) 46.2%, rgba(247, 220, 140, 1) 47.6%, rgba(232, 192, 92, 1) 49%, rgba(201, 154, 58, 1) 50.8%, rgba(169, 122, 30, 1) 52.6%, rgba(169, 122, 30, 0) 54.2%, rgba(169, 122, 30, 0) 100%),
      linear-gradient(#0A7C8E, #0A7C8E); /* slogan9: 글자 에메랄드 블루 단색 */
    background-size: 300% 100%, 100% 100%;
    background-position: 100% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: ap-slogan-shine 2.5s ease-in-out 0.5s infinite; /* 2.5초에 한 번, 약 1.5초 동안 부드럽게 흐름 */
  }
  .ap-discover-slogan-line + .ap-discover-slogan-line {
    animation-delay: 0.65s; /* KR 다음 EN으로 이어지는 물결 */
  }
  @keyframes ap-slogan-shine {
    0%, 40% { background-position: 100% 0, 0 0; }
    100% { background-position: 0% 0, 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ap-discover-slogan-line { animation: none; }
  }
}

/* 2026-09-18 수정 (§4/§9 — 작가/작품 탭 간격) — 20px→28px로 넓혀 두
   탭이 각각 독립된 선택 항목으로 보이게 한다. */
.ap-discover-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid #e4e4e4;
}
/* 2026-10-13 (typo1) — 320px 폭 EN("Artists Works Collections")에서 탭이 18px 가로로 넘치던
   기존 문제: 359px 이하에서만 탭 사이 간격을 줄인다(글자 크기·색·밑줄은 그대로). */
@media (max-width: 359px) {
  .ap-discover-tabs { gap: 16px; }
}

/* 2026-09-18 수정 (§4 — 작가/작품을 보조 메뉴가 아니라 DISCOVER의 핵심
   PRIMARY NAVIGATION으로) — font-size를 14px→clamp(20px,5vw,22px)로 크게
   키운다(모바일 20px 하한, 데스크톱 22px 상한 — 스펙 §2 DISCOVER 제목의
   22px를 넘지 않게 해 "DISCOVER가 가장 강해야 한다"는 §8 위계를 지킨다).
   비활성 상태 font-weight를 500(§4 권장 500-600)으로 명시하고, 커진
   글자·패딩에 맞춰 탭 padding과 밑줄 두께(2px→3px)도 함께 조정한다.
   색상은 §4 요구대로 Secondary Gray가 아닌 "neutral dark gray" — 이미
   선언된 --archive-text(Charcoal)를 재사용해 새 토큰 없이 처리한다. */
.ap-discover-tab {
  display: inline-block;
  padding: 10px 4px 14px;
  font-size: clamp(20px, 5vw, 22px);
  font-weight: 500;
  color: var(--archive-text);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

/* §8-9 — 선택된 탭은 텍스트 색 + font-weight + underline 세 요소가 모두
   동일한 Champagne Gold(§1 토큰)로 즉시 인식되게 한다(스펙 §5). */
.ap-discover-tab.is-active {
  color: var(--archive-gold-text);
  border-bottom-color: var(--archive-gold);
  font-weight: 700;
}

.ap-discover-body {
  max-width: 1100px;
  margin: 0 auto;
}

/* 2026-09-21 수정 (DISCOVER RESPONSIVE UI FINAL SPEC §2) — 기존 한 줄
   가로 flex(정보+버튼이 전부 같은 줄에서 서로 밀리던 원인)를 세로 스택으로
   바꾼다: 뒤로가기 → 정보(.ap-discover-detail-info) → 기능 버튼
   (.ap-discover-detail-actions) 순서로 각자 자기 줄을 가진다. Work/Collection
   상세의 뒤로가기 한 줄짜리 사용(자식 1개)은 column이어도 시각적으로 전혀
   달라지지 않는다 — 이 셀렉터 하나로 세 화면(Artist/Work/Collection) 모두에
   동일하게 적용된다(요청 원문 "전체 적용 범위"). */
.ap-discover-subheader {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 0 8px;
}

/* 정보(1행) 래퍼 — 별도 시각 스타일 없음. 아래 기능 버튼 행과 분리하기
   위한 순수 구조용 컨테이너(§2 "정보와 기능 버튼을 분리한다"). 내용이
   없을 때(작가 문서 로딩 전) 빈 여백이 남지 않도록 접는다. */
.ap-discover-detail-info:empty {
  display: none;
}

/* 기능 버튼(2행) — Archive 보기/공식 웹사이트/공유하기/작품/컬렉션 등
   실제 존재하는 버튼만 자식으로 들어온다(discover.js가 조건부로 생성).
   flex-wrap이 화면 너비와 버튼 문구 길이에 맞춰 2~3열을 자연스럽게
   구성하고, 한 줄에 다 들어가지 않으면 저절로 다음 줄로 넘어간다 — 열
   수를 고정하는 media query 없이도 "좁은 화면에서 3열이 답답하면 2열로"
   요구를 만족한다. */
.ap-discover-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 2px;
}

.ap-discover-detail-actions:empty {
  display: none;
  margin-top: 0;
}

/* 버튼 하나하나 — 최소 높이 44px, 박스 전체가 탭 가능(기존 "더 보기"/
   "다시 시도" 버튼과 동일한 톤: 흰 배경 + 옅은 회색 테두리, §84/85 새
   시각 언어 금지 원칙에 맞춰 새 스타일을 만들지 않고 기존 버튼 스타일을
   재사용). 문구가 세로로 끊기지 않도록 nowrap — 대신 칸에 안 들어가면
   버튼 자체가 다음 줄로 넘어간다(글자를 끊는 대신 줄바꿈). */
.ap-discover-detail-actions > a,
.ap-discover-detail-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  padding: 10px 18px;
  font-size: clamp(15px, 3.6vw, 17px);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  background: #fff;
  color: var(--archive-gold-text);
  cursor: pointer;
}
.ap-discover-detail-actions > a:hover,
.ap-discover-detail-actions > button:hover {
  border-color: var(--archive-gold);
  text-decoration: none;
}

/* 작품/컬렉션 서브탭은 액션이 아니라 선택 상태를 가진 필터이므로, 기존
   금빛 선택 표시(§ Golden Baseline)를 버튼 박스 테두리로 옮겨 그대로
   유지한다 — 비활성은 Secondary Gray, 활성은 Gold(색상 토큰 변경 없음). */
.ap-discover-detail-actions > .ap-discover-subtab {
  color: var(--archive-text-secondary);
  font-weight: 500;
}
.ap-discover-detail-actions > .ap-discover-subtab.is-active {
  color: var(--archive-gold-text);
  font-weight: 700;
  border-color: var(--archive-gold);
}

/* 내비게이션 링크(뒤로가기) — 실제 작품/작가 정보가 아니므로 Secondary
   Gray 유지, hover 시에만 Charcoal로 살짝 강조(§13: Gold는 희소하게,
   단순 내비 링크는 Selected 상태가 아니므로 Gold를 쓰지 않는다). */
.ap-discover-back {
  font-size: 15px;
  color: var(--archive-text-secondary);
  text-decoration: none;
}

.ap-discover-back:hover {
  color: var(--archive-text);
}

/* 2026-09-21 수정 (DISCOVER RESPONSIVE UI FINAL SPEC §4 — 모바일 주요
   제목 22~26px) — clamp()으로 화면 폭에 따라 22~26px 사이에서 자연스럽게
   움직인다(기존 .ap-discover-tab이 이미 쓰는 것과 동일한 clamp 패턴 재사용,
   §84/85 새 시각 언어 금지). 색상/굵기/줄바꿈 규칙은 그대로 유지. */
.ap-discover-artist-name {
  font-size: clamp(22px, 6vw, 26px);
  line-height: 1.3;
  margin: 0;
  /* 단어(음절 블록) 중간이 아니라 띄어쓰기 단위로 줄바꿈되도록 — 좁은
     화면에서 "컬렉" / "션"처럼 단어가 둘로 갈라지는 것을 방지한다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 2026-09-20 추가 (§2 작가명 선택 시 /app/{artistId} 이동) — 위 h2의
   font-size/margin을 상속만 받고 색/밑줄만 없앤다(§4 새 시각 언어 금지). */
.ap-discover-artist-name-link {
  color: inherit;
  text-decoration: none;
}

.ap-discover-artist-name-link:hover {
  text-decoration: underline;
}

.ap-discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  padding: 16px 0;
}

.ap-discover-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.ap-discover-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #f2f2f2;
  display: block;
}

.ap-discover-card-img--empty {
  background: #f2f2f2;
}

/* 2026-09-20 추가 (ARCHIVE PRO — DISCOVER 작품 표시 방식 작가별 단일
   프레임 핀셋 수정 §1~§2) — WORKS 탭 대표 프레임 전용. 기존
   .ap-discover-card/.ap-discover-grid 치수·간격은 그대로 재사용하되, 이
   프레임만 클릭 영역이 두 곳(이미지→작가 작품 목록, 작가명→
   /app/{artistId})으로 나뉘어야 해서 바깥 요소가 <a> 한 장이 아니라
   <div>다 — .ap-discover-card는 원래도 순수 block 레이아웃 클래스라
   <div>에 그대로 적용해도 시각적으로 동일하다. 새 색상/새 시각 언어는
   추가하지 않는다(§4 변경 금지 원칙). */
.ap-discover-worktab-frame-img-link {
  display: block;
}

.ap-discover-worktab-name-link {
  color: inherit;
  text-decoration: none;
}

.ap-discover-worktab-name-link:hover {
  text-decoration: underline;
}

.ap-discover-card-body {
  padding-top: 8px;
}

.ap-discover-card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* §10 — 작가명(작품 카드의 부제)·연도/재료 등 작품 메타는 실제 정보이므로
   Charcoal(작가 카드에서는 artistId 슬러그가 표시되는데, 같은 클래스를
   공유하므로 이 카드에서도 동일하게 Charcoal을 적용한다). */
.ap-discover-card-sub {
  font-size: 14px;
  color: var(--archive-text);
  margin-top: 2px;
}

.ap-discover-card-meta {
  font-size: 13px;
  color: var(--archive-text);
  margin-top: 2px;
}

/* §11 — Empty State는 Secondary Gray, Gold 금지. loading/error는 스펙이
   별도로 언급하지 않으므로 기존처럼 같은 셀렉터를 공유하며 동일 톤을
   따른다(회귀 없음). */
.ap-discover-loading,
.ap-discover-empty,
.ap-discover-error {
  padding: 40px 0;
  text-align: center;
  color: var(--archive-text-secondary);
  font-size: 16px;
}

/* 2026-09-19 추가 (ARCHIVE PRO — DISCOVER EN DESCRIPTION READABILITY
   FINAL PINPOINT FIX §2) — EN 모드의 Artists/Works 빈 상태 문구
   ("No artists/works have been published yet.")만을 위한 override.
   .ap-discover-empty--en은 discover.js에서 lang === "en"일 때만
   추가되는 클래스이므로 KR 빈 상태 렌더(.ap-discover-empty 단독)는
   위 기본 규칙 그대로 전혀 영향을 받지 않는다(§3 KR 절대 변경 금지).
   §4 위계상 "4. 보조/상태 설명 — Medium-Dark Gray"에 해당해 §1의 주요
   설명(Dark Charcoal)보다는 한 단계 연하게, 그러나 기존 Secondary
   Gray보다는 확실히 진하게 만든다. */
.ap-discover-empty.ap-discover-empty--en {
  color: var(--archive-text-medium);
  font-size: 16px;
  font-weight: 500;
}

/* 2026-09-21 수정 (DISCOVER RESPONSIVE UI FINAL SPEC §4 — 버튼 높이 최소
   44px) — box-sizing/min-height/font-size만 조정, 색/테두리/배경/정렬은
   기존 그대로. */
.ap-discover-load-more,
.ap-discover-retry {
  display: block;
  box-sizing: border-box;
  min-height: 44px;
  margin: 8px auto 0;
  padding: 10px 20px;
  font-size: clamp(15px, 3.6vw, 17px);
  border: 1px solid #d8d8d8;
  background: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.ap-discover-load-more:hover,
.ap-discover-retry:hover {
  border-color: #1a1a1a;
}

.ap-discover-detail {
  padding: 16px 0 40px;
  max-width: 640px;
}

/* 2026-09-21 추가 (ARCHIVE PRO — DISCOVER IMAGE-ONLY ZOOM/PAN 긴급 핀셋
   수정 §2) — 확대(scale) transform을 이 박스 "안"으로만 가두는 컨테이너.
   기존 .ap-discover-detail-img이 갖던 width:100%/margin-bottom/background를
   그대로 이 wrapper로 옮기고, 이미지 자체는 그 안에서 꽉 채운다 — 박스의
   렌더 크기(=원래 이미지의 자연스러운 렌더 높이)는 이전과 똑같이
   유지되므로 레이아웃 이동이 없다. overflow:hidden이 "이미지가 박스
   밖으로 넘어가지 않도록"(§2) 만드는 유일한 장치이고, position:relative는
   discover-image-zoom.js가 포인터 좌표를 이 박스 기준으로 계산하기 위한
   것뿐이다 — 둘 다 이 박스 안에서만 끝나며 페이지 레이아웃에는 영향이
   없다. */
.ap-discover-zoom-stage {
  width: 100%;
  margin-bottom: 16px;
  background: #f2f2f2;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}

.ap-discover-zoom-stage.is-zoomed {
  cursor: grab;
}

.ap-discover-zoom-stage.is-zoomed.is-dragging {
  cursor: grabbing;
}

.ap-discover-detail-img {
  width: 100%;
  display: block;
  background: #f2f2f2;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* 2026-09-21 수정 (DISCOVER RESPONSIVE UI FINAL SPEC §4) — Work/Collection
   상세 제목도 작가명(.ap-discover-artist-name)과 동일한 22~26px clamp를
   공유해 세 화면(작가/작품/컬렉션)의 제목 위계가 일관되게 유지된다. */
.ap-discover-detail-title {
  font-size: clamp(22px, 6vw, 26px);
  line-height: 1.3;
  margin: 0 0 6px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* §10 — 작품 상세의 작가명·연도/재료/크기 메타는 실제 정보이므로
   Charcoal. */
.ap-discover-detail-artist {
  font-size: 16px;
  color: var(--archive-text);
  text-decoration: none;
}

.ap-discover-detail-artist:hover {
  color: var(--archive-text);
}

.ap-discover-detail-meta {
  margin-top: 12px;
  font-size: 15px;
  color: var(--archive-text);
  line-height: 1.6;
}

/* -----------------------------------------------------------------------
   2026-09-20 추가 (COSMOS §12·§14·§17·§19·§20·§57~§60) — 기존 토큰
   (--archive-gold/--archive-text/--archive-text-secondary)만 재사용한다.
   새 palette·새 카드 디자인 언어를 만들지 않는다(§84/§85 원칙).
   ----------------------------------------------------------------------- */

/* §14 Artist Card의 "Archive 보기 →" / §17 Work Viewer의 동일 링크 —
   canonical Artist Archive(/app/{artistId})로 바로 연결되는, 눈에 띄지만
   과하지 않은 보조 링크. */
.ap-discover-archive-link {
  display: inline-block;
  margin-left: 10px;
  font-size: 15px;
  color: var(--archive-gold-text);
  text-decoration: none;
}
.ap-discover-archive-link:hover {
  text-decoration: underline;
}

/* 2026-09-20 추가 (COSMOS/DISCOVER 글로벌 공개 최종 점검 §3⑦) — 위
   .ap-discover-archive-link와 완전히 동일한 톤(금빛, 12px, 보조 링크
   스타일)만 재사용 — 새 색상/새 스타일 토큰을 추가하지 않는다. */
.ap-discover-website-link {
  display: inline-block;
  margin-left: 10px;
  font-size: 15px;
  color: var(--archive-gold-text);
  text-decoration: none;
}
.ap-discover-website-link:hover {
  text-decoration: underline;
}

/* §14 Artist 화면 안의 WORKS / COLLECTIONS 2차 탭 — 최상위
  .ap-discover-tabs보다 한 단계 조용한 보조 내비게이션. */
.ap-discover-subtabs {
  display: flex;
  gap: 18px;
  margin-top: 4px;
}
.ap-discover-subtab {
  font-size: 15px;
  font-weight: 500;
  color: var(--archive-text-secondary);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.ap-discover-subtab.is-active {
  color: var(--archive-gold-text);
  border-bottom-color: var(--archive-gold);
  font-weight: 600;
}

/* §57 PUBLIC COLLECTIONS TAB — 기존 .ap-discover-card 골격 그대로, 짧은
   설명 한 줄만 추가한다. */
.ap-discover-card-desc {
  font-size: 14px;
  color: var(--archive-text-secondary);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* §58 COLLECTION DETAIL 설명문. */
.ap-discover-collection-desc {
  font-size: 15px;
  color: var(--archive-text);
  line-height: 1.6;
  margin: 8px 0 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* §17/§19/§20 WORK VIEWER = RELATIONSHIP VIEWER — Collections 목록,
   More from this Artist, More in this Collection이 공유하는 섹션 골격.
   Work Viewer가 "관계 허브"가 되되(§17), 여전히 작품 자체가 화면에서
   가장 강해야 하므로(§35/§86) 헤딩은 작게, 그리드는 기존 카드 스타일
   그대로 재사용한다. */
.ap-discover-relation-block {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 0 8px;
  border-top: 1px solid #e4e4e4;
}
.ap-discover-relation-heading {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--archive-text-secondary);
  margin: 0 0 12px;
}
.ap-discover-relation-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
/* 2026-09-21 수정 (DISCOVER RESPONSIVE UI FINAL SPEC §3 — "작품 상세
   화면의 컬렉션 연결 버튼도 동일한 반응형 원칙을 적용한다") — 이 작품이
   속한 컬렉션으로 이동하는 연결 버튼을 위 .ap-discover-detail-actions
   버튼과 동일한 최소 44px 탭 영역/15~17px 글자 크기로 맞춘다. 색상(Gold)과
   밑줄 없는 스타일은 그대로 유지, 새 색상은 추가하지 않는다. */
.ap-discover-relation-link {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  font-size: clamp(15px, 3.6vw, 17px);
  font-weight: 600;
  line-height: 1.3;
  /* 컬렉션 제목은 길이가 제각각이라(작품 버튼과 다름) nowrap을 쓰면
     좁은 화면에서 화면 밖으로 밀려나 가로 스크롤이 생긴다 — 단어 단위로
     자연스럽게 줄바꿈하고, 대신 한 글자씩 세로로 끊기지 않도록
     word-break은 기본값(keep-all에 가까운 정상 동작)을 유지한다. */
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--archive-gold-text);
  text-decoration: none;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  background: #fff;
}
.ap-discover-relation-link:hover {
  border-color: var(--archive-gold);
  text-decoration: none;
}
.ap-discover-relation-grid {
  padding: 0 0 12px;
}
.ap-discover-relation-viewall {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 16px;
  font-size: clamp(15px, 3.6vw, 17px);
  font-weight: 600;
  white-space: nowrap;
  color: var(--archive-gold-text);
  text-decoration: none;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  background: #fff;
}
.ap-discover-relation-viewall:hover {
  border-color: var(--archive-gold);
  text-decoration: none;
}

@media (min-width: 700px) {
  .ap-discover-relation-block {
    padding-left: 0;
    padding-right: 0;
  }
}

/* -----------------------------------------------------------------------
   §61 PUBLIC SEARCH — 기존 .ap-discover-* 톤 그대로(새 palette 없음, §84/§85).
   ----------------------------------------------------------------------- */
.ap-discover-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto 20px;
}
/* 2026-09-21 수정 (DISCOVER RESPONSIVE UI FINAL SPEC §4·"검색 영역"도
   전체 적용 범위 ⑤에 포함) — 입력창/지우기 버튼 모두 최소 44px 높이로
   맞춰 같은 줄에서 나란히 눌리기 쉽게 한다. 폭/색/테두리 색/포커스 동작은
   그대로 유지. */
.ap-discover-searchinput {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  font-size: 16px;
  padding: 9px 12px;
  border: 1px solid #d8d3c8;
  border-radius: 4px;
  background: #fff;
  color: var(--archive-text);
}
/* 2026-10-13 가독성(typo1) — 검색 플레이스홀더: 브라우저 기본 회색 대신 보조 글자색(AA)과 같은 톤. */
.ap-discover-searchinput::placeholder {
  color: var(--archive-text-secondary);
  opacity: 1;
}
.ap-discover-searchinput:focus {
  outline: none;
  border-color: var(--archive-gold);
}
.ap-discover-searchclear {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--archive-text-secondary);
  background: none;
  border: 1px solid #d8d3c8;
  border-radius: 4px;
  cursor: pointer;
}
.ap-discover-searchclear:hover {
  color: var(--archive-text);
  border-color: var(--archive-gold);
}

/* §63 SHARE — Artist/Work/Collection 상세 화면의 canonical 링크들 옆에
   나란히 붙는 보조 버튼. 새 소셜 카운트/좋아요 등은 절대 추가하지
   않는다(NO FAKE SOCIAL METRICS). */
.ap-discover-share-btn {
  display: inline-block;
  margin-left: 10px;
  font-size: 15px;
  color: var(--archive-gold-text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.ap-discover-share-btn:hover {
  text-decoration: underline;
}

/* Web Share API 미지원 브라우저에서 "클립보드에 복사됨"을 알려주는 짧은
   토스트. 페이지 어디서나 뜰 수 있어 body에 직접 붙는다(discoverRoot
   바깥) — 리렌더로 지워지지 않도록 별도로 관리된다. */
.ap-discover-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(8px);
  background: var(--archive-text, #10131a);
  color: #fff;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}
.ap-discover-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 2026-09-26 추가 (DISCOVER 작품 이미지 박스 좌우 스와이프) — ARTISTS 작가
   카드에서 공개 작품 2점 이상일 때만 쓰인다. 박스 자체는 기존
   .ap-discover-card-img(폭 100%, 기본 1/1, 1번째 작품 비율이 있으면 인라인
   aspect-ratio)를 그대로 쓰고, 안쪽 트랙만 translateX로 움직여 카드
   높이·위치가 바뀌지 않는다. touch-action: pan-y — 세로 스크롤은 브라우저
   기본 그대로, 가로 제스처만 스와이프로 처리한다(루트의 pan-x pan-y와의
   교집합이라 페이지 확대 정책은 기존과 동일). */
.ap-discover-carousel {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.ap-discover-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  will-change: transform;
}

.ap-discover-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.ap-discover-carousel-img {
  width: 100%;
  height: 100%;
  display: block;
  -webkit-user-drag: none;
}

.ap-discover-carousel-count {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(30, 37, 39, 0.72);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* 좌우 이동 버튼 — 마우스(hover+정밀 포인터) 환경에서만 표시. 터치 기기는
   스와이프로 이동한다. 처음/마지막에서는 해당 방향 버튼을 숨긴다. */
.ap-discover-carousel-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--archive-text);
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ap-discover-carousel-btn--prev { left: 6px; }
.ap-discover-carousel-btn--next { right: 6px; }

@media (hover: hover) and (pointer: fine) {
  .ap-discover-carousel-btn { display: block; }
  .ap-discover-carousel:hover .ap-discover-carousel-btn,
  .ap-discover-carousel-btn:focus-visible { opacity: 1; }
}

.ap-discover-carousel-btn[disabled] {
  visibility: hidden;
}

.ap-discover-carousel-body-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .ap-discover-carousel-track { transition: none; }
}

/* 2026-09-26 추가 (DISCOVER 작품 상세 — 이미지박스 중앙 정렬 + 좌우 작품
   탐색). 원인: .ap-discover-detail은 max-width:640px인데 margin auto가 없어
   1100px 본문 안에서 왼쪽에 붙고, 아래 관계 블록은 900px 가운데 정렬이라
   노트북에서 오른쪽에 큰 빈 공간이 생겼다. 노트북·데스크톱(마우스 환경)
   에서만 작품 상세의 뒤로가기·이미지·제목·버튼·다른 작품 목록을 모두 같은
   640px 콘텐츠 폭으로 가운데 정렬한다. 모바일·태블릿(터치) 레이아웃은
   그대로다. 이미지 비율/줌 스테이지 규칙은 건드리지 않는다. */
/* 2026-09-26 수정 (iPad 실기기 왼쪽 치우침) — 가운데 정렬이 마우스 환경
   전용 media query 안에만 있어 터치 태블릿에는 적용되지 않았다. 모든
   기기에 동일하게 적용하고, 콘텐츠 폭은 880px로 넓혀 태블릿 가로·노트북
   에서 작품과 '이 작가의 다른 작품'이 화면에 맞게 커지도록 했다(좁은
   화면에서는 기존처럼 화면 폭 100%). */
.ap-discover-subheader--work,
.ap-discover-work-detail,
.ap-discover-work-detail ~ .ap-discover-relation-block {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* 좌우 작품 탐색 래퍼 — 줌 스테이지를 감싸기만 한다(스테이지 자체 무수정).
   버튼은 기본(터치)에서는 이미지 안쪽 양끝에 겹쳐 표시하고, 옆에 여유가
   있는 노트북·데스크톱에서는 이미지박스 바깥 양옆에 둔다. */
.ap-discover-worknav {
  position: relative;
}

.ap-discover-worknav-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin-top: -28px; /* 줌 스테이지 하단 margin 16px 보정 → 이미지 세로 중앙 */
  /* 2026-09-26 수정 — 터치 기기(모바일·태블릿)에서는 완전히 제거(배경·
     그림자·터치 영역 모두 없음). 스와이프만 사용. 마우스 환경에서만 표시. */
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8d8d8;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--archive-text);
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ap-discover-worknav-btn:hover {
  border-color: var(--archive-gold);
  color: var(--archive-gold-text);
}

.ap-discover-worknav-btn--prev { left: 8px; }
.ap-discover-worknav-btn--next { right: 8px; }

.ap-discover-worknav-btn[disabled] {
  visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .ap-discover-worknav-btn { display: flex; }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1030px) {
  .ap-discover-worknav-btn--prev { left: -56px; }
  .ap-discover-worknav-btn--next { right: -56px; }
}

/* 2026-09-26 추가 (작품 상세 뷰어 크기 안정화) — 작품 상세(.ap-discover-work-
   detail)의 줌 스테이지에만 적용. 컬렉션 상세·목록 카드는 그대로.
   뷰어 외부 크기를 작품 종횡비와 무관하게 고정한다: 폭은 콘텐츠 폭 100%,
   높이는 aspect-ratio로 정하고 기기 가용 높이로 상한을 둔다. svh(주소창이
   펼쳐진 상태 기준 "작은" 뷰포트 높이)를 써서 스크롤 중 주소창·하단 UI가
   접히고 펴져도 뷰어 높이가 흔들리지 않는다(svh 미지원 브라우저는 vh).
   이미지는 박스 안에서 object-fit: contain — 잘림·늘어남·임의 확대 없음.
   핀치 확대는 기존대로 이미지 transform만 바뀌므로 박스 크기는 불변. */
.ap-discover-work-detail .ap-discover-zoom-stage {
  aspect-ratio: 4 / 5;
  max-height: 65vh;
  max-height: 65svh;
  background: rgba(30, 37, 39, 0.04);
}

.ap-discover-work-detail .ap-discover-detail-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .ap-discover-work-detail .ap-discover-zoom-stage {
    aspect-ratio: 1 / 1;
    max-height: 72vh;
    max-height: 72svh;
  }
}

/* 2026-09-26 추가 (DISCOVER WORKS 탭 반응형 그리드 + 카드 이미지박스 고정)
   — WORKS 탭 작가 카드 목록(.ap-discover-grid--works)에만 적용. ARTISTS/
   COLLECTIONS/작가 상세의 기존 .ap-discover-grid는 그대로.
   원인: 기존 repeat(auto-fill, minmax(160px,1fr))는 카드가 적으면 빈 열이
   남아 카드가 왼쪽에만 작게 붙었다. 열 수를 화면 너비별로 고정하고
   auto-fit + justify-content:center로 카드가 열 수보다 적으면 빈 열을
   접어 가운데로 모은다(카드 폭은 열 수 기준으로 일정). */
/* 모든 WORKS 카드 이미지박스: 외곽 4:3 고정, 작품은 contain(잘림·늘어남
   없음). 인라인 비율 스타일보다 우선하도록 이 범위에서만 !important. 로딩
   전·실패 시에도 같은 크기의 기존 회색 박스가 자리를 지킨다. */
.ap-discover-worktab-frame .ap-discover-card-img {
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
}
.ap-discover-worktab-frame .ap-discover-carousel-img {
  object-fit: contain !important;
}

/* 2026-09-26 추가 (ARTISTS·WORKS·'이 작가의 다른 작품' 가운데 정렬 반응형
   그리드) — 기존 카드 컴포넌트는 그대로, 목록 컨테이너만 flex-wrap +
   가운데 정렬로 바꾼다. 카드가 1개이거나 마지막 줄이 덜 차도 가운데에
   놓이고, 카드 폭은 "열 수" 기준으로 일정하다(1개라고 늘어나지 않음).
   열 수는 기기 이름·방향이 아니라 목록이 실제로 차지하는 폭(컨테이너
   쿼리)으로 정한다. 같은 폭이라도 터치 기기는 카드가 너무 작지 않도록
   상한을 한 단계 낮춘다(태블릿 가로 4열 / 노트북 5열).
   컨테이너 쿼리 미지원 구형 브라우저는 화면 폭(뷰포트) 기준으로 동일하게
   계산한다(콘텐츠 폭 = 화면 폭 - 좌우 여백 32px, 최대 1100px). */
.ap-discover-cq {
  container-type: inline-size;
}
.ap-discover-flexgrid {
  --ap-cols: 2; /* 기본값 — 아래 단일 클래스 열 수 규칙들이 순서상 뒤에서 덮어쓴다 */
}
.ap-discover-grid.ap-discover-flexgrid {
  display: flex;
  flex-wrap: wrap;
  /* 2026-09-26 수정 — 카드 1개여도 첫 번째 열(왼쪽)부터 시작, 이후 순서대로
     배치(가운데 정렬 해제). 카드 폭·열 수 규칙은 그대로다. */
  justify-content: flex-start;
  gap: 16px;
}
.ap-discover-flexgrid > * {
  flex: 0 0 calc((100% - (var(--ap-cols) - 1) * 16px) / var(--ap-cols));
  width: calc((100% - (var(--ap-cols) - 1) * 16px) / var(--ap-cols));
  min-width: 0;
}

/* 목록(ARTISTS/WORKS) — 폴백: 뷰포트 기준 */
@media (min-width: 592px) { .ap-discover-flexgrid--main { --ap-cols: 3; } }
@media (min-width: 832px) and (pointer: fine) { .ap-discover-flexgrid--main { --ap-cols: 4; } }
@media (min-width: 1072px) and (pointer: fine) { .ap-discover-flexgrid--main { --ap-cols: 5; } }
@media (min-width: 1032px) and (pointer: coarse) { .ap-discover-flexgrid--main { --ap-cols: 4; } }
/* 목록 — 컨테이너(실제 목록 폭) 기준 */
@container (min-width: 0px) { .ap-discover-flexgrid--main { --ap-cols: 2; } }
@container (min-width: 560px) { .ap-discover-flexgrid--main { --ap-cols: 3; } }
@media (pointer: fine) {
  @container (min-width: 800px) { .ap-discover-flexgrid--main { --ap-cols: 4; } }
  @container (min-width: 1040px) { .ap-discover-flexgrid--main { --ap-cols: 5; } }
}
@media (pointer: coarse) {
  @container (min-width: 560px) { .ap-discover-flexgrid--main { --ap-cols: 3; } }
  @container (min-width: 1000px) { .ap-discover-flexgrid--main { --ap-cols: 4; } }
}

/* '이 작가의 다른 작품'(작품 상세, 최대 폭 880px) — 썸네일이라 목록보다
   작은 폭에서 열이 늘어난다. 폴백: 뷰포트 기준 */
@media (min-width: 632px) { .ap-discover-flexgrid--thumbs { --ap-cols: 3; } }
@media (min-width: 792px) and (pointer: fine) { .ap-discover-flexgrid--thumbs { --ap-cols: 5; } }
@media (min-width: 882px) and (pointer: coarse) { .ap-discover-flexgrid--thumbs { --ap-cols: 4; } }
@container (min-width: 0px) { .ap-discover-flexgrid--thumbs { --ap-cols: 2; } }
@container (min-width: 600px) { .ap-discover-flexgrid--thumbs { --ap-cols: 3; } }
@media (pointer: fine) {
  @container (min-width: 640px) { .ap-discover-flexgrid--thumbs { --ap-cols: 4; } }
  @container (min-width: 760px) { .ap-discover-flexgrid--thumbs { --ap-cols: 5; } }
}
@media (pointer: coarse) {
  @container (min-width: 850px) { .ap-discover-flexgrid--thumbs { --ap-cols: 4; } }
}

/* 카드형 목록의 이미지박스 — 외곽 4:3 고정, 작품은 contain(잘림·늘어남
   없음). 작품별 인라인 비율보다 우선하도록 이 범위에서만 !important.
   로딩 전·실패 시에도 같은 크기의 기존 회색 박스가 자리를 지킨다. */
.ap-discover-flexgrid .ap-discover-card-img {
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
}
.ap-discover-flexgrid .ap-discover-carousel-img {
  object-fit: contain !important;
}

/* 2026-10-07 추가 (작품 상세 UX 핀셋) — ⋯ 더보기 메뉴.
   Archive 보기·공유하기보다 낮은 우선순위: 테두리·배경·금색 없이 회색 점 세 개만
   보이고, 터치 영역만 44×44px로 잡는다. 메뉴 안의 "신고하기"도 일반 글자색이다. */
.ap-discover-more {
  position: relative;
  display: inline-flex;
}
.ap-discover-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--archive-text-light);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ap-discover-more-btn:hover,
.ap-discover-more-btn[aria-expanded="true"] {
  color: var(--archive-text-secondary);
}
.ap-discover-more-btn:focus-visible,
.ap-discover-more-item:focus-visible {
  outline: 2px solid var(--archive-text-secondary);
  outline-offset: 2px;
}
.ap-discover-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 3;
  min-width: 132px;
  padding: 4px 0;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(30, 37, 39, 0.08);
}
.ap-discover-more-menu[hidden] {
  display: none;
}
.ap-discover-more-menu.is-up {
  top: auto;
  bottom: calc(100% + 4px);
}
.ap-discover-more-menu.is-right {
  left: auto;
  right: 0;
}
.ap-discover-more-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  color: var(--archive-text-secondary);
  text-decoration: none;
}
.ap-discover-more-item:focus-visible {
  outline-offset: -2px;
}
.ap-discover-more-item:hover {
  color: var(--archive-text);
  text-decoration: none;
}

/* 2026-10-07 추가 (작품 상세 UX 핀셋) — 금빛 ↓ scroll hint.
   discover.js가 body에 직접 붙인다(루트 바깥 — 토스트와 같은 방식이라 색 토큰에
   기본값을 함께 적는다). 보이는 크기는 24px, 터치 영역은 44×44px. 배경 상자 없음. */
.ap-discover-scrollhint {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 0 0 -22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--archive-gold, #C6A85F);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.35s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ap-discover-scrollhint[hidden] {
  display: none;
}
.ap-discover-scrollhint:not(.is-visible) {
  pointer-events: none;
}
.ap-discover-scrollhint.is-visible {
  opacity: 1;
}
.ap-discover-scrollhint svg {
  display: block;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.7));
  animation: apDiscoverScrollHint 2.2s ease-in-out infinite;
}
.ap-discover-scrollhint:focus-visible {
  outline: 2px solid var(--archive-gold, #C6A85F);
  outline-offset: 0;
}
@keyframes apDiscoverScrollHint {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50% { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-discover-scrollhint { transition: none; }
  .ap-discover-scrollhint svg { animation: none; }
}