/* ==========================================================================
   시안 J — "흑백 매거진 에디토리얼" (글램 문법 × 나나, 2026-08-25)
   순백 배경 + 전 사진 흑백 처리, 넘버링 섹션, 매거진 분할 히어로.
   ※전후사진(bna)은 의료법 고려해 흑백 필터 미적용.
   ========================================================================== */


/* Pretendard @font-face는 common.css에서 전역으로 로드됩니다. */

.j-main {
  /* 바탕은 순백 대신 브랜드 아이보리. 흑백 사진이 인쇄물처럼 앉는다.
     톤은 --bg 한 곳만 바꾸면 전체가 따라온다. */
  --bg: #F2EDE4;
  /* 베이지(따뜻한 톤) */
  --ink: #101010;
  --mut: #857F76;
  /* 아이보리 위에서 회색이 푸르게 뜨지 않도록 살짝 웜하게 */
  --line: #DFD7C9;
  /* 경계선도 바탕 톤에 맞춤 */
  --gold: #B08D57;
  /* 골드 포인트 (em 라벨, j-pts 불릿) */
  --serif: 'NanaPretty', 'Noto Serif KR', serif;
  --sans: 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --pad: clamp(20px, 4.6vw, 64px);
}

.j-main * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.j-main {
  scroll-behavior: smooth;
}

.j-main {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.72;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.j-main img {
  max-width: 100%;
  display: block;
}

.j-main a {
  color: inherit;
  text-decoration: none;
}

.j-main .bw {
  filter: grayscale(1);
}

/* ---------- 헤더 ---------- */
.j-main .j-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(242, 237, 228, .95);
  /* 헤더도 바탕과 같은 톤 */
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 18px var(--pad);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, padding .3s var(--ease);
}

.j-main .j-header.scrolled {
  padding: 12px var(--pad);
  border-bottom-color: var(--line);
}

.j-main .j-brand img {
  height: 24px;
  filter: grayscale(1);
}

.j-main .j-nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
}

.j-main .j-nav a {
  font-size: 15px;
  font-weight: 560;
  letter-spacing: 0.02em;
  opacity: .8;
  transition: opacity .2s;
}

.j-main .j-nav a:hover {
  opacity: 1;
}

.j-main .j-reserve {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--ink);
  color: #fff;
  padding: 10px 22px;
  transition: background .25s;
}

.j-main .j-reserve:hover {
  background: #000;
}

/* ---------- 히어로 : 매거진 분할 ---------- */
.j-main .j-hero {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
  /* 이미지 원본 비율 기준 — 크롭 금지 원칙 */
}

.j-main .j-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 하단 96px = 고정 상담바에 인덱스가 깔리지 않게 여유 확보 */
  padding: clamp(44px, 6vh, 90px) var(--pad) 96px;
}

.j-main .j-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 28px;
}

.j-main .j-hero :is(h1,
  .j-main .j-h1) {
  font-size: clamp(40px, 4.4vw, 60px);
  font-weight: 640;
  line-height: 1.18;
  letter-spacing: -0.045em;
}

.j-main .j-sub {
  margin-top: 26px;
  font-size: 17px;
  color: var(--mut);
}

.j-main .j-link {
  display: inline-block;
  margin-top: 26px;
  align-self: flex-start;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 4px;
  transition: opacity .25s;
}

.j-main .j-link:hover {
  opacity: .6;
}

.j-main .j-index {
  list-style: none;
  margin-top: clamp(34px, 5vh, 64px);
  border-top: 1px solid var(--ink);
}

.j-main .j-index li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-weight: 500;
}

.j-main .j-index em {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--mut);
}

/* PC: 사진 전체가 첫 화면(헤더·상담바 제외) 안에 — 원본 비율, 크롭 없음 */
.j-main .j-hero-img {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #151515;
  min-height: calc(100svh - 124px);
}

.j-main .j-hero-img img {
  /* width: auto;
  max-width: 100%; */
  height: auto;
  max-height: calc(100svh - 124px);
  filter: grayscale(1) contrast(1.03);
}

/* 낮은 데스크톱 화면(일반 모니터): 첫 화면 안에 카피+인덱스가 다 들어가게 압축 */
@media (min-width: 769px) and (max-height: 1000px) {
  .j-main .j-hero-copy {
    justify-content: flex-start;
    padding-top: 48px;
  }

  .j-main .j-kicker {
    margin-bottom: 18px;
  }

  .j-main .j-hero :is(h1,
    .j-main .j-h1) {
    font-size: clamp(36px, 3.4vw, 50px);
  }

  .j-main .j-sub {
    margin-top: 18px;
  }

  .j-main .j-index {
    margin-top: 26px;
  }

  .j-main .j-index li {
    padding: 10px 2px;
  }

}

/* ---------- 스테이트먼트 ---------- */
.j-main .j-stmt {
  border-top: 1px solid var(--ink);
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 110px) var(--pad);
}

.j-main .j-stmt h2 {
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: -0.035em;
}

.j-main .j-stmt p {
  margin-top: 22px;
  font-size: 17px;
  color: var(--mut);
}

.j-main .j-stmt b {
  color: var(--ink);
  font-weight: 650;
}

.j-main .j-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}

.j-main .j-facts span {
  white-space: nowrap;
}

.j-main .j-facts span+span::before {
  content: "·";
  margin: 0 14px;
  color: var(--line);
}

/* ---------- 섹션 공통 (넘버링 헤더) ---------- */
.j-main .j-sec {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(60px, 7.6vw, 110px) var(--pad);
  border-top: 1px solid var(--line);
}

.j-main .j-sec-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 44px;
}

.j-main .j-sec-head em {
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: var(--mut);
}

.j-main .j-sec-head h2 {
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ---------- FACES ---------- */
.j-main .j-faces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 30px);
}

.j-main .j-face img {
  width: 100%;
  aspect-ratio: 3 / 3.8;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1) contrast(1.02);
  transition: filter .5s;
}

.j-main .j-face:hover img {
  filter: grayscale(0) contrast(1);
}

/* 호버 시 컬러 — 매거진 트릭 */
.j-main .j-face .cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 14px;
}

.j-main .j-face h3 {
  font-size: 20px;
  font-weight: 620;
  letter-spacing: -0.02em;
}

.j-main .j-face p {
  font-size: 14px;
  color: var(--mut);
}

/* ---------- 카테고리 rows ---------- */
.j-main .j-rows {
  border-top: 1px solid var(--ink);
}

.j-main .j-row {
  display: grid;
  grid-template-columns: 1fr auto 24px;
  align-items: baseline;
  gap: 20px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  transition: background .25s, padding-left .3s var(--ease);
}

.j-main .j-row:hover {
  background: #FAFAF8;
  padding-left: 16px;
}

.j-main .j-row h3 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 560;
  letter-spacing: -0.025em;
}

.j-main .j-row span {
  font-size: 15px;
  color: var(--mut);
}

.j-main .j-row::after {
  content: "→";
  color: var(--mut);
  transition: transform .3s var(--ease);
}

.j-main .j-row:hover::after {
  transform: translateX(5px);
  color: var(--ink);
}

/* ---------- 의료진 : 단체사진(제작사 시안에서 발췌) + 명단형 ---------- */
.j-main .j-team-group {
  margin-bottom: clamp(40px, 5vw, 72px);
}

.j-main .j-team-group img {
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.03);
}

/* 원본 비율 — 크롭 없음 */
.j-main .j-team {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 4.5vw, 72px);
  align-items: center;
}

.j-main .j-team-photo {
  background: #F2F2F0;
  aspect-ratio: 500 / 736;
  overflow: hidden;
}

/* 원본 비율 — 크롭 없음 */
.j-main .j-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1) contrast(1.03);
  transition: opacity .28s, filter .45s ease, transform .8s ease;
}

.j-main .j-team-photo img.fade {
  opacity: 0;
}

.j-main .j-team-side h3 {
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 540;
  line-height: 1.36;
  letter-spacing: -0.03em;
}

.j-main .j-team-side>p {
  font-size: 16px;
  color: var(--mut);
  margin: 12px 0 28px;
}

.j-main .j-team-list {
  list-style: none;
  border-top: 1px solid var(--ink);
}

