/* ASDL site style (2026 redesign, look A: dark optical lab).
   One stylesheet for every layout. Colors are tokens; components use only tokens. */

:root {
  --bg: #0a0f1a;
  --bg-2: #111827;
  --bg-3: #172033;
  --line: #233047;
  --fg: #e8edf5;
  --fg-2: #9aa7bb;
  --accent: #39c6e6;      /* O-band probe light as seen on an IR card */
  --accent-hi: #5fd6f0;
  --accent-2: #7f8cff;
  --dev-bg: #0f2233;
  --glass: #18324a;
  --metal: #d9a54a;
  --badge-j: #39c6e6;
  --badge-c: #c7a4ff;
  --badge-p: #f2b45a;
  --display: "Archivo", "Noto Sans KR", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Noto Sans KR", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --maxw: 1180px;
  --prose: 760px;
  --nav-h: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.65 var(--body); }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hi); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3, h4 { text-wrap: balance; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.mono { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; }
.eyebrow { display: inline-block; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--fg-2); }

/* ---------- Navigation ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
.site-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(10, 15, 26, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fg); min-width: 0; }
.brand:hover { color: var(--fg); }
.brand img { width: 34px; height: 34px; border-radius: 50%; background: #fff; flex: none; }
.brand b { font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: 1.2rem; letter-spacing: 0.03em; }
.brand span { color: var(--fg-2); font-size: 0.8rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-links { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.nav-links a { display: block; padding: 8px 12px; border-radius: 3px; color: var(--fg-2); text-decoration: none; font-size: 0.93rem; font-weight: 500; }
.nav-links a:hover { color: var(--fg); background: var(--bg-3); }
.nav-links a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.nav-toggle { display: none; background: transparent; border: 1px solid var(--line); color: var(--fg); border-radius: 3px; padding: 8px 10px; font: 500 0.85rem var(--body); cursor: pointer; }
@media (max-width: 980px) {
  .brand span { display: none; }
  .nav-toggle { display: none; }
  .nav-ready .nav-toggle { display: inline-flex; align-items: center; gap: 8px; }
  .nav-links { flex-wrap: wrap; justify-content: flex-end; }
  .nav-ready .nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
  .nav-ready .nav-links.open { display: flex; }
  .nav-ready .nav-links a { padding: 12px 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-ready .nav-links a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); }
}

/* ---------- Buttons, badges ---------- */
.btn-a { display: inline-block; text-decoration: none; padding: 10px 18px; font-weight: 600; font-size: 0.92rem; border-radius: 3px; border: 1px solid transparent; }
.btn-a.primary { background: var(--accent-hi); color: #05070c; }
.btn-a.primary:hover { background: var(--fg); color: #05070c; }
.btn-a.ghost { border-color: currentColor; color: var(--fg); }
.btn-a.ghost:hover { color: var(--accent-hi); }
.badge { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 7px; border-radius: 2px; border: 1px solid; white-space: nowrap; }
.b-j { color: var(--badge-j); }
.b-c { color: var(--badge-c); }
.b-p { color: var(--badge-p); }
.b-s { color: var(--fg-2); }

/* ---------- Home hero with rotating photos ---------- */
.home-hero { position: relative; min-height: 600px; display: flex; color: #eef3fa; background: #05070c; overflow: hidden; isolation: isolate; }
.home-hero .slides { position: absolute; inset: 0; z-index: -2; margin: 0; padding: 0; list-style: none; }
.home-hero .slides li { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.home-hero .slides li.on { opacity: 1; }
.home-hero .slides img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,8,14,.94) 0%, rgba(5,8,14,.78) 42%, rgba(5,8,14,.22) 100%), linear-gradient(0deg, rgba(5,8,14,.7) 0%, rgba(5,8,14,0) 40%); }
.home-hero .wrap { display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding-block: 120px 64px; width: 100%; }
.home-hero h1 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: clamp(2.3rem, 5.4vw, 4.3rem); line-height: 1.04; max-width: 15ch; letter-spacing: -0.01em; }
.home-hero h1 em { font-style: normal; color: var(--accent-hi); }
.home-hero .sub { margin: 0; font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.06em; color: #b9c6d8; }
.kw { display: flex; flex-wrap: wrap; gap: 8px; }
.kw span { border: 1px solid rgba(207,233,243,.45); color: #cfe9f3; border-radius: 999px; padding: 4px 12px; font-size: 0.88rem; }
.home-hero .cpo { margin: 0; font-size: 0.88rem; max-width: 60ch; color: #b9c6d8; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(207,233,243,.18); }
.hero-meta .cap { color: #9fb0c6; min-height: 1.3em; }
.dots { display: flex; gap: 6px; }
.dots button { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.dots button::after { content: ""; position: absolute; left: 3px; right: 3px; top: 10px; height: 2px; background: rgba(207,233,243,.35); }
.dots button[aria-current="true"]::after { background: var(--accent-hi); }
@media (max-width: 560px) { .home-hero { min-height: 560px; } .home-hero .slides img { object-position: 65% 40%; } }

/* ---------- Generic sections ---------- */
.sec { padding-block: 80px; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec.alt { background: var(--bg-2); }
.sec-head { display: grid; gap: 12px; max-width: 780px; margin-bottom: 36px; }
.sec-head h2 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.15; }
.sec-head p { margin: 0; color: var(--fg-2); }
.sec-foot { margin-top: 28px; }

/* ---------- SING heading art (home): AI chiplets linked by light on glass ---------- */
.sing-head-row { display: grid; gap: 24px; align-items: center; margin-bottom: 36px; }
.sing-head-row > .sec-head { min-width: 0; margin-bottom: 0; }
.sing-hero { display: block; width: 100%; max-width: 420px; height: auto; justify-self: center; }
@media (min-width: 980px) { .sing-head-row { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); gap: 32px; } }
.sing-hero .sh-edge { stroke: var(--line); stroke-width: 1.5; }
.sing-hero .sh-tgv { fill: var(--accent); opacity: .12; }
.sing-hero .sh-sheen { animation: sh-sheen 7s ease-in-out infinite; }
.sing-hero .sh-label { fill: var(--fg-2); font: 9px var(--mono); letter-spacing: .08em; }
.sing-hero .sh-chip { fill: #0b1726; stroke: var(--accent-2); stroke-width: 1.5; }
.sing-hero .sh-ai { fill: var(--accent-hi); font: 600 19px var(--mono); text-anchor: middle; }
.sing-hero .sh-pic { fill: #0b1726; stroke: var(--metal); stroke-width: 1.5; }
.sing-hero .sh-wire { fill: none; stroke: var(--metal); stroke-width: 1.5; stroke-opacity: .8; }
.sing-hero .sh-lane { fill: none; stroke: var(--accent); stroke-width: 2; stroke-opacity: .45; stroke-linecap: round; }
.sing-hero .sh-violet { stroke: var(--accent-2); }
.sing-hero .sh-pulse { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 12 120; stroke-dashoffset: 18; }
.sing-hero .sh-pulse.core { stroke-width: 2.4; stroke: #e6fbff; }
.sing-hero .sh-pulse .p-a { stroke: var(--accent-2); }
.sing-hero .sh-pulse .p-b, .sing-hero .sh-pulse .p-c { stroke: var(--accent); }
.sing-hero .sh-pulse.core use { stroke: #e6fbff; }
/* 3.6 s cycle: lane b runs left→right (arrives ~73%), lane c the same half a cycle later (~23%), lane a right→left (~33%); halos peak on arrival */
.sing-hero .p-b { animation: sh-run 3.6s linear infinite; }
.sing-hero .p-c { animation: sh-run 3.6s linear -1.8s infinite; }
.sing-hero .p-a { animation: sh-run 3.6s linear -1.8s infinite reverse; }
.sing-hero .sh-halo { fill: var(--accent); opacity: 0; }
.sing-hero .h-r { animation: sh-rx-r 3.6s linear infinite; }
.sing-hero .h-l { fill: var(--accent-2); animation: sh-rx-l 3.6s linear infinite; }
@keyframes sh-run { 0%, 10% { stroke-dashoffset: 18; } 80%, 100% { stroke-dashoffset: -106; } }
@keyframes sh-rx-r { 0%, 17%, 33%, 67%, 83%, 100% { opacity: 0; } 23%, 73% { opacity: .6; } }
@keyframes sh-rx-l { 0%, 27%, 45%, 100% { opacity: 0; } 33% { opacity: .6; } }
@keyframes sh-sheen { 0%, 15% { transform: skewX(-20deg) translateX(0); } 75%, 100% { transform: skewX(-20deg) translateX(560px); } }
.motion-paused .sing-hero .sh-pulse use, .motion-paused .sing-hero .sh-halo, .motion-paused .sing-hero .sh-sheen { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .sing-hero .sh-pulse use, .sing-hero .sh-sheen, .sing-hero .sh-halo { animation: none; }
  .sing-hero .sh-pulse { stroke-dasharray: none; opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .slides li { transition: none; }
}

/* ---------- Materials → Devices → Applications ---------- */
.path { display: grid; grid-template-columns: minmax(0, 0.8fr) 32px minmax(0, 2.1fr) 32px minmax(0, 0.9fr); align-items: stretch; }
.path .col { display: grid; align-content: start; gap: 14px; padding: 22px; min-width: 0; }
.path h3 { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.path .dev { background: var(--dev-bg); border: 1px solid var(--accent); border-radius: 4px; padding: 26px; }
.path .dev h3 { color: var(--accent); font-size: 0.86rem; }
.path .arrow { display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.4rem; }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.side-list li { border-top: 1px solid var(--line); padding-top: 10px; }
.side-list .mono { color: var(--fg-2); display: block; margin-top: 2px; }
.dev-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dev-list li { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 14px; display: grid; gap: 8px; align-content: start; }
.dev-list .name { font-weight: 600; line-height: 1.35; }
.dev-list .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--fg-2); }
.dev-list a { color: inherit; text-decoration: none; }
.dev-list a:hover .name { color: var(--accent-hi); }
@media (max-width: 900px) {
  .path { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .path .arrow { display: none; }
  .path .dev { order: -1; }
}
@media (max-width: 560px) { .dev-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Portfolio rows ---------- */
.port-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.port-grid a { display: grid; gap: 8px; align-content: start; padding: 22px 22px 22px 0; text-decoration: none; color: var(--fg); border-bottom: 1px solid var(--line); }
.port-grid a + a { padding-left: 22px; border-left: 1px solid var(--line); }
.port-grid h3 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: 1.2rem; }
.port-grid p { margin: 0; color: var(--fg-2); font-size: 0.93rem; }
.port-grid .go { color: var(--accent); font-size: 0.85rem; font-weight: 600; }
.port-grid a:hover h3 { color: var(--accent-hi); }
@media (max-width: 900px) { .port-grid { grid-template-columns: minmax(0, 1fr); } .port-grid a + a { padding-left: 0; border-left: 0; } }

/* ---------- Facilities ---------- */
.fac-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
.fac-grid figure { margin: 0; display: grid; gap: 8px; align-content: start; min-width: 0; }
.fac-grid figure:first-child { grid-row: span 2; }
.fac-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; display: block; }
.fac-grid figure:first-child img { aspect-ratio: 4 / 5; }
.fac-grid figcaption b { display: block; font-weight: 600; }
.fac-grid figcaption span { color: var(--fg-2); font-size: 0.9rem; }
@media (max-width: 900px) { .fac-grid { grid-template-columns: 1fr 1fr; } .fac-grid figure:first-child { grid-column: span 2; grid-row: auto; } .fac-grid figure:first-child img { aspect-ratio: 3 / 2; } }
@media (max-width: 560px) { .fac-grid { grid-template-columns: minmax(0, 1fr); } .fac-grid figure:first-child { grid-column: auto; } }

/* ---------- News cards ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.news-card { text-decoration: none; color: var(--fg); display: grid; gap: 10px; align-content: start; min-width: 0; }
.news-card .thumb { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; background: var(--bg-3); display: block; border: 1px solid var(--line); }
.news-card .thumb.none { display: grid; place-items: center; color: var(--fg-2); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; }
.news-card .kind { color: var(--fg-2); }
.news-card .t { font-weight: 600; line-height: 1.35; }
.news-card .x { color: var(--fg-2); font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card:hover .t { color: var(--accent-hi); }
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .news-grid { grid-template-columns: minmax(0, 1fr); } }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.pager a { text-decoration: none; font-weight: 600; }
.pager .num { color: var(--fg-2); }

/* ---------- Join / contact ---------- */
.join .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.join h2 { margin: 12px 0 0; font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; }
.join p { color: var(--fg-2); margin: 12px 0 0; max-width: 60ch; }
.contact-box { border: 1px solid var(--line); border-radius: 4px; padding: 22px; display: grid; gap: 12px; background: var(--bg); }
.contact-box .row { display: grid; gap: 2px; }
.contact-box .row > span:first-child { color: var(--fg-2); font-size: 0.85rem; }
.contact-box .addr { user-select: all; font-family: var(--mono); font-size: 0.92rem; }
@media (max-width: 900px) { .join .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Page header (all non-home pages) ---------- */
.page-hero { position: relative; border-bottom: 1px solid var(--line); background: var(--bg-2); overflow: hidden; isolation: isolate; }
.page-hero.has-img { min-height: 340px; display: flex; align-items: flex-end; }
.page-hero.has-img img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero.has-img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,8,14,.93) 0%, rgba(5,8,14,.7) 50%, rgba(5,8,14,.3) 100%); }
.page-hero .wrap { padding-block: 64px 40px; display: grid; gap: 12px; width: 100%; }
.page-hero h1 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.08; max-width: 24ch; }
.page-hero .post-title { font-size: clamp(1.6rem, 3.4vw, 2.5rem); max-width: 34ch; }
.page-hero .subtitle { margin: 0; color: var(--fg-2); font-size: 1.05rem; max-width: 65ch; }
.page-hero .post-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--fg-2); }
.page-body { padding-block: 48px 80px; }
.page-body.with-toc .wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: start; }
.toc { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 4px; font-size: 0.88rem; }
.toc .eyebrow { margin-bottom: 8px; }
.toc a { color: var(--fg-2); text-decoration: none; padding: 3px 0 3px 10px; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--fg); border-left-color: var(--accent); }
.toc a.lvl2 { padding-left: 22px; font-family: var(--mono); font-size: 0.8rem; }
@media (max-width: 900px) { .page-body.with-toc .wrap { grid-template-columns: minmax(0, 1fr); } .toc { position: static; display: flex; flex-wrap: wrap; gap: 6px 10px; } .toc .eyebrow { width: 100%; margin: 0; } .toc a { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; } .toc a.lvl2 { padding-left: 10px; } }

/* ---------- Prose (markdown content) ---------- */
.prose { max-width: var(--prose); min-width: 0; }
.prose.wide { max-width: none; }
.prose > :first-child { margin-top: 0; }
.prose h1 { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 1.9rem; line-height: 1.2; margin: 2.4em 0 0.7em; padding-top: 0.8em; border-top: 1px solid var(--line); }
.prose h2 { font-family: var(--display); font-stretch: 108%; font-weight: 600; font-size: 1.5rem; line-height: 1.25; margin: 2em 0 0.6em; }
.prose h3 { font-weight: 600; font-size: 1.15rem; margin: 1.6em 0 0.4em; }
.prose h4 { font-weight: 500; font-size: 1rem; color: var(--fg-2); margin: 0.3em 0; }
.prose p, .prose ul, .prose ol, .prose table, .prose blockquote, .prose pre { margin: 0 0 1.1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 0.35em 0; }
.prose li::marker { color: var(--accent); }
.prose strong { color: #fff; font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }
.prose img { border-radius: 2px; }
.prose blockquote { margin-left: 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--accent); color: var(--fg-2); }
.prose code { font-family: var(--mono); font-size: 0.88em; background: var(--bg-3); padding: 1px 5px; border-radius: 3px; }
.prose pre { background: var(--bg-2); border: 1px solid var(--line); padding: 14px; overflow-x: auto; border-radius: 3px; }
.prose pre code { background: none; padding: 0; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.prose th { background: var(--bg-2); text-align: left; }
.prose table img { display: block; }
.prose .post-card { border: 1px solid var(--line); background: var(--bg-2); margin: 28px 0; border-radius: 3px; overflow: hidden; }
.prose .post-card-head { font-family: var(--display); font-weight: 600; font-size: 1.02rem; padding: 12px 20px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--bg-3); color: var(--fg); }
.prose .post-card-body { padding: 18px 20px; display: grid; gap: 12px; }
.prose .post-card-body img, .prose .photo-grid img { display: block; width: 100%; }
.prose .photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 1.1em; }
.prose .post-card-body .photo-grid { margin: 0; }
@media (max-width: 560px) { .prose .photo-grid { grid-template-columns: 1fr; } }
.prose .cta { margin: 20px 0 1.1em; }
.prose iframe, .prose video { max-width: 100%; }
.prose .post-tags { margin-top: 2.4em; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--fg-2); }

