#coss-body{background:radial-gradient(ellipse at 95% 12%,#fff4cf99,transparent 36%),linear-gradient(160deg,#def3ff,#f5fbfc 48%,#e4efd9 85%,#fff);}
#coss-body:before{background:url('/assets/coten/company/img-cloud01.webp') -60px 120px/450px auto no-repeat,url('/assets/coten/company/img-cloud02.webp') right 850px/440px auto no-repeat,url('/assets/coten/company/img-cloud01.webp') left 2400px/380px auto no-repeat;opacity:.48;animation:sky-drift 22s ease-in-out infinite alternate}
#coss-body .design-option[data-image*="/motifs/"]{order:-1}
#coss-body .design-option img{object-fit:contain;padding:6px;background:#edf4ec;border-radius:10px}
/* ============================================================
   서브페이지 사진·모션 — 역할별 다른 언어
   한 가지 blob/AOS를 전체에 복붙하지 않음.
   소재 브랜드(코스): 촉감·색칩·현장 사진이 主役. 모션은 절제.
   ============================================================ */

/* ---------- 1) 히어로: 건축적 코너컷 + 이미지 settle ---------- */
#coss-body .editorial-photo{
  position:relative;overflow:hidden;
  border-radius:2px 132px 2px 2px;
  box-shadow:none;
}
#coss-body .editorial-photo>img{
  border-radius:inherit;
  transform:scale(1.07);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
#coss-body .editorial-hero.is-scene-in .editorial-photo>img{transform:scale(1)}
#coss-body .editorial-photo:hover>img{transform:scale(1.03);transition-duration:1.8s}
#coss-body .editorial-photo.material-photo{
  background:linear-gradient(145deg,#eef1e6,#e4e8da);
  border-radius:96px 2px 2px 2px;
}
#coss-body .material-layout:not(.compact-hero) .editorial-photo,
#coss-body .material-layout:not(.compact-hero) .editorial-photo.material-photo{
  border-radius:96px 2px 2px 2px;
}

/* 히어로 카피: 타이틀만 마스크, 나머지는 즉시 */
#coss-body .editorial-hero h1{
  overflow:hidden;
}
#coss-body .editorial-hero h1{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1s cubic-bezier(.16,1,.3,1) .12s;
}
#coss-body .editorial-hero.is-scene-in h1{clip-path:inset(0)}
#coss-body .editorial-hero .hero-line{
  position:relative;display:inline-block;
  opacity:0;transition:opacity .6s ease .55s;
}
#coss-body .editorial-hero.is-scene-in .hero-line{opacity:1}
#coss-body .editorial-hero .hero-line::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:currentColor;opacity:.35;
  transition:width .9s cubic-bezier(.16,1,.3,1) .7s;
}
#coss-body .editorial-hero.is-scene-in .hero-line::after{width:100%}

/* ---------- 2) 제품: 색칩/샘플 플레이트 (카탈로그) ---------- */
#coss-body .product-image{
  position:relative;overflow:hidden;
  border-radius:14px;
  background:#ebeadf;
  border:1px solid #d8dccf;
  box-shadow:inset 0 0 0 10px #f4f5ef;
  transition:background .45s ease,border-color .45s ease,box-shadow .45s ease;
}
#coss-body .product-grid>figure:nth-child(3n+2) .product-image{
  background:#e4ebe8;border-color:#c9d6d0;box-shadow:inset 0 0 0 10px #eef5f2;
}
#coss-body .product-grid>figure:nth-child(3n+3) .product-image{
  background:#ece6df;border-color:#d6cfc4;box-shadow:inset 0 0 0 10px #f6f1ea;
}
#coss-body .product-image img{
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s ease;
  filter:saturate(.92);
}
#coss-body .product-grid figure:hover .product-image{
  background:#dfe8d8;border-color:#aebfa0;
  box-shadow:inset 0 0 0 8px #f7faf3;
}
#coss-body .product-grid figure:hover .product-image img{
  transform:scale(1.045);filter:saturate(1.05);
}
#coss-body .product-grid figcaption{
  padding-top:16px;font-weight:650;letter-spacing:-.02em;
  transition:letter-spacing .35s ease;
}
#coss-body .product-grid figure:hover figcaption{letter-spacing:0}

/* 제품 리빌: 좌/우 교차 슬라이드 (동일 fade-up 금지) */
#coss-body .collection-section.will-reveal .product-grid > figure{
  opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
