/* =============================================================
 * author-page.css — 저자 페이지 프로필 카드 (인트라매거진 기준 이식, 2026-10-14)
 *
 * 원본: intramagazine/wp-content/themes/intra-v2/custom-parts/author.php 의
 *       author-hero / author-card / author-section-head 컴포넌트
 *
 * 왜 별도 파일인가: 카테고리 카드/칩 스타일은 custom-parts/css/loadmore.css 에
 * 있는데 그 파일은 `is_category()` 에서만 enqueue 된다
 * (includes/theme/archive-infinite-scroll.php). 저자 페이지에는 오지 않으므로
 * 저자 전용 자산을 따로 둔다 — loadmore.css 의 enqueue 조건을 넓히면
 * 카테고리 외 페이지에 쓰지 않는 CSS 가 얹힌다.
 *
 * 로드: includes/theme/author-page.php → is_author() 에서만 enqueue
 * 짝: custom-parts/author.php
 *
 * 액센트: 사이트 블루 — newspaper.css `:root` 의 기존 변수 `--title-color`(#0182d6).
 *
 * ⚠ 케이팝포스트 `kpop-clear` 에 같은 파일이 개별 이식돼 있다.
 *   지역 토큰(--ap-*) 블록만 다르고 그 아래 본문은 동일해야 한다
 *   — @.claude/rules/ai-safety.md 6번.
 * ============================================================= */

/* ---- 지역 토큰 (이 블록만 사이트별로 다르다) ---- */
.author-page {
  --ap-accent:      var(--title-color, #0182d6);
  --ap-accent-tint: #eaf4fc;
  --ap-on-accent:   #fff;

  --ap-surface:     #fff;
  --ap-surface-2:   #f9fafb;
  --ap-line:        #e5e7eb;
  --ap-line-soft:   #eef0f3;

  --ap-text:        #111;
  --ap-text-2:      #374151;
  --ap-text-3:      #6b7280;
  --ap-text-4:      #9ca3af;

  --ap-shadow:      0 1px 3px rgba(0, 0, 0, .04);
}

/* ================================================================
   컨테이너 — 사이트 아카이브 폭(1200px)에 맞춘다
   ----------------------------------------------------------------
   .author-page 는 custom-parts/author.php 에서 .td-main-content-wrap
   에 붙는다. 이 래퍼에 폭 제한이 없어 프로필 카드·섹션헤더가 화면
   끝까지 터져 나왔다(2026-10-14 1차 배포에서 발생).
   .infinite-cat-container / .infinite-tag-container 와 같은 1200px 로
   맞추고, 안쪽 tagdiv row 의 자체 max-width 를 풀어 기사 목록까지
   같은 선에 정렬시킨다.
   ================================================================ */
.author-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
.author-page,
.author-page *,
.author-page *::before,
.author-page *::after {
  box-sizing: border-box;
}
/* 안쪽 tagdiv row 가 자체 폭으로 좁아져 히어로와 어긋나는 것을 막는다 */
.author-page .tdc-row {
  max-width: 100%;
}

/* ================================================================
   히어로 (빵부스러기 + 프로필 카드) — 모바일 기준
   ================================================================ */
.author-hero {
  margin: 10px 0 18px;
}

/* ---- 빵부스러기 ----
   두 사이트의 렌더러 마크업이 다르다:
     이슈데이  .entry-crumbs > span + i.td-bread-sep
     케이팝    nav.kpop-breadcrumb > ol.kpop-breadcrumb__list > li
   각 사이트의 빵부스러기 CSS 는 저자 페이지에 로드되지 않아
   케이팝에서는 <ol> 번호가 그대로 보였다. 여기서 둘 다 받아 준다. */
/* 2026-10-19 간격 통일: 수평 간격은 구분자 margin(좌우 6px)만으로 정한다. */
.author-hero .entry-crumbs,
.author-hero .kpop-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ap-text-3);
}
.author-hero .kpop-breadcrumb { margin: 0 0 12px; }
.author-hero .kpop-breadcrumb__list { margin: 0; }
.author-hero .kpop-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: inherit;
}
.author-hero .kpop-breadcrumb__item + .kpop-breadcrumb__item::before {
  content: "\203A";
  margin: 0 6px;
  color: var(--ap-text-4);
}
.author-hero .kpop-breadcrumb__item.is-current span,
.author-hero .entry-crumbs .td-bred-no-url-last:last-child {
  color: var(--ap-text-2);
  font-weight: 600;
}
.author-hero .entry-crumbs a,
.author-hero .kpop-breadcrumb a {
  color: var(--ap-text-3);
  text-decoration: none;
}
.author-hero .entry-crumbs a:hover,
.author-hero .kpop-breadcrumb a:hover { color: var(--ap-accent); }
.author-hero .entry-crumbs .td-bread-sep { margin: 0 6px; color: var(--ap-text-4); }

