/*
Theme Name: JnD Base
Theme URI: https://jndsoft.co.kr
Author: JnDSOFT
Description: 소상공인·전문 서비스 홈페이지 공통 부모 테마. 고객사별 차이는 자식 테마(theme.json 팔레트·패턴 카피)와 콘텐츠로만 흡수한다.
Version: 0.5.4
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: jnd-base
*/

/* 전역 보정. 디자인 토큰은 theme.json 이 SSoT — 여기서는 theme.json 으로 표현 못 하는 것만 다룬다.
   패턴은 클래스 이름만 붙이고, 모양은 전부 여기서 정한다(찍어내기: 자식 테마는 팔레트·카피만). */

:root {
  --jnd-header-h: 4.75rem; /* 헤더 실제 높이(패딩 1rem×2 + 버튼 44px). 히어로 당김·스냅 착지·앵커 여백이 모두 이 값을 쓴다 */
  --jnd-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --jnd-radius: 16px;
  --jnd-shadow-card: 0 1px 2px rgba(11, 18, 32, 0.04), 0 8px 24px -12px rgba(11, 18, 32, 0.12);
  --jnd-shadow-card-hover: 0 2px 4px rgba(11, 18, 32, 0.04), 0 20px 40px -16px rgba(11, 18, 32, 0.2);
}

/* 한글: 어절 단위 줄바꿈. 코어가 제목에 거는 word-break:break-word 를 되돌린다 (큰 글자에서 단어 중간 끊김 방지) */
body {
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4,
.wp-block-heading,
.wp-block-post-title {
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}
/* 코어 컬럼이 word-break:break-word 를 걸어 자손 문단까지 어절 중간에서 끊긴다 — body 와 같은 규칙으로 되돌린다 */
.wp-block-column {
  word-break: keep-all;
}
html {
  scroll-behavior: smooth;
}
[id] {
  scroll-margin-top: calc(var(--jnd-header-h) + 1rem);
}

/* 루트 레이아웃: 코어가 최상위 형제(header·main·footer) 사이에 루트 blockGap 을 margin 으로 넣는다.
   헤더 보더 아래·푸터 배경 위에 빈 띠가 생기므로 이 간격만 0 으로. 블록 내부 간격(--wp--style--block-gap)은 그대로 둔다 */
.wp-site-blocks > * + * {
  margin-block-start: 0;
}

/* 짧은 페이지(문의 등)에서도 푸터가 화면 하단에 붙도록: 루트를 최소 뷰포트 높이 세로 플렉스로 두고 푸터를 아래로 민다 */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
.wp-site-blocks > footer.wp-block-template-part {
  margin-block-start: auto;
}

/* ==========================================================================
   타이포 역할 — 크기는 태그(h1~h4)와 아래 클래스만 정한다. 패턴에서 fontSize 를 직접 고르지 않는다
   ========================================================================== */

.jnd-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--primary);
  margin-bottom: 0.75rem;
}
.jnd-eyebrow::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.has-text-align-center.jnd-eyebrow {
  justify-content: center;
}
h3.jnd-figure {
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.jnd-note {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

/* 섹션 머리: 아이브로우 + 제목 + 리드. 카드 열과 왼쪽 정렬을 맞추기 위해 alignwide 그룹으로 감싼다 */
.jnd-section__head {
  max-width: 44rem;
  margin-bottom: var(--wp--preset--spacing--50);
}
.jnd-section__head > * + * {
  margin-block-start: 0.75rem;
}
.jnd-section__head h2 {
  font-weight: 800;
  letter-spacing: -0.03em;
}
.jnd-section__lead {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.55;
}
.jnd-section__head.has-text-align-center,
.jnd-section__head.is-centered {
  margin-inline: auto;
  text-align: center;
}
.jnd-section__head.is-centered .jnd-eyebrow {
  justify-content: center;
}

/* ==========================================================================
   헤더 — sticky. 히어로가 첫 섹션이면 그 위에 투명하게 얹히고, 스크롤하면 블러 면으로 바뀐다
   ========================================================================== */

/* sticky 는 템플릿 파트 래퍼(<header>)에. .jnd-header 그룹에 걸면 래퍼 높이가 같아 붙을 공간이 없어 스크롤과 함께 사라진다 */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
}
/* 600px 이하에서는 관리자 바가 absolute 라 함께 스크롤된다 → 헤더는 화면 맨 위에 */
@media (max-width: 600px) {
  .wp-site-blocks > header.wp-block-template-part {
    top: 0;
  }
}
.jnd-header {
  position: relative;
  min-height: var(--jnd-header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--wp--preset--color--base) 84%, transparent);
  border-bottom: 1px solid var(--wp--preset--color--border);
  transition: background-color 0.35s var(--jnd-ease), border-color 0.35s var(--jnd-ease), color 0.35s var(--jnd-ease);
}
/* 블러는 가상 요소에. 헤더 자체에 backdrop-filter 를 걸면 fixed 자손(모바일 메뉴 오버레이)의 기준 상자가 되어 헤더 안에 갇힌다 */
.jnd-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
.jnd-header > * {
  flex: 1;
}
.jnd-header .wp-block-site-title a,
.jnd-header .wp-block-navigation a {
  color: inherit;
  text-decoration: none;
}
.jnd-header .wp-block-navigation .wp-block-navigation-item__content {
  position: relative;
  padding: 0.25rem 0;
  opacity: 0.82;
  transition: opacity 0.2s var(--jnd-ease);
}
.jnd-header .wp-block-navigation .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--wp--preset--color--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--jnd-ease);
}
.jnd-header .wp-block-navigation .wp-block-navigation-item__content:hover {
  opacity: 1;
}
.jnd-header .wp-block-navigation .wp-block-navigation-item__content:hover::after {
  transform: scaleX(1);
}
.jnd-header .wp-block-button__link {
  padding: 0.6rem 1.1rem;
}

