/* KTAXHELP 관계도 Relation (kt-rel-*) — 손으로 관리하는 파일(생성 스크립트 없음). JS 없음.
   마크업은 변환기 `[!relation]`(module/wp_editor components.render_relation)이 만든다. 규칙: design/components/Relation.
   배치: is-row(개체 2~3개를 가로 한 줄, 세 개체는 좁은 폭에서 세로로 쌓음) | is-grid(2×2: 1 왼쪽 위, 2 오른쪽 위, 3 왼쪽 아래, 4 오른쪽 아래).
   연결 칸 이름은 두 개체 번호(is-12, is-13 …). 정방향(앞 번호 → 뒤 번호)은 오른쪽·아래, is-back은 왼쪽·위를 가리킨다.
   `.entry-content ` 접두사로 테마 본문 규칙(ul > li 점, .inside-article p 등)보다 특정성을 높였다.
   글에 `kt-rel` 이 들어 있을 때만 functions.php 가 불러온다. */
.entry-content .kt-rel{--rel-line:#8a97b3;--rel-w:1.5px;--rel-nw:clamp(5.5rem,26cqi,10.5rem);margin:var(--space-10) 0;padding:20px var(--callout-pad) 18px;container-type:inline-size;max-width:820px;background:var(--surface);border:1px solid var(--line-callout);border-radius:var(--radius-xl);word-break:keep-all;-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}
.entry-content .kt-rel.has-3{--rel-nw:clamp(5.5rem,17cqi,8rem)}
.entry-content .kt-rel.has-3 .kt-rel-l{padding:0 8px}
.entry-content .kt-rel-title{margin:0 0 22px;padding:0;font-size:16px;font-weight:700;line-height:1.5;color:var(--ink);text-align:left}
.entry-content .kt-rel-map{display:grid;grid-template-columns:var(--rel-nw) minmax(0,1fr) var(--rel-nw);align-items:center}
.entry-content .kt-rel.has-3 .kt-rel-map{grid-template-columns:var(--rel-nw) minmax(0,1fr) var(--rel-nw) minmax(0,1fr) var(--rel-nw)}
.entry-content .kt-rel.is-grid .kt-rel-map{grid-template-rows:auto minmax(5.5rem,auto) auto}
/* 개체 */
.entry-content .kt-rel-n{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:4.5rem;padding:12px 10px;box-sizing:border-box;border-radius:var(--radius-md);background:var(--surface-muted);text-align:center}
.entry-content .kt-rel-n>b{font-size:16px;font-weight:700;line-height:1.4;color:var(--ink)}
.entry-content .kt-rel-n>span{font-size:12.5px;font-weight:600;line-height:1.4;letter-spacing:0;color:var(--ink-muted)}
/* 자리: 가로 한 줄 */
.entry-content .kt-rel.is-row .kt-rel-n,.entry-content .kt-rel.is-row .kt-rel-l{grid-row:1}
.entry-content .kt-rel.is-row .is-n1{grid-column:1}
.entry-content .kt-rel.is-row .is-12{grid-column:2}
.entry-content .kt-rel.is-row .is-n2{grid-column:3}
.entry-content .kt-rel.is-row .is-23{grid-column:4}
.entry-content .kt-rel.is-row .is-n3{grid-column:5}
/* 자리: 2×2. 세로 연결 칸은 가운데 열까지 걸쳐 값을 선 옆에 쓴다. */
.entry-content .kt-rel.is-grid .is-n1{grid-area:1/1}
.entry-content .kt-rel.is-grid .is-n2{grid-area:1/3}
.entry-content .kt-rel.is-grid .is-n3{grid-area:3/1}
.entry-content .kt-rel.is-grid .is-n4{grid-area:3/3}
.entry-content .kt-rel.is-grid .is-12{grid-area:1/2}
.entry-content .kt-rel.is-grid .is-34{grid-area:3/2}
.entry-content .kt-rel.is-grid .is-13{grid-area:2/1/3/3}
.entry-content .kt-rel.is-grid .is-24{grid-area:2/2/3/4}
/* 연결: 목록 하나 = 두 개체 사이, 항목 하나 = 화살표 하나 */
.entry-content .kt-rel-l{display:flex;flex-direction:column;justify-content:center;gap:10px;margin:0;padding:0 12px;list-style:none}
.entry-content .kt-rel-e{--c:var(--rel-line);--w:var(--rel-w);position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;padding:0}
.entry-content .kt-rel-e::before{content:none}
.entry-content .kt-rel-e+.kt-rel-e{flex-direction:column-reverse}
.entry-content .kt-rel-e.is-key{--c:var(--accent);--w:2px}
.entry-content .kt-rel-lb{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--ink-table);text-align:center}
.entry-content .kt-rel-e.is-key .kt-rel-lb{padding:3px 10px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent);font-weight:700}
.entry-content .kt-rel-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* 선과 화살촉(CSS 테두리). 가로: 오른쪽(정방향)·왼쪽(is-back) */
.entry-content .kt-rel-ln{position:relative;display:block;align-self:stretch;height:0;margin:5px 9px 5px 0;border-top:var(--w) solid var(--c)}
.entry-content .kt-rel-ln::after{content:"";position:absolute;left:100%;top:calc(-5px - var(--w) / 2);border-left:9px solid var(--c);border-top:5px solid transparent;border-bottom:5px solid transparent}
.entry-content .kt-rel-e.is-back .kt-rel-ln{margin:5px 0 5px 9px}
.entry-content .kt-rel-e.is-back .kt-rel-ln::after{left:auto;right:100%;border-left:0;border-right:9px solid var(--c)}
/* 2×2의 세로 연결(한 방향만): 선은 개체 열 가운데, 값은 선 바로 옆(가운데 열 쪽) */
.entry-content .kt-rel-l.is-v{align-self:stretch;padding:0}
.entry-content .kt-rel-l.is-v>.kt-rel-e{flex:1;display:grid;grid-template-columns:var(--rel-nw) minmax(0,1fr);align-items:center}
.entry-content .kt-rel-l.is-24>.kt-rel-e{grid-template-columns:minmax(0,1fr) var(--rel-nw)}
.entry-content .kt-rel-l.is-v .kt-rel-ln{grid-area:1/1;justify-self:center;align-self:stretch;width:0;height:auto;margin:6px 0 10px;border-top:0;border-left:var(--w) solid var(--c);transform:translateX(calc(var(--w) / -2))}
.entry-content .kt-rel-l.is-v .kt-rel-ln::after{left:calc(-5px - var(--w) / 2);top:100%;border:0;border-top:9px solid var(--c);border-left:5px solid transparent;border-right:5px solid transparent}
.entry-content .kt-rel-l.is-v .is-back .kt-rel-ln{margin:10px 0 6px}
.entry-content .kt-rel-l.is-v .is-back .kt-rel-ln::after{top:auto;bottom:100%;border-top:0;border-bottom:9px solid var(--c)}
.entry-content .kt-rel-l.is-v .kt-rel-lb{grid-area:1/2;justify-self:start;max-width:calc(100% + var(--rel-nw) / 2 - 14px);margin-left:calc(var(--rel-nw) / -2 + 14px);text-align:left}
.entry-content .kt-rel-l.is-24 .kt-rel-ln{grid-area:1/2}
.entry-content .kt-rel-l.is-24 .kt-rel-lb{grid-area:1/1;justify-self:end;margin-left:0;margin-right:calc(var(--rel-nw) / -2 + 14px);text-align:right}
/* 세로 연결이 둘이면 가운데 열을 반씩 나눠 쓴다 */
.entry-content .kt-rel-map:has(>.is-13):has(>.is-24) .kt-rel-l.is-v .kt-rel-lb{max-width:calc(50% + var(--rel-nw) / 2 - 20px)}
.entry-content .kt-rel-foot{margin:20px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12px;line-height:1.6;color:var(--ink-muted)}
.entry-content .kt-rel-note+.kt-rel-src::before{content:" · "}
/* 좁은 폭: 2×2와 두 개체 한 줄은 그대로 줄이고, 세 개체 한 줄은 세로로 쌓는다(정방향 = 아래) */
@container (max-width:520px){
.entry-content .kt-rel-title{margin-bottom:18px}
.entry-content .kt-rel-n{min-height:4.25rem;padding:10px 6px}
.entry-content .kt-rel-n>b{font-size:15px}
.entry-content .kt-rel-n>span{font-size:12px;line-height:1.35}
.entry-content .kt-rel-lb{font-size:13px;line-height:1.35}
.entry-content .kt-rel-l{padding:0 8px}
.entry-content .kt-rel.has-3 .kt-rel-map{grid-template-columns:minmax(0,1fr)}
.entry-content .kt-rel.has-3 .kt-rel-n,.entry-content .kt-rel.has-3 .kt-rel-l{grid-column:1}
.entry-content .kt-rel.has-3 .kt-rel-n{justify-self:center;width:min(100%,10.5rem)}
.entry-content .kt-rel.has-3 .is-n1{grid-row:1}
.entry-content .kt-rel.has-3 .is-12{grid-row:2}
.entry-content .kt-rel.has-3 .is-n2{grid-row:3}
.entry-content .kt-rel.has-3 .is-23{grid-row:4}
.entry-content .kt-rel.has-3 .is-n3{grid-row:5}
.entry-content .kt-rel.has-3 .kt-rel-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;min-height:5.25rem;padding:0}
.entry-content .kt-rel.has-3 .kt-rel-e{flex-direction:row;align-items:center;align-self:stretch;gap:10px}
.entry-content .kt-rel.has-3 .kt-rel-e:first-child:not(:only-child){justify-self:end}
.entry-content .kt-rel.has-3 .kt-rel-e:first-child:not(:only-child) .kt-rel-lb{text-align:right}
.entry-content .kt-rel.has-3 .kt-rel-e+.kt-rel-e{flex-direction:row-reverse;justify-self:start}
.entry-content .kt-rel.has-3 .kt-rel-e:only-child{grid-column:2;flex-direction:row-reverse;justify-self:start;margin-left:-9px}
.entry-content .kt-rel.has-3 .kt-rel-lb{text-align:left}
.entry-content .kt-rel.has-3 .kt-rel-ln{width:0;height:auto;margin:6px 0 10px;border-top:0;border-left:var(--w) solid var(--c)}
.entry-content .kt-rel.has-3 .kt-rel-ln::after{left:calc(-5px - var(--w) / 2);top:100%;border:0;border-top:9px solid var(--c);border-left:5px solid transparent;border-right:5px solid transparent}
.entry-content .kt-rel.has-3 .is-back .kt-rel-ln{margin:10px 0 6px}
.entry-content .kt-rel.has-3 .is-back .kt-rel-ln::after{top:auto;bottom:100%;border-top:0;border-bottom:9px solid var(--c)}
}
@media (max-width:480px){.entry-content .kt-rel{padding-left:14px;padding-right:14px}}