@charset "utf-8";
/* 서브 페이지 전용 스타일 (공통 요소 + 서브 섹션 + 서브 전용 컴포넌트) - 메인은 main.css 에서 관리 */
body.sub {
  --title-size: 4.4rem;
  --title-ls: 0;
  --title-lh: 1.28;
}
.section-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .14rem;
  text-transform: uppercase;
  color: var(--color-text-sub);
}
.section-label::before {
  content: '';
  flex: 0 0 2.8rem;
  height: .3rem;
  background: var(--color-primary);
}
.section-label.is-orange {
  color: var(--color-primary-dark);
}
.section-label.is-orange::before {
  display: none;
}
.section-label.is-dark {
  color: rgba(255,255,255,.72);
}
.sub .section-label {
  font-size: 1.3rem;
  letter-spacing: 0;
}
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 4.4rem;
}
.section-header > div {
  max-width: 79rem;
}
.section-header.is-col {
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 0;
}
.section-title {
  margin-top: 2rem;
  font-size: var(--title-size);
  font-weight: 700;
  line-height: var(--title-lh);
  letter-spacing: var(--title-ls);
}
.section-header.is-col .section-title {
  margin-top: 0;
}
.section-desc {
  max-width: 45rem;
  font-size: 1.6rem;
  line-height: 1.75;
  color: var(--color-text-sub);
}
.is-col .section-desc {
  font-size: 1.8rem;
}
.sub .is-col .section-desc {
  font-size: 1.7rem;
}
.is-col .section-desc {
  max-width: none;
}
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  transition: color var(--transition-base);
}
.link-more:hover,
.link-more:focus-visible {
  color: var(--color-primary);
}
.link-more .ico {
  width: 1.7rem;
  height: 1.7rem;
  transition: transform var(--transition-base);
}
.link-more:hover .ico {
  transform: translateX(.4rem);
}
.link-more.is-light {
  color: #fff;
}
.note {
  font-size: 1.2rem;
  color: var(--color-text-mute);
}
.icon-box,
.icon-circle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  min-height: 5.6rem;
  padding: 0 2.4rem;
  border: 1px solid var(--color-dark);
  border-radius: .4rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-dark);
  transition: background var(--transition-base), color var(--transition-base);
}
.btn-dark:hover,
.btn-dark:focus-visible {
  color: var(--color-dark);
  background: #fff;
}
.btn-dark .ico {
  width: 1.7rem;
  height: 1.7rem;
}
.sub-hero,
.tech-visual,
.overview-visual,
.proj-card,
.cta-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.sub-hero > .bg,
.tech-visual > img,
.overview-visual > img,
.proj-card > img,
.cta-box > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sub-hero::before,
.tech-visual::before,
.overview-visual::before,
.proj-card::before,
.cta-career::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
}
.sub-hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}
.sub-hero {
  min-height: 67rem;
  padding: 9.4rem var(--edge-x) 4.2rem;
}
.sub-hero::before {
  background: linear-gradient(90deg, rgba(17,21,24,.88) 0%, rgba(17,21,24,.44) 51%, rgba(17,21,24,.07) 88%);
}
.hero-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.6rem;
  max-width: 82rem;
}
.sub-hero .hero-msg {
  gap: 2.5rem;
  max-width: 85rem;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .16rem;
}
.sub-hero .eyebrow {
  font-size: 1.3rem;
  letter-spacing: 0;
}
.eyebrow .bar {
  display: block;
  width: 3.6rem;
  height: .3rem;
  background: var(--color-primary);
}
.hero-title {
  font-size: 7.6rem;
  font-weight: 700;
  line-height: 1.17;
  letter-spacing: -.35rem;
}
.sub-hero .hero-title {
  font-size: 6.8rem;
  line-height: 1.18;
  letter-spacing: 0;
}
.hero-desc {
  max-width: 59rem;
  font-size: 2.3rem;
  line-height: 1.65;
  color: rgba(255,255,255,.8);
}
.sub-hero .hero-desc {
  max-width: 65rem;
  font-size: 2.2rem;
  color: rgba(255,255,255,.82);
}
.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.sub-hero .hero-foot {
  align-items: center;
  font-size: 1.3rem;
}
.crumb ol {
  display: flex;
  gap: 1.2rem;
  color: rgba(255,255,255,.72);
}
.crumb li + li::before {
  content: '/';
  margin-right: 1.2rem;
}
.crumb a:hover {
  color: #fff;
}
.crumb [aria-current] {
  color: #fff;
}
.biz-nav {
  display: flex;
  gap: 2.2rem;
  color: rgba(255,255,255,.5);
}
.biz-nav .is-next {
  font-weight: 700;
  color: #fff;
}
.biz-nav a:hover {
  color: #fff;
}
.glance {
  padding: 8.4rem 0;
}
.glance .inner {
  display: flex;
}
.glance-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 29.8rem;
  padding-right: 4.8rem;
  border-right: 1px solid var(--color-line);
}
.glance-title {
  margin-top: 1.6rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.1rem;
}
.glance-intro .note {
  margin-top: 3rem;
  font-size: 1.3rem;
}
.glance-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 1;
  min-width: 0;
}
.glance-list li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  min-height: 22.2rem;
  padding: 0 2.8rem;
}
.glance-list li + li {
  border-left: 1px solid var(--color-line);
}
.glance-list .top {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.glance-list .icon-box {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  color: var(--color-primary);
  background: #fff4ee;
}
.glance-list .icon-box .ico {
  width: 2rem;
  height: 2rem;
}
.num {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .7rem;
  line-height: 1;
}
.num strong {
  font-family: var(--font-mono);
  font-size: 5.6rem;
  font-weight: 600;
  letter-spacing: -.2rem;
}
.num .unit {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.glance-list .txt h3 {
  font-size: 1.7rem;
  font-weight: 700;
}
.glance-list .txt p {
  margin-top: .8rem;
  font-size: 1.3rem;
  color: var(--color-text-mute);
}
.glance.is-warm {
  padding: 7.8rem 0;
  background: var(--color-bg-warm);
}
.glance.is-warm .glance-intro {
  flex-basis: 29.3rem;
}
.glance-list.is-plain li {
  min-height: 20.4rem;
}
.glance-list.is-plain .num strong {
  font-size: 4.8rem;
  letter-spacing: 0;
}
.glance-list.is-plain .num .unit {
  font-size: 1.3rem;
}
.glance-list.is-plain .txt h3 {
  font-size: 1.6rem;
}
.glance-list.is-plain .txt p {
  margin-top: .7rem;
  font-size: 1.2rem;
}
.portfolio {
  padding: 8.8rem 0 9.6rem;
  background: linear-gradient(180deg, #f6f3ed, #e8e1d7);
}
.portfolio .section-header {
  margin-bottom: 4.6rem;
}
.projects {
  padding: 8.8rem 0 9.2rem;
}
.proj-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44rem;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  height: 64rem;
}
.proj-gallery > li:first-child {
  grid-row: 1 / 3;
}
.proj-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 2.4rem;
  border-radius: .4rem;
  color: #fff;
}
.proj-gallery > li:first-child .proj-card {
  padding: 3rem;
}
.proj-card::before {
  background: linear-gradient(180deg, rgba(17,21,24,.03) 15%, rgba(17,21,24,.3) 64.3%, rgba(17,21,24,.88) 100%);
}
.proj-card > img {
  transition: transform .6s ease;
}
.proj-card:hover > img {
  transform: scale(1.04);
}
.proj-card .tag {
  align-self: flex-start;
  padding: .7rem 1.2rem;
  border-radius: .4rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .08rem;
  background: rgba(17,21,24,.66);
}
.proj-card .meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.proj-card .name {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  min-width: 0;
}
.proj-card .name strong {
  font-size: 2.1rem;
  line-height: 1.25;
}
.proj-card .name em {
  font-size: 1.3rem;
  color: rgba(255,255,255,.72);
}
.proj-gallery > li:first-child .name strong {
  font-size: 2.7rem;
}
.proj-card .go {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--color-primary);
  transition: transform var(--transition-base);
}
.proj-card .go .ico {
  width: 1.6rem;
  height: 1.6rem;
}
.proj-card:hover .go {
  transform: translate(.2rem, -.2rem);
}
.tech {
  display: grid;
  grid-template-columns: 60rem minmax(0, 1fr);
  min-height: 71rem;
  color: #fff;
  background: var(--color-dark);
}
.tech-visual {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  padding: 3rem;
}
.tech-visual::before {
  background: rgba(17,21,24,.26);
}
.tech-visual .badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.4rem;
  border-radius: .4rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-dark);
  background: rgba(255,255,255,.91);
}
.tech-visual .badge .ico {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--color-primary-dark);
}
.tech-visual .caption {
  max-width: 36rem;
  font-size: 1.4rem;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
}
.tech-body {
  display: flex;
  flex-direction: column;
  gap: 4.2rem;
  min-width: 0;
  padding: 7.8rem var(--page-gutter) 6.8rem;
}
.tech .section-title {
  color: #fff;
}
.tech .section-desc {
  color: rgba(255,255,255,.72);
}
.tech-list {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.tech-list li {
  display: flex;
  flex: 1;
  border-top: 1px solid rgba(255,255,255,.14);
}
.tech-list li:last-child {
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.tech-list a {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  min-height: 7.2rem;
  padding: 1.8rem 0;
  transition: background var(--transition-base), padding var(--transition-base);
}
.tech-list a:hover,
.tech-list a:focus-visible {
  padding-inline: 1.2rem;
  background: rgba(255,255,255,.04);
}
.tech-list .icon-box {
  width: 4.2rem;
  height: 4.2rem;
  background: rgba(255,255,255,.06);
}
.tech-list .icon-box .ico {
  width: 2rem;
  height: 2rem;
}
.tech-list strong {
  flex: 0 0 16rem;
  font-size: 2rem;
}
.tech-list .desc {
  flex: 1;
  min-width: 0;
  font-size: 1.5rem;
  line-height: 1.6;
  color: rgba(255,255,255,.6);
}
.tech-list .arr {
  width: 1.7rem;
  height: 1.7rem;
  color: rgba(255,255,255,.8);
}
.tech-list.is-num .idx {
  flex: 0 0 3.4rem;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
}
.tech-list.is-num strong {
  flex: 1;
  min-width: 0;
  font-size: 1.8rem;
}
.tech-list.is-cap li {
  align-items: stretch;
}
.tech-list.is-cap .row {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 1.7rem 0;
}
.tech-list.is-cap .icon-circle {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.tech-list.is-cap .icon-circle .ico {
  width: 1.9rem;
  height: 1.9rem;
}
.tech-list.is-cap .txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}
.tech-list.is-cap strong {
  flex: none;
  font-size: 1.8rem;
}
.tech-list.is-cap .desc {
  flex: none;
  font-size: 1.4rem;
  color: rgba(255,255,255,.5);
}
.tech-list.is-cap .idx {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: rgba(255,255,255,.5);
}
.quote blockquote {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.55;
}
.quote figcaption {
  margin-top: 1rem;
  font-size: 1.3rem;
  color: var(--color-text-mute);
}
.overview {
  padding: 9.6rem 0;
}
.overview .inner {
  display: grid;
  grid-template-columns: 56rem minmax(0, 1fr);
  gap: 7.8rem;
  min-height: 41.8rem;
}
.overview-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
}
.overview-visual {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  min-height: 36rem;
  padding: 2.8rem;
  border-radius: .4rem;
  color: #fff;
}
.overview-visual::before {
  background: linear-gradient(180deg, rgba(17,21,24,0) 51.25%, rgba(17,21,24,.72) 100%);
}
.overview-visual .tag {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
}
.overview-visual .cap {
  max-width: 36rem;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
}
.overview-visual .cap.is-lg {
  max-width: 38rem;
  font-size: 2.4rem;
  line-height: 1.45;
}
.keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.keywords li {
  padding: .9rem 1.5rem;
  border-radius: 99.9rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
}
.scope {
  padding: 8.4rem 0 8.8rem;
  background: var(--color-bg-warm);
}
.scope-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
}
.scope-list a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  height: 100%;
  min-height: 31rem;
  padding: 2.6rem;
  border: 1px solid #e7e5e0;
  border-radius: .4rem;
  background: #fff;
  box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.07);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.scope-list a:hover,
