/* ============================================================
   서브페이지 공통 정정 — 전 studio 페이지
   1) 로드: refinement/atelier 보다 뒤
   2) Pretendard/Dotum → CossSans (볼드 포함)
   3) 본문 불투명 지면 (상단영상/pagebg는 유지, 본문만 올림)
   헤더/GNB/LNB/푸터/상단영상 요소 자체는 변경하지 않음
   ============================================================ */

@font-face{
  font-family:CossSans;
  src:url("/assets/peanut-theme/assets/fonts/NotoSansKR-Regular.woff2") format("woff2");
  font-display:swap;font-weight:400;font-style:normal;
}
@font-face{
  font-family:CossSans;
  src:url("/assets/peanut-theme/assets/fonts/NotoSansKR-Bold.woff2") format("woff2");
  font-display:swap;font-weight:600;font-style:normal;
}
@font-face{
  font-family:CossSans;
  src:url("/assets/peanut-theme/assets/fonts/NotoSansKR-Bold.woff2") format("woff2");
  font-display:swap;font-weight:700;font-style:normal;
}
@font-face{
  font-family:CossSans;
  src:url("/assets/peanut-theme/assets/fonts/NotoSansKR-Bold.woff2") format("woff2");
  font-display:swap;font-weight:800;font-style:normal;
}

/* 청양 * { Pretendard } 리셋 차단 */
#coss-body,
#coss-body *:not(i):not([class*="xi-"]):not([class*="fa"]):not([class*="icon"]){
  font-family:CossSans,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif!important;
}
#coss-body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  border-radius:0!important; /* sky.css 36px 카드형 본문 박스 해제 */
  --bw-clip-1:url("/assets/clippings/clipping-1.svg");
  --bw-clip-2:url("/assets/clippings/clipping-2.svg");
  --bw-clip-3:url("/assets/clippings/clipping-3.svg");
  --bw-clip-4:url("/assets/clippings/clipping-4.svg");
}

/* refinement 구름 장식 — 본문 위에서 촌스러움 유발 */
#coss-body::before{
  content:none!important;display:none!important;background:none!important;
}

/* 본문 지면: 래퍼는 투명, 큰 카드만 반투명 → pagebg 영상이 비침 */
#coss-body .page-content,
#coss-body .coss-concept-wrap{
  position:relative;z-index:1;
  background:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
#coss-body .editorial-hero,
#coss-body .feature-tabs,
#coss-body .color-intro,
#coss-body .color-anchor-nav,
#coss-body .color-content,
#coss-body .quote-intro,
#coss-body .play-main-wrap,
#coss-body .play-heading,
#coss-body .simulation-workspace,
#coss-body .concept-directory{
  position:relative;z-index:1;
  background:rgba(255,252,247,.58)!important;
  background-image:none!important;
  border-radius:0!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  backdrop-filter:blur(14px) saturate(1.08);
}
#coss-body .collection-section,
#coss-body .story-section,
#coss-body .related-links{
  background:rgba(255,252,247,.55)!important;
  background-image:none!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  backdrop-filter:blur(16px) saturate(1.08);
}
#coss-body .collection-section:nth-of-type(even),
#coss-body .collection-section:nth-of-type(3n){
  background:rgba(250,248,243,.52)!important;
  background-image:none!important;
}
@media (prefers-reduced-transparency:reduce){
  #coss-body .editorial-hero,
  #coss-body .collection-section,
  #coss-body .story-section,
  #coss-body .related-links,
  #coss-body .page-content,
  #coss-body .coss-concept-wrap{
    background:#f4f3ef!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

/* 공통 미디어·갤러리 — 둥근 사각 카드 톤 제거 */
#coss-body .editorial-photo>img,
#coss-body .editorial-photo.material-photo,
#coss-body .material-layout:not(.compact-hero) .editorial-photo>img,
#coss-body .material-layout:not(.compact-hero) .editorial-photo.material-photo{
  border-radius:0!important;
}
#coss-body .editorial-gallery figure>div,
#coss-body .product-image,
#coss-body .product-grid figure,
#coss-body .ea-lead,
#coss-body .ea-lead img,
#coss-body .page-body-video{
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden;
}
#coss-body .editorial-gallery{gap:28px 32px}
#coss-body .editorial-gallery figcaption span{
  font-family:ui-monospace,Menlo,Consolas,monospace!important;
  letter-spacing:.06em;
}
#coss-body .feature-tabs a{
  border-radius:0!important;
}

/* concepts / colors — 큰 박스 폭 통일 (인셋 margin 시트 어긋남 제거) */
#coss-body .play-heading,
#coss-body .color-intro,
#coss-body .color-content,
#coss-body .concept-directory,
#coss-body .feature-tabs{
  max-width:none!important;
  width:100%!important;
  box-sizing:border-box;
  margin-left:0!important;
  margin-right:0!important;
}
#coss-body .simulation-workspace{
  margin-left:0!important;
  margin-right:0!important;
  border-radius:0!important;
  width:100%!important;
  box-sizing:border-box;
  padding-left:6%!important;
  padding-right:6%!important;
}
#coss-body .color-anchor-nav{
  margin-left:0!important;
  margin-right:0!important;
  width:100%!important;
  box-sizing:border-box;
  padding-left:6%!important;
  padding-right:6%!important;
}

/* refinement/atelier가 남긴 둥근 히어로·갤러리 카드 강제 해제 */
#coss-body .coss-soft-c .scard,
#coss-body .coss-soft-c .sc-stats .s,
#coss-body .coss-soft-c .sc-cta,
#coss-body .coss-soft-c .palette .sw{
  border-radius:0!important;
  box-shadow:none!important;
}
#coss-body .coss-soft-c .sc-gal figure,
#coss-body .coss-soft-c .sc-gal figure img{
  box-shadow:none!important;
}
#coss-body .coss-concept-wrap{
  padding-bottom:48px;
}
#coss-body .page-content{
  padding-top:12px;padding-bottom:100px;
}
#coss-body .editorial-hero{
  padding-bottom:28px;
}

/* 타이틀 볼드 보장 (청양/테마가 400으로 덮는 경우) */
#coss-body h1,
#coss-body .editorial-hero h1,
#coss-body .color-intro h1{
  font-weight:800!important;
}

/* atelier 진행바 — 전 서브에서 숨김(장식 과다) */
#coss-body .atelier-progress{display:none!important}

/* 리드·히어로·제품컷: 마스크 없이 가로형 */
#coss-body .ea-lead,
#coss-body .coss-editorial-a .ea-lead{
  margin:12px 0 48px!important;
  max-width:none!important;
  overflow:hidden!important;
  border:0!important;background:transparent!important;
}
#coss-body .ea-lead img,
#coss-body .coss-editorial-a .ea-lead img{
  display:block;width:100%;
  height:auto!important;
  aspect-ratio:16/9!important;
  object-fit:cover;
  object-position:center top;
  border:0!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
#coss-body .ea-lead figcaption,
#coss-body .coss-editorial-a .ea-lead figcaption{
  position:static!important;padding:12px 0 0!important;
  font-size:13px!important;font-weight:600!important;
  color:#6a655c!important;letter-spacing:.01em;
  text-transform:none!important;background:none!important;
}
#coss-body .coss-soft-c .sc-hero-img{
  margin:40px auto 0!important;max-width:1080px!important;
  overflow:hidden!important;border:0!important;
  border-radius:18px!important;filter:none!important;
}
#coss-body .coss-soft-c .sc-hero-img img{
  width:100%;height:auto!important;
  aspect-ratio:auto!important;object-fit:contain!important;
  object-position:center center!important;display:block;
  -webkit-mask-image:none!important;mask-image:none!important;
  border-radius:18px!important;
}
#coss-body .coss-soft-c .sc-product .pimg{
  overflow:hidden!important;border:0!important;
  aspect-ratio:auto!important;background:transparent!important;
  border-radius:18px!important;filter:none!important;
}
#coss-body .coss-soft-c .sc-product .pimg img{
  width:100%;height:auto!important;aspect-ratio:auto!important;
  object-fit:contain!important;object-position:center center!important;display:block;
  -webkit-mask-image:none!important;mask-image:none!important;
  border-radius:18px!important;
}
#coss-body .coss-soft-c .sc-gal-shot{
  margin:0;padding:0;overflow:visible;background:transparent;
}
#coss-body .coss-soft-c .sc-gal-frame{
  overflow:hidden;background:#f3f1ea;
  border-radius:18px!important;
}
#coss-body .coss-soft-c .sc-gal-shot img{
  display:block;width:100%;height:auto;
  aspect-ratio:auto;object-fit:contain;object-position:center center;
  border:0;border-radius:18px!important;
}
#coss-body .coss-soft-c .sc-gal-shot figcaption{
  margin:0;padding:12px 0 0;font-size:13px;font-weight:600;color:#6a655c;
}
#coss-body .coss-soft-c .sc-product{
  border-radius:18px!important;
  overflow:hidden;
}