#coss-body .collection-section.will-reveal .product-grid > figure:nth-child(odd){transform:translateX(-28px)}
#coss-body .collection-section.will-reveal .product-grid > figure:nth-child(even){transform:translateX(28px)}
#coss-body .collection-section.will-reveal .product-grid > .product-summary{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) .12s,transform .7s cubic-bezier(.16,1,.3,1) .12s;
}
#coss-body .collection-section.will-reveal.in-view .product-grid > figure,
#coss-body .collection-section.will-reveal.in-view .product-grid > .product-summary{
  opacity:1;transform:none;
}
#coss-body .collection-section.will-reveal.in-view .product-grid > figure:nth-child(2){transition-delay:.1s}
#coss-body .collection-section.will-reveal.in-view .product-grid > figure:nth-child(3){transition-delay:.18s}
#coss-body .collection-section.will-reveal.in-view .product-grid > figure:nth-child(4){transition-delay:.24s}

/* ---------- 3) 갤러리: 에디토리얼 리듬 (매 컷 다른 실루엣) ---------- */
#coss-body .editorial-gallery > figure > div{
  position:relative;overflow:hidden;background:#e6e8dc;
  border-radius:22px 22px 6px 6px;
}
#coss-body .editorial-gallery > figure:nth-child(2) > div{
  border-radius:50% 50% 42% 58% / 48% 52% 48% 52%;
  background:#e2ebe4;
  aspect-ratio:1;max-height:360px;margin-inline:auto;
}
#coss-body .editorial-gallery > figure:nth-child(3) > div{
  border-radius:6px 6px 48px 6px;
}
#coss-body .editorial-gallery > figure:nth-child(4n) > div{
  border-radius:6px 64px 6px 64px;
}
#coss-body .editorial-gallery img{
  transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s ease;
}
#coss-body .editorial-gallery > figure:nth-child(2) img{height:100%;object-fit:cover}
#coss-body .editorial-gallery figure:hover img{transform:scale(1.05)}
#coss-body .editorial-gallery figcaption{
  display:flex;align-items:baseline;gap:14px;
  padding-top:14px;font-size:13px;letter-spacing:-.01em;
}

/* 갤러리 리빌: 세로 와이프 */
#coss-body .collection-section.will-reveal .editorial-gallery > figure{
  opacity:0;
  clip-path:inset(0 0 28% 0);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),clip-path .95s cubic-bezier(.16,1,.3,1);
}
#coss-body .collection-section.will-reveal.in-view .editorial-gallery > figure{
  opacity:1;clip-path:inset(0);
}
#coss-body .collection-section.will-reveal.in-view .editorial-gallery > figure:nth-child(2){transition-delay:.14s}
#coss-body .collection-section.will-reveal.in-view .editorial-gallery > figure:nth-child(3){transition-delay:.22s}

/* 컬렉션은 부모 fade 금지 — 제품/갤러리 자식이 각자 다른 모션 */
#coss-body .collection-section.will-reveal{opacity:1;transform:none}

/* ---------- 4) 스토리 본문: 페이드만 (자식 스태거 없음) ---------- */
#coss-body .story-section.will-reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
#coss-body .story-section.will-reveal.in-view{opacity:1;transform:none}
#coss-body .collection-section.will-reveal .section-heading{
  opacity:0;transform:translateY(12px);
  transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1);
}
#coss-body .collection-section.will-reveal.in-view .section-heading{opacity:1;transform:none}

/* ---------- 5) 게시 상세: 시네마틱 와이드 ---------- */
#coss-body .cy-detail-hero{
  overflow:hidden;
  border-radius:4px 4px 28px 4px;
  background:#1a2a28;
}
#coss-body .cy-detail-hero img{
  border-radius:inherit;
  transition:transform 2.4s cubic-bezier(.16,1,.3,1),opacity .5s ease;
  opacity:.96;
}
#coss-body .cy-detail-hero:hover img{transform:scale(1.035);opacity:1}

/* ---------- 6) 저널 목록: 샤프 + 채도 전환 ---------- */
#coss-body .journal-row img{
  border-radius:3px 18px 3px 3px;
  filter:grayscale(.55) contrast(1.05);
  transition:filter .45s ease,transform .45s cubic-bezier(.16,1,.3,1),border-radius .45s ease;
}
#coss-body .journal-row:nth-child(2n) img{border-radius:18px 3px 3px 3px}
#coss-body .journal-row:hover img{
  filter:none;transform:scale(1.03);
  border-radius:3px;
}

/* ---------- 7) 회사소개(A): 매거진 — 컬러 슬래브 위 사진 ---------- */
#coss-body .coss-editorial-a .ea-split .figure{
  position:relative;z-index:0;overflow:visible;border-radius:0;
  filter:none;box-shadow:none;
}
#coss-body .coss-editorial-a .ea-split .figure::before{
  content:"";position:absolute;z-index:-1;
  inset:18px -18px -18px 18px;
  background:#c5d6e8;border-radius:2px;
  transition:transform .7s cubic-bezier(.16,1,.3,1),background .5s ease;
}
#coss-body .coss-editorial-a .ea-split .figure img{
  display:block;width:100%;border-radius:2px;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
#coss-body .coss-editorial-a .ea-split .figure:hover::before{
  transform:translate(-8px,-8px);background:#9eb8d4;
}
#coss-body .coss-editorial-a .ea-split .figure:hover img{transform:scale(1.02)}
#coss-body .coss-editorial-a .ea-mgrid figure{
  overflow:hidden;border-radius:2px;filter:none;
  outline:1px solid #d5dde6;
}
#coss-body .coss-editorial-a .ea-mgrid figure:nth-child(2n){border-radius:2px 36px 2px 2px}
#coss-body .coss-editorial-a .ea-mgrid figure:nth-child(3n){border-radius:36px 2px 2px 2px}
#coss-body .coss-editorial-a .cert-card .cert-thumb{
  border-radius:2px;overflow:hidden;
  outline:1px solid #d7dde3;
  transition:outline-color .35s ease,transform .4s ease;
}
#coss-body .coss-editorial-a .cert-card:hover .cert-thumb{
  outline-color:#6d8fad;transform:translateY(-3px);
}

/* ---------- 8) 사업분야(C): 놀이 감성 — 소프트 스타디움만 여기 ---------- */
#coss-body .coss-soft-c .sc-hero-img{
  overflow:hidden;
  border-radius:18px;
  filter:none;
}
#coss-body .coss-soft-c .sc-product .pimg{
  overflow:hidden;border-radius:18px;
  filter:none;
}
#coss-body .coss-soft-c .sc-gallery figure{
  overflow:visible;border-radius:0;
  filter:none;
  aspect-ratio:auto;
}
#coss-body .coss-soft-c .sc-gallery figure:nth-child(2n){border-radius:0}
#coss-body .coss-soft-c .sc-hero-img img,
#coss-body .coss-soft-c .sc-product .pimg img{
  transition:opacity .4s ease;
}
#coss-body .coss-soft-c .sc-hero-img:hover img,
#coss-body .coss-soft-c .sc-product .pimg:hover img{transform:none;opacity:.92}

/* ---------- 9) 실적·외부자료: 산업용 하드 엣지 ---------- */
#coss-body .perf-cards-sec .pr-thumb{border-radius:6px!important}
#coss-body .external-materials figure{
  overflow:hidden;border-radius:4px;
  outline:1px solid #d5d9ce;filter:none;
}
#coss-body .external-materials figure:nth-child(2n){border-radius:4px 28px 4px 4px}
#coss-body .external-materials img{border-radius:inherit;transition:transform .7s cubic-bezier(.16,1,.3,1)}
#coss-body .external-materials figure:hover img{transform:scale(1.04)}

@media(max-width:780px){
  #coss-body .editorial-photo{border-radius:2px 72px 2px 2px}
  #coss-body .editorial-photo.material-photo,
  #coss-body .material-layout:not(.compact-hero) .editorial-photo{border-radius:56px 2px 2px 2px}
  #coss-body .editorial-gallery > figure:nth-child(2) > div{max-height:280px}
  #coss-body .cy-detail-hero,#coss-body .cy-detail-hero img{border-radius:4px 4px 20px 4px}
  #coss-body .coss-soft-c .sc-gallery figure{border-radius:28px}
}
#coss-body .color-add{height:65px}#coss-body .color-card{padding:10px 6px;background:#fff9;box-shadow:0 5px 14px #284b6010}
#coss-body .keyword-mixer{margin-top:22px;padding-top:16px;border-top:1px solid #ffffff29}#coss-body .keyword-mixer label{color:#e0e8e8;font-size:12px}#coss-body .keyword-mixer #suggest-colors{margin-top:12px;background:#ffffff0d;color:white}
#coss-body #floor-canvas{touch-action:none;cursor:grab;outline-offset:-4px}#coss-body #floor-canvas:active{cursor:grabbing}
#coss-body .sim-view{align-self:start;position:sticky;top:24px}#coss-body .canvas-wrap{flex:none;min-height:0}
@media(max-width:900px){#coss-body .sim-view{position:static}}
#coss-body .placement-editor{border-top:1px solid #d1e0e4;margin-top:18px;padding-top:16px;font-size:12px}
#coss-body .placement-help{font-size:11px;line-height:1.7;color:#597985;margin:7px 0}
#coss-body #placed-designs{display:flex;gap:6px;flex-wrap:wrap;max-height:120px;overflow:auto;margin:10px 0}
#coss-body #placed-designs button{background:#f0f7f7;border:1px solid #c8deda;border-radius:20px;padding:5px 8px;color:#2d555e;font-size:10px}
#coss-body #placed-designs button[aria-pressed=true]{background:#215a60;color:white}
#coss-body .placement-actions{display:flex;gap:6px}#coss-body .placement-actions button{flex:1;padding:8px 3px;border:1px solid #bcd3d9;border-radius:8px;background:white;font-size:11px;color:#345c68}
#coss-body #sample-showroom{margin:45px -2%;padding:30px;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:28px;color:#f8fafb;border:1px solid #ffffff2b;border-radius:24px;background:linear-gradient(120deg,#101d22e8,#182925da),url('/assets/play/application-reference.png') center/cover;box-shadow:0 25px 60px #17334228;position:relative;overflow:hidden}
#coss-body #sample-showroom h2{color:white;font-weight:800;font-size:21px;letter-spacing:-.8px;margin:0 0 10px}
#coss-body #sample-showroom .eyebrow{color:#b3bcb9}
#coss-body #sample-showroom p{color:#b9c3c6}
#coss-body #tile-viewport{height:440px;background:linear-gradient(145deg,#eceff3,#f7f9fa);border:20px solid #333b30;border-radius:24px;margin-top:22px;position:relative;box-shadow:inset 0 0 0 1px #b5a97a}
#coss-body #tile-viewport:after{content:'좌우·상하 드래그로 자유 회전 · 스크롤 확대';position:absolute;bottom:16px;left:50%;transform:translateX(-50%);white-space:nowrap;color:white;background:#27313bbc;border-radius:30px;padding:8px 12px;font-size:10px;pointer-events:none}
#coss-body #sample-tile{width:240px;height:240px;box-shadow:4px 8px #3e4540,14px 20px 22px #1c2c3625;border:0;transform:rotateX(12deg) rotateZ(0deg)}
#coss-body .tile-actions{display:flex;gap:10px;margin:15px 0}
#coss-body #tile-png{background:#ff601e;color:white;border:0;border-radius:25px;padding:11px 24px;font-size:12px}
#coss-body #tile-reset,#coss-body #more-recommendations{background:#ffffff0d;color:white;border:1px solid #ffffff38;border-radius:22px;padding:8px 13px;font-size:11px}
#coss-body .recommendation-heading{display:flex;justify-content:space-between;align-items:start;gap:10px}
#coss-body #sample-showroom .recommendations>label,#coss-body #sample-showroom .recommendations>#suggest-colors,#coss-body #sample-showroom .recommendations>.color-note{display:none}
#coss-body .recommendation-window{height:580px;overflow:auto;scrollbar-width:thin;scrollbar-color:#ffffff66 transparent;margin-top:18px;mask-image:linear-gradient(transparent,#000 3%,#000 96%,transparent)}
#coss-body #recommended-mixes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;animation:recommendation-flow 38s linear infinite}
#coss-body .recommendation-window:hover #recommended-mixes,#coss-body .recommendation-window:focus-within #recommended-mixes{animation-play-state:paused}
#coss-body .recommended{padding:0;overflow:hidden;display:block;background:#1020238f;border:1px solid #ffffff2b;border-radius:15px;color:white;transition:border-color .25s,background .25s;min-width:0}
#coss-body .recommended:hover{border-color:#c6e6b5;background:#2b4135}
#coss-body .recommended>img{width:100%;height:96px;object-fit:cover;display:block}
#coss-body .recommended>strong{display:block;padding:12px 11px 5px;font-size:12px}
#coss-body .recommended .recommended-swatches{display:flex;align-items:center;gap:5px;padding:0 11px;height:auto;margin:0;font-size:10px;border-radius:0}
#coss-body .recommended .ratio-dot{flex:none;width:12px;height:10px;border-radius:10px}
#coss-body .recommended>small{display:block;padding:7px 11px 13px;color:#b7c2c2;font:10px/1.5 Arial}
#coss-body #tile-ratios{gap:5px;margin-top:18px}#coss-body #tile-ratios>span{border:0;padding:3px 5px;color:white;font-size:11px}
#coss-body .external-materials>div{grid-template-columns:repeat(2,1fr)}#coss-body .external-materials img{height:220px}
@media(max-width:780px){
  /* 유기형 박스 모바일 오버라이드는 상단 공통 블록에 포함 */
}
@keyframes recommendation-flow{to{transform:translateY(calc(-1 * var(--flow-distance,50%)))}}
@keyframes sky-drift{to{transform:translate3d(28px,12px,0)}}
@media(max-width:1100px){#coss-body #sample-showroom{grid-template-columns:1fr}#coss-body .recommendation-window{height:440px}#coss-body .recommended>img{height:140px}}
@media(max-width:600px){#coss-body #sample-showroom{padding:20px 14px;margin:25px -1%}#coss-body #tile-viewport{height:320px;border-width:12px}#coss-body #sample-tile{width:190px;height:190px}#coss-body #tile-viewport:after{font-size:8px}#coss-body .recommended>img{height:100px}#coss-body .external-materials img{height:145px}}
@media(prefers-reduced-motion:reduce){
  #coss-body:before,#coss-body #recommended-mixes{animation:none}
  #coss-body .editorial-photo>img,
  #coss-body .editorial-gallery img,
  #coss-body .product-image img,
  #coss-body .cy-detail-hero img,
  #coss-body .journal-row img,
  #coss-body .coss-editorial-a .ea-split .figure img,
  #coss-body .coss-editorial-a .ea-split .figure::before,
  #coss-body .coss-soft-c .sc-hero-img img,
  #coss-body .coss-soft-c .sc-product .pimg img,
  #coss-body .external-materials img{transition:none;transform:none;filter:none}
  #coss-body .editorial-hero h1,
  #coss-body .editorial-hero .hero-line,
  #coss-body .editorial-hero .hero-line::after,
  #coss-body .story-section.will-reveal,
  #coss-body .collection-section.will-reveal .section-heading,
  #coss-body .collection-section.will-reveal .product-grid > figure,
  #coss-body .collection-section.will-reveal .product-grid > .product-summary,
  #coss-body .collection-section.will-reveal .editorial-gallery > figure{
    opacity:1;transform:none;clip-path:none;transition:none;width:auto
  }
  #coss-body .editorial-hero .hero-line::after{width:100%}
  #coss-body .editorial-photo>img{transform:none}
}

/* ============================================================
   사업실적 (/performance/) — 썸네일 카드 그리드.
   각 실적을 작은 카드로, 관리자 업로드 이미지를 썸네일로 표시(없으면 유형 색상 플레이스홀더).
   연도별 섹션 헤더 + 스크롤 리빌. #coss-body 스코프.
   ============================================================ */
#coss-body .perf-cards-sec{
  --pf-play:#2f6b4a; --pf-sport:#274d86; --pf-indoor:#9a5323; --pf-garden:#5f7327;
  margin:26px 0 20px;
}
/* 헤더 */
#coss-body .perf-cards-sec .perf-cards-head{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:14px 44px;padding-bottom:20px;border-bottom:2px solid var(--ink)}
#coss-body .perf-cards-sec .pc-kicker{font:600 11px/1.5 Arial,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:0}
#coss-body .perf-cards-sec .pc-title{margin:8px 0 0;font-size:clamp(26px,3.6vw,44px);font-weight:800;line-height:1.1;letter-spacing:-1.4px;color:var(--ink)}
#coss-body .perf-cards-sec .pc-desc{margin:0 0 4px;max-width:52ch;font-size:14px;line-height:1.9;color:var(--muted);word-break:keep-all}
#coss-body .perf-cards-sec .pc-desc b{color:var(--ink);font-weight:700}

/* 연도 섹션 헤더 */
#coss-body .perf-cards-sec .perf-cards-group{margin-top:40px}
#coss-body .perf-cards-sec .pc-year{display:flex;align-items:center;gap:14px;margin-bottom:18px}
#coss-body .perf-cards-sec .pcy-num{font:800 26px/1 var(--serif);font-style:italic;letter-spacing:-.5px;color:var(--ink)}
#coss-body .perf-cards-sec .pcy-line{flex:1;height:1px;background:var(--line)}
#coss-body .perf-cards-sec .pcy-cnt{font:600 11px/1 Arial,sans-serif;letter-spacing:.14em;color:var(--muted)}

/* 카드 그리드 — 작은 카드 */
/* 가로 행 리스트 — 왼쪽 썸네일 + 오른쪽 정보 + 우측 날짜 */
#coss-body .perf-cards-sec .perf-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
#coss-body .perf-cards-sec .perf-row{
  display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:22px;
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;padding:12px 22px 12px 12px;
  box-shadow:0 8px 22px -20px rgba(35,62,50,.45);
  transition:transform .4s cubic-bezier(.19,1,.22,1),box-shadow .4s ease,border-color .4s ease;
}
#coss-body .perf-cards-sec .perf-row:hover{transform:translateY(-3px);box-shadow:0 18px 38px -24px rgba(35,62,50,.5);border-color:#c7cebd}

