/* 광고매체 — 매체별 실제 집행 화면 쇼케이스.
   명세서 규격: 좌측 스마트폰 목업 + 우측 [노출 위치 / 타겟 추출 / 체감 효과] 3단 고정.
   토큰은 style.css 것을 그대로 쓴다. 여기서 새 색이나 새 글자 크기를 만들지 않는다. */

[hidden]{ display:none !important; }

/* ---------- 머리 ---------- */
/* 타이틀은 .sec-head__title, 눈썹줄은 .banner__eyebrow 를 그대로 쓴다.
   이 페이지만의 제목 크기를 새로 만들지 않는다 — 한 페이지에 타이틀은 한 종류다. */
.cs-hero{ padding:72px 0 48px; text-align:center; }
.cs-hero .banner__title{ margin-inline:auto; }

/* ---------- 탭 ----------
   GNB 가 sticky top:0 이라 그 아래에 붙인다. 스크롤해도 매체 분류가 안 사라진다. */
.cs-tabs{
  position:sticky; top:var(--gnb-h); z-index:40;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
}
.cs-tabs__in{
  display:flex; justify-content:center; gap:8px; padding:12px 24px;   /* .container 좌우 여백을 덮어쓰지 않게 */
  overflow-x:auto; scrollbar-width:none;
}
.cs-tabs__in::-webkit-scrollbar{ display:none; }
/* 알약 탭. 고른 것만 남색으로 채우고 나머지는 테두리만 둔다. */
.cs-tabs__b{
  flex:none; height:40px; padding:0 18px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:#fff; cursor:pointer; white-space:nowrap;
  font-family:var(--font-display);
  font-size:15px; font-weight:700; letter-spacing:var(--ls-body); color:var(--gray);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cs-tabs__b:hover{ border-color:var(--brand-line); color:var(--navy); }
.cs-tabs__b.is-on{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* ---------- 섹터 ---------- */
.cs-wrap{ padding:64px 0 var(--sec-pad); }
/* 여백은 .sec-head 가 잡는다. 정렬은 왼쪽, 폭은 사이트 공통 .container 를 그대로 쓴다.
   진입 모션도 사이트 공통 .rise 를 쓴다. 이 페이지 전용 전환을 따로 두지 않는다.

   섹터 제목은 52px 를 쓰지 않는다. 페이지 제목이 이미 52px 이고, 그 바로 아래
   층위다. 메인의 .perf__grand 가 .perf__title 밑에서 쓰는 32px 와 같은 자리라
   같은 크기로 맞춘다. 결국 이 페이지에 쓰는 글자 크기는 52 와 32 둘뿐이다. */
.cs-sec__title, .cs-end h2{
  font-family:var(--font-display);
  font-size:32px; font-weight:700; line-height:1.4;
  letter-spacing:var(--ls-display);
}
.cs-sec__title{ color:var(--ink); word-break:keep-all; }
.cs-sec__title, .cs-end h2{ text-wrap:balance; }   /* 좁은 화면에서 마지막 줄에 한 단어만 떨어지지 않게 */

.cs-sec__h p{
  margin:16px 0 0; max-width:680px;
  font-size:var(--t-body); font-weight:400; line-height:1.76;
  letter-spacing:var(--ls-body); color:var(--gray); word-break:keep-all;
}

/* ---------- 한 건 ---------- */
/* 목업 288px, 본문은 컨테이너 남은 폭을 다 쓴다. 제목과 같은 왼쪽 선에서 시작한다. */
.cs-item{
  display:grid; grid-template-columns:288px minmax(0,1fr);
  gap:96px; padding:48px 0; border-top:1px solid var(--line);
}
.cs-item:first-of-type{ border-top:0; padding-top:0; }

.cs-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* 제목 왼쪽 매체 로고. 두 개면 나란히 둔다. */
.cs-logos{ display:inline-flex; align-items:center; gap:8px; }
.cs-logo{
  display:grid; place-items:center; width:32px; height:32px; overflow:hidden;
  border-radius:var(--r-xs); background:#fff;
  box-shadow:0 2px 6px -2px rgba(28,36,47,.22), 0 0 0 1px rgba(28,36,47,.07);
}
.cs-logo img, .cs-logo svg{ display:block; width:32px; height:32px; border-radius:var(--r-xs); }
/* 두 개면 메인 흐름도의 .fl__pair 처럼 뒤 타일을 살짝 눕히고 앞 타일을 겹친다. */
.cs-logos .cs-logo + .cs-logo{ position:relative; z-index:1; margin-left:-16px; }
.cs-logos .cs-logo:first-child:not(:last-child){ transform:rotate(-8deg); }
.cs-logos .cs-logo:not(:only-child){
  box-shadow:0 5px 12px -5px rgba(23,28,34,.34), 0 1px 2px rgba(23,28,34,.10), 0 0 0 1px rgba(28,36,47,.07);
}

.cs-item__head{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:28px;
}
.cs-item__head h3{
  font-family:var(--font-display);
  font-size:var(--t-card); font-weight:700;
  letter-spacing:var(--ls-display); color:var(--ink);
}
.cs-badge{
  padding:6px 12px; border-radius:var(--r-pill);
  background:var(--brand-soft); color:var(--brand);
  font-size:var(--t-tag); font-weight:700; letter-spacing:.02em;
}
.cs-badge--wait{ background:var(--line-soft); color:var(--gray); }

/* 3단 규격 */
.cs-spec{ display:grid; gap:20px; margin:0; }
/* dd 는 브라우저 기본값으로 왼쪽 40px 이 밀려 있다. 격자에 맡기려면 지워야 한다. */
.cs-spec dt, .cs-spec dd{ margin:0; }
.cs-spec__r{ display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:start; }
/* .meta-line 과 같은 규칙: 라벨이 값보다 한 단계 굵다.
   값을 굵게 하면 라벨이 배경으로 밀려서 무엇을 적은 줄인지 훑을 때 안 읽힌다. */
.cs-spec__r dt{
  display:flex; align-items:baseline; gap:8px; padding-top:1px;
  font-size:var(--t-meta); font-weight:700; letter-spacing:var(--ls-body); color:var(--navy);
}
.cs-spec__r dt b{
  font-family:var(--font-display);
  font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--brand-line);
}
.cs-spec__r dd{
  font-size:var(--t-meta); font-weight:400; line-height:1.76;
  letter-spacing:var(--ls-body); color:var(--gray); word-break:keep-all;
}
.cs-spec__r dd em{ font-style:normal; font-weight:700; color:var(--navy-soft); }

/* 체감 한 줄 — 셋째 줄만 색을 깔아 눈이 먼저 간다. */
.cs-spec__r dd.cs-feel-row{
  margin-top:-4px; padding:16px 20px;
  border-radius:var(--r-sm); background:var(--tint);
  font-weight:700; color:var(--brand-deep);
}

/* 3단 아래 덧붙이는 세 칸. 매체를 실제로 쓸 때 묻는 것들(어떻게 돈이 나가나,
   뭘 준비하나, 우리 현장에 맞나)을 한 줄씩. 3단이 '무엇'이면 여기는 '어떻게'다. */
.cs-facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin:28px 0 0; padding:0; list-style:none;
}
.cs-facts li{
  padding:16px 16px 18px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff;
  font-size:var(--t-meta); font-weight:700; line-height:1.6;
  letter-spacing:var(--ls-body); color:var(--ink); word-break:keep-all;
}
.cs-facts b{
  display:block; margin-bottom:8px;
  font-size:var(--t-tag); font-weight:700; letter-spacing:.02em; color:var(--gray);
}