/* 일반 IN FOCUS 갤러리: 가로 스태거, 마스크 없음 */
#coss-body .editorial-gallery{
  display:grid!important;
  grid-template-columns:1.15fr 1fr;
  gap:40px 36px!important;
  align-items:start;
}
#coss-body .editorial-gallery figure{margin:0;overflow:visible!important}
#coss-body .editorial-gallery figure:nth-child(even){padding-top:56px}
#coss-body .editorial-gallery figure>div{
  overflow:hidden!important;background:#e8e9dd!important;border:0!important;
  aspect-ratio:16/10;
  -webkit-mask-image:none!important;mask-image:none!important;
}
#coss-body .editorial-gallery img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;display:block;transform:none!important;
}
#coss-body .editorial-gallery figcaption{
  padding-top:14px!important;font-size:13px;font-weight:600;color:#5a564e;
}
#coss-body .editorial-gallery figcaption span{
  font-family:ui-monospace,Menlo,Consolas,monospace!important;
  letter-spacing:.06em;margin-right:10px;color:#8a857a;
}

/* ============================================================
   Bottle Works brands 박스 (원본 clipping SVG + 샤인 + 스태거)
   https://bottleworks.jp/brands/
   ============================================================ */
#coss-body .ea-mgrid,
#coss-body .coss-editorial-a .ea-mgrid,
#coss-body .coss-soft-c .sc-gal{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:3.2rem 0!important;
  align-items:start;
  padding:0;margin:28px 0 0;
}
@media (min-width:821px){
  #coss-body .ea-mgrid,
  #coss-body .coss-editorial-a .ea-mgrid,
  #coss-body .coss-soft-c .sc-gal{
    grid-template-columns:1fr 1fr!important;
    gap:0 4.8rem!important;
  }
  #coss-body .bw-card:nth-child(4n+1){margin-top:7.3rem!important}
  #coss-body .bw-card:nth-child(4n+2){margin-top:0!important}
  #coss-body .bw-card:nth-child(4n+3){margin-top:8.5rem!important}
  #coss-body .bw-card:nth-child(4n+4){margin-top:2.5rem!important}
}

#coss-body .bw-card{
  position:relative;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
  aspect-ratio:auto!important;
  grid-column:auto!important;
  display:block;
  box-shadow:none!important;
}
#coss-body .bw-card .bw-mask{
  position:relative;
  width:100%;
  overflow:visible;
  margin:0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-mode:alpha;mask-mode:alpha;
}
@media (min-width:821px){
  #coss-body .bw-card .bw-mask{margin-bottom:0}
}
#coss-body .bw-card.clip-1 .bw-mask{
  aspect-ratio:600/432;
  -webkit-mask-image:var(--bw-clip-1);mask-image:var(--bw-clip-1);
}
#coss-body .bw-card.clip-2 .bw-mask{
  aspect-ratio:600/420;
  -webkit-mask-image:var(--bw-clip-2);mask-image:var(--bw-clip-2);
}
#coss-body .bw-card.clip-3 .bw-mask{
  aspect-ratio:600/451;
  -webkit-mask-image:var(--bw-clip-3);mask-image:var(--bw-clip-3);
}
#coss-body .bw-card.clip-4 .bw-mask{
  aspect-ratio:600/451;
  -webkit-mask-image:var(--bw-clip-4);mask-image:var(--bw-clip-4);
}
#coss-body .bw-card .bw-mask img{
  display:block;width:100%!important;height:100%!important;
  object-fit:cover;object-position:center top;border:0!important;
  -webkit-mask-image:none!important;mask-image:none!important;
  transform:none!important;opacity:1!important;
  border-radius:0!important;
}
/* 샤인 스윕 */
#coss-body .bw-card .bw-mask::after{
  content:"";
  position:absolute;inset:0;
  background-image:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%);
  background-size:200% 100%;
  background-position:150% 0;
  background-repeat:no-repeat;
  pointer-events:none;
  transition:background-position 1s ease-out;
}
@media (hover:hover){
  #coss-body .bw-card:hover .bw-mask::after{
    background-position:-150% 0;
  }
}

/* ============================================================
   회사개요 현장 기록 — 둥근 사각 자동 슬라이더
   ============================================================ */
#coss-body .ea-slider--round{
  position:relative;
  margin:8px 0 56px;
  outline:0;
}
#coss-body .ea-slider--round .ea-slider-viewport{
  overflow:hidden;
  width:100%;
}
#coss-body .ea-slider--round .ea-slider-track{
  display:flex;
  width:100%;
  transition:transform .85s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
#coss-body .ea-slider--round .ea-slide{
  position:relative;
  flex:0 0 100%;
  width:100%;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
}
#coss-body .ea-slider--round .ea-slide-frame{
  position:relative;
  width:min(100%,920px);
  margin:0 auto;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:18px!important;
  background:#e8e6e0;
}
#coss-body .ea-slider--round .ea-slide-frame img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  transform:scale(1.04);
  transition:transform 4.8s linear;
  border-radius:0!important;
}
#coss-body .ea-slider--round .ea-slide[data-active] .ea-slide-frame img{
  transform:scale(1);
}
#coss-body .ea-slider--round .ea-slide-frame::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background-image:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);
  background-size:200% 100%;
  background-position:150% 0;
  background-repeat:no-repeat;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease,background-position 1s ease-out;
}
#coss-body .ea-slider--round .ea-slide[data-active] .ea-slide-frame::after{
  opacity:1;
  background-position:-150% 0;
  transition-delay:0s,.15s;
}
#coss-body .ea-slider--round .ea-slider-bar{
  display:flex;
  align-items:center;
  gap:14px;
  max-width:920px;
  margin:22px auto 0;
  padding:0 4px;
}
#coss-body .ea-slider--round .ea-slider-btn{
  flex:0 0 auto;
  width:40px;height:40px;
  border:0;border-bottom:1px solid rgba(26,26,26,.35);
  background:transparent;
  color:#1a1a1a;
  font-size:18px;line-height:1;
  cursor:pointer;
  transition:opacity .25s,border-color .25s;
}
#coss-body .ea-slider--round .ea-slider-btn:hover{opacity:.45;border-color:#1a1a1a}
#coss-body .ea-slider--round .ea-slider-progress{
  flex:1 1 auto;
  height:1px;
  background:rgba(26,26,26,.14);
  overflow:hidden;
}
#coss-body .ea-slider--round .ea-slider-progress > i{
  display:block;height:100%;width:100%;
  background:#1a1a1a;
  transform:scaleX(0);
  transform-origin:left center;
}
#coss-body .ea-slider--round .ea-slider-count{
  flex:0 0 auto;
  font-family:ui-monospace,Menlo,Consolas,monospace!important;
  font-size:12px;
  letter-spacing:.08em;
  color:#6a655c;
  min-width:4.5em;
  text-align:right;
}
#coss-body .ea-slider--round .ea-slider-count em{
  font-style:normal;margin:0 .35em;opacity:.45;
}

@media (max-width:820px){
  #coss-body .editorial-gallery{grid-template-columns:1fr!important;gap:32px!important}
  #coss-body .editorial-gallery figure:nth-child(even){padding-top:0}
  #coss-body .bw-card{margin-top:0!important}
  #coss-body .bw-card .bw-mask{margin-bottom:0}
  #coss-body .ea-lead img,
  #coss-body .coss-editorial-a .ea-lead img{
    aspect-ratio:16/10!important;
  }
  #coss-body .ea-slider--round .ea-slide-frame{width:100%;border-radius:14px!important}
  #coss-body .ea-slider--round .ea-slider-bar{gap:10px;margin-top:16px}
  #coss-body .ea-slider--round .ea-slider-btn{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  #coss-body .ea-slider--round .ea-slider-track{transition:none}
  #coss-body .ea-slider--round .ea-slide-frame img{transition:none;transform:none}
}

