/* =========================================================
   CANSPLEX Design System v1.0 — 운영 사이트 덮어쓰기 레이어
   - 운영 CSS(contact-dock-*.css, main-*.css) "다음에" 로드한다.
   - 원칙: 레이아웃·배경(검정/회색 리듬)·이미지·영상·모션 연출은 건드리지 않는다.
           가이드의 색 토큰, 타이포 위계, 버튼/GNB/LNB/태그 상태, 최소 글자 크기,
           터치 영역, 포커스, 앵커 위치만 바꾼다.
   - 근거: CANSPLEX_Figma_Design_System_Guide_v1.0.md (§ 표기)
   ========================================================= */

/* ---------- 1. 토큰 (§2, §4, §5) ---------- */
:root {
  --nav: 88px;              /* 헤더(GNB) 높이 2배 (운영 44px, 사용자 요청 2026-10-16) — 본문 시작·앵커 위치·모바일 메뉴 위치가 이 값을 따라감 */
  /* 운영 변수 재정의 — 이 변수를 쓰는 규칙은 자동으로 가이드 색이 된다 */
  --blue: #154AE8;          /* color/action/primary/default (기존 #0071e3) */
  --blue-hover: #3269FF;    /* color/action/primary/hover   (기존 #0077ed) */
  --accent: #87ADFF;        /* 어두운 배경 위 강조 글자 — #154AE8 은 검정 위 3.1:1 로 미달, #87ADFF 는 9:1 이상 (기존 #2997ff) */

  --ds-blue: #154AE8;
  --ds-blue-hover: #3269FF;
  --ds-blue-pressed: #0B338F;
  --ds-blue-soft: #EAF1FF;
  --ds-on-dark-blue: #87ADFF;
  --ds-focus: #87ADFF;
  --ds-disabled-bg: #E2E7F0;
  --ds-disabled-text: #8290A3;
  --ds-ease: cubic-bezier(.2, .8, .2, 1);

}

/* ---------- 2. 하드코딩된 기존 블루 → 가이드 블루 ----------
   밝은 배경 위 글자/채움: #0071e3 → #154AE8
   어두운 배경 위 글자: #2997ff → #87ADFF
   어두운 배경 위 장식(바·게이지·글로우): #2997ff → #3269FF                     */
.plus,
.compete-table .head .ours,
.contact-submit,
.contact-option:has(input:checked) .contact-option-check { background: var(--ds-blue); }
.proof-number.is-on .count,
.contact-fields-heading b,
.contact-field label > span,
.contact-success-icon,
.contact-success-eyebrow,
.svc-contact-link { color: var(--ds-blue); }
.contact-option:has(input:checked) { border-color: var(--ds-blue); color: var(--ds-blue-pressed); background: var(--ds-blue-soft); }
.contact-option:has(input:checked) .contact-option-check { border-color: var(--ds-blue); }
.contact-success-icon { background: var(--ds-blue-soft); }
.contact-field input:focus,
.contact-field textarea:focus { border-color: var(--ds-blue); box-shadow: 0 0 0 3px var(--ds-focus); }
@media (max-width: 800px) { .mobile-contact-bar a { background: var(--ds-blue); } }

.proof-hero-kicker,
.contact-eyebrow { color: var(--ds-on-dark-blue); }
.proof-hero-meter i,
.process-meter i { background: var(--ds-blue-hover); }
.roadmap i { background: linear-gradient(90deg, var(--ds-blue), var(--ds-on-dark-blue)); }
.interview-case-grid article { border-top-color: var(--ds-blue-hover); }
.proof-number.is-on { border-color: rgba(50, 105, 255, .35); }
.method-services-track a:hover { background: rgba(50, 105, 255, .16); border-color: rgba(135, 173, 255, .45); }
.work-viewer-close:hover { background: var(--ds-blue); }
.samples-light .samples-intro:after { background: var(--ds-blue); }
.service-page { --svc-blue: var(--ds-blue-hover); }
.service-page .svc-chapter h2:after { box-shadow: 0 0 20px rgba(50, 105, 255, .8); }
.service-page .svc-card .svc-num { border-color: rgba(135, 173, 255, .35); background: rgba(50, 105, 255, .14); color: var(--ds-on-dark-blue); }

/* 서비스 페이지는 실제로 흰 배경(body.service-page => #fff) — 강조 글자는 진한 블루
   (원본 #2997ff 도 흰 배경 위 2.9:1, 보라 #8b7cff·민트 #57d6c1 번호도 미달이었음.
    제목 아래 보라·민트 장식 바는 글자가 아니므로 유지) */
.service-page { --accent: var(--ds-blue); }
.service-page .svc-catalog em,
.service-page .svc-catalog a:nth-child(3n+2) em,
.service-page .svc-catalog a:nth-child(3n) em { color: var(--ds-blue); }
.service-page .svc-card .svc-num { color: var(--ds-blue); background: var(--ds-blue-soft); border-color: rgba(21, 74, 232, .25); }

/* 밝은 섹션의 강조 글자는 진한 블루로 (#87ADFF 는 밝은 배경 위 2.2:1 로 미달) */
.theme-alt .kicker,
.samples-light .kicker,
.highlights .kicker,
.theme-alt .hero-brand,
.theme-alt .popup-kicker { color: var(--ds-blue); }

/* ---------- 3. 헤더 · 이 페이지 목차 · 상담 버튼 (2026-10-16) ----------
   구조: [GNB 검정 바 88px] → [정보 띠] → 본문      (페이지 바 localnav 는 사용자 요청으로 삭제)
     GNB = 사이트 전체 메뉴 — 메뉴 16px, 지금 있는 메뉴는 굵게 + 파란 밑줄, 모바일 전체 메뉴에 "전체 메뉴" 라벨
     이 페이지 목차 = 화면 오른쪽 가운데 고정, 항목 전부 펼침, 지금 보는 섹션 표시 (메인, 1024px 이상)
     상담 문의 = 화면 오른쪽 아래 고정 버튼 (801px 이상. 그 아래는 운영의 하단 상담 바가 같은 역할)
     정보 띠(NEWS·18 YEARS…) = 클릭되지 않는 안내 (제거는 D4 승인 대기) */

/* --- GNB (전체 메뉴) --- */
.global-links { gap: 24px; font-size: 16px; }
.global-links a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; letter-spacing: -.01em;
}
.global-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 1px;
  background: var(--ds-on-dark-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 180ms var(--ds-ease);
}
@media (hover: hover) and (pointer: fine) { .global-links a:hover::after { transform: scaleX(1); } }
.global-links a[aria-current] { font-weight: 700; }
.global-links a[aria-current]::after { transform: scaleX(1); }
.service-page .global-links a::after { background: var(--ds-blue); }
.service-page .global-links a[aria-current] { color: var(--ds-blue); }
.globalnav .logo { font-size: 19.2px; font-weight: 800; }   /* 16px 의 120% (사용자 요청 2026-10-16) */
.global-links a:focus-visible { outline-offset: 2px; border-radius: 4px; }
/* 오른쪽 글자 링크 "FAQ ｜ 상담문의" (아이콘 대신, 사용자 요청 2026-10-16) — GNB 링크와 같은 16px, 누르는 높이 44px */
.global-tools { gap: 4px; }
.tool-link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
  font-size: 16px; font-weight: 600; color: #fff; white-space: nowrap;
}
.tool-link::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 2px; border-radius: 1px;
  background: var(--ds-on-dark-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 180ms var(--ds-ease);
}
@media (hover: hover) and (pointer: fine) { .tool-link:hover::after { transform: scaleX(1); } }
.tool-link:focus-visible { outline-offset: 2px; border-radius: 4px; }
.tool-sep { color: rgba(255, 255, 255, .4); font-size: 14px; user-select: none; }
.service-page .tool-link { color: #333d4b; }
.service-page .tool-link::after { background: var(--ds-blue); }
.service-page .tool-sep { color: rgba(51, 61, 75, .35); }
.global-tools .menu-toggle { margin-left: 4px; }
@media (max-width: 374px) { .tool-link { font-size: 14px; padding: 0 4px; } }   /* 아주 좁은 폰에서 로고·메뉴 버튼과 겹치지 않게 */
/* 아이콘 버튼(메뉴 열기): 보이는 원은 32px 그대로, 누르는 영역만 44px (§6.2) */
.icon-btn { position: relative; }
.icon-btn::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }

/* 모바일 전체 메뉴 화면 */
.mobile-panel.is-open::before {
  content: "전체 메뉴"; display: block; margin-bottom: 8px;
  font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--ds-on-dark-blue);
}
.service-page .mobile-panel.is-open::before { color: var(--ds-blue); }
@media (max-width: 980px) {
  .mobile-panel a { min-height: 56px; display: flex; align-items: center; }
  .mobile-panel a[aria-current] { color: var(--ds-on-dark-blue); }
  .service-page .mobile-panel a[aria-current] { color: var(--ds-blue); }
}

/* --- 정보 띠 (클릭 안 되는 안내) --- */
.ribbon { font-size: 14px; letter-spacing: .04em; color: rgba(255, 255, 255, .72); cursor: default; }
@media (max-width: 767px) {
  .ribbon { padding: 10px 16px; letter-spacing: 0; line-height: 1.5; }   /* 14px 로 키워 한 줄에 안 들어가면 잘리지 않고 두 줄로 */
  .ribbon span { padding: 0 3px; }
}

/* 페이지 바가 빠진 자리: 서비스 페이지는 페이지 바(52px)가 본문을 밀고 있었으므로 같은 높이만큼 위 여백 유지 */
.service-page main { padding-top: var(--nav); }   /* 2026-10-19: 페이지 바 자리(52px)만큼 남아 있던 헤더 아래 공백 제거 (사용자 요청) */
html, body { overflow-x: clip; }   /* 가로 넘침 방지는 그대로, 고정·스티키 요소가 정상 동작하도록 hidden 대신 clip */

