/* =========================================================
   DESIGN PUNCH — 운영사이트(designpunch.co.kr) 규격 매칭 (본문 삽입용)
   · 컨테이너 .inner = 1400px (운영 .inner 87.5rem)
   · 단위 rem(root 16px), 강조색 #2AC1EB, 폰트 Pretendard/Montserrat
   · 삽입 충돌 방지: 모든 규칙 .dpx 스코프 + dpx- 프리픽스
   ========================================================= */
/* Pretendard */
@font-face {font-family: 'Pretendard'; font-weight: 100; font-style: normal; src: url('/font/Pretendard-Thin.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 200; font-style: normal; src: url('/font/Pretendard-ExtraLight.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 300; font-style: normal; src: url('/font/Pretendard-Light.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 400; font-style: normal; src: url('/font/Pretendard-Regular.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 500; font-style: normal; src: url('/font/Pretendard-Medium.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 600; font-style: normal; src: url('/font/Pretendard-SemiBold.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 700; font-style: normal; src: url('/font/Pretendard-Bold.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 800; font-style: normal; src: url('/font/Pretendard-ExtraBold.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 900; font-style: normal; src: url('/font/Pretendard-Black.woff') format('woff');}

.dpx{
  --pre:'Pretendard','Spoqa Han Sans Neo',sans-serif;
  --mont:'Montserrat',sans-serif;
  --point:#2AC1EB;
  --bg:#000; --ink:#fff; --dim:#c8ccd2; --muted:#848484;
  --line:rgba(255,255,255,.12); --card:rgba(255,255,255,.035); --card-line:rgba(255,255,255,.09);
  background:var(--bg); color:var(--ink); font-family:var(--pre);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
/* ===== 운영사이트 전역 CSS 간섭 차단 (워크플로우 원본 match.css와 동일하게 보이도록) =====
   원본 미리보기는 리셋 CSS 없이 브라우저 기본값 위에서 동작한다. 운영사이트는 dp_reset.css·main.css·
   font-awesome이 요소 전역을 덮어쓰므로, .dpx 안에서는 해당 속성을 브라우저 기본값(revert)으로 되돌린다.
   (아래 매칭 규칙들이 같은 속성을 다시 지정하면 그쪽이 우선한다) */
.dpx{padding-top:6.25rem; box-sizing:revert; word-break:normal;}                        /* 운영 .header(position:fixed, 6.25rem) 아래에서 본문 시작 / 루트는 상속 차단을 위해 normal 명시 */
.dpx *{color:revert; font-family:revert;}                                               /* main.css  body *{color:#fff; font-family:'Montserrat'} */
.dpx *,.dpx ::before,.dpx ::after{word-break:revert;}                                   /* dp_reset  *{word-break:keep-all} / main.css p,dd{keep-all} → .dpx의 normal 상속 */
.dpx ::before,.dpx ::after{box-sizing:revert;}                                          /* dp_reset  :before,:after{box-sizing:border-box} */
.dpx h1,.dpx h2,.dpx h3,.dpx h4,.dpx h5,.dpx h6{margin:revert; padding:revert; border:revert; font-size:revert; font-family:revert;}
.dpx p{margin:revert; padding:revert;}                                                  /* dp_reset  p{margin:0} */
.dpx ul,.dpx ol,.dpx dl,.dpx dt,.dpx dd{margin:revert; padding:revert; list-style:revert;}
.dpx li{display:revert;}
.dpx a{color:revert; text-decoration:revert; font-family:revert;}
.dpx em,.dpx address{font-style:revert;}
.dpx img,.dpx form,.dpx fieldset{margin:revert; padding:revert; border:revert;}
.dpx img,.dpx label,.dpx input,.dpx button,.dpx select{vertical-align:revert; font-size:revert;}
.dpx input,.dpx button,.dpx textarea,.dpx select{margin:revert; padding:revert; font-family:revert; font-size:revert;}
.dpx hr{display:revert;}
.dpx pre{overflow-x:revert; font-size:revert;}
.dpx .fa{display:revert; font:revert; text-rendering:revert;}                           /* font-awesome .fa 와 FAQ 답변 p.fa 충돌 */
@media (max-width:1024px){ .dpx{padding-top:4.625rem;} }                                /* 운영 .header 높이 변화에 맞춤 */
@media (max-width:768px){ .dpx{padding-top:4rem;} }

.dpx *{box-sizing:border-box;}
.dpx img{max-width:100%;}
.dpx .inner{max-width:87.5rem; margin:0 auto; padding-left:clamp(1.25rem,5vw,7.5rem); padding-right:clamp(1.25rem,5vw,7.5rem);}
.dpx section{padding-block:clamp(3.5rem,7vw,7.5rem);}
.dpx section + section{padding-top:0;}

/* 타이포 공통 */
.dpx .eyebrow{display:inline-block; font-family:var(--mont); font-size:.8125rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--point); margin-bottom:1.375rem;}
.dpx h1,.dpx h2,.dpx h3,.dpx h4{margin:0; font-weight:800; letter-spacing:-.02em;}
.dpx .sec-head{margin-bottom:3.75rem; max-width:52.5rem;}
.dpx .sec-head h2{font-size:clamp(1.875rem,3.2vw,2.75rem); line-height:1.25;}
.dpx .sec-head .sub{margin-top:1.375rem; color:var(--dim); font-size:1.1875rem; line-height:1.8;}
.dpx .note{color:var(--muted); font-size:.875rem; line-height:1.7; margin-top:1.5rem;}
.dpx .note a{color:var(--point); font-weight:700;}

/* HERO */
.dpx .dpx-hero{padding-block:clamp(4.5rem,9vw,10rem) clamp(3rem,5vw,5rem); border-bottom:1px solid var(--line);}
.dpx .dpx-hero h1{font-size:clamp(2.25rem,4.6vw,3.75rem); line-height:1.22;}
.dpx .dpx-hero h1 .dim{color:var(--muted);}
.dpx .dpx-hero .lead{margin-top:2rem; max-width:47.5rem; color:var(--dim); font-size:1.25rem; line-height:1.85;}
.dpx .dpx-hero .cta{margin-top:2.75rem; display:flex; gap:.875rem; flex-wrap:wrap;}

/* 버튼 */
.dpx .dpx-btn{display:inline-flex; align-items:center; gap:.625rem; padding:1.0625rem 2.125rem; border-radius:3.75rem;
  font-size:1.0625rem; font-weight:700; font-family:var(--pre); cursor:pointer; transition:.25s; text-decoration:none;}
.dpx .dpx-btn.solid{background:var(--point); color:#04222c;}
.dpx .dpx-btn.solid:hover{filter:brightness(1.08);}
.dpx .dpx-btn.ghost{border:1px solid var(--line); color:var(--ink);}
.dpx .dpx-btn.ghost:hover{border-color:var(--point); color:var(--point);}

/* STATS */
.dpx .dpx-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;}
.dpx .dpx-stat{padding:2.5rem 2rem; border:1px solid var(--card-line); border-radius:1.25rem; background:var(--card);}
.dpx .dpx-stat b{font-family:var(--mont); font-size:clamp(2.75rem,4.5vw,3.75rem); font-weight:800; line-height:1; color:var(--ink);}
.dpx .dpx-stat .unit{font-size:1.375rem; font-weight:700; margin-left:.25rem; color:var(--point);}
.dpx .dpx-stat p{margin:1rem 0 0; color:var(--muted); font-size:.9375rem; line-height:1.5;}

/* 인용 배너 */
.dpx .dpx-quote{display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
  margin-top:3.75rem; padding:2.75rem 3rem; border:1px solid var(--card-line); border-radius:1.5rem; background:var(--card);}
.dpx .dpx-quote p{margin:0; font-size:1.375rem; line-height:1.7; font-weight:600;}
.dpx .dpx-quote .tag{display:block; margin-top:.75rem; color:var(--point); font-weight:700; font-size:.9375rem; letter-spacing:.02em;}

/* 팀(조직) */
.dpx .dpx-teams{display:grid; grid-template-columns:repeat(5,1fr); gap:1.25rem;}
.dpx .dpx-team{padding:2.25rem 1.75rem; border:1px solid var(--card-line); border-radius:1.25rem; background:var(--card);}
.dpx .dpx-team .no{font-family:var(--mont); font-size:.8125rem; font-weight:700; letter-spacing:.1em; color:var(--point);}
.dpx .dpx-team h3{margin-top:1.5rem; font-size:1.375rem; font-weight:700;}
.dpx .dpx-team h3 span{display:block; font-family:var(--mont); font-size:.875rem; font-weight:600; color:var(--muted); margin-bottom:.375rem; letter-spacing:.02em; text-transform:uppercase;}
.dpx .dpx-team p{margin:1rem 0 0; color:var(--dim); font-size:1rem; line-height:1.7;}
.dpx .dpx-flow{margin-top:2rem; font-family:var(--mont); font-size:.8125rem; letter-spacing:.12em; color:var(--muted); text-align:right;}

/* 카드 그리드 (2·3열) */
.dpx .dpx-grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem;}
.dpx .dpx-grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;}
.dpx .dpx-card{position:relative; padding:2.75rem 2.25rem; border:1px solid var(--card-line); border-radius:1.25rem; background:var(--card); transition:.25s;}
.dpx .dpx-card:hover{border-color:rgba(42,193,235,.5); transform:translateY(-3px);}
.dpx .dpx-card .idx{font-family:var(--mont); font-size:.9375rem; font-weight:700; color:var(--point);}
.dpx .dpx-card h3{margin-top:1.125rem; font-size:1.4375rem; font-weight:700;}
.dpx .dpx-card p{margin:1rem 0 0; color:var(--dim); font-size:1.0625rem; line-height:1.75;}

/* 미니 리스트(카드 내 항목) */
.dpx .dpx-mini{margin:1.5rem 0 0; padding:1.375rem 0 0; list-style:none; border-top:1px solid var(--line);}
.dpx .dpx-mini li{position:relative; padding-left:1.125rem; color:var(--dim); font-size:1rem; line-height:2;}
.dpx .dpx-mini li::before{content:""; position:absolute; left:0; top:.85em; width:.375rem; height:.375rem; border-radius:50%; background:var(--point);}

/* 파트너(2열) */
.dpx .dpx-part{display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem;}
.dpx .dpx-pcard{padding:2.5rem 2.25rem; border:1px solid var(--card-line); border-radius:1.25rem; background:var(--card);}
.dpx .dpx-pcard .st{display:inline-block; font-size:1.125rem; font-weight:800; color:var(--point); margin-bottom:1rem;}
.dpx .dpx-pcard p{margin:0; color:var(--dim); font-size:1.0625rem; line-height:1.9;}

/* PHASE / STEP (제작과정·프로그램 세로형) */
.dpx .dpx-phase{border-top:1px solid var(--line); padding-top:2.75rem; margin-top:3.5rem;}
.dpx .dpx-phase:first-child{border-top:0; margin-top:0; padding-top:0;}
.dpx .dpx-phase .cat-mini{font-family:var(--mont); font-size:.8125rem; font-weight:700; letter-spacing:.12em; color:var(--point); text-transform:uppercase; margin:0 0 1.75rem;}
.dpx .dpx-steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.25rem;}
.dpx .dpx-step{padding:2.25rem 2rem; border:1px solid var(--card-line); border-radius:1.25rem; background:var(--card);}
.dpx .dpx-step .sn{font-family:var(--mont); font-size:.8125rem; font-weight:700; letter-spacing:.1em; color:var(--point);}
.dpx .dpx-step h4{margin:1rem 0 .875rem; font-size:1.3125rem; font-weight:700;}
.dpx .dpx-step p{margin:0; color:var(--dim); font-size:1.0625rem; line-height:1.75;}
.dpx .dpx-tag{display:inline-block; margin-top:1.25rem; padding:.4375rem 1rem; border:1px solid var(--line); border-radius:3.75rem; font-size:.8125rem; font-weight:600; color:var(--point);}

/* 프로그램(바우처) 세로 블록 */
.dpx .dpx-prog{border-top:1px solid var(--line); padding-top:3rem; margin-top:3.5rem; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;}
.dpx .dpx-prog:first-child{border-top:0; margin-top:0; padding-top:0;}
.dpx .dpx-prog .cat-mini{font-family:var(--mont); font-size:.8125rem; font-weight:700; letter-spacing:.12em; color:var(--point); margin:0 0 1rem;}
.dpx .dpx-prog h3{font-size:1.75rem; font-weight:800; line-height:1.3;}
.dpx .dpx-prog > div > p{margin:1.25rem 0 0; color:var(--dim); font-size:1.125rem; line-height:1.8;}
.dpx .dpx-media{padding:2rem; border:1px solid var(--card-line); border-radius:1.25rem; background:var(--card);}
.dpx .dpx-media svg{width:100%; height:auto; display:block;}
.dpx .dpx-feat{margin:1.75rem 0 0; padding:0; list-style:none;}
.dpx .dpx-feat li{position:relative; padding-left:1.5rem; color:var(--dim); font-size:1.0625rem; line-height:2.1;}
.dpx .dpx-feat li::before{content:""; position:absolute; left:0; top:.95em; width:.5rem; height:.5rem; border-radius:50%; background:var(--point);}

/* 요금제(플랜) */
.dpx .dpx-plans{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; align-items:stretch;}
.dpx .dpx-plan{position:relative; padding:2.75rem 2.25rem; border:1px solid var(--card-line); border-radius:1.25rem; background:var(--card);}
.dpx .dpx-plan.feature{border-color:rgba(42,193,235,.55); background:linear-gradient(180deg,rgba(42,193,235,.08),rgba(255,255,255,.02));}
.dpx .dpx-plan .badge{position:absolute; top:1.5rem; right:1.5rem; padding:.375rem .875rem; border-radius:3.75rem; background:var(--point); color:#04222c; font-size:.75rem; font-weight:800;}
.dpx .dpx-plan h3{font-size:1.5rem; font-weight:800;}
.dpx .dpx-plan .lead{margin:1rem 0 1.75rem; color:var(--dim); font-size:1.0625rem; line-height:1.7;}
.dpx .dpx-plan .price{font-family:var(--mont); font-size:2.25rem; font-weight:800; color:var(--point); margin-bottom:1.5rem;}
.dpx .dpx-plan .price small{font-family:var(--pre); font-size:.9375rem; font-weight:600; color:var(--muted);}
.dpx .dpx-plan ul{margin:0; padding:1.5rem 0 0; list-style:none; border-top:1px solid var(--line);}
.dpx .dpx-plan ul li{display:flex; justify-content:space-between; gap:1rem; padding:.625rem 0; font-size:1rem;}
.dpx .dpx-plan ul li span:first-child{color:var(--muted);}
.dpx .dpx-plan ul li span:last-child{color:var(--ink); font-weight:600; text-align:right;}

/* 표 */
.dpx .dpx-table-wrap{overflow-x:auto; border:1px solid var(--card-line); border-radius:1.25rem;}
.dpx .dpx-table{width:100%; border-collapse:collapse; min-width:34rem;}
.dpx .dpx-table th,.dpx .dpx-table td{padding:1.25rem 1.5rem; text-align:left; font-size:1.0625rem; border-bottom:1px solid var(--line);}
.dpx .dpx-table thead th{color:var(--muted); font-size:.9375rem; font-weight:700; background:rgba(255,255,255,.03);}
.dpx .dpx-table td{color:var(--dim);}
.dpx .dpx-table .c-point{color:var(--point); font-weight:700; white-space:nowrap;}
.dpx .dpx-table tr:last-child td{border-bottom:0;}

/* 스코프 칩 그리드 */
.dpx .dpx-scope{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;}
.dpx .dpx-scope-item{padding:2rem 1.875rem; border:1px solid var(--card-line); border-radius:1.25rem; background:var(--card);}
.dpx .dpx-scope-item .st{display:inline-block; font-size:1.0625rem; font-weight:800; color:var(--point); margin-bottom:.75rem;}
.dpx .dpx-scope-item p{margin:0; color:var(--dim); font-size:1rem; line-height:1.6;}

/* WHY (하단 신뢰 4열) */
.dpx .dpx-why{display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;}
.dpx .dpx-why-item .k{font-family:var(--mont); font-size:1.125rem; font-weight:800; color:var(--point);}
.dpx .dpx-why-item b{display:block; margin:1rem 0 .75rem; font-size:1.25rem; font-weight:800;}
.dpx .dpx-why-item p{margin:0; color:var(--dim); font-size:1.0625rem; line-height:1.75;}

/* 인용 배너(단순) */
.dpx .dpx-band{display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; margin-top:2rem; padding:2.5rem 2.75rem; border:1px solid var(--card-line); border-radius:1.5rem; background:var(--card);}
.dpx .dpx-band p{margin:0; font-size:1.125rem; line-height:1.7; color:var(--dim);}
.dpx .dpx-band b{color:var(--ink);}

/* CTA */
.dpx .dpx-cta{text-align:center; padding:clamp(3.5rem,7vw,6.25rem) 2rem; border:1px solid var(--card-line); border-radius:1.75rem; background:linear-gradient(180deg,rgba(42,193,235,.06),rgba(255,255,255,.02));}
.dpx .dpx-cta .eyebrow{margin-bottom:1rem;}
.dpx .dpx-cta h2{font-size:clamp(1.875rem,3.4vw,2.875rem); line-height:1.25;}
.dpx .dpx-cta p{margin:1.5rem auto 0; max-width:36rem; color:var(--dim); font-size:1.1875rem; line-height:1.75;}
.dpx .dpx-cta .cta{margin-top:2.5rem; display:flex; gap:.875rem; justify-content:center; flex-wrap:wrap;}

/* 반응형 */
@media (max-width:1024px){
  .dpx .dpx-stats{grid-template-columns:repeat(2,1fr);}
  .dpx .dpx-teams{grid-template-columns:repeat(2,1fr);}
  .dpx .dpx-grid3{grid-template-columns:repeat(2,1fr);}
  .dpx .dpx-plans{grid-template-columns:1fr;}
  .dpx .dpx-scope{grid-template-columns:repeat(2,1fr);}
  .dpx .dpx-why{grid-template-columns:repeat(2,1fr);}
  .dpx .dpx-prog{grid-template-columns:1fr; gap:1.75rem;}
}
@media (max-width:640px){
  .dpx .dpx-stats,.dpx .dpx-teams,.dpx .dpx-grid2,.dpx .dpx-grid3,.dpx .dpx-part,.dpx .dpx-scope,.dpx .dpx-why{grid-template-columns:1fr;}
  .dpx .dpx-quote,.dpx .dpx-band{padding:2rem 1.5rem;}
}

/* FAQ (native <details>, 무JS) */
.dpx .dpx-faq{border-top:1px solid var(--line);}
.dpx .dpx-faq details{border-bottom:1px solid var(--line);}
.dpx .dpx-faq summary{list-style:none; cursor:pointer; padding:1.75rem 3rem 1.75rem 0; position:relative; font-size:1.1875rem; font-weight:700; color:var(--ink); transition:color .2s;}
.dpx .dpx-faq summary::-webkit-details-marker{display:none;}
.dpx .dpx-faq summary:hover{color:var(--point);}
.dpx .dpx-faq summary::after{content:"+"; position:absolute; right:.375rem; top:50%; transform:translateY(-50%); color:var(--point); font-size:1.625rem; font-weight:400; transition:transform .3s;}
.dpx .dpx-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.dpx .dpx-faq .fa{padding:0 3rem 1.75rem 0; margin:0; color:var(--dim); font-size:1.0625rem; line-height:1.8;}

/* ===== 모션 (dpx_sub.js와 함께 동작) ===== */
/* 스크롤 등장 */
.dpx .rv{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.dpx .rv.in{opacity:1; transform:none;}

/* 좌측 고정 + 우측 스크롤 (스티키 스플릿) */
.dpx .dpx-split{display:grid; grid-template-columns:minmax(17rem,24rem) 1fr; gap:3.5rem; align-items:start;}
.dpx .dpx-sticky{position:sticky; top:5rem;}
.dpx .dpx-pnav{margin:2.25rem 0 0; padding:0; list-style:none;}
.dpx .dpx-pnav li{display:flex; gap:1rem; align-items:flex-start; padding:1.125rem 0; border-top:1px solid var(--line); cursor:pointer; opacity:.45; transition:opacity .3s;}
.dpx .dpx-pnav li:last-child{border-bottom:1px solid var(--line);}
.dpx .dpx-pnav li.active{opacity:1;}
.dpx .dpx-pnav li .pn{font-family:var(--mont); font-size:1rem; font-weight:700; color:var(--point); flex:none;}
.dpx .dpx-pnav li b{display:block; font-size:1.1875rem; font-weight:700;}
.dpx .dpx-pnav li i{font-style:normal; color:var(--muted); font-size:.9375rem;}
.dpx .dpx-track .dpx-phase:first-child{border-top:0; margin-top:0; padding-top:0;}
@media (max-width:1024px){
  .dpx .dpx-split{grid-template-columns:1fr; gap:2rem;}
  .dpx .dpx-sticky{position:static;}
}

/* ===== 히어로 배경 워터마크 + 스크롤 큐 ===== */
.dpx .dpx-hero{position:relative; overflow:hidden;}
.dpx .dpx-hero .inner{position:relative; z-index:2;}
.dpx .dpx-wm{position:absolute; left:0; bottom:-.12em; z-index:1; margin:0; white-space:nowrap; pointer-events:none;
  font-family:var(--mont); font-weight:800; font-size:clamp(6rem,20vw,18rem); line-height:.8;
  letter-spacing:-.02em; color:rgba(255,255,255,.09); will-change:transform;}
.dpx .dpx-scroll{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:.75rem; margin-top:clamp(2.5rem,5vw,4.5rem);}
.dpx .dpx-scroll span{font-family:var(--mont); font-size:.75rem; font-weight:600; letter-spacing:.28em; color:var(--muted);}
.dpx .dpx-scroll i{width:1px; height:3.25rem; background:linear-gradient(var(--point),transparent); position:relative; overflow:hidden;}
.dpx .dpx-scroll i::after{content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--point); animation:dpxScroll 1.8s cubic-bezier(.16,1,.3,1) infinite;}
@keyframes dpxScroll{0%{top:-100%}60%,100%{top:100%}}

/* ===== 버튼 화살표 아이콘 + 호버 모션 ===== */
.dpx .dpx-btn .ar{display:inline-block; transition:transform .3s cubic-bezier(.16,1,.3,1);}
.dpx .dpx-btn:hover .ar{transform:translate(.18rem,.18rem);}
.dpx .dpx-btn.ghost:hover .ar,
.dpx .dpx-btn .ar.up{}
.dpx .dpx-btn:hover .ar.up{transform:translate(.18rem,-.18rem);}

@media (prefers-reduced-motion:reduce){
  .dpx .rv{opacity:1 !important; transform:none !important;}
  .dpx .dpx-scroll i::after{animation:none;}
}

/* ===== 타임라인(연혁) ===== */
.dpx .dpx-tl{position:relative; padding-left:2.5rem;}
.dpx .dpx-tl::before{content:""; position:absolute; left:.5rem; top:.5rem; bottom:.5rem; width:2px; background:var(--line);}
.dpx .dpx-tl-phase{position:relative; margin:3rem 0 1.75rem;}
.dpx .dpx-tl-phase:first-child{margin-top:0;}
.dpx .dpx-tl-phase::before{content:""; position:absolute; left:-2.5rem; top:.35rem; width:1.05rem; height:1.05rem; border-radius:50%; background:var(--point); box-shadow:0 0 0 5px rgba(42,193,235,.15);}
.dpx .dpx-tl-phase .pno{font-family:var(--mont); font-size:.8125rem; font-weight:700; letter-spacing:.14em; color:var(--point);}
.dpx .dpx-tl-phase h3{margin:.5rem 0 .25rem; font-size:1.5rem; font-weight:800;}
.dpx .dpx-tl-phase .pmeta{margin:0; color:var(--muted); font-size:.9375rem;}
.dpx .dpx-tl-item{position:relative; padding:1.25rem 0 1.25rem 0; border-bottom:1px solid var(--line);}
.dpx .dpx-tl-item::before{content:""; position:absolute; left:-2.5rem; top:1.7rem; width:.55rem; height:.55rem; border-radius:50%; background:#3a3f47; transform:translateX(.25rem);}
.dpx .dpx-tl-item .sn{font-family:var(--mont); font-size:.875rem; font-weight:700; color:var(--point);}
.dpx .dpx-tl-item h4{margin:.5rem 0 .5rem; font-size:1.25rem; font-weight:700;}
.dpx .dpx-tl-item p{margin:0; color:var(--dim); font-size:1.0625rem; line-height:1.7;}
.dpx .dpx-tl-item .dpx-tag{margin-top:1rem;}

/* ===== 문의 폼(contact/write) ===== */
.dpx .dpx-form{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; max-width:56rem;}
.dpx .dpx-field{display:flex; flex-direction:column; gap:.5rem;}
.dpx .dpx-field.full{grid-column:1 / -1;}
.dpx .dpx-field label{font-size:.9375rem; font-weight:600; color:var(--dim);}
.dpx .dpx-field .inp,.dpx .dpx-field textarea,.dpx .dpx-field select{width:100%; padding:1rem 1.125rem; background:var(--card); border:1px solid var(--card-line); border-radius:.75rem; color:var(--ink); font-family:var(--pre); font-size:1.0625rem; outline:none; transition:border-color .2s;}
.dpx .dpx-field .inp:focus,.dpx .dpx-field textarea:focus,.dpx .dpx-field select:focus{border-color:var(--point);}
.dpx .dpx-field textarea{min-height:9rem; resize:vertical;}
.dpx .dpx-form-actions{grid-column:1 / -1; display:flex; gap:.875rem; align-items:center; flex-wrap:wrap; margin-top:.5rem;}

/* ===== 게시판 리스트(contact) ===== */
.dpx .dpx-board{border-top:2px solid var(--line);}
.dpx .dpx-board .row{display:grid; grid-template-columns:5rem 1fr 8rem 7rem; gap:1rem; align-items:center; padding:1.25rem .5rem; border-bottom:1px solid var(--line); font-size:1rem;}
.dpx .dpx-board .row.head{color:var(--muted); font-size:.875rem; font-weight:700;}
.dpx .dpx-board .row .b-title{color:var(--ink); font-weight:600;}
.dpx .dpx-board .row .b-who,.dpx .dpx-board .row .b-date,.dpx .dpx-board .row .b-num{color:var(--muted);}
.dpx .dpx-board .lock{color:var(--muted); margin-right:.375rem;}
@media (max-width:768px){
  .dpx .dpx-form{grid-template-columns:1fr;}
  .dpx .dpx-board .row{grid-template-columns:1fr 5rem; }
  .dpx .dpx-board .row .b-num,.dpx .dpx-board .row .b-date{display:none;}
}

/* ===== 완료 패널(contact/complete) ===== */
.dpx .dpx-complete{max-width:40rem; margin:0 auto; text-align:center; padding:clamp(3rem,6vw,5rem) 2rem;}
.dpx .dpx-complete .ck{width:5.5rem; height:5.5rem; border-radius:50%; background:rgba(42,193,235,.12); border:1px solid rgba(42,193,235,.4); display:flex; align-items:center; justify-content:center; margin:0 auto 1.75rem; font-size:2.5rem; color:var(--point);}
.dpx .dpx-complete h2{font-size:clamp(1.75rem,3vw,2.5rem); font-weight:800;}
.dpx .dpx-complete p{margin:1.25rem auto 0; max-width:30rem; color:var(--dim); font-size:1.125rem; line-height:1.75;}
.dpx .dpx-complete .cta{margin-top:2.5rem; display:flex; gap:.875rem; justify-content:center; flex-wrap:wrap;}

/* ===== 문의 작성 폼 (write) ===== */
.dpx .dpx-inq{display:grid; grid-template-columns:22rem 1fr; gap:3rem; align-items:start;}
.dpx .dpx-inq-side{position:sticky; top:6.5rem; padding:2.25rem; border:1px solid var(--card-line); border-radius:1.25rem; background:var(--card);}
.dpx .dpx-inq-side .hello{font-family:var(--mont); font-size:1.5rem; font-weight:800;}
.dpx .dpx-inq-side .hello .ast{color:var(--point);}
.dpx .dpx-inq-sum{margin:1.5rem 0; font-size:1.1875rem; line-height:1.9; color:var(--dim);}
.dpx .dpx-inq-sum .fill{color:var(--point); font-weight:700;}
.dpx .dpx-inq-sum .fill.empty{color:var(--muted-2,#5b606a); font-weight:500;}
.dpx .dpx-inq-side .div{height:1px; background:var(--line); margin:1.5rem 0;}
.dpx .dpx-inq-side .subq{font-weight:700; font-size:1.125rem; margin:0 0 1.25rem;}
.dpx .dpx-agree{display:flex; gap:.5rem; align-items:flex-start; margin-bottom:1.25rem; font-size:.9375rem; color:var(--dim);}
.dpx .dpx-agree a{color:var(--point);}
.dpx .dpx-fsec{padding:2rem 0; border-top:1px solid var(--line);}
.dpx .dpx-fsec:first-child{border-top:0; padding-top:0;}
.dpx .dpx-flabel{font-family:var(--mont); font-size:.8125rem; font-weight:700; letter-spacing:.12em; color:var(--point); text-transform:uppercase;}
.dpx .dpx-fq{margin:.75rem 0 1.25rem; font-size:1.25rem; font-weight:700; line-height:1.4;}
.dpx .dpx-fq .req{color:var(--point);}
.dpx .dpx-fq .opt{font-size:.875rem; font-weight:500; color:var(--muted); margin-left:.5rem;}
.dpx .dpx-fgrid{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.dpx .dpx-choices{display:flex; flex-wrap:wrap; gap:.625rem;}
.dpx .dpx-choices label{cursor:pointer;}
.dpx .dpx-choices input{position:absolute; opacity:0; width:0; height:0;}
.dpx .dpx-chip{display:inline-block; padding:.625rem 1.25rem; border:1px solid var(--card-line); border-radius:3.75rem; font-size:1rem; color:var(--dim); transition:.2s;}
.dpx .dpx-choices input:checked + .dpx-chip{background:var(--point); border-color:var(--point); color:#04222c; font-weight:700;}
.dpx .dpx-file{padding:2rem; border:1px dashed var(--card-line); border-radius:1rem; color:var(--dim); text-align:center;}
.dpx .dpx-file input{display:block; margin:1rem auto 0; color:var(--dim);}
@media (max-width:1024px){ .dpx .dpx-inq{grid-template-columns:1fr;} .dpx .dpx-inq-side{position:static;} }
@media (max-width:640px){ .dpx .dpx-fgrid{grid-template-columns:1fr;} }

/* ===== 유지보수 접수(maintenance-request) ===== */
.dpx .dpx-imgcard{border:1px solid var(--card-line); border-radius:1.25rem; background:var(--card); overflow:hidden;}
.dpx .dpx-imgcard .rimg{background:#0e1013; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;}
.dpx .dpx-imgcard .rimg img{width:100%; height:100%; object-fit:cover;}
.dpx .dpx-imgcard .body{padding:1.75rem;}
.dpx .dpx-imgcard .rn{font-family:var(--mont); font-size:.8125rem; font-weight:700; letter-spacing:.1em; color:var(--point);}
.dpx .dpx-imgcard h3{margin:.75rem 0 .625rem; font-size:1.25rem; font-weight:700;}
.dpx .dpx-imgcard p{margin:0; color:var(--dim); font-size:1rem; line-height:1.7;}
.dpx .dpx-check{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding:2.5rem 2.75rem; border:1px solid var(--card-line); border-radius:1.5rem; background:var(--card);}
.dpx .dpx-check .cb-h{display:block; font-size:1.25rem; font-weight:800; margin-bottom:1rem;}
.dpx .dpx-check .cb-list span{display:block; color:var(--dim); font-size:1.0625rem; line-height:2;}
.dpx .dpx-check .cb-list span::before{content:"✓ "; color:var(--point); font-weight:800;}
.dpx .dpx-check .cb-mail{color:var(--muted); font-size:.9375rem; margin-bottom:1rem;}
.dpx .dpx-check .cb-mail b{display:block; color:#fff; font-size:1.125rem; margin-top:.25rem;}
.dpx .dpx-annot{margin-bottom:2.5rem;}
.dpx .dpx-annot .at{font-size:1.125rem; font-weight:700; color:var(--point); margin-bottom:1rem;}
.dpx .dpx-annot .wrap-img{position:relative; border:1px solid var(--card-line); border-radius:1rem; overflow:hidden;}
.dpx .dpx-annot .wrap-img img{display:block; width:100%;}
.dpx .dpx-annot .mk{position:absolute; transform:translate(-50%,-50%); width:1.5rem; height:1.5rem; border-radius:50%; background:var(--point); color:#04222c; font-size:.8125rem; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px rgba(42,193,235,.25);}
.dpx .dpx-annot .legend{display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; margin-top:1.25rem;}
.dpx .dpx-annot .legend span{display:flex; align-items:center; gap:.5rem; color:var(--dim); font-size:.9375rem;}
.dpx .dpx-annot .legend i{width:1.25rem; height:1.25rem; border-radius:50%; background:var(--point); color:#04222c; font-size:.75rem; font-weight:800; display:flex; align-items:center; justify-content:center; font-style:normal;}
.dpx .dpx-point{display:flex; gap:1.25rem; align-items:center; margin-top:2rem; padding:1.75rem 2rem; border:1px solid rgba(42,193,235,.4); border-radius:1.25rem; background:rgba(42,193,235,.06);}
.dpx .dpx-point .badge{flex:none; padding:.375rem .875rem; border-radius:3.75rem; background:var(--point); color:#04222c; font-size:.75rem; font-weight:800;}
.dpx .dpx-point p{margin:0; color:var(--dim); font-size:1.0625rem; line-height:1.7;}
.dpx .dpx-notice ul{margin:.75rem 0 0; padding-left:1.25rem; color:var(--dim); font-size:1.0625rem; line-height:1.9;}
@media (max-width:640px){ .dpx .dpx-check{flex-direction:column;} }

/* ===== 기능 상세 행(feat-row) ===== */
.dpx .dpx-featrow{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; margin-top:3.5rem;}
.dpx .dpx-featrow:first-of-type{margin-top:0;}
.dpx .dpx-featrow.rev .dpx-media{order:2;}
.dpx .dpx-featrow .fnum{font-family:var(--mont); font-size:.8125rem; font-weight:700; letter-spacing:.12em; color:var(--point);}
.dpx .dpx-featrow h3{margin:1rem 0 1.25rem; font-size:1.75rem; font-weight:800; line-height:1.3;}
.dpx .dpx-featrow > .txt > p{margin:0; color:var(--dim); font-size:1.125rem; line-height:1.8;}
.dpx a.dpx-card{text-decoration:none; display:block;}
.dpx a.dpx-card::after{content:"↗"; position:absolute; top:2rem; right:2rem; color:var(--point); font-size:1.125rem; opacity:.7;}
@media (max-width:1024px){ .dpx .dpx-featrow{grid-template-columns:1fr; gap:1.75rem;} .dpx .dpx-featrow.rev .dpx-media{order:0;} }

/* 카드 뱃지(무료/유료 등) */
.dpx .dpx-card .s-badge{display:inline-block; margin-bottom:1rem; padding:.375rem .875rem; border-radius:3.75rem; font-size:.75rem; font-weight:800; background:rgba(255,255,255,.08); color:var(--dim);}
.dpx .dpx-card .s-badge.free{background:var(--point); color:#04222c;}

/* ===== 링크 카드 색상 + 한글 줄바꿈 개선 ===== */
/* 링크(a)로 된 카드 제목이 브라우저 기본 링크색(파랑/보라)으로 뜨는 것 방지 */
.dpx a.dpx-card{color:var(--ink);}
.dpx a.dpx-card h3{color:var(--ink);}
.dpx a{color:inherit;}

/* 한글은 어절 단위로 줄바꿈(단어 중간 끊김 방지) */
.dpx h1,.dpx h2,.dpx h3,.dpx h4,.dpx p,.dpx li,.dpx .lead,.dpx .sub,.dpx summary{word-break:keep-all; overflow-wrap:break-word;}

/* 모바일에서는 PC용 강제 줄바꿈(<br>)을 풀어 자연스럽게 흐르게 */
@media (max-width:640px){
  .dpx .dpx-hero h1 br,
  .dpx .sec-head h2 br,
  .dpx .dpx-cta h2 br,
  .dpx .dpx-complete h2 br,
  .dpx .dpx-featrow h3 br,
  .dpx .dpx-sticky h2 br,
  .dpx .dpx-quote br{display:none;}
}