/* Shared visual language for the three preview service pages. */
body.page-service {
 --sf-page:#0b0b0b; --sf-surface:#1f1f1f; --sf-text:#fcfcfc; --sf-muted:#b5b5b5;
 --sf-sheen:rgba(255,255,255,.035); --sf-shade:rgba(0,0,0,.05);
 --sf-line:rgba(252,252,252,.14); --sf-glow:rgba(255,110,46,.075); --sf-hover:#292929;
 margin:0; background:var(--sf-page); color:var(--sf-text);
 font-family:'Google Sans Flex','Pretendard',sans-serif;
}
body.page-service.light-mode {
 --sf-page:#fcfcfc; --sf-surface:#f5f5f5; --sf-text:#0b0b0b; --sf-muted:#606066;
 --sf-sheen:rgba(255,255,255,.75); --sf-shade:rgba(120,126,134,.025);
 --sf-line:rgba(11,11,11,.12); --sf-glow:rgba(255,110,46,.08); --sf-hover:#eaeaea;
}
.page-service,.page-service *,.page-service *::before,.page-service *::after {box-sizing:border-box}
.page-service main {padding:156px 0 112px;min-height:100svh;color:var(--sf-text)}
.page-service :is(.services-guide-inner,.service-inner,.support-inner) {width:min(1240px,calc(100% - 96px));margin-inline:auto}
.page-service :is(.services-guide-hero,.service-hero,.support-hero) {text-align:center;margin-bottom:64px}
.page-service main h1 {margin:0;font-size:clamp(32px,4.2vw,60px);line-height:1.2}
.page-service :is(.services-guide-desc,.process-hero-desc,.support-hero-desc) {margin:20px auto 0;line-height:1.6;color:var(--sf-muted);text-wrap:pretty}
.page-service main :is(p,li) {word-break:keep-all;overflow-wrap:anywhere}
.page-service main a {text-decoration:none}
.page-service main button {font:inherit}
.page-service :is(.services-guide-tabs,.process-service-tags) {display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.page-service :is(.services-guide-tab,.process-service-tab) {
 display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 23px;
 border:0;border-radius:999px;background:var(--sf-surface);color:var(--sf-text);font-size:16px;font-weight:400;line-height:1.4;
 cursor:pointer;transition:background-color .25s,color .25s;
}
.page-service :is(.services-guide-tab,.process-service-tab):hover {background:var(--sf-hover)}
.page-service :is(.services-guide-tab,.process-service-tab).active {background:#ff6e2e;color:#fff}
.page-service main :is(a,button,summary):focus-visible {outline:2px solid #ff6e2e;outline-offset:5px}
.page-service :is(.service-card,.process-flow article,.support-grid article) {
 position:relative;border:0;border-radius:24px;
 background:radial-gradient(ellipse at 95% 0%,var(--sf-glow),transparent 60%),
 radial-gradient(ellipse at 15% 20%,var(--sf-sheen),transparent 68%),
 radial-gradient(ellipse at 60% 80%,var(--sf-shade),transparent 65%),var(--sf-surface);
 box-shadow:0 12px 32px rgba(0,0,0,.025);isolation:isolate;
}
.page-service :is(.services-guide-actions,.support-actions,.process-actions) {
 display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:min(1240px,calc(100% - 48px));margin:56px auto 0;
}
.page-service :is(.services-guide-actions,.support-actions,.process-actions) a {
 display:inline-flex;justify-content:center;align-items:center;gap:14px;min-height:48px;padding:14px 25px;
 border:1px solid var(--sf-line);border-radius:999px;color:var(--sf-text);font-size:16px;font-weight:500;line-height:1.4;
 transition:background-color .25s,border-color .25s,color .25s;
}
.page-service :is(.services-guide-actions,.support-actions,.process-actions) a:first-child {background:#ff6e2e;border-color:#ff6e2e;color:#fff}
.page-service :is(.services-guide-actions,.support-actions,.process-actions) a:hover {background:#ff6e2e;border-color:#ff6e2e;color:#fff}
.page-service :is(.services-guide-actions,.support-actions,.process-actions) a:first-child:hover {background:#ee6023;border-color:#ee6023}
.page-service .sf-arrow {width:22px;height:20px;flex:none;stroke:currentColor;transition:transform .25s}
.page-service a:hover>.sf-arrow {transform:translateX(3px)}
.page-service main .fade-in-up {opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.page-service main .fade-in-up.animate {opacity:1;transform:translateY(0)}
.page-service .sr-only {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-service #scroll-hint-overlay {z-index:40}
.page-service #scroll-hint-overlay::before {content:'';position:absolute;z-index:-1;pointer-events:none;bottom:-50px;left:50%;width:100vw;height:115px;transform:translateX(-50%);background:linear-gradient(transparent,var(--sf-page) 88%)}
@media(min-width:769px) {
 .page-service main .animate-delay-3 {transition-delay:.12s}
 .page-service main .animate-delay-4 {transition-delay:.2s}
 .page-service main .animate-delay-5 {transition-delay:.28s}
 .page-service main .animate-delay-6 {transition-delay:.36s}
}
@media(max-width:1100px) {
 .page-service :is(.services-guide-inner,.service-inner,.support-inner) {width:calc(100% - 64px)}
 .page-service main {padding-top:140px}
}
@media(max-width:600px) {
 .page-service main {padding:120px 0 96px}
 .page-service :is(.services-guide-inner,.service-inner,.support-inner) {width:calc(100% - 40px)}
 .page-service :is(.services-guide-hero,.service-hero,.support-hero) {margin-bottom:38px}
 .page-service :is(.services-guide-tabs,.process-service-tags) {gap:8px;margin-top:26px}
 .page-service :is(.services-guide-tab,.process-service-tab) {min-height:40px;padding:10px 15px;font-size:14px}
 .page-service :is(.service-card,.process-flow article,.support-grid article) {border-radius:20px}
 .page-service :is(.services-guide-actions,.support-actions,.process-actions) {margin-top:36px;gap:10px}
 .page-service :is(.services-guide-actions,.support-actions,.process-actions) a {font-size:14px;padding:12px 17px;gap:9px}
}
@media(prefers-reduced-motion:reduce) {
 .page-service main .fade-in-up {opacity:1;transform:none;transition:none!important}
 .page-service main * {scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

.page-service.service-actions-visible #scroll-hint-overlay {opacity:0!important;visibility:hidden!important}

/* Neutral glass paint shared with Identity / Core Business. */
body.page-service {
 --sf-frost:rgba(31,31,31,.9); --sf-light:rgba(255,255,255,.055);
 --sf-glass-shade:rgba(0,0,0,.08); --sf-glint:rgba(255,255,255,.075); --sf-cloud:rgba(0,0,0,.11);
 --sf-glass:
  radial-gradient(ellipse 44% 38% at 18% 24%,var(--sf-glint),transparent 80%),
  radial-gradient(ellipse 46% 40% at 49% 57%,var(--sf-cloud),transparent 80%),
  radial-gradient(ellipse 36% 46% at 77% 74%,var(--sf-glint),transparent 80%),
  radial-gradient(ellipse 32% 28% at 12% 88%,var(--sf-cloud),transparent 85%),
  radial-gradient(ellipse 85% 90% at 12% 10%,var(--sf-light),transparent 80%),
  radial-gradient(ellipse 70% 60% at 66% 78%,var(--sf-glass-shade),transparent 80%),var(--sf-frost);
}
body.page-service.light-mode {
 --sf-frost:rgba(245,245,245,.9); --sf-light:rgba(255,255,255,.4);
 --sf-glass-shade:rgba(120,126,134,.04); --sf-glint:rgba(255,255,255,.68); --sf-cloud:rgba(118,127,139,.065);
}

/* Matching service/support actions: the diagonal arrow follows its direction. */
.page-service :is(.services-guide-actions,.support-actions) a {gap:10px}
.page-service :is(.services-guide-actions,.support-actions) a:is(:hover,:focus-visible) > .sf-arrow {transform:translate(3px,-3px)}