/* ==========================================================================
   KWorks ENT · 배우 개인 페이지 (타이틀 시퀀스 · 고정 포트레이트 · 필모그래피 · 갤러리 · 라이트박스 · 다음 배우 · 인쇄 컴카드)
   ========================================================================== */
.ap-title { display: grid; grid-template-columns: 1fr 1fr; }
.ap-portrait { position: sticky; top: var(--hd-h); height: calc(100svh - var(--hd-h)); align-self: start; background: var(--surface); }
.ap-portrait__btn { display: block; width: 100%; height: calc(100svh - var(--hd-h)); padding: 0; cursor: zoom-in; }
.ap-portrait__fig { position: relative; width: 100%; height: calc(100svh - var(--hd-h)); margin: 0; overflow: hidden; }
.ap-portrait__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: 0; transition: opacity .5s var(--ease-quart), filter .7s var(--ease-quart); }
.ap-portrait__img.is-on { opacity: 1; filter: none; }
.ap-portrait__img.is-pre { opacity: 0; filter: brightness(.55); transition: none; }
.ap-portrait__fig.is-developing .ap-portrait__img.is-on { filter: grayscale(1) brightness(.22) contrast(1.45) blur(3px); transition: none; }
.ap-portrait__fig.is-developed .ap-portrait__img.is-on { transition: opacity .5s var(--ease-quart), filter 1.4s var(--ease-quart); }
.ap-portrait__num { position: absolute; left: 20px; bottom: 16px; padding: 4px 8px; border-radius: 2px; background: rgba(var(--scrim), .55); font-family: var(--font-en); font-weight: 700; font-size: 1.125rem; color: var(--text-2); letter-spacing: .06em; pointer-events: none; }
.ap-col { padding-left: clamp(32px, 5vw, 80px); }
.ap-hero { min-height: calc(100svh - var(--hd-h)); display: flex; flex-direction: column; justify-content: space-between; padding: 24px var(--gutter) 56px 0; }
.ap-hero__body { display: flex; flex-direction: column; gap: 12px; }
.ap-name { font-weight: 750; font-size: clamp(3.5rem, 7vw, 6rem); line-height: 1; letter-spacing: -.04em; }
.ap-en { font-family: var(--font-en); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2.25rem); color: var(--text-2); line-height: 1.1; }
.ap-intro { font-weight: 500; font-size: 1.375rem; max-width: 24em; margin-top: 10px; line-height: 1.5; }
.ap-actions { margin-top: 20px; }
.ap-actions > span { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* 개인 SNS: 값이 있는 것만 버튼 줄 끝에 원형 아이콘으로(data/artist_sns.json). 줄이 넘치면 아이콘끼리 묶여 다음 줄로 */
.ap-sns { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.ap-sns a { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); transition: color .18s var(--ease-out), border-color .18s var(--ease-out); }
.ap-sns a:hover { color: var(--text); border-color: var(--text); }
.ap-sns svg { width: 20px; height: 20px; }
/* 타이틀 시퀀스: 줄 높이로 잘라 아래에서 올라오는 자막처럼 (처음부터 흐리게 보임) */
.ap-name.seq, .ap-en.seq, .ap-intro.seq { overflow: hidden; }
.seq > span { display: block; opacity: .35; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.ap-en.seq > span, .ap-intro.seq > span, .ap-actions.seq > span { transform: translateY(12px); }
.ap-en.seq > span { transition-delay: .12s; } .ap-intro.seq > span { transition-delay: .24s; } .ap-actions.seq > span { transition-delay: .36s; }
.is-seq .seq > span { opacity: 1; transform: none; }
.ap-sec { padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--line); }
.ap-sec .lead { margin-top: 10px; margin-bottom: 28px; }
.bio { font-size: 1.25rem; line-height: 1.8; }
.bio p + p { margin-top: 1em; }
.ap-works .num-xl { font-family: var(--font-en); font-weight: 800; font-size: clamp(4rem, 8vw, 6rem); line-height: .85; vertical-align: -.1em; margin: 0 .06em; font-variant-numeric: tabular-nums; }
.bars { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 32px; }
.bars li { display: grid; grid-template-columns: 4.5rem 1fr 3rem; align-items: center; gap: 12px; }
.bars__label { color: var(--text-2); font-size: .9375rem; }
.bars__track { height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; }
.bars__track i { display: block; height: 100%; width: 0; background: var(--text-2); transition: width .7s var(--ease-quart); }
.bars li.is-top .bars__track i { background: var(--text); }
.bars li:nth-child(2) i { transition-delay: 60ms; } .bars li:nth-child(3) i { transition-delay: 120ms; } .bars li:nth-child(4) i { transition-delay: 180ms; } .bars li:nth-child(5) i { transition-delay: 240ms; } .bars li:nth-child(6) i { transition-delay: 300ms; }
.bars.is-in li i { width: var(--w); }
.bars__n { text-align: right; font-size: 1.125rem; }
.ap-sub { font-weight: 700; font-size: 1.125rem; margin-bottom: 8px; }
.recent { border-top: 1px solid var(--line); margin-bottom: 28px; }
.recent li { display: grid; grid-template-columns: 60px 70px 1fr auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.recent .num { font-size: 1.125rem; color: var(--text-2); }
.recent__cat, .recent__out { color: var(--muted); font-size: .875rem; }
.recent strong { font-weight: 600; }

/* ---------- FILMOGRAPHY ---------- */
.filmo__tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 32px; padding-bottom: 4px; }
.filmo__tabs::-webkit-scrollbar { display: none; }
.filmo__tabs .chip { flex: 0 0 auto; gap: 6px; }
.filmo__tabs .chip .num { font-size: .875rem; }
.filmo__body { display: grid; grid-template-columns: 2fr 10fr; gap: 0 40px; align-items: start; }
.filmo__rail { position: sticky; top: calc(var(--hd-h) + 24px); }
.filmo__rail ul { display: flex; flex-direction: column; gap: 2px; }
.filmo__rail li[hidden] { display: none; }
.filmo__rail button { position: relative; padding: 4px 0 4px 18px; font-size: 1rem; color: var(--muted); font-weight: 700; transition: color .2s; }
.filmo__rail button::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .2s; }
.filmo__rail button:hover, .filmo__rail button[aria-current="true"] { color: var(--text); }
.filmo__rail button[aria-current="true"]::before { opacity: 1; }
.filmo__list { max-width: 920px; transition: opacity .2s; }
.filmo.is-switching .filmo__list { opacity: 0; }
.filmo__group { padding-bottom: 32px; }
.filmo__group[hidden] { display: none; }
.filmo__year { font-family: var(--font-en); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--muted); margin-bottom: 8px; scroll-margin-top: calc(var(--hd-h) + 24px); }
.filmo__group[data-year="none"] .filmo__year { font-family: var(--font-kr); font-weight: 700; font-size: 1.25rem; }
.filmo__row { display: flex; align-items: baseline; gap: 12px; padding: 10px 8px; border-radius: 2px; transition: background-color .2s; }
.filmo__row[hidden] { display: none; }
.filmo__row:hover { background: var(--surface); }
.filmo__title { font-weight: 600; font-size: 1.0625rem; border-bottom: 2px solid transparent; transition: border-color .2s; }
.filmo__row:hover .filmo__title { border-color: var(--accent); }
.filmo__leader { flex: 1; min-width: 24px; border-bottom: 1px dotted var(--line-strong); transform: translateY(-.35em); }
.filmo__meta { display: flex; flex-wrap: wrap; color: var(--text-2); font-size: .875rem; flex: 0 0 auto; max-width: 45%; justify-content: flex-end; }
.filmo__meta span + span { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line-strong); }
@media (max-width: 959px) {
  .filmo__body { grid-template-columns: 1fr; }
  .filmo__rail { display: none; }
  .filmo__year { position: sticky; top: var(--hd-h); background: var(--bg); padding: 8px 0; z-index: 5; font-size: 2rem; }
  .filmo__row { flex-wrap: wrap; gap: 4px 12px; }
  .filmo__leader { display: none; }
  .filmo__meta { max-width: 100%; width: 100%; justify-content: flex-start; }
}

