body{margin:0;background:#F4EFE6}
a{color:inherit}a:hover{color:#C8432B}
.nl{font-family:'Inter Tight','Noto Sans KR',system-ui,sans-serif;color:#1A1714;background:#F4EFE6;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;line-height:1.6;font-size:16px}
.nl *{box-sizing:border-box}
.nl a{text-decoration:none}
.nl h1,.nl h2,.nl h3,.nl p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.dark{background:#1A1714;color:#F4EFE6}
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.035em;font-size:21px;line-height:1}
.logo .wm i{font-style:normal;font-weight:500;color:#A59B8F;margin-left:5px}
.logo .di{position:relative;display:inline-block}
.logo .di b{position:absolute;left:50%;top:-.02em;width:.26em;height:.26em;margin-left:-.13em;border-radius:50%;background:#E8B23A}
.logo-mark{display:block;flex:none}
.nav{display:flex;gap:32px;font-size:14px;color:#C4BBAF}
.nav a:hover{color:#FFFFFF}
.right{display:flex;align-items:center;gap:12px}
.lang{display:flex;border:1px solid #36302A;border-radius:999px;padding:3px;font-size:12px;font-weight:600}
.lang a{padding:6px 12px;border-radius:999px;color:#C4BBAF;min-height:30px;display:flex;align-items:center}
.lang a.on{background:#F4EFE6;color:#1A1714}
.menu{display:none;min-height:44px;padding:0 14px;border:1px solid #36302A;border-radius:10px;background:transparent;color:#F4EFE6;font:inherit;font-size:14px}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding:72px 0 96px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#E8B23A}
.eyebrow.ink{color:#C8432B}
.hero h1{font-size:60px;line-height:1.14;letter-spacing:-.03em;font-weight:800;margin-top:20px}
.hero h1 em{font-style:normal;color:#E8B23A}
.lead{font-size:18px;color:#C4BBAF;margin-top:24px;max-width:540px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 24px;border-radius:12px;font-weight:700;font-size:15px}
.btn.lime{background:#E8B23A;color:#1A1714}
.btn.ghost{border:1px solid #433C35;color:#F4EFE6}
.btn.blue{background:#C8432B;color:#FFFFFF}
.visual{position:relative;padding:0 0 40px 40px}
.frame{border-radius:14px;overflow:hidden;background:#FFFFFF;border:1px solid #36302A;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.frame.light{border-color:#E0D8CB;box-shadow:0 12px 32px rgba(13,15,20,.08)}
.bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#EEE8DE;border-bottom:1px solid #E0D8CB}
.bar i{width:9px;height:9px;border-radius:50%;background:#CFC6B8}
.bar span{margin-left:10px;font-size:12px;color:#625B53;font-weight:500}
.shot{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.back{position:absolute;left:0;top:-36px;width:62%;opacity:.55}
.front{position:relative;margin-left:16%}
.float{position:absolute;left:0;bottom:0;background:#E8B23A;color:#1A1714;border-radius:14px;padding:18px 22px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.float b{display:block;font-size:30px;line-height:1.1;letter-spacing:-.02em}
.float span{font-size:13px;font-weight:600}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid #36302A}
.stat{padding:36px 24px 44px 0}
.stat+.stat{padding-left:24px;border-left:1px solid #36302A}
.stat b{display:block;font-size:44px;line-height:1.05;letter-spacing:-.03em;font-weight:800}
.stat b small{font-size:20px;margin-left:2px}
.stat span{display:block;margin-top:10px;font-size:14px;color:#C4BBAF}
.sec{padding:120px 0}
.sec.white{background:#FFFFFF}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end;margin-bottom:56px}
.head h2,.h2{font-size:44px;line-height:1.2;letter-spacing:-.03em;font-weight:800;margin-top:16px}
.desc{font-size:17px;color:#625B53}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start}
.tl{list-style:none;margin:0;padding:0;border-left:2px solid #E0D8CB}
.tl li{position:relative;padding:0 0 32px 32px}
.tl li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:#F4EFE6;border:2px solid #1A1714}
.tl li.hi::before{background:#C8432B;border-color:#C8432B}
.tl .yr{font-size:13px;font-weight:700;color:#C8432B;letter-spacing:.04em}
.tl h3{font-size:20px;line-height:1.35;margin-top:4px;letter-spacing:-.01em}
.tl p{font-size:15px;color:#625B53;margin-top:6px}
.cap{font-size:12px;color:#625B53;margin-top:12px}
.migr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.migr div{background:#FFFFFF;border:1px solid #E0D8CB;border-radius:12px;padding:16px 18px}
.migr b{display:block;font-size:24px;letter-spacing:-.02em}
.migr span{font-size:13px;color:#625B53}
.core{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;background:#1A1714;color:#F4EFE6;border-radius:24px;padding:48px}
.core h3{font-size:40px;line-height:1.15;letter-spacing:-.03em;margin-top:14px}
.core p{color:#C4BBAF;margin-top:16px;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip{font-size:13px;padding:6px 12px;border:1px solid #433C35;border-radius:999px;color:#E6DED2}
.core-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.core-nums div{border:1px solid #36302A;border-radius:16px;padding:22px}
.core-nums b{display:block;font-size:34px;letter-spacing:-.03em;line-height:1.1;color:#E8B23A}
.core-nums span{font-size:14px;color:#C4BBAF}
.runs{grid-column:1/-1;border-top:1px solid #36302A;padding-top:24px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px;color:#C4BBAF}
.runs a{padding:6px 12px;background:#252019;border-radius:8px;color:#F4EFE6;font-weight:600}
.group{display:flex;align-items:baseline;gap:14px;margin:56px 0 18px}
.group b{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#C8432B}
.group span{font-size:15px;color:#625B53}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{background:#FFFFFF;border:1px solid #E0D8CB;border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:20px;line-height:1.3;letter-spacing:-.01em}
.card h3 small{display:block;font-size:13px;font-weight:500;color:#625B53;letter-spacing:0;margin-top:2px}
.card p{font-size:15px;color:#4D463F}
.card .meta{margin-top:auto;padding-top:14px;border-top:1px solid #EDE7DC;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:#625B53}
.badge{align-self:flex-start;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#F8E6E1;color:#A5341F}
.badge.live{background:#FBEFD0;color:#7A5A0E}
.badge.demo{background:#FFF0E0;color:#8A4300}
.media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:center;padding:22px}
.media .txt{display:flex;flex-direction:column;gap:10px}
.thumb{border-radius:12px;overflow:hidden;border:1px solid #E0D8CB;background:#1A1714}
.thumb img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.thumb.phone img{object-position:center top}
.sites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.site{display:flex;flex-direction:column;gap:16px}
.site .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.site h3{font-size:20px;letter-spacing:-.01em}
.site h3 small{font-size:14px;font-weight:500;color:#625B53;margin-left:8px}
.site p{font-size:15px;color:#4D463F;margin-top:-6px}
.lg{font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border:1px solid #CFC6B8;border-radius:6px;color:#4D463F;white-space:nowrap}
.note{margin-top:32px;font-size:13px;color:#625B53}
.method{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px}
.method .desc{color:#C4BBAF;margin-top:20px}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.step{border:1px solid #36302A;border-radius:18px;padding:26px}
.step .n{font-size:13px;font-weight:700;color:#E8B23A;letter-spacing:.1em}
.step h3{font-size:21px;margin-top:10px;letter-spacing:-.01em}
.step p{font-size:15px;color:#C4BBAF;margin-top:8px}
.mnums{display:flex;flex-wrap:wrap;gap:32px;margin-top:40px}
.mnums b{display:block;font-size:32px;letter-spacing:-.03em;line-height:1.1}
.mnums span{font-size:13px;color:#C4BBAF}
.langs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.lc{border-top:2px solid #1A1714;padding-top:18px}
.lc b{font-size:13px;letter-spacing:.08em;color:#C8432B}
.lc h3{font-size:19px;margin-top:6px}
.lc p{font-size:14px;color:#625B53;margin-top:6px}
.contact{background:#C8432B;color:#FFFFFF}
.contact .inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;padding-top:110px;padding-bottom:110px;align-items:center}
.contact h2{font-size:48px;line-height:1.18;letter-spacing:-.03em}
.contact p{font-size:17px;color:#F6D9D2;margin-top:18px}
.svc{list-style:none;margin:0;padding:0;display:grid;gap:0}
.svc li{display:flex;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.28);font-size:17px;font-weight:600}
.svc li span{font-weight:400;color:#F6D9D2;font-size:14px;text-align:right}
.mail{display:inline-flex;margin-top:32px;min-height:56px;align-items:center;padding:0 26px;border-radius:12px;background:#FFFFFF;color:#A5341F;font-weight:800;font-size:16px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:40px;padding-bottom:40px;font-size:13px;color:#9A9084}
@media (max-width:760px){
.wrap{padding:0 16px}
.nav{display:none}
.menu{display:flex;align-items:center}
.top{height:64px}
.hero{grid-template-columns:minmax(0,1fr);gap:40px;padding:40px 0 56px}
.hero h1{font-size:36px}
.lead{font-size:16px}
.visual{padding:0 0 32px 0}
.back{display:none}
.front{margin-left:0}
.float{left:12px;bottom:0;padding:14px 16px}
.float b{font-size:24px}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat,.stat+.stat{padding:24px 12px 24px 0;border-left:0;border-bottom:1px solid #36302A}
.stat:nth-child(even){padding-left:16px;border-left:1px solid #36302A}
.stat:last-child{grid-column:1/-1;border-left:0;padding-left:0}
.stat b{font-size:34px}
.sec{padding:72px 0}
.head,.story,.core,.method,.contact .inner{grid-template-columns:minmax(0,1fr);gap:28px}
.head{margin-bottom:36px}
.head h2,.h2{font-size:30px}
.migr{grid-template-columns:minmax(0,1fr)}
.core{padding:28px 20px;border-radius:20px}
.core h3{font-size:30px}
.grid4,.grid2,.sites,.steps,.langs{grid-template-columns:minmax(0,1fr)}
.media{grid-template-columns:minmax(0,1fr)}
.group{flex-direction:column;gap:4px;margin:40px 0 14px}
.contact .inner{padding-top:72px;padding-bottom:72px}
.contact h2{font-size:32px}
.svc li{flex-direction:column;gap:4px}
.svc li span{text-align:left}
}
.ph{padding:64px 0 88px}
.ph h1{font-size:56px;line-height:1.14;letter-spacing:-.03em;font-weight:800;margin-top:20px;max-width:900px}
.ph h1 em{font-style:normal;color:#E8B23A}
.ph .lead{max-width:760px}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.pill{font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid #433C35;color:#E6DED2}
.pill b{color:#E8B23A;margin-right:6px}
.jump{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #36302A}
.jump a{padding:26px 24px 30px 0;display:block}
.jump a+a{padding-left:24px;border-left:1px solid #36302A}
.jump b{display:block;font-size:12px;letter-spacing:.14em;color:#E8B23A}
.jump span{display:block;font-size:20px;font-weight:800;margin-top:6px;letter-spacing:-.01em}
.jump small{display:block;font-size:13px;color:#C4BBAF;margin-top:4px}
.pname{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.pname small{font-size:18px;font-weight:600;color:#625B53;letter-spacing:0}
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.why div{border-top:2px solid #1A1714;padding-top:18px}
.why b{font-size:12px;letter-spacing:.14em;color:#C8432B}
.why h3{font-size:20px;line-height:1.35;margin-top:8px;letter-spacing:-.01em}
.why p{font-size:15px;color:#625B53;margin-top:8px}
.nums{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:48px}
.nums div{background:#FFFFFF;border:1px solid #E0D8CB;border-radius:14px;padding:18px}
.white .nums div{background:#F4EFE6}
.nums b{display:block;font-size:28px;letter-spacing:-.03em;line-height:1.1}
.nums span{display:block;font-size:13px;color:#625B53;margin-top:6px}
.sub{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#C8432B;margin:64px 0 18px}
.feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.feat div{background:#FFFFFF;border:1px solid #E0D8CB;border-radius:14px;padding:20px}
.white .feat div{background:#F4EFE6;border-color:#E6DED1}
.feat h4{margin:0;font-size:16px;letter-spacing:-.01em}
.feat p{font-size:14px;color:#625B53;margin-top:6px}
.arch{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:start}
.stack{display:flex;flex-direction:column;gap:8px}
.layer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-radius:12px;background:#FFFFFF;border:1px solid #E0D8CB;font-size:15px}
.layer b{font-size:16px}
.layer span{font-size:13px;color:#625B53;text-align:right}
.layer.l1{background:#F8E6E1;border-color:#EDC3B9}
.layer.l2{background:#FBF3DF;border-color:#EED79C}
.layer.base{background:#1A1714;border-color:#1A1714;color:#F4EFE6}
.layer.base span{color:#C4BBAF}
.arrow{text-align:center;font-size:13px;color:#625B53}
.side h3{font-size:22px;letter-spacing:-.01em}
.side p{font-size:15px;color:#625B53;margin-top:10px}
.checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.checks span{font-size:13px;padding:6px 12px;border-radius:8px;background:#1A1714;color:#F4EFE6}
.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;background:#1A1714;color:#F4EFE6;border-radius:24px;padding:40px;margin-top:64px}
.proof h3{font-size:30px;line-height:1.2;letter-spacing:-.02em}
.proof p{color:#C4BBAF;margin-top:12px;font-size:15px}
.proof .migr div{background:#252019;border-color:#36302A}
.proof .migr span{color:#C4BBAF}
.lic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.box{border:1px solid #E0D8CB;border-radius:18px;padding:26px;background:#FFFFFF}
.white .box{background:#F4EFE6;border-color:#E6DED1}
.box h3{font-size:19px;letter-spacing:-.01em}
.box ul{margin:12px 0 0;padding-left:18px;font-size:15px;color:#4D463F}
.box li+li{margin-top:6px}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#625B53;padding:0 12px 12px 0;border-bottom:2px solid #1A1714}
.tbl td{padding:16px 12px 16px 0;border-bottom:1px solid #E0D8CB;vertical-align:top;color:#4D463F}
.tbl td:first-child{font-weight:800;color:#1A1714;white-space:nowrap}
.tbl td.n{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.tbl th.n{text-align:right}
.pipe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:stretch}
.node{position:relative;background:#FFFFFF;border:1px solid #E0D8CB;border-radius:16px;padding:20px;margin-right:28px}
.white .node{background:#F4EFE6}
.node:not(:last-child)::after{content:"→";position:absolute;right:-24px;top:50%;transform:translateY(-50%);font-size:18px;color:#C8432B;font-weight:800}
.node b{font-size:12px;letter-spacing:.12em;color:#C8432B}
.node h4{margin:6px 0 0;font-size:17px}
.node p{font-size:14px;color:#625B53;margin-top:6px}
.node.last{margin-right:0}
.back-loop{margin-top:12px;font-size:13px;color:#625B53;text-align:center;border:1px dashed #CFC6B8;border-radius:10px;padding:10px}
.fam{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
.fam .card h3{font-size:24px}
.fam .card ul{margin:4px 0 0;padding-left:18px;font-size:15px;color:#4D463F}
.fam .card li+li{margin-top:4px}
.road{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.road li{border:1px solid #36302A;border-radius:18px;padding:24px}
.road .n{font-size:12px;font-weight:700;color:#E8B23A;letter-spacing:.12em}
.road h3{font-size:20px;margin-top:8px;letter-spacing:-.01em}
.road p{font-size:14px;color:#C4BBAF;margin-top:8px}
.road .lic-t{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#252019;color:#E8B23A}
.needs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px}
.needs div{border-top:2px solid #E8B23A;padding-top:16px}
.needs h3{font-size:18px}
.needs p{font-size:14px;color:#C4BBAF;margin-top:6px}
@media (max-width:760px){
.ph{padding:40px 0 56px}
.ph h1{font-size:34px}
.jump{grid-template-columns:repeat(2,minmax(0,1fr))}
.jump a,.jump a+a{padding:20px 12px 20px 0;border-left:0;border-bottom:1px solid #36302A}
.jump a:nth-child(even){padding-left:16px;border-left:1px solid #36302A}
.jump span{font-size:17px}
.why,.feat,.arch,.lic,.fam,.road,.needs,.proof{grid-template-columns:minmax(0,1fr)}
.nums{grid-template-columns:repeat(2,minmax(0,1fr))}
.nums b{font-size:24px}
.proof{padding:28px 20px;border-radius:20px}
.proof h3{font-size:24px}
.pipe{grid-template-columns:minmax(0,1fr);gap:28px}
.node{margin-right:0}
.node:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-26px;transform:translateX(-50%)}
.layer{flex-direction:column;align-items:flex-start;gap:4px}
.layer span{text-align:left}
.tbl thead{display:none}
.tbl tr{display:block;border-bottom:1px solid #E0D8CB;padding:14px 0}
.tbl td{display:block;border:0;padding:2px 0}
.tbl td.n{text-align:left}
.tbl td.n::before{content:attr(data-l);color:#625B53;margin-right:8px}
.pname small{font-size:15px}
.sub{margin:44px 0 14px}
}
html[lang="en"] .hero h1{line-height:1.1}
html[lang="en"] .head h2,html[lang="en"] .h2{line-height:1.15}
html[lang="en"] .contact h2{line-height:1.15}
@media (max-width:760px){html[lang="en"] .hero h1{font-size:38px}}
.top{position:relative}
@media (max-width:760px){
.top.open .nav{display:flex;flex-direction:column;gap:0;position:absolute;left:-16px;right:-16px;top:64px;z-index:30;background:#1A1714;padding:0 16px 12px;border-top:1px solid #36302A;font-size:16px;color:#F4EFE6}
.top.open .nav a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid #36302A}
}