.j-main .j-team-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 6px 16px;
  padding: 15px 6px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .3s var(--ease), background .25s;
}

.j-main .j-team-list li em {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--mut);
}

.j-main .j-team-list li strong {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #7a7a76;
  white-space: nowrap;
  transition: color .25s;
}

.j-main .j-team-list li span {
  font-size: 14px;
  color: var(--mut);
}

.j-main .j-team-list li small {
  grid-column: 1 / -1;
}

.j-main .j-team-list li.on,
.j-main .j-team-list li:hover {
  background: #FAFAF8;
  padding-left: 16px;
}

.j-main .j-team-list li.on strong,
.j-main .j-team-list li:hover strong {
  color: var(--ink);
}

.j-main .j-team-side .j-link {
  margin-top: 26px;
}

/* ---------- 전후 : CASE 카드 3열 — Signature와 같은 리듬 (흑백 미적용) ---------- */
.j-main .j-bna {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 30px);
}

.j-main .j-case em {
  font-style: normal;
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--mut);
  margin-bottom: 10px;
}

.j-main .j-case img {
  width: 100%;
  aspect-ratio: 1108 / 624;
  object-fit: cover;
  /* 원본 비율 — 크롭 없음 */
  border: 1px solid var(--line);
  transition: opacity .3s;
}

.j-main .j-case:hover img {
  opacity: .9;
}

.j-main .j-case .cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
}

.j-main .j-case h3 {
  font-size: 17px;
  font-weight: 620;
  letter-spacing: -0.015em;
}

.j-main .j-case .cap p {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mut);
}

.j-main .j-case:hover .cap p {
  color: var(--ink);
}

.j-main .j-legal {
  margin-top: 56px;
  font-size: 14px;
  color: var(--mut);
}

.j-main .j-legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- CTA ---------- */
.j-main .j-:is(h1,
  .j-main .j-h1) {
  margin: 0;
}

/* FAQ (AEO/GEO) */
.j-main .j-faq-intro {
  max-width: 860px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--mut);
  margin: -12px 0 36px;
}

.j-main .j-faq-list {
  border-top: 1px solid var(--line);
}

.j-main .j-faq-list details {
  border-bottom: 1px solid var(--line);
}

.j-main .j-faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--serif, serif);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.j-main .j-faq-list summary::-webkit-details-marker {
  display: none;
}

.j-main .j-faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 300;
  color: var(--mut);
  transition: transform .3s;
}

.j-main .j-faq-list details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.j-main .j-faq-list details p {
  margin: 0 0 24px;
  max-width: 800px;
  font-size: 15.5px;
  line-height: 1.9;
  color: #4a4a46;
}

.j-main .j-faq-list details p a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.j-main .j-faq-note {
  margin-top: 28px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--mut);
}

@media (max-width: 720px) {
  .j-main .j-faq-list summary {
    font-size: 16px;
    padding: 18px 36px 18px 0;
  }
}

.j-main .j-cta {
  background: var(--ink);
  color: #fff;
  padding: clamp(76px, 9.6vw, 130px) var(--pad);
  text-align: center;
}

.j-main .j-cta h2 {
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.j-main .j-cta>p {
  margin-top: 18px;
  font-size: 17px;
  color: #9a9a96;
}

.j-main .j-cta-links {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3.4vw, 48px);
  margin-top: 40px;
  flex-wrap: wrap;
}

.j-main .j-cta-links a {
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  padding-bottom: 5px;
  transition: opacity .25s;
}

.j-main .j-cta-links a:hover {
  opacity: .65;
}

/* ---------- 시안 칩 ---------- */
.j-main .j-switch {
  position: fixed;
  left: 18px;
  bottom: 118px;
  z-index: 96;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 650;
  padding: 9px 15px;
  border-radius: 999px;
  opacity: .9;
}

.j-main .j-switch.two {
  bottom: 76px;
}

/* ---------- 폼 ---------- */
.j-main .j-form {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: var(--ink);
}

.j-main .j-form-toggle {
  display: none;
}

.j-main .j-form-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 24px;
}

.j-main .j-form input[type="text"],
.j-main .j-form input[type="number"],
.j-main .j-form select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #4a4a48;
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  padding: 6px 2px;
  width: 150px;
  outline: none;
}

.j-main .j-form select {
  width: 130px;
}

.j-main .j-form select option {
  color: #000;
}

.j-main .j-form input::placeholder {
  color: #8b8b88;
}

.j-main .j-form input:focus,
.j-main .j-form select:focus {
  border-bottom-color: #fff;
}

.j-main .j-agree {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9a9a96;
  font-size: 12px;
  margin-left: auto;
}

.j-main .j-agree a {
  color: #d6d6d3;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.j-main .j-submit {
  background: #fff;
  color: var(--ink);
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 750;
  padding: 11px 28px;
}

.j-main .j-submit:hover {
  background: #eee;
}

/* ---------- 푸터 ---------- */
.j-main .j-footer {
  border-top: 1px solid var(--ink);
  margin-bottom: 56px;
}

.j-main .j-f-cols {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  gap: 36px;
  padding: clamp(44px, 5vw, 66px) var(--pad);
}

.j-main .j-f-cols h4 {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 12px;
}

.j-main .j-f-cols p {
  font-size: 14.5px;
  color: #3c3c3a;
  line-height: 1.85;
}

.j-main .j-f-cols .lg p {
  font-size: 13px;
  color: var(--mut);
}

/* ---------- 리빌 ---------- */
.j-main [data-rv] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.j-main [data-rv].seen {
  opacity: 1;
  transform: none;
}

/* ---------- 메인 카피 모래 흩날림 등장 ----------
   카피가 화면에 보이기 전엔 재생을 멈춰두고(paused), 노출(.seen) 순간부터 재생 —
   화면 밖에서 애니메이션이 어긋나 글자가 겹쳐 보이던 모바일 버그의 근본 수정 */
.j-main .sand-ch {
  display: inline-block;
  opacity: 0;
  filter: blur(7px);
  transform: translate(var(--dx, 0), var(--dy, 0));
  animation: sand-in 1.05s var(--dl, 0s) cubic-bezier(.19, 1, .22, 1) forwards;
  animation-play-state: paused;
}

.j-main .seen .sand-ch {
  animation-play-state: running;
}

