/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 24 2026 | 09:19:24 */
/* ==========================================================================
   ESIMKOREA.net Elementor Blog Post Styles (Final for HTML Widget)
   ========================================================================== */

/* 1. 디자인 토큰 (CSS 변수) */
:root {
  /* Point Color */
  --ew-post-primary: #FE3835;
  --ew-post-accent-light: #FF706D;
  --ew-post-accent-bg: #FFE7E6;
  
  /* Navy Scale */
  --ew-post-navy-900: #171940; --ew-post-navy-700: #292B4F; --ew-post-navy-500: #45465C;
  --ew-post-navy-300: #8D8EA2; --ew-post-navy-100: #D9DAE1; --ew-post-navy-50: #F1F1F8;

  /* Gray Scale */
  --ew-post-gray-900: #222222; --ew-post-gray-100: #F4F4F4; --ew-post-white: #FFFFFF;

  /* System Colors */
  --ew-post-system-red: #FF6262; --ew-post-system-green: #3CD386;

  /* Non-color tokens */
  --ew-post-radius-lg: 16px;
  --ew-post-space-2: 8px; --ew-post-space-3: 12px; --ew-post-space-4: 16px;
  --ew-post-space-5: 20px; --ew-post-space-6: 24px; --ew-post-space-8: 32px;
  --ew-post-space-9: 36px;
  --ew-post-h1: 36px;
  --ew-post-h2: 28px;
  --ew-post-h3: 22px;
  --ew-post-h4: 18px;
  --ew-post-body: 16px;
  --ew-post-small: 14px;
}

/* 2. 테마의 기본 구조에 직접 스타일 적용 */

/* 테마 H1 스타일 덮어쓰기 */
.post-detail h1.entry-title {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--ew-post-h1) !important;
    color: var(--ew-post-navy-900) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
}
@media (max-width: 768px) {
    .post-detail h1.entry-title {
        font-size: 28px !important;
    }
}

/* .ew-post 컨테이너 내부의 모든 요소에 기본 폰트 적용 */
.ew-post,
.ew-post p,
.ew-post li {
    font-family: 'Inter', sans-serif;
    color: var(--ew-post-navy-700);
    font-size: var(--ew-post-body);
    line-height: 1.7;
}

