/**
 * 사선(대각선) 표 셀 — CKEditor 4 diagcell 플러그인 출력용 스타일
 *
 * HTML <table> 에는 대각선 셀이라는 개념이 없으므로 SVG 배경으로 사선을 그리고
 * 텍스트를 두 덩이로 나눠 사선의 위/아래 모서리에 배치한다.
 *
 * 이 파일은 두 곳에서 같이 쓰인다 (규칙을 한 곳에서만 관리하기 위함):
 *   1) 에디터 내부  — include/lib/ckeditor/config.js 의 config.contentsCss
 *   2) 화면 표시    — application/views/include/head_v.php, marketing_head_v.php
 *
 * 관련: include/lib/ckeditor/plugins/diagcell/
 */

/* ─────────────────────────────────────────────────────────────
   [1] 사선 셀이 든 표만 높이를 "확정값"으로 만든다.
   표 셀(td)의 높이는 행 높이에 따라 나중에 정해지는 auto 값이라,
   이 선언이 없으면 셀 안쪽 height:100% 가 해소되지 않아 두 라벨이
   모서리로 벌어지지 않고 위쪽에 붙어버린다.
   표는 지정 높이를 *최소값* 으로 취급하므로 1px 을 줘도 내용에 따라 정상적으로 커진다.
   ───────────────────────────────────────────────────────────── */
table:has(td.diag-cell),
table:has(th.diag-cell) {
	height: 1px;
}

/* ─────────────────────────────────────────────────────────────
   [2] 사선을 그릴 셀
   선택자를 `table td.diag-cell` 로 둔 이유: dashboard.css 의
   `.LegalContent__inner table td { padding:.2em }` 와 명시도가 같으므로
   이 파일이 dashboard.css 뒤에 로드되는 순서로 여백이 적용된다.
   ───────────────────────────────────────────────────────────── */
table td.diag-cell,
table th.diag-cell {
	height: 100%;
	vertical-align: top;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
	padding: .3em .55em;
	min-width: 5em;
}

/* 사선 좌측 하단 → 우측 상단 ( / )
   preserveAspectRatio="none" + vector-effect="non-scaling-stroke" 조합이라
   셀의 가로세로 비율이 어떻든 모서리와 모서리를 정확히 잇고 선 두께는 1px 로 유지된다.
   (linear-gradient 방식은 정사각형이 아닌 셀에서 모서리를 벗어난다) */
td.diag-cell--slash,
th.diag-cell--slash {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='%23999999' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* 사선 좌측 상단 → 우측 하단 ( \ ) */
td.diag-cell--backslash,
th.diag-cell--backslash {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='%23999999' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* ─────────────────────────────────────────────────────────────
   [3] 두 라벨을 셀의 위/아래 모서리로 밀어붙인다.
   흐름(flow) 안에 있는 flex 컨테이너라서 라벨이 길어지면 셀 높이가 함께 늘어난다.
   (라벨을 position:absolute 로 모서리에 붙이면 셀 높이에 기여하지 못해
    긴 라벨이 서로 겹치고 셀 밖으로 삐져나온다 — 실측 확인 후 배제)
   ───────────────────────────────────────────────────────────── */
.diag-cell .diag-cell__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.diag-cell .diag-cell__a,
.diag-cell .diag-cell__b {
	display: block;
	line-height: 1.35em;
}

/* 각 줄을 사선이 만드는 두 삼각형 안으로 밀어붙인다.
   사선 / 은 셀을 좌상 삼각형 + 우하 삼각형으로 나누고, 사선 \ 은 우상 + 좌하로 나눈다.
   (사선의 끝점 쪽으로 붙이면 글자가 선과 겹친다)
   span 에 직접 지정하므로 dashboard.css 의 td[align] { text-align: ... !important } 상속보다 우선한다. */
.diag-cell--slash .diag-cell__a { text-align: left; }      /* 위쪽 = 좌상 삼각형 */
.diag-cell--slash .diag-cell__b { text-align: right; }     /* 아래쪽 = 우하 삼각형 */
.diag-cell--backslash .diag-cell__a { text-align: right; } /* 위쪽 = 우상 삼각형 */
.diag-cell--backslash .diag-cell__b { text-align: left; }  /* 아래쪽 = 좌하 삼각형 */

/* 에디터가 셀 내용을 <p> 로 감싸는 경우 대응
   (dashboard.css 의 .LegalContent__inner table td p { margin-block: 1em } 상쇄) */
.diag-cell p {
	margin: 0 !important;
	padding: 0;
	height: 100%;
	text-align: inherit;
}