@font-face {
  font-family: "SUIT Variable";
  src: url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.woff2') format('woff2-variations'),
       url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --dp-primary: #122430;
  --dp-primary-2: #1c3646;
  --dp-primary-3: #16303e;
  --dp-primary-d: #0b161d;

  --dp-accent: #1F9AA3;
  --dp-accent-deep: #167880;
  --dp-accent-light: #6FD3D9;
  --dp-accent-wash: #E3F4F3;

  --dp-bg-soft: #F3F8F7;
  --dp-bg-warm: #E9F2F0;
  --dp-bg-dark: #D3E1DF;
  --dp-white: #FFFFFF;

  --dp-border: #D9E5E2;
  --dp-border-soft: #E6EFED;

  --dp-text: #16232A;
  --dp-text-sub: #55676A;
  --dp-text-muted: #7C8C8E;

  --dp-font-heading: "SUIT Variable", sans-serif;
  --dp-font-body: "SUIT Variable", sans-serif;

  --dp-fs-display: clamp(2.6rem, 6vw, 4.9rem);
  --dp-fs-h1: clamp(2rem, 4.2vw, 3.1rem);
  --dp-fs-h2: clamp(1.55rem, 3vw, 2.25rem);
  --dp-fs-h3: clamp(1.05rem, 1.8vw, 1.25rem);

  --dp-max-w: 1160px;
  --dp-gutter: clamp(20px, 4vw, 40px);
  --dp-radius: 0px;
  --dp-radius-sm: 0px;

  /* 8px 기준 스페이싱 스케일 — 전 페이지 공통, 임의 px 값 사용 금지 */
  --dp-sp-1: 8px;
  --dp-sp-2: 16px;
  --dp-sp-3: 24px;
  --dp-sp-4: 32px;
  --dp-sp-5: 40px;
  --dp-sp-6: 56px;
  --dp-sec-pad: clamp(56px, 8vw, 96px);
  --dp-card-pad: var(--dp-sp-4) var(--dp-sp-3);
  --dp-t: .28s cubic-bezier(.4,0,.2,1);
  --dp-t-slow: .6s cubic-bezier(.16,1,.3,1);
  --dp-shadow-sm: 0 2px 10px rgba(18,36,48,.06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, p, h1, h2, h3, h4, h5, h6, li, td, th, a, span, div, button, summary {
  word-break: keep-all; overflow-wrap: break-word;
}
body {
  margin: 0; font-family: var(--dp-font-body); font-size: 19px; line-height: 1.85;
  color: var(--dp-text); background: var(--dp-white); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--dp-font-heading); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: var(--dp-fs-h1); }
h2 { font-size: var(--dp-fs-h2); }
h3 { font-size: var(--dp-fs-h3); }
p { margin: 0 0 1em; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
.container { max-width: var(--dp-max-w); margin: 0 auto; padding: 0 var(--dp-gutter); }

/* ---- scroll progress ---- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--dp-accent), var(--dp-accent-light)); z-index: 999; }

/* ---- header ---- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--dp-sp-2) var(--dp-gutter); background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50; transition: padding var(--dp-t), box-shadow var(--dp-t);
}
.site-header.scrolled { padding-top: var(--dp-sp-1); padding-bottom: var(--dp-sp-1); box-shadow: var(--dp-shadow-sm); }
.hdr-logo { display: flex; align-items: center; gap: var(--dp-sp-1); min-width: 0; text-decoration: none; }
.hdr-logo__icon { flex-shrink: 0; }
.hdr-logo__text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.hdr-logo__name { font-family: var(--dp-font-heading); font-weight: 800; font-size: 1.05rem; color: var(--dp-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-logo__tagline { font-size: .72rem; color: var(--dp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .hdr-logo__tagline { display: none; } }
.hdr-nav a { text-decoration: none; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dp-sp-1);
  min-height: 48px; padding: var(--dp-sp-2) var(--dp-sp-4); border-radius: var(--dp-radius-sm);
  font-weight: 700; text-decoration: none; border: 1.5px solid transparent;
  transition: transform var(--dp-t), background var(--dp-t), color var(--dp-t), border-color var(--dp-t);
}
.btn-primary { background: var(--dp-primary); color: #fff; }
.btn-primary:hover { background: var(--dp-accent); }
.btn-accent { background: var(--dp-accent); color: #fff; }
.btn-accent:hover { background: var(--dp-accent-deep); }
.btn-outline { border-color: var(--dp-border); color: var(--dp-primary); }
.btn-outline:hover { border-color: var(--dp-primary); background: var(--dp-bg-soft); }
.btn-sm { min-height: 38px; padding: var(--dp-sp-1) var(--dp-sp-2); font-size: .85rem; }
.btn-large { min-height: 56px; padding: var(--dp-sp-2) var(--dp-sp-5); font-size: 1.05rem; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}

/* ---- eyebrow (단일축 괘선 스타일 — 알약 배지 아님) ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--dp-sp-1); text-transform: uppercase;
  letter-spacing: .14em; font-size: .76rem; font-weight: 700; color: var(--dp-accent-deep); margin-bottom: var(--dp-sp-2);
}
.eyebrow::before { content: ""; width: 16px; height: 2px; background: var(--dp-accent); flex-shrink: 0; }
.eyebrow--light { color: var(--dp-accent-light); }
.eyebrow--light::before { background: var(--dp-accent-light); }

/* ---- hero ---- */
.hero { padding: var(--dp-sec-pad) 0; background: var(--dp-bg-soft); }
.hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--dp-sp-6); align-items: center; }
.hero h1 { font-size: var(--dp-fs-display); letter-spacing: -.02em; line-height: 1.04; }
.hero__sub { font-size: 1.05rem; color: var(--dp-text-sub); font-weight: 400; max-width: 460px; }
.hero__actions { display: flex; gap: var(--dp-sp-2); flex-wrap: wrap; margin: var(--dp-sp-3) 0; }
.hero-meta { list-style: none; margin: var(--dp-sp-4) 0 0; padding-top: var(--dp-sp-3); border-top: 1px solid var(--dp-border); display: flex; flex-wrap: wrap; gap: var(--dp-sp-4); }
.hero-meta__item { display: flex; flex-direction: column; gap: 2px; }
.hero-meta__label { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dp-accent-deep); }
.hero-meta__value { font-size: .86rem; font-weight: 700; color: var(--dp-primary); }
.hero__media { border: 1px solid var(--dp-border); overflow: hidden; }
.hero__media .img-placeholder, .hero__media img { aspect-ratio: 4/3; width: 100%; height: auto; object-fit: cover; }
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } .hero__media { order: -1; } }

