/* ==========================================================================
   리뉴앤영 디자인 시스템 (ry) — www.renew-young.com
   이 파일 = 자식 테마 salient-child/assets/ry.css (./scripts/deploy_theme.sh 로 서버에 올림, 2026-10-29 Salient 사용자 정의 CSS 에서 옮김)
   설명서: docs/design-system.md · 견본: site/styleguide/

   차례
     0. 토큰 (색 · 글꼴 · 크기 · 간격 · 모서리 · 그림자 · 층 · 폭)
     1. 글꼴 등록 (@font-face)
     2. 전역 기본 (글꼴 · 제목 · 링크 · 숨김 · 공용 클래스)
     3. 홈            4. 병원 소개      5. 이벤트
     6. 시술 안내(옛 시술 페이지 틀 procedure_* · pd_*)
     7. 블로그 · 의사 칼럼               8. 푸터 · 빠른 메뉴
     9. 기타 · 게시판                   10. 포트폴리오(시술안내 사이드바 메뉴)
    11. 새 구성 요소 ry-* (새 페이지는 이것으로 만든다)
    12. 페이지별 규칙 (예전 WPBakery 페이지 CSS 를 모은 곳)
    13. 시술안내 포트폴리오 본문 (읽기 폭·강조)

   규칙
   - 색 · 글자 크기 · 굵기 · 모서리 · 그림자는 아래 토큰만 쓴다(var(--ry-…)). 새 값이 필요하면 토큰부터 추가
   - 새 클래스는 ry- 접두어. 옛 클래스(procedure_*, div_*, pd_* …)는 본문에 박혀 있어 이름을 바꾸지 않는다
   - !important 는 Salient 가 !important 나 높은 우선순위로 박은 값을 덮을 때만
   - 미디어 쿼리 기준: 모바일 ≤680px · 태블릿 ≤999px(Salient 기준) · PC ≥1000px  (CSS 변수는 미디어 쿼리에 못 쓴다)
   ========================================================================== */

/* ---------- 0. 토큰 ---------- */
:root {
  /* 색 — 브랜드 갈색 (900 진함 → 50 옅음) */
  --ry-brown-900: #342521;   /* 제목 · 진한 글자 (Salient 푸터 글자색) */
  --ry-brown-800: #3c211c;   /* 강조 = Salient accent-color · 버튼 · 활성 배경 · 링크 */
  --ry-brown-600: #664a43;   /* 보조 강조 · 메뉴 글자(Salient header-font-color) · 하위메뉴 머리 배경 */
  --ry-brown-400: #9a796f;   /* 인용 · 옅은 강조 글자 */
  --ry-brown-300: #c7bdbb;   /* 빠른 메뉴 배경 */
  --ry-brown-100: #e8e6e5;   /* 큰 번호 · 구분선 */
  --ry-brown-50:  #f4f1f0;   /* 따뜻한 옅은 배경(카드) */
  /* 색 — 로즈(이벤트) */
  --ry-rose-400:  #9c6e6e;   /* 이벤트 머리 · 테두리 */
  --ry-rose-100:  #e7dddd;   /* 이벤트 고정 바 배경 */
  /* 색 — 포인트(분홍) = Salient extra-color-1 */
  --ry-pink-500:  #db0066;   /* 예약 · 전화 같은 행동 버튼 */
  /* 색 — 무채색 */
  --ry-black:     #000000;
  --ry-gray-900:  #191919;   /* 본문 글자 = Salient overall-font-color */
  --ry-gray-700:  #333333;
  --ry-gray-600:  #555555;   /* Salient 푸터 보조 글자 */
  --ry-gray-500:  #777777;   /* 흐린 글자 */
  --ry-gray-400:  #aaaaaa;   /* 더 흐린 글자 · 날짜 */
  --ry-gray-300:  #cccccc;   /* 취소선 · 표 선 */
  --ry-gray-200:  #eeeeee;   /* 구분선 */
  --ry-gray-100:  #f4f4f4;   /* 회색 배경 (Salient 푸터 배경) */
  --ry-gray-50:   #f8f8f8;   /* 아주 옅은 배경 (시술 본문 배경) */
  --ry-white:     #ffffff;

  /* 색 — 역할 이름 (새 구성 요소는 이것을 쓴다) */
  --ry-color-text:        var(--ry-gray-900);
  --ry-color-heading:     var(--ry-brown-900);
  --ry-color-accent:      var(--ry-brown-800);
  --ry-color-accent-soft: var(--ry-brown-600);
  --ry-color-cta:         var(--ry-pink-500);
  --ry-color-muted:       var(--ry-gray-500);
  --ry-color-subtle:      var(--ry-gray-400);
  --ry-color-border:      var(--ry-gray-200);
  --ry-color-bg:          var(--ry-white);
  --ry-color-bg-subtle:   var(--ry-gray-50);
  --ry-color-bg-muted:    var(--ry-gray-100);
  --ry-color-bg-warm:     var(--ry-brown-50);
  --ry-color-on-dark:     var(--ry-white);

  /* 글꼴 — 나눔스퀘어 네오 (굵기 파일: /fonts/NanumSquareNeoTTF-aLt·bRg·cBd·dEb·eHv) */
  --ry-font-sans: 'NanumSquareNeo', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
  --ry-fw-light:     300;
  --ry-fw-regular:   400;
  --ry-fw-bold:      700;
  --ry-fw-extrabold: 800;   /* 링크 · 메뉴 */
  --ry-fw-heavy:     900;   /* 제목 · strong */
  --ry-tracking:     -0.4px;

  /* 글자 크기 — 이 단계만 쓴다 (Salient 기본: h1 54 · h2 34 · h3 22 · h4 18 · h5 16 · h6 14 · 본문 14/26) */
  --ry-fs-3xs:     10px;    /* 모바일 빠른 메뉴 글자만(다섯 칸이 한 줄에 들어가야 함) */
  --ry-fs-2xs:     11px;
  --ry-fs-xs:      12px;
  --ry-fs-sm:      13px;
  --ry-fs-base:    14px;    /* 본문 기본 */
  --ry-fs-md:      16px;    /* 큰 본문 */
  --ry-fs-lg:      18px;
  --ry-fs-xl:      20px;
  --ry-fs-2xl:     22px;
  --ry-fs-3xl:     24px;
  --ry-fs-4xl:     28px;    /* 섹션 제목 */
  --ry-fs-5xl:     32px;    /* 페이지 제목 */
  --ry-fs-6xl:     40px;
  --ry-fs-number:  60px;    /* 시술 페이지 큰 번호 01 02 03 */

  /* 줄 간격 */
  --ry-lh-none:    100%;
  --ry-lh-tight:   120%;
  --ry-lh-snug:    150%;    /* 제목 */
  --ry-lh-normal:  175%;    /* 본문 */
  --ry-lh-relaxed: 200%;

  /* 간격 — 4px 단위 */
  --ry-space-1:  4px;
  --ry-space-2:  8px;
  --ry-space-3:  12px;
  --ry-space-4:  16px;
  --ry-space-5:  20px;
  --ry-space-6:  24px;
  --ry-space-8:  32px;
  --ry-space-10: 40px;
  --ry-space-12: 48px;
  --ry-space-16: 64px;
  --ry-space-18: 72px;
  --ry-space-20: 80px;
  --ry-space-24: 96px;
  --ry-section-y:        var(--ry-space-24);   /* 섹션 위아래 (PC) */
  --ry-section-y-mobile: var(--ry-space-12);   /* 섹션 위아래 (모바일) */

  /* 모서리 · 그림자 */
  --ry-radius-sm:   5px;
  --ry-radius-md:   10px;
  --ry-radius-pill: 20px;
  --ry-shadow-card: 0 10px 30px rgba(0, 0, 0, .14);
  --ry-color-shadow: rgba(0, 0, 0, .14);   /* 스크롤 그림자 — 옆으로 밀리는 표의 양 끝 */
  --ry-color-overlay: rgba(0, 0, 0, .45);   /* 사진·영상 위에 얹는 단추 바탕(영상 재생 단추) */

  /* 층 (z-index) */
  --ry-z-sticky:   10;     /* 이벤트 고정 바 · 탭 */
  --ry-z-footer:   20;
  --ry-z-submenu:  1000;
  --ry-z-quickbar: 9999;   /* 오른쪽 빠른 메뉴 */

  /* 폭 */
  --ry-w-content: 700px;   /* 시술 본문 */
  --ry-w-boxed:   840px;   /* 목차 화면(시술안내)에서 가운데 두는 본문 단 — H1·표·사진 2열 말고 전부(2026-11-03 사용자, 960 → 840) */
  --ry-w-prose:   860px;   /* 새 페이지 글 폭 */
  --ry-w-narrow:  900px;
  --ry-w-page:    1000px;
  --ry-w-wide:    1080px;
  --ry-w-max:     1400px;
  --ry-w-sidebar: 300px;   /* 화면 왼쪽에 붙는 목차 사이드바(시술안내 허브) */
  --ry-w-cell:    120px;   /* 모바일 표 칸 최소 폭 — 칸이 한두 단어 폭으로 줄지 않게, 넘치면 옆으로 밀어 본다 */
  --ry-h-header:  104px;   /* Salient 헤더 높이(PC, 스크롤해도 줄지 않음) — 고정 요소의 top 에 쓴다 */
  --ry-h-header-mobile: 64px;   /* 같은 헤더 — 999px 이하 */
  --ry-h-tabs:    52px;    /* 본문 위 고정 탭 띠(ry-tabs) 높이 — PC. 기존 하위 메뉴 탭(page-submenu) 54 와 비슷하게 */
  --ry-h-tabs-mobile: 48px;   /* 같은 띠 — 999px 이하 */
}

/* ---------- 1. 글꼴 등록 ---------- */
/* 나눔스퀘어 네오 서브셋(KS X 1001 한글 2,350자 + 기호 + 사이트에 쓰인 글자, 굵기당 약 130KB) — 만들기 ./scripts/make_webfonts.sh
   700 파일이 800 · 900 도 맡는다(굵기 인상을 예전과 비슷하게). 빠진 글자는 --ry-font-sans 의 다음 글꼴로 그려진다.
   글꼴을 다시 만들면 아래 ?v= 숫자를 올린다(브라우저 캐시) */
@font-face { font-family: 'NanumSquareNeo'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('/webfonts/NanumSquareNeo-300.woff2?v=1') format('woff2'); }
@font-face { font-family: 'NanumSquareNeo'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/webfonts/NanumSquareNeo-400.woff2?v=1') format('woff2'); }
@font-face { font-family: 'NanumSquareNeo'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/webfonts/NanumSquareNeo-700.woff2?v=1') format('woff2'); }
@font-face { font-family: 'NanumSquareNeo'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('/webfonts/NanumSquareNeo-700.woff2?v=1') format('woff2'); }
@font-face { font-family: 'NanumSquareNeo'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('/webfonts/NanumSquareNeo-700.woff2?v=1') format('woff2'); }



/* ---------- 2. 전역 기본 ---------- */

html,body,span,p,ul,li {
    font-family: var(--ry-font-sans) !important;
    letter-spacing:var(--ry-tracking);
    word-break: keep-all;
    overflow-wrap: break-word;
}

h1,h2,h3,h4,h5,h6, strong, b {
    font-weight: var(--ry-fw-heavy) !important;
    /*font-family: 'NanumSquareNeoBold' !important;*/
    letter-spacing:var(--ry-tracking);
    word-break: keep-all;
    overflow-wrap: break-word;
}

a {
    font-weight: var(--ry-fw-extrabold) !important;
    /*font-family: 'NanumSquareNeoExtraBold' !important;*/
    letter-spacing:var(--ry-tracking);
    word-break: keep-all;
    overflow-wrap: break-word;
}

#to-top {
    display: none !important;
}

.introduce a {
    font-weight: var(--ry-fw-extrabold) !important;
    color:var(--ry-brown-900) !important;
    /*font-family: 'NanumSquareNeoExtraBold' !important;*/
    text-decoration: underline;
    
}

.div_content {
    padding: var(--ry-section-y) 0 !important;
}



.div_top {
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.div_top .row_col_wrap_12 {
    flex: 1;
}

.home_top {
    padding: 25% 0 !important;
    margin: 20px 0 !important;
}

 
h2.section_title {
    font-size: var(--ry-fs-4xl) !important;
    color:var(--ry-brown-900) !important;
    margin-bottom: 40px !important;
}

.container-wrap {
    
    padding-bottom: 0 !important;
}

#breadcrumbs {
    display: none !important;
}

span.menu-title-text {
     font-weight: var(--ry-fw-extrabold) !important;
}

.comments-section {
    display:none !important;
}

.nectar-social {
    display: none !important;
}

#kboard-default-list .kboard-list table td.kboard-list-date {
    width: 80px;
}

