/* 304 자료의 생성 출처와 개인정보 보관 기한 = 자료 흐름판과 생애 자(2026-10-16 글마다 다른 레이아웃).
   처음은 입력, 처리, 저장, 조회 네 열 흐름판(위는 설명, 아래는 예약 예시 칸), 대조는 세 줄 대응표(찾을 것 붉은 꼬리표),
   표시 범위는 같은 정보의 화면 셋 뼈대, 생성 경로는 네 줄기가 저장 원통으로, 성능은 나눠 보기 목록과 쪽 번호,
   개인정보는 수집에서 삭제까지 시간 자, 최소 수집은 항목 체크, 문서화는 화살표 위 조건, 기관은 결재 칸 셋 */
.v-artd .sp-304 .prose{font-size:17px}
.v-artd .sp-304 :where(.prose) .df-lead{font-size:20px;line-height:1.7;color:var(--ink);margin:0 0 24px}
.v-artd .sp-304 :where(.prose) .df-lead b{color:var(--blue)}
.v-artd .sp-304 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-304 .prose h2::before,.v-artd .sp-304 .prose h2::after{content:none}
.v-artd .sp-304 :where(.prose) .df-s{padding:60px 0 4px}
.v-artd .sp-304 :where(.prose) .df-s>p{margin:0 0 16px}
.v-artd .sp-304 .prose ul,.v-artd .sp-304 .prose ol{margin:0;padding:0;list-style:none}
.v-artd .sp-304 .prose li{margin:0}
.v-artd .sp-304 .prose li::before{content:none}

