/* 338 단독 작업의 클라우드 이용료와 재작업 손실 = 가계부 장부(2026-10-16 사장님 '공통틀로 하지마 다 다르게').
   첫머리 양면 장부(직접 지출은 검은 잉크, 시간과 변경 비용은 붉은 잉크), 시간과 지출 동전 둘, 시간 비용 기준은 계산기 화면 셋,
   서버 비용은 고정 대 사용량 선 그래프, 준비 조건은 전지 네 칸, 실제 비용은 갈라지는 두 선, 위험은 영향 x 가능성 격자,
   재작업은 원인 셋이 도는 고리, 사례는 단계와 성과 수치, 기관은 보고서 두 칸, 비교는 계산표 세 칸 */
.v-artd .sp-338 .prose{font-size:17px}
.v-artd .sp-338 :where(.prose) .lg>p{margin:0 0 16px}
.v-artd .sp-338 :where(.prose) .lg-lead{font-size:20px;line-height:1.7;color:var(--ink)}
.v-artd .sp-338 :where(.prose) .lg-lead b{color:var(--blue)}
.v-artd .sp-338 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-338 .prose h2::before,.v-artd .sp-338 .prose h2::after{content:none}
.v-artd .sp-338 :where(.prose) .lg-s{padding:60px 0 4px}
.v-artd .sp-338 :where(.prose) .lg-s>p{margin:0 0 16px}