/* ---- 메인페이지 전용 풀블리드 히어로 — 사진은 스크림 없이 그대로, 텍스트만 유리패널에 ---- */
.hero-main { position: relative; min-height: clamp(560px, 88vh, 820px); display: flex; align-items: flex-end; overflow: hidden; background: var(--dp-primary-d); }
.hero-main__media { position: absolute; inset: 0; z-index: 0; }
.hero-main__media img { width: 100%; height: 100%; object-fit: cover; animation: hero-kenburns 22s ease-in-out infinite alternate; }
@keyframes hero-kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }

.hero-main__content { position: relative; z-index: 2; width: 100%; padding: var(--dp-sp-5) 0; }
.hero-main__panel {
  max-width: 760px; padding: var(--dp-sp-4) var(--dp-sp-4);
  background: rgba(11, 22, 29, .52); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-left: 4px solid var(--dp-accent); color: #fff;
}
.hero-main .eyebrow {
  color: var(--dp-accent-light); background: none; opacity: 0; transform: translateY(14px);
  animation: hero-rise .45s ease-out .05s forwards;
}
.hero-main .eyebrow::before { background: var(--dp-accent-light); animation: hero-line-grow .5s ease-out .2s both; }
.hero-main h1 {
  font-size: clamp(2.1rem, 7.5vw, 5.4rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; color: #fff; margin-bottom: .3em;
  opacity: 0; transform: translateY(20px); animation: hero-rise .5s ease-out .12s forwards;
}
.hero-main__sub {
  font-size: 1.05rem; color: rgba(255,255,255,.82); font-weight: 400; max-width: 460px;
  opacity: 0; transform: translateY(16px); animation: hero-rise .45s ease-out .2s forwards;
}
.hero-main .hero__actions { opacity: 0; transform: translateY(16px); animation: hero-rise .45s ease-out .28s forwards; }
.hero-main .hero-meta {
  border-top-color: rgba(255,255,255,.22); opacity: 0; transform: translateY(16px);
  animation: hero-rise .45s ease-out .36s forwards;
}
.hero-main .hero-meta__label { color: var(--dp-accent-light); }
.hero-main .hero-meta__value { color: #fff; }

@keyframes hero-rise { to { opacity: 1; transform: none; } }
@keyframes hero-line-grow { from { width: 0; } to { width: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-main__media img { animation: none; }
  .hero-main .eyebrow, .hero-main h1, .hero-main__sub, .hero-main .hero__actions, .hero-main .hero-meta { opacity: 1; transform: none; animation: none; }
}
@media (max-width: 640px) {
  .hero-main { min-height: clamp(460px, 78vh, 600px); }
  .hero-main__panel { max-width: none; border-left: none; border-top: 4px solid var(--dp-accent); padding: var(--dp-sp-3) var(--dp-sp-3); }
  .hero-main__sub, .hero-main .hero-meta { display: none; }
}

/* ---- sections ---- */
.section { padding: var(--dp-sec-pad) 0; }
.section--soft { background: var(--dp-bg-soft); }
.section--warm { background: var(--dp-bg-warm); }
.section--dark { background: var(--dp-primary); color: #fff; }
.section--center { text-align: center; }
.section--center p { color: rgba(255,255,255,.7); }
.section-head { max-width: 640px; margin: 0 auto var(--dp-sp-6); text-align: center; }
.section-head h2 { margin: 0; }
.section-head p { margin: var(--dp-sp-1) 0 0; color: var(--dp-text-sub); }

/* ---- check list ---- */
.check-list { list-style: none; padding: 0; max-width: 760px; margin: 0 auto; display: grid; gap: var(--dp-sp-2); }
.check-list li {
  position: relative; padding: var(--dp-sp-2) var(--dp-sp-2) var(--dp-sp-2) var(--dp-sp-5);
  background: var(--dp-white); border: 1px solid var(--dp-border-soft);
}
.check-list li::before { content: "✓"; position: absolute; left: var(--dp-sp-2); color: var(--dp-accent); font-weight: 700; }
.check-list--left { max-width: none; margin: 0; }

/* ---- spec grid (라벨+값) ---- */
.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dp-sp-2); }
.spec-item { border: 1px solid var(--dp-border-soft); padding: var(--dp-sp-2) var(--dp-sp-3); }
.spec-item__label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dp-accent-deep); margin-bottom: 4px; }
.spec-item__value { font-size: 1rem; font-weight: 700; color: var(--dp-primary); }
@media (max-width: 860px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .spec-grid { grid-template-columns: 1fr; } }