/* 썸네일 (왼쪽) */
#coss-body .perf-cards-sec .pr-thumb{position:relative;width:96px;height:72px;border-radius:10px;overflow:hidden;background:#eef1ec;flex:none}
#coss-body .perf-cards-sec .pr-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.65,.25,1)}
#coss-body .perf-cards-sec .perf-row:hover .pr-thumb img{transform:scale(1.07)}
#coss-body .perf-cards-sec .pr-ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--ph1,#e7ece6),var(--ph2,#d7ded4))}
#coss-body .perf-cards-sec .t-play  .pr-ph{--ph1:#e3efe8;--ph2:#cfe0d5}
#coss-body .perf-cards-sec .t-sport .pr-ph{--ph1:#e2e9f2;--ph2:#cdd9ea}
#coss-body .perf-cards-sec .t-indoor .pr-ph{--ph1:#f2e8df;--ph2:#e7d5c5}
#coss-body .perf-cards-sec .t-garden .pr-ph{--ph1:#eaefdd;--ph2:#dbe4c6}
#coss-body .perf-cards-sec .pr-ph-k{font:800 13px/1 var(--serif);font-style:italic;color:rgba(35,62,50,.42)}

/* 본문 (가운데) */
#coss-body .perf-cards-sec .pr-body{min-width:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:5px;align-items:baseline}
#coss-body .perf-cards-sec .pr-no{grid-row:1/3;align-self:center;font:400 13px/1 var(--serif);color:var(--muted)}
#coss-body .perf-cards-sec .pr-name{font-size:15.5px;font-weight:600;letter-spacing:-.2px;color:var(--ink);line-height:1.4;word-break:keep-all}
#coss-body .perf-cards-sec .pr-kind{grid-column:2;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
#coss-body .perf-cards-sec .pr-kind .pr-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
#coss-body .perf-cards-sec .t-play  .pr-dot{background:var(--pf-play)}
#coss-body .perf-cards-sec .t-sport .pr-dot{background:var(--pf-sport)}
#coss-body .perf-cards-sec .t-indoor .pr-dot{background:var(--pf-indoor)}
#coss-body .perf-cards-sec .t-garden .pr-dot{background:var(--pf-garden)}
#coss-body .perf-cards-sec .pr-spec{grid-column:2;font-size:12px;color:var(--muted);opacity:.85}
#coss-body .perf-cards-sec .pr-date{font:600 13px/1 Arial,sans-serif;color:var(--ink);letter-spacing:.03em;white-space:nowrap;flex:none}

