/* COTEN-inspired page-head clouds / motion on Cheongyang subpages */
#svisualwrap.kos-coten-fx {
  position: relative;
  overflow: hidden;
}

#svisualwrap.kos-coten-fx .visual_box {
  position: relative;
}

#svisualwrap.kos-coten-fx #sub-vs_lotti,
#svisualwrap.kos-coten-fx .obj {
  position: relative;
  z-index: 3;
}

.kos-coten-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.kos-coten-en {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-family: "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
  font-weight: 700;
  font-size: clamp(64px, 14vw, 180px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: rgba(115, 166, 229, 0.55);
  white-space: nowrap;
  user-select: none;
  z-index: 1;
}

.kos-coten-cloud,
.kos-coten-bird,
.kos-coten-ship {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}

.kos-coten-cloud img,
.kos-coten-bird img,
.kos-coten-ship img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* ── COTEN 히어로 진입 연출 (coten.co.jp 방식: 스크롤/로드 시 1회 fade-in) ──
   기본은 항상 보임(JS 실패해도 콘텐츠 보장). body.kos-reveal-on 일 때만
   시작 오프셋을 주고, .kos-coten-fx.is-head-in 이 붙으면 제자리로 들어온다. */
.kos-coten-cloud,
.kos-coten-bird,
.kos-coten-ship { opacity: 1; transition: opacity 1.2s cubic-bezier(.22,.61,.36,1), transform 1.2s cubic-bezier(.22,.61,.36,1); }

/* 왼쪽에서 들어오는 요소 (is-fade-in-right 대응) */
body.kos-reveal-on .kos-coten-fx .kos-coten-cloud--1,
body.kos-reveal-on .kos-coten-fx .kos-coten-cloud--3,
body.kos-reveal-on .kos-coten-fx .kos-coten-ship { opacity: 0; transform: translate3d(-60px, 0, 0); }
/* 오른쪽에서 들어오는 요소 (is-fade-in-left 대응) */
body.kos-reveal-on .kos-coten-fx .kos-coten-cloud--2,
body.kos-reveal-on .kos-coten-fx .kos-coten-bird { opacity: 0; transform: translate3d(60px, 0, 0); }

/* 진입 완료 → 제자리 */
body.kos-reveal-on .kos-coten-fx.is-head-in .kos-coten-cloud,
body.kos-reveal-on .kos-coten-fx.is-head-in .kos-coten-bird,
body.kos-reveal-on .kos-coten-fx.is-head-in .kos-coten-ship { opacity: 1; transform: none; }

/* 단계별 지연 (COTEN u-delay 톤) */
body.kos-reveal-on .kos-coten-fx .kos-coten-cloud--2 { transition-delay: .12s; }
body.kos-reveal-on .kos-coten-fx .kos-coten-cloud--3 { transition-delay: .22s; }
body.kos-reveal-on .kos-coten-fx .kos-coten-bird { transition-delay: .34s; }
body.kos-reveal-on .kos-coten-fx .kos-coten-ship { transition-delay: .44s; }

/* company (dark-leaning clouds) */
.kos-coten-fx[data-coten="company"] .kos-coten-cloud--1 {
  left: -8%;
  top: 8%;
  width: min(52vw, 560px);
}
.kos-coten-fx[data-coten="company"] .kos-coten-cloud--2 {
  right: -10%;
  top: 18%;
  width: min(58vw, 640px);
}
.kos-coten-fx[data-coten="company"] .kos-coten-cloud--3 {
  left: 12%;
  bottom: -6%;
  width: min(70vw, 760px);
}
.kos-coten-fx[data-coten="company"].is-head-in .kos-coten-cloud--3 { opacity: 0.92; }
.kos-coten-fx[data-coten="company"] .kos-coten-bird {
  right: 14%;
  bottom: 18%;
  width: 56px;
}

/* service */
.kos-coten-fx[data-coten="service"] .kos-coten-en {
  color: rgba(115, 166, 229, 0.45);
}
.kos-coten-fx[data-coten="service"] .kos-coten-cloud--1 {
  left: -6%;
  top: 12%;
  width: min(48vw, 520px);
}
.kos-coten-fx[data-coten="service"] .kos-coten-cloud--2 {
  right: -12%;
  top: 28%;
  width: min(62vw, 700px);
}
.kos-coten-fx[data-coten="service"] .kos-coten-cloud--3 {
  left: 20%;
  bottom: -10%;
  width: min(55vw, 600px);
}
.kos-coten-fx[data-coten="service"] .kos-coten-bird {
  left: 18%;
  top: 22%;
  width: 72px;
}

/* news */
.kos-coten-fx[data-coten="news"] .kos-coten-cloud--1 {
  left: -4%;
  top: 10%;
  width: min(46vw, 480px);
}
.kos-coten-fx[data-coten="news"] .kos-coten-cloud--2 {
  right: -8%;
  bottom: 4%;
  width: min(50vw, 520px);
}

/* career */
.kos-coten-fx[data-coten="career"] .kos-coten-cloud--1 {
  left: -10%;
  top: 6%;
  width: min(50vw, 540px);
}
.kos-coten-fx[data-coten="career"] .kos-coten-cloud--2 {
  right: -6%;
  top: 30%;
  width: min(48vw, 500px);
}
.kos-coten-fx[data-coten="career"] .kos-coten-bird {
  right: 22%;
  top: 16%;
  width: 48px;
}

.kos-coten-ship {
  left: 6%;
  bottom: 10%;
  width: min(28vw, 220px);
  z-index: 3;
}
.kos-coten-fx.is-head-in .kos-coten-ship { opacity: 0.85; }

/* content-area accent strip under title */
.kos-coten-content-deco {
  position: relative;
  margin: 8px 0 28px;
  min-height: 48px;
  pointer-events: none;
}
.kos-coten-content-deco img {
  position: absolute;
  width: min(42vw, 360px);
  opacity: 0.55;
}
.kos-coten-content-deco .c1 {
  left: -12px;
  top: -8px;
  animation: kosCotenDriftL 24s ease-in-out infinite alternate;
}
.kos-coten-content-deco .c2 {
  right: -16px;
  top: 0;
  width: min(36vw, 300px);
  animation: kosCotenDriftR 28s ease-in-out infinite alternate;
}

@keyframes kosCotenDriftL {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(28px, -10px, 0); }
}
@keyframes kosCotenDriftR {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-32px, 12px, 0); }
}
@keyframes kosCotenFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes kosCotenBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

@media (max-width: 768px) {
  .kos-coten-en { font-size: clamp(48px, 18vw, 96px); top: 48%; }
  .kos-coten-ship { display: none; }
  .kos-coten-fx[data-coten="company"] .kos-coten-bird,
  .kos-coten-fx[data-coten="service"] .kos-coten-bird,
  .kos-coten-fx[data-coten="career"] .kos-coten-bird {
    width: 40px;
  }
}

/* ============================================================
   COTEN BODY STYLE — 본문 콘텐츠 접목 (색상·에셋·번호카드·모션)
   청양 #txt 영역 안에서 동작. coten.co.jp 톤 반영.
   ============================================================ */

:root {
  --coten-sky:      #eaf4fd;   /* 연한 하늘 배경 */
  --coten-sky-2:    #dcebfa;   /* 섹션 교차 배경 */
  --coten-cream:    #fbf7ef;   /* 크림 배경 */
  --coten-blue:     #2f6bd8;   /* 포인트 블루 */
  --coten-blue-dk:  #1b3b7a;   /* 진한 블루(제목) */
  --coten-ink:      #21324f;   /* 본문 잉크 */
  --coten-mute:     #5b6b86;   /* 보조 텍스트 */
  --coten-line:     #d5e3f4;   /* 라인 */
  --coten-accent:   #f4a93b;   /* 새/포인트 옐로우 */
}

/* 본문 컨테이너 톤 (청양 #txt 오버라이드) */
#txt.kos-coten-body {
  position: relative;
  background: transparent;
  /* 애니메이션(±20vw)·장식 구름이 절대 페이지 가로 스크롤을 만들지 않도록 클립 */
  overflow-x: clip;
}

/* ── 리드 인트로 ─────────────────────────────────────────── */
.coten-lead {
  position: relative;
  max-width: 860px;
  margin: 0 auto 56px;
  padding: 8px 16px 0;
  text-align: center;
}
.coten-lead .en {
  display: inline-block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.28em;
  color: var(--coten-blue);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.coten-lead h2 {
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.5;
  color: var(--coten-blue-dk);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.coten-lead p {
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.95;
  color: var(--coten-mute);
  margin: 0;
}

/* ── 번호 카드 섹션 (01 / 02 …) COTEN services 스타일 ── */
.coten-numsec {
  position: relative;
  margin: 0 0 22px;
  padding: clamp(28px, 4vw, 48px);
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 18px 40px rgba(31, 74, 122, 0.08);
  overflow: hidden;
}
.coten-numsec:nth-child(even) { background: var(--coten-sky); }

.coten-numsec-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}
.coten-numsec--rev .coten-numsec-inner { direction: rtl; }
.coten-numsec--rev .coten-numsec-inner > * { direction: ltr; }

.coten-numsec .num {
  /* 청양 미러 전역 .num(21x21 원형·overflow:hidden) 오버라이드 */
  display: block !important;
  width: auto !important; height: auto !important;
  overflow: visible !important;
  border: 0 !important; border-radius: 0 !important;
  background: none !important;
  margin: 0 0 6px !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(48px, 8vw, 96px) !important;
  font-weight: 800;
  line-height: 0.9;
  color: var(--coten-blue);
  opacity: 0.16;
  letter-spacing: -0.03em;
}
.coten-numsec .kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coten-blue);
  margin-bottom: 10px;
}
.coten-numsec h3 {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.4;
  color: var(--coten-blue-dk);
  margin: 0 0 14px;
}
.coten-numsec p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--coten-ink);
  margin: 0 0 10px;
}
/* COTEN 시그니처: 번호카드 이미지를 원형 클립 마스크로 (c-service-sec__img-item / u-clip-circle) */
.coten-numsec .media {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: min(88%, 420px);
  margin: 0 auto;
  background: var(--coten-sky-2);
  box-shadow: 0 18px 44px rgba(31, 74, 122, 0.16);
}
.coten-numsec .media::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  pointer-events: none;
}
.coten-numsec .media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s cubic-bezier(.22,.61,.36,1);
}
.coten-numsec:hover .media img { transform: scale(1.08); }

/* 카드 안 떠다니는 구름 */
.coten-numsec .float-cloud {
  position: absolute;
  z-index: 1;
  width: 180px;
  opacity: 0.5;
  pointer-events: none;
}
.coten-numsec .float-cloud.c-tr { top: -20px; right: -20px; animation: kosCotenDriftR 20s ease-in-out infinite alternate; }
.coten-numsec .float-cloud.c-bl { bottom: -24px; left: -20px; width: 150px; animation: kosCotenDriftL 24s ease-in-out infinite alternate; }

/* ── 특징 리스트 (체크·불릿) ─────────────────────────────── */
.coten-points {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.coten-points li {
  position: relative;
  padding: 12px 14px 12px 44px;
  background: var(--coten-cream);
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--coten-ink);
  font-weight: 600;
}
.coten-points li::before {
  content: "";
  position: absolute;
  left: 16px; top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  background: var(--coten-blue);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(47, 107, 216, 0.16);
}

/* ── 스탯/뱃지 밴드 ──────────────────────────────────────── */
.coten-band {
  position: relative;
  margin: 22px 0;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--coten-blue) 0%, var(--coten-blue-dk) 100%);
  color: #fff;
  overflow: hidden;
}
.coten-band .band-cloud {
  position: absolute; right: -30px; top: -30px; width: 240px; opacity: 0.22; pointer-events: none;
}
/* 배 "등장" 연출 (coten Post Capitalism 섹션 톤): 밴드가 리빌될 때 왼쪽에서 항해해 들어옴 */
.coten-band .band-ship {
  position: absolute; left: 4%; bottom: -10px; width: 150px; opacity: 0.9; pointer-events: none;
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1), opacity 1.2s ease;
}
body.kos-reveal-on .coten-band.coten-reveal .band-ship { opacity: 0; transform: translate3d(-120px, 12px, 0); }
body.kos-reveal-on .coten-band.coten-reveal.is-in .band-ship { opacity: 0.9; transform: none; transition-delay: .35s; }
body.kos-reveal-on .coten-band.coten-reveal .band-cloud { opacity: 0; transform: translate3d(60px, -8px, 0); transition: transform 1.2s cubic-bezier(.22,.61,.36,1), opacity 1s ease; }
body.kos-reveal-on .coten-band.coten-reveal.is-in .band-cloud { opacity: 0.22; transform: none; transition-delay: .15s; }
.coten-band-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center;
}
/* 청양 미러 cmpt.css 의 전역 .num(21x21 원형·overflow:hidden·13px) 오버라이드 */
.kos-coten-body .coten-band-grid .num {
  display: block !important;
  width: auto !important; height: auto !important;
  overflow: visible !important;
  border: 0 !important; border-radius: 0 !important;
  background: none !important;
  margin: 0 !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(28px, 4vw, 44px) !important; font-weight: 800; line-height: 1.1; color: #fff;
  text-align: center;
}
.kos-coten-body .coten-band-grid .num .unit { font-size: 0.5em; margin-left: 3px; color: var(--coten-accent); }
.coten-band-grid p { margin: 8px 0 0; font-size: 13px; color: rgba(255,255,255,0.82); }