@keyframes sand-in {
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

/* 주기적 흩어짐(out) → 다시 맺힘(in) 순환 */
.j-main .sand-ch.out {
  animation: sand-out .95s var(--dl2, 0s) cubic-bezier(.4, 0, .8, .4) forwards;
  animation-play-state: running;
}

@keyframes sand-out {
  to {
    opacity: 0;
    filter: blur(8px);
    transform: translate(var(--ox, 0), var(--oy, 0));
  }
}

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
  .j-main .j-nav {
    display: none;
  }

  .j-main .j-team {
    grid-template-columns: 1fr 1fr;
  }

  .j-main .j-f-cols {
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 768px) {
  .j-main

  /* 모바일 히어로: 매거진 커버 문법 — 흑백 사진 먼저(원본 비율·크롭 없음),
.j-main 카피는 그 아래 */
  .j-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .j-main .j-hero-img {
    order: -1;
    display: flex;
    justify-content: center;
    background: #111;
  }

  .j-main .j-hero-img img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100svh - 124px);
    /* 헤더·상담바를 뺀 첫 화면 안에 사진 전체 */
    object-fit: contain;
  }

  .j-main .j-hero-copy {
    padding: 32px 20px 40px;
  }

  .j-main .j-kicker {
    margin-bottom: 14px;
  }

  .j-main .j-hero :is(h1,
    .j-main .j-h1) {
    font-size: 34px;
  }

  .j-main .j-sub {
    margin-top: 16px;
  }

  .j-main .j-index {
    display: none;
  }

  .j-main

  /* 좁은 화면 군더더기 — Categories 섹션이 대신함 */
  .j-stmt {
    padding: 50px 20px;
  }

  .j-main .j-stmt h2 {
    font-size: 24px;
  }

  .j-main .j-sec {
    padding: 48px 20px;
  }

  .j-main .j-sec-head h2 {
    font-size: 27px;
  }

  .j-main .j-faces {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .j-main

  /* 카테고리 행: 제목/설명 두 줄 재배치 — 찌그러짐 방지 */
  .j-row {
    grid-template-columns: 1fr 20px;
    row-gap: 2px;
    padding: 17px 4px;
  }

  .j-main .j-row:hover {
    padding-left: 4px;
  }

  .j-main .j-row h3 {
    grid-column: 1;
    grid-row: 1;
  }

  .j-main .j-row span {
    grid-column: 1;
    grid-row: 2;
    font-size: 14px;
  }

  .j-main .j-row::after {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }

  .j-main

  /* 전후: 모바일 1단 스택 */
  .j-bna {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .j-main

  /* 지표: 모바일은 한 항목 한 줄 */
  .j-facts {
    flex-direction: column;
    gap: 6px;
  }

  .j-main .j-facts span {
    white-space: normal;
  }

  .j-main .j-facts span+span::before {
    content: none;
  }

  .j-main

  /* 의료진: 모바일 2열 — 사진 크게 */
  .j-team {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .j-main .j-team-photo {
    aspect-ratio: 500 / 736;
  }

  .j-main .j-team-list li {
    grid-template-columns: 32px 1fr;
    row-gap: 2px;
    padding: 13px 4px;
  }

  .j-main .j-team-list li strong {
    font-size: 19px;
  }

  .j-main .j-team-list li span {
    grid-column: 2;
    font-size: 13px;
  }

  .j-main .j-team-list li.on,
  .j-main .j-team-list li:hover {
    padding-left: 4px;
  }

  .j-main .j-cta h2 {
    font-size: 30px;
  }

  .j-main .j-switch {
    bottom: 106px;
  }

  .j-main .j-switch.two {
    bottom: 64px;
  }

  .j-main .j-form-toggle {
    display: block;
    width: 100%;
    background: var(--ink);
    color: #fff;
    border: 0;
    border-top: 1px solid #333;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 0.08em;
    padding: 14px;
  }

  .j-main .j-form .j-form-inner {
    display: none;
  }

  .j-main .j-form.open .j-form-inner {
    display: flex;
  }

  .j-main .j-form-inner {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
  }

  .j-main .j-form input[type="text"],
  .j-main .j-form input[type="number"] {
    width: calc(50% - 8px);
  }

  .j-main .j-form select {
    width: 100%;
  }

  .j-main .j-agree {
    margin-left: 0;
  }

  .j-main .j-submit {
    width: 100%;
  }

  .j-main .j-footer {
    margin-bottom: 68px;
  }

  .j-main .j-f-cols {
    grid-template-columns: 1fr;
    gap: 26px;
  }

}

/* 전후 라벨 — 발상 전환: 후(After) 선명, 전(Before) 흐림 */
.j-main .j-case {
  position: relative;
  display: block;
}

.j-main .j-case .lb {
  position: absolute;
  top: calc(10px + 21px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: rgba(255, 255, 255, .88);
  color: #111;
}

.j-main .j-case .lb.b {
  left: 10px;
  color: #8a8a86;
}

.j-main .j-case .lb.a {
  right: 10px;
}

/* 전후사진 롤링 — 실서비스 이식(후 선명·전 흐림 원본 1043×569, 크롭 없음) */
.j-main .j-bna-roll {
  position: relative;
  margin-bottom: 40px;
  max-width: 1040px;
  margin: 0 auto;
  aspect-ratio: 1043 / 569;
}


.j-main .j-bna-roll .j-slide {
  inset: 0;
  display: block;
}

.j-main .j-bna-roll img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.j-main .j-bna-roll .lb {
  position: absolute;
  top: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(255, 255, 255, .88);
  color: #111;
}

.j-main .j-bna-roll .lb.b {
  left: 12px;
  color: #8a8a86;
}

.j-main .j-bna-roll .lb.a {
  right: 12px;
}

.j-main .j-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -28px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.j-main .j-dots.swiper-pagination-bullets {
  bottom: 10px;
  z-index: 10;
}

.j-main .j-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: #cfcfcb;
  padding: 0;
  cursor: pointer;
}

.j-main .j-dots button.on {
  background: #111;
}

/* ===== 하단 차별화 (08-25): 챕터 스토리 · 검정 목차 · 풀블리드 단체사진 ===== */
.j-main .j-chapters {
  display: grid;
  gap: clamp(56px, 7vw, 110px);
}

.j-main .j-chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.j-main .j-chapter:nth-child(even) .j-chapter-img {
  order: 2;
}

.j-main .j-chapter-img {
  display: block;
  overflow: hidden;
  background: #f2f2f0;
}

.j-main .j-chapter-img img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.04);
  transition: transform .8s ease;
}

.j-main .j-chapter:hover .j-chapter-img img {
  transform: scale(1.03);
}

.j-main .j-chapter-txt {
  max-width: 460px;
}

.j-main .j-chapter:nth-child(even) .j-chapter-txt {
  justify-self: end;
}

.j-main .j-chapter-txt em {
  display: block;
  font-style: normal;
  font-family: 'NanaPretty', serif;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  color: #d9d9d5;
  margin-bottom: 18px;
}

.j-main .j-chapter-txt h3 {
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 620;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.j-main .j-chapter-txt p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--mut);
  margin-bottom: 26px;
  word-break: keep-all;
}

.j-main .j-dark {
  background: #111;
  color: #fff;
  padding: clamp(60px, 7.6vw, 110px) var(--pad);
}

.j-main .j-dark .j-sec-head {
  max-width: 1440px;
  margin: 0 auto 44px;
}

.j-main .j-dark .j-sec-head h2,
.j-main .j-dark .j-sec-head em {
  color: #fff;
}

.j-main .j-index-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #3a3a3a;
  border-left: 1px solid #3a3a3a;
}

.j-main .j-index-grid a {
  display: block;
  padding: clamp(24px, 2.6vw, 40px);
  border-right: 1px solid #3a3a3a;
  border-bottom: 1px solid #3a3a3a;
  color: #fff;
  transition: background .3s;
  min-height: 200px;
}

.j-main .j-index-grid a:hover {
  background: #1c1c1c;
}

.j-main .j-index-grid em {
  display: block;
  font-style: normal;
  font-size: 13px;
  letter-spacing: .25em;
  color: #8a8a86;
  margin-bottom: 44px;
}

