/* 안내 페이지 — 회사소개(/about/)·제작 과정(/process/)·자주 묻는 질문(/faq/) 공통 + 회사소개·제작 과정. 자주 묻는 질문 전용 모양은 faq.css.
   큰 첫 문장(.aw-hero) 다음, 섹션마다 왼쪽(.aw-side: 번호·머리글·제목 — 화면에 붙어 따라옴) | 오른쪽(.aw-body: 본문) 2단.
   면 상자·선·테두리 글자는 쓰지 않는다. 구분은 글자 크기·색·간격으로만 하고, 둥근 모서리는 최대 2px.
   마우스를 올리면 글자가 민트로 바뀌며 살짝 밀린다. 본문 폭은 사이트 공통 .container(위 제목 영역의 뷰파인더 틀과 같은 폭).
   aw- 회사소개·제작 과정. 동작은 info.js */
/* 본문 글자는 위 제목 영역의 큰 제목(heading.css --title: clamp(32px,4.4vw,64px), 좁은 화면 clamp(29px,7.5vw,42px))보다 크지 않게 한다. */
.info-page{--aw-gap:144px;--aw-dim:color-mix(in srgb,var(--text) 16%,transparent)}
/* 제목 영역은 다른 페이지보다 낮게. 아래 흐르는 문의 문구는 위 구분선을 빼고, 테두리 글자 대신 옅은 면 글자로(겹치는 획에 선이 생기지 않게) */
.info-page .page-heading[data-hd]{min-height:clamp(300px,40vh,440px);padding-block:72px}
.info-page .marquee{border-top:0}
.info-page .marquee-text{filter:none;opacity:.16}

.info-kicker{color:var(--mint);font:600 12px/1.5 var(--font-latin);letter-spacing:.18em;text-transform:uppercase}
.aw{padding-block:72px 120px}
.aw h3{margin:0}

/* ---------- 첫 문장 ---------- */
.aw-hero{display:grid;gap:28px}
.info-page .aw-hero-title{font-size:clamp(26px,3.4vw,52px);line-height:1.2;font-weight:700;letter-spacing:-.05em;word-break:keep-all}
.aw-hero-foot{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:end;margin-top:20px}
.aw-lead{max-width:640px;color:var(--muted);font-size:18px;line-height:1.75;word-break:keep-all}
.aw-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px;margin:0}
.aw-facts dt{margin-bottom:6px;color:var(--muted);font-size:12px;letter-spacing:.02em}
.aw-facts dd{margin:0;font-size:16px;line-height:1.55;word-break:keep-all}

/* ---------- 섹션: 왼쪽 제목(붙어 따라옴) | 오른쪽 본문 ---------- */
.aw-sec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;margin-top:var(--aw-gap)}
.aw-side{position:sticky;top:120px;align-self:start;display:grid;gap:14px}
.aw-index{color:var(--muted);font:600 13px/1 var(--font-latin);font-variant-numeric:tabular-nums}
.info-page .aw-side h2{font-size:clamp(26px,2.4vw,38px);line-height:1.3;font-weight:700;letter-spacing:-.035em;word-break:keep-all}
.aw-body{min-width:0;margin:0;padding:0;list-style:none}
/* 왼쪽 제목 아래 짧은 설명 */
.aw-side-desc{max-width:420px;color:var(--muted);font-size:16px;line-height:1.75;word-break:keep-all}
.aw-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.aw-list li{position:relative;padding-left:18px;color:color-mix(in srgb,var(--text) 86%,transparent);font-size:16px;line-height:1.65;word-break:keep-all}
.aw-list li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--mint)}

/* 큰 영문(EXPERT · AI): 평소엔 옅게, 마우스를 올리면 민트 */
.aw-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.aw-giant{color:var(--aw-dim);font:800 clamp(28px,4vw,60px)/.9 var(--font-latin);letter-spacing:-.05em;transition:color .5s,translate .7s var(--ease-out)}
.aw-duo-item:hover .aw-giant{color:var(--mint);translate:12px 0}
.aw-duo-item h3{margin:20px 0 16px;font-size:24px;line-height:1.35;font-weight:700;letter-spacing:-.02em}

