/* ============================================================
   JSINI 소개 사이트

   원본: fronts/apps/jsini-site (Tailwind).

   [Tailwind 를 가져오지 않은 이유]

   Tailwind 는 빌드 단계에서 클래스를 훑어 CSS 를 만들어 낸다. 이 앱에
   가져오면 .NET 빌드 옆에 node 빌드가 하나 더 붙고, 배포와 CI 가 그 둘을
   모두 챙겨야 한다 — Vue 를 걷어내는 것이 이 이관의 목적인데 도구 사슬만
   남기는 꼴이 된다.

   대신 원본이 쓰던 유틸리티를 **이름 있는 클래스**로 옮겨 적었다. 화면이
   일곱이라 유틸리티의 이점(조합의 자유)보다 이름의 이점(무엇인지 읽힌다)이
   크다.

   값은 `docs/brand/README.md` 2절이 정한다 — 여기서 새로 만들지 않는다.
   ============================================================ */

/* ── 글꼴 ────────────────────────────────────────────────────
   저장소 안의 파일만 쓴다. 넷 중 둘만 가져왔다 — 하나에 350KB 라 전부
   넣으면 첫 화면이 느려지고, 이 사이트가 쓰는 무게는 본문(300)과
   제목(700) 둘뿐이다. 이용 조건은 fonts/README.md 에 있다. */

@font-face {
  font-family: 'S-CoreDream';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/S-CoreDream-3Light.woff') format('woff');
}

@font-face {
  font-family: 'S-CoreDream';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/S-CoreDream-6Bold.woff') format('woff');
}

@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Play-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}

@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Play-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}

/* ── 브랜드 토큰 ─────────────────────────────────────────────
   액센트 색은 두지 않는다. 강조는 색이 아니라 대비로 낸다. */