.j-main .j-index-grid h3 {
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 620;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.j-main .j-index-grid span {
  display: block;
  font-size: 14px;
  color: #a8a8a4;
  line-height: 1.6;
}

.j-main .j-team-group {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

@media (max-width: 1024px) {
  .j-main .j-index-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .j-main .j-index-grid a {
    min-height: 160px;
  }
}

@media (max-width: 768px) {
  .j-main .j-chapter {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .j-main .j-chapter:nth-child(even) .j-chapter-img {
    order: 0;
  }

  .j-main .j-chapter-txt,
  .j-main .j-chapter:nth-child(even) .j-chapter-txt {
    max-width: none;
    justify-self: start;
  }

  .j-main .j-chapter-txt p {
    font-size: 15px;
  }

  .j-main .j-index {
    grid-template-columns: 1fr;
  }

  .j-main .j-index-grid a {
    min-height: 0;
    padding: 20px 18px;
  }

  .j-main .j-index-grid em {
    margin-bottom: 14px;
  }

}

.j-main .j-switch.three {
  bottom: 160px;
}

@media (max-width: 768px) {
  .j-main .j-switch {
    bottom: 148px;
  }

  .j-main .j-switch.two {
    bottom: 106px;
  }

  .j-main .j-switch.three {
    bottom: 64px;
  }
}

.j-main .j-switch.four {
  bottom: 202px;
}

@media (max-width: 768px) {
  .j-main .j-switch.four {
    bottom: 190px;
  }

  .j-main .j-switch {
    bottom: 148px;
  }
}

/* 지표 강조(08-25): 3열 카드형, 더 크게 */
.j-main .j-facts {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px !important;
  font-size: clamp(18px, 1.6vw, 22px) !important;
  color: inherit !important;
}

.j-main .j-facts span {
  white-space: normal !important;
  padding: 22px 24px;
  border: 1px solid currentColor;
  line-height: 1.5;
  font-weight: 500;
}

.j-main .j-facts span+span::before {
  content: none !important;
}

.j-main .j-facts b {
  color: var(--ink);
  font-weight: 750;
  font-size: 1.12em;
}

@media (max-width: 768px) {
  .j-main .j-facts {
    grid-template-columns: 1fr;
    gap: 10px;
    font-size: 17px !important;
  }

  .j-main .j-facts span {
    padding: 16px 18px;
  }
}

/* ===== 스크롤 콘텐츠 텍스트 효과 (08-25): 라인 리빌 + 블러 해제 ===== */
.j-main .reveal-h .rl {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.j-main .reveal-h .ri {
  display: block;
  transform: translateY(112%) rotate(1.5deg);
  transform-origin: left top;
  transition: transform 1s cubic-bezier(.19, 1, .22, 1);
  transition-delay: var(--rd, 0s);
}

.j-main .seen .reveal-h .ri {
  transform: none;
}

.j-main .reveal-p {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(8px);
  transition: opacity .9s ease .35s, filter .9s ease .35s, transform .9s ease .35s;
}

.j-main .seen .reveal-p {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.j-main .j-facts span {
  word-break: keep-all;
}

.j-main .j-facts b {
  white-space: nowrap;
}

/* 모바일 시안 칩: 하단 한 줄(콘텐츠 가림 방지) — 08-26 */
@media (max-width: 768px) {
  .j-main .j-switch {
    position: fixed;
    top: auto;
    bottom: 56px;
    font-size: 11px;
    padding: 6px 10px;
    opacity: .92;
  }

  .j-main .j-switch.two {
    right: 12px;
    bottom: 56px;
    top: auto;
  }

  .j-main .j-switch.three {
    right: 78px;
    bottom: 56px;
    top: auto;
  }

  .j-main .j-switch.four {
    right: 144px;
    bottom: 56px;
    top: auto;
  }

  .j-main .j-switch:not(.two):not(.three):not(.four) {
    right: 210px;
    bottom: 56px;
    top: auto;
  }

}

/* E 모바일 히어로: 사진+카피가 첫 화면 안에 (08-26) */
@media (max-width: 768px) {
  .j-main .j-hero-img img {
    max-height: calc(100svh - 430px);
  }

  .j-main .j-hero-copy {
    padding: 18px 20px 34px;
  }

  .j-main .j-hero :is(h1,
    .j-main .j-h1) {
    font-size: 28px;
  }

  .j-main .j-kicker {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .j-main .j-sub {
    margin-top: 12px;
    font-size: 14px;
  }

  .j-main .j-hero .j-link {
    margin-top: 16px;
  }

}

/* E 모바일 깨짐 근본 수정: 히어로 검정 여백(min-height) 제거 + 풀블리드 100vw로 인한 가로 넘침 제거 */
@media (max-width: 768px) {
  .j-main .j-hero-img {
    min-height: 0 !important;
    align-items: center;
  }

  .j-main .j-team-group {
    width: 100% !important;
    margin-left: 0 !important;
  }

}

.j-main,
.j-main {
  max-width: 100%;
  overflow: hidden;
}

.j-main .j-hero-img {
  justify-content: center;
}

@media (max-width: 768px) {
  .j-main .j-switch {
    left: auto !important;
  }
}

/* E 시안 칩: PC도 오른쪽 상단 정렬(4개 균등) */
@media (min-width: 769px) {
  .j-main .j-switch {
    left: auto;
    right: 16px;
    bottom: auto;
    top: 96px;
  }

  .j-main .j-switch.two {
    top: 136px;
  }

  .j-main .j-switch.three {
    top: 176px;
  }

  .j-main .j-switch.four {
    top: 216px;
  }

}

@media (min-width: 769px) {
  .j-main .j-switch.five {
    top: 256px;
    bottom: auto !important;
  }
}

@media (max-width: 768px) {
  .j-main .j-switch.five {
    right: 192px;
    bottom: 56px;
    top: auto;
  }
}

/* =========================================================================
   시안 I 오버라이드 (2026-08-27)
   기반은 E(흑백 매거진). 여기에 다음을 얹는다.
     · 모든 사진을 흑백으로 두고 마우스를 올리면 컬러로
     · 히어로 좌측 카피는 D의 타이포(라인 + 큰 글자)
     · 시그니처는 PC 세로 / 모바일 가로 스크롤
     · 원장단은 5인, 모바일에서 사진 위에 이름이 얹히도록
   ========================================================================= */

/* ---------- 흑백 → 호버 시 컬러 ----------
   매거진 톤을 유지하되 '보고 싶은 것만' 컬러로 살아나게 한다.
   터치 기기는 호버가 없으므로 흑백 그대로 두고 눌러서 들어가게 한다. */
.j-main .j-hcard img {
  filter: grayscale(1) contrast(1.04);
}

/* 시그니처 카드는 새 클래스라 기본 흑백을 따로 준다 */
.j-main .j-index-grid img {
  filter: grayscale(1);
}

.j-main .j-hcard img,
.j-main .j-team-group img,
.j-main .j-hero-img img,
.j-main .j-slide img,
.j-main .j-index-grid a img {
  transition: filter .45s ease, transform .8s ease;
}

@media (hover: hover) {

  .j-main .j-hcard:hover img,
  .j-main .j-team-group:hover img,
  .j-main .j-team-photo:hover img,
  .j-main .j-hero-img:hover img,
  .j-main .j-slide:hover img {
    filter: grayscale(0) contrast(1) !important;
  }

}

/* 히어로 이미지는 기본 흑백(E 기본값 유지) + 호버 컬러 */
.j-main .j-hero-img img {
  filter: grayscale(1) contrast(1.03);
}

/* ---------- 히어로 카피: D 타이포 ---------- */
.j-main .j-hero-copy :is(h1,
  .j-main .j-h1) {
  font-weight: 300;
  letter-spacing: -0.05em;
}

.j-main .j-hero-copy :is(h1,
  .j-main .j-h1) .row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: 1.16;
}

.j-main .j-hero-copy :is(h1,
  .j-main .j-h1) b {
  font-weight: 300;
}

.j-main .j-hero-copy :is(h1,
  .j-main .j-h1) b.w {
  font-weight: 600;
}

.j-main .j-hero-copy :is(h1,
  .j-main .j-h1) i {
  /* 글자 사이를 잇는 가는 선 */
  flex: 0 0 clamp(40px, 6vw, 110px);
  height: 1px;
  background: var(--ink);
  opacity: .8;
}

.j-main .j-hero-copy .j-sub {
  margin-top: 30px;
}

.j-main .j-hero-copy .j-index {
  margin-top: 34px;
}

/* 상담 예약 버튼을 뺀 만큼 간격 보정 */

@media (max-width: 768px) {

  .j-main .j-hero-copy :is(h1,
    .j-main .j-h1) .row {
    font-size: 30px;
    gap: 10px;
    line-height: 1.25;
  }

  .j-main .j-hero-copy :is(h1,
    .j-main .j-h1) i {
    flex-basis: 30px;
  }

}

/* ---------- 시그니처: PC 세로 / 모바일 가로 ---------- */
.j-main .j-strip-wrap {
  margin-top: 28px;
}

/* PC — 한 행에 사진과 설명이 나란히, 아래로 읽어 내려간다 */
@media (min-width: 769px) {

  .j-main .j-hstrip,
  .j-main .j-hstrip .swiper-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .j-main .j-hcard {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    padding: clamp(30px, 4vh, 56px) 0;
    border-top: 1px solid var(--line);
  }

  .j-main .j-hcard:last-child {
    border-bottom: 1px solid var(--line);
  }

  .j-main

  /* 원본 비율이 1:1 과 2:3 으로 섞여 있어 한 비율로 강제하면 잘린다.
     PC는 한 행에 한 장이라 높이가 달라도 되므로 원본 그대로 둔다. */
  .j-hcard img {
    width: 100%;
    height: auto;
  }

  .j-main .j-hcard:nth-child(even) img {
    order: 2;
  }

  .j-main

  /* 좌우 교차 — 매거진 리듬 */
  .j-hcard div {
    padding-top: 0;
  }

  .j-main .j-hcard em {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--gold);
  }

  .j-main .j-hcard h3 {
    font-size: clamp(26px, 2.4vw, 36px);
    font-weight: 600;
    margin-top: 8px;
    letter-spacing: -0.02em;
  }

  .j-main .j-hcard p {
    font-size: 15.5px;
    color: var(--mut);
    margin-top: 12px;
    line-height: 1.8;
    max-width: 44ch;
  }

}

/* 모바일 — 옆으로 넘겨 본다 (시안 D 형식) */
@media (max-width: 768px) {
  .j-main .j-hstrip {
    padding-bottom: 12px;
    margin-right: calc(-1 * var(--pad));
    padding-right: var(--pad);
  }

  .j-main .j-hcard {
    flex: 0 0 78vw;
  }

  .j-main

  /* 가로로 넘겨 보는 구조라 카드 높이는 맞춰야 하는데,
.j-main 원본 비율이 제각각이다.
     비율은 고정하되 잘라내지 않고(contain) 남는 자리는 배경으로 둔다. */
  .j-hcard img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background: #F3F1EC;
    display: block;
  }

  .j-main .j-hcard div {
    padding-top: 12px;
  }

  .j-main .j-hcard em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--gold);
  }

  .j-main .j-hcard h3 {
    font-size: 19px;
    font-weight: 600;
    margin-top: 4px;
  }

  .j-main .j-hcard p {
    font-size: 13.5px;
    color: var(--mut);
    margin-top: 6px;
    line-height: 1.7;
  }

}

/* ---------- 원장단 ---------- */
.j-main .j-team-list small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--mut);
  letter-spacing: -0.01em;
  line-height: 1.55;
}