/* ============================================================
   연혁 — 텍스트 크로노로지 + 스크롤 애니메이션
   ============================================================ */
#coss-body .ea-chrono{
  --chrono-ink:#14110e;
  --chrono-mute:#6a655c;
  --chrono-line:rgba(20,17,14,.14);
  --chrono-accent:#c45a2c;
  position:relative;
  margin:12px 0 64px;
  max-width:920px;
}
#coss-body .chrono-head{
  margin:0 0 48px;
  padding-bottom:28px;
  border-bottom:1px solid var(--chrono-line);
}
#coss-body .chrono-kicker{
  display:block;
  margin:0 0 16px;
  font-family:ui-monospace,Menlo,Consolas,monospace!important;
  font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--chrono-accent);
}
#coss-body .chrono-head h2{
  margin:0 0 16px;
  font-weight:800!important;
  font-size:clamp(28px,4.2vw,46px);
  line-height:1.2;letter-spacing:-.035em;
  color:var(--chrono-ink);
}
#coss-body .chrono-head p{
  margin:0;max-width:42ch;
  font-size:15px;line-height:1.85;color:var(--chrono-mute);
}
#coss-body .chrono-rail{
  position:relative;
  padding-left:28px;
}
#coss-body .chrono-progress{
  position:absolute;
  left:7px;top:0;bottom:0;
  width:1px;
  background:var(--chrono-line);
}
#coss-body .chrono-progress > i{
  display:block;width:100%;height:0%;
  background:var(--chrono-ink);
  transform-origin:top center;
  transition:height .12s linear;
}
#coss-body .chrono-era{
  position:relative;
  margin:0 0 48px;
  padding:0 0 8px;
}
#coss-body .chrono-era:last-child{margin-bottom:0}
#coss-body .chrono-era::before{
  content:"";
  position:absolute;
  left:-25px;top:10px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--chrono-ink);
  box-shadow:0 0 0 4px #f4f3ef;
}
#coss-body .chrono-era-hd{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin:0 0 20px;
}
#coss-body .chrono-idx{
  flex:0 0 auto;
  font-family:ui-monospace,Menlo,Consolas,monospace!important;
  font-size:13px;font-weight:700;
  letter-spacing:.08em;
  color:var(--chrono-mute);
  padding-top:6px;
}
#coss-body .chrono-era-en{
  display:block;
  font-family:ui-monospace,Menlo,Consolas,monospace!important;
  font-style:normal;
  font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--chrono-accent);
  margin:0 0 6px;
}
#coss-body .chrono-era-ko{
  margin:0;
  font-size:clamp(22px,2.8vw,30px);
  font-weight:800!important;
  letter-spacing:-.03em;
  line-height:1.25;
  color:var(--chrono-ink);
}
#coss-body .chrono-rows{display:flex;flex-direction:column;gap:0}
#coss-body .chrono-row{
  display:grid;
  grid-template-columns:minmax(88px,120px) 1fr;
  gap:20px 28px;
  align-items:baseline;
  padding:18px 0;
  border-top:1px solid var(--chrono-line);
  opacity:0;
  transform:translateY(28px);
  filter:blur(4px);
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1),
    filter .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
#coss-body .chrono-row.is-in{
  opacity:1;
  transform:none;
  filter:blur(0);
}
#coss-body .chrono-year{
  display:block;
  font-family:CossSans,"Helvetica Neue",Arial,sans-serif!important;
  font-size:clamp(32px,4.5vw,48px);
  font-weight:800!important;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--chrono-ink);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .9s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 70ms + 80ms);
}
#coss-body .chrono-row.is-in .chrono-year{
  clip-path:inset(0 0 0 0);
}
#coss-body .chrono-text{
  margin:0;
  max-width:36ch;
  font-size:15.5px;
  line-height:1.75;
  color:var(--chrono-ink);
  word-break:keep-all;
}
#coss-body .chrono-era[data-ea],
#coss-body .chrono-head[data-ea]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
#coss-body .chrono-era[data-ea].on,
#coss-body .chrono-head[data-ea].on{
  opacity:1;transform:none;
}

@media (max-width:720px){
  #coss-body .chrono-rail{padding-left:22px}
  #coss-body .chrono-progress{left:5px}
  #coss-body .chrono-era::before{left:-20px;width:8px;height:8px}
  #coss-body .chrono-row{
    grid-template-columns:1fr;
    gap:8px;
    padding:16px 0;
  }
  #coss-body .chrono-year{font-size:clamp(28px,10vw,36px)}
  #coss-body .chrono-era-hd{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  #coss-body .chrono-row,
  #coss-body .chrono-year,
  #coss-body .chrono-era[data-ea],
  #coss-body .chrono-head[data-ea]{
    opacity:1!important;transform:none!important;filter:none!important;
    clip-path:none!important;transition:none!important;
  }
  #coss-body .chrono-progress > i{transition:none}
}


/* ---------- 조직도: 둥근 사각 단장 + iris/clip 리빌 ---------- */
#coss-body .ea-org-shot{
  margin: 56px 0 0;
  padding: 0;
  max-width: 920px;
}
#coss-body .ea-org-shot-shell{
  position: relative;
  width: 100%;
}
#coss-body .ea-org-shot-ring{
  position: absolute;
  inset: -10px;
  border-radius: 36px;
  border: 1.5px solid rgba(20,17,14,.16);
  pointer-events: none;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .9s cubic-bezier(.16,1,.3,1) .15s, transform 1.1s cubic-bezier(.16,1,.3,1);
}
#coss-body .ea-org-shot.is-in .ea-org-shot-ring{
  opacity: 1;
  transform: scale(1);
}
#coss-body .ea-org-shot-frame{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: #f4f3ef;
  clip-path: circle(8% at 50% 55%);
  filter: blur(14px) saturate(.7);
  transform: scale(1.04);
  opacity: 0;
  transition:
    clip-path 1.15s cubic-bezier(.77,0,.18,1),
    filter .95s cubic-bezier(.16,1,.3,1) .08s,
    transform 1.05s cubic-bezier(.16,1,.3,1),
    opacity .55s ease;
}
#coss-body .ea-org-shot.is-in .ea-org-shot-frame{
  clip-path: inset(0 0 0 0 round 28px);
  filter: blur(0) saturate(1);
  transform: scale(1);
  opacity: 1;
}
#coss-body .ea-org-shot-frame img{
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.03);
  transform-origin: center center;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1) .05s;
}
#coss-body .ea-org-shot.is-in .ea-org-shot-frame img{
  transform: scale(1);
}
#coss-body .ea-org-shot-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 48%, transparent 62%);
  background-size: 220% 100%;
  background-position: 160% 0;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
#coss-body .ea-org-shot.is-in .ea-org-shot-frame::after{
  opacity: 1;
  animation: ea-org-shimmer 1.4s cubic-bezier(.4,0,.2,1) .35s 1 both;
}
@keyframes ea-org-shimmer{
  from{ background-position: 160% 0; }
  to{ background-position: -80% 0; }
}
@media (max-width: 720px){
  #coss-body .ea-org-shot{ margin-top: 40px; }
  #coss-body .ea-org-shot-frame{ border-radius: 18px; }
  #coss-body .ea-org-shot.is-in .ea-org-shot-frame{ clip-path: inset(0 0 0 0 round 18px); }
  #coss-body .ea-org-shot-ring{ inset: -8px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce){
  #coss-body .ea-org-shot-frame,
  #coss-body .ea-org-shot-frame img,
  #coss-body .ea-org-shot-ring{
    transition: none !important;
    animation: none !important;
  }
  #coss-body .ea-org-shot-frame{
    clip-path: inset(0 0 0 0 round 28px);
    filter: none;
    transform: none;
    opacity: 1;
  }
  #coss-body .ea-org-shot-frame img{ transform: none; }
  #coss-body .ea-org-shot-ring{ opacity: 1; transform: none; }
  #coss-body .ea-org-shot-frame::after{ display: none; }
}


