/* Cre.M 공식 사이트 — 화이트 클린 × Wanted Sans (시안 A-6 확정안 기반) */

/* 폰트는 assets/fonts/wanted-sans-variable.css (유니코드 구간 분할 92청크)에서 로드 — HTML에서 이 파일보다 먼저 링크 */

:root{
  --green:#0B6B4F; --green-deep:#084F3B; --green-tint:#EEF5F1;
  --ink:#121714; --ink-2:#4E5A54; --ink-3:#8A948E;
  --bg:#FFFFFF; --bg-2:#FAFBFA; --line:#E7EAE7;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Wanted Sans Variable","Wanted Sans","Pretendard",-apple-system,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:0 32px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.24em;color:var(--green);text-transform:uppercase}
h2{font-size:clamp(26px,3.8vw,36px);font-weight:800;letter-spacing:-.02em;line-height:1.3;text-wrap:balance;margin:12px 0 14px}
.sub{color:var(--ink-2);max-width:600px;font-size:15.5px}
section{padding:96px 0}
.num{font-variant-numeric:tabular-nums}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* nav */
nav{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:50}
.nav-in{display:flex;align-items:center;gap:30px;height:68px}
.logo{font-weight:900;font-size:20px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.logo i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-left:3px}
.nav-links{display:flex;gap:26px;font-size:14px;color:var(--ink-2)}
.nav-links a{text-decoration:none;color:inherit}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;gap:10px}
.btn{display:inline-block;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:700;
  text-decoration:none;border:1px solid var(--ink);color:var(--ink);transition:.15s;background:transparent}