.j-main .j-team-photo {
  position: relative;
}

.j-main .j-team-cap {
  display: none;
}

/* PC에서는 오른쪽 명단이 있으므로 숨김 */

/* 모바일 — 사진 위에 이름이 함께 보이게 (스크롤해야 텍스트가 나오던 것 해소) */
@media (max-width: 768px) {
  .j-main .j-team-cap {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 46px 18px 16px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, 0) 100%);
  }

  .j-main .j-team-cap strong {
    display: block;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .j-main .j-team-cap span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    opacity: .9;
  }

  .j-main .j-team-cap small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    opacity: .8;
    line-height: 1.55;
  }

  .j-main .j-team-photo img {
    width: 100%;
    height: auto;
    display: block;
  }

}

/* 시안 전환 칩 6번째(시안 I) 자리 */
@media (min-width: 769px) {
  .j-main .j-switch.six {
    top: 296px;
    bottom: auto !important;
  }
}

@media (max-width: 768px) {
  .j-main .j-switch.six {
    right: 252px;
    bottom: 56px;
    top: auto;
  }
}

/* 시안 전환 칩: PC에서 top 기준으로 통일.
   앞선 규칙들이 .j-switch.two{bottom:76px} 처럼 bottom 을 남겨 둬서
   top 과 bottom 이 동시에 걸리면 칩이 세로로 늘어난다(높이 788px 관측).
   보이지 않는 거대한 클릭 영역이 생겨 본문을 가린다. */
@media (min-width: 769px) {

  .j-main .j-switch,
  .j-main .j-switch.two,
  .j-main .j-switch.three,
  .j-main .j-switch.four,
  .j-main .j-switch.five,
  .j-main .j-switch.six {
    bottom: auto !important;
    height: auto;
  }

}

/* =========================================================================
   모바일 정리 (2026-08-27) — 실제 폰 화면에서 확인하고 잡은 것들
   ========================================================================= */
@media (max-width: 768px) {
  .j-main

  /* 헤더 — 내비가 숨겨진 자리에 '상담 예약'이 로고 옆에 붙어 어색했다.
     하단에 상담 바가 항상 떠 있으므로 헤더 버튼은 뺀다. */
  .j-reserve {
    display: none;
  }

  .j-main .j-header {
    justify-content: space-between;
  }

  .j-main

  /* 히어로 사진 — 컨테이너가 화면 폭을 다 못 쓰고 276px 에 갇혀 있었다.
     폭은 채우되 잘라내지는 않는다(크롭 금지 원칙). 896×1344 원본 비율 그대로. */
  .j-hero-img {
    width: 100%;
    background: #F3F1EC;
  }

  .j-main .j-hero-img img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  .j-main
  /* 히어로 인덱스(01·02·03)는 모바일에서 계속 숨긴다.
     넣어 보니 사진 높이를 계속 갉아먹어 '사진+카피가 첫 화면 안'이라는
     원칙이 깨졌다. 같은 내용은 아래 Index 섹션이 담당한다. */

  /* 원장 명단 — 번호(<em>)를 쓰지 않는 구성으로 바꿨는데 그리드 첫 칸이
     여전히 32px 번호 자리로 남아 이름이 한 글자씩 세로로 접혔다. */
  .j-team-list li {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 3px;
    padding: 14px 4px;
    align-items: start;
  }

  .j-main .j-team-list li strong {
    grid-column: 1;
    font-size: 18px;
    line-height: 1.3;
  }

  .j-main .j-team-list li span {
    grid-column: 1;
    font-size: 13px;
  }

  .j-main .j-team-list li small {
    grid-column: 1;
    font-size: 12.5px;
    line-height: 1.5;
  }

  .j-main

  /* 시안 전환 칩 — 상담 바 위에 겹쳐 본문 마지막 줄을 가렸다.
     검토용 장치이므로 더 작게,
.j-main 더 흐리게,
.j-main 상담 바 위로 올린다. */
  .j-switch,
  .j-main .j-switch.two,
  .j-main .j-switch.three,
  .j-main .j-switch.four,
  .j-main .j-switch.five,
  .j-main .j-switch.six {
    bottom: 58px !important;
    top: auto !important;
    font-size: 10.5px;
    padding: 5px 9px;
    opacity: .78;
  }

  .j-main .j-switch.two {
    right: 12px !important;
  }

  .j-main .j-switch.three {
    right: 76px !important;
  }

  .j-main .j-switch.four {
    right: 140px !important;
  }

  .j-main .j-switch.five {
    right: 204px !important;
  }

  .j-main .j-switch.six {
    right: 268px !important;
  }

}

/* 시안 칩(모바일) — right 로 밀어 배치하니 5개가 서로 겹치고 히어로 인덱스를
   덮었다. 왼쪽 기준으로 균등 배치하고, 히어로 카피에는 칩 높이만큼 여백을 준다.
   검토용 장치이므로 본문을 가리면 안 된다. */
@media (max-width: 768px) {

  .j-main .j-switch,
  .j-main .j-switch.two,
  .j-main .j-switch.three,
  .j-main .j-switch.four,
  .j-main .j-switch.five,
  .j-main .j-switch.six {
    right: auto !important;
    bottom: 54px !important;
    top: auto !important;
    width: 72px;
    text-align: center;
    padding: 5px 0;
    font-size: 10px;
    opacity: .8;
  }

  .j-main .j-switch.two {
    left: 4px !important;
  }

  .j-main .j-switch.three {
    left: 80px !important;
  }

  .j-main .j-switch.four {
    left: 156px !important;
  }

  .j-main .j-switch.five {
    left: 232px !important;
  }

  .j-main .j-switch.six {
    left: 308px !important;
  }

  .j-main .j-hero-copy {
    padding-bottom: 64px;
  }

  /* 하단 고정 상담바에 카피가 깔리지 않게 */
}

/* 사진 + 카피가 첫 화면 안에 들어오도록 사진 높이를 제한한다.
   (모바일 첫 화면 규칙 — 스크롤해야 카피가 보이면 안 된다) */
@media (max-width: 768px) {
  .j-main

  /* 폭 100% 로 두면 원본 비율상 세로가 길어진다. 카피가 첫 화면 밖으로
     밀려나지 않도록 높이 상한만 두고,
.j-main 남는 폭은 배경으로 둔다(잘라내지 않음). */
  .j-hero-img img {
    max-height: 56svh;
    width: auto;
    margin: 0 auto;
  }

}

/* ---------- 원장단: 모바일 가로 스크롤 ----------
   폰에서는 사진 한 장 + 아래 긴 명단보다, 사진을 옆으로 넘겨 보는 편이
   한 사람씩 눈에 들어온다. 이름은 사진 위에 얹어 함께 보이게 한다. */
