/* ==========================================================================
   Archive Pro — 상단 버튼 영역(언어/관리/링크/Artist Bio/PDF) 재정렬
   59차 (2026-09-07) — "정확히 2행" 사용자 명세로 58차 배치를 대체

   배경: 58차는 이 컴포넌트를 3행(언어+관리 / 링크+Artist Bio / PDF+안내)
   으로 배치했다. 이번 명세는 그 결과물의 세로 높이를 더 줄이기 위해
   Artist Bio를 관리 옆(1행)으로, 대표 링크를 PDF 옆(2행)으로 재배치해
   정확히 2행으로 압축할 것을 요구한다. 금색 위계·언어 3분할 UI·모든
   버튼의 기능·데이터·인증·라우팅은 58차와 동일하게 완전히 동결한다.

   범위(핀셋): article.lang-inline 내부 배치·크기·간격·테두리·모서리만.
   손대지 않음: 브랜드/로그인/작가명 헤더, 인증/권한/artistId/라우팅,
   대표 공개 앱 시작 섹션 정책, 링크·Artist Bio 데이터 조회/저장/표시
   조건, PDF 기능/문구/활성조건, 작품·검색·섹션 카운트, FILTER, 작품
   카드, 다른 모달, 브라우저 뒤로가기/새로고침/PWA 동작.

   DOM 변경(index.html에서 처리, 이 파일은 CSS만):
   - #artistBioTrigger를 .ap-brand-links-row(구 2행)에서 .lang-tabs(1행,
     #manageTabBtn 바로 앞)로 이동.
   - #portfolioPdfTrigger·#heroModeLine을 구 .ap-portfolio-row(구 3행)에서
     .ap-brand-links-row(2행)로 이동.
   - 위 이동으로 완전히 비게 된 구 .ap-portfolio-row 래퍼는 제거(새 래퍼를
     추가하지 않고 기존 2개 컨테이너 .lang-tabs / .ap-brand-links-row만으로
     정확히 2행을 구성하기 위함).
   - id/클래스/텍스트/이벤트는 전부 그대로다. artist-bio.js·
     artist-bio-public.js·ui.js(renderLangTexts)는 모두 getElementById로만
     조회하므로 위치 이동은 그 동작에 전혀 영향을 주지 않는다(58차에서
     #heroModeLine 이동 때 이미 같은 방식으로 사전 확인된 패턴).

   .lang-tabs / .ap-brand-links-row 에는 style.css가
   `display:contents!important`를 걸어둔 상태라(구 .ap-portfolio-row도
   동일했으나 이제 DOM에서 제거됨) 이 컴포넌트 범위에서만 되돌려
   (display:flex) 실제 레이아웃 컨테이너로 복원한다.

   전역 선택자(button, a, .card 등)는 전혀 사용하지 않는다. 이 파일의
   모든 규칙은 `body.archive-entered article.lang-inline` 이하로만
   스코프된다. 기존 style.css가 동일 속성에 건 다수의 !important를 이
   컴포넌트 범위 안에서만 확정적으로 이기기 위해 동일 속성에 한해
   !important를 함께 쓴다 — 전역/무분별 사용이 아니라 이 버튼들과 안내
   문구에만 한정된 타겟 오버라이드다.
   ========================================================================== */

body.archive-entered article.lang-inline {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 10px !important; /* 두 행 사이 간격 — 최대한 압축(요구 명세 "vertical gap 최소화") */
  width: 100% !important;
  max-width: 560px !important; /* 넓은 화면에서 상단 버튼 그룹 최대 너비 */
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important; /* 큰 둥근 외곽 테두리 제거 */
  border-radius: 0 !important;
  background: transparent !important; /* 새 카드 배경 없음, 기존 어두운 배경 유지 */
  box-shadow: none !important;
}

/* ==========================================================================
   1행 — 언어(좌) + Artist Bio + 관리(우)
   ========================================================================== */

