/* 리옵스 사이트의 공통 바탕입니다.

   본사(base.css)와 채용(careers.css)이 글자까지 똑같이 들고 있던 규칙만
   모았습니다. 두 사이트가 한 벌씩 따로 들고 있던 탓에 한쪽만 고치면 다른
   쪽이 조용히 뒤처졌습니다. 실제로 모바일 타이포를 고칠 때 채용이 빠졌습니다.

   두 껍데기 모두 이 파일을 먼저 읽고, 그다음 제 파일을 읽습니다. 그래서
   여기 있는 값은 언제든 각자의 파일에서 덮을 수 있습니다.

   여기에 두는 것 — 두 사이트에서 같아야 하는 것. 리셋, 타입 스케일, 밴드,
   상단 막대와 서랍의 뼈대, 푸터, 로고, 나타나며 올라오기.
   여기에 두지 않는 것 — 한쪽이 일부러 다르게 둔 것. 색 토큰(:root), 제목
   행간, 섹션 여백, 히어로 정렬, 단추 색이 그렇습니다. 각자의 파일에 있습니다.

   값을 고칠 때에는 두 사이트에 함께 반영된다는 것을 생각하십시오.
   한쪽에만 필요한 값이면 이 파일이 아니라 그쪽 파일에 적습니다. */

/* ── 리셋 ────────────────────────────────────────────────── */
*{box-sizing:border-box}
p{margin:0}
html{scroll-behavior:smooth}
html,body{overscroll-behavior-y:none}
/* 앵커로 건너뛸 때 고정된 상단 막대에 제목이 가리지 않게 합니다. */
[id]{scroll-margin-top:calc(var(--chrome-h) + 24px)}

/* ── 타입 스케일 ───────────────────────────────────────────
   서체는 화면의 언어가 아니라 그 자리에 적힌 글의 언어를 따릅니다.
   site.js·careers.js 의 markLang() 이 문장 단위로 data-t 를 붙입니다. */
[data-t="en"]{font-family:var(--font-en)}
h1,h2,h3{text-wrap:balance}
.display-xl{font-size:clamp(32px, 20.4px + 3.09vw, 56px);font-weight:700;line-height:1.2}
.display-lg{font-size:clamp(26px, 19.2px + 1.80vw, 40px);font-weight:700;line-height:1}
.display-md{font-size:clamp(22px, 17.2px + 1.29vw, 32px);font-weight:700;line-height:1}
.subtitle{font-size:19.2px;font-weight:600;line-height:1.3}
.body-sm{font-size:14px;line-height:1.57}
.caption{font-size:12px;line-height:1.4}

/* ── 밴드 ────────────────────────────────────────────────
   흰 바탕·회색 바탕·검정을 번갈아 써서 섹션 사이의 위계를 만듭니다. */
.band{padding:var(--s-section) 64px}
.band.light{background:var(--canvas)}
.band.soft{background:var(--surface-soft)}
.band.dark{background:var(--surface-dark);color:var(--on-dark)}
.band.dark h1,.band.dark h2,.band.dark h3{color:var(--on-dark)}
.inner{max-width:1152px;margin:0 auto}
.page{display:block}

/* ── 단추와 더 보기 ──────────────────────────────────────── */
.btns{display:flex;flex-wrap:wrap;gap:var(--s-sm)}
.btn-outline-light:hover{background:var(--on-dark);color:var(--ink)}
.more:hover{opacity:.6}

/* ── 상단 막대의 뼈대 ─────────────────────────────────────
   바탕과 자리(fixed·sticky)는 두 사이트가 다르게 두어 각자의 파일에 있습니다. */
.nav>*{flex:0 0 auto}
.nav ul{display:flex;gap:var(--s-lg);list-style:none;margin:0;padding:0}
.nav li a{color:var(--mute);transition:color .15s}
.nav li a:hover{color:var(--ink)}
.nav li.on a{color:var(--ink)}
.nav.on-dark li a{color:rgba(255,255,255,.66)}
.nav.on-dark .burger{border-color:rgba(255,255,255,.45)}

/* ── 햄버거와 서랍 ───────────────────────────────────────── */
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.drawer.open{display:block}
.drawer a{display:flex;align-items:center;min-height:56px;font-size:19px;font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--hairline)}
.drawer a.on{text-decoration:underline;text-underline-offset:5px}

/* ── 마무리 제안 ─────────────────────────────────────────── */
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-lg)}

/* ── 푸터 ───────────────────────────────────────────────
   칸을 어떻게 나누는지(.foot .in)는 두 사이트가 다릅니다. */
