/* 302 회원, 예약 자료 관계와 거래 당시 금액 보존 = 자료 관계도(ERD) 지면(2026-10-16 사장님 '공통틀로 하지마 다 다르게').
   첫 구간은 고객 표와 예약 표를 관계선(하나 대 여럿)으로 잇는 관계도, 메모는 설계 주석, 확인 항목은 관계 기호 네 칸,
   예시 자료는 실제 값 가림 > 가상 값, 금액 구간은 가격 계단 + 거래 기록의 '거래 당시 금액' 칸 강조, 변경 영향은 전후 관계,
   확장은 점선 칸(추가 예정), 검토는 사례 입력 시험 */
.v-artd .sp-302 .prose{font-size:17px}
.v-artd .sp-302 :where(.prose) .er-lead{margin:0;font-size:20px;line-height:1.7;color:var(--ink)}
.v-artd .sp-302 :where(.prose) .er-lead b{color:var(--blue)}
.v-artd .sp-302 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:27px;letter-spacing:-.8px;display:block;min-height:0}
.v-artd .sp-302 .prose h2::before,.v-artd .sp-302 .prose h2::after{content:none}
.v-artd .sp-302 :where(.prose) .er-s{padding:62px 0 4px}
.v-artd .sp-302 :where(.prose) .er-s>p{margin:0 0 16px}