/* 히어로 위 오버레이 — JS 가 있을 때만(html.jnd-js). 히어로는 헤더 높이만큼 위로 당기고 투명 보더로 그만큼 채운다.
   배경은 border-box 까지 칠해지므로 보더 영역도 히어로 색이다 */
html.jnd-js .wp-block-post-content > .jnd-hero:first-child {
  margin-top: calc(-1 * var(--jnd-header-h));
  border-top: var(--jnd-header-h) solid transparent;
}
html.jnd-js:not(.is-scrolled) body:has(.wp-block-post-content > .jnd-hero:first-child) .jnd-header {
  background: transparent;
  border-color: transparent;
  color: var(--wp--custom--hero--text);
}
html.jnd-js:not(.is-scrolled) body:has(.wp-block-post-content > .jnd-hero:first-child) .jnd-header::before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.jnd-js:not(.is-scrolled) body:has(.wp-block-post-content > .jnd-hero:first-child) .jnd-header .wp-block-navigation .wp-block-navigation-item__content::after {
  background: var(--wp--custom--hero--accent);
}
/* 모바일 오버레이 메뉴는 항상 밝은 면 위 본문색 */
.jnd-header .wp-block-navigation__responsive-container.is-menu-open {
  color: var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--base);
}
.jnd-header .wp-block-navigation__responsive-container-open,
.jnd-header .wp-block-navigation__responsive-container-close {
  color: inherit;
}

/* ==========================================================================
   버튼
   ========================================================================== */

.wp-block-button__link {
  transition: transform 0.2s var(--jnd-ease), box-shadow 0.2s var(--jnd-ease), background-color 0.2s var(--jnd-ease), color 0.2s var(--jnd-ease), border-color 0.2s var(--jnd-ease);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--primary-soft);
}

/* ==========================================================================
   카드
   ========================================================================== */

.jnd-card {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--jnd-radius);
  background: var(--wp--preset--color--base);
  box-shadow: var(--jnd-shadow-card);
  transition: transform 0.3s var(--jnd-ease), box-shadow 0.3s var(--jnd-ease), border-color 0.3s var(--jnd-ease);
}
.jnd-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--jnd-shadow-card-hover);
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--wp--preset--color--border));
}
.jnd-card > h3 {
  margin-block-start: 0;
}
.jnd-card > * + * {
  margin-block-start: 0.6rem;
}

/* 아이콘 카드: 패턴은 `jnd-card jnd-card--icon jnd-icon--{이름}` 만 붙인다. 카드 패딩은 spacing|30 고정(::after 위치 기준) */
.jnd-card--icon {
  position: relative;
  --jnd-card-pad: var(--wp--preset--spacing--30);
  --jnd-chip: 3rem;
}
.jnd-card--icon::before {
  content: "";
  display: block;
  width: var(--jnd-chip);
  height: var(--jnd-chip);
  border-radius: 12px;
  background: var(--wp--preset--color--primary-soft);
  margin-bottom: 1.25rem;
}
.jnd-card--icon::after {
  content: "";
  position: absolute;
  top: var(--jnd-card-pad);
  left: var(--jnd-card-pad);
  width: var(--jnd-chip);
  height: var(--jnd-chip);
  background: var(--wp--preset--color--primary);
  -webkit-mask: var(--jnd-icon) center / 1.5rem 1.5rem no-repeat;
  mask: var(--jnd-icon) center / 1.5rem 1.5rem no-repeat;
}

