/* pm-motion 20260921e — 온다마케팅 모션 체계
   원칙: transform·opacity 만 건드린다(레이아웃 재계산 없음) · 자바스크립트가 없어도 내용은 그대로 보인다
   · prefers-reduced-motion 이면 전부 멈춘다. site.css 의 reduce 규칙이 !important 로 한 번 더 덮는다. */

:root {
  --pm-ease: cubic-bezier(.22, .7, .3, 1);
  --pm-dur: .62s;
  --hm-marquee-gap: 56px;
}

/* ── 1. 매체 로고 마퀴 ───────────────────────────────────────────
   .hm-media-logos 는 원래 6칸 그리드다. JS 가 트랙으로 감싸면서 is-marquee 를 붙일 때만 흐른다.
   이동거리 = 한 세트 + 간격 1개 = calc(-50% - gap/2). 아이템 2n 개에 간격 2n-1 개라서 이 식이 정확하다. */
.hm-media-logos.is-marquee {
  display: block;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.hm-media-logos.is-marquee .hm-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: var(--hm-marquee-gap);
  animation: hm-marquee var(--hm-marquee-dur, 34s) linear infinite;
  will-change: transform;
}
/* 원래 6칸 그리드용 규칙(width:100% · max-width:116px · margin:auto)이 흐르는 줄에서는 어긋난다.
   높이 30px 만 유지하고 가로는 비율대로 둔다. */
.hm-media-logos.is-marquee .hm-marquee-track > img {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  height: 30px;
  margin: 0;
  transition: opacity .3s var(--pm-ease);
}
.hm-media-logos.is-marquee .hm-marquee-track > img:hover { opacity: 1; }
.hm-media-logos.is-marquee:hover .hm-marquee-track,
.hm-media-logos.is-marquee:focus-within .hm-marquee-track { animation-play-state: paused; }
@keyframes hm-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - var(--hm-marquee-gap) / 2), 0, 0); }
}

/* ── 2. 스크롤 등장 ──────────────────────────────────────────────
   [data-pm-reveal] 는 JS 가 붙인다. 그래서 JS 가 없으면 이 규칙이 아예 안 걸리고 내용은 처음부터 보인다. */
@media (prefers-reduced-motion: no-preference) {
  [data-pm-reveal] {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity var(--pm-dur) var(--pm-ease), transform var(--pm-dur) var(--pm-ease);
    transition-delay: var(--pm-delay, 0ms);
  }
  [data-pm-reveal].is-in { opacity: 1; transform: none; }
}

/* ── 3. 히어로 진입 ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .pm-hero-intro > * { animation: pm-rise .74s var(--pm-ease) both; }
  .pm-hero-intro > *:nth-child(2) { animation-delay: .07s; }
  .pm-hero-intro > *:nth-child(3) { animation-delay: .14s; }
  .pm-hero-intro > *:nth-child(4) { animation-delay: .21s; }
  @keyframes pm-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
}

/* ── 4. 헤더 ─────────────────────────────────────────────────────
   .pm-header 는 position:sticky 다. 스크롤이 시작되면 그림자로 떠 있는 상태를 알려 준다. */
.pm-header { transition: box-shadow .32s var(--pm-ease), border-color .32s var(--pm-ease); }
.pm-header.is-stuck { box-shadow: 0 8px 26px rgba(23, 54, 47, .07); border-bottom-color: rgba(219, 230, 223, .4); }

/* ── 5. 마이크로 인터랙션 ────────────────────────────────────────
   포인터가 있는 기기에서만. 터치에서는 hover 가 눌린 뒤 남아 어색하다. */
@media (hover: hover) and (pointer: fine) {
  .hm-service, .hm-reference, .pm-story-card, .pm-digest article {
    transition: transform .34s var(--pm-ease), box-shadow .34s var(--pm-ease);
  }
  .hm-service:hover, .hm-reference:hover, .pm-story-card:hover, .pm-digest article:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 16px 36px rgba(23, 54, 47, .10);
  }
  .hm-reference:hover .hm-reference-image img, .pm-story-card:hover > img { transform: scale(1.035); }
  .hm-reference-image img, .pm-story-card > img { transition: transform .6s var(--pm-ease); }
  .hm-reference-image, .pm-story-card { overflow: hidden; }

  .pm-btn, .pm-nav-cta, .pm-float > a, .pm-mobile-bar a {
    transition: transform .2s var(--pm-ease), box-shadow .2s var(--pm-ease), filter .2s var(--pm-ease);
  }
  .pm-btn:hover, .pm-nav-cta:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 10px 22px rgba(23, 54, 47, .14); }
  .pm-float > a:hover { filter: brightness(.96); }

  /* 본문 인라인 링크 — 밑줄이 왼쪽에서 자라난다 */
  .pm-text-link, .hm-text-link {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .32s var(--pm-ease);
  }
  .pm-text-link:hover, .hm-text-link:hover { background-size: 100% 1px; }
}
.pm-btn:active, .pm-nav-cta:active, .pm-float > a:active { transform: translate3d(0, 1px, 0); }

