/* JeongGam homepage. The reference layout is preserved with a restrained palette. */

.jg-home-page .jg-main { padding-top: 0; }   /* 히어로가 헤더 뒤(y:0)까지 올라오도록 — 헤더 높이만큼은 .jg-hero__inner의 padding-top이 대신 확보 */

.jg-home-page .jg-header {
  background: var(--color-transparent);
  border-bottom-color: var(--color-transparent);
}

.jg-home-page .jg-header.is-scrolled {
  background: var(--color-header-glass);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--color-on-dark-line);
  box-shadow: var(--shadow-sm);
}
/* backdrop-filter 미지원 브라우저 → 거의 불투명한 네이비로 폴백 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jg-home-page .jg-header.is-scrolled { background: var(--color-header-solid); }
}

.jg-home-page .jg-nav a { color: var(--color-on-dark-strong); }
.jg-home-page .jg-nav a:hover,
.jg-home-page .jg-nav a.is-active { color: var(--color-on-dark); }
.jg-home-page .jg-nav-toggle { color: var(--color-on-dark); }
.jg-home-page .jg-drawer {
  background: var(--color-primary-hover);
  border-bottom-color: var(--color-on-dark-line);
}
.jg-home-page .jg-drawer a {
  color: var(--color-on-dark);
  border-bottom-color: var(--color-on-dark-line);
}

/* Hero */
.jg-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary);
  background-image: url('/company/images/home/hero/hero.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: var(--color-on-dark);
}

.jg-hero::before,
.jg-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.jg-hero::before {
  top: -44%;
  right: -18%;
  width: 58vw;
  aspect-ratio: 1;
  border: 1px solid var(--color-on-dark-line);
}

.jg-hero::after {
  left: -24%;
  bottom: -54%;
  width: 62vw;
  aspect-ratio: 1;
  background: var(--color-primary-hover);
  opacity: .42;
}

.jg-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 52px;
  padding-block: 68px 76px;
  padding-top: calc(var(--header-h) + 68px);   /* 헤더가 투명 + fixed라 히어로가 페이지 맨 위(y:0)까지 올라오므로, 콘텐츠는 헤더 높이만큼 더 내려서 기존과 같은 위치 유지 */
}

.jg-hero__copy { max-width: 600px; }

.jg-hero h1 {
  color: var(--color-on-dark);
  font-family: var(--font-sans);
  font-size: 35px;
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: -0.04em;
  word-break: keep-all;
}

.jg-hero h1 .accent { color: var(--color-on-dark); }

.jg-hero__lead {
  margin-top: 28px;
  color: var(--color-hero-copy);
  font-size: 15px;
  line-height: 1.85;
}

.jg-hero__actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jg-btn--light {
  background: var(--color-surface);
  color: var(--color-primary);
}

.jg-btn--light:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.jg-btn--hero-outline {
  background: var(--color-transparent);
  color: var(--color-on-dark);
  border-color: var(--color-on-dark-muted);
}

.jg-btn--hero-outline:hover {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-surface);
}

.jg-hero__proof {
  max-width: 520px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--color-on-dark-line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jg-hero__proof > div + div {
  padding-left: 16px;
  border-left: 1px solid var(--color-on-dark-line);
}

.jg-hero__proof dt {
  color: var(--color-on-dark-subtle);
  font-size: 10px;
  font-weight: 500;
}

.jg-hero__proof dd {
  margin-top: 3px;
  color: var(--color-on-dark-strong);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Hero network */
.jg-hero__viz {
  --viz: min(420px, 92vw);
  --r-inner: calc(var(--viz) * .23);
  --r-outer: calc(var(--viz) * .43);
  position: relative;
  align-self: center;
  width: var(--viz);
  height: var(--viz);
  flex-shrink: 0;
}

.jg-hero__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--r-inner) * 2);
  height: calc(var(--r-inner) * 2);
  margin: calc(var(--r-inner) * -1);
  border: 1px dashed var(--color-on-dark-line);
  border-radius: 50%;
}

.jg-hero__orbit--outer {
  width: calc(var(--r-outer) * 2);
  height: calc(var(--r-outer) * 2);
  margin: calc(var(--r-outer) * -1);
}

.jg-hero__core,
.jg-hero__node {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
}