.j-main .j-doc-strip {
  display: none;
}

@media (max-width: 768px) {
  .j-main .j-doc-strip {
    display: block;
    margin: 22px calc(-1 * var(--pad)) 0 0;
    padding: 0 var(--pad) 12px 0;
  }

  .j-main .j-doc-card {
    position: relative;
    flex: 0 0 68vw;
  }

  .j-main .j-doc-card img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(1) contrast(1.03);
    background: #F3F1EC;
  }

  .j-main .j-doc-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 44px 16px 14px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, 0) 100%);
  }

  .j-main .j-doc-cap strong {
    display: block;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .j-main .j-doc-cap span {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    opacity: .9;
  }

  .j-main .j-doc-cap small {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    opacity: .8;
    line-height: 1.5;
  }

  .j-main

  /* 가로 스트립이 대신하므로 큰 사진 한 장과 이름 목록은 모바일에서 숨긴다.
     (이름·직함·특기는 이미 사진 위에 얹혀 있다) */
  .j-team-photo {
    display: none;
  }

  .j-main .j-team-list {
    display: none;
  }

  .j-main .j-team-side>h3 {
    font-size: 21px;
    line-height: 1.45;
  }

  .j-main .j-team-side>p {
    font-size: 14.5px;
    margin: 10px 0 18px;
  }

}

/* 화면이 짧은 기기(안드로이드 780px 안팎)에서는 사진을 조금 더 줄여야
   카피가 시안 칩·상담 바에 걸리지 않는다. */
@media (max-width: 768px) and (max-height: 820px) {
  .j-main .j-hero-img img {
    max-height: 50svh;
  }

}

/* =========================================================================
   본문 타이포 확대 (2026-08-27, 캔버스에서 직접 조정한 값 반영)
   1440px 기준으로 키운 값이라 데스크톱에 그대로 적용하고,
   모바일은 화면 폭에 맞춰 비례로 줄인다.
   ========================================================================= */

/* 캔버스에서 직접 지정한 값 */
.j-main .j-kicker {
  font-size: 20px;
}

/* NANA LIFTING CENTER — 13 → 20 */
.j-main .j-sub {
  font-size: 24px;
  line-height: 1.6;
}

/* 히어로 서브카피 — 17 → 24 */
.j-main .j-index li {
  font-size: 20px;
}

/* 히어로 인덱스 — 16 → 20 */
@media (min-width: 769px) {
  .j-main .j-hcard p {
    font-size: 20px;
    line-height: 1.75;
    max-width: 52ch;
  }

  /* 시그니처 설명 — 15.5 → 20 */
}

/* 같은 기조로 맞춘 나머지 본문 — 위만 키우면 아래가 상대적으로 작아 보인다 */
.j-main .j-team-side>p {
  font-size: 18px;
}

.j-main .j-team-list li span {
  font-size: 16px;
}

.j-main .j-team-list li small {
  font-size: 14.5px;
}

.j-main .j-index-grid a span {
  font-size: 15px;
}

.j-main .j-legal {
  font-size: 14px;
  text-align: center;
}

.j-main .j-f-cols {
  font-size: 15px;
}

/* 모바일 — 위 값들을 그대로 쓰면 화면을 넘친다. 비례로 낮춘다. */
@media (max-width: 768px) {
  .j-main .j-kicker {
    font-size: 12.5px;
  }

  .j-main .j-sub {
    font-size: 16px;
  }

  .j-main .j-team-side>p {
    font-size: 15px;
  }

  .j-main .j-team-list li span {
    font-size: 14px;
  }

  .j-main .j-team-list li small {
    font-size: 13px;
  }

  .j-main .j-index-grid a span {
    font-size: 12.5px;
  }

  .j-main .j-legal {
    font-size: 12.5px;
  }

  .j-main .j-f-cols {
    font-size: 13.5px;
  }

}

/* =========================================================================
   모바일 상단 정리 (2026-08-27)
   짚은 문제
     · 폰에서 상단 내비가 숨겨지는데 대체 수단이 없어 6개 메뉴로 갈 길이 없었다
     · 히어로 사진 좌우에 밝은 여백이 남아 사진이 액자 속에 든 것처럼 떠 보였다
     · 카피 영역이 307px 로 잡혀 오른쪽 83px 이 비어 있었다
     · 사진이 첫 화면의 56% 를 차지해 카피가 눌렸다
   ========================================================================= */

/* 햄버거 — PC에서는 내비가 보이므로 숨긴다 */
.j-main .j-burger {
  display: none;
}

@media (max-width: 768px) {
  .j-main .j-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    width: 44px;
    height: 44px;
    /* 손가락 최소 타깃 */
    background: none;
    border: 0;
    padding: 0 8px 0 14px;
    cursor: pointer;
  }

  .j-main .j-burger span {
    display: block;
    height: 1.5px;
    background: var(--ink);
    transition: transform .2s;
  }

  .j-main .j-burger span:nth-child(2) {
    width: 70%;
    margin-left: auto;
  }

  .j-main

  /* 전체화면 메뉴 */
  .j-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    padding: 18px 20px 28px;
  }

  .j-main .j-menu[hidden] {
    display: none;
  }

  .j-main .j-menu-close {
    align-self: flex-end;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    font-size: 30px;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
  }

  .j-main .j-menu-nav {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    border-top: 1px solid var(--line);
  }

  .j-main .j-menu-nav a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 20px 2px;
    border-bottom: 1px solid var(--line);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .j-main .j-menu-nav a em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--gold);
  }

  .j-main .j-menu-cta {
    margin-top: auto;
    text-align: center;
    background: var(--ink);
    color: #fff;
    padding: 17px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
  }

  .j-main

  /* 사진 — 여백 색을 사진 톤에 맞춰 액자처럼 보이지 않게. 잘라내지는 않는다. */
  .j-hero-img {
    background: #55554F;
  }

  .j-main .j-hero-img img {
    max-height: 46svh;
  }

  .j-main

  /* 카피 — 폭을 다 쓰고,
.j-main 사진과 붙어 보이지 않게 위 여백을 준다 */
  .j-hero-copy {
    width: 100%;
    padding: 30px 20px 60px;
  }

  .j-main

  /* 아래에 더 있다는 신호 */
  .j-hero-copy::after {
    content: "";
    display: block;
    width: 1px;
    height: 26px;
    background: linear-gradient(to bottom, var(--rule-strong, #C9C4B8), transparent);
    margin: 26px auto 0;
  }

}

@media (max-width: 768px) and (max-height: 820px) {
  .j-main .j-hero-img img {
    max-height: 42svh;
  }

}

/* =========================================================================
   모바일 히어로 재구성 (2026-08-27)
     · 사진을 화면 폭에 꽉 채우고 세로로 더 크게
     · 좌측 카피 6줄 → 4줄 (키커는 헤더 로고와 중복이라 뺀다)
     · 제목을 2줄로 묶어 오른쪽 빈 공간을 채운다
   ========================================================================= */
@media (max-width: 768px) {
  .j-main

  /* 사진 — 폭을 꽉 채운다. 얼굴이 위쪽에 있어 위 기준으로 맞춘다. */
  .j-hero-img {
    background: #55554F;
    width: 100%;
  }

  .j-main .j-hero-img img {
    width: 100%;
    max-width: none;
    max-height: none;
    /* 헤더(61) + 카피(약 222) + 상담바(45) + 여유(6) 을 뺀 나머지를 사진이 갖는다.
       고정 svh 로 두면 기기마다 카피가 상담바에 깔린다. */
    height: calc(100svh - 334px);
    min-height: 300px;
    object-fit: cover;
    /* 머리가 원본 위에서 6% 지점부터 시작한다 — 위를 조금이라도 자르면
       머리가 잘려 보인다. 위쪽 기준으로 두고 잘림은 전부 아래에서 가져간다. */
    object-position: 50%;
  }

  .j-main

  /* 카피 4줄 : 제목 2줄 + 설명 2줄 */
  .j-kicker {
    display: none;
  }

  .j-main

  /* 헤더 로고가 같은 말을 하고 있다 */
  .j-hero-copy {
    padding: 24px 20px 20px;
  }

  .j-main

  /* 제목 — '청담,
.j-main ' 다음에서만 줄을 바꾸고 '리프팅의 기준'은 한 줄로 붙인다 */
  .j-hero-copy :is(h1,
    .j-main .j-h1) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
  }

  .j-main .j-hero-copy :is(h1,
    .j-main .j-h1) .row {
    font-size: 32px;
    gap: 12px;
  }

  .j-main .j-hero-copy :is(h1,
    .j-main .j-h1) .row:first-child {
    flex: 0 0 100%;
  }

  .j-main .j-hero-copy :is(h1,
    .j-main .j-h1) i {
    flex-basis: 34px;
  }

  .j-main .j-sub {
    margin-top: 18px;
    font-size: 15.5px;
  }

  .j-main

  /* 스크롤 표시선은 뺀다 — 상담바 뒤에 가려 보이지도 않으면서
     사진 높이만 40px 잡아먹고 있었다. 사진이 화면 끝까지 차 있으면
     아래에 더 있다는 건 이미 읽힌다. */
  .j-hero-copy::after {
    display: none;
  }

}

