/* ═══════════════════════════════════════════════════════════════
   AVC v2 — 01 background and objective (#overview)
   One strip reads as the argument (problem → constraint → alternative
   → limitation); the objective is a compact research panel with the
   five-module service pipeline. Figures are drawn by js/overview.js.
   ═══════════════════════════════════════════════════════════════ */
#overview{ --sec-bg:var(--bg); --light-at:86% 0%; --light-size:54% 40%; }
#overview::before{ display:none; }

/* ── the argument: one panel, four columns ──────────────────────── */
#overview .ov-chain{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border-radius:var(--r-xl); border:1px solid transparent;
  background:linear-gradient(180deg, var(--panel-a), var(--panel-b)) padding-box, linear-gradient(180deg, var(--rim), rgba(175,205,245,.06) 36%, rgba(175,205,245,.05)) border-box;
  box-shadow:var(--sh-panel); }
#overview .ov-step{ position:relative; display:flex; flex-direction:column; padding:10px 10px 24px; min-width:0; }
#overview .ov-step + .ov-step::before{ content:""; position:absolute; left:0; top:18px; bottom:18px; width:1px; background:linear-gradient(180deg, rgba(140,175,225,.14), rgba(140,175,225,.06)); }
/* chevron between columns, at the figures' mid-height */
#overview .ov-step + .ov-step::after{ content:""; position:absolute; left:-12px; top:calc(10px + 84px - 12px); width:24px; height:24px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 50% 35%, #12233d, #0a1424) padding-box; box-shadow:inset 0 0 0 1px rgba(140,175,225,.22), 0 4px 10px -4px rgba(0,0,0,.8);
  -webkit-mask:none; }
#overview .ov-step + .ov-step .ov-fig::before{ content:""; position:absolute; left:-15px; top:calc(84px - 4px); width:8px; height:8px; z-index:3;
  border-top:1.5px solid #8fb2df; border-right:1.5px solid #8fb2df; transform:rotate(45deg); transform-origin:50% 50%; }

#overview .ov-fig{ position:relative; margin:0; height:168px; padding:10px 12px 8px; display:grid; grid-template-rows:22px minmax(0, 1fr); row-gap:6px;
  border-radius:12px; background:radial-gradient(80% 70% at 50% 0%, rgba(30,110,230,.07), rgba(30,110,230,0) 72%), var(--well); box-shadow:var(--sh-well); overflow:visible; }