/* ── 갤러리 (COTEN 라운드 카드) ──────────────────────────── */
.coten-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 8px 0 12px;
}
.coten-gallery .g-item {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--coten-sky-2);
  aspect-ratio: 4 / 3;
  box-shadow: 0 10px 24px rgba(31, 74, 122, 0.08);
}
.coten-gallery .g-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(.22,.61,.36,1);
}
.coten-gallery .g-item:hover img { transform: scale(1.07); }
.coten-gallery .g-item .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 14px 12px;
  background: linear-gradient(transparent, rgba(27, 59, 122, 0.82));
  color: #fff; font-size: 13.5px; font-weight: 700;
}

/* ── 물결 섹션 디바이더 ──────────────────────────────────── */
.coten-wave {
  display: block; width: 100%; height: 48px; margin: 4px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C 150 48 350 0 600 24 C 850 48 1050 0 1200 24 L1200 48 L0 48 Z' fill='%23dcebfa'/%3E%3C/svg%3E") no-repeat center/cover;
}

/* ── CTA (COTEN 스타일 라운드) ───────────────────────────── */
.coten-cta {
  position: relative;
  margin: 28px 0 8px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 24px;
  background: var(--coten-cream);
  text-align: center;
  overflow: hidden;
}
.coten-cta .cta-bird {
  position: absolute; right: 8%; top: 18%; width: 54px; opacity: 0.9;
  animation: kosCotenFloat 4.5s ease-in-out infinite; pointer-events: none;
}
.coten-cta h3 {
  font-size: clamp(18px, 2.4vw, 26px); font-weight: 800; color: var(--coten-blue-dk); margin: 0 0 18px;
}
.coten-cta .cta-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.coten-cta .cta-links a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px;
  background: var(--coten-blue); color: #fff !important;
  font-weight: 700; font-size: 14.5px; text-decoration: none;
  box-shadow: 0 8px 18px rgba(47, 107, 216, 0.28);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.coten-cta .cta-links a:hover { transform: translateY(-2px); background: var(--coten-blue-dk); box-shadow: 0 12px 24px rgba(27, 59, 122, 0.34); }