/* 아이콘 줄: 문단 앞에 아이콘 하나 (연락처·정보 줄) */
.jnd-iconline {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.jnd-iconline::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.3em;
  background: var(--wp--preset--color--primary);
  -webkit-mask: var(--jnd-icon) center / contain no-repeat;
  mask: var(--jnd-icon) center / contain no-repeat;
}

/* 아이콘 세트 (Lucide 계열 선 아이콘, stroke 2). 색은 mask 로 칠하므로 팔레트를 따른다 */
.jnd-icon--globe    { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/><path d='M2 12h20'/></svg>"); }
.jnd-icon--phone-off{ --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92V20a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-3.33-2.67'/><path d='M8.6 8.6A19.86 19.86 0 0 1 3.5 5.5 2 2 0 0 1 2 3.5V3a2 2 0 0 1 2-2h3.08a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.6 8.6'/><line x1='2' x2='22' y1='2' y2='22'/></svg>"); }
.jnd-icon--coins    { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='6'/><path d='M18.09 10.37A6 6 0 1 1 10.34 18'/><path d='M7 6h1v4'/><path d='m16.71 13.88.7.71-2.82 2.82'/></svg>"); }
.jnd-icon--layers   { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/><path d='m22 12.18-9.17 4.16a2 2 0 0 1-1.66 0L2 12.18'/><path d='m22 17.18-9.17 4.16a2 2 0 0 1-1.66 0L2 17.18'/></svg>"); }
.jnd-icon--user     { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
.jnd-icon--user-check{ --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><polyline points='16 11 18 13 22 9'/></svg>"); }
.jnd-icon--shield   { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>"); }
.jnd-icon--unlock   { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='11' x='3' y='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 9.9-1'/></svg>"); }
.jnd-icon--clock    { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>"); }
.jnd-icon--sparkles { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/><path d='M20 3v4'/><path d='M22 5h-4'/></svg>"); }
.jnd-icon--chart    { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v16a2 2 0 0 0 2 2h16'/><path d='M18 17V9'/><path d='M13 17V5'/><path d='M8 17v-3'/></svg>"); }
.jnd-icon--building { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='16' height='20' x='4' y='2' rx='2' ry='2'/><path d='M9 22v-4h6v4'/><path d='M8 6h.01'/><path d='M16 6h.01'/><path d='M12 6h.01'/><path d='M12 10h.01'/><path d='M12 14h.01'/><path d='M16 10h.01'/><path d='M16 14h.01'/><path d='M8 10h.01'/><path d='M8 14h.01'/></svg>"); }
.jnd-icon--rocket   { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/><path d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/><path d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/><path d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/></svg>"); }
.jnd-icon--landmark { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='3' x2='21' y1='22' y2='22'/><line x1='6' x2='6' y1='18' y2='11'/><line x1='10' x2='10' y1='18' y2='11'/><line x1='14' x2='14' y1='18' y2='11'/><line x1='18' x2='18' y1='18' y2='11'/><polygon points='12 2 20 7 4 7'/></svg>"); }
.jnd-icon--map-pin  { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>"); }
.jnd-icon--phone    { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); }
.jnd-icon--mail     { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>"); }
.jnd-icon--wrench   { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>"); }
.jnd-icon--file-text{ --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M10 9H8'/><path d='M16 13H8'/><path d='M16 17H8'/></svg>"); }
.jnd-icon--message  { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/></svg>"); }
.jnd-icon--calendar { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v4'/><path d='M16 2v4'/><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M3 10h18'/></svg>"); }
.jnd-icon--scale    { --jnd-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/><path d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/><path d='M7 21h10'/><path d='M12 3v18'/><path d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/></svg>"); }

/* ==========================================================================
   섹션 유형별 보정
   ========================================================================== */

/* 선택 이유: 편집 스타일 — 위 괘선 + 큰 번호 */
.jnd-reasons .wp-block-column {
  border-top: 2px solid var(--wp--preset--color--border);
  padding-top: var(--wp--preset--spacing--30);
  position: relative;
}
.jnd-reasons .wp-block-column::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--wp--preset--color--primary);
}
.jnd-reasons .wp-block-column .jnd-eyebrow {
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
}
.jnd-reasons .wp-block-column .jnd-eyebrow::before {
  display: none;
}

/* 실적: 카드 안 키워드 큰 글자는 본문색, 분류는 아이브로우. 각주는 카드 열(wide)과 왼쪽을 맞춘다 */
.jnd-proof > .jnd-note {
  max-width: var(--wp--style--global--wide-size);
}
.jnd-proof .jnd-card .jnd-eyebrow {
  margin-bottom: 1rem;
}
.jnd-proof .jnd-card h3.jnd-figure {
  color: var(--wp--preset--color--contrast);
}

/* 대표 프로필 */
.jnd-profile .wp-block-media-text__media img {
  border-radius: var(--jnd-radius);
  box-shadow: var(--jnd-shadow-card);
}
.jnd-quote {
  position: relative;
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  line-height: 1.5;
  padding-left: 1.25rem;
  border-left: 3px solid var(--wp--preset--color--primary);
}
.jnd-profile ul {
  padding-left: 0;
  list-style: none;
}
.jnd-profile ul li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--wp--preset--color--muted);
}
.jnd-profile ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--wp--preset--color--primary-soft);
  box-shadow: inset 0 0 0 3px var(--wp--preset--color--primary-soft), inset 0 0 0 10px var(--wp--preset--color--primary);
  transform: scale(0.55);
}

/* FAQ: 카드형 아코디언 + 회전하는 플러스 */
.wp-block-details {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  background: var(--wp--preset--color--base);
  padding: 0 var(--wp--preset--spacing--30);
  transition: border-color 0.25s var(--jnd-ease), box-shadow 0.25s var(--jnd-ease);
}
.wp-block-details + .wp-block-details {
  margin-block-start: 0.75rem;
}
.wp-block-details[open] {
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 40%, var(--wp--preset--color--border));
  box-shadow: var(--jnd-shadow-card);
}
.wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.wp-block-details summary::-webkit-details-marker {
  display: none;
}
.wp-block-details summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--wp--preset--color--primary-soft);
  color: var(--wp--preset--color--primary);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.3s var(--jnd-ease);
}
.wp-block-details[open] summary::after {
  transform: rotate(45deg);
}
.wp-block-details > :not(summary) {
  color: var(--wp--preset--color--muted);
  padding-bottom: 1.1rem;
  margin-block-start: 0;
}

/* 오시는 길: 정보 카드 + 지도 프레임 */
.jnd-info__card {
  border-radius: var(--jnd-radius);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
}
.jnd-info__card > * + * {
  margin-block-start: 0.85rem;
}
.jnd-map {
  border-radius: var(--jnd-radius);
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  min-height: 280px;
}
.jnd-map--empty {
  display: grid;
  place-items: center;
  padding: var(--wp--preset--spacing--40);
}
.jnd-map iframe {
  display: block;
  width: 100%;
  min-height: 320px;
  border: 0;
}

/* CTA 띠: 히어로와 같은 격자 질감 */
.jnd-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.jnd-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 20%, transparent 100%);
}
.jnd-band .is-style-outline .wp-block-button__link {
  color: inherit;
  border-color: rgba(255, 255, 255, 0.35);
}
.jnd-band .is-style-outline .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* 마퀴: 정지 상태는 가운데 정렬 줄바꿈, JS 가 is-animated 를 주면 한 줄로 흐른다 */
.jnd-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.jnd-chip {
  margin: 0;
  white-space: nowrap;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.jnd-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  opacity: 0.6;
}
.jnd-marquee.is-animated .jnd-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.jnd-marquee.is-animated .jnd-marquee__list {
  flex-wrap: nowrap;
  padding-inline-end: var(--wp--preset--spacing--40);
}

/* 사업 라인 카드 */
.jnd-line {
  display: flex;
  flex-direction: column;
}
.jnd-line .wp-block-buttons {
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--20);
}
.jnd-line__price {
  margin-top: 0.25rem;
  font-size: var(--wp--preset--font-size--large);
  letter-spacing: -0.01em;
}
.jnd-line__list {
  padding-left: 0;
  list-style: none;
  color: var(--wp--preset--color--muted);
}
.jnd-line__list li {
  position: relative;
  padding-left: 1.75rem;
}
.jnd-line__list li + li {
  margin-top: 0.4rem;
}
.jnd-line__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--wp--preset--color--primary-soft);
}
.jnd-line__list li::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: calc(0.35em + 0.22rem);
  width: 0.28rem;
  height: 0.52rem;
  border-right: 2px solid var(--wp--preset--color--primary);
  border-bottom: 2px solid var(--wp--preset--color--primary);
  transform: rotate(45deg);
}
.jnd-line.is-featured {
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--border));
  box-shadow: 0 0 0 4px var(--wp--preset--color--primary-soft), var(--jnd-shadow-card);
}

/* 모바일 하단 고정 CTA: 기획안 §8 — 히어로 CTA 항상 노출 */
@media (max-width: 781px) {
  .jnd-sticky-cta {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    margin: 0;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--wp--preset--color--border);
  }
  .jnd-sticky-cta .wp-block-button,
  .jnd-sticky-cta .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
  .jnd-sticky-cta .wp-block-button.is-style-outline {
    display: none;
  }
  body:has(.jnd-sticky-cta) {
    padding-bottom: 4.5rem;
  }
}

/* ==========================================================================
   표현 장치 — 값은 theme.json settings.custom(스타일 변형 trust/bold)이 정한다.
   ========================================================================== */

/* 히어로: 배경·글자·보조색을 hero 토큰에서. 질감은 동심원 1쌍(hero.border) */
.jnd-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--wp--custom--hero--background);
  color: var(--wp--custom--hero--text);
  /* 첫 화면을 꽉 채운다: 뷰포트 높이(svh, 모바일 주소창 제외) 기준. 헤더 오버레이(html.jnd-js)면 헤더까지 포함해 100svh.
     내용이 더 길면 min-height 라 잘리지 않고 늘어난다. 패턴의 상하 padding 은 최소 여백으로 남는다 */
  box-sizing: border-box;
  min-height: calc(100svh - var(--jnd-header-h) - var(--wp-admin--admin-bar--height, 0px));
  display: grid;
  align-content: center;
}
/* grid 안에서는 auto 마진(constrained 레이아웃) 때문에 자식이 콘텐츠 폭으로 줄어든다 → 폭을 고정해 wide/content 상한만 남긴다 */
.jnd-hero > :not(.alignfull) {
  width: 100%;
}
html.jnd-js .wp-block-post-content > .jnd-hero:first-child {
  min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); /* 로그인 시 관리자 바만큼 뺀다 */
}
/* 세로가 짧은 화면(노트북 768px 등)에서도 한 화면에 들어가도록 디스플레이 요소는 svh 상한을 둔다.
   큰 화면에서는 토큰 값이 그대로(min 이 토큰을 고른다) */
