/* ==========================================================================
   SEED - 서브페이지 (style.css 다음에 로드)
   ========================================================================== */

/* 공통: 상단 타이틀 / 비주얼 / 버튼 / 하단 배너
   ========================================================================== */
.sub-hero { padding: calc(106px + var(--section-y)) var(--gutter) var(--section-y); display: flex; flex-direction: column; gap: 24px; }
.sub-hero__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.sub-hero .sub-label { font-size: var(--fs-t4); }

.sub-visual { position: relative; height: min(100vh, 980px); min-height: 560px; overflow: hidden; color: #fff; }
.sub-visual__media { position: absolute; inset: 0; overflow: hidden; }
.sub-visual__media img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.sub-visual__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.sub-visual__txt {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(100% - var(--gutter) * 2); text-align: center;
  font-size: var(--fs-t1); font-weight: 600; line-height: 1.4;
}

.btn-square {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 17px 24px; background: var(--brand); color: #fff;
  font-size: 16px; font-weight: 500; line-height: 1.4;
  transition: background .3s, gap .4s var(--ease-out);
}
.btn-square:hover { background: var(--brand-dark); gap: 24px; }

.cta-banner { padding: var(--section-y) var(--gutter) calc(var(--section-y) + 40px); }
.cta-banner__inner {
  position: relative; height: 420px; overflow: hidden;
  display: flex; align-items: center; padding: 0 80px;
  background: linear-gradient(103deg, #dcefe4 0%, #eef7f2 24%, #f8fbf9 55%, #fff 79%, #d6e8f5 100%);
}
.cta-banner__inner::before, .cta-banner__inner::after {
  content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(46, 125, 85, .18);
}
.cta-banner__inner::before { width: 560px; height: 560px; left: -200px; top: -200px; box-shadow: 0 0 0 80px rgba(46, 125, 85, .04); }
.cta-banner__inner::after { width: 410px; height: 410px; right: 120px; bottom: -280px; }
.cta-banner__img { position: absolute; right: 0; top: 50%; width: min(1043px, 60%); transform: translateY(-50%); mix-blend-mode: multiply; }
.cta-banner__txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.cta-banner__title { font-size: clamp(26px, 2.08vw, 40px); font-weight: 600; line-height: 1.3; }
.cta-banner__title em { font-style: normal; color: var(--brand); }
.cta-banner .link-arrow { font-size: 16px; }

.c-head { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.c-head__title { font-size: clamp(28px, 2.08vw, 40px); font-weight: 600; line-height: 1.3; }

/* 회사소개 (about.html)
   ========================================================================== */
.overview { padding: var(--section-y) var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 64px; }
.overview__img { width: min(1000px, 100%); aspect-ratio: 1000 / 560; overflow: hidden; }
.overview__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.overview__desc { max-width: 900px; text-align: center; font-size: var(--fs-t4); font-weight: 500; line-height: 1.6; }
.overview__desc .char { color: var(--border-default); }

.split { display: grid; grid-template-columns: 1fr 1fr; min-height: min(100vh, 980px); background: var(--bg-subtle); }
.split__media { position: relative; overflow: hidden; min-height: 420px; }
.split__media img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; }
.split__body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; padding: 80px var(--gutter); text-align: center; }
.split__txt { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 742px; }
.split__label { font-size: 16px; font-weight: 600; color: var(--brand); }
.split__title { font-size: clamp(28px, 2.08vw, 40px); font-weight: 600; line-height: 1.3; }
.split__desc { font-size: 16px; line-height: 1.6; color: var(--content-subtle); }
.split--reverse .split__media { order: 2; }
.split__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.split__tags li { padding: 6px 14px; background: #fff; font-size: 14px; font-weight: 500; }

.profile { padding: var(--section-y) var(--gutter); }
.profile__inner { max-width: 1760px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.profile__name { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.brand-card { display: flex; flex-direction: column; }
.brand-card__desc { margin-top: 20px; font-size: var(--fs-b2); line-height: 1.6; color: var(--content-subtle); }
.brand-card__visual {
  position: relative; margin-top: 40px; flex: 1; min-height: 220px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: linear-gradient(135deg, var(--brand-light), #f7fbf9 60%, #eaf3f8);
}
.brand-card__visual::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%);
  border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 22px, rgba(46, 125, 85, .1) 22px 23px);
}
.brand-card__visual img { position: relative; width: auto; height: 60px; }
.brand-card__visual p { position: relative; font-size: var(--fs-b1); font-weight: 600; color: var(--brand); }
.brand-card__keys { margin-top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.brand-card__keys li { display: flex; flex-direction: column; gap: 4px; padding: 20px; background: var(--bg-subtle); }
.brand-card__keys strong { font-size: var(--fs-b1); font-weight: 600; }
.brand-card__keys span { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--content-muted); }
.info-table { border-top: 2px solid var(--content-default); }
.info-table > div { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 22px 8px; border-bottom: 1px solid var(--border-default); }
.info-table dt { font-size: 16px; font-weight: 600; }
.info-table dd { font-size: 16px; line-height: 1.5; color: var(--content-subtle); }
.info-table a:hover { color: var(--brand); }

.exp-table { padding: 0 var(--gutter) var(--section-y); }
.exp-table__inner { max-width: 1760px; margin: 0 auto; }
.exp-table__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.exp-table__head .section-desc { margin-top: 0; }
.exp-table__list { border-top: 2px solid var(--content-default); }
.exp-table__list li {
  display: grid; grid-template-columns: 1fr 1.6fr 140px; align-items: center; gap: 24px;
  padding: 32px 8px; border-bottom: 1px solid var(--border-default); transition: background .3s;
}
.exp-table__list li:hover { background: var(--bg-subtle); }
.exp-table__list h3 { font-size: var(--fs-t4); font-weight: 600; line-height: 1.35; }
.exp-table__list p { font-size: var(--fs-b2); line-height: 1.5; color: var(--content-subtle); }
.exp-table__list strong { justify-self: end; padding: 6px 14px; border-radius: 999px; background: var(--brand-light); font-size: 14px; font-weight: 600; color: var(--brand); white-space: nowrap; }

/* 구축 프로세스 (process.html)
   ========================================================================== */
.bigtype { position: relative; height: 100vh; min-height: 600px; overflow: hidden; color: #fff; background: #111; }
.bigtype__bg { position: absolute; inset: 0; }
.bigtype__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .55; }
.bigtype__word {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: clamp(96px, 22vw, 420px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; white-space: nowrap;
}
.bigtype__side { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 12%; max-width: 680px; display: flex; flex-direction: column; gap: 16px; }
.bigtype__side h2 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.bigtype__side p { font-size: var(--fs-b2); line-height: 1.6; opacity: .85; }

.timeline { padding: var(--section-y) var(--gutter); }
.tl-group { max-width: 1760px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; padding: 80px 0; border-top: 1px solid var(--border-default); }
.tl-group:first-child { border-top: 0; padding-top: 0; }
.tl-group__aside { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; gap: 16px; }
.tl-group__no { font-size: clamp(48px, 4.17vw, 80px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.tl-group__no span { color: var(--brand); }
.tl-group__title { font-size: var(--fs-t1); font-weight: 600; line-height: 1.3; }
.tl-group__desc { font-size: var(--fs-b2); line-height: 1.5; color: var(--content-subtle); }
.tl-group__img { margin-top: 16px; aspect-ratio: 16 / 10; overflow: hidden; }
.tl-group__img img { width: 100%; height: 100%; object-fit: cover; }
.tl-list > li { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--border-default); }
.tl-list > li:first-child { padding-top: 0; }
.tl-list__no { font-size: var(--fs-t4); font-weight: 600; color: var(--brand); }
.tl-list h3 { font-size: var(--fs-t1); font-weight: 600; line-height: 1.3; }
.tl-list p { margin-top: 12px; font-size: var(--fs-b2); line-height: 1.6; color: var(--content-subtle); }
.tl-tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.tl-tags li { padding: 6px 14px; background: var(--bg-subtle); font-size: 14px; font-weight: 500; }

/* 기술 구성 (tech.html)
   ========================================================================== */
.statement { position: relative; height: 100vh; min-height: 600px; overflow: hidden; background: #fff; }
.statement__bg { position: absolute; inset: 0; }
.statement__bg img { width: 100%; height: 100%; object-fit: cover; }
.statement__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.statement__rings {
  position: absolute; left: 50%; top: 50%; width: min(860px, 92vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; opacity: 0;
  background: repeating-radial-gradient(circle, transparent 0 22px, rgba(46, 125, 85, .18) 22px 23px);
  -webkit-mask: radial-gradient(circle, #000 55%, transparent 71%); mask: radial-gradient(circle, #000 55%, transparent 71%);
}
.statement__words {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .3em;
  color: #fff; font-size: clamp(40px, 7.3vw, 140px); font-weight: 700; letter-spacing: -0.03em; line-height: 1;
}
.statement__words span { display: inline-flex; flex-direction: column; align-items: center; gap: 20px; }
.statement__words small { font-size: clamp(14px, 1.04vw, 20px); font-weight: 500; letter-spacing: .4em; }
.statement__desc {
  position: absolute; left: 50%; top: calc(50% + clamp(90px, 9vw, 160px)); transform: translateX(-50%);
  width: calc(100% - var(--gutter) * 2); max-width: 720px; text-align: center;
  font-size: var(--fs-b1); line-height: 1.6; color: var(--content-subtle); opacity: 0;
}

.layers { position: relative; height: 100vh; min-height: 640px; overflow: hidden; }
.layers__ring {
  position: absolute; left: 50%; top: 50%; width: min(760px, 92vw, 80vh); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 18px, rgba(17, 17, 17, .07) 18px 19px);
}
.layers__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.layers__ring circle { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 80; transition: stroke-dashoffset .9s var(--ease-out); }
.layers__nav { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; }
.layers__nav li { font-size: var(--fs-b1); font-weight: 600; color: var(--border-default); transition: color .4s; display: flex; align-items: center; gap: 10px; }
.layers__nav li::before { content: ""; width: 0; height: 2px; background: var(--brand); transition: width .4s var(--ease-out); }
.layers__nav li.is-active { color: var(--content-default); }
.layers__nav li.is-active::before { width: 24px; }
.layers__item {
  position: absolute; left: 50%; top: 50%; width: min(560px, 80vw); transform: translate(-50%, -40%);
  display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity .5s, transform .8s var(--ease-out), visibility .5s;
}
.layers__item.is-active { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.layers__item small { font-size: 16px; font-weight: 600; color: var(--brand); }
.layers__item h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; }
.layers__item p { font-size: var(--fs-b2); line-height: 1.6; color: var(--content-subtle); }
.layers__item ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.layers__item li { padding: 8px 16px; background: #fff; border: 1px solid var(--border-default); font-size: 15px; font-weight: 500; }

.integration { padding: var(--section-y) var(--gutter); background: var(--bg-subtle); }
.integration__inner { max-width: 1760px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: center; }
.integration__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.integration__list li { display: flex; flex-direction: column; gap: 12px; padding: 40px 32px; background: #fff; }
.integration__list i { font-style: normal; font-size: 14px; font-weight: 600; color: var(--brand); }
.integration__list strong { font-size: var(--fs-t4); font-weight: 600; }
.integration__list span { font-size: 15px; line-height: 1.5; color: var(--content-subtle); }

.stack-visual { position: relative; min-height: min(100vh, 980px); display: flex; align-items: center; padding: var(--section-y) var(--gutter); color: #fff; overflow: hidden; }
.stack-visual__bg { position: absolute; inset: 0; }
.stack-visual__bg img { width: 100%; height: 100%; object-fit: cover; }
.stack-visual__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
.stack-visual__inner { position: relative; width: 100%; max-width: 1760px; margin: 0 auto; }
.stack-visual__title { text-align: center; font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; margin-bottom: 80px; }
.stack-visual .stack { margin-top: 0; }
.stack-visual .stack li { border-top-color: rgba(255, 255, 255, .5); }
.stack-visual .stack p { color: rgba(255, 255, 255, .8); }

/* 유지보수 (support.html)
   ========================================================================== */
.dim-cards { position: relative; height: 100vh; min-height: 680px; overflow: hidden; color: #fff; }
.dim-cards__bg { position: absolute; inset: 0; }
.dim-cards__bg img { width: 100%; height: 100%; object-fit: cover; }
.dim-cards__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.dim-cards__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: 0 var(--gutter); }
.dim-cards__title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-t4); font-weight: 600; }
.dim-cards__title b { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--brand); font-size: 14px; }
.dim-cards__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.svc-card { display: flex; flex-direction: column; gap: 20px; min-height: 260px; padding: 28px; background: rgba(17, 17, 17, .55); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .3s, border-color .3s; }
.svc-card:hover { background: rgba(46, 125, 85, .85); border-color: transparent; }
.svc-card__tags { display: flex; gap: 6px; }
.svc-card__tags span { padding: 2px 8px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .12); }
.svc-card__tags span:first-child { background: var(--brand); }
.svc-card h3 { font-size: var(--fs-t4); font-weight: 600; line-height: 1.35; }
.svc-card ul { margin-top: auto; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: rgba(255, 255, 255, .8); }
.svc-card ul li::before { content: "· "; }

.marquee-sec { padding: var(--section-y) 0; overflow: hidden; }
.marquee-sec__head { padding: 0 var(--gutter); margin-bottom: 48px; }
.marquee { display: flex; width: max-content; animation: marquee 50s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee__group { display: flex; gap: 16px; padding-right: 16px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.mq-card { flex: none; width: 320px; height: 320px; overflow: hidden; position: relative; }
.mq-card img { width: 100%; height: 100%; object-fit: cover; }
.mq-card--txt { display: flex; flex-direction: column; padding: 32px; background: var(--brand-light); }
.mq-card--alt { background: #eef3f8; }
.mq-card__no { font-size: 14px; font-weight: 600; color: var(--brand); }
.mq-card--txt h3 { margin-top: 12px; font-size: var(--fs-t1); font-weight: 600; line-height: 1.3; }
.mq-card--txt p { margin-top: auto; font-size: 16px; line-height: 1.5; color: var(--content-subtle); }

.ways { padding: var(--section-y) var(--gutter); background: var(--bg-subtle); }
.ways__inner { max-width: 1760px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.ways__aside { position: sticky; top: 140px; align-self: start; display: flex; flex-direction: column; gap: 24px; }
.ways__aside h2 { font-size: clamp(28px, 2.08vw, 40px); font-weight: 600; line-height: 1.3; }
.ways__aside p { font-size: var(--fs-b2); line-height: 1.6; color: var(--content-subtle); }
.ways__aside .btn-square { align-self: flex-start; }
.ways__col { display: flex; flex-direction: column; gap: 80px; }
.ways__col--2 { padding-top: 240px; }
.way-card { display: flex; flex-direction: column; gap: 16px; }
.way-card__img { aspect-ratio: 4 / 5; overflow: hidden; }
.way-card__img img { width: 100%; height: 100%; object-fit: cover; }
.way-card__tag { align-self: flex-start; padding: 2px 10px; background: var(--brand-light); color: var(--brand); font-size: 13px; font-weight: 600; border-radius: 999px; }
.way-card h3 { font-size: var(--fs-t4); font-weight: 600; line-height: 1.35; }
.way-card p { font-size: 15px; line-height: 1.5; color: var(--content-muted); }

/* Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .dim-cards__grid { grid-template-columns: repeat(3, 1fr); }
  .ways__inner { grid-template-columns: 1fr 1fr; }
  .ways__aside { position: static; grid-column: 1 / -1; }
  .ways__col--2 { padding-top: 120px; }
  .integration__inner { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 1024px) {
  .split, .profile__inner, .tl-group { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split { min-height: 0; }
  .split__media { aspect-ratio: 16 / 10; min-height: 0; }
  .profile__inner { gap: 48px; }
  .tl-group { gap: 40px; }
  .tl-group__aside { position: static; }
  .layers__nav { display: none; }
  .dim-cards { height: auto; min-height: 100vh; }
  .dim-cards__body { position: relative; padding: 120px var(--gutter); }
  .cta-banner__inner { padding: 48px 40px; align-items: flex-start; }
  .cta-banner__img { width: 70%; top: auto; bottom: -20px; transform: none; }
}
@media (max-width: 768px) {
  .sub-hero { padding-top: calc(72px + 64px); padding-bottom: 56px; }
  .sub-hero__title br, .overview__desc br, .sub-visual__txt br { display: none; }
  .info-table > div { grid-template-columns: 1fr; gap: 6px; }
  .brand-card__keys { grid-template-columns: 1fr; }
  .exp-table__head { flex-direction: column; align-items: flex-start; }
  .exp-table__list li { grid-template-columns: 1fr; gap: 8px; }
  .exp-table__list strong { justify-self: start; }
  .tl-list > li { grid-template-columns: 1fr; gap: 8px; }
  .statement__words { flex-direction: column; gap: 32px; }
  .statement__desc { top: auto; bottom: 8%; }
  .integration__list { grid-template-columns: 1fr; }
  .stack-visual__title { margin-bottom: 48px; }
  .dim-cards__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .svc-card { min-height: 0; padding: 20px; }
  .mq-card { width: 240px; height: 240px; }
  .ways__inner { grid-template-columns: 1fr; }
  .ways__col--2 { padding-top: 0; }
  .ways__col { gap: 48px; }
  .cta-banner__inner { height: 380px; padding: 40px 24px; }
  .cta-banner__img { width: 110%; right: -20%; }
}