.coten-cta .cta-links a.ghost { background: #fff; color: var(--coten-blue) !important; border: 1.5px solid var(--coten-blue); box-shadow: none; }
.coten-cta .cta-links a.ghost:hover { background: var(--coten-sky); }

/* ── 스크롤 등장 애니메이션 (Progressive Enhancement) ────────
   기본은 항상 보임. JS가 body에 kos-reveal-on을 달았을 때만
   opacity:0으로 시작하고 is-in으로 나타난다. JS 실패해도 콘텐츠는 보임. */
.coten-reveal { opacity: 1; transform: none; }
body.kos-reveal-on .coten-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
body.kos-reveal-on .coten-reveal.is-in { opacity: 1; transform: none; }
.coten-reveal.d1 { transition-delay: 0.08s; }
.coten-reveal.d2 { transition-delay: 0.16s; }
.coten-reveal.d3 { transition-delay: 0.24s; }

/* ── 반응형 ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .coten-numsec-inner { grid-template-columns: 1fr; }
  .coten-numsec--rev .coten-numsec-inner { direction: ltr; }
  .coten-band-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .coten-gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .coten-gallery { grid-template-columns: 1fr; }
  .coten-band-grid { grid-template-columns: 1fr 1fr; }
  .coten-numsec { border-radius: 18px; }
}

/* ===== COTEN 스크롤 배경 전환 + 본문 구름 레이어 ===== */
body.kos-coten-scroll { transition: background-color 1.1s ease; }
body.kos-coten-scroll.bg-step-0 { background-color: #eaf4fd; }
body.kos-coten-scroll.bg-step-1 { background-color: #dcebfa; }
body.kos-coten-scroll.bg-step-2 { background-color: #eef2f7; }
body.kos-coten-scroll.bg-step-3 { background-color: #fbf7ef; }
body.kos-coten-scroll.bg-step-4 { background-color: #e7f2ec; }
body.kos-coten-scroll #wrap,
body.kos-coten-scroll #container,
body.kos-coten-scroll #content,
body.kos-coten-scroll #txt.kos-coten-body { background: transparent !important; }
/* ── 본문 구름 레이어 (이미지 없는 CSS 실루엣, 화면을 가로지르는 흐름) ── */
/* ── 본문 구름 레이어 (실제 coten 이미지 에셋 사용) ── */
.coten-sky-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.coten-sky-layer .sky-cloud,
.coten-sky-layer .sky-bird,
.coten-sky-layer .sky-ship {
  position: absolute; display: block; will-change: transform;
}
.coten-sky-layer .sky-cloud img,
.coten-sky-layer .sky-bird img,
.coten-sky-layer .sky-ship img {
  display: block; width: 100%; height: auto;
}
/* 구름 위치·크기·흐름 — 절제된 배경 장식 (본문 가독성 우선, 은은하게) */
.coten-sky-layer .sky-cloud { left: 0; opacity: .28; }
.coten-sky-layer .sc1 { width: min(34vw,360px); top: 2%;  opacity: .32; animation: kosCloudDrift 60s linear infinite; }
.coten-sky-layer .sc2 { width: min(24vw,250px); top: 24%; opacity: .22; animation: kosCloudDriftRev 78s linear infinite; animation-delay:-18s; }
.coten-sky-layer .sc3 { width: min(30vw,320px); top: 58%; opacity: .20; animation: kosCloudDrift 92s linear infinite; animation-delay:-40s; }
.coten-sky-layer .sc4 { display: none; }
.coten-sky-layer .sc5 { display: none; }
/* 새 (실제 img-bird 에셋) — 은은하게 */
.coten-sky-layer .sky-bird { left: 0; width: min(6vw,48px); top: 14%; opacity: .5; animation: kosBirdFly 52s linear infinite; }
/* 배 (service 테마, img-ship) — 하단 구석에서 부드럽게 흔들림 */
.coten-sky-layer .sky-ship { width: min(16vw,170px); left: 3%; bottom: 5%; opacity: .35; animation: kosShipBob 7s ease-in-out infinite; }

#txt.kos-coten-body { position: relative; }
#txt.kos-coten-body > *:not(.coten-sky-layer) { position: relative; z-index: 1; }

/* 화면을 가로질러 흐르는 구름 (왼→오, 오→왼) — 위아래 살짝 흔들며 */
@keyframes kosCloudDrift    { 0% { transform: translate3d(-55vw,0,0); } 50% { transform: translate3d(35vw,-14px,0); } 100% { transform: translate3d(125vw,0,0); } }
@keyframes kosCloudDriftRev { 0% { transform: translate3d(125vw,0,0); } 50% { transform: translate3d(35vw,12px,0); } 100% { transform: translate3d(-55vw,0,0); } }
@keyframes kosBirdFly {
  0%   { transform: translate3d(-12vw,0,0) scaleX(1); }
  50%  { transform: translate3d(60vw,-40px,0) scaleX(1); }
  100% { transform: translate3d(122vw,0,0) scaleX(1); }
}
@keyframes kosShipBob { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }

@media (max-width:768px){ .coten-sky-layer .sc2, .coten-sky-layer .sc5, .coten-sky-layer .sky-bird { display:none; } }
@media (prefers-reduced-motion: reduce) {
  .coten-sky-layer .sky-cloud, .coten-sky-layer .sky-bird, .coten-sky-layer .sky-ship { animation: none !important; }
  /* 히어로/배 진입 전환도 비활성 — 즉시 제자리·정상 노출 */
  .kos-coten-cloud, .kos-coten-bird, .kos-coten-ship,
  .coten-band .band-ship, .coten-band .band-cloud {
    transition: none !important; transform: none !important; opacity: 1 !important;
  }
  .kos-coten-fx[data-coten="company"] .kos-coten-cloud--3 { opacity: 0.92 !important; }
  .kos-coten-ship { opacity: 0.85 !important; }
  .coten-band .band-cloud { opacity: 0.22 !important; }
}

/* ============================================================
   COTEN 게시판 / 자료실 / FAQ / 폼 — 청양 스킨 통일 컴포넌트
   posts / post / files_by / faqs 데이터를 COTEN 톤으로 렌더
   ============================================================ */

/* ── 게시판 목록 ─────────────────────────────────────────── */
.coten-board { margin: 0 0 12px; }
.coten-board-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--coten-line);
}
.coten-board-head .count { font-size: 14px; color: var(--coten-mute); }
.coten-board-head .count strong { color: var(--coten-blue); font-size: 16px; }

.coten-post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.coten-post-item {
  background: #fff; border-radius: 18px;
  box-shadow: 0 10px 26px rgba(31, 74, 122, 0.07);
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s;
  overflow: hidden;
}
.coten-post-item:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(31, 74, 122, 0.14); }
.coten-post-item.is-pinned { background: var(--coten-sky); border: 1px solid var(--coten-line); }
.coten-post-link { display: grid; grid-template-columns: 132px 1fr; gap: 20px; text-decoration: none; color: inherit; align-items: center; padding: 14px; }
.coten-post-link .thumb { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: var(--coten-sky-2); }
.coten-post-link .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.coten-post-item:hover .thumb img { transform: scale(1.07); }
.coten-post-link .body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.coten-post-link .tag {
  align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--coten-blue); background: var(--coten-sky); padding: 3px 10px; border-radius: 999px;
}
.coten-post-link .title { font-size: clamp(16px, 1.9vw, 19px); font-weight: 800; color: var(--coten-blue-dk); line-height: 1.4; }
.coten-post-link .title .pin {
  display: inline-block; font-style: normal; font-size: 12px; font-weight: 700; color: #fff;
  background: var(--coten-accent); padding: 2px 8px; border-radius: 6px; margin-right: 6px; vertical-align: middle;
}
.coten-post-link .summary {
  font-size: 14px; line-height: 1.6; color: var(--coten-mute);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.coten-post-link .date { font-size: 12.5px; color: #9aa8be; margin-top: 2px; }
.coten-post-empty { text-align: center; padding: 60px 0; color: var(--coten-mute); background: #fff; border-radius: 18px; }

/* ── 게시글 상세 ─────────────────────────────────────────── */
.coten-detail {
  background: #fff; border-radius: 24px; padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 16px 40px rgba(31, 74, 122, 0.08);
}
.coten-detail-head { border-bottom: 2px solid var(--coten-line); padding-bottom: 20px; margin-bottom: 24px; }
.coten-detail-head .tag {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--coten-blue);
  background: var(--coten-sky); padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.coten-detail-head h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--coten-blue-dk); line-height: 1.4; margin: 0 0 12px; }
.coten-detail-head .meta { font-size: 13px; color: #9aa8be; }
.coten-detail-head .summary { margin: 14px 0 0; font-size: 16px; line-height: 1.8; color: var(--coten-mute); }
.coten-detail-hero { border-radius: 18px; overflow: hidden; margin: 0 0 26px; background: var(--coten-sky-2); }
.coten-detail-hero img { width: 100%; max-height: 460px; object-fit: cover; display: block; }
.coten-detail-body { line-height: 1.95; color: var(--coten-ink); }
.coten-detail-foot { margin-top: 32px; text-align: center; }
.coten-detail-foot .to-list {
  display: inline-block; padding: 12px 32px; border-radius: 999px;
  background: var(--coten-blue); color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 18px rgba(47, 107, 216, 0.28); transition: transform .2s, background .2s;
}
.coten-detail-foot .to-list:hover { transform: translateY(-2px); background: var(--coten-blue-dk); }

/* ── 자료실 ─────────────────────────────────────────────── */
.coten-files-note {
  font-size: 14.5px; line-height: 1.8; color: var(--coten-mute);
  background: var(--coten-cream); border-radius: 14px; padding: 16px 20px; margin: 0 0 24px;
}
.coten-files-note a { color: var(--coten-blue); font-weight: 700; }
.coten-files-sec { margin: 0 0 26px; }
.coten-files-title {
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(17px, 2.2vw, 21px); font-weight: 800; color: var(--coten-blue-dk); margin: 0 0 14px;
}
.coten-files-title .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--coten-blue); box-shadow: 0 0 0 4px rgba(47,107,216,.16); }
.coten-file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.coten-file-item {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--coten-line); border-radius: 14px; padding: 14px 18px;
  transition: border-color .2s, box-shadow .2s;
}
.coten-file-item:hover { border-color: var(--coten-blue); box-shadow: 0 8px 20px rgba(31,74,122,.08); }
.coten-file-item .fi-ico { font-size: 24px; text-align: center; }
.coten-file-item .fi-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.coten-file-item .fi-title { font-weight: 700; color: var(--coten-ink); font-size: 15.5px; }
.coten-file-item .fi-desc { font-size: 13px; color: var(--coten-mute); }
.coten-file-item .fi-action a {
  display: inline-block; padding: 9px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.coten-file-item .fi-action .dl { background: var(--coten-blue); color: #fff; box-shadow: 0 6px 14px rgba(47,107,216,.26); }
.coten-file-item .fi-action .dl:hover { background: var(--coten-blue-dk); }
.coten-file-item .fi-action .req { background: #fff; color: var(--coten-blue); border: 1.5px solid var(--coten-blue); }
.coten-file-item .fi-action .req:hover { background: var(--coten-sky); }

/* ── FAQ 아코디언 ────────────────────────────────────────── */
.coten-faq { display: grid; gap: 12px; }
.coten-faq .faq-one { background: #fff; border-radius: 16px; box-shadow: 0 8px 22px rgba(31,74,122,.06); overflow: hidden; }
.coten-faq .faq-q {
  width: 100%; display: grid; grid-template-columns: 40px 1fr 24px; align-items: center; gap: 14px;
  background: none; border: 0; cursor: pointer; text-align: left; padding: 20px 22px; font: inherit;
}
.coten-faq .faq-q .q-mark, .coten-faq .faq-a .a-mark {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 16px; color: #fff;
}
.coten-faq .faq-q .q-mark { background: var(--coten-blue); }
.coten-faq .faq-q .q-txt { font-size: 16px; font-weight: 700; color: var(--coten-blue-dk); line-height: 1.5; }
.coten-faq .faq-q .q-arrow {
  width: 12px; height: 12px; border-right: 2.5px solid var(--coten-blue); border-bottom: 2.5px solid var(--coten-blue);
  transform: rotate(45deg); transition: transform .3s; justify-self: center;
}
.coten-faq .faq-one.is-open .faq-q .q-arrow { transform: rotate(-135deg); }
.coten-faq .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.22,.61,.36,1); }
.coten-faq .faq-one.is-open .faq-a { max-height: 1200px; }
.coten-faq .faq-a .a-inner { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 4px 22px 24px; }
.coten-faq .faq-a .a-mark { background: var(--coten-accent); }
.coten-faq .faq-a .a-txt { line-height: 1.9; color: var(--coten-ink); font-size: 15px; }

/* ── 폼 (견적/설계자료) ──────────────────────────────────── */
.coten-form-wrap { max-width: 720px; margin: 0 auto; }
.coten-flash { padding: 12px 16px; border-radius: 12px; margin: 0 0 16px; font-size: 14.5px; text-align: center; }
.coten-flash.ok { background: #e8f7ee; color: #146c2e; }
.coten-flash.error { background: #fdeaea; color: #a11; }
.coten-form { background: #fff; border-radius: 22px; padding: clamp(24px, 4vw, 40px); box-shadow: 0 16px 40px rgba(31,74,122,.08); }
.coten-form .row { margin: 0 0 18px; }
.coten-form .row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.coten-form label { display: block; font-weight: 700; color: var(--coten-blue-dk); margin: 0 0 8px; font-size: 14.5px; }
.coten-form label em { color: var(--coten-accent); font-style: normal; }
.coten-form input, .coten-form select, .coten-form textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--coten-line); border-radius: 12px;
  font: inherit; box-sizing: border-box; background: var(--coten-sky); color: var(--coten-ink); transition: border-color .2s, background .2s;
}
.coten-form input:focus, .coten-form select:focus, .coten-form textarea:focus {
  outline: none; border-color: var(--coten-blue); background: #fff;
}
.coten-form .chk { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.coten-form .chk label { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--coten-ink); margin: 0; }
.coten-form .chk input { width: auto; }
.coten-submit {
  width: 100%; margin-top: 8px; padding: 15px; border: 0; border-radius: 14px;
  background: var(--coten-blue); color: #fff; font-weight: 800; font-size: 16px; cursor: pointer;
  box-shadow: 0 10px 22px rgba(47,107,216,.3); transition: transform .2s, background .2s;
}
.coten-submit:hover { transform: translateY(-2px); background: var(--coten-blue-dk); }

@media (max-width: 640px) {
  .coten-post-link { grid-template-columns: 96px 1fr; gap: 14px; }
  .coten-form .row.two { grid-template-columns: 1fr; }
  .coten-file-item { grid-template-columns: 36px 1fr; }
  .coten-file-item .fi-action { grid-column: 1 / -1; text-align: right; }
}

/* ============================================================
   청양군청 정부표준 게시판 레이아웃 + COTEN 연출 (v2)
   목록 테이블 / 상세 메타바 / 페이지네이션 / 이전·다음글
   폰트: 본문 nsr(Noto Sans KR 계열), 영문 라벨만 산세리프
   ============================================================ */

/* 서브페이지 본문 폰트 통일 (청양군청 톤) */
#txt.kos-coten-body { font-family: "nsr", "Noto Sans KR", "Malgun Gothic", sans-serif; }
#txt.kos-coten-body .coten-lead .en,
.cy-en-label { font-family: "Helvetica Neue", Arial, sans-serif; letter-spacing: .04em; }

/* ── 게시판 공통 컨테이너 ── */
.cy-board { background: rgba(255,255,255,.72); backdrop-filter: blur(2px); border-radius: 22px; padding: clamp(18px,2.5vw,30px); box-shadow: 0 16px 44px rgba(31,74,122,.08); }
.cy-board-topline { display:flex; align-items:center; justify-content:space-between; margin:0 0 14px; }
.cy-board-topline .cy-total { font-size:14px; color:var(--coten-mute); }
.cy-board-topline .cy-total strong { color:var(--coten-blue); font-size:16px; }
.notice-chip { display:inline-block; font-size:11.5px; font-weight:800; color:#fff; background:var(--coten-accent); padding:3px 9px; border-radius:6px; vertical-align:middle; letter-spacing:.02em; }

/* ── 정부표준 테이블 ── */
.cy-board-table { width:100%; border-collapse:collapse; border-top:2px solid var(--coten-blue-dk); }
.cy-board-table thead th {
  background:var(--coten-sky); color:var(--coten-blue-dk); font-weight:700; font-size:14.5px;
  padding:14px 10px; text-align:center; border-bottom:1px solid var(--coten-line);
}
.cy-board-table tbody td { padding:15px 10px; text-align:center; font-size:14.5px; color:var(--coten-ink); border-bottom:1px solid var(--coten-line); vertical-align:middle; }
.cy-board-table tbody tr { transition:background .18s; }
.cy-board-table tbody tr:hover { background:var(--coten-sky); }
.cy-board-table tbody tr.is-notice { background:linear-gradient(90deg, rgba(244,169,59,.10), rgba(244,169,59,.02)); }
.cy-board-table .col-no { color:var(--coten-mute); font-variant-numeric:tabular-nums; }
.cy-board-table .col-title { text-align:left; }
.cy-board-table .col-title a { display:flex; flex-direction:column; gap:3px; text-decoration:none; }
.cy-board-table .col-title .t { font-weight:700; color:var(--coten-blue-dk); font-size:15.5px; line-height:1.45; transition:color .18s; }
.cy-board-table .col-title a:hover .t { color:var(--coten-blue); text-decoration:underline; text-underline-offset:3px; }
.cy-board-table .col-title .s { font-size:13px; color:var(--coten-mute); font-weight:400; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.cy-board-table .col-cat { color:var(--coten-blue); font-weight:600; font-size:13.5px; }
.cy-board-table .col-date, .cy-board-table .col-view { color:var(--coten-mute); font-size:13.5px; font-variant-numeric:tabular-nums; }
.cy-board-table .col-empty { padding:70px 0; color:var(--coten-mute); }

/* ── 모바일 카드(테이블 대체) ── */
.cy-board-cards { display:none; list-style:none; margin:0; padding:0; }
.cy-board-cards li { border-bottom:1px solid var(--coten-line); }
.cy-board-cards li.is-notice { background:linear-gradient(90deg, rgba(244,169,59,.10), transparent); border-radius:12px; }
.cy-board-cards a { display:flex; flex-direction:column; gap:6px; padding:16px 8px; text-decoration:none; }
.cy-board-cards .c-top { display:flex; justify-content:space-between; align-items:center; }
.cy-board-cards .c-cat { font-size:12px; font-weight:700; color:var(--coten-blue); background:var(--coten-sky); padding:3px 10px; border-radius:999px; }
.cy-board-cards .c-date { font-size:12px; color:#9aa8be; }
.cy-board-cards .c-title { font-size:16px; font-weight:800; color:var(--coten-blue-dk); line-height:1.4; }
.cy-board-cards .c-sum { font-size:13.5px; color:var(--coten-mute); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cy-board-cards .c-meta { font-size:12.5px; color:#9aa8be; }

/* ── 페이지네이션 ── */
.cy-pager { display:flex; justify-content:center; align-items:center; gap:6px; margin:28px 0 4px; }
.cy-pager .pg {
  min-width:38px; height:38px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--coten-line); background:#fff; color:var(--coten-ink);
  text-decoration:none; font-size:14px; font-weight:600; transition:all .18s;
}
.cy-pager .pg:hover { border-color:var(--coten-blue); color:var(--coten-blue); }
.cy-pager .pg.num.on { background:var(--coten-blue); border-color:var(--coten-blue); color:#fff; box-shadow:0 6px 14px rgba(47,107,216,.28); }
.cy-pager .pg.off { opacity:.4; pointer-events:none; }

/* ── 상세 (청양군청식 메타바 + COTEN 카드) ── */
.cy-detail { background:#fff; border-radius:24px; padding:clamp(26px,4vw,48px); box-shadow:0 16px 44px rgba(31,74,122,.09); }
.cy-detail-head { border-top:2px solid var(--coten-blue-dk); padding-top:22px; }
.cy-detail-head h2 { font-size:clamp(21px,3vw,30px); font-weight:800; color:var(--coten-blue-dk); line-height:1.4; margin:0 0 16px; }
.cy-detail-meta { display:flex; flex-wrap:wrap; gap:0; margin:0; padding:0 0 18px; border-bottom:1px solid var(--coten-line); }
.cy-detail-meta > div { display:flex; align-items:center; gap:8px; padding:4px 18px 4px 0; margin-right:18px; border-right:1px solid var(--coten-line); }
.cy-detail-meta > div:last-child { border-right:0; }
.cy-detail-meta dt { font-size:13px; font-weight:700; color:var(--coten-mute); margin:0; }
.cy-detail-meta dd { font-size:13.5px; color:var(--coten-ink); margin:0; }
.cy-detail-lead { margin:22px 0; font-size:16.5px; line-height:1.85; color:var(--coten-mute); }
.cy-detail-hero { margin:0 0 26px; border-radius:18px; overflow:hidden; background:var(--coten-sky-2); }
.cy-detail-hero img { width:100%; max-height:460px; object-fit:cover; display:block; }
.cy-detail-body { line-height:1.95; color:var(--coten-ink); font-size:15.5px; }

/* 이전·다음글 */
.cy-adjacent { margin:34px 0 8px; border-top:1px solid var(--coten-line); border-bottom:1px solid var(--coten-line); }
.cy-adjacent .adj { display:grid; grid-template-columns:96px 1fr; align-items:center; gap:16px; padding:15px 6px; }
.cy-adjacent .adj.prev { border-bottom:1px solid var(--coten-line); }
.cy-adjacent .adj .lbl { font-size:13.5px; font-weight:700; color:var(--coten-blue); }
.cy-adjacent .adj a { color:var(--coten-ink); text-decoration:none; font-size:14.5px; }
.cy-adjacent .adj a:hover { color:var(--coten-blue); text-decoration:underline; text-underline-offset:3px; }
.cy-adjacent .adj .none { color:#9aa8be; font-size:14px; }
.cy-detail-foot { margin-top:30px; text-align:center; }
.cy-detail-foot .to-list { display:inline-block; padding:13px 40px; border-radius:999px; background:var(--coten-blue); color:#fff; font-weight:700; text-decoration:none; box-shadow:0 8px 18px rgba(47,107,216,.28); transition:transform .2s, background .2s; }
.cy-detail-foot .to-list:hover { transform:translateY(-2px); background:var(--coten-blue-dk); }

/* ── 반응형: 모바일에서 테이블→카드 전환 ── */
@media (max-width:768px) {
  .cy-board-table { display:none; }
  .cy-board-cards { display:block; }
  .cy-detail-meta > div { border-right:0; padding-right:0; margin-right:0; width:50%; }
  .cy-adjacent .adj { grid-template-columns:72px 1fr; gap:10px; }
}

/* ============================================================
   COTEN 배경 연출 강화 (coten.co.jp 참조)
   섹션 영문 라벨 · 큰 번호 인덱스 · 해시태그 칩 · 그라데이션
   ============================================================ */

/* 페이지 전체 은은한 하늘 그라데이션 (스크롤 배경전환과 공존) */
body.kos-coten-scroll { background-image: radial-gradient(1200px 600px at 80% -10%, rgba(115,166,229,.14), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(244,169,59,.08), transparent 55%); background-attachment: fixed; }

/* 섹션 영문 라벨 (Mission/Services 톤) */
.coten-seclabel { display:flex; align-items:center; gap:12px; margin:0 0 20px; }
.coten-seclabel .en { font-family:"Helvetica Neue",Arial,sans-serif; font-weight:800; font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--coten-blue); }
.coten-seclabel .bar { flex:1; height:1px; background:linear-gradient(90deg, var(--coten-blue), transparent); }

/* 해시태그 칩 (coten 인물 카드 톤) */
.coten-tags { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.coten-tags .tag { font-size:12.5px; font-weight:600; color:var(--coten-blue); background:var(--coten-sky); border:1px solid var(--coten-line); padding:5px 12px; border-radius:999px; }

/* 리드 인트로 위 큰 번호 인덱스 느낌 강화 */
.coten-lead .en::before { content:""; }

/* 청양 미러 cmpt.css 의 h2:before(17x7 점 불릿)·h3 배경 불릿이 COTEN 본문에 새어
   들어와 헤딩 옆에 어색한 점 두 개가 찍히는 문제 제거 (우리 디자인은 자체 라벨 사용). */
#txt.kos-coten-body h2::before,
#txt.kos-coten-body h3::before,
.kos-coten-body .coten-lead h2::before,
.kos-coten-body .coten-numsec h3::before,
.kos-coten-body .coten-band h2::before,
.kos-coten-body .coten-home-hero h2::before {
  content: none !important;
  display: none !important;
  background: none !important;
}
#txt.kos-coten-body h3 {
  background: none !important;
  border-bottom: 0 !important;
  padding-left: 0 !important;
}

/* 리빌 모션 좀 더 부드럽게(단계 딜레이 확장) */
.coten-reveal.d4 { transition-delay:.32s; }
.coten-reveal.d5 { transition-delay:.40s; }

/* 자료실/FAQ/폼도 유리질 배경으로 톤 통일 */
.coten-files-sec, .coten-faq .faq-one, .coten-form { backdrop-filter: blur(1px); }

/* ============================================================
   COTEN 시그니처 연출 (coten.co.jp 참조)
   곡선 blob 색배경 밴드 · 대형 영문 헤드라인 · 큰 반투명 번호 · 타임라인
   ============================================================ */

/* ── 곡선 blob 색배경 밴드 (Post Capitalism / History Database 톤) ── */
.coten-blob-band {
  position: relative; margin: 40px 0; padding: clamp(40px,6vw,88px) clamp(24px,5vw,72px);
  border-radius: 40px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--coten-blue) 0%, #4d86e6 55%, var(--coten-blue-dk) 100%);
}
.coten-blob-band.teal { background: linear-gradient(135deg, #1aa4a0 0%, #12857f 100%); }
.coten-blob-band.cream { background: var(--coten-cream); color: var(--coten-ink); }
.coten-blob-band.cream .bb-en { color: var(--coten-blue); }
/* 유기적 곡선 blob 오버레이 */
.coten-blob-band::before {
  content: ""; position: absolute; right: -12%; top: -30%; width: 60%; height: 160%;
  background: rgba(255,255,255,.10); border-radius: 46% 54% 50% 50% / 40% 44% 56% 60%;
  animation: kosBlobMorph 16s ease-in-out infinite; pointer-events: none;
}
.coten-blob-band::after {
  content: ""; position: absolute; left: -14%; bottom: -40%; width: 46%; height: 130%;
  background: rgba(255,255,255,.07); border-radius: 50%;
  animation: kosBlobMorph 22s ease-in-out infinite reverse; pointer-events: none;
}
.coten-blob-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 760px; }
.coten-blob-band .bb-en {
  font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.85);
}
.coten-blob-band .bb-title { font-size: clamp(22px, 3.4vw, 36px); font-weight: 800; line-height: 1.35; margin: 0; }
.coten-blob-band .bb-text { font-size: clamp(14.5px,1.7vw,16.5px); line-height: 1.95; color: rgba(255,255,255,.9); margin: 6px 0 0; }
.coten-blob-band.cream .bb-text { color: var(--coten-mute); }
.coten-blob-band .bb-btn {
  align-self: flex-start; margin-top: 14px; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px; border-radius: 999px; background: #fff; color: var(--coten-blue) !important;
  font-weight: 800; font-size: 14px; text-decoration: none; box-shadow: 0 10px 22px rgba(0,0,0,.14);
  transition: transform .2s;
}
.coten-blob-band .bb-btn:hover { transform: translateY(-2px); }
.coten-blob-band .bb-btn::after { content: "•"; opacity: .5; }
/* 배경에 깔리는 큰 반투명 번호 */
.coten-blob-band .bb-bignum {
  position: absolute; right: 6%; bottom: -6%; z-index: 1;
  font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: clamp(120px, 22vw, 300px);
  line-height: .8; color: rgba(255,255,255,.12); letter-spacing: -.04em; pointer-events: none; user-select: none;
}
.coten-blob-band.cream .bb-bignum { color: rgba(47,107,216,.10); }

@keyframes kosBlobMorph {
  0%,100% { border-radius: 46% 54% 50% 50% / 40% 44% 56% 60%; transform: rotate(0deg) scale(1); }
  50%     { border-radius: 58% 42% 44% 56% / 56% 50% 50% 44%; transform: rotate(8deg) scale(1.06); }
}

/* ── 대형 영문 헤드라인 (Company History 톤) ── */
.coten-bighead { margin: 6px 0 30px; }
.coten-bighead .en {
  font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 800;
  font-size: clamp(34px, 6vw, 72px); line-height: .98; letter-spacing: -.02em; color: var(--coten-blue-dk);
}
.coten-bighead .en .l2 { display: block; color: var(--coten-blue); }
.coten-bighead .ko { margin-top: 10px; font-size: 15px; color: var(--coten-mute); font-weight: 600; }

/* ── 타임라인 (연혁) — 세로 레일 방식. 가로 스크롤 없음, 전 반응형 ── */
.coten-timeline {
  position: relative;
  margin: 22px 0 10px;
  padding: 6px 0 6px 4px;
}
.coten-timeline .tl-track {
  position: relative;
  display: grid;
  gap: 0;
  padding: 0;
}
/* 왼쪽 세로 레일 */
.coten-timeline .tl-track::before {
  content: "";
  position: absolute;
  left: 9px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--coten-line), rgba(213,227,244,.35));
  border-radius: 2px;
}
.coten-timeline .tl-item {
  position: relative;
  padding: 0 0 22px 40px;
  min-height: 24px;
}
.coten-timeline .tl-item:last-child { padding-bottom: 2px; }
.coten-timeline .tl-dot {
  position: absolute;
  left: 0; top: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--coten-blue);
  box-shadow: 0 0 0 5px rgba(47,107,216,.14);
  z-index: 2;
}
.coten-timeline .tl-dot::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff;
}
.coten-timeline .tl-item:nth-child(4n+2) .tl-dot { background: var(--coten-accent); box-shadow: 0 0 0 5px rgba(244,169,59,.16); }
.coten-timeline .tl-item:nth-child(4n+3) .tl-dot { background: #ef5b6e; box-shadow: 0 0 0 5px rgba(239,91,110,.16); }
.coten-timeline .tl-item:nth-child(4n+4) .tl-dot { background: #12857f; box-shadow: 0 0 0 5px rgba(18,133,127,.16); }
.coten-timeline .tl-date {
  font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 15px;
  color: var(--coten-blue-dk); letter-spacing: .01em; line-height: 1.4;
}
.coten-timeline .tl-text { margin-top: 5px; font-size: 14.5px; line-height: 1.7; color: var(--coten-ink); }

/* 넓은 화면: 좌우 교차 2열 타임라인으로 확장 */
@media (min-width: 861px) {
  .coten-timeline { padding: 10px 0; }
  .coten-timeline .tl-track::before { left: 50%; transform: translateX(-50%); top: 0; bottom: 0; }
  .coten-timeline .tl-item {
    width: 50%; padding: 0 0 30px 0; box-sizing: border-box;
  }
  .coten-timeline .tl-item:nth-child(odd)  { grid-column: 1; padding-right: 44px; text-align: right; justify-self: end; }
  .coten-timeline .tl-item:nth-child(even) { grid-column: 2; padding-left: 44px; }
  .coten-timeline .tl-track { grid-template-columns: 1fr 1fr; column-gap: 0; }
  .coten-timeline .tl-dot { top: 2px; }
  .coten-timeline .tl-item:nth-child(odd)  .tl-dot { left: auto; right: -10px; }
  .coten-timeline .tl-item:nth-child(even) .tl-dot { left: -10px; }
}

/* ── 물결 곡선 섹션 전환 (상단/하단) ── */
.coten-wave-top, .coten-wave-bottom { display: block; width: 100%; height: 40px; line-height: 0; }
.coten-wave-top svg, .coten-wave-bottom svg { width: 100%; height: 100%; display: block; }


/* ============================================================
   COTEN HOMEPAGE(coten.co.jp/) 히어로 연출 — 서브본문 이식 (원본 동일 클래스/키프레임)
   원본 css/js: wp-content/themes/coten/assets/{css/style.css, js/common.js}
   기법: .js-anime 영역이 뷰포트에 들어오면 .is-anime 부여 → 자식 .js-anime-elm 이
        fadeIn / fadeInLeft / fadeInRight / fadeInUpText / popIn / scaleDown 재생.
   ============================================================ */

/* 애니메이션 대상 초기 상태 (원본 .js-anime-elm 그대로) */
.kos-coten-body .js-anime-elm {
  animation-fill-mode: both;
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0;
}
/* 부모 .is-anime 부여 시 재생 */
.kos-coten-body .js-anime.is-anime .js-anime-elm,
.kos-coten-body .js-anime-elm.is-anime { animation-name: fadeIn; }
.kos-coten-body .is-anime .js-anime-elm.is-fade-in-left,
.kos-coten-body .js-anime-elm.is-anime.is-fade-in-left { animation-name: fadeInLeft; }
.kos-coten-body .is-anime .js-anime-elm.is-fade-in-right,
.kos-coten-body .js-anime-elm.is-anime.is-fade-in-right { animation-name: fadeInRight; }
.kos-coten-body .is-anime .js-anime-elm.is-fade-in-up-text,
.kos-coten-body .js-anime-elm.is-anime.is-fade-in-up-text { animation-name: fadeInUpText; }
.kos-coten-body .is-anime .js-anime-elm.is-scale-down,
.kos-coten-body .js-anime-elm.is-anime.is-scale-down { animation-name: scaleDown; }
.kos-coten-body .is-anime .js-anime-elm.is-pop-in,
.kos-coten-body .js-anime-elm.is-anime.is-pop-in { animation-name: popIn; animation-duration: .8s; animation-timing-function: ease; }

/* duration / delay 유틸 (원본과 동일 값) */
.kos-coten-body .u-anime-duration9 { animation-duration: .9s; }
.kos-coten-body .anime-duration12,
.kos-coten-body .u-anime-duration12 { animation-duration: 1.2s; }
.kos-coten-body .u-delay2 { animation-delay: .2s; }
.kos-coten-body .u-delay4 { animation-delay: .4s; }
.kos-coten-body .u-delay6 { animation-delay: .6s; }
.kos-coten-body .u-delay8 { animation-delay: .8s; }
.kos-coten-body .u-delay10 { animation-delay: 1s; }
.kos-coten-body .u-delay12 { animation-delay: 1.2s; }

/* 키프레임 (원본 style.css 그대로) */
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInLeft { 0% { transform: translate3d(20vw, 0, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } }
@keyframes fadeInRight { 0% { transform: translate3d(-20vw, 0, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } }
@keyframes fadeInUp { 0% { transform: translate3d(0, 20vw, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } }
@keyframes fadeInUpText { 0% { transform: translate3d(0, 40px, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } }
@keyframes scaleDown { 0% { transform: scale(1.1) rotate(0.1deg); opacity: 0; } 100% { transform: scale(1) rotate(0.1deg); opacity: 1; } }
@keyframes popIn { 0% { transform: scale(0); opacity: 1; } 50% { transform: scale(1); } 80% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } }

/* 대형 영문 타이틀 슬라이드업 (원본 js-slide-up-all 근사) */
.kos-coten-body .js-slide-up-all { overflow: hidden; }
.kos-coten-body .js-slide-up-all__item {
  display: block; clip-path: inset(-0.2em 0 -0.1em);
  transform: translateY(105%); opacity: 0;
  transition: transform 1s cubic-bezier(.22,.61,.36,1), opacity 1s ease;
}
body.kos-reveal-on .kos-coten-body .js-slide-up-all.is-up .js-slide-up-all__item { transform: none; opacity: 1; }
/* JS 미동작/reduced-motion 대비: 기본 노출 */
body:not(.kos-reveal-on) .kos-coten-body .js-slide-up-all__item { transform: none; opacity: 1; }

/* ── 홈 히어로: 배경 poster + 자동재생 루프 비디오 (원본 .p-top-main) ── */
.coten-home-hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(340px, 52vh, 560px);
  border-radius: 26px;
  overflow: hidden;
  margin: 0 0 30px;
  background: var(--coten-sky-2);
  box-shadow: 0 22px 50px rgba(31, 74, 122, 0.14);
}
.coten-home-hero__poster,
.coten-home-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.coten-home-hero__video { z-index: 1; }
.coten-home-hero__poster { z-index: 0; }
.coten-home-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(20,44,86,0) 40%, rgba(20,44,86,.55) 100%);
  pointer-events: none;
}
.coten-home-hero__body { position: relative; z-index: 3; padding: clamp(22px, 4vw, 46px); color: #fff; }
.coten-home-hero__en {
  font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 300;
  font-size: clamp(46px, 11vw, 150px); line-height: .85; letter-spacing: -0.04em;
  color: #fff; margin: 0 0 8px;
}
.coten-home-hero__catch {
  font-size: clamp(18px, 2.6vw, 30px); font-weight: 700; line-height: 1.5;
  text-shadow: 0 2px 18px rgba(11,28,58,.4); margin: 0; letter-spacing: .04em;
}

/* ── 홈 리드: 원형 클립 pop-in 미디어 + 페이드업 텍스트 (원본 .p-home-lead) ── */
.coten-home-lead {
  position: relative; overflow: hidden;
  margin: 0 0 30px; padding: clamp(28px, 4vw, 52px);
  border-radius: 26px;
  background: var(--coten-blue); color: #fff;
}
.coten-home-lead__media {
  width: min(60%, 340px); margin: 0 auto 26px; aspect-ratio: 1/1;
}
.coten-home-lead__media .u-clip-circle {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.coten-home-lead__media .u-clip-circle img,
.coten-home-lead__media .u-clip-circle video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.coten-home-lead__body { text-align: center; }
.coten-home-lead__item {
  font-size: clamp(15px, 1.9vw, 18px); line-height: 2.1; letter-spacing: .06em;
  margin: 0 0 18px; color: rgba(255,255,255,.94);
}
.coten-home-lead__cloud { position: absolute; left: 0; right: 0; bottom: -2px; z-index: 0; pointer-events: none; opacity: .5; }
.coten-home-lead__cloud img { width: 100%; display: block; }

/* ── 미션/서비스 구름 (원본 .p-top-mission / .p-top-service 좌우 fade-in) ── */
.coten-home-clouds { position: relative; min-height: 120px; margin: 6px 0; pointer-events: none; overflow: hidden; }
.coten-home-clouds .cloud-l,
.coten-home-clouds .cloud-r { position: absolute; top: 0; width: min(46vw, 520px); }
.coten-home-clouds .cloud-l { left: -6%; }
.coten-home-clouds .cloud-r { right: -6%; }
.coten-home-clouds img { width: 100%; display: block; }

@media (max-width: 768px) {
  .coten-home-lead__media { width: 78%; }
  .coten-home-hero { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .kos-coten-body .js-anime-elm { animation: none !important; opacity: 1 !important; }
  .kos-coten-body .js-slide-up-all__item { transform: none !important; opacity: 1 !important; }
  .coten-home-hero__video { display: none; }
}


/* ============================================================================
   COTEN CLEAN — coten.co.jp/services/historydatabase 톤으로 서브본문 정리
   (기존의 파스텔 배경·둥근 카드 그림자·그라디언트 밴드·본문 구름/새/배·
    큰 반투명 영문 워터마크를 걷어내고 흰 배경·여백·타이포 중심으로 재정의)
   맨 끝에 위치하여 캐스케이드로 우선한다.
   ============================================================================ */
:root {
  --c2-bg:      #ffffff;   /* 본문 배경: 순백 */
  --c2-bg-alt:  #f7f8fa;   /* 교차/섹션 옅은 회색 */
  --c2-ink:     #2a2b30;   /* 본문 텍스트 */
  --c2-head:    #6e4e48;   /* 제목(브라운, coten u-text-brown01) */
  --c2-mute:    #6b7280;   /* 보조 텍스트 */
  --c2-line:    #e7e9ee;   /* 헤어라인 */
  --c2-accent:  #2f6bd8;   /* 포인트(절제된 블루) */
  --c2-navy:    #23324a;   /* 딥 네이비 블록 */
}

/* 배경: 스크롤 색전환·파스텔 제거 → 담백한 흰/회색 */
body.kos-coten-scroll,
body.kos-coten-scroll.bg-step-0,
body.kos-coten-scroll.bg-step-1,
body.kos-coten-scroll.bg-step-2,
body.kos-coten-scroll.bg-step-3,
body.kos-coten-scroll.bg-step-4 { background-color: var(--c2-bg-alt) !important; transition: none !important; }

#txt.kos-coten-body:not(.kos-epdm-body) {
  background: var(--c2-bg) !important;
  color: var(--c2-ink);
  font-size: 16px;
  padding: clamp(20px, 3vw, 40px) 0 60px;
}

/* 본문에 흩뿌려진 구름/새/배 장식 제거 (히어로 page-head 는 유지) */
.kos-coten-body:not(.kos-epdm-body) .coten-sky-layer,
.coten-numsec .float-cloud,
.coten-band .band-cloud,
.coten-band .band-ship,
.coten-cta .cta-bird,
.kos-coten-content-deco { display: none !important; }

/* 물결 디바이더 제거 (촌스러운 파스텔 웨이브) */
.coten-wave, .coten-wave-top, .coten-wave-bottom { display: none !important; }

/* ── 대형 영문 섹션 라벨 (coten 시그니처: 얇은 Neue, 넉넉한 여백) ── */
.coten-seclabel {
  font-family: "NeueMachina", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c2-accent);
  margin: clamp(48px, 7vw, 96px) 0 clamp(20px, 3vw, 40px);
}

/* ── 리드 인트로: 카드/워터마크 제거, 좌측 정렬 오픈 레이아웃 ── */
.kos-coten-body:not(.kos-epdm-body) .coten-lead {
  max-width: none;
  margin: 6px 0 clamp(40px, 6vw, 72px);
  padding: 0;
  text-align: left;
}
.kos-coten-body:not(.kos-epdm-body) .coten-lead .en {
  color: var(--c2-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.24em;
  margin-bottom: 16px;
}
.kos-coten-body:not(.kos-epdm-body) .coten-lead h2 {
  color: var(--c2-head) !important;
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin: 0 0 22px;
}
.kos-coten-body:not(.kos-epdm-body) .coten-lead p {
  color: var(--c2-mute);
  font-size: clamp(15px, 1.6vw, 16.5px);
  line-height: 2.1;
  max-width: 760px;
}

/* ── 인트로/본문 섹션(numsec): 그림자 카드 → 흰 배경 + 하단 헤어라인 ── */
.kos-coten-body:not(.kos-epdm-body) .coten-numsec,
.kos-coten-body:not(.kos-epdm-body) .coten-numsec:nth-child(even) {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(28px, 4vw, 48px) 0 !important;
  margin: 0 !important;
  border-top: 1px solid var(--c2-line);
}
.kos-coten-body:not(.kos-epdm-body) .coten-numsecs > .coten-numsec:first-child,
.kos-coten-body:not(.kos-epdm-body) > .coten-numsec:first-of-type { border-top: 0; }
.kos-coten-body:not(.kos-epdm-body) .coten-numsec-inner { gap: clamp(28px, 5vw, 64px); align-items: center; }

.kos-coten-body:not(.kos-epdm-body) .coten-numsec .num {
  color: var(--c2-line) !important;
  opacity: 1 !important;
  font-weight: 700;
}
.kos-coten-body:not(.kos-epdm-body) .coten-numsec .kicker { color: var(--c2-accent); letter-spacing: 0.18em; }
.kos-coten-body:not(.kos-epdm-body) .coten-numsec h3 {
  color: var(--c2-head) !important;
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.55;
}
.kos-coten-body:not(.kos-epdm-body) .coten-numsec p { color: var(--c2-ink); font-size: 15.5px; line-height: 2; }

/* 이미지: 원형 클립 → 부드러운 라운드 사각 (담백) */
.kos-coten-body:not(.kos-epdm-body) .coten-numsec .media {
  border-radius: 14px !important;
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  background: var(--c2-bg-alt) !important;
  box-shadow: none !important;
  border: 1px solid var(--c2-line);
}
.kos-coten-body:not(.kos-epdm-body) .coten-numsec .media::after { display: none !important; }

/* ── 특징 리스트: 크림 알약 → 깔끔한 텍스트 불릿 ── */
.kos-coten-body:not(.kos-epdm-body) .coten-points { gap: 0; margin-top: 20px; border-top: 1px solid var(--c2-line); }
.kos-coten-body:not(.kos-epdm-body) .coten-points li {
  background: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--c2-line);
  padding: 14px 6px 14px 26px !important;
  font-weight: 500;
  font-size: 15px;
  color: var(--c2-ink);
}
.kos-coten-body:not(.kos-epdm-body) .coten-points li::before {
  width: 6px !important; height: 6px !important;
  left: 6px !important; top: 22px !important;
  transform: none !important;
  background: var(--c2-accent) !important;
  box-shadow: none !important;
}

/* ── 밴드(스탯): 그라디언트 → 딥 네이비 솔리드 블록, 정돈된 그리드 ── */
.kos-coten-body:not(.kos-epdm-body) .coten-band {
  background: var(--c2-navy) !important;
  border-radius: 16px !important;
  margin: clamp(32px, 5vw, 56px) 0 !important;
  padding: clamp(32px, 4vw, 52px) clamp(24px, 4vw, 48px) !important;
}
.kos-coten-body:not(.kos-epdm-body) .coten-band-grid { gap: 28px; }
.kos-coten-body:not(.kos-epdm-body) .coten-band-grid .num { font-weight: 700; letter-spacing: -0.01em; }
.kos-coten-body:not(.kos-epdm-body) .coten-band-grid .num .unit { color: #8fb2f0; }
.kos-coten-body:not(.kos-epdm-body) .coten-band-grid p { color: rgba(255,255,255,.7); font-size: 13px; letter-spacing: .02em; }

/* ── 갤러리: 파랑 캡션 그라디언트 → 담백한 라운드 + 하단 캡션 ── */
.kos-coten-body:not(.kos-epdm-body) .coten-gallery { gap: 18px; margin: 10px 0 4px; }
.kos-coten-body:not(.kos-epdm-body) .coten-gallery .g-item {
  border-radius: 12px !important;
  background: var(--c2-bg-alt) !important;
  box-shadow: none !important;
  border: 1px solid var(--c2-line);
}
.kos-coten-body:not(.kos-epdm-body) .coten-gallery .g-item .cap {
  background: linear-gradient(transparent, rgba(20,24,33,.72)) !important;
  font-weight: 600; font-size: 13px; letter-spacing: .01em;
}

/* ── CTA: 크림 라운드 → 담백한 회색 밴드 + 밑줄형 링크 톤 ── */
.kos-coten-body:not(.kos-epdm-body) .coten-cta {
  background: var(--c2-bg-alt) !important;
  border: 1px solid var(--c2-line);
  border-radius: 16px !important;
  margin: clamp(40px, 6vw, 72px) 0 8px !important;
  padding: clamp(32px, 4vw, 52px) !important;
}
.kos-coten-body:not(.kos-epdm-body) .coten-cta h3 { color: var(--c2-head) !important; font-weight: 700; }
.kos-coten-body:not(.kos-epdm-body) .coten-cta .cta-links a {
  background: var(--c2-accent) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-weight: 600;
  padding: 13px 28px !important;
}
.kos-coten-body:not(.kos-epdm-body) .coten-cta .cta-links a:hover { background: #1f57bd !important; transform: none !important; box-shadow: none !important; }
.kos-coten-body:not(.kos-epdm-body) .coten-cta .cta-links a.ghost {
  background: #fff !important; color: var(--c2-ink) !important;
  border: 1px solid var(--c2-line) !important;
}
.kos-coten-body:not(.kos-epdm-body) .coten-cta .cta-links a.ghost:hover { background: #fff !important; border-color: var(--c2-accent) !important; color: var(--c2-accent) !important; }

/* ── 관련/타임라인/리드 등 파스텔 배경 잔재 정리 ── */
.kos-coten-body:not(.kos-epdm-body) .coten-numsec[style*="display:block"] { border-top: 1px solid var(--c2-line); }
.kos-coten-body:not(.kos-epdm-body) .coten-timeline .tl-date { color: var(--c2-head); }
.kos-coten-body:not(.kos-epdm-body) .coten-timeline .tl-track::before,
.kos-coten-body:not(.kos-epdm-body) .coten-timeline .tl-dot { }

/* ── 본문 리빌 고급화 — 아래에서 떠오르며 clip 마스크로 드러남 + blur 해제 ── */
body.kos-reveal-on .kos-coten-body:not(.kos-epdm-body) .coten-reveal {
  opacity: 0;
  transform: translateY(46px);
  clip-path: inset(0 0 8% 0);
  filter: blur(6px);
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.16,1,.3,1),
    clip-path .9s cubic-bezier(.16,1,.3,1),
    filter .7s ease;
  will-change: transform, opacity, clip-path, filter;
}
body.kos-reveal-on .kos-coten-body:not(.kos-epdm-body) .coten-reveal.is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  body.kos-reveal-on .kos-coten-body:not(.kos-epdm-body) .coten-reveal {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; filter: none !important; transition: none !important;
  }
}

/* 반응형: 섹션 라벨/여백 축소 */
@media (max-width: 640px) {
  .coten-seclabel { font-size: clamp(26px, 9vw, 40px); margin: 40px 0 18px; }
  .kos-coten-body:not(.kos-epdm-body) .coten-band-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}


/* ── 키워드 태그 행 (기존 밴드에 밀어넣던 라벨을 담백한 칩으로) ── */
.kos-coten-body:not(.kos-epdm-body) .coten-tags {
  list-style: none; margin: 22px 0 8px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.kos-coten-body:not(.kos-epdm-body) .coten-tags li {
  padding: 9px 16px;
  border: 1px solid var(--c2-line);
  border-radius: 999px;
  background: var(--c2-bg-alt);
  color: var(--c2-ink);
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
}

/* ── 히어로 대형 영문 워터마크 톤다운 (헤더/장식과 겹쳐 지저분해 보이던 문제) ── */
#svisualwrap.kos-coten-fx .kos-coten-en {
  color: rgba(120, 160, 220, 0.28) !important;
  font-weight: 300 !important;
}

/* RELATED 라벨을 섹션 라벨 톤으로 통일 */
.kos-coten-body:not(.kos-epdm-body) .coten-numsec .kicker { font-size: 11px; }

/* ============================================================
   [COSS 2026] 서브페이지 히어로 재설계 — 절제된 B2B 톤
   놀이터/유치원 장식(소나무·언덕·캐릭터·꽃·음표·구름·새·배)을
   숨기고, 브랜드 그라데이션 + 미니멀 라인 도형으로 교체.
   override 파일 최하단 → 청양 미러 원본을 덮어씀.
   ============================================================ */

/* ── 1. 히어로 컨테이너 & 배경 그라데이션 ────────────────── */
#svisualwrap.kos-coten-fx {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f2f5e 0%, #17457f 44%, #1f6bd0 100%);
  isolation: isolate;
}
/* 은은한 라디얼 하이라이트 + 얇은 대각 라인 텍스처 */
#svisualwrap.kos-coten-fx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 140% at 88% -10%, rgba(120,190,255,.28) 0%, rgba(120,190,255,0) 55%),
    radial-gradient(90% 120% at 6% 120%, rgba(0,180,190,.22) 0%, rgba(0,180,190,0) 60%);
  pointer-events: none;
}
/* 하단 얇은 하이라이트 라인 (콘텐츠와 경계) */
#svisualwrap.kos-coten-fx::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px; z-index: 6;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

/* ── 2. 원본 놀이터 장식 전부 제거 ───────────────────────── */
#svisualwrap.kos-coten-fx .visual_box:before,     /* 소나무·새 SVG */
#svisualwrap.kos-coten-fx .obj.sub-bg,            /* 회색 언덕 png */
#svisualwrap.kos-coten-fx .obj.sub-bg01,          /* 초록 blob */
#svisualwrap.kos-coten-fx .obj.sub-bg02,          /* 초록 blob */
#svisualwrap.kos-coten-fx .obj.sub-bg03,          /* 캐릭터·꽃·음표 컨테이너 */
#svisualwrap.kos-coten-fx #sub-vs_lotti,          /* 로띠(어린이백제체험관 로고 자리) */
#svisualwrap.kos-coten-fx .kos-coten-cloud,       /* 구름 */
#svisualwrap.kos-coten-fx .kos-coten-bird,        /* 새 */
#svisualwrap.kos-coten-fx .kos-coten-ship {       /* 배 */
  display: none !important;
}

/* ── 3. 영문 워터마크 → 세련된 대형 타이틀 톤 ────────────── */
#svisualwrap.kos-coten-fx .kos-coten-layer {
  z-index: 2;
  display: flex;
  align-items: center;
}
#svisualwrap.kos-coten-fx .kos-coten-en,
.kos-coten-fx[data-coten="service"] .kos-coten-en {
  position: static !important;
  transform: none !important;
  left: auto !important; top: auto !important;
  margin: 0 0 0 clamp(16px, 4vw, 72px);
  font-family: "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
  font-weight: 600 !important;
  font-size: clamp(40px, 7vw, 96px) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 2px 24px rgba(0,0,0,.18);
}
/* 영문 위 얇은 브랜드 라벨 바 */
#svisualwrap.kos-coten-fx .kos-coten-en::before {
  content: "COSS";
  display: block;
  margin-bottom: 14px;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 700;
  letter-spacing: .32em;
  color: rgba(140, 205, 255, .95);
  text-shadow: none;
}
/* 영문 아래 짧은 강조 언더라인 */
#svisualwrap.kos-coten-fx .kos-coten-en::after {
  content: "";
  display: block;
  width: 56px; height: 3px;
  margin-top: 22px;
  border-radius: 3px;
  background: linear-gradient(90deg, #45c6d6, #7db4ff);
}

/* ── 4. 히어로 높이·정렬 안정화 ─────────────────────────── */
/* 히어로 전체 높이를 컨테이너에 고정하고, 내부 래퍼들이 그 높이를
   100% 채우도록 해 상단에 배경 그라데이션 띠가 남지 않게 함.
   ★ 원본 #svisualwrap 의 padding-top:52px 이 내부 영상을 아래로 밀어
     상단에 그라데이션 띠를 만들던 원인 → 0 으로 제거 */
/* ── 4. connectwave식 sticky 확대 히어로 ─────────────────────
   히어로는 상단 배너(고정 높이)로 두고, 영상이 칸을 꽉 채움.
   스크롤 시 영상 살짝 확대 + 글씨 위로 페이드 (JS: _hero_scroll.html). */
#svisualwrap.kos-coten-fx {
  height: clamp(300px, 34vw, 420px);
  min-height: 300px;
  padding-top: 0 !important;
}
#svisualwrap.kos-coten-fx .svisual,
#svisualwrap.kos-coten-fx .svisual .wrapper,
#svisualwrap.kos-coten-fx .visual_box {
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
}
#svisualwrap.kos-coten-fx .visual_box {
  display: flex;
  align-items: center;
}
#svisualwrap.kos-coten-fx .wrapper { display: flex; align-items: center; }

/* 영상은 히어로 칸 전체를 덮음 */
#svisualwrap.kos-coten-fx .kos-hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* 스크롤 힌트는 배너형에서는 미사용 */
#svisualwrap.kos-coten-fx .kos-hero-hint { display: none; }

/* ── 5. 반응형 ──────────────────────────────────────────── */
@media (max-width: 768px) {
  #svisualwrap.kos-coten-fx {
    background: linear-gradient(135deg, #12356a 0%, #1f6bd0 100%);
    height: clamp(180px, 42vw, 240px);
    min-height: 180px;
    padding-top: 0 !important;
  }
  #svisualwrap.kos-coten-fx .kos-coten-en {
    font-size: clamp(34px, 12vw, 60px) !important;
    margin-left: 20px;
  }
  #svisualwrap.kos-coten-fx .kos-coten-en::after { margin-top: 14px; }
}

/* ── 6. 본문 상단 중복 영문 헤드라인 정리 ────────────────────
   히어로에 이미 대형 영문(Company/Business 등)이 있으므로
   본문의 거대 영문 반복을 제거하고, 국문 리드만 절제된 톤으로. */
.kos-coten-body:not(.kos-epdm-body) .coten-bighead { margin: 4px 0 20px; }
.kos-coten-body:not(.kos-epdm-body) .coten-bighead .en {
  font-size: clamp(13px, 1.4vw, 15px) !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  line-height: 1.2 !important;
  color: var(--c2-accent, #1f6bd0) !important;
  text-transform: uppercase;
}
/* 두 번째 줄(History 등)을 첫 줄과 같은 라벨 톤으로 인라인 처리 */
.kos-coten-body:not(.kos-epdm-body) .coten-bighead .en .l2 {
  display: inline !important;
  color: var(--c2-accent, #1f6bd0) !important;
}
.kos-coten-body:not(.kos-epdm-body) .coten-bighead .en .l2::before { content: " "; }
/* 국문 헤드라인을 본문 대표 제목으로 승격 */
.kos-coten-body:not(.kos-epdm-body) .coten-bighead .ko {
  margin-top: 8px;
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.4;
  font-weight: 800;
  color: var(--c2-head, #17263f);
}
/* 리드 인트로의 영문 키커는 bighead와 겹치므로 숨김(있을 때) */
.kos-coten-body:not(.kos-epdm-body) .coten-bighead + .coten-lead .en { display: none; }

/* ============================================================
   [COSS 2026] 히어로와 톤 통일 — 좌측 LNB / 로고 / 견적 위젯
   ============================================================ */

/* ── 좌측 LNB 헤더: 놀이터 캐릭터 배경 → 브랜드 딥블루 그라데이션 ── */
#remote h1 {
  background-color: #17457f !important;
  background-image:
    radial-gradient(120% 160% at 100% 0%, rgba(120,190,255,.35) 0%, rgba(120,190,255,0) 55%),
    linear-gradient(135deg, #0f2f5e 0%, #1f6bd0 100%) !important;
  height: auto !important;
  min-height: 96px;
  padding: 26px 22px !important;
  justify-content: flex-start !important;
}
#remote h1 span { font-size: 24px !important; letter-spacing: -.01em; }

/* ── 견적 위젯: 놀이터 사자 캐릭터 제거 + 브랜드 버튼 톤 ── */
#remote .cyber .svg-box:after,   /* lnb_cy.png 사자 */
#remote .cyber .svg-box:before { display: none !important; }
#remote .cyber-button {
  background-color: #0f2f5e !important;
  background-image: linear-gradient(135deg, #17457f 0%, #2b7fe0 100%) !important;
}
#remote .cyber .icon.cy { display: none !important; }
/* 견적 위젯이 메뉴와 너무 떨어져 붕 뜨던 간격 정리 */
#remote .cyber { margin-top: 28px !important; }

/* ── 로고: "어린이백제체험관" SVG(미러 잔재) 숨김 + COSS 워드마크 ── */
#top_layout #logo .ir-logo {
  background-image: none !important;
  width: auto !important;
  min-width: 132px;
}
#top_layout #logo .ir-logo::after {
  content: "COSS";
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: .02em;
  color: #17263f;
  line-height: 1;
}
#top_layout #logo .ir-logo::before {
  content: "우레탄·탄성포장 · Play Floor";
  display: block;
  order: 2;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #2b7fe0;
}
#top_layout #logo .ir-logo {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* ── 본문 떠다니는 구름/새/배 레이어 톤다운(은은하게) ── */
.coten-sky-layer .sky-cloud { opacity: .35 !important; filter: saturate(.55) brightness(1.05); }
.coten-sky-layer .sky-bird,
.coten-sky-layer .sky-ship { display: none !important; }

/* ============================================================
   [COSS 2026] 히어로 배경 동영상 (movie 폴더 영상 적용)
   비디오가 히어로 전체를 덮고, 위에 딥블루 스크림으로
   대형 영문/라벨 가독성 유지. 비디오 실패 시 기존 그라데이션 노출.
   ============================================================ */
/* 영상 요소: 히어로 칸 전체를 덮음 (cover) */
#svisualwrap.kos-coten-fx .kos-hero-video__el {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  display: block;
  will-change: transform;
}
/* 딥블루 스크림 — 좌측 진하게(텍스트 영역) → 우측 영상 노출 */
#svisualwrap.kos-coten-fx .kos-hero-video__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,34,66,.82) 0%, rgba(13,42,82,.62) 42%, rgba(17,69,127,.44) 100%),
    linear-gradient(180deg, rgba(11,34,66,.30) 0%, rgba(11,34,66,0) 30%, rgba(11,34,66,.35) 100%);
  will-change: opacity;
}
/* 영문/라벨 레이어를 비디오 위로 */
#svisualwrap.kos-coten-fx .kos-coten-layer { z-index: 3; }
#svisualwrap.kos-coten-fx::before { z-index: 2; }
#svisualwrap.kos-coten-fx::after { z-index: 4; }
#svisualwrap.kos-coten-fx .kos-coten-en { will-change: transform, opacity; }

