/* =====================================================
   소아암재단 구텐베르크 에디터 스타일
   프론트엔드(style.css .page-content)와 동일하게 유지
   ===================================================== */

.editor-styles-wrapper {
    font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    font-size: 18px;
    color: #343232;
    line-height: 1.6;
    word-break: keep-all;
}

/* ===== 제목 H2 ===== */
.editor-styles-wrapper h2,
.page-title {
    color: #343232;
    font-size: 48px !important;
    font-weight: 300 !important;
    line-height: 56px !important;
}



/* ===== H2 바로 다음 단락 (서브타이틀) ===== */
.editor-styles-wrapper h2:first-child + p,
.editor-styles-wrapper .wp-block-heading + .wp-block-paragraph > p {
    color: #F05B89;
    font-family: "Pretendard", sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 36px !important;
    margin-bottom: 64px!important
}

/* ===== 제목 H3 ===== */
.editor-styles-wrapper h3 {
    color: #F05B89;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 40px !important;
}

.editor-styles-wrapper h2 + h3  {
    margin-top: 40px ;
}
/* ===== 제목 H4 ===== */
.editor-styles-wrapper h4 {
    color: #F05B89;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 36px !important;
}

/* ===== 제목 H5 ===== */
.editor-styles-wrapper h5 {
    color: #343232;
    font-size: 24px;
    font-weight: 800;
    line-height: 32px;
}

/* ===== 클래스 없는 링크: p1 컬러 + 밑줄 ===== */
.editor-styles-wrapper a:not([class]) {
    color: var(--wp--preset--color--p1);
    text-decoration: underline;
    word-break: break-all;
}
.editor-styles-wrapper .has-white-color a {
    color:#fff!important;
    text-decoration: none;
}
/* ===== 단락 기본 (M) ===== */
.editor-styles-wrapper p {
    color: #555560;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 0;
    word-break: keep-all;
}
/* ===== Paragraph S ===== */
.editor-styles-wrapper .is-style-paragraph-s,
.wp-block-paragraph.is-style-paragraph-s {
    color: #636466;
    font-size: 14px ;
    font-weight: 400 ;
    line-height: 24px ;
}

/* ===== Paragraph M ===== */
.editor-styles-wrapper .is-style-paragraph-m,
.wp-block-paragraph.is-style-paragraph-m {
    color: #555560;
    font-size: 16px ;
    font-weight: 400 ;
    line-height: 24px ;
}

/* ===== Paragraph L ===== */
.editor-styles-wrapper .is-style-paragraph-l,
.wp-block-paragraph.is-style-paragraph-l {
    color: #343232;
    font-size: 20px ;
    font-weight: 400 ;
    line-height: 32px ;
}

/* Layout */
.wp-block-group.is-layout-constrained {
    padding:100px 24px;
}

/* ===== 구텐베르크 컬러 유틸리티 (has-X-background-color / has-X-color) ===== */