/* 흐름판 */
.v-artd .sp-304 :where(.prose) .df-board{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:0 0 18px;padding:22px 22px 44px;border-radius:18px;background:var(--navy);overflow-x:auto}
.v-artd .sp-304 :where(.prose) .bd-col{position:relative;min-width:0}
.v-artd .sp-304 :where(.prose) .bd-col+.bd-col::before{content:"";position:absolute;left:-26px;top:16px;border:7px solid transparent;border-left:12px solid var(--yellow);border-right:0}
.v-artd .sp-304 :where(.prose) .bd-h{margin:0 0 6px;font-size:18px;font-weight:800;color:#fff}
.v-artd .sp-304 :where(.prose) .bd-d{margin:0 0 14px;min-height:44px;font-size:13.5px;line-height:1.55;color:#c9d0ea}
.v-artd .sp-304 :where(.prose) .bd-col ul{display:grid;gap:6px;padding-top:12px!important;border-top:1px dashed rgba(255,255,255,.3)}
.v-artd .sp-304 :where(.prose) .bd-col li{padding:8px 10px;border-radius:8px;background:#fff;font-size:13.5px;font-weight:700;color:var(--ink)}
.v-artd .sp-304 :where(.prose) .bd-col:first-child li,.v-artd .sp-304 :where(.prose) .bd-col:last-child li{background:var(--blue2);color:#1d3fc4}
.v-artd .sp-304 :where(.prose) .bd-ex{position:absolute;left:22px;bottom:14px;margin:0;font-size:12.5px;font-weight:700;color:#aab3d6}

/* 대응표 */
.v-artd .sp-304 :where(.prose) .df-match{margin:4px 0 16px;border-top:2px solid var(--ink)}
.v-artd .sp-304 :where(.prose) .mt-r{display:grid;grid-template-columns:120px 1fr 190px;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.v-artd .sp-304 :where(.prose) .mt-r p{margin:0}
.v-artd .sp-304 :where(.prose) .mt-k{font-size:16px;font-weight:800;color:var(--ink)}
.v-artd .sp-304 :where(.prose) .mt-v{font-size:15px;line-height:1.6;color:#4a5060}
.v-artd .sp-304 :where(.prose) .mt-f{position:relative;padding:8px 12px 8px 26px;border-radius:0 8px 8px 0;background:#fde8e8;font-size:14px;font-weight:800;color:#b1262b;clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%)}
.v-artd .sp-304 :where(.prose) .df-edit{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 14px}
.v-artd .sp-304 :where(.prose) .df-edit p{margin:0 6px 0 0;font-size:14.5px;font-weight:800;color:var(--sub)}
.v-artd .sp-304 :where(.prose) .df-edit span{padding:8px 14px;border-radius:8px;border:1.5px solid var(--ink);font-size:15px;font-weight:700;color:var(--ink)}
.v-artd .sp-304 :where(.prose) .df-edit span:last-child{border-style:dashed;color:#5b6475}

/* 화면 셋 뼈대 */
.v-artd .sp-304 :where(.prose) .df-views{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:14px;align-items:start;margin:4px 0 16px}
.v-artd .sp-304 :where(.prose) .vw{padding:16px;border-radius:14px;border:1px solid var(--line);background:#fff}
.v-artd .sp-304 :where(.prose) .vw p{margin:0 0 12px;font-size:14px;font-weight:800;color:var(--ink)}
.v-artd .sp-304 :where(.prose) .vw i{display:block;height:12px;margin:0 0 8px;border-radius:6px;background:var(--line)}
.v-artd .sp-304 :where(.prose) .vw i.s{width:55%}
.v-artd .sp-304 :where(.prose) .vw-c{border-radius:22px;border:6px solid var(--navy)}
.v-artd .sp-304 :where(.prose) .vw-a i{height:14px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--line) 0 30%,#fff 30% 33%)}
.v-artd .sp-304 :where(.prose) .vw-m{background:var(--blue2);border:0;border-radius:16px 16px 16px 4px}
.v-artd .sp-304 :where(.prose) .vw-m i{background:#b9c6f7}

/* 생성 경로: 네 줄기 > 저장 */
.v-artd .sp-304 :where(.prose) .df-src{display:grid;grid-template-columns:1fr 140px;grid-template-rows:repeat(4,auto);gap:8px 40px;align-items:center;margin:4px 0 14px}
.v-artd .sp-304 :where(.prose) .sr{position:relative;grid-column:1;padding:12px 16px;border-radius:12px;background:var(--soft);font-size:14.5px;line-height:1.6;color:#4a5060}
.v-artd .sp-304 :where(.prose) .sr b{display:block;font-size:16px;color:var(--ink)}
.v-artd .sp-304 :where(.prose) .sr::after{content:"";position:absolute;right:-40px;top:50%;width:38px;border-top:2px solid var(--blue)}
.v-artd .sp-304 :where(.prose) .sr-db{grid-column:2;grid-row:1/5;position:relative;height:180px;border-radius:50%/22px;background:var(--blue);display:grid;place-items:center}
.v-artd .sp-304 :where(.prose) .sr-db::before{content:"";position:absolute;left:0;right:0;top:0;height:44px;border-radius:50%;background:#6f8dff}
.v-artd .sp-304 :where(.prose) .sr-db span{position:relative;color:#fff;font-size:17px;font-weight:800}

/* 성능: 나눠 보기 */
.v-artd .sp-304 :where(.prose) .df-page{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;align-items:start;margin:4px 0 16px;padding:20px;border-radius:16px;border:1px solid var(--line)}
.v-artd .sp-304 :where(.prose) .pg-list i{display:block;height:28px;margin:0 0 6px;border-radius:6px;background:var(--soft)}
.v-artd .sp-304 :where(.prose) .pg-nav{grid-column:1;display:flex;gap:6px}
.v-artd .sp-304 :where(.prose) .pg-nav span{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--ink)}
.v-artd .sp-304 :where(.prose) .pg-nav .on{background:var(--blue);border-color:var(--blue);color:#fff}
.v-artd .sp-304 :where(.prose) .pg-ops{grid-column:2;grid-row:1/3;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.v-artd .sp-304 :where(.prose) .pg-ops p{width:100%;margin:0 0 4px;font-size:14px;font-weight:800;color:var(--sub)}
.v-artd .sp-304 :where(.prose) .pg-ops span{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;background:#fff8d6;font-size:15px;font-weight:800;color:#5a4500}
.v-artd .sp-304 :where(.prose) .pg-ops span::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid #8a6d00;border-top-color:transparent}

/* 개인정보 시간 자 */
.v-artd .sp-304 :where(.prose) .df-life{position:relative;margin:6px 0 18px;padding:22px 22px 18px;border-radius:18px;background:var(--soft)}
.v-artd .sp-304 :where(.prose) .df-life ol{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.v-artd .sp-304 :where(.prose) .df-life li{padding:12px;border-radius:10px;background:#fff;font-size:16px;font-weight:800;color:var(--ink)}
.v-artd .sp-304 :where(.prose) .df-life li small{display:block;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--sub);line-height:1.4}
.v-artd .sp-304 :where(.prose) .df-life li:last-child{background:var(--ink);color:#fff}
.v-artd .sp-304 :where(.prose) .df-life li:last-child small{color:#c9d0ea}
.v-artd .sp-304 :where(.prose) .lf-ruler{height:18px;margin:12px 0 10px;background:repeating-linear-gradient(90deg,#9aa1b2 0 1.5px,transparent 1.5px 12px) bottom/100% 8px no-repeat,repeating-linear-gradient(90deg,#1b1f3a 0 2px,transparent 2px 60px) bottom/100% 16px no-repeat;border-bottom:2px solid #1b1f3a}
.v-artd .sp-304 :where(.prose) .lf-law,.v-artd .sp-304 :where(.prose) .lf-req{margin:0;font-size:14px;font-weight:700}
.v-artd .sp-304 :where(.prose) .lf-law{color:#5a4500}
.v-artd .sp-304 :where(.prose) .lf-law::before{content:"⚖ "}
.v-artd .sp-304 :where(.prose) .lf-req{margin-top:6px;color:#1d3fc4}
.v-artd .sp-304 :where(.prose) .lf-req::before{content:"↺ "}
.v-artd .sp-304 :where(.prose) .df-min{margin:4px 0 16px;padding:20px 22px;border-radius:0 14px 14px 0;border-left:6px solid #c4282d;background:#fff6f6}
.v-artd .sp-304 :where(.prose) .mn-h{margin:0 0 4px;font-size:16.5px;font-weight:800;color:#b1262b}
.v-artd .sp-304 :where(.prose) .mn-d{margin:0 0 12px;font-size:15px;color:#4a5060}
.v-artd .sp-304 :where(.prose) .mn-q{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.v-artd .sp-304 :where(.prose) .mn-q span{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:#fff;border:1px solid #f3caca;font-size:15px;font-weight:700;color:var(--ink)}
.v-artd .sp-304 :where(.prose) .mn-q span::before{content:"?";display:grid;place-items:center;width:18px;height:18px;border-radius:4px;border:1.5px solid #b1262b;color:#b1262b;font-size:12px;font-weight:800}
.v-artd .sp-304 :where(.prose) .mn-q b{font-size:14px;color:#b1262b}

/* 문서화 */
.v-artd .sp-304 :where(.prose) .df-doc{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:6px 0;align-items:center;margin:4px 0 16px;padding:22px;border-radius:16px;background:#fbfcff radial-gradient(#d5dae8 1px,transparent 1.2px) 0 0/16px 16px;border:1px solid var(--line)}
.v-artd .sp-304 :where(.prose) .dc-n{padding:14px 22px;border-radius:10px;background:#fff;border:2px solid var(--ink);font-size:15.5px;font-weight:800;color:var(--ink)}
.v-artd .sp-304 :where(.prose) .dc-a{position:relative;height:2px;margin:0 6px;background:var(--blue)}
.v-artd .sp-304 :where(.prose) .dc-a::after{content:"";position:absolute;right:-2px;top:-6px;border:7px solid transparent;border-left:10px solid var(--blue);border-right:0}
.v-artd .sp-304 :where(.prose) .dc-a em{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:13px;font-weight:800;color:#1d3fc4;background:#fbfcff;padding:0 6px}
.v-artd .sp-304 :where(.prose) .dc-e{grid-column:3;grid-row:2;margin-top:12px;padding:8px 12px;border-radius:8px;border:1.5px dashed #c4282d;font-size:13.5px;font-weight:800;color:#b1262b}

/* 결재 칸 셋 */
.v-artd .sp-304 :where(.prose) .df-appr{display:inline-grid;grid-template-columns:repeat(3,90px);margin:4px 0 16px;border:2px solid var(--ink)}
.v-artd .sp-304 :where(.prose) .df-appr li{padding:8px 0 44px;text-align:center;font-size:14.5px;font-weight:800;color:var(--ink);border-left:1px solid var(--ink);background:linear-gradient(var(--ink),var(--ink)) 0 36px/100% 1px no-repeat}
.v-artd .sp-304 :where(.prose) .df-appr li:first-child{border-left:0}

/* 진행 방식: 파일 넷 */
.v-artd .sp-304 :where(.prose) .df-we{margin:56px 0 12px;padding:26px 28px;border-radius:20px;background:var(--blue2)}
.v-artd .sp-304 :where(.prose) .we-k{margin:0 0 4px;font-size:13px;font-weight:800;color:#1d3fc4}
.v-artd .sp-304 :where(.prose) .we-t{margin:0 0 16px;font-size:20px;font-weight:800;color:var(--ink)}
.v-artd .sp-304 :where(.prose) .we-files{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.v-artd .sp-304 :where(.prose) .we-files span{position:relative;width:96px;height:112px;padding:62px 8px 0;border-radius:4px 18px 4px 4px;background:#fff;text-align:center;font-size:14px;font-weight:800;color:var(--ink);box-shadow:0 10px 20px -16px rgba(27,31,58,.5)}
.v-artd .sp-304 :where(.prose) .we-files span::before{content:"";position:absolute;left:50%;top:18px;width:34px;height:34px;margin-left:-17px;border-radius:8px}
.v-artd .sp-304 :where(.prose) .f-x::before{background:#1f8a4c}
.v-artd .sp-304 :where(.prose) .f-d::before{background:#2e5bff}
.v-artd .sp-304 :where(.prose) .f-p::before{background:#d2522a}
.v-artd .sp-304 :where(.prose) .f-s::before{background:#1b1f3a}
.v-artd .sp-304 :where(.prose) .we-d{margin:0 0 18px;font-size:15.5px;line-height:1.65;color:var(--ink)}
.v-artd .sp-304 :where(.prose) .we-btn{display:inline-flex;padding:13px 24px;border-radius:999px;background:var(--navy);color:#fff!important;font-weight:800;text-decoration:none!important}
.v-artd .sp-304 :where(.prose) .we-btn:hover{background:var(--blue)}

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

@media (max-width:720px){
  .v-artd .sp-304 :where(.prose) .df-lead{font-size:18px}
  .v-artd .sp-304 .prose h2{font-size:23px}
  .v-artd .sp-304 :where(.prose) .df-s{padding-top:46px}
  .v-artd .sp-304 :where(.prose) .df-board{grid-template-columns:1fr 1fr;gap:20px 16px;padding:18px 16px 40px}
  .v-artd .sp-304 :where(.prose) .bd-col+.bd-col::before{display:none}
  .v-artd .sp-304 :where(.prose) .bd-d{min-height:0}
  .v-artd .sp-304 :where(.prose) .mt-r{grid-template-columns:1fr;gap:6px}
  .v-artd .sp-304 :where(.prose) .mt-f{justify-self:start}
  .v-artd .sp-304 :where(.prose) .df-views{grid-template-columns:1fr}
  .v-artd .sp-304 :where(.prose) .df-src{grid-template-columns:1fr;gap:8px}
  .v-artd .sp-304 :where(.prose) .sr::after{display:none}
  .v-artd .sp-304 :where(.prose) .sr-db{grid-column:1;grid-row:auto;height:90px;border-radius:50%/16px}
  .v-artd .sp-304 :where(.prose) .sr-db::before{height:32px}
  .v-artd .sp-304 :where(.prose) .df-page{grid-template-columns:1fr}
  .v-artd .sp-304 :where(.prose) .pg-ops{grid-column:1;grid-row:auto}
  .v-artd .sp-304 :where(.prose) .df-life ol{grid-template-columns:1fr 1fr}
  .v-artd .sp-304 :where(.prose) .df-doc{grid-template-columns:1fr;justify-items:start;gap:10px}
  .v-artd .sp-304 :where(.prose) .dc-a{width:2px;height:40px;margin:0 0 0 30px}
  .v-artd .sp-304 :where(.prose) .dc-a::after{right:-6px;top:auto;bottom:-2px;border:7px solid transparent;border-top:10px solid var(--blue);border-bottom:0}
  .v-artd .sp-304 :where(.prose) .dc-a em{left:14px;bottom:auto;top:10px;transform:none;background:none}
  .v-artd .sp-304 :where(.prose) .dc-e{grid-column:1;grid-row:auto;margin-top:0}
  .v-artd .sp-304 :where(.prose) .df-we{padding:22px 18px}
  .v-artd .sp-304 :where(.prose) .we-files span{width:calc(50% - 6px)}
}