/* .ew-post 내부 헤딩 스타일 */
.ew-post h2, .ew-post h3, .ew-post h4 {
    font-family: 'Inter', sans-serif !important;
    color: var(--ew-post-navy-900) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
.ew-post h2 { font-size: var(--ew-post-h2) !important; margin-top: var(--ew-post-space-9) !important; margin-bottom: var(--ew-post-space-4) !important; }
.ew-post h3 { font-size: var(--ew-post-h3) !important; margin-top: var(--ew-post-space-6) !important; margin-bottom: var(--ew-post-space-3) !important; font-weight: 600 !important; }
.ew-post h4 { font-size: var(--ew-post-h4) !important; margin-top: var(--ew-post-space-5) !important; margin-bottom: var(--ew-post-space-2) !important; font-weight: 600 !important; }

.ew-post a { color: var(--ew-post-primary); text-decoration: underline; }
.ew-post a:hover { color: var(--ew-post-accent-light); }

/* 4. 컴포넌트 스타일 */

/* Buttons */
.ew-post .post-btn { background: var(--ew-post-primary); color: var(--ew-post-white); border-radius: 999px; padding: 12px 28px; font-weight: 600; font-size: 16px; border: none; text-decoration: none; display: inline-block; }
.ew-post .post-btn:hover { background: var(--ew-post-accent-light); }
.ew-post .post-btn--outline { background: transparent; color: var(--ew-post-primary); border: 2px solid var(--ew-post-primary); border-radius: 999px; padding: 12px 28px; font-weight: 600; text-decoration: none; display: inline-block; }
.ew-post .post-btn--outline:hover { background: var(--ew-post-primary); color: var(--ew-post-white); }

/* Separator */
.ew-post hr { border: none; background-color: var(--ew-post-navy-100); height: 1.5px; max-width: 100px; margin: var(--ew-post-space-9) auto; }

/* Table (Unified for Gutenberg & Elementor) */
.ew-post figure.wp-block-table.post-table {
    display: block;
    width: 100%; /* 부모 요소의 너비를 100% 차지하도록 설정 */
    margin-top: var(--ew-post-space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ew-post-navy-100);
    border-radius: var(--ew-post-radius-lg);
    background: var(--ew-post-white);
    padding: 0;

}

/* 래퍼 안의 테이블 자체는 최소 너비만 설정합니다. */
.ew-post figure.wp-block-table.post-table table {
    width: 100%;
    min-width: 600px; /* 테이블 내용이 아무리 적어도 최소 600px 너비를 유지 */
    border-collapse: collapse;
    font-size: 15px;
    margin: 0;
	table-layout: auto
}

/* 모든 셀(th, td)에 공통 스타일 적용 */
.ew-post .post-table th, 
.ew-post .post-table td {
    border: none !important;
    vertical-align: middle;
    padding: 14px 16px !important;
    background-color: transparent !important; /* 내부 셀 배경은 투명하게 */
}

/* 헤더 셀(th) 스타일 */
.ew-post .post-table thead th {
    background: var(--ew-post-navy-50) !important; /* 헤더 배경색은 유지 */
    color: var(--ew-post-navy-900);
    font-weight: 700;
    text-align: left;
    border-bottom: 2px solid var(--ew-post-primary) !important;
}

/* 본문 셀(td) 스타일 */
.ew-post .post-table tbody td {
    border-top: 1px solid var(--ew-post-navy-100) !important;
    background-color: var(--ew-post-white) !important; /* 모든 행의 배경을 흰색으로 강제 통일 */
}
/* 
  ‘vertical-align-top’ 클래스가 적용된 테이블의 모든 셀(th, td)을
  수직 상단으로 정렬합니다.
*/
.ew-post figure.wp-block-table.vertical-align-top th,
.ew-post figure.wp-block-table.vertical-align-top td {
    vertical-align: top !important;
}

/* Image */
.ew-post figure { margin: var(--ew-post-space-8) auto;
	overflow: hidden; border-radius: var(--ew-post-radius-lg);
	border: 1px solid var(--ew-post-navy-100);
	display: table;
}
.ew-post figure img { display: block; width: 100%; height: auto; }
.ew-post figure figcaption { background-color: var(--ew-post-navy-50); padding: var(--ew-post-space-3) var(--ew-post-space-4); font-size: var(--ew-post-small); color: var(--ew-post-navy-500); text-align: center; border-top: 1px solid var(--ew-post-navy-100); display: table-caption; caption-side: bottom; }

/* Info Box */
.ew-post .ew-info-box > *:last-child {
    margin-bottom: 0 !important;
}
.ew-post .ew-info-box { background-color: var(--ew-post-navy-50); padding: var(--ew-post-space-6); border-radius: var(--ew-post-radius-lg); margin: var(--ew-post-space-8) 0; }
.ew-post .ew-info-box h2:first-child,
.ew-post .ew-info-box h3:first-child,
.ew-post .ew-info-box h4:first-child { margin-top: 0!important; }
.ew-post .ew-info-box ul { padding-left: var(--ew-post-space-6); margin-bottom: 0; }

/* ==========================================================================
   Pros & Cons Box Styles (Margin Version for Max Compatibility)
   ========================================================================== */

/* 전체 Pros & Cons 섹션 레이아웃 */
.ew-post .ew-pros-cons-box {
    grid-template-columns: 1fr 1fr;
    margin: var(--ew-post-space-8) 0;
    column-gap: var(--ew-post-space-8);
    row-gap: var(--ew-post-space-6); /* 모바일 뷰를 위한 행 간격 */
    background-color: transparent;
    padding: 0;
    border: none;
}

/* Pros와 Cons 각각의 제목(h4) 스타일 */
.ew-post .ew-pros-cons-box h4 {
    margin-top: 0;
    margin-bottom: var(--ew-post-space-4);
    font-size: var(--ew-post-h3);
    color: var(--ew-post-navy-900);
}

/* 모든 리스트의 기본 스타일 초기화 */
.ew-post .ew-pros-cons-box ul {
    padding-left: 0;
    margin: 0;
    list-style-type: none;
}

/* 각 리스트 아이템(li)의 스타일 */
.ew-post .ew-pros-cons-box li {
    padding-left: calc(1.2em + var(--ew-post-space-2));
    position: relative;
    white-space: normal;
}

.ew-post .ew-pros-cons-box li + li {
    margin-top: var(--ew-post-space-3); /* 12px의 간격 추가 */
}

/* 각 리스트 아이템 앞에 이모지 아이콘 추가 */
.ew-post .ew-pros-cons-box li::before {
    position: absolute;
    left: 0;
    top: -1.5px;
    font-size: 1em;
	
}

/* Pros 리스트에 체크마크 이모지 적용 */
.ew-post .ew-pros-cons-box .ew-pros li::before {
    content: '✅';
}

/* Cons 리스트에 X마크 이모지 적용 */
.ew-post .ew-pros-cons-box .ew-cons li::before {
    content: '❌';
}

/* 모바일 화면에서는 1열로 변경 */
@media (max-width: 600px) {
  .ew-post .ew-pros-cons-box {
    grid-template-columns: 1fr;
  }
}

/* Verdict Box & CTA Banner */
.ew-post .ew-verdict-box,
.ew-post .ew-cta-banner { background: linear-gradient(135deg, var(--ew-post-navy-900), var(--ew-post-navy-700)); color: var(--ew-post-white); padding: var(--ew-post-space-8); border-radius: var(--ew-post-radius-lg); margin: var(--ew-post-space-9) 0; }
.ew-post .ew-verdict-box h2, .elementor-widget-html .ew-post .ew-verdict-box p, .elementor-widget-html .ew-post .ew-verdict-box li,
.ew-post .ew-cta-banner h2, .elementor-widget-html .ew-post .ew-cta-banner p { color: var(--ew-post-white) !important; margin: 0; }
.ew-post .ew-cta-banner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ew-post-space-4); }

