/* Core:D — 허브와 같은 블랙 카탈로그: 먹색 바탕, 골드는 번호·선·강조에만. 내용 폭 고정, 확대 없음 */
:root{
  --bg:#0c0b0a;--panel:#141210;--line:#2a2620;--line-strong:#4a4232;
  --ink:#efe8da;--ink-dim:#a59d8c;--ink-faint:#6d6657;--gold:#c9a96e;--gold-hi:#e6cf9f;
  --display-en:'Cormorant Garamond','Noto Serif KR',Georgia,serif;--display-ko:'Noto Serif KR','Cormorant Garamond',serif;
  --body:'IBM Plex Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --gut:clamp(16px,4vw,40px);color-scheme:dark;
}
@view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15.5px;line-height:1.7;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}figure{margin:0}p{margin:0}h1,h2,h3{margin:0;font-family:var(--display-ko);text-wrap:balance}button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--gold);color:var(--bg);padding:8px 14px}.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wrap{max-width:calc(1080px + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut);min-width:0}.narrow{max-width:calc(780px + var(--gut) * 2)}

/* 상단 */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:28px;height:62px}
.brand{font-family:var(--display-en);font-size:22px;font-weight:600;letter-spacing:.04em;line-height:1}.brand i{font-style:normal;color:var(--gold)}
.nav nav{display:flex;gap:26px;margin-left:auto;font-size:13.5px;letter-spacing:.02em;color:var(--ink-dim)}.nav nav a:hover{color:var(--gold-hi)}
.nav nav a[aria-current=page]{color:var(--gold-hi);box-shadow:0 2px 0 var(--gold)}
.nav-cta{border:1px solid var(--gold);background:var(--gold);color:var(--bg);padding:7px 14px;font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s}.nav-cta:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.burger{display:none;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;position:relative;margin-right:-8px}.burger i{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:transform .2s,top .2s}.burger i:first-child{top:17px}.burger i:last-child{top:26px}
.burger[aria-expanded=true] i:first-child{top:21px;transform:rotate(45deg)}.burger[aria-expanded=true] i:last-child{top:21px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:63px 0 0;z-index:45;background:var(--bg);padding:12px var(--gut) 28px;display:flex;flex-direction:column;overflow:auto}.mnav[hidden]{display:none}
.mnav a{font-family:var(--display-ko);font-size:19px;font-weight:600;padding:15px 0;border-bottom:1px solid var(--line)}.mnav a[aria-current=page]{color:var(--gold-hi)}.mnav .m-cta{margin-top:auto;border:0;background:var(--gold);color:var(--bg);text-align:center;font-family:var(--body);font-size:15px;padding:15px}

/* 버튼 */
.btn{display:inline-block;padding:12px 22px;border:1px solid var(--gold);font-size:13.5px;font-weight:600;letter-spacing:.02em;text-align:center;transition:background .2s,border-color .2s}
.btn.pri,.btn.inv{background:var(--gold);color:var(--bg)}.btn.pri:hover,.btn.inv:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.btn.line{background:transparent;color:var(--gold-hi)}.btn.line:hover{background:rgba(201,169,110,.1)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}

