:root {
  --ink:#0b0c0f; --paper:#fafafa; --soft:#f0f2f5; --line:#d4d8df;
  --muted:#535c69; --blue:#2563eb; --display:"Archivo","Noto Sans KR",sans-serif;
  --body:"Space Grotesk","Noto Sans KR",sans-serif; --ease:cubic-bezier(.16,1,.3,1);
}
* { box-sizing:border-box; }
html { scroll-padding-top:110px; }
body { margin:0; color:var(--ink); background:var(--paper); font:400 16px/1.65 var(--body); -webkit-font-smoothing:antialiased; font-synthesis:none; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
img { display:block; max-width:100%; }
h1,h2,h3,h4,p,figure { margin:0; }
h1,h2,h3,h4 { font-family:var(--display); line-height:1.12; text-wrap:balance; }
h1 { font-size:clamp(3.1rem,6.7vw,6rem); letter-spacing:-.04em; font-weight:750; }
h2 { font-size:clamp(2rem,3.4vw,3.4rem); letter-spacing:-.035em; font-weight:700; }
h3 { font-size:1.45rem; letter-spacing:-.02em; font-weight:650; }
h4 { font-size:1rem; font-weight:650; line-height:1.5; }
p { text-wrap:pretty; }
[data-ko] { white-space:pre-line; }
p + p { margin-top:1rem; }
.wrap { width:min(1280px,calc(100% - 112px)); margin-inline:auto; }
.icon { width:22px; height:22px; flex:none; }
:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
main:focus { outline:none; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:100; padding:12px 18px; background:var(--ink); color:white; }
.skip-link:focus { top:12px; }
.site-header { position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line); }
.header-inner { min-height:88px; padding:16px 40px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
.wordmark { display:inline-flex; align-items:center; gap:10px; width:max-content; font:800 11px/1.08 var(--display); letter-spacing:.05em; }
.wordmark img { width:34px; height:35px; object-fit:contain; }
.site-header nav { display:flex; gap:34px; }
.site-header nav a { display:flex; align-items:center; position:relative; min-height:44px; font-size:14px; font-weight:600; }
.site-header nav a[aria-current]::after { content:""; position:absolute; bottom:1px; inset-inline:0; height:2px; background:var(--blue); }
.language-menu { justify-self:end; position:relative; }
.language-menu summary { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:9px 10px; cursor:pointer; list-style:none; border:1px solid var(--line); border-radius:50px; }
.language-menu summary::-webkit-details-marker { display:none; }
.locale-code { font-size:11px; font-weight:650; }
.language-options { position:absolute; top:calc(100% + 12px); right:0; width:176px; padding:6px; background:white; box-shadow:0 12px 32px rgb(11 12 15 / .14); border-radius:12px; }
.language-options button { display:flex; justify-content:space-between; gap:20px; width:100%; min-height:44px; padding:10px 12px; background:none; border:0; border-radius:7px; cursor:pointer; text-align:left; }
.language-options button span { font-size:12px; }
.language-options button[aria-pressed=true] { background:#eaf0ff; color:#184cb9; font-weight:650; }
.action,.text-link { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; min-height:44px; width:max-content; max-width:100%; font-weight:600; }
.action { padding:15px 20px; border:1px solid var(--ink); }
.text-link { padding-block:8px; border-bottom:1px solid currentColor; font-size:14px; }
.primary { background:var(--blue); color:white; border-color:var(--blue); }
.primary .icon,.preview .icon { filter:invert(1); }
.home-hero { display:grid; grid-template-columns:1.5fr 1fr; align-items:end; gap:64px; padding-block:112px 104px; }
.home-hero h1 { max-width:11ch; }
.hero-aside { padding-bottom:6px; max-width:420px; }
.hero-aside p { font-size:18px; color:var(--muted); margin-bottom:32px; }
.location-note { display:block; font-size:12px; color:var(--muted); margin-top:40px; }
.services { padding-block:76px 104px; border-top:1px solid var(--line); }
.section-heading { display:grid; grid-template-columns:1.25fr 1fr; gap:64px; align-items:end; margin-bottom:48px; }
.section-heading p { color:var(--muted); max-width:440px; }
.service-list article { display:grid; grid-template-columns:1fr 1.35fr .8fr; align-items:start; gap:36px; padding:30px 0; border-top:1px solid var(--line); }
.service-list article p { color:var(--muted); }
.service-list .text-link { justify-self:end; }
.selected-work { background:var(--soft); padding:88px 0; }
.compact .text-link { justify-self:end; }
.featured-preview { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.preview { display:flex; flex-direction:column; min-height:410px; padding:40px; color:white; }
.academic-preview,.academic-banner { background:var(--blue); color:white; }
.cctv-preview,.cctv-banner { background:#141a23; color:white; }
.preview h3 { font-size:clamp(2rem,3.3vw,3.2rem); font-weight:700; letter-spacing:-.035em; }
.preview > p { margin:28px 0 36px; max-width:42ch; color:#f0f4ff; }
.preview-bottom { margin-top:auto; padding-top:20px; border-top:1px solid rgb(255 255 255 / .4); display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:12px; }
.process { display:grid; grid-template-columns:1fr 1fr; gap:90px; padding-block:104px; }
.process ol { margin:0; padding:0; list-style:none; counter-reset:step; }
.process li { position:relative; counter-increment:step; padding:0 0 30px 40px; margin-bottom:30px; border-bottom:1px solid var(--line); }
.process li::before { content:counter(step); position:absolute; top:0; left:0; font-size:13px; color:var(--blue); }
.process li:last-child { margin-bottom:0; }
.process h3 { font-size:1.2rem; margin-bottom:12px; }
.process p { color:var(--muted); }
.closing { display:flex; justify-content:space-between; align-items:center; gap:40px; border-top:1px solid var(--ink); padding-block:64px 88px; }
.page-intro { display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:end; padding-block:80px 56px; }
.page-intro h1 { font-size:clamp(3rem,6vw,5.6rem); }
.page-intro p { color:var(--muted); font-size:18px; max-width:470px; }
.project-index { display:flex; flex-wrap:wrap; gap:12px 28px; padding-bottom:48px; }
.project-index a { min-height:44px; display:inline-flex; align-items:center; font-size:13px; border-bottom:1px solid var(--line); }
.case-study { scroll-margin-top:112px; margin-bottom:96px; }
.case-banner { padding:48px; display:grid; grid-template-columns:1.2fr 1fr; align-items:end; gap:40px; min-height:340px; }
.case-banner h2 { font-size:clamp(2.4rem,5vw,4.6rem); font-weight:700; letter-spacing:-.04em; }
.case-banner > div { padding-bottom:4px; }
.case-banner p { font-size:24px; line-height:1.4; margin-bottom:32px; }
.case-category { font-size:13px; padding-top:18px; display:block; border-top:1px solid rgb(255 255 255 / .4); }
.case-overview { display:grid; grid-template-columns:1fr 1.4fr; gap:64px; padding-block:48px; }
.case-overview h3 { font-size:clamp(1.8rem,2.6vw,2.5rem); }
.case-overview p { color:var(--muted); }
p.lead { color:var(--ink); font-size:19px; }
.scope-comparison { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); }
.scope-comparison section { padding:32px; }
.scope-comparison section:first-child { background:#edf2fd; border-right:1px solid var(--line); }
.scope-comparison h3 { margin-bottom:30px; }
.scope-comparison section > div + div { margin-top:24px; }
.scope-comparison p { font-size:15px; color:var(--muted); margin-top:6px; }
.case-result { display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:end; padding:40px 0 24px; }
.case-result h3 { font-size:1.25rem; margin-bottom:14px; }
.case-result p { color:var(--muted); }
.case-result .text-link { justify-self:end; }
.case-note { color:var(--muted); font-size:13px; padding-top:20px; border-top:1px solid var(--line); }
.system-flow { display:grid; grid-template-columns:1fr 1fr 1fr; background:#e9edf2; padding:32px; gap:32px; }
.system-flow > div { border-top:2px solid var(--ink); padding-top:20px; }
.system-flow > div:nth-child(2) { border-color:var(--blue); }
.system-flow h3 { font-size:1.15rem; margin-bottom:24px; }
.system-flow p { font-size:17px; font-weight:600; }
.system-flow span { display:block; font-size:13px; color:var(--muted); margin-top:6px; }
.case-columns { display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:40px; }
.case-columns h3 { font-size:1.25rem; margin-bottom:16px; }
.case-columns p { color:var(--muted); }
.more-work { padding-bottom:96px; scroll-margin-top:110px; }
.more-work > h2 { margin-bottom:40px; }
.expanded-case:last-child { margin-bottom:0; }
.expanded-case .case-banner { min-height:260px; }
.expanded-case .case-banner h2 { font-size:clamp(2.4rem,4.2vw,4rem); }
.expanded-case .case-category { border-color:var(--line); color:var(--muted); }
.workspace-banner { background:#edf0ff; }
.community-banner { background:#e9e7e0; }
.learning-banner { background:#e4f0e9; }
.expanded-case .case-columns { margin-top:0; padding-top:32px; border-top:1px solid var(--line); }
.learning-story { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:64px; padding-block:48px; align-items:start; }
.learning-screen { background:#eef5f1; padding:32px; text-align:center; }
.learning-screen img { width:auto; height:auto; max-height:480px; margin-inline:auto; border-radius:16px; }
.learning-screen figcaption { font-size:12px; color:var(--muted); margin-top:20px; }
.learning-story > div > h3 { font-size:clamp(1.8rem,2.6vw,2.5rem); margin-bottom:24px; }
.learning-story p { color:var(--muted); }
.learning-story p.lead { color:var(--ink); }
.learning-features { margin-top:32px; }
.learning-features section + section { margin-top:24px; }
.learning-features h3 { font-size:1.15rem; margin-bottom:12px; }
.contact-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:end; padding-block:100px 88px; }
.contact-hero h1 { font-size:clamp(3.5rem,7.6vw,6rem); }
.contact-hero .lead { margin-bottom:32px; }
.email-address { display:block; font-size:15px; margin-top:18px; overflow-wrap:anywhere; }
#project-context { font-size:14px; color:#184cb9; margin-bottom:24px; }
.contact-body { display:grid; grid-template-columns:1.2fr 1fr; gap:80px; padding-block:64px 100px; border-top:1px solid var(--line); }
.contact-body h2 { font-size:1.7rem; margin-bottom:24px; }
.contact-body p { color:var(--muted); }
.contact-body ul { margin:28px 0 0; padding-left:20px; }
.contact-body li { padding-left:8px; margin-bottom:14px; }
.contact-body aside { background:var(--soft); padding:32px; }
.contact-body aside .business-details { margin-block:32px; }
.contact-note { font-size:13px; }
.site-footer { border-top:4px solid var(--blue); }
.footer-inner { max-width:1280px; margin:auto; padding:48px 40px 20px; }
.footer-main { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; }
.footer-brand { text-align:left; }
.footer-main > section:last-child { text-align:right; }
.footer-main .wordmark { min-height:44px; }
.footer-main h2 { font:600 12px/1.5 var(--body); color:var(--muted); letter-spacing:0; margin-bottom:20px; }
.footer-line { font-size:14px; margin-top:18px; max-width:25ch; }
.footer-email { min-height:44px; max-width:100%; display:inline-flex; align-items:center; margin-top:12px; font-size:15px; text-decoration:underline; text-underline-offset:4px; }
.footer-main .business-details { gap:8px 16px; width:max-content; max-width:100%; margin-left:auto; }
.footer-address { font-size:13px; line-height:1.8; margin-top:16px; }
.footer-main section,.footer-main p,.footer-main a,.footer-main dd { overflow-wrap:anywhere; }
.business-details { margin:0; display:grid; grid-template-columns:max-content minmax(0,1fr); gap:8px 28px; font-size:12px; line-height:1.6; }
.business-details dt { color:var(--muted); }
.business-details dd { margin:0; overflow-wrap:anywhere; }
.business-details a { text-decoration:underline; text-underline-offset:3px; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:36px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.footer-bottom > :last-child { text-align:right; }
html[lang=ko] body { font-family:"Noto Sans KR",sans-serif; word-break:keep-all; overflow-wrap:break-word; }
html[lang=ko] h1,html[lang=ko] h2,html[lang=ko] h3,html[lang=ko] h4 { font-family:"Noto Sans KR",sans-serif; line-height:1.25; }
html[lang=ko] .wordmark { font-family:var(--display); }
html[lang=ko] .home-hero h1 { max-width:13ch; font-size:clamp(2.8rem,5.5vw,5rem); }
@media(hover:hover) and (pointer:fine) {
  .action:hover { background:var(--ink); color:white; }
  .action:hover .icon { filter:invert(1); }
  .text-link:hover,.project-index a:hover,.site-header nav a:hover { color:var(--blue); }
  .language-options button:hover { background:var(--soft); }
  .language-menu summary:hover { border-color:var(--ink); }
  .site-footer a:hover { color:var(--blue); }
  .preview .icon { transition:transform 160ms var(--ease); }
  .preview:hover .icon { transform:translate(3px,-3px); }
}
@media(max-width:1000px) {
  .wrap { width:calc(100% - 64px); }
  .home-hero,.page-intro,.contact-hero { gap:40px; }
  .service-list article { grid-template-columns:1fr 1.5fr; }
  .service-list .text-link { grid-column:2; justify-self:start; }
  .case-banner { padding:36px; }
  .process,.contact-body { gap:40px; }
}
@media(max-width:760px) {
  html { scroll-padding-top:128px; }
  .wrap { width:calc(100% - 40px); }
  .header-inner { grid-template-columns:1fr auto; gap:8px; padding:12px 20px 6px; }
  .site-header nav { grid-column:1 / -1; grid-row:2; justify-content:space-between; gap:20px; }
  .language-menu { grid-column:2; grid-row:1; }
  .site-header nav a { justify-content:center; flex:1; font-size:13px; }
  .wordmark { font-size:10px; }
  .wordmark img { width:30px; height:31px; }
  .home-hero { display:block; padding-block:56px 60px; }
  .home-hero h1 { max-width:11ch; font-size:clamp(3rem,10.5vw,4.6rem); }
  .hero-aside { margin-top:32px; max-width:100%; }
  .hero-aside p { font-size:16px; }
  .location-note { margin-top:24px; }
  .section-heading,.page-intro,.case-overview,.case-result,.contact-hero,.contact-body,.process { grid-template-columns:minmax(0,1fr); gap:28px; }
  .services { padding-block:48px 60px; }
  .section-heading { margin-bottom:32px; }
  .service-list article { display:block; padding-block:28px; }
  .service-list h3 { font-size:1.25rem; margin-bottom:16px; }
  .service-list .text-link { margin-top:16px; }
  .compact .text-link,.case-result .text-link { justify-self:start; }
  .selected-work { padding-block:56px; }
  .featured-preview { grid-template-columns:1fr; gap:20px; }
  .preview { min-height:340px; padding:28px; }
  .preview h3 { font-size:2.6rem; }
  .process { padding-block:64px; }
  .process ol { margin-top:12px; }
  .closing { display:block; padding-block:48px 64px; }
  .closing .action { margin-top:28px; }
  .page-intro { padding-block:48px 24px; }
  .page-intro h1 { font-size:3.4rem; }
  .page-intro p { font-size:16px; }
  .project-index { gap:8px 20px; padding-bottom:32px; }
  .project-index a { font-size:12px; }
  .case-banner { display:block; padding:28px; min-height:0; }
  .case-banner h2 { font-size:clamp(2.4rem,9.5vw,3.8rem); }
  .case-banner > div { margin-top:36px; }
  .case-banner p { font-size:20px; margin-bottom:20px; }
  .case-overview { padding-block:32px; }
  .case-overview h3 { font-size:1.9rem; }
  p.lead { font-size:17px; }
  .scope-comparison { grid-template-columns:1fr; }
  .scope-comparison section { padding:24px; }
  .scope-comparison section:first-child { border-right:0; border-bottom:1px solid var(--line); }
  .scope-comparison h3 { font-size:1.3rem; }
  .case-result { padding-top:32px; }
  .case-study { margin-bottom:64px; scroll-margin-top:128px; }
  .system-flow { grid-template-columns:1fr; gap:24px; padding:24px; }
  .system-flow h3 { margin-bottom:12px; }
  .case-columns { grid-template-columns:1fr; gap:28px; margin-top:32px; }
  .more-work { padding-bottom:64px; }
  .expanded-case .case-banner { min-height:0; }
  .learning-story { grid-template-columns:minmax(0,1fr); gap:32px; padding-block:32px; }
  .learning-screen img { max-height:420px; }
  .learning-story > div > h3 { font-size:1.9rem; }
  .contact-hero { padding-block:48px 56px; }
  .contact-hero h1 { font-size:clamp(3.5rem,13vw,5.5rem); }
  html[lang=ko] .contact-hero h1 { font-size:clamp(2.8rem,10vw,4.8rem); }
  .contact-body { padding-block:40px 64px; gap:40px; }
  .contact-body aside { padding:24px; }
  .business-details { gap:10px 16px; font-size:12px; }
}
@media(max-width:900px) {
  .footer-main { gap:28px; }
  .footer-line { max-width:none; }
}
@media(max-width:600px) {
  .footer-inner { padding:32px 20px 20px; }
  .footer-main { grid-template-columns:minmax(0,1fr); }
  .footer-main h2 { margin-bottom:10px; }
  .footer-bottom { flex-direction:column; gap:8px; margin-top:28px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}