/* ---------- Organization Chart — tree-grow cascade ---------- */
#coss-body .org-chart[data-org-chart]{
  --org-ease: cubic-bezier(.16,1,.3,1);
  --org-draw: cubic-bezier(.77,0,.18,1);
}
#coss-body .org-chart[data-org-chart] .org-ceo .org-node,
#coss-body .org-chart[data-org-chart] .org-div > .org-node,
#coss-body .org-chart[data-org-chart] .org-group > .org-node,
#coss-body .org-chart[data-org-chart] .org-team{
  opacity: 0;
  filter: blur(8px);
  transform: translateY(18px) scale(.94);
  transition:
    opacity .7s var(--org-ease),
    filter .75s var(--org-ease),
    transform .85s var(--org-ease);
}
#coss-body .org-chart[data-org-chart] .org-ceo .org-node{
  transform: translateY(-22px) scale(.88);
  filter: blur(10px);
}
#coss-body .org-chart[data-org-chart].is-in .org-ceo .org-node,
#coss-body .org-chart[data-org-chart].is-in .org-div > .org-node,
#coss-body .org-chart[data-org-chart].is-in .org-group > .org-node,
#coss-body .org-chart[data-org-chart].is-in .org-team{
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* connector lines grow */
#coss-body .org-chart[data-org-chart] .org-ceo::after,
#coss-body .org-chart[data-org-chart] .org-div::before,
#coss-body .org-chart[data-org-chart] .org-node.div + .org-teams::before,
#coss-body .org-chart[data-org-chart] .org-node.grp + .org-teams::before,
#coss-body .org-chart[data-org-chart] .org-groups::before{
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  transition: transform .55s var(--org-draw);
}
#coss-body .org-chart[data-org-chart] .org-divs::before{
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform .7s var(--org-draw);
}
#coss-body .org-chart[data-org-chart].is-in .org-ceo::after{
  transform: translateX(-50%) scaleY(1);
  transition-delay: .28s;
}
#coss-body .org-chart[data-org-chart].is-in .org-divs::before{
  transform: scaleX(1);
  transition-delay: .48s;
}
#coss-body .org-chart[data-org-chart].is-in .org-div::before{
  transform: translateX(-50%) scaleY(1);
  transition-delay: calc(.55s + var(--bi, 0) * .1s);
}
#coss-body .org-chart[data-org-chart].is-in .org-node.div + .org-teams::before,
#coss-body .org-chart[data-org-chart].is-in .org-node.grp + .org-teams::before,
#coss-body .org-chart[data-org-chart].is-in .org-groups::before{
  transform: translateX(-50%) scaleY(1);
  transition-delay: calc(.75s + var(--bi, 0) * .1s + var(--gi, 0) * .08s);
}

/* stagger: CEO → branches → groups → teams */
#coss-body .org-chart[data-org-chart].is-in .org-ceo .org-node{
  transition-delay: .06s;
}
#coss-body .org-chart[data-org-chart].is-in .org-div > .org-node{
  transition-delay: calc(.62s + var(--bi, 0) * .12s);
}
#coss-body .org-chart[data-org-chart].is-in .org-group > .org-node{
  transition-delay: calc(.88s + var(--bi, 0) * .1s + var(--gi, 0) * .1s);
}
#coss-body .org-chart[data-org-chart].is-in .org-team{
  transition-delay: calc(1.05s + var(--bi, 0) * .1s + var(--gi, 0) * .08s + var(--ti, 0) * .07s);
}

@media (prefers-reduced-motion: reduce){
  #coss-body .org-chart[data-org-chart] .org-ceo .org-node,
  #coss-body .org-chart[data-org-chart] .org-div > .org-node,
  #coss-body .org-chart[data-org-chart] .org-group > .org-node,
  #coss-body .org-chart[data-org-chart] .org-team,
  #coss-body .org-chart[data-org-chart] .org-ceo::after,
  #coss-body .org-chart[data-org-chart] .org-div::before,
  #coss-body .org-chart[data-org-chart] .org-divs::before,
  #coss-body .org-chart[data-org-chart] .org-node.div + .org-teams::before,
  #coss-body .org-chart[data-org-chart] .org-node.grp + .org-teams::before,
  #coss-body .org-chart[data-org-chart] .org-groups::before{
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  #coss-body .org-chart[data-org-chart] .org-ceo::after,
  #coss-body .org-chart[data-org-chart] .org-div::before{
    transform: translateX(-50%) !important;
  }
}

#coss-body .ea-org-shot--top{
  margin: 28px 0 8px;
  max-width: 100%;
}\n#coss-body .ea-org-shot-ring{display:none!important}\n

/* no decorative ring around page shot */
#coss-body .ea-org-shot-ring{display:none!important;border:0!important}

#coss-body .ea-lead video,
#coss-body .coss-editorial-a .ea-lead video,
#coss-body .ea-org-shot-frame video,
#coss-body .ea-slide-frame video,
#coss-body .bw-card .bw-mask video{
  width:100%;height:100%;display:block;object-fit:cover;border:0;background:#0b1220;
}
#coss-body .ea-lead video,
#coss-body .coss-editorial-a .ea-lead video{
  aspect-ratio:16/9;max-height:min(72vh,820px);
}
#coss-body .ea-org-shot-frame video{aspect-ratio:auto;min-height:220px}


/* ---------- 생산·시공 체계 (system) ---------- */
#coss-body .ea-system{
  margin-top:56px;
  display:flex;
  flex-direction:column;
  gap:72px;
}
#coss-body .sys-kicker{
  display:block;
  font:700 12px/1 "Archivo",sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#c45a2c;
  margin-bottom:14px;
}
#coss-body .sys-prod-hd h2,
#coss-body .sys-flow-hd h2{
  margin:0 0 16px;
  font-size:clamp(26px,3.4vw,40px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.25;
  color:#14110e;
}
#coss-body .sys-prod-hd p,
#coss-body .sys-flow-hd p{
  margin:0 0 12px;
  max-width:42em;
  font-size:15px;
  line-height:1.85;
  color:#5c564e;
}
#coss-body .sys-checks{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
#coss-body .sys-check{
  margin:0;
  padding:18px 16px;
  border-top:2px solid #14110e;
  background:#f7f5f1;
  opacity:0;
  transform:translateY(22px);
  filter:blur(6px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1),
    filter .7s ease;
  transition-delay:calc(var(--i,0) * .08s);
}
#coss-body .sys-prod.is-in .sys-check{
  opacity:1;
  transform:none;
  filter:none;
}
#coss-body .sys-check-n{
  display:block;
  font:800 13px/1 "Archivo",sans-serif;
  letter-spacing:.08em;
  color:#c45a2c;
  margin-bottom:10px;
}
#coss-body .sys-check-t{
  display:block;
  font-size:14px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.02em;
  color:#14110e;
  word-break:keep-all;
}

#coss-body .sys-banner{
  margin:28px 0 36px;
  padding:0;
}
#coss-body .sys-banner-frame{
  overflow:hidden;
  border-radius:18px;
  background:#e8e6e0;
  clip-path:inset(0 42% 0 42% round 18px);
  filter:blur(10px) saturate(.75);
  transform:scale(1.04);
  opacity:0;
  transition:
    clip-path 1.1s cubic-bezier(.77,0,.18,1),
    filter .9s cubic-bezier(.16,1,.3,1) .05s,
    transform 1s cubic-bezier(.16,1,.3,1),
    opacity .5s ease;
}
#coss-body .sys-banner.is-in .sys-banner-frame{
  clip-path:inset(0 0 0 0 round 18px);
  filter:blur(0) saturate(1);
  transform:none;
  opacity:1;
}
#coss-body .sys-banner-frame img{
  display:block;
  width:100%;
  height:auto;
  transform:scale(1.06);
  transition:transform 1.25s cubic-bezier(.16,1,.3,1) .08s;
}
#coss-body .sys-banner.is-in .sys-banner-frame img{
  transform:scale(1);
}

#coss-body .sys-steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
  padding-top:28px;
}
#coss-body .sys-rail{
  position:absolute;
  left:6%;
  right:6%;
  top:8px;
  height:2px;
  background:rgba(20,17,14,.12);
  overflow:hidden;
}
#coss-body .sys-rail > i{
  display:block;
  width:0;
  height:100%;
  background:#14110e;
  transform-origin:left center;
  transition:width .2s linear;
}
#coss-body .sys-step{
  position:relative;
  padding-top:18px;
  opacity:0;
  transform:translateY(28px);
  filter:blur(8px);
  transition:
    opacity .75s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1),
    filter .7s ease;
  transition-delay:calc(.15s + var(--i,0) * .1s);
}
#coss-body .sys-flow.is-in .sys-step{
  opacity:1;
  transform:none;
  filter:none;
}
#coss-body .sys-step::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#14110e;
  box-shadow:0 0 0 4px #f4f3ef;
  transform:scale(0);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(.05s + var(--i,0) * .1s);
}
#coss-body .sys-flow.is-in .sys-step::before{
  transform:scale(1);
}
#coss-body .sys-step-n{
  display:block;
  font:800 12px/1 "Archivo",sans-serif;
  letter-spacing:.14em;
  color:#c45a2c;
  margin-bottom:8px;
}
#coss-body .sys-step-en{
  display:block;
  font:700 11px/1 "Archivo",sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8a8378;
  margin-bottom:6px;
}
#coss-body .sys-step-ko{
  display:block;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em;
  color:#14110e;
  margin-bottom:10px;
}
#coss-body .sys-step-tx{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:#5c564e;
  word-break:keep-all;
}

