/* 코쿤 홈페이지 v2 — 스위스 격자 × 기록 사진
   원칙·금지 목록: ../CLAUDE.md, ../direction/v2-plan.md
   순서: 토큰 → 기본 → 격자·글자 → 부품 → 머리 → 섹션 → 모바일 */

:root{
  --paper:#fff; --ink:#000; --red:#CD121E; --caption:#6A6A6A; --rule:#D4D4D4; --ph:#EDEDED;
  --font:"Wanted Sans Variable","Wanted Sans",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --margin:clamp(20px,4vw,64px); --gap:24px; --max:1760px; --header:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 24px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.75;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:var(--margin);top:-100px;z-index:100;padding:10px 16px;background:var(--ink);color:#fff;font-weight:700}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 격자·글자 */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);max-width:var(--max);margin:0 auto;padding:0 var(--margin)}
.h-hero{font-size:clamp(60px,10vw,192px);font-weight:700;line-height:1.06;letter-spacing:-.035em}
.h-sec{font-size:clamp(38px,4.6vw,84px);font-weight:700;line-height:1.14;letter-spacing:-.03em}
.caption{color:var(--caption);font-size:14px;font-weight:500;line-height:1.55}
.aside{align-self:end;color:var(--caption);font-size:16px;line-height:1.6}

/* 부품 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;background:var(--ink);color:#fff;font-size:17px;font-weight:700;text-decoration:none;transition:background-color .2s ease-out,color .2s ease-out}
.btn:hover{background:var(--red)}
.link{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.link:hover{color:var(--red)}
.photo img{width:100%;height:auto;object-fit:cover;background:var(--ph)}
.photo figcaption{margin-top:12px;max-width:42em}
.r32 img{aspect-ratio:3/2}.r45 img{aspect-ratio:4/5}.r169 img{aspect-ratio:16/9}.r219 img{aspect-ratio:21/9}

/* 머리 */
.site-head{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .2s ease-out}
.site-head.is-scrolled{border-bottom-color:var(--rule)}
.site-head .grid{height:var(--header);align-items:center}
.site-head__logo{grid-column:1/4;justify-self:start}
.site-head__logo img{height:22px;width:auto}
.site-nav{grid-column:4/13;display:flex;justify-content:flex-end;align-items:center;gap:32px;font-size:16px;font-weight:700}
.site-nav a:not(.btn){text-decoration:none;transition:color .2s ease-out}
.site-nav a:not(.btn):hover,.site-nav a[aria-current]{color:var(--red)}
.site-nav .btn{min-height:44px;padding:0 20px;font-size:15px}
.menu-btn{display:none;grid-column:8/13;justify-self:end;min-height:44px;padding:0 4px;border:0;background:none;font-size:16px;font-weight:700;cursor:pointer}

/* 첫 화면: 한 번만 움직임(제목이 줄마다 올라오고 영상이 나타남) */
.hero{padding-top:clamp(40px,6vw,96px)}
.hero__title{grid-column:1/13}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero__title .line > span{display:block}
.js .hero__title .line > span{transform:translateY(105%);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero__title .line:nth-child(2) > span{animation-delay:.09s}
.hero__intro{grid-column:8/13;margin-top:clamp(28px,3vw,48px);font-size:20px;font-weight:600;line-height:1.6}
.hero__media{grid-column:1/13;margin-top:clamp(48px,5vw,80px)}
.hero__media video{width:100%;aspect-ratio:21/9;object-fit:cover;background:var(--ph)}
.js .hero__media video{opacity:0;animation:appear 1.2s .35s ease-out forwards}
.hero__cap{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:12px}
.play{flex:none;min-height:32px;padding:0;border:0;background:none;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.play:hover{color:var(--red)}
@keyframes rise{to{transform:none}}
@keyframes appear{to{opacity:1}}

/* 사실 */
.facts{padding-top:clamp(120px,12vw,200px)}
.facts__text{grid-column:1/8}
.facts__sub{margin-top:18px;font-size:18px;font-weight:600;color:var(--caption)}
.facts__photo{grid-column:8/13;grid-row:1/3;align-self:end}
.facts__photo img{aspect-ratio:1/1;object-position:36% 50%} /* 무대가 원본 가운데보다 왼쪽(x≈930/2000)이라 그만큼 옮겨 가운데로 */
.figs{grid-column:1/8;align-self:end;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gap);margin-top:72px}
.figs dt{font-size:15px;font-weight:600;color:var(--caption)}
.figs dd{margin-top:4px;font-weight:700;font-size:clamp(34px,3vw,52px);line-height:1.15;letter-spacing:-.02em}
.facts__note{grid-column:1/8;margin-top:40px}
.num{font-variant-numeric:tabular-nums}

/* 두 트랙 */
.tracks{padding-top:clamp(140px,14vw,240px)}
.tracks__head{grid-column:1/10}
.track{margin-top:clamp(56px,6vw,104px);row-gap:28px}
.track__text{grid-column:1/6}
.track__photo{grid-column:7/13}
.track--b .track__text{grid-column:8/13;grid-row:1}
.track--b .track__photo{grid-column:1/7;grid-row:1}
.track__name{font-size:clamp(30px,2.8vw,48px);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.track__desc{margin-top:14px;color:var(--caption);font-weight:600}
.track__list{margin-top:28px}
.track__list li{padding:10px 0;font-size:clamp(20px,1.5vw,24px);font-weight:600;line-height:1.4;letter-spacing:-.01em}
.track__list span{display:block;margin-top:2px;color:var(--caption);font-size:15px;font-weight:500;letter-spacing:0}

/* 회사 */
.companies{padding-top:clamp(140px,14vw,240px)}
.companies__head{grid-column:1/8}
.companies__aside{grid-column:9/13}
.co-list{grid-column:1/13;margin-top:48px;border-top:2px solid var(--ink)}
.co{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:26px 0;border-bottom:1px solid var(--rule)}
.co__name{grid-column:1/5;font-size:clamp(28px,3vw,50px);font-weight:700;line-height:1.15;letter-spacing:-.02em}
.co__name img{height:clamp(56px,5vw,72px);width:auto} /* 로고 PNG: 높이 240 캔버스, 제안서 4쪽의 크기 비율 그대로 */
.co__what{grid-column:5/8}
.co__did{grid-column:8/13;font-weight:700}

/* 소식: 날짜 · 구분 · 제목 · 사진 */
.news{padding-top:clamp(140px,14vw,220px)}
.news__head{grid-column:1/8}
.news__aside{grid-column:9/13}
.news__list{grid-column:1/13;margin-top:48px;border-top:2px solid var(--ink)}
.item{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding:28px 0;border-bottom:1px solid var(--rule)}
.item__date{grid-column:1/3;font-weight:700;font-variant-numeric:tabular-nums}
.item__kind{grid-column:3/4;color:var(--caption);font-size:15px;font-weight:600;line-height:1.9}
.item__body{grid-column:4/10}
.item--text .item__body{grid-column:4/13}
.item__title{font-size:clamp(20px,1.7vw,28px);font-weight:700;line-height:1.4;letter-spacing:-.015em}
.item__meta{margin-top:6px;color:var(--caption);font-size:16px}
.item__photo{grid-column:10/13}
.item__photo img{aspect-ratio:3/2}
.item__photo--poster img{aspect-ratio:auto} /* 포스터는 자르지 않고 전체 */

/* 더 보기 링크 */
.more{grid-column:1/-1;margin-top:40px}

/* 속 페이지(트랙·소식) */
.page-head{padding-top:clamp(56px,7vw,112px)}
.page-head__title{grid-column:1/9}
.page-head__aside{grid-column:9/13}
.page-sec{padding-top:clamp(96px,10vw,168px)}
.page-sec__head{grid-column:1/9}
.page-sec__desc{grid-column:1/9;margin-top:14px;color:var(--caption);font-weight:600}
.prog-list{grid-column:1/13;margin-top:40px;border-top:2px solid var(--ink)}
.prog{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;padding:24px 0;border-bottom:1px solid var(--rule)}
.prog__name{grid-column:1/5;font-size:clamp(20px,1.7vw,26px);font-weight:700;line-height:1.35;letter-spacing:-.015em}
.prog__what{grid-column:5/10}
.prog__fact{grid-column:10/13;font-weight:700}
.pics{margin-top:48px;row-gap:40px}
.pics > :nth-child(odd){grid-column:1/8}
.pics > :nth-child(even){grid-column:9/13;align-self:end}
.page-end{margin-top:clamp(120px,12vw,200px)}
.ir{padding-bottom:clamp(96px,10vw,160px)} /* 흰 바탕 끝이라 푸터와 띄움 */
.page-cta{grid-column:1/-1;margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}

/* 함께하는 곳 */
.partners{padding:clamp(140px,12vw,200px) 0 clamp(120px,10vw,180px)}
.partners__head{grid-column:1/4;align-self:center;font-size:26px;font-weight:700;line-height:1.3}
.partners__list{grid-column:4/13;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}
.slot{aspect-ratio:2/1;display:flex;align-items:center;justify-content:center;background:var(--ph);color:var(--caption);font-size:14px}
.slot img{width:80%;height:50%;object-fit:contain} /* 칸에 맞춰 키우고 비율은 유지 */
.slot img[src$="usimsa.svg"]{width:64%} /* 굵은 글자라 눈으로 보기에 맞게 조금 작게 */
.slot:has(img){background:none} /* 로고가 들어간 칸은 회색 자리 표시 없이 */

/* 모집: 빨강은 여기 한 면에만 */
.join{padding:clamp(96px,10vw,168px) 0;background:var(--red);color:#fff}
.join__head{grid-column:1/12}
.join__text{grid-column:1/7;margin-top:40px;font-size:clamp(20px,1.6vw,26px);font-weight:700;line-height:1.5}
.join__info{grid-column:8/13;margin-top:44px}
.join__info div + div{margin-top:18px}
.join__info dt{font-weight:700}
.join__cta{grid-column:1/13;margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.join .btn{background:var(--ink)}
.join .btn:hover{background:#fff;color:var(--ink)}
.join .link:hover{color:var(--ink)}

/* 푸터 */
.site-foot{padding:48px 0 40px}
.site-foot .grid{row-gap:24px;align-items:start}
.site-foot__logo{grid-column:1/4}
.site-foot__logo img{height:22px;width:auto}
.site-foot__info{grid-column:4/13;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 40px;font-size:15px}
.site-foot__info a{text-decoration:none}
.site-foot__info a:hover{color:var(--red);text-decoration:underline}
.site-foot__legal{grid-column:1/13;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;color:var(--caption);font-size:13px}

@media (prefers-reduced-motion:reduce){
  .js .hero__title .line > span{transform:none;animation:none}
  .js .hero__media video{opacity:1;animation:none}
  .btn,.site-nav a,.site-head{transition:none}
}

/* 큰 화면: 본문이 너무 작아 보이지 않게 */
@media (min-width:1600px){
  body{font-size:19px}
  .hero__intro{font-size:22px}
}

/* 태블릿 */
@media (max-width:1023px){
  .site-nav{gap:22px}
  .hero__intro{grid-column:6/13}
  .facts__text,.figs,.facts__note{grid-column:1/13}
  .facts__photo{grid-column:1/7;grid-row:auto;margin-top:48px}
  .track__text{grid-column:1/7}
  .track--b .track__text{grid-column:7/13}
  .co__name{grid-column:1/6}.co__what{grid-column:6/9}.co__did{grid-column:9/13}
  .item__date{grid-column:1/4}.item__kind{grid-column:1/4;grid-row:2}.item__body{grid-column:4/13}.item__photo{grid-column:4/9;margin-top:16px}
  .partners__head{grid-column:1/13;margin-bottom:20px}.partners__list{grid-column:1/13}
}

/* 모바일 */
@media (max-width:767px){
  :root{--gap:16px;--header:60px}
  body{font-size:17px}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--margin) 24px;background:var(--paper);border-bottom:1px solid var(--rule)}
  .site-nav.is-open{display:flex}
  .site-nav a:not(.btn){padding:14px 0;font-size:20px}
  .site-nav .btn{margin-top:12px;min-height:52px}
  .menu-btn{display:block}
  .hero__title,.hero__intro,.hero__media,.facts__text,.facts__photo,.figs,.facts__note,.tracks__head,.track__text,.track__photo,.track--b .track__text,.track--b .track__photo,
  .companies__head,.companies__aside,.co-list,.news__head,.news__aside,.news__list,.page-head__title,.page-head__aside,.page-sec__head,.page-sec__desc,.prog-list,.pics > :nth-child(n),
  .partners__head,.partners__list,.join__head,.join__text,.join__info,.join__cta,
  .site-foot__logo,.site-foot__info,.site-foot__legal{grid-column:1/-1}
  .track--b .track__text,.track--b .track__photo{grid-row:auto}
  .h-hero{font-size:clamp(50px,14.5vw,62px)}
  .hero__intro{font-size:17px}
  .facts__photo{grid-row:auto}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px var(--gap);margin-top:48px}
  .figs dd{font-size:clamp(26px,8.4vw,32px)} /* 360px에서 '5,200만 원'이 두 줄로 꺾이지 않게 */
  .hero__media video{aspect-ratio:16/10}
  .companies__aside,.news__aside,.page-head__aside{margin-top:16px}
  .co{display:block;padding:22px 0}
  .co__what{margin-top:6px;color:var(--caption)}
  .co__did{margin-top:2px}
  .item{display:block;padding:24px 0}
  .item__date{display:inline}
  .item__kind{display:inline;margin-left:10px}
  .item__body{margin-top:8px}
  .item__photo{margin-top:16px}
  .prog{display:block;padding:20px 0}
  .prog__what{margin-top:6px}
  .prog__fact{margin-top:4px;color:var(--caption)}
  .pics{row-gap:32px}
  .partners__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .join__text,.join__info{margin-top:32px}
  .site-foot__info{justify-content:flex-start;flex-direction:column;gap:6px}
}