#overview .ov-fig__cap{ display:flex; align-items:center; gap:10px; min-width:0; font-size:12px; line-height:16px; font-weight:500; color:var(--dim); white-space:nowrap; }
#overview .ov-fig__ctx{ min-width:0; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
#overview .ov-fig__plot{ display:block; width:100%; height:100%; overflow:visible; }
#overview .ov-step__body{ padding:18px 12px 0; }
#overview .ov-step__role{ font-family:var(--small); font-size:11.5px; line-height:1; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8fb2df; }
html[data-lang="ko"] #overview .ov-step__role{ font-size:12.5px; letter-spacing:.02em; text-transform:none; }
#overview .ov-step__title{ margin-top:10px; font-family:var(--display); font-size:clamp(17px, 1.28vw, 18.4px); line-height:1.32; letter-spacing:-.012em; font-weight:600; color:var(--text); }
html[data-lang="ko"] #overview .ov-step__title{ line-height:1.44; letter-spacing:-.016em; }
@media (min-width:1024px) and (max-width:1263px){ html[data-lang="en"] #overview .ov-step__title{ min-height:2.64em; } }
#overview .ov-step__text{ margin-top:8px; font-size:14.5px; line-height:1.6; color:var(--body); }
html[data-lang="ko"] #overview .ov-step__text{ line-height:1.72; }

/* SVG marks (the chart vocabulary at card scale) */
#overview .ov-grid{ fill:none; stroke:rgba(140,175,225,.08); stroke-width:1; shape-rendering:crispEdges; }
#overview .ov-sep{ fill:none; stroke:var(--line); stroke-width:1; shape-rendering:crispEdges; }
#overview .ov-sp{ fill:none; stroke:var(--s-sp); stroke-width:1.5; stroke-dasharray:5 4; }
#overview .ov-sp--mini{ stroke-width:1; stroke-dasharray:3 3; }
#overview .ov-base{ fill:none; stroke:var(--s-meas); stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; }
#overview .ov-cand{ fill:none; stroke:var(--acc); stroke-width:1.25; stroke-linejoin:round; stroke-linecap:round; }
#overview .ov-cand--mini{ stroke-width:1; }
#overview .ov-mini{ fill:rgba(140,175,225,.025); stroke:var(--line); stroke-width:1; }
#overview .ov-dot{ fill:var(--dim); }
#overview .ov-tick{ font:500 11.5px var(--small); fill:var(--dim); font-variant-numeric:tabular-nums; }
#overview .ov-tick--sp{ font-weight:600; fill:var(--s-sp); }
#overview .ov-brk{ fill:none; stroke:var(--dim); stroke-width:1; }
#overview .ov-brk-t{ font:500 11.5px var(--small); fill:var(--body); font-variant-numeric:tabular-nums; }
#overview .ov-period{ opacity:0; transition:opacity .5s var(--ease); }
#overview .ov-period.is-on{ opacity:1; }

/* ── objective panel ────────────────────────────────────────────── */
#overview .ov-objective{ position:relative; margin-top:16px; display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:24px clamp(28px, 3.2vw, 52px);
  padding:clamp(22px, 2.2vw, 30px) clamp(22px, 2.6vw, 34px); border-radius:var(--r-xl); border:1px solid transparent; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(30,120,255,.13), transparent 62%) padding-box,
    linear-gradient(180deg, #0b1830, #071021) padding-box,
    linear-gradient(180deg, rgba(120,180,255,.42), rgba(90,150,240,.14) 40%, rgba(140,175,225,.08)) border-box;
  box-shadow:inset 0 1px 0 rgba(170,210,255,.08), 0 30px 60px -34px rgba(0,4,16,.95), 0 0 0 1px rgba(0,0,0,.25); }
/* fine instrument grid in the panel field */
#overview .ov-objective::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(140,175,225,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(140,175,225,.05) 1px, transparent 1px);
  background-size:28px 28px; -webkit-mask-image:radial-gradient(70% 100% at 70% 50%, #000, transparent); mask-image:radial-gradient(70% 100% at 70% 50%, #000, transparent); }
#overview .ov-obj__head{ align-self:center; }
#overview .ov-obj__head .kicker{ margin-bottom:14px; }
#overview .ov-obj__lead{ font-family:var(--display); font-size:clamp(20px, 1.55vw, 23px); line-height:1.36; letter-spacing:-.018em; font-weight:600; color:var(--text); text-wrap:balance; }
html[data-lang="ko"] #overview .ov-obj__lead{ line-height:1.48; letter-spacing:-.024em; }
#overview .ov-obj__lead b{ font-weight:700; background:linear-gradient(178deg, #e3f0ff, #79b7ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#overview .ov-obj__text{ margin-top:12px; font-size:15px; line-height:1.62; color:var(--body); }
html[data-lang="ko"] #overview .ov-obj__text{ line-height:1.76; }

/* service pipeline: five columns on hairlines — agent tag, service, one line each */
#overview .ov-svc{ align-self:center; min-width:0; }
#overview .ov-svc__label{ margin-bottom:14px; font-family:var(--small); font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); }
html[data-lang="ko"] #overview .ov-svc__label{ font-size:13px; letter-spacing:.02em; text-transform:none; }
#overview .ov-svc__list{ position:relative; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); border-top:1px solid rgba(110,170,255,.22); }
#overview .svc{ position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"tag icon" "name name" "desc desc"; align-content:start; column-gap:8px; row-gap:8px;
  min-width:0; padding:14px 14px 2px; }
