/* 옛 한 장짜리 소개 페이지의 스타일. 활동(/work)·소개(/about) 가 옛 마크업을 그대로 쓰느라 남겨 둔다. */
/* 히어로 */
.hero{min-height:100svh;display:flex;align-items:center;padding:110px 0 70px}
.hero .in{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.hero h1{max-width:15ch}
@media(max-width:880px){.hero .in{grid-template-columns:1fr;gap:20px}.hero .art{order:-1;max-width:340px;margin:0 auto}}
.art{position:relative;width:100%;aspect-ratio:1/1;max-width:460px;margin-inline:auto}
.ring{position:absolute;inset:6%;border:1px dashed rgba(126,155,217,.42);border-radius:50%;
  animation:spin 46s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ch{position:absolute;will-change:transform;transition:transform .12s linear}
.ch img{width:100%;display:block;filter:drop-shadow(0 14px 28px rgba(0,0,0,.45));
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.ch.main{width:56%;left:22%;top:20%}
.ch.sub1{width:27%;left:-2%;top:52%}
.ch.sub2{width:25%;right:-1%;top:8%}
.ch.main img{animation:bob 5.4s ease-in-out infinite}
.ch.sub1 img{animation:bob 6.6s ease-in-out infinite .8s}
.ch.sub2 img{animation:bob 7.4s ease-in-out infinite 1.6s}
.ch:hover img{transform:scale(1.09) rotate(-3deg)}
@keyframes bob{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
.pl{position:absolute;border-radius:50%;animation:bob 8s ease-in-out infinite}
.pl1{width:14px;height:14px;background:#7FC0A4;left:14%;top:6%}
.pl2{width:10px;height:10px;background:#2E5FA8;right:16%;bottom:12%;animation-delay:1.2s}
.pl3{width:18px;height:18px;background:#F2C14E;left:6%;top:34%;animation-delay:2.4s}
/* 우·주·선 첫 글자 — 밑줄 없이 금색으로만 (9/18). 클래스 이름은 헤더 .brand 와 겹치면 안 된다 */
.wordmark .hl{color:var(--gold);position:relative;display:inline-block}
.eq{margin-top:14px;font-size:14.5px;color:var(--ash);letter-spacing:.01em}
.eq span{color:var(--gold);margin-right:6px}
.eq b{color:var(--paper);font-weight:700;letter-spacing:.22em;margin-left:2px}

/* 주최 · 지원 */
.backers{border-top:1px solid rgba(126,155,217,.15);padding-top:22px;margin-top:44px}
.backers .lbl{font-size:11px;letter-spacing:.16em;color:var(--ash);margin-bottom:14px}
.backers .row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.backers .row{gap:14px}
.chipL{display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:10px;padding:0 20px;height:64px}
.chipL img{width:auto;display:block}
.chipL img.wide{height:29px}
.chipL img.tall{height:48px}

/* 활동 */
.proj{padding:70px 0;border-top:1px solid rgba(126,155,217,.12)}
.proj .head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px}
.proj .punch{font-size:clamp(24px,3.6vw,40px);font-weight:900;line-height:1.28;letter-spacing:-.015em;margin-bottom:18px;max-width:20ch}
.proj .why{font-size:clamp(15px,1.6vw,17px);color:rgba(245,242,234,.78);line-height:1.95;max-width:60ch;margin-bottom:30px}
.gal{display:grid;gap:12px;margin-bottom:26px}
.gal.g3{grid-template-columns:repeat(3,1fr)}
.gal.g2{grid-template-columns:1.4fr 1fr}
@media(max-width:760px){.gal.g3,.gal.g2{grid-template-columns:1fr 1fr}}
.gal figure{margin:0;border-radius:12px;overflow:hidden;background:var(--hull);position:relative}
.gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .5s}
.gal figure:hover img{transform:scale(1.04)}
.gal.tall figure:first-child img{aspect-ratio:4/3}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 11px;font-size:12px;color:#fff;
  background:linear-gradient(transparent,rgba(8,15,38,.88))}
.gal.cards{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.gal.cards{grid-template-columns:repeat(2,1fr)}}
.gal.cards img{aspect-ratio:4/5}
.crew-band{margin:14px 0 26px;border-radius:14px;overflow:hidden;position:relative}
.crew-band img{width:100%;display:block;aspect-ratio:21/9;object-fit:cover;object-position:center 38%}
.crew-band figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;
  font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(transparent,rgba(8,15,38,.9))}
@media(max-width:760px){.crew-band img{aspect-ratio:4/3}}
.says{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:rgba(126,155,217,.14);border:1px solid rgba(126,155,217,.14);
  border-radius:12px;overflow:hidden}
@media(max-width:760px){.says{grid-template-columns:1fr}}
.says blockquote{background:var(--void);padding:26px 24px;display:grid;
  gap:12px;align-content:start}
.says blockquote p{font-size:17px;line-height:1.75;font-weight:700;
  letter-spacing:-.01em;text-indent:-.4em}
.says blockquote p::before{content:'“'}
.says blockquote p::after{content:'”'}
.says cite{font-style:normal;font-size:12.5px;line-height:1.7;color:var(--orbit)}
.claim{font-size:27px;line-height:1.5;font-weight:900;letter-spacing:-.02em;
  margin-bottom:22px;padding-bottom:20px;
  border-bottom:1px solid rgba(242,193,78,.28)}
@media(max-width:640px){.claim{font-size:22px}}
.gsub{font-size:12px;letter-spacing:.16em;color:var(--gold);margin:26px 0 12px}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.strip>div{background:rgba(16,30,68,.6);border-radius:10px;padding:15px 16px}
.strip b{display:block;font-size:11px;color:var(--gold);font-weight:700;margin-bottom:6px;letter-spacing:.06em}
.strip p{font-size:13.5px;line-height:1.65}
.strip p span{color:var(--ash);font-size:12.5px}

/* 소개 */
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:34px}
.three div{padding:24px}
.three b{display:block;font-size:11px;letter-spacing:.2em;color:var(--gold);margin-bottom:12px}
.three p{font-size:14.5px;color:rgba(245,242,234,.75);line-height:1.9}

/* 원칙 */
.principles{display:grid;gap:0;margin-top:38px;border-top:1px solid rgba(126,155,217,.18)}
.pr{display:grid;grid-template-columns:88px 1fr;gap:26px;padding:28px 0;
  border-bottom:1px solid rgba(126,155,217,.12);align-items:start}
@media(max-width:640px){.pr{grid-template-columns:52px 1fr;gap:18px;padding:22px 0}}
.pr .no{font-size:34px;font-weight:900;line-height:1;color:rgba(242,193,78,.32);
  font-variant-numeric:tabular-nums}
@media(max-width:640px){.pr .no{font-size:24px}}
.pr .en{font-size:12px;letter-spacing:.26em;color:var(--gold);margin-bottom:5px}
.pr .ko{font-size:20px;font-weight:900;margin-bottom:9px;letter-spacing:-.01em}
.pr .dt{font-size:14.5px;line-height:1.95;color:rgba(245,242,234,.72);max-width:56ch}

/* 남기는 것 */
.outs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:rgba(126,155,217,.14);border:1px solid rgba(126,155,217,.14);
  border-radius:12px;overflow:hidden;margin-top:36px}
.out{background:var(--void);padding:24px 22px;display:grid;gap:8px;align-content:start}
.out .on{font-size:16px;font-weight:700}
.out .od{font-size:13.5px;line-height:1.85;color:rgba(245,242,234,.68)}
.out .ow{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--orbit);
  justify-self:start;background:rgba(126,155,217,.14);padding:3px 10px;border-radius:99px}
