/* ==========================================================================
   KWorks ENT · 공통 스타일 (토큰 · 기본 · 헤더 · 푸터 · 컴포넌트)
   기획 MD v1.2 8장(디자인 시스템) 기준. 대시 계열 문자 사용 금지.
   ========================================================================== */
:root {
  --bg: #0B0B0C;
  --surface: #141416;
  --card: #1B1B1E;
  --line: #2A2A2E;
  --line-strong: #3A3A40;
  --text: #F5F5F2;
  --text-2: #C8C8C4;
  --muted: #9A9A9E;
  --accent: #C9A24A;
  --accent-hover: #D8B25C;
  --accent-ink: #0B0B0C;
  --danger: #F0A091;
  --type-air: #7FB2FF;
  --type-film: #F2A65A;
  --type-stage: #C58BFF;
  --type-event: #6ED3A5;
  --scrim: 11, 11, 12;

  --font-kr: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-en: 'Sofia Sans Extra Condensed', 'Arial Narrow', 'Pretendard Variable', sans-serif;

  --container: 1440px;
  --gutter: clamp(20px, 4vw, 56px);
  --hd-h: 68px;
  --sec-pad: clamp(56px, 8vw, 112px);

  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* expo-out 계열 */
  --ease-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-inout: cubic-bezier(.85, 0, .15, 1);
}

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-kr);
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: .003em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; top: -100px; left: 50%; transform: translateX(-50%); z-index: 10000; padding: 10px 18px; background: var(--accent); color: var(--accent-ink); font-weight: 600; border-radius: 0 0 4px 4px; transition: top .2s; }
.skip:focus { top: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- 타이포 ---------- */
.h-display {
  font-family: var(--font-en);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(3.5rem, 9vw, 6rem);
  line-height: .86;
  letter-spacing: -.005em;
  color: var(--text);
}
.h-section {
  font-family: var(--font-en);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  line-height: .9;
  color: var(--text);
}
.lead {
  font-weight: 600;
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--text);
}
.desc { color: var(--text-2); font-size: 1rem; line-height: 1.65; }
.num { font-family: var(--font-en); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* 섹션 머리: 영문 헤딩 왼쪽, 국문 리드 오른쪽 하단 정렬 */
.sec { position: relative; padding: var(--sec-pad) 0; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); }
.sec__title { display: flex; flex-direction: column; gap: 14px; }
.sec__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 22px; max-width: 520px; text-align: right; }
/* 모바일: 제목 왼쪽, 링크는 같은 줄 오른쪽 */
@media (max-width: 767px) {
  .sec__head { flex-wrap: nowrap; gap: 12px; }
  .sec__aside { flex: 0 0 auto; max-width: none; }
}
@media (max-width: 359px) { .sec__aside .roll-btn { gap: 8px; font-size: .9375rem; } }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px;
  font-weight: 600; font-size: .9375rem; line-height: 1; white-space: nowrap;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--line { border: 1px solid var(--line-strong); color: var(--text); }
.btn--line:hover { border-color: var(--text); }
.btn--quiet { color: var(--text-2); }
.btn--quiet:hover { background: var(--surface); color: var(--text); }

/* 롤 버튼 (제니하우스 .roll_btn 이식): 글자가 위로 굴러가고 화살표가 교체됨 */
.roll-btn {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  height: 40px; color: var(--text); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em;
}
.roll-btn__txt { position: relative; height: 100%; overflow: hidden; }
.roll-btn__box { display: block; height: 100%; position: relative; transform: translate3d(0, 0, 0); transition: transform .32s cubic-bezier(.22, 1, .36, 1); }
.roll-btn__box span { display: block; height: 100%; display: flex; align-items: center; }
.roll-btn__box span:last-child { position: absolute; top: 100%; left: 0; width: 100%; }
.roll-btn__ico { position: relative; width: 30px; height: 30px; overflow: hidden; flex: 0 0 auto; border-radius: 999px; border: 1px solid var(--line-strong); transition: border-color .2s; }
.roll-btn__ico svg { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; stroke: currentColor; transition: transform .32s cubic-bezier(.22, 1, .36, 1); }
.roll-btn__ico svg + svg { transform: translate(-100%, 100%); }
.roll-btn:hover .roll-btn__box { transform: translate3d(0, -100%, 0); }
.roll-btn:hover .roll-btn__ico { border-color: var(--text); }
.roll-btn:hover .roll-btn__ico svg:first-child { transform: translate(100%, -100%); }
.roll-btn:hover .roll-btn__ico svg + svg { transform: translate(0, 0); }
.roll-btn--accent { color: var(--accent); }
.roll-btn--accent .roll-btn__ico { border-color: rgba(201, 162, 74, .5); }

/* 칩 */
.chip { display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0; height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .875rem; font-weight: 500; color: var(--text-2); }
.chip--on { background: var(--text); color: var(--bg); border-color: var(--text); }
button.chip { transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { button.chip:not(.chip--on):not(.is-on):hover { border-color: var(--text-2); color: var(--text); } }
.chip--sample { height: 22px; padding: 0 8px; font-size: .75rem; color: var(--muted); border-color: var(--line-strong); vertical-align: middle; margin-right: 8px; }

.note { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .875rem; }

/* 일정 유형 색 사각형 (항상 텍스트와 함께) */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: 0; background: var(--muted); }
.dot--air { background: var(--type-air); }
.dot--film { background: var(--type-film); }
.dot--stage { background: var(--type-stage); }
.dot--event { background: var(--type-event); }

/* 이미지 자리(생성 이미지 미제작): surface 바탕 + 좌하단 캡션 */
.slot { position: relative; background: var(--surface); }
.slot__cap { position: absolute; left: 12px; bottom: 10px; z-index: 2; font-family: var(--font-en); font-weight: 600; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: rgba(var(--scrim), .72); padding: 4px 8px; border-radius: 2px; pointer-events: none; display: none; }
.slot.is-fallback .slot__cap, .slot.is-empty .slot__cap { display: block; }

/* 현상(Darkroom Develop): 어둠에서 원본으로 */
.develop img { filter: grayscale(1) brightness(.22) contrast(1.45) blur(3px); transition: filter 1400ms var(--ease-quart); will-change: filter; }
.develop.is-dev img { filter: none; }
.develop--sub img { transition-delay: 200ms; }

/* 등장(페이드업): 섹션 머리 등 제한된 곳에만 */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-quart), transform .7s var(--ease-quart); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }

/* ---------- 헤더 ---------- */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: var(--hd-h); background: transparent; border-bottom: 1px solid transparent; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out); }
.hd.is-solid { background: var(--bg); }
.hd.is-solid.is-scrolled { border-bottom-color: var(--line); }
.hd__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hd__logo { display: block; height: 52px; flex: 0 0 auto; }
.hd__logo img { height: 100%; width: auto; }
.gnb { flex: 1 1 auto; display: flex; justify-content: center; }
.gnb__list { display: flex; gap: clamp(20px, 2.6vw, 40px); }
.gnb__link { position: relative; display: block; padding: 8px 2px; font-family: var(--font-en); font-weight: 700; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); line-height: 1; transition: color .2s var(--ease-out); }
.gnb__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .28s var(--ease-out); }
.gnb__link[aria-current] { color: var(--text); }
.gnb__link[aria-current]::after { transform: scaleX(1); transform-origin: left; }
/* 글자 롤 */
.roll { display: block; height: 1em; overflow: hidden; position: relative; line-height: 1; }
.roll > span { display: block; transition: transform .36s cubic-bezier(.16, 1, .3, 1); }
.roll > span + span { position: absolute; left: 0; top: 100%; width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .gnb__link:hover, .gnb__link:focus-visible { color: var(--text); }
  .gnb__link:hover::after, .gnb__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
  .gnb__link:hover .roll > span, .gnb__link:focus-visible .roll > span { transform: translateY(-100%); }
  .gnb__list:hover .gnb__link:not(:hover) { color: var(--muted); }
}
.hd__util { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.hd__search { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: var(--text); transition: background-color .18s; }
.hd__search:hover { background: rgba(255, 255, 255, .06); }
.hd__search svg { width: 22px; height: 22px; }

/* 캐스팅 문의 배지: 원형 채움 + 글자 롤 + 자석 + 누름 */
.cta-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .9375rem; overflow: hidden; isolation: isolate; transform: translate(var(--mx, 0), var(--my, 0)) scale(var(--press, 1)); transition: transform .4s var(--ease-out); }
.cta-badge__fill { position: absolute; inset: 0; z-index: -1; background: var(--text); clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); transition: clip-path .42s var(--ease-out); }
.cta-badge .roll { height: 1.1em; }
.cta-badge .roll > span { transition-duration: .3s; }
@media (hover: hover) and (pointer: fine) {
  .cta-badge:hover .cta-badge__fill, .cta-badge:focus-visible .cta-badge__fill { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
  .cta-badge:hover .roll > span, .cta-badge:focus-visible .roll > span { transform: translateY(-100%); }
}
.cta-badge:active { --press: .97; transition-duration: .1s; }

.hd__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.hd__burger span { display: block; width: 22px; height: 2px; background: var(--text); transition: transform .3s var(--ease-out), opacity .2s; }
.hd__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 전체 메뉴 */
.mmenu { position: fixed; inset: var(--hd-h) 0 0 0; z-index: 890; background: var(--bg); display: flex; flex-direction: column; justify-content: space-between; padding: 24px var(--gutter) 32px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility 0s linear .28s; overflow-y: auto; }
.mmenu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility 0s; }
.mmenu__list a { display: block; padding: 10px 0; font-family: var(--font-en); font-weight: 800; font-size: clamp(2.75rem, 12vw, 4.5rem); line-height: 1; text-transform: uppercase; color: var(--text-2); }
.mmenu__list a[aria-current] { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.mmenu__foot { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; color: var(--muted); font-size: .875rem; }
.mmenu__foot .btn { align-self: flex-start; }
.mmenu__links { display: flex; gap: 18px; flex-wrap: wrap; }
.mmenu__links a { color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 959px) {
  .gnb, .hd__search, .hd .cta-badge { display: none; }
  .hd__burger { display: flex; }
  .hd__logo { height: 44px; }
}
@media (min-width: 960px) { .mmenu { display: none; } }

/* ---------- 푸터 ---------- */
.ft { border-top: 1px solid var(--line); padding: clamp(40px, 5vw, 64px) 0 32px; color: var(--text-2); font-size: .875rem; }
/* 로고는 푸터 윗선과 정보 영역 윗선 사이 세로 가운데: 위 여백(.ft padding-top)과 아래 여백을 같은 값으로 둔다 */
.ft__brand { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 clamp(40px, 5vw, 64px); }
.ft__brand img { height: 96px; width: auto; }
.ft__brand strong { font-family: var(--font-en); font-weight: 700; font-size: 1.375rem; letter-spacing: .02em; color: var(--text); }
.ft__brand span { color: var(--muted); }
.ft__grid { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.ft__info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 32px; }
.ft__info div { display: flex; gap: 12px; }
.ft__info dt { color: var(--muted); flex: 0 0 4.5rem; }
.ft__info dd { margin: 0; }
.ft__links { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.ft__links a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.ft__links a:hover { text-decoration-color: var(--accent); }
.ft__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
.ft__legal a { color: var(--text-2); }
@media (max-width: 767px) {
  .ft__grid { grid-template-columns: 1fr; }
  .ft__links { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
}

/* ---------- 맨 위로 · 토스트 ---------- */
.totop { position: fixed; right: 20px; bottom: 24px; z-index: 850; width: 52px; height: 52px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(var(--scrim), .8); color: var(--text); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s var(--ease-out), visibility 0s linear .25s, border-color .2s; }
.totop.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s var(--ease-out), visibility 0s; }
.totop:hover { border-color: var(--text); }
.totop svg { width: 20px; height: 20px; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 950; transform: translateX(-50%) translateY(12px); padding: 12px 20px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-strong); color: var(--text); font-size: .9375rem; opacity: 0; visibility: hidden; transition: opacity .2s, transform .35s var(--ease-out), visibility 0s linear .35s; }
.toast.is-on { opacity: 1; visibility: visible; transform: translateX(-50%); transition: opacity .2s, transform .35s var(--ease-out), visibility 0s; }

/* ---------- 동작 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  .develop img { filter: none; opacity: .4; transition: opacity .4s; }
  .develop.is-dev img { opacity: 1; }
  [data-reveal] { transform: none; transition: opacity .25s; }
  .roll > span, .roll-btn__box, .roll-btn__ico svg, .cta-badge, .cta-badge__fill { transition: none !important; }
  .cta-badge { --mx: 0 !important; --my: 0 !important; }
  .gnb__link:hover .roll > span, .cta-badge:hover .roll > span { transform: none; }
  .cta-badge:hover { background: var(--accent-hover); }
  .cta-badge:hover .cta-badge__fill { clip-path: circle(0 at 50% 50%); }
}

/* ---------- 콜시트 · 뉴스 카드 (메인·서브 공통) ---------- */
/* ---------- SCHEDULE: 콜시트 ---------- */
.callsheet { border-top: 1px solid var(--line); }
.callsheet__row { display: grid; grid-template-columns: 110px 90px 140px 120px 1fr auto; align-items: center; gap: 16px; padding: 18px 8px; border-bottom: 1px solid var(--line); transition: background-color .2s; }
.callsheet__row:hover { background: var(--surface); }
.callsheet__date { display: flex; align-items: baseline; gap: 8px; }
.callsheet__date .num { font-size: 1.75rem; line-height: 1; }
.callsheet__date .dow { color: var(--muted); font-size: .875rem; }
.callsheet__time { font-family: var(--font-en); font-weight: 600; font-size: 1.125rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.callsheet__type { font-size: .9375rem; color: var(--text-2); white-space: nowrap; }
.callsheet__artist a { font-weight: 600; border-bottom: 1px solid var(--line-strong); transition: border-color .2s; }
.callsheet__artist a:hover { border-color: var(--accent); }
.callsheet__work { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.callsheet__work strong { font-weight: 700; font-size: 1.0625rem; }
.callsheet__work span { color: var(--muted); font-size: .875rem; }
.callsheet__flag { justify-self: end; }
@media (max-width: 959px) {
  .callsheet__row { grid-template-columns: 96px 1fr auto; grid-template-areas: "date work flag" "date meta meta"; gap: 6px 14px; padding: 16px 4px; }
  .callsheet__date { grid-area: date; flex-direction: column; gap: 2px; }
  .callsheet__work { grid-area: work; }
  .callsheet__flag { grid-area: flag; }
  .callsheet__time, .callsheet__type, .callsheet__artist { grid-area: meta; }
  .callsheet__meta { grid-area: meta; display: flex; gap: 14px; flex-wrap: wrap; font-size: .875rem; color: var(--text-2); }
}

/* ---------- NEWS: 이미지 카드 ---------- */
.newsgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.newscard { display: flex; flex-direction: column; gap: 14px; }
.newscard__img { position: relative; border-radius: 2px; overflow: hidden; background: var(--surface); outline: 1px solid transparent; outline-offset: -1px; transition: outline-color .2s; }
.newscard__img img { width: 100%; height: auto; }
.newscard__img .slot__cap { font-size: .75rem; }
.newscard:hover .newscard__img, .newscard:focus-visible .newscard__img { outline-color: var(--line-strong); }
.newscard__meta { display: flex; gap: 0; font-size: .8125rem; color: var(--muted); }
.newscard__meta span + span { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line-strong); }
.newscard__meta .num { font-size: .875rem; }
.newscard__title { font-weight: 650; font-size: 1.125rem; line-height: 1.4; letter-spacing: -.01em; }
.newscard__title .u { border-bottom: 2px solid transparent; transition: border-color .2s; }
.newscard:hover .newscard__title .u { border-bottom-color: var(--accent); }
@media (max-width: 1199px) { .newsgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .newscard__title { font-size: .9375rem; } .newscard { gap: 10px; } }

/* 콜시트 보조 정보: 칸을 나눈 구조(가운뎃점으로 잇지 않음) */
.callsheet__sub { display: flex; flex-wrap: wrap; }
.callsheet__sub span + span { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line-strong); }
.callsheet__meta { display: contents; }
@media (max-width: 959px) { .callsheet__meta { display: flex; } }

/* ---------- 배우 카드 (홈 첫 화면 · 아티스트 목록 · 검색 공통): 사진 + 이름만 ---------- */
/* 격자: 모바일 2열, 태블릿 3열. agrid--4 는 PC 4열(아티스트 목록) */
.agrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
.acard { display: block; }
.acard__frame { position: relative; display: block; aspect-ratio: 2 / 3; background: var(--surface); border-radius: 2px; overflow: hidden; outline: 1px solid transparent; outline-offset: -1px; transition: outline-color .2s; }
.acard__frame img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 20%; }
.acard__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 12px; }
.acard__ko { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.02em; }
.acard__ko .u { border-bottom: 2px solid transparent; transition: border-color .2s; }
.acard__en { font-family: var(--font-en); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; letter-spacing: .02em; color: var(--muted); }
.acard:hover .acard__frame, .acard:focus-visible .acard__frame { outline-color: var(--line-strong); }
.acard:hover .acard__ko .u, .acard:focus-visible .acard__ko .u { border-bottom-color: var(--accent); }
/* 사진은 흑백, 켜진 카드만 컬러. 마우스 기기는 커서를 올리거나 키보드 초점, 터치 기기는 화면 가운데에 가까운 줄(site.js 스포트라이트, is-spot).
   JS 가 돌지 않으면(.js 없음) 컬러 그대로. 현상 효과(.develop img)와 겹치지 않게 흑백은 감싼 틀(.acard__frame)이 맡는다. 홈 짝 강조(is-hot)는 main.css */