.jnd-hero h1 {
  font-size: min(var(--wp--preset--font-size--xx-large), 3.25rem, 7.2svh); /* 히어로 h1 상한 3.25rem */
}
.jnd-hero .jnd-hero__lead {
  font-size: min(var(--wp--preset--font-size--large), 2.4svh);
}
/* 스크롤 스냅(데스크톱): 히어로에서 굴리면 다음 섹션 상단(헤더 아래)에 붙는다. 그 아래부터는 자유 스크롤.
   proximity 라 스냅 지점 근처에서만 당긴다. 홈이 아닌 페이지는 snap-align 요소가 없어 영향 없음 */
@media (min-width: 782px) {
  html {
    scroll-snap-type: y proximity;
  }
  .wp-block-post-content > .jnd-hero:first-child {
    scroll-snap-align: start;
  }
  .wp-block-post-content > .jnd-hero:first-child + * {
    scroll-snap-align: start;
    scroll-margin-top: var(--jnd-header-h);
  }
}
.jnd-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -12vw;
  top: -18vw;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  border: 1px solid var(--wp--custom--hero--border);
  outline: 1px solid var(--wp--custom--hero--border);
  outline-offset: 72px;
  opacity: 0.9;
}
/* 히어로 사진 시각물(`is-style-jnd-scene`): 우측 컬럼 안의 이미지 블록. 컨테이너(wide) 밖으로 나가지 않는다 — 우측 끝은 컬럼 끝.
   컬럼 간격 쪽(좌)으로만 넘겨 크게 보이고, 좌측은 카피 쪽으로 페이드, 나머지 가장자리는 얕게 녹인다. 사진은 자르지 않는다.
   컬럼이 세로로 쌓이는 폭에서는 컬럼 폭 그대로 */
