/* ── pages.css : 서브페이지(회사 소개·제품·클라우드 서비스·문의) 공통 추가 스타일 ──
   style.css의 기존 클래스(.sec, .card, .grid, .btn, .cta-band …)는 그대로 쓰고,
   여기에는 새로 필요한 것만 둔다. index 전용 보정(.svc--2, .step__no)도 이리로 옮겼다. */
.phero{color:#fff;background:linear-gradient(135deg,#0d0a1f,#1c1442)}
.phero[data-brand=nexknow]{background:radial-gradient(900px 500px at 78% 40%,#2a2a33 0%,transparent 70%),linear-gradient(135deg,#000000,#1c1c22)}
.phero[data-brand=deepcue]{background:linear-gradient(135deg,#1640c4,#3f7cff)}
.phero[data-brand=deepcowork]{background:linear-gradient(135deg,#3a22b8,#7a5cff)}
.phero[data-brand=cloudoc]{background:linear-gradient(135deg,#0b7479,#20bcc1)}
.phero__in{max-width:1180px;margin:0 auto;padding:80px 24px 96px;display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.phero--sm .phero__in{grid-template-columns:1fr;padding:72px 24px 80px}
.phero__art{display:flex;justify-content:center}
@media(max-width:900px){.phero__in{grid-template-columns:1fr}.phero__art{display:none}}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:720px){.grid--2{grid-template-columns:1fr}}
.svc--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:720px){.svc--2{grid-template-columns:1fr}}
.step__no{display:block;font-size:14px;font-weight:800;color:#3264FF;margin-bottom:12px}
.mod__tag{font-size:13px;font-weight:700;color:#3264FF;margin-bottom:6px}
.checks{list-style:none;margin-top:18px;display:grid;gap:10px}
.checks li{position:relative;padding-left:26px;line-height:1.6}
.checks li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:8px;border-left:2.5px solid #3264FF;border-bottom:2.5px solid #3264FF;transform:rotate(-45deg)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.split .sec-head{margin-bottom:0}
.split .checks{margin-top:28px}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:40px}}
.prose p{font-size:17.5px;line-height:1.85;color:inherit}
.prose p+p{margin-top:16px}
.note{margin-top:24px;font-size:14px;opacity:.7}
.card--link{display:block;transition:border-color .2s}
.card--link:hover{border-color:#3264FF}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:16px}
.tbl th,.tbl td{text-align:left;padding:18px 20px;border-bottom:1px solid #e6e8ef;vertical-align:top}
.tbl th{width:180px;font-weight:700;white-space:nowrap}
/* contact */
.contact{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.form{display:grid;gap:24px}
.form__row{border:0}
.form__row legend{font-weight:700;margin-bottom:12px}
.form__row legend span{font-weight:500;opacity:.6;font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #d7dbe6;border-radius:99px;cursor:pointer;font-size:15px}
.chips label:has(input:checked){border-color:#3264FF;background:rgba(50,100,255,.08);color:#2448c9;font-weight:700}
.chips input{accent-color:#3264FF}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.form__grid{grid-template-columns:1fr}}
.field{display:grid;gap:8px;font-weight:600;font-size:15px}
.field input,.field textarea{font:inherit;font-weight:400;padding:14px 16px;border:1px solid #d7dbe6;border-radius:12px;background:#fff;color:#111827;width:100%}
.field input:focus,.field textarea:focus{outline:none;border-color:#3264FF;box-shadow:0 0 0 3px rgba(50,100,255,.18)}
.agree{display:flex;gap:10px;align-items:center;font-size:15px}
.agree a{text-decoration:underline}
.btn--primary{background:linear-gradient(135deg,#3264FF,#7346FF);color:#fff;border:0;cursor:pointer;justify-self:start}
.form__msg{font-size:15px;font-weight:600;color:#2448c9}
.info{border:1px solid #e6e8ef;border-radius:20px;padding:32px 30px}
.info dl{margin-top:18px;display:grid;gap:4px}
.info dt{margin-top:14px;font-size:14px;font-weight:700;opacity:.6}
.info dd{font-size:16.5px;font-weight:600;line-height:1.6}
/* solution: 업무 분야 필터 · 시나리오 카드 */
.filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.filter button{font:inherit;font-size:15px;font-weight:600;padding:10px 18px;border-radius:99px;border:1px solid #d7dbe6;background:transparent;color:inherit;cursor:pointer}
.filter button[aria-pressed=true]{background:#3264FF;border-color:#3264FF;color:#fff}
.case[hidden]{display:none}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tags span{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:99px;background:rgba(50,100,255,.1);color:#2448c9}
.tags span[data-p="Deep cowork"]{background:rgba(122,92,255,.12);color:#5a3ee0}
.tags span[data-p=cloudoc],.tags span[data-p=backupdoc]{background:rgba(23,179,184,.12);color:#0e7f84}
.case__situ{margin-top:10px;opacity:.75}
/* resources */
.res{display:flex;flex-direction:column}
.res .card__desc{flex:1}
.res__prod{font-size:13px;font-weight:700;color:#3264FF;margin-bottom:6px}
.res__dl{margin-top:20px;font-weight:700;color:#3264FF}
.links{display:flex;gap:18px;margin-top:18px;font-weight:700;color:#3264FF}
/* FAQ 폭은 아래 CTA 밴드와 같게 — .in 전체 폭을 쓴다(2026-10-01 지시).
   원래 max-width:880px 이라 밴드보다 좁았다. */
.faq{display:grid;gap:12px;max-width:none}
.faq details{border:1px solid #e6e8ef;border-radius:16px;padding:0 24px}
.faq summary{cursor:pointer;font-weight:700;font-size:17px;padding:20px 0;list-style:none;position:relative;padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:16px;font-size:22px;font-weight:500;opacity:.6}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 22px;line-height:1.75;opacity:.85}
.sec[id]{scroll-margin-top:80px}

/* ── resources: 제품별 자료 목록 (가독성 개편) ──
   왼쪽 제품명 · 오른쪽 자료 행. 행마다 이름(굵게) → 설명 → 받기 버튼 순서로 읽힌다. */
/* 첫 그룹 위에 있던 2px 검정 선을 뺐다(2026-10-01 지시).
   그룹 구분은 .dlgroup 의 border-bottom 으로 충분하다. */
.dlgroups{border-top:0}
.dlgroup{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:28px 0;border-bottom:1px solid #e6e8ef}
.dlgroup__head{position:relative;padding-left:16px}
.dlgroup__head::before{content:"";position:absolute;left:0;top:6px;width:4px;height:20px;border-radius:2px;background:#3264FF}
.dlgroup[data-brand=nexknow] .dlgroup__head::before{background:linear-gradient(#32DCDC,#D773FF)}
.dlgroup[data-brand=deepcowork] .dlgroup__head::before{background:#6D4AE6}
.dlgroup[data-brand=cloudoc] .dlgroup__head::before,.dlgroup[data-brand=backupdoc] .dlgroup__head::before{background:#14AAB0}
.dlgroup__name{font-size:19px;font-weight:800;line-height:1.4}
.dlgroup__sub{margin-top:2px;font-size:14px;opacity:.6}
.dlitems{list-style:none;display:grid}
.dlitem{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0}
.dlitem+.dlitem{border-top:1px dashed #e1e4ec}
.dlitem:first-child{padding-top:0}.dlitem:last-child{padding-bottom:0}
.dlitem__name{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}
.dlitem__fmt{font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:6px;background:#f0f2f7;color:#5b6474}
.dlitem__desc{margin-top:4px;font-size:15px;line-height:1.6;opacity:.72}
.dlitem .res__dl{flex:none;display:inline-flex;align-items:center;gap:6px;margin-top:0;height:40px;padding:0 16px;border:1.5px solid #cfd6ea;border-radius:10px;font-size:14.5px;font-weight:700;color:#2448c9;transition:background .15s,border-color .15s}
.dlitem .res__dl:hover{background:#3264FF;border-color:#3264FF;color:#fff}
.dlitem .ico{width:17px;height:17px}
/* 가이드: 같은 구성을 흰 카드 두 장으로 */
.dlgroups--card{border-top:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dlgroups--card .dlgroup{grid-template-columns:1fr;gap:20px;padding:30px 28px;border:1px solid #e6e8ef;border-radius:20px;background:#fff}
@media(max-width:860px){
  .dlgroup{grid-template-columns:1fr;gap:16px}
  .dlgroups--card{grid-template-columns:1fr}
}
@media(max-width:520px){
  .dlitem{flex-direction:column;align-items:flex-start;gap:12px}
}

/* 2026-10-01 — 문의 폼 단일 컬럼 가운데 정렬(오른쪽 연락처 블록을 뺀 뒤 추가).
   신규 pages.css 에는 없는 규칙이므로 교체할 때마다 다시 얹어야 한다. */
.contact--solo{grid-template-columns:1fr;max-width:680px;margin:0 auto}

/* ⚠️ 클래스 이름 충돌 — style.css 의 .ico 는 60x60 틴트 타일(회사소개 사업영역 카드용)이다.
   자료실 버튼 안의 작은 아이콘이 같은 이름을 써서 둥근 배경과 아래 여백이 따라붙었다.
   버튼 안에서만 그 장식을 끈다. */
.res__dl .ico{
  width:17px;height:17px;margin:0;padding:0;border:0;border-radius:0;
  background:none;display:inline-block;flex:none;
}

/* ── 배너 세로 길이 통일 (2026-10-02 지시) ────────────────────────────
   재보니 474~718px 로 흩어져 있었다. 성격이 같은 것끼리 두 그룹으로 맞춘다.
     그림형(.phero / .pagehead) 720px — 회사소개 · 문서중앙화 · Deep cue · Deep cowork
     글형(.phero--sm)        520px — 솔루션 · 자료실 · 문의
   히어로 바닥 곡선(.wave-cap, 72px)이 아래를 덮으므로 그만큼 아래 여백을 더해
   글이 곡선에 눌리지 않게 한다. 홈의 롤링 배너(.hero)는 별개로 둔다. */
.phero { display: flex; align-items: center; min-height: 720px; }
.phero > .phero__in { width: 100%; }
.phero__in { padding-bottom: 140px; }
.phero--sm { min-height: 520px; }
.phero--sm .phero__in { padding-bottom: 130px; }
@media (max-width: 860px){
  .phero { min-height: 0; }
  .phero--sm { min-height: 0; }
}

/* 개인정보 수집·이용 동의 — '자세히 보기'는 동의 문구 바로 옆, 전문은 아래 전체 폭.
   라벨은 cloudoc.ai·mcloudoc.com 배포본과 같은 '자세히 보기'로 통일했다(2026-10-06).
   문안도 그 두 사이트의 실제 문구를 그대로 가져왔다 — 임의로 바꾸지 말 것. */
.consent-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.consent-row > .consent,.consent-row > .agree{margin:0}
.privacy__link{
  flex:none;border:0;background:none;padding:0;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:#3264FF;
  text-decoration:underline;text-underline-offset:3px}
.privacy__link:hover{opacity:.78}
.privacy__box{
  margin-top:12px;padding:18px 20px;border:1px solid #e6e8ef;border-radius:12px;
  background:#fafafb;font-size:13.5px;line-height:1.75;color:#5b6474;max-height:260px;overflow:auto}
.privacy__box p{margin:0 0 10px}
.privacy__box p:last-child{margin-bottom:0}
.privacy__h{font-weight:700;color:var(--ink);margin-top:14px}
.privacy__box > .privacy__h:first-child{margin-top:0}
.privacy__note{margin-top:12px;color:#8a90a0}