#kboard-default-list .kboard-list table td.kboard-list-user,
#kboard-default-list .kboard-list table td.kboard-list-vote,
#kboard-default-list .kboard-list table td.kboard-list-view,
#kboard-default-document .kboard-detail,
#kboard-default-list .kboard-list .kboard-mobile-contents .contents-separator,
#kboard-default-list .kboard-list .kboard-mobile-contents .kboard-view {
    display: none !important;
}

#kboard-default-document .kboard-document-action {
    display: none !important;
}

.kboard-default-new-notify {
    display: none !important;
}

.right_textBlock {
    padding-right: 30px !important;
}

.div_event {
    max-width: var(--ry-w-wide) !important;
    width: 100% !important;
    margin: 72px auto !important;
}

@media only screen and (min-width: 1000px) {
    .post-area.masonry.span_9, .post-area.span_9, .single-portfolio .post-area.span_9, body.search.material .container-wrap .span_9, body[data-ext-responsive=true] .post-area.masonry.span_9, body[data-ext-responsive=true] .post-area.masonry.span_9.meta_overlaid {
        padding-right: 0;
        margin-right: 4%;
        width: 60%;
    }
}

@media only screen and (min-width: 1000px) {

    #sidebar.span_3 {
        width: 32%;
        backface-visibility: hidden;
    }
}

.mobile_only {
    display:none !important;
}

@media only screen and (max-width: 680px) {
    
    
    .pc_only {
        display:none !important;
    }
    
    
    .mobile_only {
        display:block !important;
    }


    h2 {
        font-size: var(--ry-fs-2xl) !important;
        line-height: var(--ry-lh-snug) !important;
    }
    
    .div_content {
        padding: var(--ry-section-y-mobile) 0 !important;
    }
    
    
    h2.section_title {
        font-size: var(--ry-fs-2xl) !important;
        color:var(--ry-gray-900) !important;
        margin-bottom: 20px !important;
    }
    
    .right_textBlock {
        padding-right: 0 !important;   
    }

}

/* ---------- 3. 홈 ---------- */

.masonry.material .masonry-blog-item .meta-category {
    display:none !important;
}

.masonry.material .masonry-blog-item .article-content-wrap, .related-posts[data-style=material] .article-content-wrap {
    padding-top: 30px !important;
}

.page-submenu li {
    margin: 0 12px !important;
}

.home .beforeAfter .blog-recent .col .post-header h3 a {
    /*color: #fff !important;*/
     font-family: var(--ry-font-sans) !important;
    
}

.beforeAfterBG {
    padding:20% 0 !important;
    margin: 96px 0 !important;
}

.beforeAfterBG .video-color-overlay,
.beforeAfterBG .mobile-video-image{
    border-radius: var(--ry-radius-md) !important;
}

.beforeAfter .excerpt {
    display: none !important;
}

.btn_bna { 
    margin-bottom: 0 !important;
}

body .page-submenu {
    margin-bottom: 32px !important;
}

body .page-submenu li a {
    padding: 12px 16px !important;
    
}

@media only screen and (min-width: 1px) and (max-width: 999px) {
    .page-submenu .mobile-menu-link {
        display:none !important;
    }
    .page-submenu ul {
        position: relative !important;
        top: 0 !important;
        left: 0;
        width: 100%;
        display: flex !important;
        z-index: var(--ry-z-submenu);
                justify-content: center;
    }
    .page-submenu li {
        margin: 0 8px !important;
    }
    
    body .page-submenu li a {
        padding: 8px 0px !important;
        font-size:var(--ry-fs-2xs) !important;
    }
    .beforeAfterBG {
        padding:22% 0 !important;
        margin: 48px 0 !important;
    }
}

.subject {
        background: var(--ry-brown-600);
    padding: 40px 0;
    border-radius: var(--ry-radius-sm);
}

.subject p {
    font-size: var(--ry-fs-md) !important;
    /*color: #342521 !important;*/
    color: var(--ry-white) !important;
    /*font-family: 'NanumSquareNeoExtraBold' !important;*/
     font-weight: var(--ry-fw-extrabold) !important;
}

.introduce .wpb_row {
    margin-bottom: 0 !important;
}

.introduce img {
    max-width: 350px !important;
    height: auto;
    margin:0 auto !important;
}

.tour h2, .wpb_text_column {
    margin-bottom: 0 !important;
}

.home .blog-recent .col .post-header, .has-post-thumbnail .excerpt {
    text-align: left !important;
}

.recent_event .excerpt, .recent_event .meta-category {
    display: none !important;
}

.div_videoTop {
    margin-bottom: 0 !important;
}


.fw-split {
  /* 전체 폭을 기준으로 좌측(2/3) 너비와 16:9 높이 계산 */
  --W: 100vw;
  --leftW: calc(var(--W) * 2 / 3);
  --h: calc(var(--leftW) * 9 / 16);

  height: var(--h);              /* 섹션 높이를 16:9로 고정 */
  width: 100vw;                  /* 풀블리드 */
  margin-left: 50%;
  transform: translateX(-50%);

  display: grid;
  grid-template-columns: 2fr 1fr;/* 2/3 + 1/3 비율 */
  align-items: stretch;
  overflow: hidden;
}

/* 왼쪽 비디오 컨테이너 */
.fw-left {
  position: relative;
  height: 100%;                  /* 섹션 높이에 맞춤 (16:9) */
  background: var(--ry-white);              /* contain 사용시 레터박스 컬러 */
}

/* 비디오를 크롭 없이 꽉 보이게 (여백 허용) */
.fw-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;           /* ← 절대 크롭 방지 */
  /* object-fit: cover;          /* ← 여백 없이 채우기(컨테이너 16:9라 보통 무크롭) */
}

/* 오른쪽 텍스트 영역 */
.fw-right {
  height: 100%;
  padding: 4rem;
  box-sizing: border-box;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  background:var(--ry-gray-100);
  color:var(--ry-gray-700) !important;
}

.fw-right h1 {
    font-size: var(--ry-fs-3xl) !important;
    font-weight: var(--ry-fw-extrabold) !important;
    line-height:var(--ry-lh-snug) !important;
}

.fw-right h2 {
    /*font-family: 'NanumSquareNeoLight' !important;*/
    font-size: var(--ry-fs-lg) !important;
    font-weight: var(--ry-fw-light) !important;
    margin: 2% 0 8% !important;
    line-height: var(--ry-lh-snug) !important;
}

.fw-right a span {
    
    padding: 12px 16px;
    background: var(--ry-pink-500);
    border-radius: var(--ry-radius-sm);
    color: var(--ry-white) !important;
}

.fw-right h2, .fw-right h3, .fw-right a, .fw-right p, .fw-right span {
    color:var(--ry-brown-900) !important
}
/* 모바일/협소 화면: 세로 스택 */
@media (max-width: 768px) {
  .fw-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;                /* 내용에 맞게 */
  }
  .fw-left {
    aspect-ratio: 16 / 9;        /* 모바일에선 자연스러운 비율 박스 */
    height: auto;
  }
  .fw-video {
    position: absolute;
  }
}




@media screen and (max-width: 680px) {
    .subjectWrap {
        margin-bottom: 0 !important;
    }
    
    .subjectWrap .vc_col-sm-3{
        width: 50% !important;
        padding: 0 2% !important;
        margin-bottom: 12px !important;
    }
    
    .subject {
        padding: 24px 0 !important;
    }
    
    .subject p {
        font-size: var(--ry-fs-xs) !important;
    }
    
    .introduce img {
        max-width: 60% !important;
        margin: 24px auto !important;
    }
    
    .fw-right {
        padding: 40px 40px !important;
    }
    
    .fw-right h1 {
        font-size: var(--ry-fs-xl) !important;
    }
    
    .fw-right h2 {
        font-size: var(--ry-fs-md) !important;
    }


}

.div_msg {
    
}

.div_msg h2 {
    font-size: var(--ry-fs-4xl) !important;
    color: var(--ry-brown-900) !important;
    margin-bottom: 48px !important;
}

.div_msg p.cs {
    font-size: var(--ry-fs-3xl) !important;
    font-style: italic !important;
    line-height: var(--ry-lh-normal) !important;
    margin-bottom: 32px !important;
        color: var(--ry-brown-400) !important;
        padding-bottom: 0 !important;
}

.div_msg p.sub {
    font-size: var(--ry-fs-lg) !important;
    color:var(--ry-brown-600) !important;
    line-height: var(--ry-lh-normal) !important;
}



.div_msgTop {
    margin-bottom: 40px !important;
}

.div_msgSub {
    padding: 80px 0 !important;
    margin-bottom: 0 !important;
}

.div_msg .title {
    font-size: var(--ry-fs-2xl) !important;
    line-height: var(--ry-lh-normal) !important;
    font-weight: var(--ry-fw-bold) !important;
    color: var(--ry-brown-600) !important;
    margin-bottom: 5% !important;
    margin-left: 6% !important;
    text-align:left;
}

.div_msg p.desc {
    font-size: var(--ry-fs-md) !important;
    line-height: var(--ry-lh-normal) !important;
    margin-left: 6% !important;
    text-align:left;
}

.div_msg .msgDr {
    font-size: var(--ry-fs-lg) !important;
    line-height: var(--ry-lh-normal) !important;
    margin-left: 6% !important;
    text-align:left;
    color: var(--ry-brown-600) !important;
}

.msgLast {
    font-size: var(--ry-fs-sm) !important;
    /*font-family: 'NanumSquareNeoHeavy' !important;*/
     font-weight: var(--ry-fw-extrabold) !important;
}

.review_right .wpb_raw_html {
    background: var(--ry-white);
    padding: 24px 28px;
    border-radius: var(--ry-radius-md);
}

.review_right h3 {
    padding-top: 8px !important;
    margin-bottom: 4px !important;
}

.review_right h6 {
    color: var(--ry-gray-400) !important;
    margin-bottom: 12px !important;
}

.review_right p {
    padding-bottom:8px !important;
}

#home_review .flickity-slider h4 {
    color: var(--ry-gray-400) !important;
    font-size: var(--ry-fs-xs) !important;
}

@media screen and (max-width: 999px) {
    .div_msgSub .vc_col-sm-6 {
        margin-bottom: 0 !important;
    }
    
    
}

@media screen and (max-width: 680px) {
    .flexRev > .span_12 {
        flex-direction: column-reverse !important;   
    }
    
    .div_msgSub {
        padding: 24px 0 !important;
    }
    .div_msg img {
        margin-bottom: 32px !important;
    }

    .div_msg h2 {
        font-size: var(--ry-fs-2xl) !important;
        text-align: left !important;
        margin-bottom: 24px !important;
    }
    
        
    .div_msg p.cs {
        font-size: var(--ry-fs-lg) !important;
    }
    
    .div_msg p.sub {
        text-align: left !important;
    }
    
    .div_msg h4 {
        font-size: var(--ry-fs-md) !important;
        text-align: left !important;
        line-height: var(--ry-lh-normal) !important;
        margin-top:8% !important;
    }
    
    .div_msg .title {
        font-size: var(--ry-fs-lg) !important;
        margin-left: 0 !important;
    }
    
    .div_msg p.desc {
        font-size: var(--ry-fs-base) !important;
        margin-left: 0 !important;
    }
    
    .div_msg .msgDr {
        margin-left: 0 !important;
    }
}


/* ---------- 4. 병원 소개 ---------- */

body .page-submenu {
    margin-bottom: 16px !important;

}

h1.about {
    font-size: var(--ry-fs-xs) !important;
    font-weight: var(--ry-fw-light) !important;
    margin-top: -60px !important;
}

h2.about {
    text-align: center;
    padding: 2% 0 4% 0 !important;
    margin: 0 !important;
    color: var(--ry-brown-900) !important;
}

h3.story {
    font-size:var(--ry-fs-md) !important;
    text-align: left !important;
    line-height: var(--ry-lh-snug) !important;
}


.div_doctor {
    /*padding: 40px 0 !important;*/
    padding-top: 6% !important;
    z-index: 9;
}

.div_doctor h5 {
    margin-bottom: 30px !important;
}

.doctor_textBox {
    /*padding-left: 8% !important;*/
    /*padding-bottom: 8% !important;*/
}

.doctor_textBox p {
    font-size: var(--ry-fs-md) !important;
}

.doctor_p {
        display: flex !important;
    flex-direction: column-reverse !important;
}

.img_doctor {
    width: 300px !important;
    margin-top: -10px !important;
    /*padding-bottom:40px !important;*/
    /*padding-top:72px;*/
    /*margin-bottom: -108px !important;*/
}

.doctor_title {
    margin-left: 10% !important;   
    /*margin-bottom: 40px !important;*/
    text-align: left !important;
        position: absolute;
    bottom: 30px;
    left: 20px;
}