.jnd-hero .is-style-jnd-scene {
  width: 120%;
  max-width: none;
  margin: 0 0 0 -20%;
}
.jnd-hero .is-style-jnd-scene img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 30%, #000 96%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 30%, #000 96%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (max-width: 781px) {
  .jnd-hero .is-style-jnd-scene {
    width: 100%;
    margin: 0;
  }
  .jnd-hero .is-style-jnd-scene img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
/* 히어로 전면 배경(`is-style-jnd-backdrop`): 섹션 첫 자식 이미지 블록을 섹션 전체에 cover 로 깐다. 사진 자체가 좌측 여백·우측 피사체 구도.
   카피는 `.jnd-hero__copy`(782px+ 폭 48%) 로 좌측에 앉히고, 가독성은 좌→우 hero.background 그라데이션 1겹으로 보강. 동심원 질감은 사진과 겹치므로 끈다.
   object-position 우측 기준이라 좁은 화면은 좌측 여백이 먼저 잘리고 피사체는 남는다 */
.jnd-hero .is-style-jnd-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  max-width: none;
}
.jnd-hero .is-style-jnd-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}
.jnd-hero .is-style-jnd-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--wp--custom--hero--background) 78%, transparent) 0%,
    color-mix(in srgb, var(--wp--custom--hero--background) 40%, transparent) 42%,
    transparent 64%);
}
.jnd-hero:has(.is-style-jnd-backdrop)::after {
  display: none;
}
/* 헤더 오버레이(투명 border-top) 띠까지 사진이 깔리도록: 절대배치는 padding 박스 기준이라 border 높이만큼 위로 올린다.
   overflow:hidden 은 padding 박스에서 자르므로 전면 배경일 때는 푼다(넘치는 장식 없음 — 동심원은 off) */