:root {
  --ink: #0a0a0a;
  --graphite: #1c1c1e;
  --steel: #6e6e73;
  --mist: #d2d2d7;
  --paper: #ffffff;

  --font-sans: 'S-CoreDream', 'Play', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── 바탕 ────────────────────────────────────────────────────

   스크롤바를 감춘다. **스크롤 자체는 그대로 둔다.**

   이 사이트는 스크롤이 서술 수단이라 페이지가 길다. 그런데 오른쪽에 늘 떠
   있는 회색 막대가 무채색 화면에서 유일하게 튀는 요소였다.

   `overflow: hidden` 을 쓰지 않는다. 그것은 스크롤바가 아니라 스크롤을
   없앤다 — 휠도 키보드(Page Down · Space · 방향키)도 같이 죽는다.
   아래 세 줄은 **막대를 그리지 말라**고만 할 뿐이다.

   곁들여 얻는 것 — 짧은 페이지와 긴 페이지 사이에서 막대 너비(약 15px)만큼
   내용이 좌우로 튀던 것이 사라진다.
   잃는 것 — "아래에 더 있다" 는 신호. 각 화면의 첫 덩어리를 화면 높이보다
   조금 넘치게 잡아 그 자리를 대신한다. */

* {
  box-sizing: border-box;

  /* 브랜드가 각진 스타일이라 둥근 모서리를 쓰지 않는다. 각도는 0 · 45 · 90 만 쓴다. */
  border-radius: 0 !important;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: none; /* 파이어폭스 */
  -ms-overflow-style: none; /* 옛 엣지 · IE */
}

html::-webkit-scrollbar {
  display: none; /* 크롬 · 사파리 · 엣지 */
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── 글자 ────────────────────────────────────────────────────
   제목은 굵게 + 트래킹을 좁힌다. 워드마크(트래킹 +12%)와 반대로 가서
   로고와 본문 제목이 서로를 흉내내지 않게 한다. */

.h-display {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-4xl { font-size: 2.25rem; }
.text-sm { font-size: 0.875rem; }

.muted { color: var(--steel); }

.body-copy { color: var(--graphite); line-height: 1.7; }
.body-copy--loose { line-height: 2; }

.rich-p { margin: 0; white-space: pre-line; }

.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }

.inline-block { display: inline-block; }

/* 상승 조각과 같은 각도(사선 22 : 높이 100). 구분선·강조에 반복한다. */
.shard-rule {
  height: 1px;
  background: var(--mist);
}

.shard-rule--short {
  width: 2.5rem;
  background: var(--ink);
  margin-bottom: 1.5rem;
}

/* 요약을 몇 줄에서 자를지. 제목 길이가 제각각이라 카드 높이가 들쭉날쭉해진다. */
.clamp-2,
.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* ── 뼈대 ────────────────────────────────────────────────── */

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.site__main { flex: 1; }

.wrap {
  margin: 0 auto;
  max-width: 72rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.wrap--narrow { max-width: 48rem; }
.wrap--mid { max-width: 56rem; }
.wrap--form { max-width: 42rem; }

.section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.section--ruled { border-top: 1px solid var(--mist); }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.page-head {
  border-bottom: 1px solid var(--mist);
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.page-head__lead {
  margin-top: 1.5rem;
  max-width: 36rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--steel);
}

/* ── 머리글 ────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--mist);
  background: rgb(255 255 255 / 95%);
  backdrop-filter: blur(8px);
}

.site-header__bar {
  display: flex;
  height: 3.5rem;
  align-items: center;
  justify-content: space-between;
}

.site-header__brand { display: flex; align-items: center; }

.site-header__nav {
  display: none;
  align-items: center;
  gap: 2rem;
}

.site-header__link {
  font-size: 0.875rem;
  color: var(--steel);
  transition: color 0.2s;
}

.site-header__link:hover,
.site-header__link.active { color: var(--ink); }

.site-header__lang {
  border: 1px solid var(--mist);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: var(--steel);
  transition: color 0.2s, border-color 0.2s;
}

.site-header__lang:hover { border-color: var(--ink); color: var(--ink); }

/* 모바일 차림표. <details> 라 자바스크립트가 필요 없다. */
.site-header__mobile { position: relative; }

.site-header__toggle {
  display: flex;
  width: 2rem;
  height: 2rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  cursor: pointer;
  list-style: none;
}

.site-header__toggle::-webkit-details-marker { display: none; }

.site-header__toggle span {
  height: 1px;
  width: 1.25rem;
  background: var(--ink);
}

.site-header__drawer {
  position: absolute;
  right: -1.5rem;
  top: 2.25rem;
  width: 100vw;
  border-top: 1px solid var(--mist);
  background: var(--paper);
}

.site-header__drawer-link {
  display: block;
  border-bottom: 1px solid var(--mist);
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  color: var(--steel);
}

@media (width >= 768px) {
  .site-header__nav { display: flex; }
  .site-header__mobile { display: none; }
}

/* ── 바닥글 ────────────────────────────────────────────────── */

.site-footer {
  background: var(--ink);
  color: var(--mist);
}

.site-footer__inner {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.site-footer__cols {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.site-footer__lead {
  margin-top: 1.25rem;
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--steel);
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.site-footer__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--steel);
}

.site-footer__contact a:hover { color: var(--paper); }
.site-footer__portal { color: var(--steel); }

.site-footer__rights {
  margin-top: 3rem;
  border-top: 1px solid var(--graphite);
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--steel);
}

@media (width >= 768px) {
  .site-footer__cols {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

/* ── 단추 ────────────────────────────────────────────────── */

.btn-outline-light,
.btn-outline-dark {
  display: inline-block;
  border: 1px solid;
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: inherit;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

/* 어두운 바탕 위 */
.btn-outline-light {
  margin-top: 2.5rem;
  border-color: var(--paper);
  background: transparent;
  color: var(--paper);
  padding: 0.75rem 1.75rem;
}

.btn-outline-light:hover { background: var(--paper); color: var(--ink); }

/* 밝은 바탕 위 */
.btn-outline-dark {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
  padding: 0.5rem 1.25rem;
  font-size: 0.75rem;
}

.btn-outline-dark:hover { background: var(--ink); color: var(--paper); }

.btn-outline-dark--lg { padding: 0.75rem 2rem; font-size: 0.875rem; }

.link-quiet {
  font-size: 0.875rem;
  color: var(--steel);
  transition: color 0.2s;
}

.link-quiet:hover { color: var(--ink); }

/* ── 첫 화면 ────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

.hero__grid {
  display: grid;
  align-items: center;
  gap: 2.5rem;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.hero__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--steel);
}

.hero__headline {
  margin-top: 1.5rem;
  white-space: pre-line;
  font-size: 2.25rem;
}

.hero__lead {
  margin-top: 1.75rem;
  max-width: 28rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--mist);
}

.hero__motion { height: 14rem; }
.hero__motion canvas { width: 100%; height: 100%; display: block; }

@media (width >= 768px) {
  .hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .hero__headline { font-size: 3rem; }
  .hero__motion { height: 20rem; }
}

/* ── 카드 ────────────────────────────────────────────────── */

.cards-3 {
  display: grid;
  gap: 3.5rem;
}

.cards-news {
  display: grid;
  gap: 3rem;
}

@media (width >= 768px) {
  .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width >= 1024px) {
  .cards-news { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.post-card { display: block; }

.post-card__cover {
  margin-bottom: 1.25rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--mist);
}

.post-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.post-card:hover .post-card__cover img { transform: scale(1.05); }

.post-card__date { font-size: 0.75rem; color: var(--steel); }

.post-card__title {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  transition: color 0.2s;
}

.post-card:hover .post-card__title { color: var(--steel); }

.post-card__summary {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--steel);
}

/* ── 뉴스 상세 ────────────────────────────────────────────── */

.post-detail__date {
  display: block;
  margin-top: 2.5rem;
  font-size: 0.75rem;
  color: var(--steel);
}

.post-detail__title { margin-top: 0.75rem; font-size: 1.875rem; }

.post-detail__cover {
  margin-top: 2.5rem;
  overflow: hidden;
  background: var(--mist);
}

.post-detail__cover img { width: 100%; object-fit: cover; }

/* ── 구축 사례 ────────────────────────────────────────────── */

.work-row {
  display: grid;
  gap: 1.5rem;
  border-top: 1px solid var(--mist);
  padding: 3rem 0;
}

.work-row:first-of-type { border-top: 0; padding-top: 0; }

.work-row__no {
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: var(--steel);
}

.work-row__field {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--steel);
}

.work-row__title { margin-top: 0.75rem; font-size: 1.5rem; }
.work-row__body { max-width: 42rem; }

@media (width >= 768px) {
  .work-row { grid-template-columns: 6rem 1fr; gap: 2.5rem; }
}

.work-figure { margin: 2.5rem 0 0; }

.work-figure__note {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: var(--steel);
}

.work-shot img { width: 100%; border: 1px solid var(--mist); }

/*
  화면 그림을 살짝 비스듬히 눕힌다.

  **각도를 아무렇게나 고르지 않았다.** 브랜드 모티프 '상승 조각' 의 기울기가
  22:100(약 12.4°)인데, 1200px 짜리 가로 그림에 그대로 주면 한쪽 끝이 264px
  들려서 글자를 못 읽는다. 그래서 **같은 방향으로 4:100(약 2.3°)** 만 준다.

  브랜드 규칙 5절이 금지하는 '기울이기' 는 로고 · 심볼 · 워드마크에 대한
  것이라 화면 그림에는 걸리지 않는다. 다만 같은 절이 금지하는 그림자 ·
  그라디언트는 여기서도 쓰지 않는다 — 홍보 사이트가 흔히 얹는 것이지만
  이 브랜드는 평면이다.

  좁은 화면에서는 눕히지 않는다. 폭이 좁을수록 기울기가 잡아먹는 세로 공간의
  비중이 커지고, 손에 들고 보는 화면에서 비뚤어진 표는 읽기 나쁘다.
*/
@media (width >= 768px) {
  .work-shot { transform: skewY(-2.3deg); }
}

.work-cta {
  border-top: 1px solid var(--mist);
  background: var(--ink);
  color: var(--paper);
}

.work-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.work-cta__lead {
  margin: 0;
  max-width: 28rem;
  font-size: 1.25rem;
  white-space: pre-line;
}

/* CTA 안에서는 단추의 위 여백이 필요 없다 — 가로로 나란히 놓이기 때문이다. */
.work-cta__inner .btn-outline-light { margin-top: 0; flex-shrink: 0; align-self: flex-start; }

@media (width >= 768px) {
  .work-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ── 자료실 ────────────────────────────────────────────────── */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.chip {
  border: 1px solid var(--mist);
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: var(--steel);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.chip:hover { border-color: var(--ink); color: var(--ink); }

.chip--on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.dl-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
}

.dl-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 0;
}

.dl-item + .dl-item { border-top: 1px solid var(--mist); }

.dl-item__body { min-width: 0; flex: 1; }

.dl-item__title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 700;
}

.dl-item__desc {
  margin: 0.25rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--steel);
}

.dl-item__meta {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--mist);
}

.dl-item .btn-outline-dark { flex-shrink: 0; }

/* ── 문의 폼 ────────────────────────────────────────────── */

.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form__grid {
  display: grid;
  gap: 1.5rem;
}

@media (width >= 640px) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--steel);
  margin: 0;
}