.btn:hover{background:var(--ink);color:#fff}
.btn.fill{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.fill:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn.green{border-color:var(--green);color:var(--green)}
.btn.green:hover{background:var(--green);color:#fff}

/* hero */
.hero{padding:130px 0 90px}
.hero h1{font-size:clamp(38px,6.4vw,68px);font-weight:900;letter-spacing:-.035em;line-height:1.14;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--green)}
.hero p.lead{margin-top:24px;font-size:17px;color:var(--ink-2);max-width:580px}
.hero .cta-row{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
  .reveal.on{opacity:1;transform:none}
}

/* stat band */
.statband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.statband .in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{padding:34px 26px;border-left:1px solid var(--line)}
.stat:first-child{border-left:none;padding-left:0}
.stat b{display:block;font-size:clamp(26px,3.2vw,36px);font-weight:900;letter-spacing:-.025em}
.stat b em{font-style:normal;color:var(--green)}
.stat span{font-size:13px;color:var(--ink-3)}

/* milestones */
.miles{list-style:none;margin-top:40px;border-top:1px solid var(--line)}
.miles li{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:20px 4px;border-bottom:1px solid var(--line);align-items:baseline}
.miles b{font-size:14px;font-weight:800;color:var(--green);letter-spacing:.02em}
.miles p{font-size:15.5px}
.miles p strong{font-weight:800}

/* business */
.biz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-right:none;margin-top:40px}
.biz{border-right:1px solid var(--line);padding:30px 26px;background:var(--bg)}
.biz .no{font-size:12px;letter-spacing:.18em;color:var(--ink-3);margin-bottom:18px}
.biz h3{font-size:17px;font-weight:800;margin-bottom:10px}
.biz p{font-size:13.5px;color:var(--ink-2)}
.biz:hover{background:var(--green-tint)}

/* brands */
.brand-list{margin-top:40px;border-top:1px solid var(--line)}
.brow{display:grid;grid-template-columns:1fr 1.1fr auto;gap:20px;align-items:center;padding:26px 4px;
  border-bottom:1px solid var(--line);transition:.15s}
.brow:hover{padding-left:14px}
.brow .name{font-size:clamp(19px,2.6vw,26px);font-weight:900;letter-spacing:-.015em;display:flex;align-items:center}
.brow .name img{height:30px;width:auto;max-width:190px}
.brow .cat{font-size:14px;color:var(--ink-2)}
.brow .pt{font-size:14px;font-weight:700;text-align:right;white-space:nowrap}
.brow .pt em{font-style:normal;color:var(--green)}
.brow.soon .name{color:var(--ink-3);font-size:clamp(16px,2.2vw,21px);letter-spacing:.08em}
.brow.soon .cat{color:var(--ink-2)}
.brow.soon .pt em{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:999px;padding:4px 12px;background:var(--bg-2);margin-left:10px}

/* partnership */
.partner{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.partner .grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.p-list{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.p-list li{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:16px 2px;border-bottom:1px solid var(--line);font-size:14.5px;align-items:baseline}
.p-list b{font-weight:800}
.p-list span{color:var(--ink-2)}
.p-stats{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px;margin-top:8px}
.p-stats div b{font-size:26px;font-weight:900;display:block;color:var(--green)}
.p-stats div span{font-size:13px;color:var(--ink-3)}

/* moments (photo gallery) */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.photo-grid figure{margin:0}
.photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;border:1px solid var(--line)}
.photo-grid figcaption{margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.photo-grid figcaption b{color:var(--ink);font-weight:700}
@media (max-width:880px){.photo-grid{grid-template-columns:1fr}}

/* culture */
.val-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
.vcell{border-top:2px solid var(--ink);padding-top:16px}
.vcell b{display:block;font-size:13.5px;letter-spacing:.08em;margin-bottom:8px}
.vcell p{font-size:13.5px;color:var(--ink-2)}
.perks{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.perk{font-size:13.5px;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:8px 16px;color:var(--ink-2)}

/* careers */
.careers{border-top:1px solid var(--line)}
.careers .row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.careers .note{font-size:13.5px;color:var(--ink-3);margin-top:10px}
.job-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.jchip{font-size:14px;font-weight:600;background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;text-decoration:none;color:var(--ink-2);transition:.15s}
.jchip:hover{border-color:var(--ink);color:var(--ink)}

/* about page */
.mission-list{list-style:none;margin-top:36px;display:grid;gap:14px;counter-reset:mi}
.mission-list li{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:22px 24px 22px 64px;font-size:15px;color:var(--ink-2)}
.mission-list li::before{counter-increment:mi;content:"0" counter(mi);position:absolute;left:24px;top:22px;
  font-size:13px;font-weight:900;letter-spacing:.1em;color:var(--green)}
.fac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-right:none;border-bottom:none;margin-top:40px}
.fac{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 26px;background:var(--bg)}
.fac img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:16px;display:block}
.office-feature{margin-top:40px}
.office-feature img{width:100%;aspect-ratio:21/8;object-fit:cover;border-radius:14px;display:block;border:1px solid var(--line)}
.fac b{display:block;font-size:15.5px;font-weight:800;margin-bottom:8px}
.fac p{font-size:13.5px;color:var(--ink-2)}
.fac:hover{background:var(--green-tint)}
.year-label{font-size:13px;font-weight:900;letter-spacing:.14em;color:var(--green);margin:44px 0 0}
.year-label:first-of-type{margin-top:40px}
.map-box{margin-top:36px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:30px 32px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.map-box b{font-size:17px;font-weight:800;display:block;margin-bottom:6px}
.map-box p{font-size:14px;color:var(--ink-2)}

/* careers page */
.page-hero{padding:110px 0 64px}
.page-hero h1{font-size:clamp(32px,5vw,52px);font-weight:900;letter-spacing:-.03em;line-height:1.2;text-wrap:balance}
.page-hero h1 em{font-style:normal;color:var(--green)}
.page-hero p{margin-top:18px;font-size:16px;color:var(--ink-2);max-width:560px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-right:none;margin-top:40px}
.step{border-right:1px solid var(--line);padding:26px 24px;background:var(--bg)}
.step .no{font-size:12px;letter-spacing:.18em;color:var(--ink-3);margin-bottom:12px}
.step b{display:block;font-size:16px;font-weight:800;margin-bottom:6px}
.step p{font-size:13.5px;color:var(--ink-2)}
.job-list{margin-top:36px;border-top:1px solid var(--line)}
.jobrow{display:grid;grid-template-columns:1fr 150px 110px 90px;gap:16px;align-items:center;
  padding:22px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:.15s}
.jobrow:hover{padding-left:14px;background:var(--bg-2)}
.jobrow .t{font-size:16.5px;font-weight:800}
.jobrow .t small{display:block;font-size:13px;font-weight:400;color:var(--ink-3);margin-top:3px}
.jobrow .meta{font-size:13.5px;color:var(--ink-2)}
.jobrow .tag{justify-self:start;font-size:12px;font-weight:700;color:var(--green);background:var(--green-tint);
  border-radius:999px;padding:4px 12px}
.jobrow .go{color:var(--green);font-weight:800;text-align:right}
@media (max-width:880px){
  .steps{grid-template-columns:1fr}
  .jobrow{grid-template-columns:1fr 90px}
  .jobrow .meta.hide-m{display:none}
}

/* countup 숫자는 반드시 부모 타이포 상속 (확장/UA 스타일 간섭 방지) */
[data-count]{font:inherit !important;color:inherit;letter-spacing:inherit;background:none}

/* channel logo marquee */
.channels{margin-top:56px;border-top:1px solid var(--line);padding-top:36px;overflow:hidden}
.channels .label{font-size:11.5px;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase;font-weight:700;margin-bottom:24px}
.mq{display:flex;overflow:hidden;user-select:none}
.mq-track{display:flex;gap:72px;align-items:center;flex-shrink:0;padding-right:72px}
.mq img{height:30px;width:auto;opacity:.95;transition:.2s}
.mq img:hover{opacity:1;transform:scale(1.06)}
@media (prefers-reduced-motion:no-preference){
  .mq-track{animation:mqmove 32s linear infinite}
  @keyframes mqmove{from{transform:translateX(0)}to{transform:translateX(-100%)}}
}

/* growth chart */
.chart{display:flex;align-items:flex-end;gap:24px;height:220px;max-width:560px;margin-top:44px}
.chart .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.chart .bar i{display:block;width:100%;max-width:96px;border-radius:6px 6px 0 0;background:var(--green);opacity:.3;transform-origin:bottom}
.chart .bar:nth-child(2) i{opacity:.6}
.chart .bar.goal i{opacity:1;background:repeating-linear-gradient(-45deg,var(--green),var(--green) 6px,#2E8A6B 6px,#2E8A6B 12px)}
.chart .bar b{font-size:15.5px;font-weight:900}
.chart .bar span{font-size:12.5px;color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){
  .chart .bar i{transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.7,.2,1) .15s}
  .on .chart .bar i{transform:scaleY(1)}
}

/* value chain flow diagram */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.fstep{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:22px 20px}
.fstep .no{font-size:11px;letter-spacing:.18em;color:var(--green);font-weight:800;margin-bottom:10px}
.fstep b{display:block;font-size:15.5px;font-weight:800;margin-bottom:6px}
.fstep p{font-size:13px;color:var(--ink-2)}
.fstep::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--green);font-weight:900;z-index:1}
.fstep:last-child::after{content:none}
@media (max-width:880px){
  .flow{grid-template-columns:1fr}
  .fstep::after{content:"↓";right:auto;left:50%;top:auto;bottom:-15px;transform:translateX(-50%)}
  .fstep:last-child::after{content:none}
}

/* stagger reveal for grid children */
@media (prefers-reduced-motion:no-preference){
  .reveal :is(.stat,.biz,.brow,.fac,.vcell,.fstep,.step,figure){opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
  .reveal.on :is(.stat,.biz,.brow,.fac,.vcell,.fstep,.step,figure){opacity:1;transform:none}
  .reveal.on :is(.stat,.biz,.brow,.fac,.vcell,.fstep,.step,figure):nth-child(1){transition-delay:.05s}
  .reveal.on :is(.stat,.biz,.brow,.fac,.vcell,.fstep,.step,figure):nth-child(2){transition-delay:.12s}
  .reveal.on :is(.stat,.biz,.brow,.fac,.vcell,.fstep,.step,figure):nth-child(3){transition-delay:.19s}
  .reveal.on :is(.stat,.biz,.brow,.fac,.vcell,.fstep,.step,figure):nth-child(4){transition-delay:.26s}
  .reveal.on :is(.stat,.biz,.brow,.fac,.vcell,.fstep,.step,figure):nth-child(5){transition-delay:.33s}
  .reveal.on :is(.stat,.biz,.brow,.fac,.vcell,.fstep,.step,figure):nth-child(6){transition-delay:.40s}
  .reveal.on :is(.stat,.biz,.brow,.fac,.vcell,.fstep,.step,figure):nth-child(7){transition-delay:.47s}
  .reveal.on :is(.stat,.biz,.brow,.fac,.vcell,.fstep,.step,figure):nth-child(8){transition-delay:.54s}
  .reveal.on :is(.stat,.biz,.brow,.fac,.vcell,.fstep,.step,figure):nth-child(9){transition-delay:.61s}
}

/* JD accordion */
details.job{border-bottom:1px solid var(--line)}
details.job summary{display:grid;grid-template-columns:1fr 150px 110px 90px 26px;gap:16px;align-items:center;
  padding:22px 4px;cursor:pointer;list-style:none;transition:.15s}
details.job summary::-webkit-details-marker{display:none}
details.job summary:hover{padding-left:14px;background:var(--bg-2)}
details.job .t{font-size:16.5px;font-weight:800}
details.job .t small{display:block;font-size:13px;font-weight:400;color:var(--ink-3);margin-top:3px}
details.job .meta{font-size:13.5px;color:var(--ink-2)}
details.job .tag{justify-self:start;font-size:12px;font-weight:700;color:var(--green);background:var(--green-tint);border-radius:999px;padding:4px 12px}
details.job .chev{color:var(--green);font-weight:900;text-align:center;transition:transform .2s}
details.job[open] .chev{transform:rotate(90deg)}
.jd{padding:8px 4px 32px;display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.jd h4{font-size:12.5px;letter-spacing:.16em;color:var(--green);text-transform:uppercase;margin-bottom:12px;font-weight:800}
.jd ul{list-style:none;display:grid;gap:8px}
.jd li{font-size:14px;color:var(--ink-2);padding-left:14px;position:relative;line-height:1.55}
.jd li::before{content:"–";position:absolute;left:0;color:var(--ink-3)}
.jd .jd-note{grid-column:1/-1;font-size:13px;color:var(--ink-3)}
.jd .jd-apply{grid-column:1/-1;justify-self:start}
@media (max-width:880px){
  details.job summary{grid-template-columns:1fr 26px}
  details.job .meta,details.job .tag{display:none}
  .jd{grid-template-columns:1fr}
}

footer{border-top:1px solid var(--line);padding:56px 0;font-size:14px;color:var(--ink-3)}
footer .logo{margin-bottom:12px}
footer p{margin-top:4px}

@media (max-width:880px){
  .nav-links{display:none}
  .statband .in{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:none;padding-left:0}
  .biz-grid{grid-template-columns:1fr 1fr}
  .partner .grid{grid-template-columns:1fr}
  .val-row{grid-template-columns:1fr 1fr}
  .brow{grid-template-columns:1fr;gap:6px}
  .brow .pt{text-align:left}
}