body{font-family:Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif}
.post-content{font-size:15px;line-height:1.9}
.post-card p,.portfolio-header p,.post-header p{font-size:14px}
.class-diagram{margin:24px 0;padding:28px 18px 20px;border:1px solid #e4dfd8;border-radius:12px;background:#faf9f6}
.class-diagram figcaption{text-align:center;margin-bottom:24px;font-size:12px;color:#777}
.class-tree,.class-tree ul{list-style:none;margin:0;padding:0;text-align:center}
.class-tree ul{position:relative;display:flex;justify-content:center;gap:20px;padding-top:24px}
.class-tree ul:before{content:"";position:absolute;left:50%;top:0;height:24px;border-left:1px solid #c4b6a7}
.class-tree li{flex:1;min-width:0;position:relative}
.class-tree ul>li:before{content:"";position:absolute;left:50%;top:-12px;height:12px;border-left:1px solid #c4b6a7}
.class-tree ul>li:after{content:"";position:absolute;left:-10px;right:-10px;top:-12px;border-top:1px solid #c4b6a7}
.class-tree ul>li:first-child:after{left:50%}.class-tree ul>li:last-child:after{right:50%}
.class-tree ul>li:only-child:after{display:none}
.class-node{position:relative;display:inline-block;max-width:100%;padding:10px 14px;border:1px solid #d8d0c6;border-radius:8px;background:#fff;font-size:12px;overflow-wrap:anywhere;line-height:1.6}
.class-node strong{display:block;color:#303030;font-weight:650}.class-node span{display:block;margin-top:3px;font-size:11px;color:#777}
.class-node.is-base{border-color:#c87a3c;background:#fff6ed}
@media(max-width:540px){.class-diagram{padding:20px 8px}.class-tree ul{gap:8px}.class-node{padding:8px 5px;font-size:10px}.class-node span{font-size:10px}.class-tree ul>li:after{left:-4px;right:-4px}.post-content{font-size:14px}}