@charset "utf-8";
/* ==========================================================================
   ContentRix — main.css   (메인 페이지 전용)
   ① 히어로  ② 퀵링크  ③ 회사소개 요약  ④ 강점
   ⑤ 포트폴리오 미리보기  ⑥ 고객사  ⑦ 커뮤니티
   ========================================================================== */

/* ==========================================================================
   ① 히어로 — 21:9 풀배경 슬라이더
   --------------------------------------------------------------------------
   비율은 화면 폭에 따라 낮아진다.  21:9 → 16:9 → 4:3 → 1:1
   모바일에서 21:9 를 유지하면 높이가 170px 밖에 안 나와 카피가 들어갈 수 없다.
   ========================================================================== */
.hero {
  position: relative;
  aspect-ratio: 21 / 9;
  background: var(--paper-ink);
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 1100px) { .hero { aspect-ratio: 16 / 9; } }
@media (max-width: 760px)  { .hero { aspect-ratio: 4 / 3; } }
@media (max-width: 460px)  { .hero { aspect-ratio: 1 / 1; } }

/* ── 슬라이드 ─────────────────────────────────────────────────────── */
.hero__item {
  /* 슬라이드별 발광색 — 배경 광원 · 일러스트 뒤 글로우 · 강조 글자에 함께 쓰임 */
  --hglow:  232, 119, 59;    /* 브랜드 오렌지 */
  --hglow2:  79, 179, 169;   /* 보조 : 틸 */
  --hbold: var(--o-300);     /* 헤드라인 강조색 */

  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--e-soft), visibility .9s;
}
.hero__item.is-on { opacity: 1; visibility: visible; }

/* Loomi 슬라이드 — 간판(#59AEA9) 색에 맞춘 청록 발광 */
.hero__item--teal {
  --hglow:   89, 174, 169;
  --hglow2: 232, 119, 59;
  --hbold: var(--t-300);
}

/* 배경 — 아주 느린 줌아웃(켄번즈) */
.hero__media {
  position: absolute;
  inset: 0;
  transform: scale(1.07);
  transition: transform 8s linear;
}
.hero__item.is-on .hero__media { transform: scale(1); }

/* 이미지 자리 안내를 우측 상단으로 — 좌측 카피와 겹치지 않게 */
.hero__media .ph {
  place-content: start end;
  justify-items: end;
  padding: clamp(18px, 2.4vw, 30px);
  text-align: right;
}

/* 가독성 베일 — 실제 사진이 들어와도 카피가 항상 읽히게 */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(12,15,20,.86) 0%, rgba(12,15,20,.62) 42%, rgba(12,15,20,.18) 78%),
    linear-gradient(to top, rgba(12,15,20,.5) 0%, transparent 46%);
}

/* 사진 대신 일러스트를 띄우는 슬라이드용 배경 */
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 95% at 74% 42%, rgba(var(--hglow),  .20), transparent 58%),
    radial-gradient(85%  85% at 18% 85%, rgba(var(--hglow2), .12), transparent 60%),
    var(--paper-ink);
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 11px);
}

/* --------------------------------------------------------------------------
   우측에 둥둥 떠 있는 일러스트
   · floatwrap = 본문 폭(--wrap) 기준 위치. 넓은 화면에서도 카피와 붙어 있게.
   · float     = 등장 모션      · img = 무한 상하 부유 (transform 충돌 회피)
   -------------------------------------------------------------------------- */
.hero__floatwrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  pointer-events: none;
}
.hero__float {
  position: absolute;
  right: -20px;              /* 본문 우측 끝에서 살짝만 넘치게 */
  top: 50%;
  width: min(58%, 720px);
  opacity: 0;
  transform: translate(46px, -50%);
  transition: opacity 1.1s var(--e-out) .3s, transform 1.3s var(--e-out) .3s;
  pointer-events: none;
}
.hero__item.is-on .hero__float { opacity: 1; transform: translate(0, -50%); }

.hero__float picture { display: block; }
.hero__float img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 34px 46px rgba(0, 0, 0, .55));
  animation: hfloat 7.5s ease-in-out infinite;
}
/* 순수 상하 부유 — 회전 없음 */
@keyframes hfloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-22px); }
}

/* 일러스트 뒤 은은한 광원 — 슬라이드 발광색을 따라간다 */
.hero__float::before {
  content: '';
  position: absolute;
  left: 8%; top: 12%;
  width: 84%; height: 76%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hglow), .26), transparent 68%);
  filter: blur(46px);
  z-index: -1;
}

