:root{
  --ink:#0A0A0A;
  --text:#404040;
  --muted:#525252;
  --subtle:#737373;
  --line:#E5E5E5;
  --line-strong:#D4D4D4;
  --soft:#F5F5F5;
  --live-bg:#E7F6EC;
  --live-fg:#116A33;
  --live-dot:#1A9A4B;
  --radius:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',system-ui,sans-serif;font-size:16px;line-height:1.5;word-break:keep-all;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{opacity:.6}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}

.wrap{max-width:1200px;width:100%;margin:0 auto;padding:0 20px}
.u{text-decoration:underline;text-underline-offset:3px}

/* Top navigation */
.top{padding-top:clamp(20px,3vw,32px);padding-bottom:clamp(20px,3vw,32px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.top-logo img{height:clamp(32px,4vw,40px);width:auto}
.top-links{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,28px);font-size:14px;font-weight:500}
@media (max-width:600px){.top-links-full{width:100%;justify-content:space-between;gap:12px}}
.lang{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;padding:3px}
.lang-btn{min-height:36px;min-width:44px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;background:transparent;color:var(--muted)}
.lang-btn[aria-pressed="true"]{background:var(--ink);color:#FFFFFF}

/* Hero */
.hero{padding-top:clamp(48px,9vw,112px);padding-bottom:clamp(56px,8vw,96px);display:flex;flex-direction:column;gap:clamp(20px,2.4vw,28px)}
.hero h1{font-size:clamp(36px,6vw,64px);line-height:1.15;font-weight:700;letter-spacing:-0.035em}
.hero h1 .l{display:block}
.lead{max-width:580px;font-size:clamp(17px,1.8vw,19px);line-height:1.65;color:var(--muted)}
:lang(ko) .hero h1{font-size:clamp(32px,5.2vw,56px);line-height:1.3;letter-spacing:-0.03em}
@media (max-width:600px){.hero h1 .l{display:inline}}

/* Home bands */
.band{border-top:1px solid var(--ink);padding:clamp(28px,4vw,40px) 0 clamp(64px,8vw,96px);display:flex;flex-wrap:wrap;gap:20px 48px}
.band-head{flex:0 0 240px;display:flex;flex-direction:column;gap:8px}
.band-head h2{font-size:14px;font-weight:600;line-height:1.5}
.band-head p{font-size:14px;line-height:1.65;color:var(--subtle)}
.band-body{flex:1 1 560px;min-width:0}

.method{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(20px,3vw,40px)}
.method li{display:flex;flex-direction:column;gap:8px}
@media (max-width:640px){.method{grid-template-columns:1fr}}
.num{font-size:13px;font-weight:500;color:var(--subtle);font-variant-numeric:tabular-nums}
.method .num::after{content:"\2192";margin-left:10px}
.method li:last-child .num::after{content:"\21BA  01";white-space:pre}
@media (max-width:640px){.method li:not(:last-child) .num::after{content:"\2193"}}
.method-t{font-size:20px;font-weight:600;letter-spacing:-0.02em}
.method-d{font-size:16px;line-height:1.6;color:var(--muted)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;background:#F0F0F0;color:#595959;font-size:12px;font-weight:600;white-space:nowrap}
.badge-live{background:var(--live-bg);color:var(--live-fg)}
.badge-lg{padding:4px 10px;font-size:13px}

/* Experiments */
.exps li{border-bottom:1px solid var(--line)}
.exps li:last-child{border-bottom:0}
.exps a{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 32px;padding:24px 0}
.exps li:first-child a{padding-top:0}
.exps li:last-child a{padding-bottom:0}
.exp-name{flex:0 0 220px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.exp-name strong{font-size:20px;font-weight:600;letter-spacing:-0.02em}
.exp-desc{flex:1 1 280px;min-width:0;font-size:16px;line-height:1.6;color:var(--muted)}
.exp-more{flex:0 0 auto;font-size:14px;font-weight:500}

/* IP modules */
.mods li{display:flex;flex-wrap:wrap;gap:8px 32px;padding:24px 0;border-bottom:1px solid var(--line)}
.mods li:first-child{padding-top:0}
.mods li:last-child{padding-bottom:0;border-bottom:0}
.mods h3{flex:0 0 220px;font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-0.02em}
.mods h3 small{display:block;margin-top:4px;font-size:14px;font-weight:500;color:var(--subtle)}
.mod-body{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:10px}
.mod-d{font-size:16px;line-height:1.6;color:var(--muted)}
.mod-t{font-size:13px;font-weight:500;line-height:1.5;color:var(--subtle)}
.exp-t{display:block;margin-top:10px}
.mod-b{font-size:13px;color:var(--subtle)}
.mod-b a{color:var(--ink)}

/* Contact */
.contact{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.contact-text{font-size:16px;line-height:1.6;color:var(--muted)}
.contact-mail{font-size:20px;font-weight:600;letter-spacing:-0.01em}

/* Footer */
.foot{background:var(--soft)}
.foot .wrap{padding-top:48px;padding-bottom:40px;display:flex;flex-direction:column;color:var(--muted)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 48px;padding-bottom:28px}
.foot-top img{height:32px;width:auto}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:14px;font-weight:500;color:var(--ink)}
.foot-info{border-top:1px solid #E0E0E0;padding:28px 0;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.finfo{display:flex;flex-wrap:wrap;row-gap:2px;margin-left:-25px;font-size:13px;line-height:1.7;color:var(--muted)}
.finfo>span:not(.fsep){white-space:nowrap;margin-left:12px;padding-left:12px;border-left:1px solid #CFCFCF}
.fsep{display:none}
.foot-bottom{border-top:1px solid #E0E0E0;padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px}
.foot-bottom p{font-size:13px;color:var(--subtle)}
@media (max-width:720px){.finfo{flex-direction:column;margin-left:0}.finfo>span:not(.fsep){white-space:normal;margin-left:0;padding-left:0;border-left:0}}

/* Experiment detail pages */
.d-head{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,5vw,56px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px 40px}
.d-intro{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:20px}
.d-title{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.d-title h1{font-size:clamp(40px,5vw,56px);font-weight:600;letter-spacing:-0.03em}
:lang(ko) .d-title h1{font-weight:700}
.d-desc{max-width:620px;font-size:clamp(17px,1.8vw,19px);line-height:1.65;color:var(--muted)}
.meta{margin-top:4px;display:flex;flex-wrap:wrap;gap:16px 40px;font-size:14px;line-height:1.5}
.meta div{display:flex;flex-direction:column;gap:4px}
.meta dt{color:var(--subtle)}
.meta dd{font-weight:500}
.d-logo{flex:0 0 auto;width:clamp(200px,30vw,320px);max-width:100%;height:auto;border-radius:16px;border:1px solid var(--line)}
@media (max-width:720px){.d-logo{display:none}}

.sec{padding-bottom:clamp(48px,6vw,72px);display:flex;flex-direction:column;gap:20px}
.sec-last{padding-bottom:clamp(64px,8vw,96px)}
.sec-title{font-size:14px;font-weight:600;line-height:1.5;color:var(--ink)}
.sec-text{max-width:680px;font-size:17px;line-height:1.7;color:var(--text)}
.fig{display:flex;flex-direction:column;gap:14px}
.fig-box{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(16px,4vw,48px);background:#FFFFFF}
.fig-box img{width:100%;max-width:960px;margin:0 auto;height:auto}
.fig-soft{border:0;background:var(--soft)}
.fig-soft img{border-radius:16px}
.fig figcaption{font-size:14px;color:var(--subtle)}

.phones{background:var(--soft);border-radius:var(--radius);padding:clamp(32px,6vw,64px) 16px;display:flex;flex-wrap:wrap;justify-content:center;gap:40px 32px}
.phone{width:clamp(220px,calc((100% - 64px) / 3),280px);max-width:100%;display:flex;flex-direction:column;gap:16px;align-items:center}
.phone-frame{width:100%;border:10px solid var(--ink);border-radius:44px;overflow:hidden;background:#FFFFFF}
.phone-frame img{width:100%;height:auto}
.phone figcaption{font-size:14px;color:var(--muted);text-align:center}

/* Hypothesis / experiment / result log */
.log{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.log{grid-template-columns:1fr}}
.log li{border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
.log li:last-child{border-color:var(--ink)}
.log-k{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--subtle)}
.log-v{font-size:16px;line-height:1.6;color:var(--ink)}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:8px}
.steps li.on{border-color:var(--ink);background:var(--ink);color:#FFFFFF}
.steps li.on .num{color:#A3A3A3}
.step-t{font-size:16px;font-weight:600}
.crit{background:var(--soft);border-radius:var(--radius);padding:clamp(24px,5vw,48px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.crit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.crit{grid-template-columns:1fr}}
.crit div{background:#FFFFFF;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:8px}
.crit strong{font-size:18px;font-weight:600}
.crit span{font-size:14px;line-height:1.6;color:var(--muted)}

:lang(ko) .lead,:lang(ko) .sec-text,:lang(ko) .d-desc,:lang(ko) .exp-desc,:lang(ko) .mod-d,:lang(ko) .method-d,:lang(ko) .log-v,:lang(ko) .contact-text,:lang(ko) .band-head p{line-height:1.75;letter-spacing:-0.01em}