/* ---- tip callout ---- */
.tip-box { border-left: 3px solid var(--dp-accent); background: var(--dp-accent-wash); padding: var(--dp-sp-2) var(--dp-sp-3); max-width: 760px; margin: 0 auto; }
.tip-box strong { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dp-accent-deep); margin-bottom: 4px; }
.tip-box p { margin: 0; color: var(--dp-text-sub); }

/* ---- 카드 그리드(소프트 셰도우 카드 — 선 대신 그림자로 구분) ---- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dp-sp-3); list-style: none; padding: 0; margin: 0; }
.process-grid--2 { grid-template-columns: repeat(2, 1fr); }
.process-card { background: var(--dp-white); border: 1px solid var(--dp-border-soft); padding: var(--dp-card-pad); transition: border-color var(--dp-t), background var(--dp-t); }
.process-card__num {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  background: var(--dp-accent-wash); color: var(--dp-accent-deep); font-family: var(--dp-font-heading); font-weight: 800;
  font-size: 1rem; margin-bottom: var(--dp-sp-2);
}
@media (hover: hover) and (pointer: fine) { .process-card:hover { border-color: var(--dp-accent); background: var(--dp-bg-soft); } }
@media (max-width: 860px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .process-grid { grid-template-columns: 1fr; } }

/* ---- 보조 이미지(페이지당 2번째 이미지) ---- */
.feature-img { aspect-ratio: 21/9; overflow: hidden; border: 1px solid var(--dp-border); }
.feature-img img, .feature-img .img-placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dp-t-slow); }
@media (max-width: 640px) { .feature-img { aspect-ratio: 4/3; } }

/* ---- split-grid (보조 이미지 + 체크리스트 좌우 배치, 템플릿 B) ---- */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dp-sp-6); align-items: center; }
.split-grid__media { aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--dp-border); }
.split-grid__media img, .split-grid__media .img-placeholder { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .split-grid { grid-template-columns: 1fr; } }

/* ---- image placeholder ---- */
.img-placeholder { width: 100%; overflow: hidden; }
.img-placeholder svg { width: 100%; height: 100%; }

/* ---- cta banner ---- */
.cta-banner { background: linear-gradient(135deg, var(--dp-primary), var(--dp-primary-2)); color: #fff; }
.cta-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--dp-sp-3); flex-wrap: wrap; }
.cta-banner h2 { margin-bottom: var(--dp-sp-1); }
.cta-banner p { color: rgba(255,255,255,.65); margin: 0; }

