/* ============================================================
   콘텐츠클리닉 3차 · p-service.css — 2F 서비스 4페이지 공통 틀 (담당 B, 4차~)
   서비스별 "만드는 모습"은 p-svc-<slug>.css. 공통 클래스(components.css)는 덮어쓰지 않는다.
   글자 크기: 6단계 변수만. 예외 1곳 = 웹툰 말풍선(.toon-say) — 기본 B, 넘치면 JS가 네 말풍선을 같은 크기로 0.5px씩 줄임(최소 14px), 줄 간격 1.45
   ============================================================ */

/* 서비스 색(번호·진행 막대에만) */
.svc { --svc-color: var(--cc-dept-01); --svc-ink: var(--cc-white); }
.svc[data-service="brand-film"] { --svc-color: var(--cc-dept-02); --svc-ink: var(--cc-navy); }
.svc[data-service="sns-ad"] { --svc-color: var(--cc-dept-03); --svc-ink: var(--cc-navy); }
.svc[data-service="sns-ops"] { --svc-color: var(--cc-dept-04); --svc-ink: var(--cc-white); }

/* ---------------- 1 첫 화면 ----------------
   장면(scenes/svc-<slug>.webp, 2880×1621)을 첫 화면에 꽉 채우고, 글 묶음(작은 줄·제목·설명·가격 띠·버튼)은 가운데 정렬(4차 의장).
   PC(≥1024): 글 묶음을 그림 왼쪽 빈 벽의 가운데에 둔다. 빈 벽 = 그림 왼쪽 끝 ~ 그림 폭의 --wall 비율(서비스마다 잰 값).
     그림은 cover·오른쪽 맞춤이므로 화면에 그려진 그림 폭 --img-w = max(첫 화면 폭, 첫 화면 높이 × 2880/1621)
   1023 이하: 글 → 그림 순서로 쌓고 글 묶음은 화면 가운데. 767 이하: 인물 부분 1:1 판(-mobile, <picture>)
   또는 1:1 판이 위를 자르는 서비스는 원본을 1:1 상자에 위·오른쪽 맞춤(figure[data-crop="top"]). */
.svc-hero { position: relative; padding-bottom: 0; --wall: 0.55; }
.svc[data-service="brand-film"] .svc-hero { --wall: 0.44; }   /* 카메라 41% · 코르크판 46.5% */
.svc[data-service="sns-ad"] .svc-hero { --wall: 0.56; }       /* 휴대폰 판 58% */
.svc[data-service="sns-ops"] .svc-hero { --wall: 0.43; }      /* 캘린더 판 44% */
.svc-hero-grid { display: grid; gap: var(--cc-s6); }
.svc-hero-text { max-width: 640px; margin-inline: auto; text-align: center; }
.svc-hero .svc-band { margin-inline: auto; }
.svc-hero-text .t-l { text-wrap: balance; word-break: keep-all; }
.svc-hero .svc-hero-actions { justify-content: center; }
@media (min-width: 1024px) {
  .svc-hero {
    padding-block: 0; height: calc(100svh - var(--cc-header-h)); min-height: 600px; overflow: hidden;   /* 시안 띠는 4차에서 빠짐 */
    container-type: size;
    --img-w: max(100cqw, 100cqh * 2880 / 1621);
  }
  .svc-hero-grid { height: 100%; align-content: center; }
  .svc-hero-text {
    --wall-r: calc(100cqw - (1 - var(--wall)) * var(--img-w));
    position: absolute; z-index: 1; top: 50%; left: calc(var(--wall-r) / 2);
    width: min(600px, calc(var(--wall-r) - var(--cc-gutter) * 2)); max-width: none; margin: 0;
    transform: translate(-50%, -50%);
  }
}
.svc-band {
  display: grid; grid-template-columns: 1fr 1fr; max-width: 440px; margin: 0;
}
.svc-band-cell {
  display: grid; justify-items: center; align-content: center; gap: var(--cc-s1);
  padding: var(--cc-s4) var(--cc-s4); text-align: center;
}
.svc-band-cell + .svc-band-cell { border-left: 1px solid var(--cc-line); padding-left: calc(var(--cc-s4) - 1px); }
.svc-band-cell dd { margin: 0; }
/* 따로 맡길 때 값(줄 그음) + 패키지가: 리뉴얼 첫 화면·처방전·견적기·다른 진료과 문 */
.svc-was, .est-was, .svc-door-info s { color: var(--cc-navy-soft); text-decoration-thickness: 1.5px; font-weight: var(--cc-w-body); }
.svc-band-cell dd > .svc-was { display: block; }
.svc-hero-actions { margin-top: var(--cc-s5); }
.svc-hero-media { position: relative; margin: 0 calc(var(--cc-gutter) * -1); overflow: hidden; }
.svc-hero-media img, .svc-hero-media > video { display: block; width: 100%; height: auto; }
@media (max-width: 767px) {
  .svc-hero-media[data-crop="top"] img { aspect-ratio: 1; object-fit: cover; object-position: 100% 0; }
}
@media (min-width: 1024px) {
  .svc-hero-media { position: absolute; inset: 0; z-index: 0; margin: 0; }
  .svc-hero-media picture { display: contents; }
  .svc-hero-media img, .svc-hero-media > video { height: 100%; object-fit: cover; object-position: right center; }
}
/* 그림 위 글(간판 등): .svc-hero-over = 화면에 그려진 그림과 같은 상자. 안의 글은 그림 기준 %(--x --y --w --h)로 놓고 칸 정가운데 */
.svc-hero-over { position: absolute; inset: 0; pointer-events: none; }
@media (max-width: 767px) {
  .svc-hero-media[data-crop="top"] .svc-hero-over { inset: 0 0 auto auto; height: 100%; width: auto; aspect-ratio: 2880 / 1621; }
}
@media (min-width: 1024px) {
  .svc-hero-over { inset: 50% 0 auto auto; width: var(--img-w); height: auto; aspect-ratio: 2880 / 1621; transform: translateY(-50%); }
}
.svc-sign {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap;
  color: var(--cc-white); font-family: var(--cc-font-head); font-weight: var(--cc-w-head); letter-spacing: var(--cc-track-head);
  font-size: var(--cc-fs-h3); line-height: var(--cc-lh-h3);
}
@media (min-width: 1024px) { .svc-sign { font-size: var(--cc-fs-h2); line-height: var(--cc-lh-h2); } }