/* 좁은 화면 — 카피 뒤로 물러나 배경처럼 깔린다.
   히어로 비율이 21:9 → 16:9 → 4:3 → 1:1 로 바뀌므로
   일러스트가 위아래로 잘리지 않게 폭과 위치를 단계별로 다시 잡는다. */
@media (max-width: 900px) {
  .hero__float {
    right: -2%;
    top: 40%;
    width: 55%;
    transform: translate(30px, -50%);
  }
  .hero__item.is-on .hero__float { opacity: .40; transform: translate(0, -50%); }
  .hero__float img { filter: none; animation-name: hfloat-sm; }
  .hero__float::before { display: none; }
}
@media (max-width: 760px) {
  .hero__float { top: 32%; width: 62%; right: -4%; }
  .hero__item.is-on .hero__float { opacity: .34; }
}
@media (max-width: 460px) {
  .hero__float { top: 30%; width: 72%; right: -6%; }
  .hero__item.is-on .hero__float { opacity: .30; }
}

/* 작은 화면에서는 부유 폭을 줄여 가장자리가 잘리지 않게 */
@keyframes hfloat-sm {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ── 카피 ─────────────────────────────────────────────────────────── */
.hero__copy {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  padding-bottom: clamp(48px, 7vw, 92px);
}
.hero__copy > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .85s var(--e-out), transform .85s var(--e-out);
}
.hero__item.is-on .hero__copy > *              { opacity: 1; transform: none; }
.hero__item.is-on .hero__copy > *:nth-child(1) { transition-delay: .16s; }
.hero__item.is-on .hero__copy > *:nth-child(2) { transition-delay: .28s; }
.hero__item.is-on .hero__copy > *:nth-child(3) { transition-delay: .40s; }
.hero__item.is-on .hero__copy > *:nth-child(4) { transition-delay: .52s; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}
.hero__eyebrow::before {
  content: '';
  width: clamp(24px, 3vw, 44px);
  height: 2px;
  background: var(--o-500);
}
.hero__t {
  margin: clamp(16px, 2vw, 24px) 0 clamp(14px, 1.6vw, 20px);
  font-size: clamp(1.65rem, 3.7vw, 3.35rem);
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: -.045em;
  color: #fff;
  text-wrap: balance;
}
.hero__t b { font-weight: 800; color: var(--hbold); }

/* 제품 버전 표기 — 제품명보다 한 단계 작게, 살짝 띄워서 */
.hero__ver {
  font-size: .58em;
  font-weight: 800;
  letter-spacing: -.01em;
  vertical-align: .22em;
  margin-left: -.06em;
}

.hero__d {
  max-width: 46ch;
  font-size: clamp(.875rem, 1.15vw, 1.0625rem);
  line-height: 1.78;
  letter-spacing: -.018em;
  color: rgba(255, 255, 255, .74);
}
/* 문장이 긴 슬라이드 — 글자 크기는 그대로 두고 폭만 넓혀 줄 수를 줄인다 */
.hero__d--wide { max-width: 62ch; }

.hero__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 2.4vw, 30px); }

@media (max-width: 620px) {
  .hero__d { display: none; }          /* 세로가 좁아지면 본문은 접는다 */
  .hero__copy { padding-bottom: clamp(60px, 14vw, 80px); }
}

/* ── 컨트롤 ───────────────────────────────────────────────────────── */
.hero__ui {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(16px, 2.4vw, 30px);
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--wrap);
  padding-inline: var(--gut);
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 22px);
}
.hero__count {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255,255,255,.48);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero__count b { color: #fff; font-size: 1rem; }

/* 자동 재생 진행 막대 — 눈금은 hero.js 가 매 프레임 직접 그린다.
   CSS 애니메이션을 쓰면 일시정지·탭 복귀 때 슬라이드 전환과 어긋난다. */
.hero__bar {
  position: relative;
  flex: 1 1 auto;
  max-width: 220px;
  height: 2px;
  background: rgba(255,255,255,.22);
  overflow: hidden;
}
.hero__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--o-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

.hero__btns { display: flex; gap: 6px; margin-left: auto; }
.hero__btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 50%;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .25s, border-color .25s, color .25s;
}
.hero__btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); color: #fff; }
.hero__btn svg { width: 15px; height: 15px; }
.hero__btn--prev svg { transform: rotate(180deg); }
.hero__btn--play .ic-pause { display: block; }
.hero__btn--play .ic-play  { display: none; }
.hero.is-paused .hero__btn--play .ic-pause { display: none; }
.hero.is-paused .hero__btn--play .ic-play  { display: block; }