#coss-body .perf-cards-sec .perf-cards-foot{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
#coss-body .perf-cards-sec .perf-cards-foot a{color:var(--ink);border-bottom:1px solid var(--ink);text-underline-offset:4px}
#coss-body .perf-cards-sec .perf-cards-empty{padding:40px 0;color:var(--muted)}

/* 리빌 — .will-reveal(JS 부여)에만 적용, JS/모션 비활성 시 항상 보임 */
#coss-body .perf-cards-sec .will-reveal .perf-row{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.19,1,.22,1),transform .6s cubic-bezier(.19,1,.22,1)}
#coss-body .perf-cards-sec .will-reveal.in-view .perf-row{opacity:1;transform:none}
#coss-body .perf-cards-sec .will-reveal.in-view .perf-row:nth-child(2){transition-delay:.04s}
#coss-body .perf-cards-sec .will-reveal.in-view .perf-row:nth-child(3){transition-delay:.08s}
#coss-body .perf-cards-sec .will-reveal.in-view .perf-row:nth-child(4){transition-delay:.12s}
#coss-body .perf-cards-sec .will-reveal.in-view .perf-row:nth-child(n+5){transition-delay:.15s}

@media(max-width:780px){
  #coss-body .perf-cards-sec .perf-cards-head{grid-template-columns:1fr;gap:12px}
  #coss-body .perf-cards-sec .perf-row{grid-template-columns:72px 1fr;gap:14px;padding:10px 14px 10px 10px}
  #coss-body .perf-cards-sec .pr-thumb{width:72px;height:60px}
  #coss-body .perf-cards-sec .pr-no{display:none}
  #coss-body .perf-cards-sec .pr-body{grid-template-columns:1fr}
  #coss-body .perf-cards-sec .pr-kind,#coss-body .perf-cards-sec .pr-spec{grid-column:1}
  #coss-body .perf-cards-sec .pr-date{grid-column:2;grid-row:1;align-self:start;justify-self:end}
}
@media(prefers-reduced-motion:reduce){
  #coss-body .perf-cards-sec .perf-row{transition:none}
  #coss-body .perf-cards-sec .will-reveal .perf-row{opacity:1;transform:none;transition:none}
}