.out .ow.done{color:var(--sage);background:rgba(127,192,164,.16)}

/* 발자취 */
.tl{list-style:none;margin:34px 0 0;padding:0;border-left:1px solid rgba(126,155,217,.25)}
.tl li{position:relative;display:grid;grid-template-columns:150px 1fr;gap:22px;
  padding:0 0 30px 28px}
@media(max-width:640px){.tl li{grid-template-columns:1fr;gap:6px}}
.tl li::before{content:'';position:absolute;left:-5px;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--orbit)}
.tl li.now::before{background:var(--gold);box-shadow:0 0 0 4px rgba(242,193,78,.18)}
.tl .d{font-size:13.5px;color:var(--ash);font-variant-numeric:tabular-nums;line-height:1.5}
.tl li.now .d{color:var(--gold)}
.tl .t{font-size:14.5px;color:rgba(245,242,234,.72);line-height:1.75}
.tl .t b{display:block;font-size:16px;color:var(--paper);font-weight:700;margin-bottom:3px}
.tl .tag{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;
  background:var(--gold);color:var(--void);padding:2px 9px;border-radius:99px;vertical-align:2px}

/* 팀 */
.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.crew div{padding:24px}
.crew .nm{font-size:22px;font-weight:700;margin-bottom:3px}
.crew .rl{font-size:12px;letter-spacing:.18em;margin-bottom:12px}
.crew p{font-size:14px;color:rgba(245,242,234,.7);line-height:1.85}

/* 평화대사 여섯 */
.envoys{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:24px 0 26px}
@media(max-width:760px){.envoys{grid-template-columns:repeat(3,1fr)}}
.envoys figure{margin:0;text-align:center;display:flex;flex-direction:column;justify-content:flex-end}
.envoys img{height:118px;width:auto;max-width:100%;object-fit:contain;margin:0 auto 8px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));transition:transform .3s}
.envoys figure:hover img{transform:translateY(-6px)}
.envoys figcaption{font-size:13px;font-weight:700}
.envoys figcaption span{display:block;font-size:11px;font-weight:400;color:var(--ash);margin-top:2px}

/* 새 페이지(work) 에서 옛 .proj 가 .wrap 의 좌우 여백을 지우지 않게 */
.wrap.proj{padding-left:20px;padding-right:20px}
section>.wrap[style*="padding"]{padding-left:20px!important;padding-right:20px!important}