@media (max-width:960px){
  #coss-body .sys-checks,
  #coss-body .sys-steps{grid-template-columns:1fr 1fr;gap:14px}
  #coss-body .sys-rail{display:none}
  #coss-body .sys-step::before{display:none}
  #coss-body .sys-step{padding-top:0;border-top:1px solid rgba(20,17,14,.14);padding-top:14px}
}
@media (max-width:560px){
  #coss-body .sys-checks,
  #coss-body .sys-steps{grid-template-columns:1fr}
  #coss-body .sys-banner-frame{border-radius:12px}
  #coss-body .sys-banner.is-in .sys-banner-frame{clip-path:inset(0 0 0 0 round 12px)}
}
@media (prefers-reduced-motion: reduce){
  #coss-body .sys-check,
  #coss-body .sys-step,
  #coss-body .sys-banner-frame,
  #coss-body .sys-banner-frame img,
  #coss-body .sys-step::before{
    transition:none!important;
    animation:none!important;
    opacity:1!important;
    filter:none!important;
    transform:none!important;
  }
  #coss-body .sys-banner-frame{clip-path:inset(0 0 0 0 round 18px)!important}
  #coss-body .sys-rail > i{width:100%!important}
}

/* 오시는 길 — 이미지 잘림 없이 전체 표시 */
#coss-body .ea-lead--full,
#coss-body .coss-editorial-a .ea-lead--full{
  overflow:visible!important;
}
#coss-body .ea-lead--full img,
#coss-body .coss-editorial-a .ea-lead--full img,
#coss-body .ea-lead--full video,
#coss-body .coss-editorial-a .ea-lead--full video{
  width:100%!important;
  height:auto!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  max-height:none!important;
}

/* ---------- 오시는 길 — arrival motion ---------- */
#coss-body .ea-lead--full[data-loc-lead]{
  position:relative;
  overflow:hidden!important;
  border-radius:4px;
}
#coss-body .ea-lead--full[data-loc-lead]::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg,transparent,#2f6fed 20%,#2f6fed 80%,transparent);
  transform:scaleY(0);
  transform-origin:top center;
  z-index:2;
  pointer-events:none;
  transition:transform .9s cubic-bezier(.22,1,.36,1) .15s;
}
#coss-body .ea-lead--full[data-loc-lead]::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,rgba(255,255,255,.55),rgba(255,255,255,0) 42%);
  transform:translateX(-108%);
  z-index:1;
  pointer-events:none;
}
#coss-body .ea-lead--full[data-loc-lead] img,
#coss-body .coss-editorial-a .ea-lead--full[data-loc-lead] img{
  transform:scale(1.04);
  filter:saturate(.86) contrast(1.02);
  transition:transform 1.25s cubic-bezier(.22,1,.36,1), filter 1.1s ease;
}
#coss-body .ea-lead--full[data-loc-lead].is-in::before{transform:scaleY(1)}
#coss-body .ea-lead--full[data-loc-lead].is-in::after{
  animation:loc-scan 1.15s cubic-bezier(.22,1,.36,1) .05s both;
}
#coss-body .ea-lead--full[data-loc-lead].is-in img{
  transform:scale(1);
  filter:saturate(1) contrast(1);
}
@keyframes loc-scan{
  from{transform:translateX(-108%)}
  to{transform:translateX(112%)}
}

#coss-body .ea-loc[data-loc] .loc-body[data-loc-body]{
  position:relative;
}
#coss-body .ea-loc[data-loc] .loc-body[data-loc-body]::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(47,111,237,.45),transparent);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 1s cubic-bezier(.22,1,.36,1) .1s;
  pointer-events:none;
}
#coss-body .ea-loc[data-loc] .loc-body[data-loc-body].is-in::before{transform:scaleY(1)}

#coss-body .ea-loc[data-loc] [data-loc-item]{
  opacity:0;
  transform:translate3d(-18px,10px,0);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 90ms + 120ms);
}
#coss-body .ea-loc[data-loc] .loc-body[data-loc-body].is-in [data-loc-item]{
  opacity:1;
  transform:none;
}

#coss-body .ea-loc[data-loc] .loc-map[data-loc-map]{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  isolation:isolate;
}
#coss-body .ea-loc[data-loc] .loc-map[data-loc-map] iframe{
  transform:scale(1.06);
  filter:grayscale(.55) contrast(1.04) brightness(.96);
  transition:transform 1.2s cubic-bezier(.22,1,.36,1), filter 1.1s ease;
}
#coss-body .ea-loc[data-loc] .loc-map[data-loc-map].is-in iframe{
  transform:scale(1);
  filter:grayscale(.18) contrast(1.02) brightness(1);
}
#coss-body .ea-loc[data-loc] .loc-pin{
  position:absolute;
  left:50%;
  top:46%;
  width:14px;height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  background:#2f6fed;
  box-shadow:0 0 0 0 rgba(47,111,237,.45);
  z-index:3;
  opacity:0;
  transform:translateY(-18px) scale(.6);
  pointer-events:none;
  transition:opacity .45s ease, transform .65s cubic-bezier(.22,1,.36,1);
}
#coss-body .ea-loc[data-loc] .loc-map[data-loc-map].is-in .loc-pin{
  opacity:1;
  transform:none;
  animation:loc-pin-pulse 2.2s ease-out .5s infinite;
}
#coss-body .ea-loc[data-loc] .loc-pin::after{
  content:"";
  position:absolute;
  left:50%;top:100%;
  width:2px;height:10px;
  margin-left:-1px;
  background:#2f6fed;
  border-radius:1px;
}
@keyframes loc-pin-pulse{
  0%{box-shadow:0 0 0 0 rgba(47,111,237,.5)}
  70%{box-shadow:0 0 0 18px rgba(47,111,237,0)}
  100%{box-shadow:0 0 0 0 rgba(47,111,237,0)}
}

#coss-body .ea-loc-shots{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  margin-top:36px;
}
#coss-body .ea-loc-shot{
  margin:0;
  padding:0;
  background:transparent;
}
#coss-body .ea-loc-shot-frame{
  overflow:hidden;
  border-radius:16px;
  background:#f4f3ef;
  clip-path:inset(0 100% 0 0 round 16px);
  transition:clip-path 1.05s cubic-bezier(.22,1,.36,1);
}
#coss-body .ea-loc-shot:nth-child(even) .ea-loc-shot-frame{
  clip-path:inset(0 0 0 100% round 16px);
}
#coss-body .ea-loc-shot.is-in .ea-loc-shot-frame{
  clip-path:inset(0 0 0 0 round 16px);
}
#coss-body .ea-loc-shot-frame img,
#coss-body .ea-loc-shot-frame video{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border:0;
  transform:scale(1.06);
  filter:saturate(.9);
  transition:transform 1.2s cubic-bezier(.22,1,.36,1) .08s, filter 1s ease .08s;
}
#coss-body .ea-loc-shot.is-in .ea-loc-shot-frame img,
#coss-body .ea-loc-shot.is-in .ea-loc-shot-frame video{
  transform:scale(1);
  filter:saturate(1);
}
#coss-body .ea-loc-shot figcaption{
  margin:0;
  padding:12px 4px 0;
  font-size:13px;
  color:#6a655c;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .55s ease .25s, transform .55s ease .25s;
}
#coss-body .ea-loc-shot.is-in figcaption{
  opacity:1;
  transform:none;
}

@media (max-width:720px){
  #coss-body .ea-loc-shot-frame,
  #coss-body .ea-loc-shot.is-in .ea-loc-shot-frame{border-radius:12px}
  #coss-body .ea-loc[data-loc] .loc-map[data-loc-map]{border-radius:12px}
}