/* 첫 화면 */
.hero{position:relative;overflow-x:clip;background:radial-gradient(ellipse 55% 75% at 78% 30%,rgba(201,169,110,.13),transparent 70%);border-bottom:1px solid var(--line);padding-block:clamp(44px,5.5vw,76px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,56px);align-items:center}
.eyebrow{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.32em;color:var(--gold);text-transform:uppercase}
.wordmark{font-family:var(--display-en);font-weight:500;font-size:clamp(68px,9.5vw,118px);line-height:.95;letter-spacing:-.01em;margin-top:14px}.wordmark em{font-style:italic;font-weight:400;color:var(--gold)}
.hero h1{font-size:clamp(20px,2.3vw,25px);font-weight:600;line-height:1.55;margin-top:20px}
.hero-txt p{margin:12px 0 24px;font-size:14.5px;color:var(--ink-dim)}
.hero.sub h1{font-size:clamp(28px,3.4vw,42px);line-height:1.35;margin-top:14px}
.hero-gl{position:relative;aspect-ratio:1/1;width:100%;max-width:330px;justify-self:center}.hero-gl canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;animation:glin .5s ease both}@keyframes glin{from{opacity:0}to{opacity:1}}
.hero-fb{position:absolute;inset:14%;width:72%}.hero-gl.on .hero-fb{display:none}
.hero-ph{overflow:hidden;border:1px solid var(--line)}.hero-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* 페이지 머리 */
.page-h{border-bottom:1px solid var(--line);background:radial-gradient(ellipse 50% 110% at 82% 0,rgba(201,169,110,.1),transparent 70%);padding-block:clamp(36px,4.5vw,60px)}.page-h h1{font-size:clamp(28px,3.2vw,38px);font-weight:700;line-height:1.3}.page-h p{margin-top:8px;font-size:14.5px;color:var(--ink-dim)}
.sec.top0{padding-top:clamp(32px,4vw,52px)}

/* 구역 */
.sec{padding-block:clamp(44px,5.5vw,72px);border-bottom:1px solid var(--line)}.tint{background:var(--panel)}
.sec-h{margin-bottom:clamp(20px,2.4vw,30px)}.sec-h h2{font-size:clamp(21px,2.1vw,26px);font-weight:700;line-height:1.4}.sec-h p{margin-top:5px;font-size:14px;color:var(--ink-dim)}
.sec-h.row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}.link{font-size:13.5px;font-weight:600;color:var(--gold-hi);white-space:nowrap;border-bottom:1px solid rgba(201,169,110,.5)}.link:hover{color:var(--gold)}

/* 분야 목록 */
.needs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:36px;counter-reset:need}
.need{position:relative;display:flex;flex-direction:column;min-width:0;padding-block:20px 18px;border-top:1px solid var(--line);counter-increment:need}
a.need::before,.need.plain::before{content:counter(need,upper-roman);font-family:var(--display-en);font-style:italic;font-size:30px;line-height:1;color:var(--gold);margin-bottom:8px}
a.need::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--gold);transition:width .35s ease}a.need:hover::after{width:100%}
.need h3{font-size:18px;font-weight:700}.need p{margin-top:5px;font-size:13.5px;line-height:1.6;color:var(--ink-dim);flex:1 0 auto}.need span{padding-top:12px;font-size:13px;font-weight:600;color:var(--gold-hi)}a.need:hover span{color:var(--gold)}
.open-link{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px;margin-top:18px;padding:16px 20px;border:1px solid var(--line-strong);transition:background .2s}.open-link b{font-family:var(--display-ko);font-weight:600;color:var(--gold-hi)}.open-link span{font-size:13.5px;color:var(--ink-dim)}.open-link:hover{background:rgba(201,169,110,.08)}

/* 대표 작업 */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,2.8vw,36px) clamp(16px,2vw,24px)}
.work{min-width:0;display:flex;flex-direction:column}.work-b{all:unset;display:block;width:100%;cursor:zoom-in;overflow:hidden;background:var(--panel)}.work-b:focus-visible{outline:1px solid var(--gold);outline-offset:2px}.work img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}.work-b:hover img{transform:scale(1.03)}
.work h3{margin-top:12px;font-size:16.5px;font-weight:700;line-height:1.45}.work p{flex:1 0 auto;margin-top:4px;font-size:13.5px;line-height:1.6;color:var(--ink-dim)}.work a{align-self:flex-start;margin-top:8px;font-size:13px;font-weight:600;color:var(--gold-hi);border-bottom:1px solid rgba(201,169,110,.5)}.work a:hover{color:var(--gold)}

