/* =========================================================================
   agency-company.css — 사바나미디어 기업 홍보·영업 원페이지 (루트 index.php, 구 /company/) v3
   원칙: 카드/아이콘 리스트 반복 금지 · 타이포/실제 화면/여백/전환 리듬으로 구성 ·
        섹션마다 다른 레이아웃 문법 · 모션은 fade/translate 만.
   팔레트: 흰 바탕 / 잉크 / 네이비 포인트 / 네이비 다크. 서체는 전체 고딕.
   ========================================================================= */

/* 2026-09-08 개편: 아이보리 → 흰 바탕, 세리프 → 전체 고딕. 브릭 레드 포인트와 남색 섹션은 그대로 유지(→ 2026-09-18 레드 폐기, 아래 :root 참고).
   ⚠️ --serif / --serif-kr 변수명은 41곳에서 쓰이므로 이름을 바꾸지 않고 값만 고딕으로 교체했다.
      (전 규칙을 찾아 고치는 것보다 안전하고, 되돌리기도 쉽다) */
:root {
  /* 2026-09-08 전면 흰색 — 크림·회색 톤 배경을 전부 제거하고 섹션 구분은 괘선으로만 한다.
     (아이보리 → 쿨그레이 → 웜 오프화이트를 거쳐, 색 있는 바탕 자체를 없애는 것으로 확정)
     --paper-2 / --card 는 41곳에서 쓰여 이름을 남기고 값만 흰색으로 둔다. */
  --paper: #ffffff; --paper-2: #ffffff; --card: #ffffff;
  /* --ink-3 는 캡션·설명·단계 부연 등 작은 글씨 23곳이 함께 쓰는 보조 텍스트 색.
     #85858c 였을 때 흰 바탕에서 3.66:1 — WCAG AA 작은 글씨 기준(4.5:1) 미달이라 4.64:1로 내렸다.
     색상 계열(옅은 청회색)은 그대로 두고 명도만 낮춘 값이다. 여기서 더 밝히면 다시 기준 아래로 떨어진다.
     (--ink 7.65:1 · --ink-2 7.65:1 · --on-dark-2 7.64:1 는 이미 기준을 넘는다) */
  --ink: #17181a; --ink-2: #52535a; --ink-3: #74747b;
  --line: rgba(23, 24, 26, 0.13); --line-strong: rgba(23, 24, 26, 0.42);
  /* 2026-09-18 한때 포인트 색 전체를 네이비로 바꿨다가 팔레트는 원래대로 되돌렸다.
     브릭 레드(--accent)와 살구(#e6a08f) 포인트가 이 페이지의 기존 팔레트다.
     남긴 것은 '이미지 hover 테두리'뿐 — 캡처 위에 마우스를 올렸을 때 붉은 테두리가 뜨는 게
     경고처럼 보인다는 지적이 있어 그 두 규칙만 블루 계열(--hover-img / --hover-img-dark)로 뺐다. */
  --accent: #bf3b26; --navy: #14202e; --navy-2: #0e1722;
  /* 이미지 hover 전용 — 흰 바탕용 / 네이비 바탕용. 다른 데 쓰지 말 것(포인트 색은 --accent) */
  --hover-img: #223756; --hover-img-dark: #8296b3;
  --on-dark: #efe9dc; --on-dark-2: rgba(239, 233, 220, 0.72); --on-dark-line: rgba(255, 255, 255, 0.16);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --serif: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  --serif-kr: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  --sans: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  --edge: calc(max(0px, (100vw - 1180px) / 2) + clamp(1.15rem, 4vw, 3rem));
}

/* 페이지 스크롤바 — 흰 바탕에서 브라우저 기본 스크롤바
   (연회색 썸 #c1c1c1 / 거의 흰 트랙)가 배경에 묻혀 지금 어디를 보고 있는지 티가 안 난다는 지적.
   썸을 잉크색으로 올리고 트랙은 옅게 남겨 궤도가 보이게 한다.
   ⚠️ 포인트 색(--accent, 브릭 레드)을 쓰지 말 것 — 스크롤바가 빨개지면 경고처럼 보인다.
   ⚠️ 선택자를 html로 한정할 것 — 맨몸 ::-webkit-scrollbar 로 쓰면 히어로 캐러셀·사례 줄처럼
      스크롤바를 일부러 숨긴 가로 트랙들까지 건드린다. */
html { scrollbar-color: var(--ink) rgba(23, 24, 26, 0.08); }
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: rgba(23, 24, 26, 0.08); }
html::-webkit-scrollbar-thumb { background: var(--ink); }
html::-webkit-scrollbar-thumb:hover { background: #000; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 3rem); }

/* 리빌 — 절제 */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* 공통 타이포 */
.label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; color: var(--accent); margin: 0 0 0.9rem; }
.h2 {
  font-family: var(--serif-kr); font-weight: 700; margin: 0;
  font-size: clamp(1.7rem, 3.6vw, 2.75rem); line-height: 1.22; letter-spacing: -0.01em; word-break: keep-all;
}
.lead { font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.8; color: var(--ink-2); max-width: 60ch; margin: 1.4rem 0 0; word-break: keep-all; }

/* 버튼 — 사각, 알약 금지 */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
  font: inherit; font-size: 0.94rem; font-weight: 700; line-height: 1;
  padding: 0.95rem 1.5rem; border-radius: 3px; border: 1px solid transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn__ic { width: 1em; height: 1em; }
