/* 352 자료 구조와 API 설계 문서의 제공, 갱신 시기 = 설계 문서 지면과 버전(2026-10-16 글마다 다른 레이아웃).
   검토 범위 여덟 항목은 설계 문서 목차(오른쪽 여백에 예시), 변경 영향은 물결 원, 사례는 앱 검색 화면, 현재 값과 당시 기록은 두 기록 카드,
   통계는 비어 있는 열이 있는 기록 표, 문서 관리는 문서 관리 칸, 문서 범위는 계단, 시점별 버전은 판 번호 띠 */
.v-artd .sp-352 .prose{font-size:17px}
.v-artd .sp-352 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-352 .prose h2::before,.v-artd .sp-352 .prose h2::after{content:none}
.v-artd .sp-352 :where(.prose) .sd-s{padding:60px 0 6px}
.v-artd .sp-352 :where(.prose) .sd-s>p{margin:0 0 16px}
.v-artd .sp-352 :where(.prose) .sd-lead{font-size:20px;line-height:1.7;color:var(--ink);margin:0 0 28px}
.v-artd .sp-352 :where(.prose) .sd-lead b{box-shadow:inset 0 -.45em 0 var(--blue2)}

/* 설계 문서 목차 지면 */
.v-artd .sp-352 :where(.prose) .sd-doc{position:relative;margin:0 0 22px;padding:30px 34px 22px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:8px 8px 0 -1px var(--soft),8px 8px 0 0 var(--line),0 24px 50px -36px rgba(27,31,58,.4)}
.v-artd .sp-352 :where(.prose) .sd-doc-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;margin-bottom:6px;border-bottom:2px solid var(--ink)}
.v-artd .sp-352 :where(.prose) .sd-doc-h span{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
.v-artd .sp-352 :where(.prose) .sd-doc-h em{font-style:normal;font-size:13px;font-weight:700;color:var(--sub)}
.v-artd .sp-352 :where(.prose) .sd-toc{margin:0;padding:0;list-style:none;counter-reset:t}
.v-artd .sp-352 :where(.prose) .sd-toc li{counter-increment:t;display:grid;grid-template-columns:34px 1fr 200px;column-gap:10px;margin:0;padding:12px 0;border-bottom:1px dotted #c9cedb;font-size:15px;line-height:1.5}
.v-artd .sp-352 :where(.prose) .sd-toc li::before{content:counter(t) ".";grid-row:1/3;font-weight:800;color:var(--blue);font-size:15px}
.v-artd .sp-352 :where(.prose) .sd-toc b{grid-column:2;color:var(--ink);font-size:16px}
.v-artd .sp-352 :where(.prose) .sd-toc span{grid-column:2;color:var(--sub)}
.v-artd .sp-352 :where(.prose) .sd-toc i{grid-column:3;grid-row:1/3;align-self:center;padding:7px 10px;border-radius:8px;background:var(--soft);font-style:normal;font-size:13px;line-height:1.45;color:#3a4152}
.v-artd .sp-352 :where(.prose) .sd-quote{margin:28px 0 0;padding:0 0 0 0;border:0;font-size:23px;font-weight:800;line-height:1.5;letter-spacing:-.5px;color:var(--navy);text-align:center}
.v-artd .sp-352 :where(.prose) .sd-quote::before{content:"“";display:block;font-size:56px;line-height:.8;color:var(--blue)}

/* 물결 원 */
.v-artd .sp-352 :where(.prose) .sd-ripple{position:relative;height:270px;margin:6px 0 24px;border-radius:18px;background:radial-gradient(circle at 50% 50%,var(--blue2) 0 52px,transparent 53px),radial-gradient(circle at 50% 50%,transparent 0 92px,#dfe5f7 93px 94px,transparent 95px),radial-gradient(circle at 50% 50%,transparent 0 126px,#e7ebf6 127px 128px,transparent 129px),var(--soft)}
.v-artd .sp-352 :where(.prose) .sr-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:104px;text-align:center;font-size:14.5px;font-weight:800;line-height:1.35;color:#1d3fc4}
.v-artd .sp-352 :where(.prose) .sr-i{position:absolute;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;box-shadow:0 8px 16px -12px rgba(27,31,58,.4)}
.v-artd .sp-352 :where(.prose) .sr-1{left:50%;top:18px;transform:translateX(-50%)}
.v-artd .sp-352 :where(.prose) .sr-2{right:calc(50% + 120px);top:50%;transform:translateY(-50%)}
.v-artd .sp-352 :where(.prose) .sr-3{left:calc(50% + 120px);top:50%;transform:translateY(-50%)}
.v-artd .sp-352 :where(.prose) .sr-4{left:50%;bottom:18px;transform:translateX(-50%)}

/* 사례: 앱 검색 화면 */
.v-artd .sp-352 :where(.prose) .sd-case{display:grid;grid-template-columns:230px 1fr;column-gap:34px}
.v-artd .sp-352 :where(.prose) .sd-case>h2,.v-artd .sp-352 :where(.prose) .sd-case>p{grid-column:1/-1}
.v-artd .sp-352 :where(.prose) .sd-phone{align-self:start;padding:10px;border-radius:30px;background:var(--ink)}
.v-artd .sp-352 :where(.prose) .sp-screen{padding:14px 12px 18px;border-radius:22px;background:#fff}
.v-artd .sp-352 :where(.prose) .sp-screen p{margin:0}
.v-artd .sp-352 :where(.prose) .sp-bar{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:10px!important}
.v-artd .sp-352 :where(.prose) .sp-chips{display:flex;gap:6px;margin-bottom:12px!important}
.v-artd .sp-352 :where(.prose) .sp-chips span{padding:5px 10px;border-radius:999px;background:var(--navy);color:#fff;font-size:12.5px;font-weight:700}
.v-artd .sp-352 :where(.prose) .sp-res{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:10px;margin-top:8px}
.v-artd .sp-352 :where(.prose) .sp-pic{flex:none;width:52px;height:52px;border-radius:8px;background:linear-gradient(135deg,#dfe6ff,#c5d1f7)}
.v-artd .sp-352 :where(.prose) .sp-res b{display:block;font-size:12.5px;color:var(--sub)}
.v-artd .sp-352 :where(.prose) .sp-res em{font-style:normal;font-size:14px;font-weight:800;color:var(--ink)}
.v-artd .sp-352 :where(.prose) .sd-case-t p{margin:0 0 14px}
.v-artd .sp-352 :where(.prose) .sd-ask{margin:12px 0 0;padding:16px 20px;border-radius:12px;background:var(--navy);color:#fff;font-size:16px;line-height:1.6}

/* 현재 값과 당시 기록 */
.v-artd .sp-352 :where(.prose) .sd-rec{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:6px 0 22px}
.v-artd .sp-352 :where(.prose) .rc{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.v-artd .sp-352 :where(.prose) .rc p{margin:0}
.v-artd .sp-352 :where(.prose) .rc-h{padding:10px 16px;font-size:14px;font-weight:800;color:#fff;background:var(--blue)}
.v-artd .sp-352 :where(.prose) .rc-then .rc-h{background:var(--ink)}
.v-artd .sp-352 :where(.prose) .rc-r{display:flex;justify-content:space-between;gap:10px;padding:14px 16px;font-size:15px}
.v-artd .sp-352 :where(.prose) .rc-r span{color:var(--sub)}
.v-artd .sp-352 :where(.prose) .rc-r b{color:var(--ink)}
.v-artd .sp-352 :where(.prose) .rc-then .rc-r{background:repeating-linear-gradient(-45deg,#fff 0 8px,#f4f5f9 8px 16px)}
.v-artd .sp-352 :where(.prose) .rc-then .rc-r b::before{content:"🔒 ";font-size:13px}

/* 비어 있는 열이 있는 기록 표 */
.v-artd .sp-352 :where(.prose) .sd-log{margin:6px 0 22px;overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.v-artd .sp-352 :where(.prose) .sd-log table{margin:0;min-width:480px;border-radius:0;font-size:14.5px}
.v-artd .sp-352 :where(.prose) .sd-log th{background:var(--soft);font-size:13.5px;padding:11px 14px}
.v-artd .sp-352 :where(.prose) .sd-log td{height:44px;padding:0 14px}
.v-artd .sp-352 :where(.prose) .sd-log td:first-child{font-weight:400}
.v-artd .sp-352 :where(.prose) .sd-log .miss{background:#fff6f6;color:#b3261e;text-align:center}
.v-artd .sp-352 :where(.prose) .sd-log th.miss{border-bottom:2px dashed #e5484d}
.v-artd .sp-352 :where(.prose) .sd-log td.miss{font-size:13px;border-left:1px dashed #f0b4b1}

/* 업무 예시로 설명받기 */
.v-artd .sp-352 :where(.prose) .sd-walk{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 20px}
.v-artd .sp-352 :where(.prose) .sw{padding:16px 16px 18px;border-radius:14px;background:var(--soft);font-size:14.5px;line-height:1.55;color:var(--sub);position:relative}
.v-artd .sp-352 :where(.prose) .sw b{display:block;margin-bottom:6px;font-size:16px;color:var(--ink)}
.v-artd .sp-352 :where(.prose) .sw::after{content:"";position:absolute;left:22px;bottom:-9px;border:9px solid transparent;border-top-color:var(--soft);border-bottom:0}

/* 문서 관리 칸 */
.v-artd .sp-352 :where(.prose) .sd-ctl{display:grid;grid-template-columns:1fr 1fr;margin:6px 0 20px;border:2px solid var(--ink);border-radius:4px}
.v-artd .sp-352 :where(.prose) .sd-ctl p{margin:0;display:flex;font-size:14.5px;border-bottom:1px solid var(--ink)}
.v-artd .sp-352 :where(.prose) .sd-ctl p:nth-child(odd){border-right:1px solid var(--ink)}
.v-artd .sp-352 :where(.prose) .sd-ctl p:nth-last-child(-n+2){border-bottom:0}
.v-artd .sp-352 :where(.prose) .sd-ctl span{flex:none;width:92px;padding:11px 12px;background:var(--soft);font-weight:800;color:var(--ink);border-right:1px solid var(--ink)}
.v-artd .sp-352 :where(.prose) .sd-ctl b{padding:11px 12px;font-weight:500;color:#3a4152}

/* 계단 */
.v-artd .sp-352 :where(.prose) .sd-stair{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:10px;margin:10px 0 22px;padding:0;list-style:none;counter-reset:s}
.v-artd .sp-352 :where(.prose) .sd-stair li{counter-increment:s;margin:0;padding:16px 16px 18px;border-radius:12px 12px 0 0;background:var(--blue2);font-size:14px;line-height:1.55;color:#28305a}
.v-artd .sp-352 :where(.prose) .sd-stair li::before{content:counter(s);display:grid;place-items:center;width:26px;height:26px;margin-bottom:10px;border-radius:50%;background:#fff;color:#1d3fc4;font-weight:800;font-size:14px}
.v-artd .sp-352 :where(.prose) .sd-stair li:nth-child(2){min-height:200px;background:#c9d5ff}
.v-artd .sp-352 :where(.prose) .sd-stair li:nth-child(3){min-height:250px;background:var(--blue);color:#fff}
.v-artd .sp-352 :where(.prose) .sd-stair li:nth-child(1){min-height:150px}
.v-artd .sp-352 :where(.prose) .sd-stair b{display:block;margin-bottom:6px;font-size:16px;color:inherit}

/* 시점별 판 */
.v-artd .sp-352 :where(.prose) .sd-ver{display:flex;margin:8px 0 20px;padding:0;list-style:none}
.v-artd .sp-352 :where(.prose) .sd-ver li{flex:1;margin:0;padding:16px 18px 16px 22px;position:relative;background:var(--soft);font-size:14.5px;color:var(--sub);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%)}
.v-artd .sp-352 :where(.prose) .sd-ver li:first-child{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%);padding-left:18px}
.v-artd .sp-352 :where(.prose) .sd-ver li+li{margin-left:-8px;padding-left:30px}
.v-artd .sp-352 :where(.prose) .sd-ver li:last-child{background:var(--navy);color:#cfd6f2}
.v-artd .sp-352 :where(.prose) .sd-ver .v{display:inline-block;margin-bottom:6px;padding:2px 8px;border-radius:6px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:800}
.v-artd .sp-352 :where(.prose) .sd-ver b{display:block;font-size:16px;color:var(--ink)}
.v-artd .sp-352 :where(.prose) .sd-ver li:last-child b{color:#fff}

/* 흐름소프트 진행 방식 = 문서가 이어지는 띠 */
.v-artd .sp-352 :where(.prose) .sd-we{margin:36px 0 10px;padding:28px 30px;border-radius:20px;background:linear-gradient(135deg,var(--navy),#27306b);color:#fff}
.v-artd .sp-352 :where(.prose) .sw-k{margin:0 0 6px;font-size:13px;font-weight:800;color:#9fb3ff}
.v-artd .sp-352 :where(.prose) .sw-t{margin:0 0 20px;font-size:20px;font-weight:800;line-height:1.45}
.v-artd .sp-352 :where(.prose) .sw-flow{margin:0 0 22px}
.v-artd .sp-352 :where(.prose) .sw-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.v-artd .sp-352 :where(.prose) .sw-l{flex:none;width:58px;font-size:13px;font-weight:800;color:#aab3d6}
.v-artd .sp-352 :where(.prose) .sw-d{position:relative;padding:9px 14px;border-radius:8px;background:#fff;color:var(--navy);font-size:14px;font-weight:800}
.v-artd .sp-352 :where(.prose) .sw-row:not(.sw-after) .sw-d:not(:last-child)::after{content:"";position:absolute;right:-8px;top:50%;width:8px;height:2px;background:#9aa6d8}
.v-artd .sp-352 :where(.prose) .sw-after .sw-d{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3)}
.v-artd .sp-352 :where(.prose) .sw-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-352 :where(.prose) .sw-btn:hover{background:var(--blue2)}

.v-artd .sp-352 :where(.prose) .sd-rel{margin:40px 0 18px;padding:18px 0 0;border-top:1px solid var(--line);list-style:none}
.v-artd .sp-352 :where(.prose) .sd-rel li{margin:0;padding:6px 0}
.v-artd .sp-352 :where(.prose) .sd-rel li::before{content:none}
.v-artd .sp-352 :where(.prose) .sd-rel a{font-weight:700;text-decoration:none}
.v-artd .sp-352 :where(.prose) .sd-rel a::before{content:"→ ";color:var(--sub)}

@media (max-width:720px){
  .v-artd .sp-352 :where(.prose) .sd-lead{font-size:18px}
  .v-artd .sp-352 .prose h2{font-size:23px}
  .v-artd .sp-352 :where(.prose) .sd-s{padding-top:48px}
  .v-artd .sp-352 :where(.prose) .sd-doc{padding:22px 18px 14px}
  .v-artd .sp-352 :where(.prose) .sd-toc li{grid-template-columns:28px 1fr}
  .v-artd .sp-352 :where(.prose) .sd-toc i{grid-column:2;grid-row:auto;margin-top:8px}
  .v-artd .sp-352 :where(.prose) .sd-quote{font-size:19px}
  .v-artd .sp-352 :where(.prose) .sd-ripple{height:auto;padding:20px;background:var(--soft);display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .v-artd .sp-352 :where(.prose) .sr-c,.v-artd .sp-352 :where(.prose) .sr-i{position:static;transform:none}
  .v-artd .sp-352 :where(.prose) .sr-c{width:100%;margin-bottom:6px}
  .v-artd .sp-352 :where(.prose) .sd-case{grid-template-columns:1fr}
  .v-artd .sp-352 :where(.prose) .sd-phone{width:220px;margin:0 auto 22px}
  .v-artd .sp-352 :where(.prose) .sd-rec{grid-template-columns:1fr}
  .v-artd .sp-352 :where(.prose) .sd-walk{grid-template-columns:1fr;gap:18px}
  .v-artd .sp-352 :where(.prose) .sd-ctl{grid-template-columns:1fr}
  .v-artd .sp-352 :where(.prose) .sd-ctl p:nth-child(odd){border-right:0}
  .v-artd .sp-352 :where(.prose) .sd-ctl p:nth-last-child(2){border-bottom:1px solid var(--ink)}
  .v-artd .sp-352 :where(.prose) .sd-stair{grid-template-columns:1fr}
  .v-artd .sp-352 :where(.prose) .sd-stair li,.v-artd .sp-352 :where(.prose) .sd-stair li:nth-child(n){min-height:0;border-radius:12px}
  .v-artd .sp-352 :where(.prose) .sd-stair li:nth-child(1){margin-right:30%}
  .v-artd .sp-352 :where(.prose) .sd-stair li:nth-child(2){margin-right:15%}
  .v-artd .sp-352 :where(.prose) .sd-ver{flex-direction:column;gap:6px}
  .v-artd .sp-352 :where(.prose) .sd-ver li,.v-artd .sp-352 :where(.prose) .sd-ver li:first-child{clip-path:none;border-radius:10px;padding:14px 16px}
  .v-artd .sp-352 :where(.prose) .sd-ver li+li{margin-left:0;padding-left:16px}
  .v-artd .sp-352 :where(.prose) .sd-we{padding:24px 22px}
}