@media (max-width: 768px) {
  #svisualwrap.kos-coten-fx .kos-hero-video__scrim {
    background:
      linear-gradient(90deg, rgba(11,34,66,.80) 0%, rgba(13,42,82,.60) 100%),
      linear-gradient(180deg, rgba(11,34,66,.30) 0%, rgba(11,34,66,0) 40%, rgba(11,34,66,.40) 100%);
  }
}

/* ============================================================
   [COSS 2026] 히어로 시네마틱 진입 연출
   1) 영상: 가로 슬릿(clip-path)에서 위아래로 열림 + 살짝 줌아웃
   2) 타이틀: 글자 단위 마스크 스태거(아래→위 솟아오름)
   3) 타이틀 위 라이트 스윕(shine) 1회
   ============================================================ */

/* 1) 영상 클립 리빌 */
#svisualwrap.kos-coten-fx .kos-hero-video {
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 1.15s cubic-bezier(.76,0,.24,1);
}
#svisualwrap.kos-coten-fx .kos-hero-video__el {
  transform: translate(-50%, -50%) scale(1.18);
  transition: transform 1.5s cubic-bezier(.22,.61,.36,1);
}
#svisualwrap.kos-coten-fx.is-hero-in .kos-hero-video { clip-path: inset(0 0 0 0); }
#svisualwrap.kos-coten-fx.is-hero-in .kos-hero-video__el {
  transform: translate(-50%, -50%) scale(1);
}
/* 스크림도 함께 서서히 */
#svisualwrap.kos-coten-fx .kos-hero-video__scrim { opacity: 0; transition: opacity 1.2s ease .2s; }
#svisualwrap.kos-coten-fx.is-hero-in .kos-hero-video__scrim { opacity: 1; }