/* 관계도 */
.v-artd .sp-302 :where(.prose) .er-diag{display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;margin:8px 0 26px;padding:28px 24px;border-radius:18px;background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 24px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/24px 100%,#fbfcfe;border:1px solid var(--line)}
.v-artd .sp-302 :where(.prose) .er-t{border-radius:10px;background:#fff;border:1.5px solid var(--ink);overflow:hidden;box-shadow:4px 4px 0 var(--blue2);font-size:14.5px}
.v-artd .sp-302 :where(.prose) .er-t p{margin:0}
.v-artd .sp-302 :where(.prose) .et-h{padding:10px 14px;background:var(--ink);color:#fff;font-weight:800}
.v-artd .sp-302 :where(.prose) .et-c{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid var(--line)}
.v-artd .sp-302 :where(.prose) .et-c:nth-child(2){border-top:0}
.v-artd .sp-302 :where(.prose) .et-c span{font-weight:700;color:var(--ink)}
.v-artd .sp-302 :where(.prose) .et-c em{font-style:normal;color:var(--sub);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}
.v-artd .sp-302 :where(.prose) .et-c.pk span::before{content:"열쇠";margin-right:6px;padding:1px 5px;border-radius:4px;background:var(--yellow2);color:#6b5200;font-size:11px;font-weight:800}
.v-artd .sp-302 :where(.prose) .et-c.fkey{background:var(--blue2)}
.v-artd .sp-302 :where(.prose) .et-c.fkey span::before{content:"연결";margin-right:6px;padding:1px 5px;border-radius:4px;background:#1d3fc4;color:#fff;font-size:11px;font-weight:800}
.v-artd .sp-302 :where(.prose) .er-rel{text-align:center;font-size:12.5px;font-weight:700;color:#1d3fc4;line-height:1.35}
.v-artd .sp-302 :where(.prose) .er-rel svg{display:block;width:100%!important;height:60px!important;margin:0!important;stroke:var(--blue);fill:none}
.v-artd .sp-302 :where(.prose) .er-note{margin:0 0 8px;padding:16px 20px;border-radius:12px;background:var(--navy);color:#dfe5ff;font-size:15.5px;line-height:1.65}
.v-artd .sp-302 :where(.prose) .er-note p{margin:0}
.v-artd .sp-302 :where(.prose) .en-k{margin-bottom:6px!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:#9fb3ff}
.v-artd .sp-302 :where(.prose) .en-k::before{content:"-- "}

/* 관계 기호 네 칸 */
.v-artd .sp-302 :where(.prose) .er-four{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 10px;padding:0;list-style:none}
.v-artd .sp-302 :where(.prose) .er-four li{position:relative;margin:0;padding:20px 20px 20px 78px;border-radius:14px;border:1px solid var(--line);font-size:15.5px;line-height:1.6;color:#3f4555}
.v-artd .sp-302 :where(.prose) .er-four li::before{content:none}
.v-artd .sp-302 :where(.prose) .er-four b{display:block;margin-bottom:4px;font-size:17px;color:var(--ink)}
.v-artd .sp-302 :where(.prose) .er-four i{position:absolute;left:20px;top:22px;width:42px;height:42px;border-radius:12px;background:var(--blue2) center/26px no-repeat}
.v-artd .sp-302 :where(.prose) .er-four .g1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%231d3fc4' stroke-width='2'%3E%3Cpath d='M2 13h22M5 8v10M24 13l-7-6M24 13l-7 6M17 7v12'/%3E%3C/svg%3E")}
.v-artd .sp-302 :where(.prose) .er-four .g2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%231d3fc4' stroke-width='2'%3E%3Cpath d='M5 7h16M10 7V4h6v3M7 7l1 15h10l1-15'/%3E%3C/svg%3E")}
.v-artd .sp-302 :where(.prose) .er-four .g3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%231d3fc4' stroke-width='2'%3E%3Ccircle cx='13' cy='13' r='9'/%3E%3Cpath d='M13 8v5l4 3'/%3E%3C/svg%3E")}
.v-artd .sp-302 :where(.prose) .er-four .g4{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%231d3fc4' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16 16l7 7'/%3E%3C/svg%3E")}

/* 실제 값 가림 > 가상 값 */
.v-artd .sp-302 :where(.prose) .er-mask{float:right;width:300px;margin:4px 0 18px 30px;font-size:14px}
.v-artd .sp-302 :where(.prose) .mk-row{display:grid;grid-template-columns:1fr 1.2fr .9fr;border:1px solid var(--line);border-top:0;background:#fff}
.v-artd .sp-302 :where(.prose) .mk-row span{padding:9px 10px;border-left:1px solid var(--line)}
.v-artd .sp-302 :where(.prose) .mk-row span:first-child{border-left:0}
.v-artd .sp-302 :where(.prose) .mk-real{border-top:1px solid var(--line);border-radius:8px 8px 0 0;background:var(--soft);font-weight:800;color:var(--ink)}
.v-artd .sp-302 :where(.prose) .mk-row i{display:block;height:12px;margin-top:4px;border-radius:3px;background:var(--ink)}
.v-artd .sp-302 :where(.prose) .mk-arrow{margin:10px 0!important;padding-left:22px;position:relative;font-size:13px;font-weight:700;color:#1d3fc4}
.v-artd .sp-302 :where(.prose) .mk-arrow::before{content:"↓";position:absolute;left:4px;font-size:16px;line-height:1.1}
.v-artd .sp-302 :where(.prose) .er-s:has(.er-mask)::after{content:"";display:block;clear:both}

/* 흐름소프트 진행 방식 = 자료가 업무흐름도를 거쳐 기획 문서로 */
.v-artd .sp-302 :where(.prose) .er-we{clear:both;margin:26px 0 8px;padding:26px 28px;border-radius:20px;background:var(--navy);color:#fff}
.v-artd .sp-302 :where(.prose) .er-we p{margin:0}
.v-artd .sp-302 :where(.prose) .hw-k{font-size:13px;font-weight:800;color:#9fb3ff}
.v-artd .sp-302 :where(.prose) .hw-t{margin:6px 0 18px!important;font-size:21px;font-weight:800;line-height:1.4}
.v-artd .sp-302 :where(.prose) .hw-flow{display:grid;grid-template-columns:auto 34px 1fr 34px auto;align-items:center;gap:8px}
.v-artd .sp-302 :where(.prose) .hw-in{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0;padding:0;list-style:none}
.v-artd .sp-302 :where(.prose) .hw-in li{margin:0;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.1);font-size:13.5px;font-weight:700;text-align:center}
.v-artd .sp-302 :where(.prose) .hw-in li::before{content:none}
.v-artd .sp-302 :where(.prose) .hw-ar{height:2px;background:#9fb3ff;position:relative}
.v-artd .sp-302 :where(.prose) .hw-ar::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid #9fb3ff;border-right:0}
.v-artd .sp-302 :where(.prose) .hw-mid{padding:16px 10px;border-radius:14px;background:var(--blue);text-align:center;font-weight:800;font-size:17px}
.v-artd .sp-302 :where(.prose) .hw-out{padding:10px 14px;border-radius:10px;border:1.5px solid rgba(255,255,255,.35);font-size:13.5px;font-weight:700;line-height:1.7}
.v-artd .sp-302 :where(.prose) .hw-how{margin:16px 0 20px!important;font-size:14.5px;color:#cfd6f5}
.v-artd .sp-302 :where(.prose) .hw-how b{margin-right:10px;color:#fff}
.v-artd .sp-302 :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-302 :where(.prose) .hw-btn:hover{background:var(--blue2)}

/* 가격 계단 + 거래 당시 금액 칸 */
.v-artd .sp-302 :where(.prose) .er-price{margin:8px 0 22px;padding:24px;border-radius:18px;background:var(--soft)}
.v-artd .sp-302 :where(.prose) .pr-axis{position:relative;display:grid;grid-template-columns:1fr 1fr;height:132px;margin-bottom:18px;border-bottom:2px solid #c3c8d6}
.v-artd .sp-302 :where(.prose) .pr-step{position:relative;align-self:end;padding:10px 14px;font-size:13px;color:var(--sub);border-top:3px solid var(--blue)}
.v-artd .sp-302 :where(.prose) .pr-step b{display:block;font-size:20px;color:var(--ink)}
.v-artd .sp-302 :where(.prose) .pr-step.a{height:76px;background:rgba(46,91,255,.08)}
.v-artd .sp-302 :where(.prose) .pr-step.b{height:118px;background:rgba(46,91,255,.16);border-left:3px solid var(--blue)}
.v-artd .sp-302 :where(.prose) .pr-rec{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff;font-size:15px}
.v-artd .sp-302 :where(.prose) .pr-rec p{margin:0;display:grid;grid-template-columns:1fr 1fr 1.3fr}
.v-artd .sp-302 :where(.prose) .pr-rec span{padding:10px 14px}
.v-artd .sp-302 :where(.prose) .pr-h{background:#eef0f6;font-weight:800;font-size:13.5px;color:var(--ink)}
.v-artd .sp-302 :where(.prose) .pr-rec .hl{background:var(--yellow2);font-weight:800;color:var(--ink)}
.v-artd .sp-302 :where(.prose) .pr-h .hl{background:var(--yellow)}
.v-artd .sp-302 :where(.prose) .er-warn{padding:16px 20px;border-left:6px solid #e5484d;border-radius:0 12px 12px 0;background:#fff6f6;font-size:15.5px;line-height:1.65}
.v-artd .sp-302 :where(.prose) .er-warn b{display:block;margin-bottom:4px;color:#c4282d}

/* 변경 전후 관계 */
.v-artd .sp-302 :where(.prose) .er-change{display:grid;grid-template-columns:1fr 1.3fr;gap:16px;margin:8px 0 22px}
.v-artd .sp-302 :where(.prose) .ch-col{padding:18px;border-radius:14px;border:1px solid var(--line)}
.v-artd .sp-302 :where(.prose) .ch-col+.ch-col{border:2px solid var(--blue)}
.v-artd .sp-302 :where(.prose) .ch-k{margin:0 0 12px;font-size:13px;font-weight:800;color:var(--sub)}
.v-artd .sp-302 :where(.prose) .ch-m{display:flex;align-items:center;gap:0}
.v-artd .sp-302 :where(.prose) .ch-m b{padding:9px 12px;border-radius:8px;background:var(--ink);color:#fff;font-size:14px;white-space:nowrap}
.v-artd .sp-302 :where(.prose) .ch-m b.sv{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.v-artd .sp-302 :where(.prose) .ch-m i{flex:1;min-width:24px;height:2px;background:var(--ink)}
.v-artd .sp-302 :where(.prose) .ch-m i.many{background:var(--blue)}
.v-artd .sp-302 :where(.prose) .sv-many{display:grid;gap:6px;position:relative;margin-left:0;padding-left:16px;border-left:2px solid var(--blue)}
.v-artd .sp-302 :where(.prose) .sv-many b{position:relative}
.v-artd .sp-302 :where(.prose) .sv-many b::before{content:"";position:absolute;left:-17px;top:50%;width:16px;height:2px;background:var(--blue)}
.v-artd .sp-302 :where(.prose) .sv-many b.sv{border-color:var(--blue);padding:5px 10px;font-size:13px}
.v-artd .sp-302 :where(.prose) .ch-hit{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.v-artd .sp-302 :where(.prose) .ch-hit::before{content:"함께 확인";font-size:13px;font-weight:800;color:var(--sub);margin-right:4px}
.v-artd .sp-302 :where(.prose) .ch-hit li{margin:0;padding:6px 12px;border-radius:999px;background:#fff1c2;color:#6b5200;font-size:14px;font-weight:700}
.v-artd .sp-302 :where(.prose) .ch-hit li::before{content:none}

/* 점선 칸 = 추가 예정 */
.v-artd .sp-302 :where(.prose) .er-future{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 22px}
.v-artd .sp-302 :where(.prose) .fu-c{padding:18px 20px;border-radius:14px;border:2px dashed #9aa6c6;background:repeating-linear-gradient(135deg,#fff 0 12px,#f7f8fc 12px 24px)}
.v-artd .sp-302 :where(.prose) .fu-c p{margin:0;font-size:15.5px;line-height:1.6;color:#3f4555}
.v-artd .sp-302 :where(.prose) .fu-h{margin-bottom:6px!important;font-weight:800;color:var(--ink)!important}
.v-artd .sp-302 :where(.prose) .fu-h::before{content:"+ ";color:var(--blue)}

/* 사례 입력 시험 */
.v-artd .sp-302 :where(.prose) .er-run{margin:8px 0 22px;padding:0;list-style:none;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.v-artd .sp-302 :where(.prose) .er-run li{position:relative;margin:0;padding:16px 20px 16px 62px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.6;color:#3f4555}
.v-artd .sp-302 :where(.prose) .er-run li:first-child{border-top:0}
.v-artd .sp-302 :where(.prose) .er-run li::before{content:"✓";position:absolute;left:20px;top:17px;width:26px;height:26px;border-radius:7px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800}
.v-artd .sp-302 :where(.prose) .er-run b{display:block;color:var(--ink)}
.v-artd .sp-302 :where(.prose) .er-sum{margin:8px 0 0;padding:18px 22px;border-radius:14px;border:1.5px solid var(--ink);font-size:15.5px;line-height:1.65}
.v-artd .sp-302 :where(.prose) .er-sum b{display:block;margin-bottom:4px;color:var(--ink)}
.v-artd .sp-302 :where(.prose) .er-rel{margin:40px 0 10px;padding:16px 0 0;border-top:1px solid var(--line);list-style:none}
.v-artd .sp-302 :where(.prose) .er-rel li{margin:0;padding:5px 0}
.v-artd .sp-302 :where(.prose) .er-rel li::before{content:none}
.v-artd .sp-302 :where(.prose) .er-rel a{font-weight:700;text-decoration:none}
.v-artd .sp-302 :where(.prose) .er-rel a::before{content:"→ ";color:var(--sub)}

@media (max-width:720px){
  .v-artd .sp-302 :where(.prose) .er-lead{font-size:18px}
  .v-artd .sp-302 .prose h2{font-size:23px}
  .v-artd .sp-302 :where(.prose) .er-s{padding-top:46px}
  .v-artd .sp-302 :where(.prose) .er-diag{grid-template-columns:1fr;padding:18px 16px}
  .v-artd .sp-302 :where(.prose) .er-rel svg{width:60px!important;height:70px!important;margin:0 auto!important;transform:rotate(90deg)}
  .v-artd .sp-302 :where(.prose) .er-four{grid-template-columns:1fr}
  .v-artd .sp-302 :where(.prose) .er-mask{float:none;width:auto;margin:4px 0 20px}
  .v-artd .sp-302 :where(.prose) .hw-flow{grid-template-columns:1fr;gap:10px}
  .v-artd .sp-302 :where(.prose) .hw-ar{width:2px;height:22px;margin:0 auto}
  .v-artd .sp-302 :where(.prose) .hw-ar::after{right:-4px;top:auto;bottom:-1px;border:5px solid transparent;border-top:7px solid #9fb3ff;border-bottom:0}
  .v-artd .sp-302 :where(.prose) .er-we{padding:24px 20px}
  .v-artd .sp-302 :where(.prose) .er-change,.v-artd .sp-302 :where(.prose) .er-future{grid-template-columns:1fr}
  .v-artd .sp-302 :where(.prose) .pr-rec p{grid-template-columns:.9fr .8fr 1.3fr}
  .v-artd .sp-302 :where(.prose) .pr-rec span{padding:9px 10px}
}