/* 웹사이트 예시 */
.demos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,32px) clamp(16px,2vw,24px)}
.demo{display:block;min-width:0}.demo figure{border:1px solid var(--line);overflow:hidden}.demo img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .5s ease}.demo:hover img{transform:scale(1.02)}
.demo-c{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-top:10px}.demo h3{font-size:15px;font-weight:700}.demo span{font-size:13px;color:var(--ink-dim)}.demo em{font-style:normal;font-size:13px;font-weight:600;color:var(--gold-hi);white-space:nowrap}.demo:hover em{color:var(--gold)}

/* 서비스 */
.search input{width:100%;font:inherit;font-size:16px;padding:11px 14px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);outline:0;border-radius:0}.search input:focus{border-color:var(--gold)}.search input::placeholder{color:var(--ink-faint)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.chip{font-size:13px;padding:6px 13px;border:1px solid var(--line-strong);background:none;color:var(--ink-dim);cursor:pointer;transition:color .2s,border-color .2s}.chip:hover{border-color:var(--gold);color:var(--gold-hi)}.chip.on{background:var(--gold);border-color:var(--gold);color:var(--bg);font-weight:600}
.svc-count{margin:16px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--ink-dim)}
.group{display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;padding-block:40px;border-bottom:1px solid var(--line)}.group:last-of-type{border-bottom:0}.group[hidden]{display:none}
.ghead{position:sticky;top:86px;align-self:start;display:flex;flex-direction:column;gap:5px}.ghead .num{font-family:var(--display-en);font-style:italic;font-size:42px;line-height:1;color:var(--gold)}.ghead h2{font-size:20px;font-weight:700;margin-top:5px}.ghead .en{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase}.ghead .cnt{font-family:var(--mono);font-size:11px;color:var(--ink-dim);margin-top:4px}
.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;min-width:0}
.svc{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:3px 12px;padding-block:18px 16px;border-top:1px solid var(--line);position:relative;min-width:0;align-content:start}.svc[hidden]{display:none}
.svc::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--gold);transition:width .35s ease}.svc:hover::after{width:100%}
.svc .no{grid-row:1/4;font-family:var(--mono);font-size:11px;color:var(--ink-faint);padding-top:6px}.svc .name{font-family:var(--display-en);font-size:22px;font-weight:500;line-height:1.2;letter-spacing:.01em;min-width:0}.svc .name b{font-weight:600;color:var(--gold-hi)}
.svc .arrow{font-family:var(--display-en);font-size:20px;line-height:1.2;color:var(--ink-faint);transition:transform .25s ease,color .25s}.svc:hover .arrow{transform:translate(3px,-3px);color:var(--gold)}
.svc .cat{grid-column:2/4;font-size:12.5px;font-weight:600}.svc .desc{grid-column:2/4;margin-top:2px;font-size:13px;line-height:1.6;color:var(--ink-dim)}
.empty{padding:24px 0;color:var(--ink-dim)}

/* 진행 */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,30px);counter-reset:s}
.steps li{counter-increment:s;min-width:0;border-top:1px solid var(--line-strong);padding-top:14px}.steps li::before{content:counter(s);display:block;font-family:var(--display-en);font-style:italic;font-size:34px;line-height:1;color:var(--gold)}
.steps h3{font-size:16.5px;font-weight:700;margin:8px 0 5px}.steps p{font-size:13.5px;line-height:1.6;color:var(--ink-dim)}

/* 질문 */
.faq{border-top:1px solid var(--line-strong)}.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;cursor:pointer;list-style:none;padding:15px 2px;font-family:var(--display-ko);font-size:15.5px;font-weight:600}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-family:var(--display-en);font-size:24px;font-weight:400;line-height:1;color:var(--gold);transition:transform .2s}.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 36px 16px 2px;font-size:14px;color:var(--ink-dim)}

/* 마무리 */
.closing{text-align:center;background:radial-gradient(ellipse 50% 90% at 50% 100%,rgba(201,169,110,.1),transparent 70%);padding-block:clamp(52px,6.5vw,84px)}.closing h2{font-size:clamp(22px,2.6vw,30px);font-weight:600;line-height:1.45}.closing p{margin:8px 0 22px;font-size:14px;color:var(--ink-dim)}.mail{margin:16px 0 0!important;font-size:13px}.mail a{border-bottom:1px solid currentColor}