@media (max-width: 768px) and (max-height: 820px) {
  .j-main .j-hero-img img {
    height: calc(100svh - 330px);
  }

  .j-main .j-hero-copy :is(h1,
    .j-main .j-h1) .row {
    font-size: 29px;
  }

}

/* =========================================================================
   시안 J — 시안 I 의 구성은 그대로 두고, 정서만 더한다 (2026-08-27)

   왜 '책장'인가 : 보는 사람이 중년 여성이다. 화면이 휙휙 바뀌는 느낌보다
   책장을 한 장 넘기는 속도와 무게가 맞다. 그래서 곡면을 억지로 만드는 대신
   ① 느린 속도 ② 넘어가는 경계의 종이 그늘 ③ 쪽번호 로 그 정서를 낸다.

   ※ 이 아래로 규칙을 덧붙이지 말 것. 고칠 일이 있으면 이 블록 안에서 고친다.
   ========================================================================= */

/* 한글은 단어 단위로만 끊는다 — 음절 중간에서 끊기면 읽기가 나빠진다 */
.j-main .j-copy :is(h1,
  .j-main .j-h1),
.j-main .j-copy .j-sub,
.j-main .j-kicker,
.j-main .j-hcard-txt,
.j-main .j-team-side,
.j-main .j-sec-head,
.j-main .j-index-grid a,
.j-main .j-cta,
.j-main .j-team-list li,
.j-main .j-row,
.j-main .j-legal,
.j-main .j-hcard-txt p {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ---------- 히어로 : 카피는 자리에 두고 내용만 바뀐다 ----------
   카피 5개를 같은 칸에 겹쳐 두면 칸 높이가 '가장 긴 카피' 기준으로 잡힌다.
   쪽번호를 그 아래 별도 행에 두면, 슬라이드마다 문구 길이가 달라도
   쪽번호 위치는 움직이지 않는다. */
.j-main .j-hero-copy {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: 40px;
}

.j-main .j-copy {
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
  pointer-events: none;
}

.j-main .j-copy.on {
  opacity: 1;
  pointer-events: auto;
}

.j-main .j-copy :is(h1,
  .j-main .j-h1) {
  font-weight: 300;
  letter-spacing: -0.05em;
}

.j-main .j-copy :is(h1,
  .j-main .j-h1) .ln {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.2;
}

.j-main .j-copy :is(h1,
  .j-main .j-h1) b {
  font-weight: 300;
}

.j-main .j-copy :is(h1,
  .j-main .j-h1) b.w {
  font-weight: 600;
}

.j-main .j-copy :is(h1,
  .j-main .j-h1) i {
  flex: 0 0 clamp(36px, 5vw, 92px);
  height: 1px;
  background: var(--ink);
  opacity: .8;
}

.j-main .j-copy .j-sub {
  margin-top: 24px;
  max-width: 32ch;
}

/* 쪽번호 — 책의 판면처럼 */
.j-main .j-folio {
  grid-row: 2;
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  min-width: 220px;
}

.j-main .j-folio button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--mut);
  letter-spacing: .06em;
  transition: color .35s;
}

.j-main .j-folio button.on {
  color: var(--ink);
  font-size: 21px;
}

.j-main .j-folio-total {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--mut);
  margin-left: 2px;
}

/* ---------- 사진 : 한 겹씩 넘겨진다 ---------- */
/* 시안 I 의 .j-hero-img 뼈대를 그대로 쓰되, 안에 사진을 겹쳐 둔다.
   현재 장이 왼쪽부터 걷히면서 아래 장이 드러난다. 곡면은 만들지 않는다 —
   경계에 지나가는 그늘 한 줄이 '넘어갔다'는 인상을 만든다. */
.j-main .j-hero-img {
  position: relative;
  overflow: hidden;
}

.j-main .j-sheet {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 원본 비율 유지 — 잘라내지 않는다 */
  filter: grayscale(1) contrast(1.03);
  clip-path: inset(0 0 0 0);
  opacity: 0;
  z-index: 1;
}

.j-main .j-sheet.on {
  opacity: 1;
  z-index: 2;
}

.j-main .j-sheet.turning {
  /* 넘어가는 장 */
  opacity: 1;
  z-index: 3;
  animation: j-turn 1.5s cubic-bezier(.5, .02, .28, 1) forwards;
}

@keyframes j-turn {
  from {
    clip-path: inset(0 0 0 0);
  }

  to {
    clip-path: inset(0 100% 0 0);
  }
}

/* 넘어가는 경계에 지는 종이 그늘 */
.j-main .j-crease {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 130px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to left,
      rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, .10) 42%, rgba(0, 0, 0, 0) 100%);
}

.j-main .j-hero.turning .j-crease {
  animation: j-crease 1.5s cubic-bezier(.5, .02, .28, 1) forwards;
}

@keyframes j-crease {
  0% {
    opacity: 0;
    transform: translateX(-130px);
  }

  12% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(calc(100% + 130px));
  }
}

/* ---------- 문구 등장 효과 (슬라이드마다 번갈아) ---------- */
.j-main .fx-sand .j-kicker,
.j-main .fx-sand :is(h1,
  .j-main .j-h1) .ln,
.j-main .fx-sand .j-sub {
  opacity: 0;
  filter: blur(7px);
  transform: translateY(10px);
}

.j-main .j-copy.fx-sand.on .j-kicker,
.j-main .j-copy.fx-sand.on :is(h1,
  .j-main .j-h1) .ln,
.j-main .j-copy.fx-sand.on .j-sub {
  animation: j-sand 1.1s cubic-bezier(.19, 1, .22, 1) forwards;
}

.j-main .j-copy.fx-sand.on :is(h1,
  .j-main .j-h1) .ln:nth-child(1) {
  animation-delay: .18s;
}

.j-main .j-copy.fx-sand.on :is(h1,
  .j-main .j-h1) .ln:nth-child(2) {
  animation-delay: .34s;
}

.j-main .j-copy.fx-sand.on .j-sub {
  animation-delay: .54s;
}

@keyframes j-sand {
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

.j-main .fx-rise .j-kicker,
.j-main .fx-rise :is(h1,
  .j-main .j-h1) .ln,
.j-main .fx-rise .j-sub {
  overflow: hidden;
}

.j-main .fx-rise .j-kicker,
.j-main .fx-rise .j-sub {
  opacity: 0;
  transform: translateY(100%);
}

.j-main .fx-rise :is(h1,
  .j-main .j-h1) .ln>* {
  opacity: 0;
  transform: translateY(110%);
}

.j-main .j-copy.fx-rise.on .j-kicker,
.j-main .j-copy.fx-rise.on .j-sub {
  animation: j-rise 1.05s cubic-bezier(.19, 1, .22, 1) forwards;
}

.j-main .j-copy.fx-rise.on :is(h1,
  .j-main .j-h1) .ln>* {
  animation: j-rise 1.1s cubic-bezier(.19, 1, .22, 1) forwards;
}

.j-main .j-copy.fx-rise.on :is(h1,
  .j-main .j-h1) .ln:nth-child(1)>*:nth-child(1) {
  animation-delay: .20s;
}

.j-main .j-copy.fx-rise.on :is(h1,
  .j-main .j-h1) .ln:nth-child(1)>*:nth-child(2) {
  animation-delay: .28s;
}

.j-main .j-copy.fx-rise.on :is(h1,
  .j-main .j-h1) .ln:nth-child(2)>*:nth-child(1) {
  animation-delay: .36s;
}

.j-main .j-copy.fx-rise.on :is(h1,
  .j-main .j-h1) .ln:nth-child(2)>*:nth-child(2) {
  animation-delay: .44s;
}

.j-main .j-copy.fx-rise.on .j-sub {
  animation-delay: .62s;
}

@keyframes j-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

.j-main .fx-stagger .j-kicker,
.j-main .fx-stagger .j-sub {
  opacity: 0;
  transform: translateY(8px);
}

.j-main .fx-stagger .j-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
}