/* ============================================================
   자료실 (/support/files/) — 파일 카드 리스트 + 다운로드 버튼
   coss-content.css 뒤에 로드되어 우선 적용. #coss-body 스코프.
   ============================================================ */
#coss-body .coten-files-note{margin:0 0 8px;font-size:14px;line-height:1.9;color:var(--muted)}
#coss-body .coten-files-note a{color:var(--ink);border-bottom:1px solid var(--ink);text-underline-offset:4px}
#coss-body .coten-files-sec{margin-top:40px}
#coss-body .coten-files-title{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--ink);padding-bottom:14px;border-bottom:2px solid var(--ink);margin:0 0 4px}
#coss-body .coten-files-title .dot{width:9px;height:9px;border-radius:50%;background:#788c5b}

#coss-body .coten-file-list{padding:0;margin:0;list-style:none;display:flex;flex-direction:column}
#coss-body .coten-file-item{
  display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:20px;
  border-top:0;border-bottom:1px solid var(--line);padding:18px 6px;
  transition:background .3s ease,padding-left .3s ease;
}
#coss-body .coten-file-item:first-child{border-top:1px solid var(--line)}
#coss-body .coten-file-item:hover{background:rgba(35,62,50,.035);padding-left:14px}
/* 파일 타입 아이콘 배지 */
#coss-body .coten-file-item .fi-ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,#eef3ee,#dfe7df);color:#5a6b55;
  font:700 11px/1 Arial,sans-serif;letter-spacing:.02em;text-transform:uppercase;
}
#coss-body .coten-file-item .fi-ico.ext-pdf{background:linear-gradient(135deg,#fbe7e4,#f4d3ce);color:#b23b2c}
#coss-body .coten-file-item .fi-ico.ext-jpg,
#coss-body .coten-file-item .fi-ico.ext-jpeg,
#coss-body .coten-file-item .fi-ico.ext-png,
#coss-body .coten-file-item .fi-ico.ext-webp,
#coss-body .coten-file-item .fi-ico.ext-gif{background:linear-gradient(135deg,#e2e9f2,#cdd9ea);color:#2f5a8c}
#coss-body .coten-file-item .fi-body{display:flex;flex-direction:column;gap:5px;min-width:0}
#coss-body .coten-file-item .fi-title{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.2px;line-height:1.4;word-break:keep-all}
#coss-body .coten-file-item .fi-desc{font-size:12.5px;color:var(--muted);line-height:1.5}
#coss-body .coten-file-item .fi-action{margin-left:0;white-space:nowrap;font-size:13px}
/* 다운로드 버튼 (텍스트 밑줄 → 실제 버튼) */
#coss-body .coten-file-item .fi-action a{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  border:0;text-decoration:none;font-weight:700;font-size:13px;transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
}
#coss-body .coten-file-item .fi-action a.dl{background:var(--ink);color:#fff;box-shadow:0 8px 20px -12px rgba(35,62,50,.7)}
#coss-body .coten-file-item .fi-action a.dl::after{content:"↓";font-size:14px;line-height:1}
#coss-body .coten-file-item .fi-action a.dl:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(35,62,50,.7)}
#coss-body .coten-file-item .fi-action a.req{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
#coss-body .coten-file-item .fi-action a.req::after{content:"↗";font-size:13px}
#coss-body .coten-file-item .fi-action a.req:hover{border-color:var(--ink);transform:translateY(-2px)}
#coss-body .coten-post-empty{padding:40px 0;color:var(--muted)}

