* {
    box-sizing: border-box; /* 全局設置，確保所有元素 padding 包含在 width 內 */
}

.mgs-link-block-outer {
    padding: 12px;
    background: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    width: 100%; /* 內框寬度為 100% */
}

/* 統一前台和後台外框樣式 */
.mgs-link-block-outer.front,
.mgs-link-block-outer.editor {
    border: 2px solid #d0d0d0;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.3s ease;
}

.mgs-link-block-outer.front:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.mgs-link-block-outer.editor {
    border: 2px solid #000; /* 後台改為虛線框，並保留原色 */
    background: #fff;
}

.mgs-link-block-outer:hover  {
  border: 2px solid #e0676b; /* 後台改為虛線框，並保留原色 */
}

/* 內部內容框線 */
.mgs-link-block-outer.editor .mgs-link-preview {    
    border-radius: 3px;
	border: 2px dashed #e0676b; /* 後台內部內容框也改為虛線 */	
}

/* 前台內部內容框保持不變 */
.mgs-link-preview {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;		
	cursor: pointer;
}

.mgs-link-block-container { 
	cursor: pointer;
	border: 2px dashed #e0676b; /* 後台內部內容框也改為虛線 */	
}

.mgs-link-preview[data-position="top"] {
    flex-direction: column;
    align-items: stretch;
}

.mgs-link-preview[data-position="bottom"] {
    flex-direction: column;
    align-items: stretch;
}

.mgs-link-preview[data-position="left"] {
    flex-direction: row;
    align-items: flex-start;
}

.mgs-link-preview[data-position="right"] {
    flex-direction: row-reverse;
    align-items: flex-start;
}

/* 圖片容器樣式 */
.mgs-link-image {
    margin: 5px;
    width: auto; /* 移除固定寬度，讓圖片自適應 */
    flex-shrink: 0; /* 防止圖片被壓縮 */
    box-sizing: border-box;
}

/* 根據圖片位置調整間距 */
.mgs-link-preview[data-position="top"] .mgs-link-image {
    margin-bottom: 0px; /* 5px + 10px 間距 */
}

.mgs-link-preview[data-position="bottom"] .mgs-link-image {
    margin-top: 10px; /* 5px + 10px 間距 */
}

.mgs-link-preview[data-position="left"] .mgs-link-image {
    margin-right: 10px; /* 5px + 10px 間距 */
    margin-bottom: 0;
}

.mgs-link-preview[data-position="right"] .mgs-link-image {
    margin-left: 10px; /* 5px + 10px 間距 */
    margin-top: 0;
}

/* 圖片本身樣式 */
.mgs-link-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.mgs-link-content {
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;	
}

.mgs-link-text {
    flex: 1;
    box-sizing: border-box;
    padding: 10px 20px 0px;
}

.mgs-link-content h3 {
    margin: 0 0 5px;
    font-weight: bold;
    word-break: break-word;
    overflow-wrap: break-word;
}

.mgs-link-content p {
    margin: 0;
    color: #666;
    word-break: break-word;
    overflow-wrap: break-word;
}

.mgs-link-content a {
    text-decoration: none;
    color: inherit;
}

/* 編輯器占位符樣式 */
.mgs-link-preview [data-rich-text-placeholder] {
    color: #999;
}

@media (max-width: 768px) {
    .mgs-link-preview[data-position="left"],
    .mgs-link-preview[data-position="right"] {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mgs-link-image {
        margin: 0 0 10px 0;
    }
    .mgs-link-image img {
        -webkit-transform: translateZ(0); /* 修復 Safari 渲染問題 */
        transform: translateZ(0);
    }
}