/* 2) 타이틀 — JS가 글자를 .kh-ch 로 분할. 각 글자 마스크 스태거 */
#svisualwrap.kos-coten-fx .kos-coten-en { overflow: visible; }
#svisualwrap.kos-coten-fx .kos-coten-en .kh-ch {
  display: inline-block;
  transform: translateY(105%) rotate(3deg);
  opacity: 0;
  transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .6s ease;
  transition-delay: calc(var(--i, 0) * 45ms + .35s);
}
#svisualwrap.kos-coten-fx.is-hero-in .kos-coten-en .kh-ch {
  transform: translateY(0) rotate(0);
  opacity: 1;
}
/* 글자 마스크(넘침 숨김)용 래퍼 */
#svisualwrap.kos-coten-fx .kos-coten-en .kh-wrap {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: .04em; /* 디센더 잘림 방지 */
}
/* JS 미분할(폴백)이면 통짜로 슬라이드업 */
#svisualwrap.kos-coten-fx .kos-coten-en:not(.kh-split) {
  transform: translateY(38px); opacity: 0;
  transition: transform 1s cubic-bezier(.16,1,.3,1) .3s, opacity .9s ease .3s;
}
#svisualwrap.kos-coten-fx.is-hero-in .kos-coten-en:not(.kh-split) {
  transform: translateY(0); opacity: 1;
}
/* COSS 라벨 / 언더라인도 페이드 인 */
#svisualwrap.kos-coten-fx .kos-coten-en::before,
#svisualwrap.kos-coten-fx .kos-coten-en::after { opacity: 0; transition: opacity .8s ease .55s; }
#svisualwrap.kos-coten-fx.is-hero-in .kos-coten-en::before,
#svisualwrap.kos-coten-fx.is-hero-in .kos-coten-en::after { opacity: 1; }

