/* =========================================================
   청소사 (CSO) — 레퍼런스 구조 기반
   ========================================================= */
:root {
  --green: #0e5e3b;
  --green-dark: #08422a;
  --yellow: #f5c400;
  --ink: #111111;
  --dark: #0e5e3b;
  --text: #333333;
  --gray: #777777;
  --line: rgba(0, 0, 0, .08);
  --bg-light: #f5f6f5;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --header-h: 89px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--ink); background: #fff;
  line-height: 1.6; word-break: keep-all; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; }

.wrap { width: min(1200px, 100% - 80px); margin: 0 auto; }
.label { font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--green); margin-bottom: 20px; }

/* 스크롤 등장 (공통) */
.js-up { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s ease; }
.js-up.is-in { opacity: 1; transform: none; }

/* ===================== HEADER ===================== */
.header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); transition: background .4s, box-shadow .4s; }
.header__inner { height: 100%; padding: 0 40px; display: flex; align-items: center; }
/* 로고 : 박스 없이 글자형 (CSO + 노란 스우시 / 청소사) */
.logo { display: flex; align-items: center; gap: 14px; color: #fff; transition: color .4s; }
.logo__cso { position: relative; font-size: 30px; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: #fff; transition: color .4s; }
.logo__cso i { position: absolute; left: -2px; right: -2px; bottom: -6px; height: 3px; border-radius: 3px; background: var(--yellow); transform: rotate(-4deg); }
.logo__kr { display: flex; flex-direction: column; line-height: 1.2; padding-left: 14px; border-left: 1px solid currentColor; border-color: rgba(127,127,127,.35); }
.logo__kr strong { font-size: 18px; font-weight: 800; }
.logo__kr em { font-style: normal; font-size: 10px; opacity: .65; letter-spacing: .02em; }
.header.is-light .logo__cso { color: var(--green); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 34px; }
.nav__item { position: relative; }
.nav__item > a { display: block; padding: 30px 0; font-size: 14px; font-weight: 500; color: #fff; transition: color .3s; }
.nav__item > a:hover, .nav__item > a.is-current { color: var(--yellow); }
.nav__sub { position: absolute; top: 100%; left: 50%; min-width: 180px; padding: 10px 0; background: #fff; border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.12); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: .25s ease; }
.nav__item:hover .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__sub a { display: block; padding: 10px 22px; font-size: 14px; color: #444; white-space: nowrap; transition: color .2s, background .2s; }
.nav__sub a:hover { color: var(--green); background: #f3f7f5; }
.nav .nav__call { padding: 9px 20px; border-radius: 999px; background: var(--green); color: #fff; font-size: 17px; font-weight: 800; border: 2px solid rgba(255,255,255,.9); }
/* 히어로 1단계(흰 배경) & 스크롤 후 & 서브페이지 : 밝은 헤더 */
.header.is-light .logo, .header.is-light .nav__item > a { color: var(--ink); }
.header.is-light .nav__item > a:hover, .header.is-light .nav__item > a.is-current { color: var(--green); }
.header.is-light .nav .nav__call { border-color: var(--green); }
.header.is-scrolled { background: #fff; box-shadow: 0 1px 0 var(--line); }
.header__menu { display: none; width: 30px; height: 22px; position: relative; }
.header__menu span { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; transition: .3s; }
.header__menu span:nth-child(1) { top: 0; } .header__menu span:nth-child(2) { top: 10px; } .header__menu span:nth-child(3) { top: 20px; }
.header.is-light .header__menu span { background: var(--ink); }
.header__menu.is-open span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.header__menu.is-open span:nth-child(2) { opacity: 0; }
.header__menu.is-open span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

.mnav { position: fixed; inset: var(--header-h) 0 0; z-index: 99; background: #fff; padding: 20px 24px; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: .35s var(--ease); }
.mnav.is-open { opacity: 1; pointer-events: auto; transform: none; }
.mnav { overflow-y: auto; }
.mnav > a, .mnav summary { display: block; padding: 18px 0; font-size: 20px; font-weight: 700; border-bottom: 1px solid var(--line); cursor: pointer; list-style: none; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary::after { content: "+"; float: right; color: var(--green); }
.mnav details[open] summary::after { content: "−"; }
.mnav details a { display: block; padding: 12px 14px; font-size: 16px; color: #555; border-bottom: 1px solid var(--line); }
.mnav .mnav__call { margin-top: 24px; border: 0; text-align: center; background: var(--green); color: #fff; border-radius: 999px; }

/* ===================== HERO ===================== */
.hero { position: relative; height: 100vh; height: 100dvh; min-height: 640px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
.hero__slider { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hero__img { position: absolute; inset: 0; background: center/cover no-repeat; filter: grayscale(1) contrast(1.05); opacity: 0; transform: scale(1.08); transition: opacity 1.2s ease, transform 5s ease; }
.hero__img.is-now { opacity: 1; transform: scale(1); }
.hero__img--color { filter: none; }
.hero__dim { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .5); }
.hero__content { position: relative; z-index: 3; width: 100%; padding: 0 60px; text-align: center; transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.hero__logo { display: none; }
.hero__title { font-size: 6vw; font-weight: 900; line-height: 1.1; letter-spacing: -.03em; color: var(--ink); white-space: nowrap;
  opacity: 0; transform: scale(.94); clip-path: inset(0 50% 0 50%);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease), clip-path 1.4s var(--ease), color 1s ease; }
.hero__dot { display: inline-block; color: var(--green); transition: transform .3s ease, color 1s ease; }
.hero__title:hover .hero__dot { transform: translateY(-8px); }
.hero__line { height: 2px; margin: 36px 0 30px; background: var(--green); opacity: 0; transform: scaleX(0); transition: opacity 1s ease, transform 1.4s var(--ease), background 1s ease; }
.hero__sub { font-size: 20px; letter-spacing: .06em; color: #555; opacity: 0; transform: translateY(20px); transition: opacity 1.2s ease, transform 1.2s ease, color 1s ease, letter-spacing .5s ease; }
.hero__sub:hover { letter-spacing: .12em; }
.hero__brand { position: absolute; z-index: 3; left: 50%; bottom: 9vh; transform: translate(-50%, 20px); text-align: center; opacity: 0; transition: opacity 1.2s ease 1s, transform 1.2s ease 1s; }
.hero__brand strong { display: block; font-size: 44px; font-weight: 900; line-height: 1.1; color: #fff; }
.hero__brand span { display: block; margin-top: 8px; padding-left: .5em; font-size: 14px; letter-spacing: .5em; color: var(--yellow); }

/* Phase 1 : 흰 배경 + 검은 글씨 등장 */
.hero.phase1 .hero__title { opacity: 1; transform: scale(1); clip-path: inset(0 0 0 0); }
.hero.phase1 .hero__line { opacity: 1; transform: scaleX(1); transition-delay: 1s; }
.hero.phase1 .hero__sub { opacity: 1; transform: none; transition-delay: 1.4s; }
/* Phase 2 : 텍스트 위로 + 흑백 사진 등장 + 흰 글씨 */
.hero.phase2 .hero__content { transform: translateY(-10vh); }
.hero.phase2 .hero__slider { opacity: 1; }
.hero.phase2 .hero__title { color: #fff; }
.hero.phase2 .hero__dot { color: var(--yellow); }
.hero.phase2 .hero__line { background: var(--yellow); }
.hero.phase2 .hero__sub { color: rgba(255, 255, 255, .8); transition-delay: 0s; }
.hero.phase2 .hero__brand { opacity: 1; transform: translate(-50%, 0); }

/* ===================== ABOUT ===================== */
.about { background: var(--green); color: #fff; padding: 140px 0 120px; }
.about .label { color: var(--yellow); }
.about__title { font-size: 48px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; transition-delay: .15s; }
.about__bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 60px; }
.about__desc { font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.8; transition-delay: .3s; }
.btn-line { display: inline-flex; gap: 12px; align-items: center; padding: 16px 30px; border: 1px solid rgba(255,255,255,.5); font-size: 14px; font-weight: 600; transition: background .35s, color .35s, border-color .35s, opacity 1s ease .45s, transform 1s ease .45s; }
.btn-line i { font-style: normal; }
.btn-line:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ===================== SERVICES ===================== */
.services { background: var(--green); padding: 0 0 140px; }
.sv-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 100px; }
.sv-row:last-child { margin-bottom: 0; }
.sv-item { position: relative; display: block; overflow: hidden; width: var(--w); height: var(--h); margin-top: var(--mt, 0); margin-left: var(--ml, 0); margin-right: var(--mr, 0); color: #fff;
  opacity: 0; transform: translateY(60px); transition: opacity 1.2s ease, transform 1.2s ease; }
.sv-item.is-in { opacity: 1; transform: none; }
.sv-bg { position: absolute; inset: 0; background: center/cover no-repeat; transition: transform 1.2s var(--ease); }
.sv-dim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.72) 100%); transition: background .6s ease; }
.sv-inner { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 44px; }
.sv-en { font-size: 12px; font-weight: 600; letter-spacing: .18em; color: var(--yellow); opacity: .85; transition: opacity .4s; }
.sv-title { margin: 8px 0 14px; font-size: 32px; font-weight: 700; transition: transform .5s var(--ease); }
.sv-title i { font-style: normal; }
.sv-desc { font-size: 15px; color: rgba(255,255,255,.75); line-height: 1.7; }
.sv-item:hover .sv-bg { transform: scale(1.06); }
.sv-item:hover .sv-dim { background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.6) 100%); }
.sv-item:hover .sv-title { transform: translateX(6px); }
.sv-item:hover .sv-en { opacity: 1; }

/* ===================== WHY ===================== */
.why { padding: 160px 0; }
.why__wrap { display: flex; gap: 80px; align-items: flex-start; }
.why__left { width: 380px; flex-shrink: 0; position: sticky; top: 140px; }
.why__title { font-size: 48px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; transition-delay: .15s; }
.why__right { flex: 1; border-top: 1px solid rgba(0,0,0,.15); }
.wy-item { border-bottom: 1px solid rgba(0,0,0,.15); }
.wy-item:nth-child(2) { transition-delay: .1s; } .wy-item:nth-child(3) { transition-delay: .2s; }
.wy-item:nth-child(4) { transition-delay: .3s; } .wy-item:nth-child(5) { transition-delay: .4s; }
.wy-head { width: 100%; display: flex; align-items: center; gap: 18px; padding: 36px 10px; text-align: left; transition: padding .4s ease; }
.wy-head:hover { padding-left: 18px; }
.wy-num { font-size: 13px; font-weight: 600; color: var(--green); }
.wy-tit { flex: 1; font-size: 24px; font-weight: 700; transition: color .3s; }
.wy-arrow { font-size: 18px; transition: transform .4s ease, color .3s; }
.wy-head:hover .wy-tit, .wy-head:hover .wy-arrow { color: var(--green); }
.wy-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s ease; }
.wy-body p { overflow: hidden; padding: 0 10px 0 44px; font-size: 16px; color: var(--gray); }
.wy-item.is-open .wy-body { grid-template-rows: 1fr; }
.wy-item.is-open .wy-body p { padding-bottom: 32px; }
.wy-item.is-open .wy-arrow { transform: rotate(180deg); color: var(--green); }
.wy-item.is-open .wy-tit { color: var(--green); }

/* ===================== PORTFOLIO ===================== */
.portfolio { padding: 140px 0; background: radial-gradient(ellipse at 20% 0%, #fff 0%, transparent 60%), radial-gradient(ellipse at 80% 100%, #e8efeb 0%, transparent 60%), var(--bg-light); }
.pf-header { text-align: center; margin-bottom: 64px; }
.pf-title { font-size: 48px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; transition-delay: .15s; }
.pf-content { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; }
.pf-table { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.06); }
.pf-head, .pf-row { display: grid; grid-template-columns: 1.15fr 1.25fr .7fr .9fr .8fr; align-items: center; text-align: center; }
.pf-head { background: var(--green); color: #fff; font-size: 14px; font-weight: 700; padding: 20px 24px; }
.pf-body { overflow: hidden; }
.pf-row { padding: 18px 24px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.55; }
.pf-row:hover { background: rgba(0,0,0,.025); }
.pf-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); padding: 0 4px; }
.pf-row .pf-status { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.pf-row .pf-status.is-processing { color: #d39600; }
.pf-row .pf-status.is-completed { color: var(--green); }
.pf-counter { background: #fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.06); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 32px; transition-delay: .15s; }
.pf-counter-title { font-size: 20px; font-weight: 700; }
.pf-counter-num { margin: 18px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.pf-counter-num strong { font-size: 76px; font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--green); font-variant-numeric: tabular-nums; }
.pf-counter-num span { font-size: 30px; font-weight: 800; }
.pf-counter-date { font-size: 14px; color: #999; }
.pf-counter-desc { margin: 24px 0 28px; font-size: 14px; color: var(--gray); }
.pf-counter-btn { display: inline-flex; gap: 10px; padding: 13px 26px; border: 1px solid #ddd; font-size: 14px; font-weight: 600; transition: border-color .3s, color .3s; }
.pf-counter-btn i { font-style: normal; }
.pf-counter-btn:hover { border-color: var(--green); color: var(--green); }

/* ===================== GALLERY ===================== */
.gallery { padding: 0 0 120px; background: var(--bg-light); }
.gallery__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.gallery__grid figure { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px; cursor: zoom-in; opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s ease; }
.gallery__grid figure.is-in { opacity: 1; transform: none; }
.gallery__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery__grid figure:hover img { transform: scale(1.06); }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 86vw; max-height: 86vh; object-fit: contain; }
.lightbox button { position: absolute; color: #fff; font-size: 44px; line-height: 1; padding: 10px 18px; opacity: .8; }
.lightbox button:hover { opacity: 1; }
.lb-close { top: 16px; right: 16px; } .lb-prev { left: 16px; } .lb-next { right: 16px; }

/* ===================== SITES MARQUEE ===================== */
.sites { padding: 80px 0; overflow: hidden; background: #fff; }
.sites__track { display: flex; gap: 20px; width: max-content; }
.sites__track--1 { animation: slideLeft 60s linear infinite; margin-bottom: 20px; }
.sites__track--2 { animation: slideRight 60s linear infinite; }
.sites__track figure { width: 240px; height: 160px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.sites__track img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .75; transition: filter .4s, opacity .4s; }
@keyframes slideLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes slideRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ===================== QUALIFICATION ===================== */
.qual { background: var(--bg-light); padding: 100px 0; overflow: hidden; }
.qual__wrap { display: flex; align-items: center; gap: 60px; }
.qual__cards { flex: 1.1; overflow: hidden; }
.qual__track { display: flex; gap: 16px; width: max-content; animation: slideLeft 30s linear infinite; }
.qual__card { width: 220px; aspect-ratio: 3 / 4; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.08); flex-shrink: 0; }
.qual__card img { width: 100%; height: 100%; object-fit: cover; }
.qual__card--ph { display: grid; place-items: center; border: 1px dashed #ccc; color: #aaa; font-size: 14px; font-weight: 600; }
.qual__text { flex: 1; padding-right: 40px; }
.qual__title { font-size: 44px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; transition-delay: .15s; }
.qual__desc { margin-top: 20px; color: var(--gray); transition-delay: .3s; }

/* ===================== CONTACT ===================== */
.contact { padding: 140px 0; }
.contact__wrap { display: grid; grid-template-columns: 1fr .9fr; gap: 64px; }
.contact__title { font-size: 48px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; transition-delay: .15s; }
.contact__desc { margin-top: 20px; color: var(--gray); transition-delay: .3s; }
.cta-cards { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cta-card { padding: 28px 22px; border: 1px solid #eee; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.04); transition: transform .4s, box-shadow .4s, border-color .4s, opacity 1s ease; }
.cta-card:nth-child(2) { transition-delay: .1s; } .cta-card:nth-child(3) { transition-delay: .2s; }
.cta-card.is-in:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(0,0,0,.12); border-color: var(--green); transition-delay: 0s; }
.cta-num { font-size: 12px; font-weight: 600; color: var(--green); }
.cta-card h3 { margin: 12px 0 14px; font-size: 18px; font-weight: 700; transition: color .3s; }
.cta-card:hover h3 { color: var(--green); }
.cta-card p:last-child { font-size: 13px; color: var(--gray); line-height: 1.8; }
.form { display: grid; gap: 22px; align-content: start; }
.form__field { display: grid; gap: 8px; }
.form__field > span { font-size: 13px; font-weight: 600; }
.form__field b { color: var(--green); }
.form input[type=text], .form input[type=tel], .form textarea { width: 100%; font: inherit; font-size: 15px; padding: 13px 14px; border: 1px solid #e3e3e3; background: #f7f7f7; outline: none; resize: vertical; transition: border-color .2s, background .2s; }
.form input:focus, .form textarea:focus { border-color: var(--green); background: #fff; }
.form__tel { display: flex; align-items: center; gap: 10px; }
.form__tel em { font-style: normal; color: #aaa; }
.form__checks { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.form__checks label, .form__agree { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #555; cursor: pointer; }
.form input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--green); }
.form__submit { height: 56px; background: var(--green); color: #fff; font-size: 16px; font-weight: 700; transition: background .3s; }
.form__submit:hover { background: var(--ink); }
.form__msg { text-align: center; font-weight: 600; color: var(--green); min-height: 1em; }

/* ===================== FOOTER ===================== */
.footer { background: var(--dark); color: rgba(255,255,255,.5); padding: 70px 0 40px; font-size: 13px; }
.footer__wrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer__info { text-align: right; line-height: 2; }
.footer__info strong { color: #fff; }
.footer__copy { opacity: .6; }
.footer__bottom { display: flex; gap: 20px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.footer__bottom button { font-size: 13px; color: rgba(255,255,255,.5); }
.footer__bottom strong { color: #fff; }
.footer .logo__cso { color: #fff; }
.footer .logo { color: #fff; }

/* 약관 팝업 */
.modal { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__box { position: relative; width: min(560px, 100%); max-height: 80vh; overflow-y: auto; background: #fff; border-radius: 14px; padding: 40px 32px 32px; }
.modal__close { position: absolute; top: 12px; right: 16px; font-size: 30px; line-height: 1; color: #999; }
.modal__title { font-size: 22px; margin-bottom: 20px; }
.modal__body p { font-size: 14px; color: #555; margin-bottom: 14px; }

/* ===================== SUB PAGES ===================== */
.sub-hero { padding: calc(var(--header-h) + 70px) 20px 70px; text-align: center; border-bottom: 1px solid var(--green); }
.sub-hero h1 { font-size: 64px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.sub-hero p { margin-top: 12px; font-size: 15px; color: var(--gray); }
.sub-nav { border-bottom: 1px solid var(--line); }
.sub-nav .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 82px; }
.sub-crumb { font-size: 13px; color: #666; white-space: nowrap; }
.sub-crumb b { color: var(--green); font-weight: 500; }
.sub-crumb span { margin: 0 8px; color: #bbb; }
.sub-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sub-tabs a { padding: 6px 14px; border-radius: 999px; font-size: 13px; color: #888; transition: .25s; }
.sub-tabs a:hover { color: var(--green); }
.sub-tabs a.is-active { background: var(--green); color: #fff; font-weight: 600; }

/* 회사소개 */
.vision { padding: 140px 0 120px; }
.sub-title { font-size: 48px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; transition-delay: .15s; }
.sub-desc { margin-top: 24px; font-size: 16px; color: var(--gray); line-height: 1.9; transition-delay: .3s; }
.vision__cards { margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vision__card { padding: 40px 34px; background: #f6f7f6; border-radius: 14px; }
.vision__card:nth-child(2) { transition-delay: .1s; } .vision__card:nth-child(3) { transition-delay: .2s; }
.vision__card b { display: block; font-size: 40px; font-weight: 800; color: var(--green); line-height: 1; }
.vision__card h3 { margin: 26px 0 10px; font-size: 19px; }
.vision__card p { font-size: 14px; color: var(--gray); }
.about-photo { height: 480px; background: center/cover no-repeat; filter: grayscale(1); }
.values { background: var(--dark); color: #fff; padding: 140px 0; }
.values .label { color: var(--yellow); }
.values__wrap { display: flex; gap: 80px; align-items: flex-start; }
.values__left { width: 380px; flex-shrink: 0; position: sticky; top: 140px; }
.values__list { flex: 1; border-top: 1px solid rgba(255,255,255,.12); }
.values__list li { padding: 44px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.values__list b { font-size: 13px; color: var(--yellow); font-weight: 600; }
.values__list h3 { margin: 12px 0 14px; font-size: 24px; }
.values__list p { font-size: 15px; color: rgba(255,255,255,.55); line-height: 1.8; }

/* 대표 인사말 */
.greeting { padding: 140px 0; }
.greeting__wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
.greeting__img { aspect-ratio: 4 / 5; border-radius: 14px; background: center/cover no-repeat; }
.greeting__lead { font-size: 26px; font-weight: 700; line-height: 1.5; margin-bottom: 30px; transition-delay: .15s; }
.greeting__body p { font-size: 16px; color: #555; line-height: 1.9; margin-bottom: 20px; }
.greeting__sign { margin-top: 40px; font-size: 16px; color: #333; }
.greeting__sign strong { font-size: 22px; margin-left: 10px; }

/* 자격·인증 */
.qual-page { padding: 120px 0; }
.qual-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.qual-grid figure { aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.qual-grid img { width: 100%; height: 100%; object-fit: cover; }
.qual-grid figcaption { padding: 12px; text-align: center; font-size: 14px; font-weight: 600; }
.qual-grid .is-ph { display: grid; place-items: center; border: 1px dashed #ccc; box-shadow: none; color: #aaa; font-size: 14px; font-weight: 600; }

/* 서비스 상세 */
.svc { padding: 120px 0 40px; }
.svc-block { margin-bottom: 120px; }
.svc-main { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.svc-block:nth-child(even) .svc-main { grid-template-columns: 1fr 1.05fr; }
.svc-block:nth-child(even) .svc-img { order: 2; }
.svc-img { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.svc-img:hover img { transform: scale(1.04); }
.svc-label { font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--green); }
.svc-title { margin: 14px 0 22px; font-size: 34px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; }
.svc-motto { font-size: 17px; font-weight: 700; line-height: 1.7; margin-bottom: 22px; }
.svc-desc { font-size: 15px; color: var(--gray); line-height: 1.9; }
.svc-thumbs { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.svc-thumbs figure { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; }
.svc-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.svc-thumbs figure:hover img { transform: scale(1.06); }

/* 서브페이지 하단 CTA */
.sub-cta { background: var(--dark); color: #fff; text-align: center; padding: 120px 20px; }
.sub-cta h2 { font-size: 40px; font-weight: 700; line-height: 1.4; }
.sub-cta p { margin-top: 18px; color: rgba(255,255,255,.55); }
.sub-cta__btns { margin: 44px auto 0; display: grid; grid-template-columns: repeat(2, 200px); justify-content: center; gap: 12px; }
.sub-cta__btns a { padding: 18px 10px; border: 1px solid rgba(255,255,255,.25); font-size: 14px; font-weight: 600; transition: .3s; }
.sub-cta__btns a:hover { border-color: #fff; background: #fff; color: var(--ink); }
.sub-cta__btns .is-primary { background: var(--green); border-color: var(--green); }
.sub-cta__btns .is-kakao { background: #fee500; border-color: #fee500; color: #3a1d1d; }

.contact--page { padding-top: 100px; }

/* ===================== FLOATING ===================== */
.floating { position: fixed; right: 20px; bottom: 30px; z-index: 90; display: grid; gap: 12px; opacity: 0; transform: translateX(120%); pointer-events: none; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.floating.is-show { opacity: 1; transform: none; pointer-events: auto; }
.fl-btn { width: 66px; height: 66px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.16); transition: transform .3s var(--ease); }
.fl-btn:hover { transform: translateY(-3px); }
.fl-btn svg { width: 24px; height: 24px; fill: currentColor; }
.fl-btn--green { background: var(--green); color: #fff; }
.fl-btn--white { background: #fff; color: var(--green); }
.fl-btn--kakao { background: #fee500; color: #3a1d1d; }
.fl-btn--kakao b { font-size: 11px; font-weight: 900; background: #3a1d1d; color: #fee500; padding: 1px 6px; border-radius: 8px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1200px) {
  .hero__title { font-size: 7.2vw; }
  .about__title, .why__title, .pf-title, .contact__title { font-size: 44px; }
  .sv-item { height: calc(var(--h) * .75); }
  .sv-title { font-size: 26px; }
  .why__left { width: 300px; }
}
@media (max-width: 1024px) {
  :root { --header-h: 70px; }
  .header__inner { padding: 0 20px; justify-content: center; position: relative; }
  .header__menu { display: block; position: absolute; left: 20px; }
  .nav { display: none; }
  .logo__kr { display: none; }

  /* 모바일 히어로 : 시안 레이아웃 (CSO 로고 노출) */
  .hero__logo { display: block; margin-bottom: 30px; opacity: 0; transform: translateY(20px); transition: opacity 1.2s ease .2s, transform 1.2s ease .2s; }
  .hero__logo span { display: inline-block; font-size: 64px; font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--green); transition: color 1s; }
  .hero__logo span::after { content: ""; display: block; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--yellow); }
  .hero.phase1 .hero__logo { opacity: 1; transform: none; }
  .hero.phase2 .hero__logo span { color: #fff; }
  .hero__content { padding: 0 20px; }
  .hero__title { white-space: normal; font-size: 9vw; }
  .hero__line { margin: 28px 0 24px; }
  .hero__sub { font-size: 15px; letter-spacing: .02em; }
  .hero.phase2 .hero__content { transform: translateY(-6vh); }

  .sv-row { flex-direction: column; align-items: stretch; margin-bottom: 0; }
  .sv-item { width: 88%; height: 340px; margin: 24px 0 0 !important; }
  .sv-item:nth-child(2) { align-self: flex-end; }
  .services { padding-top: 20px; }

  .why__wrap { flex-direction: column; gap: 40px; }
  .why__left { width: 100%; position: static; }
  .pf-content { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .qual__wrap { flex-direction: column-reverse; align-items: stretch; }
  .qual__text { padding: 0 24px; }
  .contact__wrap { grid-template-columns: 1fr; }
  .footer__wrap { flex-direction: column; }
  .footer__info { text-align: left; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 48px); }
  .label { font-size: 12px; }
  .hero__logo span { font-size: 54px; }
  .hero__title { font-size: 10vw; }
  .hero__sub { font-size: 14px; }
  .hero__brand strong { font-size: 36px; }
  .hero__brand span { letter-spacing: .35em; font-size: 13px; }
  .about { padding: 90px 0 80px; }
  .about__title, .why__title, .pf-title, .qual__title, .contact__title { font-size: 28px; }
  .about__bottom { flex-direction: column; align-items: flex-start; gap: 32px; margin-top: 36px; }
  .services { padding-bottom: 80px; }
  .sv-item { width: 92%; height: 300px; }
  .sv-inner { padding: 28px 24px; }
  .sv-title { font-size: 22px; }
  .sv-desc { font-size: 13px; }
  .why, .portfolio, .contact { padding: 80px 0; }
  .wy-head { padding: 26px 4px; }
  .wy-tit { font-size: 18px; }
  .wy-body p { padding-left: 36px; font-size: 14px; }
  .pf-head, .pf-row { padding: 12px 10px; font-size: 12px; }
  .pf-counter-num strong { font-size: 52px; }
  .gallery { padding-bottom: 60px; }
  .sites { padding: 48px 0; }
  .sites__track figure { width: 150px; height: 100px; }
  .qual { padding: 60px 0; }
  .qual__card { width: 150px; }
  .cta-cards { grid-template-columns: 1fr; }
  .cta-card p:last-child br { display: none; }
  .floating { right: 12px; bottom: 16px; gap: 8px; }
  .fl-btn { width: 56px; height: 56px; border-radius: 15px; font-size: 10px; }
  .fl-btn svg { width: 20px; height: 20px; }
}

/* ===================== SUB PAGES : RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .nav__sub { display: none; }
  .sub-hero h1 { font-size: 48px; }
  .sub-nav .wrap { flex-direction: column; align-items: flex-start; padding: 18px 0; }
  .sub-tabs { justify-content: flex-start; }
  .vision__cards { grid-template-columns: 1fr; }
  .values__wrap, .greeting__wrap { display: flex; flex-direction: column; gap: 40px; }
  .values__left { width: 100%; position: static; }
  .greeting__img { width: 100%; }
  .qual-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-main, .svc-block:nth-child(even) .svc-main { grid-template-columns: 1fr; gap: 32px; }
  .svc-block:nth-child(even) .svc-img { order: 0; }
}
@media (max-width: 640px) {
  .sub-hero { padding: calc(var(--header-h) + 44px) 20px 44px; }
  .sub-hero h1 { font-size: 36px; }
  .sub-title, .svc-title { font-size: 26px; }
  .vision, .values, .greeting, .qual-page { padding: 80px 0; }
  .about-photo { height: 260px; }
  .greeting__lead { font-size: 20px; }
  .greeting__body p { font-size: 14px; }
  .qual-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .svc { padding: 70px 0 10px; }
  .svc-block { margin-bottom: 80px; }
  .svc-thumbs { gap: 8px; }
  .sub-cta { padding: 80px 20px; }
  .sub-cta h2 { font-size: 26px; }
  .sub-cta__btns { grid-template-columns: 1fr 1fr; }
  .logo__cso { font-size: 26px; }
}

/* ===================== LOGO IMAGE (사장님 시안 로고) ===================== */
.logo__img { height: 48px; width: auto; transition: filter .4s; }
/* 어두운 배경(히어로 사진 단계 헤더 / 푸터) : 흰색 로고 */
.header:not(.is-light) .logo__img, .footer .logo__img { filter: brightness(0) invert(1); }
.footer .logo__img { height: 54px; }
@media (max-width: 1024px) {
  .logo__img { height: 38px; }
  .hero__logo img { display: block; width: 62%; max-width: 300px; margin: 0 auto; transition: filter 1s; }
  .hero.phase2 .hero__logo img { filter: brightness(0) invert(1); }
}

/* ===================== BEFORE / AFTER ===================== */
/* 대표 이미지 : 드래그 비교 슬라이더 */
.ba { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; user-select: none; background: #eee; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--yellow); pointer-events: none; }
.ba__handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: 16px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); letter-spacing: -2px; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba__tag { position: absolute; top: 16px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .12em; pointer-events: none; }
.ba__tag--before { left: 16px; background: rgba(0,0,0,.6); color: #fff; }
.ba__tag--after { right: 16px; background: var(--green); color: #fff; }

/* 하단 : 비포·애프터 쌍 */
.svc-pairs { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pair figure { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.pair figure:first-child { border-radius: 10px 0 0 10px; }
.pair figure:last-child { border-radius: 0 10px 10px 0; }
.pair img { width: 100%; height: 100%; object-fit: cover; }
.pair figcaption { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .1em; background: rgba(0,0,0,.6); color: #fff; }
.pair figcaption.is-after { background: var(--green); }
@media (max-width: 640px) {
  .svc-pairs { grid-template-columns: 1fr; gap: 12px; }
  .ba__handle span { width: 38px; height: 38px; }
}

/* ===================== SERVICES : 리스트 + 미리보기 ===================== */
.sx { background: var(--dark); color: #fff; padding: 20px 0 140px; }
.sx .label { color: var(--yellow); }
.sx__title { font-size: 44px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; transition-delay: .15s; }
.sx__head { margin-bottom: 60px; }
.sx__body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; }
.sx__preview { position: sticky; top: 120px; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; }
.sx__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .6s ease, transform 1.2s var(--ease); }
.sx__preview img.is-on { opacity: 1; transform: none; }
.sx__list { list-style: none; border-top: 1px solid rgba(255,255,255,.12); }
.sx__list li { border-bottom: 1px solid rgba(255,255,255,.12); }
.sx__list a { display: flex; align-items: center; gap: 28px; padding: 30px 6px; transition: padding .4s var(--ease); }
.sx__list b { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.35); transition: color .3s; }
.sx__list div { flex: 1; }
.sx__list h3 { font-size: 24px; font-weight: 700; transition: color .3s; }
.sx__list p { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.5); }
.sx__list i { font-style: normal; font-size: 22px; opacity: .3; transform: translateX(-8px); transition: .4s var(--ease); }
.sx__thumb { display: none; }
.sx__list li.is-on a { padding-left: 18px; }
.sx__list li.is-on b { color: var(--yellow); }
.sx__list li.is-on h3 { color: var(--yellow); }
.sx__list li.is-on i { opacity: 1; transform: none; color: var(--yellow); }

/* ===================== LIVE 시공 현황 ===================== */
.live { padding: 140px 0; background: #f3f6f4; }
.live__head { margin-bottom: 56px; }
.live__title { font-size: 44px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; transition-delay: .15s; }
.live__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; align-items: stretch; }
.live__count { background: var(--green); color: #fff; border-radius: 20px; padding: 48px 40px; display: flex; flex-direction: column; }
.live__count-label { font-size: 15px; font-weight: 600; opacity: .75; }
.live__count-num { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; }
.live__count-num strong { font-size: 84px; font-weight: 900; line-height: 1; letter-spacing: -.04em; color: var(--yellow); font-variant-numeric: tabular-nums; }
.live__count-num span { font-size: 26px; font-weight: 700; }
.live__count-date { margin-top: 8px; font-size: 13px; opacity: .55; }
.live__stats { margin: 36px 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.15); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.live__stats strong { display: block; font-size: 22px; font-weight: 800; }
.live__stats span { font-size: 13px; opacity: .6; }
.live__btn { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-radius: 12px; background: var(--yellow); color: var(--ink); font-weight: 700; transition: transform .3s var(--ease); }
.live__btn i { font-style: normal; }
.live__btn:hover { transform: translateY(-3px); }
.live__feed { background: #fff; border-radius: 20px; padding: 32px 32px 20px; box-shadow: 0 16px 48px rgba(14,94,59,.08); transition-delay: .15s; }
.live__feed-head { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.live__feed-head em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 500; color: #999; }
.live__dot { width: 9px; height: 9px; border-radius: 50%; background: #e53935; box-shadow: 0 0 0 0 rgba(229,57,53,.5); animation: livePulse 1.6s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 9px rgba(229,57,53,0); } 100% { box-shadow: 0 0 0 0 rgba(229,57,53,0); } }
.live__list { list-style: none; }
.live__item { display: flex; align-items: center; gap: 18px; padding: 18px 4px; border-bottom: 1px solid var(--line); max-height: 90px; overflow: hidden; transition: opacity .5s ease, transform .5s var(--ease), max-height .5s ease, padding .5s ease; }
.live__item:last-child { border-bottom: 0; }
.live__item.is-new { opacity: 0; transform: translateY(-14px); }
.live__item.is-out { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
.live__badge { flex-shrink: 0; width: 76px; text-align: center; padding: 6px 0; border-radius: 999px; font-size: 12px; font-weight: 700; }
.live__badge.is-done { background: #e6f2ec; color: var(--green); }
.live__badge.is-ing { background: #fff6cc; color: #9a7400; }
.live__info { flex: 1; min-width: 0; }
.live__info strong { display: block; font-size: 16px; font-weight: 700; }
.live__info span { font-size: 13px; color: #888; }
.live__item time { font-size: 13px; color: #aaa; font-variant-numeric: tabular-nums; }

/* 갤러리 제목 */
.gallery { padding-top: 120px; }
.gallery__head { text-align: center; margin-bottom: 48px; }
.gallery__title { font-size: 40px; font-weight: 700; letter-spacing: -.02em; transition-delay: .15s; }

@media (max-width: 1024px) {
  .sx__body { grid-template-columns: 1fr; }
  .sx__preview { display: none; }
  .sx__thumb { display: block; width: 84px; height: 64px; object-fit: cover; border-radius: 8px; }
  .sx__list a { gap: 18px; }
  .live__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sx { padding-bottom: 80px; }
  .sx__title, .live__title { font-size: 28px; }
  .gallery__title { font-size: 26px; }
  .sx__list a { padding: 22px 0; }
  .sx__list h3 { font-size: 18px; }
  .sx__list p { font-size: 12px; }
  .sx__list i { display: none; }
  .sx__thumb { width: 64px; height: 52px; }
  .live { padding: 80px 0; }
  .live__count { padding: 36px 28px; }
  .live__count-num strong { font-size: 64px; }
  .live__feed { padding: 24px 18px 10px; }
  .live__item { gap: 12px; }
  .live__badge { width: 64px; font-size: 11px; }
  .gallery { padding-top: 80px; }
}
.modal__body h4 { margin: 22px 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.modal__body h4:first-child { margin-top: 0; }
.modal__body p { line-height: 1.75; }

/* 시공 현장 로고 마퀴 : 간판 로고, 커서 올려도 멈추지 않음 */
/* 레퍼런스 구조 : 흰 배경, 카드 없이 로고만, 300x140 칸, 간격 60px, 2줄 반대 방향 60s */
.sites { padding: 40px 0 120px; background: #fff; }
.sites__track { gap: 60px; }
.sites__track--1 { margin-bottom: 40px; }
.sites__track .sites__logo { width: 300px; height: 140px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.sites__track .sites__logo img { width: auto; height: auto; max-width: 170px; max-height: 48px; object-fit: contain; filter: none; opacity: 1; }
@media (max-width: 1024px) {
  .sites { padding: 30px 0 80px; }
  .sites__track { gap: 32px; }
  .sites__track--1 { margin-bottom: 24px; }
  .sites__track .sites__logo { width: 120px; height: 60px; }
  .sites__track .sites__logo img { max-width: 110px; max-height: 32px; }
}

/* 무한 흐름 이음매 보정 : gap 대신 아이템 오른쪽 여백 → -50% 지점이 정확히 한 세트 */
.sites__track, .qual__track { gap: 0 !important; will-change: transform; }
.sites__track .sites__logo { margin-right: 60px; }
.qual__track .qual__card { margin-right: 16px; }
@media (max-width: 1024px) { .sites__track .sites__logo { margin-right: 32px; } }

/* ===== 성능 보정 ===== */
/* 로고 한 줄 : 한 세트 2160px / 30s (기존과 같은 속도), GPU 레이어 고정 */
.sites { padding: 60px 0 100px; }
.sites__track--1 { margin-bottom: 0; animation: slideLeft3d 30s linear infinite; }
.qual__track { animation-name: slideLeft3d; }
.sites__track, .qual__track { backface-visibility: hidden; transform: translate3d(0,0,0); }
@keyframes slideLeft3d { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
/* 히어로 슬라이드 : 합성 레이어로 분리 */
.hero__img { will-change: opacity, transform; backface-visibility: hidden; }
/* LIVE 점 : box-shadow(매 프레임 페인트) 대신 transform/opacity 파동 */
.live__dot { position: relative; animation: none; box-shadow: none; }
.live__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #e53935; animation: liveRing 1.6s ease-out infinite; }
@keyframes liveRing { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
/* 두 줄 : 2번째 줄은 반 칸(180px) 어긋난 채 같은 방향으로 */
.sites__track--1 { margin-bottom: 24px; }
.sites__track--2 { margin-left: -180px; animation: slideLeft3d 30s linear infinite; }
@media (max-width: 1024px) { .sites__track--2 { margin-left: -76px; } }
/* 레퍼런스처럼 위아래 반대 방향 : 1줄 ← / 2줄 → */
.sites__track--2 { animation: slideRight3d 30s linear infinite; }
@keyframes slideRight3d { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
/* 모바일 히어로 : 로고는 상단 헤더 하나만 */
.hero__logo { display: none !important; }

/* ===== 사장님 요청 수정 ===== */
/* 로고 마퀴 한 줄 : 로고 아래 원형 현장사진 */
.sites__track .sites__logo { flex-direction: column; gap: 18px; height: auto; overflow: visible; padding-bottom: 16px; }
.sites__track .sites__logo .sites__photo { width: 120px; height: 120px; max-width: none; max-height: none; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.sites__track .sites__logo .sites__mark { height: 48px; }
@media (max-width: 1024px) {
  .sites__track .sites__logo { gap: 12px; height: auto; }
  .sites__track .sites__logo .sites__photo { width: 76px; height: 76px; }
  .sites__track .sites__logo .sites__mark { height: 32px; }
}

/* 작업 현황 달력 */
.live__feed-head { justify-content: space-between; }
.cal__legend { display: flex; gap: 8px; padding: 16px 0 14px; font-size: 12px; font-weight: 500; }
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; }
.cal__legend span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.cal__legend .is-done { background: #eef7f2; color: var(--green); }
.cal__legend .is-done::before { background: var(--green); }
.cal__legend .is-ing { background: #fff8de; color: #8a6a00; }
.cal__legend .is-ing::before { background: #f2b705; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; border: 0; }
.cal__dow { padding: 6px 0 10px; text-align: center; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: #8a9690; background: none; border: 0; }
.cal__dow:first-child { color: #d9534f; } .cal__dow:last-child { color: #2f6fd0; }
.cal__cell { min-height: 92px; padding: 8px 6px 6px; border: 0; border-radius: 10px; background: #fafbfa; display: flex; flex-direction: column; gap: 3px; min-width: 0; transition: background .2s; }
.cal__cell.is-blank { background: none; }
.cal__cell.has-items { background: #f4f8f6; }
.cal__cell em { font-style: normal; font-size: 12px; font-weight: 300; color: #6b7873; font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.cal__cell.is-sun em { color: #d9534f; } .cal__cell.is-sat em { color: #2f6fd0; }
.cal__chip { display: block; padding: 2px 5px; border-radius: 6px; font-size: 11px; font-weight: 500; line-height: 1.4; color: #2b3a33; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal__chip::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; vertical-align: 1px; border-radius: 50%; }
.cal__chip.is-done::before { background: var(--green); }
.cal__chip.is-ing { background: #fff8de; color: #6f5500; }
.cal__chip.is-ing::before { background: #f2b705; }
.cal__more { padding: 0 5px; font-size: 10.5px; font-weight: 500; color: var(--green); }
.cal__agenda { display: none; list-style: none; margin-top: 16px; }
.cal__agenda li { display: flex; align-items: center; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.cal__agenda li.is-empty { color: #999; justify-content: center; }
.cal__agenda time { color: #aaa; font-size: 13px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cal__agenda strong { flex: 1; font-weight: 600; min-width: 0; }
.cal__tag { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.cal__tag.is-done { background: #e6f2ec; color: var(--green); }
.cal__tag.is-ing { background: #fff6cc; color: #9a7400; }
@media (max-width: 768px) {
  .cal { display: none; }
  .cal__agenda { display: block; }
}

.fl-btn--insta { background: #1a1a1a; color: #fff; }
.fl-btn[hidden] { display: none; }
.about__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
.about__tel { text-align: right; color: #fff; }
.about__tel span { display: block; font-size: 14px; color: rgba(255,255,255,.7); }
.about__tel strong { display: block; margin-top: 6px; font-size: 32px; font-weight: 800; letter-spacing: -.01em; color: var(--yellow); }
.sv-logo { position: absolute; top: 24px; left: 50%; z-index: 2; width: 150px; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px rgba(255,255,255,.9)); }
@media (max-width: 640px) {
  .about__head { flex-direction: column; gap: 14px; }
  .about__tel { text-align: left; }
  .about__tel strong { font-size: 26px; }
  .sv-logo { width: 110px; top: 16px; }
}

/* =========================================================
   디테일 정리 (AI 티 제거) : 그림자·선·그라데이션·작은 글씨 정리
   ========================================================= */
body { font-size: 16px; }
.wrap, .header__inner { width: min(1200px, 100% - 80px); margin-inline: auto; }
.header__inner { padding: 0; }
@media (max-width: 1024px) { .header__inner { width: 100%; padding: 0 20px; } }
@media (max-width: 640px) { .wrap { width: calc(100% - 48px); } }

/* 평소 상태에서는 그림자 없음 : 면의 톤 차이로 구분 */
.header.is-scrolled, .live__feed, .pf-table, .pf-counter, .qual__card, .qual-grid figure,
.cta-card, .sites__track .sites__logo .sites__photo, .fl-btn, .ba__handle span { box-shadow: none; }
.cta-card.is-in:hover { box-shadow: none; }
.header.is-scrolled { background: #fff; }

/* 가는 선 → 여백과 면 */
.logo__kr { border-left: 0; padding-left: 0; }
.mnav > a, .mnav summary, .mnav details a { border-bottom: 0; }
.why__right { border-top: 0; display: grid; gap: 10px; }
.wy-item { border-bottom: 0; background: var(--bg-light); border-radius: 12px; }
.wy-head { padding: 30px 26px; }
.wy-head:hover { padding-left: 32px; }
.wy-body p { padding: 0 26px; }
.wy-item.is-open .wy-body p { padding-bottom: 28px; }
.btn-line { border: 0; background: var(--yellow); color: var(--ink); }
.btn-line:hover { background: #fff; }
.cta-card { border: 0; background: var(--bg-light); }
.cta-card.is-in:hover { border-color: transparent; background: #e6f2ec; }
.pf-counter-btn { border: 0; background: var(--bg-light); }
.pf-row, .live__feed-head, .live__item, .cal__agenda li { border-bottom: 0; }
.live__item { background: var(--bg-light); border-radius: 10px; margin-bottom: 8px; padding: 16px 16px; }
.live__feed-head { padding-bottom: 12px; }
.live__stats { border-top: 0; padding-top: 0; }
.footer__bottom { border-top: 0; padding-top: 0; }
.sub-hero { border-bottom: 0; }
.sub-nav { border-bottom: 0; background: var(--bg-light); }
.values__list { border-top: 0; display: grid; gap: 10px; }
.values__list li { border-bottom: 0; background: rgba(255,255,255,.08); border-radius: 12px; padding: 32px 28px; }
.sx__list { border-top: 0; }
.sx__list li { border-bottom: 0; }
.sub-cta__btns a { border: 0; background: rgba(255,255,255,.14); }
.sub-cta__btns a:hover { background: #fff; }
.cal, .cal__dow, .cal__cell { border: 0; }
.cal { gap: 4px; }
.cal__cell { background: var(--bg-light); border-radius: 8px; }
.cal__dow { background: none; }

/* 그라데이션 제거 : 사진 위 글씨는 단색 스크림 */
.sv-dim { background: rgba(0,0,0,.42); }
.sv-item:hover .sv-dim { background: rgba(0,0,0,.3); }
.portfolio { background: var(--bg-light); }

/* 글자 크기 : 읽는 글씨는 13px 아래로 내리지 않음 */
.logo__kr em, .cal__chip, .cal__legend, .cal__tag, .cal__agenda time, .live__badge, .pair figcaption,
.ba__tag, .fl-btn, .cta-card p:last-child, .live__info span, .live__count-date, .live__stats span,
.cal__dow, .cal__cell em, .live__feed-head em { font-size: 13px; }
.fl-btn { width: 70px; height: 70px; }
.about__desc, .qual__desc, .contact__desc, .svc-desc, .sv-desc, .wy-body p, .vision__card p,
.values__list p, .pf-row, .form__checks label, .form__agree, .sx__list p { font-size: 16px; }
.about__desc, .qual__desc, .contact__desc { color: var(--text); }
.about .about__desc { color: rgba(255,255,255,.85); }
.sv-desc { color: rgba(255,255,255,.9); }
.wy-body p, .svc-desc, .vision__card p { color: var(--text); }
.sv-title { margin-top: 0; }
.hero__sub { letter-spacing: 0; }
.hero__sub:hover { letter-spacing: 0; }
.hero__brand span { font-size: 14px; letter-spacing: .2em; }

/* 모션 줄이기 설정 : 처음부터 완성된 화면으로 */
@media (prefers-reduced-motion: reduce) {
  .js-up, .sv-item, .gallery__grid figure, .hero__title, .hero__line, .hero__sub, .hero__brand {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
  .sites__track, .qual__track, .live__dot::after { animation: none !important; }
}

.sv-inner, .hero__content, .about__title { position: relative; z-index: 5; }
.sv-inner { position: absolute; }
.footer, .footer__bottom button, .cal__chip, .cal__tag, .cal__agenda time, .live__badge, .fl-btn,
.cal__legend, .live__info span, .form__field > span, .sub-crumb, .sub-tabs a, .live__count-date { font-size: 14px; }
.cal__chip { padding: 4px 6px; line-height: 1.35; }
.cal__cell { min-height: 96px; }
.live__count-num span { font-size: 22px; }

/* 서비스 카드 로고 : 어두운 사진 위 흰색 로고, 번짐 없음 */
.sv-logo { opacity: 1; }
.footer, .footer__bottom button, .cal__chip, .cal__tag, .cal__agenda li, .live__badge, .nav__item > a, .nav__sub a,
.form__field > span, .sub-crumb, .sub-tabs a { font-size: 15px; }
.cal__chip { padding: 5px 6px; }
.cal__cell { min-height: 104px; }

/* 드롭다운 : 닫힌 상태는 화면에 존재하지 않음 */
.nav__sub { display: none; opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: none; }
.nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub { display: block; }

/* 서브페이지 보정 */
.ba__tag, .pair figcaption { letter-spacing: 0; font-size: 14px; }
.sub-tabs a { color: #555; }
.sub-hero h1 { font-size: 88px; }
@media (max-width: 1024px) { .sub-hero h1 { font-size: 56px; } }
@media (max-width: 640px) { .sub-hero h1 { font-size: 40px; } }
.mnav:not(.is-open) { display: none; }

/* 닫힌 오버레이·플로팅은 화면에 존재하지 않게 */
.modal:not(.is-open), .lightbox:not(.is-open), .floating:not(.is-show) { visibility: hidden; }
.cta-card p, .cta-card p:last-child { color: #555; }

@media (prefers-reduced-motion: reduce) {
  .floating { transform: none; opacity: 1; transition: none; }
}
@media (prefers-reduced-motion: reduce) { .floating:not(.is-show) { visibility: visible; pointer-events: auto; } }

/* ===== 여백·폭 정리 (PC) : 섹션 간격 축소, 폭 통일 ===== */
@media (min-width: 1025px) {
  .wrap, .header__inner { width: min(1280px, 100% - 96px); }
  .about { padding: 96px 0 88px; }
  .about__bottom { margin-top: 44px; }
  .services { padding-bottom: 96px; }
  .sv-row { margin-bottom: 64px; }
  .why { padding: 96px 0; }
  .live { padding: 96px 0; }
  .live__head { margin-bottom: 40px; }
  .gallery { padding: 88px 0 80px; }
  .gallery__head { margin-bottom: 36px; }
  .qual { padding: 80px 0; }
  .contact { padding: 96px 0; }
  .contact--page { padding-top: 72px; }
  .sites { padding: 40px 0 56px; }
  .sub-cta { padding: 96px 20px; }
}

/* ===== 모바일 보정 ===== */
@media (max-width: 640px) {
  .live__count-num { flex-wrap: nowrap; white-space: nowrap; gap: 6px; }
  .live__count-num strong { font-size: 44px; }
  .live__count-num span { font-size: 16px; }
  /* 달력 : 모바일에서도 달력 그대로, 일정은 작은 글자로 */
  .cal { display: grid; gap: 2px; }
  .cal__agenda { display: block; }
  .cal__agenda li:nth-child(n+6) { display: none; }
  .cal__cell { min-height: 66px; padding: 3px 2px; flex-direction: column; flex-wrap: nowrap; align-content: stretch; gap: 2px; }
  .cal__cell em { font-size: 12px; margin-bottom: 0; padding-left: 2px; }
  .cal__chip { font-size: 9px; line-height: 1.3; padding: 2px 2px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.04em; }
  .cal__chip::before { display: none; }
  .cal__chip.is-done { background: #e6f2ec; color: var(--green); }
  .cal__chip.is-ing { background: #fff2bd; color: #6f5500; }
  .cal__chip.is-plan { background: #eceeed; color: #5d6a64; }
  .cal__more { font-size: 9px; padding: 0 2px; }
  .cal__dow { font-size: 12px; }
}
@media (max-width: 768px) { .cal { display: grid; } }
@media (max-width: 768px) { .cal__agenda { display: none; } }
@media (max-width: 640px) { .cal__agenda { display: block; } }

/* 현장 사진 : PC 한 줄 5장(같은 계열) → 모바일·태블릿 한 줄 3장, 각 줄의 오른쪽 2장 생략 */
@media (max-width: 1024px) { .gallery__grid figure:nth-child(5n+4), .gallery__grid figure:nth-child(5n+5) { display: none; } }

/* 전화 상담 버튼 : 모바일에서 '청소사 알아보기' 위에 */
.about__call { display: none; }
@media (max-width: 1024px) {
  .about__tel { display: none; }
  .about__bottom { align-items: stretch; }
  .about__call { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; background: #fff; color: var(--green); font-size: 16px; font-weight: 700; }
  .about__call strong { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
  .btn-line { justify-content: space-between; }
}

/* ===== 모바일 전용 상담 CTA 섹션 ===== */
.cta-m { display: none; }
@media (max-width: 1024px) {
  .cta-m { display: block; position: relative; overflow: hidden; padding: 72px 0; color: #fff; }
  .cta-m__bg { position: absolute; inset: 0; background: center/cover no-repeat; }
  .cta-m__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
  .cta-m__inner { position: relative; width: calc(100% - 48px); margin: 0 auto; max-width: 560px; display: grid; gap: 14px; text-align: center; }
  .cta-m__call { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 12px; background: var(--yellow); color: var(--ink); font-size: 18px; font-weight: 700; }
  .cta-m__call svg { width: 24px; height: 24px; fill: currentColor; }
  .cta-m__call strong { font-weight: 900; letter-spacing: -.01em; }
  .cta-m__quote { padding: 20px 12px; background: rgba(255, 255, 255, .14); font-size: 17px; font-weight: 600; }
  .cta-m__more { justify-self: center; margin-top: 18px; padding-bottom: 4px; font-size: 15px; color: rgba(255, 255, 255, .85); text-decoration: underline; text-underline-offset: 6px; }
}

/* 작업예정 */
.cal__legend .is-plan { background: #f1f3f2; color: #5d6a64; }
.cal__legend .is-plan::before { background: #b4bdb8; }
.cal__chip.is-plan { background: #fff; color: #7a8681; }
.cal__chip.is-plan::before { background: #b4bdb8; }
.cal__tag.is-plan { background: #f1f3f2; color: #5d6a64; }

/* 검색엔진용 텍스트 (화면에는 숨김) */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 푸터 : 항목 단위로 줄바꿈 (이메일 등이 중간에서 끊기지 않게) */
.footer__info .fi { display: inline-block; white-space: nowrap; }
.footer__info .fi + .fi::before { content: "|"; margin: 0 8px; opacity: .5; }

/* 달력 : 더보기 버튼 */
.cal__extra { display: none; }
.cal__cell.is-open .cal__extra { display: block; }
.cal__more { background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; }
.cal__more:hover { text-decoration: underline; }