/* 서비스 목록 · 상세 — metic /services 실측(그림 · 글 · 가격 · 화살표 네 칸) */
:root{--sv-ill:clamp(120px,13vw,190px)}

/* 선 그림 — 먹 선 · 옅은 빨간 안내선 · 빨간 점 하나 */
.ig{width:100%;height:auto;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ig__g{stroke:var(--pt);stroke-width:.6;opacity:.45}
.ig__k{stroke:var(--ink);stroke-width:1.4}
.ig__k circle[r="1.6"]{fill:var(--ink);stroke:none}
.ig__r{fill:var(--pt)}
.ig__rl{stroke:var(--pt);stroke-width:1.2}
.ig__w{stroke:#fff;stroke-width:1.6}

/* 목록 줄 */
.sv:first-child{border-top:1px solid var(--line2)}
.sv{display:grid;grid-template-columns:var(--sv-ill) minmax(0,1fr) minmax(0,200px) 44px;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(36px,4.4vw,60px) 0;border-bottom:1px solid var(--line2)}
.sv__txt{display:flex;flex-direction:column}
.sv__n{color:var(--steel)}
.sv__name{margin-top:10px;font-size:clamp(2rem,3.4vw,3.1rem);font-weight:700;letter-spacing:-.05em;line-height:var(--lh-d);transition:color .3s}
.sv__tag{margin-top:10px;font-size:var(--lead);color:var(--ink2)}
.sv__desc{margin-top:14px;font-size:14.5px;line-height:var(--lh-b);color:var(--ink2);max-width:34em}
.sv__meta{display:grid;gap:18px;font-size:16px;font-weight:500}
.sv__meta em{display:block;margin-bottom:4px;font-style:normal;font-size:10.5px;color:var(--steel)}
.sv__go{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line2);border-radius:50%;transition:background .3s,color .3s,rotate .5s var(--ease)}
.sv__go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.1}
.sv:hover .sv__name{color:var(--pt)}
.sv:hover .sv__go{background:var(--ink);color:var(--paper);rotate:45deg}
.svl__note{padding:22px 0;color:var(--steel)}

/* 묶음 카드 — 넷 중 하나는 먹색 */
.pks,.pls{padding-top:var(--sub-gap)}
.pks__head p{margin-top:18px;color:var(--ink2);max-width:28em}
.pks__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(2rem,4vw,3rem)}
.pk{display:flex;flex-direction:column;padding:clamp(24px,2.6vw,36px);border:1px solid var(--line2);border-radius:var(--r);background:var(--paper2)}
.pk h3{font-size:clamp(1.4rem,2vw,1.75rem);font-weight:700;letter-spacing:-.04em}
.pk__for{margin-top:8px;font-size:14px;color:var(--ink2)}
.pk ul{display:grid;gap:8px;margin:26px 0 34px;font-size:14px}
.pk li{position:relative;padding-left:20px}
.pk li::before{content:"";position:absolute;left:0;top:.8em;width:9px;height:1px;background:var(--pt)}
.pk__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:auto;padding-top:22px;border-top:1px solid var(--line2)}
.pk__foot b{display:block;font-size:clamp(1.5rem,2.2vw,2rem);font-weight:700;letter-spacing:-.04em}
.pk__foot .mono{display:block;margin-top:4px;font-size:10.5px;color:var(--steel)}
.pk__go{display:inline-flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;border:1px solid var(--line2);border-radius:var(--pill);font-size:13px;font-weight:500;white-space:nowrap}
.pk__go i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper)}
.pk__go svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.1}
.pk--dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pk--dark .pk__for,.pk--dark .pk__foot .mono{color:#f4f4f2a6}
.pk--dark .pk__foot{border-color:#f4f4f226}
.pk--dark .pk__go{border-color:#f4f4f233}.pk--dark .pk__go i{background:var(--pt);color:#fff}

/* 상세 머리 — 왼쪽 글 · 오른쪽 격자 스케치 */
.sd{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);padding-top:calc(var(--nav) + clamp(3rem,6vw,5rem))}
.sd__h{font-size:var(--ph-h);font-weight:700;letter-spacing:-.05em;line-height:1.15}
.sd__tag{margin-top:14px;font-size:var(--lead);color:var(--ink2)}
.sd__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:clamp(2rem,4vw,3rem)}
.sd__meta>div{padding:12px 0 14px;border-top:1px solid var(--line2)}
.sd__meta dt{font-size:10.5px;color:var(--steel);margin-bottom:4px}
.sd__meta dd{font-size:17px;font-weight:600;letter-spacing:-.02em}
.sd__note{margin-top:8px;font-size:11px;line-height:1.6;color:var(--steel);max-width:36em}
.sd__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.sd__sk{position:relative;align-self:start;display:grid;place-items:center;aspect-ratio:1;padding:7%;border:1px solid var(--line2);border-radius:4px;
  background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/24px 24px,var(--paper)}
.sd__sk>.mono{position:absolute;left:14px;top:12px;color:var(--steel)}
.sd__sk::before{content:"";position:absolute;left:12px;top:30px;width:10px;height:10px;border:solid var(--pt);border-width:1px 0 0 1px}
.sd__sc{position:absolute;right:14px;bottom:12px;left:auto!important;top:auto!important}
.ig--big .ig__k{stroke-width:1}

/* 어떤 일인가요 — 글 + 큰 사진 */
.sa{display:grid;grid-template-columns:minmax(0,5.5fr) minmax(0,6.5fr);gap:clamp(32px,5vw,80px);padding-top:var(--sub-gap)}
.sa .prose{margin-top:26px}
.sa__img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}