/* Background */
.has-p1-background-color  { background-color: #F05B89 !important; }
.has-p2-background-color  { background-color: #F6A8BA !important; }
.has-p3-background-color  { background-color: #FACDDB !important; }
.has-pbg-background-color { background-color: #FDEBF1 !important; }
.has-pt-background-color  { background-color: #B40037 !important; }
.has-y1-background-color  { background-color: #FFD166 !important; }
.has-y2-background-color  { background-color: #FFE3A3 !important; }
.has-ybg-background-color { background-color: #FDF8ED !important; }
.has-yt-background-color  { background-color: #735A20 !important; }
.has-b1-background-color  { background-color: #2A54A1 !important; }
.has-b2-background-color  { background-color: #9CABCB !important; }
.has-bbg-background-color { background-color: #F1F5FF !important; }
.has-g1-background-color  { background-color: #343232 !important; }
.has-g2-background-color  { background-color: #555560 !important; }
.has-g3-background-color  { background-color: #636466 !important; }
.has-g4-background-color      { background-color: #999999 !important; }
.has-gborder-background-color { background-color: #CCCCCC !important; }
.has-gbg-background-color     { background-color: #ECECEC !important; }
.has-white-background-color   { background-color: #FFFFFF !important; }
.has-black-background-color { background-color: #000000 !important; }

/* Text Color */
.has-p1-color  { color: #F05B89 !important; }
.has-p2-color  { color: #F6A8BA !important; }
.has-p3-color  { color: #FACDDB !important; }
.has-pbg-color { color: #FDEBF1 !important; }
.has-pt-color  { color: #B40037 !important; } 
.has-y1-color  { color: #FFD166 !important; }
.has-y2-color  { color: #FFE3A3 !important; }
.has-ybg-color { color: #FDF8ED !important; }
.has-yt-color  { color: #735A20 !important; }
.has-b1-color  { color: #2A54A1 !important; }
.has-b2-color  { color: #9CABCB !important; }
.has-bbg-color { color: #F1F5FF !important; }
.has-g1-color  { color: #343232 !important; }
.has-g2-color  { color: #555560 !important; }
.has-g3-color  { color: #636466 !important; }
.has-g4-color      { color: #999999 !important; }
.has-gborder-color { color: #CCCCCC !important; }
.has-gbg-color     { color: #ECECEC !important; }
.has-white-color   { color: #FFFFFF !important; }
.has-black-color { color: #000000 !important; }

/* ===== 구텐베르크 컬러 팔레트 CSS 변수 ===== */
.editor-styles-wrapper {
    --wp--preset--color--p1:  #F05B89;
    --wp--preset--color--p2:  #F6A8BA;
    --wp--preset--color--p3:  #FACDDB;
    --wp--preset--color--pbg: #FDEBF1;
    --wp--preset--color--pt:  #B40037;
    --wp--preset--color--y1:  #FFD166;
    --wp--preset--color--y2:  #FFE3A3;
    --wp--preset--color--ybg: #FFF2D2;
    --wp--preset--color--yt:  #735A20;
    --wp--preset--color--b1:  #2A54A1;
    --wp--preset--color--b2:  #9CABCB;
    --wp--preset--color--bbg: #F1F5FF;
    --wp--preset--color--g1:  #343232;
    --wp--preset--color--g2:  #555560;
    --wp--preset--color--g3:      #636466;
    --wp--preset--color--g4:      #999999;
    --wp--preset--color--gborder: #CCCCCC;
    --wp--preset--color--gbg:     #ECECEC;
    --wp--preset--color--white: #FFFFFF;
    --wp--preset--color--black: #000000;
}

/* ===== 레이아웃 유틸리티 ===== */

/* 카드: 흰 배경 + 둥근 모서리 + 그림자 */
.wp-block-group.is-style-card,
.wp-block-group.is-style-card.has-background,
.wp-block-group.is-style-card.is-layout-constrained {
    background-color: #FFFFFF !important;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    padding: 32px;
    display: flex;
    flex-direction: column;
}

/* 카드 안 마지막 버튼 하단 고정 */
.is-style-card > .wp-block-buttons:last-child,
.is-style-card > .wp-block-button:last-child {
    margin-top: auto;
    padding-top: 24px;
}

/* 버튼 하단 고정: 버튼 블록에 추가 CSS 클래스 "is-btn-bottom" 입력 시 */
.wp-block-buttons.is-btn-bottom {
    margin-top: auto;
}

/* 겹치기: 컬럼 추가 CSS 클래스로 직접 적용 */
/* 카드 왼쪽 + 이미지 오른쪽: 카드 컬럼에 overlap-left 추가 */
.is-style-card.overlap-left {
    margin-right: -102px;
    position: relative;
    z-index: 1;
}
/* 이미지 왼쪽 + 카드 오른쪽: 카드 컬럼에 overlap-right 추가 */
.is-style-card.overlap-right {
    margin-left: -102px;
    position: relative;
    z-index: 1;
}
.is-style-card.overlap-left.indent-more {
    margin-left: 72px;
}
.is-style-card.overlap-right.indent-more {
    margin-right: 72px;
}
.is-style-card.overlap {
    margin-left: 32px;
    position: relative;
    z-index: 1;
}
.is-style-card.overlap-shadow {
    border: 1px solid #CCC;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
}
.overlap-image {
    position: relative;
    z-index: 2;
}
.ppoya-vision {
    position: absolute;
    bottom:-120px;
    right:56px;
}
.editor-styles-wrapper h4.font-size-36 {
    font-size: 36px!important;
}
/* ppoya-vision 이미지가 커버 밖으로 나올 수 있도록 overflow 해제 */
.wp-block-cover:has(.ppoya-vision) {
    overflow: visible;
}
/* 커버 배경(색/이미지)은 border-radius 클리핑 유지 */
.wp-block-cover:has(.ppoya-vision) .wp-block-cover__background,
.wp-block-cover:has(.ppoya-vision) .wp-block-cover__image-background {
    border-radius: inherit;
    overflow: hidden;
}
/* inner-container도 클리핑 해제 */
.wp-block-cover:has(.ppoya-vision) .wp-block-cover__inner-container {
    overflow: visible;
}
/* 우측 FA Slab Regular 화살표 — 링크가 있는 이미지에만 표시 */
figure.wp-block-image.overlap-image:has(a)::after {
    content: '\f054';
    font-family: "Font Awesome 7 Pro";
    font-weight: 300;
    font-size: 48px;
    color: #A6AEC1;
    position: absolute;
    right: -64px;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    pointer-events: none;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* 이미지 링크: 호버 시 위로 4px + 그림자 */
.overlap-image a {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}
.overlap-image a img {
    display: block;
    width: 100%;
    transition: transform 2.4s ease;
}
.overlap-image:hover a {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}
.overlap-image:hover a img {
    transform: scale(1.06);
}

/* 화살표 호버: 오른쪽 4px 이동, 호버 해제 시 복귀 */
figure.wp-block-image.overlap-image:has(a):hover::after {
    transform: translateY(-50%) translateX(4px);
}

/* 섹션 레이블: 좌측 H3 라벨 (핑크, 세로 정렬) */
.is-style-section-label {
    display: flex;
    align-items: flex-start;
    padding-top: 8px;
}

/* =====================================================
   버튼 스타일
   채우기(그라디언트) / 아웃라인(p1) × 소형 / 보통 / 대형
   ===================================================== */

/* ── 버튼 컨테이너 ── */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.page-id-718 .wp-block-buttons, 
.post-1152 .wp-block-buttons,
.post-18 .wp-block-buttons, 
.post-176 .wp-block-buttons {justify-content: center;}
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.wp-block-buttons.is-content-justification-left   { justify-content: flex-start; }
.wp-block-buttons.is-content-justification-right  { justify-content: flex-end; }

/* ── 공통 기반 ── */
.wp-block-button__link,
.page_btn {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    border-radius:   555px !important;
    font-weight:     700 !important;
    line-height:     1 !important;
    white-space:     nowrap;
    text-decoration: none !important;
    box-sizing:      border-box !important;
    transition:
        transform  0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.28s ease !important;
}

/* ── 채우기 (기본 스타일) ── */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.page_btn {
    background: linear-gradient(0deg, #F05B89 30%, #F386A4 112.5%);
    color:       #FFFFFF;
    border:      none !important;
    box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.12);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.page_btn:hover {
    transform:  translateY(-4px);
    box-shadow: 0 10px 24px 0 rgba(240, 91, 137, 0.38);
}

/* ── 아웃라인 ── */
.wp-block-button.is-style-outline .wp-block-button__link {
    border-radius: 555px;
    color:       #F05B89;
    border: 2px solid var(--soa-secondary, #F6A8BA);
    background: linear-gradient(0deg, #FFE5EB 0%, #FFF 50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    transform:  translateY(-4px);
    box-shadow: 0 10px 24px 0 rgba(240, 91, 137, 0.18);
}

.wp-block-button.is-style-outline.no-border .wp-block-button__link{
    border: none !important;
}
.editor-styles-wrapper .wp-block-columns.gap-0 {
    gap:0;
    margin-left: -24px!important;
}
/* ── 크기: 보통 (기본) ── */
.wp-block-button__link {
    font-size: 18px !important;
    height:    48px;
    padding:   10px 30px !important;
    gap:       14px;
}

/* ── 크기: 소형 ── */
.wp-block-buttons.is-btn-sm .wp-block-button__link {
    font-size: 16px !important;
    height:    40px;
    padding:   10px 24px !important;
    gap:       10px;
}

/* ── 크기: 대형 ── */
.wp-block-buttons.is-btn-lg .wp-block-button__link,
.page_btn {
    font-size: 24px !important;
    height:    80px;
    padding:   10px 48px !important;
    gap:       16px;
}

/* ── 버튼 아이콘 크기 ── */
.wp-block-button__link i,
.page_btn i {
    font-size: 1.2em;   /* 버튼 글자 크기 대비 비율 — 여기서 조정 */
    line-height: 1;
    flex-shrink: 0;
}
.wp-block-buttons.is-btn-sm .wp-block-button__link i { font-size: 1.1em; }
.wp-block-buttons.is-btn-lg .wp-block-button__link i, .page_btn i { font-size: 1.4em; }

/* Columns 블록 gap */
.wp-block-columns {
    width: 100% !important;
    gap: 24px;
    align-items: stretch;
}

/* icon-wrap: 아이콘 + 말풍선 묶음 그룹 */
.icon-wrap {
    position: relative !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

/* bubble: CSS 말풍선 — 텍스트 길이에 자동 대응 */
.editor-styles-wrapper p.bubble,
p.bubble {
    position: absolute ;
    top: -20px ;
    left: 50% ;
    transform: translate(-50%, -100%) ;
    background: #fff ;
    color: #CB2D5A ;
    font-size: 16px ;
    font-weight: 700!important;
    line-height: 32px;
    padding: 4px 16px ;
    border-radius: 32px ;
    white-space: nowrap ;
    margin: 0 ;
    pointer-events: none ;
    z-index: 2 ;
    width: max-content ;
}

/* 말풍선 꼬리 */
p.bubble::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
}

/* ma: 이미지 가운데 정렬 */
.wp-block-image.ma img,
.wp-block-image.ma {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* jc-center */
.jc-center { justify-content: center !important; }

/* shadow-l */
.shadow-l { box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.30) !important; }
.shadow-m { box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);}

/* corkboard 섹션 장식 배경 원 (cover.shadow-l 사용) */
.wp-block-cover.shadow-l {
    position: relative;
    overflow: visible;
    z-index: 1;
    box-shadow: none !important; /* shadow를 __background로 이동 */
}
.wp-block-cover.shadow-l .wp-block-cover__background,
.wp-block-cover.shadow-l .wp-block-cover__image-background {
    border-radius: inherit;
}
.wp-block-cover.shadow-l .wp-block-cover__background {
    box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.30);
}
.wp-block-cover.shadow-l::before,
.wp-block-cover.shadow-l::after {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
}
.wp-block-cover.shadow-l::before {
    top: -120px;
    left: -180px;
    width: 434px;
    height: 434px;
    background-image: url('../../img/s0305_03_bg01.webp');
}
.wp-block-cover.shadow-l::after {
    bottom: -90px;
    right: -320px;
    width: 851px;
    height: 772px;
    background-image: url('../../img/s0305_03_bg02.webp');
}

/* spotlight: 그룹 양쪽 조명 장식 */
.wp-block-group.spotlight {
    position: relative;
    overflow: visible;
}
.wp-block-group.spotlight::before,
.wp-block-group.spotlight::after {
    content: '';
    position: absolute;
    top: 0;
    width: 942px;
    height: 823px;
    background: url('../../img/s0305_06.webp') no-repeat top center / contain;
    pointer-events: none;
    z-index: 0;
}
.wp-block-group.spotlight::before {
    left: -240px;
}
.wp-block-group.spotlight::after {
    right: -240px;
    transform: scaleX(-1);
}

/* full: 브라우저 전체 너비 확장 */
.wp-block-columns.full {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.wp-block-group.full {
    width:100%;
}

/* 2열 2줄 래핑: 컬럼스 블록에 추가 CSS 클래스 "columns-2" 입력 시 */
.wp-block-columns.columns-2 {
    flex-wrap: wrap !important;
}
.wp-block-columns.columns-2 > .wp-block-column {
    flex: 0 0 calc(50% - 12px) !important;
    flex-basis: calc(50% - 12px) !important;
    min-width: 0 !important;
}

/* 3열 래핑: 컬럼스 블록에 추가 CSS 클래스 "columns-3" 입력 시 */
.wp-block-columns.columns-3 {
    flex-wrap: wrap !important;
}
.wp-block-columns.columns-3 > .wp-block-column {
    flex: 0 0 calc(33.333% - 16px) !important;
    flex-basis: calc(33.333% - 16px) !important;
    min-width: 0 !important;
}

/* 4열 래핑: 컬럼스 블록에 추가 CSS 클래스 "columns-4" 입력 시 */
.wp-block-columns.columns-4 {
    flex-wrap: wrap !important;
}
.wp-block-columns.columns-4 > .wp-block-column {
    flex: 0 0 calc(25% - 18px) !important;
    flex-basis: calc(25% - 18px) !important;
    min-width: 0 !important;
}

/* Columns 안 컬럼 높이 100% (카드 높이 맞춤) */
.editor-styles-wrapper .wp-block-column {
    display: flex;
    flex-direction: column;
}

/* 카드가 컬럼 전체 높이를 채우도록 */
.editor-styles-wrapper .wp-block-column > .is-style-card {
    flex: 1;
}

/* Columns 안의 블록에 contentSize max-width 적용 방지 */
.wp-block-column .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =====================================================
   프로세스 블록 스타일
   Columns → 스타일: "프로세스" / "프로세스 (그림자)"
   ===================================================== */

/* process Columns가 wp-block-column 안에 중첩될 때
   WP is-layout-constrained 가 max-width + margin:auto 를 주입하므로 강제 해제 */
.wp-block-column > .wp-block-columns.is-style-process,
.wp-block-column > .wp-block-columns.is-style-process-shadow,
.wp-block-column .wp-block-columns.is-style-process,
.wp-block-column .wp-block-columns.is-style-process-shadow {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}



/* Columns 공통: 균등 배분, 세로 높이 맞춤 */
.wp-block-columns.is-style-process,
.wp-block-columns.is-style-process-shadow {
    width: 100% !important;
    align-self: stretch !important;
    gap: 24px !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;  /* 기본: 한 줄 */
    counter-reset: step-counter;
}

/* ── PC 열 수: process-pc-N 클래스 ── */
/* is-style-process > .wp-block-column 보다 선택자를 더 구체적으로 지정해 우선 적용 */
.wp-block-columns.is-style-process.process-pc-2,
.wp-block-columns.is-style-process-shadow.process-pc-2,
.wp-block-columns.is-style-process.process-pc-3,
.wp-block-columns.is-style-process-shadow.process-pc-3,
.wp-block-columns.is-style-process.process-pc-4,
.wp-block-columns.is-style-process-shadow.process-pc-4 {
    flex-wrap: wrap !important;
}
.wp-block-columns.is-style-process.process-pc-2 > .wp-block-column,
.wp-block-columns.is-style-process-shadow.process-pc-2 > .wp-block-column {
    flex: 0 0 calc(50% - 12px) !important;
    flex-basis: calc(50% - 12px) !important;
    min-width: 0 !important;
}
.wp-block-columns.is-style-process.process-pc-3 > .wp-block-column,
.wp-block-columns.is-style-process-shadow.process-pc-3 > .wp-block-column {
    flex: 0 0 calc(33.333% - 16px) !important;
    flex-basis: calc(33.333% - 16px) !important;
    min-width: 0 !important;
}
.wp-block-columns.is-style-process.process-pc-4 > .wp-block-column,
.wp-block-columns.is-style-process-shadow.process-pc-4 > .wp-block-column {
    flex: 0 0 calc(25% - 18px) !important;
    flex-basis: calc(25% - 18px) !important;
    min-width: 0 !important;
}



/* 각 Column: 균등 너비 + 카드 모양
   flex-basis: 0 !important  → 에디터에서 인라인 style="flex-basis:X%" 덮어쓰기 확실히 적용 */
.wp-block-columns.is-style-process > .wp-block-column,
.wp-block-columns.is-style-process-shadow > .wp-block-column {
    flex: 1 1 0 !important;
    flex-basis: 0 !important;      /* 인라인 flex-basis 완전 무력화 */
    min-width: 0 !important;
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 32px 0 24px;          /* 좌우 0 → STEP 선이 카드 끝까지 */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 그림자 버전 */
.wp-block-columns.is-style-process-shadow > .wp-block-column {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ── STEP 레이블: 이중 배경 그라디언트 트릭 ─────────────────
   ① gbg(#ECECEC) 1px 선: 100% 너비로 세로 중앙
   ② 흰색 마스크: 텍스트 영역만 선을 가림
   → 텍스트가 선 위에 깨끗하게 분리되어 보임
   ────────────────────────────────────────────────────────── */
.wp-block-columns.is-style-process > .wp-block-column::before,
.wp-block-columns.is-style-process-shadow > .wp-block-column::before {
    counter-increment: step-counter;
    content: 'STEP ' counter(step-counter, decimal-leading-zero);
    order: 1;
    align-self: stretch;           /* align-items:center 무시, 카드 전체 너비 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 텍스트 아래는 선 없음 — 좌/우 두 토막으로 나눠 그림 (배경색 무관) */
    background-image:
        linear-gradient(#D9D9D9, #D9D9D9),
        linear-gradient(#D9D9D9, #D9D9D9);
    background-size:
        calc(50% - 2.25em - 16px) 3px,
        calc(50% - 2.25em - 16px) 3px;
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;

    font-size: 16px;
    font-weight: 700;
    color: #999;
    letter-spacing: 2.72px;
    padding: 8px 0;
    margin-top: 14px;
    margin-bottom: 6px;
    flex-shrink: 0;
}

/* 아이콘 블록은 첫 번째 (기본 order:0 명시) */
.wp-block-columns.is-style-process > .wp-block-column > .wp-block-soaam-icon,
.wp-block-columns.is-style-process-shadow > .wp-block-column > .wp-block-soaam-icon {
    order: 0;
}

/* h4, p 등 나머지 콘텐츠는 STEP 레이블 뒤에 */
.wp-block-columns.is-style-process > .wp-block-column > :not(.wp-block-soaam-icon),
.wp-block-columns.is-style-process-shadow > .wp-block-column > :not(.wp-block-soaam-icon) {
    order: 2;
}

/* 프로세스 내부 제목 */
.wp-block-columns.is-style-process > .wp-block-column h4,
.wp-block-columns.is-style-process-shadow > .wp-block-column h4 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #343232;
    margin: 0;
}

/* ── Gold 컬러 변형: STEP 텍스트 & 양쪽 선을 #FFD166으로 ── */
.wp-block-columns.is-style-process.gold > .wp-block-column::before,
.wp-block-columns.is-style-process-shadow.gold > .wp-block-column::before {
    color: #FFD166;
    background-image:
        linear-gradient(#FFD166, #FFD166),
        linear-gradient(#FFD166, #FFD166);
}

/* ===== 목록 (ul/ol) ===== */
.editor-styles-wrapper ul.wp-block-list,
.editor-styles-wrapper ol.wp-block-list {
    padding-left: 1.4em !important;
}

.editor-styles-wrapper ul.wp-block-list {
    list-style-type: disc !important;
}

.editor-styles-wrapper ol.wp-block-list {
    list-style-type: decimal !important;
}

.editor-styles-wrapper ul.wp-block-list li,
.editor-styles-wrapper ol.wp-block-list li {
    display: list-item !important;
    font-size: 18px;
    color: #555560;
    line-height: 28px;
    margin-bottom: 6px;
    word-break: keep-all;
}

/* ===== 지원서 신청 스텝 인디케이터 (sticky) ===== */
#step-indicator-sticky {
    background: #fff;
    padding: 16px 0;
    margin-bottom: 48px;
    /* step_pager_msg absolute 기준점 */
    isolation: isolate;
}

#step-indicator-sticky.is-sticky {
    position: sticky;
    top: calc(var(--admin-bar-height) + var(--top-banner-height) + var(--site-header-height));
    z-index: 80; /* 헤더(100), 메가메뉴(90) 아래 */
}

.admin-bar #step-indicator-sticky.is-sticky {
    top: calc(var(--admin-bar-height) + var(--top-banner-height) + var(--site-header-height));
}



/* 내부 컨테이너 — step_pager_msg의 absolute 기준점 */
#step-indicator-sticky > div {
    position: relative;
}

/* ul_step — 프로세스 블록 STEP 박스 스타일 재활용 */
#step-indicator-sticky ul.ul_step {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 12px;
    counter-reset: ul-step-counter;
}

#step-indicator-sticky .ul_step li {
    counter-increment: ul-step-counter;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #eee;
    border-radius: 12px;
    padding: 16px 0;
    text-align: center;
    min-width: 0;
    transition: background 0.2s;
}

#step-indicator-sticky .ul_step li::before {
    content: 'STEP ' counter(ul-step-counter, decimal-leading-zero);
    order: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:
        linear-gradient(#eeeeee, #eeeeee),
        linear-gradient(#C8C8C8, #C8C8C8);
    background-size: calc(4.5em + 32px) 100%, 100% 3px;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    font-size: 16px;
    font-weight: 700;
    color: #999;
    letter-spacing: 2.72px;
    padding: 4px 0;
    flex-shrink: 0;
}

#step-indicator-sticky .ul_step li a {
    order: 1;
    font-size: 18px;
    font-weight: 700;
    color: #343232;
    text-decoration: none;
    pointer-events: none;
    cursor: default;
    word-break: keep-all;
    line-height: 32px;
}

#step-indicator-sticky .ul_step li.active {
    background: #F05B89;
}

#step-indicator-sticky .ul_step li.active::before,
#step-indicator-sticky .ul_step li.active a {
    color: #fff;
}

#step-indicator-sticky .ul_step li.active::before {
    background-image:
        linear-gradient(#F05B89, #F05B89),
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
}



/* =====================================================
   메시지 카드 (core/group + is-style-message)
   msg_paper.svg 배경 + 스티커 테이프 + 그림자
   ===================================================== */

/* 에디터/프론트 공통 */
.wp-block-group.is-style-message,
.editor-styles-wrapper .wp-block-group.is-style-message {
    background: url('/wp-content/themes/soaam2026/img/msg_paper.svg') no-repeat center / 100% 100% !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1) !important;
    aspect-ratio: 282 / 358;
    position: relative;     /* 스티커 absolute 기준점 */
    overflow: visible;      /* 스티커가 카드 위로 튀어나오도록 */
    display: flex;
    flex-direction: column;
}
.editor-styles-wrapper .wp-block-group.is-style-message h4 {
    font-size: 24px!important;
    margin-top: 6px;
}
.editor-styles-wrapper .wp-block-group.is-style-message p.has-text-align-left {
    line-height: 37px!important;
}
.editor-styles-wrapper .wp-block-group.is-style-message .wp-block-group {
    margin-top: auto!important;
    align-self: flex-end;
}
.editor-styles-wrapper .wp-block-group.is-style-message .wp-block-group p {font-size: 16px!important;}



/* 스티커 테이프 (JS가 .msg-sticker 클래스로 주입) */
.msg-sticker {
    position: absolute;
    width: 80px;
    height: 42px;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* 슬라이더 wrap의 상단 여백 — 스티커가 카드 위로 튀어나올 공간 */
.block-slider-wrap {
    padding-top: 32px;
}

/* =====================================================
   슬라이더 블록 (core/columns + is-style-slider)
   ===================================================== */

/* 에디터: 가로 스크롤로 전체 슬라이드 편집 가능 */
.editor-styles-wrapper .wp-block-columns.is-style-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 24px;
    padding: 8px 0 16px;
}
.editor-styles-wrapper .wp-block-columns.is-style-slider > .wp-block-column {
    flex: 0 0 min(280px, 80%) !important;
    flex-basis: min(280px, 80%) !important;
    min-width: 0 !important;
}

/* 프론트엔드: JS가 .block-slider-wrap으로 감싸고 nav를 하단에 배치 */
.block-slider-wrap {
    /* overflow는 JS가 상위 wp-block-group에 설정 → 여기선 visible */
    width: 100%;       /* flex 자식일 때도 부모 너비에 맞춤 */
    min-width: 0;      /* flex 아이템 축소 허용 */
}
.wp-block-columns.is-style-slider {
    overflow: visible !important;  /* WP 동적 CSS 주입 무력화 */
}
.wp-block-columns.is-style-slider .block-slider__track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.wp-block-columns.is-style-slider .block-slider__track > .wp-block-column {
    flex-shrink: 0;
    min-width: 0;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
}

/* 네비게이션 바 */
.block-slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}
.block-slider__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #F6A8BA;
    background: #fff;
    color: #F05B89;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}
.block-slider__btn:hover {
    background: #F05B89;
    color: #fff;
    transform: scale(1.1);
}
.block-slider__btn:disabled {
    opacity: 0.3;
    cursor: default;
    transform: none;
}
.block-slider__dots {
    display: flex;
    gap: 8px;
}
.block-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FACDDB;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}
.block-slider__dot.is-active {
    background: #F05B89;
    transform: scale(1.4);
}

/* =====================================================
   [account] 숏코드 — 계좌번호 복사 행
   ===================================================== */
.account-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    color: #343232;
    line-height: 1.4;
    margin: 0;
}
.account-row__bank {
    flex: 0 0 100px;
    font-weight: 700;
}
.account-row__number {
    flex: 0 0 220px;
    color: #555560;
    font-variant-numeric: tabular-nums;
}
.account-row__btn {
    flex: 0 0 222px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 555px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    height: 40px;
    padding: 0 24px;
    background: linear-gradient(0deg, #F05B89 30%, #F386A4 112.5%);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
    white-space: nowrap;
    transition:
        transform  0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.28s ease;
}
.account-row__btn:hover {
    color:#fff;
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow: 0 10px 24px 0 rgba(240, 91, 137, 0.38);
}

/* =====================================================
   탭 네비게이션
   서브페이지 이동 / 앵커 이동 공통 탭 스타일
   page.php, template-partners.php 등에서 출력
   ===================================================== */
.tab-header {
    margin:0;
    padding:0;
}
.tab-header__inner {
    padding: 100px 24px 0;    
    border-bottom: 2px solid #F05B89;
}
.page-template-template-history .tab-header__inner {
    padding: 24px 24px 0;
}

/* ACF 폼 submit 영역 */
.acf-form-submit {
    border-top: 1px solid #aaa;
    padding-top: 32px;
    margin-top: 32px;
    text-align: center;
}
.tab-header__title {
    margin-bottom: 56px !important;
}

.tab-nav {
    position: relative;
}
.tab-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}
.tab-nav__item {
    margin: 0;
}
.tab-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px 12px;
    border-radius: 12px 12px 0 0;
    font-size: 18px;
    line-height: 27px;
    font-weight: 700;
    text-decoration: none;
    background: #F6A8BA;
    color: #b40037;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.tab-nav__link:hover {
    background: #F6A8BA;
    color: #fff;
    text-decoration: none;
}
.tab-nav__item.is-active .tab-nav__link {
    background: #F05B89;
    padding: 16px 28px 12px;
    color: #fff;
    position: relative;
}

/* =====================================================
   연혁 탭 — sticky 변형
   id="history-tab" 요소에 적용
   어드민바 + 탑배너 + 헤더 CSS 변수 자동 반영
   ===================================================== */
#history-tab.tab-header {
    position: sticky;
    top: calc(var(--admin-bar-height) + var(--top-banner-height) + var(--site-header-height));
    z-index: 50; /* 헤더(100), 메가메뉴(90) 아래 */
    background: #fff;
    margin: 0;
}

/* 앵커 오프셋 보정: 어드민바 + 탑배너 + 헤더 + 탭(81px) + 여유(24px) */
[id^="era-"] {
    scroll-margin-top: calc(var(--admin-bar-height) + var(--top-banner-height) + var(--site-header-height) + 81px + 24px);
}

/* =====================================================
   더보기 그룹 (core/group + is-style-showmore)
   JS가 초과 아이템을 숨기고 버튼 클릭 시 4개씩 노출
   ===================================================== */

/* JS가 추가하는 클래스 — 초과 아이템 숨김 (Group/Columns 공통) */
.showmore-hidden {
    display: none !important;
}

/* 더보기 버튼 래퍼 정렬 */
.showmore-trigger {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.wp-block-columns.columns-3 > .wp-block-column.expand {
    flex: 0 0 calc(66.66% - 16px) !important;
}

.link a {
    display: block;
    width:100%;
}

:root :where(.wp-block-image figcaption) {
    font-size: 15px; 
    text-align: right;
    margin-top: 1em;
}
/* table 표 */
.editor-styles-wrapper .wp-block-flexible-table-block-table thead,
.result_table thead {
    border-bottom: 3px solid #F05B89;
    border-top: 1px solid #F05B89;
    color:#E24878;
    font-size: 16px;
    text-align: left;
}
.editor-styles-wrapper .wp-block-flexible-table-block-table thead th,
.result_table thead th {
    border-top: 1px solid #F05B89!important;
}
.result_table td, .result_table th,
.editor-styles-wrapper .wp-block-flexible-table-block-table td, 
.editor-styles-wrapper .wp-block-flexible-table-block-table th {
    border:0;
    padding:1em
}
.result_table td,
.editor-styles-wrapper .wp-block-flexible-table-block-table td {
    border-bottom: 1px solid #ccc!important;
}
.result_table td a,
.editor-styles-wrapper .wp-block-flexible-table-block-table td a {
    color:#F05B89;
    text-decoration: underline;
    font-weight: bold;
}
/* 포스트 (글) */

.page-content.editor-styles-wrapper a {
    text-decoration: underline;
    color:#2A54A1;
    font-weight: 700;
}

.page-content.editor-styles-wrapper h2 {
    font-size: 40px !important;
    font-weight: 300 !important;
    line-height: 52px
}

.page-content.editor-styles-wrapper h2:first-child + p{
    font-size: 20px !important;
    color:#636466;
    line-height: 32px;
    margin-bottom: 24px!important    
}

.page-content.editor-styles-wrapper h3{
    font-size: 24px !important;
    color:#F05B89;
    font-weight: 700;
    line-height: 32px;
    margin-top: 24px;
}
.page-content.editor-styles-wrapper h3:first-child {
    margin-top: 0;
}

.page-content.editor-styles-wrapper h4{
    font-size: 20px !important;
    color:#343232;
    font-weight: 700;
    line-height: 32px;
    margin-top: 24px;
}