.doctor_title p {
    padding-bottom: 0 !important;   
    font-size: var(--ry-fs-sm) !important;
}

.doctor_title h6 {
    /*font-family: 'NanumSquareNeoExtraBold' !important;*/
     font-weight: var(--ry-fw-extrabold) !important;
}

span.doctor {
    font-weight: var(--ry-fw-extrabold) !important;
    font-size: var(--ry-fs-sm) !important;
}


.div_aboutLogo {
    z-index: 11;
}

.about_logoImg {
    max-width: 350px !important;
    width: 70%;
    margin: 80px auto !important;
}

.about_logoText {
    text-align: center;
    font-size: var(--ry-fs-md) !important;
    line-height: var(--ry-lh-normal) !important;
    /*padding-right: 50px !important;*/
}

.naver_map {
    width: 100%;
    height: 500px;
}

.mapText p {
    font-size: var(--ry-fs-sm) !important;
    line-height: var(--ry-lh-relaxed) !important;
}

.mapText strong {
    font-weight: var(--ry-fw-extrabold) !important;
    /*font-family: 'NanumSquareNeoExtraBold' !important;*/
}

.mapText h2 {
    margin-bottom: 20px !important;
}

.div_staffRow {
    max-width: 580px !important;
    margin: 0 auto !important;
}

.div_staffRow img {
    padding: 0 40px !important;
}

#staff_header {
    margin-bottom: 64px !important;
}

h6.staff {
    font-size: var(--ry-fs-md) !important;
    text-align: center !important;
    margin-bottom:0 !important;
}

p.staff {
    text-align: center !important;
    font-size: var(--ry-fs-xs) !important;
}

.park {
    display:flex;
    gap:16px;
}

.park img {
    margin-bottom: 0 !important;
    width: 100% !important;
    height: auto; 
}

.div_map {
    padding-top: 96px!important;
}

.div_map2 {
    padding-bottom: 96px !important;
}

.txtMission, .txtVision {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
    text-align: center !important;
}

.txtCore {
    text-align: center !important;
     margin-top: 64px !important;
    margin-bottom: 48px !important;
}

.div_core {
    margin-top: 20px !important;
}

#mission h3 {
    font-size: var(--ry-fs-3xl) !important;
    color: var(--ry-brown-600) !important;
    margin-bottom: 40px !important;
}

#mission h3:after {
        content: "";
    display: block;
    width: 30px;
    background: var(--ry-brown-600) !important;
    /*background: #342521;*/
    height: 4px;
    /* text-align: center; */
    margin: 20px auto;
}

#mission h4 {
    font-size: var(--ry-fs-md) !important;
     font-weight: var(--ry-fw-light) !important;
    line-height: var(--ry-lh-relaxed) !important;
}

#mission h6 {
    font-size: var(--ry-fs-md) !important;
    line-height: var(--ry-lh-normal) !important;
}

#mission .div_core h4 {
    font-weight: var(--ry-fw-extrabold) !important;
}

#mission .svg-inline--fa {
    width: auto !important;
    height: 40px !important;
}

#mission p.end {
    margin-top: 72px;
    font-size: var(--ry-fs-base) !important;
    font-weight: var(--ry-fw-extrabold) !important;
    text-align:center;
}


@media screen and (max-width: 1250px) {
    .doctor_title {
        margin-left: 0% !important;   
    }

}


@media screen and (max-width: 999px) {
    
    #doctor h2.about, #brand h2.about{
        text-align: center !important;
    }
    
    #doctor .div_msgSub, #brand .div_msgSub {
        padding: 0 0 36px 0 !important;
    }
    
    .div_doctor .row_col_wrap_12 .vc_col-sm-6:first-child {
        margin-bottom: 100px !important;
    }
    .div_doctor .row_col_wrap_12 .vc_col-sm-6:last-child {
        position: absolute !important;
        bottom: -60px !important;
    }
    
    .doctor_textBox {
        padding-left: 0% !important;
    }

    
    .img_doctor {
        width: 70% !important;
        padding-top: 0 !important;
        margin: initial !important;
        float: right !important;
        max-width: 340px !important;
    }
    
    #staff_header {
        margin-bottom: 32px !important;
    }
    
    .div_staffRow .vc_col-sm-6 {
        width: 50% !important;
        padding-right: 0% !important;
        padding-left: 0% !important;
    }
    
    .div_staffRow img {
        margin: 0 auto !important;
        padding: 20px !important;
    }
    
    .doctor_title {
        position: absolute;
        bottom: 20%;
        left: 0;
        margin-left: 46% !important;
    }
    
    .about_logoImg {
        margin: 20px auto !important;
    
    }
    
    .about_logoText { 
        padding-right: 0 !important;   
    }
    
    
    .naver_map {
        height: 30vh;
    }
    
    .div_map .vc_col-sm-8 {
        margin-bottom: 20px !important;
        
    }
    
    .div_map {
    padding-top: 48px!important;
}

.div_map2 {
    padding-bottom: 48px !important;
}

    .park {
        margin: 40px 0 !important;
        flex-direction: column !important;
    }

}

@media screen and (max-width: 680px) {
    
    h1.about {
        margin-top: -40px !important;
    }
    h2.about {
        padding:4% 0 4% !important;
    }
    .doctor_title {
        margin-left: 10% !important;
    }
    
    .doctor_textBox p {
        font-size: var(--ry-fs-md) !important;
    }
    
    .about_logoText p {
        font-size: var(--ry-fs-md) !important;   
        text-align:left !important;
    }
    
    .txtMission, .txtVision {
        margin: 40px 0 20px !important;
    }
    
    #mission h3 {
        font-size: var(--ry-fs-lg) !important;
        margin-bottom: 20px !important;
         /*text-align: left;*/
    }
    
    #mission .txtCore h3 {
        text-align: center;
    }
    
    #mission h4 {
        /*text-align: left;*/
        font-size: var(--ry-fs-base) !important;
    }
    
    
    #mission h6 {
        font-size: var(--ry-fs-md) !important;
        
    }

    .div_core .wpb_raw_code {
        margin-bottom: 4px !important;
    }
    
    .div_core .wpb_content_element .wpb_wrapper,
    .div_core .wpb_content_element .wpb_wrapper h6{
        text-align: center !important;
    }
    .div_core .wpb_content_element .wpb_wrapper p {
        padding-bottom: 20px !important;
    }
    
    .aboutVideo {
        margin-bottom: 48px !important;
    }

    
}


/* ---------- 5. 이벤트 ---------- */

.eventTitle {
    background: var(--ry-rose-400);
    text-align: center;
    padding: 40px 0 !important;
}
.eventTitle h1, .eventTitle h5 {
    color: var(--ry-white) !important;
    line-height: var(--ry-lh-none) !important;
}

.eventTitle h1 {
    margin-bottom: 12px !important;
}

.div_eventMain h1 {
    font-size: var(--ry-fs-5xl) !important;
}

.div_eventSub {
    width: 80% !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
}

.div_eventSub h4 {
    padding: 2px 8px !important;
    color: var(--ry-white) !important;
    background: var(--ry-rose-400);
    
}

.postid-2520 .post-area {
    width:100% !important;
    
}

.postid-2520 .content-inner {
    max-width:var(--ry-w-page) !important;
    margin: 0 auto !important;
    
}

.postid-2520 .meta-category {
    display: none !important;
}

.postid-2520 .heading-title {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

h1.eventPost {
    
    font-size: var(--ry-fs-5xl) !important;
    max-width: var(--ry-w-page);
    background: var(--ry-rose-400);
    color: var(--ry-white) !important;
    margin:64px auto 0 !important;
    padding-top: 30px !important;
    line-height: var(--ry-lh-snug) !important;
    text-align: center;
}
h4.eventPost {
    font-size: var(--ry-fs-md) !important;
    max-width: var(--ry-w-page);
    font-weight: var(--ry-fw-light) !important;
    background: var(--ry-rose-400);
    color: var(--ry-white) !important;
    line-height: var(--ry-lh-snug) !important;
    padding-bottom: 20px !important;
    margin:0 auto !important;
    text-align: center;
}
h5.eventPost {
    width: 100% !important;
    max-width: var(--ry-w-narrow);
    margin: 40px auto 20px !important;
    padding: 5px 8px !important;
    color: var(--ry-white) !important;
    background: var(--ry-rose-400);
    font-size: var(--ry-fs-lg) !important;
}

.event_h2 {
    font-size: var(--ry-fs-4xl) !important;
    text-align:center !important;
}

.event_h3 {
    margin-top:60px !important;
    text-align:center !important;
}

.event_desc {
    text-align:center !important;
}

.h5add {
    
    width: 100% !important;
    max-width: var(--ry-w-narrow);
    margin: -15px auto 0 !important;
}
.postid-2520 .entry-title {
    font-size: var(--ry-fs-6xl) !important;
    padding-bottom: 0 !important;
}

.postid-2520 table {
    width: 100% !important;
    max-width: var(--ry-w-narrow);
    margin: 0px auto 20px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ry-gray-300) !important;
}

.postid-2520 td {
    background: var(--ry-white) !important;
    border: 0 !important;
    padding: 5px !important;
    line-height: var(--ry-lh-snug) !important;
}

.postid-2520 tr:last-child td {
    padding-bottom: 20px !important;
}

.postid-2520 td:first-child {
    width: 80% !important;
    text-align: left;
    color: var(--ry-gray-900) !important;
}
.postid-2520 td:first-child strong {
    font-size: var(--ry-fs-md) !important;
}

.postid-2520 td:last-child {
    text-align: right;
    width: 300px !important;
}

.postid-2520 s {
    color:var(--ry-gray-300) !important;
    margin-right:4px;
    font-size: var(--ry-fs-base) !important;
}

.postid-2520 td:last-child strong {
    font-size: var(--ry-fs-lg) !important;
    
    color:var(--ry-gray-900) !important;
    font-weight:var(--ry-fw-bold);
}

.eventNav {
    margin-top: 40px !important;
}
.eventNav ul {
    max-width: var(--ry-w-page);
    margin: 0 auto !important;
    display:flex;
    flex-wrap: wrap;
    gap:10px;
    justify-content:center;
}
.eventNav ul li {
    list-style: none !important;
}

.eventNav ul li a {
    display:inline-block;
    padding: 8px 12px;
    border: 1px solid var(--ry-rose-400);
    border-radius:var(--ry-radius-pill);
}


.fixedNav {
    padding: 20px 0;
            position: fixed;
    bottom: 0;
    left: 0;
    width: 100% !important;
    z-index: var(--ry-z-sticky);
    background: var(--ry-rose-100);
}

.event_add {
    background: var(--ry-gray-50);
    max-width: var(--ry-w-page);
    width: 100% !important;
    padding: 40px !important;
    margin: 80px auto 40px !important;
}

.event_add p {
    
    font-size: var(--ry-fs-xs) !important;
    color:var(--ry-gray-500) !important;
    padding-bottom: 8px !important;
    text-align:center;
}

@media screen and (max-width: 999px) {
    
    .eventNav {
        margin-top: 0 !important;
    }
  .postid-2520 .heading-title  {
      padding-top: 64px !important;
      padding-bottom: 0 !important;
      
  }
  .postid-2520 .entry-title {
      font-size: var(--ry-fs-3xl) !important;
      padding:0 20px !important;
      text-align:left !important;
      line-height: var(--ry-lh-snug) !important;
      
  }
  .postid-2520 .main-content {
      max-width: 100% !important;
  }
  
  h1.eventPost {
      font-size: var(--ry-fs-xl) !important;
      text-align:left !important;
      padding: 80px 20px 0 20px !important;
      margin-top: 20px !important;
  }
  
  h4.eventPost {
      font-size: var(--ry-fs-sm) !important;
      text-align:left !important;
      padding: 0px 20px 20px 20px !important;
      margin-bottom: 40px !important;
  }
  h5.eventPost {
      margin-top: 20px !important;
      font-size: var(--ry-fs-md) !important;
      width: 90% !important;
  }
  .postid-2520 table {
      width: 90% !important;
  }
  
  .h5add {
      width: 90% !important;
  }
  
  .postid-2520 tr {
      display:flex;
      flex-direction: column;
      margin-bottom: 2px !important;
  }
  
  .postid-2520 td {
      font-size:var(--ry-fs-xs) !important;
      line-height: var(--ry-lh-relaxed) !important;
      background: var(--ry-gray-100) !important;
  }
  .postid-2520 td:first-child {
      width: 100% !important;
      padding-bottom: 0 !important;
  }
  
  .postid-2520 td:last-child {
      padding-top: 0 !important;
      width:100% !important;
  }
  
  .postid-2520 td:first-child strong {
      font-size: var(--ry-fs-sm) !important;
  }
  
  .postid-2520 tr:last-child td:first-child {
      padding: 5px !important;
      
  }
  
  .postid-2520 tr:last-child td:last-child {
      padding: 5px !important;
      margin-bottom: 16px !important;
  }
  
    .eventNav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
        position: fixed;
    top: 64px;
    left: 0;
    width: 100% !important;
    z-index: var(--ry-z-sticky);
    background: var(--ry-gray-100);
  }
  
  
    .eventNav ul {
            padding: 10px;
    flex-wrap: nowrap;          /* 줄바꿈 금지 */
    gap: 10px;
    list-style: none;
    white-space: nowrap;
            justify-content: flex-start;
  }
  
  .eventNav ul li a {
      padding: 5px 8px !important;
      font-size: var(--ry-fs-2xs) !important;
  }
  
  .event_add {
      background: var(--ry-white) !important;
      padding: 20px !important;
      margin: 0 auto !important;
  }
  .event_add p {
      text-align: left;
      
  }
  
  .event_h2, .event_h3, .event_desc {
      padding: 0 20px !important;
      text-align: left !important;
  }
  
  .event_h2 {
      margin-top: 32px !important;
  }
  .event_desc {
      margin-bottom: 24px !important;
  }

}