.jg-hero__core {
  z-index: 2;
  width: 84px;
  height: 84px;
  margin: -42px;
  background: var(--background-hero-core-glass);
  color: var(--color-on-dark);
  border: 1px solid var(--color-hero-glow-line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-hero-core-glow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.jg-hero__core b { font-size: 17px; font-weight: 900; }
.jg-hero__core small { color: var(--color-on-dark-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }

.jg-hero__node {
  z-index: 2;
  width: 54px;
  height: 54px;
  margin: -27px;
  background: var(--background-hero-node-glass);
  color: var(--color-primary);
  border: 1px solid var(--color-hero-glow-line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-hero-node-glow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(var(--a)) translateY(calc(var(--r-inner) * -1)) rotate(var(--ai));
}
/* backdrop-filter 미지원 브라우저 → 기존 불투명 배경으로 폴백 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jg-hero__core { background: var(--color-primary-hover); }
  .jg-hero__node { background: var(--color-surface); border-color: var(--color-line); }
}

.jg-hero__node b { display: flex; width: 20px; height: 20px; line-height: 1; }
.jg-hero__node b img { width: 20px; height: 20px; object-fit: contain; }
.jg-hero__node i { margin-top: 2px; color: var(--color-ink); font-size: 9px; font-weight: 700; font-style: normal; }
.jg-hero__node--telecom { --a: 0deg; --ai: 0deg; }
.jg-hero__node--finance { --a: 72deg; --ai: -72deg; }
.jg-hero__node--commerce { --a: 144deg; --ai: -144deg; }
.jg-hero__node--content { --a: 216deg; --ai: -216deg; }
.jg-hero__node--membership { --a: 288deg; --ai: -288deg; }

.jg-icon-mask--wifi { --icon-mask: url('/company/images/home/hero/icon-wifi.svg'); }
.jg-icon-mask--bank { --icon-mask: url('/company/images/home/hero/icon-bank.svg'); }
.jg-icon-mask--commerce { --icon-mask: url('/company/images/home/hero/icon-commerce.svg'); }
.jg-icon-mask--content { --icon-mask: url('/company/images/home/hero/icon-content.svg'); }
.jg-icon-mask--membership { --icon-mask: url('/company/images/home/hero/icon-membership.svg'); }
.jg-icon-mask--megaphone { --icon-mask: url('/company/images/home/icon-megaphone.svg'); }
.jg-icon-mask--monitor { --icon-mask: url('/company/images/home/icon-monitor.svg'); }
.jg-icon-mask--database { --icon-mask: url('/company/images/home/icon-database.svg'); }
.jg-icon-mask--user { --icon-mask: url('/company/images/home/icon-user.svg'); }
.jg-icon-mask--network { --icon-mask: url('/company/images/home/strength/icon-network.svg'); }
.jg-icon-mask--shield { --icon-mask: url('/company/images/home/strength/icon-ShieldCheck.svg'); }
.jg-icon-mask--chart { --icon-mask: url('/company/images/home/strength/icon-lineChart.svg'); }
.jg-icon-mask--repeat { --icon-mask: url('/company/images/home/strength/icon-Repeat.svg'); }

.jg-hero__partner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--a)) translateY(calc(var(--r-outer) * -1)) rotate(var(--ai));
}

.jg-hero__partner b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78px;
  height: 48px;
  margin: -24px -39px;
  padding: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jg-hero__partner img { width: auto; max-width: 100%; max-height: 24px; object-fit: contain; }

.jg-hero__partner i {
  position: absolute;
  top: calc(50% + 30px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 84px;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--color-on-dark-muted);
  white-space: normal;
  word-break: keep-all;
}
.jg-hero__partner--nbt { --a: 0deg; --ai: 0deg; }
.jg-hero__partner--buzzvil { --a: 45deg; --ai: -45deg; }
.jg-hero__partner--tnk { --a: 90deg; --ai: -90deg; }
.jg-hero__partner--nasmedia { --a: 135deg; --ai: -135deg; }
.jg-hero__partner--ohc { --a: 180deg; --ai: -180deg; }
.jg-hero__partner--pincrux { --a: 225deg; --ai: -225deg; }
.jg-hero__partner--ive { --a: 270deg; --ai: -270deg; }
.jg-hero__partner--igaworks { --a: 315deg; --ai: -315deg; }

/* Section-head variant: left-aligned (used to break the repeated centered rhythm) */
.jg-section-head--left { margin-inline: 0; text-align: left; }

/* Homepage headings share spacing; detail-page headings keep their own rules. */
#work .jg-section-head { margin-bottom: 28px; }

#partners .jg-section-head { margin-bottom: 32px; }

.jg-home-page .jg-section-desc { margin-top: 16px; }

.jg-biz__intro,
.jg-strength__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.jg-biz__intro { margin-bottom: 32px; }

.jg-biz__head,
.jg-strength__head {
  min-width: 0;
  max-width: none;
  margin: 0;
  text-align: left;
}

.jg-biz__intro > .jg-section-desc,
.jg-strength__intro > .jg-section-desc { margin: 0; }

/* What we do */
.jg-work__intro {
  display: grid;
  gap: 20px;
  margin-bottom: 44px;
}

.jg-work__head {
  max-width: none;
  margin: 0;
}

.jg-work__intro-copy,
.jg-biz__intro-copy {
  max-width: 540px;
  margin: 0 auto;
  color: var(--color-muted);
  font-size: 14.5px;
  line-height: 1.8;
  text-align: center;
  word-break: keep-all;
}

.jg-work__flow {
  --dot: 72px;
  --core-dot: 92px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 1080px;
  margin: 0 auto;
}

.jg-work__node {
  flex: 0 0 var(--dot);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.jg-work__dot {
  width: var(--dot);
  height: var(--dot);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.jg-work__dot img { width: 42%; max-height: 42%; object-fit: contain; }

.jg-work__icon {
  width: 42%;
  height: 42%;
  color: var(--color-accent-text);
}

.jg-work__icon img { width: 100%; max-height: 100%; }

.jg-work__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jg-work__node strong { color: var(--color-text); font-size: 12px; font-weight: 700; }
.jg-work__node small { color: var(--color-muted); font-size: 11px; font-weight: 500; }

.jg-work__node--core {
  flex-basis: var(--core-dot);
  margin-top: calc((var(--dot) - var(--core-dot)) / 2);
}

.jg-work__node--core .jg-work__dot {
  width: var(--core-dot);
  height: var(--core-dot);
  flex-direction: column;
  gap: 5px;
  background: var(--color-surface);
  border-color: var(--color-transparent);
  box-shadow: var(--shadow-work-core-glow);
}

.jg-work__node--core .jg-work__dot img {
  width: 38%;
  max-height: 38%;
}

.jg-work__brand-name {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.jg-work__line {
  flex: 1 1 38px;
  min-width: 10px;
  max-width: 120px;
  margin-top: calc(var(--dot) / 2);
  border-top: 2px solid var(--color-node-line);
}

/* Business */
.jg-biz {
  display: grid;
  gap: 16px;
}

.jg-biz [hidden] { display: none; }

.jg-biz__service { min-width: 0; }

.jg-biz__feature {
  position: relative;
  isolation: isolate;
  min-height: 380px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-feature-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-feature-glow);
}

.jg-biz__feature::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 86% 48%, var(--color-feature-glow) 0%, var(--color-transparent) 42%),
    linear-gradient(
      to right,
      var(--color-surface) 0%,
      var(--color-surface) 44%,
      var(--color-feature-overlay) 54%,
      var(--color-feature-overlay-soft) 64%,
      var(--color-transparent) 76%
    );
}

.jg-biz__feature-visual {
  position: absolute;
  right: -12px;
  bottom: 24px;
  z-index: -2;
  width: 46%;
  height: auto;
  object-fit: contain;
  object-position: right bottom;
  filter: saturate(.9) brightness(1.02);
  opacity: .95;
}
.jg-biz__service[data-biz="offerwall"] .jg-biz__feature-visual { width: min(41%, 272px); }
.jg-biz__service[data-biz="card-lms"] .jg-biz__feature-visual { width: min(48%, 318px); }

.jg-biz__feature-content {
  width: 100%;
  padding: 34px 24px;
  position: relative;
  z-index: 1;
}

.jg-biz__feature--no-image .jg-biz__feature-content { width: 100%; }
.jg-biz__feature--no-image .jg-biz__description { max-width: 640px; }
.jg-biz__feature--no-image::after { content: none; }

.jg-biz__feature h3:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 5px;
  border-radius: var(--radius-sm);
}

.jg-biz__number {
  display: block;
  color: var(--color-accent-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.jg-biz__feature h3 {
  margin-top: 12px;
  color: var(--color-ink);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.4;
}

.jg-biz__feature p {
  max-width: 400px;
  margin-top: 16px;
  color: var(--color-text);
  font-size: 14.5px;
  line-height: 1.8;
  word-break: keep-all;
}

.jg-biz__tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 7px; }
.jg-biz__tags span {
  padding: 6px 10px;
  background: var(--color-accent-soft);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
}
.jg-biz__cta { margin-top: 28px; }

.jg-biz__index {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-lg);
}

.jg-biz__item {
  position: relative;
  padding: 24px;
  border-bottom: 1px solid var(--color-primary-soft);
}

.jg-biz__item .jg-biz__feature-content {
  width: 100%;
  padding: 0;
  position: static;
}

.jg-biz__select {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: var(--color-transparent);
  text-align: left;
}

.jg-biz.is-interactive .jg-biz__item:focus-within { background: var(--color-canvas); }

@media (hover: hover) and (pointer: fine) {
  .jg-biz.is-interactive .jg-biz__item:hover { background: var(--color-canvas); }
}

.jg-biz__select:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -4px;
  border-radius: 0;
}

.jg-biz__item:last-child { border-bottom: 0; }

.jg-biz__item h3 {
  margin-top: 9px;
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
  word-break: keep-all;
}

.jg-biz__item p {
  margin-top: 9px;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.65;
  word-break: keep-all;
}

/* Strengths — four quiet, independent areas with icon-led copy. */
#strength {
  border-bottom: 0;
  background-color: var(--color-surface);
  background-image:
    linear-gradient(
      to bottom,
      var(--color-strength-photo-heading) 0%,
      var(--color-strength-photo-heading) 32%,
      var(--color-strength-photo-overlay) 60%,
      var(--color-strength-photo-overlay) 72%,
      var(--color-canvas) 96%,
      var(--color-canvas) 100%
    ),
    url('/company/images/home/strength/hero.png?v=20260917-strength-fade');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.jg-strength__layout { display: grid; gap: 32px; }

.jg-strength__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.jg-strength__card {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-lg);
}

.jg-strength__icon {
  display: flex;
  width: 40px;
  height: 40px;
  color: var(--color-accent-text);
}

.jg-strength__icon img { width: 100%; height: 100%; object-fit: contain; }

.jg-strength__body { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.jg-strength__card h3 { color: var(--color-ink); font-size: 20px; font-weight: 800; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.jg-strength__card p {
  max-width: 680px;
  color: var(--color-text-strong);
  font-size: 14.5px;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Partners */
#partners {
  border-top: 0;
  background: var(--color-canvas);
}

.jg-partners__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.jg-partners__grid > div {
  height: 70px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-md);
}

.jg-partners__grid img {
  width: 144px;
  max-width: 84%;
  height: 36px;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 560px) {
  .jg-partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .jg-biz__feature-content { width: 64%; padding: 36px 30px; }
}

@media (max-width: 767px) {
  .jg-hero__viz { display: none; }   /* 화면이 좁아지면 오빗 노드 다이어그램은 숨기고 텍스트만 남김 */
}

@media (max-width: 559px) {
  .jg-biz__feature-visual { display: none; }
  .jg-biz__feature::after { content: none; }
}

@media (min-width: 768px) {
  #work .jg-section-head { margin-bottom: 40px; }
  #partners .jg-section-head { margin-bottom: 48px; }

  .jg-biz__intro { margin-bottom: 48px; }
  .jg-strength__layout { gap: 48px; }

  .jg-hero__inner {
    min-height: 660px;
    padding-block: 82px 90px;
    padding-top: calc(var(--header-h) + 82px);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 44px;
  }

  .jg-hero__copy { flex: 1 1 52%; }
  .jg-hero h1 { font-size: 50px; }
  .jg-hero__lead { font-size: 16px; }
  .jg-hero__viz { --viz: 430px; flex: 0 0 var(--viz); }

  .jg-work__flow { --dot: 100px; --core-dot: 132px; }
  .jg-work__node strong { font-size: 13px; }

  .jg-biz__feature-content { width: 64%; padding: 40px 36px; }

  .jg-biz__index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jg-biz__item {
    min-width: 0;
    padding: 28px;
    border-bottom: 0;
  }

  .jg-biz__item:nth-child(odd) { border-right: 1px solid var(--color-primary-soft); }
  .jg-biz__item:nth-child(-n + 2) { border-bottom: 1px solid var(--color-primary-soft); }

  .jg-strength__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .jg-strength__card { padding: 28px; }
  #strength { padding-block: 64px; }

  .jg-partners__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .jg-partners__grid > div { height: 78px; }
}

@media (min-width: 1024px) {
  .jg-hero__inner { min-height: 720px; }
  .jg-hero h1 { font-size: 56px; }
  .jg-hero__viz { --viz: 470px; }

  .jg-work__head { text-align: left; }

  .jg-work__intro-copy,
  .jg-biz__intro-copy {
    margin: 0;
    text-align: left;
  }

  .jg-biz {
    grid-template-columns: minmax(0, 1.38fr) minmax(360px, 1fr);
    gap: 16px;
    align-items: stretch;
  }

  .jg-biz__feature-content { padding: 46px 42px; }
  .jg-biz__feature h3 { font-size: 30px; }
  .jg-biz__index { grid-template-rows: repeat(2, minmax(0, 1fr)); }

  .jg-biz__intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 80px; align-items: end; }
  .jg-strength__card { grid-template-columns: 44px minmax(0, 1fr); gap: 24px; padding: 36px; }
  .jg-strength__icon { width: 44px; height: 44px; }
  #strength { padding-block: 72px; }

  #partners { padding-top: 112px; }
  .jg-partners__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .jg-hero__actions { flex-direction: column; align-items: stretch; }

  .jg-work__flow { --dot: 52px; --core-dot: 64px; }
  .jg-work__line { flex-basis: 16px; }
  .jg-work__node strong { font-size: 11px; }
}

@media (max-width: 400px) {
  .jg-hero h1 { font-size: 29px; }
  .jg-title { font-size: 22px; }
}