body.archive-entered article.lang-inline > .lang-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  /* space-between이 아니라 auto-margin으로만 오른쪽 정렬한다 — 관리·
     Artist Bio가 둘 다 hidden인 일반 방문자 화면에서도 언어 세그먼트
     3개가 space-between 때문에 전체 폭으로 흩어지지 않고 항상 왼쪽에
     모여 있게 하기 위함(58차 검증 중 발견/수정, 그대로 유지). */
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 8px !important;
}

/* KR / EN / KR+EN — 하나의 세그먼트로 시각 결합, 반복되는 개별 테두리 억제 */
body.archive-entered article.lang-inline > .lang-tabs > .lang-tab[data-lang] {
  min-height: 44px !important;
  min-width: 44px !important;
  height: auto !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  letter-spacing: normal !important;
  border-radius: 0 !important;
  margin: 0 0 0 -1px !important;
  box-shadow: none !important;
  flex: 0 1 auto !important;
}
body.archive-entered article.lang-inline > .lang-tabs > .lang-tab[data-lang="kr"] {
  border-radius: 12px 0 0 12px !important;
  margin-left: 0 !important;
}
body.archive-entered article.lang-inline > .lang-tabs > .lang-tab[data-lang="both"] {
  border-radius: 0 12px 12px 0 !important;
}
body.archive-entered article.lang-inline > .lang-tabs > .lang-tab[data-lang].active,
body.archive-entered article.lang-inline > .lang-tabs > .lang-tab[data-lang]:hover,
body.archive-entered article.lang-inline > .lang-tabs > .lang-tab[data-lang]:focus-visible {
  box-shadow: none !important; /* 과도한 빛나는 효과 제거, 배경/글자색은 기존 유지 */
}

/* 2026-09-07 발견/수정 (59차, 이 컴포넌트 범위 한정): style.css에는
   #artistExternalLink[hidden]·#artistPrimaryLink[hidden]·
   #manageTabBtn[hidden]에는 각각 display:none!important 규칙이 있지만
   #artistBioTrigger[hidden]에는 그 짝이 빠져 있다(grep으로 확인) — 그
   결과 style.css 자신의 다른 무조건 display:inline-flex!important
   규칙(#artistExternalLink,#artistBioTrigger{...}) 때문에 hidden
   속성이 있어도 빈 버튼이 계속 보인다. 이 컴포넌트 안에서만, 이미
   존재하는 형제 규칙과 동일한 패턴으로 이 한 줄만 보강한다 — Bio
   유무 판정 로직(artist-bio.js/artist-bio-public.js) 자체는 손대지
   않았다(hidden 속성을 세팅하는 시점·조건은 무변경, CSS가 그 속성을
   실제로 반영하지 못하던 누락만 보강). */
body.archive-entered article.lang-inline #artistBioTrigger[hidden] {
  display: none !important;
}

/* Artist Bio — 언어 세그먼트와는 분리된 별도 버튼. 보일 때만 스스로
   margin-left:auto로 오른쪽 그룹의 시작점이 된다(관리와 같은 높이·여백
   기준으로 위치만 맞추고, 기존 색상·글자굵기 위계는 그대로 유지). */
body.archive-entered article.lang-inline > .lang-tabs > #artistBioTrigger {
  /* style.css가 #artistBioTrigger{order:2}(구 2행 그리드용, !important 없음)를
     걸어두고 있어 이 버튼을 명시적으로 되돌리지 않으면 DOM 순서(언어→Bio→
     관리)와 무관하게 관리 버튼 뒤로 밀려난다 — order:0으로 DOM 순서를
     그대로 따르게 한다. width/min-width/max-width도 같은 이유(구 2행
     grid 전용 width:100%!important 등 다수의 !important 규칙)로 명시
     초기화한다. */
  order: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
body.archive-entered article.lang-inline > .lang-tabs > #artistBioTrigger:not([hidden]) {
  margin-left: auto !important;
}

/* 관리 버튼 — 오른쪽 끝, 세로 중앙 정렬(부모 align-items:center).
   Artist Bio가 보이면 그 바로 뒤(일반 gap)에 붙고, Artist Bio가 숨김이면
   대신 이 버튼 스스로 margin-left:auto로 오른쪽 정렬을 이어받는다. */
body.archive-entered article.lang-inline > .lang-tabs > #manageTabBtn {
  order: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0 14px !important; /* 12~16px */
  padding-inline: 14px !important; /* 아래 60차 주석 참고 — style.css의 padding-inline 잔재 무력화 */
  font-size: 14px !important;
  letter-spacing: normal !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  /* 2026-09-08 수정(61차 — 실기기 재현: 60차의 width/min-width:max-content
     고정을 되돌림) — 60차는 "글자가 잘리지 않는다"를 보장하려 이 버튼의
     폭을 콘텐츠 크기에 고정(min-width:max-content, flex-shrink 사실상
     무력화)했는데, 그 결과 이 버튼은 더 이상 스스로 줄어들 수 없게 됐다.
     이 세션의 Playwright 테스트는 실제 iOS/Android 시스템 폰트가 아니라
     대체 폰트로 렌더링되기 때문에 우연히 안 넘쳤지만, 실기기(iPhone
     Safari/Chrome, Android Chrome, 360~430px)에서는 실제 글꼴로 그린
     "관리 Manage"가 그보다 넓어 행 전체가 뷰포트 밖으로 밀려 잘렸다(사용자
     실기기 재현 보고). 구조적 수정: flex-shrink를 다시 허용하고(0 1 auto)
     min-width:0으로 브라우저 기본 min-width:auto(콘텐츠 폭 하한) 병목을
     제거해, 이 행(.lang-tabs, nowrap)의 합계 폭이 사용 가능한 컨테이너
     폭을 절대 넘지 않도록 만든다 — 즉 아무리 넓은 실제 글꼴이 와도
     "가로 스크롤 없음"이 폭 예측이 아니라 flex 알고리즘 자체로 보장된다.
     overflow:visible + text-overflow:clip은 유지하므로 극단적으로 좁을
     때도 ellipsis·글자 숨김은 일어나지 않는다(대신 아래 KR+EN 전용
     padding/font-size 축소로 실제로는 그 극단까지 가지 않게 한다). */
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body.archive-entered article.lang-inline > .lang-tabs:has(#artistBioTrigger[hidden]) > #manageTabBtn {
  margin-left: auto !important;
}

/* 2026-09-07 추가 (59차 — 좁은 화면 가로 overflow 방지, 요구 명세 §8/§9):
   Artist Bio와 관리가 둘 다 보이는 상태에서 KR/EN/KR+EN(최소 44px 폭)까지
   더하면 iPhone SE급(320px) 화면에서 1행이 실제로 넘친다(정적 테스트로
   확인). 언어 버튼 자체를 축소·숨김·드롭다운화하지 않고(요구 명세 §반응형
   처리 — 명시적으로 금지), 대신 이 버튼들의 padding·gap·글자 크기만
   반응형으로 살짝 줄여 같은 구조를 그대로 유지한 채 폭만 좁힌다. 최소
   너비 44px(터치 타깃)은 그대로 유지 — 그 안의 여백만 줄인다. */
@media (max-width: 400px) {
  body.archive-entered article.lang-inline > .lang-tabs {
    gap: 4px !important;
  }
  body.archive-entered article.lang-inline > .lang-tabs > .lang-tab[data-lang] {
    padding: 0 7px !important;
    font-size: 13px !important;
  }
  body.archive-entered article.lang-inline > .lang-tabs > #artistBioTrigger,
  body.archive-entered article.lang-inline > .lang-tabs > #manageTabBtn {
    padding: 0 9px !important;
    font-size: 12.5px !important;
  }
}
@media (max-width: 340px) {
  /* 320px급(iPhone SE)에서도 Artist Bio+관리가 함께 보일 때 여전히
     타이트할 수 있어 한 단계 더 좁힌다 — 최소 터치 높이(44px)는 그대로,
     가로 여백만 추가로 축소. */
  body.archive-entered article.lang-inline > .lang-tabs {
    gap: 3px !important;
  }
  body.archive-entered article.lang-inline > .lang-tabs > .lang-tab[data-lang] {
    padding: 0 6px !important;
  }
  body.archive-entered article.lang-inline > .lang-tabs > #artistBioTrigger,
  body.archive-entered article.lang-inline > .lang-tabs > #manageTabBtn {
    padding: 0 7px !important;
    font-size: 12px !important;
  }
}