/* 3) 라이트 스윕 — 진입 완료 시 1회 훑기 */
#svisualwrap.kos-coten-fx .kos-coten-en {
  position: relative;
}
#svisualwrap.kos-coten-fx.is-hero-in .kos-coten-en .kh-shine {
  position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  mix-blend-mode: screen;
  transform: translateX(-160%) skewX(-14deg);
  opacity: 0;
  animation: kosShineSweep 1.1s ease .9s 1 forwards;
  pointer-events: none;
}
@keyframes kosShineSweep {
  0%   { transform: translateX(-160%) skewX(-14deg); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(320%) skewX(-14deg); opacity: 0; }
}

/* 모션 최소화 사용자: 진입/스윕 없이 정적 노출 */
@media (prefers-reduced-motion: reduce) {
  #svisualwrap.kos-coten-fx .kos-hero-video { clip-path: none; transition: none; }
  #svisualwrap.kos-coten-fx .kos-hero-video__el { transition: none; transform: translate(-50%, -50%); }
  #svisualwrap.kos-coten-fx .kos-hero-video__scrim { opacity: 1; transition: none; }
  #svisualwrap.kos-coten-fx .kos-coten-en,
  #svisualwrap.kos-coten-fx .kos-coten-en .kh-ch {
    transform: none !important; opacity: 1 !important; transition: none !important;
  }
  #svisualwrap.kos-coten-fx .kos-coten-en::before,
  #svisualwrap.kos-coten-fx .kos-coten-en::after { opacity: 1; }
  #svisualwrap.kos-coten-fx .kos-coten-en .kh-shine { display: none; }
}