/* 5. 반응형 스타일 */
@media (max-width: 768px) {
.ew-post .ew-pros-cons-box { grid-template-columns: 1fr; }
}

@media (min-width: 768px) {
.ew-post .ew-cta-banner {
        flex-direction: row; justify-content: space-between; align-items: center; text-align: left;
    }
.ew-post .ew-cta-banner .wp-block-buttons {
        width: auto; margin: 20px 0px 0px 0px; flex-shrink: 0;
    }
}

/* ==========================================================================
   Rank Math FAQ Block Custom Styles
   ========================================================================== */

/* 전체 FAQ 블록의 기본 여백 설정 */
.ew-post .rank-math-block {
    margin-top: var(--ew-post-space-9);
}

/* 개별 Q&A 아이템 (하나의 세트처럼 보이도록) */
.ew-post .rank-math-list-item {
    background-color: var(--ew-post-navy-50);
    padding: var(--ew-post-space-6);
    border-radius: var(--ew-post-radius-lg);
    border: 1px solid var(--ew-post-navy-100);
}

/* 첫 번째가 아닌 모든 Q&A 아이템의 위쪽에만 여백 추가 */
.ew-post .rank-math-list-item + .rank-math-list-item {
    margin-top: var(--ew-post-space-4); /* 16px의 간격 */
}

/* 질문(h3) 스타일 */
.ew-post .rank-math-question {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--ew-post-h3) !important;
    color: var(--ew-post-navy-900) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 var(--ew-post-space-3) 0 !important;
    padding-left: calc(1em + var(--ew-post-space-3)) !important;
    position: relative;
}

/* 질문 앞에 'Q.' 아이콘 추가 */
.ew-post .rank-math-question::before {
    content: 'Q.';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ew-post-primary);
    font-weight: 700;
}

/* 답변(div) 스타일 */
.ew-post .rank-math-answer {
    color: var(--ew-post-navy-700);
    padding-left: calc(1em + var(--ew-post-space-3)) !important;
    margin: 0;
}

/* 답변 내부의 문단(p) 스타일 초기화 */
.ew-post .rank-math-answer p {
    margin: 0 0 var(--ew-post-space-4) 0;
    padding: 0;
    line-height: 1.7;
}
.ew-post .rank-math-answer p:last-child {
    margin-bottom: 0;
}

/* EZ-TOC 플러그인이 추가하는 불필요한 span 태그 숨기기 */
.ew-post .rank-math-question .ez-toc-section {
    display: none;
}

/* ==========================================================================
   Immage Banner Design
   ========================================================================== */

.ew-post figure.wp-block-image.img-bnr {
    margin: var(--ew-post-space-8) auto; /* 위아래 여백은 유지 */
    overflow: visible; /* 숨김 처리 해제 */
    border-radius: 0 !important; /* Radius 제거 */
    border: none !important; /* 테두리 제거 */
}

.ew-post figure img {
display: block;
width: 100%;
height: auto;
}
.ew-post figure figcaption {
background-color: var(--ew-post-navy-50);
padding: var(--ew-post-space-3) var(--ew-post-space-4);
font-size: var(--ew-post-small);
color: var(--ew-post-navy-500);
text-align: center;
border-top: 1px solid var(--ew-post-navy-100);
display: table-caption;
caption-side: bottom;
}
/* ==========================================================================
   Responsive Image Banner Styles (Desktop/Mobile Toggle)
   ========================================================================== */

/* 
  1. 데스크톱용 배너 기본 설정:
  - 평소에는 보이다가 (block)
  - 화면이 768px 이하로 좁아지면 숨겨집니다 (none).
*/
.ew-post .img-bnr-desktop {
    display: block; /* 기본적으로 보임 */
}
.ew-post .img-bnr-mobile {
    display: none; /* 기본적으로 숨김 */
}

/* 
  2. 모바일 화면 (768px 이하)에 대한 미디어 쿼리:
  - 데스크톱 배너는 숨기고 (none)
  - 모바일 배너를 보여줍니다 (block).
*/
@media (max-width: 768px) {
    .ew-post .img-bnr-desktop {
        display: none !important; /* 모바일에서 데스크톱 배너 숨김 */
    }
    .ew-post .img-bnr-mobile {
        display: block !important; /* 모바일에서 모바일 배너 보임 */
    }
}