/* ---------- 6. 시술 안내 (옛 시술 페이지 틀 procedure_* · pd_*) ---------- */

.div_pdTop {
    margin-top: 64px !important;
}

.div_pdText {
    padding: 0 20px 64px !important;
}

.div_pdText h2 {
    margin-top: -20px !important;
    margin-bottom: 30px !important;
    line-height: var(--ry-lh-snug) !important;
    font-size: var(--ry-fs-3xl) !important;
    color: var(--ry-brown-600) !important;
}

.div_pdText p {
    font-size: var(--ry-fs-md) !important;
    line-height: var(--ry-lh-normal) !important;
}

.div_pdColumn .vc_column_container>.vc_column-inner {
    background: var(--ry-brown-50);
    padding: 5%;
    border-radius: var(--ry-radius-sm);
}

.pd_child li {
        vertical-align: top !important;
}

.pDevice {
    margin: 20px 0;
    border-radius: var(--ry-radius-md);
    background: var(--ry-gray-100) !important;
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 20px;
    flex-direction: column;
}

.pDevice img {
    max-width: 400px !important;
    height:auto !important;
    
}

.procedure {

}

.procedure_all iframe {
    width:100%;
}


.procedure_flex {
    margin-bottom: 0 !important;
}

.procedure_flex .wpb_wrapper {
    display: flex;
    flex-direction: row;
    max-width: var(--ry-w-max);
    margin: 0 auto !important;
    
}


.procedure_sub {
    background: var(--ry-gray-50) !important;
    display:flex;
    flex:1;
    flex-direction: row;
    margin-bottom:0 !important;
}


.procedure_menu {
    background: var(--ry-white) !important;
    width: 280px;
    margin-bottom: 0 !important;
}

.pd_iframe {

    overflow-y: hidden;
}

.procedure_main {
    flex: 1;
    min-width: 0;
    max-width: var(--ry-w-content);
    background: var(--ry-gray-50) !important;
    margin-bottom: 0 !important;
    min-height: calc(100vh - 316px);
    padding: 50px 40px;
}

.procedure_main .alert {
    font-size:var(--ry-fs-sm) !important;
    padding-bottom: 4px !important;
    line-height: var(--ry-lh-snug) !important;
    color:var(--ry-black) !important;
}


.procedure_chart {   /* 시술 페이지 오른쪽 가격표 칸 — 쓰지 않아 숨김 */
    display: none !important;
}


.procedure_main h3, .procedure_main h4, .procedure_main h5, .procedure_main h6, .procedure_main strong {
    color: var(--ry-brown-900);
}

.procedure_main h3 {
    font-size: var(--ry-fs-4xl);
}

.procedure_main h4 {
    font-size:var(--ry-fs-2xl);
    margin-bottom: 16px !important;
}
.procedure_main h6 {
    font-family: var(--ry-font-sans) !important;
    font-weight: var(--ry-fw-light) !important;
    font-size:var(--ry-fs-lg);
    line-height: var(--ry-lh-snug) !important;
}

.procedure_main p {
    padding-bottom: 12px;
}

.pd_step strong {
    width: 96px;
    display:inline-block;
}

.pd_number {
    font-family: var(--ry-font-sans) !important;
    font-weight: var(--ry-fw-heavy) !important;
    line-height: var(--ry-lh-tight);
    font-size: var(--ry-fs-number);
    padding: 0 !important;
    margin: 40px 0 4px 0;
    
    color:var(--ry-brown-100);
}

.pd_sidebar {
    min-height: 800px;
    margin-bottom: 40px !important;
}

.pd_chart {
    width: 100%;
    flex: 1;
}

.p_divider {
    border-bottom: 4px solid var(--ry-brown-100);
    width: 40px;
    height: 1px;
    margin: 72px 0;
}

.p_img {
    margin: 32px 0 !important;
}


@media screen and (max-width:1280px) {
    .procedure_menu {
        width: 240px;
    }
    
    
    
}


@media screen and (max-width: 999px) {
    
    
    .div_pdmain {
        padding-top: 0 !important;
    }

    
    .pd_iframe {
        width:100%;
    }
    
    .procedure_flex .wpb_wrapper {
        flex-direction: column;
    }
    
    .procedure_sub {
        flex-direction: column;
    }
    
    .procedure_menu {
        width: 100%;
        
    }
    

    
    .procedure_main {
        width: 100%;
        max-width: initial;
        padding: 30px 24px;
    }
    
    
    
    
}

@media screen and (max-width:680px) {
    .pd_sidebar {
        min-height: initial;
        height: 70vh;
    }
    
    .div_pdText {
        padding: 0 20px 40px !important;
    }
    
    .div_pdTop {
        margin-top: 0px !important;
    }
    
    .div_pdText h2 {
        margin-top: -30px !important;
        margin-bottom: 20px !important;
        font-size: var(--ry-fs-lg) !important;
    
    }

    .div_pdText p {
        font-size: var(--ry-fs-base) !important;
    
    }

}



/* ---------- 7. 블로그 · 의사 칼럼 ---------- */

h2.title a {
    font-size: var(--ry-fs-3xl) !important;
}


h2.wp-block-heading {
    font-size:var(--ry-fs-3xl) !important;
}

h3.wp-block-heading {
    font-size:var(--ry-fs-xl) !important;
}

.div_column {
    max-width: var(--ry-w-wide) !important;
    margin: 0 auto !important;
}
.div_column .post-area.featured_img_left.span_12 .article-content-wrap .post-content-wrap {
    padding: 4% !important;
}

.div_column .post-featured-img {
    display:none !important;
}

.div_column .masonry-blog-item {
    transition: 0.4s ease-in-out;
}
.div_column .masonry-blog-item:hover {
    transform: translateY(-5px) scale(1.01);
    
}
.div_column .masonry.material .masonry-blog-item .inner-wrap {
    box-shadow: var(--ry-shadow-card);
}

@media only screen and (min-width: 1000px) {
    .div_column .masonry-blog-item {
        width: 100%;
        position: relative !important;
        top:0 !important;
        left: 0 !important;
        margin-bottom: 48px !important;
    }
}


@media screen and (max-width: 680px) {
    .div_column .post-area.featured_img_left.span_12 .article-content-wrap .post-content-wrap {
        padding: 8% 0 0 0 !important;
    }
    .div_column .masonry-blog-item {
        margin-bottom: 40px !important;
    }
    
    .div_column .post-header h3 {
        font-size: var(--ry-fs-lg) !important;
    }
}

.div_column .posts-container {
    display: flex;
    flex-direction: column;
}



/* ---------- 8. 푸터 · 빠른 메뉴 ---------- */

.ft_rny p.h6 {
    font-size: var(--ry-fs-sm) !important;
    font-weight: var(--ry-fw-bold) !important;
    padding-bottom: 8px !important;
}
.ft_rny p {
    font-size: var(--ry-fs-xs) !important;
    padding-bottom: 0px !important;
}

.ft_rny a {
    font-size: var(--ry-fs-sm) !important;
    font-family: var(--ry-font-sans) !important;
    opacity:0.9 !important;
}

.ft_sub span {
    width: 50px !important;
    display: inline-block;
}

.ft_fixed {
    position: fixed !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: var(--ry-z-quickbar) !important;
    top: calc(50% - 72px);
    right: 16px;
    gap: 16px;
    background: var(--ry-brown-300);
    padding: 16px 8px;
    border-radius: var(--ry-radius-md);
}

.ft_fixed a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
.ft_fixed a img {
    width: 44px !important;
    height: auto !important;
    margin-bottom: 8px !important;
    padding-bottom: 0px !important;
    /*background: #59413d;*/
    /*border-radius: 44px;*/
}

.ft_fixed a span {
    font-size: var(--ry-fs-2xs);
    font-weight: var(--ry-fw-extrabold) !important;
    /*font-family: 'NanumSquareNeoBold' !important;*/
    line-height: var(--ry-lh-none) !important;
    /*color: #342521 !important*/
    color:var(--ry-white) !important;
    /*text-shadow: 1px 1px 2px #000;*/
}

    #footer-outer {
        z-index: var(--ry-z-footer) !important;
    }

#footer-outer #copyright p {
    font-size: var(--ry-fs-xs) !important;
}

@media only screen and (min-width: 1000px) {
    body #footer-outer .row {
        padding: 40px 0 0 0 !important;
    }
    
    body #footer-outer #copyright {
        padding: 0 0 32px 0 !important;
    }
    
}

@media only screen and (max-width: 999px) {
    
    #footer-outer .row {
        padding: 40px 20px 0 20px !important;
    }
    
    #footer-outer #copyright p {
        padding: 0 20px !important;
    }
    
    #footer-outer .widget {
        margin-bottom: 20px !Important;
    }
    
    #footer-widgets .container .col {
        margin-bottom: 16px !important;
    }
    
    body #footer-outer #copyright, .ascend #footer-outer #copyright {
        padding: 0 0 60px 0 !important;
    }
    
    .ft_fixed {
        flex-direction: row;
        width: 100% !important;
        /*background:  #3C211C;*/
        top: initial;
        bottoM: 0;
        right: 0;
        padding:4px 0 12px 0;
        justify-content: space-evenly;
        border-radius: 0;
        gap: 0;
        
    }
    
    .ft_fixed a img {
        width: 40px !important;
        height: auto !important;
        margin-bottom: 0px !important;
        background: none;
    }

    
    .ft_fixed a span {
    font-size: var(--ry-fs-3xs);
    /*font-family: 'NanumSquareNeoBold' !important;*/
    font-weight: var(--ry-fw-extrabold) !important;
    line-height: var(--ry-lh-none) !important;
    color: var(--ry-white) !important;
    text-shadow: initial;
    }
    
        
}



/* ---------- 9. 기타 · 게시판 ---------- */
h2.white {
    color:var(--ry-white) !important;
}

.black {
    color:var(--ry-gray-900) !important;
}


.kboard-search {
    display: none !important;
}

.kboard-default-poweredby a {
    color: var(--ry-white) !important;
    
}



/* ---------- 10. 포트폴리오 (시술안내 사이드바 메뉴 [portfolio_cat_menu]) ---------- */

.single-portfolio .post-area {
    float: right;
    padding-bottom: 3em;
}

.single-portfolio #sidebar {
    float: left;
}

.pf-cat-menu { font-size: var(--ry-fs-base); }

.pf-cat-list { list-style: none; margin: 0; padding: 0; }
.pf-cat-item { position: relative; border-bottom: 1px solid var(--ry-gray-200); padding: 0 !important; }

.pf-cat-item > a, .pf-parent-label {
    display: block;
    padding: 10px 34px 10px 14px;
    color: var(--ry-gray-700);
    text-decoration: none;
    transition: background .15s;
}

/* 부모 라벨은 클릭 느낌 제거 */
.pf-parent-label {
    cursor: default;
    font-weight: var(--ry-fw-bold);
    font-size: var(--ry-fs-md) !important;
    
}
.pf-parent-label:hover { background: none; }

.pf-cat-item > a:hover { background: var(--ry-gray-100); }

/* 현재 카테고리 하이라이트 */
.pf-cat-item.is-current {
    background: var(--ry-brown-800);
    
}
.pf-cat-item.is-current > a { color: var(--ry-white) !important; font-weight: var(--ry-fw-heavy)!important; background: var(--ry-brown-800);}

/* 서브메뉴 들여쓰기 + 기본 접힘 */
.pf-sub { display: none; background: var(--ry-gray-50); }
.pf-sub .pf-cat-item > a { padding-left: 28px; }
.pf-cat-item.open > .pf-sub { display: block; }