/* ============================================================
   [COSS 2026] 히어로 떠다니는 기하 도형 (wiredcorp 톤)
   영상 위 · 글씨 아래 레이어에서 은은하게 부유. 텍스트 가독 방해 X.
   ============================================================ */
#svisualwrap.kos-coten-fx .kos-hero-blobs {
  position: absolute; inset: 0;
  z-index: 2;                 /* 비디오(1) 위, 글씨 레이어(3) 아래 */
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s ease .5s;
}
#svisualwrap.kos-coten-fx.is-hero-in .kos-hero-blobs { opacity: 1; }

#svisualwrap.kos-coten-fx .kh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  mix-blend-mode: screen;
  will-change: transform;
}
/* 청록 원 (우상단) */
#svisualwrap.kos-coten-fx .kh-blob--1 {
  right: 8%; top: -14%;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 35% 35%, rgba(90,220,220,.55), rgba(60,180,200,.10) 70%);
  animation: khFloatA 9s ease-in-out infinite;
}
/* 블루 원 (우측 중단) */
#svisualwrap.kos-coten-fx .kh-blob--2 {
  right: 20%; bottom: -20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle at 40% 40%, rgba(90,160,255,.42), rgba(40,110,220,.08) 70%);
  animation: khFloatB 12s ease-in-out infinite;
}
/* 작은 밝은 원 (중앙 우측) */
#svisualwrap.kos-coten-fx .kh-blob--3 {
  right: 42%; top: 30%;
  width: 90px; height: 90px;
  background: radial-gradient(circle at 40% 40%, rgba(150,235,255,.5), rgba(150,235,255,0) 72%);
  animation: khFloatA 7s ease-in-out infinite reverse;
}
/* 라인 링 (기하 악센트) */
#svisualwrap.kos-coten-fx .kh-ring {
  right: 12%; bottom: 12%;
  width: 120px; height: 120px;
  background: none;
  border: 1.5px solid rgba(150,205,255,.35);
  filter: none;
  mix-blend-mode: normal;
  animation: khFloatB 10s ease-in-out infinite reverse;
}
@keyframes khFloatA {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(-18px,20px,0) scale(1.06); }
}
@keyframes khFloatB {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(22px,-16px,0) scale(1.04); }
}

/* 모바일: 도형 축소·일부 숨김(가독/성능) */
@media (max-width: 768px) {
  #svisualwrap.kos-coten-fx .kh-blob--1 { width: 130px; height: 130px; }
  #svisualwrap.kos-coten-fx .kh-blob--2 { width: 170px; height: 170px; }
  #svisualwrap.kos-coten-fx .kh-blob--3,
  #svisualwrap.kos-coten-fx .kh-ring { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #svisualwrap.kos-coten-fx .kh-blob { animation: none !important; }
}