.jnd-hero:has(.is-style-jnd-backdrop) {
  overflow: visible;
}
html.jnd-js .wp-block-post-content > .jnd-hero:first-child .is-style-jnd-backdrop {
  top: calc(-1 * var(--jnd-header-h));
}
/* 카피 그룹은 wide 폭 그대로 두고(constrained 의 auto 마진이 그룹을 가운데로 밀지 않도록) 안쪽 줄 폭만 제한한다 */
@media (min-width: 782px) {
  .jnd-hero .jnd-hero__copy > * {
    max-width: 48%;
  }
}
@media (max-width: 781px) {
  .jnd-hero .is-style-jnd-backdrop::after {
    background: color-mix(in srgb, var(--wp--custom--hero--background) 72%, transparent);
  }
}
.jnd-hero .jnd-eyebrow {
  color: var(--wp--custom--hero--accent);
}
.jnd-hero__muted {
  color: var(--wp--custom--hero--muted);
}
.jnd-hero__lead {
  color: var(--wp--custom--hero--muted);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.55;
  max-width: 34rem;
}
.jnd-hero h1 {
  text-wrap: balance;
}
/* H1 강조어: 편집기 하이라이트(mark + 팔레트 색) 를 배경 없이 색만 */
.jnd-hero h1 mark {
  background: none;
  color: var(--wp--preset--color--primary);
}
/* 화살표 버튼: 패턴은 버튼에 jnd-arrow 만. 화살표는 카피가 아니라 장식 */
.jnd-arrow .wp-block-button__link::after {
  content: "\2192";
  display: inline-block;
  margin-inline-start: 0.5em;
  transition: transform 0.3s var(--jnd-ease);
}
.jnd-arrow .wp-block-button__link:hover::after {
  transform: translateX(3px);
}
.jnd-hero .is-style-outline .wp-block-button__link {
  color: var(--wp--custom--hero--text);
  border-color: var(--wp--custom--hero--border);
}
.jnd-hero .is-style-outline .wp-block-button__link:hover {
  background: var(--wp--custom--hero--surface);
}
.jnd-hero .wp-block-columns {
  gap: var(--wp--preset--spacing--50);
}