/* ==========================================================================
   Connectivity Lab - Math Formula Styles (Integrated)
   ========================================================================== */

/* 수식 카드 전체 컨테이너 */
.ew-post .ew-math-card {
    background-color: var(--ew-post-navy-50); /* FAQ/Info 박스와 동일한 배경 */
    border-radius: var(--ew-post-radius-lg);
    padding: var(--ew-post-space-8) var(--ew-post-space-4);
    margin: var(--ew-post-space-8) 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease;
}

/* 수식 본체 텍스트 스타일 */
.ew-post .math-formula {
    /* 수식의 신뢰감을 위해 Serif 체 적용, 없으면 기본 Serif 사용 */
    font-family: 'Noto Serif', 'Georgia', serif !important;
    font-style: italic;
    font-size: 1.5rem !important; /* 기본 본문보다 크게 강조 */
    color: var(--ew-post-navy-900);
    margin: 0 !important;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

/* 첨자(Subscript) 정밀 조정 */
.ew-post .math-formula sub {
    font-family: 'Inter', sans-serif; /* 첨자는 가독성을 위해 다시 산세리프 */
    font-size: 0.55em;
    font-style: normal;
    color: var(--ew-post-navy-900); /* 가독성을 해치지 않는 선에서 연하게 */
    vertical-align: -0.4em;
    margin-left: 2px;
}

/* 등호(=)와 플러스(+) 기호에 포인트 컬러 (선택 사항) */
/* 수식 내의 연산자만 강조하고 싶을 때 사용하세요 */
.ew-post .math-formula {
    position: relative;
}

/* 모바일 대응: 텍스트가 넘치지 않도록 조정 */
@media (max-width: 768px) {
    .ew-post .ew-math-card {
        padding: var(--ew-post-space-6) var(--ew-post-space-4);
    }
    .ew-post .math-formula {
        font-size: 1.15rem !important;
    }
}


/* ==========================================================================
   Connectivity Lab - test vedio & result screenshot 
   ========================================================================== */


/* 부모 컨테이너: 가로 정렬 및 중앙 배치 */
.shorts-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-around !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 770px !important;
    margin: 20px auto !important;
}

/* 자식 요소(영상 박스, 이미지 블록): 가로 너비 40% 고정 */
.shorts-container > div, 
.shorts-container > figure {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    margin: 0 !important;
}

/* 이미지 블록: 영상과 똑같은 9:16 비율 박스로 강제 */
.shorts-container .wp-block-image {
    position: relative !important;
    padding-bottom: 177.77% !important;
    height: 0 !important;
    overflow: hidden !important;
    border-radius: 12px;
}

/* 이미지 블록 안의 실제 이미지: 박스에 가득 채우기 */
.shorts-container .wp-block-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ==========================================================================
   New CTA Banner Component (V3 - Link Style Fixed)
   ========================================================================== */

/* 전체 배너 컨테이너 */
.cta-banner-purple {
    background-image: linear-gradient(105deg, #4F46E5, #7C3AED, #A855F7);
    border-radius: var(--ew-post-radius-lg, 16px);
    padding: var(--ew-post-space-8, 32px);
    margin: var(--ew-post-space-9, 36px) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ew-post-space-4, 16px);
}

/* 상단 정보 태그 */
.cta-banner-purple .cta-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--ew-post-space-2, 8px);
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: var(--ew-post-small, 14px);
    font-weight: 500;
    color: var(--ew-post-white, #FFFFFF);
    margin-bottom: var(--ew-post-space-2, 8px);
}

/* 메인 제목(h2) */
.cta-banner-purple h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--ew-post-white, #FFFFFF) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* 하단 기능 목록 */
.cta-banner-purple .cta-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ew-post-space-4, 16px);
    font-size: var(--ew-post-small, 14px);
    color: rgba(255, 255, 255, 0.8);
}
.cta-banner-purple .cta-features span::before {
    content: '✓';
    color: rgba(255, 255, 255, 0.9);
    margin-right: var(--ew-post-space-2, 8px);
    font-weight: 600;
}

/* "Get Started" 버튼 */
.cta-banner-purple .wp-block-button.cta-button .wp-block-button__link {
    background-color: var(--ew-post-white, #FFFFFF) !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: #5345E7 !important; /
    font-weight: 700 !important;
    text-decoration: none !important;
}
.cta-banner-purple .wp-block-button.cta-button .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    color: #4338CA !important; 
    text-decoration: none !important; 
}

/* 데스크톱 레이아웃 */
@media (min-width: 768px) {
    .cta-banner-purple {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    .cta-banner-purple .wp-block-buttons {
        margin-left: var(--ew-post-space-6, 24px);
    }
    .cta-banner-purple .cta-features {
        justify-content: flex-start;
    }
}