.field__optional {
  text-transform: none;
  letter-spacing: normal;
  color: var(--mist);
}

.field input,
.field textarea {
  border: 1px solid var(--mist);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  background: var(--paper);
  outline: none;
}

.field input:focus,
.field textarea:focus { border-color: var(--ink); }

.field textarea { resize: vertical; }

/*
  허니팟. `display: none` 을 쓰지 않는다 — 요즘 봇은 그것을 보고 건너뛴다.
  화면 밖으로 밀어 두기만 한다.
*/
.honeypot {
  position: absolute;
  left: -9999px;
  top: 0;
}

.consent { border: 1px solid var(--mist); padding: 1.5rem; }

.consent__body {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--graphite);
}

.consent__check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
}

.consent__check input {
  margin-top: 0.15rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--ink);
}

.form__error {
  margin: 0;
  font-size: 0.875rem;
  color: var(--graphite);
}

.done-box { border: 1px solid var(--ink); padding: 2rem; }
.done-box__text { margin: 0; font-size: 0.875rem; line-height: 1.7; }
.done-box__mail { display: inline-block; margin-top: 2rem; }

/* ── 움직임을 원하지 않는 사람에게 ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* 기운 그림도 되돌린다 — 어지럼의 원인이 된다. */
  .work-shot { transform: none; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}