/* 구독형·지붕임대 사업구도 (deal-diagram) - 2026 재디자인
   범위: business/subscription.html, business/roof-lease.html 의 .deal-diagram.dd 블록 전용 */
.deal-diagram.dd{--dd-navy:#140858;--dd-navy-2:#221c78;--dd-slate:#5c6785;--dd-mist:#eef2f8;--dd-line:#dbe2ee;--dd-red:#e11b22;
  position:relative;background:#fff;border:1px solid var(--dd-line);border-radius:30px;padding:40px 44px 44px;
  box-shadow:0 30px 80px -56px rgba(20,8,88,.55),0 2px 0 rgba(20,8,88,.02);color:var(--dd-navy);overflow:hidden;isolation:isolate}
.deal-diagram.dd::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--dd-navy) 0 82%,var(--dd-red) 82% 100%);z-index:-1}
.deal-diagram.dd::after{content:"";position:absolute;right:-120px;top:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,8,88,.045) 0 40%,transparent 41%),radial-gradient(circle,transparent 0 55%,rgba(20,8,88,.04) 55.3% 55.8%,transparent 56%);z-index:-1;pointer-events:none}
.dd .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dd svg{display:block}

/* head */
.dd-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:30px}
.dd-title{font-size:22px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:12px}
.dd-title::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--dd-red);flex-shrink:0}
.dd-badge{font-size:15px;font-weight:700;color:var(--dd-slate);background:var(--dd-mist);border:1px solid var(--dd-line);border-radius:999px;padding:8px 18px;letter-spacing:.04em}

