/* ═══════════════════════════════════════════════════════════════
   AVC v2 — page chrome: top bar, progress, closing, footer, video modal
   ═══════════════════════════════════════════════════════════════ */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ overflow-x:hidden; text-rendering:optimizeLegibility; }

/* ── top bar ────────────────────────────────────────────────────── */
.topbar{ position:fixed; inset:0 0 auto 0; z-index:120; height:var(--bar-h); display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 clamp(14px, 2.6vw, 32px); border-bottom:1px solid transparent;
  background:linear-gradient(180deg, rgba(2,5,11,.78), rgba(2,5,11,0));
  transition:background var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease); }
.topbar.is-scrolled{ background:rgba(4,8,16,.84); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--line-soft); }
.topbar-back{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 8px 0 2px; border-radius:8px; text-decoration:none; color:var(--text); }
.topbar-back .tb-lab{ font-family:var(--display); font-size:14px; font-weight:700; letter-spacing:.16em; }
.topbar-back em{ font-style:normal; font-size:13.5px; font-weight:500; color:var(--dim); padding-left:10px; border-left:1px solid var(--line-hard); }
.topbar-back .ic{ width:18px; height:18px; transition:transform var(--dur-hover) var(--ease); }
.topbar-back:hover .ic{ transform:translateX(-2px); }
.topbar-back:hover em{ color:var(--text); }
.topnav{ position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:2px; }
.nav-item{ position:relative; display:inline-flex; align-items:center; height:34px; padding:0 13px; border-radius:9px;
  font-size:13.5px; font-weight:500; color:#8f9db2; text-decoration:none; white-space:nowrap; transition:color var(--dur-hover) var(--ease); }
.nav-item::after{ content:""; position:absolute; left:13px; right:13px; bottom:5px; height:1px; border-radius:1px;
  background:linear-gradient(90deg, rgba(90,165,255,0), var(--acc), rgba(90,165,255,0)); opacity:0; transform:scaleX(.4); transition:opacity var(--dur-state) var(--ease), transform var(--dur-state) var(--ease); }
.nav-item:hover{ color:var(--text); }
.nav-item.is-active{ color:var(--text); }
.nav-item.is-active::after{ opacity:1; transform:none; }
.topbar-right{ display:flex; align-items:center; gap:8px; }
.topbar-cta .ic{ width:12px; height:12px; color:var(--acc-hi); }
.topbar-cta{ transition:opacity var(--dur-state) var(--ease), transform var(--dur-state) var(--ease), visibility 0s linear 0s, box-shadow var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease); }
.topbar:not(.show-cta) .topbar-cta{ opacity:0; transform:translateY(-4px); pointer-events:none; visibility:hidden;
  transition:opacity var(--dur-state) var(--ease), transform var(--dur-state) var(--ease), visibility 0s linear var(--dur-state); }