/* ── 6. 되감기 ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hm-media-logos.is-marquee .hm-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .hm-media-logos.is-marquee .hm-marquee-clone { display: none; }
  [data-pm-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ── 7. 모바일 가로 넘김 레일 (2026-09-21) ────────────────────────
   왜: 모바일에서 카드 묶음이 전부 1열로 떨어져 페이지가 세로로 길어진다.
       실측(390px) — 홈 6,129px(7.3화면) · 문서 5,946px(7.0화면). 문서마다 들어가는
       pm-digest 만 500px 를 쓴다. 옆으로 넘기게 바꾸면 그 자리가 카드 한 장 높이로 줄고,
       손가락으로 넘기는 게 세로로 한참 내리는 것보다 빠르다.
   방식: flex + scroll-snap. 카드 폭을 100% 보다 좁게 둬서 다음 카드가 살짝 보인다(넘길 수 있다는 신호).
   안전: :has(> :nth-child(2)) 로 아이가 2개 이상일 때만 건다. :has 를 모르는 브라우저는 지금 모습 그대로다. */
@media (max-width: 640px) {
  .hm-service-list:has(> :nth-child(2)),
  .hm-reference-grid:has(> :nth-child(2)),
  .hm-journal-grid:has(> :nth-child(2)),
  .hm-story-stack:has(> :nth-child(2)),
  .pm-digest > div:has(> :nth-child(2)),
  .pm-directory:has(> :nth-child(2)),
  .reference-grid:has(> :nth-child(2)),
  .pm-form-intro ol:has(> :nth-child(2)),
  .asset-grid:has(> :nth-child(2)),
  .cards:has(> :nth-child(2)),
  .link-grid:has(> :nth-child(2)),
  .hub-grid:has(> :nth-child(2)),
  .topic-grid:has(> :nth-child(2)) {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .hm-service-list::-webkit-scrollbar, .hm-reference-grid::-webkit-scrollbar,
  .hm-journal-grid::-webkit-scrollbar, .hm-story-stack::-webkit-scrollbar,
  .pm-digest > div::-webkit-scrollbar, .pm-directory::-webkit-scrollbar,
  .reference-grid::-webkit-scrollbar, .pm-form-intro ol::-webkit-scrollbar,
  .asset-grid::-webkit-scrollbar, .cards::-webkit-scrollbar,
  .link-grid::-webkit-scrollbar, .hub-grid::-webkit-scrollbar,
  .topic-grid::-webkit-scrollbar { display: none; }

  .hm-service-list:has(> :nth-child(2)) > *,
  .hm-reference-grid:has(> :nth-child(2)) > *,
  .hm-journal-grid:has(> :nth-child(2)) > *,
  .hm-story-stack:has(> :nth-child(2)) > *,
  .pm-digest > div:has(> :nth-child(2)) > *,
  .pm-directory:has(> :nth-child(2)) > *,
  .reference-grid:has(> :nth-child(2)) > *,
  .pm-form-intro ol:has(> :nth-child(2)) > *,
  .asset-grid:has(> :nth-child(2)) > *,
  .cards:has(> :nth-child(2)) > *,
  .link-grid:has(> :nth-child(2)) > *,
  .hub-grid:has(> :nth-child(2)) > *,
  .topic-grid:has(> :nth-child(2)) > * {
    flex: 0 0 var(--pm-rail-w, 84%);
    scroll-snap-align: start;
    min-width: 0;
  }
  /* 카드 성격에 따라 폭을 달리 준다 — 이미지 카드는 좁게, 글 카드는 넓게 */
  .reference-grid { --pm-rail-w: 62%; }
  .pm-directory { --pm-rail-w: 72%; }
  .pm-form-intro ol { --pm-rail-w: 68%; }
  .pm-digest > div { --pm-rail-w: 80%; }

  /* 넘길 수 있다는 것을 오른쪽 페이드로 알린다 */
  .hm-service-list:has(> :nth-child(2)), .hm-reference-grid:has(> :nth-child(2)),
  .hm-journal-grid:has(> :nth-child(2)), .pm-digest > div:has(> :nth-child(2)),
  .pm-directory:has(> :nth-child(2)), .reference-grid:has(> :nth-child(2)) {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  }

  /* 세로 여백 정리 — 문서 섹션 간격을 32→24px */
  .pm-document > section:not(.pm-consult) { margin: 24px 0; }
}

/* ── 8. 레일 추가분 · 출처 접기 (2026-09-21 2차) ──────────────── */
@media (max-width: 640px) {
  .hm-journey-steps:has(> :nth-child(2)),
  .dt-checks:has(> :nth-child(2)) {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  }
  .hm-journey-steps::-webkit-scrollbar, .dt-checks::-webkit-scrollbar { display: none; }
  .hm-journey-steps:has(> :nth-child(2)) > *,
  .dt-checks:has(> :nth-child(2)) > * { flex: 0 0 78%; scroll-snap-align: start; min-width: 0; }

  /* 출처 목록 접기 — 링크 목록이 화면 절반을 쓴다. 본문·설명은 그대로 두고 목록만 접는다.
     motion.js 가 details 로 감싸며, 스크립트가 없으면 예전처럼 펼쳐진 채로 보인다. */
  .pm-source-fold { margin-top: 10px; }
  .pm-source-fold > summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 700; color: var(--pm-green, #17362f);
    border: 1px solid var(--pm-line, #dbe6df); border-radius: 999px; padding: 9px 16px;
  }
  .pm-source-fold > summary::-webkit-details-marker { display: none; }
  .pm-source-fold > summary::after { content: "▾"; font-size: 11px; }
  .pm-source-fold[open] > summary::after { content: "▴"; }
  .pm-source-fold > ul { margin-top: 14px; }
}

/* ── 9. 버튼 글자색 되돌리기 (2026-09-21) ─────────────────────────
   증상: 초록 알약 버튼에 초록 글자 — 대비 1.00 으로 라벨이 아예 안 보였다. 7개 페이지.
   원인: `.doc-cta a, .bottom-cta a, .ref-bottom-cta a { color: var(--pm-green) }` 가
        특이도 0,1,1 로 `.blue-cta-btn`(0,1,0) 을 이긴다. 링크 색 규칙이 버튼까지 먹은 것.
   조치: 같은 특이도(0,1,1)로 뒤에서 되돌린다. motion.css 가 맨 끝이라 이긴다. */
a.pm-btn, a.blue-cta-btn, a.asset-btn, a.pm-nav-cta, a.pm-float-primary { color: #fff; }

/* .ghost-cta-btn 은 CSS 규칙이 아예 없어서 맨 링크로 나오고 있었다 — 외곽선 버튼으로 세운다 */
.ghost-cta-btn, a.ghost-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 15px 27px;
  color: var(--pm-green, #087d68); background: #fff;
  border: 1px solid var(--pm-green, #087d68); border-radius: 100px;
  font-size: 16px; font-weight: 700; line-height: 1.45; text-align: center;
}
.ref-cta-btns, .doc-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 640px) {
  .ghost-cta-btn, a.ghost-cta-btn { min-height: 48px; padding: 13px 22px; font-size: 15px; width: 100%; }
  .ref-cta-btns > a, .doc-cta-btns > a { width: 100%; }
}

/* ── 10. 문의에 필요 없는 것 접기 (2026-09-21) ────────────────────
   모바일에서 표·보조 자료가 화면을 길게 먹는다. 지우지 않고 접는다 —
   내용은 DOM 에 그대로 있어 색인에도 영향이 없고, 필요한 사람은 펼쳐 본다. */
.pm-fold { margin: 14px 0; }
.pm-fold > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--pm-green, #087d68);
  border: 1px solid var(--pm-line, #dbe6df); border-radius: 999px; padding: 9px 16px;
  background: #fff;
}
.pm-fold > summary::-webkit-details-marker { display: none; }
.pm-fold > summary::after { content: "▾"; font-size: 11px; }
.pm-fold[open] > summary::after { content: "▴"; }
.pm-fold > *:not(summary) { margin-top: 14px; }

/* ── 11. 레퍼런스 페이지네이션 (2026-09-21) ───────────────────── */
.pm-pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 28px 0 8px; }
.pm-pager button {
  min-width: 40px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--pm-line, #dbe6df); border-radius: 10px;
  background: #fff; color: var(--pm-ink, #17362f);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.pm-pager button[aria-current="page"] { background: var(--pm-green, #087d68); border-color: var(--pm-green, #087d68); color: #fff; }
.pm-pager button:disabled { opacity: .4; cursor: default; }
.pm-pager-info { width: 100%; text-align: center; font-size: 13px; color: var(--pm-gray, #5f7268); margin-top: 6px; }