/* 히어로 지표: 세로 괘선으로 나누는 유리 카드. 열은 `jnd-metric jnd-icon--{이름}` — 아이콘 타일 + 숫자 + 라벨 + 캡션 */
.jnd-metrics .wp-block-columns {
  gap: 0;
}
.jnd-metrics .wp-block-column {
  padding-inline: var(--wp--preset--spacing--30);
}
.jnd-metrics .wp-block-column:first-child {
  padding-inline-start: 0;
}
.jnd-metrics .wp-block-column + .wp-block-column {
  border-left: 1px solid var(--wp--custom--hero--border);
}
.jnd-metric {
  --jnd-chip: 5rem;
  display: grid;
  grid-template-columns: var(--jnd-chip) 1fr;
  grid-template-rows: repeat(3, auto);
  column-gap: 1.25rem;
  row-gap: 0.2rem;
  align-content: center;
}
.jnd-metric > * {
  grid-column: 2;
  margin-block: 0;
}
.jnd-metric::before,
.jnd-metric::after {
  content: "";
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
  justify-self: center;
}
.jnd-metric::before {
  width: var(--jnd-chip);
  height: var(--jnd-chip);
  border-radius: 18px;
  background: var(--wp--custom--hero--surface);
  border: 1px solid var(--wp--custom--hero--border);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent), 0 12px 30px -16px color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent);
}
.jnd-metric::after {
  width: 2rem;
  height: 2rem;
  background: var(--wp--custom--hero--accent);
  -webkit-mask: var(--jnd-icon) center / contain no-repeat;
  mask: var(--jnd-icon) center / contain no-repeat;
}
.jnd-metric h3.jnd-figure {
  font-size: 2rem; /* 히어로 지표 숫자: large(1.31)와 x-large(2.125) 사이. 본문 proof 카드 figure(x-large)와 구분 */
}
.jnd-metric__label {
  font-weight: 700;
  color: var(--wp--custom--hero--text);
}
@media (max-width: 781px) {
  .jnd-metrics .wp-block-column + .wp-block-column {
    border-left: 0;
    border-top: 1px solid var(--wp--custom--hero--border);
    padding-top: var(--wp--preset--spacing--20);
    margin-top: var(--wp--preset--spacing--20);
  }
  .jnd-metrics .wp-block-column {
    padding-inline: 0;
  }
  .jnd-metric {
    --jnd-chip: 3.5rem;
    column-gap: 1rem;
  }
  .jnd-metric::before {
    border-radius: 14px;
  }
  .jnd-metric::after {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* 프로세스 경로: 히어로 우측 시각물(스크린샷 대안). 패턴은 그룹 `jnd-path` 안에 태그라인 문단 → 순서 목록 `jnd-path__steps`(항목: <strong>제목</strong> + 설명) → 모토 문단.
   곡선은 mask(데이터 URI) 로 그려 팔레트를 따르고, 점·번호는 항목의 pseudo. 좌표(--x/--y)는 곡선 viewBox 800×400 기준 — 항목 4개 고정 */
.jnd-path {
  counter-reset: jnd-step;
}
.jnd-path__tagline {
  text-align: right;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.6;
  color: var(--wp--custom--hero--muted);
}
.jnd-path__tagline::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  margin: 0.75rem 0 0 auto;
  background: var(--wp--preset--color--primary);
}
.jnd-path__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  aspect-ratio: 2 / 1;
}
.jnd-path__steps::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--primary) 5%, var(--wp--preset--color--primary) 80%, transparent 100%);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' preserveAspectRatio='none'><path d='M24,60 C120,60 144,220 216,220 S336,130 408,130 S536,250 608,250 S760,250 800,200' fill='none' stroke='black' stroke-width='2'/></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' preserveAspectRatio='none'><path d='M24,60 C120,60 144,220 216,220 S336,130 408,130 S536,250 608,250 S760,250 800,200' fill='none' stroke='black' stroke-width='2'/></svg>") center / 100% 100% no-repeat;
}
.jnd-path__steps li {
  --jnd-dot: 1.25rem;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 8.5rem;
  margin: 0;
  padding-top: calc(var(--jnd-dot) + 0.9rem);
  transform: translate(calc(var(--jnd-dot) / -2), calc(var(--jnd-dot) / -2));
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
  color: var(--wp--custom--hero--muted);
}
.jnd-path__steps li:nth-child(1) { --x: 3%;  --y: 15%; }
.jnd-path__steps li:nth-child(2) { --x: 27%; --y: 55%; }
.jnd-path__steps li:nth-child(3) { --x: 51%; --y: 32.5%; }
.jnd-path__steps li:nth-child(4) { --x: 76%; --y: 62.5%; }
.jnd-path__steps li::before {
  counter-increment: jnd-step;
  content: counter(jnd-step, decimal-leading-zero);
  position: absolute;
  left: 0.15rem;
  bottom: calc(100% + 0.35rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--wp--custom--hero--accent);
}
.jnd-path__steps li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--jnd-dot);
  height: var(--jnd-dot);
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  border: 0.3rem solid var(--wp--custom--hero--background);
  box-shadow:
    0 0 0 1px var(--wp--custom--hero--border),
    0 0 0 0.45rem color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent),
    0 0 1.6rem color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent);
  animation: jnd-pulse 3.2s var(--jnd-ease) infinite;
}
.jnd-path__steps li:nth-child(2)::after { animation-delay: 0.6s; }
.jnd-path__steps li:nth-child(3)::after { animation-delay: 1.2s; }
.jnd-path__steps li:nth-child(4)::after { animation-delay: 1.8s; }
@keyframes jnd-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--wp--custom--hero--border), 0 0 0 0.45rem color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent), 0 0 1.6rem color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent); }
  50%      { box-shadow: 0 0 0 1px var(--wp--custom--hero--border), 0 0 0 0.7rem  color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent), 0 0 2.2rem color-mix(in srgb, var(--wp--preset--color--primary) 90%, transparent); }
}
.jnd-path__steps li strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--wp--custom--hero--text);
}
.jnd-path__motto {
  margin-top: var(--wp--preset--spacing--30);
  text-align: right;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 2;
  color: var(--wp--custom--hero--muted);
  opacity: 0.7;
}
/* 좁은 폭: 곡선을 접고 세로 타임라인으로 */
@media (max-width: 1023px) {
  .jnd-path__steps {
    aspect-ratio: auto;
    padding-left: 2.25rem;
  }
  .jnd-path__steps::before {
    inset: 0.5rem auto 0.5rem calc(var(--jnd-dot, 1.25rem) / 2 - 1px);
    width: 2px;
    background: linear-gradient(180deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary) 70%, transparent 100%);
    -webkit-mask: none;
    mask: none;
  }
  .jnd-path__steps li {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding-top: 0;
    transform: none;
  }
  .jnd-path__steps li + li {
    margin-top: 1.25rem;
  }
  .jnd-path__steps li::after {
    top: 0.2rem;
    left: -2.25rem;
  }
  .jnd-path__steps li::before {
    position: static;
    display: block;
    margin-bottom: 0.1rem;
  }
  .jnd-path__tagline,
  .jnd-path__motto {
    text-align: left;
  }
  .jnd-path__tagline::after {
    margin-inline: 0;
  }
}

