@import url("/ds-tokens.css");
/* ds-lint-ignore-file: 토큰(/ds-tokens.css)을 못 불러와도 읽히게 모든 값에 기본 HEX 를 둔다. 의도한 예외.
   정적 안내 페이지(400·404·406·422·500) 공용. 앱 레이아웃 없이 열리므로 토큰(/ds-tokens.css, install.sh 가 복사)을 직접 불러온다.
   토큰을 못 불러와도 읽히게 모든 값에 기본값을 둔다. 로고 마크업은 shared/_brand 와 같아 다크 모드에서 저절로 뒤집힌다.
   이 파일과 같은 폴더의 *.html 은 키트(design-kit/rails/public)에서 왔다. 문구는 서비스에 맞게 고쳐도 된다. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas,#fff);color:var(--ink,#171d26);font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
main{max-width:600px;margin:0 auto;padding:clamp(48px,14vh,160px) var(--s-24,24px) var(--s-48,48px)}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink,#171d26);text-decoration:none;margin-bottom:var(--s-48,48px)}
.brand__symbol{display:block;flex:none;width:auto;height:36px}
.brand__word{display:block;flex:none;height:26px;aspect-ratio:1392 / 356;translate:0 1px;
  background:linear-gradient(178deg,var(--brand-word-1,#0038A9) 0%,var(--brand-word-2,#021747) 58%);
  -webkit-mask:url(/brand/rr-wordmark.svg) center / contain no-repeat;mask:url(/brand/rr-wordmark.svg) center / contain no-repeat}
@media (prefers-color-scheme:dark){.brand__word{background:linear-gradient(178deg,var(--brand-word-1,#FFFFFF) 0%,var(--brand-word-2,#C9D8FF) 58%)}}
.code{display:block;font-size:var(--t-body-sm,15px);font-weight:600;color:var(--accent-text,#2f60da);margin:0 0 var(--s-12,12px);font-variant-numeric:tabular-nums}
h1{font-size:clamp(26px,5vw,34px);line-height:1.35;letter-spacing:-.02em;font-weight:700;margin:0 0 var(--s-16,16px);text-wrap:balance}
p{font-size:17px;line-height:1.7;color:var(--ink-muted,#565e69);margin:0 0 var(--s-32,32px);text-wrap:pretty}
.steps{list-style:none;margin:0 0 var(--s-32,32px);padding:0;display:grid;gap:var(--s-12,12px)}
.steps li{padding:var(--s-16,16px) var(--s-20,20px);border-radius:var(--r-lg,16px);background:var(--canvas-alt,#f9fafb);color:var(--ink-body,#3f4752);font-size:15px;line-height:1.6}
.steps strong{display:block;color:var(--ink,#171d26);font-size:16px;margin-bottom:4px}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-8,8px)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--s-24,24px);border-radius:var(--r-lg,14px);
  background:var(--accent,#396deb);color:var(--accent-ink,#fff);text-decoration:none;font-weight:600;font-size:16px;white-space:nowrap}
.button--quiet{background:var(--tint,rgba(17,26,56,.05));color:var(--ink,#171d26)}
@media (hover:hover){.button:hover{background:var(--accent-hover,#2f60da)}.button--quiet:hover{background:var(--tint-hover,rgba(17,26,56,.08))}}
a:focus-visible{outline:2px solid var(--focus,#487df7);outline-offset:3px;border-radius:var(--r-xs,6px)}
@media (max-width:480px){.actions .button{flex:1 1 100%}}