.foot{background:var(--surface-dark);color:var(--on-dark);padding:64px}
.foot .finfo{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.foot .finfo a{font-size:14px;font-weight:700;line-height:1.5;color:var(--on-dark-mute);
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.foot .finfo a:hover{color:var(--on-dark);border-bottom-color:var(--on-dark)}
.foot .fmap a:hover{color:var(--on-dark)}
.foot .faddr{max-width:1152px;margin:var(--s-xxxl) auto 0}
.foot .faddr .lab{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--on-dark-mute);opacity:.66;margin-bottom:var(--s-sm)}
.foot .faddr .a{display:flex;flex-direction:column;gap:1px}
.foot .faddr .a b{font-size:14px;font-weight:700;line-height:1.4;color:var(--on-dark)}
.foot .faddr .a span{font-size:13px;line-height:1.55;color:var(--on-dark-mute)}
.foot .cp{max-width:1152px;margin:var(--s-xl) auto 0;padding-top:var(--s-md);border-top:1px solid var(--divider-dark);
  font-size:12px;color:rgba(255,255,255,.5);display:flex;flex-wrap:wrap;gap:var(--s-md);justify-content:space-between}
/* 개인정보처리방침과 이용약관. 저작권 줄 옆이라 작고 흐리게 두되, 누를 수 있다는
   것이 보여야 하므로 밑줄을 답니다. */
.foot .cp a{border-bottom:1px solid rgba(255,255,255,.28);transition:color .15s,border-color .15s}
.foot .cp a:hover{color:var(--on-dark);border-bottom-color:var(--on-dark)}

/* ── 로고 ───────────────────────────────────────────────
   그림을 문서에 넣지 않고 mask 로 얹어 색을 currentColor 로 받습니다.
   흰 바탕과 검은 바탕에서 한 벌로 쓰기 위해서입니다.
   심볼과 로고타입은 반드시 같은 높이로 놓습니다. 둘 다 120 단위 높이를
   꽉 채우도록 그려져 있어 같은 높이일 때 위아래가 맞물립니다. */
.lgm,.lgw{display:block;background-color:currentColor;flex:0 0 auto;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.lgm{-webkit-mask-image:url(/media/brand/mark.svg?v=558ede7a);mask-image:url(/media/brand/mark.svg?v=558ede7a)}
.lgw{-webkit-mask-image:url(/media/brand/wordmark.svg?v=bc60dff6);mask-image:url(/media/brand/wordmark.svg?v=bc60dff6)}
.nav .mark .lgm{width:12.5px;height:18px}
.nav .mark .lgw{width:76px;height:18px}
.foot .brand .lgm{width:14px;height:20px}
.foot .brand .lgw{width:85px;height:20px}
.nav.on-dark .mark{color:var(--on-dark)}

/* ── 화면에 들어오며 나타나기 ─────────────────────────────── */
/* 나타나는 움직임. 자바스크립트가 화면 밖에 있는 덩어리에만 이 표시를 붙이므로,
   표시가 붙지 않은 것은 처음부터 그대로 보입니다. */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}

/* ── 반응형 ───────────────────────────────────────────── */
@media(max-width:900px){
  .foot{padding:40px 24px}
}
/* 상단 막대는 767px 아래에서 햄버거로 바뀝니다. */
@media(max-width:767px){
  .nav ul{display:none}
}
@media(min-width:768px){
  .drawer{display:none!important}
}
@media(max-width:600px){
  .nav .mark .lgm{width:10.5px;height:15px}
  .nav .mark .lgw{width:63.5px;height:15px}
}

/* ── 움직임을 줄이도록 설정한 분에게 ──────────────────────── */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none;transition:none}
}

/* ── 화면 끝 제안 밴드의 배경 영상 ──────────────────────────
   홈·솔루션·기술 개요와 기술 상세 셋, 채용으로 잇는 회사 소개까지 국문과
   영문 열네 자리가 같은 규칙을 씁니다. 화면마다 이름 공간을 나누지 않은 것은
   열네 곳이 한 벌로 움직여야 하기 때문입니다.
   첫 화면과 같은 짜임입니다. 영상을 깔고 60% 어둠막을 덮은 뒤 글을 올립니다.
   막이 없으면 파란 선이 밝게 지나갈 때 흰 글씨가 묻힙니다. */
.band.ctav{position:relative;overflow:hidden}
.ctav .hbg{position:absolute;inset:0;z-index:0}
.ctav .hbg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}
.ctav .inner{position:relative;z-index:1}
/* 영상이 도착하기 전까지는 밴드 본디 색인 검정이 그대로 보입니다. */
.ctav .hbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(prefers-reduced-motion:reduce){.ctav .hbg::after{background:rgba(0,0,0,.66)}}