/* OneKey motion: readable before enhancement, short responses, no scroll locking. */
:root{--header-height:80px;--motion-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:calc(var(--header-height) + 24px)}
.header{position:sticky;top:0;height:var(--header-height);z-index:30;transition:box-shadow .2s ease}
.header.is-scrolled{box-shadow:0 4px 20px #18181808}
.header nav a{position:relative;min-height:44px;display:flex;align-items:center}
.header nav a:hover{box-shadow:none}
.header nav a:after{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--motion-ease)}
.header nav a:hover:after,.header nav a[aria-current="location"]:after{transform:scaleX(1)}
.mobile-nav{position:fixed;left:0;right:0;top:var(--header-height);z-index:29;background:#fff;max-height:calc(100dvh - var(--header-height));overflow-y:auto;overscroll-behavior:contain;box-shadow:0 12px 20px #1818180b}
.mobile-nav a{display:flex;align-items:center;min-height:44px;border-bottom:1px solid var(--line);font-size:16px}
.mobile-nav a[aria-current="location"]{font-weight:700;text-decoration:underline;text-decoration-color:#bba000;text-underline-offset:7px}
.menu-toggle{min-height:44px;min-width:64px;cursor:pointer}
.underlined{position:relative;border-bottom:0;padding-bottom:8px}
.underlined:after{content:"";position:absolute;height:5px;left:0;right:0;bottom:0;background:var(--ink);transform-origin:left}
.motion-ready .underlined:after{animation:onekey-line .45s var(--motion-ease) both}
@keyframes onekey-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.service{transition:transform .2s var(--motion-ease),border-color .2s,box-shadow .2s}
.service:focus-within{border-color:var(--ink);box-shadow:0 6px 18px #18181809}
.text-link{min-height:44px;display:inline-flex;align-items:center;padding:8px 0;max-width:100%}
.button:active,.menu-toggle:active{background:#353535;color:#fff;transform:none}
.note-answer a{min-height:44px;display:inline-flex;align-items:center}
summary{min-height:48px}
.details-body{display:flow-root}
.details-enhanced summary>span{transform:rotate(0deg)}
.details-enhanced.is-expanded summary>span{transform:rotate(45deg)}
.details-enhanced:focus-within{scroll-margin-bottom:110px}
.steps article{position:relative}
.steps article:before{content:"";position:absolute;top:0;bottom:0;left:-14px;width:2px;background:transparent;transition:background .2s}
.steps .step-number{color:#c4c4bd;transition:color .2s}
.steps article.is-current:before{background:var(--yellow)}
.steps article.is-current .step-number{color:var(--yellow)}
.mobile-contact[hidden]{display:none!important}
.mobile-contact{display:none}
@media(hover:hover) and (pointer:fine){
 .service:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 10px 24px #1818180a}
 .note-cover{transition:box-shadow .2s}
 .note-card:focus-within .note-cover{box-shadow:0 0 0 2px var(--ink)}
}
@media(min-width:1024px){
 .process-intro.can-stick{position:sticky;top:calc(var(--header-height) + 36px);align-self:start}
}
@media(min-width:801px) and (max-width:1023px){
 .service-grid{grid-template-columns:1fr 1fr}
 .service:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
 .service:last-child .service-top{grid-column:1/-1;margin-bottom:20px}
 .service:last-child .service-en,.service:last-child h3,.service:last-child>p{grid-column:1}
 .service:last-child ul{grid-column:2;grid-row:2/5;margin-top:0}
 .service:last-child .text-link{grid-column:2;grid-row:5}
 .header{gap:18px;padding-left:4%;padding-right:4%}
 .header nav{gap:16px;font-size:13px}
 .header>.button{padding:10px 17px;font-size:13px}
}
@media(max-width:800px){
 :root{--header-height:68px}
 html{scroll-padding-bottom:110px}
 .header{height:var(--header-height)}
 .hero{min-height:0}
 .hero-visual{min-height:clamp(280px,70vw,380px)}
 .hero-copy{padding-top:36px}
 .hero-copy .button{min-height:50px}
 .about-body>p,.about-experience,.section-heading>p{font-size:16px}
 .about-experience br{display:none}
 .section-heading>p{max-width:40ch}
 .button:hover{transform:none}
 .mobile-contact{display:block;position:fixed;z-index:25;left:0;right:0;bottom:0;padding:10px 6% calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 24px #18181808}
 .mobile-contact .button{display:flex;width:100%;min-height:50px;font-size:15px}
 body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
 a,button,summary{scroll-margin-bottom:110px}
 .mobile-nav a:last-child{border-bottom:0}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*:before,*:after{animation:none!important;transition:none!important}
 .service:hover,.button:hover{transform:none}
}
@media print{
 .header,.mobile-contact,.mobile-nav{display:none!important}
 .process-intro{position:static!important}
 body{padding-bottom:0}
}
.skip{z-index:50}
.details-enhanced:not(.is-expanded) summary>span{transform:rotate(0deg)}
.button.dark:active{background:#454545;color:var(--yellow)}

/* Quiet section signatures; the light passes once as each section arrives. */
.home-page .section>.section-label{align-items:center;flex-wrap:wrap;gap:12px 20px}
.home-page .section-caption{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;margin-left:auto;padding:7px 13px;border-radius:7px;background:rgba(255,222,89,.22);color:var(--ink);font-family:'Noto Sans KR',sans-serif;font-size:13px;font-weight:700;line-height:1.6;letter-spacing:-.02em;white-space:nowrap}
.section-caption-text{position:relative;z-index:1}
.home-page .process .section-caption{color:#ffe88c;background:rgba(255,222,89,.12)}
.home-page .contact .section-caption{background:rgba(255,255,255,.38)}
.section-caption:before{content:"";position:absolute;z-index:0;inset:-35% auto -35% 0;width:48%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-180%) skewX(-18deg);pointer-events:none}
.motion-ready .section-caption.is-shining:before{animation:onekey-caption-light 1.7s .15s cubic-bezier(.22,1,.36,1) both}
@keyframes onekey-caption-light{from{transform:translateX(-180%) skewX(-18deg)}to{transform:translateX(340%) skewX(-18deg)}}
@media(max-width:600px){.home-page .section-caption{padding:6px 10px;font-size:12px}.home-page .section>.section-label{gap:10px 12px}}