@font-face{font-family:Pretendard;src:url('/fonts/pretendard-400-1.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Pretendard;src:url('/fonts/pretendard-600-1.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Pretendard;src:url('/fonts/pretendard-800-1.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --forest-1000:#07100b;
  --forest-950:#0c1710;
  --forest-900:#132218;
  --forest-850:#1b2c20;
  --line:#2c3b2f;
  --line-strong:#465a49;
  --text-100:#f0f3eb;
  --text-300:#b7c1b7;
  --text-400:#96a396;
  --accent:#f36b3d;
  --accent-hover:#ff815b;
  --accent-dark:#d9532b;
  --danger:#ff815b;
  --container:1240px;
  --section:112px;
  --radius-surface:12px;
  --radius-control:8px;
  color-scheme:dark;
  font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  color:var(--text-100);
  background:var(--forest-1000);
}

*{box-sizing:border-box}
html{min-width:320px;background:var(--forest-1000);scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--forest-1000);color:var(--text-100);font-size:16px;line-height:1.65;text-rendering:optimizeLegibility;word-break:keep-all}
body.menu-open{overflow:hidden}
::selection{background:var(--accent);color:var(--forest-1000)}
a{color:inherit}
button,input,textarea,select{font:inherit}
button,a,summary{-webkit-tap-highlight-color:transparent}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
h1,h2,h3,p{overflow-wrap:break-word}
h1,h2,h3{margin-top:0;color:var(--text-100)}

.skip{position:fixed;top:-96px;left:16px;z-index:100;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--forest-900);color:var(--text-100);text-decoration:none}
.skip:focus{top:12px}
.container{width:min(var(--container),calc(100% - 72px));margin-inline:auto}
.narrow{width:min(780px,calc(100% - 40px));margin-inline:auto}

.site-header{position:sticky;top:0;z-index:50;height:68px;border-bottom:1px solid var(--line);background:rgb(7 16 11 / .92);backdrop-filter:blur(18px)}
.header-inner{height:100%;display:flex;align-items:center;gap:24px}
.wordmark{display:inline-flex;align-items:center;gap:10px;color:var(--text-100);font-size:18px;font-weight:800;letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
.wordmark img{width:31px;height:31px;padding:5px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--forest-950)}
.desktop-nav{display:flex;align-items:center;gap:2px;margin-left:24px}
.desktop-nav a{min-height:40px;display:flex;align-items:center;padding:8px 11px;border-radius:var(--radius-control);color:var(--text-400);font-size:13px;font-weight:600;text-decoration:none}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]{background:var(--forest-900);color:var(--text-100)}
.desktop-nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--accent)}
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.header-link{min-height:40px;display:inline-flex;align-items:center;padding:8px 12px;color:var(--text-300);font-size:13px;font-weight:600;text-decoration:none}
.header-link:hover{color:var(--text-100)}

.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--forest-900);color:var(--text-100);font-weight:700;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform var(--dur-surface) var(--ease),background-color var(--dur-tint) var(--ease),border-color var(--dur-tint) var(--ease),color var(--dur-tint) var(--ease)}
.button:hover{border-color:var(--text-400);background:var(--forest-850)}
.button:active{transform:translateY(1px)}
.button.primary{border-color:var(--accent);background:var(--accent);color:var(--forest-1000)}
.button.primary:hover{border-color:var(--accent-hover);background:var(--accent-hover)}
.button.secondary,.button.inverse{border-color:var(--line-strong);background:transparent;color:var(--text-100)}
.button.secondary:hover,.button.inverse:hover{border-color:var(--accent);background:var(--forest-900);color:var(--accent-hover)}
.button:focus-visible,.desktop-nav a:focus-visible,.wordmark:focus-visible,.menu-button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.menu-button{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--forest-950);color:var(--text-100);cursor:pointer}
.mobile-drawer{position:fixed;inset:68px 0 auto;z-index:45;padding:16px 20px 24px;border-bottom:1px solid var(--line);background:var(--forest-950);box-shadow:0 26px 70px rgb(0 0 0 / .35)}
.mobile-drawer nav{display:grid;gap:4px}
.mobile-drawer a{min-height:48px;display:flex;align-items:center;padding:8px 10px;border-radius:var(--radius-control);text-decoration:none;font-weight:600}
.mobile-drawer a:hover,.mobile-drawer a[aria-current=page]{background:var(--forest-900)}
.mobile-drawer .drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}

.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--forest-1000)}
.hero-grid{min-height:calc(100dvh - 68px);display:grid;grid-template-columns:minmax(0,.78fr) minmax(520px,1.22fr);gap:70px;align-items:center;padding-block:clamp(64px,8vh,96px)}
.kicker,.eyebrow{margin:0 0 16px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.03em}
.hero h1{max-width:610px;margin:0;font-size:clamp(58px,6.4vw,92px);line-height:.98;letter-spacing:-.065em}
.hero .lead{max-width:560px;margin:28px 0 0;color:var(--text-300);font-size:19px;line-height:1.72}
.hero-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}

.proof-flow{position:relative;min-height:548px;overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--radius-surface);background:var(--forest-950);box-shadow:0 38px 100px rgb(0 0 0 / .28);perspective:1300px;isolation:isolate}
.proof-title{position:absolute;top:23px;left:25px;z-index:5;margin:0;color:var(--text-400);font-size:12px;font-weight:700}
.proof-title::after{margin-left:12px;color:var(--accent);content:"입력  >  운영"}
.flow-list{position:absolute;inset:88px 42px 34px 54px;transform:rotateX(53deg) rotateZ(-25deg) translate3d(-10px,6px,0);transform-style:preserve-3d;transform-origin:48% 38%}
.flow-node{--x:0px;--y:0px;--z:0px;position:absolute;top:0;left:0;width:82%;min-height:146px;display:grid;grid-template-columns:42px minmax(0,1fr);gap:16px;padding:20px;border:1px solid var(--line-strong);border-radius:var(--radius-surface);background:var(--forest-900);box-shadow:0 24px 56px rgb(0 0 0 / .34),inset 0 1px 0 rgb(240 243 235 / .06);transform:translate3d(var(--x),var(--y),var(--z));backface-visibility:hidden;transition:transform var(--dur-surface) var(--ease),border-color var(--dur-tint) var(--ease),background-color var(--dur-tint) var(--ease)}
.flow-node:nth-child(1){--x:0px;--y:0px;--z:0px;background:var(--forest-950)}
.flow-node:nth-child(2){--x:42px;--y:74px;--z:42px}
.flow-node:nth-child(3){--x:84px;--y:148px;--z:84px;background:var(--forest-850)}
.flow-node:nth-child(4){--x:126px;--y:222px;--z:126px;border-color:var(--accent);background:var(--forest-900)}
.flow-node:hover{border-color:var(--accent-hover);transform:translate3d(var(--x),var(--y),calc(var(--z) + 18px))}
.flow-node .num{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--forest-1000);color:var(--accent);font-size:12px;font-weight:800}
.flow-node strong{display:block;color:var(--text-100);font-size:16px}
.flow-node small{display:block;margin-top:5px;color:var(--text-300);font-size:13px;line-height:1.55}

.domain-strip{border-bottom:1px solid var(--line);background:var(--forest-950)}
.domain-row{min-height:84px;display:grid;grid-template-columns:160px repeat(4,1fr);align-items:center;gap:0}
.domain-row>strong{color:var(--text-400);font-size:12px}
.domain-row span{min-height:32px;display:flex;align-items:center;padding:0 22px;border-left:1px solid var(--line);color:var(--text-300);font-size:13px}

.section{padding-block:var(--section);border-bottom:1px solid var(--line);background:var(--forest-1000)}
.section.subtle,.section.dark,.product-section{background:var(--forest-950)}
.section.dark-continuation{padding-top:0}
.section-head{max-width:760px;margin-bottom:52px}
.section-head.center{margin-inline:auto;text-align:center}
.section h2,.page-hero h1{margin:0;font-size:clamp(38px,4.6vw,60px);line-height:1.12;letter-spacing:-.05em}
.section-head p,.page-hero p{max-width:650px;margin:18px 0 0;color:var(--text-300);font-size:17px;line-height:1.72}

.outcome-list{border-top:1px solid var(--line)}
.outcome{display:grid;grid-template-columns:72px minmax(220px,.7fr) minmax(0,1.3fr);gap:30px;padding:34px 0;border-bottom:1px solid var(--line)}
.outcome .num{color:var(--accent);font-size:12px;font-weight:800}
.outcome h3{margin:0;font-size:var(--type-item);letter-spacing:-.025em}
.outcome p{margin:0;color:var(--text-300)}

.service-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.service-card{min-height:370px;display:flex;flex-direction:column;padding:31px;border:1px solid var(--line);border-radius:var(--radius-surface);background:var(--forest-1000)}
.service-card:nth-child(1){grid-column:span 5;background:var(--forest-900)}
.service-card:nth-child(2){grid-column:span 4}
.service-card:nth-child(3){grid-column:span 3;background:var(--forest-850)}
.service-card .label{color:var(--accent);font-size:12px;font-weight:800}
.service-card h3{margin:22px 0 11px;font-size:24px;letter-spacing:-.03em}
.service-card p,.service-card ul{color:var(--text-300)}
.service-card p{margin:0}
.service-card ul,.product-card ul{margin:23px 0 0;padding:18px 0 0;border-top:1px solid var(--line);list-style:none;font-size:14px}
.service-card li+li,.product-card li+li{margin-top:7px}
.service-card li::before,.product-card li::before{margin-right:9px;color:var(--accent);content:"+"}
.service-card a{margin-top:auto;padding-top:26px;color:var(--accent-hover);font-weight:700;text-decoration:none}

.product-showcase{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:14px}
.product-card{min-height:470px;display:flex;flex-direction:column;padding:38px;border:1px solid var(--line);border-radius:var(--radius-surface);background:var(--forest-1000)}
.product-card.featured{border-color:var(--line-strong);background:var(--forest-900);box-shadow:inset 0 3px 0 var(--accent)}
.product-state{align-self:flex-start;color:var(--accent);font-size:12px;font-weight:800}
.product-card h2,.product-card h3{margin:22px 0 7px;font-size:34px;line-height:1.2;letter-spacing:-.04em}
.product-card .product-tagline{margin:0 0 18px;color:var(--text-100);font-size:18px;font-weight:600}
.product-card>p:not(.product-tagline),.product-card ul{color:var(--text-300)}
.product-card>p:not(.product-tagline){margin:0}
.product-card .button{align-self:flex-start;margin-top:auto}

.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--radius-surface)}
.process-step{min-height:320px;padding:29px;border-right:1px solid var(--line);background:var(--forest-950)}
.process-step:nth-child(even){background:var(--forest-900)}
.process-step:last-child{border-right:0}
.process-step .step-no{color:var(--accent);font-size:12px;font-weight:800}
.process-step h3{margin:44px 0 11px;font-size:24px}
.process-step p{margin:0;color:var(--text-300);font-size:15px}
.completion{margin-top:30px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--forest-1000);color:var(--text-300);font-size:13px}
.completion strong{color:var(--accent)}

.case-feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--radius-surface);background:var(--forest-950)}
.case-copy{padding:46px}
.case-copy .case-label,.case-card span,.case-fact span{color:var(--accent);font-size:12px;font-weight:800}
.case-copy h3{max-width:670px;margin:18px 0 16px;font-size:34px;line-height:1.32;letter-spacing:-.04em}
.case-copy>p,.case-card p{color:var(--text-300)}
.case-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.case-fact{padding:25px;background:var(--forest-900)}
.case-fact strong{display:block;margin-top:7px;color:var(--text-100);font-size:14px;line-height:1.6}
.case-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
.case-card{padding:29px;border:1px solid var(--line);border-radius:var(--radius-surface);background:var(--forest-950)}
.case-card:first-child{grid-column:span 2;background:var(--forest-900)}
.case-card h3{margin:17px 0 11px;font-size:var(--type-item);line-height:1.4}
.case-card p{margin:0}
.case-card .case-state{margin-top:23px;padding-top:18px;border-top:1px solid var(--line);color:var(--text-400);font-size:13px}

.trust-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.trust-item{min-height:210px;padding:27px;border:1px solid var(--line);border-radius:var(--radius-surface);background:var(--forest-1000)}
.trust-item:nth-child(1),.trust-item:nth-child(4){grid-column:span 7;background:var(--forest-900)}
.trust-item:nth-child(2),.trust-item:nth-child(3){grid-column:span 5}
.trust-item h3{margin:0 0 9px;font-size:var(--type-card)}
.trust-item p{margin:0;color:var(--text-300);font-size:14px}

.faq-list{max-width:920px;margin-inline:auto;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--text-100);font-weight:700;list-style:none;cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{color:var(--accent);font-size:22px;content:"+"}
.faq-list details[open] summary::after{content:"-"}
.faq-list details p{max-width:760px;margin:0;padding:0 0 28px;color:var(--text-300)}

.cta-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;padding:48px;border:1px solid var(--line-strong);border-radius:var(--radius-surface);background:var(--forest-900);box-shadow:inset 5px 0 0 var(--accent)}
.cta-panel h2{margin:0;font-size:36px;letter-spacing:-.04em}
.cta-panel p{margin:10px 0 0;color:var(--text-300)}
.cta-panel .button{border-color:var(--accent);background:var(--accent);color:var(--forest-1000)}

.page-hero{padding:clamp(76px,9vw,112px) 0 88px;border-bottom:1px solid var(--line);background:var(--forest-1000)}
.page-hero .container{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.52fr);gap:86px;align-items:center}
.page-note{padding:25px;border:1px solid var(--line-strong);border-radius:var(--radius-surface);background:var(--forest-900);color:var(--text-300);font-size:14px;box-shadow:15px 15px 0 var(--forest-950),16px 16px 0 var(--line)}
.page-note strong{display:block;margin-bottom:7px;color:var(--text-100)}

.service-band{display:grid;grid-template-columns:160px minmax(0,1fr) minmax(270px,.56fr);gap:42px;padding:48px 0;border-top:1px solid var(--line)}
.service-band:last-child{border-bottom:1px solid var(--line)}
.service-band .band-label,.process-detail .step,.case-study .case-meta,.principle span,.product-step span,.feature-item span{color:var(--accent);font-size:12px;font-weight:800}
.service-band h2,.process-detail h2,.case-study h2{font-size:31px;letter-spacing:-.035em}
.service-band p,.deliverables ul,.case-sections p,.principle p,.company-facts td,.product-step p,.feature-item p{color:var(--text-300)}
.deliverables,.process-columns div,.case-sections div,.principle,.product-step,.feature-item{padding:23px;border:1px solid var(--line);border-radius:var(--radius-surface);background:var(--forest-950)}
.deliverables strong{display:block;margin-bottom:9px}
.deliverables ul{margin:0;padding-left:20px}
.deliverables a{display:inline-block;margin-top:14px;color:var(--accent-hover);font-weight:700;text-decoration:none}
.process-detail{display:grid;grid-template-columns:100px minmax(200px,.55fr) minmax(0,1fr);gap:34px;padding:44px 0;border-top:1px solid var(--line)}
.process-columns{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.process-columns span,.case-sections span,.company-facts th{display:block;color:var(--text-400);font-size:12px}
.process-columns strong{display:block;margin-top:7px;line-height:1.6}
.case-study{display:grid;grid-template-columns:minmax(220px,.42fr) minmax(0,1fr);gap:56px;padding:66px 0;border-top:1px solid var(--line)}
.case-sections{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.case-sections p{margin:7px 0 0}
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.principle:nth-child(1),.principle:nth-child(4){background:var(--forest-900)}
.principle h3{margin:12px 0 7px;font-size:var(--type-card)}
.principle p{margin:0}
.company-facts{width:100%;border-collapse:collapse}
.company-facts th,.company-facts td{padding:17px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.company-facts th{width:180px}
.product-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.product-step:nth-child(2){background:var(--forest-900)}
.product-step h3{margin:22px 0 8px}
.product-step p{margin:0}
.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.feature-item:nth-child(1),.feature-item:nth-child(4){background:var(--forest-900)}
.feature-item h3{margin:11px 0 7px;font-size:21px}
.feature-item p{margin:0}
.callout{padding:28px;border:1px solid var(--line-strong);border-left:5px solid var(--accent);border-radius:var(--radius-surface);background:var(--forest-900)}
.callout h2,.callout h3{margin-top:0}
.callout p:last-child{margin-bottom:0}
.callout-spaced{margin-top:16px}

.contact-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:70px;align-items:start}
.contact-aside h2{font-size:34px}
.contact-aside ul{margin:28px 0;padding:0;list-style:none}
.contact-aside li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--text-300)}
.contact-card{padding:37px;border:1px solid var(--line-strong);border-radius:var(--radius-surface);background:var(--forest-950)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.field.full{grid-column:1/-1}
.field{margin-bottom:18px}
.field label{display:block;margin:0 0 7px;font-size:13px;font-weight:700}
.field .optional{color:var(--text-400);font-weight:400}
.field input,.field textarea,.field select{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--forest-1000);color:var(--text-100)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-400)}
.field textarea{min-height:150px;resize:vertical}
.field-error{min-height:19px;margin:5px 0 0;color:var(--accent-hover);font-size:12px}
.form-summary{margin-bottom:16px;padding:13px;border:1px solid var(--accent-dark);border-left:4px solid var(--accent);border-radius:var(--radius-control);background:var(--forest-900);color:var(--accent-hover)}
.form-consent{margin:0 0 18px;color:var(--text-400);font-size:13px}
.form-status{min-height:24px;margin:14px 0 0;color:var(--text-300)}
.form-status.success{padding:13px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--forest-900);color:var(--text-100)}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