/* ---------- GALLERY · LIGHTBOX ---------- */
.lighttable { background: var(--surface); padding: clamp(24px, 3vw, 40px) 0; }
.lighttable__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.lighttable__item { display: block; width: 100%; cursor: zoom-in; }
.lighttable__frame { display: block; aspect-ratio: 2 / 3; background: var(--card); border-radius: 2px; overflow: hidden; outline: 1px solid transparent; outline-offset: -1px; transition: outline-color .2s; }
.lighttable__frame img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 20%; }
.lighttable__item:hover .lighttable__frame, .lighttable__item:focus-visible .lighttable__frame { outline-color: var(--line-strong); }
@media (max-width: 1199px) { .lighttable__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .lighttable__grid { grid-template-columns: repeat(2, 1fr); } }
.lightbox { position: fixed; inset: 0; z-index: 950; background: rgba(var(--scrim), .96); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.lightbox[hidden] { display: none; }
.lightbox.is-on { opacity: 1; }
.lightbox__fig { margin: 0; display: flex; align-items: center; justify-content: center; }
.lightbox__fig img { max-width: 92vw; max-height: 86svh; width: auto; height: auto; transform-origin: 0 0; transition: opacity .32s; }
.lightbox__fig img.is-swap { opacity: .35; }
.lightbox__close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--text); background: rgba(var(--scrim), .6); transition: border-color .2s; }
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 999px; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--text); background: rgba(var(--scrim), .6); transition: border-color .2s; }
.lightbox__nav svg { width: 20px; height: 20px; }
.lightbox__nav--prev { left: 16px; } .lightbox__nav--next { right: 16px; }
.lightbox__nav:hover, .lightbox__close:hover { border-color: var(--text); }
.lightbox__num { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-family: var(--font-en); font-weight: 700; font-size: 1.125rem; color: var(--text-2); letter-spacing: .06em; }
@media (max-width: 767px) { .lightbox__nav { display: none; } }