/* stage */
.dd-stage{display:grid;grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);align-items:stretch}
.dd-party{position:relative;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;border:1px solid var(--dd-line);background:#f6f8fc;min-width:0}
.dd-party-b{background:linear-gradient(160deg,#241f78 0%,#140858 62%,#0f0c47 100%);border-color:#1d1868;color:#fff}
.dd-art{position:relative;padding:26px 26px 0;background:linear-gradient(180deg,#e9eef7 0%,#f6f8fc 100%);color:var(--dd-navy)}
.dd-party-b .dd-art{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0));color:#fff}
.dd-illust{width:100%;height:auto;max-height:210px}
.dd-party-body{padding:26px 34px 34px;flex:1}
.dd-role{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:700;color:var(--dd-slate);letter-spacing:.01em}
.dd-role::before{content:"";width:18px;height:2px;background:currentColor;opacity:.7}
.dd-party-b .dd-role{color:#c3c9e4}
.dd-party h3{font-size:36px;line-height:1.2;font-weight:800;letter-spacing:-.03em;margin:10px 0 22px;color:inherit}
.dd-party ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.dd-party li{position:relative;font-size:18px;line-height:1.55;padding:12px 0 12px 30px;border-top:1px solid rgba(20,8,88,.09)}
.dd-party-b li{border-top-color:rgba(255,255,255,.13)}
.dd-party li::before{content:"";position:absolute;left:2px;top:21px;width:14px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.55}

/* svg fills */
.dd .dd-f1{fill:#fff}
.dd .dd-f2{fill:#d9e1ee}
.dd .dd-panel{fill:#c9d3e6}
.dd .dd-badge-bg{fill:#fff}
.dd .dd-acc-fill{fill:var(--dd-red)}
.dd .dd-acc-stroke{stroke:var(--dd-red)}
.dd-party-b .dd-f1{fill:rgba(255,255,255,.07)}
.dd-party-b .dd-f2{fill:rgba(255,255,255,.16)}
.dd-party-b .dd-panel{fill:rgba(160,176,230,.28)}
.dd-party-b .dd-acc-stroke{stroke:#ff5a5f}
.dd-party-b .dd-acc-fill{fill:#ff5a5f}

/* flows */
.dd-flows{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:20px 0;position:relative}
.dd-flow{position:relative;display:grid;grid-template-columns:56px 1fr;column-gap:16px;align-items:center;padding:16px 26px 0;color:var(--dd-navy)}
.dd-ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:#fff;border:1.5px solid var(--dd-line);box-shadow:0 10px 24px -16px rgba(20,8,88,.45);color:var(--dd-navy)}
.dd-ico svg{width:30px;height:30px}
.dd-flow-txt b{display:block;font-size:20px;line-height:1.35;font-weight:800;letter-spacing:-.02em}
.dd-flow-txt small{display:block;margin-top:4px;font-size:16px;font-weight:600;color:var(--dd-slate)}
.dd-track{grid-column:1/-1;position:relative;display:block;height:2px;margin:16px -26px 4px;background:linear-gradient(90deg,rgba(92,103,133,.35),var(--dd-slate))}
.dd-track::after{content:"";position:absolute;top:50%;right:-2px;width:14px;height:14px;transform:translateY(-50%);background:var(--dd-slate);clip-path:polygon(0 0,100% 50%,0 100%,22% 50%)}
.dd-track i{position:absolute;top:50%;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(20,8,88,.1);animation:dd-run-x 3.6s cubic-bezier(.45,0,.3,1) infinite}
.dd-flow.to-a .dd-track{background:linear-gradient(270deg,rgba(225,27,34,.3),var(--dd-red))}
.dd-flow.to-a .dd-track::after{right:auto;left:-2px;background:var(--dd-red);clip-path:polygon(100% 0,0 50%,100% 100%,78% 50%)}
.dd-flow.to-a .dd-track i{left:100%;background:var(--dd-red);box-shadow:0 0 0 4px rgba(225,27,34,.14);animation-name:dd-run-x-rev}
.dd-flow.to-a .dd-ico{color:var(--dd-red);border-color:rgba(225,27,34,.35)}
.dd-flow.to-a .dd-ico .dd-ico-fill{fill:rgba(225,27,34,.12)}
.dd-flow.to-a .dd-flow-txt b{color:var(--dd-navy)}
.dd-flow.to-a .dd-flow-txt small{color:#b8333a}
.dd-flow:nth-child(2) .dd-track i{animation-delay:-1.2s}
.dd-flow:nth-child(3) .dd-track i{animation-delay:-2.4s}
@keyframes dd-run-x{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes dd-run-x-rev{0%{left:100%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:0;opacity:0}}

/* roof share option */
.dd-option{position:relative;display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:36px;align-items:center;margin-top:28px;padding:28px 34px;border:1.5px dashed #c6cfe0;border-radius:24px;background:#fbfcfe}
.dd-option::before{content:"";position:absolute;left:-1.5px;top:26px;bottom:26px;width:4px;border-radius:0 4px 4px 0;background:var(--dd-red)}
.dd-option-art{color:var(--dd-navy)}
.dd-option-art .dd-illust{max-height:190px}
.dd .dd-share-own{fill:rgba(225,27,34,.1);stroke:var(--dd-red)}
.dd-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;font-size:16px;font-weight:600;color:var(--dd-slate)}
.dd-legend span{display:inline-flex;align-items:center;gap:8px}
.dd-legend i{width:18px;height:12px;border-radius:2px;border:1.5px solid var(--dd-navy);background:#c9d3e6}
.dd-legend i.lg-own{border-color:var(--dd-red);background:rgba(225,27,34,.1)}
.dd-option-tag{display:inline-block;font-size:15px;font-weight:800;color:var(--dd-red);letter-spacing:.04em;border:1px solid rgba(225,27,34,.35);border-radius:999px;padding:5px 14px;background:#fff}
.dd-option-txt b{display:block;font-size:26px;line-height:1.35;font-weight:800;letter-spacing:-.025em;margin:14px 0 10px}
.dd-option-txt p{margin:0;font-size:18px;line-height:1.75;color:#4a5370}

/* Taesin service band */
.dd-service{display:grid;grid-template-columns:auto 1fr;align-items:stretch;margin-top:28px;border-radius:24px;border:1px solid var(--dd-line);background:linear-gradient(90deg,#f7f9fc,#eef2f8);overflow:hidden}
.dd-service-id{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:28px 40px;background:var(--dd-navy);color:#fff;position:relative;min-width:250px}
.dd-service-id::after{content:"";position:absolute;right:-14px;top:50%;width:28px;height:28px;background:var(--dd-navy);transform:translateY(-50%) rotate(45deg);border-radius:4px}
.dd-service-id small{font-size:17px;font-weight:700;color:#c3c9e4;letter-spacing:.02em}
.dd-service-id strong{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.dd-steps{list-style:none;margin:0;padding:24px 34px 24px 56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:dd-step;align-items:center}
.dd-steps li{position:relative;display:flex;align-items:center;gap:14px;counter-increment:dd-step}
.dd-steps li+li::before{content:"";position:absolute;left:-14px;top:50%;width:8px;height:8px;border-top:2px solid #9aa5bd;border-right:2px solid #9aa5bd;transform:translate(-50%,-50%) rotate(45deg)}
.dd-step-ico{flex-shrink:0;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid var(--dd-line);color:var(--dd-navy);position:relative}
.dd-step-ico::after{content:counter(dd-step,decimal-leading-zero);position:absolute;top:-6px;right:-8px;font-size:12px;font-weight:800;color:#fff;background:var(--dd-navy);border-radius:999px;padding:2px 6px;line-height:1.4}
.dd-step-ico svg{width:28px;height:28px}
.dd-step-txt{font-size:19px;font-weight:700;line-height:1.4;letter-spacing:-.02em}

/* tablet */
@media (max-width:1180px){
  .deal-diagram.dd{padding:34px 30px 36px}
  .dd-stage{grid-template-columns:minmax(0,1fr) 290px minmax(0,1fr)}
  .dd-party-body{padding:22px 26px 28px}
  .dd-party h3{font-size:32px}
  .dd-flow{grid-template-columns:50px 1fr;padding:14px 20px 0;column-gap:12px}
  .dd-track{margin:14px -20px 4px}
  .dd-ico{width:50px;height:50px}
  .dd-flow-txt b{font-size:19px}
  .dd-service-id{min-width:210px;padding:24px 30px}
  .dd-steps{padding:22px 24px 22px 44px;gap:14px}
  .dd-step-ico{width:48px;height:48px}
  .dd-step-txt{font-size:18px}
}
/* stacked: tablet portrait & mobile */
@media (max-width:920px){
  .deal-diagram.dd{padding:28px 20px 24px;border-radius:24px}
  .dd-head{margin-bottom:22px}
  .dd-title{font-size:20px}
  .dd-badge{font-size:14px;padding:6px 14px}
  .dd-stage{display:flex;flex-direction:column}
  .dd-art{padding:20px 20px 0}
  .dd-illust{max-height:180px}
  .dd-party-body{padding:20px 22px 22px}
  .dd-party h3{font-size:30px;margin:8px 0 14px}
  .dd-party li{font-size:18px;padding:10px 0 10px 28px}
  .dd-party li::before{top:19px}
  .dd-flows{padding:14px 0 14px 4px;gap:12px}
  .dd-flow{grid-template-columns:44px 50px 1fr;column-gap:14px;padding:6px 0}
  .dd-track{grid-column:1;grid-row:1;justify-self:center;width:2px;height:64px;margin:0;background:linear-gradient(180deg,rgba(92,103,133,.35),var(--dd-slate))}
  .dd-track::after{top:auto;bottom:-2px;right:50%;transform:translateX(50%);clip-path:polygon(0 0,50% 100%,100% 0,50% 22%)}
  .dd-track i{left:50%;top:0;margin:-4.5px 0 0 -4.5px;animation-name:dd-run-y}
  .dd-flow.to-a .dd-track{background:linear-gradient(0deg,rgba(225,27,34,.3),var(--dd-red))}
  .dd-flow.to-a .dd-track::after{left:auto;right:50%;top:-2px;bottom:auto;transform:translateX(50%);clip-path:polygon(0 100%,50% 0,100% 100%,50% 78%)}
  .dd-flow.to-a .dd-track i{left:50%;top:100%;animation-name:dd-run-y-rev}
  .dd-ico{grid-column:2;grid-row:1}
  .dd-flow-txt{grid-column:3;grid-row:1}
  .dd-option{grid-template-columns:1fr;gap:18px;padding:22px 20px}
  .dd-option-txt{order:-1}
  .dd-option-txt b{font-size:23px}
  .dd-service{grid-template-columns:1fr}
  .dd-service-id{min-width:0;padding:20px 22px}
  .dd-service-id::after{right:auto;left:34px;top:auto;bottom:-12px;transform:rotate(45deg);width:24px;height:24px}
  .dd-service-id strong{font-size:27px}
  .dd-steps{grid-template-columns:1fr;padding:26px 22px 22px;gap:16px}
  .dd-steps li+li::before{left:27px;top:-9px;transform:translate(-50%,-50%) rotate(135deg)}
}
@keyframes dd-run-y{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
@keyframes dd-run-y-rev{0%{top:100%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:0;opacity:0}}
@media (max-width:420px){
  .deal-diagram.dd{padding:24px 16px 20px}
  .dd-party h3{font-size:28px}
  .dd-flow-txt b{font-size:19px}
}
@media (prefers-reduced-motion:reduce){.dd-track i{animation:none;display:none}}