@media (prefers-reduced-motion:reduce){
  #coss-body .ea-lead--full[data-loc-lead]::before,
  #coss-body .ea-lead--full[data-loc-lead]::after,
  #coss-body .ea-lead--full[data-loc-lead] img,
  #coss-body .ea-loc[data-loc] .loc-body[data-loc-body]::before,
  #coss-body .ea-loc[data-loc] [data-loc-item],
  #coss-body .ea-loc[data-loc] .loc-map[data-loc-map] iframe,
  #coss-body .ea-loc[data-loc] .loc-pin,
  #coss-body .ea-loc-shot-frame,
  #coss-body .ea-loc-shot-frame img,
  #coss-body .ea-loc-shot-frame video,
  #coss-body .ea-loc-shot figcaption{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    filter:none!important;
    opacity:1!important;
    clip-path:none!important;
  }
  #coss-body .ea-loc[data-loc] .loc-pin{opacity:.85!important}
}

/* ---------- 사업분야(C) — material motion + round media ---------- */
#coss-body .coss-soft-c{
  --sc-radius:18px;
}
#coss-body .coss-soft-c .sc-hero-img,
#coss-body .coss-soft-c .sc-hero-img img,
#coss-body .coss-soft-c .sc-product .pimg,
#coss-body .coss-soft-c .sc-product .pimg img,
#coss-body .coss-soft-c .sc-gal-frame,
#coss-body .coss-soft-c .sc-gal-shot img{
  border-radius:var(--sc-radius)!important;
}
#coss-body .coss-soft-c .sc-hero-img,
#coss-body .coss-soft-c .sc-product .pimg,
#coss-body .coss-soft-c .sc-gal-frame{
  overflow:hidden!important;
}

#coss-body .coss-soft-c[data-soft] [data-sc]{
  opacity:0;
  transform:translate3d(0,32px,0);
  filter:blur(6px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1), filter .85s ease;
}
#coss-body .coss-soft-c[data-soft] [data-sc].on{
  opacity:1;
  transform:none;
  filter:none;
}

#coss-body .coss-soft-c[data-soft] .sc-hero .hl::after{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .9s cubic-bezier(.22,1,.36,1) .18s;
}
#coss-body .coss-soft-c[data-soft] .sc-hero.on .hl::after{transform:scaleX(1)}
#coss-body .coss-soft-c[data-soft] .sc-hero .badge{
  opacity:0;transform:translateY(10px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
#coss-body .coss-soft-c[data-soft] .sc-hero.on .badge{opacity:1;transform:none}
#coss-body .coss-soft-c[data-soft] .sc-hero.on .badge .dot{
  animation:sc-dot-pulse 1.8s ease-out .4s 2;
}
@keyframes sc-dot-pulse{
  0%{box-shadow:0 0 0 0 rgba(31,125,90,.5)}
  70%{box-shadow:0 0 0 12px rgba(31,125,90,0)}
  100%{box-shadow:0 0 0 0 rgba(31,125,90,0)}
}
#coss-body .coss-soft-c[data-soft] .palette .sw{
  opacity:0;
  transform:scaleX(.2) translateY(8px);
  transform-origin:center;
  transition:opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 55ms + 280ms);
}
#coss-body .coss-soft-c[data-soft] .sc-hero.on .palette .sw{
  opacity:1;transform:none;
}

#coss-body .coss-soft-c[data-soft] .sc-hero-img[data-soft-media]{position:relative}
#coss-body .coss-soft-c[data-soft] .sc-hero-img[data-soft-media]::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(100deg,rgba(255,255,255,.5),rgba(255,255,255,0) 40%);
  transform:translateX(-120%);
  pointer-events:none;z-index:2;
}
#coss-body .coss-soft-c[data-soft] .sc-hero-img[data-soft-media].on::after{
  animation:sc-scan 1.1s cubic-bezier(.22,1,.36,1) .05s both;
}
@keyframes sc-scan{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}
#coss-body .coss-soft-c[data-soft] .sc-hero-img[data-soft-media] img{
  transform:scale(1.05);
  filter:saturate(.75) contrast(1.04);
  transition:transform 1.25s cubic-bezier(.22,1,.36,1), filter 1.1s ease;
}
#coss-body .coss-soft-c[data-soft] .sc-hero-img[data-soft-media].on img{
  transform:scale(1);
  filter:saturate(1) contrast(1);
}

#coss-body .coss-soft-c[data-soft] .sc-cards .scard{
  opacity:0;
  transform:translate3d(-28px,12px,0);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 110ms + 80ms);
  position:relative;
}
#coss-body .coss-soft-c[data-soft] .sc-cards .scard::before{
  content:"";
  position:absolute;left:0;top:18%;bottom:18%;width:2px;
  background:var(--sc-grn-dk,#1f7d5a);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 110ms + 160ms);
}
#coss-body .coss-soft-c[data-soft] .sc-cards.on .scard{opacity:1;transform:none}
#coss-body .coss-soft-c[data-soft] .sc-cards.on .scard::before{transform:scaleY(1)}
#coss-body .coss-soft-c[data-soft] .sc-cards .scard .num{
  opacity:0;transform:translateY(8px);
  transition:opacity .55s ease, transform .55s ease;
  transition-delay:calc(var(--i,0) * 110ms + 220ms);
}
#coss-body .coss-soft-c[data-soft] .sc-cards.on .scard .num{opacity:1;transform:none}

#coss-body .coss-soft-c[data-soft] .sc-product[data-soft-product]{
  clip-path:inset(0 0 100% 0 round 18px);
  border-radius:18px!important;
  transition:clip-path 1s cubic-bezier(.22,1,.36,1), opacity .85s ease, transform .85s cubic-bezier(.22,1,.36,1), filter .85s ease;
}
#coss-body .coss-soft-c[data-soft] .sc-product[data-soft-product].on{
  clip-path:inset(0 0 0 0 round 18px);
}
#coss-body .coss-soft-c[data-soft] .sc-product .sc-product-copy > *{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s ease, transform .65s cubic-bezier(.22,1,.36,1);
}
#coss-body .coss-soft-c[data-soft] .sc-product.on .sc-product-copy > *:nth-child(1){transition-delay:.12s}
#coss-body .coss-soft-c[data-soft] .sc-product.on .sc-product-copy > *:nth-child(2){transition-delay:.2s}
#coss-body .coss-soft-c[data-soft] .sc-product.on .sc-product-copy > *:nth-child(3){transition-delay:.28s}
#coss-body .coss-soft-c[data-soft] .sc-product.on .sc-product-copy > *:nth-child(4){transition-delay:.36s}
#coss-body .coss-soft-c[data-soft] .sc-product.on .sc-product-copy > *{opacity:1;transform:none}
#coss-body .coss-soft-c[data-soft] .sc-product .chips span{
  opacity:0;transform:translateY(8px);
  transition:opacity .45s ease, transform .5s ease;
  transition-delay:calc(var(--i,0) * 70ms + .42s);
}
#coss-body .coss-soft-c[data-soft] .sc-product.on .chips span{opacity:1;transform:none}
#coss-body .coss-soft-c[data-soft] .sc-product .pimg{
  opacity:0;transform:translate3d(24px,0,0) scale(1.04);
  transition:opacity .85s cubic-bezier(.22,1,.36,1) .2s, transform 1s cubic-bezier(.22,1,.36,1) .2s;
}
#coss-body .coss-soft-c[data-soft] .sc-product.on .pimg{opacity:1;transform:none}

#coss-body .coss-soft-c[data-soft] .sc-stats .s{
  opacity:0;transform:translateY(22px);
  transition:opacity .65s ease, transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 90ms + 60ms);
}
#coss-body .coss-soft-c[data-soft] .sc-stats.on .s{opacity:1;transform:none}
#coss-body .coss-soft-c[data-soft] .sc-stats.on .n{
  animation:sc-num-pop .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i,0) * 90ms + 120ms);
}
@keyframes sc-num-pop{
  from{transform:scale(.86);opacity:.4}
  to{transform:none;opacity:1}
}