/* ---------- NEXT ARTIST ---------- */
.next-band { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; min-height: 70svh; border-top: 1px solid var(--line); background: var(--surface); padding: 40px var(--gutter); }
.next-band__media { justify-self: end; display: flex; justify-content: flex-end; max-height: 60svh; }
.next-band__media img { width: auto; height: auto; max-height: 60svh; max-width: 100%; border-radius: 2px; filter: brightness(.7); transition: filter .4s var(--ease-out); }
.next-band:hover .next-band__media img, .next-band:focus-visible .next-band__media img { filter: brightness(1); }
/* 흑백, 켜지면 컬러(배우 카드와 같은 규칙, site.css): 마우스 기기는 커서, 터치 기기는 사진이 화면 가운데 띠에 걸릴 때(is-spot, site.js).
   현상 효과는 img, 흑백은 감싼 틀이 맡는다 */
.js .next-band__media { filter: grayscale(1); transition: filter .45s var(--ease-out); }
.js .next-band.is-spot .next-band__media, .js .next-band:focus-visible .next-band__media { filter: none; }
@media (hover: hover) and (pointer: fine) { .js .next-band:hover .next-band__media { filter: none; } }
.next-band__text { display: flex; flex-direction: column; gap: 10px; }
.next-band__label { color: var(--muted); font-size: .9375rem; }
.next-band__name { font-weight: 750; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.03em; }
.next-band__name .u { border-bottom: 3px solid transparent; transition: border-color .2s; }
.next-band:hover .next-band__name .u { border-color: var(--accent); }
.next-band__en { font-family: var(--font-en); font-weight: 600; font-size: 1.5rem; color: var(--text-2); }
.next-band__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; }
.next-band__go svg { width: 20px; height: 20px; transition: transform .25s var(--ease-out); }
.next-band:hover .next-band__go svg { transform: translateX(4px); }
.next-band__foot { display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 40px; color: var(--text-2); font-size: .9375rem; }
.next-band__foot a { display: inline-flex; align-items: center; gap: 2px; transition: color .2s; }
.next-band__foot a:hover { color: var(--text); }
.next-band__foot svg { width: 18px; height: 18px; }
@media (max-width: 959px) { .next-band { grid-template-columns: 1fr; min-height: 50svh; gap: 24px; } .next-band__media { justify-self: start; } .next-band__media img { max-height: 40svh; } }

/* ---------- 모바일 하단 CTA ---------- */
.mcta { display: none; }
@media (max-width: 767px) {
  .mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; display: flex; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(var(--scrim), .92); border-top: 1px solid var(--line); }
  .mcta .btn { flex: 1; }
  .ap-actions .cta-badge, .ap-actions [data-print] { display: none; }
  body { padding-bottom: 72px; }
  .totop { bottom: 84px; }
}

/* ---------- 모바일·태블릿 타이틀 ---------- */
@media (max-width: 959px) {
  .ap-title { display: block; }
  .ap-portrait { position: relative; top: auto; width: auto; height: auto; }
  .ap-portrait__btn { height: auto; padding: 0; }
  .ap-portrait__fig { height: auto; display: block; }
  .ap-portrait__fig { height: auto; aspect-ratio: 4 / 5; }
  .ap-portrait__num { bottom: 12px; left: 12px; background: rgba(var(--scrim), .7); padding: 4px 8px; border-radius: 2px; }
  .ap-col { padding-left: 0; }
  .ap-hero { min-height: 0; padding: 28px var(--gutter) 40px; gap: 20px; }
  .ap-sec { padding-left: var(--gutter); padding-right: var(--gutter); }
  .ap-intro { font-size: 1.125rem; }
}