#overview .svc + .svc{ border-left:1px solid rgba(140,175,225,.10); }
#overview .svc + .svc::before{ content:""; position:absolute; left:-4px; top:-4px; width:7px; height:7px; border-top:1.5px solid rgba(140,190,255,.7); border-right:1.5px solid rgba(140,190,255,.7); transform:rotate(45deg); }
#overview .svc::after{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:linear-gradient(90deg, rgba(90,165,255,0), rgba(120,185,255,.9), rgba(90,165,255,0)); opacity:0; }
@media (prefers-reduced-motion:no-preference){ #overview .ov-objective.is-in .svc::after{ animation:svcRun 6s var(--ease) infinite; animation-delay:calc(var(--i) * 1.2s + .6s); } }
@keyframes svcRun{ 0%{ opacity:0; } 6%{ opacity:1; } 18%{ opacity:0; } 100%{ opacity:0; } }
#overview .svc__agent{ grid-area:tag; justify-self:start; display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:20px; padding:0 6px; border-radius:var(--r-xs);
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.05em; color:#a9cdfa; background:rgba(30,144,255,.10); box-shadow:inset 0 0 0 1px rgba(90,165,255,.30); }
#overview .svc__ic{ grid-area:icon; justify-self:end; align-self:center; display:block; width:20px; height:20px; }
#overview .svc__ic svg{ width:20px; height:20px; fill:none; stroke:#8fbff5; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#overview .svc__name{ grid-area:name; margin-top:2px; font-family:var(--display); font-size:15.5px; line-height:1.25; font-weight:600; letter-spacing:-.008em; color:var(--text); white-space:nowrap; }
#overview .svc__desc{ grid-area:desc; font-size:13px; line-height:1.45; color:var(--body); min-height:2.9em; }
html[data-lang="ko"] #overview .svc__desc{ font-size:13.5px; line-height:1.5; }
#overview .svc--out .svc__agent{ color:var(--dim); background:none; box-shadow:inset 0 0 0 1px var(--line-hard); font-family:var(--small); font-weight:600; letter-spacing:.06em; }
html[data-lang="ko"] #overview .svc--out .svc__agent{ letter-spacing:0; font-size:11.5px; }
#overview .svc--out .svc__ic svg{ stroke:#dfe9f7; }

/* ── responsive ─────────────────────────────────────────────────── */
@media (max-width:1180px){
  #overview .ov-objective{ grid-template-columns:1fr; }
}
@media (max-width:1023px){
  #overview .ov-chain{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #overview .ov-step:nth-child(3)::before{ display:none; }
  #overview .ov-step:nth-child(3)::after, #overview .ov-step:nth-child(3) .ov-fig::before{ display:none; }
  #overview .ov-step:nth-child(n+3){ border-top:1px solid rgba(140,175,225,.08); }
}
@media (max-width:860px){
  #overview .ov-svc__list{ grid-template-columns:1fr; border-top:0; }
  #overview .svc{ grid-template-columns:auto 1fr auto; grid-template-areas:"tag name icon" "tag desc icon"; row-gap:2px; column-gap:12px; padding:12px 2px; border-top:1px solid rgba(140,175,225,.10); }
  #overview .svc + .svc{ border-left:0; }
  #overview .svc + .svc::before, #overview .svc::after{ display:none; }
  #overview .svc__agent{ align-self:start; margin-top:1px; }
  #overview .svc__desc{ min-height:0; }
}
@media (max-width:600px){
  #overview .ov-chain{ grid-template-columns:1fr; }
  #overview .ov-step::before, #overview .ov-step::after, #overview .ov-step .ov-fig::before{ display:none !important; }
  #overview .ov-step + .ov-step{ border-top:1px solid rgba(140,175,225,.08); }
}