/* +/- 토글 버튼 */
.pf-toggle {
    position: absolute; top: 6px; right: 6px;
    width: 26px; height: 26px;
    border: none; background: transparent;
    font-size: var(--ry-fs-lg); line-height: 1; cursor: pointer; color: var(--ry-gray-500);
}
.pf-cat-item.open > .pf-toggle { color: var(--ry-black); }

.project-sharing {
    display:none;
}


.sub_treatments {
    
    padding-bottom: 40px !important; 
    margin: 40px 0 !important;
    border-bottom: 1px solid var(--ry-gray-200) !important;
}

/* ---------- 11. 새 구성 요소 ry-* ----------
   새 페이지(시술안내 등)는 WPBakery 에서 아래 클래스만으로 만든다. 견본 = site/styleguide/
   - Row(vc_row) 의 class          : ry-section (+ --line · --warm)
   - Text Block 의 el_class        : ry-prose (+ ry-faq)
   - Text Block 안 HTML 의 class    : ry-lead · ry-quote · ry-more · ry-btns/ry-btn · ry-chips · ry-note · ry-eyebrow
   - Column(vc_column) 의 el_class : ry-card
   !important 는 옛 전역 규칙(모바일 h2 21px !important 등)과 Salient 기본값을 덮는 곳에만 썼다 */

/* 11-0 한국어 줄바꿈: 새 구성 요소는 단어 단위로(keep-all). 옛 전역 규칙(2번 구역)은 글자 단위(break-all) */
.ry-prose, .ry-prose p, .ry-prose li, .ry-prose span, .ry-prose h1, .ry-prose h2, .ry-prose h3, .ry-prose h4,
.ry-card, .ry-card p, .ry-cta, .ry-cta p, .ry-note, .ry-btns, .ry-chips, .ry-chips li, .ry-lead, .ry-quote {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 11-1 섹션 (Row) */
.ry-section {
    padding-top: var(--ry-space-12) !important;
    padding-bottom: var(--ry-space-12) !important;
    margin-bottom: 0 !important;
}
.ry-section--line { border-top: 1px solid var(--ry-color-border); }
.ry-section--warm {
    background: var(--ry-color-bg-warm);
    border-radius: var(--ry-radius-md);
    padding-left: var(--ry-space-8) !important;
    padding-right: var(--ry-space-8) !important;
}

/* 11-2 글 본문 (Text Block) */
.ry-prose {
    max-width: var(--ry-w-prose);
    color: var(--ry-color-text);
    font-size: var(--ry-fs-md);
    line-height: var(--ry-lh-normal);
    margin-bottom: 0 !important;
}
.ry-prose p {
    font-size: inherit;
    line-height: inherit;
    padding-bottom: var(--ry-space-4);
}
.ry-prose h1, .ry-prose h2, .ry-prose h3, .ry-prose h4 {
    color: var(--ry-color-heading);
    line-height: var(--ry-lh-snug) !important;
}
.ry-prose h1 { font-size: var(--ry-fs-5xl) !important; margin: 0 0 var(--ry-space-6) !important; }
.ry-prose h2 { font-size: var(--ry-fs-3xl) !important; margin: 0 0 var(--ry-space-4) !important; }
.ry-prose h3 { font-size: var(--ry-fs-xl)  !important; margin: var(--ry-space-8) 0 var(--ry-space-3) !important; }
.ry-prose h4 { font-size: var(--ry-fs-lg)  !important; margin: var(--ry-space-6) 0 var(--ry-space-2) !important; }
.ry-prose h3:first-child, .ry-prose h4:first-child { margin-top: 0 !important; }
.ry-prose ul, .ry-prose ol { margin: 0 0 var(--ry-space-4) var(--ry-space-5); padding: 0; }
.ry-prose li { font-size: inherit; line-height: inherit; margin-bottom: var(--ry-space-1); }
.ry-prose a { color: var(--ry-color-accent); text-decoration: underline; text-underline-offset: 3px; }
.ry-prose a:hover { color: var(--ry-color-cta); }
.ry-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--ry-space-6);
    font-size: var(--ry-fs-base);
    line-height: var(--ry-lh-snug);
}
.ry-prose th, .ry-prose td {
    padding: var(--ry-space-3) var(--ry-space-4) !important;
    border: 1px solid var(--ry-color-border) !important;
    text-align: left;
    vertical-align: top;
}
.ry-prose th {
    background: var(--ry-color-bg-warm) !important;
    color: var(--ry-color-heading);
    font-weight: var(--ry-fw-extrabold);
}

/* 큰 첫 문단 · 고객의 말 · 작은 머리글 */
.ry-lead { font-size: var(--ry-fs-lg) !important; line-height: var(--ry-lh-normal) !important; color: var(--ry-color-heading); }
.ry-quote {
    border-left: 3px solid var(--ry-brown-100);
    padding: var(--ry-space-1) 0 var(--ry-space-1) var(--ry-space-4) !important;
    margin-bottom: var(--ry-space-4) !important;
    color: var(--ry-brown-600);
    font-weight: var(--ry-fw-bold);
}
.ry-eyebrow {
    display: block;
    font-size: var(--ry-fs-sm) !important;
    color: var(--ry-brown-400) !important;
    font-weight: var(--ry-fw-extrabold);
    padding-bottom: var(--ry-space-2) !important;
}

/* 11-3 링크 · 버튼 · 칩 */
.ry-more { margin-top: var(--ry-space-4); padding-bottom: var(--ry-space-4); }   /* 위 여백: 앞 글과 띄움(2026-11-03 사용자) */
.ry-more + .ry-more { margin-top: 0; }   /* 링크가 이어지면 묶어 둔다 */
.ry-more a, a.ry-more {
    color: var(--ry-color-accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.ry-more a:hover, a.ry-more:hover { color: var(--ry-color-cta); }

.ry-btns { display: flex; flex-wrap: wrap; gap: var(--ry-space-2); padding-bottom: var(--ry-space-4); }
.ry-btn {
    display: inline-block;
    padding: var(--ry-space-3) var(--ry-space-6);
    border-radius: var(--ry-radius-sm);
    background: var(--ry-color-accent);
    color: var(--ry-color-on-dark) !important;
    font-size: var(--ry-fs-base);
    line-height: var(--ry-lh-snug);
    text-decoration: none !important;
    transition: opacity .15s;
}
.ry-btn:hover { opacity: .85; }
.ry-btn--cta { background: var(--ry-color-cta); }
.ry-btn--line { background: transparent; color: var(--ry-color-accent) !important; box-shadow: inset 0 0 0 1px currentColor; }

.ry-chips { display: flex; flex-wrap: wrap; gap: var(--ry-space-2); margin: 0 0 var(--ry-space-6) !important; padding: 0 !important; list-style: none; }
.ry-chips li { margin: 0 !important; list-style: none; }
.ry-chips a {
    display: inline-block;
    padding: var(--ry-space-2) var(--ry-space-4);
    border: 1px solid var(--ry-brown-100);
    border-radius: var(--ry-radius-pill);
    background: var(--ry-white);
    color: var(--ry-color-heading);
    font-size: var(--ry-fs-sm);
    line-height: var(--ry-lh-snug);
    text-decoration: none;
}
.ry-chips a:hover { border-color: var(--ry-color-accent); }

/* 11-4 상자: 카드 · 행동 유도 · 안내 */
.ry-card:not(.vc_column_container),
.vc_column_container.ry-card > .vc_column-inner {
    background: var(--ry-color-bg-warm);
    border-radius: var(--ry-radius-md);
    padding: var(--ry-space-6) !important;
}
.ry-cta {
    background: var(--ry-color-bg-warm);
    border-radius: var(--ry-radius-md);
    padding: var(--ry-space-10) var(--ry-space-8) !important;
    text-align: center;
}
.ry-cta .ry-btns { justify-content: center; padding-bottom: 0; }
.ry-cta + .ry-section--line { border-top: 0; }   /* 상자 바로 밑 구분선은 상자 밑줄처럼 보여 뺀다 */
.ry-note {
    background: var(--ry-color-bg-muted);
    border-radius: var(--ry-radius-sm);
    padding: var(--ry-space-4) var(--ry-space-5) !important;
    font-size: var(--ry-fs-sm) !important;
    line-height: var(--ry-lh-normal) !important;
    color: var(--ry-gray-600);
}

/* 11-5 자주 묻는 질문 (Text Block el_class: ry-prose ry-faq — h3 = 질문, 아래 문단 = 답) */
.ry-faq h3 {
    font-size: var(--ry-fs-lg) !important;
    margin: var(--ry-space-6) 0 var(--ry-space-2) !important;
    padding-top: var(--ry-space-6);
    border-top: 1px solid var(--ry-color-border);
}
.ry-faq h3:first-child { border-top: 0; padding-top: 0; margin-top: 0 !important; }

@media only screen and (max-width: 680px) {
    .ry-section { padding-top: var(--ry-space-10) !important; padding-bottom: var(--ry-space-10) !important; }
    .ry-section--warm, .ry-cta { padding-left: var(--ry-space-5) !important; padding-right: var(--ry-space-5) !important; }
    .ry-prose { font-size: var(--ry-fs-base); }
    .ry-prose h1 { font-size: var(--ry-fs-3xl) !important; }
    .ry-prose h2 { font-size: var(--ry-fs-xl) !important; }
    .ry-prose h3 { font-size: var(--ry-fs-lg) !important; }
    .ry-prose h4, .ry-lead, .ry-faq h3 { font-size: var(--ry-fs-md) !important; }
    /* 표: 칸 최소 폭을 두고 옆으로 밀어 보게. 양 끝 그림자 = 그쪽으로 더 밀 수 있다(끝까지 밀면 사라짐) */
    .ry-prose table {
        display: block;
        overflow-x: auto;
        background:
            linear-gradient(to right, var(--ry-color-bg) 30%, transparent) left / var(--ry-space-10) 100% no-repeat local,
            linear-gradient(to left, var(--ry-color-bg) 30%, transparent) right / var(--ry-space-10) 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, var(--ry-color-shadow), transparent) left / var(--ry-space-3) 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, var(--ry-color-shadow), transparent) right / var(--ry-space-3) 100% no-repeat scroll;
        background-color: var(--ry-color-bg);
    }
    .ry-prose th, .ry-prose td { min-width: var(--ry-w-cell); padding: var(--ry-space-3) !important; }
}

/* 11-6 목차 — <nav class="ry-toc">[<p class="ry-toc__back"><a>← 위 페이지</a></p>]<p class="ry-toc__title">목차</p><ol><li><a href="#id">…</a></li></ol></nav>
   사이드바·본문 어디든. 누르면 ry.js 가 고정 헤더 아래로 스크롤하고, 지금 읽는 섹션 링크에 ry-current 를 붙인다.
   번호·왼쪽 선은 목록(ol) 링크에만 — 2026-11-03 '← 시술 안내 전체' 앞에 '0.' 이 붙던 것 */