/* --- 이 페이지 목차 (오른쪽 가운데 고정, 전부 펼침) --- */
.page-toc {
  position: fixed; right: 12px; top: 50%; z-index: 60; transform: translateY(-50%);
  width: 140px; padding: 8px 6px;
  transition: opacity 220ms var(--ds-ease), visibility 220ms;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px;
  background: rgba(29, 29, 31, .8); box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
/* 제목("이 페이지 목차")은 화면에서 빼고 화면낭독기용 이름(aria-label)으로만 둠 (2026-10-16 사용자 요청) */
.page-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.page-toc a {
  position: relative; display: flex; align-items: center; min-height: 36px; padding: 0 10px 0 22px;
  border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.3; color: rgba(245, 245, 247, .8);
  transition: background-color 180ms var(--ds-ease), color 180ms var(--ds-ease);
}
.page-toc a::before {                               /* 지금 보는 섹션 = 왼쪽 파란 동그라미 + 블루 배경 + Bold (§7.3 복합 신호) */
  content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: transparent;
  transition: background-color 180ms var(--ds-ease), transform 180ms var(--ds-ease);
}
@media (hover: hover) and (pointer: fine) { .page-toc a:hover { background: rgba(255, 255, 255, .08); color: #fff; } }
.page-toc a[aria-current] { color: #fff; font-weight: 700; background: rgba(135, 173, 255, .16); }
.page-toc a[aria-current]::before { background: var(--ds-on-dark-blue); }
.page-toc a:focus-visible { outline-offset: -3px; }
.page-toc.is-hidden { opacity: 0; visibility: hidden; }   /* 문의 폼이 화면에 있을 때 폼을 가리지 않도록 */
@media (max-width: 1023px), (max-height: 560px) { .page-toc { display: none; } }   /* 좁거나 낮은 화면에서는 본문을 가리므로 숨김 */

/* --- 상담 문의 (오른쪽 아래 고정) --- */
.float-cta {
  position: fixed; right: 24px; bottom: 24px; z-index: 61;
  display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 26px;
  border-radius: 999px; background: var(--ds-blue); color: #fff;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 10px 28px rgba(21, 74, 232, .35);
  transition: background-color 180ms var(--ds-ease), transform 180ms var(--ds-ease), opacity 220ms var(--ds-ease), box-shadow 180ms var(--ds-ease);
}
@media (hover: hover) and (pointer: fine) { .float-cta:hover { background: var(--ds-blue-hover); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(21, 74, 232, .4); } }
.float-cta:active { background: var(--ds-blue-pressed); transform: scale(.97); }
.float-cta.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }   /* 문의 섹션이 화면에 있을 때 */
@media (max-width: 800px) { .float-cta { display: none; } }   /* 운영 하단 상담 바와 중복 방지 */
@media (prefers-reduced-motion: reduce) { .float-cta, .float-cta:hover, .float-cta:active, .float-cta.is-hidden { transform: none; transition: none; } }


/* ---------- 4. 버튼 (§6.1, §6.2) — 기존 pill 모양은 유지, 크기·상태만 가이드 ---------- */
.btn {
  min-height: 44px; padding: 0 18px;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer;
  transition: background-color 180ms var(--ds-ease), color 180ms var(--ds-ease),
              border-color 180ms var(--ds-ease), box-shadow 180ms var(--ds-ease),
              transform 100ms ease-out;
}
.btn-blue.lg, .btn-ghost.lg { min-height: 52px; padding: 0 28px; font-size: 16px; font-weight: 700; }
.btn-blue { background: var(--ds-blue); }
@media (hover: hover) and (pointer: fine) {
  .btn-blue:hover { background: var(--ds-blue-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(21, 74, 232, .25); }
  .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; transform: translateY(-2px); }
  .contact-submit:hover { background: var(--ds-blue-hover); }
}
.btn-blue:active, .contact-submit:active { background: var(--ds-blue-pressed); transform: scale(.97); box-shadow: none; }
.btn-ghost:active { background: rgba(255, 255, 255, .16); transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"], .contact-submit:disabled {
  background: var(--ds-disabled-bg); color: var(--ds-disabled-text); border-color: transparent;
  box-shadow: none; transform: none; cursor: not-allowed;
}
.btn-link { font-weight: 700; }
.theme-dark .btn-link, .theme-elevated .btn-link, .contact-section .btn-link { color: var(--ds-on-dark-blue); }

/* 터치 영역 44px (§6.2) — 보이는 크기는 유지하고 누르는 영역만 넓힘 */
.plus::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.method-services-track a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 767px) { footer a { display: inline-flex; align-items: center; min-height: 44px; } }

/* ---------- 5. 포커스 · 모션 (§5.2) ---------- */
:focus-visible { outline: 3px solid var(--ds-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active, .contact-submit:active { transform: none !important; transition: none; }
}

/* ---------- 6. 태그는 버튼처럼 반응하지 않는다 (§6.3) ---------- */
.specialty-strip span, .hero-specialty-track span, .tags span { cursor: default; }   /* 진료과 태그: hover 배경·확대는 apply-ds.mjs 가 운영 CSS·JS 에서 제거 (2026-10-19) */

/* ---------- 7. 타이포그래피 (§3) ----------
   크기 체계는 유지하고, 가이드 가중치(400/500/700/800)와 위계만 정리.
   - H1(히어로 카피)이 섹션 H2보다 작던 문제: H1 상한 48px(Desktop/Heading/H1) 로 키움     */
.welcome h1 { font-size: clamp(28px, 3.2vw, 48px); font-weight: 700; line-height: 1.22; letter-spacing: -.03em; }
.headline, main h2, .contact-intro h2, .svc-chapter h2, .story-end h2,
.hl-pin-head .section-label, .highlights.pinned-highlights .section-label { font-weight: 800; }
main h3, .svc-card .svc-copy h3, .svc-beat-copy h3, .popup-head h3, .popup-panel > h3 { font-weight: 700; }
.kicker { font-weight: 700; }
.lead strong, .bigline { font-weight: 700; }
.local-title, .work-viewer-title, .contact-fields-heading h3 { font-weight: 700; }

/* 글자 크기 — 사이트 전체 최소 14px (2026-10-16 사용자 요청 "최소 폰트가 너무 작다")
   가이드 역할에 맞춰 4단계로 정리. 일러스트 속 가짜 화면 글자(.service-ui, .search-window, .svc-visual-tag)만 예외(장식)
     ① 영문 라벨 (Label/Eyebrow)      14px / 700  — 가이드 13px 보다 1px 크게 (최소 14px 원칙)
     ② 보조 정보 (Body/Small)          14px        — 가이드 "필수 정보 최소 기준"
     ③ 본문 문장 (Body/Default)        16px
     ④ 버튼·메뉴 (Label/Button · GNB) 16px / 600~700                                       */

/* ① 영문 라벨 */
.hl-slide .copy b, .timeline small, .eyebrow, .card em, .proof-number small, .process-story small,
.process-story b, .process-meter b, .method-services-kicker, .choose-grid article em, .popup-kicker,
.interview-flow em, .interview-cases-label, .interview-case-grid small, .region-types em, .sheet-label,
.region-sheet b, .mix-steps em, .svc-catalog em, .service-page .svc-card .svc-num, .contact-eyebrow,
.contact-step-number, .contact-success-eyebrow, .project-proof small, .tags {
  font-size: 14px; font-weight: 700;
}
@media (min-width: 981px) { .method-section.pinned-story .method-services-kicker { font-size: 14px; } }
@media (max-width: 700px) { .process-story small { font-size: 14px; } }

/* ② 보조 정보 */
.footer, .foot-grid h3, .crumbs, .legal, .demo-hint, .popup-result span,
.contact-process-label, .contact-form-hint, .contact-form-hint > span, .contact-fields-heading > span,
.contact-field label > small, .contact-field-error, .contact-data-note, .contact-service-context,
.contact-success-again, .specialty-strip span, .pj_box .text4, .project-proof .period, .people-card .career,
.svc-spec span {
  font-size: 14px;
}
@media (min-width: 981px) { .pinned-project .project-proof .period { font-size: 14px; } }
@media (max-width: 800px) { .mobile-contact-bar > span { font-size: 14px; } .mobile-contact-bar a { font-size: 16px; font-weight: 700; } }
@media (max-width: 440px) { .mobile-contact-bar > span { font-size: 14px; } }

/* ③ 본문 문장 */
.hl-tab-detail, .contact-option-text, .contact-process li p, .contact-success > p:not(.contact-success-eyebrow),
.contact-fields-heading h3 { font-size: 16px; }
.contact-process strong { font-size: 17px; }
@media (min-width: 981px) {
  .pinned-project .project-proof p { font-size: 16px; }
  .proof-section .proof-intro .lead { font-size: 17px; }
}
@media (min-width: 981px) and (max-height: 900px) { .proof-section .proof-intro .lead { font-size: 17px; } }
@media (max-width: 800px) { .contact-process li p { font-size: 15px; } }   /* 좁은 3단 박스 — 최소 14 이상 유지 */
@media (max-width: 440px) { .contact-option-text { font-size: 15px; } }

/* ④ 버튼·메뉴 */
.hl-tab { font-size: 16px; }
.contact-submit { font-size: 16px; font-weight: 700; }
@media (min-width: 981px) {
  .method-section.pinned-story .method-services-track a { font-size: 15px; }   /* 칩 15 (가이드 Tag/Filter) */
  .method-section.pinned-story .method-services-cta { font-size: 16px; }
}

.contact-field label { font-size: 15px; }
.contact-field input, .contact-field textarea { font-size: 16px; }          /* iOS 확대 방지 */
.contact-field input::placeholder, .contact-field textarea::placeholder { font-size: 15px; }


/* ---------- 8. 서비스 카테고리 목록(.svc-rail) — 오른쪽 플로팅 + 본문 1200px (2026-10-16 사용자 요청) ----------
   1101px 이상: 왼쪽 330px 열(+간격 80px)을 없애 본문이 1200px 전체를 쓰고, 목록은 메인 목차와 같은
               오른쪽 가운데 떠 있는 카드로. 현재 카테고리 = 파란 동그라미 + 블루 글자 + Bold + 연한 블루 배경
   1100px 이하: 운영 디자인 그대로 본문 위 가로 탭 (현재 = 파란 테두리)
   현재 카테고리 표시(.is-on)는 운영 스크립트가 스크롤에 맞춰 바꿈 — 스타일만 변경                         */
@media (min-width: 1101px) {
  .service-page .svc-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* 운영 스크립트(GSAP ScrollTrigger)가 이 목록을 pin 하며 위치·크기를 인라인 스타일로 넣고, 감싸는 .pin-spacer 가
     본문 위에 빈 공간을 만듦 → !important 로 화면 기준 고정 위치를 지키고 빈 상자는 공간을 차지하지 않게 */
  .service-page .svc-shell > .pin-spacer-svc-rail {
    position: absolute !important; inset: auto !important; width: 0 !important; height: 0 !important;
    padding: 0 !important; margin: 0 !important; overflow: visible !important;
  }
  .service-page .svc-rail {
    position: fixed !important; left: auto !important; right: 12px !important; top: 50% !important; z-index: 60;
    transform: translateY(-50%) !important; translate: none !important;
    width: auto !important; max-width: none !important; height: auto !important; max-height: none !important;
    min-width: 0; padding: 8px 6px !important; gap: 2px;
    border: 1px solid rgba(16, 31, 61, .08); border-radius: 18px;
    background: rgba(255, 255, 255, .9); box-shadow: 0 16px 40px rgba(16, 31, 61, .12);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  }
  .service-page .svc-rail a {
    position: relative; width: auto; min-height: 40px; padding: 0 12px 0 24px; border-radius: 10px;
    font-size: 14px; font-weight: 600; white-space: nowrap; color: #4e5968; background: transparent;
    box-shadow: none; transform: none;
    transition: background-color 180ms var(--ds-ease), color 180ms var(--ds-ease);
  }
  .service-page .svc-rail a::before {
    content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
    border-radius: 50%; background: transparent; transition: background-color 180ms var(--ds-ease);
  }
  .service-page .svc-rail a.is-on { color: var(--ds-blue); font-weight: 700; background: var(--ds-blue-soft); box-shadow: none; }
  .service-page .svc-rail a.is-on::before { background: var(--ds-blue); }
  .service-page .svc-rail a.is-on::after { content: none; }
  @media (hover: hover) and (pointer: fine) { .service-page .svc-rail a:not(.is-on):hover { background: #f5f7fc; color: #101F3D; transform: none; } }
}
/* 1101~1599px: 오른쪽 목록(폭 154 + 여백 12)이 1200px 본문 오른쪽 끝을 덮으므로 그만큼만 본문 오른쪽에 여유 */
@media (min-width: 1101px) and (max-width: 1599px) {
  .service-page .svc-main { padding-right: max(0px, calc(166px + 8px - (100vw - 1200px) / 2)); }
}
@media (min-width: 1101px) and (max-height: 520px) {          /* 아주 낮은 창에서는 목록 높이(약 230px)가 본문을 크게 가리지 않도록 위쪽에 */
  .service-page .svc-rail { top: calc(var(--nav-compact) + 16px) !important; transform: none !important; }
}
@media (max-width: 1100px) {
  .service-page .svc-rail a { min-height: 44px; }
  .service-page .svc-rail a.is-on { background: var(--ds-blue-soft); color: var(--ds-blue); font-weight: 700; box-shadow: inset 0 0 0 2px var(--ds-blue); }
}

/* ---------- 9. 앵커 이동 시 헤더 가림 방지 (§4.1) ---------- */
[id] { scroll-margin-top: calc(var(--nav-compact) + 16px); }   /* GNB 88 + 여유 (페이지 바 삭제) */
.contact-section { scroll-margin-top: calc(var(--nav-compact) + 16px); }

/* ---------- 10. 히어로 CTA 가림 방지 (§9 완료 조건) ----------
   운영 디자인은 정보 띠가 히어로(100svh)를 GNB 44 + 띠 42 = 86px 아래로 밀어 1440×900 에서 CTA 가 화면 밖(876–928px).
   히어로 높이에서 그만큼만 빼서 CTA 를 첫 화면 안으로 (레이아웃·영상·연출은 그대로) */
@media (min-width: 981px) {
  .welcome { min-height: calc(100svh - var(--nav) - 42px); height: calc(100svh - var(--nav) - 42px); }
}
/* 모바일·태블릿(800px 이하, 하단 상담 바가 보이는 화면)도 같은 방식: 히어로가 화면 높이(100svh)인데 헤더 88 + 정보 띠(1줄 41 / 2줄 62)
   아래에서 시작해 버튼이 하단 상담 바(69px)에 가려졌음 (390px 폰 버튼 아래 끝 792 / 바 775, 2026-10-19) → 최소 높이에서 그만큼 뺌 */
@media (max-width: 800px) {
  .welcome { min-height: calc(100svh - var(--nav) - 41px); }
  .hero-cta-dock { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }   /* 히어로 아래 여백 0 인 701~800px: 하단 상담 바(69px) 위로 여유 */
}
@media (max-width: 700px) {
  .welcome { min-height: calc(100svh - var(--nav) - 62px); }                      /* 정보 띠 2줄 */
  .hero-cta-dock { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }    /* 히어로 아래 여백 72px + 28px = 100px ≥ 상담 바 69px */
}

/* ---------- 11. 콘텐츠 폭 1200px 통일 (2026-10-16 사용자 요청) ----------
   운영 디자인은 요소마다 폭이 달랐음: 980(푸터·페이지 바) · 1024(GNB) · 1040(진행 단계) · 1080(본문) ·
   1200(문의) · 1320(넓은 본문) · 1600(작업 사례) · 1800(서비스)  →  콘텐츠 영역을 모두 1200px 로.
   화면이 그보다 좁으면 기존처럼 화면 폭에 맞춤(가로 스크롤 없음).
   안쪽 글 폭(문장 블록 900 · 히어로 문구 1040 · FAQ 답변 46em)과 팝업(980)은 읽기 폭이라 그대로 둠. */
:root { --max: 1200px; --wide: 1200px; }
.globalnav-inner { width: min(1200px, calc(100% - 32px)); }
.hero-follow-copy, .hero-follow .stats-board { width: min(1200px, 100%); }
/* 진료과 칩 띠(.hero-specialty)는 운영 폭 860px 유지: 칩 줄(968px)이 상자보다 길어 옆으로 흘러가는 연출.
   1200px 로 넓히면 칩이 상자 안에 들어가 흐르지 않고 왼쪽에 붙어 보였음 (2026-10-16 사용자 지적) */
/* GNB·모바일 전체 메뉴의 "문의" 메뉴 숨김 — 헤더 오른쪽 "상담문의" 와 중복 (사용자 요청 2026-10-16) */
.global-links a[href$="#contact"], .mobile-panel a[href$="#contact"] { display: none; }
.process-story, .process-meter { width: min(1200px, 100%); }
.samples-board { width: min(1200px, 100%); }
.faq-list { max-width: 1200px; }
/* FAQ 에서도 오른쪽 목차를 계속 보이게 하면서(2026-10-29 사용자 요청) 질문 줄 끝의 펼침 아이콘을 가리지 않도록,
   목차가 보이는 화면에서는 목록 오른쪽 끝을 목차(오른쪽 12px + 폭 140px) 왼쪽 16px 까지만. 1920px 처럼 여백이 넉넉하면 그대로 */
@media (min-width: 1024px) and (min-height: 561px) { .faq-list { margin-right: max(0px, calc(168px - (100vw - 100%) / 2)); } }
/* FAQ 열기·닫기: 높이 애니메이션 중 내용이 넘치지 않게 + 아이콘도 함께 회전 (cansplex-header.js) */
.faq-list details > summary ~ * { overflow: hidden; }
.faq-list summary::after { transition: transform 260ms var(--ds-ease), opacity 180ms var(--ds-ease); }
.faq-list details[open] summary::after { transform: rotate(180deg); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .faq-list summary::after { transition: none; } }   /* FAQ 드롭다운도 1200px (2026-10-16 요청). 답변 문장은 읽기 폭 46em 유지 */
.crumbs, .foot-grid, .legal, .company-info { width: min(1200px, calc(100% - 48px)); }
.svc-shell { width: min(1200px, calc(100% - 48px)); }
@media (max-width: 1100px) { .svc-shell { width: min(1200px, calc(100% - 32px)); } }

/* ---------- 12. 푸터 최하단 회사 정보 (참고: haroop.com 푸터 하단) ----------
   구분선 아래: 회사명 · 대표자 · 사업자등록번호 / 주소 · 전화 · 이메일 / © — 오른쪽 정책 링크 자리
   값은 tools/apply-ds.mjs 의 COMPANY 에서 관리. 비어 있으면 "확인 필요" 표시 */
.company-info {
  margin: 24px auto 0; padding-top: 16px; border-top: 1px solid #d2d2d7;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  font-size: 14px; line-height: 1.7; color: #6e6e73;
}
.company-info p { margin: 0; }
.company-info .sep { margin: 0 8px; color: #b8b8bd; }
.company-info b { font-weight: 600; color: #424245; }
.company-info .todo { color: #b3261e; font-weight: 600; }
.company-info .copy { margin-top: 4px; color: #86868b; }
.company-policy { display: flex; gap: 16px; align-items: flex-start; white-space: nowrap; }
.policy-btn {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid #d2d2d7; border-radius: 999px; background: #fff;
  font: 600 14px/1 var(--font, inherit); color: #424245; cursor: pointer;
  transition: border-color 180ms var(--ds-ease), color 180ms var(--ds-ease);
}
@media (hover: hover) and (pointer: fine) { .policy-btn:hover { border-color: #424245; color: #1d1d1f; } }
.policy-btn:focus-visible { outline: 3px solid var(--ds-focus); outline-offset: 2px; }
.company-policy { gap: 8px; }
@media (max-width: 767px) { .policy-btn { min-height: 44px; } }   /* 터치 44px */
@media (max-width: 767px) {
  .company-info { flex-direction: column; }
  .company-info .line-item { display: block; }
  .company-info .sep { display: none; }
}

/* ---------- method-track 카드: 마우스를 올리면 위로 살짝 올라옴 (사용자 요청 2026-10-16) ----------
   운영은 이 카드만 hover 움직임을 꺼 두었음(.method-cards .card:hover{transform:none}).
   - 카드의 transform 은 스크롤 연출(GSAP)이 인라인으로 쓰므로 겹치지 않게 별도 속성 translate 사용
   - 카드 줄(.method-cards)이 overflow:hidden 이라 올라온 윗부분이 잘리지 않게 위쪽 여유 12px (같은 만큼 margin 으로 상쇄해 배치는 그대로)
   - 가이드 §5 motion: 200ms, 움직임 줄이기 설정 사용자는 움직이지 않음 */
.method-cards { padding-top: 12px; margin-top: -12px; }
.method-cards .card { transition: transform .3s ease, translate 200ms var(--ds-ease), box-shadow 200ms var(--ds-ease); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .method-cards .card:hover { translate: 0 -8px !important; box-shadow: 0 16px 32px rgba(0, 0, 0, .28); }
}
.method-cards .card:focus-within { translate: 0 -8px !important; }

/* ---------- 누락된 Hover · Pressed 보강 (가이드 §5.2·§6·§8, 2026-10-16 사용자 요청) ----------
   Hover: 마우스 있는 PC 만, 180ms, 색만으로 구분하지 않고 선·배경·아이콘을 함께 바꿈
   Pressed: 누르고 있는 순간만 scale(.97), 100ms ease-out (카드는 .98). 블루 채움은 #0B338F
   - 스크롤 연출·운영 hover 가 transform 을 쓰므로 겹치지 않게 별도 속성 scale 사용
   - 유지되는 상태(현재 메뉴·목차·서비스 목록 current)와 GNB 링크에는 pressed 를 넣지 않음 (가이드 §7.1: GNB 는 크게 움직이지 않음) */

/* 1) Hover 가 없던 곳 */
.faq-list summary, .faq-list summary::after { transition: color 180ms var(--ds-ease), border-color 180ms var(--ds-ease), opacity 180ms var(--ds-ease), transform 260ms var(--ds-ease); }
.dialog-card .close, .contact-service-context button, .contact-success-again, #services .route-back {
  transition: background-color 180ms var(--ds-ease), color 180ms var(--ds-ease), border-color 180ms var(--ds-ease), scale 100ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .faq-list summary:hover { color: var(--ds-blue); }                                         /* FAQ 질문: 블루 글자 + 아이콘 진하게 */
  .faq-list summary:hover::after { opacity: 1; border-color: var(--ds-blue); }
  .dialog-card .close:hover { background: #E3EAFD; color: var(--ds-blue); }                  /* 팝업 닫기 × */
  .contact-service-context button:hover { background: rgba(21, 74, 232, .1); color: var(--ds-blue); }   /* 선택된 서비스 해제 × */
  .contact-success-again:hover { color: var(--ds-blue); border-bottom-color: var(--ds-blue); }          /* 새 문의 작성하기 */
  #services .route-back:hover { background: #E2E6EA; }                                       /* 예시 화면 뒤로 ‹ */
}

/* 2) Pressed */
.hl-tab { transition: background .25s, color .25s, transform .25s, box-shadow .25s, scale 100ms ease-out; }
.method-services-track a { transition: background .2s, color .2s, border-color .2s, box-shadow .2s, scale 100ms ease-out; }
.plus, .icon-btn, .policy-btn, .work-viewer-close, #services button, .pj_box, .mobile-panel a, .mobile-contact-bar a, footer a, .svc-contact-link {
  transition-property: background-color, color, border-color, filter, transform, box-shadow, opacity, scale;   /* 기존 hover 이동(transform)·그림자도 부드럽게 유지 */
  transition-duration: 180ms, 180ms, 180ms, 180ms, 180ms, 180ms, 100ms, 100ms; transition-timing-function: ease-out;
}
.hl-tab:active, .plus:active, .icon-btn:active, .policy-btn:active, .work-viewer-close:active,
.method-services-track a:active, #services button:active,
.dialog-card .close:active, .contact-service-context button:active, .contact-success-again:active { scale: .97; }
/* 작업 사례 카드(.pj_box)는 GSAP 등장 연출(opacity·y)이 움직이는 요소 → CSS 전환을 걸면 레이아웃 재계산(ScrollTrigger refresh) 때
   전환 중인 값(투명·아래로 밀린 위치)을 "최종값"으로 읽어 모바일에서 카드가 끝까지 투명하게 남았음 (2026-10-29 발견)
   → 눌림(scale) 반응만 남기고 opacity·transform·filter 전환은 뺌 */
.pj_box { transition-property: scale, box-shadow; transition-duration: 100ms, 180ms; }
.pj_box:active { scale: .98; }                                                                 /* 작업 사례 카드 (Card/Interactive 눌림) */
.plus:active { background: var(--ds-blue-pressed, #0B338F); filter: none; }                    /* 블루 채움 + 버튼 */
.work-viewer-close:active { background: #0B338F; color: #fff; }
.method-services-track a:active { background: rgba(21, 74, 232, .32); border-color: rgba(135, 173, 255, .6); }
.hl-tab:not(.is-on):active { background: #D2D2D9; }
.policy-btn:active { border-color: #0B338F; color: #0B338F; }
.dialog-card .close:active, .contact-service-context button:active { background: #CCD9FB; color: #0B338F; }
/* 글자 링크(터치 화면 포함): 누르는 동안 흐리게 */
.mobile-panel a:active, .mobile-contact-bar a:active, footer a:active, .svc-contact-link:active, .contact-success-again:active { opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .hl-tab:active, .plus:active, .icon-btn:active, .policy-btn:active, .work-viewer-close:active, .method-services-track a:active,
  #services button:active, .dialog-card .close:active, .contact-service-context button:active, .contact-success-again:active, .pj_box:active { scale: none; }
}

/* 장기 프로젝트 카드(project-proof-grid)도 콘텐츠 폭 1200px 로 통일 (운영 920px, 사용자 요청 2026-10-16) */
@media (min-width: 981px) { .pinned-project .project-proof-grid { width: min(1200px, 100%); } }

/* ---------- 타임라인 끝 문장(bigline) 별도 섹션 — 스크롤에 따라 한 줄씩 슬라이드 (사용자 요청 2026-10-16) ----------
   섹션은 화면 2.4배 높이, 안쪽 무대(.bigline-stage)는 헤더 아래 한 화면에 붙어(sticky) 있는 동안
   cansplex-header.js 가 스크롤 진행도로 --bl-y·--bl-o 를 바꿔 1줄 → 2줄 순서로 아래에서 올라오게 함 (되돌려 스크롤하면 다시 내려감) */
.bigline-section { position: relative; height: 240vh; }
.bigline-stage {
  position: sticky; top: var(--nav-compact); height: calc(100svh - var(--nav-compact));
  display: grid; place-items: center; padding: 0 24px; box-sizing: border-box;
}
.bigline-slide {
  margin: 0; max-width: var(--max, 1200px); text-align: center;
  font-size: clamp(26px, 3.6vw, 48px); font-weight: 700; line-height: 1.3;   /* 최대 48px(운영 bigline 과 같음) — 오른쪽 목차와 겹치지 않게 */ letter-spacing: -.03em; color: var(--text, #f5f5f7);
  text-wrap: balance;
}
/* 오른쪽 목차(140px + 여백)가 보이는 화면에서는 양쪽에 같은 여백을 둬 글자가 목차 밑으로 들어가지 않게 (가운데 정렬 유지, 좁으면 줄바꿈) */
@media (min-width: 1024px) and (min-height: 561px) { .bigline-stage { padding: 0 176px; } }
.bl-mask { display: block; overflow: hidden; padding: .08em 0; }       /* 줄마다 가림막: 아래에서 올라오며 드러남 */
.bl-mask + .bl-mask { margin-top: .12em; }
.bl-line { display: block; transform: translateY(var(--bl-y, 110%)); opacity: var(--bl-o, 0); will-change: transform, opacity; }
.bl-mask:last-child .bl-line { color: var(--accent); }                   /* 둘째 줄(핵심 문장) 강조 — 어두운 배경 위 #87ADFF (대비 9:1 이상) */
@media (max-width: 700px) {
  .bigline-section { height: 200vh; }
  .bigline-stage { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bigline-section { height: auto; }
  .bigline-stage { position: static; height: auto; min-height: 70svh; }
  .bl-line { transform: none; opacity: 1; }
}

/* ---------- 마케팅 방향(#method) 도착 시 위쪽 잘림 수정 (2026-10-16 사용자 지적) ----------
   운영 스크립트가 소개 문구를 가운데 → 위로 옮기는 도중 위치를 다시 계산해 잠깐 본문 상자 위로 약 14px 넘어감 → 상자의 overflow:hidden 에 잘림
   → 잘리는 기준만 위로 32px(헤더 아래 빈 띠) 넓힘. 움직임·배치는 그대로. hidden 대신 clip 이라 상자 안 스크롤 위치가 밀릴 일도 없음 */
.method-section.pinned-story > .wrap { overflow: clip; overflow-clip-margin: 32px; }


/* ---------- 마케팅 방향(#method) 낮은 화면 — 글자 크기는 그대로, 여백만 줄임 (2026-10-16 사용자 요청) ----------
   연결 문장·서비스 칩은 다음 섹션(.method-next)으로 분리(tools/apply-ds.mjs). 남은 소개+카드가 높이 740px 이하에서 15~20px 넘쳐
   설명 문단 위 여백 20→8px, 카드 안쪽 여백 18/40→16/34px 로 맞춤 */
@media (min-width: 981px) and (max-height: 740px) {
  .method-section.pinned-story .lead { margin-top: 8px; }
  .method-section.pinned-story .method-cards .card { padding: 16px 20px 34px; }
}

/* 마케팅 방향(#method): 소개 문구 + 카드 줄을 한 덩어리로 위아래 가운데 정렬 (사용자 요청 2026-10-16)
   운영 스크립트는 (남은 높이 - 소개 - 간격 - 본문 높이)/2 만큼 소개를 내리고 본문 위 여백을 잡는데,
   본문(method-body)이 flex:1 로 늘어나 있어 본문 높이 = 남은 높이 전체로 계산돼 항상 0 → 위에 붙어 있었음.
   자리 잡은 뒤(is-docked)에는 본문을 내용 높이로만 두어 계산이 맞게 함. 소개-카드 간격은 운영 그대로 */
/* 바깥 상자(.wrap)도 내용을 가운데로 모으고 위아래 여백이 있어 두 번 밀리거나 위아래가 어긋났음 → 자리 잡은 동안 위 정렬·여백 0 */
@media (min-width: 981px) {
  .method-section.pinned-story.is-docked > .wrap { justify-content: flex-start; padding-top: 0; padding-bottom: 0; }
  .method-section.pinned-story.is-docked .method-body { flex: none; }
}

/* ---------- 연결 문장 섹션(.method-next) — 글자 키움 + 스크롤 등장 (사용자 요청 2026-10-16, 두 번) ----------
   글자: 운영 27~38px → H1 48px → 한 단계 더: 가이드 Desktop/Display/L 최대 64px, 모바일 Mobile/Display/XL 42px(좁은 폰 36px)
   등장: bigline-section 과 같은 스크롤 슬라이드 (아래 규칙 참고)
   폭: 오른쪽 목차(1024px 이상)와 겹치지 않게 화면 - 352px 이하, 긴 줄은 균형 있게 두 줄로 */
.method-next .story-bridge { max-width: 1100px; font-size: clamp(36px, 4vw, 64px); line-height: 1.2; text-wrap: balance; }
@media (min-width: 1024px) and (min-height: 561px) { .method-next .story-bridge { max-width: min(1100px, calc(100vw - 352px)); } }
@media (max-width: 700px) { .method-next .story-bridge { font-size: clamp(36px, 10vw, 42px); } }
/* 스크롤 슬라이드: bigline-section 과 같은 방식 — 섹션은 화면 2.4배 높이(모바일 2배), 안쪽 .wrap 이 헤더 아래 한 화면(100%)에 붙어 있는 동안
   cansplex-header.js 4·5번이 진행도에 따라 문장 줄 → SERVICE PRODUCTS → 칩 → 버튼 순서로 올림 (2026-10-16 사용자 요청) */
.method-next { height: 240vh; padding: 0; }   /* 300 → 240vh (2026-10-29, 빈 스크롤 구간 줄임) */
.method-next > .wrap {
  position: sticky; top: var(--nav-compact); height: calc(100svh - var(--nav-compact)); box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.method-next .story-bridge { margin-top: 0; }
.rv-mask { display: block; overflow: hidden; padding: .04em 0 .1em; }
.rv-line { display: block; transform-origin: 0 100%; will-change: transform, opacity; }
@media (max-width: 700px) { .method-next { height: 200vh; } }
@media (prefers-reduced-motion: reduce) {
  .method-next { height: auto; }
  .method-next > .wrap { position: static; height: auto; min-height: calc(100svh - var(--nav-compact)); }
}

/* ---------- 숫자(proof-intro)·홈페이지(web-insight-intro) 소개: 양옆 배치 → 한 줄로 쌓아 가운데 정렬 (사용자 요청 2026-10-16) ----------
   운영: 왼쪽 제목 / 오른쪽 설명 2열. 같은 우선순위 선택자를 다시 써서 고정(pin) 상태 규칙까지 덮음 */
.proof-intro, .proof-section .proof-intro, .web-insight-intro, .pinned-insight .web-insight-intro {
  grid-template-columns: 1fr; justify-items: center; align-items: center; text-align: center;
  gap: clamp(16px, 2.4vh, 28px);
}
.proof-intro .headline, .web-insight-intro .headline, .proof-section .proof-intro .headline, .pinned-insight .web-insight-intro .headline {
  max-width: 100%; margin-left: auto; margin-right: auto; text-wrap: balance;   /* 운영 11~12em 폭 제한을 풀어 원래 줄바꿈(2줄) 유지, 글자 크기 그대로 */
}
.proof-intro .lead, .web-insight-intro .lead { max-width: 46em; margin-left: auto; margin-right: auto; }
.pinned-insight .web-insight-intro { align-content: center; }

/* 홈페이지 섹션 마지막 문구(web-journey): 왼쪽 정렬 → 가운데 정렬 (사용자 요청 2026-10-16). 고정 상태에서 p 의 22em 폭 제한은 가운데로 */
.web-journey, .pinned-insight .web-journey { text-align: center; align-items: center; }
.web-journey p, .pinned-insight .web-journey p { margin-left: auto; margin-right: auto; }

/* ---------- 상담 폼 개인정보 수집·이용 동의(필수) (사용자 요청 2026-10-16) ----------
   체크박스 20px(누르는 영역은 줄 전체 44px), 글자 15px, 오류 14px(가이드 최소). 동의 전 전송 시 빨간 테두리 + 오류 문구 */
.contact-consent {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
  margin: 18px 0; padding: 12px 14px; border: 1px solid #E1E5EC; border-radius: 10px; background: #F8FAFD;
}
.contact-consent-check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 600; color: #101F3D; }
.contact-consent-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ds-blue); cursor: pointer; }
.contact-consent-check b { color: var(--ds-blue); }
.contact-consent-view {
  min-height: 44px; padding: 0 4px; background: none; border: 0; color: #526176; font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .contact-consent-view:hover { color: var(--ds-blue); } }
.contact-consent-view:active { opacity: .7; }
.contact-consent-desc { grid-column: 1 / -1; margin: 0; color: #526176; font-size: 14px; line-height: 1.5; }
.contact-consent .contact-field-error { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.contact-consent.is-invalid { border-color: #bc2525; background: #FFF6F6; }
.contact-consent-check input:focus-visible { outline: 3px solid var(--ds-accent, #87ADFF); outline-offset: 3px; }
@media (max-width: 480px) { .contact-consent { grid-template-columns: 1fr; } .contact-consent-view { justify-self: start; } }

/* 모바일·태블릿 마케팅 방향 QUESTION 카드: 등장할 때 36px 아래에서 올라오는 동안 카드 줄(overflow:hidden)에 아랫부분이 잘려 보임
   → 아래쪽 여유 40px (같은 만큼 margin 으로 상쇄해 배치 그대로) (2026-10-19 사용자 지적) */
@media (max-width: 980px) { .method-cards { padding-bottom: 40px; margin-bottom: -40px; } }

/* 모바일·태블릿(980px 이하) web-journey: 흰 카드 배경·안쪽 여백 40px·둥근 모서리 제거 (사용자 요청 2026-10-19)
   데스크톱은 고정 연출 안에서 이미 배경 없이 표시 */
@media (max-width: 980px) {
  .web-journey, .theme-alt .web-journey { background: none; padding: 0; border-radius: 0; }
}
/* 타임라인 카드(.timeline article): 최소 높이(운영 260px, 모바일 220px) 제거 → 높이는 안쪽 여백(padding)과 내용으로만 (사용자 요청 2026-10-19) */
.timeline article { min-height: 0; }

/* 연결 문장 섹션(.method-next) 모바일: 화면 높이 무대 아래쪽이 하단 상담 바(69px)에 가려 버튼이 겹쳤음 (360×640 버튼 576 / 바 571, 2026-10-19)
   → 하단 상담 바가 보이는 화면(800px 이하)에서 무대 아래 여백을 바 높이만큼 두고 남은 공간 가운데 정렬 */
@media (max-width: 800px) { .method-next > .wrap { padding-bottom: calc(69px + env(safe-area-inset-bottom)); } }
/* 아주 낮은 폰(높이 700px 이하, 예 360×640): 내용(519px)이 헤더~상담 바 사이(483px)보다 커서 가운데 정렬 시 첫 줄이 헤더 밑으로 감
   → 글자 크기는 그대로, 간격만 줄이고(36→14, 22→14, 14→10px, 줄 가림막 여유) 넘치면 위부터 채움(safe center) */
@media (max-width: 800px) and (max-height: 700px) {
  .method-next > .wrap { justify-content: safe center; }
  .method-next .method-services { margin-top: 14px; }
  .method-next .rv-mask { padding: .02em 0 .06em; }   /* 줄 가림막 위아래 여유만 줄임 (쉼표 아래 끝은 보존) */
  .method-next .method-services-kicker { margin-bottom: 10px; }
  .method-next .method-services-cta { margin-top: 14px; }
}

/* 첫 화면 작은 제목(.hero-brand)이 헤더에 닿으면 사라짐 (cansplex-header.js 8번, 2026-10-19) — 연출 중 헤더 밑에 비쳐 보이던 것 */
.hero-brand.is-under-nav { opacity: 0 !important; transition: opacity 180ms ease-out; }

/* ---------- 혼동 방지 — 가이드 §6.3 정적 태그 · §8.1 카드 (2026-10-19 검토 후 수정) ----------
   1) 하는 일 예시 화면 안의 장식 버튼(진료 예약하기·전화·▶): 실제 동작이 없어 손가락 커서·hover·눌림 없이 그림처럼 표시
      (예시 화면의 "길찾기 / ‹" 는 실제로 화면이 바뀌므로 그대로)
   2) 마케팅 방향 QUESTION 카드 · 담당자 카드: 카드 아무 곳이나 누르면 ＋ 와 같은 자세히 보기 팝업 (cansplex-header.js 9번)
      → Card/Interactive: 손가락 커서 + 누르는 동안 살짝 작아짐
   3) 서비스 페이지 카드(svc-card): 클릭 동작이 없어 hover 떠오름·확대 제거 (apply-ds.mjs 가 운영 CSS 에서 삭제)
   4) 숫자 카드(proof-number): 누르면 해당 숫자로 이동하는 실제 기능 → 키보드로도 선택(cansplex-header.js 9번), 초점 링 */
#services .vis button:not(.route-trigger):not(.route-back) { cursor: default; pointer-events: none; }
.is-card-link { cursor: pointer; }
.method-cards .is-card-link { cursor: pointer; }
.is-card-link:active:not(:has(.plus:active)) { scale: .98; }
@media (prefers-reduced-motion: reduce) { .is-card-link:active { scale: none; } }
.proof-number:focus-visible { outline: 3px solid var(--ds-on-dark-blue, #87ADFF); outline-offset: 3px; border-radius: 12px; }

/* 카드 줄 마우스 끌기 (cansplex-header.js 10번, 2026-10-19): 데스크톱 고정 연출에서 잡을 수 있음을 커서로 표시, 끄는 동안 글자 선택 방지 */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .is-drag-row { cursor: grab; }
  .is-drag-row .is-card-link { cursor: grab; }   /* 카드는 눌러도 열리지만 줄 전체가 끌 수 있는 영역임을 우선 표시 */
  .is-drag-row.is-dragging, .is-drag-row.is-dragging * { cursor: grabbing; user-select: none; }
  .is-drag-row .plus { cursor: pointer; }
}

/* ---------- A. 스크롤하면 헤더 88 → 64px 로 줄어듦 (2026-10-19, 노트북 섹션 잘림 개선) ----------
   - 레이아웃(정보 띠 위치·첫 화면 높이·서비스 본문 시작)은 --nav(88px) 그대로 → 줄어들 때 본문이 밀리지 않음
   - 스크롤된 뒤에만 쓰이는 것(헤더 막대, 모바일 메뉴, 화면 고정 무대, 앵커 위치, 모바일 서비스 탭)은 --nav-compact(64px)
   - 고정(pin) 섹션은 64 + 32 = 96px 에서 고정 (apply-ds.mjs 가 운영 JS "top 120px" → "top 96px") → 모든 고정 섹션 24px 여유
   - cansplex-header.js 11번이 64px 넘게 스크롤하면 html.is-nav-compact (24px 위로 오면 다시 88px) */
:root { --nav-compact: 64px; }
.globalnav { transition: height 220ms var(--ds-ease); }
html.is-nav-compact .globalnav { height: var(--nav-compact); }
html.is-nav-compact .mobile-panel.is-open { inset: var(--nav-compact) 0 0; }
@media (max-width: 1100px) { .service-page .svc-rail { top: calc(var(--nav-compact) + 8px); } }   /* 모바일 서비스 탭: 스크롤된 뒤에만 붙으므로 64px 기준 */
@media (prefers-reduced-motion: reduce) { .globalnav { transition: none; } }

/* B. 고정 섹션 "소개 → 내용" 넘겨주기 (cansplex-header.js 12번): 위로 비켜나는 소개 문구는 섹션 윗변(헤더 아래 32px)에서 잘려 사라짐
   (반투명 헤더 밑으로 비쳐 보이지 않게) */
.pin-spacer > .ds-handoff { overflow: clip; }

/* ---------- 자세히 보기 팝업(마케팅 방향 QUESTION·담당자 카드) 내용 잘림 → 팝업 안 스크롤 (2026-10-19 사용자 지적) ----------
   운영은 넓은 팝업을 화면 높이(최대 86dvh·720px)에 맞추려고 본문을 줄여(flex:1 · min-height:0) 넘치는 내용이 잘렸음
   → 본문은 원래 높이 그대로 두고, 팝업 상자(이미 overflow:auto)가 스크롤되게 함. 마우스 휠은 cansplex-header.js 14번 */
.dialog.is-wide .dialog-body, .dialog.is-wide .popup-panel, .dialog.is-wide .popup-body { flex: none; min-height: auto; }
.dialog.is-wide .popup-body.is-compete, .dialog.is-wide .popup-body.is-mix { grid-template-rows: auto; }
.dialog { overscroll-behavior: contain; }   /* 팝업 끝까지 스크롤해도 뒤 페이지가 같이 움직이지 않게 */

/* 서비스 페이지 각 장 머리(svc-chapter > header): 제목(h2)과 설명(.svc-chapter-note)을 위아래로 (사용자 요청 2026-10-19)
   운영은 제목 · 설명 · "이 서비스 상담하기" 가 한 줄. 769px 이상에서 왼쪽 열에 제목 → 설명, 오른쪽에 상담 링크(아래 정렬). 768px 이하는 원래 세로 */
@media (min-width: 769px) {
  .service-page .svc-chapter > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; }
  .service-page .svc-chapter > header h2 { grid-column: 1; grid-row: 1; justify-self: start; }
  .service-page .svc-chapter > header .svc-chapter-note { grid-column: 1; grid-row: 2; margin: 14px 0 0; }
  .service-page .svc-chapter > header .svc-contact-link { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}

/* 서비스 페이지 (사용자 요청 2026-10-19)
   - 장 설명(.svc-chapter-note): 운영 최대 폭 28em 제한 해제
   - 카테고리 목록 현재 항목의 화살표(→, a.is-on::after): 운영 흰색 → 메인 블루. 1100px 이하 탭(연한 블루 배경)에서 흰 화살표가 거의 안 보였음
     (1101px 이상 오른쪽 플로팅 목록은 화살표 대신 파란 동그라미로 표시하므로 그대로 숨김) */
.service-page .svc-chapter-note { max-width: none; }
.service-page .svc-rail a.is-on::after { color: var(--ds-blue); }

/* 서비스 카드 번호(.svc-num 01·02·03): 테두리·배경·안쪽 여백 제거 → 글자만 (사용자 요청 2026-10-19)
   영상 재생 중 번호 둘레에 퍼지던 빛(box-shadow 펄스)도 테두리처럼 보여 함께 끔 */
.service-page .svc-card .svc-num,
.service-page .svc-card.is-playing .svc-num { border: 0; background: none; padding: 0; border-radius: 0; box-shadow: none; animation: none; }

/* 서비스 카드 번호(.svc-num)를 설명(.svc-copy) 바로 위로 (사용자 요청 2026-10-19)
   카드는 [사진 | 번호 줄(약 70px) / 설명 줄] 격자인데 번호가 번호 줄 맨 위에 있어 설명과 52px 떨어져 있었음 → 번호 줄 아래에 붙이고 설명과 12px */
.service-page .svc-card .svc-num { align-self: end; margin: 0 0 12px; }

/* 서비스 각 장(.svc-chapter) 간격 — 769px 이상: 요소 사이 42 → 10px, 위 여백 72 → 100px (사용자 요청 2026-10-19). 768px 이하는 운영 값(28px · 52px) 그대로 */
@media (min-width: 769px) { .service-page .svc-chapter { gap: 10px; padding-top: 100px; } }

/* 서비스 페이지 마지막 안내(.svc-close)의 버튼 묶음 위 여백 40px (사용자 요청 2026-10-19) */
.svc-close .hero-actions { margin-top: 40px; }

/* 개인정보처리방침 링크 연결 (2026-10-19): 버튼 → a 태그로 바뀌어도 같은 모양 */
a.policy-btn { text-decoration: none; }
a.contact-consent-view { display: inline-flex; align-items: center; }

/* 정책 페이지 (www/member/privacy.html · agreement.html, 2026-10-19) — 원문은 design-system/policy/*.txt */
body.policy-doc { background: #f5f5f7; }
.policy-page { color: #1d1d1f; }
.policy-page { padding: calc(var(--nav) + 72px) 24px 96px; }
.policy-wrap { max-width: 880px; margin: 0 auto; }
.policy-kicker { margin: 0 0 10px; color: var(--ds-blue); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.policy-page h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: #1d1d1f; }
.policy-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 32px; }
.policy-switch a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid #d2d2d7; background: #fff; color: #424245; font-size: 15px; font-weight: 600; text-decoration: none;
  transition: border-color 180ms var(--ds-ease), color 180ms var(--ds-ease);
}
@media (hover: hover) and (pointer: fine) { .policy-switch a:hover { border-color: #424245; color: #1d1d1f; } }
.policy-switch a:active { border-color: #0B338F; color: #0B338F; }
.policy-switch a:focus-visible { outline: 3px solid var(--ds-focus); outline-offset: 2px; }
.policy-switch a[aria-current="page"] { background: #1d1d1f; border-color: #1d1d1f; color: #fff; }
.policy-body {
  padding: clamp(24px, 4vw, 48px); border-radius: 20px; background: #fff; border: 1px solid #e5e5ea;
  font-size: 16px; line-height: 1.75; color: #424245; word-break: keep-all; overflow-wrap: break-word;
}
.policy-body h5 { margin: 40px 0 12px; padding-top: 28px; border-top: 1px solid #e5e5ea; font-size: 20px; font-weight: 700; line-height: 1.4; color: #1d1d1f; }
.policy-body > h5:first-child { margin-top: 0; }
.policy-body > h5:first-child { padding-top: 0; border-top: 0; }
.policy-body p { margin: 0 0 10px; }
.policy-body dl { margin: 0; }
.policy-body dt { margin: 20px 0 6px; font-weight: 700; color: #1d1d1f; }
.policy-body dd { margin: 0 0 6px; }
.policy-body ul, .policy-body ol { margin: 4px 0 8px; padding: 0 0 0 4px; list-style: none; }
.policy-body li { margin: 2px 0; }
.policy-doc .policy-btn[aria-current="page"] { border-color: #1d1d1f; color: #1d1d1f; }
@media (max-width: 767px) {
  .policy-page { padding: calc(var(--nav) + 40px) 16px 64px; }
  .policy-body { font-size: 15px; border-radius: 16px; }
  .policy-body h5 { font-size: 18px; }
}
/* 개인정보처리방침 개정본 (haroop.com/privacy 구성 참고, 2026-10-19): 첫 문장·항목 상자·글머리표 */
.policy-body .policy-lead { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #1d1d1f; }
.policy-body .policy-lead + h5 { margin-top: 28px; }
.policy-body ul { padding-left: 22px; list-style: disc; }
.policy-body ul li::marker { color: #86868b; }
.policy-body .policy-box { display: grid; gap: 8px; margin: 12px 0 14px; padding: 16px 20px; border-radius: 12px; background: #f5f5f7; font-size: 15px; }
.policy-body .policy-box > div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 12px; }
.policy-body .policy-box dt { margin: 0; font-weight: 700; color: #1d1d1f; }
.policy-body .policy-box dd { margin: 0; }
.policy-body .todo { color: #b3261e; font-weight: 700; }
@media (max-width: 767px) {
  .policy-body .policy-box { padding: 14px 16px; }
  .policy-body .policy-box > div { grid-template-columns: 1fr; gap: 2px; }
  .policy-body .policy-lead { font-size: 17px; }
}
.policy-body a { color: var(--ds-blue); text-decoration: underline; text-underline-offset: 3px; }