/* ---- faq (카드형 아코디언) ---- */
.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: var(--dp-sp-2); }
.faq-item { background: var(--dp-white); border: 1px solid var(--dp-border-soft); padding: 0 var(--dp-sp-3); }
.faq-item summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: var(--dp-sp-2) 0; transition: color var(--dp-t); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.2rem; color: var(--dp-accent); flex-shrink: 0; margin-left: var(--dp-sp-2); transition: transform .25s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 var(--dp-sp-2); color: var(--dp-text-sub); }
@media (hover: hover) and (pointer: fine) { .faq-item summary:hover { color: var(--dp-accent); } }

/* ---- related grid (카드형 링크) ---- */
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dp-sp-3); }
.related-card { text-decoration: none; color: inherit; display: block; background: var(--dp-white); border: 1px solid var(--dp-border-soft); overflow: hidden; transition: border-color var(--dp-t); }
.related-card img, .related-card .img-placeholder { aspect-ratio: 4/3; width: 100%; height: auto; object-fit: cover; transition: transform var(--dp-t-slow); }
.related-card__body { padding: var(--dp-sp-2) var(--dp-sp-3); }
.related-card__body h3 { margin: 0; font-size: 1rem; }
.related-card__body p { margin: var(--dp-sp-1) 0 0; font-size: .85rem; color: var(--dp-text-muted); }
.related-card--cta { display: flex; align-items: center; justify-content: center; min-height: 220px; background: var(--dp-accent-wash); text-align: center; border: none; }
.related-card--cta h3 { margin: 0; color: var(--dp-accent-deep); }
.related-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1023px) { .related-grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .related-grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .related-grid { grid-template-columns: 1fr; } }
@media (hover: hover) and (pointer: fine) {
  .related-card:hover { border-color: var(--dp-accent); }
  .related-card:hover img { transform: scale(1.04); }
}

/* ---- gallery grid ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dp-sp-2); }
.gallery-grid__item { aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--dp-border-soft); }
.gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dp-t-slow); }
@media (max-width: 860px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (hover: hover) and (pointer: fine) { .gallery-grid__item:hover img { transform: scale(1.05); } }

/* ---- table ---- */
.data-table { width: 100%; border-collapse: collapse; background: var(--dp-white); font-size: .95rem; border: 1px solid var(--dp-border); }
.data-table th, .data-table td { border-bottom: 1px solid var(--dp-border-soft); padding: var(--dp-sp-2); text-align: left; }
.data-table th { background: var(--dp-bg-warm); color: var(--dp-primary); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:nth-child(even) td { background: var(--dp-bg-soft); }

/* ---- contact page cards ---- */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--dp-sp-2); max-width: 560px; }
.contact-card {
  display: block; text-decoration: none; color: inherit; text-align: center;
  background: var(--dp-white); border: 1px solid var(--dp-border-soft); padding: var(--dp-sp-5) var(--dp-sp-3);
  transition: border-color var(--dp-t), background var(--dp-t);
}
.contact-card h3 { margin: 0 0 var(--dp-sp-2); }
.contact-card__value { font-size: 2.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--dp-primary); margin: 0 0 var(--dp-sp-1); }
.contact-card p:last-child { margin: 0; color: var(--dp-text-muted); }
@media (hover: hover) and (pointer: fine) { .contact-card:hover { border-color: var(--dp-accent); background: var(--dp-bg-soft); } }
@media (max-width: 640px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---- floating cta ---- */
.float-cta {
  position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px;
  background: var(--dp-accent); color: #fff; display: flex; align-items: center; justify-content: center;
  z-index: 60; text-decoration: none; opacity: 1; transition: opacity var(--dp-t), visibility var(--dp-t);
}
.float-cta.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.float-cta svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.float-cta__ring { position: absolute; inset: -4px; border: 1.5px solid rgba(31,154,163,.5); animation: pulse-ring 3s infinite; pointer-events: none; }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.18); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .float-cta__ring { animation: none; } }

/* ---- footer ---- */
.site-footer { background: var(--dp-primary-d); color: rgba(255,255,255,.5); padding: var(--dp-sp-6) 0 var(--dp-sp-5); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--dp-sp-5); margin-bottom: var(--dp-sp-5); }
.footer-grid h4 { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dp-accent-light); margin-bottom: var(--dp-sp-2); }
.footer-grid__name { color: #fff; font-family: var(--dp-font-heading); font-weight: 800; font-size: 1.05rem; }
.footer-grid a { display: block; padding: 5px 0; font-size: .85rem; text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: var(--dp-sp-3); font-size: .75rem; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease-out, transform .55s ease-out; }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .06s; }
.reveal-d2 { transition-delay: .12s; }
.reveal-d3 { transition-delay: .18s; }
.reveal-d4 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }