/* 공통 틀 */
.kte{margin:28px 0;background:#fff;border:1px solid var(--kt-bd,#E5E7EB);border-radius:16px;box-shadow:var(--kt-sh-2,0 1px 2px rgba(15,23,42,.05));overflow:hidden;color:var(--kt-body,#1F2937)}
.kte-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:14px 22px;border-bottom:1px solid var(--kt-bd-head,#EEF2F6)}
.entry-content .kte-head p,.kte-head p{margin:0!important}
.kte-title{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--kt-ink,#0F172A)}
.kte-sub{font-size:13.5px;color:var(--kt-mute,#64748B)}
.kte-body{padding:20px 22px 22px}
.kte-foot{padding:12px 22px;border-top:1px solid var(--kt-bd-soft,#F1F5F9);font-size:13px;line-height:1.6;color:var(--kt-mute,#64748B);background:var(--kt-surface,#F7F9FB)}
.kte-foot a{color:var(--kt-mute,#64748B)!important;text-decoration:underline}
.kte-tag{display:inline-block;font-style:normal;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:-.01em;background:var(--kt-green-bg,#F0FDF4);color:var(--kt-green-d,#15803D);border:1px solid var(--kt-green-bd2,#BBF7D0);white-space:nowrap}
.kte-tag.info{background:var(--kt-info-bg,#ECFEFF);color:var(--kt-info,#0E7490);border-color:var(--kt-info-bd,#A5F3FC)}
.kte-tag.warn{background:#FFF7ED;color:var(--kt-warn,#B45309);border-color:#FED7AA}
.kte-tag.mute{background:var(--kt-bd-soft,#F1F5F9);color:var(--kt-body2,#4B5563);border-color:var(--kt-bd,#E5E7EB)}
.kte ol,.kte ul{margin:0!important;padding:0!important;list-style:none}
.kte li{margin:0}

/* 1. 흐름도 (.kte-flow) — PC 가로, 모바일 세로 */
.kte-flow .kte-steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px;counter-reset:kte}
.kte-flow .kte-step{position:relative;padding:16px 14px 14px;border:1px solid var(--kt-green-bd2,#BBF7D0);border-radius:12px;background:var(--kt-green-cell,#F7FEF9)}
.kte-flow .kte-step::before{counter-increment:kte;content:counter(kte);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--kt-green,#16A34A);color:#fff;font-size:13px;font-weight:800;margin-bottom:8px}
.kte-flow .kte-step:not(:last-child)::after{content:"";position:absolute;top:28px;right:-12px;width:10px;height:10px;border-top:2px solid var(--kt-green,#16A34A);border-right:2px solid var(--kt-green,#16A34A);transform:rotate(45deg)}
.kte-flow .kte-step b{display:block;font-size:15.5px;line-height:1.45;color:var(--kt-ink,#0F172A);margin-bottom:4px}
.kte-flow .kte-step span{display:block;font-size:14px;line-height:1.6;color:var(--kt-body2,#4B5563)}
.kte-flow .kte-step .kte-tag{margin-top:8px}

/* 2. 타임라인 (.kte-time) */
.kte .kte-time .kte-line,.kte-time .kte-line{position:relative;padding-left:28px!important}
.kte-time .kte-pt:not(:last-child)::after{content:"";position:absolute;left:-19px;top:24px;bottom:-6px;width:2px;background:var(--kt-green-bd2,#BBF7D0)}
.kte-time .kte-pt{position:relative;padding:0 0 18px}
.kte-time .kte-pt:last-child{padding-bottom:0}
.kte-time .kte-pt::before{content:"";position:absolute;left:-27px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--kt-green,#16A34A)}
.kte-time .kte-pt.end::before{border-color:var(--kt-warn,#B45309)}
.kte-time .kte-pt.mute::before{border-color:var(--kt-mute2,#94A3B8)}
.kte-time .kte-when{display:block;font-size:13.5px;font-weight:800;color:var(--kt-green-d,#15803D);letter-spacing:-.01em}
.kte-time .kte-pt.end .kte-when{color:var(--kt-warn,#B45309)}
.kte-time .kte-pt.mute .kte-when{color:var(--kt-mute,#64748B)}
.kte-time .kte-what{display:block;font-size:15.5px;line-height:1.6;color:var(--kt-ink,#0F172A);font-weight:700}
.kte-time .kte-note{display:block;font-size:14px;line-height:1.6;color:var(--kt-body2,#4B5563)}

/* 3. 비교 (.kte-vs) */
.kte-vs .kte-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.kte-vs .kte-col{border:1px solid var(--kt-bd,#E5E7EB);border-radius:12px;overflow:hidden}
.kte-vs .kte-col-h{padding:12px 16px;font-size:16px;font-weight:800;color:var(--kt-ink,#0F172A);background:var(--kt-surface,#F7F9FB);border-bottom:1px solid var(--kt-bd,#E5E7EB)}
.kte-vs .kte-col.a .kte-col-h{background:var(--kt-green-bg,#F0FDF4);color:var(--kt-green-d,#15803D);border-bottom-color:var(--kt-green-bd,#DCFCE7)}
.kte-vs .kte-col.b .kte-col-h{background:var(--kt-info-bg,#ECFEFF);color:var(--kt-info,#0E7490);border-bottom-color:var(--kt-info-bd,#A5F3FC)}
.kte-vs .kte-col dl{margin:0;padding:6px 16px 14px}
.kte-vs .kte-col dt{margin:10px 0 2px;font-size:12.5px;font-weight:800;color:var(--kt-mute,#64748B);letter-spacing:.01em}
.kte-vs .kte-col dd{margin:0;font-size:15px;line-height:1.6;color:var(--kt-body,#1F2937)}
.kte-vs .kte-pick{margin-top:14px;padding:12px 16px;border-radius:10px;background:var(--kt-surface,#F7F9FB);font-size:14.5px;line-height:1.65}
.kte-vs .kte-pick b{color:var(--kt-ink,#0F172A)}

/* 4. 계산 예시 (.kte-calc) */
.kte-calc .kte-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.kte-calc .kte-in div{padding:10px 12px;border-radius:10px;background:var(--kt-surface,#F7F9FB);border:1px solid var(--kt-bd-soft,#F1F5F9)}
.kte-calc .kte-in small{display:block;font-size:12.5px;color:var(--kt-mute,#64748B);font-weight:700}
.kte-calc .kte-in strong{display:block;font-size:17px;color:var(--kt-ink,#0F172A);font-variant-numeric:tabular-nums}
.kte-calc .kte-eq{counter-reset:eq}
.kte-calc .kte-eq li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px dashed var(--kt-bd,#E5E7EB);font-size:15px;line-height:1.55}
.kte-calc .kte-eq li span:last-child{font-weight:700;color:var(--kt-ink,#0F172A);white-space:nowrap;font-variant-numeric:tabular-nums}
.kte-calc .kte-res{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--kt-green-bg,#F0FDF4);border:1px solid var(--kt-green-bd2,#BBF7D0)}
.kte-calc .kte-res span{font-size:15px;font-weight:700;color:var(--kt-green-ink,#14532D)}
.kte-calc .kte-res strong{font-size:22px;font-weight:800;color:var(--kt-green-d,#15803D);font-variant-numeric:tabular-nums}

/* 5. 사례 (.kte-case) */
.kte-case .kte-cases{display:grid;gap:12px}
.kte-case .kte-c{border:1px solid var(--kt-bd,#E5E7EB);border-left:4px solid var(--kt-green,#16A34A);border-radius:10px;padding:14px 16px}
.kte-case .kte-c.bad{border-left-color:var(--kt-warn,#B45309)}
.kte-case .kte-c-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-bottom:6px}
.kte-case .kte-c-top b{font-size:15.5px;color:var(--kt-ink,#0F172A)}
.kte-case .kte-c p{margin:0 0 4px!important;font-size:15px;line-height:1.65}
.kte-case .kte-c .kte-out{font-weight:700;color:var(--kt-ink,#0F172A)}
.kte-case .kte-c .kte-why{font-size:13.5px;color:var(--kt-mute,#64748B)}

/* 6. 판단 흐름 (.kte-decide) */
.kte-decide .kte-qs{counter-reset:q;display:grid;gap:10px}
.kte-decide .kte-q{border:1px solid var(--kt-bd,#E5E7EB);border-radius:12px;padding:14px 16px}
.kte-decide .kte-q>b{display:block;font-size:15.5px;line-height:1.5;color:var(--kt-ink,#0F172A);margin-bottom:8px}
.kte-decide .kte-q>b::before{counter-increment:q;content:"Q" counter(q) ". ";color:var(--kt-green-d,#15803D)}
.kte-decide .kte-ans{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kte-decide .kte-ans span{display:block;padding:8px 10px;border-radius:8px;font-size:14px;line-height:1.5;background:var(--kt-surface,#F7F9FB)}
.kte-decide .kte-ans .y::before{content:"예 → ";font-weight:800;color:var(--kt-green-d,#15803D)}
.kte-decide .kte-ans .n::before{content:"아니오 → ";font-weight:800;color:var(--kt-warn,#B45309)}
.kte-decide .kte-ok{padding:12px 16px;border-radius:12px;background:var(--kt-green-bg,#F0FDF4);border:1px solid var(--kt-green-bd2,#BBF7D0);font-size:15px;font-weight:700;color:var(--kt-green-ink,#14532D)}

/* 7. 화면 캡처 설명 (.kte-shot) — 번호 위치는 이미지 기준 % (style="--x:..;--y:..") */
.kte-shot .kte-img{position:relative;margin:0;line-height:0;border:1px solid var(--kt-bd,#E5E7EB);border-radius:10px;overflow:hidden}
.kte-shot .kte-img img{width:100%;height:auto;display:block;margin:0!important}
.kte-shot .kte-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:#DC2626;color:#fff;font-size:13px;font-weight:800;line-height:26px;text-align:center;box-shadow:0 0 0 3px #fff,0 2px 6px rgba(0,0,0,.25)}
.kte-shot .kte-keys{counter-reset:k;margin-top:14px!important;display:grid;gap:8px}
.kte-shot .kte-keys li{position:relative;padding-left:34px;font-size:15px;line-height:1.6}
.kte-shot .kte-keys li::before{counter-increment:k;content:counter(k);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:#DC2626;color:#fff;font-size:12.5px;font-weight:800;line-height:24px;text-align:center}

/* 8. 금액 막대 (.kte-bars) — 막대 길이는 style="--w:62%" */
.kte-bars .kte-bar{display:grid;grid-template-columns:minmax(90px,28%) 1fr auto;align-items:center;gap:10px;padding:7px 0}
.kte-bars .kte-bar>span{font-size:14.5px;line-height:1.45;color:var(--kt-body,#1F2937)}
.kte-bars .kte-track{position:relative;height:24px;border-radius:8px;background:var(--kt-bd-soft,#F1F5F9)}
.kte-bars .kte-fill{position:absolute;left:0;top:0;bottom:0;width:var(--w);min-width:4px;border-radius:8px;background:var(--kt-green,#16A34A)}
.kte-bars .kte-bar.alt .kte-fill{background:var(--kt-info,#0E7490)}
.kte-bars .kte-bar.warn .kte-fill{background:var(--kt-warn,#B45309)}
.kte-bars .kte-val{min-width:64px;text-align:right;font-size:15px;font-weight:800;color:var(--kt-ink,#0F172A);font-variant-numeric:tabular-nums}
.kte-bars .kte-bar.warn .kte-val{color:var(--kt-warn,#B45309)}

@media(max-width:767px){
  .kte{margin:22px 0;border-radius:14px}
  .kte-head,.kte-foot{padding-left:16px;padding-right:16px}
  .kte-body{padding:16px}
  .kte-flow .kte-steps{grid-auto-flow:row;grid-auto-columns:auto;gap:12px}
  .kte-flow .kte-step{padding:14px 14px 14px 52px}
  .kte-flow .kte-step::before{position:absolute;left:14px;top:14px;margin:0}
  .kte-flow .kte-step:not(:last-child)::after{top:auto;bottom:-10px;right:auto;left:22px;transform:rotate(135deg)}
  .kte-decide .kte-ans{grid-template-columns:1fr}
  .kte-bars .kte-bar{grid-template-columns:1fr auto;gap:4px 10px}
  .kte-bars .kte-bar>span{grid-column:1/-1}
  .kte-calc .kte-in{grid-template-columns:repeat(3,1fr);gap:8px}
  .kte-calc .kte-in div{padding:8px 10px}
  .kte-calc .kte-in strong{font-size:15px}
  .kte-calc .kte-res strong{font-size:20px}
}