.lang-toggle{ height:36px; padding:0 13px; border-radius:9px; border:0; cursor:pointer; background:none;
  font-size:13px; font-weight:500; line-height:1; color:#9aa8bc; box-shadow:inset 0 0 0 1px var(--line);
  transition:color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
.lang-toggle:hover{ color:var(--text); box-shadow:inset 0 0 0 1px var(--line-hard); }
.progress-rail{ position:fixed; inset:0 0 auto 0; height:2px; z-index:121; pointer-events:none; }
.progress-bar{ height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, var(--acc-deep), var(--acc-glow) 70%, #9fd0ff); }

@media (max-width:1080px){ .topnav{ display:none; } }
@media (max-width:760px){
  :root{ --bar-h:54px; }
  .topbar-back em{ display:none; }
  .topbar-cta{ --px:12px; }
}
@media (pointer:coarse){ .topbar-cta, .lang-toggle, .topbar-back{ height:44px; min-width:44px; } }

/* ── closing (BOS pattern in AVC tone) ──────────────────────────── */
.closing{ position:relative; overflow:hidden; min-height:92vh; min-height:92svh; display:flex; align-items:center;
  padding:clamp(96px, 13vw, 168px) 0; background:var(--bg-0); }
.closing-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.closing::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(60% 46% at 50% 44%, rgba(30,110,230,.10), transparent 70%); }
.closing::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(72% 64% at 50% 50%, transparent 34%, rgba(2,5,11,.55) 82%, var(--bg-0) 100%), linear-gradient(180deg, var(--bg-0), transparent 18%, transparent 82%, var(--bg-0)); }
.closing-inner{ position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; }
.closing-inner .kicker{ margin-bottom:clamp(18px, 2.4vw, 26px); }
.closing-inner .kicker::after{ content:""; width:18px; height:1px; background:currentColor; opacity:.7; }
.closing-title{ font-family:var(--display); font-size:clamp(32px, 3.9vw, 56px); line-height:1.08; letter-spacing:-.032em; font-weight:600; color:var(--text);
  max-width:20ch; text-wrap:balance; padding-bottom:.14em; margin-bottom:-.14em;
  background-image:linear-gradient(176deg, #ffffff 0%, #eef4fb 36%, #c9d7ea 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
html[data-lang="ko"] .closing-title{ line-height:1.24; letter-spacing:-.024em; max-width:18ch; }
.closing-lead{ margin-top:clamp(18px, 2.2vw, 24px); max-width:36em; font-size:var(--fs-lead); line-height:1.6; color:var(--body); text-wrap:balance; }
html[data-lang="ko"] .closing-lead{ line-height:1.78; max-width:38em; }
.closing-cta{ margin-top:clamp(32px, 4vw, 46px); display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.closing-by{ margin-top:clamp(56px, 7vw, 88px); padding-top:clamp(26px, 3vw, 34px); position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px; min-width:min(480px, 100%); }
.closing-by::before{ content:""; position:absolute; top:0; left:50%; width:min(480px, 100%); height:1px; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(140,175,225,.22), transparent); }
.cb-name{ font-family:var(--display); font-size:clamp(19px, 1.85vw, 24px); font-weight:600; letter-spacing:-.014em; color:var(--text); }
.cb-person{ font-size:15px; font-weight:500; color:#b9c6d8; letter-spacing:.005em; }
.cb-org{ margin-top:4px; font-size:13px; color:var(--dim); }

/* ── footer ─────────────────────────────────────────────────────── */
.footer{ position:relative; border-top:1px solid var(--line-soft); padding:clamp(56px, 7vw, 92px) 0 clamp(24px, 3vw, 34px);
  background:radial-gradient(70% 90% at 10% 0%, rgba(30,110,230,.07), transparent 62%), var(--bg); }
.footer-top{ display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.5fr); gap:clamp(36px, 5vw, 72px);
  padding-bottom:clamp(38px, 5vw, 58px); border-bottom:1px solid var(--line-soft); }
.f-lab{ font-family:var(--display); font-size:clamp(21px, 2.2vw, 25px); font-weight:700; letter-spacing:.18em; color:var(--text); margin-bottom:10px; }
.f-lab-full{ font-size:14.5px; color:var(--body); }
.f-org{ font-size:13.5px; color:var(--dim); margin-top:2px; }
.t-label{ font-family:var(--small); font-size:11.5px; line-height:1.3; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); }
html[data-lang="ko"] .t-label{ font-size:12.5px; letter-spacing:.02em; text-transform:none; }
.f-group{ margin-top:clamp(24px, 3vw, 32px); padding:16px 20px; border-radius:var(--r-md);
  background:linear-gradient(100deg, rgba(30,144,255,.07), rgba(30,144,255,0) 74%); box-shadow:inset 0 0 0 1px var(--line-soft); position:relative; }
.f-group::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px; border-radius:2px; background:linear-gradient(180deg, var(--acc-glow), rgba(30,144,255,.3)); }
.f-group-name{ margin-top:6px; font-size:15.5px; font-weight:600; line-height:1.4; letter-spacing:-.01em; color:var(--text); }
.f-links{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(22px, 3vw, 40px); }
.f-head{ margin-bottom:14px; }
.f-col li{ margin-bottom:10px; }
.f-col a{ font-size:13.5px; line-height:1.55; color:var(--body); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px;
  transition:color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
.f-col a:hover{ color:var(--acc-hi); border-bottom-color:rgba(90,165,255,.4); }
.f-ext{ color:var(--dimmer); font-size:.9em; }
.f-plain{ font-size:13.5px; line-height:1.6; color:var(--body); }
.f-plain small{ display:block; margin-top:2px; font-size:12.5px; color:var(--dim); }
.footer-cite{ padding-block:clamp(24px, 3vw, 34px); border-bottom:1px solid var(--line-soft); display:grid; grid-template-columns:auto minmax(0, 1fr); gap:8px clamp(20px, 3vw, 40px); align-items:baseline; }
.f-cite{ font-size:13px; line-height:1.75; color:var(--dim); max-width:96ch; }
.f-cite-venue{ color:var(--body); }
.footer-base{ padding-top:22px; display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-base p{ font-size:12.5px; color:var(--dim); }
.f-top{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--dim); text-decoration:none; white-space:nowrap; }
.f-top .ic{ width:14px; height:14px; }
.f-top:hover{ color:var(--acc-hi); }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr; gap:36px; } .footer-cite{ grid-template-columns:1fr; } }
@media (max-width:520px){ .f-links{ grid-template-columns:1fr 1fr; } .footer-base{ flex-direction:column; gap:10px; } }
@media (pointer:coarse){ .f-col a{ display:inline-block; padding-block:10px; } .f-top{ padding-block:10px; } }