#coss-body .coss-soft-c[data-soft] .sc-gal-shot{opacity:0}
#coss-body .coss-soft-c[data-soft] .sc-gal-shot.is-in{opacity:1}
#coss-body .coss-soft-c[data-soft] .sc-gal-frame{
  clip-path:inset(0 100% 0 0 round 18px);
  transition:clip-path 1.05s cubic-bezier(.22,1,.36,1);
}
#coss-body .coss-soft-c[data-soft] .sc-gal-shot:nth-child(even) .sc-gal-frame{
  clip-path:inset(0 0 0 100% round 18px);
}
#coss-body .coss-soft-c[data-soft] .sc-gal-shot.is-in .sc-gal-frame{
  clip-path:inset(0 0 0 0 round 18px);
}
#coss-body .coss-soft-c[data-soft] .sc-gal-frame img{
  transform:scale(1.06);
  filter:saturate(.88);
  transition:transform 1.15s cubic-bezier(.22,1,.36,1) .06s, filter .9s ease .06s;
}
#coss-body .coss-soft-c[data-soft] .sc-gal-shot.is-in .sc-gal-frame img{
  transform:scale(1);filter:saturate(1);
}
#coss-body .coss-soft-c[data-soft] .sc-gal-shot figcaption{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease .2s, transform .5s ease .2s;
}
#coss-body .coss-soft-c[data-soft] .sc-gal-shot.is-in figcaption{opacity:1;transform:none}

#coss-body .coss-soft-c[data-soft] .sc-cta-links a{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease, transform .55s ease, border-color .25s;
  transition-delay:calc(var(--i,0) * 70ms + 120ms);
}
#coss-body .coss-soft-c[data-soft] .sc-cta.on .sc-cta-links a{opacity:1;transform:none}

@media (max-width:720px){
  #coss-body .coss-soft-c{--sc-radius:14px}
  #coss-body .coss-soft-c[data-soft] .sc-product[data-soft-product],
  #coss-body .coss-soft-c[data-soft] .sc-product[data-soft-product].on{
    border-radius:14px!important;
    clip-path:inset(0 0 0 0 round 14px);
  }
}

@media (prefers-reduced-motion:reduce){
  #coss-body .coss-soft-c[data-soft] [data-sc],
  #coss-body .coss-soft-c[data-soft] .sc-hero .hl::after,
  #coss-body .coss-soft-c[data-soft] .sc-hero .badge,
  #coss-body .coss-soft-c[data-soft] .palette .sw,
  #coss-body .coss-soft-c[data-soft] .sc-hero-img img,
  #coss-body .coss-soft-c[data-soft] .sc-cards .scard,
  #coss-body .coss-soft-c[data-soft] .sc-cards .scard::before,
  #coss-body .coss-soft-c[data-soft] .sc-product,
  #coss-body .coss-soft-c[data-soft] .sc-product .sc-product-copy > *,
  #coss-body .coss-soft-c[data-soft] .sc-product .chips span,
  #coss-body .coss-soft-c[data-soft] .sc-product .pimg,
  #coss-body .coss-soft-c[data-soft] .sc-stats .s,
  #coss-body .coss-soft-c[data-soft] .sc-gal-frame,
  #coss-body .coss-soft-c[data-soft] .sc-gal-frame img,
  #coss-body .coss-soft-c[data-soft] .sc-gal-shot,
  #coss-body .coss-soft-c[data-soft] .sc-cta-links a{
    animation:none!important;transition:none!important;
    transform:none!important;filter:none!important;opacity:1!important;
    clip-path:none!important;
  }
}

/* ---------- 사업실적 (/performance/) — 이미지 잘림 없이 ---------- */
#coss-body:has(.perf-cards-sec) .editorial-photo{
  overflow:visible!important;
  border-radius:18px!important;
}
#coss-body:has(.perf-cards-sec) .editorial-photo>img{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:18px!important;
  transform:none!important;
}
#coss-body:has(.perf-cards-sec) .editorial-gallery figure>div{
  aspect-ratio:auto!important;
  height:auto!important;
  overflow:visible!important;
  background:transparent!important;
  border-radius:18px!important;
}
#coss-body:has(.perf-cards-sec) .editorial-gallery img{
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:18px!important;
  transform:none!important;
}
#coss-body .perf-cards-sec .pr-thumb{
  width:112px!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  border-radius:12px!important;
  background:#eef1ec!important;
  display:flex;
  align-items:center;
  justify-content:center;
}
#coss-body .perf-cards-sec .pr-thumb img{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block;
  transform:none!important;
}
#coss-body .perf-cards-sec .perf-row:hover .pr-thumb img{
  transform:none!important;
}
@media (max-width:720px){
  #coss-body:has(.perf-cards-sec) .editorial-photo,
  #coss-body:has(.perf-cards-sec) .editorial-photo>img,
  #coss-body:has(.perf-cards-sec) .editorial-gallery figure>div,
  #coss-body:has(.perf-cards-sec) .editorial-gallery img{
    border-radius:14px!important;
  }
  #coss-body .perf-cards-sec .pr-thumb{width:88px!important;border-radius:10px!important}
}