/* 받으시는 것 · 진행 순서 */
.gw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,80px);padding-top:var(--sub-gap)}
.gw ol{margin-top:22px}
.gw__get li{display:flex;gap:18px;padding:14px 0;border-top:1px solid var(--line2);font-size:15.5px}
.gw__get .mono,.gw__steps .mono{color:var(--steel);padding-top:.25em}
.gw__steps{position:relative;padding-left:22px;border-left:1px solid var(--line2)}
.gw__steps li{position:relative;padding:0 0 26px}
.gw__steps li::before{content:"";position:absolute;left:-26.5px;top:.45em;width:8px;height:8px;border-radius:50%;background:var(--pt)}
.gw__steps b{display:block;margin-top:4px;font-size:17px;letter-spacing:-.02em}
.gw__steps p{margin-top:4px;font-size:14.5px;color:var(--ink2);line-height:var(--lh-b)}

/* 관련 작업 */
.rws{padding-top:var(--sub-gap)}
.rws__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,36px);margin-top:clamp(2rem,4vw,3rem)}
.rw__img{display:block;overflow:hidden;border:1px solid var(--line2);border-radius:var(--r)}
.rw__img img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;transition:scale .8s var(--ease)}
.rw:hover .rw__img img{scale:1.03}
.rw--food .rw__img img{object-position:50% 50%}
.rws__head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.rw__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px}
.rw__row b{font-size:18px;letter-spacing:-.03em}
.rw__row em{font-style:normal;color:var(--steel)}
.rw__c{display:block;margin-top:2px;font-size:13px;color:var(--steel)}

@media (max-width:900px){
  .sv{grid-template-columns:72px minmax(0,1fr);gap:16px 20px;align-items:start}
  .sv__meta{grid-column:2;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv__go{display:none}
  .pks__grid,.sd,.sa,.gw,.rws__grid{grid-template-columns:1fr}
  .pk__foot{flex-wrap:wrap}.pk__foot .mono{white-space:nowrap}
  .sd__sk{width:min(100%,360px)}
  .sa__img img{aspect-ratio:4/3}
}

/* 본문 끝 작은 각주 — 눈에 띄지 않게 */
.prose .fn{margin-left:.35em;font-size:12px;color:var(--steel);white-space:nowrap}