/* 339 노코드 제약의 설정 보완과 부분 연동 경비 = 경계선 지도(세 겹 사각형)(2026-10-16 글마다 다른 레이아웃).
   처음은 01 도구 기능을 02 외부 연동이, 그것을 03 이전이 감싸는 세 겹 사각형, 제약 발견은 시간 띠와 임시 처리 메모,
   설정 개선은 증상 대 처방과 되돌리기, 기능별 확인은 가운데 항목을 두고 왼쪽 도구 안, 오른쪽 도구 밖으로 나눈 표,
   임시 처리는 붉은 전선 하나 대 정리된 전선 여럿, 우선순위는 위험 격자, 부분 연동은 기존 화면 위에 쌓이는 비용,
   사전 확인은 플러그 넷, 수동 업무는 근무 기록표와 산식, 전체 이전은 이삿짐 상자 */
.v-artd .sp-339 .prose{font-size:17px}
.v-artd .sp-339 :where(.prose) .nl-lead{font-size:20px;line-height:1.7;color:var(--ink);margin:0 0 24px}
.v-artd .sp-339 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-339 .prose h2::before,.v-artd .sp-339 .prose h2::after{content:none}
.v-artd .sp-339 :where(.prose) .nl-s{padding:60px 0 4px}
.v-artd .sp-339 :where(.prose) .nl-s>p{margin:0 0 16px}
.v-artd .sp-339 .prose ul,.v-artd .sp-339 .prose ol{margin:0;padding:0;list-style:none}
.v-artd .sp-339 .prose li{margin:0}
.v-artd .sp-339 .prose li::before{content:none}