/* 이 매체로 집행한 현장 — 관리자 집행 현장 데이터에서 뽑는다 */
.cs-runs{ margin-top:28px; }
.cs-runs__h{
  margin-bottom:12px;
  font-size:var(--t-tag); font-weight:700; letter-spacing:.02em; color:var(--gray);
}
.cs-runs ul{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.cs-runs li{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.cs-runs img, .cs-runs__noimg{
  display:block; width:64px; height:48px; object-fit:cover; border-radius:var(--r-xs); background:var(--paper);
}
.cs-runs b{
  display:block; font-size:var(--t-body); font-weight:700;
  letter-spacing:var(--ls-body); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cs-runs span{
  display:block; margin-top:4px;
  font-size:13px; font-weight:700; letter-spacing:var(--ls-body); color:var(--gray);
}
.cs-runs span i{
  display:inline-block; width:1px; height:10px; margin:0 8px;
  vertical-align:-1px; background:#C9CFD8;
}
.cs-runs em{
  font-style:normal; padding:4px 8px; border-radius:var(--r-xs);
  background:var(--brand); color:#fff;
  font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:var(--ls-body);
}

/* ---------- 스마트폰 목업 ---------- */
.cs-shot{ position:sticky; top:160px; }
.phone{
  width:288px; padding:8px; border-radius:40px;
  background:linear-gradient(160deg,#2E3946,#1C242F);
  box-shadow:0 28px 56px -28px rgba(28,36,47,.6), 0 0 0 1px rgba(28,36,47,.12);
}
.phone__scr{
  position:relative; overflow:hidden;
  width:272px; height:588px; border-radius:32px; background:#fff;
}
.phone__scr img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:top center;
}
.phone__scr img.is-off{ opacity:0; }
/* 노치는 그리지 않는다. 전달받은 캡처에 상태바가 없어서,
   노치를 얹으면 앱 자체의 상단바를 덮어버린다. */

/* 썸네일 */
.cs-thumbs{ display:flex; justify-content:center; gap:12px; margin-top:20px; }
.cs-thumbs button{
  width:48px; height:104px; padding:0; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-xs); background:#fff;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cs-thumbs button img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.cs-thumbs button:hover{ border-color:var(--brand-line); }
.cs-thumbs button.is-on{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(32,57,206,.14);
}

/* GDN 한 건만 예외. 설명을 위에 다 펼치고, 그 아래 폰과 PC 화면을 나란히 둔다.
   PC 캡처는 폰 틀에 넣으면 글씨가 안 읽혀서 브라우저 틀에 원래 비율로 둔다. */
.cs-item--wide{ grid-template-columns:minmax(0,1fr); }
.cs-devices{
  display:grid; grid-template-columns:288px minmax(0,1fr); gap:40px; align-items:center;
  margin-top:40px;
}
.cs-devices .cs-shot{ position:static; }
.cs-pc{
  position:relative; margin:0;
  border:1px solid var(--line); border-radius:var(--r-sm); background:#fff;
  box-shadow:0 20px 40px -28px rgba(28,36,47,.45);
}
.cs-pc__bar{
  display:flex; align-items:center; gap:8px; height:36px; padding:0 16px;
  border-bottom:1px solid var(--line); border-radius:var(--r-sm) var(--r-sm) 0 0; background:#F3F5F8;
}
.cs-pc__bar i{ width:10px; height:10px; border-radius:50%; background:#D5DAE1; }
.cs-pc__bar span{
  display:flex; align-items:center; flex:0 1 240px; height:24px; margin-left:12px; padding:0 12px;
  border-radius:var(--r-pill); background:#fff;
  font-size:12px; font-weight:700; letter-spacing:var(--ls-body); color:var(--gray);
}
.cs-pc img{ display:block; width:100%; height:auto; border-radius:0 0 var(--r-sm) var(--r-sm); }

/* ---------- 공식 취급 매체 ----------
   접은 광고상품 섹션에서 옮겨온 목록. 칩은 메인의 .sol__chip 을 그대로 쓴다.
   연한 띠를 화면 끝까지 깔고 위아래 여백은 섹션 공통 --sec-pad. 제목만 가운데, 목록은 왼쪽. */
.cs-all{ padding:var(--sec-pad) 0; background:var(--tint); }
.cs-all .cs-sec__title{ text-align:center; }   /* 제목만 가운데, 목록은 왼쪽 */
.cs-all__g{ display:grid; gap:40px; margin-top:56px; }
/* 한 분류씩 이름 아래에 칩을 흘린다. 제목과 같은 왼쪽 선에서 시작한다. */
.cs-all__g > div{ display:grid; justify-items:start; gap:16px; }
.cs-all .sol__chip{ background:#fff; }   /* 띠 색과 칩 바탕이 같은 --tint 라 칩이 묻힌다 */
.cs-all__g p{
  display:flex; align-items:center; gap:12px; margin:0;
  font-size:var(--t-body); font-weight:700; letter-spacing:var(--ls-body); color:var(--navy);
}
/* lucide house, smartphone, wallet, megaphone (ISC) */
.cs-all__ico{
  display:grid; place-items:center; flex:none; width:32px; height:32px;
  border-radius:var(--r-xs); background:var(--brand-soft); color:var(--brand);
}
.cs-all__ico svg{
  width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- 마무리 띠 ---------- */
.cs-end-wrap{ padding-block:var(--sec-pad); }
.cs-end{
  padding:48px; border-radius:var(--r-md);
  background:linear-gradient(150deg,#26324A,#1C242F); text-align:center;
}
.cs-end h2{ color:#fff; word-break:keep-all; }
.cs-end p{
  margin-top:16px;
  font-size:var(--t-body); font-weight:400; line-height:1.76;
  letter-spacing:var(--ls-body); color:rgba(255,255,255,.66); word-break:keep-all;
}
/* 버튼은 메인 배너의 .banner__btn 을 그대로 가져다 쓴다. */

/* ---------- 좁은 화면 ---------- */
@media (max-width:980px){
  .cs-item{ grid-template-columns:minmax(0,1fr); gap:36px; }
  /* 탭이 화면보다 길어지면 가운데 정렬이 첫 탭을 잘라먹는다. */
  .cs-tabs__in{ justify-content:flex-start; }
  .cs-shot{ position:static; justify-self:center; }
  .cs-hero{ padding:48px 0 32px; }
  .cs-sec__title, .cs-end h2{ font-size:24px; }
  .cs-wrap{ padding:40px 0 var(--sec-pad); }
  .cs-spec__r{ grid-template-columns:1fr; gap:6px; }
  .cs-facts{ grid-template-columns:1fr; gap:8px; margin-top:24px; }
  .cs-facts li{ display:grid; grid-template-columns:72px 1fr; gap:12px; padding:14px 16px; }
  .cs-facts b{ margin:0; }
  .cs-all__g{ gap:28px; margin-top:36px; }
  .cs-devices{ grid-template-columns:minmax(0,1fr); gap:32px; margin-top:32px; }
  .cs-all__g > div{ gap:12px; }
  .cs-end{ padding:36px 24px; }
}

/* 태블릿. 한 칸으로 쌓으면 폰 양옆이 텅 비어서, 폰을 조금 줄이고 두 칸을 유지한다. */
@media (min-width:721px) and (max-width:980px){
  .cs-item{ grid-template-columns:248px minmax(0,1fr); gap:48px; }
  .cs-shot{ position:sticky; justify-self:start; }
  .phone{ width:248px; border-radius:36px; }
  .phone__scr{ width:232px; height:502px; border-radius:28px; }
  .cs-thumbs button{ width:40px; height:88px; }
  .cs-item--wide{ grid-template-columns:minmax(0,1fr); }
  .cs-devices{ grid-template-columns:248px minmax(0,1fr); gap:32px; }
}

/* 폰. 메인 히어로(34px)보다 문장이 길어 네 줄로 꺾였다. 두 줄에 들어가는 크기로 */
@media (max-width:560px){
  .cs-hero .banner__title{ font-size:24px; }
}
@media (max-width:360px){
  .cs-hero .banner__title{ font-size:20px; }
}