/* ---------- 동작 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  .seq > span { transform: none; transition: opacity .25s; }
  .ap-portrait__img, .ap-portrait__fig.is-developed .ap-portrait__img.is-on { transition: opacity .25s; }
  .ap-portrait__fig.is-developing .ap-portrait__img.is-on { filter: none; opacity: .4; }
  .bars__track i { width: var(--w); transition: none; }
  .lightbox__fig img { transition: opacity .2s !important; }
}

/* ---------- 인쇄: 프로필 컴카드 (A4, 흰 바탕) ---------- */
.compcard { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff !important; color: #111 !important; padding: 0 !important; height: auto !important; }
  body > *:not(main), .sub > *:not(.compcard) { display: none !important; }
  .sub { padding: 0 !important; }
  .compcard { display: block !important; color: #111; font-family: var(--font-kr); font-size: 10.5pt; line-height: 1.5; }
  .compcard__head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #111; padding-bottom: 5mm; margin-bottom: 6mm; }
  .compcard__head img { height: 15mm; width: auto; }
  .compcard__head span { font-family: var(--font-en); font-weight: 700; letter-spacing: .1em; font-size: 11pt; }
  .compcard__top { display: grid; grid-template-columns: 62mm 1fr; gap: 8mm; align-items: start; }
  .compcard__photo { width: 62mm; height: auto; }
  .compcard__info h1 { font-size: 26pt; font-weight: 750; margin: 0 0 2mm; letter-spacing: -.02em; line-height: 1.1; }
  .compcard__en { font-family: var(--font-en); font-size: 13pt; color: #555; margin: 0 0 3mm; }
  .compcard__intro { font-weight: 600; font-size: 11pt; margin: 0 0 4mm; }
  .compcard dl { display: block; border-top: 1px solid #ddd; margin: 0; }
  .compcard dl > div { display: grid; grid-template-columns: 22mm 1fr; gap: 3mm; padding: 1.6mm 0; border-bottom: 1px solid #ddd; }
  .compcard dt { color: #777; }
  .compcard dd { margin: 0; }
  .compcard__bio { margin-top: 4mm; font-size: 9.5pt; line-height: 1.6; color: #333; }
  .compcard__bio p + p { margin-top: 1.5mm; }
  .compcard__filmo { margin-top: 8mm; }
  .compcard__filmo h2 { font-family: var(--font-en); font-size: 12pt; letter-spacing: .06em; border-bottom: 1px solid #111; padding-bottom: 2mm; margin: 0 0 3mm; }
  .compcard__cols { column-count: 2; column-gap: 8mm; font-size: 8.5pt; line-height: 1.45; }
  .compcard__cols h3 { font-size: 9.5pt; margin: 3mm 0 1mm; break-after: avoid; }
  .compcard__cols ul { margin: 0; padding: 0; list-style: none; }
  .compcard__cols li { break-inside: avoid; }
  .compcard__cols li span { display: inline-block; width: 9mm; color: #777; font-family: var(--font-en); }
  .compcard__foot { margin-top: 6mm; padding-top: 3mm; border-top: 1px solid #111; display: flex; gap: 4mm; flex-wrap: wrap; font-size: 8.5pt; color: #333; }
}

/* ---------- 모바일: 포트레이트 자동 넘김(3초) + 터치 드래그 넘기기 (현상 모티프) ---------- */
@media (max-width: 959px) {
  /* 세로 스크롤은 그대로, 가로 드래그는 사진 넘기기에 쓴다 */
  .ap-portrait__btn { touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
  .ap-portrait__img { -webkit-user-drag: none; user-select: none; }
  /* 자동: 나가는 컷은 천천히 사라지고, 들어오는 컷은 어둡고 흐린 흑백에서 원본으로 떠오른다 */
  .ap-portrait.is-auto .ap-portrait__fig .ap-portrait__img { transition: opacity .9s var(--ease-quart), filter 1.2s var(--ease-quart), transform .5s var(--ease-out); }
  /* 들어오기 직전 상태(선택자에 img 를 붙여 아래 전환 규칙보다 우선) */
  .ap-portrait .ap-portrait__fig img.ap-portrait__img.is-pre { opacity: 0; filter: grayscale(1) brightness(.35) contrast(1.3) blur(2px); transform: translateX(var(--sx, 0px)); transition: none; }
  /* 손으로 넘길 때: 같은 현상 효과를 더 빠르게, 넘긴 방향에서 살짝 밀려 들어온다 */
  .ap-portrait.is-swipe .ap-portrait__fig .ap-portrait__img { transition: opacity .45s var(--ease-quart), filter .6s var(--ease-quart), transform .5s var(--ease-out); }
  /* 끄는 동안: 지금 사진이 손가락을 조금 따라온다 */
  .ap-portrait.is-drag .ap-portrait__fig .ap-portrait__img.is-on { transform: translateX(var(--dx, 0px)); transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-portrait .ap-portrait__fig img.ap-portrait__img, .ap-portrait .ap-portrait__fig img.ap-portrait__img.is-pre { filter: none; transform: none; transition: opacity .25s; }
}