.ry-toc { font-size: var(--ry-fs-base); line-height: var(--ry-lh-snug); word-break: keep-all; overflow-wrap: break-word; }
.ry-toc__title {
    font-size: var(--ry-fs-sm) !important;
    font-weight: var(--ry-fw-extrabold);
    color: var(--ry-brown-400) !important;
    margin: 0 !important;
    padding-bottom: var(--ry-space-2) !important;
}
.ry-toc ol { counter-reset: ry-toc; list-style: none !important; margin: 0 !important; padding: 0 !important; border-left: 2px solid var(--ry-color-border); }
.ry-toc li { counter-increment: ry-toc; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ry-toc ol a {
    display: flex;
    gap: var(--ry-space-2);
    margin-left: -2px;
    padding: var(--ry-space-2) var(--ry-space-4);
    border-left: 2px solid transparent;
    color: var(--ry-color-text) !important;
    text-decoration: none !important;
}
.ry-toc ol a::before { content: counter(ry-toc) "."; color: var(--ry-color-muted); }
.ry-toc ol a:hover, .ry-toc ol a.ry-current { color: var(--ry-color-accent) !important; border-left-color: var(--ry-color-accent); }
.ry-toc ol a.ry-current { font-weight: var(--ry-fw-bold); }
.ry-toc__back {
    margin: 0 0 var(--ry-space-6) !important;
    padding: 0 0 var(--ry-space-4) !important;
    border-bottom: 1px solid var(--ry-color-border);
    font-size: var(--ry-fs-sm) !important;
    font-weight: var(--ry-fw-bold);
}
.ry-toc__back a { color: var(--ry-color-accent) !important; text-decoration: none !important; }
.ry-toc__back a:hover { color: var(--ry-color-cta) !important; }

/* 11-7 메뉴판 카드 — 같은 무게의 항목 여럿을 카드로(시술안내 허브 13개 분야, 2026-11-02).
   Inner Row class "ry-cards"(equal_height, PC 2열) > Inner Column el_class "ry-card ry-card--menu" > Text Block ry-prose
   (h3 제목 · 고객의 말 · 설명 · <p class="ry-tags">대표 시술 · ry-more 자세히 보기 — 링크는 카드 바닥에 맞춘다). 999px 이하: 1열 */
.ry-prose + .ry-cards { margin-top: var(--ry-space-8) !important; }
.ry-cards { margin-bottom: var(--ry-space-8) !important; }
.ry-cards:last-child { margin-bottom: 0 !important; }
.vc_column_container.ry-card--menu > .vc_column-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ry-color-bg-warm);
    border-top: 3px solid var(--ry-color-accent);
    border-radius: var(--ry-radius-md);
    padding: var(--ry-space-8) !important;
}
.ry-card--menu > .vc_column-inner > .wpb_wrapper,
.ry-card--menu .wpb_text_column,
.ry-card--menu .wpb_text_column > .wpb_wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.ry-card--menu .wpb_text_column { margin-bottom: 0 !important; }
/* 제목: 진한 갈색 띠에 흰 글씨(2026-11-03 사용자 — 본문 소제목의 왼쪽 선 · 제목 아래 선 대신) */
.ry-card--menu .ry-prose h3 {
    font-size: var(--ry-fs-xl) !important;
    line-height: var(--ry-lh-tight) !important;
    margin: 0 0 var(--ry-space-4) !important;
    padding: var(--ry-space-3) var(--ry-space-4) !important;
    background: var(--ry-color-accent);
    color: var(--ry-color-on-dark);
    border-radius: var(--ry-radius-sm);
}
.ry-card--menu .ry-quote { font-size: var(--ry-fs-base) !important; }
.ry-tags {
    background: var(--ry-white);
    border-radius: var(--ry-radius-sm);
    padding: var(--ry-space-3) var(--ry-space-4) !important;
    font-size: var(--ry-fs-sm) !important;
    line-height: var(--ry-lh-snug) !important;
    color: var(--ry-gray-600);
}
/* 카드 링크는 바닥 맞춤(margin-top: auto — 여러 열일 때)이라 11-3 의 위 여백 16 을 안쪽 여백에 더한다 → 대표 시술 상자와 24 */
.ry-card--menu .ry-more { margin-top: auto; padding: var(--ry-space-6) 0 0 !important; }
@media only screen and (max-width: 999px) {
    .ry-card--menu { margin-bottom: var(--ry-space-6) !important; }
    .ry-cards { margin-bottom: 0 !important; }   /* 1열에선 카드 사이 간격을 카드 여백 하나로 고르게 */
    .vc_column_container.ry-card--menu > .vc_column-inner { height: auto; padding: var(--ry-space-6) !important; }
}

/* 11-8 고민별 바로가기 — '고민 → 진료 분야' 링크 타일 여럿(홈 '고민별로 한눈에 보는 리뉴앤영 시술', 2026-11-03).
   Text Block 안 <ul class="ry-concerns"><li><a href><span class="ry-concerns__q">고민</span><span class="ry-concerns__a"><b>분야</b> · 대표 시술</span></a></li></ul>
   마지막 '전체 보기' 타일은 li 에 ry-concerns__all(진한 바탕). PC 2열 · 680px 이하 1열 */
.ry-concerns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ry-space-3);
    margin: var(--ry-space-2) 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.ry-concerns li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.ry-concerns a {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ry-space-1);
    height: 100%;
    box-sizing: border-box;
    padding: var(--ry-space-5) var(--ry-space-12) var(--ry-space-5) var(--ry-space-6);
    border: 1px solid var(--ry-color-border);
    border-radius: var(--ry-radius-md);
    background: var(--ry-color-bg);
    color: var(--ry-color-text) !important;
    text-decoration: none !important;
    word-break: keep-all;
    overflow-wrap: break-word;
    transition: border-color .15s;
}
.ry-concerns a::after {
    content: "→";
    position: absolute;
    right: var(--ry-space-6);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ry-color-accent);
    font-weight: var(--ry-fw-bold);
}
.ry-concerns a:hover { border-color: var(--ry-color-accent); }
.ry-concerns__q { font-size: var(--ry-fs-md); font-weight: var(--ry-fw-bold); line-height: var(--ry-lh-snug); color: var(--ry-color-heading); }
.ry-concerns__a { font-size: var(--ry-fs-sm); line-height: var(--ry-lh-snug); color: var(--ry-color-muted); }
.ry-concerns__a b { color: var(--ry-color-accent); font-weight: var(--ry-fw-extrabold); }
.ry-concerns__all a { background: var(--ry-color-accent); border-color: var(--ry-color-accent); }
.ry-concerns__all a:hover { border-color: var(--ry-color-accent); opacity: .9; }
.ry-concerns__all .ry-concerns__q, .ry-concerns__all .ry-concerns__a b, .ry-concerns__all a::after { color: var(--ry-color-on-dark); }
.ry-concerns__all .ry-concerns__a { color: var(--ry-brown-100); }
@media only screen and (max-width: 680px) {
    .ry-concerns { grid-template-columns: 1fr; gap: var(--ry-space-2); }
    .ry-concerns a { padding: var(--ry-space-4) var(--ry-space-10) var(--ry-space-4) var(--ry-space-5); }
    .ry-concerns a::after { right: var(--ry-space-5); }
}

/* 11-9 사진 — Text Block 안 한 줄: <figure class="ry-figure"><img class="wp-image-ID" src alt width height>[<figcaption>…</figcaption>]</figure>
   여러 장 = ry-figure ry-figure--grid (PC 2열 · 680px 이하 1열, 캡션은 아래 전체 폭). 시술안내 사진(2026-11-03).
   사진은 미디어 라이브러리 → WP 가 srcset·지연 로딩을 붙인다(wp-image-ID). 한 장은 글 폭(--ry-w-content)까지 */
.ry-figure {
    max-width: var(--ry-w-content);
    margin: var(--ry-space-2) 0 var(--ry-space-8) !important;
    padding: 0 !important;
}
.ry-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ry-radius-md);
    background: var(--ry-color-bg-subtle);
}
.ry-figure figcaption {
    margin-top: var(--ry-space-2);
    font-size: var(--ry-fs-sm);
    line-height: var(--ry-lh-snug);
    color: var(--ry-color-muted);
}
.ry-figure--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ry-space-3);
    max-width: none;
}
.ry-figure--grid figcaption { grid-column: 1 / -1; margin-top: 0; }
.ry-card .ry-figure { max-width: none; }   /* 카드(11-7) 안은 문단·대표 시술 상자처럼 카드 폭 전체 */
@media only screen and (max-width: 680px) {
    .ry-figure--grid { grid-template-columns: 1fr; }
}

/* 11-10 탭 띠 — 같은 무게의 페이지 여럿으로 가는 탭 한 줄(시술안내 허브 위 13개 분야, 2026-11-03).
   Text Block 안 <nav class="ry-tabs" aria-label="…"><ul><li><a href="/…/">…</a></li>…</ul></nav> (Row class 는 ry-tabs-row)
   모양은 기존 하위 메뉴 탭(page-submenu: 시술 전후 사진 · 의사 칼럼)과 같게 — 회색 띠, 지금 페이지 탭은 4px 밑줄(ry.js 가 ry-current).
   한 줄에 다 안 들어가면 스크롤 막대 없이 옆으로 민다: 더 밀 수 있는 쪽 끝이 흐려지고, 마우스가 있는 화면은 그쪽에 화살표 단추(둘 다 ry.js).
   화면에 고정하는 자리는 쓰는 화면 쪽 규칙에서(예: 13-8) */
.ry-tabs {
    position: relative;
    box-sizing: border-box;   /* 아래 선까지 넣어 높이 = 토큰 */
    height: var(--ry-h-tabs);
    background: var(--ry-color-bg-muted);
    border-bottom: 1px solid var(--ry-color-border);
    font-size: var(--ry-fs-base);
    line-height: var(--ry-lh-tight);
    word-break: keep-all;
}
.ry-tabs ul {
    position: relative;   /* 탭 위치(offsetLeft)의 기준 — ry.js 가 지금 탭을 보이는 자리로 굴릴 때 */
    display: flex;
    height: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ry-tabs ul::-webkit-scrollbar { display: none; }
.ry-tabs li { flex: 0 0 auto; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ry-tabs a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    padding: 0 var(--ry-space-4);
    border-top: 4px solid transparent;   /* 밑줄과 같은 두께 → 글자가 띠 가운데 */
    border-bottom: 4px solid transparent;
    color: var(--ry-color-text) !important;
    font-weight: var(--ry-fw-extrabold);   /* 링크·메뉴 굵기 — 기존 하위 메뉴 탭과 같게(14px · 800 · 자간) */
    letter-spacing: var(--ry-tracking);
    text-decoration: none !important;
    white-space: nowrap;
}
.ry-tabs a:hover { color: var(--ry-color-accent) !important; }
.ry-tabs a.ry-current { border-bottom-color: var(--ry-color-heading); }
/* 더 밀 수 있는 쪽 끝 흐림(ry.js 가 nav 에 ry-tabs--prev / ry-tabs--next) */
.ry-tabs::before,
.ry-tabs::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: var(--ry-space-12);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.ry-tabs::before { left: 0; background: linear-gradient(to right, var(--ry-color-bg-muted) 30%, transparent); }
.ry-tabs::after { right: 0; background: linear-gradient(to left, var(--ry-color-bg-muted) 30%, transparent); }
.ry-tabs--prev::before,
.ry-tabs--next::after { opacity: 1; }
/* 화살표 단추(ry.js 가 붙임) — 마우스가 있는 화면에서, 더 밀 수 있는 쪽에만 */
.ry-tabs__arrow {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: var(--ry-space-10);
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
}
.ry-tabs__arrow--prev { left: 0; }
.ry-tabs__arrow--next { right: 0; }
.ry-tabs__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ry-space-2);
    height: var(--ry-space-2);
    border: solid var(--ry-color-heading);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(-45deg);   /* › */
}
.ry-tabs__arrow--prev::before { transform: translate(-50%, -50%) rotate(135deg); }   /* ‹ */
.ry-tabs__arrow:hover::before { border-color: var(--ry-color-accent); }
@media (hover: hover) and (pointer: fine) {
    .ry-tabs--prev .ry-tabs__arrow--prev,
    .ry-tabs--next .ry-tabs__arrow--next { display: block; }
    /* 화살표 밑은 거의 띠 색 그대로(글자와 겹치지 않게) */
    .ry-tabs::before,
    .ry-tabs::after { width: var(--ry-space-16); }
    .ry-tabs::before { background: linear-gradient(to right, var(--ry-color-bg-muted) 55%, transparent); }
    .ry-tabs::after { background: linear-gradient(to left, var(--ry-color-bg-muted) 55%, transparent); }
}
@media only screen and (max-width: 999px) {
    .ry-tabs { height: var(--ry-h-tabs-mobile); }
    .ry-tabs a { padding: 0 var(--ry-space-3); }
}

/* 11-11 영상 — 사진(11-9)과 같은 figure 안 한 줄: <figure class="ry-figure"><video controls preload="none" playsinline poster width height aria-label><source type="video/mp4"></video></figure>
   (여러 개 = ry-figure--grid). 서버에 직접 올린 MP4(H.264 720p). ry.js 가 감싸고 단추(.ry-video__play)를 얹는다(시술안내 허브, 2026-11-03):
   화면에 보이는 하나만 소리 없이 반복 자동 재생·화면 밖이면 멈춤(재생 중 오른쪽 아래 일시정지 단추). 데이터 절약·움직임 줄이기 방문자는
   첫 화면 + 가운데 재생 단추 → 누르면 기본 컨트롤로 재생. 스크립트가 없으면 기본 컨트롤로 재생 */
