/* ボックス全体のスタイル */
.wp-block-my-folder-box-hybrid {
    position: relative;
    box-sizing: border-box;
    
    border: 2px solid #000;
    border-radius: 0 2px 2px 4px;
    padding: 1.5em 1em 1em 1em;
    margin-top: 2.5em; 
    margin-bottom: 1.5em;
    background-color: #fff;
    
    /* ボックスの影 */
    box-shadow: 4px 4px 2px #444;
    
    /* 影SVGを背面に回す設定 */
    display: flow-root;
    z-index: auto;
}

/* SVG共通スタイル */
.wp-block-my-folder-box-hybrid .tab-svg {
    position: absolute;
    width: 100px; /* タブの幅 */
    height: 27px; /* タブの高さ */
    overflow: visible; /* 線の太さがはみ出ても表示する */
}

/* 1. 影用のSVG (背面に配置) */
.wp-block-my-folder-box-hybrid .tab-shadow {
    /* 右に6px、下に6pxずれるように配置 */
    /* top: -27px + 6px = -21px */
    top: -21px;
    /* left: -2px + 6px = 4px */
    left: 4px;  
    
    z-index: -1;
}

/* 影の色 */
.wp-block-my-folder-box-hybrid .tab-shadow path {
    fill: #444;
    filter: blur(1px);
}

/* 2. つまみ本体のSVG (前面に配置) */
.wp-block-my-folder-box-hybrid .tab-body {
    /* 
      1px食い込ませて隙間をなくす配置
      (-27pxではなく-26px)
    */
    top: -26px;
    
    /* 左の枠線(-2px)に合わせて配置 */
    left: -2px; 
    
    z-index: 1;
}

/* コンテンツエリア */
.wp-block-my-folder-box-hybrid .folder-content {
    position: relative;
    z-index: 2;
}