@media (max-width: 620px) {
  .hero__btn { width: 36px; height: 36px; }
  .hero__bar { max-width: none; }
}

/* 모션 최소화 설정에서는 자동 재생·줌 모두 정지 */
@media (prefers-reduced-motion: reduce) {
  .hero__media { transform: none !important; }
  .hero__bar i { transform: scaleX(1); }
  .hero__float img { animation: none; }
}


/* ==========================================================================
   ② 퀵링크 밴드 — 히어로 바로 아래
   ========================================================================== */
.quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.qlink {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 16px);
  padding: clamp(20px, 2.4vw, 28px) clamp(16px, 1.8vw, 26px);
  background: #fff;
  transition: background .35s var(--e-out);
}
.qlink:hover { background: var(--paper-2); }

.qlink__ico {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--ql-bg, var(--o-50));
  color: var(--ql-c, var(--o-600));
  transition: transform .4s var(--e-out), background .35s;
}
.qlink:hover .qlink__ico { transform: translateY(-3px); }
.qlink__ico svg { width: 22px; height: 22px; }

.qlink__body { min-width: 0; }
.qlink__t {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--ink-900);
  transition: color .25s;
}
.qlink:hover .qlink__t { color: var(--ql-c, var(--o-600)); }
.qlink__d {
  display: block;
  margin-top: 6px;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.026em;
  color: var(--ink-500);
}

/* 마우스를 올리면 화살표 뒤에 컬러 원이 차오르고 화살표는 흰색이 된다 */
.qlink__go {
  margin-left: auto;
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-300);
  transition: background .38s var(--e-out),
              color .28s var(--e-out),
              transform .42s var(--e-out);
}
.qlink:hover .qlink__go {
  background: var(--ql-c, var(--o-600));
  color: #fff;
  transform: translateX(4px);
}
.qlink__go svg { width: 16px; height: 16px; }

/* 색은 순서가 아니라 성격에 맞춰 배정 —
   사업분야(주황) · 프로세스(틸) · 포트폴리오(골드) · 문의하기(잉크) */
.qlink:nth-child(1) { --ql-bg: var(--o-50);    --ql-c: var(--o-600); }
.qlink:nth-child(2) { --ql-bg: var(--t-50);    --ql-c: var(--t-700); }
.qlink:nth-child(3) { --ql-bg: var(--g-50);    --ql-c: var(--g-700); }
.qlink:nth-child(4) { --ql-bg: var(--paper-3); --ql-c: var(--ink-900); }

/* 1360px 이하에서는 4열이 좁아져 설명이 두 줄로 갈라진다.
   화살표를 접고 여백·아이콘을 줄여 네 칸 모두 한 줄을 유지시킨다. */
@media (max-width: 1360px) {
  .qlink { padding-inline: 16px; gap: 11px; }
  .qlink__ico { width: 44px; height: 44px; border-radius: 13px; }
  .qlink__ico svg { width: 20px; height: 20px; }
  .qlink__go { display: none; }
}
@media (max-width: 1080px) {
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qlink { padding-inline: clamp(18px, 2.4vw, 30px); }
  .qlink__go { display: grid; }          /* 2열이 되면 자리가 다시 생긴다 */
}
@media (max-width: 640px) { .qlink__go { display: none; } }
@media (max-width: 520px) {
  .quick { grid-template-columns: 1fr; }
  .qlink { padding-block: 18px; }
}


/* ==========================================================================
   ③ 회사소개 요약
   ========================================================================== */
.mabout__inner {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.mabout__media { position: relative; }
.mabout__badge {
  position: absolute;
  right: -14px; bottom: -18px;
  z-index: 2;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--ink-900);
  color: #fff;
  box-shadow: var(--sh-3);
}
.mabout__badge b {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
.mabout__badge span { display: block; margin-top: 6px; font-size: .75rem; color: rgba(255,255,255,.6); }

.mabout__title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.36;
  letter-spacing: -.042em;
  color: var(--ink-900);
  margin: 14px 0 20px;
}
.mabout__body p { font-size: .9375rem; line-height: 1.92; color: var(--ink-600); }
.mabout__body p + p { margin-top: 1.1em; }
.mabout__list {
  display: grid;
  gap: 10px;
  margin: 26px 0 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.mabout__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink-700);
}
.mabout__list svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--t-600); }

@media (max-width: 900px) { .mabout__inner { grid-template-columns: 1fr; } }