.legal{padding:76px 0 112px}
.legal h1{font-size:44px;letter-spacing:-.045em}
.legal h2{margin-top:54px;font-size:var(--type-item)}
.legal h3{margin-top:29px}
.legal p,.legal li{color:var(--text-300)}
.legal table{width:100%;border-collapse:collapse}
.legal th,.legal td{padding:13px;border:1px solid var(--line);text-align:left;vertical-align:top}
.legal th{background:var(--forest-900)}

.site-footer{padding:68px 0 30px;background:var(--forest-1000)}
.footer-grid{display:grid;grid-template-columns:minmax(260px,1.4fr) repeat(3,minmax(140px,.5fr));gap:44px}
.footer-brand p{max-width:430px;color:var(--text-400)}
.footer-col strong{display:block;margin-bottom:13px;color:var(--text-100);font-size:13px}
.footer-col a{display:block;margin:8px 0;color:var(--text-400);font-size:14px;text-decoration:none}
.footer-col a:hover{color:var(--accent-hover)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);color:var(--text-400);font-size:12px}
.footer-bottom a{color:var(--text-400)}
.mobile-conversion{display:none}

@media(hover:hover){
  .service-card,.product-card,.case-card,.trust-item,.principle,.feature-item{transition:transform var(--dur-surface) var(--ease),border-color var(--dur-tint) var(--ease)}
  .service-card:hover,.product-card:hover,.case-card:hover,.trust-item:hover,.principle:hover,.feature-item:hover{border-color:var(--line-strong);transform:translateY(-3px)}
}

@media(max-width:1050px){
  .desktop-nav{display:none}
  .menu-button{display:grid;place-items:center}
  .header-link{display:none}
  .hero-grid{min-height:auto;grid-template-columns:1fr;gap:64px;padding-block:86px}
  .proof-flow{min-height:560px}
  .domain-row{grid-template-columns:160px repeat(2,1fr);padding-block:18px}
  .domain-row span{min-height:42px}
  .service-grid{grid-template-columns:1fr}
  .service-card:nth-child(n){grid-column:auto;min-height:0}
  .product-showcase{grid-template-columns:1fr}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .process-step:nth-child(2){border-right:0}
  .process-step:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .case-row{grid-template-columns:1fr 1fr}
  .case-card:first-child{grid-column:1/-1}
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-item:nth-child(n){grid-column:auto}
  .page-hero .container{grid-template-columns:1fr;gap:52px}
  .service-band{grid-template-columns:130px minmax(0,1fr)}
  .deliverables{grid-column:2}
  .footer-grid{grid-template-columns:minmax(200px,1.3fr) repeat(3,minmax(120px,.5fr));gap:28px}
}

@media(max-width:767px){
  :root{--section:76px}
  .container{width:min(100% - 40px,var(--container))}
  .site-header{height:64px}
  .mobile-drawer{inset:64px 0 auto}
  .header-inner{gap:12px}
  .header-actions .button{min-height:40px;padding-inline:12px;font-size:13px}
  .wordmark{font-size:16px}
  .hero-grid{gap:46px;padding-block:64px}
  .hero h1{font-size:48px;line-height:1.02}
  .hero .lead{font-size:17px}
  .hero-actions{display:grid}
  .hero-actions .button.secondary{display:inline-flex}
  .hero-actions .button{width:100%}
  .proof-flow{min-height:0;padding:21px}
  .proof-title{position:static;margin-bottom:18px}
  .flow-list{position:static;display:grid;gap:10px;transform:none}
  .flow-node,.flow-node:nth-child(n){position:relative;width:100%;min-height:0;transform:none;background:var(--forest-900)}
  .flow-node:hover{transform:none}
  .domain-row{grid-template-columns:1fr;gap:0;padding:22px 0}
  .domain-row>strong{margin-bottom:9px}
  .domain-row span{min-height:0;padding:7px 0;border:0}
  .section-head{margin-bottom:38px}
  .section h2,.page-hero h1{font-size:36px}
  .section-head p,.page-hero p{font-size:16px}
  .outcome{grid-template-columns:42px 1fr;gap:15px 18px}
  .outcome p{grid-column:2}
  .service-card,.product-card{min-height:0;padding:27px}
  .product-showcase,.case-feature,.case-row,.trust-grid{grid-template-columns:1fr}
  .case-card:first-child{grid-column:auto}
  .process-grid{grid-template-columns:1fr}
  .process-step{min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .process-step:last-child{border-bottom:0}
  .process-step h3{margin-top:22px}
  .case-copy{padding:29px}
  .case-copy h3{font-size:28px}
  .case-facts{grid-template-columns:1fr}
  .cta-panel{grid-template-columns:1fr;padding:31px;box-shadow:inset 0 5px 0 var(--accent)}
  .cta-panel h2{font-size:var(--type-sub)}
  .page-hero{padding:72px 0 62px}
  .page-note{padding:20px;box-shadow:9px 9px 0 var(--forest-950),10px 10px 0 var(--line)}
  .service-band{grid-template-columns:1fr;gap:10px;padding:36px 0}
  .deliverables{grid-column:1;margin-top:12px}
  .service-band h2{font-size:27px}
  .process-detail{grid-template-columns:1fr;gap:10px}
  .process-columns{grid-template-columns:1fr}
  .case-study{grid-template-columns:1fr;gap:24px;padding:50px 0}
  .case-sections,.principles,.product-flow,.feature-list{grid-template-columns:1fr}
  .company-facts,.company-facts tbody,.company-facts tr,.company-facts th,.company-facts td{display:block}
  .company-facts th{width:auto;padding-bottom:3px;border-bottom:0}
  .company-facts td{padding-top:0}
  .contact-layout{grid-template-columns:1fr;gap:34px}
  .contact-card{padding:25px}
  .field-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .legal{padding:56px 0 92px}
  .legal h1{font-size:34px}
  .legal table,.legal tbody,.legal tr,.legal th,.legal td{display:block}
  .legal th{border-bottom:0}
  .legal td{border-top:0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{display:grid}
  .footer-col a{min-height:44px;display:flex;align-items:center;margin:0}
  .footer-bottom a,.company-facts a,.contact-aside a,.form-consent a,.legal a:not(.wordmark),.page-note a{min-height:44px;display:inline-flex;align-items:center}
  .mobile-conversion{position:fixed;inset:auto 0 0;z-index:40;display:flex;align-items:center;gap:10px;padding:8px 14px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgb(7 16 11 / .94);backdrop-filter:blur(14px)}
  .mobile-conversion span{min-width:0;flex:1;color:var(--text-300);font-size:12px}
  .mobile-conversion .button{min-height:42px;flex:none;padding-inline:14px;font-size:13px}
  .site-footer{padding-bottom:100px}
}

/* Linear-led composition pass — Railway depth is reserved for the workflow scene. */
:root{
  --container:1280px;
  --section:128px;
  --radius-surface:8px;
  --radius-control:6px;
}

.container{width:min(var(--container),calc(100% - 96px))}
.site-header{height:72px;background:rgb(7 16 11 / .88);border-color:rgb(44 59 47 / .72)}
.header-inner{gap:18px}
.wordmark{gap:9px;font-size:17px;font-weight:600;letter-spacing:-.025em}
.wordmark img{width:25px;height:25px;padding:0;border:0;border-radius:0;background:transparent}
.desktop-nav{margin-left:auto;gap:8px}
.desktop-nav a{padding-inline:9px;border-radius:5px;color:var(--text-400);font-weight:400}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]{background:transparent;color:var(--text-100)}
.desktop-nav a[aria-current=page]{box-shadow:inset 0 -1px 0 var(--accent)}
.header-actions{margin-left:18px}
.header-link{font-weight:400}
.site-header .button{min-height:40px;padding-inline:16px;font-size:13px}

.button{border-radius:6px;font-weight:600;box-shadow:none}
.button.primary{border-color:var(--text-100);background:var(--text-100);color:var(--forest-1000)}
.button.primary:hover{border-color:var(--text-100);background:var(--text-100);color:var(--forest-1000);filter:brightness(1.06)}
.button.secondary:hover,.button.inverse:hover{border-color:var(--line-strong);background:var(--forest-950);color:var(--text-100)}

.kicker,.eyebrow{position:relative;padding-left:0;color:var(--text-400);font-weight:600;letter-spacing:0}

.hero{overflow:visible;border-bottom:0}
.hero>.container{padding-top:196px}
.hero-copy{max-width:980px}
.hero h1{max-width:960px;margin:0;font-size:clamp(56px,4.7vw,68px);font-weight:400;line-height:1.06;letter-spacing:-.052em}
.hero .lead{max-width:760px;margin-top:28px;color:var(--text-400);font-size:16px;line-height:1.6}
.hero-actions{margin-top:30px}
.hero-actions .button{min-width:120px}

.operations-window{margin:70px -20px 0;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--forest-950);box-shadow:0 28px 90px rgb(0 0 0 / .25),inset 0 1px 0 rgb(240 243 235 / .025)}
.operations-bar{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);color:var(--text-400);font-size:12px}
.operations-brand{display:flex;align-items:center;gap:8px}
.operations-brand img{width:18px;height:18px}
.operations-brand strong{color:var(--text-100);font-weight:600}
.operations-brand span:nth-of-type(1){color:var(--text-400)}
.operations-state{display:flex;align-items:center;gap:7px}
.operations-state>span{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgb(243 107 61 / .1)}
.operations-layout{min-height:570px;display:grid;grid-template-columns:220px minmax(0,1fr)}
.workflow-steps{padding:24px 12px;border-right:1px solid var(--line);background:var(--forest-1000)}
.workflow-steps>p{margin:0 12px 16px;color:var(--text-400);font-size:11px;font-weight:600}
.workflow-steps>div{position:relative;display:grid;grid-template-columns:28px 1fr;gap:0 8px;padding:12px;border-radius:6px;color:var(--text-400)}
.workflow-steps>div+div{margin-top:2px}
.workflow-steps>div>span{grid-row:1/3;padding-top:1px;font-size:10px;font-variant-numeric:tabular-nums}
.workflow-steps strong{color:var(--text-300);font-size:13px;font-weight:600;line-height:1.3}
.workflow-steps small{margin-top:3px;color:var(--text-400);font-size:11px}
.workflow-steps>div.active{background:rgb(240 243 235 / .055);color:var(--accent)}
.workflow-steps>div.active::before{position:absolute;inset:9px auto 9px 0;width:2px;border-radius:1px;background:var(--accent);content:""}
.workflow-steps>div.active strong{color:var(--text-100)}
.workflow-workspace{min-width:0;padding:34px 38px 28px}
.workspace-head{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.workspace-head p,.workspace-label{margin:0 0 7px;color:var(--text-400);font-size:11px;font-weight:600}
.workspace-head h2{margin:0;font-size:24px;font-weight:600;letter-spacing:-.035em}
.workspace-badge{display:inline-flex;align-items:center;min-height:28px;padding:4px 9px;border:1px solid var(--line);border-radius:5px;color:var(--text-300);font-size:11px;white-space:nowrap}
.workspace-grid{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(380px,1.15fr);gap:28px;padding:30px 0 28px}
.evidence-panel,.delivery-panel{min-width:0}
.evidence-panel dl{margin:0;border-top:1px solid var(--line)}
.evidence-panel dl>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;padding:17px 0;border-bottom:1px solid var(--line)}
.evidence-panel dt{color:var(--text-400);font-size:12px}
.evidence-panel dd{margin:0;color:var(--text-300);font-size:13px}
.delivery-panel{overflow:hidden;padding:20px 20px 14px;border:1px solid var(--line);border-radius:7px;background:var(--forest-950);perspective:900px;perspective-origin:58% 42%}
.delivery-panel .workspace-label{margin-bottom:10px}
.delivery-panel .flow-list{position:relative;inset:auto;min-height:274px;transform:rotateX(8deg) rotateY(-12deg) translate3d(10px,6px,0);transform-origin:52% 43%;transform-style:preserve-3d;transition:transform var(--dur-depth) var(--ease)}
.delivery-panel .flow-node{position:absolute;left:7%;width:86%;min-height:96px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:13px;padding:17px 18px;border:1px solid var(--line-strong);border-radius:7px;background:var(--forest-900);box-shadow:0 20px 44px rgb(0 0 0 / .34);backface-visibility:hidden;transition:transform var(--dur-surface) var(--ease),border-color var(--dur-tint) var(--ease)}
.delivery-panel .flow-node:nth-child(1){top:8px;transform:translate3d(-24px,-3px,-48px);background:var(--forest-950)}
.delivery-panel .flow-node:nth-child(2){top:82px;transform:translate3d(0,0,0);background:var(--forest-950)}
.delivery-panel .flow-node:nth-child(3){top:156px;transform:translate3d(24px,3px,48px);border-color:var(--accent);background:var(--forest-850)}
.delivery-panel .flow-node>span{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:5px;color:var(--text-400);font-size:10px}
.delivery-panel .flow-node:nth-child(3)>span{color:var(--accent)}
.delivery-panel .flow-node strong{font-weight:600}
.delivery-panel .flow-node small{margin-top:3px;color:var(--text-400);font-size:11px}
.workflow-status{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:18px;border-top:1px solid var(--line)}
.workflow-status>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;font-size:12px}
.workflow-status>div span{color:var(--text-400)}
.workflow-status>div strong{color:var(--text-300);font-weight:600}
.workflow-status>a{color:var(--text-300);font-size:12px;text-decoration:none;white-space:nowrap}
.workflow-status>a:hover{color:var(--text-100)}

.domain-strip{margin-top:72px;background:transparent}
.domain-row{min-height:78px}
.domain-row span{color:var(--text-400)}

.section,.section.subtle,.section.dark,.product-section{background:var(--forest-1000)}
.section-head{max-width:920px;margin-bottom:62px}
.section h2,.page-hero h1{font-size:clamp(40px,4.6vw,64px);font-weight:600;line-height:1.1;letter-spacing:-.052em}
.page-hero h1{font-weight:400}
.section-head p,.page-hero p{color:var(--text-400);font-size:16px}

.outcome{grid-template-columns:110px minmax(240px,.72fr) minmax(0,1.28fr);padding:40px 0}
.outcome .num,.service-card .label,.product-state,.process-step .step-no,.case-copy .case-label,.case-card span,.case-fact span,.service-band .band-label,.process-detail .step,.case-study .case-meta,.principle span,.product-step span,.feature-item span{color:var(--text-400);font-weight:600}
.outcome h3{font-size:24px;font-weight:600}

