/* =========================================================
   ENJO ABOUT — 페이지 콘텐츠 스킨
   ENJO 레이아웃의 색·서체 변수를 따르고, 없으면 기본값을 씁니다.
   ========================================================= */
.ej-about{
  --a-ink:var(--ink,#1a1a1a);--a-sub:var(--sub,#6e6e6c);--a-line:var(--line,#d8d8d5);--a-bg2:var(--bg-alt,#f3f3f1);
  --a-sans:var(--sans,'Jost','Noto Sans KR','Helvetica Neue',Arial,sans-serif);
  --a-sec:var(--sec,110px);--a-hd:var(--hd-h,72px);
  --a-display:clamp(44px,5.4vw,76px);--a-small:var(--fs-small,11px);--a-body:var(--fs-body,13px);
  color:var(--a-ink);font-family:var(--a-sans);font-weight:300;padding-block:var(--a-sec)
}
.ej-about *{box-sizing:border-box}
.ej-about :is(h1,h2,h3,p,ul,li){margin:0;padding:0;list-style:none}
.ej-about img{display:block;max-width:100%}
.ej-about a{color:inherit;text-decoration:none}
.ej-about .ab-wrap{max-width:1440px;margin:0 auto}
@media (max-width:1519px){.ej-about .ab-wrap{padding:0 40px}}

/* 상단 제목 — 줄마다 아래에서 떠오름 */
.ej-about .no{font-size:var(--a-small);letter-spacing:.14em}
.ej-about .big{font-weight:300;font-size:var(--a-display);line-height:1;letter-spacing:.01em}
.ej-about .bar{display:block;width:26px;height:1px;background:currentColor}
.ej-about .cap{font-size:var(--a-small);letter-spacing:.26em;line-height:1.9;font-weight:400}
.ej-about .q{font-size:clamp(20px,1.8vw,24px);line-height:1.55;word-break:keep-all}
.ab-head{display:grid;gap:22px;justify-items:start;padding-bottom:80px;margin-bottom:80px;border-bottom:1px solid var(--a-line)}
.ej-about .m{display:block;overflow:hidden}
.ej-about .m>span{display:block;transition:transform 1.1s cubic-bezier(.2,.7,.1,1)}
.ab-head.hide .m>span{transform:translateY(110%);transition:none}
.ab-head>.bar{transform-origin:left;transition:transform 1.1s .5s cubic-bezier(.2,.7,.1,1)}
.ab-head.hide>.bar{transform:scaleX(0);transition:none}

/* 본문 — 왼쪽 사진 고정, 오른쪽 내용 스크롤 */
.ej-about .ab{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:start}
.ej-about .ab>*{min-width:0}
.ab-side{position:sticky;top:calc(var(--a-hd) + 48px);display:grid;gap:22px}
.ab-side .ph{aspect-ratio:4/5;overflow:hidden;background:var(--a-bg2)}
.ab-side .ph img{width:100%;height:100%;object-fit:cover}
.ab-name{font-size:clamp(24px,2.2vw,30px);font-weight:300;letter-spacing:.1em}
.ab-side .cap{margin-top:-10px}
.ab-nav{display:grid;gap:10px;margin-top:18px;padding-top:22px;border-top:1px solid var(--a-line)}
.ab-nav a{display:flex;gap:16px;font-size:var(--a-small);letter-spacing:.2em;color:var(--a-sub);transition:color .4s}
.ab-nav a span{width:22px;font-variant-numeric:tabular-nums}
.ab-nav a.on,.ab-nav a:hover{color:var(--a-ink)}
.ab-flow{display:grid;gap:110px}
.ab-sec{scroll-margin-top:120px}
.ab-h{display:grid;gap:14px;margin-bottom:32px}
.ab-h h2{font-size:12px;font-weight:400;letter-spacing:.26em}
.ej-about .ko{font-size:15px;line-height:1.85;word-break:keep-all}
.ej-about .en{font-size:var(--a-body);line-height:1.75;color:var(--a-sub)}
.ej-about .ko+.ko,.ej-about .en+.en{margin-top:18px}
.ej-about .ko+.en{margin-top:32px}
.ab-list{display:grid;gap:12px}
.ab-list li{display:grid;grid-template-columns:72px 1fr;gap:16px;font-size:14px;word-break:keep-all}
.ab-list li span{font-variant-numeric:tabular-nums;color:var(--a-sub)}
.ab-cv h3{font-size:10px;font-weight:400;letter-spacing:.26em;color:var(--a-sub);margin:32px 0 12px}
.ab-cv .ab-h+h3{margin-top:0}
.ej-about a:focus-visible{outline:1px solid var(--a-ink);outline-offset:4px}

@media (max-width:900px){
  .ej-about{--a-sec:72px}
  .ej-about .ab-wrap{padding:0 24px}
  .ab-head{padding-bottom:56px;margin-bottom:56px}
  .ej-about .ab{grid-template-columns:1fr;gap:48px}
  .ab-side{position:static}
  .ab-nav{display:none}
  .ab-flow{gap:72px}
}
@media (prefers-reduced-motion:reduce){.ej-about .m>span,.ab-head>.bar{transition:none!important}}