/* ---------------- 2 이런 분께: 4컷 웹툰 ----------------
   HTML: figure.toon[data-toon] > img.toon-src + ol.toon-lines(4줄)
   JS(p-service.js)가 컷 4칸(.toon-cut)을 만들고 말풍선 좌표(webtoon-balloons.json)를 컷 기준 %로 바꿔 얹는다.
   JS가 없으면 원래 그림 + 글 목록이 그대로 보인다.
   PC(≥1024) 컷 4칸 한 줄 · 태블릿 2×2 · 모바일 가로로 넘기는 띠 */
.toon { margin: 0; }
.toon-src { width: 100%; max-width: 720px; margin-inline: auto; }
.svc .toon-lines { margin: var(--cc-s4) auto 0; max-width: 720px; padding-left: var(--cc-s5); }
.toon.is-built .toon-src, .toon.is-built .toon-lines { display: none; }
.toon-strip { display: grid; gap: var(--cc-s4); }
@media (min-width: 1024px) { .toon-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 1023px) { .toon-strip { grid-template-columns: 1fr 1fr; gap: var(--cc-s3); max-width: 720px; margin-inline: auto; } }
@media (max-width: 599px) {
  .toon-strip {
    /* 한 컷 = 화면 폭 86%, 가운데 맞춤 → 앞뒤 컷이 7%씩 보여 넘길 수 있다는 게 보임 */
    display: flex; gap: var(--cc-s2); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--cc-gutter) * -1); padding-inline: 7vw;
    scrollbar-width: none;
  }
  .toon-strip::-webkit-scrollbar { display: none; }
  .toon-cut { flex: 0 0 86vw; scroll-snap-align: center; }
}
/* 모바일 띠 아래 점 4개(현재 컷 = 로즈, 누르면 그 컷으로) */
.toon-dots { display: flex; justify-content: center; margin-top: var(--cc-s2); }
@media (min-width: 600px) { .toon-dots { display: none; } }
.toon-dot {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 44px; padding: 0; border: 0; background: none;
}
.toon-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cc-navy-08); transition: background-color var(--cc-dur) var(--cc-ease), transform var(--cc-dur) var(--cc-ease); }
.toon-dot[aria-current="true"]::before { background: var(--cc-rose); transform: scale(1.25); }
.toon-cut { position: relative; margin: 0; aspect-ratio: 2 / 3; overflow: hidden; container-type: inline-size; }
.toon-cut > img {                  /* 원본 1장을 200%로 놓고 컷 하나만 보이게(비율 그대로) */
  position: absolute; width: 200%; height: 200%; max-width: none;
  left: calc(var(--col, 0) * -100%); top: calc(var(--row, 0) * -100%);
}
.toon-say {
  position: absolute; z-index: 1;
  left: var(--x, 8%); top: var(--y, 8%); width: var(--w, 84%); height: var(--h, 16%);
  display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;
  text-align: center; color: var(--cc-navy); word-break: keep-all;
  font-family: var(--cc-font-body); font-weight: var(--cc-w-strong);
  font-size: var(--cc-fs-b); line-height: 1.35;   /* 기본 B(17/16px). 넘치면 JS가 네 말풍선을 같은 크기로 줄임(최소 14px) */
  overflow-wrap: normal; hyphens: none;
}
/* 상자 = 말풍선 몸통 안쪽(꼬리·테두리·여백 뺀 사각형, r5 실측). 줄은 고르게 나눠 가운데 */
.toon-say > span { display: block; max-width: 100%; text-wrap: balance; }