/* 2026-09-08 추가(61차 — KR+EN 모드 전용 추가 압축, §모바일 레이아웃 기준
   우선순위: ① 컬럼/간격 → ② 관리 버튼 padding → ③ font-size 소폭 축소
   순서 그대로): "관리 Manage"/"20점 PDF · 20-work PDF"는 KR+EN 모드에서만
   나타나는 병기 문구라 KR/EN 단독 모드는 이미 통과한 상태를 그대로 두고
   싶었다 — 그래서 전역이 아니라 :has()로 "지금 KR+EN 탭이 active인가"만
   감지해 이 문구가 실제로 걸려 있을 때만 추가로 좁힌다(다른 두 언어
   모드는 이 블록의 영향을 전혀 받지 않음, 기존 :has(#artistBioTrigger
   [hidden]) 패턴과 동일한 방식). iPhone 14/15 Pro Max급(~428~430px)도
   사용자 검증 목록에 포함되어 있어 기존에 비어 있던 401~430px 구간에도
   새 breakpoint를 추가한다. */
@media (max-width: 430px) {
  body.archive-entered article.lang-inline:has(> .lang-tabs > .lang-tab[data-lang="both"].active) > .lang-tabs > #manageTabBtn {
    padding: 0 8px !important;
    font-size: 12.5px !important;
  }
  body.archive-entered article.lang-inline:has(> .lang-tabs > .lang-tab[data-lang="both"].active) > .ap-brand-links-row > #portfolioPdfTrigger {
    padding: 0 10px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 400px) {
  body.archive-entered article.lang-inline:has(> .lang-tabs > .lang-tab[data-lang="both"].active) > .lang-tabs {
    gap: 3px !important;
  }
  body.archive-entered article.lang-inline:has(> .lang-tabs > .lang-tab[data-lang="both"].active) > .lang-tabs > #manageTabBtn {
    padding: 0 6px !important;
    font-size: 11.5px !important;
  }
  body.archive-entered article.lang-inline:has(> .lang-tabs > .lang-tab[data-lang="both"].active) > .ap-brand-links-row > #portfolioPdfTrigger {
    padding: 0 8px !important;
    font-size: 12px !important;
  }
}
@media (max-width: 340px) {
  body.archive-entered article.lang-inline:has(> .lang-tabs > .lang-tab[data-lang="both"].active) > .lang-tabs {
    gap: 2px !important;
  }
  body.archive-entered article.lang-inline:has(> .lang-tabs > .lang-tab[data-lang="both"].active) > .lang-tabs > #manageTabBtn {
    padding: 0 5px !important;
    font-size: 11px !important;
  }
  body.archive-entered article.lang-inline:has(> .lang-tabs > .lang-tab[data-lang="both"].active) > .ap-brand-links-row > #portfolioPdfTrigger {
    padding: 0 6px !important;
    font-size: 11px !important;
  }
}

/* ==========================================================================
   2행 — 대표 링크(dungzaklab.art 등) + 20점 PDF
   ========================================================================== */