.scope-list a:focus-visible {
  transform: translateY(-.6rem);
  box-shadow: 0 1.4rem 3rem rgba(0,0,0,.12);
}
.scope-list .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.scope-list .icon-circle {
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50%;
  color: var(--color-primary);
  background: #fff1eb;
}
.scope-list .icon-circle .ico {
  width: 2.6rem;
  height: 2.6rem;
}
.scope-list .idx {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text-mute);
}
.scope-list h3 {
  font-size: 2.3rem;
}
.scope-list .txt p {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.65;
  color: var(--color-text-sub);
}
.scope-list .arr {
  width: 1.7rem;
  height: 1.7rem;
}
.process {
  padding: 8.4rem 0 8.8rem;
  background: var(--color-bg-warm);
}
.process .section-header {
  margin-bottom: 5rem;
}
.process-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.process-list li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  min-height: 23rem;
  padding: 2.4rem 2.4rem 2.2rem;
  border: solid var(--color-line);
  border-width: 1px 1px 1px 0;
  background: #fff;
}
.process-list li:first-child {
  border: 1px solid var(--color-primary);
  color: #fff;
  background: var(--color-primary);
}
.process-list .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.process-list .idx {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.process-list li:first-child .idx {
  color: #fff;
}
.process-list .ico {
  width: 1.7rem;
  height: 1.7rem;
}
.process-list h3 {
  font-size: 2rem;
}
.process-list .txt p {
  margin-top: .9rem;
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--color-text-sub);
}
.process-list li:first-child .txt p {
  color: rgba(255,255,255,.82);
}
.perf {
  padding: 8rem 0 8.4rem;
}
.perf .section-header {
  margin-bottom: 4.2rem;
}
.perf-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.perf-list li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  min-height: 19rem;
  padding: 0 2.8rem;
}
.perf-list li + li {
  border-left: 1px solid var(--color-line);
}
.perf-list .num strong {
  font-size: 4.8rem;
  letter-spacing: 0;
}
.perf-list .num .unit {
  font-size: 1.3rem;
}
.perf-list h3 {
  font-size: 1.6rem;
}
.perf-list .txt p {
  margin-top: .7rem;
  font-size: 1.2rem;
  color: var(--color-text-mute);
}
.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52rem;
  min-height: 36rem;
}
.cta-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  padding: 5.6rem 6.4rem;
  color: #fff;
}
.cta-career {
  padding-inline: var(--edge-x);
}
.cta-career::before {
  background: rgba(17,21,24,.79);
}
.cta-inquiry {
  background: var(--color-primary);
}
.cta .label {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .14rem;
}
.cta-career .label {
  color: var(--color-primary);
}
.cta-inquiry .label {
  color: rgba(255,255,255,.82);
}
.cta .msg h2 {
  font-size: 3.4rem;
  line-height: 1.32;
}
.cta .msg p {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  color: rgba(255,255,255,.72);
}
.cta .go {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
}
.cta .go .ico {
  width: 1.7rem;
  height: 1.7rem;
  transition: transform var(--transition-base);
}
.cta .go:hover .ico {
  transform: translateX(.5rem);
}
@media (max-width: 79.999em) {
  .hero-title {
      font-size: clamp(4.8rem, 5.8vw, 7.6rem);
      letter-spacing: -.2rem;
    }
  .sub-hero .hero-title {
      font-size: clamp(4.4rem, 5.2vw, 6.8rem);
    }
  .tech {
      grid-template-columns: 44rem minmax(0, 1fr);
    }
  .tech-list strong {
      flex-basis: 13rem;
      font-size: 1.8rem;
    }
  .overview .inner {
      gap: 4rem;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  .proj-gallery {
      grid-template-columns: minmax(0, 1fr) 34rem;
    }
  .glance-list li,
    .perf-list li {
      padding: 0 2rem;
    }
  .num strong {
      font-size: 4.8rem;
    }
  .glance-intro {
      flex-basis: 24rem;
      padding-right: 3rem;
    }
  .glance.is-warm .glance-intro {
      flex-basis: 24rem;
    }
  .cta {
      grid-template-columns: minmax(0, 1fr) 42rem;
    }
}
@media (max-width: 63.999em) {
  .sub-hero {
      min-height: 56rem;
      padding-top: 11rem;
    }
  .hero-title,
    .sub-hero .hero-title {
      font-size: clamp(3.6rem, 6.4vw, 5.6rem);
      letter-spacing: -.1rem;
    }
  .hero-desc,
    .sub-hero .hero-desc {
      font-size: 2rem;
    }
  .section-title {
      font-size: clamp(3rem, 4.6vw, 4.4rem);
    }
  .section-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 2rem;
      margin-bottom: 3.6rem;
    }
  .projects,
  .portfolio,
  .overview,
  .scope,
  .process,
  .perf {
      padding-block: 7rem;
    }
  .glance .inner {
      flex-direction: column;
      gap: 4rem;
    }
  .glance-intro {
      flex: none;
      flex-direction: row;
      align-items: flex-end;
      padding: 0 0 3rem;
      border-right: 0;
      border-bottom: 1px solid var(--color-line);
    }
  .glance-intro .note {
      margin-top: 0;
    }
  .glance-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 4rem;
    }
  .glance-list li:nth-child(odd) {
      padding-left: 0;
      border-left: 0;
    }
  .glance-list li {
      min-height: 0;
    }
  .scope-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  .proj-gallery {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: 48rem 30rem;
      height: auto;
    }
  .proj-gallery > li:first-child {
      grid-column: 1 / 3;
      grid-row: 1;
    }
  .tech {
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
    }
  .tech-visual {
      min-height: 40rem;
    }
  .tech-body {
      padding-block: 6rem;
    }
  .overview .inner {
      grid-template-columns: minmax(0, 1fr);
    }
  .overview-visual {
      min-height: 40rem;
    }
  .process-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  .process-list li {
      min-height: 20rem;
      border-width: 1px;
      border-left-width: 1px;
    }
  .process-list li:first-child {
      border-width: 1px;
    }
  .perf-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 4rem;
    }
  .perf-list li:nth-child(odd) {
      padding-left: 0;
      border-left: 0;
    }
  .perf-list li {
      min-height: 0;
    }
  .cta {
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
    }
  .cta-box {
      min-height: 32rem;
      padding-block: 5rem;
    }
}
@media (max-width: 47.999em) {
  .sub-hero {
      min-height: 50rem;
      padding-bottom: 3rem;
    }
  .hero-msg,
    .sub-hero .hero-msg {
      gap: 1.8rem;
    }
  .hero-title,
    .sub-hero .hero-title {
      font-size: 3.4rem;
      line-height: 1.25;
    }
  .hero-title br {
      display: none;
    }
  .hero-desc,
    .sub-hero .hero-desc {
      font-size: 1.7rem;
    }
  .hero-foot {
      flex-direction: column;
      align-items: flex-start;
    }
  .sub-hero .hero-foot {
      align-items: flex-start;
    }
  .section-title {
      font-size: 3rem;
    }
  .projects,
  .portfolio,
  .overview,
  .scope,
  .process,
  .perf,
  .glance,
  .glance.is-warm {
      padding-block: 5.6rem;
    }
  .glance-intro {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.6rem;
    }
  .num strong,
    .glance-list.is-plain .num strong,
    .perf-list .num strong {
      font-size: 3.8rem;
    }
  .scope-list,
  .process-list {
      grid-template-columns: minmax(0, 1fr);
    }
  .proj-gallery {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
      grid-auto-rows: 32rem;
    }
  .proj-gallery > li:first-child {
      grid-column: auto;
      grid-row: auto;
    }
  .proj-gallery > li:first-child .name strong {
      font-size: 2.6rem;
    }
  .tech-list a {
      flex-wrap: wrap;
      gap: 1rem 1.6rem;
    }
  .tech-list strong {
      flex: 1;
    }
  .tech-list .desc {
      flex-basis: 100%;
      order: 4;
    }
  .tech-list .arr {
      order: 3;
    }
  .scope-list a,
    .process-list li {
      min-height: 0;
    }
  .cta .msg h2 {
      font-size: 2.8rem;
    }
  .cta .msg h2 br {
      display: none;
    }
}
@keyframes heroRise {from {opacity: 0;transform: translateY(3.2rem);} to {opacity: 1;transform: none;}}
@keyframes heroZoom {from {transform: scale(1.14);} to {transform: scale(1);}}
.sub-hero > .bg {animation: heroZoom 9s ease-out both;}
.sub-hero .hero-msg > * {animation: heroRise .9s ease both;}
.sub-hero .hero-msg > :nth-child(2) {animation-delay: .2s;}
.sub-hero .hero-msg > :nth-child(3) {animation-delay: .4s;}
.sub-hero .hero-foot {animation: heroRise .9s ease .6s both;}
.fx-progress {position: fixed;top: 0;left: 0;z-index: 200;width: 100%;height: .3rem;background: var(--color-primary);transform: scaleX(0);transform-origin: left;pointer-events: none;}
#header {transition: transform .4s ease, box-shadow .3s;}
#header.is-hide {transform: translateY(-100%);}
.fx-reveal {opacity: 0;transform: translateY(3.6rem);transition: opacity .8s ease, transform .8s ease;transition-delay: var(--d, 0s);}
.fx-reveal.is-in {opacity: 1;transform: none;}
.fx-parallax {scale: 1.14;will-change: transform;}
.cta-box > img {transition: scale .8s ease;}
.cta-box:hover > img {scale: 1.06;}
.tech-visual .badge {transition: transform .35s ease;}
.tech-visual:hover .badge {transform: translateY(-.6rem);}
.glance-list li,
.perf-list li,
.values li {transition: transform .35s ease;}
.glance-list li:hover, .perf-list li:hover {transform: translateY(-.8rem);}
.values li:hover {transform: translateY(-.5rem);}
.icon-box {transition: transform .35s ease;}
li:hover > .top .icon-box, a:hover > .icon-box {transform: scale(1.1) rotate(-6deg);}
.btn-dark, .link-more, .cta .go {transition: transform .25s ease, background .25s, color .25s;}
.btn-dark:hover, .cta .go:hover {transform: translateY(-.3rem);}
.footer-menu a, .policy a {transition: color .2s, padding .2s;}
.footer-menu a:hover {padding-left: .6rem;}
.quick a, .quick button {transition: transform .25s, background .25s, color .25s;}
.quick a:hover, .quick button:hover {transform: translateX(-.4rem);}
@media (max-width: 47.999em) {
  .quick a:hover, .quick button:hover {transform: none;}
}
@media (prefers-reduced-motion: reduce) {
  .fx-reveal {opacity: 1;transform: none;transition: none;}
  .fx-parallax {scale: 1;}
  .sub-hero > .bg, .sub-hero .hero-msg > *, .sub-hero .hero-foot {animation: none;}
  #header {transition: none;}
}
.sub-hero.is-plain {min-height: 30rem;background: var(--color-dark);}
.sub-hero.is-plain::before {display: none;}
.sub-board {padding-block: 6rem 10rem;}
.site-footer .admin ul {display: flex;gap: 1.6rem;}
.site-footer .admin a {font-size: 1.3rem;color: rgba(255,255,255,.6);}
.site-footer .admin a:hover {color: #fff;}

/* ============================================================
   서브 공통 컴포넌트 (모든 서브 페이지가 같은 규칙으로 구성됨)
   ============================================================ */
.sub-tabs {position: relative;z-index: 2;background: #fff;border-bottom: 1px solid var(--color-line);}
.sub-tabs ul {display: flex;max-width: var(--container-width);margin-inline: auto;padding-inline: var(--page-gutter);overflow-x: auto;scrollbar-width: none;-webkit-overflow-scrolling: touch;}
.sub-tabs li {flex: 0 0 auto;}
.sub-tabs ul::-webkit-scrollbar {display: none;}
.sub-tabs a {display: block;padding: 2.2rem 2.6rem;border-bottom: .3rem solid transparent;font-size: 1.6rem;font-weight: 700;white-space: nowrap;color: var(--color-text-sub);transition: color .25s, border-color .25s, background .25s;}
.sub-tabs a:hover {color: var(--color-text);background: var(--color-bg-warm);}
.sub-tabs a.is-on {color: var(--color-text);border-bottom-color: var(--color-primary);}
.sub-sec {padding: 9.6rem 0;}
.sub-sec.is-warm {background: var(--color-bg-warm);}
.sub-sec.is-dark {background: var(--color-dark);color: #fff;}
.sub-sec.is-dark .section-title {color: #fff;}
.sub-sec.is-dark .section-desc {color: rgba(255,255,255,.72);}
.sub-sec.is-dark .section-label {color: rgba(255,255,255,.72);}
.sub-sec + .sub-sec {padding-top: 0;}
.sub-sec.is-warm + .sub-sec, .sub-sec + .sub-sec.is-warm, .sub-sec.is-dark + .sub-sec, .sub-sec + .sub-sec.is-dark {padding-top: 9.6rem;}
.sub-sec .section-header {margin-bottom: 4.8rem;}
.sub-sec .section-header.is-col {margin-bottom: 4.8rem;}
.sub-lead {max-width: 90rem;font-size: 2.4rem;font-weight: 500;line-height: 1.6;letter-spacing: -.06rem;}
.sub-lead strong {color: var(--color-primary-dark);font-weight: 700;}
.btn-line {display: inline-flex;align-items: center;justify-content: center;gap: 1rem;min-height: 4.8rem;padding: 0 2.2rem;border: 1px solid var(--color-dark);border-radius: .4rem;font-size: 1.5rem;font-weight: 700;color: var(--color-text);background: transparent;transition: background .25s, color .25s, transform .25s;}
.btn-line:hover {background: var(--color-dark);color: #fff;transform: translateY(-.3rem);}
.btn-line .ico {width: 1.6rem;height: 1.6rem;}

/* 표: 회사 일반현황 등 */
.info-table {width: 100%;border-top: .2rem solid var(--color-dark);border-collapse: collapse;}
.info-table th, .info-table td {padding: 2.2rem 2.4rem;border-bottom: 1px solid var(--color-line);font-size: 1.7rem;line-height: 1.6;text-align: left;}
.info-table th {width: 22rem;font-weight: 700;background: var(--color-bg-warm);}
.info-table td {color: var(--color-text-sub);}

/* 카드형 목록: 핵심가치, 연구분야, 안전체계 등 */
.value-list {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 2rem;}
.value-list.col-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.value-list.col-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.value-list li {position: relative;display: flex;flex-direction: column;gap: 2.2rem;min-height: 30rem;padding: 3.4rem;border: 1px solid var(--color-line);border-radius: .4rem;background: #fff;transition: transform .3s, box-shadow .3s, border-color .3s;}
.value-list li:hover {transform: translateY(-.8rem);border-color: var(--color-primary);box-shadow: 0 1.6rem 3.6rem rgba(21,24,27,.1);}
.value-list .icon-circle {width: 6rem;height: 6rem;border-radius: 50%;background: var(--color-primary-soft);color: var(--color-primary);}
.value-list .icon-circle .ico {width: 2.6rem;height: 2.6rem;}
.value-list .idx {font-family: var(--font-mono);font-size: 1.4rem;font-weight: 700;color: var(--color-primary);}
.value-list h3 {font-size: 2.4rem;line-height: 1.3;letter-spacing: -.08rem;}
.value-list p {font-size: 1.6rem;line-height: 1.7;color: var(--color-text-sub);}
.value-list ul {display: flex;flex-direction: column;gap: .8rem;font-size: 1.5rem;color: var(--color-text-sub);}
.value-list ul li {min-height: 0;padding: 0 0 0 1.6rem;border: 0;box-shadow: none;}
.value-list ul li::before {content: '';position: absolute;left: 0;top: 1rem;width: .5rem;height: .5rem;border-radius: 50%;background: var(--color-primary);}
.value-list ul li:hover {transform: none;box-shadow: none;}
.sub-sec.is-dark .value-list li {border-color: rgba(255,255,255,.18);background: rgba(255,255,255,.04);}
.sub-sec.is-dark .value-list h3 {color: #fff;}
.sub-sec.is-dark .value-list p {color: rgba(255,255,255,.7);}
.sub-sec.is-dark .value-list .icon-circle {background: rgba(255,255,255,.1);}

/* 비전 박스 / CEO 인사말 */
.vision-box {display: grid;grid-template-columns: minmax(0, 1fr) 52rem;gap: 6rem;align-items: center;padding: 7rem 7.2rem;border-radius: .4rem;background: var(--color-dark);color: #fff;}
.vision-box .section-label {color: rgba(255,255,255,.72);}
.vision-box h3 {margin-top: 2.4rem;font-size: 4.4rem;line-height: 1.3;letter-spacing: -.15rem;}
.vision-box h3 strong {color: var(--color-primary);}
.vision-box p {font-size: 1.7rem;line-height: 1.8;color: rgba(255,255,255,.72);}
.vision-box .goals {display: flex;flex-direction: column;gap: 1.6rem;}
.vision-box .goals li {display: flex;align-items: baseline;gap: 2rem;padding-bottom: 1.6rem;border-bottom: 1px solid rgba(255,255,255,.18);}
.vision-box .goals b {flex: 0 0 8rem;font-family: var(--font-mono);font-size: 3.4rem;color: var(--color-primary);}
.vision-box .goals span {font-size: 1.7rem;line-height: 1.5;}
.msg-box {display: grid;grid-template-columns: 52rem minmax(0, 1fr);gap: 7.2rem;align-items: start;}
.msg-box .photo {position: relative;overflow: hidden;border-radius: .4rem;aspect-ratio: 4 / 5;background: var(--color-bg-warm);}
.msg-box .photo img {width: 100%;height: 100%;object-fit: cover;}
.msg-box .photo p {position: absolute;left: 0;bottom: 0;padding: 2rem 2.6rem;background: rgba(17,21,24,.78);font-size: 1.4rem;color: #fff;}
.msg-box .photo p strong {display: block;margin-bottom: .4rem;font-size: 2rem;}
.msg-box h3 {margin-bottom: 3.6rem;font-size: 4rem;line-height: 1.35;letter-spacing: -.12rem;}
.msg-box h3 strong {color: var(--color-primary-dark);}
.msg-box .body p {margin-bottom: 2.2rem;font-size: 1.8rem;line-height: 1.9;color: var(--color-text-sub);}
.msg-box .sign {display: flex;align-items: center;gap: 2rem;margin-top: 4rem;padding-top: 3.2rem;border-top: 1px solid var(--color-line);font-size: 1.7rem;color: var(--color-text-sub);}
.msg-box .sign strong {font-size: 3rem;font-weight: 700;letter-spacing: .3rem;color: var(--color-text);}

/* 연혁 */
.timeline {position: relative;display: flex;flex-direction: column;}
.timeline::before {content: '';position: absolute;left: 21.4rem;top: 1rem;bottom: 1rem;width: .2rem;background: var(--color-line);}
.timeline > li {position: relative;display: grid;grid-template-columns: 18rem minmax(0, 1fr);gap: 6.4rem;padding-bottom: 6rem;}
.timeline > li:last-child {padding-bottom: 0;}
.timeline > li::before {content: '';position: absolute;left: 20.7rem;top: 1.2rem;width: 1.4rem;height: 1.4rem;border: .3rem solid var(--color-primary);border-radius: 50%;background: #fff;}
.timeline .year {font-family: var(--font-mono);font-size: 4.4rem;font-weight: 700;line-height: 1;letter-spacing: -.1rem;}
.timeline .year small {display: block;margin-top: 1rem;font-family: var(--font-base);font-size: 1.4rem;font-weight: 500;letter-spacing: 0;color: var(--color-text-mute);}
.timeline ul {display: flex;flex-direction: column;gap: 1.4rem;}
.timeline ul li {display: flex;gap: 2.4rem;padding: 2rem 2.6rem;border: 1px solid var(--color-line);border-radius: .4rem;background: #fff;font-size: 1.7rem;line-height: 1.6;transition: border-color .3s, transform .3s;}
.timeline ul li:hover {border-color: var(--color-primary);transform: translateX(.6rem);}
.timeline ul li b {flex: 0 0 5rem;font-family: var(--font-mono);font-size: 1.5rem;color: var(--color-primary);}

/* 조직도 */
.org {display: flex;flex-direction: column;align-items: center;gap: 0;}
.org-node {display: flex;flex-direction: column;align-items: center;justify-content: center;min-width: 26rem;min-height: 7.6rem;padding: 1.6rem 3rem;border: 1px solid var(--color-line);border-radius: .4rem;background: #fff;font-size: 1.8rem;font-weight: 700;text-align: center;}
.org-node small {margin-top: .4rem;font-size: 1.3rem;font-weight: 500;color: var(--color-text-mute);}
.org-node.is-top {min-width: 34rem;border-color: var(--color-dark);background: var(--color-dark);color: #fff;}
.org-node.is-top small {color: rgba(255,255,255,.7);}
.org-node.is-mid {border-color: var(--color-primary);background: var(--color-primary);color: #fff;}
.org-node.is-mid small {color: rgba(255,255,255,.8);}
.org-line {width: .2rem;height: 3.6rem;background: var(--color-line);}
.org-row {position: relative;display: grid;grid-auto-flow: column;grid-auto-columns: minmax(0, 1fr);gap: 2rem;width: 100%;padding-top: 3.6rem;}
.org-row::before {content: '';position: absolute;top: 0;left: calc(100% / var(--n, 4) / 2);right: calc(100% / var(--n, 4) / 2);height: .2rem;background: var(--color-line);}
.org-col {position: relative;display: flex;flex-direction: column;align-items: stretch;gap: 1rem;}
.org-col::before {content: '';position: absolute;top: -3.6rem;left: 50%;width: .2rem;height: 3.6rem;background: var(--color-line);}
.org-col .org-node {min-width: 0;}
.org-col ul {flex: 1;display: flex;flex-direction: column;gap: .8rem;padding: 1.6rem 1.8rem;border-radius: .4rem;background: var(--color-bg-warm);font-size: 1.5rem;color: var(--color-text-sub);text-align: center;}

/* CI */
.ci-grid {display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap: 2rem;}
.ci-box {display: flex;flex-direction: column;justify-content: space-between;gap: 3rem;min-height: 40rem;padding: 4rem;border: 1px solid var(--color-line);border-radius: .4rem;background: #fff;}
.ci-box.is-dark {border-color: var(--color-dark);background: var(--color-dark);color: #fff;}
.ci-box .tit {font-size: 1.5rem;font-weight: 700;color: var(--color-text-mute);}
.ci-box.is-dark .tit {color: rgba(255,255,255,.6);}
.ci-logo {display: flex;align-items: center;justify-content: center;flex: 1;gap: 2.4rem;}
.ci-logo .logo-symbol {transform: scale(2.4);}
.ci-logo .logo-word strong {font-size: 4rem;}
.ci-logo .logo-word em {font-size: 1.3rem;}
.ci-box.is-dark .logo-word, .ci-box.is-dark .logo-word strong, .ci-box.is-dark .logo-word em {color: #fff;}
.ci-box .desc {font-size: 1.6rem;line-height: 1.7;color: var(--color-text-sub);}
.ci-box.is-dark .desc {color: rgba(255,255,255,.7);}
.palette {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 2rem;}
.palette li {overflow: hidden;border: 1px solid var(--color-line);border-radius: .4rem;background: #fff;}
.palette .chip {display: block;height: 14rem;}
.palette .txt {display: flex;flex-direction: column;gap: .6rem;padding: 2rem 2.2rem;}
.palette .txt strong {font-size: 1.7rem;}
.palette .txt span {font-family: var(--font-mono);font-size: 1.3rem;color: var(--color-text-sub);}
.rule-list {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 2rem;}
.rule-list li {padding: 3rem;border-radius: .4rem;background: var(--color-bg-warm);}
.rule-list h3 {margin-bottom: 1.2rem;font-size: 2rem;}
.rule-list p {font-size: 1.5rem;line-height: 1.7;color: var(--color-text-sub);}

/* 오시는 길 */
.way-wrap {display: grid;grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);gap: 2rem;}
.way-map {position: relative;overflow: hidden;min-height: 52rem;border-radius: .4rem;background: var(--color-bg-warm);}
.way-map img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;filter: grayscale(.2);}
.way-map .pin {position: absolute;left: 50%;top: 46%;display: grid;place-items: center;width: 6.4rem;height: 6.4rem;margin: -3.2rem 0 0 -3.2rem;border-radius: 50%;background: var(--color-primary);box-shadow: 0 0 0 1.2rem rgba(241,90,36,.25);color: #fff;animation: pinPulse 2.4s ease-in-out infinite;}
.way-map .pin .ico {width: 2.8rem;height: 2.8rem;}
.way-map .addr {position: absolute;left: 2.4rem;bottom: 2.4rem;padding: 2rem 2.6rem;border-radius: .4rem;background: #fff;font-size: 1.6rem;line-height: 1.6;}
.way-map .addr strong {display: block;margin-bottom: .4rem;font-size: 2rem;}
@keyframes pinPulse {50% {box-shadow: 0 0 0 2.4rem rgba(241,90,36,.05);}}
.way-info {display: flex;flex-direction: column;gap: 2rem;}
.way-info .box {flex: 1;padding: 3.2rem;border: 1px solid var(--color-line);border-radius: .4rem;}
.way-info h3 {display: flex;align-items: center;gap: 1rem;margin-bottom: 1.6rem;font-size: 2rem;}
.way-info h3 .ico {width: 2.4rem;height: 2.4rem;color: var(--color-primary);}
.way-info dl {display: grid;grid-template-columns: 8rem minmax(0, 1fr);gap: 1rem 1.6rem;font-size: 1.6rem;line-height: 1.6;}
.way-info dt {font-weight: 700;}
.way-info dd {color: var(--color-text-sub);}

/* 프로젝트: 카드 그리드, 진행 표 */
.proj-grid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 2rem;}
.proj-grid li {height: 40rem;}
.proj-grid .proj-card .name strong {font-size: 2.4rem;}
.proj-count {margin-bottom: 2.4rem;font-size: 1.6rem;color: var(--color-text-sub);}
.proj-count b {color: var(--color-primary-dark);}

/* 데이터 표 (진행중 프로젝트, 특허, 채용공고) */
.data-table {width: 100%;border-top: .2rem solid var(--color-dark);border-collapse: collapse;}
.data-table th, .data-table td {padding: 2rem 1.6rem;border-bottom: 1px solid var(--color-line);font-size: 1.6rem;line-height: 1.5;text-align: left;vertical-align: middle;}
.data-table th {font-size: 1.5rem;font-weight: 700;background: var(--color-bg-warm);}
.data-table tbody tr {transition: background .2s;}
.data-table tbody tr:hover {background: #faf9f7;}
.data-table .tit {font-weight: 700;}
.data-table .num {font-family: var(--font-mono);color: var(--color-text-sub);}
.data-table .c {text-align: center;}
.state {display: inline-block;padding: .5rem 1.2rem;border-radius: 10rem;font-size: 1.3rem;font-weight: 700;background: var(--color-bg-warm);color: var(--color-text-sub);}
.state.is-open {background: var(--color-primary-soft);color: var(--color-primary-dark);}
.state.is-end {background: #eceeef;color: var(--color-text-mute);}
.gauge {position: relative;display: block;width: 100%;min-width: 12rem;height: .8rem;border-radius: 1rem;background: var(--color-line);}
.gauge i {position: absolute;inset: 0 auto 0 0;width: var(--v, 50%);border-radius: 1rem;background: var(--color-primary);}
.gauge-txt {display: flex;align-items: center;gap: 1.2rem;font-family: var(--font-mono);font-size: 1.4rem;}

/* 게시판형 목록 (회사소식, 공지사항, 보도자료) */
.board-tool {display: flex;align-items: center;justify-content: space-between;gap: 2rem;margin-bottom: 2.4rem;}
.board-tool .total {font-size: 1.6rem;color: var(--color-text-sub);}
.board-tool .total b {color: var(--color-primary-dark);}
.board-search {display: flex;gap: .8rem;}
.board-search select, .board-search input {height: 4.8rem;padding: 0 1.6rem;border: 1px solid var(--color-line);border-radius: .4rem;font: inherit;font-size: 1.5rem;background: #fff;}
.board-search input {width: 26rem;}
.board-search button {height: 4.8rem;padding: 0 2.4rem;border: 0;border-radius: .4rem;background: var(--color-dark);font: inherit;font-size: 1.5rem;font-weight: 700;color: #fff;cursor: pointer;transition: background .25s;}
.board-search button:hover {background: var(--color-primary);}
.board-list {border-top: .2rem solid var(--color-dark);}
.board-list li a {display: grid;grid-template-columns: 8rem minmax(0, 1fr) 14rem 8rem;gap: 2rem;align-items: center;padding: 2.4rem 1.6rem;border-bottom: 1px solid var(--color-line);font-size: 1.7rem;transition: background .2s, padding .25s;}
.board-list li a:hover {padding-left: 2.4rem;background: #faf9f7;}
.board-list .no {font-family: var(--font-mono);font-size: 1.5rem;color: var(--color-text-mute);}
.board-list .no.is-notice {display: inline-block;padding: .4rem 1rem;border-radius: .4rem;background: var(--color-primary);font-family: var(--font-base);font-size: 1.2rem;font-weight: 700;text-align: center;color: #fff;}
.board-list .sbj {overflow: hidden;font-weight: 500;text-overflow: ellipsis;white-space: nowrap;}
.board-list .sbj em {margin-right: 1rem;font-style: normal;font-size: 1.3rem;font-weight: 700;color: var(--color-primary-dark);}
.board-list .date, .board-list .hit {font-family: var(--font-mono);font-size: 1.4rem;color: var(--color-text-mute);text-align: right;}
.board-head {display: grid;grid-template-columns: 8rem minmax(0, 1fr) 14rem 8rem;gap: 2rem;padding: 1.8rem 1.6rem;border-bottom: 1px solid var(--color-line);background: var(--color-bg-warm);font-size: 1.5rem;font-weight: 700;}
.board-head span:nth-child(3), .board-head span:nth-child(4) {text-align: right;}
.pagination {display: flex;justify-content: center;gap: .8rem;margin-top: 5rem;}
.pagination a {display: grid;place-items: center;min-width: 4.6rem;height: 4.6rem;padding: 0 1rem;border: 1px solid var(--color-line);border-radius: .4rem;font-family: var(--font-mono);font-size: 1.5rem;transition: background .25s, color .25s, border-color .25s;}
.pagination a:hover {border-color: var(--color-dark);}
.pagination a.is-on {border-color: var(--color-dark);background: var(--color-dark);color: #fff;}

/* 영상, 브로슈어, 다운로드 */
.video-list {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 3rem 2rem;}
.video-list a {display: flex;flex-direction: column;gap: 2rem;}
.video-list .thumb {position: relative;overflow: hidden;border-radius: .4rem;aspect-ratio: 16 / 10;background: var(--color-dark);}
.video-list .thumb img {width: 100%;height: 100%;object-fit: cover;transition: transform .6s ease, opacity .3s;opacity: .85;}
.video-list a:hover .thumb img {transform: scale(1.06);opacity: 1;}
.video-list .play {position: absolute;left: 50%;top: 50%;display: grid;place-items: center;width: 7rem;height: 7rem;margin: -3.5rem 0 0 -3.5rem;border-radius: 50%;background: var(--color-primary);transition: transform .3s;}
.video-list a:hover .play {transform: scale(1.12);}
.video-list .play::before {content: '';margin-left: .5rem;border-left: 1.8rem solid #fff;border-top: 1.1rem solid transparent;border-bottom: 1.1rem solid transparent;}
.video-list .len {position: absolute;right: 1.4rem;bottom: 1.4rem;padding: .4rem 1rem;border-radius: .4rem;background: rgba(17,21,24,.78);font-family: var(--font-mono);font-size: 1.3rem;color: #fff;}
.video-list h3 {font-size: 2rem;line-height: 1.4;letter-spacing: -.06rem;}
.video-list time {font-family: var(--font-mono);font-size: 1.4rem;color: var(--color-text-mute);}
.book-list {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 2rem;}
.book-list li {display: flex;flex-direction: column;gap: 2.4rem;padding: 3rem;border: 1px solid var(--color-line);border-radius: .4rem;background: #fff;transition: transform .3s, box-shadow .3s, border-color .3s;}
.book-list li:hover {transform: translateY(-.8rem);border-color: var(--color-primary);box-shadow: 0 1.6rem 3.6rem rgba(21,24,27,.1);}
.book-list .cover {position: relative;display: flex;flex-direction: column;justify-content: space-between;aspect-ratio: 3 / 4;padding: 2.8rem;border-radius: .4rem;background: var(--color-dark);color: #fff;overflow: hidden;}
.book-list .cover::after {content: '';position: absolute;right: -6rem;bottom: -6rem;width: 22rem;height: 22rem;border-radius: 50%;background: var(--color-primary);opacity: .9;}
.book-list .cover .logo-symbol {transform-origin: left top;transform: scale(1.3);}
.book-list .cover strong {position: relative;z-index: 1;font-size: 2.8rem;line-height: 1.3;letter-spacing: -.1rem;}
.book-list .cover em {position: relative;z-index: 1;font-family: var(--font-mono);font-size: 1.3rem;font-style: normal;color: rgba(255,255,255,.7);}
.book-list h3 {font-size: 2.2rem;}
.book-list p {font-size: 1.5rem;line-height: 1.6;color: var(--color-text-sub);}
.file-list {border-top: .2rem solid var(--color-dark);}
.file-list li {display: grid;grid-template-columns: 6rem minmax(0, 1fr) auto;gap: 2.4rem;align-items: center;padding: 2.6rem 1.6rem;border-bottom: 1px solid var(--color-line);transition: background .2s;}
.file-list li:hover {background: #faf9f7;}
.file-list .ext {display: grid;place-items: center;width: 6rem;height: 6rem;border-radius: .4rem;background: var(--color-primary-soft);font-family: var(--font-mono);font-size: 1.4rem;font-weight: 700;color: var(--color-primary-dark);}
.file-list h3 {margin-bottom: .6rem;font-size: 1.9rem;}
.file-list p {font-size: 1.4rem;color: var(--color-text-mute);}

/* 정책, 원칙 목록 (ESG, 윤리, 준법, 품질, 안전) */
.policy-list {border-top: .2rem solid var(--color-dark);}
.policy-list li {display: grid;grid-template-columns: 12rem 34rem minmax(0, 1fr);gap: 3rem;align-items: start;padding: 3.4rem 1.6rem;border-bottom: 1px solid var(--color-line);transition: background .2s;}
.policy-list li:hover {background: #faf9f7;}
.policy-list .idx {font-family: var(--font-mono);font-size: 3.4rem;font-weight: 700;line-height: 1;color: var(--color-primary);}
.policy-list h3 {font-size: 2.4rem;line-height: 1.35;letter-spacing: -.08rem;}
.policy-list p {font-size: 1.7rem;line-height: 1.8;color: var(--color-text-sub);}
.notice-box {display: flex;align-items: center;justify-content: space-between;gap: 4rem;padding: 5rem 6rem;border-radius: .4rem;background: var(--color-dark);color: #fff;}
.notice-box h3 {margin-bottom: 1.4rem;font-size: 3.2rem;letter-spacing: -.1rem;}
.notice-box p {font-size: 1.7rem;line-height: 1.7;color: rgba(255,255,255,.72);}
.notice-box ul {display: flex;flex-direction: column;gap: 1rem;min-width: 38rem;font-size: 1.6rem;}
.notice-box ul li {display: flex;gap: 1.6rem;padding-bottom: 1rem;border-bottom: 1px solid rgba(255,255,255,.18);}
.notice-box ul b {flex: 0 0 8rem;color: var(--color-primary);}

/* 인증서, 채용 */
.cert-grid {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 2rem;}
.cert-grid li {display: flex;flex-direction: column;gap: 2rem;padding: 2.4rem;border: 1px solid var(--color-line);border-radius: .4rem;background: #fff;transition: transform .3s, box-shadow .3s, border-color .3s;}
.cert-grid li:hover {transform: translateY(-.8rem);border-color: var(--color-primary);box-shadow: 0 1.6rem 3.6rem rgba(21,24,27,.1);}
.cert-grid .paper {position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 1.2rem;aspect-ratio: 3 / 4;border: .6rem double var(--color-line);background: linear-gradient(180deg, #fff, var(--color-bg-warm));text-align: center;}
.cert-grid .paper .ico {width: 4.8rem;height: 4.8rem;color: var(--color-primary);}
.cert-grid .paper strong {font-size: 2.2rem;line-height: 1.3;}
.cert-grid .paper span {font-family: var(--font-mono);font-size: 1.3rem;color: var(--color-text-mute);}
.cert-grid h3 {font-size: 1.9rem;}
.cert-grid p {font-size: 1.4rem;line-height: 1.6;color: var(--color-text-sub);}
.talent-list {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 2rem;}

@media (max-width: 79.999em) {
.value-list {grid-template-columns: repeat(2, minmax(0, 1fr));}
.vision-box {grid-template-columns: 1fr;padding: 5rem;}
.msg-box {grid-template-columns: 38rem minmax(0, 1fr);gap: 4rem;}
.policy-list li {grid-template-columns: 8rem 26rem minmax(0, 1fr);gap: 2rem;}
.cert-grid, .palette {grid-template-columns: repeat(2, minmax(0, 1fr));}
.proj-grid, .video-list, .book-list {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 63.999em) {
.sub-sec {padding: 7rem 0;}
.sub-lead {font-size: 2rem;}
.value-list.col-3, .rule-list, .talent-list {grid-template-columns: repeat(2, minmax(0, 1fr));}
.msg-box, .way-wrap, .ci-grid {grid-template-columns: 1fr;}
.msg-box .photo {aspect-ratio: 16 / 10;}
.timeline::before {left: .7rem;}
.timeline > li {grid-template-columns: 1fr;gap: 2rem;padding-left: 4rem;}
.timeline > li::before {left: 0;}
.org-row {grid-auto-flow: row;padding-top: 0;}
.org-row::before, .org-col::before {display: none;}
.org-line {height: 2.4rem;}
.notice-box {flex-direction: column;align-items: flex-start;padding: 4rem;}
.notice-box ul {min-width: 0;width: 100%;}
.data-table {display: block;overflow-x: auto;white-space: nowrap;}
.board-head {display: none;}
.board-list li a {grid-template-columns: minmax(0, 1fr) auto;gap: .6rem 2rem;}
.board-list .no {display: none;}
.board-list .hit {display: none;}
.board-tool {flex-direction: column;align-items: flex-start;}
.board-search input {width: 18rem;}
}
@media (max-width: 47.999em) {
.sub-sec {padding: 5.6rem 0;}
.sub-lead {font-size: 1.8rem;}
.sub-tabs a {padding: 1.8rem 1.8rem;font-size: 1.5rem;}
.value-list, .value-list.col-3, .value-list.col-2, .rule-list, .talent-list, .palette, .cert-grid, .proj-grid, .video-list, .book-list {grid-template-columns: 1fr;}
.value-list li {min-height: 0;padding: 2.6rem;}
.vision-box {padding: 3.4rem 2.4rem;}
.vision-box h3 {font-size: 3rem;}
.msg-box h3 {font-size: 2.8rem;}
.info-table th {width: 12rem;padding: 1.6rem;}
.info-table td {padding: 1.6rem;}
.timeline .year {font-size: 3.4rem;}
.timeline ul li {flex-direction: column;gap: .6rem;}
.way-map {min-height: 36rem;}
.policy-list li {grid-template-columns: 1fr;gap: 1rem;}
.file-list li {grid-template-columns: 5rem minmax(0, 1fr);}
.file-list li .btn-line {grid-column: 1 / -1;}
.notice-box h3 {font-size: 2.4rem;}
.proj-grid li {height: 32rem;}
}
@media (prefers-reduced-motion: reduce) {
.way-map .pin {animation: none;}
}