/* 번호 · 제목 · 설명 줄 목록(가치) */
.aw-items{display:grid;gap:8px}
.aw-item{display:grid;grid-template-columns:72px minmax(0,5fr) minmax(0,6fr);gap:24px;align-items:baseline;padding-block:28px}
.aw-item-no{color:var(--mint);font:600 14px/1 var(--font-latin)}
.aw-item h3{font-size:clamp(22px,2.2vw,34px);line-height:1.25;font-weight:700;letter-spacing:-.035em;word-break:keep-all;transition:color .35s,translate .6s var(--ease-out)}
.aw-item p{color:var(--muted);font-size:16px;line-height:1.75;word-break:keep-all;transition:color .35s}
.aw-item:hover h3{color:var(--mint);translate:12px 0}
.aw-item:hover p{color:var(--text)}

/* 연혁: 해는 크게 옅게, 화면 가운데를 지나는 해(.is-current)는 민트 */
.aw-history{display:grid;gap:56px}
.aw-year{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start}
.aw-year-num{position:sticky;top:120px;color:var(--aw-dim);font:800 clamp(28px,3.4vw,52px)/.9 var(--font-latin);letter-spacing:-.05em;transition:color .5s}
.aw-year.is-current .aw-year-num{color:var(--mint)}
.aw-year ul{display:grid;gap:22px;margin:0;padding:6px 0 0;list-style:none}
.aw-year ul li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:baseline}
.aw-month{color:var(--mint);font:600 13px/1.6 var(--font-latin)}
.aw-history-text{font-size:18px;line-height:1.5;font-weight:600;letter-spacing:-.02em;word-break:keep-all}
.aw-history-desc{margin-top:4px;color:var(--muted);font-size:14px;line-height:1.6;word-break:keep-all}

/* 연혁 작은 필름(왼쪽 제목 아래): 해마다 한 칸. 지금 해(.is-on)가 가운데로 넘어오며 민트로 켜진다(info.js가 --i). 필름 구멍은 선 없이 배경색 면 */
.aw-minifilm{--f:92px;position:relative;overflow:hidden;margin-top:28px;padding-block:16px;border-radius:2px;background:color-mix(in srgb,var(--text) 6%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.aw-minifilm::before,.aw-minifilm::after{content:"";position:absolute;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg,var(--bg) 0 8px,transparent 8px 18px)}
.aw-minifilm::before{top:5px}
.aw-minifilm::after{bottom:5px}
.aw-minifilm-track{display:flex;gap:6px;margin:0;padding:0 calc(50% - var(--f) / 2);list-style:none;transform:translateX(calc(var(--i) * (var(--f) + 6px) * -1));transition:transform .7s var(--ease-out)}
.aw-minifilm-track li{flex:0 0 var(--f);height:60px;display:grid;place-content:center;justify-items:center;gap:2px;border-radius:2px;background:var(--bg);transition:background .5s}
.aw-minifilm-track b{color:var(--aw-dim);font:700 20px/1 var(--font-latin);letter-spacing:-.03em;transition:color .5s}
.aw-minifilm-track span{color:var(--muted);font-size:11px;opacity:.5;transition:opacity .5s}
.aw-minifilm-track li.is-on{background:color-mix(in srgb,var(--mint) 10%,var(--bg))}
.aw-minifilm-track li.is-on b{color:var(--mint)}
.aw-minifilm-track li.is-on span{opacity:1}

/* 큰 글자 링크 목록(서비스): 이름이 밀리며 민트로, 설명이 또렷해지고 화살표가 움직인다 */
.aw-links{display:grid;gap:4px}
.aw-links a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) 48px;gap:24px;align-items:center;padding-block:16px}
.aw-link-name{font-size:clamp(26px,3.2vw,48px);line-height:1.1;font-weight:700;letter-spacing:-.05em;transition:color .35s,translate .6s var(--ease-out)}
.aw-link-meta{display:grid;gap:6px;color:var(--muted);font-size:15px;line-height:1.55;word-break:keep-all;opacity:.6;transition:opacity .35s,color .35s}
.aw-link-meta span{font:600 11px/1.5 var(--font-latin);letter-spacing:.16em}
.aw-link-go{justify-self:end;font:300 28px/1 var(--font-latin);transition:translate .5s var(--ease-out),color .35s}
.aw-links a:hover .aw-link-name{color:var(--mint);translate:20px 0}
.aw-links a:hover .aw-link-meta{opacity:1;color:var(--text)}
.aw-links a:hover .aw-link-go{color:var(--mint);translate:8px 0}

