/* Diagram labels stay in HTML. SVG is reserved for crisp, responsive connectors. */
.dl-hero-concept { --flow-inset:18px; --flow-heading:54px; --flow-surface:#f1f4f9; --flow-edge:#dce3ee; --flow-wire:#a6afbd; --flow-coral:#ff4b40; margin:0; min-width:0; font-family:inherit; color:var(--ink); scroll-margin-top:104px; }
.dl-concept-accessible { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.dl-concept-agent { display:grid; gap:2px; width:85%; margin:0 auto 28px; padding:10px 12px; border:1px solid var(--flow-edge); border-radius:12px; background:var(--white); box-shadow:0 3px 0 var(--flow-surface); text-align:center; }
.dl-concept-agent strong { font-size:19px; font-weight:600; line-height:1.5; }
.dl-concept-agent span { font-size:14px; line-height:1.6; color:var(--muted); }
.dl-concept-layer { position:relative; padding:calc(var(--flow-inset) + 2px); border:0; border-radius:16px; background:var(--flow-surface); box-shadow:0 5px 0 var(--flow-edge); }
.dl-concept-agent-link { position:absolute; z-index:1; width:24px; height:calc(28px + var(--flow-inset) + var(--flow-heading) + 12px); top:-28px; left:calc(50% - 12px); overflow:visible; pointer-events:none; }
.dl-concept-agent-link path { stroke:var(--flow-wire); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.dl-hero-concept .dl-concept-name { height:var(--flow-heading); line-height:30px; margin:0 0 12px; text-align:left; }
.dl-concept-name strong { display:inline-block; color:var(--ink); font-size:24px; font-weight:700; letter-spacing:-.5px; }
.dl-concept-name>span { display:block; max-width:calc(50% - 14px); font-size:12px; line-height:1.5; color:var(--muted); }
.dl-concept-mcp { position:relative; z-index:2; display:grid; gap:1px; padding:10px 14px; border:1px solid var(--flow-edge); border-radius:10px; background:var(--white); box-shadow:0 3px 0 var(--flow-edge); }
.dl-concept-mcp strong { font-size:19px; line-height:1.5; font-weight:600; }
.dl-concept-mcp span { font-size:14px; line-height:1.6; color:var(--muted); }
.dl-concept-branch { display:block; width:100%; height:22px; }
.dl-concept-branch path { stroke:var(--flow-wire); stroke-width:1.2; stroke-dasharray:2 4; vector-effect:non-scaling-stroke; }
.dl-concept-regions { display:grid; grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr); grid-template-rows:repeat(4,auto); column-gap:6px; row-gap:0; align-items:stretch; }
.dl-concept-region { display:grid; grid-template-rows:subgrid; grid-row:1 / span 4; row-gap:0; position:relative; min-width:0; padding:14px 12px; border:1px solid var(--flow-edge); border-radius:12px; background:var(--white); box-shadow:0 3px 0 var(--flow-edge); }
.dl-concept-perception { grid-column:1; }
.dl-concept-judgment { grid-column:3; }
.dl-concept-tag { display:inline-block; justify-self:start; align-self:start; padding:2px 8px; margin-bottom:9px; border-radius:5px; background:#e5ebf4; font-size:13px; line-height:1.6; font-weight:500; }
.dl-concept-judgment .dl-concept-tag { color:var(--ink); background:#ffc7ba; }
.dl-concept-region-heading { display:flex; flex-wrap:wrap; align-items:baseline; align-content:flex-start; gap:3px 8px; min-height:27px; margin-bottom:8px; }
.dl-concept-region-name { display:block; font-size:19px; line-height:1.4; font-weight:600; letter-spacing:-.4px; overflow-wrap:break-word; }
.dl-concept-provider { font-size:11px; line-height:1.6; color:var(--muted); }
.dl-hero-concept .dl-concept-region p { font-size:14px; line-height:1.6; text-align:left; word-break:keep-all; overflow-wrap:break-word; margin:0; }
.dl-hero-concept .dl-concept-region .dl-concept-context { color:var(--muted); }
.dl-hero-concept .dl-concept-region .dl-concept-outcome { margin-top:8px; font-weight:600; }
.dl-concept-decision-link { grid-column:2; grid-row:1 / span 4; align-self:center; width:22px; height:24px; }
.dl-concept-decision-link path { stroke:var(--orange); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.5; }
.dl-hero-concept .dl-concept-proposals { margin:14px 0 0; padding:8px 10px; border-radius:8px; background:linear-gradient(105deg,var(--orange),var(--flow-coral)); color:var(--ink); font-size:17px; line-height:1.5; font-weight:600; text-align:center; }
.dl-concept-execution { text-align:center; }
.dl-concept-execution-stem { width:24px; height:18px; margin:auto; }
.dl-concept-execution-stem path,.dl-concept-execution-branch path { stroke:var(--flow-wire); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.dl-hero-concept .dl-concept-hitl { display:table; max-width:100%; margin:auto; padding:3px 12px; border:1px solid var(--flow-edge); border-radius:20px; background:var(--white); font-size:13px; line-height:1.6; text-align:center; color:var(--muted); }
.dl-hero-concept .dl-concept-autonomy { margin:12px 0 0; font-size:13px; line-height:1.6; text-align:center; color:var(--muted); }
.dl-concept-execution-branch { display:block; width:100%; height:27px; }
.dl-concept-targets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.dl-concept-targets>div { display:flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:9px 10px; border:1px solid var(--flow-edge); border-radius:9px; background:var(--white); box-shadow:0 3px 0 var(--flow-surface); }
.dl-concept-targets svg { box-sizing:content-box; flex-shrink:0; width:21px; height:21px; padding:4px; border-radius:6px; background:linear-gradient(135deg,var(--orange),var(--flow-coral)); stroke:var(--white); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.dl-concept-targets strong { font-size:15px; line-height:1.5; font-weight:600; }
/* One card at a time: perception → judgment → tool interface → agent. */
.dl-concept-perception,.dl-concept-judgment,.dl-concept-mcp,.dl-concept-agent { animation:dl-concept-card-focus 8s ease-in-out infinite; }
.dl-concept-perception { animation-delay:0s; }
.dl-concept-judgment { animation-delay:2s; }
.dl-concept-mcp { animation-delay:4s; }
.dl-concept-agent { animation-delay:6s; }
.dl-hero-concept .dl-concept-phase-perception,.dl-hero-concept .dl-concept-phase-judgment,.dl-hero-concept .dl-concept-phase-execution { opacity:0; }
@keyframes dl-concept-card-focus {
  0%,25%,100% { border-color:var(--flow-edge); }
  6%,19% { border-color:var(--orange); }
}
.home-page .dl-hero-with-concept { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; text-align:left; padding-bottom:56px; }
.dl-hero-with-concept .intro-label { justify-content:flex-start; text-align:left; margin-bottom:24px; }
/* Match the AI Analytics & BI product label without changing Hero layout. */
.home-page .overview-hero .overview-product,.home-page .dl-hero-with-concept .intro-label { font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'system-ui',sans-serif; font-size:16px; font-weight:600; line-height:30px; letter-spacing:normal; color:#FF5722; }
@media(max-width:768px) {
  .home-page .overview-hero .overview-product,.home-page .dl-hero-with-concept .intro-label { font-size:13px; }
}
.home-page .dl-hero-with-concept .hero-copy { text-align:left; margin:0; }
.home-page .dl-hero-with-concept #hero-title { font-size:clamp(36px,3.8vw,52px); line-height:1.25; text-align:left; margin:0 0 24px; }
.dl-hero-with-concept .hero-description { max-width:none; margin:0; text-align:left; }
.dl-hero-with-concept .hero-description>p { max-width:none; margin-inline:0; }
.dl-hero-with-concept .hero-links { justify-content:flex-start; }
@media(max-width:1099px) {
  .home-page .dl-hero-with-concept { gap:32px; }
  .dl-hero-concept { --flow-inset:14px; }
  .dl-concept-region { padding:12px 10px; }
  .dl-concept-region-name { font-size:18px; }
  .dl-concept-agent strong { font-size:18px; }
}
@media(max-width:979px) {
  .home-page .dl-hero-with-concept { grid-template-columns:minmax(0,1fr); }
  .dl-hero-concept { width:100%; max-width:650px; }
  .home-page .dl-hero-with-concept #hero-title { font-size:clamp(34px,5.8vw,48px); }
}
@media(max-width:599px) {
  .dl-hero-concept { --flow-inset:12px; --flow-heading:66px; }
  .dl-concept-agent { width:92%; padding:9px 8px; }
  .dl-concept-agent strong { font-size:17px; }
  .dl-concept-agent span { font-size:13px; }
  .dl-concept-name strong { font-size:20px; }
  .dl-concept-mcp { padding:9px 10px; }
  .dl-concept-mcp strong { font-size:17px; }
  .dl-concept-mcp span { font-size:13px; }
  .dl-concept-regions { grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr); column-gap:3px; }
  .dl-concept-region { padding:11px 9px; }
  .dl-concept-region-name { font-size:16px; }
  .dl-concept-decision-link { width:16px; }
  .dl-concept-targets { gap:10px; }
  .dl-concept-targets>div { gap:7px; padding-inline:8px; }
  .dl-concept-targets strong { font-size:14px; }
  .dl-hero-concept .dl-concept-proposals { font-size:16px; }
  .home-page .dl-hero-with-concept { gap:32px; padding-top:38px; }
}
@media(max-width:359px) {
  .dl-concept-name strong { font-size:18px; }
  .dl-concept-region { padding-inline:7px; }
  .dl-concept-region-name { font-size:15px; }
  .dl-concept-hitl { padding-inline:7px; }
}
@media(prefers-reduced-motion:reduce) {
  .dl-hero-concept *, .dl-hero-concept ::after { animation:none!important; transition:none!important; }
}