/* EPDM renewal: opt-in only on Flask subpage content. No global/chrome selectors. */
#txt.kos-epdm-body {
  --coten-blue: #317562; --coten-blue-dk: #224c40; --coten-ink: #293e35;
  --c2-accent: #317562; --c2-head: #224c40; --c2-ink: #293e35; --c2-line: #d6e1d4;
  --coten-mute: #627069; --coten-sky: #edf2e5; --coten-sky-2: #dfebdf;
  --coten-accent: #cf754f; --coten-line: #d6e1d4;
  isolation: isolate; display: flow-root; padding: clamp(24px,4vw,58px);
  border-radius: 38px; background-color: #f7f6ef;
  background-image: radial-gradient(ellipse at 95% 1%,#e0ead6 0,transparent 32%),radial-gradient(ellipse at 0 55%,#f5e6d9 0,transparent 36%);
  color: var(--coten-ink);
}
#txt.kos-epdm-body::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.23;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='167' height='139' viewBox='0 0 167 139'%3E%3Cpath d='m18 22 5-3 4 6-6 3Z' fill='%238fb196'/%3E%3Cpath d='m124 83 6 1-1 5-7-1Z' fill='%23d38f73'/%3E%3Cpath d='m63 116 3-5 5 4-3 4Z' fill='%2396a8d0'/%3E%3Cpath d='m147 31 5-2 2 4-5 3Z' fill='%23b8a76b'/%3E%3C/svg%3E");
}
#txt.kos-epdm-body .coten-sky-layer,
#txt.kos-epdm-body .float-cloud,
#txt.kos-epdm-body .band-cloud,
#txt.kos-epdm-body .band-ship,
#txt.kos-epdm-body .cta-bird,
#txt.kos-epdm-body .kos-coten-content-deco { display:none; }
#txt.kos-epdm-body .epdm-scene { position:relative; z-index:2; float:right; width:49%; margin:0 -2% 24px 2%; }
#txt.kos-epdm-body .epdm-scene-art { position:relative; transform-origin:50% 80%; }
#txt.kos-epdm-body .epdm-scene img { display:block; width:100%; height:auto; }
#txt.kos-epdm-body .epdm-chip { position:absolute; width:15px; height:23px; border-radius:6px 9px 6px 8px; background:#dfaa77; box-shadow:inset 3px 3px 5px #fff8,3px 5px 8px #263c3520; pointer-events:none; }
#txt.kos-epdm-body .epdm-chip--one { left:4%; top:15%; transform:rotate(-23deg); }
#txt.kos-epdm-body .epdm-chip--two { right:8%; bottom:12%; background:#7f9dbb; transform:rotate(35deg); }
#txt.kos-epdm-body .epdm-chip--three { left:42%; bottom:4%; background:#9bac75; transform:rotate(62deg); }
#txt.kos-epdm-body .coten-lead { width:48%; display:flow-root; text-align:left; max-width:none; margin:0 0 36px; padding:30px 0; min-height:290px; }
#txt.kos-epdm-body .coten-lead h2 { clear:none; font-size:clamp(28px,3.4vw,46px); line-height:1.35; letter-spacing:-.045em; text-wrap:balance; }
#txt.kos-epdm-body .coten-lead p { font-size:16px; line-height:1.9; word-break:keep-all; }
#txt.kos-epdm-body .coten-lead .en { letter-spacing:.2em; font-size:11px; border:1px solid #b7cbb9; border-radius:30px; padding:8px 14px; background:#fff8; }
#txt.kos-epdm-body > :is(.coten-numsecs,.coten-numsec,.coten-gallery,.coten-timeline,.coten-home-hero,.coten-home-lead,.coten-bighead,.coten-seclabel,.coten-cta,.coten-band,.coten-blob-band) { clear:both; }
#txt.kos-epdm-body .coten-numsec { padding:clamp(24px,4vw,48px); margin-bottom:38px; border:1px solid #fff; border-radius:32px 48px 32px 32px; background:#fffdf8; box-shadow:inset 0 3px 2px #fff,0 7px 0 #dce3d8,0 20px 36px #304f3e0c; }
#txt.kos-epdm-body .coten-numsec:nth-child(even) { background:#eaf0e5; border-radius:48px 32px 32px 32px; }
#txt.kos-epdm-body .coten-numsec .num { color:#82a691; opacity:.55; font-size:clamp(48px,6vw,72px)!important; }
#txt.kos-epdm-body .coten-numsec .media { width:100%; aspect-ratio:5/4; border-radius:27px; border:7px solid #fff9; box-shadow:0 8px 0 #cbd8ca,0 20px 28px #304f3e17; }
#txt.kos-epdm-body .coten-numsec .media::after { border-radius:20px; }
#txt.kos-epdm-body .coten-numsec h3 { letter-spacing:-.035em; }
#txt.kos-epdm-body .coten-gallery { gap:24px; padding:8px 0 30px; }
#txt.kos-epdm-body .coten-gallery .g-item { aspect-ratio:auto; border:6px solid #fff; border-radius:26px; background:#fff; box-shadow:0 6px 0 #d8dfd4,0 16px 28px #304f3e10; }
#txt.kos-epdm-body .coten-gallery .g-item img { height:auto; aspect-ratio:4/3; border-radius:20px 20px 10px 10px; }
#txt.kos-epdm-body .coten-gallery .cap { position:static; display:block; color:var(--coten-ink); background:#fff; padding:16px; font-weight:700; }
#txt.kos-epdm-body .coten-points li { padding:13px 14px 13px 40px; margin:9px 0; border-radius:15px; background:#e6ede255; }
#txt.kos-epdm-body .coten-tags li { display:inline-flex; padding:8px 14px; font-size:13px; border-radius:18px; background:#efe7d4; color:#645239; box-shadow:inset 0 2px 2px #fff9,0 3px 0 #daceb6; }
#txt.kos-epdm-body .coten-wave { display:block!important; height:65px; opacity:1; margin:16px -2px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath fill='%23dde7d5' d='M0 38C180-35 280 106 460 42S730-4 880 42s230 31 320-22v70H0Z'/%3E%3Cpath fill='%23edd9ba' fill-opacity='.6' d='M0 63C170 15 340 100 550 65S920 20 1200 58v32H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
#txt.kos-epdm-body .coten-band,
#txt.kos-epdm-body .coten-cta { position:relative; overflow:hidden; border:0; border-radius:45px 70px 35px 55px; background:#254f40; color:#fffaf0; box-shadow:0 8px 0 #b7c8b2; padding:clamp(28px,5vw,60px); }
#txt.kos-epdm-body .coten-cta::before { content:""; position:absolute; width:300px; height:170px; right:-70px; top:-105px; border:35px solid #d0bc7f; border-radius:50%; opacity:.55; pointer-events:none; }
#txt.kos-epdm-body .coten-cta h3,#txt.kos-epdm-body .coten-band p,#txt.kos-epdm-body .coten-band .num { color:#fffaf0; }
#txt.kos-epdm-body .coten-cta .cta-links a { background:#f2d799; color:#294c3c; border-color:#f2d799; box-shadow:0 4px 0 #172f26; }
#txt.kos-epdm-body .coten-cta .cta-links a.ghost { background:transparent; color:#fffaf0!important; border-color:#c2d1bf; }
#txt.kos-epdm-body a:focus-visible,#txt.kos-epdm-body button:focus-visible { outline:3px solid #bb6446; outline-offset:5px; }
#txt.kos-epdm-body .kos-body-html { overflow-x:auto; }
@media(max-width:760px) {
  #txt.kos-epdm-body { padding:24px 18px; border-radius:24px; }
  #txt.kos-epdm-body .epdm-scene { float:none; width:min(100%,480px); margin:0 auto 8px; }
  #txt.kos-epdm-body .coten-lead { width:100%; min-height:0; padding:8px 2px 20px; margin-bottom:18px; }
  #txt.kos-epdm-body .coten-numsec-inner { grid-template-columns:1fr; }
  #txt.kos-epdm-body .coten-numsec { border-radius:25px; padding:24px 20px; }
  #txt.kos-epdm-body .coten-gallery { gap:22px; }
}
#txt.kos-epdm-body .epdm-layers { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:24px; margin:38px 0; padding:32px; background:#e9eee4; border:1px solid #fff; border-radius:36px; box-shadow:inset 0 3px 2px #fff9,0 7px 0 #d4dfcf; }
#txt.kos-epdm-body .epdm-layer-model { position:relative; height:235px; perspective:850px; }
#txt.kos-epdm-body .epdm-slab { position:absolute; width:70%; height:155px; left:15%; border-radius:23px; transform:rotateX(53deg) rotateZ(-29deg); background-color:#78a992; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='29'%3E%3Cpath fill='%23edd8a7' d='m3 5 5-2 3 5-6 2Z'/%3E%3Cpath fill='%23324b43' d='m19 17 5-2 2 5-5 3Z'/%3E%3Cpath fill='%23d4e6d0' d='m19 3 3-1 2 3-4 2Z'/%3E%3C/svg%3E"); }
#txt.kos-epdm-body .epdm-slab--top { top:0; z-index:2; box-shadow:0 12px 0 #52806c,0 22px 25px #304f3e24; }
#txt.kos-epdm-body .epdm-slab--base { top:68px; background-color:#45504a; box-shadow:0 22px 0 #2e3932,0 42px 28px #304f3e29; filter:saturate(.1); }
#txt.kos-epdm-body .epdm-layer-kicker { display:block; font:700 11px/1.4 Arial,sans-serif; letter-spacing:.18em; color:#547461; margin-bottom:12px; }
#txt.kos-epdm-body .epdm-layers h3 { font-size:26px; color:#244c3d; margin:0 0 20px; }
#txt.kos-epdm-body .epdm-layers p { margin:12px 0; color:#354e40; font-size:15px; }
#txt.kos-epdm-body .epdm-layer-dot { display:inline-block; width:12px; height:12px; border-radius:4px; background:#78a992; margin-right:10px; }
#txt.kos-epdm-body .epdm-layer-dot--base { background:#45504a; }
#txt.kos-epdm-body .epdm-layers small { display:block; color:#58675c; font-size:12px; line-height:1.8; margin-top:20px; }
#txt.kos-epdm-body .child_center { clear:both; }
@media(max-width:760px) { #txt.kos-epdm-body .epdm-layers { grid-template-columns:1fr; padding:24px; } }

#txt.kos-epdm-body .coten-points li::before { width:8px; height:8px; left:17px; box-shadow:0 0 0 3px #31756214; }
#txt.kos-epdm-body:has(> .child_center) .epdm-scene { float:none; width:min(100%,540px); margin:0 auto 24px; }


/* ══════════════════════════════════════════════════════════════════════
   [2026 RENEWAL · A+C] 서브페이지 본문 프리미엄 리뉴얼
   컨셉 A(에디토리얼 매거진) + C(소프트 프로덕트) 절충.
   ‼ 스코프: #txt.kos-coten-body 하위 = 본문 전용.
     상단 메뉴/영상(#svisualwrap)/네비게이션/푸터는 일체 건드리지 않음.
   되돌리기: _backup/restore_* 의 kos-coten-fx.css 로 이 파일 교체.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 배경: 허전함 해소용 도트 그리드 + 소프트 블롭 (본문 한정) ── */
#txt.kos-coten-body { --rn-ease: cubic-bezier(.19,1,.22,1); isolation: isolate; }
#txt.kos-coten-body::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(47,107,216,.09) 1.4px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 42%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 42%);
}
@media (prefers-reduced-motion: reduce) { #txt.kos-coten-body::after { opacity: .35; } }

/* ── 리드: 에디토리얼 위계 강화 + 배지형 라벨 ── */
#txt.kos-coten-body .coten-lead { max-width: 820px; margin-bottom: 64px; }
#txt.kos-coten-body .coten-lead .en {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(47,107,216,.13);
  font-size: 12px; letter-spacing: .24em; margin-bottom: 22px;
}
#txt.kos-coten-body .coten-lead .en::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--coten-accent); box-shadow: 0 0 0 4px rgba(244,169,59,.22);
}
#txt.kos-coten-body .coten-lead h2 {
  font-size: clamp(28px, 4.6vw, 52px); line-height: 1.18; font-weight: 900;
  letter-spacing: -.025em; margin-bottom: 18px;
}
#txt.kos-coten-body .coten-lead p { font-size: clamp(15px,1.7vw,17.5px); line-height: 1.9; }

/* 대형 영문 헤드라인(coten-bighead) — 에디토리얼 초대형 톤 */
#txt.kos-coten-body .coten-bighead .en {
  font-size: clamp(52px, 11vw, 132px); line-height: .9; letter-spacing: -.04em;
  color: var(--coten-blue-dk); font-weight: 900;
}
#txt.kos-coten-body .coten-bighead .en .l2 { color: transparent; -webkit-text-stroke: 2px var(--coten-blue-dk); }

/* ── 번호 섹션 카드: 큰 인덱스 넘버 + 소프트 라운드 + 호버 ── */
#txt.kos-coten-body .coten-numsec {
  border: 1px solid rgba(27,59,122,.07);
  border-radius: 28px;
  box-shadow: 0 24px 54px rgba(31,74,122,.10);
  transition: transform .5s var(--rn-ease), box-shadow .5s var(--rn-ease);
}
#txt.kos-coten-body .coten-numsec:hover {
  transform: translateY(-5px); box-shadow: 0 34px 70px rgba(31,74,122,.16);
}
/* 인덱스 넘버를 카드 배경 대형 워터마크처럼 */
#txt.kos-coten-body .coten-numsec .num {
  font-size: clamp(60px, 10vw, 128px) !important;
  opacity: .09;
  position: absolute; top: clamp(-6px, 1vw, 8px); right: 22px;
  z-index: 0; margin: 0 !important;
}
#txt.kos-coten-body .coten-numsec .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--coten-accent);
}
#txt.kos-coten-body .coten-numsec .kicker::before {
  content: ""; width: 22px; height: 2px; background: var(--coten-accent);
}
#txt.kos-coten-body .coten-numsec h3 { font-size: clamp(21px,2.8vw,30px); letter-spacing: -.02em; }
#txt.kos-coten-body .coten-numsec-inner { align-items: center; }

/* 번호카드 미디어: 원형 대신 부드러운 라운드 사각(에디토리얼) */
#txt.kos-coten-body .coten-numsec .media {
  border-radius: 22px; aspect-ratio: 4/3; width: 100%;
  box-shadow: 0 22px 46px rgba(31,74,122,.18);
}
#txt.kos-coten-body .coten-numsec .media::after { border-radius: 22px; }

/* 특징 포인트: 소프트 pill */
#txt.kos-coten-body .coten-points li { border-radius: 14px; }

/* ── 스탯 밴드: 라인 대비 + 강한 타이포 ── */
#txt.kos-coten-body .coten-band { border-radius: 28px; box-shadow: 0 26px 56px rgba(27,59,122,.26); }
#txt.kos-coten-body .coten-band-grid > div { position: relative; }
#txt.kos-coten-body .coten-band-grid > div + div::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 46px; background: rgba(255,255,255,.16);
}
@media (max-width: 860px) {
  #txt.kos-coten-body .coten-band-grid > div + div::before { display: none; }
}

/* ── 섹션 라벨(In Focus 등): 에디토리얼 대형 ── */
#txt.kos-coten-body .coten-seclabel { margin: 64px 0 30px; }
#txt.kos-coten-body .coten-seclabel .en {
  font-size: clamp(26px, 4vw, 46px); font-weight: 900; letter-spacing: -.02em;
  color: var(--coten-blue-dk); text-transform: none;
}

/* ── 갤러리: 소프트 라운드 카드 + VIEW 라벨 + 호버 ── */
#txt.kos-coten-body .coten-gallery .g-item {
  border-radius: 22px; border: 1px solid rgba(27,59,122,.06);
  box-shadow: 0 16px 36px rgba(31,74,122,.10);
  transition: transform .5s var(--rn-ease), box-shadow .5s var(--rn-ease);
}
#txt.kos-coten-body .coten-gallery .g-item:hover {
  transform: translateY(-5px); box-shadow: 0 26px 52px rgba(31,74,122,.18);
}
#txt.kos-coten-body .coten-gallery .g-item::before {
  content: "VIEW"; position: absolute; z-index: 3; left: 14px; top: 14px;
  font: 700 10px/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; color: #fff;
  background: rgba(18,20,15,.5); backdrop-filter: blur(4px);
  padding: 7px 11px; border-radius: 999px; opacity: 0; transform: translateY(-6px);
  transition: opacity .35s var(--rn-ease), transform .35s var(--rn-ease);
}
#txt.kos-coten-body .coten-gallery .g-item:hover::before { opacity: 1; transform: none; }

/* ── CTA: 에디토리얼 다크 + 소프트 라운드 ── */
#txt.kos-coten-body .coten-cta {
  border-radius: 30px;
  background: linear-gradient(135deg, var(--coten-blue-dk) 0%, #0f2748 100%);
  color: #fff; overflow: hidden;
}
#txt.kos-coten-body .coten-cta::after {
  content: "COSS"; position: absolute; right: -6px; bottom: -34px;
  font: 900 clamp(90px,16vw,190px)/1 "Helvetica Neue", Arial, sans-serif;
  color: rgba(255,255,255,.05); letter-spacing: -.04em; pointer-events: none;
}
#txt.kos-coten-body .coten-cta h3 { color: #fff; font-size: clamp(20px,2.8vw,32px); letter-spacing: -.02em; }
#txt.kos-coten-body .coten-cta .cta-links { position: relative; z-index: 2; }
#txt.kos-coten-body .coten-cta .cta-links a {
  background: #fff; color: var(--coten-blue-dk) !important;
}
#txt.kos-coten-body .coten-cta .cta-links a:hover { background: var(--coten-accent); color: #1a1205 !important; }
#txt.kos-coten-body .coten-cta .cta-links a.ghost {
  background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.4);
}
#txt.kos-coten-body .coten-cta .cta-links a.ghost:hover { background: rgba(255,255,255,.12); }

/* ── blob 밴드(coten_bands): 소프트 컬러 밴드 강조 ── */
#txt.kos-coten-body .coten-blob-band { border-radius: 30px; }
#txt.kos-coten-body .coten-blob-band .bb-title { letter-spacing: -.02em; }

/* ── 게시판 리스트: 카드 + 화살표 강조(에디토리얼) ── */
#txt.kos-coten-body .coten-post-item { border-radius: 18px; border: 1px solid rgba(27,59,122,.06); }
#txt.kos-coten-body .coten-post-link .tag { padding: 5px 12px; }

/* ── 반응형 보정 ── */
@media (max-width: 860px) {
  #txt.kos-coten-body .coten-numsec .num { font-size: clamp(48px,14vw,88px) !important; right: 14px; }
  #txt.kos-coten-body .coten-lead { margin-bottom: 44px; }
}