/* 증상 3개: 짧은 안내 카드(가운데) */
.svc .svc-symptoms { display: grid; gap: var(--cc-s4); margin-top: var(--cc-s6); }
@media (min-width: 600px) { .svc-symptoms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .svc .svc-symptoms { gap: var(--cc-s5); margin-top: var(--cc-s7); } }
/* 증상 번호는 공통 .num.num--sm(네이비) 그대로. 십자 아이콘은 쓰지 않는다(십자는 닥터 큐 가슴 배지 한 곳만) */

/* ---------------- 3 처방전 ---------------- */
.svc-rx-slot { max-width: 560px; margin-inline: auto; }
.svc-rx .rx-cue > span { text-wrap: pretty; }
.svc .svc-checks { display: grid; gap: var(--cc-s2); padding: var(--cc-s3) 0 var(--cc-s4); border-bottom: 1px dashed var(--cc-line); }
.svc-checks > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--cc-s3); align-items: start; }
.svc-checks > li::before {
  content: ""; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--cc-navy) center / 14px 14px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.svc-more { border-bottom: 1px dashed var(--cc-line); }
.svc-more > summary { list-style: none; }
.svc-more > summary::-webkit-details-marker { display: none; }
.svc-more-btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cc-s3);
  min-height: 52px; cursor: pointer; font-weight: var(--cc-w-strong); color: var(--cc-navy);
}
.svc-more-btn > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.svc-more-caret {
  flex: none; width: 12px; height: 12px; border-right: 2px solid var(--cc-navy); border-bottom: 2px solid var(--cc-navy);
  transform: translateY(-3px) rotate(45deg); transition: transform var(--cc-dur) var(--cc-ease);
}
.svc-more[open] .svc-more-caret { transform: translateY(3px) rotate(-135deg); }
.svc-groups { margin: 0; padding-bottom: var(--cc-s3); }
.svc-groups > div { display: grid; gap: var(--cc-s1); padding: var(--cc-s3) 0; }
.svc-groups > div + div { border-top: 1px solid var(--cc-navy-04); padding-top: calc(var(--cc-s3) - 1px); }
.svc-groups dt { color: var(--cc-navy-soft); }
.svc-groups dd { margin: 0; }
@media (min-width: 600px) { .svc-groups > div { grid-template-columns: 88px minmax(0, 1fr); gap: var(--cc-s4); align-items: baseline; } }
.svc-out { display: grid; gap: var(--cc-s1); margin: var(--cc-s4) 0 var(--cc-s2); padding: var(--cc-s3) var(--cc-s4); border-radius: var(--cc-r-control); background: var(--cc-navy-04); }

/* ---------------- 4 만드는 모습: 진행 표시(공통 장치) ----------------
   HTML: ol.svc-steps[data-steps] > li.svc-step > span.svc-step-no + .svc-step-text + .svc-step-media
   JS(p-service.js)가 하는 일
   - 모바일·태블릿: 칸마다 번호 + 왼쪽 세로 막대. 스크롤로 지나온 칸까지 막대가 차오르고 번호가 서비스 색으로 켜짐
   - PC(≥1024): 왼쪽에 1~N 목록(.svc-steps-nav, 글 복제)을 화면에 따라다니게 두고, 오른쪽은 작업물만
   - JS가 없거나 움직임을 끄면 모두 켜진 모습 */