/* ---- 프로필 카드 — 모바일은 세로 스택 ---- */
.author-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 18px 16px;
  background: var(--ap-surface);
  border: 1px solid var(--ap-line-soft);
  border-radius: 12px;
  box-shadow: var(--ap-shadow);
}

.author-card__avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ap-surface-2);
  flex: none;
}
.author-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.author-card__body {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.author-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 10px;
  min-width: 0;
}
.author-card__name {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ap-text);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.author-card__role {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--ap-accent-tint);
  color: var(--ap-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.author-card__count {
  font-size: 13px;
  color: var(--ap-text-3);
  font-variant-numeric: tabular-nums;
}
.author-card__count strong {
  color: var(--ap-text);
  font-weight: 700;
}

.author-card__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ap-text-2);
  max-width: 70ch;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.author-card__credentials {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  min-width: 0;
  max-width: 100%;
}
.author-card__credentials > li {
  margin: 0;
  padding: 0;
  line-height: inherit;
}
.author-card__cred {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ap-text-3);
  min-width: 0;
}
.author-card__cred i {
  width: 1em;
  text-align: center;
  color: var(--ap-accent);
  font-style: normal;
}
.author-card__cred-label {
  font-weight: 700;
  color: var(--ap-text-4);
}
.author-card__cred a {
  color: var(--ap-text-2);
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-all;   /* 긴 이메일이 카드를 밀고 나가지 않게 */
  min-width: 0;
}
.author-card__cred a:hover {
  color: var(--ap-accent);
  text-decoration: underline;
}

/* ================================================================
   섹션 헤더 ("{이름} 기자의 기사") — 모바일 기준
   ================================================================ */
.author-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 22px 0 12px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ap-accent);
  min-width: 0;
}
.author-section-head__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ap-text);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.author-section-head__count {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--ap-accent-tint);
  color: var(--ap-accent);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ================================================================
   반응형 — 모바일 우선(min-width 로만 올린다)
   위의 기본값이 모바일이고, 화면이 넓어질 때만 가로 배치로 바꾼다.
   max-width 로 되돌리는 규칙을 쓰지 않으므로 좁은 화면에서
   의도치 않게 데스크톱 값이 남는 경우가 없다.
   ================================================================ */

/* ≥ 600px — 아바타를 왼쪽으로, 본문 왼쪽 정렬 */
@media (min-width: 600px) {
  .author-card {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
    padding: 20px 20px;
  }
  .author-card__avatar { width: 96px; height: 96px; }
  .author-card__body { align-items: flex-start; }
  .author-card__head { justify-content: flex-start; }
  .author-card__credentials { justify-content: flex-start; gap: 8px 22px; }
  .author-card__name { font-size: 22px; }
  .author-card__desc { font-size: 14px; }
}

/* ≥ 1024px — 데스크톱 여백·크기 */
@media (min-width: 1024px) {
  .author-page { padding: 0 15px; }
  .author-hero { margin: 12px 0 24px; }
  .author-card {
    gap: 24px;
    padding: 24px 26px;
    border-radius: 14px;
  }
  .author-card__avatar { width: 112px; height: 112px; }
  .author-card__name { font-size: 26px; }
  .author-section-head {
    margin: 28px 0 14px;
    padding-bottom: 10px;
  }
  .author-section-head__title { font-size: 19px; }
}