/* 세 겹 사각형 */
.v-artd .sp-339 :where(.prose) .nl-map p{margin:0}
.v-artd .sp-339 :where(.prose) .mp-3{padding:20px;border:2px dashed #9aa1b2;border-radius:22px;background:#fafbfd}
.v-artd .sp-339 :where(.prose) .mp-2{margin-top:16px;padding:20px;border:2px solid var(--blue);border-radius:18px;background:#f3f6ff}
.v-artd .sp-339 :where(.prose) .mp-1{margin-top:16px;padding:20px;border-radius:14px;background:var(--navy);color:#fff}
.v-artd .sp-339 :where(.prose) .mp-h{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;color:var(--ink)}
.v-artd .sp-339 :where(.prose) .mp-h span{font-size:13px;font-weight:800;color:var(--sub)}
.v-artd .sp-339 :where(.prose) .mp-2>.mp-h{color:var(--blue)}
.v-artd .sp-339 :where(.prose) .mp-1 .mp-h{color:#fff}
.v-artd .sp-339 :where(.prose) .mp-1 .mp-h span{color:var(--yellow)}
.v-artd .sp-339 :where(.prose) .mp-c{margin:4px 0 6px!important;font-size:13.5px;font-weight:800;color:#5a4500}
.v-artd .sp-339 :where(.prose) .mp-1 .mp-c{color:var(--yellow)}
.v-artd .sp-339 :where(.prose) .mp-d{font-size:14.5px;line-height:1.6;color:#4a5060}
.v-artd .sp-339 :where(.prose) .mp-1 .mp-d{color:#dfe4f7}
.v-artd .sp-339 :where(.prose) .nl-note{margin:16px 0 0;padding:16px 18px;border-radius:12px;background:var(--soft);font-size:15.5px;line-height:1.65}
.v-artd .sp-339 :where(.prose) .nl-note b{display:block;margin-bottom:4px;color:var(--ink)}

/* 시간 띠와 메모 */
.v-artd .sp-339 :where(.prose) .nl-time{display:grid;grid-template-columns:1fr 2fr;margin:4px 0 16px;border-radius:999px;overflow:hidden;font-size:15px;font-weight:800}
.v-artd .sp-339 :where(.prose) .nl-time span{padding:14px 20px}
.v-artd .sp-339 :where(.prose) .tm-a{background:var(--blue2);color:#1d3fc4}
.v-artd .sp-339 :where(.prose) .tm-b{background:#1d3fc4;color:#fff}
.v-artd .sp-339 :where(.prose) .tm-b small{margin-left:10px;font-size:13px;font-weight:600;color:#fff}
.v-artd .sp-339 :where(.prose) .nl-memo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 18px;background:#fff8d6;border:1px solid #efe2a8;transform:rotate(-.6deg);font-size:15px;line-height:1.6;color:#4a5060}
.v-artd .sp-339 :where(.prose) .nl-memo b{width:100%;color:#5a4500}
.v-artd .sp-339 :where(.prose) .nl-memo span{padding:4px 10px;border-radius:6px;background:#fff;font-weight:700;color:var(--ink)}
.v-artd .sp-339 :where(.prose) .nl-memo span:last-of-type{margin-right:100%}

/* 증상 대 처방 */
.v-artd .sp-339 :where(.prose) .nl-diag{display:grid;gap:8px;margin:4px 0 14px}
.v-artd .sp-339 :where(.prose) .dg{display:grid;grid-template-columns:140px 1fr;align-items:stretch;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.v-artd .sp-339 :where(.prose) .dg p{margin:0;padding:14px 16px;font-size:15px}
.v-artd .sp-339 :where(.prose) .dg-s{background:#fde8e8;font-weight:800;color:#b1262b}
.v-artd .sp-339 :where(.prose) .dg-c{font-weight:600;color:var(--ink)}
.v-artd .sp-339 :where(.prose) .nl-undo{display:flex;gap:14px;align-items:center;margin:0 0 14px;padding:14px 18px;border-radius:12px;border:1.5px dashed #9aa1b2}
.v-artd .sp-339 :where(.prose) .nl-undo p{margin:0;font-size:15px;line-height:1.6;color:#4a5060}
.v-artd .sp-339 :where(.prose) .ud-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font-size:22px}

/* 도구 안과 밖 표 */
.v-artd .sp-339 :where(.prose) .nl-split{margin:4px 0 16px;overflow-x:auto}
.v-artd .sp-339 :where(.prose) .sp-h,.v-artd .sp-339 :where(.prose) .sp-r{display:grid;grid-template-columns:1fr 130px 1fr;min-width:560px}
.v-artd .sp-339 :where(.prose) .sp-h span{padding:10px 14px;font-size:13.5px;font-weight:800}
.v-artd .sp-339 :where(.prose) .sp-h span:first-child{background:var(--blue2);color:#1d3fc4;border-radius:12px 0 0 0}
.v-artd .sp-339 :where(.prose) .sp-h span:last-child{background:var(--navy);color:#fff;border-radius:0 12px 0 0;text-align:right}
.v-artd .sp-339 :where(.prose) .sp-r>*{padding:12px 14px;font-size:14.5px;border-bottom:1px solid var(--line)}
.v-artd .sp-339 :where(.prose) .sp-r span:first-child{background:#f6f8ff;color:#4a5060}
.v-artd .sp-339 :where(.prose) .sp-r span:last-child{background:#f4f5f9;color:#4a5060;text-align:right}
.v-artd .sp-339 :where(.prose) .sp-r b{display:grid;place-items:center;text-align:center;background:#fff;color:var(--ink);font-size:15px;border-left:2px solid var(--ink);border-right:2px solid var(--ink)}

/* 전선 */
.v-artd .sp-339 :where(.prose) .nl-wire{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 16px}
.v-artd .sp-339 :where(.prose) .nl-wire>div{padding:18px;border-radius:14px;background:var(--soft)}
.v-artd .sp-339 :where(.prose) .nl-wire p{margin:12px 0 0;font-size:15px;line-height:1.6;color:#4a5060}
.v-artd .sp-339 :where(.prose) .w-red{display:block;height:40px;background:radial-gradient(circle at 10% 50%,#c4282d 5px,transparent 6px),radial-gradient(circle at 90% 50%,#c4282d 5px,transparent 6px);position:relative}
.v-artd .sp-339 :where(.prose) .w-red::before{content:"";position:absolute;left:10%;right:10%;top:8px;height:24px;border:3px solid #c4282d;border-radius:50%;border-bottom-color:transparent;transform:rotate(8deg)}
.v-artd .sp-339 :where(.prose) .w-ok{display:grid;gap:7px;padding:4px 0}
.v-artd .sp-339 :where(.prose) .w-ok i{display:block;height:4px;border-radius:2px;background:var(--blue)}
.v-artd .sp-339 :where(.prose) .w-ok i:nth-child(2){background:var(--navy)}
.v-artd .sp-339 :where(.prose) .w-ok i:nth-child(3){background:#2fb36a}
.v-artd .sp-339 :where(.prose) .w-ok i:nth-child(4){background:var(--yellow)}

/* 위험 격자 */
.v-artd .sp-339 :where(.prose) .nl-risk{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center;margin:4px 0 16px}
.v-artd .sp-339 :where(.prose) .rk-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 0 26px 26px}
.v-artd .sp-339 :where(.prose) .rk-grid i{aspect-ratio:1;border-radius:6px;background:var(--soft)}
.v-artd .sp-339 :where(.prose) .rk-grid i.h{background:#fbd5d5}
.v-artd .sp-339 :where(.prose) .rk-grid i.hh{background:#c4282d}
.v-artd .sp-339 :where(.prose) .rk-grid .rk-y,.v-artd .sp-339 :where(.prose) .rk-grid .rk-x{position:absolute;font-size:12.5px;font-weight:800;color:var(--sub)}
.v-artd .sp-339 :where(.prose) .rk-y{left:-26px;top:50%;transform:translate(-30%,-50%) rotate(-90deg)}
.v-artd .sp-339 :where(.prose) .rk-x{left:50%;bottom:-24px;transform:translateX(-50%)}
.v-artd .sp-339 :where(.prose) .rk-first{display:flex;flex-wrap:wrap;gap:8px}
.v-artd .sp-339 :where(.prose) .rk-first p{width:100%;margin:0;font-size:14px;font-weight:800;color:#b1262b}
.v-artd .sp-339 :where(.prose) .rk-first span{padding:10px 16px;border-radius:10px;background:#c4282d;color:#fff;font-size:15.5px;font-weight:800}

/* 쌓이는 비용 */
.v-artd .sp-339 :where(.prose) .nl-stack{display:flex;flex-direction:column;align-items:center;gap:4px;margin:4px 0 16px}
.v-artd .sp-339 :where(.prose) .nl-stack span{padding:12px;border-radius:8px;text-align:center;font-size:15px;font-weight:800}
.v-artd .sp-339 :where(.prose) .sk-add{width:62%;background:#fff;border:2px dashed var(--blue);color:#1d3fc4}
.v-artd .sp-339 :where(.prose) .sk-add:nth-child(2){width:68%}
.v-artd .sp-339 :where(.prose) .sk-add:nth-child(3){width:74%}
.v-artd .sp-339 :where(.prose) .sk-add:nth-child(4){width:80%}
.v-artd .sp-339 :where(.prose) .sk-base{width:100%;background:var(--ink);color:#fff}

/* 플러그 넷 */
.v-artd .sp-339 :where(.prose) .nl-plug{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 16px}
.v-artd .sp-339 :where(.prose) .nl-plug div{position:relative;padding:18px 18px 18px 70px;border-radius:14px;border:1px solid var(--line);font-size:14.5px;line-height:1.6;color:#4a5060}
.v-artd .sp-339 :where(.prose) .nl-plug b{display:block;font-size:16px;color:var(--ink)}
.v-artd .sp-339 :where(.prose) .pg-ic{position:absolute;left:18px;top:18px;width:36px;height:36px;border-radius:10px;background:var(--blue2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e5bff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 2v5M15 2v5M6 7h12v4a6 6 0 0 1-12 0zM12 17v5'/%3E%3C/svg%3E") center/22px no-repeat}

/* 근무 기록표 */
.v-artd .sp-339 :where(.prose) .nl-sheet{margin:4px 0 16px;padding:16px;border-radius:14px;background:#fffaf0;border:1px solid #f1e3bf;overflow-x:auto}
.v-artd .sp-339 :where(.prose) .nl-sheet table{margin:0;font-size:15px;background:#fff}
.v-artd .sp-339 :where(.prose) .nl-sheet th{background:#f6ead0;color:#5a4500;font-size:13.5px}
.v-artd .sp-339 :where(.prose) .nl-sheet td{height:42px}
.v-artd .sp-339 :where(.prose) .nl-sheet td+td{border-left:1px solid var(--line);width:24%}
.v-artd .sp-339 :where(.prose) .sh-f{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 0;font-size:20px;color:#5a4500;font-weight:300}
.v-artd .sp-339 :where(.prose) .sh-f span{padding:8px 14px;border-radius:8px;background:#fff;border:1px solid #f1e3bf;font-size:15px;font-weight:800;color:var(--ink)}
.v-artd .sp-339 :where(.prose) .sh-f b{padding:8px 14px;border-radius:8px;background:var(--navy);color:#fff;font-size:15px}

/* 이삿짐 상자 */
.v-artd .sp-339 :where(.prose) .nl-move{display:grid;grid-template-columns:140px 1fr;gap:22px;align-items:center;margin:4px 0 16px}
.v-artd .sp-339 :where(.prose) .mv-box{height:110px;border-radius:6px;background:linear-gradient(#c9a978,#c9a978) 50% 0/26px 100% no-repeat,#e7d3ae;box-shadow:inset 0 -8px 0 #d3b98a;position:relative}
.v-artd .sp-339 :where(.prose) .mv-box::before{content:"";position:absolute;left:-6px;right:-6px;top:-10px;height:14px;border-radius:4px;background:#d9c28f}
.v-artd .sp-339 :where(.prose) .nl-move ul{display:flex;flex-wrap:wrap;gap:8px}
.v-artd .sp-339 :where(.prose) .nl-move li{padding:9px 14px;border-radius:8px;background:var(--soft);font-size:15px;font-weight:700;color:var(--ink)}
.v-artd .sp-339 :where(.prose) .nl-move li::after{content:" ✓";color:var(--blue)}

/* 진행 방식 */
.v-artd .sp-339 :where(.prose) .nl-we{margin:56px 0 12px;padding:26px 28px;border-radius:20px;background:linear-gradient(135deg,var(--navy),#2c44b8);color:#fff}
.v-artd .sp-339 :where(.prose) .we-k{margin:0;font-size:13px;font-weight:800;color:#a9b9ff}
.v-artd .sp-339 :where(.prose) .we-t{margin:2px 0 14px;font-size:21px;font-weight:800}
.v-artd .sp-339 :where(.prose) .nl-we ul{margin:0 0 18px!important;display:grid;gap:8px}
.v-artd .sp-339 :where(.prose) .nl-we li{padding:12px 16px;border-radius:10px;background:rgba(255,255,255,.1);font-size:15.5px;line-height:1.55}
.v-artd .sp-339 :where(.prose) .we-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-339 :where(.prose) .we-btn:hover{background:var(--yellow)}

.v-artd .sp-339 :where(.prose) .nl-rel{margin:36px 0 10px!important;padding:16px 0 0!important;border-top:1px solid var(--line)}
.v-artd .sp-339 :where(.prose) .nl-rel li{padding:6px 0}
.v-artd .sp-339 :where(.prose) .nl-rel a{font-weight:700;text-decoration:none}
.v-artd .sp-339 :where(.prose) .nl-rel a::before{content:"→ ";color:var(--sub)}

@media (max-width:720px){
  .v-artd .sp-339 :where(.prose) .nl-lead{font-size:18px}
  .v-artd .sp-339 .prose h2{font-size:23px}
  .v-artd .sp-339 :where(.prose) .nl-s{padding-top:46px}
  .v-artd .sp-339 :where(.prose) .mp-3{padding:14px}
  .v-artd .sp-339 :where(.prose) .mp-2{padding:14px}
  .v-artd .sp-339 :where(.prose) .mp-1{padding:16px}
  .v-artd .sp-339 :where(.prose) .nl-time{grid-template-columns:1fr;border-radius:14px}
  .v-artd .sp-339 :where(.prose) .tm-b small{display:block;margin:4px 0 0}
  .v-artd .sp-339 :where(.prose) .dg{grid-template-columns:1fr}
  .v-artd .sp-339 :where(.prose) .sp-h{display:none}
  .v-artd .sp-339 :where(.prose) .sp-r{grid-template-columns:1fr 1fr;min-width:0;margin-bottom:10px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
  .v-artd .sp-339 :where(.prose) .sp-r b{order:-1;grid-column:1/-1;border:0;background:var(--ink);color:#fff;place-items:start;text-align:left}
  .v-artd .sp-339 :where(.prose) .sp-r>*{border-bottom:0;font-size:14px}
  .v-artd .sp-339 :where(.prose) .sp-r span:last-child{text-align:left}
  .v-artd .sp-339 :where(.prose) .sp-r span::before{display:block;margin-bottom:2px;font-size:12px;font-weight:800}
  .v-artd .sp-339 :where(.prose) .sp-r span:first-of-type::before{content:"현재 도구";color:#1d3fc4}
  .v-artd .sp-339 :where(.prose) .sp-r span:last-of-type::before{content:"외부 구현";color:var(--ink)}
  .v-artd .sp-339 :where(.prose) .nl-wire{grid-template-columns:1fr}
  .v-artd .sp-339 :where(.prose) .nl-risk{grid-template-columns:1fr;gap:20px}
  .v-artd .sp-339 :where(.prose) .rk-grid{max-width:200px}
  .v-artd .sp-339 :where(.prose) .sk-add:nth-child(n){width:90%}
  .v-artd .sp-339 :where(.prose) .nl-plug{grid-template-columns:1fr}
  .v-artd .sp-339 :where(.prose) .nl-move{grid-template-columns:1fr}
  .v-artd .sp-339 :where(.prose) .mv-box{width:140px}
  .v-artd .sp-339 :where(.prose) .nl-we{padding:22px 18px}
}