@charset "UTF-8";
/* =========================================================
   STANDARD ALL — COMPOSITION / 조성분류
   (sub_common.css 의 변수 · 폰트 사용)
   ========================================================= */

/* 세리프 고정 */
.cp-head__count strong,.cp-head__count em,.cp-nav b,.cp-item__num,.cp-item__tit em,.cp-item__img::after{font-family:var(--sub-serif)!important}

.article.cp-sec{position:relative;background-color:var(--sub-ink);color:#fff;padding-top:clamp(120px,12vw,180px);overflow:clip}

/* =========================================================
   HEAD
   ========================================================= */
.cp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;width:100%}
.cp-head .sub-eyebrow{color:color-mix(in srgb, var(--main-color) 30%, #fff)}
.cp-head .sub-title{color:#fff}
.cp-head__desc{margin:24px 0 0;font-size:clamp(17px,1.3vw,20px);line-height:1.8;color:rgba(255,255,255,.72);letter-spacing:-.025em}
.cp-head__count{display:flex;align-items:flex-end;gap:16px;margin:0;flex-shrink:0}
.cp-head__count strong{font-size:clamp(100px,11vw,180px);font-weight:500;line-height:.8;letter-spacing:-.04em;color:color-mix(in srgb, var(--main-color) 30%, #fff);font-variant-numeric:lining-nums tabular-nums}
.cp-head__count span{display:flex;flex-direction:column;gap:4px;margin-bottom:.3em;font-size:15px;font-weight:600;color:rgba(255,255,255,.6)}
.cp-head__count em{font-size:26px;font-weight:400;color:#fff}

/* =========================================================
   NAV
   ========================================================= */
.cp-nav{width:100%;margin-top:clamp(50px,5vw,80px);border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.cp-nav ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0;list-style:none}
.cp-nav li+li{border-left:1px solid rgba(255,255,255,.12)}
.cp-nav a{position:relative;display:flex;align-items:baseline;gap:10px;padding:22px 20px;font-size:17px;font-weight:600;color:rgba(255,255,255,.62);text-decoration:none;letter-spacing:-.02em;overflow:hidden;transition:color .4s var(--sub-ease)}
.cp-nav a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--main-color);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--sub-ease)}
.cp-nav a{isolation:isolate}
.cp-nav b{font-size:15px;font-weight:400;color:color-mix(in srgb, var(--main-color) 30%, #fff);transition:color .4s}
.cp-nav a:hover,.cp-nav a.is-on{color:#fff}
.cp-nav a:hover::before,.cp-nav a.is-on::before{transform:scaleY(1)}
.cp-nav a:hover b,.cp-nav a.is-on b{color:rgba(255,255,255,.75)}

/* =========================================================
   ITEMS : 이미지 · 텍스트 지그재그
   ========================================================= */
.cp-list{display:flex;flex-direction:column;gap:clamp(90px,10vw,170px);width:100%;margin-top:clamp(80px,9vw,140px)}
.cp-item{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(40px,6vw,110px);scroll-margin-top:120px}
.cp-item:nth-child(even) .cp-item__fig{order:2}

.cp-item__fig{position:relative;margin:0}
.cp-item__img{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:6px 6px 120px 6px;background:#0b0b0a;cursor:zoom-in}
.cp-item:nth-child(even) .cp-item__img{border-radius:6px 6px 6px 120px}
.cp-item__img img{position:relative;width:100%;height:112%;top:-6%;object-fit:cover;will-change:transform}
.cp-item__img::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(34px,3.6vw,56px);font-style:italic;color:rgba(255,255,255,.14);pointer-events:none}
.cp-item__img:has(img)::after{display:none}
.cp-item__img:not(:has(img)){cursor:default}

/* 돋보기 렌즈 (composition.js) */
.cp-lens{position:absolute;left:0;top:0;z-index:2;width:clamp(150px,14vw,220px);aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.85);box-shadow:0 20px 50px -10px rgba(0,0,0,.7),inset 0 0 0 6px rgba(0,0,0,.15);background-repeat:no-repeat;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .3s var(--sub-ease),transform .4s var(--sub-ease)}
.cp-item__img.is-zoom .cp-lens{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cp-item__hint{position:absolute;right:18px;bottom:16px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:12px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.85);pointer-events:none;transition:opacity .3s}
.cp-item:nth-child(even) .cp-item__hint{right:auto;left:18px}
.cp-item__fig:not(:has(img)) .cp-item__hint,.cp-item__img.is-zoom+.cp-item__hint{opacity:0}

.cp-item__num{display:block;font-size:clamp(70px,7vw,120px);font-weight:500;line-height:.85;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb, var(--main-color) 45%, #fff)}
.cp-item__tit{display:flex;flex-direction:column;gap:8px;margin:28px 0 0;padding-bottom:22px;font-size:clamp(30px,2.6vw,42px);font-weight:700;letter-spacing:-.04em;line-height:1.2;color:#fff;position:relative}
.cp-item__tit::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:rgba(255,255,255,.18)}
.cp-item__tit::before{content:"";position:absolute;left:0;bottom:0;z-index:1;width:56px;height:3px;margin-bottom:-1px;background:color-mix(in srgb, var(--main-color) 45%, #fff);transform:scaleX(var(--tl,1));transform-origin:left}
.cp-item__tit em{font-size:.5em;font-weight:400;letter-spacing:.06em;color:color-mix(in srgb, var(--main-color) 30%, #fff)}
.cp-item__txt{margin:22px 0 0;font-size:clamp(17px,1.25vw,19px);line-height:1.9;color:rgba(255,255,255,.75);letter-spacing:-.025em;word-break:keep-all}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .cp-head{flex-direction:column;align-items:flex-start}
  .cp-head__desc br{display:none}
  .cp-nav{overflow-x:auto;scrollbar-width:none}
  .cp-nav::-webkit-scrollbar{display:none}
  .cp-nav ul{display:flex;width:max-content}
  .cp-nav a{padding:18px 18px;white-space:nowrap}
  .cp-item,.cp-item:nth-child(even){grid-template-columns:1fr;gap:34px}
  .cp-item:nth-child(even) .cp-item__fig{order:0}
  .cp-item__hint{display:none}
}
@media (max-width:640px){
  .article.cp-sec{padding-top:90px}
  .cp-head__count strong{font-size:88px}
  .cp-head__count em{font-size:20px}
  .cp-list{gap:80px}
  .cp-item__img,.cp-item:nth-child(even) .cp-item__img{border-radius:6px 6px 70px 6px}
  .cp-item__num{font-size:64px}
  .cp-item__tit{margin-top:18px}
}
@media (hover:none),(pointer:coarse){
  .cp-item__img{cursor:default}
  .cp-lens,.cp-item__hint{display:none}
}