:root{--char:#1b2124;--white:#fff;--por:#f3f5f5;--grout:#d3d9db;--muted:#5d686d;--on:#aeb9bd;--teal:#0d7a72;--teal-d:#0a5e58;--mint:#6fd1c6;--soft:#e3f1ef;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--char);font:16px/1.7 "IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;word-break:keep-all}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:"Hahmlet","Apple SD Gothic Neo",serif;line-height:1.3;margin:0;text-wrap:balance}
h2{font-size:clamp(1.4rem,3.2vw,1.9rem);margin-bottom:20px}
a{color:inherit}
section{padding-block:56px}
.alt{background:var(--por)}
.top{position:sticky;top:0;z-index:10;background:var(--white);border-bottom:1px solid var(--grout)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:"Hahmlet",serif;font-size:1.25rem}
.mk{width:28px;height:28px;display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--grout);border-radius:3px;overflow:hidden}
.mk i{background:var(--char)}.mk i:nth-child(4){background:var(--teal)}
.top nav{display:flex;gap:4px;overflow-x:auto}
.top nav a{text-decoration:none;padding:6px 12px;font-weight:600;white-space:nowrap}
.top nav a:hover{color:var(--teal)}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--teal);color:var(--white);text-decoration:none;font-weight:700;padding:11px 18px;border-radius:4px}
.btn:hover{background:var(--teal-d)}
.btn.line{background:transparent;border:1.5px solid rgba(255,255,255,.6)}
.btn.dark{background:var(--char)}
.top .btn{padding:8px 14px;font-size:.95rem}
@media(max-width:760px){.top nav{order:3;width:100%}.top>.wrap>.btn{display:none}}
.hero{background:var(--char);color:var(--white)}
.crumb{font-size:.85rem;color:var(--on);margin:0 0 12px}.crumb a{color:var(--on)}
.hero h1{font-size:clamp(1.8rem,4.6vw,2.8rem)}
.lead{color:var(--on);max-width:42em;margin:16px 0}
.lead strong{color:var(--mint)}
.kw{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:6px}
.kw li{font-size:.85rem;padding:4px 11px;border:1px solid rgba(255,255,255,.25);border-radius:999px}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid3 article{border:1px solid var(--grout);border-top:3px solid var(--teal);border-radius:4px;padding:20px}
.grid3 h3{font-size:1.1rem;margin-bottom:8px}.grid3 p{margin:0;color:var(--muted);font-size:.95rem}
.note{color:var(--muted);font-size:.9rem;margin-top:16px}
@media(max-width:760px){.grid3{grid-template-columns:1fr}}
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cc{display:grid;gap:6px;text-decoration:none;background:var(--white);border:1px solid var(--grout);border-radius:4px;padding:8px 8px 14px}
.cc img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;display:block}
.cc .cl{font-size:.8rem;color:var(--teal);font-weight:700;padding-inline:4px}
.cc b{padding-inline:4px;font-size:.98rem;line-height:1.4}
@media(max-width:760px){.cases{grid-template-columns:1fr}}
.more{margin-top:16px}.more a{color:var(--teal);font-weight:700}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:s}
.steps li{border-top:3px solid var(--teal);padding-top:10px;color:var(--muted);font-size:.92rem;display:grid;gap:2px}
.steps b{color:var(--char);font-size:1.02rem}
@media(max-width:760px){.steps{grid-template-columns:1fr 1fr}}
.faq dt{font-weight:700;margin-top:16px}.faq dd{margin:4px 0 0;color:var(--muted)}
.near{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.near a{display:block;text-decoration:none;padding:6px 12px;border:1px solid var(--grout);border-radius:4px;font-size:.92rem}
.near a:hover{border-color:var(--teal);color:var(--teal)}
.near.big{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.near.big a{display:grid;gap:2px;padding:14px}.near.big span{font-size:.8rem;color:var(--muted)}
.gus{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:36px}
.gus article{border:1px solid var(--grout);border-radius:4px;padding:18px}
.gus h3{font-size:1.1rem;margin-bottom:10px}.gus h3 a{text-decoration:none}.gus h3 a:hover{color:var(--teal)}
.gus ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.gus li a{display:block;font-size:.86rem;padding:3px 10px;background:var(--por);border:1px solid var(--grout);border-radius:3px;text-decoration:none}
.gus li a:hover{color:var(--teal);border-color:var(--teal)}
footer{background:#121719;color:var(--on);padding:32px 0 100px;font-size:.88rem}footer b{color:var(--white)}
.callbar{position:fixed;left:0;right:0;bottom:0;display:none;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--white);border-top:1px solid var(--grout)}
.callbar .btn{flex:1;justify-content:center}
@media(max-width:760px){.callbar{display:flex}}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}