.ry-figure video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ry-radius-md);
    background: var(--ry-black);
}
.ry-video { position: relative; display: block; }
.ry-video .ry-video__play {   /* .ry-video 를 붙여 Salient 'body[data-button-style] button'(둥글기 4px)보다 세게 */
    position: absolute;
    inset: 0;
    width: var(--ry-space-18);
    height: var(--ry-space-18);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 50% !important;
    background: var(--ry-color-overlay);
    cursor: pointer;
    transition: background .15s;
}
.ry-video .ry-video__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
    border-left: var(--ry-space-6) solid var(--ry-color-on-dark);
    border-top: var(--ry-space-4) solid transparent;
    border-bottom: var(--ry-space-4) solid transparent;
}
.ry-video .ry-video__play:hover { background: var(--ry-color-accent); }
.ry-video .ry-video__play:focus-visible { outline: 2px solid var(--ry-color-on-dark); outline-offset: 2px; }
.ry-video.is-playing .ry-video__play { display: none; }
/* 자동 재생(ry-video--auto, ry.js) 중엔 오른쪽 아래 작은 일시정지 단추 — 저절로 움직이는 화면을 멈출 수 있게(접근성). 멈추면 가운데 큰 재생 단추 */
.ry-video--auto video { cursor: pointer; }
.ry-video--auto.is-playing .ry-video__play {
    display: block;
    inset: auto var(--ry-space-3) var(--ry-space-3) auto;
    width: var(--ry-space-10);
    height: var(--ry-space-10);
    margin: 0;
    opacity: .7;
}
.ry-video--auto.is-playing .ry-video__play:hover,
.ry-video--auto.is-playing .ry-video__play:focus-visible { opacity: 1; }
.ry-video--auto.is-playing .ry-video__play::before {
    box-sizing: border-box;
    width: var(--ry-space-3);
    height: var(--ry-space-4);
    transform: translate(-50%, -50%);
    border: 0;
    border-left: var(--ry-space-1) solid var(--ry-color-on-dark);
    border-right: var(--ry-space-1) solid var(--ry-color-on-dark);
}
@media only screen and (max-width: 680px) {
    .ry-video .ry-video__play { width: var(--ry-space-16); height: var(--ry-space-16); }
}


/* ---------- 12. 페이지별 규칙 ----------
   예전 WPBakery '페이지 설정 › 사용자 정의 CSS'(글 26개에 흩어져 있던 것)를 2026-10-29 여기로 모았다. 그 칸은 비워 두고 쓰지 않는다.
   페이지 하나에만 필요한 규칙은 여기에 .page-id-<ID> 로 범위를 좁혀 적는다 */

/* 12-1 시술 분류 페이지(왼쪽 하위 메뉴 + 본문 틀) — 위 여백 0. 앞의 10개는 태블릿 이하에서 전체 폭 · 푸터 좌우 24px */
.page-id-617 .container-wrap,
.page-id-322 .container-wrap,
.page-id-336 .container-wrap,
.page-id-383 .container-wrap,
.page-id-410 .container-wrap,
.page-id-444 .container-wrap,
.page-id-466 .container-wrap,
.page-id-498 .container-wrap,
.page-id-540 .container-wrap,
.page-id-580 .container-wrap,
.page-id-1121 .container-wrap,
.page-id-1115 .container-wrap,
.page-id-1130 .container-wrap {
    padding-top: 0 !important;
}
@media only screen and (max-width: 999px) {
.page-id-617 .container,
.page-id-322 .container,
.page-id-336 .container,
.page-id-383 .container,
.page-id-410 .container,
.page-id-444 .container,
.page-id-466 .container,
.page-id-498 .container,
.page-id-540 .container,
.page-id-580 .container {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
.page-id-617 #footer-outer,
.page-id-322 #footer-outer,
.page-id-336 #footer-outer,
.page-id-383 #footer-outer,
.page-id-410 #footer-outer,
.page-id-444 #footer-outer,
.page-id-466 #footer-outer,
.page-id-498 #footer-outer,
.page-id-540 #footer-outer,
.page-id-580 #footer-outer {
        padding: 0 var(--ry-space-6) !important;
    }
}

/* 12-2 하위 메뉴 탭(page-submenu: 시술 전후 사진 · 의사 칼럼) — 지금 페이지 탭 밑줄. ry.js 가 링크에 ry-current 를 붙인다 */
body .page-submenu li a.ry-current {
    border-bottom: 4px solid var(--ry-color-heading);
}

/* 12-3 의사 칼럼 목록(전체 · 레이저 · 리프팅 · 보톡스필러 · 진료철학 · 피부관리) — 분류 이름 숨김, 목록 위 여백 */
.page-id-2197 .meta-category,
.page-id-3315 .meta-category,
.page-id-3318 .meta-category,
.page-id-3323 .meta-category,
.page-id-3326 .meta-category,
.page-id-3329 .meta-category {
    display: none !important;
}
.page-id-2197 .posts-container,
.page-id-3315 .posts-container,
.page-id-3318 .posts-container,
.page-id-3323 .posts-container,
.page-id-3326 .posts-container,
.page-id-3329 .posts-container {
    padding-top: var(--ry-space-10);
    height: initial !important;
}

/* 12-4 홈 — 머리 아래 여백 */
body.home[data-header-resize="0"] .container-wrap,
body.home[data-header-resize="0"] .project-title {
    margin-top: -40px !important;
}

/* 12-5 의사 칼럼 게시판(/notice/, KBoard) — 날짜 칸 폭, 모바일 보조 정보 숨김 */
.page-id-162 #kboard-default-list .kboard-list table td.kboard-list-date {
    width: 90px !important;
}
.page-id-162 .kboard-mobile-contents span:nth-child(1),
.page-id-162 .kboard-mobile-contents span:nth-child(2),
.page-id-162 .kboard-mobile-contents span:nth-child(4),
.page-id-162 .kboard-mobile-contents span:nth-child(5) {
    display: none !important;
}

/* ---------- 13. 시술안내 포트폴리오 본문 (Extra Content 의 ry-* 블록) ----------
   2026-11-02 사용자 요청 '긴 글이 잘 안 읽힘 · 강조를 더 강조' — 허브(4411)에서 만들고, 변환하는 시술 페이지에 같이 쓴다.
   공개된 테스트 포트폴리오(177·3746·3764·3770)는 ry-prose 를 안 써서 영향 없음 */

/* 13-0 목차 사이드바 화면(body.ry-toc-layout — 사이드바 칸에 <nav class="ry-toc"> 가 있는 포트폴리오, functions.php 가 붙인다).
   2026-11-02 허브(4411)에서 만들고 11-03 하위 13쪽에 같이 쓴다. PC: 화면 전체 폭, 목차는 화면 왼쪽 끝 --ry-w-sidebar 칸에 고정(fixed, 푸터 앞 멈춤은 ry.js),
   본문은 나머지 영역 가운데(최대 --ry-w-wide), 섹션 사이 80. 글 제목 머리 영역은 본문 H1 과 겹쳐 숨김. 999px 이하: 목차가 본문 위 */
.ry-toc-layout .row.project-title {
    display: none;
}
.ry-toc-layout .ry-prose {
    max-width: none;
}
/* 섹션(목차 항목 = h2 로 시작하는 Row) 사이를 더 띄워 구별 — PC 96 · 모바일 80 (기본 ry-section 48 · 40, 2026-11-04 사용자: 80 · 64 에서 늘림). 첫 섹션 위와 행동 유도 상자(ry-cta)는 그대로 */
.ry-toc-layout #portfolio-extra .ry-section:not(.ry-cta) {
    padding-top: var(--ry-space-24) !important;
    padding-bottom: var(--ry-space-24) !important;
}
.ry-toc-layout #portfolio-extra .ry-section:not(.ry-cta):first-child,
.ry-toc-layout #portfolio-extra .ry-tabs-row:first-child + .ry-section:not(.ry-cta) {   /* 탭 띠 Row(13-8) 다음 = 첫 섹션 — 위 여백 48 → 96 · 모바일 40 → 80(2026-11-04 사용자) */
    padding-top: var(--ry-space-24) !important;
}
@media only screen and (max-width: 680px) {
    .ry-toc-layout #portfolio-extra .ry-section:not(.ry-cta) {
        padding-top: var(--ry-space-20) !important;
        padding-bottom: var(--ry-space-20) !important;
    }
    .ry-toc-layout #portfolio-extra .ry-section:not(.ry-cta):first-child,
    .ry-toc-layout #portfolio-extra .ry-tabs-row:first-child + .ry-section:not(.ry-cta) {
        padding-top: var(--ry-space-20) !important;
    }
}
@media only screen and (min-width: 1000px) {
    .ry-toc-layout .container-wrap {
        padding-top: 0 !important;
    }
    .ry-toc-layout .container-wrap .container.main-content {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .ry-toc-layout .main-content > .row {
        display: flex;
        align-items: stretch;
        margin: 0 !important;
    }
    .ry-toc-layout .main-content > .row > #breadcrumbs {
        display: none;
    }
    body.ry-toc-layout .main-content > .row > #sidebar.span_3 {
        order: -1;
        position: relative;   /* 푸터 앞에서 멈춘 목차(absolute)의 기준 */
        flex: 0 0 var(--ry-w-sidebar);
        width: var(--ry-w-sidebar) !important;
        float: none;
        margin: 0 !important;
        padding: var(--ry-space-12) var(--ry-space-6) var(--ry-space-12) var(--ry-space-8) !important;
        background: var(--ry-color-bg-subtle);
        border-right: 1px solid var(--ry-color-border);
    }
    /* 목차는 화면 왼쪽에 고정(fixed)해 계속 따라다닌다. 푸터가 올라오면 ry.js 가 body 에 ry-toc-end 를 붙여 사이드바 칸 바닥에 멈춘다(푸터를 덮지 않게).
       사이드바가 본문 높이로 늘어나 Salient 따라오기(theia)는 켜지지 않는다 — 혹시 켜져도 그 고정 방식은 끈다 */
    .ry-toc-layout #sidebar-inner {
        position: fixed;
        top: calc(var(--ry-h-header) + var(--ry-space-10));
        left: 0;
        width: var(--ry-w-sidebar);
        max-height: calc(100vh - var(--ry-h-header) - var(--ry-space-16));
        overflow-y: auto;
        box-sizing: border-box;
        padding: 0 var(--ry-space-6) 0 var(--ry-space-8);
    }
    body.admin-bar.ry-toc-layout #sidebar-inner {
        top: calc(var(--ry-h-header) + var(--ry-space-8) + var(--ry-space-10));   /* 관리자 막대 32 */
    }
    body.ry-toc-end.ry-toc-layout #sidebar-inner,
    body.admin-bar.ry-toc-end.ry-toc-layout #sidebar-inner {
        position: absolute;
        top: auto;
        bottom: var(--ry-space-12);
    }
    .ry-toc-layout #sidebar .theiaStickySidebar {
        position: static !important;
        transform: none !important;
        width: auto !important;
    }
    /* 오른쪽 여백 120 = 화면 오른쪽 빠른 메뉴(ft_fixed) 자리 */
    body.ry-toc-layout .main-content > .row > .post-area.span_9 {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
        float: none;
        margin: 0 !important;
        padding: 0 calc(var(--ry-space-24) + var(--ry-space-6)) var(--ry-space-16) var(--ry-space-16) !important;
    }
    .ry-toc-layout #portfolio-extra {
        max-width: var(--ry-w-wide);
        margin: 0 auto;
    }
}
@media only screen and (max-width: 999px) {
    .ry-toc-layout .main-content > .row { display: flex; flex-direction: column; }
    .ry-toc-layout #sidebar { order: -1; margin-bottom: var(--ry-space-6); }
}


/* 13-1 읽기 폭·간격: 문단·목록·고객의 말은 --ry-w-content 까지(한 줄 40자 안팎), 표·카드·버튼은 넓게 */
.single-portfolio #portfolio-extra .ry-prose p,
.single-portfolio #portfolio-extra .ry-prose ul,
.single-portfolio #portfolio-extra .ry-prose ol { max-width: var(--ry-w-content); }
.single-portfolio #portfolio-extra .ry-prose p { padding-bottom: var(--ry-space-6); }
.single-portfolio #portfolio-extra .ry-prose li { margin-bottom: var(--ry-space-2); }
.single-portfolio #portfolio-extra .ry-cta p { margin-left: auto; margin-right: auto; }
/* 카드 안 문단(설명 · 고객의 말 · 대표 시술 · 링크)은 카드 폭 전체(2026-11-03 사용자 — 카드를 1열로 넓힌 뒤 글이 왼쪽 700 에서 꺾였다) */
.single-portfolio #portfolio-extra .ry-card--menu .ry-prose p { max-width: none; }
/* 목차 화면(13-0): 본문 단을 본문 칸 가운데로(2026-11-03 사용자) — 문단·목록·사진 한 장·소제목(h2~h4, FAQ 질문 포함)은
   --ry-w-boxed(840) 폭 단을 가운데에, 넓은 것(H1 · 표 · 영상 2열)은 칸 전체 폭. 카드 안 · 행동 유도 상자는 그대로.
   본문 칸이 840 보다 좁은 화면(PC 1324px 미만 · 태블릿 약 955px 미만)에선 단이 칸을 다 채운다. H1 글자는 가운데 */