/* ── video modal ────────────────────────────────────────────────── */
html.modal-open{ overflow:hidden; }
.vmodal{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:clamp(10px, 3vw, 40px); overflow:auto; }
.vmodal[hidden]{ display:none; }
.vm-backdrop{ position:absolute; inset:0; background:radial-gradient(70% 60% at 50% 40%, rgba(10,30,70,.5), transparent 70%), rgba(1,3,8,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); opacity:0; transition:opacity .45s var(--ease); }
.vm-panel{ position:relative; width:min(100%, 1480px, calc((100vh - 220px) * 16 / 9)); width:min(100%, 1480px, calc((100svh - 220px) * 16 / 9)); opacity:0; transform:translateY(14px) scale(.985); transition:opacity .5s var(--ease), transform .6s var(--ease-out); }
.vmodal.is-open .vm-backdrop{ opacity:1; }
.vmodal.is-open .vm-panel{ opacity:1; transform:none; }
.vm-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.vm-title{ font-family:var(--display); font-size:16px; font-weight:600; color:var(--text); }
.vm-meta{ display:flex; align-items:center; gap:8px; margin-top:2px; font-size:12.5px; color:var(--dim); font-variant-numeric:tabular-nums; }
.vm-meta i{ width:3px; height:3px; border-radius:50%; background:var(--dimmer); }
.vm-actions{ display:flex; align-items:center; gap:8px; }
.vm-esc{ display:inline-flex; align-items:center; height:22px; padding:0 7px; border-radius:var(--r-xs); font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--dim); box-shadow:inset 0 0 0 1px var(--line-hard); }
.vm-frame{ position:relative; aspect-ratio:16 / 9; border-radius:var(--r-xl); overflow:hidden; background:#000;
  box-shadow:inset 0 0 0 1px rgba(140,175,225,.18), 0 0 0 1px rgba(0,0,0,.6), 0 50px 140px -40px rgba(0,0,0,.95), 0 0 80px -30px rgba(30,120,255,.35); }