/* ---------- R&D (/rnd/*) — 대표 이미지: 잘림 없이 전체 표시 ---------- */
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-photo,
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-photo.material-photo,
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .material-layout:not(.compact-hero) .editorial-photo,
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .material-layout:not(.compact-hero) .editorial-photo.material-photo{
  margin-top:28px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:none!important;
  border-radius:18px!important;
  overflow:visible!important;
  filter:none!important;
  transform:none!important;
  opacity:1!important;
  padding:0!important;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-photo > img,
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-photo.material-photo > img,
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .material-layout:not(.compact-hero) .editorial-photo > img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  filter:none!important;
  transform:none!important;
  box-shadow:none!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-photo:hover,
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-photo:hover > img{
  transform:none!important;
  box-shadow:none!important;
  filter:none!important;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-photo .photo-word,
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-photo figcaption{
  display:none!important;
}
@media (min-width:1000px){
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .material-layout:not(.compact-hero) .editorial-photo > img{
    height:auto!important;
    max-height:none!important;
  }
}
@media (max-width:720px){
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-photo,
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-photo > img{
    border-radius:14px!important;
    height:auto!important;
  }
}

/* ---------- R&D — 갤러리 시편 프레임: 시편 프레임 + 리빌 ---------- */
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:28px 22px!important;
  align-items:start;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure{
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  position:relative;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure:nth-child(even){
  padding-top:0!important;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure:nth-child(2){
  margin-top:28px!important;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure:nth-child(3){
  margin-top:12px!important;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure > div{
  position:relative!important;
  overflow:hidden!important;
  aspect-ratio:auto!important;
  max-width:none!important;
  margin:0!important;
  border-radius:2px 18px 2px 18px!important;
  background:#f7f5ef!important;
  border:0!important;
  box-shadow:none!important;
  padding:10px 10px 12px!important;
  outline:1px solid rgba(24,61,88,.16);
  outline-offset:0;
  transform:translateY(40px) rotate(-1.1deg)!important;
  opacity:0!important;
  transition:
    opacity .95s cubic-bezier(.22,1,.36,1),
    transform .95s cubic-bezier(.22,1,.36,1),
    outline-color .35s ease,
    box-shadow .45s ease!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure:nth-child(2) > div{
  border-radius:18px 2px 18px 2px!important;
  transform:translateY(52px) rotate(1.25deg)!important;
  max-width:none!important;
  background:#f3f1ea!important;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure:nth-child(3) > div{
  border-radius:2px 2px 18px 18px!important;
  transform:translateY(46px) rotate(-.55deg)!important;
  background:#f5f3ed!important;
}
/* 좌측 연구 인덱스 바 */
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure > div::before{
  content:"";
  position:absolute;
  left:0;top:14%;bottom:14%;
  width:3px;
  background:#183d58;
  border-radius:0 2px 2px 0;
  pointer-events:none;
  z-index:2;
}
/* 호버 샤인 */
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure > div::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  background-size:220% 100%;
  background-position:160% 0;
  pointer-events:none;
  z-index:3;
  transition:background-position 1.05s ease;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .collection-section.in-view .editorial-gallery > figure > div,
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .collection-section.will-reveal.in-view .editorial-gallery > figure > div{
  opacity:1!important;
  transform:translateY(0) rotate(0deg)!important;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .collection-section.in-view .editorial-gallery > figure:nth-child(2) > div{
  transition-delay:.16s!important;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .collection-section.in-view .editorial-gallery > figure:nth-child(3) > div{
  transition-delay:.28s!important;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery img{
  position:relative;
  z-index:1;
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:2px!important;
  transform:none!important;
  background:#fff!important;
  -webkit-mask-image:none!important;mask-image:none!important;
  transition:transform .7s cubic-bezier(.22,1,.36,1)!important;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery figcaption{
  display:flex!important;
  align-items:flex-start;
  gap:10px;
  padding:14px 2px 0!important;
  font-size:12.5px!important;
  font-weight:650!important;
  line-height:1.45!important;
  color:#2a3644!important;
  letter-spacing:.01em;
}
#coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery figcaption span{
  flex:0 0 auto;
  display:inline-grid!important;
  place-items:center;
  width:34px!important;height:22px!important;
  margin:1px 0 0!important;
  border-radius:2px!important;
  background:#183d58!important;
  color:#f4f1ea!important;
  font:700 10px/1 ui-monospace,Menlo,Consolas,monospace!important;
  letter-spacing:.08em!important;
  box-shadow:3px 3px 0 rgba(24,61,88,.16);
}
@media (hover:hover){
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery figure:hover > div{
    outline-color:rgba(24,61,88,.34);
    box-shadow:0 22px 40px -26px rgba(18,40,56,.4)!important;
    transform:translateY(-5px) rotate(0deg)!important;
  }
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery figure:hover > div::after{
    background-position:-160% 0;
  }
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery figure:hover img{
    transform:scale(1.015)!important;
  }
}
@media (max-width:980px){
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery{
    grid-template-columns:1fr 1fr!important;
  }
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure:nth-child(2),
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure:nth-child(3){
    margin-top:0!important;
  }
}
@media (max-width:720px){
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery{
    grid-template-columns:1fr!important;
    gap:26px!important;
  }
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure > div,
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure:nth-child(2) > div,
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure:nth-child(3) > div{
    border-radius:12px!important;
    transform:translateY(28px)!important;
    padding:8px!important;
  }
}
@media (prefers-reduced-motion:reduce){
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery > figure > div,
  #coss-body:has(.section-nav a[href^="/rnd/"][aria-current="page"]) .editorial-gallery img{
    transition:none!important;
    transform:none!important;
    opacity:1!important;
  }
}

/* ---------- 제품 안내 (/products) — 히어로·제품카드·갤러리 ---------- */
#coss-body:has(.product-grid) .editorial-photo,
#coss-body:has(.product-grid) .editorial-photo.material-photo,
#coss-body:has(.product-grid) .material-layout:not(.compact-hero) .editorial-photo{
  margin-top:28px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:18px!important;
  overflow:hidden!important;
  padding:0!important;
  opacity:1!important;
  transform:none!important;
}
#coss-body:has(.product-grid) .editorial-photo > img,
#coss-body:has(.product-grid) .material-layout:not(.compact-hero) .editorial-photo > img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  border-radius:18px!important;
  background:transparent!important;
  transform:none!important;
  filter:none!important;
  box-shadow:none!important;
}
#coss-body:has(.product-grid) .editorial-photo .photo-word,
#coss-body:has(.product-grid) .editorial-photo figcaption{display:none!important}
#coss-body:has(.product-grid) .editorial-photo:hover,
#coss-body:has(.product-grid) .editorial-photo:hover > img{
  transform:none!important;box-shadow:none!important;filter:none!important;
}

#coss-body:has(.product-grid) .product-image{
  position:relative!important;
  overflow:hidden!important;
  aspect-ratio:4/3!important;
  border-radius:2px 18px 2px 18px!important;
  background:#f3f1ea!important;
  border:0!important;
  outline:1px solid rgba(24,61,88,.14);
  box-shadow:none!important;
  padding:0!important;
  transform:translateY(28px) rotate(-.8deg)!important;
  opacity:0!important;
  transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,outline-color .35s ease!important;
}
#coss-body:has(.product-grid) .collection-section:nth-of-type(even) .product-image{
  border-radius:18px 2px 18px 2px!important;
  transform:translateY(34px) rotate(.9deg)!important;
}
#coss-body:has(.product-grid) .collection-section:nth-of-type(3n) .product-image{
  border-radius:2px 2px 18px 18px!important;
  transform:translateY(30px) rotate(-.4deg)!important;
}
#coss-body:has(.product-grid) .product-image::before{
  content:"";
  position:absolute;left:0;top:16%;bottom:16%;width:3px;z-index:2;
  background:#183d58;border-radius:0 2px 2px 0;pointer-events:none;
}
#coss-body:has(.product-grid) .product-image::after{
  content:"";
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.35) 50%,transparent 62%);
  background-size:220% 100%;background-position:160% 0;
  transition:background-position 1s ease;
}
#coss-body:has(.product-grid) .collection-section.in-view .product-image,
#coss-body:has(.product-grid) .collection-section.will-reveal.in-view .product-image{
  opacity:1!important;transform:translateY(0) rotate(0)!important;
}
#coss-body:has(.product-grid) .product-image img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center center!important;
  padding:0!important;border-radius:0!important;
  filter:none!important;transform:none!important;
  transition:transform .7s cubic-bezier(.22,1,.36,1)!important;
}
#coss-body:has(.product-grid) .product-grid > figure{
  opacity:1!important;transform:none!important;
}
#coss-body:has(.product-grid) .product-grid figcaption{
  padding-top:12px!important;font-size:13px!important;font-weight:650!important;color:#2a3644!important;
}
@media (hover:hover){
  #coss-body:has(.product-grid) .product-grid figure:hover .product-image{
    outline-color:rgba(24,61,88,.32);
    box-shadow:0 22px 40px -24px rgba(18,40,56,.4)!important;
    transform:translateY(-5px) rotate(0)!important;
    border-color:transparent!important;
  }
  #coss-body:has(.product-grid) .product-grid figure:hover .product-image::after{background-position:-160% 0}
  #coss-body:has(.product-grid) .product-grid figure:hover .product-image img{transform:scale(1.03)!important}
}

#coss-body:has(.product-grid) .editorial-gallery{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:28px 22px!important;
}
#coss-body:has(.product-grid) .editorial-gallery > figure{margin:0!important;padding:0!important}
#coss-body:has(.product-grid) .editorial-gallery > figure:nth-child(even){padding-top:0!important}
#coss-body:has(.product-grid) .editorial-gallery > figure > div{
  position:relative!important;overflow:hidden!important;
  aspect-ratio:4/3!important;max-width:none!important;margin:0!important;
  border-radius:2px 18px 2px 18px!important;background:#f3f1ea!important;
  border:0!important;outline:1px solid rgba(24,61,88,.14);padding:0!important;
  transform:translateY(36px) rotate(-1deg)!important;opacity:0!important;
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),box-shadow .4s ease!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
#coss-body:has(.product-grid) .editorial-gallery > figure:nth-child(2) > div{
  border-radius:18px 2px 18px 2px!important;transform:translateY(44px) rotate(1.1deg)!important;max-width:none!important;
}
#coss-body:has(.product-grid) .collection-section.in-view .editorial-gallery > figure > div,
#coss-body:has(.product-grid) .collection-section.will-reveal.in-view .editorial-gallery > figure > div{
  opacity:1!important;transform:none!important;
}
#coss-body:has(.product-grid) .collection-section.in-view .editorial-gallery > figure:nth-child(2) > div{transition-delay:.14s!important}
#coss-body:has(.product-grid) .editorial-gallery img{
  width:100%!important;height:100%!important;object-fit:cover!important;padding:0!important;border-radius:0!important;transform:none!important;
}
#coss-body:has(.product-grid) .editorial-gallery figcaption{
  display:flex!important;align-items:center;gap:10px;padding:14px 2px 0!important;
  font-size:13px!important;font-weight:650!important;color:#2a3644!important;
}
#coss-body:has(.product-grid) .editorial-gallery figcaption span{
  display:inline-grid!important;place-items:center;width:34px!important;height:22px!important;margin:0!important;
  border-radius:2px!important;background:#183d58!important;color:#f4f1ea!important;
  font:700 10px/1 ui-monospace,Menlo,Consolas,monospace!important;letter-spacing:.08em!important;
  box-shadow:3px 3px 0 rgba(24,61,88,.16);
}
@media (max-width:720px){
  #coss-body:has(.product-grid) .editorial-gallery{grid-template-columns:1fr!important}
  #coss-body:has(.product-grid) .product-image,
  #coss-body:has(.product-grid) .editorial-gallery > figure > div{border-radius:12px!important;transform:translateY(24px)!important}
}
@media (prefers-reduced-motion:reduce){
  #coss-body:has(.product-grid) .product-image,
  #coss-body:has(.product-grid) .editorial-gallery > figure > div{
    transition:none!important;transform:none!important;opacity:1!important;
  }
}