/* ---------- 제작 과정 ---------- */
/* 왼쪽 아이콘: 지금 단계의 아이콘만 보이고, 바뀔 때 기울어진 채 작게 사라졌다 커지며 나타난다. 선 없이 민트 면, 안쪽 무늬는 배경색으로 뚫는다 */
.aw-step-visual{display:flex;align-items:center;gap:28px;margin-top:36px}
.aw-step-now{display:grid;gap:10px}
.aw-icons{position:relative;flex:none;width:clamp(88px,7vw,112px);aspect-ratio:1}
.aw-icon{position:absolute;inset:0;width:100%;height:100%;fill:var(--mint);opacity:0;scale:.55;rotate:-16deg;transition:opacity .4s,scale .6s var(--ease-out),rotate .6s var(--ease-out)}
.aw-icon.is-on{opacity:1;scale:1;rotate:0deg}
.aw-icon-cut{fill:var(--bg)}
.aw-step-now-name{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
/* 단계 목록: 지금 단계는 밝게 + 민트 점, 누르면 그 단계로 이동 */
.aw-step-nav{display:grid;justify-items:start;gap:2px;margin:36px 0 0;padding:0;list-style:none}
.aw-step-nav a{display:flex;align-items:center;gap:14px;padding-block:8px;color:var(--muted);font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.02em;transition:color .3s,translate .5s var(--ease-out)}
.aw-step-nav a span{font:600 12px/1 var(--font-latin);letter-spacing:.04em;transition:color .3s}
.aw-step-nav a::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);opacity:0;scale:0;transition:opacity .3s,scale .4s var(--ease-out)}
.aw-step-nav a:hover{color:var(--text)}
.aw-step-nav a.is-on{color:var(--text);translate:8px 0}
.aw-step-nav a.is-on span{color:var(--mint)}
.aw-step-nav a.is-on::after{opacity:1;scale:1}
.aw-counter{display:flex;align-items:baseline;gap:8px;font-family:var(--font-latin);letter-spacing:-.05em}
.aw-counter b{color:var(--text);font-size:clamp(28px,4vw,60px);line-height:.8;font-weight:800;font-variant-numeric:tabular-nums}
.aw-counter span{color:var(--muted);font-size:18px;letter-spacing:0}
.aw-counter.is-bump b{animation:aw-bump .55s var(--ease-out)}
@keyframes aw-bump{from{opacity:0;translate:0 28px}}
/* 오른쪽 단계: 제목·설명·결과물 | 준비할 것·스튜디오가 하는 일. 지금 단계만 또렷하고 나머지는 옅다 */
.aw-steps{display:grid;gap:0}
.aw-step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:start;padding-block:8px 72px;scroll-margin-top:120px}
.aw-step-main{display:grid;gap:14px}
.aw-step>*{transition:opacity .5s}
.aw-steps.is-live .aw-step:not(.is-current)>*{opacity:.3}
.aw-step-no{display:flex;gap:14px;align-items:baseline;color:var(--muted);font:600 12px/1.5 var(--font-latin);letter-spacing:.18em}
.aw-step-no span:first-child{color:var(--mint);font-size:14px;letter-spacing:.04em}
.aw-step h3{font-size:clamp(24px,2.8vw,44px);line-height:1.1;font-weight:700;letter-spacing:-.045em}
.aw-step-desc{color:var(--muted);font-size:18px;line-height:1.75;word-break:keep-all}
.aw-step-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:34px 0 0}
.aw-step-detail dt{margin-bottom:10px;color:var(--muted);font-size:12px;font-weight:600}
.aw-step-detail dd{margin:0}
.aw-step-detail .aw-list li{font-size:15px}
.aw-output{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:6px;color:var(--mint);font-size:16px;font-weight:600;line-height:1.6;word-break:keep-all}
.aw-output span{color:var(--muted);font-size:12px}
/* 납품 형식: 같은 높이의 민트 도형, 폭만 비율대로 */
.aw-ratios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.aw-ratio{display:flex;flex-direction:column;gap:6px}
.aw-ratio-shape{display:block;align-self:flex-start;height:96px;max-width:100%;margin-bottom:22px;border-radius:2px;background:color-mix(in srgb,var(--mint) 22%,transparent);transition:background .4s,translate .6s var(--ease-out)}
.aw-ratio-shape.is-stack{width:64px;height:76px;margin-top:20px;box-shadow:12px -10px 0 color-mix(in srgb,var(--mint) 13%,transparent),24px -20px 0 color-mix(in srgb,var(--mint) 7%,transparent)}
.aw-ratio:hover .aw-ratio-shape{background:var(--mint);translate:0 -6px}
.aw-ratio strong{font:700 30px/1.1 var(--font-latin);letter-spacing:-.03em}
.aw-ratio-name{color:var(--mint);font-size:13px;font-weight:600}
.aw-ratio p{margin-top:4px;color:var(--muted);font-size:15px;line-height:1.6;word-break:keep-all}