.ry-toc-layout #portfolio-extra .ry-section:not(.ry-cta) .ry-prose:not(.ry-card .ry-prose) > .wpb_wrapper > :not(h1):not(table):not(.ry-figure--grid:has(video)) {
    max-width: var(--ry-w-boxed);
    margin-left: auto !important;
    margin-right: auto !important;
}
/* 사진 여러 장(ry-figure--grid)은 한 줄에 한 장씩 — 사진 한 장과 같은 단 폭(2026-11-04 사용자). 영상 2열은 그대로 */
.ry-toc-layout #portfolio-extra .ry-figure--grid:has(img) { grid-template-columns: 1fr; }
.ry-toc-layout #portfolio-extra .ry-prose h1 { text-align: center; }
/* 카드 목록(ry-cards, 허브 3번 섹션)도 본문 단 폭으로 가운데 — 보이는 카드 상자 = 단 폭(칸 간격 15 는 Salient 가 Row 안에서 맞춘다) */
.ry-toc-layout #portfolio-extra .ry-cards {
    max-width: var(--ry-w-boxed);
    margin-left: auto;
    margin-right: auto;
}
/* 카드 사이도 더 띄움(2026-11-04 사용자) — PC 32 → 48 · 999px 이하 24 → 40 */
.ry-toc-layout #portfolio-extra .ry-cards:not(:last-child) { margin-bottom: var(--ry-space-12) !important; }
@media only screen and (max-width: 999px) {
    .ry-toc-layout #portfolio-extra .ry-cards:not(:last-child) { margin-bottom: 0 !important; }
    .ry-toc-layout #portfolio-extra .ry-card--menu { margin-bottom: var(--ry-space-10) !important; }
    .ry-toc-layout #portfolio-extra .ry-cards:last-child .ry-card--menu { margin-bottom: 0 !important; }
}
/* 목록 들여쓰기는 바깥 여백 대신 안쪽 여백으로 — 글머리표가 가운데 단 안에(요약 상자는 13-6 안쪽 여백 그대로) */
.ry-toc-layout #portfolio-extra .ry-section:not(.ry-cta) .ry-prose:not(.ry-card .ry-prose) > .wpb_wrapper > :is(ul, ol):not(.ry-eyebrow + ul) {
    box-sizing: border-box;
    padding-left: var(--ry-space-5);
}

/* 13-2 섹션 제목 번호 01~ (id 있는 h2 = 목차 항목, 목차 번호와 같다) */
.single-portfolio #portfolio-extra { counter-reset: ry-sec; }
.single-portfolio #portfolio-extra .ry-prose h2[id] { counter-increment: ry-sec; font-size: var(--ry-fs-4xl) !important; }
.single-portfolio #portfolio-extra .ry-prose h2[id]::before {
    content: counter(ry-sec, decimal-leading-zero);
    display: block;
    margin-bottom: var(--ry-space-2);
    font-size: var(--ry-fs-base);
    font-weight: var(--ry-fw-extrabold);
    letter-spacing: .08em;
    color: var(--ry-brown-400);
}

/* 13-3 소제목(h3, 질문·카드 밖): 왼쪽 선. 카드 제목은 11-7(갈색 띠) — 예전엔 카드를 빼는 덮어쓰기가 우선순위에서 밀려
   카드 제목에도 왼쪽 선이 붙었다(2026-11-03 고침: 처음부터 카드 안은 고르지 않음) */
.single-portfolio #portfolio-extra .ry-prose:not(.ry-faq):not(.ry-card--menu .ry-prose) h3 {
    border-left: 4px solid var(--ry-color-accent);
    padding-left: var(--ry-space-3) !important;
    line-height: var(--ry-lh-tight) !important;
}
.single-portfolio #portfolio-extra .ry-faq h3 { color: var(--ry-color-accent); }

/* 13-4 굵은 글씨: 형광펜 밑줄 (대표 시술 태그·글쓴이 칸 제외) */
.single-portfolio #portfolio-extra .ry-prose p strong {
    color: var(--ry-color-heading);
    font-weight: var(--ry-fw-extrabold);
    background: linear-gradient(transparent 62%, var(--ry-brown-100) 62%);
}
.single-portfolio #portfolio-extra .ry-tags strong,
.single-portfolio #portfolio-extra .ry-note strong { background: none; }

/* 13-5 고객의 말: 색 상자 (카드 안은 작게 그대로) */
.single-portfolio #portfolio-extra .ry-prose .ry-quote {
    max-width: var(--ry-w-content);
    background: var(--ry-color-bg-warm);
    border-left: 4px solid var(--ry-brown-400);
    border-radius: 0 var(--ry-radius-md) var(--ry-radius-md) 0;
    padding: var(--ry-space-4) var(--ry-space-5) !important;
    font-size: var(--ry-fs-lg) !important;
    color: var(--ry-brown-800);
}
.single-portfolio #portfolio-extra .ry-card--menu .ry-quote {
    background: none;
    border-left-width: 3px;
    border-radius: 0;
    padding: var(--ry-space-1) 0 var(--ry-space-1) var(--ry-space-4) !important;
    font-size: var(--ry-fs-base) !important;
    color: var(--ry-brown-600);
}

/* 13-6 첫 소개 문단 크게 · '한눈에 보는 요약' 상자 */
.single-portfolio #portfolio-extra .ry-section:first-child .ry-quote + p,
.single-portfolio #portfolio-extra .ry-tabs-row:first-child + .ry-section .ry-quote + p { font-size: var(--ry-fs-lg); color: var(--ry-color-heading); }
.single-portfolio #portfolio-extra .ry-eyebrow + ul {
    max-width: var(--ry-w-content);
    margin: 0 0 var(--ry-space-6) !important;
    padding: var(--ry-space-5) var(--ry-space-6) var(--ry-space-5) var(--ry-space-10) !important;
    background: var(--ry-color-bg-subtle);
    border: 1px solid var(--ry-color-border);
    border-radius: var(--ry-radius-md);
}
.single-portfolio #portfolio-extra .ry-eyebrow + ul li { list-style: disc; }

/* 13-7 모바일: 본문 16px(기본 14) */
@media only screen and (max-width: 680px) {
    .single-portfolio #portfolio-extra .ry-prose { font-size: var(--ry-fs-md); }
    .single-portfolio #portfolio-extra .ry-prose h2[id] { font-size: var(--ry-fs-3xl) !important; }
    .single-portfolio #portfolio-extra .ry-prose .ry-quote,
    .single-portfolio #portfolio-extra .ry-section:first-child .ry-quote + p,
    .single-portfolio #portfolio-extra .ry-tabs-row:first-child + .ry-section .ry-quote + p { font-size: var(--ry-fs-md) !important; }
}

/* 13-8 맨 위 띠(제목 · 탭) — 목차 화면 + Extra 첫 Row(class ry-tabs-row) = [허브만 <h1 class="ry-page-title">] + <nav class="ry-tabs">(11-10).
   자식 테마(functions.php)가 이 Row 를 두 칸(목차 · 본문) 위 화면 전체 폭 자리 .ry-top 으로 옮겨 그린다(원래 자리에선 뺌 — H1 은 한 번만).
   처음엔 제목 아래 제자리, 스크롤로 띠가 헤더에 닿으면 ry.js 가 body.ry-tabs-fixed → 헤더 아래에 고정(fixed — body 가 overflow:hidden 이라
   sticky 는 안 걸린다), 띠가 있던 자리는 ry.js 가 높이를 남겨 본문이 튀지 않는다. 고정 목차(PC)도 그때부터 고정 — 그 전엔 목차 칸 맨 위에 붙어 같이 올라감.
   2026-11-03: 처음엔 늘 고정 → 같은 날 사용자 요청으로 허브 맨 위에 제목(의사 칼럼 h2.section_title 모양)을 두고 띠는 스크롤 뒤 고정 */
.ry-toc-layout .ry-tabs-row,
.ry-toc-layout .ry-tabs-row .row_col_wrap_12,   /* Salient 칸 묶음의 음수 바깥 여백(약 -1%) — 제자리 띠가 왼쪽으로 밀렸다 */
.ry-toc-layout .ry-tabs-row .wpb_column,
.ry-toc-layout .ry-tabs-row .wpb_text_column {
    margin: 0 !important;
    padding: 0 !important;
}
.ry-toc-layout .ry-tabs-row .row_col_wrap_12 { width: 100% !important; }
/* 띠를 감싼 Row 를 다른 Row 보다 위로. Salient 가 Row 안쪽 칸(row_col_wrap_12)마다 z-index 10 쌓임 영역을 만들어서,
   띠(fixed · z 1000)가 자기 Row 안에서만 높고 뒤 Row 들(같은 10 · 나중 순서)의 글·사진이 띠 위에 그려졌다(2026-11-03 고침) */
.ry-toc-layout .ry-top,
.ry-toc-layout .ry-tabs-row {
    position: relative;
    z-index: var(--ry-z-submenu);
}
/* 제목 — 의사 칼럼 h2.section_title 과 같은 크기·굵기(PC 28 · 900, 모바일 22), 헤더 아래 40 · 띠 위 40, 가운데 */
.ry-page-title {
    margin: 0 !important;
    padding: var(--ry-space-10) var(--ry-space-5) !important;
    text-align: center;
    font-size: var(--ry-fs-4xl) !important;
    font-weight: var(--ry-fw-heavy) !important;
    line-height: var(--ry-lh-snug) !important;
    color: var(--ry-color-heading) !important;
    word-break: keep-all;
    overflow-wrap: break-word;
}
/* 제목 바로 밑에 붙인다 — 글 칸 안 요소 사이 여백(24)이 붙으면 고정되는 순간 띠가 그만큼 위로 튄다 */
.ry-top .ry-tabs,
.ry-tabs-slot { margin: 0 !important; padding: 0 !important; }   /* 띠 자리 빈 칸(ry.js)에도 글 칸 요소 아래 여백(24)이 붙었다 */
body.ry-tabs-fixed.ry-toc-layout .ry-tabs {
    position: fixed;
    top: var(--ry-h-header);
    left: 0;
    right: 0;
    z-index: var(--ry-z-submenu);
}
@media only screen and (min-width: 1000px) {
    body.admin-bar.ry-tabs-fixed.ry-toc-layout .ry-tabs { top: calc(var(--ry-h-header) + var(--ry-space-8)); }   /* 관리자 막대 32 */
    /* 왼쪽부터: 첫 탭 글자 = 목차 글자 왼쪽 선(목차 칸 안쪽 여백 32 − 탭 안쪽 여백 16, 13-0) */
    .ry-toc-layout .ry-tabs ul { padding: 0 var(--ry-space-6) 0 var(--ry-space-4) !important; }
    body.ry-toc-layout:has(.ry-tabs) #sidebar-inner { max-height: calc(100vh - var(--ry-h-header) - var(--ry-h-tabs) - var(--ry-space-16)); }
    body.ry-toc-layout:not(.ry-toc-end):has(.ry-tabs) #sidebar-inner { top: calc(var(--ry-h-header) + var(--ry-h-tabs) + var(--ry-space-10)); }
    body.admin-bar.ry-toc-layout:not(.ry-toc-end):has(.ry-tabs) #sidebar-inner { top: calc(var(--ry-h-header) + var(--ry-h-tabs) + var(--ry-space-8) + var(--ry-space-10)); }
    /* 띠가 아직 고정 전(맨 위): 고정 목차도 목차 칸 맨 위(40 아래)에 붙어 같이 올라간다 — 띠가 고정되는 순간 두 자리가 같아 이어짐 */
    body.ry-toc-layout:not(.ry-tabs-fixed):not(.ry-toc-end):has(.ry-tabs) #sidebar-inner,
    body.admin-bar.ry-toc-layout:not(.ry-tabs-fixed):not(.ry-toc-end):has(.ry-tabs) #sidebar-inner {
        position: absolute;
        top: var(--ry-space-10);
    }
    body.ry-toc-layout:has(.ry-tabs) #portfolio-extra [id] { scroll-margin-top: calc(var(--ry-h-header) + var(--ry-h-tabs) + var(--ry-space-4)); }
}
@media only screen and (max-width: 999px) {
    /* 본문 칸이 화면 88% 가운데라 맨 위 띠만 화면 끝까지 */
    .ry-toc-layout .ry-top { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
    body.ry-tabs-fixed.ry-toc-layout .ry-tabs { top: var(--ry-h-header-mobile); }
    .ry-toc-layout .ry-tabs ul { padding: 0 var(--ry-space-3) !important; }
    body.ry-toc-layout:has(.ry-tabs) #sidebar { margin-top: var(--ry-space-8); }   /* 원래 위 간격 30 쯤 */
    body.ry-toc-layout:has(.ry-tabs) #portfolio-extra [id] { scroll-margin-top: calc(var(--ry-h-header-mobile) + var(--ry-h-tabs-mobile) + var(--ry-space-4)); }
}
@media only screen and (max-width: 680px) {
    .ry-page-title { padding: var(--ry-space-6) var(--ry-space-5) !important; font-size: var(--ry-fs-2xl) !important; }
}