@charset "utf-8";

/* ==================================================================
 * template.css - Reset & Design Token
 * Visual Concept : Trust & Clarity / Modern Professionalism
 * ================================================================== */

:root {
    /* Color - Brand */
    --c-primary:      #0E4C63;   /* 딥 틸블루 : 신뢰 */
    --c-primary-dark: #08303F;
    --c-accent:       #1fc9ff;   /* WEsdom 스카이 : 연결 */
    --c-accent-soft:  #D9F0F7;

    /* Color - Neutral */
    --c-ink:    #171E24;
    --c-body:   #3D4954;
    --c-sub:    #6C7885;
    --c-line:   #E2E8ED;
    --c-bg:     #FFFFFF;
    --c-bg-soft:#F4F8FA;

    /* Layout */
    --container: 1400px;
    --gutter: 24px;
    --radius: 16px;
    --radius-sm: 10px;

    /* Effect */
    --shadow-sm: 0 2px 10px rgba(14, 76, 99, .06);
    --shadow-md: 0 12px 36px rgba(14, 76, 99, .10);

    /* Motion */
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    line-height: 1.2;
    color: var(--c-body);
    background: var(--c-bg);
    letter-spacing: -.0rem;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    font-family:"Paperlogy","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
@media (min-width: 991px) {
  html,
  body {
    font-size: 17px;
  }
}

@media (min-width: 1480px) {
  html,
  body {
    font-size: 18px;
  }
}

@media (max-width: 400px) {
  html,
  body {
    font-size: 15px;
  }
}
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; height: auto; display: block; border: 0; }

button {
    margin: 0; padding: 0; border: 0;
    font: inherit; color: inherit;
    background: none; cursor: pointer;
}

em, address { font-style: normal; }
b, strong { font-weight: 700; }

/* ---------- Layout Helper ---------- */
.container-xxl {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip-nav {
    position: absolute; left: 0; top: -100px;
    z-index: 999;
    padding: 12px 20px;
    color: #fff; background: var(--c-primary);
    transition: top .2s var(--ease);
}
.skip-nav:focus { top: 0; }

.blind {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Section Head ---------- */
.sec-head { margin-bottom: 48px; text-align: center; }

.sec-head__en {
    font-family: var(--font-en);
    font-size: 13px; font-weight: 700;
    letter-spacing: .18em;
    color: var(--c-accent);
    margin-bottom: 10px;
}
.sec-head__ko {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    line-height: 1.3;
    color: var(--c-ink);
    letter-spacing: -.035em;
}
.sec-head__desc { margin-top: 14px; color: var(--c-sub); }

.sec-head--light .sec-head__ko { color: #fff; }
.sec-head--light .sec-head__en { color: var(--c-accent); }

/* ---------- Button ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 54px;
    padding: 0 32px;
    border-radius: 999px;
    font-size: 16px; font-weight: 700;
    transition: all .25s var(--ease);
}
.btn--primary { color: #fff; background: var(--c-primary); }
.btn--primary:hover { background: var(--c-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn--line { color: var(--c-primary); background: #fff; box-shadow: inset 0 0 0 1.5px var(--c-line); }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--c-primary); transform: translateY(-2px); }

/* ---------- Reveal (스크롤 등장) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}