/* 그룹 스타일 jnd-glass: 다크 히어로 위 반투명 카드. 밝은 변형에서는 surface 면 */
.is-style-jnd-glass {
  background: var(--wp--custom--hero--surface);
  border: 1px solid var(--wp--custom--hero--border);
  border-radius: var(--jnd-radius);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* 이미지 스타일 jnd-frame: 브라우저 창 프레임 */
.wp-block-image.is-style-jnd-frame {
  position: relative;
  padding-top: 32px;
  border-radius: 14px;
  overflow: hidden;
  background: #151a26;
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.wp-block-image.is-style-jnd-frame::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840;
}
.wp-block-image.is-style-jnd-frame::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 16px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
}
.wp-block-image.is-style-jnd-frame img {
  display: block;
  width: 100%;
  border-radius: 0;
}

/* 스크롤 리빌: body.jnd-reveal-on(변형 motion.reveal=on) + html.jnd-js(스크립트 동작) 일 때만 숨겼다가 보인다.
   섹션 안 카드 열은 순서대로 조금씩 늦게 나타난다 */
.jnd-reveal,
.jnd-reveal .wp-block-columns > .wp-block-column {
  transition: opacity 0.7s var(--jnd-ease), transform 0.7s var(--jnd-ease);
}
html.jnd-js body.jnd-reveal-on .jnd-reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(24px);
}
html.jnd-js body.jnd-reveal-on .jnd-reveal:not(.is-visible) .wp-block-columns > .wp-block-column {
  opacity: 0;
  transform: translateY(16px);
}
.jnd-reveal .wp-block-columns > .wp-block-column:nth-child(2) { transition-delay: 80ms; }
.jnd-reveal .wp-block-columns > .wp-block-column:nth-child(3) { transition-delay: 160ms; }
.jnd-reveal .wp-block-columns > .wp-block-column:nth-child(4) { transition-delay: 240ms; }
.jnd-reveal .wp-block-columns > .wp-block-column:nth-child(5) { transition-delay: 320ms; }
.jnd-reveal .wp-block-columns > .wp-block-column:nth-child(6) { transition-delay: 400ms; }

/* ==========================================================================
   푸터
   ========================================================================== */

.jnd-footer {
  border-top: 1px solid var(--wp--preset--color--border);
}
.jnd-footer .wp-block-site-title {
  margin-bottom: 0.75rem;
}
.jnd-footer__col > * + * {
  margin-block-start: 0.5rem;
}
.jnd-footer__label {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast);
  margin-bottom: 0.9rem;
}
.jnd-footer .wp-block-navigation {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.jnd-footer .wp-block-navigation a {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}
.jnd-footer .wp-block-navigation a:hover {
  color: var(--wp--preset--color--primary);
}
.jnd-footer__bottom {
  border-top: 1px solid var(--wp--preset--color--border);
  padding-top: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
}
.jnd-footer__bottom a {
  color: inherit;
}

/* ==========================================================================
   접근성·모션 축소
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .jnd-reveal,
  .jnd-reveal .wp-block-column {
    transition: none;
    opacity: 1 !important;
    transform: none !important;
  }
  .jnd-card,
  .wp-block-button__link,
  .jnd-arrow .wp-block-button__link::after {
    transition: none;
  }
  .jnd-path__steps li::after {
    animation: none;
  }
}

/* ==========================================================================
   개인정보 처리방침 — 문서형 본문. 보호책임자는 라벨·값 행
   ========================================================================== */

.jnd-privacy h2 {
  margin-block-start: var(--wp--preset--spacing--50);
  font-size: 1.25rem;
}
.jnd-privacy-officer {
  padding: 1.25rem 1.5rem;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 0.75rem;
}
.jnd-privacy-officer__row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.jnd-privacy-officer__row > p {
  margin: 0.25rem 0;
}
.jnd-privacy-officer__label {
  flex: 0 0 4rem;
  font-weight: 700;
}