.btn--sm { padding: 0.65rem 1.05rem; font-size: 0.84rem; }
.btn--block { width: 100%; justify-content: center; }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--paper { background: #fff; color: var(--accent); border-color: #fff; }
.btn--paper:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.btn--ghost:hover { background: #fff; color: var(--accent); }

/* 텍스트 링크·공유 — CTA보다 약하게 */
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; margin-top: 1.4rem; }
.tlink { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.tlink__ic { width: 0.9em; height: 0.9em; }
.share {
  display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
  background: none; border: 0; padding: 0; font: inherit; font-size: 0.86rem; color: var(--ink-3);
  transition: color 0.2s var(--ease);
}
.share svg { width: 0.95em; height: 0.95em; }
.share:hover { color: var(--ink); }

/* =========================================================================
   헤더
   ========================================================================= */
.head { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.head__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; }
.head__brand { display: flex; align-items: center; gap: 0.55rem; }
.head__brand img:first-child { height: 26px; width: auto; }
.head__brand img:last-child { height: 15px; width: auto; }
.head__nav { display: flex; gap: 1.7rem; font-size: 0.86rem; color: var(--ink-2); }
.head__nav a { padding: 0.2rem 0; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.head__nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 800px) { .head__nav { display: none; } }

/* =========================================================================
   HERO — 타이포 + 브랜드 스트립
   ========================================================================= */
.hero { padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(2.4rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
/* 좌 카피 고정 / 우 캐러셀이 화면 오른쪽 밖으로 흘러감 */
.hero__layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-left: var(--edge); padding-right: var(--edge); }
@media (min-width: 900px) {
  /* 2026-09-08 헤드라인이 길어져 34%에서는 구절 중간에 끊겼다 → 카피 열을 40%로 넓힘 */
  .hero__layout { grid-template-columns: minmax(19rem, 40%) 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; padding-right: 0; }
}
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hero__eyebrow { margin: 0 0 1rem; font-size: 0.86rem; font-weight: 700; color: var(--accent); }
.hero__title {
  font-family: var(--serif-kr); font-weight: 800; margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.28; letter-spacing: -0.02em; word-break: keep-all;
}
.hero__sub { margin: 1.2rem 0 0; font-size: clamp(0.98rem, 1.3vw, 1.08rem); line-height: 1.75; color: var(--ink-2); word-break: keep-all; }
.hero__sub strong { color: var(--ink); font-weight: 700; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.hero__navlabel { font-size: 0.78rem; color: var(--ink-3); margin: 1.8rem 0 0; }
/* 캐러셀 좌우 화살표(.hero__nav / .navbtn)는 2026-09-18 제거 — 마크업에서 빠진 지 오래고,
   지금은 자동 슬라이드 + 드래그 + 진행 바가 그 역할을 한다. 되살릴 땐 git 이력에서. */

.showcase { min-width: 0; }
.showcase__track {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
  touch-action: pan-x pan-y; /* pan-y 만 두면 가로 터치 스크롤이 막힘 — 모바일 슬라이드 불가 원인 */
}
.showcase__track::-webkit-scrollbar { display: none; }
.showcase__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.showcase__track.is-dragging img { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .showcase__track { scroll-behavior: auto; } }
/* 자동 슬라이드 중에는 스냅을 끈다 — mandatory 스냅은 매 프레임 scrollLeft를 바꾸는 흐름과
   싸워서 트랙이 카드 경계로 튕겨 돌아온다. 모바일(터치·자동재생 없음)은 스냅 그대로. */
.showcase__track.is-auto { scroll-snap-type: none; scroll-behavior: auto; }
/* 2026-09-18 가장자리 페이드(mask-image) 넣었다가 뺐다 — 사용자 요청.
   "잘린 이미지"로 보이는 문제는 자동 슬라이드(움직임)만으로 해결한다. */
.proj { display: flex; flex-direction: column; scroll-snap-align: start; flex: 0 0 clamp(15rem, 26vw, 21rem); border: 1px solid var(--line); background: var(--paper); }
.proj__shot { position: relative; display: block; overflow: hidden; background: var(--paper-2); }
.proj__shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; transition: transform 0.5s var(--ease); }
.proj:hover .proj__shot img { transform: scale(1.04); }
.proj__tag { position: absolute; top: 0.6rem; left: 0.6rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; background: rgba(23, 20, 13, 0.82); color: var(--paper); padding: 0.2rem 0.55rem; border-radius: 2px; }
.proj__bar { background: var(--ink); color: var(--paper); padding: 0.85rem 0.9rem 0.95rem; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; transition: background 0.3s var(--ease); }
.proj:hover .proj__bar { background: var(--hover-img); }
.proj__name { font-family: var(--serif-kr); font-weight: 700; font-size: 0.98rem; line-height: 1.3; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; word-break: keep-all; }
.proj__en { font-family: var(--serif); font-weight: 500; letter-spacing: 0.02em; font-size: 0.76rem; color: rgba(244, 240, 231, 0.6); }
.proj__meta { font-size: 0.78rem; color: rgba(244, 240, 231, 0.62); word-break: keep-all; }
.proj:hover .proj__en, .proj:hover .proj__meta { color: rgba(255, 255, 255, 0.85); }
.showcase__progress { position: relative; height: 2px; background: var(--line); margin-top: 1.2rem; }
@media (min-width: 900px) { .showcase__progress { margin-right: var(--edge); } }
.showcase__progress span { position: absolute; top: 0; left: 0; height: 100%; width: 30%; background: var(--ink); transition: left 0.25s var(--ease), width 0.25s var(--ease); }

/* =========================================================================
   PROBLEM v4 — 번호 3열(산세리프 볼드) + 잉크 브리지 바
   ========================================================================= */
/* ⚠️ padding 값 주의 — 아래쪽 구 v3 블록에 .problem 이 한 번 더 선언돼 있었고(같은 선택자, 나중 순서라
   그쪽이 이기고 있었다) 실제 화면은 계속 clamp(4rem, 9vw, 8rem) 로 그려지고 있었다.
   2026-09-18 중복을 없애면서 '지금 보이는 값'을 남긴다(정리하다 여백이 줄어드는 일이 없도록).
   v4 의도값은 clamp(3.5rem, 7vw, 6rem) 이었다 — 여백을 줄이려면 이 값으로. */
.problem { background: var(--paper-2); padding: clamp(4rem, 9vw, 8rem) 0; border-top: 1px solid var(--line); }
.facts { margin: 1.2rem 0 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
@media (min-width: 800px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.fact { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 800px) {
  .fact { padding: 1.9rem 1.6rem 1.9rem 0; border-bottom: 0; }
  .fact + .fact { padding-left: 1.6rem; border-left: 1px solid var(--line); }
}
.fact__no { font-family: var(--serif); font-size: 1rem; color: var(--accent); }
.fact__t { margin: 0.7rem 0 0; font-family: var(--sans); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); word-break: keep-all; }
.fact__s { margin: 0.7rem 0 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.7; word-break: keep-all; }
.bridge {
  margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.5rem;
  background: var(--ink); color: var(--paper); padding: 1.1rem 1.4rem;
  font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.2rem); word-break: keep-all;
}
.bridge__go { display: inline-flex; align-items: center; gap: 0.35rem; color: #e6a08f; font-size: 0.88rem; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* 왜 사바나 — 화이트 로고 행 (플레이트 없이 네이비 위에 직접, 높이 통일) */
/* 로고는 여백을 잘라낸 화이트 전용본(wl-*.png). 글자 높이가 같아 보이도록 로고별 높이 지정 */
/* 폭이 제각각인 로고를 flex-wrap으로 흘리면 줄이 들쭉날쭉해짐 →
   고정 높이 행 × 2열 그리드로 셀을 만들고, 셀 안에서 좌측·수직 중앙 정렬 */
/* 2026-09-07 사용자 시안: 로고 2열 그리드 + 두 열 사이 세로 괘선(2×2도 가운데 한 줄만), 로고 크게 */
.logos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 2.7rem;
  align-items: center;
  justify-items: start;
  column-gap: 2.4rem;
  row-gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.logos::before { content: ''; position: absolute; left: 50%; top: 0.2rem; bottom: 0.2rem; width: 1px; background: var(--on-dark-line); }
.logos--single { grid-template-columns: minmax(0, 1fr); }
.logos--single::before { display: none; }
.logos > a { display: contents; }   /* 링크는 박스 없이 — img가 그대로 grid 셀이 되게 */
.logos .wl { display: block; width: auto; max-width: 100%; max-height: 100%; opacity: 0.95; transition: opacity 0.25s var(--ease); }
.logos a:hover .wl { opacity: 1; }
.wl--widocs  { height: 2rem;    }   /* 말풍선 마크 + 위닥스 */
.wl--wisite  { height: 1.45rem; }   /* WiSite 워드마크(글자가 꽉 참) */
.wl--intra   { height: 1.1rem;  }   /* INTRA MAGAZINE 대문자(11:1) */
.wl--issueday{ height: 1.9rem;  }   /* 상단 소형 태그 포함 → 워드마크 기준 */
.wl--kpop    { height: 2.1rem;  }   /* 마이크 아이콘 포함(글자는 박스의 45%) */
.wl--sabana  { height: 1.75rem; }   /* 마크 + SABANA MEDIA */

/* 위닥스 — 라벨 대신 로고 */
.wd__logo { display: inline-block; margin-bottom: 1.1rem; }
.wd__logo img { height: clamp(2.3rem, 3.6vw, 3rem); width: auto; }

/* =========================================================================
   WHY — 왜 위닥스·위사이트 → 왜 사바나미디어 (네이비, 3열 흐름 + 기대효과)
   ========================================================================= */
.label--dark { color: #e6a08f; }
.why { background: var(--navy); color: var(--on-dark); padding: clamp(4rem, 8vw, 7rem) 0; }
.why__title { margin: 0; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.35rem); line-height: 1.28; word-break: keep-all; color: #f6f1e6; }
.why__desc { margin: 1.3rem 0 0; max-width: 70ch; color: var(--on-dark-2); line-height: 1.8; word-break: keep-all; }
.why__desc strong { color: #f6f1e6; }

.flowmap { margin: clamp(2.6rem, 5vw, 4rem) 0 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--on-dark-line); }
@media (min-width: 900px) { .flowmap { grid-template-columns: 1fr 1.25fr 1fr; } }
.flowmap__col { position: relative; padding: 1.8rem 0 1.8rem; border-bottom: 1px solid var(--on-dark-line); }
@media (min-width: 900px) {
  .flowmap__col { padding: 2rem 1.8rem 2rem 0; border-bottom: 0; }
  .flowmap__col + .flowmap__col { padding-left: 1.8rem; border-left: 1px solid var(--on-dark-line); }
  .flowmap__col + .flowmap__col::before { content: '→'; position: absolute; left: -0.55rem; top: 2.1rem; color: var(--accent); background: var(--navy); padding: 0 0.15rem; font-family: var(--serif); font-size: 1.1rem; }
}
.flowmap__col--core { background: rgba(255, 255, 255, 0.04); }
@media (min-width: 900px) { .flowmap__col--core { padding-left: 1.8rem; padding-right: 1.8rem; } }
.flowmap__no { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--serif); font-size: 0.9rem; margin-bottom: 0.9rem; }
.flowmap__h { margin: 0 0 0.9rem; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: #f6f1e6; word-break: keep-all; }
.flowmap__list { display: grid; gap: 0.5rem; font-size: 0.93rem; color: var(--on-dark-2); }
.flowmap__list li { padding-left: 1rem; position: relative; word-break: keep-all; }
.flowmap__list li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 5px; height: 1px; background: #e6a08f; }
.flowmap__list--tag li { padding-left: 0; }
.flowmap__list--tag li::before { display: none; }
.flowmap__list--tag b { display: block; color: #f6f1e6; font-weight: 700; }
.flowmap__list--tag b a { color: inherit; text-decoration: underline; text-decoration-color: rgba(230, 160, 143, 0.55); text-underline-offset: 0.2em; }
.flowmap__list--tag b a:hover { color: #e6a08f; text-decoration-color: #e6a08f; }
.flowmap__list--tag span { display: block; font-size: 0.8rem; color: var(--on-dark-2); margin-top: 0.1rem; }
.flowmap__list--tag li + li { margin-top: 0.4rem; padding-top: 0.6rem; border-top: 1px dashed var(--on-dark-line); }
/* "+ 자체 매거진 4개 매체" — 버튼(펼침). 펼치면 매체 로고 2×2 플레이트, 각각 사이트 링크 */
.flowmap__plus {
  margin: 1rem 0 0; padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: 0.35rem; font: inherit; font-size: 0.86rem; color: #e6a08f; font-weight: 700;
  border-bottom: 1px solid rgba(230, 160, 143, 0.45); padding-bottom: 2px; transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.flowmap__plus:hover { color: #f6f1e6; border-color: #f6f1e6; }
.flowmap__plus-ic { width: 0.95em; height: 0.95em; transition: transform 0.25s var(--ease); }
.flowmap__plus[aria-expanded="true"] .flowmap__plus-ic { transform: rotate(180deg); }
/* ⚠️ 클래스의 display가 hidden 속성(UA display:none)을 덮어써 닫힌 상태에도 자리를 차지하던 버그 → 명시적으로 숨김 */
.flowmap__media[hidden], .mcta[hidden], .totop[hidden] { display: none !important; }
.flowmap__media {
  margin-top: 0.9rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.flowmap__media.is-open { opacity: 1; transform: none; }
.flowmap__media a {
  display: flex; align-items: center; justify-content: center; min-height: 3.4rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--on-dark-line); border-radius: 2px; background: rgba(255, 255, 255, 0.04); transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.flowmap__media a:hover { border-color: var(--hover-img-dark); background: rgba(255, 255, 255, 0.08); }
.flowmap__media .wl { display: block; width: auto; max-width: 100%; opacity: 0.95; }
.flowmap__media .wl--intra { height: 0.85rem; }
.flowmap__media .wl--issueday { height: 1.5rem; }
.flowmap__media .wl--kpop { height: 1.6rem; }
.flowmap__media .wl--widocs { height: 1.55rem; }

/* 검색창 형태 — 환자가 실제로 입력하는 화면을 연상시키는 UI */
.searchset { display: grid; gap: 0.9rem; }
.sbar__k { display: block; font-size: 0.76rem; color: var(--on-dark-2); margin-bottom: 0.35rem; }
.sbar {
  display: flex; align-items: center; gap: 0.5rem;
  background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 4px;
  padding: 0.6rem 0.75rem; min-height: 2.5rem;
  font-size: 0.9rem; color: #2b2721; line-height: 1.35; word-break: keep-all;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.sbar__ic { flex: 0 0 auto; width: 1rem; height: 1rem; color: #5d574c; }
.sbar__q { flex: 1 1 auto; min-width: 0; }
/* 입력 커서 */
.sbar__caret { flex: 0 0 auto; width: 1px; height: 1.05em; background: var(--accent); animation: sbar-blink 1.1s steps(1) infinite; }
@keyframes sbar-blink { 50% { opacity: 0; } }
/* AI 질문 — 검색이 아니라 대화형 입력으로 구분 */
.sbar--ai { background: #14202e; border-color: rgba(255, 255, 255, 0.35); color: #f2ece0; }
.sbar__badge {
  flex: 0 0 auto; display: inline-grid; place-items: center; height: 1.15rem; padding: 0 0.35rem;
  background: var(--accent); color: #fff; border-radius: 2px;
  font-family: var(--serif); font-size: 0.7rem; letter-spacing: 0.02em;
}
@media (prefers-reduced-motion: reduce) { .sbar__caret { animation: none; } }

.gains { margin-top: clamp(2.6rem, 5vw, 4rem); }
.gains__grid { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--on-dark-line); }
@media (min-width: 640px) { .gains__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .gains__grid { grid-template-columns: repeat(3, 1fr); } }
.gains__grid > div { padding: 1.2rem 1.2rem 1.2rem 0; border-bottom: 1px solid var(--on-dark-line); }
@media (min-width: 640px) { .gains__grid > div:nth-child(2n) { padding-left: 1.2rem; border-left: 1px solid var(--on-dark-line); } }
@media (min-width: 1000px) {
  .gains__grid > div:nth-child(2n) { padding-left: 0; border-left: 0; }
  .gains__grid > div:nth-child(3n+2), .gains__grid > div:nth-child(3n) { padding-left: 1.2rem; border-left: 1px solid var(--on-dark-line); }
}
.gains__grid dt { margin: 0; font-family: var(--serif-kr); font-weight: 700; color: #f6f1e6; font-size: 1.02rem; }
.gains__grid dt::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; background: var(--accent); margin-right: 0.55rem; vertical-align: 0.05em; }
.gains__grid dd { margin: 0.45rem 0 0; font-size: 0.9rem; line-height: 1.7; color: var(--on-dark-2); word-break: keep-all; }

.whyus { margin-top: clamp(2.6rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 2px solid #e6a08f; }
.whyus__h { margin: 0 0 1rem; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.7rem); color: #f6f1e6; word-break: keep-all; }
.whyus__list { display: grid; gap: 1.6rem; grid-template-columns: 1fr; margin-top: 1.6rem; }
.whyus__list li { font-size: 0.93rem; line-height: 1.75; color: var(--on-dark-2); word-break: keep-all; }
.whyus__list li + li { padding-top: 1.4rem; border-top: 1px solid var(--on-dark-line); }
/* 데스크톱: 3열 + 열 사이 세로 괘선(시안) */
@media (min-width: 900px) {
  .whyus__list { grid-template-columns: repeat(3, 1fr); gap: 0 2.6rem; }
  .whyus__list li + li { padding-top: 0; border-top: 0; padding-left: 2.6rem; border-left: 1px solid var(--on-dark-line); }
}
.whyus__list b { display: block; color: #f6f1e6; font-size: 1.05rem; margin-bottom: 0.5rem; }

/* 우리 회사부터 증명 — 사바나미디어 자체 노출 실증(WHY 다크 섹션 안, 캡처 2장) */
.selfproof { margin-top: clamp(2.6rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 2px solid #e6a08f; }
.selfproof__h { margin: 0.35rem 0 0.7rem; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.3; color: #f6f1e6; word-break: keep-all; }
.selfproof__p { margin: 0; max-width: 66ch; color: var(--on-dark-2); line-height: 1.8; word-break: keep-all; }
.selfproof__site { color: #f6f1e6; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: #e6a08f; }
.selfproof__site:hover { color: #e6a08f; }
.selfproof__grid figure a { display: block; }
.selfproof__grid figure a:hover img { border-color: var(--hover-img-dark); }
.selfproof__grid { margin-top: 1.6rem; display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
@media (min-width: 760px) { .selfproof__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
/* 1행(네이버 2.3:1 / 구글 3.46:1)은 동일 비율 박스 + contain + 흰 배경으로 높이를 맞추고,
   2행 AI 개요(2.48:1)는 두 칸을 합쳐 원본 비율로 크게 — 글자가 읽히게 */
.selfproof__grid img { width: 100%; height: auto; aspect-ratio: 2.8 / 1; object-fit: contain; object-position: left top; border: 1px solid rgba(255, 255, 255, 0.14); background: #fff; }
.selfproof__wide { grid-column: 1 / -1; }
.selfproof__wide img { aspect-ratio: auto; }
.selfproof__grid figcaption { margin-top: 0.6rem; font-size: 0.8rem; color: var(--on-dark-2); word-break: keep-all; }
/* 모바일: 가로 스크롤 없이 화면 폭에 맞춤 — <picture>로 모바일 전용 크롭(-m.webp)을 내려 글자가 읽히게 */
@media (max-width: 759px) {
  .selfproof__grid { gap: 1.2rem; }
  .selfproof__grid img { width: 100%; max-width: 100%; aspect-ratio: auto; }
}

/* =========================================================================
   WIDOCS — 실제 UI 대형 + 용어 정의(dl), 교차 배치
   ========================================================================= */
.wd { padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); }
.feature {
  display: grid; gap: 1.6rem 3rem; align-items: center;
  margin-top: clamp(2.8rem, 5.5vw, 4.5rem);
  padding-left: var(--edge); padding-right: var(--edge);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding-right: var(--edge); }
  .feature--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .feature--rev .feature__fig { order: 2; }
}
/* 2026-09-08 — 한 블록에 한 장씩이라 높이를 맞출 상대가 없다. 고정 비율 박스(8/5)는
   원본과 안 맞아 흰 레터박스만 만들었으므로 자연 비율로 되돌린다. */
.feature__fig a, .evidence__grid figure a, .aiproof__fig a { display: block; }
.feature__fig a:hover img, .evidence__grid figure a:hover img, .aiproof__fig a:hover img { border-color: var(--hover-img); }
.feature__fig img { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--line); }
.feature__fig figcaption { margin-top: 0.6rem; font-size: 0.78rem; color: var(--ink-3); }
.terms { margin: 0; display: grid; gap: 1.6rem; }
.term dt { margin: 0; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.35; word-break: keep-all; }
.term__en { display: block; font-family: var(--serif); font-weight: 500; font-size: 0.86rem; color: var(--accent); margin-bottom: 0.35rem; letter-spacing: 0.02em; }
.term dd { margin: 0.55rem 0 0; color: var(--ink-2); line-height: 1.75; font-size: 0.96rem; word-break: keep-all; }

/* 검색 노출 실증 — 사용자 제공 네이버 캡처 2장 */
.evidence { margin-top: clamp(2.8rem, 5.5vw, 4.5rem); }
.evidence__head { max-width: 62ch; }
.evidence__h { margin: 0.35rem 0 0.6rem; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.2rem, 2.1vw, 1.55rem); word-break: keep-all; }
.evidence__head p { margin: 0; color: var(--ink-2); line-height: 1.75; word-break: keep-all; }
.evidence__grid { margin-top: 1.6rem; display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
@media (min-width: 760px) { .evidence__grid { grid-template-columns: 1fr 1fr; } }
.evidence__grid img { width: 100%; height: auto; aspect-ratio: 23 / 25; object-fit: contain; border: 1px solid var(--line); background: #fff; }
.evidence__grid figcaption { margin-top: 0.6rem; font-size: 0.8rem; color: var(--ink-3); word-break: keep-all; }
/* 모바일: 검색 캡처를 화면 폭에 맞춰 축소하면 글자를 못 읽음 →
   원본 폭으로 두고 좌우 스크롤해서 읽게 한다 */
/* 모바일(2026-09-07 변경): 가로 스크롤 대신 화면 폭에 맞춰 통째로 — 세로 캡처라 폭 맞춤으로도 읽힘 */
@media (max-width: 759px) {
  .evidence__grid img { width: 100%; max-width: 100%; height: auto; aspect-ratio: auto; }
}

/* AI 인용 실증 (위사이트) */
/* 위 샘플 블록과 분리되도록 괘선 + 여백. DOM은 제목→이미지 순(모바일 그대로), 데스크톱만 이미지를 왼쪽으로 */
.aiproof { margin-top: clamp(2.8rem, 5.5vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr; gap: 1.4rem 3rem; align-items: center; }
@media (min-width: 900px) { .aiproof { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .aiproof__fig { order: -1; } }

/* 제작 형태 샘플 2장 — 원페이지 랜딩 / 정식 사이트 */
.samples { margin: 1.6rem 0 0; display: grid; grid-template-columns: 1fr; gap: 1.2rem; text-align: left; }
@media (min-width: 640px) { .samples { grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; } }
.sample { display: block; }
.sample__shot { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.sample__shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; display: block; transition: transform 0.5s var(--ease); }
.sample:hover .sample__shot img { transform: scale(1.03); }
.sample__tag { position: absolute; top: 0.6rem; left: 0.6rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; background: rgba(23, 20, 13, 0.82); color: var(--paper); padding: 0.2rem 0.55rem; border-radius: 2px; }
.sample__cap { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.7rem; font-size: 0.82rem; color: var(--ink-3); word-break: keep-all; }
.sample__cap strong { color: var(--ink); font-size: 0.95rem; }
.aiproof__fig img { width: 100%; height: auto; border: 1px solid var(--line); background: #fff; }
.aiproof__fig figcaption { margin-top: 0.6rem; font-size: 0.78rem; color: var(--ink-3); word-break: keep-all; }
.aiproof__h { margin: 0.35rem 0 0.7rem; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.2rem, 2.1vw, 1.55rem); word-break: keep-all; }
.aiproof__body p { margin: 0; color: var(--ink-2); line-height: 1.75; word-break: keep-all; }

/* =========================================================================
   FAQ — 정의형 목록(카드·아코디언 금지: AI 크롤러가 답을 바로 읽도록 펼쳐둠)
   ========================================================================= */
.faq { background: var(--paper); padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid var(--line); }
.faq__list { margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0; display: grid; grid-template-columns: 1fr; gap: 0 3rem; }
@media (min-width: 900px) { .faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq__item { border-top: 1px solid var(--line); padding: 1.3rem 0 1.5rem; }
.faq__item dt { margin: 0; display: flex; gap: 0.7rem; align-items: flex-start; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.02rem, 1.5vw, 1.15rem); line-height: 1.45; color: var(--ink); word-break: keep-all; }
.faq__no { flex: 0 0 auto; font-family: var(--serif); font-weight: 500; font-size: 0.86rem; color: var(--accent); letter-spacing: 0.02em; padding-top: 0.2em; }
.faq__item dd { margin: 0.7rem 0 0 2.05rem; font-size: 0.93rem; line-height: 1.8; color: var(--ink-2); word-break: keep-all; }

/* =========================================================================
   PLEDGE — 네이비 전면 전환 섹션 (기존 확정 정책 문구 유지)
   ========================================================================= */
.pledge { background: var(--accent); color: #fff; padding: clamp(3.5rem, 7vw, 6rem) 0; }
.pledge__grid { display: grid; gap: 1.8rem 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .pledge__grid { grid-template-columns: 1.4fr 1fr; } }
.pledge__title { margin: 0; font-family: var(--serif-kr); font-weight: 900; font-size: clamp(1.8rem, 4vw, 3.1rem); line-height: 1.22; word-break: keep-all; }
/* em은 기울임만 끄고 굵기는 제목과 같이 간다. 원래 여기서 weight를 400으로 떨어뜨렸는데,
   --serif가 진짜 세리프였던 시절의 장치(굵은 고딕 사이에 얇은 세리프 한 단어)였다.
   2026-09-08에 --serif도 Noto Sans KR이 되면서 의미가 사라지고, 정작 핵심 단어인 '무료'만
   얇아지고 어미 '입니다'가 제일 굵어 보이는 상태가 됐다. 굵기 강약은 단어 뜻에 맞을 때만 쓴다. */
.pledge__title em { font-style: normal; }
.pledge__note { margin: 1rem 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); word-break: keep-all; }
.pledge__cond { margin: 0.6rem 0 0; font-size: 0.78rem; color: rgba(255, 255, 255, 0.72); word-break: keep-all; }
.pledge__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; }
@media (min-width: 900px) { .pledge__cta { justify-content: flex-end; } }

/* =========================================================================
   WISITE — 중앙 헤드 + 실제 사례 3 라인업 + 설계 흐름
   ========================================================================= */
.ws { padding: clamp(4rem, 8vw, 7rem) 0; }
.ws__head { max-width: 760px; margin: 0 auto; text-align: center; }
.ws__logolink { display: inline-block; margin: 0 auto 1.6rem; }
.ws__logo { height: 1.7rem; width: auto; margin: 0; display: block; }
.ws__title { margin: 0; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: 1.18; letter-spacing: -0.01em; word-break: keep-all; }
/* 한 문단에 다 넣으면 가운데 정렬 나열이 되어 읽기 어려움 →
   핵심 한 문장(리드) + 좌측 정렬 2항목 정의로 분리 */
.ws__desc { margin: 1.5rem auto 0; color: var(--ink-2); font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.75; word-break: keep-all; max-width: 54ch; }
.ws__desc strong { color: var(--ink); }
.wsspec {
  margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
  display: grid; grid-template-columns: 1fr; gap: 1.2rem 2.6rem; text-align: left;
}
@media (min-width: 760px) { .wsspec { grid-template-columns: 1fr 1fr; } }
.wsspec > div { border-top: 1px solid var(--line); padding-top: 0.9rem; }
.wsspec dt { margin: 0 0 0.35rem; font-family: var(--serif); font-weight: 500; font-size: 0.86rem; letter-spacing: 0.02em; color: var(--accent); }
.wsspec dd { margin: 0; font-size: 0.93rem; line-height: 1.75; color: var(--ink-2); word-break: keep-all; }
.wsspec dd strong { color: var(--ink); font-weight: 700; }

.cases {
  margin-top: clamp(2.8rem, 5.5vw, 4.5rem);
  display: grid; gap: 1.2rem; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-left: var(--edge); padding-right: var(--edge);
}
.case { display: block; position: relative; }
.case img { width: 100%; height: auto; border: 1px solid var(--line); transition: transform 0.5s var(--ease); }
.case:hover img { transform: translateY(-4px); }
/* 3개 사례는 같은 선에 정렬 — 엇갈린 배치(margin-top 오프셋) 사용 안 함 */
.case__cap { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.8rem; font-size: 0.86rem; color: var(--ink-3); }
.case__cap strong { color: var(--ink); font-size: 0.98rem; }
@media (max-width: 899px) {
  .cases { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; scrollbar-width: none; }
  .cases::-webkit-scrollbar { display: none; }
  .case { flex: 0 0 min(72vw, 20rem); scroll-snap-align: start; }
}

/* 진행 과정 스텝 — 번호·점·괘선·한 줄 설명. 데스크톱 6열 / 태블릿 3열 / 모바일 세로 타임라인 */
.steps__label { margin: clamp(3rem, 6vw, 5rem) 0 0; }
.steps { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 1.4rem; }
.steps li { position: relative; padding-top: 1.3rem; border-top: 1px solid var(--line); min-width: 0; }
.steps li::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.steps li.is-result::before { background: var(--accent); }
.steps__no { display: block; font-family: var(--serif); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink-3); }
.steps strong { display: block; margin-top: 0.3rem; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.3; word-break: keep-all; }
.steps li.is-result strong { color: var(--accent); }
.steps__desc { display: block; margin-top: 0.4rem; font-size: 0.8rem; line-height: 1.55; color: var(--ink-3); word-break: keep-all; }
@media (max-width: 999px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 1.4rem; } }
@media (max-width: 599px) {
  .steps { grid-template-columns: 1fr; gap: 0; border-left: 1px solid var(--line); padding-left: 1.2rem; margin-top: 1rem; }
  .steps li { border-top: 0; padding: 0.75rem 0; }
  .steps li::before { top: 1.05rem; left: calc(-1.2rem - 5px); }
  .steps li + li { border-top: 1px dashed var(--line); }
}
/* 가격 패널 — 헤드(가격 · 안내) + 제작 형태 2종 카드(원페이지 랜딩 / 정식 사이트) + 링크 행. 모바일 1열·중앙 정렬 */
.wsdeal {
  margin-top: clamp(2.4rem, 4.5vw, 3.5rem); border: 1px solid var(--line); background: var(--card);
  padding: clamp(1.5rem, 3.2vw, 2.4rem); display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
.wsdeal__head { text-align: center; max-width: 60ch; margin: 0 auto; }
.wsdeal__k { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--accent); letter-spacing: 0.02em; }
.wsdeal__v { margin: 0.25rem 0 0; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.25; word-break: keep-all; }
.wsdeal__n { margin: 0.7rem 0 0; font-size: 0.84rem; color: var(--ink-3); line-height: 1.65; word-break: keep-all; }
.wsdeal__offers { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.offer { background: var(--paper); padding: clamp(1.2rem, 2.4vw, 1.7rem); display: flex; flex-direction: column; }
.offer--full { background: var(--paper-2); }
.offer__tag { margin: 0; display: inline-block; align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.22rem 0.55rem; background: var(--ink); color: var(--paper); border-radius: 2px; }
.offer__h { margin: 0.8rem 0 0; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.35; word-break: keep-all; }
.offer__list { margin: 0.8rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; font-size: 0.86rem; line-height: 1.6; color: var(--ink-2); }
.offer__list li { position: relative; padding-left: 0.9rem; word-break: keep-all; }
.offer__list li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 5px; height: 1px; background: var(--accent); }
.offer__price { margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px dashed var(--line-strong); font-family: var(--serif-kr); font-weight: 700; font-size: 1.15rem; }
.offer__price::before { content: '가격'; display: block; font-family: var(--sans); font-weight: 700; font-size: 0.72rem; color: var(--accent); margin-bottom: 0.2rem; }
.offer__act { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem; }
.offer__act .btn { flex: 1 1 auto; justify-content: center; }
.wsdeal__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.4rem; }
@media (min-width: 700px) {
  .wsdeal__offers { grid-template-columns: 1fr 1fr; }
  .offer__act .btn { flex: 0 0 auto; }
}

/* =========================================================================
   PACKAGES — 루트 페이지 3종 (열 구분선, 통합 강조)
   ========================================================================= */
.pk { background: var(--paper-2); padding: clamp(4rem, 8vw, 7rem) 0; border-top: 1px solid var(--line); }
.pk__grid { margin-top: clamp(2.2rem, 4.5vw, 3.5rem); display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink); }
@media (min-width: 900px) { .pk__grid { grid-template-columns: 1fr 1.15fr 1fr; } }
.pk__col { position: relative; padding: 1.8rem 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .pk__col { padding: 2rem 1.6rem 2rem 0; border-bottom: 0; }
  .pk__col + .pk__col { padding-left: 1.6rem; border-left: 1px solid var(--line); }
  .pk__col--main { padding-left: 1.6rem; padding-right: 1.6rem; }
}
.pk__col--main { background: var(--card); box-shadow: inset 0 3px 0 var(--accent); padding-top: 2.2rem; }
.pk__badge { margin: 0 0 0.8rem; align-self: flex-start; font-size: 0.74rem; font-weight: 700; color: #fff; background: var(--accent); padding: 0.25rem 0.6rem; }
.pk__name { margin: 0; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.15rem, 1.9vw, 1.4rem); word-break: keep-all; }
.pk__tag { margin: 0.4rem 0 1rem; font-size: 0.86rem; color: var(--accent); font-weight: 700; word-break: keep-all; }
.pk__list { display: grid; gap: 0.55rem; margin: 0 0 1.4rem; font-size: 0.92rem; color: var(--ink-2); flex: 1; }
.pk__list li { padding-left: 1.1rem; position: relative; word-break: keep-all; line-height: 1.6; }
.pk__list li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 6px; height: 1px; background: var(--accent); }
.pk__col .btn { align-self: flex-start; }
.pk__foot { margin: 1.2rem 0 0; font-size: 0.82rem; color: var(--ink-3); word-break: keep-all; line-height: 1.7; }

/* =========================================================================
   매거진 — 좌 카피 / 우 다크 이미지 카드 3 (모바일 가로 스크롤)
   ========================================================================= */
.mg { padding: clamp(4rem, 8vw, 7rem) 0; }
.mg__grid { display: grid; grid-template-columns: 1fr; gap: 2rem 3rem; align-items: center; }
@media (min-width: 1000px) { .mg__grid { grid-template-columns: minmax(16rem, 30%) 1fr; } }
.mg__desc { margin: 1.2rem 0 1.6rem; color: var(--ink-2); line-height: 1.8; word-break: keep-all; }
.mg__desc strong { color: var(--ink); }
.mg__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); min-width: 0; }
.mcard { position: relative; min-height: 20rem; background: #0a0d12 var(--bg) center top / cover no-repeat; color: #fff; display: flex; align-items: flex-end; overflow: hidden; cursor: pointer; }
.mcard::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 12, 0.25) 0%, rgba(5, 7, 12, 0.55) 45%, rgba(5, 7, 12, 0.92) 100%); transition: background 0.3s var(--ease); }
.mcard:hover::before { background: linear-gradient(180deg, rgba(5, 7, 12, 0.12) 0%, rgba(5, 7, 12, 0.45) 45%, rgba(5, 7, 12, 0.9) 100%); }
.mcard__in { position: relative; padding: 1.4rem 1.3rem 1.3rem; width: 100%; }
.mcard__name { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.05; letter-spacing: 0.01em; color: #fff; }
.mcard__name--serif { font-style: normal; font-weight: 500; }
.mcard__cat { margin: 0.6rem 0 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.72); word-break: keep-all; }
.mcard__links { display: flex; align-items: center; gap: 1.2rem; margin-top: 1rem; }
.mcard__visit { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.88rem; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding-bottom: 1px; }
.mcard .share { color: rgba(255, 255, 255, 0.65); }
.mcard .share:hover { color: #fff; }

/* 매거진 제작 상품 — 이 페이지에서 유일하게 실제 금액을 쓰는 블록 */
.mgmake { margin-top: clamp(2.6rem, 5vw, 4rem); border: 1px solid var(--line); padding: clamp(1.5rem, 3.2vw, 2.4rem); display: grid; gap: 1.6rem; }
.mgmake__h { margin: 0.35rem 0 0.6rem; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.6rem); word-break: keep-all; }
.mgmake__p { margin: 0; max-width: 62ch; color: var(--ink-2); line-height: 1.75; word-break: keep-all; }
.mgmake__price { margin: 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .mgmake__price { grid-template-columns: repeat(3, 1fr); } }
.mgmake__price > div { background: var(--paper); padding: 1.1rem 1.2rem; }
.mgmake__price dt { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--accent); }
.mgmake__price dd { margin: 0.35rem 0 0; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.1; }
.mgmake__price dd small { display: block; margin-top: 0.3rem; font-family: var(--sans); font-weight: 500; font-size: 0.74rem; color: var(--ink-3); }
.mgmake__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.mgmake__opt { margin: 0; font-size: 0.86rem; color: var(--ink-3); word-break: keep-all; }
.mgmake__opt strong { color: var(--ink); font-weight: 700; margin-right: 0.35rem; }
@media (max-width: 640px) {
  .mg__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.8rem; background: none; border: 0; scrollbar-width: none; }
  .mg__cards::-webkit-scrollbar { display: none; }
  .mcard { flex: 0 0 min(72vw, 18rem); scroll-snap-align: start; border: 1px solid var(--line); }
}

/* =========================================================================
   PROOF v4 — "결과로 증명합니다": 수치 행 + 인증 소형 + 제휴병원 롤링
   ========================================================================= */
.pf { background: var(--paper-2); padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
/* 2026-09-08 레이아웃 변경 — 종전 좌/우 2열은 좌측(등록·인증 4항목)이 우측(인증서 롤)보다
   훨씬 길어 우측 아래에 큰 빈 칸이 남았다. 세로로 쌓고 등록·인증 목록만 2열로 편다. */
.pf__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.4rem, 4.5vw, 3.4rem); align-items: start; }
/* 검증된 기반 — 수치 대신 등록·인증 사실 4항목(좌측 네이비 마커 + 제목/근거) */
.creds { margin: 1.8rem 0 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .creds { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); } }
.creds > div { position: relative; padding: 0.95rem 0 0.95rem 1.1rem; border-top: 1px solid var(--line); }
.creds > div:last-child { border-bottom: 1px solid var(--line); }
/* 2열일 때는 각 열의 마지막 칸에 아래 괘선 — 3·4번째가 열의 끝이 된다 */
@media (min-width: 760px) { .creds > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); } }
.creds > div::before { content: ''; position: absolute; left: 0; top: 1.35rem; width: 5px; height: 5px; background: var(--accent); }
.creds dt { margin: 0; font-family: var(--serif-kr); font-weight: 700; font-size: 1.02rem; line-height: 1.35; word-break: keep-all; }
.creds dd { margin: 0.3rem 0 0; font-size: 0.86rem; line-height: 1.65; color: var(--ink-3); word-break: keep-all; }
.pf__venture { margin: 0 0 1rem; font-size: 0.95rem; color: var(--ink-2); word-break: keep-all; line-height: 1.7; }
/* 인증서 — 우측 칼럼 안에서만 자동 슬라이딩(마퀴). 가로 전면 사용 안 함 */
.certroll {
  margin-top: 1.2rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.certroll__track { display: flex; width: max-content; animation: roll 55s linear infinite; }
.certroll:hover .certroll__track { animation-play-state: paused; }
.certroll__set { display: flex; align-items: flex-start; gap: clamp(0.7rem, 1.6vw, 1.2rem); padding-right: clamp(0.7rem, 1.6vw, 1.2rem); }
/* 서류마다 비율이 조금씩 달라 width:auto면 폭이 들쭉날쭉 →
   높이·폭을 고정한 흰 카드에 contain으로 담고 테두리를 준다 */
.certroll { --cert-h: clamp(6.5rem, 9vw, 8.5rem); }
.certroll__set img {
  display: block; height: var(--cert-h); width: calc(var(--cert-h) * 0.73);
  object-fit: contain; background: #fff; padding: 0.25rem;
  border: 1px solid rgba(23, 20, 13, 0.18); border-radius: 6px;
  box-shadow: 0 1px 3px rgba(23, 20, 13, 0.07);
}
@media (prefers-reduced-motion: reduce) {
  .certroll__track { animation: none; flex-wrap: wrap; width: auto; }
  .certroll__set:nth-child(2) { display: none; }
  .certroll { -webkit-mask-image: none; mask-image: none; }
  .certroll__set { flex-wrap: wrap; }
}
.pf__grid + .wrap { margin-top: clamp(2.4rem, 4.5vw, 3.5rem); }
.roll { margin-top: 1rem; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.roll__track { display: flex; width: max-content; animation: roll 36s linear infinite; }
.roll:hover .roll__track { animation-play-state: paused; }
.roll__set { display: flex; align-items: center; }
.roll__set li { display: grid; place-items: center; width: 13rem; height: 5.5rem; padding: 0 1.2rem; }
.roll__set img { max-height: 2.2rem; max-width: 100%; width: auto; height: auto; object-fit: contain; }
@keyframes roll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .roll__track { animation: none; flex-wrap: wrap; width: auto; } .roll__set:nth-child(2) { display: none; } .roll { -webkit-mask-image: none; mask-image: none; } }

.roll__set li a { display: contents; }   /* li가 grid 중앙정렬이라 링크는 박스 없이 — img가 그대로 정렬 대상 */
.roll__set li a img { opacity: 0.9; transition: opacity 0.25s var(--ease); }
.roll__set li a:hover img { opacity: 1; }

/* 카카오톡 채널 — 위닥스 문의도 이 채널 하나로 */
.kakao { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.6rem; padding: 0.85rem 1.3rem; background: #fee500; color: #191919; font-weight: 700; font-size: 0.94rem; border-radius: 3px; transition: filter 0.2s var(--ease); }
.kakao:hover { filter: brightness(0.95); }
.kakao svg { width: 1.15rem; height: 1.15rem; }
.kakao .btn__ic { width: 0.9em; height: 0.9em; opacity: 0.7; }

/* =========================================================================
   CONTACT — 네이비 마무리
   ========================================================================= */
.contact { background: var(--navy); color: var(--on-dark); padding: clamp(4rem, 8vw, 7rem) 0; }
.contact__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1fr; } }
.contact__title { margin: 0; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.8rem, 3.8vw, 2.9rem); line-height: 1.2; color: #f6f1e6; word-break: keep-all; }
.contact__title em { font-style: normal; color: #e6a08f; }
.contact__desc { margin: 1.2rem 0 2rem; color: var(--on-dark-2); line-height: 1.75; max-width: 44ch; word-break: keep-all; }
.ways li { border-top: 1px solid var(--on-dark-line); }
.ways li:last-child { border-bottom: 1px solid var(--on-dark-line); }
/* a만 display:contents — span까지 포함하면 라벨 폭(5rem)이 무너져 값 시작선이 어긋남 */
.ways li > a { display: contents; }
.ways li { display: flex; align-items: baseline; gap: 1.2rem; padding: 0.95rem 0; }
.ways__k { flex: 0 0 5rem; font-size: 0.8rem; color: var(--on-dark-2); }
.ways__v { font-weight: 700; font-size: 1.02rem; color: #f6f1e6; }
.ways__v--addr { font-weight: 500; font-size: 0.92rem; line-height: 1.55; word-break: keep-all; }
.ways a:hover .ways__v { color: #e6a08f; }

.form { background: var(--card); color: var(--ink); padding: clamp(1.5rem, 3vw, 2.2rem); }
.f2 { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .f2 { grid-template-columns: 1fr; } }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--ink-2); margin-bottom: 0.4rem; }
/* 선택지 문구가 길어 모바일에서 잘리지 않도록 */
.field select { text-overflow: ellipsis; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: 0.72rem 0.85rem;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 6rem; }
.form__note { margin: 0.8rem 0 0; font-size: 0.76rem; color: var(--ink-3); text-align: center; }
.form__err { margin: 0.8rem 0 0; font-size: 0.84rem; color: var(--accent); text-align: center; word-break: keep-all; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* 허니팟 */
.form [data-form-submit][disabled] { opacity: 0.6; cursor: wait; }
.form__ok { text-align: center; padding: 2rem 1rem; }
.form__ok h3 { font-family: var(--serif-kr); margin: 0 0 0.5rem; }
.form__ok p { margin: 0; color: var(--ink-2); }

/* =========================================================================
   푸터 · 토스트
   ========================================================================= */
.foot { background: var(--navy-2); color: rgba(244, 240, 231, 0.7); padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem; }
.foot__top { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; justify-content: space-between; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.foot__logo { height: 26px; width: auto; }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.3rem; font-size: 0.85rem; }
.foot__links a:hover { color: #fff; }
/* 기업 정보(NAP) — 본사 푸터와 같은 값. 괘선 격자, 라벨은 흐리게·값은 또렷하게 */
.foot__biz { display: block; font-style: normal; margin-top: 1.4rem; padding-bottom: 1.3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.foot__biz-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 2rem; font-size: 0.78rem; line-height: 1.55; }
@media (min-width: 760px) { .foot__biz-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foot__biz-list > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.foot__biz-wide { grid-column: span 2; }
.foot__biz-list dt { margin: 0; color: rgba(244, 240, 231, 0.55); font-size: 0.72rem; letter-spacing: 0.01em; }
.foot__biz-list dd { margin: 0; color: rgba(244, 240, 231, 0.8); word-break: keep-all; }
.foot__biz-list dd a:hover { color: #fff; }
.foot__bottom { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; justify-content: space-between; margin-top: 1.3rem; font-size: 0.78rem; color: rgba(244, 240, 231, 0.55); }

.toast { position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 10px); background: var(--ink); color: var(--paper); padding: 0.7rem 1.4rem; border-radius: 3px; font-size: 0.86rem; opacity: 0; pointer-events: none; z-index: 90; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* 맨 위로 — 우측 하단 고정. 사각형(알약 금지) */
.totop {
  position: fixed; bottom: clamp(1.1rem, 3vw, 2rem); right: clamp(0.9rem, 3vw, 2rem); z-index: 45;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem; cursor: pointer;
  width: 3rem; padding: 0.55rem 0; border: 1px solid var(--line-strong); border-radius: 3px;
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ink); font: inherit; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.totop.is-on { opacity: 1; transform: none; }
.totop:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.totop__ic { width: 1.05rem; height: 1.05rem; }
@media (max-width: 600px) { .totop { width: 2.6rem; padding: 0.45rem 0; font-size: 0.56rem; } .totop__ic { width: 0.95rem; height: 0.95rem; } }

/* 모바일 하단 고정 CTA(카카오·전화) — 760px 미만에서만. 등장 시 TOP 버튼·토스트는 바 위로 올림 */
.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 48; display: none;
  grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-strong);
  border-top: 1px solid var(--line-strong); padding-bottom: env(safe-area-inset-bottom);
  opacity: 0; transform: translateY(100%); transition: opacity 0.25s var(--ease), transform 0.3s var(--ease);
}
.mcta.is-on { opacity: 1; transform: none; }
.mcta a { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 3.3rem; font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }
.mcta__kakao { background: #fee500; color: #191919; }
.mcta__kakao svg { width: 1.15rem; height: 1.15rem; }
.mcta__tel { background: var(--ink); color: var(--paper); font-family: var(--serif); font-size: 1.05rem; }
.mcta__ic { width: 1rem; height: 1rem; }
@media (max-width: 759px) {
  .mcta { display: grid; }
  html.has-mcta .totop { bottom: calc(3.3rem + 1px + env(safe-area-inset-bottom) + 0.8rem); }
  html.has-mcta .toast { bottom: calc(3.3rem + 1px + env(safe-area-inset-bottom) + 1rem); }
}

/* =========================================================================
   광고가 아닙니다 — 위닥스 섹션 마지막 다리 블록(→ 위사이트로 이어짐)
   ========================================================================= */
.noad { margin-top: clamp(2.8rem, 5.5vw, 4.5rem); padding-top: clamp(1.8rem, 3.5vw, 2.6rem); border-top: 2px solid var(--ink); }
.noad__h { margin: 0.35rem 0 0.8rem; font-family: var(--serif-kr); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.35; word-break: keep-all; }
.noad__p { margin: 0; max-width: 70ch; color: var(--ink-2); line-height: 1.8; word-break: keep-all; }
.noad__p strong { color: var(--ink); font-weight: 700; }
.noad__steps { list-style: none; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 860px) { .noad__steps { grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1.6rem, 3vw, 2.8rem); } }
.noad__steps li { position: relative; padding: 1.2rem 0 1.2rem 1.2rem; border-top: 1px solid var(--line); }
.noad__steps li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .noad__steps li:last-child { border-bottom: 0; } }
.noad__steps li::before { content: ''; position: absolute; left: 0; top: 1.55rem; width: 5px; height: 5px; background: var(--accent); }
/* 마지막 단계는 위사이트로 넘어가는 지점이라 강조 */
.noad__steps li:last-child strong { color: var(--accent); }
.noad__no { display: block; font-size: 0.76rem; letter-spacing: 0.06em; color: var(--ink-3); }
.noad__steps strong { display: block; margin-top: 0.3rem; font-family: var(--serif-kr); font-weight: 700; font-size: 1.02rem; line-height: 1.35; word-break: keep-all; }
.noad__steps span:last-child { display: block; margin-top: 0.45rem; font-size: 0.86rem; line-height: 1.65; color: var(--ink-3); word-break: keep-all; }