/* Post footer */
.post-foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 24px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag-list a, .tag-btn { display: inline-block; font-family: var(--mono); font-size: 0.78rem; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-2); text-decoration: none; margin: 0 4px 6px 0; }
.tag-list a:hover, .tag-btn:hover { color: var(--accent-hi); border-color: var(--accent); }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.post-nav a { display: grid; gap: 4px; text-decoration: none; padding: 14px; border: 1px solid var(--line); border-radius: 3px; color: var(--fg); }
.post-nav a:hover { border-color: var(--accent); }
.post-nav .next { text-align: right; grid-column: 2; }
.post-nav .mono { color: var(--fg-2); }
@media (max-width: 560px) { .post-nav { grid-template-columns: minmax(0, 1fr); } .post-nav .next { grid-column: auto; } }
#social-share-section { display: flex; gap: 8px; align-items: center; }
#social-share-section .btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--fg-2); text-decoration: none; }
#social-share-section .btn:hover { color: var(--accent-hi); border-color: var(--accent); }

/* ---------- Team (cards built from team.md by asdl.js) ---------- */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0 0 1.4em; }
.member { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2); }
.member .body { display: grid; gap: 4px; min-width: 0; }
.member .body > p, .member .body > ul { margin: 0; font-size: 0.86rem; color: var(--fg-2); }
.member .ini { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--dev-bg); color: var(--accent-hi); border: 1px solid var(--accent); font: 600 0.95rem "Noto Sans KR", var(--body); letter-spacing: 0.02em; }
.member h3 { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.member h4 { margin: 0; font-size: 0.86rem; line-height: 1.45; overflow-wrap: anywhere; }
.member.pi { grid-template-columns: 64px minmax(0, 1fr); padding: 22px; border-color: var(--accent); background: var(--dev-bg); }
.member.pi .ini { width: 64px; height: 64px; font-size: 1.5rem; }
.member.pi h3 { font-size: 1.3rem; }
.member-grid.pi-grid { grid-template-columns: minmax(0, 1fr); }
.prose.team h1 { font-size: 1.4rem; }

/* ---------- Publication ---------- */
.prose.pubs h3 { font-family: var(--mono); font-weight: 500; font-size: 0.95rem; color: var(--accent); letter-spacing: 0.06em; margin: 2em 0 0.6em; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.prose.pubs ul { list-style: none; padding: 0; counter-reset: none; }
.prose.pubs li { margin: 0; padding: 12px 0 12px 16px; border-bottom: 1px solid rgba(35,48,71,.6); border-left: 2px solid transparent; line-height: 1.55; font-size: 0.95rem; color: #cdd5e2; }
.prose.pubs li:hover { border-left-color: var(--accent); background: rgba(57,198,230,.04); }
.prose.pubs li a { white-space: nowrap; }

/* ---------- Tag index, search, misc ---------- */
#full-tags-list h2 { font-family: var(--display); font-size: 1.2rem; margin: 2em 0 0.6em; }
.tag-entry { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tag-entry .entry-date { color: var(--fg-2); font-family: var(--mono); font-size: 0.8rem; }
#search-input { width: 100%; max-width: 520px; padding: 12px 14px; font: 400 1rem var(--body); color: var(--fg); background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; }
#results-container { list-style: none; padding: 0; margin: 16px 0 0; }
#results-container li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.text-center { text-align: center; }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: var(--bg-2); color: var(--fg-2); font-size: 0.9rem; }
.site-foot .wrap { padding-block: 40px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.site-foot b { color: var(--fg); font-family: var(--display); font-stretch: 118%; letter-spacing: 0.03em; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-foot a { color: var(--fg-2); text-decoration: none; }
.site-foot a:hover { color: var(--accent-hi); }
.site-foot .addr { user-select: all; font-family: var(--mono); font-size: 0.85rem; color: var(--fg); }
.site-foot .copy { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.8rem; }
@media (max-width: 760px) { .site-foot .wrap { grid-template-columns: minmax(0, 1fr); } }
.toc { max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; }
@media (max-width: 900px) { .toc { max-height: none; } .toc a.lvl2 { display: none; } }

/* SING diagram paint (classes so colors follow tokens) */
a.sr-only:focus { position: fixed; left: 16px; top: 12px; width: auto; height: auto; clip: auto; margin: 0; padding: 8px 14px; background: var(--accent-hi); color: #05070c; z-index: 100; border-radius: 3px; }

/* ---------- Research page ---------- */
.research { display: grid; gap: 0; }
.research .lead { font-size: 1.15rem; line-height: 1.7; max-width: 62ch; margin: 0 0 16px; }
.research .kw-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.research .kw-row .badge { font-size: 0.78rem; padding: 3px 10px; text-transform: none; letter-spacing: 0.02em; }
.r-sec { padding-top: 56px; margin-top: 56px; border-top: 1px solid var(--line); }
.r-sec > h2 { margin: 10px 0 12px; font-size: clamp(1.5rem, 2.8vw, 2rem); }
.r-sec > p { max-width: 70ch; color: var(--fg-2); }
.tscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; margin: 18px 0; }
.prose table.mda { display: table; width: 100%; min-width: 680px; margin: 0; border-collapse: collapse; font-size: 0.93rem; }
.prose table.mda th, .prose table.mda td { border: 0; border-bottom: 1px solid var(--line); padding: 12px 14px; }
.prose table.mda tr:last-child td { border-bottom: 0; }
.prose table.mda th { font-family: var(--mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); background: var(--bg-2); }
.prose table.mda td:nth-child(2) { font-weight: 600; color: var(--fg); background: rgba(57,198,230,.05); }
.prose table.mda td:nth-child(3) { white-space: nowrap; color: var(--fg-2); }
.partner-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.partner-list li { border: 1px solid var(--line); border-radius: 3px; padding: 8px 14px; margin: 0; background: var(--bg-2); }
.prose span[style*="color:blue"], .prose span[style*="color: blue"] { color: var(--badge-p) !important; }

.motion-toggle { font: 500 0.8rem var(--body); color: var(--fg-2); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.motion-toggle:hover { color: var(--fg); border-color: var(--accent); }
.motion-toggle[aria-pressed="true"] { color: #05070c; background: var(--accent-hi); border-color: var(--accent-hi); }
.motion-row { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.home-hero .motion-toggle { color: #cfe9f3; border-color: rgba(207,233,243,.35); }

/* SING big picture */
.sing-big { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; margin: 0 0 40px; }
.sing-big figure { margin: 0; background: #fff; border-radius: 4px; padding: 12px; }
.sing-big img { display: block; width: 100%; max-width: 760px; margin: 0 auto; }
.sing-big figcaption { color: #4a5568; font-size: 0.8rem; padding: 8px 4px 0; }
.sing-big .layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sing-big .layers li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sing-big .layers b { font-family: var(--mono); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--accent); }
.sing-big .layers .pk b { color: var(--badge-p); }
.sing-big .layers span { color: var(--fg-2); font-size: 0.93rem; }
@media (max-width: 900px) { .sing-big { grid-template-columns: minmax(0, 1fr); } }

/* Four-column path: Materials → Devices → Packaging → Systems */
.path.four { grid-template-columns: minmax(0, 0.75fr) 28px minmax(0, 1.5fr) 28px minmax(0, 1.5fr) 28px minmax(0, 0.8fr); }
.path.four .dev-list { grid-template-columns: minmax(0, 1fr); }
.path .pkg { background: rgba(242,180,90,.06); border: 1px solid var(--badge-p); border-radius: 4px; padding: 26px; }
.path .pkg h3 { color: var(--badge-p); font-size: 0.86rem; }
/* Research page wraps this list in .prose; undo prose heading/list spacing so it matches the home page */
.prose .path h3 { margin: 0; font-size: 0.78rem; font-weight: 500; }
.prose .path .dev h3, .prose .path .pkg h3 { font-size: 0.86rem; }
.prose .path ul, .prose .path ol { margin: 0; padding: 0; }
.prose .path li { margin: 0; }
@media (max-width: 1100px) { .path.four { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .path.four .arrow { display: none; } .path.four .dev, .path.four .pkg { order: -1; } }
@media (max-width: 640px) { .path.four { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Other research (Si PIC, memory, display) ---------- */
.ore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ore-card { border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2); padding: 24px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.ore-card.wide { grid-column: 1 / -1; border-color: var(--accent); background: var(--dev-bg); }
.ore-card h3 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: 1.3rem; line-height: 1.25; }
.ore-card h4 { margin: 0 0 6px; font-family: var(--mono); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.kw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-chips span { font-family: var(--mono); font-size: 0.74rem; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-2); }
.ore-card.wide .kw-chips span { border-color: rgba(57,198,230,.4); color: var(--accent-hi); }
.ore-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 4px; }
.ore-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ore-card li { margin: 0; padding: 9px 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.ore-card li a { color: var(--fg); text-decoration: none; font-weight: 500; line-height: 1.4; font-size: 0.94rem; }
.ore-card li a:hover { color: var(--accent-hi); text-decoration: underline; }
.ore-card li .mono { color: var(--fg-2); }
@media (max-width: 900px) { .ore { grid-template-columns: minmax(0, 1fr); } .ore-cols { grid-template-columns: minmax(0, 1fr); } }
.prose .ore-card h3, .prose .ore-card h4 { margin-top: 0; }
.prose .ore-card ul { padding-left: 0; }
.prose .ore-card li { margin: 0; }

/* ---------- Profile and CV ---------- */
.profile-hero .wrap { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 48px; }
.profile-hero .portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: 4px; border: 1px solid var(--line); }
.profile-hero .who { display: grid; gap: 10px; min-width: 0; }
.profile-hero .local { margin: 0; font-size: 1.15rem; color: var(--fg); }
.profile-hero .position { margin: 0; font-family: var(--mono); color: var(--accent); letter-spacing: 0.04em; }
.profile-hero .addr { margin: 0; font-family: var(--mono); font-size: 0.9rem; user-select: all; }
.profile-hero .cta { margin-top: 8px; }
@media (max-width: 760px) { .profile-hero .wrap { grid-template-columns: minmax(0, 1fr); } .profile-hero .portrait { max-width: 260px; } }
.prose.profile, .prose.cv { max-width: 860px; }
.prose.profile h2, .prose.cv h2 { font-family: var(--mono); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 2.6em 0 0.9em; padding-top: 0.9em; border-top: 1px solid var(--line); }
.prose.profile > h2:first-of-type { margin-top: 0; }
.prose.profile h4, .prose.cv h4 { color: var(--fg); font-weight: 600; margin: 1.1em 0 0.3em; }
.prose.cv h1 { border-top: 0; margin-top: 0; padding-top: 0; }
.prose.cv h4 + p, .prose.cv h4 + ul { color: var(--fg-2); }
.page-hero .cta { margin-top: 6px; }

.sing-big .layers-wrap { display: grid; gap: 10px; min-width: 0; }

/* Memory and display cards: accent bar and small illustration */
.ore-card { position: relative; overflow: hidden; }
.ore-mem, .ore-disp { padding-top: 28px; }
.ore-mem::before, .ore-disp::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.ore-mem::before { background: linear-gradient(90deg, #7b6cff, #39c6e6); }
.ore-disp::before { background: linear-gradient(90deg, #ff5a5a, #ffd84d 30%, #5be37d 55%, #4d7dff 80%, #c06bff); }
.ore-disp { background: radial-gradient(120% 80% at 100% 0%, rgba(255,90,90,.08), transparent 55%), radial-gradient(100% 70% at 0% 100%, rgba(77,125,255,.10), transparent 60%), var(--bg-2); border-color: #3a3550; }
.ore-mem { background: radial-gradient(110% 80% at 100% 0%, rgba(123,108,255,.10), transparent 55%), var(--bg-2); border-color: #2f3557; }
.ore-art { position: absolute; top: 18px; right: 18px; width: 120px; height: 70px; }
.ore-mem h3, .ore-disp h3, .ore-mem > .mono, .ore-disp > .mono { padding-right: 130px; }
.ore-lead { margin: 0; color: var(--fg-2); font-size: 0.93rem; max-width: 46ch; }
.ore-sub { display: grid; gap: 4px; }
.ore-sub h4 { margin: 10px 0 2px; }
.ore-disp .ore-sub h4 { background: linear-gradient(90deg, #ff8a7a, #ffd84d, #7fe3a0, #7aa2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ore-mem .ore-sub h4 { color: #a99cff; }
.ore-disp .kw-chips span { border-color: rgba(255,216,77,.3); color: #ffe7a3; }
.ore-mem .kw-chips span { border-color: rgba(123,108,255,.4); color: #c7c0ff; }
.ore-art .axis { stroke: var(--fg-2); stroke-opacity: .35; }
.ore-art .loop { fill: none; stroke: #8f84ff; stroke-width: 2; }
.ore-art .loop.b { stroke: #39c6e6; }
.ore-art .bit.one { fill: #39c6e6; } .ore-art .bit.zero { fill: #8f84ff; }
.ore-art text { fill: var(--fg-2); font: 10px var(--mono); }
.ore-art .px rect { opacity: .22; }
.ore-art .r { fill: #ff5a5a; } .ore-art .g { fill: #5be37d; } .ore-art .bl { fill: #4d7dff; }
.ore-art .px.on rect { opacity: .95; animation: px-glow 3.2s ease-in-out infinite; }
.ore-art .px.on.b rect { animation-delay: -1.1s; } .ore-art .px.on.c rect { animation-delay: -2.2s; }
@keyframes px-glow { 50% { opacity: .3; } }
.motion-paused .ore-art .px.on rect { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ore-art .px.on rect { animation: none; } }
@media (max-width: 560px) { .ore-art { display: none; } .ore-mem h3, .ore-disp h3, .ore-mem > .mono, .ore-disp > .mono { padding-right: 0; } }

/* Si PIC card: PAM-4 eye diagram (persistence traces + one live sweep) */
.ore-pic { padding-top: 28px; background: radial-gradient(90% 90% at 100% 0%, rgba(57,198,230,.12), transparent 55%), radial-gradient(70% 80% at 0% 100%, rgba(217,165,74,.07), transparent 60%), var(--dev-bg); }
.ore-pic::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--metal), #7f8cff 45%, var(--accent)); }
.ore-art.pic-art { width: 320px; height: 128px; }
.ore-pic h3, .ore-pic > .mono, .ore-pic .ore-lead { padding-right: 340px; }
.ore-pic .ore-lead { max-width: none; }
.pic-art .scope { fill: #07111c; stroke: var(--line); }
.pic-art .grid path { stroke: var(--fg-2); stroke-opacity: .12; stroke-dasharray: 1 3; }
.pic-art .eye path { fill: none; stroke: url(#eye-tint); stroke-width: .9; stroke-opacity: .32; }
.pic-art .eye-glow { opacity: .55; }
.pic-art .eye-live { fill: none; stroke: #e6fbff; stroke-width: 1.4; stroke-dasharray: 100; stroke-dashoffset: 100; animation: eye-sweep 2.6s cubic-bezier(.4,0,.2,1) infinite; filter: drop-shadow(0 0 3px #5fd6f0); }
.pic-art .eye-h path { stroke: var(--metal); stroke-width: 1.2; stroke-opacity: .75; }
.pic-art .lv text { fill: var(--fg-2); font: 8px var(--mono); text-anchor: middle; opacity: .7; }
.pic-art .tag { fill: var(--accent-hi); font: 600 7.5px var(--mono); letter-spacing: .14em; }
.pic-art .tag.r { fill: var(--fg-2); text-anchor: end; letter-spacing: .06em; }
@keyframes eye-sweep { 0% { stroke-dashoffset: 100; opacity: 0; } 12% { opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.ore-pic .ore-cols > div { border-left: 2px solid var(--g, var(--accent)); padding-left: 14px; }
.ore-pic .g-iii { --g: var(--metal); } .ore-pic .g-sige { --g: var(--accent-2); } .ore-pic .g-si { --g: var(--accent); }
.ore-pic .ore-cols h4 { color: var(--g); }
.motion-paused .pic-art .eye-live { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .pic-art .eye-live { animation: none; stroke-dashoffset: 0; opacity: .8; } }
@media (max-width: 900px) { .ore-art.pic-art { position: static; width: 100%; max-width: 320px; height: auto; } .ore-pic h3, .ore-pic > .mono, .ore-pic .ore-lead { padding-right: 0; } }
@media (max-width: 560px) { .ore-art.pic-art { display: block; } }