.svc-steps { position: relative; display: grid; gap: var(--cc-s7); --rail-x: 20px; }
.svc-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--cc-s4); row-gap: var(--cc-s4); align-items: start; }
.svc-step-no {
  position: relative; z-index: 1; grid-column: 1; grid-row: 1;
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding-top: 1px; border-radius: 50%;
  background: var(--svc-color); color: var(--svc-ink); font-variant-numeric: tabular-nums;
  transition: background-color 300ms var(--cc-ease), color 300ms var(--cc-ease), box-shadow 300ms var(--cc-ease);
}
.svc-step-text { grid-column: 2; grid-row: 1; display: grid; gap: var(--cc-s2); align-self: center; }
.svc-step-text > .t-h3 { transition: color 300ms var(--cc-ease); }
.svc-step-media { grid-column: 2; grid-row: 2; min-width: 0; }
.svc-steps-rail, .svc-steps-fill {
  position: absolute; left: calc(var(--rail-x) - 1px); top: var(--rail-top, 20px); width: 2px; border-radius: 2px; pointer-events: none;
}
.svc-steps-rail { height: var(--rail-h, 0px); background: var(--cc-line); }
.svc-steps-fill { height: var(--fill, var(--rail-h, 0px)); background: var(--svc-color); }
.is-live .svc-step:not(.is-on) .svc-step-no { background: var(--cc-white); color: var(--cc-navy-soft); box-shadow: inset 0 0 0 2px var(--cc-line); }
.is-live .svc-step.is-now .svc-step-no { box-shadow: 0 0 0 6px var(--cc-navy-08); }
.is-live .svc-step:not(.is-on) .svc-step-text > .t-h3 { color: var(--cc-navy-soft); }
.svc-steps-nav { display: none; }
/* 기기 아래 단계 번호·제목(PC에서만, JS가 붙임 — 모바일은 칸 위에 같은 글이 이미 있음) */
.svc-step-label { display: none; margin-top: var(--cc-s4); text-align: center; }
.svc-step-label + .frame-cap { margin-top: var(--cc-s1); }
@media (min-width: 1024px) {
  .svc-steps-wrap.has-nav { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--cc-s7); align-items: start; }
  .has-nav > .svc-steps-nav {
    position: sticky; top: calc(var(--cc-header-h) + var(--cc-s8)); display: grid; gap: var(--cc-s6); --rail-x: 20px;
  }
  .has-nav > .svc-steps-nav > .svc-step { grid-template-columns: 40px minmax(0, 1fr); align-items: center; }
  .has-nav > .svc-steps { gap: var(--cc-s8); }
  .has-nav > .svc-steps > .svc-step { grid-template-columns: minmax(0, 1fr); align-items: center; }
  .has-nav .svc-step-label, .has-stage .svc-step-label { display: block; }
  .has-nav > .svc-steps > .svc-step > .svc-step-no,
  .has-nav > .svc-steps > .svc-step > .svc-step-text,
  .has-nav > .svc-steps > .svc-steps-rail,
  .has-nav > .svc-steps > .svc-steps-fill { display: none; }
  .has-nav > .svc-steps > .svc-step > .svc-step-media { grid-column: 1; grid-row: 1; }
}
/* PC 기본(stage): 왼쪽 단계 글 블록(약 50vh)이 스크롤되고, 오른쪽 기기 하나가 따라 붙어 현재 단계 그림으로 바뀜 */
.svc-stage-col { display: none; }
@media (min-width: 1024px) {
  .svc-steps-wrap.has-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--cc-s7); }
  .has-stage > .svc-steps { gap: 0; }
  .has-stage > .svc-steps > .svc-step { grid-template-columns: 40px minmax(0, 1fr); min-height: 50vh; align-content: center; align-items: center; }
  .has-stage > .svc-steps > .svc-step > .svc-step-media { display: none; }
  .has-stage > .svc-stage-col { display: block; }
  .svc-stage {
    --stage-h: min(600px, calc(100vh - var(--cc-header-h) - var(--cc-s7)));
    position: sticky; top: calc(var(--cc-header-h) + (100vh - var(--cc-header-h) - var(--stage-h)) / 2); height: var(--stage-h);
  }
  .svc-stage-slide {
    position: absolute; inset: 0; display: grid; align-content: center;
    opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.985);
    transition: opacity 450ms var(--cc-ease), transform 450ms var(--cc-ease), visibility 0s linear 450ms;
  }
  .svc-stage-slide.is-cur { opacity: 1; visibility: visible; transform: none; transition: opacity 450ms var(--cc-ease), transform 450ms var(--cc-ease), visibility 0s; }
  .svc-stage-slide > .svc-step-media { grid-column: 1; grid-row: 1; min-width: 0; }
}