.vm-frame video{ width:100%; height:100%; object-fit:contain; background:#000; }
.vm-loading{ position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:2px solid rgba(255,255,255,.14); border-top-color:#9fcbff; opacity:0; pointer-events:none; transition:opacity .3s; }
.vm-frame.is-loading .vm-loading{ opacity:1; animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.vm-chapters{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px; margin-top:12px; }
.vm-chapters button{ width:100%; height:100%; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:8px; row-gap:7px; align-items:center; text-align:left;
  padding:9px 10px 10px; border:0; border-radius:var(--r-sm); cursor:pointer; background:rgba(140,175,225,.035); box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:background-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
.vm-track{ grid-column:1 / -1; height:2px; border-radius:1px; background:rgba(140,175,225,.14); overflow:hidden; }
.vm-fill{ display:block; height:100%; width:100%; transform:scaleX(var(--p, 0)); transform-origin:0 50%; background:linear-gradient(90deg, var(--acc-deep), var(--acc-glow)); }
.vm-ch-t{ font-size:12px; font-weight:600; color:var(--acc-hi); font-variant-numeric:tabular-nums; }
.vm-ch-n{ font-size:12.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vm-chapters button:hover{ background:rgba(140,175,225,.06); box-shadow:inset 0 0 0 1px var(--line); }
.vm-chapters button:hover .vm-ch-n{ color:var(--text); }
.vm-chapters button.is-on{ background:rgba(30,144,255,.08); box-shadow:inset 0 0 0 1px rgba(90,165,255,.32); }
.vm-chapters button.is-on .vm-ch-n{ color:var(--text); }
@media (max-width:820px){
  .vm-chapters button{ grid-template-columns:minmax(0, 1fr); row-gap:5px; align-content:start; }
  .vm-ch-n{ white-space:normal; overflow:visible; line-height:1.3; }
}
@media (max-width:760px){
  .vm-chapters{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .vm-esc{ display:none; }
}
@media (hover:none){ .vm-esc{ display:none; } }
@media (orientation:landscape) and (max-height:520px){
  .vm-panel{ width:min(100%, calc((100vh - 2 * clamp(10px, 3vw, 40px) - 56px) * 16 / 9)); width:min(100%, calc((100svh - 2 * clamp(10px, 3vw, 40px) - 56px) * 16 / 9)); }
  .vm-head{ margin-bottom:6px; }
  .vm-meta, .vm-chapters{ display:none; }
}

/* ── chart primitives (SVG) shared by the case study ───────────── */
.ch-grid{ stroke:rgba(140,175,225,.07); stroke-width:1; shape-rendering:crispEdges; }
.ch-axis{ stroke:rgba(140,175,225,.22); stroke-width:1; shape-rendering:crispEdges; }
.ch-tick{ font:500 12px var(--small); fill:var(--dim); font-variant-numeric:tabular-nums; }
.ch-title{ font:600 12.5px var(--small); fill:#c3cfdf; letter-spacing:.01em; }
.ch-tip{ position:absolute; pointer-events:none; min-width:176px; padding:10px 12px; border-radius:var(--r-md); z-index:5;
  font-size:13px; color:var(--body); background:linear-gradient(180deg, #13223a, #0c182a); box-shadow:inset 0 0 0 1px var(--line-hard), 0 20px 40px -18px rgba(0,0,0,.9); }
.ch-tip .tt-t{ font-weight:600; color:var(--text); margin-bottom:6px; font-variant-numeric:tabular-nums; }
/* footer rules sit on the text column, not on the padded box */
.footer-top, .footer-cite{ position:relative; border-bottom:0; }
.footer-top::after, .footer-cite::after{ content:""; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px; background:var(--line-soft); }
@media (pointer:coarse){ .nav-item{ height:40px; } }
/* TECH-05: the focus ring of the modal video is drawn inside the clipped frame */
.vm-frame video:focus-visible{ outline-offset:-3px; }