/* Tokens, reset, typography helpers, focus and reveal. Every page.
   Source of values: docs/design-concept-main.md section 10 */

/* Local fonts (assets/fonts). Pretendard (official KS X 1001 subset: 2,350 Hangul syllables + Latin, about 270KB a weight) for Korean text, Sora (latin) for English and numbers. Only the weights in use. */
@font-face{font-family:"Pretendard";font-weight:300;font-style:normal;font-display:swap;src:url("../fonts/Pretendard-Light.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/Pretendard-Regular.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/Pretendard-Medium.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/Pretendard-SemiBold.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/Pretendard-Bold.subset.woff2") format("woff2")}
@font-face{font-family:"Sora";font-weight:300;font-style:normal;font-display:swap;src:url("../fonts/Sora-Light.woff2") format("woff2")}
@font-face{font-family:"Sora";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/Sora-Regular.woff2") format("woff2")}
@font-face{font-family:"Sora";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/Sora-Medium.woff2") format("woff2")}
@font-face{font-family:"Sora";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/Sora-SemiBold.woff2") format("woff2")}

:root{
  --night:#03121A;
  --deep:#00374C;
  --teal:#007698;
  --lime:#8FC31F;
  --mist:#F2F5F6;
  --ink:#0B1F29;
  --ink-2:#40525B;
  --line:#D9E1E5;
  --line-soft:#EDF1F3;
  --track:#C9D3D8;
  --chip-bg:#E3F1F5;
  --chip-ink:#00607C;
  --error:#C23B31;
  --gutter:clamp(16px, 8.34vw, 160px);
  --shadow:0 18px 40px rgba(11,31,41,.06);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
/* No pinch or double-tap zoom on touch screens (scrolling only); the viewport meta and common.js cover browsers that ignore this */
html{scroll-behavior:smooth;scroll-padding-top:var(--subnav-h,120px);touch-action:pan-x pan-y}
body{margin:0;font-family:Pretendard,"Apple SD Gothic Neo",sans-serif;background:#ffffff;color:var(--ink);-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--deep)}
button{font-family:inherit;cursor:pointer}
input,textarea{font-family:inherit}
img{display:block;max-width:100%}
.sora{font-family:Sora,sans-serif}
.inner{max-width:1600px;margin:0 auto}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

.reveal .h2{clip-path:inset(0 0 100% 0);transform:translateY(28px);transition:clip-path 1.1s var(--ease) .1s,transform 1.1s var(--ease) .1s}

.reveal.in .h2{clip-path:inset(-20% -5% -20% -5%);transform:none}
/* Phones: shorter, quicker fades (common.js also starts them just before the screen edge) */
@media (max-width:720px){
  .reveal{transform:translateY(16px);transition-duration:.5s}
  .reveal .h2{transition-duration:.6s;transition-delay:0s}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal .h2{opacity:1;transform:none;clip-path:none;transition:none}
  html{scroll-behavior:auto}
}
@media (max-width:720px){
  :root{--subnav-compact:51px;--hd-h:72px}
}