.elementor-kit-17{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"ChillGSans-Medium-Full";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"ChillGSans-Medium-Full";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"ChillGSans-Medium-Full";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"ChillGSans-Medium-Full";--e-global-typography-accent-font-weight:500;}.elementor-kit-17 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//**
 * 🎨 JUNJUN.DESIGN 全局视觉框架 (经典稳定版)
 * 功能：实现全站统一的圆角外框、内容内缩、以及移动端底色守护
 */

:root {
    /* [ 1. 核心视觉参数 ] */
    --frame-size: 8px;           /* 黄色外框的视觉厚度 */
    --frame-color: #FDD746;      /* 品牌主题色 (已更新为你常用的色号) */
    --frame-radius: 40px;        /* 圆角弧度：40px 是高级感的灵魂 */

    /* [ 2. 内容内缩微调 ] */
    /* 如果觉得文字/图片离边框太近，就调大这两个正数；反之调小或设为负数 */
    --shrink-x: -4px;            /* 左右内缩修正：负数会让内容更靠边 */
    --shrink-y: -8px;            /* 上下内缩修正：负数会让内容更靠顶/底 */
}

/* ============================================================
   第一部分：全站背景底色
   ============================================================ */
html {
    /* 确保网页在拉不动或者回弹时，露出来的底色也是品牌黄 */
    background-color: var(--frame-color) !important;
}

/* ============================================================
   第二部分：全屏圆角“镂空”遮罩 (body::after)
   ============================================================ */
body::after {
    content: "";
    position: fixed;
    
    /* 定义“洞口”的位置：基础边框宽度 + 系统安全区(适配iPhone刘海) */
    top: calc(var(--frame-size) + env(safe-area-inset-top));
    bottom: calc(var(--frame-size) + env(safe-area-inset-bottom));
    left: var(--frame-size);
    right: var(--frame-size);
    
    border-radius: var(--frame-radius);
    
    /* 核心黑科技：用 200vmax 的巨大投影把洞口之外的区域全部封死为黄色 */
    box-shadow: 0 0 0 200vmax var(--frame-color);
    
    /* 确保遮罩只是视觉上的，不影响鼠标点击网页内容 */
    pointer-events: none;
    z-index: 999999;
}

/* ============================================================
   第三部分：物理布局内缩 (Padding)
   ============================================================ */
/* 这里负责把网页里的内容往中间“挤”，确保内容不被圆角遮住 */
#page, .site-main, body {
    /* 左右内缩量 */
    padding-left: calc(var(--frame-size) + var(--shrink-x)) !important;
    padding-right: calc(var(--frame-size) + var(--shrink-x)) !important;
    
    /* 上下内缩量：自动包含手机安全区高度 */
    padding-top: calc(var(--frame-size) + env(safe-area-inset-top) + var(--shrink-y)) !important;
    padding-bottom: calc(var(--frame-size) + env(safe-area-inset-bottom) + var(--shrink-y)) !important;
    
    box-sizing: border-box !important;
}

/* ============================================================
   第四部分：移动端“下巴”颜色守护 (body::before)
   ============================================================ */
body::before {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* 1px 足够让手机浏览器识别到这里的颜色，从而自动调整系统工具栏颜色 */
    height: 1px; 
    
    background-color: var(--frame-color) !important; 
    
    z-index: 0; 
    pointer-events: none;
    
    /* 开启 GPU 渲染加速，确保渲染优先级 */
    transform: translateZ(0);
}

/* ============================================================
   第五部分：编辑器兼容
   ============================================================ */
/* 防止在 Elementor 编辑后台因为遮罩导致选不中组件 */
body.elementor-editor-active::after {
    display: none;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'ChillGSans-Medium-Full';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://www.junjun.design/wp-content/uploads/2026/04/ChillGSans_Medium.woff2') format('woff2');
}
/* End Custom Fonts CSS */