.js .acard__frame { filter: grayscale(1); transition: outline-color .2s, filter .45s var(--ease-out); }
.js .acard.is-spot .acard__frame, .js .acard:focus-visible .acard__frame { filter: none; }
@media (hover: hover) and (pointer: fine) { .js .acard:hover .acard__frame { filter: none; } }
/* 현상 순서: 같은 줄에서는 왼쪽부터 */
.agrid .develop img { transition-delay: calc(var(--col, 0) * 90ms); }
.agrid > li:nth-child(2n) { --col: 1; }
@media (max-width: 359px) {
  .acard__cap { gap: 0 6px; }
  .acard__ko { font-size: 1rem; }
  .acard__en { font-size: .9375rem; }
}
@media (min-width: 560px) { .agrid { gap: 36px 16px; } }
@media (min-width: 768px) {
  .agrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agrid > li:nth-child(n) { --col: 0; }
  .agrid > li:nth-child(3n+2) { --col: 1; }
  .agrid > li:nth-child(3n) { --col: 2; }
  .acard__cap { gap: 0 10px; margin-top: 14px; }
  .acard__ko { font-size: 1.1875rem; }
  .acard__en { font-size: 1.1875rem; }
}
@media (min-width: 960px) {
  .agrid { gap: 48px 24px; }
  .agrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .agrid--4 > li:nth-child(n) { --col: 0; }
  .agrid--4 > li:nth-child(4n+2) { --col: 1; }
  .agrid--4 > li:nth-child(4n+3) { --col: 2; }
  .agrid--4 > li:nth-child(4n) { --col: 3; }
}
@media (min-width: 1200px) {
  .acard__ko { font-size: 1.3125rem; }
  .acard__en { font-size: 1.25rem; }
}