/* 가로 16:9 영상을 노트북 틀(16:10)에 자르지 않고 넣는 화면 */
.svc-screen169 {
  display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: inherit; overflow: hidden; background: var(--cc-navy-deep);
}
.svc-screen169 > video, .svc-screen169 > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* 세로 게시물(카드·웹툰)을 휴대폰 화면 안에 자르지 않고 넣는 화면 */
.svc-post { display: grid; place-items: center; aspect-ratio: 9 / 16; border-radius: inherit; overflow: hidden; background: var(--cc-white); }
.svc-post > img { display: block; width: 100%; height: auto; }
/* 모바일 캡처는 위(로고·머리줄)부터 보이게 */
.svc-shot-top { object-position: top center; }

/* ---------------- 5 레퍼런스 ---------------- */
.svc-refs { display: grid; gap: var(--cc-s6); }
.svc-ref { display: grid; gap: var(--cc-s3); align-content: start; color: inherit; text-decoration: none; text-align: center; border-radius: var(--cc-r-card); }
.svc-ref-cap { display: grid; gap: var(--cc-s1); justify-items: center; }
.svc-ref .frame-laptop, .svc-ref .frame-phone { transition: transform 300ms var(--cc-ease); }
@media (hover: hover) { .svc-ref:hover .frame-laptop, .svc-ref:hover .frame-phone { transform: translateY(-4px); } }
.svc-ref:focus-visible { outline: 3px solid var(--cc-navy); outline-offset: 6px; }
@media (min-width: 768px) {
  .svc-refs--wide { grid-template-columns: minmax(0, 2.45fr) minmax(0, 1fr); align-items: center; column-gap: var(--cc-s6); row-gap: var(--cc-s5); }
  .svc-refs--wide > .svc-ref:first-child { grid-row: span 2; }
  .svc-refs--tall { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); align-items: end; }
}
@media (max-width: 767px) {
  .svc-refs--tall { grid-template-columns: 1fr 1fr; }
  .svc-refs--tall > .svc-ref:first-child { grid-column: 1 / -1; }
}
.svc-refs-more { margin-top: var(--cc-s6); }
.svc-ref-modal-grid { display: grid; gap: var(--cc-s5); align-items: center; }
@media (min-width: 768px) { .svc-ref-modal-grid--site { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } }
.svc-ref-modal-meta { margin-top: var(--cc-s4); text-align: center; }
.svc-ref-foot { justify-content: space-between; align-items: center; gap: var(--cc-s4); }

/* ---------------- 6 견적 처방기 보탬(4차) ----------------
   처방전 안 고른 항목별 금액 줄(.est-items), 리뉴얼 쪽이 낫다는 안내(.est-deal) */
.est-items { display: grid; gap: var(--cc-s2); }
.est-items:empty { display: none; }
.est-items .rx-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.est-items .rx-row > dt { display: grid; gap: 2px; white-space: normal; }
.est-item-name { color: var(--cc-navy); }
.est-item-sub { font-weight: var(--cc-w-body); }
.est-items .rx-row > dd { white-space: nowrap; font-variant-numeric: tabular-nums; }
.est-items .est-was { display: block; }
.est-deal { display: grid; justify-items: start; gap: var(--cc-s1); }
.est-deal > p { margin: 0; }
.est-deal > button { padding: 0; border: 0; background: none; cursor: pointer; min-height: 44px; }

/* ---------------- 8 다른 진료과 ---------------- */
.svc-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cc-s3); max-width: 960px; margin-inline: auto; }
@media (min-width: 768px) { .svc-doors { gap: var(--cc-s6); } }
.svc-door-row { display: grid; gap: var(--cc-s3); }
.svc-door-info { display: grid; justify-items: center; gap: var(--cc-s1); text-align: center; }
@media (max-width: 599px) {   /* 모바일: 문 그림 위 · 글 아래, 가운데로 한 줄에 하나 */
  .svc-doors { grid-template-columns: minmax(0, 1fr); gap: var(--cc-s6); max-width: 220px; }
}
.svc-door-no { color: var(--cc-white); }
@media (max-width: 599px) { .svc-door-no { display: none; } }
.svc-lift {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--cc-s4) var(--cc-s5);
  margin-top: var(--cc-s7);
}
.svc-lift-panel {
  display: inline-flex; align-items: center; gap: var(--cc-s3); height: 52px; padding: 0 var(--cc-s4);
  border-radius: var(--cc-r-control); background: var(--cc-navy-deep); color: var(--cc-white);
}
.svc-lift-floor { color: var(--cc-rose-tint); }
.svc-lift-arrow { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid var(--cc-rose-tint); }
.svc-band-cell dd > .svc-unit { display: block; }