/* ==========================================================================
   ④ 강점 — 어두운 밴드
   (카드 자체(.whygrid / .why)는 sub.css, 여기서는 다크 배경용 색만 덮어쓴다)
   ========================================================================== */
.why-sec { background: var(--paper-ink); color: rgba(255,255,255,.62); }
.why-sec .shead__title { color: #fff; }
.why-sec .shead__desc { color: rgba(255,255,255,.56); }
.why-sec .shead__eyebrow { background: rgba(255,255,255,.08); color: var(--g-500); }
.why-sec .whygrid { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.12); }
.why-sec .why { background: var(--paper-ink); }
.why-sec .why:hover { background: #1A202A; }
.why-sec .why__t { color: #fff; }
.why-sec .why__d { color: rgba(255,255,255,.55); }
.why-sec .why:nth-child(1) { --wy-bg: rgba(232,119,59,.16); --wy-c: var(--o-300); }
.why-sec .why:nth-child(2) { --wy-bg: rgba(79,179,169,.16); --wy-c: var(--t-300); }
.why-sec .why:nth-child(3) { --wy-bg: rgba(244,175,95,.16); --wy-c: var(--g-300); }
.why-sec .why:nth-child(4) { --wy-bg: rgba(255,255,255,.09); --wy-c: rgba(255,255,255,.8); }


/* ==========================================================================
   ⑤ 포트폴리오 미리보기
   ========================================================================== */
.workgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.workcard { display: block; min-width: 0; }
.workcard__media {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.workcard:hover .workcard__media { transform: translateY(-5px); box-shadow: var(--sh-3); }
.workcard__cat {
  display: block;
  margin-top: 15px;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--o-600);
}
.workcard__t {
  display: block;
  margin-top: 7px;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.55;
  color: var(--ink-900);
  transition: color .25s;
}
.workcard:hover .workcard__t { color: var(--o-600); }
.workcard__meta { display: block; margin-top: 8px; font-size: .75rem; color: var(--ink-400); font-variant-numeric: tabular-nums; }


/* ==========================================================================
   ⑥ 고객사
   ========================================================================== */
.cli__band {
  margin-top: clamp(24px, 3.4vw, 40px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.cli__track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 84px);
  width: max-content;
  padding-block: 8px;
  animation: ticker 46s linear infinite;
}
.cli__band:hover .cli__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
/* 가로 200px 고정, 세로는 원본 비율대로 (자르거나 세로를 제한하지 않음) */
.cli__track img {
  flex: none;
  width: 200px;
  height: auto;
  max-width: none;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .35s, opacity .35s;
}
.cli__track img:hover { filter: none; opacity: 1; }


/* ==========================================================================
   ⑦ 커뮤니티 (그누보드 latest 삽입 영역)
   ========================================================================== */
.comm__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
}
/* 좌(공지 4줄)·우(문의 2줄) 항목 수가 달라도 아래 끝선이 맞도록,
   블록을 세로 flex 로 두고 내용부를 남는 높이만큼 늘린다 */
.comm__block { min-width: 0; display: flex; flex-direction: column; }
.comm__block .nlist,
.comm__block .cinfo { flex: 1 1 auto; }
.comm__block .cinfo { grid-auto-rows: 1fr; }   /* 2줄이 남는 높이를 균등 분배 */
.comm__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--ink-900);
}
.comm__head h3 { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.035em; color: var(--ink-900); }

/* 최신글 리스트 */
.nlist li { border-bottom: 1px solid var(--line); }
.nlist a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  transition: padding-left .35s var(--e-out);
}
.nlist a:hover { padding-left: 10px; }
.nlist__t {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.024em;
  color: var(--ink-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .25s;
}
.nlist a:hover .nlist__t { color: var(--o-600); }
.nlist__cat {
  flex: none;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--paper-3);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--ink-500);
}
.nlist__cat--new { background: var(--o-50); color: var(--o-600); }
.nlist__d { font-size: .75rem; color: var(--ink-400); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) { .comm__inner { grid-template-columns: 1fr; } }

/* 메인 최근작업 카드 내부 실제 이미지도 사각형으로 (라운드 제거) */
.workcard__media .ph-img,
.workcard__media .ph,
.workcard__media img { border-radius: 0 !important; }

/* 모바일(1열) 메인 '최근 작업' — 카드 사이 세로 여백을 넉넉히 (포트폴리오 페이지와 동일) */
@media (max-width: 560px) {
  .workgrid { gap: 36px; }
}