/* 양면 장부 */
.v-artd .sp-338 :where(.prose) .lg-book{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;margin:8px 0 24px;padding:0 0 46px;border-radius:6px;background:#fffdf7;box-shadow:0 22px 40px -30px rgba(60,50,10,.6),inset 0 0 0 1px #ece6d2}
.v-artd .sp-338 :where(.prose) .lg-book::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(90deg,#e4dcc2,#fff8e6);transform:translateX(-1px)}
.v-artd .sp-338 :where(.prose) .bk-page{padding:22px 24px 0}
.v-artd .sp-338 :where(.prose) .bk-h{margin:0 0 6px;padding-bottom:8px;border-bottom:2px double #c9bd94;font-weight:800;color:var(--ink)}
.v-artd .sp-338 :where(.prose) .bk-page ul{margin:0;padding:0;list-style:none;background:repeating-linear-gradient(#fffdf7 0 37px,#e7e0c8 37px 38px)}
.v-artd .sp-338 :where(.prose) .bk-page li{margin:0;height:38px;display:flex;align-items:center;font-size:15px;color:#2a2f45;font-family:'Pretendard Variable',sans-serif}
.v-artd .sp-338 :where(.prose) .bk-page li::before{content:none}
.v-artd .sp-338 :where(.prose) .bk-page.red .bk-h{color:#b3232a}
.v-artd .sp-338 :where(.prose) .bk-page.red li{color:#b3232a}
.v-artd .sp-338 :where(.prose) .bk-foot{position:absolute;left:24px;right:24px;bottom:12px;margin:0;font-size:13.5px;color:#6b5f3a}
.v-artd .sp-338 :where(.prose) .bk-foot::before{content:"※ "}
.v-artd .sp-338 :where(.prose) .lg-coins{position:relative;padding:4px 0 4px 132px;min-height:56px;font-size:15.5px;line-height:1.65}
.v-artd .sp-338 :where(.prose) .lg-coins span{position:absolute;top:0;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff}
.v-artd .sp-338 :where(.prose) .c-t{left:0;background:#7d93ff;box-shadow:inset 0 0 0 4px rgba(255,255,255,.35)}
.v-artd .sp-338 :where(.prose) .c-m{left:62px;background:var(--yellow);color:var(--ink)!important;box-shadow:inset 0 0 0 4px rgba(255,255,255,.4)}

/* 계산기 화면 셋 */
.v-artd .sp-338 :where(.prose) .lg-calc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 18px}
.v-artd .sp-338 :where(.prose) .cc{padding:12px;border-radius:16px;background:#2a2f45;color:#cfd6f5;font-size:14px;line-height:1.6}
.v-artd .sp-338 :where(.prose) .cc p{margin:0;padding:0 4px 4px}
.v-artd .sp-338 :where(.prose) .cc-d{margin:0 0 12px!important;padding:14px 12px!important;border-radius:8px;background:#c9d8b6;color:#1f2a17;font-size:14.5px;font-weight:800;text-align:left;letter-spacing:0;box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}

/* 선 그래프 */
.v-artd .sp-338 :where(.prose) .lg-chart{margin:6px 0 10px;padding:18px;border-radius:14px;background:var(--soft)}
.v-artd .sp-338 :where(.prose) .lg-chart svg{width:100%;height:auto;font-size:11px;fill:var(--sub)}
.v-artd .sp-338 :where(.prose) .lg-chart .ax{stroke:#9aa6c6;stroke-width:1.5}
.v-artd .sp-338 :where(.prose) .lg-chart .fx{stroke:var(--navy);stroke-width:3;fill:none}
.v-artd .sp-338 :where(.prose) .lg-chart .vr{stroke:var(--blue);stroke-width:3;fill:none}
.v-artd .sp-338 :where(.prose) .lg-chart .mk{stroke:#c3c8d6;stroke-dasharray:4 4}
.v-artd .sp-338 :where(.prose) .lg-chart .t-fx{fill:var(--navy);font-weight:700}
.v-artd .sp-338 :where(.prose) .lg-chart .t-vr{fill:#1d3fc4;font-weight:700}
.v-artd .sp-338 :where(.prose) .lg-chart figcaption{margin-top:10px;font-size:14.5px;line-height:1.6;color:#3f4555}

/* 전지 네 칸 */
.v-artd .sp-338 :where(.prose) .lg-batt{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:8px 0 18px;padding:6px;border-radius:12px;border:3px solid var(--ink);position:relative}
.v-artd .sp-338 :where(.prose) .lg-batt::after{content:"";position:absolute;right:-12px;top:50%;width:8px;height:40px;margin-top:-20px;border-radius:0 4px 4px 0;background:var(--ink)}
.v-artd .sp-338 :where(.prose) .bt{padding:14px 12px;font-size:13.5px;line-height:1.55;color:#3f4555;border-radius:6px;background:var(--blue2)}
.v-artd .sp-338 :where(.prose) .bt+.bt{margin-left:6px}
.v-artd .sp-338 :where(.prose) .bt i{display:block;width:100%;height:6px;margin-bottom:10px;border-radius:3px;background:var(--blue)}
.v-artd .sp-338 :where(.prose) .bt b{display:block;margin-bottom:4px;font-size:15.5px;color:var(--ink)}

/* 갈라지는 두 선 */
.v-artd .sp-338 :where(.prose) .lg-fork{margin:8px 0 10px}
.v-artd .sp-338 :where(.prose) .lg-fork svg{display:block;width:100%;height:auto;margin-bottom:6px;font-size:12px;fill:var(--sub);font-weight:700}
.v-artd .sp-338 :where(.prose) .lg-fork .plan{stroke:#9aa6c6;stroke-width:3;stroke-dasharray:8 6;fill:none}
.v-artd .sp-338 :where(.prose) .lg-fork .act{stroke:#d23a3a;stroke-width:3;fill:none}
.v-artd .sp-338 :where(.prose) .lg-fork dl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}
.v-artd .sp-338 :where(.prose) .lg-fork dl div{padding:16px;border-radius:12px;border-top:4px solid #d23a3a;background:#fff6f6}
.v-artd .sp-338 :where(.prose) .lg-fork dt{margin-bottom:6px;font-weight:800;color:#b3232a}
.v-artd .sp-338 :where(.prose) .lg-fork dd{margin:0;font-size:14px;line-height:1.6;color:#3f4555}

/* 영향 x 가능성 */
.v-artd .sp-338 :where(.prose) .lg-risk{position:relative;width:min(100%,460px);margin:8px 0 18px;padding:0 0 28px 30px}
.v-artd .sp-338 :where(.prose) .rk-y{position:absolute;left:0;top:0;bottom:28px;margin:0;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-size:13px;font-weight:800;color:var(--sub)}
.v-artd .sp-338 :where(.prose) .rk-x{position:absolute;left:30px;right:0;bottom:0;margin:0;text-align:center;font-size:13px;font-weight:800;color:var(--sub)}
.v-artd .sp-338 :where(.prose) .rk-g{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.v-artd .sp-338 :where(.prose) .rk-g span{padding:14px;border-radius:10px;background:var(--soft);font-size:13px;line-height:1.45;color:#3f4555}
.v-artd .sp-338 :where(.prose) .rk-g .hot{background:#fff1c2;outline:3px solid var(--yellow);color:#3b3420}
.v-artd .sp-338 :where(.prose) .rk-g .hot b{display:block;margin-top:6px;font-size:13.5px;color:#6b5200}
.v-artd .sp-338 :where(.prose) .rk-g .hot2{background:#fde8e8;color:#b3232a}
.v-artd .sp-338 :where(.prose) .lg-opts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.v-artd .sp-338 :where(.prose) .lg-opts li{margin:0;padding:7px 14px;border-radius:999px;border:1.5px solid var(--ink);font-size:14px;font-weight:700;color:var(--ink)}
.v-artd .sp-338 :where(.prose) .lg-opts li::before{content:none}

/* 원인 셋이 도는 고리 */
.v-artd .sp-338 :where(.prose) .lg-loop{position:relative;width:280px;height:200px;margin:10px auto 20px}
.v-artd .sp-338 :where(.prose) .lg-loop::before{content:"";position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px dashed #d23a3a}
.v-artd .sp-338 :where(.prose) .lp-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 16px;border-radius:999px;background:#d23a3a;color:#fff;font-weight:800}
.v-artd .sp-338 :where(.prose) .lg-loop span:not(.lp-c){position:absolute;padding:6px 12px;border-radius:8px;background:#fff;border:1.5px solid #d23a3a;color:#b3232a;font-size:13.5px;font-weight:800;white-space:nowrap}
.v-artd .sp-338 :where(.prose) .lp-a{left:50%;top:0;transform:translateX(-50%)}
.v-artd .sp-338 :where(.prose) .lp-b{left:0;bottom:4px}
.v-artd .sp-338 :where(.prose) .lp-d{right:0;bottom:4px}

/* 사례 = 단계와 성과 */
.v-artd .sp-338 :where(.prose) .lg-hw{margin:8px 0 18px;padding:26px 28px;border-radius:20px;background:var(--navy);color:#fff}
.v-artd .sp-338 :where(.prose) .lg-hw p{margin:0}
.v-artd .sp-338 :where(.prose) .hw-k{font-size:13px;font-weight:800;color:#9fb3ff}
.v-artd .sp-338 :where(.prose) .hw-t{margin:6px 0 16px!important;font-size:21px;font-weight:800;line-height:1.4}
.v-artd .sp-338 :where(.prose) .hw-steps{display:flex;gap:0;margin:0 0 18px;padding:0;list-style:none;counter-reset:s}
.v-artd .sp-338 :where(.prose) .hw-steps li{counter-increment:s;flex:1;margin:0;padding:10px 12px;background:rgba(255,255,255,.08);font-size:14px;font-weight:700;border-right:2px solid var(--navy)}
.v-artd .sp-338 :where(.prose) .hw-steps li:first-child{border-radius:10px 0 0 10px}
.v-artd .sp-338 :where(.prose) .hw-steps li:last-child{border-radius:0 10px 10px 0;border-right:0;background:rgba(255,255,255,.16)}
.v-artd .sp-338 :where(.prose) .hw-steps li::before{content:counter(s) " ";color:#9fb3ff}
.v-artd .sp-338 :where(.prose) .hw-kpi{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.v-artd .sp-338 :where(.prose) .hw-kpi>div{padding:16px 18px;border-radius:14px;background:#fff;color:var(--ink)}
.v-artd .sp-338 :where(.prose) .kp-k{font-size:13px;font-weight:800;color:var(--sub)}
.v-artd .sp-338 :where(.prose) .kp-v{display:flex;align-items:baseline;gap:10px;margin-top:6px!important;flex-wrap:wrap}
.v-artd .sp-338 :where(.prose) .kp-v span{font-size:14px;color:var(--sub)}
.v-artd .sp-338 :where(.prose) .kp-v span::after{content:" →";color:#9aa6c6}
.v-artd .sp-338 :where(.prose) .kp-v b{font-size:22px;color:#1d3fc4;letter-spacing:-.5px}
.v-artd .sp-338 :where(.prose) .hw-d{margin-bottom:18px!important;font-size:15px;line-height:1.65;color:#cfd6f5}
.v-artd .sp-338 :where(.prose) .hw-a{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.v-artd .sp-338 :where(.prose) .hw-btn{display:inline-flex;padding:13px 24px;border-radius:999px;background:#fff;color:var(--navy)!important;font-weight:800;text-decoration:none!important}
.v-artd .sp-338 :where(.prose) .hw-btn:hover{background:var(--blue2)}
.v-artd .sp-338 :where(.prose) .hw-link{color:#dfe5ff!important;font-weight:700;font-size:15px}
.v-artd .sp-338 :where(.prose) .hw-link::after{content:" →"}

/* 보고서 두 칸 */
.v-artd .sp-338 :where(.prose) .lg-report{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:8px 0 18px;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden}
.v-artd .sp-338 :where(.prose) .lg-report>div{padding:16px 18px}
.v-artd .sp-338 :where(.prose) .lg-report>div+div{border-left:1.5px solid var(--ink);background:var(--soft)}
.v-artd .sp-338 :where(.prose) .rp-k{margin:0 0 12px;font-weight:800;color:var(--ink)}
.v-artd .sp-338 :where(.prose) .lg-report span{display:block;height:8px;margin:8px 0;border-radius:4px;background:#d5d9e4}
.v-artd .sp-338 :where(.prose) .lg-report span+span{width:70%}

/* 계산표 세 칸 */
.v-artd .sp-338 :where(.prose) .lg-sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:8px 0 18px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.v-artd .sp-338 :where(.prose) .sh{background:#fff}
.v-artd .sp-338 :where(.prose) .sh+.sh{border-left:1px solid var(--line)}
.v-artd .sp-338 :where(.prose) .sh-h{margin:0;padding:12px 16px;background:var(--ink);color:#fff;font-weight:800;font-size:15px}
.v-artd .sp-338 :where(.prose) .sh.warn .sh-h{background:#b3232a}
.v-artd .sp-338 :where(.prose) .sh ul{margin:0;padding:6px 16px 12px;list-style:none}
.v-artd .sp-338 :where(.prose) .sh li{margin:0;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14.5px;display:flex;justify-content:space-between;gap:8px}
.v-artd .sp-338 :where(.prose) .sh li::before{content:none}
.v-artd .sp-338 :where(.prose) .sh li::after{content:"";flex:0 0 46px;border-bottom:1.5px solid #c3c8d6;margin-bottom:4px}
.v-artd .sp-338 :where(.prose) .lg-rel{margin:40px 0 10px;padding:16px 0 0;border-top:1px solid var(--line);list-style:none}
.v-artd .sp-338 :where(.prose) .lg-rel li{margin:0;padding:5px 0}
.v-artd .sp-338 :where(.prose) .lg-rel li::before{content:none}
.v-artd .sp-338 :where(.prose) .lg-rel a{font-weight:700;text-decoration:none}
.v-artd .sp-338 :where(.prose) .lg-rel a::before{content:"→ ";color:var(--sub)}

@media (max-width:720px){
  .v-artd .sp-338 :where(.prose) .lg-lead{font-size:18px}
  .v-artd .sp-338 .prose h2{font-size:23px}
  .v-artd .sp-338 :where(.prose) .lg-s{padding-top:46px}
  .v-artd .sp-338 :where(.prose) .lg-book{grid-template-columns:1fr;padding-bottom:60px}
  .v-artd .sp-338 :where(.prose) .lg-book::before{display:none}
  .v-artd .sp-338 :where(.prose) .bk-page.red{padding-top:14px}
  .v-artd .sp-338 :where(.prose) .lg-coins{padding:66px 0 0}
  .v-artd .sp-338 :where(.prose) .lg-calc{grid-template-columns:1fr}
  .v-artd .sp-338 :where(.prose) .lg-batt{grid-template-columns:1fr 1fr;gap:6px}
  .v-artd .sp-338 :where(.prose) .bt+.bt{margin-left:0}
  .v-artd .sp-338 :where(.prose) .lg-batt::after{display:none}
  .v-artd .sp-338 :where(.prose) .lg-fork dl{grid-template-columns:1fr}
  .v-artd .sp-338 :where(.prose) .lg-hw{padding:22px 18px}
  .v-artd .sp-338 :where(.prose) .hw-steps{flex-direction:column;gap:4px}
  .v-artd .sp-338 :where(.prose) .hw-steps li,.v-artd .sp-338 :where(.prose) .hw-steps li:first-child,.v-artd .sp-338 :where(.prose) .hw-steps li:last-child{border-radius:8px;border-right:0}
  .v-artd .sp-338 :where(.prose) .hw-kpi{grid-template-columns:1fr}
  .v-artd .sp-338 :where(.prose) .lg-report{grid-template-columns:1fr}
  .v-artd .sp-338 :where(.prose) .lg-report>div+div{border-left:0;border-top:1.5px solid var(--ink)}
  .v-artd .sp-338 :where(.prose) .lg-sheet{grid-template-columns:1fr}
  .v-artd .sp-338 :where(.prose) .sh+.sh{border-left:0;border-top:1px solid var(--line)}
}