@media(max-width:780px){
  #coss-body .coten-file-item{grid-template-columns:42px 1fr;gap:12px 14px;padding:16px 4px}
  #coss-body .coten-file-item .fi-ico{width:42px;height:42px;border-radius:10px;font-size:10px}
  #coss-body .coten-file-item .fi-title{font-size:14px}
  #coss-body .coten-file-item .fi-action{grid-column:2;justify-self:start;margin-top:2px}
}

/* ============================================================
   FAQ (/support/faq) — 아코디언 카드
   ============================================================ */
#coss-body .coten-faq{display:flex;flex-direction:column;gap:12px}
#coss-body .coten-faq .faq-one{
  border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;
  box-shadow:0 8px 22px -20px rgba(35,62,50,.5);transition:border-color .35s ease,box-shadow .35s ease;
}
#coss-body .coten-faq .faq-one:last-child{border-bottom:1px solid var(--line)}
#coss-body .coten-faq .faq-one:hover{border-color:#c7cebd}
#coss-body .coten-faq .faq-one.is-open{border-color:#9fb08d;box-shadow:0 16px 34px -22px rgba(35,62,50,.5)}

#coss-body .coten-faq .faq-q{
  width:100%;display:flex;align-items:center;gap:16px;text-align:left;padding:20px 22px;
  border:0;background:none;color:var(--ink);font-size:16px;font-weight:600;letter-spacing:-.2px;cursor:pointer;line-height:1.5;
}
#coss-body .coten-faq .q-mark{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:#eef3ea;color:#5f7327;font:italic 17px/1 var(--serif);
}
#coss-body .coten-faq .faq-one.is-open .q-mark{background:#5f7327;color:#fff}
#coss-body .coten-faq .q-txt{flex:1;word-break:keep-all}
#coss-body .coten-faq .q-arrow{
  margin-left:auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
  background:#f2f4ef;color:var(--ink);transition:background .3s ease,transform .35s ease;
}
#coss-body .coten-faq .q-arrow::after{content:"+";font:400 20px/1 Arial;color:var(--ink)}
#coss-body .coten-faq .faq-one.is-open .q-arrow{background:var(--ink);transform:rotate(180deg)}
#coss-body .coten-faq .faq-one.is-open .q-arrow::after{content:"−";color:#fff}

#coss-body .coten-faq .faq-a{padding:0 22px 22px 72px;color:var(--muted);animation:faq-fade .35s ease}
#coss-body .coten-faq .a-inner{display:block}
#coss-body .coten-faq .a-mark{display:none}
#coss-body .coten-faq .a-txt{font-size:14.5px;line-height:1.85;color:#4a5550}
#coss-body .coten-faq .a-txt p{margin:0 0 10px}
#coss-body .coten-faq .a-txt p:last-child{margin-bottom:0}
@keyframes faq-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media(max-width:780px){
  #coss-body .coten-faq .faq-q{padding:16px 16px;font-size:15px;gap:12px}
  #coss-body .coten-faq .q-mark{width:30px;height:30px;font-size:15px}
  #coss-body .coten-faq .faq-a{padding:0 16px 18px 16px}
}
@media(prefers-reduced-motion:reduce){
  #coss-body .coten-file-item,#coss-body .coten-faq .faq-one,
  #coss-body .coten-faq .q-arrow,#coss-body .coten-file-item .fi-action a{transition:none}
  #coss-body .coten-faq .faq-a{animation:none}
}