/* 하단 */
.foot{border-top:1px solid var(--line);color:var(--ink-dim);padding-block:38px calc(24px + env(safe-area-inset-bottom,0px));font-size:13px}
.foot-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.3fr);gap:32px}.foot-logo{font-family:var(--display-en);font-size:22px;font-weight:600;letter-spacing:.04em;color:var(--ink)}.foot-logo i{font-style:normal;color:var(--gold)}.foot-in p{margin-top:6px}
.foot h3{font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:8px}.foot-col a{display:block;padding:2px 0}.foot-col a:hover{color:var(--gold-hi)}.foot-col p{margin:0}
.foot-note{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-faint)}

/* 기타 */
.lb{position:fixed;inset:0;z-index:90;background:rgba(8,7,6,.96);display:grid;place-items:center;padding:clamp(16px,4vw,48px)}.lb[hidden]{display:none}
.lb figure{max-width:min(94vw,1200px);display:flex;flex-direction:column;gap:12px;align-items:center}.lb img{max-height:82svh;width:auto;object-fit:contain}.lb figcaption{color:var(--ink-dim);font-size:14px}
.lb-x{position:absolute;right:calc(var(--gut) - 8px);top:calc(10px + env(safe-area-inset-top,0px));background:none;border:0;color:var(--ink);font-size:36px;line-height:1;cursor:pointer;padding:8px}
.notes{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}.notes li{padding:14px 2px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-dim)}
.doc h1,.nf h1{font-size:clamp(26px,3vw,36px);font-weight:700}.doc h2{font-size:17px;font-weight:700;margin:26px 0 6px}.doc p{font-size:14.5px;color:var(--ink-dim)}.draft{font-size:13px;margin-top:8px!important}.nf p{margin:10px 0 24px;color:var(--ink-dim)}

.sec.vat-sec{padding-block:20px}.vat-note{text-align:center;font-size:13px;color:var(--ink-dim)}