.j-main .j-copy.fx-stagger.on .j-ch {
  animation: j-ch .7s cubic-bezier(.19, 1, .22, 1) forwards;
}

.j-main .j-copy.fx-stagger.on .j-kicker {
  animation: j-sand .8s .1s forwards;
}

.j-main .j-copy.fx-stagger.on .j-sub {
  animation: j-sand .9s .74s forwards;
}

@keyframes j-ch {
  to {
    opacity: 1;
    transform: none;
  }
}

.j-main .fx-wipe .j-kicker,
.j-main .fx-wipe :is(h1,
  .j-main .j-h1) .ln,
.j-main .fx-wipe .j-sub {
  clip-path: inset(0 100% 0 0);
  opacity: .001;
}

.j-main .j-copy.fx-wipe.on .j-kicker,
.j-main .j-copy.fx-wipe.on :is(h1,
  .j-main .j-h1) .ln,
.j-main .j-copy.fx-wipe.on .j-sub {
  animation: j-wipe 1.1s cubic-bezier(.55, 0, .25, 1) forwards;
}

.j-main .j-copy.fx-wipe.on :is(h1,
  .j-main .j-h1) .ln:nth-child(1) {
  animation-delay: .20s;
}

.j-main .j-copy.fx-wipe.on :is(h1,
  .j-main .j-h1) .ln:nth-child(2) {
  animation-delay: .38s;
}

.j-main .j-copy.fx-wipe.on .j-sub {
  animation-delay: .60s;
}

@keyframes j-wipe {
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}


/* 시그니처 — 실제 상세 페이지 문구로 늘어난 분량에 맞춘 배치 */
.j-main .j-hcard .lead {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.6;
  margin-top: 10px;
}

.j-main .j-hcard p {
  line-height: 1.4;
}

.j-main .j-pts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.j-main .j-pts span {
  position: relative;
  padding-left: 15px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--mut);
}

.j-main .j-pts span::before {
  content: "";
  position: absolute;
  left: 0;
  top: .74em;
  width: 5px;
  height: 1px;
  background: var(--gold);
}

.j-main .j-more {
  display: inline-block;
  margin-top: 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 3px;
}

@media (max-width: 768px) {
  .j-main .j-hcard .lead {
    font-size: 14.5px;
    margin-top: 6px;
  }

  .j-main .j-pts span {
    font-size: 12.5px;
  }

  .j-main .j-more {
    font-size: 13px;
    margin-top: 12px;
  }

}

/* ---------- 아래쪽 사진 : 엠보싱(양각) ----------
   액자를 두르지 않고 사진 표면이 솟아 보이게 한다. 위에서 빛이 들고
   아래로 그늘이 지는 결을 얹고, 가장자리 한 줄로 두께를 준다.
   결은 '사진 크기에 정확히 맞는 틀'(.j-hpic)에 얹는다 — 카드에 직접 얹으면
   글 영역까지 덮어서 어림잡은 값으로 잘라내야 했고, 사진 비율이 제각각이라
   그 값이 늘 어긋났다. */
.j-main .j-hpic {
  position: relative;
  display: block;
  overflow: hidden;
}

.j-main .j-hpic img {
  display: block;
  width: 100%;
  height: auto;
}

.j-main .j-team-photo,
.j-main .j-team-group,
.j-main .j-bna-roll {
  position: relative;
}

.j-main .j-hpic img,
.j-main .j-team-photo img,
.j-main .j-team-group img {
  filter: grayscale(1) contrast(1.12) brightness(1.02);
}

.j-main .j-hpic::after,
.j-main .j-team-photo::after,
.j-main .j-team-group::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(158deg,
      rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .05) 26%,
      rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .10) 74%, rgba(0, 0, 0, .32) 100%);
  mix-blend-mode: soft-light;
}

.j-main .j-hpic::before,
.j-main .j-team-photo::before,
.j-main .j-team-group::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, .42),
    inset -1.5px -1.5px 0 rgba(0, 0, 0, .26);
}

/* 사진 틀이 새로 생겼으니 좌우 교차는 틀 기준으로 */
@media (min-width: 769px) {
  .j-main .j-hcard:nth-child(even) .j-hpic {
    order: 2;
  }

}

/* ---------- 모바일 : 시안 I 그대로, 사진만 넘겨진다 ---------- */
@media (max-width: 768px) {
  .j-main

  /* 사진이 absolute 라 부모 높이가 0 이 된다 — 시안 I 과 같은 계산으로 높이를 준다 */
  .j-hero-img {
    height: calc(100svh - 334px);
    min-height: 300px;
    width: 100%;
  }

  .j-main .j-sheet {
    object-fit: cover;
    object-position: 50% 0%;
  }

  .j-main .j-copy .j-kicker {
    display: none;
  }

  .j-main .j-copy :is(h1,
    .j-main .j-h1) .ln {
    width: 100%;
    font-size: 28px;
    gap: 10px;
  }

  .j-main .j-copy :is(h1,
    .j-main .j-h1) i {
    flex-basis: 28px;
  }

  .j-main .j-copy .j-sub {
    margin-top: 14px;
    font-size: 15px;
    max-width: none;
  }

  .j-main

  /* 모바일도 같은 원리 — 카피는 겹쳐 두고 쪽번호는 아래 행에 고정 */
  .j-hero-copy {
    row-gap: 18px;
  }

  .j-main .j-folio {
    padding-top: 12px;
    min-width: 0;
  }

  .j-main

  /* 원장단 단체사진 — 가로로 긴 사진(2.11:1)이라 폰 폭에 맞추면 높이가
     166px 밖에 안 나와 얼굴이 안 보인다. 화면 밖으로 넓게 펼치고
     옆으로 밀어 보게 한다. 얼굴 크기가 두 배가 된다. */
  .j-team-group {
    margin-left: calc(-1 * var(--pad));
    margin-right: calc(-1 * var(--pad));
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .j-main .j-team-group::-webkit-scrollbar {
    display: none;
  }

  .j-main .j-team-group img {
    width: 100%;
    max-width: none;
    display: block;
  }

  .j-main

  /* 오른쪽 끝을 살짝 흐려 둔다 — 여기서 끝이 아니라 더 있다는 표시 */
  .j-team-group::after {
    background:
      linear-gradient(to left, rgba(0, 0, 0, .16) 0, rgba(0, 0, 0, 0) 46px),
      linear-gradient(158deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .05) 26%,
        rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .10) 74%, rgba(0, 0, 0, .32) 100%);
    mix-blend-mode: normal;
  }

  .j-main

  /* 사진마다 원본 비율이 다르다(1:1 과 2:3). 한 비율로 가두면 남는 자리가
     빈 띠로 보이고 액자 속 액자처럼 뜬다. 비율을 풀어 사진이 제 크기로 앉게 하고,
.j-main 카드는 위를 맞춰 세운다 — 옆으로 한 장씩 넘겨 보는 구조라 높이는 달라도 된다. */
  .j-hstrip {
    align-items: flex-start;
  }

  .j-main .j-hcard img {
    aspect-ratio: auto;
    object-fit: fill;
    background: none;
  }

  .j-main .j-folio button {
    font-size: 13px;
  }

  .j-main .j-folio button.on {
    font-size: 18px;
  }

  .j-main .j-crease {
    width: 90px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .j-main .j-sheet.turning {
    animation: none;
    opacity: 0;
  }

  .j-main .j-hero.turning .j-crease {
    animation: none;
    opacity: 0;
  }

  .j-main .j-copy.on * {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
  }

}