/* ── common.css ── */
body {
  overflow-x: hidden;
}

.maylin-hero {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* autopost internal links */
.gb-element-autopost-internal-links {
  margin: 56px 0 24px;
  padding: 28px;
  border: 1px solid #d8e2ee;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(241, 246, 252, 0.96) 100%);
  box-shadow: 0 18px 40px rgba(31, 56, 88, 0.08);
}

.gb-element-autopost-internal-links .gb-text-autopost-internal-links-h2 {
  margin: 0 0 18px;
  color: #16365d;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.gb-element-autopost-internal-links .autopost-internal-links-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gb-element-autopost-internal-links .autopost-internal-links-list li {
  margin: 0 0 12px;
}

.gb-element-autopost-internal-links .autopost-internal-links-list li:last-child {
  margin-bottom: 0;
}

.gb-element-autopost-internal-links a.gb-text,
.gb-element-autopost-internal-links .gb-text[href] {
  display: block;
  padding: 16px 18px;
  border: 1px solid #d5e1ef;
  border-radius: 14px;
  background: #ffffff;
  color: #1a3a63;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(21, 49, 79, 0.06);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.gb-element-autopost-internal-links a.gb-text:hover,
.gb-element-autopost-internal-links a.gb-text:focus,
.gb-element-autopost-internal-links .gb-text[href]:hover,
.gb-element-autopost-internal-links .gb-text[href]:focus {
  transform: translateY(-2px);
  border-color: #a9bfd9;
  color: #0f2c4e;
  box-shadow: 0 14px 28px rgba(21, 49, 79, 0.1);
  text-decoration: none;
}

.gb-element-autopost-internal-links a.gb-text::after,
.gb-element-autopost-internal-links .gb-text[href]::after {
  content: "See more";
  display: block;
  margin-top: 8px;
  color: #5b7697;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .gb-element-autopost-internal-links {
    margin: 40px 0 20px;
    padding: 20px 16px;
    border-radius: 14px;
  }

  .gb-element-autopost-internal-links .gb-text-autopost-internal-links-h2 {
    font-size: 15px;
    margin-bottom: 14px;
  }

  .gb-element-autopost-internal-links a.gb-text,
  .gb-element-autopost-internal-links .gb-text[href] {
    padding: 14px 15px;
    font-size: 15px;
    border-radius: 12px;
  }
}

/* ==========================================================================
   컨테이너 세로 정렬 기본값                                    [align-defaults]
   --------------------------------------------------------------------------
   컨테이너 안의 사진·텍스트를 세로 중앙에 두는 전역 기본값이다.
   값을 바꾸려면 아래 :root 변수 하나만 고치면 사이트 전체에 반영된다.

     --container-align-y        남는 세로 공간에서 내용 덩어리의 위치
                                (block 컨테이너 · grid 의 행 전체)
     --container-items-align-y  가로로 놓인 항목들의 개별 세로 정렬
                                (grid 셀 · flex 아이템)

   쓸 수 있는 값: center | start | end | stretch | normal
   normal 로 두면 브라우저 기본(위쪽 정렬)으로 되돌아간다.

   선택자를 :where() 로 감싸 특이도를 0 으로 만들었다.
   따라서 GenerateBlocks 블록에 정렬을 직접 지정하면 언제나 그쪽이 이긴다.
   말 그대로 "기본값"이고, 기존 디자인을 덮어쓰지 않는다.

   display 를 건드리지 않으므로 block / grid / flex 레이아웃이 그대로 유지된다.
   세로 여유 공간이 없는 컨테이너에서는 아무 효과도 없다.
   ========================================================================== */

:root {
  --container-align-y: center;
  --container-items-align-y: center;
}

:where([class*="gb-element-"]),
:where(.gb-container),
:where(.gb-grid-wrapper) {
  align-content: var(--container-align-y);
  align-items: var(--container-items-align-y);
}

/* 컨테이너에 직접 놓인 이미지는 인라인 요소라 글꼴 baseline 만큼 아래 여백이
   생긴다. 세로 중앙을 맞춰도 그 여백 때문에 살짝 어긋나 보이므로 없앤다. */
:where([class*="gb-element-"]) > img,
:where([class*="gb-element-"]) > figure > img,
:where([class*="gb-media-"]) {
  vertical-align: middle;
}


/* ==========================================================================
   [mk-section-rhythm] 앞 페이지 섹션 사이 간격
   --------------------------------------------------------------------------
   섹션들이 서로 0px 로 딱 붙어 있어서 둥근 모서리끼리 맞닿았다.
   각 섹션이 자기 안쪽 여백(72px 안팎)을 갖고 있어도, 배경이 서로 다른
   카드가 붙어 있으면 경계가 뭉개져 보인다.

   값은 섹션 자신에게 준다. 감싼 div 에 테두리나 padding 이 없어서
   마진이 그 div 를 통과해 합쳐지고, 이웃끼리도 겹쳐서
   위아래 값이 더해지지 않고 한 칸(최대값)만 생긴다.

   히어로는 뺀다. 맨 위라 위쪽 간격이 필요 없고, 헤더에 바로 붙어야 한다.
   치료 랜딩 페이지(layout-treatment*)는 화면 끝까지 가는 띠를 이어 붙이는
   구조라 여기 해당하지 않는다. */
body.home .mk-why,
body.home .mk-mt,
body.home .mk-jn,
body.home .mk-tx,
body.home .mk-inside,
body.home .mk-sig,
body.home .mk-ba,
body.home .mk-dr,
body.home .mk-soc,
body.home .mk-gr,
body.home .mk-vs {
  margin-block: clamp(28px, 4vw, 58px);
}


/* ==========================================================================
   [mk-back-to-top] 맨 위로 올라가는 버튼
   --------------------------------------------------------------------------
   기본이 '안 보임'이고, 스크립트가 내려간 만큼을 재서 .is-on 을 붙인다.

   visibility 까지 같이 끄는 이유 — opacity 0 만으로는 투명할 뿐 여전히
   눌리고 Tab 으로도 잡힌다. 안 보이는 버튼에 초점이 가면 키보드 사용자가
   길을 잃는다.

   z-index 는 9000. 영상 모달(99999)보다는 낮게 둬서 모달이 열렸을 때
   버튼이 그 위로 뚫고 나오지 않게 한다. */
.mk-top {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
  z-index: 9000;

  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #a8822f;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(33, 27, 23, .28);

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease;
}

.mk-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mk-top:hover,
.mk-top:focus-visible { background: #8e6d22; }

.mk-top:focus-visible {
  outline: 2px solid #1c1512;
  outline-offset: 3px;
}

.mk-top svg {
  width: 19px;
  height: 19px;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .mk-top { transition: none; }
}

/* ==========================================================================
   거리뷰 창                                                       [twsv]
   --------------------------------------------------------------------------
   앞면 mk-mt 섹션에 있던 창을 떼어내 어느 페이지에서나 쓰게 만들었다.
   동작은 JS/street-view.js 에 있고, 버튼에 data-sv-* 로 위치를 적는다.

   창은 document.body 에 붙는다. 치료 페이지는 body 에 layout-treatment 가
   붙어 있어서 --tw-* 토큰이 그대로 내려온다. 다른 페이지에서도 쓸 수 있게
   var() 마다 기본값을 적어 둔다 — 토큰이 없는 페이지에서 색이 빈 값이 되면
   글자만 남고 배경이 사라진다(다른 사이트에서 실제로 겪었다).
   ========================================================================== */

.twsv {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
  background: rgba(20, 15, 11, .72);
  backdrop-filter: blur(2px);
}

.twsv[hidden] { display: none; }

.twsv__box {
  width: min(1040px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--tw-surface, #fff);
  border-radius: var(--tw-radius, 20px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.twsv__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--tw-line, #e8dcca);
}

.twsv__label {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--tw-ink, #1c1512);
}

.twsv__x {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  color: var(--tw-ink-soft, #6b5c4e);
  background: var(--tw-soft, #f4ece1);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}

.twsv__x:is(:hover, :focus-visible) {
  background: var(--tw-gold, #a8822f);
  color: #fff;
}

/* 지도는 가로가 넉넉해야 방향을 알아볼 수 있다.
   세로 화면에서는 4:3 에 가깝게 두고, 화면보다 커지지 않게 막는다. */
.twsv__frame {
  aspect-ratio: 16 / 10;
  max-height: 70vh;
  background: #111;
}

.twsv__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.twsv__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  border-top: 1px solid var(--tw-line, #e8dcca);
}

.twsv__foot p {
  margin: 0;
  font-size: 13.5px;
  color: var(--tw-ink-soft, #6b5c4e);
}

.twsv__go {
  font-size: 14px;
  font-weight: 600;
  color: var(--tw-gold, #a8822f);
  text-decoration: none;
}

.twsv__go:hover { text-decoration: underline; text-underline-offset: 3px; }
.twsv__go[hidden] { display: none; }

@media (max-width: 600px) {
  .twsv__frame { aspect-ratio: 4 / 3; max-height: 62vh; }
  .twsv__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .twsv__x { transition: none; }
}

/* ==========================================================================
   스크롤했을 때 고정되는 메뉴 바                                  [twnav]
   --------------------------------------------------------------------------
   테마(GP)는 스크롤하면 <nav> 하나만 고정한다. 로고는 헤더 쪽에 남아 있어서
   같이 따라오지 않는다. 그래서 스크롤하면 로고가 사라지고, 바는 메뉴 글자
   높이(25px)까지 납작해지고, 메뉴는 왼쪽으로 40px 밀렸다.

   로고는 테마 설정(스티키 내비게이션 로고)으로 되살렸다. 여기서는 모양만
   맞춘다 — 고정된 바가 원래 헤더와 같은 자리에 같은 것을 보여 주도록.

   맞춰야 하는 원래 값 (1265px 화면에서 잰 것):
     헤더 높이 114 · 로고 120x74, 왼쪽에서 40 · 메뉴 폭 850, 왼쪽에서 355

   고정 바는 그보다 조금 낮게 둔다. 화면을 덜 가리면서 로고가 읽히는 크기.
   가로 위치는 헤더와 똑같이 맞춘다 — 스크롤할 때 좌우로 흔들리지 않는다.
   ========================================================================== */

/* 안쪽 폭. 테마는 이 자리를 '가운데 정렬 고정폭'으로 두는데, 헤더는
   양옆 40px 만 띄운 전체 폭이다. 둘이 달라서 메뉴가 옆으로 튀었다. */
/* 선택자를 길게 쓰는 이유: 테마가 이것보다 구체적인 규칙을
   (.main-navigation.navigation-stick.has-sticky-branding .inside-navigation.grid-container)
   머리에 직접 찍는다. 짧게 쓰면 좌우 여백이 그쪽 값으로 덮인다. */
.main-navigation.navigation-stick.has-sticky-branding.is_stuck .inside-navigation.grid-container {
  max-width: none;
  padding-top: 11px;
  padding-bottom: 11px;
  /* 왼쪽 40, 오른쪽 60. 헤더에서 잰 값 그대로다 — 헤더는 양옆이
     대칭이 아니다(마지막 메뉴 항목이 오른쪽 여백을 41px 물고 있다).
     이 값이라야 스크롤할 때 로고와 메뉴가 제자리에 머문다. */
  padding-left: 40px;
  padding-right: 60px;
}

/* 로고 자리. flex 안에서 그냥 두면 이미지가 8px 까지 찌그러진다.
   줄어들지 않게 막고 비율대로 키운다. */
.main-navigation.navigation-stick .navigation-branding {
  flex: 0 0 auto;
  margin-right: auto;
  align-items: center;
}

/* 링크도 flex 항목이라 그냥 두면 줄어든다. 줄어들지 않게 못 박는다 —
   이걸 안 하면 로고가 68x62 로 눌려서 글자가 찌그러진다. */
.main-navigation.navigation-stick .sticky-navigation-logo,
.main-navigation.navigation-stick .sticky-navigation-logo a {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* 테마가 이 이미지에 padding:10px 0 을 걸어 둔다. box-sizing 때문에
   height 에서 위아래 20px 이 먼저 빠지고, 남은 46px 을 기준으로 폭이
   계산돼 로고가 75px 로 좁아졌다. 여백은 바 쪽에서 이미 주고 있으므로
   여기서는 0 으로 둔다. 그래야 66px 높이에 비율대로 107px 폭이 나온다. */
.main-navigation.navigation-stick .sticky-navigation-logo img {
  height: 66px;
  width: auto;
  max-width: none;
  padding: 0;
  flex: 0 0 auto;
  display: block;
}

/* 바 배경과 경계. 아래 내용이 비쳐 보이지 않게 한다. */
.main-navigation.navigation-stick {
  background-color: #fff;
  box-shadow: 0 1px 0 rgba(33, 27, 23, .09), 0 6px 18px rgba(33, 27, 23, .06);
}

/* 좁은 화면에서는 양옆 여백과 로고를 줄인다. 테마가 이 폭에서 메뉴를
   햄버거로 바꾸므로 로고와 단추만 남는다. */
@media (max-width: 768px) {
  .main-navigation.navigation-stick.has-sticky-branding.is_stuck .inside-navigation.grid-container {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .main-navigation.navigation-stick .sticky-navigation-logo img {
    height: 46px;
  }
}

/* ── CSS_Animations.css ── */
/* ==========================================================================
   스크롤 등장 효과
   --------------------------------------------------------------------------
   짝이 되는 스크립트는 JS/reveal.js 다. 어느 섹션에 어떤 효과를 줄지는
   그쪽 PLAN 에서 정하고, 여기서는 효과의 모양만 정의한다.

   숨기는 규칙은 전부 .is-armed 안에 있다. 이 클래스는 스크립트가 붙인다.
   스크립트가 안 돌면 클래스가 안 붙고, 그러면 이 파일의 숨김 규칙이
   아예 적용되지 않아 내용이 그냥 보인다.
   내용을 숨겨 놓고 못 보여 주는 사고를 구조로 막아 둔 것이다.

   transform 과 opacity 만 쓴다. 둘 다 레이아웃을 건드리지 않아서
   CLS 가 생기지 않는다. height 나 display 를 건드리면 그때부터 문제가 된다.
   ========================================================================== */

/* ── 공통 ────────────────────────────────────────────────────────────────── */
/* 숨길 때는 전환을 끈다.
   대상 요소가 이미 자기 transition 을 갖고 있으면(예: 카드의 hover 전환)
   숨기는 동작까지 애니메이션되어, 자리를 잡으러 내려가는 모습이 먼저 보인다.
   나타날 때의 전환은 아래 .is-in 이 다시 켠다. */
.mk-rv.is-armed {
  opacity: 0;
  transition: none;
}

.mk-rv.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .72s ease, transform .82s cubic-bezier(.22, .61, .36, 1);
}

/* ── 효과별 시작 자세 ────────────────────────────────────────────────────── */

/* 아래에서 올라온다 — 가장 무난한 기본값 */
.mk-rv.is-armed.rv-rise { transform: translateY(30px); }

/* 살짝 작았다가 제자리를 찾는다.
   앞 페이지의 섹션은 안쪽 카드라 주변에 여백이 있어 틈이 보이지 않는다.
   화면 끝까지 가는 띠에는 쓰면 안 된다. 줄어드는 동안 가장자리가 벌어진다. */
.mk-rv.is-armed.rv-zoom { transform: scale(.965); }

/* 옆에서 들어온다 */
.mk-rv.is-armed.rv-left { transform: translateX(-36px); }
.mk-rv.is-armed.rv-right { transform: translateX(36px); }

/* 움직이지 않고 밝아지기만 한다. 사진이 주인공인 자리에 쓴다.
   사진이 움직이면 눈이 사진 대신 움직임을 좇는다. */
.mk-rv.is-armed.rv-fade { transform: none; }

/* 차례로 올라오는 것 — 부모는 가만히 두고 자식만 움직인다 */
.mk-rv.is-armed.rv-stagger {
  opacity: 1;
  transform: none;
}

/* ── Signature Four: 카드 넉 장이 왼쪽부터 차례로 ───────────────────────── */
/* .mk-sig-card 에는 이미 transition: transform .22s 가 걸려 있다(hover 용).
   그래서 여기서 끄지 않으면 숨기는 동작부터 애니메이션된다. */
.mk-sig.rv-stagger.is-armed .mk-sig__grid > li {
  opacity: 0;
  transform: translateY(26px);
  transition: none;
}

.mk-sig.rv-stagger.is-in .mk-sig__grid > li {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .68s cubic-bezier(.22, .61, .36, 1);
}

.mk-sig.rv-stagger.is-in .mk-sig__grid > li:nth-child(2) { transition-delay: .1s; }
.mk-sig.rv-stagger.is-in .mk-sig__grid > li:nth-child(3) { transition-delay: .2s; }
.mk-sig.rv-stagger.is-in .mk-sig__grid > li:nth-child(4) { transition-delay: .3s; }

/* 머리말도 카드보다 한 박자 먼저 */
.mk-sig.rv-stagger.is-armed .mk-sig__eyebrow,
.mk-sig.rv-stagger.is-armed .mk-sig__title,
.mk-sig.rv-stagger.is-armed .mk-sig__lead {
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

.mk-sig.rv-stagger.is-in .mk-sig__eyebrow,
.mk-sig.rv-stagger.is-in .mk-sig__title,
.mk-sig.rv-stagger.is-in .mk-sig__lead {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

.mk-sig.rv-stagger.is-in .mk-sig__title { transition-delay: .06s; }
.mk-sig.rv-stagger.is-in .mk-sig__lead { transition-delay: .12s; }

/* ── 움직임을 줄이도록 설정한 경우 ──────────────────────────────────────── */
/* 스크립트가 이 경우 아예 클래스를 안 붙이므로 여기까지 올 일은 없지만,
   설정을 도중에 바꾸는 사람을 위해 남겨 둔다. */
@media (prefers-reduced-motion: reduce) {
  .mk-rv.is-armed,
  .mk-rv.is-armed * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── CSS_common.css ── */
/* =========================================
   Section Number Overlay
   ========================================= */

.gb-overlap {
    display: grid;
    place-items: center;
    justify-items: center;
    position: relative;
    margin-bottom: 1rem;
}

.gb-overlap > * {
    grid-area: 1 / 1;
}

/* Background Number */

.gb-overlap-number {
    font-size: clamp(90px, 14vw, 220px);
    font-weight: 700;
    line-height: 1;
    color: #d9d9d9;
    opacity: 0.7;
    z-index: 1;
    user-select: none;
}

/* Front Text */

.gb-overlap-text {
    font-size: clamp(28px, 8vw, 100px);
    font-weight: 700;
    line-height: 1;
    color: #9c6234;
    z-index: 2;

    /* 숫자 위쪽으로 조금 이동 */
    transform: translateY(20%);
}
:root{
    --container-width:1440px;
    --container-padding:30px;
}
.gb-container-wide{

    width:100%;
    max-width:var(--container-width);
    padding-inline:var(--container-padding);
    margin-inline:auto;
    box-sizing:border-box;
	margin-bottom:200px;
}
.highlight-strong strong {
    font-weight: 700;
    background-image: linear-gradient(#eae3dc, #eae3dc);
    background-repeat: no-repeat;
    background-size: 100% 15px;
    background-position: left bottom;
}
.entry-header {
    display: none;
}


/* ===========================
   YAAN Signature Auto Slider
=========================== */

/* 바깥 영역 */
.signature-slider{
    width:100%;
    overflow:hidden;
    position:relative;
}

/* 카드 트랙 */
.signature-track{
    display:flex;
    flex-wrap:nowrap;
    gap:24px;
    width:max-content;
    animation:signatureScroll 30s linear infinite;
    will-change:transform;
}

/* 카드 */
.signature-track > *{
    flex:0 0 320px;
}

/* 마우스를 올리면 일시정지 */
.signature-track:hover{
    animation-play-state:paused;
}

/* 무한 롤링 */
@keyframes signatureScroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

/* 태블릿 */
@media (max-width:1024px){

.signature-track{
    gap:20px;
    animation-duration:25s;
}

.signature-track > *{
    flex:0 0 280px;
}

}

/* 모바일 */
@media (max-width:768px){

.signature-track{
    gap:16px;
    animation-duration:18s;
}

.signature-track > *{
    flex:0 0 240px;
}

}

/* 사진 두개 살짝 기울여서 겹치기 */
.photo-overlap{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:-60px;
    position:relative;
    overflow:visible;
    padding:40px 0;
}

/* 공통 */
.photo-overlap img{
    width:320px;
    max-width:48%;
    border-radius:24px;
    box-shadow:0 20px 40px rgba(0,0,0,.18);
    transition:all .35s ease;
}

@keyframes float-left {
    0%,100%{
        transform: rotate(-7deg) translateY(0);
    }
    50%{
        transform: rotate(-7deg) translateY(-20px);
    }
}

@keyframes float-right {
    0%,100%{
        transform: rotate(7deg) translateY(0);
    }
    50%{
        transform: rotate(7deg) translateY(20px);
    }
}

/* 왼쪽 */
.photo-left{
    transform:rotate(-7deg);
    z-index:1;
    animation:float-left 4s ease-in-out infinite;
}

/* 오른쪽 */
.photo-right{
    transform:rotate(7deg);
    margin-left:-70px;
    z-index:2;
    animation:float-right 4s ease-in-out infinite;
}

/* Hover */
.photo-overlap img:hover{
    animation-play-state: paused;
}


/* ===========================
   FAQ Style
=========================== */

.wp-block-details{

    border-bottom:1px solid #e8e8e8;
    margin:0;
    padding:0;
}

/* ===========================
   Premium FAQ Style
=========================== */

.wp-block-details{

    border-bottom:1px solid #e8e8e8;
    margin:0;
    padding:0;
}

/* 질문 */

.wp-block-details summary{

    list-style:none;
    cursor:pointer;

    display:flex;
    align-items:center;

    padding:22px 0;

    font-size:22px;
    font-weight:600;
    line-height:1.5;

    color:#222;

    transition:color .25s ease;

}

/* 기본 삼각형 제거 */

.wp-block-details summary::-webkit-details-marker{

    display:none;

}

.wp-block-details summary::marker{

    display:none;

}

/* 왼쪽 Search SVG */

.wp-block-details summary::before{

    content:"";

    width:28px;
    height:28px;

    flex:0 0 28px;

    margin-right:14px;

    background-repeat:no-repeat;
    background-position:center;
    background-size:28px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E73BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16L21 21'/%3E%3C/svg%3E");

}

/* 오른쪽 + */

.wp-block-details summary::after{

    content:"+";

    margin-left:auto;

    font-size:28px;
    font-weight:300;
    line-height:1;

    color:#999;

    transition:.25s ease;

}

/* 열린 상태 */

.wp-block-details[open] summary::after{

    content:"−";

    color:#1E73BE;

}

/* Hover */

.wp-block-details summary:hover{

    color:#1E73BE;

}

/* 답변 */

.wp-block-details > div{

    padding:0 0 28px 34px;

    color:#666;

    font-size:17px;
    line-height:1.9;

}

/* 슬라이더 css + JS 약간 30kb 들어감*/
.slider-track{

    display:flex;
    gap:24px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;

    scrollbar-width:none;

}

.slider-track::-webkit-scrollbar{
    display:none;
}

.card{

    flex:0 0 320px;

    scroll-snap-align:start;

}
/* =========================================
   3단 배너 사선 넣고 멀티플레스. Banner Stack
   ========================================= */

.banner-stack {
    position: relative;
    width: 100%;
    overflow: visible;
}


/* =========================================
   Individual Banner
   ========================================= */

.banner-stack > .banner {
    position: relative;
    min-height: 400px;
    margin-bottom: -70px;

    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /*
     * 사선 형태
     */
    clip-path: polygon(
        0 8%,
        100% 0,
        100% 92%,
        0 100%
    );
}


/* =========================================
   Banner Layer / Stacking Order
   ========================================= */

.banner-stack > .banner-1 {
    z-index: 1;
}

.banner-stack > .banner-2 {
    z-index: 2;
}

.banner-stack > .banner-3 {
    z-index: 3;
}


/* =========================================
   Middle Banner - Opposite Angle
   ========================================= */
/* =========================================
   Clip Path
   1st: Top Horizontal / Bottom Diagonal
   ========================================= */

.banner-stack > .banner-1 {
    clip-path: polygon(
        0 0,
        100% 0,
        100% 92%,
        0 100%
    );
}


/* =========================================
   2nd: Top Diagonal / Bottom Diagonal
   ========================================= */

.banner-stack > .banner-2 {
    clip-path: polygon(
        0 0,
        100% 8%,
        100% 100%,
        0 92%
    );
}


/* =========================================
   3rd: Top Diagonal / Bottom Horizontal
   ========================================= */

.banner-stack > .banner-3 {
    clip-path: polygon(
        0 8%,
        100% 0,
        100% 100%,
        0 100%
    );
}



/* =========================================
   Color Overlay
   ========================================= */

.banner-stack > .banner::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 1;

    background: rgba(0, 0, 0, 0.35);

    pointer-events: none;
}


/* =========================================
   Banner 1 Overlay
   ========================================= */

.banner-stack > .banner-1::before {
    background: rgba(30, 50, 60, 0.38);

}


/* =========================================
   Banner 2 Overlay
   ========================================= */

.banner-stack > .banner-2::before {
    background: rgba(110, 65, 55, 0.42);
}


/* =========================================
   Banner 3 Overlay
   ========================================= */

.banner-stack > .banner-3::before {
    background: rgba(0, 0, 0, 0.45);
}


/* =========================================
   Content Layer
   ========================================= */

.banner-stack > .banner > * {
    position: relative;
    z-index: 2;
}


/* =========================================
   Text / Content Position
   ========================================= */

.banner-stack .banner-content {
    position: relative;
    z-index: 2;
}
@media (max-width: 767px) {
    .design-wrap.gb-element-45008d9f {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* =========================================
   Mobile
   ========================================= */

@media (max-width: 768px) {

    .banner-stack > .banner {
        min-height: 260px;
        margin-bottom: -34px;

        clip-path: polygon(
            0 5%,
            100% 0,
            100% 95%,
            0 100%
        );
    }


    .banner-stack > .banner-2 {
        clip-path: polygon(
            0 0,
            100% 5%,
            100% 100%,
            0 95%
        );
    }
}


/* =========================================
   Small Mobile
   ========================================= */

@media (max-width: 480px) {

    .banner-stack > .banner {
        min-height: 220px;
        margin-bottom: -24px;
    }

}


/* =========================================
   전체 영역 사각형 배너 디자인
   ========================================= */

.design-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: center;

    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

    padding: 30px 0;
}


/* =========================================
   왼쪽 2 × 2 카드
   ========================================= */

.design-cards {
    position: relative;
    z-index: 3;
    width: 100%;

    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}


/* =========================================
   각각의 카드
   ========================================= */

.design-card {
    position: relative;

    min-height: 200px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 35px 25px;

    box-sizing: border-box;

    background: #fff;

    overflow: hidden;
}


/* =========================================
   카드 내부 테두리
   ========================================= */

.design-cards::after {           /* ← .design-card::after 에서 이동 */
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    border: 1px solid #e59a52;
    pointer-events: none;
    z-index: 1;
}


/* =========================================
   카드 숫자
   ========================================= */

.design-card::before {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);

    font-size: 72px;
    line-height: 1;
    font-weight: 700;
    z-index: 1;
    pointer-events: none;
}


/* =========================================
   주황색 카드
   ========================================= */

.card-01,
.card-04 {
    background: #f57c00;
}

/* =========================================
   카드 콘텐츠
   ========================================= */

.design-card > * {
    position: relative;

    z-index: 2;
}



/* =========================================
   제목 밑의 작은 선
   ========================================= */

.design-card h3::after {
    content: "";

    display: block;

    width: 45px;
    height: 1px;

    margin: 15px auto 0;

    background: #df7620;
}


/* 주황색 카드의 선 */

.card-01 h3::after,
.card-04 h3::after {
    background: rgba(255, 255, 255, 0.8);
}

/* 주황색 카드 설명 */

.card-01 p,
.card-04 p {
    color: rgba(255, 255, 255, 0.9);
}


/* =========================================
   오른쪽 설명 박스
   ========================================= */

.design-info {
    position: relative;
    z-index: 1;

    min-height: 310px;

    margin-left: -1px;

    padding: 60px 70px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px solid #e59a52;

    background: #fff;

    overflow: hidden;
}


/* =========================================
   오른쪽 박스 제목
   ========================================= */

.design-info h2 {
    position: relative;

    z-index: 2;

    margin: 0 0 20px;

    font-size: 27px;
    line-height: 1.4;

    color: #df7620;

    font-weight: 500;
}


/* =========================================
   오른쪽 설명
   ========================================= */

.design-info p {
    position: relative;

    z-index: 2;

    max-width: 500px;

    margin: 0;

    font-size: 15px;
    line-height: 1.7;

    color: #777;
}


/* =========================================
   오른쪽 워터마크
   ========================================= */

.design-info::after {
    content: "Yaan Clinic Gang-Nam";

    position: absolute;

    left: 20px;
    bottom: 5px;

    white-space: nowrap;

    font-size: 62px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 1px;

    color: rgba(245, 130, 20, 0.045);

    z-index: 1;

    pointer-events: none;
}


/* =========================================
   모바일
   ========================================= */

@media (max-width: 768px) {

    .design-wrap {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 20px;
    }


    .design-cards {
        width: 100%;
    }


    .design-card {
        min-height: 180px;

        padding: 30px 15px;
    }


    .design-card h3 {
        font-size: 19px;
    }


    .design-card p {
        font-size: 13px;
    }


    .design-info {
        min-height: 280px;

        margin-left: 0;

        padding: 50px 30px;
    }


    .design-info h2 {
        font-size: 24px;
    }


    .design-info::after {
        font-size: 42px;
        left: 10px;
    }
}


/* =========================================
   작은 모바일
   ========================================= */

@media (max-width: 480px) {

    .design-card {
        min-height: 160px;

        padding: 25px 10px;
    }


    .design-card::before {
        font-size: 55px;
    }


    .design-card h3 {
        font-size: 17px;

        margin-bottom: 20px;
    }


    .design-card p {
        font-size: 12px;
        line-height: 1.5;
    }


    .design-info {
        padding: 40px 20px;
    }

}

/* ===== 카드 폭 (잘림 방지 핵심) ===== */
.gb-element-39ba0ee7 {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 767px) {
    .gb-element-39ba0ee7 {
        width: 100% !important;
        margin-top: -40px !important;
    }
}

/* ===== 타임라인 01 ===== */
.care-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1em;
    padding: 50px 60px 30px;
    text-align: center;
}
.care-timeline-item { display: flex; flex-direction: column; align-items: center; }
.care-timeline-title { font-size: 18px; font-weight: 700; color: #333; margin: 0; }

.care-timeline-stem {
    position: relative;
    width: 0;
    height: 26px;
    margin-top: 10px;
    border-left: 1px dotted #aaa;
}
.care-timeline-stem::after {
    content: "";
    position: absolute;
    left: -3px;
    bottom: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7a6bb5;
    z-index: 2;
}

.care-timeline-track {
    grid-column: 1 / -1;
    position: relative;
    height: 3px;
    margin: 0 0 25px;
    background: linear-gradient(90deg, #cfe8f0 0%, #b9a8e0 100%);
}
.care-timeline-track::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 9px solid #b9a8e0;
    transform: translateY(-50%);
}

.care-timeline-desc { font-size: 14px; line-height: 1.7; color: #666; margin: 0; }

/* ===== 모바일 ===== */
@media (max-width: 767px) {
    .care-timeline {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
    .care-timeline-track,
    .care-timeline-stem {
        display: none;
    }

    .care-timeline-item:nth-child(1) { order: 1; }
    .care-timeline-item:nth-child(6) { order: 2; margin-bottom: 22px; }
    .care-timeline-item:nth-child(2) { order: 3; }
    .care-timeline-item:nth-child(7) { order: 4; margin-bottom: 22px; }
    .care-timeline-item:nth-child(3) { order: 5; }
    .care-timeline-item:nth-child(8) { order: 6; margin-bottom: 22px; }
    .care-timeline-item:nth-child(4) { order: 7; }
    .care-timeline-item:nth-child(9) { order: 8; }

    .care-timeline-title::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #7a6bb5;
        margin-right: 6px;
        vertical-align: middle;
    }
}


/* ===== recommand for 조정 ===== */
.numbered-row-item {
    position: relative;
    margin-top: 35px;
}
.numbered-row-number {
    position: absolute;
    top: -35px;
    left: 15px;
    z-index: 2;
    font-size: 65px;
    font-weight: 900;
    line-height: 1;
    margin: 0;
}
.numbered-row-text {
    position: relative;
    z-index: 1;
    border: 1px solid var(--contrast-2);
    padding: 20px 20px 20px 75px;
    font-size: 30px;
    text-align: left;
    margin: 0;
}

/* ── CSS_Contact.css ── */
/* ==========================================================================
   문의 페이지와 폼                                              [contact]
   --------------------------------------------------------------------------
   폼은 GenerateBlocks Pro 가 별도 블록(form-render)으로 그린다. 그 마크업은
   우리가 만들지 않으므로 여기서는 클래스에 옷만 입힌다. 그래야 나중에
   편집기에서 필드를 더하거나 빼도 모양이 유지된다.

   토큰을 .mkc-page 와 .entry-content 양쪽에 선언하는 이유:
   폼 블록은 우리 래퍼(.mkc-page) 바깥의 형제로 나온다. CSS 변수는 그 요소의
   하위 트리에만 내려가므로 래퍼에만 선언하면 폼 안에서 var() 가 빈 값이 된다.
   실제로 다른 사이트에서 그렇게 해서 보내기 버튼이 배경 없이 흰 글자만 남아
   안 보인 적이 있다. 값 자체는 layout-treatment.css 의 tw 팔레트와 같다.
   ========================================================================== */

.mkc-page,
.entry-content {
  --mkc-cream: #faf6f0;
  --mkc-surface: #ffffff;
  --mkc-soft: #f4ece1;
  --mkc-wash: #f6edda;
  --mkc-line: #e8dcca;
  --mkc-ink: #1c1512;
  --mkc-ink-soft: #6b5c4e;
  --mkc-gold: #a8822f;
  --mkc-gold-soft: #cbab6a;
  --mkc-radius: 18px;
}

.mkc-page { color: var(--mkc-ink); }
.mkc-page * { box-sizing: border-box; }

.mkc-eyebrow {
  margin: 0 0 12px;
  color: var(--mkc-gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mkc-page h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.24;
  letter-spacing: -.025em;
  font-weight: 700;
  color: var(--mkc-ink);
  text-wrap: balance;
}

.mkc-lead {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
  color: var(--mkc-ink-soft);
}

/* ── 본문 두 칸: 왼쪽 폼, 오른쪽 방문 정보 ────────────────────── */
/* 폼이 형제 블록이라 한 그리드에 넣을 수 없다. 그래서 .entry-content 자체를
   그리드로 만들지 않고, 폼과 정보를 세로로 쌓되 정보 쪽을 카드로 묶었다.
   가로 2단으로 바꾸려면 폼을 우리 블록 안에 넣어야 하는데, 그러면 편집기에서
   필드를 고쳤을 때 따라오지 않는다. 지금 구조가 낫다. */

.mkc-head { margin: 0 0 clamp(26px, 3vw, 38px); }

/* ── 폼 ───────────────────────────────────────────────────────── */
.entry-content .gb-form {
  /* 폭을 묶는다. 앞면처럼 넓은 페이지에 그대로 놓으면 입력칸이 화면 끝까지
     늘어나서 읽기도 쓰기도 나빠진다. 연락처 페이지에서도 이 폭이 낫다. */
  max-width: 760px;
  /* 기본은 왼쪽. 연락처 페이지는 제목과 설명이 왼쪽에 있어서 폼만 가운데로
     가면 축이 어긋난다. 가운데로 놓고 싶은 자리(앞면)에서만 따로 지정한다. */
  margin: 0 0 clamp(30px, 4vw, 46px);
  padding: clamp(24px, 3vw, 36px);
  display: grid;
  gap: 18px;
  background: var(--mkc-surface);
  border: 1px solid var(--mkc-line);
  border-radius: var(--mkc-radius);
  box-shadow: 0 18px 40px rgba(38, 26, 14, .06);
}

.entry-content .gb-form-field { display: grid; gap: 7px; }

.entry-content .gb-form-field__label {
  font-size: 13.5px;
  font-weight: 600;
  color: #3b322a;
}

.entry-content .gb-form-field__required { color: var(--mkc-gold); }

.entry-content .gb-form-field__input {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mkc-ink);
  background: #fdfaf6;
  border: 1px solid #e0d3bf;
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.entry-content .gb-form textarea.gb-form-field__input {
  min-height: 140px;
  resize: vertical;
}

.entry-content .gb-form-field__input:focus {
  outline: none;
  background: #fff;
  border-color: var(--mkc-gold);
  box-shadow: 0 0 0 3px rgba(168, 130, 47, .15);
}

.entry-content .gb-form-field__input::placeholder { color: #b3a48f; }

/* 동의 체크박스만 가로로 눕힌다 */
.entry-content .gb-form-field--checkbox {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--mkc-soft);
}

.entry-content .gb-form-field--checkbox .gb-form-field__input {
  width: 17px;
  height: 17px;
  margin-top: 3px;
  padding: 0;
  accent-color: var(--mkc-gold);
}

.entry-content .gb-form-field--checkbox .gb-form-field__label {
  order: 2;
  font-size: 13.5px;
  font-weight: 500;
  color: #55493d;
}

/* 보내기 버튼.
   GB 의 styles 속성으로 주지 않는 이유: 그 속성은 편집기에서 저장할 때만
   CSS 로 바뀐다. 스크립트로 넣은 블록에는 CSS 가 생기지 않아 값만 남는다.
   그리고 두 곳에 모양을 적어 두면 누군가 편집기에서 저장하는 순간 한쪽이
   이겨서 모양이 바뀐다. 그래서 여기 한 곳에만 둔다. */
.entry-content .gb-form button[type="submit"] {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  background: var(--mkc-gold);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .16s ease, transform .16s ease;
}

.entry-content .gb-form button[type="submit"]:is(:hover, :focus-visible) {
  background: #8d6c24;
  transform: translateY(-1px);
}

.entry-content .gb-form button[type="submit"]:focus-visible {
  outline: 2px solid var(--mkc-gold-soft);
  outline-offset: 3px;
}

.entry-content .gb-form button[type="submit"][disabled] {
  opacity: .6;
  cursor: default;
  transform: none;
}

.entry-content .gb-form-message {
  margin: 0;
  padding: 13px 16px;
  font-size: 14.5px;
  border: 1px solid var(--mkc-line);
  border-radius: 10px;
  background: var(--mkc-wash);
}

.entry-content .gb-form-message--success {
  border-color: #bcd6bb;
  background: #f1f8f0;
  color: #2f5c2c;
}

.entry-content .gb-form-message--error {
  border-color: #e0bcbc;
  background: #fbf2f2;
  color: #7a2f2f;
}

/* ── 방문 정보 ────────────────────────────────────────────────── */
.mkc-visit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.mkc-card {
  padding: 24px 22px;
  background: var(--mkc-cream);
  border: 1px solid var(--mkc-line);
  border-radius: 14px;
}

.mkc-card h2 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mkc-gold);
}

.mkc-card p { margin: 0 0 6px; font-size: 15px; line-height: 1.7; color: #453a30; }
.mkc-card p:last-child { margin-bottom: 0; }
.mkc-card strong { font-weight: 600; color: var(--mkc-ink); }

.mkc-card a {
  color: var(--mkc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--mkc-gold-soft);
}
.mkc-card a:hover { text-decoration-color: var(--mkc-gold); }

.mkc-hours { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; font-size: 14.5px; }
.mkc-hours dt { color: #6b5c4e; margin: 0; }
.mkc-hours dd { margin: 0; color: var(--mkc-ink); font-variant-numeric: tabular-nums; }
.mkc-hours .is-closed { color: #9b8b7a; }

.mkc-note {
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding: 2px 0 2px 18px;
  max-width: 62ch;
  border-left: 3px solid var(--mkc-gold-soft);
  font-size: 14.5px;
  line-height: 1.75;
  color: #55493d;
}

@media (max-width: 860px) {
  .mkc-visit { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .entry-content .gb-form *,
  .mkc-page * { transition: none !important; }
}

/* ── CSS_Hero.css ── */
.hero {
    background-position: right bottom;
	background-size: 50%;
	background-repeat: no-repeat;
}

/* ── CSS_Logo.css ── */
/* ==========================================================================
   메이린 로고 — 그려지는 효과                                    [mk-logo]
   --------------------------------------------------------------------------
   연꽃은 윤곽을 따라 그려진 뒤 금색으로 채워지고, MAYLIN 은 한 자씩
   떠오르고, 밑줄 글씨는 마지막에 조용히 나타난다.

   손글씨로 하지 않은 이유: MAYLIN 은 획 굵기가 변하고 세리프가 달린
   활자체다. 사람이 손으로 쓰는 글자가 아니라서, 중심선을 따 필기체로
   만들면 원래 로고와 다른 물건이 된다. 대신 심볼(연꽃)은 원래 선으로
   그리는 것이므로 그려지는 편이 자연스럽다.

   **애니메이션이 없어도 로고는 정상으로 보인다.** 기본 상태가 완성된
   모습이고, `.go` 가 붙을 때만 움직인다. 스크립트가 실패하거나 CSS 가
   늦게 와도 로고가 사라지지 않는다.
   ========================================================================== */

.mk-logo {
  --gold: #B4914F;
  display: block;
  /* 헤더에서는 GP 의 `.site-header .header-image` 가 폭을 정한다
     (사이트 설정의 logo_width). 여기서는 기본값만 둔다. */
  width: 100%;
  max-width: 100%;
  height: auto;
  /* 선이 그려지는 동안 도형 밖으로 살짝 번진다. 잘리지 않게 둔다. */
  overflow: visible;
}

/* ── 기본 상태 = 완성된 로고 ─────────────────────────────────────── */
.mk-logo .pt,
.mk-logo .lt,
.mk-logo .tg {
  fill: var(--gold);
}

.mk-logo .pt {
  /* 선은 처음부터 달아 두되 보이지 않게 한다. `stroke: none` 이면
     나중에 선을 켤 수 없다 — none 에서는 값이 이어지지 않는다. */
  stroke: var(--gold);
  stroke-width: .9;
  stroke-opacity: 0;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* 도형마다 실제 길이가 20~90 으로 제각각인데, 마크업의
     pathLength="100" 이 길이를 100 으로 환산해 준다. 그래서 이 한 줄로
     모든 꽃잎이 같은 속도로 그려진다. */
  stroke-dasharray: 100;
}

/* ── 움직임 ──────────────────────────────────────────────────────── */
.mk-logo.go .pt {
  animation:
    mk-draw .45s ease-out both,
    mk-ink  .30s ease-out both;
  animation-delay:
    calc(var(--i) * 18ms),
    calc(var(--i) * 18ms + .28s);
}

@keyframes mk-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

@keyframes mk-ink {
  from { fill-opacity: 0; stroke-opacity: 1; }
  to   { fill-opacity: 1; stroke-opacity: 0; }
}

.mk-logo.go .lt {
  animation: mk-rise .4s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(.95s + var(--i) * 60ms);
}

@keyframes mk-rise {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.mk-logo.go .tg {
  animation: mk-fade .5s ease-out both;
  animation-delay: 1.5s;
}

@keyframes mk-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 움직임을 줄여 달라고 한 사람에게는 ──────────────────────────── */
/* 이 설정을 켜 두는 사람은 어지럼증이나 멀미를 겪는 경우가 많다.
   로고가 안 보이면 안 되므로, 끄는 대신 완성된 상태로 바로 보여준다. */
@media (prefers-reduced-motion: reduce) {
  .mk-logo.go .pt,
  .mk-logo.go .lt,
  .mk-logo.go .tg {
    animation: none;
  }
}

/* ── CSS_MegaMenu.css ── */
/* ==========================================================================
   펼침 메뉴 (메가 메뉴)
   --------------------------------------------------------------------------
   테마의 하위 메뉴를 그대로 쓰고 모양만 바꾼다. 여닫는 동작은 테마가 이미
   하고 있다 — 숨길 때 opacity 0 · height 0 · overflow hidden, 열 때 그 반대.
   그 장치는 건드리지 않고, 가로로 밀어 숨기는 left:-99999px 만 무력화한다.
   그래야 화면 폭으로 펼쳐진 상태에서도 여닫기가 그대로 동작한다.

   좁은 화면에서는 테마가 메뉴를 토글로 바꾸므로 여기 규칙을 전부 끈다.
   짝: JS/mega-menu.js (사진 바꾸기·위치 계산), inc/mega-menu.php (사진 칸)
   ========================================================================== */

@media (min-width: 769px) {

  /* ── 패널 ───────────────────────────────────────────────────────────
     화면 기준으로 고정한다. 메뉴는 헤더 안에서 오른쪽에 떠 있어서 그걸
     기준으로 삼으면 패널이 메뉴 폭(850px)에 갇힌다. 위쪽 좌표는 JS 가
     메뉴 바 아래를 재서 --mk-mega-top 으로 넘겨준다. */
  /* 메뉴 글자 아래와 패널 사이의 빈 틈에 보이지 않는 다리를 놓는다.
     그 위를 지나는 동안 어느 쪽도 hover 가 아니라서 메뉴가 닫혀 버렸다.
     가상 요소도 hover 판정에서는 주인 요소의 일부라, 여기에 마우스가
     올라가 있는 동안 li 의 hover 가 유지된다.
     열려 있을 때만 만든다 — 늘 있으면 메뉴 아래 빈 줄에 마우스만 가도
     메뉴가 열린다. 대각선으로 빠지는 것을 감안해 양옆으로 조금 넓힌다. */
  .main-navigation .main-nav ul li.mk-mega:hover::after,
  .main-navigation .main-nav ul li.mk-mega.sfHover::after {
    content: "";
    position: absolute;
    top: 100%;
    /* 패널은 화면 가운데로 모이는데 메뉴 글자는 오른쪽에 있다.
       항목 너비 ±24px 만 덮으면 대각선으로 내려가는 동안 다리를
       벗어나 메뉴가 닫힌다 - 재보니 패널 왼쪽 끝이 항목보다 101px
       더 왼쪽이었다. 화면 폭만큼 깔아 어느 쪽으로 내려가든
       다리 위를 지나게 한다. 높이는 그대로 틈만큼이라 메뉴 바도
       패널도 덮지 않는다. */
    left: calc(0px - var(--mk-mega-item-left, 0px));
    width: 100vw;
    height: var(--mk-mega-gap, 45px);
  }

  .main-navigation .main-nav ul li.mk-mega > ul.sub-menu {
    position: fixed;
    top: var(--mk-mega-top, 114px);
    left: 0;
    right: 0;
    /* 화면 끝까지 늘리지 않는다. 가운데로 모으면 읽는 폭이 줄고
       머리 위에 떠 있는 판처럼 보인다. */
    width: min(1120px, calc(100% - 48px));
    margin-inline: auto;
    max-width: none;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 28px;
    align-content: start;

    padding: 26px 34px 30px;
    background: #fff;
    border: 1px solid #ece3d4;
    border-radius: 16px;
    box-shadow: 0 20px 46px rgba(33, 27, 23, .14);
  }

  /* 패널 좌우 바깥의 빈 자리도 패널의 일부로 친다.

     패널은 화면 가운데로 모이는데(최대 1120px) 메뉴 글자는 헤더 오른쪽에
     있다. 넓은 화면에서, 특히 스크롤해서 바가 붙박이로 바뀌면 항목이
     패널 오른쪽 끝보다 더 오른쪽에 놓인다. 그 상태로 마우스를 곧장
     아래로 내리면 패널 옆 빈 자리에 떨어져 어느 쪽도 hover 가 아니게
     되고 메뉴가 닫힌다. 위쪽 틈만 덮는 다리로는 이걸 못 막는다.

     패널 뒤(z-index:-1)에 화면 폭만큼 보이지 않는 띠를 깐다. 그 빈 자리에
     마우스가 있어도 패널 위에 있는 것으로 쳐진다. 패널보다 뒤에 있어
     안쪽 링크를 가리지 않고, 높이가 패널과 같아 페이지를 삼키지도 않는다.
     닫혀 있을 때는 테마가 패널에 height:0 + overflow:hidden 을 걸어 두므로
     이 띠도 같이 잘려 사라진다. */
  .main-navigation .main-nav ul li.mk-mega > ul.sub-menu::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    z-index: -1;
  }

  /* 항목이 적은 메뉴는 칸을 덜 쓴다 */
  .main-navigation .main-nav ul li.mk-mega.mk-mega--few > ul.sub-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 사진 칸은 격자에 넣지 않고 오른쪽에 따로 띄운다.

     처음에는 마지막 열을 주고 모든 행에 걸치게(grid-row: 1/-1) 했는데,
     사진이 항목 더미보다 키가 커서 그 높이가 행마다 나눠 들어갔다. 목록이
     위아래로 늘어지고 마지막 항목이 사진 열로 밀려났다.
     격자에서 빼내면 행은 글자 높이 그대로 있고 사진은 제 크기로 선다.
     오른쪽 여백은 패널 padding 으로 미리 비워 둔다. */
  .main-navigation .main-nav ul li.mk-mega--photos > ul.sub-menu {
    padding-right: calc(34px + 248px);
    /* 사진이 격자 밖이라 패널 높이를 늘려 주지 않는다. 사진이 들어갈
       만큼은 열어 둔다(위 여백 26 + 사진 약 255 + 설명 줄 + 아래 여백). */
    min-height: 350px;
  }

  .main-navigation .main-nav ul li.mk-mega--photos.mk-mega--few > ul.sub-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ── 항목 ──────────────────────────────────────────────────────────
     테마는 하위 항목을 width:100% 로 두는데, 격자 안에서는 칸이 폭을
     정하므로 풀어 준다. */
  .main-navigation .main-nav ul li.mk-mega > ul.sub-menu > li {
    width: auto;
    float: none;
  }

  .main-navigation .main-nav ul li.mk-mega > ul.sub-menu > li > a {
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 14.5px;
    line-height: 1.4;
    /* 한글이 섞이면 낱말 중간에서 잘린다 */
    word-break: keep-all;
    overflow-wrap: break-word;
    transition: background-color .14s ease, color .14s ease;
  }

  .main-navigation .main-nav ul li.mk-mega > ul.sub-menu > li > a:hover,
  .main-navigation .main-nav ul li.mk-mega > ul.sub-menu > li > a:focus {
    background: #f7f1e7;
  }

  /* ── 사진 칸 ────────────────────────────────────────────────────────
     패널이 position:fixed 라 그 안에서 absolute 로 자리를 잡을 수 있다.
     격자 밖이므로 항목이 몇 개든 행 높이에 영향을 주지 않는다. */
  .main-navigation .main-nav ul li.mk-mega > ul.sub-menu > li.mk-mega__pane {
    position: absolute;
    top: 26px;
    right: 34px;
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 28px;
    border-left: 1px solid #f0e8db;
  }

  /* 카드 사진이 세로(700x980)라 가로 칸에 넣으면 얼굴이 잘린다.
     사진 쪽 비율에 맞춘다. */
  .mk-mega__img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    background: #f4ece1;
  }

  .mk-mega__cap {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #6b5c4e;
    word-break: keep-all;
  }

  /* 사진이 아직 안 정해졌을 때 빈 상자가 덜컥 보이지 않게 한다 */
  .mk-mega__img:not([src]) {
    visibility: hidden;
  }

  /* ── 로고 칸 ────────────────────────────────────────────────────────
     항목에 사진이 하나도 없는 메뉴(About Maylin·Customers)에 세운다.
     사진 칸과 달리 세로로 길 이유가 없어 자리를 덜 쓴다. */
  .main-navigation .main-nav ul li.mk-mega--logo > ul.sub-menu {
    padding-right: calc(34px + 208px);
    min-height: 190px;
  }

  .main-navigation .main-nav ul li.mk-mega > ul.sub-menu > li.mk-mega__pane--logo {
    width: 180px;
    align-items: flex-start;
    justify-content: center;
  }

  /* 글씨가 써지는 효과.

     제대로 된 필기 효과는 글자를 선으로 들고 있는 SVG 라야 한다. 지금
     로고는 PNG 라 획이 없어서, 붓이 지나가듯 왼쪽에서 오른쪽으로 번져
     나오게 했다. 가로로 쓰인 워드마크라 꽤 비슷하게 보인다.

     끝을 흐리게 둬서 자른 자국이 아니라 번지는 것처럼 보이게 한다.
     그래서 100% 가 아니라 125% 까지 밀어야 꼬리까지 다 지나간다. */
  .mk-mega__logo {
    width: 100%;
    height: auto;
    display: block;

    /* 가리개를 왼쪽 끝에 붙여 두고 폭만 키운다. 위치를 움직이는 것보다
       계산이 단순하고, 폭이 0 이면 아무것도 안 보이는 것이 분명하다.
       평소(정지) 상태는 다 보이게 둔다 — JS 가 못 돌아도 로고는 보인다. */
    --mk-write: linear-gradient(90deg,
      #000 0%, #000 72%,
      rgba(0, 0, 0, .55) 88%,
      rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: var(--mk-write);
    mask-image: var(--mk-write);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: 125% 100%;
    mask-size: 125% 100%;
  }

  .mk-mega__logo.is-writing {
    animation: mk-write 900ms cubic-bezier(.22, .61, .36, 1) forwards;
  }

  /* 125% 까지 미는 이유: 가리개 끝을 흐리게 둬서 잘린 자국이 아니라
     번지는 것처럼 보이게 했는데, 100% 에서 멈추면 그 흐린 꼬리가 로고
     오른쪽 끝에 남아 희미하게 보인다. */
  @keyframes mk-write {
    from { -webkit-mask-size: 0% 100%;   mask-size: 0% 100%; }
    to   { -webkit-mask-size: 125% 100%; mask-size: 125% 100%; }
  }
}

/* 움직임을 줄여 달라고 한 사용자에게는 그냥 보여 준다 */
@media (prefers-reduced-motion: reduce) {
  .mk-mega__logo,
  .mk-mega__logo.is-writing {
    -webkit-mask-image: none;
    mask-image: none;
    animation: none;
  }
}

/* 애니메이션을 원치 않는 사용자 */
@media (prefers-reduced-motion: reduce) {
  .main-navigation .main-nav ul li.mk-mega > ul.sub-menu > li > a {
    transition: none;
  }
}

/* ── CSS_Policy.css ── */
/* ==========================================================================
   정책·안내 페이지 공용 스타일 (mkab-)                        [policy]
   --------------------------------------------------------------------------
   원래 이 CSS 는 정책 페이지마다 본문 안에 그대로 복사돼 있었다(페이지당 8KB).
   페이지가 늘어날수록 같은 규칙이 여러 벌로 갈라지므로 여기로 옮겼다.
   css/CSS_*.css 는 자식테마가 자동으로 읽어 간다.

   먼저 만들어진 네 페이지(의료 면책·편집정책·검토절차·출처)는 아직 자기
   본문에 같은 CSS 를 들고 있다. 내용이 같아서 부딪히지 않는다. 그 페이지들을
   손볼 일이 생기면 그때 본문 쪽 style 블록을 지우면 된다.
   ========================================================================== */

/* ==========================================================================
   About Maylin (mkab-)
   메인 페이지의 양식을 그대로 따른다 — eyebrow 는 금색 선 + 대문자,
   제목은 clamp + weight 800 + letter-spacing -.03em, 리드는 58ch,
   카드는 radius 20px + 그림자 + hover 시 살짝 떠오름.
   ========================================================================== */
.mkab {
  --ab-accent: var(--accent, #b4914f);
  --ab-ink: var(--contrast-2, #211b17);
  --ab-soft: #7d7268;
  --ab-line: #e9e0d0;
  --ab-bg: #fffdf9;
  --ab-panel: #f6f1e8;
  box-sizing: border-box;
  background: var(--ab-bg);
  color: var(--ab-ink);
  border-radius: 22px;
  padding: 0 0 66px;
  overflow: hidden;
  font-size: 16.5px;
  line-height: 1.75;
}
.mkab *, .mkab *::before, .mkab *::after { box-sizing: inherit; }
.mkab__in { max-width: 780px; margin: 0 auto; padding: 0 22px; }
.mkab__in--wide { max-width: 1120px; }

/* ── 머리말 ─────────────────────────────────────────────────────────────── */
.mkab__head { padding: 62px 0 6px; }
.mkab__crumb {
  margin: 0 0 18px; font-size: 12.5px; letter-spacing: .06em; color: var(--ab-soft);
}
.mkab__crumb a { color: var(--ab-soft); text-decoration: none; }
.mkab__crumb a:hover { text-decoration: underline; }
.mkab__eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px;
  color: var(--ab-accent); font-size: 12px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
}
.mkab__eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.mkab__h1 {
  margin: 0 0 16px; font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
}
.mkab__lead { max-width: 58ch; margin: 0 0 8px; color: #4a403a; font-size: 18px; line-height: 1.7; }

/* ── 머리 사진 ──────────────────────────────────────────────────────────── */
.mkab__hero {
  position: relative; margin: 34px 0 0; border-radius: 20px; overflow: hidden;
  aspect-ratio: 21 / 9; background: var(--ab-panel);
  box-shadow: 0 10px 30px rgba(33, 27, 23, .1);
}
.mkab__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── 본문 ───────────────────────────────────────────────────────────────── */
.mkab h2 {
  margin: 56px 0 16px; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.25;
  font-weight: 800; letter-spacing: -.02em; padding-top: 28px;
  border-top: 1px solid var(--ab-line);
}
.mkab h3 { margin: 30px 0 10px; font-size: 17.5px; font-weight: 700; }
.mkab p { margin: 0 0 16px; }
.mkab ul, .mkab ol { margin: 0 0 18px; padding-left: 0; list-style: none; }
.mkab li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.mkab ul > li::before {
  content: ""; position: absolute; left: 4px; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ab-accent);
}
.mkab ol { counter-reset: mkab; }
.mkab ol > li { padding-left: 34px; counter-increment: mkab; }
.mkab ol > li::before {
  content: counter(mkab, decimal-leading-zero); position: absolute; left: 0; top: .06em;
  font-size: 12.5px; font-weight: 800; color: var(--ab-accent); letter-spacing: .04em;
}
.mkab a { color: var(--ab-accent); }

/* ── 카드 격자 ──────────────────────────────────────────────────────────── */
.mkab__cards {
  display: grid; gap: 20px; margin: 0 0 24px; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.mkab__cards li { padding: 0; margin: 0; }
.mkab__cards li::before { display: none; }
.mkab__card {
  background: #fff; border: 1px solid var(--ab-line); border-radius: 18px;
  padding: 24px 22px; height: 100%;
  box-shadow: 0 8px 24px rgba(33, 27, 23, .06);
  transition: transform .22s ease, box-shadow .22s ease;
}
.mkab__card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(33, 27, 23, .14); }
.mkab__card h3 { margin: 0 0 8px; font-size: 16.5px; }
.mkab__card p { margin: 0; font-size: 15px; color: #4a403a; line-height: 1.65; }
.mkab__card--num { position: relative; padding-top: 46px; }
.mkab__n {
  position: absolute; top: 22px; left: 22px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .12em; color: var(--ab-accent);
}

/* ── 인물 줄 ────────────────────────────────────────────────────────────── */
.mkab__people {
  display: grid; gap: 20px; margin: 0 0 22px; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.mkab__people li { padding: 0; margin: 0; }
.mkab__people li::before { display: none; }
.mkab__ph {
  aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden;
  background: var(--ab-panel); margin: 0 0 12px;
}
.mkab__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkab__pname { margin: 0 0 2px; font-size: 16px; font-weight: 700; }
.mkab__prole { margin: 0; font-size: 14px; color: var(--ab-soft); line-height: 1.5; }

/* ── 사진 + 설명 ────────────────────────────────────────────────────────── */
.mkab__figs {
  display: grid; gap: 20px; margin: 0 0 24px; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.mkab__figs li { padding: 0; margin: 0; }
.mkab__figs li::before { display: none; }
.mkab__fig { margin: 0; }
.mkab__fig img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 16px; background: var(--ab-panel);
}
.mkab__fig figcaption { margin-top: 10px; font-size: 14px; color: var(--ab-soft); line-height: 1.55; }

/* ── 강조 요소 ──────────────────────────────────────────────────────────── */
.mkab__panel { background: var(--ab-panel); border-radius: 16px; padding: 24px 26px; margin: 0 0 22px; }
.mkab__panel > :last-child { margin-bottom: 0; }
.mkab__note {
  border-left: 3px solid var(--ab-accent); padding: 6px 0 6px 20px; margin: 0 0 24px;
  color: #4a403a; font-size: 17px; line-height: 1.65;
}
.mkab__fine { font-size: 14px; color: var(--ab-soft); }
.mkab__table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15.5px; }
.mkab__table th, .mkab__table td {
  text-align: left; vertical-align: top; padding: 13px 12px; border-bottom: 1px solid var(--ab-line);
}
.mkab__table th { width: 32%; font-weight: 700; }
.mkab__todo {
  border: 1px dashed #c9a227; background: #fdf7e6; border-radius: 14px;
  padding: 18px 20px; margin: 0 0 24px; font-size: 15px; color: #6b5412; line-height: 1.7;
}
.mkab__todo b { display: block; margin-bottom: 6px; letter-spacing: .06em;
  text-transform: uppercase; font-size: 11.5px; }
.mkab__todo > :last-child { margin-bottom: 0; }
.mkab__stamp {
  margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--ab-line);
  font-size: 14px; color: var(--ab-soft);
}

@media (max-width: 640px) {
  .mkab { border-radius: 16px; padding-bottom: 48px; font-size: 16px; }
  .mkab__in { padding: 0 16px; }
  .mkab__head { padding-top: 44px; }
  .mkab__lead { font-size: 17px; }
  .mkab__hero { aspect-ratio: 3 / 2; }
  .mkab h2 { margin-top: 42px; padding-top: 24px; }
  .mkab__table th, .mkab__table td { display: block; width: auto; }
  .mkab__table th { border-bottom: 0; padding-bottom: 0; }
}