/* 작업 */
.pfs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,2.6vw,32px) clamp(14px,1.6vw,20px)}
.pf{display:block;min-width:0}.pf[hidden]{display:none}.pf img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--panel);border:1px solid var(--line);transition:border-color .2s}.pf:hover img{border-color:var(--gold)}
.pf h3{margin-top:10px;font-family:var(--body);font-size:14px;font-weight:600;line-height:1.5}.pf span{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-dim)}
.pf-vs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,30px) clamp(14px,1.6vw,20px)}.pf-v{min-width:0}.pf-v video{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;background:#000;border:1px solid var(--line)}.pf-v figcaption{margin-top:9px;font-size:14px;font-weight:600;line-height:1.5}.pf-v a:hover{color:var(--gold-hi)}.gap-t{margin-top:clamp(26px,3vw,36px)}
.own-h{margin-top:clamp(40px,5vw,60px)}
.pf-note{display:block;font-size:13px;color:var(--gold-hi)}.pf-d h1{margin-top:8px;font-size:clamp(24px,2.8vw,32px);font-weight:700;line-height:1.35}.pf-desc{margin:12px 0 22px;font-size:15px;color:var(--ink-dim)}
.pf-media{display:flex;flex-direction:column;gap:14px;margin-top:32px}.pf-media img{width:100%;border:1px solid var(--line)}.pf-media video{display:block;width:auto;max-width:100%;max-height:min(80svh,720px);margin-inline:auto;background:var(--panel)}

/* 문의 */
.closing-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.contact-in{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}.contact-in>*{min-width:0}
.f{margin-bottom:20px}.f label{display:block;margin-bottom:7px;font-size:14px;font-weight:600}
.f input,.f select,.f textarea{display:block;width:100%;font:inherit;font-size:16px;padding:11px 14px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);outline:0;border-radius:0}.f select{appearance:auto}.f textarea{resize:vertical;min-height:150px}.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--gold)}.f ::placeholder{color:var(--ink-faint)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{border:1px solid var(--line);padding:14px 16px;margin-bottom:20px}.consent p{font-size:13px;line-height:1.75;color:var(--ink-dim)}.consent b{color:var(--ink)}.consent a{border-bottom:1px solid currentColor}
.check{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:8px;font-size:14px;cursor:pointer}.check input{width:20px;height:20px;flex:none;accent-color:var(--gold);margin:0}
.cerr{margin-bottom:14px;font-size:14px;color:#ec9a8a}
.csend{width:100%;padding:14px 22px;font-size:15px;cursor:pointer}.csend:disabled{opacity:.6;cursor:default}
.cdone{border:1px solid var(--line-strong);background:var(--panel);padding:clamp(28px,4vw,44px);outline:0}.cdone[hidden],.cform[hidden]{display:none}.cdone h2{font-size:clamp(21px,2.4vw,26px);font-weight:700}.cdone p{margin:10px 0 22px;font-size:14.5px;color:var(--ink-dim)}
.cside{border-top:1px solid var(--line-strong);padding-top:20px}.cside h2{font-size:19px;font-weight:600}.cside>p{margin:6px 0 16px;font-size:14px;color:var(--ink-dim)}.cside .mail{margin-top:14px!important;color:var(--ink-dim)}.cside h3{margin-top:30px;font-size:15px;font-weight:600}.cside ul{margin:10px 0 0;padding:0;list-style:none;font-size:14px;color:var(--ink-dim)}.cside li{padding:8px 0;border-bottom:1px solid var(--line)}

/* 서비스 상세 */
.svc-hero{padding-block:clamp(20px,2.5vw,32px) clamp(40px,5vw,64px)}.back{display:inline-block;margin-bottom:clamp(18px,2.4vw,30px);font-size:13px;color:var(--ink-dim)}.back:hover{color:var(--gold-hi)}
.svc-hero .hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}.svc-hero h1{font-size:clamp(27px,3.2vw,38px)}.svc-side{min-width:0}.svc-hero .hero-in.solo{grid-template-columns:minmax(0,1fr)}.solo .hero-txt{max-width:760px}
.tags{list-style:none;margin:-8px 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--gold-hi)}.tags li::before{content:"· ";color:var(--gold)}
.hero-vid video,.vid video{display:block;width:100%;background:var(--panel);border:1px solid var(--line)}.hero-vid video{width:auto;max-width:100%;max-height:min(70svh,520px);margin-inline:auto}.vid video{max-height:560px;margin-inline:auto;width:auto;max-width:100%}
.spec{border:1px solid var(--line-strong);background:var(--panel);padding:clamp(18px,2vw,24px)}.spec-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px dashed var(--line-strong);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-dim)}.spec-h b{font-family:var(--display-en);font-size:17px;font-weight:600;letter-spacing:.14em;color:var(--gold);border:1px solid var(--gold);padding:1px 9px}
.spec dl{margin:10px 0 0}.spec dl div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}.spec dt{color:var(--ink-dim);flex:none}.spec dd{margin:0;text-align:right}.spec p{margin-top:12px;font-size:11.5px;color:var(--ink-faint);text-align:center}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,28px) clamp(14px,1.8vw,20px);align-items:start}.shot,.vid{min-width:0}.shot img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s ease}.shot .work-b:hover img{transform:scale(1.03)}.shot figcaption,.vid figcaption{margin-top:8px;font-size:13px;color:var(--ink-dim)}
.audios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}.audios figure{min-width:0}.audios figcaption{font-size:13.5px;margin-bottom:6px}.audios audio{width:100%}
.note{margin-top:14px;font-size:13px;color:var(--ink-dim)}
.prices{border-top:1px solid var(--line-strong)}.price{display:grid;grid-template-columns:minmax(120px,240px) minmax(0,1fr) auto;gap:6px 20px;align-items:baseline;padding:16px 2px;border-bottom:1px solid var(--line)}.price b{font-family:var(--display-en);font-size:19px;font-weight:600;letter-spacing:.03em;color:var(--gold-hi)}.price span{font-size:14px;color:var(--ink-dim)}.price em{font-family:var(--display-ko);font-style:normal;font-weight:700;font-size:17px;white-space:nowrap}
.pt-t{font-size:16.5px;font-weight:700;margin:24px 0 10px}.pt-t:first-child{margin-top:0}
.notes.rich li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:6px 24px}.notes.rich b{font-family:var(--display-ko);font-weight:600;color:var(--ink)}
.cmps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,44px) clamp(18px,2.4vw,28px)}.cmp-item{min-width:0}.cmp-item h3{font-size:17px;font-weight:700;margin:6px 0 4px}.cmp-item p{font-size:13.5px;color:var(--ink-dim);margin-bottom:10px}.cmp-item .cmp{margin-top:10px}
.cmp{position:relative;width:100%;overflow:hidden;background:var(--panel);border:1px solid var(--line);user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.cmp .after{clip-path:inset(0 0 0 var(--x,50%))}.cmp .bar{position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;background:var(--gold-hi)}.cmp .knob{position:absolute;top:50%;left:var(--x,50%);width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--bg);transform:translate(-50%,-50%);display:grid;place-items:center;font-size:16px}.cmp .tag{position:absolute;top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink);background:rgba(12,11,10,.7);padding:3px 8px}.cmp .tl{left:10px}.cmp .tr{right:10px}
.dock{display:none}.menu-open .dock{display:none!important}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}html{scroll-behavior:auto}*{transition:none!important}}
@media (max-width:980px){
  .nav nav{display:none}.nav-cta{margin-left:auto}.burger{display:block}
  .needs{grid-template-columns:repeat(2,minmax(0,1fr))}.works,.demos{grid-template-columns:repeat(2,minmax(0,1fr))}.pfs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot-in>div:first-child{grid-column:1/-1}
  .group{grid-template-columns:minmax(0,1fr);gap:16px;padding-block:32px}.ghead{position:static;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 12px}.ghead h2{margin:0}.list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .nav-in{height:58px}.mnav{inset:59px 0 0}.nav-cta{display:none}.burger{margin-left:auto}
  .hero{padding-block:36px 28px}.hero-in{grid-template-columns:minmax(0,1fr)}.hero-gl{max-width:210px}
  .hero .btn{flex:1 1 0;padding:12px 8px;white-space:nowrap}
  .needs,.demos,.works,.steps,.foot-in,.contact-in,.pf-vs{grid-template-columns:minmax(0,1fr)}.pfs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc .name{font-size:20px}
  .audios{grid-template-columns:minmax(0,1fr)}
  .svc-hero .hero-in,.cmps,.notes.rich li{grid-template-columns:minmax(0,1fr)}.shots{grid-template-columns:repeat(2,minmax(0,1fr))}.price{grid-template-columns:minmax(0,1fr) auto}.price span{grid-column:1/-1;grid-row:2}
  .chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.chip{padding:8px 2px;font-size:12.5px;white-space:nowrap;text-align:center}.chip:first-child{grid-column:span 2}
  /* 가운데는 브라우저의 맨 위로 버튼 자리로 비우고 좌우에 하나씩 */
  .dock{display:flex;gap:60px;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;pointer-events:none}.dock a{flex:1 1 0;min-width:0;pointer-events:auto;text-align:center;font-weight:600;padding:12px 6px;font-size:14px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.5)}.dock .d-kakao{background:var(--gold);color:var(--bg)}.dock .d-more{background:var(--panel);color:var(--gold-hi);border:1px solid var(--line-strong)}
}
@media (max-width:360px){
  .chips{grid-template-columns:repeat(3,minmax(0,1fr))}.chip:first-child{grid-column:auto}
}