/* ---------- 태블릿 ---------- */
@media(max-width:1199px){
  .info-page{--aw-gap:104px}
  .aw{padding-block:56px 96px}
  .aw-hero-foot{grid-template-columns:1fr;gap:32px}
  .aw-sec{grid-template-columns:1fr;gap:36px}
  .aw-side{position:static}
  .aw-step-visual,.aw-step-nav,.aw-minifilm{display:none}
  .aw-step{grid-template-columns:1fr;gap:0}
  .aw-step-detail{margin-top:24px}
  .aw-steps.is-live .aw-step:not(.is-current)>*{opacity:1}
  .aw-item{grid-template-columns:56px minmax(0,1fr);gap:10px 16px}
  .aw-item p{grid-column:2}
  .aw-year{grid-template-columns:140px minmax(0,1fr)}
  .aw-links a{grid-template-columns:minmax(0,1fr) 40px;gap:6px 20px}
  .aw-link-meta{grid-column:1;grid-row:2;opacity:1}
  .aw-link-go{grid-column:2;grid-row:1/3}
  .aw-ratios{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
}

/* ---------- 모바일 ---------- */
@media(max-width:599px){
  .info-page{--aw-gap:80px}
  .info-page .page-heading[data-hd]{min-height:280px;padding-block:56px}
  .aw{padding-block:40px 72px}
  .info-page .aw-hero-title{font-size:26px}
  .aw-lead{font-size:16px}
  .aw-facts{grid-template-columns:1fr;gap:16px}
  .aw-duo{grid-template-columns:1fr;gap:48px}
  .aw-giant{font-size:28px}
  .aw-item{grid-template-columns:36px minmax(0,1fr);padding-block:20px}
  .aw-item h3{font-size:21px}
  .aw-item p{font-size:15px}
  .aw-history{gap:44px}
  .aw-year{grid-template-columns:1fr;gap:16px}
  .aw-year-num{position:static;font-size:28px}
  .aw-history-text{font-size:16px}
  .aw-links a{padding-block:12px}
  .aw-link-name{font-size:26px}
  .aw-link-go{font-size:22px}
  .aw-step{padding-bottom:64px}
  .aw-step h3{font-size:24px}
  .aw-step-desc{font-size:16px}
  .aw-step-detail{grid-template-columns:1fr;gap:20px}
  .aw-ratios{gap:36px 20px}
  .aw-ratio-shape{height:64px}
  .aw-ratio-shape.is-stack{width:44px;height:52px}
  .aw-ratio strong{font-size:22px}
  .aw-ratio p{font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  .aw-step>*,.aw-icon,.aw-step-nav a,.aw-minifilm-track,.aw-minifilm-track *{transition:none}
}