.editor-styles-wrapper .link-preview-wrapper,
.link-preview-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 1em 0;
  container: link-preview / inline-size;
}
.editor-styles-wrapper .link-preview-caption ,
.link-preview-caption {
  font-size: 13px;
  color: var(--wp--preset--color--black);
  margin-top: 4px;
  text-align: left;
}
.editor-styles-wrapper .link-preview-card,
.link-preview-card {
  display: flex;
  border: 1px solid var(--wp--preset--color--accent-6);
  border-radius: 10px;
  overflow: hidden;
  max-height: 7em;
  max-width: 100%;
  text-decoration: none;
  background: var(--wp--preset--color--white);
  transition: transform 0.2s ease-in-out;
}
.editor-styles-wrapper .link-preview-card:hover,
.link-preview-card:hover {
  transform: translate(-3px, -3px);
  background-color: var(--wp--preset--color--accent-1);
  box-shadow: 3px 3px 5px var(--wp--preset--color--accent-6);
}

.editor-styles-wrapper .link-preview-card .thumbnail,
.link-preview-card .thumbnail {
  width: 100%;
  max-width: 15em;
  overflow: hidden;
  aspect-ratio: 2 / 1;
}

.editor-styles-wrapper .link-preview-card .thumbnail img,
.link-preview-card .thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: unset !important;
  box-shadow: unset !important;
}

.link-preview-card .content {
  padding: 10px;
  flex: 1;
}

.link-preview-card .title {
  font-weight: bold;
  margin-bottom: 5px;
}
.link-preview-card .desc {
  color: var(--wp--preset--color--accent-2);
  font-size: 14px;
  margin-bottom: 5px;
}
.link-preview-card .url {
  font-size: 12px;
  color: var(--wp--preset--color--black);
  word-break: break-all;
  overflow-wrap: anywhere;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

@container link-preview (max-width: 600px) {
  .editor-styles-wrapper .link-preview-card,
  .link-preview-card {
  flex-direction: column;
  max-height: initial;
  }
  .editor-styles-wrapper .link-preview-card .thumbnail,
  .link-preview-card .thumbnail {
  /* max-height: 15em; */
  max-width: 100%;
  }

  /* 예외 처리: .img-die 안에서는 원래대로 */
  /*
  .img-die .link-preview-card {
  flex-direction: row;
  }

  .img-die .link-preview-card .thumbnail img {
    max-width: 5em;
  }
  */
}

.link-preview-wrapper.link-preview-ratio-1-1.link-preview-layout-default .link-preview-card,
.link-preview-wrapper.link-preview-ratio-2-3.link-preview-layout-default .link-preview-card {
  flex-direction: row;
}






/* ----------
   썸네일 비율
    ---------- */

.link-preview-wrapper.link-preview-ratio-2-1.link-preview-layout-default .thumbnail{
	aspect-ratio:2/1;
}

.link-preview-wrapper.link-preview-ratio-4-1.link-preview-layout-default .thumbnail{
	aspect-ratio:4/1;
}

.link-preview-wrapper.link-preview-ratio-16-9.link-preview-layout-default .thumbnail{
	aspect-ratio:16/9;
}

.link-preview-wrapper.link-preview-ratio-1-1.link-preview-layout-default .thumbnail,
.link-preview-wrapper.link-preview-ratio-2-3.link-preview-layout-default .thumbnail{
	width: auto;
	max-width: none;
	height: 10em;
	flex: 0 1 auto;
}

.link-preview-wrapper.link-preview-ratio-1-1.link-preview-layout-default .thumbnail{
	aspect-ratio:1/1;
}

.link-preview-wrapper.link-preview-ratio-2-3.link-preview-layout-default .thumbnail{
	aspect-ratio:2/3;
}

.link-preview-wrapper.link-preview-ratio-2-1.link-preview-layout-default .link-preview-card,
.link-preview-wrapper.link-preview-ratio-2-3.link-preview-layout-default .link-preview-card,
.link-preview-wrapper.link-preview-ratio-4-1.link-preview-layout-default .link-preview-card,
.link-preview-wrapper.link-preview-ratio-1-1.link-preview-layout-default .link-preview-card,
.link-preview-wrapper.link-preview-ratio-16-9.link-preview-layout-default .link-preview-card {
	max-height: none;
}


/* ----------------------------------------
   content 위치: 커버
   ---------------------------------------- */

.link-preview-wrapper.link-preview-layout-cover .link-preview-card{
	position:relative;
	display:block;
	overflow:hidden;
	height: 100%;
	max-height: 100%;
	aspect-ratio: 2 / 1;
}

.link-preview-wrapper.link-preview-layout-cover .thumbnail{
	position:absolute;
	inset:0;
	margin:0;
	aspect-ratio: auto;
	max-width: 100%;
}

.link-preview-wrapper.link-preview-layout-cover .content {
	display: flex;
	box-sizing: border-box;
	height: 100%;
	opacity: 0;
	transition: opacity 0.1s ease-in-out;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	z-index:1;
	padding: 10px;
	flex-direction: column;
	justify-content: flex-end;
}
.link-preview-wrapper.link-preview-layout-cover .content:before{
	content:"";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top,var(--wp--preset--color--base) 30%, transparent);
	
}

.link-preview-wrapper.link-preview-layout-cover .content:hover {
	opacity: 1;
}

.link-preview-wrapper.link-preview-layout-cover.link-preview-ratio-2-1 .link-preview-card{
	aspect-ratio:2 / 1;
}

.link-preview-wrapper.link-preview-layout-cover.link-preview-ratio-2-3 .link-preview-card{
	aspect-ratio: 2 / 3;
}

.link-preview-wrapper.link-preview-layout-cover.link-preview-ratio-4-1 .link-preview-card{
	aspect-ratio:4/1;
}

.link-preview-wrapper.link-preview-layout-cover.link-preview-ratio-1-1 .link-preview-card{
	aspect-ratio:1/1;
}

.link-preview-wrapper.link-preview-layout-cover.link-preview-ratio-16-9 .link-preview-card{
	aspect-ratio:16/9;
}


/* -------- 에디터 확인용 -------- */
.editor-styles-wrapper .link-preview-wrapper.link-preview-layout-cover.link-preview-ratio-2-3:before {
	content: "2-3 비율 커버 링크 미리보기 : width: 100% 기준 업로드 유의";
    position: absolute;
    z-index: 10;
    background: red;
}