.service-grid{display:block;border-top:1px solid var(--line)}
.service-card,.service-card:nth-child(n){min-height:0;display:grid;grid-template-columns:140px minmax(260px,.8fr) minmax(320px,1.2fr);grid-template-rows:auto auto 1fr;gap:8px 34px;padding:38px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.service-card .label{grid-column:1;grid-row:1/4;padding-top:5px}
.service-card h3{grid-column:2;grid-row:1;margin:0;font-size:24px;font-weight:600}
.service-card p{grid-column:2;grid-row:2/4}
.service-card ul{grid-column:3;grid-row:1/3;margin:0;padding:0;border:0}
.service-card a{grid-column:3;grid-row:3;align-self:end;padding-top:18px;color:var(--text-300);font-size:13px}
.service-card a:hover{color:var(--text-100)}
.service-card li::before,.product-card li::before{color:var(--text-400);content:"-"}

.product-showcase{display:block;border-top:1px solid var(--line)}
.product-card,.product-card.featured{min-height:0;display:grid;grid-template-columns:150px minmax(280px,.85fr) minmax(320px,1.15fr);grid-template-rows:auto auto 1fr;gap:10px 34px;padding:44px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.product-card .product-state{grid-column:1;grid-row:1/4;padding-top:6px}
.product-card h2,.product-card h3{grid-column:2;grid-row:1;margin:0;font-size:30px;font-weight:600}
.product-card .product-tagline{grid-column:2;grid-row:2/4;margin:0;color:var(--text-300);font-size:16px;font-weight:400}
.product-card>p:not(.product-tagline){grid-column:3;grid-row:1;margin:0}
.product-card ul{grid-column:3;grid-row:2;margin:6px 0 0;padding:14px 0 0}
.product-card .button{grid-column:3;grid-row:3;justify-self:start;margin-top:18px}

.process-grid{overflow:visible;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0}
.process-step,.process-step:nth-child(even){min-height:290px;padding:32px 28px;background:transparent}
.process-step:first-child{padding-left:0}
.process-step:last-child{padding-right:0}
.process-step h3{font-weight:600}
.completion{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.completion strong{color:var(--text-300)}

.case-feature{border-right:0;border-left:0;border-radius:0;background:transparent}
.case-copy{padding-left:0}
.case-copy h3{font-weight:600}
.case-facts{background:var(--line)}
.case-fact{background:var(--forest-950)}
.case-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:0;border-bottom:1px solid var(--line)}
.case-card,.case-card:first-child{grid-column:auto;padding:34px 28px;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent}
.case-card:first-child{padding-left:0}
.case-card:last-child{padding-right:0;border-right:0}
.case-card h3{font-weight:600}

.trust-grid{grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.trust-item,.trust-item:nth-child(n){grid-column:auto;min-height:190px;padding:32px 32px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.trust-item:nth-child(odd){padding-left:0}
.trust-item:nth-child(even){padding-right:0;border-right:0}
.trust-item h3{font-weight:600}

.faq-list{max-width:960px}
.faq-list summary{min-height:82px;font-weight:600}
.faq-list summary::after{color:var(--text-400);font-weight:400}
.cta-panel{padding:50px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.cta-panel h2{font-weight:600}
.cta-panel .button{border-color:var(--text-100);background:var(--text-100);color:var(--forest-1000)}

.page-hero{padding:148px 0 104px}
.page-hero .container{display:block}
.page-hero .container>div:first-child{max-width:930px}
.page-note{max-width:760px;margin-top:52px;padding:20px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.page-note strong{margin-bottom:5px;font-weight:600}

.deliverables,.process-columns div,.case-sections div,.principle,.product-step,.feature-item{border-color:var(--line);border-radius:6px;background:transparent}
.principles{gap:0;border-top:1px solid var(--line)}
.principle,.principle:nth-child(n){min-height:190px;padding:30px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.principle:nth-child(odd){padding-left:0}
.principle:nth-child(even){padding-right:0;border-right:0}
.principle h3{font-weight:600}
.service-band{padding:54px 0}
.deliverables{padding:0 0 0 28px;border:0;border-left:1px solid var(--line);border-radius:0}
.process-detail{padding:54px 0}
.process-columns{gap:0;border:1px solid var(--line);border-radius:6px}
.process-columns div{border:0;border-right:1px solid var(--line);border-radius:0}
.process-columns div:last-child{border-right:0}
.case-sections{gap:0;border:1px solid var(--line);border-radius:6px}
.case-sections div{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0}
.callout{border-radius:6px;border-left-width:2px;background:transparent}
.page-note,.deliverables,.principle,.process-columns div,.case-sections div,.product-step,.feature-item{color:var(--text-300)}

.site-footer{border-top:0}
.footer-col strong{font-weight:600}

/* ─────────────────────────────────────────────────────────────────────────────
   사주 팔레트 복원 · 위계 · 모양 통일 (2026-08-26)

   🔴 왜 필요했나 — 위 "Linear-led composition pass" 가 Linear 의 무채색 절제를
   그대로 옮기면서 **대표가 고른 사주 accent 를 크림(--text-100)으로 덮었다**(:384 ·:509)
   그리고 라벨 13종을 회색으로 내렸다(:457). 그 결과 홈 전체에서 accent 를 쓰는 요소가
   5개까지 줄어 화면에서 브랜드 색이 사라졌다(브라우저 실측).
   🔑 Linear 가 무채색인 것은 Linear 의 브랜드가 무채색이기 때문이다. 우리 것은 아니다.

   색 정본 = office/_도구/zzos_v1/static/app.css :root (발주 O-20260825-011).
   여기서는 값을 새로 만들지 않고 그 토큰만 되살린다.

   🔴 accent 를 쓰는 자리를 정한다 — 되돌아가면 다시 잡음이 된다:
     1) 주 행동(주 버튼·CTA)  2) 현재 위치 표시(내비 밑줄·활성 행)
     3) 완료 조건 표시(끝 조건)  4) 열고 닫는 표시(FAQ)  5) 포커스 링
   분류 라벨(업종·단계 이름 같은 것)은 회색으로 둔다 — 그건 Linear 패스가 맞았다.
   ───────────────────────────────────────────────────────────────────────────── */
/* 🔴 채움 버튼은 크림 그대로 둔다 — 게이트 판정: 주홍으로 채우면 화면에서 가장 큰 주홍
   덩어리가 생겨 나머지 주홍이 죽고 흔한 「스타트업 주황 버튼」이 된다. 정본 §주홍을 쓰는 자리 참조.
   대신 주홍을 **층으로** 올린다 — 라벨 기둥 · 현재 위치 · 닫는 규칙선 · 최전면 카드 · 저채도 면. */

/* 층 2 — 라벨 기둥. override 가 한 줄로 회색화한 12종을 되돌린다 */
.outcome .num,.service-card .label,.product-state,.process-step .step-no,.case-copy .case-label,
.case-card>span,.case-fact span,.service-band .band-label,.process-detail .step,.case-study .case-meta,
.principle span,.product-step span,.feature-item span,.kicker,.eyebrow{color:var(--accent);font-weight:600;letter-spacing:.012em}
.kicker,.eyebrow{position:relative;padding-left:0}
.completion strong{color:var(--accent)}
.faq-list summary::after{color:var(--accent)}

/* 층 1 — 현재 위치. 🔴 종전 `box-shadow:inset 0 -1px 0` 이 radius 5px 요소에 걸려 밑줄이
   양 끝에서 휘어 **주황 「미소」 곡선 + 흐린 상자**로 그려졌다(게이트가 캡처 확대로 발견).
   브랜드 색이 사이트에서 가장 자주 나오는 모습이 그리기 오류였다. 직선 막대로 교체한다. */
.desktop-nav a[aria-current=page]{position:relative;box-shadow:none}
.desktop-nav a[aria-current=page]::after{position:absolute;inset:auto 9px 7px;height:2px;background:var(--accent);content:""}

/* 층 3 — 닫는 CTA 구획의 상단 규칙선 1px */
.cta-panel{border-top-color:var(--accent)}

/* 첫 화면 배경은 v3 히어로 블록에서 한 번만 정의한다. */
.hero{position:relative}
.hero>.container{position:relative;z-index:1}

/* 층 1 보강 — 「지금 돌아가는 것」 표시가 실선 몇 픽셀로 끝나 첫 화면에서 색이 등록되지 않았다.
   자리는 그대로 두고 굵기만 올린다(정본 허용 자리 1·4 안). */
.operations-state{color:var(--accent)}          /* 「운영 기준 확인」 = 지금 돌아가는 상태 그 자체 */
.operations-state>span{width:8px;height:8px}
.workflow-steps>div.active::before{inset:7px auto 7px 0;width:3px}
.delivery-panel .flow-node:nth-child(3){border-width:2px}
.kicker{font-size:13px}                          /* 주홍 글자 상한 13px — 정본 §면적 표 */

/* 부차 링크는 회색 유지, 반응만 주홍 */
.service-card a:hover,.deliverables a:hover,.workflow-status>a:hover,.product-card a:hover{color:var(--accent-hover)}
.button.secondary:hover,.button.inverse:hover{border-color:var(--accent)}

/* 위계 — 페이지에서 가장 큰 글자가 가장 얇았다(h1 400 < h2 600). 참조 실측: Linear 510 · Railway 500.
   🔑 홈만 600 으로 올린다 — 속장 h1 은 400 을 유지해 **홈이 가장 큰 소리**가 되게 한다(게이트 P2). */
.hero h1{font-weight:600;letter-spacing:-.035em}
.section h2,.page-hero h1{letter-spacing:-.038em}   /* -.052em 은 한글에 과하다 */

/* 68px → 16px 절벽에 중간 단계가 없었다. 보조문을 올리고 색을 한 단 밝힌다 */
.hero .lead{max-width:640px;color:var(--text-300);font-size:19px;line-height:1.62}
/* 🔴 `.page-hero p` 가 `.kicker` 를 특이도로 이겨서 속장 라벨이 회색 17px 로 돌아가 있었다
   (실측: /services·/contact 의 kicker 가 rgb(183,193,183) 17px). 라벨은 빼고 건다. */
.section-head p:not(.kicker):not(.eyebrow),.page-hero p:not(.kicker):not(.eyebrow){color:var(--text-300);font-size:17px}
.page-hero .kicker,.section-head .eyebrow,.hero .kicker{color:var(--accent);font-size:13px}

/* 모바일 첫 화면에 주 행동이 없었다 — 약한 쪽만 남아 있었다 */
@media(max-width:767px){
  .hero-actions .button.primary{display:inline-flex}
  .hero-actions .button.secondary{display:none}
}

/* 깊이 장면 — 정본 §깊이 판정 D1~D4 를 맞춘다.
   🔴 종전 값은 앞/뒤 배율 1.113 · 인접 면 명도비 1.25:1 · 검정 그림자 3장이라
   「깊이」가 아니라 「삐뚤어짐」으로 읽혔다(게이트 실측). 그림자를 빼고 밝은 윗선으로 세운다. */
:root{
  --forest-800:#2b4032;          /* 깊이 장면 최전면 카드 전용 — 정본에 예외로 등재됨 */
  /* 🔴 상호작용 한 벌 — 종전에는 160·180·190·240ms 네 값에 ease 와 cubic-bezier 가 섞여 있었다.
     같은 손짓이 자리마다 다른 속도로 반응하면 「대충 만든 티」가 난다(AI티 방지 §5 여백의 리듬과 같은 계열).
     층으로 가른다: 색만 바뀌는 것 / 면이 움직이는 것 / 층이 움직이는 것. */
  /* 🔴 타이포 사다리 — 종전에 font-size 가 **30가지 값**으로 흩어져 있었다(9~48px).
     라틴보다 한글은 크기 차가 덜 읽혀서, 층을 적게 두고 층 간 간격을 벌린다.
     display 세 단은 clamp() 로 따로 있다(h1 64 / 닫는 CTA 48 / 구획 40 / 항목 31). */
  --type-micro:12px;   /* 라벨·상태 */
  --type-small:13px;   /* 목록·표 안 */
  --type-body:16px;    /* 본문 */
  --type-lead:17px;    /* 구획 머리 보조문 */
  --type-hero:19px;    /* 히어로 보조문 */
  --type-card:21px;    /* 카드 제목 작은 단 */
  --type-item:24px;    /* 카드 제목 */
  --type-sub:30px;     /* 제품·사례 제목 */
  /* 간격 리듬 — 큰 것과 작은 것을 의도적으로 대비시킨다(AI티 방지 §5) */
  --space-1:8px; --space-2:12px; --space-3:18px; --space-4:24px;
  --space-5:34px; --space-6:52px; --space-7:76px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur-tint:140ms;              /* 글자·테두리 색 */
  --dur-surface:200ms;           /* 버튼·카드가 뜨고 눌리는 것 */
  --dur-depth:320ms;             /* 깊이 장면의 층 */
}
.delivery-panel{perspective:560px;perspective-origin:64% 38%}
/* 🔴 frontend-architect 실측 — 원근이 뒤 카드를 소실점 쪽으로 끌어내려 패널 윗변과 카드1 사이에
   **69px 죽은 띠**가 생겼고, 접힘 위에 그 띠와 카드 한 장만 걸려 「깊이 장면」이 아니라
   납작한 카드로 읽혔다. z·회전·색을 안 건드리는 **순수 Y 이동**으로 올린다(D1~D4 가 구조적으로 보존된다). */
.delivery-panel .flow-list{min-height:270px;transform:rotateX(13deg) rotateY(-17deg) translate3d(6px,-44px,0)}
.delivery-panel .flow-node small{font-size:15px}
/* 🔴 정본 실효 11px 하한(재는 법 = rect.width ÷ offsetWidth). 카드1 배율 0.7716 이라
   14px 은 10.80px 으로 미달이다. 🔴 이 줄을 다섯 줄 뒤의 14px 선언이 덮고 있었고,
   감사 둘이 3엔진으로 같은 값을 냈다(음성 대조군: 그 줄만 지우면 15px → 11.57 통과). */
/* 🔴 원근이 뒤 카드를 0.784배로 줄여 11px 보조문이 **실효 8.6px** 로 그려지고 있었다
   (게이트가 캡처에서 밝은 행을 세어 잡았다 — 획이 1px 미만). 정본 「실효 11px 하한」에 맞춘다. */
.delivery-panel .flow-node{min-height:112px}
.delivery-panel .flow-node strong{font-size:16px}
.delivery-panel .flow-node>span{font-size:12px}
.delivery-panel .flow-node{box-shadow:inset 0 1px 0 rgb(240 243 235 / .10)}
.delivery-panel .flow-node:nth-child(1){top:0;transform:translate3d(-30px,-6px,-104px);background:var(--forest-1000)}
.delivery-panel .flow-node:nth-child(2){top:86px;transform:translate3d(0,0,-16px);background:var(--forest-850)}
.delivery-panel .flow-node:nth-child(3){top:174px;transform:translate3d(12px,6px,72px);border-color:var(--accent);background:var(--forest-800);box-shadow:inset 0 1px 0 rgb(240 243 235 / .14)}
/* 최전면 카드는 면이 밝아져 글자 대비가 내려간다 — 실측 3.71 · 4.24 로 미달이 나서 한 단 올린다 */
.delivery-panel .flow-node:nth-child(3)>span{color:var(--text-100)}
.delivery-panel .flow-node:nth-child(3) small{color:var(--text-300)}

/* 첫 화면 밀도 — 상단 여백 196px 가 제품 장면을 접힘 아래로 밀어냈다.
   Linear 실측: h1 상단 272px + 제품 화면이 첫 화면의 60~70% 를 차지한다. */
.hero>.container{padding-top:76px}
.operations-window{margin-top:32px}

/* (정본 밖 리터럴 #09120d·#08100b 는 선언 자리에서 직접 토큰으로 바꿨다 — 여기서 덮지 않는다.
   덮어 고치면 「쓰이자마자 덮이는 선언」이 하나 더 늘어난다 · 감사 지적 반영) */

/* 🔴 위계 사다리 — 속장의 h2 가 **전부 h1 과 같은 64px** 이었다(브라우저 실측:
   services 6개 · process 6개 · cases 5개가 모두 64px). `.section h2` 한 줄이
   항목 제목(`.service-band h2` 31px 등)까지 덮어써서 크기로는 층이 하나도 없었다.
   Linear 실측은 h1 64 → 섹션 제목 32~40 이다. 세 층으로 가른다. */
.section-head h2{font-size:clamp(32px,3vw,40px)}
.service-band h2,.process-detail h2,.case-study h2{font-size:clamp(26px,2.2vw,31px);line-height:1.22}
.cta-panel h2{font-size:clamp(30px,3.6vw,48px)}   /* 닫는 문장은 크게 두되 페이지 제목보다는 작게 */

/* 속장 첫 화면 — 여섯 쪽이 전부 제목 한 덩어리만 놓고 오른쪽 절반과 아래를 비워 뒀다.
   실측: h1 상단 280px · 첫 화면에 든 것이 제목·한 줄·작은 메모뿐. 위 여백을 줄이고
   비어 있던 오른쪽 칸에 그 메모를 올려 홈과 다른 리듬을 준다. */
.page-hero{padding:104px 0 76px}
@media(min-width:1051px){
  .page-hero .container{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.46fr);gap:64px;align-items:end}
  .page-hero .container>div:first-child{max-width:840px}
  .page-hero .page-note{margin-top:0}
}

/* 🔴 같은 리듬이 세 번 연달아 왔다 — 홈의 「문제 · 서비스 · 제품」 세 구획이
   전부 「왼쪽 라벨 + 가운데 제목 + 오른쪽 목록」 3열 행 나열이었다(실측: 세 구획의
   grid-template-columns 가 110/140/150px + 2열로 같은 골격).
   제품은 회사가 파는 물건이라 나열이 아니라 **둘을 나란히 세운다**. 카드 상자를 두르지 않고
   세로 괘선 하나로만 가른다(AI티 방지 §6 — 둥근 카드+그림자 남발 금지). */
@media(min-width:1051px){
  .product-showcase{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:0;border-top:1px solid var(--line)}
  .product-card,.product-card.featured{display:flex;flex-direction:column;padding:42px 44px 46px 0;border-bottom:0}
  .product-card+.product-card{padding-right:0;padding-left:44px;border-left:1px solid var(--line)}
  .product-card .product-state,.product-card h2,.product-card h3,.product-card .product-tagline,
  .product-card>p:not(.product-tagline),.product-card ul,.product-card .button{grid-column:auto;grid-row:auto}
  .product-card .product-state{margin:0 0 14px;padding-top:0}
  .product-card h2,.product-card h3{margin:0 0 10px;font-size:30px}
  .product-card .product-tagline{margin:0 0 14px}
  .product-card ul{margin-top:20px}
  .product-card .button{margin-top:auto;align-self:flex-start}
}

/* 🔴 블로커 — 전환 페이지에서 폼이 첫 화면에 0px 였다.
   1440×900 에서 `.contact-card` 첫 픽셀이 **y880**, 히어로 마지막 글자와 폼 사이에 230px 검정.
   문의하러 들어온 사람이 구르기 전에는 폼을 못 봤다(게이트 실측).
   히어로 오른쪽 열로 폼을 올린다 — 비어 있던 우측 55% 도 같이 메워진다. */
.page-hero.contact-hero{padding:88px 0 76px}
.contact-intro>.page-note{margin-top:34px}
.contact-intro>.contact-aside{margin-top:34px}
.contact-intro .contact-aside h2{font-size:clamp(20px,1.6vw,22px);font-weight:600}
.contact-intro .contact-aside ul{margin:16px 0 0;padding:0;list-style:none}
.contact-intro .contact-aside li{padding:11px 0;border-bottom:1px solid var(--line);color:var(--text-300);font-size:14px}
.contact-intro .contact-aside>p{margin:16px 0 0;color:var(--text-400);font-size:13px}
@media(min-width:1051px){
  .page-hero.contact-hero .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(480px,552px);gap:64px;align-items:start}
  .page-hero.contact-hero .container>.contact-intro{max-width:600px}
}
@media(max-width:1050px){
  .page-hero.contact-hero .contact-card{margin-top:40px}
}

/* 🔴 고아 괘선 — `/services`·`/cases` 의 y639 에 1280px 짜리 줄이 있는데 위 129px·아래 51px 이
   완전 공백이었다. 아무것도 아무것과 안 가르고 그냥 떠 있는 줄로 보인다(게이트가 캡처에서 발견).
   원인은 구획 첫 자식의 `border-top` 위에 128px 구획 여백이 오는 것. 첫 자식만 뗀다. */
.section>.container>.service-band:first-child,
.section>.container>.process-detail:first-child,
.section>.container>.case-study:first-child,
.section>.container>.outcome-list:first-child,
.section>.container>.product-showcase:first-child,
.section>.container>.service-grid:first-child{border-top:0}

/* 모양 통일 — 5·6·7·9px 이 섞여 있었다. 토큰 두 개(surface 8 · control 6)로 모은다 */
.desktop-nav a,.workspace-badge,.delivery-panel .flow-node>span,.process-columns,
.case-sections,.callout,.process-columns div,.case-sections div,.deliverables{border-radius:var(--radius-control)}
.operations-window,.delivery-panel,.delivery-panel .flow-node{border-radius:var(--radius-surface)}

@media(hover:hover){
  .service-card,.product-card,.case-card,.trust-item,.principle,.feature-item{transition:none}
  .service-card:hover,.product-card:hover,.case-card:hover,.trust-item:hover,.principle:hover,.feature-item:hover{border-color:var(--line);transform:none}
  .delivery-panel .flow-node:hover{border-color:var(--accent)}
  .delivery-panel:hover .flow-list{transform:rotateX(7deg) rotateY(-10deg) translate3d(10px,4px,0)}
}

@media(max-width:1050px){
  .container{width:min(var(--container),calc(100% - 64px))}
  .hero>.container{padding-top:132px}
  .operations-layout{grid-template-columns:180px minmax(0,1fr)}
  .workflow-workspace{padding-inline:28px}
  .workspace-grid{grid-template-columns:1fr}
  .delivery-panel .flow-list{min-height:250px}
  .service-card,.service-card:nth-child(n){grid-template-columns:120px minmax(220px,.8fr) minmax(260px,1.2fr);column-gap:24px}
  .product-card,.product-card.featured{grid-template-columns:120px minmax(220px,.8fr) minmax(260px,1.2fr);column-gap:24px}
}

/* 🔴 768~840px 에서 페이지가 가로로 5px 구른다 — 원인(frontend-architect 실측):
   ≤1050 규칙이 푸터 열 바닥을 `120px` 로 **명시**해 grid 의 min-content 바닥을 덮어쓰는데,
   `contact@zzaimse.com` 이 **끊기지 않는 157px 토큰**이라 열을 33~37px 넘고
   그것이 컨테이너를 타고 올라가 뷰포트를 넘긴다. 그 구간부터 2열로 접는다.
   🔴 **자리가 중요하다** — 처음에 이 블록을 파일 끝(≤430 블록 뒤)에 뒀더니 폭이 겹치는
   ≤430 푸터 규칙 두 줄이 **오류 없이 통째로 죽어** 320~430px 푸터가 2열이 됐다(감사 발견).
   미디어 블록은 **폭 내림차순**으로 둔다: 1050 → 880 → 767 → 430. */
@media(max-width:880px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}

@media(max-width:767px){
  :root{--section:82px}
  .container{width:min(100% - 40px,var(--container))}
  .site-header{height:64px}
  .hero>.container{padding-top:82px}
  .hero h1{font-size:44px;line-height:1.06}
  .hero .lead{font-size:16px}
  /* 🔴 여기 있던 `.hero-actions .button.primary{display:none}` 을 지웠다.
     아래쪽 블록에서 그 반대를 걸었더니 **둘 다 사라져** 모바일 첫 화면에 행동이 0개가 됐다
     (390×844 캡처로 확인). 규칙 두 개를 같이 두지 않고 여기서 없앤다. */
  .operations-window{margin:52px 0 0;border-right:0;border-left:0;border-radius:0}
  .hero>.container{width:100%}
  .hero-copy{width:calc(100% - 40px);margin-inline:auto}
  .operations-bar{padding-inline:20px}
  .operations-state{display:none}
  .operations-layout{display:block;min-height:0}
  .workflow-steps{display:grid;grid-template-columns:repeat(4,1fr);padding:12px 10px;border-right:0;border-bottom:1px solid var(--line)}
  .workflow-steps>p{display:none}
  .workflow-steps>div{display:block;padding:10px 5px;text-align:center}
  .workflow-steps>div+div{margin-top:0}
  .workflow-steps>div>span{display:block;padding:0;font-size:9px}
  .workflow-steps strong{display:block;margin-top:2px;font-size:11px}
  .workflow-steps small{display:none}
  .workflow-steps>div.active::before{inset:auto 9px 0;height:2px;width:auto}
  .workflow-workspace{padding:25px 20px 20px}
  .workspace-head h2{font-size:21px}
  .workspace-badge{display:none}
  .workspace-grid{gap:24px;padding-block:24px}
  .evidence-panel dl>div{grid-template-columns:84px minmax(0,1fr);gap:12px}
  .delivery-panel{padding:16px}
  .delivery-panel .flow-list{position:static;display:grid;min-height:0;gap:8px;transform:none}
  .delivery-panel .flow-node,.delivery-panel .flow-node:nth-child(n){position:relative;top:auto;left:auto;width:100%;min-height:0;transform:none;padding:14px;background:var(--forest-900)}
  .workflow-status{display:block}
  .workflow-status>div{display:block}
  .workflow-status>div strong{display:block;margin-top:4px}
  .workflow-status>a{display:inline-block;margin-top:14px}
  .domain-strip{margin-top:0}
  .domain-row{padding-block:24px}
  .section-head{margin-bottom:42px}
  .section h2,.page-hero h1{font-size:38px}
  .outcome{grid-template-columns:56px 1fr;gap:13px 14px;padding:30px 0}
  .service-card,.service-card:nth-child(n),.product-card,.product-card.featured{display:block;padding:32px 0}
  .service-card .label,.product-card .product-state{display:block;margin-bottom:12px;padding:0}
  .service-card h3,.product-card h2,.product-card h3{margin-bottom:9px}
  .service-card ul,.product-card ul{margin-top:18px;padding-top:16px}
  .service-card a{display:inline-block;margin-top:18px;padding:0}
  .product-card .button{display:inline-flex;margin-top:22px}
  .process-grid{grid-template-columns:1fr}
  .process-step,.process-step:nth-child(n){min-height:0;padding:29px 0;border-right:0}
  .case-row,.trust-grid,.principles{grid-template-columns:1fr}
  .case-card,.case-card:first-child,.case-card:last-child,.trust-item,.trust-item:nth-child(n),.principle,.principle:nth-child(n){padding:28px 0;border-right:0}
  .page-hero{padding:92px 0 72px}
  .page-note{margin-top:40px}
  .deliverables{margin-top:20px;padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}
  .workflow-status>a,.service-card a,.deliverables a{min-height:44px;display:inline-flex;align-items:center}
  .process-columns,.case-sections{grid-template-columns:1fr}
  .process-columns div,.process-columns div:last-child,.case-sections div{border-right:0}
  .cta-panel{padding:38px 0}
}

@media(max-width:430px){
  .container{width:min(100% - 32px,var(--container))}
  .header-actions .button{display:none}
  .mobile-drawer .drawer-actions{grid-template-columns:1fr}
  .hero h1{font-size:44px}
  .proof-flow{padding:16px}
  .flow-node{grid-template-columns:36px 1fr;padding:16px}
  .flow-node .num{width:34px;height:34px}
  .footer-grid{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
}

/* 🔴 강제 색상(고대비) 모드에서 깊이 장면이 무너진다 — OS 가 면·테두리를 같은 색으로 덮고
   `box-shadow` 를 버려서 **똑같은 사각형 셋이 겹친 것**이 되고 뒤 카드 글자가 앞 카드에 가린다.
   WCAG 위반은 아니지만 삽화가 적극적으로 잘못 알려주는 유일한 모드라, 이미 있는 모바일 선형화를 재사용한다. */
@media(forced-colors:active){
  .delivery-panel .flow-list{transform:none}
  .delivery-panel .flow-node,.delivery-panel .flow-node:nth-child(n){position:relative;top:auto;left:auto;width:100%;transform:none;margin-bottom:8px}
}

/* ─────────────────────────────────────────────────────────────────────────────
   움직임 (2026-08-26 · 대표 기준 「자연스러운 움직임」)

   🔴 두 갈래로 나눠 짠다 — 엔진 지원이 갈리기 때문이다(직접 재서 확인):
     · 스크롤 연동(`animation-timeline: view()`) — Chromium 🟢 · WebKit 🟢 · **Firefox 🔴 미지원**
     · IntersectionObserver — 3엔진 전부 🟢
   그래서 **깊이 장면의 층 정착**만 스크롤 연동으로 하고(없으면 그냥 정지 상태 = 지금과 같다),
   **구획 진입**은 JS 로 해서 세 엔진 모두에서 보이게 한다.

   🔴 지키는 것 — 커서를 따라다니지 않는다(정본) · 무한 반복 없다 · `transform`·`opacity` 만
   건드린다 · 축소 모션에서 전부 죽는다 · **JS 가 없어도 내용은 처음부터 보인다.**
   ───────────────────────────────────────────────────────────────────────────── */

/* 구획 진입 — 기본은 「보이는 상태」다. JS 가 접힘 아래 요소에만 시작 상태를 씌운다. */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity var(--dur-depth) var(--ease),transform var(--dur-depth) var(--ease);transition-delay:var(--reveal-delay,0ms)}
[data-reveal].is-in{opacity:1;transform:none}

/* 깊이 장면 — 층이 제자리로 들어온다.
   🔴 처음엔 CSS 스크롤 연동(`animation-timeline: view()`)으로 짰는데 **실제로는 안 돌았다** —
   `view()` 는 **가장 가까운 스크롤 컨테이너** 기준인데 `.operations-window{overflow:hidden}` 이
   그 자리를 먹어, 안쪽 요소의 진행도가 영원히 0 이다. 네 스크롤 지점에서 변환값이 한 글자도
   안 달라지는 것으로 잡았다(선언은 걸려 있고 화면만 정지 — 「통과인데 물건은 아닌」 자리다).
   → 진입 한 번만 정착하는 방식으로 바꿨다. **세 엔진 전부에서 돈다**(Firefox 는 스크롤 연동 미지원). */
[data-settle] .flow-list{transform:rotateX(19deg) rotateY(-21deg) translate3d(6px,-72px,0)}
[data-settle].is-in .flow-list{transform:rotateX(13deg) rotateY(-17deg) translate3d(6px,-44px,0)}

@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].is-in{opacity:1;transform:none;transition:none}
  [data-settle] .flow-list,[data-settle].is-in .flow-list{transition:none}
}
@media print{
  [data-reveal],[data-reveal].is-in{opacity:1!important;transform:none!important}
}

/* ─────────────────────────────────────────────────────────────────────────────
   v3 — 2026-08-28 Claude Design `site-zzaimse-dark` 적용
   정본: ../_design/brand-system-v3.md
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  --forest-1000:#08090a;
  --forest-950:#0d1011;
  --forest-900:#141819;
  --forest-850:#1d2323;
  --forest-800:#252d2c;
  --line:rgb(244 245 246 / .08);
  --line-strong:rgb(244 245 246 / .15);
  --text-100:#f4f5f6;
  --text-300:#aeb6b3;
  --text-400:#89928f;
  --accent:#c0607a;
  --accent-readable:#c97189;
  --accent-hover:#dc8da2;
  --accent-dark:#a34f63;
  --teal:#39bd93;
  --teal-hover:#9be8d2;
  --status:#e8c468;
  --container:1120px;
  --section:104px;
  --radius-surface:16px;
  --radius-control:9px;
}

html,body{background:#08090a}
body{color:var(--text-100);line-height:1.7}
::selection{background:var(--teal);color:#08090a}
.container{width:min(var(--container),calc(100% - 48px))}
.narrow{width:min(780px,calc(100% - 48px))}

.site-header{height:66px;border-color:var(--line);background:rgb(8 9 10 / .76);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.header-inner{gap:20px}
.wordmark{gap:10px;color:var(--text-100);font-size:18px;font-weight:800;letter-spacing:-.035em}
.wordmark img{display:none}
.wordmark::after{padding-left:10px;border-left:1px solid var(--line-strong);color:var(--text-400);font-size:10px;font-weight:700;letter-spacing:.14em;content:"ZZAIMSE"}
.desktop-nav{margin-left:26px;gap:4px}
.desktop-nav a{border-radius:7px;color:var(--text-300);font-size:13px;font-weight:500}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]{background:rgb(244 245 246 / .055);color:var(--text-100)}
.desktop-nav a[aria-current=page]{box-shadow:inset 0 -1px 0 var(--teal)}
.header-actions{margin-left:auto}
.header-link{color:var(--text-300);font-weight:500}
.header-link:hover{color:var(--teal-hover)}
.site-header .button{min-height:38px;padding-inline:15px}

.button{min-height:44px;border-color:var(--line-strong);border-radius:var(--radius-control);background:rgb(244 245 246 / .035);font-weight:650}
.button:hover{border-color:rgb(244 245 246 / .28);background:rgb(244 245 246 / .075)}
.button.primary,.cta-panel .button{border-color:var(--teal);background:var(--teal);color:#08090a}
.button.primary:hover,.cta-panel .button:hover{border-color:var(--teal-hover);background:var(--teal-hover);color:#08090a;filter:none}
.button.secondary,.button.inverse{border-color:var(--line-strong);background:rgb(244 245 246 / .025);color:var(--text-100)}
.button.secondary:hover,.button.inverse:hover{border-color:var(--teal);background:rgb(57 189 147 / .07);color:var(--teal-hover)}
.button:focus-visible,.desktop-nav a:focus-visible,.wordmark:focus-visible,.menu-button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline-color:var(--teal)}
.menu-button{border-color:var(--line-strong);background:var(--forest-950)}
.mobile-drawer{inset:66px 0 auto;border-color:var(--line);background:rgb(13 16 17 / .98)}
.mobile-drawer a:hover,.mobile-drawer a[aria-current=page]{background:rgb(244 245 246 / .055)}

/* 첫 화면 전체가 하나의 검은 무대다. 캔버스가 히어로를 덮고 문구는 그 위에서 읽힌다.
   캔버스는 pointer-events 를 받지 않고 .hero 가 포인터를 받는다. */
.hero{min-height:calc(100dvh - 66px);overflow:hidden;border-bottom:1px solid var(--line);background:var(--forest-1000);isolation:isolate}
.hero::after{position:absolute;top:4%;left:73%;width:min(78vw,980px);height:min(82vw,780px);z-index:0;pointer-events:none;background:radial-gradient(circle at center,rgb(45 160 124 / .14),rgb(45 160 124 / .035) 48%,transparent 73%);transform:translateX(-50%);content:""}
.hero-stage{position:absolute;inset:0;z-index:1;margin:0;pointer-events:none}
.hero-weave{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 220ms ease-out}
.hero.is-live .hero-weave{opacity:1}
.hero>.container{padding-top:0}
.hero>.container.hero-grid{padding-block:clamp(34px,5vh,56px)}
.hero-grid{position:relative;z-index:2;min-height:calc(100dvh - 66px);grid-template-columns:minmax(0,650px) minmax(360px,1fr);gap:24px;align-items:center;padding-block:clamp(34px,5vh,56px)}
.hero-copy{position:relative;z-index:2;max-width:650px;margin:0;text-align:left}
.hero .kicker{display:block;margin:0 0 25px;padding:0;border:0;border-radius:0;background:none;color:var(--teal-hover);font-size:13px;font-weight:600;letter-spacing:.025em}
.hero .kicker::before{content:none}
/* 2026-09-02 대표 지시 — 데스크톱 홈 제목 최대 56px → 72px, 제목 영역 650px, 첫 문단 620px */
.hero h1{max-width:650px;font-size:clamp(48px,4.6vw,72px);font-weight:800;line-height:1.07;letter-spacing:-.052em;text-wrap:balance}
.hero .lead{max-width:620px;margin:28px 0 0;color:var(--text-300);font-size:17px;line-height:1.7;text-wrap:pretty}
.hero-actions{justify-content:flex-start;margin-top:34px}
.hero-actions .button.primary{min-width:0}
/* 심볼 자리는 CSS 가 잡고, 캔버스는 #heroSymbol 의 실제 사각형을 읽어 마지막 장면을 그린다. */
.hero-lockup{position:relative;z-index:2;display:flex;align-items:center;justify-self:center}
.hero-symbol{position:relative;width:min(40vh,368px);aspect-ratio:1/1}
.hero-symbol-static{display:block;width:100%;height:auto;opacity:.97;transition:opacity 200ms ease-out}
.hero.is-live .hero-symbol-static{opacity:0;visibility:hidden}
.operations-section{padding:92px 0 104px;border-bottom:1px solid var(--line);background:#0a0c0d}
.operations-section .operations-window{margin:0 auto}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.operations-window{max-width:1120px;margin:64px auto 0;border:1px solid var(--line-strong);border-radius:18px;background:var(--forest-950);box-shadow:0 38px 100px rgb(0 0 0 / .34);isolation:isolate}
.operations-bar{height:48px;padding-inline:18px;border-color:var(--line);background:rgb(244 245 246 / .018);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}
.operations-brand{gap:9px}
.operations-brand strong{font-family:Pretendard,"Apple SD Gothic Neo",sans-serif;font-size:12px}
.operations-state{color:var(--text-300)}
.operations-state>span{background:var(--teal);box-shadow:0 0 0 3px rgb(57 189 147 / .12)}
.operations-layout{min-height:500px;grid-template-columns:205px minmax(0,1fr)}
.workflow-steps{padding:24px 14px;border-color:var(--line);background:#0a0c0d}
.workflow-steps>p{padding-inline:10px;color:var(--text-400);font-size:11px;letter-spacing:.08em}
.workflow-steps>div{position:relative;padding:13px 12px;border:1px solid transparent;border-radius:10px}
.workflow-steps>div+div{margin-top:4px}
.workflow-steps>div.active{border-color:var(--line);background:rgb(244 245 246 / .05)}
.workflow-steps>div.active::before{inset:10px auto 10px -1px;width:2px;height:auto;background:var(--accent)}
.workflow-steps>div>span{color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}
.workflow-steps strong{font-size:13px}
.workflow-steps small{color:var(--text-400);font-size:11px}
.workflow-workspace{padding:28px 30px 24px;background:var(--forest-950)}
.workspace-head{padding-bottom:21px;border-color:var(--line)}
.workspace-head p{color:var(--text-400);font-size:11px}
.workspace-head h2{font-size:22px}
.workspace-badge{border-color:rgb(232 196 104 / .24);background:rgb(232 196 104 / .1);color:var(--status)}
.workspace-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:14px;padding-block:20px}
.evidence-panel,.delivery-panel{padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--forest-900);box-shadow:none}
.delivery-panel{perspective:none}
.workspace-label{color:var(--text-400);font-size:11px;letter-spacing:.08em}
.evidence-panel dl{margin-bottom:0}
.evidence-panel dl>div{padding:14px 0;border-color:var(--line)}
.evidence-panel dt{color:var(--text-400);font-size:11px}
.evidence-panel dd{font-size:13px;font-weight:550}
.delivery-panel .flow-list,[data-settle] .flow-list,[data-settle].is-in .flow-list{position:static;display:grid;min-height:0;gap:9px;transform:none}
.delivery-panel .flow-node,.delivery-panel .flow-node:nth-child(n){position:relative;inset:auto;width:100%;min-height:74px;padding:14px;border-color:var(--line);border-radius:10px;background:var(--forest-950);box-shadow:none;transform:none}
.delivery-panel .flow-node:nth-child(3){border-color:rgb(57 189 147 / .55);background:rgb(57 189 147 / .07)}
.delivery-panel .flow-node>span{border-color:var(--line-strong);background:var(--forest-900);color:var(--accent);font-size:10px}
.delivery-panel .flow-node strong{font-size:14px}
.delivery-panel .flow-node small{color:var(--text-400);font-size:12px}
.workflow-status{padding-top:17px;border-color:var(--line);font-size:12px}
.workflow-status span{color:var(--text-400)}
.workflow-status strong{font-size:12px}
.workflow-status>a{color:var(--teal-hover)}

.domain-strip{margin-top:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgb(244 245 246 / .018)}
.domain-row{min-height:76px;grid-template-columns:130px repeat(4,1fr)}
.domain-row>strong{color:var(--accent);letter-spacing:.08em}
.domain-row span{border-color:var(--line);color:var(--text-300)}

.section{padding-block:var(--section);border-color:var(--line);background:var(--forest-1000)}
.section.subtle,.section.dark,.product-section{background:rgb(244 245 246 / .018)}
.section-head{max-width:720px;margin-bottom:46px}
.section h2,.page-hero h1{font-size:clamp(40px,4.7vw,60px);font-weight:750;line-height:1.13}
.section-head h2{font-size:clamp(36px,4vw,52px)}
.section-head p,.page-hero p{color:var(--text-300)}
.kicker,.eyebrow{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.16em}
.outcome-list{border-color:var(--line)}
.outcome{grid-template-columns:90px minmax(220px,.65fr) minmax(0,1.35fr);border-color:var(--line)}
.outcome .num{color:var(--accent)}
.outcome p{color:var(--text-300)}

.service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.service-card,.service-card:nth-child(n){grid-column:auto;min-height:390px;padding:28px;border-color:var(--line);border-radius:14px;background:var(--forest-950)}
.service-card:nth-child(2){background:var(--forest-900)}
.service-card .label,.service-card a{color:var(--accent-hover)}
.service-card h3{font-size:23px}
.service-card p,.service-card ul{color:var(--text-300)}
.service-card li::before,.product-card li::before{color:var(--teal)}

.product-showcase{grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);gap:14px;border:0}
.product-card,.product-card.featured{min-height:470px;display:flex;padding:34px;border:1px solid var(--line);border-radius:14px;background:var(--forest-950);box-shadow:none}
.product-card.featured{border-color:rgb(57 189 147 / .32);background:var(--forest-900)}
.product-state{color:var(--teal)}
.product-card h2,.product-card h3{font-size:32px}

.case-feature{border-color:var(--line-strong);border-radius:16px;background:var(--forest-950)}
.case-copy{padding:42px}
.case-copy .case-label,.case-card span,.case-fact span{color:var(--accent)}
.case-facts{background:var(--line)}
.case-fact{background:var(--forest-900)}

.process-grid,.process-step,.case-card,.trust-item,.principle,.product-step,.feature-item,.deliverables,.process-columns div,.case-sections div{border-color:var(--line);border-radius:12px;background:var(--forest-950)}
.principle:nth-child(1),.principle:nth-child(4),.feature-item:nth-child(1),.feature-item:nth-child(4),.product-step:nth-child(2){background:var(--forest-900)}
.process-step:nth-child(even){background:var(--forest-900)}
.process-step .step-no,.service-band .band-label,.process-detail .step,.case-study .case-meta,.principle span,.product-step span,.feature-item span{color:var(--accent)}

.page-hero{padding:108px 0 86px;border-color:var(--line);background:var(--forest-1000)}
.page-hero .container{grid-template-columns:minmax(0,1.1fr) minmax(300px,.48fr);gap:72px;align-items:end}
.page-note{padding:24px;border-color:var(--line-strong);border-radius:14px;background:var(--forest-900);box-shadow:none}
.service-band,.process-detail,.case-study{border-color:var(--line)}
.service-band h2,.process-detail h2,.case-study h2{font-size:30px}
.process-columns,.case-sections{border:0;background:transparent}
.process-columns div,.case-sections div{padding:20px}
.callout{border-color:var(--line-strong);border-left-color:var(--accent);border-radius:12px;background:var(--forest-900)}

.faq-list,.faq-list details{border-color:var(--line)}
.faq-list summary::after{color:var(--teal)}
.cta-panel{padding:48px;border-color:var(--line-strong);border-radius:16px;background:var(--forest-900);box-shadow:none}
.cta-panel h2{font-size:clamp(30px,3.6vw,46px)}
.cta-panel p{color:var(--text-300)}

.contact-card{border-color:var(--line-strong);border-radius:16px;background:var(--forest-950)}
.field input,.field textarea,.field select{border-color:var(--line-strong);background:var(--forest-1000)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--teal)}
.field-error{color:#f0a4b6}
.form-summary{border-color:var(--accent-dark);background:rgb(192 96 122 / .08);color:#f0a4b6}
.form-status.success{border-color:rgb(57 189 147 / .34);background:rgb(57 189 147 / .08)}

.site-footer{border-top:1px solid var(--line);background:rgb(244 245 246 / .018)}
.footer-col strong{color:var(--text-400);font-size:11px;letter-spacing:.12em}
.footer-col a:hover{color:var(--teal-hover)}
.footer-bottom{border-color:var(--line)}
.mobile-conversion{background:rgb(8 9 10 / .94)}

.workflow-steps>div>span,.delivery-panel .flow-node>span,.outcome .num,
.service-card .label,.service-card a,.case-copy .case-label,.case-card span,
.case-fact span,.process-step .step-no,.service-band .band-label,
.process-detail .step,.case-study .case-meta,.principle span,.product-step span,
.feature-item span{color:var(--accent-readable)}

@media(hover:hover){
  .service-card:hover,.product-card:hover,.case-card:hover,.trust-item:hover,.principle:hover,.feature-item:hover{border-color:var(--line-strong);transform:translateY(-2px)}
  .delivery-panel:hover .flow-list{transform:none}
}

@media(max-width:1050px){
  .container{width:min(var(--container),calc(100% - 48px))}
  .hero>.container{padding-top:0}
  .hero>.container.hero-grid{padding-block:42px}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);gap:12px;padding-block:42px}
  .hero h1{font-size:clamp(46px,5vw,54px)}
  .hero-symbol{width:min(34vh,286px)}
  .operations-layout{grid-template-columns:180px minmax(0,1fr)}
  .workspace-grid{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr}
  .service-card,.service-card:nth-child(n){display:grid;grid-template-columns:120px minmax(220px,.8fr) minmax(260px,1.2fr);column-gap:24px;min-height:0}
  .footer-grid{grid-template-columns:minmax(200px,1.3fr) repeat(3,minmax(120px,.5fr))}
}

@media(max-width:880px){
  .hero{min-height:auto}
  .hero>.container.hero-grid{padding-block:64px 38px}
  .hero-grid{min-height:auto;grid-template-columns:1fr;gap:44px;padding-block:64px 48px}
  .hero-copy{max-width:660px}
  .hero-symbol{width:min(30vh,250px)}
  .hero-lockup{gap:20px}
  .domain-row{grid-template-columns:120px 1fr 1fr;padding-block:16px}
  .domain-row>strong{grid-row:span 2}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}

@media(max-width:767px){
  :root{--section:78px}
  .container{width:min(100% - 40px,var(--container))}
  .site-header{height:64px}
  .mobile-drawer{inset:64px 0 auto}
  .wordmark{font-size:17px}
  .wordmark::after{display:none}
  .hero{min-height:calc(100dvh - 64px)}
  .hero::after{top:42%;left:68%;width:620px;height:620px}
  .hero>.container{padding-top:0}
  .hero>.container.hero-grid{width:min(100% - 40px,var(--container));margin-inline:auto;padding-block:44px 0}
  .hero-grid{min-height:calc(100dvh - 64px);display:block;padding-block:44px 0}
  .hero-copy{width:100%;max-width:none}
  .hero .kicker{margin-bottom:20px;padding:0;font-size:12px}
  .hero h1{max-width:100%;font-size:39px;line-height:1.08;letter-spacing:-.045em}
  .hero .lead{max-width:34em;margin-top:22px;font-size:15px;line-height:1.68}
  .hero-actions{display:grid}
  .hero-actions{margin-top:27px}
  .hero-actions .button.primary{min-width:0}
  .hero-actions .button.secondary{display:inline-flex}
  .hero-lockup{margin-top:58px;padding-bottom:44px;gap:18px}
  .hero-symbol{width:min(26vh,208px)}
  .operations-section{padding:70px 0 78px}
  .operations-window{margin-top:46px;border-right:0;border-left:0;border-radius:0}
  .operations-layout{display:block}
  .operations-brand span{display:none}
  .workflow-steps{grid-template-columns:repeat(4,1fr);padding:10px;border-right:0;border-bottom:1px solid var(--line)}
  .workflow-steps>div{padding:9px 4px}
  .workflow-steps>div.active::before{inset:auto 8px -1px;width:auto;height:2px}
  .workflow-workspace{padding:24px 20px 20px}
  .workspace-grid{gap:12px}
  .delivery-panel{padding:16px}
  .delivery-panel .flow-node,.delivery-panel .flow-node:nth-child(n){min-height:0}
  .domain-row{grid-template-columns:1fr;padding-block:22px}
  .domain-row>strong{grid-row:auto;margin-bottom:8px}
  .domain-row span{padding:7px 0;border:0}
  .section h2,.page-hero h1{font-size:38px}
  .outcome{grid-template-columns:58px 1fr}
  .service-card,.service-card:nth-child(n),.product-card,.product-card.featured{display:block;padding:28px;min-height:0;border:1px solid var(--line);border-radius:14px}
  .service-card+.service-card{margin-top:0}
  .product-showcase,.case-feature{grid-template-columns:1fr}
  .page-hero{padding:84px 0 70px}
  .page-hero .container{display:block}
  .page-note{margin-top:38px}
  .service-band,.process-detail,.case-study{grid-template-columns:1fr}
  .cta-panel{padding:32px}
  .site-footer{padding-bottom:100px}
  .mobile-conversion{border-color:var(--line);background:rgb(8 9 10 / .94)}
}

@media(max-width:430px){
  .container{width:min(100% - 32px,var(--container))}
  .hero>.container.hero-grid{width:min(100% - 32px,var(--container))}
  .hero-copy{width:100%}
  .hero h1{font-size:38px}
  .hero-actions .button.secondary{display:none}
  .hero-symbol{width:min(22vh,168px)}
  .operations-bar{padding-inline:16px}
  .operations-brand strong{font-size:11px}
  .service-card,.service-card:nth-child(n),.product-card,.product-card.featured{padding:24px}
  .footer-grid{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
}

@media(prefers-reduced-transparency:reduce){.site-header,.mobile-conversion{background:var(--forest-1000);backdrop-filter:none}}

@media print{
  :root{--forest-1000:#fff;--forest-950:#fff;--forest-900:#fff;--forest-850:#fff;--forest-800:#fff;--line:#777;--line-strong:#555;--text-100:#111;--text-300:#333;--text-400:#444;--accent:#7a2a46;--accent-readable:#7a2a46;--teal:#16684f;--teal-hover:#16684f}
  html,body,.hero,.page-hero,.section,.section.subtle,.product-section,.domain-strip,.site-footer,.operations-window,.operations-bar,.workflow-steps,.workflow-workspace,.evidence-panel,.delivery-panel,.delivery-panel .flow-node,.service-card,.product-card,.case-feature,.case-fact,.principle,.process-columns div,.case-sections div,.page-note,.cta-panel,.contact-card{background:#fff!important;color:#111!important;border-color:#777!important;box-shadow:none!important}
  .site-header,.mobile-drawer,.mobile-conversion,.site-footer,.hero-actions,.menu-button,.skip{display:none!important}
  .hero .kicker{color:#7a2a46!important}
  .container,.narrow{width:100%}
}

@media(prefers-reduced-transparency:reduce){.site-header,.mobile-conversion{background:var(--forest-1000);backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}.flow-node,.flow-list{transform:none!important}}

@media print{
  :root{--forest-1000:#fff;--forest-950:#fff;--forest-900:#fff;--forest-850:#fff;--line:#777;--line-strong:#555;--text-100:#111;--text-300:#333;--text-400:#444;--accent:#7a2a12;--accent-hover:#7a2a12}
  .site-header,.mobile-drawer,.mobile-conversion,.site-footer,.hero-actions,.menu-button,.skip,.hero-weave{display:none!important}
  /* 종이에는 정적 심볼을 남긴다. is-live 가 숨긴 채로 인쇄되면 히어로가 빈다. */
  .hero.is-live .hero-symbol-static{opacity:1!important}
  body,.hero,.page-hero,.section,.section.subtle,.section.dark,.product-section,.cta-panel,.proof-flow,.flow-node,.operations-window,.operations-bar,.workflow-steps,.workflow-workspace,.delivery-panel,.delivery-panel .flow-node,.process-step,.case-feature,.case-fact,.case-card,.page-note,.product-card,.service-card,.trust-item,.principle,.feature-item,.contact-card{background:#fff!important;color:#111!important;border-color:#777!important;box-shadow:none!important}
  /* 🔴 클래스를 붙여 적는다 — WebKit 에서 인쇄 시 :root 사용자 정의 속성이 늦게 잡혀
     `var(--text-100)` 로 둔 버튼 글자가 흰 종이에 1.12:1 로 남았다(3엔진 대조로 확인). */
  .button,.button.primary,.button.secondary,.button.inverse,.cta-panel .button{border-color:#555!important;background:#fff!important;color:#111!important;box-shadow:none!important}
  h1,h2,h3,.hero h1,.section h2,.page-hero h1,.flow-node strong,.case-fact strong,.operations-brand strong,.workflow-steps strong,.workspace-head h2,.evidence-panel dd,.workflow-status strong{color:#111!important}
  p,.hero .lead,.page-hero p,.flow-node small,.section-head p,.case-copy>p,.case-card p,.process-step p,.page-note,.product-card>p,.service-card p,.trust-item p,.principle p,.feature-item p,.operations-brand span,.operations-state,.workflow-steps>p,.workflow-steps small,.workspace-head p,.workspace-label,.workspace-badge,.evidence-panel dt,.workflow-status span,.workflow-status a{color:#333!important}
  .kicker,.eyebrow,.flow-node .num,.product-state,.case-label,.case-meta,.step-no,.band-label,.workflow-steps>div>span{color:#7a2a12!important}
  .flow-list,.delivery-panel .flow-list{position:static!important;inset:auto!important;display:grid!important;min-height:0!important;gap:8px!important;transform:none!important}
  .flow-node,.delivery-panel .flow-node,.delivery-panel .flow-node:nth-child(n){position:relative!important;inset:auto!important;width:100%!important;min-height:0!important;transform:none!important}
  .proof-title{position:static;margin-bottom:12px}
  .section{padding-block:36px}
  .container,.narrow{width:100%}
}

/* ── 작업 샘플 ────────────────────────────────────────────────────────────── */
.samples-hero h1{text-wrap:balance}
.samples-section{padding-top:88px}
.sample-catalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;scroll-margin-top:88px}
.sample-card{min-width:0;min-height:248px;display:flex;flex-direction:column;align-items:flex-start;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--forest-950);color:var(--text-100);text-align:left;cursor:pointer;transition:transform var(--dur-surface) var(--ease),border-color var(--dur-tint) var(--ease),background-color var(--dur-tint) var(--ease)}
.sample-card:hover,.sample-card.is-selected{border-color:rgb(57 189 147 / .46);background:var(--forest-900);transform:translateY(-2px)}
.sample-card:focus-visible,.sample-close:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.sample-card-no{color:var(--accent-readable);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700}
.sample-card-type{margin-top:32px;color:var(--text-400);font-size:11px;font-weight:650;letter-spacing:.08em}
.sample-card strong{margin-top:8px;font-size:19px;line-height:1.35;letter-spacing:-.025em}
.sample-card small{margin-top:9px;color:var(--text-300);font-size:13px;line-height:1.6}
.sample-card-action{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:22px;color:var(--teal-hover);font-size:12px;font-weight:700}
.sample-card-action span{font-size:15px}

.sample-details{margin-top:24px}
.sample-panel{scroll-margin-top:84px;padding:32px;border:1px solid var(--line-strong);border-radius:18px;background:var(--forest-950);outline:none}
.sample-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:24px}
.sample-panel-head>div{max-width:710px}
.sample-panel-head span{color:var(--accent-readable);font-size:11px;font-weight:700;letter-spacing:.1em}
.sample-panel-head h2{margin:7px 0 6px;font-size:32px;line-height:1.25;letter-spacing:-.035em}
.sample-panel-head p{margin:0;color:var(--text-300);font-size:14px}
.sample-close{min-height:40px;flex:0 0 auto;padding:8px 13px;border:1px solid var(--line-strong);border-radius:8px;background:transparent;color:var(--text-100);font-size:12px;font-weight:650;cursor:pointer}
.sample-close:hover{border-color:var(--teal);color:var(--teal-hover)}

.demo-window{overflow:hidden;border:1px solid var(--line-strong);border-radius:14px;background:#0a0c0d;box-shadow:0 24px 64px rgb(0 0 0 / .24)}
.demo-topbar{height:46px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 17px;border-bottom:1px solid var(--line);background:rgb(244 245 246 / .025)}
.demo-topbar strong{font-size:12px}
.demo-state{display:inline-flex;align-items:center;gap:7px;color:var(--text-300);font-size:11px}
.demo-state i{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgb(57 189 147 / .12)}
.demo-state.warn i{background:var(--status);box-shadow:0 0 0 3px rgb(232 196 104 / .12)}
.demo-shell{min-height:520px;background:var(--forest-950)}
.demo-shell-sidebar{display:grid;grid-template-columns:178px minmax(0,1fr)}
.demo-rail{display:flex;flex-direction:column;gap:3px;padding:22px 12px;border-right:1px solid var(--line);background:#0a0c0d}
.demo-rail strong{padding:0 10px 12px;color:var(--text-400);font-size:10px;letter-spacing:.08em}
.demo-rail span{min-height:39px;display:flex;align-items:center;padding:7px 10px;border:1px solid transparent;border-radius:8px;color:var(--text-300);font-size:12px}
.demo-rail span.active{border-color:var(--line);background:rgb(244 245 246 / .05);color:var(--text-100)}
.demo-body{min-width:0;padding:24px}
.demo-body-head{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding-bottom:17px;border-bottom:1px solid var(--line)}
.demo-body-head small,.demo-body section>small,.site-preview>small,.permission-card>small,.version-panel>small,.content-flow>small,.page-strip>small,.review-panel>small{display:block;color:var(--text-400);font-size:10px;font-weight:650;letter-spacing:.08em}
.demo-body-head h3{margin:3px 0 0;font-size:20px;letter-spacing:-.025em}
.demo-tag{max-width:280px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:rgb(244 245 246 / .035);color:var(--text-300);font-size:10px;text-align:center}
.sample-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:14px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--line)}
.sample-notes>div{min-height:86px;padding:17px;background:var(--forest-900)}
.sample-notes span{display:block;color:var(--text-400);font-size:10px;font-weight:650;letter-spacing:.08em}
.sample-notes strong{display:block;margin-top:7px;font-size:12px;line-height:1.55}

/* 웹사이트·AI 관리자 */
.admin-demo-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(280px,1.08fr);gap:14px}
.chat-panel,.site-preview{min-width:0;padding:18px;border:1px solid var(--line);border-radius:11px;background:var(--forest-900)}
.chat-panel{display:flex;flex-direction:column;gap:11px}
.chat-bubble{max-width:88%;padding:11px 13px;border-radius:10px;color:var(--text-300);font-size:12px;line-height:1.6}
.chat-bubble.user{align-self:flex-end;background:rgb(57 189 147 / .11);color:var(--text-100)}
.chat-bubble.system{border:1px solid var(--line);background:var(--forest-950)}
.chat-bubble.system strong{color:var(--text-100)}
.chat-input{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding:10px 11px;border:1px solid var(--line-strong);border-radius:8px;color:var(--text-400);font-size:11px}
.chat-input span{padding:4px 8px;border-radius:6px;background:var(--teal);color:#08090a;font-weight:700}
.site-preview{position:relative;overflow:hidden;background:#eceeea;color:#111}
.preview-bar{display:flex;gap:4px;margin:-5px 0 20px}
.preview-bar span{width:6px;height:6px;border-radius:50%;background:#8a9290}
.site-preview>small{color:#59615f}
.site-preview h4{margin:20px 0 14px;color:#111;font-size:24px;line-height:1.22;letter-spacing:-.04em}
.preview-lines{display:grid;gap:5px}
.preview-lines i{height:5px;border-radius:4px;background:#bdc3bf}
.preview-lines i:nth-child(2){width:76%}.preview-lines i:nth-child(3){width:58%}
.preview-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:25px}
.preview-cards span{min-height:60px;display:grid;place-items:center;border:1px solid #c5cbc7;border-radius:7px;background:#fff;color:#35403c;font-size:10px;font-weight:700}

/* 사내 업무 */
.office-demo-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr);gap:14px}
.demo-list,.permission-card{padding:16px;border:1px solid var(--line);border-radius:11px;background:var(--forest-900)}
.demo-list>div{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:11px;padding:14px 5px;border-bottom:1px solid var(--line)}
.demo-list>div:last-child{border-bottom:0}
.demo-list i{width:7px;height:7px;border-radius:50%}.status-wait{background:var(--status)}.status-check{background:var(--accent)}.status-done{background:var(--teal)}
.demo-list span small{display:block;color:var(--text-400);font-size:9px}.demo-list span strong{display:block;margin-top:3px;font-size:12px}
.demo-list em{color:var(--text-300);font-size:10px;font-style:normal}
.permission-card h4{margin:18px 0 25px;font-size:20px;line-height:1.45}
.permission-card dl{margin:0}.permission-card dl>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.permission-card dt{color:var(--text-400);font-size:10px}.permission-card dd{margin:0;font-size:11px;font-weight:650}

/* 감정평가 데이터 */
.data-demo{padding:24px}
.demo-segment{display:flex;padding:3px;border:1px solid var(--line);border-radius:8px;background:#0a0c0d}
.demo-segment span{padding:5px 9px;border-radius:6px;color:var(--text-400);font-size:10px}.demo-segment span.active{background:var(--forest-850);color:var(--text-100)}
.data-demo-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(260px,.92fr);gap:12px}
.chart-card,.attention-card,.data-flow-card{padding:17px;border:1px solid var(--line);border-radius:11px;background:var(--forest-900)}
.bar-row{display:grid;grid-template-columns:100px minmax(70px,1fr) 36px;align-items:center;gap:10px;margin-top:18px}
.bar-row span,.bar-row em{font-size:10px}.bar-row em{color:var(--text-400);font-style:normal;text-align:right}
.bar-row>i{height:7px;overflow:hidden;border-radius:999px;background:var(--forest-800)}.bar-row b{display:block;height:100%;border-radius:inherit;background:var(--teal)}
.bar-row.bar-long b{width:78%}.bar-row.bar-short b{width:46%}.bar-row.bar-medium b{width:61%}.bar-row.bar-progress b{width:69%}
.bar-row:nth-child(3) b{background:var(--accent)}.bar-row:nth-child(4) b{background:var(--status)}
.attention-card>div{display:grid;grid-template-columns:68px minmax(0,1fr) auto;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}.attention-card>div:last-child{border-bottom:0}
.attention-card span,.attention-card em{color:var(--text-400);font-size:9px;font-style:normal}.attention-card strong{font-size:10px}
.data-flow-card{grid-column:1/-1}.data-flow-card>div{display:flex;align-items:center;gap:8px;margin-top:14px}.data-flow-card>div span{flex:1;padding:8px;border:1px solid var(--line);border-radius:7px;text-align:center;font-size:10px}.data-flow-card>div i{width:12px;height:1px;background:var(--line-strong)}
.data-flow-card p{margin:13px 0 0;color:var(--text-300);font-size:10px}

/* 답안 채점 */
.scoring-demo-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(260px,.82fr);gap:14px}
.answer-sheet{position:relative;min-height:330px;padding:24px;border-radius:8px;background:#f2f1ed;color:#1d2220}
.answer-sheet-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:25px;padding-bottom:9px;border-bottom:1px solid #c8ceca;font-size:10px}.answer-sheet-head em{color:#59615f;font-style:normal}
.answer-sheet p{margin:0 0 12px;font-family:Georgia,"Noto Serif KR",serif;font-size:12px;line-height:1.85}.answer-sheet p b{font-family:Pretendard,sans-serif}
.answer-marker{display:inline-block;margin-top:4px;padding:4px 8px;border:1px solid #b6677c;border-radius:5px;color:#7a2a46;font-size:9px;font-weight:700}
.rubric-panel{padding:18px;border:1px solid var(--line);border-radius:11px;background:var(--forest-900)}
.rubric-row{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:10px}.rubric-row span{color:var(--text-300)}.rubric-row strong{color:var(--teal-hover)}
.rubric-evidence{margin-top:15px;padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--forest-950)}.rubric-evidence span{color:var(--accent-readable);font-size:9px}.rubric-evidence p{margin:5px 0 0;color:var(--text-300);font-size:10px}
.demo-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:16px}.demo-actions span,.demo-actions strong{min-height:34px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:7px;font-size:10px}.demo-actions strong{border-color:var(--teal);background:var(--teal);color:#08090a}

/* 편집·검수 */
.publishing-shell{display:grid;grid-template-columns:82px minmax(0,1fr) 220px}
.page-strip{display:flex;flex-direction:column;gap:7px;padding:17px 12px;border-right:1px solid var(--line);background:#0a0c0d}
.page-strip>small{margin-bottom:5px}.page-strip span{min-height:54px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--forest-900);color:var(--text-400);font-size:10px}.page-strip span.active{border-color:var(--teal);color:var(--text-100)}
.document-canvas{min-width:0;padding:25px;background:#252a29}
.paper{width:min(100%,520px);min-height:424px;margin:auto;padding:30px;background:#f6f5f1;color:#1c211f;box-shadow:0 12px 32px rgb(0 0 0 / .2)}
.paper>small{color:#68706d;font-size:9px}.paper h4{margin:14px 0 20px;color:#111;font-size:17px}.paper p{font-size:10px}.paper h5{margin:24px 0 10px;color:#111;font-size:12px}
.paper-table{display:grid;grid-template-columns:.7fr 1.3fr;margin-top:18px;border-top:1px solid #7b817e;border-left:1px solid #7b817e}.paper-table span{padding:7px;border-right:1px solid #7b817e;border-bottom:1px solid #7b817e;font-size:9px}.paper-table span:nth-child(odd){background:#e5e6e2;font-weight:700}
.formula-line{display:grid;grid-template-columns:84px 16px minmax(0,1fr);align-items:center;padding:8px 0;border-top:1px solid #d3d5d1;font-size:10px}.formula-line b{text-align:center}.formula-line strong{min-width:0}
.review-panel{padding:18px 14px;border-left:1px solid var(--line);background:var(--forest-900)}
.review-panel>div{display:grid;grid-template-columns:7px minmax(0,1fr);gap:9px;padding:13px 0;border-bottom:1px solid var(--line)}.review-panel i{width:7px;height:7px;margin-top:5px;border-radius:50%}.review-ok i{background:var(--teal)}.review-warn i{background:var(--status)}
.review-panel strong,.review-panel em{display:block;font-size:10px}.review-panel em{margin-top:3px;color:var(--text-400);font-style:normal}
.review-action{width:100%;min-height:38px;display:grid;place-items:center;margin-top:17px;border:1px solid var(--teal);border-radius:7px;background:var(--teal);color:#08090a;font-size:10px;font-weight:700}

/* 현장 작업문서 */
.documents-demo-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(230px,.72fr);gap:14px}
.form-sheet,.version-panel{padding:17px;border:1px solid var(--line);border-radius:11px;background:var(--forest-900)}
.form-row{display:grid;grid-template-columns:78px minmax(0,1fr) 78px minmax(0,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.form-row.wide{grid-template-columns:78px minmax(0,1fr)}
.form-row span,.form-row strong{padding:10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:10px}.form-row span{background:var(--forest-950);color:var(--text-400)}
.formula-box{margin:14px 0;padding:14px;border:1px solid rgb(57 189 147 / .3);border-radius:8px;background:rgb(57 189 147 / .05)}.formula-box>small{color:var(--teal-hover);font-size:9px}.formula-box>div{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:11px}.formula-box span,.formula-box strong{padding:7px 9px;border:1px solid var(--line);border-radius:6px;font-size:10px}.formula-box b{color:var(--text-400);font-size:10px}
.version-panel>div{padding:14px 0;border-bottom:1px solid var(--line)}.version-panel span,.version-panel strong,.version-panel em{display:block}.version-panel span{color:var(--text-400);font-size:9px}.version-panel strong{margin-top:4px;font-size:11px}.version-panel em{margin-top:3px;color:var(--text-300);font-size:9px;font-style:normal}.version-current strong{color:var(--status)}.version-panel p{margin:16px 0 0;color:var(--text-300);font-size:10px}

/* 근거 상담 */
.grounded-demo-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(250px,.82fr);gap:14px}
.qa-panel,.source-panel{padding:18px;border:1px solid var(--line);border-radius:11px;background:var(--forest-900)}
.qa-panel>div{padding:15px;border-radius:9px}.qa-panel small{color:var(--text-400);font-size:9px}.qa-panel p{margin:6px 0 0;font-size:11px;line-height:1.7}.question{margin-left:16%;background:rgb(57 189 147 / .1)}.answer{margin-top:10px;margin-right:8%;border:1px solid var(--line);background:var(--forest-950)}.answer strong{display:block;margin-top:11px;color:var(--teal-hover);font-size:10px}
.source-panel>div{padding:12px 0;border-bottom:1px solid var(--line)}.source-panel span,.source-panel strong,.source-panel em{display:block}.source-panel span{color:var(--accent-readable);font-size:9px}.source-panel strong{margin-top:4px;font-size:11px}.source-panel em{margin-top:3px;color:var(--text-400);font-size:9px;font-style:normal}.source-panel .source-handoff{margin-top:13px;padding:11px;border:1px solid rgb(232 196 104 / .28);border-radius:8px;background:rgb(232 196 104 / .06)}.source-handoff strong{color:var(--status)}

/* 커머스 운영 */
.commerce-demo-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(250px,.9fr);gap:14px}
.task-board,.content-flow{padding:17px;border:1px solid var(--line);border-radius:11px;background:var(--forest-900)}
.task-board>div{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid var(--line)}.task-board>div:last-child{border-bottom:0}.task-board strong{font-size:10px}.task-board em{color:var(--text-400);font-size:9px;font-style:normal}
.task-label{padding:4px 6px;border-radius:5px;background:var(--forest-800);color:var(--text-300);font-size:9px;text-align:center}.task-label.order{color:var(--teal-hover)}.task-label.content{color:#edaabd}.task-label.ad{color:var(--status)}
.content-flow h4{margin:17px 0;font-size:19px;line-height:1.45}.content-flow>div{display:flex;align-items:center;gap:4px}.content-flow>div span{flex:1;min-height:46px;display:grid;place-items:center;padding:5px;border:1px solid var(--line);border-radius:6px;font-size:8px;text-align:center}.content-flow>div i{width:7px;height:1px;background:var(--line-strong)}.content-flow p{margin:18px 0 0;color:var(--text-300);font-size:10px}

@media(max-width:1050px){
  .sample-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sample-card{min-height:220px}
  .demo-shell-sidebar{grid-template-columns:150px minmax(0,1fr)}
  .publishing-shell{grid-template-columns:70px minmax(0,1fr) 190px}
  .admin-demo-grid,.office-demo-grid,.documents-demo-grid,.grounded-demo-grid,.commerce-demo-grid{grid-template-columns:1fr}
}

@media(max-width:767px){
  .samples-section{padding-top:72px}
  .sample-catalog{grid-template-columns:1fr}
  .sample-card{min-height:0;padding:21px}
  .sample-card-type{margin-top:20px}
  .sample-card-action{padding-top:18px}
  .sample-panel{padding:20px 0;border-right:0;border-left:0;border-radius:0}
  .sample-panel-head{display:block;padding-inline:20px}
  .sample-panel-head h2{font-size:27px}
  .sample-close{margin-top:18px}
  .demo-window{border-right:0;border-left:0;border-radius:0}
  .demo-shell{min-height:0}
  .demo-shell-sidebar{display:block}
  .demo-rail{display:grid;grid-template-columns:repeat(3,1fr);padding:10px;border-right:0;border-bottom:1px solid var(--line)}
  .demo-rail strong{grid-column:1/-1;padding:0 5px 5px}.demo-rail span{min-height:36px;justify-content:center;padding:5px;text-align:center}
  .demo-body,.data-demo{padding:18px}
  .demo-body-head{display:block}.demo-tag,.demo-segment{display:inline-flex;margin-top:12px}
  .sample-notes{grid-template-columns:1fr;margin-inline:20px}.sample-notes>div{min-height:0}
  .admin-demo-grid,.office-demo-grid,.data-demo-grid,.scoring-demo-grid,.documents-demo-grid,.grounded-demo-grid,.commerce-demo-grid{grid-template-columns:1fr}
  .data-flow-card{grid-column:auto}.data-flow-card>div{display:grid;grid-template-columns:1fr}.data-flow-card>div i{width:1px;height:8px;margin:auto}
  .publishing-shell{display:block}.page-strip{display:grid;grid-template-columns:repeat(4,1fr);padding:12px;border-right:0;border-bottom:1px solid var(--line)}.page-strip>small{grid-column:1/-1}.page-strip span{min-height:40px}.document-canvas{padding:16px}.paper{min-height:0;padding:22px 18px}.review-panel{border-top:1px solid var(--line);border-left:0}
  .bar-row{grid-template-columns:88px minmax(60px,1fr) 34px}.attention-card>div{grid-template-columns:60px minmax(0,1fr)}.attention-card em{grid-column:2}
  .form-row{grid-template-columns:68px minmax(0,1fr)}.form-row span:nth-of-type(2){border-left:0}.formula-box>div{flex-wrap:wrap}
  .question{margin-left:7%}.answer{margin-right:0}
  .task-board>div{grid-template-columns:54px minmax(0,1fr)}.task-board em{grid-column:2}
}

@media(max-width:430px){
  .samples-hero h1{font-size:36px}
  .sample-panel-head{padding-inline:16px}
  .demo-body,.data-demo{padding:15px}
  .sample-notes{margin-inline:16px}
  .admin-demo-grid,.office-demo-grid,.data-demo-grid,.scoring-demo-grid,.documents-demo-grid,.grounded-demo-grid,.commerce-demo-grid{gap:10px}
  .preview-cards{grid-template-columns:1fr}.preview-cards span{min-height:36px}
  .formula-line{grid-template-columns:72px 14px minmax(0,1fr)}
  .content-flow>div{display:grid;grid-template-columns:1fr}.content-flow>div i{width:1px;height:7px;margin:auto}
}

@media print{
  .sample-catalog{grid-template-columns:repeat(2,1fr)}
  .sample-card,.sample-panel,.demo-window,.demo-topbar,.demo-shell,.demo-rail,.demo-body,.chat-panel,.site-preview,.demo-list,.permission-card,.chart-card,.attention-card,.data-flow-card,.rubric-panel,.review-panel,.form-sheet,.version-panel,.qa-panel,.source-panel,.task-board,.content-flow,.sample-notes>div{border-color:#777!important;background:#fff!important;color:#111!important;box-shadow:none!important}
  .sample-card{min-height:0}.sample-card-action,.sample-close{display:none!important}
  .sample-panel[hidden]{display:none!important}
}

/* ─────────────────────────────────────────────────────────────────────────────
   주요 사례 (/portfolio) — 편집형. 상자 대신 괘선과 여백으로 가른다.
   ───────────────────────────────────────────────────────────────────────────── */
/* 🔴 르마인 로고는 남의 상표다. 알아보게만 두고 우리 제목보다 크게 놓지 않는다. */
.work-lead{display:grid;grid-template-columns:minmax(0,.26fr) minmax(0,1fr);gap:56px;align-items:start}
.work-lead-mark{padding:24px;border:1px solid var(--line-strong);border-radius:18px;background:var(--forest-950)}
.work-lead-mark img{display:block;width:100%;height:auto;aspect-ratio:1/1}
.work-lead-body h2{margin:6px 0 18px;font-size:clamp(2rem,3.6vw,3.25rem);font-weight:750;line-height:1.13;letter-spacing:-.04em;text-wrap:balance}
.work-lead-body>p{max-width:34em;color:var(--text-300)}
.work-facts{margin-top:30px;border-top:1px solid var(--line)}
.work-facts>div{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.work-facts dt{color:var(--text-400);font-size:.875rem;font-weight:650}
.work-facts dd{margin:0;color:var(--text-100);font-size:.9375rem}

.work-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:72px}
.work-figure{margin:0}
/* 🔴 aspect-ratio 를 박지 않는다 — 두 그림의 세로가 1px 다르다(1539·1538).
   width·height 속성이 이미 비율을 주므로 자리를 미리 잡는 효과는 같고, 늘어나지도 않는다. */
.work-figure a{display:block;border-radius:12px}
.work-figure img{display:block;width:100%;height:auto;border:1px solid var(--line-strong);border-radius:12px;background:#fff}
.work-figure a:hover img{border-color:var(--text-400)}
.work-figure figcaption{margin-top:14px;color:var(--text-300);font-size:.875rem;line-height:1.65}
.work-figure figcaption>span{display:block;margin-top:6px;color:var(--text-400);font-size:.8125rem}

.work-list{margin:0;padding:0;border-top:1px solid var(--line-strong);list-style:none;counter-reset:work}
.work-item{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:24px 56px;padding:32px 0;border-bottom:1px solid var(--line)}
.work-item-name{margin:0;color:var(--text-100);font-size:1.3125rem;font-weight:700;letter-spacing:-.04em}
.work-item-name::before{display:block;margin-bottom:8px;color:var(--accent-readable);font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.16em;counter-increment:work;content:counter(work,decimal-leading-zero)}
.work-item-body>p{margin:0;max-width:34em;color:var(--text-300)}
.work-check{margin-top:12px!important;padding-top:12px;border-top:1px solid var(--line);color:var(--text-400)!important;font-size:.875rem}
.work-check>span{display:block;margin-bottom:4px;color:var(--text-400);font-size:.75rem;font-weight:700;letter-spacing:.14em}

@media (max-width:900px){
  .work-lead{grid-template-columns:minmax(0,1fr);gap:32px}
  .work-lead-mark{max-width:240px;padding:22px}
  .work-figures{grid-template-columns:minmax(0,1fr);gap:36px;margin-top:56px}
  .work-item{grid-template-columns:minmax(0,1fr);gap:16px;padding:26px 0}
}

/* 홈 전면 무대 (2026-09-02).
   body.home 안에서만 적용한다. 속장 헤더 배치는 바꾸지 않는다.
   정본은 ../_design/brand-system-v3.md §4 다. */
body.home .site-header{position:fixed;inset:0 0 auto;border-bottom-color:transparent;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color 240ms ease-out,border-color 240ms ease-out}
body.home.is-past-hero .site-header{border-bottom-color:var(--line);background:rgb(8 9 10 / .78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

/* 첫 화면은 브라우저 맨 위부터 안정적인 한 화면이다. 모바일 주소창 변화에도
   다음 구획이 비치지 않도록 svh 를 우선하고, 미지원 브라우저에는 vh 를 남긴다. */
body.home .hero{min-height:100vh;min-height:100svh;border-bottom:0}
body.home .hero-top{position:absolute;top:0;left:0;z-index:0;width:1px;height:76px;pointer-events:none}
body.home .hero-grid,body.home .hero>.container.hero-grid{min-height:100vh;min-height:100svh;grid-template-rows:minmax(0,1fr);align-items:stretch;padding-block:calc(66px + clamp(26px,4vh,48px)) clamp(26px,4vh,48px)}

/* 제목은 무대의 위쪽 기준점, 설명과 행동은 아래쪽 기준점으로 나눈다.
   문구를 한 덩어리로 가운데 놓지 않아 캔버스가 화면 전체 장면으로 읽힌다. */
body.home .hero-copy{align-self:stretch;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-block:clamp(8px,1.6vh,18px)}
body.home .hero h1{align-self:start}
body.home .hero .lead{align-self:end;margin-top:0}
body.home .hero-lockup{align-self:center}

@media(max-width:1050px){
  body.home .hero-grid,body.home .hero>.container.hero-grid{min-height:100vh;min-height:100svh;padding-block:calc(66px + 30px) 30px}
}
@media(max-width:880px){
  body.home .hero{min-height:100vh;min-height:100svh}
  body.home .hero-grid,body.home .hero>.container.hero-grid{min-height:100vh;min-height:100svh;grid-template-rows:auto auto;align-content:center;align-items:center;padding-block:calc(66px + 34px) 30px}
  body.home .hero-copy{align-self:auto;display:block;padding-block:0}
  body.home .hero .lead{margin-top:22px}
  body.home .hero-lockup{margin-top:0;padding-bottom:0}
}
@media(max-width:767px){
  /* 좁은 화면에서는 문구를 헤더 바로 아래로 옮기고 심볼을 무대 아래에 고정한다. */
  body.home .hero-grid,body.home .hero>.container.hero-grid{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:24px;padding-block:calc(64px + 32px) 20px}
  body.home .hero-top{height:70px}
  body.home .hero-lockup{margin-top:auto;padding-bottom:0}
}

/* 투명도 감소 설정에서는 흐림 대신 옅은 검은 면을 쓴다. */
@media(prefers-reduced-transparency:reduce){
  body.home .site-header{background:rgb(8 9 10 / .62);backdrop-filter:none}
  body.home.is-past-hero .site-header{background:var(--forest-1000);backdrop-filter:none}
}

/* ─────────────────────────────────────────────────────────────────────────────
   v3.1 — 2026-09-03 조판·위계·모양 통일 (정본 ../_design/brand-system-v3.md §4-1)

   팔레트·정보구조·첫 화면 장면(site-v2.js)은 그대로 둔다. 바꾸는 것은 넷이다.
   1) 글자 사다리 — 속장 h1 60 › 구획 h2 44 › 항목 h3 22~30 › 본문 16 › 보조 13~14 › 라벨 12.
      한글에 .16em 자간과 -.052em 축소는 과하다. 라벨 자간은 .04em 이하, 제목 축소는 -.035em 이하.
      11px 미만 글자는 두지 않는다(정본 §3). 샘플 화면 안 8~10px 을 전부 11px 로 올렸다.
   2) 모양 — 반지름은 셋뿐이다. 창·판 16 · 안쪽 판 12 · 조작부 9.
   3) 상자 — 「조작하는 물건」(운영 화면 창·샘플 버튼·문의 폼·서랍)만 상자를 둔다.
      설명 목록(원칙·기능·단계·사례 항목·안내 메모·닫는 문의)은 괘선과 열로 가른다(정본 §속장).
      같은 크기 상자 셋을 나란히 두는 것, 둥근 상자에 왼쪽 색띠, 칩·알약 모양 라벨, 점 둘레의 빛무리는 쓰지 않는다.
   4) 상태 — 상태 점은 뜻이 있는 자리에만 남기고 빛무리(box-shadow 링)를 뺀다. 상태 라벨은 알약이 아니라 글자다.
   미디어 블록은 폭 내림차순(1050 → 880 → 767 → 430)으로 둔다. 파일 관례다.
   ───────────────────────────────────────────────────────────────────────────── */
:root{--radius-panel:12px}

/* 1. 글자 사다리 */
.hero h1{letter-spacing:-.035em}
.section h2,.page-hero h1{letter-spacing:-.03em}
.page-hero h1{font-size:clamp(40px,4.7vw,60px);font-weight:750;line-height:1.1}
.section-head{max-width:720px;margin-bottom:52px}
.section-head h2{font-size:clamp(32px,3.5vw,44px);font-weight:700;line-height:1.18;letter-spacing:-.028em;text-wrap:balance}
.section-head p:not(.kicker):not(.eyebrow),.page-hero p:not(.kicker):not(.eyebrow){margin-top:16px;font-size:17px;line-height:1.75;text-wrap:pretty}
.cta-panel h2{font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-.028em;text-wrap:balance}
.service-band h2,.process-detail h2,.case-study h2{font-size:clamp(24px,2.2vw,30px);font-weight:700;line-height:1.25;letter-spacing:-.025em}
.service-card h3,.outcome h3{font-size:22px;font-weight:650;line-height:1.3;letter-spacing:-.02em}
.product-card h2,.product-card h3{font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-.025em}
.product-card .product-tagline{font-size:17px}
.case-copy h3{font-size:30px;font-weight:700;letter-spacing:-.025em}
.principle h3,.feature-item h3,.product-step h3{font-size:20px;font-weight:650;line-height:1.35;letter-spacing:-.02em}
.contact-intro .contact-aside h2{letter-spacing:-.02em}
.legal h1{font-size:clamp(34px,4vw,44px);letter-spacing:-.03em}
.legal h2{font-size:22px;letter-spacing:-.02em}
.sample-panel-head h2{font-size:30px;font-weight:700;letter-spacing:-.025em}
.sample-card strong{font-size:19px;font-weight:650;letter-spacing:-.02em}

/* 라벨. 한글 라벨에 넓은 자간을 걸지 않는다. 버건디 라벨은 정본 §2 그대로 「구획 라벨·단계 표식」자리다. */
.kicker,.eyebrow,.page-hero .kicker,.section-head .eyebrow,.hero .kicker,.legal .eyebrow{margin-bottom:14px;color:var(--accent-readable);font-size:12px;font-weight:700;letter-spacing:.02em}
.outcome .num,.service-card .label,.product-state,.case-copy .case-label,.case-card span,.case-fact span,
.service-band .band-label,.process-detail .step,.case-study .case-meta,.principle span,.feature-item span{font-size:12px;font-weight:700;letter-spacing:.02em}
.product-state{color:var(--teal)}
.product-step span{color:var(--accent-readable);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0}
.workspace-label,.workflow-steps>p,.domain-row>strong,.footer-col strong,.sample-card-type,.sample-panel-head span,
.demo-rail strong,.sample-notes span,.demo-body-head small,.demo-body section>small,.site-preview>small,.permission-card>small,
.version-panel>small,.content-flow>small,.page-strip>small,.review-panel>small,.work-check>span,.work-item-name::before{letter-spacing:.03em}
.footer-col strong{font-size:12px}
.wordmark::after{font-size:11px;letter-spacing:.12em}
.page-note strong{margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.02em}

/* 11px 하한. 샘플 화면과 운영 화면 안의 작은 글자를 전부 올린다. */
.workflow-steps>div>span,.delivery-panel .flow-node>span,.workspace-badge,.demo-tag,.demo-rail strong,
.demo-body-head small,.demo-body section>small,.site-preview>small,.permission-card>small,.version-panel>small,
.content-flow>small,.page-strip>small,.review-panel>small,.sample-notes span,.demo-list span small,.demo-list em,
.permission-card dt,.demo-segment span,.bar-row span,.bar-row em,.attention-card span,.attention-card em,.attention-card strong,
.data-flow-card>div span,.data-flow-card p,.answer-sheet-head,.answer-marker,.rubric-row,.rubric-evidence span,.rubric-evidence p,
.demo-actions span,.demo-actions strong,.page-strip span,.paper>small,.paper p,.paper-table span,.formula-line,
.review-panel strong,.review-panel em,.review-action,.form-row span,.form-row strong,.formula-box>small,.formula-box span,
.formula-box strong,.formula-box b,.version-panel span,.version-panel em,.version-panel p,.qa-panel small,.answer strong,
.source-panel span,.source-panel em,.task-board strong,.task-board em,.task-label,.content-flow>div span,.content-flow p,
.preview-cards span{font-size:11px}
.workflow-steps strong,.delivery-panel .flow-node strong{font-size:14px}

/* 2. 모양 — 반지름 셋 */
.operations-window,.demo-window,.sample-panel,.sample-card,.contact-card,.cta-panel,.mobile-drawer{border-radius:var(--radius-surface)}
.evidence-panel,.delivery-panel,.chat-panel,.site-preview,.demo-list,.permission-card,.chart-card,.attention-card,.data-flow-card,
.rubric-panel,.form-sheet,.version-panel,.qa-panel,.source-panel,.task-board,.content-flow,.sample-notes{border-radius:var(--radius-panel)}
.workflow-steps>div,.delivery-panel .flow-node,.demo-rail span,.demo-segment,.chat-input,.chat-bubble,.rubric-evidence,.formula-box,
.source-handoff,.qa-panel>div,.demo-actions span,.demo-actions strong,.review-action,.page-strip span,.data-flow-card>div span,
.content-flow>div span,.preview-cards span,.answer-sheet,.answer-marker,.task-label,.paper{border-radius:var(--radius-control)}
.demo-segment span{border-radius:6px}
.operations-window{box-shadow:0 24px 64px rgb(0 0 0 / .28)}
.demo-window{box-shadow:0 20px 48px rgb(0 0 0 / .22)}

/* 3. 상자 → 괘선과 열 */
/* 안내 메모(속장 첫 화면 오른쪽 칸) */
.page-note{max-width:none;padding:22px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;color:var(--text-300);font-size:14px;line-height:1.7}
.page-note a{color:var(--text-100)}
/* 닫는 문의 띠 */
.cta-panel{grid-template-columns:minmax(0,1fr) auto;gap:32px;padding:56px 0;border:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.cta-panel p{margin-top:12px;font-size:17px}
/* 강조 인용 — 둥근 상자 대신 왼쪽 괘선 하나 */
.callout{padding:4px 0 4px 24px;border:0;border-left:2px solid var(--accent);border-radius:0;background:transparent}
.callout h2,.callout h3{margin:0 0 10px;font-size:20px;font-weight:700;letter-spacing:-.02em}
.callout p{color:var(--text-300)}
.callout .button{margin-top:18px}
.callout-spaced{margin-top:28px}
/* 홈 서비스 셋 — 같은 상자 셋 대신 세로 괘선으로 가른 세 열 */
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service-card,.service-card:nth-child(n){display:flex;flex-direction:column;min-height:0;padding:40px 36px 40px 0;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent}
.service-card:nth-child(2){padding-inline:36px}
.service-card:nth-child(3){padding-right:0;padding-left:36px;border-right:0}
.service-card .label{margin-bottom:18px}
.service-card h3{margin:0 0 10px}
.service-card ul{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.service-card a{margin-top:auto;padding-top:24px;color:var(--teal-hover);font-size:13px;font-weight:650}
.service-card a:hover{color:var(--text-100)}
/* 제품 둘 — 세로 괘선 하나로 가른 두 열 */
.product-showcase{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.product-card,.product-card.featured{min-height:0;display:flex;flex-direction:column;padding:44px 44px 48px 0;border:0;border-radius:0;background:transparent;box-shadow:none}
.product-card+.product-card{padding-right:0;padding-left:44px;border-left:1px solid var(--line)}
.product-card .product-state{margin:0 0 16px;padding:0}
.product-card h2,.product-card h3{margin:0 0 10px}
.product-card .product-tagline{margin:0 0 14px;color:var(--text-100)}
.product-card ul{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.product-card .button{margin-top:28px;align-self:flex-start}
/* 홈 대표 사례 — 위아래 괘선 띠, 오른쪽 사실표는 하나의 괘선 격자 */
.case-feature{grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:48px;overflow:visible;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.case-copy{padding:44px 0}
.case-copy h3{margin:16px 0 14px}
.case-facts{display:grid;grid-template-columns:1fr 1fr;gap:0;align-self:center;border-left:1px solid var(--line);background:transparent}
.case-fact{padding:22px 24px;border-bottom:1px solid var(--line);background:transparent}
.case-fact:nth-child(odd){border-right:1px solid var(--line)}
.case-fact:nth-child(n+3){border-bottom:0}
.case-fact strong{margin-top:6px;font-size:15px}
/* 원칙·기능 — 2열 괘선 격자 */
.principles,.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.principle,.principle:nth-child(n),.feature-item,.feature-item:nth-child(n){min-height:0;padding:30px 32px 32px 0;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.principle:nth-child(even),.feature-item:nth-child(even){padding-right:0;padding-left:32px;border-right:0}
.principle h3,.feature-item h3{margin:12px 0 8px}
.principle p,.feature-item p{margin:0;font-size:15px}
/* 제품 단계 셋 — 순서가 있는 내용이라 숫자를 남기고, 세로 괘선으로 가른 세 열 */
.product-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.product-step,.product-step:nth-child(n){padding:32px 28px 36px 0;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent}
.product-step:nth-child(2){padding-inline:28px}
.product-step:last-child{padding-right:0;padding-left:28px;border-right:0}
.product-step h3{margin:14px 0 8px}
.product-step p{margin:0;font-size:15px}
/* 사례 절·절차 열 — 상자 대신 괘선 격자 */
.case-sections{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.case-sections div{padding:18px 24px 18px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.case-sections div:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
.case-sections span{font-size:12px;font-weight:700;letter-spacing:.02em}
.process-columns{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.process-columns div,.process-columns div:last-child{padding:18px 24px 18px 0;border:0;border-radius:0;background:transparent}
.process-columns div:last-child{padding:18px 0 18px 24px;border-left:1px solid var(--line)}
.process-columns span{font-size:12px;font-weight:700;letter-spacing:.02em}
.deliverables{padding:0 0 0 28px;border:0;border-left:1px solid var(--line);border-radius:0;background:transparent}
.deliverables strong{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--text-400)}
.deliverables a{color:var(--teal-hover);font-size:13px;font-weight:650}
/* 회사 소개 표 — 괘선만 */
.company-facts th{color:var(--text-400);font-size:13px;font-weight:600}

/* 4. 상태 — 빛무리 없이. 칩·알약은 글자로 */
.operations-state>span,.demo-state i,.demo-state.warn i{box-shadow:none}
.operations-state>span{width:7px;height:7px}
.demo-tag{max-width:none;padding:0;border:0;border-radius:0;background:none;color:var(--text-400);text-align:right}
.workspace-badge{min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--status);font-weight:650}
.workspace-badge::before{display:inline-block;width:7px;height:7px;margin-right:8px;background:var(--status);vertical-align:0;content:""}
.desktop-nav a[aria-current=page]{box-shadow:none}
.desktop-nav a[aria-current=page]::after{background:var(--teal)}

/* 상자를 없앤 자리에는 들썩임도 없다. 조작하는 물건(샘플 버튼)만 반응한다. */
@media(hover:hover){
  .service-card:hover,.product-card:hover,.case-card:hover,.trust-item:hover,.principle:hover,.feature-item:hover{border-color:var(--line);transform:none}
}

@media(max-width:1050px){
  .service-grid{grid-template-columns:1fr;border-bottom:0}
  .service-card,.service-card:nth-child(n){display:block;padding:32px 0;border:0;border-bottom:1px solid var(--line)}
  .service-card .label{display:block;margin-bottom:12px}
  .service-card a{display:inline-block;margin-top:18px;padding-top:0}
  .product-showcase{grid-template-columns:1fr;border-bottom:0}
  .product-card,.product-card.featured{padding:36px 0;border-bottom:1px solid var(--line)}
  .product-card+.product-card{padding-left:0;border-left:0}
  .case-feature{grid-template-columns:1fr;gap:0}
  .case-copy{padding:40px 0 32px}
  .case-facts{border-left:0;border-top:1px solid var(--line)}
  .case-fact{padding:20px 24px 20px 0}
  .case-fact:nth-child(even){padding-right:0;padding-left:24px}
  .case-fact:nth-child(n+3){border-bottom:0}
  .case-fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

@media(max-width:767px){
  .section-head{margin-bottom:40px}
  .section-head h2{font-size:32px}
  .page-hero h1{font-size:36px}
  .cta-panel{padding:40px 0}
  .cta-panel h2{font-size:28px}
  .service-card,.service-card:nth-child(n),.product-card,.product-card.featured{display:block;padding:30px 0;border:0;border-bottom:1px solid var(--line);border-radius:0}
  .service-card ul,.product-card ul{margin-top:18px;padding-top:14px}
  .product-card .button{display:inline-flex;margin-top:22px}
  .principles,.feature-list,.product-flow,.case-sections,.process-columns{grid-template-columns:1fr}
  .principle,.principle:nth-child(n),.feature-item,.feature-item:nth-child(n){padding:26px 0;border-right:0}
  .product-step,.product-step:nth-child(n){padding:26px 0;border-right:0;border-bottom:1px solid var(--line)}
  .product-step:last-child{border-bottom:0}
  .case-sections div:nth-child(even){padding-left:0;border-left:0}
  .process-columns div:last-child{padding:18px 0;border-left:0;border-top:1px solid var(--line)}
  .case-facts{grid-template-columns:1fr}
  .case-fact,.case-fact:nth-child(odd),.case-fact:nth-child(even){padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}
  .case-fact:last-child{border-bottom:0}
  .callout{padding-left:18px}
  .page-note{margin-top:34px;padding:18px 0}
  .workflow-steps>div>span{font-size:11px}
  .demo-tag{text-align:left}
  .deliverables{margin-top:20px;padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}
}

@media(max-width:430px){
  .section-head h2{font-size:30px}
  .page-hero h1{font-size:34px}
}

@media print{
  .service-card,.service-card:nth-child(n),.product-card,.product-card.featured,.principle,.feature-item,.product-step,.case-sections div,.process-columns div,.deliverables,.page-note,.cta-panel,.callout,.case-fact{background:#fff!important;border-color:#777!important}
}

/* 홈 압축 편집 — 첫 화면 뒤에 설명 구획을 길게 쌓지 않는다. */
body.home .hero-grid,body.home .hero>.container.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
body.home .hero-copy{align-self:center;display:block;padding-block:0}
body.home .hero h1{font-size:clamp(56px,5.4vw,76px);line-height:1.02;white-space:nowrap}
body.home .hero .lead{align-self:auto;margin-top:28px}
body.home .hero-lockup{align-self:center}
body.home .hero-symbol{width:min(47vh,440px)}
.home-summary{padding:clamp(76px,8vw,116px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a0c0d}
.home-summary-grid{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(460px,1.22fr);gap:clamp(64px,9vw,132px);align-items:start}
.home-summary-copy{max-width:520px}
.home-summary .eyebrow,.home-selected .eyebrow{margin:0 0 16px;color:var(--accent-readable);font-size:12px;font-weight:700;letter-spacing:.02em}
.home-summary h2,.home-selected h2{margin:0;color:var(--text-100);font-size:clamp(38px,4.1vw,54px);font-weight:750;line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
.home-summary-copy>p:not(.eyebrow){max-width:29em;margin:24px 0 0;color:var(--text-300);font-size:17px;line-height:1.75}
.text-link{display:inline-flex;align-items:center;gap:9px;margin-top:30px;color:var(--teal-hover);font-size:14px;font-weight:700}
.text-link:hover{color:var(--text-100)}
.home-capabilities{border-top:1px solid var(--line-strong)}
.home-capabilities>a{display:grid;grid-template-columns:44px minmax(0,1fr) 24px;gap:20px;align-items:center;min-height:116px;padding:24px 4px;border-bottom:1px solid var(--line);color:var(--text-100);transition:background-color 160ms ease,color 160ms ease}
.home-capabilities>a:hover{background:rgb(244 245 246 / .025)}
.home-capabilities>a>span{align-self:start;padding-top:5px;color:var(--burgundy-soft);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.home-capabilities strong{display:block;font-size:23px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.home-capabilities p{margin:8px 0 0;color:var(--text-400);font-size:14px;line-height:1.55}
.home-capabilities em{color:var(--text-400);font-size:19px;font-style:normal;transition:transform 160ms ease,color 160ms ease}
.home-capabilities>a:hover em{color:var(--teal-hover);transform:translate(2px,-2px)}

.home-selected{padding:clamp(68px,7vw,96px) 0;background:var(--forest-1000)}
.home-selected-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:40px}
.home-selected-head .text-link{margin:0 0 7px}
.home-selected-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.home-selected-list>a{display:flex;min-height:190px;flex-direction:column;padding:28px 30px 27px;border-right:1px solid var(--line);color:var(--text-100)}
.home-selected-list>a:first-child{padding-left:0}
.home-selected-list>a:last-child{padding-right:0;border-right:0}
.home-selected-list span{color:var(--burgundy-soft);font-size:12px;font-weight:700;letter-spacing:.02em}
.home-selected-list strong{max-width:12em;margin-top:24px;font-size:22px;font-weight:700;line-height:1.35;letter-spacing:-.02em}
.home-selected-list em{margin-top:auto;color:var(--text-400);font-size:13px;font-style:normal}
.home-selected-list>a:hover em{color:var(--teal-hover)}
.home-contact{padding:0 0 48px;background:var(--forest-1000)}

@media(max-width:880px){
  body.home .hero-grid,body.home .hero>.container.hero-grid{grid-template-columns:1fr;gap:28px;align-content:center}
  body.home .hero h1{font-size:clamp(46px,7vw,58px)}
  body.home .hero-symbol{width:min(34vh,300px)}
  .home-summary-grid{grid-template-columns:1fr;gap:56px}
  .home-summary-copy{max-width:620px}
  .home-selected-list{grid-template-columns:1fr;border-bottom:0}
  .home-selected-list>a,.home-selected-list>a:first-child,.home-selected-list>a:last-child{min-height:0;padding:24px 0;border-right:0;border-bottom:1px solid var(--line)}
  .home-selected-list strong{margin-top:12px}
  .home-selected-list em{margin-top:18px}
}

@media(max-width:600px){
  body.home .hero-grid,body.home .hero>.container.hero-grid{justify-content:center;gap:26px;padding-block:calc(64px + 30px) 26px}
  body.home .hero-copy{margin-top:auto}
  body.home .hero h1{font-size:40px}
  body.home .hero .lead{margin-top:20px}
  body.home .hero-lockup{margin:0 auto auto}
  body.home .hero-symbol{width:min(25vh,190px)}
  .home-summary{padding:66px 0 72px}
  .home-summary h2,.home-selected h2{font-size:34px}
  .home-summary-grid{gap:44px}
  .home-summary-copy>p:not(.eyebrow){font-size:16px}
  .home-capabilities>a{grid-template-columns:34px minmax(0,1fr) 20px;gap:12px;min-height:102px;padding:21px 0}
  .home-capabilities strong{font-size:20px}
  .home-selected{padding:64px 0}
  .home-selected-head{align-items:start;margin-bottom:32px}
  .home-selected-head>.text-link{display:none}
  .home-contact{padding-bottom:24px}
}

@media print{
  .home-summary,.home-selected,.home-contact{background:#fff!important;color:#111!important;border-color:#777!important}
}