body.archive-entered article.lang-inline > .ap-brand-links-row {
  display: flex !important; /* style.css의 display:contents 복원 */
  flex-wrap: wrap !important; /* 좁은 화면·긴 링크명에서는 전체가 자연스럽게 다음 줄로 */
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 8px 10px !important; /* row-gap 8px, column-gap 10px */
}
body.archive-entered article.lang-inline > .ap-brand-links-row > #artistExternalLink,
body.archive-entered article.lang-inline > .ap-brand-links-row > #artistPrimaryLink {
  /* style.css가 #artistExternalLink{order:1}(구 레이아웃용, !important 없음)를
     걸어두고 있어 명시적으로 되돌린다(58차와 동일한 이유). */
  order: 0 !important;
  height: auto !important; /* 고정 높이 금지 — 줄바꿈 시 자연 확장 */
  min-height: 44px !important;
  padding: 8px 12px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  border-radius: 12px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  white-space: normal !important; /* 말줄임 금지, 자연 줄바꿈 */
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: unset !important;
  text-align: center !important;
  flex: 1 1 160px !important; /* 링크가 남는 공간을 채우되, 좁으면 줄어들고 문구가 길면 자연 줄바꿈 */
}
body.archive-entered article.lang-inline > .ap-brand-links-row > #portfolioPdfTrigger {
  order: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0 14px !important;
  padding-inline: 14px !important; /* 아래 60차 주석 참고 — .ap-portfolio-btn의 letter-spacing/padding 잔재 무력화 */
  font-size: 14px !important; /* 14~15px */
  letter-spacing: normal !important;
  border-radius: 12px !important;
  white-space: nowrap !important; /* PDF 버튼 자체 텍스트는 짧아 줄바꿈 불필요 */
  /* 2026-09-08 수정(61차 — 실기기 재현: 60차의 width/min-width:max-content
     고정을 되돌림) — #manageTabBtn과 동일한 이유. 60차는 이 버튼의 폭을
     콘텐츠 크기에 고정해 flex-shrink를 사실상 무력화했는데, 실기기의 실제
     시스템 폰트로 그린 "20점 PDF · 20-work PDF"가 테스트 환경 대체 폰트보다
     넓어 행이 뷰포트 밖으로 밀려 잘렸다(사용자 실기기 재현 보고). flex-
     shrink를 다시 허용하고 min-width:0으로 콘텐츠-폭 하한을 제거해, 이
     행(.ap-brand-links-row, wrap)이 필요하면 이 버튼도 스스로 줄어들 수
     있게 한다 — #artistExternalLink/#artistPrimaryLink(flex:1 1 160px)가
     이미 남는 공간을 먼저 양보하므로 실사용에서는 거의 발동하지 않지만,
     극단적으로 좁을 때도 페이지 가로 스크롤은 flex 알고리즘 자체로
     방지된다. overflow:visible + text-overflow:clip 유지로 ellipsis·글자
     숨김도 없다(아래 KR+EN 전용 padding/font-size 축소가 그 극단을
     실질적으로 방지). */
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* 2026-09-08 수정(60차 — 언어 기준 안내 문구 완전 삭제) — 근본 원인 아님,
   사용자 명시 요청: KR/EN/KR+EN 버튼 아래 표시되던 "한국어 기준" /
   "English edition" / "한국어·영어 기준 Korean · English edition" 문구를
   모든 언어 모드에서 완전히 제거한다. ui.js의 renderLangTexts()는 여전히
   매 언어 전환마다 #heroModeLine.textContent를 갱신하지만(그 로직은
   건드리지 않음 — "기능 리팩터링 금지" 원칙), 이 컴포넌트 범위에서
   display:none으로 완전히 렌더링을 끈다. flex 아이템이 display:none이면
   .ap-brand-links-row의 gap이 그 자리에 적용되지 않으므로(모던 브라우저
   표준 동작) 새 spacer 없이도 빈 공간이 남지 않고, 아래 통계/FILTER
   영역은 이 행 자체의 높이가 줄어드는 만큼 자연스럽게 위로 올라온다
   (article.lang-inline과 형제인 aside.stats-inline은 .hero.hero-compressed
   그리드의 별도 셀이라 이 변경만으로 자동으로 따라 올라옴 — 새 레이아웃
   로직 없음). */
body.archive-entered article.lang-inline > .ap-brand-links-row > #heroModeLine,
body.archive-entered article.lang-inline > .ap-brand-links-row > .hero-mode-line {
  display: none !important;
}