/* 웹툰식 만화 해설. 색은 사이트 테마(navy #0B2A5B / gold #F5B700 / ink #1A2233)와 맞춤. 본문 19px, 대비 AA 이상. */
.ksi-cm{--n:#0B2A5B;--ink:#1A2233;--g:#F5B700;margin:36px auto;max-width:640px;container-type:inline-size;font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;color:var(--ink);line-height:1.65}
.ksi-cm *{box-sizing:border-box}
.ksi-cm-title{max-width:560px;margin:0 auto 16px;text-align:center}
.ksi-cm-title strong{display:block;font-size:23px;line-height:1.4;color:var(--n);font-weight:800;word-break:keep-all}
.ksi-cm-tag{display:inline-block;margin-bottom:6px;padding:2px 12px;border-radius:999px;background:var(--g);color:var(--ink);font-size:15px;font-weight:800}
.ksi-cm-panels{list-style:none;margin:0 auto;padding:0;max-width:640px;display:grid;gap:26px;counter-reset:cut}
.ksi-cm-panel{position:relative;margin:0;padding:0;overflow:hidden;border:3px solid var(--ink);border-radius:16px;background:#fff;box-shadow:0 4px 0 rgba(26,34,51,.18);counter-increment:cut}
.ksi-cm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ksi-cm-art{position:relative;height:186px;border-bottom:3px solid var(--ink);background:var(--t,#EEF3FB);overflow:hidden}
.ksi-cm-art::before{content:counter(cut);position:absolute;left:8px;top:8px;z-index:3;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:15px;font-weight:800;line-height:28px;text-align:center}
.ksi-cm-art::after{content:"";position:absolute;inset:auto 0 0 0;height:26px;background:rgba(26,34,51,.07)}
.ksi-cm-prop{position:absolute;left:50%;top:14px;z-index:1;width:92px;height:92px;margin-left:-46px}
.ksi-cm-char{position:absolute;bottom:2px;z-index:2;width:116px;height:116px;overflow:visible}
.ksi-cm-char--left{left:5%}
.ksi-cm-char--right{right:5%}
.ksi-cm-char--center{left:50%;margin-left:-58px}
.ksi-sc--calendar{--t:#FFF1CC}.ksi-sc--money{--t:#DDF3E3}.ksi-sc--chart{--t:#E3ECFB}.ksi-sc--calculator{--t:#EDE6FA}.ksi-sc--building{--t:#E6EBF3}.ksi-sc--document{--t:#FDE9E4}
.ksi-cm-talk{padding:10px 14px 14px;background:#fff}
.ksi-cm-b{position:relative;margin:12px 0 0;padding:11px 14px;border:2.5px solid var(--ink);border-radius:18px;font-size:19px;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}
.ksi-cm-b strong,.ksi-cm-nar strong{font-weight:800;background:linear-gradient(transparent 62%,rgba(245,183,0,.55) 0)}
.ksi-cm-nar strong{background:none;color:#FFD457}
.ksi-cm-b::before{content:"";position:absolute;top:-11px;width:16px;height:16px;background:inherit;border-left:2.5px solid var(--ink);border-top:2.5px solid var(--ink);transform:rotate(45deg)}
.ksi-cm-b--jurini{margin-right:9%;background:#FFF4CC}
.ksi-cm-b--jurini::before{left:26px}
.ksi-cm-b--doctor{margin-left:9%;background:#DCE6F5}
.ksi-cm-b--doctor::before{right:26px}
.ksi-cm-who{display:inline-block;margin-right:2px;padding:0 9px;border-radius:999px;font-size:16px;font-weight:800;line-height:1.6;color:#fff;vertical-align:1px}
.ksi-cm-b--jurini .ksi-cm-who{background:#7A5200}
.ksi-cm-b--doctor .ksi-cm-who{background:var(--n)}
.ksi-cm-nar{margin:12px 0 0;padding:10px 14px;border-radius:6px;background:var(--ink);color:#fff;font-size:18px;line-height:1.65;word-break:keep-all}
.ksi-cm-formula{margin:14px 0 0;padding:10px 14px 12px;border:3px dashed var(--g);border-radius:12px;background:#FFFBEA;text-align:center}
.ksi-cm-formula span{display:inline-block;margin-bottom:4px;padding:0 10px;border-radius:999px;background:var(--g);color:var(--ink);font-size:15px;font-weight:800}
.ksi-cm-formula strong{display:block;color:var(--n);font-size:20px;line-height:1.5;font-weight:800;word-break:keep-all}
.ksi-cm-sum{max-width:560px;margin:20px auto 0;padding:16px 18px;border-radius:16px;background:var(--n);color:#fff}
.ksi-cm-sum strong{display:inline-block;margin-bottom:6px;padding:1px 12px;border-radius:999px;background:var(--g);color:var(--ink);font-size:16px;font-weight:800}
.ksi-cm-sum p{margin:0;font-size:19px;line-height:1.7;word-break:keep-all}
.ksi-cm-more{max-width:560px;margin:14px auto 0;text-align:center}
.ksi-cm-more a{display:inline-block;min-height:48px;padding:11px 22px;border-radius:999px;border:2.5px solid var(--n);background:#fff;color:var(--n);font-size:18px;font-weight:800;line-height:1.5;text-decoration:none}
.ksi-cm-more a:hover,.ksi-cm-more a:focus-visible{background:var(--n);color:#fff}
.ksi-cm-more a:focus-visible{outline:3px solid var(--g);outline-offset:3px}
@media (max-width:380px){.ksi-cm-char{width:100px;height:100px}.ksi-cm-prop{width:78px;height:78px;margin-left:-39px}.ksi-cm-b{font-size:18px}}
@media (prefers-reduced-motion:no-preference){
.ksi-cm-js .ksi-cm-panel{opacity:0;transform:translateY(28px);transition:opacity .55s ease,transform .55s ease}
.ksi-cm-js .ksi-cm-panel.is-in{opacity:1;transform:none}
.ksi-cm-js .ksi-cm-char{transform:translateY(24px) scale(.9);opacity:0}
.ksi-cm-js .is-in .ksi-cm-char{animation:ksi-cm-pop .6s .15s cubic-bezier(.3,1.6,.5,1) forwards}
.ksi-cm-js .is-in .ksi-cm-char--right{animation-delay:.3s}
.ksi-cm-js .ksi-cm-char--center{margin-left:-58px}
@keyframes ksi-cm-pop{0%{opacity:0;transform:translateY(24px) scale(.9)}60%{opacity:1;transform:translateY(-8px) scale(1.04)}100%{opacity:1;transform:none}}
}

/* 웹툰처럼 세로로 한 칸씩: PC에서도 한 줄로 읽히게 (칸 순서가 지그재그로 꼬이지 않음) */
.ksi-cm-title,.ksi-cm-sum,.ksi-cm-more{max-width:640px}
@media (min-width:900px){.ksi-cm-b{font-size:20px}}